@mittwald/flow-react-components 0.2.0-alpha.921 → 0.2.0-alpha.926

package/dist/js/packages/components/src/components/CartesianChart/components/YAxis/YAxis.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YAxis.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/YAxis/YAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n  ChartDataValue,\n  DataKey,\n  DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useDesignTokens } from \"../../../../lib/theming\";\n\nexport type YAxisProps<\n  TData extends ChartDataValue = ChartDataValue,\n  TDataKey extends DataKey<TData> = DataKey<TData>,\n  TDataMatch = DataKeyValue<TData, TDataKey>,\n> = Pick<\n  Recharts.YAxisProps,\n  | \"className\"\n  | \"orientation\"\n  | \"allowDecimals\"\n  | \"interval\"\n  | \"minTickGap\"\n  | \"scale\"\n  | \"type\"\n  | \"domain\"\n  | \"hide\"\n  | \"unit\"\n> & {\n  dataKey?: TDataKey;\n  tickFormatter?: (value: TDataMatch, index: number) => string;\n};\n\n/** @flr-generate all */\nexport const YAxis: FC<YAxisProps> = (props) => {\n  const { domain, ...rest } = props;\n\n  const tokens = useDesignTokens();\n\n  return (\n    <Recharts.YAxis\n      {...rest}\n      allowDataOverflow\n      domain={domain}\n      fontSize={tokens.axis[\"font-size\"].value}\n      tick={{\n        fill: tokens.axis[\"color\"].value,\n      }}\n      tickMargin={parseInt(tokens.axis.spacing.value)}\n      tickSize={parseInt(tokens.axis[\"tick-size\"].value)}\n    />\n  );\n};\n\nexport { TypedYAxis } from \"./types\";\n\nexport default YAxis;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA+BO,MAAM,KAAA,GAAwB,CAAC,KAAA,KAAU;AAC9C,EAAA,MAAM,EAAE,MAAA,EAAQ,GAAG,IAAA,EAAK,GAAI,KAAA;AAE5B,EAAA,MAAM,SAAS,eAAA,EAAgB;AAE/B,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA,CAAS,KAAA;AAAA,IAAT;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,iBAAA,EAAiB,IAAA;AAAA,MACjB,MAAA;AAAA,MACA,QAAA,EAAU,MAAA,CAAO,IAAA,CAAK,WAAW,CAAA,CAAE,KAAA;AAAA,MACnC,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM,MAAA,CAAO,IAAA,CAAK,OAAO,CAAA,CAAE;AAAA,OAC7B;AAAA,MACA,UAAA,EAAY,QAAA,CAAS,MAAA,CAAO,IAAA,CAAK,QAAQ,KAAK,CAAA;AAAA,MAC9C,UAAU,QAAA,CAAS,MAAA,CAAO,IAAA,CAAK,WAAW,EAAE,KAAK;AAAA;AAAA,GACnD;AAEJ;;;;"}
+{"version":3,"file":"YAxis.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/YAxis/YAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n  ChartDataValue,\n  DataKey,\n  DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport type YAxisProps<\n  TData extends ChartDataValue = ChartDataValue,\n  TDataKey extends DataKey<TData> = DataKey<TData>,\n  TDataMatch = DataKeyValue<TData, TDataKey>,\n> = Pick<\n  Recharts.YAxisProps,\n  | \"className\"\n  | \"orientation\"\n  | \"allowDecimals\"\n  | \"interval\"\n  | \"minTickGap\"\n  | \"scale\"\n  | \"type\"\n  | \"domain\"\n  | \"hide\"\n  | \"unit\"\n> & {\n  dataKey?: TDataKey;\n  tickFormatter?: (value: TDataMatch, index: number) => string;\n};\n\n/** @flr-generate all */\nexport const YAxis: FC<YAxisProps> = (props) => {\n  const { domain, ...rest } = props;\n\n  const tokens = useDesignTokens();\n\n  return (\n    <Recharts.YAxis\n      {...rest}\n      allowDataOverflow\n      domain={domain}\n      fontSize={tokens.axis[\"font-size\"].value}\n      tick={{\n        fill: tokens.axis[\"color\"].value,\n      }}\n      tickMargin={parseInt(tokens.axis.spacing.value)}\n      tickSize={parseInt(tokens.axis[\"tick-size\"].value)}\n    />\n  );\n};\n\nexport { TypedYAxis } from \"./types\";\n\nexport default YAxis;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA+BO,MAAM,KAAA,GAAwB,CAAC,KAAA,KAAU;AAC9C,EAAA,MAAM,EAAE,MAAA,EAAQ,GAAG,IAAA,EAAK,GAAI,KAAA;AAE5B,EAAA,MAAM,SAAS,eAAA,EAAgB;AAE/B,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA,CAAS,KAAA;AAAA,IAAT;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,iBAAA,EAAiB,IAAA;AAAA,MACjB,MAAA;AAAA,MACA,QAAA,EAAU,MAAA,CAAO,IAAA,CAAK,WAAW,CAAA,CAAE,KAAA;AAAA,MACnC,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM,MAAA,CAAO,IAAA,CAAK,OAAO,CAAA,CAAE;AAAA,OAC7B;AAAA,MACA,UAAA,EAAY,QAAA,CAAS,MAAA,CAAO,IAAA,CAAK,QAAQ,KAAK,CAAA;AAAA,MAC9C,UAAU,QAAA,CAAS,MAAA,CAAO,IAAA,CAAK,WAAW,EAAE,KAAK;AAAA;AAAA,GACnD;AAEJ;;;;"}

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

@@ -1,7 +1,6 @@
 "use client"
 /* */
 import { jsx } from 'react/jsx-runtime';
-import 'react';
 import clsx from 'clsx';
 import styles from './CounterBadge.module.scss.mjs';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';

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

@@ -1 +1 @@
-{"version":3,"file":"CounterBadge.mjs","sources":["../../../../../../../src/components/CounterBadge/CounterBadge.tsx"],"sourcesContent":["import React from \"react\";\nimport type { PropsWithElementType } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CounterBadge.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface CounterBadgeProps\n  extends PropsWithElementType<\"span\">, FlowComponentProps {\n  /** The number displayed inside the badge. */\n  count?: number;\n}\n\n/** @flr-generate all */\nexport const CounterBadge = flowComponent(\"CounterBadge\", (props) => {\n  const { className, count, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.counterBadge, className);\n\n  return (\n    <span className={rootClassName} {...rest} aria-hidden ref={ref}>\n      {count && count > 99 ? \"99+\" : count}\n    </span>\n  );\n});\n\nexport default CounterBadge;\n"],"names":[],"mappings":";;;;;;AAcO,MAAM,YAAA,GAAe,aAAA,CAAc,cAAA,EAAgB,CAAC,KAAA,KAAU;AACnE,EAAA,MAAM,EAAE,SAAA,EAAW,KAAA,EAAO,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE3C,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,YAAA,EAAc,SAAS,CAAA;AAEzD,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,aAAA,EAAgB,GAAG,IAAA,EAAM,aAAA,EAAW,IAAA,EAAC,GAAA,EACnD,QAAA,EAAA,KAAA,IAAS,KAAA,GAAQ,EAAA,GAAK,QAAQ,KAAA,EACjC,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CounterBadge.mjs","sources":["../../../../../../../src/components/CounterBadge/CounterBadge.tsx"],"sourcesContent":["import type { PropsWithElementType } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CounterBadge.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface CounterBadgeProps\n  extends PropsWithElementType<\"span\">, FlowComponentProps {\n  /** The number displayed inside the badge. */\n  count?: number;\n}\n\n/** @flr-generate all */\nexport const CounterBadge = flowComponent(\"CounterBadge\", (props) => {\n  const { className, count, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.counterBadge, className);\n\n  return (\n    <span className={rootClassName} {...rest} aria-hidden ref={ref}>\n      {count && count > 99 ? \"99+\" : count}\n    </span>\n  );\n});\n\nexport default CounterBadge;\n"],"names":[],"mappings":";;;;;AAaO,MAAM,YAAA,GAAe,aAAA,CAAc,cAAA,EAAgB,CAAC,KAAA,KAAU;AACnE,EAAA,MAAM,EAAE,SAAA,EAAW,KAAA,EAAO,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE3C,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,YAAA,EAAc,SAAS,CAAA;AAEzD,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,aAAA,EAAgB,GAAG,IAAA,EAAM,aAAA,EAAW,IAAA,EAAC,GAAA,EACnD,QAAA,EAAA,KAAA,IAAS,KAAA,GAAQ,EAAA,GAAK,QAAQ,KAAA,EACjC,CAAA;AAEJ,CAAC;;;;"}

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

@@ -7,8 +7,8 @@ import { PropsContextProvider } from '../../lib/propsContext/components/PropsCon
 import * as Aria from 'react-aria-components';
 import '../Popover/components/PopoverTrigger/PopoverTrigger.mjs';
 import { Popover } from '../Popover/Popover.mjs';
-import 'react';
 import '../Button/Button.mjs';
+import 'react';
 import '@mittwald/flow-icons';
 import '../Icon/components/IconSetProvider.mjs';
 import '../Icon/Icon.mjs';

package/dist/js/packages/components/src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.mjs

@@ -1,10 +1,10 @@
 "use client"
 /* */
 import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react';
 import styles from './DateRangeInput.module.scss.mjs';
 import * as Aria from 'react-aria-components';
 import { Button } from '../../../Button/Button.mjs';
+import 'react';
 import '@mittwald/flow-icons';
 import '../../../Icon/components/IconSetProvider.mjs';
 import '../../../Icon/Icon.mjs';

