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

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

@@ -13,7 +13,7 @@ import LightBox_module_default from "./LightBox.module.mjs";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocalizedStringFormatter } from "react-aria";
-//#region src/components/LightBox/LightBox.tsx
+// src/components/LightBox/LightBox.tsx
 var LightBox = flowComponent("LightBox", (props) => {
 	const { controller: controllerFromProps, children, ref: ignoredRef, className, fitScreen = true, ...rest } = props;
 	const rootClassName = clsx(LightBox_module_default.lightBox, fitScreen && LightBox_module_default.fitScreen, className);
@@ -62,7 +62,6 @@ var LightBox = flowComponent("LightBox", (props) => {
 		})
 	});
 });
-//#endregion
 export { LightBox, LightBox as default };
 
 //# sourceMappingURL=LightBox.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/LightBox/LightBox.module.scss
+// src/components/LightBox/LightBox.module.scss
 var lightBox = "flow--light-box";
 var content = "flow--light-box--content";
 var fitScreen = "flow--light-box--fit-screen";
@@ -15,7 +15,6 @@ var LightBox_module_default = {
 	actionGroup,
 	gallery
 };
-//#endregion
 export { actionGroup, actions, content, LightBox_module_default as default, fitScreen, gallery, lightBox };
 
 //# sourceMappingURL=LightBox.module.mjs.map

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

@@ -5,7 +5,7 @@ import LightBoxGallery_module_default from "./LightBoxGallery.module.mjs";
 import __locale_default from "../../../../../../../_virtual/_22.locale.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/LightBox/components/LightBoxGallery/Controls.tsx
+// src/components/LightBox/components/LightBoxGallery/Controls.tsx
 var Controls = (props) => {
 	const { count, currentIndex } = props;
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "LightBox");
@@ -19,7 +19,6 @@ var Controls = (props) => {
 		children: indicators
 	});
 };
-//#endregion
 export { Controls };
 
 //# sourceMappingURL=Controls.mjs.map

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

@@ -11,7 +11,7 @@ import clsx from "clsx";
 import React, { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocalizedStringFormatter } from "react-aria";
-//#region src/components/LightBox/components/LightBoxGallery/LightBoxGallery.tsx
+// src/components/LightBox/components/LightBoxGallery/LightBoxGallery.tsx
 /** @flr-generate all */
 var LightBoxGallery = flowComponent("LightBoxGallery", (props) => {
 	const { children, className, defaultIndex = 0 } = props;
@@ -99,7 +99,6 @@ var LightBoxGallery = flowComponent("LightBoxGallery", (props) => {
 		})
 	});
 });
-//#endregion
 export { LightBoxGallery, LightBoxGallery as default };
 
 //# sourceMappingURL=LightBoxGallery.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/LightBox/components/LightBoxGallery/LightBoxGallery.module.scss
+// src/components/LightBox/components/LightBoxGallery/LightBoxGallery.module.scss
 var lightBoxGallery = "flow--light-box--light-box-gallery";
 var content = "flow--light-box--light-box-gallery--content";
 var galleryItem = "flow--light-box--light-box-gallery--gallery-item";
@@ -28,7 +28,6 @@ var LightBoxGallery_module_default = {
 	nextButton,
 	controls
 };
-//#endregion
 export { actionGroup, actions, content, controls, current, LightBoxGallery_module_default as default, galleryItem, image, indicator, indicators, lightBoxGallery, nextButton, previousButton };
 
 //# sourceMappingURL=LightBoxGallery.module.mjs.map

package/dist/js/packages/components/src/components/LightBox/components/LightBoxGalleryItem/LightBoxGalleryItem.mjs

@@ -10,7 +10,7 @@ import LightBoxGallery_module_default from "../LightBoxGallery/LightBoxGallery.m
 import __locale_default from "../../../../../../../_virtual/_22.locale.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocalizedStringFormatter } from "react-aria";
-//#region src/components/LightBox/components/LightBoxGalleryItem/LightBoxGalleryItem.tsx
+// src/components/LightBox/components/LightBoxGalleryItem/LightBoxGalleryItem.tsx
 /** @flr-generate all */
 var LightBoxGalleryItem = flowComponent("LightBoxGalleryItem", (props) => {
 	const { children } = props;
@@ -44,7 +44,6 @@ var LightBoxGalleryItem = flowComponent("LightBoxGalleryItem", (props) => {
 		})]
 	});
 });
-//#endregion
 export { LightBoxGalleryItem, LightBoxGalleryItem as default };
 
 //# sourceMappingURL=LightBoxGalleryItem.mjs.map

package/dist/js/packages/components/src/components/LightBox/components/LightBoxTrigger/LightBoxTrigger.mjs

@@ -3,7 +3,7 @@
 import { OverlayTrigger } from "../../../OverlayTrigger/OverlayTrigger.mjs";
 import DialogTriggerView from "../../../../views/DialogTriggerView.mjs";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/LightBox/components/LightBoxTrigger/LightBoxTrigger.tsx
