@mittwald/flow-react-components 1.6.0-next.5 → 1.6.0-next.51

package/dist/js/packages/components/src/components/MarkdownEditor/components/AttachmentButton.mjs

@@ -5,7 +5,7 @@ import { ToolbarButton } from "./ToolbarButton.mjs";
 import { useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useVisuallyHidden } from "react-aria";
-//#region src/components/MarkdownEditor/components/AttachmentButton.tsx
+// src/components/MarkdownEditor/components/AttachmentButton.tsx
 /**
 * The toolbar's file picker — the keyboard and pointer equivalent of dropping a
 * file onto the editor. A `ToolbarButton` like every other tool, plus the
@@ -41,7 +41,6 @@ var AttachmentButton = (props) => {
 		}
 	})] });
 };
-//#endregion
 export { AttachmentButton };
 
 //# sourceMappingURL=AttachmentButton.mjs.map

package/dist/js/packages/components/src/components/MarkdownEditor/components/ModeButton.mjs

@@ -6,7 +6,7 @@ import MarkdownEditor_module_default from "../MarkdownEditor.module.mjs";
 import __locale_default from "../../../../../../_virtual/_26.locale.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/MarkdownEditor/components/ModeButton.tsx
+// src/components/MarkdownEditor/components/ModeButton.tsx
 var ModeButton = (props) => {
 	const { currentMode, onChange, ...rest } = props;
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "MarkdownEditor");
@@ -24,7 +24,6 @@ var ModeButton = (props) => {
 		children: stringFormatter.format(`mode.${otherMode}`)
 	});
 };
-//#endregion
 export { ModeButton };
 
 //# sourceMappingURL=ModeButton.mjs.map

package/dist/js/packages/components/src/components/MarkdownEditor/components/Toolbar.mjs

@@ -15,7 +15,7 @@ import { ModeButton } from "./ModeButton.mjs";
 import { AttachmentButton } from "./AttachmentButton.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/MarkdownEditor/components/Toolbar.tsx
+// src/components/MarkdownEditor/components/Toolbar.tsx
 var Toolbar = (props) => {
 	const isDisabled = props.isDisabled || props.currentMode === "preview";
 	/** The props of a tool that inserts markdown — all of them but the attachment. */
@@ -79,7 +79,6 @@ var Toolbar = (props) => {
 		})]
 	});
 };
-//#endregion
 export { Toolbar };
 
 //# sourceMappingURL=Toolbar.mjs.map

package/dist/js/packages/components/src/components/MarkdownEditor/components/ToolbarButton.mjs

@@ -5,7 +5,7 @@ import { Button } from "../../Button/Button.mjs";
 import __locale_default from "../../../../../../_virtual/_26.locale.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/MarkdownEditor/components/ToolbarButton.tsx
+// src/components/MarkdownEditor/components/ToolbarButton.tsx
 var ToolbarButton = (props) => {
 	const { children, type, onPress, ...rest } = props;
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "MarkdownEditor");
@@ -21,7 +21,6 @@ var ToolbarButton = (props) => {
 		children
 	});
 };
-//#endregion
 export { ToolbarButton };
 
 //# sourceMappingURL=ToolbarButton.mjs.map

package/dist/js/packages/components/src/components/MarkdownEditor/lib/fileUpload.mjs

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/MarkdownEditor/lib/fileUpload.ts
+// src/components/MarkdownEditor/lib/fileUpload.ts
 var escapeComment = (fileName) => fileName.replace(/-(?=-)/g, "- ");
 var escapeLinkLabel = (label) => label.replace(/[\\[\]]/g, "\\$&").replace(/\s+/g, " ").trim();
 var escapeLinkTarget = (url) => /[\s()]/.test(url) ? `<${url.replace(/[<>]/g, encodeURIComponent)}>` : url;
@@ -67,7 +67,6 @@ var replacePlaceholder = (value, search, replacement, selectionStart, selectionE
 * @internal
 */
 var removePlaceholder = (value, placeholder, selectionStart, selectionEnd) => replacePlaceholder(value, `${placeholder}\n`, "", selectionStart, selectionEnd) ?? replacePlaceholder(value, placeholder, "", selectionStart, selectionEnd);
-//#endregion
 export { insertAtCaret, removePlaceholder, replacePlaceholder, uploadPlaceholder, uploadedFileMarkdown };
 
 //# sourceMappingURL=fileUpload.mjs.map

package/dist/js/packages/components/src/components/MarkdownEditor/lib/modifyValueByMarkdownSyntax.mjs

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/MarkdownEditor/lib/modifyValueByMarkdownSyntax.ts
+// src/components/MarkdownEditor/lib/modifyValueByMarkdownSyntax.ts
 var scrollToCursor = (value = "", textarea) => {
 	const { selectionStart } = textarea;
 	const lineHeight = parseInt(getComputedStyle(textarea).lineHeight || "20", 10);
@@ -38,7 +38,6 @@ var modifyValueByMarkdownSyntax = (value = "", textAreaRef) => {
 		};
 	}
 };
-//#endregion
 export { modifyValueByMarkdownSyntax, scrollToCursor };
 
 //# sourceMappingURL=modifyValueByMarkdownSyntax.mjs.map

