@yahoo/uds-mobile 2.1.0-beta.1 → 2.2.0

package/dist/bin/generateTheme.mjs

@@ -252,6 +252,19 @@ function generateShadows(config) {
 	});
 	return result;
 }
+/**
+* Generates blur values from elevation presets.
+* Maps elevation levels to their backgroundBlurRadius values.
+* These can be used with BlurView intensity prop.
+*/
+function generateBlur(config, colorMode) {
+	const result = { none: 0 };
+	for (const [level, modePresets] of Object.entries(config.elevation)) {
+		const blurRadius = modePresets[colorMode].backgroundBlurRadius ?? 0;
+		result[`elevation-${level}`] = blurRadius;
+	}
+	return result;
+}
 function isElevationCustomShadows(value) {
 	return Array.isArray(value);
 }
@@ -578,6 +591,7 @@ function generateTheme(config, colorMode) {
 			drop: sortKeys(boxShadows.drop),
 			inset: sortKeys(boxShadows.inset)
 		},
+		blur: sortKeys(generateBlur(config, colorMode)),
 		components: generateComponents(config, colorMode)
 	};
 }

package/dist/components/{Avatar.d.mts → Avatar.d.ts}

@@ -1,5 +1,5 @@
 
-import { IconSlotType } from "./IconSlot.mjs";
+import { IconSlotType } from "./IconSlot.js";
 import * as react from "react";
 import { View, ViewProps } from "react-native";
 