+// src/components/LightBox/components/LightBoxTrigger/LightBoxTrigger.tsx
 var LightBoxTrigger = (props) => {
 	const { children, ...triggerProps } = props;
 	return /* @__PURE__ */ jsx(OverlayTrigger, {
@@ -13,7 +13,6 @@ var LightBoxTrigger = (props) => {
 		children
 	});
 };
-//#endregion
 export { LightBoxTrigger, LightBoxTrigger as default };
 
 //# sourceMappingURL=LightBoxTrigger.mjs.map

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

@@ -17,7 +17,7 @@ import { useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { handleLinkClick, useRouter } from "@react-aria/utils";
 import * as Aria from "react-aria-components";
-//#region src/components/Link/Link.tsx
+// src/components/Link/Link.tsx
 /** @flr-generate all */
 var Link = flowComponent("Link", (props) => {
 	const { children, className, inline, linkComponent: linkComponentFromProps, color = "default", unstyled = false, "aria-current": ariaCurrent, ref, slot: ignoredSlotProp, style, whiteSpace, size = "m", onClickCapture: onClickCaptureFromProps, target, download, ...rest } = props;
@@ -104,7 +104,6 @@ var Link = flowComponent("Link", (props) => {
 		children: content
 	});
 });
-//#endregion
 export { Link, Link as default };
 
 //# sourceMappingURL=Link.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Link.mjs","names":["styles","_Fragment","_jsx"],"sources":["../../../../../../../src/components/Link/Link.tsx"],"sourcesContent":["import type {\n  ComponentProps,\n  ComponentType,\n  CSSProperties,\n  MouseEvent,\n  PropsWithChildren,\n} from \"react\";\nimport { useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { dynamic, type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./Link.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport {\n  type AlphaColor,\n  isAlphaColor,\n  type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { linkContext } from \"@/components/Link/context\";\nimport { LinkIcon } from \"@/components/Link/components/LinkIcon\";\nimport { handleLinkClick, useRouter } from \"@react-aria/utils\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\nimport { hasContent } from \"@/components/SkeletonMode/lib/hasContent\";\nimport { containsTextChild } from \"@/lib/react/remote\";\n\nexport interface LinkProps\n  extends\n    PropsWithChildren<Omit<Aria.LinkProps, \"children\" | \"slot\" | \"className\">>,\n    FlowComponentProps<HTMLAnchorElement>,\n    PropsWithClassName {\n  /** Whether the link should be styled for being displayed inside a text. */\n  inline?: boolean;\n  /** An alternative link component. */\n  linkComponent?: ComponentType<Omit<ComponentProps<\"a\">, \"ref\">>;\n  /** The color of the link. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** Marks the link as the currently active one, e.g. in a navigation. */\n  \"aria-current\"?: string;\n  /**\n   * The name of the slot the link is placed in. In action groups: `primary` (at\n   * the end), `secondary` (before the primary action) or `abort` (at the\n   * start).\n   */\n  slot?: string;\n  /** The whiteSpace css value of the element. */\n  whiteSpace?: CSSProperties[\"whiteSpace\"];\n  /** The size of the element. @default \"m\" */\n  size?: \"s\" | \"m\";\n  /** @internal */\n  unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Link = flowComponent(\"Link\", (props) => {\n  const {\n    children,\n    className,\n    inline,\n    linkComponent: linkComponentFromProps,\n    color = \"default\",\n    unstyled = false,\n    \"aria-current\": ariaCurrent,\n    ref,\n    slot: ignoredSlotProp,\n    style,\n    whiteSpace,\n    size = \"m\",\n    onClickCapture: onClickCaptureFromProps,\n    target,\n    download,\n    ...rest\n  } = props;\n\n  const { linkComponent: linkComponentFromContext } = useContext(linkContext);\n  const isSkeleton = useSkeletonMode();\n  const Link = linkComponentFromProps\n    ? (linkComponentFromProps as typeof Aria.Link)\n    : props.href && linkComponentFromContext\n      ? (linkComponentFromContext as typeof Aria.Link)\n      : Aria.Link;\n\n  const router = useRouter();\n\n  /**\n   * An interactive child (e.g. a Button) stops click propagation via React\n   * Aria's `usePress`, so the anchor's own `onClick` never runs and navigation\n   * falls back to a full page load. Handling it in the capture phase (top-down,\n   * before the child) keeps navigation client-side. Only needed for React\n   * Aria's `<a>`; custom link components handle navigation themselves.\n   */\n  const handleClickCapture =\n    Link === Aria.Link && props.href\n      ? (event: MouseEvent<HTMLAnchorElement>) => {\n          onClickCaptureFromProps?.(event);\n          if (event.target !== event.currentTarget) {\n            handleLinkClick(event, router, props.href, props.routerOptions);\n          }\n        }\n      : onClickCaptureFromProps;\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(\n        styles.link,\n        inline && styles.inline,\n        isAlphaColor(color) && styles[color],\n        size === \"s\" && styles[\"size-s\"],\n        className,\n      );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      tunnel: {\n        component: \"Link\",\n        id: \"icon\",\n      },\n      className: styles.icon,\n      size: \"s\",\n    },\n    AlertText: {\n      className: styles.alertText,\n    },\n    AccentBox: { className: styles.accentBox },\n    LayoutCard: { className: styles.layoutCard },\n    Button: {\n      elementType: \"span\",\n      className: styles.button,\n      size: props.size,\n      color: props.color === \"default\" ? undefined : props.color,\n      isDisabled: props.isDisabled,\n      children: dynamic((buttonProps) => (\n        <>\n          {buttonProps.children}\n          <LinkIcon download={download} target={target} unstyled={unstyled} />\n        </>\n      )),\n    },\n  };\n\n  const unsupportedTypingsLinkProps = ariaCurrent\n    ? ({\n        \"aria-current\": true,\n      } as Record<string, unknown>)\n    : {};\n\n  /* Without text of its own — a Link styled as a Button, a Link around a\n     LayoutCard — the content follows its own skeleton rules instead of\n     becoming a text bar. */\n  const hasOnlyElements = hasContent(children) && !containsTextChild(children);\n\n  const textBars = (\n    <SkeletonTextContent defaultWidth=\"6em\">{children}</SkeletonTextContent>\n  );\n\n  const content = (\n    <PropsContextProvider props={propsContext}>\n      {hasOnlyElements ? children : textBars}\n      <LinkIcon\n        withZeroWidthJoiner\n        unstyled={unstyled}\n        target={target}\n        download={download}\n      >\n        <UiComponentTunnelExit id={\"icon\"} component={\"Link\"} />\n      </LinkIcon>\n    </PropsContextProvider>\n  );\n\n  /* react-aria's Link drops `inert`, and a skeleton needs no anchor. */\n  if (isSkeleton) {\n    return (\n      <span className={rootClassName} style={{ ...style, whiteSpace }} inert>\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <Link\n      {...unsupportedTypingsLinkProps}\n      {...rest}\n      target={target}\n      download={download}\n      onClickCapture={handleClickCapture}\n      className={rootClassName}\n      ref={ref}\n      style={{ ...style, whiteSpace }}\n    >\n      {content}\n    </Link>\n  );\n});\n\nexport default Link;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyDA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,QACA,eAAe,wBACf,QAAQ,WACR,WAAW,OACX,gBAAgB,aAChB,KACA,MAAM,iBACN,OACA,YACA,OAAO,KACP,gBAAgB,yBAChB,QACA,UACA,GAAG,SACD;CAEJ,MAAM,EAAE,eAAe,6BAA6B,WAAW,WAAW;CAC1E,MAAM,aAAa,gBAAgB;CACnC,MAAM,OAAO,yBACR,yBACD,MAAM,QAAQ,2BACX,2BACD,KAAK;CAEX,MAAM,SAAS,UAAU;;;;;;;;CASzB,MAAM,qBACJ,SAAS,KAAK,QAAQ,MAAM,QACvB,UAAyC;EACxC,0BAA0B,KAAK;EAC/B,IAAI,MAAM,WAAW,MAAM,eACzB,gBAAgB,OAAO,QAAQ,MAAM,MAAM,MAAM,aAAa;CAElE,IACA;CAEN,MAAM,gBAAgB,WAClB,YACA,KACEA,oBAAO,MACP,UAAUA,oBAAO,QACjB,aAAa,KAAK,KAAKA,oBAAO,QAC9B,SAAS,OAAOA,oBAAO,WACvB,SACF;CAEJ,MAAM,eAA6B;EACjC,MAAM;GACJ,QAAQ;IACN,WAAW;IACX,IAAI;GACN;GACA,WAAWA,oBAAO;GAClB,MAAM;EACR;EACA,WAAW,EACT,WAAWA,oBAAO,UACpB;EACA,WAAW,EAAE,WAAWA,oBAAO,UAAU;EACzC,YAAY,EAAE,WAAWA,oBAAO,WAAW;EAC3C,QAAQ;GACN,aAAa;GACb,WAAWA,oBAAO;GAClB,MAAM,MAAM;GACZ,OAAO,MAAM,UAAU,YAAY,KAAA,IAAY,MAAM;GACrD,YAAY,MAAM;GAClB,UAAU,SAAS,gBACjB,qBAAAC,YAAA,EAAA,UAAA,CACG,YAAY,UACb,oBAAC,UAAD;IAAoB;IAAkB;IAAkB;GAAW,CAAA,CACnE,EAAA,CAAA,CACH;EACH;CACF;CAEA,MAAM,8BAA8B,cAC/B,EACC,gBAAgB,KAClB,IACA,CAAC;CAKL,MAAM,kBAAkB,WAAW,QAAQ,KAAK,CAAC,kBAAkB,QAAQ;CAM3E,MAAM,UACJ,qBAAC,sBAAD;EAAsB,OAAO;EAA7B,UAAA,CACG,kBAAkB,WALrBC,oBAAC,qBAAD;GAAqB,cAAa;GAAO;EAA8B,CAKvC,GAC9B,oBAAC,UAAD;GACE,qBAAA;GACU;GACF;GACE;GAEV,UAAA,oBAAC,uBAAD;IAAuB,IAAI;IAAQ,WAAW;GAAS,CAAA;EAC/C,CAAA,CACU;;CAIxB,IAAI,YACF,OACE,oBAAC,QAAD;EAAM,WAAW;EAAe,OAAO;GAAE,GAAG;GAAO;EAAW;EAAG,OAAA;EAC9D,UAAA;CACG,CAAA;CAIV,OACE,oBAAC,MAAD;EACE,GAAI;EACJ,GAAI;EACI;EACE;EACV,gBAAgB;EAChB,WAAW;EACN;EACL,OAAO;GAAE,GAAG;GAAO;EAAW;EAE7B,UAAA;CACG,CAAA;AAEV,CAAC"}
+{"version":3,"file":"Link.mjs","names":["styles","_Fragment","_jsx"],"sources":["../../../../../../../src/components/Link/Link.tsx"],"sourcesContent":["import type {\n  ComponentProps,\n  ComponentType,\n  CSSProperties,\n  MouseEvent,\n  PropsWithChildren,\n} from \"react\";\nimport { useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { dynamic, type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./Link.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport {\n  type AlphaColor,\n  isAlphaColor,\n  type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { linkContext } from \"@/components/Link/context\";\nimport { LinkIcon } from \"@/components/Link/components/LinkIcon\";\nimport { handleLinkClick, useRouter } from \"@react-aria/utils\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\nimport { hasContent } from \"@/components/SkeletonMode/lib/hasContent\";\nimport { containsTextChild } from \"@/lib/react/remote\";\n\nexport interface LinkProps\n  extends\n    PropsWithChildren<\n      Omit<Aria.LinkProps, \"children\" | \"slot\" | \"className\" | \"aria-current\">\n    >,\n    FlowComponentProps<HTMLAnchorElement>,\n    PropsWithClassName {\n  /** Whether the link should be styled for being displayed inside a text. */\n  inline?: boolean;\n  /** An alternative link component. */\n  linkComponent?: ComponentType<Omit<ComponentProps<\"a\">, \"ref\">>;\n  /** The color of the link. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** Marks the link as the currently active one, e.g. in a navigation. */\n  \"aria-current\"?: string;\n  /**\n   * The name of the slot the link is placed in. In action groups: `primary` (at\n   * the end), `secondary` (before the primary action) or `abort` (at the\n   * start).\n   */\n  slot?: string;\n  /** The whiteSpace css value of the element. */\n  whiteSpace?: CSSProperties[\"whiteSpace\"];\n  /** The size of the element. @default \"m\" */\n  size?: \"s\" | \"m\";\n  /** @internal */\n  unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Link = flowComponent(\"Link\", (props) => {\n  const {\n    children,\n    className,\n    inline,\n    linkComponent: linkComponentFromProps,\n    color = \"default\",\n    unstyled = false,\n    \"aria-current\": ariaCurrent,\n    ref,\n    slot: ignoredSlotProp,\n    style,\n    whiteSpace,\n    size = \"m\",\n    onClickCapture: onClickCaptureFromProps,\n    target,\n    download,\n    ...rest\n  } = props;\n\n  const { linkComponent: linkComponentFromContext } = useContext(linkContext);\n  const isSkeleton = useSkeletonMode();\n  const Link = linkComponentFromProps\n    ? (linkComponentFromProps as typeof Aria.Link)\n    : props.href && linkComponentFromContext\n      ? (linkComponentFromContext as typeof Aria.Link)\n      : Aria.Link;\n\n  const router = useRouter();\n\n  /**\n   * An interactive child (e.g. a Button) stops click propagation via React\n   * Aria's `usePress`, so the anchor's own `onClick` never runs and navigation\n   * falls back to a full page load. Handling it in the capture phase (top-down,\n   * before the child) keeps navigation client-side. Only needed for React\n   * Aria's `<a>`; custom link components handle navigation themselves.\n   */\n  const handleClickCapture =\n    Link === Aria.Link && props.href\n      ? (event: MouseEvent<HTMLAnchorElement>) => {\n          onClickCaptureFromProps?.(event);\n          if (event.target !== event.currentTarget) {\n            handleLinkClick(event, router, props.href, props.routerOptions);\n          }\n        }\n      : onClickCaptureFromProps;\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(\n        styles.link,\n        inline && styles.inline,\n        isAlphaColor(color) && styles[color],\n        size === \"s\" && styles[\"size-s\"],\n        className,\n      );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      tunnel: {\n        component: \"Link\",\n        id: \"icon\",\n      },\n      className: styles.icon,\n      size: \"s\",\n    },\n    AlertText: {\n      className: styles.alertText,\n    },\n    AccentBox: { className: styles.accentBox },\n    LayoutCard: { className: styles.layoutCard },\n    Button: {\n      elementType: \"span\",\n      className: styles.button,\n      size: props.size,\n      color: props.color === \"default\" ? undefined : props.color,\n      isDisabled: props.isDisabled,\n      children: dynamic((buttonProps) => (\n        <>\n          {buttonProps.children}\n          <LinkIcon download={download} target={target} unstyled={unstyled} />\n        </>\n      )),\n    },\n  };\n\n  const unsupportedTypingsLinkProps = ariaCurrent\n    ? ({\n        \"aria-current\": true,\n      } as Record<string, unknown>)\n    : {};\n\n  /* Without text of its own — a Link styled as a Button, a Link around a\n     LayoutCard — the content follows its own skeleton rules instead of\n     becoming a text bar. */\n  const hasOnlyElements = hasContent(children) && !containsTextChild(children);\n\n  const textBars = (\n    <SkeletonTextContent defaultWidth=\"6em\">{children}</SkeletonTextContent>\n  );\n\n  const content = (\n    <PropsContextProvider props={propsContext}>\n      {hasOnlyElements ? children : textBars}\n      <LinkIcon\n        withZeroWidthJoiner\n        unstyled={unstyled}\n        target={target}\n        download={download}\n      >\n        <UiComponentTunnelExit id={\"icon\"} component={\"Link\"} />\n      </LinkIcon>\n    </PropsContextProvider>\n  );\n\n  /* react-aria's Link drops `inert`, and a skeleton needs no anchor. */\n  if (isSkeleton) {\n    return (\n      <span className={rootClassName} style={{ ...style, whiteSpace }} inert>\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <Link\n      {...unsupportedTypingsLinkProps}\n      {...rest}\n      target={target}\n      download={download}\n      onClickCapture={handleClickCapture}\n      className={rootClassName}\n      ref={ref}\n      style={{ ...style, whiteSpace }}\n    >\n      {content}\n    </Link>\n  );\n});\n\nexport default Link;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2DA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,QACA,eAAe,wBACf,QAAQ,WACR,WAAW,OACX,gBAAgB,aAChB,KACA,MAAM,iBACN,OACA,YACA,OAAO,KACP,gBAAgB,yBAChB,QACA,UACA,GAAG,SACD;CAEJ,MAAM,EAAE,eAAe,6BAA6B,WAAW,WAAW;CAC1E,MAAM,aAAa,gBAAgB;CACnC,MAAM,OAAO,yBACR,yBACD,MAAM,QAAQ,2BACX,2BACD,KAAK;CAEX,MAAM,SAAS,UAAU;;;;;;;;CASzB,MAAM,qBACJ,SAAS,KAAK,QAAQ,MAAM,QACvB,UAAyC;EACxC,0BAA0B,KAAK;EAC/B,IAAI,MAAM,WAAW,MAAM,eACzB,gBAAgB,OAAO,QAAQ,MAAM,MAAM,MAAM,aAAa;CAElE,IACA;CAEN,MAAM,gBAAgB,WAClB,YACA,KACEA,oBAAO,MACP,UAAUA,oBAAO,QACjB,aAAa,KAAK,KAAKA,oBAAO,QAC9B,SAAS,OAAOA,oBAAO,WACvB,SACF;CAEJ,MAAM,eAA6B;EACjC,MAAM;GACJ,QAAQ;IACN,WAAW;IACX,IAAI;GACN;GACA,WAAWA,oBAAO;GAClB,MAAM;EACR;EACA,WAAW,EACT,WAAWA,oBAAO,UACpB;EACA,WAAW,EAAE,WAAWA,oBAAO,UAAU;EACzC,YAAY,EAAE,WAAWA,oBAAO,WAAW;EAC3C,QAAQ;GACN,aAAa;GACb,WAAWA,oBAAO;GAClB,MAAM,MAAM;GACZ,OAAO,MAAM,UAAU,YAAY,KAAA,IAAY,MAAM;GACrD,YAAY,MAAM;GAClB,UAAU,SAAS,gBACjB,qBAAAC,YAAA,EAAA,UAAA,CACG,YAAY,UACb,oBAAC,UAAD;IAAoB;IAAkB;IAAkB;GAAW,CAAA,CACnE,EAAA,CAAA,CACH;EACH;CACF;CAEA,MAAM,8BAA8B,cAC/B,EACC,gBAAgB,KAClB,IACA,CAAC;CAKL,MAAM,kBAAkB,WAAW,QAAQ,KAAK,CAAC,kBAAkB,QAAQ;CAM3E,MAAM,UACJ,qBAAC,sBAAD;EAAsB,OAAO;EAA7B,UAAA,CACG,kBAAkB,WALrBC,oBAAC,qBAAD;GAAqB,cAAa;GAAO;EAA8B,CAKvC,GAC9B,oBAAC,UAAD;GACE,qBAAA;GACU;GACF;GACE;GAEV,UAAA,oBAAC,uBAAD;IAAuB,IAAI;IAAQ,WAAW;GAAS,CAAA;EAC/C,CAAA,CACU;;CAIxB,IAAI,YACF,OACE,oBAAC,QAAD;EAAM,WAAW;EAAe,OAAO;GAAE,GAAG;GAAO;EAAW;EAAG,OAAA;EAC9D,UAAA;CACG,CAAA;CAIV,OACE,oBAAC,MAAD;EACE,GAAI;EACJ,GAAI;EACI;EACE;EACV,gBAAgB;EAChB,WAAW;EACN;EACL,OAAO;GAAE,GAAG;GAAO;EAAW;EAE7B,UAAA;CACG,CAAA;AAEV,CAAC"}

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/Link/Link.module.scss
+// src/components/Link/Link.module.scss
 var link = "flow--link";
 var inline = "flow--link--inline";
 var icon = "flow--link--icon";
@@ -26,7 +26,6 @@ var Link_module_default = {
 	accentBox,
 	layoutCard
 };
-//#endregion
 export { accentBox, alertText, button, dark, Link_module_default as default, icon, inline, layoutCard, light, link, linkIcon };
 
 //# sourceMappingURL=Link.module.mjs.map

package/dist/js/packages/components/src/components/Link/components/LinkIcon/LinkIcon.mjs

@@ -6,7 +6,7 @@ import { useLocalizedStringFormatter } from "../../../TranslationProvider/useLoc
 import __locale_default from "../../../../../../../_virtual/_16.locale.mjs";
 import LinkIcon_module_default from "./LinkIcon.module.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/Link/components/LinkIcon/LinkIcon.tsx
+// src/components/Link/components/LinkIcon/LinkIcon.tsx
 var LinkIcon = (props) => {
 	const { unstyled, target, download, withZeroWidthJoiner = false, children } = props;
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "Link");
@@ -30,7 +30,6 @@ var LinkIcon = (props) => {
 	});
 	return /* @__PURE__ */ jsxs(Fragment, { children: [icon, children] });
 };
-//#endregion
 export { LinkIcon, LinkIcon as default };
 
 //# sourceMappingURL=LinkIcon.mjs.map

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

@@ -1,9 +1,8 @@
 "use client"
 /* */
-//#region src/components/Link/components/LinkIcon/LinkIcon.module.scss
+// src/components/Link/components/LinkIcon/LinkIcon.module.scss
 var linkIcon = "flow--link--link-icon";
 var LinkIcon_module_default = { linkIcon };
-//#endregion
 export { LinkIcon_module_default as default, linkIcon };
 
 //# sourceMappingURL=LinkIcon.module.mjs.map

package/dist/js/packages/components/src/components/Link/context.mjs

@@ -1,10 +1,9 @@
 "use client"
 /* */
 import { createContext } from "react";
-//#region src/components/Link/context.ts
+// src/components/Link/context.ts
 var linkContext = createContext({});
 var LinkContextProvider = linkContext.Provider;
-//#endregion
 export { LinkContextProvider, linkContext };
 
 //# sourceMappingURL=context.mjs.map

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

@@ -4,7 +4,7 @@ import { PropsContextProvider } from "../../lib/propsContext/components/PropsCon
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import DivView from "../../views/DivView.mjs";
-import { listContext } from "./listContext.mjs";
+import { ListContextStore, listContext, listStoreContext } from "./listContext.mjs";
 import { DataLoader } from "./components/DataLoader/DataLoader.mjs";
 import Header_module_default from "./components/Header/Header.module.mjs";
 import { Header } from "./components/Header/Header.mjs";
@@ -30,7 +30,7 @@ import List_module_default from "./List.module.mjs";
 import { ListLoaderHooks } from "./setupComponents/ListLoaderHooks.mjs";
 import ListEmptyViewContainerView from "../../views/ListEmptyViewContainerView.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/List/List.tsx
+// src/components/List/List.tsx
 var List = flowComponent("List", (props) => {
 	const { children, batchSize, loadingItemsCount = batchSize, onChange, ref, hidePagination, ...restProps } = props;
 	const listLoaderAsync = deepFindOfType(children, ListLoaderAsync)?.props;
@@ -112,6 +112,7 @@ var List = flowComponent("List", (props) => {
 			component: "List"
 		} }
 	};
+	const listStore = ListContextStore.useNew(listModel);
 	const isEmpty = listModel.useIsEmpty();
 	const emptyView = /* @__PURE__ */ jsx(DivView, {
 		"aria-hidden": !isEmpty,
@@ -124,33 +125,35 @@ var List = flowComponent("List", (props) => {
 	});
 	return /* @__PURE__ */ jsx(PropsContextProvider, {
 		props: propsContext,
-		children: /* @__PURE__ */ jsxs(listContext.Provider, {
+		children: /* @__PURE__ */ jsx(listContext.Provider, {
 			value: { list: listModel },
-			children: [/* @__PURE__ */ jsx(DataLoader, {}), /* @__PURE__ */ jsxs(DivView, {
-				className: List_module_default.list,
-				ref,
-				children: [
-					children,
-					/* @__PURE__ */ jsx(Header, {}),
-					/* @__PURE__ */ jsxs(DivView, {
-						className: List_module_default.listWrapper,
-						children: [
-							emptyView,
-							listModel.items.entries.length > 0 && /* @__PURE__ */ jsx(UiComponentTunnelExit, {
-								id: "listSummary",
-								component: "List"
-							}),
-							(listModel.viewMode.isList || listModel.viewMode.isTiles) && /* @__PURE__ */ jsx(Items, {}),
-							listModel.viewMode.isTable && /* @__PURE__ */ jsx(Table, {})
-						]
-					}),
-					!hidePagination && /* @__PURE__ */ jsx(Footer, {})
-				]
-			})]
+			children: /* @__PURE__ */ jsxs(listStoreContext.Provider, {
+				value: listStore,
+				children: [/* @__PURE__ */ jsx(DataLoader, {}), /* @__PURE__ */ jsxs(DivView, {
+					className: List_module_default.list,
+					ref,
+					children: [
+						children,
+						/* @__PURE__ */ jsx(Header, {}),
+						/* @__PURE__ */ jsxs(DivView, {
+							className: List_module_default.listWrapper,
+							children: [
+								emptyView,
+								listModel.items.entries.length > 0 && /* @__PURE__ */ jsx(UiComponentTunnelExit, {
+									id: "listSummary",
+									component: "List"
+								}),
+								(listModel.viewMode.isList || listModel.viewMode.isTiles) && /* @__PURE__ */ jsx(Items, {}),
+								listModel.viewMode.isTable && /* @__PURE__ */ jsx(Table, {})
+							]
+						}),
+						!hidePagination && /* @__PURE__ */ jsx(Footer, {})
+					]
+				})]
+			})
 		})
 	});
 });
-//#endregion
 export { List, List as default };
 
 //# sourceMappingURL=List.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"List.mjs","names":["TableSetupComponent","ListModel","headerStyles","styles"],"sources":["../../../../../../../src/components/List/List.tsx"],"sourcesContent":["import { DataLoader } from \"@/components/List/components/DataLoader\";\nimport { Header } from \"@/components/List/components/Header/Header\";\nimport headerStyles from \"@/components/List/components/Header/Header.module.scss\";\nimport { Items } from \"@/components/List/components/Items/Items\";\nimport { Table } from \"@/components/List/components/Table\";\nimport ListModel from \"@/components/List/model/List\";\nimport type { IncrementalLoaderShape } from \"@/components/List/model/loading/types\";\nimport type { ListShape } from \"@/components/List/model/types\";\nimport { ListFilter } from \"@/components/List/setupComponents/ListFilter\";\nimport { ListItem } from \"@/components/List/setupComponents/ListItem\";\nimport { ListLoaderAsync } from \"@/components/List/setupComponents/ListLoaderAsync\";\nimport { ListLoaderAsyncResource } from \"@/components/List/setupComponents/ListLoaderAsyncResource\";\nimport { ListSearch } from \"@/components/List/setupComponents/ListSearch\";\nimport { ListSorting } from \"@/components/List/setupComponents/ListSorting\";\nimport { ListStaticData } from \"@/components/List/setupComponents/ListStaticData\";\nimport { Table as TableSetupComponent } from \"@/components/List/setupComponents/Table\";\nimport { TableBody } from \"@/components/List/setupComponents/TableBody\";\nimport { TableCell } from \"@/components/List/setupComponents/TableCell\";\nimport { TableColumn } from \"@/components/List/setupComponents/TableColumn\";\nimport { TableHeader } from \"@/components/List/setupComponents/TableHeader\";\nimport { TableRow } from \"@/components/List/setupComponents/TableRow\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { deepFilterByType, deepFindOfType } from \"@/lib/react/deepFindOfType\";\nimport DivView from \"@/views/DivView\";\nimport type { PropsWithChildren, ReactNode } from \"react\";\nimport Footer from \"./components/Footer\";\nimport styles from \"./List.module.scss\";\nimport { listContext } from \"./listContext\";\nimport { ListLoaderHooks } from \"@/components/List/setupComponents/ListLoaderHooks\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\nimport ListEmptyViewContainerView from \"@/views/ListEmptyViewContainerView\";\n\nexport interface ListProps<T, TMeta = unknown>\n  extends\n    PropsWithChildren,\n    FlowComponentProps,\n    Omit<\n      ListShape<T, TMeta>,\n      | \"search\"\n      | \"loader\"\n      | \"itemView\"\n      | \"table\"\n      | \"batchesController\"\n      | \"filters\"\n      | \"sorting\"\n    > {\n  /** The number of items to be displayed on one page. */\n  batchSize?: number;\n  /**\n   * Automatically loads the next batch of items when the user scrolls to the\n   * end of the list, instead of showing a \"Show more\" button.\n   *\n   * @default false\n   */\n  infiniteScroll?: boolean;\n  /**\n   * Hides the pagination controls below the list.\n   *\n   * @default false\n   */\n  hidePagination?: boolean;\n  /** The view rendered when a search or filter returns no results. */\n  emptySearchResultView?: ReactNode;\n  /** The view rendered when the list contains no items. */\n  emptyView?: ReactNode;\n}\n\nexport const List = flowComponent(\"List\", (props) => {\n  const {\n    children,\n    batchSize,\n    loadingItemsCount = batchSize,\n    onChange,\n    ref,\n    hidePagination,\n    ...restProps\n  } = props;\n\n  const listLoaderAsync = deepFindOfType(\n    children,\n    ListLoaderAsync<never>,\n  )?.props;\n  const listLoaderHooks = deepFindOfType(\n    children,\n    ListLoaderHooks<never>,\n  )?.props;\n  const listLoaderAsyncResource = deepFindOfType(\n    children,\n    ListLoaderAsyncResource<never>,\n  )?.props;\n  const listStaticData = deepFindOfType(children, ListStaticData<never>)?.props;\n\n  const loaderShape: IncrementalLoaderShape<never> = {\n    source: listLoaderAsync\n      ? {\n          ...listLoaderAsync,\n          asyncLoader: listLoaderAsync.children,\n        }\n      : listLoaderAsyncResource\n        ? {\n            ...listLoaderAsyncResource,\n            asyncResourceFactory: listLoaderAsyncResource.children,\n          }\n        : listStaticData\n          ? {\n              staticData: listStaticData.data,\n            }\n          : listLoaderHooks\n            ? {\n                ...listLoaderHooks,\n                useData: listLoaderHooks.children,\n              }\n            : undefined,\n  };\n\n  const searchProps = deepFindOfType(children, ListSearch)?.props;\n  const itemViewProps = deepFindOfType(children, ListItem<never>)?.props;\n\n  const tableProps = deepFindOfType(children, TableSetupComponent)?.props;\n  const tableColumnProps = deepFilterByType(children, TableColumn<never>).map(\n    (c) => ({\n      ...c.props,\n      name: c.props.children,\n    }),\n  );\n  const tableCellProps = deepFilterByType(children, TableCell<never>).map(\n    (c) => ({\n      ...c.props,\n      renderFn: c.props.children,\n    }),\n  );\n\n  const tableRowProps = deepFindOfType(children, TableRow)?.props;\n  const tableHeaderProps = deepFindOfType(children, TableHeader)?.props;\n  const tableBodyProps = deepFindOfType(children, TableBody)?.props;\n\n  const listModel = ListModel.useNew<never>({\n    onChange,\n    loader: loaderShape,\n    filters: deepFilterByType(children, ListFilter<never, never, never>).map(\n      (f) => ({\n        ...f.props,\n        renderItem: f.props.children,\n      }),\n    ),\n    search: searchProps\n      ? {\n          render: searchProps.children,\n          textFieldProps: searchProps,\n          defaultValue: searchProps.defaultValue,\n          autosave: searchProps.autosave,\n        }\n      : undefined,\n    sorting: deepFilterByType(children, ListSorting<never>).map((s) => s.props),\n\n    itemView: itemViewProps\n      ? {\n          ...itemViewProps,\n          renderFn: itemViewProps.children,\n        }\n      : undefined,\n\n    table:\n      tableColumnProps.length > 0\n        ? {\n            header: {\n              ...tableHeaderProps,\n              columns: tableColumnProps,\n            },\n            body: {\n              ...tableBodyProps,\n              row: {\n                ...tableRowProps,\n                cells: tableCellProps,\n              },\n            },\n            ...tableProps,\n          }\n        : undefined,\n\n    batchesController: {\n      batchSize,\n    },\n    loadingItemsCount,\n    ...restProps,\n  });\n\n  const propsContext: PropsContext = {\n    ActionGroup: {\n      preserveOrder: true,\n      tunnel: {\n        id: \"actions\",\n        component: \"List\",\n      },\n      className: headerStyles.actions,\n      Button: {\n        className: headerStyles.action,\n      },\n    },\n    ListSummary: {\n      tunnel: {\n        id: \"listSummary\",\n        component: \"List\",\n      },\n    },\n  };\n\n  const isEmpty = listModel.useIsEmpty();\n\n  // IMPORTANT: we always render the emptyView to the dom.\n  // otherwise we will lose e.g. modalState when switching from noItems to itemsAvailable and vise versa.\n  const emptyView = (\n    <DivView\n      aria-hidden={!isEmpty}\n      className={!isEmpty ? styles.hideVisuallyEmptyView : undefined}\n    >\n      <ListEmptyViewContainerView\n        viewType={listModel.getEmptyViewType()}\n        emptySearchResultView={listModel.emptySearchResultView}\n        emptyView={listModel.emptyView}\n      />\n    </DivView>\n  );\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <listContext.Provider\n        value={{\n          list: listModel,\n        }}\n      >\n        <DataLoader />\n        <DivView className={styles.list} ref={ref}>\n          {children}\n          <Header />\n\n          <DivView className={styles.listWrapper}>\n            {emptyView}\n            {listModel.items.entries.length > 0 && (\n              <UiComponentTunnelExit id=\"listSummary\" component=\"List\" />\n            )}\n            {(listModel.viewMode.isList || listModel.viewMode.isTiles) && (\n              <Items />\n            )}\n            {listModel.viewMode.isTable && <Table />}\n          </DivView>\n          {!hidePagination && <Footer />}\n        </DivView>\n      </listContext.Provider>\n    </PropsContextProvider>\n  );\n});\n\nexport default List;\n"],"mappings":"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"}
+{"version":3,"file":"List.mjs","names":["TableSetupComponent","ListModel","headerStyles","styles"],"sources":["../../../../../../../src/components/List/List.tsx"],"sourcesContent":["import { DataLoader } from \"@/components/List/components/DataLoader\";\nimport { Header } from \"@/components/List/components/Header/Header\";\nimport headerStyles from \"@/components/List/components/Header/Header.module.scss\";\nimport { Items } from \"@/components/List/components/Items/Items\";\nimport { Table } from \"@/components/List/components/Table\";\nimport ListModel from \"@/components/List/model/List\";\nimport type { IncrementalLoaderShape } from \"@/components/List/model/loading/types\";\nimport type { ListShape } from \"@/components/List/model/types\";\nimport { ListFilter } from \"@/components/List/setupComponents/ListFilter\";\nimport { ListItem } from \"@/components/List/setupComponents/ListItem\";\nimport { ListLoaderAsync } from \"@/components/List/setupComponents/ListLoaderAsync\";\nimport { ListLoaderAsyncResource } from \"@/components/List/setupComponents/ListLoaderAsyncResource\";\nimport { ListSearch } from \"@/components/List/setupComponents/ListSearch\";\nimport { ListSorting } from \"@/components/List/setupComponents/ListSorting\";\nimport { ListStaticData } from \"@/components/List/setupComponents/ListStaticData\";\nimport { Table as TableSetupComponent } from \"@/components/List/setupComponents/Table\";\nimport { TableBody } from \"@/components/List/setupComponents/TableBody\";\nimport { TableCell } from \"@/components/List/setupComponents/TableCell\";\nimport { TableColumn } from \"@/components/List/setupComponents/TableColumn\";\nimport { TableHeader } from \"@/components/List/setupComponents/TableHeader\";\nimport { TableRow } from \"@/components/List/setupComponents/TableRow\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { deepFilterByType, deepFindOfType } from \"@/lib/react/deepFindOfType\";\nimport DivView from \"@/views/DivView\";\nimport type { PropsWithChildren, ReactNode } from \"react\";\nimport Footer from \"./components/Footer\";\nimport styles from \"./List.module.scss\";\nimport { listContext, ListContextStore, listStoreContext } from \"./listContext\";\nimport { ListLoaderHooks } from \"@/components/List/setupComponents/ListLoaderHooks\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\nimport ListEmptyViewContainerView from \"@/views/ListEmptyViewContainerView\";\n\nexport interface ListProps<T, TMeta = unknown>\n  extends\n    PropsWithChildren,\n    FlowComponentProps,\n    Omit<\n      ListShape<T, TMeta>,\n      | \"search\"\n      | \"loader\"\n      | \"itemView\"\n      | \"table\"\n      | \"batchesController\"\n      | \"filters\"\n      | \"sorting\"\n    > {\n  /** The number of items to be displayed on one page. */\n  batchSize?: number;\n  /**\n   * Automatically loads the next batch of items when the user scrolls to the\n   * end of the list, instead of showing a \"Show more\" button.\n   *\n   * @default false\n   */\n  infiniteScroll?: boolean;\n  /**\n   * Hides the pagination controls below the list.\n   *\n   * @default false\n   */\n  hidePagination?: boolean;\n  /** The view rendered when a search or filter returns no results. */\n  emptySearchResultView?: ReactNode;\n  /** The view rendered when the list contains no items. */\n  emptyView?: ReactNode;\n}\n\nexport const List = flowComponent(\"List\", (props) => {\n  const {\n    children,\n    batchSize,\n    loadingItemsCount = batchSize,\n    onChange,\n    ref,\n    hidePagination,\n    ...restProps\n  } = props;\n\n  const listLoaderAsync = deepFindOfType(\n    children,\n    ListLoaderAsync<never>,\n  )?.props;\n  const listLoaderHooks = deepFindOfType(\n    children,\n    ListLoaderHooks<never>,\n  )?.props;\n  const listLoaderAsyncResource = deepFindOfType(\n    children,\n    ListLoaderAsyncResource<never>,\n  )?.props;\n  const listStaticData = deepFindOfType(children, ListStaticData<never>)?.props;\n\n  const loaderShape: IncrementalLoaderShape<never> = {\n    source: listLoaderAsync\n      ? {\n          ...listLoaderAsync,\n          asyncLoader: listLoaderAsync.children,\n        }\n      : listLoaderAsyncResource\n        ? {\n            ...listLoaderAsyncResource,\n            asyncResourceFactory: listLoaderAsyncResource.children,\n          }\n        : listStaticData\n          ? {\n              staticData: listStaticData.data,\n            }\n          : listLoaderHooks\n            ? {\n                ...listLoaderHooks,\n                useData: listLoaderHooks.children,\n              }\n            : undefined,\n  };\n\n  const searchProps = deepFindOfType(children, ListSearch)?.props;\n  const itemViewProps = deepFindOfType(children, ListItem<never>)?.props;\n\n  const tableProps = deepFindOfType(children, TableSetupComponent)?.props;\n  const tableColumnProps = deepFilterByType(children, TableColumn<never>).map(\n    (c) => ({\n      ...c.props,\n      name: c.props.children,\n    }),\n  );\n  const tableCellProps = deepFilterByType(children, TableCell<never>).map(\n    (c) => ({\n      ...c.props,\n      renderFn: c.props.children,\n    }),\n  );\n\n  const tableRowProps = deepFindOfType(children, TableRow)?.props;\n  const tableHeaderProps = deepFindOfType(children, TableHeader)?.props;\n  const tableBodyProps = deepFindOfType(children, TableBody)?.props;\n\n  const listModel = ListModel.useNew<never>({\n    onChange,\n    loader: loaderShape,\n    filters: deepFilterByType(children, ListFilter<never, never, never>).map(\n      (f) => ({\n        ...f.props,\n        renderItem: f.props.children,\n      }),\n    ),\n    search: searchProps\n      ? {\n          render: searchProps.children,\n          textFieldProps: searchProps,\n          defaultValue: searchProps.defaultValue,\n          autosave: searchProps.autosave,\n        }\n      : undefined,\n    sorting: deepFilterByType(children, ListSorting<never>).map((s) => s.props),\n\n    itemView: itemViewProps\n      ? {\n          ...itemViewProps,\n          renderFn: itemViewProps.children,\n        }\n      : undefined,\n\n    table:\n      tableColumnProps.length > 0\n        ? {\n            header: {\n              ...tableHeaderProps,\n              columns: tableColumnProps,\n            },\n            body: {\n              ...tableBodyProps,\n              row: {\n                ...tableRowProps,\n                cells: tableCellProps,\n              },\n            },\n            ...tableProps,\n          }\n        : undefined,\n\n    batchesController: {\n      batchSize,\n    },\n    loadingItemsCount,\n    ...restProps,\n  });\n\n  const propsContext: PropsContext = {\n    ActionGroup: {\n      preserveOrder: true,\n      tunnel: {\n        id: \"actions\",\n        component: \"List\",\n      },\n      className: headerStyles.actions,\n      Button: {\n        className: headerStyles.action,\n      },\n    },\n    ListSummary: {\n      tunnel: {\n        id: \"listSummary\",\n        component: \"List\",\n      },\n    },\n  };\n\n  const listStore = ListContextStore.useNew(listModel);\n\n  const isEmpty = listModel.useIsEmpty();\n\n  // IMPORTANT: we always render the emptyView to the dom.\n  // otherwise we will lose e.g. modalState when switching from noItems to itemsAvailable and vise versa.\n  const emptyView = (\n    <DivView\n      aria-hidden={!isEmpty}\n      className={!isEmpty ? styles.hideVisuallyEmptyView : undefined}\n    >\n      <ListEmptyViewContainerView\n        viewType={listModel.getEmptyViewType()}\n        emptySearchResultView={listModel.emptySearchResultView}\n        emptyView={listModel.emptyView}\n      />\n    </DivView>\n  );\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <listContext.Provider\n        value={{\n          list: listModel,\n        }}\n      >\n        <listStoreContext.Provider value={listStore}>\n          <DataLoader />\n          <DivView className={styles.list} ref={ref}>\n            {children}\n            <Header />\n\n            <DivView className={styles.listWrapper}>\n              {emptyView}\n              {listModel.items.entries.length > 0 && (\n                <UiComponentTunnelExit id=\"listSummary\" component=\"List\" />\n              )}\n              {(listModel.viewMode.isList || listModel.viewMode.isTiles) && (\n                <Items />\n              )}\n              {listModel.viewMode.isTable && <Table />}\n            </DivView>\n            {!hidePagination && <Footer />}\n          </DivView>\n        </listStoreContext.Provider>\n      </listContext.Provider>\n    </PropsContextProvider>\n  );\n});\n\nexport default List;\n"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/List/List.module.scss
+// src/components/List/List.module.scss
 var list = "flow--list";
 var listWrapper = "flow--list--list-wrapper";
 var hideVisuallyEmptyView = "flow--list--hide-visually-empty-view";
@@ -9,7 +9,6 @@ var List_module_default = {
 	listWrapper,
 	hideVisuallyEmptyView
 };
-//#endregion
 export { List_module_default as default, hideVisuallyEmptyView, list, listWrapper };
 
 //# sourceMappingURL=List.module.mjs.map

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

@@ -4,7 +4,7 @@ import { useList } from "../../hooks/useList.mjs";
 import { DataLoaderSuspense } from "./DataLoaderSuspense.mjs";
 import { Render } from "../../../../lib/react/components/Render/Render.mjs";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/List/components/DataLoader/DataLoader.tsx
+// src/components/List/components/DataLoader/DataLoader.tsx
 var DataLoader = () => {
 	const loader = useList().loader;
 	const loaderHooks = loader.getLoaderInvocationHooks();
@@ -18,7 +18,6 @@ var DataLoader = () => {
 		} })
 	}, i));
 };
-//#endregion
 export { DataLoader, DataLoader as default };
 
 //# sourceMappingURL=DataLoader.mjs.map

package/dist/js/packages/components/src/components/List/components/DataLoader/DataLoaderSuspense.mjs

@@ -2,7 +2,7 @@
 /* */
 import { Suspense } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
-//#region src/components/List/components/DataLoader/DataLoaderSuspense.tsx
+// src/components/List/components/DataLoader/DataLoaderSuspense.tsx
 var Fallback = (props) => {
 	const { useRenderSuspense } = props;
 	useRenderSuspense();
@@ -16,7 +16,6 @@ var DataLoaderSuspense = (props) => {
 		children
 	});
 };
