@pandacss/studio 0.15.1 → 0.15.2

package/styled-system/tokens/index.css

@@ -420,18 +420,18 @@
   --breakpoints-xl: 1280px;
   --breakpoints-2xl: 1536px;
   --shadows-inset: inset 0 0 0 1px rgba(0,0,0,0.1);
-  --colors-text: #000;
-  --colors-bg: #fff;
-  --colors-card: #e5e5e5;
-  --colors-border: #d4d4d4
+  --colors-text: var(--colors-black);
+  --colors-bg: var(--colors-white);
+  --colors-card: var(--colors-neutral-200);
+  --colors-border: var(--colors-neutral-300)
 }
 
 .dark {
   --shadows-inset: inset 0 0 0 1px rgba(255,255,255,0.2);
-  --colors-text: #e5e5e5;
-  --colors-bg: #171717;
-  --colors-card: #262626;
-  --colors-border: #404040
+  --colors-text: var(--colors-neutral-200);
+  --colors-bg: var(--colors-neutral-900);
+  --colors-card: var(--colors-neutral-800);
+  --colors-border: var(--colors-neutral-700)
 }
   }
   

package/styled-system/types/composition.d.ts

@@ -1,11 +1,11 @@
 /* eslint-disable */
 import type {  CompositionStyleObject  } from './system-types';
 
