@salutejs/plasma-new-hope 0.71.2-dev.0 → 0.72.0-canary.1160.8612911363.0

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

@@ -1,18 +1,26 @@
 import styled from 'styled-components';
-export var Input = /*#__PURE__*/styled.input.withConfig({
+import { classes, tokens } from './TextField.tokens';
+export var InputWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-0"
-})(["box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;"]);
+})(["position:relative;display:flex;align-items:center;box-sizing:border-box;"]);
 export var InputLabelWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-1"
-})(["", "{width:100%;}"], Input);
-
-// NOTE: border-width is used in size border-color is used in view
-export var InputWrapper = /*#__PURE__*/styled.div.withConfig({
+})(["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(", ");border-radius:var(", ");}"], /*#__PURE__*/String(classes.hasChips), tokens.chipHeight, tokens.chipBorderRadius);
+export var StyledChips = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-2"
-})(["position:relative;display:flex;align-items:center;box-shadow:inset 0 0 0 var(--plasma_private-textfield-border-width) var(--plasma_private-textfield-border-color);", "{flex-grow:1;}"], InputLabelWrapper);
-export var Label = /*#__PURE__*/styled.div.withConfig({
+})(["display:flex;gap:var(", ");margin-right:var(", ");user-select:none;"], tokens.chipGap, tokens.chipGap);
+export var Input = /*#__PURE__*/styled.input.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-3"
+})(["box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;flex:1;min-width:60%;"]);
+export var Label = /*#__PURE__*/styled.label.withConfig({
+  componentId: "plasma-new-hope__sc-g4vxbb-4"
 })([""]);
+export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-g4vxbb-5"
+})(["margin:var(", ");"], tokens.leftContentMargin);
+export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-g4vxbb-6"
+})(["margin:var(", ");"], tokens.rightContentMargin);
 export var LeftHelper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-g4vxbb-4"
+  componentId: "plasma-new-hope__sc-g4vxbb-7"
 })([""]);

package/styled-components/es/components/TextField/TextField.template-doc.mdx

