@salutejs/plasma-new-hope 0.271.0-dev.0 → 0.272.0-canary.1770.13398571521.0

package/styled-components/cjs/components/_Icon/Icons/IconChevronLeft.js

@@ -7,18 +7,23 @@ exports.IconChevronLeft = void 0;
 var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
 var _ChevronLeft = /*#__PURE__*/require("../Icon.assets/ChevronLeft");
 var _IconRoot = /*#__PURE__*/require("../IconRoot");
+var _excluded = ["size", "color", "className", "sizeCustomProperty"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var IconChevronLeft = exports.IconChevronLeft = function IconChevronLeft(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 's' : _ref$size,
     color = _ref.color,
     className = _ref.className,
-    sizeCustomProperty = _ref.sizeCustomProperty;
-  return /*#__PURE__*/_react["default"].createElement(_IconRoot.IconRoot, {
+    sizeCustomProperty = _ref.sizeCustomProperty,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_IconRoot.IconRoot, _extends({
     className: className,
     size: size,
     color: color,
     icon: _ChevronLeft.ChevronLeft,
     sizeCustomProperty: sizeCustomProperty
-  });
+  }, rest));
 };

package/styled-components/cjs/components/_Icon/Icons/IconLock.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconLock = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _Lock = /*#__PURE__*/require("../Icon.assets/Lock");
+var _IconRoot = /*#__PURE__*/require("../IconRoot");
+var _excluded = ["size", "color", "className", "sizeCustomValue"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var IconLock = exports.IconLock = function IconLock(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
+    color = _ref.color,
+    className = _ref.className,
+    sizeCustomValue = _ref.sizeCustomValue,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_IconRoot.IconRoot, _extends({
+    className: className,
+    sizeCustomValue: sizeCustomValue,
+    size: size,
+    color: color,
+    icon: _Lock.Lock
+  }, rest));
+};

package/styled-components/cjs/components/_Icon/index.js

@@ -159,6 +159,12 @@ Object.defineProperty(exports, "IconInfoCircleOutline", {
     return _IconInfoCircleOutline.IconInfoCircleOutline;
   }
 });
+Object.defineProperty(exports, "IconLock", {
+  enumerable: true,
+  get: function get() {
+    return _IconLock.IconLock;
+  }
+});
 Object.defineProperty(exports, "IconMic", {
   enumerable: true,
   get: function get() {
@@ -244,6 +250,7 @@ var _IconDisclosureRightWithOffset = /*#__PURE__*/require("./Icons/IconDisclosur
 var _IconDisclosureDownFill = /*#__PURE__*/require("./Icons/IconDisclosureDownFill");
 var _IconDisclosureDownWithOffset = /*#__PURE__*/require("./Icons/IconDisclosureDownWithOffset");
 var _IconDisclosureUpWithOffset = /*#__PURE__*/require("./Icons/IconDisclosureUpWithOffset");
+var _IconLock = /*#__PURE__*/require("./Icons/IconLock");
 var _IconMic = /*#__PURE__*/require("./Icons/IconMic");
 var _IconChevronLeft = /*#__PURE__*/require("./Icons/IconChevronLeft");
 var _IconChevronDoubleLeft = /*#__PURE__*/require("./Icons/IconChevronDoubleLeft");

package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentProps, useEffect, useRef, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
+import { disableProps, IconPlaceholder } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
 import { IconButton } from '../IconButton/IconButton';

package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.config.js

@@ -25,7 +25,7 @@ var config = exports.config = {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Range.rangeTokens.disabledOpacity)
     },
     readOnly: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Range.rangeTokens.backgroundReadOnly, _Range.rangeTokens.labelColorReadOnly, _Range.rangeTokens.leftHelperColorReadOnly, _Range.rangeTokens.dividerColorReadOnly, _Range.rangeTokens.textFieldColorReadOnly, _Range.rangeTokens.textFieldBackgroundColorReadOnly, _Range.rangeTokens.textFieldPlaceholderColorReadOnly)
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":0.4;", ":0.4;", ":var(--text-primary);", ":transparent;", ":var(--text-secondary);"], _Range.rangeTokens.backgroundReadOnly, _Range.rangeTokens.labelColorReadOnly, _Range.rangeTokens.leftHelperColorReadOnly, _Range.rangeTokens.dividerColorReadOnly, _Range.rangeTokens.dividerOpacityReadOnly, _Range.rangeTokens.rightContentOpacityReadOnly, _Range.rangeTokens.textFieldColorReadOnly, _Range.rangeTokens.textFieldBackgroundColorReadOnly, _Range.rangeTokens.textFieldPlaceholderColorReadOnly)
     }
   }
 };

