@mittwald/flow-react-components 1.5.0-next.4 → 1.5.0-next.41

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 \"default\" */\n  color?: \"default\" | \"danger\" | \"unavailable\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const IllustratedMessage = flowComponent(\n  \"IllustratedMessage\",\n  (props) => {\n    const { className, children, color = \"default\", ...rest } = props;\n\n    const rootClassName = clsx(\n      styles.illustratedMessage,\n      color !== \"default\" && styles[color],\n      className,\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,\n      },\n      ActionGroup: {\n        preserveOrder: true,\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,UAAU,aAAa,kCAAO,QAC9B,SACF;CAEA,MAAM,aAAa,aAAa,KAAK,IAAI,QAAQ,KAAA;CAEjD,MAAM,eAA6B;EACjC,MAAM;GACJ,WAAW,kCAAO;GAClB,MAAM;EACR;EACA,SAAS;GACP,WAAW,kCAAO;GAClB;EACF;EACA,MAAM;GACJ,WAAW,kCAAO;GAClB,OAAO;EACT;EACA,QAAQ,EACN,OAAO,WACT;EACA,aAAa;GACX,eAAe;GACf,WAAW,kCAAO;EACpB;EACA,aAAa,EAAE,WAAW,kCAAO,YAAY;CAC/C;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW;EACxB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACnB,CAAA;AAET,CACF"}
+{"version":3,"file":"IllustratedMessage.mjs","names":["styles"],"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 \"default\" */\n  color?: \"default\" | \"danger\" | \"unavailable\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const IllustratedMessage = flowComponent(\n  \"IllustratedMessage\",\n  (props) => {\n    const { className, children, color = \"default\", ...rest } = props;\n\n    const rootClassName = clsx(\n      styles.illustratedMessage,\n      color !== \"default\" && styles[color],\n      className,\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,\n      },\n      ActionGroup: {\n        preserveOrder: true,\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,KACpBA,kCAAO,oBACP,UAAU,aAAaA,kCAAO,QAC9B,SACF;CAEA,MAAM,aAAa,aAAa,KAAK,IAAI,QAAQ,KAAA;CAEjD,MAAM,eAA6B;EACjC,MAAM;GACJ,WAAWA,kCAAO;GAClB,MAAM;EACR;EACA,SAAS;GACP,WAAWA,kCAAO;GAClB;EACF;EACA,MAAM;GACJ,WAAWA,kCAAO;GAClB,OAAO;EACT;EACA,QAAQ,EACN,OAAO,WACT;EACA,aAAa;GACX,eAAe;GACf,WAAWA,kCAAO;EACpB;EACA,aAAa,EAAE,WAAWA,kCAAO,YAAY;CAC/C;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW;EACxB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACnB,CAAA;AAET,CACF"}

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

@@ -1,14 +1,37 @@
 "use client"
 /* */
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.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
+/** Aspect ratio of an image skeleton without `aspectRatio`. */
+var skeletonAspectRatio = 16 / 9;
+/** The `width`/`height` attribute as a CSS length — `"200"` means 200px. */
+var toCssLength = (value) => typeof value === "string" && /^\d+(\.\d+)?$/.test(value) ? Number(value) : value;
 /** @flr-generate all */
 var Image = flowComponent("Image", (props) => {
 	const { className, withBorder, withRoundedCorners = true, style, aspectRatio, width, height, ref, ...rest } = props;
+	const isSkeleton = useSkeletonMode();
 	const rootClassName = clsx(Image_module_default.image, withBorder && Image_module_default.border, withRoundedCorners && Image_module_default.roundedCorners, aspectRatio && Image_module_default.aspectRatio, className);
+	if (isSkeleton) {
+		const skeletonClassName = clsx(Image_module_default.image, Image_module_default.skeleton, withBorder && Image_module_default.border, withRoundedCorners && Image_module_default.roundedCorners, className);
+		const skeletonWidth = toCssLength(width);
+		const skeletonHeight = toCssLength(height);
+		const skeletonStyle = {
+			...style,
+			aspectRatio: aspectRatio ?? skeletonAspectRatio,
+			width: skeletonWidth ?? (skeletonHeight === void 0 ? "100%" : void 0),
+			height: skeletonHeight
+		};
+		return /* @__PURE__ */ jsx("span", {
+			className: skeletonClassName,
+			style: skeletonStyle,
+			"aria-hidden": true,
+			inert: true
+		});
+	}
 	return /* @__PURE__ */ jsx("img", {
 		ref,
 		className: rootClassName,

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 a border. */\n  withBorder?: boolean;\n  /**\n   * Display the image with rounded corners.\n   *\n   * @default true\n   */\n  withRoundedCorners?: 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    withRoundedCorners = true,\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    withRoundedCorners && styles.roundedCorners,\n    aspectRatio && styles.aspectRatio,\n    className,\n  );\n\n  return (\n    <img\n      ref={ref}\n      className={rootClassName}\n      style={{\n        ...style,\n        ...(aspectRatio !== undefined && { aspectRatio }),\n        ...(width !== undefined && { width }),\n        ...(height !== undefined && { height }),\n      }}\n      {...rest}\n    />\n  );\n});\n\nexport default Image;\n"],"mappings":";;;;;;;;AA0BA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,WACA,YACA,qBAAqB,MACrB,OACA,aACA,OACA,QACA,KACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,qBAAO,OACP,cAAc,qBAAO,QACrB,sBAAsB,qBAAO,gBAC7B,eAAe,qBAAO,aACtB,SACF;CAEA,OACE,oBAAC,OAAD;EACO;EACL,WAAW;EACX,OAAO;GACL,GAAG;GACH,GAAI,gBAAgB,KAAA,KAAa,EAAE,YAAY;GAC/C,GAAI,UAAU,KAAA,KAAa,EAAE,MAAM;GACnC,GAAI,WAAW,KAAA,KAAa,EAAE,OAAO;EACvC;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}
+{"version":3,"file":"Image.mjs","names":["styles"],"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, CSSProperties } from \"react\";\nimport styles from \"./Image.module.scss\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\n/** Aspect ratio of an image skeleton without `aspectRatio`. */\nconst skeletonAspectRatio = 16 / 9;\n\n/** The `width`/`height` attribute as a CSS length — `\"200\"` means 200px. */\nconst toCssLength = (value: number | string | undefined) =>\n  typeof value === \"string\" && /^\\d+(\\.\\d+)?$/.test(value)\n    ? Number(value)\n    : value;\n\nexport interface ImageProps\n  extends\n    Omit<ComponentProps<\"img\">, \"ref\">,\n    FlowComponentProps<HTMLImageElement> {\n  /** Display the image with a border. */\n  withBorder?: boolean;\n  /**\n   * Display the image with rounded corners.\n   *\n   * @default true\n   */\n  withRoundedCorners?: 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    withRoundedCorners = true,\n    style,\n    aspectRatio,\n    width,\n    height,\n    ref,\n    ...rest\n  } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.image,\n    withBorder && styles.border,\n    withRoundedCorners && styles.roundedCorners,\n    aspectRatio && styles.aspectRatio,\n    className,\n  );\n\n  /* No `<img>`, so the skeleton issues no request. Without both dimensions\n     the aspect ratio sizes it, filling the width when it has neither. */\n  if (isSkeleton) {\n    const skeletonClassName = clsx(\n      styles.image,\n      styles.skeleton,\n      withBorder && styles.border,\n      withRoundedCorners && styles.roundedCorners,\n      className,\n    );\n\n    const skeletonWidth = toCssLength(width);\n    const skeletonHeight = toCssLength(height);\n\n    const skeletonStyle: CSSProperties = {\n      ...style,\n      aspectRatio: aspectRatio ?? skeletonAspectRatio,\n      width:\n        skeletonWidth ?? (skeletonHeight === undefined ? \"100%\" : undefined),\n      height: skeletonHeight,\n    };\n\n    return (\n      <span\n        className={skeletonClassName}\n        style={skeletonStyle}\n        aria-hidden\n        inert\n      />\n    );\n  }\n\n  return (\n    <img\n      ref={ref}\n      className={rootClassName}\n      style={{\n        ...style,\n        ...(aspectRatio !== undefined && { aspectRatio }),\n        ...(width !== undefined && { width }),\n        ...(height !== undefined && { height }),\n      }}\n      {...rest}\n    />\n  );\n});\n\nexport default Image;\n"],"mappings":";;;;;;;;;AAQA,IAAM,sBAAsB,KAAK;;AAGjC,IAAM,eAAe,UACnB,OAAO,UAAU,YAAY,gBAAgB,KAAK,KAAK,IACnD,OAAO,KAAK,IACZ;;AAsBN,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,WACA,YACA,qBAAqB,MACrB,OACA,aACA,OACA,QACA,KACA,GAAG,SACD;CAEJ,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,qBAAO,OACP,cAAcA,qBAAO,QACrB,sBAAsBA,qBAAO,gBAC7B,eAAeA,qBAAO,aACtB,SACF;CAIA,IAAI,YAAY;EACd,MAAM,oBAAoB,KACxBA,qBAAO,OACPA,qBAAO,UACP,cAAcA,qBAAO,QACrB,sBAAsBA,qBAAO,gBAC7B,SACF;EAEA,MAAM,gBAAgB,YAAY,KAAK;EACvC,MAAM,iBAAiB,YAAY,MAAM;EAEzC,MAAM,gBAA+B;GACnC,GAAG;GACH,aAAa,eAAe;GAC5B,OACE,kBAAkB,mBAAmB,KAAA,IAAY,SAAS,KAAA;GAC5D,QAAQ;EACV;EAEA,OACE,oBAAC,QAAD;GACE,WAAW;GACX,OAAO;GACP,eAAA;GACA,OAAA;EACD,CAAA;CAEL;CAEA,OACE,oBAAC,OAAD;EACO;EACL,WAAW;EACX,OAAO;GACL,GAAG;GACH,GAAI,gBAAgB,KAAA,KAAa,EAAE,YAAY;GAC/C,GAAI,UAAU,KAAA,KAAa,EAAE,MAAM;GACnC,GAAI,WAAW,KAAA,KAAa,EAAE,OAAO;EACvC;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}

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

@@ -5,13 +5,17 @@ var image = "flow--image";
 var border = "flow--image--border";
 var roundedCorners = "flow--image--rounded-corners";
 var aspectRatio = "flow--image--aspect-ratio";
+var skeleton = "flow--image--skeleton";
 var Image_module_default = {
 	image,
 	border,
 	roundedCorners,
-	aspectRatio
+	aspectRatio,
+	skeleton,
+	"skeleton-surface-shimmer": "flow--image--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--image--skeleton-text-shimmer"
 };
 //#endregion
