@yahoo/uds 0.5.11 → 1.0.0-beta.0

package/dist/index.d.cts

@@ -1,11 +1,41 @@
-import { D as DivProps } from './VStack-BFIFJUVx.cjs';
-export { B as Box, a as BoxProps, I as Icon, b as IconProps, P as Pressable, c as PressableProps, T as Text, d as TextProps, V as VStack, e as VStackProps } from './VStack-BFIFJUVx.cjs';
 import * as react from 'react';
-import { Dispatch, SetStateAction } from 'react';
-import { g as UniversalStackProps, h as UniversalImageProps } from './types-BofdnBTe.cjs';
-export { A as AlwaysPalette, j as AlwaysPaletteAlias, k as Animation, l as AriaAttribute, m as AvatarShape, n as AvatarSize, o as AvatarSizeConfig, p as BackgroundColor, q as BackgroundPalette, B as BackgroundPaletteAlias, r as BackgroundStyleProps, s as BorderRadius, t as BorderRadiusConfig, u as BorderStyleProps, v as BorderWidth, w as BorderWidthConfig, x as BoxShadowConfig, y as ButtonBaseConfig, z as ButtonCategory, D as ButtonColorConfig, E as ButtonColorEffect, G as ButtonColorEffectConfig, I as ButtonColorProperty, J as ButtonColorPropertyConfig, K as ButtonConfig, M as ButtonKind, N as ButtonSize, O as ButtonSpecrtumColor, P as ButtonState, Q as ButtonStateConfig, R as ButtonStateEffectConfig, T as ButtonVariant, V as ButtonVariant2, C as ColorMode, W as ColorModeConfig, X as ColorModeForApp, a as ColorsConfig, Y as ConfigurableTextProperty, Z as CorePalette, c as CorePaletteAlias, _ as CustomSizingStyleProps, $ as DataAttribute, a0 as Display, 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, f as FontFamilyGlobalConfig, ae as FontSize, af as FontSizeConfig, d as FontWeightConfig, ag as FontWeightDescriptive, e as FontWeightNumeric, ah as ForegroundColor, ai as ForegroundPalette, F as ForegroundPaletteAlias, aj as HighContrastMode, H as Hue, b as HueStep, ak as IconSize, al as IconSizeConfig, am as ImageStyleProps, an as LayoutStyleProps, ao as LetterSpacing, ap as LineClampAlias, aq as LineColor, ar as LineHeight, as as LineHeightConfig, at as LinePalette, L as LinePaletteAlias, au as Modes, av as Overflow, aw as Palette, ax as PaletteConfig, ay as PaletteType, az as PaletteValue, aA as PlatformMode, aB as Position, aC as PropertyToPaletteAliasMap, aD as RegionMode, aE as ScaleConfig, S as ScaleMode, aF as ScaleModeConfig, aG as ScaleModeForApp, aH as SpacingAlias, aI as SpacingConfig, aJ as SpacingStyleProps, aK as SpectrumColor, aL as SpectrumConfig, aM as StateStyleProps, aN as StyleProps, aV as TShirtSize, aW as TShirtSizeCommon, aO as TextStyleProps, aP as TextTransform, aQ as TextTransformConfig, aR as TextVariant, aS as TransitionDelay, aT as TransitionDuration, aU as TransitionTiming, aX as UniversalAvatarProps, aY as UniversalBoxProps, aZ as UniversalButtonProps, a_ as UniversalIconButtonProps, a$ as UniversalIconProps, b0 as UniversalPressableProps, b1 as UniversalTextInputProps, b2 as UniversalTextProps, U as UniversalTokensConfig, i as alwaysPalette } from './types-BofdnBTe.cjs';
+import { Ref, Dispatch, SetStateAction } from 'react';
+import { p as UniversalBoxProps, q as UniversalStackProps, r as UniversalIconProps, s as UniversalImageProps, t as UniversalPressableProps, u as UniversalTextProps } from './types-JTm5E7im.cjs';
+export { A as AVATAR_SIZE_PREFIX, a4 as AlwaysPalette, a5 as AlwaysPaletteAlias, a6 as Animation, a7 as AriaAttribute, a8 as AvatarShape, a9 as AvatarSize, aa as AvatarSizeConfig, x as BORDER_RADIUS_PREFIX, y as BORDER_WIDTH_PREFIX, a0 as BUTTON_CSS_VAR_MAP, ab as BackgroundColor, ac as BackgroundPalette, ad as BackgroundPaletteAlias, ae as BackgroundStyleProps, af as BorderRadius, ag as BorderRadiusConfig, ah as BorderStyleProps, ai as BorderWidth, aj as BorderWidthConfig, ak as BoxShadowConfig, al as ButtonBaseConfig, h as ButtonClassMap, am as ButtonClassName, an as ButtonColorConfig, ao as ButtonColorEffect, ap as ButtonColorEffectConfig, i as ButtonColorProperty, j as ButtonColorPropertyConfig, B as ButtonConfig, aq as ButtonKind, ar as ButtonMotionEffect, as as ButtonMotionProperty, at as ButtonMotionPropertyConfig, au as ButtonPalette, av as ButtonPaletteColor, aw as ButtonPaletteConfig, ax as ButtonSize, ay as ButtonSizeConfig, az as ButtonSizeProperty, aA as ButtonSpectrumColor, aB as ButtonState, aC as ButtonStateConfig, aD as ButtonStateEffectConfig, aE as ButtonVariant, aF as ButtonVariantConfig, C as ColorMode, aG as ColorModeConfig, aH as ColorModeForApp, a as ColorsConfig, aI as CorePalette, aJ as CorePaletteAlias, aK as CustomSizingStyleProps, N as DARK_COLOR_MODE_CLASSNAME, _ as DEFAULT_COLOR_MODE_CLASSNAME, $ as DEFAULT_SCALE_MODE_CLASSNAME, aL as DataAttribute, aM as Display, a3 as FONT_DECLARATIONS_MAP, z as FONT_FAMILY_PREFIX, D as FONT_SIZE_PREFIX, E as FONT_WEIGHT_PREFIX, aN as Flex, aO as FlexAlignContent, aP as FlexAlignItems, aQ as FlexAlignSelf, aR as FlexBasis, aS as FlexDirection, aT as FlexGrow, aU as FlexJustifyContent, aV as FlexShrink, aW as FlexStyleProps, aX as FlexWrap, aY as FontAlias, m as FontConfig, aZ as FontCssVar, l as FontDeclarationConfig, a_ as FontFamilyCDNUrl, a$ as FontFamilyConfig, k as FontID, b0 as FontSize, b1 as FontSizeConfig, b2 as FontType, F as FontWeightConfig, b3 as FontWeightDescriptive, d as FontWeightNumeric, b4 as ForegroundColor, b5 as ForegroundPalette, b6 as ForegroundPaletteAlias, b7 as HighContrastMode, H as Hue, b as HueStep, a1 as ICON_BUTTON_CSS_VAR_MAP, G as ICON_SIZE_PREFIX, I as IconButtonClassMap, b8 as IconButtonClassName, b9 as IconButtonConfig, ba as IconButtonDefaultsConfig, bb as IconButtonSize, bc as IconSize, bd as IconSizeConfig, be as IconVariant, bf as ImageStyleProps, V as LARGE_SCALE_MODE_CLASSNAME, O as LIGHT_COLOR_MODE_CLASSNAME, L as LINE_HEIGHT_PREFIX, bg as LayoutStyleProps, bh as LetterSpacing, bi as LineClampAlias, bj as LineColor, bk as LineHeight, bl as LineHeightConfig, bm as LinePalette, bn as LinePaletteAlias, R as MEDIUM_SCALE_MODE_CLASSNAME, J as MOTION_PREFIX, bo as Modes, o as MotionConfig, bp as MotionCssVar, bq as MotionSpringConfig, n as MotionSpringConfigOptions, M as MotionVariant, g as MotionVariantSpeed, br as MotionVariantValues, bs as Overflow, a2 as PSEUDO_STYLE_SELECTOR_MAP, bt as Palette, c as PaletteConfig, P as PaletteType, bu as PaletteValue, bv as PlatformMode, bw as Position, bx as PropertyToPaletteAliasMap, by as RegionMode, Q as SMALL_SCALE_MODE_CLASSNAME, K as SPECTRUM_COLOR_PREFIX, bz as ScaleConfig, bA as ScaleEffectMap, S as ScaleMode, bB as ScaleModeConfig, bC as ScaleModeForApp, bD as SpacingAlias, bE as SpacingConfig, bF as SpacingStyleProps, bG as SpectrumColor, bH as SpectrumConfig, bI as StateStyleProps, bJ as StyleProps, T as TEXT_TRANSFORM_PREFIX, bS as TShirtSize, bT as TShirtSizeCommon, bK as TextProperty, bL as TextStyleProps, bM as TextTransform, bN as TextTransformConfig, bO as TextVariant, bP as TransitionDelay, bQ as TransitionDuration, bR as TransitionTiming, w as UDS_PREFIX, bU as UdsCssVar, bV as UniversalAvatarProps, e as UniversalButtonProps, f as UniversalIconButtonProps, bW as UniversalTextInputProps, U as UniversalTokensConfig, W as XLARGE_SCALE_MODE_CLASSNAME, X as XSMALL_SCALE_MODE_CLASSNAME, Y as XXLARGE_SCALE_MODE_CLASSNAME, Z as XXXLARGE_SCALE_MODE_CLASSNAME, v as alwaysPalette } from './types-JTm5E7im.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-export { AVATAR_SIZE_PREFIX, BORDER_RADIUS_PREFIX, BORDER_WIDTH_PREFIX, BUTTON_CSS_VAR_MAP, Combination, CombinationsConfig, DARK_COLOR_MODE_CLASSNAME, DEFAULT_COLOR_MODE, DEFAULT_COLOR_MODE_CLASSNAME, DEFAULT_COLOR_MODE_FOR_APP, DEFAULT_HIGH_CONTRAST_MODE, DEFAULT_REGION_MODE, DEFAULT_SCALE_MODE, DEFAULT_SCALE_MODE_CLASSNAME, DEFAULT_SCALE_MODE_FOR_APP, 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, PSUEDO_STYLE_SELECTOR_MAP, SMALL_SCALE_MODE_CLASSNAME, SPECTRUM_COLOR_PREFIX, TEXT_TRANSFORM_PREFIX, UDS_PREFIX, XLARGE_SCALE_MODE_CLASSNAME, XSMALL_SCALE_MODE_CLASSNAME, XXLARGE_SCALE_MODE_CLASSNAME, XXXLARGE_SCALE_MODE_CLASSNAME, button, defaultTokensConfig, entries, fontFamilyGlobal, fontWeightMap, fromEntries, generateConfigCombinations, mapValues, variants } from './tokens/index.cjs';
+export { Button, ButtonProps, IconButton, IconButtonProps, SpringMotionConfig, SpringMotionConfigProps } from '@yahoo/uds/client';
+export { Combination, CombinationsConfig, DEFAULT_COLOR_MODE, DEFAULT_COLOR_MODE_FOR_APP, DEFAULT_HIGH_CONTRAST_MODE, DEFAULT_REGION_MODE, DEFAULT_SCALE_MODE, DEFAULT_SCALE_MODE_FOR_APP, button, defaultTokensConfig, entries, fontWeightMap, fromEntries, generateConfigCombinations, getDefaultButtonBaseMap, mapValues, variants } from './tokens/index.cjs';
+import 'framer-motion';
+
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+interface BoxProps extends UniversalBoxProps, DivProps {
+}
+/**
+ * **📦 A layout component that can be used to compose other components**
+ *
+ * @description
+ * The most simple component we ship - a div. But with all the power of the UDS design system.
+ * By default, `Box` is a flexbox container. When working with vertical or horizontal layouts,
+ * consider using [VStack](./v-stack) or [HStack](./h-stack) respectively.
+ *
+ * @example
+ * ```tsx
+ * import { Box } from '@yahoo/uds';
+ *
+ * <Box backgroundColor="primary" spacing="6">
+ *   Any kind of content can go here!
+ * </Box>
+ * ```
+ *
+ * @usage
+ * - If you need to div-like container to apply padding, shapes, or other styling.
+ * - If you're creating card components.
+ *
+ * @see The {@link http://yo/uds/docs/components/box Box Docs} for more info
+ *
+ * @related [HStack](http://yo/uds/docs/components/h-stack), [VStack](http://yo/uds/docs/components/v-stack)
+ */
+declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
 
 interface HStackProps extends UniversalStackProps, DivProps {
 }
