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

package/CONTRIBUTING.md

@@ -104,7 +104,7 @@ This is the most important generated file. It contains all Unistyles stylesheets
 **Example input** (from `uds.config.ts` - see `packages/configurator/uds.config.ts`):
 
 ```typescript
-import type { UniversalTokensConfig } from '@yahoo/uds';
+import type { UniversalTokensConfig } from '@yahoo/uds-types';
 
 export const config: UniversalTokensConfig = {
   // Component configs use path-based keys: '{dimension}/{value}/{layer}'

package/dist/bin/{uds/dist/fixtures.mjs → fixtures/dist/index.mjs}

@@ -1,8 +1,5 @@
 #!/usr/bin/env node
-//#region ../uds/dist/fixtures.js
-function fromEntries(item) {
-	return Object.fromEntries(item);
-}
+//#region ../fixtures/dist/index.js
 var elevationAliases = [
 	"elevation-0",
 	"elevation-1",
@@ -172,6 +169,7 @@ var opacitySteps = [
 	"99",
 	"100"
 ];
+var fromEntries = (item) => Object.fromEntries(item);
 var opacityMap = fromEntries(opacitySteps.map((key) => [key, `${parseInt(key) / 100}`]));
 var backgroundColors = [
 	...backgroundPaletteColors,
@@ -202,9 +200,7 @@ var iconSizes = [
 	"md",
 	"lg",
 	"xs"
-].sort((a, b) => {
-	return iconSizeSort[a] - iconSizeSort[b];
-});
+].sort((a, b) => iconSizeSort[a] - iconSizeSort[b]);
 var spacingMap = {
 	"0": 0,
 	px: 1,
@@ -378,9 +374,9 @@ var buttonVariantsFlat = [
 	if (aPriority !== bPriority) return aPriority - bPriority;
 	return a.localeCompare(b);
 });
-var buttonVariantsSecondary = buttonVariantsFlat.filter((variant) => variant.includes("secondary"));
-var buttonVariantsTertiary = buttonVariantsFlat.filter((variant) => variant.includes("tertiary"));
-var buttonVariantsPrimary = buttonVariantsFlat.filter((variant) => !buttonVariantsSecondary.includes(variant) && !buttonVariantsTertiary.includes(variant));
+var buttonVariantsSecondary = buttonVariantsFlat.filter((v) => v.includes("secondary"));
+var buttonVariantsTertiary = buttonVariantsFlat.filter((v) => v.includes("tertiary"));
+var buttonVariantsPrimary = buttonVariantsFlat.filter((v) => !buttonVariantsSecondary.includes(v) && !buttonVariantsTertiary.includes(v));
 var preferredTShirtSizeSort = {
 	none: 0,
 	xs: 1,
@@ -395,18 +391,14 @@ var buttonSizes = [
 	"md",
 	"lg",
 	"xs"
-].sort((a, b) => {
-	return preferredTShirtSizeSort[a] - preferredTShirtSizeSort[b];
-});
+].sort((a, b) => preferredTShirtSizeSort[a] - preferredTShirtSizeSort[b]);
 var iconButtonSizes = [
 	"sm",
 	"md",
 	"lg",
 	"xl",
 	"xs"
-].sort((a, b) => {
-	return preferredTShirtSizeSort[a] - preferredTShirtSizeSort[b];
-});
+].sort((a, b) => preferredTShirtSizeSort[a] - preferredTShirtSizeSort[b]);
 var shadowVariants = [
 	"none",
 	"xs",

package/dist/bin/{uds/dist/tokens/consts/fontDeclarationsMap.mjs → fonts/dist/index.mjs}

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
-//#region ../uds/dist/tokens/consts/fontDeclarationsMap.js
-/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+//#region ../fonts/dist/index.js
+/*! © 2026 Yahoo, Inc. UDS Fonts v0.0.0-development */
 const UDS_FONTS_CDN_PREFIX = "https://s.yimg.com/bw/fonts";
 const sansFallbacks = [
 	"Helvetica Neue",

package/dist/bin/generateTheme.mjs

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
-import { spacingMap } from "./uds/dist/fixtures.mjs";
-import { newAlwaysPalette } from "./uds/dist/tokens/configs/palette/alwaysPalette.mjs";
-import { DEFAULT_SCALE_MODE } from "./uds/dist/tokens/consts/defaultModes.mjs";
-import { FONT_DECLARATIONS_MAP } from "./uds/dist/tokens/consts/fontDeclarationsMap.mjs";
+import { spacingMap } from "./fixtures/dist/index.mjs";
+import { FONT_DECLARATIONS_MAP } from "./fonts/dist/index.mjs";
+import { DEFAULT_SCALE_MODE } from "./modes/dist/index.mjs";
+import { newAlwaysPalette } from "./palette/dist/index.mjs";
 import { MOBILE_STATES, PROPERTY_TO_RN_PROPS, SHADOW_PROPS, TEXT_ONLY_PROPS, toSlashKey } from "./mobile/scripts/utils/configToRNMappings.mjs";
 import { fontAliasToPostscript } from "@yahoo/uds-mobile/fonts";
 
@@ -45,13 +45,15 @@ function sortKeys(obj) {
 	for (const key of keys) sorted[key] = sortKeys(obj[key]);
 	return sorted;
 }
+function isWebFontID(value) {
+	return value in FONT_DECLARATIONS_MAP;
+}
 /**
 * Converts a FontID and weight value to a PostScript font name.
 * React Native requires PostScript names to load fonts, not CSS font-family + weight.
 */
 function getPostScriptName(fontId, weight, italic = false) {
 	const fontConfig = FONT_DECLARATIONS_MAP[fontId];
-	if (!fontConfig) return fontId;
 	let weightConfig = fontConfig.fontWeights.find((w) => w.value === weight);
 	if (!weightConfig) weightConfig = fontConfig.fontWeights.reduce((closest, current) => {
 		const closestDiff = Math.abs(closest.value - weight);
@@ -148,7 +150,7 @@ function generateTypography(typographyConfig, fontConfig) {
 		const fontAlias = style.fontFamily.base;
 		const fontId = fontConfig[fontAlias] ?? fontAlias;
 		const weight = Number(style.fontWeight.base.value);
-		const postScriptName = fontId in FONT_DECLARATIONS_MAP ? getPostScriptName(fontId, weight) : fontId;
+		const postScriptName = isWebFontID(fontId) ? getPostScriptName(fontId, weight) : fontId;
 		result[variant] = {
 			fontSize: parseTypographyValue(style.fontSize.base),
 			lineHeight: parseTypographyValue(style.lineHeight.base),
@@ -161,7 +163,7 @@ function generateTypography(typographyConfig, fontConfig) {
 }
 function generateFontAliases(fontConfig) {
 	const result = {};
-	for (const [alias, fontId] of Object.entries(fontConfig)) if (fontId in FONT_DECLARATIONS_MAP) {
+	for (const [alias, fontId] of Object.entries(fontConfig)) if (isWebFontID(fontId)) {
 		const defaultWeight = FONT_DECLARATIONS_MAP[fontId].defaults.fontWeight;
 		result[alias] = getPostScriptName(fontId, defaultWeight);
 	} else result[alias] = fontId;
@@ -201,7 +203,7 @@ function resolveTypographyStyles(variantName, typography, config) {
 	if (typeof letterSpacing === "number") result.letterSpacing = letterSpacing;
 	if (typeof fontFamily === "string") {
 		const fontId = config.font[fontFamily] ?? fontFamily;
-		if (fontId in FONT_DECLARATIONS_MAP) result.fontFamily = getPostScriptName(fontId, typeof fontWeight === "number" ? fontWeight : 400);
+		if (isWebFontID(fontId)) result.fontFamily = getPostScriptName(fontId, typeof fontWeight === "number" ? fontWeight : 400);
 		else result.fontFamily = fontId;
 	}
 	return result;

package/dist/bin/modes/dist/index.mjs

@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+//#region ../modes/dist/index.js
+const DEFAULT_SCALE_MODE = "large";
+
+//#endregion
+export { DEFAULT_SCALE_MODE };

package/dist/bin/{uds/dist/tokens/configs/palette/alwaysPalette.mjs → palette/dist/index.mjs}

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-//#region ../uds/dist/tokens/configs/palette/alwaysPalette.js
+//#region ../palette/dist/index.js
 const deprecatedAlwaysPalette = {
 	white: "#ffffff",
 	black: "#000000",

package/dist/components/Avatar.d.cts

@@ -1,6 +1,6 @@
 
 import { IconSlotType } from "./IconSlot.cjs";
-import * as react9 from "react";
+import * as react0 from "react";
 import { View, ViewProps } from "react-native";
 
 //#region src/components/Avatar.d.ts
@@ -54,7 +54,7 @@ interface AvatarProps extends ViewProps {
  *
  * @see The {@link https://uds.build/docs/components/avatar Avatar Docs} for more info
  */
-declare const Avatar: react9.ForwardRefExoticComponent<AvatarProps & react9.RefAttributes<View>>;
+declare const Avatar: react0.ForwardRefExoticComponent<AvatarProps & react0.RefAttributes<View>>;
 //#endregion
 export { Avatar, type AvatarProps };
 //# sourceMappingURL=Avatar.d.cts.map

package/dist/components/Badge.d.cts

@@ -1,7 +1,7 @@
 
-import { BadgeSize, BadgeVariant } from "../uds/dist/tokens/types.cjs";
+import { BadgeSize, BadgeVariant } from "../types/dist/index.cjs";
 import { IconSlotType } from "./IconSlot.cjs";
-import * as react4 from "react";
+import * as react1 from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 
@@ -37,7 +37,7 @@ interface BadgeProps extends ViewProps {
  * <Badge variant="alert" startIcon="Warning">Error</Badge>
  * ```
  */
