@salutejs/plasma-new-hope 0.157.0-canary.1464.11120816324.0 → 0.157.1-canary.1374.11123970444.0

package/styled-components/es/components/Tabs/ui/vertical/VerticalTabs/variations/_disabled/tokens.json

@@ -0,0 +1,4 @@
+{
+    "type": "boolean",
+    "tokens": ["--plasma-tabs-disabled-opacity"]
+}

package/styled-components/es/components/Tabs/ui/vertical/VerticalTabs/variations/_size/base.js

@@ -0,0 +1,3 @@
+import { css } from 'styled-components';
+import { tokens } from '../../../../../tokens';
+export var base = /*#__PURE__*/css(["width:var(", ");height:var(", ");--plasma_private-outline-radius:var(", ");border-radius:var(", ");"], tokens.tabsWidth, tokens.tabsHeight, tokens.tabsBorderRadius, tokens.tabsBorderRadius);

package/styled-components/es/components/Tabs/ui/vertical/VerticalTabs/variations/_size/tokens.json

@@ -0,0 +1 @@
+["--plasma-tabs-width", "--plasma-tabs-height", "--plasma-tabs-border-radius"]

package/styled-components/es/components/Tabs/ui/vertical/VerticalTabs/variations/_view/base.js

@@ -0,0 +1,3 @@
+import { css } from 'styled-components';
+import { classes, tokens } from '../../../../../tokens';
+export var base = /*#__PURE__*/css(["background-color:var(", ");&::after{content:'';position:absolute;top:0.125rem;bottom:0.125rem;left:0;background:var(", ");width:var(", ");border-radius:var(", ");}&.", "{&::after{top:1.5rem;}}&.", "{&::after{bottom:1.5rem;}}&.", "{&::after{width:0;}}"], tokens.tabsBackgroundColor, tokens.tabsDividerColor, tokens.tabsDividerWidth, tokens.tabsDividerBorderRadius, classes.tabsHasTopArrow, classes.tabsHasBottomArrow, classes.tabsNoDivider);

package/styled-components/es/components/Tabs/ui/vertical/VerticalTabs/variations/_view/tokens.json

@@ -0,0 +1 @@
+["--plasma-tabs-background-color", "--plasma-tabs-divider-height", "--plasma-tabs-divider-color"]

package/styled-components/es/components/Tabs/ui/vertical/VerticalTabsContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export var VerticalTabsContext = /*#__PURE__*/createContext(null);

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

@@ -21,7 +21,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { forwardRef, useState, createRef, useCallback } from 'react';
 import { css } from 'styled-components';
 import { useResizeObserver } from '@salutejs/plasma-core';
-import { cx, mergeRefs } from '../../utils';
+import { cx } from '../../utils';
 import { applyDynamicLabel } from './mixins';
 import { useAutoResize, ROOT_FONT_SIZE } from './hooks';
 import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, StyledLabel, StyledPlaceholder, StyledTextArea, StyledTextAreaWrapper, StyledContainer, StyledIndicator, StyledOptionalText } from './TextArea.styles';
@@ -118,7 +118,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
       _useState6 = _slicedToArray(_useState5, 2),
       uncontrolledValue = _useState6[0],
       setUncontrolledValue = _useState6[1];
-    var outerRef = /*#__PURE__*/createRef();
+    var outerRef = innerRef && 'current' in innerRef ? innerRef : /*#__PURE__*/createRef();
     var innerOptional = required ? false : optional;
     var hasHelper = Boolean(leftHelper || rightHelper || helperText);
     var hasOuterLabel = Boolean(label && labelPlacement === 'outer');
@@ -190,7 +190,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
       hasContentRight: Boolean(contentRight),
       hasHelper: hasHelper,
       applyCustomWidth: applyCustomWidth,
-      ref: mergeRefs(outerRef, innerRef),
+      ref: outerRef,
       disabled: disabled,
       height: autoResize ? minAuto : height,
       width: width,

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

@@ -1,4 +1,4 @@
-var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "view", "size", "readOnly", "disabled", "required", "optional", "value", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
+var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "view", "size", "readOnly", "disabled", "required", "clear", "optional", "hasDivider", "value", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
 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 _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."); }
@@ -14,6 +14,7 @@ import { css } from 'styled-components';
 import { cx } from '../../utils';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
+import { base as clearCSS } from './variations/_clear/base';
 import { base as disabledCSS } from './variations/_disabled/base';
 import { base as readOnlyCSS } from './variations/_read-only/base';
 import { base as labelPlacementCSS } from './variations/_label-placement/base';
@@ -49,7 +50,10 @@ export var textFieldRoot = function textFieldRoot(Root) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$required = _ref.required,
       required = _ref$required === void 0 ? false : _ref$required,
+      _ref$clear = _ref.clear,
+      clear = _ref$clear === void 0 ? false : _ref$clear,
       optional = _ref.optional,
+      hasDivider = _ref.hasDivider,
       outerValue = _ref.value,
       values = _ref.chips,
       onChange = _ref.onChange,
