@mittwald/flow-react-components 1.3.0-next.9 → 1.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"FileDropZone.mjs","names":[],"sources":["../../../../../../../src/components/FileDropZone/FileDropZone.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useRef } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./FileDropZone.module.scss\";\nimport clsx from \"clsx\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { DropEvent, FocusableElement } from \"@react-types/shared\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface FileDropZoneProps\n  extends\n    PropsWithClassName,\n    FlowComponentProps<FocusableElement>,\n    PropsWithChildren,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<Aria.DropZoneProps, \"isDisabled\"> {\n  /** Called with the dropped or selected files whenever the selection changes. */\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileDropZone: FC<FileDropZoneProps> = flowComponent(\n  \"FileDropZone\",\n  (props) => {\n    const {\n      multiple,\n      accept,\n      className,\n      onChange: onChangeDropZone,\n      children,\n      name,\n      isDisabled,\n      isReadOnly,\n    } = props;\n\n    const {\n      FieldErrorView,\n      FieldErrorCaptureContext,\n      fieldProps,\n      fieldPropsContext,\n    } = useFieldComponent(props, \"FileDropZone\");\n\n    const fileFieldRef = useRef<HTMLInputElement>(null);\n    const rootClassName = clsx(\n      styles.fileDropZone,\n      isDisabled && styles.disabled,\n      className,\n    );\n\n    const propsContext: PropsContext = {\n      ...fieldPropsContext,\n      IllustratedMessage: {\n        FileField: {\n          name,\n          onChange: onChangeDropZone,\n          ref: fileFieldRef,\n          accept: accept,\n          multiple: multiple,\n          Button: { variant: \"outline\", color: \"dark\" },\n          isDisabled,\n          isReadOnly,\n        },\n        Heading: {\n          className: styles.heading,\n        },\n        Icon: { className: styles.icon },\n        Text: { className: styles.text },\n      },\n    };\n\n    const onDropHandler = async (event: DropEvent) => {\n      if (isReadOnly) {\n        return;\n      }\n\n      const fileDropItems = event.items.filter(\n        (file) => file.kind === \"file\",\n      ) as Aria.FileDropItem[];\n\n      const files = await Promise.all(\n        fileDropItems\n          .filter((f) => !accept || accept?.includes(f.type))\n          .map(async (f) => await f.getFile()),\n      );\n\n      if (files.length > 0) {\n        const fileTransfer = new DataTransfer();\n        for (const file of multiple ? files : [files[0]]) {\n          if (file) {\n            fileTransfer.items.add(file);\n          }\n        }\n\n        onChangeDropZone?.(fileTransfer.files);\n        if (fileFieldRef.current) {\n          fileFieldRef.current.files = fileTransfer.files;\n        }\n      }\n    };\n\n    return (\n      <div {...fieldProps}>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider props={propsContext}>\n            <Aria.DropZone\n              className={rootClassName}\n              onDrop={onDropHandler}\n              isDisabled={isDisabled}\n              data-readonly={isReadOnly}\n            >\n              <IllustratedMessage color=\"dark\">{children}</IllustratedMessage>\n            </Aria.DropZone>\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </div>\n    );\n  },\n);\n\nexport default FileDropZone;\n"],"mappings":";;;;;;;;;;;;;AA8BA,IAAa,eAAsC,cACjD,iBACC,UAAU;CACT,MAAM,EACJ,UACA,QACA,WACA,UAAU,kBACV,UACA,MACA,YACA,eACE;CAEJ,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,cAAc;CAE3C,MAAM,eAAe,OAAyB,IAAI;CAClD,MAAM,gBAAgB,KACpB,4BAAO,cACP,cAAc,4BAAO,UACrB,SACF;CAEA,MAAM,eAA6B;EACjC,GAAG;EACH,oBAAoB;GAClB,WAAW;IACT;IACA,UAAU;IACV,KAAK;IACG;IACE;IACV,QAAQ;KAAE,SAAS;KAAW,OAAO;IAAO;IAC5C;IACA;GACF;GACA,SAAS,EACP,WAAW,4BAAO,QACpB;GACA,MAAM,EAAE,WAAW,4BAAO,KAAK;GAC/B,MAAM,EAAE,WAAW,4BAAO,KAAK;EACjC;CACF;CAEA,MAAM,gBAAgB,OAAO,UAAqB;EAChD,IAAI,YACF;EAGF,MAAM,gBAAgB,MAAM,MAAM,QAC/B,SAAS,KAAK,SAAS,MAC1B;EAEA,MAAM,QAAQ,MAAM,QAAQ,IAC1B,cACG,QAAQ,MAAM,CAAC,UAAU,QAAQ,SAAS,EAAE,IAAI,CAAC,CAAC,CAClD,IAAI,OAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,CACvC;EAEA,IAAI,MAAM,SAAS,GAAG;GACpB,MAAM,eAAe,IAAI,aAAa;GACtC,KAAK,MAAM,QAAQ,WAAW,QAAQ,CAAC,MAAM,EAAE,GAC7C,IAAI,MACF,aAAa,MAAM,IAAI,IAAI;GAI/B,mBAAmB,aAAa,KAAK;GACrC,IAAI,aAAa,SACf,aAAa,QAAQ,QAAQ,aAAa;EAE9C;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,GAAI;EAAT,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,KAAK,UAAN;IACE,WAAW;IACX,QAAQ;IACI;IACZ,iBAAe;IAEf,UAAA,oBAAC,oBAAD;KAAoB,OAAM;KAAQ;IAA6B,CAAA;GAClD,CAAA;EACK,CAAA,EACE,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CACF"}
+{"version":3,"file":"FileDropZone.mjs","names":[],"sources":["../../../../../../../src/components/FileDropZone/FileDropZone.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useRef } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./FileDropZone.module.scss\";\nimport clsx from \"clsx\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { DropEvent, FocusableElement } from \"@react-types/shared\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { getAcceptedFiles } from \"@/lib/files/acceptedFiles\";\n\nexport interface FileDropZoneProps\n  extends\n    PropsWithClassName,\n    FlowComponentProps<FocusableElement>,\n    PropsWithChildren,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<Aria.DropZoneProps, \"isDisabled\"> {\n  /** Called with the dropped or selected files whenever the selection changes. */\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileDropZone: FC<FileDropZoneProps> = flowComponent(\n  \"FileDropZone\",\n  (props) => {\n    const {\n      multiple,\n      accept,\n      className,\n      onChange: onChangeDropZone,\n      children,\n      name,\n      isDisabled,\n      isReadOnly,\n    } = props;\n\n    const {\n      FieldErrorView,\n      FieldErrorCaptureContext,\n      fieldProps,\n      fieldPropsContext,\n    } = useFieldComponent(props, \"FileDropZone\");\n\n    const fileFieldRef = useRef<HTMLInputElement>(null);\n    const rootClassName = clsx(\n      styles.fileDropZone,\n      isDisabled && styles.disabled,\n      className,\n    );\n\n    const propsContext: PropsContext = {\n      ...fieldPropsContext,\n      IllustratedMessage: {\n        FileField: {\n          name,\n          onChange: onChangeDropZone,\n          ref: fileFieldRef,\n          accept: accept,\n          multiple: multiple,\n          Button: { variant: \"outline\", color: \"dark\" },\n          isDisabled,\n          isReadOnly,\n        },\n        Heading: {\n          className: styles.heading,\n        },\n        Icon: { className: styles.icon },\n        Text: { className: styles.text },\n      },\n    };\n\n    const onDropHandler = async (event: DropEvent) => {\n      if (isReadOnly) {\n        return;\n      }\n\n      const files = await getAcceptedFiles(event.items, accept);\n\n      if (files.length > 0) {\n        const fileTransfer = new DataTransfer();\n        for (const file of multiple ? files : [files[0]]) {\n          if (file) {\n            fileTransfer.items.add(file);\n          }\n        }\n\n        onChangeDropZone?.(fileTransfer.files);\n        if (fileFieldRef.current) {\n          fileFieldRef.current.files = fileTransfer.files;\n        }\n      }\n    };\n\n    return (\n      <div {...fieldProps}>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider props={propsContext}>\n            <Aria.DropZone\n              className={rootClassName}\n              onDrop={onDropHandler}\n              isDisabled={isDisabled}\n              data-readonly={isReadOnly}\n            >\n              <IllustratedMessage color=\"dark\">{children}</IllustratedMessage>\n            </Aria.DropZone>\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </div>\n    );\n  },\n);\n\nexport default FileDropZone;\n"],"mappings":";;;;;;;;;;;;;;AA+BA,IAAa,eAAsC,cACjD,iBACC,UAAU;CACT,MAAM,EACJ,UACA,QACA,WACA,UAAU,kBACV,UACA,MACA,YACA,eACE;CAEJ,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,cAAc;CAE3C,MAAM,eAAe,OAAyB,IAAI;CAClD,MAAM,gBAAgB,KACpB,4BAAO,cACP,cAAc,4BAAO,UACrB,SACF;CAEA,MAAM,eAA6B;EACjC,GAAG;EACH,oBAAoB;GAClB,WAAW;IACT;IACA,UAAU;IACV,KAAK;IACG;IACE;IACV,QAAQ;KAAE,SAAS;KAAW,OAAO;IAAO;IAC5C;IACA;GACF;GACA,SAAS,EACP,WAAW,4BAAO,QACpB;GACA,MAAM,EAAE,WAAW,4BAAO,KAAK;GAC/B,MAAM,EAAE,WAAW,4BAAO,KAAK;EACjC;CACF;CAEA,MAAM,gBAAgB,OAAO,UAAqB;EAChD,IAAI,YACF;EAGF,MAAM,QAAQ,MAAM,iBAAiB,MAAM,OAAO,MAAM;EAExD,IAAI,MAAM,SAAS,GAAG;GACpB,MAAM,eAAe,IAAI,aAAa;GACtC,KAAK,MAAM,QAAQ,WAAW,QAAQ,CAAC,MAAM,EAAE,GAC7C,IAAI,MACF,aAAa,MAAM,IAAI,IAAI;GAI/B,mBAAmB,aAAa,KAAK;GACrC,IAAI,aAAa,SACf,aAAa,QAAQ,QAAQ,aAAa;EAE9C;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,GAAI;EAAT,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,KAAK,UAAN;IACE,WAAW;IACX,QAAQ;IACI;IACZ,iBAAe;IAEf,UAAA,oBAAC,oBAAD;KAAoB,OAAM;KAAQ;IAA6B,CAAA;GAClD,CAAA;EACK,CAAA,EACE,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CACF"}

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

@@ -14,7 +14,7 @@ var HeaderNavigation = (props) => {
 	const rootClassName = clsx(HeaderNavigation_module_default.headerNavigation, isAlphaColor(color) && HeaderNavigation_module_default[color], className);
 	const propsContext = {
 		Link: {
-			wrapWith: /* @__PURE__ */ jsx("li", {}),
+			wrapWith: /* @__PURE__ */ jsx("li", { className: HeaderNavigation_module_default.item }),
 			className: HeaderNavigation_module_default.link,
 			unstyled: true,
 			children: dynamic((props) => /* @__PURE__ */ jsx(Text, {
@@ -26,17 +26,20 @@ var HeaderNavigation = (props) => {
 			className: HeaderNavigation_module_default.button,
 			color: isAlphaColor(color) ? color : "secondary",
 			variant: "plain",
-			wrapWith: /* @__PURE__ */ jsx("li", {})
+			wrapWith: /* @__PURE__ */ jsx("li", { className: HeaderNavigation_module_default.item })
 		}
 	};
 	return /* @__PURE__ */ jsx("nav", {
 		className: rootClassName,
 		role: "navigation",
 		...rest,
-		children: /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(PropsContextProvider, {
-			props: propsContext,
-			children
-		}) })
+		children: /* @__PURE__ */ jsx("ul", {
+			className: HeaderNavigation_module_default.list,
+			children: /* @__PURE__ */ jsx(PropsContextProvider, {
+				props: propsContext,
+				children
+			})
+		})
 	});
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderNavigation.mjs","names":[],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./HeaderNavigation.module.scss\";\nimport {\n  type AlphaColor,\n  isAlphaColor,\n  type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { Text } from \"@/components/Text\";\n\nexport interface HeaderNavigationProps\n  extends PropsWithChildren<ComponentProps<\"nav\">>, PropsWithClassName {\n  /** The color of the header navigation. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const HeaderNavigation: FC<HeaderNavigationProps> = (props) => {\n  const { children, className, color = \"default\", ...rest } = props;\n\n  const rootClassName = clsx(\n    styles.headerNavigation,\n    isAlphaColor(color) && styles[color],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Link: {\n      wrapWith: <li />,\n      className: styles.link,\n      unstyled: true,\n      children: dynamic((props) => (\n        <Text emulateBoldWidth>{props.children}</Text>\n      )),\n    },\n    Button: {\n      className: styles.button,\n      color: isAlphaColor(color) ? color : \"secondary\",\n      variant: \"plain\",\n      wrapWith: <li />,\n    },\n  };\n\n  return (\n    <nav className={rootClassName} role=\"navigation\" {...rest}>\n      <ul>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </ul>\n    </nav>\n  );\n};\n\nexport default HeaderNavigation;\n"],"mappings":";;;;;;;;;;;AAsBA,IAAa,oBAA+C,UAAU;CACpE,MAAM,EAAE,UAAU,WAAW,QAAQ,WAAW,GAAG,SAAS;CAE5D,MAAM,gBAAgB,KACpB,gCAAO,kBACP,aAAa,KAAK,KAAK,gCAAO,QAC9B,SACF;CAEA,MAAM,eAA6B;EACjC,MAAM;GACJ,UAAU,oBAAC,MAAD,CAAK,CAAA;GACf,WAAW,gCAAO;GAClB,UAAU;GACV,UAAU,SAAS,UACjB,oBAAC,MAAD;IAAM,kBAAA;IAAkB,UAAA,MAAM;GAAe,CAAA,CAC9C;EACH;EACA,QAAQ;GACN,WAAW,gCAAO;GAClB,OAAO,aAAa,KAAK,IAAI,QAAQ;GACrC,SAAS;GACT,UAAU,oBAAC,MAAD,CAAK,CAAA;EACjB;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAa,GAAI;EACnD,UAAA,oBAAC,MAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA,EACpB,CAAA;CACD,CAAA;AAET"}
+{"version":3,"file":"HeaderNavigation.mjs","names":[],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./HeaderNavigation.module.scss\";\nimport {\n  type AlphaColor,\n  isAlphaColor,\n  type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { Text } from \"@/components/Text\";\n\nexport interface HeaderNavigationProps\n  extends PropsWithChildren<ComponentProps<\"nav\">>, PropsWithClassName {\n  /** The color of the header navigation. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const HeaderNavigation: FC<HeaderNavigationProps> = (props) => {\n  const { children, className, color = \"default\", ...rest } = props;\n\n  const rootClassName = clsx(\n    styles.headerNavigation,\n    isAlphaColor(color) && styles[color],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Link: {\n      wrapWith: <li className={styles.item} />,\n      className: styles.link,\n      unstyled: true,\n      children: dynamic((props) => (\n        <Text emulateBoldWidth>{props.children}</Text>\n      )),\n    },\n    Button: {\n      className: styles.button,\n      color: isAlphaColor(color) ? color : \"secondary\",\n      variant: \"plain\",\n      wrapWith: <li className={styles.item} />,\n    },\n  };\n\n  return (\n    <nav className={rootClassName} role=\"navigation\" {...rest}>\n      <ul className={styles.list}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </ul>\n    </nav>\n  );\n};\n\nexport default HeaderNavigation;\n"],"mappings":";;;;;;;;;;;AAsBA,IAAa,oBAA+C,UAAU;CACpE,MAAM,EAAE,UAAU,WAAW,QAAQ,WAAW,GAAG,SAAS;CAE5D,MAAM,gBAAgB,KACpB,gCAAO,kBACP,aAAa,KAAK,KAAK,gCAAO,QAC9B,SACF;CAEA,MAAM,eAA6B;EACjC,MAAM;GACJ,UAAU,oBAAC,MAAD,EAAI,WAAW,gCAAO,KAAO,CAAA;GACvC,WAAW,gCAAO;GAClB,UAAU;GACV,UAAU,SAAS,UACjB,oBAAC,MAAD;IAAM,kBAAA;IAAkB,UAAA,MAAM;GAAe,CAAA,CAC9C;EACH;EACA,QAAQ;GACN,WAAW,gCAAO;GAClB,OAAO,aAAa,KAAK,IAAI,QAAQ;GACrC,SAAS;GACT,UAAU,oBAAC,MAAD,EAAI,WAAW,gCAAO,KAAO,CAAA;EACzC;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAa,GAAI;EACnD,UAAA,oBAAC,MAAD;GAAI,WAAW,gCAAO;GACpB,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACpB,CAAA;CACD,CAAA;AAET"}

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

