@salutejs/plasma-new-hope 0.169.0-canary.1486.11363705461.0 → 0.170.0-canary.1459.11367029149.0

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

@@ -0,0 +1,44 @@
+var _IconInfoCircleOutlin;
+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); }
+import React, { forwardRef } from 'react';
+import { Hint, HintTargetWrapper } from '../../TextField.styles';
+import { IconInfoCircleOutline } from '../../../_Icon';
+import { safeUseId } from '../../../../utils';
+export var HintComponent = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var hintText = _ref.hintText,
+    isHintVisible = _ref.isHintVisible,
+    hintTrigger = _ref.hintTrigger,
+    hintTargetIcon = _ref.hintTargetIcon,
+    hintPlacement = _ref.hintPlacement,
+    hintHasArrow = _ref.hintHasArrow,
+    hintOffset = _ref.hintOffset,
+    hintWidth = _ref.hintWidth,
+    hintContentLeft = _ref.hintContentLeft,
+    handleHintShow = _ref.handleHintShow,
+    handleHintHide = _ref.handleHintHide,
+    handleHintClick = _ref.handleHintClick;
+  var hintId = safeUseId();
+  return /*#__PURE__*/React.createElement(Hint, {
+    ref: ref,
+    text: String(hintText),
+    opened: isHintVisible,
+    target: /*#__PURE__*/React.createElement(HintTargetWrapper, _extends({
+      id: hintId
+    }, hintTrigger === 'hover' ? {
+      onMouseEnter: handleHintShow,
+      onMouseLeave: handleHintHide
+    } : {
+      onClick: handleHintClick
+    }), hintTargetIcon || _IconInfoCircleOutlin || (_IconInfoCircleOutlin = /*#__PURE__*/React.createElement(IconInfoCircleOutline, {
+      size: "xs",
+      color: "inherit"
+    }))),
+    placement: hintPlacement,
+    hasArrow: hintHasArrow,
+    offset: hintOffset,
+    minWidth: hintWidth,
+    maxWidth: hintWidth,
+    contentLeft: hintContentLeft,
+    frame: hintId
+  });
+});

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

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

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

