@salutejs/plasma-new-hope 0.175.0-canary.1500.11549138907.0 → 0.175.0-dev.0

package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js

@@ -12,7 +12,7 @@ var _templateObject;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    box-sizing: border-box;\n    align-items: center;\n    white-space: nowrap;\n\n    gap: var(", ");\n    padding: var(", ");\n\n    appearance: none;\n    border: none;\n    outline: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    ", ";\n"])), _tokens.tokens.itemContentGap, _tokens.tokens.itemPaddingOrientationVertical, /*#__PURE__*/(0, _mixins.addFocus)({
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    box-sizing: border-box;\n    align-items: center;\n\n    gap: var(", ");\n    padding: var(", ");\n\n    appearance: none;\n    border: none;\n    outline: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    ", ";\n"])), _tokens.tokens.itemContentGap, _tokens.tokens.itemPaddingOrientationVertical, /*#__PURE__*/(0, _mixins.addFocus)({
   outlineSize: '0.063rem',
   outlineOffset: '-0.125rem',
   outlineColor: /*#__PURE__*/"var(".concat(_tokens.tokens.outlineFocusColor, ")"),
@@ -24,7 +24,7 @@ var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["defa
 })(["display:inline-block;width:fit-content;padding:0 var(", ",var(", "));"], _tokens.tokens.itemContentPaddingClear, _tokens.tokens.itemContentPadding);
 var TabItemValue = exports.TabItemValue = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   componentId: "plasma-new-hope__sc-1pflgj8-1"
-})(["white-space:nowrap;color:var(", ");"], _tokens.tokens.itemValueColor);
+})(["color:var(", ");"], _tokens.tokens.itemValueColor);
 var RightContent = exports.RightContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1pflgj8-2"
 })(["display:flex;color:inherit;&:hover{color:inherit;}"]);

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

@@ -35,9 +35,6 @@ var config = exports.config = {
     },
     clear: {
       "true": /*#__PURE__*/(0, _styledComponents.css)([""])
-    },
-    truncate: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)([""])
     }
   }
 };

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

@@ -31,9 +31,6 @@ const meta: Meta<typeof Badge> = {
             control: { type: 'boolean' },
             if: { arg: 'clear', truthy: false },
         },
-        maxWidth: {
-            control: { type: 'text' },
-        },
         ...disableProps(['contentLeft', 'contentRight']),
     },
 };
