npm - @yahoo/uds-mobile - Versions diffs - 1.1.0-beta.1 → 1.1.0 - Mend

@yahoo/uds-mobile 1.1.0-beta.1 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (241) hide show

package/dist/components/Button.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.mjs","names":["Button","Text"],"sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonSize, ButtonVariantFlat, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useMemo, useState } from 'react';\nimport type { View } from 'react-native';\nimport { ActivityIndicator } from 'react-native';\nimport Animated, {\n Easing,\n interpolate,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withSpring,\n withTiming,\n} from 'react-native-reanimated';\nimport { useAnimatedTheme } from 'react-native-unistyles/reanimated';\n\nimport { buttonStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport type { PressableProps } from './Pressable';\nimport { AnimatedPressable } from './Pressable';\nimport { Text } from './Text';\n\n/* -------------------------------------------------------------------------- /\n/ Animation Helpers /\n/ -------------------------------------------------------------------------- /\n\n/\n Interpolates a boxShadow string by scaling the alpha of all colors.\n * This allows smooth fade-in/out of shadows.\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/ Animated Icon Slot /\n/ -------------------------------------------------------------------------- /\n\n/\n Animated wrapper for icon/loading content.\n * Matches web Button icon animation: scale 0.7→1, opacity 0→1, width 0→auto\n * Uses staggered animation: opacity waits until halfway through width animation.\n /\nfunction AnimatedIconSlot({\n children,\n visible,\n iconSize,\n gap,\n}: {\n children: React.ReactNode;\n visible: boolean;\n iconSize: number;\n gap: number;\n}) {\n // Use useDerivedValue instead of useEffect + useSharedValue\n // This is the idiomatic Reanimated pattern for deriving animated values from React state\n const progress = useDerivedValue(\n () => withSpring(visible ? 1 : 0, BUTTON_SPRING_CONFIG),\n [visible],\n );\n\n const animatedStyle = useAnimatedStyle(() => {\n // Total width includes icon + gap when visible\n const totalWidth = iconSize + gap;\n const width = interpolate(progress.value, [0, 1], [0, totalWidth]);\n\n // Staggered animation: opacity starts at 50% of width animation\n // On enter: width expands first, then icon fades in\n // On exit: icon fades out first, then width collapses\n const opacity = interpolate(progress.value, [0.5, 1], [0, 1], 'clamp');\n const scale = interpolate(progress.value, [0.5, 1], [0.7, 1], 'clamp');\n\n return {\n width,\n opacity,\n transform: [{ scale }],\n overflow: 'hidden' as const,\n };\n });\n\n return <Animated.View style={animatedStyle}>{children}</Animated.View>;\n}\n\n// function LoadingIcon({ size, variant }: { size: ButtonSize, variant: ButtonVariantFlat }) {\n// const { theme } = useUnistyles();\n// const themeKey = `buttonVariant${variantToCapitalMap[variant]}IconRest` as const;\n// const iconSize = theme.components.buttonSizeLgIconRest.fontSize;\n// return <ActivityIndicator size={iconSize} color={theme.colors.text.primary} />;\n// }\n\n/ -------------------------------------------------------------------------- /\n/ Button Props /\n/ -------------------------------------------------------------------------- /\n\ninterface ButtonProps extends Omit<PressableProps, 'children' \| 'disabled'> {\n /* @default 'primary' /\n variant?: ButtonVariantFlat;\n /* @default 'md' /\n size?: ButtonSize;\n /* @default 'outline' /\n iconVariant?: IconVariant;\n startIcon?: IconSlotType;\n endIcon?: IconSlotType;\n loading?: boolean;\n disabled?: boolean;\n children?: React.ReactNode;\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/ Button Component /\n/ -------------------------------------------------------------------------- /\n\n/\n 🖲️ A button element that can be used to trigger an action\n \n @description\n * A button is a fundamental component used to trigger an action or event.\n * Buttons are interactive elements that users can click, tap, or otherwise\n * engage with to submit forms, open dialogues, or perform any other interaction.\n \n Features animated scale effect on press and smooth icon transitions matching\n * the web UDS Button behavior.\n \n @example\n * ```tsx\n * import { Button } from '@yahoo/uds-mobile';\n \n <Button onPress={() => console.log('pressed')}>Save</Button>\n * <Button variant=\"secondary\">Cancel</Button>\n * <Button startIcon=\"Add\" variant=\"brand\">Add Item</Button>\n * <Button loading>Saving...</Button>\n * ```\n \n @see The {@link https://uds.build/docs/components/button Button Docs} for more info\n /\nconst Button = memo(function Button({\n variant = 'primary',\n size = 'md',\n iconVariant = 'outline',\n startIcon,\n endIcon,\n loading,\n disabled,\n width: _width,\n children,\n style,\n accessibilityLabel,\n accessibilityHint,\n disableEffects = false,\n onPressIn,\n onPressOut,\n ref,\n ...props\n}: ButtonProps) {\n const shouldAnimate = !disableEffects;\n\n / --------------------------------- State ---------------------------------- /\n const [pressed, setPressed] = useState(false);\n\n buttonStyles.useVariants({ size, variant, disabled, pressed });\n\n // Get gap and icon size from current variant styles\n const buttonGap = buttonStyles.root.gap;\n const iconSize = buttonStyles.icon.fontSize;\n\n // Get animated theme for boxShadow (useAnimatedVariantColor doesn't support non-color props)\n const animatedTheme = useAnimatedTheme();\n\n / ------------------------------- Animation -------------------------------- /\n const scale = useSharedValue<number>(SCALE_EFFECTS.none);\n\n const handlePressIn = useCallback(\n (event: Parameters<NonNullable<PressableProps['onPressIn']>>[0]) => {\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(\n (event: Parameters<NonNullable<PressableProps['onPressOut']>>[0]) => {\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 / -------------------------------- Content --------------------------------- /\n const childrenNode =\n children &&\n (isValidElement(children) ? (\n children\n ) : (\n <Text numberOfLines={1} textAlign=\"center\" style={buttonStyles.text}>\n {children}\n </Text>\n ));\n\n const a11yState = useMemo(() => ({ disabled, busy: loading }), [disabled, loading]);\n\n / --------------------------------- Styles --------------------------------- /\n // Animate pressed state for shadow (0 = rest, 1 = pressed)\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 animatedStyles = useAnimatedStyle(() => {\n // Get boxShadow from theme using flattened path (no camelCase conversion needed!)\n const components = animatedTheme.value.components;\n const buttonVariantPath = `button/variant/${variant}/root/pressed` as const;\n const shadowPressed = components[buttonVariantPath].boxShadow;\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 // Animate shadow by interpolating its color alpha\n boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value),\n };\n });\n\n // Determine what should be visible in start slot\n const showLoading = !!loading;\n const showStartIcon = !!startIcon && !loading;\n const showEndIcon = !!endIcon && !loading;\n\n // Start slot: either loading spinner or start icon\n const startContent = (\n <AnimatedIconSlot visible={showLoading \|\| showStartIcon} iconSize={iconSize} gap={buttonGap}>\n {showLoading ? (\n <ActivityIndicator size={buttonStyles.icon.fontSize} color={buttonStyles.icon.color} />\n ) : (\n <IconSlot icon={startIcon} variant={iconVariant} style={buttonStyles.icon} />\n )}\n </AnimatedIconSlot>\n );\n\n // End slot: only end icon (no loading here)\n const endContent = (\n <AnimatedIconSlot visible={showEndIcon} iconSize={iconSize} gap={buttonGap}>\n <IconSlot icon={endIcon} variant={iconVariant} style={buttonStyles.icon} />\n </AnimatedIconSlot>\n );\n\n const rootStyles = useMemo(\n () => [\n buttonStyles.root,\n animatedStyles,\n typeof style === 'function' ? style({ pressed }) : style,\n ],\n [buttonStyles.root, animatedStyles, style, pressed],\n );\n\n / --------------------------------- Render --------------------------------- */\n return (\n <AnimatedPressable\n ref={ref}\n disabled={disabled}\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 alignContent=\"center\"\n style={rootStyles}\n {...props}\n >\n {startContent}\n {childrenNode}\n {endContent}\n </AnimatedPressable>\n );\n});\n\nButton.displayName = 'Button';\n\nexport { Button, type ButtonProps };\n"],"mappings":"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"}
1	+ {"version":3,"file":"Button.mjs","names":["Button","Text"],"sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonSize, ButtonVariantFlat, IconVariant } from '@yahoo/uds/tokens';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useMemo, useState } from 'react';\nimport type { View } from 'react-native';\nimport { ActivityIndicator } from 'react-native';\nimport Animated, {\n Easing,\n interpolate,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withSpring,\n withTiming,\n} from 'react-native-reanimated';\nimport { useAnimatedTheme } from 'react-native-unistyles/reanimated';\n\nimport { buttonStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport type { PressableProps } from './Pressable';\nimport { AnimatedPressable } from './Pressable';\nimport { Text } from './Text';\n\n/* -------------------------------------------------------------------------- /\n/ Animation Helpers /\n/ -------------------------------------------------------------------------- /\n\n/\n Interpolates a boxShadow string by scaling the alpha of all colors.\n * This allows smooth fade-in/out of shadows.\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/ Animated Icon Slot /\n/ -------------------------------------------------------------------------- /\n\n/\n Animated wrapper for icon/loading content.\n * Matches web Button icon animation: scale 0.7→1, opacity 0→1, width 0→auto\n * Uses staggered animation: opacity waits until halfway through width animation.\n /\nfunction AnimatedIconSlot({\n children,\n visible,\n iconSize,\n gap,\n}: {\n children: React.ReactNode;\n visible: boolean;\n iconSize: number;\n gap: number;\n}) {\n // Use useDerivedValue instead of useEffect + useSharedValue\n // This is the idiomatic Reanimated pattern for deriving animated values from React state\n const progress = useDerivedValue(\n () => withSpring(visible ? 1 : 0, BUTTON_SPRING_CONFIG),\n [visible],\n );\n\n const animatedStyle = useAnimatedStyle(() => {\n // Total width includes icon + gap when visible\n const totalWidth = iconSize + gap;\n const width = interpolate(progress.value, [0, 1], [0, totalWidth]);\n\n // Staggered animation: opacity starts at 50% of width animation\n // On enter: width expands first, then icon fades in\n // On exit: icon fades out first, then width collapses\n const opacity = interpolate(progress.value, [0.5, 1], [0, 1], 'clamp');\n const scale = interpolate(progress.value, [0.5, 1], [0.7, 1], 'clamp');\n\n return {\n width,\n opacity,\n transform: [{ scale }],\n overflow: 'hidden' as const,\n };\n });\n\n return <Animated.View style={animatedStyle}>{children}</Animated.View>;\n}\n\n// function LoadingIcon({ size, variant }: { size: ButtonSize, variant: ButtonVariantFlat }) {\n// const { theme } = useUnistyles();\n// const themeKey = `buttonVariant${variantToCapitalMap[variant]}IconRest` as const;\n// const iconSize = theme.components.buttonSizeLgIconRest.fontSize;\n// return <ActivityIndicator size={iconSize} color={theme.colors.text.primary} />;\n// }\n\n/ -------------------------------------------------------------------------- /\n/ Button Props /\n/ -------------------------------------------------------------------------- /\n\ninterface ButtonProps extends Omit<PressableProps, 'children' \| 'disabled'> {\n /* @default 'primary' /\n variant?: ButtonVariantFlat;\n /* @default 'md' /\n size?: ButtonSize;\n /* @default 'outline' /\n iconVariant?: IconVariant;\n startIcon?: IconSlotType;\n endIcon?: IconSlotType;\n loading?: boolean;\n disabled?: boolean;\n children?: React.ReactNode;\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/ Button Component /\n/ -------------------------------------------------------------------------- /\n\n/\n 🖲️ A button element that can be used to trigger an action\n \n @description\n * A button is a fundamental component used to trigger an action or event.\n * Buttons are interactive elements that users can click, tap, or otherwise\n * engage with to submit forms, open dialogues, or perform any other interaction.\n \n Features animated scale effect on press and smooth icon transitions matching\n * the web UDS Button behavior.\n \n @example\n * ```tsx\n * import { Button } from '@yahoo/uds-mobile';\n \n <Button onPress={() => console.log('pressed')}>Save</Button>\n * <Button variant=\"secondary\">Cancel</Button>\n * <Button startIcon=\"Add\" variant=\"brand\">Add Item</Button>\n * <Button loading>Saving...</Button>\n * ```\n \n @see The {@link https://uds.build/docs/components/button Button Docs} for more info\n /\nconst Button = memo(function Button({\n variant = 'primary',\n size = 'md',\n iconVariant = 'outline',\n startIcon,\n endIcon,\n loading,\n disabled,\n width: _width,\n children,\n style,\n accessibilityLabel,\n accessibilityHint,\n disableEffects = false,\n onPressIn,\n onPressOut,\n ref,\n ...props\n}: ButtonProps) {\n const shouldAnimate = !disableEffects;\n\n / --------------------------------- State ---------------------------------- /\n const [pressed, setPressed] = useState(false);\n\n buttonStyles.useVariants({ size, variant, disabled, pressed });\n\n // Get gap and icon size from current variant styles\n const buttonGap = buttonStyles.root.gap;\n const iconSize = buttonStyles.icon.fontSize;\n\n // Get animated theme for boxShadow (useAnimatedVariantColor doesn't support non-color props)\n const animatedTheme = useAnimatedTheme();\n\n / ------------------------------- Animation -------------------------------- /\n const scale = useSharedValue<number>(SCALE_EFFECTS.none);\n\n const handlePressIn = useCallback(\n (event: Parameters<NonNullable<PressableProps['onPressIn']>>[0]) => {\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(\n (event: Parameters<NonNullable<PressableProps['onPressOut']>>[0]) => {\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 / -------------------------------- Content --------------------------------- /\n const childrenNode =\n children &&\n (isValidElement(children) ? (\n children\n ) : (\n <Text numberOfLines={1} textAlign=\"center\" style={buttonStyles.text}>\n {children}\n </Text>\n ));\n\n const a11yState = useMemo(() => ({ disabled, busy: loading }), [disabled, loading]);\n\n / --------------------------------- Styles --------------------------------- /\n // Animate pressed state for shadow (0 = rest, 1 = pressed)\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 animatedStyles = useAnimatedStyle(() => {\n // Get boxShadow from theme using flattened path (no camelCase conversion needed!)\n const components = animatedTheme.value.components;\n const buttonVariantPath = `button/variant/${variant}/root/pressed` as const;\n const shadowPressed = components[buttonVariantPath].boxShadow;\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 // Animate shadow by interpolating its color alpha\n boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value),\n };\n });\n\n // Determine what should be visible in start slot\n const showLoading = !!loading;\n const showStartIcon = !!startIcon && !loading;\n const showEndIcon = !!endIcon && !loading;\n\n // Start slot: either loading spinner or start icon\n const startContent = (\n <AnimatedIconSlot visible={showLoading \|\| showStartIcon} iconSize={iconSize} gap={buttonGap}>\n {showLoading ? (\n <ActivityIndicator size={buttonStyles.icon.fontSize} color={buttonStyles.icon.color} />\n ) : (\n <IconSlot icon={startIcon} variant={iconVariant} style={buttonStyles.icon} />\n )}\n </AnimatedIconSlot>\n );\n\n // End slot: only end icon (no loading here)\n const endContent = (\n <AnimatedIconSlot visible={showEndIcon} iconSize={iconSize} gap={buttonGap}>\n <IconSlot icon={endIcon} variant={iconVariant} style={buttonStyles.icon} />\n </AnimatedIconSlot>\n );\n\n const rootStyles = useMemo(\n () => [\n buttonStyles.root,\n animatedStyles,\n typeof style === 'function' ? style({ pressed }) : style,\n ],\n [buttonStyles.root, animatedStyles, style, pressed],\n );\n\n / --------------------------------- Render --------------------------------- */\n return (\n <AnimatedPressable\n ref={ref}\n disabled={disabled}\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 alignContent=\"center\"\n style={rootStyles}\n {...props}\n >\n {startContent}\n {childrenNode}\n {endContent}\n </AnimatedPressable>\n );\n});\n\nButton.displayName = 'Button';\n\nexport { Button, type ButtonProps };\n"],"mappings":"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"}

