@mittwald/flow-react-components 0.2.0-alpha.1031 → 0.2.0-alpha.1033

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

@@ -1,91 +1,72 @@
 "use client"
 /* */
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
-import Cropper from 'react-easy-crop';
-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 '../TranslationProvider/useLocalizedStringFormatter.mjs';
-import locales from '../../../../../_virtual/_.locale.json@849e6f494125ee27df10a461562fa893.mjs';
-import { useImageSrc } from '../../lib/hooks/useImageSrc.mjs';
-import { useDebouncedCallback } from 'use-debounce';
-
-const ImageCropper = (props) => {
-  const {
-    image,
-    className,
-    onCropComplete,
-    width = 300,
-    height = 300,
-    aspectRatio,
-    ...rest
-  } = props;
-  const imageSrc = useImageSrc(image);
-  const [mediaLoaded, setMediaLoaded] = useState(false);
-  const [crop, setCrop] = useState({ x: 0, y: 0 });
-  const [zoom, setZoom] = useState(1);
-  const stringFormatter = useLocalizedStringFormatter(locales, "ImageCropper");
-  const rootClassName = clsx(styles.imageCropper, className);
-  const debouncedCropComplete = useDebouncedCallback(
-    async (croppedAreaPixels) => {
-      if (!croppedAreaPixels) {
-        return;
-      }
-      const croppedImageFile = await getCroppedImageFile(
-        imageSrc,
-        image ?? "",
-        croppedAreaPixels
-      );
-      onCropComplete?.(croppedImageFile);
-    },
-    500,
-    {
-      leading: true
-    }
-  );
-  useEffect(() => {
-    setMediaLoaded(false);
-  }, [imageSrc]);
-  return /* @__PURE__ */ jsxs("div", { className: rootClassName, style: { width }, children: [
-    /* @__PURE__ */ jsx("div", { className: styles.cropperContainer, style: { height }, children: /* @__PURE__ */ jsx(
-      Cropper,
-      {
-        style: {
-          containerStyle: {
-            borderRadius: "calc(var(--image-cropper--corner-radius) - 1px)"
-          }
-        },
-        aspect: aspectRatio,
-        crop,
-        image: imageSrc,
-        onCropChange: setCrop,
-        zoom,
-        onZoomChange: setZoom,
-        onMediaLoaded: () => setMediaLoaded(true),
-        onCropComplete: (_, croppedAreaPixels) => {
-          if (mediaLoaded) {
-            debouncedCropComplete(croppedAreaPixels);
-          }
-        },
-        ...rest
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      Slider,
-      {
-        minValue: 1,
-        maxValue: 3,
-        step: 0.01,
-        value: zoom,
-        sliderOnly: true,
-        onChange: (zoom2) => setZoom(zoom2),
-        "aria-label": stringFormatter.format("zoom")
-      }
-    )
-  ] });
+import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
+import ImageCropper_module_default from "./ImageCropper.module.mjs";
+import { Slider } from "../Slider/Slider.mjs";
+import { getCroppedImageFile } from "./lib/getCroppedImageFile.mjs";
+import __locale_default from "../../../../../_virtual/_19.locale.mjs";
+import { useImageSrc } from "../../lib/hooks/useImageSrc.mjs";
+import clsx from "clsx";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Cropper from "react-easy-crop";
+import { useDebouncedCallback } from "use-debounce";
+//#region src/components/ImageCropper/ImageCropper.tsx
+/**
+* @flr-generate all
+* @flowStatus new
+*/
+var ImageCropper = (props) => {
+	const { image, className, onCropComplete, width = 300, height = 300, aspectRatio, ...rest } = props;
+	const imageSrc = useImageSrc(image);
+	const [mediaLoaded, setMediaLoaded] = useState(false);
+	const [crop, setCrop] = useState({
+		x: 0,
+		y: 0
+	});
+	const [zoom, setZoom] = useState(1);
+	const stringFormatter = useLocalizedStringFormatter(__locale_default, "ImageCropper");
+	const rootClassName = clsx(ImageCropper_module_default.imageCropper, className);
+	const debouncedCropComplete = useDebouncedCallback(async (croppedAreaPixels) => {
+		if (!croppedAreaPixels) return;
+		const croppedImageFile = await getCroppedImageFile(imageSrc, image ?? "", croppedAreaPixels);
+		onCropComplete?.(croppedImageFile);
+	}, 500, { leading: true });
+	useEffect(() => {
+		setMediaLoaded(false);
+	}, [imageSrc]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: rootClassName,
+		style: { width },
+		children: [/* @__PURE__ */ jsx("div", {
+			className: ImageCropper_module_default.cropperContainer,
+			style: { height },
+			children: /* @__PURE__ */ jsx(Cropper, {
+				style: { containerStyle: { borderRadius: "calc(var(--image-cropper--corner-radius) - 1px)" } },
+				aspect: aspectRatio,
+				crop,
+				image: imageSrc,
+				onCropChange: setCrop,
+				zoom,
+				onZoomChange: setZoom,
+				onMediaLoaded: () => setMediaLoaded(true),
+				onCropComplete: (_, croppedAreaPixels) => {
+					if (mediaLoaded) debouncedCropComplete(croppedAreaPixels);
+				},
+				...rest
+			})
+		}), /* @__PURE__ */ jsx(Slider, {
+			minValue: 1,
+			maxValue: 3,
+			step: .01,
+			value: zoom,
+			sliderOnly: true,
+			onChange: (zoom) => setZoom(zoom),
+			"aria-label": stringFormatter.format("zoom")
+		})]
+	});
 };
+//#endregion
+export { ImageCropper, ImageCropper as default };
 
-export { ImageCropper };
-//# sourceMappingURL=ImageCropper.mjs.map
+//# sourceMappingURL=ImageCropper.mjs.map

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 { type CSSProperties, type FC, useEffect, useState } 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\";\nimport { useDebouncedCallback } from \"use-debounce\";\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/**\n * @flr-generate all\n * @flowStatus new\n */\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 [mediaLoaded, setMediaLoaded] = useState(false);\n  const [crop, setCrop] = useState({ x: 0, y: 0 });\n  const [zoom, setZoom] = useState(1);\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"ImageCropper\");\n  const rootClassName = clsx(styles.imageCropper, className);\n\n  const debouncedCropComplete = useDebouncedCallback(\n    async (croppedAreaPixels: Area) => {\n      if (!croppedAreaPixels) {\n        return;\n      }\n\n      const croppedImageFile = await getCroppedImageFile(\n        imageSrc,\n        image ?? \"\",\n        croppedAreaPixels,\n      );\n\n      onCropComplete?.(croppedImageFile);\n    },\n    500,\n    {\n      leading: true,\n    },\n  );\n\n  useEffect(() => {\n    setMediaLoaded(false);\n  }, [imageSrc]);\n\n  return (\n    <div className={rootClassName} style={{ width }}>\n      <div className={styles.cropperContainer} style={{ height }}>\n        <Cropper\n          style={{\n            containerStyle: {\n              borderRadius: \"calc(var(--image-cropper--corner-radius) - 1px)\",\n            },\n          }}\n          aspect={aspectRatio}\n          crop={crop}\n          image={imageSrc}\n          onCropChange={setCrop}\n          zoom={zoom}\n          onZoomChange={setZoom}\n          onMediaLoaded={() => setMediaLoaded(true)}\n          onCropComplete={(_, croppedAreaPixels) => {\n            if (mediaLoaded) {\n              debouncedCropComplete(croppedAreaPixels);\n            }\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":["zoom"],"mappings":";;;;;;;;;;;;AA8BO,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,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AACpD,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;AAElC,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,cAAc,CAAA;AAC3E,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,YAAA,EAAc,SAAS,CAAA;AAEzD,EAAA,MAAM,qBAAA,GAAwB,oBAAA;AAAA,IAC5B,OAAO,iBAAA,KAA4B;AACjC,MAAA,IAAI,CAAC,iBAAA,EAAmB;AACtB,QAAA;AAAA,MACF;AAEA,MAAA,MAAM,mBAAmB,MAAM,mBAAA;AAAA,QAC7B,QAAA;AAAA,QACA,KAAA,IAAS,EAAA;AAAA,QACT;AAAA,OACF;AAEA,MAAA,cAAA,GAAiB,gBAAgB,CAAA;AAAA,IACnC,CAAA;AAAA,IACA,GAAA;AAAA,IACA;AAAA,MACE,OAAA,EAAS;AAAA;AACX,GACF;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,cAAA,CAAe,KAAK,CAAA;AAAA,EACtB,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,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,KAAA,EAAO;AAAA,UACL,cAAA,EAAgB;AAAA,YACd,YAAA,EAAc;AAAA;AAChB,SACF;AAAA,QACA,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,aAAA,EAAe,MAAM,cAAA,CAAe,IAAI,CAAA;AAAA,QACxC,cAAA,EAAgB,CAAC,CAAA,EAAG,iBAAA,KAAsB;AACxC,UAAA,IAAI,WAAA,EAAa;AACf,YAAA,qBAAA,CAAsB,iBAAiB,CAAA;AAAA,UACzC;AAAA,QACF,CAAA;AAAA,QACC,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,CAACA,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","names":[],"sources":["../../../../../../../src/components/ImageCropper/ImageCropper.tsx"],"sourcesContent":["import { type CSSProperties, type FC, useEffect, useState } 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\";\nimport { useDebouncedCallback } from \"use-debounce\";\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/**\n * @flr-generate all\n * @flowStatus new\n */\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 [mediaLoaded, setMediaLoaded] = useState(false);\n  const [crop, setCrop] = useState({ x: 0, y: 0 });\n  const [zoom, setZoom] = useState(1);\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"ImageCropper\");\n  const rootClassName = clsx(styles.imageCropper, className);\n\n  const debouncedCropComplete = useDebouncedCallback(\n    async (croppedAreaPixels: Area) => {\n      if (!croppedAreaPixels) {\n        return;\n      }\n\n      const croppedImageFile = await getCroppedImageFile(\n        imageSrc,\n        image ?? \"\",\n        croppedAreaPixels,\n      );\n\n      onCropComplete?.(croppedImageFile);\n    },\n    500,\n    {\n      leading: true,\n    },\n  );\n\n  useEffect(() => {\n    setMediaLoaded(false);\n  }, [imageSrc]);\n\n  return (\n    <div className={rootClassName} style={{ width }}>\n      <div className={styles.cropperContainer} style={{ height }}>\n        <Cropper\n          style={{\n            containerStyle: {\n              borderRadius: \"calc(var(--image-cropper--corner-radius) - 1px)\",\n            },\n          }}\n          aspect={aspectRatio}\n          crop={crop}\n          image={imageSrc}\n          onCropChange={setCrop}\n          zoom={zoom}\n          onZoomChange={setZoom}\n          onMediaLoaded={() => setMediaLoaded(true)}\n          onCropComplete={(_, croppedAreaPixels) => {\n            if (mediaLoaded) {\n              debouncedCropComplete(croppedAreaPixels);\n            }\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"],"mappings":";;;;;;;;;;;;;;;;;;AA8BA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EACJ,OACA,WACA,gBACA,QAAQ,KACR,SAAS,KACT,aACA,GAAG,SACD;CAEJ,MAAM,WAAW,YAAY,KAAK;CAElC,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CACpD,MAAM,CAAC,MAAM,WAAW,SAAS;EAAE,GAAG;EAAG,GAAG;CAAE,CAAC;CAC/C,MAAM,CAAC,MAAM,WAAW,SAAS,CAAC;CAElC,MAAM,kBAAkB,4BAA4B,kBAAS,cAAc;CAC3E,MAAM,gBAAgB,KAAK,4BAAO,cAAc,SAAS;CAEzD,MAAM,wBAAwB,qBAC5B,OAAO,sBAA4B;EACjC,IAAI,CAAC,mBACH;EAGF,MAAM,mBAAmB,MAAM,oBAC7B,UACA,SAAS,IACT,iBACF;EAEA,iBAAiB,gBAAgB;CACnC,GACA,KACA,EACE,SAAS,KACX,CACF;CAEA,gBAAgB;EACd,eAAe,KAAK;CACtB,GAAG,CAAC,QAAQ,CAAC;CAEb,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,OAAO,EAAE,MAAM;EAA9C,UAAA,CACE,oBAAC,OAAD;GAAK,WAAW,4BAAO;GAAkB,OAAO,EAAE,OAAO;GACvD,UAAA,oBAAC,SAAD;IACE,OAAO,EACL,gBAAgB,EACd,cAAc,kDAChB,EACF;IACA,QAAQ;IACF;IACN,OAAO;IACP,cAAc;IACR;IACN,cAAc;IACd,qBAAqB,eAAe,IAAI;IACxC,iBAAiB,GAAG,sBAAsB;KACxC,IAAI,aACF,sBAAsB,iBAAiB;IAE3C;IACA,GAAI;GACL,CAAA;EACE,CAAA,GACL,oBAAC,QAAD;GACE,UAAU;GACV,UAAU;GACV,MAAM;GACN,OAAO;GACP,YAAA;GACA,WAAW,SAAS,QAAQ,IAAc;GAC1C,cAAY,gBAAgB,OAAO,MAAM;EAC1C,CAAA,CACE;;AAET"}

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

@@ -0,0 +1,13 @@
+"use client"
+/* */
+//#region src/components/ImageCropper/ImageCropper.module.scss
+var imageCropper = "flow--image-cropper";
+var cropperContainer = "flow--image-cropper--cropper-container";
+var ImageCropper_module_default = {
+	imageCropper,
+	cropperContainer
+};
+//#endregion
+export { cropperContainer, ImageCropper_module_default as default, imageCropper };
+
+//# sourceMappingURL=ImageCropper.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCropper.module.mjs","names":[],"sources":["../../../../../../../src/components/ImageCropper/ImageCropper.module.scss"],"sourcesContent":[".imageCropper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--image-cropper--spacing);\n  max-width: 100%;\n\n  .cropperContainer {\n    position: relative;\n    width: 100%;\n    border-radius: var(--image-cropper--corner-radius);\n    border-color: var(--image-cropper--border-color);\n    border-style: var(--image-cropper--border-style);\n    border-width: var(--image-cropper--border-width);\n  }\n\n}\n\n/*\n * react-easy-crop injects its stylesheet as an unlayered `<style>` element at\n * runtime, outside of Flow's build, with hard coded rgba values for the crop\n * mask and the grid. Unlayered CSS beats layered CSS regardless of specificity,\n * so these token based overrides only apply in the layered stylesheet variant\n * if they leave the cascade layer as well.\n */\n@layer flow.unlayered {\n  .imageCropper {\n    :global(.reactEasyCrop_CropArea) {\n      color: var(--image-cropper--mask-color);\n      border-color: var(--image-cropper--mask-border-color);\n      box-sizing: content-box;\n    }\n\n    :global(.reactEasyCrop_CropAreaGrid::before) {\n      border-color: var(--image-cropper--grid-color);\n      border-width: var(--image-cropper--grid-width);\n    }\n\n    :global(.reactEasyCrop_Container) {\n      border-radius: var(--image-cropper--corner-radius);\n    }\n  }\n}\n"],"mappings":""}

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

@@ -1,54 +1,36 @@
 "use client"
 /* */
+//#region src/components/ImageCropper/lib/getCroppedImageFile.ts
 function getCroppedImageFile(imageSrc, sourceImage, pixelCrop) {
-  return new Promise((resolve, reject) => {
-    const image = new Image();
-    image.crossOrigin = "anonymous";
-    image.src = imageSrc;
-    image.onload = () => {
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      canvas.width = pixelCrop.width;
-      canvas.height = pixelCrop.height;
-      if (!ctx) {
-        reject(new Error("Failed to get canvas context"));
-        return;
-      }
-      ctx.drawImage(
-        image,
-        pixelCrop.x,
-        pixelCrop.y,
-        pixelCrop.width,
-        pixelCrop.height,
-        0,
-        0,
-        pixelCrop.width,
-        pixelCrop.height
-      );
-      const isSourceImageJsFile = sourceImage instanceof File;
-      const sourceImageName = isSourceImageJsFile ? sourceImage.name : "cropped-image.png";
-      const sourceImageType = isSourceImageJsFile ? sourceImage.type : "image/png";
-      const quality = sourceImageType === "image/jpeg" ? 0.86 : sourceImageType === "image/webp" ? 0.82 : void 0;
-      canvas.toBlob(
-        (blob) => {
-          if (!blob) {
-            return;
-          }
-          resolve(
-            new File([blob], sourceImageName, {
-              type: sourceImageType
-            })
-          );
-        },
-        sourceImageType,
-        quality
-      );
-    };
-    image.onerror = () => {
-      reject(new Error("Failed to load image"));
-    };
-  });
+	return new Promise((resolve, reject) => {
+		const image = new Image();
+		image.crossOrigin = "anonymous";
+		image.src = imageSrc;
+		image.onload = () => {
+			const canvas = document.createElement("canvas");
+			const ctx = canvas.getContext("2d");
+			canvas.width = pixelCrop.width;
+			canvas.height = pixelCrop.height;
+			if (!ctx) {
+				reject(/* @__PURE__ */ new Error("Failed to get canvas context"));
+				return;
+			}
+			ctx.drawImage(image, pixelCrop.x, pixelCrop.y, pixelCrop.width, pixelCrop.height, 0, 0, pixelCrop.width, pixelCrop.height);
+			const isSourceImageJsFile = sourceImage instanceof File;
+			const sourceImageName = isSourceImageJsFile ? sourceImage.name : "cropped-image.png";
+			const sourceImageType = isSourceImageJsFile ? sourceImage.type : "image/png";
+			const quality = sourceImageType === "image/jpeg" ? .86 : sourceImageType === "image/webp" ? .82 : void 0;
+			canvas.toBlob((blob) => {
+				if (!blob) return;
+				resolve(new File([blob], sourceImageName, { type: sourceImageType }));
+			}, sourceImageType, quality);
+		};
+		image.onerror = () => {
+			reject(/* @__PURE__ */ new Error("Failed to load image"));
+		};
+	});
 }
-
+//#endregion
 export { getCroppedImageFile };
-//# sourceMappingURL=getCroppedImageFile.mjs.map
+
+//# sourceMappingURL=getCroppedImageFile.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"getCroppedImageFile.mjs","sources":["../../../../../../../../src/components/ImageCropper/lib/getCroppedImageFile.ts"],"sourcesContent":["import type { Area } from \"react-easy-crop\";\n\nexport function getCroppedImageFile(\n  imageSrc: string,\n  sourceImage: File | string,\n  pixelCrop: Area,\n): Promise<File> {\n  return new Promise((resolve, reject) => {\n    const image = new Image();\n    image.crossOrigin = \"anonymous\";\n    image.src = imageSrc;\n\n    image.onload = () => {\n      const canvas = document.createElement(\"canvas\");\n      const ctx = canvas.getContext(\"2d\");\n\n      canvas.width = pixelCrop.width;\n      canvas.height = pixelCrop.height;\n\n      if (!ctx) {\n        reject(new Error(\"Failed to get canvas context\"));\n        return;\n      }\n\n      ctx.drawImage(\n        image,\n        pixelCrop.x,\n        pixelCrop.y,\n        pixelCrop.width,\n        pixelCrop.height,\n        0,\n        0,\n        pixelCrop.width,\n        pixelCrop.height,\n      );\n\n      const isSourceImageJsFile = sourceImage instanceof File;\n      const sourceImageName = isSourceImageJsFile\n        ? sourceImage.name\n        : \"cropped-image.png\";\n      const sourceImageType = isSourceImageJsFile\n        ? sourceImage.type\n        : \"image/png\";\n\n      const quality =\n        sourceImageType === \"image/jpeg\"\n          ? 0.86\n          : sourceImageType === \"image/webp\"\n            ? 0.82\n            : undefined;\n\n      canvas.toBlob(\n        (blob) => {\n          if (!blob) {\n            return;\n          }\n\n          resolve(\n            new File([blob], sourceImageName, {\n              type: sourceImageType,\n            }),\n          );\n        },\n        sourceImageType,\n        quality,\n      );\n    };\n\n    image.onerror = () => {\n      reject(new Error(\"Failed to load image\"));\n    };\n  });\n}\n"],"names":[],"mappings":"AAEO,SAAS,mBAAA,CACd,QAAA,EACA,WAAA,EACA,SAAA,EACe;AACf,EAAA,OAAO,IAAI,OAAA,CAAQ,CAAC,OAAA,EAAS,MAAA,KAAW;AACtC,IAAA,MAAM,KAAA,GAAQ,IAAI,KAAA,EAAM;AACxB,IAAA,KAAA,CAAM,WAAA,GAAc,WAAA;AACpB,IAAA,KAAA,CAAM,GAAA,GAAM,QAAA;AAEZ,IAAA,KAAA,CAAM,SAAS,MAAM;AACnB,MAAA,MAAM,MAAA,GAAS,QAAA,CAAS,aAAA,CAAc,QAAQ,CAAA;AAC9C,MAAA,MAAM,GAAA,GAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAA;AAElC,MAAA,MAAA,CAAO,QAAQ,SAAA,CAAU,KAAA;AACzB,MAAA,MAAA,CAAO,SAAS,SAAA,CAAU,MAAA;AAE1B,MAAA,IAAI,CAAC,GAAA,EAAK;AACR,QAAA,MAAA,CAAO,IAAI,KAAA,CAAM,8BAA8B,CAAC,CAAA;AAChD,QAAA;AAAA,MACF;AAEA,MAAA,GAAA,CAAI,SAAA;AAAA,QACF,KAAA;AAAA,QACA,SAAA,CAAU,CAAA;AAAA,QACV,SAAA,CAAU,CAAA;AAAA,QACV,SAAA,CAAU,KAAA;AAAA,QACV,SAAA,CAAU,MAAA;AAAA,QACV,CAAA;AAAA,QACA,CAAA;AAAA,QACA,SAAA,CAAU,KAAA;AAAA,QACV,SAAA,CAAU;AAAA,OACZ;AAEA,MAAA,MAAM,sBAAsB,WAAA,YAAuB,IAAA;AACnD,MAAA,MAAM,eAAA,GAAkB,mBAAA,GACpB,WAAA,CAAY,IAAA,GACZ,mBAAA;AACJ,MAAA,MAAM,eAAA,GAAkB,mBAAA,GACpB,WAAA,CAAY,IAAA,GACZ,WAAA;AAEJ,MAAA,MAAM,UACJ,eAAA,KAAoB,YAAA,GAChB,IAAA,GACA,eAAA,KAAoB,eAClB,IAAA,GACA,MAAA;AAER,MAAA,MAAA,CAAO,MAAA;AAAA,QACL,CAAC,IAAA,KAAS;AACR,UAAA,IAAI,CAAC,IAAA,EAAM;AACT,YAAA;AAAA,UACF;AAEA,UAAA,OAAA;AAAA,YACE,IAAI,IAAA,CAAK,CAAC,IAAI,GAAG,eAAA,EAAiB;AAAA,cAChC,IAAA,EAAM;AAAA,aACP;AAAA,WACH;AAAA,QACF,CAAA;AAAA,QACA,eAAA;AAAA,QACA;AAAA,OACF;AAAA,IACF,CAAA;AAEA,IAAA,KAAA,CAAM,UAAU,MAAM;AACpB,MAAA,MAAA,CAAO,IAAI,KAAA,CAAM,sBAAsB,CAAC,CAAA;AAAA,IAC1C,CAAA;AAAA,EACF,CAAC,CAAA;AACH;;;;"}
+{"version":3,"file":"getCroppedImageFile.mjs","names":[],"sources":["../../../../../../../../src/components/ImageCropper/lib/getCroppedImageFile.ts"],"sourcesContent":["import type { Area } from \"react-easy-crop\";\n\nexport function getCroppedImageFile(\n  imageSrc: string,\n  sourceImage: File | string,\n  pixelCrop: Area,\n): Promise<File> {\n  return new Promise((resolve, reject) => {\n    const image = new Image();\n    image.crossOrigin = \"anonymous\";\n    image.src = imageSrc;\n\n    image.onload = () => {\n      const canvas = document.createElement(\"canvas\");\n      const ctx = canvas.getContext(\"2d\");\n\n      canvas.width = pixelCrop.width;\n      canvas.height = pixelCrop.height;\n\n      if (!ctx) {\n        reject(new Error(\"Failed to get canvas context\"));\n        return;\n      }\n\n      ctx.drawImage(\n        image,\n        pixelCrop.x,\n        pixelCrop.y,\n        pixelCrop.width,\n        pixelCrop.height,\n        0,\n        0,\n        pixelCrop.width,\n        pixelCrop.height,\n      );\n\n      const isSourceImageJsFile = sourceImage instanceof File;\n      const sourceImageName = isSourceImageJsFile\n        ? sourceImage.name\n        : \"cropped-image.png\";\n      const sourceImageType = isSourceImageJsFile\n        ? sourceImage.type\n        : \"image/png\";\n\n      const quality =\n        sourceImageType === \"image/jpeg\"\n          ? 0.86\n          : sourceImageType === \"image/webp\"\n            ? 0.82\n            : undefined;\n\n      canvas.toBlob(\n        (blob) => {\n          if (!blob) {\n            return;\n          }\n\n          resolve(\n            new File([blob], sourceImageName, {\n              type: sourceImageType,\n            }),\n          );\n        },\n        sourceImageType,\n        quality,\n      );\n    };\n\n    image.onerror = () => {\n      reject(new Error(\"Failed to load image\"));\n    };\n  });\n}\n"],"mappings":";;;AAEA,SAAgB,oBACd,UACA,aACA,WACe;CACf,OAAO,IAAI,SAAS,SAAS,WAAW;EACtC,MAAM,QAAQ,IAAI,MAAM;EACxB,MAAM,cAAc;EACpB,MAAM,MAAM;EAEZ,MAAM,eAAe;GACnB,MAAM,SAAS,SAAS,cAAc,QAAQ;GAC9C,MAAM,MAAM,OAAO,WAAW,IAAI;GAElC,OAAO,QAAQ,UAAU;GACzB,OAAO,SAAS,UAAU;GAE1B,IAAI,CAAC,KAAK;IACR,uBAAO,IAAI,MAAM,8BAA8B,CAAC;IAChD;GACF;GAEA,IAAI,UACF,OACA,UAAU,GACV,UAAU,GACV,UAAU,OACV,UAAU,QACV,GACA,GACA,UAAU,OACV,UAAU,MACZ;GAEA,MAAM,sBAAsB,uBAAuB;GACnD,MAAM,kBAAkB,sBACpB,YAAY,OACZ;GACJ,MAAM,kBAAkB,sBACpB,YAAY,OACZ;GAEJ,MAAM,UACJ,oBAAoB,eAChB,MACA,oBAAoB,eAClB,MACA,KAAA;GAER,OAAO,QACJ,SAAS;IACR,IAAI,CAAC,MACH;IAGF,QACE,IAAI,KAAK,CAAC,IAAI,GAAG,iBAAiB,EAChC,MAAM,gBACR,CAAC,CACH;GACF,GACA,iBACA,OACF;EACF;EAEA,MAAM,gBAAgB;GACpB,uBAAO,IAAI,MAAM,sBAAsB,CAAC;EAC1C;CACF,CAAC;AACH"}

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

@@ -1,43 +1,37 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
-import { getInitialsFromString } from './lib/getInitialsFromString.mjs';
-import styles from './Initials.module.scss.mjs';
-import clsx from 'clsx';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import { getColorFromInitials } from './lib/getColorFromInitials.mjs';
-import { extractTextFromFirstChild } from '../../lib/react/remote.mjs';
-
-const Initials = flowComponent("Initials", (props) => {
-  const {
-    children,
-    useDynamicColor = false,
-    className,
-    "aria-hidden": ariaHidden,
-    ref
-  } = props;
-  const textContent = extractTextFromFirstChild(children) ?? "";
-  const initials = getInitialsFromString(textContent);
-  const dynamicColor = useMemo(
-    () => useDynamicColor ? getColorFromInitials(textContent) : void 0,
-    [useDynamicColor, textContent]
-  );
-  const rootClassName = clsx(styles.initials, className);
-  const initialsElements = initials.map((initial, index) => /* @__PURE__ */ jsx("span", { "aria-hidden": true, role: "presentation", children: initial }, index));
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-dynamic-color": dynamicColor,
-      "aria-hidden": ariaHidden,
-      "aria-label": ariaHidden ? void 0 : textContent,
-      className: rootClassName,
-      ref,
-      role: "img",
-      children: initialsElements
-    }
-  );
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { extractTextFromFirstChild } from "../../lib/react/remote.mjs";
+import { getInitialsFromString } from "./lib/getInitialsFromString.mjs";
+import Initials_module_default from "./Initials.module.mjs";
+import { getColorFromInitials } from "./lib/getColorFromInitials.mjs";
+import clsx from "clsx";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Initials/Initials.tsx
+/** @flr-generate all */
+var Initials = flowComponent("Initials", (props) => {
+	const { children, useDynamicColor = false, className, "aria-hidden": ariaHidden, ref } = props;
+	const textContent = extractTextFromFirstChild(children) ?? "";
+	const initials = getInitialsFromString(textContent);
+	const dynamicColor = useMemo(() => useDynamicColor ? getColorFromInitials(textContent) : void 0, [useDynamicColor, textContent]);
+	const rootClassName = clsx(Initials_module_default.initials, className);
+	const initialsElements = initials.map((initial, index) => /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		role: "presentation",
+		children: initial
+	}, index));
+	return /* @__PURE__ */ jsx("div", {
+		"data-dynamic-color": dynamicColor,
+		"aria-hidden": ariaHidden,
+		"aria-label": ariaHidden ? void 0 : textContent,
+		className: rootClassName,
+		ref,
+		role: "img",
+		children: initialsElements
+	});
 });
