@yahoo/uds 2.0.0 → 2.1.1

package/dist/flags.cjs

@@ -0,0 +1 @@
+"use strict";/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */var e={useGetStylesCache:!!("undefined"!=typeof process)&&"true"===process.env.NEXT_PUBLIC_UDS_FEATURE_USE_STYLE_CACHE};exports.getFeatureFlags=()=>e,exports.updateFeatureFlags=s=>e={...e,...s};

package/dist/flags.d.cts

@@ -0,0 +1,17 @@
+interface FeatureFlags {
+    /**
+     * Setting to true enables a specialized cache for calls to getStyle(),
+     * which can improve performance of component render times.
+     * @default false
+     **/
+    useGetStylesCache?: boolean;
+}
+/**
+ * Sets/overrides feature flags
+ * @param flags Flag overrides
+ * @returns Updated feature flags
+ */
+declare const updateFeatureFlags: (flags: Partial<FeatureFlags>) => FeatureFlags;
+declare const getFeatureFlags: () => FeatureFlags;
+
+export { type FeatureFlags, getFeatureFlags, updateFeatureFlags };

package/dist/flags.d.ts

@@ -0,0 +1,17 @@
+interface FeatureFlags {
+    /**
+     * Setting to true enables a specialized cache for calls to getStyle(),
+     * which can improve performance of component render times.
+     * @default false
+     **/
+    useGetStylesCache?: boolean;
+}
+/**
+ * Sets/overrides feature flags
+ * @param flags Flag overrides
+ * @returns Updated feature flags
+ */
+declare const updateFeatureFlags: (flags: Partial<FeatureFlags>) => FeatureFlags;
+declare const getFeatureFlags: () => FeatureFlags;
+
+export { type FeatureFlags, getFeatureFlags, updateFeatureFlags };

package/dist/flags.js