package/dist/js/packages/components/src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeInput.mjs","sources":["../../../../../../../../../src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport styles from \"./DateRangeInput.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport { Button } from \"@/components/Button\";\nimport { IconDate } from \"@/components/Icon/components/icons\";\nimport DateInput from \"@/components/DateInput\";\n\nexport interface DateInputProps {\n  isDisabled?: boolean;\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\nexport const DateRangeInput: FC<DateInputProps> = (props) => {\n  const { isDisabled, ref } = props;\n\n  return (\n    <Aria.Group className={styles.dateRangeInput}>\n      <div>\n        <DateInput slot=\"start\" ref={ref} />\n        <span aria-hidden=\"true\">–</span>\n        <DateInput slot=\"end\" />\n      </div>\n      <Button variant=\"plain\" color=\"secondary\" isDisabled={isDisabled}>\n        <IconDate />\n      </Button>\n    </Aria.Group>\n  );\n};\n\nexport default DateRangeInput;\n"],"names":[],"mappings":";;;;;;;;;;;;AAaO,MAAM,cAAA,GAAqC,CAAC,KAAA,KAAU;AAC3D,EAAA,MAAM,EAAE,UAAA,EAAY,GAAA,EAAI,GAAI,KAAA;AAE5B,EAAA,4BACG,IAAA,CAAK,KAAA,EAAL,EAAW,SAAA,EAAW,OAAO,cAAA,EAC5B,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,IAAA,EAAK,OAAA,EAAQ,GAAA,EAAU,CAAA;AAAA,sBAClC,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,sBAC1B,GAAA,CAAC,SAAA,EAAA,EAAU,IAAA,EAAK,KAAA,EAAM;AAAA,KAAA,EACxB,CAAA;AAAA,oBACA,GAAA,CAAC,UAAO,OAAA,EAAQ,OAAA,EAAQ,OAAM,WAAA,EAAY,UAAA,EACxC,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,CAAA,EACZ;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DateRangeInput.mjs","sources":["../../../../../../../../../src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type React from \"react\";\nimport styles from \"./DateRangeInput.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport { Button } from \"@/components/Button\";\nimport { IconDate } from \"@/components/Icon/components/icons\";\nimport DateInput from \"@/components/DateInput\";\n\nexport interface DateInputProps {\n  isDisabled?: boolean;\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\nexport const DateRangeInput: FC<DateInputProps> = (props) => {\n  const { isDisabled, ref } = props;\n\n  return (\n    <Aria.Group className={styles.dateRangeInput}>\n      <div>\n        <DateInput slot=\"start\" ref={ref} />\n        <span aria-hidden=\"true\">–</span>\n        <DateInput slot=\"end\" />\n      </div>\n      <Button variant=\"plain\" color=\"secondary\" isDisabled={isDisabled}>\n        <IconDate />\n      </Button>\n    </Aria.Group>\n  );\n};\n\nexport default DateRangeInput;\n"],"names":[],"mappings":";;;;;;;;;;;;AAaO,MAAM,cAAA,GAAqC,CAAC,KAAA,KAAU;AAC3D,EAAA,MAAM,EAAE,UAAA,EAAY,GAAA,EAAI,GAAI,KAAA;AAE5B,EAAA,4BACG,IAAA,CAAK,KAAA,EAAL,EAAW,SAAA,EAAW,OAAO,cAAA,EAC5B,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,IAAA,EAAK,OAAA,EAAQ,GAAA,EAAU,CAAA;AAAA,sBAClC,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,sBAC1B,GAAA,CAAC,SAAA,EAAA,EAAU,IAAA,EAAK,KAAA,EAAM;AAAA,KAAA,EACxB,CAAA;AAAA,oBACA,GAAA,CAAC,UAAO,OAAA,EAAQ,OAAA,EAAQ,OAAM,WAAA,EAAY,UAAA,EACxC,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,CAAA,EACZ;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"DonutChartLegend.mjs","sources":["../../../../../../../../src/components/DonutChart/components/DonutChartLegend.tsx"],"sourcesContent":["import styles from \"../DonutChart.module.scss\";\nimport React, { type FC } from \"react\";\nimport { useNumberFormatter } from \"react-aria\";\nimport { Legend, LegendItem } from \"@/components/Legend\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\nimport type { DonutChartProps } from \"@/components/DonutChart\";\n\ntype Props = Pick<DonutChartProps, \"segments\" | \"showLegend\" | \"formatOptions\">;\n\nexport const DonutChartLegend: FC<Props> = (props) => {\n  const { segments, showLegend, formatOptions } = props;\n\n  const formatter = useNumberFormatter(formatOptions);\n\n  if (!segments || !showLegend) {\n    return null;\n  }\n\n  return (\n    <Legend className={styles.legend}>\n      {segments.map((s, i) => {\n        const formattedValue = formatOptions\n          ? formatter.format(s.value)\n          : `${s.value} %`;\n\n        return (\n          <LegendItem\n            key={s.title}\n            color={s.color ?? getCategoricalColorByIndex(i)}\n          >{`${s.title} (${s.valueText ?? formattedValue})`}</LegendItem>\n        );\n      })}\n    </Legend>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AASO,MAAM,gBAAA,GAA8B,CAAC,KAAA,KAAU;AACpD,EAAA,MAAM,EAAE,QAAA,EAAU,UAAA,EAAY,aAAA,EAAc,GAAI,KAAA;AAEhD,EAAA,MAAM,SAAA,GAAY,mBAAmB,aAAa,CAAA;AAElD,EAAA,IAAI,CAAC,QAAA,IAAY,CAAC,UAAA,EAAY;AAC5B,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,GAAA,CAAC,UAAO,SAAA,EAAW,MAAA,CAAO,QACvB,QAAA,EAAA,QAAA,CAAS,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,KAAM;AACtB,IAAA,MAAM,cAAA,GAAiB,gBACnB,SAAA,CAAU,MAAA,CAAO,EAAE,KAAK,CAAA,GACxB,CAAA,EAAG,CAAA,CAAE,KAAK,CAAA,EAAA,CAAA;AAEd,IAAA,uBACE,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QAEC,KAAA,EAAO,CAAA,CAAE,KAAA,IAAS,0BAAA,CAA2B,CAAC,CAAA;AAAA,QAC9C,aAAG,CAAA,CAAE,KAAK,CAAA,EAAA,EAAK,CAAA,CAAE,aAAa,cAAc,CAAA,CAAA;AAAA,OAAA;AAAA,MAFvC,CAAA,CAAE;AAAA,KAEyC;AAAA,EAEtD,CAAC,CAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DonutChartLegend.mjs","sources":["../../../../../../../../src/components/DonutChart/components/DonutChartLegend.tsx"],"sourcesContent":["import styles from \"../DonutChart.module.scss\";\nimport { type FC } from \"react\";\nimport { useNumberFormatter } from \"react-aria\";\nimport { Legend, LegendItem } from \"@/components/Legend\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\nimport type { DonutChartProps } from \"@/components/DonutChart\";\n\ntype Props = Pick<DonutChartProps, \"segments\" | \"showLegend\" | \"formatOptions\">;\n\nexport const DonutChartLegend: FC<Props> = (props) => {\n  const { segments, showLegend, formatOptions } = props;\n\n  const formatter = useNumberFormatter(formatOptions);\n\n  if (!segments || !showLegend) {\n    return null;\n  }\n\n  return (\n    <Legend className={styles.legend}>\n      {segments.map((s, i) => {\n        const formattedValue = formatOptions\n          ? formatter.format(s.value)\n          : `${s.value} %`;\n\n        return (\n          <LegendItem\n            key={s.title}\n            color={s.color ?? getCategoricalColorByIndex(i)}\n          >{`${s.title} (${s.valueText ?? formattedValue})`}</LegendItem>\n        );\n      })}\n    </Legend>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AASO,MAAM,gBAAA,GAA8B,CAAC,KAAA,KAAU;AACpD,EAAA,MAAM,EAAE,QAAA,EAAU,UAAA,EAAY,aAAA,EAAc,GAAI,KAAA;AAEhD,EAAA,MAAM,SAAA,GAAY,mBAAmB,aAAa,CAAA;AAElD,EAAA,IAAI,CAAC,QAAA,IAAY,CAAC,UAAA,EAAY;AAC5B,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,GAAA,CAAC,UAAO,SAAA,EAAW,MAAA,CAAO,QACvB,QAAA,EAAA,QAAA,CAAS,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,KAAM;AACtB,IAAA,MAAM,cAAA,GAAiB,gBACnB,SAAA,CAAU,MAAA,CAAO,EAAE,KAAK,CAAA,GACxB,CAAA,EAAG,CAAA,CAAE,KAAK,CAAA,EAAA,CAAA;AAEd,IAAA,uBACE,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QAEC,KAAA,EAAO,CAAA,CAAE,KAAA,IAAS,0BAAA,CAA2B,CAAC,CAAA;AAAA,QAC9C,aAAG,CAAA,CAAE,KAAK,CAAA,EAAA,EAAK,CAAA,CAAE,aAAa,cAAc,CAAA,CAAA;AAAA,OAAA;AAAA,MAFvC,CAAA,CAAE;AAAA,KAEyC;AAAA,EAEtD,CAAC,CAAA,EACH,CAAA;AAEJ;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"DonutChartValue.mjs","sources":["../../../../../../../../src/components/DonutChart/components/DonutChartValue.tsx"],"sourcesContent":["import styles from \"../DonutChart.module.scss\";\nimport React, { Children, type FC } from \"react\";\nimport { useNumberFormatter } from \"react-aria\";\nimport type { DonutChartProps } from \"@/components/DonutChart\";\n\ninterface Props extends Pick<DonutChartProps, \"formatOptions\" | \"children\"> {\n  value?: number;\n}\n\nexport const DonutChartValue: FC<Props> = (props) => {\n  const { value = 0, formatOptions, children } = props;\n\n  const formatter = useNumberFormatter(formatOptions);\n\n  if (Children.count(children) > 0) {\n    return <span className={styles.value}>{children}</span>;\n  }\n\n  const formattedValue = formatOptions ? formatter.format(value) : `${value} %`;\n\n  return (\n    <span className={styles.value}>\n      <strong>{formattedValue}</strong>\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;;;AASO,MAAM,eAAA,GAA6B,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM,EAAE,KAAA,GAAQ,CAAA,EAAG,aAAA,EAAe,UAAS,GAAI,KAAA;AAE/C,EAAA,MAAM,SAAA,GAAY,mBAAmB,aAAa,CAAA;AAElD,EAAA,IAAI,QAAA,CAAS,KAAA,CAAM,QAAQ,CAAA,GAAI,CAAA,EAAG;AAChC,IAAA,uBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,OAAQ,QAAA,EAAS,CAAA;AAAA,EAClD;AAEA,EAAA,MAAM,iBAAiB,aAAA,GAAgB,SAAA,CAAU,OAAO,KAAK,CAAA,GAAI,GAAG,KAAK,CAAA,EAAA,CAAA;AAEzE,EAAA,uBACE,GAAA,CAAC,UAAK,SAAA,EAAW,MAAA,CAAO,OACtB,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAQ,0BAAe,CAAA,EAC1B,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DonutChartValue.mjs","sources":["../../../../../../../../src/components/DonutChart/components/DonutChartValue.tsx"],"sourcesContent":["import styles from \"../DonutChart.module.scss\";\nimport { Children, type FC } from \"react\";\nimport { useNumberFormatter } from \"react-aria\";\nimport type { DonutChartProps } from \"@/components/DonutChart\";\n\ninterface Props extends Pick<DonutChartProps, \"formatOptions\" | \"children\"> {\n  value?: number;\n}\n\nexport const DonutChartValue: FC<Props> = (props) => {\n  const { value = 0, formatOptions, children } = props;\n\n  const formatter = useNumberFormatter(formatOptions);\n\n  if (Children.count(children) > 0) {\n    return <span className={styles.value}>{children}</span>;\n  }\n\n  const formattedValue = formatOptions ? formatter.format(value) : `${value} %`;\n\n  return (\n    <span className={styles.value}>\n      <strong>{formattedValue}</strong>\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;;;AASO,MAAM,eAAA,GAA6B,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM,EAAE,KAAA,GAAQ,CAAA,EAAG,aAAA,EAAe,UAAS,GAAI,KAAA;AAE/C,EAAA,MAAM,SAAA,GAAY,mBAAmB,aAAa,CAAA;AAElD,EAAA,IAAI,QAAA,CAAS,KAAA,CAAM,QAAQ,CAAA,GAAI,CAAA,EAAG;AAChC,IAAA,uBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,OAAQ,QAAA,EAAS,CAAA;AAAA,EAClD;AAEA,EAAA,MAAM,iBAAiB,aAAA,GAAgB,SAAA,CAAU,OAAO,KAAK,CAAA,GAAI,GAAG,KAAK,CAAA,EAAA,CAAA;AAEzE,EAAA,uBACE,GAAA,CAAC,UAAK,SAAA,EAAW,MAAA,CAAO,OACtB,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAQ,0BAAe,CAAA,EAC1B,CAAA;AAEJ;;;;"}

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

@@ -1,7 +1,6 @@
 "use client"
 /* */
 import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react';
 import styles from './EmulatedBoldText.module.scss.mjs';
 import clsx from 'clsx';
 

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

@@ -1 +1 @@
-{"version":3,"file":"EmulatedBoldText.mjs","sources":["../../../../../../../src/components/EmulatedBoldText/EmulatedBoldText.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./EmulatedBoldText.module.scss\";\nimport clsx from \"clsx\";\n\nexport type EmulatedBoldTextProps = PropsWithChildren<ComponentProps<\"span\">>;\n\nexport const EmulatedBoldText: FC<EmulatedBoldTextProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.emulatedBoldText, className);\n\n  return (\n    <span className={rootClassName} {...rest}>\n      {children}\n      <span aria-hidden=\"true\" className={styles.boldText}>\n        {children}\n      </span>\n    </span>\n  );\n};\n\nexport default EmulatedBoldText;\n"],"names":[],"mappings":";;;;;AAOO,MAAM,gBAAA,GAA8C,CAAC,KAAA,KAAU;AACpE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAEzC,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,gBAAA,EAAkB,SAAS,CAAA;AAE7D,EAAA,uBACE,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,aAAA,EAAgB,GAAG,IAAA,EACjC,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,wBACA,MAAA,EAAA,EAAK,aAAA,EAAY,QAAO,SAAA,EAAW,MAAA,CAAO,UACxC,QAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"EmulatedBoldText.mjs","sources":["../../../../../../../src/components/EmulatedBoldText/EmulatedBoldText.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport styles from \"./EmulatedBoldText.module.scss\";\nimport clsx from \"clsx\";\n\nexport type EmulatedBoldTextProps = PropsWithChildren<ComponentProps<\"span\">>;\n\nexport const EmulatedBoldText: FC<EmulatedBoldTextProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.emulatedBoldText, className);\n\n  return (\n    <span className={rootClassName} {...rest}>\n      {children}\n      <span aria-hidden=\"true\" className={styles.boldText}>\n        {children}\n      </span>\n    </span>\n  );\n};\n\nexport default EmulatedBoldText;\n"],"names":[],"mappings":";;;;AAMO,MAAM,gBAAA,GAA8C,CAAC,KAAA,KAAU;AACpE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAEzC,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,gBAAA,EAAkB,SAAS,CAAA;AAE7D,EAAA,uBACE,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,aAAA,EAAgB,GAAG,IAAA,EACjC,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,wBACA,MAAA,EAAA,EAAK,aAAA,EAAY,QAAO,SAAA,EAAW,MAAA,CAAO,UACxC,QAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/packages/components/src/components/FileCard/components/DeleteButton/DeleteButton.mjs

@@ -1,9 +1,9 @@
 "use client"
 /* */
 import { jsx } from 'react/jsx-runtime';
-import 'react';
 import { Button } from '../../../Button/Button.mjs';
 import styles from '../../FileCard.module.scss.mjs';
+import 'react';
 import '@mittwald/flow-icons';
 import '../../../Icon/components/IconSetProvider.mjs';
 import '../../../Icon/Icon.mjs';

package/dist/js/packages/components/src/components/FileCard/components/DeleteButton/DeleteButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DeleteButton.mjs","sources":["../../../../../../../../../src/components/FileCard/components/DeleteButton/DeleteButton.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { Button } from \"@/components/Button\";\nimport styles from \"@/components/FileCard/FileCard.module.scss\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport locales from \"../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\n\ninterface Props {\n  onDelete: () => void;\n}\n\nexport const DeleteButton: FC<Props> = (props) => {\n  const { onDelete } = props;\n  const stringFormatter = useLocalizedStringFormatter(locales, \"FileCard\");\n\n  return (\n    <Button\n      className={styles.deleteButton}\n      aria-label={stringFormatter.format(`delete`)}\n      variant=\"plain\"\n      color=\"secondary\"\n      onPress={onDelete}\n    >\n      <IconClose />\n    </Button>\n  );\n};\n\nexport default DeleteButton;\n"],"names":[],"mappings":";;;;;;;;;;;;AAYO,MAAM,YAAA,GAA0B,CAAC,KAAA,KAAU;AAChD,EAAA,MAAM,EAAE,UAAS,GAAI,KAAA;AACrB,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,UAAU,CAAA;AAEvE,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAA,CAAO,YAAA;AAAA,MAClB,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,CAAA,MAAA,CAAQ,CAAA;AAAA,MAC3C,OAAA,EAAQ,OAAA;AAAA,MACR,KAAA,EAAM,WAAA;AAAA,MACN,OAAA,EAAS,QAAA;AAAA,MAET,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA,GACb;AAEJ;;;;"}
+{"version":3,"file":"DeleteButton.mjs","sources":["../../../../../../../../../src/components/FileCard/components/DeleteButton/DeleteButton.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Button } from \"@/components/Button\";\nimport styles from \"@/components/FileCard/FileCard.module.scss\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport locales from \"../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\n\ninterface Props {\n  onDelete: () => void;\n}\n\nexport const DeleteButton: FC<Props> = (props) => {\n  const { onDelete } = props;\n  const stringFormatter = useLocalizedStringFormatter(locales, \"FileCard\");\n\n  return (\n    <Button\n      className={styles.deleteButton}\n      aria-label={stringFormatter.format(`delete`)}\n      variant=\"plain\"\n      color=\"secondary\"\n      onPress={onDelete}\n    >\n      <IconClose />\n    </Button>\n  );\n};\n\nexport default DeleteButton;\n"],"names":[],"mappings":";;;;;;;;;;;;AAWO,MAAM,YAAA,GAA0B,CAAC,KAAA,KAAU;AAChD,EAAA,MAAM,EAAE,UAAS,GAAI,KAAA;AACrB,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,UAAU,CAAA;AAEvE,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAA,CAAO,YAAA;AAAA,MAClB,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,CAAA,MAAA,CAAQ,CAAA;AAAA,MAC3C,OAAA,EAAQ,OAAA;AAAA,MACR,KAAA,EAAM,WAAA;AAAA,MACN,OAAA,EAAS,QAAA;AAAA,MAET,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA,GACb;AAEJ;;;;"}

