@webiny/admin-ui 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.eb81deee7e

package/ImageEditor/ImageEditor.js

@@ -0,0 +1,151 @@
+import react, { useEffect, useState } from "react";
+import { ReactComponent } from "@webiny/icons/arrow_drop_down.svg";
+import { Dialog } from "../Dialog/index.js";
+import { Button } from "../Button/index.js";
+import { DropdownMenu } from "../DropdownMenu/index.js";
+import { CropHotspotEditor, FREE, inferAspectId } from "./CropHotspotEditor.js";
+import { AspectRatioPreview } from "./AspectRatioPreview.js";
+import { MetaFields } from "./MetaFields.js";
+import { SectionLabel } from "./SectionLabel.js";
+import { DEFAULT_ASPECT_RATIOS, DEFAULT_PREVIEW_RATIO_IDS } from "./types.js";
+const isFullCrop = (crop)=>{
+    if (!crop) return true;
+    return 0 === crop.top && 0 === crop.left && 0 === crop.bottom && 0 === crop.right;
+};
+const isCenteredHotspot = (hotspot)=>!hotspot || 0.5 === hotspot.x && 0.5 === hotspot.y;
+const ImageEditor = ({ open, onClose, image, value, onSave, aspectRatios = DEFAULT_ASPECT_RATIOS, showAlt = true, showCaption = true, title = "Edit image" })=>{
+    const [crop, setCrop] = useState(value?.crop);
+    const [hotspot, setHotspot] = useState(value?.hotspot);
+    const [alt, setAlt] = useState(value?.alt ?? "");
+    const [caption, setCaption] = useState(value?.caption ?? "");
+    const [aspectId, setAspectId] = useState(FREE);
+    const [selectedRatioIds, setSelectedRatioIds] = useState(()=>{
+        const defaults = aspectRatios.filter((ar)=>DEFAULT_PREVIEW_RATIO_IDS.includes(ar.id)).map((ar)=>ar.id);
+        return defaults.length > 0 ? defaults : aspectRatios.map((ar)=>ar.id);
+    });
+    const toggleRatio = (id)=>setSelectedRatioIds((prev)=>prev.includes(id) ? prev.filter((x)=>x !== id) : [
+                ...prev,
+                id
+            ]);
+    const visibleRatios = aspectRatios.filter((ar)=>selectedRatioIds.includes(ar.id));
+    const [naturalSize, setNaturalSize] = useState(null);
+    useEffect(()=>{
+        if (!open || !image.src || image.width > 0 && image.height > 0) return;
+        if ("u" < typeof document) return;
+        const probe = document.createElement("img");
+        probe.onload = ()=>setNaturalSize({
+                width: probe.naturalWidth,
+                height: probe.naturalHeight
+            });
+        probe.src = image.src;
+        return ()=>{
+            probe.onload = null;
+        };
+    }, [
+        open,
+        image.src,
+        image.width,
+        image.height
+    ]);
+    const effectiveImage = {
+        src: image.src,
+        width: image.width > 0 ? image.width : naturalSize?.width ?? 0,
+        height: image.height > 0 ? image.height : naturalSize?.height ?? 0
+    };
+    useEffect(()=>{
+        if (open) {
+            setCrop(value?.crop);
+            setHotspot(value?.hotspot);
+            setAlt(value?.alt ?? "");
+            setCaption(value?.caption ?? "");
+        }
+    }, [
+        open,
+        value
+    ]);
+    useEffect(()=>{
+        if (open) setAspectId(inferAspectId(value?.crop, effectiveImage.width, effectiveImage.height));
+    }, [
+        open,
+        value,
+        effectiveImage.width,
+        effectiveImage.height
+    ]);
+    const handleSave = ()=>{
+        const next = {};
+        if (!isFullCrop(crop)) next.crop = crop;
+        if (!isCenteredHotspot(hotspot)) next.hotspot = hotspot;
+        if (showAlt && alt.trim()) next.alt = alt.trim();
+        if (showCaption && caption.trim()) next.caption = caption.trim();
+        onSave(next);
+        onClose();
+    };
+    return /*#__PURE__*/ react.createElement(Dialog, {
+        open: open,
+        onClose: onClose,
+        title: title,
+        size: "lg",
+        actions: /*#__PURE__*/ react.createElement("div", {
+            className: "flex w-full items-center justify-end gap-sm"
+        }, /*#__PURE__*/ react.createElement(Button, {
+            variant: "secondary",
+            text: "Cancel",
+            onClick: onClose
+        }), /*#__PURE__*/ react.createElement(Button, {
+            variant: "primary",
+            text: "Save",
+            onClick: handleSave
+        }))
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-lg"
+    }, /*#__PURE__*/ react.createElement(CropHotspotEditor, {
+        image: effectiveImage,
+        crop: crop,
+        hotspot: hotspot,
+        aspectId: aspectId,
+        onChangeAspect: setAspectId,
+        onChangeCrop: setCrop,
+        onChangeHotspot: setHotspot
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-between"
+    }, /*#__PURE__*/ react.createElement(SectionLabel, null, "Preview"), /*#__PURE__*/ react.createElement(DropdownMenu, {
+        trigger: /*#__PURE__*/ react.createElement(Button, {
+            variant: "secondary",
+            text: `Preview at (${visibleRatios.length})`,
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            iconPosition: "end"
+        })
+    }, aspectRatios.map((ar)=>/*#__PURE__*/ react.createElement(DropdownMenu.CheckboxItem, {
+            key: ar.id,
+            text: ar.label,
+            checked: selectedRatioIds.includes(ar.id),
+            onCheckedChange: ()=>toggleRatio(ar.id),
+            onSelect: (e)=>e.preventDefault()
+        })))), visibleRatios.length > 0 ? /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-wrap items-start gap-md"
+    }, visibleRatios.map((ar)=>/*#__PURE__*/ react.createElement(AspectRatioPreview, {
+            key: ar.id,
+            src: effectiveImage.src,
+            imageWidth: effectiveImage.width,
+            imageHeight: effectiveImage.height,
+            crop: crop,
+            hotspot: hotspot,
+            aspectRatio: ar
+        }))) : /*#__PURE__*/ react.createElement("div", {
+        className: "text-sm text-neutral-strong"
+    }, "Select at least one shape to preview.")), showAlt || showCaption ? /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, /*#__PURE__*/ react.createElement(SectionLabel, null, "Details"), /*#__PURE__*/ react.createElement(MetaFields, {
+        alt: alt,
+        caption: caption,
+        showAlt: showAlt,
+        showCaption: showCaption,
+        onChangeAlt: setAlt,
+        onChangeCaption: setCaption
+    })) : null));
+};
+export { ImageEditor };
+
+//# sourceMappingURL=ImageEditor.js.map

