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

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

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.mjs","names":["styles"],"sources":["../../../../../../../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./DonutChart.module.scss\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { DonutChartValue } from \"@/components/DonutChart/components/DonutChartValue\";\nimport { Donut, getDonutSize } from \"@/components/DonutChart/components/Donut\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { DonutChartLegend } from \"@/components/DonutChart/components/DonutChartLegend\";\nimport type { Status } from \"@/lib/types/props\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface DonutChartSegment {\n  value: number;\n  title: string;\n  color?: CategoricalWithCustomColor;\n  valueText?: string;\n}\n\nexport interface DonutChartProps\n  extends\n    Omit<Aria.ProgressBarProps, \"children\" | \"valueLabel\">,\n    PropsWithChildren {\n  /** The status the donut chart is colored by. */\n  status?: Exclude<Status, \"unavailable\">;\n  /** The size variant of the donut chart. @default \"m\" */\n  size?: \"m\" | \"l\";\n  /** Divides the fill of the donut chart into segments */\n  segments?: DonutChartSegment[];\n  /**\n   * Whether the legend component is shown when segments are used. @default:\n   * true\n   */\n  showLegend?: boolean;\n  /** The position of the legend. @default \"right\" */\n  legendPosition?: \"top\" | \"left\" | \"bottom\" | \"right\";\n}\n\n/** @flr-generate all */\nexport const DonutChart: FC<DonutChartProps> = (props) => {\n  const {\n    size = \"m\",\n    status = \"info\",\n    className,\n    value,\n    segments,\n    maxValue,\n    formatOptions,\n    showLegend = true,\n    legendPosition = \"right\",\n    children,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.donutChart,\n    size === \"l\" && styles[\"size-l\"],\n    styles[status],\n    className,\n  );\n\n  const segmentsTotalValue = segments\n    ? segments.map((s) => s.value).reduce((a, b) => a + b, 0)\n    : undefined;\n\n  const isSkeleton = useSkeletonMode();\n  const donutSize = getDonutSize(size);\n\n  const displayedValue = segmentsTotalValue ?? value;\n\n  /* No svg: the donut is one round surface in its size. The legend follows\n     the skeleton rules of its items. */\n  const skeletonDonut = (\n    <span\n      className={clsx(styles.donutChart, styles.skeleton, className)}\n      style={{ width: donutSize, height: donutSize }}\n      aria-hidden\n      inert\n    />\n  );\n\n  const donut = (\n    <Aria.ProgressBar\n      className={rootClassName}\n      value={displayedValue}\n      {...rest}\n    >\n      <Donut\n        value={displayedValue}\n        segments={segments}\n        size={size}\n        maxValue={maxValue}\n      />\n      <DonutChartValue value={displayedValue} formatOptions={formatOptions}>\n        {children}\n      </DonutChartValue>\n    </Aria.ProgressBar>\n  );\n\n  return (\n    <Wrap if={showLegend && segments}>\n      <div className={clsx(styles.donutChartContainer, styles[legendPosition])}>\n        {isSkeleton ? skeletonDonut : donut}\n\n        {showLegend && segments && (\n          <DonutChartLegend\n            showLegend={showLegend}\n            segments={segments}\n            formatOptions={formatOptions}\n          />\n        )}\n      </div>\n    </Wrap>\n  );\n};\n\nexport default DonutChart;\n"],"mappings":";;;;;;;;;;;;;AAuCA,IAAa,cAAmC,UAAU;CACxD,MAAM,EACJ,OAAO,KACP,SAAS,QACT,WACA,OACA,UACA,UACA,eACA,aAAa,MACb,iBAAiB,SACjB,UACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,0BAAO,YACP,SAAS,OAAOA,0BAAO,WACvBA,0BAAO,SACP,SACF;CAEA,MAAM,qBAAqB,WACvB,SAAS,KAAK,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,GAAG,MAAM,IAAI,GAAG,CAAC,IACtD,KAAA;CAEJ,MAAM,aAAa,gBAAgB;CACnC,MAAM,YAAY,aAAa,IAAI;CAEnC,MAAM,iBAAiB,sBAAsB;CAI7C,MAAM,gBACJ,oBAAC,QAAD;EACE,WAAW,KAAKA,0BAAO,YAAYA,0BAAO,UAAU,SAAS;EAC7D,OAAO;GAAE,OAAO;GAAW,QAAQ;EAAU;EAC7C,eAAA;EACA,OAAA;CACD,CAAA;CAGH,MAAM,QACJ,qBAAC,KAAK,aAAN;EACE,WAAW;EACX,OAAO;EACP,GAAI;EAHN,UAAA,CAKE,oBAAC,OAAD;GACE,OAAO;GACG;GACJ;GACI;EACX,CAAA,GACD,oBAAC,iBAAD;GAAiB,OAAO;GAA+B;GACpD;EACc,CAAA,CACD;;CAGpB,OACE,oBAAC,MAAD;EAAM,IAAI,cAAc;EACtB,UAAA,qBAAC,OAAD;GAAK,WAAW,KAAKA,0BAAO,qBAAqBA,0BAAO,eAAe;GAAvE,UAAA,CACG,aAAa,gBAAgB,OAE7B,cAAc,YACb,oBAAC,kBAAD;IACc;IACF;IACK;GAChB,CAAA,CAEA;;CACD,CAAA;AAEV"}
+{"version":3,"file":"DonutChart.mjs","names":["styles"],"sources":["../../../../../../../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./DonutChart.module.scss\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { DonutChartValue } from \"@/components/DonutChart/components/DonutChartValue\";\nimport { Donut, getDonutSize } from \"@/components/DonutChart/components/Donut\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { DonutChartLegend } from \"@/components/DonutChart/components/DonutChartLegend\";\nimport type { Status } from \"@/lib/types/props\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface DonutChartSegment {\n  value: number;\n  title: string;\n  color?: CategoricalWithCustomColor;\n  valueText?: string;\n}\n\nexport interface DonutChartProps\n  extends\n    Omit<Aria.ProgressBarProps, \"children\" | \"valueLabel\">,\n    PropsWithChildren {\n  /** The status the donut chart is colored by. */\n  status?: Exclude<Status, \"unavailable\">;\n  /** The size variant of the donut chart. @default \"m\" */\n  size?: \"m\" | \"l\";\n  /** Divides the fill of the donut chart into segments */\n  segments?: DonutChartSegment[];\n  /** Whether the legend component is shown when segments are used. @default true */\n  showLegend?: boolean;\n  /** The position of the legend. @default \"right\" */\n  legendPosition?: \"top\" | \"left\" | \"bottom\" | \"right\";\n}\n\n/** @flr-generate all */\nexport const DonutChart: FC<DonutChartProps> = (props) => {\n  const {\n    size = \"m\",\n    status = \"info\",\n    className,\n    value,\n    segments,\n    maxValue,\n    formatOptions,\n    showLegend = true,\n    legendPosition = \"right\",\n    children,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.donutChart,\n    size === \"l\" && styles[\"size-l\"],\n    styles[status],\n    className,\n  );\n\n  const segmentsTotalValue = segments\n    ? segments.map((s) => s.value).reduce((a, b) => a + b, 0)\n    : undefined;\n\n  const isSkeleton = useSkeletonMode();\n  const donutSize = getDonutSize(size);\n\n  const displayedValue = segmentsTotalValue ?? value;\n\n  /* No svg: the donut is one round surface in its size. The legend follows\n     the skeleton rules of its items. */\n  const skeletonDonut = (\n    <span\n      className={clsx(styles.donutChart, styles.skeleton, className)}\n      style={{ width: donutSize, height: donutSize }}\n      aria-hidden\n      inert\n    />\n  );\n\n  const donut = (\n    <Aria.ProgressBar\n      className={rootClassName}\n      value={displayedValue}\n      {...rest}\n    >\n      <Donut\n        value={displayedValue}\n        segments={segments}\n        size={size}\n        maxValue={maxValue}\n      />\n      <DonutChartValue value={displayedValue} formatOptions={formatOptions}>\n        {children}\n      </DonutChartValue>\n    </Aria.ProgressBar>\n  );\n\n  return (\n    <Wrap if={showLegend && segments}>\n      <div className={clsx(styles.donutChartContainer, styles[legendPosition])}>\n        {isSkeleton ? skeletonDonut : donut}\n\n        {showLegend && segments && (\n          <DonutChartLegend\n            showLegend={showLegend}\n            segments={segments}\n            formatOptions={formatOptions}\n          />\n        )}\n      </div>\n    </Wrap>\n  );\n};\n\nexport default DonutChart;\n"],"mappings":";;;;;;;;;;;;;AAoCA,IAAa,cAAmC,UAAU;CACxD,MAAM,EACJ,OAAO,KACP,SAAS,QACT,WACA,OACA,UACA,UACA,eACA,aAAa,MACb,iBAAiB,SACjB,UACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,0BAAO,YACP,SAAS,OAAOA,0BAAO,WACvBA,0BAAO,SACP,SACF;CAEA,MAAM,qBAAqB,WACvB,SAAS,KAAK,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,GAAG,MAAM,IAAI,GAAG,CAAC,IACtD,KAAA;CAEJ,MAAM,aAAa,gBAAgB;CACnC,MAAM,YAAY,aAAa,IAAI;CAEnC,MAAM,iBAAiB,sBAAsB;CAI7C,MAAM,gBACJ,oBAAC,QAAD;EACE,WAAW,KAAKA,0BAAO,YAAYA,0BAAO,UAAU,SAAS;EAC7D,OAAO;GAAE,OAAO;GAAW,QAAQ;EAAU;EAC7C,eAAA;EACA,OAAA;CACD,CAAA;CAGH,MAAM,QACJ,qBAAC,KAAK,aAAN;EACE,WAAW;EACX,OAAO;EACP,GAAI;EAHN,UAAA,CAKE,oBAAC,OAAD;GACE,OAAO;GACG;GACJ;GACI;EACX,CAAA,GACD,oBAAC,iBAAD;GAAiB,OAAO;GAA+B;GACpD;EACc,CAAA,CACD;;CAGpB,OACE,oBAAC,MAAD;EAAM,IAAI,cAAc;EACtB,UAAA,qBAAC,OAAD;GAAK,WAAW,KAAKA,0BAAO,qBAAqBA,0BAAO,eAAe;GAAvE,UAAA,CACG,aAAa,gBAAgB,OAE7B,cAAc,YACb,oBAAC,kBAAD;IACc;IACF;IACK;GAChB,CAAA,CAEA;;CACD,CAAA;AAEV"}

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

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { useRegisterSectionHeading } from "../Section/context.mjs";
 import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import { styleClassname } from "../../lib/scss/selectors.mjs";
