@sanity/ui 3.0.0-static.8 → 3.0.0

package/dist/css.d.ts

@@ -1,1471 +0,0 @@
-import {AvatarSize} from '@sanity/ui/theme'
-import {ContainerWidth} from '@sanity/ui/theme'
-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 {FontTextSize} from '@sanity/ui/theme'
-import {FontWeight} from '@sanity/ui/theme'
-import {Hue} from '@sanity/ui/theme'
-import {Radius} from '@sanity/ui/theme'
-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 {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
-import {Tint} from '@sanity/ui/theme'
-
-export declare function animatedSpinnerIcon(): string | undefined
-
-/** @internal */
-export declare function _arrow(): string | undefined
-
-export declare function _arrowShape(): string | undefined
-
-export declare function _arrowStroke(): string | undefined
-
-export declare function avatar(props: AvatarStyleProps): string | undefined
-
-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>
-}
-
-/** @public */
-export declare function badge(props: BadgeStyleProps): string | undefined
-
-/** @public */
-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>
-  borderTop?: ResponsiveProp<boolean>
-  borderRight?: ResponsiveProp<boolean>
-  borderBottom?: ResponsiveProp<boolean>
-  borderLeft?: ResponsiveProp<boolean>
-}
-
-/** @public */
-export declare function box(props: BoxStyleProps): string | undefined
-
-/**
- * @public
- */
-export declare type BoxHeight = 'stretch' | 'fill'
-
-/** @public */
-export declare type BoxOverflow = 'visible' | 'hidden' | 'auto'
-
-/**
- * @public
- */
-export declare type BoxSizing = 'content' | 'border'
-
-/** @public */
-export declare interface BoxStyleProps
-  extends BorderStyleProps,
-    DisplayStyleProps,
-    FlexStyleProps,
-    FlexItemStyleProps,
-    GapStyleProps,
-    GridStyleProps,
-    GridItemStyleProps,
-    HeightStyleProps,
-    InsetStyleProps,
-    MarginStyleProps,
-    MaxWidthStyleProps,
-    MinWidthStyleProps,
-    OverflowStyleProps,
-    PaddingStyleProps,
-    PointerEventsStyleProps,
-    PositionStyleProps,
-    RadiusStyleProps,
-    WidthStyleProps {
-  muted?: boolean
-  outline?: 'none'
-  sizing?: ResponsiveProp<BoxSizing>
-}
-
-export declare function breadcrumbs(): string | undefined
-
-export declare function button(props: ButtonStyleProps): string | undefined
-
-export declare function buttonLoadingBox(): string | undefined
-
-export declare type ButtonScopedVarName = '--button-box-shadow'
-
-export declare interface ButtonStyleProps
-  extends DisplayStyleProps,
-    FlexItemStyleProps,
-    RadiusStyleProps,
-    WidthStyleProps {
-  mode?: ThemeColorButtonModeKey
-  tone?: ThemeColorStateToneKey
-}
-
-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-${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-link-fg`
-  | `--color-muted-bg`
-  | `--color-muted-fg`
-  | `--color-shadow-outline`
-  | `--color-shadow-umbra`
-  | `--color-shadow-penumbra`
-  | `--color-shadow-ambient`
-  | `--color-skeleton-from`
-  | `--color-skeleton-to`
-  | `--color-checkbox-bg`
-  | `--color-checkbox-fg`
-  | `--color-checkbox-border`
-  | `--font-ascender-height`
-  | `--font-descender-height`
-  | `--font-family`
-  | `--font-feature-settings`
-  | `--font-icon-offset`
-  | `--font-icon-size`
-  | `--font-letter-spacing`
-  | `--font-line-height`
-  | `--font-size`
-  | `--font-skeleton-line-height`
-  | `--font-skeleton-ascender-height`
-  | `--font-skeleton-descender-height`
-  | `--font-weight-regular`
-  | `--font-weight-medium`
-  | `--font-weight-semibold`
-  | `--font-weight-bold`
-  | `--font-weight`
-  | `--fg-color`
-  | `--padding-top`
-  | `--padding-right`
-  | `--padding-bottom`
-  | `--padding-left`
-
-export declare interface CardStyleProps extends BoxStyleProps, ShadowStyleProps {
-  checkered?: boolean
-  scheme?: ThemeColorSchemeKey
-  tone?: ThemeColorCardToneKey | 'inherit'
-}
-
-export declare function checkbox(): string | undefined
-
-export declare function checkboxInput(): string | undefined
-
-/** @public */
-export declare function code(props: CodeStyleProps): string | undefined
-
-/** @public */
-export declare type CodeSize = number
-
-export declare function codeSkeleton(props: CodeSkeletonStyleProps): string | undefined
-
-export declare interface CodeSkeletonStyleProps {
-  size?: ResponsiveProp<FontCodeSize>
-}
-
-/** @public */
-export declare interface CodeStyleProps extends FontStyleProps {
-  size?: ResponsiveProp<CodeSize>
-}
-
-/** @public */
-export declare interface ColorAvatarColorVarNames {
-  bg: VarName
-  fg: VarName
-}
-
-/** @public */
-export declare interface ColorAvatarColorVars {
-  bg: CSSVar
-  fg: CSSVar
-}
-
-/** @public */
-export declare type ColorAvatarVars = Record<ThemeColorAvatarColorKey, ColorAvatarColorVars>
-
-/** @public */
-export declare interface ColorBadgeToneVars {
-  bg: CSSVar
-  dot: CSSVar
-  fg: CSSVar
-  icon: CSSVar
-}
-
-/** @public */
-export declare type ColorBadgeVars = Record<ThemeColorStateToneKey, ColorBadgeToneVars>
-
-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`
-
-/** @public */
-export declare interface ColorCardVarNames {
-  accent: {
-    fg: VarName
-  }
-  avatar: Record<ThemeColorAvatarColorKey, ColorAvatarColorVarNames>
-  backdrop: VarName
-  code: {
-    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: VarName
-  }
-  muted: {
-    bg: VarName
-    fg: VarName
-  }
-  shadow: {
-    outline: VarName
-    umbra: VarName
-    penumbra: VarName
-    ambient: VarName
-  }
-  skeleton: {
-    from: VarName
-    to: VarName
-  }
-  solid: ColorVariantVarNames
-  tinted: ColorVariantVarNames
-}
-
-/** @public */
-export declare interface ColorCardVars {
-  accent: {
-    fg: CSSVar
-  }
-  avatar: ColorAvatarVars
-  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
-    }
-  }
-  focusRing: CSSVar
-  link: {
-    fg: CSSVar
-  }
-  muted: {
-    bg: CSSVar
-    fg: CSSVar
-  }
-  shadow: {
-    outline: CSSVar
-    umbra: CSSVar
-    penumbra: CSSVar
-    ambient: CSSVar
-  }
-  skeleton: {
-    from: CSSVar
-    to: 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
-  }
-}
-
-/** @public */
-export declare interface ColorInputStateVars {
-  bg: CSSVar
-  border: CSSVar
-  fg: CSSVar
-  muted: {
-    bg: CSSVar
-  }
-  placeholder: CSSVar
-}
-
-/** @public */
-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 interface ColorVariantVars
-  extends Record<ThemeColorStateToneKey, ColorElementVars>,
-    ColorElementVars {}
-
-export declare type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
-
-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(${VarName})`
-
-/** @public */
-export declare interface CustomCSSProperties extends Record<VarName, string> {}
-
-export declare function dialog(): string | undefined
-
-export declare function dialogCardRoot(): string | undefined
-
-export declare function dialogContainer(): string | undefined
-
-export declare function dialogContent(): string | undefined
-
-export declare function dialogFooter(): string | undefined
-
-export declare function dialogHeader(): string | undefined
-
-export declare function dialogLayout(): string | undefined
-
-/**
- * @public
- */
-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
- */
-export declare type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
-
-/**
- * @public
- */
-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>
-}
-
-/**
- * @public
- */
-export declare type FlexJustify =
-  | 'flex-start'
-  | 'flex-end'
-  | 'center'
-  | 'space-between'
-  | 'space-around'
-  | 'space-evenly'
-
-/** @public */
-export declare interface FlexStyleProps {
-  align?: ResponsiveProp<FlexAlign>
-  direction?: ResponsiveProp<FlexDirection>
-  justify?: ResponsiveProp<FlexJustify>
-  wrap?: ResponsiveProp<FlexWrap>
-}
-
-/**
- * @public
- */
-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
-  fontSize: CSSVar
-  lineHeight: CSSVar
-  letterSpacing: CSSVar
-  iconSize: CSSVar
-}
-
-/** @public */
-export declare interface FontStyleProps {
-  align?: TextAlign
-  weight?: FontWeight
-}
-
-export declare interface FontVarNames<Size extends number> {
-  family: VarName
-  sizes: Record<Size, FontSizeVarNames>
-}
-
-/** @public */
-export declare interface FontVars<Size extends number> {
-  family: CSSVar
-  sizes: Record<Size, FontSizeVars>
-}
-
-/** @public */
-export declare function gap(props: GapStyleProps): string | undefined
-
-/** @public */
-export declare interface GapStyleProps {
-  gap?: ResponsiveProp<Space>
-  gapX?: ResponsiveProp<Space>
-  gapY?: ResponsiveProp<Space>
-}
-
-export declare function getClassNames(...classNames: Array<string | false | undefined>): string[]
-
-export declare function grid(props: GridStyleProps): string | undefined
-
-/**
- * @public
- */
-export declare type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
-
-/**
- * @public
- */
-export declare type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
-
-/**
- * @public
- */
-export declare type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
-
-/** @public */
-export declare function gridItem(props: GridItemStyleProps): string | undefined
-
-/**
- * @public
- */
-export declare type GridItemColumn = 'auto' | 'full' | number
-
-/**
- * @public
- */
-export declare type GridItemColumnEnd = 'auto' | number
-
-/**
- * @public
- */
-export declare type GridItemColumnStart = 'auto' | number
-
-/**
- * @public
- */
-export declare type GridItemRow = 'auto' | 'full' | number
-
-/**
- * @public
- */
-export declare type GridItemRowEnd = 'auto' | number
-
-/**
- * @public
- */
-export declare type GridItemRowStart = 'auto' | number
-
-export declare interface GridItemStyleProps {
-  column?: ResponsiveProp<GridItemColumn>
-  columnStart?: ResponsiveProp<GridItemColumnStart>
-  columnEnd?: ResponsiveProp<GridItemColumnEnd>
-  row?: ResponsiveProp<GridItemRow>
-  rowStart?: ResponsiveProp<GridItemRowStart>
-  rowEnd?: ResponsiveProp<GridItemRowEnd>
-}
-
-/** @public */
-export declare interface GridStyleProps {
-  autoRows?: ResponsiveProp<GridAutoRows>
-  autoCols?: ResponsiveProp<GridAutoCols>
-  autoFlow?: ResponsiveProp<GridAutoFlow>
-  columns?: ResponsiveProp<Columns>
-  rows?: ResponsiveProp<Rows>
-}
-
-/** @public */
-export declare function heading(props: HeadingStyleProps): string | undefined
-
-/** @public */
-export declare type HeadingSize = number
-
-export declare function headingSkeleton(props: HeadingSkeletonStyleProps): string | undefined
-
-export declare interface HeadingSkeletonStyleProps {
-  size?: ResponsiveProp<FontHeadingSize>
-}
-
-/** @public */
-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 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 | undefined
-
-/** @public */
-export declare type LabelSize = number
-
-export declare function labelSkeleton(props: LabelSkeletonStyleProps): string | undefined
-
-export declare interface LabelSkeletonStyleProps {
-  size?: ResponsiveProp<FontLabelSize>
-}
-
-/** @public */
-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>
-  marginRight?: ResponsiveProp<number>
-  marginBottom?: ResponsiveProp<number>
-  marginLeft?: ResponsiveProp<number>
-  marginX?: ResponsiveProp<number>
-  marginY?: ResponsiveProp<number>
-}
-
-export declare function maxWidth(props: MaxWidthStyleProps): string
-
-export declare interface MaxWidthStyleProps {
-  maxWidth?: ResponsiveProp<ContainerWidth | 'auto' | 'fill'>
-}
-
-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 {
-  overflow?: ResponsiveProp<BoxOverflow>
-  overflowX?: ResponsiveProp<BoxOverflow>
-  overflowY?: ResponsiveProp<BoxOverflow>
-}
-
-export declare function padding(props: PaddingStyleProps): string | undefined
-
-/** @public */
-export declare interface PaddingStyleProps {
-  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 | 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 {
-  position?: ResponsiveProp<Position>
-}
-
-/** @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 type PropertiesWithVarsAndNested = PropertiesWithVars & {
-  '@nest'?: Record<string, PropertiesWithVars>
-}
-
-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 | '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 | 11 | 12
-
-/** @public */
-export declare interface Rules {
-  [className: string]: Properties
-}
-
-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<ColorCardVars, 'avatar'> {
-  avatar: ColorAvatarVars & ColorAvatarColorVars
-  bg: CSSVar
-  border: CSSVar
-  fg: CSSVar
-  input: {
-    bg: CSSVar
-    border: CSSVar
-    fg: CSSVar
-    placeholder: CSSVar
-  }
-}
-
-export declare function select(props: SelectStyleProps): string | undefined
-
-/** @internal */
-export declare function _selectable(props: SelectableStyleProps): string | undefined
-
-/** @internal */
-export declare interface SelectableStyleProps extends RadiusStyleProps {
-  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 | undefined
-
-/** @beta */
-export declare interface SkeletonStyleProps extends RadiusStyleProps {}
-
-export declare function spinner(): string | undefined
-
-export declare function srOnly(): string | undefined
-
-/** @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 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(props: TextAreaStyleProps): string | undefined
-
-/** @public */
-export declare interface TextAreaStyleProps extends InputStyleProps {}
-
-export declare function textInput(props: TextInputStyleProps): string | undefined
-
-/** @public */
-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 | undefined
-
-export declare interface TextSkeletonStyleProps {
-  size?: ResponsiveProp<FontTextSize>
-}
-
-/** @public */
-export declare interface TextStyleProps extends FlexItemStyleProps, FontStyleProps {
-  accent?: boolean
-  muted?: boolean
-  size?: ResponsiveProp<TextSize>
-}
-
-/** @public */
-export declare type ThemeVarName =
-  | `--avatar-focus-ring-offset`
-  | `--avatar-focus-ring-width`
-  | `--avatar-${AvatarSize}-distance`
-  | `--avatar-${AvatarSize}-size`
-  | `--button-border-width`
-  | `--button-focus-ring-offset`
-  | `--button-focus-ring-width`
-  | `--button-text-weight`
-  | `--card-border-width`
-  | `--card-focus-ring-offset`
-  | `--card-focus-ring-width`
-  | `--shadow-outline`
-  | `--container-${ContainerWidth}`
-  | `--font-code-family`
-  | `--font-code-feature-settings`
-  | `--font-code-weight-${FontWeight}`
-  | `--font-code-${FontCodeSize}-ascender-height`
-  | `--font-code-${FontCodeSize}-descender-height`
-  | `--font-code-${FontCodeSize}-size`
-  | `--font-code-${FontCodeSize}-line-height`
-  | `--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`
-  | `--font-heading-${FontHeadingSize}-size`
-  | `--font-heading-${FontHeadingSize}-line-height`
-  | `--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`
-  | `--font-label-${FontLabelSize}-size`
-  | `--font-label-${FontLabelSize}-line-height`
-  | `--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`
-  | `--font-text-${FontTextSize}-size`
-  | `--font-text-${FontTextSize}-line-height`
-  | `--font-text-${FontTextSize}-letter-spacing`
-  | `--font-text-${FontTextSize}-icon-size`
-  | `--input-border-width`
-  | `--input-box-shadow`
-  | `--input-checkbox-focus-ring-offset`
-  | `--input-checkbox-focus-ring-width`
-  | `--input-checkbox-size`
-  | `--input-radio-focus-ring-offset`
-  | `--input-radio-focus-ring-width`
-  | `--input-radio-mark-size`
-  | `--input-radio-size`
-  | `--input-select-focus-ring-offset`
-  | `--input-select-focus-ring-width`
-  | `--input-switch-focus-ring-offset`
-  | `--input-switch-focus-ring-width`
-  | '--input-switch-width'
-  | '--input-switch-height'
-  | '--input-switch-padding'
-  | '--input-switch-transition-duration-ms'
-  | '--input-switch-transition-timing-function'
-  | '--input-text-focus-ring-offset'
-  | '--input-text-focus-ring-width'
-  | '--layer-dialog-z-offset'
-  | `--radius-${Radius}`
-  | `--space-${Exclude<Space, 0.5> | '0_5'}`
-  | `--shadow-${Shadow}-umbra`
-  | `--shadow-${Shadow}-penumbra`
-  | `--shadow-${Shadow}-ambient`
-
-export declare function toast(): string | undefined
-
-export declare function toastLayer(): string | undefined
-
-export declare function toastLoadingBar(): string | undefined
-
-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 &
-    Record<ThemeColorCardToneKey, ColorCardVarNames>
-  container: Record<Exclude<ContainerWidth, 'auto'>, VarName>
-  avatar: {
-    distance: VarName
-    focusRing: {
-      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: {
-    fontSize: VarName
-    lineHeight: VarName
-    letterSpacing: VarName
-    ascenderHeight: VarName
-    descenderHeight: VarName
-    gap: VarName
-    padding: VarName
-  }
-  radius: Record<Radius, VarName>
-  space: Record<Space, VarName>
-}
-
-export declare const varNames: VarNames
-
-/** @public */
-export declare interface Vars {
-  avatar: {
-    distance: CSSVar
-    size: CSSVar
-    sizes: Record<
-      AvatarSize,
-      {
-        distance: CSSVar
-        size: CSSVar
-      }
-    >
-  }
-  color: {
-    dark: ColorSchemeVars
-    light: ColorSchemeVars
-  } & 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>
-  space: Record<Space, CSSVar>
-}
-
-export declare const vars: Vars
-
-export declare type Width = ContainerWidth | 'fill'
-
-export declare function width(props: WidthStyleProps): string
-
-export declare interface WidthStyleProps {
-  width?: ResponsiveProp<Width>
-}
-
-export {}