@@ -2,12 +2,16 @@
 /* */
 //#region src/components/HeaderNavigation/HeaderNavigation.module.scss
 var headerNavigation = "flow--header-navigation";
+var list = "flow--header-navigation--list";
+var item = "flow--header-navigation--item";
 var link = "flow--header-navigation--link";
 var button = "flow--header-navigation--button";
 var dark = "flow--header-navigation--dark";
 var light = "flow--header-navigation--light";
 var HeaderNavigation_module_default = {
 	headerNavigation,
+	list,
+	item,
 	link,
 	button,
 	dark,
@@ -16,6 +20,6 @@ var HeaderNavigation_module_default = {
 	"light-static": "flow--header-navigation--light-static"
 };
 //#endregion
-export { button, dark, HeaderNavigation_module_default as default, headerNavigation, light, link };
+export { button, dark, HeaderNavigation_module_default as default, headerNavigation, item, light, link, list };
 
 //# sourceMappingURL=HeaderNavigation.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderNavigation.module.mjs","names":[],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.headerNavigation {\n  ul {\n    display: flex;\n    flex-flow: row wrap;\n    align-items: center;\n    gap: var(--header-navigation--spacing);\n  }\n\n  li {\n    list-style: none;\n  }\n\n  .link {\n    padding: var(--header-navigation--padding);\n    border-radius: var(--header-navigation--corner-radius);\n    color: var(--header-navigation--color);\n    position: relative;\n\n    @include focus.focus;\n\n    &:hover:not([aria-current]) {\n      background-color: var(--header-navigation--background-color--hover);\n    }\n\n    &[data-pressed]:not([aria-current]) {\n      background-color: var(--header-navigation--background-color--pressed);\n    }\n\n    &[aria-current] {\n      font-weight: var(--header-navigation--font-weight-current);\n\n      &::after {\n        content: \"\";\n        position: absolute;\n        bottom: 0;\n        inset-inline: 0;\n        background-color: var(--header-navigation--color);\n        height: var(--header-navigation--underline-width-current);\n      }\n    }\n  }\n\n  .button {\n    color: var(--header-navigation--color);\n    border-radius: var(--header-navigation--corner-radius-round);\n\n    &:hover,\n    &[data-pressed] {\n      color: var(--header-navigation--color);\n    }\n  }\n\n  /* Color */\n\n  @mixin color($color) {\n    &.#{$color} {\n      .link,\n      .button {\n        color: var(--header-navigation--color-#{$color});\n\n        &:hover:not([aria-current]) {\n          background-color: var(\n            --header-navigation--background-color-#{$color}--hover\n          );\n        }\n\n        &[data-pressed]:not([aria-current]) {\n          background-color: var(\n            --header-navigation--background-color-#{$color}--pressed\n          );\n        }\n\n        &[aria-current] {\n          &::after {\n            background-color: var(--header-navigation--color-#{$color});\n          }\n        }\n      }\n    }\n  }\n\n  @include color(dark);\n  @include color(light);\n  @include color(dark-static);\n  @include color(light-static);\n}\n"],"mappings":""}
+{"version":3,"file":"HeaderNavigation.module.mjs","names":[],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.headerNavigation {\n  .list {\n    display: flex;\n    flex-flow: row wrap;\n    align-items: center;\n    gap: var(--header-navigation--spacing);\n  }\n\n  .item {\n    list-style: none;\n  }\n\n  .link {\n    padding: var(--header-navigation--padding);\n    border-radius: var(--header-navigation--corner-radius);\n    color: var(--header-navigation--color);\n    position: relative;\n\n    @include focus.focus;\n\n    &:hover:not([aria-current]) {\n      background-color: var(--header-navigation--background-color--hover);\n    }\n\n    &[data-pressed]:not([aria-current]) {\n      background-color: var(--header-navigation--background-color--pressed);\n    }\n\n    &[aria-current] {\n      font-weight: var(--header-navigation--font-weight-current);\n\n      &::after {\n        content: \"\";\n        position: absolute;\n        bottom: 0;\n        inset-inline: 0;\n        background-color: var(--header-navigation--color);\n        height: var(--header-navigation--underline-width-current);\n      }\n    }\n  }\n\n  .button {\n    color: var(--header-navigation--color);\n    border-radius: var(--header-navigation--corner-radius-round);\n\n    &:hover,\n    &[data-pressed] {\n      color: var(--header-navigation--color);\n    }\n  }\n\n  /* Color */\n\n  @mixin color($color) {\n    &.#{$color} {\n      .link,\n      .button {\n        color: var(--header-navigation--color-#{$color});\n\n        &:hover:not([aria-current]) {\n          background-color: var(\n            --header-navigation--background-color-#{$color}--hover\n          );\n        }\n\n        &[data-pressed]:not([aria-current]) {\n          background-color: var(\n            --header-navigation--background-color-#{$color}--pressed\n          );\n        }\n\n        &[aria-current] {\n          &::after {\n            background-color: var(--header-navigation--color-#{$color});\n          }\n        }\n      }\n    }\n  }\n\n  @include color(dark);\n  @include color(light);\n  @include color(dark-static);\n  @include color(light-static);\n}\n"],"mappings":""}

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

@@ -22,7 +22,7 @@ var sizeByLevel = {
 /** @flr-generate all */
 var Heading = flowComponent("Heading", (props) => {
 	const { children, className, level = 2, color = "default", wrap, size, ref, elementType, ...rest } = props;
-	const rootClassName = clsx(Heading_module_default.heading, size && Heading_module_default[`size-${size}`], color !== "default" && Heading_module_default[color], wrap && Heading_module_default[`wrap-${wrap}`], elementType && styleClassname(Heading_module_default, `h${level}`), className);
+	const rootClassName = clsx(Heading_module_default.heading, size && Heading_module_default[`size-${size}`], color !== "default" && Heading_module_default[color], wrap && Heading_module_default[`wrap-${wrap}`], styleClassname(Heading_module_default, `h${level}`), className);
 	const Element = elementType ?? Aria.Heading;
 	const effectiveSize = size ?? sizeByLevel[level] ?? "xs";
 	const buttonSize = effectiveSize === "xl" || effectiveSize === "xxl" ? "m" : "s";

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

@@ -1 +1 @@
-{"version":3,"file":"Heading.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import type { AlphaColor, PropsWithElementType } from \"@/lib/types/props\";\nimport styles from \"./Heading.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface HeadingProps\n  extends\n    Aria.HeadingProps,\n    FlowComponentProps,\n    PropsWithElementType<\"span\" | \"p\"> {\n  /** The font size of the heading. */\n  size?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\";\n  /** The color of the heading. @default \"default\" */\n  color?: \"default\" | \"danger\" | \"unavailable\" | AlphaColor;\n  /** The text-wrap property of the text. @default undefined */\n  wrap?: \"wrap\" | \"balance\";\n}\n\n/**\n * The font size each heading level renders at — the TypeScript half of the\n * level-based `--font-size` rules in Heading.module.scss. Levels 4 to 6 fall\n * through to the `xs` default.\n */\nconst sizeByLevel: Record<number, NonNullable<HeadingProps[\"size\"]>> = {\n  1: \"xl\",\n  2: \"m\",\n  3: \"s\",\n};\n\n/** @flr-generate all */\nexport const Heading = flowComponent(\"Heading\", (props) => {\n  const {\n    children,\n    className,\n    level = 2,\n    color = \"default\",\n    wrap,\n    size,\n    ref,\n    elementType,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.heading,\n    size && styles[`size-${size}`],\n    color !== \"default\" && styles[color],\n    wrap && styles[`wrap-${wrap}`],\n    elementType && styleClassname(styles, `h${level}`),\n    className,\n  );\n\n  const Element = elementType ?? Aria.Heading;\n\n  const effectiveSize = size ?? sizeByLevel[level] ?? \"xs\";\n  const buttonSize =\n    effectiveSize === \"xl\" || effectiveSize === \"xxl\" ? \"m\" : \"s\";\n\n  const propsContext: PropsContext = {\n    Icon: {\n      \"aria-hidden\": true,\n      className: styles.icon,\n    },\n    AlertBadge: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n    },\n    Badge: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n    },\n    Button: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      size: buttonSize,\n    },\n    CopyButton: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      size: buttonSize,\n    },\n    ContextualHelpTrigger: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      Button: {\n        tunnel: null,\n      },\n    },\n    AlertText: {\n      Icon: {\n        className: styles.icon,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <Element className={rootClassName} {...rest} ref={ref} level={level}>\n        <span className={styles.headingText}>{children}</span>\n        <span className={styles.headingContent}>\n          <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\" />\n        </span>\n      </Element>\n    </PropsContextProvider>\n  );\n});\n\nexport default Heading;\n"],"mappings":";;;;;;;;;;;;;;;;AA6BA,IAAM,cAAiE;CACrE,GAAG;CACH,GAAG;CACH,GAAG;AACL;;AAGA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,UACA,WACA,QAAQ,GACR,QAAQ,WACR,MACA,MACA,KACA,aACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,uBAAO,SACP,QAAQ,uBAAO,QAAQ,SACvB,UAAU,aAAa,uBAAO,QAC9B,QAAQ,uBAAO,QAAQ,SACvB,eAAe,eAAe,wBAAQ,IAAI,OAAO,GACjD,SACF;CAEA,MAAM,UAAU,eAAe,KAAK;CAEpC,MAAM,gBAAgB,QAAQ,YAAY,UAAU;CACpD,MAAM,aACJ,kBAAkB,QAAQ,kBAAkB,QAAQ,MAAM;CAE5D,MAAM,eAA6B;EACjC,MAAM;GACJ,eAAe;GACf,WAAW,uBAAO;EACpB;EACA,YAAY,EACV,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,OAAO,EACL,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,QAAQ;GACN,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,YAAY;GACV,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,uBAAuB;GACrB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,QAAQ,EACN,QAAQ,KACV;EACF;EACA,WAAW,EACT,MAAM,EACJ,WAAW,uBAAO,KACpB,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,SAAD;GAAS,WAAW;GAAe,GAAI;GAAW;GAAY;GAA9D,UAAA,CACE,oBAAC,QAAD;IAAM,WAAW,uBAAO;IAAc;GAAe,CAAA,GACrD,oBAAC,QAAD;IAAM,WAAW,uBAAO;IACtB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;IAAW,CAAA;GAC5D,CAAA,CACC;;CACW,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"Heading.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import type { AlphaColor, PropsWithElementType } from \"@/lib/types/props\";\nimport styles from \"./Heading.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface HeadingProps\n  extends\n    Aria.HeadingProps,\n    FlowComponentProps,\n    PropsWithElementType<\"span\" | \"p\"> {\n  /** The font size of the heading. */\n  size?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\";\n  /** The color of the heading. @default \"default\" */\n  color?: \"default\" | \"danger\" | \"unavailable\" | AlphaColor;\n  /** The text-wrap property of the text. @default undefined */\n  wrap?: \"wrap\" | \"balance\";\n}\n\n/**\n * The font size each heading level renders at — the TypeScript half of the\n * level-based `--font-size` rules in Heading.module.scss. Levels 4 to 6 fall\n * through to the `xs` default.\n */\nconst sizeByLevel: Record<number, NonNullable<HeadingProps[\"size\"]>> = {\n  1: \"xl\",\n  2: \"m\",\n  3: \"s\",\n};\n\n/** @flr-generate all */\nexport const Heading = flowComponent(\"Heading\", (props) => {\n  const {\n    children,\n    className,\n    level = 2,\n    color = \"default\",\n    wrap,\n    size,\n    ref,\n    elementType,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.heading,\n    size && styles[`size-${size}`],\n    color !== \"default\" && styles[color],\n    wrap && styles[`wrap-${wrap}`],\n    // The level class carries the font size. Emitted for every heading — not\n    // just the `elementType` ones — so the stylesheet can select on the class\n    // instead of the h1–h6 element react-aria renders without one.\n    styleClassname(styles, `h${level}`),\n    className,\n  );\n\n  const Element = elementType ?? Aria.Heading;\n\n  const effectiveSize = size ?? sizeByLevel[level] ?? \"xs\";\n  const buttonSize =\n    effectiveSize === \"xl\" || effectiveSize === \"xxl\" ? \"m\" : \"s\";\n\n  const propsContext: PropsContext = {\n    Icon: {\n      \"aria-hidden\": true,\n      className: styles.icon,\n    },\n    AlertBadge: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n    },\n    Badge: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n    },\n    Button: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      size: buttonSize,\n    },\n    CopyButton: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      size: buttonSize,\n    },\n    ContextualHelpTrigger: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      Button: {\n        tunnel: null,\n      },\n    },\n    AlertText: {\n      Icon: {\n        className: styles.icon,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <Element className={rootClassName} {...rest} ref={ref} level={level}>\n        <span className={styles.headingText}>{children}</span>\n        <span className={styles.headingContent}>\n          <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\" />\n        </span>\n      </Element>\n    </PropsContextProvider>\n  );\n});\n\nexport default Heading;\n"],"mappings":";;;;;;;;;;;;;;;;AA6BA,IAAM,cAAiE;CACrE,GAAG;CACH,GAAG;CACH,GAAG;AACL;;AAGA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,UACA,WACA,QAAQ,GACR,QAAQ,WACR,MACA,MACA,KACA,aACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,uBAAO,SACP,QAAQ,uBAAO,QAAQ,SACvB,UAAU,aAAa,uBAAO,QAC9B,QAAQ,uBAAO,QAAQ,SAIvB,eAAe,wBAAQ,IAAI,OAAO,GAClC,SACF;CAEA,MAAM,UAAU,eAAe,KAAK;CAEpC,MAAM,gBAAgB,QAAQ,YAAY,UAAU;CACpD,MAAM,aACJ,kBAAkB,QAAQ,kBAAkB,QAAQ,MAAM;CAE5D,MAAM,eAA6B;EACjC,MAAM;GACJ,eAAe;GACf,WAAW,uBAAO;EACpB;EACA,YAAY,EACV,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,OAAO,EACL,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,QAAQ;GACN,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,YAAY;GACV,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,uBAAuB;GACrB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,QAAQ,EACN,QAAQ,KACV;EACF;EACA,WAAW,EACT,MAAM,EACJ,WAAW,uBAAO,KACpB,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,SAAD;GAAS,WAAW;GAAe,GAAI;GAAW;GAAY;GAA9D,UAAA,CACE,oBAAC,QAAD;IAAM,WAAW,uBAAO;IAAc;GAAe,CAAA,GACrD,oBAAC,QAAD;IAAM,WAAW,uBAAO;IACtB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;IAAW,CAAA;GAC5D,CAAA,CACC;;CACW,CAAA;AAE1B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Heading.module.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.module.scss"],"sourcesContent":[".heading {\n  color: var(--heading--color);\n  font-size: var(--font-size);\n  font-weight: var(--heading--font-weight);\n  text-wrap-style: pretty;\n\n  --heading-line-height: calc(var(--font-size) * var(--line-height));\n\n  @mixin color($color) {\n    &.#{$color} {\n      color: var(--heading--color-#{$color});\n    }\n  }\n\n  @include color(\"danger\");\n  @include color(\"unavailable\");\n  @include color(\"dark\");\n  @include color(\"light\");\n  @include color(\"dark-static\");\n  @include color(\"light-static\");\n\n  .headingText {\n    .icon {\n      height: var(--heading-line-height);\n      width: var(--heading-line-height);\n      vertical-align: bottom;\n      display: inline-block;\n      margin-inline-end: var(--heading--icon-to-text-spacing);\n    }\n  }\n\n  .headingContent {\n    vertical-align: bottom;\n    display: inline-flex;\n    margin-inline-start: var(--heading--icon-to-text-spacing);\n    min-height: var(--heading-line-height);\n    align-items: center;\n    gap: var(--heading--icon-to-text-spacing);\n    flex-wrap: wrap;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &:where(h1),\n  &:where(.h1) {\n    --font-size: var(--font-size-heading--xl);\n  }\n\n  &:where(h2),\n  &:where(.h2) {\n    --font-size: var(--font-size-heading--m);\n  }\n\n  &:where(h3),\n  &:where(.h3) {\n    --font-size: var(--font-size-heading--s);\n  }\n\n  &:where(h4),\n  &:where(.h4),\n  &:where(h5),\n  &:where(.h5),\n  &:where(h6),\n  &:where(.h6) {\n    --font-size: var(--font-size-heading--xs);\n  }\n\n  @mixin size($size) {\n    &.size-#{$size} {\n      --font-size: var(--font-size-heading--#{$size});\n    }\n  }\n\n  @include size(\"xs\");\n  @include size(\"s\");\n  @include size(\"m\");\n  @include size(\"l\");\n  @include size(\"xl\");\n  @include size(\"xxl\");\n\n  &:where(.wrap-wrap) {\n    text-wrap: wrap;\n  }\n\n  &:where(.wrap-balance) {\n    text-wrap: balance;\n  }\n}\n\n@media (max-width: 768px) {\n  .heading {\n    &:where(h1),\n    &.size-xl {\n      --font-size: var(--font-size-heading--l);\n    }\n\n    &.size-l {\n      --font-size: var(--font-size-heading--m);\n    }\n\n    &:where(h2),\n    &.size-m {\n      --font-size: var(--font-size-heading--s);\n    }\n\n    &:where(h3),\n    &.size-s {\n      --font-size: var(--font-size-heading--xs);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Heading.module.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.module.scss"],"sourcesContent":[".heading {\n  color: var(--heading--color);\n  font-size: var(--font-size);\n  font-weight: var(--heading--font-weight);\n  text-wrap-style: pretty;\n\n  --heading-line-height: calc(var(--font-size) * var(--line-height));\n\n  @mixin color($color) {\n    &.#{$color} {\n      color: var(--heading--color-#{$color});\n    }\n  }\n\n  @include color(\"danger\");\n  @include color(\"unavailable\");\n  @include color(\"dark\");\n  @include color(\"light\");\n  @include color(\"dark-static\");\n  @include color(\"light-static\");\n\n  .headingText {\n    .icon {\n      height: var(--heading-line-height);\n      width: var(--heading-line-height);\n      vertical-align: bottom;\n      display: inline-block;\n      margin-inline-end: var(--heading--icon-to-text-spacing);\n    }\n  }\n\n  .headingContent {\n    vertical-align: bottom;\n    display: inline-flex;\n    margin-inline-start: var(--heading--icon-to-text-spacing);\n    min-height: var(--heading-line-height);\n    align-items: center;\n    gap: var(--heading--icon-to-text-spacing);\n    flex-wrap: wrap;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &:where(.h1) {\n    --font-size: var(--font-size-heading--xl);\n  }\n\n  &:where(.h2) {\n    --font-size: var(--font-size-heading--m);\n  }\n\n  &:where(.h3) {\n    --font-size: var(--font-size-heading--s);\n  }\n\n  &:where(.h4),\n  &:where(.h5),\n  &:where(.h6) {\n    --font-size: var(--font-size-heading--xs);\n  }\n\n  @mixin size($size) {\n    &.size-#{$size} {\n      --font-size: var(--font-size-heading--#{$size});\n    }\n  }\n\n  @include size(\"xs\");\n  @include size(\"s\");\n  @include size(\"m\");\n  @include size(\"l\");\n  @include size(\"xl\");\n  @include size(\"xxl\");\n\n  &:where(.wrap-wrap) {\n    text-wrap: wrap;\n  }\n\n  &:where(.wrap-balance) {\n    text-wrap: balance;\n  }\n}\n\n@media (max-width: 768px) {\n  .heading {\n    &:where(.h1),\n    &.size-xl {\n      --font-size: var(--font-size-heading--l);\n    }\n\n    &.size-l {\n      --font-size: var(--font-size-heading--m);\n    }\n\n    &:where(.h2),\n    &.size-m {\n      --font-size: var(--font-size-heading--s);\n    }\n\n    &:where(.h3),\n    &.size-s {\n      --font-size: var(--font-size-heading--xs);\n    }\n  }\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutCard.module.mjs","names":[],"sources":["../../../../../../../src/components/LayoutCard/LayoutCard.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.layoutCard {\n  @include scrollbar.scrollbar;\n\n  align-self: normal;\n  background-color: var(--layout-card--background-color);\n  box-shadow: var(--layout-card--box-shadow);\n  border-radius: var(--layout-card--corner-radius);\n  padding: var(--layout-card--padding);\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  border: var(--layout-card--border-width) var(--layout-card--border-style)\n    var(--layout-card--border-color);\n\n  > .tabNavigation {\n    margin-top: calc(var(--layout-card--padding) * -1);\n    margin-inline: calc(var(--layout-card--padding) * -1);\n    margin-bottom: var(--layout-card--padding);\n    border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n    border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n\n    li:first-child :global(.flow--tab-navigation--link) {\n      border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n    }\n\n    :global(.flow--tab-navigation--more-button) {\n      border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n    }\n  }\n\n  &:has(> .accentBox:only-child) {\n    padding: 0;\n    border: none;\n\n    .accentBox {\n      padding: var(--layout-card--padding);\n      border-radius: calc(var(--layout-card--corner-radius) - 1px);\n      flex-grow: 1;\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .layoutCard {\n    padding: var(--layout-card--padding-mobile);\n\n    > .tabNavigation {\n      margin-top: calc(var(--layout-card--padding-mobile) * -1);\n      margin-inline: calc(var(--layout-card--padding-mobile) * -1);\n      margin-bottom: var(--layout-card--padding-mobile);\n    }\n\n    &:has(> .accentBox:only-child) {\n      padding: 0;\n\n      .accentBox {\n        padding: var(--layout-card--padding-mobile);\n      }\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"LayoutCard.module.mjs","names":[],"sources":["../../../../../../../src/components/LayoutCard/LayoutCard.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.layoutCard {\n  @include scrollbar.scrollbar;\n\n  align-self: normal;\n  background-color: var(--layout-card--background-color);\n  box-shadow: var(--layout-card--box-shadow);\n  border-radius: var(--layout-card--corner-radius);\n  padding: var(--layout-card--padding);\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  border: var(--layout-card--border-width) var(--layout-card--border-style)\n    var(--layout-card--border-color);\n\n  > .tabNavigation {\n    margin-top: calc(var(--layout-card--padding) * -1);\n    margin-inline: calc(var(--layout-card--padding) * -1);\n    margin-bottom: var(--layout-card--padding);\n    border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n    border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n\n    :global(.flow--tab-navigation--item):first-child\n      :global(.flow--tab-navigation--link) {\n      border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n    }\n\n    :global(.flow--tab-navigation--more-button) {\n      border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n    }\n  }\n\n  &:has(> .accentBox:only-child) {\n    padding: 0;\n    border: none;\n\n    .accentBox {\n      padding: var(--layout-card--padding);\n      border-radius: calc(var(--layout-card--corner-radius) - 1px);\n      flex-grow: 1;\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .layoutCard {\n    padding: var(--layout-card--padding-mobile);\n\n    > .tabNavigation {\n      margin-top: calc(var(--layout-card--padding-mobile) * -1);\n      margin-inline: calc(var(--layout-card--padding-mobile) * -1);\n      margin-bottom: var(--layout-card--padding-mobile);\n    }\n\n    &:has(> .accentBox:only-child) {\n      padding: 0;\n\n      .accentBox {\n        padding: var(--layout-card--padding-mobile);\n      }\n    }\n  }\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"LightBox.module.mjs","names":[],"sources":["../../../../../../../src/components/LightBox/LightBox.module.scss"],"sourcesContent":[".lightBox {\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\n    > div {\n      display: flex;\n      justify-content: center;\n      width: inherit;\n      max-height: var(--visual-viewport-height);\n    }\n  }\n\n  [role=\"dialog\"] {\n    outline: none;\n    display: flex;\n    justify-content: center;\n    max-width: var(--light-box--max-width);\n    max-height: var(--light-box--max-height);\n  }\n\n  .content {\n    overflow: auto;\n\n    > img {\n      width: 100%;\n    }\n  }\n\n  &.fitScreen {\n    .content {\n      > * {\n        max-height: var(--light-box--max-height);\n      }\n    }\n  }\n\n  .actions,\n  .actionGroup {\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 0;\n  }\n\n  .actions {\n    row-gap: var(--light-box--spacing);\n    padding-inline-start: var(--light-box--spacing);\n  }\n\n  .gallery {\n    width: var(--light-box--max-width);\n  }\n\n  &:has(.gallery) {\n    .actions {\n      display: none;\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .lightBox {\n    [role=\"dialog\"] {\n      max-width: var(--light-box--max-width-mobile);\n      max-height: var(--light-box--max-height-mobile);\n    }\n\n    &.fitScreen {\n      .content {\n        > * {\n          max-height: var(--light-box--max-height-mobile);\n        }\n      }\n    }\n\n    .gallery {\n      width: var(--light-box--max-width-mobile);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"LightBox.module.mjs","names":[],"sources":["../../../../../../../src/components/LightBox/LightBox.module.scss"],"sourcesContent":[".lightBox {\n  /* Overlay.module.scss lays the viewport out. */\n  > :global(.flow--overlay--viewport) {\n    /* react-aria's own modal wrapper — no className from Flow, so its\n       default `react-aria-Modal` class is the handle. */\n    > :global(.react-aria-Modal) {\n      display: flex;\n      justify-content: center;\n      width: inherit;\n      max-height: var(--visual-viewport-height);\n    }\n  }\n\n  [role=\"dialog\"] {\n    outline: none;\n    display: flex;\n    justify-content: center;\n    max-width: var(--light-box--max-width);\n    max-height: var(--light-box--max-height);\n  }\n\n  .content {\n    overflow: auto;\n\n    // The image is a consumer child — Flow `Image` or a bare `<img>`.\n    // stylelint-disable-next-line selector-max-type -- bare `<img>` has no class\n    > img {\n      width: 100%;\n    }\n  }\n\n  &.fitScreen {\n    .content {\n      > * {\n        max-height: var(--light-box--max-height);\n      }\n    }\n  }\n\n  .actions,\n  .actionGroup {\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 0;\n  }\n\n  .actions {\n    row-gap: var(--light-box--spacing);\n    padding-inline-start: var(--light-box--spacing);\n  }\n\n  .gallery {\n    width: var(--light-box--max-width);\n  }\n\n  &:has(.gallery) {\n    .actions {\n      display: none;\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .lightBox {\n    [role=\"dialog\"] {\n      max-width: var(--light-box--max-width-mobile);\n      max-height: var(--light-box--max-height-mobile);\n    }\n\n    &.fitScreen {\n      .content {\n        > * {\n          max-height: var(--light-box--max-height-mobile);\n        }\n      }\n    }\n\n    .gallery {\n      width: var(--light-box--max-width-mobile);\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/LightBox/components/LightBoxGallery/Controls.mjs

@@ -1,10 +1,10 @@
 "use client"
 /* */
+import { useLocalizedStringFormatter } from "../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import LightBoxGallery_module_default from "./LightBoxGallery.module.mjs";
 import __locale_default from "../../../../../../../_virtual/_20.locale.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
-import { useLocalizedStringFormatter } from "react-aria";
 //#region src/components/LightBox/components/LightBoxGallery/Controls.tsx
 var Controls = (props) => {
 	const { count, currentIndex } = props;

package/dist/js/packages/components/src/components/LightBox/components/LightBoxGallery/Controls.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.mjs","names":[],"sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGallery/Controls.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"@/components/LightBox/components/LightBoxGallery/LightBoxGallery.module.scss\";\nimport clsx from \"clsx\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../locales/*.locale.json\";\n\ninterface Props {\n  count: number;\n  currentIndex: number;\n}\n\nexport const Controls: FC<Props> = (props) => {\n  const { count, currentIndex } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"LightBox\");\n\n  const indicators = Array(count)\n    .fill(\"\")\n    .map((_, index) => (\n      <span\n        key={index}\n        className={clsx(\n          styles.indicator,\n          currentIndex === index && styles.current,\n        )}\n      />\n    ));\n\n  return (\n    <div\n      className={styles.indicators}\n      aria-label={stringFormatter.format(\"indicator\", {\n        current: currentIndex + 1,\n        count,\n      })}\n    >\n      {indicators}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAWA,IAAa,YAAuB,UAAU;CAC5C,MAAM,EAAE,OAAO,iBAAiB;CAEhC,MAAM,kBAAkB,4BAA4B,kBAAS,UAAU;CAEvE,MAAM,aAAa,MAAM,KAAK,CAAC,CAC5B,KAAK,EAAE,CAAC,CACR,KAAK,GAAG,UACP,oBAAC,QAAD,EAEE,WAAW,KACT,+BAAO,WACP,iBAAiB,SAAS,+BAAO,OACnC,EACD,GALM,KAKN,CACF;CAEH,OACE,oBAAC,OAAD;EACE,WAAW,+BAAO;EAClB,cAAY,gBAAgB,OAAO,aAAa;GAC9C,SAAS,eAAe;GACxB;EACF,CAAC;EAEA,UAAA;CACE,CAAA;AAET"}
+{"version":3,"file":"Controls.mjs","names":[],"sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGallery/Controls.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"@/components/LightBox/components/LightBoxGallery/LightBoxGallery.module.scss\";\nimport clsx from \"clsx\";\n/*\n * Flow's own formatter, not react-aria's: the indicator's message takes\n * variables, and only this one runs them through IntlMessageFormat –\n * react-aria's hands back the raw \"{current} of {count}\".\n */\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../locales/*.locale.json\";\n\ninterface Props {\n  count: number;\n  currentIndex: number;\n}\n\nexport const Controls: FC<Props> = (props) => {\n  const { count, currentIndex } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"LightBox\");\n\n  const indicators = Array(count)\n    .fill(\"\")\n    .map((_, index) => (\n      <span\n        key={index}\n        className={clsx(\n          styles.indicator,\n          currentIndex === index && styles.current,\n        )}\n      />\n    ));\n\n  return (\n    <div\n      className={styles.indicators}\n      aria-label={stringFormatter.format(\"indicator\", {\n        current: currentIndex + 1,\n        count,\n      })}\n    >\n      {indicators}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAgBA,IAAa,YAAuB,UAAU;CAC5C,MAAM,EAAE,OAAO,iBAAiB;CAEhC,MAAM,kBAAkB,4BAA4B,kBAAS,UAAU;CAEvE,MAAM,aAAa,MAAM,KAAK,CAAC,CAC5B,KAAK,EAAE,CAAC,CACR,KAAK,GAAG,UACP,oBAAC,QAAD,EAEE,WAAW,KACT,+BAAO,WACP,iBAAiB,SAAS,+BAAO,OACnC,EACD,GALM,KAKN,CACF;CAEH,OACE,oBAAC,OAAD;EACE,WAAW,+BAAO;EAClB,cAAY,gBAAgB,OAAO,aAAa;GAC9C,SAAS,eAAe;GACxB;EACF,CAAC;EAEA,UAAA;CACE,CAAA;AAET"}

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

@@ -1 +1 @@
-{"version":3,"file":"Link.module.mjs","names":[],"sources":["../../../../../../../src/components/Link/Link.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.link {\n  display: inline-block;\n  font-weight: var(--link--font-weight);\n  transition-property: color;\n  transition-duration: var(--transition--duration--default);\n  color: var(--link--color--default);\n  width: fit-content;\n\n  &:hover {\n    color: var(--link--color--hover);\n  }\n\n  &[data-pressed] {\n    color: var(--link--color--pressed);\n  }\n\n  @include focus.focus;\n\n  &:not([aria-disabled]) {\n    cursor: pointer;\n  }\n\n  &.inline {\n    font-weight: normal;\n    font-size: var(--font-size-text--m);\n    text-decoration: underline;\n  }\n\n  /* Elements */\n\n  .icon {\n    margin-inline-start: var(--link--spacing);\n    vertical-align: text-bottom;\n    height: var(--link--icon-height);\n  }\n\n  .linkIcon {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n\n  &[aria-disabled] {\n    color: var(--link--color--disabled);\n  }\n\n  /* Size s */\n\n  &.size-s {\n    font-size: var(--font-size-text--s);\n\n    .icon {\n      height: var(--link--icon-height-s);\n    }\n  }\n\n  &:has(.button) {\n    > .linkIcon {\n      display: none;\n    }\n  }\n\n  /* Alpha Colors */\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      color: var(--link--color-#{$color}--default);\n\n      &:hover {\n        color: var(--link--color-#{$color}--hover);\n      }\n\n      &[data-pressed] {\n        color: var(--link--color-#{$color}--pressed);\n      }\n\n      &[aria-disabled] {\n        color: var(--link--color-#{$color}--disabled);\n      }\n    }\n  }\n\n  @include color(light);\n  @include color(dark);\n  @include color(dark-static);\n  @include color(light-static);\n\n  /* AlertText Colors */\n  @mixin status($status) {\n    &:has(.alertText[class*=\"#{$status}\"]) {\n      color: var(--alert-text--#{$status}-color);\n    }\n  }\n\n  @include status(\"danger\");\n  @include status(\"success\");\n  @include status(\"warning\");\n  @include status(\"info\");\n  @include status(\"unavailable\");\n\n  &:has(> .accentBox),\n  &:has(> .layoutCard) {\n    color: unset;\n    font-weight: unset;\n    display: block;\n    min-width: 0;\n    width: auto;\n\n    .linkIcon {\n      display: none;\n    }\n  }\n\n  &:has(> .accentBox) {\n    border-radius: var(--accent-box--corner-radius);\n  }\n\n  &:has(> .layoutCard) {\n    border-radius: var(--layout-card--corner-radius);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Link.module.mjs","names":[],"sources":["../../../../../../../src/components/Link/Link.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.link {\n  display: inline-block;\n  font-weight: var(--link--font-weight);\n  transition-property: color;\n  transition-duration: var(--transition--duration--default);\n  color: var(--link--color--default);\n  width: fit-content;\n\n  &:hover {\n    color: var(--link--color--hover);\n  }\n\n  &[data-pressed] {\n    color: var(--link--color--pressed);\n  }\n\n  @include focus.focus;\n\n  &:not([aria-disabled]) {\n    cursor: pointer;\n  }\n\n  &.inline {\n    font-weight: normal;\n    text-decoration: underline;\n  }\n\n  /* Elements */\n\n  .icon {\n    margin-inline-start: var(--link--spacing);\n    vertical-align: text-bottom;\n    height: var(--link--icon-height);\n  }\n\n  .linkIcon {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n\n  &[aria-disabled] {\n    color: var(--link--color--disabled);\n  }\n\n  /* Size s */\n\n  &.size-s {\n    font-size: var(--font-size-text--s);\n\n    .icon {\n      height: var(--link--icon-height-s);\n    }\n  }\n\n  &:has(.button) {\n    > .linkIcon {\n      display: none;\n    }\n  }\n\n  /* Alpha Colors */\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      color: var(--link--color-#{$color}--default);\n\n      &:hover {\n        color: var(--link--color-#{$color}--hover);\n      }\n\n      &[data-pressed] {\n        color: var(--link--color-#{$color}--pressed);\n      }\n\n      &[aria-disabled] {\n        color: var(--link--color-#{$color}--disabled);\n      }\n    }\n  }\n\n  @include color(light);\n  @include color(dark);\n  @include color(dark-static);\n  @include color(light-static);\n\n  /* AlertText Colors */\n  @mixin status($status) {\n    &:has(.alertText[class*=\"#{$status}\"]) {\n      color: var(--alert-text--#{$status}-color);\n    }\n  }\n\n  @include status(\"danger\");\n  @include status(\"success\");\n  @include status(\"warning\");\n  @include status(\"info\");\n  @include status(\"unavailable\");\n\n  &:has(> .accentBox),\n  &:has(> .layoutCard) {\n    color: unset;\n    font-weight: unset;\n    display: block;\n    min-width: 0;\n    width: auto;\n\n    .linkIcon {\n      display: none;\n    }\n  }\n\n  &:has(> .accentBox) {\n    border-radius: var(--accent-box--corner-radius);\n  }\n\n  &:has(> .layoutCard) {\n    border-radius: var(--layout-card--corner-radius);\n  }\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"List.module.mjs","names":[],"sources":["../../../../../../../src/components/List/List.module.scss"],"sourcesContent":[".list {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--list--block-to-block-spacing);\n  container-type: inline-size;\n\n  :has(:global(.flow--list--list-summary--top)) {\n    :global(.flow--list--items),\n    :global(.flow--list--table) {\n      border-start-start-radius: 0;\n      border-start-end-radius: 0;\n    }\n  }\n\n  :has(:global(.flow--list--list-summary--bottom)) {\n    :global(.flow--list--items),\n    :global(.flow--list--table) {\n      border-end-start-radius: 0;\n      border-end-end-radius: 0;\n    }\n  }\n\n  .listWrapper {\n    display: flex;\n    flex-direction: column;\n\n    .hideVisuallyEmptyView {\n      display: none;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"List.module.mjs","names":[],"sources":["../../../../../../../src/components/List/List.module.scss"],"sourcesContent":[".list {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--list--block-to-block-spacing);\n  min-width: 0;\n\n  :has(:global(.flow--list--list-summary--top)) {\n    :global(.flow--list--items),\n    :global(.flow--list--table) {\n      border-start-start-radius: 0;\n      border-start-end-radius: 0;\n    }\n  }\n\n  :has(:global(.flow--list--list-summary--bottom)) {\n    :global(.flow--list--items),\n    :global(.flow--list--table) {\n      border-end-start-radius: 0;\n      border-end-end-radius: 0;\n    }\n  }\n\n  .listWrapper {\n    display: flex;\n    flex-direction: column;\n\n    .hideVisuallyEmptyView {\n      display: none;\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/List/components/Header/components/SearchField/SearchField.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/SearchField/SearchField.module.scss"],"sourcesContent":[".searchField {\n  max-width: 500px;\n  margin-inline-start: auto;\n  flex-grow: 1;\n\n  input {\n    width: 200px;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"SearchField.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/SearchField/SearchField.module.scss"],"sourcesContent":[".searchField {\n  max-width: 500px;\n  margin-inline-start: auto;\n  flex-grow: 1;\n\n  // The list's search field can be swapped out by the consumer's\n  // `search.render`, so this has to match whatever input that renders.\n  // stylelint-disable-next-line selector-max-type -- replaceable field\n  input {\n    width: 200px;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/List/components/Items/Items.mjs

@@ -6,9 +6,8 @@ import { useList } from "../../hooks/useList.mjs";
 import { Item } from "./components/Item/Item.mjs";
 import ItemsGridListView from "../../../../views/ItemsGridListView.mjs";
 import { FallbackItems } from "./components/FallbackItems/FallbackItems.mjs";
-import { getLoadMoreThresholdRows, useInfiniteScrollTrigger } from "./hooks/useInfiniteScrollTrigger.mjs";
+import { useInfiniteScrollTrigger } from "../../hooks/useInfiniteScrollTrigger.mjs";
 import clsx from "clsx";
-import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/List/components/Items/Items.tsx
 var Items = () => {
@@ -17,16 +16,14 @@ var Items = () => {
 	const isLoading = list.loader.useIsLoading();
 	const isInitiallyLoading = list.loader.useIsInitiallyLoading();
 	const isLoadingMore = list.loader.useIsLoadingMore();
-	const triggerRef = useRef(null);
-	useInfiniteScrollTrigger(triggerRef);
+	const { triggerRef, triggerIndex } = useInfiniteScrollTrigger();
 	if (!list.itemView) return null;
-	const triggerIndex = Math.max(0, list.items.entries.length - getLoadMoreThresholdRows(list.batches.batchSize));
 	const items = list.items.entries.map((item, index) => /* @__PURE__ */ jsx(Item, {
 		data: item.data,
 		id: item.id,
 		list,
 		isTile: tiles,
-		triggerRef: list.infiniteScroll && index === triggerIndex ? triggerRef : void 0
+		triggerRef: index === triggerIndex ? triggerRef : void 0
 	}, item.id));
 	const rootClassName = clsx(Items_module_default.items, isLoading && !(list.infiniteScroll && isLoadingMore) && Items_module_default.isLoading, tiles && Items_module_default.tiles);
 	const { "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, ...rest } = list.componentProps;

package/dist/js/packages/components/src/components/List/components/Items/Items.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Items.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/Items/Items.tsx"],"sourcesContent":["import Item from \"@/components/List/components/Items/components/Item/Item\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport DivView from \"@/views/DivView\";\nimport ItemsGridListView from \"@/views/ItemsGridListView\";\nimport clsx from \"clsx\";\nimport type { FC } from \"react\";\nimport { useRef } from \"react\";\nimport styles from \"./Items.module.scss\";\nimport { FallbackItems } from \"./components/FallbackItems\";\nimport {\n  getLoadMoreThresholdRows,\n  useInfiniteScrollTrigger,\n} from \"./hooks/useInfiniteScrollTrigger\";\n\nexport const Items: FC = () => {\n  const list = useList();\n  const tiles = list.viewMode.isTiles;\n  const isLoading = list.loader.useIsLoading();\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const isLoadingMore = list.loader.useIsLoadingMore();\n\n  const triggerRef = useRef<HTMLDivElement>(null);\n  useInfiniteScrollTrigger(triggerRef);\n\n  if (!list.itemView) {\n    return null;\n  }\n\n  const triggerIndex = Math.max(\n    0,\n    list.items.entries.length -\n      getLoadMoreThresholdRows(list.batches.batchSize),\n  );\n\n  const items = list.items.entries.map((item, index) => (\n    <Item\n      key={item.id}\n      data={item.data}\n      id={item.id}\n      list={list}\n      isTile={tiles}\n      triggerRef={\n        list.infiniteScroll && index === triggerIndex ? triggerRef : undefined\n      }\n    />\n  ));\n\n  const rootClassName = clsx(\n    styles.items,\n    isLoading && !(list.infiniteScroll && isLoadingMore) && styles.isLoading,\n    tiles && styles.tiles,\n  );\n\n  const {\n    \"aria-labelledby\": ariaLabelledby,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = list.componentProps;\n\n  return (\n    <DivView aria-hidden={isInitiallyLoading} aria-busy={isLoading}>\n      <ItemsGridListView\n        className={rootClassName}\n        {...rest}\n        aria-labelledby={ariaLabel ? undefined : ariaLabelledby}\n        aria-label={ariaLabel}\n        layout={tiles ? \"grid\" : \"stack\"}\n        tileMaxWidth={list.itemView.tileMaxWidth}\n      >\n        {items.length === 0 && isInitiallyLoading ? <FallbackItems /> : items}\n      </ItemsGridListView>\n    </DivView>\n  );\n};\n\nexport default Items;\n"],"mappings":";;;;;;;;;;;;;AAcA,IAAa,cAAkB;CAC7B,MAAM,OAAO,QAAQ;CACrB,MAAM,QAAQ,KAAK,SAAS;CAC5B,MAAM,YAAY,KAAK,OAAO,aAAa;CAC3C,MAAM,qBAAqB,KAAK,OAAO,sBAAsB;CAC7D,MAAM,gBAAgB,KAAK,OAAO,iBAAiB;CAEnD,MAAM,aAAa,OAAuB,IAAI;CAC9C,yBAAyB,UAAU;CAEnC,IAAI,CAAC,KAAK,UACR,OAAO;CAGT,MAAM,eAAe,KAAK,IACxB,GACA,KAAK,MAAM,QAAQ,SACjB,yBAAyB,KAAK,QAAQ,SAAS,CACnD;CAEA,MAAM,QAAQ,KAAK,MAAM,QAAQ,KAAK,MAAM,UAC1C,oBAAC,MAAD;EAEE,MAAM,KAAK;EACX,IAAI,KAAK;EACH;EACN,QAAQ;EACR,YACE,KAAK,kBAAkB,UAAU,eAAe,aAAa,KAAA;CAEhE,GARM,KAAK,EAQX,CACF;CAED,MAAM,gBAAgB,KACpB,qBAAO,OACP,aAAa,EAAE,KAAK,kBAAkB,kBAAkB,qBAAO,WAC/D,SAAS,qBAAO,KAClB;CAEA,MAAM,EACJ,mBAAmB,gBACnB,cAAc,WACd,GAAG,SACD,KAAK;CAET,OACE,oBAAC,SAAD;EAAS,eAAa;EAAoB,aAAW;EACnD,UAAA,oBAAC,mBAAD;GACE,WAAW;GACX,GAAI;GACJ,mBAAiB,YAAY,KAAA,IAAY;GACzC,cAAY;GACZ,QAAQ,QAAQ,SAAS;GACzB,cAAc,KAAK,SAAS;GAE3B,UAAA,MAAM,WAAW,KAAK,qBAAqB,oBAAC,eAAD,CAAgB,CAAA,IAAI;EAC/C,CAAA;CACZ,CAAA;AAEb"}
+{"version":3,"file":"Items.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/Items/Items.tsx"],"sourcesContent":["import Item from \"@/components/List/components/Items/components/Item/Item\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport DivView from \"@/views/DivView\";\nimport ItemsGridListView from \"@/views/ItemsGridListView\";\nimport clsx from \"clsx\";\nimport type { FC } from \"react\";\nimport styles from \"./Items.module.scss\";\nimport { FallbackItems } from \"./components/FallbackItems\";\nimport { useInfiniteScrollTrigger } from \"@/components/List/hooks/useInfiniteScrollTrigger\";\n\nexport const Items: FC = () => {\n  const list = useList();\n  const tiles = list.viewMode.isTiles;\n  const isLoading = list.loader.useIsLoading();\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const isLoadingMore = list.loader.useIsLoadingMore();\n\n  const { triggerRef, triggerIndex } = useInfiniteScrollTrigger();\n\n  if (!list.itemView) {\n    return null;\n  }\n\n  const items = list.items.entries.map((item, index) => (\n    <Item\n      key={item.id}\n      data={item.data}\n      id={item.id}\n      list={list}\n      isTile={tiles}\n      triggerRef={index === triggerIndex ? triggerRef : undefined}\n    />\n  ));\n\n  const rootClassName = clsx(\n    styles.items,\n    isLoading && !(list.infiniteScroll && isLoadingMore) && styles.isLoading,\n    tiles && styles.tiles,\n  );\n\n  const {\n    \"aria-labelledby\": ariaLabelledby,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = list.componentProps;\n\n  return (\n    <DivView aria-hidden={isInitiallyLoading} aria-busy={isLoading}>\n      <ItemsGridListView\n        className={rootClassName}\n        {...rest}\n        aria-labelledby={ariaLabel ? undefined : ariaLabelledby}\n        aria-label={ariaLabel}\n        layout={tiles ? \"grid\" : \"stack\"}\n        tileMaxWidth={list.itemView.tileMaxWidth}\n      >\n        {items.length === 0 && isInitiallyLoading ? <FallbackItems /> : items}\n      </ItemsGridListView>\n    </DivView>\n  );\n};\n\nexport default Items;\n"],"mappings":";;;;;;;;;;;;AAUA,IAAa,cAAkB;CAC7B,MAAM,OAAO,QAAQ;CACrB,MAAM,QAAQ,KAAK,SAAS;CAC5B,MAAM,YAAY,KAAK,OAAO,aAAa;CAC3C,MAAM,qBAAqB,KAAK,OAAO,sBAAsB;CAC7D,MAAM,gBAAgB,KAAK,OAAO,iBAAiB;CAEnD,MAAM,EAAE,YAAY,iBAAiB,yBAAyB;CAE9D,IAAI,CAAC,KAAK,UACR,OAAO;CAGT,MAAM,QAAQ,KAAK,MAAM,QAAQ,KAAK,MAAM,UAC1C,oBAAC,MAAD;EAEE,MAAM,KAAK;EACX,IAAI,KAAK;EACH;EACN,QAAQ;EACR,YAAY,UAAU,eAAe,aAAa,KAAA;CACnD,GANM,KAAK,EAMX,CACF;CAED,MAAM,gBAAgB,KACpB,qBAAO,OACP,aAAa,EAAE,KAAK,kBAAkB,kBAAkB,qBAAO,WAC/D,SAAS,qBAAO,KAClB;CAEA,MAAM,EACJ,mBAAmB,gBACnB,cAAc,WACd,GAAG,SACD,KAAK;CAET,OACE,oBAAC,SAAD;EAAS,eAAa;EAAoB,aAAW;EACnD,UAAA,oBAAC,mBAAD;GACE,WAAW;GACX,GAAI;GACJ,mBAAiB,YAAY,KAAA,IAAY;GACzC,cAAY;GACZ,QAAQ,QAAQ,SAAS;GACzB,cAAc,KAAK,SAAS;GAE3B,UAAA,MAAM,WAAW,KAAK,qBAAqB,oBAAC,eAAD,CAAgB,CAAA,IAAI;EAC/C,CAAA;CACZ,CAAA;AAEb"}

package/dist/js/packages/components/src/components/List/components/Items/components/Item/Item.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Item.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.item {\n  position: relative;\n\n  /* The link overlay and the interactive content lifted above it (see .link\n     below) stack against each other only — never against anything outside the\n     item. */\n  isolation: isolate;\n  cursor: default;\n  background-color: var(--list-item--background-color--default);\n  transition-property: background-color;\n  transition-duration: var(--transition--duration--default);\n\n  @include focus.focus;\n\n  &.item {\n    outline-offset: calc(var(--size-px--xs) * -1);\n    box-shadow: none;\n  }\n\n  &:where(.isSelected) {\n    background-color: var(--list-item--background-color--pressed);\n  }\n\n  &:not(:last-child) {\n    border-bottom: var(--list-item--border-width) var(--list-item--border-style)\n      var(--list-item--border-color);\n  }\n\n  &[data-href] {\n    cursor: pointer;\n  }\n\n  /*\n   * The bottom content carries its own interactive elements, so hovering it\n   * must not highlight the whole item. `.bottomContent` is defined here and\n   * applied by ListItemViewContent, so the class name stays type-checked\n   * instead of naming ListItemView's generated class from the outside.\n   */\n  &:where(.hasAction):not(:has(.bottomContent:hover)) {\n    &:where(:not(.isSelected)) {\n      &:hover {\n        background-color: var(--list-item--background-color--hover);\n      }\n    }\n\n    &[data-pressed] {\n      background-color: var(--list-item--background-color--pressed);\n    }\n  }\n\n  :global(.flow--avatar) {\n    transition-property: filter;\n    transition-duration: var(--transition--duration--default);\n  }\n\n  /* Elements */\n\n  /*\n   * Covers the whole item so a right-click anywhere on it hits a real link.\n   * Interactive content is lifted back above the overlay, so buttons, context\n   * menus and checkboxes keep receiving their own clicks.\n   */\n  .link {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n\n  &:has(.link) {\n    :where(\n      a,\n      button,\n      input,\n      label,\n      select,\n      summary,\n      textarea,\n      [role=\"button\"],\n      [role=\"checkbox\"],\n      [role=\"link\"],\n      [role=\"switch\"],\n      [tabindex]\n    ):not(.link) {\n      position: relative;\n      z-index: 2;\n    }\n\n    /*\n     * The bottom slot carries arbitrary consumer content (and the accordion's\n     * expanded content), so it stays fully clickable and selectable.\n     */\n    .bottomContent {\n      position: relative;\n      z-index: 2;\n    }\n  }\n\n  &.tile {\n    border: none;\n    border-radius: var(--list-item--corner-radius);\n\n    &.item {\n      outline-offset: var(--size-px--xxs);\n    }\n\n    &:where(.hasAction) {\n      &:not(.isSelected) {\n        &:hover {\n          :global(.flow--avatar) {\n            filter: brightness(var(--image-button--brightness--hover));\n          }\n        }\n      }\n\n      &[data-pressed] {\n        :global(.flow--avatar) {\n          filter: brightness(var(--image-button--brightness--pressed));\n        }\n      }\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Item.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.item {\n  position: relative;\n\n  /* The link overlay and the interactive content lifted above it (see .link\n     below) stack against each other only — never against anything outside the\n     item. */\n  isolation: isolate;\n  cursor: default;\n  background-color: var(--list-item--background-color--default);\n  transition-property: background-color;\n  transition-duration: var(--transition--duration--default);\n\n  @include focus.focus;\n\n  &.item {\n    outline-offset: calc(var(--size-px--xs) * -1);\n    box-shadow: none;\n  }\n\n  &:where(.isSelected) {\n    background-color: var(--list-item--background-color--pressed);\n  }\n\n  &:not(:last-child) {\n    border-bottom: var(--list-item--border-width) var(--list-item--border-style)\n      var(--list-item--border-color);\n  }\n\n  &[data-href] {\n    cursor: pointer;\n  }\n\n  /*\n   * The bottom content carries its own interactive elements, so hovering it\n   * must not highlight the whole item. `.bottomContent` is defined here and\n   * applied by ListItemViewContent, so the class name stays type-checked\n   * instead of naming ListItemView's generated class from the outside.\n   */\n  &:where(.hasAction):not(:has(.bottomContent:hover)) {\n    &:where(:not(.isSelected)) {\n      &:hover {\n        background-color: var(--list-item--background-color--hover);\n      }\n    }\n\n    &[data-pressed] {\n      background-color: var(--list-item--background-color--pressed);\n    }\n  }\n\n  :global(.flow--avatar) {\n    transition-property: filter;\n    transition-duration: var(--transition--duration--default);\n  }\n\n  /* Elements */\n\n  /*\n   * Covers the whole item so a right-click anywhere on it hits a real link.\n   * Interactive content is lifted back above the overlay, so buttons, context\n   * menus and checkboxes keep receiving their own clicks.\n   */\n  .link {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n\n  &:has(.link) {\n    // Matches interactive markup the item does not author: consumer children\n    // and react-aria internals, none of which carry a class.\n    // stylelint-disable-next-line selector-max-type -- foreign interactive markup\n    :where(\n      a,\n      button,\n      input,\n      label,\n      select,\n      summary,\n      textarea,\n      [role=\"button\"],\n      [role=\"checkbox\"],\n      [role=\"link\"],\n      [role=\"switch\"],\n      [tabindex]\n    ):not(.link) {\n      position: relative;\n      z-index: 2;\n    }\n\n    /*\n     * The bottom slot carries arbitrary consumer content (and the accordion's\n     * expanded content), so it stays fully clickable and selectable.\n     */\n    .bottomContent {\n      position: relative;\n      z-index: 2;\n    }\n  }\n\n  &.tile {\n    border: none;\n    border-radius: var(--list-item--corner-radius);\n\n    &.item {\n      outline-offset: var(--size-px--xxs);\n    }\n\n    &:where(.hasAction) {\n      &:not(.isSelected) {\n        &:hover {\n          :global(.flow--avatar) {\n            filter: brightness(var(--image-button--brightness--hover));\n          }\n        }\n      }\n\n      &[data-pressed] {\n        :global(.flow--avatar) {\n          filter: brightness(var(--image-button--brightness--pressed));\n        }\n      }\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/List/components/ListItemView/ListItemView.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemView.module.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/ListItemView/ListItemView.module.scss"],"sourcesContent":["@use \"@/styles/mixins/containerBreakpointSizes\";\n\n.view {\n  display: flex;\n  flex-direction: column;\n\n  .checkboxContainer {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  .content {\n    min-width: 0;\n    display: flex;\n    gap: var(--list-item--spacing);\n    flex-grow: 1;\n    flex-wrap: wrap;\n  }\n\n  .topContent {\n    overflow-wrap: anywhere;\n    display: flex;\n  }\n\n  .bottomContent {\n    width: 100%;\n    overflow-wrap: anywhere;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .heading {\n    color: var(--text--color--default);\n    overflow-wrap: anywhere;\n  }\n\n  .header {\n    overflow-wrap: anywhere;\n    display: flex;\n    gap: var(--list-item--avatar-to-title-spacing);\n    max-width: 100%;\n  }\n\n  .subTitle {\n    font-size: var(--list-item--subtitle-font-size);\n\n    .text:not(:last-child)::after {\n      content: \"–\";\n      display: inline-block;\n      margin: 0 var(--size-rem--s);\n    }\n  }\n\n  .badge {\n    max-width: 100%;\n  }\n\n  &.listView {\n    padding: var(--list-item--padding);\n    gap: var(--list-item--spacing);\n\n    .columnLayout {\n      flex-grow: 1;\n\n      > div {\n        flex-grow: 1;\n        align-items: center;\n      }\n    }\n\n    .contentWrapper {\n      display: flex;\n      gap: var(--list-item--spacing);\n      justify-content: space-between;\n      flex-grow: 1;\n      align-items: flex-start;\n    }\n\n    .content {\n      align-items: center;\n      align-self: center;\n      max-width: 100%;\n    }\n\n    .title {\n      max-width: 100%;\n      min-width: 0;\n    }\n\n    .action {\n      margin-inline-start: auto;\n\n      button {\n        margin-inline-end: 0;\n      }\n    }\n\n    .header {\n      order: 0;\n      flex-grow: 1;\n      align-items: center;\n\n      &:empty,\n      .subTitle:empty {\n        display: none;\n      }\n\n      .avatar,\n      .checkboxContainer {\n        align-self: start;\n      }\n\n      .checkboxContainer {\n        height: var(--avatar--size--m);\n      }\n    }\n\n    &:has(.subTitle:not(:empty)) {\n      .action,\n      .avatar,\n      .checkboxContainer {\n        margin-top: var(--size-px--xxs);\n      }\n    }\n\n    .topContent {\n      order: 1;\n    }\n\n    :global(.flow--heading--heading-content) {\n      max-width: 100%;\n    }\n  }\n\n  &.tileView {\n    gap: var(--list-item--padding);\n    border-color: var(--list-item--border-color);\n    border-width: var(--list-item--border-width);\n    border-style: var(--list-item--border-style);\n    border-radius: var(--list-item--corner-radius);\n    align-content: flex-start;\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n\n    .content {\n      flex-direction: column;\n      justify-content: flex-start;\n      align-items: flex-start;\n      padding-inline: var(--list-item--padding);\n      padding-bottom: var(--list-item--padding);\n      width: 100%;\n    }\n\n    .avatarContainer {\n      width: 100%;\n      border-bottom: var(--list-item--border-width)\n        var(--list-item--border-style) var(--list-item--border-color);\n      aspect-ratio: 16 / 9;\n\n      img {\n        overflow-clip-margin: unset;\n        aspect-ratio: 16 / 9;\n      }\n    }\n\n    .avatar {\n      width: 100%;\n      height: 100%;\n      border-radius: 0;\n\n      :global(.flow--avatar--icon) {\n        width: var(--size-px--xxl);\n        height: var(--size-px--xxl);\n      }\n\n      :global(.flow--avatar--initials) {\n        font-size: var(--size-px--xxl);\n      }\n    }\n\n    .checkboxContainer {\n      position: absolute;\n      top: var(--list-item--padding);\n      inset-inline-start: var(--list-item--padding);\n      background-color: var(--list-item--checkbox-background-color);\n      border-radius: var(--list-item--checkbox-corner-radius);\n\n      :global(.flow--checkbox .flow--checkbox--icon) {\n        color: var(--list-item--checkbox-color);\n        padding: var(--size-px--xxxs);\n      }\n    }\n\n    .title {\n      width: 100%;\n      min-width: 0;\n\n      :global(.flow--heading--heading-content) {\n        position: absolute;\n        top: var(--list-item--padding);\n        inset-inline: var(--list-item--padding);\n        justify-content: end;\n      }\n    }\n\n    &:has(.checkboxContainer:not(:empty)) {\n      :global(.flow--heading--heading-content) {\n        inset-inline-start: calc(var(--list-item--padding) * 2 + var(--icon--size--m));\n      }\n    }\n\n    .topContent,\n    .header {\n      width: 100%;\n    }\n\n    .action {\n      align-self: start;\n    }\n\n    .bottomContent {\n      margin-top: auto;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ListItemView.module.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/ListItemView/ListItemView.module.scss"],"sourcesContent":[".view {\n  display: flex;\n  flex-direction: column;\n\n  .checkboxContainer {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  .content {\n    min-width: 0;\n    display: flex;\n    gap: var(--list-item--spacing);\n    flex-grow: 1;\n    flex-wrap: wrap;\n  }\n\n  .topContent {\n    overflow-wrap: anywhere;\n    display: flex;\n  }\n\n  .bottomContent {\n    width: 100%;\n    overflow-wrap: anywhere;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .heading {\n    color: var(--text--color--default);\n    overflow-wrap: anywhere;\n  }\n\n  .header {\n    overflow-wrap: anywhere;\n    display: flex;\n    gap: var(--list-item--avatar-to-title-spacing);\n    max-width: 100%;\n  }\n\n  .subTitle {\n    font-size: var(--list-item--subtitle-font-size);\n\n    .text:not(:last-child)::after {\n      content: \"–\";\n      display: inline-block;\n      margin: 0 var(--size-rem--s);\n    }\n  }\n\n  .badge {\n    max-width: 100%;\n  }\n\n  &.listView {\n    padding: var(--list-item--padding);\n    gap: var(--list-item--spacing);\n\n    .columnLayout {\n      flex-grow: 1;\n\n      > :global(.flow--column-layout) {\n        flex-grow: 1;\n        align-items: center;\n      }\n    }\n\n    .contentWrapper {\n      display: flex;\n      gap: var(--list-item--spacing);\n      justify-content: space-between;\n      flex-grow: 1;\n      align-items: flex-start;\n    }\n\n    .content {\n      align-items: center;\n      align-self: center;\n      max-width: 100%;\n    }\n\n    .title {\n      max-width: 100%;\n      min-width: 0;\n    }\n\n    .action {\n      margin-inline-start: auto;\n\n      :global(.flow--button) {\n        margin-inline-end: 0;\n      }\n    }\n\n    .header {\n      order: 0;\n      flex-grow: 1;\n      align-items: center;\n\n      &:empty,\n      .subTitle:empty {\n        display: none;\n      }\n\n      .avatar,\n      .checkboxContainer {\n        align-self: start;\n      }\n\n      .checkboxContainer {\n        height: var(--avatar--size--m);\n      }\n    }\n\n    &:has(.subTitle:not(:empty)) {\n      .action,\n      .avatar,\n      .checkboxContainer {\n        margin-top: var(--size-px--xxs);\n      }\n    }\n\n    .topContent {\n      order: 1;\n    }\n\n    :global(.flow--heading--heading-content) {\n      max-width: 100%;\n    }\n  }\n\n  &.tileView {\n    gap: var(--list-item--padding);\n    border-color: var(--list-item--border-color);\n    border-width: var(--list-item--border-width);\n    border-style: var(--list-item--border-style);\n    border-radius: var(--list-item--corner-radius);\n    align-content: flex-start;\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n\n    .content {\n      flex-direction: column;\n      justify-content: flex-start;\n      align-items: flex-start;\n      padding-inline: var(--list-item--padding);\n      padding-bottom: var(--list-item--padding);\n      width: 100%;\n    }\n\n    .avatarContainer {\n      width: 100%;\n      border-bottom: var(--list-item--border-width)\n        var(--list-item--border-style) var(--list-item--border-color);\n      aspect-ratio: 16 / 9;\n\n      // A consumer child inside `Avatar` — Flow `Image` or a bare `<img>`.\n      // stylelint-disable-next-line selector-max-type -- bare `<img>` has no class\n      img {\n        overflow-clip-margin: unset;\n        aspect-ratio: 16 / 9;\n      }\n    }\n\n    .avatar {\n      width: 100%;\n      height: 100%;\n      border-radius: 0;\n\n      :global(.flow--avatar--icon) {\n        width: var(--size-px--xxl);\n        height: var(--size-px--xxl);\n      }\n\n      :global(.flow--avatar--initials) {\n        font-size: var(--size-px--xxl);\n      }\n    }\n\n    .checkboxContainer {\n      position: absolute;\n      top: var(--list-item--padding);\n      inset-inline-start: var(--list-item--padding);\n      background-color: var(--list-item--checkbox-background-color);\n      border-radius: var(--list-item--checkbox-corner-radius);\n\n      :global(.flow--checkbox .flow--checkbox--icon) {\n        color: var(--list-item--checkbox-color);\n        padding: var(--size-px--xxxs);\n      }\n    }\n\n    .title {\n      width: 100%;\n      min-width: 0;\n\n      :global(.flow--heading--heading-content) {\n        position: absolute;\n        top: var(--list-item--padding);\n        inset-inline: var(--list-item--padding);\n        justify-content: end;\n      }\n    }\n\n    &:has(.checkboxContainer:not(:empty)) {\n      :global(.flow--heading--heading-content) {\n        inset-inline-start: calc(var(--list-item--padding) * 2 + var(--icon--size--m));\n      }\n    }\n\n    .topContent,\n    .header {\n      width: 100%;\n    }\n\n    .action {\n      align-self: start;\n    }\n\n    .bottomContent {\n      margin-top: auto;\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/List/components/Table/Table.mjs

@@ -1,6 +1,7 @@
 "use client"
 /* */
 import { useList } from "../../hooks/useList.mjs";
+import { useInfiniteScrollTrigger } from "../../hooks/useInfiniteScrollTrigger.mjs";
 import Table_module_default from "./Table.module.mjs";
 import TableView from "../../../../views/TableView.mjs";
 import TableHeaderView from "../../../../views/TableHeaderView.mjs";
@@ -18,14 +19,17 @@ var Table = () => {
 	const listIsEmpty = list.useIsEmpty();
 	const isLoading = list.loader.useIsLoading();
 	const isInitiallyLoading = list.loader.useIsInitiallyLoading();
+	const isLoadingMore = list.loader.useIsLoadingMore();
+	const { triggerRef, triggerIndex } = useInfiniteScrollTrigger();
 	if (!table || listIsEmpty) return null;
 	const rowAction = table.list.onAction;
-	const tableClassName = clsx(Table_module_default.table, isLoading && Table_module_default.isLoading, table.componentProps.className);
-	const rows = list.items.entries.map((item) => /* @__PURE__ */ jsx(TableRowView, {
+	const tableClassName = clsx(Table_module_default.table, isLoading && !(list.infiniteScroll && isLoadingMore) && Table_module_default.isLoading, table.componentProps.className);
+	const rows = list.items.entries.map((item, index) => /* @__PURE__ */ jsx(TableRowView, {
 		className: clsx(Table_module_default.row, rowAction && Table_module_default.hasAction, table.body.row.componentProps.className),
 		id: item.id,
 		onAction: rowAction ? () => rowAction(item.data) : void 0,
 		...table.body.row.componentProps,
+		...index === triggerIndex ? { ref: triggerRef } : {},
 		children: table.body.row?.cells.map((cell, i) => /* @__PURE__ */ jsx(TableCellView, {
 			...cell.componentProps,
 			children: cell.renderFn ? cell.renderFn(item.data, list) : void 0

package/dist/js/packages/components/src/components/List/components/Table/Table.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/Table/Table.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List\";\nimport styles from \"./Table.module.scss\";\nimport clsx from \"clsx\";\nimport TableView from \"@/views/TableView\";\nimport TableHeaderView from \"@/views/TableHeaderView\";\nimport TableBodyView from \"@/views/TableBodyView\";\nimport TableRowView from \"@/views/TableRowView\";\nimport TableCellView from \"@/views/TableCellView\";\nimport TableColumnView from \"@/views/TableColumnView\";\nimport { TableBodyLoadingView } from \"@/components/List/components/Table/components/TableBodyLoadingView\";\n\nexport const Table: FC = () => {\n  const list = useList();\n  const table = list.table;\n  const listIsEmpty = list.useIsEmpty();\n\n  const isLoading = list.loader.useIsLoading();\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n\n  if (!table || listIsEmpty) {\n    return null;\n  }\n\n  const rowAction = table.list.onAction;\n\n  const tableClassName = clsx(\n    styles.table,\n    isLoading && styles.isLoading,\n    table.componentProps.className,\n  );\n\n  const rows = list.items.entries.map((item) => (\n    <TableRowView\n      className={clsx(\n        styles.row,\n        rowAction && styles.hasAction,\n        table.body.row.componentProps.className,\n      )}\n      key={item.id}\n      id={item.id}\n      onAction={rowAction ? () => rowAction(item.data) : undefined}\n      {...table.body.row.componentProps}\n    >\n      {table.body.row?.cells.map((cell, i) => (\n        <TableCellView key={i} {...cell.componentProps}>\n          {cell.renderFn ? cell.renderFn(item.data, list) : undefined}\n        </TableCellView>\n      ))}\n    </TableRowView>\n  ));\n\n  return (\n    <TableView\n      {...list.componentProps}\n      {...table.componentProps}\n      className={tableClassName}\n      aria-hidden={isInitiallyLoading}\n      aria-busy={isLoading}\n    >\n      <TableHeaderView {...table.header.componentProps}>\n        {table.header.columns.map((col, i) => (\n          <TableColumnView key={i} {...col.componentProps} />\n        ))}\n      </TableHeaderView>\n      <TableBodyView {...table.body.componentProps}>\n        {isInitiallyLoading ? <TableBodyLoadingView /> : rows}\n      </TableBodyView>\n    </TableView>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAYA,IAAa,cAAkB;CAC7B,MAAM,OAAO,QAAQ;CACrB,MAAM,QAAQ,KAAK;CACnB,MAAM,cAAc,KAAK,WAAW;CAEpC,MAAM,YAAY,KAAK,OAAO,aAAa;CAC3C,MAAM,qBAAqB,KAAK,OAAO,sBAAsB;CAE7D,IAAI,CAAC,SAAS,aACZ,OAAO;CAGT,MAAM,YAAY,MAAM,KAAK;CAE7B,MAAM,iBAAiB,KACrB,qBAAO,OACP,aAAa,qBAAO,WACpB,MAAM,eAAe,SACvB;CAEA,MAAM,OAAO,KAAK,MAAM,QAAQ,KAAK,SACnC,oBAAC,cAAD;EACE,WAAW,KACT,qBAAO,KACP,aAAa,qBAAO,WACpB,MAAM,KAAK,IAAI,eAAe,SAChC;EAEA,IAAI,KAAK;EACT,UAAU,kBAAkB,UAAU,KAAK,IAAI,IAAI,KAAA;EACnD,GAAI,MAAM,KAAK,IAAI;EAElB,UAAA,MAAM,KAAK,KAAK,MAAM,KAAK,MAAM,MAChC,oBAAC,eAAD;GAAuB,GAAI,KAAK;GAC7B,UAAA,KAAK,WAAW,KAAK,SAAS,KAAK,MAAM,IAAI,IAAI,KAAA;EACrC,GAFK,CAEL,CAChB;CACW,GAVP,KAAK,EAUE,CACf;CAED,OACE,qBAAC,WAAD;EACE,GAAI,KAAK;EACT,GAAI,MAAM;EACV,WAAW;EACX,eAAa;EACb,aAAW;EALb,UAAA,CAOE,oBAAC,iBAAD;GAAiB,GAAI,MAAM,OAAO;GAC/B,UAAA,MAAM,OAAO,QAAQ,KAAK,KAAK,MAC9B,oBAAC,iBAAD,EAAyB,GAAI,IAAI,eAAiB,GAA5B,CAA4B,CACnD;EACc,CAAA,GACjB,oBAAC,eAAD;GAAe,GAAI,MAAM,KAAK;GAC3B,UAAA,qBAAqB,oBAAC,sBAAD,CAAuB,CAAA,IAAI;EACpC,CAAA,CACN;;AAEf"}
+{"version":3,"file":"Table.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/Table/Table.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List\";\nimport styles from \"./Table.module.scss\";\nimport clsx from \"clsx\";\nimport TableView from \"@/views/TableView\";\nimport TableHeaderView from \"@/views/TableHeaderView\";\nimport TableBodyView from \"@/views/TableBodyView\";\nimport TableRowView from \"@/views/TableRowView\";\nimport TableCellView from \"@/views/TableCellView\";\nimport TableColumnView from \"@/views/TableColumnView\";\nimport { TableBodyLoadingView } from \"@/components/List/components/Table/components/TableBodyLoadingView\";\nimport { useInfiniteScrollTrigger } from \"@/components/List/hooks/useInfiniteScrollTrigger\";\n\nexport const Table: FC = () => {\n  const list = useList();\n  const table = list.table;\n  const listIsEmpty = list.useIsEmpty();\n\n  const isLoading = list.loader.useIsLoading();\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const isLoadingMore = list.loader.useIsLoadingMore();\n\n  const { triggerRef, triggerIndex } = useInfiniteScrollTrigger();\n\n  if (!table || listIsEmpty) {\n    return null;\n  }\n\n  const rowAction = table.list.onAction;\n\n  const tableClassName = clsx(\n    styles.table,\n    isLoading && !(list.infiniteScroll && isLoadingMore) && styles.isLoading,\n    table.componentProps.className,\n  );\n\n  const rows = list.items.entries.map((item, index) => (\n    <TableRowView\n      className={clsx(\n        styles.row,\n        rowAction && styles.hasAction,\n        table.body.row.componentProps.className,\n      )}\n      key={item.id}\n      id={item.id}\n      onAction={rowAction ? () => rowAction(item.data) : undefined}\n      {...table.body.row.componentProps}\n      {...(index === triggerIndex ? { ref: triggerRef } : {})}\n    >\n      {table.body.row?.cells.map((cell, i) => (\n        <TableCellView key={i} {...cell.componentProps}>\n          {cell.renderFn ? cell.renderFn(item.data, list) : undefined}\n        </TableCellView>\n      ))}\n    </TableRowView>\n  ));\n\n  return (\n    <TableView\n      {...list.componentProps}\n      {...table.componentProps}\n      className={tableClassName}\n      aria-hidden={isInitiallyLoading}\n      aria-busy={isLoading}\n    >\n      <TableHeaderView {...table.header.componentProps}>\n        {table.header.columns.map((col, i) => (\n          <TableColumnView key={i} {...col.componentProps} />\n        ))}\n      </TableHeaderView>\n      <TableBodyView {...table.body.componentProps}>\n        {isInitiallyLoading ? <TableBodyLoadingView /> : rows}\n      </TableBodyView>\n    </TableView>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAaA,IAAa,cAAkB;CAC7B,MAAM,OAAO,QAAQ;CACrB,MAAM,QAAQ,KAAK;CACnB,MAAM,cAAc,KAAK,WAAW;CAEpC,MAAM,YAAY,KAAK,OAAO,aAAa;CAC3C,MAAM,qBAAqB,KAAK,OAAO,sBAAsB;CAC7D,MAAM,gBAAgB,KAAK,OAAO,iBAAiB;CAEnD,MAAM,EAAE,YAAY,iBAAiB,yBAAyB;CAE9D,IAAI,CAAC,SAAS,aACZ,OAAO;CAGT,MAAM,YAAY,MAAM,KAAK;CAE7B,MAAM,iBAAiB,KACrB,qBAAO,OACP,aAAa,EAAE,KAAK,kBAAkB,kBAAkB,qBAAO,WAC/D,MAAM,eAAe,SACvB;CAEA,MAAM,OAAO,KAAK,MAAM,QAAQ,KAAK,MAAM,UACzC,oBAAC,cAAD;EACE,WAAW,KACT,qBAAO,KACP,aAAa,qBAAO,WACpB,MAAM,KAAK,IAAI,eAAe,SAChC;EAEA,IAAI,KAAK;EACT,UAAU,kBAAkB,UAAU,KAAK,IAAI,IAAI,KAAA;EACnD,GAAI,MAAM,KAAK,IAAI;EACnB,GAAK,UAAU,eAAe,EAAE,KAAK,WAAW,IAAI,CAAC;EAEpD,UAAA,MAAM,KAAK,KAAK,MAAM,KAAK,MAAM,MAChC,oBAAC,eAAD;GAAuB,GAAI,KAAK;GAC7B,UAAA,KAAK,WAAW,KAAK,SAAS,KAAK,MAAM,IAAI,IAAI,KAAA;EACrC,GAFK,CAEL,CAChB;CACW,GAXP,KAAK,EAWE,CACf;CAED,OACE,qBAAC,WAAD;EACE,GAAI,KAAK;EACT,GAAI,MAAM;EACV,WAAW;EACX,eAAa;EACb,aAAW;EALb,UAAA,CAOE,oBAAC,iBAAD;GAAiB,GAAI,MAAM,OAAO;GAC/B,UAAA,MAAM,OAAO,QAAQ,KAAK,KAAK,MAC9B,oBAAC,iBAAD,EAAyB,GAAI,IAAI,eAAiB,GAA5B,CAA4B,CACnD;EACc,CAAA,GACjB,oBAAC,eAAD;GAAe,GAAI,MAAM,KAAK;GAC3B,UAAA,qBAAqB,oBAAC,sBAAD,CAAuB,CAAA,IAAI;EACpC,CAAA,CACN;;AAEf"}

package/dist/js/packages/components/src/components/List/{components/Items/hooks → hooks}/useInfiniteScrollTrigger.mjs

@@ -1,34 +1,33 @@
 "use client"
 /* */
-import { useList } from "../../../hooks/useList.mjs";
-import { useEffect, useEffectEvent } from "react";
-//#region src/components/List/components/Items/hooks/useInfiniteScrollTrigger.ts
+import { useList } from "./useList.mjs";
+import { useEffect, useEffectEvent, useState } from "react";
+//#region src/components/List/hooks/useInfiniteScrollTrigger.ts
 var loadMoreThresholdFactor = .2;
 var minLoadMoreThresholdRows = 1;
 var maxLoadMoreThresholdRows = 8;
 var getLoadMoreThresholdRows = (batchSize) => Math.min(maxLoadMoreThresholdRows, Math.max(minLoadMoreThresholdRows, Math.round(batchSize * loadMoreThresholdFactor)));
-var useInfiniteScrollTrigger = (triggerRef) => {
+var useInfiniteScrollTrigger = () => {
 	const list = useList();
 	const isLoading = list.loader.useIsLoading();
-	const visibleItemsCount = list.batches.getVisibleItemsCount();
+	const [trigger, setTrigger] = useState(null);
 	const loadNextBatch = useEffectEvent(() => {
 		if (list.batches.hasNextBatch() && !isLoading) list.batches.nextBatch();
 	});
 	useEffect(() => {
-		const trigger = triggerRef.current;
 		if (!trigger) return;
 		const observer = new IntersectionObserver((entries) => {
 			if (entries.some((entry) => entry.isIntersecting)) loadNextBatch();
 		});
 		observer.observe(trigger);
 		return () => observer.disconnect();
-	}, [
-		loadNextBatch,
-		triggerRef,
-		visibleItemsCount
-	]);
+	}, [trigger]);
+	return {
+		triggerRef: setTrigger,
+		triggerIndex: list.infiniteScroll ? Math.max(0, list.items.entries.length - getLoadMoreThresholdRows(list.batches.batchSize)) : void 0
+	};
 };
 //#endregion
-export { getLoadMoreThresholdRows, useInfiniteScrollTrigger };
+export { useInfiniteScrollTrigger };
 
 //# sourceMappingURL=useInfiniteScrollTrigger.mjs.map

package/dist/js/packages/components/src/components/List/hooks/useInfiniteScrollTrigger.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInfiniteScrollTrigger.mjs","names":[],"sources":["../../../../../../../../src/components/List/hooks/useInfiniteScrollTrigger.ts"],"sourcesContent":["import { useEffect, useEffectEvent, useState, type RefCallback } from \"react\";\nimport { useList } from \"./useList\";\n\nconst loadMoreThresholdFactor = 0.2;\nconst minLoadMoreThresholdRows = 1;\nconst maxLoadMoreThresholdRows = 8;\n\nconst getLoadMoreThresholdRows = (batchSize: number): number =>\n  Math.min(\n    maxLoadMoreThresholdRows,\n    Math.max(\n      minLoadMoreThresholdRows,\n      Math.round(batchSize * loadMoreThresholdFactor),\n    ),\n  );\n\ninterface InfiniteScrollTrigger {\n  /**\n   * Attach to whatever the view renders for `triggerIndex`. A callback ref, so\n   * the observer follows the trigger as it moves on with every loaded batch — a\n   * ref object would leave the effect without a signal that the element it\n   * observes has been replaced.\n   */\n  triggerRef: RefCallback<HTMLElement>;\n  /**\n   * Index of the item that loads the next batch once it scrolls into view, or\n   * `undefined` while infinite scrolling is off.\n   */\n  triggerIndex: number | undefined;\n}\n\nexport const useInfiniteScrollTrigger = (): InfiniteScrollTrigger => {\n  const list = useList();\n  const isLoading = list.loader.useIsLoading();\n  const [trigger, setTrigger] = useState<HTMLElement | null>(null);\n\n  const loadNextBatch = useEffectEvent(() => {\n    if (list.batches.hasNextBatch() && !isLoading) {\n      list.batches.nextBatch();\n    }\n  });\n\n  useEffect(() => {\n    if (!trigger) {\n      return;\n    }\n\n    const observer = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        loadNextBatch();\n      }\n    });\n    observer.observe(trigger);\n\n    return () => observer.disconnect();\n  }, [trigger]);\n\n  return {\n    triggerRef: setTrigger,\n    triggerIndex: list.infiniteScroll\n      ? Math.max(\n          0,\n          list.items.entries.length -\n            getLoadMoreThresholdRows(list.batches.batchSize),\n        )\n      : undefined,\n  };\n};\n"],"mappings":";;;;;AAGA,IAAM,0BAA0B;AAChC,IAAM,2BAA2B;AACjC,IAAM,2BAA2B;AAEjC,IAAM,4BAA4B,cAChC,KAAK,IACH,0BACA,KAAK,IACH,0BACA,KAAK,MAAM,YAAY,uBAAuB,CAChD,CACF;AAiBF,IAAa,iCAAwD;CACnE,MAAM,OAAO,QAAQ;CACrB,MAAM,YAAY,KAAK,OAAO,aAAa;CAC3C,MAAM,CAAC,SAAS,cAAc,SAA6B,IAAI;CAE/D,MAAM,gBAAgB,qBAAqB;EACzC,IAAI,KAAK,QAAQ,aAAa,KAAK,CAAC,WAClC,KAAK,QAAQ,UAAU;CAE3B,CAAC;CAED,gBAAgB;EACd,IAAI,CAAC,SACH;EAGF,MAAM,WAAW,IAAI,sBAAsB,YAAY;GACrD,IAAI,QAAQ,MAAM,UAAU,MAAM,cAAc,GAC9C,cAAc;EAElB,CAAC;EACD,SAAS,QAAQ,OAAO;EAExB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,OAAO,CAAC;CAEZ,OAAO;EACL,YAAY;EACZ,cAAc,KAAK,iBACf,KAAK,IACH,GACA,KAAK,MAAM,QAAQ,SACjB,yBAAyB,KAAK,QAAQ,SAAS,CACnD,IACA,KAAA;CACN;AACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"Markdown.module.mjs","names":[],"sources":["../../../../../../../src/components/Markdown/Markdown.module.scss"],"sourcesContent":[".markdown {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--markdown--spacing);\n  min-width: 0;\n\n  p {\n    white-space: break-spaces;\n  }\n\n  table {\n    border-radius: var(--table--corner-radius);\n    overflow: hidden;\n    border-width: var(--table--border-width);\n    border-style: var(--table--border-style);\n    border-color: var(--table--border-color);\n    border-spacing: 0;\n    background-color: var(--table--background-color);\n\n    thead {\n      font-weight: var(--table--header-font-weight);\n    }\n\n    th,\n    td {\n      padding-inline: var(--table--padding-x);\n      padding-block: var(--table--padding-y);\n      text-align: start;\n      border-style: var(--table--border-style);\n      border-color: var(--table--border-color);\n      border-width: 0;\n    }\n\n    th {\n      border-block-end-width: var(--table--header-border-width);\n    }\n\n    tbody tr {\n      &:nth-of-type(odd) td {\n        background-color: var(--table--background-color-accent);\n      }\n\n      &:not(:last-child) td {\n        border-block-end-width: var(--table--border-width);\n      }\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Markdown.module.mjs","names":[],"sources":["../../../../../../../src/components/Markdown/Markdown.module.scss"],"sourcesContent":[".markdown {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--markdown--spacing);\n  min-width: 0;\n\n  /* Everything below styles react-markdown's output. Consumers can replace any\n     renderer through the `components` prop, so these rules have to match the\n     element, not a Flow class that a replacement would not carry. */\n  // stylelint-disable-next-line selector-max-type -- react-markdown output\n  p {\n    white-space: break-spaces;\n  }\n\n  // remark-gfm renders the table markup itself — Markdown overrides no table\n  // renderer, so none of these elements carries a class.\n  // stylelint-disable selector-max-type -- react-markdown table output\n  table {\n    border-radius: var(--table--corner-radius);\n    overflow: hidden;\n    border-width: var(--table--border-width);\n    border-style: var(--table--border-style);\n    border-color: var(--table--border-color);\n    border-spacing: 0;\n    background-color: var(--table--background-color);\n\n    thead {\n      font-weight: var(--table--header-font-weight);\n    }\n\n    th,\n    td {\n      padding-inline: var(--table--padding-x);\n      padding-block: var(--table--padding-y);\n      text-align: start;\n      border-style: var(--table--border-style);\n      border-color: var(--table--border-color);\n      border-width: 0;\n    }\n\n    th {\n      border-block-end-width: var(--table--header-border-width);\n    }\n\n    tbody tr {\n      &:nth-of-type(odd) td {\n        background-color: var(--table--background-color-accent);\n      }\n\n      &:not(:last-child) td {\n        border-block-end-width: var(--table--border-width);\n      }\n    }\n  }\n  // stylelint-enable selector-max-type\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"MarkdownEditor.module.mjs","names":[],"sources":["../../../../../../../src/components/MarkdownEditor/MarkdownEditor.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n@use \"@/styles/mixins/scrollbar\";\n\n.markdownEditor {\n  display: grid;\n  grid-template-areas:\n    \"label\"\n    \"toolbar\"\n    \"content\"\n    \"fieldDescription\";\n\n  .toolbar {\n    grid-area: toolbar;\n    display: flex;\n    justify-content: space-between;\n    padding: var(--form-control--padding-y);\n    column-gap: var(--form-control--padding-y);\n    flex-wrap: wrap;\n\n    @include formControl.formBorder;\n    @include formControl.formColor;\n    @include formControl.formAnimation;\n\n    & {\n      border-bottom: none;\n      border-end-start-radius: 0;\n      border-end-end-radius: 0;\n    }\n  }\n\n  .toolbarButtons {\n    display: flex;\n    flex-wrap: wrap;\n    column-gap: var(--form-control--padding-y);\n  }\n\n  .modeButton {\n    margin-inline-start: auto;\n  }\n\n  .markdown {\n    overflow-y: auto;\n\n    @include formControl.formBorder;\n    @include formControl.formColor;\n  }\n\n  :global(.flow--form-field) {\n    display: contents;\n  }\n\n  textarea,\n  .markdown {\n    @include scrollbar.scrollbar;\n\n    grid-area: content;\n    padding-block: calc(\n      var(--form-control--padding-y) - var(--form-control--border-width)\n    );\n    padding-inline: var(--form-control--padding-x);\n    border-start-start-radius: 0;\n    border-start-end-radius: 0;\n  }\n\n  &.mode-editor {\n    .markdown {\n      display: none;\n    }\n  }\n\n  &.mode-preview {\n    textarea {\n      position: absolute;\n      opacity: 0;\n      pointer-events: none;\n      width: 1px;\n      height: 1px;\n      inset-inline-start: 0;\n    }\n  }\n\n  /* States */\n\n  &:has(textarea:hover) .toolbar {\n    background-color: var(--form-control--background-color--hover);\n  }\n\n  &:has(textarea[data-invalid]) .toolbar,\n  &:has(textarea[data-invalid]) .markdown {\n    background-color: var(--form-control--background-color--invalid);\n    border-color: var(--form-control--border-color--invalid);\n  }\n\n  &:has(textarea[data-focused=\"true\"]) .toolbar,\n  &:has(textarea[data-focused=\"true\"]) .markdown {\n    background-color: var(--form-control--background-color--focused);\n    border-color: var(--form-control--border-color--focused);\n  }\n\n  &:has(textarea[data-disabled]).mode-editor .toolbar {\n    background-color: var(--form-control--background-color--disabled);\n    border-color: var(--form-control--border-color--disabled);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"MarkdownEditor.module.mjs","names":[],"sources":["../../../../../../../src/components/MarkdownEditor/MarkdownEditor.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n@use \"@/styles/mixins/scrollbar\";\n\n.markdownEditor {\n  display: grid;\n  grid-template-areas:\n    \"label\"\n    \"toolbar\"\n    \"content\"\n    \"fieldDescription\";\n\n  .toolbar {\n    grid-area: toolbar;\n    display: flex;\n    justify-content: space-between;\n    padding: var(--form-control--padding-y);\n    column-gap: var(--form-control--padding-y);\n    flex-wrap: wrap;\n\n    @include formControl.formBorder;\n    @include formControl.formColor;\n    @include formControl.formAnimation;\n\n    & {\n      border-bottom: none;\n      border-end-start-radius: 0;\n      border-end-end-radius: 0;\n    }\n  }\n\n  .toolbarButtons {\n    display: flex;\n    flex-wrap: wrap;\n    column-gap: var(--form-control--padding-y);\n  }\n\n  .modeButton {\n    margin-inline-start: auto;\n  }\n\n  .markdown {\n    overflow-y: auto;\n\n    @include formControl.formBorder;\n    @include formControl.formColor;\n  }\n\n  :global(.flow--form-field) {\n    display: contents;\n  }\n\n  /* The inner text-area element is react-aria's, but Flow's TextArea puts a\n     class on it — select through that class instead of the element type. */\n  :global(.flow--text-area--input),\n  .markdown {\n    @include scrollbar.scrollbar;\n\n    grid-area: content;\n    padding-block: calc(\n      var(--form-control--padding-y) - var(--form-control--border-width)\n    );\n    padding-inline: var(--form-control--padding-x);\n    border-start-start-radius: 0;\n    border-start-end-radius: 0;\n  }\n\n  &.mode-editor {\n    .markdown {\n      display: none;\n    }\n  }\n\n  &.mode-preview {\n    :global(.flow--text-area--input) {\n      position: absolute;\n      opacity: 0;\n      pointer-events: none;\n      width: 1px;\n      height: 1px;\n      inset-inline-start: 0;\n    }\n  }\n\n  /* States */\n\n  &:has(:global(.flow--text-area--input:hover)) .toolbar {\n    background-color: var(--form-control--background-color--hover);\n  }\n\n  &:has(:global(.flow--text-area--input[data-invalid])) .toolbar,\n  &:has(:global(.flow--text-area--input[data-invalid])) .markdown {\n    background-color: var(--form-control--background-color--invalid);\n    border-color: var(--form-control--border-color--invalid);\n  }\n\n  &:has(:global(.flow--text-area--input[data-focused=\"true\"])) .toolbar,\n  &:has(:global(.flow--text-area--input[data-focused=\"true\"])) .markdown {\n    background-color: var(--form-control--background-color--focused);\n    border-color: var(--form-control--border-color--focused);\n  }\n\n  &:has(:global(.flow--text-area--input[data-disabled])).mode-editor .toolbar {\n    background-color: var(--form-control--background-color--disabled);\n    border-color: var(--form-control--border-color--disabled);\n  }\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"MessageThread.module.mjs","names":[],"sources":["../../../../../../../src/components/MessageThread/MessageThread.module.scss"],"sourcesContent":[".messageThread {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--message-thread--spacing);\n  width: 100%;\n\n  > li {\n    list-style: none;\n  }\n\n  .message {\n    &.responder {\n      padding-inline-end: var(--message-thread--indentation);\n    }\n\n    &.sender {\n      padding-inline-start: var(--message-thread--indentation);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"MessageThread.module.mjs","names":[],"sources":["../../../../../../../src/components/MessageThread/MessageThread.module.scss"],"sourcesContent":[".messageThread {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--message-thread--spacing);\n  width: 100%;\n\n  /* `> li` is load-bearing: #3160 narrowed it from `li` so that an ordered\n     list inside a message keeps its markers. The items come from `Message` /\n     `MessageSeparator`, so a class would have to enumerate the slot. */\n  // stylelint-disable-next-line selector-max-type -- see above\n  > li {\n    list-style: none;\n  }\n\n  .message {\n    &.responder {\n      padding-inline-end: var(--message-thread--indentation);\n    }\n\n    &.sender {\n      padding-inline-start: var(--message-thread--indentation);\n    }\n  }\n}\n"],"mappings":""}

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

@@ -86,16 +86,14 @@ var Modal = flowComponent("Modal", (props) => {
 					};
 				}),
 				closeOverlay: dynamic((props) => {
-					const { closeOverlay } = props;
-					if (closeOverlay === void 0 || closeOverlay === false) return closeOverlay;
-					if (closeOverlay === true) return { bypassConfirmation: true };
-					if (closeOverlay instanceof OverlayController || typeof closeOverlay === "string") return {
+					if (props.closeOverlay === void 0) return;
+					if (props.closeOverlay instanceof OverlayController || typeof props.closeOverlay === "string") return {
 						bypassConfirmation: true,
-						overlay: closeOverlay
+						overlay: props.closeOverlay
 					};
 					return {
 						bypassConfirmation: true,
-						...closeOverlay
+						...props.closeOverlay
 					};
 				})
 			}

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

@@ -1 +1 @@
-{"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 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.\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":";;;;;;;;;;;;;;;;;;;;;;;;AAgEA,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,CACE,oBAAC,SAAD;EAAS,WAAW,qBAAO;EAAc;CAAkB,CAAA,GAC3D,oBAAC,mBAAD,EAAA,UACE,oBAAC,uBAAD,EAAA,UACE,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,EACa,CAAA,EACN,CAAA,CACnB,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,MAAM,EAAE,iBAAiB;KACzB,IAAI,iBAAiB,KAAA,KAAa,iBAAiB,OACjD,OAAO;KAIT,IAAI,iBAAiB,MACnB,OAAO,EAAE,oBAAoB,KAAK;KAEpC,IACE,wBAAwB,qBACxB,OAAO,iBAAiB,UAExB,OAAO;MACL,oBAAoB;MACpB,SAAS;KACX;KAEF,OAAO;MACL,oBAAoB;MACpB,GAAG;KACL;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"}
+{"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 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.\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          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":";;;;;;;;;;;;;;;;;;;;;;;;AAgEA,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,CACE,oBAAC,SAAD;EAAS,WAAW,qBAAO;EAAc;CAAkB,CAAA,GAC3D,oBAAC,mBAAD,EAAA,UACE,oBAAC,uBAAD,EAAA,UACE,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,EACa,CAAA,EACN,CAAA,CACnB,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"}