-export { aspectRatio, border, Image_module_default as default, image, roundedCorners };
+export { aspectRatio, border, Image_module_default as default, image, roundedCorners, skeleton };
 
 //# sourceMappingURL=Image.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Image.module.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.module.scss"],"sourcesContent":[".image {\n  max-width: 100%;\n\n  &.border {\n    border-width: var(--image--border-width);\n    border-style: var(--image--border-style);\n    border-color: var(--image--border-color);\n  }\n\n  &.roundedCorners {\n    border-radius: var(--image--corner-radius);\n    overflow: hidden;\n  }\n\n  &:where(.aspectRatio) {\n    overflow-clip-margin: unset;\n    object-fit: cover;\n    width: fit-content;\n    overflow: hidden;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Image.module.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.image {\n  max-width: 100%;\n\n  &.border {\n    border-width: var(--image--border-width);\n    border-style: var(--image--border-style);\n    border-color: var(--image--border-color);\n  }\n\n  &.roundedCorners {\n    border-radius: var(--image--corner-radius);\n    overflow: hidden;\n  }\n\n  &:where(.aspectRatio) {\n    overflow-clip-margin: unset;\n    object-fit: cover;\n    width: fit-content;\n    overflow: hidden;\n  }\n\n  /* SkeletonMode */\n\n  &.skeleton {\n    @include skeleton.shape;\n\n    --skeleton-radius: 0;\n\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  &.skeleton.roundedCorners {\n    --skeleton-radius: var(--image--corner-radius);\n  }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

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  type ReactNode,\n  useEffect,\n  useRef,\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\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport { IconDanger } from \"@/components/Icon/components/icons\";\nimport { Text } from \"@/components/Text\";\n\n/** Why an {@link ImageCropper} cannot work with the given image. */\nexport interface ImageCropperError {\n  /**\n   * `\"load\"` — the image itself could not be loaded. `\"crop\"` — the image is\n   * displayed, but reading it into a canvas to produce the cropped file failed\n   * (a cross-origin image without CORS headers, for example).\n   */\n  reason: \"load\" | \"crop\";\n  /** Technical message, meant for logging — not for display. */\n  message: string;\n}\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  /**\n   * Callback when the image cannot be cropped, because it failed to load or\n   * could not be read.\n   */\n  onError?: (error: ImageCropperError) => void;\n  /**\n   * View that is shown instead of the cropper when the image cannot be cropped.\n   * Defaults to a localized error message.\n   */\n  errorView?: ReactNode;\n  /** The width of the component. @default 300 */\n  width?: CSSProperties[\"width\"];\n  /** The height of the component. @default 300 */\n  height?: CSSProperties[\"height\"];\n  /** The aspect ratio of the crop shape. */\n  aspectRatio?: number;\n}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const ImageCropper: FC<ImageCropperProps> = (props) => {\n  const {\n    image,\n    className,\n    onCropComplete,\n    onError,\n    errorView,\n    width = 300,\n    height = 300,\n    aspectRatio,\n    ...rest\n  } = props;\n\n  const imageSrc = useImageSrc(image);\n\n  const [mediaLoaded, setMediaLoaded] = useState(false);\n  const [error, setError] = useState<ImageCropperError>();\n  const [crop, setCrop] = useState({ x: 0, y: 0 });\n  const [zoom, setZoom] = useState(1);\n\n  /** Reports every image at most once, no matter how many crops fail on it. */\n  const errorReported = useRef(false);\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"ImageCropper\");\n  const rootClassName = clsx(styles.imageCropper, className);\n\n  const reportError = (\n    reason: ImageCropperError[\"reason\"],\n    message: string,\n  ): void => {\n    if (errorReported.current) {\n      return;\n    }\n    errorReported.current = true;\n\n    const imageCropperError: ImageCropperError = { reason, message };\n    setError(imageCropperError);\n    onError?.(imageCropperError);\n  };\n\n  const debouncedCropComplete = useDebouncedCallback(\n    async (croppedAreaPixels: Area) => {\n      if (!croppedAreaPixels) {\n        return;\n      }\n\n      let croppedImageFile: File;\n\n      try {\n        croppedImageFile = await getCroppedImageFile(\n          imageSrc,\n          image ?? \"\",\n          croppedAreaPixels,\n        );\n      } catch (cause) {\n        reportError(\n          \"crop\",\n          cause instanceof Error ? cause.message : String(cause),\n        );\n        return;\n      }\n\n      onCropComplete?.(croppedImageFile);\n    },\n    500,\n    {\n      leading: true,\n    },\n  );\n\n  useEffect(() => {\n    setMediaLoaded(false);\n    setError(undefined);\n    errorReported.current = false;\n  }, [imageSrc]);\n\n  const defaultErrorView = (\n    <IllustratedMessage color=\"danger\">\n      <IconDanger />\n      <Text>{stringFormatter.format(\"error.text\")}</Text>\n    </IllustratedMessage>\n  );\n\n  const errorElement = error ? (errorView ?? defaultErrorView) : undefined;\n\n  return (\n    <div className={rootClassName} style={{ width }}>\n      <div className={styles.cropperContainer} style={{ height }}>\n        {errorElement ? (\n          <div className={styles.errorViewContainer}>{errorElement}</div>\n        ) : (\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            mediaProps={{\n              onError: () =>\n                reportError(\"load\", `Failed to load image \"${imageSrc}\"`),\n            }}\n            onMediaLoaded={() => setMediaLoaded(true)}\n            onCropComplete={(_, croppedAreaPixels) => {\n              if (mediaLoaded) {\n                debouncedCropComplete(croppedAreaPixels);\n              }\n            }}\n            {...rest}\n          />\n        )}\n      </div>\n      {!errorElement && (\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      )}\n    </div>\n  );\n};\n\nexport default ImageCropper;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA8DA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EACJ,OACA,WACA,gBACA,SACA,WACA,QAAQ,KACR,SAAS,KACT,aACA,GAAG,SACD;CAEJ,MAAM,WAAW,YAAY,KAAK;CAElC,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CACpD,MAAM,CAAC,OAAO,YAAY,SAA4B;CACtD,MAAM,CAAC,MAAM,WAAW,SAAS;EAAE,GAAG;EAAG,GAAG;CAAE,CAAC;CAC/C,MAAM,CAAC,MAAM,WAAW,SAAS,CAAC;;CAGlC,MAAM,gBAAgB,OAAO,KAAK;CAElC,MAAM,kBAAkB,4BAA4B,kBAAS,cAAc;CAC3E,MAAM,gBAAgB,KAAK,4BAAO,cAAc,SAAS;CAEzD,MAAM,eACJ,QACA,YACS;EACT,IAAI,cAAc,SAChB;EAEF,cAAc,UAAU;EAExB,MAAM,oBAAuC;GAAE;GAAQ;EAAQ;EAC/D,SAAS,iBAAiB;EAC1B,UAAU,iBAAiB;CAC7B;CAEA,MAAM,wBAAwB,qBAC5B,OAAO,sBAA4B;EACjC,IAAI,CAAC,mBACH;EAGF,IAAI;EAEJ,IAAI;GACF,mBAAmB,MAAM,oBACvB,UACA,SAAS,IACT,iBACF;EACF,SAAS,OAAO;GACd,YACE,QACA,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK,CACvD;GACA;EACF;EAEA,iBAAiB,gBAAgB;CACnC,GACA,KACA,EACE,SAAS,KACX,CACF;CAEA,gBAAgB;EACd,eAAe,KAAK;EACpB,SAAS,KAAA,CAAS;EAClB,cAAc,UAAU;CAC1B,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,mBACJ,qBAAC,oBAAD;EAAoB,OAAM;EAA1B,UAAA,CACE,oBAAC,YAAD,CAAa,CAAA,GACb,oBAAC,MAAD,EAAA,UAAO,gBAAgB,OAAO,YAAY,EAAQ,CAAA,CAChC;;CAGtB,MAAM,eAAe,QAAS,aAAa,mBAAoB,KAAA;CAE/D,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,OAAO,EAAE,MAAM;EAA9C,UAAA,CACE,oBAAC,OAAD;GAAK,WAAW,4BAAO;GAAkB,OAAO,EAAE,OAAO;GACtD,UAAA,eACC,oBAAC,OAAD;IAAK,WAAW,4BAAO;IAAqB,UAAA;GAAkB,CAAA,IAE9D,oBAAC,SAAD;IACE,OAAO,EACL,gBAAgB,EACd,cAAc,kDAChB,EACF;IACA,QAAQ;IACF;IACN,OAAO;IACP,cAAc;IACR;IACN,cAAc;IACd,YAAY,EACV,eACE,YAAY,QAAQ,yBAAyB,SAAS,EAAE,EAC5D;IACA,qBAAqB,eAAe,IAAI;IACxC,iBAAiB,GAAG,sBAAsB;KACxC,IAAI,aACF,sBAAsB,iBAAiB;IAE3C;IACA,GAAI;GACL,CAAA;EAEA,CAAA,GACJ,CAAC,gBACA,oBAAC,QAAD;GACE,UAAU;GACV,UAAU;GACV,MAAM;GACN,OAAO;GACP,YAAA;GACA,WAAW,SAAS,QAAQ,IAAc;GAC1C,cAAY,gBAAgB,OAAO,MAAM;EAC1C,CAAA,CAEA;;AAET"}
+{"version":3,"file":"ImageCropper.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/ImageCropper/ImageCropper.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type FC,\n  type ReactNode,\n  useEffect,\n  useRef,\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\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport { IconDanger } from \"@/components/Icon/components/icons\";\nimport { Text } from \"@/components/Text\";\n\n/** Why an {@link ImageCropper} cannot work with the given image. */\nexport interface ImageCropperError {\n  /**\n   * `\"load\"` — the image itself could not be loaded. `\"crop\"` — the image is\n   * displayed, but reading it into a canvas to produce the cropped file failed\n   * (a cross-origin image without CORS headers, for example).\n   */\n  reason: \"load\" | \"crop\";\n  /** Technical message, meant for logging — not for display. */\n  message: string;\n}\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  /**\n   * Callback when the image cannot be cropped, because it failed to load or\n   * could not be read.\n   */\n  onError?: (error: ImageCropperError) => void;\n  /**\n   * View that is shown instead of the cropper when the image cannot be cropped.\n   * Defaults to a localized error message.\n   */\n  errorView?: ReactNode;\n  /** The width of the component. @default 300 */\n  width?: CSSProperties[\"width\"];\n  /** The height of the component. @default 300 */\n  height?: CSSProperties[\"height\"];\n  /** The aspect ratio of the crop shape. */\n  aspectRatio?: number;\n}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const ImageCropper: FC<ImageCropperProps> = (props) => {\n  const {\n    image,\n    className,\n    onCropComplete,\n    onError,\n    errorView,\n    width = 300,\n    height = 300,\n    aspectRatio,\n    ...rest\n  } = props;\n\n  const imageSrc = useImageSrc(image);\n\n  const [mediaLoaded, setMediaLoaded] = useState(false);\n  const [error, setError] = useState<ImageCropperError>();\n  const [crop, setCrop] = useState({ x: 0, y: 0 });\n  const [zoom, setZoom] = useState(1);\n\n  /** Reports every image at most once, no matter how many crops fail on it. */\n  const errorReported = useRef(false);\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"ImageCropper\");\n  const rootClassName = clsx(styles.imageCropper, className);\n\n  const reportError = (\n    reason: ImageCropperError[\"reason\"],\n    message: string,\n  ): void => {\n    if (errorReported.current) {\n      return;\n    }\n    errorReported.current = true;\n\n    const imageCropperError: ImageCropperError = { reason, message };\n    setError(imageCropperError);\n    onError?.(imageCropperError);\n  };\n\n  const debouncedCropComplete = useDebouncedCallback(\n    async (croppedAreaPixels: Area) => {\n      if (!croppedAreaPixels) {\n        return;\n      }\n\n      let croppedImageFile: File;\n\n      try {\n        croppedImageFile = await getCroppedImageFile(\n          imageSrc,\n          image ?? \"\",\n          croppedAreaPixels,\n        );\n      } catch (cause) {\n        reportError(\n          \"crop\",\n          cause instanceof Error ? cause.message : String(cause),\n        );\n        return;\n      }\n\n      onCropComplete?.(croppedImageFile);\n    },\n    500,\n    {\n      leading: true,\n    },\n  );\n\n  useEffect(() => {\n    setMediaLoaded(false);\n    setError(undefined);\n    errorReported.current = false;\n  }, [imageSrc]);\n\n  const defaultErrorView = (\n    <IllustratedMessage color=\"danger\">\n      <IconDanger />\n      <Text>{stringFormatter.format(\"error.text\")}</Text>\n    </IllustratedMessage>\n  );\n\n  const errorElement = error ? (errorView ?? defaultErrorView) : undefined;\n\n  return (\n    <div className={rootClassName} style={{ width }}>\n      <div className={styles.cropperContainer} style={{ height }}>\n        {errorElement ? (\n          <div className={styles.errorViewContainer}>{errorElement}</div>\n        ) : (\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            mediaProps={{\n              onError: () =>\n                reportError(\"load\", `Failed to load image \"${imageSrc}\"`),\n            }}\n            onMediaLoaded={() => setMediaLoaded(true)}\n            onCropComplete={(_, croppedAreaPixels) => {\n              if (mediaLoaded) {\n                debouncedCropComplete(croppedAreaPixels);\n              }\n            }}\n            {...rest}\n          />\n        )}\n      </div>\n      {!errorElement && (\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      )}\n    </div>\n  );\n};\n\nexport default ImageCropper;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA8DA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EACJ,OACA,WACA,gBACA,SACA,WACA,QAAQ,KACR,SAAS,KACT,aACA,GAAG,SACD;CAEJ,MAAM,WAAW,YAAY,KAAK;CAElC,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CACpD,MAAM,CAAC,OAAO,YAAY,SAA4B;CACtD,MAAM,CAAC,MAAM,WAAW,SAAS;EAAE,GAAG;EAAG,GAAG;CAAE,CAAC;CAC/C,MAAM,CAAC,MAAM,WAAW,SAAS,CAAC;;CAGlC,MAAM,gBAAgB,OAAO,KAAK;CAElC,MAAM,kBAAkB,4BAA4BA,kBAAS,cAAc;CAC3E,MAAM,gBAAgB,KAAKC,4BAAO,cAAc,SAAS;CAEzD,MAAM,eACJ,QACA,YACS;EACT,IAAI,cAAc,SAChB;EAEF,cAAc,UAAU;EAExB,MAAM,oBAAuC;GAAE;GAAQ;EAAQ;EAC/D,SAAS,iBAAiB;EAC1B,UAAU,iBAAiB;CAC7B;CAEA,MAAM,wBAAwB,qBAC5B,OAAO,sBAA4B;EACjC,IAAI,CAAC,mBACH;EAGF,IAAI;EAEJ,IAAI;GACF,mBAAmB,MAAM,oBACvB,UACA,SAAS,IACT,iBACF;EACF,SAAS,OAAO;GACd,YACE,QACA,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK,CACvD;GACA;EACF;EAEA,iBAAiB,gBAAgB;CACnC,GACA,KACA,EACE,SAAS,KACX,CACF;CAEA,gBAAgB;EACd,eAAe,KAAK;EACpB,SAAS,KAAA,CAAS;EAClB,cAAc,UAAU;CAC1B,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,mBACJ,qBAAC,oBAAD;EAAoB,OAAM;EAA1B,UAAA,CACE,oBAAC,YAAD,CAAa,CAAA,GACb,oBAAC,MAAD,EAAA,UAAO,gBAAgB,OAAO,YAAY,EAAQ,CAAA,CAChC;;CAGtB,MAAM,eAAe,QAAS,aAAa,mBAAoB,KAAA;CAE/D,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,OAAO,EAAE,MAAM;EAA9C,UAAA,CACE,oBAAC,OAAD;GAAK,WAAWA,4BAAO;GAAkB,OAAO,EAAE,OAAO;GACtD,UAAA,eACC,oBAAC,OAAD;IAAK,WAAWA,4BAAO;IAAqB,UAAA;GAAkB,CAAA,IAE9D,oBAAC,SAAD;IACE,OAAO,EACL,gBAAgB,EACd,cAAc,kDAChB,EACF;IACA,QAAQ;IACF;IACN,OAAO;IACP,cAAc;IACR;IACN,cAAc;IACd,YAAY,EACV,eACE,YAAY,QAAQ,yBAAyB,SAAS,EAAE,EAC5D;IACA,qBAAqB,eAAe,IAAI;IACxC,iBAAiB,GAAG,sBAAsB;KACxC,IAAI,aACF,sBAAsB,iBAAiB;IAE3C;IACA,GAAI;GACL,CAAA;EAEA,CAAA,GACJ,CAAC,gBACA,oBAAC,QAAD;GACE,UAAU;GACV,UAAU;GACV,MAAM;GACN,OAAO;GACP,YAAA;GACA,WAAW,SAAS,QAAQ,IAAc;GAC1C,cAAY,gBAAgB,OAAO,MAAM;EAC1C,CAAA,CAEA;;AAET"}

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

