@webiny/app-website-builder 6.3.0-beta.4 → 6.4.0-beta.0

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useRepeatValue.js

@@ -2,27 +2,29 @@ import set from "lodash/set.js";
 import { useCallback } from "react";
 import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument.js";
 import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
-export const useRepeatValue = elementId => {
-  const editor = useDocumentEditor();
-  const value = useSelectFromDocument(document => {
-    const bindings = document.bindings[elementId] || {};
-    return bindings.$repeat?.expression;
-  }, [elementId]);
-  const onChange = useCallback(value => {
-    editor.updateDocument(document => {
-      const bindings = document.bindings[elementId] ?? {};
-      if (!value) {
-        delete bindings.$repeat;
-      } else {
-        set(bindings, "$repeat.expression", value);
-      }
-      document.bindings[elementId] = bindings;
-    });
-  }, [elementId]);
-  return {
-    value,
-    onChange
-  };
+const useRepeatValue = (elementId)=>{
+    const editor = useDocumentEditor();
+    const value = useSelectFromDocument((document)=>{
+        const bindings = document.bindings[elementId] || {};
+        return bindings.$repeat?.expression;
+    }, [
+        elementId
+    ]);
+    const onChange = useCallback((value)=>{
+        editor.updateDocument((document)=>{
+            const bindings = document.bindings[elementId] ?? {};
+            if (value) set(bindings, "$repeat.expression", value);
+            else delete bindings.$repeat;
+            document.bindings[elementId] = bindings;
+        });
+    }, [
+        elementId
+    ]);
+    return {
+        value,
+        onChange
+    };
 };
+export { useRepeatValue };
 
 //# sourceMappingURL=useRepeatValue.js.map

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useRepeatValue.js.map

@@ -1 +1 @@
-{"version":3,"names":["set","useCallback","useSelectFromDocument","useDocumentEditor","useRepeatValue","elementId","editor","value","document","bindings","$repeat","expression","onChange","updateDocument"],"sources":["useRepeatValue.ts"],"sourcesContent":["import set from \"lodash/set.js\";\nimport { useCallback } from \"react\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\n\nexport const useRepeatValue = (elementId: string) => {\n    const editor = useDocumentEditor();\n\n    const value = useSelectFromDocument(\n        document => {\n            const bindings = document.bindings[elementId] || {};\n\n            return bindings.$repeat?.expression;\n        },\n        [elementId]\n    );\n\n    const onChange = useCallback(\n        (value: string | undefined) => {\n            editor.updateDocument(document => {\n                const bindings = document.bindings[elementId] ?? {};\n                if (!value) {\n                    delete bindings.$repeat;\n                } else {\n                    set(bindings, \"$repeat.expression\", value);\n                }\n\n                document.bindings[elementId] = bindings;\n            });\n        },\n        [elementId]\n    );\n\n    return { value, onChange };\n};\n"],"mappings":"AAAA,OAAOA,GAAG,MAAM,eAAe;AAC/B,SAASC,WAAW,QAAQ,OAAO;AACnC,SAASC,qBAAqB;AAC9B,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,cAAc,GAAIC,SAAiB,IAAK;EACjD,MAAMC,MAAM,GAAGH,iBAAiB,CAAC,CAAC;EAElC,MAAMI,KAAK,GAAGL,qBAAqB,CAC/BM,QAAQ,IAAI;IACR,MAAMC,QAAQ,GAAGD,QAAQ,CAACC,QAAQ,CAACJ,SAAS,CAAC,IAAI,CAAC,CAAC;IAEnD,OAAOI,QAAQ,CAACC,OAAO,EAAEC,UAAU;EACvC,CAAC,EACD,CAACN,SAAS,CACd,CAAC;EAED,MAAMO,QAAQ,GAAGX,WAAW,CACvBM,KAAyB,IAAK;IAC3BD,MAAM,CAACO,cAAc,CAACL,QAAQ,IAAI;MAC9B,MAAMC,QAAQ,GAAGD,QAAQ,CAACC,QAAQ,CAACJ,SAAS,CAAC,IAAI,CAAC,CAAC;MACnD,IAAI,CAACE,KAAK,EAAE;QACR,OAAOE,QAAQ,CAACC,OAAO;MAC3B,CAAC,MAAM;QACHV,GAAG,CAACS,QAAQ,EAAE,oBAAoB,EAAEF,KAAK,CAAC;MAC9C;MAEAC,QAAQ,CAACC,QAAQ,CAACJ,SAAS,CAAC,GAAGI,QAAQ;IAC3C,CAAC,CAAC;EACN,CAAC,EACD,CAACJ,SAAS,CACd,CAAC;EAED,OAAO;IAAEE,KAAK;IAAEK;EAAS,CAAC;AAC9B,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/useRepeatValue.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/useRepeatValue.ts"],"sourcesContent":["import set from \"lodash/set.js\";\nimport { useCallback } from \"react\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\n\nexport const useRepeatValue = (elementId: string) => {\n    const editor = useDocumentEditor();\n\n    const value = useSelectFromDocument(\n        document => {\n            const bindings = document.bindings[elementId] || {};\n\n            return bindings.$repeat?.expression;\n        },\n        [elementId]\n    );\n\n    const onChange = useCallback(\n        (value: string | undefined) => {\n            editor.updateDocument(document => {\n                const bindings = document.bindings[elementId] ?? {};\n                if (!value) {\n                    delete bindings.$repeat;\n                } else {\n                    set(bindings, \"$repeat.expression\", value);\n                }\n\n                document.bindings[elementId] = bindings;\n            });\n        },\n        [elementId]\n    );\n\n    return { value, onChange };\n};\n"],"names":["useRepeatValue","elementId","editor","useDocumentEditor","value","useSelectFromDocument","document","bindings","onChange","useCallback","set"],"mappings":";;;;AAKO,MAAMA,iBAAiB,CAACC;IAC3B,MAAMC,SAASC;IAEf,MAAMC,QAAQC,sBACVC,CAAAA;QACI,MAAMC,WAAWD,SAAS,QAAQ,CAACL,UAAU,IAAI,CAAC;QAElD,OAAOM,SAAS,OAAO,EAAE;IAC7B,GACA;QAACN;KAAU;IAGf,MAAMO,WAAWC,YACb,CAACL;QACGF,OAAO,cAAc,CAACI,CAAAA;YAClB,MAAMC,WAAWD,SAAS,QAAQ,CAACL,UAAU,IAAI,CAAC;YAClD,IAAKG,OAGDM,IAAIH,UAAU,sBAAsBH;iBAFpC,OAAOG,SAAS,OAAO;YAK3BD,SAAS,QAAQ,CAACL,UAAU,GAAGM;QACnC;IACJ,GACA;QAACN;KAAU;IAGf,OAAO;QAAEG;QAAOI;IAAS;AAC7B"}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useStateArrays.js