package/ImageEditor/ImageEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditor/ImageEditor.js","sources":["../../src/ImageEditor/ImageEditor.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { ReactComponent as ArrowDropDownIcon } from \"@webiny/icons/arrow_drop_down.svg\";\nimport { Dialog } from \"~/Dialog/index.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\nimport { CropHotspotEditor, FREE, inferAspectId } from \"./CropHotspotEditor.js\";\nimport { AspectRatioPreview } from \"./AspectRatioPreview.js\";\nimport { MetaFields } from \"./MetaFields.js\";\nimport { SectionLabel } from \"./SectionLabel.js\";\nimport {\n    DEFAULT_ASPECT_RATIOS,\n    DEFAULT_PREVIEW_RATIO_IDS,\n    type ImageEditorAspectRatio,\n    type ImageEditorCrop,\n    type ImageEditorHotspot,\n    type ImageEditorImage,\n    type ImageEditorValue\n} from \"./types.js\";\n\nexport interface ImageEditorProps {\n    open: boolean;\n    onClose: () => void;\n    /** The source image to edit. */\n    image: ImageEditorImage;\n    /** The current edit (crop/hotspot/alt/caption), if any. */\n    value?: ImageEditorValue;\n    /** Called with the new edit when the user saves. */\n    onSave: (value: ImageEditorValue) => void;\n    /** Preview ratios shown in the strip. Defaults to square / 4:3 / 16:9. */\n    aspectRatios?: ImageEditorAspectRatio[];\n    showAlt?: boolean;\n    showCaption?: boolean;\n    title?: React.ReactNode;\n}\n\nconst isFullCrop = (crop: ImageEditorCrop | undefined): boolean => {\n    if (!crop) {\n        return true;\n    }\n    return crop.top === 0 && crop.left === 0 && crop.bottom === 0 && crop.right === 0;\n};\n\nconst isCenteredHotspot = (hotspot: ImageEditorHotspot | undefined): boolean => {\n    return !hotspot || (hotspot.x === 0.5 && hotspot.y === 0.5);\n};\n\nexport const ImageEditor = ({\n    open,\n    onClose,\n    image,\n    value,\n    onSave,\n    aspectRatios = DEFAULT_ASPECT_RATIOS,\n    showAlt = true,\n    showCaption = true,\n    title = \"Edit image\"\n}: ImageEditorProps) => {\n    const [crop, setCrop] = useState<ImageEditorCrop | undefined>(value?.crop);\n    const [hotspot, setHotspot] = useState<ImageEditorHotspot | undefined>(value?.hotspot);\n    const [alt, setAlt] = useState(value?.alt ?? \"\");\n    const [caption, setCaption] = useState(value?.caption ?? \"\");\n    // Selected crop shape. Inferred from the saved crop on open so the selector\n    // reflects the shape the crop was made with (rather than always \"free\").\n    const [aspectId, setAspectId] = useState<string>(FREE);\n    const [selectedRatioIds, setSelectedRatioIds] = useState<string[]>(() => {\n        const defaults = aspectRatios\n            .filter(ar => DEFAULT_PREVIEW_RATIO_IDS.includes(ar.id))\n            .map(ar => ar.id);\n        return defaults.length > 0 ? defaults : aspectRatios.map(ar => ar.id);\n    });\n\n    const toggleRatio = (id: string) =>\n        setSelectedRatioIds(prev =>\n            prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]\n        );\n\n    const visibleRatios = aspectRatios.filter(ar => selectedRatioIds.includes(ar.id));\n\n    // Fall back to the image's natural dimensions when the caller didn't provide\n    // them (e.g. missing metadata). Without real dimensions the canvas and previews\n    // would assume a square and distort the image / mis-map the crop coordinates.\n    const [naturalSize, setNaturalSize] = useState<{ width: number; height: number } | null>(null);\n\n    useEffect(() => {\n        if (!open || !image.src || (image.width > 0 && image.height > 0)) {\n            return;\n        }\n        if (typeof document === \"undefined\") {\n            return;\n        }\n        const probe = document.createElement(\"img\");\n        probe.onload = () => {\n            return setNaturalSize({ width: probe.naturalWidth, height: probe.naturalHeight });\n        };\n        probe.src = image.src;\n        return () => {\n            probe.onload = null;\n        };\n    }, [open, image.src, image.width, image.height]);\n\n    const effectiveImage: ImageEditorImage = {\n        src: image.src,\n        width: image.width > 0 ? image.width : (naturalSize?.width ?? 0),\n        height: image.height > 0 ? image.height : (naturalSize?.height ?? 0)\n    };\n\n    // Re-seed local state whenever the dialog is (re)opened for a given value.\n    useEffect(() => {\n        if (open) {\n            setCrop(value?.crop);\n            setHotspot(value?.hotspot);\n            setAlt(value?.alt ?? \"\");\n            setCaption(value?.caption ?? \"\");\n        }\n    }, [open, value]);\n\n    // Recover the crop shape from the saved crop on open (and once the intrinsic\n    // dimensions resolve). Keyed on `value`, not the live `crop`, so it never snaps\n    // the selector while the user is dragging a free-form crop.\n    useEffect(() => {\n        if (open) {\n            setAspectId(inferAspectId(value?.crop, effectiveImage.width, effectiveImage.height));\n        }\n    }, [open, value, effectiveImage.width, effectiveImage.height]);\n\n    const handleSave = () => {\n        const next: ImageEditorValue = {};\n        if (!isFullCrop(crop)) {\n            next.crop = crop;\n        }\n        if (!isCenteredHotspot(hotspot)) {\n            next.hotspot = hotspot;\n        }\n        if (showAlt && alt.trim()) {\n            next.alt = alt.trim();\n        }\n        if (showCaption && caption.trim()) {\n            next.caption = caption.trim();\n        }\n        onSave(next);\n        onClose();\n    };\n\n    return (\n        <Dialog\n            open={open}\n            onClose={onClose}\n            title={title}\n            size={\"lg\"}\n            actions={\n                <div className={\"flex w-full items-center justify-end gap-sm\"}>\n                    <Button variant={\"secondary\"} text={\"Cancel\"} onClick={onClose} />\n                    <Button variant={\"primary\"} text={\"Save\"} onClick={handleSave} />\n                </div>\n            }\n        >\n            <div className={\"flex flex-col gap-lg\"}>\n                <CropHotspotEditor\n                    image={effectiveImage}\n                    crop={crop}\n                    hotspot={hotspot}\n                    aspectId={aspectId}\n                    onChangeAspect={setAspectId}\n                    onChangeCrop={setCrop}\n                    onChangeHotspot={setHotspot}\n                />\n\n                <div className={\"flex flex-col gap-sm\"}>\n                    <div className={\"flex items-center justify-between\"}>\n                        <SectionLabel>Preview</SectionLabel>\n                        <DropdownMenu\n                            trigger={\n                                <Button\n                                    variant={\"secondary\"}\n                                    text={`Preview at (${visibleRatios.length})`}\n                                    icon={<ArrowDropDownIcon />}\n                                    iconPosition={\"end\"}\n                                />\n                            }\n                        >\n                            {aspectRatios.map(ar => (\n                                <DropdownMenu.CheckboxItem\n                                    key={ar.id}\n                                    text={ar.label}\n                                    checked={selectedRatioIds.includes(ar.id)}\n                                    onCheckedChange={() => toggleRatio(ar.id)}\n                                    onSelect={e => e.preventDefault()}\n                                />\n                            ))}\n                        </DropdownMenu>\n                    </div>\n                    {visibleRatios.length > 0 ? (\n                        <div className={\"flex flex-wrap items-start gap-md\"}>\n                            {visibleRatios.map(ar => (\n                                <AspectRatioPreview\n                                    key={ar.id}\n                                    src={effectiveImage.src}\n                                    imageWidth={effectiveImage.width}\n                                    imageHeight={effectiveImage.height}\n                                    crop={crop}\n                                    hotspot={hotspot}\n                                    aspectRatio={ar}\n                                />\n                            ))}\n                        </div>\n                    ) : (\n                        <div className={\"text-sm text-neutral-strong\"}>\n                            Select at least one shape to preview.\n                        </div>\n                    )}\n                </div>\n\n                {showAlt || showCaption ? (\n                    <div className={\"flex flex-col gap-sm\"}>\n                        <SectionLabel>Details</SectionLabel>\n                        <MetaFields\n                            alt={alt}\n                            caption={caption}\n                            showAlt={showAlt}\n                            showCaption={showCaption}\n                            onChangeAlt={setAlt}\n                            onChangeCaption={setCaption}\n                        />\n                    </div>\n                ) : null}\n            </div>\n        </Dialog>\n    );\n};\n"],"names":["isFullCrop","crop","isCenteredHotspot","hotspot","ImageEditor","open","onClose","image","value","onSave","aspectRatios","DEFAULT_ASPECT_RATIOS","showAlt","showCaption","title","setCrop","useState","setHotspot","alt","setAlt","caption","setCaption","aspectId","setAspectId","FREE","selectedRatioIds","setSelectedRatioIds","defaults","ar","DEFAULT_PREVIEW_RATIO_IDS","toggleRatio","id","prev","x","visibleRatios","naturalSize","setNaturalSize","useEffect","document","probe","effectiveImage","inferAspectId","handleSave","next","Dialog","Button","CropHotspotEditor","SectionLabel","DropdownMenu","ArrowDropDownIcon","e","AspectRatioPreview","MetaFields"],"mappings":"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"}

