@yahoo/uds-mobile 1.3.0-beta.9 → 1.4.0-beta.1

package/dist/components/Switch.mjs

@@ -23,6 +23,9 @@ const ANIMATION_DURATION = 120;
 * A switch (also called a toggle) is a binary on/off input control.
 * It allows users to pick between two clearly opposite choices.
 *
+* @category Form
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { Switch } from '@yahoo/uds-mobile';
@@ -32,9 +35,21 @@ const ANIMATION_DURATION = 120;
 * <Switch onIcon="Check" offIcon="Cross" label="Sync" />
 * ```
 *
-* @see The {@link https://uds.build/docs/components/switch Switch Docs} for more info
+* @usage
+* - Settings: For toggling preferences on/off
+* - Feature flags: For enabling/disabling features
+* - Immediate effect toggles (no submit button needed)
+*
+* @accessibility
+* - Sets `accessibilityRole="switch"` automatically
+* - Announces on/off state to screen readers
+* - Respects system reduce motion preference
+* - Supports `reduceMotion` prop to disable animations
+*
+* @see {@link Checkbox} for forms with submit actions
+* @see {@link Radio} for single-select options
 */
-const Switch = memo(function Switch$1({ isOn: isOnProp, defaultIsOn = false, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, disabled = false, required, accessibilityHint, reduceMotion = false, ref }) {
+const Switch = memo(function Switch({ isOn: isOnProp, defaultIsOn = false, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, disabled = false, required, accessibilityHint, reduceMotion = false, ref }) {
 	const isControlled = isOnProp !== void 0;
 	const [internalIsOn, setInternalIsOn] = useState(defaultIsOn);
 	const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);

package/dist/components/Switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.mjs","names":["HANDLE_TRAVEL: Record<SwitchSize, number>","Switch","rootStyle: StyleProp<ViewStyle>","trackStyle: StyleProp<ViewStyle>","handleStyle: StyleProp<ViewStyle>","Text"],"sources":["../../src/components/Switch.tsx"],"sourcesContent":["import type { SwitchSize, UniversalSwitchProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { AccessibilityProps, StyleProp, View, ViewStyle } from 'react-native';\nimport { AccessibilityInfo, Pressable } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withTiming } from 'react-native-reanimated';\nimport { StyleSheet } from 'react-native-unistyles';\nimport { useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport { switchStyles } from '../../generated/styles';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\n\ninterface SwitchProps extends UniversalSwitchProps<IconSlotType> {\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n  /** Callback when the switch value changes */\n  onChange?: (value: boolean) => void;\n  /** Whether the switch is disabled */\n  disabled?: boolean;\n  /** Whether the switch is required (shows asterisk with label) */\n  required?: boolean;\n  /** Accessibility hint describing what happens when activated */\n  accessibilityHint?: AccessibilityProps['accessibilityHint'];\n}\n\nconst HANDLE_TRAVEL: Record<SwitchSize, number> = {\n  md: 20,\n  sm: 12,\n};\n\nconst ANIMATION_DURATION = 120;\n\n/**\n * **Switch component for toggling options**\n *\n * @description\n * A switch (also called a toggle) is a binary on/off input control.\n * It allows users to pick between two clearly opposite choices.\n *\n * @example\n * ```tsx\n * import { Switch } from '@yahoo/uds-mobile';\n *\n * <Switch label=\"Notifications\" />\n * <Switch isOn={enabled} onChange={setEnabled} label=\"Dark mode\" />\n * <Switch onIcon=\"Check\" offIcon=\"Cross\" label=\"Sync\" />\n * ```\n *\n * @see The {@link https://uds.build/docs/components/switch Switch Docs} for more info\n */\nconst Switch = memo(function Switch({\n  isOn: isOnProp,\n  defaultIsOn = false,\n  onChange,\n  label,\n  labelPosition = 'start',\n  size = 'md',\n  onIcon,\n  offIcon,\n  disabled = false,\n  required,\n  accessibilityHint,\n  reduceMotion = false,\n  ref,\n}: SwitchProps) {\n  const isControlled = isOnProp !== undefined;\n  const [internalIsOn, setInternalIsOn] = useState(defaultIsOn);\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n  const isOn = isControlled ? isOnProp : internalIsOn;\n\n  // Check system reduced motion preference\n  useEffect(() => {\n    const checkReducedMotion = async () => {\n      const isReduceMotionEnabled = await AccessibilityInfo.isReduceMotionEnabled();\n      setPrefersReducedMotion(isReduceMotionEnabled);\n    };\n    checkReducedMotion();\n\n    const subscription = AccessibilityInfo.addEventListener(\n      'reduceMotionChanged',\n      setPrefersReducedMotion,\n    );\n    return () => subscription.remove();\n  }, []);\n\n  const shouldReduceMotion = reduceMotion || prefersReducedMotion;\n  const animationDuration = shouldReduceMotion ? 0 : ANIMATION_DURATION;\n\n  const progress = useDerivedValue(\n    () => withTiming(isOn ? 1 : 0, { duration: animationDuration }),\n    [isOn, animationDuration],\n  );\n\n  const travelDistance = HANDLE_TRAVEL[size];\n\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const newValue = !isOn;\n\n    if (!isControlled) {\n      setInternalIsOn(newValue);\n    }\n\n    onChange?.(newValue);\n  }, [disabled, isOn, isControlled, onChange]);\n\n  switchStyles.useVariants({\n    size,\n    variant: isOn ? 'on' : 'off',\n  });\n\n  // Get animated track color from design tokens (changes when variant changes)\n  const trackBackgroundColor = useAnimatedVariantColor(switchStyles.switch, 'backgroundColor');\n\n  const animatedTrackStyle = useAnimatedStyle(() => {\n    'worklet';\n    return {\n      backgroundColor: withTiming(trackBackgroundColor.value, { duration: animationDuration }),\n    };\n  });\n\n  const animatedHandleStyle = useAnimatedStyle(() => {\n    'worklet';\n    return {\n      transform: [{ translateX: progress.value * travelDistance }],\n    };\n  });\n\n  const rootStyle: StyleProp<ViewStyle> = useMemo(\n    () => [switchStyles.root, switchStaticStyles.root({ disabled })],\n    [switchStyles.root, disabled],\n  );\n\n  const trackStyle: StyleProp<ViewStyle> = useMemo(\n    () => [switchStyles.switch, switchStaticStyles.track, animatedTrackStyle],\n    [switchStyles.switch, animatedTrackStyle],\n  );\n\n  const handleStyle: StyleProp<ViewStyle> = useMemo(\n    () => [switchStyles.handle, switchStaticStyles.handle, animatedHandleStyle],\n    [switchStyles.handle, animatedHandleStyle],\n  );\n\n  const accessibilityLabel = typeof label === 'string' ? label : undefined;\n  const resolvedAccessibilityHint = accessibilityHint ?? 'Double tap to toggle';\n\n  const resolvedLabel = typeof label === 'function' ? label() : label;\n  const labelContent = resolvedLabel && (\n    <HStack gap=\"2\" alignItems=\"center\">\n      <Text style={switchStyles.text}>{resolvedLabel}</Text>\n      {required && <Text color=\"alert\">*</Text>}\n    </HStack>\n  );\n\n  const a11yValue = useMemo(() => ({ text: isOn ? 'On' : 'Off' }), [isOn]);\n\n  return (\n    <Pressable\n      ref={ref}\n      onPress={handlePress}\n      disabled={disabled}\n      accessible\n      accessibilityRole=\"switch\"\n      accessibilityState={{ checked: isOn, disabled }}\n      accessibilityLabel={accessibilityLabel}\n      accessibilityHint={resolvedAccessibilityHint}\n      accessibilityValue={a11yValue}\n      style={rootStyle}\n    >\n      {labelPosition === 'end' && labelContent}\n\n      <Animated.View style={trackStyle} importantForAccessibility=\"no-hide-descendants\">\n        <Animated.View style={handleStyle}>\n          {onIcon && isOn && (\n            <Animated.View style={switchStaticStyles.iconContainer}>\n              <IconSlot icon={onIcon} variant=\"fill\" style={switchStyles.handleIcon} />\n            </Animated.View>\n          )}\n          {offIcon && !isOn && (\n            <Animated.View style={switchStaticStyles.iconContainer}>\n              <IconSlot icon={offIcon} variant=\"fill\" style={switchStyles.handleIcon} />\n            </Animated.View>\n          )}\n        </Animated.View>\n      </Animated.View>\n\n      {labelPosition === 'start' && labelContent}\n    </Pressable>\n  );\n});\n\nSwitch.displayName = 'Switch';\n\nconst switchStaticStyles = StyleSheet.create((theme) => ({\n  handle: {\n    borderRadius: theme.borderRadius.full,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  iconContainer: {\n    position: 'absolute',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  track: {\n    justifyContent: 'center',\n    borderRadius: theme.borderRadius.full,\n  },\n  root: ({ disabled }: { disabled: boolean }) => ({\n    flexDirection: 'row',\n    alignItems: 'center',\n    alignSelf: 'flex-start',\n    opacity: disabled ? 0.5 : 1,\n  }),\n}));\n\nexport { Switch, type SwitchProps };\n"],"mappings":"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"}
+{"version":3,"file":"Switch.mjs","names":["Text"],"sources":["../../src/components/Switch.tsx"],"sourcesContent":["import type { SwitchSize, UniversalSwitchProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { AccessibilityProps, StyleProp, View, ViewStyle } from 'react-native';\nimport { AccessibilityInfo, Pressable } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withTiming } from 'react-native-reanimated';\nimport { StyleSheet } from 'react-native-unistyles';\nimport { useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport { switchStyles } from '../../generated/styles';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\n\ninterface SwitchProps extends UniversalSwitchProps<IconSlotType> {\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n  /** Callback when the switch value changes */\n  onChange?: (value: boolean) => void;\n  /** Whether the switch is disabled */\n  disabled?: boolean;\n  /** Whether the switch is required (shows asterisk with label) */\n  required?: boolean;\n  /** Accessibility hint describing what happens when activated */\n  accessibilityHint?: AccessibilityProps['accessibilityHint'];\n}\n\nconst HANDLE_TRAVEL: Record<SwitchSize, number> = {\n  md: 20,\n  sm: 12,\n};\n\nconst ANIMATION_DURATION = 120;\n\n/**\n * **Switch component for toggling options**\n *\n * @description\n * A switch (also called a toggle) is a binary on/off input control.\n * It allows users to pick between two clearly opposite choices.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Switch } from '@yahoo/uds-mobile';\n *\n * <Switch label=\"Notifications\" />\n * <Switch isOn={enabled} onChange={setEnabled} label=\"Dark mode\" />\n * <Switch onIcon=\"Check\" offIcon=\"Cross\" label=\"Sync\" />\n * ```\n *\n * @usage\n * - Settings: For toggling preferences on/off\n * - Feature flags: For enabling/disabling features\n * - Immediate effect toggles (no submit button needed)\n *\n * @accessibility\n * - Sets `accessibilityRole=\"switch\"` automatically\n * - Announces on/off state to screen readers\n * - Respects system reduce motion preference\n * - Supports `reduceMotion` prop to disable animations\n *\n * @see {@link Checkbox} for forms with submit actions\n * @see {@link Radio} for single-select options\n */\nconst Switch = memo(function Switch({\n  isOn: isOnProp,\n  defaultIsOn = false,\n  onChange,\n  label,\n  labelPosition = 'start',\n  size = 'md',\n  onIcon,\n  offIcon,\n  disabled = false,\n  required,\n  accessibilityHint,\n  reduceMotion = false,\n  ref,\n}: SwitchProps) {\n  const isControlled = isOnProp !== undefined;\n  const [internalIsOn, setInternalIsOn] = useState(defaultIsOn);\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n  const isOn = isControlled ? isOnProp : internalIsOn;\n\n  // Check system reduced motion preference\n  useEffect(() => {\n    const checkReducedMotion = async () => {\n      const isReduceMotionEnabled = await AccessibilityInfo.isReduceMotionEnabled();\n      setPrefersReducedMotion(isReduceMotionEnabled);\n    };\n    checkReducedMotion();\n\n    const subscription = AccessibilityInfo.addEventListener(\n      'reduceMotionChanged',\n      setPrefersReducedMotion,\n    );\n    return () => subscription.remove();\n  }, []);\n\n  const shouldReduceMotion = reduceMotion || prefersReducedMotion;\n  const animationDuration = shouldReduceMotion ? 0 : ANIMATION_DURATION;\n\n  const progress = useDerivedValue(\n    () => withTiming(isOn ? 1 : 0, { duration: animationDuration }),\n    [isOn, animationDuration],\n  );\n\n  const travelDistance = HANDLE_TRAVEL[size];\n\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const newValue = !isOn;\n\n    if (!isControlled) {\n      setInternalIsOn(newValue);\n    }\n\n    onChange?.(newValue);\n  }, [disabled, isOn, isControlled, onChange]);\n\n  switchStyles.useVariants({\n    size,\n    variant: isOn ? 'on' : 'off',\n  });\n\n  // Get animated track color from design tokens (changes when variant changes)\n  const trackBackgroundColor = useAnimatedVariantColor(switchStyles.switch, 'backgroundColor');\n\n  const animatedTrackStyle = useAnimatedStyle(() => {\n    'worklet';\n    return {\n      backgroundColor: withTiming(trackBackgroundColor.value, { duration: animationDuration }),\n    };\n  });\n\n  const animatedHandleStyle = useAnimatedStyle(() => {\n    'worklet';\n    return {\n      transform: [{ translateX: progress.value * travelDistance }],\n    };\n  });\n\n  const rootStyle: StyleProp<ViewStyle> = useMemo(\n    () => [switchStyles.root, switchStaticStyles.root({ disabled })],\n    [switchStyles.root, disabled],\n  );\n\n  const trackStyle: StyleProp<ViewStyle> = useMemo(\n    () => [switchStyles.switch, switchStaticStyles.track, animatedTrackStyle],\n    [switchStyles.switch, animatedTrackStyle],\n  );\n\n  const handleStyle: StyleProp<ViewStyle> = useMemo(\n    () => [switchStyles.handle, switchStaticStyles.handle, animatedHandleStyle],\n    [switchStyles.handle, animatedHandleStyle],\n  );\n\n  const accessibilityLabel = typeof label === 'string' ? label : undefined;\n  const resolvedAccessibilityHint = accessibilityHint ?? 'Double tap to toggle';\n\n  const resolvedLabel = typeof label === 'function' ? label() : label;\n  const labelContent = resolvedLabel && (\n    <HStack gap=\"2\" alignItems=\"center\">\n      <Text style={switchStyles.text}>{resolvedLabel}</Text>\n      {required && <Text color=\"alert\">*</Text>}\n    </HStack>\n  );\n\n  const a11yValue = useMemo(() => ({ text: isOn ? 'On' : 'Off' }), [isOn]);\n\n  return (\n    <Pressable\n      ref={ref}\n      onPress={handlePress}\n      disabled={disabled}\n      accessible\n      accessibilityRole=\"switch\"\n      accessibilityState={{ checked: isOn, disabled }}\n      accessibilityLabel={accessibilityLabel}\n      accessibilityHint={resolvedAccessibilityHint}\n      accessibilityValue={a11yValue}\n      style={rootStyle}\n    >\n      {labelPosition === 'end' && labelContent}\n\n      <Animated.View style={trackStyle} importantForAccessibility=\"no-hide-descendants\">\n        <Animated.View style={handleStyle}>\n          {onIcon && isOn && (\n            <Animated.View style={switchStaticStyles.iconContainer}>\n              <IconSlot icon={onIcon} variant=\"fill\" style={switchStyles.handleIcon} />\n            </Animated.View>\n          )}\n          {offIcon && !isOn && (\n            <Animated.View style={switchStaticStyles.iconContainer}>\n              <IconSlot icon={offIcon} variant=\"fill\" style={switchStyles.handleIcon} />\n            </Animated.View>\n          )}\n        </Animated.View>\n      </Animated.View>\n\n      {labelPosition === 'start' && labelContent}\n    </Pressable>\n  );\n});\n\nSwitch.displayName = 'Switch';\n\nconst switchStaticStyles = StyleSheet.create((theme) => ({\n  handle: {\n    borderRadius: theme.borderRadius.full,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  iconContainer: {\n    position: 'absolute',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  track: {\n    justifyContent: 'center',\n    borderRadius: theme.borderRadius.full,\n  },\n  root: ({ disabled }: { disabled: boolean }) => ({\n    flexDirection: 'row',\n    alignItems: 'center',\n    alignSelf: 'flex-start',\n    opacity: disabled ? 0.5 : 1,\n  }),\n}));\n\nexport { Switch, type SwitchProps };\n"],"mappings":"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"}

