@sanity/ui 3.0.0-static.2 → 3.0.0-static.21

package/dist/css.d.mts

@@ -1,2135 +0,0 @@
-import {AvatarSize} from '@sanity/ui/theme'
-import {ColorHueKey} from '@sanity/color'
-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 as Hue_2} from '@sanity/ui/theme'
-import {PaletteConfig as PaletteConfig_2} 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 type {StyledObject} from 'styled-components'
-import {ThemeBoxShadow as ThemeBoxShadow_2} from '@sanity/ui/theme'
-import {ThemeColorAvatarColorKey as ThemeColorAvatarColorKey_2} from '@sanity/ui/theme'
-import {ThemeColorButtonModeKey as ThemeColorButtonModeKey_2} from '@sanity/ui/theme'
-import {ThemeColorCardToneKey as ThemeColorCardToneKey_2} from '@sanity/ui/theme'
-import {ThemeColorSchemeKey as ThemeColorSchemeKey_2} from '@sanity/ui/theme'
-import {ThemeColorStateToneKey as ThemeColorStateToneKey_2} from '@sanity/ui/theme'
-import {Tint as Tint_2} from '@sanity/ui/theme'
-
-export declare function animatedSpinnerIcon(): string | undefined
-
-/** @internal */
-export declare function _arrow(): string | undefined
-
-export declare function _arrowShape(): string
-
-export declare function _arrowStroke(): string
-
-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_2
-  size: ResponsiveProp<AvatarSize>
-}
-
-/** @public */
-export declare function badge(props: BadgeStyleProps): string | undefined
-
-/** @public */
-export declare interface BadgeStyleProps extends RadiusStyleProps {
-  tone: ThemeColorStateToneKey_2
-}
-
-/** @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,
-    InsetStyleProps,
-    MarginStyleProps,
-    MaxWidthStyleProps,
-    OverflowStyleProps,
-    PaddingStyleProps,
-    PointerEventsStyleProps,
-    PositionStyleProps,
-    RadiusStyleProps,
-    WidthStyleProps {
-  height?: ResponsiveProp<BoxHeight>
-  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 interface ButtonStyleProps
-  extends DisplayStyleProps,
-    FlexItemStyleProps,
-    RadiusStyleProps,
-    WidthStyleProps {
-  mode?: ThemeColorButtonModeKey_2
-  tone?: ThemeColorStateToneKey_2
-}
-
-export declare function card(props: CardStyleProps): string | undefined
-
-/** @public */
-declare interface CardColorTokens {
-  _hue: Hue
-  avatar: Record<
-    Hue,
-    {
-      _hue: Hue
-      bg: [ColorToken, ColorToken]
-      fg: [ColorToken, ColorToken]
-    }
-  >
-  backdrop: [ColorToken, ColorToken]
-  focusRing: [ColorToken, ColorToken]
-  link: {
-    fg: [ColorToken, ColorToken]
-  }
-  shadow: {
-    outline: [ColorToken, ColorToken]
-    umbra: [ColorToken, ColorToken]
-    penumbra: [ColorToken, ColorToken]
-    ambient: [ColorToken, ColorToken]
-  }
-  skeleton: {
-    from: [ColorToken, ColorToken]
-    to: [ColorToken, ColorToken]
-  }
-  token: {
-    atrule: [ColorToken, ColorToken]
-    attrName: [ColorToken, ColorToken]
-    attrValue: [ColorToken, ColorToken]
-    attribute: [ColorToken, ColorToken]
-    boolean: [ColorToken, ColorToken]
-    builtin: [ColorToken, ColorToken]
-    cdata: [ColorToken, ColorToken]
-    char: [ColorToken, ColorToken]
-    class: [ColorToken, ColorToken]
-    className: [ColorToken, ColorToken]
-    comment: [ColorToken, ColorToken]
-    constant: [ColorToken, ColorToken]
-    deleted: [ColorToken, ColorToken]
-    doctype: [ColorToken, ColorToken]
-    entity: [ColorToken, ColorToken]
-    function: [ColorToken, ColorToken]
-    hexcode: [ColorToken, ColorToken]
-    id: [ColorToken, ColorToken]
-    important: [ColorToken, ColorToken]
-    inserted: [ColorToken, ColorToken]
-    keyword: [ColorToken, ColorToken]
-    number: [ColorToken, ColorToken]
-    operator: [ColorToken, ColorToken]
-    prolog: [ColorToken, ColorToken]
-    property: [ColorToken, ColorToken]
-    pseudoClass: [ColorToken, ColorToken]
-    pseudoElement: [ColorToken, ColorToken]
-    punctuation: [ColorToken, ColorToken]
-    regex: [ColorToken, ColorToken]
-    selector: [ColorToken, ColorToken]
-    string: [ColorToken, ColorToken]
-    symbol: [ColorToken, ColorToken]
-    tag: [ColorToken, ColorToken]
-    unit: [ColorToken, ColorToken]
-    url: [ColorToken, ColorToken]
-    variable: [ColorToken, ColorToken]
-  }
-  variant: {
-    solid: Record<'*' | ThemeColorStateToneKey, ElementColorTokens>
-    tinted: Record<'*' | ThemeColorStateToneKey, ElementColorTokens>
-  }
-}
-
-/** @public */
-export declare type CardScopedVarName =
-  | `--color-accent-fg`
-  | `--color-avatar-bg`
-  | `--color-avatar-fg`
-  | `--color-avatar-${ThemeColorAvatarColorKey_2}-bg`
-  | `--color-avatar-${ThemeColorAvatarColorKey_2}-fg`
-  | `--color-backdrop`
-  | `--color-${ElementColorVariant}-${ThemeColorStateToneKey_2}-${ElementColorVariantKey}`
-  | `--color-bg`
-  | `--color-border`
-  | `--color-code-bg`
-  | `--color-code-fg`
-  | `--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-token-atrule`
-  | `--color-token-attr-name`
-  | `--color-token-attr-value`
-  | `--color-token-attribute`
-  | `--color-token-boolean`
-  | `--color-token-builtin`
-  | `--color-token-cdata`
-  | `--color-token-char`
-  | `--color-token-class`
-  | `--color-token-class-name`
-  | `--color-token-comment`
-  | `--color-token-constant`
-  | `--color-token-deleted`
-  | `--color-token-doctype`
-  | `--color-token-entity`
-  | `--color-token-function`
-  | `--color-token-hexcode`
-  | `--color-token-id`
-  | `--color-token-important`
-  | `--color-token-inserted`
-  | `--color-token-keyword`
-  | `--color-token-number`
-  | `--color-token-operator`
-  | `--color-token-prolog`
-  | `--color-token-property`
-  | `--color-token-pseudo-class`
-  | `--color-token-pseudo-element`
-  | `--color-token-punctuation`
-  | `--color-token-regex`
-  | `--color-token-selector`
-  | `--color-token-string`
-  | `--color-token-symbol`
-  | `--color-token-tag`
-  | `--color-token-unit`
-  | `--color-token-url`
-  | `--color-token-variable`
-  | `--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
-  selectable?: boolean
-  scheme?: ThemeColorSchemeKey_2
-  tone?: ThemeColorCardToneKey_2 | '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: CSSVarName
-  fg: CSSVarName
-}
-
-/** @public */
-export declare interface ColorAvatarColorVars {
-  bg: CSSVar
-  fg: CSSVar
-}
-
-/** @public */
-export declare type ColorAvatarVars = Record<ThemeColorAvatarColorKey_2, ColorAvatarColorVars>
-
-/** @public */
-export declare interface ColorBadgeToneVars {
-  bg: CSSVar
-  dot: CSSVar
-  fg: CSSVar
-  icon: CSSVar
-}
-
-/** @public */
-export declare type ColorBadgeVars = Record<ThemeColorStateToneKey_2, ColorBadgeToneVars>
-
-export declare type ColorCardToneScopedVarName =
-  | `--color-${ThemeColorCardToneKey_2}-accent-fg`
-  | `--color-${ThemeColorCardToneKey_2}-avatar-${ThemeColorAvatarColorKey_2}-bg`
-  | `--color-${ThemeColorCardToneKey_2}-avatar-${ThemeColorAvatarColorKey_2}-fg`
-  | `--color-${ThemeColorCardToneKey_2}-backdrop`
-  | `--color-${ThemeColorCardToneKey_2}-focus-ring`
-  | `--color-${ThemeColorCardToneKey_2}-link-fg`
-  | `--color-${ThemeColorCardToneKey_2}-muted-bg`
-  | `--color-${ThemeColorCardToneKey_2}-muted-fg`
-  | `--color-${ThemeColorCardToneKey_2}-${ElementColorVariant}-${ThemeColorStateToneKey_2}-${ElementColorVariantKey}`
-  | `--color-${ThemeColorCardToneKey_2}-shadow-outline`
-  | `--color-${ThemeColorCardToneKey_2}-shadow-umbra`
-  | `--color-${ThemeColorCardToneKey_2}-shadow-penumbra`
-  | `--color-${ThemeColorCardToneKey_2}-shadow-ambient`
-  | `--color-${ThemeColorCardToneKey_2}-skeleton-from`
-  | `--color-${ThemeColorCardToneKey_2}-skeleton-to`
-  | `--color-${ThemeColorCardToneKey_2}-token-atrule`
-  | `--color-${ThemeColorCardToneKey_2}-token-attr-name`
-  | `--color-${ThemeColorCardToneKey_2}-token-attr-value`
-  | `--color-${ThemeColorCardToneKey_2}-token-attribute`
-  | `--color-${ThemeColorCardToneKey_2}-token-boolean`
-  | `--color-${ThemeColorCardToneKey_2}-token-builtin`
-  | `--color-${ThemeColorCardToneKey_2}-token-cdata`
-  | `--color-${ThemeColorCardToneKey_2}-token-char`
-  | `--color-${ThemeColorCardToneKey_2}-token-class`
-  | `--color-${ThemeColorCardToneKey_2}-token-class-name`
-  | `--color-${ThemeColorCardToneKey_2}-token-comment`
-  | `--color-${ThemeColorCardToneKey_2}-token-constant`
-  | `--color-${ThemeColorCardToneKey_2}-token-deleted`
-  | `--color-${ThemeColorCardToneKey_2}-token-doctype`
-  | `--color-${ThemeColorCardToneKey_2}-token-entity`
-  | `--color-${ThemeColorCardToneKey_2}-token-function`
-  | `--color-${ThemeColorCardToneKey_2}-token-hexcode`
-  | `--color-${ThemeColorCardToneKey_2}-token-id`
-  | `--color-${ThemeColorCardToneKey_2}-token-important`
-  | `--color-${ThemeColorCardToneKey_2}-token-inserted`
-  | `--color-${ThemeColorCardToneKey_2}-token-keyword`
-  | `--color-${ThemeColorCardToneKey_2}-token-number`
-  | `--color-${ThemeColorCardToneKey_2}-token-operator`
-  | `--color-${ThemeColorCardToneKey_2}-token-prolog`
-  | `--color-${ThemeColorCardToneKey_2}-token-property`
-  | `--color-${ThemeColorCardToneKey_2}-token-pseudo-class`
-  | `--color-${ThemeColorCardToneKey_2}-token-pseudo-element`
-  | `--color-${ThemeColorCardToneKey_2}-token-punctuation`
-  | `--color-${ThemeColorCardToneKey_2}-token-regex`
-  | `--color-${ThemeColorCardToneKey_2}-token-selector`
-  | `--color-${ThemeColorCardToneKey_2}-token-string`
-  | `--color-${ThemeColorCardToneKey_2}-token-symbol`
-  | `--color-${ThemeColorCardToneKey_2}-token-tag`
-  | `--color-${ThemeColorCardToneKey_2}-token-unit`
-  | `--color-${ThemeColorCardToneKey_2}-token-url`
-  | `--color-${ThemeColorCardToneKey_2}-token-variable`
-
-export declare type ColorCardVarName =
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-accent-fg`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-avatar-${ThemeColorAvatarColorKey_2}-bg`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-avatar-${ThemeColorAvatarColorKey_2}-fg`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-backdrop`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-focus-ring`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-link-fg`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-muted-bg`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-muted-fg`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-${ElementColorVariant}-${ThemeColorStateToneKey_2}-${ElementColorVariantKey}`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-shadow-outline`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-shadow-umbra`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-shadow-penumbra`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-shadow-ambient`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-skeleton-from`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-skeleton-to`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-atrule`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-attr-name`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-attr-value`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-attribute`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-boolean`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-builtin`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-cdata`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-char`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-class`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-class-name`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-comment`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-constant`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-deleted`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-doctype`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-entity`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-function`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-hexcode`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-id`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-important`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-inserted`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-keyword`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-number`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-operator`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-prolog`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-property`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-pseudo-class`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-pseudo-element`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-punctuation`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-regex`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-selector`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-string`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-symbol`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-tag`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-unit`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-url`
-  | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-variable`
-
-/** @public */
-export declare interface ColorCardVarNames {
-  accent: {
-    fg: CSSVarName
-  }
-  avatar: Record<ThemeColorAvatarColorKey_2, ColorAvatarColorVarNames>
-  backdrop: CSSVarName
-  focusRing: CSSVarName
-  link: {
-    fg: CSSVarName
-  }
-  muted: {
-    bg: CSSVarName
-    fg: CSSVarName
-  }
-  shadow: {
-    outline: CSSVarName
-    umbra: CSSVarName
-    penumbra: CSSVarName
-    ambient: CSSVarName
-  }
-  skeleton: {
-    from: CSSVarName
-    to: CSSVarName
-  }
-  token: {
-    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
-  }
-  solid: ColorVariantVarNames
-  tinted: ColorVariantVarNames
-}
-
-/** @public */
-export declare interface ColorCardVars {
-  accent: {
-    fg: CSSVar
-  }
-  avatar: ColorAvatarVars
-  backdrop: 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
-  }
-  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
-  }
-  solid: ColorVariantVars
-  tinted: ColorVariantVars
-}
-
-/** @public */
-export declare interface ColorElementVarNames {
-  bg: {
-    0: CSSVarName
-    1: CSSVarName
-    2: CSSVarName
-    3: CSSVarName
-    4: CSSVarName
-  }
-  border: {
-    0: CSSVarName
-    1: CSSVarName
-    2: CSSVarName
-    3: CSSVarName
-    4: CSSVarName
-  }
-  fg: {
-    0: CSSVarName
-    1: CSSVarName
-    2: CSSVarName
-    3: CSSVarName
-    4: CSSVarName
-  }
-}
-
-/** @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_2, ColorCardVarNames>
-
-/** @public */
-export declare interface ColorSchemeVars extends Record<ThemeColorCardToneKey_2, ColorCardVars> {}
-
-/** @public */
-declare type ColorToken =
-  | `black`
-  | `black/${ColorTokenOpacityValue}`
-  | `white`
-  | `white/${ColorTokenOpacityValue}`
-  | `${Hue}/${Tint}`
-  | `${Hue}/${Tint}/${ColorTokenOpacityValue}`
-  | `${Hue}/${Tint} ${number}%`
-  | `${Tint}`
-  | `${Tint}/${ColorTokenOpacityValue}`
-  | `${Tint} ${number}%`
-
-/** @public */
-declare type ColorTokenOpacityValue = `0` | `0.${number}` | `1`
-
-/** @public */
-declare type ColorTokens = Record<'*' | ThemeColorCardToneKey, CardColorTokens>
-
-export declare interface ColorVariantVarNames
-  extends ColorElementVarNames,
-    Record<ThemeColorStateToneKey_2, ColorElementVarNames> {}
-
-/** @public */
-export declare interface ColorVariantVars
-  extends Record<ThemeColorStateToneKey_2, ColorElementVars>,
-    ColorElementVars {}
-
-export declare type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
-
-export declare function compilePalette(config: PaletteConfig_2): 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>
-}
-
-/**
- * Work around types that are missing in `styled-components@6`
- * https://github.com/styled-components/styled-components/issues/4062
- * @internal
- */
-declare type CSSObject = StyledObject<any>
-
-/** @public */
-export declare type CSSVar = `var(${CSSVarName})`
-
-/** @public */
-export declare type CSSVarName =
-  | AvatarScopedVarName
-  | LegacyCardScopedVarName
-  | PaletteVarName
-  | ThemeVarName
-  | ColorCardVarName
-  | ColorCardToneScopedVarName
-  | CardScopedVarName
-  | ElementColorVariantScopedVarName
-  | InputScopedVarName
-  | SwitchScopedVarName
-
-/** @public */
-export declare interface CustomCSSProperties extends Record<CSSVarName, 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 */
-declare interface ElementColorTokens {
-  _hue: Hue
-  bg: {
-    0: [ColorToken, ColorToken]
-    4: [ColorToken, ColorToken]
-  }
-  border: {
-    0: [ColorToken, ColorToken]
-    4: [ColorToken, ColorToken]
-  }
-  fg: {
-    0: [ColorToken, ColorToken]
-    4: [ColorToken, ColorToken]
-  }
-}
-
-/** @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 = number | 'none' | 'auto' | 'initial'
-
-/**
- * @public
- */
-export declare type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
-
-/** @public */
-export declare function font(props: FontStyleProps): string | undefined
-
-/** @public */
-export declare interface FontSizeVarNames {
-  ascenderHeight: CSSVarName
-  descenderHeight: CSSVarName
-  fontSize: CSSVarName
-  lineHeight: CSSVarName
-  letterSpacing: CSSVarName
-  iconSize: CSSVarName
-}
-
-/** @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: CSSVarName
-  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 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>
-}
-
-declare type Hue = (typeof HUES)[number]
-
-declare const HUES: readonly [
-  'gray',
-  'blue',
-  'purple',
-  'magenta',
-  'red',
-  'orange',
-  'yellow',
-  'green',
-  'cyan',
-]
-
-/** @internal */
-export declare function _input(props: InputStyleProps): string | undefined
-
-export declare function _inputElement(): string
-
-export declare function _inputPresentation(): string
-
-/** @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_2}-bg-color`
-  | `--card-avatar-${ThemeColorAvatarColorKey_2}-fg-color`
-  | `--card-backdrop-color`
-  | `--card-badge-${ThemeColorStateToneKey_2}-bg-color`
-  | `--card-badge-${ThemeColorStateToneKey_2}-dot-color`
-  | `--card-badge-${ThemeColorStateToneKey_2}-fg-color`
-  | `--card-badge-${ThemeColorStateToneKey_2}-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>
-}
-
-export declare function menu(): string | undefined
-
-export declare function menuDivider(): string | undefined
-
-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>
-}
-
-declare type PaletteConfig = {
-  chroma: {
-    min: number
-    max: number
-  }
-  luminosity: {
-    min: number
-    max: number
-  }
-  hues: Record<
-    Hue,
-    {
-      h: number
-      c: number
-    }
-  >
-}
-
-/** @public */
-export declare type PaletteVarName = `--black` | `--white` | `--${Hue_2}-${Tint_2}`
-
-/** @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
-
-/** @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 interface Properties extends CSS_2.PropertiesFallback, Partial<CustomCSSProperties> {
-  '@keyframes'?: Record<string, Record<string, Properties>>
-  '@media'?: Record<string, Properties>
-  '@nest'?: Record<string, Properties>
-}
-
-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>
-}
-
-export declare function rem(value: number): string
-
-/** @public */
-export declare type ResponsiveProp<T> = T | Array<T | null | undefined>
-
-/**
- * @public
- */
-declare interface RootTheme_v2 {
-  _version: 2
-  avatar: ThemeAvatar_v2
-  button: {
-    border: {
-      width: number
-    }
-    focusRing: ThemeFocusRing
-    textWeight: ThemeFontWeightKey
-  }
-  card: {
-    border: {
-      width: number
-    }
-    focusRing: ThemeFocusRing
-    shadow: {
-      outline: number
-    }
-  }
-  color: ThemeColorSchemes_v2
-  container: number[]
-  font: ThemeFonts
-  input: ThemeInput_v2
-  layer: ThemeLayer
-  media: number[]
-  radius: number[]
-  shadow: Array<ThemeShadow | null>
-  space: number[]
-  /** @internal */
-  style?: ThemeStyles
-}
-
-export declare type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
-
-/** @public */
-export declare interface Rules {
-  [className: string]: Properties
-}
-
-export declare interface ScopedColorVarNames extends Omit<ColorCardVarNames, 'avatar'> {
-  accent: {
-    fg: CSSVarName
-  }
-  avatar: Record<ThemeColorAvatarColorKey_2, ColorAvatarColorVarNames> & ColorAvatarColorVarNames
-  bg: CSSVarName
-  border: CSSVarName
-  fg: CSSVarName
-  input: {
-    bg: CSSVarName
-    border: CSSVarName
-    fg: CSSVarName
-    placeholder: CSSVarName
-  }
-}
-
-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_2
-}
-
-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
-
-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 */
-declare const THEME_COLOR_AVATAR_COLORS: ColorHueKey[]
-
-/** @public */
-declare const THEME_COLOR_BLEND_MODES: readonly ['multiply', 'screen']
-
-/** @public */
-declare const THEME_COLOR_BUTTON_MODES: readonly ['default', 'ghost', 'bleed']
-
-/** @public */
-declare const THEME_COLOR_CARD_TONES: readonly [
-  'transparent',
-  'default',
-  'neutral',
-  'primary',
-  'suggest',
-  'positive',
-  'caution',
-  'critical',
-]
-
-/** @public */
-declare const THEME_COLOR_INPUT_MODES: readonly ['default', 'invalid']
-
-/** @public */
-declare const THEME_COLOR_INPUT_STATES: readonly ['enabled', 'hovered', 'readOnly', 'disabled']
-
-/** @public */
-declare const THEME_COLOR_SCHEMES: readonly ['light', 'dark']
-
-/** @public */
-declare const THEME_COLOR_STATE_TONES: readonly [
-  'default',
-  'neutral',
-  'primary',
-  'suggest',
-  'positive',
-  'caution',
-  'critical',
-]
-
-/** @public */
-declare const THEME_COLOR_STATES: readonly ['enabled', 'hovered', 'pressed', 'selected', 'disabled']
-
-/**
- * Supersedes `RootTheme` and `RootTheme_v2`.
- *
- * @public
- */
-declare interface Theme_v3 {
-  _version: 3
-  _palette: PaletteConfig
-  _tokens: Tokens
-  avatar: ThemeAvatar_v2
-  button: {
-    border: {
-      width: number
-    }
-    focusRing: ThemeFocusRing
-    textWeight: ThemeFontWeightKey
-  }
-  card: {
-    border: {
-      width: number
-    }
-    focusRing: ThemeFocusRing
-    shadow: {
-      outline: number
-    }
-  }
-  color: ThemeColor_v3
-  container: number[]
-  font: ThemeFonts
-  input: ThemeInput_v2
-  layer: ThemeLayer
-  media: number[]
-  radius: number[]
-  shadow: Array<ThemeShadow | null>
-  space: number[]
-}
-
-/**
- * @public
- */
-declare interface ThemeAvatar_v2 {
-  sizes: {
-    /** Spacing between avatars in an <AvatarStack> component (px) */
-    distance: number
-    /** Diameter of the avatar (px) */
-    size: number
-  }[]
-  focusRing: ThemeFocusRing
-}
-
-/**
- * @public
- */
-declare type ThemeBoxShadow = [number, number, number, number]
-
-declare type ThemeColor_v3 = Record<ThemeColorSchemeKey, ThemeColorScheme_v3>
-
-/**
- * @public
- */
-declare type ThemeColorAvatar_v2 = Record<ThemeColorAvatarColorKey, ThemeColorAvatarHue_v2>
-
-/** @public */
-declare type ThemeColorAvatarColorKey = (typeof THEME_COLOR_AVATAR_COLORS)[number]
-
-/**
- * @public
- */
-declare interface ThemeColorAvatarHue_v2 {
-  _blend?: ThemeColorBlendModeKey
-  bg: string
-  fg: string
-}
-
-/**
- * @public
- */
-declare type ThemeColorBadge_v2 = Record<ThemeColorStateToneKey, ThemeColorBadgeTone_v2>
-
-/**
- * @public
- */
-declare interface ThemeColorBadgeTone_v2 {
-  bg: string
-  fg: string
-  dot: string
-  icon: string
-}
-
-/** @public */
-declare type ThemeColorBlendModeKey = (typeof THEME_COLOR_BLEND_MODES)[number]
-
-/**
- * @public
- */
-declare type ThemeColorButton_v2 = Record<ThemeColorButtonModeKey, ThemeColorButtonMode_v2>
-
-/**
- * @public
- */
-declare type ThemeColorButtonMode_v2 = Record<ThemeColorStateToneKey, ThemeColorButtonTone_v2>
-
-/** @public */
-declare type ThemeColorButtonModeKey = (typeof THEME_COLOR_BUTTON_MODES)[number]
-
-/**
- * @public
- */
-declare type ThemeColorButtonTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
-
-/**
- * @public
- */
-declare interface ThemeColorCard_v2 extends ThemeColorState_v2 {
-  /** @internal */
-  _blend: ThemeColorBlendModeKey
-  _dark: boolean
-  backdrop: string
-  button: ThemeColorButton_v2
-  focusRing: string
-  input: ThemeColorInput_v2
-  selectable: ThemeColorSelectable_v2
-  shadow: ThemeColorShadow
-  syntax: ThemeColorSyntax
-}
-
-declare interface ThemeColorCard_v3 {
-  _hue: Hue
-  avatar: ThemeColorAvatar_v2
-  backdrop: string
-  focusRing: string
-  shadow: {
-    outline: string
-    umbra: string
-    penumbra: string
-    ambient: string
-  }
-  token: {
-    atrule: string
-    attrName: string
-    attrValue: string
-    attribute: string
-    boolean: string
-    builtin: string
-    cdata: string
-    char: string
-    class: string
-    className: string
-    comment: string
-    constant: string
-    deleted: string
-    doctype: string
-    entity: string
-    function: string
-    hexcode: string
-    id: string
-    important: string
-    inserted: string
-    keyword: string
-    number: string
-    operator: string
-    prolog: string
-    property: string
-    pseudoClass: string
-    pseudoElement: string
-    punctuation: string
-    regex: string
-    selector: string
-    string: string
-    symbol: string
-    tag: string
-    unit: string
-    url: string
-    variable: string
-  }
-  skeleton: {
-    from: string
-    to: string
-  }
-  variant: Record<ThemeColorVariantKey, ThemeColorVariant>
-}
-
-/** @public */
-declare type ThemeColorCardToneKey = (typeof THEME_COLOR_CARD_TONES)[number]
-
-declare interface ThemeColorElement {
-  _hue: Hue
-  bg: {
-    0: string
-    4: string
-  }
-  border: {
-    0: string
-    4: string
-  }
-  fg: {
-    0: string
-    4: string
-  }
-}
-
-/**
- * @public
- */
-declare type ThemeColorInput_v2 = Record<ThemeColorInputModeKey, ThemeColorInputMode_v2>
-
-/**
- * @public
- */
-declare type ThemeColorInputMode_v2 = Record<ThemeColorInputStateKey, ThemeColorInputState_v2>
-
-/** @public */
-declare type ThemeColorInputModeKey = (typeof THEME_COLOR_INPUT_MODES)[number]
-
-/**
- * @public
- */
-declare interface ThemeColorInputState_v2 {
-  _blend?: ThemeColorBlendModeKey
-  bg: string
-  border: string
-  fg: string
-  muted: {
-    bg: string
-  }
-  placeholder: string
-}
-
-/** @public */
-declare type ThemeColorInputStateKey = (typeof THEME_COLOR_INPUT_STATES)[number]
-
-/**
- * @public
- */
-declare interface ThemeColorKBD {
-  bg: string
-  fg: string
-  border: string
-}
-
-/**
- * @public
- */
-declare type ThemeColorScheme_v2 = Record<ThemeColorCardToneKey, ThemeColorCard_v2>
-
-declare interface ThemeColorScheme_v3 {
-  card: Record<ThemeColorCardToneKey, ThemeColorCard_v3>
-}
-
-/**
- * @public
- */
-declare type ThemeColorSchemeKey = (typeof THEME_COLOR_SCHEMES)[number]
-
-/**
- * @public
- */
-declare type ThemeColorSchemes_v2 = Record<ThemeColorSchemeKey, ThemeColorScheme_v2>
-
-/**
- * @public
- */
-declare type ThemeColorSelectable_v2 = Record<ThemeColorStateToneKey, ThemeColorSelectableTone_v2>
-
-/**
- * @public
- */
-declare type ThemeColorSelectableTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
-
-/** @public */
-declare interface ThemeColorShadow {
-  outline: string
-  umbra: string
-  penumbra: string
-  ambient: string
-}
-
-/**
- * @public
- */
-declare interface ThemeColorState_v2 {
-  /** @internal */
-  _blend?: ThemeColorBlendModeKey
-  accent: {
-    fg: string
-  }
-  /**
-   * @internal  This may be removed in a future release
-   * */
-  avatar: ThemeColorAvatar_v2
-  /**
-   * @internal  This may be removed in a future release
-   * */
-  badge: ThemeColorBadge_v2
-  bg: string
-  border: string
-  code: {
-    bg: string
-    fg: string
-  }
-  fg: string
-  icon: string
-  kbd: ThemeColorKBD
-  link: {
-    fg: string
-  }
-  muted: {
-    bg: string
-    fg: string
-  }
-  skeleton: {
-    from: string
-    to: string
-  }
-}
-
-/** @public */
-declare type ThemeColorStateKey = (typeof THEME_COLOR_STATES)[number]
-
-/** @public */
-declare type ThemeColorStateToneKey = (typeof THEME_COLOR_STATE_TONES)[number]
-
-/**
- * @public
- */
-declare interface ThemeColorSyntax {
-  atrule: string
-  attrName: string
-  attrValue: string
-  attribute: string
-  boolean: string
-  builtin: string
-  cdata: string
-  char: string
-  class: string
-  className: string
-  comment: string
-  constant: string
-  deleted: string
-  doctype: string
-  entity: string
-  function: string
-  hexcode: string
-  id: string
-  important: string
-  inserted: string
-  keyword: string
-  number: string
-  operator: string
-  prolog: string
-  property: string
-  pseudoClass: string
-  pseudoElement: string
-  punctuation: string
-  regex: string
-  selector: string
-  string: string
-  symbol: string
-  tag: string
-  unit: string
-  url: string
-  variable: string
-}
-
-declare type ThemeColorVariant = Record<ThemeColorStateToneKey, ThemeColorElement>
-
-declare type ThemeColorVariantKey = 'tinted' | 'solid'
-
-/**
- * @public
- */
-declare interface ThemeFocusRing {
-  offset: number
-  width: number
-}
-
-/**
- * @public
- */
-declare interface ThemeFont {
-  family: string
-  featureSettings?: string
-  weights: ThemeFontWeight
-  sizes: ThemeFontSize[]
-  /** @deprecated No longer supported. */
-  horizontalOffset?: number
-}
-
-/**
- * @public
- */
-declare interface ThemeFonts {
-  code: ThemeFont
-  heading: ThemeFont
-  label: ThemeFont
-  text: ThemeFont
-}
-
-/**
- * @public
- */
-declare interface ThemeFontSize {
-  ascenderHeight: number
-  descenderHeight: number
-  fontSize: number
-  iconSize: number
-  letterSpacing: number
-  lineHeight: number
-}
-
-/**
- * @public
- */
-declare interface ThemeFontWeight {
-  regular: number
-  medium: number
-  semibold: number
-  bold: number
-}
-
-/**
- * @public
- */
-declare type ThemeFontWeightKey = 'regular' | 'medium' | 'semibold' | 'bold'
-
-/**
- * @public
- */
-declare interface ThemeInput_v2 {
-  checkbox: {
-    size: number
-    focusRing: ThemeFocusRing
-  }
-  radio: {
-    size: number
-    markSize: number
-    focusRing: ThemeFocusRing
-  }
-  switch: {
-    width: number
-    height: number
-    padding: number
-    transitionDurationMs: number
-    transitionTimingFunction: string
-    focusRing: ThemeFocusRing
-  }
-  border: {
-    width: number
-  }
-  select: {
-    focusRing: ThemeFocusRing
-  }
-  text: {
-    focusRing: ThemeFocusRing
-  }
-}
-
-/**
- * @public
- */
-declare interface ThemeLayer {
-  dialog: {
-    zOffset: number
-  }
-  popover: {
-    zOffset: number
-  }
-  tooltip: {
-    zOffset: number
-  }
-}
-
-/**
- * @public
- */
-declare interface ThemeShadow {
-  umbra: ThemeBoxShadow
-  penumbra: ThemeBoxShadow
-  ambient: ThemeBoxShadow
-}
-
-/**
- * @internal
- */
-declare interface ThemeStyles {
-  button?: {
-    root?: CSSObject
-  }
-  card?: {
-    root?: CSSObject
-  }
-}
-
-/** @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`
-
-declare type Tint = (typeof TINTS)[number]
-
-declare const TINTS: readonly [
-  50,
-  100,
-  150,
-  200,
-  250,
-  300,
-  350,
-  400,
-  450,
-  500,
-  550,
-  600,
-  650,
-  700,
-  750,
-  800,
-  850,
-  900,
-  950,
-]
-
-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_2 | undefined): string
-
-/** @public */
-declare interface Tokens {
-  color: ColorTokens
-}
-
-export declare function tooltip(): string | undefined
-
-export declare function tooltipCard(): string | undefined
-
-export declare function treeItem(): string | undefined
-
-export declare function v3_v2(theme_v3: Theme_v3): RootTheme_v2
-
-/** @public */
-export declare interface VarNames {
-  color: Record<ThemeColorSchemeKey_2, ColorSchemeVarNames> &
-    ScopedColorVarNames &
-    Record<ThemeColorCardToneKey_2, ColorCardVarNames>
-  avatar: {
-    distance: CSSVarName
-    focusRing: {
-      offset: CSSVarName
-      width: CSSVarName
-    }
-    size: CSSVarName
-    sizes: Record<
-      AvatarSize,
-      {
-        distance: CSSVarName
-        size: CSSVarName
-      }
-    >
-  }
-  font: {
-    code: FontVarNames<FontCodeSize>
-    heading: FontVarNames<FontHeadingSize>
-    label: FontVarNames<FontLabelSize>
-    text: FontVarNames<FontTextSize>
-  }
-  input: {
-    fontSize: CSSVarName
-    lineHeight: CSSVarName
-    letterSpacing: CSSVarName
-    ascenderHeight: CSSVarName
-    descenderHeight: CSSVarName
-    gap: CSSVarName
-    padding: CSSVarName
-  }
-  space: Record<Space, CSSVarName>
-}
-
-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_2, ColorCardVars>
-  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
-      }
-    }
-  }
-  space: Record<Space, CSSVar>
-}
-
-export declare const vars: Vars
-
-export declare type Width = ContainerWidth
-
-export declare function width(props: WidthStyleProps): string
-
-export declare interface WidthStyleProps {
-  width?: ResponsiveProp<Width>
-}
-
-export {}