-declare const Badge: react4.NamedExoticComponent<BadgeProps>;
+declare const Badge: react1.NamedExoticComponent<BadgeProps>;
 //#endregion
 export { Badge, type BadgeProps };
 //# sourceMappingURL=Badge.d.cts.map

package/dist/components/Badge.d.mts

@@ -1,7 +1,7 @@
 
-import { BadgeSize, BadgeVariant } from "../uds/dist/tokens/types.mjs";
+import { BadgeSize, BadgeVariant } from "../types/dist/index.mjs";
 import { IconSlotType } from "./IconSlot.mjs";
-import * as react1 from "react";
+import * as react3 from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 
@@ -37,7 +37,7 @@ interface BadgeProps extends ViewProps {
  * <Badge variant="alert" startIcon="Warning">Error</Badge>
  * ```
  */
-declare const Badge: react1.NamedExoticComponent<BadgeProps>;
+declare const Badge: react3.NamedExoticComponent<BadgeProps>;
 //#endregion
 export { Badge, type BadgeProps };
 //# sourceMappingURL=Badge.d.mts.map

package/dist/components/Badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.mjs","names":["Badge"],"sources":["../../src/components/Badge.tsx"],"sourcesContent":["import type { BadgeSize, BadgeVariant } from '@yahoo/uds/tokens';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { View, ViewProps } from 'react-native';\n\nimport { badgeStyles } from '../../generated/styles';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\n\ninterface BadgeProps extends ViewProps {\n  /** @default 'primary' */\n  variant?: BadgeVariant;\n  /** @default 'md' */\n  size?: BadgeSize;\n  minWidth?: number;\n  /** @default 200 */\n  maxWidth?: number;\n  startIcon?: IconSlotType;\n  endIcon?: IconSlotType;\n  dangerouslySetBackgroundColor?: string;\n  dangerouslySetColor?: string;\n  dangerouslySetBorderColor?: string;\n  dangerouslySetIconColor?: string;\n  ref?: Ref<View>;\n}\n\n/**\n * **A badge component for status indicators**\n *\n * @description\n * Badges show notifications, counts, or status information on navigation items and icons.\n *\n * @example\n * ```tsx\n * import { Badge } from '~/components/ui/Badge';\n *\n * <Badge>Label</Badge>\n * <Badge variant=\"brand\" size=\"sm\">New</Badge>\n * <Badge variant=\"alert\" startIcon=\"Warning\">Error</Badge>\n * ```\n */\nconst Badge = memo(function Badge({\n  variant = 'primary',\n  size = 'md',\n  minWidth,\n  maxWidth = 200,\n  startIcon,\n  endIcon,\n  dangerouslySetBackgroundColor,\n  dangerouslySetColor,\n  dangerouslySetIconColor,\n  dangerouslySetBorderColor,\n  children,\n  style,\n  ref,\n  ...rest\n}: BadgeProps) {\n  badgeStyles.useVariants({ size, variant });\n  const rootStyles = useMemo(() => [badgeStyles.root, style], [style, badgeStyles.root]);\n\n  return (\n    <HStack\n      ref={ref}\n      alignItems=\"center\"\n      overflow=\"hidden\"\n      alignSelf=\"flex-start\"\n      maxWidth={maxWidth}\n      minWidth={minWidth}\n      dangerouslySetBackgroundColor={dangerouslySetBackgroundColor}\n      dangerouslySetBorderColor={dangerouslySetBorderColor}\n      // Cannot memoize - styles contain theme-reactive values\n      style={rootStyles}\n      {...rest}\n    >\n      {startIcon && (\n        <IconSlot\n          icon={startIcon}\n          variant=\"fill\"\n          dangerouslySetColor={dangerouslySetIconColor}\n          style={badgeStyles.icon}\n        />\n      )}\n      <Text\n        numberOfLines={1}\n        flexShrink=\"1\"\n        dangerouslySetColor={dangerouslySetColor}\n        style={badgeStyles.text}\n      >\n        {children}\n      </Text>\n      {endIcon && (\n        <IconSlot\n          icon={endIcon}\n          variant=\"fill\"\n          dangerouslySetColor={dangerouslySetIconColor}\n          style={badgeStyles.icon}\n        />\n      )}\n    </HStack>\n  );\n});\n\nBadge.displayName = 'Badge';\n\nexport { Badge, type BadgeProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,QAAQ,KAAK,SAASA,QAAM,EAChC,UAAU,WACV,OAAO,MACP,UACA,WAAW,KACX,WACA,SACA,+BACA,qBACA,yBACA,2BACA,UACA,OACA,KACA,GAAG,QACU;AACb,aAAY,YAAY;EAAE;EAAM;EAAS,CAAC;AAG1C,QACE,qBAAC;EACM;EACL,YAAW;EACX,UAAS;EACT,WAAU;EACA;EACA;EACqB;EACJ;EAE3B,OAbe,cAAc,CAAC,YAAY,MAAM,MAAM,EAAE,CAAC,OAAO,YAAY,KAAK,CAAC;EAclF,GAAI;;GAEH,aACC,oBAAC;IACC,MAAM;IACN,SAAQ;IACR,qBAAqB;IACrB,OAAO,YAAY;KACnB;GAEJ,oBAAC;IACC,eAAe;IACf,YAAW;IACU;IACrB,OAAO,YAAY;IAElB;KACI;GACN,WACC,oBAAC;IACC,MAAM;IACN,SAAQ;IACR,qBAAqB;IACrB,OAAO,YAAY;KACnB;;GAEG;EAEX;AAEF,MAAM,cAAc"}
+{"version":3,"file":"Badge.mjs","names":["Badge"],"sources":["../../src/components/Badge.tsx"],"sourcesContent":["import type { BadgeSize, BadgeVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { View, ViewProps } from 'react-native';\n\nimport { badgeStyles } from '../../generated/styles';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\n\ninterface BadgeProps extends ViewProps {\n  /** @default 'primary' */\n  variant?: BadgeVariant;\n  /** @default 'md' */\n  size?: BadgeSize;\n  minWidth?: number;\n  /** @default 200 */\n  maxWidth?: number;\n  startIcon?: IconSlotType;\n  endIcon?: IconSlotType;\n  dangerouslySetBackgroundColor?: string;\n  dangerouslySetColor?: string;\n  dangerouslySetBorderColor?: string;\n  dangerouslySetIconColor?: string;\n  ref?: Ref<View>;\n}\n\n/**\n * **A badge component for status indicators**\n *\n * @description\n * Badges show notifications, counts, or status information on navigation items and icons.\n *\n * @example\n * ```tsx\n * import { Badge } from '~/components/ui/Badge';\n *\n * <Badge>Label</Badge>\n * <Badge variant=\"brand\" size=\"sm\">New</Badge>\n * <Badge variant=\"alert\" startIcon=\"Warning\">Error</Badge>\n * ```\n */\nconst Badge = memo(function Badge({\n  variant = 'primary',\n  size = 'md',\n  minWidth,\n  maxWidth = 200,\n  startIcon,\n  endIcon,\n  dangerouslySetBackgroundColor,\n  dangerouslySetColor,\n  dangerouslySetIconColor,\n  dangerouslySetBorderColor,\n  children,\n  style,\n  ref,\n  ...rest\n}: BadgeProps) {\n  badgeStyles.useVariants({ size, variant });\n  const rootStyles = useMemo(() => [badgeStyles.root, style], [style, badgeStyles.root]);\n\n  return (\n    <HStack\n      ref={ref}\n      alignItems=\"center\"\n      overflow=\"hidden\"\n      alignSelf=\"flex-start\"\n      maxWidth={maxWidth}\n      minWidth={minWidth}\n      dangerouslySetBackgroundColor={dangerouslySetBackgroundColor}\n      dangerouslySetBorderColor={dangerouslySetBorderColor}\n      // Cannot memoize - styles contain theme-reactive values\n      style={rootStyles}\n      {...rest}\n    >\n      {startIcon && (\n        <IconSlot\n          icon={startIcon}\n          variant=\"fill\"\n          dangerouslySetColor={dangerouslySetIconColor}\n          style={badgeStyles.icon}\n        />\n      )}\n      <Text\n        numberOfLines={1}\n        flexShrink=\"1\"\n        dangerouslySetColor={dangerouslySetColor}\n        style={badgeStyles.text}\n      >\n        {children}\n      </Text>\n      {endIcon && (\n        <IconSlot\n          icon={endIcon}\n          variant=\"fill\"\n          dangerouslySetColor={dangerouslySetIconColor}\n          style={badgeStyles.icon}\n        />\n      )}\n    </HStack>\n  );\n});\n\nBadge.displayName = 'Badge';\n\nexport { Badge, type BadgeProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,QAAQ,KAAK,SAASA,QAAM,EAChC,UAAU,WACV,OAAO,MACP,UACA,WAAW,KACX,WACA,SACA,+BACA,qBACA,yBACA,2BACA,UACA,OACA,KACA,GAAG,QACU;AACb,aAAY,YAAY;EAAE;EAAM;EAAS,CAAC;AAG1C,QACE,qBAAC;EACM;EACL,YAAW;EACX,UAAS;EACT,WAAU;EACA;EACA;EACqB;EACJ;EAE3B,OAbe,cAAc,CAAC,YAAY,MAAM,MAAM,EAAE,CAAC,OAAO,YAAY,KAAK,CAAC;EAclF,GAAI;;GAEH,aACC,oBAAC;IACC,MAAM;IACN,SAAQ;IACR,qBAAqB;IACrB,OAAO,YAAY;KACnB;GAEJ,oBAAC;IACC,eAAe;IACf,YAAW;IACU;IACrB,OAAO,YAAY;IAElB;KACI;GACN,WACC,oBAAC;IACC,MAAM;IACN,SAAQ;IACR,qBAAqB;IACrB,OAAO,YAAY;KACnB;;GAEG;EAEX;AAEF,MAAM,cAAc"}

package/dist/components/Box.cjs

@@ -16,7 +16,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 *
 * @example
 * ```tsx
-* import { Box } from '@yahoo/uds';
+* import { Box } from '@yahoo/uds-mobile/Box';
 *
 * <Box backgroundColor="primary" spacing="6">
 *   Any kind of content can go here!

package/dist/components/Box.d.cts

@@ -1,6 +1,6 @@
 
 import { SizeProps } from "../types.cjs";
-import * as react6 from "react";
+import * as react3 from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -66,7 +66,7 @@ interface BoxProps extends ViewProps, SizeProps {
  *
  * @example
  * ```tsx
- * import { Box } from '@yahoo/uds';
+ * import { Box } from '@yahoo/uds-mobile/Box';
  *
  * <Box backgroundColor="primary" spacing="6">
  *   Any kind of content can go here!
@@ -81,7 +81,7 @@ interface BoxProps extends ViewProps, SizeProps {
  *
  * @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
  */
-declare const Box: react6.NamedExoticComponent<BoxProps>;
+declare const Box: react3.NamedExoticComponent<BoxProps>;
 //#endregion
 export { Box, type BoxProps };
 //# sourceMappingURL=Box.d.cts.map

package/dist/components/Box.d.mts

@@ -1,6 +1,6 @@
 
 import { SizeProps } from "../types.mjs";
-import * as react2 from "react";
+import * as react1 from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -66,7 +66,7 @@ interface BoxProps extends ViewProps, SizeProps {
  *
  * @example
  * ```tsx
- * import { Box } from '@yahoo/uds';
+ * import { Box } from '@yahoo/uds-mobile/Box';
  *
  * <Box backgroundColor="primary" spacing="6">
  *   Any kind of content can go here!
@@ -81,7 +81,7 @@ interface BoxProps extends ViewProps, SizeProps {
  *
  * @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
  */
-declare const Box: react2.NamedExoticComponent<BoxProps>;
+declare const Box: react1.NamedExoticComponent<BoxProps>;
 //#endregion
 export { Box, type BoxProps };
 //# sourceMappingURL=Box.d.mts.map

package/dist/components/Box.mjs

@@ -15,7 +15,7 @@ import { jsx } from "react/jsx-runtime";
 *
 * @example
 * ```tsx
-* import { Box } from '@yahoo/uds';
+* import { Box } from '@yahoo/uds-mobile/Box';
 *
 * <Box backgroundColor="primary" spacing="6">
 *   Any kind of content can go here!

package/dist/components/Box.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Box.mjs","names":["Box"],"sources":["../../src/components/Box.tsx"],"sourcesContent":["import type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { View } from 'react-native';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\nimport type { SizeProps } from '../types';\n\ninterface BoxProps extends ViewProps, SizeProps {\n  ref?: Ref<View>;\n  backgroundColor?: StyleProps['backgroundColor'];\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  alignContent?: StyleProps['alignContent'];\n  alignItems?: StyleProps['alignItems'];\n  alignSelf?: StyleProps['alignSelf'];\n  flex?: StyleProps['flex'];\n  flexDirection?: StyleProps['flexDirection'];\n  flexGrow?: StyleProps['flexGrow'];\n  flexShrink?: StyleProps['flexShrink'];\n  flexWrap?: StyleProps['flexWrap'];\n  justifyContent?: StyleProps['justifyContent'];\n  //   flexBasis?: StyleProps['flexBasis'];\n  display?: StyleProps['display'];\n  overflow?: StyleProps['overflow'];\n  //   overflowX?: StyleProps['overflowX'];\n  //   overflowY?: StyleProps['overflowY'];\n  //   position?: StyleProps['position'];\n  spacing?: StyleProps['spacing'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingStart?: StyleProps['spacingStart'];\n  spacingTop?: StyleProps['spacingTop'];\n  offset?: StyleProps['offset'];\n  offsetVertical?: StyleProps['offsetVertical'];\n  offsetHorizontal?: StyleProps['offsetHorizontal'];\n  offsetBottom?: StyleProps['offsetBottom'];\n  offsetEnd?: StyleProps['offsetEnd'];\n  offsetStart?: StyleProps['offsetStart'];\n  offsetTop?: StyleProps['offsetTop'];\n  columnGap?: StyleProps['columnGap'];\n  rowGap?: StyleProps['rowGap'];\n  dangerouslySetBackgroundColor?: string;\n  dangerouslySetBorderColor?: string;\n}\n\n/**\n * **📦 A layout component that can be used to compose other components**\n *\n * @description\n * The most simple component we ship - a div. But with all the power of the UDS design system.\n * By default, `Box` is a flexbox container. When working with vertical or horizontal layouts,\n * consider using [VStack](./v-stack) or [HStack](./h-stack) respectively.\n *\n * @example\n * ```tsx\n * import { Box } from '@yahoo/uds';\n *\n * <Box backgroundColor=\"primary\" spacing=\"6\">\n *   Any kind of content can go here!\n * </Box>\n * ```\n *\n * @usage\n * - If you need to div-like container to apply padding, shapes, or other styling.\n * - If you're creating card components.\n *\n * @see The {@link https://uds.build/docs/components/box Box Docs} for more info\n *\n * @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)\n */\nconst Box = memo(function Box({\n  // background\n  backgroundColor,\n  dangerouslySetBackgroundColor,\n  // border\n  borderRadius,\n  borderTopStartRadius,\n  borderTopEndRadius,\n  borderBottomStartRadius,\n  borderBottomEndRadius,\n  borderColor,\n  dangerouslySetBorderColor,\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  alignContent,\n  alignItems,\n  alignSelf,\n  flex,\n  flexDirection,\n  flexGrow,\n  flexShrink,\n  flexWrap,\n  justifyContent,\n  // flexBasis,\n  // layout\n  display = 'flex',\n  overflow,\n  //     overflowX,\n  //     overflowY,\n  // position,\n  // spacing\n  spacing,\n  spacingHorizontal,\n  spacingVertical,\n  spacingBottom,\n  spacingEnd,\n  spacingStart,\n  spacingTop,\n  offset,\n  offsetVertical,\n  offsetHorizontal,\n  offsetBottom,\n  offsetEnd,\n  offsetStart,\n  offsetTop,\n  columnGap,\n  rowGap,\n  // size\n  width,\n  height,\n  minWidth,\n  maxWidth,\n  minHeight,\n  maxHeight,\n  // // shadow\n  // dropShadow,\n  // insetShadow,\n  // // nested border radius\n  // nestedBorderRadius,\n  // nestedBorderRadiusSize = nestedBorderRadius ? borderRadius : undefined,\n  // nestedBorderRadiusSpacing = nestedBorderRadius ? spacing : undefined,\n  // nestedBorderRadiusWidth = nestedBorderRadius ? borderWidth : undefined,\n  // style - extracted to merge with variants\n  style,\n  ref,\n  // rest\n  ...props\n}: BoxProps) {\n  const variants = {\n    // background\n    backgroundColor,\n    // border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    // nestedBorderRadius,\n    // nestedBorderRadiusSize,\n    // nestedBorderRadiusSpacing,\n    // nestedBorderRadiusWidth,\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    alignContent,\n    alignItems,\n    alignSelf,\n    flex,\n    flexDirection,\n    flexGrow,\n    flexShrink,\n    flexWrap,\n    justifyContent,\n    // flexBasis,\n    // layout\n    display,\n    overflow,\n    // overflowX,\n    // overflowY,\n    // position,\n    // spacing\n    spacing,\n    spacingHorizontal,\n    spacingVertical,\n    spacingBottom,\n    spacingEnd,\n    spacingStart,\n    spacingTop,\n    offset,\n    offsetVertical,\n    offsetHorizontal,\n    offsetBottom,\n    offsetEnd,\n    offsetStart,\n    offsetTop,\n    columnGap,\n    rowGap,\n    // rest\n  };\n\n  styles.useVariants(variants);\n\n  // styles.foundation must be in deps - it returns a new reference when variants change\n  const boxStyles = useMemo(\n    () => [\n      dangerouslySetBackgroundColor\n        ? { backgroundColor: dangerouslySetBackgroundColor }\n        : undefined,\n      dangerouslySetBorderColor ? { borderColor: dangerouslySetBorderColor } : undefined,\n      width ? { width } : undefined,\n      height ? { height } : undefined,\n      minWidth ? { minWidth } : undefined,\n      maxWidth ? { maxWidth } : undefined,\n      minHeight ? { minHeight } : undefined,\n      maxHeight ? { maxHeight } : undefined,\n      styles.foundation,\n      style,\n    ],\n    [\n      dangerouslySetBackgroundColor,\n      dangerouslySetBorderColor,\n      width,\n      height,\n      minWidth,\n      maxWidth,\n      minHeight,\n      maxHeight,\n      styles.foundation,\n      style,\n    ],\n  );\n\n  // Merge variant styles with user-provided style prop\n  // User styles come last so they can override variant styles if needed\n  return <View ref={ref} style={boxStyles} {...props} />;\n});\n\nBox.displayName = 'Box';\n\nexport { Box, type BoxProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFA,MAAM,MAAM,KAAK,SAASA,MAAI,EAE5B,iBACA,+BAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,2BACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,cACA,YACA,WACA,MACA,eACA,UACA,YACA,UACA,gBAGA,UAAU,QACV,UAKA,SACA,mBACA,iBACA,eACA,YACA,cACA,YACA,QACA,gBACA,kBACA,cACA,WACA,aACA,WACA,WACA,QAEA,OACA,QACA,UACA,UACA,WACA,WAUA,OACA,KAEA,GAAG,SACQ;CACX,MAAM,WAAW;EAEf;EAEA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAED;AAED,QAAO,YAAY,SAAS;AAkC5B,QAAO,oBAAC;EAAU;EAAK,OA/BL,cACV;GACJ,gCACI,EAAE,iBAAiB,+BAA+B,GAClD;GACJ,4BAA4B,EAAE,aAAa,2BAA2B,GAAG;GACzE,QAAQ,EAAE,OAAO,GAAG;GACpB,SAAS,EAAE,QAAQ,GAAG;GACtB,WAAW,EAAE,UAAU,GAAG;GAC1B,WAAW,EAAE,UAAU,GAAG;GAC1B,YAAY,EAAE,WAAW,GAAG;GAC5B,YAAY,EAAE,WAAW,GAAG;GAC5B,OAAO;GACP;GACD,EACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,OAAO;GACP;GACD,CACF;EAIwC,GAAI;GAAS;EACtD;AAEF,IAAI,cAAc"}
+{"version":3,"file":"Box.mjs","names":["Box"],"sources":["../../src/components/Box.tsx"],"sourcesContent":["import type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { View } from 'react-native';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\nimport type { SizeProps } from '../types';\n\ninterface BoxProps extends ViewProps, SizeProps {\n  ref?: Ref<View>;\n  backgroundColor?: StyleProps['backgroundColor'];\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  alignContent?: StyleProps['alignContent'];\n  alignItems?: StyleProps['alignItems'];\n  alignSelf?: StyleProps['alignSelf'];\n  flex?: StyleProps['flex'];\n  flexDirection?: StyleProps['flexDirection'];\n  flexGrow?: StyleProps['flexGrow'];\n  flexShrink?: StyleProps['flexShrink'];\n  flexWrap?: StyleProps['flexWrap'];\n  justifyContent?: StyleProps['justifyContent'];\n  //   flexBasis?: StyleProps['flexBasis'];\n  display?: StyleProps['display'];\n  overflow?: StyleProps['overflow'];\n  //   overflowX?: StyleProps['overflowX'];\n  //   overflowY?: StyleProps['overflowY'];\n  //   position?: StyleProps['position'];\n  spacing?: StyleProps['spacing'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingStart?: StyleProps['spacingStart'];\n  spacingTop?: StyleProps['spacingTop'];\n  offset?: StyleProps['offset'];\n  offsetVertical?: StyleProps['offsetVertical'];\n  offsetHorizontal?: StyleProps['offsetHorizontal'];\n  offsetBottom?: StyleProps['offsetBottom'];\n  offsetEnd?: StyleProps['offsetEnd'];\n  offsetStart?: StyleProps['offsetStart'];\n  offsetTop?: StyleProps['offsetTop'];\n  columnGap?: StyleProps['columnGap'];\n  rowGap?: StyleProps['rowGap'];\n  dangerouslySetBackgroundColor?: string;\n  dangerouslySetBorderColor?: string;\n}\n\n/**\n * **📦 A layout component that can be used to compose other components**\n *\n * @description\n * The most simple component we ship - a div. But with all the power of the UDS design system.\n * By default, `Box` is a flexbox container. When working with vertical or horizontal layouts,\n * consider using [VStack](./v-stack) or [HStack](./h-stack) respectively.\n *\n * @example\n * ```tsx\n * import { Box } from '@yahoo/uds-mobile/Box';\n *\n * <Box backgroundColor=\"primary\" spacing=\"6\">\n *   Any kind of content can go here!\n * </Box>\n * ```\n *\n * @usage\n * - If you need to div-like container to apply padding, shapes, or other styling.\n * - If you're creating card components.\n *\n * @see The {@link https://uds.build/docs/components/box Box Docs} for more info\n *\n * @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)\n */\nconst Box = memo(function Box({\n  // background\n  backgroundColor,\n  dangerouslySetBackgroundColor,\n  // border\n  borderRadius,\n  borderTopStartRadius,\n  borderTopEndRadius,\n  borderBottomStartRadius,\n  borderBottomEndRadius,\n  borderColor,\n  dangerouslySetBorderColor,\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  alignContent,\n  alignItems,\n  alignSelf,\n  flex,\n  flexDirection,\n  flexGrow,\n  flexShrink,\n  flexWrap,\n  justifyContent,\n  // flexBasis,\n  // layout\n  display = 'flex',\n  overflow,\n  //     overflowX,\n  //     overflowY,\n  // position,\n  // spacing\n  spacing,\n  spacingHorizontal,\n  spacingVertical,\n  spacingBottom,\n  spacingEnd,\n  spacingStart,\n  spacingTop,\n  offset,\n  offsetVertical,\n  offsetHorizontal,\n  offsetBottom,\n  offsetEnd,\n  offsetStart,\n  offsetTop,\n  columnGap,\n  rowGap,\n  // size\n  width,\n  height,\n  minWidth,\n  maxWidth,\n  minHeight,\n  maxHeight,\n  // // shadow\n  // dropShadow,\n  // insetShadow,\n  // // nested border radius\n  // nestedBorderRadius,\n  // nestedBorderRadiusSize = nestedBorderRadius ? borderRadius : undefined,\n  // nestedBorderRadiusSpacing = nestedBorderRadius ? spacing : undefined,\n  // nestedBorderRadiusWidth = nestedBorderRadius ? borderWidth : undefined,\n  // style - extracted to merge with variants\n  style,\n  ref,\n  // rest\n  ...props\n}: BoxProps) {\n  const variants = {\n    // background\n    backgroundColor,\n    // border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    // nestedBorderRadius,\n    // nestedBorderRadiusSize,\n    // nestedBorderRadiusSpacing,\n    // nestedBorderRadiusWidth,\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    alignContent,\n    alignItems,\n    alignSelf,\n    flex,\n    flexDirection,\n    flexGrow,\n    flexShrink,\n    flexWrap,\n    justifyContent,\n    // flexBasis,\n    // layout\n    display,\n    overflow,\n    // overflowX,\n    // overflowY,\n    // position,\n    // spacing\n    spacing,\n    spacingHorizontal,\n    spacingVertical,\n    spacingBottom,\n    spacingEnd,\n    spacingStart,\n    spacingTop,\n    offset,\n    offsetVertical,\n    offsetHorizontal,\n    offsetBottom,\n    offsetEnd,\n    offsetStart,\n    offsetTop,\n    columnGap,\n    rowGap,\n    // rest\n  };\n\n  styles.useVariants(variants);\n\n  // styles.foundation must be in deps - it returns a new reference when variants change\n  const boxStyles = useMemo(\n    () => [\n      dangerouslySetBackgroundColor\n        ? { backgroundColor: dangerouslySetBackgroundColor }\n        : undefined,\n      dangerouslySetBorderColor ? { borderColor: dangerouslySetBorderColor } : undefined,\n      width ? { width } : undefined,\n      height ? { height } : undefined,\n      minWidth ? { minWidth } : undefined,\n      maxWidth ? { maxWidth } : undefined,\n      minHeight ? { minHeight } : undefined,\n      maxHeight ? { maxHeight } : undefined,\n      styles.foundation,\n      style,\n    ],\n    [\n      dangerouslySetBackgroundColor,\n      dangerouslySetBorderColor,\n      width,\n      height,\n      minWidth,\n      maxWidth,\n      minHeight,\n      maxHeight,\n      styles.foundation,\n      style,\n    ],\n  );\n\n  // Merge variant styles with user-provided style prop\n  // User styles come last so they can override variant styles if needed\n  return <View ref={ref} style={boxStyles} {...props} />;\n});\n\nBox.displayName = 'Box';\n\nexport { Box, type BoxProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFA,MAAM,MAAM,KAAK,SAASA,MAAI,EAE5B,iBACA,+BAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,2BACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,cACA,YACA,WACA,MACA,eACA,UACA,YACA,UACA,gBAGA,UAAU,QACV,UAKA,SACA,mBACA,iBACA,eACA,YACA,cACA,YACA,QACA,gBACA,kBACA,cACA,WACA,aACA,WACA,WACA,QAEA,OACA,QACA,UACA,UACA,WACA,WAUA,OACA,KAEA,GAAG,SACQ;CACX,MAAM,WAAW;EAEf;EAEA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAED;AAED,QAAO,YAAY,SAAS;AAkC5B,QAAO,oBAAC;EAAU;EAAK,OA/BL,cACV;GACJ,gCACI,EAAE,iBAAiB,+BAA+B,GAClD;GACJ,4BAA4B,EAAE,aAAa,2BAA2B,GAAG;GACzE,QAAQ,EAAE,OAAO,GAAG;GACpB,SAAS,EAAE,QAAQ,GAAG;GACtB,WAAW,EAAE,UAAU,GAAG;GAC1B,WAAW,EAAE,UAAU,GAAG;GAC1B,YAAY,EAAE,WAAW,GAAG;GAC5B,YAAY,EAAE,WAAW,GAAG;GAC5B,OAAO;GACP;GACD,EACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,OAAO;GACP;GACD,CACF;EAIwC,GAAI;GAAS;EACtD;AAEF,IAAI,cAAc"}

package/dist/components/Button.cjs

@@ -1,7 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_motion = require('../uds/dist/tokens/configs/motion.cjs');
-const require_motion$1 = require('../motion.cjs');
+const require_index = require('../motion-tokens/dist/index.cjs');
+const require_motion = require('../motion.cjs');
 const require_components_IconSlot = require('./IconSlot.cjs');
 const require_components_Text = require('./Text.cjs');
 const require_components_Pressable = require('./Pressable.cjs');
@@ -32,7 +32,7 @@ function interpolateShadowAlpha(shadow, alpha) {
 * Uses staggered animation: opacity waits until halfway through width animation.
 */
 function AnimatedIconSlot({ children, visible, iconSize, gap }) {
-	const progress = (0, react_native_reanimated.useDerivedValue)(() => (0, react_native_reanimated.withSpring)(visible ? 1 : 0, require_motion$1.BUTTON_SPRING_CONFIG), [visible]);
+	const progress = (0, react_native_reanimated.useDerivedValue)(() => (0, react_native_reanimated.withSpring)(visible ? 1 : 0, require_motion.BUTTON_SPRING_CONFIG), [visible]);
 	const animatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => {
 		const totalWidth = iconSize + gap;
 		return {
@@ -82,10 +82,10 @@ const Button = (0, react.memo)(function Button$1({ variant = "primary", size = "
 	const buttonGap = generated_styles.buttonStyles.root.gap;
 	const iconSize = generated_styles.buttonStyles.icon.fontSize;
 	const animatedTheme = (0, react_native_unistyles_reanimated.useAnimatedTheme)();
-	const scale = (0, react_native_reanimated.useSharedValue)(require_motion.SCALE_EFFECTS.none);
+	const scale = (0, react_native_reanimated.useSharedValue)(require_index.SCALE_EFFECTS.none);
 	const handlePressIn = (0, react.useCallback)((event) => {
 		setPressed(true);
-		if (shouldAnimate) scale.value = (0, react_native_reanimated.withSpring)(require_motion.SCALE_EFFECTS.down, require_motion$1.BUTTON_SPRING_CONFIG);
+		if (shouldAnimate) scale.value = (0, react_native_reanimated.withSpring)(require_index.SCALE_EFFECTS.down, require_motion.BUTTON_SPRING_CONFIG);
 		onPressIn?.(event);
 	}, [
 		shouldAnimate,
@@ -94,7 +94,7 @@ const Button = (0, react.memo)(function Button$1({ variant = "primary", size = "
 	]);
 	const handlePressOut = (0, react.useCallback)((event) => {
 		setPressed(false);
-		if (shouldAnimate) scale.value = (0, react_native_reanimated.withSpring)(require_motion.SCALE_EFFECTS.none, require_motion$1.BUTTON_SPRING_CONFIG);
+		if (shouldAnimate) scale.value = (0, react_native_reanimated.withSpring)(require_index.SCALE_EFFECTS.none, require_motion.BUTTON_SPRING_CONFIG);
 		onPressOut?.(event);
 	}, [
 		shouldAnimate,

package/dist/components/Button.d.cts

@@ -1,9 +1,8 @@
 
-import { IconVariant } from "../icons/dist/types.cjs";
-import { ButtonSize, ButtonVariantFlat } from "../uds/dist/tokens/types.cjs";
+import { ButtonSize, ButtonVariantFlat, IconVariant } from "../types/dist/index.cjs";
 import { IconSlotType } from "./IconSlot.cjs";
 import { PressableProps as PressableProps$1 } from "./Pressable.cjs";
-import * as react8 from "react";
+import * as react2 from "react";
 import { Ref } from "react";
 import { View } from "react-native";
 
@@ -50,7 +49,7 @@ interface ButtonProps extends Omit<PressableProps$1, 'children' | 'disabled'> {
  *
  * @see The {@link https://uds.build/docs/components/button Button Docs} for more info
  */
-declare const Button: react8.NamedExoticComponent<ButtonProps>;
+declare const Button: react2.NamedExoticComponent<ButtonProps>;
 //#endregion
 export { Button, type ButtonProps };
 //# sourceMappingURL=Button.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.cts","names":[],"sources":["../../src/components/Button.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;UA2GU,WAAA,SAAoB,KAAK;;YAEvB;;EAFF,IAAA,CAAA,EAID,UAJa;EAAa;EAEvB,WAAA,CAAA,EAII,WAJJ;EAEH,SAAA,CAAA,EAGK,YAHL;EAEO,OAAA,CAAA,EAEJ,YAFI;EACF,OAAA,CAAA,EAAA,OAAA;EACF,QAAA,CAAA,EAAA,OAAA;EAGC,QAAM,CAAA,EAAN,KAAA,CAAM,SAAA;EAMP;;;;EA8BN,cA4JJ,CAAA,EAAA,OA5JU;QA9BJ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;cA8BN,QAAM,MAAA,CAAA,qBAAA"}
+{"version":3,"file":"Button.d.cts","names":[],"sources":["../../src/components/Button.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;UA2GU,WAAA,SAAoB,KAAK;;YAEvB;EAFF;EAAyB,IAAA,CAAA,EAI1B,UAJ0B;EAEvB;EAEH,WAAA,CAAA,EAEO,WAFP;EAEO,SAAA,CAAA,EACF,YADE;EACF,OAAA,CAAA,EACF,YADE;EACF,OAAA,CAAA,EAAA,OAAA;EAGC,QAAM,CAAA,EAAA,OAAA;EAMP,QAAA,CAAA,EANC,KAAA,CAAM,SAMP;EAAJ;;;AAjB0B;;QAiB1B,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;cA8BN,QAAM,MAAA,CAAA,qBAAA"}

package/dist/components/Button.d.mts

@@ -1,9 +1,8 @@
 
-import { IconVariant } from "../icons/dist/types.mjs";
-import { ButtonSize, ButtonVariantFlat } from "../uds/dist/tokens/types.mjs";
+import { ButtonSize, ButtonVariantFlat, IconVariant } from "../types/dist/index.mjs";
 import { IconSlotType } from "./IconSlot.mjs";
 import { PressableProps as PressableProps$1 } from "./Pressable.mjs";
-import * as react12 from "react";
+import * as react2 from "react";
 import { Ref } from "react";
 import { View } from "react-native";
 
@@ -50,7 +49,7 @@ interface ButtonProps extends Omit<PressableProps$1, 'children' | 'disabled'> {
  *
  * @see The {@link https://uds.build/docs/components/button Button Docs} for more info
  */
-declare const Button: react12.NamedExoticComponent<ButtonProps>;
+declare const Button: react2.NamedExoticComponent<ButtonProps>;
 //#endregion
 export { Button, type ButtonProps };
 //# sourceMappingURL=Button.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.mts","names":[],"sources":["../../src/components/Button.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;UA2GU,WAAA,SAAoB,KAAK;;YAEvB;;EAFF,IAAA,CAAA,EAID,UAJa;EAAa;EAEvB,WAAA,CAAA,EAII,WAJJ;EAEH,SAAA,CAAA,EAGK,YAHL;EAEO,OAAA,CAAA,EAEJ,YAFI;EACF,OAAA,CAAA,EAAA,OAAA;EACF,QAAA,CAAA,EAAA,OAAA;EAGC,QAAM,CAAA,EAAN,KAAA,CAAM,SAAA;EAMP;;;;EA8BN,cA4JJ,CAAA,EAAA,OA5JU;QA9BJ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;cA8BN,QAAM,OAAA,CAAA,qBAAA"}
+{"version":3,"file":"Button.d.mts","names":[],"sources":["../../src/components/Button.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;UA2GU,WAAA,SAAoB,KAAK;;YAEvB;EAFF;EAAyB,IAAA,CAAA,EAI1B,UAJ0B;EAEvB;EAEH,WAAA,CAAA,EAEO,WAFP;EAEO,SAAA,CAAA,EACF,YADE;EACF,OAAA,CAAA,EACF,YADE;EACF,OAAA,CAAA,EAAA,OAAA;EAGC,QAAM,CAAA,EAAA,OAAA;EAMP,QAAA,CAAA,EANC,KAAA,CAAM,SAMP;EAAJ;;;AAjB0B;;QAiB1B,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;cA8BN,QAAM,MAAA,CAAA,qBAAA"}

package/dist/components/Button.mjs

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

package/dist/components/Button.mjs.map

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

package/dist/components/Checkbox.cjs

@@ -1,7 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_motion = require('../uds/dist/tokens/configs/motion.cjs');
-const require_motion$1 = require('../motion.cjs');
+const require_index = require('../motion-tokens/dist/index.cjs');
+const require_motion = require('../motion.cjs');
 const require_components_Icon = require('./Icon.cjs');
 const require_components_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_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 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 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

@@ -1,6 +1,6 @@
 
-import { UniversalCheckboxProps } from "../uds/dist/tokens/types.cjs";
-import * as react0 from "react";
+import { UniversalCheckboxProps } from "../types/dist/index.cjs";
+import * as react4 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: react0.NamedExoticComponent<CheckboxProps>;
+declare const Checkbox: react4.NamedExoticComponent<CheckboxProps>;
 //#endregion
 export { Checkbox, type CheckboxProps };
 //# sourceMappingURL=Checkbox.d.cts.map

package/dist/components/Checkbox.d.mts

@@ -1,6 +1,6 @@
 
-import { UniversalCheckboxProps } from "../uds/dist/tokens/types.mjs";
-import * as react13 from "react";
+import { UniversalCheckboxProps } from "../types/dist/index.mjs";
+import * as react4 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: react13.NamedExoticComponent<CheckboxProps>;
+declare const Checkbox: react4.NamedExoticComponent<CheckboxProps>;
 //#endregion
 export { Checkbox, type CheckboxProps };
 //# sourceMappingURL=Checkbox.d.mts.map

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

@@ -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,OAAA,CAAA,qBAAA"}
+{"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"}

package/dist/components/Checkbox.mjs

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