@webiny/app-website-builder 6.1.0 → 6.2.0-beta.0

package/BaseEditor/config/EditorConfig.d.ts

@@ -28,7 +28,7 @@ export declare const EditorConfigComponents: {
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        Elements: ({ group, scope, transform }: import("./Elements.js").ElementsProps) => import("react").JSX.Element;
+        Elements: ({ group, scope, transform, render }: import("./Elements.js").ElementsProps) => import("react").JSX.Element;
         Layout: (() => import("react").JSX.Element) & {
             original: () => import("react").JSX.Element;
             originalName: string;
@@ -222,7 +222,8 @@ export declare const EditorConfigComponents: {
                     displayName: string;
                 }>) => (props: unknown) => React.JSX.Element;
             } & {
-                MenuItem: (props: import("./TopBar/MenuItem.js").MenuItemProps) => import("react").JSX.Element;
+                MenuItem: (props: import("@webiny/app-admin/index.js").OptionsMenuItemProps) => React.JSX.Element;
+                MenuLink: (props: import("@webiny/app-admin/index.js").OptionsMenuLinkProps) => React.JSX.Element;
             };
         };
         Toolbar: (() => import("react").JSX.Element) & {
@@ -504,7 +505,7 @@ export declare const EditorConfig: (({ priority, children }: import("@webiny/rea
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        Elements: ({ group, scope, transform }: import("./Elements.js").ElementsProps) => import("react").JSX.Element;
+        Elements: ({ group, scope, transform, render }: import("./Elements.js").ElementsProps) => import("react").JSX.Element;
         Layout: (() => import("react").JSX.Element) & {
             original: () => import("react").JSX.Element;
             originalName: string;
@@ -698,7 +699,8 @@ export declare const EditorConfig: (({ priority, children }: import("@webiny/rea
                     displayName: string;
                 }>) => (props: unknown) => React.JSX.Element;
             } & {
-                MenuItem: (props: import("./TopBar/MenuItem.js").MenuItemProps) => import("react").JSX.Element;
+                MenuItem: (props: import("@webiny/app-admin/index.js").OptionsMenuItemProps) => React.JSX.Element;
+                MenuLink: (props: import("@webiny/app-admin/index.js").OptionsMenuLinkProps) => React.JSX.Element;
             };
         };
         Toolbar: (() => import("react").JSX.Element) & {

package/BaseEditor/config/Elements.d.ts

@@ -21,5 +21,6 @@ export interface ElementsProps {
     group?: string;
     scope?: string;
     transform?: (elements: ElementConfig[]) => ElementConfig[];
+    render?: (elements: ElementConfig[]) => React.ReactNode;
 }
-export declare const Elements: ({ group, scope, transform }: ElementsProps) => React.JSX.Element;
+export declare const Elements: ({ group, scope, transform, render }: ElementsProps) => React.JSX.Element;

package/BaseEditor/config/Elements.js

@@ -8,10 +8,18 @@ const byScope = scope => {
   return scope ? item => item.scope === scope : passthrough;
 };
 const defaultTransform = elements => elements;
+const defaultRender = elements => {
+  return elements.map(element => /*#__PURE__*/React.createElement("wb-editor-ui-element", {
+    key: element.name,
+    "data-name": element.name,
+    class: "contents"
+  }, element.element));
+};
 export const Elements = ({
   group,
   scope,
-  transform = defaultTransform
+  transform = defaultTransform,
+  render = defaultRender
 }) => {
   const {
     elements
@@ -23,11 +31,7 @@ export const Elements = ({
     "data-scope": scope,
     "data-group": group,
     class: "contents"
-  }, transform(groupElements).map(element => /*#__PURE__*/React.createElement("wb-editor-ui-element", {
-    key: element.name,
-    "data-name": element.name,
-    class: "contents"
-  }, element.element)));
+  }, render(transform(groupElements)));
 };
 
 //# sourceMappingURL=Elements.js.map

package/BaseEditor/config/Elements.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","useEditorConfig","passthrough","byGroup","group","item","byScope","scope","defaultTransform","elements","Elements","transform","groupElements","filter","createElement","class","map","element","key","name"],"sources":["Elements.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { useEditorConfig } from \"./EditorConfig.js\";\nimport type { ElementConfig } from \"./Element.js\";\n\ndeclare module \"react\" {\n    namespace JSX {\n        interface IntrinsicElements {\n            \"wb-editor-ui-elements\": {\n                class?: string;\n                \"data-scope\"?: string;\n                \"data-group\"?: string;\n                [key: string]: any;\n            };\n            \"wb-editor-ui-element\": {\n                class?: string;\n                \"data-name\"?: string;\n                [key: string]: any;\n            };\n        }\n    }\n}\n\nexport interface ElementsProps {\n    group?: string;\n    scope?: string;\n    transform?: (elements: ElementConfig[]) => ElementConfig[];\n}\n\nconst passthrough = () => true;\n\nconst byGroup = (group?: string) => {\n    return group ? (item: ElementConfig) => item.group === group : passthrough;\n};\nconst byScope = (scope?: string) => {\n    return scope ? (item: ElementConfig) => item.scope === scope : passthrough;\n};\n\nconst defaultTransform = (elements: ElementConfig[]) => elements;\n\nexport const Elements = ({ group, scope, transform = defaultTransform }: ElementsProps) => {\n    const { elements } = useEditorConfig();\n\n    const groupElements = useMemo(() => {\n        return elements.filter(byGroup(group)).filter(byScope(scope));\n    }, [elements, group, scope]);\n\n    return (\n        <wb-editor-ui-elements data-scope={scope} data-group={group} class={\"contents\"}>\n            {transform(groupElements).map(element => (\n                <wb-editor-ui-element\n                    key={element.name}\n                    data-name={element.name}\n                    class={\"contents\"}\n                >\n                    {element.element}\n                </wb-editor-ui-element>\n            ))}\n        </wb-editor-ui-elements>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AA2BxB,MAAMC,WAAW,GAAGA,CAAA,KAAM,IAAI;AAE9B,MAAMC,OAAO,GAAIC,KAAc,IAAK;EAChC,OAAOA,KAAK,GAAIC,IAAmB,IAAKA,IAAI,CAACD,KAAK,KAAKA,KAAK,GAAGF,WAAW;AAC9E,CAAC;AACD,MAAMI,OAAO,GAAIC,KAAc,IAAK;EAChC,OAAOA,KAAK,GAAIF,IAAmB,IAAKA,IAAI,CAACE,KAAK,KAAKA,KAAK,GAAGL,WAAW;AAC9E,CAAC;AAED,MAAMM,gBAAgB,GAAIC,QAAyB,IAAKA,QAAQ;AAEhE,OAAO,MAAMC,QAAQ,GAAGA,CAAC;EAAEN,KAAK;EAAEG,KAAK;EAAEI,SAAS,GAAGH;AAAgC,CAAC,KAAK;EACvF,MAAM;IAAEC;EAAS,CAAC,GAAGR,eAAe,CAAC,CAAC;EAEtC,MAAMW,aAAa,GAAGZ,OAAO,CAAC,MAAM;IAChC,OAAOS,QAAQ,CAACI,MAAM,CAACV,OAAO,CAACC,KAAK,CAAC,CAAC,CAACS,MAAM,CAACP,OAAO,CAACC,KAAK,CAAC,CAAC;EACjE,CAAC,EAAE,CAACE,QAAQ,EAAEL,KAAK,EAAEG,KAAK,CAAC,CAAC;EAE5B,oBACIR,KAAA,CAAAe,aAAA;IAAuB,cAAYP,KAAM;IAAC,cAAYH,KAAM;IAACW,KAAK,EAAE;EAAW,GAC1EJ,SAAS,CAACC,aAAa,CAAC,CAACI,GAAG,CAACC,OAAO,iBACjClB,KAAA,CAAAe,aAAA;IACII,GAAG,EAAED,OAAO,CAACE,IAAK;IAClB,aAAWF,OAAO,CAACE,IAAK;IACxBJ,KAAK,EAAE;EAAW,GAEjBE,OAAO,CAACA,OACS,CACzB,CACkB,CAAC;AAEhC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useMemo","useEditorConfig","passthrough","byGroup","group","item","byScope","scope","defaultTransform","elements","defaultRender","map","element","createElement","key","name","class","Elements","transform","render","groupElements","filter"],"sources":["Elements.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { useEditorConfig } from \"./EditorConfig.js\";\nimport type { ElementConfig } from \"./Element.js\";\n\ndeclare module \"react\" {\n    namespace JSX {\n        interface IntrinsicElements {\n            \"wb-editor-ui-elements\": {\n                class?: string;\n                \"data-scope\"?: string;\n                \"data-group\"?: string;\n                [key: string]: any;\n            };\n            \"wb-editor-ui-element\": {\n                class?: string;\n                \"data-name\"?: string;\n                [key: string]: any;\n            };\n        }\n    }\n}\n\nexport interface ElementsProps {\n    group?: string;\n    scope?: string;\n    transform?: (elements: ElementConfig[]) => ElementConfig[];\n    render?: (elements: ElementConfig[]) => React.ReactNode;\n}\n\nconst passthrough = () => true;\n\nconst byGroup = (group?: string) => {\n    return group ? (item: ElementConfig) => item.group === group : passthrough;\n};\nconst byScope = (scope?: string) => {\n    return scope ? (item: ElementConfig) => item.scope === scope : passthrough;\n};\n\nconst defaultTransform = (elements: ElementConfig[]) => elements;\n\nconst defaultRender = (elements: ElementConfig[]) => {\n    return elements.map(element => (\n        <wb-editor-ui-element key={element.name} data-name={element.name} class={\"contents\"}>\n            {element.element}\n        </wb-editor-ui-element>\n    ));\n};\n\nexport const Elements = ({\n    group,\n    scope,\n    transform = defaultTransform,\n    render = defaultRender\n}: ElementsProps) => {\n    const { elements } = useEditorConfig();\n\n    const groupElements = useMemo(() => {\n        return elements.filter(byGroup(group)).filter(byScope(scope));\n    }, [elements, group, scope]);\n\n    return (\n        <wb-editor-ui-elements data-scope={scope} data-group={group} class={\"contents\"}>\n            {render(transform(groupElements))}\n        </wb-editor-ui-elements>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AA4BxB,MAAMC,WAAW,GAAGA,CAAA,KAAM,IAAI;AAE9B,MAAMC,OAAO,GAAIC,KAAc,IAAK;EAChC,OAAOA,KAAK,GAAIC,IAAmB,IAAKA,IAAI,CAACD,KAAK,KAAKA,KAAK,GAAGF,WAAW;AAC9E,CAAC;AACD,MAAMI,OAAO,GAAIC,KAAc,IAAK;EAChC,OAAOA,KAAK,GAAIF,IAAmB,IAAKA,IAAI,CAACE,KAAK,KAAKA,KAAK,GAAGL,WAAW;AAC9E,CAAC;AAED,MAAMM,gBAAgB,GAAIC,QAAyB,IAAKA,QAAQ;AAEhE,MAAMC,aAAa,GAAID,QAAyB,IAAK;EACjD,OAAOA,QAAQ,CAACE,GAAG,CAACC,OAAO,iBACvBb,KAAA,CAAAc,aAAA;IAAsBC,GAAG,EAAEF,OAAO,CAACG,IAAK;IAAC,aAAWH,OAAO,CAACG,IAAK;IAACC,KAAK,EAAE;EAAW,GAC/EJ,OAAO,CAACA,OACS,CACzB,CAAC;AACN,CAAC;AAED,OAAO,MAAMK,QAAQ,GAAGA,CAAC;EACrBb,KAAK;EACLG,KAAK;EACLW,SAAS,GAAGV,gBAAgB;EAC5BW,MAAM,GAAGT;AACE,CAAC,KAAK;EACjB,MAAM;IAAED;EAAS,CAAC,GAAGR,eAAe,CAAC,CAAC;EAEtC,MAAMmB,aAAa,GAAGpB,OAAO,CAAC,MAAM;IAChC,OAAOS,QAAQ,CAACY,MAAM,CAAClB,OAAO,CAACC,KAAK,CAAC,CAAC,CAACiB,MAAM,CAACf,OAAO,CAACC,KAAK,CAAC,CAAC;EACjE,CAAC,EAAE,CAACE,QAAQ,EAAEL,KAAK,EAAEG,KAAK,CAAC,CAAC;EAE5B,oBACIR,KAAA,CAAAc,aAAA;IAAuB,cAAYN,KAAM;IAAC,cAAYH,KAAM;IAACY,KAAK,EAAE;EAAW,GAC1EG,MAAM,CAACD,SAAS,CAACE,aAAa,CAAC,CACb,CAAC;AAEhC,CAAC","ignoreList":[]}

package/BaseEditor/config/TopBar/Layout.d.ts

@@ -18,3 +18,4 @@ export declare const Layout: (() => React.JSX.Element) & {
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
+export declare const TopBarOptionsMenu: () => React.JSX.Element;

package/BaseEditor/config/TopBar/Layout.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { makeDecoratable } from "@webiny/app-admin";
+import { makeDecoratable, OptionsMenu } from "@webiny/app-admin";
 import { HeaderBar } from "@webiny/admin-ui";
 import { TopBar } from "./TopBar.js";
 export const Layout = makeDecoratable("TopBarLayout", () => {
@@ -13,11 +13,24 @@ export const Layout = makeDecoratable("TopBarLayout", () => {
       group: "center"
     }),
     end: /*#__PURE__*/React.createElement("div", {
-      className: "flex gap-x-sm"
+      className: "flex items-center gap-sm"
     }, /*#__PURE__*/React.createElement(TopBar.Elements, {
       group: "actions"
     }))
   });
 });
+export const TopBarOptionsMenu = () => {
+  return /*#__PURE__*/React.createElement(TopBar.Elements, {
+    group: "dropdownActions",
+    render: elements => {
+      if (elements.length === 0) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(OptionsMenu, {
+        actions: elements
+      });
+    }
+  });
+};
 
 //# sourceMappingURL=Layout.js.map

package/BaseEditor/config/TopBar/Layout.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","HeaderBar","TopBar","Layout","createElement","start","Elements","group","middle","end","className"],"sources":["Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport { HeaderBar } from \"@webiny/admin-ui\";\nimport { TopBar } from \"./TopBar.js\";\n\nexport const Layout = makeDecoratable(\"TopBarLayout\", () => {\n    return (\n        <HeaderBar\n            data-role={\"top-bar-layout\"}\n            data-affects-preview={\"height\"}\n            start={<TopBar.Elements group={\"left\"} />}\n            middle={<TopBar.Elements group={\"center\"} />}\n            end={\n                <div className={\"flex gap-x-sm\"}>\n                    <TopBar.Elements group={\"actions\"} />\n                </div>\n            }\n        />\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,mBAAmB;AACnD,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,MAAM;AAEf,OAAO,MAAMC,MAAM,GAAGH,eAAe,CAAC,cAAc,EAAE,MAAM;EACxD,oBACID,KAAA,CAAAK,aAAA,CAACH,SAAS;IACN,aAAW,gBAAiB;IAC5B,wBAAsB,QAAS;IAC/BI,KAAK,eAAEN,KAAA,CAAAK,aAAA,CAACF,MAAM,CAACI,QAAQ;MAACC,KAAK,EAAE;IAAO,CAAE,CAAE;IAC1CC,MAAM,eAAET,KAAA,CAAAK,aAAA,CAACF,MAAM,CAACI,QAAQ;MAACC,KAAK,EAAE;IAAS,CAAE,CAAE;IAC7CE,GAAG,eACCV,KAAA,CAAAK,aAAA;MAAKM,SAAS,EAAE;IAAgB,gBAC5BX,KAAA,CAAAK,aAAA,CAACF,MAAM,CAACI,QAAQ;MAACC,KAAK,EAAE;IAAU,CAAE,CACnC;EACR,CACJ,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","OptionsMenu","HeaderBar","TopBar","Layout","createElement","start","Elements","group","middle","end","className","TopBarOptionsMenu","render","elements","length","actions"],"sources":["Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable, OptionsMenu } from \"@webiny/app-admin\";\nimport { HeaderBar } from \"@webiny/admin-ui\";\nimport { TopBar } from \"./TopBar.js\";\n\nexport const Layout = makeDecoratable(\"TopBarLayout\", () => {\n    return (\n        <HeaderBar\n            data-role={\"top-bar-layout\"}\n            data-affects-preview={\"height\"}\n            start={<TopBar.Elements group={\"left\"} />}\n            middle={<TopBar.Elements group={\"center\"} />}\n            end={\n                <div className={\"flex items-center gap-sm\"}>\n                    <TopBar.Elements group={\"actions\"} />\n                </div>\n            }\n        />\n    );\n});\n\nexport const TopBarOptionsMenu = () => {\n    return (\n        <TopBar.Elements\n            group={\"dropdownActions\"}\n            render={elements => {\n                if (elements.length === 0) {\n                    return null;\n                }\n\n                return <OptionsMenu actions={elements} />;\n            }}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,EAAEC,WAAW,QAAQ,mBAAmB;AAChE,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,MAAM;AAEf,OAAO,MAAMC,MAAM,GAAGJ,eAAe,CAAC,cAAc,EAAE,MAAM;EACxD,oBACID,KAAA,CAAAM,aAAA,CAACH,SAAS;IACN,aAAW,gBAAiB;IAC5B,wBAAsB,QAAS;IAC/BI,KAAK,eAAEP,KAAA,CAAAM,aAAA,CAACF,MAAM,CAACI,QAAQ;MAACC,KAAK,EAAE;IAAO,CAAE,CAAE;IAC1CC,MAAM,eAAEV,KAAA,CAAAM,aAAA,CAACF,MAAM,CAACI,QAAQ;MAACC,KAAK,EAAE;IAAS,CAAE,CAAE;IAC7CE,GAAG,eACCX,KAAA,CAAAM,aAAA;MAAKM,SAAS,EAAE;IAA2B,gBACvCZ,KAAA,CAAAM,aAAA,CAACF,MAAM,CAACI,QAAQ;MAACC,KAAK,EAAE;IAAU,CAAE,CACnC;EACR,CACJ,CAAC;AAEV,CAAC,CAAC;AAEF,OAAO,MAAMI,iBAAiB,GAAGA,CAAA,KAAM;EACnC,oBACIb,KAAA,CAAAM,aAAA,CAACF,MAAM,CAACI,QAAQ;IACZC,KAAK,EAAE,iBAAkB;IACzBK,MAAM,EAAEC,QAAQ,IAAI;MAChB,IAAIA,QAAQ,CAACC,MAAM,KAAK,CAAC,EAAE;QACvB,OAAO,IAAI;MACf;MAEA,oBAAOhB,KAAA,CAAAM,aAAA,CAACJ,WAAW;QAACe,OAAO,EAAEF;MAAS,CAAE,CAAC;IAC7C;EAAE,CACL,CAAC;AAEV,CAAC","ignoreList":[]}

package/BaseEditor/config/TopBar/TopBar.d.ts

@@ -120,6 +120,7 @@ export declare const TopBar: (() => React.JSX.Element) & {
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     } & {
-        MenuItem: (props: import("./MenuItem.js").MenuItemProps) => React.JSX.Element;
+        MenuItem: (props: import("@webiny/app-admin").OptionsMenuItemProps) => React.JSX.Element;
+        MenuLink: (props: import("@webiny/app-admin").OptionsMenuLinkProps) => React.JSX.Element;
     };
 };