@@ -2,6 +2,7 @@
 /* */
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { extractTextFromFirstChild } from "../../lib/react/remote.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { getInitialsFromString } from "./lib/getInitialsFromString.mjs";
 import Initials_module_default from "./Initials.module.mjs";
 import { getColorFromInitials } from "./lib/getColorFromInitials.mjs";
@@ -12,10 +13,11 @@ import { jsx } from "react/jsx-runtime";
 /** @flr-generate all */
 var Initials = flowComponent("Initials", (props) => {
 	const { children, useDynamicColor = false, className, "aria-hidden": ariaHidden, ref } = props;
+	const isSkeleton = useSkeletonMode();
 	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 rootClassName = clsx(Initials_module_default.initials, isSkeleton && Initials_module_default.skeleton, className);
 	const initialsElements = initials.map((initial, index) => /* @__PURE__ */ jsx("span", {
 		"aria-hidden": true,
 		role: "presentation",
@@ -28,6 +30,7 @@ var Initials = flowComponent("Initials", (props) => {
 		className: rootClassName,
 		ref,
 		role: "img",
+		inert: isSkeleton || void 0,
 		children: initialsElements
 	});
 });

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 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"}
+{"version":3,"file":"Initials.mjs","names":["styles"],"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\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\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 isSkeleton = useSkeletonMode();\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(\n    styles.initials,\n    isSkeleton && styles.skeleton,\n    className,\n  );\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      inert={isSkeleton || undefined}\n    >\n      {initialsElements}\n    </div>\n  );\n});\n\nexport default Initials;\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EACJ,UACA,kBAAkB,OAClB,WACA,eAAe,YACf,QACE;CAEJ,MAAM,aAAa,gBAAgB;CAEnC,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,KACpBA,wBAAO,UACP,cAAcA,wBAAO,UACrB,SACF;CAEA,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;EACL,OAAO,cAAc,KAAA;EAEpB,UAAA;CACE,CAAA;AAET,CAAC"}

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

@@ -2,8 +2,14 @@
 /* */
 //#region src/components/Initials/Initials.module.scss
 var initials = "flow--initials";
-var Initials_module_default = { initials };
+var skeleton = "flow--initials--skeleton";
+var Initials_module_default = {
+	initials,
+	skeleton,
+	"skeleton-surface-shimmer": "flow--initials--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--initials--skeleton-text-shimmer"
+};
 //#endregion
-export { Initials_module_default as default, initials };
+export { Initials_module_default as default, initials, skeleton };
 
 //# sourceMappingURL=Initials.module.mjs.map

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

@@ -1 +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":""}
+{"version":3,"file":"Initials.module.mjs","names":[],"sources":["../../../../../../../src/components/Initials/Initials.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.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  /* SkeletonMode */\n\n  &.skeleton {\n    @include skeleton.shape;\n  }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"getColorFromInitials.mjs","names":["objectHash"],"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,OAAOA,KAAW,QAAQ;CAChC,MAAM,SAAS,KAAK,IAAI,QAAQ,aAAa,SAAS,EAAE;CACxD,OAAO,aAAa,WAAW;AACjC"}

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

@@ -1,6 +1,8 @@
 "use client"
 /* */
 import { isAlphaColor } from "../../lib/types/props.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
+import { SkeletonTextContent } from "../SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.mjs";
 import InlineCode_module_default from "./InlineCode.module.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
@@ -8,6 +10,7 @@ import { jsx } from "react/jsx-runtime";
 /** @flr-generate all */
 var InlineCode = (props) => {
 	const { children, className, color = "default", style: styleFromProps, whiteSpace, ...rest } = props;
+	const isSkeleton = useSkeletonMode();
 	const rootClassName = clsx(InlineCode_module_default.inlineCode, isAlphaColor(color) && InlineCode_module_default[color], className);
 	const style = {
 		whiteSpace,
@@ -17,7 +20,11 @@ var InlineCode = (props) => {
 		...rest,
 		style,
 		className: rootClassName,
-		children
+		inert: isSkeleton || void 0,
+		children: /* @__PURE__ */ jsx(SkeletonTextContent, {
+			defaultWidth: "6em",
+			children
+		})
 	});
 };
 //#endregion

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"InlineCode.mjs","names":["styles"],"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\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\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 isSkeleton = useSkeletonMode();\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\n      {...rest}\n      style={style}\n      className={rootClassName}\n      inert={isSkeleton || undefined}\n    >\n      <SkeletonTextContent defaultWidth=\"6em\">{children}</SkeletonTextContent>\n    </code>\n  );\n};\n\nexport default InlineCode;\n"],"mappings":";;;;;;;;;;AAsBA,IAAa,cAAmC,UAAU;CACxD,MAAM,EACJ,UACA,WACA,QAAQ,WACR,OAAO,gBACP,YACA,GAAG,SACD;CAEJ,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,0BAAO,YACP,aAAa,KAAK,KAAKA,0BAAO,QAC9B,SACF;CAEA,MAAM,QAAQ;EACZ;EACA,GAAG;CACL;CAEA,OACE,oBAAC,QAAD;EACE,GAAI;EACG;EACP,WAAW;EACX,OAAO,cAAc,KAAA;EAErB,UAAA,oBAAC,qBAAD;GAAqB,cAAa;GAAO;EAA8B,CAAA;CACnE,CAAA;AAEV"}

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"Kbd.mjs","names":["styles","useLocalizedStringFormatter","locales"],"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,KACpBA,mBAAO,KACP,cAAcA,mBAAO,UACrBA,mBAAO,UACP,SACF;CAEA,MAAM,kBAAkBC,8BAA4BC,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,WAAWF,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/Label/Label.mjs

@@ -3,8 +3,10 @@
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import overlayTriggersTunneledTo from "../../lib/propsContext/overlayTriggerTunnel.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
+import { SkeletonTextContent } from "../SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.mjs";
 import Label_module_default from "./Label.module.mjs";
 import __locale_default from "../../../../../_virtual/_8.locale.mjs";
 import clsx from "clsx";
@@ -18,6 +20,7 @@ var Label = flowComponent("Label", (props) => {
 	const [labelProps, labelRef] = Aria.useContextProps(rest, ref, Aria.LabelContext);
 	const { id, ...rootProps } = labelProps;
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "Label");
+	const isSkeleton = useSkeletonMode();
 	const rootClassName = unstyled ? className : clsx(Label_module_default.label, isDisabled && Label_module_default.disabled, className);
 	const optionalMarker = /* @__PURE__ */ jsx("span", {
 		className: Label_module_default.optional,
@@ -50,11 +53,15 @@ var Label = flowComponent("Label", (props) => {
 				...rootProps,
 				className: rootClassName,
 				ref: labelRef,
+				inert: isSkeleton || void 0,
 				children: [
-					/* @__PURE__ */ jsxs("span", {
+					/* @__PURE__ */ jsx("span", {
 						id,
 						className: Label_module_default.text,
-						children: [children, optional && optionalMarker]
+						children: /* @__PURE__ */ jsxs(SkeletonTextContent, {
+							defaultWidth: "6em",
+							children: [children, optional && optionalMarker]
+						})
 					}),
 					/* @__PURE__ */ jsx(UiComponentTunnelExit, {
 						id: "contextualHelp",

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

@@ -1 +1 @@
-{"version":3,"file":"Label.mjs","names":[],"sources":["../../../../../../../src/components/Label/Label.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Label.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport {\n  overlayTriggersTunneledTo,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface LabelProps\n  extends\n    PropsWithChildren<Omit<Aria.LabelProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {\n  /** Whether the label should show an \"optional\" indicator. */\n  optional?: boolean;\n  /** Whether the label should be displayed as disabled. */\n  isDisabled?: boolean;\n  /** @internal */\n  unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Label = flowComponent(\"Label\", (props) => {\n  const {\n    children,\n    className,\n    optional,\n    isDisabled,\n    ref,\n    unstyled = false,\n    ...rest\n  } = props;\n\n  const [labelProps, labelRef] = Aria.useContextProps(\n    rest,\n    ref,\n    Aria.LabelContext,\n  );\n  const { id, ...rootProps } = labelProps;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Label\");\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(styles.label, isDisabled && styles.disabled, className);\n\n  const optionalMarker = (\n    <span className={styles.optional}>\n      {stringFormatter.format(\"optional\")}\n    </span>\n  );\n\n  const rightTunnel = {\n    id: \"right\",\n    component: \"Label\",\n  } as const;\n\n  const propsContext: PropsContext = {\n    ...overlayTriggersTunneledTo(rightTunnel),\n    // The contextual help sits next to the label text, not with the actions.\n    ContextualHelpTrigger: {\n      tunnel: {\n        id: \"contextualHelp\",\n        component: \"Label\",\n      },\n    },\n    Button: {\n      tunnel: rightTunnel,\n      size: \"s\",\n    },\n    Action: {\n      tunnel: rightTunnel,\n      Button: {\n        tunnel: null,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      {/* The context is already merged into `labelProps` above. */}\n      <Aria.LabelContext.Provider value={null}>\n        <Aria.Label {...rootProps} className={rootClassName} ref={labelRef}>\n          {/*\n           * Fields point `aria-labelledby` at the label's id, and the name\n           * computation takes every descendant's name, buttons included. The\n           * id sits on this span so the tunnelled buttons stay out of it.\n           */}\n          <span id={id} className={styles.text}>\n            {children}\n            {optional && optionalMarker}\n          </span>\n          <UiComponentTunnelExit id=\"contextualHelp\" component=\"Label\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return children;\n              }\n\n              return undefined;\n            }}\n          </UiComponentTunnelExit>\n          <UiComponentTunnelExit id=\"right\" component=\"Label\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return <div className={styles.right}>{children}</div>;\n              }\n\n              return undefined;\n            }}\n          </UiComponentTunnelExit>\n        </Aria.Label>\n      </Aria.LabelContext.Provider>\n    </PropsContextProvider>\n  );\n});\n\nexport default Label;\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,UACA,WACA,UACA,YACA,KACA,WAAW,OACX,GAAG,SACD;CAEJ,MAAM,CAAC,YAAY,YAAY,KAAK,gBAClC,MACA,KACA,KAAK,YACP;CACA,MAAM,EAAE,IAAI,GAAG,cAAc;CAE7B,MAAM,kBAAkB,4BAA4B,kBAAS,OAAO;CAEpE,MAAM,gBAAgB,WAClB,YACA,KAAK,qBAAO,OAAO,cAAc,qBAAO,UAAU,SAAS;CAE/D,MAAM,iBACJ,oBAAC,QAAD;EAAM,WAAW,qBAAO;EACrB,UAAA,gBAAgB,OAAO,UAAU;CAC9B,CAAA;CAGR,MAAM,cAAc;EAClB,IAAI;EACJ,WAAW;CACb;CAEA,MAAM,eAA6B;EACjC,GAAG,0BAA0B,WAAW;EAExC,uBAAuB,EACrB,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,QAAQ;GACN,QAAQ;GACR,MAAM;EACR;EACA,QAAQ;GACN,QAAQ;GACR,QAAQ,EACN,QAAQ,KACV;EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAE3B,UAAA,oBAAC,KAAK,aAAa,UAAnB;GAA4B,OAAO;GACjC,UAAA,qBAAC,KAAK,OAAN;IAAY,GAAI;IAAW,WAAW;IAAe,KAAK;IAA1D,UAAA;KAME,qBAAC,QAAD;MAAU;MAAI,WAAW,qBAAO;MAAhC,UAAA,CACG,UACA,YAAY,cACT;;KACN,oBAAC,uBAAD;MAAuB,IAAG;MAAiB,WAAU;MACjD,WAAA,aAAa;OACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO;MAIX;KACqB,CAAA;KACvB,oBAAC,uBAAD;MAAuB,IAAG;MAAQ,WAAU;MACxC,WAAA,aAAa;OACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO,oBAAC,OAAD;QAAK,WAAW,qBAAO;QAAQ;OAAc,CAAA;MAIxD;KACqB,CAAA;IACb;;EACc,CAAA;CACR,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"Label.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/Label/Label.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Label.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport {\n  overlayTriggersTunneledTo,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface LabelProps\n  extends\n    PropsWithChildren<Omit<Aria.LabelProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {\n  /** Whether the label should show an \"optional\" indicator. */\n  optional?: boolean;\n  /** Whether the label should be displayed as disabled. */\n  isDisabled?: boolean;\n  /** @internal */\n  unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Label = flowComponent(\"Label\", (props) => {\n  const {\n    children,\n    className,\n    optional,\n    isDisabled,\n    ref,\n    unstyled = false,\n    ...rest\n  } = props;\n\n  const [labelProps, labelRef] = Aria.useContextProps(\n    rest,\n    ref,\n    Aria.LabelContext,\n  );\n  const { id, ...rootProps } = labelProps;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Label\");\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(styles.label, isDisabled && styles.disabled, className);\n\n  const optionalMarker = (\n    <span className={styles.optional}>\n      {stringFormatter.format(\"optional\")}\n    </span>\n  );\n\n  const rightTunnel = {\n    id: \"right\",\n    component: \"Label\",\n  } as const;\n\n  const propsContext: PropsContext = {\n    ...overlayTriggersTunneledTo(rightTunnel),\n    // The contextual help sits next to the label text, not with the actions.\n    ContextualHelpTrigger: {\n      tunnel: {\n        id: \"contextualHelp\",\n        component: \"Label\",\n      },\n    },\n    Button: {\n      tunnel: rightTunnel,\n      size: \"s\",\n    },\n    Action: {\n      tunnel: rightTunnel,\n      Button: {\n        tunnel: null,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      {/* The context is already merged into `labelProps` above. */}\n      <Aria.LabelContext.Provider value={null}>\n        <Aria.Label\n          {...rootProps}\n          className={rootClassName}\n          ref={labelRef}\n          inert={isSkeleton || undefined}\n        >\n          {/*\n           * Fields point `aria-labelledby` at the label's id, and the name\n           * computation takes every descendant's name, buttons included. The\n           * id sits on this span so the tunnelled buttons stay out of it.\n           */}\n          <span id={id} className={styles.text}>\n            <SkeletonTextContent defaultWidth=\"6em\">\n              {children}\n              {optional && optionalMarker}\n            </SkeletonTextContent>\n          </span>\n          <UiComponentTunnelExit id=\"contextualHelp\" component=\"Label\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return children;\n              }\n\n              return undefined;\n            }}\n          </UiComponentTunnelExit>\n          <UiComponentTunnelExit id=\"right\" component=\"Label\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return <div className={styles.right}>{children}</div>;\n              }\n\n              return undefined;\n            }}\n          </UiComponentTunnelExit>\n        </Aria.Label>\n      </Aria.LabelContext.Provider>\n    </PropsContextProvider>\n  );\n});\n\nexport default Label;\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,UACA,WACA,UACA,YACA,KACA,WAAW,OACX,GAAG,SACD;CAEJ,MAAM,CAAC,YAAY,YAAY,KAAK,gBAClC,MACA,KACA,KAAK,YACP;CACA,MAAM,EAAE,IAAI,GAAG,cAAc;CAE7B,MAAM,kBAAkB,4BAA4BA,kBAAS,OAAO;CACpE,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,WAClB,YACA,KAAKC,qBAAO,OAAO,cAAcA,qBAAO,UAAU,SAAS;CAE/D,MAAM,iBACJ,oBAAC,QAAD;EAAM,WAAWA,qBAAO;EACrB,UAAA,gBAAgB,OAAO,UAAU;CAC9B,CAAA;CAGR,MAAM,cAAc;EAClB,IAAI;EACJ,WAAW;CACb;CAEA,MAAM,eAA6B;EACjC,GAAG,0BAA0B,WAAW;EAExC,uBAAuB,EACrB,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,QAAQ;GACN,QAAQ;GACR,MAAM;EACR;EACA,QAAQ;GACN,QAAQ;GACR,QAAQ,EACN,QAAQ,KACV;EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAE3B,UAAA,oBAAC,KAAK,aAAa,UAAnB;GAA4B,OAAO;GACjC,UAAA,qBAAC,KAAK,OAAN;IACE,GAAI;IACJ,WAAW;IACX,KAAK;IACL,OAAO,cAAc,KAAA;IAJvB,UAAA;KAWE,oBAAC,QAAD;MAAU;MAAI,WAAWA,qBAAO;MAC9B,UAAA,qBAAC,qBAAD;OAAqB,cAAa;OAAlC,UAAA,CACG,UACA,YAAY,cACM;;KACjB,CAAA;KACN,oBAAC,uBAAD;MAAuB,IAAG;MAAiB,WAAU;MACjD,WAAA,aAAa;OACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO;MAIX;KACqB,CAAA;KACvB,oBAAC,uBAAD;MAAuB,IAAG;MAAQ,WAAU;MACxC,WAAA,aAAa;OACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO,oBAAC,OAAD;QAAK,WAAWA,qBAAO;QAAQ;OAAc,CAAA;MAIxD;KACqB,CAAA;IACb;;EACc,CAAA;CACR,CAAA;AAE1B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"LabeledValue.mjs","names":[],"sources":["../../../../../../../src/components/LabeledValue/LabeledValue.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useId } from \"react\";\nimport styles from \"./LabeledValue.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\nexport interface LabeledValueProps\n  extends PropsWithChildren, PropsWithClassName {}\n\n/** @flr-generate all */\nexport const LabeledValue: FC<LabeledValueProps> = (props) => {\n  const { children, className } = props;\n\n  const rootClassName = clsx(styles.labeledValue, className);\n\n  const labelId = useId();\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: styles.label,\n      elementType: \"span\",\n      id: labelId,\n    },\n    CopyButton: {\n      className: styles.button,\n      variant: \"plain\",\n      size: \"s\",\n    },\n    Button: {\n      className: styles.button,\n      size: \"s\",\n    },\n    Link: {\n      inline: true,\n    },\n  };\n\n  return (\n    <div className={rootClassName} role=\"group\" aria-labelledby={labelId}>\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </div>\n  );\n};\n\nexport default LabeledValue;\n"],"mappings":";;;;;;;;;AAWA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,gBAAgB,KAAK,4BAAO,cAAc,SAAS;CAEzD,MAAM,UAAU,MAAM;CAEtB,MAAM,eAA6B;EACjC,OAAO;GACL,WAAW,4BAAO;GAClB,aAAa;GACb,IAAI;EACN;EACA,YAAY;GACV,WAAW,4BAAO;GAClB,SAAS;GACT,MAAM;EACR;EACA,QAAQ;GACN,WAAW,4BAAO;GAClB,MAAM;EACR;EACA,MAAM,EACJ,QAAQ,KACV;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAQ,mBAAiB;EAC3D,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACnB,CAAA;AAET"}
+{"version":3,"file":"LabeledValue.mjs","names":["styles"],"sources":["../../../../../../../src/components/LabeledValue/LabeledValue.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useId } from \"react\";\nimport styles from \"./LabeledValue.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\nexport interface LabeledValueProps\n  extends PropsWithChildren, PropsWithClassName {}\n\n/** @flr-generate all */\nexport const LabeledValue: FC<LabeledValueProps> = (props) => {\n  const { children, className } = props;\n\n  const rootClassName = clsx(styles.labeledValue, className);\n\n  const labelId = useId();\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: styles.label,\n      elementType: \"span\",\n      id: labelId,\n    },\n    CopyButton: {\n      className: styles.button,\n      variant: \"plain\",\n      size: \"s\",\n    },\n    Button: {\n      className: styles.button,\n      size: \"s\",\n    },\n    Link: {\n      inline: true,\n    },\n  };\n\n  return (\n    <div className={rootClassName} role=\"group\" aria-labelledby={labelId}>\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </div>\n  );\n};\n\nexport default LabeledValue;\n"],"mappings":";;;;;;;;;AAWA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,gBAAgB,KAAKA,4BAAO,cAAc,SAAS;CAEzD,MAAM,UAAU,MAAM;CAEtB,MAAM,eAA6B;EACjC,OAAO;GACL,WAAWA,4BAAO;GAClB,aAAa;GACb,IAAI;EACN;EACA,YAAY;GACV,WAAWA,4BAAO;GAClB,SAAS;GACT,MAAM;EACR;EACA,QAAQ;GACN,WAAWA,4BAAO;GAClB,MAAM;EACR;EACA,MAAM,EACJ,QAAQ,KACV;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAQ,mBAAiB;EAC3D,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACnB,CAAA;AAET"}

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

@@ -13,7 +13,8 @@ var LayoutCard = flowComponent("LayoutCard", (props) => {
 	const Element = elementType;
 	const propsContext = {
 		TabNavigation: { className: LayoutCard_module_default.tabNavigation },
-		AccentBox: { className: LayoutCard_module_default.accentBox }
+		AccentBox: { className: LayoutCard_module_default.accentBox },
+		Alert: { className: LayoutCard_module_default.alert }
 	};
 	return /* @__PURE__ */ jsx(Element, {
 		className: rootClassName,

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutCard.mjs","names":[],"sources":["../../../../../../../src/components/LayoutCard/LayoutCard.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./LayoutCard.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsWithElementType } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\n\nexport interface LayoutCardProps\n  extends\n    PropsWithChildren,\n    PropsWithElementType<\"div\" | \"main\" | \"footer\" | \"header\">,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const LayoutCard = flowComponent(\n  \"LayoutCard\",\n  (props) => {\n    const { children, className, elementType = \"div\", ref, ...rest } = props;\n\n    const rootClassName = clsx(styles.layoutCard, className);\n\n    const Element = elementType;\n\n    const propsContext: PropsContext = {\n      TabNavigation: {\n        className: styles.tabNavigation,\n      },\n      AccentBox: { className: styles.accentBox },\n    };\n\n    return (\n      <Element className={rootClassName} {...rest} ref={ref}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </Element>\n    );\n  },\n  { type: \"layout\" },\n);\n\nexport default LayoutCard;\n"],"mappings":";;;;;;;;;AAgBA,IAAa,aAAa,cACxB,eACC,UAAU;CACT,MAAM,EAAE,UAAU,WAAW,cAAc,OAAO,KAAK,GAAG,SAAS;CAEnE,MAAM,gBAAgB,KAAK,0BAAO,YAAY,SAAS;CAEvD,MAAM,UAAU;CAEhB,MAAM,eAA6B;EACjC,eAAe,EACb,WAAW,0BAAO,cACpB;EACA,WAAW,EAAE,WAAW,0BAAO,UAAU;CAC3C;CAEA,OACE,oBAAC,SAAD;EAAS,WAAW;EAAe,GAAI;EAAW;EAChD,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACf,CAAA;AAEb,GACA,EAAE,MAAM,SAAS,CACnB"}
+{"version":3,"file":"LayoutCard.mjs","names":["styles"],"sources":["../../../../../../../src/components/LayoutCard/LayoutCard.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./LayoutCard.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsWithElementType } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\n\nexport interface LayoutCardProps\n  extends\n    PropsWithChildren,\n    PropsWithElementType<\"div\" | \"main\" | \"footer\" | \"header\">,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const LayoutCard = flowComponent(\n  \"LayoutCard\",\n  (props) => {\n    const { children, className, elementType = \"div\", ref, ...rest } = props;\n\n    const rootClassName = clsx(styles.layoutCard, className);\n\n    const Element = elementType;\n\n    const propsContext: PropsContext = {\n      TabNavigation: {\n        className: styles.tabNavigation,\n      },\n      AccentBox: { className: styles.accentBox },\n      Alert: { className: styles.alert },\n    };\n\n    return (\n      <Element className={rootClassName} {...rest} ref={ref}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </Element>\n    );\n  },\n  { type: \"layout\" },\n);\n\nexport default LayoutCard;\n"],"mappings":";;;;;;;;;AAgBA,IAAa,aAAa,cACxB,eACC,UAAU;CACT,MAAM,EAAE,UAAU,WAAW,cAAc,OAAO,KAAK,GAAG,SAAS;CAEnE,MAAM,gBAAgB,KAAKA,0BAAO,YAAY,SAAS;CAEvD,MAAM,UAAU;CAEhB,MAAM,eAA6B;EACjC,eAAe,EACb,WAAWA,0BAAO,cACpB;EACA,WAAW,EAAE,WAAWA,0BAAO,UAAU;EACzC,OAAO,EAAE,WAAWA,0BAAO,MAAM;CACnC;CAEA,OACE,oBAAC,SAAD;EAAS,WAAW;EAAe,GAAI;EAAW;EAChD,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACf,CAAA;AAEb,GACA,EAAE,MAAM,SAAS,CACnB"}

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

@@ -3,13 +3,15 @@
 //#region src/components/LayoutCard/LayoutCard.module.scss
 var layoutCard = "flow--layout-card";
 var tabNavigation = "flow--layout-card--tab-navigation";
+var alert = "flow--layout-card--alert";
 var accentBox = "flow--layout-card--accent-box";
 var LayoutCard_module_default = {
 	layoutCard,
 	tabNavigation,
+	alert,
 	accentBox
 };
 //#endregion
-export { accentBox, LayoutCard_module_default as default, layoutCard, tabNavigation };
+export { accentBox, alert, LayoutCard_module_default as default, layoutCard, tabNavigation };
 
 //# sourceMappingURL=LayoutCard.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutCard.module.mjs","names":[],"sources":["../../../../../../../src/components/LayoutCard/LayoutCard.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.layoutCard {\n  @include scrollbar.scrollbar;\n\n  align-self: normal;\n  background-color: var(--layout-card--background-color);\n  box-shadow: var(--layout-card--box-shadow);\n  border-radius: var(--layout-card--corner-radius);\n  padding: var(--layout-card--padding);\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  border: var(--layout-card--border-width) var(--layout-card--border-style)\n    var(--layout-card--border-color);\n\n  > .tabNavigation {\n    margin-top: calc(var(--layout-card--padding) * -1);\n    margin-inline: calc(var(--layout-card--padding) * -1);\n    margin-bottom: var(--layout-card--padding);\n    border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n    border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n\n    :global(.flow--tab-navigation--item):first-child\n      :global(.flow--tab-navigation--link) {\n      border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n    }\n\n    :global(.flow--tab-navigation--more-button) {\n      border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n    }\n  }\n\n  &:has(> .accentBox:only-child) {\n    padding: 0;\n    border: none;\n\n    .accentBox {\n      padding: var(--layout-card--padding);\n      border-radius: calc(var(--layout-card--corner-radius) - 1px);\n      flex-grow: 1;\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .layoutCard {\n    padding: var(--layout-card--padding-mobile);\n\n    > .tabNavigation {\n      margin-top: calc(var(--layout-card--padding-mobile) * -1);\n      margin-inline: calc(var(--layout-card--padding-mobile) * -1);\n      margin-bottom: var(--layout-card--padding-mobile);\n    }\n\n    &:has(> .accentBox:only-child) {\n      padding: 0;\n\n      .accentBox {\n        padding: var(--layout-card--padding-mobile);\n      }\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"LayoutCard.module.mjs","names":[],"sources":["../../../../../../../src/components/LayoutCard/LayoutCard.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.layoutCard {\n  @include scrollbar.scrollbar;\n\n  align-self: normal;\n  background-color: var(--layout-card--background-color);\n  box-shadow: var(--layout-card--box-shadow);\n  border-radius: var(--layout-card--corner-radius);\n  padding: var(--layout-card--padding);\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  border: var(--layout-card--border-width) var(--layout-card--border-style)\n    var(--layout-card--border-color);\n\n  > .tabNavigation {\n    margin-top: calc(var(--layout-card--padding) * -1);\n    margin-inline: calc(var(--layout-card--padding) * -1);\n    margin-bottom: var(--layout-card--padding);\n    border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n    border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n\n    :global(.flow--tab-navigation--item):first-child\n      :global(.flow--tab-navigation--link) {\n      border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n    }\n\n    :global(.flow--tab-navigation--more-button) {\n      border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n    }\n  }\n\n  /* Stacked page-wide alerts */\n  > .alert + .alert {\n    margin-block-start: var(--section--spacing);\n  }\n\n  &:has(> .accentBox:only-child) {\n    padding: 0;\n    border: none;\n\n    .accentBox {\n      padding: var(--layout-card--padding);\n      border-radius: calc(var(--layout-card--corner-radius) - 1px);\n      flex-grow: 1;\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .layoutCard {\n    padding: var(--layout-card--padding-mobile);\n\n    > .tabNavigation {\n      margin-top: calc(var(--layout-card--padding-mobile) * -1);\n      margin-inline: calc(var(--layout-card--padding-mobile) * -1);\n      margin-bottom: var(--layout-card--padding-mobile);\n    }\n\n    &:has(> .accentBox:only-child) {\n      padding: 0;\n\n      .accentBox {\n        padding: var(--layout-card--padding-mobile);\n      }\n    }\n  }\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"Legend.mjs","names":[],"sources":["../../../../../../../src/components/Legend/Legend.tsx"],"sourcesContent":["import type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./Legend.module.scss\";\n\nexport type LegendProps = PropsWithChildren & PropsWithClassName;\n\n/** @flr-generate all */\nexport const Legend: FC<LegendProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.legend, className);\n\n  return (\n    <ul className={rootClassName} {...rest}>\n      {children}\n    </ul>\n  );\n};\n\nexport default Legend;\n"],"mappings":";;;;;;;AAQA,IAAa,UAA2B,UAAU;CAChD,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,gBAAgB,KAAK,sBAAO,QAAQ,SAAS;CAEnD,OACE,oBAAC,MAAD;EAAI,WAAW;EAAe,GAAI;EAC/B;CACC,CAAA;AAER"}
+{"version":3,"file":"Legend.mjs","names":["styles"],"sources":["../../../../../../../src/components/Legend/Legend.tsx"],"sourcesContent":["import type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./Legend.module.scss\";\n\nexport type LegendProps = PropsWithChildren & PropsWithClassName;\n\n/** @flr-generate all */\nexport const Legend: FC<LegendProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.legend, className);\n\n  return (\n    <ul className={rootClassName} {...rest}>\n      {children}\n    </ul>\n  );\n};\n\nexport default Legend;\n"],"mappings":";;;;;;;AAQA,IAAa,UAA2B,UAAU;CAChD,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,gBAAgB,KAAKA,sBAAO,QAAQ,SAAS;CAEnD,OACE,oBAAC,MAAD;EAAI,WAAW;EAAe,GAAI;EAC/B;CACC,CAAA;AAER"}

package/dist/js/packages/components/src/components/Legend/components/LegendItem/LegendItem.mjs

@@ -1,5 +1,6 @@
 "use client"
 /* */
+import { useSkeletonMode } from "../../../SkeletonMode/skeletonModeContext.mjs";
 import { Text } from "../../../Text/Text.mjs";
 import { isCategoricalColor } from "../../../../lib/tokens/isCategoricalColor.mjs";
 import LegendItem_module_default from "./LegendItem.module.mjs";
@@ -8,12 +9,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Legend/components/LegendItem/LegendItem.tsx
 var LegendItem = (props) => {
 	const { children, color: colorFromProps } = props;
+	const isSkeleton = useSkeletonMode();
 	const color = colorFromProps ? isCategoricalColor(colorFromProps) ? `var(--color--categorical--${colorFromProps})` : colorFromProps : void 0;
 	return /* @__PURE__ */ jsxs("li", {
 		className: LegendItem_module_default.legendItem,
+		inert: isSkeleton || void 0,
 		children: [/* @__PURE__ */ jsx("div", {
-			style: colorFromProps ? { backgroundColor: color } : void 0,
-			className: clsx(LegendItem_module_default.colorSquare)
+			style: colorFromProps && !isSkeleton ? { backgroundColor: color } : void 0,
+			className: clsx(LegendItem_module_default.colorSquare, isSkeleton && LegendItem_module_default.skeleton)
 		}), /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("small", { children }) })]
 	});
 };

package/dist/js/packages/components/src/components/Legend/components/LegendItem/LegendItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LegendItem.mjs","names":[],"sources":["../../../../../../../../../src/components/Legend/components/LegendItem/LegendItem.tsx"],"sourcesContent":["import Text from \"@/components/Text\";\nimport type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./LegendItem.module.scss\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport clsx from \"clsx\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\n\nexport interface LegendItemProps extends PropsWithChildren {\n  color?: CategoricalWithCustomColor;\n}\n\nexport const LegendItem: FC<LegendItemProps> = (props) => {\n  const { children, color: colorFromProps } = props;\n\n  const color = colorFromProps\n    ? isCategoricalColor(colorFromProps)\n      ? `var(--color--categorical--${colorFromProps})`\n      : colorFromProps\n    : undefined;\n\n  return (\n    <li className={styles.legendItem}>\n      <div\n        style={colorFromProps ? { backgroundColor: color } : undefined}\n        className={clsx(styles.colorSquare)}\n      />\n      <Text>\n        <small>{children}</small>\n      </Text>\n    </li>\n  );\n};\n\nexport default LegendItem;\n"],"mappings":";;;;;;;;AAWA,IAAa,cAAmC,UAAU;CACxD,MAAM,EAAE,UAAU,OAAO,mBAAmB;CAE5C,MAAM,QAAQ,iBACV,mBAAmB,cAAc,IAC/B,6BAA6B,eAAe,KAC5C,iBACF,KAAA;CAEJ,OACE,qBAAC,MAAD;EAAI,WAAW,0BAAO;EAAtB,UAAA,CACE,oBAAC,OAAD;GACE,OAAO,iBAAiB,EAAE,iBAAiB,MAAM,IAAI,KAAA;GACrD,WAAW,KAAK,0BAAO,WAAW;EACnC,CAAA,GACD,oBAAC,MAAD,EAAA,UACE,oBAAC,SAAD,EAAQ,SAAgB,CAAA,EACpB,CAAA,CACJ;;AAER"}
+{"version":3,"file":"LegendItem.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Legend/components/LegendItem/LegendItem.tsx"],"sourcesContent":["import Text from \"@/components/Text\";\nimport type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./LegendItem.module.scss\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport clsx from \"clsx\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface LegendItemProps extends PropsWithChildren {\n  color?: CategoricalWithCustomColor;\n}\n\nexport const LegendItem: FC<LegendItemProps> = (props) => {\n  const { children, color: colorFromProps } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const color = colorFromProps\n    ? isCategoricalColor(colorFromProps)\n      ? `var(--color--categorical--${colorFromProps})`\n      : colorFromProps\n    : undefined;\n\n  return (\n    <li className={styles.legendItem} inert={isSkeleton || undefined}>\n      <div\n        style={\n          colorFromProps && !isSkeleton ? { backgroundColor: color } : undefined\n        }\n        className={clsx(styles.colorSquare, isSkeleton && styles.skeleton)}\n      />\n      <Text>\n        <small>{children}</small>\n      </Text>\n    </li>\n  );\n};\n\nexport default LegendItem;\n"],"mappings":";;;;;;;;;AAYA,IAAa,cAAmC,UAAU;CACxD,MAAM,EAAE,UAAU,OAAO,mBAAmB;CAE5C,MAAM,aAAa,gBAAgB;CAEnC,MAAM,QAAQ,iBACV,mBAAmB,cAAc,IAC/B,6BAA6B,eAAe,KAC5C,iBACF,KAAA;CAEJ,OACE,qBAAC,MAAD;EAAI,WAAWA,0BAAO;EAAY,OAAO,cAAc,KAAA;EAAvD,UAAA,CACE,oBAAC,OAAD;GACE,OACE,kBAAkB,CAAC,aAAa,EAAE,iBAAiB,MAAM,IAAI,KAAA;GAE/D,WAAW,KAAKA,0BAAO,aAAa,cAAcA,0BAAO,QAAQ;EAClE,CAAA,GACD,oBAAC,MAAD,EAAA,UACE,oBAAC,SAAD,EAAQ,SAAgB,CAAA,EACpB,CAAA,CACJ;;AAER"}

package/dist/js/packages/components/src/components/Legend/components/LegendItem/LegendItem.module.mjs

@@ -3,11 +3,15 @@
 //#region src/components/Legend/components/LegendItem/LegendItem.module.scss
 var legendItem = "flow--legend--legend-item";
 var colorSquare = "flow--legend--legend-item--color-square";
+var skeleton = "flow--legend--legend-item--skeleton";
 var LegendItem_module_default = {
 	legendItem,
-	colorSquare
+	colorSquare,
+	skeleton,
+	"skeleton-surface-shimmer": "flow--legend--legend-item--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--legend--legend-item--skeleton-text-shimmer"
 };
 //#endregion
-export { colorSquare, LegendItem_module_default as default, legendItem };
+export { colorSquare, LegendItem_module_default as default, legendItem, skeleton };
 
 //# sourceMappingURL=LegendItem.module.mjs.map

package/dist/js/packages/components/src/components/Legend/components/LegendItem/LegendItem.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LegendItem.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Legend/components/LegendItem/LegendItem.module.scss"],"sourcesContent":[".legendItem {\n  display: flex;\n  flex-direction: row;\n  gap: var(--legend-item--spacing);\n  align-items: center;\n\n  .colorSquare {\n    height: var(--legend-item--marker--size);\n    width: var(--legend-item--marker--size);\n    border-radius: var(--legend-item--marker--corner-radius);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"LegendItem.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Legend/components/LegendItem/LegendItem.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.legendItem {\n  display: flex;\n  flex-direction: row;\n  gap: var(--legend-item--spacing);\n  align-items: center;\n\n  .colorSquare {\n    height: var(--legend-item--marker--size);\n    width: var(--legend-item--marker--size);\n    border-radius: var(--legend-item--marker--corner-radius);\n\n    /* SkeletonMode: a surface instead of the color */\n    &.skeleton {\n      @include skeleton.surface;\n\n      --skeleton-radius: var(--legend-item--marker--corner-radius);\n    }\n  }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"LightBox.mjs","names":[],"sources":["../../../../../../../src/components/LightBox/LightBox.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { Overlay } from \"@/components/Overlay/Overlay\";\nimport clsx from \"clsx\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport styles from \"./LightBox.module.scss\";\nimport DivView from \"@/views/DivView\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\n\nexport interface LightBoxProps\n  extends PropsWithChildren, FlowComponentProps, PropsWithClassName {\n  /** An overlay controller to control the light box state. */\n  controller?: OverlayController;\n  /**\n   * Whether content can be displayed larger than the available space in the\n   * screen. @default true\n   */\n  fitScreen?: boolean;\n}\n\nexport const LightBox = flowComponent(\"LightBox\", (props) => {\n  const {\n    controller: controllerFromProps,\n    children,\n    ref: ignoredRef,\n    className,\n    fitScreen = true,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.lightBox,\n    fitScreen && styles.fitScreen,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    ActionGroup: {\n      preserveOrder: true,\n      spacing: \"m\",\n      className: styles.actionGroup,\n      Button: { variant: \"solid\", color: \"light-static\" },\n      tunnel: {\n        id: \"actionGroup\",\n        component: \"LightBox\",\n      },\n    },\n    LightBoxGallery: {\n      className: styles.gallery,\n    },\n  };\n\n  const controllerFromContext = useOverlayController(\"LightBox\", {\n    reuseControllerFromContext: true,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"LightBox\");\n\n  return (\n    <Overlay\n      overlayType=\"LightBox\"\n      className={rootClassName}\n      controller={controller}\n      {...rest}\n    >\n      <PropsContextProvider props={propsContext}>\n        <DivView className={styles.content}>{children}</DivView>\n        <DivView className={styles.actions}>\n          <ButtonView\n            color=\"light-static\"\n            variant=\"solid\"\n            onPress={() => controller.close()}\n            aria-label={stringFormatter.format(\"close\")}\n          >\n            <IconClose />\n          </ButtonView>\n          <UiComponentTunnelExit id=\"actionGroup\" component=\"LightBox\" />\n        </DivView>\n      </PropsContextProvider>\n    </Overlay>\n  );\n});\n\nexport default LightBox;\n"],"mappings":";;;;;;;;;;;;;;;;AA+BA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EACJ,YAAY,qBACZ,UACA,KAAK,YACL,WACA,YAAY,MACZ,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,wBAAO,UACP,aAAa,wBAAO,WACpB,SACF;CAEA,MAAM,eAA6B;EACjC,aAAa;GACX,eAAe;GACf,SAAS;GACT,WAAW,wBAAO;GAClB,QAAQ;IAAE,SAAS;IAAS,OAAO;GAAe;GAClD,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,iBAAiB,EACf,WAAW,wBAAO,QACpB;CACF;CAEA,MAAM,wBAAwB,qBAAqB,YAAY,EAC7D,4BAA4B,KAC9B,CAAC;CAED,MAAM,aAAa,uBAAuB;CAE1C,MAAM,kBAAkB,4BAA4B,kBAAS,UAAU;CAEvE,OACE,oBAAC,SAAD;EACE,aAAY;EACZ,WAAW;EACC;EACZ,GAAI;EAEJ,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,oBAAC,SAAD;IAAS,WAAW,wBAAO;IAAU;GAAkB,CAAA,GACvD,qBAAC,SAAD;IAAS,WAAW,wBAAO;IAA3B,UAAA,CACE,oBAAC,YAAD;KACE,OAAM;KACN,SAAQ;KACR,eAAe,WAAW,MAAM;KAChC,cAAY,gBAAgB,OAAO,OAAO;KAE1C,UAAA,oBAAC,WAAD,CAAY,CAAA;IACF,CAAA,GACZ,oBAAC,uBAAD;KAAuB,IAAG;KAAc,WAAU;IAAY,CAAA,CACvD;GACW,CAAA,CAAA;;CACf,CAAA;AAEb,CAAC"}
+{"version":3,"file":"LightBox.mjs","names":["styles","locales"],"sources":["../../../../../../../src/components/LightBox/LightBox.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { Overlay } from \"@/components/Overlay/Overlay\";\nimport clsx from \"clsx\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport styles from \"./LightBox.module.scss\";\nimport DivView from \"@/views/DivView\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\n\nexport interface LightBoxProps\n  extends PropsWithChildren, FlowComponentProps, PropsWithClassName {\n  /** An overlay controller to control the light box state. */\n  controller?: OverlayController;\n  /**\n   * Whether content can be displayed larger than the available space in the\n   * screen. @default true\n   */\n  fitScreen?: boolean;\n}\n\nexport const LightBox = flowComponent(\"LightBox\", (props) => {\n  const {\n    controller: controllerFromProps,\n    children,\n    ref: ignoredRef,\n    className,\n    fitScreen = true,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.lightBox,\n    fitScreen && styles.fitScreen,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    ActionGroup: {\n      preserveOrder: true,\n      spacing: \"m\",\n      className: styles.actionGroup,\n      Button: { variant: \"solid\", color: \"light-static\" },\n      tunnel: {\n        id: \"actionGroup\",\n        component: \"LightBox\",\n      },\n    },\n    LightBoxGallery: {\n      className: styles.gallery,\n    },\n  };\n\n  const controllerFromContext = useOverlayController(\"LightBox\", {\n    reuseControllerFromContext: true,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"LightBox\");\n\n  return (\n    <Overlay\n      overlayType=\"LightBox\"\n      className={rootClassName}\n      controller={controller}\n      {...rest}\n    >\n      <PropsContextProvider props={propsContext}>\n        <DivView className={styles.content}>{children}</DivView>\n        <DivView className={styles.actions}>\n          <ButtonView\n            color=\"light-static\"\n            variant=\"solid\"\n            onPress={() => controller.close()}\n            aria-label={stringFormatter.format(\"close\")}\n          >\n            <IconClose />\n          </ButtonView>\n          <UiComponentTunnelExit id=\"actionGroup\" component=\"LightBox\" />\n        </DivView>\n      </PropsContextProvider>\n    </Overlay>\n  );\n});\n\nexport default LightBox;\n"],"mappings":";;;;;;;;;;;;;;;;AA+BA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EACJ,YAAY,qBACZ,UACA,KAAK,YACL,WACA,YAAY,MACZ,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,wBAAO,UACP,aAAaA,wBAAO,WACpB,SACF;CAEA,MAAM,eAA6B;EACjC,aAAa;GACX,eAAe;GACf,SAAS;GACT,WAAWA,wBAAO;GAClB,QAAQ;IAAE,SAAS;IAAS,OAAO;GAAe;GAClD,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,iBAAiB,EACf,WAAWA,wBAAO,QACpB;CACF;CAEA,MAAM,wBAAwB,qBAAqB,YAAY,EAC7D,4BAA4B,KAC9B,CAAC;CAED,MAAM,aAAa,uBAAuB;CAE1C,MAAM,kBAAkB,4BAA4BC,kBAAS,UAAU;CAEvE,OACE,oBAAC,SAAD;EACE,aAAY;EACZ,WAAW;EACC;EACZ,GAAI;EAEJ,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,oBAAC,SAAD;IAAS,WAAWD,wBAAO;IAAU;GAAkB,CAAA,GACvD,qBAAC,SAAD;IAAS,WAAWA,wBAAO;IAA3B,UAAA,CACE,oBAAC,YAAD;KACE,OAAM;KACN,SAAQ;KACR,eAAe,WAAW,MAAM;KAChC,cAAY,gBAAgB,OAAO,OAAO;KAE1C,UAAA,oBAAC,WAAD,CAAY,CAAA;IACF,CAAA,GACZ,oBAAC,uBAAD;KAAuB,IAAG;KAAc,WAAU;IAAY,CAAA,CACvD;GACW,CAAA,CAAA;;CACf,CAAA;AAEb,CAAC"}

package/dist/js/packages/components/src/components/LightBox/components/LightBoxGallery/Controls.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.mjs","names":[],"sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGallery/Controls.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"@/components/LightBox/components/LightBoxGallery/LightBoxGallery.module.scss\";\nimport clsx from \"clsx\";\n/*\n * Flow's own formatter, not react-aria's: the indicator's message takes\n * variables, and only this one runs them through IntlMessageFormat –\n * react-aria's hands back the raw \"{current} of {count}\".\n */\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../locales/*.locale.json\";\n\ninterface Props {\n  count: number;\n  currentIndex: number;\n}\n\nexport const Controls: FC<Props> = (props) => {\n  const { count, currentIndex } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"LightBox\");\n\n  const indicators = Array(count)\n    .fill(\"\")\n    .map((_, index) => (\n      <span\n        key={index}\n        className={clsx(\n          styles.indicator,\n          currentIndex === index && styles.current,\n        )}\n      />\n    ));\n\n  return (\n    <div\n      className={styles.indicators}\n      aria-label={stringFormatter.format(\"indicator\", {\n        current: currentIndex + 1,\n        count,\n      })}\n    >\n      {indicators}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAgBA,IAAa,YAAuB,UAAU;CAC5C,MAAM,EAAE,OAAO,iBAAiB;CAEhC,MAAM,kBAAkB,4BAA4B,kBAAS,UAAU;CAEvE,MAAM,aAAa,MAAM,KAAK,CAAC,CAC5B,KAAK,EAAE,CAAC,CACR,KAAK,GAAG,UACP,oBAAC,QAAD,EAEE,WAAW,KACT,+BAAO,WACP,iBAAiB,SAAS,+BAAO,OACnC,EACD,GALM,KAKN,CACF;CAEH,OACE,oBAAC,OAAD;EACE,WAAW,+BAAO;EAClB,cAAY,gBAAgB,OAAO,aAAa;GAC9C,SAAS,eAAe;GACxB;EACF,CAAC;EAEA,UAAA;CACE,CAAA;AAET"}
+{"version":3,"file":"Controls.mjs","names":["locales","styles"],"sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGallery/Controls.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"@/components/LightBox/components/LightBoxGallery/LightBoxGallery.module.scss\";\nimport clsx from \"clsx\";\n/*\n * Flow's own formatter, not react-aria's: the indicator's message takes\n * variables, and only this one runs them through IntlMessageFormat –\n * react-aria's hands back the raw \"{current} of {count}\".\n */\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../locales/*.locale.json\";\n\ninterface Props {\n  count: number;\n  currentIndex: number;\n}\n\nexport const Controls: FC<Props> = (props) => {\n  const { count, currentIndex } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"LightBox\");\n\n  const indicators = Array(count)\n    .fill(\"\")\n    .map((_, index) => (\n      <span\n        key={index}\n        className={clsx(\n          styles.indicator,\n          currentIndex === index && styles.current,\n        )}\n      />\n    ));\n\n  return (\n    <div\n      className={styles.indicators}\n      aria-label={stringFormatter.format(\"indicator\", {\n        current: currentIndex + 1,\n        count,\n      })}\n    >\n      {indicators}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAgBA,IAAa,YAAuB,UAAU;CAC5C,MAAM,EAAE,OAAO,iBAAiB;CAEhC,MAAM,kBAAkB,4BAA4BA,kBAAS,UAAU;CAEvE,MAAM,aAAa,MAAM,KAAK,CAAC,CAC5B,KAAK,EAAE,CAAC,CACR,KAAK,GAAG,UACP,oBAAC,QAAD,EAEE,WAAW,KACTC,+BAAO,WACP,iBAAiB,SAASA,+BAAO,OACnC,EACD,GALM,KAKN,CACF;CAEH,OACE,oBAAC,OAAD;EACE,WAAWA,+BAAO;EAClB,cAAY,gBAAgB,OAAO,aAAa;GAC9C,SAAS,eAAe;GACxB;EACF,CAAC;EAEA,UAAA;CACE,CAAA;AAET"}

package/dist/js/packages/components/src/components/LightBox/components/LightBoxGallery/LightBoxGallery.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LightBoxGallery.mjs","names":[],"sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGallery/LightBoxGallery.tsx"],"sourcesContent":["import { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport React, { type ReactNode, useEffect, useRef, useState } from \"react\";\nimport {\n  IconChevronLeft,\n  IconChevronRight,\n} from \"@/components/Icon/components/icons\";\nimport styles from \"./LightBoxGallery.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../locales/*.locale.json\";\nimport Button from \"@/components/Button\";\nimport { Controls } from \"@/components/LightBox/components/LightBoxGallery/Controls\";\n\nexport interface LightBoxGalleryProps extends PropsWithClassName {\n  children: ReactNode[];\n  defaultIndex?: number;\n}\n\n/** @flr-generate all */\nexport const LightBoxGallery = flowComponent(\"LightBoxGallery\", (props) => {\n  const { children, className, defaultIndex = 0 } = props;\n\n  const [currentIndex, setIndex] = useState(defaultIndex);\n\n  const count = React.Children.count(children);\n\n  const isFirst = currentIndex === 0;\n  const isLast = currentIndex === count - 1;\n\n  const pointerStartX = useRef<number | null>(null);\n  const swipeThreshold = 50;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    containerRef.current?.focus();\n  }, [containerRef.current]);\n\n  const paginate = (direction: number) => {\n    setIndex((prev) => {\n      const next = prev + direction;\n\n      if (next < 0) return 0;\n      if (next >= count) return count - 1;\n\n      return next;\n    });\n  };\n\n  const handlePointerDown = (e: React.PointerEvent) => {\n    if (!e.isPrimary) return;\n    pointerStartX.current = e.clientX;\n  };\n\n  const handlePointerUp = (e: React.PointerEvent) => {\n    if (pointerStartX.current === null) return;\n\n    const distance = pointerStartX.current - e.clientX;\n\n    if (Math.abs(distance) > swipeThreshold) {\n      paginate(distance > 0 ? 1 : -1);\n    }\n\n    pointerStartX.current = null;\n  };\n\n  const handlePointerCancel = () => {\n    pointerStartX.current = null;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case \"ArrowLeft\":\n        if (!isFirst) paginate(-1);\n        break;\n      case \"ArrowRight\":\n        if (!isLast) paginate(1);\n        break;\n    }\n  };\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"LightBox\");\n\n  return (\n    <div className={clsx(styles.lightBoxGallery, className)}>\n      <div\n        ref={containerRef}\n        className={styles.content}\n        onPointerDown={handlePointerDown}\n        onPointerUp={handlePointerUp}\n        onPointerCancel={handlePointerCancel}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        aria-label={stringFormatter.format(\"gallery\")}\n      >\n        <div className={styles.galleryItem} key={currentIndex}>\n          {children[currentIndex]}\n        </div>\n\n        <div className={styles.controls}>\n          <Button\n            aria-label={stringFormatter.format(\"previous\")}\n            onPress={() => paginate(-1)}\n            color=\"light-static\"\n            className={styles.previousButton}\n            isDisabled={isFirst}\n          >\n            <IconChevronLeft />\n          </Button>\n\n          <Controls count={count} currentIndex={currentIndex} />\n\n          <Button\n            aria-label={stringFormatter.format(\"next\")}\n            onPress={() => paginate(1)}\n            color=\"light-static\"\n            className={styles.nextButton}\n            isDisabled={isLast}\n          >\n            <IconChevronRight />\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default LightBoxGallery;\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,IAAa,kBAAkB,cAAc,oBAAoB,UAAU;CACzE,MAAM,EAAE,UAAU,WAAW,eAAe,MAAM;CAElD,MAAM,CAAC,cAAc,YAAY,SAAS,YAAY;CAEtD,MAAM,QAAQ,MAAM,SAAS,MAAM,QAAQ;CAE3C,MAAM,UAAU,iBAAiB;CACjC,MAAM,SAAS,iBAAiB,QAAQ;CAExC,MAAM,gBAAgB,OAAsB,IAAI;CAChD,MAAM,iBAAiB;CAEvB,MAAM,eAAe,OAAuB,IAAI;CAEhD,gBAAgB;EACd,aAAa,SAAS,MAAM;CAC9B,GAAG,CAAC,aAAa,OAAO,CAAC;CAEzB,MAAM,YAAY,cAAsB;EACtC,UAAU,SAAS;GACjB,MAAM,OAAO,OAAO;GAEpB,IAAI,OAAO,GAAG,OAAO;GACrB,IAAI,QAAQ,OAAO,OAAO,QAAQ;GAElC,OAAO;EACT,CAAC;CACH;CAEA,MAAM,qBAAqB,MAA0B;EACnD,IAAI,CAAC,EAAE,WAAW;EAClB,cAAc,UAAU,EAAE;CAC5B;CAEA,MAAM,mBAAmB,MAA0B;EACjD,IAAI,cAAc,YAAY,MAAM;EAEpC,MAAM,WAAW,cAAc,UAAU,EAAE;EAE3C,IAAI,KAAK,IAAI,QAAQ,IAAI,gBACvB,SAAS,WAAW,IAAI,IAAI,EAAE;EAGhC,cAAc,UAAU;CAC1B;CAEA,MAAM,4BAA4B;EAChC,cAAc,UAAU;CAC1B;CAEA,MAAM,iBAAiB,MAA2B;EAChD,QAAQ,EAAE,KAAV;GACE,KAAK;IACH,IAAI,CAAC,SAAS,SAAS,EAAE;IACzB;GACF,KAAK,cACH,IAAI,CAAC,QAAQ,SAAS,CAAC;EAE3B;CACF;CAEA,MAAM,kBAAkB,4BAA4B,kBAAS,UAAU;CAEvE,OACE,oBAAC,OAAD;EAAK,WAAW,KAAK,+BAAO,iBAAiB,SAAS;EACpD,UAAA,qBAAC,OAAD;GACE,KAAK;GACL,WAAW,+BAAO;GAClB,eAAe;GACf,aAAa;GACb,iBAAiB;GACjB,UAAU;GACV,WAAW;GACX,MAAK;GACL,wBAAqB;GACrB,cAAY,gBAAgB,OAAO,SAAS;GAV9C,UAAA,CAYE,oBAAC,OAAD;IAAK,WAAW,+BAAO;IACpB,UAAA,SAAS;GACP,GAFoC,YAEpC,GAEL,qBAAC,OAAD;IAAK,WAAW,+BAAO;IAAvB,UAAA;KACE,oBAAC,QAAD;MACE,cAAY,gBAAgB,OAAO,UAAU;MAC7C,eAAe,SAAS,EAAE;MAC1B,OAAM;MACN,WAAW,+BAAO;MAClB,YAAY;MAEZ,UAAA,oBAAC,iBAAD,CAAkB,CAAA;KACZ,CAAA;KAER,oBAAC,UAAD;MAAiB;MAAqB;KAAe,CAAA;KAErD,oBAAC,QAAD;MACE,cAAY,gBAAgB,OAAO,MAAM;MACzC,eAAe,SAAS,CAAC;MACzB,OAAM;MACN,WAAW,+BAAO;MAClB,YAAY;MAEZ,UAAA,oBAAC,kBAAD,CAAmB,CAAA;KACb,CAAA;IACL;GACF,CAAA,CAAA;;CACF,CAAA;AAET,CAAC"}
+{"version":3,"file":"LightBoxGallery.mjs","names":["locales","styles"],"sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGallery/LightBoxGallery.tsx"],"sourcesContent":["import { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport React, { type ReactNode, useEffect, useRef, useState } from \"react\";\nimport {\n  IconChevronLeft,\n  IconChevronRight,\n} from \"@/components/Icon/components/icons\";\nimport styles from \"./LightBoxGallery.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../locales/*.locale.json\";\nimport Button from \"@/components/Button\";\nimport { Controls } from \"@/components/LightBox/components/LightBoxGallery/Controls\";\n\nexport interface LightBoxGalleryProps extends PropsWithClassName {\n  children: ReactNode[];\n  defaultIndex?: number;\n}\n\n/** @flr-generate all */\nexport const LightBoxGallery = flowComponent(\"LightBoxGallery\", (props) => {\n  const { children, className, defaultIndex = 0 } = props;\n\n  const [currentIndex, setIndex] = useState(defaultIndex);\n\n  const count = React.Children.count(children);\n\n  const isFirst = currentIndex === 0;\n  const isLast = currentIndex === count - 1;\n\n  const pointerStartX = useRef<number | null>(null);\n  const swipeThreshold = 50;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    containerRef.current?.focus();\n  }, [containerRef.current]);\n\n  const paginate = (direction: number) => {\n    setIndex((prev) => {\n      const next = prev + direction;\n\n      if (next < 0) return 0;\n      if (next >= count) return count - 1;\n\n      return next;\n    });\n  };\n\n  const handlePointerDown = (e: React.PointerEvent) => {\n    if (!e.isPrimary) return;\n    pointerStartX.current = e.clientX;\n  };\n\n  const handlePointerUp = (e: React.PointerEvent) => {\n    if (pointerStartX.current === null) return;\n\n    const distance = pointerStartX.current - e.clientX;\n\n    if (Math.abs(distance) > swipeThreshold) {\n      paginate(distance > 0 ? 1 : -1);\n    }\n\n    pointerStartX.current = null;\n  };\n\n  const handlePointerCancel = () => {\n    pointerStartX.current = null;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case \"ArrowLeft\":\n        if (!isFirst) paginate(-1);\n        break;\n      case \"ArrowRight\":\n        if (!isLast) paginate(1);\n        break;\n    }\n  };\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"LightBox\");\n\n  return (\n    <div className={clsx(styles.lightBoxGallery, className)}>\n      <div\n        ref={containerRef}\n        className={styles.content}\n        onPointerDown={handlePointerDown}\n        onPointerUp={handlePointerUp}\n        onPointerCancel={handlePointerCancel}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        aria-label={stringFormatter.format(\"gallery\")}\n      >\n        <div className={styles.galleryItem} key={currentIndex}>\n          {children[currentIndex]}\n        </div>\n\n        <div className={styles.controls}>\n          <Button\n            aria-label={stringFormatter.format(\"previous\")}\n            onPress={() => paginate(-1)}\n            color=\"light-static\"\n            className={styles.previousButton}\n            isDisabled={isFirst}\n          >\n            <IconChevronLeft />\n          </Button>\n\n          <Controls count={count} currentIndex={currentIndex} />\n\n          <Button\n            aria-label={stringFormatter.format(\"next\")}\n            onPress={() => paginate(1)}\n            color=\"light-static\"\n            className={styles.nextButton}\n            isDisabled={isLast}\n          >\n            <IconChevronRight />\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default LightBoxGallery;\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,IAAa,kBAAkB,cAAc,oBAAoB,UAAU;CACzE,MAAM,EAAE,UAAU,WAAW,eAAe,MAAM;CAElD,MAAM,CAAC,cAAc,YAAY,SAAS,YAAY;CAEtD,MAAM,QAAQ,MAAM,SAAS,MAAM,QAAQ;CAE3C,MAAM,UAAU,iBAAiB;CACjC,MAAM,SAAS,iBAAiB,QAAQ;CAExC,MAAM,gBAAgB,OAAsB,IAAI;CAChD,MAAM,iBAAiB;CAEvB,MAAM,eAAe,OAAuB,IAAI;CAEhD,gBAAgB;EACd,aAAa,SAAS,MAAM;CAC9B,GAAG,CAAC,aAAa,OAAO,CAAC;CAEzB,MAAM,YAAY,cAAsB;EACtC,UAAU,SAAS;GACjB,MAAM,OAAO,OAAO;GAEpB,IAAI,OAAO,GAAG,OAAO;GACrB,IAAI,QAAQ,OAAO,OAAO,QAAQ;GAElC,OAAO;EACT,CAAC;CACH;CAEA,MAAM,qBAAqB,MAA0B;EACnD,IAAI,CAAC,EAAE,WAAW;EAClB,cAAc,UAAU,EAAE;CAC5B;CAEA,MAAM,mBAAmB,MAA0B;EACjD,IAAI,cAAc,YAAY,MAAM;EAEpC,MAAM,WAAW,cAAc,UAAU,EAAE;EAE3C,IAAI,KAAK,IAAI,QAAQ,IAAI,gBACvB,SAAS,WAAW,IAAI,IAAI,EAAE;EAGhC,cAAc,UAAU;CAC1B;CAEA,MAAM,4BAA4B;EAChC,cAAc,UAAU;CAC1B;CAEA,MAAM,iBAAiB,MAA2B;EAChD,QAAQ,EAAE,KAAV;GACE,KAAK;IACH,IAAI,CAAC,SAAS,SAAS,EAAE;IACzB;GACF,KAAK,cACH,IAAI,CAAC,QAAQ,SAAS,CAAC;EAE3B;CACF;CAEA,MAAM,kBAAkB,4BAA4BA,kBAAS,UAAU;CAEvE,OACE,oBAAC,OAAD;EAAK,WAAW,KAAKC,+BAAO,iBAAiB,SAAS;EACpD,UAAA,qBAAC,OAAD;GACE,KAAK;GACL,WAAWA,+BAAO;GAClB,eAAe;GACf,aAAa;GACb,iBAAiB;GACjB,UAAU;GACV,WAAW;GACX,MAAK;GACL,wBAAqB;GACrB,cAAY,gBAAgB,OAAO,SAAS;GAV9C,UAAA,CAYE,oBAAC,OAAD;IAAK,WAAWA,+BAAO;IACpB,UAAA,SAAS;GACP,GAFoC,YAEpC,GAEL,qBAAC,OAAD;IAAK,WAAWA,+BAAO;IAAvB,UAAA;KACE,oBAAC,QAAD;MACE,cAAY,gBAAgB,OAAO,UAAU;MAC7C,eAAe,SAAS,EAAE;MAC1B,OAAM;MACN,WAAWA,+BAAO;MAClB,YAAY;MAEZ,UAAA,oBAAC,iBAAD,CAAkB,CAAA;KACZ,CAAA;KAER,oBAAC,UAAD;MAAiB;MAAqB;KAAe,CAAA;KAErD,oBAAC,QAAD;MACE,cAAY,gBAAgB,OAAO,MAAM;MACzC,eAAe,SAAS,CAAC;MACzB,OAAM;MACN,WAAWA,+BAAO;MAClB,YAAY;MAEZ,UAAA,oBAAC,kBAAD,CAAmB,CAAA;KACb,CAAA;IACL;GACF,CAAA,CAAA;;CACF,CAAA;AAET,CAAC"}