npm - @mittwald/flow-react-components - Versions diffs - 1.2.0-next.6 → 1.2.0-next.60 - Mend

@mittwald/flow-react-components 1.2.0-next.6 → 1.2.0-next.60

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 (2785) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Heading.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import type { AlphaColor, PropsWithElementType } from \"@/lib/types/props\";\nimport styles from \"./Heading.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface HeadingProps\n extends\n Aria.HeadingProps,\n FlowComponentProps,\n PropsWithElementType<\"span\" \| \"p\"> {\n /** The font size of the heading. /\n size?: \"xs\" \| \"s\" \| \"m\" \| \"l\" \| \"xl\" \| \"xxl\";\n /* The color of the heading. @default \"default\" /\n color?: \"default\" \| \"danger\" \| \"unavailable\" \| AlphaColor;\n /* The text-wrap property of the text. @default undefined /\n wrap?: \"wrap\" \| \"balance\";\n}\n\n/* @flr-generate all */\nexport const Heading = flowComponent(\"Heading\", (props) => {\n const {\n children,\n className,\n level = 2,\n color = \"default\",\n wrap,\n size,\n ref,\n elementType,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.heading,\n size && styles[`size-${size}`],\n color !== \"default\" && styles[color],\n wrap && styles[`wrap-${wrap}`],\n elementType && styleClassname(styles, `h${level}`),\n className,\n );\n\n const Element = elementType ?? Aria.Heading;\n\n const propsContext: PropsContext = {\n Icon: {\n \"aria-hidden\": true,\n className: styles.icon,\n },\n AlertBadge: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n },\n Badge: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n },\n ContextualHelpTrigger: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n Button: {\n tunnel: null,\n },\n },\n AlertText: {\n Icon: {\n className: styles.icon,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <Element className={rootClassName} {...rest} ref={ref} level={level}>\n <span className={styles.headingText}>{children}</span>\n <span className={styles.headingContent}>\n <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\" />\n </span>\n </Element>\n </PropsContextProvider>\n );\n});\n\nexport default Heading;\n"],"mappings":"~~;;;;;;;;;;;;AAyBA~~,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,UACA,WACA,QAAQ,GACR,QAAQ,WACR,MACA,MACA,KACA,aACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,uBAAO,SACP,QAAQ,uBAAO,QAAQ,SACvB,UAAU,aAAa,uBAAO,QAC9B,QAAQ,uBAAO,QAAQ,SACvB,eAAe,eAAe,wBAAQ,IAAI,OAAO,GACjD,SACF;CAEA,MAAM,UAAU,eAAe,KAAK;CAEpC,MAAM,eAA6B;EACjC,MAAM;GACJ,eAAe;GACf,WAAW,uBAAO;EACpB;EACA,YAAY,EACV,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,OAAO,EACL,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,uBAAuB;GACrB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,QAAQ,EACN,QAAQ,KACV;EACF;EACA,WAAW,EACT,MAAM,EACJ,WAAW,uBAAO,KACpB,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,SAAD;GAAS,WAAW;GAAe,GAAI;GAAW;GAAY;GAA9D,UAAA,CACE,oBAAC,QAAD;IAAM,WAAW,uBAAO;IAAc;GAAe,CAAA,GACrD,oBAAC,QAAD;IAAM,WAAW,uBAAO;IACtB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;IAAW,CAAA;GAC5D,CAAA,CACC;;CACW,CAAA;AAE1B,CAAC"}
1	+ {"version":3,"file":"Heading.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import type { AlphaColor, PropsWithElementType } from \"@/lib/types/props\";\nimport styles from \"./Heading.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface HeadingProps\n extends\n Aria.HeadingProps,\n FlowComponentProps,\n PropsWithElementType<\"span\" \| \"p\"> {\n /** The font size of the heading. /\n size?: \"xs\" \| \"s\" \| \"m\" \| \"l\" \| \"xl\" \| \"xxl\";\n /* The color of the heading. @default \"default\" /\n color?: \"default\" \| \"danger\" \| \"unavailable\" \| AlphaColor;\n /* The text-wrap property of the text. @default undefined /\n wrap?: \"wrap\" \| \"balance\";\n}\n\n/\n The font size each heading level renders at — the TypeScript half of the\n * level-based `--font-size` rules in Heading.module.scss. Levels 4 to 6 fall\n * through to the `xs` default.\n /\nconst sizeByLevel: Record<number, NonNullable<HeadingProps[\"size\"]>> = {\n 1: \"xl\",\n 2: \"m\",\n 3: \"s\",\n};\n\n/* @flr-generate all */\nexport const Heading = flowComponent(\"Heading\", (props) => {\n const {\n children,\n className,\n level = 2,\n color = \"default\",\n wrap,\n size,\n ref,\n elementType,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.heading,\n size && styles[`size-${size}`],\n color !== \"default\" && styles[color],\n wrap && styles[`wrap-${wrap}`],\n elementType && styleClassname(styles, `h${level}`),\n className,\n );\n\n const Element = elementType ?? Aria.Heading;\n\n const effectiveSize = size ?? sizeByLevel[level] ?? \"xs\";\n const buttonSize =\n effectiveSize === \"xl\" \|\| effectiveSize === \"xxl\" ? \"m\" : \"s\";\n\n const propsContext: PropsContext = {\n Icon: {\n \"aria-hidden\": true,\n className: styles.icon,\n },\n AlertBadge: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n },\n Badge: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n },\n Button: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n size: buttonSize,\n },\n CopyButton: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n size: buttonSize,\n },\n ContextualHelpTrigger: {\n tunnel: {\n id: \"headingContent\",\n component: \"Heading\",\n },\n Button: {\n tunnel: null,\n },\n },\n AlertText: {\n Icon: {\n className: styles.icon,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <Element className={rootClassName} {...rest} ref={ref} level={level}>\n <span className={styles.headingText}>{children}</span>\n <span className={styles.headingContent}>\n <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\" />\n </span>\n </Element>\n </PropsContextProvider>\n );\n});\n\nexport default Heading;\n"],"mappings":";;;;;;;;;;;;;;;;AA6BA,IAAM,cAAiE;CACrE,GAAG;CACH,GAAG;CACH,GAAG;AACL;;AAGA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,UACA,WACA,QAAQ,GACR,QAAQ,WACR,MACA,MACA,KACA,aACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,uBAAO,SACP,QAAQ,uBAAO,QAAQ,SACvB,UAAU,aAAa,uBAAO,QAC9B,QAAQ,uBAAO,QAAQ,SACvB,eAAe,eAAe,wBAAQ,IAAI,OAAO,GACjD,SACF;CAEA,MAAM,UAAU,eAAe,KAAK;CAEpC,MAAM,gBAAgB,QAAQ,YAAY,UAAU;CACpD,MAAM,aACJ,kBAAkB,QAAQ,kBAAkB,QAAQ,MAAM;CAE5D,MAAM,eAA6B;EACjC,MAAM;GACJ,eAAe;GACf,WAAW,uBAAO;EACpB;EACA,YAAY,EACV,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,OAAO,EACL,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,QAAQ;GACN,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,YAAY;GACV,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,uBAAuB;GACrB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,QAAQ,EACN,QAAQ,KACV;EACF;EACA,WAAW,EACT,MAAM,EACJ,WAAW,uBAAO,KACpB,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,SAAD;GAAS,WAAW;GAAe,GAAI;GAAW;GAAY;GAA9D,UAAA,CACE,oBAAC,QAAD;IAAM,WAAW,uBAAO;IAAc;GAAe,CAAA,GACrD,oBAAC,QAAD;IAAM,WAAW,uBAAO;IACtB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;IAAW,CAAA;GAC5D,CAAA,CACC;;CACW,CAAA;AAE1B,CAAC"}

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