@@ -0,0 +1,2 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+var e={useGetStylesCache:!!("undefined"!=typeof process)&&"true"===process.env.NEXT_PUBLIC_UDS_FEATURE_USE_STYLE_CACHE},s=s=>e={...e,...s},E=()=>e;export{E as getFeatureFlags,s as updateFeatureFlags};

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";var e=require("./chunk-JGIKFUBH.cjs"),r=require("./chunk-DMMTEAJW.cjs"),t=require("./chunk-DCXVARRB.cjs"),o=require("./chunk-GIJ2FHY5.cjs"),n=require("./chunk-5WBROFT5.cjs"),i=require("react"),a=require("react/jsx-runtime"),d=require("@yahoo/uds/client"),f=e.createSlot(),l=i.forwardRef((function({asChild:r,className:t,backgroundColor:o,borderRadius:n,borderTopStartRadius:i,borderTopEndRadius:d,borderBottomStartRadius:l,borderBottomEndRadius:s,borderColor:p,borderStartColor:c,borderEndColor:u,borderTopColor:b,borderBottomColor:E,borderWidth:S,borderVerticalWidth:g,borderHorizontalWidth:_,borderStartWidth:O,borderEndWidth:C,borderTopWidth:m,borderBottomWidth:A,alignContent:R,alignItems:x,alignSelf:T,flex:P,flexDirection:L,flexGrow:h,flexShrink:M,flexWrap:y,justifyContent:D,flexBasis:B,display:W="flex",overflow:I,overflowX:j,overflowY:F,position:N,spacing:w,spacingHorizontal:X,spacingVertical:G,spacingBottom:H,spacingEnd:V,spacingStart:v,spacingTop:U,offset:k,offsetVertical:z,offsetHorizontal:Y,offsetBottom:q,offsetEnd:Z,offsetStart:J,offsetTop:K,columnGap:Q,rowGap:$,...ee},re){const te=e.getStyles({backgroundColor:o,borderRadius:n,borderTopStartRadius:i,borderTopEndRadius:d,borderBottomStartRadius:l,borderBottomEndRadius:s,borderColor:p,borderStartColor:c,borderEndColor:u,borderTopColor:b,borderBottomColor:E,borderWidth:S,borderVerticalWidth:g,borderHorizontalWidth:_,borderStartWidth:O,borderEndWidth:C,borderTopWidth:m,borderBottomWidth:A,alignContent:R,alignItems:x,alignSelf:T,flex:P,flexDirection:L,flexGrow:h,flexShrink:M,flexWrap:y,justifyContent:D,flexBasis:B,display:W,overflow:I,overflowX:j,overflowY:F,position:N,spacing:w,spacingHorizontal:X,spacingVertical:G,spacingBottom:H,spacingEnd:V,spacingStart:v,spacingTop:U,offset:k,offsetVertical:z,offsetHorizontal:Y,offsetBottom:q,offsetEnd:Z,offsetStart:J,offsetTop:K,columnGap:Q,rowGap:$,className:t}),oe=r?f:"div";return a.jsx(oe,{className:te,ref:re,...ee})})),s=i.forwardRef((function({gap:e,...r},t){return a.jsx(l,{ref:t,flexDirection:"row",rowGap:e,columnGap:e,...r})}));/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */var p=e.createSlot(),c=i.forwardRef((function({className:r,asChild:t,onPress:o,onClick:n=o,backgroundColor:i,borderRadius:d,borderTopStartRadius:f,borderTopEndRadius:l,borderBottomStartRadius:s,borderBottomEndRadius:c,borderColor:u,borderStartColor:b,borderEndColor:E,borderTopColor:S,borderBottomColor:g,borderWidth:_,borderVerticalWidth:O,borderHorizontalWidth:C,borderStartWidth:m,borderEndWidth:A,borderTopWidth:R,borderBottomWidth:x,alignContent:T,alignItems:P,alignSelf:L,flex:h,flexDirection:M,flexGrow:y,flexShrink:D,flexWrap:B,justifyContent:W,flexBasis:I,display:j,overflow:F,overflowX:N,overflowY:w,position:X,spacing:G,spacingHorizontal:H,spacingVertical:V,spacingBottom:v,spacingEnd:U,spacingStart:k,spacingTop:z,offset:Y,offsetVertical:q,offsetHorizontal:Z,offsetBottom:J,offsetEnd:K,offsetStart:Q,offsetTop:$,columnGap:ee,rowGap:re,...te},oe){const ne=e.getStyles({backgroundColor:i,borderRadius:d,borderTopStartRadius:f,borderTopEndRadius:l,borderBottomStartRadius:s,borderBottomEndRadius:c,borderColor:u,borderStartColor:b,borderEndColor:E,borderTopColor:S,borderBottomColor:g,borderWidth:_,borderVerticalWidth:O,borderHorizontalWidth:C,borderStartWidth:m,borderEndWidth:A,borderTopWidth:R,borderBottomWidth:x,alignContent:T,alignItems:P,alignSelf:L,flex:h,flexDirection:M,flexGrow:y,flexShrink:D,flexWrap:B,justifyContent:W,flexBasis:I,display:j,overflow:F,overflowX:N,overflowY:w,position:X,spacing:G,spacingHorizontal:H,spacingVertical:V,spacingBottom:v,spacingEnd:U,spacingStart:k,spacingTop:z,offset:Y,offsetVertical:q,offsetHorizontal:Z,offsetBottom:J,offsetEnd:K,offsetStart:Q,offsetTop:$,columnGap:ee,rowGap:re,className:r}),ie=t?p:"button";return a.jsx(ie,{className:ne,ref:oe,onClick:n,...te})})),u=e.createSlot(),b={display1:"h1",display2:"h1",display3:"h1",title1:"h1",title2:"h2",title3:"h3",title4:"h4",headline1:"h5",body1:"p",label1:"p",label2:"p",caption1:"p",caption2:"p",legal1:"p"},E=i.forwardRef((function({className:r,asChild:t,color:o="primary",variant:n="body1",as:i=b[n],fontSize:d=n,fontFamily:f=n,fontWeight:l=n,lineHeight:s=n,textTransform:p=n,textAlign:c,backgroundColor:E,borderRadius:S,borderTopStartRadius:g,borderTopEndRadius:_,borderBottomStartRadius:O,borderBottomEndRadius:C,borderColor:m,borderStartColor:A,borderEndColor:R,borderTopColor:x,borderBottomColor:T,borderWidth:P,borderVerticalWidth:L,borderHorizontalWidth:h,borderStartWidth:M,borderEndWidth:y,borderTopWidth:D,borderBottomWidth:B,alignContent:W,alignItems:I,alignSelf:j,flex:F,flexDirection:N,flexGrow:w,flexShrink:X,flexWrap:G,justifyContent:H,flexBasis:V,display:v,overflow:U,overflowX:k,overflowY:z,position:Y,spacing:q,spacingHorizontal:Z,spacingVertical:J,spacingBottom:K,spacingEnd:Q,spacingStart:$,spacingTop:ee,offset:re,offsetVertical:te,offsetHorizontal:oe,offsetBottom:ne,offsetEnd:ie,offsetStart:ae,offsetTop:de,columnGap:fe,rowGap:le,...se},pe){const ce=e.getStyles({className:r,color:o,fontFamily:f,fontSize:d,fontWeight:l,lineHeight:s,textTransform:p,textAlign:c,backgroundColor:E,borderRadius:S,borderTopStartRadius:g,borderTopEndRadius:_,borderBottomStartRadius:O,borderBottomEndRadius:C,borderColor:m,borderStartColor:A,borderEndColor:R,borderTopColor:x,borderBottomColor:T,borderWidth:P,borderVerticalWidth:L,borderHorizontalWidth:h,borderStartWidth:M,borderEndWidth:y,borderTopWidth:D,borderBottomWidth:B,alignContent:W,alignItems:I,alignSelf:j,flex:F,flexDirection:N,flexGrow:w,flexShrink:X,flexWrap:G,justifyContent:H,flexBasis:V,display:v,overflow:U,overflowX:k,overflowY:z,position:Y,spacing:q,spacingHorizontal:Z,spacingVertical:J,spacingBottom:K,spacingEnd:Q,spacingStart:$,spacingTop:ee,offset:re,offsetVertical:te,offsetHorizontal:oe,offsetBottom:ne,offsetEnd:ie,offsetStart:ae,offsetTop:de,columnGap:fe,rowGap:le}),ue=t?u:i;return a.jsx(ue,{className:ce,ref:pe,...se})})),S=i.forwardRef((function({gap:e,...r},t){return a.jsx(l,{ref:t,flexDirection:"column",columnGap:e,rowGap:e,...r})}));Object.defineProperty(exports,"Icon",{enumerable:!0,get:function(){return e.Icon}}),Object.defineProperty(exports,"cva",{enumerable:!0,get:function(){return e.cva}}),Object.defineProperty(exports,"cx",{enumerable:!0,get:function(){return e.cx}}),Object.defineProperty(exports,"getStyles",{enumerable:!0,get:function(){return e.getStyles}}),Object.defineProperty(exports,"DEFAULT_COLOR_MODE",{enumerable:!0,get:function(){return r.DEFAULT_COLOR_MODE}}),Object.defineProperty(exports,"DEFAULT_COLOR_MODE_FOR_APP",{enumerable:!0,get:function(){return r.DEFAULT_COLOR_MODE_FOR_APP}}),Object.defineProperty(exports,"DEFAULT_HIGH_CONTRAST_MODE",{enumerable:!0,get:function(){return r.DEFAULT_HIGH_CONTRAST_MODE}}),Object.defineProperty(exports,"DEFAULT_REGION_MODE",{enumerable:!0,get:function(){return r.DEFAULT_REGION_MODE}}),Object.defineProperty(exports,"DEFAULT_SCALE_MODE",{enumerable:!0,get:function(){return r.DEFAULT_SCALE_MODE}}),Object.defineProperty(exports,"DEFAULT_SCALE_MODE_FOR_APP",{enumerable:!0,get:function(){return r.DEFAULT_SCALE_MODE_FOR_APP}}),Object.defineProperty(exports,"FONT_DECLARATIONS_MAP",{enumerable:!0,get:function(){return r.FONT_DECLARATIONS_MAP}}),Object.defineProperty(exports,"alwaysPalette",{enumerable:!0,get:function(){return r.alwaysPalette}}),Object.defineProperty(exports,"button",{enumerable:!0,get:function(){return r.button}}),Object.defineProperty(exports,"defaultTokensConfig",{enumerable:!0,get:function(){return r.defaultTokensConfig}}),Object.defineProperty(exports,"fromEntries",{enumerable:!0,get:function(){return r.fromEntries}}),Object.defineProperty(exports,"generateConfigCombinations",{enumerable:!0,get:function(){return r.generateConfigCombinations}}),Object.defineProperty(exports,"getDefaultButtonBaseMap",{enumerable:!0,get:function(){return r.getDefaultButtonBaseMap}}),Object.defineProperty(exports,"variants",{enumerable:!0,get:function(){return t.variants}}),Object.defineProperty(exports,"entries",{enumerable:!0,get:function(){return o.entries}}),Object.defineProperty(exports,"fontWeightMap",{enumerable:!0,get:function(){return o.fontWeightMap}}),Object.defineProperty(exports,"mapValues",{enumerable:!0,get:function(){return o.mapValues}}),Object.defineProperty(exports,"AVATAR_SIZE_PREFIX",{enumerable:!0,get:function(){return n.AVATAR_SIZE_PREFIX}}),Object.defineProperty(exports,"BORDER_RADIUS_PREFIX",{enumerable:!0,get:function(){return n.BORDER_RADIUS_PREFIX}}),Object.defineProperty(exports,"BORDER_WIDTH_PREFIX",{enumerable:!0,get:function(){return n.BORDER_WIDTH_PREFIX}}),Object.defineProperty(exports,"BUTTON_CSS_VAR_MAP",{enumerable:!0,get:function(){return n.BUTTON_CSS_VAR_MAP}}),Object.defineProperty(exports,"DARK_COLOR_MODE_CLASSNAME",{enumerable:!0,get:function(){return n.DARK_COLOR_MODE_CLASSNAME}}),Object.defineProperty(exports,"DEFAULT_COLOR_MODE_CLASSNAME",{enumerable:!0,get:function(){return n.DEFAULT_COLOR_MODE_CLASSNAME}}),Object.defineProperty(exports,"DEFAULT_SCALE_MODE_CLASSNAME",{enumerable:!0,get:function(){return n.DEFAULT_SCALE_MODE_CLASSNAME}}),Object.defineProperty(exports,"FONT_FAMILY_PREFIX",{enumerable:!0,get:function(){return n.FONT_FAMILY_PREFIX}}),Object.defineProperty(exports,"FONT_SIZE_PREFIX",{enumerable:!0,get:function(){return n.FONT_SIZE_PREFIX}}),Object.defineProperty(exports,"FONT_WEIGHT_PREFIX",{enumerable:!0,get:function(){return n.FONT_WEIGHT_PREFIX}}),Object.defineProperty(exports,"ICON_BUTTON_CSS_VAR_MAP",{enumerable:!0,get:function(){return n.ICON_BUTTON_CSS_VAR_MAP}}),Object.defineProperty(exports,"ICON_SIZE_PREFIX",{enumerable:!0,get:function(){return n.ICON_SIZE_PREFIX}}),Object.defineProperty(exports,"LARGE_SCALE_MODE_CLASSNAME",{enumerable:!0,get:function(){return n.LARGE_SCALE_MODE_CLASSNAME}}),Object.defineProperty(exports,"LIGHT_COLOR_MODE_CLASSNAME",{enumerable:!0,get:function(){return n.LIGHT_COLOR_MODE_CLASSNAME}}),Object.defineProperty(exports,"LINE_HEIGHT_PREFIX",{enumerable:!0,get:function(){return n.LINE_HEIGHT_PREFIX}}),Object.defineProperty(exports,"MEDIUM_SCALE_MODE_CLASSNAME",{enumerable:!0,get:function(){return n.MEDIUM_SCALE_MODE_CLASSNAME}}),Object.defineProperty(exports,"MOTION_PREFIX",{enumerable:!0,get:function(){return n.MOTION_PREFIX}}),Object.defineProperty(exports,"PSEUDO_STYLE_SELECTOR_MAP",{enumerable:!0,get:function(){return n.PSEUDO_STYLE_SELECTOR_MAP}}),Object.defineProperty(exports,"SMALL_SCALE_MODE_CLASSNAME",{enumerable:!0,get:function(){return n.SMALL_SCALE_MODE_CLASSNAME}}),Object.defineProperty(exports,"SPECTRUM_COLOR_PREFIX",{enumerable:!0,get:function(){return n.SPECTRUM_COLOR_PREFIX}}),Object.defineProperty(exports,"TEXT_TRANSFORM_PREFIX",{enumerable:!0,get:function(){return n.TEXT_TRANSFORM_PREFIX}}),Object.defineProperty(exports,"UDS_PREFIX",{enumerable:!0,get:function(){return n.UDS_PREFIX}}),Object.defineProperty(exports,"XLARGE_SCALE_MODE_CLASSNAME",{enumerable:!0,get:function(){return n.XLARGE_SCALE_MODE_CLASSNAME}}),Object.defineProperty(exports,"XSMALL_SCALE_MODE_CLASSNAME",{enumerable:!0,get:function(){return n.XSMALL_SCALE_MODE_CLASSNAME}}),Object.defineProperty(exports,"XXLARGE_SCALE_MODE_CLASSNAME",{enumerable:!0,get:function(){return n.XXLARGE_SCALE_MODE_CLASSNAME}}),Object.defineProperty(exports,"XXXLARGE_SCALE_MODE_CLASSNAME",{enumerable:!0,get:function(){return n.XXXLARGE_SCALE_MODE_CLASSNAME}}),Object.defineProperty(exports,"Button",{enumerable:!0,get:function(){return d.Button}}),Object.defineProperty(exports,"IconButton",{enumerable:!0,get:function(){return d.IconButton}}),Object.defineProperty(exports,"SpringMotionConfig",{enumerable:!0,get:function(){return d.SpringMotionConfig}}),exports.Box=l,exports.HStack=s,exports.Image=function({width:r,height:t,src:o,alt:n,contentFit:i,backgroundColor:d,borderRadius:f,borderTopStartRadius:l,borderTopEndRadius:s,borderBottomStartRadius:p,borderBottomEndRadius:c,borderColor:u,borderStartColor:b,borderEndColor:E,borderTopColor:S,borderBottomColor:g,borderWidth:_,borderVerticalWidth:O,borderHorizontalWidth:C,borderStartWidth:m,borderEndWidth:A,borderTopWidth:R,borderBottomWidth:x,alignContent:T,alignItems:P,alignSelf:L,flex:h,flexDirection:M,flexGrow:y,flexShrink:D,flexWrap:B,justifyContent:W,flexBasis:I,display:j,overflow:F,overflowX:N,overflowY:w,position:X,spacing:G,spacingHorizontal:H,spacingVertical:V,spacingBottom:v,spacingEnd:U,spacingStart:k,spacingTop:z,offset:Y,offsetVertical:q,offsetHorizontal:Z,offsetBottom:J,offsetEnd:K,offsetStart:Q,offsetTop:$,columnGap:ee,rowGap:re,...te}){const oe=e.getStyles({contentFit:i,backgroundColor:d,borderRadius:f,borderTopStartRadius:l,borderTopEndRadius:s,borderBottomStartRadius:p,borderBottomEndRadius:c,borderColor:u,borderStartColor:b,borderEndColor:E,borderTopColor:S,borderBottomColor:g,borderWidth:_,borderVerticalWidth:O,borderHorizontalWidth:C,borderStartWidth:m,borderEndWidth:A,borderTopWidth:R,borderBottomWidth:x,alignContent:T,alignItems:P,alignSelf:L,flex:h,flexDirection:M,flexGrow:y,flexShrink:D,flexWrap:B,justifyContent:W,flexBasis:I,display:j,overflow:F,overflowX:N,overflowY:w,position:X,spacing:G,spacingHorizontal:H,spacingVertical:V,spacingBottom:v,spacingEnd:U,spacingStart:k,spacingTop:z,offset:Y,offsetVertical:q,offsetHorizontal:Z,offsetBottom:J,offsetEnd:K,offsetStart:Q,offsetTop:$,columnGap:ee,rowGap:re});return a.jsx("img",{src:o,alt:n,className:oe,style:{objectPosition:"left",width:r,height:t},...te})},exports.Pressable=c,exports.Text=E,exports.VStack=S;

