@yahoo/uds 0.1.18 → 0.1.20

package/dist/index.d.cts

@@ -1,24 +1,50 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { k as UniversalAvatarProps, l as UniversalBoxProps, m as UniversalPressableProps, n as UniversalButtonProps, ay as IconName, p as UniversalTextProps, aK as Overflow, ab as ButtonVariant, aa as ButtonSize, o as UniversalStackProps, q as UniversalIconProps, r as UniversalIconButtonProps, au as ForegroundColor, j as UniversalImageProps, af as Display, b0 as UniversalTextInputProps } from './types-_E6o7OhU.cjs';
-export { _ as AlwaysPalette, $ as AlwaysPaletteAlias, a0 as Animation, a1 as AriaAttribute, a2 as AspectRatio, a3 as AspectRatioConfig, a4 as AvatarSize, G as AvatarSizeConfig, a5 as BackgroundColor, d as BackgroundPalette, a6 as BackgroundPaletteAlias, v as BackgroundStyleProps, e as BackgroundWashPalette, a7 as BackgroundWashPaletteAlias, w as BorderStyleProps, a8 as BorderWidth, B as BorderWidthConfig, a9 as BoxShadowConfig, C as ColorMode, s as ColorModeForApp, a as ColorsConfig, ac as ConfigurableTextProperty, c as CorePalette, ad as CorePaletteAlias, D as CustomSizingStyleProps, ae as DataAttribute, h as Elevation, E as ElevationConfig, ag as ElevationPaletteAlias, ah as Flex, ai as FlexAlignContent, aj as FlexAlignItems, ak as FlexAlignSelf, al as FlexBasis, am as FlexDirection, an as FlexGrow, ao as FlexJustifyContent, ap as FlexShrink, y as FlexStyleProps, aq as FlexWrap, Q as FontFamilyConfig, ar as FontFamilyGlobalAlias, i as FontFamilyGlobalConfig, as as FontSize, R as FontSizeConfig, f as FontWeightConfig, at as FontWeightDescriptive, g as FontWeightNumeric, F as ForegroundPalette, av as ForegroundPaletteAlias, aw as Height, ax as HighContrastMode, H as Hue, b as HueStep, az as IconSize, J as IconSizeConfig, I as ImageStyleProps, x as LayoutStyleProps, aA as LetterSpacing, aB as LineClampAlias, aC as LineColor, aD as LineHeight, V as LineHeightConfig, L as LinePalette, aE as LinePaletteAlias, aF as MaxHeight, aG as MaxWidth, aH as MinHeight, aI as MinWidth, M as Modes, aJ as Opacity, O as OpacityStyleProps, aL as Palette, aM as PaletteConfig, aN as PaletteType, P as PaletteValue, aO as PlatformMode, aP as Position, aQ as RegionMode, aR as ScaleConfig, S as ScaleMode, u as ScaleModeConfig, t as ScaleModeForApp, aS as Shape, N as ShapeConfig, A as SizingStyleProps, aT as SpacingAlias, K as SpacingConfig, z as SpacingStyleProps, aU as SpectrumColor, aV as SpectrumConfig, aW as StateStyleProps, X as StyleProps, T as TextStyleProps, aX as TextTransform, W as TextTransformConfig, aY as TextVariant, aZ as TransitionDelay, a_ as TransitionDuration, a$ as TransitionTiming, U as UniversalTokensConfig, b1 as Width, b2 as ZIndex, Z as ZIndexConfig, Y as alwaysPalette } from './types-_E6o7OhU.cjs';
 import * as react from 'react';
 import react__default, { PropsWithChildren, TdHTMLAttributes } from 'react';