package/dist/js/packages/components/src/components/MarkdownEditor/lib/modifyValueByType.mjs

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import "react";
-//#region src/components/MarkdownEditor/lib/modifyValueByType.ts
+// src/components/MarkdownEditor/lib/modifyValueByType.ts
 var markdownSyntax = {
 	bold: {
 		before: "**",
@@ -167,7 +167,6 @@ var modifyValueByType = (markdown = "", type, textAreaRef) => {
 		newSelectionEnd: selectionEnd
 	};
 };
-//#endregion
 export { modifyValueByType };
 
 //# sourceMappingURL=modifyValueByType.mjs.map

package/dist/js/packages/components/src/components/MarkdownEditor/lib/useFileUpload.mjs

@@ -6,7 +6,7 @@ import __locale_default from "../../../../../../_virtual/_26.locale.mjs";
 import { insertAtCaret, removePlaceholder, replacePlaceholder, uploadPlaceholder, uploadedFileMarkdown } from "./fileUpload.mjs";
 import { useEffect, useRef, useState } from "react";
 import { announce } from "@react-aria/live-announcer";
-//#region src/components/MarkdownEditor/lib/useFileUpload.ts
+// src/components/MarkdownEditor/lib/useFileUpload.ts
 /** The files of a paste or a drop that `accept` covers. */
 var acceptedFrom = (files, accept) => Array.from(files ?? []).filter((file) => matchesAccept(file, accept));
 /**
@@ -135,7 +135,6 @@ var useFileUpload = (options) => {
 		uploadFiles: uploadFile ? uploadFiles : void 0
 	};
 };
-//#endregion
 export { useFileUpload };
 
 //# sourceMappingURL=useFileUpload.mjs.map

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

@@ -11,10 +11,37 @@ import clsx from "clsx";
 import { createElement } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
-//#region src/components/MenuItem/MenuItem.tsx
+// src/components/MenuItem/MenuItem.tsx
+var isMuted = (props) => !!(props.isPending || props.isSucceeded || props.isFailed || props["aria-disabled"]);
+var renderElement = (domProps) => "href" in domProps ? /* @__PURE__ */ jsx("a", { ...domProps }) : /* @__PURE__ */ jsx("div", { ...domProps });
+/**
+* React Aria drops `aria-disabled` from the props it forwards to the DOM, so it
+* is added to the rendered element. React Aria's `onClick` runs the menu's
+* `onAction`, follows the link and toggles the selection. A mouse release that
+* started outside the item toggles it on pointer up, Enter and Space toggle it
+* on key down. All three handlers are replaced, and like React Aria they stop
+* the event. A muted submenu trigger still opens its submenu on hover and
+* ArrowRight, only Enter and Space are swallowed.
+*/
+var renderMuted = (render = renderElement) => (domProps, renderProps) => render({
+	...domProps,
+	"aria-disabled": true,
+	onClick: (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+	},
+	onPointerUp: void 0,
+	onKeyDown: (e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			e.stopPropagation();
+		} else domProps.onKeyDown?.(e);
+	}
+}, renderProps);
 var disablePendingProps = (props) => {
-	if (props.isPending || props.isSucceeded || props.isFailed || props["aria-disabled"]) {
+	if (isMuted(props)) {
 		props = { ...props };
+		props.onAction = void 0;
 		props.onPress = void 0;
 		props.onPressStart = void 0;
 		props.onPressEnd = void 0;
@@ -25,8 +52,9 @@ var disablePendingProps = (props) => {
 };
 /** @flr-generate all */
 var MenuItem = flowComponent("MenuItem", (props) => {
+	const muted = isMuted(props);
 	props = disablePendingProps(props);
-	const { children, className, selectionVariant, isIndeterminate, id, ref, "aria-disabled": ariaDisabled, "aria-current": ariaCurrent, isPending, isSucceeded, isFailed, ...rest } = props;
+	const { children, className, selectionVariant, isIndeterminate, id, ref, "aria-disabled": ignoredAriaDisabled, "aria-current": ariaCurrent, render, isPending, isSucceeded, isFailed, ...rest } = props;
 	/**
 	* React Aria drops `aria-current` from the props it forwards to the DOM, so
 	* the current state is exposed as a data attribute (`data-*` passes the
@@ -35,7 +63,7 @@ var MenuItem = flowComponent("MenuItem", (props) => {
 	* "false".
 	*/
 	const currentProps = ariaCurrent && ariaCurrent !== "false" ? { "data-current": true } : {};
-	const rootClassName = clsx(MenuItem_module_default.menuItem, (ariaDisabled || isFailed || isSucceeded || isPending) && MenuItem_module_default.ariaDisabled, className);
+	const rootClassName = clsx(MenuItem_module_default.menuItem, className);
 	useAriaAnnounceActionState(isPending ? "isPending" : isSucceeded ? "isSucceeded" : isFailed ? "isFailed" : "isIdle");
 	const stateIconElement = isSucceeded ? /* @__PURE__ */ jsx(IconSucceeded, { color: "success" }) : isFailed ? /* @__PURE__ */ jsx(IconFailed, { color: "danger" }) : isPending ? /* @__PURE__ */ jsx(LoadingSpinner, {}) : void 0;
 	const stateIcon = stateIconElement && /* @__PURE__ */ jsx("div", {
@@ -45,6 +73,7 @@ var MenuItem = flowComponent("MenuItem", (props) => {
 	return /* @__PURE__ */ createElement(Aria.MenuItem, {
 		...rest,
 		...currentProps,
+		render: muted ? renderMuted(render) : render,
 		key: id,
 		id,
 		className: rootClassName,
@@ -56,7 +85,6 @@ var MenuItem = flowComponent("MenuItem", (props) => {
 		children
 	}), stateIcon] }));
 });
-//#endregion
 export { MenuItem, MenuItem as default };
 
 //# sourceMappingURL=MenuItem.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./MenuItem.module.scss\";\nimport clsx from \"clsx\";\nimport { MenuItemContent } from \"@/components/MenuItem/components/MenuItemContent/MenuItemContent\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport LoadingSpinner from \"@/components/LoadingSpinner\";\n\nexport interface MenuItemProps\n  extends\n    Omit<Aria.MenuItemProps, \"children\">,\n    PropsWithChildren,\n    FlowComponentProps {\n  selectionVariant?: \"control\" | \"navigation\" | \"switch\";\n  /**\n   * Shows the checkbox of a multiple-selection item as partially checked,\n   * unless the item is selected.\n   */\n  isIndeterminate?: boolean;\n  /** Whether the button is in a pending state. */\n  isPending?: boolean;\n  /** Whether the button is in a succeeded state. */\n  isSucceeded?: boolean;\n  /** Whether the button is in a failed state. */\n  isFailed?: boolean;\n  /** Disables button but keeps it focusable. */\n  \"aria-disabled\"?: boolean;\n  /** Marks the menu item as referring to the currently active page. */\n  \"aria-current\"?: string;\n}\n\nconst disablePendingProps = (props: MenuItemProps) => {\n  if (\n    props.isPending ||\n    props.isSucceeded ||\n    props.isFailed ||\n    props[\"aria-disabled\"]\n  ) {\n    props = { ...props };\n    props.onPress = undefined;\n    props.onPressStart = undefined;\n    props.onPressEnd = undefined;\n    props.onPressChange = undefined;\n    props.onPressUp = undefined;\n  }\n\n  return props;\n};\n\n/** @flr-generate all */\nexport const MenuItem = flowComponent(\"MenuItem\", (props) => {\n  props = disablePendingProps(props);\n\n  const {\n    children,\n    className,\n    selectionVariant,\n    isIndeterminate,\n    id,\n    ref,\n    \"aria-disabled\": ariaDisabled,\n    \"aria-current\": ariaCurrent,\n    isPending,\n    isSucceeded,\n    isFailed,\n    ...rest\n  } = props;\n\n  /**\n   * React Aria drops `aria-current` from the props it forwards to the DOM, so\n   * the current state is exposed as a data attribute (`data-*` passes the\n   * filter) — that is what the `menuItem` styling matches on. Every\n   * `aria-current` value marks the item as current, except an explicit\n   * \"false\".\n   */\n  const currentProps =\n    ariaCurrent && ariaCurrent !== \"false\" ? { \"data-current\": true } : {};\n\n  const rootClassName = clsx(\n    styles.menuItem /**\n     * Workaround warning: The Aria.MenuItem does not support \"aria-disabled\" by\n     * now, so this MenuItem will be visually disabled via CSS.\n     */,\n    (ariaDisabled || isFailed || isSucceeded || isPending) &&\n      styles.ariaDisabled,\n    className,\n  );\n\n  useAriaAnnounceActionState(\n    isPending\n      ? \"isPending\"\n      : isSucceeded\n        ? \"isSucceeded\"\n        : isFailed\n          ? \"isFailed\"\n          : \"isIdle\",\n  );\n\n  const stateIconElement = isSucceeded ? (\n    <IconSucceeded color=\"success\" />\n  ) : isFailed ? (\n    <IconFailed color=\"danger\" />\n  ) : isPending ? (\n    <LoadingSpinner />\n  ) : undefined;\n\n  const stateIcon = stateIconElement && (\n    <div className={styles.stateIcon}>{stateIconElement}</div>\n  );\n\n  return (\n    <Aria.MenuItem\n      {...rest}\n      {...currentProps}\n      key={id}\n      id={id}\n      className={rootClassName}\n      ref={ref}\n    >\n      {(props) => (\n        <>\n          <MenuItemContent\n            {...props}\n            selectionVariant={selectionVariant}\n            isIndeterminate={isIndeterminate}\n          >\n            {children}\n          </MenuItemContent>\n          {stateIcon}\n        </>\n      )}\n    </Aria.MenuItem>\n  );\n});\n\nexport default MenuItem;\n"],"mappings":";;;;;;;;;;;;;;AAkCA,IAAM,uBAAuB,UAAyB;CACpD,IACE,MAAM,aACN,MAAM,eACN,MAAM,YACN,MAAM,kBACN;EACA,QAAQ,EAAE,GAAG,MAAM;EACnB,MAAM,UAAU,KAAA;EAChB,MAAM,eAAe,KAAA;EACrB,MAAM,aAAa,KAAA;EACnB,MAAM,gBAAgB,KAAA;EACtB,MAAM,YAAY,KAAA;CACpB;CAEA,OAAO;AACT;;AAGA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,QAAQ,oBAAoB,KAAK;CAEjC,MAAM,EACJ,UACA,WACA,kBACA,iBACA,IACA,KACA,iBAAiB,cACjB,gBAAgB,aAChB,WACA,aACA,UACA,GAAG,SACD;;;;;;;;CASJ,MAAM,eACJ,eAAe,gBAAgB,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAEvE,MAAM,gBAAgB,KACpBA,wBAAO,WAIN,gBAAgB,YAAY,eAAe,cAC1CA,wBAAO,cACT,SACF;CAEA,2BACE,YACI,cACA,cACE,gBACA,WACE,aACA,QACV;CAEA,MAAM,mBAAmB,cACvB,oBAAC,eAAD,EAAe,OAAM,UAAW,CAAA,IAC9B,WACF,oBAAC,YAAD,EAAY,OAAM,SAAU,CAAA,IAC1B,YACF,oBAAC,gBAAD,CAAiB,CAAA,IACf,KAAA;CAEJ,MAAM,YAAY,oBAChB,oBAAC,OAAD;EAAK,WAAWA,wBAAO;EAAY,UAAA;CAAsB,CAAA;CAG3D,OACE,8BAAC,KAAK,UAAN;EACE,GAAI;EACJ,GAAI;EACJ,KAAK;EACD;EACJ,WAAW;EACN;CAcQ,IAZX,UACA,qBAAAC,YAAA,EAAA,UAAA,CACE,oBAAC,iBAAD;EACE,GAAI;EACc;EACD;EAEhB;CACc,CAAA,GAChB,SACD,EAAA,CAAA,CAES;AAEnB,CAAC"}
+{"version":3,"file":"MenuItem.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["import type { KeyboardEvent, MouseEvent, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./MenuItem.module.scss\";\nimport clsx from \"clsx\";\nimport { MenuItemContent } from \"@/components/MenuItem/components/MenuItemContent/MenuItemContent\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport LoadingSpinner from \"@/components/LoadingSpinner\";\n\nexport interface MenuItemProps\n  extends\n    Omit<Aria.MenuItemProps, \"children\">,\n    PropsWithChildren,\n    FlowComponentProps {\n  selectionVariant?: \"control\" | \"navigation\" | \"switch\";\n  /**\n   * Shows the checkbox of a multiple-selection item as partially checked,\n   * unless the item is selected.\n   */\n  isIndeterminate?: boolean;\n  /** Whether the button is in a pending state. */\n  isPending?: boolean;\n  /** Whether the button is in a succeeded state. */\n  isSucceeded?: boolean;\n  /** Whether the button is in a failed state. */\n  isFailed?: boolean;\n  /** Disables button but keeps it focusable. */\n  \"aria-disabled\"?: boolean;\n  /** Marks the menu item as referring to the currently active page. */\n  \"aria-current\"?: string;\n}\n\nconst isMuted = (props: MenuItemProps) =>\n  !!(\n    props.isPending ||\n    props.isSucceeded ||\n    props.isFailed ||\n    props[\"aria-disabled\"]\n  );\n\ntype RenderFunction = NonNullable<MenuItemProps[\"render\"]>;\n\nconst renderElement: RenderFunction = (domProps) =>\n  \"href\" in domProps ? <a {...domProps} /> : <div {...domProps} />;\n\n/**\n * React Aria drops `aria-disabled` from the props it forwards to the DOM, so it\n * is added to the rendered element. React Aria's `onClick` runs the menu's\n * `onAction`, follows the link and toggles the selection. A mouse release that\n * started outside the item toggles it on pointer up, Enter and Space toggle it\n * on key down. All three handlers are replaced, and like React Aria they stop\n * the event. A muted submenu trigger still opens its submenu on hover and\n * ArrowRight, only Enter and Space are swallowed.\n */\nconst renderMuted =\n  (render: RenderFunction = renderElement): RenderFunction =>\n  (domProps, renderProps) =>\n    render(\n      {\n        ...domProps,\n        \"aria-disabled\": true,\n        onClick: (e: MouseEvent) => {\n          e.preventDefault();\n          e.stopPropagation();\n        },\n        onPointerUp: undefined,\n        onKeyDown: (e: KeyboardEvent<HTMLDivElement & HTMLAnchorElement>) => {\n          if (e.key === \"Enter\" || e.key === \" \") {\n            e.preventDefault();\n            e.stopPropagation();\n          } else {\n            domProps.onKeyDown?.(e);\n          }\n        },\n      },\n      renderProps,\n    );\n\nconst disablePendingProps = (props: MenuItemProps) => {\n  if (isMuted(props)) {\n    props = { ...props };\n    props.onAction = undefined;\n    props.onPress = undefined;\n    props.onPressStart = undefined;\n    props.onPressEnd = undefined;\n    props.onPressChange = undefined;\n    props.onPressUp = undefined;\n  }\n\n  return props;\n};\n\n/** @flr-generate all */\nexport const MenuItem = flowComponent(\"MenuItem\", (props) => {\n  const muted = isMuted(props);\n  props = disablePendingProps(props);\n\n  const {\n    children,\n    className,\n    selectionVariant,\n    isIndeterminate,\n    id,\n    ref,\n    \"aria-disabled\": ignoredAriaDisabled,\n    \"aria-current\": ariaCurrent,\n    render,\n    isPending,\n    isSucceeded,\n    isFailed,\n    ...rest\n  } = props;\n\n  /**\n   * React Aria drops `aria-current` from the props it forwards to the DOM, so\n   * the current state is exposed as a data attribute (`data-*` passes the\n   * filter) — that is what the `menuItem` styling matches on. Every\n   * `aria-current` value marks the item as current, except an explicit\n   * \"false\".\n   */\n  const currentProps =\n    ariaCurrent && ariaCurrent !== \"false\" ? { \"data-current\": true } : {};\n\n  const rootClassName = clsx(styles.menuItem, className);\n\n  useAriaAnnounceActionState(\n    isPending\n      ? \"isPending\"\n      : isSucceeded\n        ? \"isSucceeded\"\n        : isFailed\n          ? \"isFailed\"\n          : \"isIdle\",\n  );\n\n  const stateIconElement = isSucceeded ? (\n    <IconSucceeded color=\"success\" />\n  ) : isFailed ? (\n    <IconFailed color=\"danger\" />\n  ) : isPending ? (\n    <LoadingSpinner />\n  ) : undefined;\n\n  const stateIcon = stateIconElement && (\n    <div className={styles.stateIcon}>{stateIconElement}</div>\n  );\n\n  return (\n    <Aria.MenuItem\n      {...rest}\n      {...currentProps}\n      render={muted ? renderMuted(render) : render}\n      key={id}\n      id={id}\n      className={rootClassName}\n      ref={ref}\n    >\n      {(props) => (\n        <>\n          <MenuItemContent\n            {...props}\n            selectionVariant={selectionVariant}\n            isIndeterminate={isIndeterminate}\n          >\n            {children}\n          </MenuItemContent>\n          {stateIcon}\n        </>\n      )}\n    </Aria.MenuItem>\n  );\n});\n\nexport default MenuItem;\n"],"mappings":";;;;;;;;;;;;;;AAkCA,IAAM,WAAW,UACf,CAAC,EACC,MAAM,aACN,MAAM,eACN,MAAM,YACN,MAAM;AAKV,IAAM,iBAAiC,aACrC,UAAU,WAAW,oBAAC,KAAD,EAAG,GAAI,SAAW,CAAA,IAAI,oBAAC,OAAD,EAAK,GAAI,SAAW,CAAA;;;;;;;;;;AAWjE,IAAM,eACH,SAAyB,mBACzB,UAAU,gBACT,OACE;CACE,GAAG;CACH,iBAAiB;CACjB,UAAU,MAAkB;EAC1B,EAAE,eAAe;EACjB,EAAE,gBAAgB;CACpB;CACA,aAAa,KAAA;CACb,YAAY,MAAyD;EACnE,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;GACtC,EAAE,eAAe;GACjB,EAAE,gBAAgB;EACpB,OACE,SAAS,YAAY,CAAC;CAE1B;AACF,GACA,WACF;AAEJ,IAAM,uBAAuB,UAAyB;CACpD,IAAI,QAAQ,KAAK,GAAG;EAClB,QAAQ,EAAE,GAAG,MAAM;EACnB,MAAM,WAAW,KAAA;EACjB,MAAM,UAAU,KAAA;EAChB,MAAM,eAAe,KAAA;EACrB,MAAM,aAAa,KAAA;EACnB,MAAM,gBAAgB,KAAA;EACtB,MAAM,YAAY,KAAA;CACpB;CAEA,OAAO;AACT;;AAGA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,QAAQ,QAAQ,KAAK;CAC3B,QAAQ,oBAAoB,KAAK;CAEjC,MAAM,EACJ,UACA,WACA,kBACA,iBACA,IACA,KACA,iBAAiB,qBACjB,gBAAgB,aAChB,QACA,WACA,aACA,UACA,GAAG,SACD;;;;;;;;CASJ,MAAM,eACJ,eAAe,gBAAgB,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAEvE,MAAM,gBAAgB,KAAKA,wBAAO,UAAU,SAAS;CAErD,2BACE,YACI,cACA,cACE,gBACA,WACE,aACA,QACV;CAEA,MAAM,mBAAmB,cACvB,oBAAC,eAAD,EAAe,OAAM,UAAW,CAAA,IAC9B,WACF,oBAAC,YAAD,EAAY,OAAM,SAAU,CAAA,IAC1B,YACF,oBAAC,gBAAD,CAAiB,CAAA,IACf,KAAA;CAEJ,MAAM,YAAY,oBAChB,oBAAC,OAAD;EAAK,WAAWA,wBAAO;EAAY,UAAA;CAAsB,CAAA;CAG3D,OACE,8BAAC,KAAK,UAAN;EACE,GAAI;EACJ,GAAI;EACJ,QAAQ,QAAQ,YAAY,MAAM,IAAI;EACtC,KAAK;EACD;EACJ,WAAW;EACN;CAcQ,IAZX,UACA,qBAAAC,YAAA,EAAA,UAAA,CACE,oBAAC,iBAAD;EACE,GAAI;EACc;EACD;EAEhB;CACc,CAAA,GAChB,SACD,EAAA,CAAA,CAES;AAEnB,CAAC"}

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

@@ -1,11 +1,10 @@
 "use client"
 /* */
-//#region src/components/MenuItem/MenuItem.module.scss
+// src/components/MenuItem/MenuItem.module.scss
 var menuItem = "flow--menu-item";
 var icon = "flow--menu-item--icon";
 var checkMark = "flow--menu-item--check-mark";
 var controlIcon = "flow--menu-item--control-icon";
-var ariaDisabled = "flow--menu-item--aria-disabled";
 var avatar = "flow--menu-item--avatar";
 var stateIcon = "flow--menu-item--state-icon";
 var controlIconActive = "flow--menu-item--control-icon-active";
@@ -17,14 +16,12 @@ var MenuItem_module_default = {
 	icon,
 	checkMark,
 	controlIcon,
-	ariaDisabled,
 	avatar,
 	stateIcon,
 	controlIconActive,
 	kbd,
 	badge
 };
-//#endregion
-export { ariaDisabled, avatar, badge, checkMark, controlIcon, controlIconActive, MenuItem_module_default as default, icon, kbd, menuItem, stateIcon };
+export { avatar, badge, checkMark, controlIcon, controlIconActive, MenuItem_module_default as default, icon, kbd, menuItem, stateIcon };
 
 //# sourceMappingURL=MenuItem.module.mjs.map

package/dist/js/packages/components/src/components/MenuItem/components/MenuItemContent/MenuItemContent.mjs

@@ -10,7 +10,7 @@ import MenuItem_module_default from "../../MenuItem.module.mjs";
 import { Switch } from "../../../Switch/Switch.mjs";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/MenuItem/components/MenuItemContent/MenuItemContent.tsx
+// src/components/MenuItem/components/MenuItemContent/MenuItemContent.tsx
 var MenuItemContent = (props) => {
 	const { selectionMode, isSelected, selectionVariant = "control", isIndeterminate, children } = props;
 	const propsContext = {
@@ -37,7 +37,6 @@ var MenuItemContent = (props) => {
 		children
 	})] });
 };
-//#endregion
 export { MenuItemContent };
 
 //# sourceMappingURL=MenuItemContent.mjs.map

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

@@ -13,7 +13,7 @@ import clsx from "clsx";
 import "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
-//#region src/components/Message/Message.tsx
+// src/components/Message/Message.tsx
 /** @flr-generate all */
 var Message = flowComponent("Message", (props) => {
 	const { type = "responder", children, className, color, elementType = "article" } = props;
@@ -84,7 +84,6 @@ var Message = flowComponent("Message", (props) => {
 		})
 	});
 });
