@pandacss/studio 0.13.0 → 0.14.0

package/styled-system/patterns/stack.mjs

@@ -1,21 +1,20 @@
-import { mapObject } from '../helpers.mjs'
-import { css } from '../css/index.mjs'
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
 
 const stackConfig = {
-  transform(props) {
-    const { align, justify, direction = 'column', gap = '10px', ...rest } = props
-    return {
-      display: 'flex',
-      flexDirection: direction,
-      alignItems: align,
-      justifyContent: justify,
-      gap,
-      ...rest,
-    }
-  },
-}
+transform(props) {
+  const { align, justify, direction = "column", gap = "10px", ...rest } = props;
+  return {
+    display: "flex",
+    flexDirection: direction,
+    alignItems: align,
+    justifyContent: justify,
+    gap,
+    ...rest
+  };
+}}
 
 export const getStackStyle = (styles = {}) => stackConfig.transform(styles, { map: mapObject })
 
 export const stack = (styles) => css(getStackStyle(styles))
-stack.raw = getStackStyle
+stack.raw = getStackStyle

package/styled-system/patterns/styled-link.d.ts

@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type StyledLinkProperties = {
    
@@ -14,7 +14,7 @@ type StyledLinkStyles = StyledLinkProperties & DistributiveOmit<SystemStyleObjec
 
 interface StyledLinkPatternFn {
   (styles?: StyledLinkStyles): string
-  raw: (styles: StyledLinkStyles) => SystemStyleObject
+  raw: (styles?: StyledLinkStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/styled-link.mjs

@@ -1,19 +1,18 @@
-import { mapObject } from '../helpers.mjs'
-import { css } from '../css/index.mjs'
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
 
 const styledLinkConfig = {
-  transform: (props) => ({
-    display: 'inline-flex',
-    alignItems: 'center',
-    opacity: '0.5',
-    borderBottom: '1px solid transparent',
-    cursor: 'pointer',
-    _hover: { opacity: 1, borderBottomColor: 'black' },
-    ...props,
-  }),
-}
+transform:(props) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  opacity: "0.5",
+  borderBottom: "1px solid transparent",
+  cursor: "pointer",
+  _hover: { opacity: 1, borderBottomColor: "black" },
+  ...props
+})}
 
 export const getStyledLinkStyle = (styles = {}) => styledLinkConfig.transform(styles, { map: mapObject })
 
 export const styledLink = (styles) => css(getStyledLinkStyle(styles))
-styledLink.raw = getStyledLinkStyle
+styledLink.raw = getStyledLinkStyle

package/styled-system/patterns/visually-hidden.d.ts

