@mittwald/flow-react-components 0.2.0-alpha.782 → 0.2.0-alpha.784

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

@@ -1,45 +1,47 @@
 "use client"
 /* */
-import PropsContextProvider from "../../lib/propsContext/components/PropsContextProvider.mjs";
-import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
-import "../../lib/propsContext/index.mjs";
-import { isAlphaColor } from "../../lib/types/props.mjs";
-import IllustratedMessage_module_default from "./IllustratedMessage.module.mjs";
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/IllustratedMessage/IllustratedMessage.tsx
-/** @flr-generate all */
-var IllustratedMessage = flowComponent("IllustratedMessage", (props) => {
-	const { className, children, color = "primary", ...rest } = props;
-	const rootClassName = clsx(IllustratedMessage_module_default.illustratedMessage, className, IllustratedMessage_module_default[color]);
-	const alphaColor = isAlphaColor(color) ? color : void 0;
-	const propsContext = {
-		Icon: {
-			className: IllustratedMessage_module_default.icon,
-			size: "l"
-		},
-		Heading: {
-			className: IllustratedMessage_module_default.heading,
-			color
-		},
-		Text: {
-			className: IllustratedMessage_module_default.text,
-			color: alphaColor
-		},
-		Button: { color: alphaColor ?? "accent" },
-		ActionGroup: { className: IllustratedMessage_module_default.actionGroup },
-		ProgressBar: { className: IllustratedMessage_module_default.progressBar }
-	};
-	return /* @__PURE__ */ jsx("div", {
-		...rest,
-		className: rootClassName,
-		children: /* @__PURE__ */ jsx(PropsContextProvider, {
-			props: propsContext,
-			children
-		})
-	});
-});
-//#endregion
-export { IllustratedMessage as default };
+import { jsx } from 'react/jsx-runtime';
+import styles from './IllustratedMessage.module.scss.mjs';
+import clsx from 'clsx';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { isAlphaColor } from '../../lib/types/props.mjs';
 
