@sanity/ui 3.0.0-static.1 → 3.0.0-static.11

package/dist/css.d.mts

@@ -1,60 +1,70 @@
-import {AvatarPosition} from '@sanity/ui'
 import {AvatarSize} from '@sanity/ui/theme'
-import {ButtonMode} from '@sanity/ui'
-import {ButtonTone} from '@sanity/ui'
+import {ColorTintKey} from '@sanity/color'
 import {ContainerWidth} from '@sanity/ui/theme'
-import * as CSS_2 from 'csstype'
+import {default as CSS_2} from 'csstype'
 import {FontCodeSize} from '@sanity/ui/theme'
 import {FontHeadingSize} from '@sanity/ui/theme'
 import {FontLabelSize} from '@sanity/ui/theme'
-import {FontStyleProps as FontStyleProps_2} from '@sanity/ui/css'
 import {FontTextSize} from '@sanity/ui/theme'
 import {FontWeight} from '@sanity/ui/theme'
-import {GridStyleProps as GridStyleProps_2} from '@sanity/ui/css'
+import {Hue} from '@sanity/ui/theme'
 import {Radius} from '@sanity/ui/theme'
-import {RadiusStyleProps as RadiusStyleProps_2} from '@sanity/ui/css'
-import {RootTheme_v2} from '@sanity/ui/theme'
-import {SelectableTone} from '@sanity/ui'
+import {RootTheme} from '@sanity/ui/theme'
 import {Shadow} from '@sanity/ui/theme'
 import {Space} from '@sanity/ui/theme'
+import {ThemeBoxShadow} from '@sanity/ui/theme'
 import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
 import {ThemeColorButtonModeKey} from '@sanity/ui/theme'
 import {ThemeColorCardToneKey} from '@sanity/ui/theme'
-import {ThemeColorInputModeKey} from '@sanity/ui/theme'
-import {ThemeColorInputStateKey} from '@sanity/ui/theme'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {ThemeColorStateKey} from '@sanity/ui/theme'
 import {ThemeColorStateToneKey} from '@sanity/ui/theme'
-import {WidthStyleProps as WidthStyleProps_2} from '@sanity/ui/css'
+import {Tint} from '@sanity/ui/theme'
 
-export declare function animatedSpinnerIcon(): string
+export declare function animatedSpinnerIcon(): string | undefined
 
-export declare function avatar(props: AvatarStyleProps): string
+/** @internal */
+export declare function _arrow(): string | undefined
 
-export declare function avatarArrow(): string
+export declare function _arrowShape(): string | undefined
 
-export declare function avatarBgStroke(): string
+export declare function _arrowStroke(): string | undefined
 
-export declare function avatarImage(): string
+export declare function _arrowStrokeMask(): string | undefined
 
-export declare function avatarInitials(): string
+export declare function avatar(props: AvatarStyleProps): string | undefined
 
-export declare function avatarStroke(): string
+export declare function avatarArrow(): string | undefined
+
+export declare function avatarCounter(props: {size?: AvatarStyleProps['size']}): string | undefined
+
+export declare function avatarImage(): string | undefined
+
+export declare function avatarInitials(): string | undefined
+
+export declare type AvatarScopedVarName =
+  | `--avatar-bg-color`
+  | `--avatar-fg-color`
+  | `--avatar-distance`
+  | `--avatar-size`
+
+export declare function avatarStack(props: {size?: AvatarStyleProps['size']}): string | undefined
 
 export declare interface AvatarStyleProps {
   color: ThemeColorAvatarColorKey
   size: ResponsiveProp<AvatarSize>
-  arrowPosition?: AvatarPosition
 }
 
 /** @public */
-export declare function badge(props: BadgeStyleProps): string
+export declare function badge(props: BadgeStyleProps): string | undefined
 
 /** @public */
