@12-apps/ui 6.33.1 → 6.35.0

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

@@ -1,7 +1,8 @@
 import {
   Button
-} from "../chunks/chunk-KIG4KY4W.js";
+} from "../chunks/chunk-ONXKFA5Z.js";
 import "../chunks/chunk-IMGBBIMT.js";
+import "../chunks/chunk-ZRQHLTYG.js";
 import {
   webAria
 } from "../chunks/chunk-DN73KYIZ.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

@@ -1,15 +1,16 @@
 import {
   Skeleton
-} from "../chunks/chunk-4KWFRDI2.js";
+} from "../chunks/chunk-SZF56GVJ.js";
 import "../chunks/chunk-MLQIOKQZ.js";
 import {
   webKeyDown
 } from "../chunks/chunk-MJVSQXOD.js";
 import {
   EmptyState
-} from "../chunks/chunk-OI57L6WL.js";
-import "../chunks/chunk-KIG4KY4W.js";
+} from "../chunks/chunk-JBYDLWQA.js";
+import "../chunks/chunk-ONXKFA5Z.js";
 import "../chunks/chunk-IMGBBIMT.js";
+import "../chunks/chunk-ZRQHLTYG.js";
 import {
   webAria,
   webRole

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/data-display/FleetMap/FleetMap.native.tsx","../../../src/components/data-display/FleetMap/FleetMap.hooks.ts","../../../src/components/data-display/FleetMap/FleetMap.helpers.ts","../../../src/components/data-display/FleetMap/FleetMap.metrics.ts","../../../src/components/data-display/FleetMap/FleetRoster.native.tsx"],"sourcesContent":["import * as React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\n\nimport { EmptyState } from '../EmptyState/EmptyState.native';\n\nimport { useFleetMap } from './FleetMap.hooks';\nimport {\n  FLEET_DEFAULT_LAGGING_AFTER_SECONDS,\n  FLEET_DEFAULT_STALE_AFTER_SECONDS,\n  FLEET_PANEL,\n} from './FleetMap.metrics';\nimport type { FleetMapProps } from './FleetMap.types.native';\nimport { FleetRoster } from './FleetRoster.native';\nimport { webAria, webRole } from '../../../platform/aria';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { MUI_FONT_WEIGHT_MEDIUM, muiTypeStyle } from '../../../tokens/mui-type';\n\n/**\n * The reload announcement, and nothing else.\n *\n * A busy region marks itself stale for assistive technology but UTTERS nothing,\n * and the skeletons beside it are hidden from the reader — so a screen-reader\n * user got silence while the roster reloaded. This is the utterance.\n *\n * Optional by design: the sentence is in the reader's language, which only the\n * caller knows, and inventing an English one in a component whose whole premise\n * is that every word arrives through `copy` would be the bug it exists to\n * avoid. No `copy.loading`, no region.\n *\n * ## The node outlives the text, and that is the whole trick\n *\n * A live region has to exist BEFORE its content changes; a reader watches an\n * existing region for mutations rather than announcing one that appears already\n * populated. Mounting region-and-text together in a single commit is the classic\n * silent case — it satisfies a query while announcing nothing. So the region\n * mounts as soon as the caller offers the copy and merely EMPTIES when idle.\n *\n * `role=\"status\"` and `aria-live` reach the DOM through react-native-web; on a\n * device the announcement is made by `AccessibilityInfo` or not at all, which\n * is recorded in `NATIVE-NOTES.md` rather than papered over here.\n */\nfunction FleetStatus({\n  announcement,\n  loading,\n  testId,\n}: {\n  announcement: string | undefined;\n  loading: boolean;\n  testId: string;\n}): React.JSX.Element | null {\n  // No copy, no region at all — the caller has not asked for an announcement.\n  if (announcement === undefined) return null;\n  return (\n    <View\n      {...webRole('status')}\n      aria-live=\"polite\"\n      accessibilityLiveRegion=\"polite\"\n      testID={`${testId}-status`}\n      style={styles.srOnly}\n    >\n      <Text>{loading ? announcement : ''}</Text>\n    </View>\n  );\n}\n\n/**\n * FleetMap on React Native — where a set of tracked units is right now.\n *\n * Product-free by construction: it draws a labelled row with a freshness, and\n * every word — the heading, the three freshness states, how a duration and a\n * distance are written — arrives through `copy`. Couriers, service vans and\n * field engineers are all the same list.\n *\n * ## What this renderer does NOT draw, and why\n *\n * There is no map. `MapPreview` — 2,200 lines that project, tile and decorate\n * their own surface — has no React Native build, and porting it is its own\n * change with its own consumers. What that costs is smaller than it sounds,\n * because the web half already calls this list \"the accessible representation,\n * not a sidebar\": every fact a pin carries — who, how recently, how precisely,\n * what they are carrying — is on a row, in an order the map cannot express. So\n * a native board is the half a screen reader was always given, and a device\n * gets the same answers a dispatcher asks for. The gap is stated in\n * `NATIVE-NOTES.md` rather than claimed away, and it is where the map goes when\n * `MapPreview` is ported.\n *\n * The consequence for the API is one line in `FleetMap.types.native.ts`: the\n * native copy interface has no `map` and no `mapLabel`, because a caller should\n * not be asked to name controls nothing renders.\n */\nexport const FleetMap: React.FC<FleetMapProps> = React.memo(\n  ({\n    units,\n    copy,\n    // NO default. `undefined` is what tells the hook the caller does not own\n    // the selection; defaulting it to `null` made every render look controlled\n    // and the uncontrolled path unreachable.\n    selectedId,\n    onSelect,\n    laggingAfterSeconds = FLEET_DEFAULT_LAGGING_AFTER_SECONDS,\n    staleAfterSeconds = FLEET_DEFAULT_STALE_AFTER_SECONDS,\n    loading = false,\n    maxHeight,\n    style,\n    dataTestId,\n  }) => {\n    const theme = useUiTheme();\n    const testId = dataTestId ?? 'fleet-map';\n    const { ordered, active, select, onKeyDown } = useFleetMap(units, selectedId, onSelect);\n\n    return (\n      <View\n        {...webRole('region')}\n        accessibilityLabel={copy.title}\n        testID={testId}\n        style={[styles.panel, { gap: theme.spacing(FLEET_PANEL.gapUnits) }, style]}\n      >\n        <Text\n          {...webRole('heading')}\n          {...webAria({ 'aria-level': 2 })}\n          testID={`${testId}-title`}\n          style={[\n            muiTypeStyle(theme, 'body1'),\n            { color: theme.palette.text.primary, fontWeight: `${MUI_FONT_WEIGHT_MEDIUM}` },\n          ]}\n        >\n          {copy.title}\n        </Text>\n\n        <FleetStatus announcement={copy.loading} loading={loading} testId={testId} />\n\n        {!loading && ordered.length === 0 ? (\n          <EmptyState\n            variant=\"minimal\"\n            title={copy.emptyTitle}\n            description={copy.emptyDescription}\n            dataTestId={`${testId}-empty`}\n          />\n        ) : (\n          /* The busy marker belongs on the BODY and never on the panel root —\n             the live region announcing the reload is a sibling above, and a\n             live region inside a busy subtree is exactly what busy tells\n             assistive technology to hold back. Marking the root would silence\n             the announcement for the whole of the only window in which it has\n             anything to say. The web half splits them the same way, and the\n             wrapper is also what the shared loading stories address. */\n          <View\n            aria-busy={loading || undefined}\n            accessibilityState={{ busy: loading }}\n            testID={`${testId}-body`}\n            style={styles.body}\n          >\n            <FleetRoster\n              units={ordered}\n              copy={copy}\n              selectedId={active}\n              onSelect={select}\n              laggingAfterSeconds={laggingAfterSeconds}\n              staleAfterSeconds={staleAfterSeconds}\n              loading={loading}\n              maxHeight={maxHeight}\n              testId={testId}\n              onKeyDown={onKeyDown}\n            />\n          </View>\n        )}\n      </View>\n    );\n  },\n);\n\nFleetMap.displayName = 'FleetMap';\n\nconst styles = StyleSheet.create({\n  body: { flexShrink: 1, minWidth: 0 },\n  panel: { flexDirection: 'column', minWidth: 0 },\n  /**\n   * Off screen but still in the tree, which is what a live region needs. A\n   * `display: 'none'` view is not announced, and a zero-size one clips its text\n   * on some readers.\n   */\n  srOnly: { height: 1, opacity: 0, overflow: 'hidden', position: 'absolute', width: 1 },\n});\n\nexport default FleetMap;\n","import React from 'react';\n\nimport { mapCentre, nextSelection, rosterOrder, type LatLng } from './FleetMap.helpers';\nimport type { FleetUnit } from './FleetMap.base';\n\n/**\n * The half of a key event this hook reads, spelled structurally.\n *\n * NOT `React.KeyboardEvent<HTMLDivElement>`: the native type program is checked\n * without the DOM lib (`tsconfig.native.json`), so a DOM type here would put\n * the whole hook out of reach of the React Native renderer that shares it. A\n * DOM event satisfies this shape, and a handler taking the wider type is\n * assignable wherever the narrower one is expected — so the web passes its own\n * `onKeyDown` unchanged.\n */\nexport interface FleetKeyEvent {\n  key: string;\n  altKey?: boolean;\n  ctrlKey?: boolean;\n  metaKey?: boolean;\n  shiftKey?: boolean;\n  preventDefault: () => void;\n}\n\n/**\n * Everything the board derives from its props, in one hook.\n *\n * Split out of the component so the component is layout and nothing else.\n *\n * The memos are honest about what they buy, which is less than it looks. `units`\n * arrives as a fresh array on every poll, so `ordered` and `markers` are\n * recomputed on every poll whatever these do — a new array is a new identity.\n * What they buy is stability across the renders a poll does NOT cause: a parent\n * re-render, a selection change (which re-runs `centre` but not `ordered`), a\n * theme flip. Sorting a fleet is cheap either way; this is tidiness, not a\n * measured win, and it should not be read as one.\n *\n * `centre` is the exception, and there it is load-bearing rather than tidy —\n * see {@link useFleetMap}.\n *\n * ## Selection works with, without, or half-way through a handler\n *\n * `selectedId` and `onSelect` are both optional, so all four combinations\n * arrive. Left purely controlled, the two useful ones broke: with neither prop\n * the roster was a listbox that answered nothing, and arrowing it called\n * `preventDefault` before a no-op `select`, so the keys did not move a\n * selection AND did not scroll the page either.\n *\n * So the hook keeps its own selection and defers to `selectedId` only when the\n * caller passes one — the ordinary controlled/uncontrolled split, the same one\n * an `<input>` makes. `onSelect` still fires either way, so a consumer can\n * observe the selection without owning it.\n */\n\n/** One pin, in the shape `MapPreview` takes. */\nexport interface FleetMarker {\n  position: LatLng;\n  title: string;\n  onClick: () => void;\n}\n\nexport interface FleetMapState {\n  /** The units, freshest first — see {@link rosterOrder}. */\n  ordered: FleetUnit[];\n  /**\n   * The selection in force — the caller's when they own it, this hook's when\n   * they do not. Everything downstream reads THIS and never the raw prop.\n   */\n  active: string | null;\n  /** Where the map points, or `null` when there is nothing to show. */\n  centre: LatLng | null;\n  select: (id: string) => void;\n  markers: FleetMarker[];\n  onKeyDown: (event: FleetKeyEvent) => void;\n}\n\n/** Which way an arrow moves the selection, or `0` when it is not ours. */\nfunction stepFor(event: FleetKeyEvent): 1 | -1 | 0 {\n  // A modified arrow is the PAGE's shortcut, not the roster's: Cmd+Down is\n  // \"scroll to the end of the document\" on macOS, and Shift+Arrow extends a\n  // selection. Capturing them would take a browser gesture away.\n  if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return 0;\n  if (event.key === 'ArrowDown') return 1;\n  if (event.key === 'ArrowUp') return -1;\n  return 0;\n}\n\n/**\n * Who owns the selection, decided ONCE on the first render.\n *\n * Exactly as React decides it for an `<input>`, and for the same reason.\n * `selectedId` is typed `string | null | undefined`, so `useState<string>()` —\n * the natural shape for a caller — hands us `undefined` on the first render and\n * again on every reset. Re-deriving the mode from the prop each time would make\n * the component change its own semantics mid-life: it starts uncontrolled,\n * silently becomes controlled the moment the caller's `onSelect` writes a value\n * back, and then silently un-becomes it when they clear — resurrecting whatever\n * was selected before the hand-off.\n *\n * Latched, `undefined` is unambiguous within each mode: to a controlled board it\n * is \"nobody is selected\", so clearing the caller's state clears the roster; to\n * an uncontrolled one it is simply the prop staying absent. A caller who wants\n * control passes `string | null` from the first render.\n */\nfunction useSelection(\n  selectedId: string | null | undefined,\n  onSelect: ((id: string) => void) | undefined,\n): { active: string | null; select: (id: string) => void; controlled: boolean } {\n  const controlledRef = React.useRef(selectedId !== undefined);\n  const controlled = controlledRef.current;\n  const [own, setOwn] = React.useState<string | null>(null);\n\n  const select = React.useCallback(\n    (id: string) => {\n      if (!controlled) setOwn(id);\n      onSelect?.(id);\n    },\n    [controlled, onSelect],\n  );\n\n  return { active: controlled ? (selectedId ?? null) : own, select, controlled };\n}\n\nexport function useFleetMap(\n  units: readonly FleetUnit[],\n  selectedId: string | null | undefined,\n  onSelect: ((id: string) => void) | undefined,\n): FleetMapState {\n  const ordered = React.useMemo(() => rosterOrder(units), [units]);\n  const { active, select, controlled } = useSelection(selectedId, onSelect);\n\n  // Memoised on the COORDINATES and not the object, because `mapCentre` builds\n  // a fresh literal every call and `MapPreview` re-centres from an effect keyed\n  // on `center`'s identity. A poll that changes nothing would otherwise hand it\n  // a new object, and the map would jump back to the centroid — throwing away a\n  // pan the dispatcher had just made, on a timer, for as long as they watch it.\n  //\n  // ROUNDED, because keying on the raw numbers was not enough. `mapCentre`\n  // sums over `ordered`, and floating-point addition is not associative — so\n  // re-sorting the SAME coordinates can change the centroid's last bit.\n  // `rosterOrder` sorts on `staleSeconds`, which moves on every poll, so rank\n  // swaps are the ordinary case for a fleet that is standing still: measured\n  // over 20k random three-rider fleets, a single adjacent swap changed the\n  // centroid 17% of the time. Six decimals is ~11cm, far finer than a map\n  // centre resolves and far coarser than the noise.\n  const raw = mapCentre(ordered, active);\n  const lat = raw === null ? null : Math.round(raw.lat * 1e6) / 1e6;\n  const lng = raw === null ? null : Math.round(raw.lng * 1e6) / 1e6;\n  const centre = React.useMemo(\n    () => (lat === null || lng === null ? null : { lat, lng }),\n    [lat, lng],\n  );\n\n  const onKeyDown = React.useCallback(\n    (event: FleetKeyEvent) => {\n      const step = stepFor(event);\n      if (step === 0) return;\n      // Nothing can move a CONTROLLED selection without a handler, so the keys\n      // belong to the page. Swallowing them there left a keyboard user unable to\n      // move the selection and unable to scroll past the roster.\n      if (controlled && !onSelect) return;\n      const next = nextSelection(ordered, active, step);\n      // `preventDefault` only once a move is certain, so the page still scrolls\n      // with the arrow keys when the list is empty and there is nothing to move.\n      if (next === null) return;\n      event.preventDefault();\n      select(next);\n    },\n    [ordered, active, select, controlled, onSelect],\n  );\n\n  const markers = React.useMemo(\n    () =>\n      ordered.map((unit) => ({\n        position: { lat: unit.latitude, lng: unit.longitude },\n        title: unit.label,\n        onClick: () => select(unit.id),\n      })),\n    [ordered, select],\n  );\n\n  return { ordered, active, centre, select, markers, onKeyDown };\n}\n","import type { FleetFreshness, FleetUnit } from './FleetMap.base';\n\n/**\n * How current a fix is, on the two thresholds the caller supplied.\n *\n * Inclusive at both boundaries in the direction that reads better on a screen:\n * a unit exactly at the lagging threshold is already lagging. A boundary has to\n * fall somewhere, and the conservative side is the one that does not tell a\n * dispatcher somebody is live when they are on the edge of not being.\n */\nexport function freshnessOf(\n  staleSeconds: number,\n  laggingAfterSeconds: number,\n  staleAfterSeconds: number,\n): FleetFreshness {\n  if (staleSeconds >= staleAfterSeconds) return 'stale';\n  if (staleSeconds >= laggingAfterSeconds) return 'lagging';\n  return 'live';\n}\n\n/** A latitude/longitude pair, as the map wants its centre. */\nexport interface LatLng {\n  lat: number;\n  lng: number;\n}\n\n/**\n * Where the map should point.\n *\n * The selected unit when there is one — a dispatcher who clicked a name is\n * asking to look at them. Otherwise the fleet's own centroid, which keeps\n * everybody in frame without the caller having to compute a bounding box.\n *\n * `null` for an empty fleet rather than a coordinate: (0, 0) is a real place in\n * the Atlantic, and a map that quietly sails there is worse than one that says\n * it has nothing to show.\n */\nexport function mapCentre(\n  units: readonly FleetUnit[],\n  selectedId?: string | null,\n): LatLng | null {\n  if (units.length === 0) return null;\n  const selected = selectedId ? units.find((unit) => unit.id === selectedId) : undefined;\n  if (selected) return { lat: selected.latitude, lng: selected.longitude };\n  const sum = units.reduce(\n    (acc, unit) => ({ lat: acc.lat + unit.latitude, lng: acc.lng + unit.longitude }),\n    { lat: 0, lng: 0 },\n  );\n  return { lat: sum.lat / units.length, lng: sum.lng / units.length };\n}\n\n/**\n * The roster's order: freshest first, then alphabetically.\n *\n * Not the caller's order, deliberately. The one question this panel answers is\n * *who is moving right now*, and a list sorted by anything else buries the\n * answer under whoever happens to sort first. Ties break on the label so the\n * list does not reshuffle between polls when two units share a staleness.\n */\nexport function rosterOrder(units: readonly FleetUnit[]): FleetUnit[] {\n  return [...units].sort(\n    (a, b) => a.staleSeconds - b.staleSeconds || a.label.localeCompare(b.label),\n  );\n}\n\n/**\n * Move the selection by one row, wrapping at both ends.\n *\n * Wrapping rather than stopping: this is a short list a dispatcher arrows\n * through repeatedly, and a selection that sticks at the last row makes the\n * keyboard path feel broken next to the mouse one.\n */\nexport function nextSelection(\n  units: readonly FleetUnit[],\n  currentId: string | null | undefined,\n  step: 1 | -1,\n): string | null {\n  if (units.length === 0) return null;\n  const index = units.findIndex((unit) => unit.id === currentId);\n  // Nothing selected: Down opens at the top and Up opens at the bottom, which\n  // is what every listbox in the house does.\n  if (index === -1) return (step === 1 ? units[0] : units[units.length - 1])?.id ?? null;\n  const next = (index + step + units.length) % units.length;\n  return units[next]?.id ?? null;\n}\n","/**\n * THE NUMBERS BOTH `FleetMap` RENDERERS DRAW WITH.\n *\n * `FleetRoster.tsx` / `FleetMap.tsx` (web, MUI `sx`) and `FleetRoster.native.tsx`\n * / `FleetMap.native.tsx` (React Native) read this one table. The web hands the\n * spacing UNITS to `theme.spacing()` and the radius MULTIPLES to `sx`; native\n * multiplies the units by the theme's own spacing step and the multiples by\n * `shape.borderRadius`.\n *\n * Nothing here imports a renderer, a theme or a colour: a freshness dot's\n * COLOUR is the theme's (`success.main`, `warning.main`, `text.disabled`), and\n * the two sides reach the same palette through different doors.\n *\n * ## Why the radii are MULTIPLES and never pixels\n *\n * MUI's `sx` reads a bare number for `borderRadius` as a multiple of\n * `theme.shape.borderRadius`, so a value that already had the theme's radius\n * divided out of it is applied twice. Measured: `theme.shape.borderRadius / 4`\n * drew 4px on the default theme — which is why it looked right — and 36px on a\n * host that sets its own radius to 12. In a package whose whole premise is\n * being re-themed, only the multiple is portable, and it is the multiple that\n * both renderers store here.\n */\n\n/** `theme.spacing(n)` for the panel's own stack. */\nexport const FLEET_PANEL = {\n  /** Between the heading, the status region and the body. */\n  gapUnits: 1.5,\n} as const;\n\n/** The roster list box. */\nexport const FLEET_ROSTER = {\n  /** Between rows. */\n  gapUnits: 0.5,\n  /** `:focus-visible` ring on the web; a device has no focus ring to draw. */\n  focusRingWidth: 2,\n  focusRingOffset: 2,\n} as const;\n\n/** One roster row. */\nexport const FLEET_ROW = {\n  /** Between the dot, the text block and the badge. */\n  gapUnits: 1.5,\n  /** `theme.spacing(y, x)`. */\n  paddingYUnits: 1,\n  paddingXUnits: 1.5,\n  /** A MULTIPLE of `theme.shape.borderRadius` — see the note above. */\n  radiusMultiple: 1,\n} as const;\n\n/**\n * The freshness dot.\n *\n * A perfect circle, so the radius is half the box on both sides rather than\n * the web's `50%`: React Native resolves a percentage radius against the box\n * it is given, and a square box makes the two spellings agree.\n */\nexport const FLEET_DOT = {\n  size: 10,\n} as const;\n\n/** What stands in for the roster before any unit has landed. */\nexport const FLEET_SKELETON = {\n  /** Three bars, the height of a row with its padding. */\n  rows: 3,\n  height: 44,\n  /** A MULTIPLE, for the same reason the row's is. */\n  radiusMultiple: 1,\n  gapUnits: 1,\n} as const;\n\n/**\n * How long a fix stays `live`, and then `lagging`, when the caller says nothing.\n *\n * Ninety seconds and five minutes: sized for a phone reporting every twenty\n * seconds, which is the densest cadence a battery tolerates all day. They are\n * DEFAULTS and not a rule — a fleet on five-minute trackers passes its own, and\n * the props exist so it can.\n */\nexport const FLEET_DEFAULT_LAGGING_AFTER_SECONDS = 90;\nexport const FLEET_DEFAULT_STALE_AFTER_SECONDS = 300;\n","import * as React from 'react';\nimport {\n  Pressable,\n  ScrollView,\n  StyleSheet,\n  Text,\n  View,\n  type LayoutChangeEvent,\n  type NativeScrollEvent,\n  type NativeSyntheticEvent,\n} from 'react-native';\n\nimport { Skeleton } from '../../layout/Skeleton/Skeleton.native';\n\nimport { freshnessOf } from './FleetMap.helpers';\nimport type { FleetKeyEvent } from './FleetMap.hooks';\nimport { FLEET_DOT, FLEET_ROSTER, FLEET_ROW, FLEET_SKELETON } from './FleetMap.metrics';\nimport type { FleetFreshness, FleetMapCopy, FleetUnit } from './FleetMap.types.native';\nimport { webAria, webRole } from '../../../platform/aria';\nimport { webKeyDown } from '../../../platform/web-keys';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { muiTypeStyle } from '../../../tokens/mui-type';\nimport type { UiTheme } from '../../../tokens/theme';\n\n/**\n * The roster — which on React Native is the WHOLE component, not half of it.\n *\n * On the web this list sits beside a map and carries the information a picture\n * cannot give a screen reader. Here there is no map to sit beside: `MapPreview`\n * has no React Native build, so the native `FleetMap` renders this and says so\n * in `NATIVE-NOTES.md`. That is a smaller change than it sounds, because the\n * web half already treats this list as the component's real content — \"the\n * accessible representation, not a sidebar\" — and every fact a pin carries is\n * on a row here.\n */\n\n/**\n * `data-freshness`, as something JSX can spread onto a react-native element.\n *\n * Through `dataSet` and NOT as a bare `data-freshness` prop: react-native-web\n * drops unknown props rather than forwarding them, and special-cases only\n * `data-testid`. Measured — the attribute was simply absent from the row, so\n * the shared freshness stories read `null`. `dataSet` is rn-web's documented\n * channel for custom data attributes and renders `data-freshness`; React Native\n * ignores it on a device, which is the same trade `webRole` and `webAria` make.\n *\n * It is not decoration: the SHARED stories read this attribute to assert which\n * threshold a row landed on, so without it they cannot run here at all.\n */\nfunction webDataFreshness(freshness: FleetFreshness): object {\n  return { dataSet: { freshness } };\n}\n\n/** Each freshness draws from the semantic palette, never a hardcoded hex. */\nfunction freshnessColor(freshness: FleetFreshness, theme: UiTheme): string {\n  if (freshness === 'live') return theme.palette.success.main;\n  if (freshness === 'lagging') return theme.palette.warning.main;\n  return theme.palette.text.disabled;\n}\n\n/** Where each row sits inside the scrolling content, and what is on screen. */\ninterface RosterGeometry {\n  rows: Map<string, { y: number; height: number }>;\n  offset: number;\n  viewport: number;\n}\n\n/**\n * Keep the selected row visible INSIDE the roster — the same arithmetic the web\n * does with `scrollTop`, expressed in the only terms React Native has.\n *\n * The web reads `box.offsetTop - list.offsetTop` against `list.scrollTop` and\n * `list.clientHeight`. None of those exist here, so the three numbers are\n * gathered as they arrive: a row's `onLayout` gives its `y` inside the content\n * container (already relative to the list, which is what the web computes by\n * subtraction), the `ScrollView`'s own `onLayout` gives the viewport height,\n * and `onScroll` gives the offset. The comparison below is then line-for-line\n * the web's.\n *\n * `scrollTo` rather than react-native's `scrollToEnd`/`ScrollView.scrollIntoView`\n * for the same reason the web refuses `scrollIntoView({ block: 'nearest' })`:\n * this must move THIS list and nothing else. A native `ScrollView` cannot walk\n * its ancestors, so the hazard is smaller here — but the arithmetic is shared,\n * and two renderers agreeing by construction beats two agreeing by coincidence.\n *\n * Watches `position` as well as the id, because the roster re-sorts on every\n * poll: a rider who stays selected while their staleness moves them down the\n * list would otherwise slide out of view with the effect never re-running.\n */\nfunction useKeptInView(\n  scroll: React.RefObject<ScrollView | null>,\n  geometry: React.RefObject<RosterGeometry>,\n  activeId: string | null,\n  position: number,\n): void {\n  React.useEffect(() => {\n    if (activeId === null) return;\n    const { rows, offset, viewport } = geometry.current;\n    const row = rows.get(activeId);\n    // Nothing has laid out yet on the first commit; the next poll re-runs this.\n    if (!row || viewport === 0) return;\n    if (row.y < offset) {\n      scroll.current?.scrollTo({ y: row.y, animated: false });\n    } else if (row.y + row.height > offset + viewport) {\n      scroll.current?.scrollTo({ y: row.y + row.height - viewport, animated: false });\n    }\n  }, [scroll, geometry, activeId, position]);\n}\n\n/**\n * A row's two lines of text — the name, and the one-line summary under it.\n *\n * Split out of {@link FleetRow} to keep that function under the size gate, and\n * the seam is the natural one: everything here is READ, nothing is interactive.\n */\nfunction RowText({\n  unit,\n  copy,\n  freshness,\n  testId,\n}: Pick<RowProps, 'unit' | 'copy' | 'freshness' | 'testId'>): React.JSX.Element {\n  const theme = useUiTheme();\n\n  // Dropped rather than rendered empty: a phone that reports no accuracy radius\n  // would otherwise print a trailing separator with nothing after it.\n  const meta = [\n    copy.freshness[freshness],\n    copy.lastSeen(unit.staleSeconds),\n    unit.accuracyM == null ? null : copy.accuracy(unit.accuracyM),\n  ]\n    .filter((part): part is string => Boolean(part))\n    .join(' · ');\n\n  return (\n    <View style={styles.rowText}>\n      <Text\n        testID={`${testId}-label`}\n        style={[muiTypeStyle(theme, 'body2'), styles.label, { color: theme.palette.text.primary }]}\n      >\n        {unit.label}\n      </Text>\n      <Text\n        testID={`${testId}-meta`}\n        style={[muiTypeStyle(theme, 'caption'), { color: theme.palette.text.secondary }]}\n      >\n        {meta}\n      </Text>\n    </View>\n  );\n}\n\ninterface RowProps {\n  unit: FleetUnit;\n  copy: FleetMapCopy;\n  freshness: FleetFreshness;\n  selected: boolean;\n  onSelect: (id: string) => void;\n  onMeasured: (id: string, y: number, height: number) => void;\n  /** The row's own DOM id, which `aria-activedescendant` points at. */\n  optionId: string;\n  testId: string;\n}\n\n/**\n * One roster row.\n *\n * A `Pressable` rather than a `View` with an `onClick`: a press is the input on\n * a device, and `Pressable` is what gives the row its pressed state and its\n * accessibility role in one element. The PRESSED wash stands in for the web's\n * hover — and, as on the web, it must never weaken the selection, so a selected\n * row keeps `action.selected` whether or not a finger is on it.\n */\nfunction FleetRow({\n  unit,\n  copy,\n  freshness,\n  selected,\n  onSelect,\n  onMeasured,\n  optionId,\n  testId,\n}: RowProps): React.JSX.Element {\n  const theme = useUiTheme();\n\n  const measure = React.useCallback(\n    (event: LayoutChangeEvent) => {\n      const { y, height } = event.nativeEvent.layout;\n      onMeasured(unit.id, y, height);\n    },\n    [onMeasured, unit.id],\n  );\n\n  return (\n    <Pressable\n      {...webRole('option')}\n      {...webDataFreshness(freshness)}\n      // Without this the roster's `aria-activedescendant` names an element that\n      // does not exist, which announces nothing and fails an axe audit — worse\n      // than omitting the attribute. Measured: the row carried no id at all.\n      id={optionId}\n      // BOTH, and neither is redundant. `accessibilityState` is what a DEVICE\n      // reads; react-native-web does not turn it into `aria-selected`, so\n      // without the attribute beside it the web build conveys the selection by\n      // background colour alone — which is the one thing this component refuses\n      // to do for freshness, and no more acceptable here.\n      accessibilityState={{ selected }}\n      aria-selected={selected}\n      testID={testId}\n      onPress={() => onSelect(unit.id)}\n      onLayout={measure}\n      style={({ pressed }) => [\n        styles.row,\n        {\n          gap: theme.spacing(FLEET_ROW.gapUnits),\n          paddingVertical: theme.spacing(FLEET_ROW.paddingYUnits),\n          paddingHorizontal: theme.spacing(FLEET_ROW.paddingXUnits),\n          borderRadius: FLEET_ROW.radiusMultiple * theme.radius.md,\n          backgroundColor: selected\n            ? theme.palette.action.selected\n            : pressed\n              ? theme.palette.action.hover\n              : 'transparent',\n        },\n      ]}\n    >\n      {/* The dot repeats what the freshness word beside it already says, so it\n          is hidden rather than read twice — and colour is never the only\n          carrier of the state. */}\n      <View\n        accessibilityElementsHidden\n        importantForAccessibility=\"no-hide-descendants\"\n        testID={`${testId}-dot`}\n        style={[styles.dot, { backgroundColor: freshnessColor(freshness, theme) }]}\n      />\n      <RowText unit={unit} copy={copy} freshness={freshness} testId={testId} />\n      {unit.badge !== undefined && unit.badge !== '' && (\n        <Text\n          testID={`${testId}-badge`}\n          style={[\n            muiTypeStyle(theme, 'caption'),\n            styles.badge,\n            { color: theme.palette.text.secondary },\n          ]}\n        >\n          {unit.badge}\n        </Text>\n      )}\n    </Pressable>\n  );\n}\n\n/**\n * What stands in for the roster before any unit has landed.\n *\n * Hidden from the reader, because three grey bars are not information — the\n * panel's busy state and its optional announcement carry that. The radius is\n * the same MULTIPLE a real row uses rather than a raw pixel count.\n */\nfunction FirstLoad({ testId }: { testId: string }): React.JSX.Element {\n  const theme = useUiTheme();\n  return (\n    <View\n      testID={`${testId}-skeleton`}\n      accessibilityElementsHidden\n      importantForAccessibility=\"no-hide-descendants\"\n      style={{ gap: theme.spacing(FLEET_SKELETON.gapUnits) }}\n    >\n      {Array.from({ length: FLEET_SKELETON.rows }, (_, row) => (\n        <Skeleton\n          key={row}\n          variant=\"rectangular\"\n          height={FLEET_SKELETON.height}\n          borderRadius={FLEET_SKELETON.radiusMultiple}\n        />\n      ))}\n    </View>\n  );\n}\n\nexport interface FleetRosterProps {\n  units: readonly FleetUnit[];\n  copy: FleetMapCopy;\n  selectedId: string | null | undefined;\n  onSelect: (id: string) => void;\n  laggingAfterSeconds: number;\n  staleAfterSeconds: number;\n  loading: boolean;\n  maxHeight: number | undefined;\n  testId: string;\n  onKeyDown: (event: FleetKeyEvent) => void;\n}\n\nexport function FleetRoster({\n  units,\n  copy,\n  selectedId,\n  onSelect,\n  laggingAfterSeconds,\n  staleAfterSeconds,\n  loading,\n  maxHeight,\n  testId,\n  onKeyDown,\n}: FleetRosterProps): React.JSX.Element {\n  const theme = useUiTheme();\n  const scroll = React.useRef<ScrollView>(null);\n  const geometry = React.useRef<RosterGeometry>({ rows: new Map(), offset: 0, viewport: 0 });\n\n  // Generated, not derived from `dataTestId`: two boards on one screen filtered\n  // from the same fleet would otherwise emit duplicate ids and an ambiguous\n  // `aria-activedescendant` under react-native-web.\n  const rowIdPrefix = React.useId();\n\n  // The selection is CONTROLLED, so it can name a unit that has since dropped\n  // out of the freshness window — a courier ending their shift mid-poll. The\n  // attribute must then be absent rather than pointing at a row that no longer\n  // renders. `mapCentre` and `nextSelection` both handle the same case.\n  const active = units.some((unit) => unit.id === selectedId) ? (selectedId ?? null) : null;\n  const position = active === null ? -1 : units.findIndex((unit) => unit.id === active);\n\n  const onMeasured = React.useCallback((id: string, y: number, height: number) => {\n    geometry.current.rows.set(id, { y, height });\n  }, []);\n\n  useKeptInView(scroll, geometry, active, position);\n\n  if (loading && units.length === 0) return <FirstLoad testId={testId} />;\n\n  return (\n    <ScrollView\n      ref={scroll}\n      {...webRole('listbox')}\n      // A single tab stop with the arrow keys inside it, which is the listbox\n      // pattern and what `aria-activedescendant` below is for: a dispatcher\n      // tabbing past a fleet of thirty should not press it thirty times. React\n      // Native has no tab order, so this reaches the DOM through\n      // react-native-web and does nothing on a device — where each row is its\n      // own touch target anyway.\n      tabIndex={0}\n      {...webAria({ 'aria-activedescendant': active ? `${rowIdPrefix}-${active}` : undefined })}\n      {...webKeyDown(onKeyDown)}\n      accessibilityLabel={copy.rosterLabel}\n      testID={`${testId}-roster`}\n      style={maxHeight === undefined ? undefined : { maxHeight }}\n      contentContainerStyle={{ gap: theme.spacing(FLEET_ROSTER.gapUnits) }}\n      onLayout={(event: LayoutChangeEvent) => {\n        geometry.current.viewport = event.nativeEvent.layout.height;\n      }}\n      onScroll={(event: NativeSyntheticEvent<NativeScrollEvent>) => {\n        geometry.current.offset = event.nativeEvent.contentOffset.y;\n      }}\n      scrollEventThrottle={16}\n    >\n      {units.map((unit) => (\n        <FleetRow\n          key={unit.id}\n          unit={unit}\n          copy={copy}\n          freshness={freshnessOf(unit.staleSeconds, laggingAfterSeconds, staleAfterSeconds)}\n          selected={unit.id === active}\n          onSelect={onSelect}\n          onMeasured={onMeasured}\n          optionId={`${rowIdPrefix}-${unit.id}`}\n          testId={`${testId}-${unit.id}`}\n        />\n      ))}\n    </ScrollView>\n  );\n}\n\nconst styles = StyleSheet.create({\n  badge: { flexShrink: 0 },\n  dot: {\n    borderRadius: FLEET_DOT.size / 2,\n    flexShrink: 0,\n    height: FLEET_DOT.size,\n    width: FLEET_DOT.size,\n  },\n  label: { fontWeight: '500' },\n  row: { alignItems: 'center', flexDirection: 'row' },\n  rowText: { flexGrow: 1, flexShrink: 1, minWidth: 0 },\n});\n"],"mappings":"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","names":["React","StyleSheet","Text","View","React","jsx","jsxs","View","styles","Text","StyleSheet"]}
+{"version":3,"sources":["../../../src/components/data-display/FleetMap/FleetMap.native.tsx","../../../src/components/data-display/FleetMap/FleetMap.hooks.ts","../../../src/components/data-display/FleetMap/FleetMap.helpers.ts","../../../src/components/data-display/FleetMap/FleetMap.metrics.ts","../../../src/components/data-display/FleetMap/FleetRoster.native.tsx"],"sourcesContent":["import * as React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\n\nimport { EmptyState } from '../EmptyState/EmptyState.native';\n\nimport { useFleetMap } from './FleetMap.hooks';\nimport {\n  FLEET_DEFAULT_LAGGING_AFTER_SECONDS,\n  FLEET_DEFAULT_STALE_AFTER_SECONDS,\n  FLEET_PANEL,\n} from './FleetMap.metrics';\nimport type { FleetMapProps } from './FleetMap.types.native';\nimport { FleetRoster } from './FleetRoster.native';\nimport { webAria, webRole } from '../../../platform/aria';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { MUI_FONT_WEIGHT_MEDIUM, muiTypeStyle } from '../../../tokens/mui-type';\n\n/**\n * The reload announcement, and nothing else.\n *\n * A busy region marks itself stale for assistive technology but UTTERS nothing,\n * and the skeletons beside it are hidden from the reader — so a screen-reader\n * user got silence while the roster reloaded. This is the utterance.\n *\n * Optional by design: the sentence is in the reader's language, which only the\n * caller knows, and inventing an English one in a component whose whole premise\n * is that every word arrives through `copy` would be the bug it exists to\n * avoid. No `copy.loading`, no region.\n *\n * ## The node outlives the text, and that is the whole trick\n *\n * A live region has to exist BEFORE its content changes; a reader watches an\n * existing region for mutations rather than announcing one that appears already\n * populated. Mounting region-and-text together in a single commit is the classic\n * silent case — it satisfies a query while announcing nothing. So the region\n * mounts as soon as the caller offers the copy and merely EMPTIES when idle.\n *\n * `role=\"status\"` and `aria-live` reach the DOM through react-native-web; on a\n * device the announcement is made by `AccessibilityInfo` or not at all, which\n * is recorded in `NATIVE-NOTES.md` rather than papered over here.\n */\nfunction FleetStatus({\n  announcement,\n  loading,\n  testId,\n}: {\n  announcement: string | undefined;\n  loading: boolean;\n  testId: string;\n}): React.JSX.Element | null {\n  // No copy, no region at all — the caller has not asked for an announcement.\n  if (announcement === undefined) return null;\n  return (\n    <View\n      {...webRole('status')}\n      aria-live=\"polite\"\n      accessibilityLiveRegion=\"polite\"\n      testID={`${testId}-status`}\n      style={styles.srOnly}\n    >\n      <Text>{loading ? announcement : ''}</Text>\n    </View>\n  );\n}\n\n/**\n * FleetMap on React Native — where a set of tracked units is right now.\n *\n * Product-free by construction: it draws a labelled row with a freshness, and\n * every word — the heading, the three freshness states, how a duration and a\n * distance are written — arrives through `copy`. Couriers, service vans and\n * field engineers are all the same list.\n *\n * ## What this renderer does NOT draw, and why\n *\n * There is no map. `MapPreview` — 2,200 lines that project, tile and decorate\n * their own surface — has no React Native build, and porting it is its own\n * change with its own consumers. What that costs is smaller than it sounds,\n * because the web half already calls this list \"the accessible representation,\n * not a sidebar\": every fact a pin carries — who, how recently, how precisely,\n * what they are carrying — is on a row, in an order the map cannot express. So\n * a native board is the half a screen reader was always given, and a device\n * gets the same answers a dispatcher asks for. The gap is stated in\n * `NATIVE-NOTES.md` rather than claimed away, and it is where the map goes when\n * `MapPreview` is ported.\n *\n * The consequence for the API is one line in `FleetMap.types.native.ts`: the\n * native copy interface has no `map` and no `mapLabel`, because a caller should\n * not be asked to name controls nothing renders.\n */\nexport const FleetMap: React.FC<FleetMapProps> = React.memo(\n  ({\n    units,\n    copy,\n    // NO default. `undefined` is what tells the hook the caller does not own\n    // the selection; defaulting it to `null` made every render look controlled\n    // and the uncontrolled path unreachable.\n    selectedId,\n    onSelect,\n    laggingAfterSeconds = FLEET_DEFAULT_LAGGING_AFTER_SECONDS,\n    staleAfterSeconds = FLEET_DEFAULT_STALE_AFTER_SECONDS,\n    loading = false,\n    maxHeight,\n    style,\n    dataTestId,\n  }) => {\n    const theme = useUiTheme();\n    const testId = dataTestId ?? 'fleet-map';\n    const { ordered, active, select, onKeyDown } = useFleetMap(units, selectedId, onSelect);\n\n    return (\n      <View\n        {...webRole('region')}\n        accessibilityLabel={copy.title}\n        testID={testId}\n        style={[styles.panel, { gap: theme.spacing(FLEET_PANEL.gapUnits) }, style]}\n      >\n        <Text\n          {...webRole('heading')}\n          {...webAria({ 'aria-level': 2 })}\n          testID={`${testId}-title`}\n          style={[\n            muiTypeStyle(theme, 'body1'),\n            { color: theme.palette.text.primary, fontWeight: `${MUI_FONT_WEIGHT_MEDIUM}` },\n          ]}\n        >\n          {copy.title}\n        </Text>\n\n        <FleetStatus announcement={copy.loading} loading={loading} testId={testId} />\n\n        {!loading && ordered.length === 0 ? (\n          <EmptyState\n            variant=\"minimal\"\n            title={copy.emptyTitle}\n            description={copy.emptyDescription}\n            dataTestId={`${testId}-empty`}\n          />\n        ) : (\n          /* The busy marker belongs on the BODY and never on the panel root —\n             the live region announcing the reload is a sibling above, and a\n             live region inside a busy subtree is exactly what busy tells\n             assistive technology to hold back. Marking the root would silence\n             the announcement for the whole of the only window in which it has\n             anything to say. The web half splits them the same way, and the\n             wrapper is also what the shared loading stories address. */\n          <View\n            aria-busy={loading || undefined}\n            accessibilityState={{ busy: loading }}\n            testID={`${testId}-body`}\n            style={styles.body}\n          >\n            <FleetRoster\n              units={ordered}\n              copy={copy}\n              selectedId={active}\n              onSelect={select}\n              laggingAfterSeconds={laggingAfterSeconds}\n              staleAfterSeconds={staleAfterSeconds}\n              loading={loading}\n              maxHeight={maxHeight}\n              testId={testId}\n              onKeyDown={onKeyDown}\n            />\n          </View>\n        )}\n      </View>\n    );\n  },\n);\n\nFleetMap.displayName = 'FleetMap';\n\nconst styles = StyleSheet.create({\n  body: { flexShrink: 1, minWidth: 0 },\n  panel: { flexDirection: 'column', minWidth: 0 },\n  /**\n   * Off screen but still in the tree, which is what a live region needs. A\n   * `display: 'none'` view is not announced, and a zero-size one clips its text\n   * on some readers.\n   */\n  srOnly: { height: 1, opacity: 0, overflow: 'hidden', position: 'absolute', width: 1 },\n});\n\nexport default FleetMap;\n","import React from 'react';\n\nimport { mapCentre, nextSelection, rosterOrder, type LatLng } from './FleetMap.helpers';\nimport type { FleetUnit } from './FleetMap.base';\n\n/**\n * The half of a key event this hook reads, spelled structurally.\n *\n * NOT `React.KeyboardEvent<HTMLDivElement>`: the native type program is checked\n * without the DOM lib (`tsconfig.native.json`), so a DOM type here would put\n * the whole hook out of reach of the React Native renderer that shares it. A\n * DOM event satisfies this shape, and a handler taking the wider type is\n * assignable wherever the narrower one is expected — so the web passes its own\n * `onKeyDown` unchanged.\n */\nexport interface FleetKeyEvent {\n  key: string;\n  altKey?: boolean;\n  ctrlKey?: boolean;\n  metaKey?: boolean;\n  shiftKey?: boolean;\n  preventDefault: () => void;\n}\n\n/**\n * Everything the board derives from its props, in one hook.\n *\n * Split out of the component so the component is layout and nothing else.\n *\n * The memos are honest about what they buy, which is less than it looks. `units`\n * arrives as a fresh array on every poll, so `ordered` and `markers` are\n * recomputed on every poll whatever these do — a new array is a new identity.\n * What they buy is stability across the renders a poll does NOT cause: a parent\n * re-render, a selection change (which re-runs `centre` but not `ordered`), a\n * theme flip. Sorting a fleet is cheap either way; this is tidiness, not a\n * measured win, and it should not be read as one.\n *\n * `centre` is the exception, and there it is load-bearing rather than tidy —\n * see {@link useFleetMap}.\n *\n * ## Selection works with, without, or half-way through a handler\n *\n * `selectedId` and `onSelect` are both optional, so all four combinations\n * arrive. Left purely controlled, the two useful ones broke: with neither prop\n * the roster was a listbox that answered nothing, and arrowing it called\n * `preventDefault` before a no-op `select`, so the keys did not move a\n * selection AND did not scroll the page either.\n *\n * So the hook keeps its own selection and defers to `selectedId` only when the\n * caller passes one — the ordinary controlled/uncontrolled split, the same one\n * an `<input>` makes. `onSelect` still fires either way, so a consumer can\n * observe the selection without owning it.\n */\n\n/** One pin, in the shape `MapPreview` takes. */\nexport interface FleetMarker {\n  position: LatLng;\n  title: string;\n  onClick: () => void;\n}\n\nexport interface FleetMapState {\n  /** The units, freshest first — see {@link rosterOrder}. */\n  ordered: FleetUnit[];\n  /**\n   * The selection in force — the caller's when they own it, this hook's when\n   * they do not. Everything downstream reads THIS and never the raw prop.\n   */\n  active: string | null;\n  /** Where the map points, or `null` when there is nothing to show. */\n  centre: LatLng | null;\n  select: (id: string) => void;\n  markers: FleetMarker[];\n  onKeyDown: (event: FleetKeyEvent) => void;\n}\n\n/** Which way an arrow moves the selection, or `0` when it is not ours. */\nfunction stepFor(event: FleetKeyEvent): 1 | -1 | 0 {\n  // A modified arrow is the PAGE's shortcut, not the roster's: Cmd+Down is\n  // \"scroll to the end of the document\" on macOS, and Shift+Arrow extends a\n  // selection. Capturing them would take a browser gesture away.\n  if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return 0;\n  if (event.key === 'ArrowDown') return 1;\n  if (event.key === 'ArrowUp') return -1;\n  return 0;\n}\n\n/**\n * Who owns the selection, decided ONCE on the first render.\n *\n * Exactly as React decides it for an `<input>`, and for the same reason.\n * `selectedId` is typed `string | null | undefined`, so `useState<string>()` —\n * the natural shape for a caller — hands us `undefined` on the first render and\n * again on every reset. Re-deriving the mode from the prop each time would make\n * the component change its own semantics mid-life: it starts uncontrolled,\n * silently becomes controlled the moment the caller's `onSelect` writes a value\n * back, and then silently un-becomes it when they clear — resurrecting whatever\n * was selected before the hand-off.\n *\n * Latched, `undefined` is unambiguous within each mode: to a controlled board it\n * is \"nobody is selected\", so clearing the caller's state clears the roster; to\n * an uncontrolled one it is simply the prop staying absent. A caller who wants\n * control passes `string | null` from the first render.\n */\nfunction useSelection(\n  selectedId: string | null | undefined,\n  onSelect: ((id: string) => void) | undefined,\n): { active: string | null; select: (id: string) => void; controlled: boolean } {\n  const controlledRef = React.useRef(selectedId !== undefined);\n  const controlled = controlledRef.current;\n  const [own, setOwn] = React.useState<string | null>(null);\n\n  const select = React.useCallback(\n    (id: string) => {\n      if (!controlled) setOwn(id);\n      onSelect?.(id);\n    },\n    [controlled, onSelect],\n  );\n\n  return { active: controlled ? (selectedId ?? null) : own, select, controlled };\n}\n\nexport function useFleetMap(\n  units: readonly FleetUnit[],\n  selectedId: string | null | undefined,\n  onSelect: ((id: string) => void) | undefined,\n): FleetMapState {\n  const ordered = React.useMemo(() => rosterOrder(units), [units]);\n  const { active, select, controlled } = useSelection(selectedId, onSelect);\n\n  // Memoised on the COORDINATES and not the object, because `mapCentre` builds\n  // a fresh literal every call and `MapPreview` re-centres from an effect keyed\n  // on `center`'s identity. A poll that changes nothing would otherwise hand it\n  // a new object, and the map would jump back to the centroid — throwing away a\n  // pan the dispatcher had just made, on a timer, for as long as they watch it.\n  //\n  // ROUNDED, because keying on the raw numbers was not enough. `mapCentre`\n  // sums over `ordered`, and floating-point addition is not associative — so\n  // re-sorting the SAME coordinates can change the centroid's last bit.\n  // `rosterOrder` sorts on `staleSeconds`, which moves on every poll, so rank\n  // swaps are the ordinary case for a fleet that is standing still: measured\n  // over 20k random three-rider fleets, a single adjacent swap changed the\n  // centroid 17% of the time. Six decimals is ~11cm, far finer than a map\n  // centre resolves and far coarser than the noise.\n  const raw = mapCentre(ordered, active);\n  const lat = raw === null ? null : Math.round(raw.lat * 1e6) / 1e6;\n  const lng = raw === null ? null : Math.round(raw.lng * 1e6) / 1e6;\n  const centre = React.useMemo(\n    () => (lat === null || lng === null ? null : { lat, lng }),\n    [lat, lng],\n  );\n\n  const onKeyDown = React.useCallback(\n    (event: FleetKeyEvent) => {\n      const step = stepFor(event);\n      if (step === 0) return;\n      // Nothing can move a CONTROLLED selection without a handler, so the keys\n      // belong to the page. Swallowing them there left a keyboard user unable to\n      // move the selection and unable to scroll past the roster.\n      if (controlled && !onSelect) return;\n      const next = nextSelection(ordered, active, step);\n      // `preventDefault` only once a move is certain, so the page still scrolls\n      // with the arrow keys when the list is empty and there is nothing to move.\n      if (next === null) return;\n      event.preventDefault();\n      select(next);\n    },\n    [ordered, active, select, controlled, onSelect],\n  );\n\n  const markers = React.useMemo(\n    () =>\n      ordered.map((unit) => ({\n        position: { lat: unit.latitude, lng: unit.longitude },\n        title: unit.label,\n        onClick: () => select(unit.id),\n      })),\n    [ordered, select],\n  );\n\n  return { ordered, active, centre, select, markers, onKeyDown };\n}\n","import type { FleetFreshness, FleetUnit } from './FleetMap.base';\n\n/**\n * How current a fix is, on the two thresholds the caller supplied.\n *\n * Inclusive at both boundaries in the direction that reads better on a screen:\n * a unit exactly at the lagging threshold is already lagging. A boundary has to\n * fall somewhere, and the conservative side is the one that does not tell a\n * dispatcher somebody is live when they are on the edge of not being.\n */\nexport function freshnessOf(\n  staleSeconds: number,\n  laggingAfterSeconds: number,\n  staleAfterSeconds: number,\n): FleetFreshness {\n  if (staleSeconds >= staleAfterSeconds) return 'stale';\n  if (staleSeconds >= laggingAfterSeconds) return 'lagging';\n  return 'live';\n}\n\n/** A latitude/longitude pair, as the map wants its centre. */\nexport interface LatLng {\n  lat: number;\n  lng: number;\n}\n\n/**\n * Where the map should point.\n *\n * The selected unit when there is one — a dispatcher who clicked a name is\n * asking to look at them. Otherwise the fleet's own centroid, which keeps\n * everybody in frame without the caller having to compute a bounding box.\n *\n * `null` for an empty fleet rather than a coordinate: (0, 0) is a real place in\n * the Atlantic, and a map that quietly sails there is worse than one that says\n * it has nothing to show.\n */\nexport function mapCentre(\n  units: readonly FleetUnit[],\n  selectedId?: string | null,\n): LatLng | null {\n  if (units.length === 0) return null;\n  const selected = selectedId ? units.find((unit) => unit.id === selectedId) : undefined;\n  if (selected) return { lat: selected.latitude, lng: selected.longitude };\n  const sum = units.reduce(\n    (acc, unit) => ({ lat: acc.lat + unit.latitude, lng: acc.lng + unit.longitude }),\n    { lat: 0, lng: 0 },\n  );\n  return { lat: sum.lat / units.length, lng: sum.lng / units.length };\n}\n\n/**\n * The roster's order: freshest first, then alphabetically.\n *\n * Not the caller's order, deliberately. The one question this panel answers is\n * *who is moving right now*, and a list sorted by anything else buries the\n * answer under whoever happens to sort first. Ties break on the label so the\n * list does not reshuffle between polls when two units share a staleness.\n */\nexport function rosterOrder(units: readonly FleetUnit[]): FleetUnit[] {\n  return [...units].sort(\n    (a, b) => a.staleSeconds - b.staleSeconds || a.label.localeCompare(b.label),\n  );\n}\n\n/**\n * Move the selection by one row, wrapping at both ends.\n *\n * Wrapping rather than stopping: this is a short list a dispatcher arrows\n * through repeatedly, and a selection that sticks at the last row makes the\n * keyboard path feel broken next to the mouse one.\n */\nexport function nextSelection(\n  units: readonly FleetUnit[],\n  currentId: string | null | undefined,\n  step: 1 | -1,\n): string | null {\n  if (units.length === 0) return null;\n  const index = units.findIndex((unit) => unit.id === currentId);\n  // Nothing selected: Down opens at the top and Up opens at the bottom, which\n  // is what every listbox in the house does.\n  if (index === -1) return (step === 1 ? units[0] : units[units.length - 1])?.id ?? null;\n  const next = (index + step + units.length) % units.length;\n  return units[next]?.id ?? null;\n}\n","/**\n * THE NUMBERS BOTH `FleetMap` RENDERERS DRAW WITH.\n *\n * `FleetRoster.tsx` / `FleetMap.tsx` (web, MUI `sx`) and `FleetRoster.native.tsx`\n * / `FleetMap.native.tsx` (React Native) read this one table. The web hands the\n * spacing UNITS to `theme.spacing()` and the radius MULTIPLES to `sx`; native\n * multiplies the units by the theme's own spacing step and the multiples by\n * `shape.borderRadius`.\n *\n * Nothing here imports a renderer, a theme or a colour: a freshness dot's\n * COLOUR is the theme's (`success.main`, `warning.main`, `text.disabled`), and\n * the two sides reach the same palette through different doors.\n *\n * ## Why the radii are MULTIPLES and never pixels\n *\n * MUI's `sx` reads a bare number for `borderRadius` as a multiple of\n * `theme.shape.borderRadius`, so a value that already had the theme's radius\n * divided out of it is applied twice. Measured: `theme.shape.borderRadius / 4`\n * drew 4px on the default theme — which is why it looked right — and 36px on a\n * host that sets its own radius to 12. In a package whose whole premise is\n * being re-themed, only the multiple is portable, and it is the multiple that\n * both renderers store here.\n */\n\n/** `theme.spacing(n)` for the panel's own stack. */\nexport const FLEET_PANEL = {\n  /** Between the heading, the status region and the body. */\n  gapUnits: 1.5,\n} as const;\n\n/** The roster list box. */\nexport const FLEET_ROSTER = {\n  /** Between rows. */\n  gapUnits: 0.5,\n  /** `:focus-visible` ring on the web; a device has no focus ring to draw. */\n  focusRingWidth: 2,\n  focusRingOffset: 2,\n} as const;\n\n/** One roster row. */\nexport const FLEET_ROW = {\n  /** Between the dot, the text block and the badge. */\n  gapUnits: 1.5,\n  /** `theme.spacing(y, x)`. */\n  paddingYUnits: 1,\n  paddingXUnits: 1.5,\n  /** A MULTIPLE of `theme.shape.borderRadius` — see the note above. */\n  radiusMultiple: 1,\n} as const;\n\n/**\n * The freshness dot.\n *\n * A perfect circle, so the radius is half the box on both sides rather than\n * the web's `50%`: React Native resolves a percentage radius against the box\n * it is given, and a square box makes the two spellings agree.\n */\nexport const FLEET_DOT = {\n  size: 10,\n} as const;\n\n/** What stands in for the roster before any unit has landed. */\nexport const FLEET_SKELETON = {\n  /** Three bars, the height of a row with its padding. */\n  rows: 3,\n  height: 44,\n  /** A MULTIPLE, for the same reason the row's is. */\n  radiusMultiple: 1,\n  gapUnits: 1,\n} as const;\n\n/**\n * How long a fix stays `live`, and then `lagging`, when the caller says nothing.\n *\n * Ninety seconds and five minutes: sized for a phone reporting every twenty\n * seconds, which is the densest cadence a battery tolerates all day. They are\n * DEFAULTS and not a rule — a fleet on five-minute trackers passes its own, and\n * the props exist so it can.\n */\nexport const FLEET_DEFAULT_LAGGING_AFTER_SECONDS = 90;\nexport const FLEET_DEFAULT_STALE_AFTER_SECONDS = 300;\n","import * as React from 'react';\nimport {\n  Pressable,\n  ScrollView,\n  StyleSheet,\n  Text,\n  View,\n  type LayoutChangeEvent,\n  type NativeScrollEvent,\n  type NativeSyntheticEvent,\n} from 'react-native';\n\nimport { Skeleton } from '../../layout/Skeleton/Skeleton.native';\n\nimport { freshnessOf } from './FleetMap.helpers';\nimport type { FleetKeyEvent } from './FleetMap.hooks';\nimport { FLEET_DOT, FLEET_ROSTER, FLEET_ROW, FLEET_SKELETON } from './FleetMap.metrics';\nimport type { FleetFreshness, FleetMapCopy, FleetUnit } from './FleetMap.types.native';\nimport { webAria, webRole } from '../../../platform/aria';\nimport { webKeyDown } from '../../../platform/web-keys';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { muiTypeStyle } from '../../../tokens/mui-type';\nimport type { UiTheme } from '../../../tokens/theme';\n\n/**\n * The roster — which on React Native is the WHOLE component, not half of it.\n *\n * On the web this list sits beside a map and carries the information a picture\n * cannot give a screen reader. Here there is no map to sit beside: `MapPreview`\n * has no React Native build, so the native `FleetMap` renders this and says so\n * in `NATIVE-NOTES.md`. That is a smaller change than it sounds, because the\n * web half already treats this list as the component's real content — \"the\n * accessible representation, not a sidebar\" — and every fact a pin carries is\n * on a row here.\n */\n\n/**\n * `data-freshness`, as something JSX can spread onto a react-native element.\n *\n * Through `dataSet` and NOT as a bare `data-freshness` prop: react-native-web\n * drops unknown props rather than forwarding them, and special-cases only\n * `data-testid`. Measured — the attribute was simply absent from the row, so\n * the shared freshness stories read `null`. `dataSet` is rn-web's documented\n * channel for custom data attributes and renders `data-freshness`; React Native\n * ignores it on a device, which is the same trade `webRole` and `webAria` make.\n *\n * It is not decoration: the SHARED stories read this attribute to assert which\n * threshold a row landed on, so without it they cannot run here at all.\n */\nfunction webDataFreshness(freshness: FleetFreshness): object {\n  return { dataSet: { freshness } };\n}\n\n/** Each freshness draws from the semantic palette, never a hardcoded hex. */\nfunction freshnessColor(freshness: FleetFreshness, theme: UiTheme): string {\n  if (freshness === 'live') return theme.palette.success.main;\n  if (freshness === 'lagging') return theme.palette.warning.main;\n  return theme.palette.text.disabled;\n}\n\n/** Where each row sits inside the scrolling content, and what is on screen. */\ninterface RosterGeometry {\n  rows: Map<string, { y: number; height: number }>;\n  offset: number;\n  viewport: number;\n}\n\n/**\n * Keep the selected row visible INSIDE the roster — the same arithmetic the web\n * does with `scrollTop`, expressed in the only terms React Native has.\n *\n * The web reads `box.offsetTop - list.offsetTop` against `list.scrollTop` and\n * `list.clientHeight`. None of those exist here, so the three numbers are\n * gathered as they arrive: a row's `onLayout` gives its `y` inside the content\n * container (already relative to the list, which is what the web computes by\n * subtraction), the `ScrollView`'s own `onLayout` gives the viewport height,\n * and `onScroll` gives the offset. The comparison below is then line-for-line\n * the web's.\n *\n * `scrollTo` rather than react-native's `scrollToEnd`/`ScrollView.scrollIntoView`\n * for the same reason the web refuses `scrollIntoView({ block: 'nearest' })`:\n * this must move THIS list and nothing else. A native `ScrollView` cannot walk\n * its ancestors, so the hazard is smaller here — but the arithmetic is shared,\n * and two renderers agreeing by construction beats two agreeing by coincidence.\n *\n * Watches `position` as well as the id, because the roster re-sorts on every\n * poll: a rider who stays selected while their staleness moves them down the\n * list would otherwise slide out of view with the effect never re-running.\n */\nfunction useKeptInView(\n  scroll: React.RefObject<ScrollView | null>,\n  geometry: React.RefObject<RosterGeometry>,\n  activeId: string | null,\n  position: number,\n): void {\n  React.useEffect(() => {\n    if (activeId === null) return;\n    const { rows, offset, viewport } = geometry.current;\n    const row = rows.get(activeId);\n    // Nothing has laid out yet on the first commit; the next poll re-runs this.\n    if (!row || viewport === 0) return;\n    if (row.y < offset) {\n      scroll.current?.scrollTo({ y: row.y, animated: false });\n    } else if (row.y + row.height > offset + viewport) {\n      scroll.current?.scrollTo({ y: row.y + row.height - viewport, animated: false });\n    }\n  }, [scroll, geometry, activeId, position]);\n}\n\n/**\n * A row's two lines of text — the name, and the one-line summary under it.\n *\n * Split out of {@link FleetRow} to keep that function under the size gate, and\n * the seam is the natural one: everything here is READ, nothing is interactive.\n */\nfunction RowText({\n  unit,\n  copy,\n  freshness,\n  testId,\n}: Pick<RowProps, 'unit' | 'copy' | 'freshness' | 'testId'>): React.JSX.Element {\n  const theme = useUiTheme();\n\n  // Dropped rather than rendered empty: a phone that reports no accuracy radius\n  // would otherwise print a trailing separator with nothing after it.\n  const meta = [\n    copy.freshness[freshness],\n    copy.lastSeen(unit.staleSeconds),\n    unit.accuracyM == null ? null : copy.accuracy(unit.accuracyM),\n  ]\n    .filter((part): part is string => Boolean(part))\n    .join(' · ');\n\n  return (\n    <View style={styles.rowText}>\n      <Text\n        testID={`${testId}-label`}\n        style={[muiTypeStyle(theme, 'body2'), styles.label, { color: theme.palette.text.primary }]}\n      >\n        {unit.label}\n      </Text>\n      <Text\n        testID={`${testId}-meta`}\n        style={[muiTypeStyle(theme, 'caption'), { color: theme.palette.text.secondary }]}\n      >\n        {meta}\n      </Text>\n    </View>\n  );\n}\n\ninterface RowProps {\n  unit: FleetUnit;\n  copy: FleetMapCopy;\n  freshness: FleetFreshness;\n  selected: boolean;\n  onSelect: (id: string) => void;\n  onMeasured: (id: string, y: number, height: number) => void;\n  /** The row's own DOM id, which `aria-activedescendant` points at. */\n  optionId: string;\n  testId: string;\n}\n\n/**\n * One roster row.\n *\n * A `Pressable` rather than a `View` with an `onClick`: a press is the input on\n * a device, and `Pressable` is what gives the row its pressed state and its\n * accessibility role in one element. The PRESSED wash stands in for the web's\n * hover — and, as on the web, it must never weaken the selection, so a selected\n * row keeps `action.selected` whether or not a finger is on it.\n */\nfunction FleetRow({\n  unit,\n  copy,\n  freshness,\n  selected,\n  onSelect,\n  onMeasured,\n  optionId,\n  testId,\n}: RowProps): React.JSX.Element {\n  const theme = useUiTheme();\n\n  const measure = React.useCallback(\n    (event: LayoutChangeEvent) => {\n      const { y, height } = event.nativeEvent.layout;\n      onMeasured(unit.id, y, height);\n    },\n    [onMeasured, unit.id],\n  );\n\n  return (\n    <Pressable\n      {...webRole('option')}\n      {...webDataFreshness(freshness)}\n      // Without this the roster's `aria-activedescendant` names an element that\n      // does not exist, which announces nothing and fails an axe audit — worse\n      // than omitting the attribute. Measured: the row carried no id at all.\n      id={optionId}\n      // BOTH, and neither is redundant. `accessibilityState` is what a DEVICE\n      // reads; react-native-web does not turn it into `aria-selected`, so\n      // without the attribute beside it the web build conveys the selection by\n      // background colour alone — which is the one thing this component refuses\n      // to do for freshness, and no more acceptable here.\n      accessibilityState={{ selected }}\n      aria-selected={selected}\n      testID={testId}\n      onPress={() => onSelect(unit.id)}\n      onLayout={measure}\n      style={({ pressed }) => [\n        styles.row,\n        {\n          gap: theme.spacing(FLEET_ROW.gapUnits),\n          paddingVertical: theme.spacing(FLEET_ROW.paddingYUnits),\n          paddingHorizontal: theme.spacing(FLEET_ROW.paddingXUnits),\n          borderRadius: FLEET_ROW.radiusMultiple * theme.radius.md,\n          backgroundColor: selected\n            ? theme.palette.action.selected\n            : pressed\n              ? theme.palette.action.hover\n              : 'transparent',\n        },\n      ]}\n    >\n      {/* The dot repeats what the freshness word beside it already says, so it\n          is hidden rather than read twice — and colour is never the only\n          carrier of the state. */}\n      <View\n        accessibilityElementsHidden\n        importantForAccessibility=\"no-hide-descendants\"\n        testID={`${testId}-dot`}\n        style={[styles.dot, { backgroundColor: freshnessColor(freshness, theme) }]}\n      />\n      <RowText unit={unit} copy={copy} freshness={freshness} testId={testId} />\n      {unit.badge !== undefined && unit.badge !== '' && (\n        <Text\n          testID={`${testId}-badge`}\n          style={[\n            muiTypeStyle(theme, 'caption'),\n            styles.badge,\n            { color: theme.palette.text.secondary },\n          ]}\n        >\n          {unit.badge}\n        </Text>\n      )}\n    </Pressable>\n  );\n}\n\n/**\n * What stands in for the roster before any unit has landed.\n *\n * Hidden from the reader, because three grey bars are not information — the\n * panel's busy state and its optional announcement carry that. The radius is\n * the same MULTIPLE a real row uses rather than a raw pixel count.\n */\nfunction FirstLoad({ testId }: { testId: string }): React.JSX.Element {\n  const theme = useUiTheme();\n  return (\n    <View\n      testID={`${testId}-skeleton`}\n      accessibilityElementsHidden\n      importantForAccessibility=\"no-hide-descendants\"\n      style={{ gap: theme.spacing(FLEET_SKELETON.gapUnits) }}\n    >\n      {Array.from({ length: FLEET_SKELETON.rows }, (_, row) => (\n        <Skeleton\n          key={row}\n          variant=\"rectangular\"\n          height={FLEET_SKELETON.height}\n          borderRadius={FLEET_SKELETON.radiusMultiple}\n        />\n      ))}\n    </View>\n  );\n}\n\nexport interface FleetRosterProps {\n  units: readonly FleetUnit[];\n  copy: FleetMapCopy;\n  selectedId: string | null | undefined;\n  onSelect: (id: string) => void;\n  laggingAfterSeconds: number;\n  staleAfterSeconds: number;\n  loading: boolean;\n  maxHeight: number | undefined;\n  testId: string;\n  onKeyDown: (event: FleetKeyEvent) => void;\n}\n\nexport function FleetRoster({\n  units,\n  copy,\n  selectedId,\n  onSelect,\n  laggingAfterSeconds,\n  staleAfterSeconds,\n  loading,\n  maxHeight,\n  testId,\n  onKeyDown,\n}: FleetRosterProps): React.JSX.Element {\n  const theme = useUiTheme();\n  const scroll = React.useRef<ScrollView>(null);\n  const geometry = React.useRef<RosterGeometry>({ rows: new Map(), offset: 0, viewport: 0 });\n\n  // Generated, not derived from `dataTestId`: two boards on one screen filtered\n  // from the same fleet would otherwise emit duplicate ids and an ambiguous\n  // `aria-activedescendant` under react-native-web.\n  const rowIdPrefix = React.useId();\n\n  // The selection is CONTROLLED, so it can name a unit that has since dropped\n  // out of the freshness window — a courier ending their shift mid-poll. The\n  // attribute must then be absent rather than pointing at a row that no longer\n  // renders. `mapCentre` and `nextSelection` both handle the same case.\n  const active = units.some((unit) => unit.id === selectedId) ? (selectedId ?? null) : null;\n  const position = active === null ? -1 : units.findIndex((unit) => unit.id === active);\n\n  const onMeasured = React.useCallback((id: string, y: number, height: number) => {\n    geometry.current.rows.set(id, { y, height });\n  }, []);\n\n  useKeptInView(scroll, geometry, active, position);\n\n  if (loading && units.length === 0) return <FirstLoad testId={testId} />;\n\n  return (\n    <ScrollView\n      ref={scroll}\n      {...webRole('listbox')}\n      // A single tab stop with the arrow keys inside it, which is the listbox\n      // pattern and what `aria-activedescendant` below is for: a dispatcher\n      // tabbing past a fleet of thirty should not press it thirty times. React\n      // Native has no tab order, so this reaches the DOM through\n      // react-native-web and does nothing on a device — where each row is its\n      // own touch target anyway.\n      tabIndex={0}\n      {...webAria({ 'aria-activedescendant': active ? `${rowIdPrefix}-${active}` : undefined })}\n      {...webKeyDown(onKeyDown)}\n      accessibilityLabel={copy.rosterLabel}\n      testID={`${testId}-roster`}\n      style={maxHeight === undefined ? undefined : { maxHeight }}\n      contentContainerStyle={{ gap: theme.spacing(FLEET_ROSTER.gapUnits) }}\n      onLayout={(event: LayoutChangeEvent) => {\n        geometry.current.viewport = event.nativeEvent.layout.height;\n      }}\n      onScroll={(event: NativeSyntheticEvent<NativeScrollEvent>) => {\n        geometry.current.offset = event.nativeEvent.contentOffset.y;\n      }}\n      scrollEventThrottle={16}\n    >\n      {units.map((unit) => (\n        <FleetRow\n          key={unit.id}\n          unit={unit}\n          copy={copy}\n          freshness={freshnessOf(unit.staleSeconds, laggingAfterSeconds, staleAfterSeconds)}\n          selected={unit.id === active}\n          onSelect={onSelect}\n          onMeasured={onMeasured}\n          optionId={`${rowIdPrefix}-${unit.id}`}\n          testId={`${testId}-${unit.id}`}\n        />\n      ))}\n    </ScrollView>\n  );\n}\n\nconst styles = StyleSheet.create({\n  badge: { flexShrink: 0 },\n  dot: {\n    borderRadius: FLEET_DOT.size / 2,\n    flexShrink: 0,\n    height: FLEET_DOT.size,\n    width: FLEET_DOT.size,\n  },\n  label: { fontWeight: '500' },\n  row: { alignItems: 'center', flexDirection: 'row' },\n  rowText: { flexGrow: 1, flexShrink: 1, minWidth: 0 },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAYA,YAAW;AACvB,SAAS,cAAAC,aAAY,QAAAC,OAAM,QAAAC,aAAY;;;ACDvC,OAAO,WAAW;;;ACUX,SAAS,YACd,cACA,qBACA,mBACgB;AAChB,MAAI,gBAAgB,kBAAmB,QAAO;AAC9C,MAAI,gBAAgB,oBAAqB,QAAO;AAChD,SAAO;AACT;AAmBO,SAAS,UACd,OACA,YACe;AACf,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,QAAM,WAAW,aAAa,MAAM,KAAK,CAAC,SAAS,KAAK,OAAO,UAAU,IAAI;AAC7E,MAAI,SAAU,QAAO,EAAE,KAAK,SAAS,UAAU,KAAK,SAAS,UAAU;AACvE,QAAM,MAAM,MAAM;AAAA,IAChB,CAAC,KAAK,UAAU,EAAE,KAAK,IAAI,MAAM,KAAK,UAAU,KAAK,IAAI,MAAM,KAAK,UAAU;AAAA,IAC9E,EAAE,KAAK,GAAG,KAAK,EAAE;AAAA,EACnB;AACA,SAAO,EAAE,KAAK,IAAI,MAAM,MAAM,QAAQ,KAAK,IAAI,MAAM,MAAM,OAAO;AACpE;AAUO,SAAS,YAAY,OAA0C;AACpE,SAAO,CAAC,GAAG,KAAK,EAAE;AAAA,IAChB,CAAC,GAAG,MAAM,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,cAAc,EAAE,KAAK;AAAA,EAC5E;AACF;AASO,SAAS,cACd,OACA,WACA,MACe;AACf,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,QAAM,QAAQ,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,SAAS;AAG7D,MAAI,UAAU,GAAI,SAAQ,SAAS,IAAI,MAAM,CAAC,IAAI,MAAM,MAAM,SAAS,CAAC,IAAI,MAAM;AAClF,QAAM,QAAQ,QAAQ,OAAO,MAAM,UAAU,MAAM;AACnD,SAAO,MAAM,IAAI,GAAG,MAAM;AAC5B;;;ADPA,SAAS,QAAQ,OAAkC;AAIjD,MAAI,MAAM,UAAU,MAAM,WAAW,MAAM,WAAW,MAAM,SAAU,QAAO;AAC7E,MAAI,MAAM,QAAQ,YAAa,QAAO;AACtC,MAAI,MAAM,QAAQ,UAAW,QAAO;AACpC,SAAO;AACT;AAmBA,SAAS,aACP,YACA,UAC8E;AAC9E,QAAM,gBAAgB,MAAM,OAAO,eAAe,MAAS;AAC3D,QAAM,aAAa,cAAc;AACjC,QAAM,CAAC,KAAK,MAAM,IAAI,MAAM,SAAwB,IAAI;AAExD,QAAM,SAAS,MAAM;AAAA,IACnB,CAAC,OAAe;AACd,UAAI,CAAC,WAAY,QAAO,EAAE;AAC1B,iBAAW,EAAE;AAAA,IACf;AAAA,IACA,CAAC,YAAY,QAAQ;AAAA,EACvB;AAEA,SAAO,EAAE,QAAQ,aAAc,cAAc,OAAQ,KAAK,QAAQ,WAAW;AAC/E;AAEO,SAAS,YACd,OACA,YACA,UACe;AACf,QAAM,UAAU,MAAM,QAAQ,MAAM,YAAY,KAAK,GAAG,CAAC,KAAK,CAAC;AAC/D,QAAM,EAAE,QAAQ,QAAQ,WAAW,IAAI,aAAa,YAAY,QAAQ;AAgBxE,QAAM,MAAM,UAAU,SAAS,MAAM;AACrC,QAAM,MAAM,QAAQ,OAAO,OAAO,KAAK,MAAM,IAAI,MAAM,GAAG,IAAI;AAC9D,QAAM,MAAM,QAAQ,OAAO,OAAO,KAAK,MAAM,IAAI,MAAM,GAAG,IAAI;AAC9D,QAAM,SAAS,MAAM;AAAA,IACnB,MAAO,QAAQ,QAAQ,QAAQ,OAAO,OAAO,EAAE,KAAK,IAAI;AAAA,IACxD,CAAC,KAAK,GAAG;AAAA,EACX;AAEA,QAAM,YAAY,MAAM;AAAA,IACtB,CAAC,UAAyB;AACxB,YAAM,OAAO,QAAQ,KAAK;AAC1B,UAAI,SAAS,EAAG;AAIhB,UAAI,cAAc,CAAC,SAAU;AAC7B,YAAM,OAAO,cAAc,SAAS,QAAQ,IAAI;AAGhD,UAAI,SAAS,KAAM;AACnB,YAAM,eAAe;AACrB,aAAO,IAAI;AAAA,IACb;AAAA,IACA,CAAC,SAAS,QAAQ,QAAQ,YAAY,QAAQ;AAAA,EAChD;AAEA,QAAM,UAAU,MAAM;AAAA,IACpB,MACE,QAAQ,IAAI,CAAC,UAAU;AAAA,MACrB,UAAU,EAAE,KAAK,KAAK,UAAU,KAAK,KAAK,UAAU;AAAA,MACpD,OAAO,KAAK;AAAA,MACZ,SAAS,MAAM,OAAO,KAAK,EAAE;AAAA,IAC/B,EAAE;AAAA,IACJ,CAAC,SAAS,MAAM;AAAA,EAClB;AAEA,SAAO,EAAE,SAAS,QAAQ,QAAQ,QAAQ,SAAS,UAAU;AAC/D;;;AE7JO,IAAM,cAAc;AAAA;AAAA,EAEzB,UAAU;AACZ;AAGO,IAAM,eAAe;AAAA;AAAA,EAE1B,UAAU;AAAA;AAAA,EAEV,gBAAgB;AAAA,EAChB,iBAAiB;AACnB;AAGO,IAAM,YAAY;AAAA;AAAA,EAEvB,UAAU;AAAA;AAAA,EAEV,eAAe;AAAA,EACf,eAAe;AAAA;AAAA,EAEf,gBAAgB;AAClB;AASO,IAAM,YAAY;AAAA,EACvB,MAAM;AACR;AAGO,IAAM,iBAAiB;AAAA;AAAA,EAE5B,MAAM;AAAA,EACN,QAAQ;AAAA;AAAA,EAER,gBAAgB;AAAA,EAChB,UAAU;AACZ;AAUO,IAAM,sCAAsC;AAC5C,IAAM,oCAAoC;;;AChFjD,YAAYC,YAAW;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AA4HH,SACE,KADF;AArFJ,SAAS,iBAAiB,WAAmC;AAC3D,SAAO,EAAE,SAAS,EAAE,UAAU,EAAE;AAClC;AAGA,SAAS,eAAe,WAA2B,OAAwB;AACzE,MAAI,cAAc,OAAQ,QAAO,MAAM,QAAQ,QAAQ;AACvD,MAAI,cAAc,UAAW,QAAO,MAAM,QAAQ,QAAQ;AAC1D,SAAO,MAAM,QAAQ,KAAK;AAC5B;AA+BA,SAAS,cACP,QACA,UACA,UACA,UACM;AACN,EAAM,iBAAU,MAAM;AACpB,QAAI,aAAa,KAAM;AACvB,UAAM,EAAE,MAAM,QAAQ,SAAS,IAAI,SAAS;AAC5C,UAAM,MAAM,KAAK,IAAI,QAAQ;AAE7B,QAAI,CAAC,OAAO,aAAa,EAAG;AAC5B,QAAI,IAAI,IAAI,QAAQ;AAClB,aAAO,SAAS,SAAS,EAAE,GAAG,IAAI,GAAG,UAAU,MAAM,CAAC;AAAA,IACxD,WAAW,IAAI,IAAI,IAAI,SAAS,SAAS,UAAU;AACjD,aAAO,SAAS,SAAS,EAAE,GAAG,IAAI,IAAI,IAAI,SAAS,UAAU,UAAU,MAAM,CAAC;AAAA,IAChF;AAAA,EACF,GAAG,CAAC,QAAQ,UAAU,UAAU,QAAQ,CAAC;AAC3C;AAQA,SAAS,QAAQ;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgF;AAC9E,QAAM,QAAQ,WAAW;AAIzB,QAAM,OAAO;AAAA,IACX,KAAK,UAAU,SAAS;AAAA,IACxB,KAAK,SAAS,KAAK,YAAY;AAAA,IAC/B,KAAK,aAAa,OAAO,OAAO,KAAK,SAAS,KAAK,SAAS;AAAA,EAC9D,EACG,OAAO,CAAC,SAAyB,QAAQ,IAAI,CAAC,EAC9C,KAAK,QAAK;AAEb,SACE,qBAAC,QAAK,OAAO,OAAO,SAClB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,GAAG,MAAM;AAAA,QACjB,OAAO,CAAC,aAAa,OAAO,OAAO,GAAG,OAAO,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAK,QAAQ,CAAC;AAAA,QAExF,eAAK;AAAA;AAAA,IACR;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,GAAG,MAAM;AAAA,QACjB,OAAO,CAAC,aAAa,OAAO,SAAS,GAAG,EAAE,OAAO,MAAM,QAAQ,KAAK,UAAU,CAAC;AAAA,QAE9E;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAuBA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgC;AAC9B,QAAM,QAAQ,WAAW;AAEzB,QAAM,UAAgB;AAAA,IACpB,CAAC,UAA6B;AAC5B,YAAM,EAAE,GAAG,OAAO,IAAI,MAAM,YAAY;AACxC,iBAAW,KAAK,IAAI,GAAG,MAAM;AAAA,IAC/B;AAAA,IACA,CAAC,YAAY,KAAK,EAAE;AAAA,EACtB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG,QAAQ,QAAQ;AAAA,MACnB,GAAG,iBAAiB,SAAS;AAAA,MAI9B,IAAI;AAAA,MAMJ,oBAAoB,EAAE,SAAS;AAAA,MAC/B,iBAAe;AAAA,MACf,QAAQ;AAAA,MACR,SAAS,MAAM,SAAS,KAAK,EAAE;AAAA,MAC/B,UAAU;AAAA,MACV,OAAO,CAAC,EAAE,QAAQ,MAAM;AAAA,QACtB,OAAO;AAAA,QACP;AAAA,UACE,KAAK,MAAM,QAAQ,UAAU,QAAQ;AAAA,UACrC,iBAAiB,MAAM,QAAQ,UAAU,aAAa;AAAA,UACtD,mBAAmB,MAAM,QAAQ,UAAU,aAAa;AAAA,UACxD,cAAc,UAAU,iBAAiB,MAAM,OAAO;AAAA,UACtD,iBAAiB,WACb,MAAM,QAAQ,OAAO,WACrB,UACE,MAAM,QAAQ,OAAO,QACrB;AAAA,QACR;AAAA,MACF;AAAA,MAKA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,6BAA2B;AAAA,YAC3B,2BAA0B;AAAA,YAC1B,QAAQ,GAAG,MAAM;AAAA,YACjB,OAAO,CAAC,OAAO,KAAK,EAAE,iBAAiB,eAAe,WAAW,KAAK,EAAE,CAAC;AAAA;AAAA,QAC3E;AAAA,QACA,oBAAC,WAAQ,MAAY,MAAY,WAAsB,QAAgB;AAAA,QACtE,KAAK,UAAU,UAAa,KAAK,UAAU,MAC1C;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ,GAAG,MAAM;AAAA,YACjB,OAAO;AAAA,cACL,aAAa,OAAO,SAAS;AAAA,cAC7B,OAAO;AAAA,cACP,EAAE,OAAO,MAAM,QAAQ,KAAK,UAAU;AAAA,YACxC;AAAA,YAEC,eAAK;AAAA;AAAA,QACR;AAAA;AAAA;AAAA,EAEJ;AAEJ;AASA,SAAS,UAAU,EAAE,OAAO,GAA0C;AACpE,QAAM,QAAQ,WAAW;AACzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,GAAG,MAAM;AAAA,MACjB,6BAA2B;AAAA,MAC3B,2BAA0B;AAAA,MAC1B,OAAO,EAAE,KAAK,MAAM,QAAQ,eAAe,QAAQ,EAAE;AAAA,MAEpD,gBAAM,KAAK,EAAE,QAAQ,eAAe,KAAK,GAAG,CAAC,GAAG,QAC/C;AAAA,QAAC;AAAA;AAAA,UAEC,SAAQ;AAAA,UACR,QAAQ,eAAe;AAAA,UACvB,cAAc,eAAe;AAAA;AAAA,QAHxB;AAAA,MAIP,CACD;AAAA;AAAA,EACH;AAEJ;AAeO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwC;AACtC,QAAM,QAAQ,WAAW;AACzB,QAAM,SAAe,cAAmB,IAAI;AAC5C,QAAM,WAAiB,cAAuB,EAAE,MAAM,oBAAI,IAAI,GAAG,QAAQ,GAAG,UAAU,EAAE,CAAC;AAKzF,QAAM,cAAoB,aAAM;AAMhC,QAAM,SAAS,MAAM,KAAK,CAAC,SAAS,KAAK,OAAO,UAAU,IAAK,cAAc,OAAQ;AACrF,QAAM,WAAW,WAAW,OAAO,KAAK,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,MAAM;AAEpF,QAAM,aAAmB,mBAAY,CAAC,IAAY,GAAW,WAAmB;AAC9E,aAAS,QAAQ,KAAK,IAAI,IAAI,EAAE,GAAG,OAAO,CAAC;AAAA,EAC7C,GAAG,CAAC,CAAC;AAEL,gBAAc,QAAQ,UAAU,QAAQ,QAAQ;AAEhD,MAAI,WAAW,MAAM,WAAW,EAAG,QAAO,oBAAC,aAAU,QAAgB;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACJ,GAAG,QAAQ,SAAS;AAAA,MAOrB,UAAU;AAAA,MACT,GAAG,QAAQ,EAAE,yBAAyB,SAAS,GAAG,WAAW,IAAI,MAAM,KAAK,OAAU,CAAC;AAAA,MACvF,GAAG,WAAW,SAAS;AAAA,MACxB,oBAAoB,KAAK;AAAA,MACzB,QAAQ,GAAG,MAAM;AAAA,MACjB,OAAO,cAAc,SAAY,SAAY,EAAE,UAAU;AAAA,MACzD,uBAAuB,EAAE,KAAK,MAAM,QAAQ,aAAa,QAAQ,EAAE;AAAA,MACnE,UAAU,CAAC,UAA6B;AACtC,iBAAS,QAAQ,WAAW,MAAM,YAAY,OAAO;AAAA,MACvD;AAAA,MACA,UAAU,CAAC,UAAmD;AAC5D,iBAAS,QAAQ,SAAS,MAAM,YAAY,cAAc;AAAA,MAC5D;AAAA,MACA,qBAAqB;AAAA,MAEpB,gBAAM,IAAI,CAAC,SACV;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA,WAAW,YAAY,KAAK,cAAc,qBAAqB,iBAAiB;AAAA,UAChF,UAAU,KAAK,OAAO;AAAA,UACtB;AAAA,UACA;AAAA,UACA,UAAU,GAAG,WAAW,IAAI,KAAK,EAAE;AAAA,UACnC,QAAQ,GAAG,MAAM,IAAI,KAAK,EAAE;AAAA;AAAA,QARvB,KAAK;AAAA,MASZ,CACD;AAAA;AAAA,EACH;AAEJ;AAEA,IAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,OAAO,EAAE,YAAY,EAAE;AAAA,EACvB,KAAK;AAAA,IACH,cAAc,UAAU,OAAO;AAAA,IAC/B,YAAY;AAAA,IACZ,QAAQ,UAAU;AAAA,IAClB,OAAO,UAAU;AAAA,EACnB;AAAA,EACA,OAAO,EAAE,YAAY,MAAM;AAAA,EAC3B,KAAK,EAAE,YAAY,UAAU,eAAe,MAAM;AAAA,EAClD,SAAS,EAAE,UAAU,GAAG,YAAY,GAAG,UAAU,EAAE;AACrD,CAAC;;;AJjUK,gBAAAC,MAmDA,QAAAC,aAnDA;AAnBN,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAI6B;AAE3B,MAAI,iBAAiB,OAAW,QAAO;AACvC,SACE,gBAAAD;AAAA,IAACE;AAAA,IAAA;AAAA,MACE,GAAG,QAAQ,QAAQ;AAAA,MACpB,aAAU;AAAA,MACV,yBAAwB;AAAA,MACxB,QAAQ,GAAG,MAAM;AAAA,MACjB,OAAOC,QAAO;AAAA,MAEd,0BAAAH,KAACI,OAAA,EAAM,oBAAU,eAAe,IAAG;AAAA;AAAA,EACrC;AAEJ;AA2BO,IAAM,WAA0C;AAAA,EACrD,CAAC;AAAA,IACC;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,oBAAoB;AAAA,IACpB,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,QAAQ,WAAW;AACzB,UAAM,SAAS,cAAc;AAC7B,UAAM,EAAE,SAAS,QAAQ,QAAQ,UAAU,IAAI,YAAY,OAAO,YAAY,QAAQ;AAEtF,WACE,gBAAAH;AAAA,MAACC;AAAA,MAAA;AAAA,QACE,GAAG,QAAQ,QAAQ;AAAA,QACpB,oBAAoB,KAAK;AAAA,QACzB,QAAQ;AAAA,QACR,OAAO,CAACC,QAAO,OAAO,EAAE,KAAK,MAAM,QAAQ,YAAY,QAAQ,EAAE,GAAG,KAAK;AAAA,QAEzE;AAAA,0BAAAH;AAAA,YAACI;AAAA,YAAA;AAAA,cACE,GAAG,QAAQ,SAAS;AAAA,cACpB,GAAG,QAAQ,EAAE,cAAc,EAAE,CAAC;AAAA,cAC/B,QAAQ,GAAG,MAAM;AAAA,cACjB,OAAO;AAAA,gBACL,aAAa,OAAO,OAAO;AAAA,gBAC3B,EAAE,OAAO,MAAM,QAAQ,KAAK,SAAS,YAAY,GAAG,sBAAsB,GAAG;AAAA,cAC/E;AAAA,cAEC,eAAK;AAAA;AAAA,UACR;AAAA,UAEA,gBAAAJ,KAAC,eAAY,cAAc,KAAK,SAAS,SAAkB,QAAgB;AAAA,UAE1E,CAAC,WAAW,QAAQ,WAAW,IAC9B,gBAAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,OAAO,KAAK;AAAA,cACZ,aAAa,KAAK;AAAA,cAClB,YAAY,GAAG,MAAM;AAAA;AAAA,UACvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASA,gBAAAA;AAAA,cAACE;AAAA,cAAA;AAAA,gBACC,aAAW,WAAW;AAAA,gBACtB,oBAAoB,EAAE,MAAM,QAAQ;AAAA,gBACpC,QAAQ,GAAG,MAAM;AAAA,gBACjB,OAAOC,QAAO;AAAA,gBAEd,0BAAAH;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO;AAAA,oBACP;AAAA,oBACA,YAAY;AAAA,oBACZ,UAAU;AAAA,oBACV;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA;AAAA,gBACF;AAAA;AAAA,YACF;AAAA;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;AAEvB,IAAMG,UAASE,YAAW,OAAO;AAAA,EAC/B,MAAM,EAAE,YAAY,GAAG,UAAU,EAAE;AAAA,EACnC,OAAO,EAAE,eAAe,UAAU,UAAU,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAM9C,QAAQ,EAAE,QAAQ,GAAG,SAAS,GAAG,UAAU,UAAU,UAAU,YAAY,OAAO,EAAE;AACtF,CAAC;AAED,IAAO,0BAAQ;","names":["React","StyleSheet","Text","View","React","jsx","jsxs","View","styles","Text","StyleSheet"]}

package/dist/native/feedback/Dialog.js

@@ -3,6 +3,9 @@ import {
   PulseRing,
   halo
 } from "../chunks/chunk-NRN37A5K.js";
+import {
+  ABSOLUTE_INK
+} from "../chunks/chunk-ZRQHLTYG.js";
 import {
   renderTextChildren
 } from "../chunks/chunk-5GJ5OG5R.js";
@@ -78,9 +81,9 @@ var DIALOG_MAX_WIDTH = {
 var DIALOG_MARGIN_UNITS = 2;
 var DIALOG_BORDER_WIDTH = 1;
 var DIALOG_PAPER_SHADOW = [
-  { offsetX: 0, offsetY: 11, blurRadius: 15, spreadDistance: -7, color: "rgba(0, 0, 0, 0.2)" },
-  { offsetX: 0, offsetY: 24, blurRadius: 38, spreadDistance: 3, color: "rgba(0, 0, 0, 0.14)" },
-  { offsetX: 0, offsetY: 9, blurRadius: 46, spreadDistance: 8, color: "rgba(0, 0, 0, 0.12)" }
+  { offsetX: 0, offsetY: 11, blurRadius: 15, spreadDistance: -7, color: alpha(ABSOLUTE_INK.black, 0.2) },
+  { offsetX: 0, offsetY: 24, blurRadius: 38, spreadDistance: 3, color: alpha(ABSOLUTE_INK.black, 0.14) },
+  { offsetX: 0, offsetY: 9, blurRadius: 46, spreadDistance: 8, color: alpha(ABSOLUTE_INK.black, 0.12) }
 ];
 var DIALOG_GLASS = {
   backgroundAlpha: 0.1,

package/dist/native/feedback/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/feedback/Dialog/Dialog.native.tsx","../../../src/components/feedback/Dialog/Dialog.helpers.ts","../../../src/components/feedback/Dialog/Dialog.metrics.ts","../../../src/components/feedback/Dialog/Dialog.look.native.ts","../../../src/components/feedback/Dialog/DialogParts.native.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Modal, Pressable, ScrollView, StyleSheet, View } from 'react-native';\n\nimport { hasSpacingSlot, withDialogDefaults } from './Dialog.helpers';\nimport { dialogBackdrop, dialogLook } from './Dialog.look.native';\nimport { DIALOG_BODY_PADDING_UNITS, DIALOG_PULSE } from './Dialog.metrics';\nimport type { DialogProps } from './Dialog.types.native';\nimport {\n  DialogActions,\n  DialogContent,\n  DialogHeader,\n  DialogTitledContext,\n  dialogBodyTextStyle,\n} from './DialogParts.native';\nimport { PulseRing } from '../../../platform/pulse-ring.native';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { renderTextChildren } from '../../../platform/text-children';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport type { UiTheme } from '../../../tokens/theme';\n\n// The shared stories import all four names from `./Dialog`, which resolves here\n// under Metro and in the native Storybook; the slots live in their own file to\n// keep this one about the envelope, and are re-exported so that import works.\nexport { DialogActions, DialogContent, DialogHeader } from './DialogParts.native';\n\n/**\n * The dialog body. Consumers that pass raw children (no `DialogContent`) would\n * render them flush against the paper edges — give them comfortable default\n * padding; `DialogContent`/`DialogActions` users keep managing their own.\n *\n * The web can also catch a slot passed through a COMPONENT boundary, with a\n * `:has()` selector that asks the DOM one step after React could. React Native\n * has no such selector, so only the element-type check runs here — see\n * NATIVE-NOTES.md.\n */\nconst styles = StyleSheet.create({\n  /** Same sizing `DialogParts`' content slot uses, so a raw body behaves like one. */\n  rawBody: { flexGrow: 1, flexShrink: 1 },\n});\n\nfunction bodyOf(theme: UiTheme, children: React.ReactNode, hasTitle: boolean): React.ReactNode {\n  if (hasSpacingSlot(children, [DialogContent, DialogActions])) return children;\n  const top = hasTitle ? DIALOG_BODY_PADDING_UNITS.topUnderTitle : DIALOG_BODY_PADDING_UNITS.top;\n  // A `ScrollView`, not a `View`: MUI's paper is `overflow-y: auto`, so\n  // overlong raw children scroll on the web. The native paper is `maxHeight:\n  // '100%'` with its overflow hidden, so a plain wrapper clipped them with no\n  // way to reach the rest. `DialogContent` already gets this treatment; raw\n  // children were the one path that did not.\n  return (\n    <ScrollView\n      style={styles.rawBody}\n      contentContainerStyle={{\n        paddingHorizontal: theme.spacing(DIALOG_BODY_PADDING_UNITS.horizontal),\n        paddingBottom: theme.spacing(DIALOG_BODY_PADDING_UNITS.bottom),\n        paddingTop: theme.spacing(top),\n      }}\n    >\n      {renderTextChildren(children, dialogBodyTextStyle(theme))}\n    </ScrollView>\n  );\n}\n\n/**\n * Whether a `<DialogHeader>` arrived as a CHILD rather than through the `title`\n * prop.\n *\n * The web tightens a body under a title with\n * `.MuiDialogTitle-root + &.MuiDialogContent-root` — a CSS sibling selector, so\n * it fires however the title got there. Native reads a context instead, and the\n * context was set from the `title` prop alone, which is the composition nothing\n * uses: every story and `Dialog.md` write the header as a child, and those\n * bodies took the untitled 24px inset where the web gives them 12px.\n */\nfunction hasHeaderChild(children: React.ReactNode): boolean {\n  return React.Children.toArray(children).some(\n    (child) => React.isValidElement(child) && child.type === DialogHeader,\n  );\n}\n\nexport function Dialog(rawProps: DialogProps): React.JSX.Element {\n  const {\n    children,\n    open,\n    variant,\n    size,\n    title,\n    description,\n    showCloseButton,\n    backdrop: _backdrop,\n    persistent,\n    glass,\n    gradient: _gradient,\n    glow,\n    pulse,\n    borderRadius,\n    onClose,\n    ...others\n  } = withDialogDefaults(rawProps);\n\n  const theme = useUiTheme();\n  const look = dialogLook(theme, { variant, size, borderRadius, glass, glow, pulse });\n  const testID = resolveTestId(others, 'dialog');\n  const { style, ...modalProps } = withoutTestIdProps(others);\n\n  // A persistent dialog refuses both routes out that are not a button: the\n  // backdrop and Escape (which `Modal` routes through `onRequestClose`).\n  const dismiss = persistent ? undefined : onClose;\n\n  return (\n    <Modal visible={open} transparent onRequestClose={dismiss} {...modalProps}>\n      <View style={look.overlay}>\n        <Pressable\n          aria-hidden\n          tabIndex={-1}\n          testID={`${testID}-backdrop`}\n          onPress={dismiss}\n          style={[StyleSheet.absoluteFill, dialogBackdrop(glass)]}\n        />\n        <View testID={testID} style={[look.paper, style]}>\n          {pulse ? (\n            <PulseRing\n              color={theme.palette.primary.main}\n              radius={look.radius}\n              spread={DIALOG_PULSE.spread}\n              durationMs={DIALOG_PULSE.durationMs}\n              fadeAt={DIALOG_PULSE.fadeAt}\n              opacity={DIALOG_PULSE.alpha}\n              testID={`${testID}-pulse`}\n            />\n          ) : null}\n          <DialogTitledContext.Provider value={Boolean(title) || hasHeaderChild(children)}>\n            {title ? (\n              <DialogHeader\n                title={title}\n                subtitle={description}\n                showCloseButton={showCloseButton}\n                onClose={onClose}\n                dataTestId={testID}\n              />\n            ) : null}\n            {bodyOf(theme, children, Boolean(title))}\n          </DialogTitledContext.Provider>\n        </View>\n      </View>\n    </Modal>\n  );\n}\n\nDialog.displayName = 'Dialog';\n","import * as React from 'react';\n\nimport type { DialogBaseProps } from './Dialog.base';\n\n/**\n * The defaults, and the slot detection, BOTH renderers run.\n *\n * Neither imports a renderer: the defaults are plain values and the slot check\n * is told which component identities count, because `DialogContent` on the web\n * and `DialogContent` on React Native are different functions answering to the\n * same name.\n */\n\ntype DialogDefaultedKeys =\n  | 'variant'\n  | 'size'\n  | 'showCloseButton'\n  | 'backdrop'\n  | 'persistent'\n  | 'glass'\n  | 'gradient'\n  | 'glow'\n  | 'pulse'\n  | 'borderRadius';\n\nexport const DIALOG_DEFAULTS: Required<Pick<DialogBaseProps, DialogDefaultedKeys>> = {\n  variant: 'default',\n  size: 'md',\n  showCloseButton: true,\n  backdrop: true,\n  persistent: false,\n  glass: false,\n  gradient: false,\n  glow: false,\n  pulse: false,\n  borderRadius: 'lg',\n};\n\n/** The renderer's own props with every defaulted field guaranteed present. */\nexport type DialogPropsWithDefaults<P extends DialogBaseProps> = P &\n  Required<Pick<DialogBaseProps, DialogDefaultedKeys>>;\n\n/**\n * Apply {@link DIALOG_DEFAULTS} exactly like parameter defaults would: only a\n * missing/`undefined` prop falls back (a loop, so the component's cyclomatic\n * complexity doesn't pay one branch per defaulted prop).\n */\nexport function withDialogDefaults<P extends DialogBaseProps>(props: P): DialogPropsWithDefaults<P> {\n  const merged = { ...props } as Record<string, unknown>;\n  for (const [key, value] of Object.entries(DIALOG_DEFAULTS)) {\n    if (merged[key] === undefined) merged[key] = value;\n  }\n  return merged as unknown as DialogPropsWithDefaults<P>;\n}\n\n/**\n * Does this hand us a spacing slot? Fragments are transparent: `<>` is a way of\n * passing several children, not a child that owns them, and a consumer who\n * groups a `DialogContent` and a `DialogActions` in one has still passed both.\n *\n * Only the slots themselves count, and only at the top. A `DialogContent`\n * genuinely nested inside a `<div>` is that div's content, and the dialog\n * padding the div is right.\n *\n * `slots` is passed in rather than closed over so the two renderers can hand it\n * their own `DialogContent` / `DialogActions`.\n */\nexport function hasSpacingSlot(children: React.ReactNode, slots: readonly unknown[]): boolean {\n  return React.Children.toArray(children).some((child) => {\n    if (!React.isValidElement(child)) return false;\n    if (slots.includes(child.type)) return true;\n    if (child.type !== React.Fragment) return false;\n    return hasSpacingSlot((child.props as { children?: React.ReactNode }).children, slots);\n  });\n}\n","import type { DialogBorderRadius, DialogSize } from './Dialog.base';\nimport type { UiShadow } from '../../../tokens/shadow';\n\n/**\n * THE NUMBERS BOTH `Dialog` RENDERERS DRAW WITH.\n *\n * `Dialog.styles.ts` / `Dialog.tsx` (MUI) and `Dialog.look.native.ts` /\n * `Dialog.native.tsx` (React Native) read this one table. Spacing is in\n * SPACING UNITS wherever the web writes `theme.spacing(n)`; everything else is\n * px, a ratio or an alpha. Shadows are `UiShadow`s — see `src/tokens/shadow.ts`\n * for why they have a shape rather than a string.\n */\n\n/* ── The paper ────────────────────────────────────────────────────────────── */\n\n/** `theme.spacing(n)` per named radius; `lg` is the default. */\nexport const DIALOG_RADIUS_UNITS: Record<DialogBorderRadius, number> = {\n  none: 0,\n  sm: 0.5,\n  md: 1,\n  lg: 2,\n  xl: 3,\n};\n\n/** How wide the paper may grow, per size, in px. Also the drawer's fixed width. */\nexport const DIALOG_MAX_WIDTH: Record<DialogSize, number> = {\n  xs: 400,\n  sm: 600,\n  md: 800,\n  lg: 1000,\n  xl: 1200,\n};\n\n/** The paper is 90% of the viewport up to its max width, `theme.spacing(2)` clear of the edge. */\nexport const DIALOG_WIDTH_PERCENT = 90;\nexport const DIALOG_MARGIN_UNITS = 2;\n\n/** The hairline `glass` draws. */\nexport const DIALOG_BORDER_WIDTH = 1;\n\n/**\n * MUI's `theme.shadows[24]` — the elevation a `Dialog`'s Paper paints.\n *\n * Restated rather than derived because the web never names it: `MuiDialog`\n * passes `elevation={24}` to its Paper, and React Native has no Paper to\n * inherit that from.\n */\nexport const DIALOG_PAPER_SHADOW: readonly UiShadow[] = [\n  { offsetX: 0, offsetY: 11, blurRadius: 15, spreadDistance: -7, color: 'rgba(0, 0, 0, 0.2)' },\n  { offsetX: 0, offsetY: 24, blurRadius: 38, spreadDistance: 3, color: 'rgba(0, 0, 0, 0.14)' },\n  { offsetX: 0, offsetY: 9, blurRadius: 46, spreadDistance: 8, color: 'rgba(0, 0, 0, 0.12)' },\n];\n\n/* ── Variants and decorations ─────────────────────────────────────────────── */\n\n/** `glass`: a 0.1 wash of the paper behind a 20px blur, inside a primary hairline. */\nexport const DIALOG_GLASS = {\n  backgroundAlpha: 0.1,\n  blurPx: 20,\n  borderAlpha: 0.2,\n  shadow: { offsetY: 8, blurRadius: 32, alpha: 0.1 },\n} as const;\n\n/** `gradient`: a faint primary-into-secondary wash at 135°, over a 10px blur. */\nexport const DIALOG_GRADIENT = { angleDeg: 135, stopAlpha: 0.1, blurPx: 10 } as const;\n\n/** `glow`: a 40px halo of the primary hue. */\nexport const DIALOG_GLOW = { blurRadius: 40, alpha: 0.3 } as const;\n\n/**\n * `pulse`: a ring of the primary hue that grows 20px out of the paper's edge and\n * fades, every two seconds. The web draws it as an `::after` box-shadow spread\n * behind the paper (`z-index: -1`).\n */\nexport const DIALOG_PULSE = {\n  alpha: 0.3,\n  durationMs: 2000,\n  spread: 20,\n  /** The fraction of the cycle the ring is still visible for. */\n  fadeAt: 0.7,\n  zIndex: -1,\n} as const;\n\n/**\n * The scrim: half-black, or a fifth of it behind an 8px blur for `glass`.\n *\n * It paints on BOTH renderers whatever `backdrop` is set to. The web reads that\n * prop as `BackdropComponent={backdrop ? Backdrop : undefined}`, and `undefined`\n * is exactly what MUI falls back to `Backdrop` for — so the scrim is there\n * either way. Native mirrors that rather than inventing a difference; fixing it\n * is a web change, made once, for both.\n */\nexport const DIALOG_BACKDROP = { alpha: { plain: 0.5, glass: 0.2 }, blurPx: 8 } as const;\n\n/* ── The slots ────────────────────────────────────────────────────────────── */\n\n/** Raw children (no `DialogContent`/`DialogActions`) get this padding, in spacing units. */\nexport const DIALOG_BODY_PADDING_UNITS = {\n  horizontal: 3,\n  bottom: 2.5,\n  top: 2.5,\n  /** Tighter under a title, whose own bottom padding is most of the gap. */\n  topUnderTitle: 0.5,\n} as const;\n\n/** A `DialogHeader` given raw `children` is a padded box over a hairline instead. */\nexport const DIALOG_HEADER_CHILDREN_PADDING_UNITS = 2;\n\n/**\n * The title row: MUI's `DialogTitle` padding in px, and the bottom the web\n * overrides in spacing units — tighter when a subtitle follows it.\n */\nexport const DIALOG_TITLE = {\n  padding: { top: 16, horizontal: 24 },\n  paddingBottomUnits: { withSubtitle: 1, plain: 2 },\n  subtitleGapUnits: 0.5,\n} as const;\n\n/**\n * The close button: MUI's `IconButton` at its default 8px padding around a\n * 24px glyph, on a circular hover wash.\n */\nexport const DIALOG_CLOSE_BUTTON = { padding: 8, iconSize: 24 } as const;\n\n/** `DialogContent`: `theme.spacing(3)`, tightened by `dense`. */\nexport const DIALOG_CONTENT_PADDING_UNITS = { normal: 3, dense: 1.5 } as const;\n\n/**\n * Top padding for a body that sits directly under the title.\n *\n * MUI zeroes it there, assuming the title's own bottom padding is the whole\n * gap. That assumption breaks for a body opening with an outlined field: a\n * filled field floats its label ABOVE the input's border box, and the body is a\n * clipping box, so the label gets sliced in half (FUT-544). 12px clears the\n * shrunk label's 9px overhang and leaves the gap visually tight.\n */\nexport const DIALOG_TITLED_BODY_PADDING_TOP_UNITS = 1.5;\n\n/** `DialogActions`: `theme.spacing(2)` around, and one unit between by default. */\nexport const DIALOG_ACTIONS = { paddingUnits: 2, defaultSpacingUnits: 1 } as const;\n","import type { ViewStyle } from 'react-native';\n\nimport type { DialogBorderRadius, DialogSize, DialogVariant } from './Dialog.base';\nimport {\n  DIALOG_BACKDROP,\n  DIALOG_BORDER_WIDTH,\n  DIALOG_GLASS,\n  DIALOG_GLOW,\n  DIALOG_MARGIN_UNITS,\n  DIALOG_MAX_WIDTH,\n  DIALOG_PAPER_SHADOW,\n  DIALOG_RADIUS_UNITS,\n} from './Dialog.metrics';\nimport { alpha } from '../../../tokens/color';\nimport { BLACK, halo } from '../../../tokens/shadow';\nimport type { UiTheme } from '../../../tokens/theme';\n\n/**\n * WHAT THE NATIVE `Dialog` PAINTS — the arithmetic, with no JSX in sight.\n *\n * `variantStylesOf` builds one `sx` by spreading base, then the decorations\n * (`glow`, `pulse`), then the variant's own surface; whichever wrote a property\n * last wins. The composition here spreads the SAME things in the SAME order, so\n * `glow` survives on a `default` paper (whose surface declares no shadow) and is\n * buried by a `glass` one, on both renderers.\n */\n\n/** The named radius as a length. */\nexport function dialogRadius(theme: UiTheme, radius: DialogBorderRadius): number {\n  return theme.spacing(DIALOG_RADIUS_UNITS[radius] ?? DIALOG_RADIUS_UNITS.lg);\n}\n\n/** The scrim behind the paper: half-black, or a fifth of it for `glass`. */\nexport function dialogBackdrop(glass: boolean): ViewStyle {\n  return {\n    backgroundColor: alpha(BLACK, glass ? DIALOG_BACKDROP.alpha.glass : DIALOG_BACKDROP.alpha.plain),\n  };\n}\n\n/** The glass surface, shared by `variant=\"glass\"` and the `glass` flag. */\nfunction glassSurface(theme: UiTheme): ViewStyle {\n  return {\n    backgroundColor: alpha(theme.palette.background.paper, DIALOG_GLASS.backgroundAlpha),\n    borderWidth: DIALOG_BORDER_WIDTH,\n    borderStyle: 'solid',\n    borderColor: alpha(theme.palette.primary.main, DIALOG_GLASS.borderAlpha),\n  };\n}\n\nexport interface DialogLookArgs {\n  variant: DialogVariant;\n  size: DialogSize;\n  borderRadius: DialogBorderRadius;\n  glass: boolean;\n  glow: boolean;\n  pulse: boolean;\n}\n\nexport interface DialogLook {\n  /** Where the paper sits inside the modal, and how far in from the edges. */\n  overlay: ViewStyle;\n  paper: ViewStyle;\n  /** The paper's corner radius, for the pulse ring to follow. */\n  radius: number;\n}\n\n/** The centred paper of `default` and `glass`, before the variant paints over it. */\nfunction centredOverlay(theme: UiTheme): ViewStyle {\n  return {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n    // The web gives the PAPER `margin: theme.spacing(2)`; an inset on the\n    // overlay is the same gap and leaves the paper free to be `100%` wide.\n    padding: theme.spacing(DIALOG_MARGIN_UNITS),\n  };\n}\n\nfunction variantPaper(theme: UiTheme, a: DialogLookArgs, radius: number): ViewStyle {\n  switch (a.variant) {\n    case 'glass':\n      return {\n        ...glassSurface(theme),\n        boxShadow: [\n          {\n            offsetX: 0,\n            offsetY: DIALOG_GLASS.shadow.offsetY,\n            blurRadius: DIALOG_GLASS.shadow.blurRadius,\n            spreadDistance: 0,\n            color: alpha(BLACK, DIALOG_GLASS.shadow.alpha),\n          },\n        ],\n      };\n    case 'fullscreen':\n      return { borderRadius: 0, width: '100%', height: '100%', maxWidth: undefined };\n    case 'drawer':\n      return {\n        // SQUARE, because that is what the web paints. Two things have to fail\n        // for a drawer to have a corner there and both do: the `sx` builds\n        // `${radius}px 0 0 ${radius}px` out of `theme.spacing()`, which already\n        // returns a px string, so the declaration reads `16pxpx 0 0 16pxpx` and\n        // the browser drops it; and that `sx` lands on a plain `Box` INSIDE the\n        // Drawer, whose own Paper MUI renders with `square: true`. Nothing is\n        // left to round the corners. See NATIVE-NOTES.md.\n        borderRadius: 0,\n        width: DIALOG_MAX_WIDTH[a.size] ?? DIALOG_MAX_WIDTH.md,\n        maxWidth: '100%',\n        height: '100%',\n        maxHeight: undefined,\n      };\n    default:\n      return a.glass ? { ...glassSurface(theme), borderRadius: radius } : {};\n  }\n}\n\n/** `fullscreen` and `drawer` fill the screen, so neither is inset or centred. */\nfunction overlayFor(theme: UiTheme, variant: DialogVariant): ViewStyle {\n  if (variant === 'fullscreen') return { flex: 1 };\n  if (variant === 'drawer') return { flex: 1, alignItems: 'flex-end' };\n  return centredOverlay(theme);\n}\n\n/**\n * Everything the dialog paints, decided once per render.\n *\n * The base carries what MUI's `Paper` gives every dialog — the paper colour and\n * `shadows[24]` — because React Native has no Paper to inherit them from; a\n * `glow` or a variant shadow then overrides it exactly as the `sx` does.\n *\n * `overflow` clips the paper's children to its corners, as MUI's own\n * `overflow-y: auto` does — except under `pulse` or `glow`, which have to paint\n * OUTSIDE the paper and are clipped by the view's own overflow on a device.\n */\nexport function dialogLook(theme: UiTheme, a: DialogLookArgs): DialogLook {\n  const radius = dialogRadius(theme, a.borderRadius);\n\n  const base: ViewStyle = {\n    position: 'relative',\n    borderRadius: radius,\n    backgroundColor: theme.palette.background.paper,\n    boxShadow: DIALOG_PAPER_SHADOW,\n    width: '100%',\n    maxWidth: DIALOG_MAX_WIDTH[a.size] ?? DIALOG_MAX_WIDTH.md,\n    maxHeight: '100%',\n    overflow: a.pulse || a.glow ? 'visible' : 'hidden',\n  };\n\n  return {\n    radius,\n    overlay: overlayFor(theme, a.variant),\n    paper: {\n      ...base,\n      ...(a.glow\n        ? { boxShadow: halo(DIALOG_GLOW.blurRadius, alpha(theme.palette.primary.main, DIALOG_GLOW.alpha)) }\n        : null),\n      ...variantPaper(theme, a, radius),\n    },\n  };\n}\n","import * as React from 'react';\nimport {\n  Pressable,\n  ScrollView,\n  StyleSheet,\n  Text as RNText,\n  View,\n  type TextStyle,\n  type ViewStyle,\n} from 'react-native';\n\nimport {\n  DIALOG_ACTIONS,\n  DIALOG_CLOSE_BUTTON,\n  DIALOG_CONTENT_PADDING_UNITS,\n  DIALOG_HEADER_CHILDREN_PADDING_UNITS,\n  DIALOG_TITLE,\n  DIALOG_TITLED_BODY_PADDING_TOP_UNITS,\n} from './Dialog.metrics';\nimport type {\n  DialogActionsAlignment,\n  DialogActionsProps,\n  DialogContentProps,\n  DialogHeaderProps,\n} from './Dialog.types.native';\nimport { Icon } from '../../../icons/Icon.native';\nimport { childTestId, slotTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { renderTextChildren } from '../../../platform/text-children';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { muiTypeStyle } from '../../../tokens/mui-type';\nimport type { UiTheme } from '../../../tokens/theme';\n\n/**\n * THE THREE SLOTS A DIALOG IS BUILT OUT OF, ON REACT NATIVE.\n *\n * The web overrides only padding, alignment and the dividers, so the rest of\n * the numbers are MUI's own and are restated in `Dialog.metrics.ts` rather than\n * re-invented.\n */\n\n/**\n * Is there a title above this body?\n *\n * The web asks the DOM — `.MuiDialogTitle-root + &` — because only the CSS knows\n * which `DialogContent` actually FOLLOWS the title. React Native has no sibling\n * selector, so `Dialog` says so through context instead; the difference is that\n * a second `DialogContent` further down gets the tighter top padding too.\n */\nexport const DialogTitledContext = React.createContext(false);\n\n/** The body text of a slot, in MUI's `body1`, so a bare string is not unstyled. */\nexport const dialogBodyTextStyle = (theme: UiTheme): TextStyle => ({\n  ...muiTypeStyle(theme, 'body1'),\n  color: theme.palette.text.primary,\n});\n\n/** MUI's dialog title: `h6`, in the body ink. */\nexport const dialogTitleStyle = (theme: UiTheme): TextStyle => ({\n  ...muiTypeStyle(theme, 'h6'),\n  color: theme.palette.text.primary,\n});\n\n/** The subtitle under it: `body2`, muted, one half-unit down. */\nexport const dialogSubtitleStyle = (theme: UiTheme): TextStyle => ({\n  ...muiTypeStyle(theme, 'body2'),\n  color: theme.palette.text.secondary,\n  marginTop: theme.spacing(DIALOG_TITLE.subtitleGapUnits),\n});\n\nfunction CloseButton({ onPress, testID }: { onPress: () => void; testID: string }): React.JSX.Element {\n  const theme = useUiTheme();\n  return (\n    <Pressable\n      role=\"button\"\n      aria-label=\"close\"\n      testID={testID}\n      onPress={onPress}\n      style={({ pressed }) => [\n        styles.close,\n        pressed ? { backgroundColor: theme.palette.action.hover } : null,\n      ]}\n    >\n      <Icon name=\"Close\" size={DIALOG_CLOSE_BUTTON.iconSize} color={theme.palette.text.secondary} />\n    </Pressable>\n  );\n}\n\nexport function DialogHeader({\n  children,\n  title,\n  subtitle,\n  showCloseButton = true,\n  onClose,\n  ...others\n}: DialogHeaderProps): React.JSX.Element {\n  const theme = useUiTheme();\n  const { style, ...viewProps } = withoutTestIdProps(others);\n\n  if (children) {\n    return (\n      <View\n        testID={slotTestId(others, 'header', 'dialog')}\n        style={[\n          {\n            padding: theme.spacing(DIALOG_HEADER_CHILDREN_PADDING_UNITS),\n            borderBottomWidth: 1,\n            borderBottomColor: theme.palette.divider,\n            borderStyle: 'solid',\n          },\n          style,\n        ]}\n        {...viewProps}\n      >\n        {renderTextChildren(children, dialogBodyTextStyle(theme))}\n      </View>\n    );\n  }\n\n  const paddingBottom = theme.spacing(\n    subtitle ? DIALOG_TITLE.paddingBottomUnits.withSubtitle : DIALOG_TITLE.paddingBottomUnits.plain,\n  );\n\n  return (\n    <View\n      testID={slotTestId(others, 'title', 'dialog')}\n      style={[styles.header, { paddingBottom }, style]}\n      {...viewProps}\n    >\n      <View style={styles.headerText}>\n        {/*\n          MUI's `DialogTitle` renders `component: \"h2\"`, so the web dialog has a\n          heading and the native one had none. `role`/`aria-level` are what\n          react-native-web maps to an `<h2>`; a device reads the same pair\n          through `accessibilityRole=\"header\"`, which RN derives from `role`.\n        */}\n        <RNText role=\"heading\" aria-level={2} style={dialogTitleStyle(theme)}>\n          {title}\n        </RNText>\n        {subtitle ? <RNText style={dialogSubtitleStyle(theme)}>{subtitle}</RNText> : null}\n      </View>\n      {showCloseButton && onClose ? (\n        <CloseButton onPress={onClose} testID={childTestId(others, 'close', 'dialog')} />\n      ) : null}\n    </View>\n  );\n}\n\nDialogHeader.displayName = 'DialogHeader';\n\nexport function DialogContent({\n  children,\n  dividers = false,\n  dense = false,\n  ...others\n}: DialogContentProps): React.JSX.Element {\n  const theme = useUiTheme();\n  const titled = React.useContext(DialogTitledContext);\n  const { style, ...viewProps } = withoutTestIdProps(others);\n  const padding = theme.spacing(\n    dense ? DIALOG_CONTENT_PADDING_UNITS.dense : DIALOG_CONTENT_PADDING_UNITS.normal,\n  );\n  const paddingTop = titled\n    ? theme.spacing(DIALOG_TITLED_BODY_PADDING_TOP_UNITS)\n    : padding;\n\n  return (\n    <ScrollView\n      testID={slotTestId(others, 'content', 'dialog')}\n      style={[\n        styles.content,\n        dividers\n          ? {\n              borderTopWidth: 1,\n              borderBottomWidth: 1,\n              borderStyle: 'solid',\n              borderColor: theme.palette.divider,\n            }\n          : null,\n        style,\n      ]}\n      contentContainerStyle={{ padding, paddingTop }}\n      {...viewProps}\n    >\n      {renderTextChildren(children, dialogBodyTextStyle(theme))}\n    </ScrollView>\n  );\n}\n\nDialogContent.displayName = 'DialogContent';\n\nconst JUSTIFY: Record<DialogActionsAlignment, NonNullable<ViewStyle['justifyContent']>> = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n  'space-between': 'space-between',\n};\n\nexport function DialogActions({\n  children,\n  alignment = 'right',\n  spacing = DIALOG_ACTIONS.defaultSpacingUnits,\n  ...others\n}: DialogActionsProps): React.JSX.Element {\n  const theme = useUiTheme();\n  const { style, ...viewProps } = withoutTestIdProps(others);\n\n  return (\n    <View\n      testID={slotTestId(others, 'actions', 'dialog')}\n      style={[\n        styles.actions,\n        {\n          padding: theme.spacing(DIALOG_ACTIONS.paddingUnits),\n          justifyContent: JUSTIFY[alignment],\n          gap: theme.spacing(spacing),\n        },\n        style,\n      ]}\n      {...viewProps}\n    >\n      {renderTextChildren(children, dialogBodyTextStyle(theme))}\n    </View>\n  );\n}\n\nDialogActions.displayName = 'DialogActions';\n\nconst styles = StyleSheet.create({\n  header: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    flexGrow: 0,\n    flexShrink: 0,\n    paddingTop: DIALOG_TITLE.padding.top,\n    paddingHorizontal: DIALOG_TITLE.padding.horizontal,\n  },\n  headerText: {\n    flexShrink: 1,\n  },\n  close: {\n    padding: DIALOG_CLOSE_BUTTON.padding,\n    borderRadius: 9999,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  content: {\n    flexGrow: 1,\n    flexShrink: 1,\n  },\n  actions: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    flexGrow: 0,\n    flexShrink: 0,\n  },\n});\n"],"mappings":"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","names":["React","Pressable","ScrollView","StyleSheet","View","React","jsx","jsxs","styles","StyleSheet","ScrollView","View","Pressable"]}
+{"version":3,"sources":["../../../src/components/feedback/Dialog/Dialog.native.tsx","../../../src/components/feedback/Dialog/Dialog.helpers.ts","../../../src/components/feedback/Dialog/Dialog.metrics.ts","../../../src/components/feedback/Dialog/Dialog.look.native.ts","../../../src/components/feedback/Dialog/DialogParts.native.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Modal, Pressable, ScrollView, StyleSheet, View } from 'react-native';\n\nimport { hasSpacingSlot, withDialogDefaults } from './Dialog.helpers';\nimport { dialogBackdrop, dialogLook } from './Dialog.look.native';\nimport { DIALOG_BODY_PADDING_UNITS, DIALOG_PULSE } from './Dialog.metrics';\nimport type { DialogProps } from './Dialog.types.native';\nimport {\n  DialogActions,\n  DialogContent,\n  DialogHeader,\n  DialogTitledContext,\n  dialogBodyTextStyle,\n} from './DialogParts.native';\nimport { PulseRing } from '../../../platform/pulse-ring.native';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { renderTextChildren } from '../../../platform/text-children';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport type { UiTheme } from '../../../tokens/theme';\n\n// The shared stories import all four names from `./Dialog`, which resolves here\n// under Metro and in the native Storybook; the slots live in their own file to\n// keep this one about the envelope, and are re-exported so that import works.\nexport { DialogActions, DialogContent, DialogHeader } from './DialogParts.native';\n\n/**\n * The dialog body. Consumers that pass raw children (no `DialogContent`) would\n * render them flush against the paper edges — give them comfortable default\n * padding; `DialogContent`/`DialogActions` users keep managing their own.\n *\n * The web can also catch a slot passed through a COMPONENT boundary, with a\n * `:has()` selector that asks the DOM one step after React could. React Native\n * has no such selector, so only the element-type check runs here — see\n * NATIVE-NOTES.md.\n */\nconst styles = StyleSheet.create({\n  /** Same sizing `DialogParts`' content slot uses, so a raw body behaves like one. */\n  rawBody: { flexGrow: 1, flexShrink: 1 },\n});\n\nfunction bodyOf(theme: UiTheme, children: React.ReactNode, hasTitle: boolean): React.ReactNode {\n  if (hasSpacingSlot(children, [DialogContent, DialogActions])) return children;\n  const top = hasTitle ? DIALOG_BODY_PADDING_UNITS.topUnderTitle : DIALOG_BODY_PADDING_UNITS.top;\n  // A `ScrollView`, not a `View`: MUI's paper is `overflow-y: auto`, so\n  // overlong raw children scroll on the web. The native paper is `maxHeight:\n  // '100%'` with its overflow hidden, so a plain wrapper clipped them with no\n  // way to reach the rest. `DialogContent` already gets this treatment; raw\n  // children were the one path that did not.\n  return (\n    <ScrollView\n      style={styles.rawBody}\n      contentContainerStyle={{\n        paddingHorizontal: theme.spacing(DIALOG_BODY_PADDING_UNITS.horizontal),\n        paddingBottom: theme.spacing(DIALOG_BODY_PADDING_UNITS.bottom),\n        paddingTop: theme.spacing(top),\n      }}\n    >\n      {renderTextChildren(children, dialogBodyTextStyle(theme))}\n    </ScrollView>\n  );\n}\n\n/**\n * Whether a `<DialogHeader>` arrived as a CHILD rather than through the `title`\n * prop.\n *\n * The web tightens a body under a title with\n * `.MuiDialogTitle-root + &.MuiDialogContent-root` — a CSS sibling selector, so\n * it fires however the title got there. Native reads a context instead, and the\n * context was set from the `title` prop alone, which is the composition nothing\n * uses: every story and `Dialog.md` write the header as a child, and those\n * bodies took the untitled 24px inset where the web gives them 12px.\n */\nfunction hasHeaderChild(children: React.ReactNode): boolean {\n  return React.Children.toArray(children).some(\n    (child) => React.isValidElement(child) && child.type === DialogHeader,\n  );\n}\n\nexport function Dialog(rawProps: DialogProps): React.JSX.Element {\n  const {\n    children,\n    open,\n    variant,\n    size,\n    title,\n    description,\n    showCloseButton,\n    backdrop: _backdrop,\n    persistent,\n    glass,\n    gradient: _gradient,\n    glow,\n    pulse,\n    borderRadius,\n    onClose,\n    ...others\n  } = withDialogDefaults(rawProps);\n\n  const theme = useUiTheme();\n  const look = dialogLook(theme, { variant, size, borderRadius, glass, glow, pulse });\n  const testID = resolveTestId(others, 'dialog');\n  const { style, ...modalProps } = withoutTestIdProps(others);\n\n  // A persistent dialog refuses both routes out that are not a button: the\n  // backdrop and Escape (which `Modal` routes through `onRequestClose`).\n  const dismiss = persistent ? undefined : onClose;\n\n  return (\n    <Modal visible={open} transparent onRequestClose={dismiss} {...modalProps}>\n      <View style={look.overlay}>\n        <Pressable\n          aria-hidden\n          tabIndex={-1}\n          testID={`${testID}-backdrop`}\n          onPress={dismiss}\n          style={[StyleSheet.absoluteFill, dialogBackdrop(glass)]}\n        />\n        <View testID={testID} style={[look.paper, style]}>\n          {pulse ? (\n            <PulseRing\n              color={theme.palette.primary.main}\n              radius={look.radius}\n              spread={DIALOG_PULSE.spread}\n              durationMs={DIALOG_PULSE.durationMs}\n              fadeAt={DIALOG_PULSE.fadeAt}\n              opacity={DIALOG_PULSE.alpha}\n              testID={`${testID}-pulse`}\n            />\n          ) : null}\n          <DialogTitledContext.Provider value={Boolean(title) || hasHeaderChild(children)}>\n            {title ? (\n              <DialogHeader\n                title={title}\n                subtitle={description}\n                showCloseButton={showCloseButton}\n                onClose={onClose}\n                dataTestId={testID}\n              />\n            ) : null}\n            {bodyOf(theme, children, Boolean(title))}\n          </DialogTitledContext.Provider>\n        </View>\n      </View>\n    </Modal>\n  );\n}\n\nDialog.displayName = 'Dialog';\n","import * as React from 'react';\n\nimport type { DialogBaseProps } from './Dialog.base';\n\n/**\n * The defaults, and the slot detection, BOTH renderers run.\n *\n * Neither imports a renderer: the defaults are plain values and the slot check\n * is told which component identities count, because `DialogContent` on the web\n * and `DialogContent` on React Native are different functions answering to the\n * same name.\n */\n\ntype DialogDefaultedKeys =\n  | 'variant'\n  | 'size'\n  | 'showCloseButton'\n  | 'backdrop'\n  | 'persistent'\n  | 'glass'\n  | 'gradient'\n  | 'glow'\n  | 'pulse'\n  | 'borderRadius';\n\nexport const DIALOG_DEFAULTS: Required<Pick<DialogBaseProps, DialogDefaultedKeys>> = {\n  variant: 'default',\n  size: 'md',\n  showCloseButton: true,\n  backdrop: true,\n  persistent: false,\n  glass: false,\n  gradient: false,\n  glow: false,\n  pulse: false,\n  borderRadius: 'lg',\n};\n\n/** The renderer's own props with every defaulted field guaranteed present. */\nexport type DialogPropsWithDefaults<P extends DialogBaseProps> = P &\n  Required<Pick<DialogBaseProps, DialogDefaultedKeys>>;\n\n/**\n * Apply {@link DIALOG_DEFAULTS} exactly like parameter defaults would: only a\n * missing/`undefined` prop falls back (a loop, so the component's cyclomatic\n * complexity doesn't pay one branch per defaulted prop).\n */\nexport function withDialogDefaults<P extends DialogBaseProps>(props: P): DialogPropsWithDefaults<P> {\n  const merged = { ...props } as Record<string, unknown>;\n  for (const [key, value] of Object.entries(DIALOG_DEFAULTS)) {\n    if (merged[key] === undefined) merged[key] = value;\n  }\n  return merged as unknown as DialogPropsWithDefaults<P>;\n}\n\n/**\n * Does this hand us a spacing slot? Fragments are transparent: `<>` is a way of\n * passing several children, not a child that owns them, and a consumer who\n * groups a `DialogContent` and a `DialogActions` in one has still passed both.\n *\n * Only the slots themselves count, and only at the top. A `DialogContent`\n * genuinely nested inside a `<div>` is that div's content, and the dialog\n * padding the div is right.\n *\n * `slots` is passed in rather than closed over so the two renderers can hand it\n * their own `DialogContent` / `DialogActions`.\n */\nexport function hasSpacingSlot(children: React.ReactNode, slots: readonly unknown[]): boolean {\n  return React.Children.toArray(children).some((child) => {\n    if (!React.isValidElement(child)) return false;\n    if (slots.includes(child.type)) return true;\n    if (child.type !== React.Fragment) return false;\n    return hasSpacingSlot((child.props as { children?: React.ReactNode }).children, slots);\n  });\n}\n","import type { DialogBorderRadius, DialogSize } from './Dialog.base';\nimport { alpha } from '../../../tokens/color';\nimport { ABSOLUTE_INK } from '../../../tokens/ink.core';\nimport type { UiShadow } from '../../../tokens/shadow';\n\n/**\n * THE NUMBERS BOTH `Dialog` RENDERERS DRAW WITH.\n *\n * `Dialog.styles.ts` / `Dialog.tsx` (MUI) and `Dialog.look.native.ts` /\n * `Dialog.native.tsx` (React Native) read this one table. Spacing is in\n * SPACING UNITS wherever the web writes `theme.spacing(n)`; everything else is\n * px, a ratio or an alpha. Shadows are `UiShadow`s — see `src/tokens/shadow.ts`\n * for why they have a shape rather than a string.\n */\n\n/* ── The paper ────────────────────────────────────────────────────────────── */\n\n/** `theme.spacing(n)` per named radius; `lg` is the default. */\nexport const DIALOG_RADIUS_UNITS: Record<DialogBorderRadius, number> = {\n  none: 0,\n  sm: 0.5,\n  md: 1,\n  lg: 2,\n  xl: 3,\n};\n\n/** How wide the paper may grow, per size, in px. Also the drawer's fixed width. */\nexport const DIALOG_MAX_WIDTH: Record<DialogSize, number> = {\n  xs: 400,\n  sm: 600,\n  md: 800,\n  lg: 1000,\n  xl: 1200,\n};\n\n/** The paper is 90% of the viewport up to its max width, `theme.spacing(2)` clear of the edge. */\nexport const DIALOG_WIDTH_PERCENT = 90;\nexport const DIALOG_MARGIN_UNITS = 2;\n\n/** The hairline `glass` draws. */\nexport const DIALOG_BORDER_WIDTH = 1;\n\n/**\n * MUI's `theme.shadows[24]` — the elevation a `Dialog`'s Paper paints.\n *\n * Restated rather than derived because the web never names it: `MuiDialog`\n * passes `elevation={24}` to its Paper, and React Native has no Paper to\n * inherit that from.\n */\nexport const DIALOG_PAPER_SHADOW: readonly UiShadow[] = [\n  { offsetX: 0, offsetY: 11, blurRadius: 15, spreadDistance: -7, color: alpha(ABSOLUTE_INK.black, 0.2) },\n  { offsetX: 0, offsetY: 24, blurRadius: 38, spreadDistance: 3, color: alpha(ABSOLUTE_INK.black, 0.14) },\n  { offsetX: 0, offsetY: 9, blurRadius: 46, spreadDistance: 8, color: alpha(ABSOLUTE_INK.black, 0.12) },\n];\n\n/* ── Variants and decorations ─────────────────────────────────────────────── */\n\n/** `glass`: a 0.1 wash of the paper behind a 20px blur, inside a primary hairline. */\nexport const DIALOG_GLASS = {\n  backgroundAlpha: 0.1,\n  blurPx: 20,\n  borderAlpha: 0.2,\n  shadow: { offsetY: 8, blurRadius: 32, alpha: 0.1 },\n} as const;\n\n/** `gradient`: a faint primary-into-secondary wash at 135°, over a 10px blur. */\nexport const DIALOG_GRADIENT = { angleDeg: 135, stopAlpha: 0.1, blurPx: 10 } as const;\n\n/** `glow`: a 40px halo of the primary hue. */\nexport const DIALOG_GLOW = { blurRadius: 40, alpha: 0.3 } as const;\n\n/**\n * `pulse`: a ring of the primary hue that grows 20px out of the paper's edge and\n * fades, every two seconds. The web draws it as an `::after` box-shadow spread\n * behind the paper (`z-index: -1`).\n */\nexport const DIALOG_PULSE = {\n  alpha: 0.3,\n  durationMs: 2000,\n  spread: 20,\n  /** The fraction of the cycle the ring is still visible for. */\n  fadeAt: 0.7,\n  zIndex: -1,\n} as const;\n\n/**\n * The scrim: half-black, or a fifth of it behind an 8px blur for `glass`.\n *\n * It paints on BOTH renderers whatever `backdrop` is set to. The web reads that\n * prop as `BackdropComponent={backdrop ? Backdrop : undefined}`, and `undefined`\n * is exactly what MUI falls back to `Backdrop` for — so the scrim is there\n * either way. Native mirrors that rather than inventing a difference; fixing it\n * is a web change, made once, for both.\n */\nexport const DIALOG_BACKDROP = { alpha: { plain: 0.5, glass: 0.2 }, blurPx: 8 } as const;\n\n/* ── The slots ────────────────────────────────────────────────────────────── */\n\n/** Raw children (no `DialogContent`/`DialogActions`) get this padding, in spacing units. */\nexport const DIALOG_BODY_PADDING_UNITS = {\n  horizontal: 3,\n  bottom: 2.5,\n  top: 2.5,\n  /** Tighter under a title, whose own bottom padding is most of the gap. */\n  topUnderTitle: 0.5,\n} as const;\n\n/** A `DialogHeader` given raw `children` is a padded box over a hairline instead. */\nexport const DIALOG_HEADER_CHILDREN_PADDING_UNITS = 2;\n\n/**\n * The title row: MUI's `DialogTitle` padding in px, and the bottom the web\n * overrides in spacing units — tighter when a subtitle follows it.\n */\nexport const DIALOG_TITLE = {\n  padding: { top: 16, horizontal: 24 },\n  paddingBottomUnits: { withSubtitle: 1, plain: 2 },\n  subtitleGapUnits: 0.5,\n} as const;\n\n/**\n * The close button: MUI's `IconButton` at its default 8px padding around a\n * 24px glyph, on a circular hover wash.\n */\nexport const DIALOG_CLOSE_BUTTON = { padding: 8, iconSize: 24 } as const;\n\n/** `DialogContent`: `theme.spacing(3)`, tightened by `dense`. */\nexport const DIALOG_CONTENT_PADDING_UNITS = { normal: 3, dense: 1.5 } as const;\n\n/**\n * Top padding for a body that sits directly under the title.\n *\n * MUI zeroes it there, assuming the title's own bottom padding is the whole\n * gap. That assumption breaks for a body opening with an outlined field: a\n * filled field floats its label ABOVE the input's border box, and the body is a\n * clipping box, so the label gets sliced in half (FUT-544). 12px clears the\n * shrunk label's 9px overhang and leaves the gap visually tight.\n */\nexport const DIALOG_TITLED_BODY_PADDING_TOP_UNITS = 1.5;\n\n/** `DialogActions`: `theme.spacing(2)` around, and one unit between by default. */\nexport const DIALOG_ACTIONS = { paddingUnits: 2, defaultSpacingUnits: 1 } as const;\n","import type { ViewStyle } from 'react-native';\n\nimport type { DialogBorderRadius, DialogSize, DialogVariant } from './Dialog.base';\nimport {\n  DIALOG_BACKDROP,\n  DIALOG_BORDER_WIDTH,\n  DIALOG_GLASS,\n  DIALOG_GLOW,\n  DIALOG_MARGIN_UNITS,\n  DIALOG_MAX_WIDTH,\n  DIALOG_PAPER_SHADOW,\n  DIALOG_RADIUS_UNITS,\n} from './Dialog.metrics';\nimport { alpha } from '../../../tokens/color';\nimport { BLACK, halo } from '../../../tokens/shadow';\nimport type { UiTheme } from '../../../tokens/theme';\n\n/**\n * WHAT THE NATIVE `Dialog` PAINTS — the arithmetic, with no JSX in sight.\n *\n * `variantStylesOf` builds one `sx` by spreading base, then the decorations\n * (`glow`, `pulse`), then the variant's own surface; whichever wrote a property\n * last wins. The composition here spreads the SAME things in the SAME order, so\n * `glow` survives on a `default` paper (whose surface declares no shadow) and is\n * buried by a `glass` one, on both renderers.\n */\n\n/** The named radius as a length. */\nexport function dialogRadius(theme: UiTheme, radius: DialogBorderRadius): number {\n  return theme.spacing(DIALOG_RADIUS_UNITS[radius] ?? DIALOG_RADIUS_UNITS.lg);\n}\n\n/** The scrim behind the paper: half-black, or a fifth of it for `glass`. */\nexport function dialogBackdrop(glass: boolean): ViewStyle {\n  return {\n    backgroundColor: alpha(BLACK, glass ? DIALOG_BACKDROP.alpha.glass : DIALOG_BACKDROP.alpha.plain),\n  };\n}\n\n/** The glass surface, shared by `variant=\"glass\"` and the `glass` flag. */\nfunction glassSurface(theme: UiTheme): ViewStyle {\n  return {\n    backgroundColor: alpha(theme.palette.background.paper, DIALOG_GLASS.backgroundAlpha),\n    borderWidth: DIALOG_BORDER_WIDTH,\n    borderStyle: 'solid',\n    borderColor: alpha(theme.palette.primary.main, DIALOG_GLASS.borderAlpha),\n  };\n}\n\nexport interface DialogLookArgs {\n  variant: DialogVariant;\n  size: DialogSize;\n  borderRadius: DialogBorderRadius;\n  glass: boolean;\n  glow: boolean;\n  pulse: boolean;\n}\n\nexport interface DialogLook {\n  /** Where the paper sits inside the modal, and how far in from the edges. */\n  overlay: ViewStyle;\n  paper: ViewStyle;\n  /** The paper's corner radius, for the pulse ring to follow. */\n  radius: number;\n}\n\n/** The centred paper of `default` and `glass`, before the variant paints over it. */\nfunction centredOverlay(theme: UiTheme): ViewStyle {\n  return {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n    // The web gives the PAPER `margin: theme.spacing(2)`; an inset on the\n    // overlay is the same gap and leaves the paper free to be `100%` wide.\n    padding: theme.spacing(DIALOG_MARGIN_UNITS),\n  };\n}\n\nfunction variantPaper(theme: UiTheme, a: DialogLookArgs, radius: number): ViewStyle {\n  switch (a.variant) {\n    case 'glass':\n      return {\n        ...glassSurface(theme),\n        boxShadow: [\n          {\n            offsetX: 0,\n            offsetY: DIALOG_GLASS.shadow.offsetY,\n            blurRadius: DIALOG_GLASS.shadow.blurRadius,\n            spreadDistance: 0,\n            color: alpha(BLACK, DIALOG_GLASS.shadow.alpha),\n          },\n        ],\n      };\n    case 'fullscreen':\n      return { borderRadius: 0, width: '100%', height: '100%', maxWidth: undefined };\n    case 'drawer':\n      return {\n        // SQUARE, because that is what the web paints. Two things have to fail\n        // for a drawer to have a corner there and both do: the `sx` builds\n        // `${radius}px 0 0 ${radius}px` out of `theme.spacing()`, which already\n        // returns a px string, so the declaration reads `16pxpx 0 0 16pxpx` and\n        // the browser drops it; and that `sx` lands on a plain `Box` INSIDE the\n        // Drawer, whose own Paper MUI renders with `square: true`. Nothing is\n        // left to round the corners. See NATIVE-NOTES.md.\n        borderRadius: 0,\n        width: DIALOG_MAX_WIDTH[a.size] ?? DIALOG_MAX_WIDTH.md,\n        maxWidth: '100%',\n        height: '100%',\n        maxHeight: undefined,\n      };\n    default:\n      return a.glass ? { ...glassSurface(theme), borderRadius: radius } : {};\n  }\n}\n\n/** `fullscreen` and `drawer` fill the screen, so neither is inset or centred. */\nfunction overlayFor(theme: UiTheme, variant: DialogVariant): ViewStyle {\n  if (variant === 'fullscreen') return { flex: 1 };\n  if (variant === 'drawer') return { flex: 1, alignItems: 'flex-end' };\n  return centredOverlay(theme);\n}\n\n/**\n * Everything the dialog paints, decided once per render.\n *\n * The base carries what MUI's `Paper` gives every dialog — the paper colour and\n * `shadows[24]` — because React Native has no Paper to inherit them from; a\n * `glow` or a variant shadow then overrides it exactly as the `sx` does.\n *\n * `overflow` clips the paper's children to its corners, as MUI's own\n * `overflow-y: auto` does — except under `pulse` or `glow`, which have to paint\n * OUTSIDE the paper and are clipped by the view's own overflow on a device.\n */\nexport function dialogLook(theme: UiTheme, a: DialogLookArgs): DialogLook {\n  const radius = dialogRadius(theme, a.borderRadius);\n\n  const base: ViewStyle = {\n    position: 'relative',\n    borderRadius: radius,\n    backgroundColor: theme.palette.background.paper,\n    boxShadow: DIALOG_PAPER_SHADOW,\n    width: '100%',\n    maxWidth: DIALOG_MAX_WIDTH[a.size] ?? DIALOG_MAX_WIDTH.md,\n    maxHeight: '100%',\n    overflow: a.pulse || a.glow ? 'visible' : 'hidden',\n  };\n\n  return {\n    radius,\n    overlay: overlayFor(theme, a.variant),\n    paper: {\n      ...base,\n      ...(a.glow\n        ? { boxShadow: halo(DIALOG_GLOW.blurRadius, alpha(theme.palette.primary.main, DIALOG_GLOW.alpha)) }\n        : null),\n      ...variantPaper(theme, a, radius),\n    },\n  };\n}\n","import * as React from 'react';\nimport {\n  Pressable,\n  ScrollView,\n  StyleSheet,\n  Text as RNText,\n  View,\n  type TextStyle,\n  type ViewStyle,\n} from 'react-native';\n\nimport {\n  DIALOG_ACTIONS,\n  DIALOG_CLOSE_BUTTON,\n  DIALOG_CONTENT_PADDING_UNITS,\n  DIALOG_HEADER_CHILDREN_PADDING_UNITS,\n  DIALOG_TITLE,\n  DIALOG_TITLED_BODY_PADDING_TOP_UNITS,\n} from './Dialog.metrics';\nimport type {\n  DialogActionsAlignment,\n  DialogActionsProps,\n  DialogContentProps,\n  DialogHeaderProps,\n} from './Dialog.types.native';\nimport { Icon } from '../../../icons/Icon.native';\nimport { childTestId, slotTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { renderTextChildren } from '../../../platform/text-children';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { muiTypeStyle } from '../../../tokens/mui-type';\nimport type { UiTheme } from '../../../tokens/theme';\n\n/**\n * THE THREE SLOTS A DIALOG IS BUILT OUT OF, ON REACT NATIVE.\n *\n * The web overrides only padding, alignment and the dividers, so the rest of\n * the numbers are MUI's own and are restated in `Dialog.metrics.ts` rather than\n * re-invented.\n */\n\n/**\n * Is there a title above this body?\n *\n * The web asks the DOM — `.MuiDialogTitle-root + &` — because only the CSS knows\n * which `DialogContent` actually FOLLOWS the title. React Native has no sibling\n * selector, so `Dialog` says so through context instead; the difference is that\n * a second `DialogContent` further down gets the tighter top padding too.\n */\nexport const DialogTitledContext = React.createContext(false);\n\n/** The body text of a slot, in MUI's `body1`, so a bare string is not unstyled. */\nexport const dialogBodyTextStyle = (theme: UiTheme): TextStyle => ({\n  ...muiTypeStyle(theme, 'body1'),\n  color: theme.palette.text.primary,\n});\n\n/** MUI's dialog title: `h6`, in the body ink. */\nexport const dialogTitleStyle = (theme: UiTheme): TextStyle => ({\n  ...muiTypeStyle(theme, 'h6'),\n  color: theme.palette.text.primary,\n});\n\n/** The subtitle under it: `body2`, muted, one half-unit down. */\nexport const dialogSubtitleStyle = (theme: UiTheme): TextStyle => ({\n  ...muiTypeStyle(theme, 'body2'),\n  color: theme.palette.text.secondary,\n  marginTop: theme.spacing(DIALOG_TITLE.subtitleGapUnits),\n});\n\nfunction CloseButton({ onPress, testID }: { onPress: () => void; testID: string }): React.JSX.Element {\n  const theme = useUiTheme();\n  return (\n    <Pressable\n      role=\"button\"\n      aria-label=\"close\"\n      testID={testID}\n      onPress={onPress}\n      style={({ pressed }) => [\n        styles.close,\n        pressed ? { backgroundColor: theme.palette.action.hover } : null,\n      ]}\n    >\n      <Icon name=\"Close\" size={DIALOG_CLOSE_BUTTON.iconSize} color={theme.palette.text.secondary} />\n    </Pressable>\n  );\n}\n\nexport function DialogHeader({\n  children,\n  title,\n  subtitle,\n  showCloseButton = true,\n  onClose,\n  ...others\n}: DialogHeaderProps): React.JSX.Element {\n  const theme = useUiTheme();\n  const { style, ...viewProps } = withoutTestIdProps(others);\n\n  if (children) {\n    return (\n      <View\n        testID={slotTestId(others, 'header', 'dialog')}\n        style={[\n          {\n            padding: theme.spacing(DIALOG_HEADER_CHILDREN_PADDING_UNITS),\n            borderBottomWidth: 1,\n            borderBottomColor: theme.palette.divider,\n            borderStyle: 'solid',\n          },\n          style,\n        ]}\n        {...viewProps}\n      >\n        {renderTextChildren(children, dialogBodyTextStyle(theme))}\n      </View>\n    );\n  }\n\n  const paddingBottom = theme.spacing(\n    subtitle ? DIALOG_TITLE.paddingBottomUnits.withSubtitle : DIALOG_TITLE.paddingBottomUnits.plain,\n  );\n\n  return (\n    <View\n      testID={slotTestId(others, 'title', 'dialog')}\n      style={[styles.header, { paddingBottom }, style]}\n      {...viewProps}\n    >\n      <View style={styles.headerText}>\n        {/*\n          MUI's `DialogTitle` renders `component: \"h2\"`, so the web dialog has a\n          heading and the native one had none. `role`/`aria-level` are what\n          react-native-web maps to an `<h2>`; a device reads the same pair\n          through `accessibilityRole=\"header\"`, which RN derives from `role`.\n        */}\n        <RNText role=\"heading\" aria-level={2} style={dialogTitleStyle(theme)}>\n          {title}\n        </RNText>\n        {subtitle ? <RNText style={dialogSubtitleStyle(theme)}>{subtitle}</RNText> : null}\n      </View>\n      {showCloseButton && onClose ? (\n        <CloseButton onPress={onClose} testID={childTestId(others, 'close', 'dialog')} />\n      ) : null}\n    </View>\n  );\n}\n\nDialogHeader.displayName = 'DialogHeader';\n\nexport function DialogContent({\n  children,\n  dividers = false,\n  dense = false,\n  ...others\n}: DialogContentProps): React.JSX.Element {\n  const theme = useUiTheme();\n  const titled = React.useContext(DialogTitledContext);\n  const { style, ...viewProps } = withoutTestIdProps(others);\n  const padding = theme.spacing(\n    dense ? DIALOG_CONTENT_PADDING_UNITS.dense : DIALOG_CONTENT_PADDING_UNITS.normal,\n  );\n  const paddingTop = titled\n    ? theme.spacing(DIALOG_TITLED_BODY_PADDING_TOP_UNITS)\n    : padding;\n\n  return (\n    <ScrollView\n      testID={slotTestId(others, 'content', 'dialog')}\n      style={[\n        styles.content,\n        dividers\n          ? {\n              borderTopWidth: 1,\n              borderBottomWidth: 1,\n              borderStyle: 'solid',\n              borderColor: theme.palette.divider,\n            }\n          : null,\n        style,\n      ]}\n      contentContainerStyle={{ padding, paddingTop }}\n      {...viewProps}\n    >\n      {renderTextChildren(children, dialogBodyTextStyle(theme))}\n    </ScrollView>\n  );\n}\n\nDialogContent.displayName = 'DialogContent';\n\nconst JUSTIFY: Record<DialogActionsAlignment, NonNullable<ViewStyle['justifyContent']>> = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n  'space-between': 'space-between',\n};\n\nexport function DialogActions({\n  children,\n  alignment = 'right',\n  spacing = DIALOG_ACTIONS.defaultSpacingUnits,\n  ...others\n}: DialogActionsProps): React.JSX.Element {\n  const theme = useUiTheme();\n  const { style, ...viewProps } = withoutTestIdProps(others);\n\n  return (\n    <View\n      testID={slotTestId(others, 'actions', 'dialog')}\n      style={[\n        styles.actions,\n        {\n          padding: theme.spacing(DIALOG_ACTIONS.paddingUnits),\n          justifyContent: JUSTIFY[alignment],\n          gap: theme.spacing(spacing),\n        },\n        style,\n      ]}\n      {...viewProps}\n    >\n      {renderTextChildren(children, dialogBodyTextStyle(theme))}\n    </View>\n  );\n}\n\nDialogActions.displayName = 'DialogActions';\n\nconst styles = StyleSheet.create({\n  header: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    flexGrow: 0,\n    flexShrink: 0,\n    paddingTop: DIALOG_TITLE.padding.top,\n    paddingHorizontal: DIALOG_TITLE.padding.horizontal,\n  },\n  headerText: {\n    flexShrink: 1,\n  },\n  close: {\n    padding: DIALOG_CLOSE_BUTTON.padding,\n    borderRadius: 9999,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  content: {\n    flexGrow: 1,\n    flexShrink: 1,\n  },\n  actions: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    flexGrow: 0,\n    flexShrink: 0,\n  },\n});\n"],"mappings":"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","names":["React","Pressable","ScrollView","StyleSheet","View","React","jsx","jsxs","styles","StyleSheet","ScrollView","View","Pressable"]}

package/dist/native/form/Button.js

@@ -1,7 +1,8 @@
 import {
   Button
-} from "../chunks/chunk-KIG4KY4W.js";
+} from "../chunks/chunk-ONXKFA5Z.js";
 import "../chunks/chunk-IMGBBIMT.js";
+import "../chunks/chunk-ZRQHLTYG.js";
 import "../chunks/chunk-5GJ5OG5R.js";
 import "../chunks/chunk-AR5O4BEY.js";
 import "../chunks/chunk-X6RQGKGF.js";

package/dist/native/form/Checkbox.js

@@ -1,6 +1,9 @@
 import {
   withDefaults
 } from "../chunks/chunk-OXHZDFJZ.js";
+import {
+  EFFECT_GLOW
+} from "../chunks/chunk-ZRQHLTYG.js";
 import {
   webKeyDown
 } from "../chunks/chunk-DN73KYIZ.js";
@@ -55,9 +58,8 @@ var CHECKBOX_VARIANT = {
   toggle: { radius: 12, scale: 1.2 }
 };
 var CHECKBOX_SPINNER = { size: 20, offset: -10 };
-var CHECKBOX_EFFECT_INK = { r: 25, g: 118, b: 210 };
 var CHECKBOX_GLOW = { blur: { from: 5, to: 20 }, alpha: { from: 0.5, to: 0.8 }, ms: 2e3 };
-var effectInk = (alphaValue) => `rgba(${CHECKBOX_EFFECT_INK.r}, ${CHECKBOX_EFFECT_INK.g}, ${CHECKBOX_EFFECT_INK.b}, ${alphaValue})`;
+var effectInk = (alphaValue) => alpha(EFFECT_GLOW.muiBlue, alphaValue);
 var CHECKBOX_LABEL = { marginLeft: 0, fontSize: 14 };
 var CHECKBOX_HELPER = { marginLeftUnits: 4, marginTopUnits: 0.5, fontSize: 12, lineHeight: 1.66 };