package/BaseEditor/config/TopBar/TopBar.js

@@ -1,11 +1,11 @@
 import React from "react";
 import { makeDecoratable } from "@webiny/app-admin";
+import { OptionsMenuItem, OptionsMenuLink } from "@webiny/app-admin";
 import { Element as BaseElement } from "../Element.js";
 import { Elements as BaseElements } from "../Elements.js";
 import { Divider } from "./Divider.js";
 import { Layout } from "./Layout.js";
 import { createGetId } from "../createGetId.js";
-import { MenuItem } from "./MenuItem.js";
 const SCOPE = "topBar";
 const BaseTopBar = () => {
   return /*#__PURE__*/React.createElement(Layout, null);
@@ -41,7 +41,8 @@ export const TopBar = Object.assign(BaseTopBar, {
   Divider,
   Action,
   DropdownAction: Object.assign(BaseDropdownAction, {
-    MenuItem
+    MenuItem: OptionsMenuItem,
+    MenuLink: OptionsMenuLink
   })
 });
 

package/BaseEditor/config/TopBar/TopBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","Element","BaseElement","Elements","BaseElements","Divider","Layout","createGetId","MenuItem","SCOPE","BaseTopBar","createElement","getElementId","props","Object","assign","scope","id","name","before","undefined","after","Action","group","BaseDropdownAction","TopBar","DropdownAction"],"sources":["TopBar.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { ElementProps as BaseElementProps } from \"../Element.js\";\nimport { Element as BaseElement } from \"../Element.js\";\nimport type { ElementsProps as BaseElementsProps } from \"../Elements.js\";\nimport { Elements as BaseElements } from \"../Elements.js\";\nimport { Divider } from \"./Divider.js\";\nimport { Layout } from \"./Layout.js\";\nimport { createGetId } from \"../createGetId.js\";\nimport { MenuItem } from \"./MenuItem.js\";\n\nconst SCOPE = \"topBar\";\n\nconst BaseTopBar = () => {\n    return <Layout />;\n};\n\nconst getElementId = createGetId(SCOPE)();\n\nexport type ElementProps = Omit<BaseElementProps, \"scope\" | \"id\">;\n\nconst Element = makeDecoratable(\"TopBarElement\", (props: ElementProps) => {\n    return (\n        <BaseElement\n            {...props}\n            scope={SCOPE}\n            id={getElementId(props.name)}\n            before={props.before ? getElementId(props.before) : undefined}\n            after={props.after ? getElementId(props.after) : undefined}\n        />\n    );\n});\n\nexport type ActionProps = Omit<ElementProps, \"group\">;\n\nconst Action = makeDecoratable(\"TopBarAction\", (props: ActionProps) => {\n    return <Element {...props} group={\"actions\"} />;\n});\n\nexport type DropdownActionProps = Omit<ElementProps, \"group\">;\n\nconst BaseDropdownAction = makeDecoratable(\"TopBarDropdownAction\", (props: DropdownActionProps) => {\n    return <Element {...props} group={\"dropdownActions\"} />;\n});\n\nexport type ElementsProps = Omit<BaseElementsProps, \"scope\">;\n\nconst Elements = makeDecoratable(\"TopBarElements\", (props: ElementsProps) => {\n    return <BaseElements {...props} scope={SCOPE} />;\n});\n\nexport const TopBar = Object.assign(BaseTopBar, {\n    Element,\n    Elements,\n    Layout,\n    Divider,\n    Action,\n    DropdownAction: Object.assign(BaseDropdownAction, { MenuItem })\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,OAAO,IAAIC,WAAW;AAE/B,SAASC,QAAQ,IAAIC,YAAY;AACjC,SAASC,OAAO;AAChB,SAASC,MAAM;AACf,SAASC,WAAW;AACpB,SAASC,QAAQ;AAEjB,MAAMC,KAAK,GAAG,QAAQ;AAEtB,MAAMC,UAAU,GAAGA,CAAA,KAAM;EACrB,oBAAOX,KAAA,CAAAY,aAAA,CAACL,MAAM,MAAE,CAAC;AACrB,CAAC;AAED,MAAMM,YAAY,GAAGL,WAAW,CAACE,KAAK,CAAC,CAAC,CAAC;AAIzC,MAAMR,OAAO,GAAGD,eAAe,CAAC,eAAe,EAAGa,KAAmB,IAAK;EACtE,oBACId,KAAA,CAAAY,aAAA,CAACT,WAAW,EAAAY,MAAA,CAAAC,MAAA,KACJF,KAAK;IACTG,KAAK,EAAEP,KAAM;IACbQ,EAAE,EAAEL,YAAY,CAACC,KAAK,CAACK,IAAI,CAAE;IAC7BC,MAAM,EAAEN,KAAK,CAACM,MAAM,GAAGP,YAAY,CAACC,KAAK,CAACM,MAAM,CAAC,GAAGC,SAAU;IAC9DC,KAAK,EAAER,KAAK,CAACQ,KAAK,GAAGT,YAAY,CAACC,KAAK,CAACQ,KAAK,CAAC,GAAGD;EAAU,EAC9D,CAAC;AAEV,CAAC,CAAC;AAIF,MAAME,MAAM,GAAGtB,eAAe,CAAC,cAAc,EAAGa,KAAkB,IAAK;EACnE,oBAAOd,KAAA,CAAAY,aAAA,CAACV,OAAO,EAAAa,MAAA,CAAAC,MAAA,KAAKF,KAAK;IAAEU,KAAK,EAAE;EAAU,EAAE,CAAC;AACnD,CAAC,CAAC;AAIF,MAAMC,kBAAkB,GAAGxB,eAAe,CAAC,sBAAsB,EAAGa,KAA0B,IAAK;EAC/F,oBAAOd,KAAA,CAAAY,aAAA,CAACV,OAAO,EAAAa,MAAA,CAAAC,MAAA,KAAKF,KAAK;IAAEU,KAAK,EAAE;EAAkB,EAAE,CAAC;AAC3D,CAAC,CAAC;AAIF,MAAMpB,QAAQ,GAAGH,eAAe,CAAC,gBAAgB,EAAGa,KAAoB,IAAK;EACzE,oBAAOd,KAAA,CAAAY,aAAA,CAACP,YAAY,EAAAU,MAAA,CAAAC,MAAA,KAAKF,KAAK;IAAEG,KAAK,EAAEP;EAAM,EAAE,CAAC;AACpD,CAAC,CAAC;AAEF,OAAO,MAAMgB,MAAM,GAAGX,MAAM,CAACC,MAAM,CAACL,UAAU,EAAE;EAC5CT,OAAO;EACPE,QAAQ;EACRG,MAAM;EACND,OAAO;EACPiB,MAAM;EACNI,cAAc,EAAEZ,MAAM,CAACC,MAAM,CAACS,kBAAkB,EAAE;IAAEhB;EAAS,CAAC;AAClE,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","OptionsMenuItem","OptionsMenuLink","Element","BaseElement","Elements","BaseElements","Divider","Layout","createGetId","SCOPE","BaseTopBar","createElement","getElementId","props","Object","assign","scope","id","name","before","undefined","after","Action","group","BaseDropdownAction","TopBar","DropdownAction","MenuItem","MenuLink"],"sources":["TopBar.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport { OptionsMenuItem, OptionsMenuLink } from \"@webiny/app-admin\";\nimport type { ElementProps as BaseElementProps } from \"../Element.js\";\nimport { Element as BaseElement } from \"../Element.js\";\nimport type { ElementsProps as BaseElementsProps } from \"../Elements.js\";\nimport { Elements as BaseElements } from \"../Elements.js\";\nimport { Divider } from \"./Divider.js\";\nimport { Layout } from \"./Layout.js\";\nimport { createGetId } from \"../createGetId.js\";\n\nconst SCOPE = \"topBar\";\n\nconst BaseTopBar = () => {\n    return <Layout />;\n};\n\nconst getElementId = createGetId(SCOPE)();\n\nexport type ElementProps = Omit<BaseElementProps, \"scope\" | \"id\">;\n\nconst Element = makeDecoratable(\"TopBarElement\", (props: ElementProps) => {\n    return (\n        <BaseElement\n            {...props}\n            scope={SCOPE}\n            id={getElementId(props.name)}\n            before={props.before ? getElementId(props.before) : undefined}\n            after={props.after ? getElementId(props.after) : undefined}\n        />\n    );\n});\n\nexport type ActionProps = Omit<ElementProps, \"group\">;\n\nconst Action = makeDecoratable(\"TopBarAction\", (props: ActionProps) => {\n    return <Element {...props} group={\"actions\"} />;\n});\n\nexport type DropdownActionProps = Omit<ElementProps, \"group\">;\n\nconst BaseDropdownAction = makeDecoratable(\"TopBarDropdownAction\", (props: DropdownActionProps) => {\n    return <Element {...props} group={\"dropdownActions\"} />;\n});\n\nexport type ElementsProps = Omit<BaseElementsProps, \"scope\">;\n\nconst Elements = makeDecoratable(\"TopBarElements\", (props: ElementsProps) => {\n    return <BaseElements {...props} scope={SCOPE} />;\n});\n\nexport const TopBar = Object.assign(BaseTopBar, {\n    Element,\n    Elements,\n    Layout,\n    Divider,\n    Action,\n    DropdownAction: Object.assign(BaseDropdownAction, {\n        MenuItem: OptionsMenuItem,\n        MenuLink: OptionsMenuLink\n    })\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,mBAAmB;AACnD,SAASC,eAAe,EAAEC,eAAe,QAAQ,mBAAmB;AAEpE,SAASC,OAAO,IAAIC,WAAW;AAE/B,SAASC,QAAQ,IAAIC,YAAY;AACjC,SAASC,OAAO;AAChB,SAASC,MAAM;AACf,SAASC,WAAW;AAEpB,MAAMC,KAAK,GAAG,QAAQ;AAEtB,MAAMC,UAAU,GAAGA,CAAA,KAAM;EACrB,oBAAOZ,KAAA,CAAAa,aAAA,CAACJ,MAAM,MAAE,CAAC;AACrB,CAAC;AAED,MAAMK,YAAY,GAAGJ,WAAW,CAACC,KAAK,CAAC,CAAC,CAAC;AAIzC,MAAMP,OAAO,GAAGH,eAAe,CAAC,eAAe,EAAGc,KAAmB,IAAK;EACtE,oBACIf,KAAA,CAAAa,aAAA,CAACR,WAAW,EAAAW,MAAA,CAAAC,MAAA,KACJF,KAAK;IACTG,KAAK,EAAEP,KAAM;IACbQ,EAAE,EAAEL,YAAY,CAACC,KAAK,CAACK,IAAI,CAAE;IAC7BC,MAAM,EAAEN,KAAK,CAACM,MAAM,GAAGP,YAAY,CAACC,KAAK,CAACM,MAAM,CAAC,GAAGC,SAAU;IAC9DC,KAAK,EAAER,KAAK,CAACQ,KAAK,GAAGT,YAAY,CAACC,KAAK,CAACQ,KAAK,CAAC,GAAGD;EAAU,EAC9D,CAAC;AAEV,CAAC,CAAC;AAIF,MAAME,MAAM,GAAGvB,eAAe,CAAC,cAAc,EAAGc,KAAkB,IAAK;EACnE,oBAAOf,KAAA,CAAAa,aAAA,CAACT,OAAO,EAAAY,MAAA,CAAAC,MAAA,KAAKF,KAAK;IAAEU,KAAK,EAAE;EAAU,EAAE,CAAC;AACnD,CAAC,CAAC;AAIF,MAAMC,kBAAkB,GAAGzB,eAAe,CAAC,sBAAsB,EAAGc,KAA0B,IAAK;EAC/F,oBAAOf,KAAA,CAAAa,aAAA,CAACT,OAAO,EAAAY,MAAA,CAAAC,MAAA,KAAKF,KAAK;IAAEU,KAAK,EAAE;EAAkB,EAAE,CAAC;AAC3D,CAAC,CAAC;AAIF,MAAMnB,QAAQ,GAAGL,eAAe,CAAC,gBAAgB,EAAGc,KAAoB,IAAK;EACzE,oBAAOf,KAAA,CAAAa,aAAA,CAACN,YAAY,EAAAS,MAAA,CAAAC,MAAA,KAAKF,KAAK;IAAEG,KAAK,EAAEP;EAAM,EAAE,CAAC;AACpD,CAAC,CAAC;AAEF,OAAO,MAAMgB,MAAM,GAAGX,MAAM,CAACC,MAAM,CAACL,UAAU,EAAE;EAC5CR,OAAO;EACPE,QAAQ;EACRG,MAAM;EACND,OAAO;EACPgB,MAAM;EACNI,cAAc,EAAEZ,MAAM,CAACC,MAAM,CAACS,kBAAkB,EAAE;IAC9CG,QAAQ,EAAE3B,eAAe;IACzB4B,QAAQ,EAAE3B;EACd,CAAC;AACL,CAAC,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/Border.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const BorderControl: ({ elementId }: {
+    elementId: string;
+}) => React.JSX.Element;

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/Border.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { BorderWidth } from "./BorderWidth.js";
+import { BorderRadius } from "./BorderRadius.js";
+import { BorderStyle } from "./BorderStyle.js";
+import { BorderColor } from "./BorderColor.js";
+export const BorderControl = ({
+  elementId
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-sm w-full"
+  }, /*#__PURE__*/React.createElement(BorderWidth, {
+    elementId: elementId
+  }), /*#__PURE__*/React.createElement(BorderRadius, {
+    elementId: elementId
+  }), /*#__PURE__*/React.createElement(BorderStyle, {
+    elementId: elementId
+  }), /*#__PURE__*/React.createElement(BorderColor, {
+    elementId: elementId
+  }));
+};
+
+//# sourceMappingURL=Border.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/Border.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","BorderWidth","BorderRadius","BorderStyle","BorderColor","BorderControl","elementId","createElement","className"],"sources":["Border.tsx"],"sourcesContent":["import React from \"react\";\nimport { BorderWidth } from \"./BorderWidth.js\";\nimport { BorderRadius } from \"./BorderRadius.js\";\nimport { BorderStyle } from \"./BorderStyle.js\";\nimport { BorderColor } from \"./BorderColor.js\";\n\nexport const BorderControl = ({ elementId }: { elementId: string }) => {\n    return (\n        <div className=\"flex flex-col gap-sm w-full\">\n            <BorderWidth elementId={elementId} />\n            <BorderRadius elementId={elementId} />\n            <BorderStyle elementId={elementId} />\n            <BorderColor elementId={elementId} />\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW;AACpB,SAASC,YAAY;AACrB,SAASC,WAAW;AACpB,SAASC,WAAW;AAEpB,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC;AAAiC,CAAC,KAAK;EACnE,oBACIN,KAAA,CAAAO,aAAA;IAAKC,SAAS,EAAC;EAA6B,gBACxCR,KAAA,CAAAO,aAAA,CAACN,WAAW;IAACK,SAAS,EAAEA;EAAU,CAAE,CAAC,eACrCN,KAAA,CAAAO,aAAA,CAACL,YAAY;IAACI,SAAS,EAAEA;EAAU,CAAE,CAAC,eACtCN,KAAA,CAAAO,aAAA,CAACJ,WAAW;IAACG,SAAS,EAAEA;EAAU,CAAE,CAAC,eACrCN,KAAA,CAAAO,aAAA,CAACH,WAAW;IAACE,SAAS,EAAEA;EAAU,CAAE,CACnC,CAAC;AAEd,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderColor.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface BorderColorProps {
+    elementId: string;
+}
+export declare const BorderColor: (({ elementId }: BorderColorProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderColor.js

@@ -0,0 +1,51 @@
+import React 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 BorderColor = observer(({
+  elementId
+}) => {
+  const {
+    styles,
+    onChange,
+    onPreviewChange,
+    inheritanceMap
+  } = useStyles(elementId);
+  const handleDrag = value => {
+    onPreviewChange(({
+      styles
+    }) => {
+      styles.set("borderColor", value);
+    });
+  };
+  const handleCommit = value => {
+    onChange(({
+      styles
+    }) => {
+      styles.set("borderColor", value);
+    });
+  };
+  const onReset = () => {
+    onChange(({
+      styles
+    }) => {
+      styles.unset("borderColor");
+    });
+  };
+  const inheritance = inheritanceMap?.borderColor ?? {};
+  return /*#__PURE__*/React.createElement(ColorPicker, {
+    label: /*#__PURE__*/React.createElement(InheritanceLabel, {
+      onReset: onReset,
+      isOverridden: inheritance?.overridden ?? false,
+      inheritedFrom: inheritance?.inheritedFrom,
+      text: "Border color"
+    }),
+    description: "Select border color",
+    value: styles.borderColor ?? "transparent",
+    onChange: handleDrag,
+    onChangeComplete: handleCommit
+  });
+});
+
+//# sourceMappingURL=BorderColor.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderColor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","observer","ColorPicker","useStyles","InheritanceLabel","BorderColor","elementId","styles","onChange","onPreviewChange","inheritanceMap","handleDrag","value","set","handleCommit","onReset","unset","inheritance","borderColor","createElement","label","isOverridden","overridden","inheritedFrom","text","description","onChangeComplete"],"sources":["BorderColor.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { ColorPicker } from \"@webiny/admin-ui\";\nimport { useStyles } from \"../../useStyles.js\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\n\ninterface BorderColorProps {\n    elementId: string;\n}\n\nexport const BorderColor = observer(({ elementId }: BorderColorProps) => {\n    const { styles, onChange, onPreviewChange, inheritanceMap } = useStyles(elementId);\n\n    const handleDrag = (value: string) => {\n        onPreviewChange(({ styles }) => {\n            styles.set(\"borderColor\", value);\n        });\n    };\n\n    const handleCommit = (value: string) => {\n        onChange(({ styles }) => {\n            styles.set(\"borderColor\", value);\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"borderColor\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.borderColor ?? {};\n\n    return (\n        <ColorPicker\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Border color\"}\n                />\n            }\n            description={\"Select border color\"}\n            value={styles.borderColor ?? \"transparent\"}\n            onChange={handleDrag}\n            onChangeComplete={handleCommit}\n        />\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,WAAW,QAAQ,kBAAkB;AAC9C,SAASC,SAAS;AAClB,SAASC,gBAAgB;AAMzB,OAAO,MAAMC,WAAW,GAAGJ,QAAQ,CAAC,CAAC;EAAEK;AAA4B,CAAC,KAAK;EACrE,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,eAAe;IAAEC;EAAe,CAAC,GAAGP,SAAS,CAACG,SAAS,CAAC;EAElF,MAAMK,UAAU,GAAIC,KAAa,IAAK;IAClCH,eAAe,CAAC,CAAC;MAAEF;IAAO,CAAC,KAAK;MAC5BA,MAAM,CAACM,GAAG,CAAC,aAAa,EAAED,KAAK,CAAC;IACpC,CAAC,CAAC;EACN,CAAC;EAED,MAAME,YAAY,GAAIF,KAAa,IAAK;IACpCJ,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACM,GAAG,CAAC,aAAa,EAAED,KAAK,CAAC;IACpC,CAAC,CAAC;EACN,CAAC;EAED,MAAMG,OAAO,GAAGA,CAAA,KAAM;IAClBP,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACS,KAAK,CAAC,aAAa,CAAC;IAC/B,CAAC,CAAC;EACN,CAAC;EAED,MAAMC,WAAW,GAAGP,cAAc,EAAEQ,WAAW,IAAI,CAAC,CAAC;EAErD,oBACIlB,KAAA,CAAAmB,aAAA,CAACjB,WAAW;IACRkB,KAAK,eACDpB,KAAA,CAAAmB,aAAA,CAACf,gBAAgB;MACbW,OAAO,EAAEA,OAAQ;MACjBM,YAAY,EAAEJ,WAAW,EAAEK,UAAU,IAAI,KAAM;MAC/CC,aAAa,EAAEN,WAAW,EAAEM,aAAc;MAC1CC,IAAI,EAAE;IAAe,CACxB,CACJ;IACDC,WAAW,EAAE,qBAAsB;IACnCb,KAAK,EAAEL,MAAM,CAACW,WAAW,IAAI,aAAc;IAC3CV,QAAQ,EAAEG,UAAW;IACrBe,gBAAgB,EAAEZ;EAAa,CAClC,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderRadius.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface BorderRadiusProps {
+    elementId: string;
+}
+export declare const BorderRadius: (({ elementId }: BorderRadiusProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderRadius.js

@@ -0,0 +1,138 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { LinkedEditing } from "./LinkedEditing.js";
+import { useStyles } from "../../useStyles.js";
+import { ValueSelector } from "../../ValueSelector.js";
+import { useStyleValue } from "../../useStyleValue.js";
+import { UnitsOptions } from "../../UnitsOptions.js";
+const radiusOptions = UnitsOptions.widthUnits().getOptions();
+export const BorderRadius = observer(({
+  elementId
+}) => {
+  const {
+    onChange,
+    onPreviewChange,
+    metadata
+  } = useStyles(elementId);
+  const topLeft = useStyleValue(elementId, "borderTopLeftRadius");
+  const topRight = useStyleValue(elementId, "borderTopRightRadius");
+  const bottomRight = useStyleValue(elementId, "borderBottomRightRadius");
+  const bottomLeft = useStyleValue(elementId, "borderBottomLeftRadius");
+  const linked = metadata.get("borderRadiusLinkedEditing") ?? true;
+  const onToggleLinkedEditing = linked => {
+    onChange(({
+      styles,
+      metadata
+    }) => {
+      if (linked) {
+        const value = `${topLeft.value ?? 0}${topLeft.unit}`;
+        styles.set("borderTopRightRadius", value);
+        styles.set("borderBottomRightRadius", value);
+        styles.set("borderBottomLeftRadius", value);
+      }
+      metadata.set("borderRadiusLinkedEditing", linked);
+    });
+  };
+  const onTopLeftChange = value => {
+    if (linked) {
+      onChange(({
+        styles
+      }) => {
+        styles.set("borderTopLeftRadius", value);
+        styles.set("borderTopRightRadius", value);
+        styles.set("borderBottomRightRadius", value);
+        styles.set("borderBottomLeftRadius", value);
+      });
+    } else {
+      topLeft.onChange(value);
+    }
+  };
+  const onTopLeftPreviewChange = value => {
+    if (linked) {
+      onPreviewChange(({
+        styles
+      }) => {
+        styles.set("borderTopLeftRadius", value);
+        styles.set("borderTopRightRadius", value);
+        styles.set("borderBottomRightRadius", value);
+        styles.set("borderBottomLeftRadius", value);
+      });
+    } else {
+      topLeft.onChangePreview(value);
+    }
+  };
+  const onReset = () => {
+    if (linked) {
+      onChange(({
+        styles
+      }) => {
+        styles.unset("borderTopLeftRadius");
+        styles.unset("borderTopRightRadius");
+        styles.unset("borderBottomRightRadius");
+        styles.unset("borderBottomLeftRadius");
+      });
+    } else {
+      topLeft.onReset();
+    }
+  };
+  const rowClassname = "flex flex-row w-full justify-center items-center py-xs";
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col items-center bg-neutral-light border-sm border-neutral-muted relative rounded-md"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "absolute text-sm",
+    style: {
+      top: 3,
+      left: 5
+    }
+  }, "Border radius"), /*#__PURE__*/React.createElement(LinkedEditing, {
+    linked: linked,
+    onToggle: onToggleLinkedEditing
+  }), /*#__PURE__*/React.createElement("div", {
+    className: rowClassname,
+    style: {
+      paddingTop: "8px"
+    }
+  }, /*#__PURE__*/React.createElement(ValueSelector, Object.assign({
+    label: linked ? "Border radius" : "Top-left radius"
+  }, topLeft, {
+    onReset: onReset,
+    units: radiusOptions,
+    onChange: onTopLeftChange,
+    onChangePreview: onTopLeftPreviewChange
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: rowClassname,
+    style: {
+      width: 168,
+      paddingTop: "8px"
+    }
+  }, /*#__PURE__*/React.createElement(ValueSelector, Object.assign({
+    label: "Bottom-left radius"
+  }, bottomLeft, {
+    units: radiusOptions,
+    disabled: linked
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex border-sm border-neutral-muted bg-neutral-light items-center justify-center",
+    style: {
+      width: 170,
+      height: 30,
+      borderRadius: 8
+    }
+  }, "-"), /*#__PURE__*/React.createElement(ValueSelector, Object.assign({
+    label: "Top-right radius"
+  }, topRight, {
+    units: radiusOptions,
+    disabled: linked
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: rowClassname,
+    style: {
+      padding: "8px 0"
+    }
+  }, /*#__PURE__*/React.createElement(ValueSelector, Object.assign({
+    label: "Bottom-right radius"
+  }, bottomRight, {
+    units: radiusOptions,
+    disabled: linked
+  }))));
+});
+
+//# sourceMappingURL=BorderRadius.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderRadius.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","observer","LinkedEditing","useStyles","ValueSelector","useStyleValue","UnitsOptions","radiusOptions","widthUnits","getOptions","BorderRadius","elementId","onChange","onPreviewChange","metadata","topLeft","topRight","bottomRight","bottomLeft","linked","get","onToggleLinkedEditing","styles","value","unit","set","onTopLeftChange","onTopLeftPreviewChange","onChangePreview","onReset","unset","rowClassname","createElement","className","style","top","left","onToggle","paddingTop","Object","assign","label","units","width","disabled","height","borderRadius","padding"],"sources":["BorderRadius.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { LinkedEditing } from \"./LinkedEditing.js\";\nimport { useStyles } from \"../../useStyles.js\";\nimport { ValueSelector } from \"../../ValueSelector.js\";\nimport { useStyleValue } from \"../../useStyleValue.js\";\nimport { UnitsOptions } from \"../../UnitsOptions.js\";\n\nconst radiusOptions = UnitsOptions.widthUnits().getOptions();\n\ninterface BorderRadiusProps {\n    elementId: string;\n}\n\nexport const BorderRadius = observer(({ elementId }: BorderRadiusProps) => {\n    const { onChange, onPreviewChange, metadata } = useStyles(elementId);\n\n    const topLeft = useStyleValue(elementId, \"borderTopLeftRadius\");\n    const topRight = useStyleValue(elementId, \"borderTopRightRadius\");\n    const bottomRight = useStyleValue(elementId, \"borderBottomRightRadius\");\n    const bottomLeft = useStyleValue(elementId, \"borderBottomLeftRadius\");\n\n    const linked = metadata.get<boolean>(\"borderRadiusLinkedEditing\") ?? true;\n\n    const onToggleLinkedEditing = (linked: boolean) => {\n        onChange(({ styles, metadata }) => {\n            if (linked) {\n                const value = `${topLeft.value ?? 0}${topLeft.unit}`;\n                styles.set(\"borderTopRightRadius\", value);\n                styles.set(\"borderBottomRightRadius\", value);\n                styles.set(\"borderBottomLeftRadius\", value);\n            }\n            metadata.set(\"borderRadiusLinkedEditing\", linked);\n        });\n    };\n\n    const onTopLeftChange = (value: string) => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.set(\"borderTopLeftRadius\", value);\n                styles.set(\"borderTopRightRadius\", value);\n                styles.set(\"borderBottomRightRadius\", value);\n                styles.set(\"borderBottomLeftRadius\", value);\n            });\n        } else {\n            topLeft.onChange(value);\n        }\n    };\n\n    const onTopLeftPreviewChange = (value: string) => {\n        if (linked) {\n            onPreviewChange(({ styles }) => {\n                styles.set(\"borderTopLeftRadius\", value);\n                styles.set(\"borderTopRightRadius\", value);\n                styles.set(\"borderBottomRightRadius\", value);\n                styles.set(\"borderBottomLeftRadius\", value);\n            });\n        } else {\n            topLeft.onChangePreview(value);\n        }\n    };\n\n    const onReset = () => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.unset(\"borderTopLeftRadius\");\n                styles.unset(\"borderTopRightRadius\");\n                styles.unset(\"borderBottomRightRadius\");\n                styles.unset(\"borderBottomLeftRadius\");\n            });\n        } else {\n            topLeft.onReset();\n        }\n    };\n\n    const rowClassname = \"flex flex-row w-full justify-center items-center py-xs\";\n\n    return (\n        <div className=\"flex flex-col items-center bg-neutral-light border-sm border-neutral-muted relative rounded-md\">\n            <span className=\"absolute text-sm\" style={{ top: 3, left: 5 }}>\n                Border radius\n            </span>\n\n            <LinkedEditing linked={linked} onToggle={onToggleLinkedEditing} />\n\n            {/* Top-left (master when linked) */}\n            <div className={rowClassname} style={{ paddingTop: \"8px\" }}>\n                <ValueSelector\n                    label={linked ? \"Border radius\" : \"Top-left radius\"}\n                    {...topLeft}\n                    onReset={onReset}\n                    units={radiusOptions}\n                    onChange={onTopLeftChange}\n                    onChangePreview={onTopLeftPreviewChange}\n                />\n            </div>\n\n            {/* Center row: bottom-left | box | top-right */}\n            <div className={rowClassname} style={{ width: 168, paddingTop: \"8px\" }}>\n                <ValueSelector\n                    label={\"Bottom-left radius\"}\n                    {...bottomLeft}\n                    units={radiusOptions}\n                    disabled={linked}\n                />\n                <div\n                    className=\"flex border-sm border-neutral-muted bg-neutral-light items-center justify-center\"\n                    style={{ width: 170, height: 30, borderRadius: 8 }}\n                >\n                    -\n                </div>\n                <ValueSelector\n                    label={\"Top-right radius\"}\n                    {...topRight}\n                    units={radiusOptions}\n                    disabled={linked}\n                />\n            </div>\n\n            {/* Bottom-right */}\n            <div className={rowClassname} style={{ padding: \"8px 0\" }}>\n                <ValueSelector\n                    label={\"Bottom-right radius\"}\n                    {...bottomRight}\n                    units={radiusOptions}\n                    disabled={linked}\n                />\n            </div>\n        </div>\n    );\n});\n"],"mappings":"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","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderStyle.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface BorderStyleProps {
+    elementId: string;
+}
+export declare const BorderStyle: (({ elementId }: BorderStyleProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderStyle.js

@@ -0,0 +1,60 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { Select } from "@webiny/admin-ui";
+import { useStyles } from "../../useStyles.js";
+import { InheritanceLabel } from "../../../InheritanceLabel.js";
+const options = [{
+  label: "None",
+  value: "none"
+}, {
+  label: "Solid",
+  value: "solid"
+}, {
+  label: "Dashed",
+  value: "dashed"
+}, {
+  label: "Dotted",
+  value: "dotted"
+}, {
+  label: "Double",
+  value: "double"
+}];
+export const BorderStyle = observer(({
+  elementId
+}) => {
+  const {
+    styles,
+    onChange,
+    inheritanceMap
+  } = useStyles(elementId);
+  const onValueChange = value => {
+    onChange(({
+      styles
+    }) => {
+      styles.set("borderStyle", value);
+    });
+  };
+  const onReset = () => {
+    onChange(({
+      styles
+    }) => {
+      styles.unset("borderStyle");
+    });
+  };
+  const inheritance = inheritanceMap?.borderStyle ?? {};
+  return /*#__PURE__*/React.createElement(Select, {
+    label: /*#__PURE__*/React.createElement(InheritanceLabel, {
+      onReset: onReset,
+      isOverridden: inheritance?.overridden ?? false,
+      inheritedFrom: inheritance?.inheritedFrom,
+      text: "Border style"
+    }),
+    description: "Select border style",
+    value: styles.borderStyle ?? "none",
+    displayResetAction: false,
+    onChange: onValueChange,
+    options: options
+  });
+});
+
+//# sourceMappingURL=BorderStyle.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","observer","Select","useStyles","InheritanceLabel","options","label","value","BorderStyle","elementId","styles","onChange","inheritanceMap","onValueChange","set","onReset","unset","inheritance","borderStyle","createElement","isOverridden","overridden","inheritedFrom","text","description","displayResetAction"],"sources":["BorderStyle.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Select } from \"@webiny/admin-ui\";\nimport { useStyles } from \"../../useStyles.js\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\n\nconst options = [\n    { label: \"None\", value: \"none\" },\n    { label: \"Solid\", value: \"solid\" },\n    { label: \"Dashed\", value: \"dashed\" },\n    { label: \"Dotted\", value: \"dotted\" },\n    { label: \"Double\", value: \"double\" }\n];\n\ninterface BorderStyleProps {\n    elementId: string;\n}\n\nexport const BorderStyle = observer(({ elementId }: BorderStyleProps) => {\n    const { styles, onChange, inheritanceMap } = useStyles(elementId);\n\n    const onValueChange = (value: string) => {\n        onChange(({ styles }) => {\n            styles.set(\"borderStyle\", value);\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"borderStyle\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.borderStyle ?? {};\n\n    return (\n        <Select\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Border style\"}\n                />\n            }\n            description={\"Select border style\"}\n            value={styles.borderStyle ?? \"none\"}\n            displayResetAction={false}\n            onChange={onValueChange}\n            options={options}\n        />\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,SAAS;AAClB,SAASC,gBAAgB;AAEzB,MAAMC,OAAO,GAAG,CACZ;EAAEC,KAAK,EAAE,MAAM;EAAEC,KAAK,EAAE;AAAO,CAAC,EAChC;EAAED,KAAK,EAAE,OAAO;EAAEC,KAAK,EAAE;AAAQ,CAAC,EAClC;EAAED,KAAK,EAAE,QAAQ;EAAEC,KAAK,EAAE;AAAS,CAAC,EACpC;EAAED,KAAK,EAAE,QAAQ;EAAEC,KAAK,EAAE;AAAS,CAAC,EACpC;EAAED,KAAK,EAAE,QAAQ;EAAEC,KAAK,EAAE;AAAS,CAAC,CACvC;AAMD,OAAO,MAAMC,WAAW,GAAGP,QAAQ,CAAC,CAAC;EAAEQ;AAA4B,CAAC,KAAK;EACrE,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC;EAAe,CAAC,GAAGT,SAAS,CAACM,SAAS,CAAC;EAEjE,MAAMI,aAAa,GAAIN,KAAa,IAAK;IACrCI,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACI,GAAG,CAAC,aAAa,EAAEP,KAAK,CAAC;IACpC,CAAC,CAAC;EACN,CAAC;EAED,MAAMQ,OAAO,GAAGA,CAAA,KAAM;IAClBJ,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACM,KAAK,CAAC,aAAa,CAAC;IAC/B,CAAC,CAAC;EACN,CAAC;EAED,MAAMC,WAAW,GAAGL,cAAc,EAAEM,WAAW,IAAI,CAAC,CAAC;EAErD,oBACIlB,KAAA,CAAAmB,aAAA,CAACjB,MAAM;IACHI,KAAK,eACDN,KAAA,CAAAmB,aAAA,CAACf,gBAAgB;MACbW,OAAO,EAAEA,OAAQ;MACjBK,YAAY,EAAEH,WAAW,EAAEI,UAAU,IAAI,KAAM;MAC/CC,aAAa,EAAEL,WAAW,EAAEK,aAAc;MAC1CC,IAAI,EAAE;IAAe,CACxB,CACJ;IACDC,WAAW,EAAE,qBAAsB;IACnCjB,KAAK,EAAEG,MAAM,CAACQ,WAAW,IAAI,MAAO;IACpCO,kBAAkB,EAAE,KAAM;IAC1Bd,QAAQ,EAAEE,aAAc;IACxBR,OAAO,EAAEA;EAAQ,CACpB,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Border/BorderWidth.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface BorderWidthProps {
+    elementId: string;
+}
+export declare const BorderWidth: (({ elementId }: BorderWidthProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export {};