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

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

@@ -1 +1 @@
-{"version":3,"names":["UnitValue","keywords","constructor","valueWithUnit","value","unit","match","isAKeyword","from","isKeyword","includes","String","getValue","defaultValue","toString","setUnit","getUnit","str"],"sources":["UnitValue.ts"],"sourcesContent":["export class UnitValue {\n    private value: string;\n    private unit: string;\n    private keywords = [\"auto\", \"unset\", \"inherit\"];\n\n    private constructor(valueWithUnit: string = \"\") {\n        const [, value, unit = \"px\"] = valueWithUnit.match(/(\\d+)?(\\S+)?/) ?? [];\n        if (this.isAKeyword(unit)) {\n            this.value = unit;\n        } else {\n            this.value = value;\n        }\n        this.unit = unit;\n    }\n\n    static from(value: string) {\n        return new UnitValue(value);\n    }\n\n    static isKeyword(unit: string): boolean {\n        return new UnitValue(unit).isKeyword();\n    }\n\n    isKeyword() {\n        return this.keywords.includes(String(this.value));\n    }\n\n    getValue(defaultValue?: string) {\n        return this.value ? this.value.toString() : (defaultValue ?? \"\");\n    }\n\n    setUnit(unit: string) {\n        if (this.isKeyword()) {\n            this.value = \"0\";\n        }\n        this.unit = unit;\n    }\n\n    getUnit() {\n        return this.unit;\n    }\n\n    toString() {\n        return `${this.value}${this.unit}`;\n    }\n\n    private isAKeyword(str: string) {\n        return this.keywords.includes(str);\n    }\n}\n"],"mappings":"AAAA,OAAO,MAAMA,SAAS,CAAC;EAGXC,QAAQ,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,CAAC;EAEvCC,WAAWA,CAACC,aAAqB,GAAG,EAAE,EAAE;IAC5C,MAAM,GAAGC,KAAK,EAAEC,IAAI,GAAG,IAAI,CAAC,GAAGF,aAAa,CAACG,KAAK,CAAC,cAAc,CAAC,IAAI,EAAE;IACxE,IAAI,IAAI,CAACC,UAAU,CAACF,IAAI,CAAC,EAAE;MACvB,IAAI,CAACD,KAAK,GAAGC,IAAI;IACrB,CAAC,MAAM;MACH,IAAI,CAACD,KAAK,GAAGA,KAAK;IACtB;IACA,IAAI,CAACC,IAAI,GAAGA,IAAI;EACpB;EAEA,OAAOG,IAAIA,CAACJ,KAAa,EAAE;IACvB,OAAO,IAAIJ,SAAS,CAACI,KAAK,CAAC;EAC/B;EAEA,OAAOK,SAASA,CAACJ,IAAY,EAAW;IACpC,OAAO,IAAIL,SAAS,CAACK,IAAI,CAAC,CAACI,SAAS,CAAC,CAAC;EAC1C;EAEAA,SAASA,CAAA,EAAG;IACR,OAAO,IAAI,CAACR,QAAQ,CAACS,QAAQ,CAACC,MAAM,CAAC,IAAI,CAACP,KAAK,CAAC,CAAC;EACrD;EAEAQ,QAAQA,CAACC,YAAqB,EAAE;IAC5B,OAAO,IAAI,CAACT,KAAK,GAAG,IAAI,CAACA,KAAK,CAACU,QAAQ,CAAC,CAAC,GAAID,YAAY,IAAI,EAAG;EACpE;EAEAE,OAAOA,CAACV,IAAY,EAAE;IAClB,IAAI,IAAI,CAACI,SAAS,CAAC,CAAC,EAAE;MAClB,IAAI,CAACL,KAAK,GAAG,GAAG;IACpB;IACA,IAAI,CAACC,IAAI,GAAGA,IAAI;EACpB;EAEAW,OAAOA,CAAA,EAAG;IACN,OAAO,IAAI,CAACX,IAAI;EACpB;EAEAS,QAAQA,CAAA,EAAG;IACP,OAAO,GAAG,IAAI,CAACV,KAAK,GAAG,IAAI,CAACC,IAAI,EAAE;EACtC;EAEQE,UAAUA,CAACU,GAAW,EAAE;IAC5B,OAAO,IAAI,CAAChB,QAAQ,CAACS,QAAQ,CAACO,GAAG,CAAC;EACtC;AACJ","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValue.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValue.ts"],"sourcesContent":["export class UnitValue {\n    private value: string;\n    private unit: string;\n    private keywords = [\"auto\", \"unset\", \"inherit\"];\n\n    private constructor(valueWithUnit: string = \"\") {\n        const [, value, unit = \"px\"] = valueWithUnit.match(/(\\d+)?(\\S+)?/) ?? [];\n        if (this.isAKeyword(unit)) {\n            this.value = unit;\n        } else {\n            this.value = value;\n        }\n        this.unit = unit;\n    }\n\n    static from(value: string) {\n        return new UnitValue(value);\n    }\n\n    static isKeyword(unit: string): boolean {\n        return new UnitValue(unit).isKeyword();\n    }\n\n    isKeyword() {\n        return this.keywords.includes(String(this.value));\n    }\n\n    getValue(defaultValue?: string) {\n        return this.value ? this.value.toString() : (defaultValue ?? \"\");\n    }\n\n    setUnit(unit: string) {\n        if (this.isKeyword()) {\n            this.value = \"0\";\n        }\n        this.unit = unit;\n    }\n\n    getUnit() {\n        return this.unit;\n    }\n\n    toString() {\n        return `${this.value}${this.unit}`;\n    }\n\n    private isAKeyword(str: string) {\n        return this.keywords.includes(str);\n    }\n}\n"],"names":["UnitValue","valueWithUnit","value","unit","String","defaultValue","str"],"mappings":"AAAO,MAAMA;IAKT,YAAoBC,gBAAwB,EAAE,CAAE;aAFxC,QAAQ,GAAG;YAAC;YAAQ;YAAS;SAAU;QAG3C,MAAM,GAAGC,OAAOC,OAAO,IAAI,CAAC,GAAGF,cAAc,KAAK,CAAC,mBAAmB,EAAE;QACxE,IAAI,IAAI,CAAC,UAAU,CAACE,OAChB,IAAI,CAAC,KAAK,GAAGA;aAEb,IAAI,CAAC,KAAK,GAAGD;QAEjB,IAAI,CAAC,IAAI,GAAGC;IAChB;IAEA,OAAO,KAAKD,KAAa,EAAE;QACvB,OAAO,IAAIF,UAAUE;IACzB;IAEA,OAAO,UAAUC,IAAY,EAAW;QACpC,OAAO,IAAIH,UAAUG,MAAM,SAAS;IACxC;IAEA,YAAY;QACR,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAACC,OAAO,IAAI,CAAC,KAAK;IACnD;IAEA,SAASC,YAAqB,EAAE;QAC5B,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAMA,gBAAgB;IACjE;IAEA,QAAQF,IAAY,EAAE;QAClB,IAAI,IAAI,CAAC,SAAS,IACd,IAAI,CAAC,KAAK,GAAG;QAEjB,IAAI,CAAC,IAAI,GAAGA;IAChB;IAEA,UAAU;QACN,OAAO,IAAI,CAAC,IAAI;IACpB;IAEA,WAAW;QACP,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE;IACtC;IAEQ,WAAWG,GAAW,EAAE;QAC5B,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAACA;IAClC;AACJ"}

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

