@webiny/app-admin 0.0.0-unstable.2af142b57e → 0.0.0-unstable.3bc8100a7f

package/plugins/globalSearch/SearchBarDropdown.js

@@ -1,83 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-var React = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _List = require("@webiny/ui/List");
-var _styled = require("./styled");
-var _Elevation = require("@webiny/ui/Elevation");
-var _Icon = require("@webiny/ui/Icon");
-var _roundSearch24px = require("./icons/round-search-24px.svg");
-var SearchBarDropdown = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(SearchBarDropdown, _React$Component);
-  var _super = (0, _createSuper2.default)(SearchBarDropdown);
-  function SearchBarDropdown() {
-    (0, _classCallCheck2.default)(this, SearchBarDropdown);
-    return _super.apply(this, arguments);
-  }
-  (0, _createClass2.default)(SearchBarDropdown, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props$context = this.props.context,
-        downshift = _this$props$context.downshift.current,
-        plugins = _this$props$context.state.plugins;
-      downshift.selectItem(plugins.current);
-      downshift.setHighlightedIndex(plugins.list.indexOf(plugins.current));
-      downshift.openMenu();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props$context2 = this.props.context,
-        downshift = _this$props$context2.downshift.current,
-        submitSearchTerm = _this$props$context2.submitSearchTerm,
-        _this$props$context2$ = _this$props$context2.state,
-        plugins = _this$props$context2$.plugins,
-        searchTerm = _this$props$context2$.searchTerm;
-      var getMenuProps = downshift.getMenuProps,
-        getItemProps = downshift.getItemProps,
-        _downshift$state = downshift.state,
-        selectedItem = _downshift$state.selectedItem,
-        highlightedIndex = _downshift$state.highlightedIndex;
-      return /*#__PURE__*/React.createElement(_Elevation.Elevation, {
-        z: 2,
-        className: _styled.searchBarDropdown
-      }, /*#__PURE__*/React.createElement(_List.List, getMenuProps(), plugins.list.map(function (item, index) {
-        // Base classes.
-        var itemClassNames = {
-          highlighted: highlightedIndex === index,
-          selected: false
-        };
-
-        // Add "selected" class if the item is selected.
-        if (selectedItem && selectedItem === item) {
-          itemClassNames.selected = true;
-        }
-        return /*#__PURE__*/React.createElement(_List.ListItem, Object.assign({
-          key: item.route
-        }, getItemProps({
-          index: index,
-          item: item,
-          className: (0, _classnames.default)(itemClassNames),
-          onClick: function onClick() {
-            return submitSearchTerm(item);
-          }
-        })), /*#__PURE__*/React.createElement(_List.ListItemGraphic, null, /*#__PURE__*/React.createElement(_Icon.Icon, {
-          className: _styled.iconSearchType,
-          icon: /*#__PURE__*/React.createElement(_roundSearch24px.ReactComponent, null)
-        })), /*#__PURE__*/React.createElement(_List.ListItemText, null, searchTerm.current || "Search for all..."), /*#__PURE__*/React.createElement(_List.ListItemMeta, null, "in ", item.label));
-      })));
-    }
-  }]);
-  return SearchBarDropdown;
-}(React.Component);
-exports.default = SearchBarDropdown;