package/dist/js/packages/components/src/components/FileCard/components/FileSizeText/FileSizeText.mjs

@@ -1,7 +1,6 @@
 "use client"
 /* */
 import { jsx } from 'react/jsx-runtime';
-import 'react';
 import { Text } from '../../../Text/Text.mjs';
 import styles from '../../FileCard.module.scss.mjs';
 

package/dist/js/packages/components/src/components/FileCard/components/FileSizeText/FileSizeText.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileSizeText.mjs","sources":["../../../../../../../../../src/components/FileCard/components/FileSizeText/FileSizeText.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { Text } from \"@/components/Text\";\nimport styles from \"@/components/FileCard/FileCard.module.scss\";\n\ninterface Props {\n  sizeInBytes: number;\n}\n\nexport const FileSizeText: FC<Props> = (props) => {\n  const { sizeInBytes } = props;\n\n  return (\n    <Text className={styles.subTitle}>\n      {new Intl.NumberFormat(\"en-US\", {\n        notation: \"compact\",\n        style: \"unit\",\n        unit: \"byte\",\n        unitDisplay: \"narrow\",\n      }).format(sizeInBytes)}\n    </Text>\n  );\n};\n\nexport default FileSizeText;\n"],"names":[],"mappings":";;;;;AASO,MAAM,YAAA,GAA0B,CAAC,KAAA,KAAU;AAChD,EAAA,MAAM,EAAE,aAAY,GAAI,KAAA;AAExB,EAAA,uBACE,GAAA,CAAC,QAAK,SAAA,EAAW,MAAA,CAAO,UACrB,QAAA,EAAA,IAAI,IAAA,CAAK,aAAa,OAAA,EAAS;AAAA,IAC9B,QAAA,EAAU,SAAA;AAAA,IACV,KAAA,EAAO,MAAA;AAAA,IACP,IAAA,EAAM,MAAA;AAAA,IACN,WAAA,EAAa;AAAA,GACd,CAAA,CAAE,MAAA,CAAO,WAAW,CAAA,EACvB,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FileSizeText.mjs","sources":["../../../../../../../../../src/components/FileCard/components/FileSizeText/FileSizeText.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Text } from \"@/components/Text\";\nimport styles from \"@/components/FileCard/FileCard.module.scss\";\n\ninterface Props {\n  sizeInBytes: number;\n}\n\nexport const FileSizeText: FC<Props> = (props) => {\n  const { sizeInBytes } = props;\n\n  return (\n    <Text className={styles.subTitle}>\n      {new Intl.NumberFormat(\"en-US\", {\n        notation: \"compact\",\n        style: \"unit\",\n        unit: \"byte\",\n        unitDisplay: \"narrow\",\n      }).format(sizeInBytes)}\n    </Text>\n  );\n};\n\nexport default FileSizeText;\n"],"names":[],"mappings":";;;;AAQO,MAAM,YAAA,GAA0B,CAAC,KAAA,KAAU;AAChD,EAAA,MAAM,EAAE,aAAY,GAAI,KAAA;AAExB,EAAA,uBACE,GAAA,CAAC,QAAK,SAAA,EAAW,MAAA,CAAO,UACrB,QAAA,EAAA,IAAI,IAAA,CAAK,aAAa,OAAA,EAAS;AAAA,IAC9B,QAAA,EAAU,SAAA;AAAA,IACV,KAAA,EAAO,MAAA;AAAA,IACP,IAAA,EAAM,MAAA;AAAA,IACN,WAAA,EAAa;AAAA,GACd,CAAA,CAAE,MAAA,CAAO,WAAW,CAAA,EACvB,CAAA;AAEJ;;;;"}

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