package/dist/components/Text.cjs

@@ -1,5 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
 let react = require("react");
 let react_native = require("react-native");
 let generated_styles = require("../../generated/styles");
@@ -12,22 +13,31 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * @description
 * A styled text component that supports UDS typography variants and colors.
 *
+* @category Display
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { Text } from '@yahoo/uds-mobile';
 *
-* <Text variant="body1" color="primary">
-*   Hello, World!
-* </Text>
+* <Text variant="body1" color="primary">Hello, World!</Text>
+* <Text variant="display1" fontWeight="bold">Heading</Text>
+* <Text variant="label1" color="secondary">Caption text</Text>
 * ```
 *
 * @usage
 * - Use variant prop to set typography (display1, body1, label1, etc.)
 * - Use color prop to set text color from the palette
+* - Use fontWeight to override the variant's default weight
+*
+* @accessibility
+* - Text is readable by screen readers by default
+* - Use appropriate variant sizes for readability
+* - Ensure sufficient color contrast with background
 *
-* @see The {@link https://uds.build/docs/components/text Text Docs} for more info
+* @see {@link Link} for interactive text links
 */
-const Text = (0, react.memo)(function Text$1({ color = "primary", variant = "body1", fontFamily = variant, fontSize = variant, fontWeight, lineHeight = variant, letterSpacing = variant, textAlign, textTransform, textDecorationLine, style, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, flexShrink, verticalAlign, height, minHeight, maxHeight, width, minWidth, maxWidth, dangerouslySetColor, ref, ...props }) {
+const Text = (0, react.memo)(function Text({ color = "primary", variant = "body1", fontFamily = variant, fontSize = variant, fontWeight, lineHeight = variant, letterSpacing = variant, textAlign, textTransform, textDecorationLine, style, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, flexShrink, verticalAlign, height, minHeight, maxHeight, width, minWidth, maxWidth, dangerouslySetColor, ref, ...props }) {
 	generated_styles.styles.useVariants({
 		color,
 		fontFamily,

package/dist/components/Text.d.cts

@@ -1,5 +1,5 @@
 
-import * as react19 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { Text as Text$1, TextProps as TextProps$1, TextStyle } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -8,7 +8,9 @@ import { StyleProps } from "../../generated/styles";
 type TextVariant = Exclude<StyleProps['fontFamily'], 'sans' | 'sans-alt' | 'serif' | 'serif-alt' | 'mono' | 'icons'>;
 type TextDecorationLine = 'none' | 'underline' | 'line-through' | 'underline line-through';
 interface TextProps extends TextProps$1 {
+  /** Ref to the underlying Text element */
   ref?: Ref<Text$1>;
+  /** Text color from the theme palette */
   color?: StyleProps['color'];
   /** Typography variant - sets fontSize, lineHeight, letterSpacing, and fontFamily together */
   variant?: TextVariant;
@@ -22,6 +24,7 @@ interface TextProps extends TextProps$1 {
   lineHeight?: StyleProps['lineHeight'];
   /** Override the letterSpacing independently */
   letterSpacing?: StyleProps['letterSpacing'];
+  /** Text alignment (left, center, right) */
   textAlign?: StyleProps['textAlign'];
   /** Set text transform (not derived from variant) */
   textTransform?: StyleProps['textTransform'];
@@ -75,22 +78,31 @@ interface TextProps extends TextProps$1 {
  * @description
  * A styled text component that supports UDS typography variants and colors.
  *
+ * @category Display
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { Text } from '@yahoo/uds-mobile';
  *
- * <Text variant="body1" color="primary">
- *   Hello, World!
- * </Text>
+ * <Text variant="body1" color="primary">Hello, World!</Text>
+ * <Text variant="display1" fontWeight="bold">Heading</Text>
+ * <Text variant="label1" color="secondary">Caption text</Text>
  * ```
  *
  * @usage
  * - Use variant prop to set typography (display1, body1, label1, etc.)
  * - Use color prop to set text color from the palette