package/dist/index.d.cts

@@ -0,0 +1,385 @@
+import * as react from 'react';
+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-Pyccco5Q.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, o as FontConfig, aZ as FontCssVar, n as FontDeclarationConfig, a_ as FontFamilyCDNUrl, a$ as FontFamilyConfig, m 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 IconSizeConfig, bd as ImageStyleProps, V as LARGE_SCALE_MODE_CLASSNAME, O as LIGHT_COLOR_MODE_CLASSNAME, L as LINE_HEIGHT_PREFIX, be as LayoutStyleProps, bf as LetterSpacing, bg as LineClampAlias, bh as LineColor, bi as LineHeight, bj as LineHeightConfig, bk as LinePalette, bl as LinePaletteAlias, R as MEDIUM_SCALE_MODE_CLASSNAME, J as MOTION_PREFIX, bm as Modes, l as MotionConfig, bn as MotionCssVar, bo as MotionSpringConfig, k as MotionSpringConfigOptions, M as MotionVariant, g as MotionVariantSpeed, bp as MotionVariantValues, bq as Overflow, a2 as PSEUDO_STYLE_SELECTOR_MAP, br as Palette, c as PaletteConfig, P as PaletteType, bs as PaletteValue, bt as PlatformMode, bu as Position, bv as PropertyToPaletteAliasMap, bw as RegionMode, Q as SMALL_SCALE_MODE_CLASSNAME, K as SPECTRUM_COLOR_PREFIX, bx as ScaleConfig, by as ScaleEffectMap, S as ScaleMode, bz as ScaleModeConfig, bA as ScaleModeForApp, bB as SpacingAlias, bC as SpacingConfig, bD as SpacingStyleProps, bE as SpectrumColor, bF as SpectrumConfig, bG as StateStyleProps, bH as StyleProps, T as TEXT_TRANSFORM_PREFIX, bQ as TShirtSize, bR as TShirtSizeCommon, bI as TextProperty, bJ as TextStyleProps, bK as TextTransform, bL as TextTransformConfig, bM as TextVariant, bN as TransitionDelay, bO as TransitionDuration, bP as TransitionTiming, w as UDS_PREFIX, bS as UdsCssVar, bT as UniversalAvatarProps, e as UniversalButtonProps, f as UniversalIconButtonProps, bU 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-Pyccco5Q.cjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+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';
+export { IconSize, IconVariant } from '@yahoo/uds-icons/types';
+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 https://uds.build/docs/components/box Box Docs} for more info
+ *
+ * @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
+ */
+declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
+
+interface HStackProps extends UniversalStackProps, DivProps {
+}
+/**
+ * **📏 A layout component that arranges its children in columns using flexbox**
+ *
+ * @description
+ * HStack is a layout primitive 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 similar to [Box](./box) but provides additional features like a `gap` property to
+ * add spacing between children.
+ *
+ * @example
+ * ```tsx
+ * 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>
+ * ```
+ *
+ * @usage
+ * - 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).
+ *
+ * @see The {@link https://uds.build/docs/components/h-stack HStack Docs} for more info
+ *
+ * @related [Box](https://uds.build/docs/components/box), [VStack](https://uds.build/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](https://uds.build/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 https://uds.build/docs/components/icon Icon Docs} for more info
+ *
+ * @related [IconButton](https://uds.build/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 {
+}
+/**
+ * **📸 A component for displaying images**
+ *
+ * @description
+ * 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} />;
+ * ```
+ *
+ * @usage
+ * - Use the `Image` component to display images.
+ * - Use `width` and `height` props to set the size of the image.
+ * - Image extends the HTMLImageElement, as well as the uds `Box` component and supports all of their props.
+ *
+ * @see The {@link https://uds.build/docs/components/image Image Docs} for more info
+ *
+ * @related [Box](https://uds.build/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 https://uds.build/docs/components/pressable Pressable Docs} for more info
+ *
+ * @related [Button](https://uds.build/docs/components/button), [IconButton](https://uds.build/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<TagName extends TextElementTagName = TextElementTagName> = {
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TagName;
+} & JSX.IntrinsicElements[TagName] & UniversalTextProps;
+/**
+ * **💬 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 https://uds.build/docs/components/text Text Docs} for more info
+ *
+ * @related [Button](https://uds.build/docs/components/button) and [Pressable](https://uds.build/docs/components/pressable)
+ */
+declare const Text: react.ForwardRefExoticComponent<(Omit<{
+    /** 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 | undefined;
+} & react.ClassAttributes<HTMLElement> & react.HTMLAttributes<HTMLElement> & UniversalTextProps, "ref"> | Omit<{
+    /** 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 | undefined;
+} & react.ClassAttributes<HTMLParagraphElement> & react.HTMLAttributes<HTMLParagraphElement> & UniversalTextProps, "ref"> | Omit<{
+    /** 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 | undefined;
+} & react.ClassAttributes<HTMLHeadingElement> & react.HTMLAttributes<HTMLHeadingElement> & UniversalTextProps, "ref"> | Omit<{
+    /** 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 | undefined;
+} & react.ClassAttributes<HTMLLabelElement> & react.LabelHTMLAttributes<HTMLLabelElement> & UniversalTextProps, "ref"> | Omit<{
+    /** 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 | undefined;
+} & react.ClassAttributes<HTMLLIElement> & react.LiHTMLAttributes<HTMLLIElement> & UniversalTextProps, "ref"> | Omit<{
+    /** 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 | undefined;
+} & react.ClassAttributes<HTMLSpanElement> & react.HTMLAttributes<HTMLSpanElement> & UniversalTextProps, "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 https://uds.build/docs/components/v-stack VStack Docs} for more info
+ *
+ * @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/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>[];
+type CVAVariantSchema<T, V extends CVAVariantShape<T>> = {
+    [Variant in keyof V]?: StringToBoolean<keyof V[Variant]> | undefined;
+};
+type CVAVariantShape<T> = Record<string, Record<string, T>>;
+type CVAStyleProp<T> = T extends string ? {
+    className?: T;
+} : {
+    style?: T;
+};
+type CVAConfigBase<T> = {
+    base?: T | null;
+};
+interface CVA<T> {
+    <V extends CVAVariantShape<T>>(config: V extends CVAVariantShape<T> ? CVAConfigBase<T> & {
+        base?: T;
+        variants?: V;
+        compoundVariants?: (V extends CVAVariantShape<T> ? (CVAVariantSchema<T, V> | {
+            [Variant in keyof V]?: StringToBoolean<keyof V[Variant]> | undefined;
+        }) & CVAStyleProp<T> : CVAStyleProp<T>)[];
+        defaultVariants?: CVAVariantSchema<T, V>;
+    } : CVAConfigBase<T> & {
+        variants?: never;
+        compoundVariants?: never;
+        defaultVariants?: never;
+    }): (props?: V extends CVAVariantShape<T> ? CVAVariantSchema<T, V> & CVAStyleProp<T> : CVAStyleProp<T>) => T;
+}
+interface CX<T> {
+    (...inputs: CvaStyleValue<T>[]): T;
+}
+
+declare const cx: CX<string>;
+declare const cva: CVA<string>;
+declare const getStylesInternal: (props?: ({
+    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" | "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;
+    spacingVertical?: "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;
+    spacingBottom?: "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;
+    spacingEnd?: "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;
+    spacingStart?: "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;
+    spacingTop?: "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;
+    offset?: "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;
+    offsetVertical?: "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;
+    offsetHorizontal?: "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;
+    offsetBottom?: "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;
+    offsetEnd?: "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;
+    offsetStart?: "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;
+    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?: "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;
+    borderBottomStartRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
+    borderBottomEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
+    borderWidth?: "thin" | "medium" | "none" | "thick" | undefined;
+    borderVerticalWidth?: "thin" | "medium" | "none" | "thick" | undefined;
+    borderHorizontalWidth?: "thin" | "medium" | "none" | "thick" | undefined;
+    borderStartWidth?: "thin" | "medium" | "none" | "thick" | undefined;
+    borderEndWidth?: "thin" | "medium" | "none" | "thick" | undefined;
+    borderTopWidth?: "thin" | "medium" | "none" | "thick" | undefined;
+    borderBottomWidth?: "thin" | "medium" | "none" | "thick" | undefined;
+    avatarSize?: "sm" | "md" | "lg" | undefined;
+    iconSize?: "sm" | "md" | "lg" | 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?: "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" | "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;
+    position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
+    contentFit?: "none" | "fill" | "cover" | "contain" | "scale-down" | undefined;
+    colorMode?: "light" | "dark" | undefined;
+    scaleMode?: "medium" | "xSmall" | "small" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | 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 GetStylesInternalProps = Parameters<typeof getStylesInternal>[0];
+declare const getStyles: (props: GetStylesInternalProps) => string;
+
+type SetState<T> = Dispatch<SetStateAction<T>>;
+
+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 };