@sanity/ui 3.0.2 → 4.0.0-static.2

package/dist/css/index.d.ts

@@ -0,0 +1,1370 @@
+import type {AvatarColor} from '@sanity/ui/theme'
+import type {AvatarSize} from '@sanity/ui/theme'
+import type {ButtonMode} from '@sanity/ui/theme'
+import type {CardTone} from '@sanity/ui/theme'
+import type {ColorScheme} from '@sanity/ui/theme'
+import {ColorTokens as ColorTokens_2} from '@sanity/ui/theme'
+import type {ColorVariant} from '@sanity/ui/theme'
+import type {ContainerScale} from '@sanity/ui/theme'
+import type {ContainerWidth} from '@sanity/ui/theme'
+import type {createThemeContract} from '@vanilla-extract/css'
+import type {ElementTone} from '@sanity/ui/theme'
+import type {FontCodeSize} from '@sanity/ui/theme'
+import type {FontHeadingSize} from '@sanity/ui/theme'
+import type {FontLabelSize} from '@sanity/ui/theme'
+import type {FontTextSize} from '@sanity/ui/theme'
+import type {FontWeight} from '@sanity/ui/theme'
+import type {Hue} from '@sanity/ui/theme'
+import {PartialTokens} from '@sanity/ui/theme'
+import type {Radius} from '@sanity/ui/theme'
+import type {Shadow} from '@sanity/ui/theme'
+import type {Space} from '@sanity/ui/theme'
+import type {Tint} from '@sanity/ui/theme'
+
+/** @public */
+export declare type AlignItems = 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'
+
+/** @public */
+export declare function alignItems(props: AlignItemsStyleProps): string | undefined
+
+/** @public */
+export declare interface AlignItemsStyleProps {
+  alignItems?: ResponsiveProp<AlignItems>
+}
+
+/** @public */
+export declare function animatedSpinnerIcon(): string
+
+/** @internal */
+export declare function _arrow(): string | undefined
+
+/** @internal */
+export declare function _arrowShape(): string | undefined
+
+/** @internal */
+export declare function _arrowStroke(): string | undefined
+
+/** @internal */
+export declare function _arrowStrokeMask(): string | undefined
+
+/** @internal */
+export declare function _arrowSvg(): string | undefined
+
+/** @public */
+export declare function avatar(props: AvatarStyleProps): string | undefined
+
+/** @public */
+export declare function avatarArrow(): string | undefined
+
+/** @public */
+export declare function avatarArrowSvg(): string | undefined
+
+/** @public */
+export declare function avatarCounter(props: {
+  className?: string
+  size?: AvatarStyleProps['size']
+}): string | undefined
+
+/** @public */
+export declare function avatarImage(): string | undefined
+
+/** @public */
+export declare function avatarImageOutline(): string | undefined
+
+/** @public */
+export declare function avatarInitials(): string | undefined
+
+/** @public */
+export declare function avatarStack(props: {
+  className?: string
+  size?: AvatarStyleProps['size']
+}): string | undefined
+
+/** @public */
+export declare interface AvatarStyleProps {
+  className?: string
+  color: AvatarColor
+  size: ResponsiveProp<AvatarSize>
+}
+
+/** @public */
+export declare function badge(props: BadgeStyleProps): string | undefined
+
+/** @public */
+export declare interface BadgeStyleProps {
+  className?: string
+  fontSize?: ResponsiveProp<FontTextSize>
+  tone?: BadgeTone
+}
+
+/** @public */
+export declare type BadgeTone = ElementTone
+
+/** @public */
+export declare function border(props: BorderStyleProps): string | undefined
+
+/** @public */
+export declare type BorderStyle = 'solid' | 'muted' | 'none'
+
+/** @public */
+export declare interface BorderStyleProps {
+  border?: ResponsiveProp<BorderStyle | boolean>
+  borderTop?: ResponsiveProp<BorderStyle | boolean>
+  borderRight?: ResponsiveProp<BorderStyle | boolean>
+  borderBottom?: ResponsiveProp<BorderStyle | boolean>
+  borderLeft?: ResponsiveProp<BorderStyle | boolean>
+}
+
+/** @public */
+export declare function box(props: BoxStyleProps): string | undefined
+
+/** @public */
+export declare type BoxSizing = 'content' | 'border'
+
+/** @internal */
+export declare function boxSizing(props: BoxSizingStyleProps): string | undefined
+
+/** @public */
+export declare interface BoxSizingStyleProps {
+  boxSizing?: BoxSizing
+}
+
+/** @public */
+export declare interface BoxStyleProps
+  extends AlignItemsStyleProps,
+    BorderStyleProps,
+    DisplayStyleProps,
+    FlexDirectionStyleProps,
+    FlexStyleProps,
+    FlexWrapStyleProps,
+    GapStyleProps,
+    GridAutoColumnsStyleProps,
+    GridAutoFlowStyleProps,
+    GridAutoRowsStyleProps,
+    GridColumnEndStyleProps,
+    GridColumnStartStyleProps,
+    GridColumnStyleProps,
+    GridRowEndStyleProps,
+    GridRowStartStyleProps,
+    GridRowStyleProps,
+    GridTemplateColumnsStyleProps,
+    GridTemplateRowsStyleProps,
+    HeightStyleProps,
+    InsetStyleProps,
+    JustifyContentStyleProps,
+    MarginStyleProps,
+    MaxWidthStyleProps,
+    MinHeightStyleProps,
+    MinWidthStyleProps,
+    OverflowStyleProps,
+    PaddingStyleProps,
+    PointerEventsStyleProps,
+    PositionStyleProps,
+    RadiusStyleProps,
+    ShadowStyleProps,
+    TextAlignStyleProps,
+    WidthStyleProps {
+  className?: string
+  muted?: boolean
+  outline?: 'none'
+  sizing?: BoxSizingStyleProps['boxSizing']
+}
+
+/** @public */
+export declare function breadcrumbs(props: {className?: string}): string | undefined
+
+/** @public */
+export declare type Breakpoint = keyof typeof BREAKPOINTS
+
+/** @public */
+export declare const BREAKPOINTS: {
+  0: number
+  1: number
+  2: number
+  3: number
+  4: number
+  5: number
+  6: number
+}
+
+/** @public */
+export declare function buildCSSTheme(options?: CSSThemeOptions): ThemeTokens
+
+/** @public */
+export declare function button(props: ButtonStyleProps): string | undefined
+
+/** @public */
+export declare function buttonLoadingBox(): string
+
+/** @public */
+export declare interface ButtonStyleProps
+  extends FlexStyleProps,
+    RadiusStyleProps,
+    WidthStyleProps {
+  className?: string
+  mode?: ButtonMode
+  tone?: ElementTone
+}
+
+/** @public */
+export declare function card(props: CardStyleProps): string | undefined
+
+/** @public */
+export declare interface CardStyleProps {
+  className?: string
+  checkered?: boolean
+  scheme?: ColorScheme
+  tone?: CardTone | 'inherit'
+}
+
+/** @public */
+export declare function checkbox(props: {className?: string}): string | undefined
+
+/** @public */
+export declare function checkboxInput(): string
+
+/** @public */
+export declare function checkboxPresentation(): string
+
+/** @public */
+export declare function code(props: CodeStyleProps): string | undefined
+
+/** @beta */
+export declare function codeSkeleton(props: CodeSkeletonStyleProps): string | undefined
+
+/** @beta */
+export declare interface CodeSkeletonStyleProps {
+  className?: string
+  size?: ResponsiveProp<FontCodeSize>
+}
+
+/** @public */
+export declare interface CodeStyleProps extends FlexStyleProps, Omit<FontStyleProps, 'align'> {
+  className?: string
+  size?: ResponsiveProp<FontCodeSize>
+}
+
+/** @public */
+export declare type ColorPaletteTokens = {
+  black: string
+  white: string
+} & Record<Hue, Record<Tint, string>>
+
+/** @public */
+export declare type ColorPaletteVars = ThemeContract<ColorPaletteTokens>
+
+/** @public */
+export declare type ColorTokens = Record<ColorScheme, SchemeColorTokens>
+
+/** @public */
+export declare function container(props: ContainerStyleProps): string | undefined
+
+/** @public */
+export declare interface ContainerStyleProps {
+  className?: string
+  width?: ResponsiveProp<ContainerWidth>
+}
+
+/** @public */
+export declare type CoreThemeTokens = {
+  avatar: {
+    focusRing: {
+      offset: string
+      width: string
+    }
+    scale: Record<
+      AvatarSize,
+      {
+        distance: string
+        size: string
+      }
+    >
+  }
+  button: {
+    border: {
+      width: string
+    }
+    focusRing: {
+      offset: string
+      width: string
+    }
+  }
+  card: {
+    border: {
+      width: string
+    }
+    shadow: {
+      outline: string
+    }
+  }
+  color: ColorTokens
+  container: Record<ContainerScale, string>
+  font: {
+    code: FontTokens<FontCodeSize>
+    heading: FontTokens<FontHeadingSize>
+    label: FontTokens<FontLabelSize>
+    text: FontTokens<FontTextSize>
+  }
+  input: {
+    border: {
+      width: string
+    }
+    checkbox: {
+      size: string
+      focusRing: {
+        offset: string
+        width: string
+      }
+    }
+    radio: {
+      size: string
+      markSize: string
+      focusRing: {
+        offset: string
+        width: string
+      }
+    }
+    select: {
+      focusRing: {
+        offset: string
+        width: string
+      }
+    }
+    switch: {
+      focusRing: {
+        width: string
+        offset: string
+      }
+      height: string
+      width: string
+      padding: string
+      transitionDurationMs: string
+      transitionTimingFunction: string
+    }
+    text: {
+      focusRing: {
+        offset: string
+        width: string
+      }
+    }
+  }
+  radius: Record<Radius, string>
+  shadow: Record<
+    Shadow,
+    {
+      umbra: string
+      penumbra: string
+      ambient: string
+    }
+  >
+  space: Record<Space, string>
+}
+
+/** @public */
+export declare type CSSCardColorTokens = {
+  avatar: Record<
+    AvatarColor,
+    {
+      bg: string
+      fg: string
+    }
+  >
+  backdrop: string
+  code: {
+    bg: string
+    fg: 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
+    }
+  }
+  focusRing: string
+  link: {
+    fg: string
+  }
+  shadow: {
+    outline: string
+    umbra: string
+    penumbra: string
+    ambient: string
+  }
+  skeleton: {
+    from: string
+    to: string
+  }
+} & Record<ColorVariant, VariantColorTokens>
+
+/** @public */
+export declare type CSSLayer = 'theme' | 'props' | 'primitives' | 'components'
+
+/** @public */
+export declare type CSSThemeOptions = {
+  color?: PartialTokens<ColorTokens_2>
+  palette?: ColorPaletteTokens
+}
+
+/** @public */
+export declare type CSSVarFunction = `var(${CSSVarName})`
+
+/** @public */
+export declare type CSSVarName = `--${string}`
+
+/** @public */
+export declare function dialog(props: {className?: string}): string | undefined
+
+/** @public */
+export declare function dialogCard(): string | undefined
+
+/** @public */
+export declare function dialogContainer(): string | undefined
+
+/** @public */
+export declare function dialogContent(): string | undefined
+
+/** @public */
+export declare function dialogFooter(): string | undefined
+
+/** @public */
+export declare function dialogHeader(): string | undefined
+
+/** @public */
+export declare function dialogScroller(): string | undefined
+
+/** @public */
+export declare function dialogScrollerShadowBottom(): string | undefined
+
+/** @public */
+export declare function dialogScrollerShadowTop(): string | undefined
+
+/** @public */
+export declare type Display =
+  | 'block'
+  | 'inline-block'
+  | 'flex'
+  | 'inline-flex'
+  | 'grid'
+  | 'inline-grid'
+  | 'none'
+
+/** @public */
+export declare function display(props: DisplayStyleProps): string | undefined
+
+/** @public */
+export declare interface DisplayStyleProps {
+  display?: ResponsiveProp<Display>
+}
+
+/** @public */
+export declare type ElementColorTokens = {
+  bg: {
+    0: string
+    4: string
+  }
+  border: {
+    0: string
+    4: string
+  }
+  fg: {
+    0: string
+    4: string
+  }
+}
+
+/** @public */
+export declare type Flex =
+  | 'none'
+  | 'auto'
+  | 'initial'
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+
+/** @public */
+export declare function flex(props: FlexStyleProps): string | undefined
+
+/** @public */
+export declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
+
+/** @public */
+export declare function flexDirection(props: FlexDirectionStyleProps): string | undefined
+
+/** @public */
+export declare interface FlexDirectionStyleProps {
+  flexDirection?: ResponsiveProp<FlexDirection>
+}
+
+/** @public */
+export declare interface FlexStyleProps {
+  flex?: ResponsiveProp<Flex>
+}
+
+/** @public */
+export declare type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
+
+/** @public */
+export declare function flexWrap(props: FlexWrapStyleProps): string | undefined
+
+/** @public */
+export declare interface FlexWrapStyleProps {
+  flexWrap?: ResponsiveProp<FlexWrap>
+}
+
+/** @public */
+export declare function font(props: FontStyleProps): string | undefined
+
+/** @public */
+export declare interface FontStyleProps {
+  weight?: FontWeight
+}
+
+/** @public */
+export declare type FontTokens<FontScaleIndex extends number> = {
+  family: string
+  featureSettings: string
+  weight: {
+    regular: string
+    medium: string
+    semibold: string
+    bold: string
+  }
+  scale: Record<
+    FontScaleIndex,
+    {
+      fontSize: string
+      lineHeight: string
+      letterSpacing: string
+      ascenderHeight: string
+      descenderHeight: string
+      iconSize: string
+      customIconSize: string
+    }
+  >
+}
+
+/** @public */
+export declare function gap(props: GapStyleProps): string | undefined
+
+/** @public */
+export declare interface GapStyleProps {
+  gap?: ResponsiveProp<Space>
+  gapX?: ResponsiveProp<Space>
+  gapY?: ResponsiveProp<Space>
+}
+
+/**
+ * Extract the name of a CSS variable.
+ *
+ * @example
+ * ```ts
+ * getVarName('var(--color-primary)') // '--color-primary'
+ * ```
+ *
+ * @public
+ */
+export declare function getVarName(variable: CSSVarFunction): CSSVarName
+
+/** @public */
+export declare type GridAutoColumns = 'auto' | 'min' | 'max' | 'fr'
+
+/** @public */
+export declare function gridAutoColumns(props: GridAutoColumnsStyleProps): string | undefined
+
+/** @public */
+export declare interface GridAutoColumnsStyleProps {
+  gridAutoColumns?: ResponsiveProp<GridAutoColumns>
+}
+
+/** @public */
+export declare type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
+
+/** @public */
+export declare function gridAutoFlow(props: GridAutoFlowStyleProps): string | undefined
+
+/** @public */
+export declare interface GridAutoFlowStyleProps {
+  gridAutoFlow?: ResponsiveProp<GridAutoFlow>
+}
+
+/** @public */
+export declare type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
+
+/** @public */
+export declare function gridAutoRows(props: GridAutoRowsStyleProps): string | undefined
+
+/** @public */
+export declare interface GridAutoRowsStyleProps {
+  gridAutoRows?: ResponsiveProp<GridAutoRows>
+}
+
+/** @public */
+export declare type GridColumn = 'auto' | 'full' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+
+/** @public */
+export declare function gridColumn(props: GridColumnStyleProps): string | undefined
+
+/** @public */
+export declare type GridColumnEnd = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+
+/** @public */
+export declare function gridColumnEnd(props: GridColumnEndStyleProps): string | undefined
+
+/** @public */
+export declare interface GridColumnEndStyleProps {
+  gridColumnEnd?: ResponsiveProp<GridColumnEnd>
+}
+
+/** @public */
+export declare type GridColumnStart = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+
+/** @public */
+export declare function gridColumnStart(props: GridColumnStartStyleProps): string | undefined
+
+/** @public */
+export declare interface GridColumnStartStyleProps {
+  gridColumnStart?: ResponsiveProp<GridColumnStart>
+}
+
+/** @public */
+export declare interface GridColumnStyleProps {
+  gridColumn?: ResponsiveProp<GridColumn>
+}
+
+/** @public */
+export declare type GridRow = 'auto' | 'full' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+
+/** @public */
+export declare function gridRow(props: GridRowStyleProps): string | undefined
+
+/** @public */
+export declare type GridRowEnd = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+
+/** @public */
+export declare function gridRowEnd(props: GridRowEndStyleProps): string | undefined
+
+/** @public */
+export declare interface GridRowEndStyleProps {
+  gridRowEnd?: ResponsiveProp<GridRowEnd>
+}
+
+/** @public */
+export declare type GridRowStart = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+
+/** @public */
+export declare function gridRowStart(props: GridRowStartStyleProps): string | undefined
+
+/** @public */
+export declare interface GridRowStartStyleProps {
+  gridRowStart?: ResponsiveProp<GridRowStart>
+}
+
+/** @public */
+export declare interface GridRowStyleProps {
+  gridRow?: ResponsiveProp<GridRow>
+}
+
+/** @public */
+export declare type GridTemplateColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+
+/** @public */
+export declare function gridTemplateColumns(
+  props: GridTemplateColumnsStyleProps,
+): string | undefined
+
+/** @public */
+export declare interface GridTemplateColumnsStyleProps {
+  gridTemplateColumns?: ResponsiveProp<GridTemplateColumns>
+}
+
+/** @public */
+export declare type GridTemplateRows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+
+/** @public */
+export declare function gridTemplateRows(props: GridTemplateRowsStyleProps): string | undefined
+
+/** @public */
+export declare interface GridTemplateRowsStyleProps {
+  gridTemplateRows?: ResponsiveProp<GridTemplateRows>
+}
+
+/** @public */
+export declare function heading(props: HeadingStyleProps): string | undefined
+
+/** @beta */
+export declare function headingSkeleton(props: HeadingSkeletonStyleProps): string | undefined
+
+/** @beta */
+export declare interface HeadingSkeletonStyleProps {
+  className?: string
+  size?: ResponsiveProp<FontHeadingSize>
+}
+
+/** @public */
+export declare interface HeadingStyleProps extends FontStyleProps, FlexStyleProps {
+  align?: TextAlignStyleProps['textAlign']
+  className?: string
+  muted?: boolean
+  size?: ResponsiveProp<FontHeadingSize>
+}
+
+/** @public */
+export declare type Height = 'fill' | 'auto' | 'min' | 'max' | 'fit' | 'stretch'
+
+/** @public */
+export declare function height(props: HeightStyleProps): string | undefined
+
+/** @public */
+export declare interface HeightStyleProps {
+  height?: ResponsiveProp<Height>
+}
+
+/** @internal */
+export declare function _input(props: InputStyleProps): string | undefined
+
+/** @internal */
+export declare function _inputElement(): string | undefined
+
+/** @internal */
+export declare function _inputPresentation(): string | undefined
+
+/** @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
+
+/** @public */
+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>
+}
+
+/** @public */
+export declare type JustifyContent =
+  | 'flex-start'
+  | 'flex-end'
+  | 'center'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly'
+
+/** @public */
+export declare function justifyContent(props: JustifyContentStyleProps): string | undefined
+
+/** @public */
+export declare interface JustifyContentStyleProps {
+  justifyContent?: ResponsiveProp<JustifyContent>
+}
+
+/** @public */
+export declare function kbd(props: KBDStyleProps): string | undefined
+
+/** @public */
+export declare interface KBDStyleProps extends RadiusStyleProps {
+  className?: string
+}
+
+/** @public */
+export declare function label(props: LabelStyleProps): string | undefined
+
+/** @beta */
+export declare function labelSkeleton(props: LabelSkeletonStyleProps): string | undefined
+
+/** @beta */
+export declare interface LabelSkeletonStyleProps {
+  className?: string
+  size?: ResponsiveProp<FontLabelSize>
+}
+
+/** @public */
+export declare interface LabelStyleProps extends FlexStyleProps, FontStyleProps {
+  align?: TextAlignStyleProps['textAlign']
+  className?: string
+  muted?: boolean
+  size?: ResponsiveProp<FontLabelSize>
+}
+
+/** @public */
+export declare const layers: Record<CSSLayer, string>
+
+/** @public */
+export declare type Margin = Space | 'auto'
+
+/** @public */
+export declare function margin(props: MarginStyleProps): string | undefined
+
+/** @public */
+export declare interface MarginStyleProps {
+  margin?: ResponsiveProp<Margin>
+  marginX?: ResponsiveProp<Margin>
+  marginY?: ResponsiveProp<Margin>
+  marginTop?: ResponsiveProp<Margin>
+  marginRight?: ResponsiveProp<Margin>
+  marginBottom?: ResponsiveProp<Margin>
+  marginLeft?: ResponsiveProp<Margin>
+}
+
+/** @public */
+export declare type MaxWidth = ContainerWidth | 'auto' | 'fill'
+
+/** @public */
+export declare function maxWidth(props: MaxWidthStyleProps): string | undefined
+
+/** @public */
+export declare interface MaxWidthStyleProps {
+  maxWidth?: ResponsiveProp<MaxWidth>
+}
+
+/** @public */
+export declare function menu(props: {className?: string}): string | undefined
+
+/** @public */
+export declare function menuDivider(props: {className?: string}): string | undefined
+
+/** @public */
+export declare type MinHeight = 0 | 'full'
+
+/** @public */
+export declare function minHeight(props: MinHeightStyleProps): string | undefined
+
+/** @public */
+export declare interface MinHeightStyleProps {
+  minHeight?: ResponsiveProp<MinHeight>
+}
+
+/** @public */
+export declare type MinWidth = 0 | 'auto' | 'full' | 'min' | 'max' | 'fit'
+
+/** @public */
+export declare function minWidth(props: MinWidthStyleProps): string | undefined
+
+/** @public */
+export declare interface MinWidthStyleProps {
+  minWidth?: ResponsiveProp<MinWidth>
+}
+
+/** @public */
+export declare type NullableTokens = {
+  [key: string]: string | NullableTokens
+}
+
+/** @public */
+export declare type Outline = 'none'
+
+/** @public */
+export declare function outline(props: OutlineStyleProps): string | undefined
+
+/** @public */
+export declare interface OutlineStyleProps {
+  outline?: Outline
+}
+
+/** @public */
+export declare type Overflow = 'visible' | 'hidden' | 'auto'
+
+/** @public */
+export declare function overflow(props: OverflowStyleProps): string | undefined
+
+/** @public */
+export declare interface OverflowStyleProps {
+  overflow?: ResponsiveProp<Overflow>
+  overflowX?: ResponsiveProp<Overflow>
+  overflowY?: ResponsiveProp<Overflow>
+}
+
+/** @public */
+export declare type Padding = Space
+
+/** @public */
+export declare function padding(props: PaddingStyleProps): string | undefined
+
+/** @public */
+export declare interface PaddingStyleProps {
+  padding?: ResponsiveProp<Padding>
+  paddingTop?: ResponsiveProp<Padding>
+  paddingRight?: ResponsiveProp<Padding>
+  paddingBottom?: ResponsiveProp<Padding>
+  paddingLeft?: ResponsiveProp<Padding>
+  paddingX?: ResponsiveProp<Padding>
+  paddingY?: ResponsiveProp<Padding>
+}
+
+/** @internal */
+export declare const paletteVars: ColorPaletteVars
+
+/** @public */
+export declare type PointerEvents = 'auto' | 'none'
+
+/** @public */
+export declare function pointerEvents(props: PointerEventsStyleProps): string | undefined
+
+/** @public */
+export declare interface PointerEventsStyleProps {
+  pointerEvents?: PointerEvents
+}
+
+/** @public */
+export declare function popover(props: {className?: string}): string | undefined
+
+/** @public */
+export declare function popoverCard(): string | undefined
+
+/** @public */
+export declare type Position = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'
+
+/** @public */
+export declare function position(props: PositionStyleProps): string | undefined
+
+/** @public */
+export declare interface PositionStyleProps {
+  position?: ResponsiveProp<Position>
+}
+
+/** @public */
+export declare function radio(props: {className?: string}): string | undefined
+
+/** @public */
+export declare function radioInput(): string | undefined
+
+/** @public */
+export declare function radioPresentation(): string | undefined
+
+/** @public */
+export declare function radius(props: RadiusStyleProps): string | undefined
+
+/** @public */
+export declare interface RadiusStyleProps {
+  radius?: ResponsiveProp<Radius | 'full'>
+}
+
+/** @public */
+export declare type ResponsiveProp<T> = T | Partial<Record<Breakpoint, T>>
+
+/** @public */
+export declare type ResponsiveRuleOptions<K extends string | number> = Record<K, ResponsiveRules>
+
+/** @public */
+export declare type ResponsiveRules = Record<Breakpoint, string>
+
+/** @public */
+export declare function root(props: RootStyleProps): string | undefined
+
+/** @public */
+export declare interface RootStyleProps extends HeightStyleProps {
+  className?: string
+  scheme?: ColorScheme
+  tone?: CardTone
+}
+
+/** @public */
+export declare type SchemeColorTokens = Record<CardTone, CSSCardColorTokens>
+
+/** @public */
+export declare type ScopedTokens = {
+  arrow: {
+    size: string
+  }
+  avatar: {
+    distance: string
+    size: string
+  }
+  button: {
+    boxShadow: string
+  }
+  card: {
+    test: string
+  }
+  color: {
+    avatar: {
+      bg: string
+      fg: string
+    }
+    bg: string
+    border: string
+    fg: string
+    muted: {
+      bg: string
+      border: string
+      fg: string
+    }
+    input: {
+      checkbox: {
+        bg: string
+        border: string
+        fg: string
+      }
+      text: {
+        bg: string
+        border: string
+        fg: string
+        placeholder: string
+      }
+      radio: {
+        bg: string
+        border: string
+        fg: string
+      }
+      switch: {
+        bg: string
+        fg: string
+      }
+    }
+  } & CSSCardColorTokens &
+    Record<
+      ColorVariant,
+      Record<
+        ElementTone,
+        {
+          bg: {
+            0: string
+            1: string
+            2: string
+            3: string
+            4: string
+          }
+          border: {
+            0: string
+            1: string
+            2: string
+            3: string
+            4: string
+          }
+          fg: {
+            0: string
+            1: string
+            2: string
+            3: string
+            4: string
+          }
+        }
+      >
+    > &
+    Record<
+      CardTone,
+      CSSCardColorTokens &
+        Record<
+          ColorVariant,
+          Record<
+            ElementTone,
+            {
+              bg: {
+                0: string
+                4: string
+              }
+              border: {
+                0: string
+                4: string
+              }
+              fg: {
+                0: string
+                4: string
+              }
+            }
+          >
+        >
+    >
+  font: {
+    family: string
+    featureSettings: string
+    fontSize: string
+    lineHeight: string
+    letterSpacing: string
+    fontWeight: string
+    ascenderHeight: string
+    descenderHeight: string
+    iconSize: string
+    customIconSize: string
+    capHeight: string
+    iconOffset: string
+    customIconOffset: string
+    skeleton: {
+      ascenderHeight: string
+      descenderHeight: string
+      lineHeight: string
+    }
+    weight: {
+      regular: string
+      medium: string
+      semibold: string
+      bold: string
+    }
+  }
+  input: {
+    switch: {
+      thumb: {
+        offset: string
+        size: string
+      }
+    }
+    text: {
+      fontSize: string
+      lineHeight: string
+      letterSpacing: string
+      ascenderHeight: string
+      descenderHeight: string
+      padding: string
+      gap: string
+    }
+  }
+}
+
+/** @public */
+export declare type ScopedVars = ThemeContract<ScopedTokens>
+
+/** @public */
+export declare function select(props: SelectStyleProps): string | undefined
+
+/** @internal */
+export declare function _selectable(props: SelectableStyleProps): string | undefined
+
+/** @internal */
+export declare interface SelectableStyleProps extends RadiusStyleProps {
+  className?: string
+  tone?: ElementTone
+}
+
+/** @public */
+export declare function selectPresentation(): string | undefined
+
+/** @public */
+export declare interface SelectStyleProps extends InputStyleProps {}
+
+/** @public */
+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 FlexStyleProps,
+    MarginStyleProps,
+    RadiusStyleProps {
+  className?: string
+}
+
+/** @public */
+export declare function spinner(props: SpinnerStyleProps): string | undefined
+
+/** @public */
+export declare interface SpinnerStyleProps {
+  className?: string
+}
+
+/** @public */
+export declare function srOnly(props: {className?: string}): string | undefined
+
+/** @public */
+export declare function stack(props: {className?: string}): string | undefined
+
+/** @public */
+export declare function _switch(props: {className?: string}): string | undefined
+
+/** @public */
+export declare function _switchElement(): string | undefined
+
+/** @public */
+export declare function _switchPresentation(): string | undefined
+
+/** @public */
+export declare function _switchThumb(): string | undefined
+
+/** @public */
+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'
+
+/** @public */
+export declare function textAlign(props: TextAlignStyleProps): string | undefined
+
+/** @public */
+export declare interface TextAlignStyleProps {
+  textAlign?: TextAlign
+}
+
+/** @public */
+export declare function textArea(props: TextAreaStyleProps): string | undefined
+
+/** @public */
+export declare interface TextAreaStyleProps extends InputStyleProps {
+  className?: string
+}
+
+/** @public */
+export declare function textInput(props: TextInputStyleProps): string | undefined
+
+/** @public */
+export declare function textInputElement(): string | undefined
+
+/** @public */
+export declare function textInputPrefix(): string | undefined
+
+/** @public */
+export declare interface TextInputStyleProps extends InputStyleProps {
+  className?: string
+}
+
+/** @public */
+export declare function textInputSuffix(): string | undefined
+
+/** @public */
+export declare type TextOverflow = 'ellipsis' | 'clip'
+
+/** @public */
+export declare function textOverflow(props: TextOverflowStyleProps): string | undefined
+
+/** @public */
+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?: TextOverflow
+}
+
+/** @public */
+export declare type TextSize = number
+
+/** @beta */
+export declare function textSkeleton(props: TextSkeletonStyleProps): string | undefined
+
+/** @beta */
+export declare interface TextSkeletonStyleProps {
+  className?: string
+  size?: ResponsiveProp<FontTextSize>
+}
+
+/** @public */
+export declare interface TextStyleProps extends FlexStyleProps, FontStyleProps, MaxWidthStyleProps {
+  align?: TextAlignStyleProps['textAlign']
+  className?: string
+  muted?: boolean
+  size?: ResponsiveProp<FontTextSize>
+}
+
+/** @public */
+export declare const themeClassName: string
+
+/** @public */
+export declare type ThemeContract<T extends NullableTokens> = ReturnType<
+  typeof createThemeContract<T>
+>
+
+/** @public */
+export declare type ThemeTokens = CoreThemeTokens & {
+  color: {
+    palette: ColorPaletteTokens
+  }
+}
+
+/** @public */
+export declare type ThemeVars = ThemeContract<ThemeTokens & ScopedTokens>
+
+/**
+ * Variables to be defined in a theme.
+ *
+ * @internal */
+export declare const themeVars: ThemeContract<ThemeTokens>
+
+/** @public */
+export declare function toast(): string
+
+/** @public */
+export declare function toastLayer(): string
+
+/** @public */
+export declare function tooltip(props: TooltipStyleProps): string | undefined
+
+/** @public */
+export declare interface TooltipStyleProps {
+  className?: string
+}
+
+/** @beta */
+export declare function treeItem(props: {className?: string}): string | undefined
+
+/** @public */
+export declare type VariantColorTokens = Record<ElementTone, ElementColorTokens>
+
+/**
+ * Variables to be used.
+ *
+ * @public
+ */
+export declare const vars: ThemeVars
+
+/** @public */
+export declare type Width = ContainerWidth | 'auto' | 'fill' | 'stretch' | 'min'
+
+/** @public */
+export declare function width(props: WidthStyleProps): string | undefined
+
+/** @public */
+export declare interface WidthStyleProps {
+  width?: ResponsiveProp<Width>
+}
+
+export {}