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

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

@@ -1,26 +1,34 @@
 "use client"
 /* */
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
-import { useLocalizedStringFormatter } from 'react-aria';
+import { useLocalizedStringFormatter } from '../TranslationProvider/useLocalizedStringFormatter.mjs';
 import locales from '../../../../../_virtual/_.locale.json@bcca9730cf4e50042f33f85088c4be64.mjs';
 import OptionView from '../../views/OptionView.mjs';
+import { all } from 'country-codes-list';
 
-const countryCodes = Object.keys(locales["de-DE"]).filter((key) => key.startsWith("countries.")).map((key) => key.replace("countries.", ""));
 const defaultSortBy = (left, right) => left.name.localeCompare(right.name);
-const voidSortBy = () => 0;
 const defaultFilterBy = () => true;
 const CountryOptions = (props) => {
-  const { filterBy = defaultFilterBy, sortBy = voidSortBy } = props;
-  const stringFormatter = useLocalizedStringFormatter(locales);
-  const countries = useMemo(
-    () => countryCodes.map((code) => ({
-      code,
-      name: stringFormatter.format(`countries.${code}`)
-    })).filter(filterBy).sort(defaultSortBy).sort(sortBy),
-    [stringFormatter, filterBy, sortBy]
+  const { filterBy = defaultFilterBy, sortBy = defaultSortBy } = props;
+  const stringFormatter = useLocalizedStringFormatter(
+    locales,
+    "CountryOptions"
   );
-  return /* @__PURE__ */ jsx(Fragment, { children: countries.map((country) => /* @__PURE__ */ jsx(OptionView, { value: country.code, children: country.name }, country.code)) });
+  return useMemo(() => {
+    return all().map((countryData) => ({
+      ...countryData,
+      code: countryData.countryCode,
+      name: stringFormatter.format(`countryCode.${countryData.countryCode}`)
+    })).filter(filterBy).sort(sortBy).map((country) => /* @__PURE__ */ jsx(
+      OptionView,
+      {
+        value: country.countryCode,
+        children: country.name
+      },
+      `${country.countryCode}-${country.countryNameEn}`
+    ));
+  }, [stringFormatter]);
 };
 
 export { CountryOptions };

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

@@ -1 +1 @@
-{"version":3,"file":"CountryOptions.mjs","sources":["../../../../../../../src/components/CountryOptions/CountryOptions.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { useMemo } from \"react\";\nimport type { ListBoxProps } from \"react-aria-components\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport locales from \"./locales/*.locale.json\";\nimport OptionView from \"@/views/OptionView\";\n\nexport interface Country {\n  code: string;\n  name: string;\n}\n\nexport type CountryFilterFn = (country: Country) => boolean;\nexport type CountrySortFn = (left: Country, right: Country) => number;\n\nexport interface CountryOptionsProps<T = object>\n  extends\n    PropsWithChildren<Omit<ListBoxProps<T>, \"children\">>,\n    FlowComponentProps {\n  filterBy?: CountryFilterFn;\n  sortBy?: CountrySortFn;\n}\n\nconst countryCodes = Object.keys(locales[\"de-DE\"])\n  .filter((key) => key.startsWith(\"countries.\"))\n  .map((key) => key.replace(\"countries.\", \"\"));\n\nconst defaultSortBy: CountrySortFn = (left, right) =>\n  left.name.localeCompare(right.name);\nconst voidSortBy: CountrySortFn = () => 0;\nconst defaultFilterBy: CountryFilterFn = () => true;\n\nexport const CountryOptions: FC<CountryOptionsProps> = (props) => {\n  const { filterBy = defaultFilterBy, sortBy = voidSortBy } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const countries = useMemo(\n    () =>\n      countryCodes\n        .map((code) => ({\n          code,\n          name: stringFormatter.format(`countries.${code}`),\n        }))\n        .filter(filterBy)\n        .sort(defaultSortBy)\n        .sort(sortBy),\n    [stringFormatter, filterBy, sortBy],\n  );\n\n  return (\n    <>\n      {countries.map((country) => (\n        <OptionView key={country.code} value={country.code}>\n          {country.name}\n        </OptionView>\n      ))}\n    </>\n  );\n};\n\nexport default CountryOptions;\n"],"names":[],"mappings":";;;;;;AAwBA,MAAM,YAAA,GAAe,OAAO,IAAA,CAAK,OAAA,CAAQ,OAAO,CAAC,CAAA,CAC9C,MAAA,CAAO,CAAC,GAAA,KAAQ,GAAA,CAAI,WAAW,YAAY,CAAC,EAC5C,GAAA,CAAI,CAAC,QAAQ,GAAA,CAAI,OAAA,CAAQ,YAAA,EAAc,EAAE,CAAC,CAAA;AAE7C,MAAM,aAAA,GAA+B,CAAC,IAAA,EAAM,KAAA,KAC1C,KAAK,IAAA,CAAK,aAAA,CAAc,MAAM,IAAI,CAAA;AACpC,MAAM,aAA4B,MAAM,CAAA;AACxC,MAAM,kBAAmC,MAAM,IAAA;AAExC,MAAM,cAAA,GAA0C,CAAC,KAAA,KAAU;AAChE,EAAA,MAAM,EAAE,QAAA,GAAW,eAAA,EAAiB,MAAA,GAAS,YAAW,GAAI,KAAA;AAE5D,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,SAAA,GAAY,OAAA;AAAA,IAChB,MACE,YAAA,CACG,GAAA,CAAI,CAAC,IAAA,MAAU;AAAA,MACd,IAAA;AAAA,MACA,IAAA,EAAM,eAAA,CAAgB,MAAA,CAAO,CAAA,UAAA,EAAa,IAAI,CAAA,CAAE;AAAA,KAClD,CAAE,EACD,MAAA,CAAO,QAAQ,EACf,IAAA,CAAK,aAAa,CAAA,CAClB,IAAA,CAAK,MAAM,CAAA;AAAA,IAChB,CAAC,eAAA,EAAiB,QAAA,EAAU,MAAM;AAAA,GACpC;AAEA,EAAA,uBACE,GAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA,SAAA,CAAU,GAAA,CAAI,CAAC,4BACd,GAAA,CAAC,UAAA,EAAA,EAA8B,KAAA,EAAO,OAAA,CAAQ,MAC3C,QAAA,EAAA,OAAA,CAAQ,IAAA,EAAA,EADM,OAAA,CAAQ,IAEzB,CACD,CAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CountryOptions.mjs","sources":["../../../../../../../src/components/CountryOptions/CountryOptions.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { useMemo } from \"react\";\nimport type { ListBoxProps } from \"react-aria-components\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport locales from \"./locales/*.locale.json\";\nimport OptionView from \"@/views/OptionView\";\nimport { all, type CountryData } from \"country-codes-list\";\n\nexport type Country = CountryData & {\n  name: string;\n  code: string;\n};\n\nexport type CountryFilterFn = (country: Country) => boolean;\nexport type CountrySortFn = (left: Country, right: Country) => number;\n\nexport interface CountryOptionsProps<T = object>\n  extends\n    PropsWithChildren<Omit<ListBoxProps<T>, \"children\">>,\n    FlowComponentProps {\n  filterBy?: CountryFilterFn;\n  sortBy?: CountrySortFn;\n}\n\nconst defaultSortBy: CountrySortFn = (left, right) =>\n  left.name.localeCompare(right.name);\nconst defaultFilterBy: CountryFilterFn = () => true;\n\nexport const CountryOptions: FC<CountryOptionsProps> = (props) => {\n  const { filterBy = defaultFilterBy, sortBy = defaultSortBy } = props;\n  const stringFormatter = useLocalizedStringFormatter(\n    locales,\n    \"CountryOptions\",\n  );\n\n  return useMemo(() => {\n    return all()\n      .map((countryData) => ({\n        ...countryData,\n        code: countryData.countryCode,\n        name: stringFormatter.format(`countryCode.${countryData.countryCode}`),\n      }))\n      .filter(filterBy)\n      .sort(sortBy)\n      .map((country) => (\n        <OptionView\n          key={`${country.countryCode}-${country.countryNameEn}`}\n          value={country.countryCode}\n        >\n          {country.name}\n        </OptionView>\n      ));\n  }, [stringFormatter]);\n};\n\nexport default CountryOptions;\n"],"names":[],"mappings":";;;;;;;AAyBA,MAAM,aAAA,GAA+B,CAAC,IAAA,EAAM,KAAA,KAC1C,KAAK,IAAA,CAAK,aAAA,CAAc,MAAM,IAAI,CAAA;AACpC,MAAM,kBAAmC,MAAM,IAAA;AAExC,MAAM,cAAA,GAA0C,CAAC,KAAA,KAAU;AAChE,EAAA,MAAM,EAAE,QAAA,GAAW,eAAA,EAAiB,MAAA,GAAS,eAAc,GAAI,KAAA;AAC/D,EAAA,MAAM,eAAA,GAAkB,2BAAA;AAAA,IACtB,OAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,OAAO,QAAQ,MAAM;AACnB,IAAA,OAAO,GAAA,EAAI,CACR,GAAA,CAAI,CAAC,WAAA,MAAiB;AAAA,MACrB,GAAG,WAAA;AAAA,MACH,MAAM,WAAA,CAAY,WAAA;AAAA,MAClB,MAAM,eAAA,CAAgB,MAAA,CAAO,CAAA,YAAA,EAAe,WAAA,CAAY,WAAW,CAAA,CAAE;AAAA,KACvE,CAAE,CAAA,CACD,MAAA,CAAO,QAAQ,CAAA,CACf,KAAK,MAAM,CAAA,CACX,GAAA,CAAI,CAAC,OAAA,qBACJ,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QAEC,OAAO,OAAA,CAAQ,WAAA;AAAA,QAEd,QAAA,EAAA,OAAA,CAAQ;AAAA,OAAA;AAAA,MAHJ,CAAA,EAAG,OAAA,CAAQ,WAAW,CAAA,CAAA,EAAI,QAAQ,aAAa,CAAA;AAAA,KAKvD,CAAA;AAAA,EACL,CAAA,EAAG,CAAC,eAAe,CAAC,CAAA;AACtB;;;;"}

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

@@ -10,16 +10,16 @@ import '../../../Icon/Icon.mjs';
 import '../../../../views/IconView.mjs';
 import { IconClose } from '../../../Icon/components/icons/IconClose.mjs';
 import locales from '../../../../../../../_virtual/_.locale.json@c33938a00f4bfb40e033ada6b54e38f9.mjs';
-import { useLocalizedStringFormatter } from 'react-aria';
+import { useLocalizedStringFormatter } from '../../../TranslationProvider/useLocalizedStringFormatter.mjs';
 
 const DeleteButton = (props) => {
   const { onDelete } = props;
-  const stringFormatter = useLocalizedStringFormatter(locales);
+  const stringFormatter = useLocalizedStringFormatter(locales, "FileCard");
   return /* @__PURE__ */ jsx(
     Button,
     {
       className: styles.deleteButton,
-      "aria-label": stringFormatter.format(`fileCard.delete`),
+      "aria-label": stringFormatter.format(`delete`),
       variant: "plain",
       color: "secondary",
       onPress: onDelete,

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 \"react-aria\";\n\ninterface Props {\n  onDelete: () => void;\n}\n\nexport const DeleteButton: FC<Props> = (props) => {\n  const { onDelete } = props;\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  return (\n    <Button\n      className={styles.deleteButton}\n      aria-label={stringFormatter.format(`fileCard.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,4BAA4B,OAAO,CAAA;AAE3D,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAA,CAAO,YAAA;AAAA,MAClB,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,CAAA,eAAA,CAAiB,CAAA;AAAA,MACpD,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 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;;;;"}

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

@@ -7,7 +7,7 @@ import clsx from 'clsx';
 import styles from './ImageCropper.module.scss.mjs';
 import { Slider } from '../Slider/Slider.mjs';
 import { getCroppedImageFile } from './lib/getCroppedImageFile.mjs';
-import { useLocalizedStringFormatter } from 'react-aria';
+import { useLocalizedStringFormatter } from '../TranslationProvider/useLocalizedStringFormatter.mjs';
 import locales from '../../../../../_virtual/_.locale.json@849e6f494125ee27df10a461562fa893.mjs';
 import { useImageSrc } from '../../lib/hooks/useImageSrc.mjs';
 
@@ -26,7 +26,7 @@ const ImageCropper = (props) => {
   const [zoom, setZoom] = useState(1);
   const [croppedAreaPixels, setCroppedAreaPixels] = useState();
   const rootClassName = clsx(styles.imageCropper, className);
-  const stringFormatter = useLocalizedStringFormatter(locales);
+  const stringFormatter = useLocalizedStringFormatter(locales, "ImageCropper");
   const onCropAreaPixelsChange = useEffectEvent(async () => {
     if (croppedAreaPixels) {
       const croppedImageFile = await getCroppedImageFile(

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

@@ -1 +1 @@
-{"version":3,"file":"ImageCropper.mjs","sources":["../../../../../../../src/components/ImageCropper/ImageCropper.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type FC,\n  useEffect,\n  useEffectEvent,\n  useState,\n} from \"react\";\nimport Cropper, { type Area, type CropperProps } from \"react-easy-crop\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./ImageCropper.module.scss\";\nimport { Slider } from \"@/components/Slider\";\nimport { getCroppedImageFile } from \"@/components/ImageCropper/lib/getCroppedImageFile\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\nimport { useImageSrc } from \"@/lib/hooks/useImageSrc\";\n\nexport interface ImageCropperProps\n  extends PropsWithClassName, Partial<Pick<CropperProps, \"cropShape\">> {\n  /** The image file to crop. */\n  image?: File | string;\n  /** Callback on crop complete. */\n  onCropComplete?: (croppedImage: File) => void;\n  /** The width of the component. @default 300 */\n  width?: CSSProperties[\"width\"];\n  /** The height of the component. @default 300 */\n  height?: CSSProperties[\"height\"];\n  /** The aspect ratio of the crop shape. */\n  aspectRatio?: number;\n}\n\n/** @flr-generate all */\nexport const ImageCropper: FC<ImageCropperProps> = (props) => {\n  const {\n    image,\n    className,\n    onCropComplete,\n    width = 300,\n    height = 300,\n    aspectRatio,\n    ...rest\n  } = props;\n\n  const imageSrc = useImageSrc(image);\n\n  const [crop, setCrop] = useState({ x: 0, y: 0 });\n  const [zoom, setZoom] = useState(1);\n  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area>();\n\n  const rootClassName = clsx(styles.imageCropper, className);\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const onCropAreaPixelsChange = useEffectEvent(async () => {\n    if (croppedAreaPixels) {\n      const croppedImageFile = await getCroppedImageFile(\n        imageSrc,\n        croppedAreaPixels,\n      );\n      if (onCropComplete) {\n        onCropComplete(croppedImageFile);\n      }\n    }\n  });\n\n  useEffect(() => {\n    void onCropAreaPixelsChange();\n  }, [croppedAreaPixels]);\n\n  return (\n    <div className={rootClassName} style={{ width }}>\n      <div className={styles.cropperContainer} style={{ height }}>\n        <Cropper\n          aspect={aspectRatio}\n          crop={crop}\n          image={imageSrc}\n          onCropChange={setCrop}\n          zoom={zoom}\n          onZoomChange={setZoom}\n          onCropComplete={(_, croppedAreaPixels) =>\n            setCroppedAreaPixels(croppedAreaPixels)\n          }\n          {...rest}\n        />\n      </div>\n      <Slider\n        minValue={1}\n        maxValue={3}\n        step={0.01}\n        value={zoom}\n        sliderOnly\n        onChange={(zoom) => setZoom(zoom as number)}\n        aria-label={stringFormatter.format(\"zoom\")}\n      />\n    </div>\n  );\n};\n\nexport default ImageCropper;\n"],"names":["croppedAreaPixels","zoom"],"mappings":";;;;;;;;;;;AAgCO,MAAM,YAAA,GAAsC,CAAC,KAAA,KAAU;AAC5D,EAAA,MAAM;AAAA,IACJ,KAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAA;AAAA,IACA,KAAA,GAAQ,GAAA;AAAA,IACR,MAAA,GAAS,GAAA;AAAA,IACT,WAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,QAAA,GAAW,YAAY,KAAK,CAAA;AAElC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,QAAA,CAAS,EAAE,CAAA,EAAG,CAAA,EAAG,CAAA,EAAG,CAAA,EAAG,CAAA;AAC/C,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,CAAC,CAAA;AAClC,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,QAAA,EAAe;AAEjE,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,YAAA,EAAc,SAAS,CAAA;AAEzD,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,sBAAA,GAAyB,eAAe,YAAY;AACxD,IAAA,IAAI,iBAAA,EAAmB;AACrB,MAAA,MAAM,mBAAmB,MAAM,mBAAA;AAAA,QAC7B,QAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,IAAI,cAAA,EAAgB;AAClB,QAAA,cAAA,CAAe,gBAAgB,CAAA;AAAA,MACjC;AAAA,IACF;AAAA,EACF,CAAC,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,KAAK,sBAAA,EAAuB;AAAA,EAC9B,CAAA,EAAG,CAAC,iBAAiB,CAAC,CAAA;AAEtB,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,eAAe,KAAA,EAAO,EAAE,OAAM,EAC5C,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAI,SAAA,EAAW,MAAA,CAAO,kBAAkB,KAAA,EAAO,EAAE,QAAO,EACvD,QAAA,kBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,MAAA,EAAQ,WAAA;AAAA,QACR,IAAA;AAAA,QACA,KAAA,EAAO,QAAA;AAAA,QACP,YAAA,EAAc,OAAA;AAAA,QACd,IAAA;AAAA,QACA,YAAA,EAAc,OAAA;AAAA,QACd,cAAA,EAAgB,CAAC,CAAA,EAAGA,kBAAAA,KAClB,qBAAqBA,kBAAiB,CAAA;AAAA,QAEvC,GAAG;AAAA;AAAA,KACN,EACF,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAU,CAAA;AAAA,QACV,QAAA,EAAU,CAAA;AAAA,QACV,IAAA,EAAM,IAAA;AAAA,QACN,KAAA,EAAO,IAAA;AAAA,QACP,UAAA,EAAU,IAAA;AAAA,QACV,QAAA,EAAU,CAACC,KAAAA,KAAS,OAAA,CAAQA,KAAc,CAAA;AAAA,QAC1C,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,MAAM;AAAA;AAAA;AAC3C,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ImageCropper.mjs","sources":["../../../../../../../src/components/ImageCropper/ImageCropper.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type FC,\n  useEffect,\n  useEffectEvent,\n  useState,\n} from \"react\";\nimport Cropper, { type Area, type CropperProps } from \"react-easy-crop\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./ImageCropper.module.scss\";\nimport { Slider } from \"@/components/Slider\";\nimport { getCroppedImageFile } from \"@/components/ImageCropper/lib/getCroppedImageFile\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport { useImageSrc } from \"@/lib/hooks/useImageSrc\";\n\nexport interface ImageCropperProps\n  extends PropsWithClassName, Partial<Pick<CropperProps, \"cropShape\">> {\n  /** The image file to crop. */\n  image?: File | string;\n  /** Callback on crop complete. */\n  onCropComplete?: (croppedImage: File) => void;\n  /** The width of the component. @default 300 */\n  width?: CSSProperties[\"width\"];\n  /** The height of the component. @default 300 */\n  height?: CSSProperties[\"height\"];\n  /** The aspect ratio of the crop shape. */\n  aspectRatio?: number;\n}\n\n/** @flr-generate all */\nexport const ImageCropper: FC<ImageCropperProps> = (props) => {\n  const {\n    image,\n    className,\n    onCropComplete,\n    width = 300,\n    height = 300,\n    aspectRatio,\n    ...rest\n  } = props;\n\n  const imageSrc = useImageSrc(image);\n\n  const [crop, setCrop] = useState({ x: 0, y: 0 });\n  const [zoom, setZoom] = useState(1);\n  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area>();\n\n  const rootClassName = clsx(styles.imageCropper, className);\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"ImageCropper\");\n\n  const onCropAreaPixelsChange = useEffectEvent(async () => {\n    if (croppedAreaPixels) {\n      const croppedImageFile = await getCroppedImageFile(\n        imageSrc,\n        croppedAreaPixels,\n      );\n      if (onCropComplete) {\n        onCropComplete(croppedImageFile);\n      }\n    }\n  });\n\n  useEffect(() => {\n    void onCropAreaPixelsChange();\n  }, [croppedAreaPixels]);\n\n  return (\n    <div className={rootClassName} style={{ width }}>\n      <div className={styles.cropperContainer} style={{ height }}>\n        <Cropper\n          aspect={aspectRatio}\n          crop={crop}\n          image={imageSrc}\n          onCropChange={setCrop}\n          zoom={zoom}\n          onZoomChange={setZoom}\n          onCropComplete={(_, croppedAreaPixels) =>\n            setCroppedAreaPixels(croppedAreaPixels)\n          }\n          {...rest}\n        />\n      </div>\n      <Slider\n        minValue={1}\n        maxValue={3}\n        step={0.01}\n        value={zoom}\n        sliderOnly\n        onChange={(zoom) => setZoom(zoom as number)}\n        aria-label={stringFormatter.format(\"zoom\")}\n      />\n    </div>\n  );\n};\n\nexport default ImageCropper;\n"],"names":["croppedAreaPixels","zoom"],"mappings":";;;;;;;;;;;AAgCO,MAAM,YAAA,GAAsC,CAAC,KAAA,KAAU;AAC5D,EAAA,MAAM;AAAA,IACJ,KAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAA;AAAA,IACA,KAAA,GAAQ,GAAA;AAAA,IACR,MAAA,GAAS,GAAA;AAAA,IACT,WAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,QAAA,GAAW,YAAY,KAAK,CAAA;AAElC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,QAAA,CAAS,EAAE,CAAA,EAAG,CAAA,EAAG,CAAA,EAAG,CAAA,EAAG,CAAA;AAC/C,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,CAAC,CAAA;AAClC,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,QAAA,EAAe;AAEjE,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,YAAA,EAAc,SAAS,CAAA;AAEzD,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,cAAc,CAAA;AAE3E,EAAA,MAAM,sBAAA,GAAyB,eAAe,YAAY;AACxD,IAAA,IAAI,iBAAA,EAAmB;AACrB,MAAA,MAAM,mBAAmB,MAAM,mBAAA;AAAA,QAC7B,QAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,IAAI,cAAA,EAAgB;AAClB,QAAA,cAAA,CAAe,gBAAgB,CAAA;AAAA,MACjC;AAAA,IACF;AAAA,EACF,CAAC,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,KAAK,sBAAA,EAAuB;AAAA,EAC9B,CAAA,EAAG,CAAC,iBAAiB,CAAC,CAAA;AAEtB,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,eAAe,KAAA,EAAO,EAAE,OAAM,EAC5C,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAI,SAAA,EAAW,MAAA,CAAO,kBAAkB,KAAA,EAAO,EAAE,QAAO,EACvD,QAAA,kBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,MAAA,EAAQ,WAAA;AAAA,QACR,IAAA;AAAA,QACA,KAAA,EAAO,QAAA;AAAA,QACP,YAAA,EAAc,OAAA;AAAA,QACd,IAAA;AAAA,QACA,YAAA,EAAc,OAAA;AAAA,QACd,cAAA,EAAgB,CAAC,CAAA,EAAGA,kBAAAA,KAClB,qBAAqBA,kBAAiB,CAAA;AAAA,QAEvC,GAAG;AAAA;AAAA,KACN,EACF,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAU,CAAA;AAAA,QACV,QAAA,EAAU,CAAA;AAAA,QACV,IAAA,EAAM,IAAA;AAAA,QACN,KAAA,EAAO,IAAA;AAAA,QACP,UAAA,EAAU,IAAA;AAAA,QACV,QAAA,EAAU,CAACC,KAAAA,KAAS,OAAA,CAAQA,KAAc,CAAA;AAAA,QAC1C,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,MAAM;AAAA;AAAA;AAC3C,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useLocalizedStringFormatter } from 'react-aria';
+import { useLocalizedStringFormatter } from '../TranslationProvider/useLocalizedStringFormatter.mjs';
 import locales from '../../../../../_virtual/_.locale.json@df7be47291f95407e99e7159090958cc.mjs';
 import clsx from 'clsx';
 import styles from './Kbd.module.scss.mjs';
@@ -24,14 +24,14 @@ const Kbd = flowComponent("Kbd", (props) => {
     className,
     styles[variant]
   );
-  const stringFormatter = useLocalizedStringFormatter(locales);
+  const stringFormatter = useLocalizedStringFormatter(locales, "Kbd");
   const joinedKeys = keys?.map((key, index) => {
     let formattedKey = key;
     if (key === "mod") {
-      formattedKey = isAppleDevice() ? "⌘" : stringFormatter.format("kbd.mod");
+      formattedKey = isAppleDevice() ? "⌘" : stringFormatter.format("mod");
     }
     if (key === "alt") {
-      formattedKey = isAppleDevice() ? "⌥" : stringFormatter.format("kbd.alt");
+      formattedKey = isAppleDevice() ? "⌥" : stringFormatter.format("alt");
     }
     if (key === "shift") {
       formattedKey = "⇧";

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 \"react-aria\";\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);\n\n  const joinedKeys = keys?.map((key, index) => {\n    let formattedKey = key;\n\n    if (key === \"mod\") {\n      formattedKey = isAppleDevice() ? \"⌘\" : stringFormatter.format(\"kbd.mod\");\n    }\n\n    if (key === \"alt\") {\n      formattedKey = isAppleDevice() ? \"⌥\" : stringFormatter.format(\"kbd.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,4BAA4B,OAAO,CAAA;AAE3D,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,SAAS,CAAA;AAAA,IACzE;AAEA,IAAA,IAAI,QAAQ,KAAA,EAAO;AACjB,MAAA,YAAA,GAAe,aAAA,EAAc,GAAI,GAAA,GAAM,eAAA,CAAgB,OAAO,SAAS,CAAA;AAAA,IACzE;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    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;;;;"}

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

@@ -7,7 +7,7 @@ import * as Aria from 'react-aria-components';
 import clsx from 'clsx';
 import '../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
-import { useLocalizedStringFormatter } from 'react-aria';
+import { useLocalizedStringFormatter } from '../TranslationProvider/useLocalizedStringFormatter.mjs';
 import locales from '../../../../../_virtual/_.locale.json@3b9d9e153ad753f427f375d1275fbcad.mjs';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
@@ -22,9 +22,9 @@ const Label = flowComponent("Label", (props) => {
     unstyled = false,
     ...rest
   } = props;
-  const stringFormatter = useLocalizedStringFormatter(locales);
+  const stringFormatter = useLocalizedStringFormatter(locales, "Label");
   const rootClassName = unstyled ? className : clsx(labelStyles.label, isDisabled && labelStyles.disabled, className);
-  const optionalMarker = /* @__PURE__ */ jsx("span", { className: labelStyles.optional, children: stringFormatter.format("label.optional") });
+  const optionalMarker = /* @__PURE__ */ jsx("span", { className: labelStyles.optional, children: stringFormatter.format("optional") });
   const propsContext = {
     ContextualHelpTrigger: {
       tunnelId: "contextualHelp",

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

@@ -1 +1 @@
-{"version":3,"file":"Label.mjs","sources":["../../../../../../../src/components/Label/Label.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Label.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\n\nexport interface LabelProps\n  extends\n    PropsWithChildren<Omit<Aria.LabelProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {\n  /** Whether the label should show an \"optional\" indicator. */\n  optional?: boolean;\n  /** Whether the label should be displayed as disabled. */\n  isDisabled?: boolean;\n  /* @internal */\n  unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Label = flowComponent(\"Label\", (props) => {\n  const {\n    children,\n    className,\n    optional,\n    isDisabled,\n    ref,\n    unstyled = false,\n    ...rest\n  } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(styles.label, isDisabled && styles.disabled, className);\n\n  const optionalMarker = (\n    <span className={styles.optional}>\n      {stringFormatter.format(\"label.optional\")}\n    </span>\n  );\n\n  const propsContext: PropsContext = {\n    ContextualHelpTrigger: {\n      tunnelId: \"contextualHelp\",\n      Button: {\n        tunnelId: null,\n      },\n    },\n    Button: {\n      tunnelId: \"right\",\n      size: \"s\",\n    },\n    Action: {\n      tunnelId: \"right\",\n      Button: {\n        tunnelId: null,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <TunnelProvider>\n        <Aria.Label {...rest} className={rootClassName} ref={ref}>\n          {children}\n          {optional && optionalMarker}\n          <TunnelExit id=\"contextualHelp\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return children;\n              }\n\n              return undefined;\n            }}\n          </TunnelExit>\n          <TunnelExit id=\"right\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return <div className={styles.right}>{children}</div>;\n              }\n\n              return undefined;\n            }}\n          </TunnelExit>\n        </Aria.Label>\n      </TunnelProvider>\n    </PropsContextProvider>\n  );\n});\n\nexport default Label;\n"],"names":["styles","children"],"mappings":";;;;;;;;;;;;AAyBO,MAAM,KAAA,GAAQ,aAAA,CAAc,OAAA,EAAS,CAAC,KAAA,KAAU;AACrD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,aAAA,GAAgB,WAClB,SAAA,GACA,IAAA,CAAKA,YAAO,KAAA,EAAO,UAAA,IAAcA,WAAA,CAAO,QAAA,EAAU,SAAS,CAAA;AAE/D,EAAA,MAAM,cAAA,uBACH,MAAA,EAAA,EAAK,SAAA,EAAWA,YAAO,QAAA,EACrB,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,gBAAgB,CAAA,EAC1C,CAAA;AAGF,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,qBAAA,EAAuB;AAAA,MACrB,QAAA,EAAU,gBAAA;AAAA,MACV,MAAA,EAAQ;AAAA,QACN,QAAA,EAAU;AAAA;AACZ,KACF;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,QAAA,EAAU,OAAA;AAAA,MACV,IAAA,EAAM;AAAA,KACR;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,QAAA,EAAU,OAAA;AAAA,MACV,MAAA,EAAQ;AAAA,QACN,QAAA,EAAU;AAAA;AACZ;AACF,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,8BAAC,cAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,IAAA,CAAK,KAAA,EAAL,EAAY,GAAG,IAAA,EAAM,SAAA,EAAW,eAAe,GAAA,EAC7C,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,QAAA,IAAY,cAAA;AAAA,oBACb,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,gBAAA,EACZ,WAACC,SAAAA,KAAa;AACb,MAAA,IAAI,KAAA,CAAM,QAAA,CAAS,KAAA,CAAMA,SAAQ,KAAK,CAAA,EAAG;AACvC,QAAA,OAAOA,SAAAA;AAAA,MACT;AAEA,MAAA,OAAO,MAAA;AAAA,IACT,CAAA,EACF,CAAA;AAAA,oBACA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,OAAA,EACZ,WAACA,SAAAA,KAAa;AACb,MAAA,IAAI,KAAA,CAAM,QAAA,CAAS,KAAA,CAAMA,SAAQ,KAAK,CAAA,EAAG;AACvC,QAAA,2BAAQ,KAAA,EAAA,EAAI,SAAA,EAAWD,WAAA,CAAO,KAAA,EAAQ,UAAAC,SAAAA,EAAS,CAAA;AAAA,MACjD;AAEA,MAAA,OAAO,MAAA;AAAA,IACT,CAAA,EACF;AAAA,GAAA,EACF,GACF,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Label.mjs","sources":["../../../../../../../src/components/Label/Label.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Label.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\n\nexport interface LabelProps\n  extends\n    PropsWithChildren<Omit<Aria.LabelProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {\n  /** Whether the label should show an \"optional\" indicator. */\n  optional?: boolean;\n  /** Whether the label should be displayed as disabled. */\n  isDisabled?: boolean;\n  /* @internal */\n  unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Label = flowComponent(\"Label\", (props) => {\n  const {\n    children,\n    className,\n    optional,\n    isDisabled,\n    ref,\n    unstyled = false,\n    ...rest\n  } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Label\");\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(styles.label, isDisabled && styles.disabled, className);\n\n  const optionalMarker = (\n    <span className={styles.optional}>\n      {stringFormatter.format(\"optional\")}\n    </span>\n  );\n\n  const propsContext: PropsContext = {\n    ContextualHelpTrigger: {\n      tunnelId: \"contextualHelp\",\n      Button: {\n        tunnelId: null,\n      },\n    },\n    Button: {\n      tunnelId: \"right\",\n      size: \"s\",\n    },\n    Action: {\n      tunnelId: \"right\",\n      Button: {\n        tunnelId: null,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <TunnelProvider>\n        <Aria.Label {...rest} className={rootClassName} ref={ref}>\n          {children}\n          {optional && optionalMarker}\n          <TunnelExit id=\"contextualHelp\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return children;\n              }\n\n              return undefined;\n            }}\n          </TunnelExit>\n          <TunnelExit id=\"right\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return <div className={styles.right}>{children}</div>;\n              }\n\n              return undefined;\n            }}\n          </TunnelExit>\n        </Aria.Label>\n      </TunnelProvider>\n    </PropsContextProvider>\n  );\n});\n\nexport default Label;\n"],"names":["styles","children"],"mappings":";;;;;;;;;;;;AAyBO,MAAM,KAAA,GAAQ,aAAA,CAAc,OAAA,EAAS,CAAC,KAAA,KAAU;AACrD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,OAAO,CAAA;AAEpE,EAAA,MAAM,aAAA,GAAgB,WAClB,SAAA,GACA,IAAA,CAAKA,YAAO,KAAA,EAAO,UAAA,IAAcA,WAAA,CAAO,QAAA,EAAU,SAAS,CAAA;AAE/D,EAAA,MAAM,cAAA,uBACH,MAAA,EAAA,EAAK,SAAA,EAAWA,YAAO,QAAA,EACrB,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,UAAU,CAAA,EACpC,CAAA;AAGF,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,qBAAA,EAAuB;AAAA,MACrB,QAAA,EAAU,gBAAA;AAAA,MACV,MAAA,EAAQ;AAAA,QACN,QAAA,EAAU;AAAA;AACZ,KACF;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,QAAA,EAAU,OAAA;AAAA,MACV,IAAA,EAAM;AAAA,KACR;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,QAAA,EAAU,OAAA;AAAA,MACV,MAAA,EAAQ;AAAA,QACN,QAAA,EAAU;AAAA;AACZ;AACF,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,8BAAC,cAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,IAAA,CAAK,KAAA,EAAL,EAAY,GAAG,IAAA,EAAM,SAAA,EAAW,eAAe,GAAA,EAC7C,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,QAAA,IAAY,cAAA;AAAA,oBACb,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,gBAAA,EACZ,WAACC,SAAAA,KAAa;AACb,MAAA,IAAI,KAAA,CAAM,QAAA,CAAS,KAAA,CAAMA,SAAQ,KAAK,CAAA,EAAG;AACvC,QAAA,OAAOA,SAAAA;AAAA,MACT;AAEA,MAAA,OAAO,MAAA;AAAA,IACT,CAAA,EACF,CAAA;AAAA,oBACA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,OAAA,EACZ,WAACA,SAAAA,KAAa;AACb,MAAA,IAAI,KAAA,CAAM,QAAA,CAAS,KAAA,CAAMA,SAAQ,KAAK,CAAA,EAAG;AACvC,QAAA,2BAAQ,KAAA,EAAA,EAAI,SAAA,EAAWD,WAAA,CAAO,KAAA,EAAQ,UAAAC,SAAAA,EAAS,CAAA;AAAA,MACjD;AAEA,MAAA,OAAO,MAAA;AAAA,IACT,CAAA,EACF;AAAA,GAAA,EACF,GACF,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

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

@@ -9,12 +9,12 @@ import '../../../../views/IconView.mjs';
 import { IconDownload } from '../../../Icon/components/icons/IconDownload.mjs';
 import { IconExternalLink } from '../../../Icon/components/icons/IconExternalLink.mjs';
 import locales from '../../../../../../../_virtual/_.locale.json@d7a4ca29c343fa700bb5aa84d322958b.mjs';
-import { useLocalizedStringFormatter } from 'react-aria';
+import { useLocalizedStringFormatter } from '../../../TranslationProvider/useLocalizedStringFormatter.mjs';
 import styles from '../../Link.module.scss.mjs';
 
 const LinkIcon = (props) => {
   const { unstyled, target, download } = props;
-  const stringFormatter = useLocalizedStringFormatter(locales);
+  const stringFormatter = useLocalizedStringFormatter(locales, "Link");
   if (unstyled) {
     return null;
   }
@@ -23,7 +23,7 @@ const LinkIcon = (props) => {
       IconDownload,
       {
         className: styles.linkIcon,
-        "aria-label": stringFormatter.format("link.download")
+        "aria-label": stringFormatter.format("download")
       }
     );
   }
@@ -32,7 +32,7 @@ const LinkIcon = (props) => {
       IconExternalLink,
       {
         className: styles.linkIcon,
-        "aria-label": stringFormatter.format("link.external")
+        "aria-label": stringFormatter.format("external")
       }
     );
   }

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 \"react-aria\";\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);\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(\"link.download\")}\n      />\n    );\n  }\n\n  if (target === \"_blank\") {\n    return (\n      <IconExternalLink\n        className={styles.linkIcon}\n        aria-label={stringFormatter.format(\"link.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,4BAA4B,OAAO,CAAA;AAE3D,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,eAAe;AAAA;AAAA,KACpD;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,eAAe;AAAA;AAAA,KACpD;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 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;;;;"}

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

@@ -4,11 +4,11 @@ import { jsx } from 'react/jsx-runtime';
 import { useList } from '../../../../hooks/useList.mjs';
 import SkeletonView from '../../../../../../views/SkeletonView.mjs';
 import TextView from '../../../../../../views/TextView.mjs';
-import { useLocalizedStringFormatter } from 'react-aria';
+import { useLocalizedStringFormatter } from '../../../../../TranslationProvider/useLocalizedStringFormatter.mjs';
 import locales from '../../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
 
 const PaginationInfos = (props) => {
-  const stringFormatter = useLocalizedStringFormatter(locales);
+  const stringFormatter = useLocalizedStringFormatter(locales, "List");
   const list = useList();
   const pagination = list.batches;
   const isInitiallyLoading = list.loader.useIsInitiallyLoading();
@@ -18,7 +18,7 @@ const PaginationInfos = (props) => {
   if (isEmpty) {
     return null;
   }
-  const text = isInitiallyLoading ? /* @__PURE__ */ jsx(SkeletonView, { width: "200px" }) : stringFormatter.format("list.paginationInfo", {
+  const text = isInitiallyLoading ? /* @__PURE__ */ jsx(SkeletonView, { width: "200px" }) : stringFormatter.format("paginationInfo", {
     visibleItemsCount,
     totalItemsCount
   });

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

@@ -1 +1 @@
-{"version":3,"file":"PaginationInfos.mjs","sources":["../../../../../../../../../../../src/components/List/components/Footer/components/PaginationInfos/PaginationInfos.tsx"],"sourcesContent":["import { useList } from \"@/components/List/hooks/useList\";\nimport type { TextProps } from \"@/components/Text\";\nimport SkeletonView from \"@/views/SkeletonView\";\nimport TextView from \"@/views/TextView\";\nimport type { FC } from \"react\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../../../locales/*.locale.json\";\n\nexport const PaginationInfos: FC<TextProps> = (props) => {\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const list = useList();\n  const pagination = list.batches;\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const isEmpty = list.useIsEmpty();\n\n  const totalItemsCount = pagination.getTotalItemsCount();\n  const visibleItemsCount = pagination.getVisibleItemsCount();\n\n  if (isEmpty) {\n    return null;\n  }\n\n  const text = isInitiallyLoading ? (\n    <SkeletonView width=\"200px\" />\n  ) : (\n    stringFormatter.format(\"list.paginationInfo\", {\n      visibleItemsCount,\n      totalItemsCount,\n    })\n  );\n\n  return <TextView {...props}>{text}</TextView>;\n};\n\nexport default PaginationInfos;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,eAAA,GAAiC,CAAC,KAAA,KAAU;AACvD,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,aAAa,IAAA,CAAK,OAAA;AACxB,EAAA,MAAM,kBAAA,GAAqB,IAAA,CAAK,MAAA,CAAO,qBAAA,EAAsB;AAC7D,EAAA,MAAM,OAAA,GAAU,KAAK,UAAA,EAAW;AAEhC,EAAA,MAAM,eAAA,GAAkB,WAAW,kBAAA,EAAmB;AACtD,EAAA,MAAM,iBAAA,GAAoB,WAAW,oBAAA,EAAqB;AAE1D,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,IAAA,GAAO,qCACX,GAAA,CAAC,YAAA,EAAA,EAAa,OAAM,OAAA,EAAQ,CAAA,GAE5B,eAAA,CAAgB,MAAA,CAAO,qBAAA,EAAuB;AAAA,IAC5C,iBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAGH,EAAA,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAU,GAAG,KAAA,EAAQ,QAAA,EAAA,IAAA,EAAK,CAAA;AACpC;;;;"}
+{"version":3,"file":"PaginationInfos.mjs","sources":["../../../../../../../../../../../src/components/List/components/Footer/components/PaginationInfos/PaginationInfos.tsx"],"sourcesContent":["import { useList } from \"@/components/List/hooks/useList\";\nimport type { TextProps } from \"@/components/Text\";\nimport SkeletonView from \"@/views/SkeletonView\";\nimport TextView from \"@/views/TextView\";\nimport type { FC } from \"react\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\n\nexport const PaginationInfos: FC<TextProps> = (props) => {\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  const list = useList();\n  const pagination = list.batches;\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const isEmpty = list.useIsEmpty();\n\n  const totalItemsCount = pagination.getTotalItemsCount();\n  const visibleItemsCount = pagination.getVisibleItemsCount();\n\n  if (isEmpty) {\n    return null;\n  }\n\n  const text = isInitiallyLoading ? (\n    <SkeletonView width=\"200px\" />\n  ) : (\n    stringFormatter.format(\"paginationInfo\", {\n      visibleItemsCount,\n      totalItemsCount,\n    })\n  );\n\n  return <TextView {...props}>{text}</TextView>;\n};\n\nexport default PaginationInfos;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,eAAA,GAAiC,CAAC,KAAA,KAAU;AACvD,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AAEnE,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,aAAa,IAAA,CAAK,OAAA;AACxB,EAAA,MAAM,kBAAA,GAAqB,IAAA,CAAK,MAAA,CAAO,qBAAA,EAAsB;AAC7D,EAAA,MAAM,OAAA,GAAU,KAAK,UAAA,EAAW;AAEhC,EAAA,MAAM,eAAA,GAAkB,WAAW,kBAAA,EAAmB;AACtD,EAAA,MAAM,iBAAA,GAAoB,WAAW,oBAAA,EAAqB;AAE1D,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,IAAA,GAAO,qCACX,GAAA,CAAC,YAAA,EAAA,EAAa,OAAM,OAAA,EAAQ,CAAA,GAE5B,eAAA,CAAgB,MAAA,CAAO,gBAAA,EAAkB;AAAA,IACvC,iBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAGH,EAAA,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAU,GAAG,KAAA,EAAQ,QAAA,EAAA,IAAA,EAAK,CAAA;AACpC;;;;"}

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

@@ -4,11 +4,11 @@ import { jsx } from 'react/jsx-runtime';
 import 'react';
 import { useList } from '../../../../hooks/useList.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';
 
 const ShowNextBatchButton = (props) => {
-  const stringFormatter = useLocalizedStringFormatter(locales);
+  const stringFormatter = useLocalizedStringFormatter(locales, "List");
   const list = useList();
   const isLoading = list.loader.useIsLoading();
   const isInitiallyLoading = list.loader.useIsInitiallyLoading();
@@ -26,7 +26,7 @@ const ShowNextBatchButton = (props) => {
       onPress: () => list.batches.nextBatch(),
       variant: "plain",
       size: "s",
-      children: stringFormatter.format("list.showMore")
+      children: stringFormatter.format("showMore")
     }
   );
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ShowNextBatchButton.mjs","sources":["../../../../../../../../../../../src/components/List/components/Footer/components/ShowNextBatchButton/ShowNextBatchButton.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport type { ButtonProps } from \"@/components/Button\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport ButtonView from \"@/views/ButtonView\";\n\nexport const ShowNextBatchButton: FC<ButtonProps> = (props) => {\n  const stringFormatter = useLocalizedStringFormatter(locales);\n  const list = useList();\n  const isLoading = list.loader.useIsLoading();\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const pagination = list.batches;\n  const canLoadMore = pagination.hasNextBatch();\n\n  if (!canLoadMore && !isLoading) {\n    return null;\n  }\n\n  return (\n    <ButtonView\n      isPending={isLoading && !isInitiallyLoading}\n      isDisabled={isInitiallyLoading}\n      {...props}\n      onPress={() => list.batches.nextBatch()}\n      variant=\"plain\"\n      size=\"s\"\n    >\n      {stringFormatter.format(\"list.showMore\")}\n    </ButtonView>\n  );\n};\n\nexport default ShowNextBatchButton;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,mBAAA,GAAuC,CAAC,KAAA,KAAU;AAC7D,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAC3D,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,SAAA,GAAY,IAAA,CAAK,MAAA,CAAO,YAAA,EAAa;AAC3C,EAAA,MAAM,kBAAA,GAAqB,IAAA,CAAK,MAAA,CAAO,qBAAA,EAAsB;AAC7D,EAAA,MAAM,aAAa,IAAA,CAAK,OAAA;AACxB,EAAA,MAAM,WAAA,GAAc,WAAW,YAAA,EAAa;AAE5C,EAAA,IAAI,CAAC,WAAA,IAAe,CAAC,SAAA,EAAW;AAC9B,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,aAAa,CAAC,kBAAA;AAAA,MACzB,UAAA,EAAY,kBAAA;AAAA,MACX,GAAG,KAAA;AAAA,MACJ,OAAA,EAAS,MAAM,IAAA,CAAK,OAAA,CAAQ,SAAA,EAAU;AAAA,MACtC,OAAA,EAAQ,OAAA;AAAA,MACR,IAAA,EAAK,GAAA;AAAA,MAEJ,QAAA,EAAA,eAAA,CAAgB,OAAO,eAAe;AAAA;AAAA,GACzC;AAEJ;;;;"}
+{"version":3,"file":"ShowNextBatchButton.mjs","sources":["../../../../../../../../../../../src/components/List/components/Footer/components/ShowNextBatchButton/ShowNextBatchButton.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport type { ButtonProps } from \"@/components/Button\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport ButtonView from \"@/views/ButtonView\";\n\nexport const ShowNextBatchButton: FC<ButtonProps> = (props) => {\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n  const list = useList();\n  const isLoading = list.loader.useIsLoading();\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const pagination = list.batches;\n  const canLoadMore = pagination.hasNextBatch();\n\n  if (!canLoadMore && !isLoading) {\n    return null;\n  }\n\n  return (\n    <ButtonView\n      isPending={isLoading && !isInitiallyLoading}\n      isDisabled={isInitiallyLoading}\n      {...props}\n      onPress={() => list.batches.nextBatch()}\n      variant=\"plain\"\n      size=\"s\"\n    >\n      {stringFormatter.format(\"showMore\")}\n    </ButtonView>\n  );\n};\n\nexport default ShowNextBatchButton;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,mBAAA,GAAuC,CAAC,KAAA,KAAU;AAC7D,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AACnE,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,SAAA,GAAY,IAAA,CAAK,MAAA,CAAO,YAAA,EAAa;AAC3C,EAAA,MAAM,kBAAA,GAAqB,IAAA,CAAK,MAAA,CAAO,qBAAA,EAAsB;AAC7D,EAAA,MAAM,aAAa,IAAA,CAAK,OAAA;AACxB,EAAA,MAAM,WAAA,GAAc,WAAW,YAAA,EAAa;AAE5C,EAAA,IAAI,CAAC,WAAA,IAAe,CAAC,SAAA,EAAW;AAC9B,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,aAAa,CAAC,kBAAA;AAAA,MACzB,UAAA,EAAY,kBAAA;AAAA,MACX,GAAG,KAAA;AAAA,MACJ,OAAA,EAAS,MAAM,IAAA,CAAK,OAAA,CAAQ,SAAA,EAAU;AAAA,MACtC,OAAA,EAAQ,OAAA;AAAA,MACR,IAAA,EAAK,GAAA;AAAA,MAEJ,QAAA,EAAA,eAAA,CAAgB,OAAO,UAAU;AAAA;AAAA,GACpC;AAEJ;;;;"}

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

@@ -4,9 +4,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useList } from '../../../../hooks/useList.mjs';
 import styles from './ActiveFilters.module.scss.mjs';
 import locales from '../../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
-import { Translate } from '../../../../../../lib/react/components/Translate/Translate.mjs';
 import { observer } from 'mobx-react-lite';
-import { useLocalizedStringFormatter } from 'react-aria';
+import { useLocalizedStringFormatter } from '../../../../../TranslationProvider/useLocalizedStringFormatter.mjs';
 import { TooltipTrigger } from '../../../../../Tooltip/components/TooltipTrigger/TooltipTrigger.mjs';
 import 'react-aria-components';
 import 'clsx';
@@ -31,7 +30,7 @@ import { DateRangeFilter } from '../../../../model/filter/DateRangeFilter.mjs';
 
 const ActiveFilters = observer(() => {
   const list = useList();
-  const formatter = useLocalizedStringFormatter(locales);
+  const formatter = useLocalizedStringFormatter(locales, "List.ActiveFilters");
   const activeFilters = list.filters.flatMap((f) => {
     if (f instanceof DateRangeFilter) {
       const value = f.getValue();
@@ -46,7 +45,7 @@ const ActiveFilters = observer(() => {
   const storingAvailable = list.filters.some((f) => f.isStoringAvailable());
   const hasChanges = list.filters.some((f) => f.hasChanges());
   const storeFiltersButton = storingAvailable && hasChanges && /* @__PURE__ */ jsxs(TooltipTriggerView, { children: [
-    /* @__PURE__ */ jsx(TooltipView, { children: /* @__PURE__ */ jsx(Translate, { locales, children: "list.filters.store" }) }),
+    /* @__PURE__ */ jsx(TooltipView, { children: formatter.format("filters.store") }),
     /* @__PURE__ */ jsx(
       ButtonView,
       {
@@ -54,13 +53,13 @@ const ActiveFilters = observer(() => {
         variant: "plain",
         color: "secondary",
         onPress: () => Filter.storeFilters(list, { autosave: false, manualSave: true }),
-        "aria-label": formatter.format("list.filters.store"),
+        "aria-label": formatter.format("filters.store"),
         children: /* @__PURE__ */ jsx(IconSave, {})
       }
     )
   ] });
   const resetFiltersButton = hasChanges ? /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
-    /* @__PURE__ */ jsx(TooltipView, { children: /* @__PURE__ */ jsx(Translate, { locales, children: "list.filters.reset" }) }),
+    /* @__PURE__ */ jsx(TooltipView, { children: formatter.format("filters.reset") }),
     /* @__PURE__ */ jsx(
       ButtonView,
       {
@@ -68,13 +67,13 @@ const ActiveFilters = observer(() => {
         variant: "plain",
         color: "secondary",
         onPress: () => list.resetFilters(),
-        "aria-label": formatter.format("list.filters.reset"),
+        "aria-label": formatter.format("filters.reset"),
         children: /* @__PURE__ */ jsx(IconUndo, {})
       }
     )
   ] }) : void 0;
   const removeAllFiltersButton = activeFilters.length > 1 ? /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
-    /* @__PURE__ */ jsx(TooltipView, { children: /* @__PURE__ */ jsx(Translate, { locales, children: "list.filters.clear" }) }),
+    /* @__PURE__ */ jsx(TooltipView, { children: formatter.format("filters.clear") }),
     /* @__PURE__ */ jsx(
       ButtonView,
       {

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

@@ -1 +1 @@
-{"version":3,"file":"ActiveFilters.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/ActiveFilters/ActiveFilters.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport styles from \"./ActiveFilters.module.scss\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { Translate } from \"@/lib/react/components/Translate\";\nimport { observer } from \"mobx-react-lite\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { TooltipTrigger } from \"@/components/Tooltip\";\nimport {\n  IconClose,\n  IconSave,\n  IconUndo,\n} from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport TooltipView from \"@/views/TooltipView\";\nimport DivView from \"@/views/DivView\";\nimport BadgeView from \"@/views/BadgeView\";\nimport TooltipTriggerView from \"@/views/TooltipTriggerView\";\nimport TextView from \"@/views/TextView\";\nimport { Filter } from \"@/components/List/model/filter/Filter\";\nimport { transformDateValueToFormattedDate } from \"@/lib/date/transformDateValueToFormattedDate\";\nimport { DateRangeFilter } from \"@/components/List/model/filter/DateRangeFilter\";\n\nexport const ActiveFilters: FC = observer(() => {\n  const list = useList();\n  const formatter = useLocalizedStringFormatter(locales);\n\n  const activeFilters = list.filters.flatMap((f) => {\n    if (f instanceof DateRangeFilter) {\n      const value = f.getValue();\n      if (value) {\n        return [\n          <BadgeView key={f.name} onClose={() => f.clear()}>\n            <TextView>\n              {`${transformDateValueToFormattedDate(value.start)} - ${transformDateValueToFormattedDate(value.end)}`}\n            </TextView>\n          </BadgeView>,\n        ];\n      }\n    }\n\n    return f.values\n      .filter((v) => v.isActive)\n      .map((v) => (\n        <BadgeView key={v.id} onClose={() => v.deactivate()}>\n          <TextView>{v.render()}</TextView>\n        </BadgeView>\n      ));\n  });\n\n  const storingAvailable = list.filters.some((f) => f.isStoringAvailable());\n  const hasChanges = list.filters.some((f) => f.hasChanges());\n\n  const storeFiltersButton = storingAvailable && hasChanges && (\n    <TooltipTriggerView>\n      <TooltipView>\n        <Translate locales={locales}>list.filters.store</Translate>\n      </TooltipView>\n      <ButtonView\n        size=\"s\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={() =>\n          Filter.storeFilters(list, { autosave: false, manualSave: true })\n        }\n        aria-label={formatter.format(\"list.filters.store\")}\n      >\n        <IconSave />\n      </ButtonView>\n    </TooltipTriggerView>\n  );\n\n  const resetFiltersButton = hasChanges ? (\n    <TooltipTrigger>\n      <TooltipView>\n        <Translate locales={locales}>list.filters.reset</Translate>\n      </TooltipView>\n      <ButtonView\n        size=\"s\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={() => list.resetFilters()}\n        aria-label={formatter.format(\"list.filters.reset\")}\n      >\n        <IconUndo />\n      </ButtonView>\n    </TooltipTrigger>\n  ) : undefined;\n\n  const removeAllFiltersButton =\n    activeFilters.length > 1 ? (\n      <TooltipTrigger>\n        <TooltipView>\n          <Translate locales={locales}>list.filters.clear</Translate>\n        </TooltipView>\n        <ButtonView\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n          onPress={() => list.clearFilters()}\n        >\n          <IconClose />\n        </ButtonView>\n      </TooltipTrigger>\n    ) : undefined;\n\n  if (\n    activeFilters.length === 0 &&\n    !storeFiltersButton &&\n    !resetFiltersButton\n  ) {\n    return null;\n  }\n\n  return (\n    <DivView className={styles.activeFilters}>\n      {activeFilters}\n      {storeFiltersButton}\n      {resetFiltersButton}\n      {removeAllFiltersButton}\n    </DivView>\n  );\n});\n\nexport default ActiveFilters;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ActiveFilters.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/ActiveFilters/ActiveFilters.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport styles from \"./ActiveFilters.module.scss\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { observer } from \"mobx-react-lite\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { TooltipTrigger } from \"@/components/Tooltip\";\nimport {\n  IconClose,\n  IconSave,\n  IconUndo,\n} from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport TooltipView from \"@/views/TooltipView\";\nimport DivView from \"@/views/DivView\";\nimport BadgeView from \"@/views/BadgeView\";\nimport TooltipTriggerView from \"@/views/TooltipTriggerView\";\nimport TextView from \"@/views/TextView\";\nimport { Filter } from \"@/components/List/model/filter/Filter\";\nimport { transformDateValueToFormattedDate } from \"@/lib/date/transformDateValueToFormattedDate\";\nimport { DateRangeFilter } from \"@/components/List/model/filter/DateRangeFilter\";\n\nexport const ActiveFilters: FC = observer(() => {\n  const list = useList();\n  const formatter = useLocalizedStringFormatter(locales, \"List.ActiveFilters\");\n\n  const activeFilters = list.filters.flatMap((f) => {\n    if (f instanceof DateRangeFilter) {\n      const value = f.getValue();\n      if (value) {\n        return [\n          <BadgeView key={f.name} onClose={() => f.clear()}>\n            <TextView>\n              {`${transformDateValueToFormattedDate(value.start)} - ${transformDateValueToFormattedDate(value.end)}`}\n            </TextView>\n          </BadgeView>,\n        ];\n      }\n    }\n\n    return f.values\n      .filter((v) => v.isActive)\n      .map((v) => (\n        <BadgeView key={v.id} onClose={() => v.deactivate()}>\n          <TextView>{v.render()}</TextView>\n        </BadgeView>\n      ));\n  });\n\n  const storingAvailable = list.filters.some((f) => f.isStoringAvailable());\n  const hasChanges = list.filters.some((f) => f.hasChanges());\n\n  const storeFiltersButton = storingAvailable && hasChanges && (\n    <TooltipTriggerView>\n      <TooltipView>{formatter.format(\"filters.store\")}</TooltipView>\n      <ButtonView\n        size=\"s\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={() =>\n          Filter.storeFilters(list, { autosave: false, manualSave: true })\n        }\n        aria-label={formatter.format(\"filters.store\")}\n      >\n        <IconSave />\n      </ButtonView>\n    </TooltipTriggerView>\n  );\n\n  const resetFiltersButton = hasChanges ? (\n    <TooltipTrigger>\n      <TooltipView>{formatter.format(\"filters.reset\")}</TooltipView>\n      <ButtonView\n        size=\"s\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={() => list.resetFilters()}\n        aria-label={formatter.format(\"filters.reset\")}\n      >\n        <IconUndo />\n      </ButtonView>\n    </TooltipTrigger>\n  ) : undefined;\n\n  const removeAllFiltersButton =\n    activeFilters.length > 1 ? (\n      <TooltipTrigger>\n        <TooltipView>{formatter.format(\"filters.clear\")}</TooltipView>\n        <ButtonView\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n          onPress={() => list.clearFilters()}\n        >\n          <IconClose />\n        </ButtonView>\n      </TooltipTrigger>\n    ) : undefined;\n\n  if (\n    activeFilters.length === 0 &&\n    !storeFiltersButton &&\n    !resetFiltersButton\n  ) {\n    return null;\n  }\n\n  return (\n    <DivView className={styles.activeFilters}>\n      {activeFilters}\n      {storeFiltersButton}\n      {resetFiltersButton}\n      {removeAllFiltersButton}\n    </DivView>\n  );\n});\n\nexport default ActiveFilters;\n"],"names":[],"mappings":"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"}

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

@@ -14,7 +14,7 @@ import '../../../../../IllustratedMessage/IllustratedMessage.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 from 'clsx';
 import '@mittwald/react-tunnel';
 import '../../../../../../views/ListItemViewContentView.mjs';
@@ -47,7 +47,7 @@ import { useAvailableViewModes } from '../../lib.mjs';
 
 const AllFiltersModal = () => {
   const list = useList();
-  const stringFormatter = useLocalizedStringFormatter(locales);
+  const stringFormatter = useLocalizedStringFormatter(locales, "List");
   const isInitiallyLoading = list.loader.useIsInitiallyLoading();
   const totalItemCount = list.batches.getTotalItemsCount() ?? list.items.entries.length;
   const filterAccordions = list.filters.map((f) => /* @__PURE__ */ jsx(FilterAccordion, { filter: f }, f.name));
@@ -77,7 +77,7 @@ const AllFiltersModal = () => {
         variant: "outline",
         color: "secondary",
         children: [
-          /* @__PURE__ */ jsx(TextView, { children: stringFormatter.format("list.filters.all") }),
+          /* @__PURE__ */ jsx(TextView, { children: stringFormatter.format("filters.all") }),
           /* @__PURE__ */ jsx(IconFilter, {})
         ]
       }
@@ -88,17 +88,17 @@ const AllFiltersModal = () => {
         className: headerStyles.hideOnDesktop,
         variant: "outline",
         color: "secondary",
-        "aria-label": stringFormatter.format("list.filters.all"),
+        "aria-label": stringFormatter.format("filters.all"),
         children: /* @__PURE__ */ jsx(IconFilter, {})
       }
     ),
     /* @__PURE__ */ jsxs(Modal, { offCanvas: true, controller, children: [
-      /* @__PURE__ */ jsx(HeadingView, { children: stringFormatter.format("list.filters.all") }),
+      /* @__PURE__ */ jsx(HeadingView, { children: stringFormatter.format("filters.all") }),
       /* @__PURE__ */ jsx(ContentView, { children: /* @__PURE__ */ jsxs(SectionView, { children: [
         ...accordions
       ] }) }),
       /* @__PURE__ */ jsxs(ActionGroupView, { children: [
-        /* @__PURE__ */ jsx(ButtonView, { onPress: () => controller.close(), children: /* @__PURE__ */ jsx(TextView, { children: isInitiallyLoading ? /* @__PURE__ */ jsx(SkeletonText, { width: "16ch" }) : stringFormatter.format("list.results.show", {
+        /* @__PURE__ */ jsx(ButtonView, { onPress: () => controller.close(), children: /* @__PURE__ */ jsx(TextView, { children: isInitiallyLoading ? /* @__PURE__ */ jsx(SkeletonText, { width: "16ch" }) : stringFormatter.format("results.show", {
           totalItemCount
         }) }) }),
         /* @__PURE__ */ jsx(
@@ -110,7 +110,7 @@ const AllFiltersModal = () => {
               list.resetFilters();
               controller.close();
             },
-            children: stringFormatter.format("list.reset")
+            children: stringFormatter.format("reset")
           }
         )
       ] })

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

@@ -1 +1 @@
-{"version":3,"file":"AllFiltersModal.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/AllFiltersModal.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { IconFilter } from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { useList } from \"@/components/List\";\nimport styles from \"@/components/List/components/Header/Header.module.css\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport ContentView from \"@/views/ContentView\";\nimport SectionView from \"@/views/SectionView\";\nimport { FilterAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/FilterAccordion\";\nimport { ViewModeAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/ViewModeAccordion\";\nimport TextView from \"@/views/TextView\";\nimport { SortingAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/SortingAccordion\";\nimport ActionGroupView from \"@/views/ActionGroupView\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport HeadingView from \"@/views/HeadingView\";\nimport clsx from \"clsx\";\nimport Modal, { ModalTrigger } from \"@/components/Modal\";\nimport { SkeletonText } from \"@/components/SkeletonText\";\nimport { useAvailableViewModes } from \"../../lib\";\n\nexport const AllFiltersModal: FC = () => {\n  const list = useList();\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const totalItemCount =\n    list.batches.getTotalItemsCount() ?? list.items.entries.length;\n\n  const filterAccordions = list.filters.map((f) => (\n    <FilterAccordion filter={f} key={f.name} />\n  ));\n\n  const availableViewModes = useAvailableViewModes();\n\n  const accordions = [\n    availableViewModes.length > 1 && <ViewModeAccordion key=\"viewMode\" />,\n    list.sorting.length > 0 && <SortingAccordion key=\"sorting\" />,\n    ...filterAccordions,\n  ].filter(Boolean);\n\n  const hasSecondaryFilters = list.filters.some(\n    (f) => f.priority === \"secondary\",\n  );\n\n  const controller = useOverlayController(\"Modal\", {\n    reuseControllerFromContext: false,\n  });\n\n  if (accordions.length === 0) {\n    return null;\n  }\n\n  return (\n    <ModalTrigger controller={controller}>\n      <ButtonView\n        className={clsx(\n          styles.hideOnMobile,\n          hasSecondaryFilters ? undefined : styles.hideOnDesktop,\n        )}\n        variant=\"outline\"\n        color=\"secondary\"\n      >\n        <TextView>{stringFormatter.format(\"list.filters.all\")}</TextView>\n        <IconFilter />\n      </ButtonView>\n\n      <ButtonView\n        className={styles.hideOnDesktop}\n        variant=\"outline\"\n        color=\"secondary\"\n        aria-label={stringFormatter.format(\"list.filters.all\")}\n      >\n        <IconFilter />\n      </ButtonView>\n\n      <Modal offCanvas controller={controller}>\n        <HeadingView>{stringFormatter.format(\"list.filters.all\")}</HeadingView>\n        <ContentView>\n          <SectionView>{...accordions}</SectionView>\n        </ContentView>\n\n        <ActionGroupView>\n          <ButtonView onPress={() => controller.close()}>\n            <TextView>\n              {isInitiallyLoading ? (\n                <SkeletonText width=\"16ch\" />\n              ) : (\n                stringFormatter.format(\"list.results.show\", {\n                  totalItemCount,\n                })\n              )}\n            </TextView>\n          </ButtonView>\n          <ButtonView\n            color=\"secondary\"\n            variant=\"soft\"\n            onPress={() => {\n              list.resetFilters();\n              controller.close();\n            }}\n          >\n            {stringFormatter.format(\"list.reset\")}\n          </ButtonView>\n        </ActionGroupView>\n      </Modal>\n    </ModalTrigger>\n  );\n};\n"],"names":["styles"],"mappings":"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"}
+{"version":3,"file":"AllFiltersModal.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/AllFiltersModal.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { IconFilter } from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { useList } from \"@/components/List\";\nimport styles from \"@/components/List/components/Header/Header.module.css\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport ContentView from \"@/views/ContentView\";\nimport SectionView from \"@/views/SectionView\";\nimport { FilterAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/FilterAccordion\";\nimport { ViewModeAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/ViewModeAccordion\";\nimport TextView from \"@/views/TextView\";\nimport { SortingAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/SortingAccordion\";\nimport ActionGroupView from \"@/views/ActionGroupView\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport HeadingView from \"@/views/HeadingView\";\nimport clsx from \"clsx\";\nimport Modal, { ModalTrigger } from \"@/components/Modal\";\nimport { SkeletonText } from \"@/components/SkeletonText\";\nimport { useAvailableViewModes } from \"../../lib\";\n\nexport const AllFiltersModal: FC = () => {\n  const list = useList();\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const totalItemCount =\n    list.batches.getTotalItemsCount() ?? list.items.entries.length;\n\n  const filterAccordions = list.filters.map((f) => (\n    <FilterAccordion filter={f} key={f.name} />\n  ));\n\n  const availableViewModes = useAvailableViewModes();\n\n  const accordions = [\n    availableViewModes.length > 1 && <ViewModeAccordion key=\"viewMode\" />,\n    list.sorting.length > 0 && <SortingAccordion key=\"sorting\" />,\n    ...filterAccordions,\n  ].filter(Boolean);\n\n  const hasSecondaryFilters = list.filters.some(\n    (f) => f.priority === \"secondary\",\n  );\n\n  const controller = useOverlayController(\"Modal\", {\n    reuseControllerFromContext: false,\n  });\n\n  if (accordions.length === 0) {\n    return null;\n  }\n\n  return (\n    <ModalTrigger controller={controller}>\n      <ButtonView\n        className={clsx(\n          styles.hideOnMobile,\n          hasSecondaryFilters ? undefined : styles.hideOnDesktop,\n        )}\n        variant=\"outline\"\n        color=\"secondary\"\n      >\n        <TextView>{stringFormatter.format(\"filters.all\")}</TextView>\n        <IconFilter />\n      </ButtonView>\n\n      <ButtonView\n        className={styles.hideOnDesktop}\n        variant=\"outline\"\n        color=\"secondary\"\n        aria-label={stringFormatter.format(\"filters.all\")}\n      >\n        <IconFilter />\n      </ButtonView>\n\n      <Modal offCanvas controller={controller}>\n        <HeadingView>{stringFormatter.format(\"filters.all\")}</HeadingView>\n        <ContentView>\n          <SectionView>{...accordions}</SectionView>\n        </ContentView>\n\n        <ActionGroupView>\n          <ButtonView onPress={() => controller.close()}>\n            <TextView>\n              {isInitiallyLoading ? (\n                <SkeletonText width=\"16ch\" />\n              ) : (\n                stringFormatter.format(\"results.show\", {\n                  totalItemCount,\n                })\n              )}\n            </TextView>\n          </ButtonView>\n          <ButtonView\n            color=\"secondary\"\n            variant=\"soft\"\n            onPress={() => {\n              list.resetFilters();\n              controller.close();\n            }}\n          >\n            {stringFormatter.format(\"reset\")}\n          </ButtonView>\n        </ActionGroupView>\n      </Modal>\n    </ModalTrigger>\n  );\n};\n"],"names":["styles"],"mappings":"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"}

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

@@ -4,14 +4,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
 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';
 import RangeCalendarView from '../../../../../../views/RangeCalendarView.mjs';
 
 const FilterAccordionDateRange = (props) => {
   const { filter } = props;
   const currentValue = filter.getValue();
-  const stringFormatter = useLocalizedStringFormatter(locales);
+  const stringFormatter = useLocalizedStringFormatter(locales, "List");
   return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "m", children: [
     /* @__PURE__ */ jsx(
       RangeCalendarView,
@@ -30,7 +30,7 @@ const FilterAccordionDateRange = (props) => {
         color: "secondary",
         variant: "soft",
         onPress: () => filter.clear(),
-        children: stringFormatter.format("list.filters.clearSelection")
+        children: stringFormatter.format("filters.clearSelection")
       }
     )
   ] });