-//# sourceMappingURL=IllustratedMessage.mjs.map
+const IllustratedMessage = flowComponent(
+  "IllustratedMessage",
+  (props) => {
+    const { className, children, color = "primary", ...rest } = props;
+    const rootClassName = clsx(
+      styles.illustratedMessage,
+      className,
+      styles[color]
+    );
+    const alphaColor = isAlphaColor(color) ? color : void 0;
+    const propsContext = {
+      Icon: {
+        className: styles.icon,
+        size: "l"
+      },
+      Heading: {
+        className: styles.heading,
+        color
+      },
+      Text: {
+        className: styles.text,
+        color: alphaColor
+      },
+      Button: {
+        color: alphaColor ?? "accent"
+      },
+      ActionGroup: {
+        className: styles.actionGroup
+      },
+      ProgressBar: { className: styles.progressBar }
+    };
+    return /* @__PURE__ */ jsx("div", { ...rest, className: rootClassName, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }) });
+  }
+);
+
+export { IllustratedMessage };
+//# sourceMappingURL=IllustratedMessage.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"IllustratedMessage.mjs","names":[],"sources":["../../../../../../../src/components/IllustratedMessage/IllustratedMessage.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport styles from \"./IllustratedMessage.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\n\nexport interface IllustratedMessageProps\n  extends PropsWithChildren<ComponentProps<\"div\">>, FlowComponentProps {\n  /** The color of the illustrated message. @default \"primary\" */\n  color?: \"primary\" | \"danger\" | \"unavailable\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const IllustratedMessage = flowComponent(\n  \"IllustratedMessage\",\n  (props) => {\n    const { className, children, color = \"primary\", ...rest } = props;\n\n    const rootClassName = clsx(\n      styles.illustratedMessage,\n      className,\n      styles[color],\n    );\n\n    const alphaColor = isAlphaColor(color) ? color : undefined;\n\n    const propsContext: PropsContext = {\n      Icon: {\n        className: styles.icon,\n        size: \"l\",\n      },\n      Heading: {\n        className: styles.heading,\n        color,\n      },\n      Text: {\n        className: styles.text,\n        color: alphaColor,\n      },\n      Button: {\n        color: alphaColor ?? \"accent\",\n      },\n      ActionGroup: {\n        className: styles.actionGroup,\n      },\n      ProgressBar: { className: styles.progressBar },\n    };\n\n    return (\n      <div {...rest} className={rootClassName}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </div>\n    );\n  },\n);\n\nexport default IllustratedMessage;\n"],"mappings":";;;;;;;;;AAkBA,IAAa,qBAAqB,cAChC,uBACC,UAAU;CACT,MAAM,EAAE,WAAW,UAAU,QAAQ,WAAW,GAAG,SAAS;CAE5D,MAAM,gBAAgB,KACpB,kCAAO,oBACP,WACA,kCAAO,OACR;CAED,MAAM,aAAa,aAAa,MAAM,GAAG,QAAQ,KAAA;CAEjD,MAAM,eAA6B;EACjC,MAAM;GACJ,WAAW,kCAAO;GAClB,MAAM;GACP;EACD,SAAS;GACP,WAAW,kCAAO;GAClB;GACD;EACD,MAAM;GACJ,WAAW,kCAAO;GAClB,OAAO;GACR;EACD,QAAQ,EACN,OAAO,cAAc,UACtB;EACD,aAAa,EACX,WAAW,kCAAO,aACnB;EACD,aAAa,EAAE,WAAW,kCAAO,aAAa;EAC/C;AAED,QACE,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW;YACxB,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;GACoB,CAAA;EACnB,CAAA;EAGX"}
+{"version":3,"file":"IllustratedMessage.mjs","sources":["../../../../../../../src/components/IllustratedMessage/IllustratedMessage.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport styles from \"./IllustratedMessage.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\n\nexport interface IllustratedMessageProps\n  extends PropsWithChildren<ComponentProps<\"div\">>, FlowComponentProps {\n  /** The color of the illustrated message. @default \"primary\" */\n  color?: \"primary\" | \"danger\" | \"unavailable\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const IllustratedMessage = flowComponent(\n  \"IllustratedMessage\",\n  (props) => {\n    const { className, children, color = \"primary\", ...rest } = props;\n\n    const rootClassName = clsx(\n      styles.illustratedMessage,\n      className,\n      styles[color],\n    );\n\n    const alphaColor = isAlphaColor(color) ? color : undefined;\n\n    const propsContext: PropsContext = {\n      Icon: {\n        className: styles.icon,\n        size: \"l\",\n      },\n      Heading: {\n        className: styles.heading,\n        color,\n      },\n      Text: {\n        className: styles.text,\n        color: alphaColor,\n      },\n      Button: {\n        color: alphaColor ?? \"accent\",\n      },\n      ActionGroup: {\n        className: styles.actionGroup,\n      },\n      ProgressBar: { className: styles.progressBar },\n    };\n\n    return (\n      <div {...rest} className={rootClassName}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </div>\n    );\n  },\n);\n\nexport default IllustratedMessage;\n"],"names":[],"mappings":";;;;;;;;AAkBO,MAAM,kBAAA,GAAqB,aAAA;AAAA,EAChC,oBAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,QAAQ,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAE5D,IAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,MACpB,MAAA,CAAO,kBAAA;AAAA,MACP,SAAA;AAAA,MACA,OAAO,KAAK;AAAA,KACd;AAEA,IAAA,MAAM,UAAA,GAAa,YAAA,CAAa,KAAK,CAAA,GAAI,KAAA,GAAQ,MAAA;AAEjD,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,IAAA,EAAM;AAAA,QACJ,WAAW,MAAA,CAAO,IAAA;AAAA,QAClB,IAAA,EAAM;AAAA,OACR;AAAA,MACA,OAAA,EAAS;AAAA,QACP,WAAW,MAAA,CAAO,OAAA;AAAA,QAClB;AAAA,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,WAAW,MAAA,CAAO,IAAA;AAAA,QAClB,KAAA,EAAO;AAAA,OACT;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,OAAO,UAAA,IAAc;AAAA,OACvB;AAAA,MACA,WAAA,EAAa;AAAA,QACX,WAAW,MAAA,CAAO;AAAA,OACpB;AAAA,MACA,WAAA,EAAa,EAAE,SAAA,EAAW,MAAA,CAAO,WAAA;AAAY,KAC/C;AAEA,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,SAAA,EAAW,aAAA,EACxB,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,CAAA,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}

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

@@ -0,0 +1,31 @@
+"use client"
+/* */
+const illustratedMessage = "flow--illustrated-message";
+const icon = "flow--illustrated-message--icon";
+const text = "flow--illustrated-message--text";
+const heading = "flow--illustrated-message--heading";
+const actionGroup = "flow--illustrated-message--action-group";
+const progressBar = "flow--illustrated-message--progress-bar";
+const primary = "flow--illustrated-message--primary";
+const danger = "flow--illustrated-message--danger";
+const unavailable = "flow--illustrated-message--unavailable";
+const dark = "flow--illustrated-message--dark";
+const light = "flow--illustrated-message--light";
+const styles = {
+	illustratedMessage: illustratedMessage,
+	icon: icon,
+	text: text,
+	heading: heading,
+	actionGroup: actionGroup,
+	progressBar: progressBar,
+	primary: primary,
+	danger: danger,
+	unavailable: unavailable,
+	dark: dark,
+	light: light,
+	"dark-static": "flow--illustrated-message--dark-static",
+	"light-static": "flow--illustrated-message--light-static"
+};
+
+export { actionGroup, danger, dark, styles as default, heading, icon, illustratedMessage, light, primary, progressBar, text, unavailable };
+//# sourceMappingURL=IllustratedMessage.module.scss.mjs.map

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

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

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

@@ -1,26 +1,37 @@
 "use client"
 /* */
-import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
-import Image_module_default from "./Image.module.mjs";
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/Image/Image.tsx
-/** @flr-generate all */
-var Image = flowComponent("Image", (props) => {
-	const { className, withBorder, style, aspectRatio, width, height, ref, ...rest } = props;
-	return /* @__PURE__ */ jsx("img", {
-		ref,
-		className: clsx(Image_module_default.image, withBorder && Image_module_default.border, aspectRatio && Image_module_default.aspectRatio, className),
-		style: {
-			...style,
-			aspectRatio,
-			width,
-			height
-		},
-		...rest
-	});
+import { jsx } from 'react/jsx-runtime';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import clsx from 'clsx';
+import styles from './Image.module.scss.mjs';
+
+const Image = flowComponent("Image", (props) => {
+  const {
+    className,
+    withBorder,
+    style,
+    aspectRatio,
+    width,
+    height,
+    ref,
+    ...rest
+  } = props;
+  const rootClassName = clsx(
+    styles.image,
+    withBorder && styles.border,
+    aspectRatio && styles.aspectRatio,
+    className
+  );
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      ref,
+      className: rootClassName,
+      style: { ...style, aspectRatio, width, height },
+      ...rest
+    }
+  );
 });
-//#endregion
-export { Image as default };
 
-//# sourceMappingURL=Image.mjs.map
+export { Image };
+//# sourceMappingURL=Image.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Image.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.tsx"],"sourcesContent":["import type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { ComponentProps } from \"react\";\nimport styles from \"./Image.module.scss\";\n\nexport interface ImageProps\n  extends\n    Omit<ComponentProps<\"img\">, \"ref\">,\n    FlowComponentProps<HTMLImageElement> {\n  /** Display the image with border and rounded edges. */\n  withBorder?: boolean;\n  /**\n   * The aspect ratio of the images container. Larger images will be centered\n   * and their overflow will be hidden.\n   */\n  aspectRatio?: number;\n}\n\n/** @flr-generate all */\nexport const Image = flowComponent(\"Image\", (props) => {\n  const {\n    className,\n    withBorder,\n    style,\n    aspectRatio,\n    width,\n    height,\n    ref,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.image,\n    withBorder && styles.border,\n    aspectRatio && styles.aspectRatio,\n    className,\n  );\n\n  return (\n    <img\n      ref={ref}\n      className={rootClassName}\n      style={{ ...style, aspectRatio, width, height }}\n      {...rest}\n    />\n  );\n});\n\nexport default Image;\n"],"mappings":";;;;;;AAoBA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,WACA,YACA,OACA,aACA,OACA,QACA,KACA,GAAG,SACD;AASJ,QACE,oBAAC,OAAD;EACO;EACL,WAVkB,KACpB,qBAAO,OACP,cAAc,qBAAO,QACrB,eAAe,qBAAO,aACtB,UACD;EAMG,OAAO;GAAE,GAAG;GAAO;GAAa;GAAO;GAAQ;EAC/C,GAAI;EACJ,CAAA;EAEJ"}
+{"version":3,"file":"Image.mjs","sources":["../../../../../../../src/components/Image/Image.tsx"],"sourcesContent":["import type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { ComponentProps } from \"react\";\nimport styles from \"./Image.module.scss\";\n\nexport interface ImageProps\n  extends\n    Omit<ComponentProps<\"img\">, \"ref\">,\n    FlowComponentProps<HTMLImageElement> {\n  /** Display the image with border and rounded edges. */\n  withBorder?: boolean;\n  /**\n   * The aspect ratio of the images container. Larger images will be centered\n   * and their overflow will be hidden.\n   */\n  aspectRatio?: number;\n}\n\n/** @flr-generate all */\nexport const Image = flowComponent(\"Image\", (props) => {\n  const {\n    className,\n    withBorder,\n    style,\n    aspectRatio,\n    width,\n    height,\n    ref,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.image,\n    withBorder && styles.border,\n    aspectRatio && styles.aspectRatio,\n    className,\n  );\n\n  return (\n    <img\n      ref={ref}\n      className={rootClassName}\n      style={{ ...style, aspectRatio, width, height }}\n      {...rest}\n    />\n  );\n});\n\nexport default Image;\n"],"names":[],"mappings":";;;;;AAoBO,MAAM,KAAA,GAAQ,aAAA,CAAc,OAAA,EAAS,CAAC,KAAA,KAAU;AACrD,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,KAAA;AAAA,IACP,cAAc,MAAA,CAAO,MAAA;AAAA,IACrB,eAAe,MAAA,CAAO,WAAA;AAAA,IACtB;AAAA,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,aAAA;AAAA,MACX,OAAO,EAAE,GAAG,KAAA,EAAO,WAAA,EAAa,OAAO,MAAA,EAAO;AAAA,MAC7C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,13 @@
+"use client"
+/* */
+const image = "flow--image";
+const border = "flow--image--border";
+const aspectRatio = "flow--image--aspect-ratio";
+const styles = {
+	image: image,
+	border: border,
+	aspectRatio: aspectRatio
+};
+
+export { aspectRatio, border, styles as default, image };
+//# sourceMappingURL=Image.module.scss.mjs.map

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

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

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

@@ -1,66 +1,74 @@
 "use client"
 /* */
-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/_16.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 { useLocalizedStringFormatter } from "react-aria";
-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);
-	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, {
-				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")
-		})]
-	});
+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 'react-aria';
+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);
+  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,
+      {
+        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")
+      }
+    )
+  ] });
 };