-export declare interface BadgeStyleProps extends RadiusStyleProps_2 {
+export declare interface BadgeStyleProps extends RadiusStyleProps {
   tone: ThemeColorStateToneKey
 }
 
+/** @public */
+export declare function border(props: BorderStyleProps): string | undefined
+
 /** @public */
 export declare interface BorderStyleProps {
   border?: ResponsiveProp<boolean>
@@ -65,7 +75,7 @@ export declare interface BorderStyleProps {
 }
 
 /** @public */
-export declare function box(props: BoxStyleProps): string
+export declare function box(props: BoxStyleProps): string | undefined
 
 /**
  * @public
@@ -82,65 +92,108 @@ export declare type BoxSizing = 'content' | 'border'
 
 /** @public */
 export declare interface BoxStyleProps
-  extends FlexStyleProps,
+  extends BorderStyleProps,
+    DisplayStyleProps,
+    FlexStyleProps,
     FlexItemStyleProps,
     GapStyleProps,
-    GridStyleProps_2,
+    GridStyleProps,
     GridItemStyleProps,
+    HeightStyleProps,
+    InsetStyleProps,
     MarginStyleProps,
     MaxWidthStyleProps,
+    MinWidthStyleProps,
     OverflowStyleProps,
     PaddingStyleProps,
     PointerEventsStyleProps,
     PositionStyleProps,
+    RadiusStyleProps,
     WidthStyleProps {
-  display?: ResponsiveProp<Display>
-  height?: ResponsiveProp<BoxHeight>
+  muted?: boolean
   outline?: 'none'
   sizing?: ResponsiveProp<BoxSizing>
 }
 
-export declare function breadcrumbs(): string
+export declare function breadcrumbs(): string | undefined
 
-export declare function button(props: ButtonStyleProps): string
+export declare const BREAKPOINTS: {
+  1: number
+  2: number
+  3: number
+  4: number
+  5: number
+  6: number
+}
+
+export declare function button(props: ButtonStyleProps): string | undefined
+
+export declare function buttonLoadingBox(): string | undefined
 
-export declare function buttonLoadingBox(): string
+export declare type ButtonScopedVarName = '--button-box-shadow'
 
-export declare interface ButtonStyleProps extends RadiusStyleProps, WidthStyleProps_2 {
-  mode?: ButtonMode
-  tone?: ButtonTone
+export declare interface ButtonStyleProps
+  extends DisplayStyleProps,
+    FlexItemStyleProps,
+    RadiusStyleProps,
+    WidthStyleProps {
+  mode?: ThemeColorButtonModeKey
+  tone?: ThemeColorStateToneKey
 }
 
-export declare function card(props: CardStyleProps): string
+export declare function card(props: CardStyleProps): string | undefined
 
+/** @public */
 export declare type CardScopedVarName =
   | `--color-accent-fg`
+  | `--color-avatar-bg`
+  | `--color-avatar-fg`
   | `--color-avatar-${ThemeColorAvatarColorKey}-bg`
   | `--color-avatar-${ThemeColorAvatarColorKey}-fg`
   | `--color-backdrop`
-  | `--color-badge-bg`
-  | `--color-badge-dot`
-  | `--color-badge-fg`
-  | `--color-badge-icon`
-  | `--color-badge-${ThemeColorStateToneKey}-bg`
-  | `--color-badge-${ThemeColorStateToneKey}-dot`
-  | `--color-badge-${ThemeColorStateToneKey}-fg`
-  | `--color-badge-${ThemeColorStateToneKey}-icon`
+  | `--color-${ElementColorVariant}-${ThemeColorStateToneKey}-${ElementColorVariantKey}`
   | `--color-bg`
   | `--color-border`
   | `--color-code-bg`
   | `--color-code-fg`
+  | `--color-code-token-atrule`
+  | `--color-code-token-attr-name`
+  | `--color-code-token-attr-value`
+  | `--color-code-token-attribute`
+  | `--color-code-token-boolean`
+  | `--color-code-token-builtin`
+  | `--color-code-token-cdata`
+  | `--color-code-token-char`
+  | `--color-code-token-class`
+  | `--color-code-token-class-name`
+  | `--color-code-token-comment`
+  | `--color-code-token-constant`
+  | `--color-code-token-deleted`
+  | `--color-code-token-doctype`
+  | `--color-code-token-entity`
+  | `--color-code-token-function`
+  | `--color-code-token-hexcode`
+  | `--color-code-token-id`
+  | `--color-code-token-important`
+  | `--color-code-token-inserted`
+  | `--color-code-token-keyword`
+  | `--color-code-token-number`
+  | `--color-code-token-operator`
+  | `--color-code-token-prolog`
+  | `--color-code-token-property`
+  | `--color-code-token-pseudo-class`
+  | `--color-code-token-pseudo-element`
+  | `--color-code-token-punctuation`
+  | `--color-code-token-regex`
+  | `--color-code-token-selector`
+  | `--color-code-token-string`
+  | `--color-code-token-symbol`
+  | `--color-code-token-tag`
+  | `--color-code-token-unit`
+  | `--color-code-token-url`
+  | `--color-code-token-variable`
   | `--color-fg`
   | `--color-focus-ring`
-  | `--color-icon`
-  | `--color-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-bg`
-  | `--color-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-border`
-  | `--color-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-fg`
-  | `--color-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-muted-bg`
-  | `--color-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-placeholder`
-  | `--color-kbd-bg`
-  | `--color-kbd-border`
-  | `--color-kbd-fg`
   | `--color-link-fg`
   | `--color-muted-bg`
   | `--color-muted-fg`
@@ -150,83 +203,13 @@ export declare type CardScopedVarName =
   | `--color-shadow-ambient`
   | `--color-skeleton-from`
   | `--color-skeleton-to`
-  | `--color-syntax-atrule`
-  | `--color-syntax-attrName`
-  | `--color-syntax-attrValue`
-  | `--color-syntax-attribute`
-  | `--color-syntax-boolean`
-  | `--color-syntax-builtin`
-  | `--color-syntax-cdata`
-  | `--color-syntax-char`
-  | `--color-syntax-class`
-  | `--color-syntax-className`
-  | `--color-syntax-comment`
-  | `--color-syntax-constant`
-  | `--color-syntax-deleted`
-  | `--color-syntax-doctype`
-  | `--color-syntax-entity`
-  | `--color-syntax-function`
-  | `--color-syntax-hexcode`
-  | `--color-syntax-id`
-  | `--color-syntax-important`
-  | `--color-syntax-inserted`
-  | `--color-syntax-keyword`
-  | `--color-syntax-number`
-  | `--color-syntax-operator`
-  | `--color-syntax-prolog`
-  | `--color-syntax-property`
-  | `--color-syntax-pseudoClass`
-  | `--color-syntax-pseudoElement`
-  | `--color-syntax-punctuation`
-  | `--color-syntax-regex`
-  | `--color-syntax-selector`
-  | `--color-syntax-string`
-  | `--color-syntax-symbol`
-  | `--color-syntax-tag`
-  | `--color-syntax-unit`
-  | `--color-syntax-url`
-  | `--color-syntax-variable`
-  | `--card-accent-fg-color`
-  | `--card-avatar-${ThemeColorAvatarColorKey}-bg-color`
-  | `--card-avatar-${ThemeColorAvatarColorKey}-fg-color`
-  | `--card-backdrop-color`
-  | `--card-badge-${ThemeColorStateToneKey}-bg-color`
-  | `--card-badge-${ThemeColorStateToneKey}-dot-color`
-  | `--card-badge-${ThemeColorStateToneKey}-fg-color`
-  | `--card-badge-${ThemeColorStateToneKey}-icon-color`
-  | `--card-bg-color`
-  | `--card-bg-image`
-  | `--card-bg2-color`
-  | `--card-border-color`
-  | `--card-code-bg-color`
-  | `--card-code-fg-color`
-  | `--card-fg-color`
-  | `--card-focus-ring-color`
-  | `--card-hairline-soft-color`
-  | `--card-hairline-hard-color`
-  | `--card-icon-color`
-  | `--card-kbd-bg-color`
-  | `--card-kbd-border-color`
-  | `--card-kbd-fg-color`
-  | `--card-link-color`
-  | `--card-link-fg-color`
-  | `--card-muted-bg-color`
-  | `--card-muted-fg-color`
-  | `--card-shadow-outline-color`
-  | `--card-shadow-umbra-color`
-  | `--card-shadow-penumbra-color`
-  | `--card-shadow-ambient-color`
-  | `--card-skeleton-from-color`
-  | `--card-skeleton-to-color`
-  | `--avatar-bg-color`
-  | `--avatar-fg-color`
   | `--color-checkbox-bg`
   | `--color-checkbox-fg`
   | `--color-checkbox-border`
   | `--font-ascender-height`
-  | `--font-cap-height`
   | `--font-descender-height`
   | `--font-family`
+  | `--font-feature-settings`
   | `--font-icon-offset`
   | `--font-icon-size`
   | `--font-letter-spacing`
@@ -241,59 +224,54 @@ export declare type CardScopedVarName =
   | `--font-weight-bold`
   | `--font-weight`
   | `--fg-color`
-  | `--input-bg-color`
-  | `--input-border-color`
-  | `--input-fg-color`
   | `--padding-top`
   | `--padding-right`
   | `--padding-bottom`
   | `--padding-left`
 
-export declare interface CardStyleProps extends BoxStyleProps, BorderStyleProps, RadiusStyleProps {
+export declare interface CardStyleProps extends BoxStyleProps, ShadowStyleProps {
   checkered?: boolean
-  shadow?: ResponsiveProp<number>
+  scheme?: ThemeColorSchemeKey
+  tone?: ThemeColorCardToneKey | 'inherit'
 }
 
-export declare function checkbox(): string
+export declare function checkbox(): string | undefined
 
-export declare function checkboxInput(): string
+export declare function checkboxInput(): string | undefined
 
 /** @public */
-export declare function code(props: CodeStyleProps): string
+export declare function code(props: CodeStyleProps): string | undefined
 
 /** @public */
 export declare type CodeSize = number
 
-export declare function codeSkeleton(props: CodeSkeletonStyleProps): string
+export declare function codeSkeleton(props: CodeSkeletonStyleProps): string | undefined
 
 export declare interface CodeSkeletonStyleProps {
   size?: ResponsiveProp<FontCodeSize>
 }
 
 /** @public */
-export declare interface CodeStyleProps extends FontStyleProps_2 {
+export declare interface CodeStyleProps extends FontStyleProps {
   size?: ResponsiveProp<CodeSize>
 }
 
+/** @public */
 export declare interface ColorAvatarColorVarNames {
-  bg: CSSVarName
-  fg: CSSVarName
+  bg: VarName
+  fg: VarName
 }
 
+/** @public */
 export declare interface ColorAvatarColorVars {
   bg: CSSVar
   fg: CSSVar
 }
 
+/** @public */
 export declare type ColorAvatarVars = Record<ThemeColorAvatarColorKey, ColorAvatarColorVars>
 
-export declare interface ColorBadgeToneVarNames {
-  bg: CSSVarName
-  dot: CSSVarName
-  fg: CSSVarName
-  icon: CSSVarName
-}
-
+/** @public */
 export declare interface ColorBadgeToneVars {
   bg: CSSVar
   dot: CSSVar
@@ -301,154 +279,240 @@ export declare interface ColorBadgeToneVars {
   icon: CSSVar
 }
 
+/** @public */
 export declare type ColorBadgeVars = Record<ThemeColorStateToneKey, ColorBadgeToneVars>
 
-export declare interface ColorCardVarNames extends ColorStateVarNames {
-  backdrop: ThemeVarName
-  focusRing: ThemeVarName
-  input: Record<ThemeColorInputModeKey, Record<ThemeColorInputStateKey, ColorInputStateVarNames>>
-}
-
-export declare interface ColorCardVars extends ColorStateVars {
-  backdrop: CSSVar
-  focusRing: CSSVar
-  input: Record<ThemeColorInputModeKey, Record<ThemeColorInputStateKey, ColorInputStateVars>>
-}
-
-export declare type ColorInputModeVars = Record<ThemeColorInputStateKey, ColorInputStateVars>
-
-export declare interface ColorInputStateVarNames {
-  bg: CSSVarName
-  border: CSSVarName
-  fg: CSSVarName
-  muted: {
-    bg: CSSVarName
-  }
-  placeholder: CSSVarName
-}
-
-export declare interface ColorInputStateVars {
-  bg: CSSVar
-  border: CSSVar
-  fg: CSSVar
-  muted: {
-    bg: CSSVar
-  }
-  placeholder: CSSVar
-}
-
-export declare interface ColorInputStateVars {
-  bg: CSSVar
-  border: CSSVar
-  fg: CSSVar
-  muted: {
-    bg: CSSVar
-  }
-  placeholder: CSSVar
-}
-
-export declare type ColorInputVars = Record<ThemeColorInputModeKey, ColorInputModeVars>
-
-export declare type ColorSchemeVarNames = Record<ThemeColorCardToneKey, ColorCardVarNames>
-
-export declare type ColorSchemeVars = Record<ThemeColorCardToneKey, ColorCardVars>
+export declare type ColorCardToneScopedVarName =
+  | `--color-${ThemeColorCardToneKey}-accent-fg`
+  | `--color-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-bg`
+  | `--color-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-fg`
+  | `--color-${ThemeColorCardToneKey}-backdrop`
+  | `--color-${ThemeColorCardToneKey}-code-bg`
+  | `--color-${ThemeColorCardToneKey}-code-fg`
+  | `--color-${ThemeColorCardToneKey}-code-token-atrule`
+  | `--color-${ThemeColorCardToneKey}-code-token-attr-name`
+  | `--color-${ThemeColorCardToneKey}-code-token-attr-value`
+  | `--color-${ThemeColorCardToneKey}-code-token-attribute`
+  | `--color-${ThemeColorCardToneKey}-code-token-boolean`
+  | `--color-${ThemeColorCardToneKey}-code-token-builtin`
+  | `--color-${ThemeColorCardToneKey}-code-token-cdata`
+  | `--color-${ThemeColorCardToneKey}-code-token-char`
+  | `--color-${ThemeColorCardToneKey}-code-token-class`
+  | `--color-${ThemeColorCardToneKey}-code-token-class-name`
+  | `--color-${ThemeColorCardToneKey}-code-token-comment`
+  | `--color-${ThemeColorCardToneKey}-code-token-constant`
+  | `--color-${ThemeColorCardToneKey}-code-token-deleted`
+  | `--color-${ThemeColorCardToneKey}-code-token-doctype`
+  | `--color-${ThemeColorCardToneKey}-code-token-entity`
+  | `--color-${ThemeColorCardToneKey}-code-token-function`
+  | `--color-${ThemeColorCardToneKey}-code-token-hexcode`
+  | `--color-${ThemeColorCardToneKey}-code-token-id`
+  | `--color-${ThemeColorCardToneKey}-code-token-important`
+  | `--color-${ThemeColorCardToneKey}-code-token-inserted`
+  | `--color-${ThemeColorCardToneKey}-code-token-keyword`
+  | `--color-${ThemeColorCardToneKey}-code-token-number`
+  | `--color-${ThemeColorCardToneKey}-code-token-operator`
+  | `--color-${ThemeColorCardToneKey}-code-token-prolog`
+  | `--color-${ThemeColorCardToneKey}-code-token-property`
+  | `--color-${ThemeColorCardToneKey}-code-token-pseudo-class`
+  | `--color-${ThemeColorCardToneKey}-code-token-pseudo-element`
+  | `--color-${ThemeColorCardToneKey}-code-token-punctuation`
+  | `--color-${ThemeColorCardToneKey}-code-token-regex`
+  | `--color-${ThemeColorCardToneKey}-code-token-selector`
+  | `--color-${ThemeColorCardToneKey}-code-token-string`
+  | `--color-${ThemeColorCardToneKey}-code-token-symbol`
+  | `--color-${ThemeColorCardToneKey}-code-token-tag`
+  | `--color-${ThemeColorCardToneKey}-code-token-unit`
+  | `--color-${ThemeColorCardToneKey}-code-token-url`
+  | `--color-${ThemeColorCardToneKey}-code-token-variable`
+  | `--color-${ThemeColorCardToneKey}-focus-ring`
+  | `--color-${ThemeColorCardToneKey}-link-fg`
+  | `--color-${ThemeColorCardToneKey}-muted-bg`
+  | `--color-${ThemeColorCardToneKey}-muted-fg`
+  | `--color-${ThemeColorCardToneKey}-${ElementColorVariant}-${ThemeColorStateToneKey}-${ElementColorVariantKey}`
+  | `--color-${ThemeColorCardToneKey}-shadow-outline`
+  | `--color-${ThemeColorCardToneKey}-shadow-umbra`
+  | `--color-${ThemeColorCardToneKey}-shadow-penumbra`
+  | `--color-${ThemeColorCardToneKey}-shadow-ambient`
+  | `--color-${ThemeColorCardToneKey}-skeleton-from`
+  | `--color-${ThemeColorCardToneKey}-skeleton-to`
+
+export declare type ColorCardVarName =
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-accent-fg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-bg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-fg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-backdrop`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-bg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-fg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-atrule`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-attr-name`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-attr-value`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-attribute`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-boolean`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-builtin`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-cdata`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-char`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-class`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-class-name`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-comment`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-constant`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-deleted`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-doctype`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-entity`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-function`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-hexcode`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-id`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-important`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-inserted`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-keyword`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-number`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-operator`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-prolog`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-property`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-pseudo-class`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-pseudo-element`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-punctuation`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-regex`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-selector`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-string`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-symbol`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-tag`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-unit`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-url`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-token-variable`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-focus-ring`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-link-fg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-muted-bg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-muted-fg`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-${ElementColorVariant}-${ThemeColorStateToneKey}-${ElementColorVariantKey}`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-outline`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-umbra`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-penumbra`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-ambient`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-skeleton-from`
+  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-skeleton-to`
 
-export declare interface ColorStateVarNames {
+/** @public */
+export declare interface ColorCardVarNames {
   accent: {
-    fg: CSSVarName
+    fg: VarName
   }
   avatar: Record<ThemeColorAvatarColorKey, ColorAvatarColorVarNames>
-  badge: Record<ThemeColorStateToneKey, ColorBadgeToneVarNames>
-  bg: CSSVarName
-  border: CSSVarName
+  backdrop: VarName
   code: {
-    bg: CSSVarName
-    fg: CSSVarName
-  }
-  fg: CSSVarName
-  icon: CSSVarName
-  kbd: {
-    bg: CSSVarName
-    border: CSSVarName
-    fg: CSSVarName
+    bg: VarName
+    fg: VarName
+    token: {
+      atrule: VarName
+      attrName: VarName
+      attrValue: VarName
+      attribute: VarName
+      boolean: VarName
+      builtin: VarName
+      cdata: VarName
+      char: VarName
+      class: VarName
+      className: VarName
+      comment: VarName
+      constant: VarName
+      deleted: VarName
+      doctype: VarName
+      entity: VarName
+      function: VarName
+      hexcode: VarName
+      id: VarName
+      important: VarName
+      inserted: VarName
+      keyword: VarName
+      number: VarName
+      operator: VarName
+      prolog: VarName
+      property: VarName
+      pseudoClass: VarName
+      pseudoElement: VarName
+      punctuation: VarName
+      regex: VarName
+      selector: VarName
+      string: VarName
+      symbol: VarName
+      tag: VarName
+      unit: VarName
+      url: VarName
+      variable: VarName
+    }
   }
+  focusRing: VarName
   link: {
-    fg: CSSVarName
+    fg: VarName
   }
   muted: {
-    bg: CSSVarName
-    fg: CSSVarName
+    bg: VarName
+    fg: VarName
   }
   shadow: {
-    outline: CSSVarName
-    umbra: CSSVarName
-    penumbra: CSSVarName
-    ambient: CSSVarName
+    outline: VarName
+    umbra: VarName
+    penumbra: VarName
+    ambient: VarName
   }
   skeleton: {
-    from: CSSVarName
-    to: CSSVarName
-  }
-  syntax: {
-    atrule: CSSVarName
-    attrName: CSSVarName
-    attrValue: CSSVarName
-    attribute: CSSVarName
-    boolean: CSSVarName
-    builtin: CSSVarName
-    cdata: CSSVarName
-    char: CSSVarName
-    class: CSSVarName
-    className: CSSVarName
-    comment: CSSVarName
-    constant: CSSVarName
-    deleted: CSSVarName
-    doctype: CSSVarName
-    entity: CSSVarName
-    function: CSSVarName
-    hexcode: CSSVarName
-    id: CSSVarName
-    important: CSSVarName
-    inserted: CSSVarName
-    keyword: CSSVarName
-    number: CSSVarName
-    operator: CSSVarName
-    prolog: CSSVarName
-    property: CSSVarName
-    pseudoClass: CSSVarName
-    pseudoElement: CSSVarName
-    punctuation: CSSVarName
-    regex: CSSVarName
-    selector: CSSVarName
-    string: CSSVarName
-    symbol: CSSVarName
-    tag: CSSVarName
-    unit: CSSVarName
-    url: CSSVarName
-    variable: CSSVarName
+    from: VarName
+    to: VarName
   }
+  solid: ColorVariantVarNames
+  tinted: ColorVariantVarNames
 }
 
-export declare interface ColorStateVars {
+/** @public */
+export declare interface ColorCardVars {
   accent: {
     fg: CSSVar
   }
   avatar: ColorAvatarVars
-  badge: Record<ThemeColorStateToneKey, ColorBadgeToneVars>
-  bg: CSSVar
-  border: CSSVar
+  backdrop: CSSVar
   code: {
     bg: CSSVar
     fg: CSSVar
+    token: {
+      atrule: CSSVar
+      attrName: CSSVar
+      attrValue: CSSVar
+      attribute: CSSVar
+      boolean: CSSVar
+      builtin: CSSVar
+      cdata: CSSVar
+      char: CSSVar
+      class: CSSVar
+      className: CSSVar
+      comment: CSSVar
+      constant: CSSVar
+      deleted: CSSVar
+      doctype: CSSVar
+      entity: CSSVar
+      function: CSSVar
+      hexcode: CSSVar
+      id: CSSVar
+      important: CSSVar
+      inserted: CSSVar
+      keyword: CSSVar
+      number: CSSVar
+      operator: CSSVar
+      prolog: CSSVar
+      property: CSSVar
+      pseudoClass: CSSVar
+      pseudoElement: CSSVar
+      punctuation: CSSVar
+      regex: CSSVar
+      selector: CSSVar
+      string: CSSVar
+      symbol: CSSVar
+      tag: CSSVar
+      unit: CSSVar
+      url: CSSVar
+      variable: CSSVar
+    }
   }
-  fg: CSSVar
-  icon: CSSVar
-  input: ColorInputVars
-  kbd: {
-    bg: CSSVar
-    border: CSSVar
-    fg: CSSVar
-  }
+  focusRing: CSSVar
   link: {
     fg: CSSVar
   }
@@ -466,89 +530,170 @@ export declare interface ColorStateVars {
     from: CSSVar
     to: CSSVar
   }
-  syntax: {
-    atrule: CSSVar
-    attrName: CSSVar
-    attrValue: CSSVar
-    attribute: CSSVar
-    boolean: CSSVar
-    builtin: CSSVar
-    cdata: CSSVar
-    char: CSSVar
-    class: CSSVar
-    className: CSSVar
-    comment: CSSVar
-    constant: CSSVar
-    deleted: CSSVar
-    doctype: CSSVar
-    entity: CSSVar
-    function: CSSVar
-    hexcode: CSSVar
-    id: CSSVar
-    important: CSSVar
-    inserted: CSSVar
-    keyword: CSSVar
-    number: CSSVar
-    operator: CSSVar
-    prolog: CSSVar
-    property: CSSVar
-    pseudoClass: CSSVar
-    pseudoElement: CSSVar
-    punctuation: CSSVar
-    regex: CSSVar
-    selector: CSSVar
-    string: CSSVar
-    symbol: CSSVar
-    tag: CSSVar
-    unit: CSSVar
-    url: CSSVar
-    variable: CSSVar
+  solid: ColorVariantVars
+  tinted: ColorVariantVars
+}
+
+/** @public */
+export declare interface ColorElementVarNames {
+  bg: {
+    0: VarName
+    1: VarName
+    2: VarName
+    3: VarName
+    4: VarName
+  }
+  border: {
+    0: VarName
+    1: VarName
+    2: VarName
+    3: VarName
+    4: VarName
+  }
+  fg: {
+    0: VarName
+    1: VarName
+    2: VarName
+    3: VarName
+    4: VarName
+  }
+}
+
+/** @public */
+export declare interface ColorElementVars {
+  bg: {
+    0: CSSVar
+    1: CSSVar
+    2: CSSVar
+    3: CSSVar
+    4: CSSVar
+  }
+  border: {
+    0: CSSVar
+    1: CSSVar
+    2: CSSVar
+    3: CSSVar
+    4: CSSVar
+  }
+  fg: {
+    0: CSSVar
+    1: CSSVar
+    2: CSSVar
+    3: CSSVar
+    4: CSSVar
   }
 }
 
-export declare type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
+/** @public */
+export declare interface ColorInputStateVars {
+  bg: CSSVar
+  border: CSSVar
+  fg: CSSVar
+  muted: {
+    bg: CSSVar
+  }
+  placeholder: CSSVar
+}
 
 /** @public */
-export declare function compileSystem(): string
+export declare type ColorSchemeVarNames = Record<ThemeColorCardToneKey, ColorCardVarNames>
+
+/** @public */
+export declare interface ColorSchemeVars extends Record<ThemeColorCardToneKey, ColorCardVars> {}
+
+export declare interface ColorVariantVarNames
+  extends ColorElementVarNames,
+    Record<ThemeColorStateToneKey, ColorElementVarNames> {}
 
 /** @public */
-export declare function compileTheme(theme: RootTheme_v2): string
+export declare interface ColorVariantVars
+  extends Record<ThemeColorStateToneKey, ColorElementVars>,
+    ColorElementVars {}
 
-export declare function composeClassNames(...classNames: Array<string | false | undefined>): string
+export declare type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
-export declare function container(props: ContainerStyleProps): string
+export declare function compilePalette(): string
+
+/** @public */
+export declare function compileSystem(): string
+
+export declare function compileTheme(theme: RootTheme): string
+
+export declare function composeClassNames(
+  ...classNames: Array<string | false | undefined>
+): string | undefined
+
+export declare function container(props: ContainerStyleProps): string | undefined
 
 export declare interface ContainerStyleProps {
   width?: ResponsiveProp<ContainerWidth>
 }
 
 /** @public */
-export declare type CSSVar = `var(${CSSVarName})`
+export declare type CSSVar = `var(${VarName})`
 
 /** @public */
-export declare type CSSVarName = ThemeVarName | CardScopedVarName
+export declare interface CustomCSSProperties extends Record<VarName, string> {}
 
-/** @public */
-export declare interface CustomCSSProperties extends Record<CSSVarName, string> {}
+export declare function dialog(): string | undefined
 
-export declare function dialog(): string
+export declare function dialogCardRoot(): string | undefined
 
-export declare function dialogCardRoot(): string
+export declare function dialogContainer(): string | undefined
 
-export declare function dialogContainer(): string
+export declare function dialogContent(): string | undefined
 
-export declare function dialogContent(): string
+export declare function dialogFooter(): string | undefined
 
-export declare function dialogFooter(): string
+export declare function dialogHeader(): string | undefined
 
-export declare function dialogHeader(): string
-
-export declare function dialogLayout(): string
+export declare function dialogLayout(): string | undefined
 
 /**
  * @public
  */
-export declare type Display = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
+export declare type Display =
+  | 'block'
+  | 'inline-block'
+  | 'flex'
+  | 'inline-flex'
+  | 'grid'
+  | 'inline-grid'
+  | 'none'
+
+export declare function display(props: DisplayStyleProps): string | undefined
+
+export declare interface DisplayStyleProps {
+  display?: ResponsiveProp<Display>
+}
+
+/** @public */
+export declare type ElementColorVariant = 'solid' | 'tinted'
+
+/** @public */
+export declare type ElementColorVariantKey =
+  | 'bg-0'
+  | 'bg-1'
+  | 'bg-2'
+  | 'bg-3'
+  | 'bg-4'
+  | 'border-0'
+  | 'border-1'
+  | 'border-2'
+  | 'border-3'
+  | 'border-4'
+  | 'fg-0'
+  | 'fg-1'
+  | 'fg-2'
+  | 'fg-3'
+  | 'fg-4'
+
+/** @public */
+export declare type ElementColorVariantScopedVarName =
+  `--color-${ElementColorVariant}-${ElementColorVariantKey}`
+
+/** @public */
+export declare function flex(props: FlexStyleProps): string | undefined
 
 /**
  * @public
@@ -560,6 +705,9 @@ export declare type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline
  */
 export declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
 
+/** @public */
+export declare function flexItem(props: FlexItemStyleProps): string | undefined
+
 /** @public */
 export declare interface FlexItemStyleProps {
   flex?: ResponsiveProp<FlexValue>
@@ -587,13 +735,43 @@ export declare interface FlexStyleProps {
 /**
  * @public
  */
-export declare type FlexValue = number | 'none' | 'auto' | 'initial'
+export declare type FlexValue =
+  | 'none'
+  | 'auto'
+  | 'initial'
+  | 0
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
 
 /**
  * @public
  */
 export declare type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
 
+/** @public */
+export declare function font(props: FontStyleProps): string | undefined
+
+/** @public */
+export declare interface FontSizeVarNames {
+  ascenderHeight: VarName
+  descenderHeight: VarName
+  fontSize: VarName
+  lineHeight: VarName
+  letterSpacing: VarName
+  iconSize: VarName
+}
+
+/** @public */
 export declare interface FontSizeVars {
   ascenderHeight: CSSVar
   descenderHeight: CSSVar
@@ -609,11 +787,23 @@ export declare interface FontStyleProps {
   weight?: FontWeight
 }
 
+export declare interface FontVarNames<Size extends number> {
+  family: VarName
+  featureSettings: VarName
+  sizes: Record<Size, FontSizeVarNames>
+  weights: Record<FontWeight, VarName>
+}
+
+/** @public */
 export declare interface FontVars<Size extends number> {
   family: CSSVar
   sizes: Record<Size, FontSizeVars>
+  weight: Record<FontWeight, CSSVar>
 }
 
+/** @public */
+export declare function gap(props: GapStyleProps): string | undefined
+
 /** @public */
 export declare interface GapStyleProps {
   gap?: ResponsiveProp<Space>
@@ -621,6 +811,10 @@ export declare interface GapStyleProps {
   gapY?: ResponsiveProp<Space>
 }
 
+export declare function getClassNames(...classNames: Array<string | false | undefined>): string[]
+
+export declare function grid(props: GridStyleProps): string | undefined
+
 /**
  * @public
  */
@@ -636,6 +830,9 @@ export declare type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dens
  */
 export declare type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
 
+/** @public */
+export declare function gridItem(props: GridItemStyleProps): string | undefined
+
 /**
  * @public
  */
@@ -685,50 +882,138 @@ export declare interface GridStyleProps {
 }
 
 /** @public */
-export declare function heading(props: HeadingStyleProps): string
+export declare function heading(props: HeadingStyleProps): string | undefined
 
 /** @public */
 export declare type HeadingSize = number
 
-export declare function headingSkeleton(props: HeadingSkeletonStyleProps): string
+export declare function headingSkeleton(props: HeadingSkeletonStyleProps): string | undefined
 
 export declare interface HeadingSkeletonStyleProps {
   size?: ResponsiveProp<FontHeadingSize>
 }
 
 /** @public */
-export declare interface HeadingStyleProps extends FontStyleProps_2 {
+export declare interface HeadingStyleProps extends FontStyleProps, FlexItemStyleProps {
   accent?: boolean
   muted?: boolean
   size?: ResponsiveProp<HeadingSize>
 }
 
+/** @public */
+export declare function height(props: HeightStyleProps): string | undefined
+
+export declare interface HeightStyleProps {
+  height?: ResponsiveProp<BoxHeight>
+}
+
+/** @internal */
+export declare function _input(props: InputStyleProps): string | undefined
+
+export declare function _inputElement(): string | undefined
+
+export declare function _inputPresentation(): string | undefined
+
+/** @public */
+export declare type InputScopedVarName =
+  | `--color-input-bg`
+  | `--color-input-border`
+  | `--color-input-fg`
+  | `--color-input-placeholder`
+  | `--input-ascender-height`
+  | `--input-descender-height`
+  | `--input-font-size`
+  | `--input-gap`
+  | `--input-letter-spacing`
+  | `--input-line-height`
+  | `--input-padding`
+
+/** @public */
+export declare interface InputStyleProps extends RadiusStyleProps, WidthStyleProps {
+  border?: boolean
+  fontSize?: ResponsiveProp<FontTextSize>
+  gap?: ResponsiveProp<Space>
+  padding?: ResponsiveProp<Space>
+}
+
 /** @public */
 export declare type Inset = 0
 
-export declare function kbd(props: KBDStyleProps): string
+export declare function inset(props: InsetStyleProps): string | undefined
 
+/** @public */
+export declare interface InsetStyleProps {
+  inset?: ResponsiveProp<Inset>
+  insetTop?: ResponsiveProp<Inset>
+  insetRight?: ResponsiveProp<Inset>
+  insetBottom?: ResponsiveProp<Inset>
+  insetLeft?: ResponsiveProp<Inset>
+}
+
+export declare function isArray(value: unknown): value is unknown[]
+
+export declare function isRecord(value: unknown): value is Record<string, unknown>
+
+export declare function kbd(props: KBDStyleProps): string | undefined
+
+/** @public */
 export declare interface KBDStyleProps extends RadiusStyleProps {}
 
 /** @public */
-export declare function label(props: LabelStyleProps): string
+export declare function label(props: LabelStyleProps): string | undefined
 
 /** @public */
 export declare type LabelSize = number
 
-export declare function labelSkeleton(props: LabelSkeletonStyleProps): string
+export declare function labelSkeleton(props: LabelSkeletonStyleProps): string | undefined
 
 export declare interface LabelSkeletonStyleProps {
   size?: ResponsiveProp<FontLabelSize>
 }
 
 /** @public */
-export declare interface LabelStyleProps extends FontStyleProps_2 {
+export declare interface LabelStyleProps extends FontStyleProps {
   accent?: boolean
   muted?: boolean
   size?: ResponsiveProp<LabelSize>
 }
 
+export declare type LegacyCardScopedVarName =
+  | `--card-accent-fg-color`
+  | `--card-avatar-${ThemeColorAvatarColorKey}-bg-color`
+  | `--card-avatar-${ThemeColorAvatarColorKey}-fg-color`
+  | `--card-backdrop-color`
+  | `--card-badge-${ThemeColorStateToneKey}-bg-color`
+  | `--card-badge-${ThemeColorStateToneKey}-dot-color`
+  | `--card-badge-${ThemeColorStateToneKey}-fg-color`
+  | `--card-badge-${ThemeColorStateToneKey}-icon-color`
+  | `--card-bg-color`
+  | `--card-bg-image`
+  | `--card-bg2-color`
+  | `--card-border-color`
+  | `--card-code-bg-color`
+  | `--card-code-fg-color`
+  | `--card-fg-color`
+  | `--card-focus-ring-color`
+  | `--card-hairline-soft-color`
+  | `--card-hairline-hard-color`
+  | `--card-icon-color`
+  | `--card-kbd-bg-color`
+  | `--card-kbd-border-color`
+  | `--card-kbd-fg-color`
+  | `--card-link-color`
+  | `--card-link-fg-color`
+  | `--card-muted-bg-color`
+  | `--card-muted-fg-color`
+  | `--card-shadow-outline-color`
+  | `--card-shadow-umbra-color`
+  | `--card-shadow-penumbra-color`
+  | `--card-shadow-ambient-color`
+  | `--card-skeleton-from-color`
+  | `--card-skeleton-to-color`
+
+export declare function margin(props: MarginStyleProps): string | undefined
+
 export declare interface MarginStyleProps {
   margin?: ResponsiveProp<number>
   marginTop?: ResponsiveProp<number>
@@ -739,11 +1024,25 @@ export declare interface MarginStyleProps {
   marginY?: ResponsiveProp<number>
 }
 
+export declare function maxWidth(props: MaxWidthStyleProps): string
+
 export declare interface MaxWidthStyleProps {
-  maxWidth?: ResponsiveProp<ContainerWidth | 'fill'>
+  maxWidth?: ResponsiveProp<ContainerWidth | 'auto' | 'fill'>
 }
 
-export declare function menuDivider(): string
+export declare function menu(): string | undefined
+
+export declare function menuDivider(): string | undefined
+
+export declare type MinWidth = 0 | 'auto' | 'full' | 'min' | 'max' | 'fit'
+
+export declare function minWidth(props: MinWidthStyleProps): string
+
+export declare interface MinWidthStyleProps {
+  minWidth?: ResponsiveProp<MinWidth>
+}
+
+export declare function overflow(props: OverflowStyleProps): string | undefined
 
 /** @public */
 export declare interface OverflowStyleProps {
@@ -752,115 +1051,229 @@ export declare interface OverflowStyleProps {
   overflowY?: ResponsiveProp<BoxOverflow>
 }
 
+export declare function padding(props: PaddingStyleProps): string | undefined
+
 /** @public */
 export declare interface PaddingStyleProps {
-  padding?: ResponsiveProp<number>
-  paddingTop?: ResponsiveProp<number>
-  paddingRight?: ResponsiveProp<number>
-  paddingBottom?: ResponsiveProp<number>
-  paddingLeft?: ResponsiveProp<number>
-  paddingX?: ResponsiveProp<number>
-  paddingY?: ResponsiveProp<number>
+  padding?: ResponsiveProp<Space>
+  paddingTop?: ResponsiveProp<Space>
+  paddingRight?: ResponsiveProp<Space>
+  paddingBottom?: ResponsiveProp<Space>
+  paddingLeft?: ResponsiveProp<Space>
+  paddingX?: ResponsiveProp<Space>
+  paddingY?: ResponsiveProp<Space>
 }
 
+/** @public */
+export declare type PaletteVarName = `--black` | `--white` | `--${Hue}-${Tint}`
+
 /** @public */
 export declare type PointerEvents = 'auto' | 'none'
 
+export declare function pointerEvents(props: PointerEventsStyleProps): string | undefined
+
 /** @public */
 export declare interface PointerEventsStyleProps {
   pointerEvents?: PointerEvents
 }
 
-export declare function popover(): string
+export declare function popover(): string | undefined
+
+export declare function popoverCard(): string | undefined
 
 /** @public */
 export declare type Position = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'
 
+export declare function position(props: PositionStyleProps): string | undefined
+
 /** @public */
 export declare interface PositionStyleProps {
-  inset?: ResponsiveProp<Inset>
   position?: ResponsiveProp<Position>
 }
 
+export declare const PREFIX = 's-'
+
+/** @public */
+export declare type Properties = PropertiesWithVarsAndNested & {
+  '@media'?: Record<string, PropertiesWithVarsAndNested>
+}
+
+/** @public */
+export declare type PropertiesWithVars = CSS_2.Properties &
+  Partial<Record<VarName, string>> & {
+    _prefix?: boolean
+  }
+
 /** @public */
-export declare interface Properties extends CSS_2.PropertiesFallback, Partial<CustomCSSProperties> {
-  '@keyframes'?: Record<string, Record<string, Properties>>
-  '@media'?: Record<string, Properties>
-  '@nest'?: Record<string, Properties>
+export declare type PropertiesWithVarsAndNested = PropertiesWithVars & {
+  '@nest'?: Record<string, PropertiesWithVars>
 }
 
-export declare function radio(): string
+export declare function px(value: number): string
+
+export declare function radio(): string | undefined
+
+/** @public */
+export declare function radius(props: RadiusStyleProps): string | undefined
 
 /** @public */
 export declare interface RadiusStyleProps {
-  radius?: ResponsiveProp<Radius>
+  radius?: ResponsiveProp<Radius | 'full'>
 }
 
+export declare function rem(value: number): string
+
+/** @public */
 export declare type ResponsiveProp<T> = T | Array<T | null | undefined>
 
-export declare type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
+export declare type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
 /** @public */
 export declare interface Rules {
   [className: string]: Properties
 }
 
-export declare interface ScopedColorVarNames extends Omit<ColorStateVarNames, 'badge'> {
-  badge: Record<ThemeColorStateToneKey, ColorBadgeToneVarNames> & ColorBadgeToneVarNames
+export declare function scopeClassName(className: string | undefined): string | undefined
+
+export declare interface ScopedColorVarNames extends Omit<ColorCardVarNames, 'avatar'> {
+  accent: {
+    fg: VarName
+  }
+  avatar: Record<ThemeColorAvatarColorKey, ColorAvatarColorVarNames> & ColorAvatarColorVarNames
+  bg: VarName
+  border: VarName
+  fg: VarName
+  input: {
+    bg: VarName
+    border: VarName
+    fg: VarName
+    placeholder: VarName
+  }
 }
 
-export declare interface ScopedColorVars extends Omit<ColorStateVars, 'badge'> {
-  badge: ColorBadgeVars & ColorBadgeToneVars
+export declare interface ScopedColorVars extends Omit<ColorCardVars, 'avatar'> {
+  avatar: ColorAvatarVars & ColorAvatarColorVars
+  bg: CSSVar
+  border: CSSVar
+  fg: CSSVar
+  input: {
+    bg: CSSVar
+    border: CSSVar
+    fg: CSSVar
+    placeholder: CSSVar
+  }
 }
 
-export declare function select(): string
+export declare function select(props: SelectStyleProps): string | undefined
 
-export declare function selectable(props: SelectableStyleProps): string
+/** @internal */
+export declare function _selectable(props: SelectableStyleProps): string | undefined
 
+/** @internal */
 export declare interface SelectableStyleProps extends RadiusStyleProps {
-  tone?: SelectableTone
+  tone?: ThemeColorStateToneKey
+}
+
+export declare function selectPresentation(): string | undefined
+
+/** @public */
+export declare interface SelectStyleProps extends InputStyleProps {}
+
+export declare function shadow(props: ShadowStyleProps): string | undefined
+
+/** @public */
+export declare interface ShadowStyleProps {
+  shadow?: ResponsiveProp<Shadow>
 }
 
 /** @beta */
-export declare function skeleton(props: SkeletonStyleProps): string
+export declare function skeleton(props: SkeletonStyleProps): string | undefined
 
 /** @beta */
 export declare interface SkeletonStyleProps extends RadiusStyleProps {}
 
-export declare function spinner(): string
+export declare function spinner(): string | undefined
+
+export declare function srOnly(): string | undefined
 
-export declare function _switch(): string
+/** @public */
+export declare function stack(): string | undefined
+
+/** @public */
+export declare type Style = {
+  keyframes?: StyleKeyframes
+  layers?: StyleLayers
+  rules?: StyleRules
+}
+
+/** @public */
+export declare type StyleKeyframes = Record<string, Record<string, Properties>>
 
 /** @public */
-export declare function text(props: TextStyleProps): string
+export declare type StyleLayers = Record<string, StyleRules>
+
+/** @public */
+export declare type StyleRules = Partial<Record<StyleSelector, Properties>>
+
+/** @public */
+export declare type StyleSelector = `.${string}` | `#${string}` | `:root`
+
+export declare function _switch(): string | undefined
+
+export declare function _switchElement(): string | undefined
+
+export declare function _switchPresentation(): string | undefined
+
+/** @public */
+export declare type SwitchScopedVarName =
+  | `--switch-bg-color`
+  | `--switch-fg-color`
+  | '--switch-thumb-offset'
+  | '--switch-thumb-size'
+
+export declare function _switchThumb(): string | undefined
+
+export declare function _switchTrack(): string | undefined
+
+/** @public */
+export declare function text(props: TextStyleProps): string | undefined
 
 /**
  * @public
  */
 export declare type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
 
-export declare function textArea(): string
+export declare function textArea(props: TextAreaStyleProps): string | undefined
 
-export declare function textInput(props: TextInputStyleProps): string
+/** @public */
+export declare interface TextAreaStyleProps extends InputStyleProps {}
 
-export declare function textInputElement(): string
+export declare function textInput(props: TextInputStyleProps): string | undefined
 
 /** @public */
-export declare interface TextInputStyleProps {
-  padding: ResponsiveProp<Space>
-  size: ResponsiveProp<FontTextSize>
+export declare interface TextInputStyleProps extends InputStyleProps {}
+
+export declare function textOverflow(props: TextOverflowStyleProps): string | undefined
+
+export declare interface TextOverflowStyleProps {
+  /**
+   * Controls how overflowing text is treated.
+   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
+   * @beta
+   */
+  textOverflow?: 'ellipsis' | 'clip'
 }
 
 export declare type TextSize = number
 
-export declare function textSkeleton(props: TextSkeletonStyleProps): string
+export declare function textSkeleton(props: TextSkeletonStyleProps): string | undefined
 
 export declare interface TextSkeletonStyleProps {
   size?: ResponsiveProp<FontTextSize>
 }
 
 /** @public */
-export declare interface TextStyleProps extends FontStyleProps_2 {
+export declare interface TextStyleProps extends FlexItemStyleProps, FontStyleProps {
   accent?: boolean
   muted?: boolean
   size?: ResponsiveProp<TextSize>
@@ -880,88 +1293,9 @@ export declare type ThemeVarName =
   | `--card-focus-ring-offset`
   | `--card-focus-ring-width`
   | `--card-shadow-outline`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-accent-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-backdrop`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-badge-${ThemeColorStateToneKey}-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-badge-${ThemeColorStateToneKey}-dot`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-badge-${ThemeColorStateToneKey}-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-badge-${ThemeColorStateToneKey}-icon`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-border`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-accent-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-border`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-code-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-code-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-icon`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-link-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-muted-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-muted-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-skeleton-from`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-skeleton-to`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-focus-ring`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-icon`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-kbd-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-kbd-border`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-kbd-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-link-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-muted-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-muted-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-skeleton-from`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-skeleton-to`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-border`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-muted-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-placeholder`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-outline`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-umbra`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-penumbra`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-ambient`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-atrule`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-attrName`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-attrValue`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-attribute`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-boolean`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-builtin`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-cdata`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-char`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-class`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-className`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-comment`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-constant`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-deleted`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-doctype`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-entity`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-function`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-hexcode`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-id`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-important`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-inserted`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-keyword`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-number`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-operator`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-prolog`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-property`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-pseudoClass`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-pseudoElement`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-punctuation`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-regex`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-selector`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-string`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-symbol`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-tag`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-unit`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-url`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-variable`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-fg`
   | `--container-${ContainerWidth}`
   | `--font-code-family`
+  | `--font-code-feature-settings`
   | `--font-code-weight-${FontWeight}`
   | `--font-code-${FontCodeSize}-ascender-height`
   | `--font-code-${FontCodeSize}-descender-height`
@@ -970,6 +1304,7 @@ export declare type ThemeVarName =
   | `--font-code-${FontCodeSize}-letter-spacing`
   | `--font-code-${FontCodeSize}-icon-size`
   | `--font-heading-family`
+  | `--font-heading-feature-settings`
   | `--font-heading-weight-${FontWeight}`
   | `--font-heading-${FontHeadingSize}-ascender-height`
   | `--font-heading-${FontHeadingSize}-descender-height`
@@ -978,6 +1313,7 @@ export declare type ThemeVarName =
   | `--font-heading-${FontHeadingSize}-letter-spacing`
   | `--font-heading-${FontHeadingSize}-icon-size`
   | `--font-label-family`
+  | `--font-label-feature-settings`
   | `--font-label-weight-${FontWeight}`
   | `--font-label-${FontLabelSize}-ascender-height`
   | `--font-label-${FontLabelSize}-descender-height`
@@ -986,6 +1322,7 @@ export declare type ThemeVarName =
   | `--font-label-${FontLabelSize}-letter-spacing`
   | `--font-label-${FontLabelSize}-icon-size`
   | `--font-text-family`
+  | `--font-text-feature-settings`
   | `--font-text-weight-${FontWeight}`
   | `--font-text-${FontTextSize}-ascender-height`
   | `--font-text-${FontTextSize}-descender-height`
@@ -1020,43 +1357,230 @@ export declare type ThemeVarName =
   | `--shadow-${Shadow}-penumbra`
   | `--shadow-${Shadow}-ambient`
 
-export declare function tooltip(): string
+export declare function toast(): string | undefined
+
+export declare function toastLayer(): string | undefined
 
-export declare function tooltipCard(): string
+export declare function toastLoadingBar(): string | undefined
 
-export declare function treeItem(): string
+export declare function toastLoadingBarMask(): string | undefined
+
+export declare function toastLoadingBarProgress(): string | undefined
+
+export declare function toBoxShadow(value: ThemeBoxShadow | undefined): string
+
+export declare function tooltip(): string | undefined
+
+export declare function tooltipCard(): string | undefined
+
+export declare function treeItem(): string | undefined
+
+/** @public */
+export declare type VarName =
+  | AvatarScopedVarName
+  | LegacyCardScopedVarName
+  | PaletteVarName
+  | ThemeVarName
+  | ColorCardVarName
+  | ButtonScopedVarName
+  | ColorCardToneScopedVarName
+  | CardScopedVarName
+  | ElementColorVariantScopedVarName
+  | InputScopedVarName
+  | SwitchScopedVarName
 
 /** @public */
 export declare interface VarNames {
-  color: Record<ThemeColorSchemeKey, ColorSchemeVarNames> & ScopedColorVarNames
+  button: {
+    border: {
+      width: VarName
+    }
+    focusRing: {
+      offset: VarName
+      width: VarName
+    }
+  }
+  card: {
+    shadow: {
+      outline: VarName
+    }
+  }
+  color: Record<ThemeColorSchemeKey, ColorSchemeVarNames> &
+    ScopedColorVarNames &
+    Record<ThemeColorCardToneKey, ColorCardVarNames>
+  container: Record<Exclude<ContainerWidth, 'auto'>, VarName>
   avatar: {
+    distance: VarName
     focusRing: {
-      offset: CSSVarName
-      width: CSSVarName
+      offset: VarName
+      width: VarName
+    }
+    size: VarName
+    sizes: Record<
+      AvatarSize,
+      {
+        distance: VarName
+        size: VarName
+      }
+    >
+  }
+  font: {
+    code: FontVarNames<FontCodeSize>
+    heading: FontVarNames<FontHeadingSize>
+    label: FontVarNames<FontLabelSize>
+    text: FontVarNames<FontTextSize>
+  }
+  input: {
+    border: {
+      width: VarName
+    }
+    checkbox: {
+      focusRing: {
+        offset: VarName
+        width: VarName
+      }
+      size: VarName
+    }
+    radio: {
+      focusRing: {
+        offset: VarName
+        width: VarName
+      }
+      markSize: VarName
+      size: VarName
+    }
+    select: {
+      focusRing: {
+        offset: VarName
+        width: VarName
+      }
+    }
+    switch: {
+      focusRing: {
+        offset: VarName
+        width: VarName
+      }
+      height: VarName
+      padding: VarName
+      transitionDurationMs: VarName
+      transitionTimingFunction: VarName
+      width: VarName
+    }
+    text: {
+      focusRing: {
+        offset: VarName
+        width: VarName
+      }
     }
+    fontSize: VarName
+    lineHeight: VarName
+    letterSpacing: VarName
+    ascenderHeight: VarName
+    descenderHeight: VarName
+    gap: VarName
+    padding: VarName
   }
-  space: Record<Space, CSSVarName>
+  radius: Record<Radius, VarName>
+  shadow: Record<
+    Shadow,
+    {
+      umbra: VarName
+      penumbra: VarName
+      ambient: VarName
+    }
+  >
+  space: Record<Space, VarName>
+  black: VarName
+  white: VarName
+  gray: Record<ColorTintKey, VarName>
+  blue: Record<ColorTintKey, VarName>
+  purple: Record<ColorTintKey, VarName>
+  magenta: Record<ColorTintKey, VarName>
+  red: Record<ColorTintKey, VarName>
+  orange: Record<ColorTintKey, VarName>
+  yellow: Record<ColorTintKey, VarName>
+  green: Record<ColorTintKey, VarName>
+  cyan: Record<ColorTintKey, VarName>
 }
 
+export declare const varNames: VarNames
+
 /** @public */
 export declare interface Vars {
+  avatar: {
+    distance: CSSVar
+    size: CSSVar
+    sizes: Record<
+      AvatarSize,
+      {
+        distance: CSSVar
+        size: CSSVar
+      }
+    >
+  }
+  card: {
+    shadow: {
+      outline: CSSVar
+    }
+  }
   color: {
     dark: ColorSchemeVars
     light: ColorSchemeVars
-  } & ScopedColorVars
+  } & ScopedColorVars &
+    Record<ThemeColorCardToneKey, ColorCardVars>
+  container: Record<Exclude<ContainerWidth, 'auto'>, CSSVar>
   font: {
     code: FontVars<FontCodeSize>
     heading: FontVars<FontHeadingSize>
     label: FontVars<FontLabelSize>
     text: FontVars<FontTextSize>
   }
+  input: {
+    fontSize: CSSVar
+    lineHeight: CSSVar
+    letterSpacing: CSSVar
+    ascenderHeight: CSSVar
+    descenderHeight: CSSVar
+    gap: CSSVar
+    padding: CSSVar
+    text: {
+      focusRing: {
+        offset: CSSVar
+        width: CSSVar
+      }
+    }
+  }
+  radius: Record<Radius, CSSVar>
+  shadow: Record<
+    Shadow,
+    {
+      umbra: CSSVar
+      penumbra: CSSVar
+      ambient: CSSVar
+    }
+  >
   space: Record<Space, CSSVar>
+  black: CSSVar
+  white: CSSVar
+  gray: Record<ColorTintKey, CSSVar>
+  blue: Record<ColorTintKey, CSSVar>
+  purple: Record<ColorTintKey, CSSVar>
+  magenta: Record<ColorTintKey, CSSVar>
+  red: Record<ColorTintKey, CSSVar>
+  orange: Record<ColorTintKey, CSSVar>
+  yellow: Record<ColorTintKey, CSSVar>
+  green: Record<ColorTintKey, CSSVar>
+  cyan: Record<ColorTintKey, CSSVar>
 }
 
-export declare type Width = 'fill'
+export declare const vars: Vars
+
+export declare type Width = ContainerWidth | 'fill'
+
+export declare function width(props: WidthStyleProps): string
 
 export declare interface WidthStyleProps {
-  width?: ResponsiveProp<ContainerWidth | 'fill'>
+  width?: ResponsiveProp<Width>
 }
 
 export {}