-//#endregion
 export { Message, Message as default };
 
 //# sourceMappingURL=Message.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/Message/Message.module.scss
+// src/components/Message/Message.module.scss
 var message = "flow--message";
 var content = "flow--message--content";
 var tip = "flow--message--tip";
@@ -29,7 +29,6 @@ var Message_module_default = {
 	date,
 	headerAction
 };
-//#endregion
 export { action, actionGroup, actionGroupAction, content, date, Message_module_default as default, header, headerAction, message, responder, sender, tip, tipBorder, user };
 
 //# sourceMappingURL=Message.module.mjs.map

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

@@ -6,14 +6,14 @@ import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
 import MessageThread_module_default from "./MessageThread.module.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/MessageThread/MessageThread.tsx
+// src/components/MessageThread/MessageThread.tsx
 /** @flr-generate all */
 var MessageThread = flowComponent("MessageThread", (props) => {
 	const { children, className } = props;
 	const rootClassName = clsx(MessageThread_module_default.messageThread, className);
 	const propsContext = { Message: {
 		className: dynamic((props) => {
-			return clsx(props.className, MessageThread_module_default.message, MessageThread_module_default[props.type ?? "responder"]);
+			return clsx(MessageThread_module_default.message, MessageThread_module_default[props.type ?? "responder"], props.className);
 		}),
 		elementType: "li"
 	} };
@@ -25,7 +25,6 @@ var MessageThread = flowComponent("MessageThread", (props) => {
 		})
 	});
 });