-//#endregion
-export { ImageCropper as default };
 
-//# sourceMappingURL=ImageCropper.mjs.map
+export { ImageCropper };
+//# sourceMappingURL=ImageCropper.mjs.map

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

@@ -1 +1 @@
-{"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 \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\nimport { useImageSrc } from \"@/lib/hooks/useImageSrc\";\n\nexport interface ImageCropperProps\n  extends PropsWithClassName, Partial<Pick<CropperProps, \"cropShape\">> {\n  /** The image file to crop. */\n  image?: File | string;\n  /** Callback on crop complete. */\n  onCropComplete?: (croppedImage: File) => void;\n  /** The width of the component. @default 300 */\n  width?: CSSProperties[\"width\"];\n  /** The height of the component. @default 300 */\n  height?: CSSProperties[\"height\"];\n  /** The aspect ratio of the crop shape. */\n  aspectRatio?: number;\n}\n\n/** @flr-generate all */\nexport const ImageCropper: FC<ImageCropperProps> = (props) => {\n  const {\n    image,\n    className,\n    onCropComplete,\n    width = 300,\n    height = 300,\n    aspectRatio,\n    ...rest\n  } = props;\n\n  const imageSrc = useImageSrc(image);\n\n  const [crop, setCrop] = useState({ x: 0, y: 0 });\n  const [zoom, setZoom] = useState(1);\n  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area>();\n\n  const rootClassName = clsx(styles.imageCropper, className);\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const onCropAreaPixelsChange = useEffectEvent(async () => {\n    if (croppedAreaPixels) {\n      const croppedImageFile = await getCroppedImageFile(\n        imageSrc,\n        croppedAreaPixels,\n      );\n      if (onCropComplete) {\n        onCropComplete(croppedImageFile);\n      }\n    }\n  });\n\n  useEffect(() => {\n    void onCropAreaPixelsChange();\n  }, [croppedAreaPixels]);\n\n  return (\n    <div className={rootClassName} style={{ width }}>\n      <div className={styles.cropperContainer} style={{ height }}>\n        <Cropper\n          aspect={aspectRatio}\n          crop={crop}\n          image={imageSrc}\n          onCropChange={setCrop}\n          zoom={zoom}\n          onZoomChange={setZoom}\n          onCropComplete={(_, croppedAreaPixels) =>\n            setCroppedAreaPixels(croppedAreaPixels)\n          }\n          {...rest}\n        />\n      </div>\n      <Slider\n        minValue={1}\n        maxValue={3}\n        step={0.01}\n        value={zoom}\n        sliderOnly\n        onChange={(zoom) => setZoom(zoom as number)}\n        aria-label={stringFormatter.format(\"zoom\")}\n      />\n    </div>\n  );\n};\n\nexport default ImageCropper;\n"],"mappings":";;;;;;;;;;;;;AAgCA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EACJ,OACA,WACA,gBACA,QAAQ,KACR,SAAS,KACT,aACA,GAAG,SACD;CAEJ,MAAM,WAAW,YAAY,MAAM;CAEnC,MAAM,CAAC,MAAM,WAAW,SAAS;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;CAChD,MAAM,CAAC,MAAM,WAAW,SAAS,EAAE;CACnC,MAAM,CAAC,mBAAmB,wBAAwB,UAAgB;CAElE,MAAM,gBAAgB,KAAK,4BAAO,cAAc,UAAU;CAE1D,MAAM,kBAAkB,4BAA4B,iBAAQ;CAE5D,MAAM,yBAAyB,eAAe,YAAY;AACxD,MAAI,mBAAmB;GACrB,MAAM,mBAAmB,MAAM,oBAC7B,UACA,kBACD;AACD,OAAI,eACF,gBAAe,iBAAiB;;GAGpC;AAEF,iBAAgB;AACT,0BAAwB;IAC5B,CAAC,kBAAkB,CAAC;AAEvB,QACE,qBAAC,OAAD;EAAK,WAAW;EAAe,OAAO,EAAE,OAAO;YAA/C,CACE,oBAAC,OAAD;GAAK,WAAW,4BAAO;GAAkB,OAAO,EAAE,QAAQ;aACxD,oBAAC,SAAD;IACE,QAAQ;IACF;IACN,OAAO;IACP,cAAc;IACR;IACN,cAAc;IACd,iBAAiB,GAAG,sBAClB,qBAAqB,kBAAkB;IAEzC,GAAI;IACJ,CAAA;GACE,CAAA,EACN,oBAAC,QAAD;GACE,UAAU;GACV,UAAU;GACV,MAAM;GACN,OAAO;GACP,YAAA;GACA,WAAW,SAAS,QAAQ,KAAe;GAC3C,cAAY,gBAAgB,OAAO,OAAO;GAC1C,CAAA,CACE"}
+{"version":3,"file":"ImageCropper.mjs","sources":["../../../../../../../src/components/ImageCropper/ImageCropper.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type FC,\n  useEffect,\n  useEffectEvent,\n  useState,\n} from \"react\";\nimport Cropper, { type Area, type CropperProps } from \"react-easy-crop\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./ImageCropper.module.scss\";\nimport { Slider } from \"@/components/Slider\";\nimport { getCroppedImageFile } from \"@/components/ImageCropper/lib/getCroppedImageFile\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\nimport { useImageSrc } from \"@/lib/hooks/useImageSrc\";\n\nexport interface ImageCropperProps\n  extends PropsWithClassName, Partial<Pick<CropperProps, \"cropShape\">> {\n  /** The image file to crop. */\n  image?: File | string;\n  /** Callback on crop complete. */\n  onCropComplete?: (croppedImage: File) => void;\n  /** The width of the component. @default 300 */\n  width?: CSSProperties[\"width\"];\n  /** The height of the component. @default 300 */\n  height?: CSSProperties[\"height\"];\n  /** The aspect ratio of the crop shape. */\n  aspectRatio?: number;\n}\n\n/** @flr-generate all */\nexport const ImageCropper: FC<ImageCropperProps> = (props) => {\n  const {\n    image,\n    className,\n    onCropComplete,\n    width = 300,\n    height = 300,\n    aspectRatio,\n    ...rest\n  } = props;\n\n  const imageSrc = useImageSrc(image);\n\n  const [crop, setCrop] = useState({ x: 0, y: 0 });\n  const [zoom, setZoom] = useState(1);\n  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area>();\n\n  const rootClassName = clsx(styles.imageCropper, className);\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const onCropAreaPixelsChange = useEffectEvent(async () => {\n    if (croppedAreaPixels) {\n      const croppedImageFile = await getCroppedImageFile(\n        imageSrc,\n        croppedAreaPixels,\n      );\n      if (onCropComplete) {\n        onCropComplete(croppedImageFile);\n      }\n    }\n  });\n\n  useEffect(() => {\n    void onCropAreaPixelsChange();\n  }, [croppedAreaPixels]);\n\n  return (\n    <div className={rootClassName} style={{ width }}>\n      <div className={styles.cropperContainer} style={{ height }}>\n        <Cropper\n          aspect={aspectRatio}\n          crop={crop}\n          image={imageSrc}\n          onCropChange={setCrop}\n          zoom={zoom}\n          onZoomChange={setZoom}\n          onCropComplete={(_, croppedAreaPixels) =>\n            setCroppedAreaPixels(croppedAreaPixels)\n          }\n          {...rest}\n        />\n      </div>\n      <Slider\n        minValue={1}\n        maxValue={3}\n        step={0.01}\n        value={zoom}\n        sliderOnly\n        onChange={(zoom) => setZoom(zoom as number)}\n        aria-label={stringFormatter.format(\"zoom\")}\n      />\n    </div>\n  );\n};\n\nexport default ImageCropper;\n"],"names":["croppedAreaPixels","zoom"],"mappings":";;;;;;;;;;;AAgCO,MAAM,YAAA,GAAsC,CAAC,KAAA,KAAU;AAC5D,EAAA,MAAM;AAAA,IACJ,KAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAA;AAAA,IACA,KAAA,GAAQ,GAAA;AAAA,IACR,MAAA,GAAS,GAAA;AAAA,IACT,WAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,QAAA,GAAW,YAAY,KAAK,CAAA;AAElC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,QAAA,CAAS,EAAE,CAAA,EAAG,CAAA,EAAG,CAAA,EAAG,CAAA,EAAG,CAAA;AAC/C,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,CAAC,CAAA;AAClC,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,QAAA,EAAe;AAEjE,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,YAAA,EAAc,SAAS,CAAA;AAEzD,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,sBAAA,GAAyB,eAAe,YAAY;AACxD,IAAA,IAAI,iBAAA,EAAmB;AACrB,MAAA,MAAM,mBAAmB,MAAM,mBAAA;AAAA,QAC7B,QAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,IAAI,cAAA,EAAgB;AAClB,QAAA,cAAA,CAAe,gBAAgB,CAAA;AAAA,MACjC;AAAA,IACF;AAAA,EACF,CAAC,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,KAAK,sBAAA,EAAuB;AAAA,EAC9B,CAAA,EAAG,CAAC,iBAAiB,CAAC,CAAA;AAEtB,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,eAAe,KAAA,EAAO,EAAE,OAAM,EAC5C,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAI,SAAA,EAAW,MAAA,CAAO,kBAAkB,KAAA,EAAO,EAAE,QAAO,EACvD,QAAA,kBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,MAAA,EAAQ,WAAA;AAAA,QACR,IAAA;AAAA,QACA,KAAA,EAAO,QAAA;AAAA,QACP,YAAA,EAAc,OAAA;AAAA,QACd,IAAA;AAAA,QACA,YAAA,EAAc,OAAA;AAAA,QACd,cAAA,EAAgB,CAAC,CAAA,EAAGA,kBAAAA,KAClB,qBAAqBA,kBAAiB,CAAA;AAAA,QAEvC,GAAG;AAAA;AAAA,KACN,EACF,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAU,CAAA;AAAA,QACV,QAAA,EAAU,CAAA;AAAA,QACV,IAAA,EAAM,IAAA;AAAA,QACN,KAAA,EAAO,IAAA;AAAA,QACP,UAAA,EAAU,IAAA;AAAA,QACV,QAAA,EAAU,CAACC,KAAAA,KAAS,OAAA,CAAQA,KAAc,CAAA;AAAA,QAC1C,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,MAAM;AAAA;AAAA;AAC3C,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,11 @@
+"use client"
+/* */
+const imageCropper = "flow--image-cropper";
+const cropperContainer = "flow--image-cropper--cropper-container";
+const styles = {
+	imageCropper: imageCropper,
+	cropperContainer: cropperContainer
+};
+
+export { cropperContainer, styles as default, imageCropper };
+//# sourceMappingURL=ImageCropper.module.scss.mjs.map

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

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

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

@@ -1,32 +1,45 @@
 "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(/* @__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");
