@yahoo/uds 0.1.20 → 0.2.2

package/dist/index.d.cts

@@ -1,397 +1,153 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import { D as DivProps } from './VStack-BSD9TbBd.cjs';
+export { B as Box, a as BoxProps, P as Pressable, b as PressableProps, V as VStack, c as VStackProps } from './VStack-BSD9TbBd.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-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';
+import { Ref } from 'react';
+import { m as UniversalStackProps, p as UniversalIconProps, o as UniversalImageProps, q as UniversalTextProps } from './types-CzJpH_Oi.cjs';
+export { A as AlwaysPalette, s as AlwaysPaletteAlias, t as Animation, u as AriaAttribute, v as AspectRatio, w as AspectRatioConfig, x as AvatarShape, y as AvatarSize, z as AvatarSizeConfig, D as BackgroundColor, B as BackgroundPalette, G as BackgroundPaletteAlias, I as BackgroundStyleProps, d as BackgroundWashPalette, J as BackgroundWashPaletteAlias, K as BorderRadius, M as BorderRadiusConfig, N as BorderStyleProps, O as BorderWidth, Q as BorderWidthConfig, R as BoxShadowConfig, T as ButtonSize, V as ButtonVariant, C as ColorMode, W as ColorModeForApp, a as ColorsConfig, X as ConfigurableTextProperty, c as CorePalette, Y as CorePaletteAlias, Z as CustomSizingStyleProps, _ as DataAttribute, $ as Display, g as Elevation, E as ElevationConfig, a0 as ElevationPaletteAlias, a1 as Flex, a2 as FlexAlignContent, a3 as FlexAlignItems, a4 as FlexAlignSelf, a5 as FlexBasis, a6 as FlexDirection, a7 as FlexGrow, a8 as FlexJustifyContent, a9 as FlexShrink, aa as FlexStyleProps, ab as FlexWrap, ac as FontFamilyConfig, ad as FontFamilyGlobalAlias, h as FontFamilyGlobalConfig, ae as FontSize, af as FontSizeConfig, e as FontWeightConfig, ag as FontWeightDescriptive, f as FontWeightNumeric, ah as ForegroundColor, F as ForegroundPalette, ai as ForegroundPaletteAlias, aj as Height, ak as HighContrastMode, H as Hue, b as HueStep, al as IconName, am as IconSize, an as IconSizeConfig, ao as ImageStyleProps, ap as LayoutStyleProps, aq as LetterSpacing, ar as LineClampAlias, as as LineColor, at as LineHeight, au as LineHeightConfig, L as LinePalette, av as LinePaletteAlias, aw as MaxHeight, ax as MaxWidth, ay as MinHeight, az as MinWidth, aA as Modes, aB as Opacity, aC as OpacityStyleProps, aD as Overflow, aE as Palette, aF as PaletteConfig, aG as PaletteType, P as PaletteValue, aH as PlatformMode, aI as Position, aJ as RegionMode, aK as ScaleConfig, S as ScaleMode, aL as ScaleModeConfig, aM as ScaleModeForApp, aN as SizingStyleProps, aO as SpacingAlias, aP as SpacingConfig, aQ as SpacingStyleProps, aR as SpectrumColor, aS as SpectrumConfig, aT as StateStyleProps, aU as StyleProps, aV as TextStyleProps, aW as TextTransform, aX as TextTransformConfig, aY as TextVariant, aZ as TransitionDelay, a_ as TransitionDuration, a$ as TransitionTiming, i as UniversalAvatarProps, k as UniversalBoxProps, j as UniversalButtonProps, n as UniversalIconButtonProps, l as UniversalPressableProps, b0 as UniversalTextInputProps, U as UniversalTokensConfig, b1 as Width, b2 as ZIndex, b3 as ZIndexConfig, r as alwaysPalette } from './types-CzJpH_Oi.cjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { C as CX, a as CVA } from './types-FO65RM-W.cjs';
+export { S as SetState } from './types-FO65RM-W.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-DJlx-bfM.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';
 
