@pandacss/studio 0.15.0 → 0.15.2

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

@@ -1,13 +1,14 @@
 @layer utilities {
+
   .d_flex {
-    display: flex;
-  }
+    display: flex
+    }
 
   .flex_column {
-    flex-direction: column;
-  }
+    flex-direction: column
+    }
 
   .gap_12 {
-    gap: var(--spacing-12);
-  }
-}
+    gap: var(--spacing-12)
+    }
+}

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

@@ -1,21 +1,22 @@
 @layer utilities {
+
   .d_flex {
-    display: flex;
-  }
+    display: flex
+    }
 
   .flex_column {
-    flex-direction: column;
-  }
+    flex-direction: column
+    }
 
   .gap_3 {
-    gap: var(--spacing-3);
-  }
+    gap: var(--spacing-3)
+    }
 
   .w_full {
-    width: var(--sizes-full);
-  }
+    width: var(--sizes-full)
+    }
 
   .mt_5 {
-    margin-top: var(--spacing-5);
-  }
-}
+    margin-top: var(--spacing-5)
+    }
+}

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

@@ -1,61 +1,62 @@
 @layer utilities {
+
   .bg_card {
-    background: var(--colors-card);
-  }
+    background: var(--colors-card)
+    }
 
   .ring_0 {
-    outline: 0;
-  }
+    outline: 0
+    }
 
   .pt_28 {
-    padding-top: var(--spacing-28);
-  }
+    padding-top: var(--spacing-28)
+    }
 
   .pb_28 {
-    padding-bottom: var(--spacing-28);
-  }
+    padding-bottom: var(--spacing-28)
+    }
 
   .mx_auto {
-    margin-inline: auto;
-  }
+    margin-inline: auto
+    }
 
   .w_fit-content {
-    width: fit-content;
-  }
+    width: fit-content
+    }
 
   .items_center {
-    align-items: center;
-  }
+    align-items: center
+    }
 
   .gap_1\.5 {
-    gap: var(--spacing-1\.5);
-  }
+    gap: var(--spacing-1\.5)
+    }
 
   .white-space_nowrap {
-    white-space: nowrap;
-  }
+    white-space: nowrap
+    }
 
   .w_48 {
-    width: var(--sizes-48);
-  }
+    width: var(--sizes-48)
+    }
 
   .text_capitalize {
-    text-transform: capitalize;
-  }
+    text-transform: capitalize
+    }
 
   .mr_2 {
-    margin-right: var(--spacing-2);
-  }
+    margin-right: var(--spacing-2)
+    }
 
   .d_flex {
-    display: flex;
-  }
+    display: flex
+    }
 
   .flex_column {
-    flex-direction: column;
-  }
+    flex-direction: column
+    }
 
   .gap_4 {
-    gap: var(--spacing-4);
-  }
-}
+    gap: var(--spacing-4)
+    }
+}

package/styled-system/chunks/src__layouts__Sidebar.css