-		};
-		image.onerror = () => {
-			reject(/* @__PURE__ */ 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(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");
+    };
+    image.onerror = () => {
+      reject(new Error("Failed to load image"));
+    };
+  });
 }
-//#endregion
-export { getCroppedImageFile };
 
-//# sourceMappingURL=getCroppedImageFile.mjs.map
+export { getCroppedImageFile };
+//# sourceMappingURL=getCroppedImageFile.mjs.map

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

@@ -1 +1 @@
-{"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((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      }, \"image/png\");\n    };\n\n    image.onerror = () => {\n      reject(new Error(\"Failed to load image\"));\n    };\n  });\n}\n"],"mappings":";AAEA,SAAgB,oBACd,UACA,WACe;AACf,QAAO,IAAI,SAAS,SAAS,WAAW;EACtC,MAAM,QAAQ,IAAI,OAAO;AACzB,QAAM,cAAc;AACpB,QAAM,MAAM;AAEZ,QAAM,eAAe;GACnB,MAAM,SAAS,SAAS,cAAc,SAAS;AAC/C,UAAO,QAAQ,UAAU;AACzB,UAAO,SAAS,UAAU;GAC1B,MAAM,MAAM,OAAO,WAAW,KAAK;AAEnC,OAAI,CAAC,KAAK;AACR,2BAAO,IAAI,MAAM,+BAA+B,CAAC;AACjD;;AAGF,OAAI,UACF,OACA,UAAU,GACV,UAAU,GACV,UAAU,OACV,UAAU,QACV,GACA,GACA,UAAU,OACV,UAAU,OACX;AAED,UAAO,QAAQ,SAAS;AACtB,QAAI,CAAC,KACH;AAMF,YAHa,IAAI,KAAK,CAAC,KAAK,EAAE,qBAAqB,EACjD,MAAM,aACP,CAAC,CACW;MACZ,YAAY;;AAGjB,QAAM,gBAAgB;AACpB,0BAAO,IAAI,MAAM,uBAAuB,CAAC;;GAE3C"}
+{"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((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      }, \"image/png\");\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,CAAO,CAAC,IAAA,KAAS;AACtB,QAAA,IAAI,CAAC,IAAA,EAAM;AACT,UAAA;AAAA,QACF;AAEA,QAAA,MAAM,OAAO,IAAI,IAAA,CAAK,CAAC,IAAI,GAAG,mBAAA,EAAqB;AAAA,UACjD,IAAA,EAAM;AAAA,SACP,CAAA;AACD,QAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,MACd,GAAG,WAAW,CAAA;AAAA,IAChB,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;;;;"}

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