-type Recursive<T> = {
+interface Recursive<T> {
   [key: string]: Recursive<T> | T
 }
 
-export type Token<Value = any> = {
+export interface Token<Value = any> {
   value: Value
   description?: string
 }
@@ -105,7 +105,7 @@ export type LayerStyle = CompositionStyleObject<LayerStyleProperty>
 
 export type LayerStyles = Recursive<Token<LayerStyle>>
 
-export type CompositionStyles = {
+export interface CompositionStyles {
   textStyles: TextStyles
   layerStyles: LayerStyles
 }

package/styled-system/types/conditions.d.ts

@@ -1,120 +1,233 @@
 /* eslint-disable */
 import type { AnySelector, Selectors } from './selectors';
 
-export type Conditions = {
-	/** `&:is(:hover, [data-hover])` */"_hover": string
-	/** `&:is(:focus, [data-focus])` */"_focus": string
-	/** `&:focus-within` */"_focusWithin": string
-	/** `&:is(:focus-visible, [data-focus-visible])` */"_focusVisible": string
-	/** `&:is(:disabled, [disabled], [data-disabled])` */"_disabled": string
-	/** `&:is(:active, [data-active])` */"_active": string
-	/** `&:visited` */"_visited": string
-	/** `&:target` */"_target": string
-	/** `&:is(:read-only, [data-read-only])` */"_readOnly": string
-	/** `&:read-write` */"_readWrite": string
-	/** `&:is(:empty, [data-empty])` */"_empty": string
-	/** `&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])` */"_checked": string
-	/** `&:enabled` */"_enabled": string
-	/** `&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])` */"_expanded": string
-	/** `&[data-highlighted]` */"_highlighted": string
-	/** `&::before` */"_before": string
-	/** `&::after` */"_after": string
-	/** `&::first-letter` */"_firstLetter": string
-	/** `&::first-line` */"_firstLine": string
-	/** `&::marker` */"_marker": string
-	/** `&::selection` */"_selection": string
-	/** `&::file-selector-button` */"_file": string
-	/** `&::backdrop` */"_backdrop": string
-	/** `&:first-child` */"_first": string
-	/** `&:last-child` */"_last": string
-	/** `&:only-child` */"_only": string
-	/** `&:nth-child(even)` */"_even": string
-	/** `&:nth-child(odd)` */"_odd": string
-	/** `&:first-of-type` */"_firstOfType": string
-	/** `&:last-of-type` */"_lastOfType": string
-	/** `&:only-of-type` */"_onlyOfType": string
-	/** `.peer:is(:focus, [data-focus]) ~ &` */"_peerFocus": string
-	/** `.peer:is(:hover, [data-hover]) ~ &` */"_peerHover": string
-	/** `.peer:is(:active, [data-active]) ~ &` */"_peerActive": string
-	/** `.peer:focus-within ~ &` */"_peerFocusWithin": string
-	/** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */"_peerFocusVisible": string
-	/** `.peer:is(:disabled, [disabled], [data-disabled]) ~ &` */"_peerDisabled": string
-	/** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &` */"_peerChecked": string
-	/** `.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &` */"_peerInvalid": string
-	/** `.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &` */"_peerExpanded": string
-	/** `.peer:placeholder-shown ~ &` */"_peerPlaceholderShown": string
-	/** `.group:is(:focus, [data-focus]) &` */"_groupFocus": string
-	/** `.group:is(:hover, [data-hover]) &` */"_groupHover": string
-	/** `.group:is(:active, [data-active]) &` */"_groupActive": string
-	/** `.group:focus-within &` */"_groupFocusWithin": string
-	/** `.group:is(:focus-visible, [data-focus-visible]) &` */"_groupFocusVisible": string
-	/** `.group:is(:disabled, [disabled], [data-disabled]) &` */"_groupDisabled": string
-	/** `.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &` */"_groupChecked": string
-	/** `.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &` */"_groupExpanded": string
-	/** `.group:invalid &` */"_groupInvalid": string
-	/** `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate")` */"_indeterminate": string
-	/** `&:required` */"_required": string
-	/** `&:is(:valid, [data-valid])` */"_valid": string
-	/** `&:is(:invalid, [data-invalid])` */"_invalid": string
-	/** `&:autofill` */"_autofill": string
-	/** `&:in-range` */"_inRange": string
-	/** `&:out-of-range` */"_outOfRange": string
-	/** `&::placeholder` */"_placeholder": string
-	/** `&:placeholder-shown` */"_placeholderShown": string
-	/** `&:is([aria-pressed=true], [data-pressed])` */"_pressed": string
-	/** `&:is([aria-selected=true], [data-selected])` */"_selected": string
-	/** `&:default` */"_default": string
-	/** `&:optional` */"_optional": string
-	/** `&:is([open], [data-open], [data-state="open"])` */"_open": string
-	/** `&:fullscreen` */"_fullscreen": string
-	/** `&:is([data-loading], [aria-busy=true])` */"_loading": string
-	/** `&[aria-current=page]` */"_currentPage": string
-	/** `&[aria-current=step]` */"_currentStep": string
-	/** `@media (prefers-reduced-motion: reduce)` */"_motionReduce": string
-	/** `@media (prefers-reduced-motion: no-preference)` */"_motionSafe": string
-	/** `@media print` */"_print": string
-	/** `@media (orientation: landscape)` */"_landscape": string
-	/** `@media (orientation: portrait)` */"_portrait": string
-	/** ` &.dark, .dark &` */"_dark": string
-	/** ` &.light, .light &` */"_light": string
-	/** `@media (prefers-color-scheme: dark)` */"_osDark": string
-	/** `@media (prefers-color-scheme: light)` */"_osLight": string
-	/** `@media (forced-colors: active)` */"_highContrast": string
-	/** `@media (prefers-contrast: less)` */"_lessContrast": string
-	/** `@media (prefers-contrast: more)` */"_moreContrast": string
-	/** `[dir=ltr] &` */"_ltr": string
-	/** `[dir=rtl] &` */"_rtl": string
-	/** `&::-webkit-scrollbar` */"_scrollbar": string
-	/** `&::-webkit-scrollbar-thumb` */"_scrollbarThumb": string
-	/** `&::-webkit-scrollbar-track` */"_scrollbarTrack": string
-	/** `&[data-orientation=horizontal]` */"_horizontal": string
-	/** `&[data-orientation=vertical]` */"_vertical": string
-	/** `@media screen and (min-width: 40em)` */"sm": string
-	/** `@media screen and (min-width: 40em) and (max-width: 47.996875em)` */"smOnly": string
-	/** `@media screen and (max-width: 40em)` */"smDown": string
-	/** `@media screen and (min-width: 48em)` */"md": string
-	/** `@media screen and (min-width: 48em) and (max-width: 63.996875em)` */"mdOnly": string
-	/** `@media screen and (max-width: 48em)` */"mdDown": string
-	/** `@media screen and (min-width: 64em)` */"lg": string
-	/** `@media screen and (min-width: 64em) and (max-width: 79.996875em)` */"lgOnly": string
-	/** `@media screen and (max-width: 64em)` */"lgDown": string
-	/** `@media screen and (min-width: 80em)` */"xl": string
-	/** `@media screen and (min-width: 80em) and (max-width: 95.996875em)` */"xlOnly": string
-	/** `@media screen and (max-width: 80em)` */"xlDown": string
-	/** `@media screen and (min-width: 96em)` */"2xl": string
-	/** `@media screen and (min-width: 96em)` */"2xlOnly": string
-	/** `@media screen and (max-width: 96em)` */"2xlDown": string
-	/** `@media screen and (min-width: 40em) and (max-width: 47.996875em)` */"smToMd": string
-	/** `@media screen and (min-width: 40em) and (max-width: 63.996875em)` */"smToLg": string
-	/** `@media screen and (min-width: 40em) and (max-width: 79.996875em)` */"smToXl": string
-	/** `@media screen and (min-width: 40em) and (max-width: 95.996875em)` */"smTo2xl": string
-	/** `@media screen and (min-width: 48em) and (max-width: 63.996875em)` */"mdToLg": string
-	/** `@media screen and (min-width: 48em) and (max-width: 79.996875em)` */"mdToXl": string
-	/** `@media screen and (min-width: 48em) and (max-width: 95.996875em)` */"mdTo2xl": string
-	/** `@media screen and (min-width: 64em) and (max-width: 79.996875em)` */"lgToXl": string
-	/** `@media screen and (min-width: 64em) and (max-width: 95.996875em)` */"lgTo2xl": string
-	/** `@media screen and (min-width: 80em) and (max-width: 95.996875em)` */"xlTo2xl": string
-	/** The base (=no conditions) styles to apply  */"base": string
+export interface Conditions {
+	/** `&:is(:hover, [data-hover])` */
+	"_hover": string
+	/** `&:is(:focus, [data-focus])` */
+	"_focus": string
+	/** `&:focus-within` */
+	"_focusWithin": string
+	/** `&:is(:focus-visible, [data-focus-visible])` */
+	"_focusVisible": string
+	/** `&:is(:disabled, [disabled], [data-disabled])` */
+	"_disabled": string
+	/** `&:is(:active, [data-active])` */
+	"_active": string
+	/** `&:visited` */
+	"_visited": string
+	/** `&:target` */
+	"_target": string
+	/** `&:is(:read-only, [data-read-only])` */
+	"_readOnly": string
+	/** `&:read-write` */
+	"_readWrite": string
+	/** `&:is(:empty, [data-empty])` */
+	"_empty": string
+	/** `&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])` */
+	"_checked": string
+	/** `&:enabled` */
+	"_enabled": string
+	/** `&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])` */
+	"_expanded": string
+	/** `&[data-highlighted]` */
+	"_highlighted": string
+	/** `&::before` */
+	"_before": string
+	/** `&::after` */
+	"_after": string
+	/** `&::first-letter` */
+	"_firstLetter": string
+	/** `&::first-line` */
+	"_firstLine": string
+	/** `&::marker` */
+	"_marker": string
+	/** `&::selection` */
+	"_selection": string
+	/** `&::file-selector-button` */
+	"_file": string
+	/** `&::backdrop` */
+	"_backdrop": string
+	/** `&:first-child` */
+	"_first": string
+	/** `&:last-child` */
+	"_last": string
+	/** `&:only-child` */
+	"_only": string
+	/** `&:nth-child(even)` */
+	"_even": string
+	/** `&:nth-child(odd)` */
+	"_odd": string
+	/** `&:first-of-type` */
+	"_firstOfType": string
+	/** `&:last-of-type` */
+	"_lastOfType": string
+	/** `&:only-of-type` */
+	"_onlyOfType": string
+	/** `.peer:is(:focus, [data-focus]) ~ &` */
+	"_peerFocus": string
+	/** `.peer:is(:hover, [data-hover]) ~ &` */
+	"_peerHover": string
+	/** `.peer:is(:active, [data-active]) ~ &` */
+	"_peerActive": string
+	/** `.peer:focus-within ~ &` */
+	"_peerFocusWithin": string
+	/** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */
+	"_peerFocusVisible": string
+	/** `.peer:is(:disabled, [disabled], [data-disabled]) ~ &` */
+	"_peerDisabled": string
+	/** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &` */
+	"_peerChecked": string
+	/** `.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &` */
+	"_peerInvalid": string
+	/** `.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &` */
+	"_peerExpanded": string
+	/** `.peer:placeholder-shown ~ &` */
+	"_peerPlaceholderShown": string
+	/** `.group:is(:focus, [data-focus]) &` */
+	"_groupFocus": string
+	/** `.group:is(:hover, [data-hover]) &` */
+	"_groupHover": string
+	/** `.group:is(:active, [data-active]) &` */
+	"_groupActive": string
+	/** `.group:focus-within &` */
+	"_groupFocusWithin": string
+	/** `.group:is(:focus-visible, [data-focus-visible]) &` */
+	"_groupFocusVisible": string
+	/** `.group:is(:disabled, [disabled], [data-disabled]) &` */
+	"_groupDisabled": string
+	/** `.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &` */
+	"_groupChecked": string
+	/** `.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &` */
+	"_groupExpanded": string
+	/** `.group:invalid &` */
+	"_groupInvalid": string
+	/** `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate")` */
+	"_indeterminate": string
+	/** `&:required` */
+	"_required": string
+	/** `&:is(:valid, [data-valid])` */
+	"_valid": string
+	/** `&:is(:invalid, [data-invalid])` */
+	"_invalid": string
+	/** `&:autofill` */
+	"_autofill": string
+	/** `&:in-range` */
+	"_inRange": string
+	/** `&:out-of-range` */
+	"_outOfRange": string
+	/** `&::placeholder` */
+	"_placeholder": string
+	/** `&:placeholder-shown` */
+	"_placeholderShown": string
+	/** `&:is([aria-pressed=true], [data-pressed])` */
+	"_pressed": string
+	/** `&:is([aria-selected=true], [data-selected])` */
+	"_selected": string
+	/** `&:default` */
+	"_default": string
+	/** `&:optional` */
+	"_optional": string
+	/** `&:is([open], [data-open], [data-state="open"])` */
+	"_open": string
+	/** `&:fullscreen` */
+	"_fullscreen": string
+	/** `&:is([data-loading], [aria-busy=true])` */
+	"_loading": string
+	/** `&[aria-current=page]` */
+	"_currentPage": string
+	/** `&[aria-current=step]` */
+	"_currentStep": string
+	/** `@media (prefers-reduced-motion: reduce)` */
+	"_motionReduce": string
+	/** `@media (prefers-reduced-motion: no-preference)` */
+	"_motionSafe": string
+	/** `@media print` */
+	"_print": string
+	/** `@media (orientation: landscape)` */
+	"_landscape": string
+	/** `@media (orientation: portrait)` */
+	"_portrait": string
+	/** ` &.dark, .dark &` */
+	"_dark": string
+	/** ` &.light, .light &` */
+	"_light": string
+	/** `@media (prefers-color-scheme: dark)` */
+	"_osDark": string
+	/** `@media (prefers-color-scheme: light)` */
+	"_osLight": string
+	/** `@media (forced-colors: active)` */
+	"_highContrast": string
+	/** `@media (prefers-contrast: less)` */
+	"_lessContrast": string
+	/** `@media (prefers-contrast: more)` */
+	"_moreContrast": string
+	/** `[dir=ltr] &` */
+	"_ltr": string
+	/** `[dir=rtl] &` */
+	"_rtl": string
+	/** `&::-webkit-scrollbar` */
+	"_scrollbar": string
+	/** `&::-webkit-scrollbar-thumb` */
+	"_scrollbarThumb": string
+	/** `&::-webkit-scrollbar-track` */
+	"_scrollbarTrack": string
+	/** `&[data-orientation=horizontal]` */
+	"_horizontal": string
+	/** `&[data-orientation=vertical]` */
+	"_vertical": string
+	/** `@media screen and (min-width: 40em)` */
+	"sm": string
+	/** `@media screen and (min-width: 40em) and (max-width: 47.996875em)` */
+	"smOnly": string
+	/** `@media screen and (max-width: 40em)` */
+	"smDown": string
+	/** `@media screen and (min-width: 48em)` */
+	"md": string
+	/** `@media screen and (min-width: 48em) and (max-width: 63.996875em)` */
+	"mdOnly": string
+	/** `@media screen and (max-width: 48em)` */
+	"mdDown": string
+	/** `@media screen and (min-width: 64em)` */
+	"lg": string
+	/** `@media screen and (min-width: 64em) and (max-width: 79.996875em)` */
+	"lgOnly": string
+	/** `@media screen and (max-width: 64em)` */
+	"lgDown": string
+	/** `@media screen and (min-width: 80em)` */
+	"xl": string
+	/** `@media screen and (min-width: 80em) and (max-width: 95.996875em)` */
+	"xlOnly": string
+	/** `@media screen and (max-width: 80em)` */
+	"xlDown": string
+	/** `@media screen and (min-width: 96em)` */
+	"2xl": string
+	/** `@media screen and (min-width: 96em)` */
+	"2xlOnly": string
+	/** `@media screen and (max-width: 96em)` */
+	"2xlDown": string
+	/** `@media screen and (min-width: 40em) and (max-width: 47.996875em)` */
+	"smToMd": string
+	/** `@media screen and (min-width: 40em) and (max-width: 63.996875em)` */
+	"smToLg": string
+	/** `@media screen and (min-width: 40em) and (max-width: 79.996875em)` */
+	"smToXl": string
+	/** `@media screen and (min-width: 40em) and (max-width: 95.996875em)` */
+	"smTo2xl": string
+	/** `@media screen and (min-width: 48em) and (max-width: 63.996875em)` */
+	"mdToLg": string
+	/** `@media screen and (min-width: 48em) and (max-width: 79.996875em)` */
+	"mdToXl": string
+	/** `@media screen and (min-width: 48em) and (max-width: 95.996875em)` */
+	"mdTo2xl": string
+	/** `@media screen and (min-width: 64em) and (max-width: 79.996875em)` */
+	"lgToXl": string
+	/** `@media screen and (min-width: 64em) and (max-width: 95.996875em)` */
+	"lgTo2xl": string
+	/** `@media screen and (min-width: 80em) and (max-width: 95.996875em)` */
+	"xlTo2xl": string
+	/** The base (=no conditions) styles to apply  */
+	"base": string
 }
 
 export type Condition = keyof Conditions

package/styled-system/types/global.d.ts

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // @ts-nocheck
-import type { TextStyles, LayerStyles } from '@pandacss/dev'
+import type * as Panda from '@pandacss/dev'
 import type { RecipeVariantRecord, RecipeConfig, SlotRecipeVariantRecord, SlotRecipeConfig } from './recipe';
 import type { Parts } from './parts';
 import type { PatternConfig, PatternProperties } from './pattern';
@@ -8,12 +8,12 @@ import type { GlobalStyleObject, SystemStyleObject } from './system-types';
 import type { CompositionStyles } from './composition';
 
 declare module '@pandacss/dev' {
-  export function defineRecipe<V extends RecipeVariantRecord>(config: RecipeConfig<V>): RecipeConfig
-  export function defineSlotRecipe<S extends string, V extends SlotRecipeVariantRecord<S>>(config: SlotRecipeConfig<S, V>): SlotRecipeConfig
+  export function defineRecipe<V extends RecipeVariantRecord>(config: RecipeConfig<V>): Panda.RecipeConfig
+  export function defineSlotRecipe<S extends string, V extends SlotRecipeVariantRecord<S>>(config: SlotRecipeConfig<S, V>): Panda.SlotRecipeConfig
   export function defineStyles(definition: SystemStyleObject): SystemStyleObject
-  export function defineGlobalStyles(definition: GlobalStyleObject): GlobalStyleObject
-  export function defineTextStyles(definition: CompositionStyles['textStyles']): TextStyles
-  export function defineLayerStyles(definition: CompositionStyles['layerStyles']): LayerStyles
-  export function definePattern<T extends PatternProperties>(config: PatternConfig<T>): PatternConfig
+  export function defineGlobalStyles(definition: GlobalStyleObject): Panda.GlobalStyleObject
+  export function defineTextStyles(definition: CompositionStyles['textStyles']): Panda.TextStyles
+  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>>
 }

package/styled-system/types/index.d.ts

@@ -1,6 +1,8 @@
 /* eslint-disable */
 import './global.d.ts'
-export type { ConditionalValue } from './conditions';
-export type { PatternConfig, PatternProperties } from './pattern';
-export type { RecipeVariantRecord, RecipeConfig, SlotRecipeVariantRecord, SlotRecipeConfig } from './recipe';
-export type { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types';
+export * from './conditions';
+export * from './pattern';
+export * from './recipe';
+export * from './system-types';
+export * from './jsx';
+export * from './style-props';

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

@@ -5,16 +5,16 @@ import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './r
 
 type Dict = Record<string, unknown>
 
-type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
+export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
   ref?: Ref<ElementRef<T>>
 }
 
-export type PandaComponent<T extends ElementType, P extends Dict = {}> = {
+export interface PandaComponent<T extends ElementType, P extends Dict = {}> {
   (props: JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>): JSX.Element
   displayName?: string
 }
 
-type RecipeFn = { __type: any }
+interface RecipeFn { __type: any }
 
 interface JsxFactory {
   <T extends ElementType>(component: T): PandaComponent<T, {}>

package/styled-system/types/parts.d.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-export type Part = {
+export interface Part {
   selector: string
 }
 

package/styled-system/types/pattern.d.ts

@@ -11,7 +11,7 @@ export type PatternProperty =
   | { type: 'token'; value: TokenCategory; property?: CssProperty }
   | { type: 'string' | 'boolean' | 'number' }
 
-export type PatternHelpers = {
+export interface PatternHelpers {
   map: (value: any, fn: (value: string) => string | undefined) => any
 }
 
@@ -19,7 +19,7 @@ export type PatternProperties = Record<string, PatternProperty>
 
 type Props<T> = Record<LiteralUnion<keyof T>, any>
 
-export type PatternConfig<T extends PatternProperties = PatternProperties> = {
+export interface PatternConfig<T extends PatternProperties = PatternProperties> {
   /**
    * The description of the pattern. This will be used in the JSDoc comment.
    */

package/styled-system/types/prop-type.d.ts

@@ -3,7 +3,7 @@ import type { ConditionalValue } from './conditions';
 import type { CssProperties } from './system-types';
 import type { Tokens } from '../tokens/index';
 
-type PropertyValueTypes  = {
+interface PropertyValueTypes {
 	aspectRatio: "auto" | "square" | "landscape" | "portrait" | "wide" | "ultrawide" | "golden";
 	zIndex: Tokens["zIndex"];
 	top: Tokens["spacing"];
@@ -212,7 +212,7 @@ type PropertyValueTypes  = {
 
   type Shorthand<T> = T extends keyof PropertyValueTypes ? PropertyValueTypes[T] | CssValue<T> : CssValue<T>
 
-  export type PropertyTypes = PropertyValueTypes & {
+  export interface PropertyTypes extends PropertyValueTypes {
   
 	pos: Shorthand<"position">;
 	insetEnd: Shorthand<"insetInlineEnd">;

package/styled-system/types/recipe.d.ts

@@ -27,7 +27,7 @@ type RecipeVariantMap<T extends RecipeVariantRecord> = {
  * Recipe / Standard
  * -----------------------------------------------------------------------------*/
 
-export type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T> & {
+export interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {
   __type: RecipeSelection<T>
   variantKeys: (keyof T)[]
   variantMap: RecipeVariantMap<T>
@@ -46,7 +46,7 @@ export type RecipeCompoundVariant<T extends RecipeVariantRecord> = RecipeCompoun
   css: SystemStyleObject
 }
 
-export type RecipeDefinition<T extends RecipeVariantRecord> = {
+export interface RecipeDefinition<T extends RecipeVariantRecord> {
   /**
    * The base styles of the recipe.
    */
@@ -67,7 +67,7 @@ export type RecipeDefinition<T extends RecipeVariantRecord> = {
 
 export type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>
 
-type RecipeConfigMeta = {
+interface RecipeConfigMeta {
   /**
    * The name of the recipe.
    */
@@ -85,7 +85,9 @@ type RecipeConfigMeta = {
   jsx?: Array<string | RegExp>
 }
 
-export type RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> = RecipeDefinition<T> & RecipeConfigMeta
+export interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>
+  extends RecipeDefinition<T>,
+    RecipeConfigMeta {}
 
 /* -----------------------------------------------------------------------------
  * Recipe / Slot
@@ -99,7 +101,8 @@ export type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord>
   props?: RecipeSelection<T>,
 ) => SlotRecord<S, string>
 
-export type SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>> = SlotRecipeVariantFn<S, T> & {
+export interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>
+  extends SlotRecipeVariantFn<S, T> {
   raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>
   variantKeys: (keyof T)[]
   variantMap: RecipeVariantMap<T>
@@ -110,7 +113,7 @@ export type SlotRecipeCompoundVariant<S extends string, T extends RecipeVariantR
   css: SlotRecord<S, SystemStyleObject>
 }
 
-export type SlotRecipeDefinition<S extends string, T extends SlotRecipeVariantRecord<S>> = {
+export interface SlotRecipeDefinition<S extends string, T extends SlotRecipeVariantRecord<S>> {
   /**
    * The parts/slots of the recipe.
    */

package/styled-system/types/style-props.d.ts

@@ -7,7 +7,7 @@ export type CssVarProperties = {
   [key in `--${string}`]?: ConditionalValue<Token | (string & {}) | (number & {})>
 }
 
-export type SystemProperties = {
+export interface SystemProperties {
   	WebkitAppearance?: PropertyValue<'WebkitAppearance'>
 	WebkitBorderBefore?: PropertyValue<'WebkitBorderBefore'>
 	WebkitBorderBeforeColor?: PropertyValue<'WebkitBorderBeforeColor'>

package/styled-system/types/system-types.d.ts

@@ -12,9 +12,9 @@ type Number = number & {}
 
 export type CssProperty = keyof PropertiesFallback
 
-export type CssProperties = PropertiesFallback<String | Number> & CssVarProperties
+export interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties {}
 
-export type CssKeyframes = {
+export interface CssKeyframes {
   [name: string]: {
     [time: string]: CssProperties
   }
@@ -28,7 +28,7 @@ type MinimalNested<P> = {
   [K in keyof Conditions]?: Nested<P>
 }
 
-type GenericProperties = {
+interface GenericProperties {
   [key: string]: ConditionalValue<String | Number | boolean>
 }
 
@@ -40,9 +40,13 @@ export type NestedCssProperties = Nested<CssProperties>
 
 export type SystemStyleObject = Nested<SystemProperties & CssVarProperties>
 
-export type GlobalStyleObject = {
+export interface GlobalStyleObject {
   [selector: string]: SystemStyleObject
 }
+export interface ExtendableGlobalStyleObject {
+  [selector: string]: SystemStyleObject | undefined
+  extend?: GlobalStyleObject | undefined
+}
 
 export type CompositionStyleObject<Property extends string> = Nested<{
   [K in Property]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown
@@ -51,7 +55,9 @@ export type CompositionStyleObject<Property extends string> = Nested<{
 /* -----------------------------------------------------------------------------
  * Jsx style props
  * -----------------------------------------------------------------------------*/
-type WithCss = { css?: SystemStyleObject }
+interface WithCss {
+  css?: SystemStyleObject
+}
 type StyleProps = SystemProperties & MinimalNested<SystemStyleObject>
 
 export type JsxStyleProps = StyleProps & WithCss
@@ -62,7 +68,7 @@ export type Assign<T, U> = {
   [K in keyof T]: K extends keyof U ? U[K] : T[K]
 } & U
 
-export type PatchedHTMLProps = {
+export interface PatchedHTMLProps {
   htmlWidth?: string | number
   htmlHeight?: string | number
   htmlTranslate?: 'yes' | 'no' | undefined