@12-apps/ui 6.21.0 → 6.23.0

package/src/components/feedback/Dialog/Dialog.base.ts

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react';
+
+import type { SizeValue } from '../../../tokens/vocabulary';
+
+/**
+ * THE CONTRACT BOTH `Dialog` RENDERERS HONOUR — and nothing else.
+ *
+ * No MUI and no react-native here, on purpose: this file ships in BOTH
+ * declaration outputs, and a native consumer has no `@mui/material` to resolve
+ * a type import against.
+ *
+ * `onClose` IS here, unusually for a handler, because it takes no event on
+ * either side: MUI's own `onClose` reason argument is dropped by `Dialog.tsx`
+ * before it reaches the caller, so both renderers pass a bare `() => void`.
+ */
+export type DialogVariant = 'default' | 'glass' | 'fullscreen' | 'drawer';
+export type DialogSize = SizeValue;
+export type DialogBorderRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+export type DialogActionsAlignment = 'left' | 'center' | 'right' | 'space-between';
+
+export interface DialogBaseProps {
+  open: boolean;
+  children: ReactNode;
+  variant?: DialogVariant;
+  size?: DialogSize;
+  title?: ReactNode;
+  description?: string;
+  showCloseButton?: boolean;
+  /** Ignored by BOTH renderers today; see `Dialog.metrics.ts`. */
+  backdrop?: boolean;
+  /** Refuses to close on a backdrop press or Escape. */
+  persistent?: boolean;
+  glass?: boolean;
+  gradient?: boolean;
+  glow?: boolean;
+  pulse?: boolean;
+  borderRadius?: DialogBorderRadius;
+  onClose?: () => void;
+  dataTestId?: string;
+  testID?: string;
+}
+
+export interface DialogHeaderBaseProps {
+  /** Custom header content; when given it replaces the title/subtitle layout. */
+  children?: ReactNode;
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  showCloseButton?: boolean;
+  onClose?: () => void;
+  dataTestId?: string;
+  testID?: string;
+}
+
+export interface DialogContentBaseProps {
+  children: ReactNode;
+  dividers?: boolean;
+  dense?: boolean;
+  dataTestId?: string;
+  testID?: string;
+}
+
+export interface DialogActionsBaseProps {
+  children: ReactNode;
+  alignment?: DialogActionsAlignment;
+  /** Between the actions, in spacing units. */
+  spacing?: number;
+  dataTestId?: string;
+  testID?: string;
+}

package/src/components/feedback/Dialog/Dialog.helpers.ts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+
+import type { DialogBaseProps } from './Dialog.base';
+
+/**
+ * The defaults, and the slot detection, BOTH renderers run.
+ *
+ * Neither imports a renderer: the defaults are plain values and the slot check
+ * is told which component identities count, because `DialogContent` on the web
+ * and `DialogContent` on React Native are different functions answering to the
+ * same name.
+ */
+
+type DialogDefaultedKeys =
+  | 'variant'
+  | 'size'
+  | 'showCloseButton'
+  | 'backdrop'
+  | 'persistent'
+  | 'glass'
+  | 'gradient'
+  | 'glow'
+  | 'pulse'
+  | 'borderRadius';
+
+export const DIALOG_DEFAULTS: Required<Pick<DialogBaseProps, DialogDefaultedKeys>> = {
+  variant: 'default',
+  size: 'md',
+  showCloseButton: true,
+  backdrop: true,
+  persistent: false,
+  glass: false,
+  gradient: false,
+  glow: false,
+  pulse: false,
+  borderRadius: 'lg',
+};
+
+/** The renderer's own props with every defaulted field guaranteed present. */
+export type DialogPropsWithDefaults<P extends DialogBaseProps> = P &
+  Required<Pick<DialogBaseProps, DialogDefaultedKeys>>;
+
+/**
+ * Apply {@link DIALOG_DEFAULTS} exactly like parameter defaults would: only a
+ * missing/`undefined` prop falls back (a loop, so the component's cyclomatic
+ * complexity doesn't pay one branch per defaulted prop).
+ */
+export function withDialogDefaults<P extends DialogBaseProps>(props: P): DialogPropsWithDefaults<P> {
+  const merged = { ...props } as Record<string, unknown>;
+  for (const [key, value] of Object.entries(DIALOG_DEFAULTS)) {
+    if (merged[key] === undefined) merged[key] = value;
+  }
+  return merged as unknown as DialogPropsWithDefaults<P>;
+}
+
+/**
+ * Does this hand us a spacing slot? Fragments are transparent: `<>` is a way of
+ * passing several children, not a child that owns them, and a consumer who
+ * groups a `DialogContent` and a `DialogActions` in one has still passed both.
+ *
+ * Only the slots themselves count, and only at the top. A `DialogContent`
+ * genuinely nested inside a `<div>` is that div's content, and the dialog
+ * padding the div is right.
+ *
+ * `slots` is passed in rather than closed over so the two renderers can hand it
+ * their own `DialogContent` / `DialogActions`.
+ */
+export function hasSpacingSlot(children: React.ReactNode, slots: readonly unknown[]): boolean {
+  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 as { children?: React.ReactNode }).children, slots);
+  });
+}