@@ -52,7 +52,7 @@ const FileField = flowComponent("FileField", (props) => {
     "div",
     {
       ...fieldProps,
-      className: clsx(fieldProps.className, styles.FileField),
+      className: clsx(fieldProps.className, styles.fileField),
       children: /* @__PURE__ */ jsxs(FieldErrorContext.Provider, { value: formValidationState.displayValidation, children: [
         /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, { props: fieldPropsContext, children: /* @__PURE__ */ jsx(
           "div",

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

@@ -1 +1 @@
-{"version":3,"file":"FileField.mjs","sources":["../../../../../../../src/components/FileField/FileField.tsx"],"sourcesContent":["import { useFormValidation } from \"@react-aria/form\";\nimport { useFormValidationState } from \"@react-stately/form\";\nimport type { PropsWithChildren } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport { FieldErrorContext } from \"react-aria-components\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport { FileInput } from \"@/components/FileField/components/FileInput\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./FileField.module.scss\";\nimport clsx from \"clsx\";\n\nexport interface FileFieldProps\n  extends\n    PropsWithChildren,\n    FlowComponentProps<HTMLInputElement>,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<\n      Aria.TextFieldProps,\n      \"isRequired\" | \"isInvalid\" | \"validationBehavior\" | \"isDisabled\"\n    > {\n  /** Handler that is called when the file input changes. */\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileField = flowComponent(\"FileField\", (props) => {\n  const {\n    children,\n    ref,\n    isRequired,\n    isInvalid,\n    isDisabled,\n    validationBehavior,\n    onChange,\n    isReadOnly,\n    ...restInputProps\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"FileField\");\n\n  const inputRef = useObjectRef(ref);\n\n  const formValidationState = useFormValidationState({\n    value: undefined,\n    validationBehavior,\n    isInvalid,\n  });\n\n  useFormValidation({ validationBehavior }, formValidationState, inputRef);\n\n  const inputProps = {\n    ...restInputProps,\n    \"aria-invalid\": formValidationState.displayValidation.isInvalid,\n    value: undefined,\n  };\n\n  const handleChange: FileInputOnChangeHandler = (fileList) => {\n    if (fileList && onChange) {\n      onChange(fileList);\n    }\n  };\n\n  return (\n    <div\n      {...fieldProps}\n      className={clsx(fieldProps.className, styles.FileField)}\n    >\n      <FieldErrorContext.Provider value={formValidationState.displayValidation}>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider props={fieldPropsContext}>\n            <div\n              data-readonly={isReadOnly}\n              data-required={!!isRequired || undefined}\n              data-invalid={\n                formValidationState.displayValidation.isInvalid || undefined\n              }\n            >\n              <FileInput\n                ref={inputRef}\n                isReadOnly={isReadOnly}\n                onChange={isReadOnly ? undefined : handleChange}\n                isDisabled={isDisabled}\n                {...inputProps}\n              >\n                {children}\n              </FileInput>\n            </div>\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </FieldErrorContext.Provider>\n    </div>\n  );\n});\nexport default FileField;\n"],"names":[],"mappings":";;;;;;;;;;;;;AA+BO,MAAM,SAAA,GAAY,aAAA,CAAc,WAAA,EAAa,CAAC,KAAA,KAAU;AAC7D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,GAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,iBAAA,CAAkB,KAAA,EAAO,WAAW,CAAA;AAExC,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,sBAAsB,sBAAA,CAAuB;AAAA,IACjD,KAAA,EAAO,MAAA;AAAA,IACP,kBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,iBAAA,CAAkB,EAAE,kBAAA,EAAmB,EAAG,mBAAA,EAAqB,QAAQ,CAAA;AAEvE,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,GAAG,cAAA;AAAA,IACH,cAAA,EAAgB,oBAAoB,iBAAA,CAAkB,SAAA;AAAA,IACtD,KAAA,EAAO;AAAA,GACT;AAEA,EAAA,MAAM,YAAA,GAAyC,CAAC,QAAA,KAAa;AAC3D,IAAA,IAAI,YAAY,QAAA,EAAU;AACxB,MAAA,QAAA,CAAS,QAAQ,CAAA;AAAA,IACnB;AAAA,EACF,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,OAAO,SAAS,CAAA;AAAA,MAEtD,+BAAC,iBAAA,CAAkB,QAAA,EAAlB,EAA2B,KAAA,EAAO,oBAAoB,iBAAA,EACrD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC3B,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,eAAA,EAAe,UAAA;AAAA,YACf,eAAA,EAAe,CAAC,CAAC,UAAA,IAAc,MAAA;AAAA,YAC/B,cAAA,EACE,mBAAA,CAAoB,iBAAA,CAAkB,SAAA,IAAa,MAAA;AAAA,YAGrD,QAAA,kBAAA,GAAA;AAAA,cAAC,SAAA;AAAA,cAAA;AAAA,gBACC,GAAA,EAAK,QAAA;AAAA,gBACL,UAAA;AAAA,gBACA,QAAA,EAAU,aAAa,MAAA,GAAY,YAAA;AAAA,gBACnC,UAAA;AAAA,gBACC,GAAG,UAAA;AAAA,gBAEH;AAAA;AAAA;AACH;AAAA,WAEJ,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA,OAAA,EAClB;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"FileField.mjs","sources":["../../../../../../../src/components/FileField/FileField.tsx"],"sourcesContent":["import { useFormValidation } from \"@react-aria/form\";\nimport { useFormValidationState } from \"@react-stately/form\";\nimport type { PropsWithChildren } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport { FieldErrorContext } from \"react-aria-components\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport { FileInput } from \"@/components/FileField/components/FileInput\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./FileField.module.scss\";\nimport clsx from \"clsx\";\n\nexport interface FileFieldProps\n  extends\n    PropsWithChildren,\n    FlowComponentProps<HTMLInputElement>,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<\n      Aria.TextFieldProps,\n      \"isRequired\" | \"isInvalid\" | \"validationBehavior\" | \"isDisabled\"\n    > {\n  /** Handler that is called when the file input changes. */\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileField = flowComponent(\"FileField\", (props) => {\n  const {\n    children,\n    ref,\n    isRequired,\n    isInvalid,\n    isDisabled,\n    validationBehavior,\n    onChange,\n    isReadOnly,\n    ...restInputProps\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"FileField\");\n\n  const inputRef = useObjectRef(ref);\n\n  const formValidationState = useFormValidationState({\n    value: undefined,\n    validationBehavior,\n    isInvalid,\n  });\n\n  useFormValidation({ validationBehavior }, formValidationState, inputRef);\n\n  const inputProps = {\n    ...restInputProps,\n    \"aria-invalid\": formValidationState.displayValidation.isInvalid,\n    value: undefined,\n  };\n\n  const handleChange: FileInputOnChangeHandler = (fileList) => {\n    if (fileList && onChange) {\n      onChange(fileList);\n    }\n  };\n\n  return (\n    <div\n      {...fieldProps}\n      className={clsx(fieldProps.className, styles.fileField)}\n    >\n      <FieldErrorContext.Provider value={formValidationState.displayValidation}>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider props={fieldPropsContext}>\n            <div\n              data-readonly={isReadOnly}\n              data-required={!!isRequired || undefined}\n              data-invalid={\n                formValidationState.displayValidation.isInvalid || undefined\n              }\n            >\n              <FileInput\n                ref={inputRef}\n                isReadOnly={isReadOnly}\n                onChange={isReadOnly ? undefined : handleChange}\n                isDisabled={isDisabled}\n                {...inputProps}\n              >\n                {children}\n              </FileInput>\n            </div>\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </FieldErrorContext.Provider>\n    </div>\n  );\n});\nexport default FileField;\n"],"names":[],"mappings":";;;;;;;;;;;;;AA+BO,MAAM,SAAA,GAAY,aAAA,CAAc,WAAA,EAAa,CAAC,KAAA,KAAU;AAC7D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,GAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,iBAAA,CAAkB,KAAA,EAAO,WAAW,CAAA;AAExC,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,sBAAsB,sBAAA,CAAuB;AAAA,IACjD,KAAA,EAAO,MAAA;AAAA,IACP,kBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,iBAAA,CAAkB,EAAE,kBAAA,EAAmB,EAAG,mBAAA,EAAqB,QAAQ,CAAA;AAEvE,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,GAAG,cAAA;AAAA,IACH,cAAA,EAAgB,oBAAoB,iBAAA,CAAkB,SAAA;AAAA,IACtD,KAAA,EAAO;AAAA,GACT;AAEA,EAAA,MAAM,YAAA,GAAyC,CAAC,QAAA,KAAa;AAC3D,IAAA,IAAI,YAAY,QAAA,EAAU;AACxB,MAAA,QAAA,CAAS,QAAQ,CAAA;AAAA,IACnB;AAAA,EACF,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,OAAO,SAAS,CAAA;AAAA,MAEtD,+BAAC,iBAAA,CAAkB,QAAA,EAAlB,EAA2B,KAAA,EAAO,oBAAoB,iBAAA,EACrD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC3B,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,eAAA,EAAe,UAAA;AAAA,YACf,eAAA,EAAe,CAAC,CAAC,UAAA,IAAc,MAAA;AAAA,YAC/B,cAAA,EACE,mBAAA,CAAoB,iBAAA,CAAkB,SAAA,IAAa,MAAA;AAAA,YAGrD,QAAA,kBAAA,GAAA;AAAA,cAAC,SAAA;AAAA,cAAA;AAAA,gBACC,GAAA,EAAK,QAAA;AAAA,gBACL,UAAA;AAAA,gBACA,QAAA,EAAU,aAAa,MAAA,GAAY,YAAA;AAAA,gBACnC,UAAA;AAAA,gBACC,GAAG,UAAA;AAAA,gBAEH;AAAA;AAAA;AACH;AAAA,WAEJ,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA,OAAA,EAClB;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/dist/js/packages/components/src/components/FileField/FileField.module.scss.mjs

@@ -1,9 +1,9 @@
 "use client"
 /* */
-const FileField = "flow--file-field";
+const fileField = "flow--file-field";
 const styles = {
-	FileField: FileField
+	fileField: fileField
 };
 
-export { FileField, styles as default };
+export { styles as default, fileField };
 //# sourceMappingURL=FileField.module.scss.mjs.map

package/dist/js/packages/components/src/components/FileField/components/FileInput.mjs

@@ -29,7 +29,8 @@ const FileInput = (props) => {
       className: styles.trigger,
       isDisabled,
       isReadOnly
-    }
+    },
+    FieldDescription: { className: styles.fieldDescription }
   };
   return /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, children: [
     children,

package/dist/js/packages/components/src/components/FileField/components/FileInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.mjs","sources":["../../../../../../../../src/components/FileField/components/FileInput.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref } from \"react\";\nimport { type ChangeEvent } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./FileInput.module.scss\";\nimport { useVisuallyHidden } from \"react-aria\";\n\nexport type FileInputOnChangeHandler = (files: FileList | null) => void;\n\n/** @internal */\nexport interface FileInputProps extends PropsWithChildren {\n  onChange?: FileInputOnChangeHandler;\n  isDisabled?: boolean;\n  ref?: Ref<HTMLInputElement>;\n  isReadOnly?: boolean;\n}\n\n/** @internal */\nexport const FileInput: FC<FileInputProps> = (props) => {\n  const { children, isDisabled, onChange, isReadOnly, ref, ...restInputProps } =\n    props;\n  const inputRef = useObjectRef(ref);\n  const { visuallyHiddenProps } = useVisuallyHidden();\n\n  const handlePress = () => {\n    if (inputRef.current?.value) {\n      inputRef.current.value = \"\";\n      onChange?.(null);\n    }\n    inputRef.current?.click();\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.files);\n  };\n\n  const propsContext: PropsContext = {\n    Button: {\n      onPress: handlePress,\n      className: styles.trigger,\n      isDisabled,\n      isReadOnly,\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      {children}\n      <Aria.Input\n        {...restInputProps}\n        {...visuallyHiddenProps}\n        type=\"file\"\n        ref={inputRef}\n        onChange={handleChange}\n      />\n    </PropsContextProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAoBO,MAAM,SAAA,GAAgC,CAAC,KAAA,KAAU;AACtD,EAAA,MAAM,EAAE,UAAU,UAAA,EAAY,QAAA,EAAU,YAAY,GAAA,EAAK,GAAG,gBAAe,GACzE,KAAA;AACF,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AACjC,EAAA,MAAM,EAAE,mBAAA,EAAoB,GAAI,iBAAA,EAAkB;AAElD,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,IAAI,QAAA,CAAS,SAAS,KAAA,EAAO;AAC3B,MAAA,QAAA,CAAS,QAAQ,KAAA,GAAQ,EAAA;AACzB,MAAA,QAAA,GAAW,IAAI,CAAA;AAAA,IACjB;AACA,IAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,EAC1B,CAAA;AAEA,EAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KAAyC;AAC7D,IAAA,QAAA,GAAW,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,EAC/B,CAAA;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,MAAA,EAAQ;AAAA,MACN,OAAA,EAAS,WAAA;AAAA,MACT,WAAW,MAAA,CAAO,OAAA;AAAA,MAClB,UAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,uBACE,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA;AAAA,MAAC,IAAA,CAAK,KAAA;AAAA,MAAL;AAAA,QACE,GAAG,cAAA;AAAA,QACH,GAAG,mBAAA;AAAA,QACJ,IAAA,EAAK,MAAA;AAAA,QACL,GAAA,EAAK,QAAA;AAAA,QACL,QAAA,EAAU;AAAA;AAAA;AACZ,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FileInput.mjs","sources":["../../../../../../../../src/components/FileField/components/FileInput.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref } from \"react\";\nimport { type ChangeEvent } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./FileInput.module.scss\";\nimport { useVisuallyHidden } from \"react-aria\";\n\nexport type FileInputOnChangeHandler = (files: FileList | null) => void;\n\n/** @internal */\nexport interface FileInputProps extends PropsWithChildren {\n  onChange?: FileInputOnChangeHandler;\n  isDisabled?: boolean;\n  ref?: Ref<HTMLInputElement>;\n  isReadOnly?: boolean;\n}\n\n/** @internal */\nexport const FileInput: FC<FileInputProps> = (props) => {\n  const { children, isDisabled, onChange, isReadOnly, ref, ...restInputProps } =\n    props;\n  const inputRef = useObjectRef(ref);\n  const { visuallyHiddenProps } = useVisuallyHidden();\n\n  const handlePress = () => {\n    if (inputRef.current?.value) {\n      inputRef.current.value = \"\";\n      onChange?.(null);\n    }\n    inputRef.current?.click();\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.files);\n  };\n\n  const propsContext: PropsContext = {\n    Button: {\n      onPress: handlePress,\n      className: styles.trigger,\n      isDisabled,\n      isReadOnly,\n    },\n    FieldDescription: { className: styles.fieldDescription },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      {children}\n      <Aria.Input\n        {...restInputProps}\n        {...visuallyHiddenProps}\n        type=\"file\"\n        ref={inputRef}\n        onChange={handleChange}\n      />\n    </PropsContextProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAoBO,MAAM,SAAA,GAAgC,CAAC,KAAA,KAAU;AACtD,EAAA,MAAM,EAAE,UAAU,UAAA,EAAY,QAAA,EAAU,YAAY,GAAA,EAAK,GAAG,gBAAe,GACzE,KAAA;AACF,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AACjC,EAAA,MAAM,EAAE,mBAAA,EAAoB,GAAI,iBAAA,EAAkB;AAElD,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,IAAI,QAAA,CAAS,SAAS,KAAA,EAAO;AAC3B,MAAA,QAAA,CAAS,QAAQ,KAAA,GAAQ,EAAA;AACzB,MAAA,QAAA,GAAW,IAAI,CAAA;AAAA,IACjB;AACA,IAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,EAC1B,CAAA;AAEA,EAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KAAyC;AAC7D,IAAA,QAAA,GAAW,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,EAC/B,CAAA;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,MAAA,EAAQ;AAAA,MACN,OAAA,EAAS,WAAA;AAAA,MACT,WAAW,MAAA,CAAO,OAAA;AAAA,MAClB,UAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,gBAAA,EAAkB,EAAE,SAAA,EAAW,MAAA,CAAO,gBAAA;AAAiB,GACzD;AAEA,EAAA,uBACE,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA;AAAA,MAAC,IAAA,CAAK,KAAA;AAAA,MAAL;AAAA,QACE,GAAG,cAAA;AAAA,QACH,GAAG,mBAAA;AAAA,QACJ,IAAA,EAAK,MAAA;AAAA,QACL,GAAA,EAAK,QAAA;AAAA,QACL,QAAA,EAAU;AAAA;AAAA;AACZ,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/packages/components/src/components/FileField/components/FileInput.module.scss.mjs

@@ -1,9 +1,11 @@
 "use client"
 /* */
 const trigger = "flow--file-field--trigger";
+const fieldDescription = "flow--file-field--field-description";
 const styles = {
-	trigger: trigger
+	trigger: trigger,
+	fieldDescription: fieldDescription
 };
 
-export { styles as default, trigger };
+export { styles as default, fieldDescription, trigger };
 //# sourceMappingURL=FileInput.module.scss.mjs.map

package/dist/js/packages/components/src/components/FileField/components/FileInput.module.scss.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"FileInput.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

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

@@ -23,9 +23,9 @@ const Icon = flowComponent("Icon", (props) => {
     "aria-label": ariaLabel,
     className: clsx(
       styles.icon,
-      className,
       styles[`size-${size}`],
-      status && styles[status]
+      status && styles[status],
+      className
     )
   };
   const iconElement = React.Children.toArray(children)[0];

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.mjs","sources":["../../../../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { PropsWithChildren, SVGAttributes } from \"react\";\nimport React from \"react\";\nimport styles from \"./Icon.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { cloneElement } from \"@/lib/react/cloneElement\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\n\ntype SvgAttributeProps = SVGAttributes<SVGSVGElement>;\n\nexport interface IconProps\n  extends\n    PropsWithChildren<Omit<SvgAttributeProps, \"name\">>,\n    FlowComponentProps,\n    PropsWithStatus {\n  /** The size of the icon. @default \"m\" */\n  size?: \"s\" | \"m\" | \"l\";\n}\n\n/** @flr-generate all */\nexport const Icon = flowComponent(\"Icon\", (props) => {\n  const {\n    className,\n    \"aria-label\": ariaLabel,\n    children,\n    size = \"m\",\n    status,\n    ...svgAttributes\n  } = props;\n\n  const iconProps: SvgAttributeProps = {\n    ...svgAttributes,\n    focusable: \"false\",\n    role: \"img\",\n    \"aria-hidden\": !ariaLabel,\n    \"aria-label\": ariaLabel,\n    className: clsx(\n      styles.icon,\n      className,\n      styles[`size-${size}`],\n      status && styles[status],\n    ),\n  };\n\n  const iconElement = React.Children.toArray(children)[0];\n\n  if (!React.isValidElement(iconElement)) {\n    throw new Error(\n      `Expected children of Icon component to be a valid React element (got ${String(\n        children,\n      )})`,\n    );\n  }\n\n  return cloneElement(iconElement, iconProps);\n});\n\nexport default Icon;\n"],"names":[],"mappings":";;;;;;AAqBO,MAAM,IAAA,GAAO,aAAA,CAAc,MAAA,EAAQ,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,YAAA,EAAc,SAAA;AAAA,IACd,QAAA;AAAA,IACA,IAAA,GAAO,GAAA;AAAA,IACP,MAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,SAAA,GAA+B;AAAA,IACnC,GAAG,aAAA;AAAA,IACH,SAAA,EAAW,OAAA;AAAA,IACX,IAAA,EAAM,KAAA;AAAA,IACN,eAAe,CAAC,SAAA;AAAA,IAChB,YAAA,EAAc,SAAA;AAAA,IACd,SAAA,EAAW,IAAA;AAAA,MACT,MAAA,CAAO,IAAA;AAAA,MACP,SAAA;AAAA,MACA,MAAA,CAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAA;AAAA,MACrB,MAAA,IAAU,OAAO,MAAM;AAAA;AACzB,GACF;AAEA,EAAA,MAAM,cAAc,KAAA,CAAM,QAAA,CAAS,OAAA,CAAQ,QAAQ,EAAE,CAAC,CAAA;AAEtD,EAAA,IAAI,CAAC,KAAA,CAAM,cAAA,CAAe,WAAW,CAAA,EAAG;AACtC,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,CAAA,qEAAA,EAAwE,MAAA;AAAA,QACtE;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AAAA,EACF;AAEA,EAAA,OAAO,YAAA,CAAa,aAAa,SAAS,CAAA;AAC5C,CAAC;;;;"}
+{"version":3,"file":"Icon.mjs","sources":["../../../../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { PropsWithChildren, SVGAttributes } from \"react\";\nimport React from \"react\";\nimport styles from \"./Icon.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { cloneElement } from \"@/lib/react/cloneElement\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\n\ntype SvgAttributeProps = SVGAttributes<SVGSVGElement>;\n\nexport interface IconProps\n  extends\n    PropsWithChildren<Omit<SvgAttributeProps, \"name\">>,\n    FlowComponentProps,\n    PropsWithStatus {\n  /** The size of the icon. @default \"m\" */\n  size?: \"s\" | \"m\" | \"l\";\n}\n\n/** @flr-generate all */\nexport const Icon = flowComponent(\"Icon\", (props) => {\n  const {\n    className,\n    \"aria-label\": ariaLabel,\n    children,\n    size = \"m\",\n    status,\n    ...svgAttributes\n  } = props;\n\n  const iconProps: SvgAttributeProps = {\n    ...svgAttributes,\n    focusable: \"false\",\n    role: \"img\",\n    \"aria-hidden\": !ariaLabel,\n    \"aria-label\": ariaLabel,\n    className: clsx(\n      styles.icon,\n      styles[`size-${size}`],\n      status && styles[status],\n      className,\n    ),\n  };\n\n  const iconElement = React.Children.toArray(children)[0];\n\n  if (!React.isValidElement(iconElement)) {\n    throw new Error(\n      `Expected children of Icon component to be a valid React element (got ${String(\n        children,\n      )})`,\n    );\n  }\n\n  return cloneElement(iconElement, iconProps);\n});\n\nexport default Icon;\n"],"names":[],"mappings":";;;;;;AAqBO,MAAM,IAAA,GAAO,aAAA,CAAc,MAAA,EAAQ,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,YAAA,EAAc,SAAA;AAAA,IACd,QAAA;AAAA,IACA,IAAA,GAAO,GAAA;AAAA,IACP,MAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,SAAA,GAA+B;AAAA,IACnC,GAAG,aAAA;AAAA,IACH,SAAA,EAAW,OAAA;AAAA,IACX,IAAA,EAAM,KAAA;AAAA,IACN,eAAe,CAAC,SAAA;AAAA,IAChB,YAAA,EAAc,SAAA;AAAA,IACd,SAAA,EAAW,IAAA;AAAA,MACT,MAAA,CAAO,IAAA;AAAA,MACP,MAAA,CAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAA;AAAA,MACrB,MAAA,IAAU,OAAO,MAAM,CAAA;AAAA,MACvB;AAAA;AACF,GACF;AAEA,EAAA,MAAM,cAAc,KAAA,CAAM,QAAA,CAAS,OAAA,CAAQ,QAAQ,EAAE,CAAC,CAAA;AAEtD,EAAA,IAAI,CAAC,KAAA,CAAM,cAAA,CAAe,WAAW,CAAA,EAAG;AACtC,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,CAAA,qEAAA,EAAwE,MAAA;AAAA,QACtE;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AAAA,EACF;AAEA,EAAA,OAAO,YAAA,CAAa,aAAa,SAAS,CAAA;AAC5C,CAAC;;;;"}

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

@@ -14,8 +14,8 @@ const IllustratedMessage = flowComponent(
     const { className, children, color = "default", ...rest } = props;
     const rootClassName = clsx(
       styles.illustratedMessage,
-      className,
-      color !== "default" && styles[color]
+      color !== "default" && styles[color],
+      className
     );
     const alphaColor = isAlphaColor(color) ? color : void 0;
     const propsContext = {
@@ -35,6 +35,7 @@ const IllustratedMessage = flowComponent(
         color: alphaColor
       },
       ActionGroup: {
+        preserveOrder: true,
         className: styles.actionGroup
       },
       ProgressBar: { className: styles.progressBar }

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

@@ -1 +1 @@
-{"version":3,"file":"IllustratedMessage.mjs","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      className,\n      color !== \"default\" && styles[color],\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        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"],"names":[],"mappings":";;;;;;;;AAkBO,MAAM,kBAAA,GAAqB,aAAA;AAAA,EAChC,oBAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,QAAQ,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAE5D,IAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,MACpB,MAAA,CAAO,kBAAA;AAAA,MACP,SAAA;AAAA,MACA,KAAA,KAAU,SAAA,IAAa,MAAA,CAAO,KAAK;AAAA,KACrC;AAEA,IAAA,MAAM,UAAA,GAAa,YAAA,CAAa,KAAK,CAAA,GAAI,KAAA,GAAQ,MAAA;AAEjD,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,IAAA,EAAM;AAAA,QACJ,WAAW,MAAA,CAAO,IAAA;AAAA,QAClB,IAAA,EAAM;AAAA,OACR;AAAA,MACA,OAAA,EAAS;AAAA,QACP,WAAW,MAAA,CAAO,OAAA;AAAA,QAClB;AAAA,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,WAAW,MAAA,CAAO,IAAA;AAAA,QAClB,KAAA,EAAO;AAAA,OACT;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,KAAA,EAAO;AAAA,OACT;AAAA,MACA,WAAA,EAAa;AAAA,QACX,WAAW,MAAA,CAAO;AAAA,OACpB;AAAA,MACA,WAAA,EAAa,EAAE,SAAA,EAAW,MAAA,CAAO,WAAA;AAAY,KAC/C;AAEA,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,SAAA,EAAW,aAAA,EACxB,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,CAAA,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"IllustratedMessage.mjs","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"],"names":[],"mappings":";;;;;;;;AAkBO,MAAM,kBAAA,GAAqB,aAAA;AAAA,EAChC,oBAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,QAAQ,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAE5D,IAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,MACpB,MAAA,CAAO,kBAAA;AAAA,MACP,KAAA,KAAU,SAAA,IAAa,MAAA,CAAO,KAAK,CAAA;AAAA,MACnC;AAAA,KACF;AAEA,IAAA,MAAM,UAAA,GAAa,YAAA,CAAa,KAAK,CAAA,GAAI,KAAA,GAAQ,MAAA;AAEjD,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,IAAA,EAAM;AAAA,QACJ,WAAW,MAAA,CAAO,IAAA;AAAA,QAClB,IAAA,EAAM;AAAA,OACR;AAAA,MACA,OAAA,EAAS;AAAA,QACP,WAAW,MAAA,CAAO,OAAA;AAAA,QAClB;AAAA,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,WAAW,MAAA,CAAO,IAAA;AAAA,QAClB,KAAA,EAAO;AAAA,OACT;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,KAAA,EAAO;AAAA,OACT;AAAA,MACA,WAAA,EAAa;AAAA,QACX,aAAA,EAAe,IAAA;AAAA,QACf,WAAW,MAAA,CAAO;AAAA,OACpB;AAAA,MACA,WAAA,EAAa,EAAE,SAAA,EAAW,MAAA,CAAO,WAAA;AAAY,KAC/C;AAEA,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,SAAA,EAAW,aAAA,EACxB,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,CAAA,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}

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

@@ -9,8 +9,8 @@ const InlineCode = (props) => {
   const { children, className, color = "default", ...rest } = props;
   const rootClassName = clsx(
     styles.inlineCode,
-    className,
-    isAlphaColor(color) && styles[color]
+    isAlphaColor(color) && styles[color],
+    className
   );
   return /* @__PURE__ */ jsx("code", { ...rest, className: rootClassName, children });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"InlineCode.mjs","sources":["../../../../../../../src/components/InlineCode/InlineCode.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./InlineCode.module.scss\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\n\nexport interface InlineCodeProps extends PropsWithChildren<\n  ComponentProps<\"code\">\n> {\n  /** The color schema of the inline code component. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const InlineCode: FC<InlineCodeProps> = (props) => {\n  const { children, className, color = \"default\", ...rest } = props;\n\n  const rootClassName = clsx(\n    styles.inlineCode,\n    className,\n    isAlphaColor(color) && styles[color],\n  );\n\n  return (\n    <code {...rest} className={rootClassName}>\n      {children}\n    </code>\n  );\n};\n\nexport default InlineCode;\n"],"names":[],"mappings":";;;;;AAaO,MAAM,UAAA,GAAkC,CAAC,KAAA,KAAU;AACxD,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,QAAQ,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAE5D,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,UAAA;AAAA,IACP,SAAA;AAAA,IACA,YAAA,CAAa,KAAK,CAAA,IAAK,MAAA,CAAO,KAAK;AAAA,GACrC;AAEA,EAAA,2BACG,MAAA,EAAA,EAAM,GAAG,IAAA,EAAM,SAAA,EAAW,eACxB,QAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"InlineCode.mjs","sources":["../../../../../../../src/components/InlineCode/InlineCode.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./InlineCode.module.scss\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\n\nexport interface InlineCodeProps extends PropsWithChildren<\n  ComponentProps<\"code\">\n> {\n  /** The color schema of the inline code component. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const InlineCode: FC<InlineCodeProps> = (props) => {\n  const { children, className, color = \"default\", ...rest } = props;\n\n  const rootClassName = clsx(\n    styles.inlineCode,\n    isAlphaColor(color) && styles[color],\n    className,\n  );\n\n  return (\n    <code {...rest} className={rootClassName}>\n      {children}\n    </code>\n  );\n};\n\nexport default InlineCode;\n"],"names":[],"mappings":";;;;;AAaO,MAAM,UAAA,GAAkC,CAAC,KAAA,KAAU;AACxD,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,QAAQ,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAE5D,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,UAAA;AAAA,IACP,YAAA,CAAa,KAAK,CAAA,IAAK,MAAA,CAAO,KAAK,CAAA;AAAA,IACnC;AAAA,GACF;AAEA,EAAA,2BACG,MAAA,EAAA,EAAM,GAAG,IAAA,EAAM,SAAA,EAAW,eACxB,QAAA,EACH,CAAA;AAEJ;;;;"}

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

@@ -21,8 +21,8 @@ const Kbd = flowComponent("Kbd", (props) => {
   const rootClassName = clsx(
     styles.kbd,
     isDisabled && styles.disabled,
-    className,
-    styles[variant]
+    styles[variant],
+    className
   );
   const stringFormatter = useLocalizedStringFormatter(locales, "Kbd");
   const joinedKeys = keys?.map((key, index) => {

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

@@ -1 +1 @@
-{"version":3,"file":"Kbd.mjs","sources":["../../../../../../../src/components/Kbd/Kbd.tsx"],"sourcesContent":["import { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./Kbd.module.scss\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { Fragment, type PropsWithChildren } from \"react\";\nimport { isAppleDevice } from \"@react-aria/utils\";\n\nexport interface KbdProps\n  extends PropsWithClassName, FlowComponentProps, PropsWithChildren {\n  /** Array of keys to be joined */\n  keys?: (string | \"mod\" | \"alt\" | \"shift\")[];\n  /** Whether the component is displayed as disabled */\n  isDisabled?: boolean;\n  /** The visual variant @default \"plain\" */\n  variant?: \"plain\" | \"soft\";\n}\n\n/** @flr-generate all */\nexport const Kbd = flowComponent(\"Kbd\", (props) => {\n  const {\n    keys,\n    className,\n    isDisabled,\n    children,\n    variant = \"plain\",\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.kbd,\n    isDisabled && styles.disabled,\n    className,\n    styles[variant],\n  );\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Kbd\");\n\n  const joinedKeys = keys?.map((key, index) => {\n    let formattedKey = key;\n\n    if (key === \"mod\") {\n      formattedKey = isAppleDevice() ? \"⌘\" : stringFormatter.format(\"mod\");\n    }\n\n    if (key === \"alt\") {\n      formattedKey = isAppleDevice() ? \"⌥\" : stringFormatter.format(\"alt\");\n    }\n\n    if (key === \"shift\") {\n      formattedKey = \"⇧\";\n    }\n\n    if (keys?.length === 1) {\n      return <Fragment key={index}>{formattedKey}</Fragment>;\n    }\n\n    return (\n      <Fragment key={index}>\n        <kbd className={styles.kbd}>{formattedKey}</kbd>\n        {index < keys.length - 1 && \" + \"}\n      </Fragment>\n    );\n  });\n\n  return (\n    <kbd className={rootClassName} {...rest}>\n      {joinedKeys ?? children}\n    </kbd>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;AAuBO,MAAM,GAAA,GAAM,aAAA,CAAc,KAAA,EAAO,CAAC,KAAA,KAAU;AACjD,EAAA,MAAM;AAAA,IACJ,IAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA,GAAU,OAAA;AAAA,IACV,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,GAAA;AAAA,IACP,cAAc,MAAA,CAAO,QAAA;AAAA,IACrB,SAAA;AAAA,IACA,OAAO,OAAO;AAAA,GAChB;AAEA,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,KAAK,CAAA;AAElE,EAAA,MAAM,UAAA,GAAa,IAAA,EAAM,GAAA,CAAI,CAAC,KAAK,KAAA,KAAU;AAC3C,IAAA,IAAI,YAAA,GAAe,GAAA;AAEnB,IAAA,IAAI,QAAQ,KAAA,EAAO;AACjB,MAAA,YAAA,GAAe,aAAA,EAAc,GAAI,GAAA,GAAM,eAAA,CAAgB,OAAO,KAAK,CAAA;AAAA,IACrE;AAEA,IAAA,IAAI,QAAQ,KAAA,EAAO;AACjB,MAAA,YAAA,GAAe,aAAA,EAAc,GAAI,GAAA,GAAM,eAAA,CAAgB,OAAO,KAAK,CAAA;AAAA,IACrE;AAEA,IAAA,IAAI,QAAQ,OAAA,EAAS;AACnB,MAAA,YAAA,GAAe,GAAA;AAAA,IACjB;AAEA,IAAA,IAAI,IAAA,EAAM,WAAW,CAAA,EAAG;AACtB,MAAA,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAsB,QAAA,EAAA,YAAA,EAAA,EAAR,KAAqB,CAAA;AAAA,IAC7C;AAEA,IAAA,4BACG,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,GAAA,EAAM,QAAA,EAAA,YAAA,EAAa,CAAA;AAAA,MACzC,KAAA,GAAQ,IAAA,CAAK,MAAA,GAAS,CAAA,IAAK;AAAA,KAAA,EAAA,EAFf,KAGf,CAAA;AAAA,EAEJ,CAAC,CAAA;AAED,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,eAAgB,GAAG,IAAA,EAChC,wBAAc,QAAA,EACjB,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Kbd.mjs","sources":["../../../../../../../src/components/Kbd/Kbd.tsx"],"sourcesContent":["import { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./Kbd.module.scss\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { Fragment, type PropsWithChildren } from \"react\";\nimport { isAppleDevice } from \"@react-aria/utils\";\n\nexport interface KbdProps\n  extends PropsWithClassName, FlowComponentProps, PropsWithChildren {\n  /** Array of keys to be joined */\n  keys?: (string | \"mod\" | \"alt\" | \"shift\")[];\n  /** Whether the component is displayed as disabled */\n  isDisabled?: boolean;\n  /** The visual variant @default \"plain\" */\n  variant?: \"plain\" | \"soft\";\n}\n\n/** @flr-generate all */\nexport const Kbd = flowComponent(\"Kbd\", (props) => {\n  const {\n    keys,\n    className,\n    isDisabled,\n    children,\n    variant = \"plain\",\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.kbd,\n    isDisabled && styles.disabled,\n    styles[variant],\n    className,\n  );\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Kbd\");\n\n  const joinedKeys = keys?.map((key, index) => {\n    let formattedKey = key;\n\n    if (key === \"mod\") {\n      formattedKey = isAppleDevice() ? \"⌘\" : stringFormatter.format(\"mod\");\n    }\n\n    if (key === \"alt\") {\n      formattedKey = isAppleDevice() ? \"⌥\" : stringFormatter.format(\"alt\");\n    }\n\n    if (key === \"shift\") {\n      formattedKey = \"⇧\";\n    }\n\n    if (keys?.length === 1) {\n      return <Fragment key={index}>{formattedKey}</Fragment>;\n    }\n\n    return (\n      <Fragment key={index}>\n        <kbd className={styles.kbd}>{formattedKey}</kbd>\n        {index < keys.length - 1 && \" + \"}\n      </Fragment>\n    );\n  });\n\n  return (\n    <kbd className={rootClassName} {...rest}>\n      {joinedKeys ?? children}\n    </kbd>\n  );\n});\n\nexport default Kbd;\n"],"names":[],"mappings":";;;;;;;;;AAuBO,MAAM,GAAA,GAAM,aAAA,CAAc,KAAA,EAAO,CAAC,KAAA,KAAU;AACjD,EAAA,MAAM;AAAA,IACJ,IAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA,GAAU,OAAA;AAAA,IACV,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,GAAA;AAAA,IACP,cAAc,MAAA,CAAO,QAAA;AAAA,IACrB,OAAO,OAAO,CAAA;AAAA,IACd;AAAA,GACF;AAEA,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,KAAK,CAAA;AAElE,EAAA,MAAM,UAAA,GAAa,IAAA,EAAM,GAAA,CAAI,CAAC,KAAK,KAAA,KAAU;AAC3C,IAAA,IAAI,YAAA,GAAe,GAAA;AAEnB,IAAA,IAAI,QAAQ,KAAA,EAAO;AACjB,MAAA,YAAA,GAAe,aAAA,EAAc,GAAI,GAAA,GAAM,eAAA,CAAgB,OAAO,KAAK,CAAA;AAAA,IACrE;AAEA,IAAA,IAAI,QAAQ,KAAA,EAAO;AACjB,MAAA,YAAA,GAAe,aAAA,EAAc,GAAI,GAAA,GAAM,eAAA,CAAgB,OAAO,KAAK,CAAA;AAAA,IACrE;AAEA,IAAA,IAAI,QAAQ,OAAA,EAAS;AACnB,MAAA,YAAA,GAAe,GAAA;AAAA,IACjB;AAEA,IAAA,IAAI,IAAA,EAAM,WAAW,CAAA,EAAG;AACtB,MAAA,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAsB,QAAA,EAAA,YAAA,EAAA,EAAR,KAAqB,CAAA;AAAA,IAC7C;AAEA,IAAA,4BACG,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,GAAA,EAAM,QAAA,EAAA,YAAA,EAAa,CAAA;AAAA,MACzC,KAAA,GAAQ,IAAA,CAAK,MAAA,GAAS,CAAA,IAAK;AAAA,KAAA,EAAA,EAFf,KAGf,CAAA;AAAA,EAEJ,CAAC,CAAA;AAED,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,eAAgB,GAAG,IAAA,EAChC,wBAAc,QAAA,EACjB,CAAA;AAEJ,CAAC;;;;"}

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

@@ -40,6 +40,8 @@ const LightBox = flowComponent("LightBox", (props) => {
   );
   const propsContext = {
     ActionGroup: {
+      preserveOrder: true,
+      spacing: "m",
       className: styles.actionGroup,
       Button: { variant: "solid", color: "light-static" },
       tunnel: {

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

@@ -1 +1 @@
-{"version":3,"file":"LightBox.mjs","sources":["../../../../../../../src/components/LightBox/LightBox.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { Overlay } from \"@/components/Overlay/Overlay\";\nimport clsx from \"clsx\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport styles from \"./LightBox.module.scss\";\nimport DivView from \"@/views/DivView\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\n\nexport interface LightBoxProps\n  extends PropsWithChildren, FlowComponentProps, PropsWithClassName {\n  /** An overlay controller to control the light box state. */\n  controller?: OverlayController;\n  /**\n   * Whether content can be displayed larger than the available space in the\n   * screen. @default true\n   */\n  fitScreen?: boolean;\n}\n\nexport const LightBox = flowComponent(\"LightBox\", (props) => {\n  const {\n    controller: controllerFromProps,\n    children,\n    ref: ignoredRef,\n    className,\n    fitScreen = true,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.lightBox,\n    fitScreen && styles.fitScreen,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    ActionGroup: {\n      className: styles.actionGroup,\n      Button: { variant: \"solid\", color: \"light-static\" },\n      tunnel: {\n        id: \"actionGroup\",\n        component: \"LightBox\",\n      },\n    },\n    LightBoxGallery: {\n      className: styles.gallery,\n    },\n  };\n\n  const controllerFromContext = useOverlayController(\"LightBox\", {\n    reuseControllerFromContext: true,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"LightBox\");\n\n  return (\n    <Overlay\n      overlayType=\"LightBox\"\n      className={rootClassName}\n      controller={controller}\n      {...rest}\n    >\n      <PropsContextProvider props={propsContext}>\n        <DivView className={styles.content}>{children}</DivView>\n        <DivView className={styles.actions}>\n          <ButtonView\n            color=\"light-static\"\n            variant=\"solid\"\n            onPress={() => controller.close()}\n            aria-label={stringFormatter.format(\"close\")}\n          >\n            <IconClose />\n          </ButtonView>\n          <UiComponentTunnelExit id=\"actionGroup\" component=\"LightBox\" />\n        </DivView>\n      </PropsContextProvider>\n    </Overlay>\n  );\n});\n\nexport default LightBox;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA+BO,MAAM,QAAA,GAAW,aAAA,CAAc,UAAA,EAAY,CAAC,KAAA,KAAU;AAC3D,EAAA,MAAM;AAAA,IACJ,UAAA,EAAY,mBAAA;AAAA,IACZ,QAAA;AAAA,IACA,GAAA,EAAK,UAAA;AAAA,IACL,SAAA;AAAA,IACA,SAAA,GAAY,IAAA;AAAA,IACZ,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,QAAA;AAAA,IACP,aAAa,MAAA,CAAO,SAAA;AAAA,IACpB;AAAA,GACF;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,WAAA,EAAa;AAAA,MACX,WAAW,MAAA,CAAO,WAAA;AAAA,MAClB,MAAA,EAAQ,EAAE,OAAA,EAAS,OAAA,EAAS,OAAO,cAAA,EAAe;AAAA,MAClD,MAAA,EAAQ;AAAA,QACN,EAAA,EAAI,aAAA;AAAA,QACJ,SAAA,EAAW;AAAA;AACb,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,WAAW,MAAA,CAAO;AAAA;AACpB,GACF;AAEA,EAAA,MAAM,qBAAA,GAAwB,qBAAqB,UAAA,EAAY;AAAA,IAC7D,0BAAA,EAA4B;AAAA,GAC7B,CAAA;AAED,EAAA,MAAM,aAAa,mBAAA,IAAuB,qBAAA;AAE1C,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,UAAU,CAAA;AAEvE,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAY,UAAA;AAAA,MACZ,SAAA,EAAW,aAAA;AAAA,MACX,UAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,MAAA,CAAO,OAAA,EAAU,QAAA,EAAS,CAAA;AAAA,wBAC9C,IAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,MAAA,CAAO,OAAA,EACzB,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAM,cAAA;AAAA,cACN,OAAA,EAAQ,OAAA;AAAA,cACR,OAAA,EAAS,MAAM,UAAA,CAAW,KAAA,EAAM;AAAA,cAChC,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,OAAO,CAAA;AAAA,cAE1C,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA,WACb;AAAA,0BACA,GAAA,CAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,aAAA,EAAc,WAAU,UAAA,EAAW;AAAA,SAAA,EAC/D;AAAA,OAAA,EACF;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"LightBox.mjs","sources":["../../../../../../../src/components/LightBox/LightBox.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { Overlay } from \"@/components/Overlay/Overlay\";\nimport clsx from \"clsx\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport styles from \"./LightBox.module.scss\";\nimport DivView from \"@/views/DivView\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\n\nexport interface LightBoxProps\n  extends PropsWithChildren, FlowComponentProps, PropsWithClassName {\n  /** An overlay controller to control the light box state. */\n  controller?: OverlayController;\n  /**\n   * Whether content can be displayed larger than the available space in the\n   * screen. @default true\n   */\n  fitScreen?: boolean;\n}\n\nexport const LightBox = flowComponent(\"LightBox\", (props) => {\n  const {\n    controller: controllerFromProps,\n    children,\n    ref: ignoredRef,\n    className,\n    fitScreen = true,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.lightBox,\n    fitScreen && styles.fitScreen,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    ActionGroup: {\n      preserveOrder: true,\n      spacing: \"m\",\n      className: styles.actionGroup,\n      Button: { variant: \"solid\", color: \"light-static\" },\n      tunnel: {\n        id: \"actionGroup\",\n        component: \"LightBox\",\n      },\n    },\n    LightBoxGallery: {\n      className: styles.gallery,\n    },\n  };\n\n  const controllerFromContext = useOverlayController(\"LightBox\", {\n    reuseControllerFromContext: true,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"LightBox\");\n\n  return (\n    <Overlay\n      overlayType=\"LightBox\"\n      className={rootClassName}\n      controller={controller}\n      {...rest}\n    >\n      <PropsContextProvider props={propsContext}>\n        <DivView className={styles.content}>{children}</DivView>\n        <DivView className={styles.actions}>\n          <ButtonView\n            color=\"light-static\"\n            variant=\"solid\"\n            onPress={() => controller.close()}\n            aria-label={stringFormatter.format(\"close\")}\n          >\n            <IconClose />\n          </ButtonView>\n          <UiComponentTunnelExit id=\"actionGroup\" component=\"LightBox\" />\n        </DivView>\n      </PropsContextProvider>\n    </Overlay>\n  );\n});\n\nexport default LightBox;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA+BO,MAAM,QAAA,GAAW,aAAA,CAAc,UAAA,EAAY,CAAC,KAAA,KAAU;AAC3D,EAAA,MAAM;AAAA,IACJ,UAAA,EAAY,mBAAA;AAAA,IACZ,QAAA;AAAA,IACA,GAAA,EAAK,UAAA;AAAA,IACL,SAAA;AAAA,IACA,SAAA,GAAY,IAAA;AAAA,IACZ,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,QAAA;AAAA,IACP,aAAa,MAAA,CAAO,SAAA;AAAA,IACpB;AAAA,GACF;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,WAAA,EAAa;AAAA,MACX,aAAA,EAAe,IAAA;AAAA,MACf,OAAA,EAAS,GAAA;AAAA,MACT,WAAW,MAAA,CAAO,WAAA;AAAA,MAClB,MAAA,EAAQ,EAAE,OAAA,EAAS,OAAA,EAAS,OAAO,cAAA,EAAe;AAAA,MAClD,MAAA,EAAQ;AAAA,QACN,EAAA,EAAI,aAAA;AAAA,QACJ,SAAA,EAAW;AAAA;AACb,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,WAAW,MAAA,CAAO;AAAA;AACpB,GACF;AAEA,EAAA,MAAM,qBAAA,GAAwB,qBAAqB,UAAA,EAAY;AAAA,IAC7D,0BAAA,EAA4B;AAAA,GAC7B,CAAA;AAED,EAAA,MAAM,aAAa,mBAAA,IAAuB,qBAAA;AAE1C,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,UAAU,CAAA;AAEvE,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAY,UAAA;AAAA,MACZ,SAAA,EAAW,aAAA;AAAA,MACX,UAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,MAAA,CAAO,OAAA,EAAU,QAAA,EAAS,CAAA;AAAA,wBAC9C,IAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,MAAA,CAAO,OAAA,EACzB,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAM,cAAA;AAAA,cACN,OAAA,EAAQ,OAAA;AAAA,cACR,OAAA,EAAS,MAAM,UAAA,CAAW,KAAA,EAAM;AAAA,cAChC,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,OAAO,CAAA;AAAA,cAE1C,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA,WACb;AAAA,0BACA,GAAA,CAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,aAAA,EAAc,WAAU,UAAA,EAAW;AAAA,SAAA,EAC/D;AAAA,OAAA,EACF;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

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

@@ -28,6 +28,7 @@ const LightBoxGalleryItem = flowComponent(
     const controller = useOverlayController("Modal");
     const propsContext = {
       ActionGroup: {
+        spacing: "m",
         className: styles.actionGroup,
         Button: { color: "light-static" },
         tunnel: { id: "actionGroup", component: "LightBoxGalleryItem" }

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

@@ -1 +1 @@
-{"version":3,"file":"LightBoxGalleryItem.mjs","sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGalleryItem/LightBoxGalleryItem.tsx"],"sourcesContent":["import { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"@/components/LightBox/components/LightBoxGallery/LightBoxGallery.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { useOverlayController } from \"@/lib/hooks\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport type { PropsWithChildren } from \"react\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport type LightBoxGalleryItemProps = PropsWithChildren;\n\n/** @flr-generate all */\nexport const LightBoxGalleryItem = flowComponent(\n  \"LightBoxGalleryItem\",\n  (props) => {\n    const { children } = props;\n\n    const controller = useOverlayController(\"Modal\");\n\n    const propsContext: PropsContext = {\n      ActionGroup: {\n        className: styles.actionGroup,\n        Button: { color: \"light-static\" },\n        tunnel: { id: \"actionGroup\", component: \"LightBoxGalleryItem\" },\n      },\n      Image: { className: styles.image },\n    };\n\n    const stringFormatter = useLocalizedStringFormatter(locales);\n\n    return (\n      <PropsContextProvider props={propsContext}>\n        {children}\n        <div className={styles.actions}>\n          <Button\n            aria-label={stringFormatter.format(\"close\")}\n            color=\"light-static\"\n            onPress={() => controller.close()}\n          >\n            <IconClose />\n          </Button>\n          <UiComponentTunnelExit\n            id=\"actionGroup\"\n            component=\"LightBoxGalleryItem\"\n          />\n        </div>\n      </PropsContextProvider>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,mBAAA,GAAsB,aAAA;AAAA,EACjC,qBAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM,EAAE,UAAS,GAAI,KAAA;AAErB,IAAA,MAAM,UAAA,GAAa,qBAAqB,OAAO,CAAA;AAE/C,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,WAAA,EAAa;AAAA,QACX,WAAW,MAAA,CAAO,WAAA;AAAA,QAClB,MAAA,EAAQ,EAAE,KAAA,EAAO,cAAA,EAAe;AAAA,QAChC,MAAA,EAAQ,EAAE,EAAA,EAAI,aAAA,EAAe,WAAW,qBAAA;AAAsB,OAChE;AAAA,MACA,KAAA,EAAO,EAAE,SAAA,EAAW,MAAA,CAAO,KAAA;AAAM,KACnC;AAEA,IAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,IAAA,uBACE,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACD,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,OAAO,CAAA;AAAA,YAC1C,KAAA,EAAM,cAAA;AAAA,YACN,OAAA,EAAS,MAAM,UAAA,CAAW,KAAA,EAAM;AAAA,YAEhC,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA,SACb;AAAA,wBACA,GAAA;AAAA,UAAC,qBAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAG,aAAA;AAAA,YACH,SAAA,EAAU;AAAA;AAAA;AACZ,OAAA,EACF;AAAA,KAAA,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"LightBoxGalleryItem.mjs","sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGalleryItem/LightBoxGalleryItem.tsx"],"sourcesContent":["import { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"@/components/LightBox/components/LightBoxGallery/LightBoxGallery.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { useOverlayController } from \"@/lib/hooks\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport type { PropsWithChildren } from \"react\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport type LightBoxGalleryItemProps = PropsWithChildren;\n\n/** @flr-generate all */\nexport const LightBoxGalleryItem = flowComponent(\n  \"LightBoxGalleryItem\",\n  (props) => {\n    const { children } = props;\n\n    const controller = useOverlayController(\"Modal\");\n\n    const propsContext: PropsContext = {\n      ActionGroup: {\n        spacing: \"m\",\n        className: styles.actionGroup,\n        Button: { color: \"light-static\" },\n        tunnel: { id: \"actionGroup\", component: \"LightBoxGalleryItem\" },\n      },\n      Image: { className: styles.image },\n    };\n\n    const stringFormatter = useLocalizedStringFormatter(locales);\n\n    return (\n      <PropsContextProvider props={propsContext}>\n        {children}\n        <div className={styles.actions}>\n          <Button\n            aria-label={stringFormatter.format(\"close\")}\n            color=\"light-static\"\n            onPress={() => controller.close()}\n          >\n            <IconClose />\n          </Button>\n          <UiComponentTunnelExit\n            id=\"actionGroup\"\n            component=\"LightBoxGalleryItem\"\n          />\n        </div>\n      </PropsContextProvider>\n    );\n  },\n);\n\nexport default LightBoxGalleryItem;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,mBAAA,GAAsB,aAAA;AAAA,EACjC,qBAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM,EAAE,UAAS,GAAI,KAAA;AAErB,IAAA,MAAM,UAAA,GAAa,qBAAqB,OAAO,CAAA;AAE/C,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,WAAA,EAAa;AAAA,QACX,OAAA,EAAS,GAAA;AAAA,QACT,WAAW,MAAA,CAAO,WAAA;AAAA,QAClB,MAAA,EAAQ,EAAE,KAAA,EAAO,cAAA,EAAe;AAAA,QAChC,MAAA,EAAQ,EAAE,EAAA,EAAI,aAAA,EAAe,WAAW,qBAAA;AAAsB,OAChE;AAAA,MACA,KAAA,EAAO,EAAE,SAAA,EAAW,MAAA,CAAO,KAAA;AAAM,KACnC;AAEA,IAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,IAAA,uBACE,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACD,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,OAAO,CAAA;AAAA,YAC1C,KAAA,EAAM,cAAA;AAAA,YACN,OAAA,EAAS,MAAM,UAAA,CAAW,KAAA,EAAM;AAAA,YAEhC,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA,SACb;AAAA,wBACA,GAAA;AAAA,UAAC,qBAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAG,aAAA;AAAA,YACH,SAAA,EAAU;AAAA;AAAA;AACZ,OAAA,EACF;AAAA,KAAA,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"LinkIcon.mjs","sources":["../../../../../../../../../src/components/Link/components/LinkIcon/LinkIcon.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport {\n  IconDownload,\n  IconExternalLink,\n} from \"@/components/Icon/components/icons\";\nimport type { LinkProps } from \"@/components/Link\";\nimport locales from \"../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport styles from \"../../Link.module.scss\";\n\nexport const LinkIcon: FC<LinkProps> = (props) => {\n  const { unstyled, target, download } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Link\");\n\n  if (unstyled) {\n    return null;\n  }\n\n  if (download) {\n    return (\n      <IconDownload\n        className={styles.linkIcon}\n        aria-label={stringFormatter.format(\"download\")}\n      />\n    );\n  }\n\n  if (target === \"_blank\") {\n    return (\n      <IconExternalLink\n        className={styles.linkIcon}\n        aria-label={stringFormatter.format(\"external\")}\n      />\n    );\n  }\n\n  return null;\n};\n\nexport default LinkIcon;\n"],"names":[],"mappings":";;;;;;;;;;;;AAWO,MAAM,QAAA,GAA0B,CAAC,KAAA,KAAU;AAChD,EAAA,MAAM,EAAE,QAAA,EAAU,MAAA,EAAQ,QAAA,EAAS,GAAI,KAAA;AAEvC,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AAEnE,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,uBACE,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAA,CAAO,QAAA;AAAA,QAClB,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,UAAU;AAAA;AAAA,KAC/C;AAAA,EAEJ;AAEA,EAAA,IAAI,WAAW,QAAA,EAAU;AACvB,IAAA,uBACE,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAA,CAAO,QAAA;AAAA,QAClB,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,UAAU;AAAA;AAAA,KAC/C;AAAA,EAEJ;AAEA,EAAA,OAAO,IAAA;AACT;;;;"}
+{"version":3,"file":"LinkIcon.mjs","sources":["../../../../../../../../../src/components/Link/components/LinkIcon/LinkIcon.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport {\n  IconDownload,\n  IconExternalLink,\n} from \"@/components/Icon/components/icons\";\nimport type { LinkProps } from \"@/components/Link\";\nimport locales from \"../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport styles from \"../../Link.module.scss\";\n\nexport const LinkIcon: FC<LinkProps> = (props) => {\n  const { unstyled, target, download } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Link\");\n\n  if (unstyled) {\n    return null;\n  }\n\n  if (download) {\n    return (\n      <IconDownload\n        className={styles.linkIcon}\n        aria-label={stringFormatter.format(\"download\")}\n      />\n    );\n  }\n\n  if (target === \"_blank\") {\n    return (\n      <IconExternalLink\n        className={styles.linkIcon}\n        aria-label={stringFormatter.format(\"external\")}\n      />\n    );\n  }\n\n  return null;\n};\n\nexport default LinkIcon;\n"],"names":[],"mappings":";;;;;;;;;;;;AAUO,MAAM,QAAA,GAA0B,CAAC,KAAA,KAAU;AAChD,EAAA,MAAM,EAAE,QAAA,EAAU,MAAA,EAAQ,QAAA,EAAS,GAAI,KAAA;AAEvC,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AAEnE,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,uBACE,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAA,CAAO,QAAA;AAAA,QAClB,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,UAAU;AAAA;AAAA,KAC/C;AAAA,EAEJ;AAEA,EAAA,IAAI,WAAW,QAAA,EAAU;AACvB,IAAA,uBACE,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAA,CAAO,QAAA;AAAA,QAClB,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,UAAU;AAAA;AAAA,KAC/C;AAAA,EAEJ;AAEA,EAAA,OAAO,IAAA;AACT;;;;"}

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

@@ -129,6 +129,7 @@ const List = flowComponent("List", (props) => {
   });
   const propsContext = {
     ActionGroup: {
+      preserveOrder: true,
       tunnel: {
         id: "actions",
         component: "List"

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

@@ -1 +1 @@
-{"version":3,"file":"List.mjs","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.css\";\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.css\";\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  hidePagination?: boolean;\n  emptySearchResultView?: ReactNode;\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      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"],"names":["TableSetupComponent","ListModel"],"mappings":"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"}
+{"version":3,"file":"List.mjs","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.css\";\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.css\";\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  hidePagination?: boolean;\n  emptySearchResultView?: ReactNode;\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"],"names":["TableSetupComponent","ListModel"],"mappings":"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"}

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

@@ -1,16 +1,31 @@
 "use client"
 /* */
 import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react';
 import styles from './Footer.module.scss.mjs';
 import { PaginationInfos } from './components/PaginationInfos/PaginationInfos.mjs';
 import { ShowNextBatchButton } from './components/ShowNextBatchButton/ShowNextBatchButton.mjs';
+import { useList } from '../../hooks/useList.mjs';
+import { useLocalizedStringFormatter } from '../../../TranslationProvider/useLocalizedStringFormatter.mjs';
 import DivView from '../../../../views/DivView.mjs';
+import LoadingSpinnerView from '../../../../views/LoadingSpinnerView.mjs';
+import locales from '../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
 
 const Footer = () => {
+  const stringFormatter = useLocalizedStringFormatter(locales, "List");
+  const list = useList();
+  const infiniteScroll = list.infiniteScroll;
+  const isLoading = list.loader.useIsLoading();
+  const isInitiallyLoading = list.loader.useIsInitiallyLoading();
+  const showLoadMoreSpinner = infiniteScroll && isLoading && !isInitiallyLoading;
   return /* @__PURE__ */ jsxs(DivView, { className: styles.footer, children: [
     /* @__PURE__ */ jsx(PaginationInfos, {}),
-    /* @__PURE__ */ jsx(ShowNextBatchButton, {})
+    !infiniteScroll && /* @__PURE__ */ jsx(ShowNextBatchButton, {}),
+    showLoadMoreSpinner && /* @__PURE__ */ jsx(
+      LoadingSpinnerView,
+      {
+        "aria-label": stringFormatter.format("loadingMore")
+      }
+    )
   ] });
 };