-//#endregion
 export { DataLoaderSuspense };
 
 //# sourceMappingURL=DataLoaderSuspense.mjs.map

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

@@ -7,7 +7,7 @@ import IllustratedMessageView from "../../../../views/IllustratedMessageView.mjs
 import HeadingView from "../../../../views/HeadingView.mjs";
 import TextView from "../../../../views/TextView.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/List/components/EmptySearchResultView/EmptySearchResultView.tsx
+// src/components/List/components/EmptySearchResultView/EmptySearchResultView.tsx
 var EmptySearchResultView = () => {
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "List");
 	return /* @__PURE__ */ jsxs(IllustratedMessageView, { children: [
@@ -16,7 +16,6 @@ var EmptySearchResultView = () => {
 		/* @__PURE__ */ jsx(TextView, { children: stringFormatter.format("noResult.text") })
 	] });
 };
-//#endregion
 export { EmptySearchResultView };
 
 //# sourceMappingURL=EmptySearchResultView.mjs.map

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

@@ -7,7 +7,7 @@ import IllustratedMessageView from "../../../../views/IllustratedMessageView.mjs
 import HeadingView from "../../../../views/HeadingView.mjs";
 import TextView from "../../../../views/TextView.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/List/components/EmptyView/EmptyView.tsx
+// src/components/List/components/EmptyView/EmptyView.tsx
 var EmptyView = () => {
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "List");
 	return /* @__PURE__ */ jsxs(IllustratedMessageView, { children: [
@@ -16,7 +16,6 @@ var EmptyView = () => {
 		/* @__PURE__ */ jsx(TextView, { children: stringFormatter.format("noItems.text") })
 	] });
 };