@@ -65,4 +65,4 @@ interface AvatarProps extends ViewProps {
 declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<View>>;
 //#endregion
 export { Avatar, type AvatarProps };
-//# sourceMappingURL=Avatar.d.mts.map
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","names":[],"sources":["../../src/components/Avatar.tsx"],"mappings":";;;;;;;KAWK,UAAA;;KAGA,aAAA;;KAGA,oBAAA,qFAOC,IAAA;AAAA,UAEI,WAAA,SAAoB,SAAA;EAff;EAiBb,GAAA;EAdgB;EAgBhB,GAAA;EAhBgB;EAkBhB,QAAA;EAfG;EAiBH,IAAA,GAAO,UAAA;;EAEP,OAAA,GAAU,aAAA;EAZM;EAchB,IAAA,GAAO,YAAA;EAZa;EAcpB,oBAAA,GAAuB,oBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;AAAoB;;;;;;;;;;;;;;;;cAoEvC,MAAA,EAAM,KAAA,CAAA,yBAAA,CAAA,WAAA,GAAA,KAAA,CAAA,aAAA,CAAA,IAAA"}

package/dist/components/{Avatar.mjs → Avatar.js}

@@ -1,7 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-import { Box } from "./Box.mjs";
-import { IconSlot } from "./IconSlot.mjs";
-import { Text as Text$1 } from "./Text.mjs";
+import { Box } from "./Box.js";
+import { IconSlot } from "./IconSlot.js";
+import { Text as Text$1 } from "./Text.js";
 import { forwardRef, useState } from "react";
 import { Image } from "react-native";
 import { avatarStyles } from "../../generated/styles";
@@ -114,4 +114,4 @@ Avatar.displayName = "Avatar";
 
 //#endregion
 export { Avatar };
-//# sourceMappingURL=Avatar.mjs.map
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","names":["RNImage","Text"],"sources":["../../src/components/Avatar.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport { Image as RNImage } from 'react-native';\n\nimport { avatarStyles } from '../../generated/styles';\nimport { Box } from './Box';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\n\n/** Avatar size options */\ntype AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Avatar variant options */\ntype AvatarVariant = 'primary' | 'secondary';\n\n/** Abbreviation strategy for generating initials */\ntype AbbreviationStrategy =\n  | 'first'\n  | 'last'\n  | 'firstAndLast'\n  | 'firstTwo'\n  | 'firstThree'\n  | 'firstOfEach'\n  | ((name: string) => string);\n\ninterface AvatarProps extends ViewProps {\n  /** Image source URL */\n  src?: string;\n  /** Alt text for the image, also used for generating initials */\n  alt?: string;\n  /** Explicit initials to display (overrides auto-generated from alt) */\n  fallback?: string;\n  /** Size of the avatar @default 'md' */\n  size?: AvatarSize;\n  /** Variant style @default 'primary' */\n  variant?: AvatarVariant;\n  /** Custom icon to display when no image or text fallback */\n  icon?: IconSlotType;\n  /** Strategy for generating initials from name @default 'firstAndLast' */\n  abbreviationStrategy?: AbbreviationStrategy;\n}\n\nconst abbreviationStrategies: Record<\n  Exclude<AbbreviationStrategy, (name: string) => string>,\n  (initials: string[]) => string\n> = {\n  first: (initials) => initials[0] ?? '',\n  last: (initials) => initials[initials.length - 1] ?? '',\n  firstAndLast: (initials) =>\n    initials.length === 1 ? (initials[0] ?? '') : `${initials[0]}${initials[initials.length - 1]}`,\n  firstTwo: (initials) => initials.slice(0, 2).join(''),\n  firstThree: (initials) => initials.slice(0, 3).join(''),\n  firstOfEach: (initials) => initials.join(''),\n};\n\n/** Generate initials from a name */\nfunction generateInitials(name?: string, strategy: AbbreviationStrategy = 'firstAndLast'): string {\n  if (!name) {\n    return '';\n  }\n\n  if (typeof strategy === 'function') {\n    return strategy(name);\n  }\n\n  const words = name.trim().split(/\\s+/);\n  const initials = words.map((word) => word[0]?.toUpperCase() ?? '');\n\n  return abbreviationStrategies[strategy](initials);\n}\n\n/**\n * **Avatar component for user representation**\n *\n * @description\n * Displays a user avatar with image, initials fallback, or icon fallback.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Avatar } from '@yahoo/uds-mobile';\n *\n * // With image\n * <Avatar\n *   src=\"https://example.com/photo.jpg\"\n *   alt=\"Jane Doe\"\n * />\n *\n * // With initials fallback\n * <Avatar alt=\"Jane Doe\" />\n *\n * // With explicit initials\n * <Avatar fallback=\"JD\" />\n *\n * // With custom icon\n * <Avatar icon=\"Person\" variant=\"secondary\" />\n * ```\n *\n * @accessibility\n * - Sets `accessibilityRole=\"image\"` automatically\n * - Uses `alt` prop as accessibility label\n * - Always provide meaningful `alt` text for user identification\n *\n * @see {@link Image} for general image display\n */\nconst Avatar = forwardRef<View, AvatarProps>(function Avatar(\n  {\n    src,\n    alt,\n    fallback,\n    size = 'md',\n    variant = 'primary',\n    icon,\n    abbreviationStrategy = 'firstAndLast',\n    style,\n    ...props\n  },\n  ref,\n) {\n  const [imageError, setImageError] = useState(false);\n\n  const initials = fallback || generateInitials(alt, abbreviationStrategy);\n\n  const hasImage = src && !imageError;\n  const hasText = initials.length > 0;\n  const showImage = hasImage;\n  const showText = !hasImage && hasText;\n  const showIcon = !hasImage && !hasText;\n\n  avatarStyles.useVariants({\n    size,\n    ...(showImage && { image: variant }),\n    ...(showText && { text: variant }),\n    ...(showIcon && { icon: variant }),\n  });\n\n  return (\n    <Box\n      ref={ref}\n      style={[\n        avatarStyles.root,\n        { alignItems: 'center', justifyContent: 'center', overflow: 'hidden' },\n        style,\n      ]}\n      accessibilityRole=\"image\"\n      accessibilityLabel={alt}\n      {...props}\n    >\n      {showImage && (\n        <RNImage\n          source={{ uri: src }}\n          style={{ width: '100%', height: '100%' }}\n          onError={() => setImageError(true)}\n          accessibilityLabel={alt}\n        />\n      )}\n\n      {showText && (\n        <Text style={avatarStyles.text} numberOfLines={1}>\n          {initials}\n        </Text>\n      )}\n\n      {showIcon && <IconSlot icon={icon ?? 'Person'} variant=\"fill\" style={avatarStyles.icon} />}\n    </Box>\n  );\n});\n\nAvatar.displayName = 'Avatar';\n\nexport { Avatar, type AvatarProps };\n"],"mappings":";;;;;;;;;;AA2CA,MAAM,yBAGF;CACF,QAAQ,aAAa,SAAS,MAAM;CACpC,OAAO,aAAa,SAAS,SAAS,SAAS,MAAM;CACrD,eAAe,aACb,SAAS,WAAW,IAAK,SAAS,MAAM,KAAM,GAAG,SAAS,KAAK,SAAS,SAAS,SAAS;CAC5F,WAAW,aAAa,SAAS,MAAM,GAAG,EAAE,CAAC,KAAK,GAAG;CACrD,aAAa,aAAa,SAAS,MAAM,GAAG,EAAE,CAAC,KAAK,GAAG;CACvD,cAAc,aAAa,SAAS,KAAK,GAAG;CAC7C;;AAGD,SAAS,iBAAiB,MAAe,WAAiC,gBAAwB;AAChG,KAAI,CAAC,KACH,QAAO;AAGT,KAAI,OAAO,aAAa,WACtB,QAAO,SAAS,KAAK;CAIvB,MAAM,WADQ,KAAK,MAAM,CAAC,MAAM,MAAM,CACf,KAAK,SAAS,KAAK,IAAI,aAAa,IAAI,GAAG;AAElE,QAAO,uBAAuB,UAAU,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCnD,MAAM,SAAS,WAA8B,SAAS,OACpD,EACE,KACA,KACA,UACA,OAAO,MACP,UAAU,WACV,MACA,uBAAuB,gBACvB,OACA,GAAG,SAEL,KACA;CACA,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAEnD,MAAM,WAAW,YAAY,iBAAiB,KAAK,qBAAqB;CAExE,MAAM,WAAW,OAAO,CAAC;CACzB,MAAM,UAAU,SAAS,SAAS;CAClC,MAAM,YAAY;CAClB,MAAM,WAAW,CAAC,YAAY;CAC9B,MAAM,WAAW,CAAC,YAAY,CAAC;AAE/B,cAAa,YAAY;EACvB;EACA,GAAI,aAAa,EAAE,OAAO,SAAS;EACnC,GAAI,YAAY,EAAE,MAAM,SAAS;EACjC,GAAI,YAAY,EAAE,MAAM,SAAS;EAClC,CAAC;AAEF,QACE,qBAAC;EACM;EACL,OAAO;GACL,aAAa;GACb;IAAE,YAAY;IAAU,gBAAgB;IAAU,UAAU;IAAU;GACtE;GACD;EACD,mBAAkB;EAClB,oBAAoB;EACpB,GAAI;;GAEH,aACC,oBAACA;IACC,QAAQ,EAAE,KAAK,KAAK;IACpB,OAAO;KAAE,OAAO;KAAQ,QAAQ;KAAQ;IACxC,eAAe,cAAc,KAAK;IAClC,oBAAoB;KACpB;GAGH,YACC,oBAACC;IAAK,OAAO,aAAa;IAAM,eAAe;cAC5C;KACI;GAGR,YAAY,oBAAC;IAAS,MAAM,QAAQ;IAAU,SAAQ;IAAO,OAAO,aAAa;KAAQ;;GACtF;EAER;AAEF,OAAO,cAAc"}

package/dist/components/{Badge.d.mts → Badge.d.ts}

@@ -1,6 +1,6 @@
 
-import { BadgeSize, BadgeVariant } from "../types/dist/index.mjs";
-import { IconSlotType } from "./IconSlot.mjs";
+import { BadgeSize, BadgeVariant } from "../types/dist/index.js";
+import { IconSlotType } from "./IconSlot.js";
 import * as react from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
@@ -58,4 +58,4 @@ interface BadgeProps extends ViewProps {
 declare const Badge: react.NamedExoticComponent<BadgeProps>;
 //#endregion
 export { Badge, type BadgeProps };
-//# sourceMappingURL=Badge.d.mts.map
+//# sourceMappingURL=Badge.d.ts.map

package/dist/components/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","names":[],"sources":["../../src/components/Badge.tsx"],"mappings":";;;;;;;;UAWU,UAAA,SAAmB,SAAA;;EAE3B,OAAA,GAAU,YAAA;EAFF;EAIR,IAAA,GAAO,SAAA;;EAEP,QAAA;EAFO;EAIP,QAAA;EAIU;EAFV,SAAA,GAAY,YAAA;EAYN;EAVN,OAAA,GAAU,YAAA;EAZ0B;EAcpC,6BAAA;EAd2B;EAgB3B,mBAAA;EAdU;EAgBV,yBAAA;EAdO;EAgBP,uBAAA;EAZA;EAcA,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;cA4BV,KAAA,EAAK,KAAA,CAAA,oBAAA,CAAA,UAAA"}

package/dist/components/{Badge.mjs → Badge.js}

@@ -1,7 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-import { IconSlot } from "./IconSlot.mjs";
-import { Text } from "./Text.mjs";
-import { HStack } from "./HStack.mjs";
+import { IconSlot } from "./IconSlot.js";
+import { Text } from "./Text.js";
+import { HStack } from "./HStack.js";
 import { memo, useMemo } from "react";
 import { badgeStyles } from "../../generated/styles";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -75,4 +75,4 @@ Badge.displayName = "Badge";
 
 //#endregion
 export { Badge };
-//# sourceMappingURL=Badge.mjs.map
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","names":[],"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  /** The visual style variant of the badge. @default 'primary' */\n  variant?: BadgeVariant;\n  /** The size of the badge. @default 'md' */\n  size?: BadgeSize;\n  /** Minimum width of the badge in pixels. */\n  minWidth?: number;\n  /** Maximum width of the badge in pixels. @default 200 */\n  maxWidth?: number;\n  /** Icon to display at the start of the badge. */\n  startIcon?: IconSlotType;\n  /** Icon to display at the end of the badge. */\n  endIcon?: IconSlotType;\n  /** Override the background color. Use sparingly. */\n  dangerouslySetBackgroundColor?: string;\n  /** Override the text color. Use sparingly. */\n  dangerouslySetColor?: string;\n  /** Override the border color. Use sparingly. */\n  dangerouslySetBorderColor?: string;\n  /** Override the icon color. Use sparingly. */\n  dangerouslySetIconColor?: string;\n  /** Ref to the underlying View component. */\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 * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Badge } from '@yahoo/uds-mobile';\n *\n * <Badge>Label</Badge>\n * <Badge variant=\"brand\" size=\"sm\">New</Badge>\n * <Badge variant=\"alert\" startIcon=\"Warning\">Error</Badge>\n * ```\n *\n * @accessibility\n * - Badge content is read by screen readers\n * - Use descriptive text for status indicators\n * - Consider `accessibilityLabel` for icon-only badges\n *\n * @see {@link Chip} for interactive tag-like elements\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,MAAM,QAAQ,KAAK,SAAS,MAAM,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/BlurTarget.cjs

@@ -0,0 +1,89 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+let react = require("react");
+let react_native = require("react-native");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/BlurTarget.tsx
+let BlurTargetView = null;
+let blurTargetLoadState = "pending";
+const blurTargetLoadListeners = [];
+import("expo-blur").then((mod) => {
+	BlurTargetView = mod.BlurTargetView;
+	blurTargetLoadState = "loaded";
+	blurTargetLoadListeners.forEach((cb) => cb());
+}).catch(() => {
+	blurTargetLoadState = "failed";
+	blurTargetLoadListeners.forEach((cb) => cb());
+});
+/** Hook to get BlurTargetView component, re-renders when loaded */
+function useBlurTargetView() {
+	const [, forceUpdate] = (0, react.useState)(0);
+	(0, react.useEffect)(() => {
+		if (blurTargetLoadState === "pending") {
+			const listener = () => forceUpdate((n) => n + 1);
+			blurTargetLoadListeners.push(listener);
+			return () => {
+				const idx = blurTargetLoadListeners.indexOf(listener);
+				if (idx >= 0) blurTargetLoadListeners.splice(idx, 1);
+			};
+		}
+	}, []);
+	return BlurTargetView;
+}
+/**
+* **🔲 Wrapper for content that can be blurred**
+*
+* @description
+* When using blur effects (via the `blur` prop or elevation with blur configured),
+* wrap the content you want to blur in this component and pass its ref to Box's `blurTarget` prop.
+*
+* BlurTarget handles platform differences internally - on iOS it renders children directly,
+* on Android it wraps them in the native view required for blur to work.
+*
+* @example
+* ```tsx
+* import { BlurTarget } from '@yahoo/uds-mobile/BlurTarget';
+* import { Box, Text } from '@yahoo/uds-mobile';
+* import { useRef } from 'react';
+* import type { View } from 'react-native';
+*
+* function MyComponent() {
+*   const blurTargetRef = useRef<View>(null);
+*
+*   return (
+*     <Box flex="1">
+*       <BlurTarget ref={blurTargetRef} fill>
+*         <Image source={backgroundImage} />
+*       </BlurTarget>
+*
+*       <Box blur={50} blurTarget={blurTargetRef} borderRadius="lg" spacing="4">
+*         <Text>Overlay content</Text>
+*       </Box>
+*     </Box>
+*   );
+* }
+* ```
+*
+* @see {@link https://docs.expo.dev/versions/latest/sdk/blur-view/} expo-blur documentation
+*/
+const BlurTarget = (0, react.forwardRef)(function BlurTarget({ children, fill, style }, ref) {
+	const BlurTargetViewComponent = useBlurTargetView();
+	const resolvedStyle = fill ? [react_native.StyleSheet.absoluteFill, style] : style;
+	if (react_native.Platform.OS === "android" && BlurTargetViewComponent) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BlurTargetViewComponent, {
+		ref,
+		style: resolvedStyle,
+		children
+	});
+	if (resolvedStyle || ref) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+		ref,
+		style: resolvedStyle,
+		children
+	});
+	return children;
+});
+BlurTarget.displayName = "BlurTarget";
+
+//#endregion
+exports.BlurTarget = BlurTarget;