@@ -1,149 +1,114 @@
 @layer utilities {
+
   .h_calc\(100vh_-_env\(safe-area-inset-bottom\)\) {
-    height: calc(100vh - env(safe-area-inset-bottom));
-  }
+    height: calc(100vh - env(safe-area-inset-bottom))
+    }
 
   .font_bold {
-    font-weight: var(--font-weights-bold);
-  }
+    font-weight: var(--font-weights-bold)
+    }
 
   .fs_2xl {
-    font-size: var(--font-sizes-2xl);
-  }
+    font-size: var(--font-sizes-2xl)
+    }
 
   .gap_2 {
-    gap: var(--spacing-2);
-  }
+    gap: var(--spacing-2)
+    }
 
   .w_16 {
-    width: var(--sizes-16);
-  }
+    width: var(--sizes-16)
+    }
 
   .mt_4 {
-    margin-top: var(--spacing-4);
-  }
+    margin-top: var(--spacing-4)
+    }
 
   .pt_14 {
-    padding-top: var(--spacing-14);
-  }
+    padding-top: var(--spacing-14)
+    }
 
   .pb_8 {
-    padding-bottom: var(--spacing-8);
-  }
+    padding-bottom: var(--spacing-8)
+    }
 
   .fs_3xl {
-    font-size: var(--font-sizes-3xl);
-  }
+    font-size: var(--font-sizes-3xl)
+    }
 
   .font_semibold {
-    font-weight: var(--font-weights-semibold);
-  }
+    font-weight: var(--font-weights-semibold)
+    }
 
   .mb_8 {
-    margin-bottom: var(--spacing-8);
-  }
+    margin-bottom: var(--spacing-8)
+    }
 
   .tracking_tight {
-    letter-spacing: var(--letter-spacings-tight);
-  }
+    letter-spacing: var(--letter-spacings-tight)
+    }
 
   .d_flex {
-    display: flex;
-  }
+    display: flex
+    }
 
   .flex_column {
-    flex-direction: column;
-  }
+    flex-direction: column
+    }
 
   .gap_10px {
-    gap: 10px;
-  }
+    gap: 10px
+    }
 
   .h_full {
-    height: var(--sizes-full);
-  }
+    height: var(--sizes-full)
+    }
 
   .min-w_60 {
-    min-width: var(--sizes-60);
-  }
+    min-width: var(--sizes-60)
+    }
 
   .px_12 {
-    padding-inline: var(--spacing-12);
-  }
+    padding-inline: var(--spacing-12)
+    }
 
   .py_8 {
-    padding-block: var(--spacing-8);
-  }
+    padding-block: var(--spacing-8)
+    }
 
   .pos_relative {
-    position: relative;
-  }
-
-  .max-w_8xl {
-    max-width: var(--sizes-8xl);
-  }
-
-  .mx_auto {
-    margin-inline: auto;
-  }
-
-  .px_4 {
-    padding-inline: var(--spacing-4);
-  }
-
-  .w_full {
-    width: var(--sizes-full);
-  }
-
-  .overflow_auto {
-    overflow: auto;
-  }
-
-  .md\:px_6 {
-    @media screen and (min-width: 768px) {
-      padding-inline: var(--spacing-6);
+    position: relative
     }
-  }
 