-//#endregion
 export { EmptyView };
 
 //# sourceMappingURL=EmptyView.mjs.map

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

@@ -9,7 +9,7 @@ import Footer_module_default from "./Footer.module.mjs";
 import { PaginationInfos } from "./components/PaginationInfos/PaginationInfos.mjs";
 import { ShowNextBatchButton } from "./components/ShowNextBatchButton/ShowNextBatchButton.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/List/components/Footer/Footer.tsx
+// src/components/List/components/Footer/Footer.tsx
 var Footer = () => {
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "List");
 	const list = useList();
@@ -26,7 +26,6 @@ var Footer = () => {
 		]
 	});
 };
-//#endregion
 export { Footer, Footer as default };
 
 //# sourceMappingURL=Footer.mjs.map

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

@@ -1,9 +1,8 @@
 "use client"
 /* */
-//#region src/components/List/components/Footer/Footer.module.scss
+// src/components/List/components/Footer/Footer.module.scss
 var footer = "flow--list--footer";
 var Footer_module_default = { footer };
-//#endregion
 export { Footer_module_default as default, footer };
 
 //# sourceMappingURL=Footer.module.mjs.map

package/dist/js/packages/components/src/components/List/components/Footer/components/PaginationInfos/PaginationInfos.mjs

@@ -6,7 +6,7 @@ import TextView from "../../../../../../views/TextView.mjs";
 import { useList } from "../../../../hooks/useList.mjs";
 import SkeletonView from "../../../../../../views/SkeletonView.mjs";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/List/components/Footer/components/PaginationInfos/PaginationInfos.tsx