@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type VisuallyHiddenProperties = {
    
@@ -14,7 +14,7 @@ type VisuallyHiddenStyles = VisuallyHiddenProperties & DistributiveOmit<SystemSt
 
 interface VisuallyHiddenPatternFn {
   (styles?: VisuallyHiddenStyles): string
-  raw: (styles: VisuallyHiddenStyles) => SystemStyleObject
+  raw: (styles?: VisuallyHiddenStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/visually-hidden.mjs

@@ -1,16 +1,15 @@
-import { mapObject } from '../helpers.mjs'
-import { css } from '../css/index.mjs'
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
 
 const visuallyHiddenConfig = {
-  transform(props) {
-    return {
-      srOnly: true,
-      ...props,
-    }
-  },
-}
+transform(props) {
+  return {
+    srOnly: true,
+    ...props
+  };
+}}
 
 export const getVisuallyHiddenStyle = (styles = {}) => visuallyHiddenConfig.transform(styles, { map: mapObject })
 
 export const visuallyHidden = (styles) => css(getVisuallyHiddenStyle(styles))
-visuallyHidden.raw = getVisuallyHiddenStyle
+visuallyHidden.raw = getVisuallyHiddenStyle

package/styled-system/patterns/vstack.d.ts

@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type VstackProperties = {
    justify?: PropertyValue<'justifyContent'>
@@ -15,7 +15,7 @@ type VstackStyles = VstackProperties & DistributiveOmit<SystemStyleObject, keyof
 
 interface VstackPatternFn {
   (styles?: VstackStyles): string
-  raw: (styles: VstackStyles) => SystemStyleObject
+  raw: (styles?: VstackStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/vstack.mjs

@@ -1,21 +1,20 @@
-import { mapObject } from '../helpers.mjs'
-import { css } from '../css/index.mjs'
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
 
 const vstackConfig = {
-  transform(props) {
-    const { justify, gap = '10px', ...rest } = props
-    return {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: justify,
-      gap,
-      flexDirection: 'column',
-      ...rest,
-    }
-  },
-}
+transform(props) {
+  const { justify, gap = "10px", ...rest } = props;
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: justify,
+    gap,
+    flexDirection: "column",
+    ...rest
+  };
+}}
 
 export const getVstackStyle = (styles = {}) => vstackConfig.transform(styles, { map: mapObject })
 
 export const vstack = (styles) => css(getVstackStyle(styles))
-vstack.raw = getVstackStyle
+vstack.raw = getVstackStyle

package/styled-system/patterns/wrap.d.ts

@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type WrapProperties = {
    gap?: PropertyValue<'gap'>
@@ -18,7 +18,7 @@ type WrapStyles = WrapProperties & DistributiveOmit<SystemStyleObject, keyof Wra
 
 interface WrapPatternFn {
   (styles?: WrapStyles): string
-  raw: (styles: WrapStyles) => SystemStyleObject
+  raw: (styles?: WrapStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/wrap.mjs

@@ -1,23 +1,22 @@
-import { mapObject } from '../helpers.mjs'
-import { css } from '../css/index.mjs'
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
 
 const wrapConfig = {
-  transform(props) {
-    const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : '10px', align, justify, ...rest } = props
-    return {
-      display: 'flex',
-      flexWrap: 'wrap',
-      alignItems: align,
-      justifyContent: justify,
-      gap,
-      columnGap,
-      rowGap,
-      ...rest,
-    }
-  },
-}
+transform(props) {
+  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props;
+  return {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: align,
+    justifyContent: justify,
+    gap,
+    columnGap,
+    rowGap,
+    ...rest
+  };
+}}
 
 export const getWrapStyle = (styles = {}) => wrapConfig.transform(styles, { map: mapObject })
 
 export const wrap = (styles) => css(getWrapStyle(styles))
-wrap.raw = getWrapStyle
+wrap.raw = getWrapStyle

package/styled-system/reset.css

@@ -16,8 +16,9 @@
 
   html {
     line-height: 1.5;
-    --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
-      Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+      'Noto Color Emoji';
     -webkit-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
     -webkit-font-smoothing: antialiased;
@@ -187,4 +188,4 @@
   :-moz-focusring {
     outline: auto;
   }
-}
+}

package/styled-system/static.css

@@ -1,5 +1,5 @@
 @layer utilities {
   .text_red\.400 {
-    color: var(--colors-red-400);
-  }
-}
+    color: var(--colors-red-400)
+    }
+}

package/styled-system/styles.css

@@ -11,19 +11,6 @@
 @import './tokens/keyframes.css';
 
 @layer utilities {
-  .styles\:dark\:text_green500.dark,
-  .dark .styles\:dark\:text_green500 {
-    color: green500;
-  }
-
-  .font_12px\/1\.5_Helvetica\,_Arial\,_sans-serif {
-    font: 12px/1.5 Helvetica, Arial, sans-serif;
-  }
-
-  .text_red {
-    color: red;
-  }
-
   .w_26px {
     width: 26px;
   }
@@ -50,7 +37,7 @@
 
   .highlighted\:bg_border[data-highlighted] {
     background: var(--colors-border);
-  }
+    }
 
   .isolation_isolate {
     isolation: isolate;
@@ -62,7 +49,7 @@
 
   .expanded\:transform_rotate\(180deg\):where([aria-expanded='true'], [data-expanded]) {
     transform: rotate(180deg);
-  }
+    }
 
   .transition_all_\.2s_ease {
     transition: all 0.2s ease;
@@ -215,35 +202,35 @@
 
   .before\:content_\'\'::before {
     content: '';
-  }
+    }
 
   .before\:pos_absolute::before {
     position: absolute;
-  }
+    }
 
   .before\:rounded_sm::before {
     border-radius: var(--radii-sm);
-  }
+    }
 
   .before\:w_100\%::before {
     width: 100%;
-  }
+    }
 
   .before\:h_100\%::before {
     height: 100%;
-  }
+    }
 
   .before\:bg_24px::before {
     background-size: 24px;
-  }
+    }
 
   .before\:z_-1::before {
     z-index: -1;
-  }
+    }
 
   .before\:bg-img_check::before {
     background-image: var(--assets-check);
-  }
+    }
 
   .gap_0\.5 {
     gap: var(--spacing-0\.5);
@@ -362,9 +349,9 @@
   }
 
   .dark\:text_neutral\.300.dark,
