@mittwald/flow-react-components 0.2.0-experimental.775 → 1.0.0

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,45 +1,36 @@
 "use client"
 /* */
-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");
-    };
-    image.onerror = () => {
-      reject(new Error("Failed to load image"));
-    };
-  });
+//#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(/* @__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  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;;;;"}
+{"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,42 +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", { children: initial }, index));
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-dynamic-color": dynamicColor,
-      "aria-hidden": ariaHidden,
-      "aria-label": textContent,
-      className: rootClassName,
-      ref,
-      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 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;;;;"}
+{"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,8 +1,14 @@
 "use client"
 /* */
-const getInitialsFromString = (initials) => {
-  return initials.replace(/[^\p{L}\s]/giu, "").split(" ").map((part) => part.trim()[0]).filter((p) => p !== void 0).map((char) => char.toUpperCase()).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 = (initials: string): string[] => {\n  return initials\n    .replace(/[^\\p{L}\\s]/giu, \"\")\n    .split(\" \")\n    .map((part) => part.trim()[0])\n    .filter((p) => p !== undefined)\n    .map((char) => char.toUpperCase())\n    .slice(0, 2);\n};\n"],"names":[],"mappings":"AAAO,MAAM,qBAAA,GAAwB,CAAC,QAAA,KAA+B;AACnE,EAAA,OAAO,QAAA,CACJ,OAAA,CAAQ,eAAA,EAAiB,EAAE,EAC3B,KAAA,CAAM,GAAG,CAAA,CACT,GAAA,CAAI,CAAC,IAAA,KAAS,IAAA,CAAK,IAAA,GAAO,CAAC,CAAC,CAAA,CAC5B,MAAA,CAAO,CAAC,CAAA,KAAM,CAAA,KAAM,MAAS,EAC7B,GAAA,CAAI,CAAC,IAAA,KAAS,IAAA,CAAK,WAAA,EAAa,CAAA,CAChC,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,19 +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", ...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", 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 { 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 {\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

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/Kbd/Kbd.mjs

@@ -1,51 +1,43 @@
 "use client"
 /* */
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useLocalizedStringFormatter } from 'react-aria';
-import locales from '../../../../../_virtual/_.locale.json@7998e282a8b9f42eb840fb5f32ffe878.mjs';
-import clsx from 'clsx';
-import styles from './Kbd.module.scss.mjs';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import { Fragment } from 'react';
-import { isAppleDevice } from '@react-aria/utils';
-
-const Kbd = flowComponent("Kbd", (props) => {
-  const {
-    keys,
-    className,
-    isDisabled,
-    children,
-    variant = "plain",
-    ...rest
-  } = props;
-  const rootClassName = clsx(
-    styles.kbd,
-    isDisabled && styles.disabled,
-    className,
-    styles[variant]
-  );
-  const stringFormatter = useLocalizedStringFormatter(locales);
-  const joinedKeys = keys?.map((key, index) => {
-    let formattedKey = key;
-    if (key === "mod") {
-      formattedKey = isAppleDevice() ? "⌘" : stringFormatter.format("kbd.mod");
-    }
-    if (key === "alt") {
-      formattedKey = isAppleDevice() ? "⌥" : stringFormatter.format("kbd.alt");
-    }
-    if (key === "shift") {
-      formattedKey = "⇧";
-    }
-    if (keys?.length === 1) {
-      return /* @__PURE__ */ jsx(Fragment, { children: formattedKey }, index);
-    }
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("kbd", { className: styles.kbd, children: formattedKey }),
-      index < keys.length - 1 && " + "
-    ] }, index);
-  });
-  return /* @__PURE__ */ jsx("kbd", { className: rootClassName, ...rest, children: joinedKeys ?? children });
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { useLocalizedStringFormatter as useLocalizedStringFormatter$1 } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
+import __locale_default from "../../../../../_virtual/_30.locale.mjs";
+import Kbd_module_default from "./Kbd.module.mjs";
+import clsx from "clsx";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isAppleDevice } from "@react-aria/utils";
+import { useIsSSR } from "react-aria";
+//#region src/components/Kbd/Kbd.tsx
+/**
+* @flr-generate all
+* @flowStatus new
+*/
+var Kbd = flowComponent("Kbd", (props) => {
+	const { keys, className, isDisabled, children, variant = "plain", ...rest } = props;
+	const isSsr = useIsSSR();
+	const rootClassName = clsx(Kbd_module_default.kbd, isDisabled && Kbd_module_default.disabled, Kbd_module_default[variant], className);
+	const stringFormatter = useLocalizedStringFormatter$1(__locale_default, "Kbd");
+	const isApple = !isSsr && isAppleDevice();
+	const joinedKeys = keys?.map((key, index) => {
+		let formattedKey = key;
+		if (key === "mod") formattedKey = isApple ? "⌘" : stringFormatter.format("mod");
+		if (key === "alt") formattedKey = isApple ? "⌥" : stringFormatter.format("alt");
+		if (key === "shift") formattedKey = "⇧";
+		if (keys?.length === 1) return /* @__PURE__ */ jsx(Fragment, { children: formattedKey }, index);
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("kbd", {
+			className: Kbd_module_default.kbd,
+			children: formattedKey
+		}), index < keys.length - 1 && " + "] }, index);
+	});
+	return /* @__PURE__ */ jsx("kbd", {
+		className: rootClassName,
+		...rest,
+		children: joinedKeys ?? children
+	});
 });