@@ -1,4 +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);
+import { Input, InputPlaceholder, InputWrapper, OuterLabelWrapper, StyledContentLeft, StyledContentRight, StyledHintWrapper, 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(", ");}}}&.", "{", "{&.", "{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, OuterLabelWrapper, tokens.clearLabelOffset, Input, tokens.clearColor, InputPlaceholder, tokens.clearPlaceholderColor, StyledIndicator, classes.innerLabelPlacement, tokens.clearIndicatorLabelPlacementInner, tokens.clearIndicatorLabelPlacementInnerRight, classes.hasHint, StyledHintWrapper, classes.innerLabelPlacement, tokens.clearHintInnerLabelPlacementOffset, StyledIndicator, classes.innerLabelPlacement, tokens.clearIndicatorHintInnerRight, 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/_hint-size/base.js

@@ -0,0 +1,5 @@
+import { css } from 'styled-components';
+import { tokens } from '../../TextField.tokens';
+import { tooltipTokens } from '../../../Tooltip';
+import { Hint } from '../../TextField.styles';
+export var base = /*#__PURE__*/css(["", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], Hint, tooltipTokens.paddingTop, tokens.tooltipPaddingTop, tooltipTokens.paddingRight, tokens.tooltipPaddingRight, tooltipTokens.paddingBottom, tokens.tooltipPaddingBottom, tooltipTokens.paddingLeft, tokens.tooltipPaddingLeft, tooltipTokens.minHeight, tokens.tooltipMinHeight, tooltipTokens.borderRadius, tokens.tooltipBorderRadius, tooltipTokens.textFontFamily, tokens.tooltipTextFontFamily, tooltipTokens.textFontSize, tokens.tooltipTextFontSize, tooltipTokens.textFontStyle, tokens.tooltipTextFontStyle, tooltipTokens.textFontWeight, tokens.tooltipTextFontWeight, tooltipTokens.textFontLetterSpacing, tokens.tooltipTextFontLetterSpacing, tooltipTokens.textFontLineHeight, tokens.tooltipTextFontLineHeight, tooltipTokens.contentLeftMargin, tokens.tooltipContentLeftMargin, tooltipTokens.arrowMaskWidth, tokens.tooltipArrowMaskWidth, tooltipTokens.arrowMaskHeight, tokens.tooltipArrowMaskHeight, tooltipTokens.arrowMaskImage, tokens.tooltipArrowMaskImage, tooltipTokens.arrowHeight, tokens.tooltipArrowHeight, tooltipTokens.arrowEdgeMargin, tokens.tooltipArrowEdgeMargin, tooltipTokens.arrowBackground, tokens.tooltipArrowBackground);

package/styled-components/es/components/TextField/variations/_hint-size/tokens.json

@@ -0,0 +1,21 @@
+[
+    "--plasma-textfield__tooltip-padding-top",
+    "--plasma-textfield__tooltip-padding-right",
+    "--plasma-textfield__tooltip-padding-bottom",
+    "--plasma-textfield__tooltip-padding-left",
+    "--plasma-textfield__tooltip-min-height",
+    "--plasma-textfield__tooltip-border-radius",
+    "--plasma-textfield__tooltip-text-font-family",
+    "--plasma-textfield__tooltip-text-font-size",
+    "--plasma-textfield__tooltip-text-font-style",
+    "--plasma-textfield__tooltip-text-font-weight",
+    "--plasma-textfield__tooltip-text-font-letter-spacing",
+    "--plasma-textfield__tooltip-text-font-line-height",
+    "--plasma-textfield__tooltip-content-left-margin",
+    "--plasma-textfield__tooltip-arrow-mask-width",
+    "--plasma-textfield__tooltip-arrow-mask-height",
+    "--plasma-textfield__tooltip-arrow-mask-image",
+    "--plasma-textfield__tooltip-arrow-height",
+    "--plasma-textfield__tooltip-arrow-edge-margin",
+    "--plasma-textfield__tooltip-arrow-background"
+]

package/styled-components/es/components/TextField/variations/_hint-view/base.js

@@ -0,0 +1,5 @@
+import { css } from 'styled-components';
+import { tokens } from '../../TextField.tokens';
+import { tooltipTokens } from '../../../Tooltip';
+import { Hint } from '../../TextField.styles';
+export var base = /*#__PURE__*/css(["", "{", ":var(", ");", ":var(", ");", ":var(", ");}"], Hint, tooltipTokens.backgroundColor, tokens.tooltipBackgroundColor, tooltipTokens.boxShadow, tokens.tooltipBoxShadow, tooltipTokens.color, tokens.tooltipColor);

package/styled-components/es/components/TextField/variations/_hint-view/tokens.json

@@ -0,0 +1,5 @@
+[
+    "--plasma-textfield__tooltip-background-color",
+    "--plasma-textfield__tooltip-box-shadow",
+    "--plasma-textfield__tooltip-color "
+]

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 ~ ", ",", ".", " ~ ", "{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);
+export var base = /*#__PURE__*/css(["&.", "{", "{position:relative;display:inline-block;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.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 { 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(", ");}&.", " ", "{&: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);
+import { Input, InputPlaceholder, InputWrapper, Label, LeftHelper, TitleCaption } from '../../TextField.styles';
+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(", ");}&.", " ", "{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, TitleCaption, tokens.titleCaptionColorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly, classes.outerLabelPlacement, Label, tokens.labelColorReadOnly);

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

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../TextField.tokens';
-import { Input, InputContainer, InputWrapper, Label, LeftHelper, StyledTextAfter, StyledTextBefore } from '../../TextField.styles';
-export var base = /*#__PURE__*/css(["", "{width:100%;font:inherit;letter-spacing:inherit;line-height:inherit;}", "{width:100%;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{height:var(", ");border-radius:var(", ");padding:var(", ");&.", "{padding-top:var(", ");padding-bottom:var(", ");}&.", "{padding-left:var(", ");}&.", "{padding-right:var(", ");}}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin-top:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ",", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin:var(", ");}", "{margin:var(", ");}"], Input, InputContainer, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, InputWrapper, tokens.height, tokens.borderRadius, tokens.padding, classes.hasChips, tokens.paddingWithChips, tokens.paddingWithChips, classes.hasEmptyContentLeft, tokens.paddingWithChips, classes.hasEmptyContentRight, tokens.paddingWithChips, Label, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, StyledTextBefore, StyledTextAfter, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, StyledTextBefore, tokens.textBeforeMargin, StyledTextAfter, tokens.textAfterMargin);
+import { HintTargetWrapper, Input, InputContainer, InputWrapper, Label, LeftHelper, StyledHintWrapper, StyledOptionalText, StyledTextAfter, StyledTextBefore, TitleCaption } from '../../TextField.styles';
+export var base = /*#__PURE__*/css(["", "{width:100%;font:inherit;letter-spacing:inherit;line-height:inherit;}", "{width:100%;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{height:var(", ");border-radius:var(", ");padding:var(", ");&.", "{padding-top:var(", ");padding-bottom:var(", ");}&.", "{padding-left:var(", ");}&.", "{padding-right:var(", ");}}", ",&:not(.", ") ", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin:var(", ");width:var(", ");height:var(", ");}", "{width:var(", ");height:var(", ");}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin-top:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ",", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin:var(", ");}", "{margin:var(", ");}"], Input, InputContainer, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, InputWrapper, tokens.height, tokens.borderRadius, tokens.padding, classes.hasChips, tokens.paddingWithChips, tokens.paddingWithChips, classes.hasEmptyContentLeft, tokens.paddingWithChips, classes.hasEmptyContentRight, tokens.paddingWithChips, Label, classes.innerLabelPlacement, StyledOptionalText, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, StyledHintWrapper, tokens.hintMargin, tokens.hintTargetSize, tokens.hintTargetSize, HintTargetWrapper, tokens.hintTargetSize, tokens.hintTargetSize, TitleCaption, tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, StyledTextBefore, StyledTextAfter, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, StyledTextBefore, tokens.textBeforeMargin, StyledTextAfter, tokens.textAfterMargin);

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(", ") );}", "{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);
+import { Input, InputPlaceholder, InputWrapper, LeftHelper, StyledTextAfter, StyledTextBefore, TitleCaption } 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(", ") );}", "{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(", ");}", "{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, TitleCaption, tokens.titleCaptionColor, LeftHelper, tokens.leftHelperColor, StyledTextBefore, tokens.textBeforeColor, StyledTextAfter, tokens.textAfterColor);

