@webiny/app-admin 0.0.0-mt-2 → 0.0.0-unstable.1145e7667f

package/plugins/globalSearch/styled.d.ts

@@ -1,7 +1,18 @@
 /// <reference types="react" />
-export declare const SearchShortcut: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "children" | "defaultValue" | "id" | "onError" | "className" | "onChange" | "placeholder" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">, object>;
-export declare const SearchBarWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "children" | "defaultValue" | "id" | "onError" | "className" | "onChange" | "placeholder" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">, object>;
-export declare const SearchBarInputWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "children" | "defaultValue" | "id" | "onError" | "className" | "onChange" | "placeholder" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">, object>;
+/// <reference types="react" />
+/// <reference types="web" />
+export declare const SearchShortcut: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SearchBarWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SearchBarInputWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const searchBarInput: string;
 export declare const searchBarDropdown: string;
 export declare const icon: string;

package/plugins/globalSearch/styled.js

@@ -1,9 +1,17 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+"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
-import { css } from "emotion";
-import styled from "@emotion/styled";
-export var SearchShortcut = /*#__PURE__*/styled("div", {
+
+var SearchShortcut = /*#__PURE__*/(0, _styled.default)("div", {
   target: "eh6vkyz0",
   label: "SearchShortcut"
 })({
@@ -20,14 +28,16 @@ export var SearchShortcut = /*#__PURE__*/styled("div", {
   cursor: "default",
   opacity: "0.8"
 });
-export var SearchBarWrapper = /*#__PURE__*/styled("div", {
+exports.SearchShortcut = SearchShortcut;
+var SearchBarWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "eh6vkyz1",
   label: "SearchBarWrapper"
 })({
   display: "flex",
   width: "100%"
 });
-export var SearchBarInputWrapper = /*#__PURE__*/styled("div", {
+exports.SearchBarWrapper = SearchBarWrapper;
+var SearchBarInputWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "eh6vkyz2",
   label: "SearchBarInputWrapper"
 })({
@@ -35,7 +45,8 @@ export var SearchBarInputWrapper = /*#__PURE__*/styled("div", {
   width: "100%",
   position: "relative"
 });
-export var searchBarInput = /*#__PURE__*/css({
+exports.SearchBarInputWrapper = SearchBarInputWrapper;
+var searchBarInput = /*#__PURE__*/(0, _emotion.css)({
   width: "100%",
   lineHeight: 1,
   border: "none",
@@ -56,7 +67,8 @@ export var searchBarInput = /*#__PURE__*/css({
     }
   }
 }, "label:searchBarInput;");
-export var searchBarDropdown = /*#__PURE__*/css({
+exports.searchBarInput = searchBarInput;
+var searchBarDropdown = /*#__PURE__*/(0, _emotion.css)({
   position: "absolute",
   background: "white",
   left: -1,
@@ -77,7 +89,8 @@ export var searchBarDropdown = /*#__PURE__*/css({
     }
   }
 }, "label:searchBarDropdown;");
-export var icon = /*#__PURE__*/css({
+exports.searchBarDropdown = searchBarDropdown;
+var icon = /*#__PURE__*/(0, _emotion.css)({
   "&.mdc-button__icon": {
     width: "auto !important",
     paddingRight: 5,
@@ -85,11 +98,13 @@ export var icon = /*#__PURE__*/css({
     marginTop: 2
   }
 }, "label:icon;");
-export var iconSearchType = /*#__PURE__*/css({
+exports.icon = icon;
+var iconSearchType = /*#__PURE__*/(0, _emotion.css)({
   cursor: "pointer",
   paddingLeft: 5
 }, "label:iconSearchType;");
-export var searchWrapper = /*#__PURE__*/css({
+exports.iconSearchType = iconSearchType;
+var searchWrapper = /*#__PURE__*/(0, _emotion.css)({
   backgroundColor: "rgba(0, 0, 0, 0.1)",
   display: "flex",
   padding: "10px 20px",
@@ -98,7 +113,7 @@ export var searchWrapper = /*#__PURE__*/css({
   transition: "background 100ms ease-in,width 100ms ease-out",
   color: "var(--mdc-theme-surface)",
   border: "1px solid transparent",
-  "&.active": _defineProperty({
+  "&.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)",
@@ -112,4 +127,5 @@ export var searchWrapper = /*#__PURE__*/css({
   input: {
     color: "var(--mdc-theme-surface)"
   }
-}, "label:searchWrapper;");
+}, "label:searchWrapper;");
+exports.searchWrapper = searchWrapper;

package/plugins/globalSearch/styled.js.map

@@ -0,0 +1 @@
+{"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/plugins/uiLayoutRenderer/index.d.ts

@@ -1,3 +1,2 @@
 import { UILayoutPlugin } from "../../ui/UILayout";
-declare const _default: UILayoutPlugin<import("@webiny/ui-composer/UILayout").UILayout>;
-export default _default;
+export declare const uiLayoutPlugin: UILayoutPlugin<import("@webiny/ui-composer/UILayout").UILayout>;

package/plugins/uiLayoutRenderer/index.js

@@ -1,63 +1,61 @@
-import React, { Fragment } from "react";
-import { Cell, Grid, GridInner } from "@webiny/ui/Grid";
-import { UILayoutPlugin } from "../../ui/UILayout";
-
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.uiLayoutPlugin = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Grid = require("@webiny/ui/Grid");
+var _UILayout = require("../../ui/UILayout");
 function getElementKey(element) {
   return "".concat(element.constructor.name, ":").concat(element.id);
 }
-
 var ElementID = function ElementID(_ref) {
   var children = _ref.children;
   return children;
 };
-
-export default new UILayoutPlugin(function (layout) {
+var uiLayoutPlugin = new _UILayout.UILayoutPlugin(function (layout) {
   layout.setRenderer(function (_ref2) {
     var layout = _ref2.layout,
-        props = _ref2.props,
-        hasParentGrid = _ref2.hasParentGrid;
-
+      props = _ref2.props,
+      hasParentGrid = _ref2.hasParentGrid;
     if (!layout.getGrid()) {
-      return /*#__PURE__*/React.createElement(Fragment, null, layout.getLayout().map(function (row, index) {
-        return /*#__PURE__*/React.createElement(Fragment, {
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, layout.getLayout().map(function (row, index) {
+        return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
           key: index
         }, row.map(function (item) {
           var element = layout.getElement(item.element);
-
           if (!element) {
             console.warn("Element \"".concat(item.element, "\" was not found!"));
             return null;
           }
-
           if (!element.shouldRender(props)) {
             return null;
           }
-
-          return /*#__PURE__*/React.createElement(ElementID, {
+          return /*#__PURE__*/_react.default.createElement(ElementID, {
             key: getElementKey(element)
           }, element.render(props));
         }));
       }));
     }
-
-    var GridComponent = hasParentGrid ? GridInner : Grid;
-    return /*#__PURE__*/React.createElement(GridComponent, null, layout.getLayout().map(function (row, index) {
-      return /*#__PURE__*/React.createElement(Fragment, {
+    var GridComponent = hasParentGrid ? _Grid.GridInner : _Grid.Grid;
+    return /*#__PURE__*/_react.default.createElement(GridComponent, null, layout.getLayout().map(function (row, index) {
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
         key: index
       }, row.map(function (item) {
         var element = layout.getElement(item.element);
-
         if (!element.shouldRender(props)) {
           return null;
         }
-
-        return /*#__PURE__*/React.createElement(Cell, {
+        return /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
           key: item.element,
           span: item.width
-        }, /*#__PURE__*/React.createElement(ElementID, {
+        }, /*#__PURE__*/_react.default.createElement(ElementID, {
           key: getElementKey(element)
         }, element.render(props)));
       }));
     }));
   });
-});
+});
+exports.uiLayoutPlugin = uiLayoutPlugin;

package/plugins/uiLayoutRenderer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getElementKey","element","constructor","name","id","ElementID","children","uiLayoutPlugin","UILayoutPlugin","layout","setRenderer","props","hasParentGrid","getGrid","getLayout","map","row","index","item","getElement","console","warn","shouldRender","render","GridComponent","GridInner","Grid","width"],"sources":["index.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport { Cell, Grid, GridInner } from \"@webiny/ui/Grid\";\nimport { UILayoutPlugin } from \"~/ui/UILayout\";\nimport { UIElement } from \"~/ui/UIElement\";\n\nfunction getElementKey(element: UIElement) {\n    return `${element.constructor.name}:${element.id}`;\n}\n\nconst ElementID: React.FC = ({ children }) => {\n    return children as unknown as React.ReactElement;\n};\n\nexport const uiLayoutPlugin = new UILayoutPlugin(layout => {\n    layout.setRenderer(({ layout, props, hasParentGrid }) => {\n        if (!layout.getGrid()) {\n            return (\n                <Fragment>\n                    {layout.getLayout().map((row, index) => (\n                        <Fragment key={index}>\n                            {row.map(item => {\n                                const element = layout.getElement(item.element);\n\n                                if (!element) {\n                                    console.warn(`Element \"${item.element}\" was not found!`);\n                                    return null;\n                                }\n\n                                if (!element.shouldRender(props)) {\n                                    return null;\n                                }\n\n                                return (\n                                    <ElementID key={getElementKey(element)}>\n                                        {element.render(props)}\n                                    </ElementID>\n                                );\n                            })}\n                        </Fragment>\n                    ))}\n                </Fragment>\n            );\n        }\n\n        const GridComponent = hasParentGrid ? GridInner : Grid;\n\n        return (\n            <GridComponent>\n                {layout.getLayout().map((row, index) => (\n                    <Fragment key={index}>\n                        {row.map(item => {\n                            const element = layout.getElement(item.element);\n                            if (!element.shouldRender(props)) {\n                                return null;\n                            }\n                            return (\n                                <Cell key={item.element} span={item.width}>\n                                    <ElementID key={getElementKey(element)}>\n                                        {element.render(props)}\n                                    </ElementID>\n                                </Cell>\n                            );\n                        })}\n                    </Fragment>\n                ))}\n            </GridComponent>\n        );\n    });\n});\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAGA,SAASA,aAAa,CAACC,OAAkB,EAAE;EACvC,iBAAUA,OAAO,CAACC,WAAW,CAACC,IAAI,cAAIF,OAAO,CAACG,EAAE;AACpD;AAEA,IAAMC,SAAmB,GAAG,SAAtBA,SAAmB,OAAqB;EAAA,IAAfC,QAAQ,QAARA,QAAQ;EACnC,OAAOA,QAAQ;AACnB,CAAC;AAEM,IAAMC,cAAc,GAAG,IAAIC,wBAAc,CAAC,UAAAC,MAAM,EAAI;EACvDA,MAAM,CAACC,WAAW,CAAC,iBAAsC;IAAA,IAAnCD,MAAM,SAANA,MAAM;MAAEE,KAAK,SAALA,KAAK;MAAEC,aAAa,SAAbA,aAAa;IAC9C,IAAI,CAACH,MAAM,CAACI,OAAO,EAAE,EAAE;MACnB,oBACI,6BAAC,eAAQ,QACJJ,MAAM,CAACK,SAAS,EAAE,CAACC,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK;QAAA,oBAC/B,6BAAC,eAAQ;UAAC,GAAG,EAAEA;QAAM,GAChBD,GAAG,CAACD,GAAG,CAAC,UAAAG,IAAI,EAAI;UACb,IAAMjB,OAAO,GAAGQ,MAAM,CAACU,UAAU,CAACD,IAAI,CAACjB,OAAO,CAAC;UAE/C,IAAI,CAACA,OAAO,EAAE;YACVmB,OAAO,CAACC,IAAI,qBAAaH,IAAI,CAACjB,OAAO,uBAAmB;YACxD,OAAO,IAAI;UACf;UAEA,IAAI,CAACA,OAAO,CAACqB,YAAY,CAACX,KAAK,CAAC,EAAE;YAC9B,OAAO,IAAI;UACf;UAEA,oBACI,6BAAC,SAAS;YAAC,GAAG,EAAEX,aAAa,CAACC,OAAO;UAAE,GAClCA,OAAO,CAACsB,MAAM,CAACZ,KAAK,CAAC,CACd;QAEpB,CAAC,CAAC,CACK;MAAA,CACd,CAAC,CACK;IAEnB;IAEA,IAAMa,aAAa,GAAGZ,aAAa,GAAGa,eAAS,GAAGC,UAAI;IAEtD,oBACI,6BAAC,aAAa,QACTjB,MAAM,CAACK,SAAS,EAAE,CAACC,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK;MAAA,oBAC/B,6BAAC,eAAQ;QAAC,GAAG,EAAEA;MAAM,GAChBD,GAAG,CAACD,GAAG,CAAC,UAAAG,IAAI,EAAI;QACb,IAAMjB,OAAO,GAAGQ,MAAM,CAACU,UAAU,CAACD,IAAI,CAACjB,OAAO,CAAC;QAC/C,IAAI,CAACA,OAAO,CAACqB,YAAY,CAACX,KAAK,CAAC,EAAE;UAC9B,OAAO,IAAI;QACf;QACA,oBACI,6BAAC,UAAI;UAAC,GAAG,EAAEO,IAAI,CAACjB,OAAQ;UAAC,IAAI,EAAEiB,IAAI,CAACS;QAAM,gBACtC,6BAAC,SAAS;UAAC,GAAG,EAAE3B,aAAa,CAACC,OAAO;QAAE,GAClCA,OAAO,CAACsB,MAAM,CAACZ,KAAK,CAAC,CACd,CACT;MAEf,CAAC,CAAC,CACK;IAAA,CACd,CAAC,CACU;EAExB,CAAC,CAAC;AACN,CAAC,CAAC;AAAC"}

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,21 +60,22 @@
 // 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
 .mdc-drawer {
+  z-index: 12;
   background-color: $mdc-theme-surface;
   &.mdc-drawer--modal.mdc-drawer--open {
     top: 0;
@@ -89,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;
@@ -138,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;
 }
@@ -153,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;
@@ -194,7 +195,7 @@ Fix the width of input components when inside grids
   margin-left: 2px !important;
   color: $mdc-theme-text-secondary-on-background;
   &--error {
-    color: $webiny-theme-dark-primary !important;
+    color: $mdc-theme-primary !important;
   }
 }
 
@@ -221,6 +222,7 @@ Fix the width of input components when inside grids
       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
@@ -229,19 +231,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;
           }
         }
@@ -250,6 +252,9 @@ Fix the width of input components when inside grids
           padding-bottom: 25px;
         }
       }
+      > .mdc-layout-grid {
+        margin: -24px;
+      }
     }
     .mdc-dialog__actions {
       border-top: 1px solid $mdc-theme-on-background;
@@ -266,13 +271,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.
@@ -289,28 +294,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;
@@ -13,6 +13,7 @@ $mdc-theme-text-primary-on-background: $webiny-theme-light-text-primary-on-backg
 $mdc-theme-text-secondary-on-background: $webiny-theme-light-text-secondary-on-background;
 $mdc-theme-text-hint-on-dark: $webiny-theme-light-text-hint-on-dark;
 $mdc-typography-font-family: $webiny-theme-typography-font-family;
+$mdc-typography-subtitle2-font-weight: $webiny-theme-typography-subtitle2-font-weight;
 
 @import "~material-components-web/material-components-web.scss";
 @import "material-theme-assignments.scss";
@@ -34,41 +35,9 @@ 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};
+  --mdc-typography-subtitle2-font-weight: #{$mdc-typography-subtitle2-font-weight};
 
   font-family: "Source Sans Pro";
 }
 
-body.dark-theme {
-  $mdc-theme-primary: $webiny-theme-dark-primary;
-  $mdc-theme-on-primary: $webiny-theme-dark-on-primary;
-  $mdc-theme-secondary: $webiny-theme-dark-secondary;
-  $mdc-theme-on-secondary: $webiny-theme-dark-on-secondary;
-  $mdc-theme-surface: $webiny-theme-dark-surface;
-  $mdc-theme-on-surface: $webiny-theme-dark-on-surface;
-  $mdc-theme-background: $webiny-theme-dark-background;
-  $mdc-theme-on-background: $webiny-theme-dark-on-background;
-  $mdc-theme-text-secondary-on-background: $webiny-theme-dark-text-secondary-on-background;
-  $mdc-theme-text-primary-on-background: $webiny-theme-dark-text-primary-on-background;
-  $mdc-theme-text-hint-on-dark: $webiny-theme-dark-text-hint-on-dark;
-
-  @include themeMixins.mdc-theme-prop("on-primary", $webiny-theme-dark-text-primary-on-background);
-
-  background-color: $mdc-theme-background;
-
-  // assign all the sass variables in css variables
-  --mdc-theme-primary: #{$mdc-theme-primary};
-  --mdc-theme-secondary: #{$mdc-theme-secondary};
-  --mdc-theme-background: #{$mdc-theme-background};
-  --mdc-theme-surface: #{$mdc-theme-surface};
-  --mdc-theme-on-primary: #{$mdc-theme-on-primary};
-  --mdc-theme-on-secondary: #{$mdc-theme-on-secondary};
-  --mdc-theme-on-surface: #{$mdc-theme-on-surface};
-  --mdc-theme-on-background: #{$mdc-theme-on-background};
-  --mdc-theme-text-primary-on-background: #{$mdc-theme-text-primary-on-background};
-  --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-dark-caret-down};
-
-  @import "~@material/textfield/mdc-text-field";
-  @import "material-theme-assignments.scss";
-}