chore: bump panda to 0.52

package.json

@@ -53,7 +53,7 @@
     "@fontsource/source-sans-pro": "^4.5.9",
     "@fontsource/source-serif-pro": "^4.5.7",
     "@ndla/types-backend": "^1.0.1",
-    "@pandacss/dev": "^0.48.0",
+    "@pandacss/dev": "^0.52.0",
     "@storybook/addon-a11y": "^8.5.3",
     "@storybook/addon-docs": "^8.5.3",
     "@storybook/addon-essentials": "^8.5.3",

packages/editor-components/package.json

@@ -46,7 +46,7 @@
   },
   "devDependencies": {
     "@ndla/preset-panda": "workspace:^",
-    "@pandacss/dev": "^0.48.0"
+    "@pandacss/dev": "^0.52.0"
   },
   "publishConfig": {
     "access": "public"

packages/icons/package.json

@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@ndla/preset-panda": "workspace:^",
-    "@pandacss/dev": "^0.48.0"
+    "@pandacss/dev": "^0.52.0"
   },
   "peerDependencies": {
     "react": ">= 18",

packages/ndla-audio-search/package.json

@@ -34,7 +34,7 @@
   "devDependencies": {
     "@ndla/preset-panda": "workspace:^",
     "@ndla/types-backend": "^1.0.1",
-    "@pandacss/dev": "^0.48.0"
+    "@pandacss/dev": "^0.52.0"
   },
   "peerDependencies": {
     "react": ">= 18",

packages/ndla-image-search/package.json

@@ -35,7 +35,7 @@
   "devDependencies": {
     "@ndla/preset-panda": "workspace:^",
     "@ndla/types-backend": "^1.0.1",
-    "@pandacss/dev": "^0.48.0"
+    "@pandacss/dev": "^0.52.0"
   },
   "peerDependencies": {
     "react": ">= 18",

packages/ndla-ui/package.json

@@ -53,7 +53,7 @@
     "@ndla/preset-panda": "workspace:^",
     "@ndla/types-backend": "^1.0.1",
     "@ndla/types-embed": "^5.0.10-alpha.0",
-    "@pandacss/dev": "^0.48.0"
+    "@pandacss/dev": "^0.52.0"
   },
   "publishConfig": {
     "access": "public"

packages/ndla-video-search/package.json

@@ -34,7 +34,7 @@
   "devDependencies": {
     "@ndla/preset-panda": "workspace:^",
     "@ndla/types-embed": "^5.0.10-alpha.0",
-    "@pandacss/dev": "^0.48.0"
+    "@pandacss/dev": "^0.52.0"
   },
   "peerDependencies": {
     "react": ">= 18",

packages/preset-panda/package.json

@@ -32,7 +32,7 @@
   ],
   "devDependencies": {
     "@ndla/core": "workspace:^",
-    "@pandacss/dev": "^0.48.0"
+    "@pandacss/dev": "^0.52.0"
   },
   "publishConfig": {
     "access": "public"

packages/primitives/package.json

@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@ndla/preset-panda": "workspace:^",
-    "@pandacss/dev": "^0.48.0"
+    "@pandacss/dev": "^0.52.0"
   },
   "peerDependencies": {
     "react": ">= 18",

packages/safelink/package.json

@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@ndla/preset-panda": "workspace:^",
-    "@pandacss/dev": "^0.48.0"
+    "@pandacss/dev": "^0.52.0"
   },
   "peerDependencies": {
     "react": ">= 18",

packages/styled-system/package.json

@@ -19,7 +19,7 @@
     "react-dom": ">= 18"
   },
   "devDependencies": {
-    "@pandacss/dev": "^0.48.0"
+    "@pandacss/dev": "^0.52.0"
   },
   "files": [
     "*"

packages/styled-system/src/css/conditions.js

@@ -1,6 +1,6 @@
 import { withoutSpace } from '../helpers.js';
 
-const conditionsStr = "_chinese,_ariaInvalid,_disabled,_on,_hover,_focus,_focusWithin,_focusVisible,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,mobile,mobileOnly,mobileDown,mobileWide,mobileWideOnly,mobileWideDown,tablet,tabletOnly,tabletDown,tabletWide,tabletWideOnly,tabletWideDown,desktop,desktopOnly,desktopDown,wide,wideOnly,wideDown,ultraWide,ultraWideOnly,ultraWideDown,mobileToMobileWide,mobileToTablet,mobileToTabletWide,mobileToDesktop,mobileToWide,mobileToUltraWide,mobileWideToTablet,mobileWideToTabletWide,mobileWideToDesktop,mobileWideToWide,mobileWideToUltraWide,tabletToTabletWide,tabletToDesktop,tabletToWide,tabletToUltraWide,tabletWideToDesktop,tabletWideToWide,tabletWideToUltraWide,desktopToWide,desktopToUltraWide,wideToUltraWide,@/mobile,@/mobileWide,@/tablet,@/tabletWide,@/desktop,@/wide,@/ultraWide,base"
+const conditionsStr = "_chinese,_ariaInvalid,_disabled,_on,_hover,_focus,_focusWithin,_focusVisible,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,mobile,mobileOnly,mobileDown,mobileWide,mobileWideOnly,mobileWideDown,tablet,tabletOnly,tabletDown,tabletWide,tabletWideOnly,tabletWideDown,desktop,desktopOnly,desktopDown,wide,wideOnly,wideDown,ultraWide,ultraWideOnly,ultraWideDown,mobileToMobileWide,mobileToTablet,mobileToTabletWide,mobileToDesktop,mobileToWide,mobileToUltraWide,mobileWideToTablet,mobileWideToTabletWide,mobileWideToDesktop,mobileWideToWide,mobileWideToUltraWide,tabletToTabletWide,tabletToDesktop,tabletToWide,tabletToUltraWide,tabletWideToDesktop,tabletWideToWide,tabletWideToUltraWide,desktopToWide,desktopToUltraWide,wideToUltraWide,@/mobile,@/mobileWide,@/tablet,@/tabletWide,@/desktop,@/wide,@/ultraWide,base"
 const conditions = new Set(conditionsStr.split(','))
 
 const conditionRegex = /^@|&|&$/

packages/styled-system/src/types/composition.d.ts

@@ -132,7 +132,33 @@ export type LayerStyle = CompositionStyleObject<LayerStyleProperty>
 
 export type LayerStyles = Recursive<Token<LayerStyle>>
 
+/* -----------------------------------------------------------------------------
+ * Motion styles
+ * -----------------------------------------------------------------------------*/
+
+type AnimationStyleProperty =
+  | 'animation'
+  | 'animationComposition'
+  | 'animationDelay'
+  | 'animationDirection'
+  | 'animationDuration'
+  | 'animationFillMode'
+  | 'animationIterationCount'
+  | 'animationName'
+  | 'animationPlayState'
+  | 'animationTimingFunction'
+  | 'animationRange'
+  | 'animationRangeStart'
+  | 'animationRangeEnd'
+  | 'animationTimeline'
+  | 'transformOrigin'
+
+export type AnimationStyle = CompositionStyleObject<AnimationStyleProperty>
+
+export type AnimationStyles = Recursive<Token<AnimationStyle>>
+
 export interface CompositionStyles {
   textStyles: TextStyles
   layerStyles: LayerStyles
+  animationStyles: AnimationStyles
 }

packages/styled-system/src/types/conditions.d.ts

@@ -38,6 +38,12 @@ export interface Conditions {
 	"_expanded": string
 	/** `&[data-highlighted]` */
 	"_highlighted": string
+	/** `&[data-complete]` */
+	"_complete": string
+	/** `&[data-incomplete]` */
+	"_incomplete": string
+	/** `&[data-dragging]` */
+	"_dragging": string
 	/** `&::before` */
 	"_before": string
 	/** `&::after` */
@@ -118,9 +124,9 @@ export interface Conditions {
 	"_invalid": string
 	/** `&:autofill` */
 	"_autofill": string
-	/** `&:in-range` */
+	/** `&:is(:in-range, [data-in-range])` */
 	"_inRange": string
-	/** `&:out-of-range` */
+	/** `&:is(:out-of-range, [data-outside-range])` */
 	"_outOfRange": string
 	/** `&::placeholder, &[data-placeholder]` */
 	"_placeholder": string
@@ -130,6 +136,14 @@ export interface Conditions {
 	"_pressed": string
 	/** `&:is([aria-selected=true], [data-selected])` */
 	"_selected": string
+	/** `&:is([aria-grabbed=true], [data-grabbed])` */
+	"_grabbed": string
+	/** `&[data-state=under-value]` */
+	"_underValue": string
+	/** `&[data-state=over-value]` */
+	"_overValue": string
+	/** `&[data-state=at-value]` */
+	"_atValue": string
 	/** `&:default` */
 	"_default": string
 	/** `&:optional` */
@@ -138,14 +152,30 @@ export interface Conditions {
 	"_open": string
 	/** `&:is([closed], [data-closed], [data-state="closed"])` */
 	"_closed": string
-	/** `&:fullscreen` */
+	/** `&is(:fullscreen, [data-fullscreen])` */
 	"_fullscreen": string
 	/** `&:is([data-loading], [aria-busy=true])` */
 	"_loading": string
+	/** `&:is([hidden], [data-hidden])` */
+	"_hidden": string
+	/** `&:is([aria-current=true], [data-current])` */
+	"_current": string
 	/** `&[aria-current=page]` */
 	"_currentPage": string
 	/** `&[aria-current=step]` */
 	"_currentStep": string
+	/** `&[data-today]` */
+	"_today": string
+	/** `&[data-unavailable]` */
+	"_unavailable": string
+	/** `&[data-range-start]` */
+	"_rangeStart": string
+	/** `&[data-range-end]` */
+	"_rangeEnd": string
+	/** `&[data-now]` */
+	"_now": string
+	/** `&[data-topmost]` */
+	"_topmost": string
 	/** `@media (prefers-reduced-motion: reduce)` */
 	"_motionReduce": string
 	/** `@media (prefers-reduced-motion: no-preference)` */
@@ -184,6 +214,8 @@ export interface Conditions {
 	"_horizontal": string
 	/** `&[data-orientation=vertical]` */
 	"_vertical": string
+	/** `& :where(svg)` */
+	"_icon": string
 	/** `@starting-style` */
 	"_starting": string
 	/** `@media screen and (min-width: 20rem)` */

packages/styled-system/src/types/global.d.ts

@@ -13,6 +13,7 @@ declare module '@pandacss/dev' {
   export function defineStyles(definition: SystemStyleObject): SystemStyleObject
   export function defineGlobalStyles(definition: GlobalStyleObject): Panda.GlobalStyleObject
   export function defineTextStyles(definition: CompositionStyles['textStyles']): Panda.TextStyles
+  export function defineAnimationStyles(definition: CompositionStyles['animationStyles']): Panda.AnimationStyles
   export function defineLayerStyles(definition: CompositionStyles['layerStyles']): Panda.LayerStyles
   export function definePattern<T extends PatternProperties>(config: PatternConfig<T>): Panda.PatternConfig
   export function defineParts<T extends Parts>(parts: T): (config: Partial<Record<keyof T, SystemStyleObject>>) => Partial<Record<keyof T, SystemStyleObject>>

packages/styled-system/src/types/prop-type.d.ts

@@ -144,7 +144,6 @@ export interface UtilityValues {
 	caretColor: Tokens["colors"];
 	scrollbar: "visible" | "hidden";
 	scrollbarColor: Tokens["colors"];
-	scrollbarGutter: Tokens["spacing"];
 	scrollbarWidth: Tokens["sizes"];
 	scrollMargin: Tokens["spacing"];
 	scrollMarginLeft: Tokens["spacing"];

packages/styled-system/src/types/style-props.d.ts

@@ -4840,7 +4840,7 @@ scrollbarColor?: ConditionalValue<UtilityValues["scrollbarColor"] | CssVars | Cs
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/scrollbar-gutter
    */
-scrollbarGutter?: ConditionalValue<UtilityValues["scrollbarGutter"] | CssVars | CssProperties["scrollbarGutter"] | AnyString>
+scrollbarGutter?: ConditionalValue<CssProperties["scrollbarGutter"] | AnyString>
  /**
    * The **`scrollbar-width`** property allows the author to set the maximum thickness of an element's scrollbars when they are shown.
    *