package/plugins/globalSearch/SearchBarDropdown.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["SearchBarDropdown","props","context","downshift","current","plugins","state","selectItem","setHighlightedIndex","list","indexOf","openMenu","submitSearchTerm","searchTerm","getMenuProps","getItemProps","selectedItem","highlightedIndex","searchBarDropdown","map","item","index","itemClassNames","highlighted","selected","route","className","classnames","onClick","iconSearchType","label","React","Component"],"sources":["SearchBarDropdown.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { AdminGlobalSearchPlugin } from \"~/types\";\nimport classnames from \"classnames\";\nimport { List, ListItem, ListItemGraphic, ListItemText, ListItemMeta } from \"@webiny/ui/List\";\nimport { searchBarDropdown, iconSearchType } from \"./styled\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Actions as DownshiftActions, DownshiftState, PropGetters } from \"downshift\";\nimport { ReactComponent as SearchIcon } from \"./icons/round-search-24px.svg\";\nimport { SearchBarState } from \"~/plugins/globalSearch/SearchBar\";\n\ninterface SearchBarDropdownPropsContextDownshiftCurrent\n    extends DownshiftActions<any>,\n        PropGetters<any> {\n    state: DownshiftState<any>;\n}\ninterface SearchBarDropdownPropsContextDownshift {\n    current: SearchBarDropdownPropsContextDownshiftCurrent;\n}\ninterface SearchBarDropdownPropsContext {\n    downshift: SearchBarDropdownPropsContextDownshift;\n    submitSearchTerm: (item: AdminGlobalSearchPlugin) => void;\n    state: SearchBarState;\n}\ninterface SearchBarDropdownProps {\n    context: SearchBarDropdownPropsContext;\n}\nexport default class SearchBarDropdown extends React.Component<SearchBarDropdownProps> {\n    public override componentDidMount() {\n        const {\n            context: {\n                downshift: { current: downshift },\n                state: { plugins }\n            }\n        } = this.props;\n\n        downshift.selectItem(plugins.current);\n        downshift.setHighlightedIndex(\n            plugins.list.indexOf(plugins.current as AdminGlobalSearchPlugin)\n        );\n        downshift.openMenu();\n    }\n\n    public override render() {\n        const {\n            context: {\n                downshift: { current: downshift },\n                submitSearchTerm,\n                state: { plugins, searchTerm }\n            }\n        } = this.props;\n\n        const {\n            getMenuProps,\n            getItemProps,\n            state: { selectedItem, highlightedIndex }\n        } = downshift;\n\n        return (\n            <Elevation z={2} className={searchBarDropdown}>\n                <List {...getMenuProps()}>\n                    {plugins.list.map((item: AdminGlobalSearchPlugin, index) => {\n                        // Base classes.\n                        const itemClassNames = {\n                            highlighted: highlightedIndex === index,\n                            selected: false\n                        };\n\n                        // Add \"selected\" class if the item is selected.\n                        if (selectedItem && selectedItem === item) {\n                            itemClassNames.selected = true;\n                        }\n\n                        return (\n                            <ListItem\n                                key={item.route}\n                                {...getItemProps({\n                                    index,\n                                    item,\n                                    className: classnames(itemClassNames),\n                                    onClick: () => submitSearchTerm(item)\n                                })}\n                            >\n                                <ListItemGraphic>\n                                    <Icon className={iconSearchType} icon={<SearchIcon />} />\n                                </ListItemGraphic>\n                                <ListItemText>\n                                    {searchTerm.current || \"Search for all...\"}\n                                </ListItemText>\n                                <ListItemMeta>in {item.label}</ListItemMeta>\n                            </ListItem>\n                        );\n                    })}\n                </List>\n            </Elevation>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAA6E,IAmBxDA,iBAAiB;EAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA,OAClC,6BAAoC;MAChC,0BAKI,IAAI,CAACC,KAAK,CAJVC,OAAO;QACmBC,SAAS,uBAA/BA,SAAS,CAAIC,OAAO;QACXC,OAAO,uBAAhBC,KAAK,CAAID,OAAO;MAIxBF,SAAS,CAACI,UAAU,CAACF,OAAO,CAACD,OAAO,CAAC;MACrCD,SAAS,CAACK,mBAAmB,CACzBH,OAAO,CAACI,IAAI,CAACC,OAAO,CAACL,OAAO,CAACD,OAAO,CAA4B,CACnE;MACDD,SAAS,CAACQ,QAAQ,EAAE;IACxB;EAAC;IAAA;IAAA,OAED,kBAAyB;MACrB,2BAMI,IAAI,CAACV,KAAK,CALVC,OAAO;QACmBC,SAAS,wBAA/BA,SAAS,CAAIC,OAAO;QACpBQ,gBAAgB,wBAAhBA,gBAAgB;QAAA,6CAChBN,KAAK;QAAID,OAAO,yBAAPA,OAAO;QAAEQ,UAAU,yBAAVA,UAAU;MAIpC,IACIC,YAAY,GAGZX,SAAS,CAHTW,YAAY;QACZC,YAAY,GAEZZ,SAAS,CAFTY,YAAY;QAAA,mBAEZZ,SAAS,CADTG,KAAK;QAAIU,YAAY,oBAAZA,YAAY;QAAEC,gBAAgB,oBAAhBA,gBAAgB;MAG3C,oBACI,oBAAC,oBAAS;QAAC,CAAC,EAAE,CAAE;QAAC,SAAS,EAAEC;MAAkB,gBAC1C,oBAAC,UAAI,EAAKJ,YAAY,EAAE,EACnBT,OAAO,CAACI,IAAI,CAACU,GAAG,CAAC,UAACC,IAA6B,EAAEC,KAAK,EAAK;QACxD;QACA,IAAMC,cAAc,GAAG;UACnBC,WAAW,EAAEN,gBAAgB,KAAKI,KAAK;UACvCG,QAAQ,EAAE;QACd,CAAC;;QAED;QACA,IAAIR,YAAY,IAAIA,YAAY,KAAKI,IAAI,EAAE;UACvCE,cAAc,CAACE,QAAQ,GAAG,IAAI;QAClC;QAEA,oBACI,oBAAC,cAAQ;UACL,GAAG,EAAEJ,IAAI,CAACK;QAAM,GACZV,YAAY,CAAC;UACbM,KAAK,EAALA,KAAK;UACLD,IAAI,EAAJA,IAAI;UACJM,SAAS,EAAE,IAAAC,mBAAU,EAACL,cAAc,CAAC;UACrCM,OAAO,EAAE;YAAA,OAAMhB,gBAAgB,CAACQ,IAAI,CAAC;UAAA;QACzC,CAAC,CAAC,gBAEF,oBAAC,qBAAe,qBACZ,oBAAC,UAAI;UAAC,SAAS,EAAES,sBAAe;UAAC,IAAI,eAAE,oBAAC,+BAAU;QAAI,EAAG,CAC3C,eAClB,oBAAC,kBAAY,QACRhB,UAAU,CAACT,OAAO,IAAI,mBAAmB,CAC/B,eACf,oBAAC,kBAAY,QAAC,KAAG,EAACgB,IAAI,CAACU,KAAK,CAAgB,CACrC;MAEnB,CAAC,CAAC,CACC,CACC;IAEpB;EAAC;EAAA;AAAA,EArE0CC,KAAK,CAACC,SAAS;AAAA"}

