@pandacss/studio 0.12.2 → 0.13.1

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'>

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

@@ -12,9 +12,9 @@
 
 @layer utilities {
   .styles\:dark\:text_green500.dark,
-  .dark .styles\:dark\:text_green500 {
+    .dark .styles\:dark\:text_green500 {
     color: green500;
-  }
+    }
 
   .font_12px\/1\.5_Helvetica\,_Arial\,_sans-serif {
     font: 12px/1.5 Helvetica, Arial, sans-serif;
@@ -50,7 +50,7 @@
 
   .highlighted\:bg_border[data-highlighted] {
     background: var(--colors-border);
-  }
+    }
 
   .isolation_isolate {
     isolation: isolate;
@@ -62,7 +62,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 +215,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 +362,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 +377,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 +401,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 +525,7 @@
 
   .currentPage\:text_yellow\.300[aria-current='page'] {
     color: var(--colors-yellow-300);
-  }
+    }
 
   .fs_small {
     font-size: small;
@@ -619,7 +619,7 @@
 
   .\[\&\.active\]\:text_yellow\.300.active {
     color: var(--colors-yellow-300);
-  }
+    }
 
   .sr_true {
     position: absolute;
@@ -659,7 +659,7 @@
 
   .\[\&_li\]\:cursor_pointer li {
     cursor: pointer;
-  }
+    }
 
   .list-style_none {
     list-style: none;
@@ -959,90 +959,90 @@
 
   .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;
-      }
+    .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)
   }
-}
+    }
+}