package/ImageEditor/ImageEditor.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ImageEditor } from "./index.js";
+declare const meta: Meta<typeof ImageEditor>;
+export default meta;
+type Story = StoryObj<typeof ImageEditor>;
+export declare const Default: Story;

package/ImageEditor/ImageEditor.stories.js

@@ -0,0 +1,42 @@
+import react, { useState } from "react";
+import { Button } from "../Button/index.js";
+import { ImageEditor } from "./index.js";
+const meta = {
+    title: "Components/ImageEditor",
+    component: ImageEditor,
+    parameters: {
+        layout: "fullscreen"
+    }
+};
+const ImageEditor_stories = meta;
+const DemoImage = {
+    src: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=1600",
+    width: 1600,
+    height: 1067
+};
+const Demo = ()=>{
+    const [open, setOpen] = useState(false);
+    const [value, setValue] = useState(void 0);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "p-lg"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        variant: "primary",
+        text: "Edit image",
+        onClick: ()=>setOpen(true)
+    }), /*#__PURE__*/ react.createElement("pre", {
+        className: "mt-md text-sm"
+    }, JSON.stringify(value, null, 2)), /*#__PURE__*/ react.createElement(ImageEditor, {
+        open: open,
+        onClose: ()=>setOpen(false),
+        image: DemoImage,
+        value: value,
+        onSave: setValue
+    }));
+};
+const Default = {
+    render: ()=>/*#__PURE__*/ react.createElement(Demo, null)
+};
+export default ImageEditor_stories;
+export { Default };
+
+//# sourceMappingURL=ImageEditor.stories.js.map