-//#endregion
 export { MessageThread, MessageThread as default };
 
 //# sourceMappingURL=MessageThread.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"MessageThread.mjs","names":["styles"],"sources":["../../../../../../../src/components/MessageThread/MessageThread.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./MessageThread.module.scss\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport type MessageThreadProps = PropsWithChildren &\n  PropsWithClassName &\n  FlowComponentProps;\n\n/** @flr-generate all */\nexport const MessageThread = flowComponent(\"MessageThread\", (props) => {\n  const { children, className } = props;\n\n  const rootClassName = clsx(styles.messageThread, className);\n\n  const propsContext: PropsContext = {\n    Message: {\n      className: dynamic((props) => {\n        return clsx(\n          props.className,\n          styles.message,\n          styles[props.type ?? \"responder\"],\n        );\n      }),\n      elementType: \"li\",\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <ul className={rootClassName}>{children}</ul>\n    </PropsContextProvider>\n  );\n});\n\nexport default MessageThread;\n"],"mappings":";;;;;;;;;;AAmBA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,gBAAgB,KAAKA,6BAAO,eAAe,SAAS;CAE1D,MAAM,eAA6B,EACjC,SAAS;EACP,WAAW,SAAS,UAAU;GAC5B,OAAO,KACL,MAAM,WACNA,6BAAO,SACPA,6BAAO,MAAM,QAAQ,YACvB;EACF,CAAC;EACD,aAAa;CACf,EACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,MAAD;GAAI,WAAW;GAAgB;EAAa,CAAA;CACxB,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"MessageThread.mjs","names":["styles"],"sources":["../../../../../../../src/components/MessageThread/MessageThread.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./MessageThread.module.scss\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport type MessageThreadProps = PropsWithChildren &\n  PropsWithClassName &\n  FlowComponentProps;\n\n/** @flr-generate all */\nexport const MessageThread = flowComponent(\"MessageThread\", (props) => {\n  const { children, className } = props;\n\n  const rootClassName = clsx(styles.messageThread, className);\n\n  const propsContext: PropsContext = {\n    Message: {\n      className: dynamic((props) => {\n        return clsx(\n          styles.message,\n          styles[props.type ?? \"responder\"],\n          props.className,\n        );\n      }),\n      elementType: \"li\",\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <ul className={rootClassName}>{children}</ul>\n    </PropsContextProvider>\n  );\n});\n\nexport default MessageThread;\n"],"mappings":";;;;;;;;;;AAmBA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,gBAAgB,KAAKA,6BAAO,eAAe,SAAS;CAE1D,MAAM,eAA6B,EACjC,SAAS;EACP,WAAW,SAAS,UAAU;GAC5B,OAAO,KACLA,6BAAO,SACPA,6BAAO,MAAM,QAAQ,cACrB,MAAM,SACR;EACF,CAAC;EACD,aAAa;CACf,EACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,MAAD;GAAI,WAAW;GAAgB;EAAa,CAAA;CACxB,CAAA;AAE1B,CAAC"}

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/MessageThread/MessageThread.module.scss
+// src/components/MessageThread/MessageThread.module.scss
 var messageThread = "flow--message-thread";
 var message = "flow--message-thread--message";
 var responder = "flow--message-thread--responder";
