@yahoo/uds 0.1.19 → 0.1.20

package/dist/index.d.cts

@@ -1,24 +1,50 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { j as UniversalAvatarProps, k as UniversalBoxProps, l as UniversalPressableProps, 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-4Vw-VSaq.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-4Vw-VSaq.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-Ly3i1QBP.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 {
 }
 /**
@@ -580,22 +580,22 @@ declare const getStyles: (props?: ({
     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;
@@ -612,11 +612,11 @@ 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?: "none" | "xs" | "s" | "m" | "l" | "xl" | "full" | undefined;
-    borderTopStartRadius?: "none" | "xs" | "s" | "m" | "l" | "xl" | "full" | undefined;
-    borderTopEndRadius?: "none" | "xs" | "s" | "m" | "l" | "xl" | "full" | undefined;
-    borderBottomStartRadius?: "none" | "xs" | "s" | "m" | "l" | "xl" | "full" | undefined;
-    borderBottomEndRadius?: "none" | "xs" | "s" | "m" | "l" | "xl" | "full" | 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?: "thin" | "medium" | "none" | "thick" | undefined;
     borderVerticalWidth?: "thin" | "medium" | "none" | "thick" | undefined;

package/dist/index.d.ts

@@ -1,24 +1,50 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { j as UniversalAvatarProps, k as UniversalBoxProps, l as UniversalPressableProps, 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-4Vw-VSaq.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-4Vw-VSaq.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-n_2cKXkV.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 {
 }
 /**
@@ -580,22 +580,22 @@ declare const getStyles: (props?: ({
     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;
@@ -612,11 +612,11 @@ 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?: "none" | "xs" | "s" | "m" | "l" | "xl" | "full" | undefined;
-    borderTopStartRadius?: "none" | "xs" | "s" | "m" | "l" | "xl" | "full" | undefined;
-    borderTopEndRadius?: "none" | "xs" | "s" | "m" | "l" | "xl" | "full" | undefined;
-    borderBottomStartRadius?: "none" | "xs" | "s" | "m" | "l" | "xl" | "full" | undefined;
-    borderBottomEndRadius?: "none" | "xs" | "s" | "m" | "l" | "xl" | "full" | 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?: "thin" | "medium" | "none" | "thick" | undefined;
     borderVerticalWidth?: "thin" | "medium" | "none" | "thick" | undefined;