package/ImageEditor/ImageEditor.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditor/ImageEditor.stories.js","sources":["../../src/ImageEditor/ImageEditor.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Button } from \"~/Button/index.js\";\nimport { ImageEditor, type ImageEditorValue } from \"./index.js\";\n\nconst meta: Meta<typeof ImageEditor> = {\n    title: \"Components/ImageEditor\",\n    component: ImageEditor,\n    parameters: {\n        layout: \"fullscreen\"\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof ImageEditor>;\n\nconst DemoImage = {\n    src: \"https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=1600\",\n    width: 1600,\n    height: 1067\n};\n\nconst Demo = () => {\n    const [open, setOpen] = useState(false);\n    const [value, setValue] = useState<ImageEditorValue | undefined>(undefined);\n\n    return (\n        <div className={\"p-lg\"}>\n            <Button variant={\"primary\"} text={\"Edit image\"} onClick={() => setOpen(true)} />\n            <pre className={\"mt-md text-sm\"}>{JSON.stringify(value, null, 2)}</pre>\n            <ImageEditor\n                open={open}\n                onClose={() => setOpen(false)}\n                image={DemoImage}\n                value={value}\n                onSave={setValue}\n            />\n        </div>\n    );\n};\n\nexport const Default: Story = {\n    render: () => <Demo />\n};\n"],"names":["meta","ImageEditor","DemoImage","Demo","open","setOpen","useState","value","setValue","undefined","Button","JSON","Default"],"mappings":";;;AAKA,MAAMA,OAAiC;IACnC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,4BAAeD;AAIf,MAAME,YAAY;IACd,KAAK;IACL,OAAO;IACP,QAAQ;AACZ;AAEA,MAAMC,OAAO;IACT,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IACjC,MAAM,CAACC,OAAOC,SAAS,GAAGF,SAAuCG;IAEjE,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QAAC,SAAS;QAAW,MAAM;QAAc,SAAS,IAAML,QAAQ;sBACvE,oBAAC;QAAI,WAAW;OAAkBM,KAAK,SAAS,CAACJ,OAAO,MAAM,mBAC9D,oBAACN,aAAWA;QACR,MAAMG;QACN,SAAS,IAAMC,QAAQ;QACvB,OAAOH;QACP,OAAOK;QACP,QAAQC;;AAIxB;AAEO,MAAMI,UAAiB;IAC1B,QAAQ,kBAAM,oBAACT,MAAIA;AACvB"}

package/ImageEditor/MetaFields.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface MetaFieldsProps {
+    alt: string;
+    caption: string;
+    showAlt: boolean;
+    showCaption: boolean;
+    onChangeAlt: (value: string) => void;
+    onChangeCaption: (value: string) => void;
+}
+/** Alt text + optional caption, captured alongside the crop/hotspot. */
+export declare const MetaFields: ({ alt, caption, showAlt, showCaption, onChangeAlt, onChangeCaption }: MetaFieldsProps) => React.JSX.Element | null;
+export {};

package/ImageEditor/MetaFields.js

@@ -0,0 +1,20 @@
+import react from "react";
+import { Input } from "../Input/index.js";
+const MetaFields = ({ alt, caption, showAlt, showCaption, onChangeAlt, onChangeCaption })=>{
+    if (!showAlt && !showCaption) return null;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-md"
+    }, showAlt ? /*#__PURE__*/ react.createElement(Input, {
+        label: "Alternative text",
+        description: "Describe the image for screen readers and search engines.",
+        value: alt,
+        onChange: onChangeAlt
+    }) : null, showCaption ? /*#__PURE__*/ react.createElement(Input, {
+        label: "Caption",
+        value: caption,
+        onChange: onChangeCaption
+    }) : null);
+};
+export { MetaFields };
+
+//# sourceMappingURL=MetaFields.js.map

package/ImageEditor/MetaFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditor/MetaFields.js","sources":["../../src/ImageEditor/MetaFields.tsx"],"sourcesContent":["import React from \"react\";\nimport { Input } from \"~/Input/index.js\";\n\ninterface MetaFieldsProps {\n    alt: string;\n    caption: string;\n    showAlt: boolean;\n    showCaption: boolean;\n    onChangeAlt: (value: string) => void;\n    onChangeCaption: (value: string) => void;\n}\n\n/** Alt text + optional caption, captured alongside the crop/hotspot. */\nexport const MetaFields = ({\n    alt,\n    caption,\n    showAlt,\n    showCaption,\n    onChangeAlt,\n    onChangeCaption\n}: MetaFieldsProps) => {\n    if (!showAlt && !showCaption) {\n        return null;\n    }\n\n    return (\n        <div className={\"flex flex-col gap-md\"}>\n            {showAlt ? (\n                <Input\n                    label={\"Alternative text\"}\n                    description={\"Describe the image for screen readers and search engines.\"}\n                    value={alt}\n                    onChange={onChangeAlt}\n                />\n            ) : null}\n            {showCaption ? (\n                <Input label={\"Caption\"} value={caption} onChange={onChangeCaption} />\n            ) : null}\n        </div>\n    );\n};\n"],"names":["MetaFields","alt","caption","showAlt","showCaption","onChangeAlt","onChangeCaption","Input"],"mappings":";;AAaO,MAAMA,aAAa,CAAC,EACvBC,GAAG,EACHC,OAAO,EACPC,OAAO,EACPC,WAAW,EACXC,WAAW,EACXC,eAAe,EACD;IACd,IAAI,CAACH,WAAW,CAACC,aACb,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXD,UAAU,WAAVA,GACG,oBAACI,OAAKA;QACF,OAAO;QACP,aAAa;QACb,OAAON;QACP,UAAUI;SAEd,MACHD,cAAc,WAAdA,GACG,oBAACG,OAAKA;QAAC,OAAO;QAAW,OAAOL;QAAS,UAAUI;SACnD;AAGhB"}

package/ImageEditor/SectionLabel.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+/**
+ * Consistent section heading for the image editor. Uses the primary (darkest)
+ * text token so it reads as a heading, distinct from the muted body/caption text.
+ */
+export declare const SectionLabel: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/ImageEditor/SectionLabel.js

@@ -0,0 +1,7 @@
+import react from "react";
+const SectionLabel = ({ children })=>/*#__PURE__*/ react.createElement("div", {
+        className: "text-sm font-semibold text-neutral-primary"
+    }, children);
+export { SectionLabel };
+
+//# sourceMappingURL=SectionLabel.js.map

package/ImageEditor/SectionLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditor/SectionLabel.js","sources":["../../src/ImageEditor/SectionLabel.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * Consistent section heading for the image editor. Uses the primary (darkest)\n * text token so it reads as a heading, distinct from the muted body/caption text.\n */\nexport const SectionLabel = ({ children }: { children: React.ReactNode }) => {\n    return <div className={\"text-sm font-semibold text-neutral-primary\"}>{children}</div>;\n};\n"],"names":["SectionLabel","children"],"mappings":";AAMO,MAAMA,eAAe,CAAC,EAAEC,QAAQ,EAAiC,GAC7D,WAAP,GAAO,oBAAC;QAAI,WAAW;OAA+CA"}