@@ -11,7 +11,6 @@ var MessageThread_module_default = {
 	responder,
 	sender
 };
-//#endregion
 export { MessageThread_module_default as default, message, messageThread, responder, sender };
 
 //# sourceMappingURL=MessageThread.module.mjs.map

package/dist/js/packages/components/src/components/MessageThread/components/MessageSeparator/MessageSeparator.mjs

@@ -8,7 +8,7 @@ import __locale_default from "../../../../../../../_virtual/_28.locale.mjs";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
-//#region src/components/MessageThread/components/MessageSeparator/MessageSeparator.tsx
+// src/components/MessageThread/components/MessageSeparator/MessageSeparator.tsx
 /** @flr-generate all */
 var MessageSeparator = (props) => {
 	const { children, className } = props;
@@ -26,7 +26,6 @@ var MessageSeparator = (props) => {
 		]
 	});
 };
-//#endregion
 export { MessageSeparator, MessageSeparator as default };
 
 //# sourceMappingURL=MessageSeparator.mjs.map

package/dist/js/packages/components/src/components/MessageThread/components/MessageSeparator/MessageSeparator.module.mjs

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/MessageThread/components/MessageSeparator/MessageSeparator.module.scss
+// src/components/MessageThread/components/MessageSeparator/MessageSeparator.module.scss
 var messageSeparator = "flow--message-thread--message-separator";
 var separator = "flow--message-thread--message-separator--separator";
 var content = "flow--message-thread--message-separator--content";
