@yahoo/uds 3.59.0-beta.1 → 3.59.0

package/dist/Text-1qIcMDEP.d.cts

@@ -0,0 +1,297 @@
+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;
+    /** Letter spacing of the text */
+    letterSpacing?: 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-1qIcMDEP.d.ts

@@ -0,0 +1,297 @@
+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;
+    /** Letter spacing of the text */
+    letterSpacing?: 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 };