package/plugins/globalSearch/icons/round-search-24px.svg

@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Header_x2F_BG" display="none">
-	<rect x="-358" y="-314" display="inline" fill="#F1F1F2" width="520" height="520"/>
-</g>
-<g id="Bounding_Boxes">
-	<g id="ui_x5F_spec_x5F_header_copy_3" display="none">
-	</g>
-	<path fill="none" d="M0,0h24v24H0V0z"/>
-</g>
-<g id="Rounded">
-	<g id="ui_x5F_spec_x5F_header_copy_5" display="none">
-	</g>
-	<path fill="currentColor" d="M15.5,14h-0.79l-0.28-0.27c1.2-1.4,1.82-3.31,1.48-5.34c-0.47-2.78-2.79-5-5.59-5.34c-4.23-0.52-7.79,3.04-7.27,7.27
-		c0.34,2.8,2.56,5.12,5.34,5.59c2.03,0.34,3.94-0.28,5.34-1.48L14,14.71v0.79l4.25,4.25c0.41,0.41,1.08,0.41,1.49,0l0,0
-		c0.41-0.41,0.41-1.08,0-1.49L15.5,14z M9.5,14C7.01,14,5,11.99,5,9.5S7.01,5,9.5,5S14,7.01,14,9.5S11.99,14,9.5,14z"/>
-</g>
-</svg>

package/plugins/globalSearch/index.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="web" />
-import React from "react";
-export declare const globalSearchHotkey: {
-    type: string;
-    name: string;
-    preventOpen(e: React.ChangeEvent<HTMLInputElement>): boolean;
-};

package/plugins/globalSearch/index.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.globalSearchHotkey = void 0;
-var globalSearchHotkey = {
-  type: "admin-global-search-prevent-hotkey",
-  name: "admin-global-search-prevent-hotkey-input",
-  preventOpen: function preventOpen(e) {
-    // Define a list of all node types we want to prevent the event from.
-    var ignoreNodes = ["INPUT", "TEXTAREA"];
-    return ignoreNodes.includes(e.target.nodeName);
-  }
-};
-exports.globalSearchHotkey = globalSearchHotkey;