@@ -9,7 +9,6 @@ var MessageSeparator_module_default = {
 	separator,
 	content
 };
-//#endregion
 export { content, MessageSeparator_module_default as default, messageSeparator, separator };
 
 //# sourceMappingURL=MessageSeparator.module.mjs.map

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

@@ -8,7 +8,9 @@ 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 useSelector from "../../lib/mobx/useSelector.mjs";
 import { OverlayController } from "../../lib/controller/overlay/OverlayController.mjs";
+import { useOverlayContext } from "../../lib/controller/overlay/context.mjs";
 import { Action } from "../Action/Action.mjs";
 import ButtonView from "../../views/ButtonView.mjs";
 import DivView from "../../views/DivView.mjs";
@@ -21,13 +23,18 @@ import { useVirtualKeyboardVisible } from "../../lib/hooks/dom/useVirtualKeyboar
 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
+// 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 controllerFromContext = useOverlayContext().byType.Modal;
+	const knownController = controller ?? controllerFromContext;
+	const isOpenFromController = useSelector(() => knownController?.isOpen ?? true, [knownController]);
+	const isOpen = overlayProps.isOpen ?? isOpenFromController;
+	const keyboardVisible = useVirtualKeyboardVisible(isOpen);
 	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 closeButtonClassName = clsx(Modal_module_default.closeButton, showCloseButton === true && Modal_module_default.alwaysVisible, showCloseButton === false && Modal_module_default.alwaysHidden);
 	const header = (children) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DivView, {
 		className: Modal_module_default.headerTitle,
 		children
@@ -37,7 +44,7 @@ var Modal = flowComponent("Modal", (props) => {
 			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),
+			className: closeButtonClassName,
 			children: /* @__PURE__ */ jsx(IconClose, {})
 		})
 	}) }) })] });