package/ImageEditor/geometry.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Preview geometry for the image editor.
+ *
+ * IMPORTANT: this is a deliberate, minimal mirror of the canonical geometry core
+ * in `@webiny/website-builder-sdk` (`src/image/geometry.ts`). The SDK copy is the
+ * source of truth used for live frontend rendering; this copy exists only so the
+ * design-system layer stays free of an SDK dependency. Keep the two in sync — the
+ * whole point is that the editor preview matches what the site renders.
+ */
+import type { ImageEditorCrop, ImageEditorHotspot } from "./types.js";
+export interface PreviewStyles {
+    container: React.CSSProperties;
+    image: React.CSSProperties;
+}
+interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * The largest rectangle of `ratio` (w/h) that fits inside the crop, centered on
+ * the hotspot and clamped to the crop bounds.
+ */
+export declare const getVisibleRect: (imageWidth: number, imageHeight: number, crop: ImageEditorCrop | undefined, hotspot: ImageEditorHotspot | undefined, ratio: number) => Rect;
+/**
+ * CSS for an overflow-clipped container + absolutely positioned image that shows
+ * exactly the visible rect for a given aspect ratio.
+ */
+export declare const getPreviewStyles: (imageWidth: number, imageHeight: number, crop: ImageEditorCrop | undefined, hotspot: ImageEditorHotspot | undefined, ratio: number) => PreviewStyles;
+export interface CroppedImageRenderStyles {
+    wrapper: React.CSSProperties;
+    image: React.CSSProperties;
+}
+/**
+ * Styles to render an already-cropped image inside a measured box, honoring the
+ * crop (and, for `cover`, the hotspot). Use when you know the box's pixel size:
+ *  - `cover`: fills the box, cover-cropping the crop region toward the hotspot;
+ *  - `contain`: fits the whole crop region inside the box (centered by the parent).
+ */
+export declare const getCroppedImageRenderStyles: (imageWidth: number, imageHeight: number, crop: ImageEditorCrop | undefined, hotspot: ImageEditorHotspot | undefined, opts: {
+    boxWidth: number;
+    boxHeight: number;
+    fit: "cover" | "contain";
+}) => CroppedImageRenderStyles;
+export {};

package/ImageEditor/geometry.js

@@ -0,0 +1,126 @@
+const clamp = (value, min = 0, max = 1)=>{
+    if (Number.isNaN(value)) return min;
+    return Math.min(max, Math.max(min, value));
+};
+const round = (n)=>Math.round(1000 * n) / 1000;
+const getCropRect = (crop)=>{
+    const top = clamp(crop?.top ?? 0);
+    const left = clamp(crop?.left ?? 0);
+    const bottom = clamp(crop?.bottom ?? 0);
+    const right = clamp(crop?.right ?? 0);
+    return {
+        x: left,
+        y: top,
+        width: Math.max(0, 1 - left - right),
+        height: Math.max(0, 1 - top - bottom)
+    };
+};
+const getVisibleRect = (imageWidth, imageHeight, crop, hotspot, ratio)=>{
+    const cropRect = getCropRect(crop);
+    if (cropRect.width <= 0 || cropRect.height <= 0) return cropRect;
+    const iw = imageWidth > 0 ? imageWidth : 1;
+    const ih = imageHeight > 0 ? imageHeight : 1;
+    const targetAR = ratio > 0 ? ratio : 1;
+    const cropWpx = cropRect.width * iw;
+    const cropHpx = cropRect.height * ih;
+    const cropAR = cropWpx / cropHpx;
+    let finalWpx;
+    let finalHpx;
+    if (targetAR > cropAR) {
+        finalWpx = cropWpx;
+        finalHpx = cropWpx / targetAR;
+    } else {
+        finalHpx = cropHpx;
+        finalWpx = cropHpx * targetAR;
+    }
+    const finalW = finalWpx / iw;
+    const finalH = finalHpx / ih;
+    const hx = clamp(hotspot?.x ?? 0.5);
+    const hy = clamp(hotspot?.y ?? 0.5);
+    const maxX = cropRect.x + cropRect.width - finalW;
+    const maxY = cropRect.y + cropRect.height - finalH;
+    const x = clamp(hx - finalW / 2, cropRect.x, Math.max(cropRect.x, maxX));
+    const y = clamp(hy - finalH / 2, cropRect.y, Math.max(cropRect.y, maxY));
+    return {
+        x,
+        y,
+        width: finalW,
+        height: finalH
+    };
+};
+const getPreviewStyles = (imageWidth, imageHeight, crop, hotspot, ratio)=>{
+    const rect = getVisibleRect(imageWidth, imageHeight, crop, hotspot, ratio);
+    const safeW = rect.width > 0 ? rect.width : 1;
+    const safeH = rect.height > 0 ? rect.height : 1;
+    return {
+        container: {
+            position: "relative",
+            width: "100%",
+            aspectRatio: `${round(ratio > 0 ? ratio : 1)}`,
+            overflow: "hidden"
+        },
+        image: {
+            position: "absolute",
+            width: `${round(100 / safeW)}%`,
+            height: `${round(100 / safeH)}%`,
+            left: `${round(100 * -(rect.x / safeW))}%`,
+            top: `${round(100 * -(rect.y / safeH))}%`,
+            maxWidth: "none",
+            objectFit: "cover",
+            objectPosition: `${round(100 * clamp(hotspot?.x ?? 0.5))}% ${round(100 * clamp(hotspot?.y ?? 0.5))}%`
+        }
+    };
+};
+const getCroppedImageRenderStyles = (imageWidth, imageHeight, crop, hotspot, opts)=>{
+    const imageStyle = (rect)=>{
+        const safeW = rect.width > 0 ? rect.width : 1;
+        const safeH = rect.height > 0 ? rect.height : 1;
+        return {
+            position: "absolute",
+            width: `${round(100 / safeW)}%`,
+            height: `${round(100 / safeH)}%`,
+            left: `${round(100 * -(rect.x / safeW))}%`,
+            top: `${round(100 * -(rect.y / safeH))}%`,
+            maxWidth: "none",
+            objectFit: "cover",
+            objectPosition: `${round(100 * clamp(hotspot?.x ?? 0.5))}% ${round(100 * clamp(hotspot?.y ?? 0.5))}%`
+        };
+    };
+    if ("cover" === opts.fit) {
+        const targetAspect = opts.boxHeight > 0 ? opts.boxWidth / opts.boxHeight : 1;
+        const rect = getVisibleRect(imageWidth, imageHeight, crop, hotspot, targetAspect);
+        return {
+            wrapper: {
+                position: "relative",
+                width: "100%",
+                height: "100%",
+                overflow: "hidden"
+            },
+            image: imageStyle(rect)
+        };
+    }
+    const cropRect = getCropRect(crop);
+    const iw = imageWidth > 0 ? imageWidth : 1;
+    const ih = imageHeight > 0 ? imageHeight : 1;
+    const cropWpx = (cropRect.width > 0 ? cropRect.width : 1) * iw;
+    const cropHpx = (cropRect.height > 0 ? cropRect.height : 1) * ih;
+    const cropAspect = cropWpx / cropHpx;
+    let width = opts.boxWidth;
+    let height = opts.boxWidth / cropAspect;
+    if (height > opts.boxHeight) {
+        height = opts.boxHeight;
+        width = opts.boxHeight * cropAspect;
+    }
+    return {
+        wrapper: {
+            position: "relative",
+            width: `${round(width)}px`,
+            height: `${round(height)}px`,
+            overflow: "hidden"
+        },
+        image: imageStyle(cropRect)
+    };
+};
+export { getCroppedImageRenderStyles, getPreviewStyles, getVisibleRect };
+
+//# sourceMappingURL=geometry.js.map

