@salutejs/plasma-new-hope 0.342.1-canary.2369.19883385309.0 → 0.342.1-canary.2376.19952506237.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.342.1-canary.2369.19883385309.0",
+  "version": "0.342.1-canary.2376.19952506237.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -75,19 +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-cy-utils": "0.140.1-canary.2369.19883385309.0",
-    "@salutejs/plasma-sb-utils": "0.210.1-canary.2369.19883385309.0",
+    "@salutejs/plasma-cy-utils": "0.140.1-canary.2376.19952506237.0",
+    "@salutejs/plasma-sb-utils": "0.210.1-canary.2376.19952506237.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",
@@ -95,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",
@@ -105,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",
@@ -118,7 +108,7 @@
     "@linaria/react": "5.0.3",
     "@popperjs/core": "2.11.8",
     "@salutejs/input-core": "2.1.2",
-    "@salutejs/plasma-core": "1.210.1-canary.2369.19883385309.0",
+    "@salutejs/plasma-core": "1.210.1-canary.2376.19952506237.0",
     "@salutejs/react-maskinput": "3.3.2",
     "@tanstack/react-table": "8.21.2",
     "@tanstack/react-virtual": "3.13.2",
@@ -138,5 +128,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "3076ccdad9d53aefd4e7d305efea7c285fab3d75"
+  "gitHead": "557f71bf72afb17de88885d9219f0ae27b256569"
 }

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

