@12-apps/ui 6.20.0 → 6.22.0

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

@@ -1,27 +1,27 @@
 import {
   Button
-} from "../chunks/chunk-UKCCYP52.js";
-import {
-  MUI_FONT_WEIGHT_MEDIUM,
-  MUI_TYPE,
-  muiTypeStyle
-} from "../chunks/chunk-HSIND52T.js";
+} from "../chunks/chunk-ATS7STZJ.js";
 import {
   webAria
-} from "../chunks/chunk-4NK5ZQZ3.js";
+} from "../chunks/chunk-T6BJPP3E.js";
 import "../chunks/chunk-5GJ5OG5R.js";
 import {
   Icon
-} from "../chunks/chunk-Q52IDAF2.js";
+} from "../chunks/chunk-QYUD3S6F.js";
+import "../chunks/chunk-5WLOVHKK.js";
 import {
   resolveTestId,
   withoutTestIdProps
-} from "../chunks/chunk-M4DTJDWU.js";
-import "../chunks/chunk-5WLOVHKK.js";
+} from "../chunks/chunk-AR5O4BEY.js";
+import {
+  MUI_FONT_WEIGHT_MEDIUM,
+  MUI_TYPE,
+  muiTypeStyle
+} from "../chunks/chunk-2UFNPDYT.js";
 import {
   useUiTheme
-} from "../chunks/chunk-YTHR4Y5P.js";
-import "../chunks/chunk-P3PL4WBO.js";
+} from "../chunks/chunk-GWGIWQO7.js";
+import "../chunks/chunk-LEMMXZFN.js";
 
 // src/components/data-display/ErrorState/ErrorState.native.tsx
 import * as React from "react";

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

@@ -1,19 +1,19 @@
 import {
-  muiTypeStyle
-} from "../chunks/chunk-HSIND52T.js";
+  SIZE_VALUES
+} from "../chunks/chunk-5WLOVHKK.js";
 import {
   resolveTestId,
   withoutTestIdProps
-} from "../chunks/chunk-M4DTJDWU.js";
+} from "../chunks/chunk-AR5O4BEY.js";
 import {
-  SIZE_VALUES
-} from "../chunks/chunk-5WLOVHKK.js";
+  muiTypeStyle
+} from "../chunks/chunk-2UFNPDYT.js";
 import {
   useUiTheme
-} from "../chunks/chunk-YTHR4Y5P.js";
+} from "../chunks/chunk-GWGIWQO7.js";
 import {
   alpha
-} from "../chunks/chunk-P3PL4WBO.js";
+} from "../chunks/chunk-LEMMXZFN.js";
 
 // src/components/data-display/LoadingState/LoadingState.native.tsx
 import * as React from "react";

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

@@ -3,15 +3,15 @@ import {
 } from "../chunks/chunk-MLQIOKQZ.js";
 import {
   MUI_TYPE
-} from "../chunks/chunk-HSIND52T.js";
+} from "../chunks/chunk-2UFNPDYT.js";
 import {
   useUiTheme
-} from "../chunks/chunk-YTHR4Y5P.js";
+} from "../chunks/chunk-GWGIWQO7.js";
 import {
   GREY,
   alpha,
   contrastText
-} from "../chunks/chunk-P3PL4WBO.js";
+} from "../chunks/chunk-LEMMXZFN.js";
 
 // src/components/data-display/Progress/Progress.native.tsx
 import * as React from "react";

package/dist/native/feedback/Dialog.js

