@pandacss/studio 0.17.4 → 0.18.0

package/dist/studio.js

@@ -33,10 +33,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// ../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.31_typescript@5.2.2/node_modules/tsup/assets/cjs_shims.js
+// ../../node_modules/.pnpm/tsup@7.1.0_typescript@5.2.2/node_modules/tsup/assets/cjs_shims.js
 var getImportMetaUrl, importMetaUrl;
 var init_cjs_shims = __esm({
-  "../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.31_typescript@5.2.2/node_modules/tsup/assets/cjs_shims.js"() {
+  "../../node_modules/.pnpm/tsup@7.1.0_typescript@5.2.2/node_modules/tsup/assets/cjs_shims.js"() {
     "use strict";
     getImportMetaUrl = () => typeof document === "undefined" ? new URL("file:" + __filename).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
     importMetaUrl = /* @__PURE__ */ getImportMetaUrl();

package/dist/studio.mjs

@@ -34,12 +34,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 
-// ../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.31_typescript@5.2.2/node_modules/tsup/assets/esm_shims.js
+// ../../node_modules/.pnpm/tsup@7.1.0_typescript@5.2.2/node_modules/tsup/assets/esm_shims.js
 import { fileURLToPath } from "url";
 import path from "path";
 var getFilename, getDirname, __dirname;
 var init_esm_shims = __esm({
-  "../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.31_typescript@5.2.2/node_modules/tsup/assets/esm_shims.js"() {
+  "../../node_modules/.pnpm/tsup@7.1.0_typescript@5.2.2/node_modules/tsup/assets/esm_shims.js"() {
     "use strict";
     getFilename = () => fileURLToPath(import.meta.url);
     getDirname = () => path.dirname(getFilename());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.17.4",
+  "version": "0.18.0",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -43,12 +43,12 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "4.4.11",
-    "@pandacss/config": "0.17.4",
-    "@pandacss/logger": "0.17.4",
-    "@pandacss/node": "0.17.4",
-    "@pandacss/shared": "0.17.4",
-    "@pandacss/token-dictionary": "0.17.4",
-    "@pandacss/types": "0.17.4"
+    "@pandacss/config": "0.18.0",
+    "@pandacss/logger": "0.18.0",
+    "@pandacss/node": "0.18.0",
+    "@pandacss/shared": "0.18.0",
+    "@pandacss/token-dictionary": "0.18.0",
+    "@pandacss/types": "0.18.0"
   },
   "devDependencies": {
     "@types/react": "18.2.22",

package/src/components/semantic-color.tsx

@@ -3,11 +3,19 @@ import { ColorWrapper } from './color-wrapper'
 import context from '../lib/panda.context'
 
 const getSemanticColorValue = (variable: string): string => {
-  const name = variable.match(/var\(\s*--(.*?)\s*\)/)![1].replaceAll('-', '.')
+  const _name = variable.match(/var\(\s*--(.*?)\s*\)/)
+  if (!_name) return variable
+
+  const name = _name[1].replaceAll('-', '.')
   const token = context.tokens.getByName(name)
-  if (token) return token.originalValue
-  const defaultToken = context.tokens.getByName(`${name}.default`)
-  return getSemanticColorValue(defaultToken?.value)
+
+  if (!token) {
+    const defaultToken = context.tokens.getByName(`${name}.default`)
+    return getSemanticColorValue(defaultToken?.value)
+  }
+
+  if (token.value.startsWith('var(--')) return getSemanticColorValue(token.value)
+  return token.value
 }
 
 // remove initial underscore
@@ -36,9 +44,11 @@ export function SemanticColorDisplay(props: { value: string; condition: string;
           {cleanCondition(condition)}
         </panda.span>
       </ColorWrapper>
-      {token && <panda.div fontWeight="medium">{token}</panda.div>}
+      <panda.div fontWeight="medium" mt="2">
+        {token} &nbsp;
+      </panda.div>
       <panda.div opacity="0.7" fontSize="sm" textTransform="uppercase">
-        {value} - {tokenValue}
+        {value} {value !== tokenValue && `- ${tokenValue}`}
       </panda.div>
     </Flex>
   )

package/src/components/typography-playground.tsx

@@ -3,9 +3,11 @@ import { Stack, panda } from '../../styled-system/jsx'
 import context from '../lib/panda.context'
 import { TokenContent } from './token-content'
 import { TokenGroup } from './token-group'
+import type { Token } from '@pandacss/token-dictionary'
 
-const getFirstToken = <T extends Map<string, any>>(token: T) => Array.from(token.values())[0].extensions.prop
-const tokens = Object.fromEntries(context.tokens.categoryMap)
+const getFirstToken = <T extends Map<string, any>>(token?: T) =>
+  token ? Array.from(token.values())[0].extensions.prop : {}
+const tokens = Object.fromEntries<Map<string, Token> | undefined>(context.tokens.categoryMap)
 
 const defaultConfig = {
   fontSize: getFirstToken(tokens.fontSizes),
@@ -19,7 +21,7 @@ export function TypographyPlayground() {
   const configValues = Object.entries(config).reduce(
     (acc, [token, label]) => ({
       ...acc,
-      [token]: tokens[`${token}s`].get(label)?.value,
+      [token]: tokens[`${token}s`]?.get(label)?.value,
     }),
     {},
   )
@@ -37,7 +39,9 @@ export function TypographyPlayground() {
   }
 
   const renderTokenSwitch = (token: keyof typeof defaultConfig) => {
-    const values = Array.from(tokens[`${token}s`].values())
+    const _token = tokens[`${token}s`]
+    if (!_token) return
+    const values = Array.from(_token.values())
     return (
       <panda.select background="card" value={config[token]} onChange={(e) => onChangeConfig(e, token)}>
         {values.map((token) => (

package/src/lib/panda.context.ts

@@ -8,7 +8,7 @@ const { theme } = config
 const context = {
   tokens: new TokenDictionary(theme ?? {}),
   getCategory(category: keyof TokenDataTypes) {
-    return this.tokens.categoryMap.get(category)!
+    return this.tokens.categoryMap.get(category) ?? new Map()
   },
   textStyles: flatten(theme?.textStyles ?? {}),
   layerStyles: flatten(theme?.layerStyles ?? {}),

package/styled-system/chunks/src__components__color-wrapper.css

@@ -1,4 +1,5 @@
 @layer utilities {
+
   .w_full {
     width: var(--sizes-full)
     }
@@ -22,28 +23,36 @@
   .shadow_inset {
     box-shadow: var(--shadows-inset)
     }
-    .before\:content_\'\'::before {
-      content: ''
+
+  .before\:content_\'\'::before {
+    content: ''
         }
-    .before\:pos_absolute::before {
-      position: absolute
+
+  .before\:pos_absolute::before {
+    position: absolute
         }
-    .before\:rounded_sm::before {
-      border-radius: var(--radii-sm)
+
+  .before\:rounded_sm::before {
+    border-radius: var(--radii-sm)
         }
-    .before\:w_100\%::before {
-      width: 100%
+
+  .before\:w_100\%::before {
+    width: 100%
         }
-    .before\:h_100\%::before {
-      height: 100%
+
+  .before\:h_100\%::before {
+    height: 100%
         }
-    .before\:bg_24px::before {
-      background-size: 24px
+
+  .before\:bg_24px::before {
+    background-size: 24px
         }
-    .before\:z_-1::before {
-      z-index: -1
+
+  .before\:z_-1::before {
+    z-index: -1
         }
-    .before\:bg-img_check::before {
-      background-image: var(--assets-check)
+
+  .before\:bg-img_check::before {
+    background-image: var(--assets-check)
         }
 }

package/styled-system/chunks/src__components__colors.css

@@ -1,4 +1,5 @@
 @layer utilities {
+
   .font_semibold {
     font-weight: var(--font-weights-semibold)
     }

package/styled-system/chunks/src__components__empty-state.css

@@ -1,4 +1,5 @@
 @layer utilities {
+
   .fs_5xl {
     font-size: var(--font-sizes-5xl)
     }

package/styled-system/chunks/src__components__font-family.css

@@ -1,4 +1,5 @@
 @layer utilities {
+
   .fs_100px {
     font-size: 100px
     }

package/styled-system/chunks/src__components__font-tokens.css

@@ -1,4 +1,5 @@
 @layer utilities {
+
   .mb_3\.5 {
     margin-bottom: var(--spacing-3\.5)
     }

package/styled-system/chunks/src__components__input.css

@@ -1,4 +1,5 @@
 @layer utilities {
+
   .bg_transparent {
     background: var(--colors-transparent)
     }
@@ -22,8 +23,9 @@
   .text_neutral\.600 {
     color: var(--colors-neutral-600)
     }
-    .dark\:text_neutral\.300.dark, .dark .dark\:text_neutral\.300 {
-      color: var(--colors-neutral-300)
+
+  .dark\:text_neutral\.300.dark, .dark .dark\:text_neutral\.300 {
+    color: var(--colors-neutral-300)
         }
 
   .shadow_sm {
@@ -37,16 +39,20 @@
   .border_border {
     border-color: var(--colors-border)
     }
-    .focusWithin\:outline-style_solid:focus-within {
-      outline-style: solid
+
+  .focusWithin\:outline-style_solid:focus-within {
+    outline-style: solid
         }
-    .focusWithin\:ring_2px:focus-within {
-      outline-width: 2px
+
+  .focusWithin\:ring_2px:focus-within {
+    outline-width: 2px
         }
-    .focusWithin\:ring_2px:focus-within {
-      outline-offset: 2px
+
+  .focusWithin\:ring_2px:focus-within {
+    outline-offset: 2px
         }
-    .focusWithin\:ring_neutral\.400:focus-within {
-      outline-color: var(--colors-neutral-400)
+
+  .focusWithin\:ring_neutral\.400:focus-within {
+    outline-color: var(--colors-neutral-400)
         }
 }

package/styled-system/chunks/src__components__layer-styles.css

@@ -1,10 +1,12 @@
 @layer utilities {
-    .divide-y_1px > :not([hidden]) ~ :not([hidden]) {
-      border-top-width: 1px;
-      border-bottom-width: 0px
+
+  .divide-y_1px > :not([hidden]) ~ :not([hidden]) {
+    border-top-width: 1px;
+    border-bottom-width: 0px
         }
-    .divide_card > :not([hidden]) ~ :not([hidden]) {
-      border-color: var(--colors-card)
+
+  .divide_card > :not([hidden]) ~ :not([hidden]) {
+    border-color: var(--colors-card)
         }
 
   .px_1 {

package/styled-system/chunks/src__components__nav-item.css

@@ -1,4 +1,5 @@
 @layer utilities {
+
   .w_60 {
     width: var(--sizes-60)
     }
@@ -18,9 +19,6 @@
   .transition_all_0\.2s_ease {
     transition: all 0.2s ease
     }
-    .hover\:shadow_lg:is(:hover, [data-hover]) {
-      box-shadow: var(--shadows-lg)
-        }
     .\[\&_svg\]\:font_normal svg {
       font-weight: var(--font-weights-normal)
         }
@@ -52,4 +50,8 @@
   .mt_3 {
     margin-top: var(--spacing-3)
     }
+
+  .hover\:shadow_lg:is(:hover, [data-hover]) {
+    box-shadow: var(--shadows-lg)
+        }
 }

package/styled-system/chunks/src__components__overview.css

@@ -1,4 +1,5 @@
 @layer utilities {
+
   .bg_\#646cff {
     background: #646cff
     }
@@ -110,10 +111,12 @@
   .p_0 {
     padding: var(--spacing-0)
     }
-    .\[\&\:hover\]\:bg_\#4049f0:hover {
-      background: #4049f0
+
+  .\[\&\:hover\]\:bg_\#4049f0:hover {
+    background: #4049f0
         }
-    .\[\&\:hover\]\:shadow_lg:hover {
-      box-shadow: var(--shadows-lg)
+
+  .\[\&\:hover\]\:shadow_lg:hover {
+    box-shadow: var(--shadows-lg)
         }
 }

package/styled-system/chunks/src__components__radii.css

@@ -1,4 +1,5 @@
 @layer utilities {
+
   .w_80px {
     width: 80px
     }

package/styled-system/chunks/src__components__semantic-color.css

@@ -1,4 +1,5 @@
 @layer utilities {
+
   .h_12 {
     height: var(--sizes-12)
     }
@@ -39,6 +40,10 @@
     font-weight: var(--font-weights-medium)
     }
 
+  .mt_2 {
+    margin-top: var(--spacing-2)
+    }
+
   .opacity_0\.7 {
     opacity: 0.7
     }

package/styled-system/chunks/src__components__side-nav-item.css

@@ -1,4 +1,5 @@
 @layer utilities {
+
   .d_block {
     display: block
     }
@@ -18,10 +19,12 @@
   .font_medium {
     font-weight: var(--font-weights-medium)
     }
-    .hover\:text_yellow\.300:is(:hover, [data-hover]) {
-      color: var(--colors-yellow-300)
+
+  .currentPage\:text_yellow\.300[aria-current=page] {
+    color: var(--colors-yellow-300)
         }
-    .currentPage\:text_yellow\.300[aria-current=page] {
-      color: var(--colors-yellow-300)
+
+  .hover\:text_yellow\.300:is(:hover, [data-hover]) {
+    color: var(--colors-yellow-300)
         }
 }

package/styled-system/chunks/src__components__side-nav.css

@@ -1,4 +1,5 @@
 @layer utilities {
+
   .mt_8 {
     margin-top: var(--spacing-8)
     }

package/styled-system/chunks/src__components__text-styles.css

@@ -1,4 +1,5 @@
 @layer utilities {
+
   .px_1 {
     padding-inline: var(--spacing-1)
     }

package/styled-system/chunks/src__components__theme-toggle.css

@@ -1,9 +1,11 @@
 @layer utilities {
+
   .cursor_pointer {
     cursor: pointer
     }
-    .\[\&\.active\]\:text_yellow\.300.active {
-      color: var(--colors-yellow-300)
+
+  .\[\&\.active\]\:text_yellow\.300.active {
+    color: var(--colors-yellow-300)
         }
 
   .sr_true {

package/styled-system/chunks/src__components__token-content.css

@@ -1,4 +1,5 @@
 @layer utilities {
+
   .d_flex {
     display: flex
     }

package/styled-system/chunks/src__components__token-group.css

@@ -1,4 +1,5 @@
 @layer utilities {
+
   .d_flex {
     display: flex
     }

package/styled-system/chunks/src__components__typography-playground.css

@@ -1,4 +1,5 @@
 @layer utilities {
+
   .bg_card {
     background: var(--colors-card)
     }

package/styled-system/chunks/src__layouts__Sidebar.css

@@ -99,15 +99,15 @@
   .overflow_auto {
     overflow: auto
     }
-    @media screen and (min-width: 48em) {
 
-  .md\:px_6 {
+  @media screen and (min-width: 48em) {
+    .md\:px_6 {
       padding-inline: var(--spacing-6)
     }
         }
-    @media screen and (min-width: 64em) {
 
-  .lg\:px_8 {
+  @media screen and (min-width: 64em) {
+    .lg\:px_8 {
       padding-inline: var(--spacing-8)
     }
         }

package/styled-system/css/cva.mjs

@@ -24,9 +24,9 @@ export function cva(config) {
     return mergeCss(variantCss, compoundVariantCss)
   }
 
-  function merge(cvaConfig) {
-    const override = defaults(cvaConfig)
-    const variantKeys = uniq(override.variantKeys, Object.keys(variants))
+  function merge(__cva) {
+    const override = defaults(__cva.config)
+    const variantKeys = uniq(__cva.variantKeys, Object.keys(variants))
     return cva({
       base: mergeCss(base, override.base),
       variants: Object.fromEntries(

package/styled-system/jsx/factory-helper.mjs

@@ -10,7 +10,7 @@ export const composeShouldForwardProps = (tag, shouldForwardProp) =>
 export const composeCvaFn = (cvaA, cvaB) => {
   if (cvaA && !cvaB) return cvaA
   if (!cvaA && cvaB) return cvaB
-  if ((cvaA.__cva__ && cvaB.__cva__) || (cvaA.__recipe__ && cvaB.__recipe__)) return cvaA.merge(cvaB.config)
+  if ((cvaA.__cva__ && cvaB.__cva__) || (cvaA.__recipe__ && cvaB.__recipe__)) return cvaA.merge(cvaB)
   const error = new TypeError('Cannot merge cva with recipe. Please use either cva or recipe.')
   TypeError.captureStackTrace?.(error)
   throw error

package/styled-system/jsx/is-valid-prop.d.ts

@@ -1,4 +1,5 @@
 /* eslint-disable */
 declare const isCssProperty: (value: string) => boolean;
+declare const splitCssProps: <TProps extends Record<string, unknown>>(props: TProps) => [Pick<TProps, CssProperty>, Omit<TProps, CssProperty>]
 
-export { isCssProperty };
+export { isCssProperty, splitCssProps };

package/styled-system/jsx/is-valid-prop.mjs

@@ -1,3 +1,4 @@
+import { splitProps } from '../helpers.mjs';
 import { memo } from '../helpers.mjs';
 // src/index.ts
 var userGeneratedStr = "css,pos,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,insetInline,insetBlock,inset,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,insetX,insetY,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,outlineWidth,outlineColor,outline,outlineOffset,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,color,fontFamily,fontSize,fontWeight,fontSmoothing,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,textGradient,gradientFrom,gradientTo,gradientVia,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationDelay,transformOrigin,scale,scaleX,scaleY,translate,translateX,translateY,accentColor,caretColor,scrollBehavior,scrollbar,scrollMargin,scrollMarginX,scrollMarginY,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingX,scrollPaddingY,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,touchAction,userSelect,fill,stroke,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,colorPalette,textStyle,_hover,_focus,_focusWithin,_focusVisible,_disabled,_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,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl"
@@ -13,3 +14,4 @@ export {
   allCssProperties,
   isCssProperty
 };
+export const splitCssProps = /* @__PURE__ */ (props) =>  splitProps(props, isCssProperty)

package/styled-system/styles.css

@@ -99,10 +99,6 @@
     gap: var(--spacing-0\.5)
     }
 
-  .mt_2 {
-    margin-top: var(--spacing-2)
-    }
-
   .grid-cols_repeat\(auto-fit\,_minmax\(13rem\,_1fr\)\) {
     grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr))
     }
@@ -368,6 +364,10 @@
     border-color: var(--colors-neutral-700)
     }
 
+  .mt_2 {
+    margin-top: var(--spacing-2)
+    }
+
   .fs_sm {
     font-size: var(--font-sizes-sm)
     }