@@ -1,59 +1,66 @@
-import React, { useState } from "react";
+import react, { useState } from "react";
 import { Input, Select } from "@webiny/admin-ui";
 class Value {
-  static from(value) {
-    return value === "auto" ? 0 : parseInt(value ?? "0");
-  }
-}
-const capTo100 = ["%", "vh", "vw"];
-export const UnitValuePicker = props => {
-  const [editing, setEditing] = useState(false);
-  const defaultValue = editing ? "" : 0;
-  const isAuto = props.value === "auto";
-  const currentValue = Value.from(props.value);
-  const onEnter = () => {
-    setValue(props.value);
-  };
-  const setUnit = unit => {
-    const value = capTo100.includes(unit) && currentValue > 100 ? 100 : currentValue;
-    props.onChange(unit === "auto" ? "auto" : `${value}${unit}`);
-  };
-  const setValue = value => {
-    const parsedValue = Value.from(value);
-    const finalValue = isNaN(parsedValue) ? 0 : parsedValue;
-    props.onChange(`${finalValue}${props.unit}`);
-  };
-  const setPreviewValue = value => {
-    setEditing(true);
-    let finalValue = "";
-    if (value !== "") {
-      const parsedValue = parseInt(value);
-      finalValue = isNaN(parsedValue) ? 0 : parsedValue;
+    static from(value) {
+        return "auto" === value ? 0 : parseInt(value ?? "0");
     }
-    props.onChangePreview(`${finalValue}${props.unit}`);
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-row space-x-sm"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex-col"
-  }, /*#__PURE__*/React.createElement(Input, {
-    disabled: isAuto,
-    size: "md",
-    value: isAuto ? "-" : props.value ?? defaultValue,
-    onEnter: onEnter,
-    autoSelect: true,
-    onChange: value => setPreviewValue(value),
-    onBlur: e => setValue(e.target.value),
-    autoFocus: true
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "flex-col"
-  }, /*#__PURE__*/React.createElement(Select, {
-    size: "md",
-    value: props.unit,
-    options: props.units,
-    onChange: setUnit,
-    displayResetAction: false
-  })));
+}
+const capTo100 = [
+    "%",
+    "vh",
+    "vw"
+];
+const UnitValuePicker = (props)=>{
+    const [editing, setEditing] = useState(false);
+    const defaultValue = editing ? "" : 0;
+    const isAuto = "auto" === props.value;
+    const currentValue = Value.from(props.value);
+    const onEnter = ()=>{
+        setValue(props.value);
+    };
+    const setUnit = (unit)=>{
+        const value = capTo100.includes(unit) && currentValue > 100 ? 100 : currentValue;
+        props.onChange("auto" === unit ? "auto" : `${value}${unit}`);
+    };
+    const setValue = (value)=>{
+        const parsedValue = Value.from(value);
+        const finalValue = isNaN(parsedValue) ? 0 : parsedValue;
+        props.onChange(`${finalValue}${props.unit}`);
+    };
+    const setPreviewValue = (value)=>{
+        setEditing(true);
+        let finalValue = "";
+        if ("" !== value) {
+            const parsedValue = parseInt(value);
+            finalValue = isNaN(parsedValue) ? 0 : parsedValue;
+        }
+        props.onChangePreview(`${finalValue}${props.unit}`);
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-row space-x-sm"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex-col"
+    }, /*#__PURE__*/ react.createElement(Input, {
+        disabled: isAuto,
+        size: "md",
+        variant: "secondary",
+        value: isAuto ? "-" : props.value ?? defaultValue,
+        onEnter: onEnter,
+        autoSelect: true,
+        onChange: (value)=>setPreviewValue(value),
+        onBlur: (e)=>setValue(e.target.value),
+        autoFocus: true
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "w-[80px] shrink-0"
+    }, /*#__PURE__*/ react.createElement(Select, {
+        size: "md",
+        variant: "secondary",
+        value: props.unit,
+        options: props.units,
+        onChange: setUnit,
+        displayResetAction: false
+    })));
 };