+//#endregion
+export { Kbd, Kbd as default };
 
-export { Kbd };
-//# sourceMappingURL=Kbd.mjs.map
+//# sourceMappingURL=Kbd.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Kbd.mjs","sources":["../../../../../../../src/components/Kbd/Kbd.tsx"],"sourcesContent":["import { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./Kbd.module.scss\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { Fragment, type PropsWithChildren } from \"react\";\nimport { isAppleDevice } from \"@react-aria/utils\";\n\nexport interface KbdProps\n  extends PropsWithClassName, FlowComponentProps, PropsWithChildren {\n  /** Array of keys to be joined */\n  keys?: (string | \"mod\" | \"alt\" | \"shift\")[];\n  /** Whether the component is displayed as disabled */\n  isDisabled?: boolean;\n  /** The visual variant @default \"plain\" */\n  variant?: \"plain\" | \"soft\";\n}\n\n/** @flr-generate all */\nexport const Kbd = flowComponent(\"Kbd\", (props) => {\n  const {\n    keys,\n    className,\n    isDisabled,\n    children,\n    variant = \"plain\",\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.kbd,\n    isDisabled && styles.disabled,\n    className,\n    styles[variant],\n  );\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const joinedKeys = keys?.map((key, index) => {\n    let formattedKey = key;\n\n    if (key === \"mod\") {\n      formattedKey = isAppleDevice() ? \"⌘\" : stringFormatter.format(\"kbd.mod\");\n    }\n\n    if (key === \"alt\") {\n      formattedKey = isAppleDevice() ? \"⌥\" : stringFormatter.format(\"kbd.alt\");\n    }\n\n    if (key === \"shift\") {\n      formattedKey = \"⇧\";\n    }\n\n    if (keys?.length === 1) {\n      return <Fragment key={index}>{formattedKey}</Fragment>;\n    }\n\n    return (\n      <Fragment key={index}>\n        <kbd className={styles.kbd}>{formattedKey}</kbd>\n        {index < keys.length - 1 && \" + \"}\n      </Fragment>\n    );\n  });\n\n  return (\n    <kbd className={rootClassName} {...rest}>\n      {joinedKeys ?? children}\n    </kbd>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;AAuBO,MAAM,GAAA,GAAM,aAAA,CAAc,KAAA,EAAO,CAAC,KAAA,KAAU;AACjD,EAAA,MAAM;AAAA,IACJ,IAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA,GAAU,OAAA;AAAA,IACV,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,GAAA;AAAA,IACP,cAAc,MAAA,CAAO,QAAA;AAAA,IACrB,SAAA;AAAA,IACA,OAAO,OAAO;AAAA,GAChB;AAEA,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,UAAA,GAAa,IAAA,EAAM,GAAA,CAAI,CAAC,KAAK,KAAA,KAAU;AAC3C,IAAA,IAAI,YAAA,GAAe,GAAA;AAEnB,IAAA,IAAI,QAAQ,KAAA,EAAO;AACjB,MAAA,YAAA,GAAe,aAAA,EAAc,GAAI,GAAA,GAAM,eAAA,CAAgB,OAAO,SAAS,CAAA;AAAA,IACzE;AAEA,IAAA,IAAI,QAAQ,KAAA,EAAO;AACjB,MAAA,YAAA,GAAe,aAAA,EAAc,GAAI,GAAA,GAAM,eAAA,CAAgB,OAAO,SAAS,CAAA;AAAA,IACzE;AAEA,IAAA,IAAI,QAAQ,OAAA,EAAS;AACnB,MAAA,YAAA,GAAe,GAAA;AAAA,IACjB;AAEA,IAAA,IAAI,IAAA,EAAM,WAAW,CAAA,EAAG;AACtB,MAAA,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAsB,QAAA,EAAA,YAAA,EAAA,EAAR,KAAqB,CAAA;AAAA,IAC7C;AAEA,IAAA,4BACG,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,GAAA,EAAM,QAAA,EAAA,YAAA,EAAa,CAAA;AAAA,MACzC,KAAA,GAAQ,IAAA,CAAK,MAAA,GAAS,CAAA,IAAK;AAAA,KAAA,EAAA,EAFf,KAGf,CAAA;AAAA,EAEJ,CAAC,CAAA;AAED,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,eAAgB,GAAG,IAAA,EAChC,wBAAc,QAAA,EACjB,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Kbd.mjs","names":[],"sources":["../../../../../../../src/components/Kbd/Kbd.tsx"],"sourcesContent":["import { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./Kbd.module.scss\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { Fragment, type PropsWithChildren } from \"react\";\nimport { isAppleDevice } from \"@react-aria/utils\";\nimport { useIsSSR } from \"react-aria\";\n\nexport interface KbdProps\n  extends PropsWithClassName, FlowComponentProps, PropsWithChildren {\n  /** Array of keys to be joined */\n  keys?: (string | \"mod\" | \"alt\" | \"shift\")[];\n  /** Whether the component is displayed as disabled */\n  isDisabled?: boolean;\n  /** The visual variant @default \"plain\" */\n  variant?: \"plain\" | \"soft\";\n}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const Kbd = flowComponent(\"Kbd\", (props) => {\n  const {\n    keys,\n    className,\n    isDisabled,\n    children,\n    variant = \"plain\",\n    ...rest\n  } = props;\n\n  const isSsr = useIsSSR();\n\n  const rootClassName = clsx(\n    styles.kbd,\n    isDisabled && styles.disabled,\n    styles[variant],\n    className,\n  );\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Kbd\");\n  const isApple = !isSsr && isAppleDevice();\n\n  const joinedKeys = keys?.map((key, index) => {\n    let formattedKey = key;\n\n    if (key === \"mod\") {\n      formattedKey = isApple ? \"⌘\" : stringFormatter.format(\"mod\");\n    }\n\n    if (key === \"alt\") {\n      formattedKey = isApple ? \"⌥\" : stringFormatter.format(\"alt\");\n    }\n\n    if (key === \"shift\") {\n      formattedKey = \"⇧\";\n    }\n\n    if (keys?.length === 1) {\n      return <Fragment key={index}>{formattedKey}</Fragment>;\n    }\n\n    return (\n      <Fragment key={index}>\n        <kbd className={styles.kbd}>{formattedKey}</kbd>\n        {index < keys.length - 1 && \" + \"}\n      </Fragment>\n    );\n  });\n\n  return (\n    <kbd className={rootClassName} {...rest}>\n      {joinedKeys ?? children}\n    </kbd>\n  );\n});\n\nexport default Kbd;\n"],"mappings":";;;;;;;;;;;;;;;;AA2BA,IAAa,MAAM,cAAc,QAAQ,UAAU;CACjD,MAAM,EACJ,MACA,WACA,YACA,UACA,UAAU,SACV,GAAG,SACD;CAEJ,MAAM,QAAQ,SAAS;CAEvB,MAAM,gBAAgB,KACpB,mBAAO,KACP,cAAc,mBAAO,UACrB,mBAAO,UACP,SACF;CAEA,MAAM,kBAAkB,8BAA4B,kBAAS,KAAK;CAClE,MAAM,UAAU,CAAC,SAAS,cAAc;CAExC,MAAM,aAAa,MAAM,KAAK,KAAK,UAAU;EAC3C,IAAI,eAAe;EAEnB,IAAI,QAAQ,OACV,eAAe,UAAU,MAAM,gBAAgB,OAAO,KAAK;EAG7D,IAAI,QAAQ,OACV,eAAe,UAAU,MAAM,gBAAgB,OAAO,KAAK;EAG7D,IAAI,QAAQ,SACV,eAAe;EAGjB,IAAI,MAAM,WAAW,GACnB,OAAO,oBAAC,UAAD,EAAA,UAAuB,aAAuB,GAA/B,KAA+B;EAGvD,OACE,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,OAAD;GAAK,WAAW,mBAAO;GAAM,UAAA;EAAkB,CAAA,GAC9C,QAAQ,KAAK,SAAS,KAAK,KACpB,EAAA,GAHK,KAGL;CAEd,CAAC;CAED,OACE,oBAAC,OAAD;EAAK,WAAW;EAAe,GAAI;EAChC,UAAA,cAAc;CACZ,CAAA;AAET,CAAC"}

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