@@ -1,9 +1,6 @@
 import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument.js";
 import { StatePathsExtractor } from "./StatePathsExtractor.js";
-export const useStateArrays = () => {
-  return useSelectFromDocument(document => {
-    return new StatePathsExtractor(document.state).getPaths().filter(option => option.type.isArray()).values();
-  });
-};
+const useStateArrays = ()=>useSelectFromDocument((document)=>new StatePathsExtractor(document.state).getPaths().filter((option)=>option.type.isArray()).values());
+export { useStateArrays };
 
 //# sourceMappingURL=useStateArrays.js.map

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useStateArrays.js.map

@@ -1 +1 @@
-{"version":3,"names":["useSelectFromDocument","StatePathsExtractor","useStateArrays","document","state","getPaths","filter","option","type","isArray","values"],"sources":["useStateArrays.ts"],"sourcesContent":["import { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { StatePathsExtractor } from \"~/BaseEditor/defaultConfig/Sidebar/ElementSettings/StatePathsExtractor.js\";\n\nexport const useStateArrays = () => {\n    return useSelectFromDocument(document => {\n        return new StatePathsExtractor(document.state)\n            .getPaths()\n            .filter(option => option.type.isArray())\n            .values();\n    });\n};\n"],"mappings":"AAAA,SAASA,qBAAqB;AAC9B,SAASC,mBAAmB;AAE5B,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAChC,OAAOF,qBAAqB,CAACG,QAAQ,IAAI;IACrC,OAAO,IAAIF,mBAAmB,CAACE,QAAQ,CAACC,KAAK,CAAC,CACzCC,QAAQ,CAAC,CAAC,CACVC,MAAM,CAACC,MAAM,IAAIA,MAAM,CAACC,IAAI,CAACC,OAAO,CAAC,CAAC,CAAC,CACvCC,MAAM,CAAC,CAAC;EACjB,CAAC,CAAC;AACN,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/useStateArrays.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/useStateArrays.ts"],"sourcesContent":["import { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { StatePathsExtractor } from \"~/BaseEditor/defaultConfig/Sidebar/ElementSettings/StatePathsExtractor.js\";\n\nexport const useStateArrays = () => {\n    return useSelectFromDocument(document => {\n        return new StatePathsExtractor(document.state)\n            .getPaths()\n            .filter(option => option.type.isArray())\n            .values();\n    });\n};\n"],"names":["useStateArrays","useSelectFromDocument","document","StatePathsExtractor","option"],"mappings":";;AAGO,MAAMA,iBAAiB,IACnBC,sBAAsBC,CAAAA,WAClB,IAAIC,oBAAoBD,SAAS,KAAK,EACxC,QAAQ,GACR,MAAM,CAACE,CAAAA,SAAUA,OAAO,IAAI,CAAC,OAAO,IACpC,MAAM"}

package/BaseEditor/defaultConfig/Sidebar/InfoMessage.js

@@ -1,20 +1,16 @@
-import React from "react";
-import { Text, Icon } from "@webiny/admin-ui";
-export const InfoMessage = ({
-  message,
-  icon
-}) => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "bg-neutral-dimmed p-md flex flex-col items-center"
-  }, icon && /*#__PURE__*/React.createElement(Icon, {
-    label: "Select an element",
-    size: "lg",
-    icon: icon,
-    color: "neutral-light"
-  }), /*#__PURE__*/React.createElement(Text, {
-    size: "md",
-    className: "text-center text-neutral-dimmed my-sm"
-  }, message));
-};
+import react from "react";
+import { Icon, Text } from "@webiny/admin-ui";
+const InfoMessage = ({ message, icon })=>/*#__PURE__*/ react.createElement("div", {
+        className: "bg-neutral-dimmed p-md flex flex-col items-center"
+    }, icon && /*#__PURE__*/ react.createElement(Icon, {
+        label: "Select an element",
+        size: "lg",
+        icon: icon,
+        color: "neutral-light"
+    }), /*#__PURE__*/ react.createElement(Text, {
+        size: "md",
+        className: "text-center text-neutral-dimmed my-sm"
+    }, message));
+export { InfoMessage };
 
 //# sourceMappingURL=InfoMessage.js.map