+export { UnitValuePicker };
 
 //# sourceMappingURL=UnitValuePicker.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useState","Input","Select","Value","from","value","parseInt","capTo100","UnitValuePicker","props","editing","setEditing","defaultValue","isAuto","currentValue","onEnter","setValue","setUnit","unit","includes","onChange","parsedValue","finalValue","isNaN","setPreviewValue","onChangePreview","createElement","className","disabled","size","autoSelect","onBlur","e","target","autoFocus","options","units","displayResetAction"],"sources":["UnitValuePicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Input, Select } from \"@webiny/admin-ui\";\n\nexport type UnitOption = {\n    label: string;\n    value: string;\n};\n\ninterface UnitValueProps {\n    value: string;\n    unit: string;\n    units: UnitOption[];\n    onChange: (value: string) => void;\n    onChangePreview: (value: string) => void;\n}\n\nclass Value {\n    static from(value: string | undefined) {\n        return value === \"auto\" ? 0 : parseInt(value ?? \"0\");\n    }\n}\n\nconst capTo100 = [\"%\", \"vh\", \"vw\"];\n\nexport const UnitValuePicker = (props: UnitValueProps) => {\n    const [editing, setEditing] = useState(false);\n\n    const defaultValue = editing ? \"\" : 0;\n\n    const isAuto = props.value === \"auto\";\n\n    const currentValue = Value.from(props.value);\n\n    const onEnter = () => {\n        setValue(props.value);\n    };\n\n    const setUnit = (unit: string) => {\n        const value = capTo100.includes(unit) && currentValue > 100 ? 100 : currentValue;\n        props.onChange(unit === \"auto\" ? \"auto\" : `${value}${unit}`);\n    };\n\n    const setValue = (value: string) => {\n        const parsedValue = Value.from(value);\n        const finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n        props.onChange(`${finalValue}${props.unit}`);\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    return (\n        <div className={\"flex flex-row space-x-sm\"}>\n            <div className={\"flex-col\"}>\n                <Input\n                    disabled={isAuto}\n                    size={\"md\"}\n                    value={isAuto ? \"-\" : (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={setUnit}\n                    displayResetAction={false}\n                />\n            </div>\n        </div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValuePicker.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValuePicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Input, Select } from \"@webiny/admin-ui\";\n\nexport type UnitOption = {\n    label: string;\n    value: string;\n};\n\ninterface UnitValueProps {\n    value: string;\n    unit: string;\n    units: UnitOption[];\n    onChange: (value: string) => void;\n    onChangePreview: (value: string) => void;\n}\n\nclass Value {\n    static from(value: string | undefined) {\n        return value === \"auto\" ? 0 : parseInt(value ?? \"0\");\n    }\n}\n\nconst capTo100 = [\"%\", \"vh\", \"vw\"];\n\nexport const UnitValuePicker = (props: UnitValueProps) => {\n    const [editing, setEditing] = useState(false);\n\n    const defaultValue = editing ? \"\" : 0;\n\n    const isAuto = props.value === \"auto\";\n\n    const currentValue = Value.from(props.value);\n\n    const onEnter = () => {\n        setValue(props.value);\n    };\n\n    const setUnit = (unit: string) => {\n        const value = capTo100.includes(unit) && currentValue > 100 ? 100 : currentValue;\n        props.onChange(unit === \"auto\" ? \"auto\" : `${value}${unit}`);\n    };\n\n    const setValue = (value: string) => {\n        const parsedValue = Value.from(value);\n        const finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n        props.onChange(`${finalValue}${props.unit}`);\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    return (\n        <div className={\"flex flex-row space-x-sm\"}>\n            <div className={\"flex-col\"}>\n                <Input\n                    disabled={isAuto}\n                    size={\"md\"}\n                    variant={\"secondary\"}\n                    value={isAuto ? \"-\" : (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={\"w-[80px] shrink-0\"}>\n                <Select\n                    size={\"md\"}\n                    variant={\"secondary\"}\n                    value={props.unit}\n                    options={props.units}\n                    onChange={setUnit}\n                    displayResetAction={false}\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":["Value","value","parseInt","capTo100","UnitValuePicker","props","editing","setEditing","useState","defaultValue","isAuto","currentValue","onEnter","setValue","setUnit","unit","parsedValue","finalValue","isNaN","setPreviewValue","Input","e","Select"],"mappings":";;AAgBA,MAAMA;IACF,OAAO,KAAKC,KAAyB,EAAE;QACnC,OAAOA,AAAU,WAAVA,QAAmB,IAAIC,SAASD,SAAS;IACpD;AACJ;AAEA,MAAME,WAAW;IAAC;IAAK;IAAM;CAAK;AAE3B,MAAMC,kBAAkB,CAACC;IAC5B,MAAM,CAACC,SAASC,WAAW,GAAGC,SAAS;IAEvC,MAAMC,eAAeH,UAAU,KAAK;IAEpC,MAAMI,SAASL,AAAgB,WAAhBA,MAAM,KAAK;IAE1B,MAAMM,eAAeX,MAAM,IAAI,CAACK,MAAM,KAAK;IAE3C,MAAMO,UAAU;QACZC,SAASR,MAAM,KAAK;IACxB;IAEA,MAAMS,UAAU,CAACC;QACb,MAAMd,QAAQE,SAAS,QAAQ,CAACY,SAASJ,eAAe,MAAM,MAAMA;QACpEN,MAAM,QAAQ,CAACU,AAAS,WAATA,OAAkB,SAAS,GAAGd,QAAQc,MAAM;IAC/D;IAEA,MAAMF,WAAW,CAACZ;QACd,MAAMe,cAAchB,MAAM,IAAI,CAACC;QAC/B,MAAMgB,aAAaC,MAAMF,eAAe,IAAIA;QAC5CX,MAAM,QAAQ,CAAC,GAAGY,aAAaZ,MAAM,IAAI,EAAE;IAC/C;IAEA,MAAMc,kBAAkB,CAAClB;QACrBM,WAAW;QACX,IAAIU,aAA8B;QAClC,IAAIhB,AAAU,OAAVA,OAAc;YACd,MAAMe,cAAcd,SAASD;YAC7BgB,aAAaC,MAAMF,eAAe,IAAIA;QAC1C;QACAX,MAAM,eAAe,CAAC,GAAGY,aAAaZ,MAAM,IAAI,EAAE;IACtD;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACe,OAAKA;QACF,UAAUV;QACV,MAAM;QACN,SAAS;QACT,OAAOA,SAAS,MAAOL,MAAM,KAAK,IAAII;QACtC,SAASG;QACT,YAAY;QACZ,UAAUX,CAAAA,QAASkB,gBAAgBlB;QACnC,QAAQoB,CAAAA,IAAKR,SAASQ,EAAE,MAAM,CAAC,KAAK;QACpC,WAAW;uBAGnB,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QACH,MAAM;QACN,SAAS;QACT,OAAOjB,MAAM,IAAI;QACjB,SAASA,MAAM,KAAK;QACpB,UAAUS;QACV,oBAAoB;;AAKxC"}

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