package/src/components/feedback/Dialog/Dialog.look.native.ts

@@ -0,0 +1,159 @@
+import type { ViewStyle } from 'react-native';
+
+import type { DialogBorderRadius, DialogSize, DialogVariant } from './Dialog.base';
+import {
+  DIALOG_BACKDROP,
+  DIALOG_BORDER_WIDTH,
+  DIALOG_GLASS,
+  DIALOG_GLOW,
+  DIALOG_MARGIN_UNITS,
+  DIALOG_MAX_WIDTH,
+  DIALOG_PAPER_SHADOW,
+  DIALOG_RADIUS_UNITS,
+} from './Dialog.metrics';
+import { alpha } from '../../../tokens/color';
+import { BLACK, halo } from '../../../tokens/shadow';
+import type { UiTheme } from '../../../tokens/theme';
+
+/**
+ * WHAT THE NATIVE `Dialog` PAINTS — the arithmetic, with no JSX in sight.
+ *
+ * `variantStylesOf` builds one `sx` by spreading base, then the decorations
+ * (`glow`, `pulse`), then the variant's own surface; whichever wrote a property
+ * last wins. The composition here spreads the SAME things in the SAME order, so
+ * `glow` survives on a `default` paper (whose surface declares no shadow) and is
+ * buried by a `glass` one, on both renderers.
+ */
+
+/** The named radius as a length. */
+export function dialogRadius(theme: UiTheme, radius: DialogBorderRadius): number {
+  return theme.spacing(DIALOG_RADIUS_UNITS[radius] ?? DIALOG_RADIUS_UNITS.lg);
+}
+
+/** The scrim behind the paper: half-black, or a fifth of it for `glass`. */
+export function dialogBackdrop(glass: boolean): ViewStyle {
+  return {
+    backgroundColor: alpha(BLACK, glass ? DIALOG_BACKDROP.alpha.glass : DIALOG_BACKDROP.alpha.plain),
+  };
+}
+
+/** The glass surface, shared by `variant="glass"` and the `glass` flag. */
+function glassSurface(theme: UiTheme): ViewStyle {
+  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),
+  };
+}
+
+export interface DialogLookArgs {
+  variant: DialogVariant;
+  size: DialogSize;
+  borderRadius: DialogBorderRadius;
+  glass: boolean;
+  glow: boolean;
+  pulse: boolean;
+}
+
+export interface DialogLook {
+  /** Where the paper sits inside the modal, and how far in from the edges. */
+  overlay: ViewStyle;
+  paper: ViewStyle;
+  /** The paper's corner radius, for the pulse ring to follow. */
+  radius: number;
+}
+
+/** The centred paper of `default` and `glass`, before the variant paints over it. */
+function centredOverlay(theme: UiTheme): ViewStyle {
+  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: UiTheme, a: DialogLookArgs, radius: number): ViewStyle {
+  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: undefined };
+    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: undefined,
+      };
+    default:
+      return a.glass ? { ...glassSurface(theme), borderRadius: radius } : {};
+  }
+}
+
+/** `fullscreen` and `drawer` fill the screen, so neither is inset or centred. */
+function overlayFor(theme: UiTheme, variant: DialogVariant): ViewStyle {
+  if (variant === 'fullscreen') return { flex: 1 };
+  if (variant === 'drawer') return { flex: 1, alignItems: 'flex-end' };
+  return centredOverlay(theme);
+}
+
+/**
+ * Everything the dialog paints, decided once per render.
+ *
+ * The base carries what MUI's `Paper` gives every dialog — the paper colour and
+ * `shadows[24]` — because React Native has no Paper to inherit them from; a
+ * `glow` or a variant shadow then overrides it exactly as the `sx` does.
+ *
+ * `overflow` clips the paper's children to its corners, as MUI's own
+ * `overflow-y: auto` does — except under `pulse` or `glow`, which have to paint
+ * OUTSIDE the paper and are clipped by the view's own overflow on a device.
+ */
+export function dialogLook(theme: UiTheme, a: DialogLookArgs): DialogLook {
+  const radius = dialogRadius(theme, a.borderRadius);
+
+  const base: ViewStyle = {
+    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),
+    },
+  };
+}