package/styled-components/es/components/_Icon/Icon.assets/DisclosureDownWithOffset.js

@@ -0,0 +1,14 @@
+var _path;
+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); }
+import React from 'react';
+export var DisclosureDownWithOffset = function DisclosureDownWithOffset(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M17.78 18.21C17.48 17.92 17.01 17.92 16.71 18.21L12.75 22.18L8.78 18.21C8.48 17.92 8.01 17.92 7.71 18.21C7.42 18.51 7.42 18.98 7.71 19.28L12.75 24.31L17.78 19.28C18.07 18.98 18.07 18.51 17.78 18.21Z",
+    fillRule: "evenodd",
+    fill: "currentColor"
+  })));
+};

package/styled-components/es/components/_Icon/Icon.assets/DisclosureLeftWithOffset.js

@@ -0,0 +1,14 @@
+var _path;
+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); }
+import React from 'react';
+export var DisclosureLeftWithOffset = function DisclosureLeftWithOffset(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M6.09 6.96c.29.3.29.77 0 1.07L2.12 12l3.97 3.96c.29.3.29.77 0 1.07-.3.29-.77.29-1.06 0L0 12l5.03-5.04c.29-.29.76-.29 1.06 0Z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  })));
+};

package/styled-components/es/components/_Icon/Icon.assets/DisclosureRightWithOffset.js

