@webiny/app-website-builder 0.0.0-unstable.eb196ccd2f → 0.0.0-unstable.eb81deee7e

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/ValueSelector.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useRef","useState","cn","DropdownMenu","FormComponentLabel","FormComponentNote","Input","Select","Separator","InheritedFrom","useBreakpoint","BASE_BREAKPOINT","UnitValue","ValueSelector","props","breakpoint","editing","setEditing","isOpen","setIsOpen","inputChanged","setInputChanged","inputRef","defaultValue","currentValue","from","value","trackTyping","onEnter","setValue","setUnit","unit","onChange","toString","parsedValue","finalValue","getValue","setTimeout","setPreviewValue","parseInt","isNaN","onChangePreview","onReset","classNames","overridden","inheritedFrom","disabled","label","createElement","className","onClick","style","width","isKeyword","controls","Fragment","text","onKeyDown","size","autoSelect","onBlur","e","target","autoFocus","options","units","current","focus","displayResetAction","open","onOpenChange","trigger","align","side","name","variant","margin","overriddenAt"],"sources":["ValueSelector.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState } from \"react\";\nimport {\n    cn,\n    DropdownMenu,\n    FormComponentLabel,\n    FormComponentNote,\n    Input,\n    Select,\n    Separator\n} from \"@webiny/admin-ui\";\nimport { InheritedFrom } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport { BASE_BREAKPOINT } from \"~/constants\";\nimport { UnitValue } from \"./UnitValue\";\n\ntype Option = {\n    label: string;\n    value: string;\n};\n\ninterface ValueSelectorProps {\n    label: React.ReactNode;\n    value: string;\n    unit: string;\n    isKeyword: boolean;\n    units: Option[];\n    onChange: (value: string) => void;\n    onChangePreview: (value: string) => void;\n    onReset: () => void;\n    inheritedFrom?: string;\n    overridden?: boolean;\n    disabled?: boolean;\n}\n\nexport const ValueSelector = (props: ValueSelectorProps) => {\n    const { breakpoint } = useBreakpoint();\n    const [editing, setEditing] = useState(false);\n    const [isOpen, setIsOpen] = useState(false);\n    const [inputChanged, setInputChanged] = useState(false);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const defaultValue = editing ? \"\" : 0;\n\n    const currentValue = UnitValue.from(props.value);\n\n    const trackTyping = useCallback(() => {\n        setInputChanged(true);\n    }, [setInputChanged]);\n\n    const onEnter = () => {\n        setValue(props.value);\n        setIsOpen(false);\n    };\n\n    const setUnit = (unit: string) => {\n        setEditing(false);\n        currentValue.setUnit(unit);\n        props.onChange(currentValue.toString());\n    };\n\n    const setValue = (value: string) => {\n        const parsedValue = UnitValue.from(value);\n        if (!inputChanged) {\n            return;\n        }\n        const finalValue = parsedValue.getValue(\"0\");\n        props.onChange(`${finalValue}${props.unit}`);\n\n        setInputChanged(false);\n        setTimeout(() => {\n            setEditing(false);\n        }, 20);\n    };\n\n    const setPreviewValue = (value: string) => {\n        setEditing(true);\n        let finalValue: string | number = \"\";\n        if (value !== \"\") {\n            const parsedValue = parseInt(value);\n            finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n        }\n        props.onChangePreview(`${finalValue}${props.unit}`);\n    };\n\n    const onReset = () => {\n        props.onReset();\n        setIsOpen(false);\n    };\n\n    const classNames = cn([\n        \"wby-cursor-pointer wby-bg-neutral-base\",\n        \"wby-border-sm wby-border-solid wby-border-neutral-muted\",\n        props.overridden && props.inheritedFrom && \"wby-bg-success-default wby-text-neutral-light\",\n        props.disabled &&\n            \"wby-bg-neutral-disabled wby-text-neutral-disabled wby-pointer-events-none\",\n        \"wby-flex wby-flex-row wby-text-sm wby-mx-auto wby-justify-center wby-rounded-sm wby-py-[1px] wby-px-[2px]\"\n    ]);\n\n    const label = (\n        <div className={classNames} onClick={() => setIsOpen(true)} style={{ width: 45 }}>\n            {props.value ?? 0} {props.isKeyword ? null : props.unit}\n        </div>\n    );\n\n    const controls = (\n        <>\n            <FormComponentLabel text={props.label} />\n            <div className={\"wby-flex wby-flex-row wby-space-x-sm\"}>\n                <div className={\"wby-flex-col\"}>\n                    <Input\n                        onKeyDown={trackTyping}\n                        inputRef={inputRef}\n                        disabled={props.isKeyword}\n                        size={\"md\"}\n                        value={props.isKeyword ? \"-\" : props.value ?? defaultValue}\n                        onEnter={onEnter}\n                        autoSelect={true}\n                        onChange={value => setPreviewValue(value)}\n                        onBlur={e => setValue(e.target.value)}\n                        autoFocus={true}\n                    />\n                </div>\n                <div className={\"wby-flex-col\"}>\n                    <Select\n                        size=\"md\"\n                        value={props.unit}\n                        options={props.units}\n                        onChange={unit => {\n                            setUnit(unit);\n                            setTimeout(() => {\n                                inputRef.current?.focus();\n                            }, 20);\n                        }}\n                        displayResetAction={false}\n                    />\n                </div>\n            </div>\n            <FormComponentNote text={`Hit \"Enter\" or click outside the menu to close it.`} />\n        </>\n    );\n\n    return (\n        <div className={\"wby-flex wby-flex-col wby-w-full\"}>\n            <DropdownMenu\n                open={isOpen}\n                onOpenChange={() => setIsOpen(false)}\n                trigger={label}\n                align=\"center\"\n                side=\"bottom\"\n                className={\"wby-shadow-lg\"}\n            >\n                <div className={\"wby-p-sm wby-text-sm\"} style={{ width: 200 }}>\n                    {controls}\n                    {BASE_BREAKPOINT === breakpoint.name ? null : (\n                        <>\n                            <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                            <InheritedFrom\n                                inheritedFrom={props.inheritedFrom ?? BASE_BREAKPOINT}\n                                overriddenAt={props.overridden ? breakpoint.name : null}\n                                onReset={onReset}\n                            />\n                        </>\n                    )}\n                </div>\n            </DropdownMenu>\n        </div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/ValueSelector.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/ValueSelector.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState } from \"react\";\nimport {\n    cn,\n    DropdownMenu,\n    FormComponentLabel,\n    FormComponentNote,\n    Input,\n    Select,\n    Separator\n} from \"@webiny/admin-ui\";\nimport { InheritedFrom } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { BASE_BREAKPOINT } from \"~/constants.js\";\nimport { UnitValue } from \"./UnitValue.js\";\n\ntype Option = {\n    label: string;\n    value: string;\n};\n\ninterface ValueSelectorProps {\n    label: React.ReactNode;\n    value: string;\n    unit: string;\n    isKeyword: boolean;\n    units: Option[];\n    onChange: (value: string) => void;\n    onChangePreview: (value: string) => void;\n    onReset: () => void;\n    inheritedFrom?: string;\n    overridden?: boolean;\n    disabled?: boolean;\n}\n\nexport const ValueSelector = (props: ValueSelectorProps) => {\n    const { breakpoint } = useBreakpoint();\n    const [editing, setEditing] = useState(false);\n    const [isOpen, setIsOpen] = useState(false);\n    const [inputChanged, setInputChanged] = useState(false);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const defaultValue = editing ? \"\" : 0;\n\n    const currentValue = UnitValue.from(props.value);\n\n    const trackTyping = useCallback(() => {\n        setInputChanged(true);\n    }, [setInputChanged]);\n\n    const onEnter = () => {\n        setValue(props.value);\n        setIsOpen(false);\n    };\n\n    const setUnit = (unit: string) => {\n        setEditing(false);\n        currentValue.setUnit(unit);\n        props.onChange(currentValue.toString());\n    };\n\n    const setValue = (value: string) => {\n        const parsedValue = UnitValue.from(value);\n        if (!inputChanged) {\n            return;\n        }\n        const finalValue = parsedValue.getValue(\"0\");\n        props.onChange(`${finalValue}${props.unit}`);\n\n        setInputChanged(false);\n        setTimeout(() => {\n            setEditing(false);\n        }, 20);\n    };\n\n    const setPreviewValue = (value: string) => {\n        setEditing(true);\n        let finalValue: string | number = \"\";\n        if (value !== \"\") {\n            const parsedValue = parseInt(value);\n            finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n        }\n        props.onChangePreview(`${finalValue}${props.unit}`);\n    };\n\n    const onReset = () => {\n        props.onReset();\n        setIsOpen(false);\n    };\n\n    const classNames = cn([\n        \"cursor-pointer bg-neutral-base w-[45px]\",\n        \"border-sm border-solid border-neutral-muted\",\n        { \"bg-success text-neutral-light\": props.overridden && props.inheritedFrom },\n        {\n            \"text-neutral-dimmed border-neutral-dimmed-darker bg-neutral-subtle pointer-events-none\":\n                props.disabled\n        },\n        \"flex flex-row text-sm mx-auto justify-center rounded-sm py-xxs px-xs\"\n    ]);\n\n    const label = (\n        <div className={classNames} onClick={() => setIsOpen(true)}>\n            {props.value ?? 0} {props.isKeyword ? null : props.unit}\n        </div>\n    );\n\n    const controls = (\n        <>\n            <FormComponentLabel text={props.label} />\n            <div className={\"flex flex-row space-x-sm\"}>\n                <div className={\"flex-col\"}>\n                    <Input\n                        onKeyDown={trackTyping}\n                        inputRef={inputRef}\n                        disabled={props.isKeyword}\n                        size={\"md\"}\n                        value={props.isKeyword ? \"-\" : (props.value ?? defaultValue)}\n                        onEnter={onEnter}\n                        autoSelect={true}\n                        onChange={value => setPreviewValue(value)}\n                        onBlur={e => setValue(e.target.value)}\n                        autoFocus={true}\n                    />\n                </div>\n                <div className={\"flex-col\"}>\n                    <Select\n                        size=\"md\"\n                        value={props.unit}\n                        options={props.units}\n                        onChange={unit => {\n                            setUnit(unit);\n                            setTimeout(() => {\n                                inputRef.current?.focus();\n                            }, 20);\n                        }}\n                        displayResetAction={false}\n                    />\n                </div>\n            </div>\n            <FormComponentNote text={`Hit \"Enter\" or click outside the menu to close it.`} />\n        </>\n    );\n\n    return (\n        <div className={\"flex flex-col w-full\"}>\n            <DropdownMenu\n                open={isOpen}\n                onOpenChange={() => setIsOpen(false)}\n                trigger={label}\n                align=\"center\"\n                side=\"bottom\"\n                className={\"shadow-lg\"}\n            >\n                <div className={\"p-sm text-sm\"} style={{ width: 200 }}>\n                    {controls}\n                    {BASE_BREAKPOINT === breakpoint.name ? null : (\n                        <>\n                            <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                            <InheritedFrom\n                                inheritedFrom={props.inheritedFrom ?? BASE_BREAKPOINT}\n                                overriddenAt={props.overridden ? breakpoint.name : null}\n                                onReset={onReset}\n                            />\n                        </>\n                    )}\n                </div>\n            </DropdownMenu>\n        </div>\n    );\n};\n"],"names":["ValueSelector","props","breakpoint","useBreakpoint","editing","setEditing","useState","isOpen","setIsOpen","inputChanged","setInputChanged","inputRef","useRef","defaultValue","currentValue","UnitValue","trackTyping","useCallback","onEnter","setValue","setUnit","unit","value","parsedValue","finalValue","setTimeout","setPreviewValue","parseInt","isNaN","onReset","classNames","cn","label","controls","FormComponentLabel","Input","e","Select","FormComponentNote","DropdownMenu","BASE_BREAKPOINT","Separator","InheritedFrom"],"mappings":";;;;;;AAkCO,MAAMA,gBAAgB,CAACC;IAC1B,MAAM,EAAEC,UAAU,EAAE,GAAGC;IACvB,MAAM,CAACC,SAASC,WAAW,GAAGC,SAAS;IACvC,MAAM,CAACC,QAAQC,UAAU,GAAGF,SAAS;IACrC,MAAM,CAACG,cAAcC,gBAAgB,GAAGJ,SAAS;IACjD,MAAMK,WAAWC,OAAgC;IAEjD,MAAMC,eAAeT,UAAU,KAAK;IAEpC,MAAMU,eAAeC,UAAU,IAAI,CAACd,MAAM,KAAK;IAE/C,MAAMe,cAAcC,YAAY;QAC5BP,gBAAgB;IACpB,GAAG;QAACA;KAAgB;IAEpB,MAAMQ,UAAU;QACZC,SAASlB,MAAM,KAAK;QACpBO,UAAU;IACd;IAEA,MAAMY,UAAU,CAACC;QACbhB,WAAW;QACXS,aAAa,OAAO,CAACO;QACrBpB,MAAM,QAAQ,CAACa,aAAa,QAAQ;IACxC;IAEA,MAAMK,WAAW,CAACG;QACd,MAAMC,cAAcR,UAAU,IAAI,CAACO;QACnC,IAAI,CAACb,cACD;QAEJ,MAAMe,aAAaD,YAAY,QAAQ,CAAC;QACxCtB,MAAM,QAAQ,CAAC,GAAGuB,aAAavB,MAAM,IAAI,EAAE;QAE3CS,gBAAgB;QAChBe,WAAW;YACPpB,WAAW;QACf,GAAG;IACP;IAEA,MAAMqB,kBAAkB,CAACJ;QACrBjB,WAAW;QACX,IAAImB,aAA8B;QAClC,IAAIF,AAAU,OAAVA,OAAc;YACd,MAAMC,cAAcI,SAASL;YAC7BE,aAAaI,MAAML,eAAe,IAAIA;QAC1C;QACAtB,MAAM,eAAe,CAAC,GAAGuB,aAAavB,MAAM,IAAI,EAAE;IACtD;IAEA,MAAM4B,UAAU;QACZ5B,MAAM,OAAO;QACbO,UAAU;IACd;IAEA,MAAMsB,aAAaC,GAAG;QAClB;QACA;QACA;YAAE,iCAAiC9B,MAAM,UAAU,IAAIA,MAAM,aAAa;QAAC;QAC3E;YACI,0FACIA,MAAM,QAAQ;QACtB;QACA;KACH;IAED,MAAM+B,QAAQ,WAARA,GACF,oBAAC;QAAI,WAAWF;QAAY,SAAS,IAAMtB,UAAU;OAChDP,MAAM,KAAK,IAAI,GAAE,KAAEA,MAAM,SAAS,GAAG,OAAOA,MAAM,IAAI;IAI/D,MAAMgC,WAAW,WAAXA,GACF,wDACI,oBAACC,oBAAkBA;QAAC,MAAMjC,MAAM,KAAK;sBACrC,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACkC,OAAKA;QACF,WAAWnB;QACX,UAAUL;QACV,UAAUV,MAAM,SAAS;QACzB,MAAM;QACN,OAAOA,MAAM,SAAS,GAAG,MAAOA,MAAM,KAAK,IAAIY;QAC/C,SAASK;QACT,YAAY;QACZ,UAAUI,CAAAA,QAASI,gBAAgBJ;QACnC,QAAQc,CAAAA,IAAKjB,SAASiB,EAAE,MAAM,CAAC,KAAK;QACpC,WAAW;uBAGnB,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QACH,MAAK;QACL,OAAOpC,MAAM,IAAI;QACjB,SAASA,MAAM,KAAK;QACpB,UAAUoB,CAAAA;YACND,QAAQC;YACRI,WAAW;gBACPd,SAAS,OAAO,EAAE;YACtB,GAAG;QACP;QACA,oBAAoB;wBAIhC,oBAAC2B,mBAAiBA;QAAC,MAAM;;IAIjC,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,cAAYA;QACT,MAAMhC;QACN,cAAc,IAAMC,UAAU;QAC9B,SAASwB;QACT,OAAM;QACN,MAAK;QACL,WAAW;qBAEX,oBAAC;QAAI,WAAW;QAAgB,OAAO;YAAE,OAAO;QAAI;OAC/CC,UACAO,oBAAoBtC,WAAW,IAAI,GAAG,OAAO,WAAP,GACnC,wDACI,oBAACuC,WAASA;QAAC,SAAS;QAAU,QAAQ;sBACtC,oBAACC,eAAaA;QACV,eAAezC,MAAM,aAAa,IAAIuC;QACtC,cAAcvC,MAAM,UAAU,GAAGC,WAAW,IAAI,GAAG;QACnD,SAAS2B;;AAQzC"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyleValue.d.ts