package/ImageEditor/geometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditor/geometry.js","sources":["../../src/ImageEditor/geometry.ts"],"sourcesContent":["/**\n * Preview geometry for the image editor.\n *\n * IMPORTANT: this is a deliberate, minimal mirror of the canonical geometry core\n * in `@webiny/website-builder-sdk` (`src/image/geometry.ts`). The SDK copy is the\n * source of truth used for live frontend rendering; this copy exists only so the\n * design-system layer stays free of an SDK dependency. Keep the two in sync — the\n * whole point is that the editor preview matches what the site renders.\n */\nimport type { ImageEditorCrop, ImageEditorHotspot } from \"./types.js\";\n\nexport interface PreviewStyles {\n    container: React.CSSProperties;\n    image: React.CSSProperties;\n}\n\nconst clamp = (value: number, min = 0, max = 1): number => {\n    if (Number.isNaN(value)) {\n        return min;\n    }\n    return Math.min(max, Math.max(min, value));\n};\n\nconst round = (n: number): number => Math.round(n * 1000) / 1000;\n\ninterface Rect {\n    x: number;\n    y: number;\n    width: number;\n    height: number;\n}\n\nconst getCropRect = (crop?: ImageEditorCrop | null): Rect => {\n    const top = clamp(crop?.top ?? 0);\n    const left = clamp(crop?.left ?? 0);\n    const bottom = clamp(crop?.bottom ?? 0);\n    const right = clamp(crop?.right ?? 0);\n    return {\n        x: left,\n        y: top,\n        width: Math.max(0, 1 - left - right),\n        height: Math.max(0, 1 - top - bottom)\n    };\n};\n\n/**\n * The largest rectangle of `ratio` (w/h) that fits inside the crop, centered on\n * the hotspot and clamped to the crop bounds.\n */\nexport const getVisibleRect = (\n    imageWidth: number,\n    imageHeight: number,\n    crop: ImageEditorCrop | undefined,\n    hotspot: ImageEditorHotspot | undefined,\n    ratio: number\n): Rect => {\n    const cropRect = getCropRect(crop);\n    if (cropRect.width <= 0 || cropRect.height <= 0) {\n        return cropRect;\n    }\n\n    const iw = imageWidth > 0 ? imageWidth : 1;\n    const ih = imageHeight > 0 ? imageHeight : 1;\n    const targetAR = ratio > 0 ? ratio : 1;\n\n    const cropWpx = cropRect.width * iw;\n    const cropHpx = cropRect.height * ih;\n    const cropAR = cropWpx / cropHpx;\n\n    let finalWpx: number;\n    let finalHpx: number;\n    if (targetAR > cropAR) {\n        finalWpx = cropWpx;\n        finalHpx = cropWpx / targetAR;\n    } else {\n        finalHpx = cropHpx;\n        finalWpx = cropHpx * targetAR;\n    }\n\n    const finalW = finalWpx / iw;\n    const finalH = finalHpx / ih;\n\n    const hx = clamp(hotspot?.x ?? 0.5);\n    const hy = clamp(hotspot?.y ?? 0.5);\n    const maxX = cropRect.x + cropRect.width - finalW;\n    const maxY = cropRect.y + cropRect.height - finalH;\n    const x = clamp(hx - finalW / 2, cropRect.x, Math.max(cropRect.x, maxX));\n    const y = clamp(hy - finalH / 2, cropRect.y, Math.max(cropRect.y, maxY));\n\n    return { x, y, width: finalW, height: finalH };\n};\n\n/**\n * CSS for an overflow-clipped container + absolutely positioned image that shows\n * exactly the visible rect for a given aspect ratio.\n */\nexport const getPreviewStyles = (\n    imageWidth: number,\n    imageHeight: number,\n    crop: ImageEditorCrop | undefined,\n    hotspot: ImageEditorHotspot | undefined,\n    ratio: number\n): PreviewStyles => {\n    const rect = getVisibleRect(imageWidth, imageHeight, crop, hotspot, ratio);\n    const safeW = rect.width > 0 ? rect.width : 1;\n    const safeH = rect.height > 0 ? rect.height : 1;\n\n    return {\n        container: {\n            position: \"relative\",\n            width: \"100%\",\n            aspectRatio: `${round(ratio > 0 ? ratio : 1)}`,\n            overflow: \"hidden\"\n        },\n        image: {\n            position: \"absolute\",\n            width: `${round(100 / safeW)}%`,\n            height: `${round(100 / safeH)}%`,\n            left: `${round(-(rect.x / safeW) * 100)}%`,\n            top: `${round(-(rect.y / safeH) * 100)}%`,\n            maxWidth: \"none\",\n            // Safety net: when the intrinsic dimensions match the image, the box\n            // already has the image's aspect ratio so `cover` is a no-op. If the\n            // dimensions are wrong/missing, this crops toward the focal point\n            // instead of hard-stretching the image.\n            objectFit: \"cover\",\n            objectPosition: `${round(clamp(hotspot?.x ?? 0.5) * 100)}% ${round(clamp(hotspot?.y ?? 0.5) * 100)}%`\n        }\n    };\n};\n\nexport interface CroppedImageRenderStyles {\n    wrapper: React.CSSProperties;\n    image: React.CSSProperties;\n}\n\n/**\n * Styles to render an already-cropped image inside a measured box, honoring the\n * crop (and, for `cover`, the hotspot). Use when you know the box's pixel size:\n *  - `cover`: fills the box, cover-cropping the crop region toward the hotspot;\n *  - `contain`: fits the whole crop region inside the box (centered by the parent).\n */\nexport const getCroppedImageRenderStyles = (\n    imageWidth: number,\n    imageHeight: number,\n    crop: ImageEditorCrop | undefined,\n    hotspot: ImageEditorHotspot | undefined,\n    opts: { boxWidth: number; boxHeight: number; fit: \"cover\" | \"contain\" }\n): CroppedImageRenderStyles => {\n    const imageStyle = (rect: {\n        x: number;\n        y: number;\n        width: number;\n        height: number;\n    }): React.CSSProperties => {\n        const safeW = rect.width > 0 ? rect.width : 1;\n        const safeH = rect.height > 0 ? rect.height : 1;\n        return {\n            position: \"absolute\",\n            width: `${round(100 / safeW)}%`,\n            height: `${round(100 / safeH)}%`,\n            left: `${round(-(rect.x / safeW) * 100)}%`,\n            top: `${round(-(rect.y / safeH) * 100)}%`,\n            maxWidth: \"none\",\n            // See getPreviewStyles: no-op when dimensions are correct, graceful\n            // crop toward the focal point when they aren't (instead of stretching).\n            objectFit: \"cover\",\n            objectPosition: `${round(clamp(hotspot?.x ?? 0.5) * 100)}% ${round(clamp(hotspot?.y ?? 0.5) * 100)}%`\n        };\n    };\n\n    if (opts.fit === \"cover\") {\n        const targetAspect = opts.boxHeight > 0 ? opts.boxWidth / opts.boxHeight : 1;\n        const rect = getVisibleRect(imageWidth, imageHeight, crop, hotspot, targetAspect);\n        return {\n            wrapper: { position: \"relative\", width: \"100%\", height: \"100%\", overflow: \"hidden\" },\n            image: imageStyle(rect)\n        };\n    }\n\n    // contain: fit the whole crop region within the box, preserving its aspect.\n    const cropRect = getCropRect(crop);\n    const iw = imageWidth > 0 ? imageWidth : 1;\n    const ih = imageHeight > 0 ? imageHeight : 1;\n    const cropWpx = (cropRect.width > 0 ? cropRect.width : 1) * iw;\n    const cropHpx = (cropRect.height > 0 ? cropRect.height : 1) * ih;\n    const cropAspect = cropWpx / cropHpx;\n\n    let width = opts.boxWidth;\n    let height = opts.boxWidth / cropAspect;\n    if (height > opts.boxHeight) {\n        height = opts.boxHeight;\n        width = opts.boxHeight * cropAspect;\n    }\n\n    return {\n        wrapper: {\n            position: \"relative\",\n            width: `${round(width)}px`,\n            height: `${round(height)}px`,\n            overflow: \"hidden\"\n        },\n        image: imageStyle(cropRect)\n    };\n};\n"],"names":["clamp","value","min","max","Number","Math","round","n","getCropRect","crop","top","left","bottom","right","getVisibleRect","imageWidth","imageHeight","hotspot","ratio","cropRect","iw","ih","targetAR","cropWpx","cropHpx","cropAR","finalWpx","finalHpx","finalW","finalH","hx","hy","maxX","maxY","x","y","getPreviewStyles","rect","safeW","safeH","getCroppedImageRenderStyles","opts","imageStyle","targetAspect","cropAspect","width","height"],"mappings":"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"}