@@ -14,9 +14,9 @@ var Image = flowComponent("Image", (props) => {
 		className: rootClassName,
 		style: {
 			...style,
-			aspectRatio,
-			width,
-			height
+			...aspectRatio !== void 0 && { aspectRatio },
+			...width !== void 0 && { width },
+			...height !== void 0 && { height }
 		},
 		...rest
 	});

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.tsx"],"sourcesContent":["import type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { ComponentProps } from \"react\";\nimport styles from \"./Image.module.scss\";\n\nexport interface ImageProps\n extends\n Omit<ComponentProps<\"img\">, \"ref\">,\n FlowComponentProps<HTMLImageElement> {\n /** Display the image with border and rounded edges. /\n withBorder?: boolean;\n /\n The aspect ratio of the images container. Larger images will be centered\n * and their overflow will be hidden.\n /\n aspectRatio?: number;\n}\n\n/* @flr-generate all */\nexport const Image = flowComponent(\"Image\", (props) => {\n const {\n className,\n withBorder,\n style,\n aspectRatio,\n width,\n height,\n ref,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.image,\n withBorder && styles.border,\n aspectRatio && styles.aspectRatio,\n className,\n );\n\n return (\n <img\n ref={ref}\n className={rootClassName}\n style={{ ...style, aspectRatio, width, height }}\n {...rest}\n />\n );\n});\n\nexport default Image;\n"],"mappings":";;;;;;;;AAoBA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,WACA,YACA,OACA,aACA,OACA,QACA,KACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,qBAAO,OACP,cAAc,qBAAO,QACrB,eAAe,qBAAO,aACtB,SACF;CAEA,OACE,oBAAC,OAAD;EACO;EACL,WAAW;EACX,OAAO;~~GAAE~~,GAAG;~~GAAO~~;~~GAAa~~;~~GAAO~~;~~EAAO~~;~~EAC9C~~,GAAI;CACL,CAAA;AAEL,CAAC"}
1	+ {"version":3,"file":"Image.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.tsx"],"sourcesContent":["import type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { ComponentProps } from \"react\";\nimport styles from \"./Image.module.scss\";\n\nexport interface ImageProps\n extends\n Omit<ComponentProps<\"img\">, \"ref\">,\n FlowComponentProps<HTMLImageElement> {\n /** Display the image with border and rounded edges. /\n withBorder?: boolean;\n /\n The aspect ratio of the images container. Larger images will be centered\n * and their overflow will be hidden.\n /\n aspectRatio?: number;\n}\n\n/* @flr-generate all */\nexport const Image = flowComponent(\"Image\", (props) => {\n const {\n className,\n withBorder,\n style,\n aspectRatio,\n width,\n height,\n ref,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.image,\n withBorder && styles.border,\n aspectRatio && styles.aspectRatio,\n className,\n );\n\n return (\n <img\n ref={ref}\n className={rootClassName}\n style={{\n ...style,\n ...(aspectRatio !== undefined && { aspectRatio }),\n ...(width !== undefined && { width }),\n ...(height !== undefined && { height }),\n }}\n {...rest}\n />\n );\n});\n\nexport default Image;\n"],"mappings":";;;;;;;;AAoBA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,WACA,YACA,OACA,aACA,OACA,QACA,KACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,qBAAO,OACP,cAAc,qBAAO,QACrB,eAAe,qBAAO,aACtB,SACF;CAEA,OACE,oBAAC,OAAD;EACO;EACL,WAAW;EACX,OAAO;GACL,GAAG;GACH,GAAI,gBAAgB,KAAA,KAAa,EAAE,YAAY;GAC/C,GAAI,UAAU,KAAA,KAAa,EAAE,MAAM;GACnC,GAAI,WAAW,KAAA,KAAa,EAAE,OAAO;EACvC;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}

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

@@ -1,13 +1,16 @@
 "use client"
 /* */
+import { IconDanger } from "../Icon/components/icons/IconDanger.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
+import { Text } from "../Text/Text.mjs";
+import { IllustratedMessage } from "../IllustratedMessage/IllustratedMessage.mjs";
 import ImageCropper_module_default from "./ImageCropper.module.mjs";
 import { Slider } from "../Slider/Slider.mjs";
 import { getCroppedImageFile } from "./lib/getCroppedImageFile.mjs";
 import __locale_default from "../../../../../_virtual/_19.locale.mjs";
 import { useImageSrc } from "../../lib/hooks/useImageSrc.mjs";
 import clsx from "clsx";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Cropper from "react-easy-crop";
 import { useDebouncedCallback } from "use-debounce";
@@ -17,31 +20,60 @@ import { useDebouncedCallback } from "use-debounce";
 * @flowStatus new
 */
 var ImageCropper = (props) => {
-	const { image, className, onCropComplete, width = 300, height = 300, aspectRatio, ...rest } = props;
+	const { image, className, onCropComplete, onError, errorView, width = 300, height = 300, aspectRatio, ...rest } = props;
 	const imageSrc = useImageSrc(image);
 	const [mediaLoaded, setMediaLoaded] = useState(false);
+	const [error, setError] = useState();
 	const [crop, setCrop] = useState({
 		x: 0,
 		y: 0
 	});
 	const [zoom, setZoom] = useState(1);
+	/** Reports every image at most once, no matter how many crops fail on it. */
+	const errorReported = useRef(false);
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "ImageCropper");
 	const rootClassName = clsx(ImageCropper_module_default.imageCropper, className);
+	const reportError = (reason, message) => {
+		if (errorReported.current) return;
+		errorReported.current = true;
+		const imageCropperError = {
+			reason,
+			message
+		};
+		setError(imageCropperError);
+		onError?.(imageCropperError);
+	};
 	const debouncedCropComplete = useDebouncedCallback(async (croppedAreaPixels) => {
 		if (!croppedAreaPixels) return;
-		const croppedImageFile = await getCroppedImageFile(imageSrc, image ?? "", croppedAreaPixels);
+		let croppedImageFile;
+		try {
+			croppedImageFile = await getCroppedImageFile(imageSrc, image ?? "", croppedAreaPixels);
+		} catch (cause) {
+			reportError("crop", cause instanceof Error ? cause.message : String(cause));
+			return;
+		}
 		onCropComplete?.(croppedImageFile);
 	}, 500, { leading: true });
 	useEffect(() => {
 		setMediaLoaded(false);
+		setError(void 0);
+		errorReported.current = false;
 	}, [imageSrc]);