+ * - Use fontWeight to override the variant's default weight
+ *
+ * @accessibility
+ * - Text is readable by screen readers by default
+ * - Use appropriate variant sizes for readability
+ * - Ensure sufficient color contrast with background
  *
- * @see The {@link https://uds.build/docs/components/text Text Docs} for more info
+ * @see {@link Link} for interactive text links
  */
-declare const Text: react19.NamedExoticComponent<TextProps>;
+declare const Text: react.NamedExoticComponent<TextProps>;
 //#endregion
 export { Text, type TextProps };
 //# sourceMappingURL=Text.d.cts.map

package/dist/components/Text.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.cts","names":[],"sources":["../../src/components/Text.tsx"],"sourcesContent":[],"mappings":";;;;;;;KASK,WAAA,GAAc,QACjB;KAMG,kBAAA;AAXoD,UAa/C,SAAA,SAAkB,WAR1B,CAAA;EAMG,GAAA,CAAA,EAGG,GAHH,CAGO,MAHP,CAAA;EAEK,KAAA,CAAA,EAGA,UAHU,CAAA,OAAA,CAAA;EACR;EAAJ,OAAA,CAAA,EAII,WAJJ;EAEE;EAEE,UAAA,CAAA,EAEG,UAFH,CAAA,YAAA,CAAA;EAEG;EAEF,QAAA,CAAA,EAAA,UAAA,CAAA,UAAA,CAAA;EAEE;EAEA,UAAA,CAAA,EAFA,UAEA,CAAA,YAAA,CAAA;EAEG;EACJ,UAAA,CAAA,EAHC,UAGD,CAAA,YAAA,CAAA;EAEI;EAEK,aAAA,CAAA,EALL,UAKK,CAAA,eAAA,CAAA;EAEH,SAAA,CAAA,EANN,UAMM,CAAA,WAAA,CAAA;EAEH;EACQ,aAAA,CAAA,EAPP,UAOO,CAAA,eAAA,CAAA;EACF;EACK,kBAAA,CAAA,EAPL,kBAOK;EACF,eAAA,CAAA,EANN,UAMM,CAAA,iBAAA,CAAA;EACV,YAAA,CAAA,EALC,UAKD,CAAA,cAAA,CAAA;EACK,oBAAA,CAAA,EALI,UAKJ,CAAA,sBAAA,CAAA;EACF,kBAAA,CAAA,EALI,UAKJ,CAAA,oBAAA,CAAA;EACA,uBAAA,CAAA,EALS,UAKT,CAAA,yBAAA,CAAA;EACG,qBAAA,CAAA,EALI,UAKJ,CAAA,uBAAA,CAAA;EACN,WAAA,CAAA,EALA,UAKA,CAAA,aAAA,CAAA;EACQ,gBAAA,CAAA,EALH,UAKG,CAAA,kBAAA,CAAA;EACE,cAAA,CAAA,EALP,UAKO,CAAA,gBAAA,CAAA;EACL,cAAA,CAAA,EALF,UAKE,CAAA,gBAAA,CAAA;EACF,iBAAA,CAAA,EALG,UAKH,CAAA,mBAAA,CAAA;EACA,WAAA,CAAA,EALH,UAKG,CAAA,aAAA,CAAA;EACG,mBAAA,CAAA,EALE,UAKF,CAAA,qBAAA,CAAA;EAEV,qBAAA,CAAA,EANc,UAMd,CAAA,uBAAA,CAAA;EACU,gBAAA,CAAA,EAND,UAMC,CAAA,kBAAA,CAAA;EACF,cAAA,CAAA,EAND,UAMC,CAAA,gBAAA,CAAA;EACF,cAAA,CAAA,EANC,UAMD,CAAA,gBAAA,CAAA;EACH,iBAAA,CAAA,EANO,UAMP,CAAA,mBAAA,CAAA;EACE,OAAA,CAAA,EALL,UAKK,CAAA,SAAA,CAAA;EACF,iBAAA,CAAA,EALO,UAKP,CAAA,mBAAA,CAAA;EAEJ,eAAA,CAAA,EANS,UAMT,CAAA,iBAAA,CAAA;EACQ,aAAA,CAAA,EAND,UAMC,CAAA,eAAA,CAAA;EACE,UAAA,CAAA,EANN,UAMM,CAAA,YAAA,CAAA;EACJ,YAAA,CAAA,EANA,UAMA,CAAA,cAAA,CAAA;EACH,UAAA,CAAA,EANC,UAMD,CAAA,YAAA,CAAA;EACE,MAAA,CAAA,EALL,UAKK,CAAA,QAAA,CAAA;EACF,cAAA,CAAA,EALK,UAKL,CAAA,gBAAA,CAAA;EAEC,gBAAA,CAAA,EANM,UAMN,CAAA,kBAAA,CAAA;EAEG,YAAA,CAAA,EAPD,UAOC,CAAA,cAAA,CAAA;EA5DU,SAAA,CAAA,EAsDd,UAtDc,CAAA,WAAA,CAAA;EAAW,WAAA,CAAA,EAuDvB,UAvDuB,CAAA,aAAA,CAAA;EA6FjC,SAmJJ,CAAA,EAxLY,UAqCJ,CAAA,WAAA,CAAA;eAnCK;kBAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiCZ,MAAI,OAAA,CAAA,qBAAA"}
+{"version":3,"file":"Text.d.cts","names":[],"sources":["../../src/components/Text.tsx"],"mappings":";;;;;;;KASK,WAAA,GAAc,OAAA,CACjB,UAAA;AAAA,KAMG,kBAAA;AAAA,UAEK,SAAA,SAAkB,WAAA;EATZ;EAWd,GAAA,GAAM,GAAA,CAAI,MAAA;EAXO;EAajB,KAAA,GAAQ,UAAA;EANL;EAQH,OAAA,GAAU,WAAA;;EAEV,UAAA,GAAa,UAAA;EAVQ;EAYrB,QAAA,GAAW,UAAA;EAVO;EAYlB,UAAA,GAAa,UAAA;EAVH;EAYV,UAAA,GAAa,UAAA;EAVL;EAYR,aAAA,GAAgB,UAAA;EARH;EAUb,SAAA,GAAY,UAAA;EANC;EAQb,aAAA,GAAgB,UAAA;EAJA;EAMhB,kBAAA,GAAqB,kBAAA;EAErB,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EAEb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EAEZ,UAAA,GAAa,UAAA;EAEb,aAAA,GAAgB,SAAA;EAEhB,MAAA;EACA,KAAA;EACA,SAAA;EACA,SAAA;EACA,QAAA;EACA,QAAA;EAEA,mBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiCI,IAAA,EAAI,KAAA,CAAA,oBAAA,CAAA,SAAA"}

package/dist/components/Text.d.mts

@@ -1,5 +1,5 @@
 
-import * as react9 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { Text as Text$1, TextProps as TextProps$1, TextStyle } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -8,7 +8,9 @@ import { StyleProps } from "../../generated/styles";
 type TextVariant = Exclude<StyleProps['fontFamily'], 'sans' | 'sans-alt' | 'serif' | 'serif-alt' | 'mono' | 'icons'>;
 type TextDecorationLine = 'none' | 'underline' | 'line-through' | 'underline line-through';
 interface TextProps extends TextProps$1 {
+  /** Ref to the underlying Text element */
   ref?: Ref<Text$1>;
+  /** Text color from the theme palette */
   color?: StyleProps['color'];
   /** Typography variant - sets fontSize, lineHeight, letterSpacing, and fontFamily together */
   variant?: TextVariant;
@@ -22,6 +24,7 @@ interface TextProps extends TextProps$1 {
   lineHeight?: StyleProps['lineHeight'];
   /** Override the letterSpacing independently */
   letterSpacing?: StyleProps['letterSpacing'];
+  /** Text alignment (left, center, right) */
   textAlign?: StyleProps['textAlign'];
   /** Set text transform (not derived from variant) */
   textTransform?: StyleProps['textTransform'];
@@ -75,22 +78,31 @@ interface TextProps extends TextProps$1 {
  * @description
  * A styled text component that supports UDS typography variants and colors.
  *
+ * @category Display
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { Text } from '@yahoo/uds-mobile';
  *
- * <Text variant="body1" color="primary">
- *   Hello, World!
- * </Text>
+ * <Text variant="body1" color="primary">Hello, World!</Text>
+ * <Text variant="display1" fontWeight="bold">Heading</Text>
+ * <Text variant="label1" color="secondary">Caption text</Text>
  * ```
  *
  * @usage
  * - Use variant prop to set typography (display1, body1, label1, etc.)
  * - Use color prop to set text color from the palette
+ * - Use fontWeight to override the variant's default weight
+ *
+ * @accessibility
+ * - Text is readable by screen readers by default
+ * - Use appropriate variant sizes for readability
+ * - Ensure sufficient color contrast with background
  *
- * @see The {@link https://uds.build/docs/components/text Text Docs} for more info
+ * @see {@link Link} for interactive text links
  */
-declare const Text: react9.NamedExoticComponent<TextProps>;
+declare const Text: react.NamedExoticComponent<TextProps>;
 //#endregion
 export { Text, type TextProps };
 //# sourceMappingURL=Text.d.mts.map

package/dist/components/Text.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.mts","names":[],"sources":["../../src/components/Text.tsx"],"sourcesContent":[],"mappings":";;;;;;;KASK,WAAA,GAAc,QACjB;KAMG,kBAAA;AAXoD,UAa/C,SAAA,SAAkB,WAR1B,CAAA;EAMG,GAAA,CAAA,EAGG,GAHH,CAGO,MAHP,CAAA;EAEK,KAAA,CAAA,EAGA,UAHU,CAAA,OAAA,CAAA;EACR;EAAJ,OAAA,CAAA,EAII,WAJJ;EAEE;EAEE,UAAA,CAAA,EAEG,UAFH,CAAA,YAAA,CAAA;EAEG;EAEF,QAAA,CAAA,EAAA,UAAA,CAAA,UAAA,CAAA;EAEE;EAEA,UAAA,CAAA,EAFA,UAEA,CAAA,YAAA,CAAA;EAEG;EACJ,UAAA,CAAA,EAHC,UAGD,CAAA,YAAA,CAAA;EAEI;EAEK,aAAA,CAAA,EALL,UAKK,CAAA,eAAA,CAAA;EAEH,SAAA,CAAA,EANN,UAMM,CAAA,WAAA,CAAA;EAEH;EACQ,aAAA,CAAA,EAPP,UAOO,CAAA,eAAA,CAAA;EACF;EACK,kBAAA,CAAA,EAPL,kBAOK;EACF,eAAA,CAAA,EANN,UAMM,CAAA,iBAAA,CAAA;EACV,YAAA,CAAA,EALC,UAKD,CAAA,cAAA,CAAA;EACK,oBAAA,CAAA,EALI,UAKJ,CAAA,sBAAA,CAAA;EACF,kBAAA,CAAA,EALI,UAKJ,CAAA,oBAAA,CAAA;EACA,uBAAA,CAAA,EALS,UAKT,CAAA,yBAAA,CAAA;EACG,qBAAA,CAAA,EALI,UAKJ,CAAA,uBAAA,CAAA;EACN,WAAA,CAAA,EALA,UAKA,CAAA,aAAA,CAAA;EACQ,gBAAA,CAAA,EALH,UAKG,CAAA,kBAAA,CAAA;EACE,cAAA,CAAA,EALP,UAKO,CAAA,gBAAA,CAAA;EACL,cAAA,CAAA,EALF,UAKE,CAAA,gBAAA,CAAA;EACF,iBAAA,CAAA,EALG,UAKH,CAAA,mBAAA,CAAA;EACA,WAAA,CAAA,EALH,UAKG,CAAA,aAAA,CAAA;EACG,mBAAA,CAAA,EALE,UAKF,CAAA,qBAAA,CAAA;EAEV,qBAAA,CAAA,EANc,UAMd,CAAA,uBAAA,CAAA;EACU,gBAAA,CAAA,EAND,UAMC,CAAA,kBAAA,CAAA;EACF,cAAA,CAAA,EAND,UAMC,CAAA,gBAAA,CAAA;EACF,cAAA,CAAA,EANC,UAMD,CAAA,gBAAA,CAAA;EACH,iBAAA,CAAA,EANO,UAMP,CAAA,mBAAA,CAAA;EACE,OAAA,CAAA,EALL,UAKK,CAAA,SAAA,CAAA;EACF,iBAAA,CAAA,EALO,UAKP,CAAA,mBAAA,CAAA;EAEJ,eAAA,CAAA,EANS,UAMT,CAAA,iBAAA,CAAA;EACQ,aAAA,CAAA,EAND,UAMC,CAAA,eAAA,CAAA;EACE,UAAA,CAAA,EANN,UAMM,CAAA,YAAA,CAAA;EACJ,YAAA,CAAA,EANA,UAMA,CAAA,cAAA,CAAA;EACH,UAAA,CAAA,EANC,UAMD,CAAA,YAAA,CAAA;EACE,MAAA,CAAA,EALL,UAKK,CAAA,QAAA,CAAA;EACF,cAAA,CAAA,EALK,UAKL,CAAA,gBAAA,CAAA;EAEC,gBAAA,CAAA,EANM,UAMN,CAAA,kBAAA,CAAA;EAEG,YAAA,CAAA,EAPD,UAOC,CAAA,cAAA,CAAA;EA5DU,SAAA,CAAA,EAsDd,UAtDc,CAAA,WAAA,CAAA;EAAW,WAAA,CAAA,EAuDvB,UAvDuB,CAAA,aAAA,CAAA;EA6FjC,SAmJJ,CAAA,EAxLY,UAqCJ,CAAA,WAAA,CAAA;eAnCK;kBAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiCZ,MAAI,MAAA,CAAA,qBAAA"}
+{"version":3,"file":"Text.d.mts","names":[],"sources":["../../src/components/Text.tsx"],"mappings":";;;;;;;KASK,WAAA,GAAc,OAAA,CACjB,UAAA;AAAA,KAMG,kBAAA;AAAA,UAEK,SAAA,SAAkB,WAAA;EATZ;EAWd,GAAA,GAAM,GAAA,CAAI,MAAA;EAXO;EAajB,KAAA,GAAQ,UAAA;EANL;EAQH,OAAA,GAAU,WAAA;;EAEV,UAAA,GAAa,UAAA;EAVQ;EAYrB,QAAA,GAAW,UAAA;EAVO;EAYlB,UAAA,GAAa,UAAA;EAVH;EAYV,UAAA,GAAa,UAAA;EAVL;EAYR,aAAA,GAAgB,UAAA;EARH;EAUb,SAAA,GAAY,UAAA;EANC;EAQb,aAAA,GAAgB,UAAA;EAJA;EAMhB,kBAAA,GAAqB,kBAAA;EAErB,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EAEb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EAEZ,UAAA,GAAa,UAAA;EAEb,aAAA,GAAgB,SAAA;EAEhB,MAAA;EACA,KAAA;EACA,SAAA;EACA,SAAA;EACA,QAAA;EACA,QAAA;EAEA,mBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiCI,IAAA,EAAI,KAAA,CAAA,oBAAA,CAAA,SAAA"}

package/dist/components/Text.mjs

@@ -11,22 +11,31 @@ import { jsx } from "react/jsx-runtime";
 * @description
 * A styled text component that supports UDS typography variants and colors.
 *
+* @category Display
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { Text } from '@yahoo/uds-mobile';
 *
-* <Text variant="body1" color="primary">
-*   Hello, World!
-* </Text>
+* <Text variant="body1" color="primary">Hello, World!</Text>
+* <Text variant="display1" fontWeight="bold">Heading</Text>
+* <Text variant="label1" color="secondary">Caption text</Text>
 * ```
 *
 * @usage
 * - Use variant prop to set typography (display1, body1, label1, etc.)
 * - Use color prop to set text color from the palette
+* - Use fontWeight to override the variant's default weight
+*
+* @accessibility
+* - Text is readable by screen readers by default
+* - Use appropriate variant sizes for readability
+* - Ensure sufficient color contrast with background
 *
-* @see The {@link https://uds.build/docs/components/text Text Docs} for more info
+* @see {@link Link} for interactive text links
 */
-const Text = memo(function Text$2({ color = "primary", variant = "body1", fontFamily = variant, fontSize = variant, fontWeight, lineHeight = variant, letterSpacing = variant, textAlign, textTransform, textDecorationLine, style, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, flexShrink, verticalAlign, height, minHeight, maxHeight, width, minWidth, maxWidth, dangerouslySetColor, ref, ...props }) {
+const Text = memo(function Text({ color = "primary", variant = "body1", fontFamily = variant, fontSize = variant, fontWeight, lineHeight = variant, letterSpacing = variant, textAlign, textTransform, textDecorationLine, style, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, flexShrink, verticalAlign, height, minHeight, maxHeight, width, minWidth, maxWidth, dangerouslySetColor, ref, ...props }) {
 	styles.useVariants({
 		color,
 		fontFamily,

package/dist/components/Text.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.mjs","names":["Text","RNText"],"sources":["../../src/components/Text.tsx"],"sourcesContent":["import type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { StyleProp, TextProps as RNTextProps, TextStyle } from 'react-native';\nimport { Text as RNText } from 'react-native';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\n\n// TextVariant is a subset of fontFamily that represents typography variants\ntype TextVariant = Exclude<\n  StyleProps['fontFamily'],\n  'sans' | 'sans-alt' | 'serif' | 'serif-alt' | 'mono' | 'icons'\n>;\n\n// React Native text decoration line values\n// See: https://reactnative.dev/docs/text-style-props#textdecorationline\ntype TextDecorationLine = 'none' | 'underline' | 'line-through' | 'underline line-through';\n\ninterface TextProps extends RNTextProps {\n  ref?: Ref<RNText>;\n  // Text-specific\n  color?: StyleProps['color'];\n  /** Typography variant - sets fontSize, lineHeight, letterSpacing, and fontFamily together */\n  variant?: TextVariant;\n  /** Override the fontFamily independently */\n  fontFamily?: StyleProps['fontFamily'];\n  /** Override the fontSize independently */\n  fontSize?: StyleProps['fontSize'];\n  /** Set font weight (not derived from variant) */\n  fontWeight?: StyleProps['fontWeight'];\n  /** Override the lineHeight independently */\n  lineHeight?: StyleProps['lineHeight'];\n  /** Override the letterSpacing independently */\n  letterSpacing?: StyleProps['letterSpacing'];\n  textAlign?: StyleProps['textAlign'];\n  /** Set text transform (not derived from variant) */\n  textTransform?: StyleProps['textTransform'];\n  /** Text decoration (underline, line-through, etc.) */\n  textDecorationLine?: TextDecorationLine;\n  // Background\n  backgroundColor?: StyleProps['backgroundColor'];\n  // Border\n  borderRadius?: StyleProps['borderRadius'];\n  borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n  borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n  borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n  borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n  borderColor?: StyleProps['borderColor'];\n  borderStartColor?: StyleProps['borderStartColor'];\n  borderEndColor?: StyleProps['borderEndColor'];\n  borderTopColor?: StyleProps['borderTopColor'];\n  borderBottomColor?: StyleProps['borderBottomColor'];\n  borderWidth?: StyleProps['borderWidth'];\n  borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n  borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n  borderStartWidth?: StyleProps['borderStartWidth'];\n  borderEndWidth?: StyleProps['borderEndWidth'];\n  borderTopWidth?: StyleProps['borderTopWidth'];\n  borderBottomWidth?: StyleProps['borderBottomWidth'];\n  // Spacing\n  spacing?: StyleProps['spacing'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingStart?: StyleProps['spacingStart'];\n  spacingTop?: StyleProps['spacingTop'];\n  // Offset\n  offset?: StyleProps['offset'];\n  offsetVertical?: StyleProps['offsetVertical'];\n  offsetHorizontal?: StyleProps['offsetHorizontal'];\n  offsetBottom?: StyleProps['offsetBottom'];\n  offsetEnd?: StyleProps['offsetEnd'];\n  offsetStart?: StyleProps['offsetStart'];\n  offsetTop?: StyleProps['offsetTop'];\n  // Flex\n  flexShrink?: StyleProps['flexShrink'];\n  // Vertical Alignment\n  verticalAlign?: TextStyle['textAlignVertical'];\n  // Size\n  height?: number | `${number}%`;\n  width?: number | `${number}%`;\n  minHeight?: number | `${number}%`;\n  maxHeight?: number | `${number}%`;\n  minWidth?: number | `${number}%`;\n  maxWidth?: number | `${number}%`;\n  // Dangerously set props\n  dangerouslySetColor?: string;\n}\n\n/**\n * **📝 A text component with UDS styling**\n *\n * @description\n * A styled text component that supports UDS typography variants and colors.\n *\n * @example\n * ```tsx\n * import { Text } from '@yahoo/uds-mobile';\n *\n * <Text variant=\"body1\" color=\"primary\">\n *   Hello, World!\n * </Text>\n * ```\n *\n * @usage\n * - Use variant prop to set typography (display1, body1, label1, etc.)\n * - Use color prop to set text color from the palette\n *\n * @see The {@link https://uds.build/docs/components/text Text Docs} for more info\n */\nconst Text = memo(function Text({\n  // Text-specific\n  color = 'primary',\n  variant = 'body1',\n  fontFamily = variant,\n  fontSize = variant,\n  fontWeight,\n  lineHeight = variant,\n  letterSpacing = variant,\n  textAlign,\n  textTransform,\n  textDecorationLine,\n  style,\n  // Background\n  backgroundColor,\n  // Border\n  borderRadius,\n  borderTopStartRadius,\n  borderTopEndRadius,\n  borderBottomStartRadius,\n  borderBottomEndRadius,\n  borderColor,\n  borderStartColor,\n  borderEndColor,\n  borderTopColor,\n  borderBottomColor,\n  borderWidth,\n  borderVerticalWidth,\n  borderHorizontalWidth,\n  borderStartWidth,\n  borderEndWidth,\n  borderTopWidth,\n  borderBottomWidth,\n  // Spacing\n  spacing,\n  spacingHorizontal,\n  spacingVertical,\n  spacingBottom,\n  spacingEnd,\n  spacingStart,\n  spacingTop,\n  // Offset\n  offset,\n  offsetVertical,\n  offsetHorizontal,\n  offsetBottom,\n  offsetEnd,\n  offsetStart,\n  offsetTop,\n  // Flex\n  flexShrink,\n  // Vertical Alignment\n  verticalAlign,\n  // Size\n  height,\n  minHeight,\n  maxHeight,\n  width,\n  minWidth,\n  maxWidth,\n  // Dangerously set props\n  dangerouslySetColor,\n  ref,\n  // Rest\n  ...props\n}: TextProps) {\n  styles.useVariants({\n    // Text styles\n    color,\n    fontFamily,\n    fontSize,\n    fontWeight,\n    lineHeight,\n    letterSpacing,\n    textAlign,\n    textTransform,\n    // Background\n    backgroundColor,\n    // Border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    borderColor,\n    borderStartColor,\n    borderEndColor,\n    borderTopColor,\n    borderBottomColor,\n    borderWidth,\n    borderVerticalWidth,\n    borderHorizontalWidth,\n    borderStartWidth,\n    borderEndWidth,\n    borderTopWidth,\n    borderBottomWidth,\n    // Spacing\n    spacing,\n    spacingHorizontal,\n    spacingVertical,\n    spacingBottom,\n    spacingEnd,\n    spacingStart,\n    spacingTop,\n    // Offset\n    offset,\n    offsetVertical,\n    offsetHorizontal,\n    offsetBottom,\n    offsetEnd,\n    offsetStart,\n    offsetTop,\n    // Flex\n    flexShrink,\n  });\n\n  // styles.foundation must be in deps - it returns a new reference when variants change.\n  const computedStyle: StyleProp<TextStyle> = useMemo(\n    () => [\n      textDecorationLine ? { textDecorationLine } : undefined,\n      dangerouslySetColor ? { color: dangerouslySetColor } : undefined,\n      verticalAlign ? { textAlignVertical: verticalAlign } : undefined,\n      height ? { height } : undefined,\n      minHeight ? { minHeight } : undefined,\n      maxHeight ? { maxHeight } : undefined,\n      width ? { width } : undefined,\n      minWidth ? { minWidth } : undefined,\n      maxWidth ? { maxWidth } : undefined,\n      styles.foundation,\n      style,\n    ],\n    [\n      textDecorationLine,\n      dangerouslySetColor,\n      verticalAlign,\n      height,\n      minHeight,\n      maxHeight,\n      width,\n      minWidth,\n      maxWidth,\n      style,\n      styles.foundation,\n    ],\n  );\n\n  return <RNText ref={ref} style={computedStyle} {...props} />;\n});\n\nText.displayName = 'Text';\n\nexport { Text, type TextProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+GA,MAAM,OAAO,KAAK,SAASA,OAAK,EAE9B,QAAQ,WACR,UAAU,SACV,aAAa,SACb,WAAW,SACX,YACA,aAAa,SACb,gBAAgB,SAChB,WACA,eACA,oBACA,OAEA,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,SACA,mBACA,iBACA,eACA,YACA,cACA,YAEA,QACA,gBACA,kBACA,cACA,WACA,aACA,WAEA,YAEA,eAEA,QACA,WACA,WACA,OACA,UACA,UAEA,qBACA,KAEA,GAAG,SACS;AACZ,QAAO,YAAY;EAEjB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACD,CAAC;AAgCF,QAAO,oBAACC;EAAY;EAAK,OA7BmB,cACpC;GACJ,qBAAqB,EAAE,oBAAoB,GAAG;GAC9C,sBAAsB,EAAE,OAAO,qBAAqB,GAAG;GACvD,gBAAgB,EAAE,mBAAmB,eAAe,GAAG;GACvD,SAAS,EAAE,QAAQ,GAAG;GACtB,YAAY,EAAE,WAAW,GAAG;GAC5B,YAAY,EAAE,WAAW,GAAG;GAC5B,QAAQ,EAAE,OAAO,GAAG;GACpB,WAAW,EAAE,UAAU,GAAG;GAC1B,WAAW,EAAE,UAAU,GAAG;GAC1B,OAAO;GACP;GACD,EACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,OAAO;GACR,CACF;EAE8C,GAAI;GAAS;EAC5D;AAEF,KAAK,cAAc"}
+{"version":3,"file":"Text.mjs","names":["RNText"],"sources":["../../src/components/Text.tsx"],"sourcesContent":["import type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { StyleProp, TextProps as RNTextProps, TextStyle } from 'react-native';\nimport { Text as RNText } from 'react-native';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\n\n// TextVariant is a subset of fontFamily that represents typography variants\ntype TextVariant = Exclude<\n  StyleProps['fontFamily'],\n  'sans' | 'sans-alt' | 'serif' | 'serif-alt' | 'mono' | 'icons'\n>;\n\n// React Native text decoration line values\n// See: https://reactnative.dev/docs/text-style-props#textdecorationline\ntype TextDecorationLine = 'none' | 'underline' | 'line-through' | 'underline line-through';\n\ninterface TextProps extends RNTextProps {\n  /** Ref to the underlying Text element */\n  ref?: Ref<RNText>;\n  /** Text color from the theme palette */\n  color?: StyleProps['color'];\n  /** Typography variant - sets fontSize, lineHeight, letterSpacing, and fontFamily together */\n  variant?: TextVariant;\n  /** Override the fontFamily independently */\n  fontFamily?: StyleProps['fontFamily'];\n  /** Override the fontSize independently */\n  fontSize?: StyleProps['fontSize'];\n  /** Set font weight (not derived from variant) */\n  fontWeight?: StyleProps['fontWeight'];\n  /** Override the lineHeight independently */\n  lineHeight?: StyleProps['lineHeight'];\n  /** Override the letterSpacing independently */\n  letterSpacing?: StyleProps['letterSpacing'];\n  /** Text alignment (left, center, right) */\n  textAlign?: StyleProps['textAlign'];\n  /** Set text transform (not derived from variant) */\n  textTransform?: StyleProps['textTransform'];\n  /** Text decoration (underline, line-through, etc.) */\n  textDecorationLine?: TextDecorationLine;\n  // Background\n  backgroundColor?: StyleProps['backgroundColor'];\n  // Border\n  borderRadius?: StyleProps['borderRadius'];\n  borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n  borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n  borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n  borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n  borderColor?: StyleProps['borderColor'];\n  borderStartColor?: StyleProps['borderStartColor'];\n  borderEndColor?: StyleProps['borderEndColor'];\n  borderTopColor?: StyleProps['borderTopColor'];\n  borderBottomColor?: StyleProps['borderBottomColor'];\n  borderWidth?: StyleProps['borderWidth'];\n  borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n  borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n  borderStartWidth?: StyleProps['borderStartWidth'];\n  borderEndWidth?: StyleProps['borderEndWidth'];\n  borderTopWidth?: StyleProps['borderTopWidth'];\n  borderBottomWidth?: StyleProps['borderBottomWidth'];\n  // Spacing\n  spacing?: StyleProps['spacing'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingStart?: StyleProps['spacingStart'];\n  spacingTop?: StyleProps['spacingTop'];\n  // Offset\n  offset?: StyleProps['offset'];\n  offsetVertical?: StyleProps['offsetVertical'];\n  offsetHorizontal?: StyleProps['offsetHorizontal'];\n  offsetBottom?: StyleProps['offsetBottom'];\n  offsetEnd?: StyleProps['offsetEnd'];\n  offsetStart?: StyleProps['offsetStart'];\n  offsetTop?: StyleProps['offsetTop'];\n  // Flex\n  flexShrink?: StyleProps['flexShrink'];\n  // Vertical Alignment\n  verticalAlign?: TextStyle['textAlignVertical'];\n  // Size\n  height?: number | `${number}%`;\n  width?: number | `${number}%`;\n  minHeight?: number | `${number}%`;\n  maxHeight?: number | `${number}%`;\n  minWidth?: number | `${number}%`;\n  maxWidth?: number | `${number}%`;\n  // Dangerously set props\n  dangerouslySetColor?: string;\n}\n\n/**\n * **📝 A text component with UDS styling**\n *\n * @description\n * A styled text component that supports UDS typography variants and colors.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Text } from '@yahoo/uds-mobile';\n *\n * <Text variant=\"body1\" color=\"primary\">Hello, World!</Text>\n * <Text variant=\"display1\" fontWeight=\"bold\">Heading</Text>\n * <Text variant=\"label1\" color=\"secondary\">Caption text</Text>\n * ```\n *\n * @usage\n * - Use variant prop to set typography (display1, body1, label1, etc.)\n * - Use color prop to set text color from the palette\n * - Use fontWeight to override the variant's default weight\n *\n * @accessibility\n * - Text is readable by screen readers by default\n * - Use appropriate variant sizes for readability\n * - Ensure sufficient color contrast with background\n *\n * @see {@link Link} for interactive text links\n */\nconst Text = memo(function Text({\n  // Text-specific\n  color = 'primary',\n  variant = 'body1',\n  fontFamily = variant,\n  fontSize = variant,\n  fontWeight,\n  lineHeight = variant,\n  letterSpacing = variant,\n  textAlign,\n  textTransform,\n  textDecorationLine,\n  style,\n  // Background\n  backgroundColor,\n  // Border\n  borderRadius,\n  borderTopStartRadius,\n  borderTopEndRadius,\n  borderBottomStartRadius,\n  borderBottomEndRadius,\n  borderColor,\n  borderStartColor,\n  borderEndColor,\n  borderTopColor,\n  borderBottomColor,\n  borderWidth,\n  borderVerticalWidth,\n  borderHorizontalWidth,\n  borderStartWidth,\n  borderEndWidth,\n  borderTopWidth,\n  borderBottomWidth,\n  // Spacing\n  spacing,\n  spacingHorizontal,\n  spacingVertical,\n  spacingBottom,\n  spacingEnd,\n  spacingStart,\n  spacingTop,\n  // Offset\n  offset,\n  offsetVertical,\n  offsetHorizontal,\n  offsetBottom,\n  offsetEnd,\n  offsetStart,\n  offsetTop,\n  // Flex\n  flexShrink,\n  // Vertical Alignment\n  verticalAlign,\n  // Size\n  height,\n  minHeight,\n  maxHeight,\n  width,\n  minWidth,\n  maxWidth,\n  // Dangerously set props\n  dangerouslySetColor,\n  ref,\n  // Rest\n  ...props\n}: TextProps) {\n  styles.useVariants({\n    // Text styles\n    color,\n    fontFamily,\n    fontSize,\n    fontWeight,\n    lineHeight,\n    letterSpacing,\n    textAlign,\n    textTransform,\n    // Background\n    backgroundColor,\n    // Border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    borderColor,\n    borderStartColor,\n    borderEndColor,\n    borderTopColor,\n    borderBottomColor,\n    borderWidth,\n    borderVerticalWidth,\n    borderHorizontalWidth,\n    borderStartWidth,\n    borderEndWidth,\n    borderTopWidth,\n    borderBottomWidth,\n    // Spacing\n    spacing,\n    spacingHorizontal,\n    spacingVertical,\n    spacingBottom,\n    spacingEnd,\n    spacingStart,\n    spacingTop,\n    // Offset\n    offset,\n    offsetVertical,\n    offsetHorizontal,\n    offsetBottom,\n    offsetEnd,\n    offsetStart,\n    offsetTop,\n    // Flex\n    flexShrink,\n  });\n\n  // styles.foundation must be in deps - it returns a new reference when variants change.\n  const computedStyle: StyleProp<TextStyle> = useMemo(\n    () => [\n      textDecorationLine ? { textDecorationLine } : undefined,\n      dangerouslySetColor ? { color: dangerouslySetColor } : undefined,\n      verticalAlign ? { textAlignVertical: verticalAlign } : undefined,\n      height ? { height } : undefined,\n      minHeight ? { minHeight } : undefined,\n      maxHeight ? { maxHeight } : undefined,\n      width ? { width } : undefined,\n      minWidth ? { minWidth } : undefined,\n      maxWidth ? { maxWidth } : undefined,\n      styles.foundation,\n      style,\n    ],\n    [\n      textDecorationLine,\n      dangerouslySetColor,\n      verticalAlign,\n      height,\n      minHeight,\n      maxHeight,\n      width,\n      minWidth,\n      maxWidth,\n      style,\n      styles.foundation,\n    ],\n  );\n\n  return <RNText ref={ref} style={computedStyle} {...props} />;\n});\n\nText.displayName = 'Text';\n\nexport { Text, type TextProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0HA,MAAM,OAAO,KAAK,SAAS,KAAK,EAE9B,QAAQ,WACR,UAAU,SACV,aAAa,SACb,WAAW,SACX,YACA,aAAa,SACb,gBAAgB,SAChB,WACA,eACA,oBACA,OAEA,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,SACA,mBACA,iBACA,eACA,YACA,cACA,YAEA,QACA,gBACA,kBACA,cACA,WACA,aACA,WAEA,YAEA,eAEA,QACA,WACA,WACA,OACA,UACA,UAEA,qBACA,KAEA,GAAG,SACS;AACZ,QAAO,YAAY;EAEjB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACD,CAAC;AAgCF,QAAO,oBAACA;EAAY;EAAK,OA7BmB,cACpC;GACJ,qBAAqB,EAAE,oBAAoB,GAAG;GAC9C,sBAAsB,EAAE,OAAO,qBAAqB,GAAG;GACvD,gBAAgB,EAAE,mBAAmB,eAAe,GAAG;GACvD,SAAS,EAAE,QAAQ,GAAG;GACtB,YAAY,EAAE,WAAW,GAAG;GAC5B,YAAY,EAAE,WAAW,GAAG;GAC5B,QAAQ,EAAE,OAAO,GAAG;GACpB,WAAW,EAAE,UAAU,GAAG;GAC1B,WAAW,EAAE,UAAU,GAAG;GAC1B,OAAO;GACP;GACD,EACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,OAAO;GACR,CACF;EAE8C,GAAI;GAAS;EAC5D;AAEF,KAAK,cAAc"}

package/dist/components/VStack.cjs

@@ -1,5 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
 const require_components_Box = require('./Box.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -12,6 +13,9 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * A convenience component for creating vertical layouts. It's a Box with
 * `flexDirection="column"` preset.
 *
+* @category Layout
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { VStack } from '@yahoo/uds-mobile';
@@ -26,11 +30,10 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * - Use for vertical arrangements of elements
 * - Use gap prop for consistent spacing between children
 *
-* @see The {@link https://uds.build/docs/components/v-stack VStack Docs} for more info
-*
-* @related [HStack](https://uds.build/docs/components/h-stack), [Box](https://uds.build/docs/components/box)
+* @see {@link HStack} for horizontal layouts
+* @see {@link Box} for custom flex layouts
 */
-const VStack = (0, react.memo)(function VStack$1({ gap, children, ref, ...props }) {
+const VStack = (0, react.memo)(function VStack({ gap, children, ref, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
 		ref,
 		flexDirection: "column",

package/dist/components/VStack.d.cts

@@ -1,13 +1,15 @@
 
 import { BoxProps } from "./Box.cjs";
-import * as react18 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { View } from "react-native";
 import { StyleProps } from "../../generated/styles";
 
 //#region src/components/VStack.d.ts
 interface VStackProps extends Omit<BoxProps, 'ref'> {
+  /** Gap between child elements */
   gap?: StyleProps['rowGap'];
+  /** Ref to the underlying View */
   ref?: Ref<View>;
 }
 /**
@@ -17,6 +19,9 @@ interface VStackProps extends Omit<BoxProps, 'ref'> {
  * A convenience component for creating vertical layouts. It's a Box with
  * `flexDirection="column"` preset.
  *
+ * @category Layout
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { VStack } from '@yahoo/uds-mobile';
@@ -31,11 +36,10 @@ interface VStackProps extends Omit<BoxProps, 'ref'> {
  * - Use for vertical arrangements of elements
  * - Use gap prop for consistent spacing between children
  *
- * @see The {@link https://uds.build/docs/components/v-stack VStack Docs} for more info
- *
- * @related [HStack](https://uds.build/docs/components/h-stack), [Box](https://uds.build/docs/components/box)
+ * @see {@link HStack} for horizontal layouts
+ * @see {@link Box} for custom flex layouts
  */
-declare const VStack: react18.NamedExoticComponent<VStackProps>;
+declare const VStack: react.NamedExoticComponent<VStackProps>;
 //#endregion
 export { VStack, type VStackProps };
 //# sourceMappingURL=VStack.d.cts.map

package/dist/components/VStack.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"VStack.d.cts","names":[],"sources":["../../src/components/VStack.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAQU,WAAA,SAAoB,KAAK;QAC3B;QACA,IAAI;AAL0B;;;;;;;AAGJ;;;;;;;;;;;;;;;;;;;cA8B5B,QAAM,OAAA,CAAA,qBAAA"}
+{"version":3,"file":"VStack.d.cts","names":[],"sources":["../../src/components/VStack.tsx"],"mappings":";;;;;;;;UAQU,WAAA,SAAoB,IAAA,CAAK,QAAA;;EAEjC,GAAA,GAAM,UAAA;EAFE;EAIR,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;cA8BV,MAAA,EAAM,KAAA,CAAA,oBAAA,CAAA,WAAA"}

package/dist/components/VStack.d.mts

@@ -1,13 +1,15 @@
 
 import { BoxProps } from "./Box.mjs";
-import * as react8 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { View } from "react-native";
 import { StyleProps } from "../../generated/styles";
 
 //#region src/components/VStack.d.ts
 interface VStackProps extends Omit<BoxProps, 'ref'> {
+  /** Gap between child elements */
   gap?: StyleProps['rowGap'];
+  /** Ref to the underlying View */
   ref?: Ref<View>;
 }
 /**
@@ -17,6 +19,9 @@ interface VStackProps extends Omit<BoxProps, 'ref'> {
  * A convenience component for creating vertical layouts. It's a Box with
  * `flexDirection="column"` preset.
  *
+ * @category Layout
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { VStack } from '@yahoo/uds-mobile';
@@ -31,11 +36,10 @@ interface VStackProps extends Omit<BoxProps, 'ref'> {
  * - Use for vertical arrangements of elements
  * - Use gap prop for consistent spacing between children
  *
- * @see The {@link https://uds.build/docs/components/v-stack VStack Docs} for more info
- *
- * @related [HStack](https://uds.build/docs/components/h-stack), [Box](https://uds.build/docs/components/box)
+ * @see {@link HStack} for horizontal layouts
+ * @see {@link Box} for custom flex layouts
  */
-declare const VStack: react8.NamedExoticComponent<VStackProps>;
+declare const VStack: react.NamedExoticComponent<VStackProps>;
 //#endregion
 export { VStack, type VStackProps };
 //# sourceMappingURL=VStack.d.mts.map

package/dist/components/VStack.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"VStack.d.mts","names":[],"sources":["../../src/components/VStack.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAQU,WAAA,SAAoB,KAAK;QAC3B;QACA,IAAI;AAL0B;;;;;;;AAGJ;;;;;;;;;;;;;;;;;;;cA8B5B,QAAM,MAAA,CAAA,qBAAA"}
+{"version":3,"file":"VStack.d.mts","names":[],"sources":["../../src/components/VStack.tsx"],"mappings":";;;;;;;;UAQU,WAAA,SAAoB,IAAA,CAAK,QAAA;;EAEjC,GAAA,GAAM,UAAA;EAFE;EAIR,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;cA8BV,MAAA,EAAM,KAAA,CAAA,oBAAA,CAAA,WAAA"}

package/dist/components/VStack.mjs

@@ -11,6 +11,9 @@ import { jsx } from "react/jsx-runtime";
 * A convenience component for creating vertical layouts. It's a Box with
 * `flexDirection="column"` preset.
 *
+* @category Layout
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { VStack } from '@yahoo/uds-mobile';
@@ -25,11 +28,10 @@ import { jsx } from "react/jsx-runtime";
 * - Use for vertical arrangements of elements
 * - Use gap prop for consistent spacing between children
 *
-* @see The {@link https://uds.build/docs/components/v-stack VStack Docs} for more info
-*
-* @related [HStack](https://uds.build/docs/components/h-stack), [Box](https://uds.build/docs/components/box)
+* @see {@link HStack} for horizontal layouts
+* @see {@link Box} for custom flex layouts
 */
-const VStack = memo(function VStack$1({ gap, children, ref, ...props }) {
+const VStack = memo(function VStack({ gap, children, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Box, {
 		ref,
 		flexDirection: "column",

package/dist/components/VStack.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VStack.mjs","names":["VStack"],"sources":["../../src/components/VStack.tsx"],"sourcesContent":["import type { Ref } from 'react';\nimport { memo } from 'react';\nimport type { View } from 'react-native';\n\nimport type { StyleProps } from '../../generated/styles';\nimport type { BoxProps } from './Box';\nimport { Box } from './Box';\n\ninterface VStackProps extends Omit<BoxProps, 'ref'> {\n  gap?: StyleProps['rowGap'];\n  ref?: Ref<View>;\n}\n\n/**\n * **📦 A vertical stack layout component**\n *\n * @description\n * A convenience component for creating vertical layouts. It's a Box with\n * `flexDirection=\"column\"` preset.\n *\n * @example\n * ```tsx\n * import { VStack } from '@yahoo/uds-mobile';\n *\n * <VStack gap=\"4\" alignItems=\"stretch\">\n *   <Text>Item 1</Text>\n *   <Text>Item 2</Text>\n * </VStack>\n * ```\n *\n * @usage\n * - Use for vertical arrangements of elements\n * - Use gap prop for consistent spacing between children\n *\n * @see The {@link https://uds.build/docs/components/v-stack VStack Docs} for more info\n *\n * @related [HStack](https://uds.build/docs/components/h-stack), [Box](https://uds.build/docs/components/box)\n */\nconst VStack = memo(function VStack({ gap, children, ref, ...props }: VStackProps) {\n  return (\n    <Box ref={ref} flexDirection=\"column\" columnGap={gap} rowGap={gap} {...props}>\n      {children}\n    </Box>\n  );\n});\n\nVStack.displayName = 'VStack';\n\nexport { VStack, type VStackProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAM,SAAS,KAAK,SAASA,SAAO,EAAE,KAAK,UAAU,KAAK,GAAG,SAAsB;AACjF,QACE,oBAAC;EAAS;EAAK,eAAc;EAAS,WAAW;EAAK,QAAQ;EAAK,GAAI;EACpE;GACG;EAER;AAEF,OAAO,cAAc"}
+{"version":3,"file":"VStack.mjs","names":[],"sources":["../../src/components/VStack.tsx"],"sourcesContent":["import type { Ref } from 'react';\nimport { memo } from 'react';\nimport type { View } from 'react-native';\n\nimport type { StyleProps } from '../../generated/styles';\nimport type { BoxProps } from './Box';\nimport { Box } from './Box';\n\ninterface VStackProps extends Omit<BoxProps, 'ref'> {\n  /** Gap between child elements */\n  gap?: StyleProps['rowGap'];\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n}\n\n/**\n * **📦 A vertical stack layout component**\n *\n * @description\n * A convenience component for creating vertical layouts. It's a Box with\n * `flexDirection=\"column\"` preset.\n *\n * @category Layout\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { VStack } from '@yahoo/uds-mobile';\n *\n * <VStack gap=\"4\" alignItems=\"stretch\">\n *   <Text>Item 1</Text>\n *   <Text>Item 2</Text>\n * </VStack>\n * ```\n *\n * @usage\n * - Use for vertical arrangements of elements\n * - Use gap prop for consistent spacing between children\n *\n * @see {@link HStack} for horizontal layouts\n * @see {@link Box} for custom flex layouts\n */\nconst VStack = memo(function VStack({ gap, children, ref, ...props }: VStackProps) {\n  return (\n    <Box ref={ref} flexDirection=\"column\" columnGap={gap} rowGap={gap} {...props}>\n      {children}\n    </Box>\n  );\n});\n\nVStack.displayName = 'VStack';\n\nexport { VStack, type VStackProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAM,SAAS,KAAK,SAAS,OAAO,EAAE,KAAK,UAAU,KAAK,GAAG,SAAsB;AACjF,QACE,oBAAC;EAAS;EAAK,eAAc;EAAS,WAAW;EAAK,QAAQ;EAAK,GAAI;EACpE;GACG;EAER;AAEF,OAAO,cAAc"}

package/dist/icons/dist/glyphMap.d.cts

@@ -1,6 +1,5 @@
 
 //#region ../icons/dist/glyphMap.d.ts
-
 //#region generated/font/glyphMap.d.ts
 type GlyphName = (typeof glyphNames)[number];
 declare const glyphNames: readonly ["A11Y", "Accessible", "AccountRecover", "AccountRefresh", "AccountSwitchAlt", "AccountSwitcher", "AcousticGuitar", "Add", "AddBell", "AddCalendar", "AddCheckCircle", "AddCircle", "AddContactCard", "AddDocument", "AddFace", "AddFolder", "AddPaperPlane", "AddPeople", "AddQuestion", "AddSearch", "AddSquare", "AffiliateLink", "AirQuality", "Airplane", "AirplaneLanding", "AirplaneTakeOff", "AngledSquareOnSquare", "AnyFile", "AppSwitcher", "AquariusAstrology", "Archive", "AriesAstrology", "ArrowDown", "ArrowDownCircle", "ArrowLeft", "ArrowLineDown", "ArrowLineUp", "ArrowRight", "ArrowUp", "Article", "ArtisticGymnastics", "Ascender", "AudioFile", "Authenticator", "AutoDownload", "AutoSaveOffline", "AutoSaveSync", "AutoSaveUpload", "AutoSaveUploadFail", "AutoSaved", "BabyBottle", "BackTimeTen", "Badge", "Balance", "BallInWater", "Barometer", "BaseBallBat", "Baseball", "Basketball", "BasketballHoop", "BeachUmbrella", "Bed", "Bell", "Below", "BigDownArrow", "BigLeftArrow", "BigRightArrow", "BigRightStraightArrow", "BigUpArrow", "Bike", "Bingo", "Binoculars", "BlackJack", "Bold", "Bolt", "Bookmark", "BottomLine", "BowAndArrow", "BoxCircle", "BoxFront", "BoxOnBox", "BoxingGlove", "Browser", "BubbleZone", "Building", "BulletPointContainer", "BulletPoints", "Bullseye", "BusFront", "BusinessBag", "Cake", "Calendar", "CalendarClock", "CalendarConfirm", "CalendarFile", "CalendarICSFile", "CalendarRightArrow", "Camera", "CancerAstrology", "Canoe", "CapriconAstrology", "Car", "CardsCheck", "Cash", "CelebrityStar", "CenterAlignment", "ChatAi", "Check", "CheckBookmark", "CheckBox", "CheckCircle", "CheckDocuments", "CheckEnvelope", "CheckPeople", "CheckSpeechBubble", "CheckVoteBallot", "Checklist", "ChevronDown", "ChevronLeft", "ChevronLeftPeople", "ChevronRight", "ChevronRightPeople", "ChevronUp", "Circle", "ClearText", "Clipboard", "Clock", "Clone", "ClosedCaption", "Cloud", "CloudDay", "CloudNight", "Cocktails", "Coffee", "CoffeeTakeout", "Cog", "Coin", "CollapseColumn", "Command", "Compass", "ComputerChip", "Connection", "ConnectionScreen", "ContactBook", "ContactCard", "Convert", "ConvertAlt", "ConvertLeft", "ConvertRight", "Cookies", "Coupon", "CreditCard", "CreditCardPayment", "CrescentMoon", "Cricket", "Cross", "CrossCircle", "CrossEnvelope", "CrossPeople", "CrossShield", "Crossword", "Cycling", "DOCFile", "DailyFantasy", "DaisyFlower", "Dandelion", "DataBook", "DataCloud", "DataSilo", "DataStorage", "Debug", "DeleteTab", "DeliveryPackage", "Dense", "DenyCircle", "Descender", "Desktop", "DiagonalKey", "DiagonalLeftDown", "DiagonalLeftUp", "DiagonalRightDown", "DiagonalRightUp", "Diamond", "Dice", "Dining", "Direction", "DiscoBall", "Document", "DocumentImageRectangle", "DocumentImageSquare", "DocumentRectangle", "DollarCircleArrows", "DotEnvelope", "DotTwoRings", "DoubleBigLeftArrow", "DoubleChevronLeft", "DoubleChevronRight", "DownCurveArrow", "Download", "DownloadCircle", "DownloadComplete", "DownloadInProgressCircle", "DraftDocument", "DragVertical", "Dusk", "Easel", "Eclipse", "Edit", "EmailVerification", "Emails", "Embed", "EntertainmentTv", "Envelope", "Error", "ExpandArrowLeft", "ExpandArrowRight", "ExpandColumn", "Eye", "EyeSearch", "EyeShut", "FaceID", "FallLeaf", "Family", "FastForward", "FencingEpee", "FilmReel", "FilmRoll", "FingerPointLeftArrow", "FingerPointRightArrow", "FingerPointSelect", "FingerPrint", "Fire", "FirstAidKit", "FirstQuarter", "FiveCircles", "Flag", "FlameTorch", "Fog", "FogDay", "Folder", "Font", "Football", "FootballHelmet", "ForestTree", "FourBoxes", "FourCorners", "FourCornersMagnifyingGlass", "FourCornersMusicNote", "FourLinesSpread", "FourThreeRatio", "FullMoon", "GIF", "GeminiAstrology", "GiftBox", "GolfTee", "GraduationHat", "Graph", "Gymnastics", "HalfStar", "HalfSun", "HappyFace", "HazeDay", "HazeNight", "Heading2", "Heading3", "Headline1", "HeadlineDocumentSquare", "Headphone", "HeadphonesMic", "Heart", "HeartArrow", "HeartPulse", "HeavyRain", "HeavyRainDay", "HeavyRainLightning", "HeavyRainLightningDay", "HeavyRainLightningNight", "HeavyRainNight", "Help", "Highlighter", "History", "HockeyWithPuck", "Home", "HorseHeadBridle", "HotTub", "Hurricane", "Ice", "Id", "Image", "ImageFile", "ImageGallery", "Inbox", "InboxDownArrow", "InboxUpArrow", "IndentRight", "Infinity", "Info", "InstitutionalWesternBank", "Italics", "JoyfulFace", "JudoUniform", "Keyboard", "KeylineShapes", "Kick", "KnightChessPiece", "Laptop", "LaptopWithPhone", "Laurel", "LaurelLeft", "LaurelRight", "LayoutBottom", "LayoutDefault", "LayoutFourColumn", "LayoutGrid", "LayoutPerfectGrid", "LayoutRight", "LayoutThreeColumn", "LayoutThreeRows", "LayoutTwoColumn", "LeftAlign", "LeftCurveArrow", "LeftPageArrow", "LeoAstrology", "Letter", "LetterColor", "LetterSize", "LibraAstrology", "LifeRing", "Lightbulb", "Lightning", "LightningDay", "LightningNight", "Link", "LiquidDrop", "Live", "Livestream", "Location", "LocationCircle", "LocationMap", "Lock", "LogIn", "LogOut", "Lollipop", "LoveEnvelope", "LoyaltyCard", "MagicWand", "MagnifyingGlass", "Mahjong", "MakeupBeauty", "Mannequin", "Medal", "MedicineBottle", "MedicinePill", "Megaphone", "Microphone", "Microscope", "Minus", "MinusBox", "MinusCircle", "MinusPeople", "MinusSearch", "MmaGlove", "MmaRing", "MobileNumber", "MobilePhone", "More", "MoreVertical", "NeutralFace", "NewMoon", "Newsletter", "Night", "NineSixteenRatio", "NoBell", "NoConnectionScreen", "NoEye", "NoHeart", "NoImage", "NoPeople", "NoShield", "NoSmoking", "NoSquare", "NoStar", "NoVideoCamera", "NoWifi", "NotificationBell", "Null", "NumberedList", "OnTop", "OneOneRatio", "OpenBook", "OpenEnvelope", "OrderedList", "OutdentLeft", "PDF", "PPT", "PaperPlane", "PaperPlaneDiagonal", "Paperclip", "Paragraph", "ParagraphLeftIdent", "ParagraphRightIdent", "Parking", "ParkingSquare", "PassKey", "Password", "Pause", "Payments", "Payphone", "PayphoneFace", "Pencil", "PencilLines", "People", "Person", "PersonClimbing", "PersonShield", "Pets", "Phone", "PieChart", "Pin", "PingPong", "PiscesAstrology", "PlainText", "Play", "PlayCircle", "Pool", "PowerSwitch", "Preferences", "PreferencesAlt", "Printer", "Priority", "Profile", "Progress", "ProgressWithCheck", "Pulse", "PuzzlePiece", "QrCode", "QuestionBubble", "QuoteCircle", "QuoteSquare", "RAW", "RTF", "RTFOff", "RacingFlag", "Radar", "RadioCircle", "RainDay", "RainNight", "Receipt", "Receipts", "RedoPencil", "Refresh", "Restaurant", "RetailTag", "RightAlign", "RightCurveArrow", "RightPageArrow", "RobotHead", "Running", "SadFace", "SadderFace", "SagittariusAstrology", "SailBoat", "Satellite", "ScaleDown", "ScanQrCode", "Scissors", "ScorpioAstrology", "SearchConfirm", "SearchEnvelope", "SearchWorldWithLines", "SecurityKey", "SendToSelf", "Server", "SettingsAlt", "SettingsCogPeople", "Shapes", "Share", "Shield", "ShieldCheck", "ShieldSlash", "ShockedFace", "ShoppingBag", "ShoppingBasket", "ShoppingCart", "Shuttlecock", "SixteenNineRatio", "Skateboard", "SkipTimeTen", "Skull", "Slideshow", "SmallSquareInsideBigSquare", "SmartWatch", "SmileFace", "SmileFaceLife", "Sms", "SmsVerificationCode", "Sneaker", "SneakerAlt", "Snippet", "Snow", "SnowDay", "SnowNight", "Snowflake", "Soccer", "Solitaire", "SoundLow", "SoundOff", "SoundOn", "Spa", "Sparkle", "SparkleFootballBall", "SparkleTennisBall", "SpecialCharacter", "SpeechBubble", "SpeechBubbleStar", "SportsBook", "SportsSparkle", "SprinkleDay", "SprinkleNight", "Square", "Stadium", "Star", "StarArticle", "StarMedal", "StarTrophy", "StatePrivacyControls", "StockTrends", "Stopwatch", "Store", "Strikethrough", "Sun", "Sunrise", "Sunset", "SurfboardOnSand", "Swimming", "Sync", "Tab", "Tablet", "TaurusAstrology", "TechnicalRoute", "Television", "TennisBall", "TennisRacketBall", "ThirdQuarter", "ThreeCircles", "ThreeFourRatio", "ThreeLines", "ThreeLinesSpread", "ThumbsDown", "ThumbsUp", "Thumbtack", "ThumbtackDiagonal", "TimePaperPlane", "Tornado", "Trading", "TrafficSignRightTurn", "Trampoline", "Transactions", "Trash", "Trending", "TrendingCircle", "Trophy", "TruckRight", "Tshirt", "Tsunami", "Tub", "TwoArrowsDiagonalInwards", "TwoArrowsDiagonalOutwards", "TwoCorners", "TwoHorizontalRectangles", "TwoLinesContainer", "TwoMasks", "TwoRectangles", "TwoSparkles", "TwoSquares", "TwoThirdsColumn", "Underline", "Unlock", "UnorderedList", "UpCurveArrow", "UpDownChevron", "UpDownShortArrows", "UpFolder", "Upload", "Verification", "VideoCamera", "VideoFile", "VirgoAstrology", "Virus", "Volleyball", "Walking", "Wallet", "WaningCrescent", "WaningGibbous", "Warning", "WaxingCrescent", "WaxingGibbous", "Web", "Weights", "Wifi", "Wind", "WindCloud", "WindCloudDay", "WindCloudNight", "Wine", "WorldWithLines", "Wrench", "WrestlingHeadGear", "WritingAi", "XLSFile", "YEP", "ZIP"];