@salutejs/plasma-new-hope 0.343.0-canary.2358.19815233540.0 → 0.343.0-canary.2365.19816292443.0

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

@@ -2,38 +2,14 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get TextField () {
+Object.defineProperty(exports, "TextField", {
+    enumerable: true,
+    get: function() {
         return TextField;
-    },
-    get TextFieldClear () {
-        return TextFieldClear;
-    },
-    get TextFieldDefault () {
-        return TextFieldDefault;
     }
 });
-var _utils = require("../../../utils");
 var _engines = require("../../../engines");
 var _TextField = require("../../../components/TextField");
 var _TextFieldconfig = require("./TextField.config");
-var _TextFieldclearconfig = require("./TextField.clear.config");
-var mergedConfigDefault = (0, _engines.mergeConfig)(_TextField.textFieldConfig, _TextFieldconfig.config);
-var TextFieldDefault = (0, _engines.component)(mergedConfigDefault);
-var mergedConfigClear = (0, _engines.mergeConfig)(_TextField.textFieldConfig, _TextFieldclearconfig.config);
-var TextFieldClear = (0, _engines.component)(mergedConfigClear);
-var TextField = (0, _utils.createConditionalComponent)(TextFieldDefault, [
-    {
-        conditions: {
-            prop: 'appearance',
-            value: 'clear'
-        },
-        component: TextFieldClear
-    }
-]);
+var mergedConfig = (0, _engines.mergeConfig)(_TextField.textFieldConfig, _TextFieldconfig.config);
+var TextField = (0, _engines.component)(mergedConfig);

package/styled-components/cjs/utils/createConditionalComponent.js

@@ -8,78 +8,14 @@ Object.defineProperty(exports, "createConditionalComponent", {
         return createConditionalComponent;
     }
 });
-var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {
-        __proto__: null
+var _react = /*#__PURE__*/ _interop_require_default(require("react"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
     };
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
-function _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
 }
 function createConditionalComponent(defaultComponent, mappings) {
-    return /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
+    return function(props) {
         var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
         try {
             for(var _iterator = mappings[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
@@ -94,9 +30,7 @@ function createConditionalComponent(defaultComponent, mappings) {
                 });
                 if (allConditionsMatch) {
                     var Component = component;
-                    return /*#__PURE__*/ _react.default.createElement(Component, _object_spread({
-                        ref: ref
-                    }, props));
+                    return /*#__PURE__*/ _react.default.createElement(Component, props);
                 }
             }
         } catch (err) {
@@ -114,8 +48,6 @@ function createConditionalComponent(defaultComponent, mappings) {
             }
         }
         var DefaultComponent = defaultComponent;
-        return /*#__PURE__*/ _react.default.createElement(DefaultComponent, _object_spread({
-            ref: ref
-        }, props));
-    });
+        return /*#__PURE__*/ _react.default.createElement(DefaultComponent, props);
+    };
 }

package/styled-components/es/components/Pagination/Pagination.styles.js