-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, 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 {
-}
-/**
- * Avatar can be used for profile images.
- */
-declare function Avatar({ size: avatarSize, shape: borderRadius, src, alt, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
-
-type DivProps$1 = React.HTMLAttributes<HTMLDivElement>;
-interface BoxProps extends UniversalBoxProps, DivProps$1 {
+interface HStackProps extends UniversalStackProps, DivProps {
 }
 /**
  * A layout primitive that can be used to compose other components.
+ * The HStack is essentially the same component as [Box](/components/box) where it uses [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) to lay content out in a row. Where it differs is HStack also allows for gaps between children via the `gap` prop.
+ *
+ * You should use HStack when:
+ *
+ * - you want to lay content out in columns that are sized to their content
+ * - you want to add gaps between columns
+ * - you want to lay content out in columns that fill the available space within the parent container
+ * - you need columns of proportionate size to each other (also known as a ratio-based layout)
+ *
+ *
  * @example
- ```tsx
-  import { Box } from "@yahoo/uds"
-
-  export function Demo() {
-    return (
-      <Box
-        bordered
-        backgroundColor="primary"
-        borderRadius="md"
-        spacing='6'
-        >
-        Any kind of content can go here!
-      </Box>
-    )
-  }
-  ```
- */
-declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
-
-interface ButtonProps extends PressableProps, UniversalButtonProps {
-}
-/**
- * A button element that can be used to trigger an action.
- * @example
- ```tsx
-  import { Button, HStack } from "@yahoo/uds"
-
-  export function Demo() {
-    return (
-      <HStack gap="2">
-        <Button variant="accent" onClick={console.log}>Save</Button>
-        <Button variant="accent-outline" onClick={console.log}>Cancel</Button>
-      </HStack>
-    )
-  }
- ```
- */
-declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
-
-interface ChipProps {
-    children?: string;
-    startContent?: React.ReactNode;
-    startIcon?: IconName;
-    endIcon?: IconName;
-    endContent?: React.ReactNode;
-    variant: 'accent' | 'secondary';
-}
-declare function Chip({ children, variant, startIcon, startContent, endIcon, endContent, }: ChipProps): react_jsx_runtime.JSX.Element;
-
-interface DropdownProps extends PopoverProviderProps {
-    children: React.ReactNode;
-}
-declare const Dropdown: typeof _ariakit_react.PopoverProvider;
-
-interface DropdownItemProps extends DropdownItemPressableProps {
-    startIcon?: IconName;
-    endIcon?: IconName;
-    title?: string;
-    description?: string;
-    _title?: UniversalTextProps;
-    _description?: UniversalTextProps;
-}
-declare function DropdownItem({ title, description, _title, _description, startIcon, endIcon, ...props }: DropdownItemProps): react_jsx_runtime.JSX.Element;
-
-interface DropdownItemPressableProps extends Omit<PressableProps, 'onClick'> {
-    onClick?: (close: () => void) => void;
-}
-declare const DropdownItemPressable: react.ForwardRefExoticComponent<DropdownItemPressableProps & react.RefAttributes<HTMLButtonElement>>;
-
-interface DropdownItemsProps extends React.PropsWithChildren, Omit<PopoverProps, 'children'> {
-    overflow?: Overflow;
-}
-declare const DropdownItems: react.ForwardRefExoticComponent<Omit<DropdownItemsProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-
-interface DropdownTriggerProps extends PressableProps {
-    children: React.ReactNode;
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-}
-declare function DropdownTrigger({ children, variant, size, ...props }: DropdownTriggerProps): react_jsx_runtime.JSX.Element;
-
-interface HStackProps extends UniversalStackProps, DivProps$1 {
-}
-/**
- * @example
-  A layout primitive that can be used to compose other components.
-  The HStack is essentially the same component as [Box](/components/box) where it uses [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) to lay content out in a row. Where it differs is HStack also allows for gaps between children via the `gap` prop.
-
-  You should use HStack when:
-
-  - you want to lay content out in columns that are sized to their content
-  - you want to add gaps between columns
-  - you want to lay content out in columns that fill the available space within the parent container
-  - you need columns of proportionate size to each other (also known as a ratio-based layout)
-
-
-  #### Columns Sized to Content
-
-  ```tsx
-  import { Box, HStack } from "@yahoo/uds"
-
-  export function Demo() {
-  return (
-      <HStack>
-        <Box spacing="6" backgroundColor="secondary">
-          First
-        </Box>
-        <Box spacing="6" backgroundColor="secondary">
-          Second
-        </Box>
-        <Box spacing="6" backgroundColor="secondary">
-          Third
-        </Box>
-      </HStack>
-    )
-  }
-  ```
-
-  #### Columns with Gaps
-
-  ```tsx
-  import { Box, HStack } from "@yahoo/uds"
-
-  export function Demo() {
-    return (
-      <HStack gap="1">
-        <Box spacing="6" backgroundColor="secondary">
-          First
-        </Box>
-        <Box spacing="6" backgroundColor="secondary">
-          Second
-        </Box>
-        <Box spacing="6" backgroundColor="secondary">
-          Third
-        </Box>
-      </HStack>
-    )
-  }
-  ```
-
-  #### Columns that Fill the Available Space
-
-  ```tsx
-  import { Box, HStack } from "@yahoo/uds"
-
-  export function Demo() {
-    return (
-      <HStack gap="1">
-        <Box spacing="6" flexGrow="1" backgroundColor="secondary">
-          First
-        </Box>
-        <Box spacing="6" flexGrow="1" backgroundColor="secondary">
-          Second
-        </Box>
-        <Box spacing="6" flexGrow="1" backgroundColor="secondary">
-          Third
-        </Box>
-      </HStack>
-    )
-  ```
-
-  #### Columns that Have Proportionate Sizes
-
-  ```tsx
-  import { Box, HStack } from "@yahoo/uds"
-
-  export function Demo() {
-    return (
-      <HStack gap="1">
-        <Box spacing="6" flexGrow="1" backgroundColor="secondary">
-          First
-        </Box>
-        <Box spacing="6" flexGrow="2" backgroundColor="secondary">
-          Second
-        </Box>
-        <Box spacing="6" flexGrow="3" backgroundColor="secondary">
-          Third
-        </Box>
-      </HStack>
-    )
-  }
-  ```
- */
+ * #### Columns Sized to Content
+ *
+ * ```tsx
+ * import { Box, HStack } from "@yahoo/uds"
+ *
+ * export function Demo() {
+ * return (
+ *     <HStack>
+ *       <Box spacing="6" backgroundColor="secondary">
+ *         First
+ *       </Box>
+ *       <Box spacing="6" backgroundColor="secondary">
+ *         Second
+ *       </Box>
+ *       <Box spacing="6" backgroundColor="secondary">
+ *         Third
+ *       </Box>
+ *     </HStack>
+ *   )
+ * }
+ * ```
+ *
+ * #### Columns with Gaps
+ *
+ * ```tsx
+ * import { Box, HStack } from "@yahoo/uds"
+ *
+ * export function Demo() {
+ *   return (
+ *     <HStack gap="1">
+ *       <Box spacing="6" backgroundColor="secondary">
+ *         First
+ *       </Box>
+ *       <Box spacing="6" backgroundColor="secondary">
+ *         Second
+ *       </Box>
+ *       <Box spacing="6" backgroundColor="secondary">
+ *         Third
+ *       </Box>
+ *     </HStack>
+ *   )
+ * }
+ * ```
+ *
+ * #### Columns that Fill the Available Space
+ *
+ * ```tsx
+ * import { Box, HStack } from "@yahoo/uds"
+ *
+ * export function Demo() {
+ *   return (
+ *     <HStack gap="1">
+ *       <Box spacing="6" flexGrow="1" backgroundColor="secondary">
+ *         First
+ *       </Box>
+ *       <Box spacing="6" flexGrow="1" backgroundColor="secondary">
+ *         Second
+ *       </Box>
+ *       <Box spacing="6" flexGrow="1" backgroundColor="secondary">
+ *         Third
+ *       </Box>
+ *     </HStack>
+ *   )
+ * ```
+ *
+ * #### Columns that Have Proportionate Sizes
+ *
+ * ```tsx
+ * import { Box, HStack } from "@yahoo/uds"
+ *
+ * export function Demo() {
+ *   return (
+ *     <HStack gap="1">
+ *       <Box spacing="6" flexGrow="1" backgroundColor="secondary">
+ *         First
+ *       </Box>
+ *       <Box spacing="6" flexGrow="2" backgroundColor="secondary">
+ *         Second
+ *       </Box>
+ *       <Box spacing="6" flexGrow="3" backgroundColor="secondary">
+ *         Third
+ *       </Box>
+ *     </HStack>
+ *   )
+ * }
+ * ```
+ **/
 declare const HStack: react.ForwardRefExoticComponent<HStackProps & react.RefAttributes<HTMLDivElement>>;
 
 type HtmlSpanProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>;
 interface IconProps extends UniversalIconProps, HtmlSpanProps {
 }
 /**
- * For an icon to render, it requires a unique name that maps to an upstream asset in Figma (this will autocomplete when using TypeScript), and a target size (s, m, l).
-
-@example
-  ```tsx
-  import { Icon } from "@yahoo/uds"
-
-  export function Demo() {
-   return <Icon name="academicCap" size="m" />
-  }
-  ```
- */
-declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<HTMLSpanElement>>;
-
-interface IconButtonProps extends PressableProps, UniversalIconButtonProps {
-    color?: ForegroundColor;
-}
-/**
- * An icon button element that can be used to trigger an action.
+ * Icon are available in an outline and fill variant. Each variant supports
+ * three different sizes: small, medium, and large.
+ *
  * @example
- ```tsx
-  import { IconButton } from "@yahoo/uds"
-
-  export function IconButtonDemo() {
-    return (
-      <IconButton variant="accent-outline" name="close" onPress={console.log} />
-    )
-  }
- ```
+ * ```tsx
+ * import { Icon } from "@yahoo/uds";
+ *
+ * <Icon name="academicCap" size="m" />
+ * ```
  */
-declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<HTMLSpanElement>>;
 
 type NativeImageProps = Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'size' | 'color' | 'height' | 'width' | 'alt' | 'src'>;
 interface ImageProps extends NativeImageProps, UniversalImageProps {
 }
 /**
- * An image element with a fallback for representing the user.
+ * Wrapper for the image element. In the future, may provide additional
+ * functionality for handling fallbacks, dark mode, lazy loading, shimmers.
+ * @example
+ * ```tsx
+ * import { Image } from '@yahoo/uds';
+ *
+ * <Image src="/images/profile.png" width={580} height={334} />;
+ * ```
  */
 declare function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, elevation, backgroundColor, backgroundColorOnActive, backgroundColorOnHover, backgroundColorOnChecked, opacity, bordered, borderedTop, borderedBottom, borderedStart, borderedEnd, borderedHorizontal, borderedVertical, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderColorOnActive, borderColorOnFocus, borderColorOnChecked, borderColorOnHover, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, zIndex, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, minHeight, maxHeight, minWidth, maxWidth, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
 
-interface ModalProps extends DialogProps {
-}
-declare function useModalStore(params?: Parameters<typeof useDialogStore>[0]): DialogStore;
-interface ModalHeaderProps extends React.PropsWithChildren {
-    handleClose?: () => void;
-}
-declare function ModalHeader({ children, handleClose }: ModalHeaderProps): react_jsx_runtime.JSX.Element;
-declare function Modal({ className, ...props }: ModalProps): react_jsx_runtime.JSX.Element;
-declare const ModalDismiss: typeof DialogDismiss;
-
-interface PopoverHeadingProps extends PropsWithChildren {
-    leading?: react__default.ReactNode;
-    trailing?: react__default.ReactNode;
-}
-declare function PopoverHeading({ children, leading, trailing }: PopoverHeadingProps): react_jsx_runtime.JSX.Element;
-declare const Popover: typeof Popover$1;
-declare const PopoverArrow: typeof PopoverArrow$1;
-declare const PopoverAnchor: typeof PopoverAnchor$1;
-declare const PopoverDescription: typeof PopoverDescription$1;
-declare const PopoverDismiss: typeof PopoverDismiss$1;
-declare const PopoverProvider: typeof PopoverProvider$1;
-declare const PopoverDisclosure: typeof PopoverDisclosure$1;
-declare const PopoverDisclosureArrow: typeof PopoverDisclosureArrow$1;
-
-type DivProps = React.HTMLAttributes<HTMLDivElement>;
-interface SpinnerProps extends DivProps {
-}
-declare function Spinner({ className, ...props }: SpinnerProps): react_jsx_runtime.JSX.Element;
-
-/**
- * TableColumn
- * A TableColumn is a definition of a column in a table.
- */
-type TableColumn<T> = {
-    title?: string;
-    dataIndex: keyof T;
-    render?: (value: T[keyof T], record: T, index: number) => react__default.ReactNode;
-};
-interface HTMLTableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'color' | 'height' | 'width'> {
-}
-interface TableCellProps extends UniversalTextProps, HTMLTableCellProps {
-    /** asHeaderCell will return a th element instead of a td element.
-     *  If asHeaderCell is row, it will return a th element with scope="row"
-     *  @default false
-     */
-    asHeaderCell?: boolean | 'column' | 'row';
-}
-/**
- * Table component props
- * @template T The type of data in the table.
- */
-type TableProps<T> = {
-    /** An array of data for the table. Each item represents a row in the table.
-     * The keys of each item should match the `dataIndex` of the columns.
-     */
-    data: T[];
-    /** An array of columns for the table. Each item defines a column in the table.
-     * The `dataIndex` should match the key of the data item.
-     */
-    columns: TableColumn<T>[];
-};
-/**
- * The Table component renders a table with the given data and columns.
- * If you want more control over the table, or want to handle virtualization,
- * drag-n-drop, etc, Please can use the sub-components directly and build your own!
- */
-declare function Table<T>({ data, columns }: TableProps<T>): react_jsx_runtime.JSX.Element;
-declare namespace Table {
-    var Root: react__default.ForwardRefExoticComponent<react__default.TableHTMLAttributes<HTMLTableElement> & BoxProps & {
-        /** 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.
-         *  @default "table"
-         */
-        display?: Display | undefined;
-    } & {
-        children?: react__default.ReactNode;
-    } & react__default.RefAttributes<HTMLTableElement>>;
-    var Row: react__default.ForwardRefExoticComponent<react__default.HTMLAttributes<HTMLTableRowElement> & BoxProps & {
-        children?: react__default.ReactNode;
-    } & react__default.RefAttributes<HTMLTableRowElement>>;
-    var Header: react__default.ForwardRefExoticComponent<react__default.HTMLAttributes<HTMLTableSectionElement> & BoxProps & {
-        children?: react__default.ReactNode;
-    } & react__default.RefAttributes<HTMLTableSectionElement>>;
-    var Body: react__default.ForwardRefExoticComponent<react__default.HTMLAttributes<HTMLTableSectionElement> & BoxProps & {
-        children?: react__default.ReactNode;
-    } & react__default.RefAttributes<HTMLTableSectionElement>>;
-    var Cell: react__default.ForwardRefExoticComponent<TableCellProps & {
-        children?: react__default.ReactNode;
-    } & react__default.RefAttributes<HTMLTableCellElement | HTMLTableHeaderCellElement>>;
-}
-
-interface TabProps extends React.PropsWithChildren {
-    asChild?: boolean;
-    value: string;
-    label: string;
-    startIcon?: IconName;
-}
-declare function Tabs(props: TabProviderProps): react_jsx_runtime.JSX.Element;
-declare const TabList: react.ForwardRefExoticComponent<Omit<TabListProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-declare const Tab: ({ asChild, label, value, startIcon }: TabProps) => react_jsx_runtime.JSX.Element;
-declare const TabPanel: react.ForwardRefExoticComponent<Omit<TabPanelProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-
-type TextElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'span' | 'label' | 'li';
-type TextProps<As extends TextElement = TextElement> = UniversalTextProps & {
+type TextElementTagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'span' | 'label' | 'li';
+type TextProps<As extends TextElementTagName = TextElementTagName> = UniversalTextProps & {
+    ref?: Ref<HTMLElement>;
     as?: As;
 } & Omit<JSX.IntrinsicElements[As], 'color'>;
 /**
@@ -488,85 +244,7 @@ type TextProps<As extends TextElement = TextElement> = UniversalTextProps & {
     }
     ```
  */
-declare const Text: react.ForwardRefExoticComponent<Omit<TextProps<TextElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
-
-type NativeTextInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'height' | 'size' | 'width' | 'color'>;
-interface TextInputProps extends NativeTextInputProps, UniversalTextInputProps {
-}
-declare function TextInput({ className, disabled, backgroundColor, borderColor, borderWidth, borderRadius, color, placeholderColor, spacingVertical, spacingHorizontal, fontSize: textVariant, ...props }: TextInputProps): react_jsx_runtime.JSX.Element;
-
-interface TextInputGroupProps extends TextInputProps {
-    label?: string;
-}
-declare function TextInputGroup({ label, required, ...props }: TextInputGroupProps): react_jsx_runtime.JSX.Element;
-
-interface TextInputLabelProps extends React.PropsWithChildren {
-    required?: boolean;
-}
-declare function TextInputLabel({ children, required }: TextInputLabelProps): react_jsx_runtime.JSX.Element;
-
-interface ToastProps extends ToastContainerProps {
-}
-declare function ToastContainer(props: ToastProps): react_jsx_runtime.JSX.Element;
-
-type VStackProps = UniversalStackProps & DivProps$1;
-/**
- * @example
-  The VStack is essentially the same component as [Box](/components/box) where it uses [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) but it lays out content in a column. VStack also allows for gaps between children via the `gap` prop.
-
-  You should use VStack when:
-
-  - you want to lay content out in rows that are sized to their content (height only, by default each child will fill the width of the VStack)
-  - you want to add gaps between columns
-  - you want to lay content out in columns that fill the available space within the parent container
-  - you need columns of proportionate size to each other (also known as a ratio-based layout)
-
-  #### Rows with Gaps
-
-  ```tsx
-    import { Box, VStack } from "@yahoo/uds"
-
-    export function Demo() {
-      return (
-        <VStack gap="6">
-          <Box spacing="6" backgroundColor="secondary">
-            First
-          </Box>
-          <Box spacing="6" backgroundColor="secondary">
-            Second
-          </Box>
-          <Box spacing="6" backgroundColor="secondary">
-            Third
-          </Box>
-        </VStack>
-      )
-    }
-  ```
-
-  #### Rows that Have Proportionate Sizes
-
-  ```tsx
-      import { Box, VStack } from "@yahoo/uds"
-
-    export function Demo() {
-      return (
-        <VStack gap="6">
-          <Box spacing="6" flexGrow="1" backgroundColor="secondary">
-            First
-          </Box>
-          <Box spacing="6" flexGrow="2" backgroundColor="secondary">
-            Second
-          </Box>
-          <Box spacing="6" flexGrow="3" backgroundColor="secondary">
-            Third
-          </Box>
-        </VStack>
-      )
-    }
-  ```
-
- */
-declare const VStack: react.ForwardRefExoticComponent<UniversalStackProps & DivProps$1 & react.RefAttributes<HTMLDivElement>>;
+declare const Text: react.ForwardRefExoticComponent<Omit<TextProps<TextElementTagName>, "ref"> & react.RefAttributes<HTMLElement>>;
 
 declare const cx: CX<string>;
 declare const cva: CVA<string>;
@@ -574,12 +252,12 @@ declare const getStyles: (props?: ({
     color?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "white" | "black" | undefined;
     colorChecked?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "white" | "black" | undefined;
     placeholderColor?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "white" | "black" | undefined;
-    fontFamily?: "display1" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | "icons" | "sans" | "sans-beta" | "sans-condensed" | "serif-text" | "serif-display" | undefined;
-    fontSize?: "display1" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | undefined;
-    fontWeight?: "bold" | "black" | "display1" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | "thin" | "extralight" | "light" | "regular" | "medium" | "semibold" | "extrabold" | undefined;
-    lineHeight?: "display1" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | undefined;
+    fontFamily?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | "icons" | "sans" | "sans-beta" | "sans-condensed" | "serif-text" | "serif-display" | undefined;
+    fontSize?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | undefined;
+    fontWeight?: "bold" | "black" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | "thin" | "extralight" | "light" | "regular" | "medium" | "semibold" | "extrabold" | undefined;
+    lineHeight?: "display1" | "display2" | "display3" | "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;
+    textTransform?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | "none" | "uppercase" | "lowercase" | "capitalize" | 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;
@@ -662,4 +340,4 @@ declare const getStyles: (props?: ({
     className?: string | undefined;
 }) | undefined) => string;
 
-export { Accordion, type AccordionProps, Avatar, type AvatarProps, Box, type BoxProps, Button, type ButtonProps, ButtonSize, ButtonVariant, Chip, type ChipProps, Display, Dropdown, DropdownItem, DropdownItemPressable, type DropdownItemPressableProps, type DropdownItemProps, DropdownItems, type DropdownItemsProps, type DropdownProps, DropdownTrigger, type DropdownTriggerProps, ForegroundColor, HStack, type HStackProps, Icon, IconButton, type IconButtonProps, IconName, type IconProps, Image, type ImageProps, Modal, ModalDismiss, ModalHeader, type ModalProps, Overflow, Popover, PopoverAnchor, PopoverArrow, PopoverDescription, PopoverDisclosure, PopoverDisclosureArrow, PopoverDismiss, PopoverHeading, type PopoverHeadingProps, PopoverProvider, Pressable, type PressableProps, Spinner, type SpinnerProps, Tab, TabList, TabPanel, type TabProps, Table, type TableProps, Tabs, Text, TextInput, TextInputGroup, type TextInputGroupProps, TextInputLabel, type TextInputLabelProps, type TextInputProps, type TextProps, ToastContainer, UniversalAvatarProps, UniversalBoxProps, UniversalButtonProps, UniversalIconButtonProps, UniversalIconProps, UniversalImageProps, UniversalPressableProps, UniversalStackProps, UniversalTextInputProps, UniversalTextProps, VStack, type VStackProps, cva, cx, getStyles, useModalStore };
+export { HStack, type HStackProps, Icon, type IconProps, Image, type ImageProps, Text, type TextProps, UniversalIconProps, UniversalImageProps, UniversalStackProps, UniversalTextProps, cva, cx, getStyles };