@yahoo/uds 0.2.0 → 0.3.0

package/dist/index.d.ts

@@ -1,132 +1,132 @@
-import { D as DivProps } from './Pressable-LIDkIIAF.js';
-export { B as Box, a as BoxProps, P as Pressable, b as PressableProps } from './Pressable-LIDkIIAF.js';
+import { D as DivProps } from './VStack-Dk3-8IyU.js';
+export { B as Box, a as BoxProps, P as Pressable, b as PressableProps, V as VStack, c as VStackProps } from './VStack-Dk3-8IyU.js';
 import * as react from 'react';
-import { o as UniversalStackProps, p as UniversalIconProps, n as UniversalImageProps, q as UniversalTextProps } from './types-7oEBWtMQ.js';
-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, k as UniversalAvatarProps, i as UniversalBoxProps, l as UniversalButtonProps, m as UniversalIconButtonProps, j as UniversalPressableProps, b0 as UniversalTextInputProps, U as UniversalTokensConfig, b1 as Width, b2 as ZIndex, b3 as ZIndexConfig, r as alwaysPalette } from './types-7oEBWtMQ.js';
+import { Ref } from 'react';
+import { m as UniversalStackProps, p as UniversalIconProps, o as UniversalImageProps, q as UniversalTextProps } from './types-CzJpH_Oi.js';
+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.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CX, a as CVA } from './types-J4DLS6Xj.js';
-export { S as SetState } from './types-J4DLS6Xj.js';
-export { c as DEFAULT_COLOR_MODE, D as DEFAULT_COLOR_MODE_FOR_APP, g as DEFAULT_HIGH_CONTRAST_MODE, h as DEFAULT_REGION_MODE, e as DEFAULT_SCALE_MODE, b as DEFAULT_SCALE_MODE_FOR_APP, d as defaultTokensConfig, f as fontFamilyGlobal, a as fontWeightMap } from './index.native-xVHqKK0u.js';
+import { C as CX, a as CVA } from './types-FO65RM-W.js';
+export { S as SetState } from './types-FO65RM-W.js';
+export { c as DEFAULT_COLOR_MODE, D as DEFAULT_COLOR_MODE_FOR_APP, g as DEFAULT_HIGH_CONTRAST_MODE, h as DEFAULT_REGION_MODE, e as DEFAULT_SCALE_MODE, b as DEFAULT_SCALE_MODE_FOR_APP, d as defaultTokensConfig, f as fontFamilyGlobal, a as fontWeightMap } from './index.native-CisPq4BI.js';
 export { AVATAR_SIZE_PREFIX, BORDER_RADIUS_PREFIX, BORDER_WIDTH_PREFIX, DARK_COLOR_MODE_CLASSNAME, DEFAULT_COLOR_MODE_CLASSNAME, DEFAULT_SCALE_MODE_CLASSNAME, FONT_FAMILY_PREFIX, FONT_ICONS_CSS_VAR, FONT_SANS_BETA_CSS_VAR, FONT_SANS_CONDENSED_CSS_VAR, FONT_SANS_CSS_VAR, FONT_SERIF_DISPLAY_CSS_VAR, FONT_SERIF_TEXT_CSS_VAR, FONT_SIZE_PREFIX, FONT_WEIGHT_PREFIX, ICON_SIZE_PREFIX, LARGE_SCALE_MODE_CLASSNAME, LIGHT_COLOR_MODE_CLASSNAME, LINE_HEIGHT_PREFIX, MEDIUM_SCALE_MODE_CLASSNAME, SMALL_SCALE_MODE_CLASSNAME, SPACING_PREFIX, SPECTRUM_COLOR_PREFIX, TEXT_TRANSFORM_PREFIX, UDS_PREFIX, XLARGE_SCALE_MODE_CLASSNAME, XSMALL_SCALE_MODE_CLASSNAME, XXLARGE_SCALE_MODE_CLASSNAME, XXXLARGE_SCALE_MODE_CLASSNAME, entries } from './tokens/index.js';
 
 interface 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
-  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" />
-  }
-  ```
+ * Icon are available in an outline and fill variant. Each variant supports
+ * three different sizes: small, medium, and large.
+ *
+ * @example
+ * ```tsx
+ * import { Icon } from "@yahoo/uds";
+ *
+ * <Icon name="academicCap" size="m" />
+ * ```
  */
 declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<HTMLSpanElement>>;
 
@@ -134,12 +134,20 @@ type NativeImageProps = Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'size' |
 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;
 
-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'>;
 /**
@@ -236,66 +244,7 @@ type TextProps<As extends TextElement = TextElement> = UniversalTextProps & {
     }
     ```
  */
-declare const Text: react.ForwardRefExoticComponent<Omit<TextProps<TextElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
-
-type VStackProps = UniversalStackProps & DivProps;
-/**
- * @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 & 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>;
@@ -303,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;
@@ -391,4 +340,4 @@ declare const getStyles: (props?: ({
     className?: string | undefined;
 }) | undefined) => string;
 
-export { HStack, type HStackProps, Icon, type IconProps, Image, type ImageProps, Text, type TextProps, UniversalIconProps, UniversalImageProps, UniversalStackProps, UniversalTextProps, VStack, type VStackProps, cva, cx, getStyles };
+export { HStack, type HStackProps, Icon, type IconProps, Image, type ImageProps, Text, type TextProps, UniversalIconProps, UniversalImageProps, UniversalStackProps, UniversalTextProps, cva, cx, getStyles };