+//#endregion
+export { Initials, Initials as default };
 
-export { Initials };
-//# sourceMappingURL=Initials.mjs.map
+//# sourceMappingURL=Initials.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Initials.mjs","sources":["../../../../../../../src/components/Initials/Initials.tsx"],"sourcesContent":["import { type PropsWithChildren, useMemo } from \"react\";\nimport { getInitialsFromString } from \"./lib/getInitialsFromString\";\nimport styles from \"./Initials.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { getColorFromInitials } from \"@/components/Initials/lib/getColorFromInitials\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\n\nexport interface InitialsProps\n  extends PropsWithChildren, PropsWithClassName, FlowComponentProps {\n  \"aria-hidden\"?: boolean;\n  /** @internal */\n  useDynamicColor?: boolean;\n}\n\n/** @flr-generate all */\nexport const Initials = flowComponent(\"Initials\", (props) => {\n  const {\n    children,\n    useDynamicColor = false,\n    className,\n    \"aria-hidden\": ariaHidden,\n    ref,\n  } = props;\n\n  const textContent = extractTextFromFirstChild(children) ?? \"\";\n  const initials = getInitialsFromString(textContent);\n  const dynamicColor = useMemo(\n    () => (useDynamicColor ? getColorFromInitials(textContent) : undefined),\n    [useDynamicColor, textContent],\n  );\n\n  const rootClassName = clsx(styles.initials, className);\n\n  const initialsElements = initials.map((initial, index) => (\n    <span aria-hidden role=\"presentation\" key={index}>\n      {initial}\n    </span>\n  ));\n\n  return (\n    <div\n      data-dynamic-color={dynamicColor}\n      aria-hidden={ariaHidden}\n      aria-label={ariaHidden ? undefined : textContent}\n      className={rootClassName}\n      ref={ref}\n      role=\"img\"\n    >\n      {initialsElements}\n    </div>\n  );\n});\n\nexport default Initials;\n"],"names":[],"mappings":";;;;;;;;;AAkBO,MAAM,QAAA,GAAW,aAAA,CAAc,UAAA,EAAY,CAAC,KAAA,KAAU;AAC3D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,eAAA,GAAkB,KAAA;AAAA,IAClB,SAAA;AAAA,IACA,aAAA,EAAe,UAAA;AAAA,IACf;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,WAAA,GAAc,yBAAA,CAA0B,QAAQ,CAAA,IAAK,EAAA;AAC3D,EAAA,MAAM,QAAA,GAAW,sBAAsB,WAAW,CAAA;AAClD,EAAA,MAAM,YAAA,GAAe,OAAA;AAAA,IACnB,MAAO,eAAA,GAAkB,oBAAA,CAAqB,WAAW,CAAA,GAAI,MAAA;AAAA,IAC7D,CAAC,iBAAiB,WAAW;AAAA,GAC/B;AAEA,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,QAAA,EAAU,SAAS,CAAA;AAErD,EAAA,MAAM,gBAAA,GAAmB,QAAA,CAAS,GAAA,CAAI,CAAC,SAAS,KAAA,qBAC9C,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAW,IAAA,EAAC,IAAA,EAAK,cAAA,EACpB,QAAA,EAAA,OAAA,EAAA,EADwC,KAE3C,CACD,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,oBAAA,EAAoB,YAAA;AAAA,MACpB,aAAA,EAAa,UAAA;AAAA,MACb,YAAA,EAAY,aAAa,MAAA,GAAY,WAAA;AAAA,MACrC,SAAA,EAAW,aAAA;AAAA,MACX,GAAA;AAAA,MACA,IAAA,EAAK,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Initials.mjs","names":[],"sources":["../../../../../../../src/components/Initials/Initials.tsx"],"sourcesContent":["import { type PropsWithChildren, useMemo } from \"react\";\nimport { getInitialsFromString } from \"./lib/getInitialsFromString\";\nimport styles from \"./Initials.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { getColorFromInitials } from \"@/components/Initials/lib/getColorFromInitials\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\n\nexport interface InitialsProps\n  extends PropsWithChildren, PropsWithClassName, FlowComponentProps {\n  \"aria-hidden\"?: boolean;\n  /** @internal */\n  useDynamicColor?: boolean;\n}\n\n/** @flr-generate all */\nexport const Initials = flowComponent(\"Initials\", (props) => {\n  const {\n    children,\n    useDynamicColor = false,\n    className,\n    \"aria-hidden\": ariaHidden,\n    ref,\n  } = props;\n\n  const textContent = extractTextFromFirstChild(children) ?? \"\";\n  const initials = getInitialsFromString(textContent);\n  const dynamicColor = useMemo(\n    () => (useDynamicColor ? getColorFromInitials(textContent) : undefined),\n    [useDynamicColor, textContent],\n  );\n\n  const rootClassName = clsx(styles.initials, className);\n\n  const initialsElements = initials.map((initial, index) => (\n    <span aria-hidden role=\"presentation\" key={index}>\n      {initial}\n    </span>\n  ));\n\n  return (\n    <div\n      data-dynamic-color={dynamicColor}\n      aria-hidden={ariaHidden}\n      aria-label={ariaHidden ? undefined : textContent}\n      className={rootClassName}\n      ref={ref}\n      role=\"img\"\n    >\n      {initialsElements}\n    </div>\n  );\n});\n\nexport default Initials;\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EACJ,UACA,kBAAkB,OAClB,WACA,eAAe,YACf,QACE;CAEJ,MAAM,cAAc,0BAA0B,QAAQ,KAAK;CAC3D,MAAM,WAAW,sBAAsB,WAAW;CAClD,MAAM,eAAe,cACZ,kBAAkB,qBAAqB,WAAW,IAAI,KAAA,GAC7D,CAAC,iBAAiB,WAAW,CAC/B;CAEA,MAAM,gBAAgB,KAAK,wBAAO,UAAU,SAAS;CAErD,MAAM,mBAAmB,SAAS,KAAK,SAAS,UAC9C,oBAAC,QAAD;EAAM,eAAA;EAAY,MAAK;EACpB,UAAA;CACG,GAFqC,KAErC,CACP;CAED,OACE,oBAAC,OAAD;EACE,sBAAoB;EACpB,eAAa;EACb,cAAY,aAAa,KAAA,IAAY;EACrC,WAAW;EACN;EACL,MAAK;EAEJ,UAAA;CACE,CAAA;AAET,CAAC"}

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