package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.stories.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, ComponentProps, Dispatch, SetStateAction, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
+import { disableProps, IconPlaceholder } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
 import { IconChevronLeft } from '../../../../components/_Icon';
@@ -45,7 +45,10 @@ const meta: Meta<typeof Range> = {
             control: {
                 type: 'select',
             },
-            if: { arg: 'required', truthy: true },
+            if: {
+                arg: 'required',
+                truthy: true,
+            },
         },
         ...disableProps(['view']),
     },
@@ -76,10 +79,14 @@ const getSizeForIcon = (size) => {
     return size;
 };
 
-const ActionButton = ({ size }) => {
+const ActionButton = ({ size, readOnly }) => {
     return (
-        <IconButton view="clear" size={size}>
-            <IconChevronLeft color="inherit" size={getSizeForIcon(size)} />
+        <IconButton view="clear" size={size} disabled={readOnly}>
+            <IconChevronLeft
+                color={readOnly ? 'var(--text-secondary)' : 'inherit'}
+                size={getSizeForIcon(size)}
+                style={{ transform: 'rotate(180deg)' }}
+            />
         </IconButton>
     );
 };
@@ -115,7 +122,7 @@ const StoryDefault = ({
             firstValue={firstValue}
             secondValue={secondValue}
             contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
-            contentRight={enableContentRight ? <ActionButton size={size} /> : undefined}
+            contentRight={enableContentRight ? <ActionButton size={size} readOnly={rest.readOnly} /> : undefined}
             firstTextfieldContentLeft={
                 enableFirstTextfieldContentLeft ? <IconPlaceholder size={iconSize} /> : undefined
             }
@@ -266,7 +273,7 @@ const StoryDemo = ({ enableContentLeft, enableContentRight, size, ...rest }: Sto
             firstValueSuccess={firstValueSuccess}
             secondValueSuccess={secondValueSuccess}
             contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
-            contentRight={enableContentRight ? <ActionButton size={size} /> : undefined}
+            contentRight={enableContentRight ? <ActionButton size={size} readOnly={rest.readOnly} /> : undefined}
             onChangeFirstValue={(e) => {
                 handleChangeValue(
                     e,

package/styled-components/cjs/examples/plasma_b2c/components/TextArea/TextArea.config.js

@@ -35,6 +35,9 @@ var config = exports.config = {
     clear: {
       "true": /*#__PURE__*/(0, _styledComponents.css)([""])
     },
+    readOnly: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-transparent-primary);", ":var(--text-primary);"], _TextArea.textAreaTokens.readOnlyOpacity, _TextArea.textAreaTokens.backgroundColorReadOnly, _TextArea.textAreaTokens.inputColorReadOnly)
+    },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-secondary);"], _TextArea.textAreaTokens.disabledOpacity, _TextArea.textAreaTokens.inputColorDisabled, _TextArea.textAreaTokens.dividerColorReadOnly, _TextArea.textAreaTokens.titleCaptionColorReadOnly)
     }

package/styled-components/cjs/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx

@@ -8,6 +8,7 @@ import { textAreaConfig } from '../../../../components/TextArea';
 import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 import type { PopoverPlacement } from '../Popover/Popover';
+import { IconLock } from '../../../../components/_Icon';
 
 import { config } from './TextArea.config';
 import { TextArea } from './TextArea';
@@ -38,6 +39,16 @@ const placements: Array<PopoverPlacement> = [
     'auto',
 ];
 
+const getIcon = (IconComponent: React.ReactElement, size: string, readOnly = false) => {
+    const iconSize = size === 'xs' ? 'xs' : 's';
+
+    if (readOnly) {
+        return <IconLock size={iconSize} color="var(--text-secondary)" style={{ opacity: 0.4 }} />;
+    }
+
+    return <IconComponent size={iconSize} color="inherit" />;
+};
+
 type StoryTextAreaPropsCustom = {
     hasHint?: boolean;
     enableContentRight?: boolean;
@@ -61,19 +72,25 @@ const meta: Meta<StoryTextAreaProps> = {
             control: {
                 type: 'boolean',
             },
-            if: { arg: 'optional', truthy: false },
+            if: {
+                arg: 'optional',
+                truthy: false,
+            },
         },
         optional: {
             control: {
                 type: 'boolean',
             },
-            if: { arg: 'required', truthy: false },
+            if: {
+                arg: 'required',
+                truthy: false,
+            },
         },
         size: {
             options: sizes,
             defaultValue: 'm',
             control: {
-                type: 'select',
+                type: 'inline-radio',
             },
         },
         view: {
@@ -92,19 +109,28 @@ const meta: Meta<StoryTextAreaProps> = {
             control: {
                 type: 'boolean',
             },
-            if: { arg: 'clear', truthy: true },
+            if: {
+                arg: 'clear',
+                truthy: true,
+            },
         },
         cols: {
             control: {
                 type: 'number',
             },
-            if: { arg: 'clear', truthy: false },
+            if: {
+                arg: 'clear',
+                truthy: false,
+            },
         },
         rows: {
             control: {
                 type: 'number',
             },
-            if: { arg: 'clear', truthy: false },
+            if: {
+                arg: 'clear',
+                truthy: false,
+            },
         },
         hasHint: {
             control: {
@@ -113,47 +139,65 @@ const meta: Meta<StoryTextAreaProps> = {
         },
         hintText: {
             control: { type: 'text' },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         hintView: {
             options: hintViews,
             control: {
                 type: 'select',
             },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         hintSize: {
             options: hintSizes,
             control: {
                 type: 'select',
             },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         hintTrigger: {
             options: hintTriggers,
             control: {
                 type: 'inline-radio',
             },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         hintPlacement: {
             options: placements,
             control: {
                 type: 'select',
             },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
             mappers: placements,
         },
         hintHasArrow: {
             control: { type: 'boolean' },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         hintWidth: {
             control: { type: 'text' },
-            if: { arg: 'hasHint', truthy: true },
-        },
-        helperText: {
-            control: { type: 'text' },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         width: {
             control: { type: 'text' },
@@ -172,6 +216,7 @@ const meta: Meta<StoryTextAreaProps> = {
         },
         ...disableProps([
             'helperBlock',
+            'helperText',
             '$isFocused',
             'contentRight',
             'autoComplete',
@@ -195,6 +240,7 @@ const meta: Meta<StoryTextAreaProps> = {
             'hintOffset',
             'hintContentLeft',
             'hintView',
+            'hintOpened',
         ]),
     },
     args: {
@@ -238,19 +284,24 @@ const onBlur = action('onBlur');
 const StoryDefault = (props: StoryTextAreaProps) => {
     const [value, setValue] = useState('Значение поля');
 
-    const iconSize = props.size === 'xs' ? 'xs' : 's';
-
     return (
         <TextArea
             value={value}
-            contentRight={props.enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
+            contentRight={
+                props.enableContentRight || props.readOnly
+                    ? getIcon(IconPlaceholder, props.size, props.readOnly)
+                    : undefined
+            }
             onChange={(e) => {
                 setValue(e.target.value);
                 onChange(e);
             }}
             onFocus={onFocus}
             onBlur={onBlur}
-            style={{ width: '70%', margin: '0 auto' }}
+            style={{
+                width: '70%',
+                margin: '0 auto',
+            }}
             {...props}
         />
     );

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

@@ -33,12 +33,12 @@ var config = exports.config = {
       "true": /*#__PURE__*/(0, _styledComponents.css)([""])
     },
     chipView: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":0.72;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
-      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":0.72;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
-      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":0.72;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
-      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":0.72;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
-      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":0.72;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
-      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":0.72;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":1;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
+      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":1;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":1;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":1;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":1;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":1;"], _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipOpacityReadonly)
     },
     hintView: {
       "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-solid-card-brightness);", ":var(--shadow-down-hard-m,0px 4px 12px 0px rgba(0,0,0,0.16),0px 1px 4px 0px rgba(0,0,0,0.08));", ":var(--text-primary);", ":var(--surface-solid-card);"], _TextField.textFieldTokens.tooltipBackgroundColor, _TextField.textFieldTokens.tooltipBoxShadow, _TextField.textFieldTokens.tooltipColor, _TextField.textFieldTokens.tooltipArrowBackground)
@@ -51,7 +51,7 @@ var config = exports.config = {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _TextField.textFieldTokens.disabledOpacity)
     },
     readOnly: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-primary);"], _TextField.textFieldTokens.colorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _TextField.textFieldTokens.leftHelperColorReadOnly, _TextField.textFieldTokens.titleCaptionColorReadOnly, _TextField.textFieldTokens.labelColorReadOnly, _TextField.textFieldTokens.dividerColorReadOnly)
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-primary);"], _TextField.textFieldTokens.readOnlyOpacity, _TextField.textFieldTokens.colorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _TextField.textFieldTokens.leftHelperColorReadOnly, _TextField.textFieldTokens.titleCaptionColorReadOnly, _TextField.textFieldTokens.labelColorReadOnly, _TextField.textFieldTokens.dividerColorReadOnly)
     }
   }
 };