@@ -0,0 +1,14 @@
+var _path;
+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); }
+import React from 'react';
+export var DisclosureRightWithOffset = function DisclosureRightWithOffset(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M18.21 6.96c-.29.3-.29.77 0 1.07L22.18 12l-3.97 3.96c-.29.3-.29.77 0 1.07.3.29.77.29 1.07 0L24.31 12l-5.03-5.04a.767.767 0 0 0-1.07 0Z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  })));
+};

package/styled-components/es/components/_Icon/Icon.assets/DisclosureUpWithOffset.js

@@ -0,0 +1,14 @@
+var _path;
+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); }
+import React from 'react';
+export var DisclosureUpWithOffset = function DisclosureUpWithOffset(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M17.18 8.18C16.89 8.47 16.41 8.47 16.12 8.18L12.15 4.21L8.18 8.18C7.89 8.47 7.41 8.47 7.12 8.18C6.83 7.89 6.83 7.41 7.12 7.12L12.15 2.09L17.18 7.12C17.47 7.41 17.47 7.89 17.18 8.18Z",
+    fillRule: "evenodd",
+    fill: "currentColor"
+  })));
+};

package/styled-components/es/components/_Icon/Icon.assets/InfoCircleOutline.js

@@ -0,0 +1,15 @@
+var _path;
+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); }
+import React from 'react';
+export var InfoCircleOutline = function InfoCircleOutline(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C7.30558 20.5 3.5 16.6944 3.5 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44772 13 8ZM12 10.25C12.4142 10.25 12.75 10.5858 12.75 11V17C12.75 17.4142 12.4142 17.75 12 17.75C11.5858 17.75 11.25 17.4142 11.25 17V11C11.25 10.5858 11.5858 10.25 12 10.25Z",
+    fill: "currentColor"
+  })));
+};

package/styled-components/es/components/_Icon/Icons/IconDisclosureDownWithOffset.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DisclosureDownWithOffset } from '../Icon.assets/DisclosureDownWithOffset';
+import { IconRoot } from '../IconRoot';
+export var IconDisclosureDownWithOffset = function IconDisclosureDownWithOffset(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
+    color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement(IconRoot, {
+    className: className,
+    size: size,
+    color: color,
+    icon: DisclosureDownWithOffset
+  });
+};

package/styled-components/es/components/_Icon/Icons/IconDisclosureLeftWithOffset.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DisclosureLeftWithOffset } from '../Icon.assets/DisclosureLeftWithOffset';
+import { IconRoot } from '../IconRoot';
+export var IconDisclosureLeftWithOffset = function IconDisclosureLeftWithOffset(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
+    color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement(IconRoot, {
+    className: className,
+    size: size,
+    color: color,
+    icon: DisclosureLeftWithOffset
+  });
+};

package/styled-components/es/components/_Icon/Icons/IconDisclosureRightWithOffset.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DisclosureRightWithOffset } from '../Icon.assets/DisclosureRightWithOffset';
+import { IconRoot } from '../IconRoot';
+export var IconDisclosureRightWithOffset = function IconDisclosureRightWithOffset(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
+    color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement(IconRoot, {
+    className: className,
+    size: size,
+    color: color,
+    icon: DisclosureRightWithOffset
+  });
+};

package/styled-components/es/components/_Icon/Icons/IconDisclosureUpWithOffset.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DisclosureUpWithOffset } from '../Icon.assets/DisclosureUpWithOffset';
+import { IconRoot } from '../IconRoot';
+export var IconDisclosureUpWithOffset = function IconDisclosureUpWithOffset(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
+    color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement(IconRoot, {
+    className: className,
+    size: size,
+    color: color,
+    icon: DisclosureUpWithOffset
+  });
+};