+// src/components/List/components/Footer/components/PaginationInfos/PaginationInfos.tsx
 var PaginationInfos = (props) => {
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "List");
 	const list = useList();
@@ -26,7 +26,6 @@ var PaginationInfos = (props) => {
 		children: text
 	});
 };
-//#endregion
 export { PaginationInfos, PaginationInfos as default };
 
 //# sourceMappingURL=PaginationInfos.mjs.map

package/dist/js/packages/components/src/components/List/components/Footer/components/ShowNextBatchButton/ShowNextBatchButton.mjs

@@ -5,7 +5,7 @@ import ButtonView from "../../../../../../views/ButtonView.mjs";
 import __locale_default from "../../../../../../../../../_virtual/_18.locale.mjs";
 import { useList } from "../../../../hooks/useList.mjs";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/List/components/Footer/components/ShowNextBatchButton/ShowNextBatchButton.tsx
+// src/components/List/components/Footer/components/ShowNextBatchButton/ShowNextBatchButton.tsx
 var ShowNextBatchButton = (props) => {
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "List");
 	const list = useList();
@@ -22,7 +22,6 @@ var ShowNextBatchButton = (props) => {
 		children: stringFormatter.format("showMore")
 	});
 };
-//#endregion
 export { ShowNextBatchButton, ShowNextBatchButton as default };
 
 //# sourceMappingURL=ShowNextBatchButton.mjs.map

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