@@ -36,10 +66,44 @@ interface HStackProps extends UniversalStackProps, DivProps {
  *
  * @see The {@link http://yo/uds/docs/components/h-stack HStack Docs} for more info
  *
- * @related [Box](./Box.tsx) and [VStack](./VStack.tsx)
+ * @related [Box](http://yo/uds/docs/components/box), [VStack](http://yo/uds/docs/components/v-stack)
  **/
 declare const HStack: react.ForwardRefExoticComponent<HStackProps & react.RefAttributes<HTMLDivElement>>;
 
+type SVGElementProps = Omit<React.HTMLAttributes<SVGSVGElement>, 'color'>;
+interface IconProps extends UniversalIconProps, SVGElementProps {
+}
+/**
+ * **🎨 A component for displaying icons**
+ *
+ * @description
+ * [Iconography](http://yo/uds/docs/core-concepts/icons) contains small symbols for actions or
+ * other items. They are available in three different sizes: `sm`, `md`, and
+ * `lg`. Each size also supports an outline and fill variant. Icons can be
+ * colored using the `color` prop.
+ *
+ * The component is available in the `@yahoo/uds` package but is meant to be used
+ * with the assets in `@yahoo/uds-icons`. You will need both packages to use icons.
+ * A separate package provides modularity from the core library, better
+ * versioning strategies, and tree shakeability.
+ *
+ * @example
+ * ```tsx
+ * import { Icon } from '@yahoo/uds';
+ * import { AddFolder } from '@yahoo/uds-icons';
+ *
+ * <Icon name={AddFolder} variant="fill" size="sm" />
+ * ```
+ *
+ * @usage
+ * - If you need to display an icon.
+ *
+ * @see The {@link http://yo/uds/docs/components/icon Icon Docs} for more info
+ *
+ * @related [IconButton](http://yo/uds/docs/components/icon-button)
+ */
+declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+
 type NativeImageProps = Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'size' | 'color' | 'height' | 'width' | 'alt' | 'src'>;
 interface ImageProps extends NativeImageProps, UniversalImageProps {
 }
@@ -64,10 +128,119 @@ interface ImageProps extends NativeImageProps, UniversalImageProps {
  *
  * @see The {@link http://yo/uds/docs/components/image Image Docs} for more info
  *
- * @related [Box](./Box.tsx)
+ * @related [Box](http://yo/uds/docs/components/box)
  */
 declare function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, 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, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
 
+type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
+interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
+}
+/**
+ * **🖲️ A primitive component for creating button interactions with accessibility support**
+ *
+ * @description
+ * The Pressable component is a primitive component that can be used
+ * to create button interactions with accessibility support. It can be used
+ * to trigger an action, such as submitting a form, navigating to a new page,
+ * or adding interactivity to a section or card.
+ *
+ * @example
+ * ```tsx
+ * import { Pressable } from '@yahoo/uds';
+ *
+ * <Pressable
+ *   backgroundColor="secondary"
+ *   borderWidth="thin"
+ *   borderColor="primary"
+ *   borderRadius="lg"
+ *   onPress={() => console.log('Pressed!')}
+ *  >
+ *    <Text variant="body1" color="primary" spacingHorizontal="7" spacingVertical="5">Click me...</Text>
+ * </Pressable>
+ * ```
+ *
+ * @usage
+ * - If you need to add interactivity to a section or card.
+ * - If you need a highly customized version of [Button](./button)
+ *
+ * @see The {@link http://yo/uds/docs/components/pressable Pressable Docs} for more info
+ *
+ * @related [Button](http://yo/uds/docs/components/button), [IconButton](http://yo/uds/docs/components/icon-button)
+ *
+ */
+declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<HTMLButtonElement>>;
+
+type TextElementTagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'span' | 'label' | 'li';
+type TextProps = UniversalTextProps & {
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TextElementTagName;
+} & Omit<JSX.IntrinsicElements[TextElementTagName], 'color'>;
+/**
+ * **💬 A text element that can be used to display text**
+ *
+ * @description
+ * By default, the `Text` component uses text primary color and selects the
+ * correct font, weight, and leading. It also choices appropriate semantic
+ * HTML element based on the `variant` prop. For example, `body1` will use a
+ * `<p>` tag, `title1` uses an `<h1>`, etc. This behavior can be overridden
+ * with the `as` prop.
+ *
+ *
+ * @example
+ * ```tsx
+ * import { Text } from '@yahoo/uds';
+ *
+ * <Text variant="body1" color="primary">
+ *   Text goes here
+ * </Text>
+ * ```
+ *
+ * @usage
+ * - Use `Text` to display text in your app.
+ * - Use `variant` to change the size and weight of the text.
+ * - Use `color` to change the color of the text.
+ * - Use `as` to change the HTML tag used to render the text.
+ *
+ * @see The {@link http://yo/uds/docs/components/text Text Docs} for more info
+ *
+ * @related [Button](http://yo/uds/docs/components/button) and [Pressable](http://yo/uds/docs/components/pressable)
+ */
+declare const Text: react.ForwardRefExoticComponent<Omit<TextProps, "ref"> & react.RefAttributes<HTMLElement>>;
+
+type VStackProps = UniversalStackProps & DivProps;
+/**
+ * **🥞 A layout component that arranges its children in rows using flexbox**
+ *
+ * @description
+ * VStack is a layout component that arranges its children in rows using [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
+ * and can be used to compose larger layouts. VStack is similar to [Box](./box) but provides additional features like a `gap` property to
+ * add spacing between children.
+ *
+ * @example
+ * ```tsx
+ * import { VStack, Text } from '@yahoo/uds';
+ *
+ * <VStack gap="6">
+ *   <Text variant="body1" color="primary">First</Text>
+ *   <Text variant="body1" color="primary">Second</Text>
+ *   <Text variant="body1" color="primary">Third</Text>
+ * </VStack>
+ * ```
+ *
+ * @usage
+ * - Create a column of items, optionally with gaps between.
+ * - Create rows that are sized to their content (height only). By default each child will fill the width of the VStack.
+ * - Create rows that fill the available space within the parent container.
+ * - Create rows of proportionate size to each other (also known as a ratio-based layout).
+ *
+ * @see The {@link http://yo/uds/docs/components/v-stack VStack Docs} for more info
+ *
+ * @related [Box](http://yo/uds/docs/components/box), [HStack](http://yo/uds/docs/components/h-stack)
+ **/
+declare const VStack: react.ForwardRefExoticComponent<UniversalStackProps & DivProps & react.RefAttributes<HTMLDivElement>>;
+
 type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T;
 type CvaStyleValue<T> = T | CvaStyleArray<T> | Record<string, unknown> | null | boolean | undefined;
 type CvaStyleArray<T> = CvaStyleValue<T>[];
@@ -104,13 +277,13 @@ interface CX<T> {
 declare const cx: CX<string>;
 declare const cva: CVA<string>;
 declare const getStyles: (props?: ({
-    color?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "transparent" | "white" | "black" | "current" | undefined;
-    placeholderColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "transparent" | "white" | "black" | "current" | 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;
+    color?: "brand" | "accent" | "alert" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "transparent" | "white" | "black" | "current" | undefined;
+    placeholderColor?: "brand" | "accent" | "alert" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "transparent" | "white" | "black" | "current" | undefined;
+    fontFamily?: "serif" | "sans" | "mono" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | "sans-alt" | "serif-alt" | undefined;
     fontSize?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | undefined;
     fontWeight?: "black" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | "thin" | "extralight" | "light" | "regular" | "medium" | "semibold" | "bold" | "extrabold" | undefined;
     lineHeight?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | undefined;
-    textAlign?: "center" | "justify" | "start" | "end" | undefined;
+    textAlign?: "center" | "end" | "start" | "justify" | undefined;
     textTransform?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
     spacing?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "14" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
     spacingHorizontal?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "14" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
@@ -128,12 +301,12 @@ declare const getStyles: (props?: ({
     offsetTop?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "14" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
     columnGap?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "14" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
     rowGap?: "9" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "11" | "12" | "14" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
-    backgroundColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "transparent" | "white" | "black" | "current" | undefined;
-    borderColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "white" | "black" | "current" | undefined;
-    borderStartColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "white" | "black" | "current" | undefined;
-    borderEndColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "white" | "black" | "current" | undefined;
-    borderBottomColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "white" | "black" | "current" | undefined;
-    borderTopColor?: "accent" | "alert" | "brand" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "white" | "black" | "current" | undefined;
+    backgroundColor?: "brand" | "accent" | "alert" | "positive" | "warning" | "primary" | "secondary" | "transparent" | "white" | "black" | "current" | undefined;
+    borderColor?: "brand" | "accent" | "alert" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "white" | "black" | "current" | undefined;
+    borderStartColor?: "brand" | "accent" | "alert" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "white" | "black" | "current" | undefined;
+    borderEndColor?: "brand" | "accent" | "alert" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "white" | "black" | "current" | undefined;
+    borderBottomColor?: "brand" | "accent" | "alert" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "white" | "black" | "current" | undefined;
+    borderTopColor?: "brand" | "accent" | "alert" | "positive" | "warning" | "primary" | "secondary" | "tertiary" | "muted" | "transparent" | "white" | "black" | "current" | 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;
@@ -148,17 +321,17 @@ declare const getStyles: (props?: ({
     borderBottomWidth?: "thin" | "medium" | "none" | "thick" | undefined;
     avatarSize?: "sm" | "md" | "lg" | 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;
-    flex?: "1" | "none" | "auto" | "initial" | undefined;
+    alignContent?: "center" | "flex-end" | "flex-start" | "stretch" | "space-between" | "space-around" | undefined;
+    alignItems?: "center" | "flex-end" | "flex-start" | "baseline" | "stretch" | undefined;
+    alignSelf?: "center" | "flex-end" | "flex-start" | "baseline" | "stretch" | "auto" | undefined;
+    flex?: "1" | "none" | "initial" | "auto" | undefined;
     flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
     flexGrow?: "0" | "1" | "2" | "3" | undefined;
     flexShrink?: "0" | "1" | undefined;
-    flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
-    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | undefined;
+    flexWrap?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
+    justifyContent?: "center" | "flex-end" | "flex-start" | "space-between" | "space-around" | "space-evenly" | undefined;
     flexBasis?: "min-content" | undefined;
-    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" | undefined;
+    display?: "block" | "inline" | "flex" | "flow-root" | "grid" | "table" | "table-caption" | "table-cell" | "table-column" | "table-column-group" | "table-footer-group" | "table-header-group" | "table-row" | "table-row-group" | "inline-block" | "inline-flex" | "inline-table" | "contents" | undefined;
     overflow?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
     overflowX?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
     overflowY?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
@@ -166,13 +339,14 @@ declare const getStyles: (props?: ({
     contentFit?: "none" | "fill" | "cover" | "contain" | "scale-down" | undefined;
     colorMode?: "light" | "dark" | undefined;
     scaleMode?: "medium" | "xSmall" | "small" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-    buttonCategory?: "accent" | "alert" | "brand" | "positive" | "warning" | undefined;
+    buttonPalette?: "brand" | "accent" | "alert" | "positive" | "warning" | undefined;
     buttonVariant?: "primary" | "secondary" | "tertiary" | undefined;
     buttonSize?: "sm" | "md" | "lg" | undefined;
+    iconButtonSize?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
 } & {
     className?: string | undefined;
 }) | undefined) => string;
 
 type SetState<T> = Dispatch<SetStateAction<T>>;
 
-export { HStack, type HStackProps, Image, type ImageProps, type SetState, UniversalImageProps, UniversalStackProps, cva, cx, getStyles };
+export { Box, type BoxProps, HStack, type HStackProps, Icon, type IconProps, Image, type ImageProps, Pressable, type PressableProps, type SetState, Text, type TextProps, UniversalBoxProps, UniversalIconProps, UniversalImageProps, UniversalPressableProps, UniversalStackProps, UniversalTextProps, VStack, type VStackProps, cva, cx, getStyles };