@webiny/app-admin 5.29.0-beta.1 → 5.30.0-beta.0

package/components/AppInstaller/Sidebar.js

@@ -11,35 +11,29 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Typography = require("@webiny/ui/Typography");
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _webinyOrangeLogo = _interopRequireDefault(require("../../assets/images/webiny-orange-logo.svg"));
+var _config = require("@webiny/app/config");
 
 var _signInDivider = _interopRequireDefault(require("./assets/sign-in-divider.svg"));
 
-var _config = require("@webiny/app/config");
+var _Brand = require("../../base/ui/Brand");
+
+var _Tags = require("../../base/ui/Tags");
 
-var SidebarWrapper = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "eu74ttw0",
-  label: "SidebarWrapper"
-})({});
 var Logo = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "eu74ttw1",
+  target: "eu74ttw0",
   label: "Logo"
 })({
   padding: 15,
-  borderBottom: "1px solid var(--mdc-theme-background)",
-  img: {
-    width: "100px",
-    height: "auto"
-  }
+  borderBottom: "1px solid var(--mdc-theme-background)"
 });
 var List = /*#__PURE__*/(0, _styled.default)("ul", {
-  target: "eu74ttw2",
+  target: "eu74ttw1",
   label: "List"
 })({
   li: {
@@ -87,7 +81,7 @@ var List = /*#__PURE__*/(0, _styled.default)("ul", {
   }
 });
 var Note = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "eu74ttw3",
+  target: "eu74ttw2",
   label: "Note"
 })({
   padding: 15
@@ -163,10 +157,11 @@ var Sidebar = function Sidebar(_ref) {
 
   var wbyVersion = _config.config.getKey("WEBINY_VERSION", process.env.REACT_APP_WEBINY_VERSION);
 
-  return /*#__PURE__*/_react.default.createElement(SidebarWrapper, null, /*#__PURE__*/_react.default.createElement(Logo, null, /*#__PURE__*/_react.default.createElement("img", {
-    src: _webinyOrangeLogo.default,
-    alt: "Webiny CMS"
-  })), upgrades.length > 0 ? /*#__PURE__*/_react.default.createElement(Installations, {
+  return /*#__PURE__*/_react.default.createElement(_Tags.Tags, {
+    tags: {
+      location: "installer"
+    }
+  }, /*#__PURE__*/_react.default.createElement(Logo, null, /*#__PURE__*/_react.default.createElement(_Brand.Brand, null)), upgrades.length > 0 ? /*#__PURE__*/_react.default.createElement(Installations, {
     title: /*#__PURE__*/_react.default.createElement("span", null, "The following apps will be upgraded to ", /*#__PURE__*/_react.default.createElement("strong", null, wbyVersion), ":"),
     allInstallers: upgrades,
     installer: installer,

package/components/AppInstaller/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"names":["SidebarWrapper","styled","Logo","padding","borderBottom","img","width","height","List","li","display","alignItems","borderRadius","marginRight","textAlign","lineHeight","fontSize","paddingTop","color","backgroundColor","fontWeight","Note","Installations","props","title","allInstallers","installer","showLogin","renderList","loginItem","signInDivider","items","i","length","name","secure","installed","prev","push","active","classSet","pending","Sidebar","upgrades","filter","type","installations","wbyVersion","appConfig","getKey","process","env","REACT_APP_WEBINY_VERSION","webinyLogo"],"sources":["Sidebar.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport classSet from \"classnames\";\n\nimport webinyLogo from \"../../assets/images/webiny-orange-logo.svg\";\nimport signInDivider from \"./assets/sign-in-divider.svg\";\nimport { config as appConfig } from \"@webiny/app/config\";\nimport { Installer } from \"./useInstaller\";\n\nconst SidebarWrapper = styled(\"div\")({});\n\nconst Logo = styled(\"div\")({\n    padding: 15,\n    borderBottom: \"1px solid var(--mdc-theme-background)\",\n    img: {\n        width: \"100px\",\n        height: \"auto\"\n    }\n});\n\nconst List = styled(\"ul\")({\n    li: {\n        display: \"flex\",\n        alignItems: \"center\",\n        padding: \"15px 15px\",\n        \".status\": {\n            borderRadius: \"50%\",\n            display: \"inline-block\",\n            height: 20,\n            width: 20,\n            marginRight: 15\n        },\n        \"&.sign-in\": {\n            display: \"block\",\n            textAlign: \"center\",\n            \".note\": {\n                display: \"inline-block\",\n                lineHeight: \"150%\",\n                fontSize: 10,\n                paddingTop: 10,\n                color: \"var(--mdc-theme-text-icon-on-background)\"\n            },\n            img: {\n                width: \"100%\"\n            }\n        },\n        \"&.active\": {\n            backgroundColor: \"var(--mdc-theme-background)\",\n            fontWeight: 600,\n            \".status\": {\n                backgroundColor: \"var(--mdc-theme-primary)\"\n            }\n        },\n        \"&.pending\": {\n            \".status\": {\n                backgroundColor: \"var(--mdc-theme-on-surface)\"\n            }\n        },\n        \"&.installed\": {\n            \".status\": {\n                backgroundColor: \"var(--mdc-theme-secondary)\"\n            }\n        }\n    }\n});\n\nconst Note = styled(\"div\")({\n    padding: 15\n});\ninterface InstallationsProps {\n    title: React.ReactNode;\n    allInstallers: Installer[];\n    installer: Installer;\n    showLogin: boolean;\n}\nconst Installations: React.FC<InstallationsProps> = props => {\n    const { title, allInstallers, installer, showLogin } = props;\n    const renderList = () => {\n        const loginItem = (\n            <li key={\"login\"} className={\"sign-in\"}>\n                <img src={signInDivider} alt={\"\"} />\n                <Typography use={\"overline\"} className={\"note\"}>\n                    TO CONTINUE THE INSTALLATION AFTER THIS POINT YOU’LL NEED TO SIGN IN\n                </Typography>\n            </li>\n        );\n\n        const items = [];\n        for (let i = 0; i < allInstallers.length; i++) {\n            const { name, title, secure, installed } = allInstallers[i];\n            const prev = i === 0 ? null : allInstallers[i - 1];\n            if ((!prev || !prev.secure) && secure && showLogin) {\n                items.push(loginItem);\n            }\n\n            const active = installer && !showLogin && name === installer.name;\n\n            items.push(\n                <li\n                    key={name}\n                    className={classSet(\n                        { installed: installed },\n                        { active: active },\n                        { pending: !installed && !active }\n                    )}\n                >\n                    <span className={\"status\"} />\n                    <span className={\"title\"}>{title}</span>\n                </li>\n            );\n        }\n        return items;\n    };\n\n    return (\n        <Fragment>\n            <Note>\n                <Typography use={\"body1\"}>{title}</Typography>\n            </Note>\n            <List>{renderList()}</List>\n        </Fragment>\n    );\n};\n\ninterface SidebarProps {\n    allInstallers: Installer[];\n    installer: Installer;\n    showLogin: boolean;\n}\nconst Sidebar: React.FC<SidebarProps> = ({ allInstallers, installer, showLogin }) => {\n    const upgrades = allInstallers.filter(installer => installer.type === \"upgrade\");\n    const installations = allInstallers.filter(installer => installer.type === \"install\");\n\n    const wbyVersion = appConfig.getKey(\"WEBINY_VERSION\", process.env.REACT_APP_WEBINY_VERSION);\n\n    return (\n        <SidebarWrapper>\n            <Logo>\n                <img src={webinyLogo} alt=\"Webiny CMS\" />\n            </Logo>\n            {upgrades.length > 0 ? (\n                <Installations\n                    title={\n                        <span>\n                            The following apps will be upgraded to <strong>{wbyVersion}</strong>:\n                        </span>\n                    }\n                    allInstallers={upgrades}\n                    installer={installer}\n                    showLogin={showLogin}\n                />\n            ) : null}\n            {installations.length > 0 && (\n                <Installations\n                    title={\"The following apps will be installed and configured:\"}\n                    allInstallers={installations}\n                    installer={installer}\n                    showLogin={upgrades.length > 0 ? false : showLogin}\n                />\n            )}\n        </SidebarWrapper>\n    );\n};\nexport default Sidebar;\n"],"mappings":"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"}
+{"version":3,"names":["Logo","styled","padding","borderBottom","List","li","display","alignItems","borderRadius","height","width","marginRight","textAlign","lineHeight","fontSize","paddingTop","color","img","backgroundColor","fontWeight","Note","Installations","props","title","allInstallers","installer","showLogin","renderList","loginItem","signInDivider","items","i","length","name","secure","installed","prev","push","active","classSet","pending","Sidebar","upgrades","filter","type","installations","wbyVersion","appConfig","getKey","process","env","REACT_APP_WEBINY_VERSION","location"],"sources":["Sidebar.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport classSet from \"classnames\";\nimport styled from \"@emotion/styled\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { config as appConfig } from \"@webiny/app/config\";\nimport signInDivider from \"./assets/sign-in-divider.svg\";\nimport { Installer } from \"./useInstaller\";\nimport { Brand } from \"~/base/ui/Brand\";\nimport { Tags } from \"~/base/ui/Tags\";\n\nconst Logo = styled(\"div\")({\n    padding: 15,\n    borderBottom: \"1px solid var(--mdc-theme-background)\"\n});\n\nconst List = styled(\"ul\")({\n    li: {\n        display: \"flex\",\n        alignItems: \"center\",\n        padding: \"15px 15px\",\n        \".status\": {\n            borderRadius: \"50%\",\n            display: \"inline-block\",\n            height: 20,\n            width: 20,\n            marginRight: 15\n        },\n        \"&.sign-in\": {\n            display: \"block\",\n            textAlign: \"center\",\n            \".note\": {\n                display: \"inline-block\",\n                lineHeight: \"150%\",\n                fontSize: 10,\n                paddingTop: 10,\n                color: \"var(--mdc-theme-text-icon-on-background)\"\n            },\n            img: {\n                width: \"100%\"\n            }\n        },\n        \"&.active\": {\n            backgroundColor: \"var(--mdc-theme-background)\",\n            fontWeight: 600,\n            \".status\": {\n                backgroundColor: \"var(--mdc-theme-primary)\"\n            }\n        },\n        \"&.pending\": {\n            \".status\": {\n                backgroundColor: \"var(--mdc-theme-on-surface)\"\n            }\n        },\n        \"&.installed\": {\n            \".status\": {\n                backgroundColor: \"var(--mdc-theme-secondary)\"\n            }\n        }\n    }\n});\n\nconst Note = styled(\"div\")({\n    padding: 15\n});\ninterface InstallationsProps {\n    title: React.ReactNode;\n    allInstallers: Installer[];\n    installer: Installer;\n    showLogin: boolean;\n}\nconst Installations: React.FC<InstallationsProps> = props => {\n    const { title, allInstallers, installer, showLogin } = props;\n    const renderList = () => {\n        const loginItem = (\n            <li key={\"login\"} className={\"sign-in\"}>\n                <img src={signInDivider} alt={\"\"} />\n                <Typography use={\"overline\"} className={\"note\"}>\n                    TO CONTINUE THE INSTALLATION AFTER THIS POINT YOU’LL NEED TO SIGN IN\n                </Typography>\n            </li>\n        );\n\n        const items = [];\n        for (let i = 0; i < allInstallers.length; i++) {\n            const { name, title, secure, installed } = allInstallers[i];\n            const prev = i === 0 ? null : allInstallers[i - 1];\n            if ((!prev || !prev.secure) && secure && showLogin) {\n                items.push(loginItem);\n            }\n\n            const active = installer && !showLogin && name === installer.name;\n\n            items.push(\n                <li\n                    key={name}\n                    className={classSet(\n                        { installed: installed },\n                        { active: active },\n                        { pending: !installed && !active }\n                    )}\n                >\n                    <span className={\"status\"} />\n                    <span className={\"title\"}>{title}</span>\n                </li>\n            );\n        }\n        return items;\n    };\n\n    return (\n        <Fragment>\n            <Note>\n                <Typography use={\"body1\"}>{title}</Typography>\n            </Note>\n            <List>{renderList()}</List>\n        </Fragment>\n    );\n};\n\ninterface SidebarProps {\n    allInstallers: Installer[];\n    installer: Installer;\n    showLogin: boolean;\n}\n\nconst Sidebar: React.FC<SidebarProps> = ({ allInstallers, installer, showLogin }) => {\n    const upgrades = allInstallers.filter(installer => installer.type === \"upgrade\");\n    const installations = allInstallers.filter(installer => installer.type === \"install\");\n    const wbyVersion = appConfig.getKey(\"WEBINY_VERSION\", process.env.REACT_APP_WEBINY_VERSION);\n\n    return (\n        <Tags tags={{ location: \"installer\" }}>\n            <Logo>\n                <Brand />\n            </Logo>\n            {upgrades.length > 0 ? (\n                <Installations\n                    title={\n                        <span>\n                            The following apps will be upgraded to <strong>{wbyVersion}</strong>:\n                        </span>\n                    }\n                    allInstallers={upgrades}\n                    installer={installer}\n                    showLogin={showLogin}\n                />\n            ) : null}\n            {installations.length > 0 && (\n                <Installations\n                    title={\"The following apps will be installed and configured:\"}\n                    allInstallers={installations}\n                    installer={installer}\n                    showLogin={upgrades.length > 0 ? false : showLogin}\n                />\n            )}\n        </Tags>\n    );\n};\nexport default Sidebar;\n"],"mappings":"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"}

package/components/AppInstaller/styled.js

@@ -55,11 +55,12 @@ var InstallContent = /*#__PURE__*/(0, _styled.default)("div", {
 });
 exports.InstallContent = InstallContent;
 var installerSplitView = /*#__PURE__*/(0, _emotion.css)({
+  // height: "100vh",
   ".webiny-split-view__inner": {
-    height: "100vh",
-    ".webiny-split-view__right-panel-wrapper": {
-      height: "100vh"
-    }
+    height: "100vh"
+  },
+  ".webiny-split-view__right-panel-wrapper": {
+    height: "100vh"
   }
 }, "label:installerSplitView;");
 exports.installerSplitView = installerSplitView;

package/components/AppInstaller/styled.js.map

@@ -1 +1 @@
-{"version":3,"names":["Wrapper","styled","display","flexDirection","justifyContent","minHeight","color","whiteSpace","ul","listStyle","paddingLeft","li","MozOsxFontSmoothing","WebkitFontSmoothing","fontSize","lineHeight","fontWeight","letterSpacing","textDecoration","textTransform","marginTop","marginBottom","InstallContent","maxWidth","margin","borderRadius","boxShadow","installerSplitView","css","height","SuccessDialog","padding","textAlign","p","paddingBottom","InnerContent","position","alertClass","borderLeft"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\n\nexport const Wrapper = styled(\"section\")({\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"center\",\n    minHeight: \"100vh\",\n    color: \"var(--mdc-theme-on-surface)\",\n    \".spinner__inner-wrapper\": {\n        whiteSpace: \"nowrap\"\n    },\n    ul: {\n        listStyle: \"disc\",\n        paddingLeft: \"var(--mdc-layout-grid-margin-desktop, 24px)\",\n        li: {\n            color: \"var(--desktop-color, var(--webiny-theme-color-text-primary, rgb(10, 10, 10)))\",\n            MozOsxFontSmoothing: \"grayscale\",\n            WebkitFontSmoothing: \"antialiased\",\n            fontSize: \"1rem\",\n            lineHeight: \"1.5rem\",\n            fontWeight: 400,\n            letterSpacing: \"0.03125em\",\n            textDecoration: \"inherit\",\n            textTransform: \"inherit\",\n            marginTop: \"20px\",\n            marginBottom: \"20px\"\n        }\n    }\n});\n\nexport const InstallContent = styled(\"div\")({\n    maxWidth: 800,\n    margin: \"0 auto 25px auto\",\n    \".mdc-elevation--z2\": {\n        borderRadius: 4,\n        boxShadow: \"0 1px 3px 0 rgba(0,0,0,0.15)\"\n    }\n});\n\nexport const installerSplitView = css({\n    \".webiny-split-view__inner\": {\n        height: \"100vh\",\n        \".webiny-split-view__right-panel-wrapper\": {\n            height: \"100vh\"\n        }\n    }\n});\n\nexport const SuccessDialog = styled(\"div\")({\n    padding: 40,\n    textAlign: \"center\",\n    p: {\n        paddingBottom: 40\n    }\n});\n\nexport const InnerContent = styled(\"div\")({\n    padding: 25,\n    position: \"relative\"\n});\n\nexport const alertClass = css({\n    borderLeft: \"3px solid red\",\n    margin: \"5px 0 15px 0\",\n    padding: \"2px 0 2px 10px\"\n});\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEO,IAAMA,OAAO,oBAAGC,eAAH,EAAU,SAAV;EAAA;EAAA;AAAA,GAAqB;EACrCC,OAAO,EAAE,MAD4B;EAErCC,aAAa,EAAE,QAFsB;EAGrCC,cAAc,EAAE,QAHqB;EAIrCC,SAAS,EAAE,OAJ0B;EAKrCC,KAAK,EAAE,6BAL8B;EAMrC,2BAA2B;IACvBC,UAAU,EAAE;EADW,CANU;EASrCC,EAAE,EAAE;IACAC,SAAS,EAAE,MADX;IAEAC,WAAW,EAAE,6CAFb;IAGAC,EAAE,EAAE;MACAL,KAAK,EAAE,+EADP;MAEAM,mBAAmB,EAAE,WAFrB;MAGAC,mBAAmB,EAAE,aAHrB;MAIAC,QAAQ,EAAE,MAJV;MAKAC,UAAU,EAAE,QALZ;MAMAC,UAAU,EAAE,GANZ;MAOAC,aAAa,EAAE,WAPf;MAQAC,cAAc,EAAE,SARhB;MASAC,aAAa,EAAE,SATf;MAUAC,SAAS,EAAE,MAVX;MAWAC,YAAY,EAAE;IAXd;EAHJ;AATiC,CAArB,CAAb;;AA4BA,IAAMC,cAAc,oBAAGrB,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACxCsB,QAAQ,EAAE,GAD8B;EAExCC,MAAM,EAAE,kBAFgC;EAGxC,sBAAsB;IAClBC,YAAY,EAAE,CADI;IAElBC,SAAS,EAAE;EAFO;AAHkB,CAAjB,CAApB;;AASA,IAAMC,kBAAkB,gBAAG,IAAAC,YAAA,EAAI;EAClC,6BAA6B;IACzBC,MAAM,EAAE,OADiB;IAEzB,2CAA2C;MACvCA,MAAM,EAAE;IAD+B;EAFlB;AADK,CAAJ,8BAA3B;;AASA,IAAMC,aAAa,oBAAG7B,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACvC8B,OAAO,EAAE,EAD8B;EAEvCC,SAAS,EAAE,QAF4B;EAGvCC,CAAC,EAAE;IACCC,aAAa,EAAE;EADhB;AAHoC,CAAjB,CAAnB;;AAQA,IAAMC,YAAY,oBAAGlC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACtC8B,OAAO,EAAE,EAD6B;EAEtCK,QAAQ,EAAE;AAF4B,CAAjB,CAAlB;;AAKA,IAAMC,UAAU,gBAAG,IAAAT,YAAA,EAAI;EAC1BU,UAAU,EAAE,eADc;EAE1Bd,MAAM,EAAE,cAFkB;EAG1BO,OAAO,EAAE;AAHiB,CAAJ,sBAAnB"}
+{"version":3,"names":["Wrapper","styled","display","flexDirection","justifyContent","minHeight","color","whiteSpace","ul","listStyle","paddingLeft","li","MozOsxFontSmoothing","WebkitFontSmoothing","fontSize","lineHeight","fontWeight","letterSpacing","textDecoration","textTransform","marginTop","marginBottom","InstallContent","maxWidth","margin","borderRadius","boxShadow","installerSplitView","css","height","SuccessDialog","padding","textAlign","p","paddingBottom","InnerContent","position","alertClass","borderLeft"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\n\nexport const Wrapper = styled(\"section\")({\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"center\",\n    minHeight: \"100vh\",\n    color: \"var(--mdc-theme-on-surface)\",\n    \".spinner__inner-wrapper\": {\n        whiteSpace: \"nowrap\"\n    },\n    ul: {\n        listStyle: \"disc\",\n        paddingLeft: \"var(--mdc-layout-grid-margin-desktop, 24px)\",\n        li: {\n            color: \"var(--desktop-color, var(--webiny-theme-color-text-primary, rgb(10, 10, 10)))\",\n            MozOsxFontSmoothing: \"grayscale\",\n            WebkitFontSmoothing: \"antialiased\",\n            fontSize: \"1rem\",\n            lineHeight: \"1.5rem\",\n            fontWeight: 400,\n            letterSpacing: \"0.03125em\",\n            textDecoration: \"inherit\",\n            textTransform: \"inherit\",\n            marginTop: \"20px\",\n            marginBottom: \"20px\"\n        }\n    }\n});\n\nexport const InstallContent = styled(\"div\")({\n    maxWidth: 800,\n    margin: \"0 auto 25px auto\",\n    \".mdc-elevation--z2\": {\n        borderRadius: 4,\n        boxShadow: \"0 1px 3px 0 rgba(0,0,0,0.15)\"\n    }\n});\n\nexport const installerSplitView = css({\n    // height: \"100vh\",\n    \".webiny-split-view__inner\": {\n        height: \"100vh\"\n    },\n    \".webiny-split-view__right-panel-wrapper\": {\n        height: \"100vh\"\n    }\n});\n\nexport const SuccessDialog = styled(\"div\")({\n    padding: 40,\n    textAlign: \"center\",\n    p: {\n        paddingBottom: 40\n    }\n});\n\nexport const InnerContent = styled(\"div\")({\n    padding: 25,\n    position: \"relative\"\n});\n\nexport const alertClass = css({\n    borderLeft: \"3px solid red\",\n    margin: \"5px 0 15px 0\",\n    padding: \"2px 0 2px 10px\"\n});\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEO,IAAMA,OAAO,oBAAGC,eAAH,EAAU,SAAV;EAAA;EAAA;AAAA,GAAqB;EACrCC,OAAO,EAAE,MAD4B;EAErCC,aAAa,EAAE,QAFsB;EAGrCC,cAAc,EAAE,QAHqB;EAIrCC,SAAS,EAAE,OAJ0B;EAKrCC,KAAK,EAAE,6BAL8B;EAMrC,2BAA2B;IACvBC,UAAU,EAAE;EADW,CANU;EASrCC,EAAE,EAAE;IACAC,SAAS,EAAE,MADX;IAEAC,WAAW,EAAE,6CAFb;IAGAC,EAAE,EAAE;MACAL,KAAK,EAAE,+EADP;MAEAM,mBAAmB,EAAE,WAFrB;MAGAC,mBAAmB,EAAE,aAHrB;MAIAC,QAAQ,EAAE,MAJV;MAKAC,UAAU,EAAE,QALZ;MAMAC,UAAU,EAAE,GANZ;MAOAC,aAAa,EAAE,WAPf;MAQAC,cAAc,EAAE,SARhB;MASAC,aAAa,EAAE,SATf;MAUAC,SAAS,EAAE,MAVX;MAWAC,YAAY,EAAE;IAXd;EAHJ;AATiC,CAArB,CAAb;;AA4BA,IAAMC,cAAc,oBAAGrB,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACxCsB,QAAQ,EAAE,GAD8B;EAExCC,MAAM,EAAE,kBAFgC;EAGxC,sBAAsB;IAClBC,YAAY,EAAE,CADI;IAElBC,SAAS,EAAE;EAFO;AAHkB,CAAjB,CAApB;;AASA,IAAMC,kBAAkB,gBAAG,IAAAC,YAAA,EAAI;EAClC;EACA,6BAA6B;IACzBC,MAAM,EAAE;EADiB,CAFK;EAKlC,2CAA2C;IACvCA,MAAM,EAAE;EAD+B;AALT,CAAJ,8BAA3B;;AAUA,IAAMC,aAAa,oBAAG7B,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACvC8B,OAAO,EAAE,EAD8B;EAEvCC,SAAS,EAAE,QAF4B;EAGvCC,CAAC,EAAE;IACCC,aAAa,EAAE;EADhB;AAHoC,CAAjB,CAAnB;;AAQA,IAAMC,YAAY,oBAAGlC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACtC8B,OAAO,EAAE,EAD6B;EAEtCK,QAAQ,EAAE;AAF4B,CAAjB,CAAlB;;AAKA,IAAMC,UAAU,gBAAG,IAAAT,YAAA,EAAI;EAC1BU,UAAU,EAAE,eADc;EAE1Bd,MAAM,EAAE,cAFkB;EAG1BO,OAAO,EAAE;AAHiB,CAAJ,sBAAnB"}

package/components/FileManager/FileDetails/Tags.js

@@ -174,7 +174,8 @@ var Tags = function Tags(_ref) {
     return /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
       className: addTagsStyle,
       onClick: handleEdit,
-      disabled: !isEditingAllowed
+      disabled: !isEditingAllowed,
+      "data-testid": "fm.tags.add"
     }, "Add tags...");
   }, [editing, isEditingAllowed]);
   return /*#__PURE__*/_react.default.createElement(_form.Form, {

package/components/FileManager/FileDetails/Tags.js.map

@@ -1 +1 @@
-{"version":3,"names":["SCOPE_SEPARATOR","formatTagAsLabel","tag","scope","replace","tagWithoutScopePrefix","tags","filter","map","chipsStyle","css","padding","marginLeft","backgroundColor","iconButtonStyle","width","height","addTagsStyle","color","textTransform","letterSpacing","actionWrapperStyle","marginTop","marginRight","Tags","file","canEdit","client","useApolloClient","useState","editing","setEdit","saving","setSaving","Array","isArray","initialTags","setInitialTags","useSnackbar","showSnackbar","useFileManager","queryParams","handleEdit","useCallback","listTagsQuery","useQuery","LIST_TAGS","variables","where","getWhere","listTags","get","allTags","isEditingAllowed","renderHeaderContent","data","hasTags","length","classNames","index","label","name","mutate","mutation","UPDATE_FILE","id","update","cache","updated","newFileData","cloneDeep","readQuery","query","LIST_FILES","fileManager","listFiles","forEach","item","key","writeQuery","listTagsData","updatedTagsList","includes","push","set","then","Bind","setValue","submit","baseOnChange","formattedTags","tagInLowerCase","toLowerCase","startsWith","value","bindProps","ev"],"sources":["Tags.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport classNames from \"classnames\";\nimport { css } from \"emotion\";\nimport { useApolloClient, useQuery } from \"@apollo/react-hooks\";\nimport set from \"lodash/set\";\nimport get from \"lodash/get\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { Chips, Chip } from \"@webiny/ui/Chips\";\nimport { ButtonSecondary, ButtonPrimary, ButtonDefault, IconButton } from \"@webiny/ui/Button\";\nimport { MultiAutoComplete } from \"@webiny/ui/AutoComplete\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Form } from \"@webiny/form\";\nimport { useSnackbar } from \"~/hooks/useSnackbar\";\nimport { getWhere, useFileManager } from \"./../FileManagerContext\";\nimport {\n    UPDATE_FILE,\n    LIST_FILES,\n    LIST_TAGS,\n    ListFilesQueryResponse,\n    ListFileTagsQueryResponse\n} from \"./../graphql\";\nimport { ReactComponent as EditIcon } from \"./../icons/round-edit-24px.svg\";\nimport { ReactComponent as LabelIcon } from \"./../icons/round-label-24px.svg\";\nimport { FileItem } from \"../types\";\n\nconst SCOPE_SEPARATOR = \":\";\n\nexport const formatTagAsLabel = (tag: string, scope: string | undefined) => {\n    if (!scope) {\n        return tag;\n    }\n    return tag.replace(`${scope}${SCOPE_SEPARATOR}`, \"\");\n};\n\nexport const tagWithoutScopePrefix = (tags: string[], scope: string) => {\n    return tags.filter(tag => tag !== scope).map(tag => formatTagAsLabel(tag, scope));\n};\n\nconst chipsStyle = css({\n    \"&.mdc-chip-set\": {\n        padding: 0,\n        marginLeft: -4,\n        \"& .mdc-chip\": {\n            backgroundColor: \"var(--mdc-theme-background)\"\n        }\n    }\n});\nconst iconButtonStyle = css({\n    \"&.mdc-icon-button svg\": {\n        width: 20,\n        height: 20\n    }\n});\nconst addTagsStyle = css({\n    \"&.mdc-button:not(:disabled)\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\",\n        textTransform: \"capitalize\",\n        letterSpacing: \"initial\",\n        marginLeft: -8\n    }\n});\nconst actionWrapperStyle = css({\n    marginTop: 16,\n    \"& button:first-child\": {\n        marginRight: 16\n    }\n});\n\ninterface TagsProps {\n    file: FileItem;\n    canEdit: (file: FileItem) => boolean;\n}\n\nconst Tags: React.FC<TagsProps> = ({ file, canEdit }) => {\n    const client = useApolloClient();\n\n    const [editing, setEdit] = useState(false);\n    const [saving, setSaving] = useState(false);\n    const [initialTags, setInitialTags] = useState(Array.isArray(file.tags) ? [...file.tags] : []);\n    const { showSnackbar } = useSnackbar();\n    const { queryParams } = useFileManager();\n    const handleEdit = useCallback(() => setEdit(true), []);\n    const listTagsQuery = useQuery(LIST_TAGS, {\n        variables: { where: getWhere(queryParams.scope) }\n    });\n    const listTags = get(listTagsQuery, \"data.fileManager.listTags\", []);\n    const allTags = tagWithoutScopePrefix(listTags, queryParams.scope);\n\n    const isEditingAllowed = canEdit(file);\n\n    const renderHeaderContent = useCallback(\n        ({ data }: { data: { tags: { name: string }[] } }) => {\n            if (editing) {\n                return null;\n            }\n            const hasTags = data.tags.length > 0;\n\n            if (hasTags) {\n                // Render existing tags and \"edit tags\" action.\n                return (\n                    <>\n                        <Chips className={classNames(\"list-item__content\", chipsStyle)}>\n                            {data.tags\n                                .filter(tag => tag !== queryParams.scope)\n                                .map((tag, index) => {\n                                    const label = typeof tag === \"string\" ? tag : tag.name;\n                                    return (\n                                        <Chip\n                                            key={label + index}\n                                            label={formatTagAsLabel(label, queryParams.scope)}\n                                        />\n                                    );\n                                })}\n                        </Chips>\n                        {isEditingAllowed && (\n                            <IconButton\n                                className={iconButtonStyle}\n                                icon={<EditIcon />}\n                                onClick={handleEdit}\n                            />\n                        )}\n                    </>\n                );\n            }\n            // Render \"add tags\" action.\n            return (\n                <ButtonDefault\n                    className={addTagsStyle}\n                    onClick={handleEdit}\n                    disabled={!isEditingAllowed}\n                >\n                    Add tags...\n                </ButtonDefault>\n            );\n        },\n        [editing, isEditingAllowed]\n    );\n\n    return (\n        <Form\n            data={{\n                tags: initialTags\n            }}\n            onSubmit={async ({ tags }) => {\n                setSaving(true);\n                client\n                    .mutate({\n                        mutation: UPDATE_FILE,\n                        variables: {\n                            id: file.id,\n                            data: { tags }\n                        },\n                        update: (cache, updated) => {\n                            const newFileData: FileItem = get(\n                                updated,\n                                \"data.fileManager.updateFile.data\"\n                            );\n\n                            // 1. Update files list cache\n                            const data = cloneDeep(\n                                cache.readQuery<ListFilesQueryResponse>({\n                                    query: LIST_FILES,\n                                    variables: queryParams\n                                })\n                            );\n\n                            if (data) {\n                                data.fileManager.listFiles.data.forEach(item => {\n                                    if (item.key === newFileData.key) {\n                                        item.tags = newFileData.tags;\n                                    }\n                                });\n                            }\n\n                            cache.writeQuery({\n                                query: LIST_FILES,\n                                variables: queryParams,\n                                data\n                            });\n                            // 2. Update \"LIST_TAGS\" cache\n                            if (Array.isArray(newFileData.tags)) {\n                                // Get list tags data\n                                const listTagsData = cloneDeep(\n                                    cache.readQuery<ListFileTagsQueryResponse>({\n                                        query: LIST_TAGS,\n                                        variables: { where: getWhere(queryParams.scope) }\n                                    })\n                                );\n                                if (!listTagsData) {\n                                    return;\n                                }\n                                // Add new tag in list\n                                const updatedTagsList = [...newFileData.tags];\n\n                                if (Array.isArray(listTagsData.fileManager.listTags)) {\n                                    listTagsData.fileManager.listTags.forEach(tag => {\n                                        if (!updatedTagsList.includes(tag)) {\n                                            updatedTagsList.push(tag);\n                                        }\n                                    });\n                                }\n\n                                set(listTagsData, \"fileManager.listTags\", updatedTagsList);\n                                // Write it to cache\n                                cache.writeQuery({\n                                    query: LIST_TAGS,\n                                    variables: { where: getWhere(queryParams.scope) },\n                                    data: listTagsData\n                                });\n                            }\n                        }\n                    })\n                    .then(() => {\n                        setInitialTags(tags);\n                        setSaving(false);\n                        setEdit(false);\n                        showSnackbar(\"Tags successfully updated.\");\n                    });\n            }}\n        >\n            {({ Bind, data, setValue, submit }) => (\n                <React.Fragment>\n                    <li-title>\n                        <Icon className={\"list-item__icon\"} icon={<LabelIcon />} />\n                        {renderHeaderContent({\n                            // TODO @ts-refactor\n                            // @ts-ignore\n                            data\n                        })}\n                    </li-title>\n                    {editing && (\n                        <li-content>\n                            <Bind\n                                name={\"tags\"}\n                                beforeChange={(\n                                    tags: string[],\n                                    baseOnChange: (tags: string[]) => void\n                                ) => {\n                                    const formattedTags = tags.map(tag => {\n                                        const tagInLowerCase = tag.toLowerCase();\n                                        /**\n                                         * If \"scope\" exists, prefix tag with \"scope\" if not already.\n                                         */\n                                        if (\n                                            queryParams.scope &&\n                                            !tagInLowerCase.startsWith(queryParams.scope)\n                                        ) {\n                                            return `${queryParams.scope}${SCOPE_SEPARATOR}${tagInLowerCase}`;\n                                        }\n                                        return tagInLowerCase;\n                                    });\n                                    baseOnChange(formattedTags);\n                                }}\n                            >\n                                {({ value, ...bindProps }) => (\n                                    <MultiAutoComplete\n                                        {...bindProps}\n                                        value={tagWithoutScopePrefix(value, queryParams.scope)}\n                                        options={allTags}\n                                        placeholder={\"homepage asset\"}\n                                        description={\"Type in a new tag or select an existing one.\"}\n                                        unique={true}\n                                        allowFreeInput={true}\n                                        useSimpleValues={true}\n                                        disabled={saving}\n                                    />\n                                )}\n                            </Bind>\n                            <div className={actionWrapperStyle}>\n                                <ButtonPrimary\n                                    small\n                                    onClick={ev => {\n                                        submit(ev);\n                                    }}\n                                    data-testid={\"fm.tags.submit\"}\n                                >\n                                    Submit\n                                </ButtonPrimary>\n                                <ButtonSecondary\n                                    small\n                                    onClick={() => {\n                                        setValue(\"tags\", initialTags);\n                                        setEdit(false);\n                                    }}\n                                >\n                                    Cancel\n                                </ButtonSecondary>\n                            </div>\n                        </li-content>\n                    )}\n                </React.Fragment>\n            )}\n        </Form>\n    );\n};\n\nexport default Tags;\n"],"mappings":"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"}
+{"version":3,"names":["SCOPE_SEPARATOR","formatTagAsLabel","tag","scope","replace","tagWithoutScopePrefix","tags","filter","map","chipsStyle","css","padding","marginLeft","backgroundColor","iconButtonStyle","width","height","addTagsStyle","color","textTransform","letterSpacing","actionWrapperStyle","marginTop","marginRight","Tags","file","canEdit","client","useApolloClient","useState","editing","setEdit","saving","setSaving","Array","isArray","initialTags","setInitialTags","useSnackbar","showSnackbar","useFileManager","queryParams","handleEdit","useCallback","listTagsQuery","useQuery","LIST_TAGS","variables","where","getWhere","listTags","get","allTags","isEditingAllowed","renderHeaderContent","data","hasTags","length","classNames","index","label","name","mutate","mutation","UPDATE_FILE","id","update","cache","updated","newFileData","cloneDeep","readQuery","query","LIST_FILES","fileManager","listFiles","forEach","item","key","writeQuery","listTagsData","updatedTagsList","includes","push","set","then","Bind","setValue","submit","baseOnChange","formattedTags","tagInLowerCase","toLowerCase","startsWith","value","bindProps","ev"],"sources":["Tags.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport classNames from \"classnames\";\nimport { css } from \"emotion\";\nimport { useApolloClient, useQuery } from \"@apollo/react-hooks\";\nimport set from \"lodash/set\";\nimport get from \"lodash/get\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { Chips, Chip } from \"@webiny/ui/Chips\";\nimport { ButtonSecondary, ButtonPrimary, ButtonDefault, IconButton } from \"@webiny/ui/Button\";\nimport { MultiAutoComplete } from \"@webiny/ui/AutoComplete\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Form } from \"@webiny/form\";\nimport { useSnackbar } from \"~/hooks/useSnackbar\";\nimport { getWhere, useFileManager } from \"./../FileManagerContext\";\nimport {\n    UPDATE_FILE,\n    LIST_FILES,\n    LIST_TAGS,\n    ListFilesQueryResponse,\n    ListFileTagsQueryResponse\n} from \"./../graphql\";\nimport { ReactComponent as EditIcon } from \"./../icons/round-edit-24px.svg\";\nimport { ReactComponent as LabelIcon } from \"./../icons/round-label-24px.svg\";\nimport { FileItem } from \"../types\";\n\nconst SCOPE_SEPARATOR = \":\";\n\nexport const formatTagAsLabel = (tag: string, scope: string | undefined) => {\n    if (!scope) {\n        return tag;\n    }\n    return tag.replace(`${scope}${SCOPE_SEPARATOR}`, \"\");\n};\n\nexport const tagWithoutScopePrefix = (tags: string[], scope: string) => {\n    return tags.filter(tag => tag !== scope).map(tag => formatTagAsLabel(tag, scope));\n};\n\nconst chipsStyle = css({\n    \"&.mdc-chip-set\": {\n        padding: 0,\n        marginLeft: -4,\n        \"& .mdc-chip\": {\n            backgroundColor: \"var(--mdc-theme-background)\"\n        }\n    }\n});\nconst iconButtonStyle = css({\n    \"&.mdc-icon-button svg\": {\n        width: 20,\n        height: 20\n    }\n});\nconst addTagsStyle = css({\n    \"&.mdc-button:not(:disabled)\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\",\n        textTransform: \"capitalize\",\n        letterSpacing: \"initial\",\n        marginLeft: -8\n    }\n});\nconst actionWrapperStyle = css({\n    marginTop: 16,\n    \"& button:first-child\": {\n        marginRight: 16\n    }\n});\n\ninterface TagsProps {\n    file: FileItem;\n    canEdit: (file: FileItem) => boolean;\n}\n\nconst Tags: React.FC<TagsProps> = ({ file, canEdit }) => {\n    const client = useApolloClient();\n\n    const [editing, setEdit] = useState(false);\n    const [saving, setSaving] = useState(false);\n    const [initialTags, setInitialTags] = useState(Array.isArray(file.tags) ? [...file.tags] : []);\n    const { showSnackbar } = useSnackbar();\n    const { queryParams } = useFileManager();\n    const handleEdit = useCallback(() => setEdit(true), []);\n    const listTagsQuery = useQuery(LIST_TAGS, {\n        variables: { where: getWhere(queryParams.scope) }\n    });\n    const listTags = get(listTagsQuery, \"data.fileManager.listTags\", []);\n    const allTags = tagWithoutScopePrefix(listTags, queryParams.scope);\n\n    const isEditingAllowed = canEdit(file);\n\n    const renderHeaderContent = useCallback(\n        ({ data }: { data: { tags: { name: string }[] } }) => {\n            if (editing) {\n                return null;\n            }\n            const hasTags = data.tags.length > 0;\n\n            if (hasTags) {\n                // Render existing tags and \"edit tags\" action.\n                return (\n                    <>\n                        <Chips className={classNames(\"list-item__content\", chipsStyle)}>\n                            {data.tags\n                                .filter(tag => tag !== queryParams.scope)\n                                .map((tag, index) => {\n                                    const label = typeof tag === \"string\" ? tag : tag.name;\n                                    return (\n                                        <Chip\n                                            key={label + index}\n                                            label={formatTagAsLabel(label, queryParams.scope)}\n                                        />\n                                    );\n                                })}\n                        </Chips>\n                        {isEditingAllowed && (\n                            <IconButton\n                                className={iconButtonStyle}\n                                icon={<EditIcon />}\n                                onClick={handleEdit}\n                            />\n                        )}\n                    </>\n                );\n            }\n            // Render \"add tags\" action.\n            return (\n                <ButtonDefault\n                    className={addTagsStyle}\n                    onClick={handleEdit}\n                    disabled={!isEditingAllowed}\n                    data-testid=\"fm.tags.add\"\n                >\n                    Add tags...\n                </ButtonDefault>\n            );\n        },\n        [editing, isEditingAllowed]\n    );\n\n    return (\n        <Form\n            data={{\n                tags: initialTags\n            }}\n            onSubmit={async ({ tags }) => {\n                setSaving(true);\n                client\n                    .mutate({\n                        mutation: UPDATE_FILE,\n                        variables: {\n                            id: file.id,\n                            data: { tags }\n                        },\n                        update: (cache, updated) => {\n                            const newFileData: FileItem = get(\n                                updated,\n                                \"data.fileManager.updateFile.data\"\n                            );\n\n                            // 1. Update files list cache\n                            const data = cloneDeep(\n                                cache.readQuery<ListFilesQueryResponse>({\n                                    query: LIST_FILES,\n                                    variables: queryParams\n                                })\n                            );\n\n                            if (data) {\n                                data.fileManager.listFiles.data.forEach(item => {\n                                    if (item.key === newFileData.key) {\n                                        item.tags = newFileData.tags;\n                                    }\n                                });\n                            }\n\n                            cache.writeQuery({\n                                query: LIST_FILES,\n                                variables: queryParams,\n                                data\n                            });\n                            // 2. Update \"LIST_TAGS\" cache\n                            if (Array.isArray(newFileData.tags)) {\n                                // Get list tags data\n                                const listTagsData = cloneDeep(\n                                    cache.readQuery<ListFileTagsQueryResponse>({\n                                        query: LIST_TAGS,\n                                        variables: { where: getWhere(queryParams.scope) }\n                                    })\n                                );\n                                if (!listTagsData) {\n                                    return;\n                                }\n                                // Add new tag in list\n                                const updatedTagsList = [...newFileData.tags];\n\n                                if (Array.isArray(listTagsData.fileManager.listTags)) {\n                                    listTagsData.fileManager.listTags.forEach(tag => {\n                                        if (!updatedTagsList.includes(tag)) {\n                                            updatedTagsList.push(tag);\n                                        }\n                                    });\n                                }\n\n                                set(listTagsData, \"fileManager.listTags\", updatedTagsList);\n                                // Write it to cache\n                                cache.writeQuery({\n                                    query: LIST_TAGS,\n                                    variables: { where: getWhere(queryParams.scope) },\n                                    data: listTagsData\n                                });\n                            }\n                        }\n                    })\n                    .then(() => {\n                        setInitialTags(tags);\n                        setSaving(false);\n                        setEdit(false);\n                        showSnackbar(\"Tags successfully updated.\");\n                    });\n            }}\n        >\n            {({ Bind, data, setValue, submit }) => (\n                <React.Fragment>\n                    <li-title>\n                        <Icon className={\"list-item__icon\"} icon={<LabelIcon />} />\n                        {renderHeaderContent({\n                            // TODO @ts-refactor\n                            // @ts-ignore\n                            data\n                        })}\n                    </li-title>\n                    {editing && (\n                        <li-content>\n                            <Bind\n                                name={\"tags\"}\n                                beforeChange={(\n                                    tags: string[],\n                                    baseOnChange: (tags: string[]) => void\n                                ) => {\n                                    const formattedTags = tags.map(tag => {\n                                        const tagInLowerCase = tag.toLowerCase();\n                                        /**\n                                         * If \"scope\" exists, prefix tag with \"scope\" if not already.\n                                         */\n                                        if (\n                                            queryParams.scope &&\n                                            !tagInLowerCase.startsWith(queryParams.scope)\n                                        ) {\n                                            return `${queryParams.scope}${SCOPE_SEPARATOR}${tagInLowerCase}`;\n                                        }\n                                        return tagInLowerCase;\n                                    });\n                                    baseOnChange(formattedTags);\n                                }}\n                            >\n                                {({ value, ...bindProps }) => (\n                                    <MultiAutoComplete\n                                        {...bindProps}\n                                        value={tagWithoutScopePrefix(value, queryParams.scope)}\n                                        options={allTags}\n                                        placeholder={\"homepage asset\"}\n                                        description={\"Type in a new tag or select an existing one.\"}\n                                        unique={true}\n                                        allowFreeInput={true}\n                                        useSimpleValues={true}\n                                        disabled={saving}\n                                    />\n                                )}\n                            </Bind>\n                            <div className={actionWrapperStyle}>\n                                <ButtonPrimary\n                                    small\n                                    onClick={ev => {\n                                        submit(ev);\n                                    }}\n                                    data-testid={\"fm.tags.submit\"}\n                                >\n                                    Submit\n                                </ButtonPrimary>\n                                <ButtonSecondary\n                                    small\n                                    onClick={() => {\n                                        setValue(\"tags\", initialTags);\n                                        setEdit(false);\n                                    }}\n                                >\n                                    Cancel\n                                </ButtonSecondary>\n                            </div>\n                        </li-content>\n                    )}\n                </React.Fragment>\n            )}\n        </Form>\n    );\n};\n\nexport default Tags;\n"],"mappings":"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"}

package/components/RichTextEditor/tools/image/ui.d.ts

@@ -116,5 +116,5 @@ export default class Ui {
  * @param  {object} attributes        - any attributes
  * @returns {HTMLElement}
  */
-export declare const make: (tagName: string, classNames?: string[] | string | null, attributes?: Record<string, string | number | boolean> | undefined) => HTMLElement;
+export declare const make: (tagName: string, classNames?: string[] | string | null, attributes?: Record<string, string | number | boolean>) => HTMLElement;
 export {};

package/components/RichTextEditor/tools/textColor/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="web" />
+/// <reference types="web" />
 import { API } from "@editorjs/editorjs";
 interface Config {
     themeColors: string[];

package/components/SplitView/SplitView.js

@@ -26,14 +26,12 @@ var _Helpers = require("@webiny/ui/Helpers");
 var grid = /*#__PURE__*/(0, _emotion.css)({
   "&.mdc-layout-grid": {
     padding: 0,
-    backgroundColor: "var(--mdc-theme-background)"
+    backgroundColor: "var(--mdc-theme-background)",
+    ">.mdc-layout-grid__inner": {
+      gridGap: 0
+    }
   }
 }, "label:grid;");
-var gridInner = /*#__PURE__*/(0, _emotion.css)({
-  "&.mdc-layout-grid__inner": {
-    gridGap: 0
-  }
-}, "label:gridInner;");
 var RightPanelWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "em0s1980",
   label: "RightPanelWrapper"
@@ -64,9 +62,7 @@ exports.leftPanel = leftPanel;
 var SplitView = function SplitView(props) {
   return /*#__PURE__*/React.createElement(_Grid.Grid, {
     className: (0, _classnames.default)(grid, props.className, "webiny-split-view")
-  }, /*#__PURE__*/React.createElement(_Grid.GridInner, {
-    className: gridInner + " webiny-split-view__inner"
-  }, props.children));
+  }, props.children);
 };
 
 exports.SplitView = SplitView;

package/components/SplitView/SplitView.js.map

@@ -1 +1 @@
-{"version":3,"names":["grid","css","padding","backgroundColor","gridInner","gridGap","RightPanelWrapper","styled","overflow","height","leftPanel","display","flexDirection","maxHeight","SplitView","props","classSet","className","children","LeftPanel","propList","hasOwnProperty","span","getClasses","RightPanel"],"sources":["SplitView.tsx"],"sourcesContent":["import * as React from \"react\";\nimport classSet from \"classnames\";\nimport { Cell, Grid, GridInner, CellProps } from \"@webiny/ui/Grid\";\nimport { css } from \"emotion\";\nimport styled from \"@emotion/styled\";\nimport { clone } from \"lodash\";\nimport { getClasses } from \"@webiny/ui/Helpers\";\n\nconst grid = css({\n    \"&.mdc-layout-grid\": {\n        padding: 0,\n        backgroundColor: \"var(--mdc-theme-background)\"\n    }\n});\n\nconst gridInner = css({\n    \"&.mdc-layout-grid__inner\": {\n        gridGap: 0\n    }\n});\n\nconst RightPanelWrapper = styled(\"div\")({\n    backgroundColor: \"var(--mdc-theme-background)\",\n    overflow: \"auto\",\n    height: \"calc(100vh - 70px)\"\n});\n\nexport const leftPanel = css({\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    \">.webiny-data-list\": {\n        display: \"flex\",\n        flexDirection: \"column\",\n        height: \"calc(100vh - 70px)\",\n        \".mdc-list\": {\n            overflow: \"auto\"\n        }\n    },\n    \">.mdc-list\": {\n        display: \"flex\",\n        flexDirection: \"column\",\n        maxHeight: \"calc(100vh - 70px)\",\n        overflow: \"auto\"\n    }\n});\n\ninterface SplitViewProps {\n    children: React.ReactElement<any> | React.ReactElement<any>[];\n    className?: string;\n}\n\nconst SplitView: React.FC<SplitViewProps> = props => {\n    return (\n        <Grid className={classSet(grid, props.className, \"webiny-split-view\")}>\n            <GridInner className={gridInner + \" webiny-split-view__inner\"}>\n                {props.children}\n            </GridInner>\n        </Grid>\n    );\n};\n\nconst LeftPanel: React.FC<CellProps> = props => {\n    const propList = clone(props);\n    if (!propList.hasOwnProperty(\"span\")) {\n        propList.span = 5;\n    }\n\n    return (\n        <Cell\n            {...getClasses(\n                propList,\n                classSet(leftPanel, props.className, \"webiny-split-view__left-panel\")\n            )}\n        >\n            {propList.children}\n        </Cell>\n    );\n};\n\nconst RightPanel: React.FC<CellProps> = props => {\n    const propList = clone(props);\n    if (!propList.hasOwnProperty(\"span\")) {\n        propList.span = 7;\n    }\n\n    return (\n        <Cell {...getClasses(propList, \"webiny-split-view__right-panel\")}>\n            <RightPanelWrapper\n                className={\"webiny-split-view__right-panel-wrapper\"}\n                id={\"webiny-split-view-right-panel\"}\n            >\n                {propList.children}\n            </RightPanelWrapper>\n        </Cell>\n    );\n};\n\nexport { SplitView, LeftPanel, RightPanel };\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,IAAI,gBAAG,IAAAC,YAAA,EAAI;EACb,qBAAqB;IACjBC,OAAO,EAAE,CADQ;IAEjBC,eAAe,EAAE;EAFA;AADR,CAAJ,gBAAb;AAOA,IAAMC,SAAS,gBAAG,IAAAH,YAAA,EAAI;EAClB,4BAA4B;IACxBI,OAAO,EAAE;EADe;AADV,CAAJ,qBAAlB;AAMA,IAAMC,iBAAiB,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACpCJ,eAAe,EAAE,6BADmB;EAEpCK,QAAQ,EAAE,MAF0B;EAGpCC,MAAM,EAAE;AAH4B,CAAjB,CAAvB;AAMO,IAAMC,SAAS,gBAAG,IAAAT,YAAA,EAAI;EACzBE,eAAe,EAAE,0BADQ;EAEzB,sBAAsB;IAClBQ,OAAO,EAAE,MADS;IAElBC,aAAa,EAAE,QAFG;IAGlBH,MAAM,EAAE,oBAHU;IAIlB,aAAa;MACTD,QAAQ,EAAE;IADD;EAJK,CAFG;EAUzB,cAAc;IACVG,OAAO,EAAE,MADC;IAEVC,aAAa,EAAE,QAFL;IAGVC,SAAS,EAAE,oBAHD;IAIVL,QAAQ,EAAE;EAJA;AAVW,CAAJ,qBAAlB;;;AAuBP,IAAMM,SAAmC,GAAG,SAAtCA,SAAsC,CAAAC,KAAK,EAAI;EACjD,oBACI,oBAAC,UAAD;IAAM,SAAS,EAAE,IAAAC,mBAAA,EAAShB,IAAT,EAAee,KAAK,CAACE,SAArB,EAAgC,mBAAhC;EAAjB,gBACI,oBAAC,eAAD;IAAW,SAAS,EAAEb,SAAS,GAAG;EAAlC,GACKW,KAAK,CAACG,QADX,CADJ,CADJ;AAOH,CARD;;;;AAUA,IAAMC,SAA8B,GAAG,SAAjCA,SAAiC,CAAAJ,KAAK,EAAI;EAC5C,IAAMK,QAAQ,GAAG,qBAAML,KAAN,CAAjB;;EACA,IAAI,CAACK,QAAQ,CAACC,cAAT,CAAwB,MAAxB,CAAL,EAAsC;IAClCD,QAAQ,CAACE,IAAT,GAAgB,CAAhB;EACH;;EAED,oBACI,oBAAC,UAAD,EACQ,IAAAC,mBAAA,EACAH,QADA,EAEA,IAAAJ,mBAAA,EAASN,SAAT,EAAoBK,KAAK,CAACE,SAA1B,EAAqC,+BAArC,CAFA,CADR,EAMKG,QAAQ,CAACF,QANd,CADJ;AAUH,CAhBD;;;;AAkBA,IAAMM,UAA+B,GAAG,SAAlCA,UAAkC,CAAAT,KAAK,EAAI;EAC7C,IAAMK,QAAQ,GAAG,qBAAML,KAAN,CAAjB;;EACA,IAAI,CAACK,QAAQ,CAACC,cAAT,CAAwB,MAAxB,CAAL,EAAsC;IAClCD,QAAQ,CAACE,IAAT,GAAgB,CAAhB;EACH;;EAED,oBACI,oBAAC,UAAD,EAAU,IAAAC,mBAAA,EAAWH,QAAX,EAAqB,gCAArB,CAAV,eACI,oBAAC,iBAAD;IACI,SAAS,EAAE,wCADf;IAEI,EAAE,EAAE;EAFR,GAIKA,QAAQ,CAACF,QAJd,CADJ,CADJ;AAUH,CAhBD"}
+{"version":3,"names":["grid","css","padding","backgroundColor","gridGap","RightPanelWrapper","styled","overflow","height","leftPanel","display","flexDirection","maxHeight","SplitView","props","classSet","className","children","LeftPanel","propList","hasOwnProperty","span","getClasses","RightPanel"],"sources":["SplitView.tsx"],"sourcesContent":["import * as React from \"react\";\nimport classSet from \"classnames\";\nimport { Cell, Grid, CellProps } from \"@webiny/ui/Grid\";\nimport { css } from \"emotion\";\nimport styled from \"@emotion/styled\";\nimport { clone } from \"lodash\";\nimport { getClasses } from \"@webiny/ui/Helpers\";\n\nconst grid = css({\n    \"&.mdc-layout-grid\": {\n        padding: 0,\n        backgroundColor: \"var(--mdc-theme-background)\",\n        \">.mdc-layout-grid__inner\": {\n            gridGap: 0\n        }\n    }\n});\n\nconst RightPanelWrapper = styled(\"div\")({\n    backgroundColor: \"var(--mdc-theme-background)\",\n    overflow: \"auto\",\n    height: \"calc(100vh - 70px)\"\n});\n\nexport const leftPanel = css({\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    \">.webiny-data-list\": {\n        display: \"flex\",\n        flexDirection: \"column\",\n        height: \"calc(100vh - 70px)\",\n        \".mdc-list\": {\n            overflow: \"auto\"\n        }\n    },\n    \">.mdc-list\": {\n        display: \"flex\",\n        flexDirection: \"column\",\n        maxHeight: \"calc(100vh - 70px)\",\n        overflow: \"auto\"\n    }\n});\n\ninterface SplitViewProps {\n    children: React.ReactElement<any> | React.ReactElement<any>[];\n    className?: string;\n}\n\nconst SplitView: React.FC<SplitViewProps> = props => {\n    return (\n        <Grid className={classSet(grid, props.className, \"webiny-split-view\")}>\n            {props.children}\n        </Grid>\n    );\n};\n\nconst LeftPanel: React.FC<CellProps> = props => {\n    const propList = clone(props);\n    if (!propList.hasOwnProperty(\"span\")) {\n        propList.span = 5;\n    }\n\n    return (\n        <Cell\n            {...getClasses(\n                propList,\n                classSet(leftPanel, props.className, \"webiny-split-view__left-panel\")\n            )}\n        >\n            {propList.children}\n        </Cell>\n    );\n};\n\nconst RightPanel: React.FC<CellProps> = props => {\n    const propList = clone(props);\n    if (!propList.hasOwnProperty(\"span\")) {\n        propList.span = 7;\n    }\n\n    return (\n        <Cell {...getClasses(propList, \"webiny-split-view__right-panel\")}>\n            <RightPanelWrapper\n                className={\"webiny-split-view__right-panel-wrapper\"}\n                id={\"webiny-split-view-right-panel\"}\n            >\n                {propList.children}\n            </RightPanelWrapper>\n        </Cell>\n    );\n};\n\nexport { SplitView, LeftPanel, RightPanel };\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,IAAI,gBAAG,IAAAC,YAAA,EAAI;EACb,qBAAqB;IACjBC,OAAO,EAAE,CADQ;IAEjBC,eAAe,EAAE,6BAFA;IAGjB,4BAA4B;MACxBC,OAAO,EAAE;IADe;EAHX;AADR,CAAJ,gBAAb;AAUA,IAAMC,iBAAiB,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACpCH,eAAe,EAAE,6BADmB;EAEpCI,QAAQ,EAAE,MAF0B;EAGpCC,MAAM,EAAE;AAH4B,CAAjB,CAAvB;AAMO,IAAMC,SAAS,gBAAG,IAAAR,YAAA,EAAI;EACzBE,eAAe,EAAE,0BADQ;EAEzB,sBAAsB;IAClBO,OAAO,EAAE,MADS;IAElBC,aAAa,EAAE,QAFG;IAGlBH,MAAM,EAAE,oBAHU;IAIlB,aAAa;MACTD,QAAQ,EAAE;IADD;EAJK,CAFG;EAUzB,cAAc;IACVG,OAAO,EAAE,MADC;IAEVC,aAAa,EAAE,QAFL;IAGVC,SAAS,EAAE,oBAHD;IAIVL,QAAQ,EAAE;EAJA;AAVW,CAAJ,qBAAlB;;;AAuBP,IAAMM,SAAmC,GAAG,SAAtCA,SAAsC,CAAAC,KAAK,EAAI;EACjD,oBACI,oBAAC,UAAD;IAAM,SAAS,EAAE,IAAAC,mBAAA,EAASf,IAAT,EAAec,KAAK,CAACE,SAArB,EAAgC,mBAAhC;EAAjB,GACKF,KAAK,CAACG,QADX,CADJ;AAKH,CAND;;;;AAQA,IAAMC,SAA8B,GAAG,SAAjCA,SAAiC,CAAAJ,KAAK,EAAI;EAC5C,IAAMK,QAAQ,GAAG,qBAAML,KAAN,CAAjB;;EACA,IAAI,CAACK,QAAQ,CAACC,cAAT,CAAwB,MAAxB,CAAL,EAAsC;IAClCD,QAAQ,CAACE,IAAT,GAAgB,CAAhB;EACH;;EAED,oBACI,oBAAC,UAAD,EACQ,IAAAC,mBAAA,EACAH,QADA,EAEA,IAAAJ,mBAAA,EAASN,SAAT,EAAoBK,KAAK,CAACE,SAA1B,EAAqC,+BAArC,CAFA,CADR,EAMKG,QAAQ,CAACF,QANd,CADJ;AAUH,CAhBD;;;;AAkBA,IAAMM,UAA+B,GAAG,SAAlCA,UAAkC,CAAAT,KAAK,EAAI;EAC7C,IAAMK,QAAQ,GAAG,qBAAML,KAAN,CAAjB;;EACA,IAAI,CAACK,QAAQ,CAACC,cAAT,CAAwB,MAAxB,CAAL,EAAsC;IAClCD,QAAQ,CAACE,IAAT,GAAgB,CAAhB;EACH;;EAED,oBACI,oBAAC,UAAD,EAAU,IAAAC,mBAAA,EAAWH,QAAX,EAAqB,gCAArB,CAAV,eACI,oBAAC,iBAAD;IACI,SAAS,EAAE,wCADf;IAEI,EAAE,EAAE;EAFR,GAIKA,QAAQ,CAACF,QAJd,CADJ,CADJ;AAUH,CAhBD"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/app-admin",
-	"version": "5.29.0-beta.1",
+	"version": "5.30.0-beta.0",
 	"main": "index.js",
 	"description": "A collection of plugins that together form a complete admin interface, customizable and extensible with Webiny apps and plugins.",
 	"repository": {
@@ -13,24 +13,24 @@
 		"@apollo/react-common": "3.1.4",
 		"@apollo/react-components": "3.1.5",
 		"@apollo/react-hooks": "3.1.5",
-		"@babel/runtime": "7.18.3",
+		"@babel/runtime": "7.18.6",
 		"@editorjs/editorjs": "2.25.0",
 		"@emotion/core": "10.3.1",
 		"@emotion/styled": "10.3.0",
 		"@svgr/webpack": "6.2.1",
 		"@types/mime": "2.0.3",
 		"@types/react": "16.14.2",
-		"@webiny/app": "5.29.0-beta.1",
-		"@webiny/app-admin-core": "5.29.0-beta.1",
-		"@webiny/app-security": "5.29.0-beta.1",
-		"@webiny/app-wcp": "5.29.0-beta.1",
-		"@webiny/form": "5.29.0-beta.1",
-		"@webiny/plugins": "5.29.0-beta.1",
-		"@webiny/react-router": "5.29.0-beta.1",
-		"@webiny/telemetry": "5.29.0-beta.1",
-		"@webiny/ui": "5.29.0-beta.1",
-		"@webiny/ui-composer": "5.29.0-beta.1",
-		"@webiny/validation": "5.29.0-beta.1",
+		"@webiny/app": "5.30.0-beta.0",
+		"@webiny/app-admin-core": "5.30.0-beta.0",
+		"@webiny/app-security": "5.30.0-beta.0",
+		"@webiny/app-wcp": "5.30.0-beta.0",
+		"@webiny/form": "5.30.0-beta.0",
+		"@webiny/plugins": "5.30.0-beta.0",
+		"@webiny/react-router": "5.30.0-beta.0",
+		"@webiny/telemetry": "5.30.0-beta.0",
+		"@webiny/ui": "5.30.0-beta.0",
+		"@webiny/ui-composer": "5.30.0-beta.0",
+		"@webiny/validation": "5.30.0-beta.0",
 		"apollo-cache": "1.3.5",
 		"apollo-client": "2.6.10",
 		"apollo-link": "1.2.14",
@@ -70,13 +70,13 @@
 		"@types/bytes": "^3.1.1",
 		"@types/graphlib": "^2.1.8",
 		"@types/store": "^2.0.2",
-		"@webiny/cli": "^5.29.0-beta.1",
-		"@webiny/project-utils": "^5.29.0-beta.1",
+		"@webiny/cli": "^5.30.0-beta.0",
+		"@webiny/project-utils": "^5.30.0-beta.0",
 		"babel-plugin-emotion": "^9.2.8",
 		"babel-plugin-lodash": "^3.3.4",
 		"rimraf": "^3.0.2",
 		"ttypescript": "^1.5.12",
-		"typescript": "4.5.5"
+		"typescript": "4.7.4"
 	},
 	"publishConfig": {
 		"access": "public",
@@ -98,5 +98,5 @@
 			]
 		}
 	},
-	"gitHead": "e4393aa7faa07c7a465ff320d8b4dc51f2f38315"
+	"gitHead": "622d120f5637e3ca807b8bfc9ed2cd034ac85fb7"
 }

package/styles/material-theme-assignments.scss

@@ -1,39 +1,39 @@
-@use "~@material/top-app-bar/_mixins.scss" as topAppBar;
-@use "~@material/elevation/mixins" as elevation;
-@use "~@material/button/mixins" as button;
-@use "~@material/icon-button/mixins" as iconButton;
-@use "~@material/drawer/mixins" as drawer;
-@use "~@material/tab-bar/mixins" as tabBar;
-@use "~@material/tab/mixins" as tab;
-@use "~@material/tab-indicator/mixins" as tabIndicator;
-@use "~@material/list/mixins" as list;
-@use "~@material/switch/mixins" as switch;
-@use "~@material/textfield/mixins" as textfield;
-@use "~@material/select/mixins" as select;
-@use "~@material/checkbox/mixins" as checkbox;
-@use "~@material/radio/mixins" as radio;
-@use "~@material/snackbar/mixins" as snackbar;
+@use "@material/top-app-bar/_mixins.scss" as topAppBar;
+@use "@material/elevation/mixins" as elevation;
+@use "@material/button/mixins" as button;
+@use "@material/icon-button/mixins" as iconButton;
+@use "@material/drawer/mixins" as drawer;
+@use "@material/tab-bar/mixins" as tabBar;
+@use "@material/tab/mixins" as tab;
+@use "@material/tab-indicator/mixins" as tabIndicator;
+@use "@material/list/mixins" as list;
+@use "@material/switch/mixins" as switch;
+@use "@material/textfield/mixins" as textfield;
+@use "@material/select/mixins" as select;
+@use "@material/checkbox/mixins" as checkbox;
+@use "@material/radio/mixins" as radio;
+@use "@material/snackbar/mixins" as snackbar;
 
 // top app bar should use theme-surface as the fill color
 .mdc-top-app-bar {
-  @include topAppBar.mdc-top-app-bar-fill-color($mdc-theme-surface);
+  @include topAppBar.fill-color($mdc-theme-surface);
 }
 
 .mdc-top-app-bar.primary {
-  @include topAppBar.mdc-top-app-bar-fill-color($mdc-theme-primary);
+  @include topAppBar.fill-color($mdc-theme-primary);
 }
 
 // elevation should use theme-surface as fill color so it can be used as surface
 .mdc-elevation--z1 {
-  @include elevation.mdc-elevation(1, $mdc-theme-on-surface);
+  @include elevation.elevation(1, $mdc-theme-on-surface);
 }
 
 .mdc-elevation--z2 {
-  @include elevation.mdc-elevation(2, $mdc-theme-on-surface);
+  @include elevation.elevation(2, $mdc-theme-on-surface);
 }
 
 .mdc-elevation--z3 {
-  @include elevation.mdc-elevation(3, $mdc-theme-on-surface);
+  @include elevation.elevation(3, $mdc-theme-on-surface);
 }
 
 .mdc-elevation--z1,
@@ -50,7 +50,7 @@
 
 // button styles
 .mdc-button {
-  @include button.mdc-button-shape-radius(2px);
+  @include button.shape-radius(2px);
   .mdc-button__label {
     display: flex;
     align-items: center;
@@ -60,17 +60,17 @@
 // set icon colors
 .mdc-icon,
 .mdc-icon-button {
-  @include iconButton.mdc-icon-button-ink-color($mdc-theme-text-secondary-on-background);
+  @include iconButton.ink-color($mdc-theme-text-secondary-on-background);
 }
 
 // drawer
 .mcd-drawer {
-  @include drawer.mdc-drawer-title-ink-color($mdc-theme-text-primary-on-background);
-  @include drawer.mdc-drawer-subtitle-ink-color($mdc-theme-text-primary-on-background);
-  @include drawer.mdc-drawer-item-icon-ink-color($mdc-theme-text-primary-on-background);
-  @include drawer.mdc-drawer-item-text-ink-color($mdc-theme-text-primary-on-background);
-  @include drawer.mdc-drawer-surface-fill-color($mdc-theme-surface);
-  @include drawer.mdc-drawer-item-shape-radius(0);
+  @include drawer.title-ink-color($mdc-theme-text-primary-on-background);
+  @include drawer.subtitle-ink-color($mdc-theme-text-primary-on-background);
+  @include drawer.item-icon-ink-color($mdc-theme-text-primary-on-background);
+  @include drawer.item-text-ink-color($mdc-theme-text-primary-on-background);
+  @include drawer.surface-fill-color($mdc-theme-surface);
+  @include drawer.item-shape-radius(0);
 }
 
 // fix for drawer positioning
@@ -90,31 +90,31 @@
 
 // tabs
 .mdc-tab-bar {
-  @include tabBar.mdc-tab-bar-width("100%");
+  @include tabBar.width("100%");
 
   .mdc-tab {
-    @include tab.mdc-tab-fixed-width("100px");
-    @include tab.mdc-tab-text-label-color($mdc-theme-text-primary-on-background);
-    @include tab.mdc-tab-icon-color($mdc-theme-text-primary-on-background);
+    @include tab.fixed-width("100px");
+    @include tab.text-label-color($mdc-theme-text-primary-on-background);
+    @include tab.icon-color($mdc-theme-text-primary-on-background);
 
     // fixes tab width
     flex: 1 0;
   }
 
   .mdc-tab-indicator {
-    @include tabIndicator.mdc-tab-indicator-underline-color($mdc-theme-primary);
+    @include tabIndicator.underline-color($mdc-theme-primary);
   }
 }
 
 // list
 .mdc-list {
-  @include list.mdc-list-item-primary-text-ink-color($mdc-theme-text-primary-on-background);
-  @include list.mdc-list-item-secondary-text-ink-color($mdc-theme-text-secondary-on-background);
-  @include list.mdc-list-item-graphic-ink-color($mdc-theme-text-secondary-on-background);
-  @include list.mdc-list-item-meta-ink-color($mdc-theme-text-secondary-on-background);
-  @include list.mdc-list-divider-color($mdc-theme-on-background);
-  @include list.mdc-list-group-subheader-ink-color($mdc-theme-text-primary-on-background);
-  @include list.mdc-list-item-shape-radius(0);
+  @include list.item-primary-text-ink-color($mdc-theme-text-primary-on-background);
+  @include list.item-secondary-text-ink-color($mdc-theme-text-secondary-on-background);
+  @include list.item-graphic-ink-color($mdc-theme-text-secondary-on-background);
+  @include list.item-meta-ink-color($mdc-theme-text-secondary-on-background);
+  @include list.divider-color($mdc-theme-on-background);
+  @include list.group-subheader-ink-color($mdc-theme-text-primary-on-background);
+  @include list.single-line-shape-radius(0);
 
   .mdc-list-item {
     color: $mdc-theme-text-primary-on-background;
@@ -139,7 +139,7 @@
 
 // switch
 .mdc-switch {
-  @include switch.mdc-switch-toggled-off-track-color($mdc-theme-on-surface);
+  @include switch.toggled-off-track-color($mdc-theme-on-surface);
   margin-left: 5px;
   margin-right: 10px;
 }
@@ -154,11 +154,11 @@ Fix the width of input components when inside grids
  */
 .mdc-text-field {
   width: 100%;
-  @include textfield.mdc-text-field-shape-radius(0);
-  @include textfield.mdc-text-field-textarea-shape-radius(0);
-  @include textfield.mdc-text-field-fill-color($mdc-theme-on-background);
-  @include textfield.mdc-text-field-label-color($mdc-theme-text-primary-on-background);
-  @include textfield.mdc-text-field-ink-color($mdc-theme-on-surface);
+  @include textfield.shape-radius(0);
+  @include textfield.textarea-shape-radius(0);
+  @include textfield.fill-color($mdc-theme-on-background);
+  @include textfield.label-color($mdc-theme-text-primary-on-background);
+  @include textfield.ink-color($mdc-theme-on-surface);
   &.mdc-text-field--textarea {
     textarea {
       padding-top: 25px;
@@ -230,19 +230,19 @@ Fix the width of input components when inside grids
         > .mdc-tab-bar {
           position: absolute;
           z-index: 10;
-          @include tabBar.mdc-tab-bar-width(100%);
+          @include tabBar.width(100%);
           background-color: $mdc-theme-secondary;
           .mdc-tab {
-            @include tab.mdc-tab-text-label-color($mdc-theme-on-secondary);
-            @include tab.mdc-tab-icon-color($mdc-theme-on-secondary);
-            @include tab.mdc-tab-fixed-width(100px);
+            @include tab.text-label-color($mdc-theme-on-secondary);
+            @include tab.icon-color($mdc-theme-on-secondary);
+            @include tab.fixed-width(100px);
             justify-content: flex-start;
             font-weight: 600;
           }
           .mdc-tab-indicator {
             padding-bottom: 5px;
             margin-top: -1px;
-            @include tabIndicator.mdc-tab-indicator-underline-color($mdc-theme-on-secondary);
+            @include tabIndicator.underline-color($mdc-theme-on-secondary);
             background-color: $mdc-theme-secondary;
           }
         }
@@ -267,13 +267,13 @@ Fix the width of input components when inside grids
 // select
 .mdc-select {
   width: 100%;
-  @include select.mdc-select-ink-color($mdc-theme-text-primary-on-background);
-  @include select.mdc-select-label-color($mdc-theme-text-secondary-on-background);
-  @include select.mdc-select-bottom-line-color($mdc-theme-text-secondary-on-background);
-  @include select.mdc-select-hover-bottom-line-color($mdc-theme-text-primary-on-background);
-  @include select.mdc-select-container-fill-color($mdc-theme-on-background);
-  @include select.mdc-select-shape-radius(0);
-  @include select.mdc-select-outline-shape-radius(2);
+  @include select.ink-color($mdc-theme-text-primary-on-background);
+  @include select.label-color($mdc-theme-text-secondary-on-background);
+  @include select.bottom-line-color($mdc-theme-text-secondary-on-background);
+  @include select.hover-bottom-line-color($mdc-theme-text-primary-on-background);
+  @include select.container-fill-color($mdc-theme-on-background);
+  @include select.shape-radius(0);
+  @include select.outline-shape-radius(2);
 
   /*
   Fix for select box appearance. For some reason browser prefix css attributes are striped away.
@@ -290,28 +290,40 @@ Fix the width of input components when inside grids
       padding-top: 10px;
     }
   }
-
-  .mdc-select__dropdown-icon {
-    bottom: 50%;
-    transform: translateY(50%);
+  &:not(.mdc-select--disabled).mdc-select--focused {
+    .mdc-floating-label {
+      color: rgba(0, 0, 0, 0.6);
+    }
+    .mdc-select__dropdown-icon {
+      @include select.dd-arrow-svg-bg_($mdc-theme-primary, 1);
+    }
+  }
+  &:not(.mdc-select--disabled).mdc-select--focused {
+    .mdc-floating-label {
+      color: rgba(0, 0, 0, 0.6);
+    }
+    .mdc-select__dropdown-icon {
+      @include select.dd-arrow-svg-bg_($mdc-theme-primary, 1);
+    }
   }
 }
 
 // checkbox
 .mdc-checkbox {
-  @include checkbox.mdc-checkbox-container-colors("text-secondary-on-background");
+  @include checkbox.container-colors("text-secondary-on-background");
 }
 
 // radio button
 .mdc-radio {
-  @include radio.mdc-radio-unchecked-stroke-color("text-secondary-on-background");
+  @include radio.unchecked-stroke-color("text-secondary-on-background");
 }
 
 // snackbar
 .mdc-snackbar {
-  @include snackbar.mdc-snackbar-shape-radius(2px);
-  @include snackbar.mdc-snackbar-z-index(1000);
+  @include snackbar.shape-radius(2px);
+  @include snackbar.z-index(1000);
 }
+
 .mdc-snackbar__action:not(:disabled) {
   color: var(--mdc-theme-primary);
   &::before {

package/styles/material.scss

@@ -1,4 +1,4 @@
-@use "~@material/theme/mixins" as themeMixins;
+@use "@material/theme/mixins" as themeMixins;
 
 // material variables
 $mdc-theme-primary: $webiny-theme-light-primary;
@@ -34,6 +34,7 @@ body {
   --mdc-theme-text-secondary-on-background: #{$mdc-theme-text-secondary-on-background};
   --mdc-theme-text-hint-on-dark: #{$mdc-theme-text-hint-on-dark};
   --mdc-theme-caret-down: #{$webiny-theme-light-caret-down};
+  --mdc-typography-font-family: #{$mdc-typography-font-family};
 
   font-family: "Source Sans Pro";
 }

package/ui/elements/ButtonElement.js

@@ -15,6 +15,8 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
+var _kebabCase2 = _interopRequireDefault(require("lodash/kebabCase"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _Button = require("@webiny/ui/Button");
@@ -92,7 +94,8 @@ var ButtonElement = /*#__PURE__*/function (_UIElement) {
       return /*#__PURE__*/_react.default.createElement(Component, {
         onClick: function onClick() {
           return _onClick(props);
-        }
+        },
+        "data-testid": "button-element-".concat((0, _kebabCase2.default)(this.getLabel(props)))
       }, this.getLabel(props));
     }
   }]);

package/ui/elements/ButtonElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["BUTTONS","default","ButtonDefault","primary","ButtonPrimary","secondary","ButtonSecondary","ButtonElement","label","config","props","type","onClick","Component","getType","getOnClick","getLabel","UIElement"],"sources":["ButtonElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { ButtonDefault, ButtonPrimary, ButtonSecondary } from \"@webiny/ui/Button\";\nimport { UIElement, UIElementConfig } from \"../UIElement\";\n\nexport type ButtonElementType = \"default\" | \"primary\" | \"secondary\";\n\nexport interface ButtonOnClick<TRenderProps = any> {\n    (props: TRenderProps): void;\n}\n\ninterface GetterWithProps<TProps, TReturn> {\n    (props: TProps): TReturn;\n}\n\nexport interface ButtonElementConfig<TRenderProps> extends UIElementConfig {\n    type: ButtonElementType | GetterWithProps<TRenderProps, ButtonElementType>;\n    label: string | GetterWithProps<TRenderProps, string>;\n    onClick: ButtonOnClick<TRenderProps>;\n}\n\nconst BUTTONS = {\n    default: ButtonDefault,\n    primary: ButtonPrimary,\n    secondary: ButtonSecondary\n};\n\nexport class ButtonElement<TRenderProps = any> extends UIElement<\n    ButtonElementConfig<TRenderProps>\n> {\n    public setLabel<TProps extends TRenderProps = TRenderProps>(\n        label: string | GetterWithProps<TProps, string>\n    ): void {\n        /**\n         * TODO @ts-refactor\n         * 'TProps' could be instantiated with an arbitrary type which could be unrelated to 'TRenderProps'\n         */\n        // @ts-ignore\n        this.config.label = label;\n    }\n\n    public getLabel(props?: TRenderProps): string {\n        if (typeof this.config.label === \"function\") {\n            // TODO @ts-refactor find out correct types to pass\n            return this.config.label(props as TRenderProps);\n        }\n        return this.config.label;\n    }\n\n    public setType(type: ButtonElementType): void {\n        this.config.type = type;\n    }\n\n    public getType(props?: TRenderProps): ButtonElementType {\n        if (typeof this.config.type === \"function\") {\n            // TODO @ts-refactor find out correct types to pass\n            return this.config.type(props as TRenderProps);\n        }\n        return this.config.type;\n    }\n\n    public setOnClick(onClick: ButtonOnClick<TRenderProps>): void {\n        this.config.onClick = onClick;\n    }\n\n    public getOnClick() {\n        return this.config.onClick;\n    }\n\n    public override render(props: TRenderProps): React.ReactElement {\n        const Component = BUTTONS[this.getType(props)];\n        const onClick = this.getOnClick();\n\n        return <Component onClick={() => onClick(props)}>{this.getLabel(props)}</Component>;\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAkBA,IAAMA,OAAO,GAAG;EACZC,OAAO,EAAEC,qBADG;EAEZC,OAAO,EAAEC,qBAFG;EAGZC,SAAS,EAAEC;AAHC,CAAhB;;IAMaC,a;;;;;;;;;;;;WAGT,kBACIC,KADJ,EAEQ;MACJ;AACR;AACA;AACA;MACQ;MACA,KAAKC,MAAL,CAAYD,KAAZ,GAAoBA,KAApB;IACH;;;WAED,kBAAgBE,KAAhB,EAA8C;MAC1C,IAAI,OAAO,KAAKD,MAAL,CAAYD,KAAnB,KAA6B,UAAjC,EAA6C;QACzC;QACA,OAAO,KAAKC,MAAL,CAAYD,KAAZ,CAAkBE,KAAlB,CAAP;MACH;;MACD,OAAO,KAAKD,MAAL,CAAYD,KAAnB;IACH;;;WAED,iBAAeG,IAAf,EAA8C;MAC1C,KAAKF,MAAL,CAAYE,IAAZ,GAAmBA,IAAnB;IACH;;;WAED,iBAAeD,KAAf,EAAwD;MACpD,IAAI,OAAO,KAAKD,MAAL,CAAYE,IAAnB,KAA4B,UAAhC,EAA4C;QACxC;QACA,OAAO,KAAKF,MAAL,CAAYE,IAAZ,CAAiBD,KAAjB,CAAP;MACH;;MACD,OAAO,KAAKD,MAAL,CAAYE,IAAnB;IACH;;;WAED,oBAAkBC,OAAlB,EAA8D;MAC1D,KAAKH,MAAL,CAAYG,OAAZ,GAAsBA,OAAtB;IACH;;;WAED,sBAAoB;MAChB,OAAO,KAAKH,MAAL,CAAYG,OAAnB;IACH;;;WAED,gBAAuBF,KAAvB,EAAgE;MAC5D,IAAMG,SAAS,GAAGb,OAAO,CAAC,KAAKc,OAAL,CAAaJ,KAAb,CAAD,CAAzB;;MACA,IAAME,QAAO,GAAG,KAAKG,UAAL,EAAhB;;MAEA,oBAAO,6BAAC,SAAD;QAAW,OAAO,EAAE;UAAA,OAAMH,QAAO,CAACF,KAAD,CAAb;QAAA;MAApB,GAA2C,KAAKM,QAAL,CAAcN,KAAd,CAA3C,CAAP;IACH;;;EA/CkDO,qB"}
+{"version":3,"names":["BUTTONS","default","ButtonDefault","primary","ButtonPrimary","secondary","ButtonSecondary","ButtonElement","label","config","props","type","onClick","Component","getType","getOnClick","getLabel","UIElement"],"sources":["ButtonElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { ButtonDefault, ButtonPrimary, ButtonSecondary } from \"@webiny/ui/Button\";\nimport { UIElement, UIElementConfig } from \"../UIElement\";\nimport { kebabCase } from \"lodash\";\n\nexport type ButtonElementType = \"default\" | \"primary\" | \"secondary\";\n\nexport interface ButtonOnClick<TRenderProps = any> {\n    (props: TRenderProps): void;\n}\n\ninterface GetterWithProps<TProps, TReturn> {\n    (props: TProps): TReturn;\n}\n\nexport interface ButtonElementConfig<TRenderProps> extends UIElementConfig {\n    type: ButtonElementType | GetterWithProps<TRenderProps, ButtonElementType>;\n    label: string | GetterWithProps<TRenderProps, string>;\n    onClick: ButtonOnClick<TRenderProps>;\n}\n\nconst BUTTONS = {\n    default: ButtonDefault,\n    primary: ButtonPrimary,\n    secondary: ButtonSecondary\n};\n\nexport class ButtonElement<TRenderProps = any> extends UIElement<\n    ButtonElementConfig<TRenderProps>\n> {\n    public setLabel<TProps extends TRenderProps = TRenderProps>(\n        label: string | GetterWithProps<TProps, string>\n    ): void {\n        /**\n         * TODO @ts-refactor\n         * 'TProps' could be instantiated with an arbitrary type which could be unrelated to 'TRenderProps'\n         */\n        // @ts-ignore\n        this.config.label = label;\n    }\n\n    public getLabel(props?: TRenderProps): string {\n        if (typeof this.config.label === \"function\") {\n            // TODO @ts-refactor find out correct types to pass\n            return this.config.label(props as TRenderProps);\n        }\n        return this.config.label;\n    }\n\n    public setType(type: ButtonElementType): void {\n        this.config.type = type;\n    }\n\n    public getType(props?: TRenderProps): ButtonElementType {\n        if (typeof this.config.type === \"function\") {\n            // TODO @ts-refactor find out correct types to pass\n            return this.config.type(props as TRenderProps);\n        }\n        return this.config.type;\n    }\n\n    public setOnClick(onClick: ButtonOnClick<TRenderProps>): void {\n        this.config.onClick = onClick;\n    }\n\n    public getOnClick() {\n        return this.config.onClick;\n    }\n\n    public override render(props: TRenderProps): React.ReactElement {\n        const Component = BUTTONS[this.getType(props)];\n        const onClick = this.getOnClick();\n\n        return (\n            <Component\n                onClick={() => onClick(props)}\n                data-testid={`button-element-${kebabCase(this.getLabel(props))}`}\n            >\n                {this.getLabel(props)}\n            </Component>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAmBA,IAAMA,OAAO,GAAG;EACZC,OAAO,EAAEC,qBADG;EAEZC,OAAO,EAAEC,qBAFG;EAGZC,SAAS,EAAEC;AAHC,CAAhB;;IAMaC,a;;;;;;;;;;;;WAGT,kBACIC,KADJ,EAEQ;MACJ;AACR;AACA;AACA;MACQ;MACA,KAAKC,MAAL,CAAYD,KAAZ,GAAoBA,KAApB;IACH;;;WAED,kBAAgBE,KAAhB,EAA8C;MAC1C,IAAI,OAAO,KAAKD,MAAL,CAAYD,KAAnB,KAA6B,UAAjC,EAA6C;QACzC;QACA,OAAO,KAAKC,MAAL,CAAYD,KAAZ,CAAkBE,KAAlB,CAAP;MACH;;MACD,OAAO,KAAKD,MAAL,CAAYD,KAAnB;IACH;;;WAED,iBAAeG,IAAf,EAA8C;MAC1C,KAAKF,MAAL,CAAYE,IAAZ,GAAmBA,IAAnB;IACH;;;WAED,iBAAeD,KAAf,EAAwD;MACpD,IAAI,OAAO,KAAKD,MAAL,CAAYE,IAAnB,KAA4B,UAAhC,EAA4C;QACxC;QACA,OAAO,KAAKF,MAAL,CAAYE,IAAZ,CAAiBD,KAAjB,CAAP;MACH;;MACD,OAAO,KAAKD,MAAL,CAAYE,IAAnB;IACH;;;WAED,oBAAkBC,OAAlB,EAA8D;MAC1D,KAAKH,MAAL,CAAYG,OAAZ,GAAsBA,OAAtB;IACH;;;WAED,sBAAoB;MAChB,OAAO,KAAKH,MAAL,CAAYG,OAAnB;IACH;;;WAED,gBAAuBF,KAAvB,EAAgE;MAC5D,IAAMG,SAAS,GAAGb,OAAO,CAAC,KAAKc,OAAL,CAAaJ,KAAb,CAAD,CAAzB;;MACA,IAAME,QAAO,GAAG,KAAKG,UAAL,EAAhB;;MAEA,oBACI,6BAAC,SAAD;QACI,OAAO,EAAE;UAAA,OAAMH,QAAO,CAACF,KAAD,CAAb;QAAA,CADb;QAEI,wCAA+B,yBAAU,KAAKM,QAAL,CAAcN,KAAd,CAAV,CAA/B;MAFJ,GAIK,KAAKM,QAAL,CAAcN,KAAd,CAJL,CADJ;IAQH;;;EAtDkDO,qB"}

package/ui/elements/form/InputElement.js

@@ -58,6 +58,7 @@ var InputElement = /*#__PURE__*/function (_FormFieldElement) {
           return _this2.onAfterChange(value, form);
         }
       }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
+        "data-testid": "input-element-".concat(this.getLabel(props)),
         label: this.getLabel(props),
         placeholder: this.getPlaceholder(props),
         disabled: this.getIsDisabled(props),

package/ui/elements/form/InputElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["InputElement","id","config","applyPlugins","props","formProps","Error","Bind","getName","getValidators","getDefaultValue","value","cb","onBeforeChange","form","onAfterChange","getLabel","getPlaceholder","getIsDisabled","getDescription","FormFieldElement"],"sources":["InputElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { Input } from \"@webiny/ui/Input\";\nimport {\n    FormFieldElement,\n    FormFieldElementConfig,\n    FormFieldElementRenderProps\n} from \"~/ui/elements/form/FormFieldElement\";\n\nexport type InputElementRenderProps = FormFieldElementRenderProps;\nexport class InputElement extends FormFieldElement {\n    public constructor(id: string, config: FormFieldElementConfig) {\n        super(id, config);\n\n        this.applyPlugins(InputElement);\n    }\n\n    public override render(props: FormFieldElementRenderProps): React.ReactNode {\n        if (!props.formProps) {\n            throw Error(`InputElement must be placed inside of a FormElement.`);\n        }\n\n        const { Bind } = props.formProps;\n\n        return (\n            <Bind\n                name={this.getName()}\n                validators={this.getValidators(props)}\n                defaultValue={this.getDefaultValue(props)}\n                beforeChange={(value: string, cb) => this.onBeforeChange(value, cb)}\n                afterChange={(value: string, form) => this.onAfterChange(value, form)}\n            >\n                <Input\n                    label={this.getLabel(props)}\n                    placeholder={this.getPlaceholder(props)}\n                    disabled={this.getIsDisabled(props)}\n                    description={this.getDescription(props)}\n                />\n            </Bind>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;IAOaA,Y;;;;;EACT,sBAAmBC,EAAnB,EAA+BC,MAA/B,EAA+D;IAAA;;IAAA;IAC3D,0BAAMD,EAAN,EAAUC,MAAV;;IAEA,MAAKC,YAAL,CAAkBH,YAAlB;;IAH2D;EAI9D;;;;WAED,gBAAuBI,KAAvB,EAA4E;MAAA;;MACxE,IAAI,CAACA,KAAK,CAACC,SAAX,EAAsB;QAClB,MAAMC,KAAK,wDAAX;MACH;;MAED,IAAQC,IAAR,GAAiBH,KAAK,CAACC,SAAvB,CAAQE,IAAR;MAEA,oBACI,6BAAC,IAAD;QACI,IAAI,EAAE,KAAKC,OAAL,EADV;QAEI,UAAU,EAAE,KAAKC,aAAL,CAAmBL,KAAnB,CAFhB;QAGI,YAAY,EAAE,KAAKM,eAAL,CAAqBN,KAArB,CAHlB;QAII,YAAY,EAAE,sBAACO,KAAD,EAAgBC,EAAhB;UAAA,OAAuB,MAAI,CAACC,cAAL,CAAoBF,KAApB,EAA2BC,EAA3B,CAAvB;QAAA,CAJlB;QAKI,WAAW,EAAE,qBAACD,KAAD,EAAgBG,IAAhB;UAAA,OAAyB,MAAI,CAACC,aAAL,CAAmBJ,KAAnB,EAA0BG,IAA1B,CAAzB;QAAA;MALjB,gBAOI,6BAAC,YAAD;QACI,KAAK,EAAE,KAAKE,QAAL,CAAcZ,KAAd,CADX;QAEI,WAAW,EAAE,KAAKa,cAAL,CAAoBb,KAApB,CAFjB;QAGI,QAAQ,EAAE,KAAKc,aAAL,CAAmBd,KAAnB,CAHd;QAII,WAAW,EAAE,KAAKe,cAAL,CAAoBf,KAApB;MAJjB,EAPJ,CADJ;IAgBH;;;EA9B6BgB,mC"}
+{"version":3,"names":["InputElement","id","config","applyPlugins","props","formProps","Error","Bind","getName","getValidators","getDefaultValue","value","cb","onBeforeChange","form","onAfterChange","getLabel","getPlaceholder","getIsDisabled","getDescription","FormFieldElement"],"sources":["InputElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { Input } from \"@webiny/ui/Input\";\nimport {\n    FormFieldElement,\n    FormFieldElementConfig,\n    FormFieldElementRenderProps\n} from \"~/ui/elements/form/FormFieldElement\";\n\nexport type InputElementRenderProps = FormFieldElementRenderProps;\nexport class InputElement extends FormFieldElement {\n    public constructor(id: string, config: FormFieldElementConfig) {\n        super(id, config);\n\n        this.applyPlugins(InputElement);\n    }\n\n    public override render(props: FormFieldElementRenderProps): React.ReactNode {\n        if (!props.formProps) {\n            throw Error(`InputElement must be placed inside of a FormElement.`);\n        }\n\n        const { Bind } = props.formProps;\n\n        return (\n            <Bind\n                name={this.getName()}\n                validators={this.getValidators(props)}\n                defaultValue={this.getDefaultValue(props)}\n                beforeChange={(value: string, cb) => this.onBeforeChange(value, cb)}\n                afterChange={(value: string, form) => this.onAfterChange(value, form)}\n            >\n                <Input\n                    data-testid={`input-element-${this.getLabel(props)}`}\n                    label={this.getLabel(props)}\n                    placeholder={this.getPlaceholder(props)}\n                    disabled={this.getIsDisabled(props)}\n                    description={this.getDescription(props)}\n                />\n            </Bind>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;IAOaA,Y;;;;;EACT,sBAAmBC,EAAnB,EAA+BC,MAA/B,EAA+D;IAAA;;IAAA;IAC3D,0BAAMD,EAAN,EAAUC,MAAV;;IAEA,MAAKC,YAAL,CAAkBH,YAAlB;;IAH2D;EAI9D;;;;WAED,gBAAuBI,KAAvB,EAA4E;MAAA;;MACxE,IAAI,CAACA,KAAK,CAACC,SAAX,EAAsB;QAClB,MAAMC,KAAK,wDAAX;MACH;;MAED,IAAQC,IAAR,GAAiBH,KAAK,CAACC,SAAvB,CAAQE,IAAR;MAEA,oBACI,6BAAC,IAAD;QACI,IAAI,EAAE,KAAKC,OAAL,EADV;QAEI,UAAU,EAAE,KAAKC,aAAL,CAAmBL,KAAnB,CAFhB;QAGI,YAAY,EAAE,KAAKM,eAAL,CAAqBN,KAArB,CAHlB;QAII,YAAY,EAAE,sBAACO,KAAD,EAAgBC,EAAhB;UAAA,OAAuB,MAAI,CAACC,cAAL,CAAoBF,KAApB,EAA2BC,EAA3B,CAAvB;QAAA,CAJlB;QAKI,WAAW,EAAE,qBAACD,KAAD,EAAgBG,IAAhB;UAAA,OAAyB,MAAI,CAACC,aAAL,CAAmBJ,KAAnB,EAA0BG,IAA1B,CAAzB;QAAA;MALjB,gBAOI,6BAAC,YAAD;QACI,uCAA8B,KAAKE,QAAL,CAAcZ,KAAd,CAA9B,CADJ;QAEI,KAAK,EAAE,KAAKY,QAAL,CAAcZ,KAAd,CAFX;QAGI,WAAW,EAAE,KAAKa,cAAL,CAAoBb,KAApB,CAHjB;QAII,QAAQ,EAAE,KAAKc,aAAL,CAAmBd,KAAnB,CAJd;QAKI,WAAW,EAAE,KAAKe,cAAL,CAAoBf,KAApB;MALjB,EAPJ,CADJ;IAiBH;;;EA/B6BgB,mC"}