@@ -13,7 +13,7 @@ import { FilterContextMenus } from "./components/FilterContextMenu/FilterContext
 import { AllFiltersModal } from "./components/AllFiltersModal/AllFiltersModal.mjs";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/List/components/Header/Header.tsx
+// src/components/List/components/Header/Header.tsx
 var Header = (props) => {
 	const { className } = props;
 	const list = useList();
@@ -52,7 +52,6 @@ var Header = (props) => {
 		}), /* @__PURE__ */ jsx(ActiveFilters, { isDisabled })]
 	});
 };
-//#endregion
 export { Header, Header as default };
 
 //# sourceMappingURL=Header.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/List/components/Header/Header.module.scss
+// src/components/List/components/Header/Header.module.scss
 var header = "flow--list--header";
 var headerContent = "flow--list--header--header-content";
 var options = "flow--list--header--options";
@@ -21,7 +21,6 @@ var Header_module_default = {
 	action,
 	hideVisuallyActions
 };
-//#endregion
 export { action, actions, Header_module_default as default, header, headerContent, hideOnDesktop, hideOnMobile, hideVisuallyActions, options, withSearch };
 
 //# sourceMappingURL=Header.module.mjs.map

package/dist/js/packages/components/src/components/List/components/Header/components/ActiveFilters/ActiveFilters.mjs