@@ -1,5 +1,5 @@
 export declare const useStyleValue: (elementId: string, propertyName: string, defaultValue?: string) => {
-    store: import("./StylesStore").StylesStore;
+    store: import("./StylesStore.js").StylesStore;
     value: string;
     unit: string;
     isKeyword: boolean;

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyleValue.js

@@ -1,51 +1,46 @@
 import { useCallback } from "react";
-import { useStyles } from "./useStyles";
-import { UnitValue } from "./UnitValue";
-export const useStyleValue = (elementId, propertyName, defaultValue) => {
-  const {
-    styles,
-    onChange,
-    onPreviewChange,
-    inheritanceMap,
-    store
-  } = useStyles(elementId);
-  const unitValue = UnitValue.from(styles[propertyName] ?? defaultValue ?? "");
-  const {
-    overridden,
-    inheritedFrom
-  } = inheritanceMap[propertyName] ?? {};
-  const onValueChange = useCallback(value => {
-    onChange(({
-      styles
-    }) => {
-      styles.set(propertyName, value);
-    });
-  }, [elementId, propertyName]);
-  const onValueChangePreview = useCallback(value => {
-    onPreviewChange(({
-      styles
-    }) => {
-      styles.set(propertyName, value);
-    });
-  }, [elementId, propertyName]);
-  const onValueReset = useCallback(() => {
-    onChange(({
-      styles
-    }) => {
-      styles.unset(propertyName);
-    });
-  }, [elementId, propertyName]);
-  return {
-    store,
-    value: unitValue.getValue(),
-    unit: unitValue.getUnit(),
-    isKeyword: unitValue.isKeyword(),
-    onChange: onValueChange,
-    onChangePreview: onValueChangePreview,
-    onReset: onValueReset,
-    inheritedFrom,
-    overridden
-  };
+import { useStyles } from "./useStyles.js";
+import { UnitValue } from "./UnitValue.js";
+const useStyleValue = (elementId, propertyName, defaultValue)=>{
+    const { styles, onChange, onPreviewChange, inheritanceMap, store } = useStyles(elementId);
+    const unitValue = UnitValue.from(styles[propertyName] ?? defaultValue ?? "");
+    const { overridden, inheritedFrom } = inheritanceMap[propertyName] ?? {};
+    const onValueChange = useCallback((value)=>{
+        onChange(({ styles })=>{
+            styles.set(propertyName, value);
+        });
+    }, [
+        elementId,
+        propertyName
+    ]);
+    const onValueChangePreview = useCallback((value)=>{
+        onPreviewChange(({ styles })=>{
+            styles.set(propertyName, value);
+        });
+    }, [
+        elementId,
+        propertyName
+    ]);
+    const onValueReset = useCallback(()=>{
+        onChange(({ styles })=>{
+            styles.unset(propertyName);
+        });
+    }, [
+        elementId,
+        propertyName
+    ]);
+    return {
+        store,
+        value: unitValue.getValue(),
+        unit: unitValue.getUnit(),
+        isKeyword: unitValue.isKeyword(),
+        onChange: onValueChange,
+        onChangePreview: onValueChangePreview,
+        onReset: onValueReset,
+        inheritedFrom,
+        overridden
+    };
 };
+export { useStyleValue };
 
 //# sourceMappingURL=useStyleValue.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyleValue.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useStyles","UnitValue","useStyleValue","elementId","propertyName","defaultValue","styles","onChange","onPreviewChange","inheritanceMap","store","unitValue","from","overridden","inheritedFrom","onValueChange","value","set","onValueChangePreview","onValueReset","unset","getValue","unit","getUnit","isKeyword","onChangePreview","onReset"],"sources":["useStyleValue.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useStyles } from \"./useStyles\";\nimport { UnitValue } from \"./UnitValue\";\n\nexport const useStyleValue = (elementId: string, propertyName: string, defaultValue?: string) => {\n    const { styles, onChange, onPreviewChange, inheritanceMap, store } = useStyles(elementId);\n    const unitValue = UnitValue.from(styles[propertyName] ?? defaultValue ?? \"\");\n\n    const { overridden, inheritedFrom } = inheritanceMap[propertyName] ?? {};\n\n    const onValueChange = useCallback(\n        (value: string) => {\n            onChange(({ styles }) => {\n                styles.set(propertyName, value);\n            });\n        },\n        [elementId, propertyName]\n    );\n\n    const onValueChangePreview = useCallback(\n        (value: string) => {\n            onPreviewChange(({ styles }) => {\n                styles.set(propertyName, value);\n            });\n        },\n        [elementId, propertyName]\n    );\n\n    const onValueReset = useCallback(() => {\n        onChange(({ styles }) => {\n            styles.unset(propertyName);\n        });\n    }, [elementId, propertyName]);\n\n    return {\n        store,\n        value: unitValue.getValue(),\n        unit: unitValue.getUnit(),\n        isKeyword: unitValue.isKeyword(),\n        onChange: onValueChange,\n        onChangePreview: onValueChangePreview,\n        onReset: onValueReset,\n        inheritedFrom,\n        overridden\n    };\n};\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,SAAS;AAClB,SAASC,SAAS;AAElB,OAAO,MAAMC,aAAa,GAAGA,CAACC,SAAiB,EAAEC,YAAoB,EAAEC,YAAqB,KAAK;EAC7F,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,eAAe;IAAEC,cAAc;IAAEC;EAAM,CAAC,GAAGV,SAAS,CAACG,SAAS,CAAC;EACzF,MAAMQ,SAAS,GAAGV,SAAS,CAACW,IAAI,CAACN,MAAM,CAACF,YAAY,CAAC,IAAIC,YAAY,IAAI,EAAE,CAAC;EAE5E,MAAM;IAAEQ,UAAU;IAAEC;EAAc,CAAC,GAAGL,cAAc,CAACL,YAAY,CAAC,IAAI,CAAC,CAAC;EAExE,MAAMW,aAAa,GAAGhB,WAAW,CAC5BiB,KAAa,IAAK;IACfT,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACW,GAAG,CAACb,YAAY,EAAEY,KAAK,CAAC;IACnC,CAAC,CAAC;EACN,CAAC,EACD,CAACb,SAAS,EAAEC,YAAY,CAC5B,CAAC;EAED,MAAMc,oBAAoB,GAAGnB,WAAW,CACnCiB,KAAa,IAAK;IACfR,eAAe,CAAC,CAAC;MAAEF;IAAO,CAAC,KAAK;MAC5BA,MAAM,CAACW,GAAG,CAACb,YAAY,EAAEY,KAAK,CAAC;IACnC,CAAC,CAAC;EACN,CAAC,EACD,CAACb,SAAS,EAAEC,YAAY,CAC5B,CAAC;EAED,MAAMe,YAAY,GAAGpB,WAAW,CAAC,MAAM;IACnCQ,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACc,KAAK,CAAChB,YAAY,CAAC;IAC9B,CAAC,CAAC;EACN,CAAC,EAAE,CAACD,SAAS,EAAEC,YAAY,CAAC,CAAC;EAE7B,OAAO;IACHM,KAAK;IACLM,KAAK,EAAEL,SAAS,CAACU,QAAQ,CAAC,CAAC;IAC3BC,IAAI,EAAEX,SAAS,CAACY,OAAO,CAAC,CAAC;IACzBC,SAAS,EAAEb,SAAS,CAACa,SAAS,CAAC,CAAC;IAChCjB,QAAQ,EAAEQ,aAAa;IACvBU,eAAe,EAAEP,oBAAoB;IACrCQ,OAAO,EAAEP,YAAY;IACrBL,aAAa;IACbD;EACJ,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyleValue.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyleValue.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useStyles } from \"./useStyles.js\";\nimport { UnitValue } from \"./UnitValue.js\";\n\nexport const useStyleValue = (elementId: string, propertyName: string, defaultValue?: string) => {\n    const { styles, onChange, onPreviewChange, inheritanceMap, store } = useStyles(elementId);\n    const unitValue = UnitValue.from(styles[propertyName] ?? defaultValue ?? \"\");\n\n    const { overridden, inheritedFrom } = inheritanceMap[propertyName] ?? {};\n\n    const onValueChange = useCallback(\n        (value: string) => {\n            onChange(({ styles }) => {\n                styles.set(propertyName, value);\n            });\n        },\n        [elementId, propertyName]\n    );\n\n    const onValueChangePreview = useCallback(\n        (value: string) => {\n            onPreviewChange(({ styles }) => {\n                styles.set(propertyName, value);\n            });\n        },\n        [elementId, propertyName]\n    );\n\n    const onValueReset = useCallback(() => {\n        onChange(({ styles }) => {\n            styles.unset(propertyName);\n        });\n    }, [elementId, propertyName]);\n\n    return {\n        store,\n        value: unitValue.getValue(),\n        unit: unitValue.getUnit(),\n        isKeyword: unitValue.isKeyword(),\n        onChange: onValueChange,\n        onChangePreview: onValueChangePreview,\n        onReset: onValueReset,\n        inheritedFrom,\n        overridden\n    };\n};\n"],"names":["useStyleValue","elementId","propertyName","defaultValue","styles","onChange","onPreviewChange","inheritanceMap","store","useStyles","unitValue","UnitValue","overridden","inheritedFrom","onValueChange","useCallback","value","onValueChangePreview","onValueReset"],"mappings":";;;AAIO,MAAMA,gBAAgB,CAACC,WAAmBC,cAAsBC;IACnE,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,cAAc,EAAEC,KAAK,EAAE,GAAGC,UAAUR;IAC/E,MAAMS,YAAYC,UAAU,IAAI,CAACP,MAAM,CAACF,aAAa,IAAIC,gBAAgB;IAEzE,MAAM,EAAES,UAAU,EAAEC,aAAa,EAAE,GAAGN,cAAc,CAACL,aAAa,IAAI,CAAC;IAEvE,MAAMY,gBAAgBC,YAClB,CAACC;QACGX,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,GAAG,CAACF,cAAcc;QAC7B;IACJ,GACA;QAACf;QAAWC;KAAa;IAG7B,MAAMe,uBAAuBF,YACzB,CAACC;QACGV,gBAAgB,CAAC,EAAEF,MAAM,EAAE;YACvBA,OAAO,GAAG,CAACF,cAAcc;QAC7B;IACJ,GACA;QAACf;QAAWC;KAAa;IAG7B,MAAMgB,eAAeH,YAAY;QAC7BV,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAACF;QACjB;IACJ,GAAG;QAACD;QAAWC;KAAa;IAE5B,OAAO;QACHM;QACA,OAAOE,UAAU,QAAQ;QACzB,MAAMA,UAAU,OAAO;QACvB,WAAWA,UAAU,SAAS;QAC9B,UAAUI;QACV,iBAAiBG;QACjB,SAASC;QACTL;QACAD;IACJ;AACJ"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.d.ts

@@ -1,19 +1,20 @@
-import { StylesStore, type ElementBreakpointStyles } from "./StylesStore";
+import { StylesStore, type ElementBreakpointStyles } from "./StylesStore.js";
 export type { ElementBreakpointStyles };
 export declare function useStyles(elementId: string): {
     store: StylesStore;
     styles: Record<string, any>;
-    metadata: import("../../../metadata").IMetadata;
+    tokens: Record<string, import("@webiny/website-builder-sdk/types.js").TokenReference>;
+    metadata: import("../../../metadata/IMetadata.js").IMetadata;
     inheritanceMap: Record<string, {
         overridden: boolean;
-        inheritedFrom?: string | undefined;
+        inheritedFrom?: string;
     }>;
     onChange: (cb: (params: {
-        styles: import("./StylesStore").StylesValueObject;
-        metadata: import("../../../metadata").IMetadata;
+        styles: import("./StylesStore.js").StylesValueObject;
+        metadata: import("../../../metadata/IMetadata.js").IMetadata;
     }) => void) => void;
     onPreviewChange: (cb: (params: {
-        styles: import("./StylesStore").StylesValueObject;
-        metadata: import("../../../metadata").IMetadata;
+        styles: import("./StylesStore.js").StylesValueObject;
+        metadata: import("../../../metadata/IMetadata.js").IMetadata;
     }) => void) => void;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js

@@ -1,33 +1,36 @@
 import { useMemo } from "react";
-import { useDocumentEditor } from "../../../../DocumentEditor";
-import { useBreakpoint } from "../../../hooks/useBreakpoint";
-import { StylesStore } from "./StylesStore";
-
-// Singleton store container
+import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
+import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
+import { StylesStore } from "./StylesStore.js";
 const stylesStores = new Map();
-export function useStyles(elementId) {
-  const editor = useDocumentEditor();
-  const {
-    breakpoints
-  } = useBreakpoint();
-  const store = useMemo(() => {
-    const cacheKey = [elementId, ...breakpoints].join(";");
-    // Create or get existing store for this element
-    let store = stylesStores.get(cacheKey);
-    if (!store) {
-      store = new StylesStore(editor, elementId, breakpoints.map(bp => bp.name));
-      stylesStores.set(cacheKey, store);
-    }
-    return store;
-  }, [elementId, breakpoints.length]);
-  return {
-    store,
-    styles: store.vm.styles,
-    metadata: store.vm.metadata,
-    inheritanceMap: store.vm.inheritanceMap,
-    onChange: store.onChange,
-    onPreviewChange: store.onPreviewChange
-  };
+function useStyles(elementId) {
+    const editor = useDocumentEditor();
+    const { breakpoints } = useBreakpoint();
+    const store = useMemo(()=>{
+        const cacheKey = [
+            elementId,
+            ...breakpoints
+        ].join(";");
+        let store = stylesStores.get(cacheKey);
+        if (!store) {
+            store = new StylesStore(editor, elementId, breakpoints.map((bp)=>bp.name));
+            stylesStores.set(cacheKey, store);
+        }
+        return store;
+    }, [
+        elementId,
+        breakpoints.length
+    ]);
+    return {
+        store,
+        styles: store.vm.styles,
+        tokens: store.vm.tokens,
+        metadata: store.vm.metadata,
+        inheritanceMap: store.vm.inheritanceMap,
+        onChange: store.onChange,
+        onPreviewChange: store.onPreviewChange
+    };
 }
+export { useStyles };
 
 //# sourceMappingURL=useStyles.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useDocumentEditor","useBreakpoint","StylesStore","stylesStores","Map","useStyles","elementId","editor","breakpoints","store","cacheKey","join","get","map","bp","name","set","length","styles","vm","metadata","inheritanceMap","onChange","onPreviewChange"],"sources":["useStyles.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport { StylesStore, type ElementBreakpointStyles } from \"./StylesStore\";\n\n// Singleton store container\nconst stylesStores = new Map<string, StylesStore>();\n\nexport type { ElementBreakpointStyles };\n\nexport function useStyles(elementId: string) {\n    const editor = useDocumentEditor();\n    const { breakpoints } = useBreakpoint();\n\n    const store = useMemo(() => {\n        const cacheKey = [elementId, ...breakpoints].join(\";\");\n        // Create or get existing store for this element\n        let store = stylesStores.get(cacheKey);\n\n        if (!store) {\n            store = new StylesStore(\n                editor,\n                elementId,\n                breakpoints.map(bp => bp.name)\n            );\n            stylesStores.set(cacheKey, store);\n        }\n\n        return store;\n    }, [elementId, breakpoints.length]);\n\n    return {\n        store,\n        styles: store.vm.styles,\n        metadata: store.vm.metadata,\n        inheritanceMap: store.vm.inheritanceMap,\n        onChange: store.onChange,\n        onPreviewChange: store.onPreviewChange\n    };\n}\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,iBAAiB;AAC1B,SAASC,aAAa;AACtB,SAASC,WAAW;;AAEpB;AACA,MAAMC,YAAY,GAAG,IAAIC,GAAG,CAAsB,CAAC;AAInD,OAAO,SAASC,SAASA,CAACC,SAAiB,EAAE;EACzC,MAAMC,MAAM,GAAGP,iBAAiB,CAAC,CAAC;EAClC,MAAM;IAAEQ;EAAY,CAAC,GAAGP,aAAa,CAAC,CAAC;EAEvC,MAAMQ,KAAK,GAAGV,OAAO,CAAC,MAAM;IACxB,MAAMW,QAAQ,GAAG,CAACJ,SAAS,EAAE,GAAGE,WAAW,CAAC,CAACG,IAAI,CAAC,GAAG,CAAC;IACtD;IACA,IAAIF,KAAK,GAAGN,YAAY,CAACS,GAAG,CAACF,QAAQ,CAAC;IAEtC,IAAI,CAACD,KAAK,EAAE;MACRA,KAAK,GAAG,IAAIP,WAAW,CACnBK,MAAM,EACND,SAAS,EACTE,WAAW,CAACK,GAAG,CAACC,EAAE,IAAIA,EAAE,CAACC,IAAI,CACjC,CAAC;MACDZ,YAAY,CAACa,GAAG,CAACN,QAAQ,EAAED,KAAK,CAAC;IACrC;IAEA,OAAOA,KAAK;EAChB,CAAC,EAAE,CAACH,SAAS,EAAEE,WAAW,CAACS,MAAM,CAAC,CAAC;EAEnC,OAAO;IACHR,KAAK;IACLS,MAAM,EAAET,KAAK,CAACU,EAAE,CAACD,MAAM;IACvBE,QAAQ,EAAEX,KAAK,CAACU,EAAE,CAACC,QAAQ;IAC3BC,cAAc,EAAEZ,KAAK,CAACU,EAAE,CAACE,cAAc;IACvCC,QAAQ,EAAEb,KAAK,CAACa,QAAQ;IACxBC,eAAe,EAAEd,KAAK,CAACc;EAC3B,CAAC;AACL","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { StylesStore, type ElementBreakpointStyles } from \"./StylesStore.js\";\n\n// Singleton store container\nconst stylesStores = new Map<string, StylesStore>();\n\nexport type { ElementBreakpointStyles };\n\nexport function useStyles(elementId: string) {\n    const editor = useDocumentEditor();\n    const { breakpoints } = useBreakpoint();\n\n    const store = useMemo(() => {\n        const cacheKey = [elementId, ...breakpoints].join(\";\");\n        // Create or get existing store for this element\n        let store = stylesStores.get(cacheKey);\n\n        if (!store) {\n            store = new StylesStore(\n                editor,\n                elementId,\n                breakpoints.map(bp => bp.name)\n            );\n            stylesStores.set(cacheKey, store);\n        }\n\n        return store;\n    }, [elementId, breakpoints.length]);\n\n    return {\n        store,\n        styles: store.vm.styles,\n        tokens: store.vm.tokens,\n        metadata: store.vm.metadata,\n        inheritanceMap: store.vm.inheritanceMap,\n        onChange: store.onChange,\n        onPreviewChange: store.onPreviewChange\n    };\n}\n"],"names":["stylesStores","Map","useStyles","elementId","editor","useDocumentEditor","breakpoints","useBreakpoint","store","useMemo","cacheKey","StylesStore","bp"],"mappings":";;;;AAMA,MAAMA,eAAe,IAAIC;AAIlB,SAASC,UAAUC,SAAiB;IACvC,MAAMC,SAASC;IACf,MAAM,EAAEC,WAAW,EAAE,GAAGC;IAExB,MAAMC,QAAQC,QAAQ;QAClB,MAAMC,WAAW;YAACP;eAAcG;SAAY,CAAC,IAAI,CAAC;QAElD,IAAIE,QAAQR,aAAa,GAAG,CAACU;QAE7B,IAAI,CAACF,OAAO;YACRA,QAAQ,IAAIG,YACRP,QACAD,WACAG,YAAY,GAAG,CAACM,CAAAA,KAAMA,GAAG,IAAI;YAEjCZ,aAAa,GAAG,CAACU,UAAUF;QAC/B;QAEA,OAAOA;IACX,GAAG;QAACL;QAAWG,YAAY,MAAM;KAAC;IAElC,OAAO;QACHE;QACA,QAAQA,MAAM,EAAE,CAAC,MAAM;QACvB,QAAQA,MAAM,EAAE,CAAC,MAAM;QACvB,UAAUA,MAAM,EAAE,CAAC,QAAQ;QAC3B,gBAAgBA,MAAM,EAAE,CAAC,cAAc;QACvC,UAAUA,MAAM,QAAQ;QACxB,iBAAiBA,MAAM,eAAe;IAC1C;AACJ"}

package/BaseEditor/defaultConfig/Toolbar/InsertElements/GridItem.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { ComponentGroupItem } from "@webiny/website-builder-sdk";
+export declare const GridItem: ({ item }: {
+    item: ComponentGroupItem;
+}) => React.JSX.Element;

package/BaseEditor/defaultConfig/Toolbar/InsertElements/GridItem.js

@@ -0,0 +1,24 @@
+import react from "react";
+import { Icon } from "@webiny/admin-ui";
+import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
+import { InlineSvg } from "./InlineSvg.js";
+const useComponent = (name)=>useSelectFromEditor((state)=>state.components?.[name]);
+const GridItem = ({ item })=>{
+    const component = useComponent(item.name);
+    if (!component) return /*#__PURE__*/ react.createElement(react.Fragment, null);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col items-center justify-center gap-sm px-sm py-md bg-neutral-light rounded-lg cursor-grab fill-neutral-strong w-[80px] min-h-[80px]"
+    }, /*#__PURE__*/ react.createElement(Icon, {
+        label: "Icon",
+        icon: /*#__PURE__*/ react.createElement(InlineSvg, {
+            src: component.image
+        }),
+        size: "lg",
+        color: "neutral-strong"
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "text-sm font-medium text-neutral-strong text-center leading-tight"
+    }, component.label ?? component.name));
+};
+export { GridItem };
+
+//# sourceMappingURL=GridItem.js.map

package/BaseEditor/defaultConfig/Toolbar/InsertElements/GridItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/InsertElements/GridItem.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/InsertElements/GridItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport type { ComponentGroupItem, ComponentManifest } from \"@webiny/website-builder-sdk\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { InlineSvg } from \"./InlineSvg.js\";\n\nconst useComponent = (name: string) => {\n    return useSelectFromEditor<ComponentManifest | undefined>(state => state.components?.[name]);\n};\n\nexport const GridItem = ({ item }: { item: ComponentGroupItem }) => {\n    const component = useComponent(item.name);\n    if (!component) {\n        return <></>;\n    }\n\n    return (\n        <div className=\"flex flex-col items-center justify-center gap-sm px-sm py-md bg-neutral-light rounded-lg cursor-grab fill-neutral-strong w-[80px] min-h-[80px]\">\n            <Icon\n                label=\"Icon\"\n                icon={<InlineSvg src={component.image!} />}\n                size={\"lg\"}\n                color={\"neutral-strong\"}\n            />\n            <div className=\"text-sm font-medium text-neutral-strong text-center leading-tight\">\n                {component.label ?? component.name}\n            </div>\n        </div>\n    );\n};\n"],"names":["useComponent","name","useSelectFromEditor","state","GridItem","item","component","Icon","InlineSvg"],"mappings":";;;;AAMA,MAAMA,eAAe,CAACC,OACXC,oBAAmDC,CAAAA,QAASA,MAAM,UAAU,EAAE,CAACF,KAAK;AAGxF,MAAMG,WAAW,CAAC,EAAEC,IAAI,EAAgC;IAC3D,MAAMC,YAAYN,aAAaK,KAAK,IAAI;IACxC,IAAI,CAACC,WACD,OAAO,WAAP,GAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACC,MAAIA;QACD,OAAM;QACN,oBAAM,oBAACC,WAASA;YAAC,KAAKF,UAAU,KAAK;;QACrC,MAAM;QACN,OAAO;sBAEX,oBAAC;QAAI,WAAU;OACVA,UAAU,KAAK,IAAIA,UAAU,IAAI;AAIlD"}