@@ -0,0 +1,9 @@
+"use client"
+/* */
+//#region src/components/Initials/Initials.module.scss
+var initials = "flow--initials";
+var Initials_module_default = { initials };
+//#endregion
+export { Initials_module_default as default, initials };
+
+//# sourceMappingURL=Initials.module.mjs.map

package/dist/js/packages/components/src/components/Initials/Initials.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Initials.module.mjs","names":[],"sources":["../../../../../../../src/components/Initials/Initials.module.scss"],"sourcesContent":[".initials {\n  display: flex;\n  font-weight: var(--initials--font-weight);\n\n  *:nth-child(even) {\n    color: var(--content-color);\n  }\n\n  *:nth-child(odd) {\n    color: var(--content-accent-color);\n  }\n\n  *:only-child {\n    color: var(--content-color);\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Initials/lib/getColorFromInitials.mjs

@@ -1,13 +1,14 @@
 "use client"
 /* */
-import { hash } from 'object-code';
-import { avatarColors } from '../../Avatar/avatarColors.mjs';
-
-const getColorFromInitials = (initials) => {
-  const code = hash(initials);
-  const number = Math.abs(code % (avatarColors.length - 1));
-  return avatarColors[number] ?? "blue";
+import { avatarColors } from "../../Avatar/avatarColors.mjs";
+import { hash } from "object-code";
+//#region src/components/Initials/lib/getColorFromInitials.ts
+var getColorFromInitials = (initials) => {
+	const code = hash(initials);
+	const number = Math.abs(code % (avatarColors.length - 1));
+	return avatarColors[number] ?? "blue";
 };
-
+//#endregion
 export { getColorFromInitials };
-//# sourceMappingURL=getColorFromInitials.mjs.map
+
+//# sourceMappingURL=getColorFromInitials.mjs.map

package/dist/js/packages/components/src/components/Initials/lib/getColorFromInitials.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"getColorFromInitials.mjs","sources":["../../../../../../../../src/components/Initials/lib/getColorFromInitials.ts"],"sourcesContent":["import { hash as objectHash } from \"object-code\";\nimport type { AvatarColors } from \"@/components/Avatar/Avatar\";\nimport { avatarColors } from \"@/components/Avatar/avatarColors\";\n\nexport const getColorFromInitials = (initials: string): AvatarColors => {\n  const code = objectHash(initials);\n  const number = Math.abs(code % (avatarColors.length - 1));\n  return avatarColors[number] ?? \"blue\";\n};\n"],"names":["objectHash"],"mappings":";;;AAIO,MAAM,oBAAA,GAAuB,CAAC,QAAA,KAAmC;AACtE,EAAA,MAAM,IAAA,GAAOA,KAAW,QAAQ,CAAA;AAChC,EAAA,MAAM,SAAS,IAAA,CAAK,GAAA,CAAI,IAAA,IAAQ,YAAA,CAAa,SAAS,CAAA,CAAE,CAAA;AACxD,EAAA,OAAO,YAAA,CAAa,MAAM,CAAA,IAAK,MAAA;AACjC;;;;"}
+{"version":3,"file":"getColorFromInitials.mjs","names":[],"sources":["../../../../../../../../src/components/Initials/lib/getColorFromInitials.ts"],"sourcesContent":["import { hash as objectHash } from \"object-code\";\nimport type { AvatarColors } from \"@/components/Avatar/Avatar\";\nimport { avatarColors } from \"@/components/Avatar/avatarColors\";\n\nexport const getColorFromInitials = (initials: string): AvatarColors => {\n  const code = objectHash(initials);\n  const number = Math.abs(code % (avatarColors.length - 1));\n  return avatarColors[number] ?? \"blue\";\n};\n"],"mappings":";;;;;AAIA,IAAa,wBAAwB,aAAmC;CACtE,MAAM,OAAO,KAAW,QAAQ;CAChC,MAAM,SAAS,KAAK,IAAI,QAAQ,aAAa,SAAS,EAAE;CACxD,OAAO,aAAa,WAAW;AACjC"}

package/dist/js/packages/components/src/components/Initials/lib/getInitialsFromString.mjs

@@ -1,15 +1,14 @@
 "use client"
 /* */
-const getInitialsFromString = (value) => {
-  if (!value.trim()) {
-    return [];
-  }
-  return value.trim().split(/\s+/).map((part) => {
-    const normalized = part.trim();
-    const match = normalized.match(/(\p{Emoji}|\p{L})/u);
-    return match ? match[0].toUpperCase() : "";
-  }).filter(Boolean).slice(0, 2);
+//#region src/components/Initials/lib/getInitialsFromString.ts
+var getInitialsFromString = (value) => {
+	if (!value.trim()) return [];
+	return value.trim().split(/\s+/).map((part) => {
+		const match = part.trim().match(/(\p{Emoji}|\p{L})/u);
+		return match ? match[0].toUpperCase() : "";
+	}).filter(Boolean).slice(0, 2);
 };
-
+//#endregion
 export { getInitialsFromString };
-//# sourceMappingURL=getInitialsFromString.mjs.map
+
+//# sourceMappingURL=getInitialsFromString.mjs.map

package/dist/js/packages/components/src/components/Initials/lib/getInitialsFromString.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"getInitialsFromString.mjs","sources":["../../../../../../../../src/components/Initials/lib/getInitialsFromString.ts"],"sourcesContent":["export const getInitialsFromString = (value: string): string[] => {\n  if (!value.trim()) {\n    return [];\n  }\n\n  return value\n    .trim()\n    .split(/\\s+/)\n    .map((part) => {\n      const normalized = part.trim();\n\n      const match = normalized.match(/(\\p{Emoji}|\\p{L})/u);\n\n      return match ? match[0].toUpperCase() : \"\";\n    })\n    .filter(Boolean)\n    .slice(0, 2);\n};\n"],"names":[],"mappings":"AAAO,MAAM,qBAAA,GAAwB,CAAC,KAAA,KAA4B;AAChE,EAAA,IAAI,CAAC,KAAA,CAAM,IAAA,EAAK,EAAG;AACjB,IAAA,OAAO,EAAC;AAAA,EACV;AAEA,EAAA,OAAO,KAAA,CACJ,MAAK,CACL,KAAA,CAAM,KAAK,CAAA,CACX,GAAA,CAAI,CAAC,IAAA,KAAS;AACb,IAAA,MAAM,UAAA,GAAa,KAAK,IAAA,EAAK;AAE7B,IAAA,MAAM,KAAA,GAAQ,UAAA,CAAW,KAAA,CAAM,oBAAoB,CAAA;AAEnD,IAAA,OAAO,KAAA,GAAQ,KAAA,CAAM,CAAC,CAAA,CAAE,aAAY,GAAI,EAAA;AAAA,EAC1C,CAAC,CAAA,CACA,MAAA,CAAO,OAAO,CAAA,CACd,KAAA,CAAM,GAAG,CAAC,CAAA;AACf;;;;"}
+{"version":3,"file":"getInitialsFromString.mjs","names":[],"sources":["../../../../../../../../src/components/Initials/lib/getInitialsFromString.ts"],"sourcesContent":["export const getInitialsFromString = (value: string): string[] => {\n  if (!value.trim()) {\n    return [];\n  }\n\n  return value\n    .trim()\n    .split(/\\s+/)\n    .map((part) => {\n      const normalized = part.trim();\n\n      const match = normalized.match(/(\\p{Emoji}|\\p{L})/u);\n\n      return match ? match[0].toUpperCase() : \"\";\n    })\n    .filter(Boolean)\n    .slice(0, 2);\n};\n"],"mappings":";;;AAAA,IAAa,yBAAyB,UAA4B;CAChE,IAAI,CAAC,MAAM,KAAK,GACd,OAAO,CAAC;CAGV,OAAO,MACJ,KAAK,CAAC,CACN,MAAM,KAAK,CAAC,CACZ,KAAK,SAAS;EAGb,MAAM,QAFa,KAAK,KAEV,CAAA,CAAW,MAAM,oBAAoB;EAEnD,OAAO,QAAQ,MAAM,EAAE,CAAC,YAAY,IAAI;CAC1C,CAAC,CAAC,CACD,OAAO,OAAO,CAAC,CACf,MAAM,GAAG,CAAC;AACf"}

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

@@ -1,30 +1,26 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import styles from './InlineCode.module.scss.mjs';
-import { isAlphaColor } from '../../lib/types/props.mjs';
-
-const InlineCode = (props) => {
-  const {
-    children,
-    className,
-    color = "default",
-    style: styleFromProps,
-    whiteSpace,
-    ...rest
-  } = props;
-  const rootClassName = clsx(
-    styles.inlineCode,
-    isAlphaColor(color) && styles[color],
-    className
-  );
-  const style = {
-    whiteSpace,
-    ...styleFromProps
-  };
-  return /* @__PURE__ */ jsx("code", { ...rest, style, className: rootClassName, children });
+import { isAlphaColor } from "../../lib/types/props.mjs";
+import InlineCode_module_default from "./InlineCode.module.mjs";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/InlineCode/InlineCode.tsx
+/** @flr-generate all */
+var InlineCode = (props) => {
+	const { children, className, color = "default", style: styleFromProps, whiteSpace, ...rest } = props;
+	const rootClassName = clsx(InlineCode_module_default.inlineCode, isAlphaColor(color) && InlineCode_module_default[color], className);
+	const style = {
+		whiteSpace,
+		...styleFromProps
+	};
+	return /* @__PURE__ */ jsx("code", {
+		...rest,
+		style,
+		className: rootClassName,
+		children
+	});
 };
+//#endregion
+export { InlineCode, InlineCode as default };
 
-export { InlineCode };
-//# sourceMappingURL=InlineCode.mjs.map
+//# sourceMappingURL=InlineCode.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"InlineCode.mjs","sources":["../../../../../../../src/components/InlineCode/InlineCode.tsx"],"sourcesContent":["import type {\n  ComponentProps,\n  CSSProperties,\n  FC,\n  PropsWithChildren,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./InlineCode.module.scss\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\n\nexport interface InlineCodeProps extends PropsWithChildren<\n  ComponentProps<\"code\">\n> {\n  /** The color schema of the inline code component. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The white-space property of the inline code component. @default undefined */\n  whiteSpace?: CSSProperties[\"whiteSpace\"];\n}\n\n/** @flr-generate all */\nexport const InlineCode: FC<InlineCodeProps> = (props) => {\n  const {\n    children,\n    className,\n    color = \"default\",\n    style: styleFromProps,\n    whiteSpace,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.inlineCode,\n    isAlphaColor(color) && styles[color],\n    className,\n  );\n\n  const style = {\n    whiteSpace,\n    ...styleFromProps,\n  };\n\n  return (\n    <code {...rest} style={style} className={rootClassName}>\n      {children}\n    </code>\n  );\n};\n\nexport default InlineCode;\n"],"names":[],"mappings":";;;;;AAoBO,MAAM,UAAA,GAAkC,CAAC,KAAA,KAAU;AACxD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA,GAAQ,SAAA;AAAA,IACR,KAAA,EAAO,cAAA;AAAA,IACP,UAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,UAAA;AAAA,IACP,YAAA,CAAa,KAAK,CAAA,IAAK,MAAA,CAAO,KAAK,CAAA;AAAA,IACnC;AAAA,GACF;AAEA,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,UAAA;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,2BACG,MAAA,EAAA,EAAM,GAAG,MAAM,KAAA,EAAc,SAAA,EAAW,eACtC,QAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"InlineCode.mjs","names":[],"sources":["../../../../../../../src/components/InlineCode/InlineCode.tsx"],"sourcesContent":["import type {\n  ComponentProps,\n  CSSProperties,\n  FC,\n  PropsWithChildren,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./InlineCode.module.scss\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\n\nexport interface InlineCodeProps extends PropsWithChildren<\n  ComponentProps<\"code\">\n> {\n  /** The color schema of the inline code component. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The white-space property of the inline code component. @default undefined */\n  whiteSpace?: CSSProperties[\"whiteSpace\"];\n}\n\n/** @flr-generate all */\nexport const InlineCode: FC<InlineCodeProps> = (props) => {\n  const {\n    children,\n    className,\n    color = \"default\",\n    style: styleFromProps,\n    whiteSpace,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.inlineCode,\n    isAlphaColor(color) && styles[color],\n    className,\n  );\n\n  const style = {\n    whiteSpace,\n    ...styleFromProps,\n  };\n\n  return (\n    <code {...rest} style={style} className={rootClassName}>\n      {children}\n    </code>\n  );\n};\n\nexport default InlineCode;\n"],"mappings":";;;;;;;;AAoBA,IAAa,cAAmC,UAAU;CACxD,MAAM,EACJ,UACA,WACA,QAAQ,WACR,OAAO,gBACP,YACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,0BAAO,YACP,aAAa,KAAK,KAAK,0BAAO,QAC9B,SACF;CAEA,MAAM,QAAQ;EACZ;EACA,GAAG;CACL;CAEA,OACE,oBAAC,QAAD;EAAM,GAAI;EAAa;EAAO,WAAW;EACtC;CACG,CAAA;AAEV"}

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

@@ -0,0 +1,17 @@
+"use client"
+/* */
+//#region src/components/InlineCode/InlineCode.module.scss
+var inlineCode = "flow--inline-code";
+var dark = "flow--inline-code--dark";
+var light = "flow--inline-code--light";
+var InlineCode_module_default = {
+	inlineCode,
+	dark,
+	light,
+	"dark-static": "flow--inline-code--dark-static",
+	"light-static": "flow--inline-code--light-static"
+};
+//#endregion
+export { dark, InlineCode_module_default as default, inlineCode, light };
+
+//# sourceMappingURL=InlineCode.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InlineCode.module.mjs","names":[],"sources":["../../../../../../../src/components/InlineCode/InlineCode.module.scss"],"sourcesContent":[".inlineCode {\n  font-family: FiraCode, monospace;\n  font-size: var(--inline-code--font-size);\n  overflow-wrap: anywhere;\n  padding-inline: var(--inline-code--padding-x);\n  padding-block: var(--inline-code--padding-y);\n  border-radius: var(--inline-code--corner-radius);\n  display: inline;\n  width: fit-content;\n  max-width: 100%;\n  min-width: 0;\n  color: var(--inline-code--content-color);\n  background-color: var(--inline-code--background-color);\n\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      color: var(--inline-code--#{$color}-content-color);\n      background-color: var(--inline-code--#{$color}-background-color);\n    }\n  }\n\n  @include color(dark);\n  @include color(light);\n  @include color(dark-static);\n  @include color(light-static);\n}\n"],"mappings":""}

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

@@ -1,8 +1,9 @@
 "use client"
 /* */
-import { I18nProvider } from 'react-aria-components';
-
-const IntlProvider = I18nProvider;
-
+import { I18nProvider } from "react-aria-components";
+//#region src/components/IntlProvider/IntlProvider.ts
+var IntlProvider = I18nProvider;
+//#endregion
 export { IntlProvider };
-//# sourceMappingURL=IntlProvider.mjs.map
+
+//# sourceMappingURL=IntlProvider.mjs.map