package/plugins/globalSearch/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["globalSearchHotkey","type","name","preventOpen","e","ignoreNodes","includes","target","nodeName"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\n\nexport const globalSearchHotkey = {\n    type: \"admin-global-search-prevent-hotkey\",\n    name: \"admin-global-search-prevent-hotkey-input\",\n    preventOpen(e: React.ChangeEvent<HTMLInputElement>): boolean {\n        // Define a list of all node types we want to prevent the event from.\n        const ignoreNodes = [\"INPUT\", \"TEXTAREA\"];\n\n        return ignoreNodes.includes(e.target.nodeName);\n    }\n};\n"],"mappings":";;;;;;AAEO,IAAMA,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,oCAAoC;EAC1CC,IAAI,EAAE,0CAA0C;EAChDC,WAAW,uBAACC,CAAsC,EAAW;IACzD;IACA,IAAMC,WAAW,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC;IAEzC,OAAOA,WAAW,CAACC,QAAQ,CAACF,CAAC,CAACG,MAAM,CAACC,QAAQ,CAAC;EAClD;AACJ,CAAC;AAAC"}

package/plugins/globalSearch/styled.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-/// <reference types="web" />
-/// <reference types="react" />
-export declare const SearchShortcut: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const SearchBarWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const SearchBarInputWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const searchBarInput: string;
-export declare const searchBarDropdown: string;
-export declare const icon: string;
-export declare const iconSearchType: string;
-export declare const searchWrapper: string;

package/plugins/globalSearch/styled.js

@@ -1,131 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.searchWrapper = exports.searchBarInput = exports.searchBarDropdown = exports.iconSearchType = exports.icon = exports.SearchShortcut = exports.SearchBarWrapper = exports.SearchBarInputWrapper = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _emotion = require("emotion");
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-// TODO remove
-// @ts-nocheck
-
-var SearchShortcut = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "eh6vkyz0",
-  label: "SearchShortcut"
-})({
-  border: "1px solid var(--mdc-theme-surface)",
-  color: "var(--mdc-theme-surface)",
-  borderRadius: 5,
-  width: 20,
-  height: 24,
-  marginTop: 1,
-  textAlign: "center",
-  fontSize: "12px",
-  paddingTop: "3px",
-  boxSizing: "border-box",
-  cursor: "default",
-  opacity: "0.8"
-});
-exports.SearchShortcut = SearchShortcut;
-var SearchBarWrapper = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "eh6vkyz1",
-  label: "SearchBarWrapper"
-})({
-  display: "flex",
-  width: "100%"
-});
-exports.SearchBarWrapper = SearchBarWrapper;
-var SearchBarInputWrapper = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "eh6vkyz2",
-  label: "SearchBarInputWrapper"
-})({
-  display: "flex",
-  width: "100%",
-  position: "relative"
-});
-exports.SearchBarInputWrapper = SearchBarInputWrapper;
-var searchBarInput = /*#__PURE__*/(0, _emotion.css)({
-  width: "100%",
-  lineHeight: 1,
-  border: "none",
-  outline: "none",
-  backgroundColor: "transparent",
-  "&.mdc-text-field__input": {
-    paddingTop: "5px !important",
-    paddingLeft: "10px !important",
-    borderBottom: "none !important",
-    height: "25px !important",
-    color: "var(--mdc-theme-surface)",
-    "&::placeholder": {
-      color: "var(--mdc-theme-surface) !important",
-      opacity: "1 !important"
-    },
-    "&:focus::placeholder": {
-      color: "var(--mdc-theme-text-secondary-on-background) !important"
-    }
-  }
-}, "label:searchBarInput;");
-exports.searchBarInput = searchBarInput;
-var searchBarDropdown = /*#__PURE__*/(0, _emotion.css)({
-  position: "absolute",
-  background: "white",
-  left: -1,
-  width: "calc(100% + 2px)",
-  top: 45,
-  zIndex: 2,
-  color: "var(--mdc-theme-on-surface)",
-  borderRadius: "0 0 5px 5px",
-  ".mdc-list": {
-    padding: 0,
-    ".mdc-list-item": {
-      "&.selected": {
-        fontWeight: "bold"
-      },
-      "&.highlighted": {
-        backgroundColor: "var(--mdc-theme-on-background)"
-      }
-    }
-  }
-}, "label:searchBarDropdown;");
-exports.searchBarDropdown = searchBarDropdown;
-var icon = /*#__PURE__*/(0, _emotion.css)({
-  "&.mdc-button__icon": {
-    width: "auto !important",
-    paddingRight: 5,
-    opacity: 0.75,
-    marginTop: 2
-  }
-}, "label:icon;");
-exports.icon = icon;
-var iconSearchType = /*#__PURE__*/(0, _emotion.css)({
-  cursor: "pointer",
-  paddingLeft: 5
-}, "label:iconSearchType;");
-exports.iconSearchType = iconSearchType;
-var searchWrapper = /*#__PURE__*/(0, _emotion.css)({
-  backgroundColor: "rgba(0, 0, 0, 0.1)",
-  display: "flex",
-  padding: "10px 20px",
-  position: "relative",
-  borderRadius: 4,
-  transition: "background 100ms ease-in,width 100ms ease-out",
-  color: "var(--mdc-theme-surface)",
-  border: "1px solid transparent",
-  "&.active": (0, _defineProperty2.default)({
-    color: "var(--mdc-theme-on-surface)",
-    border: "1px solid var(--mdc-theme-text-hint-on-dark)",
-    background: "var(--mdc-theme-surface)",
-    boxShadow: "0 1px 1px var(--mdc-theme-text-hint-on-dark)",
-    input: {
-      color: "var(--mdc-theme-on-surface)"
-    }
-  }, SearchShortcut, {
-    display: "none"
-  }),
-  input: {
-    color: "var(--mdc-theme-surface)"
-  }
-}, "label:searchWrapper;");
-exports.searchWrapper = searchWrapper;