@@ -119,7 +126,6 @@ var Modal = flowComponent("Modal", (props) => {
 		}), /* @__PURE__ */ jsx(ConfirmUnsavedChangesModal, {})]
 	});
 });
-//#endregion
 export { Modal, Modal as default };
 
 //# sourceMappingURL=Modal.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","names":["locales","styles","_Fragment"],"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 DivView from \"@/views/DivView\";\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 ClearPropsContextView from \"@/views/ClearPropsContextView\";\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. `false` does not switch off the confirmation of a dirty `Form`\n   * inside the modal; set `confirmModalCloseOnUnsavedChanges={false}` on the\n   * `Form` for that.\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      <DivView className={styles.headerTitle}>{children}</DivView>\n      <ClearPropsContext>\n        <ClearPropsContextView>\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        </ClearPropsContextView>\n      </ClearPropsContext>\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          const { closeOverlay } = props;\n          if (closeOverlay === undefined || closeOverlay === false) {\n            return closeOverlay;\n          }\n          // `true` keeps its \"the nearest overlay\" meaning by leaving `overlay`\n          // unset – the options object means the same thing.\n          if (closeOverlay === true) {\n            return { bypassConfirmation: true };\n          }\n          if (\n            closeOverlay instanceof OverlayController ||\n            typeof closeOverlay === \"string\"\n          ) {\n            return {\n              bypassConfirmation: true,\n              overlay: closeOverlay,\n            };\n          }\n          return {\n            bypassConfirmation: true,\n            ...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":"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"}
