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

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-types';
+import type { UniversalTokensConfig } from '@yahoo/uds';
 
 export const config: UniversalTokensConfig = {
   // Component configs use path-based keys: '{dimension}/{value}/{layer}'

package/README.md

@@ -50,7 +50,8 @@ npm install @yahoo/uds-mobile
 | react-native-unistyles  | ≥ 3.0.20          |
 | react-native-reanimated | ~4.1.x            |
 
-> **Note**: This package is tested against Expo SDK 54. While it may work with other versions, we cannot guarantee compatibility. If you encounter issues on a different Expo SDK version, please check for peer dependency conflicts.
+> [!NOTE]
+> This package is tested against Expo SDK 54. While it may work with other versions, we cannot guarantee compatibility. If you encounter issues on a different Expo SDK version, please check for peer dependency conflicts.
 
 ### Peer Dependencies
 
@@ -83,7 +84,8 @@ export default {
 };
 ```
 
-> **⚠️ Development Build Required**: `react-native-unistyles` uses native modules and does not work with Expo Go. You must use a [development build](https://docs.expo.dev/develop/development-builds/introduction/) or prebuild your app. See the [Unistyles setup guide](https://www.unistyl.es/v3/start/setup) for detailed instructions.
+> [!WARNING]
+> **Development Build Required**: `react-native-unistyles` uses native modules and does not work with Expo Go. You must use a [development build](https://docs.expo.dev/develop/development-builds/introduction/) or prebuild your app. See the [Unistyles setup guide](https://www.unistyl.es/v3/start/setup) for detailed instructions.
 
 ## Quick Start
 
@@ -157,6 +159,7 @@ import './lib/unistyles'; // Must be first!
 // ... your app's existing entry code
 ```
 
+> [!NOTE]
 > **Why?** Unistyles must be configured before any `StyleSheet.create()` calls execute. Since UDS Mobile components use Unistyles internally, the configuration must happen before any component imports.
 
 ### 4. Rebuild Your App
@@ -222,7 +225,8 @@ function ThemeToggle() {
 
 If you configured `adaptiveThemes: true`, the theme automatically follows the system preference. Calling `UnistylesRuntime.setTheme()` will override this until the app restarts.
 
-> **⚠️ Performance Note**: Using `useUnistyles()` causes component re-renders on theme changes, which negates Unistyles' performance benefits. For theme-aware styles, prefer `StyleSheet.create` with a dynamic function instead:
+> [!WARNING]
+> **Performance**: Using `useUnistyles()` causes component re-renders on theme changes, which negates Unistyles' performance benefits. For theme-aware styles, prefer `StyleSheet.create` with a dynamic function instead:
 >
 > ```tsx
 > // ✅ Preferred: No re-renders, styles update automatically
@@ -249,7 +253,8 @@ React Native DevTools includes a feature to highlight components when they re-re
 
 Components will flash with a colored border when they re-render. This makes it easy to spot unnecessary re-renders caused by `useUnistyles()` or other state changes.
 
-> **💡 Testing your setup**: A good way to verify Unistyles is configured correctly is to toggle light/dark mode with highlighting enabled. If set up properly, only the theme toggle button should re-render — not the rest of your app. If you see the entire screen flash, you likely have `useUnistyles()` calls in components that should be using `StyleSheet.create` with dynamic functions instead.
+> [!TIP]
+> **Testing your setup**: A good way to verify Unistyles is configured correctly is to toggle light/dark mode with highlighting enabled. If set up properly, only the theme toggle button should re-render — not the rest of your app. If you see the entire screen flash, you likely have `useUnistyles()` calls in components that should be using `StyleSheet.create` with dynamic functions instead.
 
 See the [React Native DevTools docs](https://reactnative.dev/docs/react-native-devtools#react-components) for more debugging features.
 

package/dist/bin/generateTheme.mjs

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
-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 { 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 { 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,15 +45,13 @@ 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);
@@ -150,7 +148,7 @@ function generateTypography(typographyConfig, fontConfig) {
 		const fontAlias = style.fontFamily.base;
 		const fontId = fontConfig[fontAlias] ?? fontAlias;
 		const weight = Number(style.fontWeight.base.value);
-		const postScriptName = isWebFontID(fontId) ? getPostScriptName(fontId, weight) : fontId;
+		const postScriptName = fontId in FONT_DECLARATIONS_MAP ? getPostScriptName(fontId, weight) : fontId;
 		result[variant] = {
 			fontSize: parseTypographyValue(style.fontSize.base),
 			lineHeight: parseTypographyValue(style.lineHeight.base),
@@ -163,7 +161,7 @@ function generateTypography(typographyConfig, fontConfig) {
 }
 function generateFontAliases(fontConfig) {
 	const result = {};
-	for (const [alias, fontId] of Object.entries(fontConfig)) if (isWebFontID(fontId)) {
+	for (const [alias, fontId] of Object.entries(fontConfig)) if (fontId in FONT_DECLARATIONS_MAP) {
 		const defaultWeight = FONT_DECLARATIONS_MAP[fontId].defaults.fontWeight;
 		result[alias] = getPostScriptName(fontId, defaultWeight);
 	} else result[alias] = fontId;
@@ -203,7 +201,7 @@ function resolveTypographyStyles(variantName, typography, config) {
 	if (typeof letterSpacing === "number") result.letterSpacing = letterSpacing;
 	if (typeof fontFamily === "string") {
 		const fontId = config.font[fontFamily] ?? fontFamily;
-		if (isWebFontID(fontId)) result.fontFamily = getPostScriptName(fontId, typeof fontWeight === "number" ? fontWeight : 400);
+		if (fontId in FONT_DECLARATIONS_MAP) result.fontFamily = getPostScriptName(fontId, typeof fontWeight === "number" ? fontWeight : 400);
 		else result.fontFamily = fontId;
 	}
 	return result;

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

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

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

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

package/dist/bin/uds/dist/tokens/consts/defaultModes.mjs

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

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

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
-//#region ../fonts/dist/index.js
-/*! © 2026 Yahoo, Inc. UDS Fonts v0.0.0-development */
+//#region ../uds/dist/tokens/consts/fontDeclarationsMap.js
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 const UDS_FONTS_CDN_PREFIX = "https://s.yimg.com/bw/fonts";
 const sansFallbacks = [
 	"Helvetica Neue",
@@ -274,27 +274,11 @@ const FONT_DECLARATIONS_MAP = {
 		type: "sans",
 		fontFamily: "YA Sans VF",
 		isVariableFont: true,
-		fontSlants: [{
-			label: "None",
-			value: 0
-		}, {
-			label: "Italic",
-			value: 1
+		fontSlants: void 0,
+		fontWidths: [{
+			label: "Normal",
+			value: 100
 		}],
-		fontWidths: [
-			{
-				label: "Condensed",
-				value: 75
-			},
-			{
-				label: "Normal",
-				value: 100
-			},
-			{
-				label: "Extended",
-				value: 125
-			}
-		],
 		fontWeights: [
 			{
 				label: "Light",
@@ -322,13 +306,14 @@ const FONT_DECLARATIONS_MAP = {
 			}
 		],
 		defaults: {
-			fontSlant: 0,
+			fontSlant: void 0,
 			fontWidth: 100,
 			fontWeight: 400
 		},
 		declarations: [{
+			fontStyle: "normal",
 			fontWeight: "1 1000",
-			src: `${UDS_FONTS_CDN_PREFIX}/yas-vf.woff2`
+			src: `${UDS_FONTS_CDN_PREFIX}/yas-normal-no-italic-vf.woff2`
 		}]
 	},
 	inter: {

package/dist/components/Avatar.d.cts

@@ -1,6 +1,6 @@
 
 import { IconSlotType } from "./IconSlot.cjs";
-import * as react0 from "react";
+import * as react9 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: react0.ForwardRefExoticComponent<AvatarProps & react0.RefAttributes<View>>;
+declare const Avatar: react9.ForwardRefExoticComponent<AvatarProps & react9.RefAttributes<View>>;
 //#endregion
 export { Avatar, type AvatarProps };
 //# sourceMappingURL=Avatar.d.cts.map

package/dist/components/Avatar.d.mts

@@ -1,6 +1,6 @@
 
 import { IconSlotType } from "./IconSlot.mjs";
-import * as react1 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: react1.ForwardRefExoticComponent<AvatarProps & react1.RefAttributes<View>>;
+declare const Avatar: react0.ForwardRefExoticComponent<AvatarProps & react0.RefAttributes<View>>;
 //#endregion
 export { Avatar, type AvatarProps };
 //# sourceMappingURL=Avatar.d.mts.map

package/dist/components/Badge.d.cts

@@ -1,7 +1,7 @@
 
-import { BadgeSize, BadgeVariant } from "../types/dist/index.cjs";
+import { BadgeSize, BadgeVariant } from "../uds/dist/tokens/types.cjs";
 import { IconSlotType } from "./IconSlot.cjs";
-import * as react3 from "react";
+import * as react4 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: react3.NamedExoticComponent<BadgeProps>;
+declare const Badge: react4.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 "../types/dist/index.mjs";
+import { BadgeSize, BadgeVariant } from "../uds/dist/tokens/types.mjs";
 import { IconSlotType } from "./IconSlot.mjs";
-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.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-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"}
+{"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"}

package/dist/components/Box.cjs

@@ -16,7 +16,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 *
 * @example
 * ```tsx
-* import { Box } from '@yahoo/uds-mobile/Box';
+* import { Box } from '@yahoo/uds';
 *
 * <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 react2 from "react";
+import * as react6 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-mobile/Box';
+ * import { Box } from '@yahoo/uds';
  *
  * <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: react6.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 react3 from "react";
+import * as react2 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-mobile/Box';
+ * import { Box } from '@yahoo/uds';
  *
  * <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: react3.NamedExoticComponent<BoxProps>;
+declare const Box: react2.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-mobile/Box';
+* import { Box } from '@yahoo/uds';
 *
 * <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-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"}
+{"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"}

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_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_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.BUTTON_SPRING_CONFIG), [visible]);
+	const progress = (0, react_native_reanimated.useDerivedValue)(() => (0, react_native_reanimated.withSpring)(visible ? 1 : 0, require_motion$1.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_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,
@@ -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_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/Button.d.cts

@@ -1,8 +1,9 @@
 
-import { ButtonSize, ButtonVariantFlat, IconVariant } from "../types/dist/index.cjs";
+import { IconVariant } from "../icons/dist/types.cjs";
+import { ButtonSize, ButtonVariantFlat } from "../uds/dist/tokens/types.cjs";
 import { IconSlotType } from "./IconSlot.cjs";
 import { PressableProps as PressableProps$1 } from "./Pressable.cjs";
-import * as react1 from "react";
+import * as react8 from "react";
 import { Ref } from "react";
 import { View } from "react-native";
 
@@ -49,7 +50,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: react1.NamedExoticComponent<ButtonProps>;
+declare const Button: react8.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;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"}
+{"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"}

package/dist/components/Button.d.mts

@@ -1,8 +1,9 @@
 
-import { ButtonSize, ButtonVariantFlat, IconVariant } from "../types/dist/index.mjs";
+import { IconVariant } from "../icons/dist/types.mjs";
+import { ButtonSize, ButtonVariantFlat } from "../uds/dist/tokens/types.mjs";
 import { IconSlotType } from "./IconSlot.mjs";
 import { PressableProps as PressableProps$1 } from "./Pressable.mjs";
-import * as react0 from "react";
+import * as react12 from "react";
 import { Ref } from "react";
 import { View } from "react-native";
 
@@ -49,7 +50,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: react0.NamedExoticComponent<ButtonProps>;
+declare const Button: react12.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;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"}
+{"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"}

package/dist/components/Button.mjs

@@ -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 { IconSlot } from "./IconSlot.mjs";
 import { Text as Text$1 } from "./Text.mjs";