@multiplatform.one/components 6.7.0 → 7.1.0

package/src/Toast/index.tsx

@@ -4,16 +4,25 @@
  * MP1 anatomy, knob wiring, stacking store and viewport).
  *
  * Usage:
- *   1. Mount <ToastViewport /> once (app root or story).
+ *   1. Mount <ToastViewport /> once (app shell or story). A second mounted
+ *      viewport no-ops (DEV warn) and takes over when the first unmounts.
  *   2. Fire from anywhere: useToast().show({ title, description, intent }).
  *
  * Anatomy: elevated overlay surface (knob elevatedSurface — overlay grammar)
  * hue-tinted by the intent sub-theme via <Intent> (one emphasis system, same
  * as Alert/Button): step-1 surface, step-9 accent edge, step-11 icon/action,
  * step-12 title. Semantic hues are tint-independent; accent rides the tint.
- * Auto-dismiss with pause-on-hover/focus, swipe to dismiss, Escape closes the
- * focused toast, F8 focuses the viewport (all from @tamagui/toast).
- * Enter/exit honor the animation knob — "none" renders instantly.
+ * Expiry policy lives in ./store (per-intent defaults, error ceiling, sticky
+ * opt-out); pause-on-hover/focus, swipe to dismiss, Escape and F8 come from
+ * @tamagui/toast. Enter/exit honor the animation knob.
+ *
+ * Layering: toasts are transient feedback, not modal chrome. On web the
+ * whole viewport is contained in a stacking context at `zIndex.loading`
+ * (1000) so modal overlays (sheet 100000 / dropdown 200000, portaled to the
+ * root host) always paint — and hit-test — above it. On native the
+ * @tamagui/toast wrapper + viewport are `pointerEvents="box-none"` all the
+ * way down, so ONLY the toast card itself is ever interactive; taps beside
+ * a toast reach whatever is underneath.
  */
 
 import {
@@ -23,24 +32,41 @@ import {
   WarningIcon,
   XIcon,
 } from "@phosphor-icons/react";
-import { Intent, useResolvedKnobs, warnBannedErrorWords } from "@multiplatform.one/theme";
+import {
+  Intent,
+  type KnobProps,
+  MIN_PRESS_TARGET,
+  ensureCompositeFocusRing,
+  pressTargetHitSlop,
+  pressTargetStyle,
+  useResolvedKnobs,
+  warnBannedErrorWords,
+} from "@multiplatform.one/theme";
+import { zIndex } from "@multiplatform.one/forms";
 import {
   Toast as TamaguiToast,
   ToastProvider as TamaguiToastProvider,
   ToastViewport as TamaguiToastViewport,
   type SwipeDirection,
 } from "@tamagui/toast";
-import { useMemo, useSyncExternalStore } from "react";
+import { useEffect, useId, useMemo, useSyncExternalStore } from "react";
 import type { ReactNode } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../shared/i18n";
 import { SizableText, View, YStack, isWeb, styled, useTheme, type ViewProps } from "tamagui";
 import {
+  claimToastViewport,
   dismissAllToasts,
   dismissToast,
   getToasts,
+  getToastViewportOwner,
+  releaseToastViewport,
   showToast,
   subscribeToasts,
+  subscribeToastViewport,
   TOAST_ACTION_MIN_MS,
+  TOAST_DEFAULT_MS,
+  TOAST_ERROR_MS,
+  TOAST_WARNING_MS,
   type ToastActionOptions,
   type ToastEntry,
   type ToastIntent,
@@ -48,7 +74,15 @@ import {
 } from "./store";
 
 export type { ToastActionOptions, ToastEntry, ToastIntent, ToastShowOptions };
-export { dismissAllToasts, dismissToast, showToast, TOAST_ACTION_MIN_MS };
+export {
+  dismissAllToasts,
+  dismissToast,
+  showToast,
+  TOAST_ACTION_MIN_MS,
+  TOAST_DEFAULT_MS,
+  TOAST_ERROR_MS,
+  TOAST_WARNING_MS,
+};
 
 // ── Intent visuals ────────────────────────────────────────────
 
@@ -84,47 +118,120 @@ export function useToast(): UseToastResult {
   );
 }
 
-// ── Buttons (keyboard-reachable, focus-visible ring) ─────────
-
-const focusRing = {
-  outlineWidth: 2,
-  outlineStyle: "solid",
-  outlineColor: "$color8",
-  outlineOffset: 1,
+// ── Press-floor + nested scale (LC-54 / LC-71 / LC-73) ────────
+//
+// Dismiss X and action are nested overlay chrome: painted boxes stay
+// glyph/label-scale (`nestedControl.px`, always < 44) while the press floor
+// is the grown-transparent 44px channel. The grown box NEVER paints —
+// hover/press ride the inner ring / pill (Chip-dismiss anatomy). LC-71: the
+// keyboard ring attaches to that inner painted box, never the 44px hit box
+// (`mp-chip-dismiss` / `mp-chip-dismiss-ring`). One ring contract everywhere
+// (DG-A11Y-01): the shared house recipe (2px solid $outlineColor, −2 inset)
+// rides the inner painted box, not a local $color8 variant.
+
+/** $0.5 token — Chip dismiss ring inset. */
+const CLOSE_RING_INSET = 2;
+// Beside an action the full horizontal outset would overlap the action's
+// press target — cap below half the tightest row gap ($2 ≈ 8px). Same
+// pitch-limited anatomy as Alert dismiss-beside-action.
+const CLOSE_ADJACENT_OUTSET = 6;
+
+const DESC_FONT_SIZE = {
+  $1: "$1",
+  $2: "$1",
+  $3: "$2",
+  $4: "$3",
+  $5: "$4",
 } as const;
 
-const ToastActionButton = styled(View, {
+function iconPxForSize(size: string): number {
+  return size === "small" ? 16 : size === "large" ? 20 : 18;
+}
+
+function closePxForSize(size: string): number {
+  return size === "small" ? 12 : size === "large" ? 16 : 14;
+}
+
+function toastClosePressProps(besideAction: boolean, closeVisual: number) {
+  const outset = Math.max(0, Math.ceil((MIN_PRESS_TARGET - closeVisual) / 2));
+  return {
+    ...pressTargetStyle(),
+    ...(besideAction ? { minWidth: closeVisual + CLOSE_ADJACENT_OUTSET * 2 } : null),
+    marginVertical: -outset,
+    marginHorizontal: -(besideAction ? CLOSE_ADJACENT_OUTSET : outset),
+    hitSlop: besideAction ? undefined : pressTargetHitSlop(closeVisual),
+  };
+}
+
+function toastActionPressProps(visualH: number) {
+  const outset = Math.max(0, Math.ceil((MIN_PRESS_TARGET - visualH) / 2));
+  return {
+    ...pressTargetStyle(),
+    marginVertical: -outset,
+    hitSlop: pressTargetHitSlop(visualH),
+  };
+}
+
+// Grown transparent press target. Stays UNPAINTED — LC-71 ring lives on the
+// inner pill via `.mp-chip-dismiss:focus-visible .mp-chip-dismiss-ring`.
+const ToastActionTarget = styled(View, {
   name: "ToastActionButton",
   render: "button",
   role: "button",
   cursor: "pointer",
   backgroundColor: "transparent",
   borderWidth: 0,
-  paddingHorizontal: "$2",
-  paddingVertical: "$1",
   alignSelf: "center",
+  alignItems: "center",
+  justifyContent: "center",
   flexShrink: 0,
+  opacity: 0.9,
+  outlineWidth: 0,
+  hoverStyle: { opacity: 1 },
+  pressStyle: { opacity: 0.95 },
+  focusStyle: { outlineWidth: 0 },
+  focusVisibleStyle: { opacity: 1, outlineWidth: 0 },
+});
+
+const ToastActionPill = styled(View, {
+  name: "ToastActionPill",
+  paddingHorizontal: "$2",
+  alignItems: "center",
+  justifyContent: "center",
   hoverStyle: { backgroundColor: "$color4" },
   pressStyle: { backgroundColor: "$color5" },
-  focusVisibleStyle: focusRing,
 });
 
-const ToastCloseButton = styled(View, {
+const ToastCloseTarget = styled(View, {
   name: "ToastCloseButton",
   render: "button",
   role: "button",
   cursor: "pointer",
   backgroundColor: "transparent",
   borderWidth: 0,
-  padding: "$1",
   alignSelf: "flex-start",
+  alignItems: "center",
+  justifyContent: "center",
   flexShrink: 0,
-  borderRadius: 1000,
+  opacity: 0.8,
+  outlineWidth: 0,
+  hoverStyle: { opacity: 1 },
+  pressStyle: { opacity: 0.9 },
+  focusStyle: { outlineWidth: 0 },
+  focusVisibleStyle: { opacity: 1, outlineWidth: 0 },
+});
+
+const ToastCloseRing = styled(View, {
+  name: "ToastCloseRing",
+  padding: "$0.5",
   alignItems: "center",
   justifyContent: "center",
+  // Token-valued radius: the raw `1000` never made it into the emitted CSS
+  // (square ring on an intended circle); $12 (50px) is a circle at this
+  // button's ≤44px box and survives the style compiler.
+  borderRadius: "$12",
   hoverStyle: { backgroundColor: "$color4" },
   pressStyle: { backgroundColor: "$color5" },
-  focusVisibleStyle: focusRing,
 });
 
 // ── Intent wrap ───────────────────────────────────────────────
@@ -146,8 +253,9 @@ function IntentWrap({ intent, children }: { intent: ToastIntent; children: React
  * viewport items. Must be called INSIDE the <Intent> wrapper so the theme
  * tokens resolve on the intent hue.
  */
-function useToastVisuals(intent: ToastIntent) {
-  const { knobProps } = useResolvedKnobs({ intent, component: "Toast" });
+function useToastVisuals(intent: ToastIntent, compact?: boolean) {
+  const { knobProps } = useResolvedKnobs({ intent, component: "Toast", compact });
+  if (typeof document !== "undefined") ensureCompositeFocusRing();
   const theme = useTheme();
   const isAccent = intent === "accent";
   // Semantic hues: step 11 — lowest AA-safe step of the hue on the step-1/2
@@ -158,12 +266,29 @@ function useToastVisuals(intent: ToastIntent) {
     | string
     | undefined;
   const accentTextColor = isAccent ? "$accentColor" : "$color11";
+  const size = knobProps.size;
+  const iconPx = iconPxForSize(size);
+  const closePx = closePxForSize(size);
+  const nestedPx = knobProps.nestedControl.px;
+  const labelFontSize = String(knobProps.label.fontSize);
+  const descFontSize =
+    DESC_FONT_SIZE[labelFontSize as keyof typeof DESC_FONT_SIZE] ?? knobProps.label.fontSize;
+  const closeVisual = closePx + CLOSE_RING_INSET * 2;
+  const closeRadius = knobProps.pointy ? 0 : "$12";
   return {
     knobProps,
     iconColor,
     accentTextColor,
+    iconPx,
+    closePx,
+    nestedPx,
+    closeVisual,
+    closeRadius,
+    descFontSize,
     frameProps: {
       ...knobProps.elevatedSurface,
+      ...knobProps.panelPadding,
+      ...knobProps.gap,
       // Intent accent edge (solid hue) — decorative, so no AA floor.
       // Logical start edge so the stripe mirrors in RTL. On web, inline style
       // (CSS logical props) deterministically beats the physical
@@ -183,13 +308,10 @@ function useToastVisuals(intent: ToastIntent) {
             borderStartWidth: 3,
             borderStartColor: isAccent ? "$accentBackground" : "$color9",
           }),
-      paddingVertical: "$3",
-      paddingHorizontal: "$3.5",
       width: 360,
       maxWidth: "100%",
       flexDirection: "row" as const,
       alignItems: "flex-start" as const,
-      gap: "$3",
     },
   };
 }
@@ -199,10 +321,22 @@ interface ToastBodyProps {
   description?: ReactNode;
   intent: ToastIntent;
   iconColor?: string;
+  iconPx: number;
+  descFontSize: string;
+  labelFontProps: KnobProps["label"];
   bodyFontProps: { fontFamily: string; fontWeight: string };
 }
 
-function ToastBody({ title, description, intent, iconColor, bodyFontProps }: ToastBodyProps) {
+function ToastBody({
+  title,
+  description,
+  intent,
+  iconColor,
+  iconPx,
+  descFontSize,
+  labelFontProps,
+  bodyFontProps,
+}: ToastBodyProps) {
   const Icon = intentIcons[intent];
   if (typeof title === "string") {
     warnBannedErrorWords(title, { component: "Toast" });
@@ -212,21 +346,15 @@ function ToastBody({ title, description, intent, iconColor, bodyFontProps }: Toa
   }
   return (
     <>
-      <View flexShrink={0} height={20} justifyContent="center" marginTop={1}>
-        <Icon size={20} weight="fill" color={iconColor} />
+      <View flexShrink={0} height={iconPx} justifyContent="center" marginTop={1}>
+        <Icon size={iconPx} weight="fill" color={iconColor} />
       </View>
       <YStack flexGrow={1} flexShrink={1} gap="$1" minWidth={0} justifyContent="center">
-        <SizableText
-          {...bodyFontProps}
-          fontWeight="600"
-          fontSize="$3"
-          lineHeight={20}
-          color="$color12"
-        >
+        <SizableText {...labelFontProps} fontWeight="600" color="$color12">
           {title}
         </SizableText>
         {description != null && description !== "" && (
-          <SizableText {...bodyFontProps} fontSize="$2" lineHeight={18} color="$color11">
+          <SizableText {...bodyFontProps} fontSize={descFontSize as never} color="$color11">
             {description}
           </SizableText>
         )}
@@ -238,12 +366,12 @@ function ToastBody({ title, description, intent, iconColor, bodyFontProps }: Toa
 interface ToastActionLabelProps {
   label: string;
   color: string;
-  bodyFontProps: { fontFamily: string; fontWeight: string };
+  labelFontProps: KnobProps["label"];
 }
 
-function ToastActionLabel({ label, color, bodyFontProps }: ToastActionLabelProps) {
+function ToastActionLabel({ label, color, labelFontProps }: ToastActionLabelProps) {
   return (
-    <SizableText {...bodyFontProps} fontWeight="600" fontSize="$2" color={color as never}>
+    <SizableText {...labelFontProps} fontWeight="600" color={color as never}>
       {label}
     </SizableText>
   );
@@ -264,6 +392,12 @@ export interface ToastProps extends Omit<ViewProps, "children"> {
   onDismiss?: () => void;
   /** Show the close button (default: true when onDismiss is provided) */
   dismissible?: boolean;
+  /**
+   * Compact density override. `true` steps size+space down one level;
+   * `false` forces comfortable. Omit to follow the density knob (size and
+   * density stay independent axes).
+   */
+  compact?: boolean;
 }
 
 interface ToastInnerProps extends ToastProps {
@@ -277,17 +411,34 @@ function ToastInner({
   action,
   onDismiss,
   dismissible,
+  compact,
   ...props
 }: ToastInnerProps) {
   const { t } = useTranslation();
-  const { knobProps, iconColor, accentTextColor, frameProps } = useToastVisuals(intent);
+  const {
+    knobProps,
+    iconColor,
+    accentTextColor,
+    iconPx,
+    closePx,
+    nestedPx,
+    closeVisual,
+    closeRadius,
+    descFontSize,
+    frameProps,
+  } = useToastVisuals(intent, compact);
   const showClose = dismissible ?? onDismiss != null;
   return (
     <View
       role="status"
       aria-live="polite"
       transition={knobProps.transition}
+      data-testid="toast"
+      data-size={knobProps.size}
+      data-density={knobProps.density}
+      data-nested-px={nestedPx}
       {...frameProps}
+      alignItems={description ? "flex-start" : "center"}
       {...props}
     >
       <ToastBody
@@ -295,25 +446,44 @@ function ToastInner({
         description={description}
         intent={intent}
         iconColor={iconColor}
+        iconPx={iconPx}
+        descFontSize={descFontSize}
+        labelFontProps={knobProps.label}
         bodyFontProps={knobProps.body}
       />
       {action && (
-        <ToastActionButton
-          {...knobProps.borderRadiusOuter}
+        <ToastActionTarget
+          className="mp-chip-dismiss"
+          {...toastActionPressProps(nestedPx)}
           aria-label={action.altText ?? action.label}
           onPress={() => action.onPress()}
         >
-          <ToastActionLabel
-            label={action.label}
-            color={accentTextColor}
-            bodyFontProps={knobProps.body}
-          />
-        </ToastActionButton>
+          <ToastActionPill
+            className="mp-chip-dismiss-ring"
+            {...knobProps.borderRadiusOuter}
+            height={nestedPx}
+            minHeight={nestedPx}
+          >
+            <ToastActionLabel
+              label={action.label}
+              color={accentTextColor}
+              labelFontProps={knobProps.label}
+            />
+          </ToastActionPill>
+        </ToastActionTarget>
       )}
       {showClose && (
-        <ToastCloseButton aria-label={t("Dismiss notification")} onPress={() => onDismiss?.()}>
-          <XIcon size={14} color={iconColor} />
-        </ToastCloseButton>
+        <ToastCloseTarget
+          className="mp-chip-dismiss"
+          aria-label={t("Dismiss notification")}
+          alignSelf={description ? "flex-start" : "center"}
+          {...toastClosePressProps(action != null, closeVisual)}
+          onPress={() => onDismiss?.()}
+        >
+          <ToastCloseRing className="mp-chip-dismiss-ring" borderRadius={closeRadius}>
+            <XIcon size={closePx} color={iconColor} />
+          </ToastCloseRing>
+        </ToastCloseTarget>
       )}
     </View>
   );
@@ -337,57 +507,91 @@ export function Toast({ intent = "accent", ...props }: ToastProps) {
 interface ToastItemProps {
   entry: ToastEntry;
   isTop: boolean;
+  compact?: boolean;
 }
 
-function ToastItemInner({ entry, isTop }: ToastItemProps) {
+function ToastItemInner({ entry, isTop, compact }: ToastItemProps) {
   const { t } = useTranslation();
-  const { knobProps, iconColor, accentTextColor, frameProps } = useToastVisuals(entry.intent);
+  const {
+    knobProps,
+    iconColor,
+    accentTextColor,
+    iconPx,
+    closePx,
+    nestedPx,
+    closeVisual,
+    closeRadius,
+    descFontSize,
+    frameProps,
+  } = useToastVisuals(entry.intent, compact);
   const enterExit = { opacity: 0, y: isTop ? -16 : 16, scale: 0.97 };
-  const duration =
-    entry.duration === 0 || entry.duration === Number.POSITIVE_INFINITY
-      ? Number.POSITIVE_INFINITY
-      : entry.duration;
+  // Store-resolved policy: 0 = sticky/persistent (never auto-expires).
+  const duration = entry.duration === 0 ? Number.POSITIVE_INFINITY : entry.duration;
+  const assertive = entry.intent === "error" || entry.intent === "warning";
   return (
     <TamaguiToast
       open={entry.open}
       onOpenChange={(open) => {
         if (!open) dismissToast(entry.id);
       }}
-      {...(duration !== undefined ? { duration } : undefined)}
-      type="foreground"
+      duration={duration}
+      type={assertive ? "foreground" : "background"}
       transition={knobProps.transition}
       enterStyle={enterExit}
       exitStyle={enterExit}
+      data-testid="toast"
+      data-size={knobProps.size}
+      data-density={knobProps.density}
+      data-nested-px={nestedPx}
       {...frameProps}
+      alignItems={entry.description ? "flex-start" : "center"}
     >
       <ToastBody
         title={entry.title}
         description={entry.description}
         intent={entry.intent}
         iconColor={iconColor}
+        iconPx={iconPx}
+        descFontSize={descFontSize}
+        labelFontProps={knobProps.label}
         bodyFontProps={knobProps.body}
       />
       {entry.action && (
         <TamaguiToast.Action altText={entry.action.altText ?? entry.action.label} asChild>
-          <ToastActionButton
-            {...knobProps.borderRadiusOuter}
+          <ToastActionTarget
+            className="mp-chip-dismiss"
+            {...toastActionPressProps(nestedPx)}
             // Toast.Action defaults to aria-label "Close"; announce the action.
             aria-label={entry.action.altText ?? entry.action.label}
             onPress={() => entry.action?.onPress()}
           >
-            <ToastActionLabel
-              label={entry.action.label}
-              color={accentTextColor}
-              bodyFontProps={knobProps.body}
-            />
-          </ToastActionButton>
+            <ToastActionPill
+              className="mp-chip-dismiss-ring"
+              {...knobProps.borderRadiusOuter}
+              height={nestedPx}
+              minHeight={nestedPx}
+            >
+              <ToastActionLabel
+                label={entry.action.label}
+                color={accentTextColor}
+                labelFontProps={knobProps.label}
+              />
+            </ToastActionPill>
+          </ToastActionTarget>
         </TamaguiToast.Action>
       )}
       {entry.dismissible && (
         <TamaguiToast.Close asChild>
-          <ToastCloseButton aria-label={t("Dismiss notification")}>
-            <XIcon size={14} color={iconColor} />
-          </ToastCloseButton>
+          <ToastCloseTarget
+            className="mp-chip-dismiss"
+            aria-label={t("Dismiss notification")}
+            {...toastClosePressProps(entry.action != null, closeVisual)}
+            alignSelf={entry.description ? "flex-start" : "center"}
+          >
+            <ToastCloseRing className="mp-chip-dismiss-ring" borderRadius={closeRadius}>
+              <XIcon size={closePx} color={iconColor} />
+            </ToastCloseRing>
+          </ToastCloseTarget>
         </TamaguiToast.Close>
       )}
     </TamaguiToast>
@@ -421,6 +625,11 @@ export interface ToastViewportProps {
   label?: string;
   /** Hotkey that focuses the viewport (default F8) */
   hotkey?: string[];
+  /**
+   * Compact density override for every stacked toast. Omit to follow the
+   * density knob — size and density stay independent.
+   */
+  compact?: boolean;
 }
 
 const placementStyles: Record<
@@ -443,28 +652,48 @@ function placementSwipeDirection(placement: ToastPlacement): SwipeDirection {
 
 /**
  * Toast host: mounts the @tamagui/toast provider + viewport and renders the
- * store's stacked toasts. Mount once (app root / story). Pause-on-hover,
- * focus management and the F8 hotkey come from the underlying viewport.
+ * store's stacked toasts. Mount once (app shell / story); a second mounted
+ * viewport renders nothing (DEV warn) and takes over when the first
+ * unmounts, so screen-level hosts stay safe under a shell-level one.
+ * Pause-on-hover, focus management and the F8 hotkey come from the
+ * underlying viewport.
  */
 export function ToastViewport({
   placement = isWeb ? "bottom-right" : "top",
-  duration = 5000,
+  duration = TOAST_DEFAULT_MS,
   label: labelProp,
   hotkey,
+  compact,
 }: ToastViewportProps) {
   const { t } = useTranslation();
   const label = labelProp ?? t("Notification");
   const toasts = useSyncExternalStore(subscribeToasts, getToasts, getToasts);
   const { knobProps } = useResolvedKnobs();
   const isTop = placement.startsWith("top");
-  return (
+
+  // Single-viewport contract: the module-level store would render every
+  // toast once per mounted viewport, so the first mounted host wins and the
+  // rest no-op until it unmounts.
+  const viewportId = useId();
+  useEffect(() => {
+    claimToastViewport(viewportId);
+    return () => releaseToastViewport(viewportId);
+  }, [viewportId]);
+  const owner = useSyncExternalStore(
+    subscribeToastViewport,
+    getToastViewportOwner,
+    getToastViewportOwner,
+  );
+  if (owner !== viewportId) return null;
+
+  const content = (
     <TamaguiToastProvider
       duration={duration}
       label={label}
       swipeDirection={placementSwipeDirection(placement)}
     >
       {toasts.map((entry) => (
-        <ToastItem key={entry.id} entry={entry} isTop={isTop} />
+        <ToastItem key={entry.id} entry={entry} isTop={isTop} compact={compact} />
       ))}
       <TamaguiToastViewport
         multipleToasts
@@ -475,4 +704,19 @@ export function ToastViewport({
       />
     </TamaguiToastProvider>
   );
+
+  if (!isWeb) return content;
+
+  // Web layering: the @tamagui/toast wrapper hardcodes zIndex 1e5 — the same
+  // tier as sheet frames and ABOVE sheet overlays (1e5-1), so a toast card
+  // could swallow scrim taps. Containing it in a zero-size stacking context
+  // at the house toast tier (zIndex.loading = 1000) flattens the inner 1e5:
+  // modal surfaces portaled to the root host (sheet 1e5 / dropdown 2e5)
+  // paint and hit-test above every toast. position:fixed geometry inside is
+  // unaffected — only paint order is contained.
+  return (
+    <View position="absolute" zIndex={zIndex.loading} data-testid="toast-layer">
+      {content}
+    </View>
+  );
 }