@salutejs/plasma-new-hope 0.343.0-canary.2365.19818549048.0 → 0.343.0-canary.2367.19924445223.0

package/es/utils/createConditionalComponent.js

@@ -1,9 +1,9 @@
-import { createForOfIteratorHelper as _createForOfIteratorHelper } from '../_virtual/_rollupPluginBabelHelpers.js';
-import React from 'react';
+import { createForOfIteratorHelper as _createForOfIteratorHelper, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React, { forwardRef } from 'react';
 
 // TODO: Поправить типы, если внутри услвовия типы не совпадают
 function createConditionalComponent(defaultComponent, mappings) {
-  return function (props) {
+  return /*#__PURE__*/forwardRef(function (props, ref) {
     var _iterator = _createForOfIteratorHelper(mappings),
       _step;
     try {
@@ -19,7 +19,9 @@ function createConditionalComponent(defaultComponent, mappings) {
         });
         if (allConditionsMatch) {
           var Component = component;
-          return /*#__PURE__*/React.createElement(Component, props);
+          return /*#__PURE__*/React.createElement(Component, _extends({
+            ref: ref
+          }, props));
         }
       }
     } catch (err) {
@@ -28,8 +30,10 @@ function createConditionalComponent(defaultComponent, mappings) {
       _iterator.f();
     }
     var DefaultComponent = defaultComponent;
-    return /*#__PURE__*/React.createElement(DefaultComponent, props);
-  };
+    return /*#__PURE__*/React.createElement(DefaultComponent, _extends({
+      ref: ref
+    }, props));
+  });
 }
 
 export { createConditionalComponent };

package/es/utils/createConditionalComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"createConditionalComponent.js","sources":["../../src/utils/createConditionalComponent.tsx"],"sourcesContent":["import React from 'react';\n\ntype PropCondition<T> = {\n    prop: keyof T;\n    value: any;\n};\n\ntype ComponentMapping<T> = {\n    conditions: PropCondition<T> | PropCondition<T>[];\n    component: React.ComponentType<T>;\n};\n\n// TODO: Поправить типы, если внутри услвовия типы не совпадают\nexport function createConditionalComponent<T extends object>(\n    defaultComponent: React.ComponentType<T>,\n    mappings: ComponentMapping<T>[],\n): React.FC<T> {\n    return (props: T) => {\n        for (const mapping of mappings) {\n            const { conditions, component } = mapping;\n\n            const conditionsArray = Array.isArray(conditions) ? conditions : [conditions];\n\n            const allConditionsMatch = conditionsArray.every(({ prop, value }) => props[prop] === value);\n\n            if (allConditionsMatch) {\n                const Component = component;\n                return <Component {...props} />;\n            }\n        }\n\n        const DefaultComponent = defaultComponent;\n        return <DefaultComponent {...props} />;\n    };\n}\n"],"names":["createConditionalComponent","defaultComponent","mappings","props","_iterator","_createForOfIteratorHelper","_step","s","n","done","mapping","value","conditions","component","conditionsArray","Array","isArray","allConditionsMatch","every","_ref","prop","Component","React","createElement","err","e","f","DefaultComponent"],"mappings":";;;AAYA;AACO,SAASA,0BAA0BA,CACtCC,gBAAwC,EACxCC,QAA+B,EACpB;EACX,OAAO,UAACC,KAAQ,EAAK;AAAA,IAAA,IAAAC,SAAA,GAAAC,0BAAA,CACKH,QAAQ,CAAA;MAAAI,KAAA,CAAA;AAAA,IAAA,IAAA;MAA9B,KAAAF,SAAA,CAAAG,CAAA,EAAAD,EAAAA,CAAAA,CAAAA,KAAA,GAAAF,SAAA,CAAAI,CAAA,EAAAC,EAAAA,IAAA,GAAgC;AAAA,QAAA,IAArBC,OAAO,GAAAJ,KAAA,CAAAK,KAAA,CAAA;AACd,QAAA,IAAQC,UAAU,GAAgBF,OAAO,CAAjCE,UAAU;UAAEC,SAAS,GAAKH,OAAO,CAArBG,SAAS,CAAA;AAE7B,QAAA,IAAMC,eAAe,GAAGC,KAAK,CAACC,OAAO,CAACJ,UAAU,CAAC,GAAGA,UAAU,GAAG,CAACA,UAAU,CAAC,CAAA;AAE7E,QAAA,IAAMK,kBAAkB,GAAGH,eAAe,CAACI,KAAK,CAAC,UAAAC,IAAA,EAAA;AAAA,UAAA,IAAGC,IAAI,GAAAD,IAAA,CAAJC,IAAI;YAAET,KAAK,GAAAQ,IAAA,CAALR,KAAK,CAAA;AAAA,UAAA,OAAOR,KAAK,CAACiB,IAAI,CAAC,KAAKT,KAAK,CAAA;SAAC,CAAA,CAAA;AAE5F,QAAA,IAAIM,kBAAkB,EAAE;UACpB,IAAMI,SAAS,GAAGR,SAAS,CAAA;AAC3B,UAAA,oBAAOS,KAAA,CAAAC,aAAA,CAACF,SAAS,EAAKlB,KAAQ,CAAC,CAAA;AACnC,SAAA;AACJ,OAAA;AAAC,KAAA,CAAA,OAAAqB,GAAA,EAAA;MAAApB,SAAA,CAAAqB,CAAA,CAAAD,GAAA,CAAA,CAAA;AAAA,KAAA,SAAA;AAAApB,MAAAA,SAAA,CAAAsB,CAAA,EAAA,CAAA;AAAA,KAAA;IAED,IAAMC,gBAAgB,GAAG1B,gBAAgB,CAAA;AACzC,IAAA,oBAAOqB,KAAA,CAAAC,aAAA,CAACI,gBAAgB,EAAKxB,KAAQ,CAAC,CAAA;GACzC,CAAA;AACL;;;;"}
+{"version":3,"file":"createConditionalComponent.js","sources":["../../src/utils/createConditionalComponent.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\ntype PropCondition<T> = {\n    prop: keyof T;\n    value: any;\n};\n\ntype ComponentMapping<T> = {\n    conditions: PropCondition<T> | PropCondition<T>[];\n    component: React.ComponentType<T>;\n};\n\n// TODO: Поправить типы, если внутри услвовия типы не совпадают\nexport function createConditionalComponent<T extends object, K extends HTMLElement>(\n    defaultComponent: React.ComponentType<T>,\n    mappings: ComponentMapping<T>[],\n) {\n    return forwardRef<K, T>((props: T, ref) => {\n        for (const mapping of mappings) {\n            const { conditions, component } = mapping;\n\n            const conditionsArray = Array.isArray(conditions) ? conditions : [conditions];\n\n            const allConditionsMatch = conditionsArray.every(({ prop, value }) => props[prop] === value);\n\n            if (allConditionsMatch) {\n                const Component = component;\n                return <Component ref={ref} {...props} />;\n            }\n        }\n\n        const DefaultComponent = defaultComponent;\n        return <DefaultComponent ref={ref} {...props} />;\n    });\n}\n"],"names":["createConditionalComponent","defaultComponent","mappings","forwardRef","props","ref","_iterator","_createForOfIteratorHelper","_step","s","n","done","mapping","value","conditions","component","conditionsArray","Array","isArray","allConditionsMatch","every","_ref","prop","Component","React","createElement","_extends","err","e","f","DefaultComponent"],"mappings":";;;AAYA;AACO,SAASA,0BAA0BA,CACtCC,gBAAwC,EACxCC,QAA+B,EACjC;AACE,EAAA,oBAAOC,UAAU,CAAO,UAACC,KAAQ,EAAEC,GAAG,EAAK;AAAA,IAAA,IAAAC,SAAA,GAAAC,0BAAA,CACjBL,QAAQ,CAAA;MAAAM,KAAA,CAAA;AAAA,IAAA,IAAA;MAA9B,KAAAF,SAAA,CAAAG,CAAA,EAAAD,EAAAA,CAAAA,CAAAA,KAAA,GAAAF,SAAA,CAAAI,CAAA,EAAAC,EAAAA,IAAA,GAAgC;AAAA,QAAA,IAArBC,OAAO,GAAAJ,KAAA,CAAAK,KAAA,CAAA;AACd,QAAA,IAAQC,UAAU,GAAgBF,OAAO,CAAjCE,UAAU;UAAEC,SAAS,GAAKH,OAAO,CAArBG,SAAS,CAAA;AAE7B,QAAA,IAAMC,eAAe,GAAGC,KAAK,CAACC,OAAO,CAACJ,UAAU,CAAC,GAAGA,UAAU,GAAG,CAACA,UAAU,CAAC,CAAA;AAE7E,QAAA,IAAMK,kBAAkB,GAAGH,eAAe,CAACI,KAAK,CAAC,UAAAC,IAAA,EAAA;AAAA,UAAA,IAAGC,IAAI,GAAAD,IAAA,CAAJC,IAAI;YAAET,KAAK,GAAAQ,IAAA,CAALR,KAAK,CAAA;AAAA,UAAA,OAAOT,KAAK,CAACkB,IAAI,CAAC,KAAKT,KAAK,CAAA;SAAC,CAAA,CAAA;AAE5F,QAAA,IAAIM,kBAAkB,EAAE;UACpB,IAAMI,SAAS,GAAGR,SAAS,CAAA;AAC3B,UAAA,oBAAOS,KAAA,CAAAC,aAAA,CAACF,SAAS,EAAAG,QAAA,CAAA;AAACrB,YAAAA,GAAG,EAAEA,GAAAA;WAASD,EAAAA,KAAK,CAAG,CAAC,CAAA;AAC7C,SAAA;AACJ,OAAA;AAAC,KAAA,CAAA,OAAAuB,GAAA,EAAA;MAAArB,SAAA,CAAAsB,CAAA,CAAAD,GAAA,CAAA,CAAA;AAAA,KAAA,SAAA;AAAArB,MAAAA,SAAA,CAAAuB,CAAA,EAAA,CAAA;AAAA,KAAA;IAED,IAAMC,gBAAgB,GAAG7B,gBAAgB,CAAA;AACzC,IAAA,oBAAOuB,KAAA,CAAAC,aAAA,CAACK,gBAAgB,EAAAJ,QAAA,CAAA;AAACrB,MAAAA,GAAG,EAAEA,GAAAA;KAASD,EAAAA,KAAK,CAAG,CAAC,CAAA;AACpD,GAAC,CAAC,CAAA;AACN;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.343.0-canary.2365.19818549048.0",
+  "version": "0.343.0-canary.2367.19924445223.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -75,18 +75,12 @@
     "@emotion/styled": "11.11.5",
     "@ironkinoko/rollup-plugin-styles": "^4.0.3",
     "@linaria/rollup": "5.0.4",
-    "@linaria/vite": "5.0.4",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-node-resolve": "^15.1.0",
-    "@salutejs/plasma-sb-utils": "0.210.0",
+    "@salutejs/plasma-cy-utils": "0.141.0-canary.2367.19924445223.0",
+    "@salutejs/plasma-sb-utils": "0.211.0-canary.2367.19924445223.0",
     "@salutejs/plasma-themes": "0.38.0",
-    "@storybook/addon-docs": "8.6.12",
-    "@storybook/addon-essentials": "8.6.12",
-    "@storybook/manager-api": "8.6.12",
-    "@storybook/react": "8.6.12",
-    "@storybook/react-vite": "8.6.12",
-    "@storybook/theming": "8.6.12",
     "@types/lodash": "^4.14.191",
     "@types/lodash.chunk": "4.2.9",
     "@types/lodash.throttle": "4.1.6",
@@ -94,7 +88,6 @@
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "@types/styled-components": "5.1.0",
-    "@vitejs/plugin-react": "^3.1.0",
     "babel-loader": "8.2.2",
     "babel-plugin-annotate-pure-calls": "0.4.0",
     "babel-plugin-module-resolver": "5.0.2",
@@ -104,10 +97,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rollup": "^3.28.0",
-    "storybook": "8.6.12",
     "styled-components": "5.3.1",
-    "tsc-alias": "1.8.16",
-    "vite": "4.5.3"
+    "tsc-alias": "1.8.16"
   },
   "dependencies": {
     "@floating-ui/dom": "1.7.4",
@@ -117,7 +108,7 @@
     "@linaria/react": "5.0.3",
     "@popperjs/core": "2.11.8",
     "@salutejs/input-core": "2.1.2",
-    "@salutejs/plasma-core": "1.210.0",
+    "@salutejs/plasma-core": "1.211.0-canary.2367.19924445223.0",
     "@salutejs/react-maskinput": "3.3.2",
     "@tanstack/react-table": "8.21.2",
     "@tanstack/react-virtual": "3.13.2",
@@ -137,5 +128,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "e9135d29abe9b653212c8150fe835631f539e7d1"
+  "gitHead": "59d77dc938caa09606780731ff5400bb01a3f69a"
 }