+import { l as UniversalPressableProps, j as UniversalAvatarProps, k as UniversalBoxProps, m as UniversalButtonProps, aA as IconName, o as UniversalTextProps, aM as Overflow, ad as ButtonVariant, ac as ButtonSize, n as UniversalStackProps, p as UniversalIconProps, q as UniversalIconButtonProps, aw as ForegroundColor, i as UniversalImageProps, ah as Display, b1 as UniversalTextInputProps } from './types-ZrxnB4cM.cjs';
+export { _ as AlwaysPalette, $ as AlwaysPaletteAlias, a0 as Animation, a1 as AriaAttribute, a2 as AspectRatio, a3 as AspectRatioConfig, a4 as AvatarShape, a5 as AvatarSize, D as AvatarSizeConfig, a6 as BackgroundColor, B as BackgroundPalette, a7 as BackgroundPaletteAlias, u as BackgroundStyleProps, d as BackgroundWashPalette, a8 as BackgroundWashPaletteAlias, a9 as BorderRadius, K as BorderRadiusConfig, v as BorderStyleProps, aa as BorderWidth, N as BorderWidthConfig, ab as BoxShadowConfig, C as ColorMode, r as ColorModeForApp, a as ColorsConfig, ae as ConfigurableTextProperty, c as CorePalette, af as CorePaletteAlias, A as CustomSizingStyleProps, ag as DataAttribute, g as Elevation, E as ElevationConfig, ai as ElevationPaletteAlias, aj as Flex, ak as FlexAlignContent, al as FlexAlignItems, am as FlexAlignSelf, an as FlexBasis, ao as FlexDirection, ap as FlexGrow, aq as FlexJustifyContent, ar as FlexShrink, x as FlexStyleProps, as as FlexWrap, Q as FontFamilyConfig, at as FontFamilyGlobalAlias, h as FontFamilyGlobalConfig, au as FontSize, R as FontSizeConfig, e as FontWeightConfig, av as FontWeightDescriptive, f as FontWeightNumeric, F as ForegroundPalette, ax as ForegroundPaletteAlias, ay as Height, az as HighContrastMode, H as Hue, b as HueStep, aB as IconSize, G as IconSizeConfig, I as ImageStyleProps, w as LayoutStyleProps, aC as LetterSpacing, aD as LineClampAlias, aE as LineColor, aF as LineHeight, V as LineHeightConfig, L as LinePalette, aG as LinePaletteAlias, aH as MaxHeight, aI as MaxWidth, aJ as MinHeight, aK as MinWidth, M as Modes, aL as Opacity, O as OpacityStyleProps, aN as Palette, aO as PaletteConfig, aP as PaletteType, P as PaletteValue, aQ as PlatformMode, aR as Position, aS as RegionMode, aT as ScaleConfig, S as ScaleMode, t as ScaleModeConfig, s as ScaleModeForApp, z as SizingStyleProps, aU as SpacingAlias, J as SpacingConfig, y as SpacingStyleProps, aV as SpectrumColor, aW as SpectrumConfig, aX as StateStyleProps, X as StyleProps, T as TextStyleProps, aY as TextTransform, W as TextTransformConfig, aZ as TextVariant, a_ as TransitionDelay, a$ as TransitionDuration, b0 as TransitionTiming, U as UniversalTokensConfig, b2 as Width, b3 as ZIndex, Z as ZIndexConfig, Y as alwaysPalette } from './types-ZrxnB4cM.cjs';
 import * as _ariakit_react from '@ariakit/react';
 import { PopoverProviderProps, PopoverProps, DialogProps, useDialogStore, DialogStore, DialogDismiss, Popover as Popover$1, PopoverArrow as PopoverArrow$1, PopoverAnchor as PopoverAnchor$1, PopoverDescription as PopoverDescription$1, PopoverDismiss as PopoverDismiss$1, PopoverProvider as PopoverProvider$1, PopoverDisclosure as PopoverDisclosure$1, PopoverDisclosureArrow as PopoverDisclosureArrow$1, TabProviderProps, TabListProps, TabPanelProps } from '@ariakit/react';
 export { DialogStore as ModalStore, TabListProps, TabPanelProps, TabProviderProps as TabsProps, usePopoverStore } from '@ariakit/react';
 import { ToastContainerProps } from 'react-toastify';
 export { toast } from 'react-toastify';
-import { a as CX, C as CVA } from './types-3GXulqnG.cjs';
-export { S as SetState } from './types-3GXulqnG.cjs';
-export { c as DEFAULT_COLOR_MODE, D as DEFAULT_COLOR_MODE_FOR_APP, g as DEFAULT_HIGH_CONTRAST_MODE, h as DEFAULT_REGION_MODE, e as DEFAULT_SCALE_MODE, b as DEFAULT_SCALE_MODE_FOR_APP, d as defaultTokensConfig, f as fontFamilyGlobal, a as fontWeightMap } from './index.native-fciGC1AQ.cjs';
-export { AVATAR_SIZE_PREFIX, DARK_COLOR_MODE_CLASSNAME, DEFAULT_COLOR_MODE_CLASSNAME, DEFAULT_SCALE_MODE_CLASSNAME, FONT_FAMILY_PREFIX, FONT_ICONS_CSS_VAR, FONT_SANS_BETA_CSS_VAR, FONT_SANS_CONDENSED_CSS_VAR, FONT_SANS_CSS_VAR, FONT_SERIF_DISPLAY_CSS_VAR, FONT_SERIF_TEXT_CSS_VAR, FONT_SIZE_PREFIX, FONT_WEIGHT_PREFIX, ICON_SIZE_PREFIX, LARGE_SCALE_MODE_CLASSNAME, LIGHT_COLOR_MODE_CLASSNAME, LINE_HEIGHT_PREFIX, MEDIUM_SCALE_MODE_CLASSNAME, SHAPE_PREFIX, SMALL_SCALE_MODE_CLASSNAME, SPACING_PREFIX, SPECTRUM_COLOR_PREFIX, TEXT_TRANSFORM_PREFIX, UDS_PREFIX, XLARGE_SCALE_MODE_CLASSNAME, XSMALL_SCALE_MODE_CLASSNAME, XXLARGE_SCALE_MODE_CLASSNAME, XXXLARGE_SCALE_MODE_CLASSNAME, entries } from './tokens/index.cjs';
+import { a as CX, C as CVA } from './types-BO2kLynl.cjs';
+export { S as SetState } from './types-BO2kLynl.cjs';
+export { c as DEFAULT_COLOR_MODE, D as DEFAULT_COLOR_MODE_FOR_APP, g as DEFAULT_HIGH_CONTRAST_MODE, h as DEFAULT_REGION_MODE, e as DEFAULT_SCALE_MODE, b as DEFAULT_SCALE_MODE_FOR_APP, d as defaultTokensConfig, f as fontFamilyGlobal, a as fontWeightMap } from './index.native-C5-xv9Na.cjs';
+export { AVATAR_SIZE_PREFIX, BORDER_RADIUS_PREFIX, BORDER_WIDTH_PREFIX, DARK_COLOR_MODE_CLASSNAME, DEFAULT_COLOR_MODE_CLASSNAME, DEFAULT_SCALE_MODE_CLASSNAME, FONT_FAMILY_PREFIX, FONT_ICONS_CSS_VAR, FONT_SANS_BETA_CSS_VAR, FONT_SANS_CONDENSED_CSS_VAR, FONT_SANS_CSS_VAR, FONT_SERIF_DISPLAY_CSS_VAR, FONT_SERIF_TEXT_CSS_VAR, FONT_SIZE_PREFIX, FONT_WEIGHT_PREFIX, ICON_SIZE_PREFIX, LARGE_SCALE_MODE_CLASSNAME, LIGHT_COLOR_MODE_CLASSNAME, LINE_HEIGHT_PREFIX, MEDIUM_SCALE_MODE_CLASSNAME, SMALL_SCALE_MODE_CLASSNAME, SPACING_PREFIX, SPECTRUM_COLOR_PREFIX, TEXT_TRANSFORM_PREFIX, UDS_PREFIX, XLARGE_SCALE_MODE_CLASSNAME, XSMALL_SCALE_MODE_CLASSNAME, XXLARGE_SCALE_MODE_CLASSNAME, XXXLARGE_SCALE_MODE_CLASSNAME, entries } from './tokens/index.cjs';
 
