@mittwald/flow-react-components 0.2.0-alpha.865 → 0.2.0-alpha.867

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

@@ -1,79 +1,67 @@
 "use client"
 /* */
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffectEvent, 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';
-
-const ImageCropper = (props) => {
-  const {
-    image,
-    className,
-    onCropComplete,
-    width = 300,
-    height = 300,
-    aspectRatio,
-    ...rest
-  } = props;
-  const imageSrc = useImageSrc(image);
-  const [crop, setCrop] = useState({ x: 0, y: 0 });
-  const [zoom, setZoom] = useState(1);
-  const [croppedAreaPixels, setCroppedAreaPixels] = useState();
-  const rootClassName = clsx(styles.imageCropper, className);
-  const stringFormatter = useLocalizedStringFormatter(locales, "ImageCropper");
-  const onCropAreaPixelsChange = useEffectEvent(async () => {
-    if (croppedAreaPixels) {
-      const croppedImageFile = await getCroppedImageFile(
-        imageSrc,
-        croppedAreaPixels
-      );
-      if (onCropComplete) {
-        onCropComplete(croppedImageFile);
-      }
-    }
-  });
-  useEffect(() => {
-    void onCropAreaPixelsChange();
-  }, [croppedAreaPixels]);
-  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,
-        onCropComplete: (_, croppedAreaPixels2) => setCroppedAreaPixels(croppedAreaPixels2),
-        ...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 "../Slider/index.mjs";
+import { getCroppedImageFile } from "./lib/getCroppedImageFile.mjs";
+import __locale_default from "../../../../../_virtual/_18.locale.mjs";
+import { useImageSrc } from "../../lib/hooks/useImageSrc.mjs";
+import clsx from "clsx";
+import { useEffect, useEffectEvent, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Cropper from "react-easy-crop";
+//#region src/components/ImageCropper/ImageCropper.tsx
+/** @flr-generate all */
+var ImageCropper = (props) => {
+	const { image, className, onCropComplete, width = 300, height = 300, aspectRatio, ...rest } = props;
+	const imageSrc = useImageSrc(image);
+	const [crop, setCrop] = useState({
+		x: 0,
+		y: 0
+	});
+	const [zoom, setZoom] = useState(1);
+	const [croppedAreaPixels, setCroppedAreaPixels] = useState();
+	const rootClassName = clsx(ImageCropper_module_default.imageCropper, className);
+	const stringFormatter = useLocalizedStringFormatter(__locale_default, "ImageCropper");
+	const onCropAreaPixelsChange = useEffectEvent(async () => {
+		if (croppedAreaPixels) {
+			const croppedImageFile = await getCroppedImageFile(imageSrc, croppedAreaPixels);
+			if (onCropComplete) onCropComplete(croppedImageFile);
+		}
+	});
+	useEffect(() => {
+		onCropAreaPixelsChange();
+	}, [croppedAreaPixels]);
+	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,
+				onCropComplete: (_, croppedAreaPixels) => setCroppedAreaPixels(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 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 {\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          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          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,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,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","names":[],"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          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          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"],"mappings":";;;;;;;;;;;;;AAgCA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EACJ,OACA,WACA,gBACA,QAAQ,KACR,SAAS,KACT,aACA,GAAG,SACD;CAEJ,MAAM,WAAW,YAAY,KAAK;CAElC,MAAM,CAAC,MAAM,WAAW,SAAS;EAAE,GAAG;EAAG,GAAG;CAAE,CAAC;CAC/C,MAAM,CAAC,MAAM,WAAW,SAAS,CAAC;CAClC,MAAM,CAAC,mBAAmB,wBAAwB,SAAe;CAEjE,MAAM,gBAAgB,KAAK,4BAAO,cAAc,SAAS;CAEzD,MAAM,kBAAkB,4BAA4B,kBAAS,cAAc;CAE3E,MAAM,yBAAyB,eAAe,YAAY;EACxD,IAAI,mBAAmB;GACrB,MAAM,mBAAmB,MAAM,oBAC7B,UACA,iBACF;GACA,IAAI,gBACF,eAAe,gBAAgB;EAEnC;CACF,CAAC;CAED,gBAAgB;EACd,uBAA4B;CAC9B,GAAG,CAAC,iBAAiB,CAAC;CAEtB,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,OAAO,EAAE,MAAM;YAA9C,CACE,oBAAC,OAAD;GAAK,WAAW,4BAAO;GAAkB,OAAO,EAAE,OAAO;aACvD,oBAAC,SAAD;IACE,OAAO,EACL,gBAAgB,EACd,cAAc,kDAChB,EACF;IACA,QAAQ;IACF;IACN,OAAO;IACP,cAAc;IACR;IACN,cAAc;IACd,iBAAiB,GAAG,sBAClB,qBAAqB,iBAAiB;IAExC,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,10 @@
+"use client"
+/* */
+var ImageCropper_module_default = {
+	imageCropper: "flow--image-cropper",
+	cropperContainer: "flow--image-cropper--cropper-container"
+};
+//#endregion
+export { ImageCropper_module_default as default };
+
+//# 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  :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"],"mappings":""}

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

@@ -0,0 +1 @@
+import "./ImageCropper.mjs";

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

@@ -1,49 +1,32 @@
 "use client"
 /* */
+//#region src/components/ImageCropper/lib/getCroppedImageFile.ts
 function getCroppedImageFile(imageSrc, pixelCrop) {
-  return new Promise((resolve, reject) => {
-    const image = new Image();
-    image.crossOrigin = "anonymous";
-    image.src = imageSrc;
-    image.onload = () => {
-      const canvas = document.createElement("canvas");
-      canvas.width = pixelCrop.width;
-      canvas.height = pixelCrop.height;
-      const ctx = canvas.getContext("2d");
-      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
-      );
-      canvas.toBlob(
-        (blob) => {
-          if (!blob) {
-            return;
-          }
-          const file = new File([blob], "cropped-image.png", {
-            type: "image/png"
-          });
-          resolve(file);
-        },
-        "image/png",
-        85
-      );
-    };
-    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");
+			canvas.width = pixelCrop.width;
+			canvas.height = pixelCrop.height;
+			const ctx = canvas.getContext("2d");
+			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);
+			canvas.toBlob((blob) => {
+				if (!blob) return;
+				resolve(new File([blob], "cropped-image.png", { type: "image/png" }));
+			}, "image/png", 85);
+		};
+		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  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      canvas.width = pixelCrop.width;\n      canvas.height = pixelCrop.height;\n      const ctx = canvas.getContext(\"2d\");\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      canvas.toBlob(\n        (blob) => {\n          if (!blob) {\n            return;\n          }\n\n          const file = new File([blob], \"cropped-image.png\", {\n            type: \"image/png\",\n          });\n          resolve(file);\n        },\n        \"image/png\",\n        85,\n      );\n    };\n\n    image.onerror = () => {\n      reject(new Error(\"Failed to load image\"));\n    };\n  });\n}\n"],"names":[],"mappings":"AAEO,SAAS,mBAAA,CACd,UACA,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,MAAA,CAAO,QAAQ,SAAA,CAAU,KAAA;AACzB,MAAA,MAAA,CAAO,SAAS,SAAA,CAAU,MAAA;AAC1B,MAAA,MAAM,GAAA,GAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAA;AAElC,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,MAAA,CAAO,MAAA;AAAA,QACL,CAAC,IAAA,KAAS;AACR,UAAA,IAAI,CAAC,IAAA,EAAM;AACT,YAAA;AAAA,UACF;AAEA,UAAA,MAAM,OAAO,IAAI,IAAA,CAAK,CAAC,IAAI,GAAG,mBAAA,EAAqB;AAAA,YACjD,IAAA,EAAM;AAAA,WACP,CAAA;AACD,UAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,QACd,CAAA;AAAA,QACA,WAAA;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  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      canvas.width = pixelCrop.width;\n      canvas.height = pixelCrop.height;\n      const ctx = canvas.getContext(\"2d\");\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      canvas.toBlob(\n        (blob) => {\n          if (!blob) {\n            return;\n          }\n\n          const file = new File([blob], \"cropped-image.png\", {\n            type: \"image/png\",\n          });\n          resolve(file);\n        },\n        \"image/png\",\n        85,\n      );\n    };\n\n    image.onerror = () => {\n      reject(new Error(\"Failed to load image\"));\n    };\n  });\n}\n"],"mappings":";AAEA,SAAgB,oBACd,UACA,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,OAAO,QAAQ,UAAU;GACzB,OAAO,SAAS,UAAU;GAC1B,MAAM,MAAM,OAAO,WAAW,IAAI;GAElC,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,OAAO,QACJ,SAAS;IACR,IAAI,CAAC,MACH;IAMF,QAAQ,IAHS,KAAK,CAAC,IAAI,GAAG,qBAAqB,EACjD,MAAM,YACR,CACQ,CAAI;GACd,GACA,aACA,EACF;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,34 @@
 "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": 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);
+	return /* @__PURE__ */ jsx("div", {
+		"data-dynamic-color": useMemo(() => useDynamicColor ? getColorFromInitials(textContent) : void 0, [useDynamicColor, textContent]),
+		"aria-hidden": ariaHidden,
+		"aria-label": textContent,
+		className: clsx(Initials_module_default.initials, className),
+		ref,
+		role: "img",
+		children: initials.map((initial, index) => /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			role: "presentation",
+			children: initial
+		}, index))
+	});
 });