@@ -78,6 +82,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
     var innerId = id || uniqId;
     var labelId = safeUseId();
     var helperTextId = safeUseId();
+    var isDefaultView = view === 'default' || readOnly || disabled;
     var isChipEnumeration = enumerationType === 'chip';
     var isChipsVisible = isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length);
     var withHasChips = isChipsVisible ? classes.hasChips : undefined;
@@ -89,6 +94,8 @@ export var textFieldRoot = function textFieldRoot(Root) {
     var innerLabelPlacementValue = labelPlacement === 'inner' && !hasInnerLabel ? undefined : labelPlacement;
     var innerPlaceholderValue = hasPlaceholder ? placeholder : undefined;
     var placeholderShown = Boolean(innerPlaceholderValue) && !hasValue;
+    var clearClass = clear ? classes.clear : undefined;
+    var hasDividerClass = hasDivider ? classes.hasDivider : undefined;
     var requiredPlacementClass = requiredPlacement === 'right' ? 'align-right ' : undefined;
     var labelPlacementClass = innerLabelPlacementValue ? classes["".concat(innerLabelPlacementValue, "LabelPlacement")] : undefined;
     var hasValueClass = hasValue ? classes.hasValue : undefined;
@@ -180,9 +187,10 @@ export var textFieldRoot = function textFieldRoot(Root) {
       size: size,
       disabled: disabled,
       readOnly: !disabled && readOnly,
+      clear: clear,
       labelPlacement: innerLabelPlacementValue,
       onClick: handleInputFocus,
-      className: cx(labelPlacementClass, classes.textFieldGroupItem, className),
+      className: cx(labelPlacementClass, clearClass, hasDividerClass, classes.textFieldGroupItem, className),
       style: style
     }, hasOuterLabel && /*#__PURE__*/React.createElement(Label, {
       id: labelId,
@@ -196,7 +204,10 @@ export var textFieldRoot = function textFieldRoot(Root) {
       className: cx(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent)
     }, !hasOuterLabel && required && /*#__PURE__*/React.createElement(StyledIndicator, {
       className: cx(classes.innerLabelPlacement, requiredPlacementClass)
-    }), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(InputLabelWrapper, {
+    }), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, {
+      isClear: clear,
+      isDefaultView: isDefaultView
+    }, contentLeft), /*#__PURE__*/React.createElement(InputLabelWrapper, {
       tabIndex: -1,
       ref: contentRef,
       onKeyDown: handleContentKeyDown,
@@ -255,6 +266,10 @@ export var textFieldConfig = {
     size: {
       css: sizeCSS
     },
+    clear: {
+      css: clearCSS,
+      attrs: true
+    },
     disabled: {
       css: disabledCSS,
       attrs: true

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

@@ -23,13 +23,17 @@ export var Label = /*#__PURE__*/styled.label.withConfig({
 })(["position:relative;display:inline-flex;"]);
 var StyledContentSlot = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-7"
-})(["color:var(", ");line-height:0;"], tokens.contentSlotColor);
+})(["color:", ";line-height:0;"], function (_ref) {
+  var isDefaultView = _ref.isDefaultView,
+    isClear = _ref.isClear;
+  return !isDefaultView && isClear ? "var(".concat(tokens.clearColor, ")") : "var(".concat(tokens.contentSlotColor, ")");
+});
 export var StyledContentLeft = /*#__PURE__*/styled(StyledContentSlot).withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-8"
 })(["margin:var(", ");"], tokens.leftContentMargin);
-export var StyledContentRight = /*#__PURE__*/styled(StyledContentSlot).withConfig({
+export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-9"
-})(["margin:var(", ");color:var(", ",var(", "));&:hover{color:var(", ");color:var(", ",var(", "));cursor:pointer;}&:active{color:var(", ",var(", "));}"], tokens.rightContentMargin, tokens.contentSlotRightColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotRightColorHover, tokens.contentSlotColorHover, tokens.contentSlotRightColorActive, tokens.contentSlotColorActive);
+})(["line-height:0;margin:var(", ");color:var(", ",var(", "));&:hover{color:var(", ");color:var(", ",var(", "));cursor:pointer;}&:active{color:var(", ",var(", "));}"], tokens.rightContentMargin, tokens.contentSlotRightColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotRightColorHover, tokens.contentSlotColorHover, tokens.contentSlotRightColorActive, tokens.contentSlotColorActive);
 export var LeftHelper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-10"
 })([""]);
@@ -44,7 +48,4 @@ export var StyledOptionalText = /*#__PURE__*/styled.span.withConfig({
 })(["color:var(", ");"], tokens.optionalColor);
 export var StyledIndicator = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-14"