-interface AccordionProps extends React.PropsWithChildren {
+type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
+interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
+}
+/**
+ * Provides press interactions with accessibility support.
+ * @example
+ ```tsx
+   import { Pressable, Text } from "@yahoo/uds"
+
+  export function Demo() {
+    return (
+      <Pressable
+        onClick={console.log}
+        backgroundColor="secondary"
+        bordered
+        borderColor="primary"
+        borderRadius="lg"
+      >
+        <Text variant="body1" spacingHorizontal="7" spacingVertical="5">Click me...</Text>
+      </Pressable>
+    )
+  }
+  ```
+ */
+declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface AccordionProps extends PressableProps {
     label: string;
     open?: boolean;
     onClick?: () => void;
 }
-declare function Accordion({ label, children, onClick, open }: AccordionProps): react_jsx_runtime.JSX.Element;
+declare function Accordion({ label, children, onClick, open, spacingHorizontal, ...pressableProps }: AccordionProps): react_jsx_runtime.JSX.Element;
 
 type NativeImageProps$1 = Omit<react__default.ImgHTMLAttributes<HTMLImageElement>, 'size' | 'color' | 'height' | 'width' | 'alt' | 'src'>;
 interface AvatarProps extends NativeImageProps$1, UniversalAvatarProps {
@@ -53,32 +79,6 @@ interface BoxProps extends UniversalBoxProps, DivProps$1 {
  */
 declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
 
-type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
-interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
-}
-/**
- * Provides press interactions with accessibility support.
- * @example
- ```tsx
-   import { Pressable, Text } from "@yahoo/uds"
-
-  export function Demo() {
-    return (
-      <Pressable
-        onClick={console.log}
-        backgroundColor="secondary"
-        bordered
-        borderColor="primary"
-        borderRadius="l"
-      >
-        <Text variant="body1" spacingHorizontal="7" spacingVertical="5">Click me...</Text>
-      </Pressable>
-    )
-  }
-  ```
- */
-declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<HTMLButtonElement>>;
-
 interface ButtonProps extends PressableProps, UniversalButtonProps {
 }
 /**
@@ -490,10 +490,10 @@ type TextProps<As extends TextElement = TextElement> = UniversalTextProps & {
  */
 declare const Text: react.ForwardRefExoticComponent<Omit<TextProps<TextElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
 
-type NativeTextInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'height' | 'size' | 'width' | ''>;
+type NativeTextInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'height' | 'size' | 'width' | 'color'>;
 interface TextInputProps extends NativeTextInputProps, UniversalTextInputProps {
 }
-declare function TextInput({ className, disabled, ...props }: TextInputProps): react_jsx_runtime.JSX.Element;
+declare function TextInput({ className, disabled, backgroundColor, borderColor, borderWidth, borderRadius, color, placeholderColor, spacingVertical, spacingHorizontal, fontSize: textVariant, ...props }: TextInputProps): react_jsx_runtime.JSX.Element;
 
 interface TextInputGroupProps extends TextInputProps {
     label?: string;
@@ -573,28 +573,29 @@ declare const cva: CVA<string>;
 declare const getStyles: (props?: ({
     color?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "white" | "black" | undefined;
     colorChecked?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "white" | "black" | undefined;
+    placeholderColor?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "white" | "black" | undefined;
     fontFamily?: "display1" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | "icons" | "sans" | "sans-beta" | "sans-condensed" | "serif-text" | "serif-display" | undefined;
     fontSize?: "display1" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | undefined;
     fontWeight?: "bold" | "black" | "display1" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | "thin" | "extralight" | "light" | "regular" | "medium" | "semibold" | "extrabold" | undefined;
     lineHeight?: "display1" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | undefined;
     textAlign?: "center" | "justify" | "start" | "end" | undefined;
     textTransform?: "display1" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
-    spacing?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    spacingHorizontal?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    spacingVertical?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    spacingBottom?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    spacingEnd?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    spacingStart?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    spacingTop?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    offset?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    offsetVertical?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    offsetHorizontal?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    offsetBottom?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    offsetEnd?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    offsetStart?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    offsetTop?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    columnGap?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    rowGap?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
+    spacing?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    spacingHorizontal?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    spacingVertical?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    spacingBottom?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    spacingEnd?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    spacingStart?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    spacingTop?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    offset?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    offsetVertical?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    offsetHorizontal?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    offsetBottom?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    offsetEnd?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    offsetStart?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    offsetTop?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    columnGap?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    rowGap?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
     backgroundColor?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "white" | "black" | "accent-wash" | "alert-wash" | "brand-wash" | "positive-wash" | "warning-wash" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-3-inverse" | "overlay" | undefined;
     backgroundColorOnActive?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "white" | "black" | "accent-wash" | "alert-wash" | "brand-wash" | "positive-wash" | "warning-wash" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-3-inverse" | "overlay" | undefined;
     backgroundColorOnHover?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "white" | "black" | "accent-wash" | "alert-wash" | "brand-wash" | "positive-wash" | "warning-wash" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-3-inverse" | "overlay" | undefined;
@@ -611,29 +612,29 @@ declare const getStyles: (props?: ({
     borderEndColor?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | undefined;
     borderBottomColor?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | undefined;
     borderTopColor?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | undefined;
-    borderRadius?: "square" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "circle" | undefined;
-    borderTopStartRadius?: "square" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "circle" | undefined;
-    borderTopEndRadius?: "square" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "circle" | undefined;
-    borderBottomStartRadius?: "square" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "circle" | undefined;
-    borderBottomEndRadius?: "square" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "circle" | undefined;
+    borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
+    borderTopStartRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
+    borderTopEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
+    borderBottomStartRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
+    borderBottomEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
     bordered?: boolean | undefined;
-    borderWidth?: "0" | "1" | "2" | "4" | "8" | undefined;
-    borderVerticalWidth?: "0" | "1" | "2" | "4" | "8" | undefined;
-    borderHorizontalWidth?: "0" | "1" | "2" | "4" | "8" | undefined;
-    borderStartWidth?: "0" | "1" | "2" | "4" | "8" | undefined;
-    borderEndWidth?: "0" | "1" | "2" | "4" | "8" | undefined;
-    borderTopWidth?: "0" | "1" | "2" | "4" | "8" | undefined;
-    borderBottomWidth?: "0" | "1" | "2" | "4" | "8" | undefined;
+    borderWidth?: "thin" | "medium" | "none" | "thick" | undefined;
+    borderVerticalWidth?: "thin" | "medium" | "none" | "thick" | undefined;
+    borderHorizontalWidth?: "thin" | "medium" | "none" | "thick" | undefined;
+    borderStartWidth?: "thin" | "medium" | "none" | "thick" | undefined;
+    borderEndWidth?: "thin" | "medium" | "none" | "thick" | undefined;
+    borderTopWidth?: "thin" | "medium" | "none" | "thick" | undefined;
+    borderBottomWidth?: "thin" | "medium" | "none" | "thick" | undefined;
     borderedVertical?: boolean | undefined;
     borderedTop?: boolean | undefined;
     borderedBottom?: boolean | undefined;
     borderedHorizontal?: boolean | undefined;
     borderedEnd?: boolean | undefined;
     borderedStart?: boolean | undefined;
-    height?: "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "full" | "screen" | "min" | "max" | "fit" | undefined;
+    height?: "full" | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "screen" | "min" | "max" | "fit" | undefined;
     minHeight?: "full" | "screen" | "min" | "max" | "fit" | undefined;
     maxHeight?: "none" | "full" | "screen" | "min" | "max" | "fit" | undefined;
-    width?: "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "full" | "screen" | "min" | "max" | "fit" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | undefined;
+    width?: "full" | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "screen" | "min" | "max" | "fit" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | undefined;
     minWidth?: "full" | "screen" | "min" | "max" | "fit" | undefined;
     maxWidth?: "none" | "full" | "min" | "max" | "fit" | undefined;
     avatarSize?: "s" | "m" | "l" | undefined;

package/dist/index.d.ts

@@ -1,24 +1,50 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { k as UniversalAvatarProps, l as UniversalBoxProps, m as UniversalPressableProps, n as UniversalButtonProps, ay as IconName, p as UniversalTextProps, aK as Overflow, ab as ButtonVariant, aa as ButtonSize, o as UniversalStackProps, q as UniversalIconProps, r as UniversalIconButtonProps, au as ForegroundColor, j as UniversalImageProps, af as Display, b0 as UniversalTextInputProps } from './types-_E6o7OhU.js';
-export { _ as AlwaysPalette, $ as AlwaysPaletteAlias, a0 as Animation, a1 as AriaAttribute, a2 as AspectRatio, a3 as AspectRatioConfig, a4 as AvatarSize, G as AvatarSizeConfig, a5 as BackgroundColor, d as BackgroundPalette, a6 as BackgroundPaletteAlias, v as BackgroundStyleProps, e as BackgroundWashPalette, a7 as BackgroundWashPaletteAlias, w as BorderStyleProps, a8 as BorderWidth, B as BorderWidthConfig, a9 as BoxShadowConfig, C as ColorMode, s as ColorModeForApp, a as ColorsConfig, ac as ConfigurableTextProperty, c as CorePalette, ad as CorePaletteAlias, D as CustomSizingStyleProps, ae as DataAttribute, h as Elevation, E as ElevationConfig, ag as ElevationPaletteAlias, ah as Flex, ai as FlexAlignContent, aj as FlexAlignItems, ak as FlexAlignSelf, al as FlexBasis, am as FlexDirection, an as FlexGrow, ao as FlexJustifyContent, ap as FlexShrink, y as FlexStyleProps, aq as FlexWrap, Q as FontFamilyConfig, ar as FontFamilyGlobalAlias, i as FontFamilyGlobalConfig, as as FontSize, R as FontSizeConfig, f as FontWeightConfig, at as FontWeightDescriptive, g as FontWeightNumeric, F as ForegroundPalette, av as ForegroundPaletteAlias, aw as Height, ax as HighContrastMode, H as Hue, b as HueStep, az as IconSize, J as IconSizeConfig, I as ImageStyleProps, x as LayoutStyleProps, aA as LetterSpacing, aB as LineClampAlias, aC as LineColor, aD as LineHeight, V as LineHeightConfig, L as LinePalette, aE as LinePaletteAlias, aF as MaxHeight, aG as MaxWidth, aH as MinHeight, aI as MinWidth, M as Modes, aJ as Opacity, O as OpacityStyleProps, aL as Palette, aM as PaletteConfig, aN as PaletteType, P as PaletteValue, aO as PlatformMode, aP as Position, aQ as RegionMode, aR as ScaleConfig, S as ScaleMode, u as ScaleModeConfig, t as ScaleModeForApp, aS as Shape, N as ShapeConfig, A as SizingStyleProps, aT as SpacingAlias, K as SpacingConfig, z as SpacingStyleProps, aU as SpectrumColor, aV as SpectrumConfig, aW as StateStyleProps, X as StyleProps, T as TextStyleProps, aX as TextTransform, W as TextTransformConfig, aY as TextVariant, aZ as TransitionDelay, a_ as TransitionDuration, a$ as TransitionTiming, U as UniversalTokensConfig, b1 as Width, b2 as ZIndex, Z as ZIndexConfig, Y as alwaysPalette } from './types-_E6o7OhU.js';
 import * as react from 'react';
 import react__default, { PropsWithChildren, TdHTMLAttributes } from 'react';
+import { l as UniversalPressableProps, j as UniversalAvatarProps, k as UniversalBoxProps, m as UniversalButtonProps, aA as IconName, o as UniversalTextProps, aM as Overflow, ad as ButtonVariant, ac as ButtonSize, n as UniversalStackProps, p as UniversalIconProps, q as UniversalIconButtonProps, aw as ForegroundColor, i as UniversalImageProps, ah as Display, b1 as UniversalTextInputProps } from './types-ZrxnB4cM.js';
+export { _ as AlwaysPalette, $ as AlwaysPaletteAlias, a0 as Animation, a1 as AriaAttribute, a2 as AspectRatio, a3 as AspectRatioConfig, a4 as AvatarShape, a5 as AvatarSize, D as AvatarSizeConfig, a6 as BackgroundColor, B as BackgroundPalette, a7 as BackgroundPaletteAlias, u as BackgroundStyleProps, d as BackgroundWashPalette, a8 as BackgroundWashPaletteAlias, a9 as BorderRadius, K as BorderRadiusConfig, v as BorderStyleProps, aa as BorderWidth, N as BorderWidthConfig, ab as BoxShadowConfig, C as ColorMode, r as ColorModeForApp, a as ColorsConfig, ae as ConfigurableTextProperty, c as CorePalette, af as CorePaletteAlias, A as CustomSizingStyleProps, ag as DataAttribute, g as Elevation, E as ElevationConfig, ai as ElevationPaletteAlias, aj as Flex, ak as FlexAlignContent, al as FlexAlignItems, am as FlexAlignSelf, an as FlexBasis, ao as FlexDirection, ap as FlexGrow, aq as FlexJustifyContent, ar as FlexShrink, x as FlexStyleProps, as as FlexWrap, Q as FontFamilyConfig, at as FontFamilyGlobalAlias, h as FontFamilyGlobalConfig, au as FontSize, R as FontSizeConfig, e as FontWeightConfig, av as FontWeightDescriptive, f as FontWeightNumeric, F as ForegroundPalette, ax as ForegroundPaletteAlias, ay as Height, az as HighContrastMode, H as Hue, b as HueStep, aB as IconSize, G as IconSizeConfig, I as ImageStyleProps, w as LayoutStyleProps, aC as LetterSpacing, aD as LineClampAlias, aE as LineColor, aF as LineHeight, V as LineHeightConfig, L as LinePalette, aG as LinePaletteAlias, aH as MaxHeight, aI as MaxWidth, aJ as MinHeight, aK as MinWidth, M as Modes, aL as Opacity, O as OpacityStyleProps, aN as Palette, aO as PaletteConfig, aP as PaletteType, P as PaletteValue, aQ as PlatformMode, aR as Position, aS as RegionMode, aT as ScaleConfig, S as ScaleMode, t as ScaleModeConfig, s as ScaleModeForApp, z as SizingStyleProps, aU as SpacingAlias, J as SpacingConfig, y as SpacingStyleProps, aV as SpectrumColor, aW as SpectrumConfig, aX as StateStyleProps, X as StyleProps, T as TextStyleProps, aY as TextTransform, W as TextTransformConfig, aZ as TextVariant, a_ as TransitionDelay, a$ as TransitionDuration, b0 as TransitionTiming, U as UniversalTokensConfig, b2 as Width, b3 as ZIndex, Z as ZIndexConfig, Y as alwaysPalette } from './types-ZrxnB4cM.js';
 import * as _ariakit_react from '@ariakit/react';
 import { PopoverProviderProps, PopoverProps, DialogProps, useDialogStore, DialogStore, DialogDismiss, Popover as Popover$1, PopoverArrow as PopoverArrow$1, PopoverAnchor as PopoverAnchor$1, PopoverDescription as PopoverDescription$1, PopoverDismiss as PopoverDismiss$1, PopoverProvider as PopoverProvider$1, PopoverDisclosure as PopoverDisclosure$1, PopoverDisclosureArrow as PopoverDisclosureArrow$1, TabProviderProps, TabListProps, TabPanelProps } from '@ariakit/react';
 export { DialogStore as ModalStore, TabListProps, TabPanelProps, TabProviderProps as TabsProps, usePopoverStore } from '@ariakit/react';
 import { ToastContainerProps } from 'react-toastify';
 export { toast } from 'react-toastify';
-import { a as CX, C as CVA } from './types-3GXulqnG.js';
-export { S as SetState } from './types-3GXulqnG.js';
-export { c as DEFAULT_COLOR_MODE, D as DEFAULT_COLOR_MODE_FOR_APP, g as DEFAULT_HIGH_CONTRAST_MODE, h as DEFAULT_REGION_MODE, e as DEFAULT_SCALE_MODE, b as DEFAULT_SCALE_MODE_FOR_APP, d as defaultTokensConfig, f as fontFamilyGlobal, a as fontWeightMap } from './index.native-hIYZ_ma-.js';
-export { AVATAR_SIZE_PREFIX, DARK_COLOR_MODE_CLASSNAME, DEFAULT_COLOR_MODE_CLASSNAME, DEFAULT_SCALE_MODE_CLASSNAME, FONT_FAMILY_PREFIX, FONT_ICONS_CSS_VAR, FONT_SANS_BETA_CSS_VAR, FONT_SANS_CONDENSED_CSS_VAR, FONT_SANS_CSS_VAR, FONT_SERIF_DISPLAY_CSS_VAR, FONT_SERIF_TEXT_CSS_VAR, FONT_SIZE_PREFIX, FONT_WEIGHT_PREFIX, ICON_SIZE_PREFIX, LARGE_SCALE_MODE_CLASSNAME, LIGHT_COLOR_MODE_CLASSNAME, LINE_HEIGHT_PREFIX, MEDIUM_SCALE_MODE_CLASSNAME, SHAPE_PREFIX, SMALL_SCALE_MODE_CLASSNAME, SPACING_PREFIX, SPECTRUM_COLOR_PREFIX, TEXT_TRANSFORM_PREFIX, UDS_PREFIX, XLARGE_SCALE_MODE_CLASSNAME, XSMALL_SCALE_MODE_CLASSNAME, XXLARGE_SCALE_MODE_CLASSNAME, XXXLARGE_SCALE_MODE_CLASSNAME, entries } from './tokens/index.js';
+import { a as CX, C as CVA } from './types-BO2kLynl.js';
+export { S as SetState } from './types-BO2kLynl.js';
+export { c as DEFAULT_COLOR_MODE, D as DEFAULT_COLOR_MODE_FOR_APP, g as DEFAULT_HIGH_CONTRAST_MODE, h as DEFAULT_REGION_MODE, e as DEFAULT_SCALE_MODE, b as DEFAULT_SCALE_MODE_FOR_APP, d as defaultTokensConfig, f as fontFamilyGlobal, a as fontWeightMap } from './index.native-DqJv5EjY.js';
+export { AVATAR_SIZE_PREFIX, BORDER_RADIUS_PREFIX, BORDER_WIDTH_PREFIX, DARK_COLOR_MODE_CLASSNAME, DEFAULT_COLOR_MODE_CLASSNAME, DEFAULT_SCALE_MODE_CLASSNAME, FONT_FAMILY_PREFIX, FONT_ICONS_CSS_VAR, FONT_SANS_BETA_CSS_VAR, FONT_SANS_CONDENSED_CSS_VAR, FONT_SANS_CSS_VAR, FONT_SERIF_DISPLAY_CSS_VAR, FONT_SERIF_TEXT_CSS_VAR, FONT_SIZE_PREFIX, FONT_WEIGHT_PREFIX, ICON_SIZE_PREFIX, LARGE_SCALE_MODE_CLASSNAME, LIGHT_COLOR_MODE_CLASSNAME, LINE_HEIGHT_PREFIX, MEDIUM_SCALE_MODE_CLASSNAME, SMALL_SCALE_MODE_CLASSNAME, SPACING_PREFIX, SPECTRUM_COLOR_PREFIX, TEXT_TRANSFORM_PREFIX, UDS_PREFIX, XLARGE_SCALE_MODE_CLASSNAME, XSMALL_SCALE_MODE_CLASSNAME, XXLARGE_SCALE_MODE_CLASSNAME, XXXLARGE_SCALE_MODE_CLASSNAME, entries } from './tokens/index.js';
 
-interface AccordionProps extends React.PropsWithChildren {
+type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
+interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
+}
+/**
+ * Provides press interactions with accessibility support.
+ * @example
+ ```tsx
+   import { Pressable, Text } from "@yahoo/uds"
+
+  export function Demo() {
+    return (
+      <Pressable
+        onClick={console.log}
+        backgroundColor="secondary"
+        bordered
+        borderColor="primary"
+        borderRadius="lg"
+      >
+        <Text variant="body1" spacingHorizontal="7" spacingVertical="5">Click me...</Text>
+      </Pressable>
+    )
+  }
+  ```
+ */
+declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface AccordionProps extends PressableProps {
     label: string;
     open?: boolean;
     onClick?: () => void;
 }
-declare function Accordion({ label, children, onClick, open }: AccordionProps): react_jsx_runtime.JSX.Element;
+declare function Accordion({ label, children, onClick, open, spacingHorizontal, ...pressableProps }: AccordionProps): react_jsx_runtime.JSX.Element;
 
 type NativeImageProps$1 = Omit<react__default.ImgHTMLAttributes<HTMLImageElement>, 'size' | 'color' | 'height' | 'width' | 'alt' | 'src'>;
 interface AvatarProps extends NativeImageProps$1, UniversalAvatarProps {
@@ -53,32 +79,6 @@ interface BoxProps extends UniversalBoxProps, DivProps$1 {
  */
 declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
 
-type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
-interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
-}
-/**
- * Provides press interactions with accessibility support.
- * @example
- ```tsx
-   import { Pressable, Text } from "@yahoo/uds"
-
-  export function Demo() {
-    return (
-      <Pressable
-        onClick={console.log}
-        backgroundColor="secondary"
-        bordered
-        borderColor="primary"
-        borderRadius="l"
-      >
-        <Text variant="body1" spacingHorizontal="7" spacingVertical="5">Click me...</Text>
-      </Pressable>
-    )
-  }
-  ```
- */
-declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<HTMLButtonElement>>;
-
 interface ButtonProps extends PressableProps, UniversalButtonProps {
 }
 /**
@@ -490,10 +490,10 @@ type TextProps<As extends TextElement = TextElement> = UniversalTextProps & {
  */
 declare const Text: react.ForwardRefExoticComponent<Omit<TextProps<TextElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
 
-type NativeTextInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'height' | 'size' | 'width' | ''>;
+type NativeTextInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'height' | 'size' | 'width' | 'color'>;
 interface TextInputProps extends NativeTextInputProps, UniversalTextInputProps {
 }
-declare function TextInput({ className, disabled, ...props }: TextInputProps): react_jsx_runtime.JSX.Element;
+declare function TextInput({ className, disabled, backgroundColor, borderColor, borderWidth, borderRadius, color, placeholderColor, spacingVertical, spacingHorizontal, fontSize: textVariant, ...props }: TextInputProps): react_jsx_runtime.JSX.Element;
 
 interface TextInputGroupProps extends TextInputProps {
     label?: string;
@@ -573,28 +573,29 @@ declare const cva: CVA<string>;
 declare const getStyles: (props?: ({
     color?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "white" | "black" | undefined;
     colorChecked?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "white" | "black" | undefined;
+    placeholderColor?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "white" | "black" | undefined;
     fontFamily?: "display1" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | "icons" | "sans" | "sans-beta" | "sans-condensed" | "serif-text" | "serif-display" | undefined;
     fontSize?: "display1" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | undefined;
     fontWeight?: "bold" | "black" | "display1" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | "thin" | "extralight" | "light" | "regular" | "medium" | "semibold" | "extrabold" | undefined;
     lineHeight?: "display1" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | undefined;
     textAlign?: "center" | "justify" | "start" | "end" | undefined;
     textTransform?: "display1" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
-    spacing?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    spacingHorizontal?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    spacingVertical?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    spacingBottom?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    spacingEnd?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    spacingStart?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    spacingTop?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    offset?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    offsetVertical?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    offsetHorizontal?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    offsetBottom?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    offsetEnd?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    offsetStart?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    offsetTop?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    columnGap?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
-    rowGap?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | undefined;
+    spacing?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    spacingHorizontal?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    spacingVertical?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    spacingBottom?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    spacingEnd?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    spacingStart?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    spacingTop?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    offset?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    offsetVertical?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    offsetHorizontal?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    offsetBottom?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    offsetEnd?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    offsetStart?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    offsetTop?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    columnGap?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
+    rowGap?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
     backgroundColor?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "white" | "black" | "accent-wash" | "alert-wash" | "brand-wash" | "positive-wash" | "warning-wash" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-3-inverse" | "overlay" | undefined;
     backgroundColorOnActive?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "white" | "black" | "accent-wash" | "alert-wash" | "brand-wash" | "positive-wash" | "warning-wash" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-3-inverse" | "overlay" | undefined;
     backgroundColorOnHover?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "white" | "black" | "accent-wash" | "alert-wash" | "brand-wash" | "positive-wash" | "warning-wash" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-3-inverse" | "overlay" | undefined;
@@ -611,29 +612,29 @@ declare const getStyles: (props?: ({
     borderEndColor?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | undefined;
     borderBottomColor?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | undefined;
     borderTopColor?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | undefined;
-    borderRadius?: "square" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "circle" | undefined;
-    borderTopStartRadius?: "square" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "circle" | undefined;
-    borderTopEndRadius?: "square" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "circle" | undefined;
-    borderBottomStartRadius?: "square" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "circle" | undefined;
-    borderBottomEndRadius?: "square" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "circle" | undefined;
+    borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
+    borderTopStartRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
+    borderTopEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
+    borderBottomStartRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
+    borderBottomEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
     bordered?: boolean | undefined;
-    borderWidth?: "0" | "1" | "2" | "4" | "8" | undefined;
-    borderVerticalWidth?: "0" | "1" | "2" | "4" | "8" | undefined;
-    borderHorizontalWidth?: "0" | "1" | "2" | "4" | "8" | undefined;
-    borderStartWidth?: "0" | "1" | "2" | "4" | "8" | undefined;
-    borderEndWidth?: "0" | "1" | "2" | "4" | "8" | undefined;
-    borderTopWidth?: "0" | "1" | "2" | "4" | "8" | undefined;
-    borderBottomWidth?: "0" | "1" | "2" | "4" | "8" | undefined;
+    borderWidth?: "thin" | "medium" | "none" | "thick" | undefined;
+    borderVerticalWidth?: "thin" | "medium" | "none" | "thick" | undefined;
+    borderHorizontalWidth?: "thin" | "medium" | "none" | "thick" | undefined;
+    borderStartWidth?: "thin" | "medium" | "none" | "thick" | undefined;
+    borderEndWidth?: "thin" | "medium" | "none" | "thick" | undefined;
+    borderTopWidth?: "thin" | "medium" | "none" | "thick" | undefined;
+    borderBottomWidth?: "thin" | "medium" | "none" | "thick" | undefined;
     borderedVertical?: boolean | undefined;
     borderedTop?: boolean | undefined;
     borderedBottom?: boolean | undefined;
     borderedHorizontal?: boolean | undefined;
     borderedEnd?: boolean | undefined;
     borderedStart?: boolean | undefined;
-    height?: "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "full" | "screen" | "min" | "max" | "fit" | undefined;
+    height?: "full" | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "screen" | "min" | "max" | "fit" | undefined;
     minHeight?: "full" | "screen" | "min" | "max" | "fit" | undefined;
     maxHeight?: "none" | "full" | "screen" | "min" | "max" | "fit" | undefined;
-    width?: "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "full" | "screen" | "min" | "max" | "fit" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | undefined;
+    width?: "full" | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "screen" | "min" | "max" | "fit" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | undefined;
     minWidth?: "full" | "screen" | "min" | "max" | "fit" | undefined;
     maxWidth?: "none" | "full" | "min" | "max" | "fit" | undefined;
     avatarSize?: "s" | "m" | "l" | undefined;