@@ -54,39 +54,39 @@ var mergedButtonGroupConfig = (0, _engines.mergeConfig)(_ButtonGroup.buttonGroup
 var ButtonGroup = (0, _engines.component)(mergedButtonGroupConfig);
 var PaginationRoot = _styledcomponents.default.div.withConfig({
     displayName: "Pagination.styles__PaginationRoot",
-    componentId: "sc-ec0762a3-0"
+    componentId: "sc-210e0d2-0"
 })([
     "display:flex;color:var(",
     ");&.",
-    "{flex-direction:column;gap:0.5rem;justify-content:flex-start;}&.",
+    "{flex-direction:column;gap:var(",
+    ");justify-content:flex-start;}&.",
     "{width:100%;justify-content:space-between;flex:0 0 100%;gap:1rem;flex-wrap:nowrap;}"
-], _Paginationtokens.tokens.paginationColor, _Paginationtokens.classes.compactType, _Paginationtokens.classes.defaultType);
+], _Paginationtokens.tokens.paginationColor, _Paginationtokens.classes.compactType, _Paginationtokens.tokens.paginationCompactTypeGap, _Paginationtokens.classes.defaultType);
 var PaginationPages = _styledcomponents.default.div.withConfig({
     displayName: "Pagination.styles__PaginationPages",
-    componentId: "sc-ec0762a3-1"
+    componentId: "sc-210e0d2-1"
 })([
     "display:flex;align-items:center;gap:0.25rem;flex-shrink:0;"
 ]);
 var PaginationActions = _styledcomponents.default.div.withConfig({
     displayName: "Pagination.styles__PaginationActions",
-    componentId: "sc-ec0762a3-2"
+    componentId: "sc-210e0d2-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-shrink:1;flex-direction:row;&.",
+    "{width:100%;flex-wrap:wrap;&.",
     "{flex-direction:row-reverse;}&.",
-    "{flex-direction:row;}"
-], _Paginationtokens.tokens.paginationHelperTextGap, _Paginationtokens.classes.compactType, _Paginationtokens.classes.defaultType, _Paginationtokens.classes.withHasPerPageSelect, _Paginationtokens.classes.withHasQuickJump);
+    "{flex-direction:row;}}"
+], _Paginationtokens.tokens.paginationHelperTextGap, _Paginationtokens.classes.compactType, _Paginationtokens.classes.withHasPerPageSelect, _Paginationtokens.classes.withHasQuickJump);
 var PaginationSection = _styledcomponents.default.div.withConfig({
     displayName: "Pagination.styles__PaginationSection",
-    componentId: "sc-ec0762a3-3"
+    componentId: "sc-210e0d2-3"
 })([
     "display:flex;gap:0.125rem;"
 ]);
 var PaginationButtonGroup = (0, _styledcomponents.default)(ButtonGroup).withConfig({
     displayName: "Pagination.styles__PaginationButtonGroup",
-    componentId: "sc-ec0762a3-4"
+    componentId: "sc-210e0d2-4"
 })([
     "",
     ":var(",
@@ -128,7 +128,7 @@ var PaginationButtonGroup = (0, _styledcomponents.default)(ButtonGroup).withConf
 ], _ButtonGroup.buttonGroupTokens.buttonColor, _Paginationtokens.tokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _Paginationtokens.tokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _Paginationtokens.tokens.buttonHoverColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _Paginationtokens.tokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _Paginationtokens.tokens.buttonActiveColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive, _Paginationtokens.tokens.buttonBackgroundColorActive, _ButtonGroup.buttonGroupTokens.buttonFontFamily, _Paginationtokens.tokens.paginationFontFamily, _ButtonGroup.buttonGroupTokens.buttonFontSize, _Paginationtokens.tokens.paginationFontSize, _ButtonGroup.buttonGroupTokens.buttonFontStyle, _Paginationtokens.tokens.paginationFontStyle, _ButtonGroup.buttonGroupTokens.buttonFontWeight, _Paginationtokens.tokens.paginationFontWeight, _ButtonGroup.buttonGroupTokens.buttonLetterSpacing, _Paginationtokens.tokens.paginationLetterSpacing, _ButtonGroup.buttonGroupTokens.buttonLineHeight, _Paginationtokens.tokens.paginationLineHeight, _ButtonGroup.buttonGroupTokens.buttonWidth, _Paginationtokens.tokens.buttonWidth, _ButtonGroup.buttonGroupTokens.buttonHeight, _Paginationtokens.tokens.buttonHeight, _ButtonGroup.buttonGroupTokens.buttonDefaultRadius, _Paginationtokens.tokens.buttonRadius, _ButtonGroup.buttonGroupTokens.buttonSideRadius, _Paginationtokens.tokens.buttonRadius, _ButtonGroup.buttonGroupTokens.buttonSegmentedRadius, _Paginationtokens.tokens.buttonRadius, _ButtonGroup.buttonGroupTokens.buttonRadiusCircle, _Paginationtokens.tokens.buttonRadius);
 var PaginationButton = (0, _styledcomponents.default)(Button).withConfig({
     displayName: "Pagination.styles__PaginationButton",
-    componentId: "sc-ec0762a3-5"
+    componentId: "sc-210e0d2-5"
 })([
     "",
     ":var(",
@@ -194,7 +194,7 @@ var PaginationButton = (0, _styledcomponents.default)(Button).withConfig({
 }));
 var PaginationShorter = (0, _styledcomponents.default)(PaginationButton).withConfig({
     displayName: "Pagination.styles__PaginationShorter",
-    componentId: "sc-ec0762a3-6"
+    componentId: "sc-210e0d2-6"
 })([
     "",
     ":var(",
@@ -203,7 +203,7 @@ var PaginationShorter = (0, _styledcomponents.default)(PaginationButton).withCon
 ], _Button.buttonTokens.buttonWidth, _Paginationtokens.tokens.buttonWidthShorter, _Button.buttonTokens.buttonPadding);
 var PaginationActionsLeft = _styledcomponents.default.div.withConfig({
     displayName: "Pagination.styles__PaginationActionsLeft",
-    componentId: "sc-ec0762a3-7"
+    componentId: "sc-210e0d2-7"
 })([
     "display:flex;align-items:center;flex-wrap:wrap;gap:var(",
     ");.",
@@ -211,7 +211,7 @@ var PaginationActionsLeft = _styledcomponents.default.div.withConfig({
 ], _Paginationtokens.tokens.paginationHelperTextGap, _Paginationtokens.classes.defaultType);
 var PaginationHelperText = _styledcomponents.default.div.withConfig({
     displayName: "Pagination.styles__PaginationHelperText",
-    componentId: "sc-ec0762a3-8"
+    componentId: "sc-210e0d2-8"
 })([
     "color:var(",
     ");&.",

package/styled-components/cjs/components/Pagination/Pagination.tokens.js

@@ -59,6 +59,7 @@ var tokens = {
     paginationCurrentButtonActiveColor: '--plasma-pagination--button-current-color-active',
     paginationDisabledButtonColor: '--plasma-pagination--button-color-disabled',
     paginationDisabledButtonBackgroundColor: '--plasma-pagination--button-bg-color-disabled',
+    paginationCompactTypeGap: '--plasma-pagination-compact-type-gap',
     buttonDisabledOpacity: '--plasma-pagination-button-disabled-opacity',
     buttonHeight: '--plasma-pagination-button-height',
     buttonWidthShorter: '--plasma-pagination-button-width-shorter',

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: {

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

@@ -94,13 +94,13 @@ var mergedConfig = (0, _engines.mergeConfig)(_Tooltip.tooltipConfig);
 var Tooltip = (0, _engines.component)(mergedConfig);
 var InputWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__InputWrapper",
-    componentId: "sc-a8826f8a-0"
+    componentId: "sc-708c1a6a-0"
 })([
     "position:relative;display:flex;align-items:center;box-sizing:border-box;"
 ]);
 var InputLabelWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__InputLabelWrapper",
-    componentId: "sc-a8826f8a-1"
+    componentId: "sc-708c1a6a-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(",
@@ -109,7 +109,7 @@ var InputLabelWrapper = _styledcomponents.default.div.withConfig({
 ], String(_TextFieldtokens.classes.hasChips), _TextFieldtokens.tokens.chipHeight, _TextFieldtokens.tokens.chipBorderRadius);
 var StyledChips = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledChips",
-    componentId: "sc-a8826f8a-2"
+    componentId: "sc-708c1a6a-2"
 })([
     "display:flex;gap:var(",
     ");margin-right:var(",
@@ -118,7 +118,7 @@ var StyledChips = _styledcomponents.default.div.withConfig({
 ], _TextFieldtokens.tokens.chipGap, _TextFieldtokens.tokens.chipMarginRight, _TextFieldtokens.tokens.chipGap);
 var Input = _styledcomponents.default.input.withConfig({
     displayName: "TextField.styles__Input",
-    componentId: "sc-a8826f8a-3"
+    componentId: "sc-708c1a6a-3"
 })([
     "box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;width:100%;z-index:1;&.",
     "{",
@@ -126,7 +126,7 @@ var Input = _styledcomponents.default.input.withConfig({
 ], _TextFieldtokens.classes.inputTextEllipsis, (0, _mixins.applyEllipsis)());
 var InputContainer = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__InputContainer",
-    componentId: "sc-a8826f8a-4"
+    componentId: "sc-708c1a6a-4"
 })([
     "position:relative;display:flex;flex:1;min-width:",
     ";",
@@ -141,7 +141,7 @@ var InputContainer = _styledcomponents.default.div.withConfig({
 });
 var InputPlaceholder = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__InputPlaceholder",
-    componentId: "sc-a8826f8a-5"
+    componentId: "sc-708c1a6a-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:",
@@ -152,7 +152,7 @@ var InputPlaceholder = _styledcomponents.default.div.withConfig({
 });
 var InputPlaceholderValue = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__InputPlaceholderValue",
-    componentId: "sc-a8826f8a-6"
+    componentId: "sc-708c1a6a-6"
 })([
     "&.",
     "{",
@@ -160,7 +160,7 @@ var InputPlaceholderValue = _styledcomponents.default.div.withConfig({
 ], _TextFieldtokens.classes.inputTextEllipsis, (0, _mixins.applyEllipsis)());
 var OuterLabelWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__OuterLabelWrapper",
-    componentId: "sc-a8826f8a-7"
+    componentId: "sc-708c1a6a-7"
 })([
     "display:flex;align-items:center;white-space:",
     ";margin-bottom:",
@@ -174,44 +174,43 @@ var OuterLabelWrapper = _styledcomponents.default.div.withConfig({
 });
 var TitleCaption = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__TitleCaption",
-    componentId: "sc-a8826f8a-8"
+    componentId: "sc-708c1a6a-8"
 })([
     "display:inline-block;margin-left:auto;"
 ]);
 var StyledIndicatorWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledIndicatorWrapper",
-    componentId: "sc-a8826f8a-9"
+    componentId: "sc-708c1a6a-9"
 })([
     "position:relative;display:inline-flex;align-items:center;"
 ]);
 var Label = _styledcomponents.default.label.withConfig({
     displayName: "TextField.styles__Label",
-    componentId: "sc-a8826f8a-10"
+    componentId: "sc-708c1a6a-10"
 })([
     "display:inline-flex;"
 ]);
 var StyledContentLeft = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledContentLeft",
-    componentId: "sc-a8826f8a-11"
+    componentId: "sc-708c1a6a-11"
 })([
-    "--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(_TextFieldtokens.tokens.clearColor, ")") : "var(".concat(_TextFieldtokens.tokens.contentSlotColor, ")");
-}, _TextFieldtokens.tokens.leftContentMargin, _TextFieldtokens.tokens.contentSlotColorHover, _TextFieldtokens.tokens.contentSlotColorActive);
+    "margin:var(",
+    ");color:var(",
+    ");line-height:0;&:hover{color:var(",
+    ",var(",
+    "));}&:active{color:var(",
+    ",var(",
+    "));}"
+], _TextFieldtokens.tokens.leftContentMargin, _TextFieldtokens.tokens.contentSlotColor, _TextFieldtokens.tokens.contentSlotColorHover, _TextFieldtokens.tokens.contentSlotColor, _TextFieldtokens.tokens.contentSlotColorActive, _TextFieldtokens.tokens.contentSlotColor);
 var StyledContentRightWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledContentRightWrapper",
