@yahoo/uds 3.58.1 → 3.59.0-beta.1

package/dist/Text-DPAGXQX_.d.ts

@@ -1,295 +0,0 @@
-import { PropsWithChildren, ElementType, ReactNode, ReactElement, Ref } from 'react';
-import { SvgIcon, IconSize, IconVariant } from '@yahoo/uds-icons/types';
-
-declare const alwaysPalette: {
-    white: string;
-    black: string;
-    transparent: string;
-    current: string;
-};
-
-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 = 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 TextVariantTypography = 'display1' | 'display2' | 'display3' | 'title1' | 'title2' | 'title3' | 'title4' | 'headline1' | 'body1' | 'label1' | 'label2' | 'label3' | 'label4' | 'caption1' | 'caption2' | 'legal1';
-type TextVariantUi = 'ui1' | 'ui2' | 'ui3' | 'ui4' | 'ui5' | 'ui6';
-type TextVariantWithoutEmphasized = TextVariantTypography | TextVariantUi;
-type TextVariant = TextVariantWithoutEmphasized | `${TextVariantWithoutEmphasized}/emphasized`;
-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 SpacingAlias = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '4.5' | '5' | '5.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';
-type Flex = '1' | 'auto' | 'initial' | 'none';
-type FlexGrow = '0' | '1' | '2' | '3';
-type FlexShrink = '0' | '1';
-type FlexAlignContent = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around';
-type FlexAlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
-type FlexAlignSelf = 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
-type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
-type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
-type FlexJustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
-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';
-interface BorderStyleProps {
-    /** Add a border radius to all corners of the box. */
-    borderRadius?: BorderRadius;
-    /** Add a border radius to top left corner of the box. */
-    borderTopStartRadius?: BorderRadius;
-    /** Add a border radius to top right corner of the box. */
-    borderTopEndRadius?: BorderRadius;
-    /** Add a border radius to bottom left corner of the box. */
-    borderBottomStartRadius?: BorderRadius;
-    /** Add a border radius to bottom right corner of the box. */
-    borderBottomEndRadius?: BorderRadius;
-    /** Adds a custom border color from the palette */
-    borderColor?: LineColor;
-    /** Start border color */
-    borderStartColor?: LineColor;
-    /** End border color */
-    borderEndColor?: LineColor;
-    /** Top border color */
-    borderTopColor?: LineColor;
-    /** Bottom border color */
-    borderBottomColor?: LineColor;
-    /** Shorthand property to the width of an element's border. */
-    borderWidth?: BorderWidth;
-    /** Sets the width of the top and bottom border of an element. */
-    borderVerticalWidth?: BorderWidth;
-    /** Sets the width of the start (left) and end (right) border of an element. */
-    borderHorizontalWidth?: BorderWidth;
-    /** Sets the width of the start (left) border of an element. */
-    borderStartWidth?: BorderWidth;
-    /** Sets the width of the end (right) border of an element. */
-    borderEndWidth?: BorderWidth;
-    /** Sets the width of the top border of an element. */
-    borderTopWidth?: BorderWidth;
-    /** 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;
-    /** Shorthand property which sets the desired behavior when content does not fit in the parent element box (overflows) in the horizontal and/or vertical direction. */
-    overflow?: Overflow;
-    /** Sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the overflow shorthand property. */
-    overflowX?: Overflow;
-    /** sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the overflow shorthand property. */
-    overflowY?: Overflow;
-    /** Sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. */
-    position?: Position;
-}
-interface SpacingStyleProps {
-    /** Apply inner spacing on all sides. */
-    spacing?: SpacingAlias;
-    /** Apply inner spacing on the leading and trailing sides. */
-    spacingHorizontal?: SpacingAlias;
-    /** Apply inner spacing on the top and bottom sides. */
-    spacingVertical?: SpacingAlias;
-    /** Apply inner spacing on the bottom side. */
-    spacingBottom?: SpacingAlias;
-    /** Apply inner spacing on the trailing side. */
-    spacingEnd?: SpacingAlias;
-    /** Apply inner spacing on the leading side. */
-    spacingStart?: SpacingAlias;
-    /** Apply inner spacing on the top side. */
-    spacingTop?: SpacingAlias;
-    /** Apply negative outer spacing on all sides. */
-    offset?: SpacingAlias;
-    /** Apply negative outer spacing on the top and bottom sides. */
-    offsetVertical?: SpacingAlias;
-    /** Apply negative outer spacing on the leading and trailing sides. */
-    offsetHorizontal?: SpacingAlias;
-    /** Apply negative outer spacing on the bottom side. */
-    offsetBottom?: SpacingAlias;
-    /** Apply negative outer spacing on the trailing side. */
-    offsetEnd?: SpacingAlias;
-    /** Apply negative outer spacing on the leading side. */
-    offsetStart?: SpacingAlias;
-    /** Apply negative outer spacing on the top side. */
-    offsetTop?: SpacingAlias;
-    /** Control the horizontal gutters between grid and flexbox items. */
-    columnGap?: SpacingAlias;
-    /** Control the vertical gutters between grid and flexbox items. */
-    rowGap?: SpacingAlias;
-}
-interface FlexStyleProps {
-    /** Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. */
-    alignContent?: FlexAlignContent;
-    /** Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. */
-    alignItems?: FlexAlignItems;
-    /** Overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. */
-    alignSelf?: FlexAlignSelf;
-    /** Sets how a flex item will grow or shrink to fit the space available in its flex container. */
-    flex?: Flex;
-    /** Sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). */
-    flexDirection?: FlexDirection;
-    /** Sets the flex grow factor, which specifies how much of the flex container's remaining space should be assigned to the flex item's main size. */
-    flexGrow?: FlexGrow;
-    /** Sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink. */
-    flexShrink?: FlexShrink;
-    /** Sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked. */
-    flexWrap?: FlexWrap;
-    /** Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. */
-    justifyContent?: FlexJustifyContent;
-    /** Sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis */
-    flexBasis?: FlexBasis;
-}
-interface TextStyleProps {
-    /** Color of a Text or Icon element */
-    color?: ForegroundColor;
-    /** Color of placeholder text */
-    placeholderColor?: ForegroundColor;
-    /** Font family for the text */
-    fontFamily?: TextVariant | FontAlias;
-    /** Font size of the text */
-    fontSize?: TextVariant;
-    /**
-     * Font weight of the text
-     *
-     * @deprecated Consider using an `emphasized` text variant instead. For example: `display1/emphasized`
-     */
-    fontWeight?: TextVariant | FontWeightDescriptive;
-    /** Line height of the text */
-    lineHeight?: TextVariant;
-    /** Text alignment of the text */
-    textAlign?: 'center' | 'justify' | 'start' | 'end';
-    /** Sets the text transform for the text  */
-    textTransform?: TextVariant | TextTransform;
-}
-interface BackgroundStyleProps {
-    /** Sets the background color. */
-    backgroundColor?: BackgroundColor;
-}
-interface SizeStyleProps {
-    /** Sets the width of an element. */
-    width?: 'full' | 'fit' | 'screen';
-    /** Sets the height of an element. */
-    height?: 'full' | 'fit' | 'screen';
-}
-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.
-     */
-    asChild?: boolean;
-    /**
-     * Customize tag name.
-     */
-    as?: ElementType;
-}
-interface UniversalStackProps extends Omit<UniversalBoxProps, 'flexDirection'> {
-    gap?: SpacingAlias;
-    separator?: ReactNode | ((index: number) => ReactNode);
-}
-interface UniversalTextProps extends PropsWithChildren, TextStyleProps, UniversalBoxProps {
-    /** Style of text. */
-    variant?: TextVariant;
-    /** Color of the text. */
-    color?: ForegroundColor;
-}
-interface UniversalIconProps {
-    /** Icon to render from the icons package. */
-    name: SvgIcon;
-    /** Size of the icon. */
-    size?: IconSize;
-    /** Variant for icon. Either fill or outline. */
-    variant?: IconVariant;
-    /** Color of the icon. */
-    color?: ForegroundColor;
-}
-type SVGElementProps = Omit<React.HTMLAttributes<SVGSVGElement>, 'color'>;
-interface IconPropsWithSVGProps extends UniversalIconProps, SVGElementProps {
-}
-type IconSlotRenderProps = Omit<IconPropsWithSVGProps, 'name'>;
-/**
- * We are changing the slot prop from ReactNode to ReactElement to avoid
- * confusing and useless options like number and string, however,
- * there are cases where folks are using null/undefined to dynamically opt-out
- * of rendering the icon. We want to still allow that.
- */
-type BackwardsCompatibleReactElement = null | undefined | ReactElement;
-/**
- * Used anywhere we offer an icon which can be customized.
- *
- * Passing an SvgIcon is the happy path.
- *
- * @example
- * import { Calendar } from "@yahoo/uds-icons"
- * <IconSlot icon={Calendar} />
- */
-type UniversalIconSlot = SvgIcon | BackwardsCompatibleReactElement | ((iconProps: IconSlotRenderProps) => BackwardsCompatibleReactElement);
-type SwitchSize = 'sm' | 'md';
-interface UniversalSwitchProps {
-    /**
-     * Size of the switch.
-     * @default 'md'
-     */
-    size?: SwitchSize;
-    /**
-     * The label of the switch. Can be a ReactNode for rich html labels.
-     * Will not be labelled if omitted. User MUST then use `aria-label` attribute,
-     * wrap in a `<label>` tag or `htmlFor` to add an external label for a11y.
-     */
-    label?: string | ReactNode | (() => ReactNode);
-    /**
-     * Controlled value of the switch. Will be an uncontrolled input if not present.
-     */
-    isOn?: boolean;
-    /**
-     * Set the initial value to default when uncontrolled.
-     */
-    defaultIsOn?: boolean;
-    /** An icon to be displayed on the on state of the input. */
-    onIcon?: UniversalIconSlot;
-    /** An icon to be displayed on the off state of the input. */
-    offIcon?: UniversalIconSlot;
-    /**
-     * Disables animations when true.
-     */
-    reduceMotion?: boolean;
-    /**
-     * On which side of the input is the label displayed.
-     * @default 'start'
-     */
-    labelPosition?: 'start' | 'end';
-}
-
-type DivProps = React.HTMLAttributes<HTMLDivElement>;
-interface BoxProps extends UniversalBoxProps, DivProps {
-}
-
-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;
-    variant?: VariantWithInherit;
-    color?: ColorWithInherit;
-} & JSX.IntrinsicElements[TagName] & Omit<UniversalTextProps, 'variant' | 'color'>;
-
-export type { BoxProps as B, DivProps as D, IconPropsWithSVGProps as I, TextProps as T, UniversalTextProps as U, UniversalStackProps as a, UniversalSwitchProps as b };