+//#endregion
+export { 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={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,WAAA;AAAA,MACZ,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={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,OACE,oBAAC,OAAD;EACE,sBAfiB,cACZ,kBAAkB,qBAAqB,WAAW,IAAI,KAAA,GAC7D,CAAC,iBAAiB,WAAW,CAaP;EACpB,eAAa;EACb,cAAY;EACZ,WAbkB,KAAK,wBAAO,UAAU,SAa7B;EACN;EACL,MAAK;YAbgB,SAAS,KAAK,SAAS,UAC9C,oBAAC,QAAD;GAAM,eAAA;GAAY,MAAK;aACpB;EACG,GAFqC,KAErC,CAYH;CACE,CAAA;AAET,CAAC"}

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

@@ -0,0 +1,7 @@
+"use client"
+/* */
+var Initials_module_default = { initials: "flow--initials" };
+//#endregion
+export { Initials_module_default as default };
+
+//# 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/index.mjs

@@ -0,0 +1 @@
+import "./Initials.mjs";

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

@@ -1,13 +1,13 @@
 "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);
+	return avatarColors[Math.abs(code % (avatarColors.length - 1))] ?? "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;CAEhC,OAAO,aADQ,KAAK,IAAI,QAAQ,aAAa,SAAS,EAClC,MAAW;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,EACL,MAAM,KAAK,EACX,KAAK,SAAS;EAGb,MAAM,QAFa,KAAK,KAEV,EAAW,MAAM,oBAAoB;EAEnD,OAAO,QAAQ,MAAM,GAAG,YAAY,IAAI;CAC1C,CAAC,EACA,OAAO,OAAO,EACd,MAAM,GAAG,CAAC;AACf"}

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

@@ -1,19 +1,21 @@
 "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", ...rest } = props;
-  const rootClassName = clsx(
-    styles.inlineCode,
-    className,
-    isAlphaColor(color) && styles[color]
-  );
-  return /* @__PURE__ */ jsx("code", { ...rest, 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", ...rest } = props;
+	const rootClassName = clsx(InlineCode_module_default.inlineCode, className, isAlphaColor(color) && InlineCode_module_default[color]);
+	return /* @__PURE__ */ jsx("code", {
+		...rest,
+		className: rootClassName,
+		children
+	});
 };
+//#endregion
+export { 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 { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./InlineCode.module.scss\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\n\nexport interface InlineCodeProps extends PropsWithChildren<\n  ComponentProps<\"code\">\n> {\n  /** The color schema of the inline code component. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const InlineCode: FC<InlineCodeProps> = (props) => {\n  const { children, className, color = \"default\", ...rest } = props;\n\n  const rootClassName = clsx(\n    styles.inlineCode,\n    className,\n    isAlphaColor(color) && styles[color],\n  );\n\n  return (\n    <code {...rest} className={rootClassName}>\n      {children}\n    </code>\n  );\n};\n\nexport default InlineCode;\n"],"names":[],"mappings":";;;;;AAaO,MAAM,UAAA,GAAkC,CAAC,KAAA,KAAU;AACxD,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,QAAQ,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAE5D,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,UAAA;AAAA,IACP,SAAA;AAAA,IACA,YAAA,CAAa,KAAK,CAAA,IAAK,MAAA,CAAO,KAAK;AAAA,GACrC;AAEA,EAAA,2BACG,MAAA,EAAA,EAAM,GAAG,IAAA,EAAM,SAAA,EAAW,eACxB,QAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"InlineCode.mjs","names":[],"sources":["../../../../../../../src/components/InlineCode/InlineCode.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./InlineCode.module.scss\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\n\nexport interface InlineCodeProps extends PropsWithChildren<\n  ComponentProps<\"code\">\n> {\n  /** The color schema of the inline code component. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const InlineCode: FC<InlineCodeProps> = (props) => {\n  const { children, className, color = \"default\", ...rest } = props;\n\n  const rootClassName = clsx(\n    styles.inlineCode,\n    className,\n    isAlphaColor(color) && styles[color],\n  );\n\n  return (\n    <code {...rest} className={rootClassName}>\n      {children}\n    </code>\n  );\n};\n\nexport default InlineCode;\n"],"mappings":";;;;;;AAaA,IAAa,cAAmC,UAAU;CACxD,MAAM,EAAE,UAAU,WAAW,QAAQ,WAAW,GAAG,SAAS;CAE5D,MAAM,gBAAgB,KACpB,0BAAO,YACP,WACA,aAAa,KAAK,KAAK,0BAAO,MAChC;CAEA,OACE,oBAAC,QAAD;EAAM,GAAI;EAAM,WAAW;EACxB;CACG,CAAA;AAEV"}

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

@@ -0,0 +1,13 @@
+"use client"
+/* */
+var InlineCode_module_default = {
+	inlineCode: "flow--inline-code",
+	dark: "flow--inline-code--dark",
+	light: "flow--inline-code--light",
+	"dark-static": "flow--inline-code--dark-static",
+	"light-static": "flow--inline-code--light-static"
+};
+//#endregion
+export { InlineCode_module_default as default };
+
+//# 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/InlineCode/index.mjs

@@ -0,0 +1 @@
+import "./InlineCode.mjs";

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

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

@@ -1 +1 @@
-{"version":3,"file":"IntlProvider.mjs","sources":["../../../../../../../src/components/IntlProvider/IntlProvider.ts"],"sourcesContent":["import { I18nProvider } from \"react-aria-components\";\nexport const IntlProvider = I18nProvider;\n"],"names":[],"mappings":";;AACO,MAAM,YAAA,GAAe;;;;"}
+{"version":3,"file":"IntlProvider.mjs","names":[],"sources":["../../../../../../../src/components/IntlProvider/IntlProvider.ts"],"sourcesContent":["import { I18nProvider } from \"react-aria-components\";\nexport const IntlProvider = I18nProvider;\n"],"mappings":";;AACA,IAAa,eAAe"}

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

@@ -0,0 +1 @@
+import "./IntlProvider.mjs";