@yahoo/uds-mobile 1.6.4 → 1.7.0

package/dist/bin/fixtures/dist/index.mjs

@@ -396,6 +396,9 @@ var buttonVariantsFlat = [
 	"warning-secondary",
 	"info-secondary",
 	"tertiary",
+	"contrast-high",
+	"contrast-medium",
+	"contrast-low",
 	"brand-tertiary",
 	"alert-tertiary",
 	"positive-tertiary",

package/dist/bin/generateTheme.mjs

@@ -10,7 +10,7 @@ import { fontAliasToPostscript } from "@yahoo/uds-mobile/fonts";
 /**
 * Generate Unistyles theme from UDS tokens.
 *
-* Takes UniversalTokensConfig and generates theme objects for React Native Unistyles.
+* Takes UniversalTokensConfigGeneric and generates theme objects for React Native Unistyles.
 */
 /**
 * Converts an array of BoxShadowValue objects to a CSS box-shadow string.
@@ -72,11 +72,63 @@ function rgbStringToRgb(rgbString) {
 	return `rgb(${parts.join(", ")})`;
 }
 /**
-* Generates elevation colors from config.
+* Generates elevation border colors (for line palette) from config.
+* Resolves the borderColor from each elevation preset to an RGB value.
 */
-function generateElevationColors(elevation) {
+function generateElevationBorderColors(config, colorMode) {
 	const result = {};
-	for (const level of Object.keys(elevation)) result[`elevation-${level}`] = "transparent";
+	const palette = config.colorMode[colorMode].palette;
+	const spectrum = config.colorMode[colorMode].spectrum;
+	for (const level of Object.keys(config.elevation)) {
+		const borderColorDef = config.elevation[level][colorMode].borderColor;
+		let color = "transparent";
+		if (borderColorDef.type === "line") {
+			const colorDef = palette.line?.[borderColorDef.value];
+			if (colorDef) {
+				const rgbValue = spectrum[colorDef.hue]?.[colorDef.step];
+				if (rgbValue) {
+					const parts = rgbValue.trim().split(/\s+/);
+					color = colorDef.opacity !== void 0 ? `rgba(${parts.join(", ")}, ${parseInt(colorDef.opacity, 10) / 100})` : `rgb(${parts.join(", ")})`;
+				}
+			}
+		} else if (borderColorDef.type === "always") color = newAlwaysPalette[borderColorDef.value] ?? "transparent";
+		else if (borderColorDef.type === "spectrum") {
+			const spectrumValue = borderColorDef.value;
+			const rgbValue = spectrum[spectrumValue.hue]?.[spectrumValue.step];
+			if (rgbValue) color = `rgb(${rgbValue.trim().split(/\s+/).join(", ")})`;
+		}
+		result[`elevation-${level}`] = color;
+	}
+	return result;
+}
+/**
+* Generates elevation background colors from config.
+* Resolves backgroundFill from elevation preset through the background palette.
+*/
+function generateElevationBackgroundColors(config, colorMode) {
+	const result = {};
+	const palette = config.colorMode[colorMode].palette;
+	const spectrum = config.colorMode[colorMode].spectrum;
+	for (const level of Object.keys(config.elevation)) {
+		const backgroundFill = config.elevation[level][colorMode].backgroundFill;
+		let color = "transparent";
+		if (backgroundFill.type === "background") {
+			const colorDef = palette.background?.[backgroundFill.value];
+			if (colorDef) {
+				const rgbValue = spectrum[colorDef.hue]?.[colorDef.step];
+				if (rgbValue) {
+					const parts = rgbValue.trim().split(/\s+/);
+					color = colorDef.opacity !== void 0 ? `rgba(${parts.join(", ")}, ${parseInt(colorDef.opacity, 10) / 100})` : `rgb(${parts.join(", ")})`;
+				}
+			}
+		} else if (backgroundFill.type === "always") color = newAlwaysPalette[backgroundFill.value] ?? "transparent";
+		else if (backgroundFill.type === "spectrum") {
+			const spectrumValue = backgroundFill.value;
+			const rgbValue = spectrum[spectrumValue.hue]?.[spectrumValue.step];
+			if (rgbValue) color = `rgb(${rgbValue.trim().split(/\s+/).join(", ")})`;
+		}
+		result[`elevation-${level}`] = color;
+	}
 	return result;
 }
 /**
@@ -180,12 +232,65 @@ function generateShadows(config) {
 	});
 	return result;
 }
+function isElevationCustomShadows(value) {
+	return Array.isArray(value);
+}
+/**
+* Generates pre-computed boxShadow CSS strings for all shadow variants.
+* Produces both drop and inset shadow maps keyed by variant name.
+* Elevation levels resolve their dropShadow config (which may reference
+* a ShadowVariant or provide custom ShadowPreset tuples).
+*/
+function generateBoxShadows(config, colorMode) {
+	const colorsConfig = config.colorMode[colorMode];
+	const spectrum = colorsConfig.spectrum;
+	const palette = colorsConfig.palette.foreground;
+	const drop = {};
+	const inset = {};
+	for (const [variant, presets] of Object.entries(config.shadow.drop)) {
+		if (variant === "none" || !presets || presets.length === 0) {
+			drop[variant] = "";
+			continue;
+		}
+		drop[variant] = boxShadowToCssString(convertShadowToBoxShadow(presets, spectrum, palette));
+	}
+	for (const [level, modePresets] of Object.entries(config.elevation)) {
+		const preset = modePresets[colorMode];
+		const key = `elevation-${level}`;
+		if (!preset.dropShadow || preset.dropShadow === "none") {
+			drop[key] = "";
+			continue;
+		}
+		if (isElevationCustomShadows(preset.dropShadow)) {
+			const allPresets = [...preset.dropShadow];
+			if (allPresets.length > 0) drop[key] = boxShadowToCssString(convertShadowToBoxShadow(allPresets, spectrum, palette));
+			else drop[key] = "";
+		} else {
+			const refPresets = config.shadow.drop[preset.dropShadow];
+			if (refPresets && refPresets.length > 0) drop[key] = boxShadowToCssString(convertShadowToBoxShadow(refPresets, spectrum, palette));
+			else drop[key] = "";
+		}
+	}
+	for (const [variant, presets] of Object.entries(config.shadow.inset)) {
+		if (variant === "none" || !presets || presets.length === 0) {
+			inset[variant] = "";
+			continue;
+		}
+		inset[variant] = boxShadowToCssString(convertShadowToBoxShadow(presets, spectrum, palette, true));
+	}
+	drop["none"] = drop["none"] ?? "";
+	inset["none"] = inset["none"] ?? "";
+	return {
+		drop,
+		inset
+	};
+}
 /**
 * Resolves a typography variant name to React Native text styles.
 * Looks up the typography config and converts to RN-compatible values.
 *
 * @param variantName - The typography variant name (e.g., 'body1', 'label4', 'ui2')
-* @param typography - The typography config from UniversalTokensConfig
+* @param typography - The typography config from UniversalTokensConfigGeneric
 * @param config - The full config for resolving font family aliases
 * @returns Resolved typography styles (fontSize, lineHeight, letterSpacing, fontFamily)
 */
@@ -208,7 +313,7 @@ function resolveTypographyStyles(variantName, typography, config) {
 	}
 	return result;
 }
-function resolveValue(variable, config, colorMode) {
+function resolveValue(variable, config, colorMode, propName) {
 	const { type, value } = variable;
 	const palette = config.colorMode[colorMode].palette;
 	const spectrum = config.colorMode[colorMode].spectrum;
@@ -263,6 +368,69 @@ function resolveValue(variable, config, colorMode) {
 		if (dropPresets && dropPresets.length > 0) return convertShadowToBoxShadow(dropPresets, spectrum, palette.foreground, true);
 		return [];
 	}
+	if (type === "elevationAliases") {
+		const level = value.replace("elevation-", "");
+		const elevationPreset = config.elevation[level];
+		if (!elevationPreset) return;
+		const preset = elevationPreset[colorMode];
+		if (propName === "backgroundColor") {
+			const backgroundFill = preset.backgroundFill;
+			if (backgroundFill.type === "background") {
+				const colorDef = palette.background?.[backgroundFill.value];
+				if (colorDef) {
+					const rgbValue = spectrum[colorDef.hue]?.[colorDef.step];
+					if (rgbValue) {
+						const parts = rgbValue.trim().split(/\s+/);
+						if (colorDef.opacity !== void 0) return `rgba(${parts.join(", ")}, ${parseInt(colorDef.opacity, 10) / 100})`;
+						return `rgb(${parts.join(", ")})`;
+					}
+				}
+			} else if (backgroundFill.type === "always") return newAlwaysPalette[backgroundFill.value] ?? "transparent";
+			else if (backgroundFill.type === "spectrum") {
+				const spectrumValue = backgroundFill.value;
+				const rgbValue = spectrum[spectrumValue.hue]?.[spectrumValue.step];
+				if (rgbValue) return `rgb(${rgbValue.trim().split(/\s+/).join(", ")})`;
+			}
+			return "transparent";
+		}
+		if (propName === "borderColor") {
+			const borderColorDef = preset.borderColor;
+			if (borderColorDef.type === "line") {
+				const colorDef = palette.line?.[borderColorDef.value];
+				if (colorDef) {
+					const rgbValue = spectrum[colorDef.hue]?.[colorDef.step];
+					if (rgbValue) {
+						const parts = rgbValue.trim().split(/\s+/);
+						if (colorDef.opacity !== void 0) return `rgba(${parts.join(", ")}, ${parseInt(colorDef.opacity, 10) / 100})`;
+						return `rgb(${parts.join(", ")})`;
+					}
+				}
+			} else if (borderColorDef.type === "always") return newAlwaysPalette[borderColorDef.value] ?? "transparent";
+			else if (borderColorDef.type === "spectrum") {
+				const spectrumValue = borderColorDef.value;
+				const rgbValue = spectrum[spectrumValue.hue]?.[spectrumValue.step];
+				if (rgbValue) return `rgb(${rgbValue.trim().split(/\s+/).join(", ")})`;
+			}
+			return "transparent";
+		}
+		if (propName === "borderWidth") {
+			const borderWidthKey = preset.borderWidth;
+			return scaleConfig.borderWidth[borderWidthKey] ?? 0;
+		}
+		if (propName === "shadow") {
+			const elevationPreset = config.elevation[level];
+			if (!elevationPreset) return [];
+			const preset = elevationPreset[colorMode];
+			if (!preset.dropShadow || preset.dropShadow === "none") return [];
+			if (isElevationCustomShadows(preset.dropShadow)) {
+				const allPresets = [...preset.dropShadow];
+				return allPresets.length > 0 ? convertShadowToBoxShadow(allPresets, spectrum, palette.foreground) : [];
+			}
+			const refPresets = config.shadow.drop[preset.dropShadow];
+			return refPresets && refPresets.length > 0 ? convertShadowToBoxShadow(refPresets, spectrum, palette.foreground) : [];
+		}
+		return;
+	}
 	if (type === "textDecorationLines") return value;
 	if (typeof value === "number") return value;
 }
@@ -296,7 +464,7 @@ function generateComponents(config, colorMode) {
 					if (!rnProps) continue;
 					const stateValue = states[state];
 					if (!stateValue) continue;
-					const resolvedValue = resolveValue(stateValue, config, colorMode);
+					const resolvedValue = resolveValue(stateValue, config, colorMode, propName);
 					if (resolvedValue === void 0) continue;
 					if (SHADOW_PROPS.has(propName)) {
 						if (Array.isArray(resolvedValue)) shadowValues.push(...resolvedValue);
@@ -333,6 +501,16 @@ function generateComponents(config, colorMode) {
 						state
 					]);
 					result[flatKey] = textStyleObj;
+					if (variantPath[0] === "icon" && textStyleObj.color) {
+						const iconLayer = "icon";
+						const iconFlatKey = toSlashKey([
+							componentName,
+							...variantPath,
+							iconLayer,
+							state
+						]);
+						result[iconFlatKey] = { color: textStyleObj.color };
+					}
 				}
 			}
 		}