@@ -25,6 +26,7 @@ var sizeByLevel = {
 /** @flr-generate all */
 var Heading = flowComponent("Heading", (props) => {
 	const { children, className, level = 2, color = "default", wrap, size, ref, elementType, ...rest } = props;
+	useRegisterSectionHeading(rest.id);
 	const isSkeleton = useSkeletonMode();
 	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;

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

@@ -1 +1 @@
-{"version":3,"file":"Heading.mjs","names":["styles"],"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 { Children } from \"react\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\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 isSkeleton = useSkeletonMode();\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\n        className={rootClassName}\n        {...rest}\n        ref={ref}\n        level={level}\n        inert={isSkeleton || undefined}\n      >\n        <span className={styles.headingText}>\n          <SkeletonTextContent defaultWidth=\"12em\">\n            {children}\n          </SkeletonTextContent>\n          <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\">\n            {(items) =>\n              Children.count(items) > 0 && (\n                <span className={styles.headingTextSpacer} />\n              )\n            }\n          </UiComponentTunnelExit>\n        </span>\n        <span className={styles.headingContent}>\n          <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\">\n            {(items) =>\n              Children.map(items, (item) => (\n                <span className={styles.headingContentItem}>{item}</span>\n              ))\n            }\n          </UiComponentTunnelExit>\n        </span>\n      </Element>\n    </PropsContextProvider>\n  );\n});\n\nexport default Heading;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgCA,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,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,uBAAO,SACP,QAAQA,uBAAO,QAAQ,SACvB,UAAU,aAAaA,uBAAO,QAC9B,QAAQA,uBAAO,QAAQ,SAIvB,eAAeA,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,WAAWA,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,WAAWA,uBAAO,KACpB,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,SAAD;GACE,WAAW;GACX,GAAI;GACC;GACE;GACP,OAAO,cAAc,KAAA;GALvB,UAAA,CAOE,qBAAC,QAAD;IAAM,WAAWA,uBAAO;IAAxB,UAAA,CACE,oBAAC,qBAAD;KAAqB,cAAa;KAC/B;IACkB,CAAA,GACrB,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;KACjD,WAAA,UACA,SAAS,MAAM,KAAK,IAAI,KACtB,oBAAC,QAAD,EAAM,WAAWA,uBAAO,kBAAoB,CAAA;IAG3B,CAAA,CACnB;GACN,CAAA,GAAA,oBAAC,QAAD;IAAM,WAAWA,uBAAO;IACtB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;KACjD,WAAA,UACA,SAAS,IAAI,QAAQ,SACnB,oBAAC,QAAD;MAAM,WAAWA,uBAAO;MAAqB,UAAA;KAAW,CAAA,CACzD;IAEkB,CAAA;GACnB,CAAA,CACC;;CACW,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"Heading.mjs","names":["styles"],"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 { Children } from \"react\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useRegisterSectionHeading } from \"@/components/Section/context\";\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  useRegisterSectionHeading(rest.id);\n\n  const isSkeleton = useSkeletonMode();\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\n        className={rootClassName}\n        {...rest}\n        ref={ref}\n        level={level}\n        inert={isSkeleton || undefined}\n      >\n        <span className={styles.headingText}>\n          <SkeletonTextContent defaultWidth=\"12em\">\n            {children}\n          </SkeletonTextContent>\n          <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\">\n            {(items) =>\n              Children.count(items) > 0 && (\n                <span className={styles.headingTextSpacer} />\n              )\n            }\n          </UiComponentTunnelExit>\n        </span>\n        <span className={styles.headingContent}>\n          <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\">\n            {(items) =>\n              Children.map(items, (item) => (\n                <span className={styles.headingContentItem}>{item}</span>\n              ))\n            }\n          </UiComponentTunnelExit>\n        </span>\n      </Element>\n    </PropsContextProvider>\n  );\n});\n\nexport default Heading;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiCA,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,0BAA0B,KAAK,EAAE;CAEjC,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,uBAAO,SACP,QAAQA,uBAAO,QAAQ,SACvB,UAAU,aAAaA,uBAAO,QAC9B,QAAQA,uBAAO,QAAQ,SAIvB,eAAeA,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,WAAWA,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,WAAWA,uBAAO,KACpB,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,SAAD;GACE,WAAW;GACX,GAAI;GACC;GACE;GACP,OAAO,cAAc,KAAA;GALvB,UAAA,CAOE,qBAAC,QAAD;IAAM,WAAWA,uBAAO;IAAxB,UAAA,CACE,oBAAC,qBAAD;KAAqB,cAAa;KAC/B;IACkB,CAAA,GACrB,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;KACjD,WAAA,UACA,SAAS,MAAM,KAAK,IAAI,KACtB,oBAAC,QAAD,EAAM,WAAWA,uBAAO,kBAAoB,CAAA;IAG3B,CAAA,CACnB;GACN,CAAA,GAAA,oBAAC,QAAD;IAAM,WAAWA,uBAAO;IACtB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;KACjD,WAAA,UACA,SAAS,IAAI,QAAQ,SACnB,oBAAC,QAAD;MAAM,WAAWA,uBAAO;MAAqB,UAAA;KAAW,CAAA,CACzD;IAEkB,CAAA;GACnB,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    &:empty {\n      display: none;\n    }\n  }\n\n  .headingTextSpacer {\n    margin-inline-end: var(--heading--icon-to-text-spacing);\n  }\n\n  .headingContentItem {\n    vertical-align: bottom;\n    display: inline-flex;\n    max-width: 100%;\n    min-height: var(--heading-line-height);\n    align-items: center;\n\n    &:not(:last-child) {\n      margin-inline-end: var(--heading--icon-to-text-spacing);\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":""}
+{"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    &:empty {\n      display: none;\n    }\n  }\n\n  /* A truncated title keeps the tunnelled content on its line while both fit.\n     Otherwise the content wraps below and the title truncates on a line of its\n     own. In SkeletonMode the bar's outer span is the flex item and clips the\n     bar. */\n  &:has(> .headingText > :global(.flow--truncate)),\n  &:has(\n    > .headingText\n      > *\n      > :global(.flow--skeleton-mode--skeleton-text-content)\n      > :global(.flow--truncate)\n  ) {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: flex-start;\n\n    .headingText {\n      display: flex;\n      min-width: 0;\n\n      > :has(> :global(.flow--skeleton-mode--skeleton-text-content)) {\n        min-width: 0;\n        overflow: hidden;\n      }\n    }\n\n    .icon {\n      flex-shrink: 0;\n    }\n\n    .headingContent {\n      flex-shrink: 0;\n      max-width: 100%;\n    }\n  }\n\n  .headingTextSpacer {\n    margin-inline-end: var(--heading--icon-to-text-spacing);\n  }\n\n  .headingContentItem {\n    vertical-align: bottom;\n    display: inline-flex;\n    max-width: 100%;\n    min-height: var(--heading-line-height);\n    align-items: center;\n\n    &:not(:last-child) {\n      margin-inline-end: var(--heading--icon-to-text-spacing);\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/Icon/Icon.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.module.mjs","names":[],"sources":["../../../../../../../src/components/Icon/Icon.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.icon {\n  flex-shrink: 0;\n  max-width: none;\n  display: inline-block;\n\n  @extend .size-m;\n\n  /* Sizes */\n  @mixin size($size, $faPadding) {\n    &:where(.size-#{$size}) {\n      width: var(--icon--size--#{$size});\n      height: var(--icon--size--#{$size});\n\n      /*\n       * FontAwesome inserts its stylesheet as an unlayered `<style>` element at\n       * runtime (`autoAddCss` defaults to true), outside of Flow's build, and\n       * sets `box-sizing: content-box` on `.svg-inline--fa`. Unlayered CSS beats\n       * layered CSS regardless of specificity, so this override only applies in\n       * the layered stylesheet variant if it leaves the cascade layer as well.\n       *\n       * Marked at the leaf rather than in a separate block, because these rules\n       * live in a size mixin – a block would have to duplicate it.\n       */\n      &:global(.svg-inline--fa) {\n        @layer flow.unlayered {\n          box-sizing: border-box;\n          padding: $faPadding;\n        }\n      }\n    }\n  }\n\n  @include size(m, var(--size-rem--xxs));\n  @include size(s, var(--size-rem--xxs));\n  @include size(l, var(--size-rem--xs));\n\n  /* Colors */\n  @mixin color($color) {\n    &.#{$color} {\n      color: var(--icon--#{$color}-color);\n    }\n  }\n\n  &.neutral {\n    color: var(--icon--color);\n  }\n\n  @include color(\"danger\");\n  @include color(\"success\");\n  @include color(\"warning\");\n  @include color(\"info\");\n  @include color(\"unavailable\");\n  @include color(\"blue\");\n  @include color(\"violet\");\n  @include color(\"teal\");\n  @include color(\"lilac\");\n  @include color(\"dark\");\n  @include color(\"light\");\n  @include color(\"dark-static\");\n  @include color(\"light-static\");\n\n  /* SkeletonMode */\n\n  &.skeleton {\n    @include skeleton.shape;\n\n    --skeleton-radius: var(--corner-radius--s);\n  }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}
+{"version":3,"file":"Icon.module.mjs","names":[],"sources":["../../../../../../../src/components/Icon/Icon.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.icon {\n  flex-shrink: 0;\n  max-width: none;\n  display: inline-block;\n  vertical-align: baseline;\n\n  @extend .size-m;\n\n  /* Sizes */\n  @mixin size($size, $faPadding) {\n    &:where(.size-#{$size}) {\n      width: var(--icon--size--#{$size});\n      height: var(--icon--size--#{$size});\n\n      /*\n       * FontAwesome inserts its stylesheet as an unlayered `<style>` element at\n       * runtime (`autoAddCss` defaults to true), outside of Flow's build, and\n       * sizes `.svg-inline--fa` itself (`content-box`, `1.25em` × `1em`).\n       * Unlayered CSS beats layered CSS regardless of specificity, so this\n       * override only applies in the layered stylesheet variant if it leaves\n       * the cascade layer as well.\n       *\n       * `display` and `vertical-align` are set the same way: a context hides\n       * its icon (`display: none` on `Breadcrumb`'s last separator, an\n       * unselected `Segment`'s checkmark) or aligns it (`Alert`, `Link`).\n       *\n       * The size goes back to Flow's layered rules (`revert-layer`) instead of\n       * the token, so a context's size (`Avatar`'s 70 %) still applies. The\n       * variants without layers drop these declarations — there Flow's rules\n       * already win, and `revert-layer` would discard them all.\n       *\n       * Marked at the leaf rather than in a separate block, because these rules\n       * live in a size mixin – a block would have to duplicate it.\n       */\n      &:global(.svg-inline--fa) {\n        @layer flow.unlayered {\n          width: revert-layer;\n          height: revert-layer;\n          display: revert-layer;\n          vertical-align: revert-layer;\n          box-sizing: border-box;\n          padding: $faPadding;\n        }\n      }\n    }\n  }\n\n  @include size(m, var(--size-rem--xxs));\n  @include size(s, var(--size-rem--xxs));\n  @include size(l, var(--size-rem--xs));\n\n  /*\n   * FontAwesome also sets `vertical-align: -0.125em`, which would shift the\n   * icon a context aligns (`Heading`, `Alert`, `Link`). Same mechanism as the\n   * size above.\n   */\n  &:global(.svg-inline--fa) {\n    @layer flow.unlayered {\n      vertical-align: revert-layer;\n    }\n  }\n\n  /* Colors */\n  @mixin color($color) {\n    &.#{$color} {\n      color: var(--icon--#{$color}-color);\n    }\n  }\n\n  &.neutral {\n    color: var(--icon--color);\n  }\n\n  @include color(\"danger\");\n  @include color(\"success\");\n  @include color(\"warning\");\n  @include color(\"info\");\n  @include color(\"unavailable\");\n  @include color(\"blue\");\n  @include color(\"violet\");\n  @include color(\"teal\");\n  @include color(\"lilac\");\n  @include color(\"dark\");\n  @include color(\"light\");\n  @include color(\"dark-static\");\n  @include color(\"light-static\");\n\n  /* SkeletonMode */\n\n  &.skeleton {\n    @include skeleton.shape;\n\n    --skeleton-radius: var(--corner-radius--s);\n  }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

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

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { SectionHeadingReset } from "../Section/context.mjs";
 import { isAlphaColor } from "../../lib/types/props.mjs";
 import IllustratedMessage_module_default from "./IllustratedMessage.module.mjs";
 import clsx from "clsx";
@@ -35,10 +36,10 @@ var IllustratedMessage = flowComponent("IllustratedMessage", (props) => {
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
 		className: rootClassName,
-		children: /* @__PURE__ */ jsx(PropsContextProvider, {
+		children: /* @__PURE__ */ jsx(SectionHeadingReset, { children: /* @__PURE__ */ jsx(PropsContextProvider, {
 			props: propsContext,
 			children
-		})
+		}) })
 	});
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"IllustratedMessage.mjs","names":["styles"],"sources":["../../../../../../../src/components/IllustratedMessage/IllustratedMessage.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport styles from \"./IllustratedMessage.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\n\nexport interface IllustratedMessageProps\n  extends PropsWithChildren<ComponentProps<\"div\">>, FlowComponentProps {\n  /** The color of the illustrated message. @default \"default\" */\n  color?: \"default\" | \"danger\" | \"unavailable\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const IllustratedMessage = flowComponent(\n  \"IllustratedMessage\",\n  (props) => {\n    const { className, children, color = \"default\", ...rest } = props;\n\n    const rootClassName = clsx(\n      styles.illustratedMessage,\n      color !== \"default\" && styles[color],\n      className,\n    );\n\n    const alphaColor = isAlphaColor(color) ? color : undefined;\n\n    const propsContext: PropsContext = {\n      Icon: {\n        className: styles.icon,\n        size: \"l\",\n      },\n      Heading: {\n        className: styles.heading,\n        color,\n      },\n      Text: {\n        className: styles.text,\n        color: alphaColor,\n      },\n      Button: {\n        color: alphaColor,\n      },\n      ActionGroup: {\n        preserveOrder: true,\n        className: styles.actionGroup,\n      },\n      ProgressBar: { className: styles.progressBar },\n    };\n\n    return (\n      <div {...rest} className={rootClassName}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </div>\n    );\n  },\n);\n\nexport default IllustratedMessage;\n"],"mappings":";;;;;;;;;;AAkBA,IAAa,qBAAqB,cAChC,uBACC,UAAU;CACT,MAAM,EAAE,WAAW,UAAU,QAAQ,WAAW,GAAG,SAAS;CAE5D,MAAM,gBAAgB,KACpBA,kCAAO,oBACP,UAAU,aAAaA,kCAAO,QAC9B,SACF;CAEA,MAAM,aAAa,aAAa,KAAK,IAAI,QAAQ,KAAA;CAEjD,MAAM,eAA6B;EACjC,MAAM;GACJ,WAAWA,kCAAO;GAClB,MAAM;EACR;EACA,SAAS;GACP,WAAWA,kCAAO;GAClB;EACF;EACA,MAAM;GACJ,WAAWA,kCAAO;GAClB,OAAO;EACT;EACA,QAAQ,EACN,OAAO,WACT;EACA,aAAa;GACX,eAAe;GACf,WAAWA,kCAAO;EACpB;EACA,aAAa,EAAE,WAAWA,kCAAO,YAAY;CAC/C;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW;EACxB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACnB,CAAA;AAET,CACF"}
+{"version":3,"file":"IllustratedMessage.mjs","names":["styles"],"sources":["../../../../../../../src/components/IllustratedMessage/IllustratedMessage.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport styles from \"./IllustratedMessage.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\nimport { SectionHeadingReset } from \"@/components/Section/context\";\n\nexport interface IllustratedMessageProps\n  extends PropsWithChildren<ComponentProps<\"div\">>, FlowComponentProps {\n  /** The color of the illustrated message. @default \"default\" */\n  color?: \"default\" | \"danger\" | \"unavailable\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const IllustratedMessage = flowComponent(\n  \"IllustratedMessage\",\n  (props) => {\n    const { className, children, color = \"default\", ...rest } = props;\n\n    const rootClassName = clsx(\n      styles.illustratedMessage,\n      color !== \"default\" && styles[color],\n      className,\n    );\n\n    const alphaColor = isAlphaColor(color) ? color : undefined;\n\n    const propsContext: PropsContext = {\n      Icon: {\n        className: styles.icon,\n        size: \"l\",\n      },\n      Heading: {\n        className: styles.heading,\n        color,\n      },\n      Text: {\n        className: styles.text,\n        color: alphaColor,\n      },\n      Button: {\n        color: alphaColor,\n      },\n      ActionGroup: {\n        preserveOrder: true,\n        className: styles.actionGroup,\n      },\n      ProgressBar: { className: styles.progressBar },\n    };\n\n    return (\n      <div {...rest} className={rootClassName}>\n        <SectionHeadingReset>\n          <PropsContextProvider props={propsContext}>\n            {children}\n          </PropsContextProvider>\n        </SectionHeadingReset>\n      </div>\n    );\n  },\n);\n\nexport default IllustratedMessage;\n"],"mappings":";;;;;;;;;;;AAmBA,IAAa,qBAAqB,cAChC,uBACC,UAAU;CACT,MAAM,EAAE,WAAW,UAAU,QAAQ,WAAW,GAAG,SAAS;CAE5D,MAAM,gBAAgB,KACpBA,kCAAO,oBACP,UAAU,aAAaA,kCAAO,QAC9B,SACF;CAEA,MAAM,aAAa,aAAa,KAAK,IAAI,QAAQ,KAAA;CAEjD,MAAM,eAA6B;EACjC,MAAM;GACJ,WAAWA,kCAAO;GAClB,MAAM;EACR;EACA,SAAS;GACP,WAAWA,kCAAO;GAClB;EACF;EACA,MAAM;GACJ,WAAWA,kCAAO;GAClB,OAAO;EACT;EACA,QAAQ,EACN,OAAO,WACT;EACA,aAAa;GACX,eAAe;GACf,WAAWA,kCAAO;EACpB;EACA,aAAa,EAAE,WAAWA,kCAAO,YAAY;CAC/C;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW;EACxB,UAAA,oBAAC,qBAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA,EACH,CAAA;CAClB,CAAA;AAET,CACF"}

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

@@ -39,10 +39,6 @@ var Label = flowComponent("Label", (props) => {
 		Button: {
 			tunnel: rightTunnel,
 			size: "s"
-		},
-		Action: {
-			tunnel: rightTunnel,
-			Button: { tunnel: null }
 		}
 	};
 	return /* @__PURE__ */ jsx(PropsContextProvider, {

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

@@ -1 +1 @@
-{"version":3,"file":"Label.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/Label/Label.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Label.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport {\n  overlayTriggersTunneledTo,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface LabelProps\n  extends\n    PropsWithChildren<Omit<Aria.LabelProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {\n  /** Whether the label should show an \"optional\" indicator. */\n  optional?: boolean;\n  /** Whether the label should be displayed as disabled. */\n  isDisabled?: boolean;\n  /** @internal */\n  unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Label = flowComponent(\"Label\", (props) => {\n  const {\n    children,\n    className,\n    optional,\n    isDisabled,\n    ref,\n    unstyled = false,\n    ...rest\n  } = props;\n\n  const [labelProps, labelRef] = Aria.useContextProps(\n    rest,\n    ref,\n    Aria.LabelContext,\n  );\n  const { id, ...rootProps } = labelProps;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Label\");\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(styles.label, isDisabled && styles.disabled, className);\n\n  const optionalMarker = (\n    <span className={styles.optional}>\n      {stringFormatter.format(\"optional\")}\n    </span>\n  );\n\n  const rightTunnel = {\n    id: \"right\",\n    component: \"Label\",\n  } as const;\n\n  const propsContext: PropsContext = {\n    ...overlayTriggersTunneledTo(rightTunnel),\n    // The contextual help sits next to the label text, not with the actions.\n    ContextualHelpTrigger: {\n      tunnel: {\n        id: \"contextualHelp\",\n        component: \"Label\",\n      },\n    },\n    Button: {\n      tunnel: rightTunnel,\n      size: \"s\",\n    },\n    Action: {\n      tunnel: rightTunnel,\n      Button: {\n        tunnel: null,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      {/* The context is already merged into `labelProps` above. */}\n      <Aria.LabelContext.Provider value={null}>\n        <Aria.Label\n          {...rootProps}\n          className={rootClassName}\n          ref={labelRef}\n          inert={isSkeleton || undefined}\n        >\n          {/*\n           * Fields point `aria-labelledby` at the label's id, and the name\n           * computation takes every descendant's name, buttons included. The\n           * id sits on this span so the tunnelled buttons stay out of it.\n           */}\n          <span id={id} className={styles.text}>\n            <SkeletonTextContent defaultWidth=\"6em\">\n              {children}\n              {optional && optionalMarker}\n            </SkeletonTextContent>\n          </span>\n          <UiComponentTunnelExit id=\"contextualHelp\" component=\"Label\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return children;\n              }\n\n              return undefined;\n            }}\n          </UiComponentTunnelExit>\n          <UiComponentTunnelExit id=\"right\" component=\"Label\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return <div className={styles.right}>{children}</div>;\n              }\n\n              return undefined;\n            }}\n          </UiComponentTunnelExit>\n        </Aria.Label>\n      </Aria.LabelContext.Provider>\n    </PropsContextProvider>\n  );\n});\n\nexport default Label;\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,UACA,WACA,UACA,YACA,KACA,WAAW,OACX,GAAG,SACD;CAEJ,MAAM,CAAC,YAAY,YAAY,KAAK,gBAClC,MACA,KACA,KAAK,YACP;CACA,MAAM,EAAE,IAAI,GAAG,cAAc;CAE7B,MAAM,kBAAkB,4BAA4BA,kBAAS,OAAO;CACpE,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,WAClB,YACA,KAAKC,qBAAO,OAAO,cAAcA,qBAAO,UAAU,SAAS;CAE/D,MAAM,iBACJ,oBAAC,QAAD;EAAM,WAAWA,qBAAO;EACrB,UAAA,gBAAgB,OAAO,UAAU;CAC9B,CAAA;CAGR,MAAM,cAAc;EAClB,IAAI;EACJ,WAAW;CACb;CAEA,MAAM,eAA6B;EACjC,GAAG,0BAA0B,WAAW;EAExC,uBAAuB,EACrB,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,QAAQ;GACN,QAAQ;GACR,MAAM;EACR;EACA,QAAQ;GACN,QAAQ;GACR,QAAQ,EACN,QAAQ,KACV;EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAE3B,UAAA,oBAAC,KAAK,aAAa,UAAnB;GAA4B,OAAO;GACjC,UAAA,qBAAC,KAAK,OAAN;IACE,GAAI;IACJ,WAAW;IACX,KAAK;IACL,OAAO,cAAc,KAAA;IAJvB,UAAA;KAWE,oBAAC,QAAD;MAAU;MAAI,WAAWA,qBAAO;MAC9B,UAAA,qBAAC,qBAAD;OAAqB,cAAa;OAAlC,UAAA,CACG,UACA,YAAY,cACM;;KACjB,CAAA;KACN,oBAAC,uBAAD;MAAuB,IAAG;MAAiB,WAAU;MACjD,WAAA,aAAa;OACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO;MAIX;KACqB,CAAA;KACvB,oBAAC,uBAAD;MAAuB,IAAG;MAAQ,WAAU;MACxC,WAAA,aAAa;OACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO,oBAAC,OAAD;QAAK,WAAWA,qBAAO;QAAQ;OAAc,CAAA;MAIxD;KACqB,CAAA;IACb;;EACc,CAAA;CACR,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"Label.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/Label/Label.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Label.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport {\n  overlayTriggersTunneledTo,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface LabelProps\n  extends\n    PropsWithChildren<Omit<Aria.LabelProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {\n  /** Whether the label should show an \"optional\" indicator. */\n  optional?: boolean;\n  /** Whether the label should be displayed as disabled. */\n  isDisabled?: boolean;\n  /** @internal */\n  unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Label = flowComponent(\"Label\", (props) => {\n  const {\n    children,\n    className,\n    optional,\n    isDisabled,\n    ref,\n    unstyled = false,\n    ...rest\n  } = props;\n\n  const [labelProps, labelRef] = Aria.useContextProps(\n    rest,\n    ref,\n    Aria.LabelContext,\n  );\n  const { id, ...rootProps } = labelProps;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Label\");\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(styles.label, isDisabled && styles.disabled, className);\n\n  const optionalMarker = (\n    <span className={styles.optional}>\n      {stringFormatter.format(\"optional\")}\n    </span>\n  );\n\n  const rightTunnel = {\n    id: \"right\",\n    component: \"Label\",\n  } as const;\n\n  const propsContext: PropsContext = {\n    ...overlayTriggersTunneledTo(rightTunnel),\n    // The contextual help sits next to the label text, not with the actions.\n    ContextualHelpTrigger: {\n      tunnel: {\n        id: \"contextualHelp\",\n        component: \"Label\",\n      },\n    },\n    Button: {\n      tunnel: rightTunnel,\n      size: \"s\",\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      {/* The context is already merged into `labelProps` above. */}\n      <Aria.LabelContext.Provider value={null}>\n        <Aria.Label\n          {...rootProps}\n          className={rootClassName}\n          ref={labelRef}\n          inert={isSkeleton || undefined}\n        >\n          {/*\n           * Fields point `aria-labelledby` at the label's id, and the name\n           * computation takes every descendant's name, buttons included. The\n           * id sits on this span so the tunnelled buttons stay out of it.\n           */}\n          <span id={id} className={styles.text}>\n            <SkeletonTextContent defaultWidth=\"6em\">\n              {children}\n              {optional && optionalMarker}\n            </SkeletonTextContent>\n          </span>\n          <UiComponentTunnelExit id=\"contextualHelp\" component=\"Label\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return children;\n              }\n\n              return undefined;\n            }}\n          </UiComponentTunnelExit>\n          <UiComponentTunnelExit id=\"right\" component=\"Label\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return <div className={styles.right}>{children}</div>;\n              }\n\n              return undefined;\n            }}\n          </UiComponentTunnelExit>\n        </Aria.Label>\n      </Aria.LabelContext.Provider>\n    </PropsContextProvider>\n  );\n});\n\nexport default Label;\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,UACA,WACA,UACA,YACA,KACA,WAAW,OACX,GAAG,SACD;CAEJ,MAAM,CAAC,YAAY,YAAY,KAAK,gBAClC,MACA,KACA,KAAK,YACP;CACA,MAAM,EAAE,IAAI,GAAG,cAAc;CAE7B,MAAM,kBAAkB,4BAA4BA,kBAAS,OAAO;CACpE,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,WAClB,YACA,KAAKC,qBAAO,OAAO,cAAcA,qBAAO,UAAU,SAAS;CAE/D,MAAM,iBACJ,oBAAC,QAAD;EAAM,WAAWA,qBAAO;EACrB,UAAA,gBAAgB,OAAO,UAAU;CAC9B,CAAA;CAGR,MAAM,cAAc;EAClB,IAAI;EACJ,WAAW;CACb;CAEA,MAAM,eAA6B;EACjC,GAAG,0BAA0B,WAAW;EAExC,uBAAuB,EACrB,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,QAAQ;GACN,QAAQ;GACR,MAAM;EACR;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAE3B,UAAA,oBAAC,KAAK,aAAa,UAAnB;GAA4B,OAAO;GACjC,UAAA,qBAAC,KAAK,OAAN;IACE,GAAI;IACJ,WAAW;IACX,KAAK;IACL,OAAO,cAAc,KAAA;IAJvB,UAAA;KAWE,oBAAC,QAAD;MAAU;MAAI,WAAWA,qBAAO;MAC9B,UAAA,qBAAC,qBAAD;OAAqB,cAAa;OAAlC,UAAA,CACG,UACA,YAAY,cACM;;KACjB,CAAA;KACN,oBAAC,uBAAD;MAAuB,IAAG;MAAiB,WAAU;MACjD,WAAA,aAAa;OACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO;MAIX;KACqB,CAAA;KACvB,oBAAC,uBAAD;MAAuB,IAAG;MAAQ,WAAU;MACxC,WAAA,aAAa;OACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO,oBAAC,OAAD;QAAK,WAAWA,qBAAO;QAAQ;OAAc,CAAA;MAIxD;KACqB,CAAA;IACb;;EACc,CAAA;CACR,CAAA;AAE1B,CAAC"}

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/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";
@@ -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,29 +125,32 @@ 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, {})
+					]
+				})]
+			})
 		})
 	});
 });

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,oBAAoB,WACpB,UACA,KACA,gBACA,GAAG,cACD;CAEJ,MAAM,kBAAkB,eACtB,UACA,eACF,CAAC,EAAE;CACH,MAAM,kBAAkB,eACtB,UACA,eACF,CAAC,EAAE;CACH,MAAM,0BAA0B,eAC9B,UACA,uBACF,CAAC,EAAE;CACH,MAAM,iBAAiB,eAAe,UAAU,cAAqB,CAAC,EAAE;CAExE,MAAM,cAA6C,EACjD,QAAQ,kBACJ;EACE,GAAG;EACH,aAAa,gBAAgB;CAC/B,IACA,0BACE;EACE,GAAG;EACH,sBAAsB,wBAAwB;CAChD,IACA,iBACE,EACE,YAAY,eAAe,KAC7B,IACA,kBACE;EACE,GAAG;EACH,SAAS,gBAAgB;CAC3B,IACA,KAAA,EACZ;CAEA,MAAM,cAAc,eAAe,UAAU,UAAU,CAAC,EAAE;CAC1D,MAAM,gBAAgB,eAAe,UAAU,QAAe,CAAC,EAAE;CAEjE,MAAM,aAAa,eAAe,UAAUA,OAAmB,CAAC,EAAE;CAClE,MAAM,mBAAmB,iBAAiB,UAAU,WAAkB,CAAC,CAAC,KACrE,OAAO;EACN,GAAG,EAAE;EACL,MAAM,EAAE,MAAM;CAChB,EACF;CACA,MAAM,iBAAiB,iBAAiB,UAAU,SAAgB,CAAC,CAAC,KACjE,OAAO;EACN,GAAG,EAAE;EACL,UAAU,EAAE,MAAM;CACpB,EACF;CAEA,MAAM,gBAAgB,eAAe,UAAU,QAAQ,CAAC,EAAE;CAC1D,MAAM,mBAAmB,eAAe,UAAU,WAAW,CAAC,EAAE;CAChE,MAAM,iBAAiB,eAAe,UAAU,SAAS,CAAC,EAAE;CAE5D,MAAM,YAAYC,OAAU,OAAc;EACxC;EACA,QAAQ;EACR,SAAS,iBAAiB,UAAU,UAA+B,CAAC,CAAC,KAClE,OAAO;GACN,GAAG,EAAE;GACL,YAAY,EAAE,MAAM;EACtB,EACF;EACA,QAAQ,cACJ;GACE,QAAQ,YAAY;GACpB,gBAAgB;GAChB,cAAc,YAAY;GAC1B,UAAU,YAAY;EACxB,IACA,KAAA;EACJ,SAAS,iBAAiB,UAAU,WAAkB,CAAC,CAAC,KAAK,MAAM,EAAE,KAAK;EAE1E,UAAU,gBACN;GACE,GAAG;GACH,UAAU,cAAc;EAC1B,IACA,KAAA;EAEJ,OACE,iBAAiB,SAAS,IACtB;GACE,QAAQ;IACN,GAAG;IACH,SAAS;GACX;GACA,MAAM;IACJ,GAAG;IACH,KAAK;KACH,GAAG;KACH,OAAO;IACT;GACF;GACA,GAAG;EACL,IACA,KAAA;EAEN,mBAAmB,EACjB,UACF;EACA;EACA,GAAG;CACL,CAAC;CAED,MAAM,eAA6B;EACjC,aAAa;GACX,eAAe;GACf,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,WAAWC,sBAAa;GACxB,QAAQ,EACN,WAAWA,sBAAa,OAC1B;EACF;EACA,aAAa,EACX,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;CACF;CAEA,MAAM,UAAU,UAAU,WAAW;CAIrC,MAAM,YACJ,oBAAC,SAAD;EACE,eAAa,CAAC;EACd,WAAW,CAAC,UAAUC,oBAAO,wBAAwB,KAAA;EAErD,UAAA,oBAAC,4BAAD;GACE,UAAU,UAAU,iBAAiB;GACrC,uBAAuB,UAAU;GACjC,WAAW,UAAU;EACtB,CAAA;CACM,CAAA;CAGX,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,YAAY,UAAb;GACE,OAAO,EACL,MAAM,UACR;GAHF,UAAA,CAKE,oBAAC,YAAD,CAAa,CAAA,GACb,qBAAC,SAAD;IAAS,WAAWA,oBAAO;IAAW;IAAtC,UAAA;KACG;KACD,oBAAC,QAAD,CAAS,CAAA;KAET,qBAAC,SAAD;MAAS,WAAWA,oBAAO;MAA3B,UAAA;OACG;OACA,UAAU,MAAM,QAAQ,SAAS,KAChC,oBAAC,uBAAD;QAAuB,IAAG;QAAc,WAAU;OAAQ,CAAA;QAE1D,UAAU,SAAS,UAAU,UAAU,SAAS,YAChD,oBAAC,OAAD,CAAQ,CAAA;OAET,UAAU,SAAS,WAAW,oBAAC,OAAD,CAAQ,CAAA;MAChC;;KACR,CAAC,kBAAkB,oBAAC,QAAD,CAAS,CAAA;IACtB;GACW,CAAA,CAAA;;CACF,CAAA;AAE1B,CAAC"}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,oBAAoB,WACpB,UACA,KACA,gBACA,GAAG,cACD;CAEJ,MAAM,kBAAkB,eACtB,UACA,eACF,CAAC,EAAE;CACH,MAAM,kBAAkB,eACtB,UACA,eACF,CAAC,EAAE;CACH,MAAM,0BAA0B,eAC9B,UACA,uBACF,CAAC,EAAE;CACH,MAAM,iBAAiB,eAAe,UAAU,cAAqB,CAAC,EAAE;CAExE,MAAM,cAA6C,EACjD,QAAQ,kBACJ;EACE,GAAG;EACH,aAAa,gBAAgB;CAC/B,IACA,0BACE;EACE,GAAG;EACH,sBAAsB,wBAAwB;CAChD,IACA,iBACE,EACE,YAAY,eAAe,KAC7B,IACA,kBACE;EACE,GAAG;EACH,SAAS,gBAAgB;CAC3B,IACA,KAAA,EACZ;CAEA,MAAM,cAAc,eAAe,UAAU,UAAU,CAAC,EAAE;CAC1D,MAAM,gBAAgB,eAAe,UAAU,QAAe,CAAC,EAAE;CAEjE,MAAM,aAAa,eAAe,UAAUA,OAAmB,CAAC,EAAE;CAClE,MAAM,mBAAmB,iBAAiB,UAAU,WAAkB,CAAC,CAAC,KACrE,OAAO;EACN,GAAG,EAAE;EACL,MAAM,EAAE,MAAM;CAChB,EACF;CACA,MAAM,iBAAiB,iBAAiB,UAAU,SAAgB,CAAC,CAAC,KACjE,OAAO;EACN,GAAG,EAAE;EACL,UAAU,EAAE,MAAM;CACpB,EACF;CAEA,MAAM,gBAAgB,eAAe,UAAU,QAAQ,CAAC,EAAE;CAC1D,MAAM,mBAAmB,eAAe,UAAU,WAAW,CAAC,EAAE;CAChE,MAAM,iBAAiB,eAAe,UAAU,SAAS,CAAC,EAAE;CAE5D,MAAM,YAAYC,OAAU,OAAc;EACxC;EACA,QAAQ;EACR,SAAS,iBAAiB,UAAU,UAA+B,CAAC,CAAC,KAClE,OAAO;GACN,GAAG,EAAE;GACL,YAAY,EAAE,MAAM;EACtB,EACF;EACA,QAAQ,cACJ;GACE,QAAQ,YAAY;GACpB,gBAAgB;GAChB,cAAc,YAAY;GAC1B,UAAU,YAAY;EACxB,IACA,KAAA;EACJ,SAAS,iBAAiB,UAAU,WAAkB,CAAC,CAAC,KAAK,MAAM,EAAE,KAAK;EAE1E,UAAU,gBACN;GACE,GAAG;GACH,UAAU,cAAc;EAC1B,IACA,KAAA;EAEJ,OACE,iBAAiB,SAAS,IACtB;GACE,QAAQ;IACN,GAAG;IACH,SAAS;GACX;GACA,MAAM;IACJ,GAAG;IACH,KAAK;KACH,GAAG;KACH,OAAO;IACT;GACF;GACA,GAAG;EACL,IACA,KAAA;EAEN,mBAAmB,EACjB,UACF;EACA;EACA,GAAG;CACL,CAAC;CAED,MAAM,eAA6B;EACjC,aAAa;GACX,eAAe;GACf,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,WAAWC,sBAAa;GACxB,QAAQ,EACN,WAAWA,sBAAa,OAC1B;EACF;EACA,aAAa,EACX,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;CACF;CAEA,MAAM,YAAY,iBAAiB,OAAO,SAAS;CAEnD,MAAM,UAAU,UAAU,WAAW;CAIrC,MAAM,YACJ,oBAAC,SAAD;EACE,eAAa,CAAC;EACd,WAAW,CAAC,UAAUC,oBAAO,wBAAwB,KAAA;EAErD,UAAA,oBAAC,4BAAD;GACE,UAAU,UAAU,iBAAiB;GACrC,uBAAuB,UAAU;GACjC,WAAW,UAAU;EACtB,CAAA;CACM,CAAA;CAGX,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,YAAY,UAAb;GACE,OAAO,EACL,MAAM,UACR;GAEA,UAAA,qBAAC,iBAAiB,UAAlB;IAA2B,OAAO;IAAlC,UAAA,CACE,oBAAC,YAAD,CAAa,CAAA,GACb,qBAAC,SAAD;KAAS,WAAWA,oBAAO;KAAW;KAAtC,UAAA;MACG;MACD,oBAAC,QAAD,CAAS,CAAA;MAET,qBAAC,SAAD;OAAS,WAAWA,oBAAO;OAA3B,UAAA;QACG;QACA,UAAU,MAAM,QAAQ,SAAS,KAChC,oBAAC,uBAAD;SAAuB,IAAG;SAAc,WAAU;QAAQ,CAAA;SAE1D,UAAU,SAAS,UAAU,UAAU,SAAS,YAChD,oBAAC,OAAD,CAAQ,CAAA;QAET,UAAU,SAAS,WAAW,oBAAC,OAAD,CAAQ,CAAA;OAChC;;MACR,CAAC,kBAAkB,oBAAC,QAAD,CAAS,CAAA;KACtB;IACgB,CAAA,CAAA;;EACP,CAAA;CACF,CAAA;AAE1B,CAAC"}

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,7 +17,6 @@ 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";
@@ -23,13 +25,14 @@ 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, {

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

@@ -1 +1 @@
-{"version":3,"file":"ActiveFilters.mjs","names":["locales","styles"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/ActiveFilters/ActiveFilters.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport styles from \"./ActiveFilters.module.scss\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { observer } from \"mobx-react-lite\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport {\n  IconClose,\n  IconSave,\n  IconUndo,\n} from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport TooltipView from \"@/views/TooltipView\";\nimport DivView from \"@/views/DivView\";\nimport BadgeView from \"@/views/BadgeView\";\nimport TooltipTriggerView from \"@/views/TooltipTriggerView\";\nimport TextView from \"@/views/TextView\";\nimport { Filter } from \"@/components/List/model/filter/Filter\";\nimport { transformDateValueToFormattedDate } from \"@/lib/date/transformDateValueToFormattedDate\";\nimport { DateRangeFilter } from \"@/components/List/model/filter/DateRangeFilter\";\n\ninterface Props {\n  isDisabled?: boolean;\n}\n\nexport const ActiveFilters: FC<Props> = observer((props) => {\n  const { isDisabled } = props;\n  const list = useList();\n  const formatter = useLocalizedStringFormatter(locales, \"List\");\n\n  const activeFilters = list.filters.flatMap((f) => {\n    if (f instanceof DateRangeFilter) {\n      const value = f.getValue();\n      if (value) {\n        return [\n          <BadgeView\n            key={f.name}\n            onClose={() => f.clear()}\n            isDisabled={isDisabled}\n          >\n            <TextView>\n              {`${transformDateValueToFormattedDate(value.start)} - ${transformDateValueToFormattedDate(value.end)}`}\n            </TextView>\n          </BadgeView>,\n        ];\n      }\n    }\n\n    return f.values\n      .filter((v) => v.isActive)\n      .map((v) => (\n        <BadgeView\n          key={v.id}\n          onClose={() => v.deactivate()}\n          isDisabled={isDisabled}\n        >\n          <TextView>{v.render()}</TextView>\n        </BadgeView>\n      ));\n  });\n\n  const storingAvailable = list.filters.some((f) => f.isStoringAvailable());\n  const hasChanges = list.filters.some((f) => f.hasChanges());\n\n  const storeFiltersButton = storingAvailable && hasChanges && (\n    <TooltipTriggerView isDisabled={isDisabled}>\n      <TooltipView>{formatter.format(\"filters.store\")}</TooltipView>\n      <ButtonView\n        size=\"s\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={() =>\n          Filter.storeFilters(list, list.filters, {\n            autosave: false,\n            manualSave: true,\n          })\n        }\n        aria-label={formatter.format(\"filters.store\")}\n      >\n        <IconSave />\n      </ButtonView>\n    </TooltipTriggerView>\n  );\n\n  const resetFiltersButton = hasChanges ? (\n    <TooltipTriggerView isDisabled={isDisabled}>\n      <TooltipView>{formatter.format(\"filters.reset\")}</TooltipView>\n      <ButtonView\n        size=\"s\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={() => list.resetFilters()}\n        aria-label={formatter.format(\"filters.reset\")}\n      >\n        <IconUndo />\n      </ButtonView>\n    </TooltipTriggerView>\n  ) : undefined;\n\n  const removeAllFiltersButton =\n    activeFilters.length > 1 ? (\n      <TooltipTriggerView isDisabled={isDisabled}>\n        <TooltipView>{formatter.format(\"filters.clear\")}</TooltipView>\n        <ButtonView\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n          onPress={() => list.clearFilters()}\n          aria-label={formatter.format(\"filters.clear\")}\n        >\n          <IconClose />\n        </ButtonView>\n      </TooltipTriggerView>\n    ) : undefined;\n\n  if (\n    activeFilters.length === 0 &&\n    !storeFiltersButton &&\n    !resetFiltersButton\n  ) {\n    return null;\n  }\n\n  return (\n    <DivView className={styles.activeFilters}>\n      {activeFilters}\n      {storeFiltersButton}\n      {resetFiltersButton}\n      {removeAllFiltersButton}\n    </DivView>\n  );\n});\n\nexport default ActiveFilters;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyBA,IAAa,gBAA2B,UAAU,UAAU;CAC1D,MAAM,EAAE,eAAe;CACvB,MAAM,OAAO,QAAQ;CACrB,MAAM,YAAY,4BAA4BA,kBAAS,MAAM;CAE7D,MAAM,gBAAgB,KAAK,QAAQ,SAAS,MAAM;EAChD,IAAI,aAAa,iBAAiB;GAChC,MAAM,QAAQ,EAAE,SAAS;GACzB,IAAI,OACF,OAAO,CACL,oBAAC,WAAD;IAEE,eAAe,EAAE,MAAM;IACX;IAEZ,UAAA,oBAAC,UAAD,EAAA,UACG,GAAG,kCAAkC,MAAM,KAAK,EAAE,KAAK,kCAAkC,MAAM,GAAG,IAC3F,CAAA;GACD,GAPJ,EAAE,IAOE,CACb;EAEJ;EAEA,OAAO,EAAE,OACN,QAAQ,MAAM,EAAE,QAAQ,CAAC,CACzB,KAAK,MACJ,oBAAC,WAAD;GAEE,eAAe,EAAE,WAAW;GAChB;GAEZ,UAAA,oBAAC,UAAD,EAAA,UAAW,EAAE,OAAO,EAAY,CAAA;EACvB,GALJ,EAAE,EAKE,CACZ;CACL,CAAC;CAED,MAAM,mBAAmB,KAAK,QAAQ,MAAM,MAAM,EAAE,mBAAmB,CAAC;CACxE,MAAM,aAAa,KAAK,QAAQ,MAAM,MAAM,EAAE,WAAW,CAAC;CAE1D,MAAM,qBAAqB,oBAAoB,cAC7C,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eACE,OAAO,aAAa,MAAM,KAAK,SAAS;IACtC,UAAU;IACV,YAAY;GACd,CAAC;GAEH,cAAY,UAAU,OAAO,eAAe;GAE5C,UAAA,oBAAC,UAAD,CAAW,CAAA;EACD,CAAA,CACM;;CAGtB,MAAM,qBAAqB,aACzB,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eAAe,KAAK,aAAa;GACjC,cAAY,UAAU,OAAO,eAAe;GAE5C,UAAA,oBAAC,UAAD,CAAW,CAAA;EACD,CAAA,CACM;CAClB,CAAA,IAAA,KAAA;CAEJ,MAAM,yBACJ,cAAc,SAAS,IACrB,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eAAe,KAAK,aAAa;GACjC,cAAY,UAAU,OAAO,eAAe;GAE5C,UAAA,oBAAC,WAAD,CAAY,CAAA;EACF,CAAA,CACM;CAClB,CAAA,IAAA,KAAA;CAEN,IACE,cAAc,WAAW,KACzB,CAAC,sBACD,CAAC,oBAED,OAAO;CAGT,OACE,qBAAC,SAAD;EAAS,WAAWC,6BAAO;EAA3B,UAAA;GACG;GACA;GACA;GACA;EACM;;AAEb,CAAC"}
+{"version":3,"file":"ActiveFilters.mjs","names":["locales","styles"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/ActiveFilters/ActiveFilters.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport styles from \"./ActiveFilters.module.scss\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { observer } from \"mobx-react-lite\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport {\n  IconClose,\n  IconSave,\n  IconUndo,\n} from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport TooltipView from \"@/views/TooltipView\";\nimport DivView from \"@/views/DivView\";\nimport BadgeView from \"@/views/BadgeView\";\nimport TooltipTriggerView from \"@/views/TooltipTriggerView\";\nimport TextView from \"@/views/TextView\";\nimport { Filter } from \"@/components/List/model/filter/Filter\";\nimport { DateRangeFilter } from \"@/components/List/model/filter/DateRangeFilter\";\nimport { useLanguage } from \"@/lib/hooks/useLanguage\";\nimport { formatListDateRange } from \"@mittwald/flow-components-base\";\n\ninterface Props {\n  isDisabled?: boolean;\n}\n\nexport const ActiveFilters: FC<Props> = observer((props) => {\n  const { isDisabled } = props;\n  const list = useList();\n  const formatter = useLocalizedStringFormatter(locales, \"List\");\n  const locale = useLanguage();\n\n  const activeFilters = list.filters.flatMap((f) => {\n    if (f instanceof DateRangeFilter) {\n      const value = f.getValue();\n      if (value) {\n        return [\n          <BadgeView\n            key={f.name}\n            onClose={() => f.clear()}\n            isDisabled={isDisabled}\n          >\n            <TextView>\n              {formatListDateRange(value, locale, formatter.format)}\n            </TextView>\n          </BadgeView>,\n        ];\n      }\n    }\n\n    return f.values\n      .filter((v) => v.isActive)\n      .map((v) => (\n        <BadgeView\n          key={v.id}\n          onClose={() => v.deactivate()}\n          isDisabled={isDisabled}\n        >\n          <TextView>{v.render()}</TextView>\n        </BadgeView>\n      ));\n  });\n\n  const storingAvailable = list.filters.some((f) => f.isStoringAvailable());\n  const hasChanges = list.filters.some((f) => f.hasChanges());\n\n  const storeFiltersButton = storingAvailable && hasChanges && (\n    <TooltipTriggerView isDisabled={isDisabled}>\n      <TooltipView>{formatter.format(\"filters.store\")}</TooltipView>\n      <ButtonView\n        size=\"s\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={() =>\n          Filter.storeFilters(list, list.filters, {\n            autosave: false,\n            manualSave: true,\n          })\n        }\n        aria-label={formatter.format(\"filters.store\")}\n      >\n        <IconSave />\n      </ButtonView>\n    </TooltipTriggerView>\n  );\n\n  const resetFiltersButton = hasChanges ? (\n    <TooltipTriggerView isDisabled={isDisabled}>\n      <TooltipView>{formatter.format(\"filters.reset\")}</TooltipView>\n      <ButtonView\n        size=\"s\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={() => list.resetFilters()}\n        aria-label={formatter.format(\"filters.reset\")}\n      >\n        <IconUndo />\n      </ButtonView>\n    </TooltipTriggerView>\n  ) : undefined;\n\n  const removeAllFiltersButton =\n    activeFilters.length > 1 ? (\n      <TooltipTriggerView isDisabled={isDisabled}>\n        <TooltipView>{formatter.format(\"filters.clear\")}</TooltipView>\n        <ButtonView\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n          onPress={() => list.clearFilters()}\n          aria-label={formatter.format(\"filters.clear\")}\n        >\n          <IconClose />\n        </ButtonView>\n      </TooltipTriggerView>\n    ) : undefined;\n\n  if (\n    activeFilters.length === 0 &&\n    !storeFiltersButton &&\n    !resetFiltersButton\n  ) {\n    return null;\n  }\n\n  return (\n    <DivView className={styles.activeFilters}>\n      {activeFilters}\n      {storeFiltersButton}\n      {resetFiltersButton}\n      {removeAllFiltersButton}\n    </DivView>\n  );\n});\n\nexport default ActiveFilters;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAa,gBAA2B,UAAU,UAAU;CAC1D,MAAM,EAAE,eAAe;CACvB,MAAM,OAAO,QAAQ;CACrB,MAAM,YAAY,4BAA4BA,kBAAS,MAAM;CAC7D,MAAM,SAAS,YAAY;CAE3B,MAAM,gBAAgB,KAAK,QAAQ,SAAS,MAAM;EAChD,IAAI,aAAa,iBAAiB;GAChC,MAAM,QAAQ,EAAE,SAAS;GACzB,IAAI,OACF,OAAO,CACL,oBAAC,WAAD;IAEE,eAAe,EAAE,MAAM;IACX;IAEZ,UAAA,oBAAC,UAAD,EAAA,UACG,oBAAoB,OAAO,QAAQ,UAAU,MAAM,EAC5C,CAAA;GACD,GAPJ,EAAE,IAOE,CACb;EAEJ;EAEA,OAAO,EAAE,OACN,QAAQ,MAAM,EAAE,QAAQ,CAAC,CACzB,KAAK,MACJ,oBAAC,WAAD;GAEE,eAAe,EAAE,WAAW;GAChB;GAEZ,UAAA,oBAAC,UAAD,EAAA,UAAW,EAAE,OAAO,EAAY,CAAA;EACvB,GALJ,EAAE,EAKE,CACZ;CACL,CAAC;CAED,MAAM,mBAAmB,KAAK,QAAQ,MAAM,MAAM,EAAE,mBAAmB,CAAC;CACxE,MAAM,aAAa,KAAK,QAAQ,MAAM,MAAM,EAAE,WAAW,CAAC;CAE1D,MAAM,qBAAqB,oBAAoB,cAC7C,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eACE,OAAO,aAAa,MAAM,KAAK,SAAS;IACtC,UAAU;IACV,YAAY;GACd,CAAC;GAEH,cAAY,UAAU,OAAO,eAAe;GAE5C,UAAA,oBAAC,UAAD,CAAW,CAAA;EACD,CAAA,CACM;;CAGtB,MAAM,qBAAqB,aACzB,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eAAe,KAAK,aAAa;GACjC,cAAY,UAAU,OAAO,eAAe;GAE5C,UAAA,oBAAC,UAAD,CAAW,CAAA;EACD,CAAA,CACM;CAClB,CAAA,IAAA,KAAA;CAEJ,MAAM,yBACJ,cAAc,SAAS,IACrB,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eAAe,KAAK,aAAa;GACjC,cAAY,UAAU,OAAO,eAAe;GAE5C,UAAA,oBAAC,WAAD,CAAY,CAAA;EACF,CAAA,CACM;CAClB,CAAA,IAAA,KAAA;CAEN,IACE,cAAc,WAAW,KACzB,CAAC,sBACD,CAAC,oBAED,OAAO;CAGT,OACE,qBAAC,SAAD;EAAS,WAAWC,6BAAO;EAA3B,UAAA;GACG;GACA;GACA;GACA;EACM;;AAEb,CAAC"}

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

@@ -30,14 +30,14 @@ var AllFiltersModal = (props) => {
 	const isInitiallyLoading = list.loader.useIsInitiallyLoading();
 	const totalItemCount = list.batches.getTotalItemsCount() ?? list.items.entries.length;
 	const availableViewModes = useAvailableViewModes();
-	const expandAccordions = (availableViewModes.length > 1 ? 1 : 0) + (list.sorting.length > 0 ? 1 : 0) + list.filters.length <= 2;
+	const expandAccordions = (availableViewModes.length > 1 ? 1 : 0) + (list.visibleSorting.length > 0 ? 1 : 0) + list.filters.length <= 2;
 	const filterAccordions = list.filters.map((f) => /* @__PURE__ */ jsx(FilterAccordion, {
 		filter: f,
 		expandAccordions
 	}, f.name));
 	const accordions = [
 		availableViewModes.length > 1 && /* @__PURE__ */ jsx(ViewModeAccordion, { expandAccordions }, "viewMode"),
-		list.sorting.length > 0 && /* @__PURE__ */ jsx(SortingAccordion, { expandAccordions }, "sorting"),
+		list.visibleSorting.length > 0 && /* @__PURE__ */ jsx(SortingAccordion, { expandAccordions }, "sorting"),
 		...filterAccordions
 	].filter(Boolean);
 	const hasSecondaryFilters = list.filters.some((f) => f.priority === "secondary");

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

@@ -1 +1 @@
-{"version":3,"file":"AllFiltersModal.mjs","names":["locales","styles"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/AllFiltersModal.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { IconFilter } from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { useList } from \"@/components/List\";\nimport styles from \"@/components/List/components/Header/Header.module.scss\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport ContentView from \"@/views/ContentView\";\nimport SectionView from \"@/views/SectionView\";\nimport AccordionGroupView from \"@/views/AccordionGroupView\";\nimport { FilterAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/FilterAccordion\";\nimport { ViewModeAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/ViewModeAccordion\";\nimport TextView from \"@/views/TextView\";\nimport { SortingAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/SortingAccordion\";\nimport ActionGroupView from \"@/views/ActionGroupView\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport HeadingView from \"@/views/HeadingView\";\nimport clsx from \"clsx\";\nimport Modal, { ModalTrigger } from \"@/components/Modal\";\nimport SkeletonTextView from \"@/views/SkeletonTextView\";\nimport { useAvailableViewModes } from \"../../lib\";\n\ninterface Props {\n  isDisabled?: boolean;\n}\n\nexport const AllFiltersModal: FC<Props> = (props) => {\n  const { isDisabled } = props;\n  const list = useList();\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const totalItemCount =\n    list.batches.getTotalItemsCount() ?? list.items.entries.length;\n\n  const availableViewModes = useAvailableViewModes();\n\n  const accordionCount =\n    (availableViewModes.length > 1 ? 1 : 0) +\n    (list.sorting.length > 0 ? 1 : 0) +\n    list.filters.length;\n\n  const expandAccordions = accordionCount <= 2;\n\n  const filterAccordions = list.filters.map((f) => (\n    <FilterAccordion\n      filter={f}\n      key={f.name}\n      expandAccordions={expandAccordions}\n    />\n  ));\n\n  const accordions = [\n    availableViewModes.length > 1 && (\n      <ViewModeAccordion key=\"viewMode\" expandAccordions={expandAccordions} />\n    ),\n    list.sorting.length > 0 && (\n      <SortingAccordion key=\"sorting\" expandAccordions={expandAccordions} />\n    ),\n    ...filterAccordions,\n  ].filter(Boolean);\n\n  const hasSecondaryFilters = list.filters.some(\n    (f) => f.priority === \"secondary\",\n  );\n\n  const controller = useOverlayController(\"Modal\", {\n    reuseControllerFromContext: false,\n  });\n\n  if (accordions.length === 0) {\n    return null;\n  }\n\n  return (\n    <ModalTrigger controller={controller}>\n      <ButtonView\n        className={clsx(\n          styles.hideOnMobile,\n          hasSecondaryFilters ? undefined : styles.hideOnDesktop,\n        )}\n        variant=\"outline\"\n        color=\"secondary\"\n        isDisabled={isDisabled}\n      >\n        <TextView>{stringFormatter.format(\"filters.all\")}</TextView>\n        <IconFilter />\n      </ButtonView>\n\n      <ButtonView\n        className={styles.hideOnDesktop}\n        variant=\"outline\"\n        color=\"secondary\"\n        aria-label={stringFormatter.format(\"filters.all\")}\n      >\n        <IconFilter />\n      </ButtonView>\n\n      <Modal offCanvas controller={controller}>\n        <HeadingView>{stringFormatter.format(\"filters.all\")}</HeadingView>\n        <ContentView>\n          <SectionView>\n            <AccordionGroupView>{...accordions}</AccordionGroupView>\n          </SectionView>\n        </ContentView>\n\n        <ActionGroupView>\n          <ButtonView onPress={() => controller.close()}>\n            <TextView>\n              {isInitiallyLoading ? (\n                <SkeletonTextView width=\"16ch\" />\n              ) : (\n                stringFormatter.format(\"results.show\", {\n                  totalItemCount,\n                })\n              )}\n            </TextView>\n          </ButtonView>\n          <ButtonView\n            color=\"secondary\"\n            variant=\"soft\"\n            onPress={() => {\n              list.resetFilters();\n              controller.close();\n            }}\n          >\n            {stringFormatter.format(\"reset\")}\n          </ButtonView>\n        </ActionGroupView>\n      </Modal>\n    </ModalTrigger>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAa,mBAA8B,UAAU;CACnD,MAAM,EAAE,eAAe;CACvB,MAAM,OAAO,QAAQ;CACrB,MAAM,kBAAkB,4BAA4BA,kBAAS,MAAM;CAEnE,MAAM,qBAAqB,KAAK,OAAO,sBAAsB;CAC7D,MAAM,iBACJ,KAAK,QAAQ,mBAAmB,KAAK,KAAK,MAAM,QAAQ;CAE1D,MAAM,qBAAqB,sBAAsB;CAOjD,MAAM,oBAJH,mBAAmB,SAAS,IAAI,IAAI,MACpC,KAAK,QAAQ,SAAS,IAAI,IAAI,KAC/B,KAAK,QAAQ,UAE4B;CAE3C,MAAM,mBAAmB,KAAK,QAAQ,KAAK,MACzC,oBAAC,iBAAD;EACE,QAAQ;EAEU;CACnB,GAFM,EAAE,IAER,CACF;CAED,MAAM,aAAa;EACjB,mBAAmB,SAAS,KAC1B,oBAAC,mBAAD,EAAoD,iBAAmB,GAAhD,UAAgD;EAEzE,KAAK,QAAQ,SAAS,KACpB,oBAAC,kBAAD,EAAkD,iBAAmB,GAA/C,SAA+C;EAEvE,GAAG;CACL,CAAC,CAAC,OAAO,OAAO;CAEhB,MAAM,sBAAsB,KAAK,QAAQ,MACtC,MAAM,EAAE,aAAa,WACxB;CAEA,MAAM,aAAa,qBAAqB,SAAS,EAC/C,4BAA4B,MAC9B,CAAC;CAED,IAAI,WAAW,WAAW,GACxB,OAAO;CAGT,OACE,qBAAC,cAAD;EAA0B;EAA1B,UAAA;GACE,qBAAC,YAAD;IACE,WAAW,KACTC,sBAAO,cACP,sBAAsB,KAAA,IAAYA,sBAAO,aAC3C;IACA,SAAQ;IACR,OAAM;IACM;IAPd,UAAA,CASE,oBAAC,UAAD,EAAA,UAAW,gBAAgB,OAAO,aAAa,EAAY,CAAA,GAC3D,oBAAC,YAAD,CAAa,CAAA,CACH;;GAEZ,oBAAC,YAAD;IACE,WAAWA,sBAAO;IAClB,SAAQ;IACR,OAAM;IACN,cAAY,gBAAgB,OAAO,aAAa;IAEhD,UAAA,oBAAC,YAAD,CAAa,CAAA;GACH,CAAA;GAEZ,qBAAC,OAAD;IAAO,WAAA;IAAsB;IAA7B,UAAA;KACE,oBAAC,aAAD,EAAA,UAAc,gBAAgB,OAAO,aAAa,EAAe,CAAA;KACjE,oBAAC,aAAD,EAAA,UACE,oBAAC,aAAD,EAAA,UACE,oBAAC,oBAAD,EAAA,UAAA,CAAoB,GAAI,UAA+B,EAAA,CAAA,EAC5C,CAAA,EACF,CAAA;KAEb,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,YAAD;MAAY,eAAe,WAAW,MAAM;MAC1C,UAAA,oBAAC,UAAD,EAAA,UACG,qBACC,oBAAC,kBAAD,EAAkB,OAAM,OAAQ,CAAA,IAEhC,gBAAgB,OAAO,gBAAgB,EACrC,eACF,CAAC,EAEK,CAAA;KACA,CAAA,GACZ,oBAAC,YAAD;MACE,OAAM;MACN,SAAQ;MACR,eAAe;OACb,KAAK,aAAa;OAClB,WAAW,MAAM;MACnB;MAEC,UAAA,gBAAgB,OAAO,OAAO;KACrB,CAAA,CACG,EAAA,CAAA;IACZ;;EACK;;AAElB"}
+{"version":3,"file":"AllFiltersModal.mjs","names":["locales","styles"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/AllFiltersModal.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { IconFilter } from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { useList } from \"@/components/List\";\nimport styles from \"@/components/List/components/Header/Header.module.scss\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport ContentView from \"@/views/ContentView\";\nimport SectionView from \"@/views/SectionView\";\nimport AccordionGroupView from \"@/views/AccordionGroupView\";\nimport { FilterAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/FilterAccordion\";\nimport { ViewModeAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/ViewModeAccordion\";\nimport TextView from \"@/views/TextView\";\nimport { SortingAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/SortingAccordion\";\nimport ActionGroupView from \"@/views/ActionGroupView\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport HeadingView from \"@/views/HeadingView\";\nimport clsx from \"clsx\";\nimport Modal, { ModalTrigger } from \"@/components/Modal\";\nimport SkeletonTextView from \"@/views/SkeletonTextView\";\nimport { useAvailableViewModes } from \"../../lib\";\n\ninterface Props {\n  isDisabled?: boolean;\n}\n\nexport const AllFiltersModal: FC<Props> = (props) => {\n  const { isDisabled } = props;\n  const list = useList();\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const totalItemCount =\n    list.batches.getTotalItemsCount() ?? list.items.entries.length;\n\n  const availableViewModes = useAvailableViewModes();\n\n  const accordionCount =\n    (availableViewModes.length > 1 ? 1 : 0) +\n    (list.visibleSorting.length > 0 ? 1 : 0) +\n    list.filters.length;\n\n  const expandAccordions = accordionCount <= 2;\n\n  const filterAccordions = list.filters.map((f) => (\n    <FilterAccordion\n      filter={f}\n      key={f.name}\n      expandAccordions={expandAccordions}\n    />\n  ));\n\n  const accordions = [\n    availableViewModes.length > 1 && (\n      <ViewModeAccordion key=\"viewMode\" expandAccordions={expandAccordions} />\n    ),\n    list.visibleSorting.length > 0 && (\n      <SortingAccordion key=\"sorting\" expandAccordions={expandAccordions} />\n    ),\n    ...filterAccordions,\n  ].filter(Boolean);\n\n  const hasSecondaryFilters = list.filters.some(\n    (f) => f.priority === \"secondary\",\n  );\n\n  const controller = useOverlayController(\"Modal\", {\n    reuseControllerFromContext: false,\n  });\n\n  if (accordions.length === 0) {\n    return null;\n  }\n\n  return (\n    <ModalTrigger controller={controller}>\n      <ButtonView\n        className={clsx(\n          styles.hideOnMobile,\n          hasSecondaryFilters ? undefined : styles.hideOnDesktop,\n        )}\n        variant=\"outline\"\n        color=\"secondary\"\n        isDisabled={isDisabled}\n      >\n        <TextView>{stringFormatter.format(\"filters.all\")}</TextView>\n        <IconFilter />\n      </ButtonView>\n\n      <ButtonView\n        className={styles.hideOnDesktop}\n        variant=\"outline\"\n        color=\"secondary\"\n        aria-label={stringFormatter.format(\"filters.all\")}\n      >\n        <IconFilter />\n      </ButtonView>\n\n      <Modal offCanvas controller={controller}>\n        <HeadingView>{stringFormatter.format(\"filters.all\")}</HeadingView>\n        <ContentView>\n          <SectionView>\n            <AccordionGroupView>{...accordions}</AccordionGroupView>\n          </SectionView>\n        </ContentView>\n\n        <ActionGroupView>\n          <ButtonView onPress={() => controller.close()}>\n            <TextView>\n              {isInitiallyLoading ? (\n                <SkeletonTextView width=\"16ch\" />\n              ) : (\n                stringFormatter.format(\"results.show\", {\n                  totalItemCount,\n                })\n              )}\n            </TextView>\n          </ButtonView>\n          <ButtonView\n            color=\"secondary\"\n            variant=\"soft\"\n            onPress={() => {\n              list.resetFilters();\n              controller.close();\n            }}\n          >\n            {stringFormatter.format(\"reset\")}\n          </ButtonView>\n        </ActionGroupView>\n      </Modal>\n    </ModalTrigger>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAa,mBAA8B,UAAU;CACnD,MAAM,EAAE,eAAe;CACvB,MAAM,OAAO,QAAQ;CACrB,MAAM,kBAAkB,4BAA4BA,kBAAS,MAAM;CAEnE,MAAM,qBAAqB,KAAK,OAAO,sBAAsB;CAC7D,MAAM,iBACJ,KAAK,QAAQ,mBAAmB,KAAK,KAAK,MAAM,QAAQ;CAE1D,MAAM,qBAAqB,sBAAsB;CAOjD,MAAM,oBAJH,mBAAmB,SAAS,IAAI,IAAI,MACpC,KAAK,eAAe,SAAS,IAAI,IAAI,KACtC,KAAK,QAAQ,UAE4B;CAE3C,MAAM,mBAAmB,KAAK,QAAQ,KAAK,MACzC,oBAAC,iBAAD;EACE,QAAQ;EAEU;CACnB,GAFM,EAAE,IAER,CACF;CAED,MAAM,aAAa;EACjB,mBAAmB,SAAS,KAC1B,oBAAC,mBAAD,EAAoD,iBAAmB,GAAhD,UAAgD;EAEzE,KAAK,eAAe,SAAS,KAC3B,oBAAC,kBAAD,EAAkD,iBAAmB,GAA/C,SAA+C;EAEvE,GAAG;CACL,CAAC,CAAC,OAAO,OAAO;CAEhB,MAAM,sBAAsB,KAAK,QAAQ,MACtC,MAAM,EAAE,aAAa,WACxB;CAEA,MAAM,aAAa,qBAAqB,SAAS,EAC/C,4BAA4B,MAC9B,CAAC;CAED,IAAI,WAAW,WAAW,GACxB,OAAO;CAGT,OACE,qBAAC,cAAD;EAA0B;EAA1B,UAAA;GACE,qBAAC,YAAD;IACE,WAAW,KACTC,sBAAO,cACP,sBAAsB,KAAA,IAAYA,sBAAO,aAC3C;IACA,SAAQ;IACR,OAAM;IACM;IAPd,UAAA,CASE,oBAAC,UAAD,EAAA,UAAW,gBAAgB,OAAO,aAAa,EAAY,CAAA,GAC3D,oBAAC,YAAD,CAAa,CAAA,CACH;;GAEZ,oBAAC,YAAD;IACE,WAAWA,sBAAO;IAClB,SAAQ;IACR,OAAM;IACN,cAAY,gBAAgB,OAAO,aAAa;IAEhD,UAAA,oBAAC,YAAD,CAAa,CAAA;GACH,CAAA;GAEZ,qBAAC,OAAD;IAAO,WAAA;IAAsB;IAA7B,UAAA;KACE,oBAAC,aAAD,EAAA,UAAc,gBAAgB,OAAO,aAAa,EAAe,CAAA;KACjE,oBAAC,aAAD,EAAA,UACE,oBAAC,aAAD,EAAA,UACE,oBAAC,oBAAD,EAAA,UAAA,CAAoB,GAAI,UAA+B,EAAA,CAAA,EAC5C,CAAA,EACF,CAAA;KAEb,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,YAAD;MAAY,eAAe,WAAW,MAAM;MAC1C,UAAA,oBAAC,UAAD,EAAA,UACG,qBACC,oBAAC,kBAAD,EAAkB,OAAM,OAAQ,CAAA,IAEhC,gBAAgB,OAAO,gBAAgB,EACrC,eACF,CAAC,EAEK,CAAA;KACA,CAAA,GACZ,oBAAC,YAAD;MACE,OAAM;MACN,SAAQ;MACR,eAAe;OACb,KAAK,aAAa;OAClB,WAAW,MAAM;MACnB;MAEC,UAAA,gBAAgB,OAAO,OAAO;KACrB,CAAA,CACG,EAAA,CAAA;IACZ;;EACK;;AAElB"}

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

@@ -2,8 +2,10 @@
 /* */
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import ButtonView from "../../../../../../views/ButtonView.mjs";
+import { isDateRangeValue } from "../../../../../Calendar/components/RangeCalendar/types.mjs";
 import __locale_default from "../../../../../../../../../_virtual/_18.locale.mjs";
 import RangeCalendarView from "../../../../../../views/RangeCalendarView.mjs";
+import { DateTimeRangeFields } from "../DateTimeRangeFields/DateTimeRangeFields.mjs";
 import FlexView from "../../../../../../views/FlexView.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -15,9 +17,9 @@ var FilterAccordionDateRange = (props) => {
 	return /* @__PURE__ */ jsxs(FlexView, {
 		direction: "column",
 		gap: "m",
-		children: [/* @__PURE__ */ jsx(RangeCalendarView, {
-			...filter.dateRangeOptions,
-			value: currentValue,
+		children: [filter.granularity === "minute" ? /* @__PURE__ */ jsx(DateTimeRangeFields, { filter }) : /* @__PURE__ */ jsx(RangeCalendarView, {
+			...filter.rangeCalendarProps,
+			value: isDateRangeValue(currentValue) ? currentValue : null,
 			onChange: (range) => {
 				filter.setValue(range);
 			}

package/dist/js/packages/components/src/components/List/components/Header/components/AllFiltersModal/FilterAccordionDateRange.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterAccordionDateRange.mjs","names":["locales"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/FilterAccordionDateRange.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport ButtonView from \"@/views/ButtonView\";\nimport FlexView from \"@/views/FlexView\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport RangeCalendarView from \"@/views/RangeCalendarView\";\nimport type { AnyDateRangeFilter } from \"@/components/List/model/filter/types\";\n\ninterface Props {\n  filter: AnyDateRangeFilter;\n}\n\nexport const FilterAccordionDateRange: FC<Props> = (props) => {\n  const { filter } = props;\n\n  const currentValue = filter.getValue();\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  return (\n    <FlexView direction=\"column\" gap=\"m\">\n      <RangeCalendarView\n        {...filter.dateRangeOptions}\n        value={currentValue}\n        onChange={(range) => {\n          filter.setValue(range);\n        }}\n      />\n      {currentValue && (\n        <ButtonView\n          size=\"s\"\n          color=\"secondary\"\n          variant=\"soft\"\n          onPress={() => filter.clear()}\n        >\n          {stringFormatter.format(\"filters.clearSelection\")}\n        </ButtonView>\n      )}\n    </FlexView>\n  );\n};\n"],"mappings":";;;;;;;;;;AAYA,IAAa,4BAAuC,UAAU;CAC5D,MAAM,EAAE,WAAW;CAEnB,MAAM,eAAe,OAAO,SAAS;CAErC,MAAM,kBAAkB,4BAA4BA,kBAAS,MAAM;CAEnE,OACE,qBAAC,UAAD;EAAU,WAAU;EAAS,KAAI;EAAjC,UAAA,CACE,oBAAC,mBAAD;GACE,GAAI,OAAO;GACX,OAAO;GACP,WAAW,UAAU;IACnB,OAAO,SAAS,KAAK;GACvB;EACD,CAAA,GACA,gBACC,oBAAC,YAAD;GACE,MAAK;GACL,OAAM;GACN,SAAQ;GACR,eAAe,OAAO,MAAM;GAE3B,UAAA,gBAAgB,OAAO,wBAAwB;EACtC,CAAA,CAEN;;AAEd"}
+{"version":3,"file":"FilterAccordionDateRange.mjs","names":["locales"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/FilterAccordionDateRange.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport ButtonView from \"@/views/ButtonView\";\nimport FlexView from \"@/views/FlexView\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport RangeCalendarView from \"@/views/RangeCalendarView\";\nimport type { AnyDateRangeFilter } from \"@/components/List/model/filter/types\";\nimport { isDateRangeValue } from \"@/components/Calendar\";\nimport { DateTimeRangeFields } from \"@/components/List/components/Header/components/DateTimeRangeFields/DateTimeRangeFields\";\n\ninterface Props {\n  filter: AnyDateRangeFilter;\n}\n\nexport const FilterAccordionDateRange: FC<Props> = (props) => {\n  const { filter } = props;\n\n  const currentValue = filter.getValue();\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  return (\n    <FlexView direction=\"column\" gap=\"m\">\n      {filter.granularity === \"minute\" ? (\n        <DateTimeRangeFields filter={filter} />\n      ) : (\n        <RangeCalendarView\n          {...filter.rangeCalendarProps}\n          value={isDateRangeValue(currentValue) ? currentValue : null}\n          onChange={(range) => {\n            filter.setValue(range);\n          }}\n        />\n      )}\n      {currentValue && (\n        <ButtonView\n          size=\"s\"\n          color=\"secondary\"\n          variant=\"soft\"\n          onPress={() => filter.clear()}\n        >\n          {stringFormatter.format(\"filters.clearSelection\")}\n        </ButtonView>\n      )}\n    </FlexView>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAcA,IAAa,4BAAuC,UAAU;CAC5D,MAAM,EAAE,WAAW;CAEnB,MAAM,eAAe,OAAO,SAAS;CAErC,MAAM,kBAAkB,4BAA4BA,kBAAS,MAAM;CAEnE,OACE,qBAAC,UAAD;EAAU,WAAU;EAAS,KAAI;EAAjC,UAAA,CACG,OAAO,gBAAgB,WACtB,oBAAC,qBAAD,EAA6B,OAAS,CAAA,IAEtC,oBAAC,mBAAD;GACE,GAAI,OAAO;GACX,OAAO,iBAAiB,YAAY,IAAI,eAAe;GACvD,WAAW,UAAU;IACnB,OAAO,SAAS,KAAK;GACvB;EACD,CAAA,GAEF,gBACC,oBAAC,YAAD;GACE,MAAK;GACL,OAAM;GACN,SAAQ;GACR,eAAe,OAAO,MAAM;GAE3B,UAAA,gBAAgB,OAAO,wBAAwB;EACtC,CAAA,CAEN;;AAEd"}