+	const defaultErrorView = /* @__PURE__ */ jsxs(IllustratedMessage, {
+		color: "danger",
+		children: [/* @__PURE__ */ jsx(IconDanger, {}), /* @__PURE__ */ jsx(Text, { children: stringFormatter.format("error.text") })]
+	});
+	const errorElement = error ? errorView ?? defaultErrorView : void 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: rootClassName,
 		style: { width },
 		children: [/* @__PURE__ */ jsx("div", {
 			className: ImageCropper_module_default.cropperContainer,
 			style: { height },
-			children: /* @__PURE__ */ jsx(Cropper, {
+			children: errorElement ? /* @__PURE__ */ jsx("div", {
+				className: ImageCropper_module_default.errorViewContainer,
+				children: errorElement
+			}) : /* @__PURE__ */ jsx(Cropper, {
 				style: { containerStyle: { borderRadius: "calc(var(--image-cropper--corner-radius) - 1px)" } },
 				aspect: aspectRatio,
 				crop,
@@ -49,13 +81,14 @@ var ImageCropper = (props) => {
 				onCropChange: setCrop,
 				zoom,
 				onZoomChange: setZoom,
+				mediaProps: { onError: () => reportError("load", `Failed to load image "${imageSrc}"`) },
 				onMediaLoaded: () => setMediaLoaded(true),
 				onCropComplete: (_, croppedAreaPixels) => {
 					if (mediaLoaded) debouncedCropComplete(croppedAreaPixels);
 				},
 				...rest
 			})
-		}), /* @__PURE__ */ jsx(Slider, {
+		}), !errorElement && /* @__PURE__ */ jsx(Slider, {
 			minValue: 1,
 			maxValue: 3,
 			step: .01,

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

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

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

@@ -3,11 +3,13 @@
 //#region src/components/ImageCropper/ImageCropper.module.scss
 var imageCropper = "flow--image-cropper";
 var cropperContainer = "flow--image-cropper--cropper-container";
+var errorViewContainer = "flow--image-cropper--error-view-container";
 var ImageCropper_module_default = {
 	imageCropper,
-	cropperContainer
+	cropperContainer,
+	errorViewContainer
 };
 //#endregion
-export { cropperContainer, ImageCropper_module_default as default, imageCropper };
+export { cropperContainer, ImageCropper_module_default as default, errorViewContainer, imageCropper };
 //# 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}\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":[".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":""}

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

@@ -6,7 +6,7 @@ function getCroppedImageFile(imageSrc, sourceImage, pixelCrop) {
 		const image = new Image();
 		image.crossOrigin = "anonymous";
 		image.src = imageSrc;
-		image.onload = () => {
+		const cropOntoCanvas = () => {
 			const canvas = document.createElement("canvas");
 			const ctx = canvas.getContext("2d");
 			canvas.width = pixelCrop.width;
@@ -21,10 +21,20 @@ function getCroppedImageFile(imageSrc, sourceImage, pixelCrop) {
 			const sourceImageType = isSourceImageJsFile ? sourceImage.type : "image/png";
 			const quality = sourceImageType === "image/jpeg" ? .86 : sourceImageType === "image/webp" ? .82 : void 0;
 			canvas.toBlob((blob) => {
-				if (!blob) return;
+				if (!blob) {
+					reject(/* @__PURE__ */ new Error("Failed to read the cropped image from canvas"));
+					return;
+				}
 				resolve(new File([blob], sourceImageName, { type: sourceImageType }));
 			}, sourceImageType, quality);
 		};
+		image.onload = () => {
+			try {
+				cropOntoCanvas();
+			} catch (cause) {
+				reject(cause instanceof Error ? cause : new Error(String(cause)));
+			}
+		};
 		image.onerror = () => {
 			reject(/* @__PURE__ */ new Error("Failed to load image"));
 		};

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

	@@ -1 +1 @@
1	- {"version":3,"file":"getCroppedImageFile.mjs","names":[],"sources":["../../../../../../../../src/components/ImageCropper/lib/getCroppedImageFile.ts"],"sourcesContent":["import type { Area } from \"react-easy-crop\";\n\nexport function getCroppedImageFile(\n imageSrc: string,\n sourceImage: File \| string,\n pixelCrop: Area,\n): Promise<File> {\n return new Promise((resolve, reject) => {\n const image = new Image();\n image.crossOrigin = \"anonymous\";\n image.src = imageSrc;\n\n ~~image.onload~~ = () => {\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n\n canvas.width = pixelCrop.width;\n canvas.height = pixelCrop.height;\n\n if (!ctx) {\n reject(new Error(\"Failed to get canvas context\"));\n return;\n }\n\n ctx.drawImage(\n image,\n pixelCrop.x,\n pixelCrop.y,\n pixelCrop.width,\n pixelCrop.height,\n 0,\n 0,\n pixelCrop.width,\n pixelCrop.height,\n );\n\n const isSourceImageJsFile = sourceImage instanceof File;\n const sourceImageName = isSourceImageJsFile\n ? sourceImage.name\n : \"cropped-image.png\";\n const sourceImageType = isSourceImageJsFile\n ? sourceImage.type\n : \"image/png\";\n\n const quality =\n sourceImageType === \"image/jpeg\"\n ? 0.86\n : sourceImageType === \"image/webp\"\n ? 0.82\n : undefined;\n\n canvas.toBlob(\n (blob) => {\n if (!blob) {\n return;\n }\n\n resolve(\n new File([blob], sourceImageName, {\n type: sourceImageType,\n }),\n );\n },\n sourceImageType,\n quality,\n );\n };\n\n image.onerror = () => {\n reject(new Error(\"Failed to load image\"));\n };\n });\n}\n"],"mappings":";;;AAEA,SAAgB,oBACd,UACA,aACA,WACe;CACf,OAAO,IAAI,SAAS,SAAS,WAAW;EACtC,MAAM,QAAQ,IAAI,MAAM;EACxB,MAAM,cAAc;EACpB,MAAM,MAAM;EAEZ,MAAM,~~eAAe~~;~~GACnB~~,MAAM,SAAS,SAAS,cAAc,QAAQ;GAC9C,MAAM,MAAM,OAAO,WAAW,IAAI;GAElC,OAAO,QAAQ,UAAU;GACzB,OAAO,SAAS,UAAU;GAE1B,IAAI,CAAC,KAAK;IACR,uBAAO,IAAI,MAAM,8BAA8B,CAAC;IAChD;GACF;GAEA,IAAI,UACF,OACA,UAAU,GACV,UAAU,GACV,UAAU,OACV,UAAU,QACV,GACA,GACA,UAAU,OACV,UAAU,MACZ;GAEA,MAAM,sBAAsB,uBAAuB;GACnD,MAAM,kBAAkB,sBACpB,YAAY,OACZ;GACJ,MAAM,kBAAkB,sBACpB,YAAY,OACZ;GAEJ,MAAM,UACJ,oBAAoB,eAChB,MACA,oBAAoB,eAClB,MACA,KAAA;GAER,OAAO,QACJ,SAAS;IACR,IAAI,CAAC,~~MACH~~;~~IAGF~~,QACE,IAAI,KAAK,CAAC,IAAI,GAAG,iBAAiB,EAChC,MAAM,gBACR,CAAC,CACH;GACF,GACA,iBACA,OACF;EACF;EAEA,MAAM,gBAAgB;GACpB,uBAAO,IAAI,MAAM,sBAAsB,CAAC;EAC1C;CACF,CAAC;AACH"}
1	+ {"version":3,"file":"getCroppedImageFile.mjs","names":[],"sources":["../../../../../../../../src/components/ImageCropper/lib/getCroppedImageFile.ts"],"sourcesContent":["import type { Area } from \"react-easy-crop\";\n\nexport function getCroppedImageFile(\n imageSrc: string,\n sourceImage: File \| string,\n pixelCrop: Area,\n): Promise<File> {\n return new Promise((resolve, reject) => {\n const image = new Image();\n image.crossOrigin = \"anonymous\";\n image.src = imageSrc;\n\n const cropOntoCanvas = (): void => {\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n\n canvas.width = pixelCrop.width;\n canvas.height = pixelCrop.height;\n\n if (!ctx) {\n reject(new Error(\"Failed to get canvas context\"));\n return;\n }\n\n ctx.drawImage(\n image,\n pixelCrop.x,\n pixelCrop.y,\n pixelCrop.width,\n pixelCrop.height,\n 0,\n 0,\n pixelCrop.width,\n pixelCrop.height,\n );\n\n const isSourceImageJsFile = sourceImage instanceof File;\n const sourceImageName = isSourceImageJsFile\n ? sourceImage.name\n : \"cropped-image.png\";\n const sourceImageType = isSourceImageJsFile\n ? sourceImage.type\n : \"image/png\";\n\n const quality =\n sourceImageType === \"image/jpeg\"\n ? 0.86\n : sourceImageType === \"image/webp\"\n ? 0.82\n : undefined;\n\n canvas.toBlob(\n (blob) => {\n if (!blob) {\n reject(new Error(\"Failed to read the cropped image from canvas\"));\n return;\n }\n\n resolve(\n new File([blob], sourceImageName, {\n type: sourceImageType,\n }),\n );\n },\n sourceImageType,\n quality,\n );\n };\n\n image.onload = () => {\n try {\n cropOntoCanvas();\n } catch (cause) {\n // A tainted canvas makes `drawImage`/`toBlob` throw a SecurityError.\n reject(cause instanceof Error ? cause : new Error(String(cause)));\n }\n };\n\n image.onerror = () => {\n reject(new Error(\"Failed to load image\"));\n };\n });\n}\n"],"mappings":";;;AAEA,SAAgB,oBACd,UACA,aACA,WACe;CACf,OAAO,IAAI,SAAS,SAAS,WAAW;EACtC,MAAM,QAAQ,IAAI,MAAM;EACxB,MAAM,cAAc;EACpB,MAAM,MAAM;EAEZ,MAAM,uBAA6B;GACjC,MAAM,SAAS,SAAS,cAAc,QAAQ;GAC9C,MAAM,MAAM,OAAO,WAAW,IAAI;GAElC,OAAO,QAAQ,UAAU;GACzB,OAAO,SAAS,UAAU;GAE1B,IAAI,CAAC,KAAK;IACR,uBAAO,IAAI,MAAM,8BAA8B,CAAC;IAChD;GACF;GAEA,IAAI,UACF,OACA,UAAU,GACV,UAAU,GACV,UAAU,OACV,UAAU,QACV,GACA,GACA,UAAU,OACV,UAAU,MACZ;GAEA,MAAM,sBAAsB,uBAAuB;GACnD,MAAM,kBAAkB,sBACpB,YAAY,OACZ;GACJ,MAAM,kBAAkB,sBACpB,YAAY,OACZ;GAEJ,MAAM,UACJ,oBAAoB,eAChB,MACA,oBAAoB,eAClB,MACA,KAAA;GAER,OAAO,QACJ,SAAS;IACR,IAAI,CAAC,MAAM;KACT,uBAAO,IAAI,MAAM,8CAA8C,CAAC;KAChE;IACF;IAEA,QACE,IAAI,KAAK,CAAC,IAAI,GAAG,iBAAiB,EAChC,MAAM,gBACR,CAAC,CACH;GACF,GACA,iBACA,OACF;EACF;EAEA,MAAM,eAAe;GACnB,IAAI;IACF,eAAe;GACjB,SAAS,OAAO;IAEd,OAAO,iBAAiB,QAAQ,QAAQ,IAAI,MAAM,OAAO,KAAK,CAAC,CAAC;GAClE;EACF;EAEA,MAAM,gBAAgB;GACpB,uBAAO,IAAI,MAAM,sBAAsB,CAAC;EAC1C;CACF,CAAC;AACH"}

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

@@ -2,10 +2,11 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import overlayTriggersTunneledTo from "../../lib/propsContext/overlayTriggerTunnel.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import Label_module_default from "./Label.module.mjs";
-import __locale_default from "../../../../../_virtual/_7.locale.mjs";
+import __locale_default from "../../../../../_virtual/_8.locale.mjs";
 import clsx from "clsx";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -20,30 +21,27 @@ var Label = flowComponent("Label", (props) => {
 		className: Label_module_default.optional,
 		children: stringFormatter.format("optional")
 	});
-	return /* @__PURE__ */ jsx(PropsContextProvider, {
-		props: {
-			ContextualHelpTrigger: {
-				tunnel: {
-					id: "contextualHelp",
-					component: "Label"
-				},
-				Button: { tunnel: null }
-			},
-			Button: {
-				tunnel: {
-					id: "right",
-					component: "Label"
-				},
-				size: "s"
-			},
-			Action: {
-				tunnel: {
-					id: "right",
-					component: "Label"
-				},
-				Button: { tunnel: null }
-			}
+	const rightTunnel = {
+		id: "right",
+		component: "Label"
+	};
+	const propsContext = {
+		...overlayTriggersTunneledTo(rightTunnel),
+		ContextualHelpTrigger: { tunnel: {
+			id: "contextualHelp",
+			component: "Label"
+		} },
+		Button: {
+			tunnel: rightTunnel,
+			size: "s"
 		},
+		Action: {
+			tunnel: rightTunnel,
+			Button: { tunnel: null }
+		}
+	};
+	return /* @__PURE__ */ jsx(PropsContextProvider, {
+		props: propsContext,
 		children: /* @__PURE__ */ jsxs(Aria.Label, {
 			...rest,
 			className: rootClassName,

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 { type PropsContext, PropsContextProvider } 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 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 ~~propsContext:~~ ~~PropsContext~~ = {\n ~~ContextualHelpTrigger: {\n tunnel: {\n~~ id: \"~~contextualHelp~~\",\n component: \"Label\",\n },\n ~~Button~~: {\n ~~tunnel: null~~,\n ~~},\n~~ ~~},\~~n ~~Button~~: {\n tunnel: {\n id: \"~~right~~\",\n component: \"Label\",\n },\n ~~size: \"s\",\n~~ },\n ~~Action~~: {\n tunnel: {\n id: \"~~right~~\",\n ~~component~~: \~~"Label\",\~~n },\n Button: {\n tunnel: null,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <Aria.Label {...rest} className={rootClassName} ref={ref}>\n {children}\n {optional && optionalMarker}\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 </PropsContextProvider>\n );\n});\n\nexport default Label;\n"],"mappings":"~~;;;;;;;;;;;;;;AAyBA~~,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,UACA,WACA,UACA,YACA,KACA,WAAW,OACX,GAAG,SACD;CAEJ,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;~~CA+BR~~,~~OACE~~,~~oBAAC,sBAAD~~;~~EAAsB~~,~~OAAO;GA5B7B,uBAAuB;IACrB,QAAQ;KACN,~~IAAI;~~KACJ~~,WAAW;~~IACb~~;~~IACA~~,~~QAAQ~~,~~EACN~~,~~QAAQ~~,~~KACV;GACF;GACA~~,~~QAAQ~~;~~IACN~~,QAAQ;~~KACN~~,IAAI;~~KACJ~~,WAAW;~~IACb;IACA~~,~~MAAM~~;~~GACR;GACA~~,QAAQ;~~IACN~~,QAAQ;~~KACN~~,~~IAAI~~;~~KACJ~~,~~WAAW~~;~~IACb~~;~~IACA~~,QAAQ,EACN,QAAQ,KACV;~~GACF~~;~~EAI6B~~;EAC3B,UAAA,qBAAC,KAAK,OAAN;GAAY,GAAI;GAAM,WAAW;GAAoB;GAArD,UAAA;IACG;IACA,YAAY;IACb,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;KACjD,WAAA,aAAa;MACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO;KAIX;IACqB,CAAA;IACvB,oBAAC,uBAAD;KAAuB,IAAG;KAAQ,WAAU;KACxC,WAAA,aAAa;MACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO,oBAAC,OAAD;OAAK,WAAW,qBAAO;OAAQ;MAAc,CAAA;KAIxD;IACqB,CAAA;GACb;;CACQ,CAAA;AAE1B,CAAC"}
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 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 <Aria.Label {...rest} className={rootClassName} ref={ref}>\n {children}\n {optional && optionalMarker}\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 </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,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;EAC3B,UAAA,qBAAC,KAAK,OAAN;GAAY,GAAI;GAAM,WAAW;GAAoB;GAArD,UAAA;IACG;IACA,YAAY;IACb,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;KACjD,WAAA,aAAa;MACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO;KAIX;IACqB,CAAA;IACvB,oBAAC,uBAAD;KAAuB,IAAG;KAAQ,WAAU;KACxC,WAAA,aAAa;MACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO,oBAAC,OAAD;OAAK,WAAW,qBAAO;OAAQ;MAAc,CAAA;KAIxD;IACqB,CAAA;GACb;;CACQ,CAAA;AAE1B,CAAC"}

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

@@ -5,8 +5,8 @@ import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { IconClose } from "../Icon/components/icons/IconClose.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import { useOverlayController } from "../../lib/controller/overlay/useOverlayController.mjs";
-import DivView from "../../views/DivView.mjs";
 import ButtonView from "../../views/ButtonView.mjs";
+import DivView from "../../views/DivView.mjs";
 import __locale_default from "../../../../../_virtual/_20.locale.mjs";
 import { Overlay } from "../Overlay/Overlay.mjs";
 import LightBox_module_default from "./LightBox.module.mjs";

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

@@ -4,7 +4,6 @@ import { PropsContextProvider } from "../../lib/propsContext/components/PropsCon
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
 import { isAlphaColor } from "../../lib/types/props.mjs";
-import { Text } from "../Text/Text.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import Link_module_default from "./Link.module.mjs";
 import { linkContext } from "./context.mjs";
@@ -51,7 +50,7 @@ var Link = flowComponent("Link", (props) => {
 			size: props.size,
 			color: props.color === "default" ? void 0 : props.color,
 			isDisabled: props.isDisabled,
-			children: dynamic((buttonProps) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Text, { children: buttonProps.children }), /* @__PURE__ */ jsx(LinkIcon, {
+			children: dynamic((buttonProps) => /* @__PURE__ */ jsxs(Fragment$1, { children: [buttonProps.children, /* @__PURE__ */ jsx(LinkIcon, {
 				download,
 				target,
 				unstyled

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Link.mjs","names":[],"sources":["../../../../../../../src/components/Link/Link.tsx"],"sourcesContent":["import type {\n ComponentProps,\n ComponentType,\n CSSProperties,\n MouseEvent,\n PropsWithChildren,\n} from \"react\";\nimport { useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { dynamic, type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./Link.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport {\n type AlphaColor,\n isAlphaColor,\n type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { linkContext } from \"@/components/Link/context\";\nimport { ~~Text } from \"@/components/Text\";\nimport {~~ LinkIcon } from \"@/components/Link/components/LinkIcon\";\nimport { handleLinkClick, useRouter } from \"@react-aria/utils\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface LinkProps\n extends\n PropsWithChildren<Omit<Aria.LinkProps, \"children\" \| \"slot\" \| \"className\">>,\n FlowComponentProps<HTMLAnchorElement>,\n PropsWithClassName {\n /** Whether the link should be styled for being displayed inside a text. /\n inline?: boolean;\n /* An alternative link component. /\n linkComponent?: ComponentType<Omit<ComponentProps<\"a\">, \"ref\">>;\n /* The color of the link. @default \"default\" /\n color?: \"default\" \| AlphaColor;\n /* Marks the link as the currently active one, e.g. in a navigation. /\n \"aria-current\"?: string;\n /* The name of the slot the link is placed in. /\n slot?: string;\n /* The whiteSpace css value of the element. /\n whiteSpace?: CSSProperties[\"whiteSpace\"];\n /* The size of the element. @default \"m\" /\n size?: \"s\" \| \"m\";\n /* @internal /\n unstyled?: boolean;\n}\n\n/* @flr-generate all /\nexport const Link = flowComponent(\"Link\", (props) => {\n const {\n children,\n className,\n inline,\n linkComponent: linkComponentFromProps,\n color = \"default\",\n unstyled = false,\n \"aria-current\": ariaCurrent,\n ref,\n slot: ignoredSlotProp,\n style,\n whiteSpace,\n size = \"m\",\n onClickCapture: onClickCaptureFromProps,\n target,\n download,\n ...rest\n } = props;\n\n const { linkComponent: linkComponentFromContext } = useContext(linkContext);\n const Link = linkComponentFromProps\n ? (linkComponentFromProps as typeof Aria.Link)\n : props.href && linkComponentFromContext\n ? (linkComponentFromContext as typeof Aria.Link)\n : Aria.Link;\n\n const router = useRouter();\n\n /\n An interactive child (e.g. a Button) stops click propagation via React\n * Aria's `usePress`, so the anchor's own `onClick` never runs and navigation\n * falls back to a full page load. Handling it in the capture phase (top-down,\n * before the child) keeps navigation client-side. Only needed for React\n * Aria's `<a>`; custom link components handle navigation themselves.\n */\n const handleClickCapture =\n Link === Aria.Link && props.href\n ? (event: MouseEvent<HTMLAnchorElement>) => {\n onClickCaptureFromProps?.(event);\n if (event.target !== event.currentTarget) {\n handleLinkClick(event, router, props.href, props.routerOptions);\n }\n }\n : onClickCaptureFromProps;\n\n const rootClassName = unstyled\n ? className\n : clsx(\n styles.link,\n inline && styles.inline,\n isAlphaColor(color) && styles[color],\n size === \"s\" && styles[\"size-s\"],\n className,\n );\n\n const propsContext: PropsContext = {\n Icon: {\n tunnel: {\n component: \"Link\",\n id: \"icon\",\n },\n className: styles.icon,\n size: \"s\",\n },\n AlertText: {\n className: styles.alertText,\n },\n AccentBox: { className: styles.accentBox },\n LayoutCard: { className: styles.layoutCard },\n Button: {\n elementType: \"span\",\n className: styles.button,\n size: props.size,\n color: props.color === \"default\" ? undefined : props.color,\n isDisabled: props.isDisabled,\n children: dynamic((buttonProps) => (\n <>\n ~~<Text>~~{buttonProps.children}~~</Text>\~~n <LinkIcon download={download} target={target} unstyled={unstyled} />\n </>\n )),\n },\n };\n\n const unsupportedTypingsLinkProps = ariaCurrent\n ? ({\n \"aria-current\": true,\n } as Record<string, unknown>)\n : {};\n\n return (\n <Link\n {...unsupportedTypingsLinkProps}\n {...rest}\n target={target}\n download={download}\n onClickCapture={handleClickCapture}\n className={rootClassName}\n ref={ref}\n style={{ ...style, whiteSpace }}\n >\n <PropsContextProvider props={propsContext}>\n {children}\n <LinkIcon\n withZeroWidthJoiner\n unstyled={unstyled}\n target={target}\n download={download}\n >\n <UiComponentTunnelExit id={\"icon\"} component={\"Link\"} />\n </LinkIcon>\n </PropsContextProvider>\n </Link>\n );\n});\n\nexport default Link;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;AAkDA~~,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,QACA,eAAe,wBACf,QAAQ,WACR,WAAW,OACX,gBAAgB,aAChB,KACA,MAAM,iBACN,OACA,YACA,OAAO,KACP,gBAAgB,yBAChB,QACA,UACA,GAAG,SACD;CAEJ,MAAM,EAAE,eAAe,6BAA6B,WAAW,WAAW;CAC1E,MAAM,OAAO,yBACR,yBACD,MAAM,QAAQ,2BACX,2BACD,KAAK;CAEX,MAAM,SAAS,UAAU;;;;;;;;CASzB,MAAM,qBACJ,SAAS,KAAK,QAAQ,MAAM,QACvB,UAAyC;EACxC,0BAA0B,KAAK;EAC/B,IAAI,MAAM,WAAW,MAAM,eACzB,gBAAgB,OAAO,QAAQ,MAAM,MAAM,MAAM,aAAa;CAElE,IACA;CAEN,MAAM,gBAAgB,WAClB,YACA,KACE,oBAAO,MACP,UAAU,oBAAO,QACjB,aAAa,KAAK,KAAK,oBAAO,QAC9B,SAAS,OAAO,oBAAO,WACvB,SACF;CAEJ,MAAM,eAA6B;EACjC,MAAM;GACJ,QAAQ;IACN,WAAW;IACX,IAAI;GACN;GACA,WAAW,oBAAO;GAClB,MAAM;EACR;EACA,WAAW,EACT,WAAW,oBAAO,UACpB;EACA,WAAW,EAAE,WAAW,oBAAO,UAAU;EACzC,YAAY,EAAE,WAAW,oBAAO,WAAW;EAC3C,QAAQ;GACN,aAAa;GACb,WAAW,oBAAO;GAClB,MAAM,MAAM;GACZ,OAAO,MAAM,UAAU,YAAY,KAAA,IAAY,MAAM;GACrD,YAAY,MAAM;GAClB,UAAU,SAAS,gBACjB,qBAAA,YAAA,EAAA,UAAA,~~CACE~~,~~oBAAC,MAAD,EAAA,UAAO,~~YAAY,~~SAAe~~,~~CAAA,GAClC,~~oBAAC,UAAD;IAAoB;IAAkB;IAAkB;GAAW,CAAA,CACnE,EAAA,CAAA,CACH;EACH;CACF;CAQA,OACE,oBAAC,MAAD;EACE,GARgC,cAC/B,EACC,gBAAgB,KAClB,IACA,CAAC;EAKD,GAAI;EACI;EACE;EACV,gBAAgB;EAChB,WAAW;EACN;EACL,OAAO;GAAE,GAAG;GAAO;EAAW;EAE9B,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,UACD,oBAAC,UAAD;IACE,qBAAA;IACU;IACF;IACE;IAEV,UAAA,oBAAC,uBAAD;KAAuB,IAAI;KAAQ,WAAW;IAAS,CAAA;GAC/C,CAAA,CACU;;CAClB,CAAA;AAEV,CAAC"}
1	+ {"version":3,"file":"Link.mjs","names":[],"sources":["../../../../../../../src/components/Link/Link.tsx"],"sourcesContent":["import type {\n ComponentProps,\n ComponentType,\n CSSProperties,\n MouseEvent,\n PropsWithChildren,\n} from \"react\";\nimport { useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { dynamic, type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./Link.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport {\n type AlphaColor,\n isAlphaColor,\n type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { linkContext } from \"@/components/Link/context\";\nimport { LinkIcon } from \"@/components/Link/components/LinkIcon\";\nimport { handleLinkClick, useRouter } from \"@react-aria/utils\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface LinkProps\n extends\n PropsWithChildren<Omit<Aria.LinkProps, \"children\" \| \"slot\" \| \"className\">>,\n FlowComponentProps<HTMLAnchorElement>,\n PropsWithClassName {\n /** Whether the link should be styled for being displayed inside a text. /\n inline?: boolean;\n /* An alternative link component. /\n linkComponent?: ComponentType<Omit<ComponentProps<\"a\">, \"ref\">>;\n /* The color of the link. @default \"default\" /\n color?: \"default\" \| AlphaColor;\n /* Marks the link as the currently active one, e.g. in a navigation. /\n \"aria-current\"?: string;\n /* The name of the slot the link is placed in. /\n slot?: string;\n /* The whiteSpace css value of the element. /\n whiteSpace?: CSSProperties[\"whiteSpace\"];\n /* The size of the element. @default \"m\" /\n size?: \"s\" \| \"m\";\n /* @internal /\n unstyled?: boolean;\n}\n\n/* @flr-generate all /\nexport const Link = flowComponent(\"Link\", (props) => {\n const {\n children,\n className,\n inline,\n linkComponent: linkComponentFromProps,\n color = \"default\",\n unstyled = false,\n \"aria-current\": ariaCurrent,\n ref,\n slot: ignoredSlotProp,\n style,\n whiteSpace,\n size = \"m\",\n onClickCapture: onClickCaptureFromProps,\n target,\n download,\n ...rest\n } = props;\n\n const { linkComponent: linkComponentFromContext } = useContext(linkContext);\n const Link = linkComponentFromProps\n ? (linkComponentFromProps as typeof Aria.Link)\n : props.href && linkComponentFromContext\n ? (linkComponentFromContext as typeof Aria.Link)\n : Aria.Link;\n\n const router = useRouter();\n\n /\n An interactive child (e.g. a Button) stops click propagation via React\n * Aria's `usePress`, so the anchor's own `onClick` never runs and navigation\n * falls back to a full page load. Handling it in the capture phase (top-down,\n * before the child) keeps navigation client-side. Only needed for React\n * Aria's `<a>`; custom link components handle navigation themselves.\n */\n const handleClickCapture =\n Link === Aria.Link && props.href\n ? (event: MouseEvent<HTMLAnchorElement>) => {\n onClickCaptureFromProps?.(event);\n if (event.target !== event.currentTarget) {\n handleLinkClick(event, router, props.href, props.routerOptions);\n }\n }\n : onClickCaptureFromProps;\n\n const rootClassName = unstyled\n ? className\n : clsx(\n styles.link,\n inline && styles.inline,\n isAlphaColor(color) && styles[color],\n size === \"s\" && styles[\"size-s\"],\n className,\n );\n\n const propsContext: PropsContext = {\n Icon: {\n tunnel: {\n component: \"Link\",\n id: \"icon\",\n },\n className: styles.icon,\n size: \"s\",\n },\n AlertText: {\n className: styles.alertText,\n },\n AccentBox: { className: styles.accentBox },\n LayoutCard: { className: styles.layoutCard },\n Button: {\n elementType: \"span\",\n className: styles.button,\n size: props.size,\n color: props.color === \"default\" ? undefined : props.color,\n isDisabled: props.isDisabled,\n children: dynamic((buttonProps) => (\n <>\n {buttonProps.children}\n <LinkIcon download={download} target={target} unstyled={unstyled} />\n </>\n )),\n },\n };\n\n const unsupportedTypingsLinkProps = ariaCurrent\n ? ({\n \"aria-current\": true,\n } as Record<string, unknown>)\n : {};\n\n return (\n <Link\n {...unsupportedTypingsLinkProps}\n {...rest}\n target={target}\n download={download}\n onClickCapture={handleClickCapture}\n className={rootClassName}\n ref={ref}\n style={{ ...style, whiteSpace }}\n >\n <PropsContextProvider props={propsContext}>\n {children}\n <LinkIcon\n withZeroWidthJoiner\n unstyled={unstyled}\n target={target}\n download={download}\n >\n <UiComponentTunnelExit id={\"icon\"} component={\"Link\"} />\n </LinkIcon>\n </PropsContextProvider>\n </Link>\n );\n});\n\nexport default Link;\n"],"mappings":";;;;;;;;;;;;;;;;;AAiDA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,QACA,eAAe,wBACf,QAAQ,WACR,WAAW,OACX,gBAAgB,aAChB,KACA,MAAM,iBACN,OACA,YACA,OAAO,KACP,gBAAgB,yBAChB,QACA,UACA,GAAG,SACD;CAEJ,MAAM,EAAE,eAAe,6BAA6B,WAAW,WAAW;CAC1E,MAAM,OAAO,yBACR,yBACD,MAAM,QAAQ,2BACX,2BACD,KAAK;CAEX,MAAM,SAAS,UAAU;;;;;;;;CASzB,MAAM,qBACJ,SAAS,KAAK,QAAQ,MAAM,QACvB,UAAyC;EACxC,0BAA0B,KAAK;EAC/B,IAAI,MAAM,WAAW,MAAM,eACzB,gBAAgB,OAAO,QAAQ,MAAM,MAAM,MAAM,aAAa;CAElE,IACA;CAEN,MAAM,gBAAgB,WAClB,YACA,KACE,oBAAO,MACP,UAAU,oBAAO,QACjB,aAAa,KAAK,KAAK,oBAAO,QAC9B,SAAS,OAAO,oBAAO,WACvB,SACF;CAEJ,MAAM,eAA6B;EACjC,MAAM;GACJ,QAAQ;IACN,WAAW;IACX,IAAI;GACN;GACA,WAAW,oBAAO;GAClB,MAAM;EACR;EACA,WAAW,EACT,WAAW,oBAAO,UACpB;EACA,WAAW,EAAE,WAAW,oBAAO,UAAU;EACzC,YAAY,EAAE,WAAW,oBAAO,WAAW;EAC3C,QAAQ;GACN,aAAa;GACb,WAAW,oBAAO;GAClB,MAAM,MAAM;GACZ,OAAO,MAAM,UAAU,YAAY,KAAA,IAAY,MAAM;GACrD,YAAY,MAAM;GAClB,UAAU,SAAS,gBACjB,qBAAA,YAAA,EAAA,UAAA,CACG,YAAY,UACb,oBAAC,UAAD;IAAoB;IAAkB;IAAkB;GAAW,CAAA,CACnE,EAAA,CAAA,CACH;EACH;CACF;CAQA,OACE,oBAAC,MAAD;EACE,GARgC,cAC/B,EACC,gBAAgB,KAClB,IACA,CAAC;EAKD,GAAI;EACI;EACE;EACV,gBAAgB;EAChB,WAAW;EACN;EACL,OAAO;GAAE,GAAG;GAAO;EAAW;EAE9B,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,UACD,oBAAC,UAAD;IACE,qBAAA;IACU;IACF;IACE;IAEV,UAAA,oBAAC,uBAAD;KAAuB,IAAI;KAAQ,WAAW;IAAS,CAAA;GAC/C,CAAA,CACU;;CAClB,CAAA;AAEV,CAAC"}

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

@@ -4,8 +4,8 @@
 var link = "flow--link";
 var inline = "flow--link--inline";
 var icon = "flow--link--icon";
-var button = "flow--link--button";
 var linkIcon = "flow--link--link-icon";
+var button = "flow--link--button";
 var light = "flow--link--light";
 var dark = "flow--link--dark";
 var alertText = "flow--link--alert-text";
@@ -15,9 +15,9 @@ var Link_module_default = {
 	link,
 	inline,
 	icon,
+	linkIcon,
 	"size-s": "flow--link--size-s",
 	button,
-	linkIcon,
 	light,
 	dark,
 	"dark-static": "flow--link--dark-static",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Link.module.mjs","names":[],"sources":["../../../../../../../src/components/Link/Link.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.link {\n display: inline-block;\n font-weight: var(--link--font-weight);\n transition-property: color;\n transition-duration: var(--transition--duration--default);\n color: var(--link--color--default);\n width: fit-content;\n\n &:hover {\n color: var(--link--color--hover);\n }\n\n &[data-pressed] {\n color: var(--link--color--pressed);\n }\n\n @include focus.focus;\n\n &:not([aria-disabled]) {\n cursor: pointer;\n }\n\n &.inline {\n font-weight: normal;\n font-size: var(--font-size-text--m);\n text-decoration: underline;\n }\n\n /* Elements /\n\n .icon {\n margin-inline-start: var(--link--spacing);\n vertical-align: text-bottom;\n height: var(--link--icon-height);\n }\n\n &[aria-disabled] {\n color: var(--link--color--disabled);\n }\n\n / Size s /\n\n &.size-s {\n font-size: var(--font-size-text--s);\n\n .icon {\n height: var(--link--icon-height-s);\n }\n }\n\n &:has(.button) {\n > .linkIcon {\n display: none;\n }\n }\n\n / Alpha Colors /\n @mixin color($color) {\n &:where(.#{$color}) {\n color: var(--link--color-#{$color}--default);\n\n &:hover {\n color: var(--link--color-#{$color}--hover);\n }\n\n &[data-pressed] {\n color: var(--link--color-#{$color}--pressed);\n }\n\n &[aria-disabled] {\n color: var(--link--color-#{$color}--disabled);\n }\n }\n }\n\n @include color(light);\n @include color(dark);\n @include color(dark-static);\n @include color(light-static);\n\n / AlertText Colors /\n @mixin status($status) {\n &:has(.alertText[class=\"#{$status}\"]) {\n color: var(--alert-text--#{$status}-color);\n }\n }\n\n @include status(\"danger\");\n @include status(\"success\");\n @include status(\"warning\");\n @include status(\"info\");\n @include status(\"unavailable\");\n\n &:has(> .accentBox),\n &:has(> .layoutCard) {\n color: unset;\n font-weight: unset;\n display: block;\n min-width: 0;\n width: auto;\n\n .linkIcon {\n display: none;\n }\n }\n\n &:has(> .accentBox) {\n border-radius: var(--accent-box--corner-radius);\n }\n\n &:has(> .layoutCard) {\n border-radius: var(--layout-card--corner-radius);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Link.module.mjs","names":[],"sources":["../../../../../../../src/components/Link/Link.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.link {\n display: inline-block;\n font-weight: var(--link--font-weight);\n transition-property: color;\n transition-duration: var(--transition--duration--default);\n color: var(--link--color--default);\n width: fit-content;\n\n &:hover {\n color: var(--link--color--hover);\n }\n\n &[data-pressed] {\n color: var(--link--color--pressed);\n }\n\n @include focus.focus;\n\n &:not([aria-disabled]) {\n cursor: pointer;\n }\n\n &.inline {\n font-weight: normal;\n font-size: var(--font-size-text--m);\n text-decoration: underline;\n }\n\n /* Elements /\n\n .icon {\n margin-inline-start: var(--link--spacing);\n vertical-align: text-bottom;\n height: var(--link--icon-height);\n }\n\n .linkIcon {\n -webkit-user-select: none;\n user-select: none;\n }\n\n &[aria-disabled] {\n color: var(--link--color--disabled);\n }\n\n / Size s /\n\n &.size-s {\n font-size: var(--font-size-text--s);\n\n .icon {\n height: var(--link--icon-height-s);\n }\n }\n\n &:has(.button) {\n > .linkIcon {\n display: none;\n }\n }\n\n / Alpha Colors /\n @mixin color($color) {\n &:where(.#{$color}) {\n color: var(--link--color-#{$color}--default);\n\n &:hover {\n color: var(--link--color-#{$color}--hover);\n }\n\n &[data-pressed] {\n color: var(--link--color-#{$color}--pressed);\n }\n\n &[aria-disabled] {\n color: var(--link--color-#{$color}--disabled);\n }\n }\n }\n\n @include color(light);\n @include color(dark);\n @include color(dark-static);\n @include color(light-static);\n\n / AlertText Colors /\n @mixin status($status) {\n &:has(.alertText[class=\"#{$status}\"]) {\n color: var(--alert-text--#{$status}-color);\n }\n }\n\n @include status(\"danger\");\n @include status(\"success\");\n @include status(\"warning\");\n @include status(\"info\");\n @include status(\"unavailable\");\n\n &:has(> .accentBox),\n &:has(> .layoutCard) {\n color: unset;\n font-weight: unset;\n display: block;\n min-width: 0;\n width: auto;\n\n .linkIcon {\n display: none;\n }\n }\n\n &:has(> .accentBox) {\n border-radius: var(--accent-box--corner-radius);\n }\n\n &:has(> .layoutCard) {\n border-radius: var(--layout-card--corner-radius);\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/List/components/Footer/components/ShowNextBatchButton/ShowNextBatchButton.mjs CHANGED Viewed

@@ -1,8 +1,8 @@
 "use client"
 /* */
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../../../../../_virtual/_16.locale.mjs";
 import ButtonView from "../../../../../../views/ButtonView.mjs";
+import __locale_default from "../../../../../../../../../_virtual/_16.locale.mjs";
 import { useList } from "../../../../hooks/useList.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/List/components/Footer/components/ShowNextBatchButton/ShowNextBatchButton.tsx

package/dist/js/packages/components/src/components/List/components/Header/components/ActiveFilters/ActiveFilters.mjs CHANGED Viewed

@@ -4,9 +4,9 @@ import { IconClose } from "../../../../../Icon/components/icons/IconClose.mjs";
 import { IconSave } from "../../../../../Icon/components/icons/IconSave.mjs";
 import { IconUndo } from "../../../../../Icon/components/icons/IconUndo.mjs";
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
+import ButtonView from "../../../../../../views/ButtonView.mjs";
 import DivView from "../../../../../../views/DivView.mjs";
 import __locale_default from "../../../../../../../../../_virtual/_16.locale.mjs";
-import ButtonView from "../../../../../../views/ButtonView.mjs";
 import TextView from "../../../../../../views/TextView.mjs";
 import { useList } from "../../../../hooks/useList.mjs";
 import ActiveFilters_module_default from "./ActiveFilters.module.mjs";

package/dist/js/packages/components/src/components/List/components/Header/components/AllFiltersModal/AllFiltersModal.mjs CHANGED Viewed

@@ -3,9 +3,9 @@
 import { IconFilter } from "../../../../../Icon/components/icons/IconFilter.mjs";
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { useOverlayController } from "../../../../../../lib/controller/overlay/useOverlayController.mjs";
+import ButtonView from "../../../../../../views/ButtonView.mjs";
 import { SkeletonText } from "../../../../../SkeletonText/SkeletonText.mjs";
 import __locale_default from "../../../../../../../../../_virtual/_16.locale.mjs";
-import ButtonView from "../../../../../../views/ButtonView.mjs";
 import HeadingView from "../../../../../../views/HeadingView.mjs";
 import TextView from "../../../../../../views/TextView.mjs";
 import { useList } from "../../../../hooks/useList.mjs";

package/dist/js/packages/components/src/components/List/components/Header/components/AllFiltersModal/FilterAccordionDateRange.mjs CHANGED Viewed

@@ -1,9 +1,9 @@
 "use client"
 /* */
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
+import ButtonView from "../../../../../../views/ButtonView.mjs";
 import { Flex } from "../../../../../Flex/Flex.mjs";
 import __locale_default from "../../../../../../../../../_virtual/_16.locale.mjs";
-import ButtonView from "../../../../../../views/ButtonView.mjs";
 import RangeCalendarView from "../../../../../../views/RangeCalendarView.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/js/packages/components/src/components/List/components/Header/components/AllFiltersModal/FilterAccordionRadioGroup.mjs CHANGED Viewed

@@ -1,9 +1,9 @@
 "use client"
 /* */
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
+import ButtonView from "../../../../../../views/ButtonView.mjs";
 import { Flex } from "../../../../../Flex/Flex.mjs";
 import __locale_default from "../../../../../../../../../_virtual/_16.locale.mjs";
-import ButtonView from "../../../../../../views/ButtonView.mjs";
 import RadioGroupView from "../../../../../../views/RadioGroupView.mjs";
 import RadioView from "../../../../../../views/RadioView.mjs";
 import "react";

package/dist/js/packages/components/src/components/List/components/Header/components/FilterContextMenu/DateRangeFilterPopover.mjs CHANGED Viewed

@@ -4,9 +4,9 @@ import { IconFilter } from "../../../../../Icon/components/icons/IconFilter.mjs"
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { useOverlayController } from "../../../../../../lib/controller/overlay/useOverlayController.mjs";
 import { Popover } from "../../../../../Popover/Popover.mjs";
+import ButtonView from "../../../../../../views/ButtonView.mjs";
 import { PopoverTrigger } from "../../../../../Popover/components/PopoverTrigger/PopoverTrigger.mjs";
 import __locale_default from "../../../../../../../../../_virtual/_16.locale.mjs";
-import ButtonView from "../../../../../../views/ButtonView.mjs";
 import TextView from "../../../../../../views/TextView.mjs";
 import Header_module_default from "../../Header.module.mjs";
 import FilterContextMenus_module_default from "./FilterContextMenus.module.mjs";

package/dist/js/packages/components/src/components/List/components/Header/components/SortingContextMenu/SortingContextMenu.mjs CHANGED Viewed

@@ -4,8 +4,8 @@ import { IconAscending } from "../../../../../Icon/components/icons/IconAscendin
 import { IconDescending } from "../../../../../Icon/components/icons/IconDescending.mjs";
 import { IconSorting } from "../../../../../Icon/components/icons/IconSorting.mjs";
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../../../../../_virtual/_16.locale.mjs";
 import ButtonView from "../../../../../../views/ButtonView.mjs";
+import __locale_default from "../../../../../../../../../_virtual/_16.locale.mjs";
 import ContextMenuTriggerView from "../../../../../../views/ContextMenuTriggerView.mjs";
 import ContextMenuView from "../../../../../../views/ContextMenuView.mjs";
 import TextView from "../../../../../../views/TextView.mjs";

package/dist/js/packages/components/src/components/List/components/Header/components/ViewModeContextMenu/ViewModeContextMenu.mjs CHANGED Viewed

@@ -2,8 +2,8 @@
 /* */
 import { IconView } from "../../../../../Icon/components/icons/IconView.mjs";
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../../../../../_virtual/_16.locale.mjs";
 import ButtonView from "../../../../../../views/ButtonView.mjs";
+import __locale_default from "../../../../../../../../../_virtual/_16.locale.mjs";
 import ContextMenuTriggerView from "../../../../../../views/ContextMenuTriggerView.mjs";
 import ContextMenuView from "../../../../../../views/ContextMenuView.mjs";
 import TextView from "../../../../../../views/TextView.mjs";

package/dist/js/packages/components/src/components/List/components/Items/components/Item/Item.mjs CHANGED Viewed

@@ -36,7 +36,7 @@ var ItemImpl = (props) => {
 		})
 	});
 };
-var Item = memo(ItemImpl, (prev, next) => prev.id === next.id && prev.data === next.data && prev.triggerRef === next.triggerRef && prev.isTile === next.isTile);
+var Item = memo(ItemImpl, (prev, next) => prev.id === next.id && prev.data === next.data && prev.triggerRef === next.triggerRef && prev.isTile === next.isTile && prev.list.onAction === next.list.onAction && prev.list.accordion === next.list.accordion && !!prev.list.itemView?.rendersSameAs(next.list.itemView));
 Item.displayName = "Item";
 var ItemContainer = (props) => {
 	const list = useList();

package/dist/js/packages/components/src/components/List/components/Items/components/Item/Item.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Item.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.tsx"],"sourcesContent":["import { useGridItemProps } from \"@/components/List/components/Items/components/Item/hooks/useGridItemProps\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport type ListModel from \"@/components/List/model/List\";\nimport ItemsGridListItemView from \"@/views/ItemsGridListItemView\";\nimport { mergeRefs } from \"@react-aria/utils\";\nimport type { FC, PropsWithChildren, Ref } from \"react\";\nimport { memo, Suspense } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport styles from \"./Item.module.scss\";\nimport { ItemLoadingView } from \"./components/ItemLoadingView/ItemLoadingView\";\n\ninterface Props extends PropsWithChildren {\n id: Key;\n data: never;\n triggerRef?: Ref<HTMLDivElement>;\n list: ListModel<never>;\n isTile: boolean;\n}\n\nconst ItemImpl = (props: Props) => {\n const { id, data, triggerRef, list, isTile } = props;\n\n const itemView = list.itemView;\n\n const { gridItemProps, children } = useGridItemProps(props, list);\n\n if (!itemView) {\n return null;\n }\n\n const textValue = itemView.textValue ? itemView.textValue(data) : undefined;\n const href = itemView.href ? itemView.href(data) : undefined;\n const hasAction = !!gridItemProps.onAction \|\| !!href;\n\n const existingRef = \"ref\" in gridItemProps ? gridItemProps.ref : undefined;\n const gridItemPropsWithRef = triggerRef\n ? { ...gridItemProps, ref: mergeRefs(existingRef, triggerRef) }\n : gridItemProps;\n\n return (\n <ItemsGridListItemView\n id={id}\n textValue={textValue}\n href={href}\n target={itemView.target}\n hasAction={hasAction}\n isTile={isTile}\n {...gridItemPropsWithRef}\n >\n <Suspense fallback={<ItemLoadingView />}>{children}</Suspense>\n </ItemsGridListItemView>\n );\n};\n\nexport const Item = memo(\n ItemImpl,\n (prev, next) =>\n prev.id === next.id &&\n prev.data === next.data &&\n prev.triggerRef === next.triggerRef &&\n prev.isTile === next.isTile,\n);\nItem.displayName = \"Item\";\n\ninterface ItemContainerProps extends PropsWithChildren {\n id?: Key;\n data?: never;\n}\n\nexport const ItemContainer: FC<ItemContainerProps> = (props) => {\n const list = useList();\n return (\n <ItemsGridListItemView\n textValue=\"-\"\n className={styles.item}\n isTile={list.viewMode.isTiles}\n >\n {props.children}\n </ItemsGridListItemView>\n );\n};\n\nexport default Item;\n"],"mappings":";;;;;;;;;;;AAmBA,IAAM,YAAY,UAAiB;CACjC,MAAM,EAAE,IAAI,MAAM,YAAY,MAAM,WAAW;CAE/C,MAAM,WAAW,KAAK;CAEtB,MAAM,EAAE,eAAe,aAAa,iBAAiB,OAAO,IAAI;CAEhE,IAAI,CAAC,UACH,OAAO;CAGT,MAAM,YAAY,SAAS,YAAY,SAAS,UAAU,IAAI,IAAI,KAAA;CAClE,MAAM,OAAO,SAAS,OAAO,SAAS,KAAK,IAAI,IAAI,KAAA;CACnD,MAAM,YAAY,CAAC,CAAC,cAAc,YAAY,CAAC,CAAC;CAEhD,MAAM,cAAc,SAAS,gBAAgB,cAAc,MAAM,KAAA;CACjE,MAAM,uBAAuB,aACzB;EAAE,GAAG;EAAe,KAAK,UAAU,aAAa,UAAU;CAAE,IAC5D;CAEJ,OACE,oBAAC,uBAAD;EACM;EACO;EACL;EACN,QAAQ,SAAS;EACN;EACH;EACR,GAAI;EAEJ,UAAA,oBAAC,UAAD;GAAU,UAAU,oBAAC,iBAAD,CAAkB,CAAA;GAAI;EAAmB,CAAA;CACxC,CAAA;AAE3B;~~AAEA~~,IAAa,OAAO,KAClB,WACC,MAAM,SACL,KAAK,OAAO,KAAK,MACjB,KAAK,SAAS,KAAK,QACnB,KAAK,eAAe,KAAK,cACzB,KAAK,WAAW,KAAK,~~MACzB~~;AACA,KAAK,cAAc;AAOnB,IAAa,iBAAyC,UAAU;CAC9D,MAAM,OAAO,QAAQ;CACrB,OACE,oBAAC,uBAAD;EACE,WAAU;EACV,WAAW,oBAAO;EAClB,QAAQ,KAAK,SAAS;EAErB,UAAA,MAAM;CACc,CAAA;AAE3B"}
1	+ {"version":3,"file":"Item.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.tsx"],"sourcesContent":["import { useGridItemProps } from \"@/components/List/components/Items/components/Item/hooks/useGridItemProps\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport type ListModel from \"@/components/List/model/List\";\nimport ItemsGridListItemView from \"@/views/ItemsGridListItemView\";\nimport { mergeRefs } from \"@react-aria/utils\";\nimport type { FC, PropsWithChildren, Ref } from \"react\";\nimport { memo, Suspense } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport styles from \"./Item.module.scss\";\nimport { ItemLoadingView } from \"./components/ItemLoadingView/ItemLoadingView\";\n\ninterface Props extends PropsWithChildren {\n id: Key;\n data: never;\n triggerRef?: Ref<HTMLDivElement>;\n list: ListModel<never>;\n isTile: boolean;\n}\n\nconst ItemImpl = (props: Props) => {\n const { id, data, triggerRef, list, isTile } = props;\n\n const itemView = list.itemView;\n\n const { gridItemProps, children } = useGridItemProps(props, list);\n\n if (!itemView) {\n return null;\n }\n\n const textValue = itemView.textValue ? itemView.textValue(data) : undefined;\n const href = itemView.href ? itemView.href(data) : undefined;\n const hasAction = !!gridItemProps.onAction \|\| !!href;\n\n const existingRef = \"ref\" in gridItemProps ? gridItemProps.ref : undefined;\n const gridItemPropsWithRef = triggerRef\n ? { ...gridItemProps, ref: mergeRefs(existingRef, triggerRef) }\n : gridItemProps;\n\n return (\n <ItemsGridListItemView\n id={id}\n textValue={textValue}\n href={href}\n target={itemView.target}\n hasAction={hasAction}\n isTile={isTile}\n {...gridItemPropsWithRef}\n >\n <Suspense fallback={<ItemLoadingView />}>{children}</Suspense>\n </ItemsGridListItemView>\n );\n};\n\n// The list model is rebuilt on every render, so it cannot be compared by\n// identity — but everything an item renders from it can. Those closures come\n// from the consumer's own JSX and only change when the consumer re-renders,\n// so loading more still skips the re-render while parent state no longer\n// leaves an item frozen on the values it first saw.\nexport const Item = memo(\n ItemImpl,\n (prev, next) =>\n prev.id === next.id &&\n prev.data === next.data &&\n prev.triggerRef === next.triggerRef &&\n prev.isTile === next.isTile &&\n prev.list.onAction === next.list.onAction &&\n prev.list.accordion === next.list.accordion &&\n !!prev.list.itemView?.rendersSameAs(next.list.itemView),\n);\nItem.displayName = \"Item\";\n\ninterface ItemContainerProps extends PropsWithChildren {\n id?: Key;\n data?: never;\n}\n\nexport const ItemContainer: FC<ItemContainerProps> = (props) => {\n const list = useList();\n return (\n <ItemsGridListItemView\n textValue=\"-\"\n className={styles.item}\n isTile={list.viewMode.isTiles}\n >\n {props.children}\n </ItemsGridListItemView>\n );\n};\n\nexport default Item;\n"],"mappings":";;;;;;;;;;;AAmBA,IAAM,YAAY,UAAiB;CACjC,MAAM,EAAE,IAAI,MAAM,YAAY,MAAM,WAAW;CAE/C,MAAM,WAAW,KAAK;CAEtB,MAAM,EAAE,eAAe,aAAa,iBAAiB,OAAO,IAAI;CAEhE,IAAI,CAAC,UACH,OAAO;CAGT,MAAM,YAAY,SAAS,YAAY,SAAS,UAAU,IAAI,IAAI,KAAA;CAClE,MAAM,OAAO,SAAS,OAAO,SAAS,KAAK,IAAI,IAAI,KAAA;CACnD,MAAM,YAAY,CAAC,CAAC,cAAc,YAAY,CAAC,CAAC;CAEhD,MAAM,cAAc,SAAS,gBAAgB,cAAc,MAAM,KAAA;CACjE,MAAM,uBAAuB,aACzB;EAAE,GAAG;EAAe,KAAK,UAAU,aAAa,UAAU;CAAE,IAC5D;CAEJ,OACE,oBAAC,uBAAD;EACM;EACO;EACL;EACN,QAAQ,SAAS;EACN;EACH;EACR,GAAI;EAEJ,UAAA,oBAAC,UAAD;GAAU,UAAU,oBAAC,iBAAD,CAAkB,CAAA;GAAI;EAAmB,CAAA;CACxC,CAAA;AAE3B;AAOA,IAAa,OAAO,KAClB,WACC,MAAM,SACL,KAAK,OAAO,KAAK,MACjB,KAAK,SAAS,KAAK,QACnB,KAAK,eAAe,KAAK,cACzB,KAAK,WAAW,KAAK,UACrB,KAAK,KAAK,aAAa,KAAK,KAAK,YACjC,KAAK,KAAK,cAAc,KAAK,KAAK,aAClC,CAAC,CAAC,KAAK,KAAK,UAAU,cAAc,KAAK,KAAK,QAAQ,CAC1D;AACA,KAAK,cAAc;AAOnB,IAAa,iBAAyC,UAAU;CAC9D,MAAM,OAAO,QAAQ;CACrB,OACE,oBAAC,uBAAD;EACE,WAAU;EACV,WAAW,oBAAO;EAClB,QAAQ,KAAK,SAAS;EAErB,UAAA,MAAM;CACc,CAAA;AAE3B"}