package/dist/components/Checkbox.cjs CHANGED Viewed

@@ -1,7 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_index = require('../motion-tokens/dist/index.cjs');
-const require_motion = require('../motion.cjs');
+const require_motion = require('../uds/dist/tokens/configs/motion.cjs');
+const require_motion$1 = require('../motion.cjs');
 const require_components_Icon = require('./Icon.cjs');
 const require_components_Text = require('./Text.cjs');
 const require_components_HStack = require('./HStack.cjs');
@@ -56,8 +56,8 @@ const Checkbox = (0, react.memo)(function Checkbox$1({ label, labelPosition = "s
 	const iconName = valueState === "indeterminate" ? "Minus" : "Check";
 	const showIcon = valueState !== "unchecked";
 	const shouldAnimate = !reduceMotion;
-	const scaleProgress = (0, react_native_reanimated.useDerivedValue)(() => shouldAnimate ? (0, react_native_reanimated.withSpring)(pressed ? require_index.SCALE_EFFECTS.down : require_index.SCALE_EFFECTS.none, require_motion.BUTTON_SPRING_CONFIG) : require_index.SCALE_EFFECTS.none, [pressed, shouldAnimate]);
-	const iconProgress = (0, react_native_reanimated.useDerivedValue)(() => shouldAnimate ? (0, react_native_reanimated.withSpring)(showIcon ? 1 : 0, require_motion.BUTTON_SPRING_CONFIG) : showIcon ? 1 : 0, [showIcon, shouldAnimate]);
+	const scaleProgress = (0, react_native_reanimated.useDerivedValue)(() => shouldAnimate ? (0, react_native_reanimated.withSpring)(pressed ? require_motion.SCALE_EFFECTS.down : require_motion.SCALE_EFFECTS.none, require_motion$1.BUTTON_SPRING_CONFIG) : require_motion.SCALE_EFFECTS.none, [pressed, shouldAnimate]);
+	const iconProgress = (0, react_native_reanimated.useDerivedValue)(() => shouldAnimate ? (0, react_native_reanimated.withSpring)(showIcon ? 1 : 0, require_motion$1.BUTTON_SPRING_CONFIG) : showIcon ? 1 : 0, [showIcon, shouldAnimate]);
 	const checkboxAnimatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({ transform: [{ scale: scaleProgress.value }] }));
 	const iconAnimatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({
 		opacity: (0, react_native_reanimated.interpolate)(iconProgress.value, [0, 1], [0, 1]),

package/dist/components/Checkbox.d.cts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { UniversalCheckboxProps } from "../types/dist/index.cjs";
-import * as react4 from "react";
+import { UniversalCheckboxProps } from "../uds/dist/tokens/types.cjs";
+import * as react0 from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
@@ -42,7 +42,7 @@ interface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps
  *
  * @see The {@link https://uds.build/docs/components/checkbox Checkbox Docs} for more info
  */
-declare const Checkbox: react4.NamedExoticComponent<CheckboxProps>;
+declare const Checkbox: react0.NamedExoticComponent<CheckboxProps>;
 //#endregion
 export { Checkbox, type CheckboxProps };
 //# sourceMappingURL=Checkbox.d.cts.map

package/dist/components/Checkbox.d.mts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { UniversalCheckboxProps } from "../types/dist/index.mjs";
-import * as react6 from "react";
+import { UniversalCheckboxProps } from "../uds/dist/tokens/types.mjs";
+import * as react13 from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
@@ -42,7 +42,7 @@ interface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps
  *
  * @see The {@link https://uds.build/docs/components/checkbox Checkbox Docs} for more info
  */
-declare const Checkbox: react6.NamedExoticComponent<CheckboxProps>;
+declare const Checkbox: react13.NamedExoticComponent<CheckboxProps>;
 //#endregion
 export { Checkbox, type CheckboxProps };
 //# sourceMappingURL=Checkbox.d.mts.map

package/dist/components/Checkbox.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.d.mts","names":[],"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":[],"mappings":";;;;;;;UAyBU,aAAA,SAAsB,KAAK,qBAAqB;QAClD,IAAI;;EADF,cAAA,CAAA,EAAc,OAAA;EAAa;EACzB,QAAA,CAAA,EAAA,OAAA;EAAJ;EADwB,QAAA,CAAA,EAAA,OAAA;EAA0B;EAAsB,QAAA,CAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,GAAA,IAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;cAsD1E,UAAQ,~~MAAA~~,CAAA,qBAAA"}
1	+ {"version":3,"file":"Checkbox.d.mts","names":[],"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":[],"mappings":";;;;;;;UAyBU,aAAA,SAAsB,KAAK,qBAAqB;QAClD,IAAI;;EADF,cAAA,CAAA,EAAc,OAAA;EAAa;EACzB,QAAA,CAAA,EAAA,OAAA;EAAJ;EADwB,QAAA,CAAA,EAAA,OAAA;EAA0B;EAAsB,QAAA,CAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,GAAA,IAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;cAsD1E,UAAQ,OAAA,CAAA,qBAAA"}

package/dist/components/Checkbox.mjs CHANGED Viewed

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

package/dist/components/Checkbox.mjs.map CHANGED Viewed

	@@ -1 +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-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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"}
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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"}

package/dist/components/Chip.d.cts CHANGED Viewed

@@ -1,7 +1,7 @@
-import { ChipSize, ChipVariant } from "../types/dist/index.cjs";
+import { ChipSize, ChipVariant } from "../uds/dist/tokens/types.cjs";
 import { IconSlotType } from "./IconSlot.cjs";
-import * as react5 from "react";
+import * as react7 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: react5.NamedExoticComponent<ChipProps>;
+declare const Chip: react7.NamedExoticComponent<ChipProps>;
 //#endregion
 export { Chip, type ChipProps };
 //# sourceMappingURL=Chip.d.cts.map

package/dist/components/Chip.d.mts CHANGED Viewed

@@ -1,7 +1,7 @@
-import { ChipSize, ChipVariant } from "../types/dist/index.mjs";
+import { ChipSize, ChipVariant } from "../uds/dist/tokens/types.mjs";
 import { IconSlotType } from "./IconSlot.mjs";
-import * as react0 from "react";
+import * as react11 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: react0.NamedExoticComponent<ChipProps>;
+declare const Chip: react11.NamedExoticComponent<ChipProps>;
 //#endregion
 export { Chip, type ChipProps };
 //# sourceMappingURL=Chip.d.mts.map

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

	@@ -1 +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,~~MAAA~~,CAAA,qBAAA"}
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"}

package/dist/components/Chip.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
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"}

package/dist/components/HStack.d.cts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { BoxProps } from "./Box.cjs";
-import * as react6 from "react";
+import * as react3 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: react6.NamedExoticComponent<HStackProps>;
+declare const HStack: react3.NamedExoticComponent<HStackProps>;
 //#endregion
 export { HStack, type HStackProps };
 //# sourceMappingURL=HStack.d.cts.map

package/dist/components/HStack.d.mts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { BoxProps } from "./Box.mjs";
-import * as react5 from "react";
+import * as react3 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: react5.NamedExoticComponent<HStackProps>;
+declare const HStack: react3.NamedExoticComponent<HStackProps>;
 //#endregion
 export { HStack, type HStackProps };
 //# sourceMappingURL=HStack.d.mts.map

package/dist/components/Icon.d.cts CHANGED Viewed

@@ -1,8 +1,9 @@
+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 { IconSize, IconVariant } from "../types/dist/index.cjs";
-import * as react7 from "react";
+import * as react1 from "react";
 import { Ref } from "react";
 import { StyleProp, Text, TextProps, TextStyle } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -81,7 +82,7 @@ interface IconProps extends Omit<TextProps, 'style'> {
  *
  * @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info
  */
-declare const Icon: react7.NamedExoticComponent<IconProps>;
+declare const Icon: react1.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 CHANGED Viewed

	@@ -1 +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~~;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"}
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"}

package/dist/components/Icon.d.mts CHANGED Viewed

@@ -1,8 +1,9 @@
+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 { IconSize, IconVariant } from "../types/dist/index.mjs";
-import * as react10 from "react";
+import * as react4 from "react";
 import { Ref } from "react";
 import { StyleProp, Text, TextProps, TextStyle } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -81,7 +82,7 @@ interface IconProps extends Omit<TextProps, 'style'> {
  *
  * @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info
  */
-declare const Icon: react10.NamedExoticComponent<IconProps>;
+declare const Icon: react4.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 CHANGED Viewed

	@@ -1 +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~~;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,~~OAAA~~,CAAA,qBAAA;cAaG;cACA"}
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"}

package/dist/components/Icon.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
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"}

package/dist/components/IconButton.cjs CHANGED Viewed

@@ -1,7 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_index = require('../motion-tokens/dist/index.cjs');
-const require_motion = require('../motion.cjs');
+const require_motion = require('../uds/dist/tokens/configs/motion.cjs');
+const require_motion$1 = 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_index.SCALE_EFFECTS.none);
+	const scale = (0, react_native_reanimated.useSharedValue)(require_motion.SCALE_EFFECTS.none);
 	const handlePressIn = (0, react.useCallback)((event) => {
 		setPressed(true);
-		if (shouldAnimate) scale.value = (0, react_native_reanimated.withSpring)(require_index.SCALE_EFFECTS.down, require_motion.BUTTON_SPRING_CONFIG);
+		if (shouldAnimate) scale.value = (0, react_native_reanimated.withSpring)(require_motion.SCALE_EFFECTS.down, require_motion$1.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_index.SCALE_EFFECTS.none, require_motion.BUTTON_SPRING_CONFIG);
+		if (shouldAnimate) scale.value = (0, react_native_reanimated.withSpring)(require_motion.SCALE_EFFECTS.none, require_motion$1.BUTTON_SPRING_CONFIG);
 		onPressOut?.(event);
 	}, [
 		shouldAnimate,

package/dist/components/IconButton.d.cts CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"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"}
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"}