@@ -67,7 +64,7 @@ export const Default: Story = {
         },
     },
     args: {
-        text: 'Hello Kitty',
+        text: 'Hello',
         view: 'default',
         size: 'm',
         enableContentLeft: false,
@@ -75,7 +72,6 @@ export const Default: Story = {
         clear: false,
         pilled: false,
         transparent: false,
-        maxWidth: '',
     },
     render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
         const iconSize = size === 'l' ? '1rem' : '0.75rem';

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

@@ -14,22 +14,22 @@ var config = exports.config = {
   },
   variations: {
     size: {
-      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":0.5rem;", ":0.125rem;", ":1rem;", ":0.5rem 0.5rem 0.5rem 0.375rem;", ":0.25rem 0.5rem 0.25rem 0.375rem;", ":0.375rem;", ":1rem;", ":1rem;", ":0 0.25rem 0 0;", ":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.875rem;", ":0.875rem;", ":0.25rem;", ":0.25rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":0.375rem;", ":0.25rem;", ":0.125rem;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0.75rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.375rem;", ":2rem;", ":0.75rem 0 0.75rem;", ":0.5rem 0 0.625rem;", ":0.5rem 0 0.25rem;", ":0.375rem;", ":0;", ":0.25rem;", ":1rem;", ":1rem;"], _.selectTokens.padding, _.selectTokens.borderRadius, _.selectTokens.focusOffset, _.selectTokens.itemHeight, _.selectTokens.itemPadding, _.selectTokens.itemPaddingTight, _.selectTokens.itemBorderRadius, _.selectTokens.itemIconSize, _.selectTokens.itemIconSizeTight, _.selectTokens.itemIconMargin, _.selectTokens.fontFamily, _.selectTokens.fontSize, _.selectTokens.fontStyle, _.selectTokens.fontWeight, _.selectTokens.fontLetterSpacing, _.selectTokens.fontLineHeight, _.selectTokens.checkboxTriggerSize, _.selectTokens.checkboxTriggerSizeTight, _.selectTokens.checkboxTriggerBorderRadius, _.selectTokens.checkboxTriggerBorderRadiusTight, _.selectTokens.checkboxFillColor, _.selectTokens.checkboxIconColor, _.selectTokens.checkboxTriggerBorderColor, _.selectTokens.indicatorSize, _.selectTokens.chipGap, _.selectTokens.chipBorderRadius, _.selectTokens.chipHeight, _.selectTokens.chipPaddingRight, _.selectTokens.chipPaddingLeft, _.selectTokens.chipClearContentMarginLeft, _.selectTokens.chipClearContentMarginRight, _.selectTokens.chipCloseIconSize, _.selectTokens.targetButtonArrowMargin, _.selectTokens.targetTextfieldArrowMargin, _.selectTokens.targetHeight, _.selectTokens.targetButtonPadding, _.selectTokens.targetTextfieldPadding, _.selectTokens.targetTextfieldChipPadding, _.selectTokens.labelOffset, _.selectTokens.innerLabelGap, _.selectTokens.helperTextOffset, _.selectTokens.spinnerSize, _.selectTokens.spinnerSizeTight),
-      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":0.625rem;", ":0.125rem;", ":1.5rem;", ":0.5rem 0.75rem 0.5rem 0.675rem;", ":0.25rem 0.75rem 0.25rem 0.675rem;", ":0.5rem;", ":1.5rem;", ":1rem;", ":0 0.375rem 0 0;", ":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);", ":1.25rem;", ":0.875rem;", ":0.375rem;", ":0.25rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":0.375rem;", ":0rem;", ":0.75rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.375rem;", ":2.5rem;", ":1rem 0 1rem;", ":0.75rem 0 0.875rem;", ":0.75rem 0 0.25rem;", ":0.5rem;", ":0;", ":0.25rem;", ":1.5rem;", ":1rem;"], _.selectTokens.padding, _.selectTokens.borderRadius, _.selectTokens.focusOffset, _.selectTokens.itemHeight, _.selectTokens.itemPadding, _.selectTokens.itemPaddingTight, _.selectTokens.itemBorderRadius, _.selectTokens.itemIconSize, _.selectTokens.itemIconSizeTight, _.selectTokens.itemIconMargin, _.selectTokens.fontFamily, _.selectTokens.fontSize, _.selectTokens.fontStyle, _.selectTokens.fontWeight, _.selectTokens.fontLetterSpacing, _.selectTokens.fontLineHeight, _.selectTokens.checkboxTriggerSize, _.selectTokens.checkboxTriggerSizeTight, _.selectTokens.checkboxTriggerBorderRadius, _.selectTokens.checkboxTriggerBorderRadiusTight, _.selectTokens.checkboxFillColor, _.selectTokens.checkboxIconColor, _.selectTokens.checkboxTriggerBorderColor, _.selectTokens.indicatorSize, _.selectTokens.chipGap, _.selectTokens.chipBorderRadius, _.selectTokens.chipHeight, _.selectTokens.chipPaddingRight, _.selectTokens.chipPaddingLeft, _.selectTokens.chipClearContentMarginLeft, _.selectTokens.chipClearContentMarginRight, _.selectTokens.chipCloseIconSize, _.selectTokens.targetButtonArrowMargin, _.selectTokens.targetTextfieldArrowMargin, _.selectTokens.targetHeight, _.selectTokens.targetButtonPadding, _.selectTokens.targetTextfieldPadding, _.selectTokens.targetTextfieldChipPadding, _.selectTokens.labelOffset, _.selectTokens.innerLabelGap, _.selectTokens.helperTextOffset, _.selectTokens.spinnerSize, _.selectTokens.spinnerSizeTight),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":1.5rem;", ":0.75rem 0.75rem 0.75rem 0.75rem;", ":0.5rem 0.75rem 0.5rem 0.75rem;", ":0.625rem;", ":0 0.375rem 0 0;", ":1.5rem;", ":1.5rem;", ":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);", ":1.25rem;", ":1.25rem;", ":0.375rem;", ":0.375rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":0.375rem;", ":0.25rem;", ":0.375rem;", ":2.25rem;", ":0.875rem;", ":0.625rem;", ":0.5rem;", ":0rem;", ":1rem;", ":0 -0.125rem 0 0.375rem;", ":0 0 0 0.625rem;", ":3rem;", ":1.25rem 0 1.25rem;", ":0.875rem 0 1rem;", ":0.875rem 0 0.25rem;", ":0.625rem;", ":0.125rem;", ":0.25rem;", ":1.5rem;", ":1.5rem;"], _.selectTokens.padding, _.selectTokens.borderRadius, _.selectTokens.focusOffset, _.selectTokens.itemHeight, _.selectTokens.itemPadding, _.selectTokens.itemPaddingTight, _.selectTokens.itemBorderRadius, _.selectTokens.itemIconMargin, _.selectTokens.itemIconSize, _.selectTokens.itemIconSizeTight, _.selectTokens.fontFamily, _.selectTokens.fontSize, _.selectTokens.fontStyle, _.selectTokens.fontWeight, _.selectTokens.fontLetterSpacing, _.selectTokens.fontLineHeight, _.selectTokens.checkboxTriggerSize, _.selectTokens.checkboxTriggerSizeTight, _.selectTokens.checkboxTriggerBorderRadius, _.selectTokens.checkboxTriggerBorderRadiusTight, _.selectTokens.checkboxFillColor, _.selectTokens.checkboxIconColor, _.selectTokens.checkboxTriggerBorderColor, _.selectTokens.indicatorSize, _.selectTokens.chipGap, _.selectTokens.chipBorderRadius, _.selectTokens.chipHeight, _.selectTokens.chipPaddingRight, _.selectTokens.chipPaddingLeft, _.selectTokens.chipClearContentMarginLeft, _.selectTokens.chipClearContentMarginRight, _.selectTokens.chipCloseIconSize, _.selectTokens.targetButtonArrowMargin, _.selectTokens.targetTextfieldArrowMargin, _.selectTokens.targetHeight, _.selectTokens.targetButtonPadding, _.selectTokens.targetTextfieldPadding, _.selectTokens.targetTextfieldChipPadding, _.selectTokens.labelOffset, _.selectTokens.innerLabelGap, _.selectTokens.helperTextOffset, _.selectTokens.spinnerSize, _.selectTokens.spinnerSizeTight),
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":0.875rem;", ":0.125rem;", ":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;", ":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;", ":0.25rem;", ":0.5rem;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1rem;", ":0 -0.125rem 0 0.5rem;", ":0 0 0 0.75rem;", ":3.5rem;", ":1.5rem 0 1.5rem;", ":1rem 0 1.125rem;", ":1rem 0 0.25rem;", ":0.75rem;", ":0.125rem;", ":0.25rem;", ":1.5rem;", ":1.5rem;"], _.selectTokens.padding, _.selectTokens.borderRadius, _.selectTokens.focusOffset, _.selectTokens.itemHeight, _.selectTokens.itemPadding, _.selectTokens.itemPaddingTight, _.selectTokens.itemBorderRadius, _.selectTokens.itemIconMargin, _.selectTokens.itemIconSize, _.selectTokens.itemIconSizeTight, _.selectTokens.fontFamily, _.selectTokens.fontSize, _.selectTokens.fontStyle, _.selectTokens.fontWeight, _.selectTokens.fontLetterSpacing, _.selectTokens.fontLineHeight, _.selectTokens.checkboxTriggerSize, _.selectTokens.checkboxTriggerSizeTight, _.selectTokens.checkboxTriggerBorderRadius, _.selectTokens.checkboxTriggerBorderRadiusTight, _.selectTokens.checkboxFillColor, _.selectTokens.checkboxIconColor, _.selectTokens.checkboxTriggerBorderColor, _.selectTokens.indicatorSize, _.selectTokens.chipGap, _.selectTokens.chipBorderRadius, _.selectTokens.chipHeight, _.selectTokens.chipPaddingRight, _.selectTokens.chipPaddingLeft, _.selectTokens.chipClearContentMarginLeft, _.selectTokens.chipClearContentMarginRight, _.selectTokens.chipCloseIconSize, _.selectTokens.targetButtonArrowMargin, _.selectTokens.targetTextfieldArrowMargin, _.selectTokens.targetHeight, _.selectTokens.targetButtonPadding, _.selectTokens.targetTextfieldPadding, _.selectTokens.targetTextfieldChipPadding, _.selectTokens.labelOffset, _.selectTokens.innerLabelGap, _.selectTokens.helperTextOffset, _.selectTokens.spinnerSize, _.selectTokens.spinnerSizeTight)
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":0.5rem;", ":0.125rem;", ":1rem;", ":0.5rem 0.5rem 0.5rem 0.375rem;", ":0.25rem 0.5rem 0.25rem 0.375rem;", ":0.375rem;", ":1rem;", ":1rem;", ":0 0.25rem 0 0;", ":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(--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(--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.875rem;", ":0.875rem;", ":0.25rem;", ":0.25rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":0.375rem;", ":0.25rem;", ":0.125rem;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0.75rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.375rem;", ":2rem;", ":0.75rem 0 0.75rem;", ":0.5rem 0 0.625rem;", ":0.5rem 0 0.25rem;", ":0.375rem;", ":0;", ":0.25rem;", ":1rem;", ":1rem;"], _.selectTokens.padding, _.selectTokens.borderRadius, _.selectTokens.focusOffset, _.selectTokens.itemHeight, _.selectTokens.itemPadding, _.selectTokens.itemPaddingTight, _.selectTokens.itemBorderRadius, _.selectTokens.itemIconSize, _.selectTokens.itemIconSizeTight, _.selectTokens.itemIconMargin, _.selectTokens.fontFamily, _.selectTokens.fontSize, _.selectTokens.fontStyle, _.selectTokens.fontWeight, _.selectTokens.fontLetterSpacing, _.selectTokens.fontLineHeight, _.selectTokens.labelFontFamily, _.selectTokens.labelFontSize, _.selectTokens.labelFontStyle, _.selectTokens.labelFontWeight, _.selectTokens.labelFontLetterSpacing, _.selectTokens.labelFontLineHeight, _.selectTokens.helperTextFontFamily, _.selectTokens.helperTextFontSize, _.selectTokens.helperTextFontStyle, _.selectTokens.helperTextFontWeight, _.selectTokens.helperTextFontLetterSpacing, _.selectTokens.helperTextFontLineHeight, _.selectTokens.checkboxTriggerSize, _.selectTokens.checkboxTriggerSizeTight, _.selectTokens.checkboxTriggerBorderRadius, _.selectTokens.checkboxTriggerBorderRadiusTight, _.selectTokens.checkboxFillColor, _.selectTokens.checkboxIconColor, _.selectTokens.checkboxTriggerBorderColor, _.selectTokens.indicatorSize, _.selectTokens.chipGap, _.selectTokens.chipBorderRadius, _.selectTokens.chipHeight, _.selectTokens.chipPaddingRight, _.selectTokens.chipPaddingLeft, _.selectTokens.chipClearContentMarginLeft, _.selectTokens.chipClearContentMarginRight, _.selectTokens.chipCloseIconSize, _.selectTokens.targetButtonArrowMargin, _.selectTokens.targetTextfieldArrowMargin, _.selectTokens.targetHeight, _.selectTokens.targetButtonPadding, _.selectTokens.targetTextfieldPadding, _.selectTokens.targetTextfieldChipPadding, _.selectTokens.labelOffset, _.selectTokens.innerLabelGap, _.selectTokens.helperTextOffset, _.selectTokens.spinnerSize, _.selectTokens.spinnerSizeTight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":0.625rem;", ":0.125rem;", ":1.5rem;", ":0.5rem 0.75rem 0.5rem 0.675rem;", ":0.25rem 0.75rem 0.25rem 0.675rem;", ":0.5rem;", ":1.5rem;", ":1rem;", ":0 0.375rem 0 0;", ":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);", ":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);", ":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);", ":1.25rem;", ":0.875rem;", ":0.375rem;", ":0.25rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":0.375rem;", ":0rem;", ":0.75rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.375rem;", ":2.5rem;", ":1rem 0 1rem;", ":0.75rem 0 0.875rem;", ":0.75rem 0 0.25rem;", ":0.5rem;", ":0;", ":0.25rem;", ":1.5rem;", ":1rem;"], _.selectTokens.padding, _.selectTokens.borderRadius, _.selectTokens.focusOffset, _.selectTokens.itemHeight, _.selectTokens.itemPadding, _.selectTokens.itemPaddingTight, _.selectTokens.itemBorderRadius, _.selectTokens.itemIconSize, _.selectTokens.itemIconSizeTight, _.selectTokens.itemIconMargin, _.selectTokens.fontFamily, _.selectTokens.fontSize, _.selectTokens.fontStyle, _.selectTokens.fontWeight, _.selectTokens.fontLetterSpacing, _.selectTokens.fontLineHeight, _.selectTokens.labelFontFamily, _.selectTokens.labelFontSize, _.selectTokens.labelFontStyle, _.selectTokens.labelFontWeight, _.selectTokens.labelFontLetterSpacing, _.selectTokens.labelFontLineHeight, _.selectTokens.helperTextFontFamily, _.selectTokens.helperTextFontSize, _.selectTokens.helperTextFontStyle, _.selectTokens.helperTextFontWeight, _.selectTokens.helperTextFontLetterSpacing, _.selectTokens.helperTextFontLineHeight, _.selectTokens.checkboxTriggerSize, _.selectTokens.checkboxTriggerSizeTight, _.selectTokens.checkboxTriggerBorderRadius, _.selectTokens.checkboxTriggerBorderRadiusTight, _.selectTokens.checkboxFillColor, _.selectTokens.checkboxIconColor, _.selectTokens.checkboxTriggerBorderColor, _.selectTokens.indicatorSize, _.selectTokens.chipGap, _.selectTokens.chipBorderRadius, _.selectTokens.chipHeight, _.selectTokens.chipPaddingRight, _.selectTokens.chipPaddingLeft, _.selectTokens.chipClearContentMarginLeft, _.selectTokens.chipClearContentMarginRight, _.selectTokens.chipCloseIconSize, _.selectTokens.targetButtonArrowMargin, _.selectTokens.targetTextfieldArrowMargin, _.selectTokens.targetHeight, _.selectTokens.targetButtonPadding, _.selectTokens.targetTextfieldPadding, _.selectTokens.targetTextfieldChipPadding, _.selectTokens.labelOffset, _.selectTokens.innerLabelGap, _.selectTokens.helperTextOffset, _.selectTokens.spinnerSize, _.selectTokens.spinnerSizeTight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":1.5rem;", ":0.75rem 0.75rem 0.75rem 0.75rem;", ":0.5rem 0.75rem 0.5rem 0.75rem;", ":0.625rem;", ":0 0.375rem 0 0;", ":1.5rem;", ":1.5rem;", ":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);", ":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);", ":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);", ":1.25rem;", ":1.25rem;", ":0.375rem;", ":0.375rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":0.375rem;", ":0.25rem;", ":0.375rem;", ":2.25rem;", ":0.875rem;", ":0.625rem;", ":0.5rem;", ":0rem;", ":1rem;", ":0 -0.125rem 0 0.375rem;", ":0 0 0 0.625rem;", ":3rem;", ":1.25rem 0 1.25rem;", ":0.875rem 0 1rem;", ":0.875rem 0 0.25rem;", ":0.625rem;", ":0.125rem;", ":0.25rem;", ":1.5rem;", ":1.5rem;"], _.selectTokens.padding, _.selectTokens.borderRadius, _.selectTokens.focusOffset, _.selectTokens.itemHeight, _.selectTokens.itemPadding, _.selectTokens.itemPaddingTight, _.selectTokens.itemBorderRadius, _.selectTokens.itemIconMargin, _.selectTokens.itemIconSize, _.selectTokens.itemIconSizeTight, _.selectTokens.fontFamily, _.selectTokens.fontSize, _.selectTokens.fontStyle, _.selectTokens.fontWeight, _.selectTokens.fontLetterSpacing, _.selectTokens.fontLineHeight, _.selectTokens.labelFontFamily, _.selectTokens.labelFontSize, _.selectTokens.labelFontStyle, _.selectTokens.labelFontWeight, _.selectTokens.labelFontLetterSpacing, _.selectTokens.labelFontLineHeight, _.selectTokens.helperTextFontFamily, _.selectTokens.helperTextFontSize, _.selectTokens.helperTextFontStyle, _.selectTokens.helperTextFontWeight, _.selectTokens.helperTextFontLetterSpacing, _.selectTokens.helperTextFontLineHeight, _.selectTokens.checkboxTriggerSize, _.selectTokens.checkboxTriggerSizeTight, _.selectTokens.checkboxTriggerBorderRadius, _.selectTokens.checkboxTriggerBorderRadiusTight, _.selectTokens.checkboxFillColor, _.selectTokens.checkboxIconColor, _.selectTokens.checkboxTriggerBorderColor, _.selectTokens.indicatorSize, _.selectTokens.chipGap, _.selectTokens.chipBorderRadius, _.selectTokens.chipHeight, _.selectTokens.chipPaddingRight, _.selectTokens.chipPaddingLeft, _.selectTokens.chipClearContentMarginLeft, _.selectTokens.chipClearContentMarginRight, _.selectTokens.chipCloseIconSize, _.selectTokens.targetButtonArrowMargin, _.selectTokens.targetTextfieldArrowMargin, _.selectTokens.targetHeight, _.selectTokens.targetButtonPadding, _.selectTokens.targetTextfieldPadding, _.selectTokens.targetTextfieldChipPadding, _.selectTokens.labelOffset, _.selectTokens.innerLabelGap, _.selectTokens.helperTextOffset, _.selectTokens.spinnerSize, _.selectTokens.spinnerSizeTight),
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":0.875rem;", ":0.125rem;", ":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;", ":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);", ":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);", ":1.25rem;", ":1.25rem;", ":0.375rem;", ":0.375rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":0.375rem;", ":0.25rem;", ":0.5rem;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1rem;", ":0 -0.125rem 0 0.5rem;", ":0 0 0 0.75rem;", ":3.5rem;", ":1.5rem 0 1.5rem;", ":1rem 0 1.125rem;", ":1rem 0 0.25rem;", ":0.75rem;", ":0.125rem;", ":0.25rem;", ":1.5rem;", ":1.5rem;"], _.selectTokens.padding, _.selectTokens.borderRadius, _.selectTokens.focusOffset, _.selectTokens.itemHeight, _.selectTokens.itemPadding, _.selectTokens.itemPaddingTight, _.selectTokens.itemBorderRadius, _.selectTokens.itemIconMargin, _.selectTokens.itemIconSize, _.selectTokens.itemIconSizeTight, _.selectTokens.fontFamily, _.selectTokens.fontSize, _.selectTokens.fontStyle, _.selectTokens.fontWeight, _.selectTokens.fontLetterSpacing, _.selectTokens.fontLineHeight, _.selectTokens.labelFontFamily, _.selectTokens.labelFontSize, _.selectTokens.labelFontStyle, _.selectTokens.labelFontWeight, _.selectTokens.labelFontLetterSpacing, _.selectTokens.labelFontLineHeight, _.selectTokens.helperTextFontFamily, _.selectTokens.helperTextFontSize, _.selectTokens.helperTextFontStyle, _.selectTokens.helperTextFontWeight, _.selectTokens.helperTextFontLetterSpacing, _.selectTokens.helperTextFontLineHeight, _.selectTokens.checkboxTriggerSize, _.selectTokens.checkboxTriggerSizeTight, _.selectTokens.checkboxTriggerBorderRadius, _.selectTokens.checkboxTriggerBorderRadiusTight, _.selectTokens.checkboxFillColor, _.selectTokens.checkboxIconColor, _.selectTokens.checkboxTriggerBorderColor, _.selectTokens.indicatorSize, _.selectTokens.chipGap, _.selectTokens.chipBorderRadius, _.selectTokens.chipHeight, _.selectTokens.chipPaddingRight, _.selectTokens.chipPaddingLeft, _.selectTokens.chipClearContentMarginLeft, _.selectTokens.chipClearContentMarginRight, _.selectTokens.chipCloseIconSize, _.selectTokens.targetButtonArrowMargin, _.selectTokens.targetTextfieldArrowMargin, _.selectTokens.targetHeight, _.selectTokens.targetButtonPadding, _.selectTokens.targetTextfieldPadding, _.selectTokens.targetTextfieldChipPadding, _.selectTokens.labelOffset, _.selectTokens.innerLabelGap, _.selectTokens.helperTextOffset, _.selectTokens.spinnerSize, _.selectTokens.spinnerSizeTight)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary-hover);", ":var(--inverse-text-primary-active);", ":var(--inverse-text-secondary);", ":var(--inverse-text-secondary-hover);", ":var(--inverse-text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-hover);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--surface-solid-default-hover);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);"], _.selectTokens.helperTextColor, _.selectTokens.targetButtonColor, _.selectTokens.targetButtonColorHover, _.selectTokens.targetButtonColorActive, _.selectTokens.targetButtonArrowColor, _.selectTokens.targetButtonArrowColorHover, _.selectTokens.targetButtonArrowColorActive, _.selectTokens.targetTextfieldArrowColor, _.selectTokens.targetTextfieldArrowColorHover, _.selectTokens.targetTextfieldArrowColorActive, _.selectTokens.targetButtonBackgroundColor, _.selectTokens.targetButtonBackgroundColorHover, _.selectTokens.targetButtonBackgroundColorActive, _.selectTokens.targetTextfieldBackgroundColor, _.selectTokens.targetTextfieldBackgroundColorOpened),
-      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-hover);", ":var(--surface-positive);", ":var(--surface-positive-hover);", ":var(--surface-positive-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);"], _.selectTokens.helperTextColor, _.selectTokens.targetButtonColor, _.selectTokens.targetButtonColorHover, _.selectTokens.targetButtonColorActive, _.selectTokens.targetButtonArrowColor, _.selectTokens.targetButtonArrowColorHover, _.selectTokens.targetButtonArrowColorActive, _.selectTokens.targetTextfieldArrowColor, _.selectTokens.targetTextfieldArrowColorHover, _.selectTokens.targetTextfieldArrowColorActive, _.selectTokens.targetButtonBackgroundColor, _.selectTokens.targetButtonBackgroundColorHover, _.selectTokens.targetButtonBackgroundColorActive, _.selectTokens.targetTextfieldBackgroundColor, _.selectTokens.targetTextfieldBackgroundColorOpened),
-      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-hover);", ":var(--surface-warning);", ":var(--surface-warning-hover);", ":var(--surface-warning-active);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);"], _.selectTokens.helperTextColor, _.selectTokens.targetButtonColor, _.selectTokens.targetButtonColorHover, _.selectTokens.targetButtonColorActive, _.selectTokens.targetButtonArrowColor, _.selectTokens.targetButtonArrowColorHover, _.selectTokens.targetButtonArrowColorActive, _.selectTokens.targetTextfieldArrowColor, _.selectTokens.targetTextfieldArrowColorHover, _.selectTokens.targetTextfieldArrowColorActive, _.selectTokens.targetButtonBackgroundColor, _.selectTokens.targetButtonBackgroundColorHover, _.selectTokens.targetButtonBackgroundColorActive, _.selectTokens.targetTextfieldBackgroundColor, _.selectTokens.targetTextfieldBackgroundColorOpened),
-      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-hover);", ":var(--surface-negative);", ":var(--surface-negative-hover);", ":var(--surface-negative-active);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);"], _.selectTokens.helperTextColor, _.selectTokens.targetButtonColor, _.selectTokens.targetButtonColorHover, _.selectTokens.targetButtonColorActive, _.selectTokens.targetButtonArrowColor, _.selectTokens.targetButtonArrowColorHover, _.selectTokens.targetButtonArrowColorActive, _.selectTokens.targetTextfieldArrowColor, _.selectTokens.targetTextfieldArrowColorHover, _.selectTokens.targetTextfieldArrowColorActive, _.selectTokens.targetButtonBackgroundColor, _.selectTokens.targetButtonBackgroundColorHover, _.selectTokens.targetButtonBackgroundColorActive, _.selectTokens.targetTextfieldBackgroundColor, _.selectTokens.targetTextfieldBackgroundColorOpened),
-      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-accent-active);"], _.selectTokens.targetButtonColor, _.selectTokens.targetButtonColorHover, _.selectTokens.targetButtonColorActive, _.selectTokens.targetButtonArrowColor, _.selectTokens.targetButtonArrowColorHover, _.selectTokens.targetButtonArrowColorActive, _.selectTokens.targetButtonBackgroundColor, _.selectTokens.targetButtonBackgroundColorHover, _.selectTokens.targetButtonBackgroundColorActive),
-      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--text-primary-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--surface-transparent-secondary-active);"], _.selectTokens.targetButtonColor, _.selectTokens.targetButtonColorHover, _.selectTokens.targetButtonColorActive, _.selectTokens.targetButtonArrowColor, _.selectTokens.targetButtonArrowColorHover, _.selectTokens.targetButtonArrowColorActive, _.selectTokens.targetButtonBackgroundColor, _.selectTokens.targetButtonBackgroundColorHover, _.selectTokens.targetButtonBackgroundColorActive),
-      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--text-primary-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-clear);", ":var(--surface-clear);", ":var(--surface-clear);"], _.selectTokens.targetButtonColor, _.selectTokens.targetButtonColorHover, _.selectTokens.targetButtonColorActive, _.selectTokens.targetButtonArrowColor, _.selectTokens.targetButtonArrowColorHover, _.selectTokens.targetButtonArrowColorActive, _.selectTokens.targetButtonBackgroundColor, _.selectTokens.targetButtonBackgroundColorHover, _.selectTokens.targetButtonBackgroundColorActive),
-      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-active);", ":var(--on-light-surface-transparent-deep);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-light-surface-transparent-deep-active);"], _.selectTokens.targetButtonColor, _.selectTokens.targetButtonColorHover, _.selectTokens.targetButtonColorActive, _.selectTokens.targetButtonArrowColor, _.selectTokens.targetButtonArrowColorHover, _.selectTokens.targetButtonArrowColorActive, _.selectTokens.targetButtonBackgroundColor, _.selectTokens.targetButtonBackgroundColorHover, _.selectTokens.targetButtonBackgroundColorActive),
-      black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-active);", ":var(--on-light-surface-solid-default);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-light-surface-solid-default-active);"], _.selectTokens.targetButtonColor, _.selectTokens.targetButtonColorHover, _.selectTokens.targetButtonColorActive, _.selectTokens.targetButtonArrowColor, _.selectTokens.targetButtonArrowColorHover, _.selectTokens.targetButtonArrowColorActive, _.selectTokens.targetButtonBackgroundColor, _.selectTokens.targetButtonBackgroundColorHover, _.selectTokens.targetButtonBackgroundColorActive),
-      white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-text-primary-hover);", ":var(--on-light-text-primary-active);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary-hover);", ":var(--on-light-text-secondary-active);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-dark-surface-solid-default-active);"], _.selectTokens.targetButtonColor, _.selectTokens.targetButtonColorHover, _.selectTokens.targetButtonColorActive, _.selectTokens.targetButtonArrowColor, _.selectTokens.targetButtonArrowColorHover, _.selectTokens.targetButtonArrowColorActive, _.selectTokens.targetButtonBackgroundColor, _.selectTokens.targetButtonBackgroundColorHover, _.selectTokens.targetButtonBackgroundColorActive)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary-hover);", ":var(--inverse-text-primary-active);", ":var(--inverse-text-secondary);", ":var(--inverse-text-secondary-hover);", ":var(--inverse-text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-hover);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--surface-solid-default-hover);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);"], _.selectTokens.helperTextColor, _.selectTokens.itemBackgroundHover, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.targetButtonColor, _.selectTokens.targetButtonColorHover, _.selectTokens.targetButtonColorActive, _.selectTokens.targetButtonArrowColor, _.selectTokens.targetButtonArrowColorHover, _.selectTokens.targetButtonArrowColorActive, _.selectTokens.targetTextfieldArrowColor, _.selectTokens.targetTextfieldArrowColorHover, _.selectTokens.targetTextfieldArrowColorActive, _.selectTokens.targetButtonBackgroundColor, _.selectTokens.targetButtonBackgroundColorHover, _.selectTokens.targetButtonBackgroundColorActive, _.selectTokens.targetTextfieldBackgroundColor, _.selectTokens.targetTextfieldBackgroundColorOpened),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-positive);", ":var(--surface-transparent-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-hover);", ":var(--surface-positive);", ":var(--surface-positive-hover);", ":var(--surface-positive-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);"], _.selectTokens.helperTextColor, _.selectTokens.itemBackgroundHover, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.targetButtonColor, _.selectTokens.targetButtonColorHover, _.selectTokens.targetButtonColorActive, _.selectTokens.targetButtonArrowColor, _.selectTokens.targetButtonArrowColorHover, _.selectTokens.targetButtonArrowColorActive, _.selectTokens.targetTextfieldArrowColor, _.selectTokens.targetTextfieldArrowColorHover, _.selectTokens.targetTextfieldArrowColorActive, _.selectTokens.targetButtonBackgroundColor, _.selectTokens.targetButtonBackgroundColorHover, _.selectTokens.targetButtonBackgroundColorActive, _.selectTokens.targetTextfieldBackgroundColor, _.selectTokens.targetTextfieldBackgroundColorOpened),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-warning);", ":var(--surface-transparent-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-hover);", ":var(--surface-warning);", ":var(--surface-warning-hover);", ":var(--surface-warning-active);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);"], _.selectTokens.helperTextColor, _.selectTokens.itemBackgroundHover, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.targetButtonColor, _.selectTokens.targetButtonColorHover, _.selectTokens.targetButtonColorActive, _.selectTokens.targetButtonArrowColor, _.selectTokens.targetButtonArrowColorHover, _.selectTokens.targetButtonArrowColorActive, _.selectTokens.targetTextfieldArrowColor, _.selectTokens.targetTextfieldArrowColorHover, _.selectTokens.targetTextfieldArrowColorActive, _.selectTokens.targetButtonBackgroundColor, _.selectTokens.targetButtonBackgroundColorHover, _.selectTokens.targetButtonBackgroundColorActive, _.selectTokens.targetTextfieldBackgroundColor, _.selectTokens.targetTextfieldBackgroundColorOpened),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-negative);", ":var(--surface-transparent-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-hover);", ":var(--surface-negative);", ":var(--surface-negative-hover);", ":var(--surface-negative-active);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);"], _.selectTokens.helperTextColor, _.selectTokens.itemBackgroundHover, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.targetButtonColor, _.selectTokens.targetButtonColorHover, _.selectTokens.targetButtonColorActive, _.selectTokens.targetButtonArrowColor, _.selectTokens.targetButtonArrowColorHover, _.selectTokens.targetButtonArrowColorActive, _.selectTokens.targetTextfieldArrowColor, _.selectTokens.targetTextfieldArrowColorHover, _.selectTokens.targetTextfieldArrowColorActive, _.selectTokens.targetButtonBackgroundColor, _.selectTokens.targetButtonBackgroundColorHover, _.selectTokens.targetButtonBackgroundColorActive, _.selectTokens.targetTextfieldBackgroundColor, _.selectTokens.targetTextfieldBackgroundColorOpened),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-accent-active);"], _.selectTokens.itemBackgroundHover, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.targetButtonColor, _.selectTokens.targetButtonColorHover, _.selectTokens.targetButtonColorActive, _.selectTokens.targetButtonArrowColor, _.selectTokens.targetButtonArrowColorHover, _.selectTokens.targetButtonArrowColorActive, _.selectTokens.targetButtonBackgroundColor, _.selectTokens.targetButtonBackgroundColorHover, _.selectTokens.targetButtonBackgroundColorActive),
+      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--text-primary-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--surface-transparent-secondary-active);"], _.selectTokens.itemBackgroundHover, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.targetButtonColor, _.selectTokens.targetButtonColorHover, _.selectTokens.targetButtonColorActive, _.selectTokens.targetButtonArrowColor, _.selectTokens.targetButtonArrowColorHover, _.selectTokens.targetButtonArrowColorActive, _.selectTokens.targetButtonBackgroundColor, _.selectTokens.targetButtonBackgroundColorHover, _.selectTokens.targetButtonBackgroundColorActive),
+      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--text-primary-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-clear);", ":var(--surface-clear);", ":var(--surface-clear);"], _.selectTokens.itemBackgroundHover, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.targetButtonColor, _.selectTokens.targetButtonColorHover, _.selectTokens.targetButtonColorActive, _.selectTokens.targetButtonArrowColor, _.selectTokens.targetButtonArrowColorHover, _.selectTokens.targetButtonArrowColorActive, _.selectTokens.targetButtonBackgroundColor, _.selectTokens.targetButtonBackgroundColorHover, _.selectTokens.targetButtonBackgroundColorActive),
+      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-active);", ":var(--on-light-surface-transparent-deep);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-light-surface-transparent-deep-active);"], _.selectTokens.itemBackgroundHover, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.targetButtonColor, _.selectTokens.targetButtonColorHover, _.selectTokens.targetButtonColorActive, _.selectTokens.targetButtonArrowColor, _.selectTokens.targetButtonArrowColorHover, _.selectTokens.targetButtonArrowColorActive, _.selectTokens.targetButtonBackgroundColor, _.selectTokens.targetButtonBackgroundColorHover, _.selectTokens.targetButtonBackgroundColorActive),
+      black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-active);", ":var(--on-light-surface-solid-default);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-light-surface-solid-default-active);"], _.selectTokens.itemBackgroundHover, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.targetButtonColor, _.selectTokens.targetButtonColorHover, _.selectTokens.targetButtonColorActive, _.selectTokens.targetButtonArrowColor, _.selectTokens.targetButtonArrowColorHover, _.selectTokens.targetButtonArrowColorActive, _.selectTokens.targetButtonBackgroundColor, _.selectTokens.targetButtonBackgroundColorHover, _.selectTokens.targetButtonBackgroundColorActive),
+      white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--on-light-text-primary);", ":var(--on-light-text-primary-hover);", ":var(--on-light-text-primary-active);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary-hover);", ":var(--on-light-text-secondary-active);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-dark-surface-solid-default-active);"], _.selectTokens.itemBackgroundHover, _.selectTokens.disclosureIconColor, _.selectTokens.disclosureIconColorHover, _.selectTokens.targetButtonColor, _.selectTokens.targetButtonColorHover, _.selectTokens.targetButtonColorActive, _.selectTokens.targetButtonArrowColor, _.selectTokens.targetButtonArrowColorHover, _.selectTokens.targetButtonArrowColorActive, _.selectTokens.targetButtonBackgroundColor, _.selectTokens.targetButtonBackgroundColorHover, _.selectTokens.targetButtonBackgroundColorActive)
     },
     chipView: {
       "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--surface-solid-default-active);"], _.selectTokens.chipColor, _.selectTokens.chipBackground, _.selectTokens.chipBackgroundHover, _.selectTokens.chipBackgroundActive),

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