@@ -0,0 +1,17 @@
+"use client"
+/* */
+//#region src/components/Kbd/Kbd.module.scss
+var kbd = "flow--kbd";
+var soft = "flow--kbd--soft";
+var plain = "flow--kbd--plain";
+var disabled = "flow--kbd--disabled";
+var Kbd_module_default = {
+	kbd,
+	soft,
+	plain,
+	disabled
+};
+//#endregion
+export { Kbd_module_default as default, disabled, kbd, plain, soft };
+
+//# sourceMappingURL=Kbd.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.module.mjs","names":[],"sources":["../../../../../../../src/components/Kbd/Kbd.module.scss"],"sourcesContent":[".kbd {\n  font-family: Inter, sans-serif;\n  font-size: var(--font-size-text--s);\n}\n\n:not(.kbd) > .kbd {\n  &.soft {\n    display: inline-block;\n    line-height: var(--font-size-text--m);\n    color: var(--kbd--content-color--default);\n    background-color: var(--kbd--background-color--default);\n    padding: var(--kbd--padding);\n    padding-top: var(--kbd--padding-y-start);\n    border-radius: var(--kbd--corner-radius);\n    border-inline-start: var(--kbd--inner-shadow-size-x) solid\n      var(--kbd--inner-shadow-color--default);\n    border-inline-end: var(--kbd--inner-shadow-size-x) solid\n      var(--kbd--inner-shadow-color--default);\n    box-shadow: inset 0 calc(var(--kbd--inner-shadow-size-y-end) * -1) 0\n      var(--kbd--inner-shadow-color--default);\n    width: fit-content;\n    height: fit-content;\n  }\n\n  &.plain {\n    color: var(--kbd--content-color-plain--default);\n  }\n\n  &.disabled {\n    &.soft {\n      color: var(--kbd--content-color--disabled);\n      background-color: var(--kbd--background-color--disabled);\n      border-inline-start-color: var(--kbd--inner-shadow-color--disabled);\n      border-inline-end-color: var(--kbd--inner-shadow-color--disabled);\n      box-shadow: inset 0 calc(var(--kbd--inner-shadow-size-y-end) * -1) 0\n        var(--kbd--inner-shadow-color--disabled);\n    }\n\n    &.plain {\n      color: var(--kbd--content-color-plain--disabled);\n    }\n  }\n}\n"],"mappings":""}