@@ -110,3 +110,27 @@ export function App() {
     );
 }
 ```
+
+### Режим ввода
+С помощью свойства `enumarationType` можно вводить элементы как теги. 
+По нажатию Enter, после ввода нужного текста, он преобразуется в Chip:
+
+```tsx live
+import React from 'react';
+import { TextField } from '@salutejs/{{ package }};
+
+export function App() {
+    return (
+        <div>
+            <TextField
+                placeholder="Введите значение"
+                defaultValue="Значение"
+                size="l"
+                enumerationType="chip"
+                helperText="Подсказка снизу"
+                values={["Значение 1"]}
+            />
+        </div>
+    );
+}
+```

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

@@ -1,31 +1,42 @@
+export var classes = {
+  hasChips: 'has-chips',
+  hasEmptyContentLeft: 'has-empty-content-left',
+  hasEmptyContentRight: 'has-empty-content-right'
+};
 export var tokens = {
   color: '--plasma-textfield-color',
   backgroundColor: '--plasma-textfield-bg-color',
   backgroundColorHover: '--plasma-textfield-bg-color-hover',
   backgroundColorFocus: '--plasma-textfield-bg-color-focus',
-  /** Цвет каретки */
-  caretColor: '--plasma-textfield__caret-color',
-  placeholderColor: '--plasma-textfield__placeholder-color',
   borderColor: '--plasma-textfield-border-color',
   borderColorHover: '--plasma-textfield-border-color-hover',
   borderColorFocus: '--plasma-textfield-border-color-focus',
+  /** Цвета для read-only состояния */
+  colorReadOnly: '--plasma-textfield-color-readonly',
+  backgroundColorReadOnly: '--plasma-textfield-bg-color-readonly',
+  borderColorReadOnly: '--plasma-textfield-border-color-readonly',
+  placeholderColorReadOnly: '--plasma-textfield__placeholder-color-readonly',
+  /** Цвет каретки */
+  caretColor: '--plasma-textfield__caret-color',
+  placeholderColor: '--plasma-textfield__placeholder-color',
   height: '--plasma-textfield-height',
   borderWidth: '--plasmas-textfield-border-width',
   borderRadius: '--plasma-textfield-border-radius',
-  /** отступ от границы ТextField */
+  /** Отступ от границы ТextField */
   padding: '--plasma-textfield-padding',
-  paddingWithContent: '--plasma-textfield-padding-with-content',
-  /* Отступ между Иконками и текстом Инпута */
-  /* Отступ при отсутствии Иконок сохраняется */
-  contentOffset: '--plasma-textfield__content-offset',
+  paddingWithChips: '--plasma-textfield-padding-with-chips',
+  /* Токены для инпута */
+  leftContentMargin: '--plasma-textfield__left-content-margin',
+  rightContentMargin: '--plasma-textfield__right-content-margin',
   fontFamily: '--plasma-textfield-font-family',
   fontStyle: '--plasma-textfield-font-style',
   fontSize: '--plasma-textfield-font-size',
   fontWeight: '--plasma-textfield-font-weight',
   letterSpacing: '--plasma-textfield-letter-spacing',
   lineHeight: '--plasma-textfield-line-height',
-  /** Цвет подписи */
+  /** Токены лейбла */
   labelColor: '--plasma-textfield__label-color',
+  labelColorReadOnly: '--plasma-textfield__label-color-readonly',
   labelOffset: '--plasma-textfield__label-offset',
   labelFontFamily: '--plasma-textfield__label-font-family',
   labelFontStyle: '--plasma-textfield__label-font-style',
@@ -40,16 +51,52 @@ export var tokens = {
   labelInnerFontWeight: '--plasma-textfield-placement_inner__label-font-weight',
   labelInnerLetterSpacing: '--plasma-textfield-placement_inner__label-letter-spacing',
   labelInnerLineHeight: '--plasma-textfield-placement_inner__label-line-height',
-  leftHelperColor: '--plasma-textfield__leftHelper-color',
-  leftHelperOffset: '--plasma-textfield__leftHelper-offset',
-  leftHelperFontFamily: '--plasma-textfield__leftHelper-font-family',
-  leftHelperFontStyle: '--plasma-textfield__leftHelper-font-style',
-  leftHelperFontSize: '--plasma-textfield__leftHelper-font-size',
-  leftHelperFontWeight: '--plasma-textfield__leftHelper-font-weight',
-  leftHelperLetterSpacing: '--plasma-textfield__leftHelper-letter-spacing',
-  leftHelperLineHeight: '--plasma-textfield__leftHelper-line-height',
-  /* Дополнительный цвет который можно использовать в <Icon color="inheit" /> */
-  contentColor: '--plasma-textfield__content-color',
+  labelInnerPadding: '--plasma-textfield-placement_inner__label-padding',
+  contentLabelInnerPadding: '--plasma-textfield-placement_inner__content-padding',
+  leftHelperColor: '--plasma-textfield__left-helper-color',
+  leftHelperColorReadOnly: '--plasma-textfield__left-helper-color-readonly',
+  leftHelperOffset: '--plasma-textfield__left-helper-offset',
+  leftHelperFontFamily: '--plasma-textfield__left-helper-font-family',
+  leftHelperFontStyle: '--plasma-textfield__left-helper-font-style',
+  leftHelperFontSize: '--plasma-textfield__left-helper-font-size',
+  leftHelperFontWeight: '--plasma-textfield__left-helper-font-weight',
+  leftHelperLetterSpacing: '--plasma-textfield__left-helper-letter-spacing',
+  leftHelperLineHeight: '--plasma-textfield__left-helper-line-height',
   /** Прозрачность для всего компонента в состоянии disabled */
-  disabledOpacity: '--plasma-textfield-disabled-opacity'
+  disabledOpacity: '--plasma-textfield-disabled-opacity',
+  /** Токены чипа */
+  chipHeight: '--plasma-textfield__chip-height',
+  chipBorderRadius: '--plasma-textfield__chip-border-radius',
+  chipGap: '--plasma-textfield__chip-gap',
+  chipBackground: '--plasma-textfield__chip-background',
+  chipColor: '--plasma-textfield__chip-color',
+  chipBackgroundHover: '--plasma-textfield__chip-background-hover',
+  chipColorHover: '--plasma-textfield__chip-color-hover',
+  chipScaleHover: '--plasma-textfield__chip-scale-hover',
+  chipBackgroundReadOnly: '--plasma-textfield__chip-background-readonly',
+  chipColorReadOnly: '--plasma-textfield__chip-color-readonly',
+  chipBackgroundReadOnlyHover: '--plasma-textfield__chip-background-readonly-hover',
+  chipColorReadOnlyHover: '--plasma-textfield__chip-color-readonly-hover',
+  chipBackgroundActive: '--plasma-textfield__chip-background-active',
+  chipColorActive: '--plasma-textfield__chip-color-active',
+  chipScaleActive: '--plasma-textfield__chip-scale-active',
+  chipFocusColor: '--plasma-textfield__chip-focus-color',
+  chipCloseIconColor: '--plasma-textfield__chip-close-icon-color',
+  chipOutlineSize: '--plasma-textfield__chip-outline-size',
+  chipWidth: '--plasma-textfield__chip-width',
+  chipPaddingTop: '--plasma-textfield__chip-padding-top',
+  chipPaddingRight: '--plasma-textfield__chip-padding-right',
+  chipPaddingBottom: '--plasma-textfield__chip-padding-bottom',
+  chipPaddingLeft: '--plasma-textfield__chip-padding-left',
+  chipCloseIconSize: '--plasma-textfield__chip-close-icon-size',
+  chipFontFamily: '--plasma-textfield__chip-font-family',
+  chipFontSize: '--plasma-textfield__chip-font-size',
+  chipFontStyle: '--plasma-textfield__chip-font-style',
+  chipFontWeight: '--plasma-textfield__chip-font-weight',
+  chipLetterSpacing: '--plasma-textfield__chip-letter-spacing',
+  chipLineHeight: '--plasma-textfield__chip-line-height',
+  chipClearContentMarginLeft: '--plasma-textfield__chip-clear-content-margin-left',
+  chipClearContentMarginRight: '--plasma-textfield__chip-clear-content-margin-right',
+  chipOpacityReadonly: '--plasma-textfield__chip-opacity-readonly',
+  focusColor: '--plasma-textfield-focus-color'
 };

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

@@ -0,0 +1 @@
+export { useKeyNavigation } from './useKeyNavigation';

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

@@ -0,0 +1,131 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState } from 'react';
+export var Keys = {
+  Enter: 'Enter',
+  Tab: 'Tab',
+  Escape: 'Escape',
+  ArrowLeft: 'ArrowLeft',
+  ArrowRight: 'ArrowRight',
+  Backspace: 'Backspace'
+};
+export var useKeyNavigation = function useKeyNavigation(_ref) {
+  var _ref$controlledRefs = _ref.controlledRefs,
+    chipsRefs = _ref$controlledRefs.chipsRefs,
+    contentRef = _ref$controlledRefs.contentRef,
+    inputRef = _ref$controlledRefs.inputRef,
+    disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
+    chips = _ref.chips,
+    enumerationType = _ref.enumerationType,
+    updateChips = _ref.updateChips,
+    onChange = _ref.onChange,
+    onSearch = _ref.onSearch;
+  var _useState = useState(-1),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeChipIndex = _useState2[0],
+    setActiveChipIndex = _useState2[1];
+  var handleInputKeydown = function handleInputKeydown(event) {
+    var _inputRef$current;
+    var _ref2 = event.target,
+      value = _ref2.value;
+    if (disabled || readOnly) {
+      return;
+    }
+    if (event.key === Keys.Enter && enumerationType === 'chip' && value) {
+      var nextIndex = (chips === null || chips === void 0 ? void 0 : chips.length) || 0;
+      var newChips = [].concat(_toConsumableArray(chips), [{
+        id: "".concat(nextIndex, "_").concat(value),
+        text: value
+      }]);
+      var newValues = newChips.map(function (_ref3) {
+        var text = _ref3.text;
+        return text;
+      });
+      updateChips(newChips, newValues);
+      event.target.value = '';
+      onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    }
+    if (event.key === Keys.Enter && onSearch) {
+      onSearch(value, event);
+    }
+    if (event.key === Keys.Backspace && chips.length && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.selectionStart) === 0) {
+      var _newChips = _toConsumableArray(chips);
+      _newChips === null || _newChips === void 0 ? void 0 : _newChips.pop();
+      chipsRefs === null || chipsRefs === void 0 ? void 0 : chipsRefs.current.pop();
+      var _newValues = _newChips.map(function (_ref4) {
+        var text = _ref4.text;
+        return text;
+      });
+      updateChips(_newChips, _newValues);
+    }
+  };
+  var onChipClear = function onChipClear(clearId) {
+    if (!chips.length) {
+      return;
+    }
+    var newChips = (chips === null || chips === void 0 ? void 0 : chips.filter(function (_ref5) {
+      var chipId = _ref5.id;
+      return chipId !== clearId;
+    })) || [];
+    var newValues = newChips.map(function (_ref6) {
+      var text = _ref6.text;
+      return text;
+    });
+    updateChips(newChips, newValues);
+  };
+  var handleChipKeyDown = function handleChipKeyDown(event, chipId) {
+    if (event.key === Keys.Tab) {
+      event.preventDefault();
+    }
+    if (event.key === Keys.Backspace) {
+      onChipClear(chipId);
+    }
+  };
+  var handleContentKeyDown = function handleContentKeyDown(event) {
+    var _inputRef$current2, _focusedItem, _focusedItem2;
+    var chipsRefsCount = chips.length;
+    var currentCaretPosition = (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.selectionStart) || 0;
+    var newActiveChipIndex = activeChipIndex;
+    var focusedItem = null;
+    if (event.key === Keys.ArrowLeft && enumerationType === 'chip' && currentCaretPosition <= 0) {
+      var _chipsRefs$current;
+      var index = activeChipIndex - 1 <= 0 ? 0 : activeChipIndex - 1;
+      newActiveChipIndex = document.activeElement === (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) ? chipsRefsCount - 1 : index;
+      focusedItem = (_chipsRefs$current = chipsRefs.current) === null || _chipsRefs$current === void 0 ? void 0 : _chipsRefs$current[newActiveChipIndex];
+    }
+    if (event.key === Keys.ArrowRight && enumerationType === 'chip' && document.activeElement !== (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)) {
+      var _chipsRefs$current2;
+      var _index = activeChipIndex + 1 >= chipsRefsCount ? activeChipIndex : activeChipIndex + 1;
+      newActiveChipIndex = document.activeElement === (contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) ? 0 : _index;
+      focusedItem = _index === activeChipIndex ? inputRef === null || inputRef === void 0 ? void 0 : inputRef.current : (_chipsRefs$current2 = chipsRefs.current) === null || _chipsRefs$current2 === void 0 ? void 0 : _chipsRefs$current2[newActiveChipIndex];
+    }
+    if (event.key === Keys.Backspace && document.activeElement !== (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)) {
+      var _chipsRefs$current3;
+      var _index2 = activeChipIndex - 1 <= 0 ? 0 : activeChipIndex - 1;
+      newActiveChipIndex = chipsRefsCount === 0 ? -1 : _index2;
+      focusedItem = chipsRefsCount === 0 ? inputRef === null || inputRef === void 0 ? void 0 : inputRef.current : chipsRefs === null || chipsRefs === void 0 ? void 0 : (_chipsRefs$current3 = chipsRefs.current) === null || _chipsRefs$current3 === void 0 ? void 0 : _chipsRefs$current3[newActiveChipIndex];
+    }
+    (_focusedItem = focusedItem) === null || _focusedItem === void 0 ? void 0 : _focusedItem.focus();
+    (_focusedItem2 = focusedItem) === null || _focusedItem2 === void 0 ? void 0 : _focusedItem2.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center',
+      inline: 'center'
+    });
+    setActiveChipIndex(newActiveChipIndex);
+  };
+  return {
+    handleInputKeydown: handleInputKeydown,
+    handleChipKeyDown: handleChipKeyDown,
+    onChipClear: onChipClear,
+    handleContentKeyDown: handleContentKeyDown
+  };
+};

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

@@ -1,4 +1,4 @@
-export { labelPlacement_inner as textField_labelPlacement_inner } from './_label-placement/inner';
-export { labelPlacement_outer as textField_labelPlacement_outer } from './_label-placement/outer';
+export { labelPlacement_inner as textField_labelPlacement_inner } from './variations/_label-placement/inner';
+export { labelPlacement_outer as textField_labelPlacement_outer } from './variations/_label-placement/outer';
 export { textFieldRoot, textFieldConfig } from './TextField';
 export { tokens as textFieldTokens } from './TextField.tokens';

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

@@ -0,0 +1,30 @@
+import React, { forwardRef } from 'react';
+import { StyledChip } from './TextFieldChip.styles';
+/**
+ * Чип, отображающий выбранный элемент
+ */
+export var TextFieldChip = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var chipId = _ref.chipId,
+    text = _ref.text,
+    disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
+    onClick = _ref.onClick,
+    onClear = _ref.onClear,
+    onKeyDown = _ref.onKeyDown;
+  var onClearHandle = function onClearHandle() {
+    return onClear(chipId);
+  };
+  var onKeyDownHandle = function onKeyDownHandle(event) {
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event, chipId);
+  };
+  return /*#__PURE__*/React.createElement(StyledChip, {
+    ref: ref,
+    tabIndex: -1,
+    disabled: disabled,
+    readOnly: readOnly,
+    onClick: onClick,
+    onClear: onClearHandle,
+    onKeyDown: onKeyDownHandle,
+    text: "".concat(text)
+  });
+});

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

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import { chipConfig, chipTokens } from '../../../Chip';
+import { component, mergeConfig } from '../../../../engines';
+import { tokens } from '../../TextField.tokens';
+import { addFocus } from '../../../../mixins';
+
+// issue #823
+var mergedConfig = /*#__PURE__*/mergeConfig(chipConfig);
+var Chip = /*#__PURE__*/component(mergedConfig);
+
+// NOTE: Необходимое переопределение токенов из компонента Chip т.к. используются его части
+export var StyledChip = /*#__PURE__*/styled(Chip).withConfig({
+  componentId: "plasma-new-hope__sc-1mypbcr-0"
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");scroll-snap-align:center;scroll-snap-stop:normal;", " &[readonly]{opacity:var(", ");}"], chipTokens.color, tokens.chipColor, chipTokens.background, tokens.chipBackground, chipTokens.colorHover, tokens.chipColorHover, chipTokens.backgroundHover, tokens.chipBackgroundHover, chipTokens.colorActive, tokens.chipColorActive, chipTokens.backgroundActive, tokens.chipBackgroundActive, chipTokens.backgroundReadOnly, tokens.chipBackgroundReadOnly, chipTokens.colorReadOnly, tokens.chipColorReadOnly, chipTokens.backgroundReadOnlyHover, tokens.chipBackgroundReadOnlyHover, chipTokens.colorReadOnlyHover, tokens.chipColorReadOnlyHover, chipTokens.borderRadius, tokens.chipBorderRadius, chipTokens.width, tokens.chipWidth, chipTokens.height, tokens.chipHeight, chipTokens.paddingRight, tokens.chipPaddingRight, chipTokens.paddingLeft, tokens.chipPaddingLeft, chipTokens.fontFamily, tokens.chipFontFamily, chipTokens.fontSize, tokens.chipFontSize, chipTokens.fontStyle, tokens.chipFontStyle, chipTokens.fontWeight, tokens.chipFontWeight, chipTokens.letterSpacing, tokens.chipLetterSpacing, chipTokens.lineHeight, tokens.chipLineHeight, chipTokens.clearContentMarginLeft, tokens.chipClearContentMarginLeft, chipTokens.clearContentMarginRight, tokens.chipClearContentMarginRight, chipTokens.scaleHover, tokens.chipScaleHover, chipTokens.scaleActive, tokens.chipScaleActive, chipTokens.closeIconSize, tokens.chipCloseIconSize, chipTokens.closeIconColor, tokens.chipCloseIconColor, chipTokens.focusColor, tokens.focusColor, /*#__PURE__*/addFocus({
+  outlineOffset: '0.0625rem',
+  outlineSize: '0.0625rem',
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.chipBorderRadius, ") - 0.1rem)"),
+  outlineColor: /*#__PURE__*/"var(".concat(tokens.focusColor, ")")
+}), tokens.chipOpacityReadonly);

package/styled-components/es/components/TextField/ui/TextFieldChip/TextFieldChip.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export { TextFieldChip } from './TextFieldChip/TextFieldChip';

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

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { tokens } from '../../TextField.tokens';
+import { Input } from '../../TextField.styles';
+export var base = /*#__PURE__*/css(["&[disabled]{opacity:var(", ");cursor:not-allowed;", "{cursor:not-allowed;min-width:unset;}}"], tokens.disabledOpacity, Input);

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

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { Input, Label } from '../../TextField.styles';
+import { tokens } from '../../TextField.tokens';
+export var labelPlacement_inner = /*#__PURE__*/css(["", "{padding:var(", ");}", ":focus ~ ", ",", ":not(:placeholder-shown) ~ ", "{height:auto;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ":not(:focus)::placeholder{color:transparent;}", ":focus::placeholder{color:transparent;}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;transition:padding 0.1s ease-in-out,height 0s;height:var(", ");padding-top:calc(var(", ") / 4);padding-bottom:calc(var(", ") / 4);}"], Input, tokens.contentLabelInnerPadding, Input, Label, Input, Label, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, Input, Input, Label, tokens.placeholderColor, tokens.height, tokens.height, tokens.height);

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

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { Label } from '../../TextField.styles';
+import { tokens } from '../../TextField.tokens';
+export var labelPlacement_outer = /*#__PURE__*/css(["", "{display:block;margin-bottom:var(", ");color:var(", ");}"], Label, tokens.labelOffset, tokens.labelColor);

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

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { tokens } from '../../TextField.tokens';
+import { Input, InputWrapper, Label, LeftHelper } from '../../TextField.styles';
+export var base = /*#__PURE__*/css(["&[readonly]{", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}", ":hover{background-color:var(", ");}", "::placeholder{color:var(", ");}", "{color:var(", ");cursor:default;min-width:unset;}", "{color:var(", ");}", "{color:var(", ");}}"], InputWrapper, tokens.colorReadOnly, /*#__PURE__*/String(tokens.backgroundColorReadOnly), /*#__PURE__*/String(tokens.borderWidth), /*#__PURE__*/String(tokens.borderColorReadOnly), InputWrapper, tokens.backgroundColorReadOnly, Input, tokens.placeholderColorReadOnly, Input, tokens.colorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly, Label, tokens.labelColorReadOnly);

package/styled-components/es/components/TextField/variations/_read-only/tokens.json

@@ -0,0 +1 @@
+[]

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

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { classes, tokens } from '../../TextField.tokens';
+import { Input, InputWrapper, Label, LeftHelper } from '../../TextField.styles';
+export var base = /*#__PURE__*/css(["", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{height:var(", ");border-radius:var(", ");padding:var(", ");&.", "{padding-top:var(", ");padding-bottom:var(", ");}&.", "{padding-left:var(", ");}&.", "{padding-right:var(", ");}}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin-top:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], Input, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, InputWrapper, tokens.height, tokens.borderRadius, tokens.padding, classes.hasChips, tokens.paddingWithChips, tokens.paddingWithChips, classes.hasEmptyContentLeft, tokens.paddingWithChips, classes.hasEmptyContentRight, tokens.paddingWithChips, Label, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight);

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

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { tokens } from '../../TextField.tokens';
+import { Input, InputWrapper, LeftHelper } from '../../TextField.styles';
+export var base = /*#__PURE__*/css(["", "{--plasma_private-textfield-border-color:var(", ");--plasma_private-textfield-bg-color:var(", ");color:var(", ");background-color:var(--plasma_private-textfield-bg-color);box-shadow:inset 0 0 0 var(", ") var(--plasma_private-textfield-border-color);caret-color:var(", ");transition:background-color 0.1s ease-in,color 0.1s ease-in,box-shadow 0.1s ease-in;}", ":hover{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", ":focus-within{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", "::placeholder{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}"], InputWrapper, /*#__PURE__*/String(tokens.borderColor), /*#__PURE__*/String(tokens.backgroundColor), tokens.color, tokens.borderWidth, tokens.caretColor, InputWrapper, tokens.borderColorHover, /*#__PURE__*/String(tokens.borderColor), tokens.backgroundColorHover, /*#__PURE__*/String(tokens.backgroundColor), InputWrapper, tokens.borderColorFocus, /*#__PURE__*/String(tokens.borderColor), tokens.backgroundColorFocus, /*#__PURE__*/String(tokens.backgroundColor), Input, tokens.placeholderColor, Input, tokens.color, LeftHelper, tokens.leftHelperColor);

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

@@ -0,0 +1,37 @@
+import { css } from 'styled-components';
+import { textFieldTokens as tokens, textField_labelPlacement_inner as labelPlacement_inner, textField_labelPlacement_outer as labelPlacement_outer } from '../../../../components/TextField';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'l',
+    labelPlacement: 'outer'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":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);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
+      // TODO заменить --surface-transparent-positive на корректный токен
+      positive: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":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);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
+      // // TODO заменить --surface-transparent-warning на корректный токен
+      warning: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":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);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
+      // // TODO заменить --surface-transparent-negative на корректный токен
+      negative: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":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);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor)
+    },
+    size: {
+      l: /*#__PURE__*/css(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
+      m: /*#__PURE__*/css(["", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem 0 0.125rem 0;", ":1.375rem 0 0.375rem 0;", ":0.25rem;", ":0.375rem;", ":auto;", ":2.25rem;", ":0.625rem;", ":0.875rem;", ":0.5rem;", ":0rem;", ":1.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
+      s: /*#__PURE__*/css(["", ":2.5rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":0.375rem;", ":0.625rem;", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.25rem;", ":auto;", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":0.375rem;", ":0rem;", ":1rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
+      xs: /*#__PURE__*/css(["", ":2rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":0.375rem;", ":0.5rem;", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.125rem;", ":auto;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight)
+    },
+    labelPlacement: {
+      inner: [labelPlacement_inner, /*#__PURE__*/css(["&.", "{", ":var(--plasma-input-label-color,var(--plasma-input-placeholder-color,var(--plasma-colors-secondary)));", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);}"], labelPlacement_inner, tokens.placeholderColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight)],
+      outer: [labelPlacement_outer, /*#__PURE__*/css(["&.", "{}"], labelPlacement_outer)]
+    },
+    disabled: {
+      "true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
+    },
+    // TODO заменить --surface-transparent-primary на корректный токен
+    readOnly: {
+      "true": /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);"], tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.leftHelperColorReadOnly, tokens.labelColorReadOnly)
+    }
+  }
+};

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

@@ -0,0 +1,5 @@
+import { component, mergeConfig } from '../../../../engines';
+import { textFieldConfig } from '../../../../components/TextField';
+import { config } from './TextField.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(textFieldConfig, config);
+export var TextField = /*#__PURE__*/component(mergedConfig);