package/src/components/feedback/Dialog/Dialog.metrics.ts

@@ -0,0 +1,140 @@
+import type { DialogBorderRadius, DialogSize } from './Dialog.base';
+import type { UiShadow } from '../../../tokens/shadow';
+
+/**
+ * THE NUMBERS BOTH `Dialog` RENDERERS DRAW WITH.
+ *
+ * `Dialog.styles.ts` / `Dialog.tsx` (MUI) and `Dialog.look.native.ts` /
+ * `Dialog.native.tsx` (React Native) read this one table. Spacing is in
+ * SPACING UNITS wherever the web writes `theme.spacing(n)`; everything else is
+ * px, a ratio or an alpha. Shadows are `UiShadow`s — see `src/tokens/shadow.ts`
+ * for why they have a shape rather than a string.
+ */
+
+/* ── The paper ────────────────────────────────────────────────────────────── */
+
+/** `theme.spacing(n)` per named radius; `lg` is the default. */
+export const DIALOG_RADIUS_UNITS: Record<DialogBorderRadius, number> = {
+  none: 0,
+  sm: 0.5,
+  md: 1,
+  lg: 2,
+  xl: 3,
+};
+
+/** How wide the paper may grow, per size, in px. Also the drawer's fixed width. */
+export const DIALOG_MAX_WIDTH: Record<DialogSize, number> = {
+  xs: 400,
+  sm: 600,
+  md: 800,
+  lg: 1000,
+  xl: 1200,
+};
+
+/** The paper is 90% of the viewport up to its max width, `theme.spacing(2)` clear of the edge. */
+export const DIALOG_WIDTH_PERCENT = 90;
+export const DIALOG_MARGIN_UNITS = 2;
+
+/** The hairline `glass` draws. */
+export const DIALOG_BORDER_WIDTH = 1;
+
+/**
+ * MUI's `theme.shadows[24]` — the elevation a `Dialog`'s Paper paints.
+ *
+ * Restated rather than derived because the web never names it: `MuiDialog`
+ * passes `elevation={24}` to its Paper, and React Native has no Paper to
+ * inherit that from.
+ */
+export const DIALOG_PAPER_SHADOW: readonly UiShadow[] = [
+  { 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)' },
+];
+
+/* ── Variants and decorations ─────────────────────────────────────────────── */
+
+/** `glass`: a 0.1 wash of the paper behind a 20px blur, inside a primary hairline. */
+export const DIALOG_GLASS = {
+  backgroundAlpha: 0.1,
+  blurPx: 20,
+  borderAlpha: 0.2,
+  shadow: { offsetY: 8, blurRadius: 32, alpha: 0.1 },
+} as const;
+
+/** `gradient`: a faint primary-into-secondary wash at 135°, over a 10px blur. */
+export const DIALOG_GRADIENT = { angleDeg: 135, stopAlpha: 0.1, blurPx: 10 } as const;
+
+/** `glow`: a 40px halo of the primary hue. */
+export const DIALOG_GLOW = { blurRadius: 40, alpha: 0.3 } as const;
+
+/**
+ * `pulse`: a ring of the primary hue that grows 20px out of the paper's edge and
+ * fades, every two seconds. The web draws it as an `::after` box-shadow spread
+ * behind the paper (`z-index: -1`).
+ */
+export const DIALOG_PULSE = {
+  alpha: 0.3,
+  durationMs: 2000,
+  spread: 20,
+  /** The fraction of the cycle the ring is still visible for. */
+  fadeAt: 0.7,
+  zIndex: -1,
+} as const;
+
+/**
+ * The scrim: half-black, or a fifth of it behind an 8px blur for `glass`.
+ *
+ * It paints on BOTH renderers whatever `backdrop` is set to. The web reads that
+ * prop as `BackdropComponent={backdrop ? Backdrop : undefined}`, and `undefined`
+ * is exactly what MUI falls back to `Backdrop` for — so the scrim is there
+ * either way. Native mirrors that rather than inventing a difference; fixing it
+ * is a web change, made once, for both.
+ */
+export const DIALOG_BACKDROP = { alpha: { plain: 0.5, glass: 0.2 }, blurPx: 8 } as const;
+
+/* ── The slots ────────────────────────────────────────────────────────────── */
+
+/** Raw children (no `DialogContent`/`DialogActions`) get this padding, in spacing units. */
+export const 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,
+} as const;
+
+/** A `DialogHeader` given raw `children` is a padded box over a hairline instead. */
+export const DIALOG_HEADER_CHILDREN_PADDING_UNITS = 2;
+
+/**
+ * The title row: MUI's `DialogTitle` padding in px, and the bottom the web
+ * overrides in spacing units — tighter when a subtitle follows it.
+ */
+export const DIALOG_TITLE = {
+  padding: { top: 16, horizontal: 24 },
+  paddingBottomUnits: { withSubtitle: 1, plain: 2 },
+  subtitleGapUnits: 0.5,
+} as const;
+
+/**
+ * The close button: MUI's `IconButton` at its default 8px padding around a
+ * 24px glyph, on a circular hover wash.
+ */
+export const DIALOG_CLOSE_BUTTON = { padding: 8, iconSize: 24 } as const;
+
+/** `DialogContent`: `theme.spacing(3)`, tightened by `dense`. */
+export const DIALOG_CONTENT_PADDING_UNITS = { normal: 3, dense: 1.5 } as const;
+
+/**
+ * Top padding for a body that sits directly under the title.
+ *
+ * MUI zeroes it there, assuming the title's own bottom padding is the whole
+ * gap. That assumption breaks for a body opening with an outlined field: a
+ * filled field floats its label ABOVE the input's border box, and the body is a
+ * clipping box, so the label gets sliced in half (FUT-544). 12px clears the
+ * shrunk label's 9px overhang and leaves the gap visually tight.
+ */
+export const DIALOG_TITLED_BODY_PADDING_TOP_UNITS = 1.5;
+
+/** `DialogActions`: `theme.spacing(2)` around, and one unit between by default. */
+export const DIALOG_ACTIONS = { paddingUnits: 2, defaultSpacingUnits: 1 } as const;