-})(["position:absolute;border-radius:50%;background-color:var(", ");&.", "{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}&.", "{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}"], tokens.indicatorColor, classes.outerLabelPlacement, tokens.indicatorSizeOuter, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementOuterRight, classes.innerLabelPlacement, tokens.indicatorSizeInner, tokens.indicatorSizeInner, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementInnerRight);
-export var InputHidden = /*#__PURE__*/styled.input.withConfig({
-  componentId: "plasma-new-hope__sc-g4vxbb-15"
-})(["visibility:hidden;width:0;height:0;opacity:0;margin:0;padding:0;border:none;"]);
+})(["position:absolute;border-radius:50%;background-color:var(", ");&.", "{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}&.", "{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}"], tokens.indicatorColor, classes.outerLabelPlacement, tokens.indicatorSizeOuter, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementOuterRight, classes.innerLabelPlacement, tokens.indicatorSizeInner, tokens.indicatorSizeInner, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementInnerRight);

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

@@ -62,7 +62,9 @@ export function App() {
 ```
 
 ### Статус поля
-Статус поля задается с помощью свойства `status`. Возможные значения свойства: `success`, `warning` и `error`:
+Статус поля задается с помощью свойства `status`. 
+Возможные значения свойства: `success`, `warning` и `error`.
+На отображение TextField так же влияют свойства `clear` и `hasDivider`:
 
 ```tsx live
 import React from 'react';
@@ -70,22 +72,53 @@ import { TextField } from '@salutejs/{{ package }}';
 
 export function App() {
     return (
-        <div>
-            <TextField
-                placeholder="Статус"
-                status="success"
-                defaultValue="Успех"
-            />
-            <TextField
-                placeholder="Статус"
-                status="warning"
-                defaultValue="Успех"
-            />
-            <TextField
-                placeholder="Статус"
-                status="error"
-                defaultValue="Ошибка"
-            />
+        <div style=\{{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+            <div style=\{{ display: "flex", gap: "0.5rem" }}>
+                <TextField
+                    placeholder="Статус"
+                    status="success"
+                    size="m"
+                    defaultValue="Успех"
+                />
+                <TextField
+                    placeholder="Статус"
+                    status="warning"
+                    size="m"
+                    defaultValue="Предупреждение"
+                />
+                <TextField
+                    placeholder="Статус"
+                    status="error"
+                    size="m"
+                    defaultValue="Ошибка"
+                />
+            </div>
+            <div style=\{{ display: "flex", gap: "0.5rem" }}>
+                <TextField
+                    placeholder="Статус"
+                    status="success"
+                    size="m"
+                    defaultValue="Успех"
+                    clear
+                    hasDivider
+                />
+                <TextField
+                    placeholder="Статус"
+                    status="warning"
+                    size="m"
+                    defaultValue="Предупреждение"
+                    clear
+                    hasDivider
+                />
+                <TextField
+                    placeholder="Статус"
+                    status="error"
+                    size="m"
+                    defaultValue="Ошибка"
+                    clear
+                    hasDivider
+                />
+            </div>
         </div>
     );
 }

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

@@ -6,24 +6,34 @@ export var classes = {
   innerLabelPlacement: 'label-placement-inner',
   outerLabelPlacement: 'label-placement-outer',
   hideLabel: 'hide-label',
+  clear: 'textfield-clear',
+  hasDivider: 'textfield-has-divider',
   textFieldGroupItem: 'text-field-group-item'
 };
 export var tokens = {
   color: '--plasma-textfield-color',
+  clearColor: '--plasma-textfield-clear-color',
   backgroundColor: '--plasma-textfield-bg-color',
   backgroundColorHover: '--plasma-textfield-bg-color-hover',
   backgroundColorFocus: '--plasma-textfield-bg-color-focus',
   borderColor: '--plasma-textfield-border-color',
   borderColorHover: '--plasma-textfield-border-color-hover',
   borderColorFocus: '--plasma-textfield-border-color-focus',
+  dividerColor: '--plasma-textfield-divider-color',
+  dividerColorHover: '--plasma-textfield-divider-color-hover',
+  dividerColorFocus: '--plasma-textfield-divider-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',
+  dividerColorReadOnly: '--plasma-textfield-divider-color-readonly',
   /** Цвет каретки */
   caretColor: '--plasma-textfield__caret-color',
   placeholderColor: '--plasma-textfield__placeholder-color',
+  placeholderColorFocus: '--plasma-textfield__placeholder-color-focus',
+  clearPlaceholderColor: '--plasma-textfield__clear-placeholder-color',
+  clearPlaceholderColorFocus: '--plasma-textfield__clear-placeholder-color-focus',
   optionalColor: '--plasma-textfield__optional-color',
   height: '--plasma-textfield-height',
   borderWidth: '--plasma-textfield-border-width',
@@ -51,6 +61,7 @@ export var tokens = {
   labelColor: '--plasma-textfield__label-color',
   labelColorReadOnly: '--plasma-textfield__label-color-readonly',
   labelOffset: '--plasma-textfield__label-offset',
+  clearLabelOffset: '--plasma-textfield__clear-label-offset',
   labelFontFamily: '--plasma-textfield__label-font-family',
   labelFontStyle: '--plasma-textfield__label-font-style',
   labelFontSize: '--plasma-textfield__label-font-size',
@@ -123,5 +134,7 @@ export var tokens = {
   indicatorLabelPlacementInner: '--plasma-textfield__indicator-placement-inner',
   indicatorLabelPlacementOuter: '--plasma-textfield__indicator-placement-outer',
   indicatorLabelPlacementInnerRight: '--plasma-textfield__indicator-placement-inner-right',
-  indicatorLabelPlacementOuterRight: '--plasma-textfield__indicator-placement-outer-right'
+  indicatorLabelPlacementOuterRight: '--plasma-textfield__indicator-placement-outer-right',
+  clearIndicatorLabelPlacementInner: '--plasma-textfield__clear-indicator-placement-inner',
+  clearIndicatorLabelPlacementInnerRight: '--plasma-textfield__clear-indicator-placement-inner-right'
 };

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

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

package/styled-components/es/components/TextField/variations/_clear/tokens.json

@@ -0,0 +1,10 @@
+{
+    "type": "boolean",
+    "tokens": [
+        "--plasma-textfield__clear-label-offset",
+        "--plasma-textfield-divider-color",
+        "--plasma-textfield-divider-color-hover",
+        "--plasma-textfield-divider-color-focus",
+        "--plasma-textfield-clear-color"
+    ]
+}

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

@@ -1,4 +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);
+export var base = /*#__PURE__*/css(["&[disabled]{pointer-events:none;opacity:var(", ");cursor:not-allowed;", "{cursor:not-allowed;min-width:unset;}}"], tokens.disabledOpacity, Input);

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

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../TextField.tokens';
 import { Input, InputContainer, Label, StyledTextAfter, StyledTextBefore } from '../../TextField.styles';
-export var base = /*#__PURE__*/css(["&.", "{", "{position:relative;display:inline-block;margin-bottom:var(", ");color:var(", ");}}&.", "{", "{padding:var(", ");}", ",", "{padding:var(", ");}", ":focus ~ ", ",", ".", " ~ ", "{align-items:flex-start;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;height:var(", ");padding-top:calc(calc(var(", ") - var(", ")) / 2);padding-bottom:calc(calc(var(", ") - var(", ")) / 2);}}"], classes.outerLabelPlacement, Label, tokens.labelOffset, tokens.labelColor, classes.innerLabelPlacement, InputContainer, tokens.contentLabelInnerPadding, StyledTextAfter, StyledTextBefore, tokens.contentLabelInnerPadding, Input, Label, Input, classes.hasValue, Label, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, Label, tokens.placeholderColor, tokens.height, tokens.height, tokens.labelLineHeight, tokens.height, tokens.labelLineHeight);
+export var base = /*#__PURE__*/css(["&.", "{", "{position:relative;display:inline-block;margin-bottom:var(", ");color:var(", ");}}&.", "{", "{padding:var(", ");}", ",", "{padding:var(", ");}", ":focus ~ ", ",", ".", " ~ ", "{color:var(", ");align-items:flex-start;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;height:var(", ");padding-top:calc(calc(var(", ") - var(", ")) / 2);padding-bottom:calc(calc(var(", ") - var(", ")) / 2);}&.", " ", "{color:var(", ");}}"], classes.outerLabelPlacement, Label, tokens.labelOffset, tokens.labelColor, classes.innerLabelPlacement, InputContainer, tokens.contentLabelInnerPadding, StyledTextAfter, StyledTextBefore, tokens.contentLabelInnerPadding, Input, Label, Input, classes.hasValue, Label, tokens.placeholderColor, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, Label, tokens.placeholderColor, tokens.height, tokens.height, tokens.labelLineHeight, tokens.height, tokens.labelLineHeight, classes.clear, Label, tokens.clearPlaceholderColor);

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

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
-import { tokens } from '../../TextField.tokens';
+import { classes, tokens } from '../../TextField.tokens';
 import { Input, InputPlaceholder, 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(", ");}", "{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, InputPlaceholder, tokens.placeholderColorReadOnly, Input, tokens.colorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly, Label, tokens.labelColorReadOnly);
+export var base = /*#__PURE__*/css(["&[readonly]{", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}&.", " ", "{&:before{background-color:var(", ");}}", ":hover{background-color:var(", ");}", ":focus-within ", ",", "{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), classes.hasDivider, InputWrapper, /*#__PURE__*/String(tokens.dividerColorReadOnly), InputWrapper, tokens.backgroundColorReadOnly, InputWrapper, InputPlaceholder, InputPlaceholder, tokens.placeholderColorReadOnly, Input, tokens.colorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly, classes.outerLabelPlacement, Label, tokens.labelColorReadOnly);

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

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { tokens } from '../../TextField.tokens';
 import { Input, InputPlaceholder, InputWrapper, LeftHelper, StyledTextAfter, StyledTextBefore } 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(", ") );}", "{color:var(", ");}", "{color:var(", ");}", "{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), InputPlaceholder, tokens.placeholderColor, Input, tokens.color, LeftHelper, tokens.leftHelperColor, StyledTextBefore, tokens.textBeforeColor, StyledTextAfter, tokens.textAfterColor);
+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(", ") );}", "{color:var(", ");}", "{color:var(", ");}", ":focus-within{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );", "{color:var(", ");}}", "{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), Input, tokens.color, InputPlaceholder, tokens.placeholderColor, InputWrapper, tokens.borderColorFocus, /*#__PURE__*/String(tokens.borderColor), tokens.backgroundColorFocus, /*#__PURE__*/String(tokens.backgroundColor), InputPlaceholder, tokens.placeholderColorFocus, LeftHelper, tokens.leftHelperColor, StyledTextBefore, tokens.textBeforeColor, StyledTextAfter, tokens.textAfterColor);

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

