@mittwald/flow-react-components 0.2.0-experimental.776 → 1.0.0

package/dist/js/packages/components/src/components/Modal/Modal.mjs

@@ -1,126 +1,118 @@
 "use client"
 /* */
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Suspense } from 'react';
-import styles from './Modal.module.scss.mjs';
-import clsx from 'clsx';
-import { dynamic } from '../../lib/propsContext/dynamicProps/dynamic.mjs';
-import '../../lib/propsContext/propsContext.mjs';
-import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
-import { OverlayController } from '../../lib/controller/overlay/OverlayController.mjs';
-import '../../lib/controller/overlay/context.mjs';
-import 'remeda';
-import '@react-aria/utils';
-import 'dot-prop';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import { Overlay } from '../Overlay/Overlay.mjs';
-import { Action } from '../Action/Action.mjs';
-import 'react-aria';
-import '@react-aria/live-announcer';
-import '@mittwald/flow-icons';
-import '../Icon/components/IconSetProvider.mjs';
-import '../Icon/Icon.mjs';
-import '../../views/IconView.mjs';
-import { IconClose } from '../Icon/components/icons/IconClose.mjs';
-import ButtonView from '../../views/ButtonView.mjs';
-import { OffCanvasSuspenseFallback } from './components/OffCanvasSuspenseFallback/OffCanvasSuspenseFallback.mjs';
-import { Wrap } from '../Wrap/Wrap.mjs';
-import { ClearPropsContext } from '../../lib/propsContext/components/ClearPropsContext.mjs';
-
-const Modal = flowComponent("Modal", (props) => {
-  const {
-    size = "s",
-    offCanvas,
-    controller,
-    children,
-    ref,
-    className,
-    offCanvasOrientation = "right",
-    ...overlayProps
-  } = props;
-  const rootClassName = clsx(
-    offCanvas ? styles.offCanvas : styles.modal,
-    styles[`size-${size}`],
-    offCanvasOrientation === "left" && styles["left"],
-    className
-  );
-  const header = (children2) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    children2,
-    /* @__PURE__ */ jsx(Action, { closeModal: { bypassConfirmation: true }, children: /* @__PURE__ */ jsx(ButtonView, { variant: "plain", color: "secondary", children: /* @__PURE__ */ jsx(IconClose, {}) }) })
-  ] });
-  const nestedHeadingLevel = 3;
-  const nestedHeadingProps = {
-    Heading: { level: nestedHeadingLevel },
-    Section: {
-      Header: { Heading: { level: nestedHeadingLevel } },
-      Heading: { level: nestedHeadingLevel }
-    },
-    Header: { Heading: { level: nestedHeadingLevel } }
-  };
-  const propsContext = {
-    Content: {
-      ...nestedHeadingProps,
-      className: styles.content
-    },
-    ColumnLayout: {
-      ...nestedHeadingProps,
-      l: [2, 1],
-      m: [1],
-      className: styles.columnLayout,
-      AccentBox: { className: styles.accentBox, color: "neutral" },
-      wrapWith: /* @__PURE__ */ jsx(ClearPropsContext, {})
-    },
-    Heading: {
-      className: styles.header,
-      level: 2,
-      slot: "title",
-      children: dynamic((props2) => header(props2.children))
-    },
-    ActionGroup: {
-      className: styles.actionGroup,
-      spacing: "m",
-      Action: {
-        closeModal: dynamic((props2) => {
-          if (props2.closeModal === void 0) {
-            return;
-          }
-          if (props2.closeModal === true) {
-            return { bypassConfirmation: true };
-          }
-          return {
-            bypassConfirmation: true,
-            ...props2.closeModal
-          };
-        }),
-        closeOverlay: dynamic((props2) => {
-          if (props2.closeOverlay === void 0) {
-            return;
-          }
-          if (props2.closeOverlay instanceof OverlayController || typeof props2.closeOverlay === "string") {
-            return {
-              bypassConfirmation: true,
-              overlay: props2.closeOverlay
-            };
-          }
-          return {
-            bypassConfirmation: true,
-            ...props2.closeOverlay
-          };
-        })
-      }
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    Overlay,
-    {
-      className: rootClassName,
-      controller,
-      ref,
-      ...overlayProps,
-      children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(Wrap, { if: offCanvas, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(OffCanvasSuspenseFallback, {}), children }) }) })
-    }
-  );
+import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import { ClearPropsContext } from "../../lib/propsContext/components/ClearPropsContext.mjs";
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
+import { IconClose } from "../Icon/components/icons/IconClose.mjs";
+import { Wrap } from "../Wrap/Wrap.mjs";
+import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
+import { OverlayController } from "../../lib/controller/overlay/OverlayController.mjs";
+import { Action } from "../Action/Action.mjs";
+import ButtonView from "../../views/ButtonView.mjs";
+import { Overlay } from "../Overlay/Overlay.mjs";
+import Modal_module_default from "./Modal.module.mjs";
+import { OffCanvasSuspenseFallback } from "./components/OffCanvasSuspenseFallback/OffCanvasSuspenseFallback.mjs";
+import __locale_default from "../../../../../_virtual/_22.locale.mjs";
+import { ConfirmUnsavedChangesModal } from "./components/ConfirmUnsavedChangesModal/ConfirmUnsavedChangesModal.mjs";
+import { useVirtualKeyboardVisible } from "../../lib/hooks/dom/useVirtualKeyboardVisible.mjs";
+import clsx from "clsx";
+import { Suspense, useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Modal/Modal.tsx
+var Modal = flowComponent("Modal", (props) => {
+	const { size = "s", offCanvas, controller, children, ref, className, offCanvasOrientation = "right", showCloseButton, ...overlayProps } = props;
+	const stringFormatter = useLocalizedStringFormatter(__locale_default, "Modal");
+	const keyboardVisible = useVirtualKeyboardVisible();
+	const rootClassName = clsx(offCanvas ? Modal_module_default.offCanvas : Modal_module_default.modal, Modal_module_default[`size-${size}`], offCanvasOrientation === "left" && Modal_module_default["left"], keyboardVisible && Modal_module_default.keyboardVisible, className);
+	const generatedId = useId();
+	const header = (children) => /* @__PURE__ */ jsxs(Fragment$1, { children: [children, /* @__PURE__ */ jsx(Action, {
+		closeModal: { bypassConfirmation: true },
+		children: /* @__PURE__ */ jsx(ButtonView, {
+			variant: "plain",
+			color: "secondary",
+			"aria-label": stringFormatter.format("close"),
+			className: clsx(Modal_module_default.closeButton, showCloseButton === true ? Modal_module_default.alwaysVisible : showCloseButton === false ? Modal_module_default.alwaysHidden : void 0),
+			children: /* @__PURE__ */ jsx(IconClose, {})
+		})
+	})] });
+	const nestedHeadingLevel = 3;
+	const nestedHeadingProps = {
+		Heading: { level: nestedHeadingLevel },
+		Section: {
+			Header: { Heading: { level: nestedHeadingLevel } },
+			Heading: { level: nestedHeadingLevel },
+			hideSeparator: true
+		},
+		Header: { Heading: { level: nestedHeadingLevel } }
+	};
+	const propsContext = {
+		Content: {
+			...nestedHeadingProps,
+			className: Modal_module_default.content
+		},
+		ColumnLayout: {
+			...nestedHeadingProps,
+			l: [2, 1],
+			m: [1],
+			className: Modal_module_default.columnLayout,
+			AccentBox: {
+				className: Modal_module_default.accentBox,
+				backgroundColor: "neutral"
+			},
+			wrapWith: /* @__PURE__ */ jsx(ClearPropsContext, {})
+		},
+		Heading: {
+			className: Modal_module_default.header,
+			level: 2,
+			children: dynamic((props) => header(props.children)),
+			id: generatedId
+		},
+		ActionGroup: {
+			className: Modal_module_default.actionGroup,
+			spacing: "m",
+			Action: {
+				closeModal: dynamic((props) => {
+					if (props.closeModal === void 0) return;
+					if (props.closeModal === true) return { bypassConfirmation: true };
+					return {
+						bypassConfirmation: true,
+						...props.closeModal
+					};
+				}),
+				closeOverlay: dynamic((props) => {
+					if (props.closeOverlay === void 0) return;
+					if (props.closeOverlay instanceof OverlayController || typeof props.closeOverlay === "string") return {
+						bypassConfirmation: true,
+						overlay: props.closeOverlay
+					};
+					return {
+						bypassConfirmation: true,
+						...props.closeOverlay
+					};
+				})
+			}
+		}
+	};
+	return /* @__PURE__ */ jsxs(Overlay, {
+		className: rootClassName,
+		controller,
+		ref,
+		"aria-labelledby": generatedId,
+		...overlayProps,
+		children: [/* @__PURE__ */ jsx(PropsContextProvider, {
+			props: propsContext,
+			children: /* @__PURE__ */ jsx(Wrap, {
+				if: offCanvas,
+				children: /* @__PURE__ */ jsx(Suspense, {
+					fallback: /* @__PURE__ */ jsx(OffCanvasSuspenseFallback, {}),
+					children
+				})
+			})
+		}), /* @__PURE__ */ jsx(ConfirmUnsavedChangesModal, {})]
+	});
 });
-
+//#endregion
 export { Modal, Modal as default };
-//# sourceMappingURL=Modal.mjs.map
+
+//# sourceMappingURL=Modal.mjs.map

package/dist/js/packages/components/src/components/Modal/Modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","sources":["../../../../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { type PropsWithChildren, type ReactNode, Suspense } from \"react\";\nimport styles from \"./Modal.module.scss\";\nimport clsx from \"clsx\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { OverlayController } from \"@/lib/controller/overlay\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Overlay, type OverlayProps } from \"@/components/Overlay/Overlay\";\nimport { Action } from \"@/components/Action\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { OffCanvasSuspenseFallback } from \"@/components/Modal/components/OffCanvasSuspenseFallback\";\nimport Wrap from \"@/components/Wrap\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext/ClearPropsContext\";\n\ntype SupportedOverlayProps = Pick<\n  OverlayProps,\n  \"isOpen\" | \"isDefaultOpen\" | \"onOpen\" | \"onClose\" | \"onOpenChange\"\n>;\n\nexport interface ModalProps\n  extends\n    PropsWithChildren,\n    FlowComponentProps,\n    PropsWithClassName,\n    SupportedOverlayProps {\n  /** The size of the modal. @default \"s\" */\n  size?: \"s\" | \"m\" | \"l\";\n  /** Whether the modal should be displayed as an off canvas. */\n  offCanvas?: boolean;\n  /**\n   * Whether the off canvas should be displayed on the right or left side of the\n   * screen. @default \"right\"\n   */\n  offCanvasOrientation?: \"left\" | \"right\";\n  /** An overlay controller to control the modal state. */\n  controller?: OverlayController;\n  /**\n   * Accepts \"actionConfirm\" to use the modal as a confirmation modal for an\n   * action.\n   */\n  slot?: string;\n  /** Whether the modal can be closed by clicking outside of it. */\n  isDismissable?: boolean;\n}\n\nexport const Modal = flowComponent(\"Modal\", (props) => {\n  const {\n    size = \"s\",\n    offCanvas,\n    controller,\n    children,\n    ref,\n    className,\n    offCanvasOrientation = \"right\",\n    ...overlayProps\n  } = props;\n\n  const rootClassName = clsx(\n    offCanvas ? styles.offCanvas : styles.modal,\n    styles[`size-${size}`],\n    offCanvasOrientation === \"left\" && styles[\"left\"],\n    className,\n  );\n\n  const header = (children: ReactNode) => (\n    <>\n      {children}\n      <Action closeModal={{ bypassConfirmation: true }}>\n        <ButtonView variant=\"plain\" color=\"secondary\">\n          <IconClose />\n        </ButtonView>\n      </Action>\n    </>\n  );\n\n  const nestedHeadingLevel = 3;\n\n  const nestedHeadingProps: PropsContext = {\n    Heading: { level: nestedHeadingLevel },\n    Section: {\n      Header: { Heading: { level: nestedHeadingLevel } },\n      Heading: { level: nestedHeadingLevel },\n    },\n    Header: { Heading: { level: nestedHeadingLevel } },\n  };\n\n  const propsContext: PropsContext = {\n    Content: {\n      ...nestedHeadingProps,\n      className: styles.content,\n    },\n    ColumnLayout: {\n      ...nestedHeadingProps,\n      l: [2, 1],\n      m: [1],\n      className: styles.columnLayout,\n      AccentBox: { className: styles.accentBox, color: \"neutral\" },\n      wrapWith: <ClearPropsContext />,\n    },\n    Heading: {\n      className: styles.header,\n      level: 2,\n      slot: \"title\",\n      children: dynamic((props) => header(props.children)),\n    },\n    ActionGroup: {\n      className: styles.actionGroup,\n      spacing: \"m\",\n      Action: {\n        closeModal: dynamic((props) => {\n          if (props.closeModal === undefined) {\n            return;\n          }\n          if (props.closeModal === true) {\n            return { bypassConfirmation: true };\n          }\n          return {\n            bypassConfirmation: true,\n            ...props.closeModal,\n          };\n        }),\n        closeOverlay: dynamic((props) => {\n          if (props.closeOverlay === undefined) {\n            return;\n          }\n          if (\n            props.closeOverlay instanceof OverlayController ||\n            typeof props.closeOverlay === \"string\"\n          ) {\n            return {\n              bypassConfirmation: true,\n              overlay: props.closeOverlay,\n            };\n          }\n          return {\n            bypassConfirmation: true,\n            ...props.closeOverlay,\n          };\n        }),\n      },\n    },\n  };\n\n  return (\n    <Overlay\n      className={rootClassName}\n      controller={controller}\n      ref={ref}\n      {...overlayProps}\n    >\n      <PropsContextProvider props={propsContext}>\n        <Wrap if={offCanvas}>\n          <Suspense fallback={<OffCanvasSuspenseFallback />}>\n            {children}\n          </Suspense>\n        </Wrap>\n      </PropsContextProvider>\n    </Overlay>\n  );\n});\n\nexport default Modal;\n"],"names":["children","props"],"mappings":"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"}
+{"version":3,"file":"Modal.mjs","names":[],"sources":["../../../../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { type PropsWithChildren, type ReactNode, Suspense, useId } from \"react\";\nimport styles from \"./Modal.module.scss\";\nimport clsx from \"clsx\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { OverlayController } from \"@/lib/controller/overlay\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Overlay, type OverlayProps } from \"@/components/Overlay/Overlay\";\nimport { Action } from \"@/components/Action\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { OffCanvasSuspenseFallback } from \"@/components/Modal/components/OffCanvasSuspenseFallback\";\nimport { ConfirmUnsavedChangesModal } from \"@/components/Modal/components/ConfirmUnsavedChangesModal/ConfirmUnsavedChangesModal\";\nimport Wrap from \"@/components/Wrap\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { useVirtualKeyboardVisible } from \"@/lib/hooks/dom/useVirtualKeyboardVisible\";\nimport locales from \"./locales/*.locale.json\";\n\ntype SupportedOverlayProps = Pick<\n  OverlayProps,\n  \"isOpen\" | \"isDefaultOpen\" | \"onOpen\" | \"onClose\" | \"onOpenChange\"\n>;\n\nexport interface ModalProps\n  extends\n    PropsWithChildren,\n    FlowComponentProps,\n    PropsWithClassName,\n    SupportedOverlayProps {\n  /** The size of the modal. @default \"s\" */\n  size?: \"s\" | \"m\" | \"l\";\n  /** Whether the modal should be displayed as an off canvas. */\n  offCanvas?: boolean;\n  /**\n   * Whether the off canvas should be displayed on the right or left side of the\n   * screen. @default \"right\"\n   */\n  offCanvasOrientation?: \"left\" | \"right\";\n  /** An overlay controller to control the modal state. */\n  controller?: OverlayController;\n  /**\n   * Accepts \"actionConfirm\" to use the modal as a confirmation modal for an\n   * action.\n   */\n  slot?: string;\n  /** Whether the modal can be closed by clicking outside of it. */\n  isDismissable?: boolean;\n  /** Whether the close button should be visible */\n  showCloseButton?: boolean;\n  /**\n   * Whether closing the modal must be confirmed – use it to protect unsaved\n   * changes.\n   */\n  confirmOnClose?: boolean;\n}\n\nexport const Modal = flowComponent(\"Modal\", (props) => {\n  const {\n    size = \"s\",\n    offCanvas,\n    controller,\n    children,\n    ref,\n    className,\n    offCanvasOrientation = \"right\",\n    showCloseButton,\n    ...overlayProps\n  } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Modal\");\n\n  // On mobile the header/footer are docked (sticky) while at rest, but flow\n  // normally while the on-screen keyboard is open so the content gets the full\n  // available space (see Modal.module.scss). #2423\n  const keyboardVisible = useVirtualKeyboardVisible();\n\n  const rootClassName = clsx(\n    offCanvas ? styles.offCanvas : styles.modal,\n    styles[`size-${size}`],\n    offCanvasOrientation === \"left\" && styles[\"left\"],\n    keyboardVisible && styles.keyboardVisible,\n    className,\n  );\n\n  const generatedId = useId();\n\n  const header = (children: ReactNode) => (\n    <>\n      {children}\n      <Action closeModal={{ bypassConfirmation: true }}>\n        <ButtonView\n          variant=\"plain\"\n          color=\"secondary\"\n          aria-label={stringFormatter.format(\"close\")}\n          className={clsx(\n            styles.closeButton,\n            showCloseButton === true\n              ? styles.alwaysVisible\n              : showCloseButton === false\n                ? styles.alwaysHidden\n                : undefined,\n          )}\n        >\n          <IconClose />\n        </ButtonView>\n      </Action>\n    </>\n  );\n\n  const nestedHeadingLevel = 3;\n\n  const nestedHeadingProps: PropsContext = {\n    Heading: { level: nestedHeadingLevel },\n    Section: {\n      Header: { Heading: { level: nestedHeadingLevel } },\n      Heading: { level: nestedHeadingLevel },\n      hideSeparator: true,\n    },\n    Header: { Heading: { level: nestedHeadingLevel } },\n  };\n\n  const propsContext: PropsContext = {\n    Content: {\n      ...nestedHeadingProps,\n      className: styles.content,\n    },\n    ColumnLayout: {\n      ...nestedHeadingProps,\n      l: [2, 1],\n      m: [1],\n      className: styles.columnLayout,\n      AccentBox: { className: styles.accentBox, backgroundColor: \"neutral\" },\n      wrapWith: <ClearPropsContext />,\n    },\n    Heading: {\n      className: styles.header,\n      level: 2,\n      children: dynamic((props) => header(props.children)),\n      id: generatedId,\n    },\n    ActionGroup: {\n      className: styles.actionGroup,\n      spacing: \"m\",\n      Action: {\n        closeModal: dynamic((props) => {\n          if (props.closeModal === undefined) {\n            return;\n          }\n          if (props.closeModal === true) {\n            return { bypassConfirmation: true };\n          }\n          return {\n            bypassConfirmation: true,\n            ...props.closeModal,\n          };\n        }),\n        closeOverlay: dynamic((props) => {\n          if (props.closeOverlay === undefined) {\n            return;\n          }\n          if (\n            props.closeOverlay instanceof OverlayController ||\n            typeof props.closeOverlay === \"string\"\n          ) {\n            return {\n              bypassConfirmation: true,\n              overlay: props.closeOverlay,\n            };\n          }\n          return {\n            bypassConfirmation: true,\n            ...props.closeOverlay,\n          };\n        }),\n      },\n    },\n  };\n\n  return (\n    <Overlay\n      className={rootClassName}\n      controller={controller}\n      ref={ref}\n      aria-labelledby={generatedId}\n      {...overlayProps}\n    >\n      <PropsContextProvider props={propsContext}>\n        <Wrap if={offCanvas}>\n          <Suspense fallback={<OffCanvasSuspenseFallback />}>\n            {children}\n          </Suspense>\n        </Wrap>\n      </PropsContextProvider>\n      <ConfirmUnsavedChangesModal />\n    </Overlay>\n  );\n});\n\nexport default Modal;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA8DA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,OAAO,KACP,WACA,YACA,UACA,KACA,WACA,uBAAuB,SACvB,iBACA,GAAG,iBACD;CAEJ,MAAM,kBAAkB,4BAA4B,kBAAS,OAAO;CAKpE,MAAM,kBAAkB,0BAA0B;CAElD,MAAM,gBAAgB,KACpB,YAAY,qBAAO,YAAY,qBAAO,OACtC,qBAAO,QAAQ,SACf,yBAAyB,UAAU,qBAAO,SAC1C,mBAAmB,qBAAO,iBAC1B,SACF;CAEA,MAAM,cAAc,MAAM;CAE1B,MAAM,UAAU,aACd,qBAAA,YAAA,EAAA,UAAA,CACG,UACD,oBAAC,QAAD;EAAQ,YAAY,EAAE,oBAAoB,KAAK;EAC7C,UAAA,oBAAC,YAAD;GACE,SAAQ;GACR,OAAM;GACN,cAAY,gBAAgB,OAAO,OAAO;GAC1C,WAAW,KACT,qBAAO,aACP,oBAAoB,OAChB,qBAAO,gBACP,oBAAoB,QAClB,qBAAO,eACP,KAAA,CACR;GAEA,UAAA,oBAAC,WAAD,CAAY,CAAA;EACF,CAAA;CACN,CAAA,CACR,EAAA,CAAA;CAGJ,MAAM,qBAAqB;CAE3B,MAAM,qBAAmC;EACvC,SAAS,EAAE,OAAO,mBAAmB;EACrC,SAAS;GACP,QAAQ,EAAE,SAAS,EAAE,OAAO,mBAAmB,EAAE;GACjD,SAAS,EAAE,OAAO,mBAAmB;GACrC,eAAe;EACjB;EACA,QAAQ,EAAE,SAAS,EAAE,OAAO,mBAAmB,EAAE;CACnD;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,GAAG;GACH,WAAW,qBAAO;EACpB;EACA,cAAc;GACZ,GAAG;GACH,GAAG,CAAC,GAAG,CAAC;GACR,GAAG,CAAC,CAAC;GACL,WAAW,qBAAO;GAClB,WAAW;IAAE,WAAW,qBAAO;IAAW,iBAAiB;GAAU;GACrE,UAAU,oBAAC,mBAAD,CAAoB,CAAA;EAChC;EACA,SAAS;GACP,WAAW,qBAAO;GAClB,OAAO;GACP,UAAU,SAAS,UAAU,OAAO,MAAM,QAAQ,CAAC;GACnD,IAAI;EACN;EACA,aAAa;GACX,WAAW,qBAAO;GAClB,SAAS;GACT,QAAQ;IACN,YAAY,SAAS,UAAU;KAC7B,IAAI,MAAM,eAAe,KAAA,GACvB;KAEF,IAAI,MAAM,eAAe,MACvB,OAAO,EAAE,oBAAoB,KAAK;KAEpC,OAAO;MACL,oBAAoB;MACpB,GAAG,MAAM;KACX;IACF,CAAC;IACD,cAAc,SAAS,UAAU;KAC/B,IAAI,MAAM,iBAAiB,KAAA,GACzB;KAEF,IACE,MAAM,wBAAwB,qBAC9B,OAAO,MAAM,iBAAiB,UAE9B,OAAO;MACL,oBAAoB;MACpB,SAAS,MAAM;KACjB;KAEF,OAAO;MACL,oBAAoB;MACpB,GAAG,MAAM;KACX;IACF,CAAC;GACH;EACF;CACF;CAEA,OACE,qBAAC,SAAD;EACE,WAAW;EACC;EACP;EACL,mBAAiB;EACjB,GAAI;EALN,UAAA,CAOE,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,MAAD;IAAM,IAAI;IACR,UAAA,oBAAC,UAAD;KAAU,UAAU,oBAAC,2BAAD,CAA4B,CAAA;KAC7C;IACO,CAAA;GACN,CAAA;EACc,CAAA,GACtB,oBAAC,4BAAD,CAA6B,CAAA,CACtB;;AAEb,CAAC"}

package/dist/js/packages/components/src/components/Modal/Modal.module.mjs

@@ -0,0 +1,40 @@
+"use client"
+/* */
+//#region src/components/Modal/Modal.module.scss
+var modal = "flow--modal";
+var offCanvas = "flow--modal--off-canvas";
+var actionGroup = "flow--modal--action-group";
+var closeButton = "flow--modal--close-button";
+var alwaysVisible = "flow--modal--always-visible";
+var alwaysHidden = "flow--modal--always-hidden";
+var header = "flow--modal--header";
+var content = "flow--modal--content";
+var columnLayout = "flow--modal--column-layout";
+var accentBox = "flow--modal--accent-box";
+var left = "flow--modal--left";
+var keyboardVisible = "flow--modal--keyboard-visible";
+var Modal_module_default = {
+	modal,
+	offCanvas,
+	actionGroup,
+	closeButton,
+	alwaysVisible,
+	alwaysHidden,
+	header,
+	content,
+	columnLayout,
+	accentBox,
+	"size-s": "flow--modal--size-s",
+	"size-m": "flow--modal--size-m",
+	"size-l": "flow--modal--size-l",
+	"modal-zoom": "flow--modal--modal-zoom",
+	"modal-slide-in-from-right": "flow--modal--modal-slide-in-from-right",
+	left,
+	"modal-slide-in-from-left": "flow--modal--modal-slide-in-from-left",
+	"modal-slide-up": "flow--modal--modal-slide-up",
+	keyboardVisible
+};
+//#endregion
+export { accentBox, actionGroup, alwaysHidden, alwaysVisible, closeButton, columnLayout, content, Modal_module_default as default, header, keyboardVisible, left, modal, offCanvas };
+
+//# sourceMappingURL=Modal.module.mjs.map

package/dist/js/packages/components/src/components/Modal/Modal.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.module.mjs","names":[],"sources":["../../../../../../../src/components/Modal/Modal.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n/* Caps the dialog width per size token (`size-s` / `size-m` / `size-l`). */\n@mixin size($size) {\n  &.size-#{$size} {\n    [role=\"dialog\"] {\n      width: inherit;\n      max-width: var(--modal--size--#{$size});\n    }\n  }\n}\n\n/* ===========================================================================\n   Base — shared by Modal (centered / bottom sheet) and OffCanvas (side panel).\n   =========================================================================== */\n.modal,\n.offCanvas {\n  /* Fixed full-viewport layer + centering wrapper. Sized to the visual\n     viewport so it tracks the on-screen keyboard (Overlay sets the var). */\n  > div {\n    position: fixed;\n    height: var(--visual-viewport-height);\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    justify-content: center;\n    align-items: center;\n    pointer-events: none;\n\n    > div {\n      display: flex;\n      justify-content: center;\n      width: inherit;\n      max-height: var(--visual-viewport-height);\n      padding: var(--size-px--xl);\n    }\n  }\n\n  /* Close button: hidden when an action group is present, unless forced. */\n  &:has(.actionGroup) {\n    .closeButton:not(.alwaysVisible) {\n      display: none;\n    }\n  }\n\n  .closeButton.alwaysHidden {\n    display: none;\n  }\n\n  /* The dialog card itself — a flex column. */\n  [role=\"dialog\"] {\n    display: flex;\n    flex-direction: column;\n    max-height: 100%;\n    overflow: hidden;\n    outline: none;\n    pointer-events: all;\n    background-color: var(--modal--background-color);\n    border: var(--modal--border-width) var(--modal--border-style)\n      var(--modal--border-color);\n\n    > form {\n      display: contents;\n    }\n  }\n\n  /* Header */\n  header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .header {\n    padding-top: var(--modal--header-padding-top);\n    padding-inline: var(--modal--padding);\n\n    > span {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-grow: 1;\n      gap: var(--section-header--heading-to-action-spacing);\n    }\n  }\n\n  /* Content — the scrollable body */\n  .content,\n  .columnLayout {\n    @include scrollbar.scrollbar;\n\n    flex-grow: 1;\n    min-height: var(--modal--content-min-height);\n    padding: var(--modal--padding);\n    overflow: hidden auto;\n    background-color: var(--modal--background-color);\n  }\n\n  .columnLayout .accentBox {\n    position: sticky;\n    top: 0;\n    height: fit-content;\n  }\n\n  /* Action group — the footer */\n  .actionGroup {\n    padding: var(--modal--padding);\n    background-color: var(--modal--footer-background-color);\n  }\n\n  /* ActionGroup's \"sorted\" layout sets flex-grow:1 on itself; the modal footer\n     must keep its natural height (otherwise it fills the full-height off-canvas\n     panel). Scope via the dialog so flex-grow:0 wins the equal-specificity /\n     source-order battle — without raising the specificity of the padding above,\n     which the mobile rules override. */\n  [role=\"dialog\"] .actionGroup {\n    flex-grow: 0;\n  }\n}\n\n/* ===========================================================================\n   Modal — desktop (centered dialog, zoom in/out).\n   =========================================================================== */\n@media (width > 768px) {\n  .modal {\n    @include size(s);\n    @include size(m);\n    @include size(l);\n\n    [role=\"dialog\"] {\n      border-radius: var(--modal--corner-radius);\n    }\n\n    > div > div {\n      &[data-entering] {\n        animation: modal-zoom var(--transition--duration--slow)\n          cubic-bezier(0.1, 0.8, 0.3, 1.2);\n      }\n\n      &[data-exiting] {\n        animation: modal-zoom var(--transition--duration--default)\n          cubic-bezier(0.1, 0.8, 0.3, 1.2) reverse;\n      }\n    }\n  }\n}\n\n/* ===========================================================================\n   OffCanvas — side panel (all widths), full height, slides in from the side.\n   =========================================================================== */\n.offCanvas {\n  @include size(s);\n  @include size(m);\n  @include size(l);\n\n  [role=\"dialog\"] {\n    height: 100%;\n    border-radius: 0;\n  }\n\n  > div {\n    padding-inline-start: var(--size-px--m);\n\n    > div {\n      justify-content: flex-end;\n      width: inherit;\n      height: inherit;\n      padding: unset;\n\n      &[data-entering] {\n        animation: modal-slide-in-from-right var(--transition--duration--slow);\n      }\n\n      &[data-exiting] {\n        animation: modal-slide-in-from-right\n          var(--transition--duration--default) reverse;\n      }\n    }\n  }\n\n  &.left {\n    > div {\n      padding-inline: 0 var(--size-px--m);\n\n      > div {\n        justify-content: flex-start;\n        padding: unset;\n\n        &[data-entering] {\n          animation: modal-slide-in-from-left var(--transition--duration--slow);\n        }\n\n        &[data-exiting] {\n          animation: modal-slide-in-from-left\n            var(--transition--duration--default) reverse;\n        }\n      }\n    }\n  }\n}\n\n/* ===========================================================================\n   Modal — mobile (bottom sheet), issue #2423.\n\n   One scroll container: the dialog scrolls while the header sticks to the top\n   and the footer to the bottom. While the virtual keyboard is open\n   (.keyboardVisible) both un-stick so header + content + footer flow normally\n   and the content gets the full available space.\n   =========================================================================== */\n@media (max-width: 768px) {\n  .modal {\n    /* Bottom-anchored sheet: rounded top corners + slide-up animation. */\n    > div > div {\n      margin-top: auto;\n      width: 100%;\n      padding: unset;\n      overflow: hidden;\n      border-start-start-radius: var(--modal--corner-radius);\n      border-start-end-radius: var(--modal--corner-radius);\n      pointer-events: all;\n\n      &[data-entering] {\n        animation: modal-slide-up var(--transition--duration--slow);\n      }\n\n      &[data-exiting] {\n        animation: modal-slide-up var(--transition--duration--default) reverse;\n      }\n    }\n\n    /* The dialog is the single scroll container. Capped just below the visual\n       viewport so a full-height sheet keeps a small gap from the top edge. */\n    [role=\"dialog\"] {\n      @include scrollbar.scrollbar;\n\n      width: inherit;\n      max-height: calc(\n        var(--visual-viewport-height) - var(--modal--tray-top-spacing)\n      );\n      overflow: hidden auto;\n    }\n\n    [role=\"dialog\"] > form {\n      width: inherit;\n    }\n\n    /* flex: 0 0 auto keeps natural heights; without flex-shrink:0 the flex\n       column compresses the content box and the (overflow:visible) fields\n       spill over the footer. */\n    .header,\n    .content,\n    .columnLayout,\n    .actionGroup {\n      flex: 0 0 auto;\n    }\n\n    .content,\n    .columnLayout {\n      min-height: 0;\n      overflow: visible;\n    }\n\n    /* Docked header + footer (sticky within the single scroll container). */\n    .header {\n      position: sticky;\n      top: 0;\n      z-index: 1;\n      background-color: var(--modal--background-color);\n    }\n\n    .actionGroup {\n      position: sticky;\n      bottom: 0;\n      z-index: 1;\n    }\n  }\n\n  /* Keyboard open: un-stick both so everything flows for maximum typing space.\n     The dialog fills the available height and the footer uses margin-top:auto,\n     so with SHORT content the footer still sits at the bottom (not mid-air) and\n     with tall content it scrolls away with everything else. Never hidden. */\n  .modal.keyboardVisible {\n    [role=\"dialog\"] {\n      min-height: calc(\n        var(--visual-viewport-height) - var(--modal--tray-top-spacing)\n      );\n    }\n\n    .header,\n    .actionGroup {\n      position: static;\n    }\n\n    .actionGroup {\n      margin-top: auto;\n    }\n  }\n\n  /* Shared mobile spacing + full-width stacked actions (Modal + OffCanvas). */\n  .modal,\n  .offCanvas {\n    .header {\n      padding-inline: var(--modal--padding-mobile);\n    }\n\n    .content,\n    .columnLayout,\n    .actionGroup {\n      padding: var(--modal--padding-mobile);\n    }\n\n    .actionGroup {\n      flex-direction: column;\n\n      button {\n        width: 100%;\n      }\n    }\n  }\n}\n\n/* ===========================================================================\n   Animations\n   =========================================================================== */\n@keyframes modal-zoom {\n  /* Start with scale(1) to let ResizeObservers take the correct width on mount. */\n  0% {\n    opacity: 0;\n    transform: scale(1);\n  }\n\n  0.1% {\n    opacity: 1;\n    transform: scale(0.8);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n}\n\n@keyframes modal-slide-up {\n  from {\n    translate: 0 30%;\n  }\n\n  to {\n    translate: 0 0;\n  }\n}\n\n@keyframes modal-slide-in-from-right {\n  from {\n    translate: 30% 0;\n  }\n\n  to {\n    translate: 0 0;\n  }\n}\n\n@keyframes modal-slide-in-from-left {\n  from {\n    translate: -30% 0;\n  }\n\n  to {\n    translate: 0 0;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Modal/components/ConfirmUnsavedChangesModal/ConfirmUnsavedChangesModal.mjs

@@ -1,40 +1,55 @@
 "use client"
 /* */
-import { jsxs, jsx } from 'react/jsx-runtime';
-import ContentView from '../../../../views/ContentView.mjs';
-import HeadingView from '../../../../views/HeadingView.mjs';
-import { useLocalizedStringFormatter } from 'react-aria';
-import locales from '../../../../../../../_virtual/_.locale.json@d73d054dfebb5b9cb421a19f38e48bd3.mjs';
-import { Modal } from '../../Modal.mjs';
-import TextView from '../../../../views/TextView.mjs';
-import ActionGroupView from '../../../../views/ActionGroupView.mjs';
-import { Action } from '../../../Action/Action.mjs';
-import 'react';
-import '@react-aria/live-announcer';
-import ButtonView from '../../../../views/ButtonView.mjs';
-import 'mobx';
-import { useModalController } from '../../../../lib/controller/overlay/useModalController.mjs';
-import '../../../../lib/controller/overlay/context.mjs';
-
-const ConfirmUnsavedChangesModal = () => {
-  const stringFormatter = useLocalizedStringFormatter(locales);
-  const closeConfirmationController = useModalController().useConfirmationController();
-  if (closeConfirmationController) {
-    const { controller, confirm, cancel } = closeConfirmationController;
-    return /* @__PURE__ */ jsxs(Modal, { controller, children: [
-      /* @__PURE__ */ jsx(HeadingView, { children: stringFormatter.format("unsavedChangesConfirmationModal.heading") }),
-      /* @__PURE__ */ jsx(ContentView, { children: /* @__PURE__ */ jsx(TextView, { children: stringFormatter.format("unsavedChangesConfirmationModal.text") }) }),
-      /* @__PURE__ */ jsx(ActionGroupView, { children: /* @__PURE__ */ jsxs(Action, { closeModal: true, children: [
-        /* @__PURE__ */ jsx(Action, { onAction: confirm, children: /* @__PURE__ */ jsx(ButtonView, { color: "danger", children: stringFormatter.format(
-          "unsavedChangesConfirmationModal.close"
-        ) }) }),
-        /* @__PURE__ */ jsx(Action, { onAction: cancel, children: /* @__PURE__ */ jsx(ButtonView, { color: "secondary", variant: "soft", children: stringFormatter.format(
-          "unsavedChangesConfirmationModal.keepOpen"
-        ) }) })
-      ] }) })
-    ] });
-  }
+import { useLocalizedStringFormatter } from "../../../TranslationProvider/useLocalizedStringFormatter.mjs";
+import { useModalController } from "../../../../lib/controller/overlay/useModalController.mjs";
+import { Action } from "../../../Action/Action.mjs";
+import ButtonView from "../../../../views/ButtonView.mjs";
+import HeadingView from "../../../../views/HeadingView.mjs";
+import TextView from "../../../../views/TextView.mjs";
+import ContentView from "../../../../views/ContentView.mjs";
+import ActionGroupView from "../../../../views/ActionGroupView.mjs";
+import __locale_default from "../../../../../../../_virtual/_22.locale.mjs";
+import { Modal } from "../../Modal.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Modal/components/ConfirmUnsavedChangesModal/ConfirmUnsavedChangesModal.tsx
+/**
+* Rendered by every `Modal` and only becomes active once something requires the
+* close to be confirmed – the `confirmOnClose` prop or a dirty `Form`.
+*/
+var ConfirmUnsavedChangesModal = () => {
+	const stringFormatter = useLocalizedStringFormatter(__locale_default, "Modal");
+	const modalController = useModalController();
+	const confirmOnCloseEnabled = modalController.useConfirmOnCloseEnabled();
+	const closeConfirmationController = modalController.useConfirmationController();
+	if (confirmOnCloseEnabled && closeConfirmationController) {
+		const { controller, confirm, cancel } = closeConfirmationController;
+		return /* @__PURE__ */ jsxs(Modal, {
+			controller,
+			children: [
+				/* @__PURE__ */ jsx(HeadingView, { children: stringFormatter.format("unsavedChangesConfirmationModal.heading") }),
+				/* @__PURE__ */ jsx(ContentView, { children: /* @__PURE__ */ jsx(TextView, { children: stringFormatter.format("unsavedChangesConfirmationModal.text") }) }),
+				/* @__PURE__ */ jsx(ActionGroupView, { children: /* @__PURE__ */ jsxs(Action, {
+					closeModal: true,
+					children: [/* @__PURE__ */ jsx(Action, {
+						onAction: confirm,
+						children: /* @__PURE__ */ jsx(ButtonView, {
+							color: "danger",
+							children: stringFormatter.format("unsavedChangesConfirmationModal.close")
+						})
+					}), /* @__PURE__ */ jsx(Action, {
+						onAction: cancel,
+						children: /* @__PURE__ */ jsx(ButtonView, {
+							color: "secondary",
+							variant: "soft",
+							children: stringFormatter.format("unsavedChangesConfirmationModal.keepOpen")
+						})
+					})]
+				}) })
+			]
+		});
+	}
 };
-
+//#endregion
 export { ConfirmUnsavedChangesModal, ConfirmUnsavedChangesModal as default };
-//# sourceMappingURL=ConfirmUnsavedChangesModal.mjs.map
+
+//# sourceMappingURL=ConfirmUnsavedChangesModal.mjs.map

package/dist/js/packages/components/src/components/Modal/components/ConfirmUnsavedChangesModal/ConfirmUnsavedChangesModal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmUnsavedChangesModal.mjs","sources":["../../../../../../../../../src/components/Modal/components/ConfirmUnsavedChangesModal/ConfirmUnsavedChangesModal.tsx"],"sourcesContent":["import ContentView from \"@/views/ContentView\";\nimport HeadingView from \"@/views/HeadingView\";\nimport type { FC } from \"react\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../locales/*.locale.json\";\nimport Modal from \"@/components/Modal/Modal\";\nimport TextView from \"@/views/TextView\";\nimport ActionGroupView from \"@/views/ActionGroupView\";\nimport Action from \"@/components/Action\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { useModalController } from \"@/lib/controller\";\n\nexport const ConfirmUnsavedChangesModal: FC = () => {\n  const stringFormatter = useLocalizedStringFormatter(locales);\n  const closeConfirmationController =\n    useModalController().useConfirmationController();\n\n  if (closeConfirmationController) {\n    const { controller, confirm, cancel } = closeConfirmationController;\n\n    return (\n      <Modal controller={controller}>\n        <HeadingView>\n          {stringFormatter.format(\"unsavedChangesConfirmationModal.heading\")}\n        </HeadingView>\n        <ContentView>\n          <TextView>\n            {stringFormatter.format(\"unsavedChangesConfirmationModal.text\")}\n          </TextView>\n        </ContentView>\n        <ActionGroupView>\n          <Action closeModal>\n            <Action onAction={confirm}>\n              <ButtonView color=\"danger\">\n                {stringFormatter.format(\n                  \"unsavedChangesConfirmationModal.close\",\n                )}\n              </ButtonView>\n            </Action>\n            <Action onAction={cancel}>\n              <ButtonView color=\"secondary\" variant=\"soft\">\n                {stringFormatter.format(\n                  \"unsavedChangesConfirmationModal.keepOpen\",\n                )}\n              </ButtonView>\n            </Action>\n          </Action>\n        </ActionGroupView>\n      </Modal>\n    );\n  }\n};\n\nexport default ConfirmUnsavedChangesModal;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAYO,MAAM,6BAAiC,MAAM;AAClD,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAC3D,EAAA,MAAM,2BAAA,GACJ,kBAAA,EAAmB,CAAE,yBAAA,EAA0B;AAEjD,EAAA,IAAI,2BAAA,EAA6B;AAC/B,IAAA,MAAM,EAAE,UAAA,EAAY,OAAA,EAAS,MAAA,EAAO,GAAI,2BAAA;AAExC,IAAA,uBACE,IAAA,CAAC,SAAM,UAAA,EACL,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,WAAA,EAAA,EACE,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,yCAAyC,CAAA,EACnE,CAAA;AAAA,sBACA,GAAA,CAAC,eACC,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EACE,0BAAgB,MAAA,CAAO,sCAAsC,GAChE,CAAA,EACF,CAAA;AAAA,sBACA,GAAA,CAAC,eAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,MAAA,EAAA,EAAO,YAAU,IAAA,EAChB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAO,QAAA,EAAU,OAAA,EAChB,8BAAC,UAAA,EAAA,EAAW,KAAA,EAAM,UACf,QAAA,EAAA,eAAA,CAAgB,MAAA;AAAA,UACf;AAAA,WAEJ,CAAA,EACF,CAAA;AAAA,wBACA,GAAA,CAAC,MAAA,EAAA,EAAO,QAAA,EAAU,MAAA,EAChB,QAAA,kBAAA,GAAA,CAAC,cAAW,KAAA,EAAM,WAAA,EAAY,OAAA,EAAQ,MAAA,EACnC,QAAA,EAAA,eAAA,CAAgB,MAAA;AAAA,UACf;AAAA,WAEJ,CAAA,EACF;AAAA,OAAA,EACF,CAAA,EACF;AAAA,KAAA,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"ConfirmUnsavedChangesModal.mjs","names":[],"sources":["../../../../../../../../../src/components/Modal/components/ConfirmUnsavedChangesModal/ConfirmUnsavedChangesModal.tsx"],"sourcesContent":["import ContentView from \"@/views/ContentView\";\nimport HeadingView from \"@/views/HeadingView\";\nimport type { FC } from \"react\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../locales/*.locale.json\";\nimport Modal from \"@/components/Modal/Modal\";\nimport TextView from \"@/views/TextView\";\nimport ActionGroupView from \"@/views/ActionGroupView\";\nimport Action from \"@/components/Action\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { useModalController } from \"@/lib/controller\";\n\n/**\n * Rendered by every `Modal` and only becomes active once something requires the\n * close to be confirmed – the `confirmOnClose` prop or a dirty `Form`.\n */\nexport const ConfirmUnsavedChangesModal: FC = () => {\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Modal\");\n  const modalController = useModalController();\n  const confirmOnCloseEnabled = modalController.useConfirmOnCloseEnabled();\n  const closeConfirmationController =\n    modalController.useConfirmationController();\n\n  if (confirmOnCloseEnabled && closeConfirmationController) {\n    const { controller, confirm, cancel } = closeConfirmationController;\n\n    return (\n      <Modal controller={controller}>\n        <HeadingView>\n          {stringFormatter.format(\"unsavedChangesConfirmationModal.heading\")}\n        </HeadingView>\n        <ContentView>\n          <TextView>\n            {stringFormatter.format(\"unsavedChangesConfirmationModal.text\")}\n          </TextView>\n        </ContentView>\n        <ActionGroupView>\n          <Action closeModal>\n            <Action onAction={confirm}>\n              <ButtonView color=\"danger\">\n                {stringFormatter.format(\n                  \"unsavedChangesConfirmationModal.close\",\n                )}\n              </ButtonView>\n            </Action>\n            <Action onAction={cancel}>\n              <ButtonView color=\"secondary\" variant=\"soft\">\n                {stringFormatter.format(\n                  \"unsavedChangesConfirmationModal.keepOpen\",\n                )}\n              </ButtonView>\n            </Action>\n          </Action>\n        </ActionGroupView>\n      </Modal>\n    );\n  }\n};\n\nexport default ConfirmUnsavedChangesModal;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgBA,IAAa,mCAAuC;CAClD,MAAM,kBAAkB,4BAA4B,kBAAS,OAAO;CACpE,MAAM,kBAAkB,mBAAmB;CAC3C,MAAM,wBAAwB,gBAAgB,yBAAyB;CACvE,MAAM,8BACJ,gBAAgB,0BAA0B;CAE5C,IAAI,yBAAyB,6BAA6B;EACxD,MAAM,EAAE,YAAY,SAAS,WAAW;EAExC,OACE,qBAAC,OAAD;GAAmB;GAAnB,UAAA;IACE,oBAAC,aAAD,EAAA,UACG,gBAAgB,OAAO,yCAAyC,EACtD,CAAA;IACb,oBAAC,aAAD,EAAA,UACE,oBAAC,UAAD,EAAA,UACG,gBAAgB,OAAO,sCAAsC,EACtD,CAAA,EACC,CAAA;IACb,oBAAC,iBAAD,EAAA,UACE,qBAAC,QAAD;KAAQ,YAAA;KAAR,UAAA,CACE,oBAAC,QAAD;MAAQ,UAAU;MAChB,UAAA,oBAAC,YAAD;OAAY,OAAM;OACf,UAAA,gBAAgB,OACf,uCACF;MACU,CAAA;KACN,CAAA,GACR,oBAAC,QAAD;MAAQ,UAAU;MAChB,UAAA,oBAAC,YAAD;OAAY,OAAM;OAAY,SAAQ;OACnC,UAAA,gBAAgB,OACf,0CACF;MACU,CAAA;KACN,CAAA,CACF;IACO,CAAA,EAAA,CAAA;GACZ;;CAEX;AACF"}

package/dist/js/packages/components/src/components/Modal/components/ModalTrigger/ModalTrigger.mjs

@@ -1,23 +1,20 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import 'react-aria-components';
-import '../../../OverlayTrigger/components/MenuTrigger/MenuTrigger.mjs';
-import { OverlayTrigger } from '../../../OverlayTrigger/OverlayTrigger.mjs';
-import DialogTriggerView from '../../../../views/DialogTriggerView.mjs';
+import { flowComponent } from "../../../../lib/componentFactory/flowComponent.mjs";
+import { OverlayTrigger } from "../../../OverlayTrigger/OverlayTrigger.mjs";
+import DialogTriggerView from "../../../../views/DialogTriggerView.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Modal/components/ModalTrigger/ModalTrigger.tsx
+var ModalTrigger = flowComponent("ModalTrigger", (props) => {
+	const { children, ...triggerProps } = props;
+	return /* @__PURE__ */ jsx(OverlayTrigger, {
+		overlayType: "Modal",
+		...triggerProps,
+		component: DialogTriggerView,
+		children
+	});
+}, { type: "provider" });
+//#endregion
+export { ModalTrigger, ModalTrigger as default };
 
-const ModalTrigger = (props) => {
-  const { children, ...triggerProps } = props;
-  return /* @__PURE__ */ jsx(
-    OverlayTrigger,
-    {
-      overlayType: "Modal",
-      ...triggerProps,
-      component: DialogTriggerView,
-      children
-    }
-  );
-};
-
-export { ModalTrigger };
-//# sourceMappingURL=ModalTrigger.mjs.map
+//# sourceMappingURL=ModalTrigger.mjs.map

package/dist/js/packages/components/src/components/Modal/components/ModalTrigger/ModalTrigger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModalTrigger.mjs","sources":["../../../../../../../../../src/components/Modal/components/ModalTrigger/ModalTrigger.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type { OverlayTriggerProps } from \"@/components/OverlayTrigger\";\nimport { OverlayTrigger } from \"@/components/OverlayTrigger\";\nimport type { Simplify } from \"type-fest\";\nimport DialogTriggerView from \"@/views/DialogTriggerView\";\n\nexport type { OverlayTriggerProps } from \"@/components/OverlayTrigger\";\n\nexport type ModalTriggerProps = Simplify<OverlayTriggerProps>;\n\nexport const ModalTrigger: FC<ModalTriggerProps> = (props) => {\n  const { children, ...triggerProps } = props;\n  return (\n    <OverlayTrigger\n      overlayType=\"Modal\"\n      {...triggerProps}\n      component={DialogTriggerView}\n    >\n      {children}\n    </OverlayTrigger>\n  );\n};\n\nexport default ModalTrigger;\n"],"names":[],"mappings":";;;;;;AAUO,MAAM,YAAA,GAAsC,CAAC,KAAA,KAAU;AAC5D,EAAA,MAAM,EAAE,QAAA,EAAU,GAAG,YAAA,EAAa,GAAI,KAAA;AACtC,EAAA,uBACE,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAY,OAAA;AAAA,MACX,GAAG,YAAA;AAAA,MACJ,SAAA,EAAW,iBAAA;AAAA,MAEV;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"ModalTrigger.mjs","names":[],"sources":["../../../../../../../../../src/components/Modal/components/ModalTrigger/ModalTrigger.tsx"],"sourcesContent":["import type { OverlayTriggerProps } from \"@/components/OverlayTrigger\";\nimport { OverlayTrigger } from \"@/components/OverlayTrigger\";\nimport type { Simplify } from \"type-fest\";\nimport DialogTriggerView from \"@/views/DialogTriggerView\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport type { OverlayTriggerProps } from \"@/components/OverlayTrigger\";\n\nexport type ModalTriggerProps = Simplify<OverlayTriggerProps>;\n\nexport const ModalTrigger = flowComponent(\n  \"ModalTrigger\",\n  (props) => {\n    const { children, ...triggerProps } = props;\n    return (\n      <OverlayTrigger\n        overlayType=\"Modal\"\n        {...triggerProps}\n        component={DialogTriggerView}\n      >\n        {children}\n      </OverlayTrigger>\n    );\n  },\n  { type: \"provider\" },\n);\n\nexport default ModalTrigger;\n"],"mappings":";;;;;;;AAUA,IAAa,eAAe,cAC1B,iBACC,UAAU;CACT,MAAM,EAAE,UAAU,GAAG,iBAAiB;CACtC,OACE,oBAAC,gBAAD;EACE,aAAY;EACZ,GAAI;EACJ,WAAW;EAEV;CACa,CAAA;AAEpB,GACA,EAAE,MAAM,WAAW,CACrB"}

