@yahoo/uds 2.11.0 → 3.0.0

package/dist/{Text-UCDorZDD.d.ts → Text-yeQcITg9.d.ts}

@@ -1,4 +1,4 @@
-import { ReactNode, PropsWithChildren, Ref } from 'react';
+import { PropsWithChildren, ReactNode, Ref } from 'react';
 import { SvgIcon, IconSize, IconVariant } from '@yahoo/uds-icons/types';
 
 declare const alwaysPalette: {
@@ -8,22 +8,25 @@ declare const alwaysPalette: {
     current: string;
 };
 
-type CorePaletteAlias = 'brand' | 'accent' | 'alert' | 'positive' | 'warning';
-type BackgroundPaletteAlias = 'primary' | 'secondary';
-type ForegroundPaletteAlias = 'primary' | 'secondary' | 'tertiary' | 'muted' | 'on-color';
-type LinePaletteAlias = 'primary' | 'secondary' | 'tertiary' | 'muted';
+type SharedPrimaryPaletteAlias = 'brand' | 'alert' | 'positive' | 'warning' | 'info';
+type SharedSecondaryPaletteAlias = `${SharedPrimaryPaletteAlias}-secondary`;
+type SharedPaletteAlias = SharedPrimaryPaletteAlias | SharedSecondaryPaletteAlias;
+type DeprecatedAccentAlias = 'accent';
+type BackgroundPaletteAlias = 'primary' | 'secondary' | DeprecatedAccentAlias | SharedPaletteAlias;
+type ForegroundPaletteAlias = 'primary' | 'secondary' | 'tertiary' | 'muted' | 'on-color' | DeprecatedAccentAlias | SharedPaletteAlias;
+type LinePaletteAlias = 'primary' | 'secondary' | 'tertiary' | 'muted' | DeprecatedAccentAlias | SharedPaletteAlias;
 type AlwaysPalette = typeof alwaysPalette;
 type AlwaysPaletteAlias = keyof AlwaysPalette;
-type ForegroundColor = CorePaletteAlias | ForegroundPaletteAlias | AlwaysPaletteAlias;
-type LineColor = CorePaletteAlias | LinePaletteAlias | AlwaysPaletteAlias;
-type BackgroundColor = CorePaletteAlias | BackgroundPaletteAlias | AlwaysPaletteAlias;
-type TextVariant = 'display1' | 'display2' | 'display3' | 'title1' | 'title2' | 'title3' | 'title4' | 'headline1' | 'body1' | 'label1' | 'label2' | 'caption1' | 'caption2' | 'legal1';
+type ForegroundColor = ForegroundPaletteAlias | AlwaysPaletteAlias;
+type LineColor = LinePaletteAlias | AlwaysPaletteAlias;
+type BackgroundColor = BackgroundPaletteAlias | AlwaysPaletteAlias;
+type ShadowVariant = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type ShadowVariantInvert = `${Exclude<ShadowVariant, 'none'>}-invert`;
+type TextVariant = 'display1' | 'display2' | 'display3' | 'title1' | 'title2' | 'title3' | 'title4' | 'headline1' | 'body1' | 'label1' | 'label2' | 'label3' | 'label4' | 'caption1' | 'caption2' | 'legal1';
 type FontAlias = 'sans' | 'sans-alt' | 'serif' | 'serif-alt' | 'mono';
 type FontWeightDescriptive = 'thin' | 'extralight' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
 type TextTransform = 'none' | 'uppercase' | 'lowercase' | 'capitalize';
 type TShirtSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-type TShirtSizeCommon = Extract<TShirtSize, 'sm' | 'md' | 'lg'>;
-type AvatarSize = TShirtSizeCommon;
 type SpacingAlias = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '14' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '52' | '56' | '60' | '64' | '72' | '80' | '96';
 type BorderRadius = TShirtSize;
 type BorderWidth = 'none' | 'thin' | 'medium' | 'thick';
@@ -40,12 +43,6 @@ type FlexBasis = 'min-content';
 type Display = 'block' | 'inline-block' | 'inline' | 'flex' | 'inline-flex' | 'table' | 'inline-table' | 'table-caption' | 'table-cell' | 'table-column' | 'table-column-group' | 'table-footer-group' | 'table-header-group' | 'table-row-group' | 'table-row' | 'flow-root' | 'grid' | 'contents';
 type Overflow = 'auto' | 'hidden' | 'clip' | 'visible' | 'scroll';
 type Position = 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky';
-type ImageStyleProps = {
-    /**
-     * Determines how the image should be resized to fit its container.
-     */
-    contentFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
-};
 interface BorderStyleProps {
     /** Add a border radius to all corners of the box. */
     borderRadius?: BorderRadius;
@@ -82,6 +79,12 @@ interface BorderStyleProps {
     /** Sets the width of the bottom border of an element. */
     borderBottomWidth?: BorderWidth;
 }
+interface ShadowStyleProps {
+    /** Sets the variant of the shadow. */
+    dropShadow?: ShadowVariant;
+    /** Sets the variant of the inset shadow. */
+    insetShadow?: ShadowVariant | ShadowVariantInvert;
+}
 interface LayoutStyleProps {
     /** Sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex. */
     display?: Display;
@@ -178,7 +181,7 @@ interface SizeStyleProps {
     /** Sets the height of an element. */
     height?: 'full' | 'fit' | 'screen';
 }
-interface UniversalBoxProps extends PropsWithChildren, BackgroundStyleProps, BorderStyleProps, FlexStyleProps, LayoutStyleProps, SpacingStyleProps, SizeStyleProps {
+interface UniversalBoxProps extends PropsWithChildren, BackgroundStyleProps, BorderStyleProps, FlexStyleProps, LayoutStyleProps, SpacingStyleProps, SizeStyleProps, ShadowStyleProps {
     /**
      * When asChild is set to true, the component's child will be cloned and passed
      * the props and behavior required to make it functional.
@@ -205,66 +208,24 @@ interface UniversalIconProps {
     /** Color of the icon. */
     color?: ForegroundColor;
 }
-interface UniversalImageProps extends Omit<UniversalBoxProps, 'width' | 'height'>, ImageStyleProps {
-    /** The source URL of the image. */
-    src: string;
-    /**  Provides fallback (alternate) text to display when the image specified by the Image element is not loaded. */
-    alt?: string;
-    /** Width of the image in px. */
-    width?: number;
-    /** Height of the image in pixel. */
-    height?: number;
-}
-interface UniversalAvatarProps extends UniversalImageProps {
-    /** The size of the Avatar. */
-    size?: AvatarSize;
-    /** The shape of the Avatar. */
-    shape?: BorderRadius;
-}
-interface UniversalTextInputProps {
-    disabled?: boolean;
-    required?: boolean;
-    backgroundColor?: BackgroundColor;
-    borderColor?: LineColor;
-    borderWidth?: BorderWidth;
-    borderRadius?: BorderRadius;
-    color?: ForegroundColor;
-    fontSize?: TextVariant;
-    placeholderColor?: ForegroundColor;
-    spacingVertical?: SpacingAlias;
-    spacingHorizontal?: SpacingAlias;
-}
-type DividerVariant = 'primary' | 'secondary' | 'tertiary' | 'muted';
-interface UniversalDividerProps {
-    /**
-     * Use a pre-defined variant.
-     * @default 'primary'
-     */
-    variant?: DividerVariant;
-    /**
-     * Set to true to scale the divider vertically.
-     */
-    vertical?: boolean;
-    /** Override thickness of the divider set by the variant. */
-    thickness?: BorderWidth;
-    /** Override color of the divider set by the variant. */
-    color?: LineColor;
-    /** When there are children, where are they placed?
-     * @default 'middle'
-     */
-    contentPosition?: 'start' | 'middle' | 'end';
+type SVGElementProps = Omit<React.HTMLAttributes<SVGSVGElement>, 'color'>;
+interface IconPropsWithSVGProps extends UniversalIconProps, SVGElementProps {
 }
 
 type DivProps = React.HTMLAttributes<HTMLDivElement>;
 interface BoxProps extends UniversalBoxProps, DivProps {
 }
 
-type TextElementTagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'span' | 'label' | 'li';
+type TextElementTagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'span' | 'label' | 'li' | 'sup';
+type ColorWithInherit = Exclude<UniversalTextProps['color'], undefined> | 'inherit';
+type VariantWithInherit = Exclude<UniversalTextProps['variant'], undefined> | 'inherit';
 type TextProps<TagName extends TextElementTagName = TextElementTagName> = {
     /** Ref passed to the inner container. */
     ref?: Ref<HTMLElement>;
     /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
     as?: TagName;
-} & JSX.IntrinsicElements[TagName] & UniversalTextProps;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & JSX.IntrinsicElements[TagName] & Omit<UniversalTextProps, 'variant' | 'color'>;
 
-export type { BoxProps as B, DivProps as D, Overflow as O, SpacingStyleProps as S, TextProps as T, UniversalAvatarProps as U, UniversalStackProps as a, UniversalDividerProps as b, UniversalTextProps as c, UniversalIconProps as d, UniversalTextInputProps as e };
+export type { BoxProps as B, DivProps as D, IconPropsWithSVGProps as I, Overflow as O, TextProps as T, UniversalTextProps as U, UniversalStackProps as a };

package/dist/VStack-CJs5afN8.d.ts

@@ -0,0 +1,145 @@
+import * as react from 'react';
+import { e as UniversalBoxProps, f as UniversalStackProps, g as UniversalDividerProps, h as UniversalInputProps } from './types-d2CfR7zp.js';
+import { HTMLMotionProps } from 'motion/react';
+
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+interface BoxProps extends UniversalBoxProps, DivProps {
+}
+/**
+ * **📦 A layout component that can be used to compose other components**
+ *
+ * @description
+ * The most simple component we ship - a div. But with all the power of the UDS design system.
+ * By default, `Box` is a flexbox container. When working with vertical or horizontal layouts,
+ * consider using [VStack](./v-stack) or [HStack](./h-stack) respectively.
+ *
+ * @example
+ * ```tsx
+ * import { Box } from '@yahoo/uds';
+ *
+ * <Box backgroundColor="primary" spacing="6">
+ *   Any kind of content can go here!
+ * </Box>
+ * ```
+ *
+ * @usage
+ * - If you need to div-like container to apply padding, shapes, or other styling.
+ * - If you're creating card components.
+ *
+ * @see The {@link https://uds.build/docs/components/box Box Docs} for more info
+ *
+ * @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
+ */
+declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
+
+type VariantWithInherit = Exclude<UniversalDividerProps['variant'], undefined> | 'inherit';
+interface DividerProps extends Omit<BoxProps, 'color' | 'borderColor' | 'borderWidth'>, Omit<UniversalStackProps, 'separator' | 'asChild'>, Omit<UniversalDividerProps, 'variant'> {
+    variant?: VariantWithInherit;
+    layerClassNames?: {
+        root?: string;
+        text?: string;
+        line?: string;
+    };
+}
+/**
+ * **📦 A divider component that can be used to visually separate components**
+ *
+ * @description
+ * The Divider component is a visual element used to separate content and create clear groupings within a layout. It helps establish hierarchy, improve readability, and guide users through sections of an interface. Dividers can appear as horizontal or vertical lines and are commonly used between related content blocks, within menus, or in dense UI areas to reduce visual clutter.
+ *
+ * @example
+ * ```tsx
+ * import { Divider } from '@yahoo/uds';
+ *
+ * // Default primary horizontal divider. Similar to <hr />
+ * <Divider />
+ *
+ * // A vertical divider.
+ * <Divider vertical />
+ *
+ * // A horizontal divider with the secondary styling.
+ * <Divider variant="secondary" />
+ *
+ * // A vertical divider with the tertiary styling.
+ * <Divider vertical variant="tertiary" />
+ * ```
+ *
+ * @usage
+ * - Visually separating parts of a page. Usually used in conjuction with [HStack](./h-stack) or [VStack](./v-stack).
+ *
+ * @see The {@link https://uds.build/docs/components/divider Divider Docs} for more info
+ *
+ * @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
+ */
+declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
+
+type HtmlInputProps = React.InputHTMLAttributes<HTMLInputElement> & HTMLMotionProps<'input'>;
+type NativeInputProps = Omit<HtmlInputProps, 'height' | 'size' | 'width' | 'color' | 'required'>;
+interface InputProps extends NativeInputProps, UniversalInputProps {
+    /** The type of the input element. Reduced set of options from the HTML input type attribute.
+     * @default 'text'
+     */
+    type?: Exclude<NativeInputProps['type'], 'button' | 'checkbox' | 'color' | 'file' | 'radio' | 'range' | 'reset' | 'submit' | 'search'>;
+}
+/**
+ * **📦 An input that allows users to enter text and collect data.**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * An input field is a component that takes text typed into it. It can also serve as a way to display a selection and trigger a dropdown menu. Inputs are interactive elements that users can click, tap, or otherwise engage with to collect data and open dropdowns, or both.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/input Input Docs} for more info
+ *
+ * @usage
+ * - Forms: For collecting data like names, emails, passwords, etc. (e.g., sign-up, login, or contact forms).
+ * - Search Bars: Allowing users to enter search queries to find content.
+ * - Filters/Settings: When users need to specify preferences, like selecting a date or adjusting a number value.
+ * - Feedback/Comments: Letting users leave reviews, comments, or feedback.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Input } from "@yahoo/uds";
+ *
+ * <Input label="Name" placeholder="Enter your name" required />
+ *```
+ *
+ * @related [Checkbox](https://uds.build/docs/components/checkbox), [Radio](https://uds.build/docs/components/radio).
+ **/
+declare const Input: react.ForwardRefExoticComponent<Omit<InputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+
+type VStackProps = UniversalStackProps & DivProps;
+/**
+ * **🥞 A layout component that arranges its children in rows using flexbox**
+ *
+ * @description
+ * VStack is a layout component that arranges its children in rows using [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
+ * and can be used to compose larger layouts. VStack is similar to [Box](./box) but provides additional features like a `gap` property to
+ * add spacing between children.
+ *
+ * @example
+ * ```tsx
+ * import { VStack, Text } from '@yahoo/uds';
+ *
+ * <VStack gap="6">
+ *   <Text variant="body1" color="primary">First</Text>
+ *   <Text variant="body1" color="primary">Second</Text>
+ *   <Text variant="body1" color="primary">Third</Text>
+ * </VStack>
+ * ```
+ *
+ * @usage
+ * - Create a column of items, optionally with gaps between.
+ * - Create rows that are sized to their content (height only). By default each child will fill the width of the VStack.
+ * - Create rows that fill the available space within the parent container.
+ * - Create rows of proportionate size to each other (also known as a ratio-based layout).
+ *
+ * @see The {@link https://uds.build/docs/components/v-stack VStack Docs} for more info
+ *
+ * @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack)
+ **/
+declare const VStack: react.ForwardRefExoticComponent<UniversalStackProps & DivProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Box as B, type DivProps as D, type InputProps as I, VStack as V, type BoxProps as a, Divider as b, type DividerProps as c, type VStackProps as d, Input as e };

package/dist/VStack-GpQHE4xQ.d.cts

@@ -0,0 +1,145 @@
+import * as react from 'react';
+import { e as UniversalBoxProps, f as UniversalStackProps, g as UniversalDividerProps, h as UniversalInputProps } from './types-d2CfR7zp.cjs';
+import { HTMLMotionProps } from 'motion/react';
+
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+interface BoxProps extends UniversalBoxProps, DivProps {
+}
+/**
+ * **📦 A layout component that can be used to compose other components**
+ *
+ * @description
+ * The most simple component we ship - a div. But with all the power of the UDS design system.
+ * By default, `Box` is a flexbox container. When working with vertical or horizontal layouts,
+ * consider using [VStack](./v-stack) or [HStack](./h-stack) respectively.
+ *
+ * @example
+ * ```tsx
+ * import { Box } from '@yahoo/uds';
+ *
+ * <Box backgroundColor="primary" spacing="6">
+ *   Any kind of content can go here!
+ * </Box>
+ * ```
+ *
+ * @usage
+ * - If you need to div-like container to apply padding, shapes, or other styling.
+ * - If you're creating card components.
+ *
+ * @see The {@link https://uds.build/docs/components/box Box Docs} for more info
+ *
+ * @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
+ */
+declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
+
+type VariantWithInherit = Exclude<UniversalDividerProps['variant'], undefined> | 'inherit';
+interface DividerProps extends Omit<BoxProps, 'color' | 'borderColor' | 'borderWidth'>, Omit<UniversalStackProps, 'separator' | 'asChild'>, Omit<UniversalDividerProps, 'variant'> {
+    variant?: VariantWithInherit;
+    layerClassNames?: {
+        root?: string;
+        text?: string;
+        line?: string;
+    };
+}
+/**
+ * **📦 A divider component that can be used to visually separate components**
+ *
+ * @description
+ * The Divider component is a visual element used to separate content and create clear groupings within a layout. It helps establish hierarchy, improve readability, and guide users through sections of an interface. Dividers can appear as horizontal or vertical lines and are commonly used between related content blocks, within menus, or in dense UI areas to reduce visual clutter.
+ *
+ * @example
+ * ```tsx
+ * import { Divider } from '@yahoo/uds';
+ *
+ * // Default primary horizontal divider. Similar to <hr />
+ * <Divider />
+ *
+ * // A vertical divider.
+ * <Divider vertical />
+ *
+ * // A horizontal divider with the secondary styling.
+ * <Divider variant="secondary" />
+ *
+ * // A vertical divider with the tertiary styling.
+ * <Divider vertical variant="tertiary" />
+ * ```
+ *
+ * @usage
+ * - Visually separating parts of a page. Usually used in conjuction with [HStack](./h-stack) or [VStack](./v-stack).
+ *
+ * @see The {@link https://uds.build/docs/components/divider Divider Docs} for more info
+ *
+ * @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
+ */
+declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
+
+type HtmlInputProps = React.InputHTMLAttributes<HTMLInputElement> & HTMLMotionProps<'input'>;
+type NativeInputProps = Omit<HtmlInputProps, 'height' | 'size' | 'width' | 'color' | 'required'>;
+interface InputProps extends NativeInputProps, UniversalInputProps {
+    /** The type of the input element. Reduced set of options from the HTML input type attribute.
+     * @default 'text'
+     */
+    type?: Exclude<NativeInputProps['type'], 'button' | 'checkbox' | 'color' | 'file' | 'radio' | 'range' | 'reset' | 'submit' | 'search'>;
+}
+/**
+ * **📦 An input that allows users to enter text and collect data.**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * An input field is a component that takes text typed into it. It can also serve as a way to display a selection and trigger a dropdown menu. Inputs are interactive elements that users can click, tap, or otherwise engage with to collect data and open dropdowns, or both.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/input Input Docs} for more info
+ *
+ * @usage
+ * - Forms: For collecting data like names, emails, passwords, etc. (e.g., sign-up, login, or contact forms).
+ * - Search Bars: Allowing users to enter search queries to find content.
+ * - Filters/Settings: When users need to specify preferences, like selecting a date or adjusting a number value.
+ * - Feedback/Comments: Letting users leave reviews, comments, or feedback.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Input } from "@yahoo/uds";
+ *
+ * <Input label="Name" placeholder="Enter your name" required />
+ *```
+ *
+ * @related [Checkbox](https://uds.build/docs/components/checkbox), [Radio](https://uds.build/docs/components/radio).
+ **/
+declare const Input: react.ForwardRefExoticComponent<Omit<InputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+
+type VStackProps = UniversalStackProps & DivProps;
+/**
+ * **🥞 A layout component that arranges its children in rows using flexbox**
+ *
+ * @description
+ * VStack is a layout component that arranges its children in rows using [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
+ * and can be used to compose larger layouts. VStack is similar to [Box](./box) but provides additional features like a `gap` property to
+ * add spacing between children.
+ *
+ * @example
+ * ```tsx
+ * import { VStack, Text } from '@yahoo/uds';
+ *
+ * <VStack gap="6">
+ *   <Text variant="body1" color="primary">First</Text>
+ *   <Text variant="body1" color="primary">Second</Text>
+ *   <Text variant="body1" color="primary">Third</Text>
+ * </VStack>
+ * ```
+ *
+ * @usage
+ * - Create a column of items, optionally with gaps between.
+ * - Create rows that are sized to their content (height only). By default each child will fill the width of the VStack.
+ * - Create rows that fill the available space within the parent container.
+ * - Create rows of proportionate size to each other (also known as a ratio-based layout).
+ *
+ * @see The {@link https://uds.build/docs/components/v-stack VStack Docs} for more info
+ *
+ * @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack)
+ **/
+declare const VStack: react.ForwardRefExoticComponent<UniversalStackProps & DivProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Box as B, type DivProps as D, type InputProps as I, VStack as V, type BoxProps as a, Divider as b, type DividerProps as c, type VStackProps as d, Input as e };

package/dist/chunk-4G4TBHHL.js

@@ -0,0 +1,2 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+var o="uds",t=`${o}-avatar-size`,e=`${o}-border-radius`,n=`${o}-border-width`,d=`${o}-font`,s=`${o}-font-size`,i=`${o}-font-weight`,r=`${o}-font-slant`,a=`${o}-font-width`,l=`${o}-icon-size`,$=`${o}-line-height`,b=`${o}-motion`,c=`${o}-spectrum-color`,u=`${o}-text-transform`,f=`${o}-color-mode-dark`,h=`${o}-color-mode-light`,m=`${o}-scale-mode-xsmall`,g=`${o}-scale-mode-small`,p=`${o}-scale-mode-medium`,x=`${o}-scale-mode-large`,w=`${o}-scale-mode-xlarge`,v=`${o}-scale-mode-xxlarge`,z=`${o}-scale-mode-xxxlarge`,S=h,W=x,k={borderRadius:`--${o}-button-border-radius`,borderWidth:`--${o}-button-border-width`,color:`--${o}-button-color`,backgroundColor:`--${o}-button-background-color`,borderColor:`--${o}-button-border-color`,padding:`--${o}-button-padding`,columnGap:`--${o}-button-gap`,fontFamily:`--${o}-button-font`,fontWeight:`--${o}-button-font-weight`,fontWidth:`--${o}-button-font-width`,fontSlant:`--${o}-button-font-slant`,fontSize:`--${o}-button-font-size`,lineHeight:`--${o}-button-line-height`,textTransform:`--${o}-button-text-transform`,iconSize:`--${o}-button-icon-size`,dropShadow:`--${o}-button-shadow`,insetShadow:`--${o}-button-inset-shadow`,effects:{scale:{rest:`--${o}-button-effects-scale--rest`,hover:`--${o}-button-effects-scale--hover`,pressed:`--${o}-button-effects-scale--pressed`}}},C={padding:`--${o}-icon-button-padding`,iconSize:`--${o}-icon-button-icon-size`},y={hover:":hover:not([disabled])",pressed:":active:not([disabled])",disabled:":disabled",focused:":focus-visible",focusedWithin:":has(:focus-visible)",notDisabled:":not(:disabled)"};export{t as AVATAR_SIZE_PREFIX,e as BORDER_RADIUS_PREFIX,n as BORDER_WIDTH_PREFIX,k as BUTTON_CSS_VAR_MAP,f as DARK_COLOR_MODE_CLASSNAME,S as DEFAULT_COLOR_MODE_CLASSNAME,W as DEFAULT_SCALE_MODE_CLASSNAME,d as FONT_FAMILY_PREFIX,s as FONT_SIZE_PREFIX,r as FONT_SLANT_PREFIX,i as FONT_WEIGHT_PREFIX,a as FONT_WIDTH_PREFIX,C as ICON_BUTTON_CSS_VAR_MAP,l as ICON_SIZE_PREFIX,x as LARGE_SCALE_MODE_CLASSNAME,h as LIGHT_COLOR_MODE_CLASSNAME,$ as LINE_HEIGHT_PREFIX,p as MEDIUM_SCALE_MODE_CLASSNAME,b as MOTION_PREFIX,y as PSEUDO_STYLE_SELECTOR_MAP,g as SMALL_SCALE_MODE_CLASSNAME,c as SPECTRUM_COLOR_PREFIX,u as TEXT_TRANSFORM_PREFIX,o as UDS_PREFIX,w as XLARGE_SCALE_MODE_CLASSNAME,m as XSMALL_SCALE_MODE_CLASSNAME,v as XXLARGE_SCALE_MODE_CLASSNAME,z as XXXLARGE_SCALE_MODE_CLASSNAME};