package/styled-components/es/components/_Icon/Icons/IconInfoCircleOutline.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { InfoCircleOutline } from '../Icon.assets/InfoCircleOutline';
+import { IconRoot } from '../IconRoot';
+export var IconInfoCircleOutline = function IconInfoCircleOutline(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
+    color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement(IconRoot, {
+    className: className,
+    size: size,
+    color: color,
+    icon: InfoCircleOutline
+  });
+};

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

@@ -1,6 +1,10 @@
+export { IconDisclosureLeftWithOffset } from './Icons/IconDisclosureLeftWithOffset';
 export { IconDisclosureLeft } from './Icons/IconDisclosureLeft';
 export { IconDisclosureRight } from './Icons/IconDisclosureRight';
+export { IconDisclosureRightWithOffset } from './Icons/IconDisclosureRightWithOffset';
 export { IconDisclosureDownFill } from './Icons/IconDisclosureDownFill';
+export { IconDisclosureDownWithOffset } from './Icons/IconDisclosureDownWithOffset';
+export { IconDisclosureUpWithOffset } from './Icons/IconDisclosureUpWithOffset';
 export { IconMic } from './Icons/IconMic';
 export { IconChevronLeft } from './Icons/IconChevronLeft';
 export { IconChevronDoubleLeft } from './Icons/IconChevronDoubleLeft';
@@ -19,4 +23,5 @@ export { IconBlankDocOutline } from './Icons/IconBlankDocOutline';
 export { IconBlankOutline } from './Icons/IconBlankOutline';
 export { IconBlankPdfOutline } from './Icons/IconBlankPdfOutline';
 export { IconBlankTxtOutline } from './Icons/IconBlankTxtOutline';
-export { IconBlankXlsOutline } from './Icons/IconBlankXlsOutline';
+export { IconBlankXlsOutline } from './Icons/IconBlankXlsOutline';
+export { IconInfoCircleOutline } from './Icons/IconInfoCircleOutline';

package/styled-components/es/examples/plasma_b2c/components/Segment/Segment.stories.tsx

@@ -1,23 +1,55 @@
 import React from 'react';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps } from '@salutejs/plasma-sb-utils';
 
 import { segmentGroupConfig } from '../../../../components/Segment';
 import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 import { SegmentProvider } from '../../../../components/Segment/SegmentProvider';
+import { Counter } from '../Counter/Counter';
+import { IconMic } from '../../../../components/_Icon';
 
 import { config } from './SegmentGroup.config';
 import { SegmentItem, SegmentGroup } from './Segment';
 
-const segmentItemViews = ['clear', 'default', 'secondary'];
+const contentLeftOptions = ['none', 'icon'];
+const contentRightOptions = ['none', 'text', 'counter', 'icon'];
 