package/src/components/feedback/Dialog/Dialog.native.tsx

@@ -0,0 +1,149 @@
+import * as React from 'react';
+import { Modal, Pressable, ScrollView, StyleSheet, View } from 'react-native';
+
+import { hasSpacingSlot, withDialogDefaults } from './Dialog.helpers';
+import { dialogBackdrop, dialogLook } from './Dialog.look.native';
+import { DIALOG_BODY_PADDING_UNITS, DIALOG_PULSE } from './Dialog.metrics';
+import type { DialogProps } from './Dialog.types.native';
+import {
+  DialogActions,
+  DialogContent,
+  DialogHeader,
+  DialogTitledContext,
+  dialogBodyTextStyle,
+} from './DialogParts.native';
+import { PulseRing } from '../../../platform/pulse-ring.native';
+import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
+import { renderTextChildren } from '../../../platform/text-children';
+import { useUiTheme } from '../../../provider/use-ui-theme.native';
+import type { UiTheme } from '../../../tokens/theme';
+
+// The shared stories import all four names from `./Dialog`, which resolves here
+// under Metro and in the native Storybook; the slots live in their own file to
+// keep this one about the envelope, and are re-exported so that import works.
+export { DialogActions, DialogContent, DialogHeader } from './DialogParts.native';
+
+/**
+ * The dialog body. Consumers that pass raw children (no `DialogContent`) would
+ * render them flush against the paper edges — give them comfortable default
+ * padding; `DialogContent`/`DialogActions` users keep managing their own.
+ *
+ * The web can also catch a slot passed through a COMPONENT boundary, with a
+ * `:has()` selector that asks the DOM one step after React could. React Native
+ * has no such selector, so only the element-type check runs here — see
+ * NATIVE-NOTES.md.
+ */
+const styles = StyleSheet.create({
+  /** Same sizing `DialogParts`' content slot uses, so a raw body behaves like one. */
+  rawBody: { flexGrow: 1, flexShrink: 1 },
+});
+
+function bodyOf(theme: UiTheme, children: React.ReactNode, hasTitle: boolean): React.ReactNode {
+  if (hasSpacingSlot(children, [DialogContent, DialogActions])) return children;
+  const top = hasTitle ? DIALOG_BODY_PADDING_UNITS.topUnderTitle : DIALOG_BODY_PADDING_UNITS.top;
+  // A `ScrollView`, not a `View`: MUI's paper is `overflow-y: auto`, so
+  // overlong raw children scroll on the web. The native paper is `maxHeight:
+  // '100%'` with its overflow hidden, so a plain wrapper clipped them with no
+  // way to reach the rest. `DialogContent` already gets this treatment; raw
+  // children were the one path that did not.
+  return (
+    <ScrollView
+      style={styles.rawBody}
+      contentContainerStyle={{
+        paddingHorizontal: theme.spacing(DIALOG_BODY_PADDING_UNITS.horizontal),
+        paddingBottom: theme.spacing(DIALOG_BODY_PADDING_UNITS.bottom),
+        paddingTop: theme.spacing(top),
+      }}
+    >
+      {renderTextChildren(children, dialogBodyTextStyle(theme))}
+    </ScrollView>
+  );
+}
+
+/**
+ * Whether a `<DialogHeader>` arrived as a CHILD rather than through the `title`
+ * prop.
+ *
+ * The web tightens a body under a title with
+ * `.MuiDialogTitle-root + &.MuiDialogContent-root` — a CSS sibling selector, so
+ * it fires however the title got there. Native reads a context instead, and the
+ * context was set from the `title` prop alone, which is the composition nothing
+ * uses: every story and `Dialog.md` write the header as a child, and those
+ * bodies took the untitled 24px inset where the web gives them 12px.
+ */
+function hasHeaderChild(children: React.ReactNode): boolean {
+  return React.Children.toArray(children).some(
+    (child) => React.isValidElement(child) && child.type === DialogHeader,
+  );
+}
+
+export function Dialog(rawProps: DialogProps): React.JSX.Element {
+  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);
+
+  // A persistent dialog refuses both routes out that are not a button: the
+  // backdrop and Escape (which `Modal` routes through `onRequestClose`).
+  const dismiss = persistent ? undefined : onClose;
+
+  return (
+    <Modal visible={open} transparent onRequestClose={dismiss} {...modalProps}>
+      <View style={look.overlay}>
+        <Pressable
+          aria-hidden
+          tabIndex={-1}
+          testID={`${testID}-backdrop`}
+          onPress={dismiss}
+          style={[StyleSheet.absoluteFill, dialogBackdrop(glass)]}
+        />
+        <View testID={testID} style={[look.paper, style]}>
+          {pulse ? (
+            <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}
+          <DialogTitledContext.Provider value={Boolean(title) || hasHeaderChild(children)}>
+            {title ? (
+              <DialogHeader
+                title={title}
+                subtitle={description}
+                showCloseButton={showCloseButton}
+                onClose={onClose}
+                dataTestId={testID}
+              />
+            ) : null}
+            {bodyOf(theme, children, Boolean(title))}
+          </DialogTitledContext.Provider>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+Dialog.displayName = 'Dialog';