@@ -8,9 +8,9 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--surface-solid-card);", ":0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--text-primary);"], tokens.textFieldColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.background, tokens.boxShadow, tokens.itemBackground, tokens.itemBackgroundHover, tokens.itemColor, tokens.focusColor, tokens.infiniteLoaderSpinnerColor),
-      positive: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-accent);", ":var(--surface-solid-card);", ":0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--text-primary);"], tokens.textFieldColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.background, tokens.boxShadow, tokens.itemBackground, tokens.itemBackgroundHover, tokens.itemColor, tokens.focusColor, tokens.infiniteLoaderSpinnerColor),
-      warning: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-accent);", ":var(--surface-solid-card);", ":0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--text-primary);"], tokens.textFieldColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.background, tokens.boxShadow, tokens.itemBackground, tokens.itemBackgroundHover, tokens.itemColor, tokens.focusColor, tokens.infiniteLoaderSpinnerColor),
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-tertiary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--surface-solid-card);", ":0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--text-primary);"], tokens.textFieldColor, tokens.textFieldPlaceholderColorFocus, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.background, tokens.boxShadow, tokens.itemBackground, tokens.itemBackgroundHover, tokens.itemColor, tokens.focusColor, tokens.infiniteLoaderSpinnerColor),
+      positive: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--text-tertiary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-accent);", ":var(--surface-solid-card);", ":0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--text-primary);"], tokens.textFieldColor, tokens.textFieldPlaceholderColorFocus, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.background, tokens.boxShadow, tokens.itemBackground, tokens.itemBackgroundHover, tokens.itemColor, tokens.focusColor, tokens.infiniteLoaderSpinnerColor),
+      warning: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--text-tertiary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-accent);", ":var(--surface-solid-card);", ":0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--text-primary);"], tokens.textFieldColor, tokens.textFieldPlaceholderColorFocus, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.background, tokens.boxShadow, tokens.itemBackground, tokens.itemBackgroundHover, tokens.itemColor, tokens.focusColor, tokens.infiniteLoaderSpinnerColor),
       negative: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-accent);", ":var(--surface-solid-card);", ":0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--text-primary);"], tokens.textFieldColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.background, tokens.boxShadow, tokens.itemBackground, tokens.itemBackgroundHover, tokens.itemColor, tokens.focusColor, tokens.infiniteLoaderSpinnerColor)
     },
     size: {

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

@@ -8,10 +8,10 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":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;"], tokens.textFieldColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldChipCloseIconColor, tokens.textFieldChipColor, tokens.textFieldChipBackground, tokens.textFieldChipColorHover, tokens.textFieldChipBackgroundHover, tokens.textFieldChipColorActive, tokens.textFieldChipBackgroundActive, tokens.textFieldChipBackgroundReadOnly, tokens.textFieldChipColorReadOnly, tokens.textFieldChipBackgroundReadOnlyHover, tokens.textFieldChipColorReadOnlyHover, tokens.textFieldChipOpacityReadonly),
-      positive: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-accent);", ":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;"], tokens.textFieldColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldChipCloseIconColor, tokens.textFieldChipColor, tokens.textFieldChipBackground, tokens.textFieldChipColorHover, tokens.textFieldChipBackgroundHover, tokens.textFieldChipColorActive, tokens.textFieldChipBackgroundActive, tokens.textFieldChipBackgroundReadOnly, tokens.textFieldChipColorReadOnly, tokens.textFieldChipBackgroundReadOnlyHover, tokens.textFieldChipColorReadOnlyHover, tokens.textFieldChipOpacityReadonly),
-      warning: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-accent);", ":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;"], tokens.textFieldColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldChipCloseIconColor, tokens.textFieldChipColor, tokens.textFieldChipBackground, tokens.textFieldChipColorHover, tokens.textFieldChipBackgroundHover, tokens.textFieldChipColorActive, tokens.textFieldChipBackgroundActive, tokens.textFieldChipBackgroundReadOnly, tokens.textFieldChipColorReadOnly, tokens.textFieldChipBackgroundReadOnlyHover, tokens.textFieldChipColorReadOnlyHover, tokens.textFieldChipOpacityReadonly),
-      negative: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);$", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-accent);", ":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;"], tokens.textFieldColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldChipCloseIconColor, tokens.textFieldChipColor, tokens.textFieldChipBackground, tokens.textFieldChipColorHover, tokens.textFieldChipBackgroundHover, tokens.textFieldChipColorActive, tokens.textFieldChipBackgroundActive, tokens.textFieldChipBackgroundReadOnly, tokens.textFieldChipColorReadOnly, tokens.textFieldChipBackgroundReadOnlyHover, tokens.textFieldChipColorReadOnlyHover, tokens.textFieldChipOpacityReadonly)
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-tertiary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":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;"], tokens.textFieldColor, tokens.textFieldPlaceholderColorFocus, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldChipCloseIconColor, tokens.textFieldChipColor, tokens.textFieldChipBackground, tokens.textFieldChipColorHover, tokens.textFieldChipBackgroundHover, tokens.textFieldChipColorActive, tokens.textFieldChipBackgroundActive, tokens.textFieldChipBackgroundReadOnly, tokens.textFieldChipColorReadOnly, tokens.textFieldChipBackgroundReadOnlyHover, tokens.textFieldChipColorReadOnlyHover, tokens.textFieldChipOpacityReadonly),
+      positive: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--text-tertiary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-accent);", ":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;"], tokens.textFieldColor, tokens.textFieldPlaceholderColorFocus, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldChipCloseIconColor, tokens.textFieldChipColor, tokens.textFieldChipBackground, tokens.textFieldChipColorHover, tokens.textFieldChipBackgroundHover, tokens.textFieldChipColorActive, tokens.textFieldChipBackgroundActive, tokens.textFieldChipBackgroundReadOnly, tokens.textFieldChipColorReadOnly, tokens.textFieldChipBackgroundReadOnlyHover, tokens.textFieldChipColorReadOnlyHover, tokens.textFieldChipOpacityReadonly),
+      warning: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--text-tertiary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-accent);", ":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;"], tokens.textFieldColor, tokens.textFieldPlaceholderColorFocus, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldChipCloseIconColor, tokens.textFieldChipColor, tokens.textFieldChipBackground, tokens.textFieldChipColorHover, tokens.textFieldChipBackgroundHover, tokens.textFieldChipColorActive, tokens.textFieldChipBackgroundActive, tokens.textFieldChipBackgroundReadOnly, tokens.textFieldChipColorReadOnly, tokens.textFieldChipBackgroundReadOnlyHover, tokens.textFieldChipColorReadOnlyHover, tokens.textFieldChipOpacityReadonly),
+      negative: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--text-tertiary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-accent);", ":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;"], tokens.textFieldColor, tokens.textFieldPlaceholderColorFocus, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldChipCloseIconColor, tokens.textFieldChipColor, tokens.textFieldChipBackground, tokens.textFieldChipColorHover, tokens.textFieldChipBackgroundHover, tokens.textFieldChipColorActive, tokens.textFieldChipBackgroundActive, tokens.textFieldChipBackgroundReadOnly, tokens.textFieldChipColorReadOnly, tokens.textFieldChipBackgroundReadOnlyHover, tokens.textFieldChipColorReadOnlyHover, tokens.textFieldChipOpacityReadonly)
     },
     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;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":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);", ":1rem;", ":0.125rem;", ":0.875rem;", ":1.5rem;", ":1rem 1rem 1rem 0.875rem;", ":0.75rem 1rem 0.75rem 0.875rem;", ":0.75rem;", ":0 0.5rem 0 0;", ":1.5rem;", ":1.5rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":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);", ":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);", ":1.25rem;", ":1.25rem;", ":0.375rem;", ":0.375rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":0.375rem;"], tokens.textFieldHeight, tokens.textFieldPadding, tokens.textFieldPaddingWithChips, tokens.textFieldBorderRadius, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.textFieldFontFamily, tokens.textFieldFontSize, tokens.textFieldFontStyle, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.textFieldLabelOffset, tokens.textFieldLabelFontFamily, tokens.textFieldLabelFontSize, tokens.textFieldLabelFontStyle, tokens.textFieldLabelFontWeight, tokens.textFieldLabelLetterSpacing, tokens.textFieldLabelLineHeight, tokens.textFieldLeftHelperOffset, tokens.textFieldLeftHelperFontFamily, tokens.textFieldLeftHelperFontSize, tokens.textFieldLeftHelperFontStyle, tokens.textFieldLeftHelperFontWeight, tokens.textFieldLeftHelperLetterSpacing, tokens.textFieldLeftHelperLineHeight, tokens.textFieldLabelInnerPadding, tokens.textFieldContentLabelInnerPadding, tokens.textFieldChipGap, tokens.textFieldChipBorderRadius, tokens.textFieldChipWidth, tokens.textFieldChipHeight, tokens.textFieldChipPaddingRight, tokens.textFieldChipPaddingLeft, tokens.textFieldChipClearContentMarginLeft, tokens.textFieldChipClearContentMarginRight, tokens.textFieldChipCloseIconSize, tokens.textFieldChipFontFamily, tokens.textFieldChipFontSize, tokens.textFieldChipFontStyle, tokens.textFieldChipFontWeight, tokens.textFieldChipLetterSpacing, tokens.textFieldChipLineHeight, tokens.emptyStatePadding, tokens.padding, tokens.borderRadius, tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemBorderRadius, tokens.itemIconMargin, tokens.itemIconSize, tokens.itemIconSizeTight, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, tokens.checkboxTriggerSize, tokens.checkboxTriggerSizeTight, tokens.checkboxTriggerBorderRadius, tokens.checkboxTriggerBorderRadiusTight, tokens.checkboxFillColor, tokens.checkboxIconColor, tokens.checkboxTriggerBorderColor, tokens.indicatorSize),

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