-  .dark .dark\:text_neutral\.300 {
+    .dark .dark\:text_neutral\.300 {
     color: var(--colors-neutral-300);
-  }
+    }
 
   .shadow_sm {
     box-shadow: var(--shadows-sm);
@@ -377,11 +364,11 @@
   .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);
-  }
+    }
 
   .mt_1\.5 {
     margin-top: var(--spacing-1\.5);
@@ -401,23 +388,23 @@
 
   .\[\&_svg\]\:font_normal svg {
     font-weight: var(--font-weights-normal);
-  }
+    }
 
   .\[\&_svg\]\:fs_xx-large svg {
     font-size: xx-large;
-  }
+    }
 
   .\[\&_svg\]\:mb_6 svg {
     margin-bottom: var(--spacing-6);
-  }
+    }
 
   .\[\&_svg\]\:h_6 svg {
     height: var(--sizes-6);
-  }
+    }
 
   .\[\&_svg\]\:w_6 svg {
     width: var(--sizes-6);
-  }
+    }
 
   .mt_3 {
     margin-top: var(--spacing-3);
@@ -525,7 +512,7 @@
 
   .currentPage\:text_yellow\.300[aria-current='page'] {
     color: var(--colors-yellow-300);
-  }
+    }
 
   .fs_small {
     font-size: small;
@@ -619,7 +606,7 @@
 
   .\[\&\.active\]\:text_yellow\.300.active {
     color: var(--colors-yellow-300);
-  }
+    }
 
   .sr_true {
     position: absolute;
@@ -659,7 +646,7 @@
 
   .\[\&_li\]\:cursor_pointer li {
     cursor: pointer;
-  }
+    }
 
   .list-style_none {
     list-style: none;
@@ -959,90 +946,77 @@
 
   .focusWithin\:outline-style_solid:focus-within {
     outline-style: solid;
-  }
+    }
 
   .focusWithin\:ring_2px:focus-within {
     outline-width: 2px;
-  }
+    }
 
   .focusWithin\:ring_2px:focus-within {
     outline-offset: 2px;
-  }
+    }
 
   .focusWithin\:ring_neutral\.400:focus-within {
     outline-color: var(--colors-neutral-400);
-  }
+    }
 
   .hover\:bg_gray\.100:where(:hover, [data-hover]) {
     background-color: var(--colors-gray-100);
-  }
+    }
 
   .hover\:shadow_lg:where(:hover, [data-hover]) {
     box-shadow: var(--shadows-lg);
-  }
+    }
 
   .hover\:text_yellow\.300:where(:hover, [data-hover]) {
     color: var(--colors-yellow-300);
-  }
+    }
 
   .hover\:opacity_0\.8:where(:hover, [data-hover]) {
     opacity: 0.8;
-  }
+    }
 
   .hover\:bg_border:where(:hover, [data-hover]) {
     background-color: var(--colors-border);
-  }
+    }
 
   .hover\:bg_border:where(:hover, [data-hover]) {
     background: var(--colors-border);
-  }
+    }
 
   .hover\:opacity_0\.6:where(:hover, [data-hover]) {
     opacity: 0.6;
-  }
+    }
 
   .hover\:opacity_1:where(:hover, [data-hover]) {
     opacity: 1;
-  }
+    }
 
   .hover\:border-b_black:where(:hover, [data-hover]) {
     border-bottom-color: var(--colors-black);
-  }
-
-  .\[\&\:hover\]\:text_blue:hover {
-    color: blue;
-  }
+    }
 
   .\[\&\:hover\]\:bg_\#4049f0:hover {
     background: #4049f0;
-  }
+    }
 
   .\[\&\:hover\]\:shadow_lg:hover {
     box-shadow: var(--shadows-lg);
-  }
+    }
 
   .\[\&_li\]\:hover\:opacity_0\.8 li:where(:hover, [data-hover]) {
     opacity: 0.8;
-  }
-
-  @media screen and (min-width: 640px) {
-    @media screen and (min-width: 768px) {
-      .styles\:dark\:sm\:md\:text_red200.dark,
-      .dark .styles\:dark\:sm\:md\:text_red200 {
-        color: red200;
       }
-    }
-  }
 
   @media screen and (min-width: 768px) {
     .md\:px_6 {
-      padding-inline: var(--spacing-6);
-    }
+      padding-inline: var(--spacing-6)
   }
+    }
 
   @media screen and (min-width: 1024px) {
     .lg\:px_8 {
-      padding-inline: var(--spacing-8);
-    }
+      padding-inline: var(--spacing-8)
   }
-}
+    }
+}