@@ -29,7 +29,6 @@ type CustomStoryTabsProps = {
 
 const contentLeftOptions = ['none', 'icon'];
 const contentRightOptions = ['none', 'counter', 'icon'];
-const labels = ['Label', 'Middle label', 'Very long label'];
 
 const getContentLeft = (contentLeftOption: string, size: Size) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
@@ -58,9 +57,6 @@ const meta: Meta<StoryTabsProps> = {
     title: 'plasma_b2c/Tabs',
     component: Tabs,
     decorators: [WithTheme],
-    args: {
-        maxWidth: '',
-    },
     argTypes: {
         ...disableProps([
             'orientation',
@@ -80,12 +76,6 @@ const meta: Meta<StoryTabsProps> = {
             },
             if: { arg: 'helperText', eq: '' },
         },
-        maxWidth: {
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'stretch', truthy: false },
-        },
     },
 };
 
@@ -100,14 +90,13 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         stretch,
-        maxWidth,
         helperText,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs clip="none" view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -121,9 +110,8 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            maxWidth={maxWidth}
                         >
-                            {`${labels[i % labels.length]} ${i + 1}`}
+                            {`Label${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -139,9 +127,8 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        maxWidth={maxWidth}
                     >
-                        {`${labels[i % labels.length]} ${i + 1}`}
+                        {`Label${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -160,7 +147,6 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
         hasDivider,
         helperText,
         width,
-        maxWidth,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -180,9 +166,8 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            maxWidth={maxWidth}
                         >
-                            {`${labels[i % labels.length]} ${i + 1}`}
+                            {`Label${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -198,9 +183,8 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        maxWidth={maxWidth}
                     >
-                        {`${labels[i % labels.length]} ${i + 1}`}
+                        {`Label${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -218,7 +202,6 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         helperText,
-        maxWidth,
     } = props;
     const maxItemQuantity = 3;
     const items = Array(itemQuantity).fill(0);
@@ -251,9 +234,8 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            maxWidth={maxWidth}
                         >
-                            {`${labels[i % labels.length]} ${i + 1}`}
+                            {`Label${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -269,9 +251,8 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        maxWidth={maxWidth}
                     >
-                        {`${labels[i % labels.length]} ${i + 1}`}
+                        {`Label${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -288,7 +269,6 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
                             tabIndex={!disabled ? 0 : -1}
                             disabled={disabled}
                             size={size as Size}
-                            maxWidth="auto"
                         >
                             ShowAll
                         </TabItem>
@@ -305,7 +285,7 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
         disabled: false,
         hasDivider: true,
         helperText: '',
-        itemQuantity: 6,
+        itemQuantity: 8,
         stretch: false,
         width: '15rem',
     },
@@ -363,7 +343,6 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         helperText,
-        maxWidth,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -384,9 +363,8 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            maxWidth={maxWidth}
                         >
-                            {`${labels[i % labels.length]} ${i + 1}`}
+                            {`Label${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -403,9 +381,8 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        maxWidth={maxWidth}
                     >
-                        {`${labels[i % labels.length]} ${i + 1}`}
+                        {`Label${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -424,7 +401,6 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
         hasDivider,
         helperText,
         height,
-        maxWidth,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -452,9 +428,8 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            maxWidth={maxWidth}
                         >
-                            {`${labels[i % labels.length]} ${i + 1}`}
+                            {`Label${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -471,9 +446,8 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        maxWidth={maxWidth}
                     >
-                        {`${labels[i % labels.length]} ${i + 1}`}
+                        {`Label${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -491,7 +465,6 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         helperText,
-        maxWidth,
     } = props;
     const maxItemQuantity = 3;
     const items = Array(itemQuantity).fill(0);
@@ -525,9 +498,8 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            maxWidth={maxWidth}
                         >
-                            {`${labels[i % labels.length]} ${i + 1}`}
+                            {`Label${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -544,9 +516,8 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        maxWidth={maxWidth}
                     >
-                        {`${labels[i % labels.length]} ${i + 1}`}
+                        {`Label${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -563,7 +534,6 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
                         tabIndex={!disabled ? 0 : -1}
                         disabled={disabled}
                         size={size as Size}
-                        maxWidth="auto"
                     >
                         ShowAll
                     </TabItem>
@@ -578,11 +548,10 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
         size: 'xs',
         disabled: false,
         hasDivider: true,
-        itemQuantity: 6,
+        itemQuantity: 8,
         orientation: 'vertical',
         helperText: '',
         height: '10rem',
-        maxWidth: '',
     },
     argTypes: {
         contentLeft: {
@@ -643,7 +612,6 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         stretch,
-        maxWidth,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -661,9 +629,8 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
                     contentLeft={getContentLeft(contentLeftOption, size as Size)}
                     contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size as HeaderSize}
-                    maxWidth={maxWidth}
                 >
-                    {`${labels[i % labels.length]} ${i + 1}`}
+                    {`Label${i + 1}`}
                 </TabItem>
             ))}
         </Tabs>

package/styled-components/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js

@@ -34,9 +34,6 @@ var config = exports.config = {
     },
     pilled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;"], _Tabs.tabsTokens.itemPilledBorderRadius)
-    },
-    truncate: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)([""])
     }
   }
 };

package/styled-components/cjs/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js

@@ -23,9 +23,6 @@ var config = exports.config = {
     },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Tabs.tabsTokens.disabledOpacity)
-    },
-    truncate: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)([""])
     }
   }
 };