package/dist/components/BlurTarget.d.cts

@@ -0,0 +1,52 @@
+
+import * as react from "react";
+import { ReactNode } from "react";
+import { View, ViewStyle } from "react-native";
+
+//#region src/components/BlurTarget.d.ts
+interface BlurTargetProps {
+  children: ReactNode;
+  /** Fill the parent container (applies absoluteFill positioning) */
+  fill?: boolean;
+  style?: ViewStyle;
+}
+/**
+ * **🔲 Wrapper for content that can be blurred**
+ *
+ * @description
+ * When using blur effects (via the `blur` prop or elevation with blur configured),
+ * wrap the content you want to blur in this component and pass its ref to Box's `blurTarget` prop.
+ *
+ * BlurTarget handles platform differences internally - on iOS it renders children directly,
+ * on Android it wraps them in the native view required for blur to work.
+ *
+ * @example
+ * ```tsx
+ * import { BlurTarget } from '@yahoo/uds-mobile/BlurTarget';
+ * import { Box, Text } from '@yahoo/uds-mobile';
+ * import { useRef } from 'react';
+ * import type { View } from 'react-native';
+ *
+ * function MyComponent() {
+ *   const blurTargetRef = useRef<View>(null);
+ *
+ *   return (
+ *     <Box flex="1">
+ *       <BlurTarget ref={blurTargetRef} fill>
+ *         <Image source={backgroundImage} />
+ *       </BlurTarget>
+ *
+ *       <Box blur={50} blurTarget={blurTargetRef} borderRadius="lg" spacing="4">
+ *         <Text>Overlay content</Text>
+ *       </Box>
+ *     </Box>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link https://docs.expo.dev/versions/latest/sdk/blur-view/} expo-blur documentation
+ */
+declare const BlurTarget: react.ForwardRefExoticComponent<BlurTargetProps & react.RefAttributes<View | null>>;
+//#endregion
+export { BlurTarget, type BlurTargetProps };
+//# sourceMappingURL=BlurTarget.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlurTarget.d.cts","names":[],"sources":["../../src/components/BlurTarget.tsx"],"mappings":";;;;;;UAkDU,eAAA;EACR,QAAA,EAAU,SAAA;EADF;EAGR,IAAA;EACA,KAAA,GAAQ,SAAA;AAAA;;;;;;;;AAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAuCb,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,KAAA,CAAA,aAAA,CAAA,IAAA"}