package/dist/Text-DxibXWon.d.ts

@@ -1,88 +0,0 @@
-import * as react from 'react';
-import { Ref } from 'react';
-import { U as UniversalTextProps } from './types-CRqbgWm9.js';
-
-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;
-    variant?: VariantWithInherit;
-    color?: ColorWithInherit;
-} & JSX.IntrinsicElements[TagName] & Omit<UniversalTextProps, 'variant' | 'color'>;
-/**
- * **💬 A text element that can be used to display text**
- *
- * @description
- * By default, the `Text` component uses text primary color and selects the
- * correct font, weight, and leading. It also choices appropriate semantic
- * HTML element based on the `variant` prop. For example, `body1` will use a
- * `<p>` tag, `title1` uses an `<h1>`, etc. This behavior can be overridden
- * with the `as` prop.
- *
- *
- * @example
- * ```tsx
- * import { Text } from '@yahoo/uds';
- *
- * <Text variant="body1" color="primary">
- *   Text goes here
- * </Text>
- * ```
- *
- * @usage
- * - Use `Text` to display text in your app.
- * - Use `variant` to change the size and weight of the text.
- * - Use `color` to change the color of the text.
- * - Use `as` to change the HTML tag used to render the text.
- *
- * @see The {@link https://uds.build/docs/components/text Text Docs} for more info
- */
-declare const Text: react.ForwardRefExoticComponent<(Omit<{
-    /** 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?: TextElementTagName | undefined;
-    variant?: VariantWithInherit;
-    color?: ColorWithInherit;
-} & react.ClassAttributes<HTMLElement> & react.HTMLAttributes<HTMLElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
-    /** 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?: TextElementTagName | undefined;
-    variant?: VariantWithInherit;
-    color?: ColorWithInherit;
-} & react.ClassAttributes<HTMLHeadingElement> & react.HTMLAttributes<HTMLHeadingElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
-    /** 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?: TextElementTagName | undefined;
-    variant?: VariantWithInherit;
-    color?: ColorWithInherit;
-} & react.ClassAttributes<HTMLLabelElement> & react.LabelHTMLAttributes<HTMLLabelElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
-    /** 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?: TextElementTagName | undefined;
-    variant?: VariantWithInherit;
-    color?: ColorWithInherit;
-} & react.ClassAttributes<HTMLLIElement> & react.LiHTMLAttributes<HTMLLIElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
-    /** 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?: TextElementTagName | undefined;
-    variant?: VariantWithInherit;
-    color?: ColorWithInherit;
-} & react.ClassAttributes<HTMLParagraphElement> & react.HTMLAttributes<HTMLParagraphElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
-    /** 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?: TextElementTagName | undefined;
-    variant?: VariantWithInherit;
-    color?: ColorWithInherit;
-} & react.ClassAttributes<HTMLSpanElement> & react.HTMLAttributes<HTMLSpanElement> & Omit<UniversalTextProps, "color" | "variant">, "ref">) & react.RefAttributes<HTMLElement>>;
-
-export { Text as T, type TextProps as a };

package/dist/Text-cfrk-aSz.d.ts

@@ -1,88 +0,0 @@
-import * as react from 'react';
-import { Ref } from 'react';
-import { U as UniversalTextProps } from './types-BAsHl1tU.js';
-
-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;
-    variant?: VariantWithInherit;
-    color?: ColorWithInherit;
-} & JSX.IntrinsicElements[TagName] & Omit<UniversalTextProps, 'variant' | 'color'>;
-/**
- * **💬 A text element that can be used to display text**
- *
- * @description
- * By default, the `Text` component uses text primary color and selects the
- * correct font, weight, and leading. It also choices appropriate semantic
- * HTML element based on the `variant` prop. For example, `body1` will use a
- * `<p>` tag, `title1` uses an `<h1>`, etc. This behavior can be overridden
- * with the `as` prop.
- *
- *
- * @example
- * ```tsx
- * import { Text } from '@yahoo/uds';
- *
- * <Text variant="body1" color="primary">
- *   Text goes here
- * </Text>
- * ```
- *
- * @usage
- * - Use `Text` to display text in your app.
- * - Use `variant` to change the size and weight of the text.
- * - Use `color` to change the color of the text.
- * - Use `as` to change the HTML tag used to render the text.
- *
- * @see The {@link https://uds.build/docs/components/text Text Docs} for more info
- */
-declare const Text: react.ForwardRefExoticComponent<(Omit<{
-    /** 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?: TextElementTagName | undefined;
-    variant?: VariantWithInherit;
-    color?: ColorWithInherit;
-} & react.ClassAttributes<HTMLElement> & react.HTMLAttributes<HTMLElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
-    /** 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?: TextElementTagName | undefined;
-    variant?: VariantWithInherit;
-    color?: ColorWithInherit;
-} & react.ClassAttributes<HTMLHeadingElement> & react.HTMLAttributes<HTMLHeadingElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
-    /** 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?: TextElementTagName | undefined;
-    variant?: VariantWithInherit;
-    color?: ColorWithInherit;
-} & react.ClassAttributes<HTMLLabelElement> & react.LabelHTMLAttributes<HTMLLabelElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
-    /** 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?: TextElementTagName | undefined;
-    variant?: VariantWithInherit;
-    color?: ColorWithInherit;
-} & react.ClassAttributes<HTMLLIElement> & react.LiHTMLAttributes<HTMLLIElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
-    /** 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?: TextElementTagName | undefined;
-    variant?: VariantWithInherit;
-    color?: ColorWithInherit;
-} & react.ClassAttributes<HTMLParagraphElement> & react.HTMLAttributes<HTMLParagraphElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
-    /** 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?: TextElementTagName | undefined;
-    variant?: VariantWithInherit;
-    color?: ColorWithInherit;
-} & react.ClassAttributes<HTMLSpanElement> & react.HTMLAttributes<HTMLSpanElement> & Omit<UniversalTextProps, "color" | "variant">, "ref">) & react.RefAttributes<HTMLElement>>;
-
-export { Text as T, type TextProps as a };

package/dist/VStack-APl_ya0J.d.ts

@@ -1,83 +0,0 @@
-import * as react from 'react';
-import { n as UniversalStackProps, o as UniversalDividerProps } from './types-BAsHl1tU.js';
-import { B as BoxProps, D as DivProps } from './Box-CZiBJY-U.js';
-
-interface DividerCoreProps extends Omit<BoxProps, 'color' | 'borderColor' | 'borderWidth'>, Omit<UniversalStackProps, 'separator' | 'asChild'>, Omit<UniversalDividerProps, 'variant'> {
-    layerClassNames?: {
-        root?: string;
-        text?: string;
-        line?: string;
-    };
-}
-
-type VariantWithInherit = Exclude<UniversalDividerProps['variant'], undefined> | 'inherit';
-interface DividerInternalProps extends DividerCoreProps {
-    variant?: VariantWithInherit;
-}
-
-type DividerProps = Omit<DividerInternalProps, 'layerClassNames'>;
-/**
- * **📦 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 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 { type DividerProps as D, type VStackProps as V, Divider as a, VStack as b };

package/dist/VStack-BZA9jJeV.d.cts

@@ -1,83 +0,0 @@
-import * as react from 'react';
-import { n as UniversalStackProps, o as UniversalDividerProps } from './types-CRqbgWm9.cjs';
-import { B as BoxProps, D as DivProps } from './Box-BrCNYpJf.cjs';
-
-interface DividerCoreProps extends Omit<BoxProps, 'color' | 'borderColor' | 'borderWidth'>, Omit<UniversalStackProps, 'separator' | 'asChild'>, Omit<UniversalDividerProps, 'variant'> {
-    layerClassNames?: {
-        root?: string;
-        text?: string;
-        line?: string;
-    };
-}
-
-type VariantWithInherit = Exclude<UniversalDividerProps['variant'], undefined> | 'inherit';
-interface DividerInternalProps extends DividerCoreProps {
-    variant?: VariantWithInherit;
-}
-
-type DividerProps = Omit<DividerInternalProps, 'layerClassNames'>;
-/**
- * **📦 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 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 { type DividerProps as D, type VStackProps as V, Divider as a, VStack as b };