-    componentId: "sc-a8826f8a-12"
+    componentId: "sc-708c1a6a-12"
 })([
     "display:flex;align-items:center;"
 ]);
 var StyledContentRight = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledContentRight",
-    componentId: "sc-a8826f8a-13"
+    componentId: "sc-708c1a6a-13"
 })([
     "line-height:0;margin:var(",
     ");color:var(",
@@ -224,13 +223,13 @@ var StyledContentRight = _styledcomponents.default.div.withConfig({
 ], _TextFieldtokens.tokens.rightContentMargin, _TextFieldtokens.tokens.contentSlotRightColor, _TextFieldtokens.tokens.contentSlotColor, _TextFieldtokens.tokens.contentSlotRightColorHover, _TextFieldtokens.tokens.contentSlotColorHover, _TextFieldtokens.tokens.contentSlotRightColorActive, _TextFieldtokens.tokens.contentSlotColorActive);
 var LeftHelper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__LeftHelper",
-    componentId: "sc-a8826f8a-14"
+    componentId: "sc-708c1a6a-14"
 })([
     ""
 ]);
 var StyledTextBefore = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledTextBefore",
-    componentId: "sc-a8826f8a-15"
+    componentId: "sc-708c1a6a-15"
 })([
     "visibility:",
     ";"
@@ -240,20 +239,20 @@ var StyledTextBefore = _styledcomponents.default.div.withConfig({
 });
 var StyledTextAfter = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledTextAfter",
-    componentId: "sc-a8826f8a-16"
+    componentId: "sc-708c1a6a-16"
 })([
     ""
 ]);
 var StyledOptionalText = _styledcomponents.default.span.withConfig({
     displayName: "TextField.styles__StyledOptionalText",
-    componentId: "sc-a8826f8a-17"
+    componentId: "sc-708c1a6a-17"
 })([
     "color:var(",
     ");"
 ], _TextFieldtokens.tokens.optionalColor);
 var StyledHintWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledHintWrapper",
