@commercetools/nimbus 3.7.0 → 3.8.0

package/dist/chunks/modal-page-CPh9FQLo.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-page-CPh9FQLo.cjs.js","names":["createSlotRecipeContext","useCallback","Drawer","normalizeMessages","modalPageMessages_en","modalPageMessages_de","modalPageMessages_es","modalPageMessages_fr","modalPageMessages_pt","useLocalizedStringFormatter","IconButton","ArrowBack","Text","Heading","require_arrow_back","require_normalize_messages","require_icon_button","require_heading","require_text","require_drawer","react","react_jsx_runtime","ModalPageRootSlot","withProvider","ModalPageTopBarSlot","withContext","ModalPageHeaderSlot","ModalPageTitleSlot","ModalPageSubtitleSlot","ModalPageActionsSlot","ModalPageTabNavSlot","ModalPageContentSlot","ModalPageFooterSlot","ModalPageRoot","handleOpenChange","open","onClose","modalPageMessagesStrings","args","ModalPageTopBar","props","msg","previousPathLabel","currentPathLabel","ModalPageHeader","ModalPageTitle","ModalPageSubtitle","ModalPageActions","ModalPageTabNav","ModalPageContent","ModalPageFooter","ModalPage"],"sources":["../../src/components/modal-page/modal-page.slots.tsx","../../src/components/modal-page/components/modal-page.root.tsx","../../src/components/modal-page/intl/en.ts","../../src/components/modal-page/intl/de.ts","../../src/components/modal-page/intl/es.ts","../../src/components/modal-page/intl/fr-FR.ts","../../src/components/modal-page/intl/pt-BR.ts","../../src/components/modal-page/modal-page.messages.ts","../../src/components/modal-page/components/modal-page.top-bar.tsx","../../src/components/modal-page/components/modal-page.header.tsx","../../src/components/modal-page/components/modal-page.title.tsx","../../src/components/modal-page/components/modal-page.subtitle.tsx","../../src/components/modal-page/components/modal-page.actions.tsx","../../src/components/modal-page/components/modal-page.tab-nav.tsx","../../src/components/modal-page/components/modal-page.content.tsx","../../src/components/modal-page/components/modal-page.footer.tsx","../../src/components/modal-page/modal-page.tsx"],"sourcesContent":["import { createSlotRecipeContext } from \"@chakra-ui/react/styled-system\";\nimport type { SlotComponent } from \"../../type-utils/slot-types\";\nimport type {\n  ModalPageRootSlotProps,\n  ModalPageTopBarSlotProps,\n  ModalPageHeaderSlotProps,\n  ModalPageTitleSlotProps,\n  ModalPageSubtitleSlotProps,\n  ModalPageActionsSlotProps,\n  ModalPageTabNavSlotProps,\n  ModalPageContentSlotProps,\n  ModalPageFooterSlotProps,\n} from \"./modal-page.types\";\n\nconst { withProvider, withContext } = createSlotRecipeContext({\n  key: \"nimbusModalPage\",\n});\n\nexport const ModalPageRootSlot: SlotComponent<\n  HTMLDivElement,\n  ModalPageRootSlotProps\n> = withProvider<HTMLDivElement, ModalPageRootSlotProps>(\"div\", \"root\");\n\nexport const ModalPageTopBarSlot: SlotComponent<\n  HTMLDivElement,\n  ModalPageTopBarSlotProps\n> = withContext<HTMLDivElement, ModalPageTopBarSlotProps>(\"div\", \"topBar\");\n\n// <header> inside a <dialog> does NOT get the `banner` landmark role — it\n// becomes a generic element. This is correct: no landmark pollution inside the\n// dialog's sectioning context (ARIA spec §5.3.3).\nexport const ModalPageHeaderSlot: SlotComponent<\n  HTMLElement,\n  ModalPageHeaderSlotProps\n> = withContext<HTMLElement, ModalPageHeaderSlotProps>(\"header\", \"header\");\n\nexport const ModalPageTitleSlot: SlotComponent<\n  HTMLDivElement,\n  ModalPageTitleSlotProps\n> = withContext<HTMLDivElement, ModalPageTitleSlotProps>(\"div\", \"title\");\n\nexport const ModalPageSubtitleSlot: SlotComponent<\n  HTMLParagraphElement,\n  ModalPageSubtitleSlotProps\n> = withContext<HTMLParagraphElement, ModalPageSubtitleSlotProps>(\n  \"p\",\n  \"subtitle\"\n);\n\nexport const ModalPageActionsSlot: SlotComponent<\n  HTMLDivElement,\n  ModalPageActionsSlotProps\n> = withContext<HTMLDivElement, ModalPageActionsSlotProps>(\"div\", \"actions\");\n\nexport const ModalPageTabNavSlot: SlotComponent<\n  HTMLDivElement,\n  ModalPageTabNavSlotProps\n> = withContext<HTMLDivElement, ModalPageTabNavSlotProps>(\"div\", \"tabNav\");\n\nexport const ModalPageContentSlot: SlotComponent<\n  HTMLDivElement,\n  ModalPageContentSlotProps\n> = withContext<HTMLDivElement, ModalPageContentSlotProps>(\"div\", \"content\");\n\n// <footer> inside a <dialog> does NOT get the `contentinfo` landmark role —\n// it becomes a generic element. This is correct: no landmark pollution inside\n// the dialog's sectioning context (ARIA spec §5.3.3).\nexport const ModalPageFooterSlot: SlotComponent<\n  HTMLElement,\n  ModalPageFooterSlotProps\n> = withContext<HTMLElement, ModalPageFooterSlotProps>(\"footer\", \"footer\");\n","import { useCallback } from \"react\";\nimport { Drawer } from \"../../drawer/drawer\";\nimport { ModalPageRootSlot } from \"../modal-page.slots\";\nimport type { ModalPageRootProps } from \"../modal-page.types\";\n\n/**\n * ModalPage.Root — fullscreen modal page overlay.\n *\n * Renders a right-side Drawer with near-full-width, full-height layout.\n * Provides the slot recipe context for all ModalPage sub-components via a\n * CSS grid container (rows: topBar / header / content / footer).\n *\n * Style props (e.g. `width`) are forwarded to the Drawer.Content panel.\n * The default width is near-fullscreen; consumers can pass a custom `width`\n * to override.\n *\n * Dismissal: backdrop click is disabled (no accidental close on a full-page\n * form). Escape key remains active (isKeyboardDismissDisabled defaults to\n * false), matching standard browser/OS modal behaviour and WCAG 2.1 SC 2.1.2.\n *\n * Exit animations are handled automatically: the Drawer recipe defines\n * [data-exiting] CSS animations (fade-out on overlay, slide-to-right-full on\n * modal), and React Aria's ModalOverlay waits for animationend before\n * unmounting — no manual delay needed.\n */\n// Note: Root wraps a Drawer instead of rendering a slot directly, so the\n// standard useSlotRecipe / splitVariantProps / extractStyleProps pattern does\n// not apply here. Recipe context is provided by ModalPageRootSlot (withProvider).\nexport const ModalPageRoot = ({\n  ref,\n  isOpen,\n  onClose,\n  children,\n  width = \"calc(100vw - {spacing.1200})\",\n}: ModalPageRootProps) => {\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      if (!open) {\n        onClose();\n      }\n    },\n    [onClose]\n  );\n\n  return (\n    <Drawer.Root\n      isOpen={isOpen}\n      onOpenChange={handleOpenChange}\n      placement=\"right\"\n      // Disable backdrop-click dismissal — fullscreen modal pages must not\n      // close on accidental outside click. Escape key remains active.\n      isDismissable={false}\n    >\n      <Drawer.Content width={width}>\n        <ModalPageRootSlot ref={ref}>{children}</ModalPageRootSlot>\n      </Drawer.Content>\n    </Drawer.Root>\n  );\n};\n\nModalPageRoot.displayName = \"ModalPage.Root\";\n","/**\n * Pre-compiled en messages for ModalPage\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  backButton: (args: Record<string, string | number>) =>\n    `Go back to ${args.previousPathLabel}`,\n};\n","/**\n * Pre-compiled de messages for ModalPage\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  backButton: (args: Record<string, string | number>) =>\n    `Zurück zu ${args.previousPathLabel}`,\n};\n","/**\n * Pre-compiled es messages for ModalPage\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  backButton: (args: Record<string, string | number>) =>\n    `Volver a ${args.previousPathLabel}`,\n};\n","/**\n * Pre-compiled fr-FR messages for ModalPage\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  backButton: (args: Record<string, string | number>) =>\n    `Retourner à ${args.previousPathLabel}`,\n};\n","/**\n * Pre-compiled pt-BR messages for ModalPage\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  backButton: (args: Record<string, string | number>) =>\n    `Voltar para ${args.previousPathLabel}`,\n};\n","/**\n * Pre-compiled localized messages for ModalPage component\n *\n * Generated by scripts/generate-dictionaries.ts\n * DO NOT EDIT MANUALLY\n *\n * @see https://react-spectrum.adobe.com/react-aria/internationalization.html\n */\n\nimport {\n  type LocalizedString,\n  type LocalizedStrings,\n} from \"@internationalized/string\";\nimport { normalizeMessages } from \"../../utils/normalize-messages\";\n\n// Pre-compiled message functions\nimport modalPageMessages_en from \"./intl/en\";\nimport modalPageMessages_de from \"./intl/de\";\nimport modalPageMessages_es from \"./intl/es\";\nimport modalPageMessages_fr from \"./intl/fr-FR\";\nimport modalPageMessages_pt from \"./intl/pt-BR\";\n\n// Raw LocalizedStrings object for use with useLocalizedStringFormatter hook\nexport const modalPageMessagesStrings: LocalizedStrings<\n  string,\n  LocalizedString\n> = {\n  en: normalizeMessages(modalPageMessages_en),\n  de: normalizeMessages(modalPageMessages_de),\n  es: normalizeMessages(modalPageMessages_es),\n  \"fr-FR\": normalizeMessages(modalPageMessages_fr),\n  \"pt-BR\": normalizeMessages(modalPageMessages_pt),\n} as LocalizedStrings<string, LocalizedString>;\n\n/**\n * Available message keys for ModalPage component\n */\nexport type ModalPageMessageKey = \"backButton\";\n","import { ArrowBack } from \"@commercetools/nimbus-icons\";\nimport { Text } from \"../../text/text\";\nimport { ModalPageTopBarSlot } from \"../modal-page.slots\";\nimport type { ModalPageTopBarProps } from \"../modal-page.types\";\nimport { IconButton } from \"../../icon-button/icon-button\";\nimport { useLocalizedStringFormatter } from \"@/hooks\";\nimport { modalPageMessagesStrings } from \"../modal-page.messages\";\n\n/**\n * ModalPage.TopBar — breadcrumb navigation row.\n *\n * Renders a back button (uses React Aria `slot=\"close\"` to hook into dialog close)\n * followed by the current path label.\n *\n * @supportsStyleProps\n */\nexport const ModalPageTopBar = ({\n  ref,\n  previousPathLabel,\n  currentPathLabel,\n  ...props\n}: ModalPageTopBarProps) => {\n  const msg = useLocalizedStringFormatter(modalPageMessagesStrings);\n\n  return (\n    <ModalPageTopBarSlot ref={ref} {...props}>\n      <IconButton\n        slot=\"close\"\n        size=\"xs\"\n        variant=\"ghost\"\n        aria-label={msg.format(\"backButton\", { previousPathLabel })}\n        autoFocus\n      >\n        <ArrowBack />\n      </IconButton>\n      <Text color=\"neutral.11\" textStyle=\"sm\" aria-hidden=\"true\">\n        {previousPathLabel}\n      </Text>\n      {/* Separator is decorative — hidden from screen readers */}\n      <Text color=\"neutral.11\" textStyle=\"sm\" aria-hidden=\"true\">\n        /\n      </Text>\n      <Text textStyle=\"sm\" fontWeight=\"medium\" aria-current=\"page\">\n        {currentPathLabel}\n      </Text>\n    </ModalPageTopBarSlot>\n  );\n};\n\nModalPageTopBar.displayName = \"ModalPage.TopBar\";\n","import { ModalPageHeaderSlot } from \"../modal-page.slots\";\nimport type { ModalPageHeaderProps } from \"../modal-page.types\";\n\n/**\n * ModalPage.Header — header section, 2-column grid (title | actions).\n *\n * @supportsStyleProps\n */\nexport const ModalPageHeader = ({\n  ref,\n  children,\n  ...props\n}: ModalPageHeaderProps) => {\n  return (\n    <ModalPageHeaderSlot ref={ref} {...props}>\n      {children}\n    </ModalPageHeaderSlot>\n  );\n};\n\nModalPageHeader.displayName = \"ModalPage.Header\";\n","import { ModalPageTitleSlot } from \"../modal-page.slots\";\nimport type { ModalPageTitleProps } from \"../modal-page.types\";\nimport { Heading } from \"../../heading/heading\";\n\n/**\n * ModalPage.Title — the page title heading. Renders as an `h2` element.\n *\n * Wraps the React Aria `Heading` component with `slot=\"title\"` so the\n * parent Dialog automatically uses it as the accessible name (aria-labelledby).\n *\n * @supportsStyleProps\n */\nexport const ModalPageTitle = ({\n  ref,\n  children,\n  ...props\n}: ModalPageTitleProps) => {\n  return (\n    <ModalPageTitleSlot ref={ref} {...props}>\n      <Heading slot=\"title\" as=\"h2\">\n        {children}\n      </Heading>\n    </ModalPageTitleSlot>\n  );\n};\n\nModalPageTitle.displayName = \"ModalPage.Title\";\n","import { ModalPageSubtitleSlot } from \"../modal-page.slots\";\nimport type { ModalPageSubtitleProps } from \"../modal-page.types\";\n\n/**\n * ModalPage.Subtitle — optional subtitle text below the page title.\n *\n * @supportsStyleProps\n */\nexport const ModalPageSubtitle = ({\n  ref,\n  children,\n  ...props\n}: ModalPageSubtitleProps) => {\n  return (\n    <ModalPageSubtitleSlot ref={ref} slot=\"description\" {...props}>\n      {children}\n    </ModalPageSubtitleSlot>\n  );\n};\n\nModalPageSubtitle.displayName = \"ModalPage.Subtitle\";\n","import { ModalPageActionsSlot } from \"../modal-page.slots\";\nimport type { ModalPageActionsProps } from \"../modal-page.types\";\n\n/**\n * ModalPage.Actions — action buttons container, aligned to the right of the header.\n *\n * @supportsStyleProps\n */\nexport const ModalPageActions = ({\n  ref,\n  children,\n  ...props\n}: ModalPageActionsProps) => {\n  return (\n    <ModalPageActionsSlot ref={ref} {...props}>\n      {children}\n    </ModalPageActionsSlot>\n  );\n};\n\nModalPageActions.displayName = \"ModalPage.Actions\";\n","import { ModalPageTabNavSlot } from \"../modal-page.slots\";\nimport type { ModalPageTabNavProps } from \"../modal-page.types\";\n\n/**\n * ModalPage.TabNav — layout container for tab navigation in the header.\n * Positions itself in the header grid's last row at full width.\n *\n * Place inside `ModalPage.Header` for route-based page navigation.\n * Wrap a `TabNav.Root` inside this component.\n *\n * @supportsStyleProps\n *\n * @example\n * ```tsx\n * <ModalPage.TabNav>\n *   <TabNav.Root aria-label=\"Order sections\">\n *     <TabNav.Item href=\"/general\" isCurrent>General</TabNav.Item>\n *     <TabNav.Item href=\"/items\">Items</TabNav.Item>\n *   </TabNav.Root>\n * </ModalPage.TabNav>\n * ```\n */\nexport const ModalPageTabNav = ({\n  ref,\n  children,\n  ...props\n}: ModalPageTabNavProps) => {\n  return (\n    <ModalPageTabNavSlot ref={ref} {...props}>\n      {children}\n    </ModalPageTabNavSlot>\n  );\n};\n\nModalPageTabNav.displayName = \"ModalPage.TabNav\";\n","import { ModalPageContentSlot } from \"../modal-page.slots\";\nimport type { ModalPageContentProps } from \"../modal-page.types\";\n\n/**\n * ModalPage.Content — scrollable content area.\n *\n * @supportsStyleProps\n */\nexport const ModalPageContent = ({\n  ref,\n  children,\n  ...props\n}: ModalPageContentProps) => {\n  return (\n    <ModalPageContentSlot ref={ref} {...props}>\n      {children}\n    </ModalPageContentSlot>\n  );\n};\n\nModalPageContent.displayName = \"ModalPage.Content\";\n","import { ModalPageFooterSlot } from \"../modal-page.slots\";\nimport type { ModalPageFooterProps } from \"../modal-page.types\";\n\n/**\n * ModalPage.Footer — footer slot, typically containing action buttons.\n *\n * @supportsStyleProps\n */\nexport const ModalPageFooter = ({\n  ref,\n  children,\n  ...props\n}: ModalPageFooterProps) => {\n  return (\n    <ModalPageFooterSlot ref={ref} {...props}>\n      {children}\n    </ModalPageFooterSlot>\n  );\n};\n\nModalPageFooter.displayName = \"ModalPage.Footer\";\n","import {\n  ModalPageRoot,\n  ModalPageTopBar,\n  ModalPageHeader,\n  ModalPageTitle,\n  ModalPageSubtitle,\n  ModalPageActions,\n  ModalPageTabNav,\n  ModalPageContent,\n  ModalPageFooter,\n} from \"./components\";\n\n/**\n * ModalPage\n * ============================================================\n * A fullscreen modal overlay used for form, info, and tabular page patterns.\n * Wraps Drawer internally with right-side placement and near-full-width layout.\n *\n * Used for the ~29 modal page patterns in Merchant Center (form/info/tabular).\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/layout/modal-page}\n *\n * @example\n * ```tsx\n * const [isOpen, setIsOpen] = useState(false);\n *\n * <ModalPage.Root isOpen={isOpen} onClose={() => setIsOpen(false)}>\n *   <ModalPage.TopBar\n *     previousPathLabel=\"Products\"\n *     currentPathLabel=\"Edit Product\"\n *   />\n *   <ModalPage.Header>\n *     <ModalPage.Title>Edit Product</ModalPage.Title>\n *     <ModalPage.Subtitle>Update the product details</ModalPage.Subtitle>\n *     <ModalPage.Actions>\n *       <Button>Save</Button>\n *     </ModalPage.Actions>\n *   </ModalPage.Header>\n *   <ModalPage.Content>\n *     <p>Form content here</p>\n *   </ModalPage.Content>\n *   <ModalPage.Footer>\n *     <Button slot=\"close\" variant=\"outline\">Cancel</Button>\n *     <Button colorPalette=\"primary\" variant=\"solid\">Save</Button>\n *   </ModalPage.Footer>\n * </ModalPage.Root>\n * ```\n */\nexport const ModalPage = {\n  /**\n   * # ModalPage.Root\n   *\n   * The root container. Renders a fullscreen right-side Drawer.\n   * Controlled-only: requires `isOpen` and `onClose`.\n   *\n   * @example\n   * ```tsx\n   * <ModalPage.Root isOpen={isOpen} onClose={() => setIsOpen(false)}>\n   *   <ModalPage.TopBar previousPathLabel=\"Products\" currentPathLabel=\"Edit Product\" />\n   *   <ModalPage.Header>...</ModalPage.Header>\n   *   <ModalPage.Content>...</ModalPage.Content>\n   * </ModalPage.Root>\n   * ```\n   */\n  Root: ModalPageRoot,\n  /**\n   * # ModalPage.TopBar\n   *\n   * Breadcrumb navigation row with a back button and current path label.\n   *\n   * @example\n   * ```tsx\n   * <ModalPage.TopBar\n   *   previousPathLabel=\"Products\"\n   *   currentPathLabel=\"Edit Product\"\n   * />\n   * ```\n   */\n  TopBar: ModalPageTopBar,\n  /**\n   * # ModalPage.Header\n   *\n   * Header section with a 2-column grid layout for Title and Actions.\n   *\n   * @example\n   * ```tsx\n   * <ModalPage.Header>\n   *   <ModalPage.Title>Edit Product</ModalPage.Title>\n   *   <ModalPage.Actions>\n   *     <Button>Save</Button>\n   *   </ModalPage.Actions>\n   * </ModalPage.Header>\n   * ```\n   */\n  Header: ModalPageHeader,\n  /**\n   * # ModalPage.Title\n   *\n   * The main page title heading. Renders as an `h2` element.\n   *\n   * @example\n   * ```tsx\n   * <ModalPage.Title>Edit Product</ModalPage.Title>\n   * ```\n   */\n  Title: ModalPageTitle,\n  /**\n   * # ModalPage.Subtitle\n   *\n   * An optional subtitle displayed below the title.\n   *\n   * @example\n   * ```tsx\n   * <ModalPage.Subtitle>Fill in the product details</ModalPage.Subtitle>\n   * ```\n   */\n  Subtitle: ModalPageSubtitle,\n  /**\n   * # ModalPage.Actions\n   *\n   * Container for action buttons in the header.\n   *\n   * @example\n   * ```tsx\n   * <ModalPage.Actions>\n   *   <Button variant=\"outline\">Preview</Button>\n   * </ModalPage.Actions>\n   * ```\n   */\n  Actions: ModalPageActions,\n  /**\n   * # ModalPage.TabNav\n   *\n   * Layout container for tab navigation in the header.\n   * Positions itself in the header grid's last row at full width.\n   * Place inside `ModalPage.Header`.\n   *\n   * Wrap a `TabNav.Root` inside, or use `as={TabNav.Root}` for a flatter DOM.\n   *\n   * @example\n   * ```tsx\n   * <ModalPage.Header>\n   *   <ModalPage.Title>Order Details</ModalPage.Title>\n   *   <ModalPage.TabNav>\n   *     <TabNav.Root aria-label=\"Order sections\">\n   *       <TabNav.Item href=\"/general\" isCurrent>General</TabNav.Item>\n   *       <TabNav.Item href=\"/items\">Items</TabNav.Item>\n   *     </TabNav.Root>\n   *   </ModalPage.TabNav>\n   * </ModalPage.Header>\n   * ```\n   */\n  TabNav: ModalPageTabNav,\n  /**\n   * # ModalPage.Content\n   *\n   * Scrollable content area.\n   *\n   * @example\n   * ```tsx\n   * <ModalPage.Content>\n   *   <FormField.Root>...</FormField.Root>\n   * </ModalPage.Content>\n   * ```\n   */\n  Content: ModalPageContent,\n  /**\n   * # ModalPage.Footer\n   *\n   * Footer slot for action buttons (save/cancel).\n   *\n   * @example\n   * ```tsx\n   * <ModalPage.Footer>\n   *   <Button slot=\"close\" variant=\"outline\">Cancel</Button>\n   *   <Button variant=\"solid\">Save</Button>\n   * </ModalPage.Footer>\n   * ```\n   */\n  Footer: ModalPageFooter,\n};\n"],"mappings":"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"}