@@ -346,31 +524,40 @@ function generateComponents(config, colorMode) {
 function generateTheme(config, colorMode) {
 	const colorsConfig = config.colorMode[colorMode];
 	const scaleConfig = config.scaleMode[DEFAULT_SCALE_MODE];
-	const elevationColors = generateElevationColors(config.elevation);
+	const elevationBackgroundColors = generateElevationBackgroundColors(config, colorMode);
+	const elevationBorderColors = generateElevationBorderColors(config, colorMode);
+	const boxShadows = generateBoxShadows(config, colorMode);
 	return {
 		colors: {
 			spectrum: sortKeys(generateSpectrum(colorsConfig.spectrum)),
 			background: sortKeys({
 				...generatePalette(colorsConfig.palette.background, colorsConfig.spectrum),
-				...elevationColors
+				...elevationBackgroundColors
 			}),
 			foreground: sortKeys(generatePalette(colorsConfig.palette.foreground, colorsConfig.spectrum)),
 			line: sortKeys({
 				...generatePalette(colorsConfig.palette.line, colorsConfig.spectrum),
-				...elevationColors
+				...elevationBorderColors
 			})
 		},
 		spacing: sortKeys({ ...spacingMap }),
 		borderRadius: sortKeys({ ...scaleConfig.borderRadius }),
 		borderWidth: sortKeys({
 			...scaleConfig.borderWidth,
-			...Object.fromEntries(Object.keys(config.elevation).map((level) => [`elevation-${level}`, parseInt(level, 10)]))
+			...Object.fromEntries(Object.keys(config.elevation).map((level) => {
+				const borderWidthKey = config.elevation[level].light.borderWidth;
+				return [`elevation-${level}`, scaleConfig.borderWidth[borderWidthKey] ?? 0];
+			}))
 		}),
 		iconSize: sortKeys({ ...scaleConfig.iconSizes }),
 		avatarSize: sortKeys({ ...scaleConfig.avatarSizes }),
 		font: sortKeys(generateFontAliases(config.font)),
 		typography: sortKeys(generateTypography(config.typography, config.font)),
 		shadow: sortKeys(generateShadows(config)),
+		boxShadow: {
+			drop: sortKeys(boxShadows.drop),
+			inset: sortKeys(boxShadows.inset)
+		},
 		components: generateComponents(config, colorMode)
 	};
 }

package/dist/components/Box.cjs

@@ -4,6 +4,7 @@ const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
 let react = require("react");
 let react_native = require("react-native");
 let generated_styles = require("../../generated/styles");
+let react_native_unistyles = require("react-native-unistyles");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Box.tsx
@@ -35,20 +36,21 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * @see {@link HStack} for horizontal layouts
 * @see {@link VStack} for vertical layouts
 */
-const Box = (0, react.memo)(function Box({ backgroundColor, dangerouslySetBackgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, dangerouslySetBorderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, display = "flex", overflow, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, width, height, minWidth, maxWidth, minHeight, maxHeight, style, ref, ...props }) {
+const Box = (0, react.memo)(function Box({ elevation, backgroundColor, dangerouslySetBackgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, dangerouslySetBorderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, display = "flex", overflow, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, width, height, minWidth, maxWidth, minHeight, maxHeight, dropShadow, insetShadow, style, ref, ...props }) {
+	const elevationAlias = elevation !== void 0 ? `elevation-${elevation}` : void 0;
 	const variants = {
-		backgroundColor,
+		backgroundColor: backgroundColor ?? elevationAlias,
 		borderRadius,
 		borderTopStartRadius,
 		borderTopEndRadius,
 		borderBottomStartRadius,
 		borderBottomEndRadius,
-		borderColor,
+		borderColor: borderColor ?? elevationAlias,
 		borderStartColor,
 		borderEndColor,
 		borderTopColor,
 		borderBottomColor,
-		borderWidth,
+		borderWidth: borderWidth ?? elevationAlias,
 		borderVerticalWidth,
 		borderHorizontalWidth,
 		borderStartWidth,
@@ -84,6 +86,8 @@ const Box = (0, react.memo)(function Box({ backgroundColor, dangerouslySetBackgr
 		rowGap
 	};
 	generated_styles.styles.useVariants(variants);
+	const effectiveDropShadow = dropShadow ?? elevationAlias;
+	const shadowStyle = effectiveDropShadow || insetShadow ? shadowSheet.shadow(effectiveDropShadow, insetShadow) : void 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
 		ref,
 		style: (0, react.useMemo)(() => [
@@ -95,6 +99,7 @@ const Box = (0, react.memo)(function Box({ backgroundColor, dangerouslySetBackgr
 			maxWidth ? { maxWidth } : void 0,
 			minHeight ? { minHeight } : void 0,
 			maxHeight ? { maxHeight } : void 0,
+			shadowStyle,
 			generated_styles.styles.foundation,
 			style
 		], [
@@ -106,6 +111,7 @@ const Box = (0, react.memo)(function Box({ backgroundColor, dangerouslySetBackgr
 			maxWidth,
 			minHeight,
 			maxHeight,
+			shadowStyle,
 			generated_styles.styles.foundation,
 			style
 		]),
@@ -113,6 +119,14 @@ const Box = (0, react.memo)(function Box({ backgroundColor, dangerouslySetBackgr
 	});
 });
 Box.displayName = "Box";
+/**
+* Dynamic shadow stylesheet that merges drop and inset shadows into a single
+* boxShadow CSS string. Theme-reactive so shadows update on color mode change.
+*/
+const shadowSheet = react_native_unistyles.StyleSheet.create((theme) => ({ shadow: (drop, inset) => {
+	const parts = [drop ? theme.boxShadow.drop[drop] : "", inset ? theme.boxShadow.inset[inset] : ""].filter(Boolean);
+	return parts.length > 0 ? { boxShadow: parts.join(", ") } : {};
+} }));
 
 //#endregion
 exports.Box = Box;

package/dist/components/Box.d.cts

@@ -1,4 +1,5 @@
 
+import { ElevationLevel } from "../types/dist/index.cjs";
 import { SizeProps } from "../types.cjs";
 import * as react from "react";
 import { Ref } from "react";
@@ -7,9 +8,8 @@ import { StyleProps } from "../../generated/styles";
 
 //#region src/components/Box.d.ts
 interface BoxProps extends ViewProps, SizeProps {
-  /** Ref to the underlying View */
   ref?: Ref<View>;
-  /** Background color from the theme palette */
+  elevation?: ElevationLevel;
   backgroundColor?: StyleProps['backgroundColor'];
   borderRadius?: StyleProps['borderRadius'];
   borderTopStartRadius?: StyleProps['borderTopStartRadius'];
@@ -55,6 +55,8 @@ interface BoxProps extends ViewProps, SizeProps {
   offsetTop?: StyleProps['offsetTop'];
   columnGap?: StyleProps['columnGap'];
   rowGap?: StyleProps['rowGap'];
+  dropShadow?: StyleProps['dropShadow'];
+  insetShadow?: StyleProps['insetShadow'];
   dangerouslySetBackgroundColor?: string;
   dangerouslySetBorderColor?: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Box.d.cts","names":[],"sources":["../../src/components/Box.tsx"],"mappings":";;;;;;;;UASU,QAAA,SAAiB,SAAA,EAAW,SAAA;;EAEpC,GAAA,GAAM,GAAA,CAAI,IAAA;EAFO;EAIjB,eAAA,GAAkB,UAAA;EAClB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,SAAA,GAAY,UAAA;EACZ,IAAA,GAAO,UAAA;EACP,aAAA,GAAgB,UAAA;EAChB,QAAA,GAAW,UAAA;EACX,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,UAAA;EACX,cAAA,GAAiB,UAAA;EAEjB,OAAA,GAAU,UAAA;EACV,QAAA,GAAW,UAAA;EAIX,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,MAAA,GAAS,UAAA;EACT,6BAAA;EACA,yBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+BI,GAAA,EAAG,KAAA,CAAA,oBAAA,CAAA,QAAA"}
+{"version":3,"file":"Box.d.cts","names":[],"sources":["../../src/components/Box.tsx"],"mappings":";;;;;;;;;UAWU,QAAA,SAAiB,SAAA,EAAW,SAAA;EACpC,GAAA,GAAM,GAAA,CAAI,IAAA;EACV,SAAA,GAAY,cAAA;EACZ,eAAA,GAAkB,UAAA;EAClB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,SAAA,GAAY,UAAA;EACZ,IAAA,GAAO,UAAA;EACP,aAAA,GAAgB,UAAA;EAChB,QAAA,GAAW,UAAA;EACX,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,UAAA;EACX,cAAA,GAAiB,UAAA;EAEjB,OAAA,GAAU,UAAA;EACV,QAAA,GAAW,UAAA;EAIX,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,MAAA,GAAS,UAAA;EACT,UAAA,GAAa,UAAA;EACb,WAAA,GAAc,UAAA;EACd,6BAAA;EACA,yBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+BI,GAAA,EAAG,KAAA,CAAA,oBAAA,CAAA,QAAA"}

package/dist/components/Box.d.mts

@@ -1,4 +1,5 @@
 
+import { ElevationLevel } from "../types/dist/index.mjs";
 import { SizeProps } from "../types.mjs";
 import * as react from "react";
 import { Ref } from "react";
@@ -7,9 +8,8 @@ import { StyleProps } from "../../generated/styles";
 
 //#region src/components/Box.d.ts
 interface BoxProps extends ViewProps, SizeProps {
-  /** Ref to the underlying View */
   ref?: Ref<View>;
-  /** Background color from the theme palette */
+  elevation?: ElevationLevel;
   backgroundColor?: StyleProps['backgroundColor'];
   borderRadius?: StyleProps['borderRadius'];
   borderTopStartRadius?: StyleProps['borderTopStartRadius'];
@@ -55,6 +55,8 @@ interface BoxProps extends ViewProps, SizeProps {
   offsetTop?: StyleProps['offsetTop'];
   columnGap?: StyleProps['columnGap'];
   rowGap?: StyleProps['rowGap'];
+  dropShadow?: StyleProps['dropShadow'];
+  insetShadow?: StyleProps['insetShadow'];
   dangerouslySetBackgroundColor?: string;
   dangerouslySetBorderColor?: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Box.d.mts","names":[],"sources":["../../src/components/Box.tsx"],"mappings":";;;;;;;;UASU,QAAA,SAAiB,SAAA,EAAW,SAAA;;EAEpC,GAAA,GAAM,GAAA,CAAI,IAAA;EAFO;EAIjB,eAAA,GAAkB,UAAA;EAClB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,SAAA,GAAY,UAAA;EACZ,IAAA,GAAO,UAAA;EACP,aAAA,GAAgB,UAAA;EAChB,QAAA,GAAW,UAAA;EACX,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,UAAA;EACX,cAAA,GAAiB,UAAA;EAEjB,OAAA,GAAU,UAAA;EACV,QAAA,GAAW,UAAA;EAIX,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,MAAA,GAAS,UAAA;EACT,6BAAA;EACA,yBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+BI,GAAA,EAAG,KAAA,CAAA,oBAAA,CAAA,QAAA"}
+{"version":3,"file":"Box.d.mts","names":[],"sources":["../../src/components/Box.tsx"],"mappings":";;;;;;;;;UAWU,QAAA,SAAiB,SAAA,EAAW,SAAA;EACpC,GAAA,GAAM,GAAA,CAAI,IAAA;EACV,SAAA,GAAY,cAAA;EACZ,eAAA,GAAkB,UAAA;EAClB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,SAAA,GAAY,UAAA;EACZ,IAAA,GAAO,UAAA;EACP,aAAA,GAAgB,UAAA;EAChB,QAAA,GAAW,UAAA;EACX,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,UAAA;EACX,cAAA,GAAiB,UAAA;EAEjB,OAAA,GAAU,UAAA;EACV,QAAA,GAAW,UAAA;EAIX,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,MAAA,GAAS,UAAA;EACT,UAAA,GAAa,UAAA;EACb,WAAA,GAAc,UAAA;EACd,6BAAA;EACA,yBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+BI,GAAA,EAAG,KAAA,CAAA,oBAAA,CAAA,QAAA"}

package/dist/components/Box.mjs

@@ -2,6 +2,7 @@
 import { memo, useMemo } from "react";
 import { View } from "react-native";
 import { styles } from "../../generated/styles";
+import { StyleSheet } from "react-native-unistyles";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Box.tsx
@@ -33,20 +34,21 @@ import { jsx } from "react/jsx-runtime";
 * @see {@link HStack} for horizontal layouts
 * @see {@link VStack} for vertical layouts
 */
-const Box = memo(function Box({ backgroundColor, dangerouslySetBackgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, dangerouslySetBorderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, display = "flex", overflow, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, width, height, minWidth, maxWidth, minHeight, maxHeight, style, ref, ...props }) {
+const Box = memo(function Box({ elevation, backgroundColor, dangerouslySetBackgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, dangerouslySetBorderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, display = "flex", overflow, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, width, height, minWidth, maxWidth, minHeight, maxHeight, dropShadow, insetShadow, style, ref, ...props }) {
+	const elevationAlias = elevation !== void 0 ? `elevation-${elevation}` : void 0;
 	const variants = {
-		backgroundColor,
+		backgroundColor: backgroundColor ?? elevationAlias,
 		borderRadius,
 		borderTopStartRadius,
 		borderTopEndRadius,
 		borderBottomStartRadius,
 		borderBottomEndRadius,
-		borderColor,
+		borderColor: borderColor ?? elevationAlias,
 		borderStartColor,
 		borderEndColor,
 		borderTopColor,
 		borderBottomColor,
-		borderWidth,
+		borderWidth: borderWidth ?? elevationAlias,
 		borderVerticalWidth,
 		borderHorizontalWidth,
 		borderStartWidth,
@@ -82,6 +84,8 @@ const Box = memo(function Box({ backgroundColor, dangerouslySetBackgroundColor,
 		rowGap
 	};
 	styles.useVariants(variants);
+	const effectiveDropShadow = dropShadow ?? elevationAlias;
+	const shadowStyle = effectiveDropShadow || insetShadow ? shadowSheet.shadow(effectiveDropShadow, insetShadow) : void 0;
 	return /* @__PURE__ */ jsx(View, {
 		ref,
 		style: useMemo(() => [
@@ -93,6 +97,7 @@ const Box = memo(function Box({ backgroundColor, dangerouslySetBackgroundColor,
 			maxWidth ? { maxWidth } : void 0,
 			minHeight ? { minHeight } : void 0,
 			maxHeight ? { maxHeight } : void 0,
+			shadowStyle,
 			styles.foundation,
 			style
 		], [
@@ -104,6 +109,7 @@ const Box = memo(function Box({ backgroundColor, dangerouslySetBackgroundColor,
 			maxWidth,
 			minHeight,
 			maxHeight,
+			shadowStyle,
 			styles.foundation,
 			style
 		]),
@@ -111,6 +117,14 @@ const Box = memo(function Box({ backgroundColor, dangerouslySetBackgroundColor,
 	});
 });
 Box.displayName = "Box";
+/**
+* Dynamic shadow stylesheet that merges drop and inset shadows into a single
+* boxShadow CSS string. Theme-reactive so shadows update on color mode change.
+*/
+const shadowSheet = StyleSheet.create((theme) => ({ shadow: (drop, inset) => {
+	const parts = [drop ? theme.boxShadow.drop[drop] : "", inset ? theme.boxShadow.inset[inset] : ""].filter(Boolean);
+	return parts.length > 0 ? { boxShadow: parts.join(", ") } : {};
+} }));
 
 //#endregion
 export { Box };

package/dist/components/Box.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Box.mjs","names":[],"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 to the underlying View */\n  ref?: Ref<View>;\n  /** Background color from the theme palette */\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 View. 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 or HStack respectively.\n *\n * @category Layout\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Box } from '@yahoo/uds-mobile';\n *\n * <Box backgroundColor=\"primary\" spacing=\"6\">\n *   Any kind of content can go here!\n * </Box>\n * ```\n *\n * @usage\n * - Use as a container to apply padding, shapes, or other styling\n * - Use for creating card components\n * - Use HStack/VStack for directional layouts\n *\n * @see {@link HStack} for horizontal layouts\n * @see {@link VStack} for vertical layouts\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,MAAM,MAAM,KAAK,SAAS,IAAI,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":[],"sources":["../../src/components/Box.tsx"],"sourcesContent":["import type { ElevationLevel } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { View } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\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  elevation?: ElevationLevel;\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  dropShadow?: StyleProps['dropShadow'];\n  insetShadow?: StyleProps['insetShadow'];\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 View. 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 or HStack respectively.\n *\n * @category Layout\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Box } from '@yahoo/uds-mobile';\n *\n * <Box backgroundColor=\"primary\" spacing=\"6\">\n *   Any kind of content can go here!\n * </Box>\n * ```\n *\n * @usage\n * - Use as a container to apply padding, shapes, or other styling\n * - Use for creating card components\n * - Use HStack/VStack for directional layouts\n *\n * @see {@link HStack} for horizontal layouts\n * @see {@link VStack} for vertical layouts\n */\nconst Box = memo(function Box({\n  // elevation\n  elevation,\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 elevationAlias = elevation !== undefined ? (`elevation-${elevation}` as const) : undefined;\n\n  const variants = {\n    // background\n    backgroundColor: backgroundColor ?? elevationAlias,\n    // border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    // nestedBorderRadius,\n    // nestedBorderRadiusSize,\n    // nestedBorderRadiusSpacing,\n    // nestedBorderRadiusWidth,\n    borderColor: borderColor ?? elevationAlias,\n    borderStartColor,\n    borderEndColor,\n    borderTopColor,\n    borderBottomColor,\n    borderWidth: borderWidth ?? elevationAlias,\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  const effectiveDropShadow = dropShadow ?? elevationAlias;\n  const shadowStyle =\n    effectiveDropShadow || insetShadow\n      ? shadowSheet.shadow(effectiveDropShadow, insetShadow)\n      : undefined;\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      shadowStyle,\n      styles.foundation,\n      style,\n    ],\n    [\n      dangerouslySetBackgroundColor,\n      dangerouslySetBorderColor,\n      width,\n      height,\n      minWidth,\n      maxWidth,\n      minHeight,\n      maxHeight,\n      shadowStyle,\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\n/**\n * Dynamic shadow stylesheet that merges drop and inset shadows into a single\n * boxShadow CSS string. Theme-reactive so shadows update on color mode change.\n */\nconst shadowSheet = StyleSheet.create((theme) => ({\n  shadow: (drop?: string, inset?: string) => {\n    const parts = [\n      drop ? theme.boxShadow.drop[drop as keyof typeof theme.boxShadow.drop] : '',\n      inset ? theme.boxShadow.inset[inset as keyof typeof theme.boxShadow.inset] : '',\n    ].filter(Boolean);\n    return parts.length > 0 ? { boxShadow: parts.join(', ') } : {};\n  },\n}));\n\nexport { Box, type BoxProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGA,MAAM,MAAM,KAAK,SAAS,IAAI,EAE5B,WAEA,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,WAEA,YACA,aAOA,OACA,KAEA,GAAG,SACQ;CACX,MAAM,iBAAiB,cAAc,SAAa,aAAa,cAAwB;CAEvF,MAAM,WAAW;EAEf,iBAAiB,mBAAmB;EAEpC;EACA;EACA;EACA;EACA;EAKA,aAAa,eAAe;EAC5B;EACA;EACA;EACA;EACA,aAAa,eAAe;EAC5B;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;CAE5B,MAAM,sBAAsB,cAAc;CAC1C,MAAM,cACJ,uBAAuB,cACnB,YAAY,OAAO,qBAAqB,YAAY,GACpD;AAoCN,QAAO,oBAAC;EAAU;EAAK,OAjCL,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;GACA,OAAO;GACP;GACD,EACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,OAAO;GACP;GACD,CACF;EAIwC,GAAI;GAAS;EACtD;AAEF,IAAI,cAAc;;;;;AAMlB,MAAM,cAAc,WAAW,QAAQ,WAAW,EAChD,SAAS,MAAe,UAAmB;CACzC,MAAM,QAAQ,CACZ,OAAO,MAAM,UAAU,KAAK,QAA6C,IACzE,QAAQ,MAAM,UAAU,MAAM,SAA+C,GAC9E,CAAC,OAAO,QAAQ;AACjB,QAAO,MAAM,SAAS,IAAI,EAAE,WAAW,MAAM,KAAK,KAAK,EAAE,GAAG,EAAE;GAEjE,EAAE"}

package/dist/components/Icon.cjs

@@ -7,9 +7,9 @@ const require_tokens = require('../icons/dist/tokens.cjs');
 let react = require("react");
 let react_native = require("react-native");
 let generated_styles = require("../../generated/styles");
+let react_native_unistyles = require("react-native-unistyles");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_native_svg = require("react-native-svg");
-let react_native_unistyles = require("react-native-unistyles");
 
 //#region src/components/Icon.tsx
 const DEFAULT_PROPS = {

package/dist/components/Icon.mjs

@@ -5,9 +5,9 @@ import { ICON_SIZE_MAP } from "../icons/dist/tokens.mjs";
 import { memo, useMemo } from "react";
 import { Text, View } from "react-native";
 import { styles } from "../../generated/styles";
+import { useUnistyles } from "react-native-unistyles";
 import { jsx } from "react/jsx-runtime";
 import { SvgXml } from "react-native-svg";
-import { useUnistyles } from "react-native-unistyles";
 
 //#region src/components/Icon.tsx
 const DEFAULT_PROPS = {

package/dist/components/Screen.cjs

@@ -6,8 +6,8 @@ const require_components_VStack = require('./VStack.cjs');
 let react = require("react");
 let react_native = require("react-native");
 let generated_styles = require("../../generated/styles");
-let react_jsx_runtime = require("react/jsx-runtime");
 let react_native_unistyles = require("react-native-unistyles");
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Screen.tsx
 /**

package/dist/components/Screen.mjs

@@ -4,8 +4,8 @@ import { VStack } from "./VStack.mjs";
 import { memo, useMemo } from "react";
 import { ScrollView } from "react-native";
 import { styles } from "../../generated/styles";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { StyleSheet } from "react-native-unistyles";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Screen.tsx
 /**

package/dist/components/Switch.cjs

@@ -7,8 +7,8 @@ const require_components_HStack = require('./HStack.cjs');
 let react = require("react");
 let react_native = require("react-native");
 let generated_styles = require("../../generated/styles");
-let react_jsx_runtime = require("react/jsx-runtime");
 let react_native_unistyles = require("react-native-unistyles");
+let react_jsx_runtime = require("react/jsx-runtime");
 let react_native_reanimated = require("react-native-reanimated");
 react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
 let react_native_unistyles_reanimated = require("react-native-unistyles/reanimated");

package/dist/components/Switch.mjs

@@ -5,8 +5,8 @@ import { HStack } from "./HStack.mjs";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { AccessibilityInfo, Pressable } from "react-native";
 import { switchStyles } from "../../generated/styles";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { StyleSheet } from "react-native-unistyles";
+import { jsx, jsxs } from "react/jsx-runtime";
 import Animated, { useAnimatedStyle, useDerivedValue, withTiming } from "react-native-reanimated";
 import { useAnimatedVariantColor } from "react-native-unistyles/reanimated";