@12-apps/ui 6.78.4 → 6.79.0

package/dist/native/data-display/Badge.js

@@ -7,6 +7,9 @@ import {
 import {
   renderTextChildren
 } from "../chunks/chunk-5GJ5OG5R.js";
+import {
+  EN_US_UI_LABELS
+} from "../chunks/chunk-SPK34J7Y.js";
 import {
   Icon
 } from "../chunks/chunk-RHD3625Y.js";
@@ -217,7 +220,8 @@ function BadgeContent({
   closable,
   content,
   idFor,
-  onClose
+  onClose,
+  closeLabel = EN_US_UI_LABELS.common.close
 }) {
   const theme = useUiTheme();
   if (variant === "dot") return null;
@@ -233,7 +237,7 @@ function BadgeContent({
       {
         testID: idFor("close"),
         role: "button",
-        "aria-label": "close",
+        "aria-label": closeLabel,
         onPress: onClose,
         style: styles.close,
         children: /* @__PURE__ */ jsx(Icon, { name: "Close", size: metrics.closeIconSize, color: text.color })
@@ -353,6 +357,7 @@ var Badge = React.forwardRef((rawProps, ref) => {
     invisible,
     closable,
     onClose,
+    closeLabel,
     icon,
     children,
     style,
@@ -394,7 +399,8 @@ var Badge = React.forwardRef((rawProps, ref) => {
             closable,
             content,
             idFor,
-            onClose: zoom.close
+            onClose: zoom.close,
+            closeLabel
           }
         )
       }

package/dist/native/data-display/Badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/data-display/Badge/Badge.native.tsx","../../../src/components/data-display/Badge/Badge.helpers.ts","../../../src/components/data-display/Badge/Badge.metrics.ts","../../../src/components/data-display/Badge/Badge.look.native.ts","../../../src/components/data-display/Badge/BadgeContent.native.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Animated, Easing, Platform, StyleSheet, View, type ViewStyle } from 'react-native';\n\nimport {\n  badgeContentOf,\n  formatCount,\n  makeBadgeTestId,\n  resolveBadgeProps,\n  type ResolvedBadgeProps,\n} from './Badge.helpers';\nimport { badgeAnchorStyle, badgeBoxStyle } from './Badge.look.native';\nimport {\n  BOUNCE,\n  CLOSE_DELAY_MS,\n  FADE_IN_SCALE,\n  PULSE,\n} from './Badge.metrics';\nimport { BadgeContent } from './BadgeContent.native';\nimport type { BadgeProps } from './Badge.types.native';\nimport { webAria } from '../../../platform/aria';\nimport { resolveTestId } from '../../../platform/test-id';\nimport { useLoopedProgress } from '../../../platform/animation';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\n\nconst nativeDriver = Platform.OS !== 'web';\ntype AnimatedStyle = Animated.WithAnimatedValue<ViewStyle>;\n\n/** MUI's `pulseAnimation`: 1 → 1.2 → 1 while the opacity dips, every two seconds. */\nfunction usePulseStyle(enabled: boolean): AnimatedStyle | null {\n  const progress = useLoopedProgress(enabled, {\n    durationMs: PULSE.durationMs,\n    easing: Easing.inOut(Easing.ease),\n  });\n  if (!enabled) return null;\n  return {\n    opacity: progress.interpolate({ inputRange: [0, 0.7, 1], outputRange: [1, PULSE.opacity, 1] }),\n    transform: [\n      { scale: progress.interpolate({ inputRange: [0, 0.7, 1], outputRange: [1, PULSE.scale, 1] }) },\n    ],\n  };\n}\n\n/** A 0→1 progress that runs once on mount, for the entrance keyframes. */\nfunction useEntrance(enabled: boolean, durationMs: number): Animated.Value {\n  const progress = React.useRef(new Animated.Value(enabled ? 0 : 1)).current;\n  React.useEffect(() => {\n    if (!enabled) return undefined;\n    progress.setValue(0);\n    const timing = Animated.timing(progress, {\n      toValue: 1,\n      duration: durationMs,\n      easing: Easing.out(Easing.ease),\n      useNativeDriver: nativeDriver,\n    });\n    timing.start();\n    return () => timing.stop();\n  }, [enabled, durationMs, progress]);\n  return progress;\n}\n\n/** `bounceAnimation` when asked for, else `fadeInScaleAnimation`; neither when neither. */\nfunction useEntranceStyle(animate: boolean, bounce: boolean): AnimatedStyle | null {\n  const progress = useEntrance(animate || bounce, bounce ? BOUNCE.durationMs : FADE_IN_SCALE.durationMs);\n  if (bounce) {\n    return {\n      transform: [\n        {\n          translateY: progress.interpolate({\n            inputRange: [0, 0.2, 0.4, 0.5, 0.6, 0.8, 1],\n            outputRange: [0, 0, -BOUNCE.lift, 0, -BOUNCE.secondLift, 0, 0],\n          }),\n        },\n        {\n          scale: progress.interpolate({\n            inputRange: [0, 0.2, 0.4, 0.5, 0.6, 0.8, 1],\n            outputRange: [1, 1, BOUNCE.scale, 1, BOUNCE.secondScale, 1, 1],\n          }),\n        },\n      ],\n    };\n  }\n  if (!animate) return null;\n  return {\n    opacity: progress.interpolate({ inputRange: [0, 1], outputRange: [0, 1] }),\n    transform: [\n      {\n        scale: progress.interpolate({\n          inputRange: [0, 0.5, 1],\n          outputRange: [FADE_IN_SCALE.from, FADE_IN_SCALE.overshoot, 1],\n        }),\n      },\n    ],\n  };\n}\n\n/** MUI's `Zoom` on close: out over 300ms, then the caller is told. */\nfunction useCloseZoom(onClose?: () => void): { style: AnimatedStyle; close: () => void } {\n  const progress = React.useRef(new Animated.Value(1)).current;\n  const close = React.useCallback(() => {\n    Animated.timing(progress, {\n      toValue: 0,\n      duration: CLOSE_DELAY_MS,\n      easing: Easing.out(Easing.ease),\n      useNativeDriver: nativeDriver,\n    }).start(({ finished }) => {\n      if (finished) onClose?.();\n    });\n  }, [onClose, progress]);\n  return { style: { opacity: progress, transform: [{ scale: progress }] }, close };\n}\n\ninterface ChipContent {\n  content: React.ReactNode;\n  /** A count that formatted away leaves nothing worth showing. */\n  hidden: boolean;\n}\n\n/** What the chip shows, and whether there is anything to show at all. */\nfunction chipContent(resolved: ResolvedBadgeProps<BadgeProps>): ChipContent {\n  const { variant, max, showZero, invisible, icon, closable } = resolved;\n  const raw = badgeContentOf(resolved);\n  const content = variant === 'count' ? formatCount(raw, { max, showZero }) : raw;\n  // The web hides the chip only when the whole run assembles to nothing\n  // (`buildBadgeContent` returns null on an empty `parts`), so a zero count\n  // still draws while an icon or a close button is left to draw with it.\n  const hasOtherParts = Boolean(icon) || Boolean(closable);\n  return {\n    content,\n    hidden:\n      Boolean(invisible) ||\n      (variant === 'count' && content === null && !showZero && !hasOtherParts),\n  };\n}\n\n/**\n * The native `Badge`: MUI's chip anchored off a corner of whatever it is\n * attached to, with the same ten variants, five sizes and content run.\n */\nexport const Badge = React.forwardRef<View, BadgeProps>((rawProps, ref) => {\n  const resolved = resolveBadgeProps(rawProps);\n  const {\n    variant,\n    size,\n    color,\n    glow,\n    pulse,\n    animate,\n    bounce,\n    max: _max,\n    showZero: _showZero,\n    position,\n    invisible,\n    closable,\n    onClose,\n    icon,\n    children,\n    style,\n    'aria-label': ariaLabel,\n    'aria-live': ariaLive = 'polite',\n    'aria-atomic': ariaAtomic = true,\n    'data-testid': _domTestId,\n    testID: _testID,\n    dataTestId: _dataTestId,\n    content: _content,\n    badgeContent: _badgeContent,\n    shimmer: _shimmer,\n    ...rest\n  } = resolved;\n  const theme = useUiTheme();\n  const badgeId = resolveTestId(resolved);\n  const idFor = makeBadgeTestId(badgeId);\n  const pulseStyle = usePulseStyle(pulse && !invisible);\n  const entrance = useEntranceStyle(animate && !bounce, bounce);\n  const zoom = useCloseZoom(onClose);\n\n  const { content, hidden } = chipContent(resolved);\n\n  return (\n    <View ref={ref} testID={badgeId || 'badge'} style={[styles.anchor, style]} {...rest}>\n      {children}\n      {hidden ? null : (\n        <View style={badgeAnchorStyle(position)}>\n          <Animated.View\n            testID={idFor('content-wrapper')}\n            aria-label={ariaLabel}\n            aria-live={ariaLive}\n            {...webAria({ 'aria-atomic': ariaAtomic ? 'true' : 'false' })}\n            style={[badgeBoxStyle(theme, { variant, size, color, glow }), entrance, pulseStyle, zoom.style]}\n          >\n            <BadgeContent\n              variant={variant}\n              size={size}\n              color={color}\n              icon={icon}\n              closable={closable}\n              content={content}\n              idFor={idFor}\n              onClose={zoom.close}\n            />\n          </Animated.View>\n        </View>\n      )}\n    </View>\n  );\n});\n\nBadge.displayName = 'Badge';\n\nconst styles = StyleSheet.create({\n  /** MUI's badge root: `inline-flex`, with the chip positioned against it. */\n  anchor: { position: 'relative', alignSelf: 'flex-start', flexDirection: 'row' },\n});\n","import type { ReactNode } from 'react';\n\nimport type { BadgeBaseProps } from './Badge.base';\n\ntype BadgeDefaultedKeys =\n  | 'variant'\n  | 'size'\n  | 'color'\n  | 'glow'\n  | 'pulse'\n  | 'animate'\n  | 'shimmer'\n  | 'bounce'\n  | 'max'\n  | 'showZero'\n  | 'position'\n  | 'closable';\n\n/**\n * Generic over the renderer's own props: the web and the native `Badge` carry\n * different extras, and both come back out untouched.\n */\nexport type ResolvedBadgeProps<P extends BadgeBaseProps = BadgeBaseProps> = P &\n  Required<Pick<BadgeBaseProps, BadgeDefaultedKeys>>;\n\nconst BADGE_DEFAULTS: Required<Pick<BadgeBaseProps, BadgeDefaultedKeys>> = {\n  variant: 'default',\n  size: 'md',\n  color: 'primary',\n  glow: false,\n  pulse: false,\n  animate: true,\n  shimmer: false,\n  bounce: false,\n  max: 99,\n  showZero: false,\n  position: 'top-right',\n  closable: false,\n};\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}` still\n// falls back to the default exactly as a destructuring default would. Applied as\n// a merge rather than destructuring defaults, which would otherwise put twelve\n// branches into the component's own complexity budget.\nexport const resolveBadgeProps = <P extends BadgeBaseProps>(props: P): ResolvedBadgeProps<P> =>\n  ({\n    ...BADGE_DEFAULTS,\n    ...(Object.fromEntries(\n      Object.entries(props).filter(([, value]) => value !== undefined),\n    ) as Partial<P>),\n  }) as ResolvedBadgeProps<P>;\n\n// `content` supersedes the older `badgeContent` prop.\nexport const badgeContentOf = (props: Pick<BadgeBaseProps, 'content' | 'badgeContent'>): ReactNode => {\n  if (props.content !== undefined) return props.content;\n  if (props.badgeContent !== undefined) return props.badgeContent;\n  return null;\n};\n\n// Counts cap at `max` and, unless showZero is set, a zero renders nothing.\nexport const formatCount = (\n  count: ReactNode,\n  { max, showZero }: { max: number; showZero: boolean },\n): ReactNode => {\n  if (typeof count !== 'number') return count;\n  if (count === 0 && !showZero) return null;\n  if (count > max) return `${max}+`;\n  return count;\n};\n\n// MUI spreads these straight onto the badge span, where an explicit undefined\n// would render as an empty attribute.\nexport const definedAria = (\n  aria: Record<string, string | boolean | undefined>,\n): Record<string, string | boolean> =>\n  Object.fromEntries(Object.entries(aria).filter(([, value]) => value !== undefined)) as Record<\n    string,\n    string | boolean\n  >;\n\n/** `${dataTestId}-content`, or `badge-content` when the caller named nothing. */\nexport const makeBadgeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `badge-${suffix}`;\n","import type { BadgePosition, BadgeSize } from './Badge.base';\nimport type { UiPaletteColor, UiTheme } from '../../../tokens/theme';\nimport type { ColorValue } from '../../../tokens/vocabulary';\n\n/**\n * THE NUMBERS BOTH `Badge` RENDERERS DRAW WITH.\n *\n * `Badge.styles.ts` / `Badge.variants.ts` (web, emotion over MUI's `Badge`) and\n * `Badge.native.tsx` (React Native) read this one table: the five chips, the\n * dot inside them, the ten variants' alphas and borders, and the keyframes.\n * The web turns the px into rem and the padding into a shorthand; native uses\n * the numbers.\n */\nexport interface BadgeSizeMetrics {\n  minWidth: number;\n  height: number;\n  /** The content's type size, in px. */\n  fontSize: number;\n  /** The chip's side padding, in px. `padding: '0 Npx'` on the web. */\n  paddingHorizontal: number;\n  dotSize: number;\n  /** A leading icon's own type size, in px. */\n  iconSize: number;\n  /** The close glyph's type size, in px. `xl` falls back to `lg`, as the web does. */\n  closeIconSize: number;\n}\n\nexport const BADGE_SIZES: Record<BadgeSize, BadgeSizeMetrics> = {\n  xs: { minWidth: 14, height: 14, fontSize: 8, paddingHorizontal: 3, dotSize: 6, iconSize: 10, closeIconSize: 8 },\n  sm: { minWidth: 16, height: 16, fontSize: 10, paddingHorizontal: 4, dotSize: 8, iconSize: 12, closeIconSize: 10 },\n  md: { minWidth: 20, height: 20, fontSize: 12, paddingHorizontal: 6, dotSize: 10, iconSize: 14, closeIconSize: 12 },\n  lg: { minWidth: 24, height: 24, fontSize: 14, paddingHorizontal: 8, dotSize: 12, iconSize: 16, closeIconSize: 14 },\n  xl: { minWidth: 28, height: 28, fontSize: 16, paddingHorizontal: 10, dotSize: 14, iconSize: 18, closeIconSize: 14 },\n};\n\n/** The chip's own type weight, its tracking, and the paper ring around it. */\nexport const BADGE_FONT_WEIGHT = 600;\nexport const BADGE_DESTRUCTIVE_FONT_WEIGHT = 700;\nexport const BADGE_LETTER_SPACING_EM = 0.025;\nexport const BADGE_BORDER_WIDTH = 2;\n/** Between the icon, the content and the close button. */\nexport const BADGE_CONTENT_GAP = 2;\n\n/* ── The ten variants' washes ─────────────────────────────────────────────── */\n\nexport const GLASS_BACKGROUND_ALPHA = 0.1;\nexport const GLASS_BORDER_ALPHA = 0.2;\nexport const GLASS_BLUR_PX = 10;\nexport const GLASS_SATURATE = 2;\nexport const GLASS_INSET_HIGHLIGHT_ALPHA = 0.1;\nexport const OUTLINE_BORDER_WIDTH = 2;\nexport const SECONDARY_BACKGROUND_ALPHA = 0.15;\nexport const SECONDARY_BORDER_ALPHA = 0.3;\n\n/* ── Emphasis and animation ───────────────────────────────────────────────── */\n\n/** `glow` without `pulse`: a 15px halo, brighter under the pointer. */\nexport const GLOW = { blur: 15, spread: 3, alpha: 0.5, hoverBlur: 20, hoverSpread: 4, hoverAlpha: 0.6, brightness: 1.1 } as const;\n/** `glow` WITH `pulse`: the halo breathes between these two. */\nexport const GLOW_PULSE = { fromBlur: 5, fromSpread: 2, fromAlpha: 0.4, toBlur: 20, toSpread: 4, toAlpha: 0.8 } as const;\n/** MUI-free `pulseAnimation`: 1 → 1.2 → 1 while the opacity dips to 0.7. */\nexport const PULSE = { durationMs: 2000, scale: 1.2, opacity: 0.7 } as const;\n/** `bounceAnimation`: up 8px at 40%, 4px at 60%, over one second. */\nexport const BOUNCE = { durationMs: 1000, lift: 8, secondLift: 4, scale: 1.05, secondScale: 1.02 } as const;\n/** `fadeInScaleAnimation`: in from half size, overshooting to 1.1. */\nexport const FADE_IN_SCALE = { durationMs: 400, from: 0.5, overshoot: 1.1 } as const;\n/** The shimmer sweep, and the white it is made of. */\nexport const SHIMMER = { durationMs: 3000, alpha: 0.4 } as const;\n/** How long the mount animation is held before the flag clears. */\nexport const MOUNT_ANIMATION_MS = 1000;\n/** MUI's `Zoom` on close, and the wait before the caller is told. */\nexport const CLOSE_DELAY_MS = 300;\n/** `transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)` on the chip. */\nexport const BADGE_TRANSITION_MS = 300;\nexport const BADGE_TRANSITION_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n/** The chip grows a tenth under the pointer. */\nexport const HOVER_SCALE = 1.1;\n\n/* ── Placement ────────────────────────────────────────────────────────────── */\n\nexport interface BadgeAnchor {\n  vertical: 'top' | 'bottom';\n  horizontal: 'left' | 'right';\n}\n\nconst BADGE_ANCHORS: Record<BadgePosition, BadgeAnchor> = {\n  'top-right': { vertical: 'top', horizontal: 'right' },\n  'top-left': { vertical: 'top', horizontal: 'left' },\n  'bottom-right': { vertical: 'bottom', horizontal: 'right' },\n  'bottom-left': { vertical: 'bottom', horizontal: 'left' },\n};\n\n/**\n * Falls back to `top-right` for anything outside the union, as the web's own\n * `positionMap[position] || positionMap['top-right']` did. Splitting on `-`\n * instead would hand MUI a half-undefined `anchorOrigin` for, say, `middle`.\n */\nexport const badgeAnchor = (position: BadgePosition): BadgeAnchor =>\n  BADGE_ANCHORS[position] ?? BADGE_ANCHORS['top-right'];\n\n/**\n * `neutral` has no palette slot of its own in MUI, so `Badge.styles.ts` draws\n * it from three greys; `danger` is MUI's `error`, which is what the shared\n * theme calls `danger`. Same colours here.\n */\nexport function badgePalette(theme: UiTheme, color: ColorValue): UiPaletteColor {\n  if (color === 'neutral') {\n    // Grey 600 / 400 / 800 under white ink: the shared theme's own `neutral`.\n    return theme.palette.neutral;\n  }\n  return theme.palette[color];\n}\n","import type { TextStyle, ViewStyle } from 'react-native';\n\nimport type { BadgePosition, BadgeSize, BadgeVariant } from './Badge.base';\nimport {\n  BADGE_BORDER_WIDTH,\n  BADGE_DESTRUCTIVE_FONT_WEIGHT,\n  BADGE_FONT_WEIGHT,\n  BADGE_LETTER_SPACING_EM,\n  BADGE_SIZES,\n  GLASS_BACKGROUND_ALPHA,\n  GLASS_BORDER_ALPHA,\n  GLOW,\n  OUTLINE_BORDER_WIDTH,\n  SECONDARY_BACKGROUND_ALPHA,\n  SECONDARY_BORDER_ALPHA,\n  badgeAnchor,\n  badgePalette,\n  type BadgeSizeMetrics,\n} from './Badge.metrics';\nimport { alpha } from '../../../tokens/color';\nimport type { UiPaletteColor, UiTheme } from '../../../tokens/theme';\nimport type { ColorValue } from '../../../tokens/vocabulary';\n\nexport interface BadgePaint {\n  box: ViewStyle;\n  ink: string;\n  fontWeight: number;\n  /** `gradient` and `glass` shout; everything else is set as written. */\n  uppercase: boolean;\n}\n\n/** The chip a variant paints, as React Native styles. */\nfunction variantPaint(\n  theme: UiTheme,\n  variant: BadgeVariant,\n  accent: UiPaletteColor,\n): BadgePaint {\n  const filled = (background: string, ink: string): BadgePaint => ({\n    box: { backgroundColor: background },\n    ink,\n    fontWeight: BADGE_FONT_WEIGHT,\n    uppercase: false,\n  });\n  switch (variant) {\n    case 'gradient':\n      // React Native core has no gradient fill: the 135° run takes its first stop.\n      return { ...filled(accent.main, '#fff'), uppercase: true };\n    case 'glass':\n      return {\n        box: {\n          backgroundColor: alpha(accent.main, GLASS_BACKGROUND_ALPHA),\n          borderWidth: 1,\n          borderColor: alpha(accent.main, GLASS_BORDER_ALPHA),\n        },\n        ink: accent.main,\n        fontWeight: BADGE_FONT_WEIGHT,\n        uppercase: true,\n      };\n    case 'outline':\n      return {\n        box: {\n          backgroundColor: 'transparent',\n          borderWidth: OUTLINE_BORDER_WIDTH,\n          borderColor: accent.main,\n        },\n        ink: accent.main,\n        fontWeight: BADGE_FONT_WEIGHT,\n        uppercase: false,\n      };\n    case 'secondary':\n      return {\n        box: {\n          backgroundColor: alpha(accent.main, SECONDARY_BACKGROUND_ALPHA),\n          borderWidth: 1,\n          borderColor: alpha(accent.main, SECONDARY_BORDER_ALPHA),\n        },\n        ink: accent.main,\n        fontWeight: BADGE_FONT_WEIGHT,\n        uppercase: false,\n      };\n    case 'destructive':\n      return {\n        ...filled(theme.palette.danger.main, theme.palette.danger.contrastText),\n        fontWeight: BADGE_DESTRUCTIVE_FONT_WEIGHT,\n      };\n    case 'success':\n      return filled(theme.palette.success.main, theme.palette.success.contrastText);\n    case 'warning':\n      return filled(theme.palette.warning.main, theme.palette.warning.contrastText);\n    default:\n      return filled(accent.main, accent.contrastText || '#fff');\n  }\n}\n\nexport interface BadgeBoxArgs {\n  variant: BadgeVariant;\n  size: BadgeSize;\n  color: ColorValue;\n  glow: boolean;\n}\n\n/**\n * Where the chip hangs: MUI's `anchorOrigin` pins it to a corner and then\n * `translate(±50%, ∓50%)` puts its CENTRE there. It is its own node so the\n * chip's animations own `transform` outright — a React Native style array\n * replaces that property rather than composing it, as CSS would.\n */\nexport function badgeAnchorStyle(position: BadgePosition): ViewStyle {\n  const anchor = badgeAnchor(position);\n  return {\n    position: 'absolute',\n    [anchor.vertical]: 0,\n    [anchor.horizontal]: 0,\n    transform: [\n      { translateX: anchor.horizontal === 'right' ? '50%' : '-50%' },\n      { translateY: anchor.vertical === 'top' ? '-50%' : '50%' },\n    ],\n  };\n}\n\n/** The chip itself: MUI's paper ring, its size, and the variant's paint. */\nexport function badgeBoxStyle(theme: UiTheme, a: BadgeBoxArgs): ViewStyle {\n  const metrics = BADGE_SIZES[a.size];\n  const accent = badgePalette(theme, a.color);\n  const paint = variantPaint(theme, a.variant, accent);\n  const dot = a.variant === 'dot';\n\n  return {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderWidth: BADGE_BORDER_WIDTH,\n    borderColor: theme.palette.background.paper,\n    ...(dot\n      ? {\n          width: metrics.dotSize,\n          height: metrics.dotSize,\n          minWidth: metrics.dotSize,\n          borderRadius: metrics.dotSize / 2,\n          backgroundColor: accent.main,\n        }\n      : {\n          minWidth: metrics.minWidth,\n          height: metrics.height,\n          paddingHorizontal: metrics.paddingHorizontal,\n          borderRadius: metrics.height / 2,\n          ...paint.box,\n        }),\n    ...(a.glow\n      ? { boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(accent.main, GLOW.alpha)}` }\n      : {}),\n  };\n}\n\n/** The chip's own type: the size's step, semibold, tracked a little wider. */\nexport function badgeTextStyle(\n  theme: UiTheme,\n  variant: BadgeVariant,\n  size: BadgeSize,\n  color: ColorValue,\n): TextStyle {\n  const metrics = BADGE_SIZES[size];\n  const paint = variantPaint(theme, variant, badgePalette(theme, color));\n  return {\n    fontFamily: theme.typography.fontFamily,\n    fontSize: metrics.fontSize,\n    fontWeight: String(paint.fontWeight) as TextStyle['fontWeight'],\n    letterSpacing: metrics.fontSize * BADGE_LETTER_SPACING_EM,\n    color: paint.ink,\n    ...(paint.uppercase ? { textTransform: 'uppercase' } : {}),\n  };\n}\n\nexport const badgeMetrics = (size: BadgeSize): BadgeSizeMetrics => BADGE_SIZES[size];\n","import * as React from 'react';\nimport { Pressable, StyleSheet, View } from 'react-native';\n\nimport type { BadgeSize, BadgeVariant } from './Badge.base';\nimport { badgeMetrics, badgeTextStyle } from './Badge.look.native';\nimport { BADGE_CONTENT_GAP } from './Badge.metrics';\nimport { Icon } from '../../../icons/Icon.native';\nimport { renderTextChildren } from '../../../platform/text-children';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport type { ColorValue } from '../../../tokens/vocabulary';\n\nexport interface BadgeContentProps {\n  variant: BadgeVariant;\n  size: BadgeSize;\n  color: ColorValue;\n  icon?: React.ReactNode;\n  closable: boolean;\n  content: React.ReactNode;\n  idFor: (suffix: string) => string;\n  onClose: () => void;\n}\n\n/**\n * The badge's inner run: optional icon, the content itself, optional close\n * button — the same three slots and the same ids `BadgeContent.tsx` builds. A\n * dot badge shows none of it.\n */\nexport function BadgeContent({\n  variant,\n  size,\n  color,\n  icon,\n  closable,\n  content,\n  idFor,\n  onClose,\n}: BadgeContentProps): React.JSX.Element | null {\n  const theme = useUiTheme();\n  if (variant === 'dot') return null;\n\n  const metrics = badgeMetrics(size);\n  const text = badgeTextStyle(theme, variant, size, color);\n  const hasContent = content !== null && content !== undefined;\n  if (!icon && !hasContent && !closable) return null;\n\n  return (\n    <View style={styles.run}>\n      {icon ? (\n        <View testID={idFor('icon')} style={{ height: metrics.iconSize, justifyContent: 'center' }}>\n          {icon}\n        </View>\n      ) : null}\n      {hasContent ? (\n        <View testID={idFor('content')} style={styles.centre}>\n          {renderTextChildren(content, text, 1)}\n        </View>\n      ) : null}\n      {closable ? (\n        <Pressable\n          testID={idFor('close')}\n          role=\"button\"\n          aria-label=\"close\"\n          onPress={onClose}\n          style={styles.close}\n        >\n          <Icon name=\"Close\" size={metrics.closeIconSize} color={text.color as string} />\n        </Pressable>\n      ) : null}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  run: { flexDirection: 'row', alignItems: 'center', gap: BADGE_CONTENT_GAP },\n  centre: { alignItems: 'center', justifyContent: 'center' },\n  /** MUI's close `IconButton` sits half a spacing unit clear of the label. */\n  close: { marginLeft: 4, alignItems: 'center', justifyContent: 'center' },\n});\n"],"mappings":"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","names":["StyleSheet","View","jsx","jsxs","View","styles","StyleSheet"]}
+{"version":3,"sources":["../../../src/components/data-display/Badge/Badge.native.tsx","../../../src/components/data-display/Badge/Badge.helpers.ts","../../../src/components/data-display/Badge/Badge.metrics.ts","../../../src/components/data-display/Badge/Badge.look.native.ts","../../../src/components/data-display/Badge/BadgeContent.native.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Animated, Easing, Platform, StyleSheet, View, type ViewStyle } from 'react-native';\n\nimport {\n  badgeContentOf,\n  formatCount,\n  makeBadgeTestId,\n  resolveBadgeProps,\n  type ResolvedBadgeProps,\n} from './Badge.helpers';\nimport { badgeAnchorStyle, badgeBoxStyle } from './Badge.look.native';\nimport {\n  BOUNCE,\n  CLOSE_DELAY_MS,\n  FADE_IN_SCALE,\n  PULSE,\n} from './Badge.metrics';\nimport { BadgeContent } from './BadgeContent.native';\nimport type { BadgeProps } from './Badge.types.native';\nimport { webAria } from '../../../platform/aria';\nimport { resolveTestId } from '../../../platform/test-id';\nimport { useLoopedProgress } from '../../../platform/animation';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\n\nconst nativeDriver = Platform.OS !== 'web';\ntype AnimatedStyle = Animated.WithAnimatedValue<ViewStyle>;\n\n/** MUI's `pulseAnimation`: 1 → 1.2 → 1 while the opacity dips, every two seconds. */\nfunction usePulseStyle(enabled: boolean): AnimatedStyle | null {\n  const progress = useLoopedProgress(enabled, {\n    durationMs: PULSE.durationMs,\n    easing: Easing.inOut(Easing.ease),\n  });\n  if (!enabled) return null;\n  return {\n    opacity: progress.interpolate({ inputRange: [0, 0.7, 1], outputRange: [1, PULSE.opacity, 1] }),\n    transform: [\n      { scale: progress.interpolate({ inputRange: [0, 0.7, 1], outputRange: [1, PULSE.scale, 1] }) },\n    ],\n  };\n}\n\n/** A 0→1 progress that runs once on mount, for the entrance keyframes. */\nfunction useEntrance(enabled: boolean, durationMs: number): Animated.Value {\n  const progress = React.useRef(new Animated.Value(enabled ? 0 : 1)).current;\n  React.useEffect(() => {\n    if (!enabled) return undefined;\n    progress.setValue(0);\n    const timing = Animated.timing(progress, {\n      toValue: 1,\n      duration: durationMs,\n      easing: Easing.out(Easing.ease),\n      useNativeDriver: nativeDriver,\n    });\n    timing.start();\n    return () => timing.stop();\n  }, [enabled, durationMs, progress]);\n  return progress;\n}\n\n/** `bounceAnimation` when asked for, else `fadeInScaleAnimation`; neither when neither. */\nfunction useEntranceStyle(animate: boolean, bounce: boolean): AnimatedStyle | null {\n  const progress = useEntrance(animate || bounce, bounce ? BOUNCE.durationMs : FADE_IN_SCALE.durationMs);\n  if (bounce) {\n    return {\n      transform: [\n        {\n          translateY: progress.interpolate({\n            inputRange: [0, 0.2, 0.4, 0.5, 0.6, 0.8, 1],\n            outputRange: [0, 0, -BOUNCE.lift, 0, -BOUNCE.secondLift, 0, 0],\n          }),\n        },\n        {\n          scale: progress.interpolate({\n            inputRange: [0, 0.2, 0.4, 0.5, 0.6, 0.8, 1],\n            outputRange: [1, 1, BOUNCE.scale, 1, BOUNCE.secondScale, 1, 1],\n          }),\n        },\n      ],\n    };\n  }\n  if (!animate) return null;\n  return {\n    opacity: progress.interpolate({ inputRange: [0, 1], outputRange: [0, 1] }),\n    transform: [\n      {\n        scale: progress.interpolate({\n          inputRange: [0, 0.5, 1],\n          outputRange: [FADE_IN_SCALE.from, FADE_IN_SCALE.overshoot, 1],\n        }),\n      },\n    ],\n  };\n}\n\n/** MUI's `Zoom` on close: out over 300ms, then the caller is told. */\nfunction useCloseZoom(onClose?: () => void): { style: AnimatedStyle; close: () => void } {\n  const progress = React.useRef(new Animated.Value(1)).current;\n  const close = React.useCallback(() => {\n    Animated.timing(progress, {\n      toValue: 0,\n      duration: CLOSE_DELAY_MS,\n      easing: Easing.out(Easing.ease),\n      useNativeDriver: nativeDriver,\n    }).start(({ finished }) => {\n      if (finished) onClose?.();\n    });\n  }, [onClose, progress]);\n  return { style: { opacity: progress, transform: [{ scale: progress }] }, close };\n}\n\ninterface ChipContent {\n  content: React.ReactNode;\n  /** A count that formatted away leaves nothing worth showing. */\n  hidden: boolean;\n}\n\n/** What the chip shows, and whether there is anything to show at all. */\nfunction chipContent(resolved: ResolvedBadgeProps<BadgeProps>): ChipContent {\n  const { variant, max, showZero, invisible, icon, closable } = resolved;\n  const raw = badgeContentOf(resolved);\n  const content = variant === 'count' ? formatCount(raw, { max, showZero }) : raw;\n  // The web hides the chip only when the whole run assembles to nothing\n  // (`buildBadgeContent` returns null on an empty `parts`), so a zero count\n  // still draws while an icon or a close button is left to draw with it.\n  const hasOtherParts = Boolean(icon) || Boolean(closable);\n  return {\n    content,\n    hidden:\n      Boolean(invisible) ||\n      (variant === 'count' && content === null && !showZero && !hasOtherParts),\n  };\n}\n\n/**\n * The native `Badge`: MUI's chip anchored off a corner of whatever it is\n * attached to, with the same ten variants, five sizes and content run.\n */\nexport const Badge = React.forwardRef<View, BadgeProps>((rawProps, ref) => {\n  const resolved = resolveBadgeProps(rawProps);\n  const {\n    variant,\n    size,\n    color,\n    glow,\n    pulse,\n    animate,\n    bounce,\n    max: _max,\n    showZero: _showZero,\n    position,\n    invisible,\n    closable,\n    onClose,\n    closeLabel,\n    icon,\n    children,\n    style,\n    'aria-label': ariaLabel,\n    'aria-live': ariaLive = 'polite',\n    'aria-atomic': ariaAtomic = true,\n    'data-testid': _domTestId,\n    testID: _testID,\n    dataTestId: _dataTestId,\n    content: _content,\n    badgeContent: _badgeContent,\n    shimmer: _shimmer,\n    ...rest\n  } = resolved;\n  const theme = useUiTheme();\n  const badgeId = resolveTestId(resolved);\n  const idFor = makeBadgeTestId(badgeId);\n  const pulseStyle = usePulseStyle(pulse && !invisible);\n  const entrance = useEntranceStyle(animate && !bounce, bounce);\n  const zoom = useCloseZoom(onClose);\n\n  const { content, hidden } = chipContent(resolved);\n\n  return (\n    <View ref={ref} testID={badgeId || 'badge'} style={[styles.anchor, style]} {...rest}>\n      {children}\n      {hidden ? null : (\n        <View style={badgeAnchorStyle(position)}>\n          <Animated.View\n            testID={idFor('content-wrapper')}\n            aria-label={ariaLabel}\n            aria-live={ariaLive}\n            {...webAria({ 'aria-atomic': ariaAtomic ? 'true' : 'false' })}\n            style={[badgeBoxStyle(theme, { variant, size, color, glow }), entrance, pulseStyle, zoom.style]}\n          >\n            <BadgeContent\n              variant={variant}\n              size={size}\n              color={color}\n              icon={icon}\n              closable={closable}\n              content={content}\n              idFor={idFor}\n              onClose={zoom.close}\n              closeLabel={closeLabel}\n            />\n          </Animated.View>\n        </View>\n      )}\n    </View>\n  );\n});\n\nBadge.displayName = 'Badge';\n\nconst styles = StyleSheet.create({\n  /** MUI's badge root: `inline-flex`, with the chip positioned against it. */\n  anchor: { position: 'relative', alignSelf: 'flex-start', flexDirection: 'row' },\n});\n","import type { ReactNode } from 'react';\n\nimport type { BadgeBaseProps } from './Badge.base';\n\ntype BadgeDefaultedKeys =\n  | 'variant'\n  | 'size'\n  | 'color'\n  | 'glow'\n  | 'pulse'\n  | 'animate'\n  | 'shimmer'\n  | 'bounce'\n  | 'max'\n  | 'showZero'\n  | 'position'\n  | 'closable';\n\n/**\n * Generic over the renderer's own props: the web and the native `Badge` carry\n * different extras, and both come back out untouched.\n */\nexport type ResolvedBadgeProps<P extends BadgeBaseProps = BadgeBaseProps> = P &\n  Required<Pick<BadgeBaseProps, BadgeDefaultedKeys>>;\n\nconst BADGE_DEFAULTS: Required<Pick<BadgeBaseProps, BadgeDefaultedKeys>> = {\n  variant: 'default',\n  size: 'md',\n  color: 'primary',\n  glow: false,\n  pulse: false,\n  animate: true,\n  shimmer: false,\n  bounce: false,\n  max: 99,\n  showZero: false,\n  position: 'top-right',\n  closable: false,\n};\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}` still\n// falls back to the default exactly as a destructuring default would. Applied as\n// a merge rather than destructuring defaults, which would otherwise put twelve\n// branches into the component's own complexity budget.\nexport const resolveBadgeProps = <P extends BadgeBaseProps>(props: P): ResolvedBadgeProps<P> =>\n  ({\n    ...BADGE_DEFAULTS,\n    ...(Object.fromEntries(\n      Object.entries(props).filter(([, value]) => value !== undefined),\n    ) as Partial<P>),\n  }) as ResolvedBadgeProps<P>;\n\n// `content` supersedes the older `badgeContent` prop.\nexport const badgeContentOf = (props: Pick<BadgeBaseProps, 'content' | 'badgeContent'>): ReactNode => {\n  if (props.content !== undefined) return props.content;\n  if (props.badgeContent !== undefined) return props.badgeContent;\n  return null;\n};\n\n// Counts cap at `max` and, unless showZero is set, a zero renders nothing.\nexport const formatCount = (\n  count: ReactNode,\n  { max, showZero }: { max: number; showZero: boolean },\n): ReactNode => {\n  if (typeof count !== 'number') return count;\n  if (count === 0 && !showZero) return null;\n  if (count > max) return `${max}+`;\n  return count;\n};\n\n// MUI spreads these straight onto the badge span, where an explicit undefined\n// would render as an empty attribute.\nexport const definedAria = (\n  aria: Record<string, string | boolean | undefined>,\n): Record<string, string | boolean> =>\n  Object.fromEntries(Object.entries(aria).filter(([, value]) => value !== undefined)) as Record<\n    string,\n    string | boolean\n  >;\n\n/** `${dataTestId}-content`, or `badge-content` when the caller named nothing. */\nexport const makeBadgeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `badge-${suffix}`;\n","import type { BadgePosition, BadgeSize } from './Badge.base';\nimport type { UiPaletteColor, UiTheme } from '../../../tokens/theme';\nimport type { ColorValue } from '../../../tokens/vocabulary';\n\n/**\n * THE NUMBERS BOTH `Badge` RENDERERS DRAW WITH.\n *\n * `Badge.styles.ts` / `Badge.variants.ts` (web, emotion over MUI's `Badge`) and\n * `Badge.native.tsx` (React Native) read this one table: the five chips, the\n * dot inside them, the ten variants' alphas and borders, and the keyframes.\n * The web turns the px into rem and the padding into a shorthand; native uses\n * the numbers.\n */\nexport interface BadgeSizeMetrics {\n  minWidth: number;\n  height: number;\n  /** The content's type size, in px. */\n  fontSize: number;\n  /** The chip's side padding, in px. `padding: '0 Npx'` on the web. */\n  paddingHorizontal: number;\n  dotSize: number;\n  /** A leading icon's own type size, in px. */\n  iconSize: number;\n  /** The close glyph's type size, in px. `xl` falls back to `lg`, as the web does. */\n  closeIconSize: number;\n}\n\nexport const BADGE_SIZES: Record<BadgeSize, BadgeSizeMetrics> = {\n  xs: { minWidth: 14, height: 14, fontSize: 8, paddingHorizontal: 3, dotSize: 6, iconSize: 10, closeIconSize: 8 },\n  sm: { minWidth: 16, height: 16, fontSize: 10, paddingHorizontal: 4, dotSize: 8, iconSize: 12, closeIconSize: 10 },\n  md: { minWidth: 20, height: 20, fontSize: 12, paddingHorizontal: 6, dotSize: 10, iconSize: 14, closeIconSize: 12 },\n  lg: { minWidth: 24, height: 24, fontSize: 14, paddingHorizontal: 8, dotSize: 12, iconSize: 16, closeIconSize: 14 },\n  xl: { minWidth: 28, height: 28, fontSize: 16, paddingHorizontal: 10, dotSize: 14, iconSize: 18, closeIconSize: 14 },\n};\n\n/** The chip's own type weight, its tracking, and the paper ring around it. */\nexport const BADGE_FONT_WEIGHT = 600;\nexport const BADGE_DESTRUCTIVE_FONT_WEIGHT = 700;\nexport const BADGE_LETTER_SPACING_EM = 0.025;\nexport const BADGE_BORDER_WIDTH = 2;\n/** Between the icon, the content and the close button. */\nexport const BADGE_CONTENT_GAP = 2;\n\n/* ── The ten variants' washes ─────────────────────────────────────────────── */\n\nexport const GLASS_BACKGROUND_ALPHA = 0.1;\nexport const GLASS_BORDER_ALPHA = 0.2;\nexport const GLASS_BLUR_PX = 10;\nexport const GLASS_SATURATE = 2;\nexport const GLASS_INSET_HIGHLIGHT_ALPHA = 0.1;\nexport const OUTLINE_BORDER_WIDTH = 2;\nexport const SECONDARY_BACKGROUND_ALPHA = 0.15;\nexport const SECONDARY_BORDER_ALPHA = 0.3;\n\n/* ── Emphasis and animation ───────────────────────────────────────────────── */\n\n/** `glow` without `pulse`: a 15px halo, brighter under the pointer. */\nexport const GLOW = { blur: 15, spread: 3, alpha: 0.5, hoverBlur: 20, hoverSpread: 4, hoverAlpha: 0.6, brightness: 1.1 } as const;\n/** `glow` WITH `pulse`: the halo breathes between these two. */\nexport const GLOW_PULSE = { fromBlur: 5, fromSpread: 2, fromAlpha: 0.4, toBlur: 20, toSpread: 4, toAlpha: 0.8 } as const;\n/** MUI-free `pulseAnimation`: 1 → 1.2 → 1 while the opacity dips to 0.7. */\nexport const PULSE = { durationMs: 2000, scale: 1.2, opacity: 0.7 } as const;\n/** `bounceAnimation`: up 8px at 40%, 4px at 60%, over one second. */\nexport const BOUNCE = { durationMs: 1000, lift: 8, secondLift: 4, scale: 1.05, secondScale: 1.02 } as const;\n/** `fadeInScaleAnimation`: in from half size, overshooting to 1.1. */\nexport const FADE_IN_SCALE = { durationMs: 400, from: 0.5, overshoot: 1.1 } as const;\n/** The shimmer sweep, and the white it is made of. */\nexport const SHIMMER = { durationMs: 3000, alpha: 0.4 } as const;\n/** How long the mount animation is held before the flag clears. */\nexport const MOUNT_ANIMATION_MS = 1000;\n/** MUI's `Zoom` on close, and the wait before the caller is told. */\nexport const CLOSE_DELAY_MS = 300;\n/** `transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)` on the chip. */\nexport const BADGE_TRANSITION_MS = 300;\nexport const BADGE_TRANSITION_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n/** The chip grows a tenth under the pointer. */\nexport const HOVER_SCALE = 1.1;\n\n/* ── Placement ────────────────────────────────────────────────────────────── */\n\nexport interface BadgeAnchor {\n  vertical: 'top' | 'bottom';\n  horizontal: 'left' | 'right';\n}\n\nconst BADGE_ANCHORS: Record<BadgePosition, BadgeAnchor> = {\n  'top-right': { vertical: 'top', horizontal: 'right' },\n  'top-left': { vertical: 'top', horizontal: 'left' },\n  'bottom-right': { vertical: 'bottom', horizontal: 'right' },\n  'bottom-left': { vertical: 'bottom', horizontal: 'left' },\n};\n\n/**\n * Falls back to `top-right` for anything outside the union, as the web's own\n * `positionMap[position] || positionMap['top-right']` did. Splitting on `-`\n * instead would hand MUI a half-undefined `anchorOrigin` for, say, `middle`.\n */\nexport const badgeAnchor = (position: BadgePosition): BadgeAnchor =>\n  BADGE_ANCHORS[position] ?? BADGE_ANCHORS['top-right'];\n\n/**\n * `neutral` has no palette slot of its own in MUI, so `Badge.styles.ts` draws\n * it from three greys; `danger` is MUI's `error`, which is what the shared\n * theme calls `danger`. Same colours here.\n */\nexport function badgePalette(theme: UiTheme, color: ColorValue): UiPaletteColor {\n  if (color === 'neutral') {\n    // Grey 600 / 400 / 800 under white ink: the shared theme's own `neutral`.\n    return theme.palette.neutral;\n  }\n  return theme.palette[color];\n}\n","import type { TextStyle, ViewStyle } from 'react-native';\n\nimport type { BadgePosition, BadgeSize, BadgeVariant } from './Badge.base';\nimport {\n  BADGE_BORDER_WIDTH,\n  BADGE_DESTRUCTIVE_FONT_WEIGHT,\n  BADGE_FONT_WEIGHT,\n  BADGE_LETTER_SPACING_EM,\n  BADGE_SIZES,\n  GLASS_BACKGROUND_ALPHA,\n  GLASS_BORDER_ALPHA,\n  GLOW,\n  OUTLINE_BORDER_WIDTH,\n  SECONDARY_BACKGROUND_ALPHA,\n  SECONDARY_BORDER_ALPHA,\n  badgeAnchor,\n  badgePalette,\n  type BadgeSizeMetrics,\n} from './Badge.metrics';\nimport { alpha } from '../../../tokens/color';\nimport type { UiPaletteColor, UiTheme } from '../../../tokens/theme';\nimport type { ColorValue } from '../../../tokens/vocabulary';\n\nexport interface BadgePaint {\n  box: ViewStyle;\n  ink: string;\n  fontWeight: number;\n  /** `gradient` and `glass` shout; everything else is set as written. */\n  uppercase: boolean;\n}\n\n/** The chip a variant paints, as React Native styles. */\nfunction variantPaint(\n  theme: UiTheme,\n  variant: BadgeVariant,\n  accent: UiPaletteColor,\n): BadgePaint {\n  const filled = (background: string, ink: string): BadgePaint => ({\n    box: { backgroundColor: background },\n    ink,\n    fontWeight: BADGE_FONT_WEIGHT,\n    uppercase: false,\n  });\n  switch (variant) {\n    case 'gradient':\n      // React Native core has no gradient fill: the 135° run takes its first stop.\n      return { ...filled(accent.main, '#fff'), uppercase: true };\n    case 'glass':\n      return {\n        box: {\n          backgroundColor: alpha(accent.main, GLASS_BACKGROUND_ALPHA),\n          borderWidth: 1,\n          borderColor: alpha(accent.main, GLASS_BORDER_ALPHA),\n        },\n        ink: accent.main,\n        fontWeight: BADGE_FONT_WEIGHT,\n        uppercase: true,\n      };\n    case 'outline':\n      return {\n        box: {\n          backgroundColor: 'transparent',\n          borderWidth: OUTLINE_BORDER_WIDTH,\n          borderColor: accent.main,\n        },\n        ink: accent.main,\n        fontWeight: BADGE_FONT_WEIGHT,\n        uppercase: false,\n      };\n    case 'secondary':\n      return {\n        box: {\n          backgroundColor: alpha(accent.main, SECONDARY_BACKGROUND_ALPHA),\n          borderWidth: 1,\n          borderColor: alpha(accent.main, SECONDARY_BORDER_ALPHA),\n        },\n        ink: accent.main,\n        fontWeight: BADGE_FONT_WEIGHT,\n        uppercase: false,\n      };\n    case 'destructive':\n      return {\n        ...filled(theme.palette.danger.main, theme.palette.danger.contrastText),\n        fontWeight: BADGE_DESTRUCTIVE_FONT_WEIGHT,\n      };\n    case 'success':\n      return filled(theme.palette.success.main, theme.palette.success.contrastText);\n    case 'warning':\n      return filled(theme.palette.warning.main, theme.palette.warning.contrastText);\n    default:\n      return filled(accent.main, accent.contrastText || '#fff');\n  }\n}\n\nexport interface BadgeBoxArgs {\n  variant: BadgeVariant;\n  size: BadgeSize;\n  color: ColorValue;\n  glow: boolean;\n}\n\n/**\n * Where the chip hangs: MUI's `anchorOrigin` pins it to a corner and then\n * `translate(±50%, ∓50%)` puts its CENTRE there. It is its own node so the\n * chip's animations own `transform` outright — a React Native style array\n * replaces that property rather than composing it, as CSS would.\n */\nexport function badgeAnchorStyle(position: BadgePosition): ViewStyle {\n  const anchor = badgeAnchor(position);\n  return {\n    position: 'absolute',\n    [anchor.vertical]: 0,\n    [anchor.horizontal]: 0,\n    transform: [\n      { translateX: anchor.horizontal === 'right' ? '50%' : '-50%' },\n      { translateY: anchor.vertical === 'top' ? '-50%' : '50%' },\n    ],\n  };\n}\n\n/** The chip itself: MUI's paper ring, its size, and the variant's paint. */\nexport function badgeBoxStyle(theme: UiTheme, a: BadgeBoxArgs): ViewStyle {\n  const metrics = BADGE_SIZES[a.size];\n  const accent = badgePalette(theme, a.color);\n  const paint = variantPaint(theme, a.variant, accent);\n  const dot = a.variant === 'dot';\n\n  return {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderWidth: BADGE_BORDER_WIDTH,\n    borderColor: theme.palette.background.paper,\n    ...(dot\n      ? {\n          width: metrics.dotSize,\n          height: metrics.dotSize,\n          minWidth: metrics.dotSize,\n          borderRadius: metrics.dotSize / 2,\n          backgroundColor: accent.main,\n        }\n      : {\n          minWidth: metrics.minWidth,\n          height: metrics.height,\n          paddingHorizontal: metrics.paddingHorizontal,\n          borderRadius: metrics.height / 2,\n          ...paint.box,\n        }),\n    ...(a.glow\n      ? { boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(accent.main, GLOW.alpha)}` }\n      : {}),\n  };\n}\n\n/** The chip's own type: the size's step, semibold, tracked a little wider. */\nexport function badgeTextStyle(\n  theme: UiTheme,\n  variant: BadgeVariant,\n  size: BadgeSize,\n  color: ColorValue,\n): TextStyle {\n  const metrics = BADGE_SIZES[size];\n  const paint = variantPaint(theme, variant, badgePalette(theme, color));\n  return {\n    fontFamily: theme.typography.fontFamily,\n    fontSize: metrics.fontSize,\n    fontWeight: String(paint.fontWeight) as TextStyle['fontWeight'],\n    letterSpacing: metrics.fontSize * BADGE_LETTER_SPACING_EM,\n    color: paint.ink,\n    ...(paint.uppercase ? { textTransform: 'uppercase' } : {}),\n  };\n}\n\nexport const badgeMetrics = (size: BadgeSize): BadgeSizeMetrics => BADGE_SIZES[size];\n","import * as React from 'react';\nimport { Pressable, StyleSheet, View } from 'react-native';\n\nimport type { BadgeSize, BadgeVariant } from './Badge.base';\nimport { badgeMetrics, badgeTextStyle } from './Badge.look.native';\nimport { BADGE_CONTENT_GAP } from './Badge.metrics';\nimport { EN_US_UI_LABELS } from '../../../en-US.labels';\nimport { Icon } from '../../../icons/Icon.native';\nimport { renderTextChildren } from '../../../platform/text-children';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport type { ColorValue } from '../../../tokens/vocabulary';\n\nexport interface BadgeContentProps {\n  variant: BadgeVariant;\n  size: BadgeSize;\n  color: ColorValue;\n  icon?: React.ReactNode;\n  closable: boolean;\n  content: React.ReactNode;\n  idFor: (suffix: string) => string;\n  onClose: () => void;\n  closeLabel?: string;\n}\n\n/**\n * The badge's inner run: optional icon, the content itself, optional close\n * button — the same three slots and the same ids `BadgeContent.tsx` builds. A\n * dot badge shows none of it.\n */\nexport function BadgeContent({\n  variant,\n  size,\n  color,\n  icon,\n  closable,\n  content,\n  idFor,\n  onClose,\n  closeLabel = EN_US_UI_LABELS.common.close,\n}: BadgeContentProps): React.JSX.Element | null {\n  const theme = useUiTheme();\n  if (variant === 'dot') return null;\n\n  const metrics = badgeMetrics(size);\n  const text = badgeTextStyle(theme, variant, size, color);\n  const hasContent = content !== null && content !== undefined;\n  if (!icon && !hasContent && !closable) return null;\n\n  return (\n    <View style={styles.run}>\n      {icon ? (\n        <View testID={idFor('icon')} style={{ height: metrics.iconSize, justifyContent: 'center' }}>\n          {icon}\n        </View>\n      ) : null}\n      {hasContent ? (\n        <View testID={idFor('content')} style={styles.centre}>\n          {renderTextChildren(content, text, 1)}\n        </View>\n      ) : null}\n      {closable ? (\n        <Pressable\n          testID={idFor('close')}\n          role=\"button\"\n          aria-label={closeLabel}\n          onPress={onClose}\n          style={styles.close}\n        >\n          <Icon name=\"Close\" size={metrics.closeIconSize} color={text.color as string} />\n        </Pressable>\n      ) : null}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  run: { flexDirection: 'row', alignItems: 'center', gap: BADGE_CONTENT_GAP },\n  centre: { alignItems: 'center', justifyContent: 'center' },\n  /** MUI's close `IconButton` sits half a spacing unit clear of the label. */\n  close: { marginLeft: 4, alignItems: 'center', justifyContent: 'center' },\n});\n"],"mappings":"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","names":["StyleSheet","View","jsx","jsxs","View","styles","StyleSheet"]}

package/dist/native/data-display/Chip.js

@@ -1,6 +1,9 @@
 import {
   webKeyDown
 } from "../chunks/chunk-MJVSQXOD.js";
+import {
+  EN_US_UI_LABELS
+} from "../chunks/chunk-SPK34J7Y.js";
 import {
   Icon
 } from "../chunks/chunk-RHD3625Y.js";
@@ -235,6 +238,7 @@ function DeleteSlot({
   variant,
   color,
   onDelete,
+  deleteLabel = EN_US_UI_LABELS.common.delete,
   disabled,
   testID
 }) {
@@ -243,7 +247,7 @@ function DeleteSlot({
     {
       testID,
       role: "button",
-      "aria-label": "delete",
+      "aria-label": deleteLabel,
       disabled,
       onPress: onDelete,
       style: chipDeleteSlotStyle(metrics, variant),
@@ -262,6 +266,7 @@ function ChipBody({
   deletable,
   disabled,
   onDelete,
+  deleteLabel,
   idFor
 }) {
   const theme = useUiTheme();
@@ -293,6 +298,7 @@ function ChipBody({
         variant,
         color: paint.deleteColor,
         onDelete,
+        deleteLabel,
         disabled,
         testID: idFor("delete")
       }
@@ -329,6 +335,7 @@ var Chip = React.forwardRef((props, ref) => {
     onClick,
     onPress,
     onDelete,
+    deleteLabel,
     dataTestId,
     testID,
     style,
@@ -378,6 +385,7 @@ var Chip = React.forwardRef((props, ref) => {
           deletable,
           disabled,
           onDelete,
+          deleteLabel,
           idFor: makeTestId(chipId)
         }
       )

package/dist/native/data-display/Chip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/data-display/Chip/Chip.native.tsx","../../../src/components/data-display/Chip/Chip.helpers.ts","../../../src/components/data-display/Chip/Chip.metrics.ts","../../../src/components/data-display/Chip/Chip.look.native.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  Image,\n  Pressable,\n  Text as RNText,\n  View,\n  type GestureResponderEvent,\n  type StyleProp,\n  type ViewStyle,\n} from 'react-native';\n\nimport { chipKeyAction, chipRole, isClickable, makeTestId } from './Chip.helpers';\nimport {\n  chipAvatarStyle,\n  chipContainerStyle,\n  chipDeleteSlotStyle,\n  chipLabelStyle,\n  chipLeadingSlotStyle,\n  chipMetrics,\n  chipPaint,\n  type ChipPaint,\n} from './Chip.look.native';\nimport { chipMuiSize, type ChipSizeMetrics } from './Chip.metrics';\nimport type { ChipProps, ChipVariant } from './Chip.types.native';\nimport { Icon } from '../../../icons/Icon.native';\nimport { webKeyDown, type WebKeyHandler } from '../../../platform/web-keys';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\n\ninterface SlotArgs {\n  metrics: ChipSizeMetrics;\n  variant: ChipVariant;\n}\n\n/**\n * The leading slot. MUI restyles the icon ELEMENT through a class — 24px, or\n * 18px when small — which a native renderer cannot do to an arbitrary node, so\n * the slot carries the margins and the glyph keeps the size it was given.\n */\nfunction LeadingSlot({\n  metrics,\n  variant,\n  avatar,\n  avatarSrc,\n  icon,\n  testID,\n}: SlotArgs &\n  Pick<ChipProps, 'avatar' | 'avatarSrc' | 'icon'> & { testID: string }): React.JSX.Element | null {\n  if (avatar) {\n    return <View style={chipLeadingSlotStyle(metrics, variant, 'avatar')}>{avatar}</View>;\n  }\n  if (avatarSrc) {\n    return (\n      <View style={chipLeadingSlotStyle(metrics, variant, 'avatar')}>\n        <Image\n          source={{ uri: avatarSrc }}\n          style={chipAvatarStyle(metrics)}\n          accessibilityIgnoresInvertColors\n        />\n      </View>\n    );\n  }\n  if (icon) {\n    return (\n      <View style={chipLeadingSlotStyle(metrics, variant, 'icon')} testID={testID}>\n        {icon}\n      </View>\n    );\n  }\n  return null;\n}\n\n/** MUI's `deleteIcon`: the `Cancel` glyph, pressable, tucked under the label. */\nfunction DeleteSlot({\n  metrics,\n  variant,\n  color,\n  onDelete,\n  disabled,\n  testID,\n}: SlotArgs & {\n  color: string;\n  onDelete?: () => void;\n  disabled?: boolean;\n  testID: string;\n}): React.JSX.Element {\n  return (\n    <Pressable\n      testID={testID}\n      role=\"button\"\n      aria-label=\"delete\"\n      disabled={disabled}\n      onPress={onDelete}\n      style={chipDeleteSlotStyle(metrics, variant)}\n    >\n      <Icon name=\"Cancel\" size={metrics.deleteSize} color={color} />\n    </Pressable>\n  );\n}\n\ninterface ChipBodyProps extends SlotArgs {\n  paint: ChipPaint;\n  label: string;\n  avatar?: ChipProps['avatar'];\n  avatarSrc?: string;\n  icon?: ChipProps['icon'];\n  deletable?: boolean;\n  disabled?: boolean;\n  onDelete?: () => void;\n  idFor: (suffix: string) => string;\n}\n\n/** Everything inside the pill: the leading slot, the label, the delete button. */\nfunction ChipBody({\n  metrics,\n  variant,\n  paint,\n  label,\n  avatar,\n  avatarSrc,\n  icon,\n  deletable,\n  disabled,\n  onDelete,\n  idFor,\n}: ChipBodyProps): React.JSX.Element {\n  const theme = useUiTheme();\n  return (\n    <>\n      <LeadingSlot\n        metrics={metrics}\n        variant={variant}\n        avatar={avatar}\n        avatarSrc={avatarSrc}\n        icon={icon}\n        testID={idFor('icon')}\n      />\n      <RNText\n        testID={idFor('label')}\n        numberOfLines={1}\n        style={[chipLabelStyle(theme, metrics, variant), paint.label]}\n      >\n        {label}\n      </RNText>\n      {deletable ? (\n        <DeleteSlot\n          metrics={metrics}\n          variant={variant}\n          color={paint.deleteColor}\n          onDelete={onDelete}\n          disabled={disabled}\n          testID={idFor('delete')}\n        />\n      ) : null}\n    </>\n  );\n}\n\ninterface KeyDownArgs {\n  role: 'option' | 'button' | undefined;\n  disabled?: boolean;\n  deletable?: boolean;\n  selectable?: boolean;\n  /** Whether the chip acts at all, under either handler spelling. */\n  acts?: unknown;\n  onClick?: () => void;\n  onDelete?: () => void;\n}\n\n/**\n * The half of the chip's keyboard contract react-native-web does NOT already\n * cover. Its `Pressable` turns Enter into a press on any role, and Space into\n * one only on a `button` role (`isValidKeyPress`) — so a selectable chip, which\n * is an `option`, needs Space wiring here, and Delete/Backspace is never its.\n * On a device none of this is ever called.\n */\nfunction makeChipKeyDown(args: KeyDownArgs): WebKeyHandler {\n  return (event) => {\n    const action = chipKeyAction(event.key, { ...args, onClick: args.acts });\n    if (action === null) return;\n    if (action === 'delete') {\n      event.preventDefault();\n      args.onDelete?.();\n      return;\n    }\n    if (event.key === 'Enter' || args.role === 'button') return;\n    event.preventDefault();\n    args.onClick?.();\n  };\n}\n\n/**\n * The native `Chip`: MUI's pill on a `Pressable`, reachable by keyboard only\n * when it acts — which is the same rule MUI applies through `clickable`.\n */\nexport const Chip = React.forwardRef<View, ChipProps>((props, ref) => {\n  const {\n    label,\n    variant = 'filled',\n    size = 'md',\n    color = 'primary',\n    avatarSrc,\n    avatar,\n    icon,\n    selected,\n    selectable,\n    deletable,\n    disabled,\n    onClick,\n    onPress,\n    onDelete,\n    dataTestId,\n    testID,\n    style,\n    ...rest\n  } = props;\n  const theme = useUiTheme();\n  const chipId = testID ?? dataTestId;\n  const metrics = chipMetrics(chipMuiSize(size));\n  const paint = chipPaint(theme, variant, color, Boolean(selected));\n  const acts = onClick ?? onPress;\n  const clickable = isClickable(disabled, acts, selectable);\n  const role = chipRole(selectable, acts);\n\n  const base: StyleProp<ViewStyle> = [\n    chipContainerStyle(metrics, Boolean(disabled)),\n    paint.container,\n    style,\n  ];\n\n  const press = (event: GestureResponderEvent): void => {\n    onClick?.();\n    onPress?.(event);\n  };\n\n  return (\n    <Pressable\n      ref={ref}\n      testID={chipId || 'chip'}\n      role={role}\n      aria-selected={selectable ? selected : undefined}\n      disabled={disabled}\n      // MUI makes only a clickable chip keyboard-reachable; react-native-web\n      // would otherwise give every Pressable a tab stop.\n      tabIndex={clickable ? 0 : -1}\n      onPress={clickable ? press : undefined}\n      {...webKeyDown(\n        makeChipKeyDown({ role, disabled, deletable, selectable, acts, onClick, onDelete }),\n      )}\n      style={(state) => [base, state.pressed && clickable ? paint.pressed : null]}\n      {...rest}\n    >\n      <ChipBody\n        metrics={metrics}\n        variant={variant}\n        paint={paint}\n        label={label}\n        avatar={avatar}\n        avatarSrc={avatarSrc}\n        icon={icon}\n        deletable={deletable}\n        disabled={disabled}\n        onDelete={onDelete}\n        idFor={makeTestId(chipId)}\n      />\n    </Pressable>\n  );\n});\n\nChip.displayName = 'Chip';\n","/** `${dataTestId}-label`, or `chip-label` when the caller named nothing. */\nexport const makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `chip-${suffix}`;\n\n/** `option` when the chip belongs to a selectable set, `button` when it merely acts. */\nexport const chipRole = (\n  selectable?: boolean,\n  // `unknown`, because the two renderers hand this a differently-typed handler\n  // and all that is asked of it here is whether the caller supplied one.\n  onClick?: unknown,\n): 'option' | 'button' | undefined => {\n  if (selectable) return 'option';\n  return onClick ? 'button' : undefined;\n};\n\nexport const isClickable = (\n  disabled?: boolean,\n  onClick?: unknown,\n  selectable?: boolean,\n): boolean => !disabled && (Boolean(onClick) || Boolean(selectable));\n\n/** What a key press on a chip means, if anything. */\nexport type ChipKeyAction = 'delete' | 'activate' | null;\n\nconst DELETE_KEYS = new Set(['Delete', 'Backspace']);\nconst ACTIVATE_KEYS = new Set(['Enter', ' ']);\n\nexport interface ChipKeyArgs {\n  disabled?: boolean;\n  deletable?: boolean;\n  selectable?: boolean;\n  onClick?: unknown;\n  onDelete?: unknown;\n}\n\n/**\n * A chip is not a native control, so the two keyboard conventions it stands in\n * for are decided by hand: Delete/Backspace removes it, Enter/Space activates\n * it. Both renderers read this one decision — the web wires it to the DOM\n * handler, the native half to react-native-web's (see `Chip.native.tsx`).\n */\nexport function chipKeyAction(key: string, a: ChipKeyArgs): ChipKeyAction {\n  if (a.disabled) return null;\n  if (DELETE_KEYS.has(key) && a.deletable && a.onDelete) return 'delete';\n  if (ACTIVATE_KEYS.has(key) && (a.onClick || a.selectable)) return 'activate';\n  return null;\n}\n","import type { ChipSize } from './Chip.base';\n\n/**\n * THE NUMBERS BOTH `Chip` RENDERERS DRAW WITH.\n *\n * Most of them are MUI's own `Chip` geometry rather than anything this package\n * writes — the 32px pill, the 13px label, the 5px/-6px icon tuck — because the\n * web half hands the drawing to `MuiChip` and the native half has to draw it.\n * Restated here once, read by both, so the two cannot disagree about a chip's\n * height. What THIS package adds (`Chip.styles.tsx`'s hover lift, its shadow\n * and its transition) is at the bottom, and the web derives its CSS from it.\n */\n\n/** MUI draws two chip sizes; ours are the house abbreviations for them. */\nexport type ChipMuiSize = 'small' | 'medium';\n\nexport const chipMuiSize = (size: ChipSize): ChipMuiSize =>\n  size === 'xs' || size === 'sm' ? 'small' : 'medium';\n\nexport interface ChipSizeMetrics {\n  height: number;\n  /** The label's own side padding, filled and outlined (outlined is 1px tighter). */\n  labelPadding: number;\n  labelPaddingOutlined: number;\n  /** The leading icon's box, and how far it tucks under the label. */\n  iconSize: number;\n  iconMarginLeft: number;\n  iconMarginLeftOutlined: number;\n  iconMarginRight: number;\n  /** The avatar's round box and the type inside it. */\n  avatarSize: number;\n  avatarFontSize: number;\n  avatarMarginLeft: number;\n  avatarMarginLeftOutlined: number;\n  avatarMarginRight: number;\n  /** The delete glyph's box and its own tuck. */\n  deleteSize: number;\n  deleteMarginLeft: number;\n  deleteMarginRight: number;\n  deleteMarginRightOutlined: number;\n}\n\nexport const CHIP_SIZES: Record<ChipMuiSize, ChipSizeMetrics> = {\n  medium: {\n    height: 32,\n    labelPadding: 12,\n    labelPaddingOutlined: 11,\n    iconSize: 24,\n    iconMarginLeft: 5,\n    iconMarginLeftOutlined: 4,\n    iconMarginRight: -6,\n    avatarSize: 24,\n    avatarFontSize: 12,\n    avatarMarginLeft: 5,\n    avatarMarginLeftOutlined: 4,\n    avatarMarginRight: -6,\n    deleteSize: 22,\n    deleteMarginLeft: -6,\n    deleteMarginRight: 5,\n    deleteMarginRightOutlined: 5,\n  },\n  small: {\n    height: 24,\n    labelPadding: 8,\n    labelPaddingOutlined: 7,\n    iconSize: 18,\n    iconMarginLeft: 4,\n    iconMarginLeftOutlined: 2,\n    iconMarginRight: -4,\n    avatarSize: 18,\n    avatarFontSize: 10,\n    avatarMarginLeft: 4,\n    avatarMarginLeftOutlined: 2,\n    avatarMarginRight: -4,\n    deleteSize: 16,\n    deleteMarginLeft: -4,\n    deleteMarginRight: 4,\n    deleteMarginRightOutlined: 3,\n  },\n};\n\n/** MUI's `borderRadius: 32 / 2` — a pill at either height, since the box clamps it. */\nexport const CHIP_RADIUS = 16;\n/** The label's type, in px. MUI sets it on the root and the small size keeps it. */\nexport const CHIP_FONT_SIZE = 13;\n/** MUI's `palette.action.disabledOpacity`. */\nexport const CHIP_DISABLED_OPACITY = 0.38;\n/** An outlined chip's hairline: the hue at 0.7, or the grey ramp for `neutral`. */\nexport const OUTLINED_BORDER_ALPHA = 0.7;\n/** The delete glyph over an unaccented chip, and over a coloured one. */\nexport const DELETE_ICON_ALPHA = 0.26;\nexport const DELETE_ICON_ON_COLOR_ALPHA = 0.7;\n/** MUI's `action.hoverOpacity`, the wash a clickable outlined chip takes. */\nexport const OUTLINED_HOVER_ALPHA = 0.04;\n\n/* ── What this package adds on top of MUI's chip ──────────────────────────── */\n\n/** The lift a clickable chip takes on hover, and the shadow under it. */\nexport const HOVER_LIFT_PX = 1;\nexport const HOVER_SHADOW = { offsetY: 4, blur: 12, alphaLight: 0.15, alphaDark: 0.3 } as const;\nexport const CHIP_TRANSITION_MS = 200;\nexport const CHIP_TRANSITION_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n/** A soft chip's ground: the colour at this alpha over the page. */\nexport const SOFT_GROUND_ALPHA = 0.14;\n/** A soft chip's hover ground. */\nexport const SOFT_HOVER_ALPHA = 0.22;\n","import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';\n\nimport type { ChipColor, ChipVariant } from './Chip.base';\nimport {\n  CHIP_DISABLED_OPACITY,\n  CHIP_FONT_SIZE,\n  CHIP_RADIUS,\n  CHIP_SIZES,\n  DELETE_ICON_ALPHA,\n  DELETE_ICON_ON_COLOR_ALPHA,\n  OUTLINED_BORDER_ALPHA,\n  OUTLINED_HOVER_ALPHA,\n  SOFT_GROUND_ALPHA,\n  SOFT_HOVER_ALPHA,\n  type ChipMuiSize,\n  type ChipSizeMetrics,\n} from './Chip.metrics';\nimport { alpha } from '../../../tokens/color';\nimport type { UiTheme } from '../../../tokens/theme';\n\n/** MUI's `action.selectedOpacity`; its hover wash adds `OUTLINED_HOVER_ALPHA` on top. */\nconst SELECTED_OPACITY = 0.08;\n\nexport interface ChipPaint {\n  container: ViewStyle;\n  /** The web's `:hover` background, which touch has no equivalent of. */\n  pressed: ViewStyle;\n  label: TextStyle;\n  deleteColor: string;\n}\n\n/** `neutral` is MUI's `default`: no accent, the ink and the ramp instead. */\nconst isAccented = (color: ChipColor): boolean => color !== 'neutral';\n\n/** An unaccented chip's hairline, which follows the mode rather than a hue. */\nconst neutralBorder = (theme: UiTheme): string =>\n  theme.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700];\n\nfunction filledPaint(theme: UiTheme, color: ChipColor): ChipPaint {\n  if (!isAccented(color)) {\n    return {\n      container: { backgroundColor: theme.palette.action.selected },\n      pressed: { backgroundColor: alpha(theme.palette.action.selected, SELECTED_OPACITY + OUTLINED_HOVER_ALPHA) },\n      label: { color: theme.palette.text.primary },\n      deleteColor: alpha(theme.palette.text.primary, DELETE_ICON_ALPHA),\n    };\n  }\n  const accent = theme.palette[color];\n  return {\n    container: { backgroundColor: accent.main },\n    pressed: { backgroundColor: accent.dark },\n    label: { color: accent.contrastText },\n    deleteColor: alpha(accent.contrastText, DELETE_ICON_ON_COLOR_ALPHA),\n  };\n}\n\nfunction softPaint(theme: UiTheme, color: ChipColor): ChipPaint {\n  if (!isAccented(color)) {\n    return {\n      container: { backgroundColor: theme.palette.action.selected },\n      pressed: { backgroundColor: theme.palette.action.hover },\n      label: { color: theme.palette.text.secondary, fontWeight: '600' },\n      deleteColor: alpha(theme.palette.text.secondary, DELETE_ICON_ALPHA),\n    };\n  }\n  const accent = theme.palette[color];\n  return {\n    container: { backgroundColor: alpha(accent.main, SOFT_GROUND_ALPHA) },\n    pressed: { backgroundColor: alpha(accent.main, SOFT_HOVER_ALPHA) },\n    label: { color: accent.dark, fontWeight: '600' },\n    deleteColor: alpha(accent.dark, DELETE_ICON_ALPHA),\n  };\n}\n\nfunction outlinedPaint(theme: UiTheme, color: ChipColor): ChipPaint {\n  const border: ViewStyle = { backgroundColor: 'transparent', borderWidth: 1, borderStyle: 'solid' };\n  if (!isAccented(color)) {\n    return {\n      container: { ...border, borderColor: neutralBorder(theme) },\n      pressed: { backgroundColor: theme.palette.action.hover },\n      label: { color: theme.palette.text.primary },\n      deleteColor: alpha(theme.palette.text.primary, DELETE_ICON_ALPHA),\n    };\n  }\n  const accent = theme.palette[color];\n  return {\n    container: { ...border, borderColor: alpha(accent.main, OUTLINED_BORDER_ALPHA) },\n    pressed: { backgroundColor: alpha(accent.main, OUTLINED_HOVER_ALPHA) },\n    label: { color: accent.main },\n    deleteColor: alpha(accent.main, OUTLINED_BORDER_ALPHA),\n  };\n}\n\n/**\n * What MUI's chip paints, as React Native styles. `selected` tints an OUTLINED\n * chip with `action.selected` — a filled one is already solid, which is what\n * `Chip.styles.tsx` decided for the web.\n */\nexport function chipPaint(\n  theme: UiTheme,\n  variant: ChipVariant,\n  color: ChipColor,\n  selected: boolean,\n): ChipPaint {\n  const paint =\n    variant === 'outlined' ? outlinedPaint(theme, color) : variant === 'soft' ? softPaint(theme, color) : filledPaint(theme, color);\n  if (variant !== 'outlined' || !selected) return paint;\n  return {\n    ...paint,\n    container: { ...paint.container, backgroundColor: theme.palette.action.selected },\n  };\n}\n\n/** The pill itself: MUI's height, its 16px radius, and the disabled fade. */\nexport function chipContainerStyle(metrics: ChipSizeMetrics, disabled: boolean): ViewStyle {\n  return {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    alignSelf: 'flex-start',\n    maxWidth: '100%',\n    height: metrics.height,\n    borderRadius: CHIP_RADIUS,\n    ...(disabled ? { opacity: CHIP_DISABLED_OPACITY } : {}),\n  };\n}\n\n/** The label: MUI's 13px, padded by the variant, clipped rather than wrapped. */\nexport function chipLabelStyle(\n  theme: UiTheme,\n  metrics: ChipSizeMetrics,\n  variant: ChipVariant,\n): TextStyle {\n  const padding = variant === 'outlined' ? metrics.labelPaddingOutlined : metrics.labelPadding;\n  return {\n    fontFamily: theme.typography.fontFamily,\n    fontSize: CHIP_FONT_SIZE,\n    paddingLeft: padding,\n    paddingRight: padding,\n    flexShrink: 1,\n  };\n}\n\n/** The margins MUI gives the leading slot, tucking it under the label's padding. */\nexport function chipLeadingSlotStyle(\n  metrics: ChipSizeMetrics,\n  variant: ChipVariant,\n  slot: 'icon' | 'avatar',\n): ViewStyle {\n  const outlined = variant === 'outlined';\n  const marginLeft =\n    slot === 'icon'\n      ? (outlined ? metrics.iconMarginLeftOutlined : metrics.iconMarginLeft)\n      : (outlined ? metrics.avatarMarginLeftOutlined : metrics.avatarMarginLeft);\n  return {\n    marginLeft,\n    marginRight: slot === 'icon' ? metrics.iconMarginRight : metrics.avatarMarginRight,\n    alignItems: 'center',\n    justifyContent: 'center',\n  };\n}\n\n/** The delete glyph's own tuck, one pixel tighter when the chip is outlined. */\nexport function chipDeleteSlotStyle(metrics: ChipSizeMetrics, variant: ChipVariant): ViewStyle {\n  return {\n    marginLeft: metrics.deleteMarginLeft,\n    marginRight:\n      variant === 'outlined' ? metrics.deleteMarginRightOutlined : metrics.deleteMarginRight,\n    alignItems: 'center',\n    justifyContent: 'center',\n  };\n}\n\n/** The round avatar box MUI draws for an `avatarSrc`. */\nexport function chipAvatarStyle(metrics: ChipSizeMetrics): ImageStyle {\n  return {\n    width: metrics.avatarSize,\n    height: metrics.avatarSize,\n    borderRadius: metrics.avatarSize / 2,\n    overflow: 'hidden',\n  };\n}\n\nexport const chipMetrics = (size: ChipMuiSize): ChipSizeMetrics => CHIP_SIZES[size];\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/data-display/Chip/Chip.native.tsx","../../../src/components/data-display/Chip/Chip.helpers.ts","../../../src/components/data-display/Chip/Chip.metrics.ts","../../../src/components/data-display/Chip/Chip.look.native.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  Image,\n  Pressable,\n  Text as RNText,\n  View,\n  type GestureResponderEvent,\n  type StyleProp,\n  type ViewStyle,\n} from 'react-native';\n\nimport { chipKeyAction, chipRole, isClickable, makeTestId } from './Chip.helpers';\nimport {\n  chipAvatarStyle,\n  chipContainerStyle,\n  chipDeleteSlotStyle,\n  chipLabelStyle,\n  chipLeadingSlotStyle,\n  chipMetrics,\n  chipPaint,\n  type ChipPaint,\n} from './Chip.look.native';\nimport { chipMuiSize, type ChipSizeMetrics } from './Chip.metrics';\nimport type { ChipProps, ChipVariant } from './Chip.types.native';\nimport { EN_US_UI_LABELS } from '../../../en-US.labels';\nimport { Icon } from '../../../icons/Icon.native';\nimport { webKeyDown, type WebKeyHandler } from '../../../platform/web-keys';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\n\ninterface SlotArgs {\n  metrics: ChipSizeMetrics;\n  variant: ChipVariant;\n}\n\n/**\n * The leading slot. MUI restyles the icon ELEMENT through a class — 24px, or\n * 18px when small — which a native renderer cannot do to an arbitrary node, so\n * the slot carries the margins and the glyph keeps the size it was given.\n */\nfunction LeadingSlot({\n  metrics,\n  variant,\n  avatar,\n  avatarSrc,\n  icon,\n  testID,\n}: SlotArgs &\n  Pick<ChipProps, 'avatar' | 'avatarSrc' | 'icon'> & { testID: string }): React.JSX.Element | null {\n  if (avatar) {\n    return <View style={chipLeadingSlotStyle(metrics, variant, 'avatar')}>{avatar}</View>;\n  }\n  if (avatarSrc) {\n    return (\n      <View style={chipLeadingSlotStyle(metrics, variant, 'avatar')}>\n        <Image\n          source={{ uri: avatarSrc }}\n          style={chipAvatarStyle(metrics)}\n          accessibilityIgnoresInvertColors\n        />\n      </View>\n    );\n  }\n  if (icon) {\n    return (\n      <View style={chipLeadingSlotStyle(metrics, variant, 'icon')} testID={testID}>\n        {icon}\n      </View>\n    );\n  }\n  return null;\n}\n\n/** MUI's `deleteIcon`: the `Cancel` glyph, pressable, tucked under the label. */\nfunction DeleteSlot({\n  metrics,\n  variant,\n  color,\n  onDelete,\n  deleteLabel = EN_US_UI_LABELS.common.delete,\n  disabled,\n  testID,\n}: SlotArgs & {\n  color: string;\n  deleteLabel?: string;\n  onDelete?: () => void;\n  disabled?: boolean;\n  testID: string;\n}): React.JSX.Element {\n  return (\n    <Pressable\n      testID={testID}\n      role=\"button\"\n      aria-label={deleteLabel}\n      disabled={disabled}\n      onPress={onDelete}\n      style={chipDeleteSlotStyle(metrics, variant)}\n    >\n      <Icon name=\"Cancel\" size={metrics.deleteSize} color={color} />\n    </Pressable>\n  );\n}\n\ninterface ChipBodyProps extends SlotArgs {\n  paint: ChipPaint;\n  label: string;\n  avatar?: ChipProps['avatar'];\n  avatarSrc?: string;\n  icon?: ChipProps['icon'];\n  deletable?: boolean;\n  disabled?: boolean;\n  onDelete?: () => void;\n  deleteLabel?: string;\n  idFor: (suffix: string) => string;\n}\n\n/** Everything inside the pill: the leading slot, the label, the delete button. */\nfunction ChipBody({\n  metrics,\n  variant,\n  paint,\n  label,\n  avatar,\n  avatarSrc,\n  icon,\n  deletable,\n  disabled,\n  onDelete,\n  deleteLabel,\n  idFor,\n}: ChipBodyProps): React.JSX.Element {\n  const theme = useUiTheme();\n  return (\n    <>\n      <LeadingSlot\n        metrics={metrics}\n        variant={variant}\n        avatar={avatar}\n        avatarSrc={avatarSrc}\n        icon={icon}\n        testID={idFor('icon')}\n      />\n      <RNText\n        testID={idFor('label')}\n        numberOfLines={1}\n        style={[chipLabelStyle(theme, metrics, variant), paint.label]}\n      >\n        {label}\n      </RNText>\n      {deletable ? (\n        <DeleteSlot\n          metrics={metrics}\n          variant={variant}\n          color={paint.deleteColor}\n          onDelete={onDelete}\n          deleteLabel={deleteLabel}\n          disabled={disabled}\n          testID={idFor('delete')}\n        />\n      ) : null}\n    </>\n  );\n}\n\ninterface KeyDownArgs {\n  role: 'option' | 'button' | undefined;\n  disabled?: boolean;\n  deletable?: boolean;\n  selectable?: boolean;\n  /** Whether the chip acts at all, under either handler spelling. */\n  acts?: unknown;\n  onClick?: () => void;\n  onDelete?: () => void;\n}\n\n/**\n * The half of the chip's keyboard contract react-native-web does NOT already\n * cover. Its `Pressable` turns Enter into a press on any role, and Space into\n * one only on a `button` role (`isValidKeyPress`) — so a selectable chip, which\n * is an `option`, needs Space wiring here, and Delete/Backspace is never its.\n * On a device none of this is ever called.\n */\nfunction makeChipKeyDown(args: KeyDownArgs): WebKeyHandler {\n  return (event) => {\n    const action = chipKeyAction(event.key, { ...args, onClick: args.acts });\n    if (action === null) return;\n    if (action === 'delete') {\n      event.preventDefault();\n      args.onDelete?.();\n      return;\n    }\n    if (event.key === 'Enter' || args.role === 'button') return;\n    event.preventDefault();\n    args.onClick?.();\n  };\n}\n\n/**\n * The native `Chip`: MUI's pill on a `Pressable`, reachable by keyboard only\n * when it acts — which is the same rule MUI applies through `clickable`.\n */\nexport const Chip = React.forwardRef<View, ChipProps>((props, ref) => {\n  const {\n    label,\n    variant = 'filled',\n    size = 'md',\n    color = 'primary',\n    avatarSrc,\n    avatar,\n    icon,\n    selected,\n    selectable,\n    deletable,\n    disabled,\n    onClick,\n    onPress,\n    onDelete,\n    deleteLabel,\n    dataTestId,\n    testID,\n    style,\n    ...rest\n  } = props;\n  const theme = useUiTheme();\n  const chipId = testID ?? dataTestId;\n  const metrics = chipMetrics(chipMuiSize(size));\n  const paint = chipPaint(theme, variant, color, Boolean(selected));\n  const acts = onClick ?? onPress;\n  const clickable = isClickable(disabled, acts, selectable);\n  const role = chipRole(selectable, acts);\n\n  const base: StyleProp<ViewStyle> = [\n    chipContainerStyle(metrics, Boolean(disabled)),\n    paint.container,\n    style,\n  ];\n\n  const press = (event: GestureResponderEvent): void => {\n    onClick?.();\n    onPress?.(event);\n  };\n\n  return (\n    <Pressable\n      ref={ref}\n      testID={chipId || 'chip'}\n      role={role}\n      aria-selected={selectable ? selected : undefined}\n      disabled={disabled}\n      // MUI makes only a clickable chip keyboard-reachable; react-native-web\n      // would otherwise give every Pressable a tab stop.\n      tabIndex={clickable ? 0 : -1}\n      onPress={clickable ? press : undefined}\n      {...webKeyDown(\n        makeChipKeyDown({ role, disabled, deletable, selectable, acts, onClick, onDelete }),\n      )}\n      style={(state) => [base, state.pressed && clickable ? paint.pressed : null]}\n      {...rest}\n    >\n      <ChipBody\n        metrics={metrics}\n        variant={variant}\n        paint={paint}\n        label={label}\n        avatar={avatar}\n        avatarSrc={avatarSrc}\n        icon={icon}\n        deletable={deletable}\n        disabled={disabled}\n        onDelete={onDelete}\n        deleteLabel={deleteLabel}\n        idFor={makeTestId(chipId)}\n      />\n    </Pressable>\n  );\n});\n\nChip.displayName = 'Chip';\n","/** `${dataTestId}-label`, or `chip-label` when the caller named nothing. */\nexport const makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `chip-${suffix}`;\n\n/** `option` when the chip belongs to a selectable set, `button` when it merely acts. */\nexport const chipRole = (\n  selectable?: boolean,\n  // `unknown`, because the two renderers hand this a differently-typed handler\n  // and all that is asked of it here is whether the caller supplied one.\n  onClick?: unknown,\n): 'option' | 'button' | undefined => {\n  if (selectable) return 'option';\n  return onClick ? 'button' : undefined;\n};\n\nexport const isClickable = (\n  disabled?: boolean,\n  onClick?: unknown,\n  selectable?: boolean,\n): boolean => !disabled && (Boolean(onClick) || Boolean(selectable));\n\n/** What a key press on a chip means, if anything. */\nexport type ChipKeyAction = 'delete' | 'activate' | null;\n\nconst DELETE_KEYS = new Set(['Delete', 'Backspace']);\nconst ACTIVATE_KEYS = new Set(['Enter', ' ']);\n\nexport interface ChipKeyArgs {\n  disabled?: boolean;\n  deletable?: boolean;\n  selectable?: boolean;\n  onClick?: unknown;\n  onDelete?: unknown;\n}\n\n/**\n * A chip is not a native control, so the two keyboard conventions it stands in\n * for are decided by hand: Delete/Backspace removes it, Enter/Space activates\n * it. Both renderers read this one decision — the web wires it to the DOM\n * handler, the native half to react-native-web's (see `Chip.native.tsx`).\n */\nexport function chipKeyAction(key: string, a: ChipKeyArgs): ChipKeyAction {\n  if (a.disabled) return null;\n  if (DELETE_KEYS.has(key) && a.deletable && a.onDelete) return 'delete';\n  if (ACTIVATE_KEYS.has(key) && (a.onClick || a.selectable)) return 'activate';\n  return null;\n}\n","import type { ChipSize } from './Chip.base';\n\n/**\n * THE NUMBERS BOTH `Chip` RENDERERS DRAW WITH.\n *\n * Most of them are MUI's own `Chip` geometry rather than anything this package\n * writes — the 32px pill, the 13px label, the 5px/-6px icon tuck — because the\n * web half hands the drawing to `MuiChip` and the native half has to draw it.\n * Restated here once, read by both, so the two cannot disagree about a chip's\n * height. What THIS package adds (`Chip.styles.tsx`'s hover lift, its shadow\n * and its transition) is at the bottom, and the web derives its CSS from it.\n */\n\n/** MUI draws two chip sizes; ours are the house abbreviations for them. */\nexport type ChipMuiSize = 'small' | 'medium';\n\nexport const chipMuiSize = (size: ChipSize): ChipMuiSize =>\n  size === 'xs' || size === 'sm' ? 'small' : 'medium';\n\nexport interface ChipSizeMetrics {\n  height: number;\n  /** The label's own side padding, filled and outlined (outlined is 1px tighter). */\n  labelPadding: number;\n  labelPaddingOutlined: number;\n  /** The leading icon's box, and how far it tucks under the label. */\n  iconSize: number;\n  iconMarginLeft: number;\n  iconMarginLeftOutlined: number;\n  iconMarginRight: number;\n  /** The avatar's round box and the type inside it. */\n  avatarSize: number;\n  avatarFontSize: number;\n  avatarMarginLeft: number;\n  avatarMarginLeftOutlined: number;\n  avatarMarginRight: number;\n  /** The delete glyph's box and its own tuck. */\n  deleteSize: number;\n  deleteMarginLeft: number;\n  deleteMarginRight: number;\n  deleteMarginRightOutlined: number;\n}\n\nexport const CHIP_SIZES: Record<ChipMuiSize, ChipSizeMetrics> = {\n  medium: {\n    height: 32,\n    labelPadding: 12,\n    labelPaddingOutlined: 11,\n    iconSize: 24,\n    iconMarginLeft: 5,\n    iconMarginLeftOutlined: 4,\n    iconMarginRight: -6,\n    avatarSize: 24,\n    avatarFontSize: 12,\n    avatarMarginLeft: 5,\n    avatarMarginLeftOutlined: 4,\n    avatarMarginRight: -6,\n    deleteSize: 22,\n    deleteMarginLeft: -6,\n    deleteMarginRight: 5,\n    deleteMarginRightOutlined: 5,\n  },\n  small: {\n    height: 24,\n    labelPadding: 8,\n    labelPaddingOutlined: 7,\n    iconSize: 18,\n    iconMarginLeft: 4,\n    iconMarginLeftOutlined: 2,\n    iconMarginRight: -4,\n    avatarSize: 18,\n    avatarFontSize: 10,\n    avatarMarginLeft: 4,\n    avatarMarginLeftOutlined: 2,\n    avatarMarginRight: -4,\n    deleteSize: 16,\n    deleteMarginLeft: -4,\n    deleteMarginRight: 4,\n    deleteMarginRightOutlined: 3,\n  },\n};\n\n/** MUI's `borderRadius: 32 / 2` — a pill at either height, since the box clamps it. */\nexport const CHIP_RADIUS = 16;\n/** The label's type, in px. MUI sets it on the root and the small size keeps it. */\nexport const CHIP_FONT_SIZE = 13;\n/** MUI's `palette.action.disabledOpacity`. */\nexport const CHIP_DISABLED_OPACITY = 0.38;\n/** An outlined chip's hairline: the hue at 0.7, or the grey ramp for `neutral`. */\nexport const OUTLINED_BORDER_ALPHA = 0.7;\n/** The delete glyph over an unaccented chip, and over a coloured one. */\nexport const DELETE_ICON_ALPHA = 0.26;\nexport const DELETE_ICON_ON_COLOR_ALPHA = 0.7;\n/** MUI's `action.hoverOpacity`, the wash a clickable outlined chip takes. */\nexport const OUTLINED_HOVER_ALPHA = 0.04;\n\n/* ── What this package adds on top of MUI's chip ──────────────────────────── */\n\n/** The lift a clickable chip takes on hover, and the shadow under it. */\nexport const HOVER_LIFT_PX = 1;\nexport const HOVER_SHADOW = { offsetY: 4, blur: 12, alphaLight: 0.15, alphaDark: 0.3 } as const;\nexport const CHIP_TRANSITION_MS = 200;\nexport const CHIP_TRANSITION_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n/** A soft chip's ground: the colour at this alpha over the page. */\nexport const SOFT_GROUND_ALPHA = 0.14;\n/** A soft chip's hover ground. */\nexport const SOFT_HOVER_ALPHA = 0.22;\n","import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';\n\nimport type { ChipColor, ChipVariant } from './Chip.base';\nimport {\n  CHIP_DISABLED_OPACITY,\n  CHIP_FONT_SIZE,\n  CHIP_RADIUS,\n  CHIP_SIZES,\n  DELETE_ICON_ALPHA,\n  DELETE_ICON_ON_COLOR_ALPHA,\n  OUTLINED_BORDER_ALPHA,\n  OUTLINED_HOVER_ALPHA,\n  SOFT_GROUND_ALPHA,\n  SOFT_HOVER_ALPHA,\n  type ChipMuiSize,\n  type ChipSizeMetrics,\n} from './Chip.metrics';\nimport { alpha } from '../../../tokens/color';\nimport type { UiTheme } from '../../../tokens/theme';\n\n/** MUI's `action.selectedOpacity`; its hover wash adds `OUTLINED_HOVER_ALPHA` on top. */\nconst SELECTED_OPACITY = 0.08;\n\nexport interface ChipPaint {\n  container: ViewStyle;\n  /** The web's `:hover` background, which touch has no equivalent of. */\n  pressed: ViewStyle;\n  label: TextStyle;\n  deleteColor: string;\n}\n\n/** `neutral` is MUI's `default`: no accent, the ink and the ramp instead. */\nconst isAccented = (color: ChipColor): boolean => color !== 'neutral';\n\n/** An unaccented chip's hairline, which follows the mode rather than a hue. */\nconst neutralBorder = (theme: UiTheme): string =>\n  theme.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700];\n\nfunction filledPaint(theme: UiTheme, color: ChipColor): ChipPaint {\n  if (!isAccented(color)) {\n    return {\n      container: { backgroundColor: theme.palette.action.selected },\n      pressed: { backgroundColor: alpha(theme.palette.action.selected, SELECTED_OPACITY + OUTLINED_HOVER_ALPHA) },\n      label: { color: theme.palette.text.primary },\n      deleteColor: alpha(theme.palette.text.primary, DELETE_ICON_ALPHA),\n    };\n  }\n  const accent = theme.palette[color];\n  return {\n    container: { backgroundColor: accent.main },\n    pressed: { backgroundColor: accent.dark },\n    label: { color: accent.contrastText },\n    deleteColor: alpha(accent.contrastText, DELETE_ICON_ON_COLOR_ALPHA),\n  };\n}\n\nfunction softPaint(theme: UiTheme, color: ChipColor): ChipPaint {\n  if (!isAccented(color)) {\n    return {\n      container: { backgroundColor: theme.palette.action.selected },\n      pressed: { backgroundColor: theme.palette.action.hover },\n      label: { color: theme.palette.text.secondary, fontWeight: '600' },\n      deleteColor: alpha(theme.palette.text.secondary, DELETE_ICON_ALPHA),\n    };\n  }\n  const accent = theme.palette[color];\n  return {\n    container: { backgroundColor: alpha(accent.main, SOFT_GROUND_ALPHA) },\n    pressed: { backgroundColor: alpha(accent.main, SOFT_HOVER_ALPHA) },\n    label: { color: accent.dark, fontWeight: '600' },\n    deleteColor: alpha(accent.dark, DELETE_ICON_ALPHA),\n  };\n}\n\nfunction outlinedPaint(theme: UiTheme, color: ChipColor): ChipPaint {\n  const border: ViewStyle = { backgroundColor: 'transparent', borderWidth: 1, borderStyle: 'solid' };\n  if (!isAccented(color)) {\n    return {\n      container: { ...border, borderColor: neutralBorder(theme) },\n      pressed: { backgroundColor: theme.palette.action.hover },\n      label: { color: theme.palette.text.primary },\n      deleteColor: alpha(theme.palette.text.primary, DELETE_ICON_ALPHA),\n    };\n  }\n  const accent = theme.palette[color];\n  return {\n    container: { ...border, borderColor: alpha(accent.main, OUTLINED_BORDER_ALPHA) },\n    pressed: { backgroundColor: alpha(accent.main, OUTLINED_HOVER_ALPHA) },\n    label: { color: accent.main },\n    deleteColor: alpha(accent.main, OUTLINED_BORDER_ALPHA),\n  };\n}\n\n/**\n * What MUI's chip paints, as React Native styles. `selected` tints an OUTLINED\n * chip with `action.selected` — a filled one is already solid, which is what\n * `Chip.styles.tsx` decided for the web.\n */\nexport function chipPaint(\n  theme: UiTheme,\n  variant: ChipVariant,\n  color: ChipColor,\n  selected: boolean,\n): ChipPaint {\n  const paint =\n    variant === 'outlined' ? outlinedPaint(theme, color) : variant === 'soft' ? softPaint(theme, color) : filledPaint(theme, color);\n  if (variant !== 'outlined' || !selected) return paint;\n  return {\n    ...paint,\n    container: { ...paint.container, backgroundColor: theme.palette.action.selected },\n  };\n}\n\n/** The pill itself: MUI's height, its 16px radius, and the disabled fade. */\nexport function chipContainerStyle(metrics: ChipSizeMetrics, disabled: boolean): ViewStyle {\n  return {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    alignSelf: 'flex-start',\n    maxWidth: '100%',\n    height: metrics.height,\n    borderRadius: CHIP_RADIUS,\n    ...(disabled ? { opacity: CHIP_DISABLED_OPACITY } : {}),\n  };\n}\n\n/** The label: MUI's 13px, padded by the variant, clipped rather than wrapped. */\nexport function chipLabelStyle(\n  theme: UiTheme,\n  metrics: ChipSizeMetrics,\n  variant: ChipVariant,\n): TextStyle {\n  const padding = variant === 'outlined' ? metrics.labelPaddingOutlined : metrics.labelPadding;\n  return {\n    fontFamily: theme.typography.fontFamily,\n    fontSize: CHIP_FONT_SIZE,\n    paddingLeft: padding,\n    paddingRight: padding,\n    flexShrink: 1,\n  };\n}\n\n/** The margins MUI gives the leading slot, tucking it under the label's padding. */\nexport function chipLeadingSlotStyle(\n  metrics: ChipSizeMetrics,\n  variant: ChipVariant,\n  slot: 'icon' | 'avatar',\n): ViewStyle {\n  const outlined = variant === 'outlined';\n  const marginLeft =\n    slot === 'icon'\n      ? (outlined ? metrics.iconMarginLeftOutlined : metrics.iconMarginLeft)\n      : (outlined ? metrics.avatarMarginLeftOutlined : metrics.avatarMarginLeft);\n  return {\n    marginLeft,\n    marginRight: slot === 'icon' ? metrics.iconMarginRight : metrics.avatarMarginRight,\n    alignItems: 'center',\n    justifyContent: 'center',\n  };\n}\n\n/** The delete glyph's own tuck, one pixel tighter when the chip is outlined. */\nexport function chipDeleteSlotStyle(metrics: ChipSizeMetrics, variant: ChipVariant): ViewStyle {\n  return {\n    marginLeft: metrics.deleteMarginLeft,\n    marginRight:\n      variant === 'outlined' ? metrics.deleteMarginRightOutlined : metrics.deleteMarginRight,\n    alignItems: 'center',\n    justifyContent: 'center',\n  };\n}\n\n/** The round avatar box MUI draws for an `avatarSrc`. */\nexport function chipAvatarStyle(metrics: ChipSizeMetrics): ImageStyle {\n  return {\n    width: metrics.avatarSize,\n    height: metrics.avatarSize,\n    borderRadius: metrics.avatarSize / 2,\n    overflow: 'hidden',\n  };\n}\n\nexport const chipMetrics = (size: ChipMuiSize): ChipSizeMetrics => CHIP_SIZES[size];\n"],"mappings":"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","names":[]}

package/dist/native/data-display/EmptyState.js

@@ -1,11 +1,12 @@
 import {
   EmptyState
-} from "../chunks/chunk-AVHGS66L.js";
-import "../chunks/chunk-BXNZHDXK.js";
+} from "../chunks/chunk-FGAX5BRS.js";
+import "../chunks/chunk-4SP3BDPZ.js";
 import "../chunks/chunk-3JBZE4I6.js";
 import "../chunks/chunk-ZRQHLTYG.js";
 import "../chunks/chunk-DN73KYIZ.js";
 import "../chunks/chunk-5GJ5OG5R.js";
+import "../chunks/chunk-SPK34J7Y.js";
 import "../chunks/chunk-RHD3625Y.js";
 import "../chunks/chunk-2UFNPDYT.js";
 import "../chunks/chunk-5WLOVHKK.js";

package/dist/native/data-display/ErrorState.js

@@ -1,12 +1,13 @@
 import {
   Button
-} from "../chunks/chunk-BXNZHDXK.js";
+} from "../chunks/chunk-4SP3BDPZ.js";
 import "../chunks/chunk-3JBZE4I6.js";
 import "../chunks/chunk-ZRQHLTYG.js";
 import {
   webAria
 } from "../chunks/chunk-DN73KYIZ.js";
 import "../chunks/chunk-5GJ5OG5R.js";
+import "../chunks/chunk-SPK34J7Y.js";
 import {
   Icon
 } from "../chunks/chunk-RHD3625Y.js";

package/dist/native/data-display/ErrorState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/data-display/ErrorState/ErrorState.native.tsx","../../../src/components/data-display/ErrorState/ErrorState.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport { StyleSheet, Text as RNText, View, type TextStyle, type ViewStyle } from 'react-native';\n\nimport {\n  ERROR_ICON_BOX,\n  ERROR_ICON_BOX_OPACITY,\n  ERROR_ICON_SIZE,\n  ERROR_MESSAGE_LINE_HEIGHT,\n  ERROR_MESSAGE_MAX_WIDTH,\n  ERROR_STATE_GAP_UNITS,\n  ERROR_STATE_MIN_HEIGHT,\n  ERROR_STATE_PADDING_UNITS,\n  ERROR_TEXT_GAP_UNITS,\n  RETRY_BUTTON,\n  RETRY_MARGIN_TOP_UNITS,\n  RETRY_MIN_WIDTH,\n  errorStatePalette,\n} from './ErrorState.metrics';\nimport type { ErrorStateProps, ErrorStateSeverity } from './ErrorState.types.native';\nimport { Icon } from '../../../icons/Icon.native';\nimport { webAria } from '../../../platform/aria';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { MUI_FONT_WEIGHT_MEDIUM, MUI_TYPE, muiTypeStyle } from '../../../tokens/mui-type';\nimport type { UiTheme } from '../../../tokens/theme';\nimport { Button } from '../../form/Button/Button.native';\n\nconst makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `error-state-${suffix}`;\n\n/** MUI's `h6` as an `h3`, medium weight, in the body ink — what the web `Typography` renders. */\nexport function titleStyle(theme: UiTheme): TextStyle {\n  return {\n    ...muiTypeStyle(theme, 'h6'),\n    fontWeight: `${MUI_FONT_WEIGHT_MEDIUM}`,\n    color: theme.palette.text.primary,\n    textAlign: 'center',\n  };\n}\n\n/** MUI's `body2` on a 1.6 line height, muted, wrapping at 400px. */\nexport function messageStyle(theme: UiTheme): TextStyle {\n  return {\n    ...muiTypeStyle(theme, 'body2'),\n    lineHeight: MUI_TYPE.body2.fontSize * ERROR_MESSAGE_LINE_HEIGHT,\n    color: theme.palette.text.secondary,\n    maxWidth: ERROR_MESSAGE_MAX_WIDTH,\n    textAlign: 'center',\n  };\n}\n\n/** The 80px disc behind the glyph, in the severity's `light` shade. */\nexport function iconBoxStyle(theme: UiTheme, severity: ErrorStateSeverity): ViewStyle {\n  return {\n    width: ERROR_ICON_BOX,\n    height: ERROR_ICON_BOX,\n    borderRadius: ERROR_ICON_BOX / 2,\n    backgroundColor: errorStatePalette(theme, severity).light,\n    opacity: ERROR_ICON_BOX_OPACITY,\n    alignItems: 'center',\n    justifyContent: 'center',\n  };\n}\n\n/** The web retry is MUI's medium outlined button; the house `Button` is sized to it here. */\nexport function retryStyle(theme: UiTheme): ViewStyle {\n  return {\n    marginTop: theme.spacing(RETRY_MARGIN_TOP_UNITS),\n    minWidth: RETRY_MIN_WIDTH,\n    paddingVertical: RETRY_BUTTON.paddingVertical,\n    paddingHorizontal: RETRY_BUTTON.paddingHorizontal,\n    borderRadius: theme.radius.md,\n  };\n}\n\nfunction ErrorIcon({\n  severity,\n  icon,\n  testId,\n}: {\n  severity: ErrorStateSeverity;\n  icon?: React.ReactNode;\n  testId: string;\n}): React.JSX.Element {\n  const theme = useUiTheme();\n  const glyph = severity === 'error' ? 'ErrorOutline' : 'WarningAmber';\n  return (\n    <View testID={testId} style={iconBoxStyle(theme, severity)}>\n      {icon || <Icon name={glyph} size={ERROR_ICON_SIZE} color={errorStatePalette(theme, severity).main} />}\n    </View>\n  );\n}\n\nfunction ErrorText({\n  title,\n  message,\n  titleId,\n  testId,\n}: {\n  title?: string;\n  message: string;\n  titleId: string;\n  testId: (suffix: string) => string;\n}): React.JSX.Element {\n  const theme = useUiTheme();\n  return (\n    <View style={[styles.text, { gap: theme.spacing(ERROR_TEXT_GAP_UNITS) }]}>\n      {title ? (\n        <RNText\n          id={titleId}\n          role=\"heading\"\n          {...webAria({ 'aria-level': 3 })}\n          testID={testId('title')}\n          style={titleStyle(theme)}\n        >\n          {title}\n        </RNText>\n      ) : null}\n      <RNText id={`${titleId}-message`} testID={testId('message')} style={messageStyle(theme)}>\n        {message}\n      </RNText>\n    </View>\n  );\n}\n\nexport const ErrorState: React.FC<ErrorStateProps> = React.memo(function ErrorState(props) {\n  const {\n    message,\n    title,\n    onRetry,\n    retryLabel = 'Retry',\n    severity = 'error',\n    icon,\n    style,\n    ...others\n  } = props;\n  const theme = useUiTheme();\n  const titleId = React.useId();\n  const dataTestId = resolveTestId(others);\n  const testId = makeTestId(dataTestId);\n  const rest = withoutTestIdProps(others);\n\n  return (\n    <View\n      role=\"alert\"\n      aria-labelledby={title ? titleId : undefined}\n      {...webAria({ 'aria-describedby': `${titleId}-message` })}\n      testID={dataTestId || 'error-state'}\n      style={[\n        styles.root,\n        {\n          padding: theme.spacing(ERROR_STATE_PADDING_UNITS),\n          minHeight: ERROR_STATE_MIN_HEIGHT,\n          gap: theme.spacing(ERROR_STATE_GAP_UNITS),\n        },\n        style,\n      ]}\n      {...rest}\n    >\n      <ErrorIcon severity={severity} icon={icon} testId={testId('icon')} />\n\n      <ErrorText title={title} message={message} titleId={titleId} testId={testId} />\n\n      {onRetry ? (\n        <Button\n          variant=\"outline\"\n          color={severity === 'error' ? 'danger' : 'warning'}\n          size=\"sm\"\n          icon={<Icon name=\"Refresh\" size={RETRY_BUTTON.iconSize} color={severity === 'error' ? 'danger' : 'warning'} />}\n          onClick={onRetry}\n          testID={testId('retry-button')}\n          style={retryStyle(theme)}\n        >\n          {retryLabel}\n        </Button>\n      ) : null}\n    </View>\n  );\n});\n\nErrorState.displayName = 'ErrorState';\n\nconst styles = StyleSheet.create({\n  root: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  text: {\n    alignItems: 'center',\n  },\n});\n","import type { ErrorStateSeverity } from './ErrorState.base';\nimport type { UiPaletteColor, UiTheme } from '../../../tokens/theme';\n\n/**\n * THE NUMBERS BOTH `ErrorState` RENDERERS DRAW WITH.\n *\n * `ErrorState.tsx` (MUI) and `ErrorState.native.tsx` (React Native) read this\n * one table. Spacing is in SPACING UNITS where the web writes\n * `theme.spacing(n)`; everything else is px or a ratio.\n */\n\n/** The region: a centred column, `theme.spacing(6)` of padding, at least 200px tall, its parts 16px apart. */\nexport const ERROR_STATE_PADDING_UNITS = 6;\nexport const ERROR_STATE_MIN_HEIGHT = 200;\nexport const ERROR_STATE_GAP_UNITS = 2;\n\n/** The glyph sits in an 80px disc of the severity's `light` shade at 0.9 opacity. */\nexport const ERROR_ICON_BOX = 80;\nexport const ERROR_ICON_BOX_OPACITY = 0.9;\nexport const ERROR_ICON_SIZE = 48;\n\n/** Title and message are 8px apart; the message wraps at 400px on a 1.6 line height. */\nexport const ERROR_TEXT_GAP_UNITS = 1;\nexport const ERROR_MESSAGE_MAX_WIDTH = 400;\nexport const ERROR_MESSAGE_LINE_HEIGHT = 1.6;\n\n/** The retry button: 8px below the text, no narrower than 120px. */\nexport const RETRY_MARGIN_TOP_UNITS = 1;\nexport const RETRY_MIN_WIDTH = 120;\n/**\n * The web retry IS MUI's medium outlined `Button`: 5px 15px inside its 1px\n * border, 14px type, the theme's radius, a 20px start icon. The native side\n * sizes the house `Button` to these.\n */\nexport const RETRY_BUTTON = {\n  paddingVertical: 5,\n  paddingHorizontal: 15,\n  iconSize: 20,\n} as const;\n\n/** `error` is MUI's name for the `danger` slot; `warning` is its own. */\nexport function errorStatePalette(theme: UiTheme, severity: ErrorStateSeverity): UiPaletteColor {\n  return severity === 'error' ? theme.palette.danger : theme.palette.warning;\n}\n"],"mappings":"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","names":["ErrorState"]}
+{"version":3,"sources":["../../../src/components/data-display/ErrorState/ErrorState.native.tsx","../../../src/components/data-display/ErrorState/ErrorState.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport { StyleSheet, Text as RNText, View, type TextStyle, type ViewStyle } from 'react-native';\n\nimport {\n  ERROR_ICON_BOX,\n  ERROR_ICON_BOX_OPACITY,\n  ERROR_ICON_SIZE,\n  ERROR_MESSAGE_LINE_HEIGHT,\n  ERROR_MESSAGE_MAX_WIDTH,\n  ERROR_STATE_GAP_UNITS,\n  ERROR_STATE_MIN_HEIGHT,\n  ERROR_STATE_PADDING_UNITS,\n  ERROR_TEXT_GAP_UNITS,\n  RETRY_BUTTON,\n  RETRY_MARGIN_TOP_UNITS,\n  RETRY_MIN_WIDTH,\n  errorStatePalette,\n} from './ErrorState.metrics';\nimport type { ErrorStateProps, ErrorStateSeverity } from './ErrorState.types.native';\nimport { Icon } from '../../../icons/Icon.native';\nimport { webAria } from '../../../platform/aria';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { MUI_FONT_WEIGHT_MEDIUM, MUI_TYPE, muiTypeStyle } from '../../../tokens/mui-type';\nimport type { UiTheme } from '../../../tokens/theme';\nimport { Button } from '../../form/Button/Button.native';\n\nconst makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `error-state-${suffix}`;\n\n/** MUI's `h6` as an `h3`, medium weight, in the body ink — what the web `Typography` renders. */\nexport function titleStyle(theme: UiTheme): TextStyle {\n  return {\n    ...muiTypeStyle(theme, 'h6'),\n    fontWeight: `${MUI_FONT_WEIGHT_MEDIUM}`,\n    color: theme.palette.text.primary,\n    textAlign: 'center',\n  };\n}\n\n/** MUI's `body2` on a 1.6 line height, muted, wrapping at 400px. */\nexport function messageStyle(theme: UiTheme): TextStyle {\n  return {\n    ...muiTypeStyle(theme, 'body2'),\n    lineHeight: MUI_TYPE.body2.fontSize * ERROR_MESSAGE_LINE_HEIGHT,\n    color: theme.palette.text.secondary,\n    maxWidth: ERROR_MESSAGE_MAX_WIDTH,\n    textAlign: 'center',\n  };\n}\n\n/** The 80px disc behind the glyph, in the severity's `light` shade. */\nexport function iconBoxStyle(theme: UiTheme, severity: ErrorStateSeverity): ViewStyle {\n  return {\n    width: ERROR_ICON_BOX,\n    height: ERROR_ICON_BOX,\n    borderRadius: ERROR_ICON_BOX / 2,\n    backgroundColor: errorStatePalette(theme, severity).light,\n    opacity: ERROR_ICON_BOX_OPACITY,\n    alignItems: 'center',\n    justifyContent: 'center',\n  };\n}\n\n/** The web retry is MUI's medium outlined button; the house `Button` is sized to it here. */\nexport function retryStyle(theme: UiTheme): ViewStyle {\n  return {\n    marginTop: theme.spacing(RETRY_MARGIN_TOP_UNITS),\n    minWidth: RETRY_MIN_WIDTH,\n    paddingVertical: RETRY_BUTTON.paddingVertical,\n    paddingHorizontal: RETRY_BUTTON.paddingHorizontal,\n    borderRadius: theme.radius.md,\n  };\n}\n\nfunction ErrorIcon({\n  severity,\n  icon,\n  testId,\n}: {\n  severity: ErrorStateSeverity;\n  icon?: React.ReactNode;\n  testId: string;\n}): React.JSX.Element {\n  const theme = useUiTheme();\n  const glyph = severity === 'error' ? 'ErrorOutline' : 'WarningAmber';\n  return (\n    <View testID={testId} style={iconBoxStyle(theme, severity)}>\n      {icon || <Icon name={glyph} size={ERROR_ICON_SIZE} color={errorStatePalette(theme, severity).main} />}\n    </View>\n  );\n}\n\nfunction ErrorText({\n  title,\n  message,\n  titleId,\n  testId,\n}: {\n  title?: string;\n  message: string;\n  titleId: string;\n  testId: (suffix: string) => string;\n}): React.JSX.Element {\n  const theme = useUiTheme();\n  return (\n    <View style={[styles.text, { gap: theme.spacing(ERROR_TEXT_GAP_UNITS) }]}>\n      {title ? (\n        <RNText\n          id={titleId}\n          role=\"heading\"\n          {...webAria({ 'aria-level': 3 })}\n          testID={testId('title')}\n          style={titleStyle(theme)}\n        >\n          {title}\n        </RNText>\n      ) : null}\n      <RNText id={`${titleId}-message`} testID={testId('message')} style={messageStyle(theme)}>\n        {message}\n      </RNText>\n    </View>\n  );\n}\n\nexport const ErrorState: React.FC<ErrorStateProps> = React.memo(function ErrorState(props) {\n  const {\n    message,\n    title,\n    onRetry,\n    retryLabel = 'Retry',\n    severity = 'error',\n    icon,\n    style,\n    ...others\n  } = props;\n  const theme = useUiTheme();\n  const titleId = React.useId();\n  const dataTestId = resolveTestId(others);\n  const testId = makeTestId(dataTestId);\n  const rest = withoutTestIdProps(others);\n\n  return (\n    <View\n      role=\"alert\"\n      aria-labelledby={title ? titleId : undefined}\n      {...webAria({ 'aria-describedby': `${titleId}-message` })}\n      testID={dataTestId || 'error-state'}\n      style={[\n        styles.root,\n        {\n          padding: theme.spacing(ERROR_STATE_PADDING_UNITS),\n          minHeight: ERROR_STATE_MIN_HEIGHT,\n          gap: theme.spacing(ERROR_STATE_GAP_UNITS),\n        },\n        style,\n      ]}\n      {...rest}\n    >\n      <ErrorIcon severity={severity} icon={icon} testId={testId('icon')} />\n\n      <ErrorText title={title} message={message} titleId={titleId} testId={testId} />\n\n      {onRetry ? (\n        <Button\n          variant=\"outline\"\n          color={severity === 'error' ? 'danger' : 'warning'}\n          size=\"sm\"\n          icon={<Icon name=\"Refresh\" size={RETRY_BUTTON.iconSize} color={severity === 'error' ? 'danger' : 'warning'} />}\n          onClick={onRetry}\n          testID={testId('retry-button')}\n          style={retryStyle(theme)}\n        >\n          {retryLabel}\n        </Button>\n      ) : null}\n    </View>\n  );\n});\n\nErrorState.displayName = 'ErrorState';\n\nconst styles = StyleSheet.create({\n  root: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  text: {\n    alignItems: 'center',\n  },\n});\n","import type { ErrorStateSeverity } from './ErrorState.base';\nimport type { UiPaletteColor, UiTheme } from '../../../tokens/theme';\n\n/**\n * THE NUMBERS BOTH `ErrorState` RENDERERS DRAW WITH.\n *\n * `ErrorState.tsx` (MUI) and `ErrorState.native.tsx` (React Native) read this\n * one table. Spacing is in SPACING UNITS where the web writes\n * `theme.spacing(n)`; everything else is px or a ratio.\n */\n\n/** The region: a centred column, `theme.spacing(6)` of padding, at least 200px tall, its parts 16px apart. */\nexport const ERROR_STATE_PADDING_UNITS = 6;\nexport const ERROR_STATE_MIN_HEIGHT = 200;\nexport const ERROR_STATE_GAP_UNITS = 2;\n\n/** The glyph sits in an 80px disc of the severity's `light` shade at 0.9 opacity. */\nexport const ERROR_ICON_BOX = 80;\nexport const ERROR_ICON_BOX_OPACITY = 0.9;\nexport const ERROR_ICON_SIZE = 48;\n\n/** Title and message are 8px apart; the message wraps at 400px on a 1.6 line height. */\nexport const ERROR_TEXT_GAP_UNITS = 1;\nexport const ERROR_MESSAGE_MAX_WIDTH = 400;\nexport const ERROR_MESSAGE_LINE_HEIGHT = 1.6;\n\n/** The retry button: 8px below the text, no narrower than 120px. */\nexport const RETRY_MARGIN_TOP_UNITS = 1;\nexport const RETRY_MIN_WIDTH = 120;\n/**\n * The web retry IS MUI's medium outlined `Button`: 5px 15px inside its 1px\n * border, 14px type, the theme's radius, a 20px start icon. The native side\n * sizes the house `Button` to these.\n */\nexport const RETRY_BUTTON = {\n  paddingVertical: 5,\n  paddingHorizontal: 15,\n  iconSize: 20,\n} as const;\n\n/** `error` is MUI's name for the `danger` slot; `warning` is its own. */\nexport function errorStatePalette(theme: UiTheme, severity: ErrorStateSeverity): UiPaletteColor {\n  return severity === 'error' ? theme.palette.danger : theme.palette.warning;\n}\n"],"mappings":"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","names":["ErrorState"]}

package/dist/native/data-display/FleetMap.js

@@ -7,8 +7,8 @@ import {
 } from "../chunks/chunk-MJVSQXOD.js";
 import {
   EmptyState
-} from "../chunks/chunk-AVHGS66L.js";
-import "../chunks/chunk-BXNZHDXK.js";
+} from "../chunks/chunk-FGAX5BRS.js";
+import "../chunks/chunk-4SP3BDPZ.js";
 import "../chunks/chunk-3JBZE4I6.js";
 import "../chunks/chunk-ZRQHLTYG.js";
 import {
@@ -16,6 +16,7 @@ import {
   webRole
 } from "../chunks/chunk-DN73KYIZ.js";
 import "../chunks/chunk-5GJ5OG5R.js";
+import "../chunks/chunk-SPK34J7Y.js";
 import "../chunks/chunk-RHD3625Y.js";
 import {
   MUI_FONT_WEIGHT_MEDIUM,