package/dist/components/BlurTarget.d.ts

@@ -0,0 +1,52 @@
+
+import * as react from "react";
+import { ReactNode } from "react";
+import { View, ViewStyle } from "react-native";
+
+//#region src/components/BlurTarget.d.ts
+interface BlurTargetProps {
+  children: ReactNode;
+  /** Fill the parent container (applies absoluteFill positioning) */
+  fill?: boolean;
+  style?: ViewStyle;
+}
+/**
+ * **🔲 Wrapper for content that can be blurred**
+ *
+ * @description
+ * When using blur effects (via the `blur` prop or elevation with blur configured),
+ * wrap the content you want to blur in this component and pass its ref to Box's `blurTarget` prop.
+ *
+ * BlurTarget handles platform differences internally - on iOS it renders children directly,
+ * on Android it wraps them in the native view required for blur to work.
+ *
+ * @example
+ * ```tsx
+ * import { BlurTarget } from '@yahoo/uds-mobile/BlurTarget';
+ * import { Box, Text } from '@yahoo/uds-mobile';
+ * import { useRef } from 'react';
+ * import type { View } from 'react-native';
+ *
+ * function MyComponent() {
+ *   const blurTargetRef = useRef<View>(null);
+ *
+ *   return (
+ *     <Box flex="1">
+ *       <BlurTarget ref={blurTargetRef} fill>
+ *         <Image source={backgroundImage} />
+ *       </BlurTarget>
+ *
+ *       <Box blur={50} blurTarget={blurTargetRef} borderRadius="lg" spacing="4">
+ *         <Text>Overlay content</Text>
+ *       </Box>
+ *     </Box>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link https://docs.expo.dev/versions/latest/sdk/blur-view/} expo-blur documentation
+ */
+declare const BlurTarget: react.ForwardRefExoticComponent<BlurTargetProps & react.RefAttributes<View | null>>;
+//#endregion
+export { BlurTarget, type BlurTargetProps };
+//# sourceMappingURL=BlurTarget.d.ts.map