@@ -7,7 +7,7 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":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);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);", ":var(--shadow-down-soft-s);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-card);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":transparent;", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-accent);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-accent);", ":var(--surface-solid-default);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--surface-accent);"], tokens.background, tokens.backgroundError, tokens.backgroundSuccess, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.focusColor, tokens.calendarShadow, tokens.calendarSeparatorBackground, tokens.calendarBackgroundColor, tokens.calendarSelectedItemBackground, tokens.calendarSelectedItemColor, tokens.calendarSelectableItemBackgroundHover, tokens.calendarCurrentItemBorderColor, tokens.calendarCurrentItemBackgroundHover, tokens.calendarCurrentItemColorHover, tokens.calendarCurrentItemChildBackgroundHover, tokens.calendarActiveItemBackground, tokens.calendarActiveItemColor, tokens.calendarHoveredItemBackground, tokens.calendarHoveredItemColor, tokens.calendarRangeBackground, tokens.calendarOutlineFocusColor, tokens.calendarContentPrimaryColor, tokens.calendarContentSecondaryColor, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorHover, tokens.iconButtonBackgroundColorHover, tokens.iconButtonColorActive, tokens.iconButtonBackgroundColorActive, tokens.iconButtonFocusColor)
+      "default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":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);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);", ":var(--text-tertiary);", ":var(--shadow-down-soft-s);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-card);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":transparent;", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-accent);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-accent);", ":var(--surface-solid-default);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--surface-accent);"], tokens.background, tokens.backgroundError, tokens.backgroundSuccess, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.focusColor, tokens.textFieldPlaceholderColorFocus, tokens.calendarShadow, tokens.calendarSeparatorBackground, tokens.calendarBackgroundColor, tokens.calendarSelectedItemBackground, tokens.calendarSelectedItemColor, tokens.calendarSelectableItemBackgroundHover, tokens.calendarCurrentItemBorderColor, tokens.calendarCurrentItemBackgroundHover, tokens.calendarCurrentItemColorHover, tokens.calendarCurrentItemChildBackgroundHover, tokens.calendarActiveItemBackground, tokens.calendarActiveItemColor, tokens.calendarHoveredItemBackground, tokens.calendarHoveredItemColor, tokens.calendarRangeBackground, tokens.calendarOutlineFocusColor, tokens.calendarContentPrimaryColor, tokens.calendarContentSecondaryColor, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorHover, tokens.iconButtonBackgroundColorHover, tokens.iconButtonColorActive, tokens.iconButtonBackgroundColorActive, tokens.iconButtonFocusColor)
     },
     size: {
       l: /*#__PURE__*/css(["", ":26.5rem;", ":0.875rem;", ":0 0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0 0 0 1rem;", ":0;", ":0 0 0.75rem 0;", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":3.5rem;", ":0.875rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0.875rem;", ":26.5rem;", ":0.5rem 1rem 1.125rem 1rem;", ":0.75rem;", ":7.8125rem;", ":5.25rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem 1rem 1.125rem 1rem;", ":0.75rem;", ":7.8125rem;", ":5.25rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem 0.5rem 0 0.5rem;", ":0.75rem;", ":11.75rem;", ":10.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-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem 1rem 1.125rem 1rem;", ":0.75rem;", ":3.5rem;", ":3rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.875rem 1rem 0 1rem;", ":0.5rem;", ":0 0 0 1rem;", ":0.5rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-bold-font-weight);", ":3.5rem;", ":3.5rem;", ":1.5rem;", ":0.875rem;"], tokens.width, tokens.borderRadius, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontStyle, tokens.dividerFontSize, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontStyle, tokens.leftHelperFontSize, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.calendarBorderRadius, tokens.calendarWidth, tokens.calendarYearsPadding, tokens.calendarYearItemBorderRadius, tokens.calendarYearItemWidth, tokens.calendarYearItemHeight, tokens.calendarYearFontFamily, tokens.calendarYearFontSize, tokens.calendarYearFontStyle, tokens.calendarYearFontLetterSpacing, tokens.calendarYearFontLineHeight, tokens.calendarYearFontWeight, tokens.calendarYearSelectedFontWeight, tokens.calendarMonthsPadding, tokens.calendarMonthItemBorderRadius, tokens.calendarMonthItemWidth, tokens.calendarMonthItemHeight, tokens.calendarMonthFontFamily, tokens.calendarMonthFontSize, tokens.calendarMonthFontStyle, tokens.calendarMonthFontLetterSpacing, tokens.calendarMonthFontLineHeight, tokens.calendarMonthFontWeight, tokens.calendarMonthSelectedFontWeight, tokens.calendarQuartersPadding, tokens.calendarQuarterItemBorderRadius, tokens.calendarQuarterItemWidth, tokens.calendarQuarterItemHeight, tokens.calendarQuarterFontFamily, tokens.calendarQuarterFontSize, tokens.calendarQuarterFontStyle, tokens.calendarQuarterFontLetterSpacing, tokens.calendarQuarterFontLineHeight, tokens.calendarQuarterFontWeight, tokens.calendarQuarterSelectedFontWeight, tokens.calendarDaysPadding, tokens.calendarDayItemBorderRadius, tokens.calendarDayItemWidth, tokens.calendarDayItemHeight, tokens.calendarDayFontFamily, tokens.calendarDayFontSize, tokens.calendarDayFontStyle, tokens.calendarDayFontLetterSpacing, tokens.calendarDayFontLineHeight, tokens.calendarDayFontWeight, tokens.calendarDaySelectedFontWeight, tokens.calendarHeaderWrapperPadding, tokens.calendarHeaderArrowGap, tokens.calendarHeaderPadding, tokens.calendarHeaderDateGap, tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, tokens.calendarHeaderFontWeight, tokens.calendarHeaderFontWeightBold, tokens.iconButtonHeight, tokens.iconButtonWidth, tokens.iconButtonPadding, tokens.iconButtonRadius),

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

@@ -7,7 +7,7 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);"], tokens.background, tokens.backgroundError, tokens.backgroundSuccess, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.focusColor)
+      "default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);", ":var(--text-tertiary);"], tokens.background, tokens.backgroundError, tokens.backgroundSuccess, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.focusColor, tokens.textFieldPlaceholderColorFocus)
     },
     size: {
       l: /*#__PURE__*/css(["", ":0.875rem;", ":0 0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0 0 0 1rem;", ":0;", ":0 0 0.75rem 0;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":3.5rem;", ":0.875rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], tokens.borderRadius, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontStyle, tokens.dividerFontSize, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontStyle, tokens.leftHelperFontSize, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin),

package/styled-components/es/examples/plasma_b2c/components/Tabs/TabItem.js

@@ -1,5 +1,15 @@
-import { tabItemConfig } from '../../../../components/Tabs';
+import React from 'react';
+import { horizontalTabItemConfig, verticalTabItemConfig } from '../../../../components/Tabs';
 import { component, mergeConfig } from '../../../../engines';
-import { config } from './TabItem.config';
-var mergedConfig = /*#__PURE__*/mergeConfig(tabItemConfig, config);
-export var TabItem = /*#__PURE__*/component(mergedConfig);
+import { config as horizontalConfig } from './horizontal/HorizontalTabItem.config';
+import { config as verticalConfig } from './vertical/VerticalTabItem.config';
+var mergedHorizontalTabItemConfig = /*#__PURE__*/mergeConfig(horizontalTabItemConfig, horizontalConfig);
+var HorizontalTabItem = /*#__PURE__*/component(mergedHorizontalTabItemConfig);
+var mergedVerticalTabItemConfig = /*#__PURE__*/mergeConfig(verticalTabItemConfig, verticalConfig);
+var VerticalTabItem = /*#__PURE__*/component(mergedVerticalTabItemConfig);
+export var TabItem = function TabItem(props) {
+  if (props.orientation === 'vertical') {
+    return /*#__PURE__*/React.createElement(VerticalTabItem, props);
+  }
+  return /*#__PURE__*/React.createElement(HorizontalTabItem, props);
+};

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

@@ -1,5 +1,17 @@
-import { tabsConfig } from '../../../../components/Tabs';
+import React from 'react';
+import { horizontalTabsConfig, verticalTabsConfig, VerticalTabsContext } from '../../../../components/Tabs';
 import { component, mergeConfig } from '../../../../engines';
-import { config } from './Tabs.config';
-var mergedConfig = /*#__PURE__*/mergeConfig(tabsConfig, config);
-export var Tabs = /*#__PURE__*/component(mergedConfig);
+import { config as horizontalConfig } from './horizontal/HorizontalTabs.config';
+import { config as verticalConfig } from './vertical/VerticalTabs.config';
+var mergedHorizontalTabsConfig = /*#__PURE__*/mergeConfig(horizontalTabsConfig, horizontalConfig);
+var mergedVerticalTabsConfig = /*#__PURE__*/mergeConfig(verticalTabsConfig, verticalConfig);
+var HorizontalTabs = /*#__PURE__*/component(mergedHorizontalTabsConfig);
+var VerticalTabs = /*#__PURE__*/component(mergedVerticalTabsConfig);
+export var Tabs = function Tabs(props) {
+  if (props.orientation === 'vertical') {
+    return /*#__PURE__*/React.createElement(VerticalTabsContext.Provider, {
+      value: props.contentLeft
+    }, /*#__PURE__*/React.createElement(VerticalTabs, props));
+  }
+  return /*#__PURE__*/React.createElement(HorizontalTabs, props);
+};