@yahoo/uds-mobile 1.1.0 → 1.2.0

package/dist/components/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":["VARIANT_ERROR_MAP: Record<CheckboxVariant, CheckboxStyleVariant>","Checkbox","valueState: CheckboxValueState","styleVariant: CheckboxStyleVariant"],"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["import type { CheckboxValue, CheckboxVariant, UniversalCheckboxProps } from '@yahoo/uds/tokens';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport Animated, {\n  interpolate,\n  useAnimatedStyle,\n  useDerivedValue,\n  withSpring,\n} from 'react-native-reanimated';\n\nimport { checkboxStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { HStack } from './HStack';\nimport { Icon } from './Icon';\nimport { Pressable } from './Pressable';\nimport { Text } from './Text';\n\n/* -------------------------------------------------------------------------- */\n/*                                   Types                                    */\n/* -------------------------------------------------------------------------- */\n\n/** Derived from CheckboxValue - maps boolean to 'checked'/'unchecked' string literals */\ntype CheckboxValueState = Exclude<CheckboxValue, boolean> | 'checked' | 'unchecked';\n\ninterface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps {\n  ref?: Ref<View>;\n  /** Default checked state for uncontrolled mode */\n  defaultChecked?: boolean;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Whether the checkbox is required */\n  required?: boolean;\n  /** Callback fired when the checked state changes */\n  onChange?: (checked: boolean) => void;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Variant Mapping                                */\n/* -------------------------------------------------------------------------- */\n\n/** All style variants available in the generated styles (includes error variants) */\ntype CheckboxStyleVariant = 'primary' | 'secondary' | 'alert' | 'alert-secondary';\n\nconst VARIANT_ERROR_MAP: Record<CheckboxVariant, CheckboxStyleVariant> = {\n  primary: 'alert',\n  secondary: 'alert-secondary',\n};\n\n/* -------------------------------------------------------------------------- */\n/*                              Checkbox Component                             */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **⚙️ A checkbox component**\n *\n * @componentType Client component\n *\n * @description\n * A checkbox component allows users to select one or multiple options from a set.\n * It represents a binary state, typically as checked or unchecked, and optionally\n * includes a third \"indeterminate\" state to indicate partial selection.\n *\n * @example\n * ```tsx\n * import { Checkbox } from '@yahoo/uds-mobile';\n *\n * <Checkbox label=\"Agree to terms\" />\n * <Checkbox label=\"Subscribe\" checked={true} onChange={setChecked} />\n * <Checkbox label=\"Partial\" checked=\"indeterminate\" />\n * ```\n *\n * @usage\n * - Forms: For selecting options\n * - Settings: For toggling preferences\n * - Filters: For multi-select filtering\n *\n * @see The {@link https://uds.build/docs/components/checkbox Checkbox Docs} for more info\n */\nconst Checkbox = memo(function Checkbox({\n  // Checkbox props\n  label,\n  labelPosition = 'start',\n  variant: variantProp = 'primary',\n  size = 'md',\n  checked: checkedProp,\n  hasError,\n  reduceMotion,\n  // Native props\n  defaultChecked,\n  disabled,\n  required,\n  onChange,\n  ref,\n  ...viewProps\n}: CheckboxProps) {\n  const generatedId = useId();\n  const uid = `uds-checkbox-${generatedId}`;\n\n  /* --------------------------------- State ---------------------------------- */\n  const isControlled = checkedProp !== undefined;\n  const [internalChecked, setInternalChecked] = useState<CheckboxValue>(\n    isControlled ? checkedProp : (defaultChecked ?? false),\n  );\n  const [pressed, setPressed] = useState(false);\n\n  // Use controlled value if provided, otherwise use internal state\n  const checked = isControlled ? checkedProp : internalChecked;\n\n  /* ------------------------------ Derived Values ---------------------------- */\n  const valueState: CheckboxValueState = useMemo(() => {\n    if (checked === 'indeterminate') {\n      return 'indeterminate';\n    }\n    return checked ? 'checked' : 'unchecked';\n  }, [checked]);\n\n  const iconName = valueState === 'indeterminate' ? 'Minus' : 'Check';\n  const showIcon = valueState !== 'unchecked';\n\n  /* -------------------------------- Animation ------------------------------- */\n  const shouldAnimate = !reduceMotion;\n\n  // Scale animation for press feedback (disabled when reduceMotion is true)\n  const scaleProgress = useDerivedValue(\n    () =>\n      shouldAnimate\n        ? withSpring(pressed ? SCALE_EFFECTS.down : SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG)\n        : SCALE_EFFECTS.none, // No scale effect when reduceMotion is true\n    [pressed, shouldAnimate],\n  );\n\n  // Icon visibility animation\n  // When reduceMotion is true, still show/hide the icon but without animation\n  const iconProgress = useDerivedValue(\n    () => (shouldAnimate ? withSpring(showIcon ? 1 : 0, BUTTON_SPRING_CONFIG) : showIcon ? 1 : 0),\n    [showIcon, shouldAnimate],\n  );\n\n  const checkboxAnimatedStyle = useAnimatedStyle(() => ({\n    transform: [{ scale: scaleProgress.value }],\n  }));\n\n  const iconAnimatedStyle = useAnimatedStyle(() => ({\n    opacity: interpolate(iconProgress.value, [0, 1], [0, 1]),\n    transform: [{ scale: interpolate(iconProgress.value, [0, 1], [0.5, 1]) }],\n  }));\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const newChecked = checked === 'indeterminate' ? true : !checked;\n\n    if (!isControlled) {\n      setInternalChecked(newChecked);\n    }\n\n    onChange?.(newChecked);\n  }, [disabled, checked, isControlled, onChange]);\n\n  const handlePressIn = useCallback(() => {\n    setPressed(true);\n  }, []);\n\n  const handlePressOut = useCallback(() => {\n    setPressed(false);\n  }, []);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Compute the style variant (primary/secondary maps to alert variants when hasError)\n  const styleVariant: CheckboxStyleVariant = hasError\n    ? VARIANT_ERROR_MAP[variantProp]\n    : variantProp;\n\n  checkboxStyles.useVariants({\n    size,\n    variant: styleVariant, // primary, secondary, alert, alert-secondary\n    value: valueState, // checked, unchecked, indeterminate\n    disabled,\n    pressed,\n  });\n\n  const rootStyle = useMemo(\n    () => [checkboxStyles.root, { opacity: disabled ? 0.5 : 1 }],\n    [checkboxStyles.root, disabled],\n  );\n\n  const checkboxBoxStyle = useMemo(\n    () => [\n      checkboxStyles.checkbox,\n      { alignItems: 'center' as const, justifyContent: 'center' as const },\n      checkboxAnimatedStyle,\n    ],\n    [checkboxStyles.checkbox, checkboxAnimatedStyle],\n  );\n\n  /* ---------------------------- Render Helpers ------------------------------ */\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\n\n    const content =\n      typeof label === 'function' ? label() : isValidElement(label) ? label : String(label);\n\n    const textContent =\n      typeof content === 'string' ? <Text style={checkboxStyles.text}>{content}</Text> : content;\n\n    if (required) {\n      return (\n        <HStack columnGap=\"1\" alignItems=\"flex-start\">\n          {textContent}\n          <Text style={checkboxStyles.text}>*</Text>\n        </HStack>\n      );\n    }\n\n    return textContent;\n  }, [label, required, checkboxStyles.text]);\n\n  const a11yState = useMemo(\n    () => ({\n      disabled,\n      checked:\n        valueState === 'checked'\n          ? true\n          : valueState === 'indeterminate'\n            ? ('mixed' as const)\n            : false,\n    }),\n    [disabled, valueState],\n  );\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <Pressable\n      ref={ref}\n      nativeID={uid}\n      onPress={handlePress}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      disabled={disabled}\n      flexDirection={labelPosition === 'start' ? 'row' : 'row-reverse'}\n      alignItems=\"center\"\n      alignSelf=\"flex-start\"\n      accessibilityRole=\"checkbox\"\n      accessibilityState={a11yState}\n      accessibilityLabel={typeof label === 'string' ? label : undefined}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <Animated.View style={checkboxBoxStyle}>\n        <Animated.View style={iconAnimatedStyle}>\n          <Icon name={iconName} size=\"sm\" style={checkboxStyles.checkboxIcon} />\n        </Animated.View>\n      </Animated.View>\n\n      {labelContent}\n    </Pressable>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox, type CheckboxProps };\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.mjs","names":["VARIANT_ERROR_MAP: Record<CheckboxVariant, CheckboxStyleVariant>","Checkbox","valueState: CheckboxValueState","styleVariant: CheckboxStyleVariant"],"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["import type { CheckboxValue, CheckboxVariant, UniversalCheckboxProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport Animated, {\n  interpolate,\n  useAnimatedStyle,\n  useDerivedValue,\n  withSpring,\n} from 'react-native-reanimated';\n\nimport { checkboxStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { HStack } from './HStack';\nimport { Icon } from './Icon';\nimport { Pressable } from './Pressable';\nimport { Text } from './Text';\n\n/* -------------------------------------------------------------------------- */\n/*                                   Types                                    */\n/* -------------------------------------------------------------------------- */\n\n/** Derived from CheckboxValue - maps boolean to 'checked'/'unchecked' string literals */\ntype CheckboxValueState = Exclude<CheckboxValue, boolean> | 'checked' | 'unchecked';\n\ninterface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps {\n  ref?: Ref<View>;\n  /** Default checked state for uncontrolled mode */\n  defaultChecked?: boolean;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Whether the checkbox is required */\n  required?: boolean;\n  /** Callback fired when the checked state changes */\n  onChange?: (checked: boolean) => void;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Variant Mapping                                */\n/* -------------------------------------------------------------------------- */\n\n/** All style variants available in the generated styles (includes error variants) */\ntype CheckboxStyleVariant = 'primary' | 'secondary' | 'alert' | 'alert-secondary';\n\nconst VARIANT_ERROR_MAP: Record<CheckboxVariant, CheckboxStyleVariant> = {\n  primary: 'alert',\n  secondary: 'alert-secondary',\n};\n\n/* -------------------------------------------------------------------------- */\n/*                              Checkbox Component                             */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **⚙️ A checkbox component**\n *\n * @componentType Client component\n *\n * @description\n * A checkbox component allows users to select one or multiple options from a set.\n * It represents a binary state, typically as checked or unchecked, and optionally\n * includes a third \"indeterminate\" state to indicate partial selection.\n *\n * @example\n * ```tsx\n * import { Checkbox } from '@yahoo/uds-mobile';\n *\n * <Checkbox label=\"Agree to terms\" />\n * <Checkbox label=\"Subscribe\" checked={true} onChange={setChecked} />\n * <Checkbox label=\"Partial\" checked=\"indeterminate\" />\n * ```\n *\n * @usage\n * - Forms: For selecting options\n * - Settings: For toggling preferences\n * - Filters: For multi-select filtering\n *\n * @see The {@link https://uds.build/docs/components/checkbox Checkbox Docs} for more info\n */\nconst Checkbox = memo(function Checkbox({\n  // Checkbox props\n  label,\n  labelPosition = 'start',\n  variant: variantProp = 'primary',\n  size = 'md',\n  checked: checkedProp,\n  hasError,\n  reduceMotion,\n  // Native props\n  defaultChecked,\n  disabled,\n  required,\n  onChange,\n  ref,\n  ...viewProps\n}: CheckboxProps) {\n  const generatedId = useId();\n  const uid = `uds-checkbox-${generatedId}`;\n\n  /* --------------------------------- State ---------------------------------- */\n  const isControlled = checkedProp !== undefined;\n  const [internalChecked, setInternalChecked] = useState<CheckboxValue>(\n    isControlled ? checkedProp : (defaultChecked ?? false),\n  );\n  const [pressed, setPressed] = useState(false);\n\n  // Use controlled value if provided, otherwise use internal state\n  const checked = isControlled ? checkedProp : internalChecked;\n\n  /* ------------------------------ Derived Values ---------------------------- */\n  const valueState: CheckboxValueState = useMemo(() => {\n    if (checked === 'indeterminate') {\n      return 'indeterminate';\n    }\n    return checked ? 'checked' : 'unchecked';\n  }, [checked]);\n\n  const iconName = valueState === 'indeterminate' ? 'Minus' : 'Check';\n  const showIcon = valueState !== 'unchecked';\n\n  /* -------------------------------- Animation ------------------------------- */\n  const shouldAnimate = !reduceMotion;\n\n  // Scale animation for press feedback (disabled when reduceMotion is true)\n  const scaleProgress = useDerivedValue(\n    () =>\n      shouldAnimate\n        ? withSpring(pressed ? SCALE_EFFECTS.down : SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG)\n        : SCALE_EFFECTS.none, // No scale effect when reduceMotion is true\n    [pressed, shouldAnimate],\n  );\n\n  // Icon visibility animation\n  // When reduceMotion is true, still show/hide the icon but without animation\n  const iconProgress = useDerivedValue(\n    () => (shouldAnimate ? withSpring(showIcon ? 1 : 0, BUTTON_SPRING_CONFIG) : showIcon ? 1 : 0),\n    [showIcon, shouldAnimate],\n  );\n\n  const checkboxAnimatedStyle = useAnimatedStyle(() => ({\n    transform: [{ scale: scaleProgress.value }],\n  }));\n\n  const iconAnimatedStyle = useAnimatedStyle(() => ({\n    opacity: interpolate(iconProgress.value, [0, 1], [0, 1]),\n    transform: [{ scale: interpolate(iconProgress.value, [0, 1], [0.5, 1]) }],\n  }));\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const newChecked = checked === 'indeterminate' ? true : !checked;\n\n    if (!isControlled) {\n      setInternalChecked(newChecked);\n    }\n\n    onChange?.(newChecked);\n  }, [disabled, checked, isControlled, onChange]);\n\n  const handlePressIn = useCallback(() => {\n    setPressed(true);\n  }, []);\n\n  const handlePressOut = useCallback(() => {\n    setPressed(false);\n  }, []);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Compute the style variant (primary/secondary maps to alert variants when hasError)\n  const styleVariant: CheckboxStyleVariant = hasError\n    ? VARIANT_ERROR_MAP[variantProp]\n    : variantProp;\n\n  checkboxStyles.useVariants({\n    size,\n    variant: styleVariant, // primary, secondary, alert, alert-secondary\n    value: valueState, // checked, unchecked, indeterminate\n    disabled,\n    pressed,\n  });\n\n  const rootStyle = useMemo(\n    () => [checkboxStyles.root, { opacity: disabled ? 0.5 : 1 }],\n    [checkboxStyles.root, disabled],\n  );\n\n  const checkboxBoxStyle = useMemo(\n    () => [\n      checkboxStyles.checkbox,\n      { alignItems: 'center' as const, justifyContent: 'center' as const },\n      checkboxAnimatedStyle,\n    ],\n    [checkboxStyles.checkbox, checkboxAnimatedStyle],\n  );\n\n  /* ---------------------------- Render Helpers ------------------------------ */\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\n\n    const content =\n      typeof label === 'function' ? label() : isValidElement(label) ? label : String(label);\n\n    const textContent =\n      typeof content === 'string' ? <Text style={checkboxStyles.text}>{content}</Text> : content;\n\n    if (required) {\n      return (\n        <HStack columnGap=\"1\" alignItems=\"flex-start\">\n          {textContent}\n          <Text style={checkboxStyles.text}>*</Text>\n        </HStack>\n      );\n    }\n\n    return textContent;\n  }, [label, required, checkboxStyles.text]);\n\n  const a11yState = useMemo(\n    () => ({\n      disabled,\n      checked:\n        valueState === 'checked'\n          ? true\n          : valueState === 'indeterminate'\n            ? ('mixed' as const)\n            : false,\n    }),\n    [disabled, valueState],\n  );\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <Pressable\n      ref={ref}\n      nativeID={uid}\n      onPress={handlePress}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      disabled={disabled}\n      flexDirection={labelPosition === 'start' ? 'row' : 'row-reverse'}\n      alignItems=\"center\"\n      alignSelf=\"flex-start\"\n      accessibilityRole=\"checkbox\"\n      accessibilityState={a11yState}\n      accessibilityLabel={typeof label === 'string' ? label : undefined}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <Animated.View style={checkboxBoxStyle}>\n        <Animated.View style={iconAnimatedStyle}>\n          <Icon name={iconName} size=\"sm\" style={checkboxStyles.checkboxIcon} />\n        </Animated.View>\n      </Animated.View>\n\n      {labelContent}\n    </Pressable>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox, type CheckboxProps };\n"],"mappings":"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"}

package/dist/components/Chip.d.cts

@@ -1,7 +1,7 @@
 
-import { ChipSize, ChipVariant } from "../uds/dist/tokens/types.cjs";
+import { ChipSize, ChipVariant } from "../types/dist/index.cjs";
 import { IconSlotType } from "./IconSlot.cjs";
-import * as react7 from "react";
+import * as react6 from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 
@@ -54,7 +54,7 @@ interface ChipProps extends Omit<ViewProps, 'children'> {
  * <Chip startIcon="Star" variant="brand">Favorite</Chip>
  * ```
  */
-declare const Chip: react7.NamedExoticComponent<ChipProps>;
+declare const Chip: react6.NamedExoticComponent<ChipProps>;
 //#endregion
 export { Chip, type ChipProps };
 //# sourceMappingURL=Chip.d.cts.map

package/dist/components/Chip.d.mts

@@ -1,7 +1,7 @@
 
-import { ChipSize, ChipVariant } from "../uds/dist/tokens/types.mjs";
+import { ChipSize, ChipVariant } from "../types/dist/index.mjs";
 import { IconSlotType } from "./IconSlot.mjs";
-import * as react11 from "react";
+import * as react5 from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 
@@ -54,7 +54,7 @@ interface ChipProps extends Omit<ViewProps, 'children'> {
  * <Chip startIcon="Star" variant="brand">Favorite</Chip>
  * ```
  */
-declare const Chip: react11.NamedExoticComponent<ChipProps>;
+declare const Chip: react5.NamedExoticComponent<ChipProps>;
 //#endregion
 export { Chip, type ChipProps };
 //# sourceMappingURL=Chip.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.mts","names":[],"sources":["../../src/components/Chip.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAYU,SAAA,SAAkB,KAAK;QACzB,IAAI;;EADF,OAAA,CAAA,EAGE,WAHQ;EAAa;EACrB,IAAA,CAAA,EAIH,QAJG;EAAJ,QAAA,CAAA,EAAA,MAAA;EAEI;EAEH,QAAA,CAAA,EAAA,MAAA;EAIK,SAAA,CAAA,EAAA,YAAA;EACF,OAAA,CAAA,EAAA,YAAA;EAYC,QAAM,CAAA,EAAA,OAAA;EAtBS;EAAI,OAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAiD1B;;;;;;;;aA3BO,KAAA,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;cA2Bb,MAAI,OAAA,CAAA,qBAAA"}
+{"version":3,"file":"Chip.d.mts","names":[],"sources":["../../src/components/Chip.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAYU,SAAA,SAAkB,KAAK;QACzB,IAAI;;EADF,OAAA,CAAA,EAGE,WAHQ;EAAa;EACrB,IAAA,CAAA,EAIH,QAJG;EAAJ,QAAA,CAAA,EAAA,MAAA;EAEI;EAEH,QAAA,CAAA,EAAA,MAAA;EAIK,SAAA,CAAA,EAAA,YAAA;EACF,OAAA,CAAA,EAAA,YAAA;EAYC,QAAM,CAAA,EAAA,OAAA;EAtBS;EAAI,OAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAiD1B;;;;;;;;aA3BO,KAAA,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;cA2Bb,MAAI,MAAA,CAAA,qBAAA"}

package/dist/components/Chip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.mjs","names":["Chip"],"sources":["../../src/components/Chip.tsx"],"sourcesContent":["import type { ChipSize, ChipVariant } from '@yahoo/uds/tokens';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useMemo } from 'react';\nimport type { View, ViewProps } from 'react-native';\n\nimport { chipStyles } from '../../generated/styles';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Pressable } from './Pressable';\nimport { Text } from './Text';\n\ninterface ChipProps extends Omit<ViewProps, 'children'> {\n  ref?: Ref<View>;\n  /** @default 'primary' */\n  variant?: ChipVariant;\n  /** @default 'md' */\n  size?: ChipSize;\n  minWidth?: number;\n  /** @default 200 */\n  maxWidth?: number;\n  startIcon?: IconSlotType;\n  endIcon?: IconSlotType;\n  disabled?: boolean;\n  /** Called when the chip is pressed. Makes the chip interactive. */\n  onPress?: () => void;\n  /** Whether the chip is toggled/selected. */\n  isToggled?: boolean;\n  /** Called when the chip toggle state changes. */\n  onToggle?: (toggled: boolean) => void;\n  /** Called when the dismiss button is pressed. Shows a dismiss icon. */\n  onDismiss?: () => void;\n  /** Accessibility label for the dismiss button. */\n  dismissButtonAriaLabel?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * **A chip component for selections, filters, or actions**\n *\n * @description\n * Chips help people make selections, filter content, or trigger actions.\n * They can be toggleable, dismissible, or simple pressable elements.\n *\n * @example\n * ```tsx\n * import { Chip } from '~/components/ui/Chip';\n *\n * // Basic chip\n * <Chip>Label</Chip>\n *\n * // Toggle chip\n * <Chip isToggled={selected} onToggle={setSelected}>Filter</Chip>\n *\n * // Dismissible chip\n * <Chip onDismiss={() => removeChip()}>Tag</Chip>\n *\n * // With icons\n * <Chip startIcon=\"Star\" variant=\"brand\">Favorite</Chip>\n * ```\n */\nconst Chip = memo(function Chip({\n  variant = 'primary',\n  size = 'md',\n  minWidth,\n  maxWidth = 200,\n  startIcon,\n  endIcon,\n  disabled = false,\n  isToggled = false,\n  onPress,\n  onToggle,\n  onDismiss,\n  dismissButtonAriaLabel = 'Dismiss',\n  children,\n  style,\n  ref,\n  ...rest\n}: ChipProps) {\n  const isInteractive = Boolean(onPress || onToggle);\n  const isDismissible = Boolean(onDismiss);\n  const isDisabled = disabled;\n  // Determine which variant type to use for styling\n  const toggleState = isToggled ? 'on' : 'off';\n\n  // Apply layer-based styles\n  // Note: Chip doesn't have disabled variants in theme - handled via opacity\n  // Note: pressed state is applied dynamically via Pressable's style callback\n  chipStyles.useVariants({\n    size,\n    link: variant,\n    dismissible: variant,\n    toggle: toggleState,\n  });\n\n  const handlePress = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    if (onToggle) {\n      onToggle(!isToggled);\n    } else if (onPress) {\n      onPress();\n    }\n  }, [isDisabled, onToggle, isToggled, onPress]);\n\n  const handleDismiss = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n    onDismiss?.();\n  }, [isDisabled, onDismiss]);\n\n  const content = (\n    <>\n      {startIcon && <IconSlot icon={startIcon} variant=\"fill\" style={chipStyles.icon} />}\n      <Text numberOfLines={1} textAlign=\"center\" flexShrink=\"1\" style={chipStyles.text}>\n        {children}\n      </Text>\n      {isDismissible ? (\n        <Pressable\n          onPress={isDisabled ? undefined : handleDismiss}\n          disabled={isDisabled}\n          accessibilityLabel={dismissButtonAriaLabel}\n          accessibilityRole=\"button\"\n        >\n          <IconSlot icon={endIcon ?? 'Cross'} variant=\"fill\" style={chipStyles.icon} />\n        </Pressable>\n      ) : (\n        endIcon && <IconSlot icon={endIcon} variant=\"fill\" style={chipStyles.icon} />\n      )}\n    </>\n  );\n\n  const a11yState = {\n    disabled: isDisabled,\n    checked: onToggle ? isToggled : undefined,\n  };\n\n  const rootStyles = useMemo(() => [chipStyles.root, style], [chipStyles.root, style]);\n  const sharedProps = {\n    ref,\n    style: rootStyles,\n    flexDirection: 'row',\n    alignItems: 'center',\n    overflow: 'hidden',\n    alignSelf: 'flex-start',\n    maxWidth,\n    minWidth,\n    disabled: isDisabled,\n    opacity: isDisabled ? 0.5 : undefined,\n    accessibilityState: a11yState,\n    ...rest,\n  } as const;\n\n  // Interactive chip (toggle or button)\n  if (isInteractive) {\n    return (\n      <Pressable\n        onPress={handlePress}\n        accessibilityRole={onToggle ? 'checkbox' : 'button'}\n        {...sharedProps}\n      >\n        {content}\n      </Pressable>\n    );\n  }\n\n  // Non-interactive chip (display only or dismissible)\n  return (\n    <HStack accessibilityRole={isDismissible ? 'button' : undefined} {...sharedProps} {...rest}>\n      {content}\n    </HStack>\n  );\n});\n\nChip.displayName = 'Chip';\n\nexport { Chip, type ChipProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,MAAM,OAAO,KAAK,SAASA,OAAK,EAC9B,UAAU,WACV,OAAO,MACP,UACA,WAAW,KACX,WACA,SACA,WAAW,OACX,YAAY,OACZ,SACA,UACA,WACA,yBAAyB,WACzB,UACA,OACA,KACA,GAAG,QACS;CACZ,MAAM,gBAAgB,QAAQ,WAAW,SAAS;CAClD,MAAM,gBAAgB,QAAQ,UAAU;CACxC,MAAM,aAAa;CAEnB,MAAM,cAAc,YAAY,OAAO;AAKvC,YAAW,YAAY;EACrB;EACA,MAAM;EACN,aAAa;EACb,QAAQ;EACT,CAAC;CAEF,MAAM,cAAc,kBAAkB;AACpC,MAAI,WACF;AAGF,MAAI,SACF,UAAS,CAAC,UAAU;WACX,QACT,UAAS;IAEV;EAAC;EAAY;EAAU;EAAW;EAAQ,CAAC;CAE9C,MAAM,gBAAgB,kBAAkB;AACtC,MAAI,WACF;AAEF,eAAa;IACZ,CAAC,YAAY,UAAU,CAAC;CAE3B,MAAM,UACJ;EACG,aAAa,oBAAC;GAAS,MAAM;GAAW,SAAQ;GAAO,OAAO,WAAW;IAAQ;EAClF,oBAAC;GAAK,eAAe;GAAG,WAAU;GAAS,YAAW;GAAI,OAAO,WAAW;GACzE;IACI;EACN,gBACC,oBAAC;GACC,SAAS,aAAa,SAAY;GAClC,UAAU;GACV,oBAAoB;GACpB,mBAAkB;aAElB,oBAAC;IAAS,MAAM,WAAW;IAAS,SAAQ;IAAO,OAAO,WAAW;KAAQ;IACnE,GAEZ,WAAW,oBAAC;GAAS,MAAM;GAAS,SAAQ;GAAO,OAAO,WAAW;IAAQ;KAE9E;CAGL,MAAM,YAAY;EAChB,UAAU;EACV,SAAS,WAAW,YAAY;EACjC;CAGD,MAAM,cAAc;EAClB;EACA,OAHiB,cAAc,CAAC,WAAW,MAAM,MAAM,EAAE,CAAC,WAAW,MAAM,MAAM,CAAC;EAIlF,eAAe;EACf,YAAY;EACZ,UAAU;EACV,WAAW;EACX;EACA;EACA,UAAU;EACV,SAAS,aAAa,KAAM;EAC5B,oBAAoB;EACpB,GAAG;EACJ;AAGD,KAAI,cACF,QACE,oBAAC;EACC,SAAS;EACT,mBAAmB,WAAW,aAAa;EAC3C,GAAI;YAEH;GACS;AAKhB,QACE,oBAAC;EAAO,mBAAmB,gBAAgB,WAAW;EAAW,GAAI;EAAa,GAAI;YACnF;GACM;EAEX;AAEF,KAAK,cAAc"}
+{"version":3,"file":"Chip.mjs","names":["Chip"],"sources":["../../src/components/Chip.tsx"],"sourcesContent":["import type { ChipSize, ChipVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useMemo } from 'react';\nimport type { View, ViewProps } from 'react-native';\n\nimport { chipStyles } from '../../generated/styles';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Pressable } from './Pressable';\nimport { Text } from './Text';\n\ninterface ChipProps extends Omit<ViewProps, 'children'> {\n  ref?: Ref<View>;\n  /** @default 'primary' */\n  variant?: ChipVariant;\n  /** @default 'md' */\n  size?: ChipSize;\n  minWidth?: number;\n  /** @default 200 */\n  maxWidth?: number;\n  startIcon?: IconSlotType;\n  endIcon?: IconSlotType;\n  disabled?: boolean;\n  /** Called when the chip is pressed. Makes the chip interactive. */\n  onPress?: () => void;\n  /** Whether the chip is toggled/selected. */\n  isToggled?: boolean;\n  /** Called when the chip toggle state changes. */\n  onToggle?: (toggled: boolean) => void;\n  /** Called when the dismiss button is pressed. Shows a dismiss icon. */\n  onDismiss?: () => void;\n  /** Accessibility label for the dismiss button. */\n  dismissButtonAriaLabel?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * **A chip component for selections, filters, or actions**\n *\n * @description\n * Chips help people make selections, filter content, or trigger actions.\n * They can be toggleable, dismissible, or simple pressable elements.\n *\n * @example\n * ```tsx\n * import { Chip } from '~/components/ui/Chip';\n *\n * // Basic chip\n * <Chip>Label</Chip>\n *\n * // Toggle chip\n * <Chip isToggled={selected} onToggle={setSelected}>Filter</Chip>\n *\n * // Dismissible chip\n * <Chip onDismiss={() => removeChip()}>Tag</Chip>\n *\n * // With icons\n * <Chip startIcon=\"Star\" variant=\"brand\">Favorite</Chip>\n * ```\n */\nconst Chip = memo(function Chip({\n  variant = 'primary',\n  size = 'md',\n  minWidth,\n  maxWidth = 200,\n  startIcon,\n  endIcon,\n  disabled = false,\n  isToggled = false,\n  onPress,\n  onToggle,\n  onDismiss,\n  dismissButtonAriaLabel = 'Dismiss',\n  children,\n  style,\n  ref,\n  ...rest\n}: ChipProps) {\n  const isInteractive = Boolean(onPress || onToggle);\n  const isDismissible = Boolean(onDismiss);\n  const isDisabled = disabled;\n  // Determine which variant type to use for styling\n  const toggleState = isToggled ? 'on' : 'off';\n\n  // Apply layer-based styles\n  // Note: Chip doesn't have disabled variants in theme - handled via opacity\n  // Note: pressed state is applied dynamically via Pressable's style callback\n  chipStyles.useVariants({\n    size,\n    link: variant,\n    dismissible: variant,\n    toggle: toggleState,\n  });\n\n  const handlePress = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    if (onToggle) {\n      onToggle(!isToggled);\n    } else if (onPress) {\n      onPress();\n    }\n  }, [isDisabled, onToggle, isToggled, onPress]);\n\n  const handleDismiss = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n    onDismiss?.();\n  }, [isDisabled, onDismiss]);\n\n  const content = (\n    <>\n      {startIcon && <IconSlot icon={startIcon} variant=\"fill\" style={chipStyles.icon} />}\n      <Text numberOfLines={1} textAlign=\"center\" flexShrink=\"1\" style={chipStyles.text}>\n        {children}\n      </Text>\n      {isDismissible ? (\n        <Pressable\n          onPress={isDisabled ? undefined : handleDismiss}\n          disabled={isDisabled}\n          accessibilityLabel={dismissButtonAriaLabel}\n          accessibilityRole=\"button\"\n        >\n          <IconSlot icon={endIcon ?? 'Cross'} variant=\"fill\" style={chipStyles.icon} />\n        </Pressable>\n      ) : (\n        endIcon && <IconSlot icon={endIcon} variant=\"fill\" style={chipStyles.icon} />\n      )}\n    </>\n  );\n\n  const a11yState = {\n    disabled: isDisabled,\n    checked: onToggle ? isToggled : undefined,\n  };\n\n  const rootStyles = useMemo(() => [chipStyles.root, style], [chipStyles.root, style]);\n  const sharedProps = {\n    ref,\n    style: rootStyles,\n    flexDirection: 'row',\n    alignItems: 'center',\n    overflow: 'hidden',\n    alignSelf: 'flex-start',\n    maxWidth,\n    minWidth,\n    disabled: isDisabled,\n    opacity: isDisabled ? 0.5 : undefined,\n    accessibilityState: a11yState,\n    ...rest,\n  } as const;\n\n  // Interactive chip (toggle or button)\n  if (isInteractive) {\n    return (\n      <Pressable\n        onPress={handlePress}\n        accessibilityRole={onToggle ? 'checkbox' : 'button'}\n        {...sharedProps}\n      >\n        {content}\n      </Pressable>\n    );\n  }\n\n  // Non-interactive chip (display only or dismissible)\n  return (\n    <HStack accessibilityRole={isDismissible ? 'button' : undefined} {...sharedProps} {...rest}>\n      {content}\n    </HStack>\n  );\n});\n\nChip.displayName = 'Chip';\n\nexport { Chip, type ChipProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,MAAM,OAAO,KAAK,SAASA,OAAK,EAC9B,UAAU,WACV,OAAO,MACP,UACA,WAAW,KACX,WACA,SACA,WAAW,OACX,YAAY,OACZ,SACA,UACA,WACA,yBAAyB,WACzB,UACA,OACA,KACA,GAAG,QACS;CACZ,MAAM,gBAAgB,QAAQ,WAAW,SAAS;CAClD,MAAM,gBAAgB,QAAQ,UAAU;CACxC,MAAM,aAAa;CAEnB,MAAM,cAAc,YAAY,OAAO;AAKvC,YAAW,YAAY;EACrB;EACA,MAAM;EACN,aAAa;EACb,QAAQ;EACT,CAAC;CAEF,MAAM,cAAc,kBAAkB;AACpC,MAAI,WACF;AAGF,MAAI,SACF,UAAS,CAAC,UAAU;WACX,QACT,UAAS;IAEV;EAAC;EAAY;EAAU;EAAW;EAAQ,CAAC;CAE9C,MAAM,gBAAgB,kBAAkB;AACtC,MAAI,WACF;AAEF,eAAa;IACZ,CAAC,YAAY,UAAU,CAAC;CAE3B,MAAM,UACJ;EACG,aAAa,oBAAC;GAAS,MAAM;GAAW,SAAQ;GAAO,OAAO,WAAW;IAAQ;EAClF,oBAAC;GAAK,eAAe;GAAG,WAAU;GAAS,YAAW;GAAI,OAAO,WAAW;GACzE;IACI;EACN,gBACC,oBAAC;GACC,SAAS,aAAa,SAAY;GAClC,UAAU;GACV,oBAAoB;GACpB,mBAAkB;aAElB,oBAAC;IAAS,MAAM,WAAW;IAAS,SAAQ;IAAO,OAAO,WAAW;KAAQ;IACnE,GAEZ,WAAW,oBAAC;GAAS,MAAM;GAAS,SAAQ;GAAO,OAAO,WAAW;IAAQ;KAE9E;CAGL,MAAM,YAAY;EAChB,UAAU;EACV,SAAS,WAAW,YAAY;EACjC;CAGD,MAAM,cAAc;EAClB;EACA,OAHiB,cAAc,CAAC,WAAW,MAAM,MAAM,EAAE,CAAC,WAAW,MAAM,MAAM,CAAC;EAIlF,eAAe;EACf,YAAY;EACZ,UAAU;EACV,WAAW;EACX;EACA;EACA,UAAU;EACV,SAAS,aAAa,KAAM;EAC5B,oBAAoB;EACpB,GAAG;EACJ;AAGD,KAAI,cACF,QACE,oBAAC;EACC,SAAS;EACT,mBAAmB,WAAW,aAAa;EAC3C,GAAI;YAEH;GACS;AAKhB,QACE,oBAAC;EAAO,mBAAmB,gBAAgB,WAAW;EAAW,GAAI;EAAa,GAAI;YACnF;GACM;EAEX;AAEF,KAAK,cAAc"}

package/dist/components/HStack.d.cts

@@ -1,6 +1,6 @@
 
 import { BoxProps } from "./Box.cjs";
-import * as react3 from "react";
+import * as react5 from "react";
 import { Ref } from "react";
 import { View } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -35,7 +35,7 @@ interface HStackProps extends Omit<BoxProps, 'ref'> {
  *
  * @related [VStack](https://uds.build/docs/components/v-stack), [Box](https://uds.build/docs/components/box)
  */
-declare const HStack: react3.NamedExoticComponent<HStackProps>;
+declare const HStack: react5.NamedExoticComponent<HStackProps>;
 //#endregion
 export { HStack, type HStackProps };
 //# sourceMappingURL=HStack.d.cts.map

package/dist/components/HStack.d.mts

@@ -1,6 +1,6 @@
 
 import { BoxProps } from "./Box.mjs";
-import * as react3 from "react";
+import * as react18 from "react";
 import { Ref } from "react";
 import { View } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -35,7 +35,7 @@ interface HStackProps extends Omit<BoxProps, 'ref'> {
  *
  * @related [VStack](https://uds.build/docs/components/v-stack), [Box](https://uds.build/docs/components/box)
  */
-declare const HStack: react3.NamedExoticComponent<HStackProps>;
+declare const HStack: react18.NamedExoticComponent<HStackProps>;
 //#endregion
 export { HStack, type HStackProps };
 //# sourceMappingURL=HStack.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"HStack.d.mts","names":[],"sources":["../../src/components/HStack.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAQU,WAAA,SAAoB,KAAK;QAC3B;QACA,IAAI;AAL0B;;;;;;;AAGJ;;;;;;;;;;;;;;;;;;;cA8B5B,QAAM,MAAA,CAAA,qBAAA"}
+{"version":3,"file":"HStack.d.mts","names":[],"sources":["../../src/components/HStack.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAQU,WAAA,SAAoB,KAAK;QAC3B;QACA,IAAI;AAL0B;;;;;;;AAGJ;;;;;;;;;;;;;;;;;;;cA8B5B,QAAM,OAAA,CAAA,qBAAA"}

package/dist/components/Icon.d.cts

@@ -1,9 +1,8 @@
 
-import { IconSize, IconVariant } from "../icons/dist/types.cjs";
-import "../uds/dist/index.cjs";
 import { GlyphName } from "../icons/dist/glyphMap.cjs";
 import { SvgGlyphName } from "../icons/dist/svgMap.cjs";
-import * as react1 from "react";
+import { IconSize, IconVariant } from "../types/dist/index.cjs";
+import * as react7 from "react";
 import { Ref } from "react";
 import { StyleProp, Text, TextProps, TextStyle } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -82,7 +81,7 @@ interface IconProps extends Omit<TextProps, 'style'> {
  *
  * @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info
  */
-declare const Icon: react1.NamedExoticComponent<IconProps>;
+declare const Icon: react7.NamedExoticComponent<IconProps>;
 declare const iconNames: 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"];
 declare const multicolorIconNames: readonly ["Cloud", "CloudDay", "CloudNight", "Cold", "Dreary", "Dusk", "Eclipse", "FirstQuarter", "Fog", "FogDay", "FogNight", "FullMoon", "HalfSun", "HazeDay", "HazeNight", "HeavyRain", "HeavyRainDay", "HeavyRainLightning", "HeavyRainLightningDay", "HeavyRainLightningNight", "HeavyRainNight", "Hot", "Hurricane", "Ice", "IntermittentCloudsNight", "IntermittentCloudsSunny", "Lightning", "LightningDay", "LightningNight", "MostlyNightFlurries", "Night", "PartlyCloudyNight", "PartlyFlurries", "PartlyNightFlurries", "PartlySunny", "Rain", "RainDay", "RainNight", "Sleet", "Snow", "SnowDay", "Snowflake", "SprinkleDay", "SprinkleNight", "Sun", "Sunrise", "Sunset", "ThirdQuarter", "Tornado", "WaningCrescent", "WaningGibbous", "WaxingCrescent", "WaxingGibbous", "Wind", "WindCloud", "WindCloudDay", "WindCloudNight"];
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.cts","names":[],"sources":["../../src/components/Icon.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;KAkCK,QAAA,GAAW,YAAY;UAElB,SAAA,SAAkB,KAAK;QACzB,IAAI;;EAHP,IAAA,EAKG,QALK;EAEH;EAAuB,IAAA,CAAA,EAKxB,QALwB;EACrB;EAAJ,KAAA,CAAA,EAME,UANF,CAAA,OAAA,CAAA;EAEA;EAEC,OAAA,CAAA,EAIG,WAJH;EAEC,eAAA,CAAA,EAIU,UAJV,CAAA,iBAAA,CAAA;EAEE,YAAA,CAAA,EAIK,UAJL,CAAA,cAAA,CAAA;EAEQ,oBAAA,CAAA,EAGK,UAHL,CAAA,sBAAA,CAAA;EAEH,kBAAA,CAAA,EAEM,UAFN,CAAA,oBAAA,CAAA;EACQ,uBAAA,CAAA,EAEG,UAFH,CAAA,yBAAA,CAAA;EACF,qBAAA,CAAA,EAEG,UAFH,CAAA,uBAAA,CAAA;EACK,WAAA,CAAA,EAEZ,UAFY,CAAA,aAAA,CAAA;EACF,gBAAA,CAAA,EAEL,UAFK,CAAA,kBAAA,CAAA;EACV,cAAA,CAAA,EAEG,UAFH,CAAA,gBAAA,CAAA;EACK,cAAA,CAAA,EAEF,UAFE,CAAA,gBAAA,CAAA;EACF,iBAAA,CAAA,EAEG,UAFH,CAAA,mBAAA,CAAA;EACA,WAAA,CAAA,EAEH,UAFG,CAAA,aAAA,CAAA;EACG,mBAAA,CAAA,EAEE,UAFF,CAAA,qBAAA,CAAA;EACN,qBAAA,CAAA,EAEU,UAFV,CAAA,uBAAA,CAAA;EACQ,gBAAA,CAAA,EAEH,UAFG,CAAA,kBAAA,CAAA;EACE,cAAA,CAAA,EAEP,UAFO,CAAA,gBAAA,CAAA;EACL,cAAA,CAAA,EAEF,UAFE,CAAA,gBAAA,CAAA;EACF,iBAAA,CAAA,EAEG,UAFH,CAAA,mBAAA,CAAA;EACA,UAAA,CAAA,EAGJ,UAHI,CAAA,YAAA,CAAA;EACG,YAAA,CAAA,EAIL,UAJK,CAAA,cAAA,CAAA;EAEP,UAAA,CAAA,EAGA,UAHA,CAAA,YAAA,CAAA;EAEE,UAAA,CAAA,EAEF,UAFE,CAAA,YAAA,CAAA;EACF,aAAA,CAAA,EAEG,UAFH,CAAA,eAAA,CAAA;EACA,iBAAA,CAAA,EAEO,UAFP,CAAA,mBAAA,CAAA;EACG,eAAA,CAAA,EAEE,UAFF,CAAA,iBAAA,CAAA;EACI,OAAA,CAAA,EAEV,UAFU,CAAA,SAAA,CAAA;EACF,WAAA,CAAA,EAGJ,UAHI,CAAA,aAAA,CAAA;EACR,SAAA,CAAA,EAGE,UAHF,CAAA,WAAA,CAAA;EAEI,SAAA,CAAA,EAEF,UAFE,CAAA,WAAA,CAAA;EACF,YAAA,CAAA,EAEG,UAFH,CAAA,cAAA,CAAA;EACA,gBAAA,CAAA,EAEO,UAFP,CAAA,kBAAA,CAAA;EACG,cAAA,CAAA,EAEE,UAFF,CAAA,gBAAA,CAAA;EACI,MAAA,CAAA,EAEV,UAFU,CAAA,QAAA,CAAA;EACF;EACR,mBAAA,CAAA,EAAA,MAAA;EAMS;EAAV,kBAAA,CAAA,EAAA,MAAA;EArDkB;EAAI,KAAA,CAAA,EAqDtB,SArDsB,CAqDZ,SArDY,CAAA;AAAA;AAuQhC;AACA;;;;;;;;;;;;;;;;;;;;;cAdM,MAAI,MAAA,CAAA,qBAAA;cAaG;cACA"}
+{"version":3,"file":"Icon.d.cts","names":[],"sources":["../../src/components/Icon.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;KAkCK,QAAA,GAAW,YAAY;UAElB,SAAA,SAAkB,KAAK;QACzB,IAAI;EAHP;EAEK,IAAA,EAGF,QAHY;EAAa;EACrB,IAAA,CAAA,EAIH,QAJG;EAAJ;EAEA,KAAA,CAAA,EAIE,UAJF,CAAA,OAAA,CAAA;EAEC;EAEC,OAAA,CAAA,EAEE,WAFF;EAEE,eAAA,CAAA,EAEQ,UAFR,CAAA,iBAAA,CAAA;EAEQ,YAAA,CAAA,EAEH,UAFG,CAAA,cAAA,CAAA;EAEH,oBAAA,CAAA,EACQ,UADR,CAAA,sBAAA,CAAA;EACQ,kBAAA,CAAA,EACF,UADE,CAAA,oBAAA,CAAA;EACF,uBAAA,CAAA,EACK,UADL,CAAA,yBAAA,CAAA;EACK,qBAAA,CAAA,EACF,UADE,CAAA,uBAAA,CAAA;EACF,WAAA,CAAA,EACV,UADU,CAAA,aAAA,CAAA;EACV,gBAAA,CAAA,EACK,UADL,CAAA,kBAAA,CAAA;EACK,cAAA,CAAA,EACF,UADE,CAAA,gBAAA,CAAA;EACF,cAAA,CAAA,EACA,UADA,CAAA,gBAAA,CAAA;EACA,iBAAA,CAAA,EACG,UADH,CAAA,mBAAA,CAAA;EACG,WAAA,CAAA,EACN,UADM,CAAA,aAAA,CAAA;EACN,mBAAA,CAAA,EACQ,UADR,CAAA,qBAAA,CAAA;EACQ,qBAAA,CAAA,EACE,UADF,CAAA,uBAAA,CAAA;EACE,gBAAA,CAAA,EACL,UADK,CAAA,kBAAA,CAAA;EACL,cAAA,CAAA,EACF,UADE,CAAA,gBAAA,CAAA;EACF,cAAA,CAAA,EACA,UADA,CAAA,gBAAA,CAAA;EACA,iBAAA,CAAA,EACG,UADH,CAAA,mBAAA,CAAA;EACG,UAAA,CAAA,EAEP,UAFO,CAAA,YAAA,CAAA;EAEP,YAAA,CAAA,EAEE,UAFF,CAAA,cAAA,CAAA;EAEE,UAAA,CAAA,EACF,UADE,CAAA,YAAA,CAAA;EACF,UAAA,CAAA,EACA,UADA,CAAA,YAAA,CAAA;EACA,aAAA,CAAA,EACG,UADH,CAAA,eAAA,CAAA;EACG,iBAAA,CAAA,EACI,UADJ,CAAA,mBAAA,CAAA;EACI,eAAA,CAAA,EACF,UADE,CAAA,iBAAA,CAAA;EACF,OAAA,CAAA,EACR,UADQ,CAAA,SAAA,CAAA;EACR,WAAA,CAAA,EAEI,UAFJ,CAAA,aAAA,CAAA;EAEI,SAAA,CAAA,EACF,UADE,CAAA,WAAA,CAAA;EACF,SAAA,CAAA,EACA,UADA,CAAA,WAAA,CAAA;EACA,YAAA,CAAA,EACG,UADH,CAAA,cAAA,CAAA;EACG,gBAAA,CAAA,EACI,UADJ,CAAA,kBAAA,CAAA;EACI,cAAA,CAAA,EACF,UADE,CAAA,gBAAA,CAAA;EACF,MAAA,CAAA,EACR,UADQ,CAAA,QAAA,CAAA;EACR;EAMS,mBAAA,CAAA,EAAA,MAAA;EAAV;EArDkB,kBAAA,CAAA,EAAA,MAAA;EAAI;EA0P1B,KAAA,CAAA,EArMI,SA4MR,CA5MkB,SAqMV,CAAA;AAaV;AACA;;;;;;;;;;;;;;;;;;;;;;cAdM,MAAI,MAAA,CAAA,qBAAA;cAaG;cACA"}

package/dist/components/Icon.d.mts

@@ -1,9 +1,8 @@
 
-import { IconSize, IconVariant } from "../icons/dist/types.mjs";
-import "../uds/dist/index.mjs";
 import { GlyphName } from "../icons/dist/glyphMap.mjs";
 import { SvgGlyphName } from "../icons/dist/svgMap.mjs";
-import * as react4 from "react";
+import { IconSize, IconVariant } from "../types/dist/index.mjs";
+import * as react6 from "react";
 import { Ref } from "react";
 import { StyleProp, Text, TextProps, TextStyle } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -82,7 +81,7 @@ interface IconProps extends Omit<TextProps, 'style'> {
  *
  * @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info
  */
-declare const Icon: react4.NamedExoticComponent<IconProps>;
+declare const Icon: react6.NamedExoticComponent<IconProps>;
 declare const iconNames: 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"];
 declare const multicolorIconNames: readonly ["Cloud", "CloudDay", "CloudNight", "Cold", "Dreary", "Dusk", "Eclipse", "FirstQuarter", "Fog", "FogDay", "FogNight", "FullMoon", "HalfSun", "HazeDay", "HazeNight", "HeavyRain", "HeavyRainDay", "HeavyRainLightning", "HeavyRainLightningDay", "HeavyRainLightningNight", "HeavyRainNight", "Hot", "Hurricane", "Ice", "IntermittentCloudsNight", "IntermittentCloudsSunny", "Lightning", "LightningDay", "LightningNight", "MostlyNightFlurries", "Night", "PartlyCloudyNight", "PartlyFlurries", "PartlyNightFlurries", "PartlySunny", "Rain", "RainDay", "RainNight", "Sleet", "Snow", "SnowDay", "Snowflake", "SprinkleDay", "SprinkleNight", "Sun", "Sunrise", "Sunset", "ThirdQuarter", "Tornado", "WaningCrescent", "WaningGibbous", "WaxingCrescent", "WaxingGibbous", "Wind", "WindCloud", "WindCloudDay", "WindCloudNight"];
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.mts","names":[],"sources":["../../src/components/Icon.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;KAkCK,QAAA,GAAW,YAAY;UAElB,SAAA,SAAkB,KAAK;QACzB,IAAI;;EAHP,IAAA,EAKG,QALK;EAEH;EAAuB,IAAA,CAAA,EAKxB,QALwB;EACrB;EAAJ,KAAA,CAAA,EAME,UANF,CAAA,OAAA,CAAA;EAEA;EAEC,OAAA,CAAA,EAIG,WAJH;EAEC,eAAA,CAAA,EAIU,UAJV,CAAA,iBAAA,CAAA;EAEE,YAAA,CAAA,EAIK,UAJL,CAAA,cAAA,CAAA;EAEQ,oBAAA,CAAA,EAGK,UAHL,CAAA,sBAAA,CAAA;EAEH,kBAAA,CAAA,EAEM,UAFN,CAAA,oBAAA,CAAA;EACQ,uBAAA,CAAA,EAEG,UAFH,CAAA,yBAAA,CAAA;EACF,qBAAA,CAAA,EAEG,UAFH,CAAA,uBAAA,CAAA;EACK,WAAA,CAAA,EAEZ,UAFY,CAAA,aAAA,CAAA;EACF,gBAAA,CAAA,EAEL,UAFK,CAAA,kBAAA,CAAA;EACV,cAAA,CAAA,EAEG,UAFH,CAAA,gBAAA,CAAA;EACK,cAAA,CAAA,EAEF,UAFE,CAAA,gBAAA,CAAA;EACF,iBAAA,CAAA,EAEG,UAFH,CAAA,mBAAA,CAAA;EACA,WAAA,CAAA,EAEH,UAFG,CAAA,aAAA,CAAA;EACG,mBAAA,CAAA,EAEE,UAFF,CAAA,qBAAA,CAAA;EACN,qBAAA,CAAA,EAEU,UAFV,CAAA,uBAAA,CAAA;EACQ,gBAAA,CAAA,EAEH,UAFG,CAAA,kBAAA,CAAA;EACE,cAAA,CAAA,EAEP,UAFO,CAAA,gBAAA,CAAA;EACL,cAAA,CAAA,EAEF,UAFE,CAAA,gBAAA,CAAA;EACF,iBAAA,CAAA,EAEG,UAFH,CAAA,mBAAA,CAAA;EACA,UAAA,CAAA,EAGJ,UAHI,CAAA,YAAA,CAAA;EACG,YAAA,CAAA,EAIL,UAJK,CAAA,cAAA,CAAA;EAEP,UAAA,CAAA,EAGA,UAHA,CAAA,YAAA,CAAA;EAEE,UAAA,CAAA,EAEF,UAFE,CAAA,YAAA,CAAA;EACF,aAAA,CAAA,EAEG,UAFH,CAAA,eAAA,CAAA;EACA,iBAAA,CAAA,EAEO,UAFP,CAAA,mBAAA,CAAA;EACG,eAAA,CAAA,EAEE,UAFF,CAAA,iBAAA,CAAA;EACI,OAAA,CAAA,EAEV,UAFU,CAAA,SAAA,CAAA;EACF,WAAA,CAAA,EAGJ,UAHI,CAAA,aAAA,CAAA;EACR,SAAA,CAAA,EAGE,UAHF,CAAA,WAAA,CAAA;EAEI,SAAA,CAAA,EAEF,UAFE,CAAA,WAAA,CAAA;EACF,YAAA,CAAA,EAEG,UAFH,CAAA,cAAA,CAAA;EACA,gBAAA,CAAA,EAEO,UAFP,CAAA,kBAAA,CAAA;EACG,cAAA,CAAA,EAEE,UAFF,CAAA,gBAAA,CAAA;EACI,MAAA,CAAA,EAEV,UAFU,CAAA,QAAA,CAAA;EACF;EACR,mBAAA,CAAA,EAAA,MAAA;EAMS;EAAV,kBAAA,CAAA,EAAA,MAAA;EArDkB;EAAI,KAAA,CAAA,EAqDtB,SArDsB,CAqDZ,SArDY,CAAA;AAAA;AAuQhC;AACA;;;;;;;;;;;;;;;;;;;;;cAdM,MAAI,MAAA,CAAA,qBAAA;cAaG;cACA"}
+{"version":3,"file":"Icon.d.mts","names":[],"sources":["../../src/components/Icon.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;KAkCK,QAAA,GAAW,YAAY;UAElB,SAAA,SAAkB,KAAK;QACzB,IAAI;EAHP;EAEK,IAAA,EAGF,QAHY;EAAa;EACrB,IAAA,CAAA,EAIH,QAJG;EAAJ;EAEA,KAAA,CAAA,EAIE,UAJF,CAAA,OAAA,CAAA;EAEC;EAEC,OAAA,CAAA,EAEE,WAFF;EAEE,eAAA,CAAA,EAEQ,UAFR,CAAA,iBAAA,CAAA;EAEQ,YAAA,CAAA,EAEH,UAFG,CAAA,cAAA,CAAA;EAEH,oBAAA,CAAA,EACQ,UADR,CAAA,sBAAA,CAAA;EACQ,kBAAA,CAAA,EACF,UADE,CAAA,oBAAA,CAAA;EACF,uBAAA,CAAA,EACK,UADL,CAAA,yBAAA,CAAA;EACK,qBAAA,CAAA,EACF,UADE,CAAA,uBAAA,CAAA;EACF,WAAA,CAAA,EACV,UADU,CAAA,aAAA,CAAA;EACV,gBAAA,CAAA,EACK,UADL,CAAA,kBAAA,CAAA;EACK,cAAA,CAAA,EACF,UADE,CAAA,gBAAA,CAAA;EACF,cAAA,CAAA,EACA,UADA,CAAA,gBAAA,CAAA;EACA,iBAAA,CAAA,EACG,UADH,CAAA,mBAAA,CAAA;EACG,WAAA,CAAA,EACN,UADM,CAAA,aAAA,CAAA;EACN,mBAAA,CAAA,EACQ,UADR,CAAA,qBAAA,CAAA;EACQ,qBAAA,CAAA,EACE,UADF,CAAA,uBAAA,CAAA;EACE,gBAAA,CAAA,EACL,UADK,CAAA,kBAAA,CAAA;EACL,cAAA,CAAA,EACF,UADE,CAAA,gBAAA,CAAA;EACF,cAAA,CAAA,EACA,UADA,CAAA,gBAAA,CAAA;EACA,iBAAA,CAAA,EACG,UADH,CAAA,mBAAA,CAAA;EACG,UAAA,CAAA,EAEP,UAFO,CAAA,YAAA,CAAA;EAEP,YAAA,CAAA,EAEE,UAFF,CAAA,cAAA,CAAA;EAEE,UAAA,CAAA,EACF,UADE,CAAA,YAAA,CAAA;EACF,UAAA,CAAA,EACA,UADA,CAAA,YAAA,CAAA;EACA,aAAA,CAAA,EACG,UADH,CAAA,eAAA,CAAA;EACG,iBAAA,CAAA,EACI,UADJ,CAAA,mBAAA,CAAA;EACI,eAAA,CAAA,EACF,UADE,CAAA,iBAAA,CAAA;EACF,OAAA,CAAA,EACR,UADQ,CAAA,SAAA,CAAA;EACR,WAAA,CAAA,EAEI,UAFJ,CAAA,aAAA,CAAA;EAEI,SAAA,CAAA,EACF,UADE,CAAA,WAAA,CAAA;EACF,SAAA,CAAA,EACA,UADA,CAAA,WAAA,CAAA;EACA,YAAA,CAAA,EACG,UADH,CAAA,cAAA,CAAA;EACG,gBAAA,CAAA,EACI,UADJ,CAAA,kBAAA,CAAA;EACI,cAAA,CAAA,EACF,UADE,CAAA,gBAAA,CAAA;EACF,MAAA,CAAA,EACR,UADQ,CAAA,QAAA,CAAA;EACR;EAMS,mBAAA,CAAA,EAAA,MAAA;EAAV;EArDkB,kBAAA,CAAA,EAAA,MAAA;EAAI;EA0P1B,KAAA,CAAA,EArMI,SA4MR,CA5MkB,SAqMV,CAAA;AAaV;AACA;;;;;;;;;;;;;;;;;;;;;;cAdM,MAAI,MAAA,CAAA,qBAAA;cAaG;cACA"}

package/dist/components/Icon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.mjs","names":["MulticolorIcon","OutlineOrFillIcon","Icon"],"sources":["../../src/components/Icon.tsx"],"sourcesContent":["import type { IconSize, IconVariant } from '@yahoo/uds';\nimport type { GlyphName } from '@yahoo/uds-icons/glyphMap';\nimport { glyphMap, glyphNames } from '@yahoo/uds-icons/glyphMap';\nimport type { SvgGlyphKey, SvgGlyphName } from '@yahoo/uds-icons/svgMap';\nimport { svgGlyphNames, svgMap } from '@yahoo/uds-icons/svgMap';\nimport { ICON_SIZE_MAP } from '@yahoo/uds-icons/tokens';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type {\n  StyleProp,\n  Text as RNText,\n  TextProps as RNTextProps,\n  TextStyle,\n  ViewProps,\n} from 'react-native';\nimport { Text, View } from 'react-native';\nimport { SvgXml } from 'react-native-svg';\n// eslint-disable-next-line uds/no-use-unistyles\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\n\nconst DEFAULT_PROPS = {\n  size: 'md',\n  color: 'primary',\n  variant: 'outline',\n  flexShrink: '0',\n} as const;\n\n/* -------------------------------------------------------------------------- */\n/*                                Icon Props                                   */\n/* -------------------------------------------------------------------------- */\n\ntype IconName = GlyphName | SvgGlyphName;\n\ninterface IconProps extends Omit<RNTextProps, 'style'> {\n  ref?: Ref<RNText>;\n  /** The icon name */\n  name: IconName;\n  /** Icon size */\n  size?: IconSize;\n  /** Icon color */\n  color?: StyleProps['color'];\n  /** Icon variant (outline, fill, multicolor) */\n  variant?: IconVariant;\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  // Flex\n  flexShrink?: StyleProps['flexShrink'];\n  // Spacing\n  spacingStart?: StyleProps['spacingStart'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingTop?: StyleProps['spacingTop'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacing?: StyleProps['spacing'];\n  // Offset\n  offsetStart?: StyleProps['offsetStart'];\n  offsetEnd?: StyleProps['offsetEnd'];\n  offsetTop?: StyleProps['offsetTop'];\n  offsetBottom?: StyleProps['offsetBottom'];\n  offsetHorizontal?: StyleProps['offsetHorizontal'];\n  offsetVertical?: StyleProps['offsetVertical'];\n  offset?: StyleProps['offset'];\n  /** Icon color override */\n  dangerouslySetColor?: string;\n  /** Icon font size override */\n  dangerouslySetSize?: number;\n  /** Optional style override */\n  style?: StyleProp<TextStyle>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            Multicolor Icon                                  */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Separate component for multicolor SVG icons.\n * Uses useUnistyles() for reactive theme access - isolated here so\n * glyph-based icons don't pay the hook overhead.\n */\nconst MulticolorIcon = memo(function MulticolorIcon({\n  name,\n  size = DEFAULT_PROPS.size,\n  flexShrink = DEFAULT_PROPS.flexShrink,\n  backgroundColor,\n  dangerouslySetSize,\n}: Omit<IconProps, 'variant'>) {\n  // Reactive theme subscription - only multicolor icons need this\n  const { rt } = useUnistyles();\n  const colorScheme = rt.themeName === 'dark' ? 'dark' : 'light';\n\n  const pixelSize = ICON_SIZE_MAP[size];\n  const svgKey = `${name}-${colorScheme}-${pixelSize}` as SvgGlyphKey;\n  const svgContent = svgMap[svgKey];\n\n  if (!svgContent) {\n    console.warn(`Multicolor icon \"${svgKey}\" not found`);\n    return null;\n  }\n\n  styles.useVariants({\n    flexShrink,\n    backgroundColor,\n  });\n\n  return (\n    <View style={styles.foundation as ViewProps['style']}>\n      <SvgXml\n        xml={svgContent}\n        width={dangerouslySetSize ?? pixelSize}\n        height={dangerouslySetSize ?? pixelSize}\n      />\n    </View>\n  );\n});\n\nconst OutlineOrFillIcon = memo(function OutlineOrFillIcon({\n  name,\n  size = DEFAULT_PROPS.size,\n  color = DEFAULT_PROPS.color,\n  variant = DEFAULT_PROPS.variant,\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  // Flex\n  flexShrink = '0',\n  // Spacing\n  spacingStart,\n  spacingEnd,\n  spacingTop,\n  spacingBottom,\n  spacingHorizontal,\n  spacingVertical,\n  spacing,\n  // Offset\n  offsetStart,\n  offsetEnd,\n  offsetTop,\n  offsetBottom,\n  offsetHorizontal,\n  offsetVertical,\n  offset,\n  // Dangerously set props\n  dangerouslySetColor,\n  dangerouslySetSize,\n  style,\n  ref,\n  ...props\n}: Omit<IconProps, 'variant'> & { variant?: 'outline' | 'fill' }) {\n  const pixelSize = ICON_SIZE_MAP[size];\n  // Glyph-based icons - no useUnistyles needed, styles.useVariants is reactive\n  styles.useVariants({\n    color,\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    // Flex\n    flexShrink,\n    // Spacing\n    spacingStart,\n    spacingEnd,\n    spacingTop,\n    spacingBottom,\n    spacingHorizontal,\n    spacingVertical,\n    spacing,\n    // Offset\n    offsetStart,\n    offsetEnd,\n    offsetTop,\n    offsetBottom,\n    offsetHorizontal,\n    offsetVertical,\n    offset,\n  });\n  const glyphName = `${name}-${variant}-${pixelSize}`;\n  const glyph = (glyphMap as Record<string, string>)[glyphName];\n  const textStyles: StyleProp<TextStyle> = useMemo(\n    () => [\n      {\n        fontFamily: 'uds-icons',\n        textAlign: 'center',\n        textAlignVertical: 'center',\n      },\n      styles.foundation,\n      dangerouslySetColor ? { color: dangerouslySetColor } : undefined,\n      dangerouslySetSize\n        ? {\n            fontSize: dangerouslySetSize,\n            lineHeight: dangerouslySetSize,\n          }\n        : undefined,\n      style,\n    ],\n    [dangerouslySetColor, dangerouslySetSize, style, styles.foundation],\n  );\n\n  return (\n    <Text\n      ref={ref}\n      accessibilityRole=\"image\"\n      accessibilityLabel={name}\n      style={textStyles}\n      {...props}\n    >\n      {glyph}\n    </Text>\n  );\n});\n\n/**\n * **🎨 An icon component using UDS icon fonts**\n *\n * @description\n * Renders icons from the UDS icon library. Supports multiple variants\n * (outline, fill, multicolor) and sizes.\n *\n * @example\n * ```tsx\n * import { Icon } from '@yahoo/uds-mobile';\n *\n * <Icon name=\"ChevronRight\" size=\"md\" color=\"primary\" />\n * <Icon name=\"Star\" variant=\"fill\" color=\"accent\" />\n * ```\n *\n * @usage\n * - Use name prop to specify the icon\n * - Use variant prop for outline/fill/multicolor\n * - Use size prop for icon size (xs, sm, md, lg, xl)\n *\n * @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info\n */\nconst Icon = memo(function Icon({ variant, ...props }: IconProps) {\n  // Delegate to MulticolorIcon for SVG-based icons (has its own useUnistyles)\n  if (variant === 'multicolor') {\n    return <MulticolorIcon {...props} />;\n  }\n\n  return <OutlineOrFillIcon variant={variant} {...props} />;\n});\n\nIcon.displayName = 'Icon';\n\nexport { Icon };\nexport type { IconName, IconProps };\nexport const iconNames = glyphNames;\nexport const multicolorIconNames = svgGlyphNames;\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAM,gBAAgB;CACpB,MAAM;CACN,OAAO;CACP,SAAS;CACT,YAAY;CACb;;;;;;AAyED,MAAM,iBAAiB,KAAK,SAASA,iBAAe,EAClD,MACA,OAAO,cAAc,MACrB,aAAa,cAAc,YAC3B,iBACA,sBAC6B;CAE7B,MAAM,EAAE,OAAO,cAAc;CAC7B,MAAM,cAAc,GAAG,cAAc,SAAS,SAAS;CAEvD,MAAM,YAAY,cAAc;CAChC,MAAM,SAAS,GAAG,KAAK,GAAG,YAAY,GAAG;CACzC,MAAM,aAAa,OAAO;AAE1B,KAAI,CAAC,YAAY;AACf,UAAQ,KAAK,oBAAoB,OAAO,aAAa;AACrD,SAAO;;AAGT,QAAO,YAAY;EACjB;EACA;EACD,CAAC;AAEF,QACE,oBAAC;EAAK,OAAO,OAAO;YAClB,oBAAC;GACC,KAAK;GACL,OAAO,sBAAsB;GAC7B,QAAQ,sBAAsB;IAC9B;GACG;EAET;AAEF,MAAM,oBAAoB,KAAK,SAASC,oBAAkB,EACxD,MACA,OAAO,cAAc,MACrB,QAAQ,cAAc,OACtB,UAAU,cAAc,SAExB,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,aAAa,KAEb,cACA,YACA,YACA,eACA,mBACA,iBACA,SAEA,aACA,WACA,WACA,cACA,kBACA,gBACA,QAEA,qBACA,oBACA,OACA,KACA,GAAG,SAC6D;CAChE,MAAM,YAAY,cAAc;AAEhC,QAAO,YAAY;EACjB;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAS,SADG,GAAG,KAAK,GAAG,QAAQ,GAAG;AAsBxC,QACE,oBAAC;EACM;EACL,mBAAkB;EAClB,oBAAoB;EACpB,OAzBqC,cACjC;GACJ;IACE,YAAY;IACZ,WAAW;IACX,mBAAmB;IACpB;GACD,OAAO;GACP,sBAAsB,EAAE,OAAO,qBAAqB,GAAG;GACvD,qBACI;IACE,UAAU;IACV,YAAY;IACb,GACD;GACJ;GACD,EACD;GAAC;GAAqB;GAAoB;GAAO,OAAO;GAAW,CACpE;EAQG,GAAI;YAEH;GACI;EAET;;;;;;;;;;;;;;;;;;;;;;;AAwBF,MAAM,OAAO,KAAK,SAASC,OAAK,EAAE,SAAS,GAAG,SAAoB;AAEhE,KAAI,YAAY,aACd,QAAO,oBAAC,kBAAe,GAAI,QAAS;AAGtC,QAAO,oBAAC;EAA2B;EAAS,GAAI;GAAS;EACzD;AAEF,KAAK,cAAc;AAInB,MAAa,YAAY;AACzB,MAAa,sBAAsB"}
+{"version":3,"file":"Icon.mjs","names":["MulticolorIcon","OutlineOrFillIcon","Icon"],"sources":["../../src/components/Icon.tsx"],"sourcesContent":["import type { GlyphName } from '@yahoo/uds-icons/glyphMap';\nimport { glyphMap, glyphNames } from '@yahoo/uds-icons/glyphMap';\nimport type { SvgGlyphKey, SvgGlyphName } from '@yahoo/uds-icons/svgMap';\nimport { svgGlyphNames, svgMap } from '@yahoo/uds-icons/svgMap';\nimport { ICON_SIZE_MAP } from '@yahoo/uds-icons/tokens';\nimport type { IconSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type {\n  StyleProp,\n  Text as RNText,\n  TextProps as RNTextProps,\n  TextStyle,\n  ViewProps,\n} from 'react-native';\nimport { Text, View } from 'react-native';\nimport { SvgXml } from 'react-native-svg';\n// eslint-disable-next-line uds/no-use-unistyles\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\n\nconst DEFAULT_PROPS = {\n  size: 'md',\n  color: 'primary',\n  variant: 'outline',\n  flexShrink: '0',\n} as const;\n\n/* -------------------------------------------------------------------------- */\n/*                                Icon Props                                   */\n/* -------------------------------------------------------------------------- */\n\ntype IconName = GlyphName | SvgGlyphName;\n\ninterface IconProps extends Omit<RNTextProps, 'style'> {\n  ref?: Ref<RNText>;\n  /** The icon name */\n  name: IconName;\n  /** Icon size */\n  size?: IconSize;\n  /** Icon color */\n  color?: StyleProps['color'];\n  /** Icon variant (outline, fill, multicolor) */\n  variant?: IconVariant;\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  // Flex\n  flexShrink?: StyleProps['flexShrink'];\n  // Spacing\n  spacingStart?: StyleProps['spacingStart'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingTop?: StyleProps['spacingTop'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacing?: StyleProps['spacing'];\n  // Offset\n  offsetStart?: StyleProps['offsetStart'];\n  offsetEnd?: StyleProps['offsetEnd'];\n  offsetTop?: StyleProps['offsetTop'];\n  offsetBottom?: StyleProps['offsetBottom'];\n  offsetHorizontal?: StyleProps['offsetHorizontal'];\n  offsetVertical?: StyleProps['offsetVertical'];\n  offset?: StyleProps['offset'];\n  /** Icon color override */\n  dangerouslySetColor?: string;\n  /** Icon font size override */\n  dangerouslySetSize?: number;\n  /** Optional style override */\n  style?: StyleProp<TextStyle>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            Multicolor Icon                                  */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Separate component for multicolor SVG icons.\n * Uses useUnistyles() for reactive theme access - isolated here so\n * glyph-based icons don't pay the hook overhead.\n */\nconst MulticolorIcon = memo(function MulticolorIcon({\n  name,\n  size = DEFAULT_PROPS.size,\n  flexShrink = DEFAULT_PROPS.flexShrink,\n  backgroundColor,\n  dangerouslySetSize,\n}: Omit<IconProps, 'variant'>) {\n  // Reactive theme subscription - only multicolor icons need this\n  const { rt } = useUnistyles();\n  const colorScheme = rt.themeName === 'dark' ? 'dark' : 'light';\n\n  const pixelSize = ICON_SIZE_MAP[size];\n  const svgKey = `${name}-${colorScheme}-${pixelSize}` as SvgGlyphKey;\n  const svgContent = svgMap[svgKey];\n\n  if (!svgContent) {\n    console.warn(`Multicolor icon \"${svgKey}\" not found`);\n    return null;\n  }\n\n  styles.useVariants({\n    flexShrink,\n    backgroundColor,\n  });\n\n  return (\n    <View style={styles.foundation as ViewProps['style']}>\n      <SvgXml\n        xml={svgContent}\n        width={dangerouslySetSize ?? pixelSize}\n        height={dangerouslySetSize ?? pixelSize}\n      />\n    </View>\n  );\n});\n\nconst OutlineOrFillIcon = memo(function OutlineOrFillIcon({\n  name,\n  size = DEFAULT_PROPS.size,\n  color = DEFAULT_PROPS.color,\n  variant = DEFAULT_PROPS.variant,\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  // Flex\n  flexShrink = '0',\n  // Spacing\n  spacingStart,\n  spacingEnd,\n  spacingTop,\n  spacingBottom,\n  spacingHorizontal,\n  spacingVertical,\n  spacing,\n  // Offset\n  offsetStart,\n  offsetEnd,\n  offsetTop,\n  offsetBottom,\n  offsetHorizontal,\n  offsetVertical,\n  offset,\n  // Dangerously set props\n  dangerouslySetColor,\n  dangerouslySetSize,\n  style,\n  ref,\n  ...props\n}: Omit<IconProps, 'variant'> & { variant?: 'outline' | 'fill' }) {\n  const pixelSize = ICON_SIZE_MAP[size];\n  // Glyph-based icons - no useUnistyles needed, styles.useVariants is reactive\n  styles.useVariants({\n    color,\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    // Flex\n    flexShrink,\n    // Spacing\n    spacingStart,\n    spacingEnd,\n    spacingTop,\n    spacingBottom,\n    spacingHorizontal,\n    spacingVertical,\n    spacing,\n    // Offset\n    offsetStart,\n    offsetEnd,\n    offsetTop,\n    offsetBottom,\n    offsetHorizontal,\n    offsetVertical,\n    offset,\n  });\n  const glyphName = `${name}-${variant}-${pixelSize}`;\n  const glyph = (glyphMap as Record<string, string>)[glyphName];\n  const textStyles: StyleProp<TextStyle> = useMemo(\n    () => [\n      {\n        fontFamily: 'uds-icons',\n        textAlign: 'center',\n        textAlignVertical: 'center',\n      },\n      styles.foundation,\n      dangerouslySetColor ? { color: dangerouslySetColor } : undefined,\n      dangerouslySetSize\n        ? {\n            fontSize: dangerouslySetSize,\n            lineHeight: dangerouslySetSize,\n          }\n        : undefined,\n      style,\n    ],\n    [dangerouslySetColor, dangerouslySetSize, style, styles.foundation],\n  );\n\n  return (\n    <Text\n      ref={ref}\n      accessibilityRole=\"image\"\n      accessibilityLabel={name}\n      style={textStyles}\n      {...props}\n    >\n      {glyph}\n    </Text>\n  );\n});\n\n/**\n * **🎨 An icon component using UDS icon fonts**\n *\n * @description\n * Renders icons from the UDS icon library. Supports multiple variants\n * (outline, fill, multicolor) and sizes.\n *\n * @example\n * ```tsx\n * import { Icon } from '@yahoo/uds-mobile';\n *\n * <Icon name=\"ChevronRight\" size=\"md\" color=\"primary\" />\n * <Icon name=\"Star\" variant=\"fill\" color=\"accent\" />\n * ```\n *\n * @usage\n * - Use name prop to specify the icon\n * - Use variant prop for outline/fill/multicolor\n * - Use size prop for icon size (xs, sm, md, lg, xl)\n *\n * @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info\n */\nconst Icon = memo(function Icon({ variant, ...props }: IconProps) {\n  // Delegate to MulticolorIcon for SVG-based icons (has its own useUnistyles)\n  if (variant === 'multicolor') {\n    return <MulticolorIcon {...props} />;\n  }\n\n  return <OutlineOrFillIcon variant={variant} {...props} />;\n});\n\nIcon.displayName = 'Icon';\n\nexport { Icon };\nexport type { IconName, IconProps };\nexport const iconNames = glyphNames;\nexport const multicolorIconNames = svgGlyphNames;\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAM,gBAAgB;CACpB,MAAM;CACN,OAAO;CACP,SAAS;CACT,YAAY;CACb;;;;;;AAyED,MAAM,iBAAiB,KAAK,SAASA,iBAAe,EAClD,MACA,OAAO,cAAc,MACrB,aAAa,cAAc,YAC3B,iBACA,sBAC6B;CAE7B,MAAM,EAAE,OAAO,cAAc;CAC7B,MAAM,cAAc,GAAG,cAAc,SAAS,SAAS;CAEvD,MAAM,YAAY,cAAc;CAChC,MAAM,SAAS,GAAG,KAAK,GAAG,YAAY,GAAG;CACzC,MAAM,aAAa,OAAO;AAE1B,KAAI,CAAC,YAAY;AACf,UAAQ,KAAK,oBAAoB,OAAO,aAAa;AACrD,SAAO;;AAGT,QAAO,YAAY;EACjB;EACA;EACD,CAAC;AAEF,QACE,oBAAC;EAAK,OAAO,OAAO;YAClB,oBAAC;GACC,KAAK;GACL,OAAO,sBAAsB;GAC7B,QAAQ,sBAAsB;IAC9B;GACG;EAET;AAEF,MAAM,oBAAoB,KAAK,SAASC,oBAAkB,EACxD,MACA,OAAO,cAAc,MACrB,QAAQ,cAAc,OACtB,UAAU,cAAc,SAExB,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,aAAa,KAEb,cACA,YACA,YACA,eACA,mBACA,iBACA,SAEA,aACA,WACA,WACA,cACA,kBACA,gBACA,QAEA,qBACA,oBACA,OACA,KACA,GAAG,SAC6D;CAChE,MAAM,YAAY,cAAc;AAEhC,QAAO,YAAY;EACjB;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAS,SADG,GAAG,KAAK,GAAG,QAAQ,GAAG;AAsBxC,QACE,oBAAC;EACM;EACL,mBAAkB;EAClB,oBAAoB;EACpB,OAzBqC,cACjC;GACJ;IACE,YAAY;IACZ,WAAW;IACX,mBAAmB;IACpB;GACD,OAAO;GACP,sBAAsB,EAAE,OAAO,qBAAqB,GAAG;GACvD,qBACI;IACE,UAAU;IACV,YAAY;IACb,GACD;GACJ;GACD,EACD;GAAC;GAAqB;GAAoB;GAAO,OAAO;GAAW,CACpE;EAQG,GAAI;YAEH;GACI;EAET;;;;;;;;;;;;;;;;;;;;;;;AAwBF,MAAM,OAAO,KAAK,SAASC,OAAK,EAAE,SAAS,GAAG,SAAoB;AAEhE,KAAI,YAAY,aACd,QAAO,oBAAC,kBAAe,GAAI,QAAS;AAGtC,QAAO,oBAAC;EAA2B;EAAS,GAAI;GAAS;EACzD;AAEF,KAAK,cAAc;AAInB,MAAa,YAAY;AACzB,MAAa,sBAAsB"}

package/dist/components/IconButton.cjs

@@ -1,7 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_motion = require('../uds/dist/tokens/configs/motion.cjs');
-const require_motion$1 = require('../motion.cjs');
+const require_index = require('../motion-tokens/dist/index.cjs');
+const require_motion = require('../motion.cjs');
 const require_components_Icon = require('./Icon.cjs');
 const require_components_Pressable = require('./Pressable.cjs');
 let react = require("react");
@@ -48,10 +48,10 @@ const IconButton = (0, react.memo)(function IconButton$1({ name, variant = "prim
 	const backgroundColor = (0, react_native_unistyles_reanimated.useAnimatedVariantColor)(generated_styles.buttonStyles.root, "backgroundColor");
 	const borderColor = (0, react_native_unistyles_reanimated.useAnimatedVariantColor)(generated_styles.buttonStyles.root, "borderColor");
 	const animatedTheme = (0, react_native_unistyles_reanimated.useAnimatedTheme)();
-	const scale = (0, react_native_reanimated.useSharedValue)(require_motion.SCALE_EFFECTS.none);
+	const scale = (0, react_native_reanimated.useSharedValue)(require_index.SCALE_EFFECTS.none);
 	const handlePressIn = (0, react.useCallback)((event) => {
 		setPressed(true);
-		if (shouldAnimate) scale.value = (0, react_native_reanimated.withSpring)(require_motion.SCALE_EFFECTS.down, require_motion$1.BUTTON_SPRING_CONFIG);
+		if (shouldAnimate) scale.value = (0, react_native_reanimated.withSpring)(require_index.SCALE_EFFECTS.down, require_motion.BUTTON_SPRING_CONFIG);
 		onPressIn?.(event);
 	}, [
 		shouldAnimate,
@@ -60,7 +60,7 @@ const IconButton = (0, react.memo)(function IconButton$1({ name, variant = "prim
 	]);
 	const handlePressOut = (0, react.useCallback)((event) => {
 		setPressed(false);
-		if (shouldAnimate) scale.value = (0, react_native_reanimated.withSpring)(require_motion.SCALE_EFFECTS.none, require_motion$1.BUTTON_SPRING_CONFIG);
+		if (shouldAnimate) scale.value = (0, react_native_reanimated.withSpring)(require_index.SCALE_EFFECTS.none, require_motion.BUTTON_SPRING_CONFIG);
 		onPressOut?.(event);
 	}, [
 		shouldAnimate,

package/dist/components/IconButton.d.cts

@@ -1,9 +1,8 @@
 
-import { IconVariant } from "../icons/dist/types.cjs";
-import { ButtonVariantFlat, IconButtonSize } from "../uds/dist/tokens/types.cjs";
+import { ButtonVariantFlat, IconButtonSize, IconVariant } from "../types/dist/index.cjs";
 import { IconName } from "./Icon.cjs";
 import { PressableProps as PressableProps$1 } from "./Pressable.cjs";
-import * as react0 from "react";
+import * as react8 from "react";
 import { Ref } from "react";
 import { View } from "react-native";
 
@@ -40,7 +39,7 @@ interface IconButtonProps extends Omit<PressableProps$1, 'children'> {
  * <IconButton name="Settings" loading />
  * ```
  */
-declare const IconButton: react0.NamedExoticComponent<IconButtonProps>;
+declare const IconButton: react8.NamedExoticComponent<IconButtonProps>;
 //#endregion
 export { IconButton, type IconButtonProps };
 //# sourceMappingURL=IconButton.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.cts","names":[],"sources":["../../src/components/IconButton.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;UA6CU,eAAA,SAAwB,KAAK;;QAE/B;;EAFE,OAAA,CAAA,EAIE,iBAJc;EAAa;EAE/B,IAAA,CAAA,EAIC,cAJD;EAEI;EAEH,WAAA,CAAA,EAEO,WAFP;EAEO,OAAA,CAAA,EAAA,OAAA;EAOJ;;;;EAsBN,cA0HJ,CAAA,EAAA,OA1Hc;QAtBR,IAAI;;;;;;;;;;;;;;;;;cAsBN,YAAU,MAAA,CAAA,qBAAA"}
+{"version":3,"file":"IconButton.d.cts","names":[],"sources":["../../src/components/IconButton.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;UA6CU,eAAA,SAAwB,KAAK;;QAE/B;EAFE;EAA6B,OAAA,CAAA,EAI3B,iBAJ2B;EAE/B;EAEI,IAAA,CAAA,EAEH,cAFG;EAEH;EAEO,WAAA,CAAA,EAAA,WAAA;EAOJ,OAAA,CAAA,EAAA,OAAA;EAAJ;;;AAf8B;;QAe9B,IAAI;;;;;;;;;;;;;;;;;cAsBN,YAAU,MAAA,CAAA,qBAAA"}

package/dist/components/IconButton.d.mts

@@ -1,9 +1,8 @@
 
-import { IconVariant } from "../icons/dist/types.mjs";
-import { ButtonVariantFlat, IconButtonSize } from "../uds/dist/tokens/types.mjs";
+import { ButtonVariantFlat, IconButtonSize, IconVariant } from "../types/dist/index.mjs";
 import { IconName } from "./Icon.mjs";
 import { PressableProps as PressableProps$1 } from "./Pressable.mjs";
-import * as react17 from "react";
+import * as react7 from "react";
 import { Ref } from "react";
 import { View } from "react-native";
 
@@ -40,7 +39,7 @@ interface IconButtonProps extends Omit<PressableProps$1, 'children'> {
  * <IconButton name="Settings" loading />
  * ```
  */
-declare const IconButton: react17.NamedExoticComponent<IconButtonProps>;
+declare const IconButton: react7.NamedExoticComponent<IconButtonProps>;
 //#endregion
 export { IconButton, type IconButtonProps };
 //# sourceMappingURL=IconButton.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.mts","names":[],"sources":["../../src/components/IconButton.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;UA6CU,eAAA,SAAwB,KAAK;;QAE/B;;EAFE,OAAA,CAAA,EAIE,iBAJc;EAAa;EAE/B,IAAA,CAAA,EAIC,cAJD;EAEI;EAEH,WAAA,CAAA,EAEO,WAFP;EAEO,OAAA,CAAA,EAAA,OAAA;EAOJ;;;;EAsBN,cA0HJ,CAAA,EAAA,OAAA;QAhJM,IAAI;;;;;;;;;;;;;;;;;cAsBN,YAAU,OAAA,CAAA,qBAAA"}
+{"version":3,"file":"IconButton.d.mts","names":[],"sources":["../../src/components/IconButton.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;UA6CU,eAAA,SAAwB,KAAK;;QAE/B;EAFE;EAA6B,OAAA,CAAA,EAI3B,iBAJ2B;EAE/B;EAEI,IAAA,CAAA,EAEH,cAFG;EAEH;EAEO,WAAA,CAAA,EAAA,WAAA;EAOJ,OAAA,CAAA,EAAA,OAAA;EAAJ;;;AAf8B;;QAe9B,IAAI;;;;;;;;;;;;;;;;;cAsBN,YAAU,MAAA,CAAA,qBAAA"}

package/dist/components/IconButton.mjs

@@ -1,5 +1,5 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-import { SCALE_EFFECTS } from "../uds/dist/tokens/configs/motion.mjs";
+import { SCALE_EFFECTS } from "../motion-tokens/dist/index.mjs";
 import { BUTTON_SPRING_CONFIG } from "../motion.mjs";
 import { Icon } from "./Icon.mjs";
 import { AnimatedPressable } from "./Pressable.mjs";

package/dist/components/IconButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.mjs","names":["IconButton","foundationStyles"],"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonVariantFlat, IconButtonSize, IconVariant } from '@yahoo/uds/tokens';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useMemo, useState } from 'react';\nimport type { View } from 'react-native';\nimport { ActivityIndicator } from 'react-native';\nimport {\n  Easing,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\nimport { useAnimatedTheme, useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport { buttonStyles, iconButtonStyles, styles as foundationStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport type { IconName } from './Icon';\nimport { Icon } from './Icon';\nimport type { PressableProps } from './Pressable';\nimport { AnimatedPressable } from './Pressable';\n\n/* -------------------------------------------------------------------------- */\n/*                              Animation Helpers                              */\n/* -------------------------------------------------------------------------- */\n\nfunction interpolateShadowAlpha(shadow: string, alpha: number): string {\n  'worklet';\n  if (!shadow || alpha >= 1) {\n    return shadow;\n  }\n  if (alpha <= 0) {\n    return '';\n  }\n\n  return shadow.replace(/rgba\\(([^,]+),\\s*([^,]+),\\s*([^,]+),\\s*([^)]+)\\)/g, (_, r, g, b, a) => {\n    const newAlpha = parseFloat(a) * alpha;\n    return `rgba(${r}, ${g}, ${b}, ${newAlpha.toFixed(3)})`;\n  });\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            IconButton Props                                 */\n/* -------------------------------------------------------------------------- */\n\ninterface IconButtonProps extends Omit<PressableProps, 'children'> {\n  /** Icon to render from the icons package. */\n  name: IconName;\n  /** @default 'primary' */\n  variant?: ButtonVariantFlat;\n  /** @default 'md' */\n  size?: IconButtonSize;\n  /** @default 'outline' */\n  iconVariant?: IconVariant;\n  loading?: boolean;\n  /**\n   * Disable motion effects (scale on press, icon animations)\n   * @default false\n   */\n  disableEffects?: boolean;\n  ref?: Ref<View>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            IconButton Component                             */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **An icon button element that can be used to trigger an action**\n *\n * Features animated scale effect on press and smooth color transitions\n * matching the web UDS IconButton behavior.\n *\n * @example\n * ```tsx\n * import { IconButton } from '@yahoo/uds-mobile';\n *\n * <IconButton name=\"Add\" onPress={() => console.log('pressed')} />\n * <IconButton name=\"Close\" variant=\"secondary\" size=\"sm\" />\n * <IconButton name=\"Settings\" loading />\n * ```\n */\nconst IconButton = memo(function IconButton({\n  name,\n  variant = 'primary',\n  size = 'md',\n  iconVariant = 'outline',\n  loading,\n  disabled,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  disableEffects = false,\n  onPressIn,\n  onPressOut,\n  ref,\n  ...props\n}: IconButtonProps) {\n  const isDisabled = disabled || loading;\n  const shouldAnimate = !disableEffects && !isDisabled;\n\n  /* --------------------------------- State ---------------------------------- */\n  const [pressed, setPressed] = useState(false);\n\n  // Apply layer-based styles with compound variant support\n  iconButtonStyles.useVariants({ size });\n  buttonStyles.useVariants({ variant, disabled: isDisabled, pressed });\n\n  // Animate colors using Unistyles' useAnimatedVariantColor\n  const backgroundColor = useAnimatedVariantColor(buttonStyles.root, 'backgroundColor');\n  const borderColor = useAnimatedVariantColor(buttonStyles.root, 'borderColor');\n\n  // Get animated theme for boxShadow\n  const animatedTheme = useAnimatedTheme();\n\n  /* ------------------------------- Animation -------------------------------- */\n  const scale = useSharedValue<number>(SCALE_EFFECTS.none);\n\n  const handlePressIn = useCallback<NonNullable<PressableProps['onPressIn']>>(\n    (event) => {\n      setPressed(true);\n      if (shouldAnimate) {\n        scale.value = withSpring(SCALE_EFFECTS.down, BUTTON_SPRING_CONFIG);\n      }\n      onPressIn?.(event);\n    },\n    [shouldAnimate, scale, onPressIn],\n  );\n\n  const handlePressOut = useCallback<NonNullable<PressableProps['onPressOut']>>(\n    (event) => {\n      setPressed(false);\n      if (shouldAnimate) {\n        scale.value = withSpring(SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG);\n      }\n      onPressOut?.(event);\n    },\n    [shouldAnimate, scale, onPressOut],\n  );\n\n  const a11yState = useMemo(() => ({ disabled: isDisabled, busy: loading }), [isDisabled, loading]);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Animate pressed state for shadow\n  const pressProgress = useDerivedValue(\n    () => withTiming(pressed ? 1 : 0, { duration: 220, easing: Easing.bezier(0, 0, 0.2, 1) }),\n    [pressed],\n  );\n\n  // Animate using Unistyles' variant color system + boxShadow from theme\n  const animatedRootStyle = useAnimatedStyle(() => {\n    // Get boxShadow from theme using flattened path (no camelCase conversion needed!)\n    const components = animatedTheme.value.components as unknown as Record<\n      string,\n      Record<string, unknown>\n    >;\n    const shadowPressed =\n      (components[`button/variant/${variant}/root/pressed`]?.boxShadow as string) ?? '';\n\n    return {\n      transform: [{ scale: scale.value }],\n      backgroundColor: withTiming(backgroundColor.value, {\n        duration: 220,\n        easing: Easing.bezier(0, 0, 0.2, 1),\n      }),\n      borderColor: withTiming(borderColor.value, {\n        duration: 220,\n        easing: Easing.bezier(0, 0, 0.2, 1),\n      }),\n      boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value),\n    };\n  });\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <AnimatedPressable\n      ref={ref}\n      disabled={isDisabled}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      overflow=\"hidden\"\n      accessibilityLabel={loading ? `${accessibilityLabel ?? ''}, loading` : accessibilityLabel}\n      accessibilityHint={accessibilityHint}\n      accessibilityRole=\"button\"\n      accessibilityState={a11yState}\n      style={[\n        iconButtonStyles.root,\n        buttonStyles.root,\n        foundationStyles.foundation,\n        animatedRootStyle,\n        typeof style === 'function' ? style({ pressed }) : style,\n      ]}\n      {...props}\n    >\n      {loading ? (\n        <ActivityIndicator size={buttonStyles.icon.fontSize} color={buttonStyles.icon.color} />\n      ) : (\n        <Icon name={name} variant={iconVariant} style={buttonStyles.icon} />\n      )}\n    </AnimatedPressable>\n  );\n});\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton, type IconButtonProps };\n"],"mappings":";;;;;;;;;;;;;AA0BA,SAAS,uBAAuB,QAAgB,OAAuB;AACrE;AACA,KAAI,CAAC,UAAU,SAAS,EACtB,QAAO;AAET,KAAI,SAAS,EACX,QAAO;AAGT,QAAO,OAAO,QAAQ,sDAAsD,GAAG,GAAG,GAAG,GAAG,MAAM;AAE5F,SAAO,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KADZ,WAAW,EAAE,GAAG,OACS,QAAQ,EAAE,CAAC;GACrD;;;;;;;;;;;;;;;;;AA4CJ,MAAM,aAAa,KAAK,SAASA,aAAW,EAC1C,MACA,UAAU,WACV,OAAO,MACP,cAAc,WACd,SACA,UACA,OACA,oBACA,mBACA,iBAAiB,OACjB,WACA,YACA,KACA,GAAG,SACe;CAClB,MAAM,aAAa,YAAY;CAC/B,MAAM,gBAAgB,CAAC,kBAAkB,CAAC;CAG1C,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAG7C,kBAAiB,YAAY,EAAE,MAAM,CAAC;AACtC,cAAa,YAAY;EAAE;EAAS,UAAU;EAAY;EAAS,CAAC;CAGpE,MAAM,kBAAkB,wBAAwB,aAAa,MAAM,kBAAkB;CACrF,MAAM,cAAc,wBAAwB,aAAa,MAAM,cAAc;CAG7E,MAAM,gBAAgB,kBAAkB;CAGxC,MAAM,QAAQ,eAAuB,cAAc,KAAK;CAExD,MAAM,gBAAgB,aACnB,UAAU;AACT,aAAW,KAAK;AAChB,MAAI,cACF,OAAM,QAAQ,WAAW,cAAc,MAAM,qBAAqB;AAEpE,cAAY,MAAM;IAEpB;EAAC;EAAe;EAAO;EAAU,CAClC;CAED,MAAM,iBAAiB,aACpB,UAAU;AACT,aAAW,MAAM;AACjB,MAAI,cACF,OAAM,QAAQ,WAAW,cAAc,MAAM,qBAAqB;AAEpE,eAAa,MAAM;IAErB;EAAC;EAAe;EAAO;EAAW,CACnC;CAED,MAAM,YAAY,eAAe;EAAE,UAAU;EAAY,MAAM;EAAS,GAAG,CAAC,YAAY,QAAQ,CAAC;CAIjG,MAAM,gBAAgB,sBACd,WAAW,UAAU,IAAI,GAAG;EAAE,UAAU;EAAK,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;EAAE,CAAC,EACzF,CAAC,QAAQ,CACV;CAGD,MAAM,oBAAoB,uBAAuB;EAM/C,MAAM,gBAJa,cAAc,MAAM,WAKzB,kBAAkB,QAAQ,iBAAiB,aAAwB;AAEjF,SAAO;GACL,WAAW,CAAC,EAAE,OAAO,MAAM,OAAO,CAAC;GACnC,iBAAiB,WAAW,gBAAgB,OAAO;IACjD,UAAU;IACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;IACpC,CAAC;GACF,aAAa,WAAW,YAAY,OAAO;IACzC,UAAU;IACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;IACpC,CAAC;GACF,WAAW,uBAAuB,eAAe,cAAc,MAAM;GACtE;GACD;AAGF,QACE,oBAAC;EACM;EACL,UAAU;EACV,WAAW;EACX,YAAY;EACZ,eAAc;EACd,YAAW;EACX,gBAAe;EACf,UAAS;EACT,oBAAoB,UAAU,GAAG,sBAAsB,GAAG,aAAa;EACpD;EACnB,mBAAkB;EAClB,oBAAoB;EACpB,OAAO;GACL,iBAAiB;GACjB,aAAa;GACbC,OAAiB;GACjB;GACA,OAAO,UAAU,aAAa,MAAM,EAAE,SAAS,CAAC,GAAG;GACpD;EACD,GAAI;YAEH,UACC,oBAAC;GAAkB,MAAM,aAAa,KAAK;GAAU,OAAO,aAAa,KAAK;IAAS,GAEvF,oBAAC;GAAW;GAAM,SAAS;GAAa,OAAO,aAAa;IAAQ;GAEpD;EAEtB;AAEF,WAAW,cAAc"}
+{"version":3,"file":"IconButton.mjs","names":["IconButton","foundationStyles"],"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonVariantFlat, IconButtonSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useMemo, useState } from 'react';\nimport type { View } from 'react-native';\nimport { ActivityIndicator } from 'react-native';\nimport {\n  Easing,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\nimport { useAnimatedTheme, useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport { buttonStyles, iconButtonStyles, styles as foundationStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport type { IconName } from './Icon';\nimport { Icon } from './Icon';\nimport type { PressableProps } from './Pressable';\nimport { AnimatedPressable } from './Pressable';\n\n/* -------------------------------------------------------------------------- */\n/*                              Animation Helpers                              */\n/* -------------------------------------------------------------------------- */\n\nfunction interpolateShadowAlpha(shadow: string, alpha: number): string {\n  'worklet';\n  if (!shadow || alpha >= 1) {\n    return shadow;\n  }\n  if (alpha <= 0) {\n    return '';\n  }\n\n  return shadow.replace(/rgba\\(([^,]+),\\s*([^,]+),\\s*([^,]+),\\s*([^)]+)\\)/g, (_, r, g, b, a) => {\n    const newAlpha = parseFloat(a) * alpha;\n    return `rgba(${r}, ${g}, ${b}, ${newAlpha.toFixed(3)})`;\n  });\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            IconButton Props                                 */\n/* -------------------------------------------------------------------------- */\n\ninterface IconButtonProps extends Omit<PressableProps, 'children'> {\n  /** Icon to render from the icons package. */\n  name: IconName;\n  /** @default 'primary' */\n  variant?: ButtonVariantFlat;\n  /** @default 'md' */\n  size?: IconButtonSize;\n  /** @default 'outline' */\n  iconVariant?: IconVariant;\n  loading?: boolean;\n  /**\n   * Disable motion effects (scale on press, icon animations)\n   * @default false\n   */\n  disableEffects?: boolean;\n  ref?: Ref<View>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            IconButton Component                             */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **An icon button element that can be used to trigger an action**\n *\n * Features animated scale effect on press and smooth color transitions\n * matching the web UDS IconButton behavior.\n *\n * @example\n * ```tsx\n * import { IconButton } from '@yahoo/uds-mobile';\n *\n * <IconButton name=\"Add\" onPress={() => console.log('pressed')} />\n * <IconButton name=\"Close\" variant=\"secondary\" size=\"sm\" />\n * <IconButton name=\"Settings\" loading />\n * ```\n */\nconst IconButton = memo(function IconButton({\n  name,\n  variant = 'primary',\n  size = 'md',\n  iconVariant = 'outline',\n  loading,\n  disabled,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  disableEffects = false,\n  onPressIn,\n  onPressOut,\n  ref,\n  ...props\n}: IconButtonProps) {\n  const isDisabled = disabled || loading;\n  const shouldAnimate = !disableEffects && !isDisabled;\n\n  /* --------------------------------- State ---------------------------------- */\n  const [pressed, setPressed] = useState(false);\n\n  // Apply layer-based styles with compound variant support\n  iconButtonStyles.useVariants({ size });\n  buttonStyles.useVariants({ variant, disabled: isDisabled, pressed });\n\n  // Animate colors using Unistyles' useAnimatedVariantColor\n  const backgroundColor = useAnimatedVariantColor(buttonStyles.root, 'backgroundColor');\n  const borderColor = useAnimatedVariantColor(buttonStyles.root, 'borderColor');\n\n  // Get animated theme for boxShadow\n  const animatedTheme = useAnimatedTheme();\n\n  /* ------------------------------- Animation -------------------------------- */\n  const scale = useSharedValue<number>(SCALE_EFFECTS.none);\n\n  const handlePressIn = useCallback<NonNullable<PressableProps['onPressIn']>>(\n    (event) => {\n      setPressed(true);\n      if (shouldAnimate) {\n        scale.value = withSpring(SCALE_EFFECTS.down, BUTTON_SPRING_CONFIG);\n      }\n      onPressIn?.(event);\n    },\n    [shouldAnimate, scale, onPressIn],\n  );\n\n  const handlePressOut = useCallback<NonNullable<PressableProps['onPressOut']>>(\n    (event) => {\n      setPressed(false);\n      if (shouldAnimate) {\n        scale.value = withSpring(SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG);\n      }\n      onPressOut?.(event);\n    },\n    [shouldAnimate, scale, onPressOut],\n  );\n\n  const a11yState = useMemo(() => ({ disabled: isDisabled, busy: loading }), [isDisabled, loading]);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Animate pressed state for shadow\n  const pressProgress = useDerivedValue(\n    () => withTiming(pressed ? 1 : 0, { duration: 220, easing: Easing.bezier(0, 0, 0.2, 1) }),\n    [pressed],\n  );\n\n  // Animate using Unistyles' variant color system + boxShadow from theme\n  const animatedRootStyle = useAnimatedStyle(() => {\n    // Get boxShadow from theme using flattened path (no camelCase conversion needed!)\n    const components = animatedTheme.value.components as unknown as Record<\n      string,\n      Record<string, unknown>\n    >;\n    const shadowPressed =\n      (components[`button/variant/${variant}/root/pressed`]?.boxShadow as string) ?? '';\n\n    return {\n      transform: [{ scale: scale.value }],\n      backgroundColor: withTiming(backgroundColor.value, {\n        duration: 220,\n        easing: Easing.bezier(0, 0, 0.2, 1),\n      }),\n      borderColor: withTiming(borderColor.value, {\n        duration: 220,\n        easing: Easing.bezier(0, 0, 0.2, 1),\n      }),\n      boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value),\n    };\n  });\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <AnimatedPressable\n      ref={ref}\n      disabled={isDisabled}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      overflow=\"hidden\"\n      accessibilityLabel={loading ? `${accessibilityLabel ?? ''}, loading` : accessibilityLabel}\n      accessibilityHint={accessibilityHint}\n      accessibilityRole=\"button\"\n      accessibilityState={a11yState}\n      style={[\n        iconButtonStyles.root,\n        buttonStyles.root,\n        foundationStyles.foundation,\n        animatedRootStyle,\n        typeof style === 'function' ? style({ pressed }) : style,\n      ]}\n      {...props}\n    >\n      {loading ? (\n        <ActivityIndicator size={buttonStyles.icon.fontSize} color={buttonStyles.icon.color} />\n      ) : (\n        <Icon name={name} variant={iconVariant} style={buttonStyles.icon} />\n      )}\n    </AnimatedPressable>\n  );\n});\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton, type IconButtonProps };\n"],"mappings":";;;;;;;;;;;;;AA0BA,SAAS,uBAAuB,QAAgB,OAAuB;AACrE;AACA,KAAI,CAAC,UAAU,SAAS,EACtB,QAAO;AAET,KAAI,SAAS,EACX,QAAO;AAGT,QAAO,OAAO,QAAQ,sDAAsD,GAAG,GAAG,GAAG,GAAG,MAAM;AAE5F,SAAO,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KADZ,WAAW,EAAE,GAAG,OACS,QAAQ,EAAE,CAAC;GACrD;;;;;;;;;;;;;;;;;AA4CJ,MAAM,aAAa,KAAK,SAASA,aAAW,EAC1C,MACA,UAAU,WACV,OAAO,MACP,cAAc,WACd,SACA,UACA,OACA,oBACA,mBACA,iBAAiB,OACjB,WACA,YACA,KACA,GAAG,SACe;CAClB,MAAM,aAAa,YAAY;CAC/B,MAAM,gBAAgB,CAAC,kBAAkB,CAAC;CAG1C,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAG7C,kBAAiB,YAAY,EAAE,MAAM,CAAC;AACtC,cAAa,YAAY;EAAE;EAAS,UAAU;EAAY;EAAS,CAAC;CAGpE,MAAM,kBAAkB,wBAAwB,aAAa,MAAM,kBAAkB;CACrF,MAAM,cAAc,wBAAwB,aAAa,MAAM,cAAc;CAG7E,MAAM,gBAAgB,kBAAkB;CAGxC,MAAM,QAAQ,eAAuB,cAAc,KAAK;CAExD,MAAM,gBAAgB,aACnB,UAAU;AACT,aAAW,KAAK;AAChB,MAAI,cACF,OAAM,QAAQ,WAAW,cAAc,MAAM,qBAAqB;AAEpE,cAAY,MAAM;IAEpB;EAAC;EAAe;EAAO;EAAU,CAClC;CAED,MAAM,iBAAiB,aACpB,UAAU;AACT,aAAW,MAAM;AACjB,MAAI,cACF,OAAM,QAAQ,WAAW,cAAc,MAAM,qBAAqB;AAEpE,eAAa,MAAM;IAErB;EAAC;EAAe;EAAO;EAAW,CACnC;CAED,MAAM,YAAY,eAAe;EAAE,UAAU;EAAY,MAAM;EAAS,GAAG,CAAC,YAAY,QAAQ,CAAC;CAIjG,MAAM,gBAAgB,sBACd,WAAW,UAAU,IAAI,GAAG;EAAE,UAAU;EAAK,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;EAAE,CAAC,EACzF,CAAC,QAAQ,CACV;CAGD,MAAM,oBAAoB,uBAAuB;EAM/C,MAAM,gBAJa,cAAc,MAAM,WAKzB,kBAAkB,QAAQ,iBAAiB,aAAwB;AAEjF,SAAO;GACL,WAAW,CAAC,EAAE,OAAO,MAAM,OAAO,CAAC;GACnC,iBAAiB,WAAW,gBAAgB,OAAO;IACjD,UAAU;IACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;IACpC,CAAC;GACF,aAAa,WAAW,YAAY,OAAO;IACzC,UAAU;IACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;IACpC,CAAC;GACF,WAAW,uBAAuB,eAAe,cAAc,MAAM;GACtE;GACD;AAGF,QACE,oBAAC;EACM;EACL,UAAU;EACV,WAAW;EACX,YAAY;EACZ,eAAc;EACd,YAAW;EACX,gBAAe;EACf,UAAS;EACT,oBAAoB,UAAU,GAAG,sBAAsB,GAAG,aAAa;EACpD;EACnB,mBAAkB;EAClB,oBAAoB;EACpB,OAAO;GACL,iBAAiB;GACjB,aAAa;GACbC,OAAiB;GACjB;GACA,OAAO,UAAU,aAAa,MAAM,EAAE,SAAS,CAAC,GAAG;GACpD;EACD,GAAI;YAEH,UACC,oBAAC;GAAkB,MAAM,aAAa,KAAK;GAAU,OAAO,aAAa,KAAK;IAAS,GAEvF,oBAAC;GAAW;GAAM,SAAS;GAAa,OAAO,aAAa;IAAQ;GAEpD;EAEtB;AAEF,WAAW,cAAc"}

package/dist/components/IconSlot.d.cts

@@ -1,6 +1,6 @@
 
 import { IconName, IconProps } from "./Icon.cjs";
-import * as react5 from "react";
+import * as react9 from "react";
 import { ReactElement, Ref } from "react";
 import { Text } from "react-native";
 
@@ -39,7 +39,7 @@ interface IconSlotProps extends IconPropsWithoutName {
  * - Pass Icon component for custom props
  * - Pass function for dynamic rendering
  */
-declare const IconSlot: react5.NamedExoticComponent<IconSlotProps>;
+declare const IconSlot: react9.NamedExoticComponent<IconSlotProps>;
 //#endregion
 export { IconSlot, type IconSlotProps, type IconSlotType };
 //# sourceMappingURL=IconSlot.d.cts.map

package/dist/components/IconSlot.d.mts

@@ -1,6 +1,6 @@
 
 import { IconName, IconProps } from "./Icon.mjs";
-import * as react16 from "react";
+import * as react8 from "react";
 import { ReactElement, Ref } from "react";
 import { Text } from "react-native";
 
@@ -39,7 +39,7 @@ interface IconSlotProps extends IconPropsWithoutName {
  * - Pass Icon component for custom props
  * - Pass function for dynamic rendering
  */
-declare const IconSlot: react16.NamedExoticComponent<IconSlotProps>;
+declare const IconSlot: react8.NamedExoticComponent<IconSlotProps>;
 //#endregion
 export { IconSlot, type IconSlotProps, type IconSlotType };
 //# sourceMappingURL=IconSlot.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconSlot.d.mts","names":[],"sources":["../../src/components/IconSlot.tsx"],"sourcesContent":[],"mappings":";;;;;;;KAOK,oBAAA,GAAuB,KAAK;KAE5B,YAAA,GACD,WACA,aAAa,0BACA,yBAAyB,aAAa;UAE7C,aAAA,SAAsB;EAP3B,GAAA,CAAA,EAQG,GARH,CAQO,IARP,CAAA;EAEA;EACD,IAAA,CAAA,EAOK,YAPL;;;;;;;AAEkD;;;;;;AAEF;;;;;;;;;;;;;;;;cAkC9C,UAAQ,OAAA,CAAA,qBAAA"}
+{"version":3,"file":"IconSlot.d.mts","names":[],"sources":["../../src/components/IconSlot.tsx"],"sourcesContent":[],"mappings":";;;;;;;KAOK,oBAAA,GAAuB,KAAK;KAE5B,YAAA,GACD,WACA,aAAa,0BACA,yBAAyB,aAAa;UAE7C,aAAA,SAAsB;EAP3B,GAAA,CAAA,EAQG,GARH,CAQO,IARP,CAAA;EAEA;EACD,IAAA,CAAA,EAOK,YAPL;;;;;;;AAEkD;;;;;;AAEF;;;;;;;;;;;;;;;;cAkC9C,UAAQ,MAAA,CAAA,qBAAA"}