@yahoo/uds 0.2.2 → 0.4.0

package/dist/index.d.cts

@@ -1,115 +1,36 @@
-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 { D as DivProps } from './VStack-BHlRUsOR.cjs';
+export { B as Box, a as BoxProps, P as Pressable, b as PressableProps, T as Text, c as TextProps, V as VStack, d as VStackProps } from './VStack-BHlRUsOR.cjs';
 import * as react from 'react';
-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 { l as UniversalStackProps, m as UniversalIconProps, k as UniversalImageProps } from './types-COiuE8XK.cjs';
+export { A as AlwaysPalette, o as AlwaysPaletteAlias, p as Animation, q as AriaAttribute, r as AvatarShape, s as AvatarSize, t as AvatarSizeConfig, u as BackgroundColor, v as BackgroundPalette, B as BackgroundPaletteAlias, w as BackgroundStyleProps, x as BorderRadius, y as BorderRadiusConfig, z as BorderStyleProps, D as BorderWidth, E as BorderWidthConfig, G as BoxShadowConfig, I as ButtonSize, J as ButtonVariant, C as ColorMode, K as ColorModeConfig, M as ColorModeForApp, a as ColorsConfig, N as ConfigurableTextProperty, O as CorePalette, c as CorePaletteAlias, P as CustomSizingStyleProps, Q as DataAttribute, R as Display, T as Flex, V as FlexAlignContent, W as FlexAlignItems, X as FlexAlignSelf, Y as FlexBasis, Z as FlexDirection, _ as FlexGrow, $ as FlexJustifyContent, a0 as FlexShrink, a1 as FlexStyleProps, a2 as FlexWrap, a3 as FontFamilyConfig, a4 as FontFamilyGlobalAlias, f as FontFamilyGlobalConfig, a5 as FontSize, a6 as FontSizeConfig, d as FontWeightConfig, a7 as FontWeightDescriptive, e as FontWeightNumeric, a8 as ForegroundColor, a9 as ForegroundPalette, F as ForegroundPaletteAlias, aa as Height, ab as HighContrastMode, H as Hue, b as HueStep, ac as IconName, ad as IconSize, ae as IconSizeConfig, af as ImageStyleProps, ag as LayoutStyleProps, ah as LetterSpacing, ai as LineClampAlias, aj as LineColor, ak as LineHeight, al as LineHeightConfig, am as LinePalette, L as LinePaletteAlias, an as MaxHeight, ao as MaxWidth, ap as MinHeight, aq as MinWidth, ar as Modes, as as Overflow, at as Palette, au as PaletteConfig, av as PaletteType, aw as PaletteValue, ax as PlatformMode, ay as Position, az as RegionMode, aA as ScaleConfig, S as ScaleMode, aB as ScaleModeConfig, aC as ScaleModeForApp, aD as SizingStyleProps, aE as SpacingAlias, aF as SpacingConfig, aG as SpacingStyleProps, aH as SpectrumColor, aI as SpectrumConfig, aJ as StateStyleProps, aK as StyleProps, aL as TextStyleProps, aM as TextTransform, aN as TextTransformConfig, aO as TextVariant, aP as TransitionDelay, aQ as TransitionDuration, aR as TransitionTiming, g as UniversalAvatarProps, aS as UniversalBoxProps, h as UniversalButtonProps, j as UniversalIconButtonProps, i as UniversalPressableProps, aT as UniversalTextInputProps, aU as UniversalTextProps, U as UniversalTokensConfig, aV as Width, n as alwaysPalette } from './types-COiuE8XK.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 { 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-Bm-r2Dpa.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';
 
 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.