package/dist/chunks/modal-page-CwEBTzlH.es.js

@@ -0,0 +1,151 @@
+import { t as e } from "./arrow-back-C4TEsDPp.es.js";
+import { n as t, t as n } from "./normalize-messages-migTwRpM.es.js";
+import { t as r } from "./icon-button-fydMHcRi.es.js";
+import { t as i } from "./heading-BfuOrd8C.es.js";
+import { t as a } from "./text-DYMFROSP.es.js";
+import { t as o } from "./drawer-DslXtdgZ.es.js";
+import { useCallback as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { createSlotRecipeContext as u } from "@chakra-ui/react/styled-system";
+//#region src/components/modal-page/modal-page.slots.tsx
+var { withProvider: d, withContext: f } = u({ key: "nimbusModalPage" }), p = d("div", "root"), m = f("div", "topBar"), h = f("header", "header"), g = f("div", "title"), _ = f("p", "subtitle"), v = f("div", "actions"), y = f("div", "tabNav"), b = f("div", "content"), x = f("footer", "footer"), S = ({ ref: e, isOpen: t, onClose: n, children: r, width: i = "calc(100vw - {spacing.1200})" }) => {
+	let a = s((e) => {
+		e || n();
+	}, [n]);
+	return /* @__PURE__ */ c(o.Root, {
+		isOpen: t,
+		onOpenChange: a,
+		placement: "right",
+		isDismissable: !1,
+		children: /* @__PURE__ */ c(o.Content, {
+			width: i,
+			children: /* @__PURE__ */ c(p, {
+				ref: e,
+				children: r
+			})
+		})
+	});
+};
+S.displayName = "ModalPage.Root";
+//#endregion
+//#region src/components/modal-page/modal-page.messages.ts
+var C = {
+	en: n({ backButton: (e) => `Go back to ${e.previousPathLabel}` }),
+	de: n({ backButton: (e) => `Zurück zu ${e.previousPathLabel}` }),
+	es: n({ backButton: (e) => `Volver a ${e.previousPathLabel}` }),
+	"fr-FR": n({ backButton: (e) => `Retourner à ${e.previousPathLabel}` }),
+	"pt-BR": n({ backButton: (e) => `Voltar para ${e.previousPathLabel}` })
+}, w = ({ ref: n, previousPathLabel: i, currentPathLabel: o, ...s }) => {
+	let u = t(C);
+	return /* @__PURE__ */ l(m, {
+		ref: n,
+		...s,
+		children: [
+			/* @__PURE__ */ c(r, {
+				slot: "close",
+				size: "xs",
+				variant: "ghost",
+				"aria-label": u.format("backButton", { previousPathLabel: i }),
+				autoFocus: !0,
+				children: /* @__PURE__ */ c(e, {})
+			}),
+			/* @__PURE__ */ c(a, {
+				color: "neutral.11",
+				textStyle: "sm",
+				"aria-hidden": "true",
+				children: i
+			}),
+			/* @__PURE__ */ c(a, {
+				color: "neutral.11",
+				textStyle: "sm",
+				"aria-hidden": "true",
+				children: "/"
+			}),
+			/* @__PURE__ */ c(a, {
+				textStyle: "sm",
+				fontWeight: "medium",
+				"aria-current": "page",
+				children: o
+			})
+		]
+	});
+};
+w.displayName = "ModalPage.TopBar";
+//#endregion
+//#region src/components/modal-page/components/modal-page.header.tsx
+var T = ({ ref: e, children: t, ...n }) => /* @__PURE__ */ c(h, {
+	ref: e,
+	...n,
+	children: t
+});
+T.displayName = "ModalPage.Header";
+//#endregion
+//#region src/components/modal-page/components/modal-page.title.tsx
+var E = ({ ref: e, children: t, ...n }) => /* @__PURE__ */ c(g, {
+	ref: e,
+	...n,
+	children: /* @__PURE__ */ c(i, {
+		slot: "title",
+		as: "h2",
+		children: t
+	})
+});
+E.displayName = "ModalPage.Title";
+//#endregion
+//#region src/components/modal-page/components/modal-page.subtitle.tsx
+var D = ({ ref: e, children: t, ...n }) => /* @__PURE__ */ c(_, {
+	ref: e,
+	slot: "description",
+	...n,
+	children: t
+});
+D.displayName = "ModalPage.Subtitle";
+//#endregion
+//#region src/components/modal-page/components/modal-page.actions.tsx
+var O = ({ ref: e, children: t, ...n }) => /* @__PURE__ */ c(v, {
+	ref: e,
+	...n,
+	children: t
+});
+O.displayName = "ModalPage.Actions";
+//#endregion
+//#region src/components/modal-page/components/modal-page.tab-nav.tsx
+var k = ({ ref: e, children: t, ...n }) => /* @__PURE__ */ c(y, {
+	ref: e,
+	...n,
+	children: t
+});
+k.displayName = "ModalPage.TabNav";
+//#endregion
+//#region src/components/modal-page/components/modal-page.content.tsx
+var A = ({ ref: e, children: t, ...n }) => /* @__PURE__ */ c(b, {
+	ref: e,
+	...n,
+	children: t
+});
+A.displayName = "ModalPage.Content";
+//#endregion
+//#region src/components/modal-page/components/modal-page.footer.tsx
+var j = ({ ref: e, children: t, ...n }) => /* @__PURE__ */ c(x, {
+	ref: e,
+	...n,
+	children: t
+});
+j.displayName = "ModalPage.Footer";
+//#endregion
+//#region src/components/modal-page/modal-page.tsx
+var M = {
+	Root: S,
+	TopBar: w,
+	Header: T,
+	Title: E,
+	Subtitle: D,
+	Actions: O,
+	TabNav: k,
+	Content: A,
+	Footer: j
+};
+//#endregion
+export { M as t };
+
+//# sourceMappingURL=modal-page-CwEBTzlH.es.js.map

package/dist/chunks/modal-page-CwEBTzlH.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-page-CwEBTzlH.es.js","names":["modalPageMessages_en","modalPageMessages_de","modalPageMessages_es","modalPageMessages_fr","modalPageMessages_pt","ArrowBack","ForwardRef","useLocalizedStringFormatter","normalizeMessages","IconButton","Heading","Text","Drawer","createSlotRecipeContext","ModalPageRootSlot","withProvider","ModalPageTopBarSlot","withContext","ModalPageHeaderSlot","ModalPageTitleSlot","ModalPageSubtitleSlot","ModalPageActionsSlot","ModalPageTabNavSlot","ModalPageContentSlot","ModalPageFooterSlot","ModalPageRoot","handleOpenChange","useCallback","open","onClose","modalPageMessagesStrings","args","ModalPageTopBar","props","msg","previousPathLabel","currentPathLabel","ModalPageHeader","ModalPageTitle","ModalPageSubtitle","ModalPageActions","ModalPageTabNav","ModalPageContent","ModalPageFooter","ModalPage"],"sources":["../../src/components/modal-page/modal-page.slots.tsx","../../src/components/modal-page/components/modal-page.root.tsx","../../src/components/modal-page/intl/en.ts","../../src/components/modal-page/intl/de.ts","../../src/components/modal-page/intl/es.ts","../../src/components/modal-page/intl/fr-FR.ts","../../src/components/modal-page/intl/pt-BR.ts","../../src/components/modal-page/modal-page.messages.ts","../../src/components/modal-page/components/modal-page.top-bar.tsx","../../src/components/modal-page/components/modal-page.header.tsx","../../src/components/modal-page/components/modal-page.title.tsx","../../src/components/modal-page/components/modal-page.subtitle.tsx","../../src/components/modal-page/components/modal-page.actions.tsx","../../src/components/modal-page/components/modal-page.tab-nav.tsx","../../src/components/modal-page/components/modal-page.content.tsx","../../src/components/modal-page/components/modal-page.footer.tsx","../../src/components/modal-page/modal-page.tsx"],"sourcesContent":["import { createSlotRecipeContext } from \"@chakra-ui/react/styled-system\";\nimport type { SlotComponent } from \"../../type-utils/slot-types\";\nimport type {\n  ModalPageRootSlotProps,\n  ModalPageTopBarSlotProps,\n  ModalPageHeaderSlotProps,\n  ModalPageTitleSlotProps,\n  ModalPageSubtitleSlotProps,\n  ModalPageActionsSlotProps,\n  ModalPageTabNavSlotProps,\n  ModalPageContentSlotProps,\n  ModalPageFooterSlotProps,\n} from \"./modal-page.types\";\n\nconst { withProvider, withContext } = createSlotRecipeContext({\n  key: \"nimbusModalPage\",\n});\n\nexport const ModalPageRootSlot: SlotComponent<\n  HTMLDivElement,\n  ModalPageRootSlotProps\n> = withProvider<HTMLDivElement, ModalPageRootSlotProps>(\"div\", \"root\");\n\nexport const ModalPageTopBarSlot: SlotComponent<\n  HTMLDivElement,\n  ModalPageTopBarSlotProps\n> = withContext<HTMLDivElement, ModalPageTopBarSlotProps>(\"div\", \"topBar\");\n\n// <header> inside a <dialog> does NOT get the `banner` landmark role — it\n// becomes a generic element. This is correct: no landmark pollution inside the\n// dialog's sectioning context (ARIA spec §5.3.3).\nexport const ModalPageHeaderSlot: SlotComponent<\n  HTMLElement,\n  ModalPageHeaderSlotProps\n> = withContext<HTMLElement, ModalPageHeaderSlotProps>(\"header\", \"header\");\n\nexport const ModalPageTitleSlot: SlotComponent<\n  HTMLDivElement,\n  ModalPageTitleSlotProps\n> = withContext<HTMLDivElement, ModalPageTitleSlotProps>(\"div\", \"title\");\n\nexport const ModalPageSubtitleSlot: SlotComponent<\n  HTMLParagraphElement,\n  ModalPageSubtitleSlotProps\n> = withContext<HTMLParagraphElement, ModalPageSubtitleSlotProps>(\n  \"p\",\n  \"subtitle\"\n);\n\nexport const ModalPageActionsSlot: SlotComponent<\n  HTMLDivElement,\n  ModalPageActionsSlotProps\n> = withContext<HTMLDivElement, ModalPageActionsSlotProps>(\"div\", \"actions\");\n\nexport const ModalPageTabNavSlot: SlotComponent<\n  HTMLDivElement,\n  ModalPageTabNavSlotProps\n> = withContext<HTMLDivElement, ModalPageTabNavSlotProps>(\"div\", \"tabNav\");\n\nexport const ModalPageContentSlot: SlotComponent<\n  HTMLDivElement,\n  ModalPageContentSlotProps\n> = withContext<HTMLDivElement, ModalPageContentSlotProps>(\"div\", \"content\");\n\n// <footer> inside a <dialog> does NOT get the `contentinfo` landmark role —\n// it becomes a generic element. This is correct: no landmark pollution inside\n// the dialog's sectioning context (ARIA spec §5.3.3).\nexport const ModalPageFooterSlot: SlotComponent<\n  HTMLElement,\n  ModalPageFooterSlotProps\n> = withContext<HTMLElement, ModalPageFooterSlotProps>(\"footer\", \"footer\");\n","import { useCallback } from \"react\";\nimport { Drawer } from \"../../drawer/drawer\";\nimport { ModalPageRootSlot } from \"../modal-page.slots\";\nimport type { ModalPageRootProps } from \"../modal-page.types\";\n\n/**\n * ModalPage.Root — fullscreen modal page overlay.\n *\n * Renders a right-side Drawer with near-full-width, full-height layout.\n * Provides the slot recipe context for all ModalPage sub-components via a\n * CSS grid container (rows: topBar / header / content / footer).\n *\n * Style props (e.g. `width`) are forwarded to the Drawer.Content panel.\n * The default width is near-fullscreen; consumers can pass a custom `width`\n * to override.\n *\n * Dismissal: backdrop click is disabled (no accidental close on a full-page\n * form). Escape key remains active (isKeyboardDismissDisabled defaults to\n * false), matching standard browser/OS modal behaviour and WCAG 2.1 SC 2.1.2.\n *\n * Exit animations are handled automatically: the Drawer recipe defines\n * [data-exiting] CSS animations (fade-out on overlay, slide-to-right-full on\n * modal), and React Aria's ModalOverlay waits for animationend before\n * unmounting — no manual delay needed.\n */\n// Note: Root wraps a Drawer instead of rendering a slot directly, so the\n// standard useSlotRecipe / splitVariantProps / extractStyleProps pattern does\n// not apply here. Recipe context is provided by ModalPageRootSlot (withProvider).\nexport const ModalPageRoot = ({\n  ref,\n  isOpen,\n  onClose,\n  children,\n  width = \"calc(100vw - {spacing.1200})\",\n}: ModalPageRootProps) => {\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      if (!open) {\n        onClose();\n      }\n    },\n    [onClose]\n  );\n\n  return (\n    <Drawer.Root\n      isOpen={isOpen}\n      onOpenChange={handleOpenChange}\n      placement=\"right\"\n      // Disable backdrop-click dismissal — fullscreen modal pages must not\n      // close on accidental outside click. Escape key remains active.\n      isDismissable={false}\n    >\n      <Drawer.Content width={width}>\n        <ModalPageRootSlot ref={ref}>{children}</ModalPageRootSlot>\n      </Drawer.Content>\n    </Drawer.Root>\n  );\n};\n\nModalPageRoot.displayName = \"ModalPage.Root\";\n","/**\n * Pre-compiled en messages for ModalPage\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  backButton: (args: Record<string, string | number>) =>\n    `Go back to ${args.previousPathLabel}`,\n};\n","/**\n * Pre-compiled de messages for ModalPage\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  backButton: (args: Record<string, string | number>) =>\n    `Zurück zu ${args.previousPathLabel}`,\n};\n","/**\n * Pre-compiled es messages for ModalPage\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  backButton: (args: Record<string, string | number>) =>\n    `Volver a ${args.previousPathLabel}`,\n};\n","/**\n * Pre-compiled fr-FR messages for ModalPage\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  backButton: (args: Record<string, string | number>) =>\n    `Retourner à ${args.previousPathLabel}`,\n};\n","/**\n * Pre-compiled pt-BR messages for ModalPage\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  backButton: (args: Record<string, string | number>) =>\n    `Voltar para ${args.previousPathLabel}`,\n};\n","/**\n * Pre-compiled localized messages for ModalPage component\n *\n * Generated by scripts/generate-dictionaries.ts\n * DO NOT EDIT MANUALLY\n *\n * @see https://react-spectrum.adobe.com/react-aria/internationalization.html\n */\n\nimport {\n  type LocalizedString,\n  type LocalizedStrings,\n} from \"@internationalized/string\";\nimport { normalizeMessages } from \"../../utils/normalize-messages\";\n\n// Pre-compiled message functions\nimport modalPageMessages_en from \"./intl/en\";\nimport modalPageMessages_de from \"./intl/de\";\nimport modalPageMessages_es from \"./intl/es\";\nimport modalPageMessages_fr from \"./intl/fr-FR\";\nimport modalPageMessages_pt from \"./intl/pt-BR\";\n\n// Raw LocalizedStrings object for use with useLocalizedStringFormatter hook\nexport const modalPageMessagesStrings: LocalizedStrings<\n  string,\n  LocalizedString\n> = {\n  en: normalizeMessages(modalPageMessages_en),\n  de: normalizeMessages(modalPageMessages_de),\n  es: normalizeMessages(modalPageMessages_es),\n  \"fr-FR\": normalizeMessages(modalPageMessages_fr),\n  \"pt-BR\": normalizeMessages(modalPageMessages_pt),\n} as LocalizedStrings<string, LocalizedString>;\n\n/**\n * Available message keys for ModalPage component\n */\nexport type ModalPageMessageKey = \"backButton\";\n","import { ArrowBack } from \"@commercetools/nimbus-icons\";\nimport { Text } from \"../../text/text\";\nimport { ModalPageTopBarSlot } from \"../modal-page.slots\";\nimport type { ModalPageTopBarProps } from \"../modal-page.types\";\nimport { IconButton } from \"../../icon-button/icon-button\";\nimport { useLocalizedStringFormatter } from \"@/hooks\";\nimport { modalPageMessagesStrings } from \"../modal-page.messages\";\n\n/**\n * ModalPage.TopBar — breadcrumb navigation row.\n *\n * Renders a back button (uses React Aria `slot=\"close\"` to hook into dialog close)\n * followed by the current path label.\n *\n * @supportsStyleProps\n */\nexport const ModalPageTopBar = ({\n  ref,\n  previousPathLabel,\n  currentPathLabel,\n  ...props\n}: ModalPageTopBarProps) => {\n  const msg = useLocalizedStringFormatter(modalPageMessagesStrings);\n\n  return (\n    <ModalPageTopBarSlot ref={ref} {...props}>\n      <IconButton\n        slot=\"close\"\n        size=\"xs\"\n        variant=\"ghost\"\n        aria-label={msg.format(\"backButton\", { previousPathLabel })}\n        autoFocus\n      >\n        <ArrowBack />\n      </IconButton>\n      <Text color=\"neutral.11\" textStyle=\"sm\" aria-hidden=\"true\">\n        {previousPathLabel}\n      </Text>\n      {/* Separator is decorative — hidden from screen readers */}\n      <Text color=\"neutral.11\" textStyle=\"sm\" aria-hidden=\"true\">\n        /\n      </Text>\n      <Text textStyle=\"sm\" fontWeight=\"medium\" aria-current=\"page\">\n        {currentPathLabel}\n      </Text>\n    </ModalPageTopBarSlot>\n  );\n};\n\nModalPageTopBar.displayName = \"ModalPage.TopBar\";\n","import { ModalPageHeaderSlot } from \"../modal-page.slots\";\nimport type { ModalPageHeaderProps } from \"../modal-page.types\";\n\n/**\n * ModalPage.Header — header section, 2-column grid (title | actions).\n *\n * @supportsStyleProps\n */\nexport const ModalPageHeader = ({\n  ref,\n  children,\n  ...props\n}: ModalPageHeaderProps) => {\n  return (\n    <ModalPageHeaderSlot ref={ref} {...props}>\n      {children}\n    </ModalPageHeaderSlot>\n  );\n};\n\nModalPageHeader.displayName = \"ModalPage.Header\";\n","import { ModalPageTitleSlot } from \"../modal-page.slots\";\nimport type { ModalPageTitleProps } from \"../modal-page.types\";\nimport { Heading } from \"../../heading/heading\";\n\n/**\n * ModalPage.Title — the page title heading. Renders as an `h2` element.\n *\n * Wraps the React Aria `Heading` component with `slot=\"title\"` so the\n * parent Dialog automatically uses it as the accessible name (aria-labelledby).\n *\n * @supportsStyleProps\n */\nexport const ModalPageTitle = ({\n  ref,\n  children,\n  ...props\n}: ModalPageTitleProps) => {\n  return (\n    <ModalPageTitleSlot ref={ref} {...props}>\n      <Heading slot=\"title\" as=\"h2\">\n        {children}\n      </Heading>\n    </ModalPageTitleSlot>\n  );\n};\n\nModalPageTitle.displayName = \"ModalPage.Title\";\n","import { ModalPageSubtitleSlot } from \"../modal-page.slots\";\nimport type { ModalPageSubtitleProps } from \"../modal-page.types\";\n\n/**\n * ModalPage.Subtitle — optional subtitle text below the page title.\n *\n * @supportsStyleProps\n */\nexport const ModalPageSubtitle = ({\n  ref,\n  children,\n  ...props\n}: ModalPageSubtitleProps) => {\n  return (\n    <ModalPageSubtitleSlot ref={ref} slot=\"description\" {...props}>\n      {children}\n    </ModalPageSubtitleSlot>\n  );\n};\n\nModalPageSubtitle.displayName = \"ModalPage.Subtitle\";\n","import { ModalPageActionsSlot } from \"../modal-page.slots\";\nimport type { ModalPageActionsProps } from \"../modal-page.types\";\n\n/**\n * ModalPage.Actions — action buttons container, aligned to the right of the header.\n *\n * @supportsStyleProps\n */\nexport const ModalPageActions = ({\n  ref,\n  children,\n  ...props\n}: ModalPageActionsProps) => {\n  return (\n    <ModalPageActionsSlot ref={ref} {...props}>\n      {children}\n    </ModalPageActionsSlot>\n  );\n};\n\nModalPageActions.displayName = \"ModalPage.Actions\";\n","import { ModalPageTabNavSlot } from \"../modal-page.slots\";\nimport type { ModalPageTabNavProps } from \"../modal-page.types\";\n\n/**\n * ModalPage.TabNav — layout container for tab navigation in the header.\n * Positions itself in the header grid's last row at full width.\n *\n * Place inside `ModalPage.Header` for route-based page navigation.\n * Wrap a `TabNav.Root` inside this component.\n *\n * @supportsStyleProps\n *\n * @example\n * ```tsx\n * <ModalPage.TabNav>\n *   <TabNav.Root aria-label=\"Order sections\">\n *     <TabNav.Item href=\"/general\" isCurrent>General</TabNav.Item>\n *     <TabNav.Item href=\"/items\">Items</TabNav.Item>\n *   </TabNav.Root>\n * </ModalPage.TabNav>\n * ```\n */\nexport const ModalPageTabNav = ({\n  ref,\n  children,\n  ...props\n}: ModalPageTabNavProps) => {\n  return (\n    <ModalPageTabNavSlot ref={ref} {...props}>\n      {children}\n    </ModalPageTabNavSlot>\n  );\n};\n\nModalPageTabNav.displayName = \"ModalPage.TabNav\";\n","import { ModalPageContentSlot } from \"../modal-page.slots\";\nimport type { ModalPageContentProps } from \"../modal-page.types\";\n\n/**\n * ModalPage.Content — scrollable content area.\n *\n * @supportsStyleProps\n */\nexport const ModalPageContent = ({\n  ref,\n  children,\n  ...props\n}: ModalPageContentProps) => {\n  return (\n    <ModalPageContentSlot ref={ref} {...props}>\n      {children}\n    </ModalPageContentSlot>\n  );\n};\n\nModalPageContent.displayName = \"ModalPage.Content\";\n","import { ModalPageFooterSlot } from \"../modal-page.slots\";\nimport type { ModalPageFooterProps } from \"../modal-page.types\";\n\n/**\n * ModalPage.Footer — footer slot, typically containing action buttons.\n *\n * @supportsStyleProps\n */\nexport const ModalPageFooter = ({\n  ref,\n  children,\n  ...props\n}: ModalPageFooterProps) => {\n  return (\n    <ModalPageFooterSlot ref={ref} {...props}>\n      {children}\n    </ModalPageFooterSlot>\n  );\n};\n\nModalPageFooter.displayName = \"ModalPage.Footer\";\n","import {\n  ModalPageRoot,\n  ModalPageTopBar,\n  ModalPageHeader,\n  ModalPageTitle,\n  ModalPageSubtitle,\n  ModalPageActions,\n  ModalPageTabNav,\n  ModalPageContent,\n  ModalPageFooter,\n} from \"./components\";\n\n/**\n * ModalPage\n * ============================================================\n * A fullscreen modal overlay used for form, info, and tabular page patterns.\n * Wraps Drawer internally with right-side placement and near-full-width layout.\n *\n * Used for the ~29 modal page patterns in Merchant Center (form/info/tabular).\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/layout/modal-page}\n *\n * @example\n * ```tsx\n * const [isOpen, setIsOpen] = useState(false);\n *\n * <ModalPage.Root isOpen={isOpen} onClose={() => setIsOpen(false)}>\n *   <ModalPage.TopBar\n *     previousPathLabel=\"Products\"\n *     currentPathLabel=\"Edit Product\"\n *   />\n *   <ModalPage.Header>\n *     <ModalPage.Title>Edit Product</ModalPage.Title>\n *     <ModalPage.Subtitle>Update the product details</ModalPage.Subtitle>\n *     <ModalPage.Actions>\n *       <Button>Save</Button>\n *     </ModalPage.Actions>\n *   </ModalPage.Header>\n *   <ModalPage.Content>\n *     <p>Form content here</p>\n *   </ModalPage.Content>\n *   <ModalPage.Footer>\n *     <Button slot=\"close\" variant=\"outline\">Cancel</Button>\n *     <Button colorPalette=\"primary\" variant=\"solid\">Save</Button>\n *   </ModalPage.Footer>\n * </ModalPage.Root>\n * ```\n */\nexport const ModalPage = {\n  /**\n   * # ModalPage.Root\n   *\n   * The root container. Renders a fullscreen right-side Drawer.\n   * Controlled-only: requires `isOpen` and `onClose`.\n   *\n   * @example\n   * ```tsx\n   * <ModalPage.Root isOpen={isOpen} onClose={() => setIsOpen(false)}>\n   *   <ModalPage.TopBar previousPathLabel=\"Products\" currentPathLabel=\"Edit Product\" />\n   *   <ModalPage.Header>...</ModalPage.Header>\n   *   <ModalPage.Content>...</ModalPage.Content>\n   * </ModalPage.Root>\n   * ```\n   */\n  Root: ModalPageRoot,\n  /**\n   * # ModalPage.TopBar\n   *\n   * Breadcrumb navigation row with a back button and current path label.\n   *\n   * @example\n   * ```tsx\n   * <ModalPage.TopBar\n   *   previousPathLabel=\"Products\"\n   *   currentPathLabel=\"Edit Product\"\n   * />\n   * ```\n   */\n  TopBar: ModalPageTopBar,\n  /**\n   * # ModalPage.Header\n   *\n   * Header section with a 2-column grid layout for Title and Actions.\n   *\n   * @example\n   * ```tsx\n   * <ModalPage.Header>\n   *   <ModalPage.Title>Edit Product</ModalPage.Title>\n   *   <ModalPage.Actions>\n   *     <Button>Save</Button>\n   *   </ModalPage.Actions>\n   * </ModalPage.Header>\n   * ```\n   */\n  Header: ModalPageHeader,\n  /**\n   * # ModalPage.Title\n   *\n   * The main page title heading. Renders as an `h2` element.\n   *\n   * @example\n   * ```tsx\n   * <ModalPage.Title>Edit Product</ModalPage.Title>\n   * ```\n   */\n  Title: ModalPageTitle,\n  /**\n   * # ModalPage.Subtitle\n   *\n   * An optional subtitle displayed below the title.\n   *\n   * @example\n   * ```tsx\n   * <ModalPage.Subtitle>Fill in the product details</ModalPage.Subtitle>\n   * ```\n   */\n  Subtitle: ModalPageSubtitle,\n  /**\n   * # ModalPage.Actions\n   *\n   * Container for action buttons in the header.\n   *\n   * @example\n   * ```tsx\n   * <ModalPage.Actions>\n   *   <Button variant=\"outline\">Preview</Button>\n   * </ModalPage.Actions>\n   * ```\n   */\n  Actions: ModalPageActions,\n  /**\n   * # ModalPage.TabNav\n   *\n   * Layout container for tab navigation in the header.\n   * Positions itself in the header grid's last row at full width.\n   * Place inside `ModalPage.Header`.\n   *\n   * Wrap a `TabNav.Root` inside, or use `as={TabNav.Root}` for a flatter DOM.\n   *\n   * @example\n   * ```tsx\n   * <ModalPage.Header>\n   *   <ModalPage.Title>Order Details</ModalPage.Title>\n   *   <ModalPage.TabNav>\n   *     <TabNav.Root aria-label=\"Order sections\">\n   *       <TabNav.Item href=\"/general\" isCurrent>General</TabNav.Item>\n   *       <TabNav.Item href=\"/items\">Items</TabNav.Item>\n   *     </TabNav.Root>\n   *   </ModalPage.TabNav>\n   * </ModalPage.Header>\n   * ```\n   */\n  TabNav: ModalPageTabNav,\n  /**\n   * # ModalPage.Content\n   *\n   * Scrollable content area.\n   *\n   * @example\n   * ```tsx\n   * <ModalPage.Content>\n   *   <FormField.Root>...</FormField.Root>\n   * </ModalPage.Content>\n   * ```\n   */\n  Content: ModalPageContent,\n  /**\n   * # ModalPage.Footer\n   *\n   * Footer slot for action buttons (save/cancel).\n   *\n   * @example\n   * ```tsx\n   * <ModalPage.Footer>\n   *   <Button slot=\"close\" variant=\"outline\">Cancel</Button>\n   *   <Button variant=\"solid\">Save</Button>\n   * </ModalPage.Footer>\n   * ```\n   */\n  Footer: ModalPageFooter,\n};\n"],"mappings":"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"}