package/ImageEditor/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ImageEditor.js";
+export * from "./types.js";
+export { getCroppedImageRenderStyles, type CroppedImageRenderStyles } from "./geometry.js";

package/ImageEditor/index.js

@@ -0,0 +1,3 @@
+export * from "./ImageEditor.js";
+export * from "./types.js";
+export { getCroppedImageRenderStyles } from "./geometry.js";

package/ImageEditor/types.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Generic, self-contained types for the reusable image editor dialog.
+ *
+ * These are intentionally NOT imported from `@webiny/website-builder-sdk`:
+ * `@webiny/admin-ui` is the low-level design-system layer and must not depend on
+ * higher-level SDKs. The shapes are structurally identical to the SDK's
+ * `WebinyImageEdit`/`WebinyImageValue`, so consumers (File Manager, Website
+ * Builder) can pass values across the boundary without any mapping.
+ */
+/** Minimal information the editor needs about the source image. */
+export interface ImageEditorImage {
+    src: string;
+    /** Intrinsic (original) pixel width. */
+    width: number;
+    /** Intrinsic (original) pixel height. */
+    height: number;
+}
+/** Crop stored as the fraction (0..1) cut off from each edge of the image. */
+export interface ImageEditorCrop {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+}
+/** Focal region in normalized (0..1) coordinates of the original image. */
+export interface ImageEditorHotspot {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** The complete non-destructive edit produced by the dialog. */
+export interface ImageEditorValue {
+    crop?: ImageEditorCrop;
+    hotspot?: ImageEditorHotspot;
+    alt?: string;
+    caption?: string;
+}
+/** A single aspect ratio used both for the crop selector and the preview strip. */
+export interface ImageEditorAspectRatio {
+    id: string;
+    label: string;
+    /** `width / height`. */
+    ratio: number;
+}
+/**
+ * The single source of truth for selectable aspect ratios, shared by the crop
+ * shape selector and the preview-shapes dropdown so their labels stay identical.
+ */
+export declare const DEFAULT_ASPECT_RATIOS: ImageEditorAspectRatio[];
+/** Preview shapes selected by default (the originally specified square / 4:3 / 16:9). */
+export declare const DEFAULT_PREVIEW_RATIO_IDS: string[];

package/ImageEditor/types.js

@@ -0,0 +1,35 @@
+const DEFAULT_ASPECT_RATIOS = [
+    {
+        id: "1:1",
+        label: "Square (1:1)",
+        ratio: 1
+    },
+    {
+        id: "4:3",
+        label: "Landscape (4:3)",
+        ratio: 4 / 3
+    },
+    {
+        id: "16:9",
+        label: "Widescreen (16:9)",
+        ratio: 16 / 9
+    },
+    {
+        id: "3:4",
+        label: "Portrait (3:4)",
+        ratio: 0.75
+    },
+    {
+        id: "9:16",
+        label: "Tall (9:16)",
+        ratio: 9 / 16
+    }
+];
+const DEFAULT_PREVIEW_RATIO_IDS = [
+    "1:1",
+    "4:3",
+    "16:9"
+];
+export { DEFAULT_ASPECT_RATIOS, DEFAULT_PREVIEW_RATIO_IDS };
+
+//# sourceMappingURL=types.js.map

package/ImageEditor/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditor/types.js","sources":["../../src/ImageEditor/types.ts"],"sourcesContent":["/**\n * Generic, self-contained types for the reusable image editor dialog.\n *\n * These are intentionally NOT imported from `@webiny/website-builder-sdk`:\n * `@webiny/admin-ui` is the low-level design-system layer and must not depend on\n * higher-level SDKs. The shapes are structurally identical to the SDK's\n * `WebinyImageEdit`/`WebinyImageValue`, so consumers (File Manager, Website\n * Builder) can pass values across the boundary without any mapping.\n */\n\n/** Minimal information the editor needs about the source image. */\nexport interface ImageEditorImage {\n    src: string;\n    /** Intrinsic (original) pixel width. */\n    width: number;\n    /** Intrinsic (original) pixel height. */\n    height: number;\n}\n\n/** Crop stored as the fraction (0..1) cut off from each edge of the image. */\nexport interface ImageEditorCrop {\n    top: number;\n    left: number;\n    bottom: number;\n    right: number;\n}\n\n/** Focal region in normalized (0..1) coordinates of the original image. */\nexport interface ImageEditorHotspot {\n    x: number;\n    y: number;\n    width: number;\n    height: number;\n}\n\n/** The complete non-destructive edit produced by the dialog. */\nexport interface ImageEditorValue {\n    crop?: ImageEditorCrop;\n    hotspot?: ImageEditorHotspot;\n    alt?: string;\n    caption?: string;\n}\n\n/** A single aspect ratio used both for the crop selector and the preview strip. */\nexport interface ImageEditorAspectRatio {\n    id: string;\n    label: string;\n    /** `width / height`. */\n    ratio: number;\n}\n\n/**\n * The single source of truth for selectable aspect ratios, shared by the crop\n * shape selector and the preview-shapes dropdown so their labels stay identical.\n */\nexport const DEFAULT_ASPECT_RATIOS: ImageEditorAspectRatio[] = [\n    { id: \"1:1\", label: \"Square (1:1)\", ratio: 1 },\n    { id: \"4:3\", label: \"Landscape (4:3)\", ratio: 4 / 3 },\n    { id: \"16:9\", label: \"Widescreen (16:9)\", ratio: 16 / 9 },\n    { id: \"3:4\", label: \"Portrait (3:4)\", ratio: 3 / 4 },\n    { id: \"9:16\", label: \"Tall (9:16)\", ratio: 9 / 16 }\n];\n\n/** Preview shapes selected by default (the originally specified square / 4:3 / 16:9). */\nexport const DEFAULT_PREVIEW_RATIO_IDS = [\"1:1\", \"4:3\", \"16:9\"];\n"],"names":["DEFAULT_ASPECT_RATIOS","DEFAULT_PREVIEW_RATIO_IDS"],"mappings":"AAuDO,MAAMA,wBAAkD;IAC3D;QAAE,IAAI;QAAO,OAAO;QAAgB,OAAO;IAAE;IAC7C;QAAE,IAAI;QAAO,OAAO;QAAmB,OAAO,IAAI;IAAE;IACpD;QAAE,IAAI;QAAQ,OAAO;QAAqB,OAAO,KAAK;IAAE;IACxD;QAAE,IAAI;QAAO,OAAO;QAAkB,OAAO;IAAM;IACnD;QAAE,IAAI;QAAQ,OAAO;QAAe,OAAO,IAAI;IAAG;CACrD;AAGM,MAAMC,4BAA4B;IAAC;IAAO;IAAO;CAAO"}

package/Input/Input.d.ts

@@ -2,21 +2,22 @@ import React from "react";
 import { type InputPrimitiveProps } from "./InputPrimitive.js";
 import { type FormComponentProps } from "../FormComponent/index.js";
 type InputProps = InputPrimitiveProps & FormComponentProps;
-declare const Input: (({ label, description, hint, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: InputProps) => React.JSX.Element) & {
-    original: ({ label, description, hint, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: InputProps) => React.JSX.Element;
+declare const DecoratableInput: ({ label, description, hint, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: InputProps) => React.JSX.Element;
+declare const Input: typeof DecoratableInput & {
+    original: typeof DecoratableInput;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, hint, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: InputProps) => React.JSX.Element) & {
-        original: ({ label, description, hint, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: InputProps) => React.JSX.Element;
+    original: typeof DecoratableInput & {
+        original: typeof DecoratableInput;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, hint, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: InputProps) => React.JSX.Element) & {
-        original: ({ label, description, hint, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: InputProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableInput & {
+        original: typeof DecoratableInput;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;