@@ -1,29 +1,42 @@
 "use client"
 /* */
-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,
-		children: initials.map((initial, index) => /* @__PURE__ */ jsx("span", { children: initial }, index))
-	});
+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", { children: initial }, index));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-dynamic-color": dynamicColor,
+      "aria-hidden": ariaHidden,
+      "aria-label": textContent,
+      className: rootClassName,
+      ref,
+      children: initialsElements
+    }
+  );
 });
-//#endregion
-export { Initials as default };
 
-//# sourceMappingURL=Initials.mjs.map
+export { Initials };
+//# sourceMappingURL=Initials.mjs.map

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

@@ -1 +1 @@
-{"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 key={index}>{initial}</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    >\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,SAAS,IAAI;CAC3D,MAAM,WAAW,sBAAsB,YAAY;AAYnD,QACE,oBAAC,OAAD;EACE,sBAbiB,cACZ,kBAAkB,qBAAqB,YAAY,GAAG,KAAA,GAC7D,CAAC,iBAAiB,YAAY,CAC/B;EAWG,eAAa;EACb,cAAY;EACZ,WAXkB,KAAK,wBAAO,UAAU,UAAU;EAY7C;YAVgB,SAAS,KAAK,SAAS,UAC9C,oBAAC,QAAD,EAAA,UAAmB,SAAe,EAAvB,MAAuB,CAClC;EAWM,CAAA;EAER"}
+{"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 key={index}>{initial}</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    >\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,OAAA,EAAS,0BAC9C,GAAA,CAAC,MAAA,EAAA,EAAkB,QAAA,EAAA,OAAA,EAAA,EAAR,KAAgB,CAC5B,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,MAEC,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

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

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

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

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