package/BaseEditor/defaultConfig/Toolbar/InsertElements/GroupItemsGrid.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ComponentGroupItem } from "@webiny/website-builder-sdk";
+interface GroupItemsGridProps {
+    items: ComponentGroupItem[];
+}
+export declare const GroupItemsGrid: ({ items }: GroupItemsGridProps) => React.JSX.Element;
+export {};

package/BaseEditor/defaultConfig/Toolbar/InsertElements/GroupItemsGrid.js

@@ -0,0 +1,18 @@
+import react from "react";
+import { Draggable } from "../../../components/Draggable.js";
+import { GridItem } from "./GridItem.js";
+const GroupItemsGrid = ({ items })=>/*#__PURE__*/ react.createElement("div", {
+        className: "grid grid-cols-3 gap-sm px-lg py-sm",
+        "data-role": "group-items"
+    }, items.map((item)=>/*#__PURE__*/ react.createElement(Draggable, {
+            key: item.name,
+            type: "ELEMENT",
+            item: {
+                componentName: item.name
+            }
+        }, ({ dragRef })=>dragRef(/*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(GridItem, {
+                item: item
+            }))))));
+export { GroupItemsGrid };
+
+//# sourceMappingURL=GroupItemsGrid.js.map

package/BaseEditor/defaultConfig/Toolbar/InsertElements/GroupItemsGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/InsertElements/GroupItemsGrid.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/InsertElements/GroupItemsGrid.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ComponentGroupItem } from \"@webiny/website-builder-sdk\";\nimport { Draggable } from \"~/BaseEditor/components/Draggable.js\";\nimport { GridItem } from \"./GridItem.js\";\n\ninterface GroupItemsGridProps {\n    items: ComponentGroupItem[];\n}\n\nexport const GroupItemsGrid = ({ items }: GroupItemsGridProps) => (\n    <div className={\"grid grid-cols-3 gap-sm px-lg py-sm\"} data-role={\"group-items\"}>\n        {items.map(item => (\n            <Draggable key={item.name} type=\"ELEMENT\" item={{ componentName: item.name }}>\n                {({ dragRef }) =>\n                    dragRef(\n                        <div>\n                            <GridItem item={item} />\n                        </div>\n                    )\n                }\n            </Draggable>\n        ))}\n    </div>\n);\n"],"names":["GroupItemsGrid","items","item","Draggable","dragRef","GridItem"],"mappings":";;;AASO,MAAMA,iBAAiB,CAAC,EAAEC,KAAK,EAAuB,iBACzD,oBAAC;QAAI,WAAW;QAAuC,aAAW;OAC7DA,MAAM,GAAG,CAACC,CAAAA,OAAAA,WAAAA,GACP,oBAACC,WAASA;YAAC,KAAKD,KAAK,IAAI;YAAE,MAAK;YAAU,MAAM;gBAAE,eAAeA,KAAK,IAAI;YAAC;WACtE,CAAC,EAAEE,OAAO,EAAE,GACTA,QAAQ,WAARA,GACI,oBAAC,2BACG,oBAACC,UAAQA;gBAAC,MAAMH"}

package/BaseEditor/defaultConfig/Toolbar/InsertElements/GroupItemsList.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ComponentGroupItem } from "@webiny/website-builder-sdk";
+interface GroupItemsListProps {
+    items: ComponentGroupItem[];
+}
+export declare const GroupItemsList: ({ items }: GroupItemsListProps) => React.JSX.Element;
+export {};

package/BaseEditor/defaultConfig/Toolbar/InsertElements/GroupItemsList.js

@@ -0,0 +1,18 @@
+import react from "react";
+import { Draggable } from "../../../components/Draggable.js";
+import { ListItem } from "./ListItem.js";
+const GroupItemsList = ({ items })=>/*#__PURE__*/ react.createElement("div", {
+        className: "py-sm px-xl flex flex-col gap-y-xs",
+        "data-role": "group-items"
+    }, items.map((item)=>/*#__PURE__*/ react.createElement(Draggable, {
+            key: item.name,
+            type: "ELEMENT",
+            item: {
+                componentName: item.name
+            }
+        }, ({ dragRef })=>dragRef(/*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(ListItem, {
+                item: item
+            }))))));
+export { GroupItemsList };
+
+//# sourceMappingURL=GroupItemsList.js.map

package/BaseEditor/defaultConfig/Toolbar/InsertElements/GroupItemsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/InsertElements/GroupItemsList.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/InsertElements/GroupItemsList.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ComponentGroupItem } from \"@webiny/website-builder-sdk\";\nimport { Draggable } from \"~/BaseEditor/components/Draggable.js\";\nimport { ListItem } from \"./ListItem.js\";\n\ninterface GroupItemsListProps {\n    items: ComponentGroupItem[];\n}\n\nexport const GroupItemsList = ({ items }: GroupItemsListProps) => (\n    <div className={\"py-sm px-xl flex flex-col gap-y-xs\"} data-role={\"group-items\"}>\n        {items.map(item => (\n            <Draggable key={item.name} type=\"ELEMENT\" item={{ componentName: item.name }}>\n                {({ dragRef }) =>\n                    dragRef(\n                        <div>\n                            <ListItem item={item} />\n                        </div>\n                    )\n                }\n            </Draggable>\n        ))}\n    </div>\n);\n"],"names":["GroupItemsList","items","item","Draggable","dragRef","ListItem"],"mappings":";;;AASO,MAAMA,iBAAiB,CAAC,EAAEC,KAAK,EAAuB,iBACzD,oBAAC;QAAI,WAAW;QAAsC,aAAW;OAC5DA,MAAM,GAAG,CAACC,CAAAA,OAAAA,WAAAA,GACP,oBAACC,WAASA;YAAC,KAAKD,KAAK,IAAI;YAAE,MAAK;YAAU,MAAM;gBAAE,eAAeA,KAAK,IAAI;YAAC;WACtE,CAAC,EAAEE,OAAO,EAAE,GACTA,QAAQ,WAARA,GACI,oBAAC,2BACG,oBAACC,UAAQA;gBAAC,MAAMH"}

package/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js

@@ -1,34 +1,29 @@
-import React, { useCallback, useEffect, useRef } from "react";
-export const InlineSvg = ({
-  src,
-  className = ""
-}) => {
-  const ref = useRef(null);
-  const setSvg = useCallback(svg => {
-    if (ref.current) {
-      const domParser = new DOMParser();
-      const svgElement = domParser.parseFromString(svg, "image/svg+xml");
-      if (className.length > 0) {
-        svgElement.documentElement.classList.add(...className.split(" "));
-      }
-      ref.current.innerHTML = svgElement.documentElement.outerHTML;
-    }
-  }, []);
-  useEffect(() => {
-    if (src.startsWith("<svg") && ref.current) {
-      setSvg(src);
-      return;
-    }
-    if (src.startsWith("data:image/svg+xml")) {
-      const base64 = src.split(",")[1];
-      setSvg(atob(base64));
-      return;
-    }
-    fetch(src).then(res => res.text()).then(svg => setSvg(svg)).catch(console.error);
-  }, [src]);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref
-  });
+import react, { useCallback, useEffect, useRef } from "react";
+const InlineSvg = ({ src, className = "" })=>{
+    const ref = useRef(null);
+    const setSvg = useCallback((svg)=>{
+        if (ref.current) {
+            const domParser = new DOMParser();
+            const svgElement = domParser.parseFromString(svg, "image/svg+xml");
+            if (className.length > 0) svgElement.documentElement.classList.add(...className.split(" "));
+            ref.current.innerHTML = svgElement.documentElement.outerHTML;
+        }
+    }, []);
+    useEffect(()=>{
+        if (src.startsWith("<svg") && ref.current) return void setSvg(src);
+        if (src.startsWith("data:image/svg+xml")) {
+            const base64 = src.split(",")[1];
+            setSvg(atob(base64));
+            return;
+        }
+        fetch(src).then((res)=>res.text()).then((svg)=>setSvg(svg)).catch(console.error);
+    }, [
+        src
+    ]);
+    return /*#__PURE__*/ react.createElement("div", {
+        ref: ref
+    });
 };
+export { InlineSvg };
 
 //# sourceMappingURL=InlineSvg.js.map

package/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useRef","InlineSvg","src","className","ref","setSvg","svg","current","domParser","DOMParser","svgElement","parseFromString","length","documentElement","classList","add","split","innerHTML","outerHTML","startsWith","base64","atob","fetch","then","res","text","catch","console","error","createElement"],"sources":["InlineSvg.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from \"react\";\n\ninterface InlineSvgProps {\n    src: string;\n    className?: string;\n}\n\nexport const InlineSvg = ({ src, className = \"\" }: InlineSvgProps) => {\n    const ref = useRef<HTMLObjectElement | null>(null);\n\n    const setSvg = useCallback((svg: string) => {\n        if (ref.current) {\n            const domParser = new DOMParser();\n            const svgElement = domParser.parseFromString(svg, \"image/svg+xml\");\n\n            if (className.length > 0) {\n                svgElement.documentElement.classList.add(...className.split(\" \"));\n            }\n            ref.current.innerHTML = svgElement.documentElement.outerHTML;\n        }\n    }, []);\n\n    useEffect(() => {\n        if (src.startsWith(\"<svg\") && ref.current) {\n            setSvg(src);\n            return;\n        }\n\n        if (src.startsWith(\"data:image/svg+xml\")) {\n            const base64 = src.split(\",\")[1];\n            setSvg(atob(base64));\n            return;\n        }\n\n        fetch(src)\n            .then(res => res.text())\n            .then(svg => setSvg(svg))\n            .catch(console.error);\n    }, [src]);\n\n    return <div ref={ref} />;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAO7D,OAAO,MAAMC,SAAS,GAAGA,CAAC;EAAEC,GAAG;EAAEC,SAAS,GAAG;AAAmB,CAAC,KAAK;EAClE,MAAMC,GAAG,GAAGJ,MAAM,CAA2B,IAAI,CAAC;EAElD,MAAMK,MAAM,GAAGP,WAAW,CAAEQ,GAAW,IAAK;IACxC,IAAIF,GAAG,CAACG,OAAO,EAAE;MACb,MAAMC,SAAS,GAAG,IAAIC,SAAS,CAAC,CAAC;MACjC,MAAMC,UAAU,GAAGF,SAAS,CAACG,eAAe,CAACL,GAAG,EAAE,eAAe,CAAC;MAElE,IAAIH,SAAS,CAACS,MAAM,GAAG,CAAC,EAAE;QACtBF,UAAU,CAACG,eAAe,CAACC,SAAS,CAACC,GAAG,CAAC,GAAGZ,SAAS,CAACa,KAAK,CAAC,GAAG,CAAC,CAAC;MACrE;MACAZ,GAAG,CAACG,OAAO,CAACU,SAAS,GAAGP,UAAU,CAACG,eAAe,CAACK,SAAS;IAChE;EACJ,CAAC,EAAE,EAAE,CAAC;EAENnB,SAAS,CAAC,MAAM;IACZ,IAAIG,GAAG,CAACiB,UAAU,CAAC,MAAM,CAAC,IAAIf,GAAG,CAACG,OAAO,EAAE;MACvCF,MAAM,CAACH,GAAG,CAAC;MACX;IACJ;IAEA,IAAIA,GAAG,CAACiB,UAAU,CAAC,oBAAoB,CAAC,EAAE;MACtC,MAAMC,MAAM,GAAGlB,GAAG,CAACc,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;MAChCX,MAAM,CAACgB,IAAI,CAACD,MAAM,CAAC,CAAC;MACpB;IACJ;IAEAE,KAAK,CAACpB,GAAG,CAAC,CACLqB,IAAI,CAACC,GAAG,IAAIA,GAAG,CAACC,IAAI,CAAC,CAAC,CAAC,CACvBF,IAAI,CAACjB,GAAG,IAAID,MAAM,CAACC,GAAG,CAAC,CAAC,CACxBoB,KAAK,CAACC,OAAO,CAACC,KAAK,CAAC;EAC7B,CAAC,EAAE,CAAC1B,GAAG,CAAC,CAAC;EAET,oBAAOL,KAAA,CAAAgC,aAAA;IAAKzB,GAAG,EAAEA;EAAI,CAAE,CAAC;AAC5B,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from \"react\";\n\ninterface InlineSvgProps {\n    src: string;\n    className?: string;\n}\n\nexport const InlineSvg = ({ src, className = \"\" }: InlineSvgProps) => {\n    const ref = useRef<HTMLObjectElement | null>(null);\n\n    const setSvg = useCallback((svg: string) => {\n        if (ref.current) {\n            const domParser = new DOMParser();\n            const svgElement = domParser.parseFromString(svg, \"image/svg+xml\");\n\n            if (className.length > 0) {\n                svgElement.documentElement.classList.add(...className.split(\" \"));\n            }\n            ref.current.innerHTML = svgElement.documentElement.outerHTML;\n        }\n    }, []);\n\n    useEffect(() => {\n        if (src.startsWith(\"<svg\") && ref.current) {\n            setSvg(src);\n            return;\n        }\n\n        if (src.startsWith(\"data:image/svg+xml\")) {\n            const base64 = src.split(\",\")[1];\n            setSvg(atob(base64));\n            return;\n        }\n\n        fetch(src)\n            .then(res => res.text())\n            .then(svg => setSvg(svg))\n            .catch(console.error);\n    }, [src]);\n\n    return <div ref={ref} />;\n};\n"],"names":["InlineSvg","src","className","ref","useRef","setSvg","useCallback","svg","domParser","DOMParser","svgElement","useEffect","base64","atob","fetch","res","console"],"mappings":";AAOO,MAAMA,YAAY,CAAC,EAAEC,GAAG,EAAEC,YAAY,EAAE,EAAkB;IAC7D,MAAMC,MAAMC,OAAiC;IAE7C,MAAMC,SAASC,YAAY,CAACC;QACxB,IAAIJ,IAAI,OAAO,EAAE;YACb,MAAMK,YAAY,IAAIC;YACtB,MAAMC,aAAaF,UAAU,eAAe,CAACD,KAAK;YAElD,IAAIL,UAAU,MAAM,GAAG,GACnBQ,WAAW,eAAe,CAAC,SAAS,CAAC,GAAG,IAAIR,UAAU,KAAK,CAAC;YAEhEC,IAAI,OAAO,CAAC,SAAS,GAAGO,WAAW,eAAe,CAAC,SAAS;QAChE;IACJ,GAAG,EAAE;IAELC,UAAU;QACN,IAAIV,IAAI,UAAU,CAAC,WAAWE,IAAI,OAAO,EAAE,YACvCE,OAAOJ;QAIX,IAAIA,IAAI,UAAU,CAAC,uBAAuB;YACtC,MAAMW,SAASX,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE;YAChCI,OAAOQ,KAAKD;YACZ;QACJ;QAEAE,MAAMb,KACD,IAAI,CAACc,CAAAA,MAAOA,IAAI,IAAI,IACpB,IAAI,CAACR,CAAAA,MAAOF,OAAOE,MACnB,KAAK,CAACS,QAAQ,KAAK;IAC5B,GAAG;QAACf;KAAI;IAER,OAAO,WAAP,GAAO,oBAAC;QAAI,KAAKE;;AACrB"}