package/BaseEditor/defaultConfig/Sidebar/InfoMessage.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","Icon","InfoMessage","message","icon","createElement","className","label","size","color"],"sources":["InfoMessage.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport React from \"react\";\nimport { Text, Icon } from \"@webiny/admin-ui\";\n\nexport interface InfoMessageProps {\n    message: string;\n    icon?: ReactElement;\n}\n\nexport const InfoMessage = ({ message, icon }: InfoMessageProps) => {\n    return (\n        <div className={\"bg-neutral-dimmed p-md flex flex-col items-center\"}>\n            {icon && (\n                <Icon label=\"Select an element\" size={\"lg\"} icon={icon} color={\"neutral-light\"} />\n            )}\n            <Text size={\"md\"} className={\"text-center text-neutral-dimmed my-sm\"}>\n                {message}\n            </Text>\n        </div>\n    );\n};\n"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;AAO7C,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAAEC,OAAO;EAAEC;AAAuB,CAAC,KAAK;EAChE,oBACIL,KAAA,CAAAM,aAAA;IAAKC,SAAS,EAAE;EAAoD,GAC/DF,IAAI,iBACDL,KAAA,CAAAM,aAAA,CAACJ,IAAI;IAACM,KAAK,EAAC,mBAAmB;IAACC,IAAI,EAAE,IAAK;IAACJ,IAAI,EAAEA,IAAK;IAACK,KAAK,EAAE;EAAgB,CAAE,CACpF,eACDV,KAAA,CAAAM,aAAA,CAACL,IAAI;IAACQ,IAAI,EAAE,IAAK;IAACF,SAAS,EAAE;EAAwC,GAChEH,OACC,CACL,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/InfoMessage.js","sources":["../../../../src/BaseEditor/defaultConfig/Sidebar/InfoMessage.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport React from \"react\";\nimport { Text, Icon } from \"@webiny/admin-ui\";\n\nexport interface InfoMessageProps {\n    message: string;\n    icon?: ReactElement;\n}\n\nexport const InfoMessage = ({ message, icon }: InfoMessageProps) => {\n    return (\n        <div className={\"bg-neutral-dimmed p-md flex flex-col items-center\"}>\n            {icon && (\n                <Icon label=\"Select an element\" size={\"lg\"} icon={icon} color={\"neutral-light\"} />\n            )}\n            <Text size={\"md\"} className={\"text-center text-neutral-dimmed my-sm\"}>\n                {message}\n            </Text>\n        </div>\n    );\n};\n"],"names":["InfoMessage","message","icon","Icon","Text"],"mappings":";;AASO,MAAMA,cAAc,CAAC,EAAEC,OAAO,EAAEC,IAAI,EAAoB,GACpD,WAAP,GACI,oBAAC;QAAI,WAAW;OACXA,QAAQ,WAARA,GACG,oBAACC,MAAIA;QAAC,OAAM;QAAoB,MAAM;QAAM,MAAMD;QAAM,OAAO;sBAEnE,oBAACE,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBH"}

package/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js

@@ -1,89 +1,77 @@
-import React, { useMemo } from "react";
-import { Text, Tag, Icon, Button, Separator, DropdownMenu, FormComponentLabel } from "@webiny/admin-ui";
+import react, { useMemo } from "react";
+import { Button, DropdownMenu, FormComponentLabel, Icon, Separator, Tag, Text } from "@webiny/admin-ui";
 import { useBreakpoint } from "../../hooks/useBreakpoint.js";
 import { InlineSvg } from "../Toolbar/InsertElements/InlineSvg.js";
-const getBreakpointIcon = (breakpoints, name) => {
-  const bp = breakpoints.find(breakpoint => breakpoint.name === name);
-  return bp ? /*#__PURE__*/React.createElement(InlineSvg, {
-    src: bp.icon
-  }) : null;
+const getBreakpointIcon = (breakpoints, name)=>{
+    const bp = breakpoints.find((breakpoint)=>breakpoint.name === name);
+    return bp ? /*#__PURE__*/ react.createElement(InlineSvg, {
+        src: bp.icon
+    }) : null;
 };
 const iconClassName = "cursor-pointer mr-xs mb-xxs";
-export const InheritanceLabel = ({
-  inheritedFrom,
-  isOverridden,
-  text,
-  onReset
-}) => {
-  const {
-    breakpoint,
-    breakpoints,
-    isBaseBreakpoint
-  } = useBreakpoint();
-  const baseBreakpoint = breakpoints[0];
-  const icon = useMemo(() => {
-    const bp = inheritedFrom ?? baseBreakpoint.name;
-    return getBreakpointIcon(breakpoints, bp);
-  }, [inheritedFrom, breakpoint.name, breakpoints.length]);
-  if (isBaseBreakpoint) {
-    return /*#__PURE__*/React.createElement(FormComponentLabel, {
-      text: text
+const InheritanceLabel = ({ inheritedFrom, isOverridden, text, onReset })=>{
+    const { breakpoint, breakpoints, isBaseBreakpoint } = useBreakpoint();
+    const baseBreakpoint = breakpoints[0];
+    const icon = useMemo(()=>{
+        const bp = inheritedFrom ?? baseBreakpoint.name;
+        return getBreakpointIcon(breakpoints, bp);
+    }, [
+        inheritedFrom,
+        breakpoint.name,
+        breakpoints.length
+    ]);
+    if (isBaseBreakpoint) return /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        text: text
     });
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center"
-  }, /*#__PURE__*/React.createElement(DropdownMenu, {
-    trigger: /*#__PURE__*/React.createElement(Icon, {
-      icon: icon,
-      label: "",
-      size: "sm",
-      color: isOverridden ? "accent" : "neutral-strong",
-      className: iconClassName
-    }),
-    align: "center",
-    side: "bottom",
-    className: "wy-p-sm shadow-lg"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "p-sm text-sm",
-    style: {
-      width: 200
-    }
-  }, /*#__PURE__*/React.createElement(InheritedFrom, {
-    inheritedFrom: inheritedFrom ?? baseBreakpoint.name,
-    overriddenAt: isOverridden ? breakpoint.name : null,
-    onReset: onReset
-  }))), /*#__PURE__*/React.createElement(FormComponentLabel, {
-    text: text
-  }));
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center"
+    }, /*#__PURE__*/ react.createElement(DropdownMenu, {
+        trigger: /*#__PURE__*/ react.createElement(Icon, {
+            icon: icon,
+            label: "",
+            size: "sm",
+            color: isOverridden ? "accent" : "neutral-strong",
+            className: iconClassName
+        }),
+        align: "center",
+        side: "bottom",
+        className: "wy-p-sm shadow-lg"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "p-sm text-sm",
+        style: {
+            width: 200
+        }
+    }, /*#__PURE__*/ react.createElement(InheritedFrom, {
+        inheritedFrom: inheritedFrom ?? baseBreakpoint.name,
+        overriddenAt: isOverridden ? breakpoint.name : null,
+        onReset: onReset
+    }))), /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        text: text
+    }));
 };