package/dist/components/BlurTarget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlurTarget.d.ts","names":[],"sources":["../../src/components/BlurTarget.tsx"],"mappings":";;;;;;UAkDU,eAAA;EACR,QAAA,EAAU,SAAA;EADF;EAGR,IAAA;EACA,KAAA,GAAQ,SAAA;AAAA;;;;;;;;AAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAuCb,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,KAAA,CAAA,aAAA,CAAA,IAAA"}

package/dist/components/BlurTarget.js

@@ -0,0 +1,88 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { forwardRef, useEffect, useState } from "react";
+import { Platform, StyleSheet, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/BlurTarget.tsx
+let BlurTargetView = null;
+let blurTargetLoadState = "pending";
+const blurTargetLoadListeners = [];
+import("expo-blur").then((mod) => {
+	BlurTargetView = mod.BlurTargetView;
+	blurTargetLoadState = "loaded";
+	blurTargetLoadListeners.forEach((cb) => cb());
+}).catch(() => {
+	blurTargetLoadState = "failed";
+	blurTargetLoadListeners.forEach((cb) => cb());
+});
+/** Hook to get BlurTargetView component, re-renders when loaded */
+function useBlurTargetView() {
+	const [, forceUpdate] = useState(0);
+	useEffect(() => {
+		if (blurTargetLoadState === "pending") {
+			const listener = () => forceUpdate((n) => n + 1);
+			blurTargetLoadListeners.push(listener);
+			return () => {
+				const idx = blurTargetLoadListeners.indexOf(listener);
+				if (idx >= 0) blurTargetLoadListeners.splice(idx, 1);
+			};
+		}
+	}, []);
+	return BlurTargetView;
+}
+/**
+* **🔲 Wrapper for content that can be blurred**
+*
+* @description
+* When using blur effects (via the `blur` prop or elevation with blur configured),
+* wrap the content you want to blur in this component and pass its ref to Box's `blurTarget` prop.
+*
+* BlurTarget handles platform differences internally - on iOS it renders children directly,
+* on Android it wraps them in the native view required for blur to work.
+*
+* @example
+* ```tsx
+* import { BlurTarget } from '@yahoo/uds-mobile/BlurTarget';
+* import { Box, Text } from '@yahoo/uds-mobile';
+* import { useRef } from 'react';
+* import type { View } from 'react-native';
+*
+* function MyComponent() {
+*   const blurTargetRef = useRef<View>(null);
+*
+*   return (
+*     <Box flex="1">
+*       <BlurTarget ref={blurTargetRef} fill>
+*         <Image source={backgroundImage} />
+*       </BlurTarget>
+*
+*       <Box blur={50} blurTarget={blurTargetRef} borderRadius="lg" spacing="4">
+*         <Text>Overlay content</Text>
+*       </Box>
+*     </Box>
+*   );
+* }
+* ```
+*
+* @see {@link https://docs.expo.dev/versions/latest/sdk/blur-view/} expo-blur documentation
+*/
+const BlurTarget = forwardRef(function BlurTarget({ children, fill, style }, ref) {
+	const BlurTargetViewComponent = useBlurTargetView();
+	const resolvedStyle = fill ? [StyleSheet.absoluteFill, style] : style;
+	if (Platform.OS === "android" && BlurTargetViewComponent) return /* @__PURE__ */ jsx(BlurTargetViewComponent, {
+		ref,
+		style: resolvedStyle,
+		children
+	});
+	if (resolvedStyle || ref) return /* @__PURE__ */ jsx(View, {
+		ref,
+		style: resolvedStyle,
+		children
+	});
+	return children;
+});
+BlurTarget.displayName = "BlurTarget";
+
+//#endregion
+export { BlurTarget };
+//# sourceMappingURL=BlurTarget.js.map

package/dist/components/BlurTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlurTarget.js","names":[],"sources":["../../src/components/BlurTarget.tsx"],"sourcesContent":["import type { ComponentType, ReactNode, RefObject } from 'react';\nimport { forwardRef, useEffect, useState } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { Platform, StyleSheet, View } from 'react-native';\n\n/** Props for expo-blur's BlurTargetView component */\ninterface BlurTargetViewProps {\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n  ref?: RefObject<View | null>;\n}\n\n// Optional expo-blur dependency - loaded via dynamic import for Metro compatibility\n// Metro can statically analyze import() and will include expo-blur in the bundle if installed\nlet BlurTargetView: ComponentType<BlurTargetViewProps> | null = null;\nlet blurTargetLoadState: 'pending' | 'loaded' | 'failed' = 'pending';\nconst blurTargetLoadListeners: (() => void)[] = [];\n\n// Start loading expo-blur immediately (Metro will bundle it if installed)\nimport('expo-blur')\n  .then((mod) => {\n    BlurTargetView = mod.BlurTargetView;\n    blurTargetLoadState = 'loaded';\n    blurTargetLoadListeners.forEach((cb) => cb());\n  })\n  .catch(() => {\n    blurTargetLoadState = 'failed';\n    blurTargetLoadListeners.forEach((cb) => cb());\n  });\n\n/** Hook to get BlurTargetView component, re-renders when loaded */\nfunction useBlurTargetView() {\n  const [, forceUpdate] = useState(0);\n\n  useEffect(() => {\n    if (blurTargetLoadState === 'pending') {\n      const listener = () => forceUpdate((n) => n + 1);\n      blurTargetLoadListeners.push(listener);\n      return () => {\n        const idx = blurTargetLoadListeners.indexOf(listener);\n        if (idx >= 0) {\n          blurTargetLoadListeners.splice(idx, 1);\n        }\n      };\n    }\n  }, []);\n\n  return BlurTargetView;\n}\n\ninterface BlurTargetProps {\n  children: ReactNode;\n  /** Fill the parent container (applies absoluteFill positioning) */\n  fill?: boolean;\n  style?: ViewStyle;\n}\n\n/**\n * **🔲 Wrapper for content that can be blurred**\n *\n * @description\n * When using blur effects (via the `blur` prop or elevation with blur configured),\n * wrap the content you want to blur in this component and pass its ref to Box's `blurTarget` prop.\n *\n * BlurTarget handles platform differences internally - on iOS it renders children directly,\n * on Android it wraps them in the native view required for blur to work.\n *\n * @example\n * ```tsx\n * import { BlurTarget } from '@yahoo/uds-mobile/BlurTarget';\n * import { Box, Text } from '@yahoo/uds-mobile';\n * import { useRef } from 'react';\n * import type { View } from 'react-native';\n *\n * function MyComponent() {\n *   const blurTargetRef = useRef<View>(null);\n *\n *   return (\n *     <Box flex=\"1\">\n *       <BlurTarget ref={blurTargetRef} fill>\n *         <Image source={backgroundImage} />\n *       </BlurTarget>\n *\n *       <Box blur={50} blurTarget={blurTargetRef} borderRadius=\"lg\" spacing=\"4\">\n *         <Text>Overlay content</Text>\n *       </Box>\n *     </Box>\n *   );\n * }\n * ```\n *\n * @see {@link https://docs.expo.dev/versions/latest/sdk/blur-view/} expo-blur documentation\n */\nconst BlurTarget = forwardRef<View | null, BlurTargetProps>(function BlurTarget(\n  { children, fill, style },\n  ref,\n) {\n  const BlurTargetViewComponent = useBlurTargetView();\n  const resolvedStyle = fill ? [StyleSheet.absoluteFill, style] : style;\n\n  // On Android with expo-blur, wrap in BlurTargetView for blur to work\n  if (Platform.OS === 'android' && BlurTargetViewComponent) {\n    return (\n      <BlurTargetViewComponent ref={ref as RefObject<View | null>} style={resolvedStyle}>\n        {children}\n      </BlurTargetViewComponent>\n    );\n  }\n\n  // On iOS (or if expo-blur not installed), wrap in View if style/ref is provided\n  // No special BlurTargetView needed - blur works automatically on iOS\n  if (resolvedStyle || ref) {\n    return (\n      <View ref={ref} style={resolvedStyle}>\n        {children}\n      </View>\n    );\n  }\n\n  // No wrapper needed if no style/ref\n  return children;\n});\n\nBlurTarget.displayName = 'BlurTarget';\n\nexport { BlurTarget, type BlurTargetProps };\n"],"mappings":";;;;;;AAcA,IAAI,iBAA4D;AAChE,IAAI,sBAAuD;AAC3D,MAAM,0BAA0C,EAAE;AAGlD,OAAO,aACJ,MAAM,QAAQ;AACb,kBAAiB,IAAI;AACrB,uBAAsB;AACtB,yBAAwB,SAAS,OAAO,IAAI,CAAC;EAC7C,CACD,YAAY;AACX,uBAAsB;AACtB,yBAAwB,SAAS,OAAO,IAAI,CAAC;EAC7C;;AAGJ,SAAS,oBAAoB;CAC3B,MAAM,GAAG,eAAe,SAAS,EAAE;AAEnC,iBAAgB;AACd,MAAI,wBAAwB,WAAW;GACrC,MAAM,iBAAiB,aAAa,MAAM,IAAI,EAAE;AAChD,2BAAwB,KAAK,SAAS;AACtC,gBAAa;IACX,MAAM,MAAM,wBAAwB,QAAQ,SAAS;AACrD,QAAI,OAAO,EACT,yBAAwB,OAAO,KAAK,EAAE;;;IAI3C,EAAE,CAAC;AAEN,QAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CT,MAAM,aAAa,WAAyC,SAAS,WACnE,EAAE,UAAU,MAAM,SAClB,KACA;CACA,MAAM,0BAA0B,mBAAmB;CACnD,MAAM,gBAAgB,OAAO,CAAC,WAAW,cAAc,MAAM,GAAG;AAGhE,KAAI,SAAS,OAAO,aAAa,wBAC/B,QACE,oBAAC;EAA6B;EAA+B,OAAO;EACjE;GACuB;AAM9B,KAAI,iBAAiB,IACnB,QACE,oBAAC;EAAU;EAAK,OAAO;EACpB;GACI;AAKX,QAAO;EACP;AAEF,WAAW,cAAc"}

package/dist/components/Box.cjs

@@ -8,6 +8,36 @@ let react_native_unistyles = require("react-native-unistyles");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Box.tsx
+let BlurView = null;
+let blurLoadState = "pending";
+const blurLoadListeners = [];
+import("expo-blur").then((mod) => {
+	BlurView = mod.BlurView;
+	blurLoadState = "loaded";
+	blurLoadListeners.forEach((cb) => cb());
+}).catch(() => {
+	blurLoadState = "failed";
+	blurLoadListeners.forEach((cb) => cb());
+});
+/** Hook to get BlurView component, re-renders when loaded */
+function useBlurView() {
+	const [, forceUpdate] = (0, react.useState)(0);
+	(0, react.useEffect)(() => {
+		if (blurLoadState === "pending") {
+			const listener = () => forceUpdate((n) => n + 1);
+			blurLoadListeners.push(listener);
+			return () => {
+				const idx = blurLoadListeners.indexOf(listener);
+				if (idx >= 0) blurLoadListeners.splice(idx, 1);
+			};
+		}
+	}, []);
+	return {
+		BlurView,
+		isLoaded: blurLoadState !== "pending",
+		isFailed: blurLoadState === "failed"
+	};
+}
 /**
 * **📦 A layout component that can be used to compose other components**
 *
@@ -36,8 +66,39 @@ 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({ 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 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, blur, blurTarget, style, ref, ...props }) {
+	const { theme, rt } = (0, react_native_unistyles.useUnistyles)();
+	const { BlurView: BlurViewComponent, isLoaded: blurIsLoaded, isFailed: blurFailed } = useBlurView();
 	const elevationAlias = elevation !== void 0 ? `elevation-${elevation}` : void 0;
+	const blurExplicitlySet = blur !== void 0;
+	const blurIntensity = (0, react.useMemo)(() => {
+		if (blur !== void 0) return blur;
+		if (elevation === void 0 || !theme.blur) return 0;
+		const blurKey = `elevation-${elevation}`;
+		return theme.blur[blurKey] ?? 0;
+	}, [
+		blur,
+		elevation,
+		theme
+	]);
+	const hasWarnedRef = (0, react.useRef)("none");
+	(0, react.useEffect)(() => {
+		if (!__DEV__ || blurIntensity === 0 || !blurIsLoaded) return;
+		if (blurFailed && hasWarnedRef.current !== "no-expo-blur") {
+			hasWarnedRef.current = "no-expo-blur";
+			console.warn("[UDS Mobile] Box: Blur effect requested but expo-blur is not installed. ");
+			return;
+		}
+		if (!blurTarget && hasWarnedRef.current !== "no-blur-target") {
+			hasWarnedRef.current = "no-blur-target";
+			console.warn("[UDS Mobile] Box: Blur effect requires a blurTarget ref. Wrap the content to blur in <BlurTarget ref={ref}> and pass the ref to blurTarget prop. See BACKGROUND_BLUR.md for details.");
+		}
+	}, [
+		blurIntensity,
+		blurTarget,
+		blurIsLoaded,
+		blurFailed
+	]);
 	const variants = {
 		backgroundColor: backgroundColor ?? elevationAlias,
 		borderRadius,
@@ -88,10 +149,35 @@ const Box = (0, react.memo)(function Box({ elevation, backgroundColor, dangerous
 	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)(() => [
-			dangerouslySetBackgroundColor ? { backgroundColor: dangerouslySetBackgroundColor } : void 0,
+	const boxStyles = (0, react.useMemo)(() => [
+		dangerouslySetBackgroundColor ? { backgroundColor: dangerouslySetBackgroundColor } : void 0,
+		dangerouslySetBorderColor ? { borderColor: dangerouslySetBorderColor } : void 0,
+		width ? { width } : void 0,
+		height ? { height } : void 0,
+		minWidth ? { minWidth } : void 0,
+		maxWidth ? { maxWidth } : void 0,
+		minHeight ? { minHeight } : void 0,
+		maxHeight ? { maxHeight } : void 0,
+		shadowStyle,
+		generated_styles.styles.foundation,
+		style
+	], [
+		dangerouslySetBackgroundColor,
+		dangerouslySetBorderColor,
+		width,
+		height,
+		minWidth,
+		maxWidth,
+		minHeight,
+		maxHeight,
+		shadowStyle,
+		generated_styles.styles.foundation,
+		style
+	]);
+	if (BlurViewComponent && (blurIntensity > 0 || blurExplicitlySet)) {
+		const isAndroid = react_native.Platform.OS === "android";
+		const blurTint = rt.themeName === "dark" ? "dark" : "light";
+		const blurStyles = isAndroid ? boxStyles : [
 			dangerouslySetBorderColor ? { borderColor: dangerouslySetBorderColor } : void 0,
 			width ? { width } : void 0,
 			height ? { height } : void 0,
@@ -100,21 +186,32 @@ const Box = (0, react.memo)(function Box({ elevation, backgroundColor, dangerous
 			minHeight ? { minHeight } : void 0,
 			maxHeight ? { maxHeight } : void 0,
 			shadowStyle,
-			generated_styles.styles.foundation,
-			style
-		], [
-			dangerouslySetBackgroundColor,
-			dangerouslySetBorderColor,
-			width,
-			height,
-			minWidth,
-			maxWidth,
-			minHeight,
-			maxHeight,
-			shadowStyle,
-			generated_styles.styles.foundation,
-			style
-		]),
+			{
+				...generated_styles.styles.foundation,
+				backgroundColor: void 0
+			},
+			style ? Array.isArray(style) ? style.map((s) => s && typeof s === "object" ? {
+				...s,
+				backgroundColor: void 0
+			} : s) : typeof style === "object" ? {
+				...style,
+				backgroundColor: void 0
+			} : style : void 0
+		];
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BlurViewComponent, {
+			ref,
+			intensity: isAndroid ? Math.min(blurIntensity * .4, 40) : blurIntensity,
+			tint: blurTint,
+			blurTarget: isAndroid ? blurTarget : void 0,
+			blurMethod: isAndroid ? "dimezisBlurView" : void 0,
+			style: blurStyles,
+			...props,
+			children: props.children
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+		ref,
+		style: boxStyles,
 		...props
 	});
 });

package/dist/components/Box.d.cts

@@ -2,7 +2,7 @@
 import { ElevationLevel } from "../types/dist/index.cjs";
 import { SizeProps } from "../types.cjs";
 import * as react from "react";
-import { Ref } from "react";
+import { Ref, RefObject } from "react";
 import { View, ViewProps } from "react-native";
 import { StyleProps } from "../../generated/styles";
 
@@ -59,6 +59,16 @@ interface BoxProps extends ViewProps, SizeProps {
   insetShadow?: StyleProps['insetShadow'];
   dangerouslySetBackgroundColor?: string;
   dangerouslySetBorderColor?: string;
+  /**
+   * Manual blur intensity (0-100). When set, renders as a BlurView.
+   * Requires `blurTarget` pointing to a BlurTarget ref wrapping the content to blur.
+   */
+  blur?: number;
+  /**
+   * Reference to a BlurTarget component wrapping the content to blur.
+   * Required when using `blur` prop or elevation with blur configured.
+   */
+  blurTarget?: RefObject<View | null>;
 }
 /**
  * **📦 A layout component that can be used to compose other components**

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"Box.d.cts","names":[],"sources":["../../src/components/Box.tsx"],"mappings":";;;;;;;;;UAmDU,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;EAJS;;;;EAST,IAAA;EA5DyB;;;;EAiEzB,UAAA,GAAa,SAAA,CAAU,IAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+BnB,GAAA,EAAG,KAAA,CAAA,oBAAA,CAAA,QAAA"}