package/plugins/globalSearch/styled.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["SearchShortcut","styled","border","color","borderRadius","width","height","marginTop","textAlign","fontSize","paddingTop","boxSizing","cursor","opacity","SearchBarWrapper","display","SearchBarInputWrapper","position","searchBarInput","css","lineHeight","outline","backgroundColor","paddingLeft","borderBottom","searchBarDropdown","background","left","top","zIndex","padding","fontWeight","icon","paddingRight","iconSearchType","searchWrapper","transition","boxShadow","input"],"sources":["styled.ts"],"sourcesContent":["// TODO remove\n// @ts-nocheck\nimport { css } from \"emotion\";\nimport styled from \"@emotion/styled\";\n\nexport const SearchShortcut = styled(\"div\")({\n    border: \"1px solid var(--mdc-theme-surface)\",\n    color: \"var(--mdc-theme-surface)\",\n    borderRadius: 5,\n    width: 20,\n    height: 24,\n    marginTop: 1,\n    textAlign: \"center\",\n    fontSize: \"12px\",\n    paddingTop: \"3px\",\n    boxSizing: \"border-box\",\n    cursor: \"default\",\n    opacity: \"0.8\"\n});\n\nexport const SearchBarWrapper = styled(\"div\")({\n    display: \"flex\",\n    width: \"100%\"\n});\n\nexport const SearchBarInputWrapper = styled(\"div\")({\n    display: \"flex\",\n    width: \"100%\",\n    position: \"relative\"\n});\n\nexport const searchBarInput = css({\n    width: \"100%\",\n    lineHeight: 1,\n    border: \"none\",\n    outline: \"none\",\n    backgroundColor: \"transparent\",\n    \"&.mdc-text-field__input\": {\n        paddingTop: \"5px !important\",\n        paddingLeft: \"10px !important\",\n        borderBottom: \"none !important\",\n        height: \"25px !important\",\n        color: \"var(--mdc-theme-surface)\",\n        \"&::placeholder\": {\n            color: \"var(--mdc-theme-surface) !important\",\n            opacity: \"1 !important\"\n        },\n        \"&:focus::placeholder\": {\n            color: \"var(--mdc-theme-text-secondary-on-background) !important\"\n        }\n    }\n});\n\nexport const searchBarDropdown = css({\n    position: \"absolute\",\n    background: \"white\",\n    left: -1,\n    width: \"calc(100% + 2px)\",\n    top: 45,\n    zIndex: 2,\n    color: \"var(--mdc-theme-on-surface)\",\n    borderRadius: \"0 0 5px 5px\",\n    \".mdc-list\": {\n        padding: 0,\n        \".mdc-list-item\": {\n            \"&.selected\": {\n                fontWeight: \"bold\"\n            },\n            \"&.highlighted\": {\n                backgroundColor: \"var(--mdc-theme-on-background)\"\n            }\n        }\n    }\n});\n\nexport const icon = css({\n    \"&.mdc-button__icon\": {\n        width: \"auto !important\",\n        paddingRight: 5,\n        opacity: 0.75,\n        marginTop: 2\n    }\n});\n\nexport const iconSearchType = css({\n    cursor: \"pointer\",\n    paddingLeft: 5\n});\n\nexport const searchWrapper = css({\n    backgroundColor: \"rgba(0, 0, 0, 0.1)\",\n    display: \"flex\",\n    padding: \"10px 20px\",\n    position: \"relative\",\n    borderRadius: 4,\n    transition: \"background 100ms ease-in,width 100ms ease-out\",\n    color: \"var(--mdc-theme-surface)\",\n    border: \"1px solid transparent\",\n    \"&.active\": {\n        color: \"var(--mdc-theme-on-surface)\",\n        border: \"1px solid var(--mdc-theme-text-hint-on-dark)\",\n        background: \"var(--mdc-theme-surface)\",\n        boxShadow: \"0 1px 1px var(--mdc-theme-text-hint-on-dark)\",\n        input: {\n            color: \"var(--mdc-theme-on-surface)\"\n        },\n        [SearchShortcut]: {\n            display: \"none\"\n        }\n    },\n    input: {\n        color: \"var(--mdc-theme-surface)\"\n    }\n});\n"],"mappings":"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"}