package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.js

@@ -206,7 +206,7 @@ function _unsupported_iterable_to_array(o, minLen) {
 var comboboxRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
         var _getItemByFocused;
-        var name = props.name, multiple = props.multiple, outerValue = props.value, outerOnChange = props.onChange, defaultValue = props.defaultValue, isTargetAmount = props.isTargetAmount, targetAmount = props.targetAmount, items = props.items, _props_treeView = props.treeView, treeView = _props_treeView === void 0 ? false : _props_treeView, _props_arrowPlacement = props.arrowPlacement, arrowPlacement = _props_arrowPlacement === void 0 ? 'left' : _props_arrowPlacement, _props_placement = props.placement, placement = _props_placement === void 0 ? 'bottom-start' : _props_placement, label = props.label, placeholder = props.placeholder, helperText = props.helperText, contentLeft = props.contentLeft, textBefore = props.textBefore, textAfter = props.textAfter, _props_variant = props.variant, variant = _props_variant === void 0 ? 'normal' : _props_variant, listOverflow = props.listOverflow, listHeight = props.listHeight, listMaxHeight = props.listMaxHeight, listWidth = props.listWidth, portal = props.portal, renderItem = props.renderItem, view = props.view, size = props.size, labelPlacement = props.labelPlacement, keepPlaceholder = props.keepPlaceholder, _props_readOnly = props.readOnly, readOnly = _props_readOnly === void 0 ? false : _props_readOnly, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_alwaysOpened = props.alwaysOpened, alwaysOpened = _props_alwaysOpened === void 0 ? false : _props_alwaysOpened, filter = props.filter, outerCloseAfterSelect = props.closeAfterSelect, renderValue = props.renderValue, zIndex = props.zIndex, beforeList = props.beforeList, afterList = props.afterList, _props_virtual = props.virtual, virtual = _props_virtual === void 0 ? false : _props_virtual, hintView = props.hintView, hintSize = props.hintSize, emptyStateDescription = props.emptyStateDescription, onChangeValue = props.onChangeValue, onScroll = props.onScroll, onToggle = props.onToggle, _props_mode = props.mode, mode = _props_mode === void 0 ? 'default' : _props_mode, _props_chipClickArea = props.chipClickArea, chipClickArea = _props_chipClickArea === void 0 ? 'full' : _props_chipClickArea, // @ts-ignore
+        var name = props.name, multiple = props.multiple, outerValue = props.value, outerOnChange = props.onChange, defaultValue = props.defaultValue, isTargetAmount = props.isTargetAmount, targetAmount = props.targetAmount, items = props.items, _props_treeView = props.treeView, treeView = _props_treeView === void 0 ? false : _props_treeView, _props_arrowPlacement = props.arrowPlacement, arrowPlacement = _props_arrowPlacement === void 0 ? 'left' : _props_arrowPlacement, _props_placement = props.placement, placement = _props_placement === void 0 ? 'bottom-start' : _props_placement, label = props.label, placeholder = props.placeholder, helperText = props.helperText, contentLeft = props.contentLeft, textBefore = props.textBefore, textAfter = props.textAfter, _props_variant = props.variant, variant = _props_variant === void 0 ? 'normal' : _props_variant, listOverflow = props.listOverflow, listHeight = props.listHeight, listMaxHeight = props.listMaxHeight, listWidth = props.listWidth, portal = props.portal, renderItem = props.renderItem, view = props.view, size = props.size, labelPlacement = props.labelPlacement, keepPlaceholder = props.keepPlaceholder, _props_readOnly = props.readOnly, readOnly = _props_readOnly === void 0 ? false : _props_readOnly, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_alwaysOpened = props.alwaysOpened, alwaysOpened = _props_alwaysOpened === void 0 ? false : _props_alwaysOpened, filter = props.filter, outerCloseAfterSelect = props.closeAfterSelect, renderValue = props.renderValue, zIndex = props.zIndex, beforeList = props.beforeList, afterList = props.afterList, _props_virtual = props.virtual, virtual = _props_virtual === void 0 ? false : _props_virtual, hintView = props.hintView, hintSize = props.hintSize, emptyStateDescription = props.emptyStateDescription, onChangeValue = props.onChangeValue, filterValue = props.filterValue, onScroll = props.onScroll, onToggle = props.onToggle, _props_mode = props.mode, mode = _props_mode === void 0 ? 'default' : _props_mode, _props_chipClickArea = props.chipClickArea, chipClickArea = _props_chipClickArea === void 0 ? 'full' : _props_chipClickArea, // @ts-ignore
         _offset = props._offset, rest = _object_without_properties(props, [
             "name",
             "multiple",
@@ -250,6 +250,7 @@ var comboboxRoot = function(Root) {
             "hintSize",
             "emptyStateDescription",
             "onChangeValue",
+            "filterValue",
             "onScroll",
             "onToggle",
             "mode",
@@ -346,16 +347,15 @@ var comboboxRoot = function(Root) {
         };
         // Обработчик изменения значения в инпуте
         var handleTextValueChange = function(e) {
-            setTextValue(e.target.value);
+            if (!filterValue || filterValue(e.target.value)) {
+                setTextValue(e.target.value);
+            }
             dispatchPath({
                 type: 'opened_first_level'
             });
             dispatchFocusedPath({
                 type: 'reset'
             });
-            if (onChangeValue) {
-                onChangeValue(e.target.value);
-            }
         };
         // Обработчик чипов
         var handleChipClick = function(chip) {
@@ -712,6 +712,7 @@ var comboboxRoot = function(Root) {
                     contentLeft: contentLeft,
                     contentRight: /*#__PURE__*/ _react.default.createElement(_Comboboxstyles.IconArrowWrapper, {
                         disabled: disabled,
+                        readOnly: readOnly,
                         onClick: handleClickArrow,
                         className: _Comboboxtokens.classes.comboboxTargetArrow
                     }, /*#__PURE__*/ _react.default.createElement(_Comboboxstyles.StyledArrow, {
@@ -752,11 +753,7 @@ var comboboxRoot = function(Root) {
             disabled: disabled,
             readOnly: readOnly,
             name: name
-        }, (0, _utils.isEmpty)(filteredItems) ? /*#__PURE__*/ _react.default.createElement(_Comboboxstyles.StyledEmptyState, {
-            className: _Comboboxtokens.classes.emptyStateWrapper,
-            size: size,
-            description: emptyStateDescription || 'Ничего не найдено'
-        }) : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, treeView ? /*#__PURE__*/ _react.default.createElement(_ui.TreeList, {
+        }, treeView ? /*#__PURE__*/ _react.default.createElement(_ui.TreeList, {
             items: filteredItems,
             listMaxHeight: listMaxHeight || listHeight,
             onScroll: virtual ? undefined : onScroll,
@@ -777,7 +774,11 @@ var comboboxRoot = function(Root) {
         /*#__PURE__*/ _react.default.createElement(_ui.SelectAll, {
             selectAllOptions: props.selectAllOptions,
             variant: variant
-        }), virtual ? /*#__PURE__*/ _react.default.createElement(_ui.VirtualList, {
+        }), (0, _utils.isEmpty)(filteredItems) ? /*#__PURE__*/ _react.default.createElement(_Comboboxstyles.StyledEmptyState, {
+            className: _Comboboxtokens.classes.emptyStateWrapper,
+            size: size,
+            description: emptyStateDescription || 'Ничего не найдено'
+        }) : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, virtual ? /*#__PURE__*/ _react.default.createElement(_ui.VirtualList, {
             items: filteredItems,
             listMaxHeight: listMaxHeight || listHeight,
             onScroll: onScroll
@@ -792,7 +793,7 @@ var comboboxRoot = function(Root) {
                 listWidth: listWidth,
                 portal: listWrapperRef
             });
-        }), afterList))))))));
+        })), afterList)))))));
     });
 };
 var comboboxConfig = {

package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.styles.js

@@ -84,7 +84,7 @@ var mergedConfig = (0, _engines.mergeConfig)(_EmptyState.emptyStateConfig);
 var EmptyState = (0, _engines.component)(mergedConfig);
 var ListWrapper = _styledcomponents.default.div.withConfig({
     displayName: "Combobox.styles__ListWrapper",
-    componentId: "sc-21c5f0bf-0"
+    componentId: "sc-48cd29fe-0"
 })([
     "width:",
     ";padding:calc(var(",
@@ -101,7 +101,7 @@ var ListWrapper = _styledcomponents.default.div.withConfig({
 }, _Comboboxtokens.tokens.padding, _Comboboxtokens.tokens.dropdownBorderWidth, _Comboboxtokens.tokens.borderRadius, _Comboboxtokens.constants.background, _Comboboxtokens.constants.boxShadow, _Comboboxtokens.tokens.dropdownBorderWidth, _Comboboxtokens.tokens.dropdownBorderColor);
 var Ul = _styledcomponents.default.ul.withConfig({
     displayName: "Combobox.styles__Ul",
-    componentId: "sc-21c5f0bf-1"
+    componentId: "sc-48cd29fe-1"
 })([
     "max-height:",
     ";overflow-x:hidden;overflow-y:",
@@ -118,7 +118,7 @@ var Ul = _styledcomponents.default.ul.withConfig({
 }, _Comboboxtokens.tokens.borderRadius, _Comboboxtokens.tokens.dropdownBorderWidth, _Comboboxtokens.classes.emptyStateWrapper);
 var IconArrowWrapper = _styledcomponents.default.div.withConfig({
     displayName: "Combobox.styles__IconArrowWrapper",
-    componentId: "sc-21c5f0bf-2"
+    componentId: "sc-48cd29fe-2"
 })([
     "line-height:0;color:var(",
     ");cursor:",
@@ -126,11 +126,11 @@ var IconArrowWrapper = _styledcomponents.default.div.withConfig({
     "{transform:rotate(-180deg);}&:hover,&:active{color:",
     ";}"
 ], _Comboboxtokens.tokens.disclosureIconColor, function(param) {
-    var disabled = param.disabled;
-    return disabled ? 'inherit' : 'pointer';
+    var disabled = param.disabled, readOnly = param.readOnly;
+    return disabled || readOnly ? 'inherit' : 'pointer';
 }, _Comboboxtokens.classes.arrowInverse, function(param) {
-    var disabled = param.disabled;
-    return disabled ? "var(".concat(_Comboboxtokens.tokens.disclosureIconColor, ")") : "var(".concat(_Comboboxtokens.tokens.disclosureIconColorHover, ")");
+    var disabled = param.disabled, readOnly = param.readOnly;
+    return disabled || readOnly ? "var(".concat(_Comboboxtokens.tokens.disclosureIconColor, ")") : "var(".concat(_Comboboxtokens.tokens.disclosureIconColorHover, ")");
 });
 var sizeMap = {
     xs: '1rem',
@@ -138,7 +138,7 @@ var sizeMap = {
 };
 var StyledArrow = (0, _styledcomponents.default)(_Icon.IconDisclosureDownCentered).withConfig({
     displayName: "Combobox.styles__StyledArrow",
-    componentId: "sc-21c5f0bf-3"
+    componentId: "sc-48cd29fe-3"
 })([
     "width:",
     ";height:",
@@ -155,7 +155,7 @@ var base = (0, _styledcomponents.css)([
 ]);
 var StyledEmptyState = (0, _styledcomponents.default)(EmptyState).withConfig({
     displayName: "Combobox.styles__StyledEmptyState",
-    componentId: "sc-21c5f0bf-4"
+    componentId: "sc-48cd29fe-4"
 })([
     "",
     ":var(",
@@ -177,7 +177,7 @@ var StyledEmptyState = (0, _styledcomponents.default)(EmptyState).withConfig({
 ], _EmptyState.emptyStateTokens.borderRadius, _Comboboxtokens.tokens.textFieldBorderRadius, _EmptyState.emptyStateTokens.padding, _Comboboxtokens.tokens.emptyStatePadding, _EmptyState.emptyStateTokens.fontFamily, _Comboboxtokens.tokens.textFieldFontFamily, _EmptyState.emptyStateTokens.fontSize, _Comboboxtokens.tokens.textFieldFontSize, _EmptyState.emptyStateTokens.fontStyle, _Comboboxtokens.tokens.textFieldFontStyle, _EmptyState.emptyStateTokens.fontWeight, _Comboboxtokens.tokens.textFieldFontWeight, _EmptyState.emptyStateTokens.fontLetterSpacing, _Comboboxtokens.tokens.textFieldLetterSpacing, _EmptyState.emptyStateTokens.fontLineHeight, _Comboboxtokens.tokens.textFieldLineHeight);
 var StyledLeftHelper = _styledcomponents.default.span.withConfig({
     displayName: "Combobox.styles__StyledLeftHelper",
-    componentId: "sc-21c5f0bf-5"
+    componentId: "sc-48cd29fe-5"
 })([
     "margin:0;padding:0;"
 ]);

package/styled-components/cjs/components/DateTimePicker/ui/Input/Input.styles.js

@@ -21,7 +21,7 @@ var mergedTextFieldConfig = (0, _engines.mergeConfig)(_TextField.textFieldConfig
 var TextField = (0, _engines.component)(mergedTextFieldConfig);
 var StyledInput = (0, _styledcomponents.default)(TextField).withConfig({
     displayName: "Input.styles__StyledInput",
-    componentId: "sc-566fa015-0"
+    componentId: "sc-ccd65eda-0"
 })([
     "width:100%;",
     ":var(",
@@ -146,6 +146,12 @@ var StyledInput = (0, _styledcomponents.default)(TextField).withConfig({
     ",var(",
     "));",
     ":var(",
+    ",var(",
+    "));",
+    ":var(",
+    ",var(",
+    "));",
+    ":var(",
     ");&.",
     "{",
     ":var(",
@@ -173,4 +179,4 @@ var StyledInput = (0, _styledcomponents.default)(TextField).withConfig({
     ");",
     ":var(",
     ");}"
-], _TextField.textFieldTokens.color, _DateTimePickertokens.tokens.textFieldColor, _TextField.textFieldTokens.placeholderColor, _DateTimePickertokens.tokens.textFieldPlaceholderColor, _TextField.textFieldTokens.placeholderColorFocus, _DateTimePickertokens.tokens.textFieldPlaceholderColorFocus, _TextField.textFieldTokens.caretColor, _DateTimePickertokens.tokens.textFieldCaretColor, _TextField.textFieldTokens.focusColor, _DateTimePickertokens.tokens.textFieldFocusColor, _TextField.textFieldTokens.backgroundColor, _DateTimePickertokens.tokens.textFieldBackgroundColor, _TextField.textFieldTokens.backgroundColorHover, _DateTimePickertokens.tokens.textFieldBackgroundColorHover, _TextField.textFieldTokens.backgroundColorFocus, _DateTimePickertokens.tokens.textFieldBackgroundColorFocus, _TextField.textFieldTokens.borderWidth, _DateTimePickertokens.tokens.textFieldBorderWidth, _TextField.textFieldTokens.borderRadius, _DateTimePickertokens.tokens.textFieldBorderRadius, _TextField.textFieldTokens.borderColor, _DateTimePickertokens.tokens.textFieldBorderColor, _TextField.textFieldTokens.borderColorHover, _DateTimePickertokens.tokens.textFieldBorderColorHover, _TextField.textFieldTokens.borderColorFocus, _DateTimePickertokens.tokens.textFieldBorderColorFocus, _TextField.textFieldTokens.colorReadOnly, _DateTimePickertokens.tokens.textFieldColorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _DateTimePickertokens.tokens.textFieldBackgroundColorReadOnly, _TextField.textFieldTokens.readOnlyOpacity, _DateTimePickertokens.tokens.textFieldReadOnlyOpacity, _TextField.textFieldTokens.borderColorReadOnly, _DateTimePickertokens.tokens.textFieldBorderColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _DateTimePickertokens.tokens.textFieldPlaceholderColorReadOnly, _TextField.textFieldTokens.height, _DateTimePickertokens.tokens.textFieldHeight, _TextField.textFieldTokens.padding, _DateTimePickertokens.tokens.textFieldPadding, _TextField.textFieldTokens.labelInnerPadding, _DateTimePickertokens.tokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _DateTimePickertokens.tokens.contentLabelInnerPadding, _TextField.textFieldTokens.labelOffset, _DateTimePickertokens.tokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _DateTimePickertokens.tokens.labelFontFamily, _TextField.textFieldTokens.labelFontStyle, _DateTimePickertokens.tokens.labelFontStyle, _TextField.textFieldTokens.labelFontSize, _DateTimePickertokens.tokens.labelFontSize, _TextField.textFieldTokens.labelFontWeight, _DateTimePickertokens.tokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _DateTimePickertokens.tokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _DateTimePickertokens.tokens.labelLineHeight, _TextField.textFieldTokens.labelInnerFontFamily, _DateTimePickertokens.tokens.labelInnerFontFamily, _TextField.textFieldTokens.labelInnerFontSize, _DateTimePickertokens.tokens.labelInnerFontSize, _TextField.textFieldTokens.labelInnerFontStyle, _DateTimePickertokens.tokens.labelInnerFontStyle, _TextField.textFieldTokens.labelInnerFontWeight, _DateTimePickertokens.tokens.labelInnerFontWeight, _TextField.textFieldTokens.labelInnerLetterSpacing, _DateTimePickertokens.tokens.labelInnerLetterSpacing, _TextField.textFieldTokens.labelInnerLineHeight, _DateTimePickertokens.tokens.labelInnerLineHeight, _TextField.textFieldTokens.labelColorReadOnly, _DateTimePickertokens.tokens.labelColorReadOnly, _TextField.textFieldTokens.indicatorColor, _DateTimePickertokens.tokens.indicatorColor, _TextField.textFieldTokens.indicatorSizeInner, _DateTimePickertokens.tokens.indicatorSize, _TextField.textFieldTokens.indicatorSizeOuter, _DateTimePickertokens.tokens.indicatorSizeOuter, _TextField.textFieldTokens.indicatorLabelPlacementInner, _DateTimePickertokens.tokens.indicatorPlacement, _TextField.textFieldTokens.indicatorLabelPlacementOuter, _DateTimePickertokens.tokens.indicatorOuterPlacement, _TextField.textFieldTokens.indicatorLabelPlacementInnerRight, _DateTimePickertokens.tokens.indicatorPlacementRight, _TextField.textFieldTokens.indicatorLabelPlacementOuterRight, _DateTimePickertokens.tokens.indicatorOuterPlacementRight, _TextField.textFieldTokens.leftContentMargin, _DateTimePickertokens.tokens.textFieldLeftContentMargin, _TextField.textFieldTokens.rightContentMargin, _DateTimePickertokens.tokens.textFieldRightContentMargin, _TextField.textFieldTokens.fontFamily, _DateTimePickertokens.tokens.textFieldFontFamily, _TextField.textFieldTokens.fontSize, _DateTimePickertokens.tokens.textFieldFontSize, _TextField.textFieldTokens.fontStyle, _DateTimePickertokens.tokens.textFieldFontStyle, _TextField.textFieldTokens.fontWeight, _DateTimePickertokens.tokens.textFieldFontWeight, _TextField.textFieldTokens.letterSpacing, _DateTimePickertokens.tokens.textFieldLetterSpacing, _TextField.textFieldTokens.lineHeight, _DateTimePickertokens.tokens.textFieldLineHeight, _TextField.textFieldTokens.disabledOpacity, _DateTimePickertokens.tokens.disabledOpacity, _TextField.textFieldTokens.textBeforeColor, _DateTimePickertokens.tokens.textFieldTextBeforeColor, _TextField.textFieldTokens.textAfterColor, _DateTimePickertokens.tokens.textFieldTextAfterColor, _TextField.textFieldTokens.textBeforeMargin, _DateTimePickertokens.tokens.textFieldTextBeforeMargin, _TextField.textFieldTokens.textAfterMargin, _DateTimePickertokens.tokens.textFieldTextAfterMargin, _TextField.textFieldTokens.contentSlotColor, _DateTimePickertokens.tokens.textFieldContentSlotColor, _DateTimePickertokens.tokens.textFieldColor, _TextField.textFieldTokens.contentSlotRightColor, _DateTimePickertokens.tokens.textFieldContentRightSlotColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotRightColorHover, _DateTimePickertokens.tokens.textFieldContentRightSlotColorHover, _TextField.textFieldTokens.contentSlotRightColor, _TextField.textFieldTokens.contentSlotRightOpacityReadOnly, _DateTimePickertokens.tokens.textFieldContentSlotRightOpacityReadOnly, _DateTimePickertokens.classes.error, _TextField.textFieldTokens.backgroundColor, _DateTimePickertokens.tokens.textFieldBackgroundErrorColor, _TextField.textFieldTokens.backgroundColorHover, _DateTimePickertokens.tokens.textFieldBackgroundErrorColorHover, _TextField.textFieldTokens.backgroundColorFocus, _DateTimePickertokens.tokens.textFieldBackgroundErrorColorFocus, _TextField.textFieldTokens.borderColor, _DateTimePickertokens.tokens.textFieldBorderColorError, _TextField.textFieldTokens.borderColorHover, _DateTimePickertokens.tokens.textFieldBorderColorErrorHover, _TextField.textFieldTokens.borderColorFocus, _DateTimePickertokens.tokens.textFieldBorderColorErrorFocus, _DateTimePickertokens.classes.success, _TextField.textFieldTokens.backgroundColor, _DateTimePickertokens.tokens.textFieldBackgroundSuccessColor, _TextField.textFieldTokens.backgroundColorHover, _DateTimePickertokens.tokens.textFieldBackgroundSuccessColorHover, _TextField.textFieldTokens.backgroundColorFocus, _DateTimePickertokens.tokens.textFieldBackgroundSuccessColorFocus, _TextField.textFieldTokens.borderColor, _DateTimePickertokens.tokens.textFieldBorderColorSuccess, _TextField.textFieldTokens.borderColorHover, _DateTimePickertokens.tokens.textFieldBorderColorSuccessHover, _TextField.textFieldTokens.borderColorFocus, _DateTimePickertokens.tokens.textFieldBorderColorSuccessFocus);
+], _TextField.textFieldTokens.color, _DateTimePickertokens.tokens.textFieldColor, _TextField.textFieldTokens.placeholderColor, _DateTimePickertokens.tokens.textFieldPlaceholderColor, _TextField.textFieldTokens.placeholderColorFocus, _DateTimePickertokens.tokens.textFieldPlaceholderColorFocus, _TextField.textFieldTokens.caretColor, _DateTimePickertokens.tokens.textFieldCaretColor, _TextField.textFieldTokens.focusColor, _DateTimePickertokens.tokens.textFieldFocusColor, _TextField.textFieldTokens.backgroundColor, _DateTimePickertokens.tokens.textFieldBackgroundColor, _TextField.textFieldTokens.backgroundColorHover, _DateTimePickertokens.tokens.textFieldBackgroundColorHover, _TextField.textFieldTokens.backgroundColorFocus, _DateTimePickertokens.tokens.textFieldBackgroundColorFocus, _TextField.textFieldTokens.borderWidth, _DateTimePickertokens.tokens.textFieldBorderWidth, _TextField.textFieldTokens.borderRadius, _DateTimePickertokens.tokens.textFieldBorderRadius, _TextField.textFieldTokens.borderColor, _DateTimePickertokens.tokens.textFieldBorderColor, _TextField.textFieldTokens.borderColorHover, _DateTimePickertokens.tokens.textFieldBorderColorHover, _TextField.textFieldTokens.borderColorFocus, _DateTimePickertokens.tokens.textFieldBorderColorFocus, _TextField.textFieldTokens.colorReadOnly, _DateTimePickertokens.tokens.textFieldColorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _DateTimePickertokens.tokens.textFieldBackgroundColorReadOnly, _TextField.textFieldTokens.readOnlyOpacity, _DateTimePickertokens.tokens.textFieldReadOnlyOpacity, _TextField.textFieldTokens.borderColorReadOnly, _DateTimePickertokens.tokens.textFieldBorderColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _DateTimePickertokens.tokens.textFieldPlaceholderColorReadOnly, _TextField.textFieldTokens.height, _DateTimePickertokens.tokens.textFieldHeight, _TextField.textFieldTokens.padding, _DateTimePickertokens.tokens.textFieldPadding, _TextField.textFieldTokens.labelInnerPadding, _DateTimePickertokens.tokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _DateTimePickertokens.tokens.contentLabelInnerPadding, _TextField.textFieldTokens.labelOffset, _DateTimePickertokens.tokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _DateTimePickertokens.tokens.labelFontFamily, _TextField.textFieldTokens.labelFontStyle, _DateTimePickertokens.tokens.labelFontStyle, _TextField.textFieldTokens.labelFontSize, _DateTimePickertokens.tokens.labelFontSize, _TextField.textFieldTokens.labelFontWeight, _DateTimePickertokens.tokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _DateTimePickertokens.tokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _DateTimePickertokens.tokens.labelLineHeight, _TextField.textFieldTokens.labelInnerFontFamily, _DateTimePickertokens.tokens.labelInnerFontFamily, _TextField.textFieldTokens.labelInnerFontSize, _DateTimePickertokens.tokens.labelInnerFontSize, _TextField.textFieldTokens.labelInnerFontStyle, _DateTimePickertokens.tokens.labelInnerFontStyle, _TextField.textFieldTokens.labelInnerFontWeight, _DateTimePickertokens.tokens.labelInnerFontWeight, _TextField.textFieldTokens.labelInnerLetterSpacing, _DateTimePickertokens.tokens.labelInnerLetterSpacing, _TextField.textFieldTokens.labelInnerLineHeight, _DateTimePickertokens.tokens.labelInnerLineHeight, _TextField.textFieldTokens.labelColorReadOnly, _DateTimePickertokens.tokens.labelColorReadOnly, _TextField.textFieldTokens.indicatorColor, _DateTimePickertokens.tokens.indicatorColor, _TextField.textFieldTokens.indicatorSizeInner, _DateTimePickertokens.tokens.indicatorSize, _TextField.textFieldTokens.indicatorSizeOuter, _DateTimePickertokens.tokens.indicatorSizeOuter, _TextField.textFieldTokens.indicatorLabelPlacementInner, _DateTimePickertokens.tokens.indicatorPlacement, _TextField.textFieldTokens.indicatorLabelPlacementOuter, _DateTimePickertokens.tokens.indicatorOuterPlacement, _TextField.textFieldTokens.indicatorLabelPlacementInnerRight, _DateTimePickertokens.tokens.indicatorPlacementRight, _TextField.textFieldTokens.indicatorLabelPlacementOuterRight, _DateTimePickertokens.tokens.indicatorOuterPlacementRight, _TextField.textFieldTokens.leftContentMargin, _DateTimePickertokens.tokens.textFieldLeftContentMargin, _TextField.textFieldTokens.rightContentMargin, _DateTimePickertokens.tokens.textFieldRightContentMargin, _TextField.textFieldTokens.fontFamily, _DateTimePickertokens.tokens.textFieldFontFamily, _TextField.textFieldTokens.fontSize, _DateTimePickertokens.tokens.textFieldFontSize, _TextField.textFieldTokens.fontStyle, _DateTimePickertokens.tokens.textFieldFontStyle, _TextField.textFieldTokens.fontWeight, _DateTimePickertokens.tokens.textFieldFontWeight, _TextField.textFieldTokens.letterSpacing, _DateTimePickertokens.tokens.textFieldLetterSpacing, _TextField.textFieldTokens.lineHeight, _DateTimePickertokens.tokens.textFieldLineHeight, _TextField.textFieldTokens.disabledOpacity, _DateTimePickertokens.tokens.disabledOpacity, _TextField.textFieldTokens.textBeforeColor, _DateTimePickertokens.tokens.textFieldTextBeforeColor, _TextField.textFieldTokens.textAfterColor, _DateTimePickertokens.tokens.textFieldTextAfterColor, _TextField.textFieldTokens.textBeforeMargin, _DateTimePickertokens.tokens.textFieldTextBeforeMargin, _TextField.textFieldTokens.textAfterMargin, _DateTimePickertokens.tokens.textFieldTextAfterMargin, _TextField.textFieldTokens.contentSlotColor, _DateTimePickertokens.tokens.textFieldContentSlotColor, _DateTimePickertokens.tokens.textFieldColor, _TextField.textFieldTokens.contentSlotColorHover, _DateTimePickertokens.tokens.textFieldContentSlotColorHover, _DateTimePickertokens.tokens.textFieldColor, _TextField.textFieldTokens.contentSlotColorActive, _DateTimePickertokens.tokens.textFieldContentSlotColorActive, _DateTimePickertokens.tokens.textFieldColor, _TextField.textFieldTokens.contentSlotRightColor, _DateTimePickertokens.tokens.textFieldContentRightSlotColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotRightColorHover, _DateTimePickertokens.tokens.textFieldContentRightSlotColorHover, _TextField.textFieldTokens.contentSlotRightColor, _TextField.textFieldTokens.contentSlotRightOpacityReadOnly, _DateTimePickertokens.tokens.textFieldContentSlotRightOpacityReadOnly, _DateTimePickertokens.classes.error, _TextField.textFieldTokens.backgroundColor, _DateTimePickertokens.tokens.textFieldBackgroundErrorColor, _TextField.textFieldTokens.backgroundColorHover, _DateTimePickertokens.tokens.textFieldBackgroundErrorColorHover, _TextField.textFieldTokens.backgroundColorFocus, _DateTimePickertokens.tokens.textFieldBackgroundErrorColorFocus, _TextField.textFieldTokens.borderColor, _DateTimePickertokens.tokens.textFieldBorderColorError, _TextField.textFieldTokens.borderColorHover, _DateTimePickertokens.tokens.textFieldBorderColorErrorHover, _TextField.textFieldTokens.borderColorFocus, _DateTimePickertokens.tokens.textFieldBorderColorErrorFocus, _DateTimePickertokens.classes.success, _TextField.textFieldTokens.backgroundColor, _DateTimePickertokens.tokens.textFieldBackgroundSuccessColor, _TextField.textFieldTokens.backgroundColorHover, _DateTimePickertokens.tokens.textFieldBackgroundSuccessColorHover, _TextField.textFieldTokens.backgroundColorFocus, _DateTimePickertokens.tokens.textFieldBackgroundSuccessColorFocus, _TextField.textFieldTokens.borderColor, _DateTimePickertokens.tokens.textFieldBorderColorSuccess, _TextField.textFieldTokens.borderColorHover, _DateTimePickertokens.tokens.textFieldBorderColorSuccessHover, _TextField.textFieldTokens.borderColorFocus, _DateTimePickertokens.tokens.textFieldBorderColorSuccessFocus);

package/styled-components/cjs/components/Loader/Loader.js

@@ -17,9 +17,6 @@ _export(exports, {
     }
 });
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-var _engines = require("../../engines");
-var _Overlay = require("../Overlay");
-var _Popup = require("../Popup");
 var _utils = require("../Popup/utils");
 var _base = require("./variations/_view/base");
 var _base1 = require("./variations/_size/base");
@@ -121,7 +118,6 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-var Popup = (0, _engines.component)(_Popup.popupConfig);
 var loaderRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
         var _props_type = props.type, type = _props_type === void 0 ? 'spinner' : _props_type, _props_hasOverlay = props.hasOverlay, hasOverlay = _props_hasOverlay === void 0 ? false : _props_hasOverlay, _props_withBlur = props.withBlur, withBlur = _props_withBlur === void 0 ? false : _props_withBlur, _props_value = props.value, value = _props_value === void 0 ? 0 : _props_value, overlayColor = props.overlayColor, _props_maxValue = props.maxValue, maxValue = _props_maxValue === void 0 ? 100 : _props_maxValue, size = props.size, view = props.view, children = props.children, className = props.className, strokeSize = props.strokeSize, hasTrack = props.hasTrack, style = props.style, _props_zIndex = props.zIndex, zIndex = _props_zIndex === void 0 ? _utils.DEFAULT_Z_INDEX : _props_zIndex, onOverlayClick = props.onOverlayClick, rest = _object_without_properties(props, [
@@ -162,20 +158,14 @@ var loaderRoot = function(Root) {
             return loaderContent;
         }
         var overlayBackgroundToken = overlayColor || "var(".concat(_Loadertokens.tokens.overlayColor, ")");
-        var overlayNode = /*#__PURE__*/ _react.default.createElement(_Overlay.Overlay, {
+        return /*#__PURE__*/ _react.default.createElement(_Loaderstyles.LoaderWrapper, {
+            zIndex: zIndex
+        }, /*#__PURE__*/ _react.default.createElement(_Loaderstyles.StyledOverlay, {
             className: _Loadertokens.classes.loaderOverlay,
-            zIndex: zIndex || _utils.DEFAULT_Z_INDEX,
-            backgroundColorProperty: overlayBackgroundToken,
+            backgroundColorToken: overlayBackgroundToken,
             withBlur: withBlur,
-            isClickable: Boolean(onOverlayClick),
-            onOverlayClick: onOverlayClick
-        });
-        return /*#__PURE__*/ _react.default.createElement(Popup, {
-            opened: true,
-            placement: "center",
-            zIndex: zIndex,
-            overlay: overlayNode
-        }, loaderContent);
+            onClick: onOverlayClick
+        }), /*#__PURE__*/ _react.default.createElement(_Loaderstyles.LoaderContentWrapper, null, loaderContent));
     });
 };
 var loaderConfig = {

package/styled-components/cjs/components/Loader/Loader.styles.js

@@ -9,6 +9,15 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    get LoaderContentWrapper () {
+        return LoaderContentWrapper;
+    },
+    get LoaderWrapper () {
+        return LoaderWrapper;
+    },
+    get StyledOverlay () {
+        return StyledOverlay;
+    },
     get StyledProgressBarCircular () {
         return StyledProgressBarCircular;
     },
@@ -76,7 +85,7 @@ var base = (0, _styledcomponents.css)([
 ], _Loadertokens.tokens.width, _Loadertokens.tokens.height);
 var StyledSpinner = (0, _styledcomponents.default)(Spinner).withConfig({
     displayName: "Loader.styles__StyledSpinner",
-    componentId: "sc-beb70c73-0"
+    componentId: "sc-a9704424-0"
 })([
     "",
     ":var(",
@@ -86,7 +95,7 @@ var StyledSpinner = (0, _styledcomponents.default)(Spinner).withConfig({
 ], _Spinner.spinnerTokens.size, _Loadertokens.tokens.spinnerSize, _Spinner.spinnerTokens.color, _Loadertokens.tokens.spinnerColor);
 var StyledProgressBarCircular = (0, _styledcomponents.default)(ProgressBarCircular).withConfig({
     displayName: "Loader.styles__StyledProgressBarCircular",
-    componentId: "sc-beb70c73-1"
+    componentId: "sc-a9704424-1"
 })([
     "",
     ":var(",
@@ -118,3 +127,37 @@ var StyledProgressBarCircular = (0, _styledcomponents.default)(ProgressBarCircul
     ":var(",
     ");"
 ], _ProgressBarCircular.progressBarCircularTokens.size, _Loadertokens.tokens.progressBarCircularSize, _ProgressBarCircular.progressBarCircularTokens.width, _Loadertokens.tokens.progressBarCircularWidth, _ProgressBarCircular.progressBarCircularTokens.height, _Loadertokens.tokens.progressBarCircularHeight, _ProgressBarCircular.progressBarCircularTokens.strokeWidth, _Loadertokens.tokens.progressBarCircularStrokeWidth, _ProgressBarCircular.progressBarCircularTokens.strokeSize, _Loadertokens.tokens.progressBarCircularStrokeSize, _ProgressBarCircular.progressBarCircularTokens.backgroundStroke, _Loadertokens.tokens.progressBarCircularBackgroundStroke, _ProgressBarCircular.progressBarCircularTokens.progressStroke, _Loadertokens.tokens.progressBarCircularStroke, _ProgressBarCircular.progressBarCircularTokens.contentColor, _Loadertokens.tokens.progressBarCircularContentColor, _ProgressBarCircular.progressBarCircularTokens.contentFontFamily, _Loadertokens.tokens.progressBarCircularContentFontFamily, _ProgressBarCircular.progressBarCircularTokens.contentFontSize, _Loadertokens.tokens.progressBarCircularContentFontSize, _ProgressBarCircular.progressBarCircularTokens.contentFontStyle, _Loadertokens.tokens.progressBarCircularContentFontStyle, _ProgressBarCircular.progressBarCircularTokens.contentFontWeight, _Loadertokens.tokens.progressBarCircularContentFontWeight, _ProgressBarCircular.progressBarCircularTokens.contentLetterSpacing, _Loadertokens.tokens.progressBarCircularContentLetterSpacing, _ProgressBarCircular.progressBarCircularTokens.contentLineHeight, _Loadertokens.tokens.progressBarCircularContentLineHeight);
+var LoaderWrapper = _styledcomponents.default.div.withConfig({
+    displayName: "Loader.styles__LoaderWrapper",
+    componentId: "sc-a9704424-2"
+})([
+    "position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:",
+    ";"
+], function(param) {
+    var zIndex = param.zIndex;
+    return zIndex || 9000;
+});
+var StyledOverlay = _styledcomponents.default.div.withConfig({
+    displayName: "Loader.styles__StyledOverlay",
+    componentId: "sc-a9704424-3"
+})([
+    "position:absolute;inset:0;background:var(--plasma_private-overlay-background-color);backdrop-filter:",
+    ";cursor:",
+    ";--plasma_private-overlay-background-color:",
+    ";"
+], function(param) {
+    var withBlur = param.withBlur;
+    return withBlur ? 'blur(1rem)' : 'none';
+}, function(param) {
+    var onClick = param.onClick;
+    return onClick ? 'pointer' : 'default';
+}, function(param) {
+    var backgroundColorToken = param.backgroundColorToken;
+    return backgroundColorToken;
+});
+var LoaderContentWrapper = _styledcomponents.default.div.withConfig({
+    displayName: "Loader.styles__LoaderContentWrapper",
+    componentId: "sc-a9704424-4"
+})([
+    "position:relative;z-index:1;"
+]);

package/styled-components/cjs/components/TextField/TextField.js

@@ -26,13 +26,12 @@ var _utils = require("../../utils");
 var _hooks = require("../../hooks");
 var _base = require("./variations/_size/base");
 var _base1 = require("./variations/_view/base");
-var _base2 = require("./variations/_clear/base");
-var _base3 = require("./variations/_disabled/base");
-var _base4 = require("./variations/_read-only/base");
-var _base5 = require("./variations/_label-placement/base");
-var _base6 = require("./variations/_hint-view/base");
-var _base7 = require("./variations/_hint-size/base");
-var _base8 = require("./variations/_chip-view/base");
+var _base2 = require("./variations/_disabled/base");
+var _base3 = require("./variations/_read-only/base");
+var _base4 = require("./variations/_label-placement/base");
+var _base5 = require("./variations/_hint-view/base");
+var _base6 = require("./variations/_hint-size/base");
+var _base7 = require("./variations/_chip-view/base");
 var _TextFieldstyles = require("./TextField.styles");
 var _TextFieldtokens = require("./TextField.tokens");
 var _ui = require("./ui");
@@ -193,7 +192,7 @@ var textFieldRoot = function(Root) {
         var id = _param.id, className = _param.className, style = _param.style, // layout
         contentLeft = _param.contentLeft, contentRight = _param.contentRight, label = _param.label, labelPlacement = _param.labelPlacement, keepPlaceholder = _param.keepPlaceholder, textBefore = _param.textBefore, textAfter = _param.textAfter, placeholder = _param.placeholder, leftHelper = _param.leftHelper, _param_enumerationType = _param.enumerationType, enumerationType = _param_enumerationType === void 0 ? 'plain' : _param_enumerationType, _param_requiredPlacement = _param.requiredPlacement, requiredPlacement = _param_requiredPlacement === void 0 ? 'right' : _param_requiredPlacement, _param_hasRequiredIndicator = _param.hasRequiredIndicator, hasRequiredIndicator = _param_hasRequiredIndicator === void 0 ? true : _param_hasRequiredIndicator, titleCaption = _param.titleCaption, _param_chipView = _param.chipView, chipView = _param_chipView === void 0 ? 'default' : _param_chipView, chipValidator = _param.chipValidator, _param_hintTrigger = _param.// hint
         hintTrigger, hintTrigger = _param_hintTrigger === void 0 ? 'hover' : _param_hintTrigger, hintText = _param.hintText, _param_hintView = _param.hintView, hintView = _param_hintView === void 0 ? 'default' : _param_hintView, _param_hintSize = _param.hintSize, hintSize = _param_hintSize === void 0 ? 'm' : _param_hintSize, hintTargetIcon = _param.hintTargetIcon, _param_hintTargetPlacement = _param.hintTargetPlacement, hintTargetPlacement = _param_hintTargetPlacement === void 0 ? 'outer' : _param_hintTargetPlacement, _param_hintPlacement = _param.hintPlacement, hintPlacement = _param_hintPlacement === void 0 ? 'auto' : _param_hintPlacement, hintHasArrow = _param.hintHasArrow, _param_hintOffset = _param.hintOffset, hintOffset = _param_hintOffset === void 0 ? HINT_DEFAULT_OFFSET : _param_hintOffset, hintWidth = _param.hintWidth, hintContentLeft = _param.hintContentLeft, // variations
-        view = _param.view, size = _param.size, _param_readOnly = _param.readOnly, readOnly = _param_readOnly === void 0 ? false : _param_readOnly, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_required = _param.required, required = _param_required === void 0 ? false : _param_required, _param_clear = _param.clear, clear = _param_clear === void 0 ? false : _param_clear, optional = _param.optional, _param_optionalText = _param.optionalText, optionalText = _param_optionalText === void 0 ? 'optional' : _param_optionalText, hasDivider = _param.hasDivider, // controlled
+        appearance = _param.appearance, view = _param.view, size = _param.size, _param_readOnly = _param.readOnly, readOnly = _param_readOnly === void 0 ? false : _param_readOnly, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_required = _param.required, required = _param_required === void 0 ? false : _param_required, _param_clear = _param.clear, clear = _param_clear === void 0 ? false : _param_clear, optional = _param.optional, _param_optionalText = _param.optionalText, optionalText = _param_optionalText === void 0 ? 'optional' : _param_optionalText, hasDivider = _param.hasDivider, // controlled
         outerValue = _param.value, values = _param.chips, _param_chipType = _param.chipType, chipType = _param_chipType === void 0 ? 'default' : _param_chipType, // @ts-ignore
         _chips = _param._chips, // @ts-ignore
         _chipClickArea = _param._chipClickArea, // @ts-ignore
@@ -231,6 +230,7 @@ var textFieldRoot = function(Root) {
             "hintOffset",
             "hintWidth",
             "hintContentLeft",
+            "appearance",
             "view",
             "size",
             "readOnly",
@@ -276,7 +276,6 @@ var textFieldRoot = function(Root) {
         var innerId = id || uniqId;
         var labelId = (0, _utils.safeUseId)();
         var helperTextId = (0, _utils.safeUseId)();
-        var isDefaultView = view === 'default' || readOnly || disabled;
         var isChipEnumeration = enumerationType === 'chip';
         var isChipsVisible = isChipEnumeration && Boolean((chips === null || chips === void 0 ? void 0 : chips.length) || (_chips === null || _chips === void 0 ? void 0 : _chips.length));
         var withHasChips = isChipsVisible ? _TextFieldtokens.classes.hasChips : undefined;
@@ -298,7 +297,7 @@ var textFieldRoot = function(Root) {
         var innerLabelPlacementValue = labelPlacement === 'inner' && !hasInnerLabel ? undefined : labelPlacement;
         var innerPlaceholderValue = hasPlaceholder ? placeholder : undefined;
         var placeholderShown = Boolean(innerPlaceholderValue) && !hasValue;
-        var clearClass = clear ? _TextFieldtokens.classes.clear : undefined;
+        var clearClass = clear || appearance === 'clear' ? _TextFieldtokens.classes.clear : undefined;
         var hasDividerClass = hasDivider ? _TextFieldtokens.classes.hasDivider : undefined;
         var hasInnerHintClass = hintText && hintTargetPlacement === 'outer' ? _TextFieldtokens.classes.hasHint : undefined;
         var hasHintClass = hintText ? _TextFieldtokens.classes.hasHint : undefined;
@@ -529,9 +528,7 @@ var textFieldRoot = function(Root) {
             handleHintClick: handleHintClick,
             isInnerLabel: true
         }))), contentLeft && /*#__PURE__*/ _react.default.createElement(_TextFieldstyles.StyledContentLeft, {
-            "data-root": true,
-            isClear: clear,
-            isDefaultView: isDefaultView
+            "data-root": true
         }, contentLeft), /*#__PURE__*/ _react.default.createElement(_TextFieldstyles.InputLabelWrapper, {
             tabIndex: -1,
             ref: contentRef,
@@ -651,29 +648,25 @@ var textFieldConfig = {
         size: {
             css: _base.base
         },
-        clear: {
-            css: _base2.base,
-            attrs: true
-        },
         disabled: {
-            css: _base3.base,
+            css: _base2.base,
             attrs: true
         },
         readOnly: {
-            css: _base4.base,
+            css: _base3.base,
             attrs: true
         },
         labelPlacement: {
-            css: _base5.base
+            css: _base4.base
         },
         hintView: {
-            css: _base6.base
+            css: _base5.base
         },
         hintSize: {
-            css: _base7.base
+            css: _base6.base
         },
         chipView: {
-            css: _base8.base
+            css: _base7.base
         }
     },
     defaults: {