npm - @mittwald/flow-react-components - Versions diffs - 1.5.0-next.8 → 1.5.0 - Mend

@mittwald/flow-react-components 1.5.0-next.8 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (787) hide show

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

@@ -4,12 +4,16 @@
 var imageCropper = "flow--image-cropper";
 var cropperContainer = "flow--image-cropper--cropper-container";
 var errorViewContainer = "flow--image-cropper--error-view-container";
+var skeleton = "flow--image-cropper--skeleton";
 var ImageCropper_module_default = {
 	imageCropper,
 	cropperContainer,
-	errorViewContainer
+	errorViewContainer,
+	skeleton,
+	"skeleton-surface-shimmer": "flow--image-cropper--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--image-cropper--skeleton-text-shimmer"
 };
 //#endregion
-export { cropperContainer, ImageCropper_module_default as default, errorViewContainer, imageCropper };
+export { cropperContainer, ImageCropper_module_default as default, errorViewContainer, imageCropper, skeleton };
 //# sourceMappingURL=ImageCropper.module.mjs.map

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

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

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":""}
1	+ {"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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -1,6 +1,7 @@
 "use client"
 /* */
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { useLocalizedStringFormatter as useLocalizedStringFormatter$1 } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
 import __locale_default from "../../../../../_virtual/_31.locale.mjs";
 import Kbd_module_default from "./Kbd.module.mjs";
@@ -17,7 +18,8 @@ import { useIsSSR } from "react-aria";
 var Kbd = flowComponent("Kbd", (props) => {
 	const { keys, className, isDisabled, children, variant = "plain", ...rest } = props;
 	const isSsr = useIsSSR();
-	const rootClassName = clsx(Kbd_module_default.kbd, isDisabled && Kbd_module_default.disabled, Kbd_module_default[variant], className);
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(Kbd_module_default.kbd, isDisabled && Kbd_module_default.disabled, Kbd_module_default[variant], isSkeleton && Kbd_module_default.skeleton, className);
 	const stringFormatter = useLocalizedStringFormatter$1(__locale_default, "Kbd");
 	const isApple = !isSsr && isAppleDevice();
 	const joinedKeys = keys?.map((key, index) => {
@@ -34,6 +36,7 @@ var Kbd = flowComponent("Kbd", (props) => {
 	return /* @__PURE__ */ jsx("kbd", {
 		className: rootClassName,
 		...rest,
+		inert: isSkeleton || void 0,
 		children: joinedKeys ?? children
 	});
 });

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

	@@ -1 +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"}
1	+ {"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\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\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 const isSkeleton = useSkeletonMode();\n\n const rootClassName = clsx(\n styles.kbd,\n isDisabled && styles.disabled,\n styles[variant],\n isSkeleton && styles.skeleton,\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} inert={isSkeleton \|\| undefined}>\n {joinedKeys ?? children}\n </kbd>\n );\n});\n\nexport default Kbd;\n"],"mappings":";;;;;;;;;;;;;;;;;AA4BA,IAAa,MAAM,cAAc,QAAQ,UAAU;CACjD,MAAM,EACJ,MACA,WACA,YACA,UACA,UAAU,SACV,GAAG,SACD;CAEJ,MAAM,QAAQ,SAAS;CACvB,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,mBAAO,KACP,cAAcA,mBAAO,UACrBA,mBAAO,UACP,cAAcA,mBAAO,UACrB,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;EAAM,OAAO,cAAc,KAAA;EAC3D,UAAA,cAAc;CACZ,CAAA;AAET,CAAC"}

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

@@ -5,13 +5,17 @@ var kbd = "flow--kbd";
 var soft = "flow--kbd--soft";
 var plain = "flow--kbd--plain";
 var disabled = "flow--kbd--disabled";
+var skeleton = "flow--kbd--skeleton";
 var Kbd_module_default = {
 	kbd,
 	soft,
 	plain,
-	disabled
+	disabled,
+	skeleton,
+	"skeleton-surface-shimmer": "flow--kbd--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--kbd--skeleton-text-shimmer"
 };
 //#endregion
-export { Kbd_module_default as default, disabled, kbd, plain, soft };
+export { Kbd_module_default as default, disabled, kbd, plain, skeleton, soft };
 //# sourceMappingURL=Kbd.module.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Kbd.module.mjs","names":[],"sources":["../../../../../../../src/components/Kbd/Kbd.module.scss"],"sourcesContent":[".kbd {\n font-family: Inter, sans-serif;\n font-size: var(--font-size-text--s);\n}\n\n:not(.kbd) > .kbd {\n &.soft {\n display: inline-block;\n line-height: var(--font-size-text--m);\n color: var(--kbd--content-color--default);\n background-color: var(--kbd--background-color--default);\n padding: var(--kbd--padding);\n padding-top: var(--kbd--padding-y-start);\n border-radius: var(--kbd--corner-radius);\n border-inline-start: var(--kbd--inner-shadow-size-x) solid\n var(--kbd--inner-shadow-color--default);\n border-inline-end: var(--kbd--inner-shadow-size-x) solid\n var(--kbd--inner-shadow-color--default);\n box-shadow: inset 0 calc(var(--kbd--inner-shadow-size-y-end) * -1) 0\n var(--kbd--inner-shadow-color--default);\n width: fit-content;\n height: fit-content;\n }\n\n &.plain {\n color: var(--kbd--content-color-plain--default);\n }\n\n &.disabled {\n &.soft {\n color: var(--kbd--content-color--disabled);\n background-color: var(--kbd--background-color--disabled);\n border-inline-start-color: var(--kbd--inner-shadow-color--disabled);\n border-inline-end-color: var(--kbd--inner-shadow-color--disabled);\n box-shadow: inset 0 calc(var(--kbd--inner-shadow-size-y-end) * -1) 0\n var(--kbd--inner-shadow-color--disabled);\n }\n\n &.plain {\n color: var(--kbd--content-color-plain--disabled);\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Kbd.module.mjs","names":[],"sources":["../../../../../../../src/components/Kbd/Kbd.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.kbd {\n font-family: Inter, sans-serif;\n font-size: var(--font-size-text--s);\n}\n\n:not(.kbd) > .kbd {\n &.soft {\n display: inline-block;\n line-height: var(--font-size-text--m);\n color: var(--kbd--content-color--default);\n background-color: var(--kbd--background-color--default);\n padding: var(--kbd--padding);\n padding-top: var(--kbd--padding-y-start);\n border-radius: var(--kbd--corner-radius);\n border-inline-start: var(--kbd--inner-shadow-size-x) solid\n var(--kbd--inner-shadow-color--default);\n border-inline-end: var(--kbd--inner-shadow-size-x) solid\n var(--kbd--inner-shadow-color--default);\n box-shadow: inset 0 calc(var(--kbd--inner-shadow-size-y-end) * -1) 0\n var(--kbd--inner-shadow-color--default);\n width: fit-content;\n height: fit-content;\n }\n\n &.plain {\n color: var(--kbd--content-color-plain--default);\n }\n\n &.disabled {\n &.soft {\n color: var(--kbd--content-color--disabled);\n background-color: var(--kbd--background-color--disabled);\n border-inline-start-color: var(--kbd--inner-shadow-color--disabled);\n border-inline-end-color: var(--kbd--inner-shadow-color--disabled);\n box-shadow: inset 0 calc(var(--kbd--inner-shadow-size-y-end) * -1) 0\n var(--kbd--inner-shadow-color--disabled);\n }\n\n &.plain {\n color: var(--kbd--content-color-plain--disabled);\n }\n }\n\n /* SkeletonMode — after the variants, and as specific as the disabled ones,\n so the surface wins over their colors /\n\n &.skeleton,\n &.skeleton.disabled {\n @include skeleton.shape;\n\n --skeleton-radius: var(--kbd--corner-radius);\n\n / An inline box clips no overflow, so the shimmer would run past it. */\n display: inline-block;\n }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

package/dist/js/packages/components/src/components/Label/Label.mjs CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":""}
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 /* 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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":""}
1	+ {"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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"LightBoxGallery.module.mjs","names":[],"sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGallery/LightBoxGallery.module.scss"],"sourcesContent":[".lightBoxGallery {\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n --button-size: calc(\n var(--icon--size--m) + 2 * var(--button--padding-icon-only)\n );\n --button-size-plus-spacing: calc(\n var(--button-size) + var(--light-box--spacing)\n );\n --indicator-height: calc(var(--light-box--spacing) + var(--icon--size--m));\n\n .content {\n display: flex;\n flex-direction: column;\n width: 100%;\n justify-content: center;\n\n &:focus {\n outline: none;\n }\n }\n\n .galleryItem {\n position: relative;\n margin: 0 auto;\n user-select: none;\n }\n\n .actions {\n position: absolute;\n top: 0;\n inset-inline-end: calc(var(--button-size-plus-spacing) * -1);\n display: flex;\n flex-direction: column;\n row-gap: var(--light-box--spacing);\n }\n\n .actionGroup {\n flex-direction: column;\n }\n\n .image {\n animation: fade-in var(--transition--duration--default) ease-in forwards;\n height: ~~100%;\~~n ~~width: 100%;\n~~ pointer-events: none;\n }\n\n @keyframes fade-in {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n }\n\n .indicators {\n display: flex;\n justify-content: center;\n column-gap: var(--light-box--indicator-spacing);\n color: var(--light-box--content-color);\n }\n\n .indicator {\n display: block;\n width: var(--light-box--indicator-size);\n height: var(--light-box--indicator-size);\n border: var(--light-box--indicator-border-width)\n var(--light-box--indicator-border-style) var(--light-box--content-color);\n border-radius: var(--light-box--indicator-corner-radius);\n\n &.current {\n background-color: var(--light-box--content-color);\n }\n }\n}\n\n@media (min-width: 768px) {\n .content {\n padding-inline: calc(\n var(--button-size-plus-spacing) + var(--light-box--spacing)\n );\n padding-bottom: var(--indicator-height);\n height: var(--light-box--max-height);\n }\n\n .galleryItem {\n max-height: calc(var(--light-box--max-height) - var(--indicator-height));\n }\n\n .indicators {\n position: absolute;\n bottom: calc(var(--light-box--spacing) / 2);\n inset-inline: 0;\n }\n\n .previousButton,\n .nextButton {\n position: absolute;\n top: calc(50% - var(--button-size) / 2);\n }\n\n .previousButton {\n inset-inline-start: 0;\n }\n\n .nextButton {\n inset-inline-end: 0;\n }\n}\n\n@media (max-width: 768px) {\n .content {\n padding-inline: var(--button-size-plus-spacing);\n padding-bottom: var(--button-size-plus-spacing);\n height: var(--light-box--max-height-mobile);\n }\n\n .galleryItem {\n max-height: calc(\n var(--light-box--max-height) - var(--button-size-plus-spacing)\n );\n }\n\n .controls {\n display: flex;\n position: absolute;\n bottom: 0;\n inset-inline: 0;\n justify-content: space-between;\n align-items: center;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"LightBoxGallery.module.mjs","names":[],"sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGallery/LightBoxGallery.module.scss"],"sourcesContent":[".lightBoxGallery {\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n --button-size: calc(\n var(--icon--size--m) + 2 * var(--button--padding-icon-only)\n );\n --button-size-plus-spacing: calc(\n var(--button-size) + var(--light-box--spacing)\n );\n --indicator-height: calc(var(--light-box--spacing) + var(--icon--size--m));\n\n .content {\n display: flex;\n flex-direction: column;\n width: 100%;\n justify-content: center;\n\n &:focus {\n outline: none;\n }\n }\n\n .galleryItem {\n position: relative;\n margin: 0 auto;\n user-select: none;\n max-height: var(--gallery-item-max-height);\n }\n\n .actions {\n position: absolute;\n top: 0;\n inset-inline-end: calc(var(--button-size-plus-spacing) * -1);\n display: flex;\n flex-direction: column;\n row-gap: var(--light-box--spacing);\n }\n\n .actionGroup {\n flex-direction: column;\n }\n\n /* The item's height is indefinite, so a percentage size here is cyclic and\n engines resolve it differently (WebKit stretched the image). An explicit\n cap scales the image down along its aspect ratio instead. */\n .image {\n animation: fade-in var(--transition--duration--default) ease-in forwards;\n max-height: var(--gallery-item-max-height);\n pointer-events: none;\n }\n\n @keyframes fade-in {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n }\n\n .indicators {\n display: flex;\n justify-content: center;\n column-gap: var(--light-box--indicator-spacing);\n color: var(--light-box--content-color);\n }\n\n .indicator {\n display: block;\n width: var(--light-box--indicator-size);\n height: var(--light-box--indicator-size);\n border: var(--light-box--indicator-border-width)\n var(--light-box--indicator-border-style) var(--light-box--content-color);\n border-radius: var(--light-box--indicator-corner-radius);\n\n &.current {\n background-color: var(--light-box--content-color);\n }\n }\n}\n\n@media (min-width: 768px) {\n .content {\n padding-inline: calc(\n var(--button-size-plus-spacing) + var(--light-box--spacing)\n );\n padding-bottom: var(--indicator-height);\n height: var(--light-box--max-height);\n }\n\n .galleryItem {\n --gallery-item-max-height: calc(\n var(--light-box--max-height) - var(--indicator-height)\n );\n }\n\n .indicators {\n position: absolute;\n bottom: calc(var(--light-box--spacing) / 2);\n inset-inline: 0;\n }\n\n .previousButton,\n .nextButton {\n position: absolute;\n top: calc(50% - var(--button-size) / 2);\n }\n\n .previousButton {\n inset-inline-start: 0;\n }\n\n .nextButton {\n inset-inline-end: 0;\n }\n}\n\n@media (max-width: 768px) {\n .content {\n padding-inline: var(--button-size-plus-spacing);\n padding-bottom: var(--button-size-plus-spacing);\n height: var(--light-box--max-height-mobile);\n }\n\n .galleryItem {\n --gallery-item-max-height: calc(\n var(--light-box--max-height) - var(--button-size-plus-spacing)\n );\n }\n\n .controls {\n display: flex;\n position: absolute;\n bottom: 0;\n inset-inline: 0;\n justify-content: space-between;\n align-items: center;\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/LightBox/components/LightBoxGalleryItem/LightBoxGalleryItem.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LightBoxGalleryItem.mjs","names":[],"sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGalleryItem/LightBoxGalleryItem.tsx"],"sourcesContent":["import { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"@/components/LightBox/components/LightBoxGallery/LightBoxGallery.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { useOverlayController } from \"@/lib/hooks\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../locales/.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport type { PropsWithChildren } from \"react\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport type LightBoxGalleryItemProps = PropsWithChildren;\n\n/* @flr-generate all */\nexport const LightBoxGalleryItem = flowComponent(\n \"LightBoxGalleryItem\",\n (props) => {\n const { children } = props;\n\n const controller = useOverlayController(\"Modal\");\n\n const propsContext: PropsContext = {\n ActionGroup: {\n spacing: \"m\",\n className: styles.actionGroup,\n Button: { color: \"light-static\" },\n tunnel: { id: \"actionGroup\", component: \"LightBoxGalleryItem\" },\n },\n Image: { className: styles.image },\n };\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n return (\n <PropsContextProvider props={propsContext}>\n {children}\n <div className={styles.actions}>\n <Button\n aria-label={stringFormatter.format(\"close\")}\n color=\"light-static\"\n onPress={() => controller.close()}\n >\n <IconClose />\n </Button>\n <UiComponentTunnelExit\n id=\"actionGroup\"\n component=\"LightBoxGalleryItem\"\n />\n </div>\n </PropsContextProvider>\n );\n },\n);\n\nexport default LightBoxGalleryItem;\n"],"mappings":";;;;;;;;;;;;;;AAcA,IAAa,sBAAsB,cACjC,wBACC,UAAU;CACT,MAAM,EAAE,aAAa;CAErB,MAAM,aAAa,qBAAqB,OAAO;CAE/C,MAAM,eAA6B;EACjC,aAAa;GACX,SAAS;GACT,~~WAAW~~,+BAAO;GAClB,QAAQ,EAAE,OAAO,eAAe;GAChC,QAAQ;IAAE,IAAI;IAAe,WAAW;GAAsB;EAChE;EACA,OAAO,EAAE,~~WAAW~~,+BAAO,MAAM;CACnC;CAEA,MAAM,kBAAkB,~~4BAA4B~~,gBAAO;CAE3D,OACE,qBAAC,sBAAD;EAAsB,OAAO;EAA7B,UAAA,CACG,UACD,qBAAC,OAAD;GAAK,~~WAAW~~,+BAAO;GAAvB,UAAA,CACE,oBAAC,QAAD;IACE,cAAY,gBAAgB,OAAO,OAAO;IAC1C,OAAM;IACN,eAAe,WAAW,MAAM;IAEhC,UAAA,oBAAC,WAAD,CAAY,CAAA;GACN,CAAA,GACR,oBAAC,uBAAD;IACE,IAAG;IACH,WAAU;GACX,CAAA,CACE;EACe,CAAA,CAAA;;AAE1B,CACF"}
1	+ {"version":3,"file":"LightBoxGalleryItem.mjs","names":["styles","locales"],"sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGalleryItem/LightBoxGalleryItem.tsx"],"sourcesContent":["import { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"@/components/LightBox/components/LightBoxGallery/LightBoxGallery.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { useOverlayController } from \"@/lib/hooks\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../locales/.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport type { PropsWithChildren } from \"react\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport type LightBoxGalleryItemProps = PropsWithChildren;\n\n/* @flr-generate all */\nexport const LightBoxGalleryItem = flowComponent(\n \"LightBoxGalleryItem\",\n (props) => {\n const { children } = props;\n\n const controller = useOverlayController(\"Modal\");\n\n const propsContext: PropsContext = {\n ActionGroup: {\n spacing: \"m\",\n className: styles.actionGroup,\n Button: { color: \"light-static\" },\n tunnel: { id: \"actionGroup\", component: \"LightBoxGalleryItem\" },\n },\n Image: { className: styles.image },\n };\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n return (\n <PropsContextProvider props={propsContext}>\n {children}\n <div className={styles.actions}>\n <Button\n aria-label={stringFormatter.format(\"close\")}\n color=\"light-static\"\n onPress={() => controller.close()}\n >\n <IconClose />\n </Button>\n <UiComponentTunnelExit\n id=\"actionGroup\"\n component=\"LightBoxGalleryItem\"\n />\n </div>\n </PropsContextProvider>\n );\n },\n);\n\nexport default LightBoxGalleryItem;\n"],"mappings":";;;;;;;;;;;;;;AAcA,IAAa,sBAAsB,cACjC,wBACC,UAAU;CACT,MAAM,EAAE,aAAa;CAErB,MAAM,aAAa,qBAAqB,OAAO;CAE/C,MAAM,eAA6B;EACjC,aAAa;GACX,SAAS;GACT,WAAWA,+BAAO;GAClB,QAAQ,EAAE,OAAO,eAAe;GAChC,QAAQ;IAAE,IAAI;IAAe,WAAW;GAAsB;EAChE;EACA,OAAO,EAAE,WAAWA,+BAAO,MAAM;CACnC;CAEA,MAAM,kBAAkB,4BAA4BC,gBAAO;CAE3D,OACE,qBAAC,sBAAD;EAAsB,OAAO;EAA7B,UAAA,CACG,UACD,qBAAC,OAAD;GAAK,WAAWD,+BAAO;GAAvB,UAAA,CACE,oBAAC,QAAD;IACE,cAAY,gBAAgB,OAAO,OAAO;IAC1C,OAAM;IACN,eAAe,WAAW,MAAM;IAEhC,UAAA,oBAAC,WAAD,CAAY,CAAA;GACN,CAAA,GACR,oBAAC,uBAAD;IACE,IAAG;IACH,WAAU;GACX,CAAA,CACE;EACe,CAAA,CAAA;;AAE1B,CACF"}