-  .lg\:px_8 {
-    @media screen and (min-width: 1024px) {
-      padding-inline: var(--spacing-8);
+  .max-w_8xl {
+    max-width: var(--sizes-8xl)
     }
-  }
 
-  .md\:px_6 {
-    @media screen and (min-width: 768px) {
-      padding-inline: var(--spacing-6);
+  .mx_auto {
+    margin-inline: auto
     }
-  }
 
-  .lg\:px_8 {
-    @media screen and (min-width: 1024px) {
-      padding-inline: var(--spacing-8);
+  .px_4 {
+    padding-inline: var(--spacing-4)
     }
-  }
 
-  .md\:px_6 {
-    @media screen and (min-width: 768px) {
-      padding-inline: var(--spacing-6);
+  .w_full {
+    width: var(--sizes-full)
     }
-  }
 
-  .lg\:px_8 {
-    @media screen and (min-width: 1024px) {
-      padding-inline: var(--spacing-8);
+  .overflow_auto {
+    overflow: auto
     }
-  }
 
-  .md\:px_6 {
-    @media screen and (min-width: 768px) {
-      padding-inline: var(--spacing-6);
+  @media screen and (min-width: 48em) {
+    .md\:px_6 {
+      padding-inline: var(--spacing-6)
     }
-  }
+        }
 
-  .lg\:px_8 {
-    @media screen and (min-width: 1024px) {
-      padding-inline: var(--spacing-8);
+  @media screen and (min-width: 64em) {
+    .lg\:px_8 {
+      padding-inline: var(--spacing-8)
     }
-  }
-}
+        }
+}

package/styled-system/helpers.mjs

@@ -210,7 +210,7 @@ var hypenateProperty = memo((property) => {
 });
 
 // src/slot.ts
-var getSlotRecipes = (recipe) => {
+var getSlotRecipes = (recipe = {}) => {
   const init = (slot) => ({
     className: [recipe.className, slot].filter(Boolean).join("__"),
     base: recipe.base?.[slot] ?? {},
@@ -218,7 +218,8 @@ var getSlotRecipes = (recipe) => {
     defaultVariants: recipe.defaultVariants ?? {},
     compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []
   });
-  const recipeParts = recipe.slots.map((slot) => [slot, init(slot)]);
+  const slots = recipe.slots ?? [];
+  const recipeParts = slots.map((slot) => [slot, init(slot)]);
   for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {
     for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {
       recipeParts.forEach(([slot, slotRecipe]) => {

package/styled-system/jsx/aspect-ratio.d.ts

@@ -4,7 +4,7 @@ import type { AspectRatioProperties } from '../patterns/aspect-ratio';
 import type { HTMLPandaProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export type AspectRatioProps = AspectRatioProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof AspectRatioProperties | 'aspectRatio'>
+export interface AspectRatioProps extends AspectRatioProperties, DistributiveOmit<HTMLPandaProps<'div'>, keyof AspectRatioProperties | 'aspectRatio'> {}
 
 
 export declare const AspectRatio: FunctionComponent<AspectRatioProps>

package/styled-system/jsx/bleed.d.ts

@@ -4,7 +4,7 @@ import type { BleedProperties } from '../patterns/bleed';
 import type { HTMLPandaProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export type BleedProps = BleedProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof BleedProperties >
+export interface BleedProps extends BleedProperties, DistributiveOmit<HTMLPandaProps<'div'>, keyof BleedProperties > {}
 
 
 export declare const Bleed: FunctionComponent<BleedProps>

package/styled-system/jsx/box.d.ts

@@ -4,7 +4,7 @@ import type { BoxProperties } from '../patterns/box';
 import type { HTMLPandaProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export type BoxProps = BoxProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof BoxProperties >
+export interface BoxProps extends BoxProperties, DistributiveOmit<HTMLPandaProps<'div'>, keyof BoxProperties > {}
 
 
 export declare const Box: FunctionComponent<BoxProps>

package/styled-system/jsx/center.d.ts

@@ -4,7 +4,7 @@ import type { CenterProperties } from '../patterns/center';
 import type { HTMLPandaProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export type CenterProps = CenterProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof CenterProperties >
+export interface CenterProps extends CenterProperties, DistributiveOmit<HTMLPandaProps<'div'>, keyof CenterProperties > {}
 
 
 export declare const Center: FunctionComponent<CenterProps>

package/styled-system/jsx/circle.d.ts

@@ -4,7 +4,7 @@ import type { CircleProperties } from '../patterns/circle';
 import type { HTMLPandaProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export type CircleProps = CircleProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof CircleProperties >
+export interface CircleProps extends CircleProperties, DistributiveOmit<HTMLPandaProps<'div'>, keyof CircleProperties > {}
 
 
 export declare const Circle: FunctionComponent<CircleProps>

package/styled-system/jsx/container.d.ts

@@ -4,7 +4,7 @@ import type { ContainerProperties } from '../patterns/container';
 import type { HTMLPandaProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export type ContainerProps = ContainerProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof ContainerProperties >
+export interface ContainerProps extends ContainerProperties, DistributiveOmit<HTMLPandaProps<'div'>, keyof ContainerProperties > {}
 
 
 export declare const Container: FunctionComponent<ContainerProps>

package/styled-system/jsx/divider.d.ts

@@ -4,7 +4,7 @@ import type { DividerProperties } from '../patterns/divider';
 import type { HTMLPandaProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export type DividerProps = DividerProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof DividerProperties >
+export interface DividerProps extends DividerProperties, DistributiveOmit<HTMLPandaProps<'div'>, keyof DividerProperties > {}
 
 
 export declare const Divider: FunctionComponent<DividerProps>

package/styled-system/jsx/factory.mjs

@@ -37,7 +37,8 @@ function cvaClass() {
     })
   })
 
-  PandaComponent.displayName = `panda.${Dynamic}`
+  const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+  PandaComponent.displayName = `panda.${name}`
   return PandaComponent
 }
 

package/styled-system/jsx/flex.d.ts

@@ -4,7 +4,7 @@ import type { FlexProperties } from '../patterns/flex';
 import type { HTMLPandaProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export type FlexProps = FlexProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof FlexProperties >
+export interface FlexProps extends FlexProperties, DistributiveOmit<HTMLPandaProps<'div'>, keyof FlexProperties > {}
 
 
 export declare const Flex: FunctionComponent<FlexProps>

package/styled-system/jsx/float.d.ts

@@ -4,7 +4,7 @@ import type { FloatProperties } from '../patterns/float';
 import type { HTMLPandaProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export type FloatProps = FloatProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof FloatProperties >
+export interface FloatProps extends FloatProperties, DistributiveOmit<HTMLPandaProps<'div'>, keyof FloatProperties > {}
 
 
 export declare const Float: FunctionComponent<FloatProps>

package/styled-system/jsx/grid-item.d.ts

@@ -4,7 +4,7 @@ import type { GridItemProperties } from '../patterns/grid-item';
 import type { HTMLPandaProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export type GridItemProps = GridItemProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof GridItemProperties >
+export interface GridItemProps extends GridItemProperties, DistributiveOmit<HTMLPandaProps<'div'>, keyof GridItemProperties > {}
 
 
 export declare const GridItem: FunctionComponent<GridItemProps>

package/styled-system/jsx/grid.d.ts

@@ -4,7 +4,7 @@ import type { GridProperties } from '../patterns/grid';
 import type { HTMLPandaProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export type GridProps = GridProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof GridProperties >
+export interface GridProps extends GridProperties, DistributiveOmit<HTMLPandaProps<'div'>, keyof GridProperties > {}
 
 
 export declare const Grid: FunctionComponent<GridProps>

package/styled-system/jsx/hstack.d.ts

@@ -4,7 +4,7 @@ import type { HstackProperties } from '../patterns/hstack';
 import type { HTMLPandaProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export type HstackProps = HstackProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof HstackProperties >
+export interface HstackProps extends HstackProperties, DistributiveOmit<HTMLPandaProps<'div'>, keyof HstackProperties > {}
 
 
 export declare const HStack: FunctionComponent<HstackProps>

package/styled-system/jsx/link-box.d.ts

@@ -4,7 +4,7 @@ import type { LinkBoxProperties } from '../patterns/link-box';
 import type { HTMLPandaProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export type LinkBoxProps = LinkBoxProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof LinkBoxProperties >
+export interface LinkBoxProps extends LinkBoxProperties, DistributiveOmit<HTMLPandaProps<'div'>, keyof LinkBoxProperties > {}
 
 
 export declare const LinkBox: FunctionComponent<LinkBoxProps>

package/styled-system/jsx/link-overlay.d.ts

@@ -4,7 +4,7 @@ import type { LinkOverlayProperties } from '../patterns/link-overlay';
 import type { HTMLPandaProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export type LinkOverlayProps = LinkOverlayProperties & DistributiveOmit<HTMLPandaProps<'a'>, keyof LinkOverlayProperties >
+export interface LinkOverlayProps extends LinkOverlayProperties, DistributiveOmit<HTMLPandaProps<'a'>, keyof LinkOverlayProperties > {}
 
 
 export declare const LinkOverlay: FunctionComponent<LinkOverlayProps>

package/styled-system/jsx/spacer.d.ts

@@ -4,7 +4,7 @@ import type { SpacerProperties } from '../patterns/spacer';
 import type { HTMLPandaProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export type SpacerProps = SpacerProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof SpacerProperties >
+export interface SpacerProps extends SpacerProperties, DistributiveOmit<HTMLPandaProps<'div'>, keyof SpacerProperties > {}
 
 
 export declare const Spacer: FunctionComponent<SpacerProps>

package/styled-system/jsx/square.d.ts

@@ -4,7 +4,7 @@ import type { SquareProperties } from '../patterns/square';
 import type { HTMLPandaProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export type SquareProps = SquareProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof SquareProperties >
+export interface SquareProps extends SquareProperties, DistributiveOmit<HTMLPandaProps<'div'>, keyof SquareProperties > {}
 
 
 export declare const Square: FunctionComponent<SquareProps>

package/styled-system/jsx/stack.d.ts

@@ -4,7 +4,7 @@ import type { StackProperties } from '../patterns/stack';
 import type { HTMLPandaProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export type StackProps = StackProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof StackProperties >
+export interface StackProps extends StackProperties, DistributiveOmit<HTMLPandaProps<'div'>, keyof StackProperties > {}
 
 
 export declare const Stack: FunctionComponent<StackProps>

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

@@ -4,7 +4,7 @@ import type { StyledLinkProperties } from '../patterns/styled-link';
 import type { HTMLPandaProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export type StyledLinkProps = StyledLinkProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof StyledLinkProperties >
+export interface StyledLinkProps extends StyledLinkProperties, DistributiveOmit<HTMLPandaProps<'div'>, keyof StyledLinkProperties > {}
 
 
 export declare const StyledLink: FunctionComponent<StyledLinkProps>

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

@@ -4,7 +4,7 @@ import type { VisuallyHiddenProperties } from '../patterns/visually-hidden';
 import type { HTMLPandaProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export type VisuallyHiddenProps = VisuallyHiddenProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof VisuallyHiddenProperties >
+export interface VisuallyHiddenProps extends VisuallyHiddenProperties, DistributiveOmit<HTMLPandaProps<'div'>, keyof VisuallyHiddenProperties > {}
 
 
 export declare const VisuallyHidden: FunctionComponent<VisuallyHiddenProps>

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

@@ -4,7 +4,7 @@ import type { VstackProperties } from '../patterns/vstack';
 import type { HTMLPandaProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export type VstackProps = VstackProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof VstackProperties >
+export interface VstackProps extends VstackProperties, DistributiveOmit<HTMLPandaProps<'div'>, keyof VstackProperties > {}
 
 
 export declare const VStack: FunctionComponent<VstackProps>

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

@@ -4,7 +4,7 @@ import type { WrapProperties } from '../patterns/wrap';
 import type { HTMLPandaProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export type WrapProps = WrapProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof WrapProperties >
+export interface WrapProps extends WrapProperties, DistributiveOmit<HTMLPandaProps<'div'>, keyof WrapProperties > {}
 
 
 export declare const Wrap: FunctionComponent<WrapProps>

package/styled-system/patterns/aspect-ratio.d.ts

@@ -5,12 +5,12 @@ import type { PropertyValue } from '../types/prop-type';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 
-export type AspectRatioProperties = {
+export interface AspectRatioProperties {
    ratio?: ConditionalValue<number>
 }
 
 
-type AspectRatioStyles = AspectRatioProperties & DistributiveOmit<SystemStyleObject, keyof AspectRatioProperties | 'aspectRatio'>
+interface AspectRatioStyles extends AspectRatioProperties, DistributiveOmit<SystemStyleObject, keyof AspectRatioProperties | 'aspectRatio'> {}
 
 interface AspectRatioPatternFn {
   (styles?: AspectRatioStyles): string

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

@@ -5,13 +5,13 @@ import type { PropertyValue } from '../types/prop-type';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 
-export type BleedProperties = {
+export interface BleedProperties {
    inline?: PropertyValue<'marginInline'>
 	block?: PropertyValue<'marginBlock'>
 }
 
 
-type BleedStyles = BleedProperties & DistributiveOmit<SystemStyleObject, keyof BleedProperties >
+interface BleedStyles extends BleedProperties, DistributiveOmit<SystemStyleObject, keyof BleedProperties > {}
 
 interface BleedPatternFn {
   (styles?: BleedStyles): string

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

@@ -5,12 +5,12 @@ import type { PropertyValue } from '../types/prop-type';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 
-export type BoxProperties = {
+export interface BoxProperties {
    
 }
 
 
-type BoxStyles = BoxProperties & DistributiveOmit<SystemStyleObject, keyof BoxProperties >
+interface BoxStyles extends BoxProperties, DistributiveOmit<SystemStyleObject, keyof BoxProperties > {}
 
 interface BoxPatternFn {
   (styles?: BoxStyles): string