@@ -0,0 +1,496 @@
+import {
+  BLACK,
+  PulseRing,
+  halo
+} from "../chunks/chunk-NRN37A5K.js";
+import {
+  renderTextChildren
+} from "../chunks/chunk-5GJ5OG5R.js";
+import {
+  Icon
+} from "../chunks/chunk-QYUD3S6F.js";
+import "../chunks/chunk-5WLOVHKK.js";
+import {
+  childTestId,
+  resolveTestId,
+  slotTestId,
+  withoutTestIdProps
+} from "../chunks/chunk-AR5O4BEY.js";
+import {
+  muiTypeStyle
+} from "../chunks/chunk-2UFNPDYT.js";
+import {
+  useUiTheme
+} from "../chunks/chunk-GWGIWQO7.js";
+import {
+  alpha
+} from "../chunks/chunk-LEMMXZFN.js";
+
+// src/components/feedback/Dialog/Dialog.native.tsx
+import * as React3 from "react";
+import { Modal, Pressable as Pressable2, ScrollView as ScrollView2, StyleSheet as StyleSheet2, View as View2 } from "react-native";
+
+// src/components/feedback/Dialog/Dialog.helpers.ts
+import * as React from "react";
+var DIALOG_DEFAULTS = {
+  variant: "default",
+  size: "md",
+  showCloseButton: true,
+  backdrop: true,
+  persistent: false,
+  glass: false,
+  gradient: false,
+  glow: false,
+  pulse: false,
+  borderRadius: "lg"
+};
+function withDialogDefaults(props) {
+  const merged = { ...props };
+  for (const [key, value] of Object.entries(DIALOG_DEFAULTS)) {
+    if (merged[key] === void 0) merged[key] = value;
+  }
+  return merged;
+}
+function hasSpacingSlot(children, slots) {
+  return React.Children.toArray(children).some((child) => {
+    if (!React.isValidElement(child)) return false;
+    if (slots.includes(child.type)) return true;
+    if (child.type !== React.Fragment) return false;
+    return hasSpacingSlot(child.props.children, slots);
+  });
+}
+
+// src/components/feedback/Dialog/Dialog.metrics.ts
+var DIALOG_RADIUS_UNITS = {
+  none: 0,
+  sm: 0.5,
+  md: 1,
+  lg: 2,
+  xl: 3
+};
+var DIALOG_MAX_WIDTH = {
+  xs: 400,
+  sm: 600,
+  md: 800,
+  lg: 1e3,
+  xl: 1200
+};
+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)" }
+];
+var DIALOG_GLASS = {
+  backgroundAlpha: 0.1,
+  blurPx: 20,
+  borderAlpha: 0.2,
+  shadow: { offsetY: 8, blurRadius: 32, alpha: 0.1 }
+};
+var DIALOG_GLOW = { blurRadius: 40, alpha: 0.3 };
+var DIALOG_PULSE = {
+  alpha: 0.3,
+  durationMs: 2e3,
+  spread: 20,
+  /** The fraction of the cycle the ring is still visible for. */
+  fadeAt: 0.7,
+  zIndex: -1
+};
+var DIALOG_BACKDROP = { alpha: { plain: 0.5, glass: 0.2 }, blurPx: 8 };
+var DIALOG_BODY_PADDING_UNITS = {
+  horizontal: 3,
+  bottom: 2.5,
+  top: 2.5,
+  /** Tighter under a title, whose own bottom padding is most of the gap. */
+  topUnderTitle: 0.5
+};
+var DIALOG_HEADER_CHILDREN_PADDING_UNITS = 2;
+var DIALOG_TITLE = {
+  padding: { top: 16, horizontal: 24 },
+  paddingBottomUnits: { withSubtitle: 1, plain: 2 },
+  subtitleGapUnits: 0.5
+};
+var DIALOG_CLOSE_BUTTON = { padding: 8, iconSize: 24 };
+var DIALOG_CONTENT_PADDING_UNITS = { normal: 3, dense: 1.5 };
+var DIALOG_TITLED_BODY_PADDING_TOP_UNITS = 1.5;
+var DIALOG_ACTIONS = { paddingUnits: 2, defaultSpacingUnits: 1 };
+
+// src/components/feedback/Dialog/Dialog.look.native.ts
+function dialogRadius(theme, radius) {
+  return theme.spacing(DIALOG_RADIUS_UNITS[radius] ?? DIALOG_RADIUS_UNITS.lg);
+}
+function dialogBackdrop(glass) {
+  return {
+    backgroundColor: alpha(BLACK, glass ? DIALOG_BACKDROP.alpha.glass : DIALOG_BACKDROP.alpha.plain)
+  };
+}
+function glassSurface(theme) {
+  return {
+    backgroundColor: alpha(theme.palette.background.paper, DIALOG_GLASS.backgroundAlpha),
+    borderWidth: DIALOG_BORDER_WIDTH,
+    borderStyle: "solid",
+    borderColor: alpha(theme.palette.primary.main, DIALOG_GLASS.borderAlpha)
+  };
+}
+function centredOverlay(theme) {
+  return {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    // The web gives the PAPER `margin: theme.spacing(2)`; an inset on the
+    // overlay is the same gap and leaves the paper free to be `100%` wide.
+    padding: theme.spacing(DIALOG_MARGIN_UNITS)
+  };
+}
+function variantPaper(theme, a, radius) {
+  switch (a.variant) {
+    case "glass":
+      return {
+        ...glassSurface(theme),
+        boxShadow: [
+          {
+            offsetX: 0,
+            offsetY: DIALOG_GLASS.shadow.offsetY,
+            blurRadius: DIALOG_GLASS.shadow.blurRadius,
+            spreadDistance: 0,
+            color: alpha(BLACK, DIALOG_GLASS.shadow.alpha)
+          }
+        ]
+      };
+    case "fullscreen":
+      return { borderRadius: 0, width: "100%", height: "100%", maxWidth: void 0 };
+    case "drawer":
+      return {
+        // SQUARE, because that is what the web paints. Two things have to fail
+        // for a drawer to have a corner there and both do: the `sx` builds
+        // `${radius}px 0 0 ${radius}px` out of `theme.spacing()`, which already
+        // returns a px string, so the declaration reads `16pxpx 0 0 16pxpx` and
+        // the browser drops it; and that `sx` lands on a plain `Box` INSIDE the
+        // Drawer, whose own Paper MUI renders with `square: true`. Nothing is
+        // left to round the corners. See NATIVE-NOTES.md.
+        borderRadius: 0,
+        width: DIALOG_MAX_WIDTH[a.size] ?? DIALOG_MAX_WIDTH.md,
+        maxWidth: "100%",
+        height: "100%",
+        maxHeight: void 0
+      };
+    default:
+      return a.glass ? { ...glassSurface(theme), borderRadius: radius } : {};
+  }
+}
+function overlayFor(theme, variant) {
+  if (variant === "fullscreen") return { flex: 1 };
+  if (variant === "drawer") return { flex: 1, alignItems: "flex-end" };
+  return centredOverlay(theme);
+}
+function dialogLook(theme, a) {
+  const radius = dialogRadius(theme, a.borderRadius);
+  const base = {
+    position: "relative",
+    borderRadius: radius,
+    backgroundColor: theme.palette.background.paper,
+    boxShadow: DIALOG_PAPER_SHADOW,
+    width: "100%",
+    maxWidth: DIALOG_MAX_WIDTH[a.size] ?? DIALOG_MAX_WIDTH.md,
+    maxHeight: "100%",
+    overflow: a.pulse || a.glow ? "visible" : "hidden"
+  };
+  return {
+    radius,
+    overlay: overlayFor(theme, a.variant),
+    paper: {
+      ...base,
+      ...a.glow ? { boxShadow: halo(DIALOG_GLOW.blurRadius, alpha(theme.palette.primary.main, DIALOG_GLOW.alpha)) } : null,
+      ...variantPaper(theme, a, radius)
+    }
+  };
+}
+
+// src/components/feedback/Dialog/DialogParts.native.tsx
+import * as React2 from "react";
+import {
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text as RNText,
+  View
+} from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DialogTitledContext = React2.createContext(false);
+var dialogBodyTextStyle = (theme) => ({
+  ...muiTypeStyle(theme, "body1"),
+  color: theme.palette.text.primary
+});
+var dialogTitleStyle = (theme) => ({
+  ...muiTypeStyle(theme, "h6"),
+  color: theme.palette.text.primary
+});
+var dialogSubtitleStyle = (theme) => ({
+  ...muiTypeStyle(theme, "body2"),
+  color: theme.palette.text.secondary,
+  marginTop: theme.spacing(DIALOG_TITLE.subtitleGapUnits)
+});
+function CloseButton({ onPress, testID }) {
+  const theme = useUiTheme();
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      role: "button",
+      "aria-label": "close",
+      testID,
+      onPress,
+      style: ({ pressed }) => [
+        styles.close,
+        pressed ? { backgroundColor: theme.palette.action.hover } : null
+      ],
+      children: /* @__PURE__ */ jsx(Icon, { name: "Close", size: DIALOG_CLOSE_BUTTON.iconSize, color: theme.palette.text.secondary })
+    }
+  );
+}
+function DialogHeader({
+  children,
+  title,
+  subtitle,
+  showCloseButton = true,
+  onClose,
+  ...others
+}) {
+  const theme = useUiTheme();
+  const { style, ...viewProps } = withoutTestIdProps(others);
+  if (children) {
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        testID: slotTestId(others, "header", "dialog"),
+        style: [
+          {
+            padding: theme.spacing(DIALOG_HEADER_CHILDREN_PADDING_UNITS),
+            borderBottomWidth: 1,
+            borderBottomColor: theme.palette.divider,
+            borderStyle: "solid"
+          },
+          style
+        ],
+        ...viewProps,
+        children: renderTextChildren(children, dialogBodyTextStyle(theme))
+      }
+    );
+  }
+  const paddingBottom = theme.spacing(
+    subtitle ? DIALOG_TITLE.paddingBottomUnits.withSubtitle : DIALOG_TITLE.paddingBottomUnits.plain
+  );
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID: slotTestId(others, "title", "dialog"),
+      style: [styles.header, { paddingBottom }, style],
+      ...viewProps,
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.headerText, children: [
+          /* @__PURE__ */ jsx(RNText, { role: "heading", "aria-level": 2, style: dialogTitleStyle(theme), children: title }),
+          subtitle ? /* @__PURE__ */ jsx(RNText, { style: dialogSubtitleStyle(theme), children: subtitle }) : null
+        ] }),
+        showCloseButton && onClose ? /* @__PURE__ */ jsx(CloseButton, { onPress: onClose, testID: childTestId(others, "close", "dialog") }) : null
+      ]
+    }
+  );
+}
+DialogHeader.displayName = "DialogHeader";
+function DialogContent({
+  children,
+  dividers = false,
+  dense = false,
+  ...others
+}) {
+  const theme = useUiTheme();
+  const titled = React2.useContext(DialogTitledContext);
+  const { style, ...viewProps } = withoutTestIdProps(others);
+  const padding = theme.spacing(
+    dense ? DIALOG_CONTENT_PADDING_UNITS.dense : DIALOG_CONTENT_PADDING_UNITS.normal
+  );
+  const paddingTop = titled ? theme.spacing(DIALOG_TITLED_BODY_PADDING_TOP_UNITS) : padding;
+  return /* @__PURE__ */ jsx(
+    ScrollView,
+    {
+      testID: slotTestId(others, "content", "dialog"),
+      style: [
+        styles.content,
+        dividers ? {
+          borderTopWidth: 1,
+          borderBottomWidth: 1,
+          borderStyle: "solid",
+          borderColor: theme.palette.divider
+        } : null,
+        style
+      ],
+      contentContainerStyle: { padding, paddingTop },
+      ...viewProps,
+      children: renderTextChildren(children, dialogBodyTextStyle(theme))
+    }
+  );
+}
+DialogContent.displayName = "DialogContent";
+var JUSTIFY = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end",
+  "space-between": "space-between"
+};
+function DialogActions({
+  children,
+  alignment = "right",
+  spacing = DIALOG_ACTIONS.defaultSpacingUnits,
+  ...others
+}) {
+  const theme = useUiTheme();
+  const { style, ...viewProps } = withoutTestIdProps(others);
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      testID: slotTestId(others, "actions", "dialog"),
+      style: [
+        styles.actions,
+        {
+          padding: theme.spacing(DIALOG_ACTIONS.paddingUnits),
+          justifyContent: JUSTIFY[alignment],
+          gap: theme.spacing(spacing)
+        },
+        style
+      ],
+      ...viewProps,
+      children: renderTextChildren(children, dialogBodyTextStyle(theme))
+    }
+  );
+}
+DialogActions.displayName = "DialogActions";
+var styles = StyleSheet.create({
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexGrow: 0,
+    flexShrink: 0,
+    paddingTop: DIALOG_TITLE.padding.top,
+    paddingHorizontal: DIALOG_TITLE.padding.horizontal
+  },
+  headerText: {
+    flexShrink: 1
+  },
+  close: {
+    padding: DIALOG_CLOSE_BUTTON.padding,
+    borderRadius: 9999,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  content: {
+    flexGrow: 1,
+    flexShrink: 1
+  },
+  actions: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexGrow: 0,
+    flexShrink: 0
+  }
+});
+
+// src/components/feedback/Dialog/Dialog.native.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var styles2 = StyleSheet2.create({
+  /** Same sizing `DialogParts`' content slot uses, so a raw body behaves like one. */
+  rawBody: { flexGrow: 1, flexShrink: 1 }
+});
+function bodyOf(theme, children, hasTitle) {
+  if (hasSpacingSlot(children, [DialogContent, DialogActions])) return children;
+  const top = hasTitle ? DIALOG_BODY_PADDING_UNITS.topUnderTitle : DIALOG_BODY_PADDING_UNITS.top;
+  return /* @__PURE__ */ jsx2(
+    ScrollView2,
+    {
+      style: styles2.rawBody,
+      contentContainerStyle: {
+        paddingHorizontal: theme.spacing(DIALOG_BODY_PADDING_UNITS.horizontal),
+        paddingBottom: theme.spacing(DIALOG_BODY_PADDING_UNITS.bottom),
+        paddingTop: theme.spacing(top)
+      },
+      children: renderTextChildren(children, dialogBodyTextStyle(theme))
+    }
+  );
+}
+function hasHeaderChild(children) {
+  return React3.Children.toArray(children).some(
+    (child) => React3.isValidElement(child) && child.type === DialogHeader
+  );
+}
+function Dialog(rawProps) {
+  const {
+    children,
+    open,
+    variant,
+    size,
+    title,
+    description,
+    showCloseButton,
+    backdrop: _backdrop,
+    persistent,
+    glass,
+    gradient: _gradient,
+    glow,
+    pulse,
+    borderRadius,
+    onClose,
+    ...others
+  } = withDialogDefaults(rawProps);
+  const theme = useUiTheme();
+  const look = dialogLook(theme, { variant, size, borderRadius, glass, glow, pulse });
+  const testID = resolveTestId(others, "dialog");
+  const { style, ...modalProps } = withoutTestIdProps(others);
+  const dismiss = persistent ? void 0 : onClose;
+  return /* @__PURE__ */ jsx2(Modal, { visible: open, transparent: true, onRequestClose: dismiss, ...modalProps, children: /* @__PURE__ */ jsxs2(View2, { style: look.overlay, children: [
+    /* @__PURE__ */ jsx2(
+      Pressable2,
+      {
+        "aria-hidden": true,
+        tabIndex: -1,
+        testID: `${testID}-backdrop`,
+        onPress: dismiss,
+        style: [StyleSheet2.absoluteFill, dialogBackdrop(glass)]
+      }
+    ),
+    /* @__PURE__ */ jsxs2(View2, { testID, style: [look.paper, style], children: [
+      pulse ? /* @__PURE__ */ jsx2(
+        PulseRing,
+        {
+          color: theme.palette.primary.main,
+          radius: look.radius,
+          spread: DIALOG_PULSE.spread,
+          durationMs: DIALOG_PULSE.durationMs,
+          fadeAt: DIALOG_PULSE.fadeAt,
+          opacity: DIALOG_PULSE.alpha,
+          testID: `${testID}-pulse`
+        }
+      ) : null,
+      /* @__PURE__ */ jsxs2(DialogTitledContext.Provider, { value: Boolean(title) || hasHeaderChild(children), children: [
+        title ? /* @__PURE__ */ jsx2(
+          DialogHeader,
+          {
+            title,
+            subtitle: description,
+            showCloseButton,
+            onClose,
+            dataTestId: testID
+          }
+        ) : null,
+        bodyOf(theme, children, Boolean(title))
+      ] })
+    ] })
+  ] }) });
+}
+Dialog.displayName = "Dialog";
+export {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogHeader
+};
+//# sourceMappingURL=Dialog.js.map

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

@@ -0,0 +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"]}