-type CustomStorySegmentProps = {
-    segmentItemView?: string;
-    contentItemsNumber?: number;
+const segmentItemViews = ['default', 'secondary'];
+type Size = typeof sizes[number];
+
+type CustomStoryProps = {
+    itemQuantity: number;
+    contentLeft: string;
+    contentRight: string;
+    segmentItemView?: 'default' | 'secondary';
+};
+
+type StorySegmentProps = ComponentProps<typeof SegmentGroup> & CustomStoryProps;
+
+const sizes = ['xs', 's', 'm', 'l'] as const;
+
+const getContentLeft = (contentLeftOption: string, size: Size) => {
+    const iconSize = size === 'xs' ? 'xs' : 's';
+    return contentLeftOption === 'icon' ? <IconMic size={iconSize} color="inherit" /> : undefined;
 };
 
-type StorySegmentProps = ComponentProps<typeof SegmentGroup> & CustomStorySegmentProps;
+const getContentRight = (contentRightOption: string, size: Size) => {
+    const iconSize = size === 'xs' ? 'xs' : 's';
+    const counterSize = size === 'xs' ? 'xxs' : 'xs';
+
+    switch (contentRightOption) {
+        case 'icon':
+            return <IconMic size={iconSize} color="inherit" />;
+        case 'counter':
+            return <Counter size={counterSize} count={1} view="positive" />;
+        case 'text':
+            return 'Text';
+        default:
+            return undefined;
+    }
+};
 
 const meta: Meta<StorySegmentProps> = {
     title: 'plasma_b2c/Segment',
@@ -25,6 +57,19 @@ const meta: Meta<StorySegmentProps> = {
     component: SegmentGroup,
     argTypes: {
         ...argTypesFromConfig(mergeConfig(segmentGroupConfig, config)),
+        ...disableProps(['filledBackground', 'view', 'selectionMode', 'clip']),
+        stretch: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'orientation', eq: 'horizontal' },
+        },
+        orientation: {
+            options: ['horizontal', 'vertical'],
+            control: {
+                type: 'select',
+            },
+        },
         selectionMode: {
             options: ['single', 'multiple'],
             control: {
@@ -37,60 +82,91 @@ const meta: Meta<StorySegmentProps> = {
                 type: 'select',
             },
         },
+        contentLeft: {
+            options: contentLeftOptions,
+            control: {
+                type: 'select',
+            },
+        },
+        contentRight: {
+            options: contentRightOptions,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
     },
 };
 
 export default meta;
 
-const StoryDefault = ({ contentItemsNumber, selectionMode, segmentItemView, view, ...args }: StorySegmentProps) => {
-    const contentItems = Array(contentItemsNumber).fill(0);
+const StoryDefault = (props: StorySegmentProps) => {
+    const {
+        disabled,
+        itemQuantity,
+        size,
+        stretch,
+        orientation,
+
+        segmentItemView,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        ...args
+    } = props;
+    const items = Array(itemQuantity).fill(0);
+    const isVertical = orientation === 'vertical';
 
     return (
-        <>
-            <h3>Segment with auto width</h3>
-            <SegmentProvider>
-                <SegmentGroup view={view} selectionMode={selectionMode} {...args}>
-                    {contentItems.map((_, i) => (
-                        <SegmentItem
-                            view={segmentItemView}
-                            label={`Label ${i}`}
-                            value={`label_${i}`}
-                            key={`label_${i}`}
-                            {...args}
-                        />
-                    ))}
-                </SegmentGroup>
-            </SegmentProvider>
-
-            <h3>Segment with fixed width</h3>
-            <SegmentProvider>
-                <SegmentGroup view={view} style={{ width: '28.5rem' }} selectionMode={selectionMode} {...args}>
-                    {contentItems.map((_, i) => (
-                        <SegmentItem
-                            view={segmentItemView}
-                            label={`Label ${i}`}
-                            value={`label_${i}`}
-                            key={`label_${i}`}
-                            {...args}
-                        />
-                    ))}
-                </SegmentGroup>
-            </SegmentProvider>
-        </>
+        <SegmentProvider>
+            <SegmentGroup
+                stretch={stretch}
+                disabled={disabled}
+                clip={false}
+                size={size}
+                orientation={orientation}
+                {...args}
+            >
+                {items.map((_, i) => (
+                    <SegmentItem
+                        view={segmentItemView}
+                        label={`Label ${i}`}
+                        value={`label_${i}`}
+                        size={size}
+                        key={`label_${i}`}
+                        contentLeft={getContentLeft(contentLeftOption, size)}
+                        contentRight={getContentRight(contentRightOption, size)}
+                        {...args}
+                    >
+                        {`Label${i + 1}`}
+                    </SegmentItem>
+                ))}
+            </SegmentGroup>
+        </SegmentProvider>
     );
 };
 
 export const Default: StoryObj<StorySegmentProps> = {
     args: {
-        view: 'clear',
+        itemQuantity: 8,
         size: 'xs',
-        segmentItemView: 'clear',
+        segmentItemView: 'default',
         selectionMode: 'single',
-        contentItemsNumber: 11,
         pilled: false,
         filledBackground: false,
+        hasBackground: false,
         disabled: false,
         stretch: false,
+        orientation: 'horizontal',
+        contentRight: 'none',
+        contentLeft: 'none',
+    },
+    argTypes: {
+        ...disableProps(['filledBackground', 'view', 'selectionMode', 'clip']),
     },
-    render: (args) => <StoryDefault {...args} />,
+    render: (args: StorySegmentProps) => <StoryDefault {...args} />,
 };

package/styled-components/es/examples/plasma_b2c/components/Segment/SegmentGroup.config.js

@@ -7,26 +7,29 @@ export var config = {
   },
   variations: {
     view: {
-      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":tranparent;", ":var(--plasma-colors-button-focused);"], segmentTokens.arrowColor, segmentTokens.groupBackgroundColor, segmentTokens.outlineFocusColor),
-      filled: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--plasma-colors-button-focused);"], segmentTokens.arrowColor, segmentTokens.groupBackgroundColor, segmentTokens.outlineFocusColor)
+      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--plasma-colors-button-focused,var(--text-accent));"], segmentTokens.arrowColor, segmentTokens.groupBackgroundColor, segmentTokens.outlineFocusColor),
+      filled: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--plasma-colors-button-focused,var(--text-accent));"], segmentTokens.arrowColor, segmentTokens.groupBackgroundColor, segmentTokens.outlineFocusColor)
     },
     size: {
-      xs: /*#__PURE__*/css(["", ":0.5rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight),
-      s: /*#__PURE__*/css(["", ":0.625rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight),
-      m: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight),
-      l: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight)
+      xs: /*#__PURE__*/css(["", ":0.625rem;", ":1.125rem;", ":auto;", ":auto;", ":0.25rem 0.75rem;", ":0.75rem 0;"], segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight, segmentTokens.groupArrowPadding, segmentTokens.groupVerticalArrowPadding),
+      s: /*#__PURE__*/css(["", ":0.75rem;", ":1.375rem;", ":auto;", ":auto;", ":0.5rem 0.875rem;", ":0.875rem 0;"], segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight, segmentTokens.groupArrowPadding, segmentTokens.groupVerticalArrowPadding),
+      m: /*#__PURE__*/css(["", ":0.875rem;", ":1.625rem;", ":auto;", ":auto;", ":0.75rem 1.25rem;", ":1.25rem 0;"], segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight, segmentTokens.groupArrowPadding, segmentTokens.groupVerticalArrowPadding),
+      l: /*#__PURE__*/css(["", ":1rem;", ":1.875rem;", ":auto;", ":auto;", ":1rem 1.375rem;", ":1.375rem 0;"], segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight, segmentTokens.groupArrowPadding, segmentTokens.groupVerticalArrowPadding)
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], segmentTokens.disabledOpacity)
     },
     pilled: {
-      "true": /*#__PURE__*/css(["", ":1.75rem;"], segmentTokens.groupPilledBorderRadius)
+      "true": /*#__PURE__*/css([""])
     },
     stretch: {
       "true": /*#__PURE__*/css([""])
     },
     filledBackground: {
-      "true": /*#__PURE__*/css(["", ":var(--plasma-colors-surface-liquid02);"], segmentTokens.groupFilledBackgroundColor)
+      "true": /*#__PURE__*/css(["", ":var(--surface-transparent-secondary);"], segmentTokens.groupFilledBackgroundColor)
+    },
+    orientation: {
+      vertical: /*#__PURE__*/css([""])
     }
   }
 };