-export const InheritedFrom = ({
-  overriddenAt,
-  inheritedFrom,
-  onReset
-}) => {
-  if (overriddenAt) {
-    return /*#__PURE__*/React.createElement("div", null, "This value is set on the current breakpoint.", /*#__PURE__*/React.createElement(Separator, {
-      variant: "dimmed",
-      margin: "lg"
-    }), /*#__PURE__*/React.createElement(Button, {
-      variant: "primary",
-      onClick: onReset,
-      text: "Reset value",
-      size: "sm"
-    }), /*#__PURE__*/React.createElement(Separator, {
-      variant: "dimmed",
-      margin: "lg"
-    }), "Resetting will inherit the value from the", " ", /*#__PURE__*/React.createElement(Tag, {
-      variant: "neutral-muted",
-      content: inheritedFrom
+const InheritedFrom = ({ overriddenAt, inheritedFrom, onReset })=>{
+    if (overriddenAt) return /*#__PURE__*/ react.createElement("div", null, "This value is set on the current breakpoint.", /*#__PURE__*/ react.createElement(Separator, {
+        variant: "dimmed",
+        margin: "lg"
+    }), /*#__PURE__*/ react.createElement(Button, {
+        variant: "primary",
+        onClick: onReset,
+        text: "Reset value",
+        size: "sm"
+    }), /*#__PURE__*/ react.createElement(Separator, {
+        variant: "dimmed",
+        margin: "lg"
+    }), "Resetting will inherit the value from the", " ", /*#__PURE__*/ react.createElement(Tag, {
+        variant: "neutral-muted",
+        content: inheritedFrom
+    }), " breakpoint.");
+    return /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, "This value is inherited from the", " ", /*#__PURE__*/ react.createElement(Tag, {
+        variant: "neutral-muted",
+        content: inheritedFrom
     }), " breakpoint.");
-  }
-  return /*#__PURE__*/React.createElement(Text, {
-    size: "sm"
-  }, "This value is inherited from the", " ", /*#__PURE__*/React.createElement(Tag, {
-    variant: "neutral-muted",
-    content: inheritedFrom
-  }), " breakpoint.");
 };
+export { InheritanceLabel, InheritedFrom };
 
 //# sourceMappingURL=InheritanceLabel.js.map

package/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","Text","Tag","Icon","Button","Separator","DropdownMenu","FormComponentLabel","useBreakpoint","InlineSvg","getBreakpointIcon","breakpoints","name","bp","find","breakpoint","createElement","src","icon","iconClassName","InheritanceLabel","inheritedFrom","isOverridden","text","onReset","isBaseBreakpoint","baseBreakpoint","length","className","trigger","label","size","color","align","side","style","width","InheritedFrom","overriddenAt","variant","margin","onClick","content"],"sources":["InheritanceLabel.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n    Text,\n    Tag,\n    Icon,\n    Button,\n    Separator,\n    DropdownMenu,\n    FormComponentLabel\n} from \"@webiny/admin-ui\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\nimport type { Breakpoint } from \"@webiny/website-builder-sdk\";\n\nexport interface InheritanceLabelProps {\n    text: React.ReactNode;\n    isOverridden: boolean;\n    onReset: () => void;\n    inheritedFrom?: string;\n}\n\nconst getBreakpointIcon = (breakpoints: Breakpoint[], name: string) => {\n    const bp = breakpoints.find(breakpoint => breakpoint.name === name);\n    return bp ? <InlineSvg src={bp.icon} /> : null;\n};\n\nconst iconClassName = \"cursor-pointer mr-xs mb-xxs\";\n\nexport const InheritanceLabel = ({\n    inheritedFrom,\n    isOverridden,\n    text,\n    onReset\n}: InheritanceLabelProps) => {\n    const { breakpoint, breakpoints, isBaseBreakpoint } = useBreakpoint();\n    const baseBreakpoint = breakpoints[0];\n\n    const icon = useMemo(() => {\n        const bp = inheritedFrom ?? baseBreakpoint.name;\n        return getBreakpointIcon(breakpoints, bp);\n    }, [inheritedFrom, breakpoint.name, breakpoints.length]);\n\n    if (isBaseBreakpoint) {\n        return <FormComponentLabel text={text} />;\n    }\n\n    return (\n        <div className={\"flex items-center\"}>\n            <DropdownMenu\n                trigger={\n                    <Icon\n                        icon={icon}\n                        label=\"\"\n                        size=\"sm\"\n                        color={isOverridden ? \"accent\" : \"neutral-strong\"}\n                        className={iconClassName}\n                    />\n                }\n                align=\"center\"\n                side=\"bottom\"\n                className={\"wy-p-sm shadow-lg\"}\n            >\n                <div className={\"p-sm text-sm\"} style={{ width: 200 }}>\n                    <InheritedFrom\n                        inheritedFrom={inheritedFrom ?? baseBreakpoint.name}\n                        overriddenAt={isOverridden ? breakpoint.name : null}\n                        onReset={onReset}\n                    />\n                </div>\n            </DropdownMenu>\n            <FormComponentLabel text={text} />\n        </div>\n    );\n};\n\ninterface InheritedFromProps {\n    overriddenAt: string | null;\n    inheritedFrom?: string;\n    onReset: () => void;\n}\n\nexport const InheritedFrom = ({ overriddenAt, inheritedFrom, onReset }: InheritedFromProps) => {\n    if (overriddenAt) {\n        return (\n            <div>\n                This value is set on the current breakpoint.\n                <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                <Button variant={\"primary\"} onClick={onReset} text={\"Reset value\"} size={\"sm\"} />\n                <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                Resetting will inherit the value from the{\" \"}\n                <Tag variant={\"neutral-muted\"} content={inheritedFrom} /> breakpoint.\n            </div>\n        );\n    }\n\n    return (\n        <Text size={\"sm\"}>\n            This value is inherited from the{\" \"}\n            <Tag variant={\"neutral-muted\"} content={inheritedFrom} /> breakpoint.\n        </Text>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SACIC,IAAI,EACJC,GAAG,EACHC,IAAI,EACJC,MAAM,EACNC,SAAS,EACTC,YAAY,EACZC,kBAAkB,QACf,kBAAkB;AACzB,SAASC,aAAa;AACtB,SAASC,SAAS;AAUlB,MAAMC,iBAAiB,GAAGA,CAACC,WAAyB,EAAEC,IAAY,KAAK;EACnE,MAAMC,EAAE,GAAGF,WAAW,CAACG,IAAI,CAACC,UAAU,IAAIA,UAAU,CAACH,IAAI,KAAKA,IAAI,CAAC;EACnE,OAAOC,EAAE,gBAAGd,KAAA,CAAAiB,aAAA,CAACP,SAAS;IAACQ,GAAG,EAAEJ,EAAE,CAACK;EAAK,CAAE,CAAC,GAAG,IAAI;AAClD,CAAC;AAED,MAAMC,aAAa,GAAG,6BAA6B;AAEnD,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAC7BC,aAAa;EACbC,YAAY;EACZC,IAAI;EACJC;AACmB,CAAC,KAAK;EACzB,MAAM;IAAET,UAAU;IAAEJ,WAAW;IAAEc;EAAiB,CAAC,GAAGjB,aAAa,CAAC,CAAC;EACrE,MAAMkB,cAAc,GAAGf,WAAW,CAAC,CAAC,CAAC;EAErC,MAAMO,IAAI,GAAGlB,OAAO,CAAC,MAAM;IACvB,MAAMa,EAAE,GAAGQ,aAAa,IAAIK,cAAc,CAACd,IAAI;IAC/C,OAAOF,iBAAiB,CAACC,WAAW,EAAEE,EAAE,CAAC;EAC7C,CAAC,EAAE,CAACQ,aAAa,EAAEN,UAAU,CAACH,IAAI,EAAED,WAAW,CAACgB,MAAM,CAAC,CAAC;EAExD,IAAIF,gBAAgB,EAAE;IAClB,oBAAO1B,KAAA,CAAAiB,aAAA,CAACT,kBAAkB;MAACgB,IAAI,EAAEA;IAAK,CAAE,CAAC;EAC7C;EAEA,oBACIxB,KAAA,CAAAiB,aAAA;IAAKY,SAAS,EAAE;EAAoB,gBAChC7B,KAAA,CAAAiB,aAAA,CAACV,YAAY;IACTuB,OAAO,eACH9B,KAAA,CAAAiB,aAAA,CAACb,IAAI;MACDe,IAAI,EAAEA,IAAK;MACXY,KAAK,EAAC,EAAE;MACRC,IAAI,EAAC,IAAI;MACTC,KAAK,EAAEV,YAAY,GAAG,QAAQ,GAAG,gBAAiB;MAClDM,SAAS,EAAET;IAAc,CAC5B,CACJ;IACDc,KAAK,EAAC,QAAQ;IACdC,IAAI,EAAC,QAAQ;IACbN,SAAS,EAAE;EAAoB,gBAE/B7B,KAAA,CAAAiB,aAAA;IAAKY,SAAS,EAAE,cAAe;IAACO,KAAK,EAAE;MAAEC,KAAK,EAAE;IAAI;EAAE,gBAClDrC,KAAA,CAAAiB,aAAA,CAACqB,aAAa;IACVhB,aAAa,EAAEA,aAAa,IAAIK,cAAc,CAACd,IAAK;IACpD0B,YAAY,EAAEhB,YAAY,GAAGP,UAAU,CAACH,IAAI,GAAG,IAAK;IACpDY,OAAO,EAAEA;EAAQ,CACpB,CACA,CACK,CAAC,eACfzB,KAAA,CAAAiB,aAAA,CAACT,kBAAkB;IAACgB,IAAI,EAAEA;EAAK,CAAE,CAChC,CAAC;AAEd,CAAC;AAQD,OAAO,MAAMc,aAAa,GAAGA,CAAC;EAAEC,YAAY;EAAEjB,aAAa;EAAEG;AAA4B,CAAC,KAAK;EAC3F,IAAIc,YAAY,EAAE;IACd,oBACIvC,KAAA,CAAAiB,aAAA,cAAK,8CAED,eAAAjB,KAAA,CAAAiB,aAAA,CAACX,SAAS;MAACkC,OAAO,EAAE,QAAS;MAACC,MAAM,EAAE;IAAK,CAAE,CAAC,eAC9CzC,KAAA,CAAAiB,aAAA,CAACZ,MAAM;MAACmC,OAAO,EAAE,SAAU;MAACE,OAAO,EAAEjB,OAAQ;MAACD,IAAI,EAAE,aAAc;MAACQ,IAAI,EAAE;IAAK,CAAE,CAAC,eACjFhC,KAAA,CAAAiB,aAAA,CAACX,SAAS;MAACkC,OAAO,EAAE,QAAS;MAACC,MAAM,EAAE;IAAK,CAAE,CAAC,6CACL,EAAC,GAAG,eAC7CzC,KAAA,CAAAiB,aAAA,CAACd,GAAG;MAACqC,OAAO,EAAE,eAAgB;MAACG,OAAO,EAAErB;IAAc,CAAE,CAAC,gBACxD,CAAC;EAEd;EAEA,oBACItB,KAAA,CAAAiB,aAAA,CAACf,IAAI;IAAC8B,IAAI,EAAE;EAAK,GAAC,kCACkB,EAAC,GAAG,eACpChC,KAAA,CAAAiB,aAAA,CAACd,GAAG;IAACqC,OAAO,EAAE,eAAgB;IAACG,OAAO,EAAErB;EAAc,CAAE,CAAC,gBACvD,CAAC;AAEf,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js","sources":["../../../../src/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n    Text,\n    Tag,\n    Icon,\n    Button,\n    Separator,\n    DropdownMenu,\n    FormComponentLabel\n} from \"@webiny/admin-ui\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\nimport type { Breakpoint } from \"@webiny/website-builder-sdk\";\n\nexport interface InheritanceLabelProps {\n    text: React.ReactNode;\n    isOverridden: boolean;\n    onReset: () => void;\n    inheritedFrom?: string;\n}\n\nconst getBreakpointIcon = (breakpoints: Breakpoint[], name: string) => {\n    const bp = breakpoints.find(breakpoint => breakpoint.name === name);\n    return bp ? <InlineSvg src={bp.icon} /> : null;\n};\n\nconst iconClassName = \"cursor-pointer mr-xs mb-xxs\";\n\nexport const InheritanceLabel = ({\n    inheritedFrom,\n    isOverridden,\n    text,\n    onReset\n}: InheritanceLabelProps) => {\n    const { breakpoint, breakpoints, isBaseBreakpoint } = useBreakpoint();\n    const baseBreakpoint = breakpoints[0];\n\n    const icon = useMemo(() => {\n        const bp = inheritedFrom ?? baseBreakpoint.name;\n        return getBreakpointIcon(breakpoints, bp);\n    }, [inheritedFrom, breakpoint.name, breakpoints.length]);\n\n    if (isBaseBreakpoint) {\n        return <FormComponentLabel text={text} />;\n    }\n\n    return (\n        <div className={\"flex items-center\"}>\n            <DropdownMenu\n                trigger={\n                    <Icon\n                        icon={icon}\n                        label=\"\"\n                        size=\"sm\"\n                        color={isOverridden ? \"accent\" : \"neutral-strong\"}\n                        className={iconClassName}\n                    />\n                }\n                align=\"center\"\n                side=\"bottom\"\n                className={\"wy-p-sm shadow-lg\"}\n            >\n                <div className={\"p-sm text-sm\"} style={{ width: 200 }}>\n                    <InheritedFrom\n                        inheritedFrom={inheritedFrom ?? baseBreakpoint.name}\n                        overriddenAt={isOverridden ? breakpoint.name : null}\n                        onReset={onReset}\n                    />\n                </div>\n            </DropdownMenu>\n            <FormComponentLabel text={text} />\n        </div>\n    );\n};\n\ninterface InheritedFromProps {\n    overriddenAt: string | null;\n    inheritedFrom?: string;\n    onReset: () => void;\n}\n\nexport const InheritedFrom = ({ overriddenAt, inheritedFrom, onReset }: InheritedFromProps) => {\n    if (overriddenAt) {\n        return (\n            <div>\n                This value is set on the current breakpoint.\n                <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                <Button variant={\"primary\"} onClick={onReset} text={\"Reset value\"} size={\"sm\"} />\n                <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                Resetting will inherit the value from the{\" \"}\n                <Tag variant={\"neutral-muted\"} content={inheritedFrom} /> breakpoint.\n            </div>\n        );\n    }\n\n    return (\n        <Text size={\"sm\"}>\n            This value is inherited from the{\" \"}\n            <Tag variant={\"neutral-muted\"} content={inheritedFrom} /> breakpoint.\n        </Text>\n    );\n};\n"],"names":["getBreakpointIcon","breakpoints","name","bp","breakpoint","InlineSvg","iconClassName","InheritanceLabel","inheritedFrom","isOverridden","text","onReset","isBaseBreakpoint","useBreakpoint","baseBreakpoint","icon","useMemo","FormComponentLabel","DropdownMenu","Icon","InheritedFrom","overriddenAt","Separator","Button","Tag","Text"],"mappings":";;;;AAqBA,MAAMA,oBAAoB,CAACC,aAA2BC;IAClD,MAAMC,KAAKF,YAAY,IAAI,CAACG,CAAAA,aAAcA,WAAW,IAAI,KAAKF;IAC9D,OAAOC,KAAK,WAALA,GAAK,oBAACE,WAASA;QAAC,KAAKF,GAAG,IAAI;SAAO;AAC9C;AAEA,MAAMG,gBAAgB;AAEf,MAAMC,mBAAmB,CAAC,EAC7BC,aAAa,EACbC,YAAY,EACZC,IAAI,EACJC,OAAO,EACa;IACpB,MAAM,EAAEP,UAAU,EAAEH,WAAW,EAAEW,gBAAgB,EAAE,GAAGC;IACtD,MAAMC,iBAAiBb,WAAW,CAAC,EAAE;IAErC,MAAMc,OAAOC,QAAQ;QACjB,MAAMb,KAAKK,iBAAiBM,eAAe,IAAI;QAC/C,OAAOd,kBAAkBC,aAAaE;IAC1C,GAAG;QAACK;QAAeJ,WAAW,IAAI;QAAEH,YAAY,MAAM;KAAC;IAEvD,IAAIW,kBACA,OAAO,WAAP,GAAO,oBAACK,oBAAkBA;QAAC,MAAMP;;IAGrC,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACQ,cAAYA;QACT,uBACI,oBAACC,MAAIA;YACD,MAAMJ;YACN,OAAM;YACN,MAAK;YACL,OAAON,eAAe,WAAW;YACjC,WAAWH;;QAGnB,OAAM;QACN,MAAK;QACL,WAAW;qBAEX,oBAAC;QAAI,WAAW;QAAgB,OAAO;YAAE,OAAO;QAAI;qBAChD,oBAACc,eAAaA;QACV,eAAeZ,iBAAiBM,eAAe,IAAI;QACnD,cAAcL,eAAeL,WAAW,IAAI,GAAG;QAC/C,SAASO;wBAIrB,oBAACM,oBAAkBA;QAAC,MAAMP;;AAGtC;AAQO,MAAMU,gBAAgB,CAAC,EAAEC,YAAY,EAAEb,aAAa,EAAEG,OAAO,EAAsB;IACtF,IAAIU,cACA,OAAO,WAAP,GACI,oBAAC,aAAI,8DAED,oBAACC,WAASA;QAAC,SAAS;QAAU,QAAQ;sBACtC,oBAACC,QAAMA;QAAC,SAAS;QAAW,SAASZ;QAAS,MAAM;QAAe,MAAM;sBACzE,oBAACW,WAASA;QAAC,SAAS;QAAU,QAAQ;QAAQ,6CACJ,mBAC1C,oBAACE,KAAGA;QAAC,SAAS;QAAiB,SAAShB;QAAiB;IAKrE,OAAO,WAAP,GACI,oBAACiB,MAAIA;QAAC,MAAM;OAAM,oCACmB,mBACjC,oBAACD,KAAGA;QAAC,SAAS;QAAiB,SAAShB;QAAiB;AAGrE"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundColor.js

@@ -1,61 +1,47 @@
-import React, { useEffect, useRef, useState } from "react";
+import react, { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { ColorPicker } from "@webiny/admin-ui";
 import { useStyles } from "../../useStyles.js";
 import { InheritanceLabel } from "../../../InheritanceLabel.js";
-export const BackgroundColor = observer(({
-  elementId
-}) => {
-  const {
-    styles,
-    onChange,
-    onPreviewChange,
-    inheritanceMap
-  } = useStyles(elementId);
-  const [value, setValue] = useState(styles.backgroundColor ?? "transparent");
-  const timeoutRef = useRef(null);
-  useEffect(() => {
-    if (styles.backgroundColor !== value) {
-      setValue(styles.backgroundColor ?? "transparent");
-    }
-  }, [styles.backgroundColor]);
-  const handleChange = value => {
-    setValue(value);
-    onPreviewChange(({
-      styles
-    }) => {
-      styles.set("backgroundColor", value);
+const BackgroundColor = observer(({ elementId })=>{
+    const { styles, onChange, onPreviewChange, inheritanceMap } = useStyles(elementId);
+    const [value, setValue] = useState(styles.backgroundColor ?? "transparent");
+    const timeoutRef = useRef(null);
+    useEffect(()=>{
+        if (styles.backgroundColor !== value) setValue(styles.backgroundColor ?? "transparent");
+    }, [
+        styles.backgroundColor
+    ]);
+    const handleChange = (value)=>{
+        setValue(value);
+        onPreviewChange(({ styles })=>{
+            styles.set("backgroundColor", value);
+        });
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(()=>{
+            onChange(({ styles })=>{
+                styles.set("backgroundColor", value);
+            });
+        }, 300);
+    };
+    const onReset = ()=>{
+        onChange(({ styles })=>{
+            styles.unset("backgroundColor");
+        });
+    };
+    const inheritance = inheritanceMap?.backgroundColor ?? {};
+    return /*#__PURE__*/ react.createElement(ColorPicker, {
+        label: /*#__PURE__*/ react.createElement(InheritanceLabel, {
+            onReset: onReset,
+            isOverridden: inheritance?.overridden ?? false,
+            inheritedFrom: inheritance?.inheritedFrom,
+            text: "Color"
+        }),
+        description: "Select your background color",
+        value: value,
+        onChange: handleChange
     });
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    timeoutRef.current = setTimeout(() => {
-      onChange(({
-        styles
-      }) => {
-        styles.set("backgroundColor", value);
-      });
-    }, 300); // wait 300ms after last input event
-  };
-  const onReset = () => {
-    onChange(({
-      styles
-    }) => {
-      styles.unset("backgroundColor");
-    });
-  };
-  const inheritance = inheritanceMap?.backgroundColor ?? {};
-  return /*#__PURE__*/React.createElement(ColorPicker, {
-    label: /*#__PURE__*/React.createElement(InheritanceLabel, {
-      onReset: onReset,
-      isOverridden: inheritance?.overridden ?? false,
-      inheritedFrom: inheritance?.inheritedFrom,
-      text: "Color"
-    }),
-    description: "Select your background color",
-    value: value,
-    onChange: handleChange
-  });
 });
+export { BackgroundColor };
 
 //# sourceMappingURL=BackgroundColor.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundColor.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","useState","observer","ColorPicker","useStyles","InheritanceLabel","BackgroundColor","elementId","styles","onChange","onPreviewChange","inheritanceMap","value","setValue","backgroundColor","timeoutRef","handleChange","set","current","clearTimeout","setTimeout","onReset","unset","inheritance","createElement","label","isOverridden","overridden","inheritedFrom","text","description"],"sources":["BackgroundColor.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { ColorPicker } from \"@webiny/admin-ui\";\n\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\n\nexport const BackgroundColor = observer(({ elementId }: { elementId: string }) => {\n    const { styles, onChange, onPreviewChange, inheritanceMap } = useStyles(elementId);\n    const [value, setValue] = useState(styles.backgroundColor ?? \"transparent\");\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    useEffect(() => {\n        if (styles.backgroundColor !== value) {\n            setValue(styles.backgroundColor ?? \"transparent\");\n        }\n    }, [styles.backgroundColor]);\n\n    const handleChange = (value: string) => {\n        setValue(value);\n        onPreviewChange(({ styles }) => {\n            styles.set(\"backgroundColor\", value);\n        });\n\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n\n        timeoutRef.current = setTimeout(() => {\n            onChange(({ styles }) => {\n                styles.set(\"backgroundColor\", value);\n            });\n        }, 300); // wait 300ms after last input event\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"backgroundColor\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.backgroundColor ?? {};\n\n    return (\n        <ColorPicker\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Color\"}\n                />\n            }\n            description=\"Select your background color\"\n            value={value}\n            onChange={handleChange}\n        />\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC1D,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,WAAW,QAAQ,kBAAkB;AAE9C,SAASC,SAAS;AAClB,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,eAAe,GAAGJ,QAAQ,CAAC,CAAC;EAAEK;AAAiC,CAAC,KAAK;EAC9E,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,eAAe;IAAEC;EAAe,CAAC,GAAGP,SAAS,CAACG,SAAS,CAAC;EAClF,MAAM,CAACK,KAAK,EAAEC,QAAQ,CAAC,GAAGZ,QAAQ,CAACO,MAAM,CAACM,eAAe,IAAI,aAAa,CAAC;EAC3E,MAAMC,UAAU,GAAGf,MAAM,CAAuC,IAAI,CAAC;EAErED,SAAS,CAAC,MAAM;IACZ,IAAIS,MAAM,CAACM,eAAe,KAAKF,KAAK,EAAE;MAClCC,QAAQ,CAACL,MAAM,CAACM,eAAe,IAAI,aAAa,CAAC;IACrD;EACJ,CAAC,EAAE,CAACN,MAAM,CAACM,eAAe,CAAC,CAAC;EAE5B,MAAME,YAAY,GAAIJ,KAAa,IAAK;IACpCC,QAAQ,CAACD,KAAK,CAAC;IACfF,eAAe,CAAC,CAAC;MAAEF;IAAO,CAAC,KAAK;MAC5BA,MAAM,CAACS,GAAG,CAAC,iBAAiB,EAAEL,KAAK,CAAC;IACxC,CAAC,CAAC;IAEF,IAAIG,UAAU,CAACG,OAAO,EAAE;MACpBC,YAAY,CAACJ,UAAU,CAACG,OAAO,CAAC;IACpC;IAEAH,UAAU,CAACG,OAAO,GAAGE,UAAU,CAAC,MAAM;MAClCX,QAAQ,CAAC,CAAC;QAAED;MAAO,CAAC,KAAK;QACrBA,MAAM,CAACS,GAAG,CAAC,iBAAiB,EAAEL,KAAK,CAAC;MACxC,CAAC,CAAC;IACN,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;EACb,CAAC;EAED,MAAMS,OAAO,GAAGA,CAAA,KAAM;IAClBZ,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACc,KAAK,CAAC,iBAAiB,CAAC;IACnC,CAAC,CAAC;EACN,CAAC;EAED,MAAMC,WAAW,GAAGZ,cAAc,EAAEG,eAAe,IAAI,CAAC,CAAC;EAEzD,oBACIhB,KAAA,CAAA0B,aAAA,CAACrB,WAAW;IACRsB,KAAK,eACD3B,KAAA,CAAA0B,aAAA,CAACnB,gBAAgB;MACbgB,OAAO,EAAEA,OAAQ;MACjBK,YAAY,EAAEH,WAAW,EAAEI,UAAU,IAAI,KAAM;MAC/CC,aAAa,EAAEL,WAAW,EAAEK,aAAc;MAC1CC,IAAI,EAAE;IAAQ,CACjB,CACJ;IACDC,WAAW,EAAC,8BAA8B;IAC1ClB,KAAK,EAAEA,KAAM;IACbH,QAAQ,EAAEO;EAAa,CAC1B,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundColor.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundColor.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { ColorPicker } from \"@webiny/admin-ui\";\n\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\n\nexport const BackgroundColor = observer(({ elementId }: { elementId: string }) => {\n    const { styles, onChange, onPreviewChange, inheritanceMap } = useStyles(elementId);\n    const [value, setValue] = useState(styles.backgroundColor ?? \"transparent\");\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    useEffect(() => {\n        if (styles.backgroundColor !== value) {\n            setValue(styles.backgroundColor ?? \"transparent\");\n        }\n    }, [styles.backgroundColor]);\n\n    const handleChange = (value: string) => {\n        setValue(value);\n        onPreviewChange(({ styles }) => {\n            styles.set(\"backgroundColor\", value);\n        });\n\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n\n        timeoutRef.current = setTimeout(() => {\n            onChange(({ styles }) => {\n                styles.set(\"backgroundColor\", value);\n            });\n        }, 300); // wait 300ms after last input event\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"backgroundColor\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.backgroundColor ?? {};\n\n    return (\n        <ColorPicker\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Color\"}\n                />\n            }\n            description=\"Select your background color\"\n            value={value}\n            onChange={handleChange}\n        />\n    );\n});\n"],"names":["BackgroundColor","observer","elementId","styles","onChange","onPreviewChange","inheritanceMap","useStyles","value","setValue","useState","timeoutRef","useRef","useEffect","handleChange","clearTimeout","setTimeout","onReset","inheritance","ColorPicker","InheritanceLabel"],"mappings":";;;;;AAOO,MAAMA,kBAAkBC,SAAS,CAAC,EAAEC,SAAS,EAAyB;IACzE,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,cAAc,EAAE,GAAGC,UAAUL;IACxE,MAAM,CAACM,OAAOC,SAAS,GAAGC,SAASP,OAAO,eAAe,IAAI;IAC7D,MAAMQ,aAAaC,OAA6C;IAEhEC,UAAU;QACN,IAAIV,OAAO,eAAe,KAAKK,OAC3BC,SAASN,OAAO,eAAe,IAAI;IAE3C,GAAG;QAACA,OAAO,eAAe;KAAC;IAE3B,MAAMW,eAAe,CAACN;QAClBC,SAASD;QACTH,gBAAgB,CAAC,EAAEF,MAAM,EAAE;YACvBA,OAAO,GAAG,CAAC,mBAAmBK;QAClC;QAEA,IAAIG,WAAW,OAAO,EAClBI,aAAaJ,WAAW,OAAO;QAGnCA,WAAW,OAAO,GAAGK,WAAW;YAC5BZ,SAAS,CAAC,EAAED,MAAM,EAAE;gBAChBA,OAAO,GAAG,CAAC,mBAAmBK;YAClC;QACJ,GAAG;IACP;IAEA,MAAMS,UAAU;QACZb,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;QACjB;IACJ;IAEA,MAAMe,cAAcZ,gBAAgB,mBAAmB,CAAC;IAExD,OAAO,WAAP,GACI,oBAACa,aAAWA;QACR,qBACI,oBAACC,kBAAgBA;YACb,SAASH;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;QAGd,aAAY;QACZ,OAAOV;QACP,UAAUM;;AAGtB"}