@@ -10,7 +10,7 @@ var mergedButtonGroupConfig = mergeConfig(buttonGroupConfig);
 var ButtonGroup = component(mergedButtonGroupConfig);
 export var PaginationRoot = styled.div.withConfig({
     displayName: "Pagination.styles__PaginationRoot",
-    componentId: "sc-ec0762a3-0"
+    componentId: "sc-a9f2b5ca-0"
 })([
     "display:flex;color:var(",
     ");&.",
@@ -19,30 +19,28 @@ export var PaginationRoot = styled.div.withConfig({
 ], tokens.paginationColor, classes.compactType, classes.defaultType);
 export var PaginationPages = styled.div.withConfig({
     displayName: "Pagination.styles__PaginationPages",
-    componentId: "sc-ec0762a3-1"
+    componentId: "sc-a9f2b5ca-1"
 })([
     "display:flex;align-items:center;gap:0.25rem;flex-shrink:0;"
 ]);
 export var PaginationActions = styled.div.withConfig({
     displayName: "Pagination.styles__PaginationActions",
-    componentId: "sc-ec0762a3-2"
+    componentId: "sc-a9f2b5ca-2"
 })([
     "display:flex;justify-content:space-between;flex-grow:1;align-items:center;gap:var(",
     ");flex-shrink:1;&.",
-    "{flex-direction:row;width:100%;flex-wrap:wrap;}&.",
-    "{flex-direction:row;}&.",
-    "{flex-direction:row-reverse;}&.",
-    "{flex-direction:row;}"
-], tokens.paginationHelperTextGap, classes.compactType, classes.defaultType, classes.withHasPerPageSelect, classes.withHasQuickJump);
+    "{flex-direction:row;width:100%;flex-wrap:wrap;&.",
+    "{flex-direction:row-reverse;}}flex-direction:row;"
+], tokens.paginationHelperTextGap, classes.compactType, classes.withHasPerPageSelect);
 export var PaginationSection = styled.div.withConfig({
     displayName: "Pagination.styles__PaginationSection",
-    componentId: "sc-ec0762a3-3"
+    componentId: "sc-a9f2b5ca-3"
 })([
     "display:flex;gap:0.125rem;"
 ]);
 export var PaginationButtonGroup = styled(ButtonGroup).withConfig({
     displayName: "Pagination.styles__PaginationButtonGroup",
-    componentId: "sc-ec0762a3-4"
+    componentId: "sc-a9f2b5ca-4"
 })([
     "",
     ":var(",
@@ -84,7 +82,7 @@ export var PaginationButtonGroup = styled(ButtonGroup).withConfig({
 ], buttonGroupTokens.buttonColor, tokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, tokens.buttonHoverColor, buttonGroupTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, tokens.buttonActiveColor, buttonGroupTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive, buttonGroupTokens.buttonFontFamily, tokens.paginationFontFamily, buttonGroupTokens.buttonFontSize, tokens.paginationFontSize, buttonGroupTokens.buttonFontStyle, tokens.paginationFontStyle, buttonGroupTokens.buttonFontWeight, tokens.paginationFontWeight, buttonGroupTokens.buttonLetterSpacing, tokens.paginationLetterSpacing, buttonGroupTokens.buttonLineHeight, tokens.paginationLineHeight, buttonGroupTokens.buttonWidth, tokens.buttonWidth, buttonGroupTokens.buttonHeight, tokens.buttonHeight, buttonGroupTokens.buttonDefaultRadius, tokens.buttonRadius, buttonGroupTokens.buttonSideRadius, tokens.buttonRadius, buttonGroupTokens.buttonSegmentedRadius, tokens.buttonRadius, buttonGroupTokens.buttonRadiusCircle, tokens.buttonRadius);
 export var PaginationButton = styled(Button).withConfig({
     displayName: "Pagination.styles__PaginationButton",
-    componentId: "sc-ec0762a3-5"
+    componentId: "sc-a9f2b5ca-5"
 })([
     "",
     ":var(",
@@ -150,7 +148,7 @@ export var PaginationButton = styled(Button).withConfig({
 }));
 export var PaginationShorter = styled(PaginationButton).withConfig({
     displayName: "Pagination.styles__PaginationShorter",
-    componentId: "sc-ec0762a3-6"
+    componentId: "sc-a9f2b5ca-6"
 })([
     "",
     ":var(",
@@ -159,7 +157,7 @@ export var PaginationShorter = styled(PaginationButton).withConfig({
 ], buttonTokens.buttonWidth, tokens.buttonWidthShorter, buttonTokens.buttonPadding);
 export var PaginationActionsLeft = styled.div.withConfig({
     displayName: "Pagination.styles__PaginationActionsLeft",
-    componentId: "sc-ec0762a3-7"
+    componentId: "sc-a9f2b5ca-7"
 })([
     "display:flex;align-items:center;flex-wrap:wrap;gap:var(",
     ");.",
@@ -167,7 +165,7 @@ export var PaginationActionsLeft = styled.div.withConfig({
 ], tokens.paginationHelperTextGap, classes.defaultType);
 export var PaginationHelperText = styled.div.withConfig({
     displayName: "Pagination.styles__PaginationHelperText",
-    componentId: "sc-ec0762a3-8"
+    componentId: "sc-a9f2b5ca-8"
 })([
     "color:var(",
     ");&.",

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

@@ -106,6 +106,7 @@ import { cx, safeUseId } from "../../utils";
 import { useOutsideClick } from "../../hooks";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as viewCSS } from "./variations/_view/base";
+import { base as clearCSS } from "./variations/_clear/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
 import { base as readOnlyCSS } from "./variations/_read-only/base";
 import { base as labelPlacementCSS } from "./variations/_label-placement/base";
@@ -130,7 +131,7 @@ export 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
-        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
+        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
@@ -168,7 +169,6 @@ export var textFieldRoot = function(Root) {
             "hintOffset",
             "hintWidth",
             "hintContentLeft",
-            "appearance",
             "view",
             "size",
             "readOnly",
@@ -214,6 +214,7 @@ export var textFieldRoot = function(Root) {
         var innerId = id || uniqId;
         var labelId = safeUseId();
         var helperTextId = 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 ? classes.hasChips : undefined;
@@ -235,7 +236,7 @@ export var textFieldRoot = function(Root) {
         var innerLabelPlacementValue = labelPlacement === 'inner' && !hasInnerLabel ? undefined : labelPlacement;
         var innerPlaceholderValue = hasPlaceholder ? placeholder : undefined;
         var placeholderShown = Boolean(innerPlaceholderValue) && !hasValue;
-        var clearClass = clear || appearance === 'clear' ? classes.clear : undefined;
+        var clearClass = clear ? classes.clear : undefined;
         var hasDividerClass = hasDivider ? classes.hasDivider : undefined;
         var hasInnerHintClass = hintText && hintTargetPlacement === 'outer' ? classes.hasHint : undefined;
         var hasHintClass = hintText ? classes.hasHint : undefined;
@@ -466,7 +467,9 @@ export var textFieldRoot = function(Root) {
             handleHintClick: handleHintClick,
             isInnerLabel: true
         }))), contentLeft && /*#__PURE__*/ React.createElement(StyledContentLeft, {
-            "data-root": true
+            "data-root": true,
+            isClear: clear,
+            isDefaultView: isDefaultView
         }, contentLeft), /*#__PURE__*/ React.createElement(InputLabelWrapper, {
             tabIndex: -1,
             ref: contentRef,
@@ -586,6 +589,10 @@ export var textFieldConfig = {
         size: {
             css: sizeCSS
         },
+        clear: {
+            css: clearCSS,
+            attrs: true
+        },
         disabled: {
             css: disabledCSS,
             attrs: true

package/styled-components/es/components/TextField/TextField.styles.js

@@ -8,13 +8,13 @@ var mergedConfig = mergeConfig(tooltipConfig);
 var Tooltip = component(mergedConfig);
 export var InputWrapper = styled.div.withConfig({
     displayName: "TextField.styles__InputWrapper",
-    componentId: "sc-708c1a6a-0"
+    componentId: "sc-a8826f8a-0"
 })([
     "position:relative;display:flex;align-items:center;box-sizing:border-box;"
 ]);
 export var InputLabelWrapper = styled.div.withConfig({
     displayName: "TextField.styles__InputLabelWrapper",
-    componentId: "sc-708c1a6a-1"
+    componentId: "sc-a8826f8a-1"
 })([
     "flex:1;overflow:scroll;position:relative;width:100%;display:inline-flex;align-items:center;::-webkit-scrollbar{display:none;}scrollbar-width:none;overscroll-behavior:contain;&.",
     "{height:var(",
@@ -23,7 +23,7 @@ export var InputLabelWrapper = styled.div.withConfig({
 ], String(classes.hasChips), tokens.chipHeight, tokens.chipBorderRadius);
 export var StyledChips = styled.div.withConfig({
     displayName: "TextField.styles__StyledChips",
-    componentId: "sc-708c1a6a-2"
+    componentId: "sc-a8826f8a-2"
 })([
     "display:flex;gap:var(",
     ");margin-right:var(",
@@ -32,7 +32,7 @@ export var StyledChips = styled.div.withConfig({
 ], tokens.chipGap, tokens.chipMarginRight, tokens.chipGap);
 export var Input = styled.input.withConfig({
     displayName: "TextField.styles__Input",
-    componentId: "sc-708c1a6a-3"
+    componentId: "sc-a8826f8a-3"
 })([
     "box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;width:100%;z-index:1;&.",
     "{",
@@ -40,7 +40,7 @@ export var Input = styled.input.withConfig({
 ], classes.inputTextEllipsis, applyEllipsis());
 export var InputContainer = styled.div.withConfig({
     displayName: "TextField.styles__InputContainer",
-    componentId: "sc-708c1a6a-4"
+    componentId: "sc-a8826f8a-4"
 })([
     "position:relative;display:flex;flex:1;min-width:",
     ";",
@@ -55,7 +55,7 @@ export var InputContainer = styled.div.withConfig({
 });
 export var InputPlaceholder = styled.div.withConfig({
     displayName: "TextField.styles__InputPlaceholder",
-    componentId: "sc-708c1a6a-5"
+    componentId: "sc-a8826f8a-5"
 })([
     "display:flex;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;white-space:nowrap;pointer-events:none;user-select:none;font:inherit;letter-spacing:inherit;line-height:inherit;color:var(",
     ");padding:",
@@ -66,7 +66,7 @@ export var InputPlaceholder = styled.div.withConfig({
 });
 export var InputPlaceholderValue = styled.div.withConfig({
     displayName: "TextField.styles__InputPlaceholderValue",
-    componentId: "sc-708c1a6a-6"
+    componentId: "sc-a8826f8a-6"
 })([
     "&.",
     "{",
@@ -74,7 +74,7 @@ export var InputPlaceholderValue = styled.div.withConfig({
 ], classes.inputTextEllipsis, applyEllipsis());
 export var OuterLabelWrapper = styled.div.withConfig({
     displayName: "TextField.styles__OuterLabelWrapper",
-    componentId: "sc-708c1a6a-7"
+    componentId: "sc-a8826f8a-7"
 })([
     "display:flex;align-items:center;white-space:",
     ";margin-bottom:",
@@ -88,43 +88,44 @@ export var OuterLabelWrapper = styled.div.withConfig({
 });
 export var TitleCaption = styled.div.withConfig({
     displayName: "TextField.styles__TitleCaption",
-    componentId: "sc-708c1a6a-8"
+    componentId: "sc-a8826f8a-8"
 })([
     "display:inline-block;margin-left:auto;"
 ]);
 export var StyledIndicatorWrapper = styled.div.withConfig({
     displayName: "TextField.styles__StyledIndicatorWrapper",
-    componentId: "sc-708c1a6a-9"
+    componentId: "sc-a8826f8a-9"
 })([
     "position:relative;display:inline-flex;align-items:center;"
 ]);
 export var Label = styled.label.withConfig({
     displayName: "TextField.styles__Label",
-    componentId: "sc-708c1a6a-10"
+    componentId: "sc-a8826f8a-10"
 })([
     "display:inline-flex;"
 ]);
 export var StyledContentLeft = styled.div.withConfig({
     displayName: "TextField.styles__StyledContentLeft",
-    componentId: "sc-708c1a6a-11"
+    componentId: "sc-a8826f8a-11"
 })([
-    "margin:var(",
-    ");color:var(",
-    ");line-height:0;&:hover{color:var(",
-    ",var(",
-    "));}&:active{color:var(",
-    ",var(",
-    "));}"
-], tokens.leftContentMargin, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColor, tokens.contentSlotColorActive, tokens.contentSlotColor);
+    "--private_content-slot-color:",
+    ";margin:var(",
+    ");color:var(--private_content-slot-color);line-height:0;&:hover{color:var(",
+    ",var(--private_content-slot-color));}&:active{color:var(",
+    ",var(--private_content-slot-color));}"
+], function(param) {
+    var isDefaultView = param.isDefaultView, isClear = param.isClear;
+    return !isDefaultView && isClear ? "var(".concat(tokens.clearColor, ")") : "var(".concat(tokens.contentSlotColor, ")");
+}, tokens.leftContentMargin, tokens.contentSlotColorHover, tokens.contentSlotColorActive);
 export var StyledContentRightWrapper = styled.div.withConfig({
     displayName: "TextField.styles__StyledContentRightWrapper",
-    componentId: "sc-708c1a6a-12"
+    componentId: "sc-a8826f8a-12"
 })([
     "display:flex;align-items:center;"
 ]);
 export var StyledContentRight = styled.div.withConfig({
     displayName: "TextField.styles__StyledContentRight",
-    componentId: "sc-708c1a6a-13"
+    componentId: "sc-a8826f8a-13"
 })([
     "line-height:0;margin:var(",
     ");color:var(",
@@ -137,13 +138,13 @@ export var StyledContentRight = styled.div.withConfig({
 ], tokens.rightContentMargin, tokens.contentSlotRightColor, tokens.contentSlotColor, tokens.contentSlotRightColorHover, tokens.contentSlotColorHover, tokens.contentSlotRightColorActive, tokens.contentSlotColorActive);
 export var LeftHelper = styled.div.withConfig({
     displayName: "TextField.styles__LeftHelper",
-    componentId: "sc-708c1a6a-14"
+    componentId: "sc-a8826f8a-14"
 })([
     ""
 ]);
 export var StyledTextBefore = styled.div.withConfig({
     displayName: "TextField.styles__StyledTextBefore",
-    componentId: "sc-708c1a6a-15"
+    componentId: "sc-a8826f8a-15"
 })([
     "visibility:",
     ";"
@@ -153,20 +154,20 @@ export var StyledTextBefore = styled.div.withConfig({
 });
 export var StyledTextAfter = styled.div.withConfig({
     displayName: "TextField.styles__StyledTextAfter",
-    componentId: "sc-708c1a6a-16"
+    componentId: "sc-a8826f8a-16"
 })([
     ""
 ]);
 export var StyledOptionalText = styled.span.withConfig({
     displayName: "TextField.styles__StyledOptionalText",
-    componentId: "sc-708c1a6a-17"
+    componentId: "sc-a8826f8a-17"
 })([
     "color:var(",
     ");"
 ], tokens.optionalColor);
 export var StyledHintWrapper = styled.div.withConfig({
     displayName: "TextField.styles__StyledHintWrapper",
-    componentId: "sc-708c1a6a-18"
+    componentId: "sc-a8826f8a-18"
 })([
     "display:inline-block;line-height:0;&.",
     "{position:absolute;margin:0;inset:var(",
@@ -174,14 +175,14 @@ export var StyledHintWrapper = styled.div.withConfig({
 ], classes.innerLabelPlacement, tokens.hintInnerLabelPlacementOffset);
 export var HintTargetWrapper = styled.div.withConfig({
     displayName: "TextField.styles__HintTargetWrapper",
-    componentId: "sc-708c1a6a-19"
+    componentId: "sc-a8826f8a-19"
 })([
     "color:var(",
     ");display:flex;justify-content:center;align-items:center;"
 ], tokens.hintIconColor);
 export var Hint = styled(Tooltip).withConfig({
     displayName: "TextField.styles__Hint",
-    componentId: "sc-708c1a6a-20"
+    componentId: "sc-a8826f8a-20"
 })([
     "",
     " .",
@@ -189,13 +190,13 @@ export var Hint = styled(Tooltip).withConfig({
 ], HintTargetWrapper, popoverClasses.root);
 export var HintIconWrapper = styled.div.withConfig({
     displayName: "TextField.styles__HintIconWrapper",
-    componentId: "sc-708c1a6a-21"
+    componentId: "sc-a8826f8a-21"
 })([
     "display:flex;"
 ]);
 export var StyledIndicator = styled.div.withConfig({
     displayName: "TextField.styles__StyledIndicator",
-    componentId: "sc-708c1a6a-22"
+    componentId: "sc-a8826f8a-22"
 })([
     "position:absolute;border-radius:50%;background-color:var(",
     ");&.",

package/styled-components/es/components/TextField/variations/_clear/base.js

@@ -0,0 +1,42 @@
+import { css } from "styled-components";
+import { classes, tokens } from "../../TextField.tokens";
+import { Input, InputPlaceholder, InputWrapper, OuterLabelWrapper, StyledContentLeft, StyledContentRight, StyledHintWrapper, StyledIndicator } from "../../TextField.styles";
+export var base = css([
+    "&.",
+    "{&[readonly] ",
+    ",",
+    "{background-color:unset;box-shadow:none;border-radius:0;padding-left:0;padding-right:0;&:hover{background-color:unset;}}",
+    "{margin-left:0;}",
+    "{margin-right:0;}&.",
+    "{",
+    "{margin-bottom:var(",
+    ");}}",
+    "{color:var(",
+    ");}",
+    "{color:var(",
+    ");}",
+    "{&.",
+    "{inset:var(",
+    ");&.",
+    "{inset:var(",
+    ");}}}&.",
+    "{",
+    "{&.",
+    "{inset:var(",
+    ");}}",
+    "{&.",
+    ".",
+    "{inset:var(",
+    ");}}}&.",
+    "{",
+    "{--plasma_private-textfield-divider-color:var(",
+    ");&:before{content:'';position:absolute;height:0.063rem;width:100%;bottom:0;left:0;background-color:var(--plasma_private-textfield-divider-color);transition:background-color 0.1s ease-in;}}&:not([readonly]) ",
+    ":hover{--plasma_private-textfield-divider-color:var( ",
+    ",var(",
+    ") );}&:not([readonly]) ",
+    ":focus-within{--plasma_private-textfield-divider-color:var( ",
+    ",var(",
+    ") );",
+    "{color:var(",
+    ");}}}}"
+], classes.clear, InputWrapper, InputWrapper, StyledContentLeft, StyledContentRight, classes.outerLabelPlacement, OuterLabelWrapper, tokens.clearLabelOffset, Input, tokens.clearColor, InputPlaceholder, tokens.clearPlaceholderColor, StyledIndicator, classes.innerLabelPlacement, tokens.clearIndicatorLabelPlacementInner, classes.requiredAlignRight, tokens.clearIndicatorLabelPlacementInnerRight, classes.hasHint, StyledHintWrapper, classes.innerLabelPlacement, tokens.clearHintInnerLabelPlacementOffset, StyledIndicator, classes.innerLabelPlacement, classes.requiredAlignRight, tokens.clearIndicatorHintInnerRight, classes.hasDivider, InputWrapper, String(tokens.dividerColor), InputWrapper, tokens.dividerColorHover, String(tokens.dividerColor), InputWrapper, tokens.dividerColorFocus, String(tokens.dividerColor), InputPlaceholder, tokens.clearPlaceholderColorFocus);

package/styled-components/es/components/TextField/variations/_label-placement/base.js

@@ -1,6 +1,6 @@
 import { css } from "styled-components";
 import { classes, tokens } from "../../TextField.tokens";
-import { Input, InputContainer, Label, StyledIndicator } from "../../TextField.styles";
+import { Input, InputContainer, Label } from "../../TextField.styles";
 export var base = css([
     "&.",
     "{",
@@ -28,9 +28,7 @@ export var base = css([
     ");}",
     "{color:var(",
     ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;height:100%;width:100%;}&.",
-    "{",
-    "{&.",
-    ".",
-    "{inset:var(",
-    ");}}}}"
-], classes.outerLabelPlacement, Label, tokens.labelColor, classes.innerLabelPlacement, InputContainer, tokens.contentLabelInnerPadding, Input, classes.readOnlyInput, Label, Input, classes.hasValue, Label, Input, classes.keepPlaceholder, Label, tokens.placeholderColor, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, Label, tokens.placeholderColor, classes.hasHint, StyledIndicator, classes.innerLabelPlacement, classes.requiredAlignRight, tokens.clearIndicatorHintInnerRight);
+    " ",
+    "{color:var(",
+    ");}}"
+], classes.outerLabelPlacement, Label, tokens.labelColor, classes.innerLabelPlacement, InputContainer, tokens.contentLabelInnerPadding, Input, classes.readOnlyInput, Label, Input, classes.hasValue, Label, Input, classes.keepPlaceholder, Label, tokens.placeholderColor, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, Label, tokens.placeholderColor, classes.clear, Label, tokens.clearPlaceholderColor);

package/styled-components/es/components/TextField/variations/_read-only/base.js

@@ -2,14 +2,15 @@ import { css } from "styled-components";
 import { classes, tokens } from "../../TextField.tokens";
 import { Input, InputPlaceholder, InputWrapper, Label, LeftHelper, StyledContentLeft, StyledContentRight, TitleCaption } from "../../TextField.styles";
 export var base = css([
-    "&[readonly]{",
+    "&[readonly]{:not(&.",
+    "){",
     "{position:relative;z-index:0;color:var(",
     ");background:transparent;box-shadow:none;:before{position:absolute;content:'';top:0;left:0;right:0;bottom:0;border-radius:var(",
     ");background-color:var(",
     ");opacity:var(",
     ");box-shadow:inset 0 0 0 var(",
     ") var(",
-    ");z-index:-1;}:hover{background-color:transparent;}}&.",
+    ");z-index:-1;}:hover{background-color:transparent;}}}&.",
     " ",
     "{&:before{background-color:var(",
     ");}}",
@@ -33,4 +34,4 @@ export var base = css([
     " ",
     "{color:var(",
     ");}}"
-], InputWrapper, tokens.colorReadOnly, tokens.borderRadius, tokens.backgroundColorReadOnly, tokens.readOnlyOpacity, String(tokens.borderWidth), tokens.borderColorReadOnly, classes.hasDivider, InputWrapper, String(tokens.dividerColorReadOnly), InputWrapper, InputPlaceholder, InputPlaceholder, tokens.placeholderColorReadOnly, Input, tokens.colorReadOnly, TitleCaption, tokens.titleCaptionColorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly, StyledContentLeft, StyledContentRight, tokens.contentSlotRightOpacityReadOnly, StyledContentRight, StyledContentRight, tokens.contentSlotRightColor, tokens.contentSlotColor, classes.outerLabelPlacement, Label, tokens.labelColorReadOnly);
+], classes.clear, InputWrapper, tokens.colorReadOnly, tokens.borderRadius, tokens.backgroundColorReadOnly, tokens.readOnlyOpacity, String(tokens.borderWidth), tokens.borderColorReadOnly, classes.hasDivider, InputWrapper, String(tokens.dividerColorReadOnly), InputWrapper, InputPlaceholder, InputPlaceholder, tokens.placeholderColorReadOnly, Input, tokens.colorReadOnly, TitleCaption, tokens.titleCaptionColorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly, StyledContentLeft, StyledContentRight, tokens.contentSlotRightOpacityReadOnly, StyledContentRight, StyledContentRight, tokens.contentSlotRightColor, tokens.contentSlotColor, classes.outerLabelPlacement, Label, tokens.labelColorReadOnly);

package/styled-components/es/components/TextField/variations/_view/base.js

@@ -1,5 +1,5 @@
 import { css } from "styled-components";
-import { classes, tokens } from "../../TextField.tokens";
+import { tokens } from "../../TextField.tokens";
 import { Input, InputPlaceholder, InputWrapper, LeftHelper, StyledTextAfter, StyledTextBefore, TitleCaption } from "../../TextField.styles";
 export var base = css([
     "",
@@ -33,16 +33,5 @@ export var base = css([
     "{color:var(",
     ");}",
     "{color:var(",
-    ");}&.",
-    "{",
-    "{--plasma_private-textfield-divider-color:var(",
-    ");&:before{content:'';position:absolute;height:0.063rem;width:100%;bottom:0;left:0;background-color:var(--plasma_private-textfield-divider-color);transition:background-color 0.1s ease-in;}}&:not([readonly]) ",
-    ":hover{--plasma_private-textfield-divider-color:var( ",
-    ",var(",
-    ") );}&:not([readonly]) ",
-    ":focus-within{--plasma_private-textfield-divider-color:var( ",
-    ",var(",
-    ") );",
-    "{color:var(",
-    ");}}}"
-], InputWrapper, String(tokens.borderColor), String(tokens.backgroundColor), tokens.color, tokens.borderWidth, tokens.boxShadow, tokens.caretColor, InputWrapper, tokens.borderColorHover, String(tokens.borderColor), tokens.backgroundColorHover, String(tokens.backgroundColor), Input, tokens.color, InputPlaceholder, tokens.placeholderColor, InputWrapper, tokens.borderColorFocus, String(tokens.borderColor), tokens.backgroundColorFocus, String(tokens.backgroundColor), InputPlaceholder, tokens.placeholderColorFocus, TitleCaption, tokens.titleCaptionColor, LeftHelper, tokens.leftHelperColor, StyledTextBefore, tokens.textBeforeColor, StyledTextAfter, tokens.textAfterColor, classes.hasDivider, InputWrapper, String(tokens.dividerColor), InputWrapper, tokens.dividerColorHover, String(tokens.dividerColor), InputWrapper, tokens.dividerColorFocus, String(tokens.dividerColor), InputPlaceholder, tokens.clearPlaceholderColorFocus);
+    ");}"
+], InputWrapper, String(tokens.borderColor), String(tokens.backgroundColor), tokens.color, tokens.borderWidth, tokens.boxShadow, tokens.caretColor, InputWrapper, tokens.borderColorHover, String(tokens.borderColor), tokens.backgroundColorHover, String(tokens.backgroundColor), Input, tokens.color, InputPlaceholder, tokens.placeholderColor, InputWrapper, tokens.borderColorFocus, String(tokens.borderColor), tokens.backgroundColorFocus, String(tokens.backgroundColor), InputPlaceholder, tokens.placeholderColorFocus, TitleCaption, tokens.titleCaptionColor, LeftHelper, tokens.leftHelperColor, StyledTextBefore, tokens.textBeforeColor, StyledTextAfter, tokens.textAfterColor);

package/styled-components/es/examples/components/Combobox/Combobox.js

@@ -1,7 +0,0 @@
-import { component, mergeConfig } from "../../../engines";
-import { comboboxNewConfig } from "../../..";
-import { config } from "./Combobox.config";
-var mergedConfig = mergeConfig(comboboxNewConfig, config);
-var ComboboxComponent = component(mergedConfig);
-var Combobox = ComboboxComponent;
-export { Combobox };