+ * HStack is a layout primative that arranges its children in a columns [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
+ * and can be used to compose larger layouts. HStack is similiar to [Box](./box) but provides additional features like a `gap` property to
+ * add spacing between children.
  *
- * 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
- * #### 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
+ * **When to use**
+ * - create a row of items, optionally with gaps between items.
+ * - create columns that are sized to their content.
+ * - create columns that fill the available space within the parent container.
+ * - create columns of proportionate size to each other (also known as a ratio-based layout).
  *
+ * **Basic usage**
  * ```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>
- *   )
- * }
+ * import { HStack, Text } from '@yahoo/uds';
+
+ * <HStack gap="6">
+ *   <Text variant="body1" color="primary">First</Text>
+ *   <Text variant="body1" color="primary">Second</Text>
+ *   <Text variant="body1" color="primary">Third</Text>
+ * </HStack>
  * ```
  **/
 declare const HStack: react.ForwardRefExoticComponent<HStackProps & react.RefAttributes<HTMLDivElement>>;
@@ -121,11 +42,11 @@ interface IconProps extends UniversalIconProps, HtmlSpanProps {
  * Icon are available in an outline and fill variant. Each variant supports
  * three different sizes: small, medium, and large.
  *
- * @example
+ * **Basic usage**
  * ```tsx
  * import { Icon } from "@yahoo/uds";
  *
- * <Icon name="academicCap" size="m" />
+ * <Icon name="academicCap" size="md" color="primary" />
  * ```
  */
 declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<HTMLSpanElement>>;
@@ -143,115 +64,13 @@ interface ImageProps extends NativeImageProps, UniversalImageProps {
  * <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 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'>;
-/**
- * A text element that can be used to display text.
- * @example
-    #### Display1
-
-    Display1 styles are to be used very sparingly. Display styles supersede Title styles, so they are there for when you need to layer on more hierarchy.
-    The default html text element rendered for this variant is `h1`.
-
-    ```tsx
-    import { Text, VStack } from "@yahoo/uds"
-
-    export function Demo() {
-      return (
-        <VStack>
-          <Text variant="display1">Display 1</Text>
-        </VStack>
-      )
-    }
-    ```
-
-    #### Title
-
-    Title styles are used to establish the primary hierarchy in a layout. They should be used to label sections.
-    The default html text element rendered for this variant is `h1` for `title1`, `h2` for `title2`, `h3` for `title3` and `h4` for `headline1`.
-
-    ```tsx
-    import { Text, VStack } from "@yahoo/uds"
-
-    export function Demo() {
-      return (
-        <VStack gap="6">
-          <Text variant="title1">Title 1</Text>
-          <Text variant="title2">Title 2</Text>
-          <Text variant="title3">Title 3</Text>
-        </VStack>
-      )
-    }
-    ```
-
-    #### Headline & Body
-
-    Headline and body styles are your essential content styles. They’re versatile styles that can be used for paragraphs, data, labels for buttons.
-    The default html text element rendered for this variant is `p`.
-
-    ```tsx
-    import { Text, VStack } from "@yahoo/uds"
-
-    export function Demo() {
-      return (
-        <VStack gap="6">
-          <Text variant="headline1">Headline 1</Text>
-          <Text variant="body1">Body 1</Text>
-        </VStack>
-      )
-    }
-    ```
-
-    #### Label & Caption
-
-    Label and caption styles are when you need to add hierarchy in your content. They ideally are used in conjunction with Headline and Body styles, but in extraordinarily dense interfaces they can replace Headline & Body should you need to present large data sets to users. They’re also great candidates for presenting numbers to the user as they have tabular numbers by default.
-    The default html text element rendered for this variant is `p`.
-
-    ```tsx
-    import { Text, VStack } from "@yahoo/uds"
-
-    export function Demo() {
-      return (
-        <VStack gap="6">
-          <Text variant="label1">Label 1</Text>
-          <Text variant="label2">Label 2</Text>
-          <Text variant="caption1">Caption 1</Text>
-          <Text variant="caption2">Caption 2</Text>
-        </VStack>
-      )
-    }
-    ```
-
-    #### Legal
-
-    Legal styles are used for legal disclaimers and fine print.
-    The default html text element rendered for this variant is `p`.
-
-    ```tsx
-    import { Text, VStack } from "@yahoo/uds"
-
-    export function Demo() {
-      return (
-        <VStack>
-          <Text variant="legal1">Legal 1</Text>
-        </VStack>
-      )
-    }
-    ```
- */
-declare const Text: react.ForwardRefExoticComponent<Omit<TextProps<TextElementTagName>, "ref"> & react.RefAttributes<HTMLElement>>;
+declare function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, backgroundColor, 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, 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;
 
 declare const cx: CX<string>;
 declare const cva: CVA<string>;
 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;
+    color?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "transparent" | "white" | "black" | undefined;
+    placeholderColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "transparent" | "white" | "black" | 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;
@@ -274,28 +93,21 @@ declare const getStyles: (props?: ({
     offsetTop?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
     columnGap?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
     rowGap?: "9" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "13" | "14" | "none" | undefined;
-    backgroundColor?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "white" | "black" | "accent-wash" | "alert-wash" | "brand-wash" | "positive-wash" | "warning-wash" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-3-inverse" | "overlay" | undefined;
-    backgroundColorOnActive?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "white" | "black" | "accent-wash" | "alert-wash" | "brand-wash" | "positive-wash" | "warning-wash" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-3-inverse" | "overlay" | undefined;
-    backgroundColorOnHover?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "white" | "black" | "accent-wash" | "alert-wash" | "brand-wash" | "positive-wash" | "warning-wash" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-3-inverse" | "overlay" | undefined;
-    backgroundColorOnChecked?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "white" | "black" | "accent-wash" | "alert-wash" | "brand-wash" | "positive-wash" | "warning-wash" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-3-inverse" | "overlay" | undefined;
-    backgroundColorOnFocus?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "white" | "black" | "accent-wash" | "alert-wash" | "brand-wash" | "positive-wash" | "warning-wash" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-3-inverse" | "overlay" | undefined;
-    elevation?: "1" | "2" | "3" | undefined;
-    opacity?: "0" | "5" | "10" | "100" | "20" | "30" | "40" | "50" | "25" | "60" | "70" | "75" | "80" | "90" | "95" | undefined;
-    borderColor?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | undefined;
-    borderColorOnActive?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | undefined;
-    borderColorOnFocus?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | undefined;
-    borderColorOnHover?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | undefined;
-    borderColorOnChecked?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | undefined;
-    borderStartColor?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | undefined;
-    borderEndColor?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | undefined;
-    borderBottomColor?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | undefined;
-    borderTopColor?: "transparent" | "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "white" | "black" | undefined;
+    backgroundColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "transparent" | "white" | "black" | undefined;
+    borderColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "white" | "black" | undefined;
+    borderColorOnActive?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "white" | "black" | undefined;
+    borderColorOnFocus?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "white" | "black" | undefined;
+    borderColorOnHover?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "white" | "black" | undefined;
+    borderColorOnChecked?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "white" | "black" | undefined;
+    borderStartColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "white" | "black" | undefined;
+    borderEndColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "white" | "black" | undefined;
+    borderBottomColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "white" | "black" | undefined;
+    borderTopColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "white" | "black" | undefined;
     borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
     borderTopStartRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
     borderTopEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
     borderBottomStartRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
     borderBottomEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
-    bordered?: boolean | undefined;
     borderWidth?: "thin" | "medium" | "none" | "thick" | undefined;
     borderVerticalWidth?: "thin" | "medium" | "none" | "thick" | undefined;
     borderHorizontalWidth?: "thin" | "medium" | "none" | "thick" | undefined;
@@ -303,12 +115,6 @@ declare const getStyles: (props?: ({
     borderEndWidth?: "thin" | "medium" | "none" | "thick" | undefined;
     borderTopWidth?: "thin" | "medium" | "none" | "thick" | undefined;
     borderBottomWidth?: "thin" | "medium" | "none" | "thick" | undefined;
-    borderedVertical?: boolean | undefined;
-    borderedTop?: boolean | undefined;
-    borderedBottom?: boolean | undefined;
-    borderedHorizontal?: boolean | undefined;
-    borderedEnd?: boolean | undefined;
-    borderedStart?: boolean | undefined;
     height?: "full" | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "screen" | "min" | "max" | "fit" | undefined;
     minHeight?: "full" | "screen" | "min" | "max" | "fit" | undefined;
     maxHeight?: "none" | "full" | "screen" | "min" | "max" | "fit" | undefined;
@@ -316,7 +122,7 @@ declare const getStyles: (props?: ({
     minWidth?: "full" | "screen" | "min" | "max" | "fit" | undefined;
     maxWidth?: "none" | "full" | "min" | "max" | "fit" | undefined;
     avatarSize?: "s" | "m" | "l" | undefined;
-    iconSize?: "s" | "m" | "l" | undefined;
+    iconSize?: "sm" | "md" | "lg" | undefined;
     alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around" | undefined;
     alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline" | undefined;
     alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline" | undefined;
@@ -328,11 +134,10 @@ declare const getStyles: (props?: ({
     justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | undefined;
     flexBasis?: "min-content" | undefined;
     display?: "grid" | "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" | "contents" | undefined;
-    overflow?: "auto" | "hidden" | "clip" | "visible" | "scroll" | undefined;
-    overflowX?: "auto" | "hidden" | "clip" | "visible" | "scroll" | undefined;
-    overflowY?: "auto" | "hidden" | "clip" | "visible" | "scroll" | undefined;
+    overflow?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
+    overflowX?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
+    overflowY?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
     position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
-    zIndex?: "0" | "10" | "auto" | "20" | "30" | "40" | "50" | undefined;
     contentFit?: "none" | "cover" | "contain" | "fill" | "scale-down" | undefined;
     colorMode?: "light" | "dark" | undefined;
     scaleMode?: "medium" | "xSmall" | "small" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
@@ -340,4 +145,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, cva, cx, getStyles };
+export { HStack, type HStackProps, Icon, type IconProps, Image, type ImageProps, UniversalIconProps, UniversalImageProps, UniversalStackProps, cva, cx, getStyles };