+{"version":3,"file":"Modal.mjs","names":["locales","styles","_Fragment"],"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 { useOverlayContext } from \"@/lib/controller/overlay/context\";\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 DivView from \"@/views/DivView\";\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 ClearPropsContextView from \"@/views/ClearPropsContextView\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { useVirtualKeyboardVisible } from \"@/lib/hooks/dom/useVirtualKeyboardVisible\";\nimport useSelector from \"@/lib/mobx/useSelector\";\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. `false` does not switch off the confirmation of a dirty `Form`\n   * inside the modal; set `confirmModalCloseOnUnsavedChanges={false}` on the\n   * `Form` for that.\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  // The controller `Overlay` will use, if it exists yet: from props or from a\n  // trigger. Without one (a standalone Modal) `Overlay` creates its own, and\n  // the keyboard is tracked whether the modal is open or not.\n  const controllerFromContext = useOverlayContext().byType.Modal;\n  const knownController = controller ?? controllerFromContext;\n  const isOpenFromController = useSelector(\n    () => knownController?.isOpen ?? true,\n    [knownController],\n  );\n  const isOpen = overlayProps.isOpen ?? isOpenFromController;\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(isOpen);\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 closeButtonClassName = clsx(\n    styles.closeButton,\n    showCloseButton === true && styles.alwaysVisible,\n    showCloseButton === false && styles.alwaysHidden,\n  );\n\n  const header = (children: ReactNode) => (\n    <>\n      <DivView className={styles.headerTitle}>{children}</DivView>\n      <ClearPropsContext>\n        <ClearPropsContextView>\n          <Action closeModal={{ bypassConfirmation: true }}>\n            <ButtonView\n              variant=\"plain\"\n              color=\"secondary\"\n              aria-label={stringFormatter.format(\"close\")}\n              className={closeButtonClassName}\n            >\n              <IconClose />\n            </ButtonView>\n          </Action>\n        </ClearPropsContextView>\n      </ClearPropsContext>\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          const { closeOverlay } = props;\n          if (closeOverlay === undefined || closeOverlay === false) {\n            return closeOverlay;\n          }\n          // `true` keeps its \"the nearest overlay\" meaning by leaving `overlay`\n          // unset – the options object means the same thing.\n          if (closeOverlay === true) {\n            return { bypassConfirmation: true };\n          }\n          if (\n            closeOverlay instanceof OverlayController ||\n            typeof closeOverlay === \"string\"\n          ) {\n            return {\n              bypassConfirmation: true,\n              overlay: closeOverlay,\n            };\n          }\n          return {\n            bypassConfirmation: true,\n            ...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":"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"}

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/Modal/Modal.module.scss
+// src/components/Modal/Modal.module.scss
 var modal = "flow--modal";
 var offCanvas = "flow--modal--off-canvas";
 var actionGroup = "flow--modal--action-group";
@@ -38,7 +38,6 @@ var Modal_module_default = {
 	"modal-slide-up": "flow--modal--modal-slide-up",
 	keyboardVisible
 };
-//#endregion
 export { accentBox, actionGroup, alwaysHidden, alwaysVisible, closeButton, columnLayout, content, Modal_module_default as default, header, headerTitle, keyboardVisible, left, modal, offCanvas };
 
 //# sourceMappingURL=Modal.module.mjs.map

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

@@ -11,7 +11,7 @@ import ActionGroupView from "../../../../views/ActionGroupView.mjs";
 import __locale_default from "../../../../../../../_virtual/_24.locale.mjs";
 import { Modal } from "../../Modal.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/Modal/components/ConfirmUnsavedChangesModal/ConfirmUnsavedChangesModal.tsx
+// 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`.
@@ -49,7 +49,6 @@ var ConfirmUnsavedChangesModal = () => {
 		});
 	}
 };
-//#endregion
 export { ConfirmUnsavedChangesModal, ConfirmUnsavedChangesModal as default };
 
 //# sourceMappingURL=ConfirmUnsavedChangesModal.mjs.map

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

@@ -4,7 +4,7 @@ import { flowComponent } from "../../../../lib/componentFactory/flowComponent.mj
 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
+// src/components/Modal/components/ModalTrigger/ModalTrigger.tsx
 var ModalTrigger = flowComponent("ModalTrigger", (props) => {
 	const { children, ...triggerProps } = props;
 	return /* @__PURE__ */ jsx(OverlayTrigger, {
@@ -14,7 +14,6 @@ var ModalTrigger = flowComponent("ModalTrigger", (props) => {
 		children
 	});
 }, { type: "provider" });
-//#endregion
 export { ModalTrigger, ModalTrigger as default };
 
 //# sourceMappingURL=ModalTrigger.mjs.map

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

@@ -4,7 +4,7 @@ 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
+// src/components/Modal/components/OffCanvasSuspenseFallback/OffCanvasSuspenseFallback.tsx
 var OffCanvasSuspenseFallback = () => {
 	useAriaAnnounceSuspense();
 	return /* @__PURE__ */ jsx(FlexView, {
@@ -14,7 +14,6 @@ var OffCanvasSuspenseFallback = () => {
 		children: /* @__PURE__ */ jsx(LoadingSpinnerView, {})
 	});
 };
-//#endregion
 export { OffCanvasSuspenseFallback };
 
 //# sourceMappingURL=OffCanvasSuspenseFallback.mjs.map

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

@@ -10,7 +10,7 @@ import { LinkListTunnelExit } from "./components/LinkListTunnelExit/LinkListTunn
 import clsx from "clsx";
 import { Children } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/Navigation/Navigation.tsx
+// src/components/Navigation/Navigation.tsx
 /**
 * A bare text node is an anonymous flex item that no rule can reach, so give
 * the label an element the item can truncate.
@@ -62,7 +62,6 @@ var Navigation = flowComponent("Navigation", (props) => {
 		})
 	});
 });
-//#endregion
 export { Navigation, Navigation as default };
 
 //# sourceMappingURL=Navigation.mjs.map