package/dist/js/packages/components/src/components/Modal/components/OffCanvasSuspenseFallback/OffCanvasSuspenseFallback.mjs

@@ -1,15 +1,20 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import '../../../Action/Action.mjs';
-import { useAriaAnnounceSuspense } from '../../../Action/lib/ariaLive.mjs';
-import FlexView from '../../../../views/FlexView.mjs';
-import LoadingSpinnerView from '../../../../views/LoadingSpinnerView.mjs';
-
-const OffCanvasSuspenseFallback = () => {
-  useAriaAnnounceSuspense();
-  return /* @__PURE__ */ jsx(FlexView, { grow: true, align: "center", justify: "center", children: /* @__PURE__ */ jsx(LoadingSpinnerView, {}) });
+import { useAriaAnnounceSuspense } from "../../../Action/lib/ariaLive.mjs";
+import LoadingSpinnerView from "../../../../views/LoadingSpinnerView.mjs";
+import FlexView from "../../../../views/FlexView.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Modal/components/OffCanvasSuspenseFallback/OffCanvasSuspenseFallback.tsx
+var OffCanvasSuspenseFallback = () => {
+	useAriaAnnounceSuspense();
+	return /* @__PURE__ */ jsx(FlexView, {
+		grow: true,
+		align: "center",
+		justify: "center",
+		children: /* @__PURE__ */ jsx(LoadingSpinnerView, {})
+	});
 };
-
+//#endregion
 export { OffCanvasSuspenseFallback };
-//# sourceMappingURL=OffCanvasSuspenseFallback.mjs.map
+
+//# sourceMappingURL=OffCanvasSuspenseFallback.mjs.map

package/dist/js/packages/components/src/components/Modal/components/OffCanvasSuspenseFallback/OffCanvasSuspenseFallback.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"OffCanvasSuspenseFallback.mjs","sources":["../../../../../../../../../src/components/Modal/components/OffCanvasSuspenseFallback/OffCanvasSuspenseFallback.tsx"],"sourcesContent":["import { useAriaAnnounceSuspense } from \"@/components/Action\";\nimport FlexView from \"@/views/FlexView\";\nimport LoadingSpinnerView from \"@/views/LoadingSpinnerView\";\nimport type { FC } from \"react\";\n\nexport const OffCanvasSuspenseFallback: FC = () => {\n  useAriaAnnounceSuspense();\n  return (\n    <FlexView grow align=\"center\" justify=\"center\">\n      <LoadingSpinnerView />\n    </FlexView>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAKO,MAAM,4BAAgC,MAAM;AACjD,EAAA,uBAAA,EAAwB;AACxB,EAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAAS,IAAA,EAAI,IAAA,EAAC,KAAA,EAAM,UAAS,OAAA,EAAQ,QAAA,EACpC,QAAA,kBAAA,GAAA,CAAC,kBAAA,EAAA,EAAmB,CAAA,EACtB,CAAA;AAEJ;;;;"}
+{"version":3,"file":"OffCanvasSuspenseFallback.mjs","names":[],"sources":["../../../../../../../../../src/components/Modal/components/OffCanvasSuspenseFallback/OffCanvasSuspenseFallback.tsx"],"sourcesContent":["import { useAriaAnnounceSuspense } from \"@/components/Action\";\nimport FlexView from \"@/views/FlexView\";\nimport LoadingSpinnerView from \"@/views/LoadingSpinnerView\";\nimport type { FC } from \"react\";\n\nexport const OffCanvasSuspenseFallback: FC = () => {\n  useAriaAnnounceSuspense();\n  return (\n    <FlexView grow align=\"center\" justify=\"center\">\n      <LoadingSpinnerView />\n    </FlexView>\n  );\n};\n"],"mappings":";;;;;;;AAKA,IAAa,kCAAsC;CACjD,wBAAwB;CACxB,OACE,oBAAC,UAAD;EAAU,MAAA;EAAK,OAAM;EAAS,SAAQ;EACpC,UAAA,oBAAC,oBAAD,CAAqB,CAAA;CACb,CAAA;AAEd"}