@@ -3,7 +3,10 @@
 import { IconClose } from "../../../../../Icon/components/icons/IconClose.mjs";
 import { IconSave } from "../../../../../Icon/components/icons/IconSave.mjs";
 import { IconUndo } from "../../../../../Icon/components/icons/IconUndo.mjs";
+import { useLanguage } from "../../../../../../lib/hooks/useLanguage.mjs";
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
+import { formatListDateRange } from "../../../../../../../../components-base/src/list/filter/formatDateRange.mjs";
+import "../../../../../../../../components-base/src/index.mjs";
 import ButtonView from "../../../../../../views/ButtonView.mjs";
 import DivView from "../../../../../../views/DivView.mjs";
 import __locale_default from "../../../../../../../../../_virtual/_18.locale.mjs";
@@ -14,22 +17,22 @@ import TooltipView from "../../../../../../views/TooltipView.mjs";
 import BadgeView from "../../../../../../views/BadgeView.mjs";
 import TooltipTriggerView from "../../../../../../views/TooltipTriggerView.mjs";
 import { Filter } from "../../../../model/filter/Filter.mjs";
-import { transformDateValueToFormattedDate } from "../../../../../../lib/date/transformDateValueToFormattedDate.mjs";
 import { DateRangeFilter } from "../../../../model/filter/DateRangeFilter.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { observer } from "mobx-react-lite";