package/styles/material-theme-assignments.scss

@@ -1,350 +0,0 @@
-@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.fill-color($mdc-theme-surface);
-}
-
-.mdc-top-app-bar.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.elevation(1, $mdc-theme-on-surface);
-}
-
-.mdc-elevation--z2 {
-  @include elevation.elevation(2, $mdc-theme-on-surface);
-}
-
-.mdc-elevation--z3 {
-  @include elevation.elevation(3, $mdc-theme-on-surface);
-}
-
-.mdc-elevation--z1,
-.mdc-elevation--z2,
-.mdc-elevation--z3,
-.mdc-elevation--z4,
-.mdc-elevation--z5,
-.mdc-elevation--z6,
-.mdc-elevation--z7,
-.mdc-elevation--z8,
-.mdc-elevation--z9 {
-  background-color: $mdc-theme-surface;
-}
-
-// button styles
-.mdc-button {
-  @include button.shape-radius(2px);
-  .mdc-button__label {
-    display: flex;
-    align-items: center;
-  }
-}
-
-// set icon colors
-.mdc-icon,
-.mdc-icon-button {
-  @include iconButton.ink-color($mdc-theme-text-secondary-on-background);
-}
-
-// drawer
-.mcd-drawer {
-  @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
-.mdc-drawer {
-  z-index: 12;
-  background-color: $mdc-theme-surface;
-  &.mdc-drawer--modal.mdc-drawer--open {
-    top: 0;
-    background-color: $mdc-theme-surface;
-  }
-}
-
-// fix drawer display so we can have a nice drawer footer
-.mdc-drawer--modal.mdc-drawer--open {
-  display: flex;
-}
-
-// tabs
-.mdc-tab-bar {
-  @include tabBar.width("100%");
-
-  .mdc-tab {
-    @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.underline-color($mdc-theme-primary);
-  }
-}
-
-// list
-.mdc-list {
-  @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;
-  }
-
-  .mdc-list-item:hover,
-  .mdc-list-item::after,
-  .mdc-list-item::before {
-    background-color: transparent;
-  }
-  &:not(.mdc-list--non-interactive) {
-    .mdc-list-item:hover {
-      background-color: $mdc-theme-text-hint-on-dark;
-      cursor: pointer;
-    }
-    .mdc-list-item::after,
-    .mdc-list-item::before {
-      background-color: $mdc-theme-text-primary-on-background;
-    }
-  }
-}
-
-// switch
-.mdc-switch {
-  @include switch.toggled-off-track-color($mdc-theme-on-surface);
-  margin-left: 5px;
-  margin-right: 10px;
-}
-
-// menu
-.mdc-menu {
-  background-color: $mdc-theme-surface;
-}
-
-/*
-Fix the width of input components when inside grids
- */
-.mdc-text-field {
-  width: 100%;
-  @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;
-    }
-    .mdc-floating-label.mdc-floating-label {
-      margin-left: 11px;
-      top: 35px;
-    }
-    &.--focused {
-      .mdc-floating-label.mdc-floating-label {
-        top: 0px;
-      }
-    }
-  }
-  &.mdc-text-field--disabled {
-    background-color: $mdc-theme-background;
-    opacity: 0.55;
-    .mdc-text-field__input {
-      color: $mdc-theme-text-primary-on-background;
-      &::placeholder {
-        color: $mdc-theme-text-primary-on-background;
-      }
-    }
-  }
-  .mdc-text-field__input {
-    width: 100%;
-    resize: none;
-    //border: 1px solid $mdc-theme-on-background;
-  }
-}
-
-// textfield helper - color fix
-.mdc-text-field-helper-text {
-  margin-left: 2px !important;
-  color: $mdc-theme-text-secondary-on-background;
-  &--error {
-    color: $mdc-theme-primary !important;
-  }
-}
-
-// dialog
-.mdc-dialog {
-  z-index: 20;
-  .mdc-dialog__container {
-    width: 100%;
-  }
-  .mdc-dialog__surface {
-    border-radius: 0px;
-    max-width: 875px;
-    position: relative;
-    .mdc-dialog__title {
-      background-color: $mdc-theme-secondary;
-      padding-bottom: 20px;
-      font-size: 1.4rem;
-      font-weight: 600;
-      color: $mdc-theme-on-secondary;
-    }
-    .mdc-dialog__content {
-      color: $mdc-theme-text-primary-on-background;
-      max-height: 70vh;
-      overflow: auto;
-      margin-top: 0;
-      padding-top: 24px;
-      padding-bottom: 24px;
-      background-color: $mdc-theme-surface;
-
-      // add options for when tabs are inside the body
-      > .webiny-ui-tabs {
-        margin: -24px;
-        > .mdc-tab-bar {
-          position: absolute;
-          z-index: 10;
-          @include tabBar.width(100%);
-          background-color: $mdc-theme-secondary;
-          .mdc-tab {
-            @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.underline-color($mdc-theme-on-secondary);
-            background-color: $mdc-theme-secondary;
-          }
-        }
-        > .webiny-ui-tabs__content {
-          padding-top: 50px;
-          padding-bottom: 25px;
-        }
-      }
-      > .mdc-layout-grid {
-        margin: -24px;
-      }
-    }
-    .mdc-dialog__actions {
-      border-top: 1px solid $mdc-theme-on-background;
-      background-color: $mdc-theme-surface;
-      padding: 24px;
-    }
-  }
-  &.mdc-dialog--open .mdc-dialog__scrim {
-    opacity: 0.7;
-    background-color: var(--mdc-theme-on-surface);
-  }
-}
-
-// select
-.mdc-select {
-  width: 100%;
-  @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.
-   */
-  .mdc-select__native-control {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    border-radius: 2px;
-  }
-
-  &.mdc-select--box {
-    border-radius: 2px;
-    .mdc-select__native-control {
-      padding-top: 10px;
-    }
-  }
-  &: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.container-colors("text-secondary-on-background");
-}
-
-// radio button
-.mdc-radio {
-  @include radio.unchecked-stroke-color("text-secondary-on-background");
-}
-
-// snackbar
-.mdc-snackbar {
-  @include snackbar.shape-radius(2px);
-  @include snackbar.z-index(1000);
-}
-
-.mdc-snackbar__action:not(:disabled) {
-  color: var(--mdc-theme-primary);
-  &::before {
-    background-color: var(--mdc-theme-primary);
-  }
-  &::after {
-    background-color: var(--mdc-theme-primary);
-  }
-}
-
-// when grid is inside another grid cell, child grid should not have any padding
-.mdc-layout-grid {
-  > .mdc-layout-grid__inner {
-    > .mdc-layout-grid__cell {
-      > .mdc-layout-grid {
-        padding: 0;
-      }
-    }
-  }
-}