@@ -1,29 +1,37 @@
-export class UnitsOptions {
-  units = ["px", "%", "em", "rem"];
-  static widthUnits() {
-    const units = new UnitsOptions();
-    units.add("vw");
-    return units;
-  }
-  static heightUnits() {
-    const units = new UnitsOptions();
-    units.add("vh");
-    return units;
-  }
-  add(...args) {
-    this.units.push(...args);
-    return this;
-  }
-  remove(...args) {
-    this.units = this.units.filter(unit => !args.includes(unit));
-    return this;
-  }
-  getOptions() {
-    return this.units.map(unit => ({
-      label: unit,
-      value: unit
-    }));
-  }
+class UnitsOptions {
+    static widthUnits() {
+        const units = new UnitsOptions();
+        units.add("vw");
+        return units;
+    }
+    static heightUnits() {
+        const units = new UnitsOptions();
+        units.add("vh");
+        return units;
+    }
+    add(...args) {
+        this.units.push(...args);
+        return this;
+    }
+    remove(...args) {
+        this.units = this.units.filter((unit)=>!args.includes(unit));
+        return this;
+    }
+    getOptions() {
+        return this.units.map((unit)=>({
+                label: unit,
+                value: unit
+            }));
+    }
+    constructor(){
+        this.units = [
+            "px",
+            "%",
+            "em",
+            "rem"
+        ];
+    }
 }
+export { UnitsOptions };
 
 //# sourceMappingURL=UnitsOptions.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["UnitsOptions","units","widthUnits","add","heightUnits","args","push","remove","filter","unit","includes","getOptions","map","label","value"],"sources":["UnitsOptions.ts"],"sourcesContent":["export class UnitsOptions {\n    private units = [\"px\", \"%\", \"em\", \"rem\"];\n\n    static widthUnits() {\n        const units = new UnitsOptions();\n        units.add(\"vw\");\n        return units;\n    }\n\n    static heightUnits() {\n        const units = new UnitsOptions();\n        units.add(\"vh\");\n        return units;\n    }\n\n    add(...args: string[]) {\n        this.units.push(...args);\n        return this;\n    }\n\n    remove(...args: string[]) {\n        this.units = this.units.filter(unit => !args.includes(unit));\n        return this;\n    }\n\n    getOptions() {\n        return this.units.map(unit => ({\n            label: unit,\n            value: unit\n        }));\n    }\n}\n"],"mappings":"AAAA,OAAO,MAAMA,YAAY,CAAC;EACdC,KAAK,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC;EAExC,OAAOC,UAAUA,CAAA,EAAG;IAChB,MAAMD,KAAK,GAAG,IAAID,YAAY,CAAC,CAAC;IAChCC,KAAK,CAACE,GAAG,CAAC,IAAI,CAAC;IACf,OAAOF,KAAK;EAChB;EAEA,OAAOG,WAAWA,CAAA,EAAG;IACjB,MAAMH,KAAK,GAAG,IAAID,YAAY,CAAC,CAAC;IAChCC,KAAK,CAACE,GAAG,CAAC,IAAI,CAAC;IACf,OAAOF,KAAK;EAChB;EAEAE,GAAGA,CAAC,GAAGE,IAAc,EAAE;IACnB,IAAI,CAACJ,KAAK,CAACK,IAAI,CAAC,GAAGD,IAAI,CAAC;IACxB,OAAO,IAAI;EACf;EAEAE,MAAMA,CAAC,GAAGF,IAAc,EAAE;IACtB,IAAI,CAACJ,KAAK,GAAG,IAAI,CAACA,KAAK,CAACO,MAAM,CAACC,IAAI,IAAI,CAACJ,IAAI,CAACK,QAAQ,CAACD,IAAI,CAAC,CAAC;IAC5D,OAAO,IAAI;EACf;EAEAE,UAAUA,CAAA,EAAG;IACT,OAAO,IAAI,CAACV,KAAK,CAACW,GAAG,CAACH,IAAI,KAAK;MAC3BI,KAAK,EAAEJ,IAAI;MACXK,KAAK,EAAEL;IACX,CAAC,CAAC,CAAC;EACP;AACJ","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitsOptions.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitsOptions.ts"],"sourcesContent":["export class UnitsOptions {\n    private units = [\"px\", \"%\", \"em\", \"rem\"];\n\n    static widthUnits() {\n        const units = new UnitsOptions();\n        units.add(\"vw\");\n        return units;\n    }\n\n    static heightUnits() {\n        const units = new UnitsOptions();\n        units.add(\"vh\");\n        return units;\n    }\n\n    add(...args: string[]) {\n        this.units.push(...args);\n        return this;\n    }\n\n    remove(...args: string[]) {\n        this.units = this.units.filter(unit => !args.includes(unit));\n        return this;\n    }\n\n    getOptions() {\n        return this.units.map(unit => ({\n            label: unit,\n            value: unit\n        }));\n    }\n}\n"],"names":["UnitsOptions","units","args","unit"],"mappings":"AAAO,MAAMA;IAGT,OAAO,aAAa;QAChB,MAAMC,QAAQ,IAAID;QAClBC,MAAM,GAAG,CAAC;QACV,OAAOA;IACX;IAEA,OAAO,cAAc;QACjB,MAAMA,QAAQ,IAAID;QAClBC,MAAM,GAAG,CAAC;QACV,OAAOA;IACX;IAEA,IAAI,GAAGC,IAAc,EAAE;QACnB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAIA;QACnB,OAAO,IAAI;IACf;IAEA,OAAO,GAAGA,IAAc,EAAE;QACtB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAACC,CAAAA,OAAQ,CAACD,KAAK,QAAQ,CAACC;QACtD,OAAO,IAAI;IACf;IAEA,aAAa;QACT,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAACA,CAAAA,OAAS;gBAC3B,OAAOA;gBACP,OAAOA;YACX;IACJ;;aA7BQ,KAAK,GAAG;YAAC;YAAM;YAAK;YAAM;SAAM;;AA8B5C"}

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

@@ -1,119 +1,125 @@
-import React, { useCallback, useRef, useState } from "react";
-import { cn, DropdownMenu, FormComponentLabel, FormComponentNote, Input, Select, Separator } from "@webiny/admin-ui";
+import react, { useCallback, useRef, useState } from "react";
+import { DropdownMenu, FormComponentLabel, FormComponentNote, Input, Select, Separator, cn } from "@webiny/admin-ui";
 import { InheritedFrom } from "../InheritanceLabel.js";
 import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
 import { BASE_BREAKPOINT } from "../../../../constants.js";
 import { UnitValue } from "./UnitValue.js";
-export const ValueSelector = props => {
-  const {
-    breakpoint
-  } = useBreakpoint();
-  const [editing, setEditing] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
-  const [inputChanged, setInputChanged] = useState(false);
-  const inputRef = useRef(null);
-  const defaultValue = editing ? "" : 0;
-  const currentValue = UnitValue.from(props.value);
-  const trackTyping = useCallback(() => {
-    setInputChanged(true);
-  }, [setInputChanged]);
-  const onEnter = () => {
-    setValue(props.value);
-    setIsOpen(false);
-  };
-  const setUnit = unit => {
-    setEditing(false);
-    currentValue.setUnit(unit);
-    props.onChange(currentValue.toString());
-  };
-  const setValue = value => {
-    const parsedValue = UnitValue.from(value);
-    if (!inputChanged) {
-      return;
-    }
-    const finalValue = parsedValue.getValue("0");
-    props.onChange(`${finalValue}${props.unit}`);
-    setInputChanged(false);
-    setTimeout(() => {
-      setEditing(false);
-    }, 20);
-  };
-  const setPreviewValue = value => {
-    setEditing(true);
-    let finalValue = "";
-    if (value !== "") {
-      const parsedValue = parseInt(value);
-      finalValue = isNaN(parsedValue) ? 0 : parsedValue;
-    }
-    props.onChangePreview(`${finalValue}${props.unit}`);
-  };
-  const onReset = () => {
-    props.onReset();
-    setIsOpen(false);
-  };
-  const classNames = cn(["cursor-pointer bg-neutral-base", "border-sm border-solid border-neutral-muted", props.overridden && props.inheritedFrom && "bg-success text-neutral-light", props.disabled && "bg-neutral-disabled text-neutral-disabled pointer-events-none", "flex flex-row text-sm mx-auto justify-center rounded-sm py-px px-xxs"]);
-  const label = /*#__PURE__*/React.createElement("div", {
-    className: classNames,
-    onClick: () => setIsOpen(true),
-    style: {
-      width: 45
-    }
-  }, props.value ?? 0, " ", props.isKeyword ? null : props.unit);
-  const controls = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormComponentLabel, {
-    text: props.label
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-row space-x-sm"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex-col"
-  }, /*#__PURE__*/React.createElement(Input, {
-    onKeyDown: trackTyping,
-    inputRef: inputRef,
-    disabled: props.isKeyword,
-    size: "md",
-    value: props.isKeyword ? "-" : props.value ?? defaultValue,
-    onEnter: onEnter,
-    autoSelect: true,
-    onChange: value => setPreviewValue(value),
-    onBlur: e => setValue(e.target.value),
-    autoFocus: true
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "flex-col"
-  }, /*#__PURE__*/React.createElement(Select, {
-    size: "md",
-    value: props.unit,
-    options: props.units,
-    onChange: unit => {
-      setUnit(unit);
-      setTimeout(() => {
-        inputRef.current?.focus();
-      }, 20);
-    },
-    displayResetAction: false
-  }))), /*#__PURE__*/React.createElement(FormComponentNote, {
-    text: `Hit "Enter" or click outside the menu to close it.`
-  }));
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col w-full"
-  }, /*#__PURE__*/React.createElement(DropdownMenu, {
-    open: isOpen,
-    onOpenChange: () => setIsOpen(false),
-    trigger: label,
-    align: "center",
-    side: "bottom",
-    className: "shadow-lg"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "p-sm text-sm",
-    style: {
-      width: 200
-    }
-  }, controls, BASE_BREAKPOINT === breakpoint.name ? null : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Separator, {
-    variant: "dimmed",
-    margin: "lg"
-  }), /*#__PURE__*/React.createElement(InheritedFrom, {
-    inheritedFrom: props.inheritedFrom ?? BASE_BREAKPOINT,
-    overriddenAt: props.overridden ? breakpoint.name : null,
-    onReset: onReset
-  })))));
+const ValueSelector = (props)=>{
+    const { breakpoint } = useBreakpoint();
+    const [editing, setEditing] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const [inputChanged, setInputChanged] = useState(false);
+    const inputRef = useRef(null);
+    const defaultValue = editing ? "" : 0;
+    const currentValue = UnitValue.from(props.value);
+    const trackTyping = useCallback(()=>{
+        setInputChanged(true);
+    }, [
+        setInputChanged
+    ]);
+    const onEnter = ()=>{
+        setValue(props.value);
+        setIsOpen(false);
+    };
+    const setUnit = (unit)=>{
+        setEditing(false);
+        currentValue.setUnit(unit);
+        props.onChange(currentValue.toString());
+    };
+    const setValue = (value)=>{
+        const parsedValue = UnitValue.from(value);
+        if (!inputChanged) return;
+        const finalValue = parsedValue.getValue("0");
+        props.onChange(`${finalValue}${props.unit}`);
+        setInputChanged(false);
+        setTimeout(()=>{
+            setEditing(false);
+        }, 20);
+    };
+    const setPreviewValue = (value)=>{
+        setEditing(true);
+        let finalValue = "";
+        if ("" !== value) {
+            const parsedValue = parseInt(value);
+            finalValue = isNaN(parsedValue) ? 0 : parsedValue;
+        }
+        props.onChangePreview(`${finalValue}${props.unit}`);
+    };
+    const onReset = ()=>{
+        props.onReset();
+        setIsOpen(false);
+    };
+    const classNames = cn([
+        "cursor-pointer bg-neutral-base w-[45px]",
+        "border-sm border-solid border-neutral-muted",
+        {
+            "bg-success text-neutral-light": props.overridden && props.inheritedFrom
+        },
+        {
+            "text-neutral-dimmed border-neutral-dimmed-darker bg-neutral-subtle pointer-events-none": props.disabled
+        },
+        "flex flex-row text-sm mx-auto justify-center rounded-sm py-xxs px-xs"
+    ]);
+    const label = /*#__PURE__*/ react.createElement("div", {
+        className: classNames,
+        onClick: ()=>setIsOpen(true)
+    }, props.value ?? 0, " ", props.isKeyword ? null : props.unit);
+    const controls = /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        text: props.label
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-row space-x-sm"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex-col"
+    }, /*#__PURE__*/ react.createElement(Input, {
+        onKeyDown: trackTyping,
+        inputRef: inputRef,
+        disabled: props.isKeyword,
+        size: "md",
+        value: props.isKeyword ? "-" : props.value ?? defaultValue,
+        onEnter: onEnter,
+        autoSelect: true,
+        onChange: (value)=>setPreviewValue(value),
+        onBlur: (e)=>setValue(e.target.value),
+        autoFocus: true
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "flex-col"
+    }, /*#__PURE__*/ react.createElement(Select, {
+        size: "md",
+        value: props.unit,
+        options: props.units,
+        onChange: (unit)=>{
+            setUnit(unit);
+            setTimeout(()=>{
+                inputRef.current?.focus();
+            }, 20);
+        },
+        displayResetAction: false
+    }))), /*#__PURE__*/ react.createElement(FormComponentNote, {
+        text: 'Hit "Enter" or click outside the menu to close it.'
+    }));
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col w-full"
+    }, /*#__PURE__*/ react.createElement(DropdownMenu, {
+        open: isOpen,
+        onOpenChange: ()=>setIsOpen(false),
+        trigger: label,
+        align: "center",
+        side: "bottom",
+        className: "shadow-lg"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "p-sm text-sm",
+        style: {
+            width: 200
+        }
+    }, controls, BASE_BREAKPOINT === breakpoint.name ? null : /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Separator, {
+        variant: "dimmed",
+        margin: "lg"
+    }), /*#__PURE__*/ react.createElement(InheritedFrom, {
+        inheritedFrom: props.inheritedFrom ?? BASE_BREAKPOINT,
+        overriddenAt: props.overridden ? breakpoint.name : null,
+        onReset: onReset
+    })))));
 };
+export { ValueSelector };
 
 //# sourceMappingURL=ValueSelector.js.map

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.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\",\n        \"border-sm border-solid border-neutral-muted\",\n        props.overridden && props.inheritedFrom && \"bg-success text-neutral-light\",\n        props.disabled && \"bg-neutral-disabled text-neutral-disabled pointer-events-none\",\n        \"flex flex-row text-sm mx-auto justify-center rounded-sm py-px px-xxs\"\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={\"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"],"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":"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"}