-//#region src/components/List/components/Header/components/ActiveFilters/ActiveFilters.tsx
+// src/components/List/components/Header/components/ActiveFilters/ActiveFilters.tsx
 var ActiveFilters = observer((props) => {
 	const { isDisabled } = props;
 	const list = useList();
 	const formatter = useLocalizedStringFormatter(__locale_default, "List");
+	const locale = useLanguage();
 	const activeFilters = list.filters.flatMap((f) => {
 		if (f instanceof DateRangeFilter) {
 			const value = f.getValue();
 			if (value) return [/* @__PURE__ */ jsx(BadgeView, {
 				onClose: () => f.clear(),
 				isDisabled,
-				children: /* @__PURE__ */ jsx(TextView, { children: `${transformDateValueToFormattedDate(value.start)} - ${transformDateValueToFormattedDate(value.end)}` })
+				children: /* @__PURE__ */ jsx(TextView, { children: formatListDateRange(value, locale, formatter.format) })
 			}, f.name)];
 		}
 		return f.values.filter((v) => v.isActive).map((v) => /* @__PURE__ */ jsx(BadgeView, {
@@ -87,7 +90,6 @@ var ActiveFilters = observer((props) => {
 		]
 	});
 });
-//#endregion
 export { ActiveFilters, ActiveFilters as default };
 
 //# sourceMappingURL=ActiveFilters.mjs.map