@mittwald/flow-react-components 0.2.0-alpha.786 → 0.2.0-alpha.789

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

@@ -1 +1 @@
-{"version":3,"file":"FilterAccordionDateRange.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/FilterAccordionDateRange.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { Flex } from \"@/components/Flex\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport RangeCalendarView from \"@/views/RangeCalendarView\";\nimport type { AnyDateRangeFilter } from \"@/components/List/model/filter/types\";\n\ninterface Props {\n  filter: AnyDateRangeFilter;\n}\n\nexport const FilterAccordionDateRange: FC<Props> = (props) => {\n  const { filter } = props;\n\n  const currentValue = filter.getValue();\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  return (\n    <Flex direction=\"column\" gap=\"m\">\n      <RangeCalendarView\n        {...filter.dateRangeOptions}\n        value={currentValue}\n        onChange={(range) => {\n          filter.setValue(range);\n        }}\n      />\n      {currentValue && (\n        <ButtonView\n          size=\"s\"\n          color=\"secondary\"\n          variant=\"soft\"\n          onPress={() => filter.clear()}\n        >\n          {stringFormatter.format(\"list.filters.clearSelection\")}\n        </ButtonView>\n      )}\n    </Flex>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAYO,MAAM,wBAAA,GAAsC,CAAC,KAAA,KAAU;AAC5D,EAAA,MAAM,EAAE,QAAO,GAAI,KAAA;AAEnB,EAAA,MAAM,YAAA,GAAe,OAAO,QAAA,EAAS;AAErC,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,QAAA,EAAS,KAAI,GAAA,EAC3B,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACE,GAAG,MAAA,CAAO,gBAAA;AAAA,QACX,KAAA,EAAO,YAAA;AAAA,QACP,QAAA,EAAU,CAAC,KAAA,KAAU;AACnB,UAAA,MAAA,CAAO,SAAS,KAAK,CAAA;AAAA,QACvB;AAAA;AAAA,KACF;AAAA,IACC,YAAA,oBACC,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,GAAA;AAAA,QACL,KAAA,EAAM,WAAA;AAAA,QACN,OAAA,EAAQ,MAAA;AAAA,QACR,OAAA,EAAS,MAAM,MAAA,CAAO,KAAA,EAAM;AAAA,QAE3B,QAAA,EAAA,eAAA,CAAgB,OAAO,6BAA6B;AAAA;AAAA;AACvD,GAAA,EAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FilterAccordionDateRange.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/FilterAccordionDateRange.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { Flex } from \"@/components/Flex\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport RangeCalendarView from \"@/views/RangeCalendarView\";\nimport type { AnyDateRangeFilter } from \"@/components/List/model/filter/types\";\n\ninterface Props {\n  filter: AnyDateRangeFilter;\n}\n\nexport const FilterAccordionDateRange: FC<Props> = (props) => {\n  const { filter } = props;\n\n  const currentValue = filter.getValue();\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  return (\n    <Flex direction=\"column\" gap=\"m\">\n      <RangeCalendarView\n        {...filter.dateRangeOptions}\n        value={currentValue}\n        onChange={(range) => {\n          filter.setValue(range);\n        }}\n      />\n      {currentValue && (\n        <ButtonView\n          size=\"s\"\n          color=\"secondary\"\n          variant=\"soft\"\n          onPress={() => filter.clear()}\n        >\n          {stringFormatter.format(\"filters.clearSelection\")}\n        </ButtonView>\n      )}\n    </Flex>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAYO,MAAM,wBAAA,GAAsC,CAAC,KAAA,KAAU;AAC5D,EAAA,MAAM,EAAE,QAAO,GAAI,KAAA;AAEnB,EAAA,MAAM,YAAA,GAAe,OAAO,QAAA,EAAS;AAErC,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AAEnE,EAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,QAAA,EAAS,KAAI,GAAA,EAC3B,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACE,GAAG,MAAA,CAAO,gBAAA;AAAA,QACX,KAAA,EAAO,YAAA;AAAA,QACP,QAAA,EAAU,CAAC,KAAA,KAAU;AACnB,UAAA,MAAA,CAAO,SAAS,KAAK,CAAA;AAAA,QACvB;AAAA;AAAA,KACF;AAAA,IACC,YAAA,oBACC,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,GAAA;AAAA,QACL,KAAA,EAAM,WAAA;AAAA,QACN,OAAA,EAAQ,MAAA;AAAA,QACR,OAAA,EAAS,MAAM,MAAA,CAAO,KAAA,EAAM;AAAA,QAE3B,QAAA,EAAA,eAAA,CAAgB,OAAO,wBAAwB;AAAA;AAAA;AAClD,GAAA,EAEJ,CAAA;AAEJ;;;;"}

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

@@ -6,14 +6,14 @@ import RadioGroupView from '../../../../../../views/RadioGroupView.mjs';
 import RadioView from '../../../../../../views/RadioView.mjs';
 import ButtonView from '../../../../../../views/ButtonView.mjs';
 import { Flex } from '../../../../../Flex/Flex.mjs';
-import { useLocalizedStringFormatter } from 'react-aria';
+import { useLocalizedStringFormatter } from '../../../../../TranslationProvider/useLocalizedStringFormatter.mjs';
 import locales from '../../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
 
 const FilterAccordionRadioGroup = (props) => {
   const { filter } = props;
   const activeKeys = filter.values.filter((v) => v.isActive).map((v) => v.id);
   const name = filter.name ?? filter.property;
-  const stringFormatter = useLocalizedStringFormatter(locales);
+  const stringFormatter = useLocalizedStringFormatter(locales, "List");
   return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "m", children: [
     /* @__PURE__ */ jsx(
       RadioGroupView,
@@ -44,7 +44,7 @@ const FilterAccordionRadioGroup = (props) => {
         color: "secondary",
         variant: "soft",
         onPress: () => filter.clear(),
-        children: stringFormatter.format("list.filters.clearSelection")
+        children: stringFormatter.format("filters.clearSelection")
       }
     )
   ] });

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

@@ -1 +1 @@
-{"version":3,"file":"FilterAccordionRadioGroup.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/FilterAccordionRadioGroup.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport RadioGroupView from \"@/views/RadioGroupView\";\nimport RadioView from \"@/views/RadioView\";\nimport type { Filter } from \"@/components/List/model/filter/Filter\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { Flex } from \"@/components/Flex\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../../../locales/*.locale.json\";\n\ninterface Props {\n  filter: Filter;\n}\n\nexport const FilterAccordionRadioGroup: FC<Props> = (props) => {\n  const { filter } = props;\n\n  const activeKeys = filter.values.filter((v) => v.isActive).map((v) => v.id);\n\n  const name = filter.name ?? filter.property;\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  return (\n    <Flex direction=\"column\" gap=\"m\">\n      <RadioGroupView\n        value={activeKeys[0]}\n        m={[1, 1]}\n        key={activeKeys[0]}\n        aria-label={name}\n      >\n        {filter.values.map((v) => (\n          <RadioView\n            key={v.id}\n            value={v.id}\n            onPress={() => {\n              if (!v.isActive) {\n                v.toggle();\n              }\n            }}\n          >\n            {v.render()}\n          </RadioView>\n        ))}\n      </RadioGroupView>\n      {activeKeys.length > 0 && (\n        <ButtonView\n          size=\"s\"\n          color=\"secondary\"\n          variant=\"soft\"\n          onPress={() => filter.clear()}\n        >\n          {stringFormatter.format(\"list.filters.clearSelection\")}\n        </ButtonView>\n      )}\n    </Flex>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAaO,MAAM,yBAAA,GAAuC,CAAC,KAAA,KAAU;AAC7D,EAAA,MAAM,EAAE,QAAO,GAAI,KAAA;AAEnB,EAAA,MAAM,UAAA,GAAa,MAAA,CAAO,MAAA,CAAO,MAAA,CAAO,CAAC,CAAA,KAAM,CAAA,CAAE,QAAQ,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,KAAM,EAAE,EAAE,CAAA;AAE1E,EAAA,MAAM,IAAA,GAAO,MAAA,CAAO,IAAA,IAAQ,MAAA,CAAO,QAAA;AAEnC,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,QAAA,EAAS,KAAI,GAAA,EAC3B,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,WAAW,CAAC,CAAA;AAAA,QACnB,CAAA,EAAG,CAAC,CAAA,EAAG,CAAC,CAAA;AAAA,QAER,YAAA,EAAY,IAAA;AAAA,QAEX,QAAA,EAAA,MAAA,CAAO,MAAA,CAAO,GAAA,CAAI,CAAC,CAAA,qBAClB,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YAEC,OAAO,CAAA,CAAE,EAAA;AAAA,YACT,SAAS,MAAM;AACb,cAAA,IAAI,CAAC,EAAE,QAAA,EAAU;AACf,gBAAA,CAAA,CAAE,MAAA,EAAO;AAAA,cACX;AAAA,YACF,CAAA;AAAA,YAEC,YAAE,MAAA;AAAO,WAAA;AAAA,UARL,CAAA,CAAE;AAAA,SAUV;AAAA,OAAA;AAAA,MAfI,WAAW,CAAC;AAAA,KAgBnB;AAAA,IACC,UAAA,CAAW,SAAS,CAAA,oBACnB,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,GAAA;AAAA,QACL,KAAA,EAAM,WAAA;AAAA,QACN,OAAA,EAAQ,MAAA;AAAA,QACR,OAAA,EAAS,MAAM,MAAA,CAAO,KAAA,EAAM;AAAA,QAE3B,QAAA,EAAA,eAAA,CAAgB,OAAO,6BAA6B;AAAA;AAAA;AACvD,GAAA,EAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FilterAccordionRadioGroup.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/FilterAccordionRadioGroup.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport RadioGroupView from \"@/views/RadioGroupView\";\nimport RadioView from \"@/views/RadioView\";\nimport type { Filter } from \"@/components/List/model/filter/Filter\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { Flex } from \"@/components/Flex\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\n\ninterface Props {\n  filter: Filter;\n}\n\nexport const FilterAccordionRadioGroup: FC<Props> = (props) => {\n  const { filter } = props;\n\n  const activeKeys = filter.values.filter((v) => v.isActive).map((v) => v.id);\n\n  const name = filter.name ?? filter.property;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  return (\n    <Flex direction=\"column\" gap=\"m\">\n      <RadioGroupView\n        value={activeKeys[0]}\n        m={[1, 1]}\n        key={activeKeys[0]}\n        aria-label={name}\n      >\n        {filter.values.map((v) => (\n          <RadioView\n            key={v.id}\n            value={v.id}\n            onPress={() => {\n              if (!v.isActive) {\n                v.toggle();\n              }\n            }}\n          >\n            {v.render()}\n          </RadioView>\n        ))}\n      </RadioGroupView>\n      {activeKeys.length > 0 && (\n        <ButtonView\n          size=\"s\"\n          color=\"secondary\"\n          variant=\"soft\"\n          onPress={() => filter.clear()}\n        >\n          {stringFormatter.format(\"filters.clearSelection\")}\n        </ButtonView>\n      )}\n    </Flex>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAaO,MAAM,yBAAA,GAAuC,CAAC,KAAA,KAAU;AAC7D,EAAA,MAAM,EAAE,QAAO,GAAI,KAAA;AAEnB,EAAA,MAAM,UAAA,GAAa,MAAA,CAAO,MAAA,CAAO,MAAA,CAAO,CAAC,CAAA,KAAM,CAAA,CAAE,QAAQ,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,KAAM,EAAE,EAAE,CAAA;AAE1E,EAAA,MAAM,IAAA,GAAO,MAAA,CAAO,IAAA,IAAQ,MAAA,CAAO,QAAA;AAEnC,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AAEnE,EAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,QAAA,EAAS,KAAI,GAAA,EAC3B,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,WAAW,CAAC,CAAA;AAAA,QACnB,CAAA,EAAG,CAAC,CAAA,EAAG,CAAC,CAAA;AAAA,QAER,YAAA,EAAY,IAAA;AAAA,QAEX,QAAA,EAAA,MAAA,CAAO,MAAA,CAAO,GAAA,CAAI,CAAC,CAAA,qBAClB,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YAEC,OAAO,CAAA,CAAE,EAAA;AAAA,YACT,SAAS,MAAM;AACb,cAAA,IAAI,CAAC,EAAE,QAAA,EAAU;AACf,gBAAA,CAAA,CAAE,MAAA,EAAO;AAAA,cACX;AAAA,YACF,CAAA;AAAA,YAEC,YAAE,MAAA;AAAO,WAAA;AAAA,UARL,CAAA,CAAE;AAAA,SAUV;AAAA,OAAA;AAAA,MAfI,WAAW,CAAC;AAAA,KAgBnB;AAAA,IACC,UAAA,CAAW,SAAS,CAAA,oBACnB,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,GAAA;AAAA,QACL,KAAA,EAAM,WAAA;AAAA,QACN,OAAA,EAAQ,MAAA;AAAA,QACR,OAAA,EAAS,MAAM,MAAA,CAAO,KAAA,EAAM;AAAA,QAE3B,QAAA,EAAA,eAAA,CAAgB,OAAO,wBAAwB;AAAA;AAAA;AAClD,GAAA,EAEJ,CAAA;AAEJ;;;;"}

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