-    componentId: "sc-a8826f8a-18"
+    componentId: "sc-708c1a6a-18"
 })([
     "display:inline-block;line-height:0;&.",
     "{position:absolute;margin:0;inset:var(",
@@ -261,14 +260,14 @@ var StyledHintWrapper = _styledcomponents.default.div.withConfig({
 ], _TextFieldtokens.classes.innerLabelPlacement, _TextFieldtokens.tokens.hintInnerLabelPlacementOffset);
 var HintTargetWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__HintTargetWrapper",
-    componentId: "sc-a8826f8a-19"
+    componentId: "sc-708c1a6a-19"
 })([
     "color:var(",
     ");display:flex;justify-content:center;align-items:center;"
 ], _TextFieldtokens.tokens.hintIconColor);
 var Hint = (0, _styledcomponents.default)(Tooltip).withConfig({
     displayName: "TextField.styles__Hint",
-    componentId: "sc-a8826f8a-20"
+    componentId: "sc-708c1a6a-20"
 })([
     "",
     " .",
@@ -276,13 +275,13 @@ var Hint = (0, _styledcomponents.default)(Tooltip).withConfig({
 ], HintTargetWrapper, _Popover.popoverClasses.root);
 var HintIconWrapper = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__HintIconWrapper",
-    componentId: "sc-a8826f8a-21"
+    componentId: "sc-708c1a6a-21"
 })([
     "display:flex;"
 ]);
 var StyledIndicator = _styledcomponents.default.div.withConfig({
     displayName: "TextField.styles__StyledIndicator",
-    componentId: "sc-a8826f8a-22"
+    componentId: "sc-708c1a6a-22"
 })([
     "position:absolute;border-radius:50%;background-color:var(",
     ");&.",

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

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

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

@@ -12,15 +12,14 @@ var _styledcomponents = require("styled-components");
 var _TextFieldtokens = require("../../TextField.tokens");
 var _TextFieldstyles = require("../../TextField.styles");
 var base = (0, _styledcomponents.css)([
-    "&[readonly]{:not(&.",
-    "){",
+    "&[readonly]{",
     "{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(",
     ");}}",
@@ -44,4 +43,4 @@ var base = (0, _styledcomponents.css)([
     " ",
     "{color:var(",
     ");}}"
-], _TextFieldtokens.classes.clear, _TextFieldstyles.InputWrapper, _TextFieldtokens.tokens.colorReadOnly, _TextFieldtokens.tokens.borderRadius, _TextFieldtokens.tokens.backgroundColorReadOnly, _TextFieldtokens.tokens.readOnlyOpacity, String(_TextFieldtokens.tokens.borderWidth), _TextFieldtokens.tokens.borderColorReadOnly, _TextFieldtokens.classes.hasDivider, _TextFieldstyles.InputWrapper, String(_TextFieldtokens.tokens.dividerColorReadOnly), _TextFieldstyles.InputWrapper, _TextFieldstyles.InputPlaceholder, _TextFieldstyles.InputPlaceholder, _TextFieldtokens.tokens.placeholderColorReadOnly, _TextFieldstyles.Input, _TextFieldtokens.tokens.colorReadOnly, _TextFieldstyles.TitleCaption, _TextFieldtokens.tokens.titleCaptionColorReadOnly, _TextFieldstyles.LeftHelper, _TextFieldtokens.tokens.leftHelperColorReadOnly, _TextFieldstyles.StyledContentLeft, _TextFieldstyles.StyledContentRight, _TextFieldtokens.tokens.contentSlotRightOpacityReadOnly, _TextFieldstyles.StyledContentRight, _TextFieldstyles.StyledContentRight, _TextFieldtokens.tokens.contentSlotRightColor, _TextFieldtokens.tokens.contentSlotColor, _TextFieldtokens.classes.outerLabelPlacement, _TextFieldstyles.Label, _TextFieldtokens.tokens.labelColorReadOnly);
+], _TextFieldstyles.InputWrapper, _TextFieldtokens.tokens.colorReadOnly, _TextFieldtokens.tokens.borderRadius, _TextFieldtokens.tokens.backgroundColorReadOnly, _TextFieldtokens.tokens.readOnlyOpacity, String(_TextFieldtokens.tokens.borderWidth), _TextFieldtokens.tokens.borderColorReadOnly, _TextFieldtokens.classes.hasDivider, _TextFieldstyles.InputWrapper, String(_TextFieldtokens.tokens.dividerColorReadOnly), _TextFieldstyles.InputWrapper, _TextFieldstyles.InputPlaceholder, _TextFieldstyles.InputPlaceholder, _TextFieldtokens.tokens.placeholderColorReadOnly, _TextFieldstyles.Input, _TextFieldtokens.tokens.colorReadOnly, _TextFieldstyles.TitleCaption, _TextFieldtokens.tokens.titleCaptionColorReadOnly, _TextFieldstyles.LeftHelper, _TextFieldtokens.tokens.leftHelperColorReadOnly, _TextFieldstyles.StyledContentLeft, _TextFieldstyles.StyledContentRight, _TextFieldtokens.tokens.contentSlotRightOpacityReadOnly, _TextFieldstyles.StyledContentRight, _TextFieldstyles.StyledContentRight, _TextFieldtokens.tokens.contentSlotRightColor, _TextFieldtokens.tokens.contentSlotColor, _TextFieldtokens.classes.outerLabelPlacement, _TextFieldstyles.Label, _TextFieldtokens.tokens.labelColorReadOnly);

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

@@ -43,5 +43,16 @@ var base = (0, _styledcomponents.css)([
     "{color:var(",
     ");}",
     "{color:var(",
-    ");}"
-], _TextFieldstyles.InputWrapper, String(_TextFieldtokens.tokens.borderColor), String(_TextFieldtokens.tokens.backgroundColor), _TextFieldtokens.tokens.color, _TextFieldtokens.tokens.borderWidth, _TextFieldtokens.tokens.boxShadow, _TextFieldtokens.tokens.caretColor, _TextFieldstyles.InputWrapper, _TextFieldtokens.tokens.borderColorHover, String(_TextFieldtokens.tokens.borderColor), _TextFieldtokens.tokens.backgroundColorHover, String(_TextFieldtokens.tokens.backgroundColor), _TextFieldstyles.Input, _TextFieldtokens.tokens.color, _TextFieldstyles.InputPlaceholder, _TextFieldtokens.tokens.placeholderColor, _TextFieldstyles.InputWrapper, _TextFieldtokens.tokens.borderColorFocus, String(_TextFieldtokens.tokens.borderColor), _TextFieldtokens.tokens.backgroundColorFocus, String(_TextFieldtokens.tokens.backgroundColor), _TextFieldstyles.InputPlaceholder, _TextFieldtokens.tokens.placeholderColorFocus, _TextFieldstyles.TitleCaption, _TextFieldtokens.tokens.titleCaptionColor, _TextFieldstyles.LeftHelper, _TextFieldtokens.tokens.leftHelperColor, _TextFieldstyles.StyledTextBefore, _TextFieldtokens.tokens.textBeforeColor, _TextFieldstyles.StyledTextAfter, _TextFieldtokens.tokens.textAfterColor);
+    ");}&.",
+    "{",
+    "{--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(",
+    ");}}}"
+], _TextFieldstyles.InputWrapper, String(_TextFieldtokens.tokens.borderColor), String(_TextFieldtokens.tokens.backgroundColor), _TextFieldtokens.tokens.color, _TextFieldtokens.tokens.borderWidth, _TextFieldtokens.tokens.boxShadow, _TextFieldtokens.tokens.caretColor, _TextFieldstyles.InputWrapper, _TextFieldtokens.tokens.borderColorHover, String(_TextFieldtokens.tokens.borderColor), _TextFieldtokens.tokens.backgroundColorHover, String(_TextFieldtokens.tokens.backgroundColor), _TextFieldstyles.Input, _TextFieldtokens.tokens.color, _TextFieldstyles.InputPlaceholder, _TextFieldtokens.tokens.placeholderColor, _TextFieldstyles.InputWrapper, _TextFieldtokens.tokens.borderColorFocus, String(_TextFieldtokens.tokens.borderColor), _TextFieldtokens.tokens.backgroundColorFocus, String(_TextFieldtokens.tokens.backgroundColor), _TextFieldstyles.InputPlaceholder, _TextFieldtokens.tokens.placeholderColorFocus, _TextFieldstyles.TitleCaption, _TextFieldtokens.tokens.titleCaptionColor, _TextFieldstyles.LeftHelper, _TextFieldtokens.tokens.leftHelperColor, _TextFieldstyles.StyledTextBefore, _TextFieldtokens.tokens.textBeforeColor, _TextFieldstyles.StyledTextAfter, _TextFieldtokens.tokens.textAfterColor, _TextFieldtokens.classes.hasDivider, _TextFieldstyles.InputWrapper, String(_TextFieldtokens.tokens.dividerColor), _TextFieldstyles.InputWrapper, _TextFieldtokens.tokens.dividerColorHover, String(_TextFieldtokens.tokens.dividerColor), _TextFieldstyles.InputWrapper, _TextFieldtokens.tokens.dividerColorFocus, String(_TextFieldtokens.tokens.dividerColor), _TextFieldstyles.InputPlaceholder, _TextFieldtokens.tokens.clearPlaceholderColorFocus);