@@ -4,7 +4,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
 import AccordionView from '../../../../../../views/AccordionView.mjs';
 import HeadingView from '../../../../../../views/HeadingView.mjs';
-import { useLocalizedStringFormatter } from 'react-aria';
+import { useLocalizedStringFormatter } from '../../../../../TranslationProvider/useLocalizedStringFormatter.mjs';
 import ContentView from '../../../../../../views/ContentView.mjs';
 import RadioGroupView from '../../../../../../views/RadioGroupView.mjs';
 import RadioView from '../../../../../../views/RadioView.mjs';
@@ -34,14 +34,14 @@ import '../../../../List.mjs';
 
 const SortingAccordion = () => {
   const list = useList();
-  const stringFormatter = useLocalizedStringFormatter(locales);
+  const stringFormatter = useLocalizedStringFormatter(locales, "List");
   const sorting = list.visibleSorting;
   const activeSorting = sorting.find((s) => s.isSorted());
   if (sorting.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsxs(AccordionView, { children: [
-    /* @__PURE__ */ jsx(HeadingView, { children: stringFormatter.format("list.sorting") }),
+    /* @__PURE__ */ jsx(HeadingView, { children: stringFormatter.format("sorting") }),
     /* @__PURE__ */ jsx(ContentView, { children: /* @__PURE__ */ jsx(RadioGroupView, { value: activeSorting?.id, m: [1, 1], children: sorting.map((s) => /* @__PURE__ */ jsx(
       RadioView,
       {

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

@@ -1 +1 @@
-{"version":3,"file":"SortingAccordion.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/SortingAccordion.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport AccordionView from \"@/views/AccordionView\";\nimport HeadingView from \"@/views/HeadingView\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport ContentView from \"@/views/ContentView\";\nimport RadioGroupView from \"@/views/RadioGroupView\";\nimport RadioView from \"@/views/RadioView\";\nimport { useList } from \"@/components/List\";\nimport locales from \"../../../../locales/*.locale.json\";\n\nexport const SortingAccordion: FC = () => {\n  const list = useList();\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const sorting = list.visibleSorting;\n  const activeSorting = sorting.find((s) => s.isSorted());\n\n  if (sorting.length === 0) {\n    return null;\n  }\n\n  return (\n    <AccordionView>\n      <HeadingView>{stringFormatter.format(\"list.sorting\")}</HeadingView>\n      <ContentView>\n        <RadioGroupView value={activeSorting?.id} m={[1, 1]}>\n          {sorting.map((s) => (\n            <RadioView\n              key={s.id}\n              value={s.id}\n              onPress={() => list.getSorting(s.id).enable()}\n            >\n              {`${s.name ?? s.property} ${s.directionName ?? \"\"}`.trim()}\n            </RadioView>\n          ))}\n        </RadioGroupView>\n      </ContentView>\n    </AccordionView>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,mBAAuB,MAAM;AACxC,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,UAAU,IAAA,CAAK,cAAA;AACrB,EAAA,MAAM,gBAAgB,OAAA,CAAQ,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,UAAU,CAAA;AAEtD,EAAA,IAAI,OAAA,CAAQ,WAAW,CAAA,EAAG;AACxB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,4BACG,aAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAAA,EAAA,EAAa,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,cAAc,CAAA,EAAE,CAAA;AAAA,oBACrD,GAAA,CAAC,WAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAO,aAAA,EAAe,EAAA,EAAI,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA,EAC/C,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,CAAA,qBACZ,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QAEC,OAAO,CAAA,CAAE,EAAA;AAAA,QACT,SAAS,MAAM,IAAA,CAAK,WAAW,CAAA,CAAE,EAAE,EAAE,MAAA,EAAO;AAAA,QAE3C,QAAA,EAAA,CAAA,EAAG,CAAA,CAAE,IAAA,IAAQ,CAAA,CAAE,QAAQ,IAAI,CAAA,CAAE,aAAA,IAAiB,EAAE,CAAA,CAAA,CAAG,IAAA;AAAK,OAAA;AAAA,MAJpD,CAAA,CAAE;AAAA,KAMV,GACH,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SortingAccordion.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/SortingAccordion.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport AccordionView from \"@/views/AccordionView\";\nimport HeadingView from \"@/views/HeadingView\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport ContentView from \"@/views/ContentView\";\nimport RadioGroupView from \"@/views/RadioGroupView\";\nimport RadioView from \"@/views/RadioView\";\nimport { useList } from \"@/components/List\";\nimport locales from \"../../../../locales/*.locale.json\";\n\nexport const SortingAccordion: FC = () => {\n  const list = useList();\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  const sorting = list.visibleSorting;\n  const activeSorting = sorting.find((s) => s.isSorted());\n\n  if (sorting.length === 0) {\n    return null;\n  }\n\n  return (\n    <AccordionView>\n      <HeadingView>{stringFormatter.format(\"sorting\")}</HeadingView>\n      <ContentView>\n        <RadioGroupView value={activeSorting?.id} m={[1, 1]}>\n          {sorting.map((s) => (\n            <RadioView\n              key={s.id}\n              value={s.id}\n              onPress={() => list.getSorting(s.id).enable()}\n            >\n              {`${s.name ?? s.property} ${s.directionName ?? \"\"}`.trim()}\n            </RadioView>\n          ))}\n        </RadioGroupView>\n      </ContentView>\n    </AccordionView>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,mBAAuB,MAAM;AACxC,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AAEnE,EAAA,MAAM,UAAU,IAAA,CAAK,cAAA;AACrB,EAAA,MAAM,gBAAgB,OAAA,CAAQ,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,UAAU,CAAA;AAEtD,EAAA,IAAI,OAAA,CAAQ,WAAW,CAAA,EAAG;AACxB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,4BACG,aAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAAA,EAAA,EAAa,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,SAAS,CAAA,EAAE,CAAA;AAAA,oBAChD,GAAA,CAAC,WAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAO,aAAA,EAAe,EAAA,EAAI,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA,EAC/C,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,CAAA,qBACZ,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QAEC,OAAO,CAAA,CAAE,EAAA;AAAA,QACT,SAAS,MAAM,IAAA,CAAK,WAAW,CAAA,CAAE,EAAE,EAAE,MAAA,EAAO;AAAA,QAE3C,QAAA,EAAA,CAAA,EAAG,CAAA,CAAE,IAAA,IAAQ,CAAA,CAAE,QAAQ,IAAI,CAAA,CAAE,aAAA,IAAiB,EAAE,CAAA,CAAA,CAAG,IAAA;AAAK,OAAA;AAAA,MAJpD,CAAA,CAAE;AAAA,KAMV,GACH,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -18,7 +18,7 @@ import '../../../../../../views/IconView.mjs';
 import '../../../../../Heading/Heading.mjs';
 import '../../../../../Text/Text.mjs';
 import locales from '../../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
-import { useLocalizedStringFormatter } from 'react-aria';
+import { useLocalizedStringFormatter } from '../../../../../TranslationProvider/useLocalizedStringFormatter.mjs';
 import 'clsx';
 import '@mittwald/react-tunnel';
 import '../../../../../../views/ListItemViewContentView.mjs';
@@ -35,12 +35,12 @@ import '../../../../List.mjs';
 
 const ViewModeAccordion = () => {
   const list = useList();
-  const stringFormatter = useLocalizedStringFormatter(locales);
+  const stringFormatter = useLocalizedStringFormatter(locales, "List");
   const availableViewModes = useAvailableViewModes();
   const selectedViewMode = list.viewMode.value;
   return /* @__PURE__ */ jsxs(AccordionView, { children: [
-    /* @__PURE__ */ jsx(HeadingView, { children: stringFormatter.format("list.settings.viewMode") }),
-    /* @__PURE__ */ jsx(ContentView, { children: /* @__PURE__ */ jsx(RadioGroupView, { value: selectedViewMode, m: [1, 1], children: availableViewModes.map((v) => /* @__PURE__ */ jsx(RadioView, { value: v, onPress: () => list.viewMode.set(v), children: stringFormatter.format(`list.settings.viewMode.${v}`) }, v)) }) })
+    /* @__PURE__ */ jsx(HeadingView, { children: stringFormatter.format("settings.viewMode") }),
+    /* @__PURE__ */ jsx(ContentView, { children: /* @__PURE__ */ jsx(RadioGroupView, { value: selectedViewMode, m: [1, 1], children: availableViewModes.map((v) => /* @__PURE__ */ jsx(RadioView, { value: v, onPress: () => list.viewMode.set(v), children: stringFormatter.format(`settings.viewMode.${v}`) }, v)) }) })
   ] });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"ViewModeAccordion.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/ViewModeAccordion.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport AccordionView from \"@/views/AccordionView\";\nimport HeadingView from \"@/views/HeadingView\";\nimport ContentView from \"@/views/ContentView\";\nimport RadioGroupView from \"@/views/RadioGroupView\";\nimport RadioView from \"@/views/RadioView\";\nimport { useAvailableViewModes } from \"@/components/List/components/Header/lib\";\nimport { useList } from \"@/components/List\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../../../locales/*.locale.json\";\n\nexport const ViewModeAccordion: FC = () => {\n  const list = useList();\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const availableViewModes = useAvailableViewModes();\n  const selectedViewMode = list.viewMode.value;\n\n  return (\n    <AccordionView>\n      <HeadingView>\n        {stringFormatter.format(\"list.settings.viewMode\")}\n      </HeadingView>\n      <ContentView>\n        <RadioGroupView value={selectedViewMode} m={[1, 1]}>\n          {availableViewModes.map((v) => (\n            <RadioView key={v} value={v} onPress={() => list.viewMode.set(v)}>\n              {stringFormatter.format(`list.settings.viewMode.${v}`)}\n            </RadioView>\n          ))}\n        </RadioGroupView>\n      </ContentView>\n    </AccordionView>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,oBAAwB,MAAM;AACzC,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,qBAAqB,qBAAA,EAAsB;AACjD,EAAA,MAAM,gBAAA,GAAmB,KAAK,QAAA,CAAS,KAAA;AAEvC,EAAA,4BACG,aAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAAA,EAAA,EACE,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,wBAAwB,CAAA,EAClD,CAAA;AAAA,oBACA,GAAA,CAAC,WAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAO,gBAAA,EAAkB,CAAA,EAAG,CAAC,CAAA,EAAG,CAAC,CAAA,EAC9C,QAAA,EAAA,kBAAA,CAAmB,GAAA,CAAI,CAAC,sBACvB,GAAA,CAAC,SAAA,EAAA,EAAkB,KAAA,EAAO,CAAA,EAAG,SAAS,MAAM,IAAA,CAAK,QAAA,CAAS,GAAA,CAAI,CAAC,CAAA,EAC5D,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,CAAA,uBAAA,EAA0B,CAAC,CAAA,CAAE,CAAA,EAAA,EADvC,CAEhB,CACD,GACH,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ViewModeAccordion.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/ViewModeAccordion.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport AccordionView from \"@/views/AccordionView\";\nimport HeadingView from \"@/views/HeadingView\";\nimport ContentView from \"@/views/ContentView\";\nimport RadioGroupView from \"@/views/RadioGroupView\";\nimport RadioView from \"@/views/RadioView\";\nimport { useAvailableViewModes } from \"@/components/List/components/Header/lib\";\nimport { useList } from \"@/components/List\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\n\nexport const ViewModeAccordion: FC = () => {\n  const list = useList();\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  const availableViewModes = useAvailableViewModes();\n  const selectedViewMode = list.viewMode.value;\n\n  return (\n    <AccordionView>\n      <HeadingView>{stringFormatter.format(\"settings.viewMode\")}</HeadingView>\n      <ContentView>\n        <RadioGroupView value={selectedViewMode} m={[1, 1]}>\n          {availableViewModes.map((v) => (\n            <RadioView key={v} value={v} onPress={() => list.viewMode.set(v)}>\n              {stringFormatter.format(`settings.viewMode.${v}`)}\n            </RadioView>\n          ))}\n        </RadioGroupView>\n      </ContentView>\n    </AccordionView>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,oBAAwB,MAAM;AACzC,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AAEnE,EAAA,MAAM,qBAAqB,qBAAA,EAAsB;AACjD,EAAA,MAAM,gBAAA,GAAmB,KAAK,QAAA,CAAS,KAAA;AAEvC,EAAA,4BACG,aAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAAA,EAAA,EAAa,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,mBAAmB,CAAA,EAAE,CAAA;AAAA,oBAC1D,GAAA,CAAC,WAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAO,gBAAA,EAAkB,CAAA,EAAG,CAAC,CAAA,EAAG,CAAC,CAAA,EAC9C,QAAA,EAAA,kBAAA,CAAmB,GAAA,CAAI,CAAC,sBACvB,GAAA,CAAC,SAAA,EAAA,EAAkB,KAAA,EAAO,CAAA,EAAG,SAAS,MAAM,IAAA,CAAK,QAAA,CAAS,GAAA,CAAI,CAAC,CAAA,EAC5D,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,CAAA,kBAAA,EAAqB,CAAC,CAAA,CAAE,CAAA,EAAA,EADlC,CAEhB,CACD,GACH,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -10,7 +10,7 @@ import '../../../../../Icon/components/IconSetProvider.mjs';
 import '../../../../../Icon/Icon.mjs';
 import '../../../../../../views/IconView.mjs';
 import { IconFilter } from '../../../../../Icon/components/icons/IconFilter.mjs';
-import { useLocalizedStringFormatter } from 'react-aria';
+import { useLocalizedStringFormatter } from '../../../../../TranslationProvider/useLocalizedStringFormatter.mjs';
 import locales from '../../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
 import { PopoverTrigger } from '../../../../../Popover/components/PopoverTrigger/PopoverTrigger.mjs';
 import 'react-aria-components';
@@ -27,7 +27,7 @@ import RangeCalendarView from '../../../../../../views/RangeCalendarView.mjs';
 const DateRangeFilterPopover = (props) => {
   const { filter } = props;
   const { name, property } = filter;
-  const stringFormatter = useLocalizedStringFormatter(locales);
+  const stringFormatter = useLocalizedStringFormatter(locales, "List");
   const controller = useOverlayController("Popover");
   return /* @__PURE__ */ jsxs(PopoverTrigger, { controller, children: [
     /* @__PURE__ */ jsxs(
@@ -47,7 +47,7 @@ const DateRangeFilterPopover = (props) => {
       {
         placement: "bottom end",
         isDialogContent: true,
-        "aria-label": stringFormatter.format("list.dateRange"),
+        "aria-label": stringFormatter.format("dateRange"),
         children: /* @__PURE__ */ jsx(
           RangeCalendarView,
           {

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangeFilterPopover.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/FilterContextMenu/DateRangeFilterPopover.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport ButtonView from \"@/views/ButtonView\";\nimport headerStyles from \"@/components/List/components/Header/Header.module.css\";\nimport TextView from \"@/views/TextView\";\nimport { IconFilter } from \"@/components/Icon/components/icons\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { Popover, PopoverTrigger } from \"@/components/Popover\";\nimport styles from \"./FilterContextMenus.module.scss\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport RangeCalendarView from \"@/views/RangeCalendarView\";\nimport type { AnyDateRangeFilter } from \"@/components/List/model/filter/types\";\n\ninterface Props {\n  filter: AnyDateRangeFilter;\n}\n\nexport const DateRangeFilterPopover: FC<Props> = (props) => {\n  const { filter } = props;\n\n  const { name, property } = filter;\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const controller = useOverlayController(\"Popover\");\n\n  return (\n    <PopoverTrigger controller={controller}>\n      <ButtonView\n        className={headerStyles.hideOnMobile}\n        variant=\"outline\"\n        color=\"secondary\"\n      >\n        <TextView>{name ?? property}</TextView>\n        <IconFilter />\n      </ButtonView>\n      <Popover\n        placement=\"bottom end\"\n        isDialogContent\n        aria-label={stringFormatter.format(\"list.dateRange\")}\n      >\n        <RangeCalendarView\n          {...filter.dateRangeOptions}\n          value={filter.getValue()}\n          onChange={(range) => {\n            filter.setValue(range);\n            controller.close();\n          }}\n          className={styles.calendar}\n        />\n      </Popover>\n    </PopoverTrigger>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiBO,MAAM,sBAAA,GAAoC,CAAC,KAAA,KAAU;AAC1D,EAAA,MAAM,EAAE,QAAO,GAAI,KAAA;AAEnB,EAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAS,GAAI,MAAA;AAE3B,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,UAAA,GAAa,qBAAqB,SAAS,CAAA;AAEjD,EAAA,uBACE,IAAA,CAAC,kBAAe,UAAA,EACd,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,WAAW,YAAA,CAAa,YAAA;AAAA,QACxB,OAAA,EAAQ,SAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QAEN,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAU,kBAAQ,QAAA,EAAS,CAAA;AAAA,8BAC3B,UAAA,EAAA,EAAW;AAAA;AAAA;AAAA,KACd;AAAA,oBACA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,YAAA;AAAA,QACV,eAAA,EAAe,IAAA;AAAA,QACf,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,gBAAgB,CAAA;AAAA,QAEnD,QAAA,kBAAA,GAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YACE,GAAG,MAAA,CAAO,gBAAA;AAAA,YACX,KAAA,EAAO,OAAO,QAAA,EAAS;AAAA,YACvB,QAAA,EAAU,CAAC,KAAA,KAAU;AACnB,cAAA,MAAA,CAAO,SAAS,KAAK,CAAA;AACrB,cAAA,UAAA,CAAW,KAAA,EAAM;AAAA,YACnB,CAAA;AAAA,YACA,WAAW,MAAA,CAAO;AAAA;AAAA;AACpB;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DateRangeFilterPopover.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/FilterContextMenu/DateRangeFilterPopover.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport ButtonView from \"@/views/ButtonView\";\nimport headerStyles from \"@/components/List/components/Header/Header.module.css\";\nimport TextView from \"@/views/TextView\";\nimport { IconFilter } from \"@/components/Icon/components/icons\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { Popover, PopoverTrigger } from \"@/components/Popover\";\nimport styles from \"./FilterContextMenus.module.scss\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport RangeCalendarView from \"@/views/RangeCalendarView\";\nimport type { AnyDateRangeFilter } from \"@/components/List/model/filter/types\";\n\ninterface Props {\n  filter: AnyDateRangeFilter;\n}\n\nexport const DateRangeFilterPopover: FC<Props> = (props) => {\n  const { filter } = props;\n\n  const { name, property } = filter;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  const controller = useOverlayController(\"Popover\");\n\n  return (\n    <PopoverTrigger controller={controller}>\n      <ButtonView\n        className={headerStyles.hideOnMobile}\n        variant=\"outline\"\n        color=\"secondary\"\n      >\n        <TextView>{name ?? property}</TextView>\n        <IconFilter />\n      </ButtonView>\n      <Popover\n        placement=\"bottom end\"\n        isDialogContent\n        aria-label={stringFormatter.format(\"dateRange\")}\n      >\n        <RangeCalendarView\n          {...filter.dateRangeOptions}\n          value={filter.getValue()}\n          onChange={(range) => {\n            filter.setValue(range);\n            controller.close();\n          }}\n          className={styles.calendar}\n        />\n      </Popover>\n    </PopoverTrigger>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiBO,MAAM,sBAAA,GAAoC,CAAC,KAAA,KAAU;AAC1D,EAAA,MAAM,EAAE,QAAO,GAAI,KAAA;AAEnB,EAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAS,GAAI,MAAA;AAE3B,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AAEnE,EAAA,MAAM,UAAA,GAAa,qBAAqB,SAAS,CAAA;AAEjD,EAAA,uBACE,IAAA,CAAC,kBAAe,UAAA,EACd,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,WAAW,YAAA,CAAa,YAAA;AAAA,QACxB,OAAA,EAAQ,SAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QAEN,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAU,kBAAQ,QAAA,EAAS,CAAA;AAAA,8BAC3B,UAAA,EAAA,EAAW;AAAA;AAAA;AAAA,KACd;AAAA,oBACA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,YAAA;AAAA,QACV,eAAA,EAAe,IAAA;AAAA,QACf,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,WAAW,CAAA;AAAA,QAE9C,QAAA,kBAAA,GAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YACE,GAAG,MAAA,CAAO,gBAAA;AAAA,YACX,KAAA,EAAO,OAAO,QAAA,EAAS;AAAA,YACvB,QAAA,EAAU,CAAC,KAAA,KAAU;AACnB,cAAA,MAAA,CAAO,SAAS,KAAK,CAAA;AACrB,cAAA,UAAA,CAAW,KAAA,EAAM;AAAA,YACnB,CAAA;AAAA,YACA,WAAW,MAAA,CAAO;AAAA;AAAA;AACpB;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -11,6 +11,10 @@ import '../../../../../Icon/Icon.mjs';
 import '../../../../../../views/IconView.mjs';
 import '../../../../../Heading/Heading.mjs';
 import '../../../../../Text/Text.mjs';
+import '../../../../../TranslationProvider/TranslationProvider.mjs';
+import 'remeda';
+import 'intl-messageformat';
+import '@react-aria/i18n';
 import 'react-aria';
 import 'clsx';
 import '@mittwald/react-tunnel';

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

@@ -1 +1 @@
-{"version":3,"file":"FilterContextMenus.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/FilterContextMenu/FilterContextMenus.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { useList } from \"@/components/List\";\nimport { FilterContextMenu } from \"@/components/List/components/Header/components/FilterContextMenu/FilterContextMenu\";\nimport { DateRangeFilterPopover } from \"@/components/List/components/Header/components/FilterContextMenu/DateRangeFilterPopover\";\nimport { DateRangeFilter } from \"@/components/List/model/filter/DateRangeFilter\";\n\nexport const FilterContextMenus: FC = () => {\n  const list = useList();\n\n  return list.filters\n    .filter((f) => f.priority === \"primary\")\n    .map((filter) =>\n      filter instanceof DateRangeFilter ? (\n        <DateRangeFilterPopover key={filter.property} filter={filter} />\n      ) : (\n        <FilterContextMenu key={filter.property} filter={filter} />\n      ),\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,MAAM,qBAAyB,MAAM;AAC1C,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,OAAO,IAAA,CAAK,QACT,MAAA,CAAO,CAAC,MAAM,CAAA,CAAE,QAAA,KAAa,SAAS,CAAA,CACtC,GAAA;AAAA,IAAI,CAAC,MAAA,KACJ,MAAA,YAAkB,eAAA,uBACf,sBAAA,EAAA,EAA6C,MAAA,EAAA,EAAjB,MAAA,CAAO,QAA0B,CAAA,mBAE9D,GAAA,CAAC,iBAAA,EAAA,EAAwC,MAAA,EAAA,EAAjB,OAAO,QAA0B;AAAA,GAE7D;AACJ;;;;"}
+{"version":3,"file":"FilterContextMenus.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/FilterContextMenu/FilterContextMenus.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { useList } from \"@/components/List\";\nimport { FilterContextMenu } from \"@/components/List/components/Header/components/FilterContextMenu/FilterContextMenu\";\nimport { DateRangeFilterPopover } from \"@/components/List/components/Header/components/FilterContextMenu/DateRangeFilterPopover\";\nimport { DateRangeFilter } from \"@/components/List/model/filter/DateRangeFilter\";\n\nexport const FilterContextMenus: FC = () => {\n  const list = useList();\n\n  return list.filters\n    .filter((f) => f.priority === \"primary\")\n    .map((filter) =>\n      filter instanceof DateRangeFilter ? (\n        <DateRangeFilterPopover key={filter.property} filter={filter} />\n      ) : (\n        <FilterContextMenu key={filter.property} filter={filter} />\n      ),\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,MAAM,qBAAyB,MAAM;AAC1C,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,OAAO,IAAA,CAAK,QACT,MAAA,CAAO,CAAC,MAAM,CAAA,CAAE,QAAA,KAAa,SAAS,CAAA,CACtC,GAAA;AAAA,IAAI,CAAC,MAAA,KACJ,MAAA,YAAkB,eAAA,uBACf,sBAAA,EAAA,EAA6C,MAAA,EAAA,EAAjB,MAAA,CAAO,QAA0B,CAAA,mBAE9D,GAAA,CAAC,iBAAA,EAAA,EAAwC,MAAA,EAAA,EAAjB,OAAO,QAA0B;AAAA,GAE7D;AACJ;;;;"}

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

@@ -3,7 +3,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useList } from '../../../../hooks/useList.mjs';
 import locales from '../../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
-import { Translate } from '../../../../../../lib/react/components/Translate/Translate.mjs';
 import TextView from '../../../../../../views/TextView.mjs';
 import ButtonView from '../../../../../../views/ButtonView.mjs';
 import { IconAscending } from '../../../../../Icon/components/icons/IconAscending.mjs';
@@ -18,15 +17,18 @@ import headerStyles from '../../Header.module.css.mjs';
 import { SortingMenuItem } from './SortingMenuItem.mjs';
 import ContextMenuTriggerView from '../../../../../../views/ContextMenuTriggerView.mjs';
 import ContextMenuView from '../../../../../../views/ContextMenuView.mjs';
+import '../../../../../TranslationProvider/TranslationProvider.mjs';
+import { useLocalizedStringFormatter } from '../../../../../TranslationProvider/useLocalizedStringFormatter.mjs';
 
 const SortingContextMenu = () => {
   const list = useList();
+  const formatter = useLocalizedStringFormatter(locales, "List");
   const sortingItems = list.visibleSorting.map((s) => /* @__PURE__ */ jsx(SortingMenuItem, { sorting: s }, s.id));
   if (sortingItems.length === 0) {
     return null;
   }
   const labelSorting = list.visibleSorting.find((s) => s.isSorted());
-  const text = /* @__PURE__ */ jsx(TextView, { children: labelSorting ? /* @__PURE__ */ jsx(Fragment, { children: labelSorting.name ?? labelSorting.property }) : /* @__PURE__ */ jsx(Translate, { locales, children: "list.sorting" }) });
+  const text = /* @__PURE__ */ jsx(TextView, { children: labelSorting ? /* @__PURE__ */ jsx(Fragment, { children: labelSorting.name ?? labelSorting.property }) : formatter.format("sorting") });
   const icon = !labelSorting ? /* @__PURE__ */ jsx(IconSorting, {}) : labelSorting?.direction === "asc" ? /* @__PURE__ */ jsx(IconAscending, {}) : /* @__PURE__ */ jsx(IconDescending, {});
   return /* @__PURE__ */ jsxs(ContextMenuTriggerView, { children: [
     /* @__PURE__ */ jsxs(

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

@@ -1 +1 @@
-{"version":3,"file":"SortingContextMenu.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/SortingContextMenu/SortingContextMenu.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { Translate } from \"@/lib/react/components/Translate\";\nimport TextView from \"@/views/TextView\";\nimport ButtonView from \"@/views/ButtonView\";\nimport {\n  IconAscending,\n  IconDescending,\n  IconSorting,\n} from \"@/components/Icon/components/icons\";\nimport styles from \"@/components/List/components/Header/Header.module.css\";\nimport { SortingMenuItem } from \"@/components/List/components/Header/components/SortingContextMenu/SortingMenuItem\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\n\nexport const SortingContextMenu: FC = () => {\n  const list = useList();\n\n  const sortingItems = list.visibleSorting.map((s) => (\n    <SortingMenuItem sorting={s} key={s.id} />\n  ));\n\n  if (sortingItems.length === 0) {\n    return null;\n  }\n\n  const labelSorting = list.visibleSorting.find((s) => s.isSorted());\n\n  const text = (\n    <TextView>\n      {labelSorting ? (\n        <>{labelSorting.name ?? labelSorting.property}</>\n      ) : (\n        <Translate locales={locales}>list.sorting</Translate>\n      )}\n    </TextView>\n  );\n\n  const icon = !labelSorting ? (\n    <IconSorting />\n  ) : labelSorting?.direction === \"asc\" ? (\n    <IconAscending />\n  ) : (\n    <IconDescending />\n  );\n\n  return (\n    <ContextMenuTriggerView>\n      <ButtonView\n        variant=\"outline\"\n        color=\"secondary\"\n        className={styles.hideOnMobile}\n      >\n        {text}\n        {icon}\n      </ButtonView>\n      <ContextMenuView\n        selectionMode=\"single\"\n        selectedKeys={labelSorting ? [labelSorting.id] : []}\n      >\n        {sortingItems}\n      </ContextMenuView>\n    </ContextMenuTriggerView>\n  );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;AAgBO,MAAM,qBAAyB,MAAM;AAC1C,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,MAAM,YAAA,GAAe,IAAA,CAAK,cAAA,CAAe,GAAA,CAAI,CAAC,CAAA,qBAC5C,GAAA,CAAC,eAAA,EAAA,EAAgB,OAAA,EAAS,CAAA,EAAA,EAAQ,CAAA,CAAE,EAAI,CACzC,CAAA;AAED,EAAA,IAAI,YAAA,CAAa,WAAW,CAAA,EAAG;AAC7B,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,YAAA,GAAe,KAAK,cAAA,CAAe,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,UAAU,CAAA;AAEjE,EAAA,MAAM,IAAA,mBACJ,GAAA,CAAC,QAAA,EAAA,EACE,QAAA,EAAA,YAAA,mCACI,QAAA,EAAA,YAAA,CAAa,IAAA,IAAQ,YAAA,CAAa,QAAA,EAAS,CAAA,mBAE9C,GAAA,CAAC,SAAA,EAAA,EAAU,OAAA,EAAkB,0BAAY,CAAA,EAE7C,CAAA;AAGF,EAAA,MAAM,IAAA,GAAO,CAAC,YAAA,mBACZ,GAAA,CAAC,WAAA,EAAA,EAAY,CAAA,GACX,YAAA,EAAc,SAAA,KAAc,KAAA,mBAC9B,GAAA,CAAC,aAAA,EAAA,EAAc,CAAA,uBAEd,cAAA,EAAA,EAAe,CAAA;AAGlB,EAAA,4BACG,sBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,SAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QACN,WAAWA,YAAA,CAAO,YAAA;AAAA,QAEjB,QAAA,EAAA;AAAA,UAAA,IAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA,oBACA,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAc,QAAA;AAAA,QACd,cAAc,YAAA,GAAe,CAAC,YAAA,CAAa,EAAE,IAAI,EAAC;AAAA,QAEjD,QAAA,EAAA;AAAA;AAAA;AACH,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SortingContextMenu.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/SortingContextMenu/SortingContextMenu.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport TextView from \"@/views/TextView\";\nimport ButtonView from \"@/views/ButtonView\";\nimport {\n  IconAscending,\n  IconDescending,\n  IconSorting,\n} from \"@/components/Icon/components/icons\";\nimport styles from \"@/components/List/components/Header/Header.module.css\";\nimport { SortingMenuItem } from \"@/components/List/components/Header/components/SortingContextMenu/SortingMenuItem\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\n\nexport const SortingContextMenu: FC = () => {\n  const list = useList();\n  const formatter = useLocalizedStringFormatter(locales, \"List\");\n\n  const sortingItems = list.visibleSorting.map((s) => (\n    <SortingMenuItem sorting={s} key={s.id} />\n  ));\n\n  if (sortingItems.length === 0) {\n    return null;\n  }\n\n  const labelSorting = list.visibleSorting.find((s) => s.isSorted());\n\n  const text = (\n    <TextView>\n      {labelSorting ? (\n        <>{labelSorting.name ?? labelSorting.property}</>\n      ) : (\n        formatter.format(\"sorting\")\n      )}\n    </TextView>\n  );\n\n  const icon = !labelSorting ? (\n    <IconSorting />\n  ) : labelSorting?.direction === \"asc\" ? (\n    <IconAscending />\n  ) : (\n    <IconDescending />\n  );\n\n  return (\n    <ContextMenuTriggerView>\n      <ButtonView\n        variant=\"outline\"\n        color=\"secondary\"\n        className={styles.hideOnMobile}\n      >\n        {text}\n        {icon}\n      </ButtonView>\n      <ContextMenuView\n        selectionMode=\"single\"\n        selectedKeys={labelSorting ? [labelSorting.id] : []}\n      >\n        {sortingItems}\n      </ContextMenuView>\n    </ContextMenuTriggerView>\n  );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,qBAAyB,MAAM;AAC1C,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,SAAA,GAAY,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AAE7D,EAAA,MAAM,YAAA,GAAe,IAAA,CAAK,cAAA,CAAe,GAAA,CAAI,CAAC,CAAA,qBAC5C,GAAA,CAAC,eAAA,EAAA,EAAgB,OAAA,EAAS,CAAA,EAAA,EAAQ,CAAA,CAAE,EAAI,CACzC,CAAA;AAED,EAAA,IAAI,YAAA,CAAa,WAAW,CAAA,EAAG;AAC7B,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,YAAA,GAAe,KAAK,cAAA,CAAe,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,UAAU,CAAA;AAEjE,EAAA,MAAM,IAAA,mBACJ,GAAA,CAAC,QAAA,EAAA,EACE,QAAA,EAAA,YAAA,mBACC,GAAA,CAAA,QAAA,EAAA,EAAG,QAAA,EAAA,YAAA,CAAa,IAAA,IAAQ,YAAA,CAAa,QAAA,EAAS,CAAA,GAE9C,SAAA,CAAU,MAAA,CAAO,SAAS,CAAA,EAE9B,CAAA;AAGF,EAAA,MAAM,IAAA,GAAO,CAAC,YAAA,mBACZ,GAAA,CAAC,WAAA,EAAA,EAAY,CAAA,GACX,YAAA,EAAc,SAAA,KAAc,KAAA,mBAC9B,GAAA,CAAC,aAAA,EAAA,EAAc,CAAA,uBAEd,cAAA,EAAA,EAAe,CAAA;AAGlB,EAAA,4BACG,sBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,SAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QACN,WAAWA,YAAA,CAAO,YAAA;AAAA,QAEjB,QAAA,EAAA;AAAA,UAAA,IAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA,oBACA,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAc,QAAA;AAAA,QACd,cAAc,YAAA,GAAe,CAAC,YAAA,CAAa,EAAE,IAAI,EAAC;AAAA,QAEjD,QAAA,EAAA;AAAA;AAAA;AACH,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -12,6 +12,10 @@ import '../../../../../Icon/Icon.mjs';
 import '../../../../../../views/IconView.mjs';
 import '../../../../../Heading/Heading.mjs';
 import '../../../../../Text/Text.mjs';
+import '../../../../../TranslationProvider/TranslationProvider.mjs';
+import 'remeda';
+import 'intl-messageformat';
+import '@react-aria/i18n';
 import 'react-aria';
 import 'clsx';
 import '@mittwald/react-tunnel';

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

@@ -1 +1 @@
-{"version":3,"file":"SortingMenuItem.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/SortingContextMenu/SortingMenuItem.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport type { Sorting } from \"@/components/List/model/sorting/Sorting\";\nimport MenuItemView from \"@/views/MenuItemView\";\nimport { useList } from \"@/components/List\";\n\ninterface Props {\n  sorting: Sorting<never>;\n}\n\nexport const SortingMenuItem: FC<Props> = (props) => {\n  const { sorting } = props;\n\n  const list = useList();\n\n  return (\n    <MenuItemView\n      id={sorting.id}\n      onAction={() => {\n        list.getSorting(sorting.id).enable();\n      }}\n    >\n      {`${sorting.name ?? sorting.property} ${sorting.directionName ?? \"\"}`.trim()}\n    </MenuItemView>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,eAAA,GAA6B,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM,EAAE,SAAQ,GAAI,KAAA;AAEpB,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,IAAI,OAAA,CAAQ,EAAA;AAAA,MACZ,UAAU,MAAM;AACd,QAAA,IAAA,CAAK,UAAA,CAAW,OAAA,CAAQ,EAAE,CAAA,CAAE,MAAA,EAAO;AAAA,MACrC,CAAA;AAAA,MAEC,QAAA,EAAA,CAAA,EAAG,OAAA,CAAQ,IAAA,IAAQ,OAAA,CAAQ,QAAQ,IAAI,OAAA,CAAQ,aAAA,IAAiB,EAAE,CAAA,CAAA,CAAG,IAAA;AAAK;AAAA,GAC7E;AAEJ;;;;"}
+{"version":3,"file":"SortingMenuItem.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/SortingContextMenu/SortingMenuItem.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport type { Sorting } from \"@/components/List/model/sorting/Sorting\";\nimport MenuItemView from \"@/views/MenuItemView\";\nimport { useList } from \"@/components/List\";\n\ninterface Props {\n  sorting: Sorting<never>;\n}\n\nexport const SortingMenuItem: FC<Props> = (props) => {\n  const { sorting } = props;\n\n  const list = useList();\n\n  return (\n    <MenuItemView\n      id={sorting.id}\n      onAction={() => {\n        list.getSorting(sorting.id).enable();\n      }}\n    >\n      {`${sorting.name ?? sorting.property} ${sorting.directionName ?? \"\"}`.trim()}\n    </MenuItemView>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,eAAA,GAA6B,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM,EAAE,SAAQ,GAAI,KAAA;AAEpB,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,IAAI,OAAA,CAAQ,EAAA;AAAA,MACZ,UAAU,MAAM;AACd,QAAA,IAAA,CAAK,UAAA,CAAW,OAAA,CAAQ,EAAE,CAAA,CAAE,MAAA,EAAO;AAAA,MACrC,CAAA;AAAA,MAEC,QAAA,EAAA,CAAA,EAAG,OAAA,CAAQ,IAAA,IAAQ,OAAA,CAAQ,QAAQ,IAAI,OAAA,CAAQ,aAAA,IAAiB,EAAE,CAAA,CAAA,CAAG,IAAA;AAAK;AAAA,GAC7E;AAEJ;;;;"}

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

@@ -2,7 +2,7 @@
 /* */
 import { jsxs, jsx } from 'react/jsx-runtime';
 import locales from '../../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
-import { useLocalizedStringFormatter } from 'react-aria';
+import { useLocalizedStringFormatter } from '../../../../../TranslationProvider/useLocalizedStringFormatter.mjs';
 import 'invariant';
 import 'react-aria-components';
 import 'react';
@@ -34,7 +34,7 @@ import headerStyles from '../../Header.module.css.mjs';
 import ContextMenuView from '../../../../../../views/ContextMenuView.mjs';
 
 const ViewModeContextMenu = () => {
-  const stringFormatter = useLocalizedStringFormatter(locales);
+  const stringFormatter = useLocalizedStringFormatter(locales, "List");
   const list = useList();
   const selectedViewMode = list.viewMode.value;
   const availableViewModes = useAvailableViewModes();
@@ -47,10 +47,10 @@ const ViewModeContextMenu = () => {
       {
         variant: "outline",
         color: "secondary",
-        "aria-label": stringFormatter.format("list.settings"),
+        "aria-label": stringFormatter.format("settings"),
         className: headerStyles.hideOnMobile,
         children: [
-          /* @__PURE__ */ jsx(TextView, { children: stringFormatter.format(`list.settings.viewMode.${selectedViewMode}`) }),
+          /* @__PURE__ */ jsx(TextView, { children: stringFormatter.format(`settings.viewMode.${selectedViewMode}`) }),
           /* @__PURE__ */ jsx(IconView, {})
         ]
       }

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

@@ -1 +1 @@
-{"version":3,"file":"ViewModeContextMenu.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/ViewModeContextMenu/ViewModeContextMenu.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { useList } from \"@/components/List\";\nimport { IconView } from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport TextView from \"@/views/TextView\";\nimport { ViewModeMenuItem } from \"@/components/List/components/Header/components/ViewModeContextMenu/ViewModeMenuItem\";\nimport { useAvailableViewModes } from \"@/components/List/components/Header/lib\";\nimport styles from \"@/components/List/components/Header/Header.module.css\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\n\nexport const ViewModeContextMenu: FC = () => {\n  const stringFormatter = useLocalizedStringFormatter(locales);\n  const list = useList();\n  const selectedViewMode = list.viewMode.value;\n\n  const availableViewModes = useAvailableViewModes();\n\n  if (availableViewModes.length <= 1) {\n    return null;\n  }\n\n  return (\n    <ContextMenuTriggerView>\n      <ButtonView\n        variant=\"outline\"\n        color=\"secondary\"\n        aria-label={stringFormatter.format(\"list.settings\")}\n        className={styles.hideOnMobile}\n      >\n        <TextView>\n          {stringFormatter.format(`list.settings.viewMode.${selectedViewMode}`)}\n        </TextView>\n        <IconView />\n      </ButtonView>\n      <ContextMenuView selectionMode=\"single\" selectedKeys={[selectedViewMode]}>\n        {availableViewModes.map((viewMode) => (\n          <ViewModeMenuItem viewMode={viewMode} key={viewMode} />\n        ))}\n      </ContextMenuView>\n    </ContextMenuTriggerView>\n  );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAM,sBAA0B,MAAM;AAC3C,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAC3D,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,gBAAA,GAAmB,KAAK,QAAA,CAAS,KAAA;AAEvC,EAAA,MAAM,qBAAqB,qBAAA,EAAsB;AAEjD,EAAA,IAAI,kBAAA,CAAmB,UAAU,CAAA,EAAG;AAClC,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,4BACG,sBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,SAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QACN,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,eAAe,CAAA;AAAA,QAClD,WAAWA,YAAA,CAAO,YAAA;AAAA,QAElB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YACE,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,CAAA,uBAAA,EAA0B,gBAAgB,EAAE,CAAA,EACtE,CAAA;AAAA,8BACC,QAAA,EAAA,EAAS;AAAA;AAAA;AAAA,KACZ;AAAA,wBACC,eAAA,EAAA,EAAgB,aAAA,EAAc,QAAA,EAAS,YAAA,EAAc,CAAC,gBAAgB,CAAA,EACpE,QAAA,EAAA,kBAAA,CAAmB,GAAA,CAAI,CAAC,QAAA,qBACvB,GAAA,CAAC,oBAAiB,QAAA,EAAA,EAAyB,QAAU,CACtD,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ViewModeContextMenu.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/ViewModeContextMenu/ViewModeContextMenu.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { useList } from \"@/components/List\";\nimport { IconView } from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport TextView from \"@/views/TextView\";\nimport { ViewModeMenuItem } from \"@/components/List/components/Header/components/ViewModeContextMenu/ViewModeMenuItem\";\nimport { useAvailableViewModes } from \"@/components/List/components/Header/lib\";\nimport styles from \"@/components/List/components/Header/Header.module.css\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\n\nexport const ViewModeContextMenu: FC = () => {\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n  const list = useList();\n  const selectedViewMode = list.viewMode.value;\n\n  const availableViewModes = useAvailableViewModes();\n\n  if (availableViewModes.length <= 1) {\n    return null;\n  }\n\n  return (\n    <ContextMenuTriggerView>\n      <ButtonView\n        variant=\"outline\"\n        color=\"secondary\"\n        aria-label={stringFormatter.format(\"settings\")}\n        className={styles.hideOnMobile}\n      >\n        <TextView>\n          {stringFormatter.format(`settings.viewMode.${selectedViewMode}`)}\n        </TextView>\n        <IconView />\n      </ButtonView>\n      <ContextMenuView selectionMode=\"single\" selectedKeys={[selectedViewMode]}>\n        {availableViewModes.map((viewMode) => (\n          <ViewModeMenuItem viewMode={viewMode} key={viewMode} />\n        ))}\n      </ContextMenuView>\n    </ContextMenuTriggerView>\n  );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAM,sBAA0B,MAAM;AAC3C,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AACnE,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,gBAAA,GAAmB,KAAK,QAAA,CAAS,KAAA;AAEvC,EAAA,MAAM,qBAAqB,qBAAA,EAAsB;AAEjD,EAAA,IAAI,kBAAA,CAAmB,UAAU,CAAA,EAAG;AAClC,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,4BACG,sBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,SAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QACN,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,UAAU,CAAA;AAAA,QAC7C,WAAWA,YAAA,CAAO,YAAA;AAAA,QAElB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YACE,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,CAAA,kBAAA,EAAqB,gBAAgB,EAAE,CAAA,EACjE,CAAA;AAAA,8BACC,QAAA,EAAA,EAAS;AAAA;AAAA;AAAA,KACZ;AAAA,wBACC,eAAA,EAAA,EAAgB,aAAA,EAAc,QAAA,EAAS,YAAA,EAAc,CAAC,gBAAgB,CAAA,EACpE,QAAA,EAAA,kBAAA,CAAmB,GAAA,CAAI,CAAC,QAAA,qBACvB,GAAA,CAAC,oBAAiB,QAAA,EAAA,EAAyB,QAAU,CACtD,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -13,7 +13,7 @@ import '../../../../../../views/IconView.mjs';
 import '../../../../../Heading/Heading.mjs';
 import '../../../../../Text/Text.mjs';
 import locales from '../../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
-import { useLocalizedStringFormatter } from 'react-aria';
+import { useLocalizedStringFormatter } from '../../../../../TranslationProvider/useLocalizedStringFormatter.mjs';
 import 'clsx';
 import '@mittwald/react-tunnel';
 import '../../../../../../views/ListItemViewContentView.mjs';
@@ -31,7 +31,7 @@ import '../../../../List.mjs';
 const ViewModeMenuItem = (props) => {
   const { viewMode } = props;
   const list = useList();
-  const stringFormatter = useLocalizedStringFormatter(locales);
+  const stringFormatter = useLocalizedStringFormatter(locales, "List");
   return /* @__PURE__ */ jsx(
     MenuItemView,
     {
@@ -39,7 +39,7 @@ const ViewModeMenuItem = (props) => {
       onAction: () => {
         list.viewMode.set(viewMode);
       },
-      children: stringFormatter.format(`list.settings.viewMode.${viewMode}`)
+      children: stringFormatter.format(`settings.viewMode.${viewMode}`)
     }
   );
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ViewModeMenuItem.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/ViewModeContextMenu/ViewModeMenuItem.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport MenuItemView from \"@/views/MenuItemView\";\nimport type { ListViewMode } from \"@/components/List/model/types\";\nimport { useList } from \"@/components/List\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../../../locales/*.locale.json\";\n\ninterface Props {\n  viewMode: ListViewMode;\n}\n\nexport const ViewModeMenuItem: FC<Props> = (props) => {\n  const { viewMode } = props;\n  const list = useList();\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  return (\n    <MenuItemView\n      id={viewMode}\n      onAction={() => {\n        list.viewMode.set(viewMode);\n      }}\n    >\n      {stringFormatter.format(`list.settings.viewMode.${viewMode}`)}\n    </MenuItemView>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,gBAAA,GAA8B,CAAC,KAAA,KAAU;AACpD,EAAA,MAAM,EAAE,UAAS,GAAI,KAAA;AACrB,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,QAAA;AAAA,MACJ,UAAU,MAAM;AACd,QAAA,IAAA,CAAK,QAAA,CAAS,IAAI,QAAQ,CAAA;AAAA,MAC5B,CAAA;AAAA,MAEC,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,CAAA,uBAAA,EAA0B,QAAQ,CAAA,CAAE;AAAA;AAAA,GAC9D;AAEJ;;;;"}
+{"version":3,"file":"ViewModeMenuItem.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/ViewModeContextMenu/ViewModeMenuItem.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport MenuItemView from \"@/views/MenuItemView\";\nimport type { ListViewMode } from \"@/components/List/model/types\";\nimport { useList } from \"@/components/List\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\n\ninterface Props {\n  viewMode: ListViewMode;\n}\n\nexport const ViewModeMenuItem: FC<Props> = (props) => {\n  const { viewMode } = props;\n  const list = useList();\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  return (\n    <MenuItemView\n      id={viewMode}\n      onAction={() => {\n        list.viewMode.set(viewMode);\n      }}\n    >\n      {stringFormatter.format(`settings.viewMode.${viewMode}`)}\n    </MenuItemView>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,gBAAA,GAA8B,CAAC,KAAA,KAAU;AACpD,EAAA,MAAM,EAAE,UAAS,GAAI,KAAA;AACrB,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AAEnE,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,QAAA;AAAA,MACJ,UAAU,MAAM;AACd,QAAA,IAAA,CAAK,QAAA,CAAS,IAAI,QAAQ,CAAA;AAAA,MAC5B,CAAA;AAAA,MAEC,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,CAAA,kBAAA,EAAqB,QAAQ,CAAA,CAAE;AAAA;AAAA,GACzD;AAEJ;;;;"}

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

@@ -11,6 +11,10 @@ import '../../../Icon/Icon.mjs';
 import '../../../../views/IconView.mjs';
 import '../../../Heading/Heading.mjs';
 import '../../../Text/Text.mjs';
+import '../../../TranslationProvider/TranslationProvider.mjs';
+import 'remeda';
+import 'intl-messageformat';
+import '@react-aria/i18n';
 import 'react-aria';
 import 'clsx';
 import '@mittwald/react-tunnel';

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

@@ -1 +1 @@
-{"version":3,"file":"lib.mjs","sources":["../../../../../../../../../src/components/List/components/Header/lib.ts"],"sourcesContent":["import type { ListViewMode } from \"@/components/List/model/types\";\nimport { useList } from \"@/components/List\";\n\nexport const useAvailableViewModes = () => {\n  const list = useList();\n\n  const availableViewModes: ListViewMode[] = [];\n\n  if (list.itemView?.showList) {\n    availableViewModes.push(\"list\");\n  }\n  if (list.table) {\n    availableViewModes.push(\"table\");\n  }\n  if (list.itemView?.showTiles) {\n    availableViewModes.push(\"tiles\");\n  }\n\n  return availableViewModes;\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,wBAAwB,MAAM;AACzC,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,MAAM,qBAAqC,EAAC;AAE5C,EAAA,IAAI,IAAA,CAAK,UAAU,QAAA,EAAU;AAC3B,IAAA,kBAAA,CAAmB,KAAK,MAAM,CAAA;AAAA,EAChC;AACA,EAAA,IAAI,KAAK,KAAA,EAAO;AACd,IAAA,kBAAA,CAAmB,KAAK,OAAO,CAAA;AAAA,EACjC;AACA,EAAA,IAAI,IAAA,CAAK,UAAU,SAAA,EAAW;AAC5B,IAAA,kBAAA,CAAmB,KAAK,OAAO,CAAA;AAAA,EACjC;AAEA,EAAA,OAAO,kBAAA;AACT;;;;"}
+{"version":3,"file":"lib.mjs","sources":["../../../../../../../../../src/components/List/components/Header/lib.ts"],"sourcesContent":["import type { ListViewMode } from \"@/components/List/model/types\";\nimport { useList } from \"@/components/List\";\n\nexport const useAvailableViewModes = () => {\n  const list = useList();\n\n  const availableViewModes: ListViewMode[] = [];\n\n  if (list.itemView?.showList) {\n    availableViewModes.push(\"list\");\n  }\n  if (list.table) {\n    availableViewModes.push(\"table\");\n  }\n  if (list.itemView?.showTiles) {\n    availableViewModes.push(\"tiles\");\n  }\n\n  return availableViewModes;\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,wBAAwB,MAAM;AACzC,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,MAAM,qBAAqC,EAAC;AAE5C,EAAA,IAAI,IAAA,CAAK,UAAU,QAAA,EAAU;AAC3B,IAAA,kBAAA,CAAmB,KAAK,MAAM,CAAA;AAAA,EAChC;AACA,EAAA,IAAI,KAAK,KAAA,EAAO;AACd,IAAA,kBAAA,CAAmB,KAAK,OAAO,CAAA;AAAA,EACjC;AACA,EAAA,IAAI,IAAA,CAAK,UAAU,SAAA,EAAW;AAC5B,IAAA,kBAAA,CAAmB,KAAK,OAAO,CAAA;AAAA,EACjC;AAEA,EAAA,OAAO,kBAAA;AACT;;;;"}

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

@@ -9,8 +9,12 @@ import '@mittwald/react-tunnel';
 import '../../../../views/ListItemViewContentView.mjs';
 import '../../../../lib/propsContext/propsContext.mjs';
 import '../../../../lib/propsContext/components/PropsContextProvider.mjs';
-import 'react-aria';
+import '../../../TranslationProvider/TranslationProvider.mjs';
+import 'remeda';
+import 'intl-messageformat';
+import '@react-aria/i18n';
 import 'react';
+import 'react-aria';
 import '@mittwald/flow-icons';
 import '../../../Icon/components/IconSetProvider.mjs';
 import '../../../Icon/Icon.mjs';

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

@@ -1 +1 @@
-{"version":3,"file":"Items.mjs","sources":["../../../../../../../../../src/components/List/components/Items/Items.tsx"],"sourcesContent":["import { EmptyView } from \"@/components/List\";\nimport Item from \"@/components/List/components/Items/components/Item/Item\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport DivView from \"@/views/DivView\";\nimport ItemsGridListView from \"@/views/ItemsGridListView\";\nimport clsx from \"clsx\";\nimport type { FC } from \"react\";\nimport styles from \"./Items.module.scss\";\nimport { FallbackItems } from \"./components/FallbackItems\";\n\nexport const Items: FC = () => {\n  const list = useList();\n  const tiles = list.viewMode.isTiles;\n  const isLoading = list.loader.useIsLoading();\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n\n  if (!list.itemView) {\n    return null;\n  }\n\n  const items = list.items.entries.map((item) => (\n    <Item key={item.id} data={item.data} id={item.id} />\n  ));\n\n  const rootClassName = clsx(\n    styles.items,\n    isLoading && styles.isLoading,\n    tiles && styles.tiles,\n  );\n\n  return (\n    <DivView aria-hidden={isInitiallyLoading} aria-busy={isLoading}>\n      <ItemsGridListView\n        className={rootClassName}\n        {...list.componentProps}\n        renderEmptyState={() => <EmptyView />}\n        layout={tiles ? \"grid\" : \"stack\"}\n        tileMaxWidth={list.itemView.tileMaxWidth}\n      >\n        {items.length === 0 && isInitiallyLoading ? <FallbackItems /> : items}\n      </ItemsGridListView>\n    </DivView>\n  );\n};\n\nexport default Items;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,QAAY,MAAM;AAC7B,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,KAAA,GAAQ,KAAK,QAAA,CAAS,OAAA;AAC5B,EAAA,MAAM,SAAA,GAAY,IAAA,CAAK,MAAA,CAAO,YAAA,EAAa;AAC3C,EAAA,MAAM,kBAAA,GAAqB,IAAA,CAAK,MAAA,CAAO,qBAAA,EAAsB;AAE7D,EAAA,IAAI,CAAC,KAAK,QAAA,EAAU;AAClB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,QAAQ,IAAA,CAAK,KAAA,CAAM,OAAA,CAAQ,GAAA,CAAI,CAAC,IAAA,qBACpC,GAAA,CAAC,IAAA,EAAA,EAAmB,IAAA,EAAM,KAAK,IAAA,EAAM,EAAA,EAAI,KAAK,EAAA,EAAA,EAAnC,IAAA,CAAK,EAAkC,CACnD,CAAA;AAED,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,KAAA;AAAA,IACP,aAAa,MAAA,CAAO,SAAA;AAAA,IACpB,SAAS,MAAA,CAAO;AAAA,GAClB;AAEA,EAAA,uBACE,GAAA,CAAC,OAAA,EAAA,EAAQ,aAAA,EAAa,kBAAA,EAAoB,aAAW,SAAA,EACnD,QAAA,kBAAA,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,aAAA;AAAA,MACV,GAAG,IAAA,CAAK,cAAA;AAAA,MACT,gBAAA,EAAkB,sBAAM,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA;AAAA,MACnC,MAAA,EAAQ,QAAQ,MAAA,GAAS,OAAA;AAAA,MACzB,YAAA,EAAc,KAAK,QAAA,CAAS,YAAA;AAAA,MAE3B,gBAAM,MAAA,KAAW,CAAA,IAAK,kBAAA,mBAAqB,GAAA,CAAC,iBAAc,CAAA,GAAK;AAAA;AAAA,GAClE,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Items.mjs","sources":["../../../../../../../../../src/components/List/components/Items/Items.tsx"],"sourcesContent":["import { EmptyView } from \"@/components/List\";\nimport Item from \"@/components/List/components/Items/components/Item/Item\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport DivView from \"@/views/DivView\";\nimport ItemsGridListView from \"@/views/ItemsGridListView\";\nimport clsx from \"clsx\";\nimport type { FC } from \"react\";\nimport styles from \"./Items.module.scss\";\nimport { FallbackItems } from \"./components/FallbackItems\";\n\nexport const Items: FC = () => {\n  const list = useList();\n  const tiles = list.viewMode.isTiles;\n  const isLoading = list.loader.useIsLoading();\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n\n  if (!list.itemView) {\n    return null;\n  }\n\n  const items = list.items.entries.map((item) => (\n    <Item key={item.id} data={item.data} id={item.id} />\n  ));\n\n  const rootClassName = clsx(\n    styles.items,\n    isLoading && styles.isLoading,\n    tiles && styles.tiles,\n  );\n\n  return (\n    <DivView aria-hidden={isInitiallyLoading} aria-busy={isLoading}>\n      <ItemsGridListView\n        className={rootClassName}\n        {...list.componentProps}\n        renderEmptyState={() => <EmptyView />}\n        layout={tiles ? \"grid\" : \"stack\"}\n        tileMaxWidth={list.itemView.tileMaxWidth}\n      >\n        {items.length === 0 && isInitiallyLoading ? <FallbackItems /> : items}\n      </ItemsGridListView>\n    </DivView>\n  );\n};\n\nexport default Items;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,QAAY,MAAM;AAC7B,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,KAAA,GAAQ,KAAK,QAAA,CAAS,OAAA;AAC5B,EAAA,MAAM,SAAA,GAAY,IAAA,CAAK,MAAA,CAAO,YAAA,EAAa;AAC3C,EAAA,MAAM,kBAAA,GAAqB,IAAA,CAAK,MAAA,CAAO,qBAAA,EAAsB;AAE7D,EAAA,IAAI,CAAC,KAAK,QAAA,EAAU;AAClB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,QAAQ,IAAA,CAAK,KAAA,CAAM,OAAA,CAAQ,GAAA,CAAI,CAAC,IAAA,qBACpC,GAAA,CAAC,IAAA,EAAA,EAAmB,IAAA,EAAM,KAAK,IAAA,EAAM,EAAA,EAAI,KAAK,EAAA,EAAA,EAAnC,IAAA,CAAK,EAAkC,CACnD,CAAA;AAED,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,KAAA;AAAA,IACP,aAAa,MAAA,CAAO,SAAA;AAAA,IACpB,SAAS,MAAA,CAAO;AAAA,GAClB;AAEA,EAAA,uBACE,GAAA,CAAC,OAAA,EAAA,EAAQ,aAAA,EAAa,kBAAA,EAAoB,aAAW,SAAA,EACnD,QAAA,kBAAA,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,aAAA;AAAA,MACV,GAAG,IAAA,CAAK,cAAA;AAAA,MACT,gBAAA,EAAkB,sBAAM,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA;AAAA,MACnC,MAAA,EAAQ,QAAQ,MAAA,GAAS,OAAA;AAAA,MACzB,YAAA,EAAc,KAAK,QAAA,CAAS,YAAA;AAAA,MAE3B,gBAAM,MAAA,KAAW,CAAA,IAAK,kBAAA,mBAAqB,GAAA,CAAC,iBAAc,CAAA,GAAK;AAAA;AAAA,GAClE,EACF,CAAA;AAEJ;;;;"}

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

@@ -9,13 +9,13 @@ import '../../../../../../../views/IconView.mjs';
 import { IconChevronDown } from '../../../../../../Icon/components/icons/IconChevronDown.mjs';
 import { IconChevronUp } from '../../../../../../Icon/components/icons/IconChevronUp.mjs';
 import locales from '../../../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
-import { useLocalizedStringFormatter } from 'react-aria';
+import { useLocalizedStringFormatter } from '../../../../../../TranslationProvider/useLocalizedStringFormatter.mjs';
 import ButtonView from '../../../../../../../views/ButtonView.mjs';
 import styles from '../../../../ListItemView/ListItemView.module.scss.mjs';
 
 const AccordionButton = (props) => {
   const { isExpanded, toggle, children, contentElementId } = props;
-  const stringFormatter = useLocalizedStringFormatter(locales);
+  const stringFormatter = useLocalizedStringFormatter(locales, "List");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       ButtonView,
@@ -26,7 +26,7 @@ const AccordionButton = (props) => {
         color: "secondary",
         onPress: toggle,
         "aria-label": stringFormatter.format(
-          "list.toggleExpandButton." + (isExpanded ? "collapse" : "expand")
+          "toggleExpandButton." + (isExpanded ? "collapse" : "expand")
         ),
         "aria-controls": contentElementId,
         "aria-expanded": isExpanded,

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionButton.mjs","sources":["../../../../../../../../../../../../src/components/List/components/Items/components/Item/components/AccordionButton.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport {\n  IconChevronDown,\n  IconChevronUp,\n} from \"@/components/Icon/components/icons\";\nimport locales from \"../../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport ButtonView from \"@/views/ButtonView\";\nimport styles from \"../../../../ListItemView/ListItemView.module.scss\";\n\ninterface Props extends PropsWithChildren {\n  isExpanded: boolean;\n  toggle: () => void;\n  contentElementId: string;\n}\n\nexport const AccordionButton: FC<Props> = (props) => {\n  const { isExpanded, toggle, children, contentElementId } = props;\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  return (\n    <>\n      <ButtonView\n        className={styles.action}\n        tunnelId=\"button\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={toggle}\n        aria-label={stringFormatter.format(\n          \"list.toggleExpandButton.\" + (isExpanded ? \"collapse\" : \"expand\"),\n        )}\n        aria-controls={contentElementId}\n        aria-expanded={isExpanded}\n      >\n        {isExpanded ? <IconChevronUp /> : <IconChevronDown />}\n      </ButtonView>\n      {isExpanded && children}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAgBO,MAAM,eAAA,GAA6B,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM,EAAE,UAAA,EAAY,MAAA,EAAQ,QAAA,EAAU,kBAAiB,GAAI,KAAA;AAC3D,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAA,CAAO,MAAA;AAAA,QAClB,QAAA,EAAS,QAAA;AAAA,QACT,OAAA,EAAQ,OAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QACN,OAAA,EAAS,MAAA;AAAA,QACT,cAAY,eAAA,CAAgB,MAAA;AAAA,UAC1B,0BAAA,IAA8B,aAAa,UAAA,GAAa,QAAA;AAAA,SAC1D;AAAA,QACA,eAAA,EAAe,gBAAA;AAAA,QACf,eAAA,EAAe,UAAA;AAAA,QAEd,QAAA,EAAA,UAAA,mBAAa,GAAA,CAAC,aAAA,EAAA,EAAc,CAAA,uBAAM,eAAA,EAAA,EAAgB;AAAA;AAAA,KACrD;AAAA,IACC,UAAA,IAAc;AAAA,GAAA,EACjB,CAAA;AAEJ;;;;"}
+{"version":3,"file":"AccordionButton.mjs","sources":["../../../../../../../../../../../../src/components/List/components/Items/components/Item/components/AccordionButton.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport {\n  IconChevronDown,\n  IconChevronUp,\n} from \"@/components/Icon/components/icons\";\nimport locales from \"../../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport ButtonView from \"@/views/ButtonView\";\nimport styles from \"../../../../ListItemView/ListItemView.module.scss\";\n\ninterface Props extends PropsWithChildren {\n  isExpanded: boolean;\n  toggle: () => void;\n  contentElementId: string;\n}\n\nexport const AccordionButton: FC<Props> = (props) => {\n  const { isExpanded, toggle, children, contentElementId } = props;\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  return (\n    <>\n      <ButtonView\n        className={styles.action}\n        tunnelId=\"button\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={toggle}\n        aria-label={stringFormatter.format(\n          \"toggleExpandButton.\" + (isExpanded ? \"collapse\" : \"expand\"),\n        )}\n        aria-controls={contentElementId}\n        aria-expanded={isExpanded}\n      >\n        {isExpanded ? <IconChevronUp /> : <IconChevronDown />}\n      </ButtonView>\n      {isExpanded && children}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAgBO,MAAM,eAAA,GAA6B,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM,EAAE,UAAA,EAAY,MAAA,EAAQ,QAAA,EAAU,kBAAiB,GAAI,KAAA;AAC3D,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AAEnE,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAA,CAAO,MAAA;AAAA,QAClB,QAAA,EAAS,QAAA;AAAA,QACT,OAAA,EAAQ,OAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QACN,OAAA,EAAS,MAAA;AAAA,QACT,cAAY,eAAA,CAAgB,MAAA;AAAA,UAC1B,qBAAA,IAAyB,aAAa,UAAA,GAAa,QAAA;AAAA,SACrD;AAAA,QACA,eAAA,EAAe,gBAAA;AAAA,QACf,eAAA,EAAe,UAAA;AAAA,QAEd,QAAA,EAAA,UAAA,mBAAa,GAAA,CAAC,aAAA,EAAA,EAAc,CAAA,uBAAM,eAAA,EAAA,EAAgB;AAAA;AAAA,KACrD;AAAA,IACC,UAAA,IAAc;AAAA,GAAA,EACjB,CAAA;AAEJ;;;;"}

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

@@ -2,7 +2,7 @@
 /* */
 import { jsxs, jsx } from 'react/jsx-runtime';
 import locales from '../../../../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
-import { useLocalizedStringFormatter } from 'react-aria';
+import { useLocalizedStringFormatter } from '../../../../../../../TranslationProvider/useLocalizedStringFormatter.mjs';
 import 'react';
 import '@mittwald/flow-icons';
 import '../../../../../../../Icon/components/IconSetProvider.mjs';
@@ -14,7 +14,7 @@ import ContextMenuTriggerView from '../../../../../../../../views/ContextMenuTri
 
 const OptionsButton = (props) => {
   const { className, children } = props;
-  const stringFormatter = useLocalizedStringFormatter(locales);
+  const stringFormatter = useLocalizedStringFormatter(locales, "List");
   return /* @__PURE__ */ jsxs(ContextMenuTriggerView, { children: [
     /* @__PURE__ */ jsx(
       ButtonView,
@@ -22,7 +22,7 @@ const OptionsButton = (props) => {
         variant: "plain",
         color: "secondary",
         className,
-        "aria-label": stringFormatter.format("list.options"),
+        "aria-label": stringFormatter.format("options"),
         tunnelId: null,
         children: /* @__PURE__ */ jsx(IconContextMenu, {})
       }

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

@@ -1 +1 @@
-{"version":3,"file":"OptionsButton.mjs","sources":["../../../../../../../../../../../../../src/components/List/components/Items/components/Item/components/OptionsButton/OptionsButton.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport locales from \"../../../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { IconContextMenu } from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\n\ninterface Props extends PropsWithChildren, PropsWithClassName {}\n\nexport const OptionsButton: FC<Props> = (props) => {\n  const { className, children } = props;\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  return (\n    <ContextMenuTriggerView>\n      <ButtonView\n        variant=\"plain\"\n        color=\"secondary\"\n        className={className}\n        aria-label={stringFormatter.format(\"list.options\")}\n        tunnelId={null}\n      >\n        <IconContextMenu />\n      </ButtonView>\n      {children}\n    </ContextMenuTriggerView>\n  );\n};\n\nexport default OptionsButton;\n"],"names":[],"mappings":";;;;;;;;;;;;AAUO,MAAM,aAAA,GAA2B,CAAC,KAAA,KAAU;AACjD,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAS,GAAI,KAAA;AAChC,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,4BACG,sBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,OAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QACN,SAAA;AAAA,QACA,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,cAAc,CAAA;AAAA,QACjD,QAAA,EAAU,IAAA;AAAA,QAEV,8BAAC,eAAA,EAAA,EAAgB;AAAA;AAAA,KACnB;AAAA,IACC;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"OptionsButton.mjs","sources":["../../../../../../../../../../../../../src/components/List/components/Items/components/Item/components/OptionsButton/OptionsButton.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport locales from \"../../../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { IconContextMenu } from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\n\ninterface Props extends PropsWithChildren, PropsWithClassName {}\n\nexport const OptionsButton: FC<Props> = (props) => {\n  const { className, children } = props;\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  return (\n    <ContextMenuTriggerView>\n      <ButtonView\n        variant=\"plain\"\n        color=\"secondary\"\n        className={className}\n        aria-label={stringFormatter.format(\"options\")}\n        tunnelId={null}\n      >\n        <IconContextMenu />\n      </ButtonView>\n      {children}\n    </ContextMenuTriggerView>\n  );\n};\n\nexport default OptionsButton;\n"],"names":[],"mappings":";;;;;;;;;;;;AAUO,MAAM,aAAA,GAA2B,CAAC,KAAA,KAAU;AACjD,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAS,GAAI,KAAA;AAChC,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AAEnE,EAAA,4BACG,sBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,OAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QACN,SAAA;AAAA,QACA,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,SAAS,CAAA;AAAA,QAC5C,QAAA,EAAU,IAAA;AAAA,QAEV,8BAAC,eAAA,EAAA,EAAgB;AAAA;AAAA,KACnB;AAAA,IACC;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/js/packages/components/src/components/List/components/Items/components/Item/hooks/useGridItemProps.mjs

@@ -11,6 +11,10 @@ import '../../../../../../Icon/Icon.mjs';
 import '../../../../../../../views/IconView.mjs';
 import '../../../../../../Heading/Heading.mjs';
 import '../../../../../../Text/Text.mjs';
+import '../../../../../../TranslationProvider/TranslationProvider.mjs';
+import 'remeda';
+import 'intl-messageformat';
+import '@react-aria/i18n';
 import 'react-aria';
 import 'clsx';
 import '@mittwald/react-tunnel';

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

@@ -1 +1 @@
-{"version":3,"file":"useGridItemProps.mjs","sources":["../../../../../../../../../../../../src/components/List/components/Items/components/Item/hooks/useGridItemProps.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { useList } from \"@/components/List\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { AccordionButton } from \"@/components/List/components/Items/components/Item/components/AccordionButton\";\n\ninterface P extends PropsWithChildren {\n  data: never;\n}\n\nexport const useGridItemProps = (props: P) => {\n  const { data, children: childrenFromProps } = props;\n  const list = useList();\n  const itemView = list.itemView;\n  const onAction = list.onAction;\n\n  const [isExpanded, setIsExpanded] = useState(\n    itemView?.defaultExpanded?.(data) ?? false,\n  );\n  const contentElementId = useId();\n  const itemRef = useRef<HTMLDivElement>(null);\n\n  const accordion = list.accordion;\n  const children = childrenFromProps ?? itemView?.render(data);\n\n  useEffect(() => {\n    if (accordion) {\n      itemRef.current?.setAttribute(\"aria-expanded\", String(isExpanded));\n      itemRef.current?.setAttribute(\"aria-controls\", contentElementId);\n    }\n  }, [isExpanded, contentElementId, itemRef.current, accordion]);\n\n  if (!accordion) {\n    return {\n      gridItemProps: {\n        onAction: onAction\n          ? () => {\n              onAction?.(data);\n            }\n          : undefined,\n      },\n      children,\n    };\n  }\n\n  const toggleAccordion = () => {\n    setIsExpanded((current) => !current);\n    onAction?.(data);\n  };\n\n  const propsContext: PropsContext = {\n    Content: {\n      id: dynamic((p) => (p.slot === \"bottom\" ? contentElementId : undefined)),\n      wrapWith: dynamic((p) =>\n        p.slot === \"bottom\" ? (\n          <AccordionButton\n            contentElementId={contentElementId}\n            toggle={toggleAccordion}\n            isExpanded={isExpanded}\n          />\n        ) : undefined,\n      ),\n    },\n  };\n\n  return {\n    gridItemProps: {\n      ref: itemRef,\n      onAction: toggleAccordion,\n    },\n    children: (\n      <PropsContextProvider\n        props={propsContext}\n        dependencies={[contentElementId, isExpanded]}\n      >\n        {children}\n      </PropsContextProvider>\n    ),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAAa;AAC5C,EAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAU,iBAAA,EAAkB,GAAI,KAAA;AAC9C,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,WAAW,IAAA,CAAK,QAAA;AACtB,EAAA,MAAM,WAAW,IAAA,CAAK,QAAA;AAEtB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,QAAA;AAAA,IAClC,QAAA,EAAU,eAAA,GAAkB,IAAI,CAAA,IAAK;AAAA,GACvC;AACA,EAAA,MAAM,mBAAmB,KAAA,EAAM;AAC/B,EAAA,MAAM,OAAA,GAAU,OAAuB,IAAI,CAAA;AAE3C,EAAA,MAAM,YAAY,IAAA,CAAK,SAAA;AACvB,EAAA,MAAM,QAAA,GAAW,iBAAA,IAAqB,QAAA,EAAU,MAAA,CAAO,IAAI,CAAA;AAE3D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAA,EAAW;AACb,MAAA,OAAA,CAAQ,OAAA,EAAS,YAAA,CAAa,eAAA,EAAiB,MAAA,CAAO,UAAU,CAAC,CAAA;AACjE,MAAA,OAAA,CAAQ,OAAA,EAAS,YAAA,CAAa,eAAA,EAAiB,gBAAgB,CAAA;AAAA,IACjE;AAAA,EACF,GAAG,CAAC,UAAA,EAAY,kBAAkB,OAAA,CAAQ,OAAA,EAAS,SAAS,CAAC,CAAA;AAE7D,EAAA,IAAI,CAAC,SAAA,EAAW;AACd,IAAA,OAAO;AAAA,MACL,aAAA,EAAe;AAAA,QACb,QAAA,EAAU,WACN,MAAM;AACJ,UAAA,QAAA,GAAW,IAAI,CAAA;AAAA,QACjB,CAAA,GACA;AAAA,OACN;AAAA,MACA;AAAA,KACF;AAAA,EACF;AAEA,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,aAAA,CAAc,CAAC,OAAA,KAAY,CAAC,OAAO,CAAA;AACnC,IAAA,QAAA,GAAW,IAAI,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,OAAA,EAAS;AAAA,MACP,EAAA,EAAI,QAAQ,CAAC,CAAA,KAAO,EAAE,IAAA,KAAS,QAAA,GAAW,mBAAmB,MAAU,CAAA;AAAA,MACvE,QAAA,EAAU,OAAA;AAAA,QAAQ,CAAC,CAAA,KACjB,CAAA,CAAE,IAAA,KAAS,QAAA,mBACT,GAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,gBAAA;AAAA,YACA,MAAA,EAAQ,eAAA;AAAA,YACR;AAAA;AAAA,SACF,GACE;AAAA;AACN;AACF,GACF;AAEA,EAAA,OAAO;AAAA,IACL,aAAA,EAAe;AAAA,MACb,GAAA,EAAK,OAAA;AAAA,MACL,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,QAAA,kBACE,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,YAAA;AAAA,QACP,YAAA,EAAc,CAAC,gBAAA,EAAkB,UAAU,CAAA;AAAA,QAE1C;AAAA;AAAA;AACH,GAEJ;AACF;;;;"}
+{"version":3,"file":"useGridItemProps.mjs","sources":["../../../../../../../../../../../../src/components/List/components/Items/components/Item/hooks/useGridItemProps.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { useList } from \"@/components/List\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { AccordionButton } from \"@/components/List/components/Items/components/Item/components/AccordionButton\";\n\ninterface P extends PropsWithChildren {\n  data: never;\n}\n\nexport const useGridItemProps = (props: P) => {\n  const { data, children: childrenFromProps } = props;\n  const list = useList();\n  const itemView = list.itemView;\n  const onAction = list.onAction;\n\n  const [isExpanded, setIsExpanded] = useState(\n    itemView?.defaultExpanded?.(data) ?? false,\n  );\n  const contentElementId = useId();\n  const itemRef = useRef<HTMLDivElement>(null);\n\n  const accordion = list.accordion;\n  const children = childrenFromProps ?? itemView?.render(data);\n\n  useEffect(() => {\n    if (accordion) {\n      itemRef.current?.setAttribute(\"aria-expanded\", String(isExpanded));\n      itemRef.current?.setAttribute(\"aria-controls\", contentElementId);\n    }\n  }, [isExpanded, contentElementId, itemRef.current, accordion]);\n\n  if (!accordion) {\n    return {\n      gridItemProps: {\n        onAction: onAction\n          ? () => {\n              onAction?.(data);\n            }\n          : undefined,\n      },\n      children,\n    };\n  }\n\n  const toggleAccordion = () => {\n    setIsExpanded((current) => !current);\n    onAction?.(data);\n  };\n\n  const propsContext: PropsContext = {\n    Content: {\n      id: dynamic((p) => (p.slot === \"bottom\" ? contentElementId : undefined)),\n      wrapWith: dynamic((p) =>\n        p.slot === \"bottom\" ? (\n          <AccordionButton\n            contentElementId={contentElementId}\n            toggle={toggleAccordion}\n            isExpanded={isExpanded}\n          />\n        ) : undefined,\n      ),\n    },\n  };\n\n  return {\n    gridItemProps: {\n      ref: itemRef,\n      onAction: toggleAccordion,\n    },\n    children: (\n      <PropsContextProvider\n        props={propsContext}\n        dependencies={[contentElementId, isExpanded]}\n      >\n        {children}\n      </PropsContextProvider>\n    ),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAAa;AAC5C,EAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAU,iBAAA,EAAkB,GAAI,KAAA;AAC9C,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,WAAW,IAAA,CAAK,QAAA;AACtB,EAAA,MAAM,WAAW,IAAA,CAAK,QAAA;AAEtB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,QAAA;AAAA,IAClC,QAAA,EAAU,eAAA,GAAkB,IAAI,CAAA,IAAK;AAAA,GACvC;AACA,EAAA,MAAM,mBAAmB,KAAA,EAAM;AAC/B,EAAA,MAAM,OAAA,GAAU,OAAuB,IAAI,CAAA;AAE3C,EAAA,MAAM,YAAY,IAAA,CAAK,SAAA;AACvB,EAAA,MAAM,QAAA,GAAW,iBAAA,IAAqB,QAAA,EAAU,MAAA,CAAO,IAAI,CAAA;AAE3D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAA,EAAW;AACb,MAAA,OAAA,CAAQ,OAAA,EAAS,YAAA,CAAa,eAAA,EAAiB,MAAA,CAAO,UAAU,CAAC,CAAA;AACjE,MAAA,OAAA,CAAQ,OAAA,EAAS,YAAA,CAAa,eAAA,EAAiB,gBAAgB,CAAA;AAAA,IACjE;AAAA,EACF,GAAG,CAAC,UAAA,EAAY,kBAAkB,OAAA,CAAQ,OAAA,EAAS,SAAS,CAAC,CAAA;AAE7D,EAAA,IAAI,CAAC,SAAA,EAAW;AACd,IAAA,OAAO;AAAA,MACL,aAAA,EAAe;AAAA,QACb,QAAA,EAAU,WACN,MAAM;AACJ,UAAA,QAAA,GAAW,IAAI,CAAA;AAAA,QACjB,CAAA,GACA;AAAA,OACN;AAAA,MACA;AAAA,KACF;AAAA,EACF;AAEA,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,aAAA,CAAc,CAAC,OAAA,KAAY,CAAC,OAAO,CAAA;AACnC,IAAA,QAAA,GAAW,IAAI,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,OAAA,EAAS;AAAA,MACP,EAAA,EAAI,QAAQ,CAAC,CAAA,KAAO,EAAE,IAAA,KAAS,QAAA,GAAW,mBAAmB,MAAU,CAAA;AAAA,MACvE,QAAA,EAAU,OAAA;AAAA,QAAQ,CAAC,CAAA,KACjB,CAAA,CAAE,IAAA,KAAS,QAAA,mBACT,GAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,gBAAA;AAAA,YACA,MAAA,EAAQ,eAAA;AAAA,YACR;AAAA;AAAA,SACF,GACE;AAAA;AACN;AACF,GACF;AAEA,EAAA,OAAO;AAAA,IACL,aAAA,EAAe;AAAA,MACb,GAAA,EAAK,OAAA;AAAA,MACL,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,QAAA,kBACE,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,YAAA;AAAA,QACP,YAAA,EAAc,CAAC,gBAAA,EAAkB,UAAU,CAAA;AAAA,QAE1C;AAAA;AAAA;AACH,GAEJ;AACF;;;;"}

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

@@ -18,6 +18,10 @@ import '../../../Icon/Icon.mjs';
 import '../../../../views/IconView.mjs';
 import '../../../Heading/Heading.mjs';
 import '../../../Text/Text.mjs';
+import '../../../TranslationProvider/TranslationProvider.mjs';
+import 'remeda';
+import 'intl-messageformat';
+import '@react-aria/i18n';
 import 'react-aria';
 import 'clsx';
 import '../../../ColumnLayout/ColumnLayout.mjs';