@salutejs/plasma-new-hope 0.169.0-canary.1392.11363976712.0 → 0.169.0-canary.1485.11363524703.0

package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js

@@ -1,4 +1,4 @@
-import './SegmentGroup.styles_79d8q2.css';
+import './SegmentGroup.styles_m9i9p0.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -21,45 +21,9 @@ var StyledArrow = /*#__PURE__*/react.styled('button')({
   "class": "s1qf4oye",
   propsAsIs: false
 });
-var _exp6 = function _exp6() {
-  return StyledArrow;
-};
-var StyledLeftArrow = /*#__PURE__*/react.styled(_exp6())({
-  name: "StyledLeftArrow",
-  "class": "s3pgccr",
-  propsAsIs: true
-});
-var _exp8 = function _exp8() {
-  return StyledArrow;
-};
-var StyledRightArrow = /*#__PURE__*/react.styled(_exp8())({
-  name: "StyledRightArrow",
-  "class": "sax6mvm",
-  propsAsIs: true
-});
-var _exp10 = function _exp10() {
-  return StyledArrow;
-};
-var StyledTopArrow = /*#__PURE__*/react.styled(_exp10())({
-  name: "StyledTopArrow",
-  "class": "s1n81rr8",
-  propsAsIs: true
-});
-var _exp12 = function _exp12() {
-  return StyledArrow;
-};
-var StyledBottomArrow = /*#__PURE__*/react.styled(_exp12())({
-  name: "StyledBottomArrow",
-  "class": "s7ukuvj",
-  propsAsIs: true
-});
 
 exports.StyledArrow = StyledArrow;
-exports.StyledBottomArrow = StyledBottomArrow;
 exports.StyledContent = StyledContent;
 exports.StyledContentWrapper = StyledContentWrapper;
-exports.StyledLeftArrow = StyledLeftArrow;
-exports.StyledRightArrow = StyledRightArrow;
-exports.StyledTopArrow = StyledTopArrow;
 exports.base = base;
 //# sourceMappingURL=SegmentGroup.styles.js.map

package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentGroup.styles.js","sources":["../../../../../src/components/Segment/ui/SegmentGroup/SegmentGroup.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { addFocus } from '../../../../mixins';\nimport { classes, tokens } from '../../tokens';\n\nexport const base = css`\n    display: inline-flex;\n    align-items: center;\n    max-width: 100%;\n\n    &.${classes.segmentVertical} {\n        max-width: none;\n        max-height: 100%;\n    }\n\n    &:before {\n        border-radius: var(${tokens.groupBorderRadius});\n    }\n`;\n\nexport const StyledContent = styled.div`\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    max-width: 100%;\n`;\n\nexport const StyledContentWrapper = styled.div`\n    position: relative;\n    height: 100%;\n    width: 100%;\n\n    display: flex;\n    align-items: center;\n\n    --plasma_private-clip-outline-offset: -0.063rem;\n    --plasma_private-clip-outline-radius: 0.063rem;\n\n    &.${classes.segmentGroupClipScroll} {\n        overflow: scroll;\n        scroll-padding: 0.25rem;\n        overscroll-behavior: contain;\n\n        --plasma_private-clip-outline-offset: 0.063rem;\n        --plasma_private-clip-outline-radius: -0.063rem;\n\n        scrollbar-width: none;\n        ::-webkit-scrollbar {\n            display: none;\n        }\n\n        ${StyledContent} {\n            max-width: none;\n        }\n    }\n`;\n\nexport const StyledArrow = styled.button`\n    display: flex;\n    cursor: pointer;\n    border: none;\n    background-color: transparent;\n    outline: none;\n\n    ${addFocus({\n        outlineSize: '0.063rem',\n        outlineOffset: '-0.125rem',\n        outlineColor: `var(${tokens.outlineFocusColor})`,\n        outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)',\n    })};\n\n    &[disabled] {\n        cursor: not-allowed;\n    }\n`;\n\nexport const StyledLeftArrow = styled(StyledArrow)`\n    padding: var(${tokens.groupArrowPadding});\n    padding-right: 0;\n    margin-right: 0.1875rem;\n    margin-left: 0.125rem;\n`;\n\nexport const StyledRightArrow = styled(StyledArrow)`\n    padding: var(${tokens.groupArrowPadding});\n    padding-left: 0;\n    margin-left: 0.1875rem;\n    margin-right: 0.125rem;\n`;\n\nexport const StyledTopArrow = styled(StyledArrow)`\n    padding: var(${tokens.groupVerticalArrowPadding});\n    padding-bottom: 0;\n    margin-bottom: 0.1875rem;\n`;\n\nexport const StyledBottomArrow = styled(StyledArrow)`\n    padding: var(${tokens.groupVerticalArrowPadding});\n    padding-top: 0;\n    margin-top: 0.1875rem;\n`;\n"],"names":["base","StyledContent","styled","name","class","propsAsIs","StyledContentWrapper","StyledArrow","_exp6","StyledLeftArrow","_exp8","StyledRightArrow","_exp10","StyledTopArrow","_exp12","StyledBottomArrow"],"mappings":";;;;;;AAMO,IAAMA,IAAI,GAahB,UAAA;AAEM,IAAMC,aAAa,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAKlC,EAAA;AAEM,IAAMC,oBAAoB,gBAAGJ,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,sBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CA4BzC,EAAA;AAEM,IAAME,WAAW,gBAAGL,YAAM,CAAA,QAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAiBhC,EAAA;AAAC,IAAAG,KAAA,GA1EgBA,SA0EhBA,KAAAA,GAAA;AAAA,EAAA,OAEoCD,WAAW,CAAA;AAAA,CAAA,CAAA;AAA1C,IAAME,eAAe,gBAAGP,YAAM,CAAAM,KAAA,EAAA,CAAA,CAAA;AAAAL,EAAAA,IAAA,EAAA,iBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAKpC,EAAA;AAAC,IAAAK,KAAA,GAjFgBA,SAiFhBA,KAAAA,GAAA;AAAA,EAAA,OAEqCH,WAAW,CAAA;AAAA,CAAA,CAAA;AAA3C,IAAMI,gBAAgB,gBAAGT,YAAM,CAAAQ,KAAA,EAAA,CAAA,CAAA;AAAAP,EAAAA,IAAA,EAAA,kBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAKrC,EAAA;AAAC,IAAAO,MAAA,GAxFgBA,SAwFhBA,MAAAA,GAAA;AAAA,EAAA,OAEmCL,WAAW,CAAA;AAAA,CAAA,CAAA;AAAzC,IAAMM,cAAc,gBAAGX,YAAM,CAAAU,MAAA,EAAA,CAAA,CAAA;AAAAT,EAAAA,IAAA,EAAA,gBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAInC,EAAA;AAAC,IAAAS,MAAA,GA9FgBA,SA8FhBA,MAAAA,GAAA;AAAA,EAAA,OAEsCP,WAAW,CAAA;AAAA,CAAA,CAAA;AAA5C,IAAMQ,iBAAiB,gBAAGb,YAAM,CAAAY,MAAA,EAAA,CAAA,CAAA;AAAAX,EAAAA,IAAA,EAAA,mBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAItC;;;;;;;;;;;"}
+{"version":3,"file":"SegmentGroup.styles.js","sources":["../../../../../src/components/Segment/ui/SegmentGroup/SegmentGroup.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { addFocus } from '../../../../mixins';\nimport { tokens } from '../../tokens';\n\nexport const base = css`\n    display: inline-flex;\n    align-items: center;\n`;\n\nexport const StyledContent = styled.div`\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n`;\n\nexport const StyledContentWrapper = styled.div`\n    position: relative;\n    height: 100%;\n    margin: 0;\n\n    /* allows correctly display outline focus on segment item */\n    padding: 0.25rem;\n\n    /* stylelint-disable-next-line selector-max-empty-lines, selector-nested-pattern, selector-type-no-unknown */\n    ::-webkit-scrollbar {\n        display: none;\n    }\n\n    overflow-x: auto;\n    overflow-y: hidden;\n    scroll-behavior: smooth;\n    scroll-snap-type: x mandatory;\n`;\n\nexport const StyledArrow = styled.button`\n    display: flex;\n    cursor: pointer;\n    border: none;\n    background-color: transparent;\n    padding: 0;\n    outline: none;\n\n    ${addFocus({\n        outlineSize: '0.063rem',\n        outlineOffset: '-0.125rem',\n        outlineColor: `var(${tokens.outlineFocusColor})`,\n        outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)',\n    })};\n\n    &[disabled] {\n        cursor: not-allowed;\n    }\n`;\n"],"names":["base","StyledContent","styled","name","class","propsAsIs","StyledContentWrapper","StyledArrow"],"mappings":";;;;;;AAMO,IAAMA,IAAI,GAGhB,UAAA;AAEM,IAAMC,aAAa,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAIlC,EAAA;AAEM,IAAMC,oBAAoB,gBAAGJ,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,sBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAiBzC,EAAA;AAEM,IAAME,WAAW,gBAAGL,YAAM,CAAA,QAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAkBhC;;;;;;;"}

package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles_m9i9p0.css

@@ -0,0 +1,4 @@
+.b2sori2{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.sin9wo2{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.spuzt9m{position:relative;height:100%;margin:0;padding:0.25rem;overflow-x:auto;overflow-y:hidden;-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-moz-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;}.spuzt9m::-webkit-scrollbar{display:none;}
+.s1qf4oye{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;position:relative;}.s1qf4oye::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) - 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.s1qf4oye.focus-visible:focus::before,.s1qf4oye[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}.s1qf4oye[disabled]{cursor:not-allowed;}

package/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js

@@ -1,4 +1,4 @@
-import './base_a7w5s0.css';
+import './base_escgtx.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../../../src/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../tokens';\n\nexport const base = css`\n    position: relative;\n\n    &.${String(classes.segmentGroupFilledBackground)} {\n        &:before {\n            content: '';\n            position: absolute;\n            inset: -0.125rem;\n            background-color: var(${tokens.groupFilledBackgroundColor});\n        }\n    }\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAWhB;;;;"}
+{"version":3,"file":"base.js","sources":["../../../../../../../src/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../tokens';\n\nexport const base = css`\n    &.${String(classes.segmentGroupFilledBackground)} {\n        background-color: var(${tokens.groupFilledBackgroundColor});\n    }\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAIhB;;;;"}

package/cjs/components/Segment/ui/SegmentGroup/variations/_filledBackgound/base_escgtx.css

@@ -0,0 +1 @@
+.b13sjoz1.segment-group-filled-background{background-color:var(--plasma-segment-group-filled-background-color);}

package/cjs/components/Segment/ui/SegmentGroup/variations/_pilled/base.js

@@ -1,4 +1,4 @@
-import './base_pxl3nb.css';
+import './base_fqbatz.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/cjs/components/Segment/ui/SegmentGroup/variations/_pilled/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../../../src/components/Segment/ui/SegmentGroup/variations/_pilled/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../tokens';\n\nexport const base = css`\n    &.${String(classes.segmentPilled)} {\n        &:before {\n            border-radius: var(${tokens.groupPilledBorderRadius});\n        }\n    }\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAMhB;;;;"}
+{"version":3,"file":"base.js","sources":["../../../../../../../src/components/Segment/ui/SegmentGroup/variations/_pilled/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../tokens';\n\nexport const base = css`\n    &.${String(classes.segmentPilled)} {\n        --plasma_private-outline-radius: var(${tokens.groupPilledBorderRadius});\n        border-radius: var(${tokens.groupPilledBorderRadius});\n    }\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAKhB;;;;"}

package/cjs/components/Segment/ui/SegmentGroup/variations/_pilled/base_fqbatz.css

@@ -0,0 +1 @@
+.b1re0ohg.segment-pilled{--plasma_private-outline-radius:var(--plasma-segment-group-pilled-border-radius);border-radius:var(--plasma-segment-group-pilled-border-radius);}

package/cjs/components/Segment/ui/SegmentGroup/variations/_size/base.js

@@ -1,4 +1,4 @@
-import './base_18cpjsq.css';
+import './base_m358nl.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/cjs/components/Segment/ui/SegmentGroup/variations/_size/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../../../src/components/Segment/ui/SegmentGroup/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../../../../tokens';\n\nexport const base = css`\n    width: var(${tokens.groupWidth});\n    height: var(${tokens.groupHeight});\n\n    &:before {\n        border-radius: var(${tokens.groupBorderRadius});\n    }\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAOhB;;;;"}
+{"version":3,"file":"base.js","sources":["../../../../../../../src/components/Segment/ui/SegmentGroup/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../../../../tokens';\n\nexport const base = css`\n    width: var(${tokens.groupWidth});\n    height: var(${tokens.groupHeight});\n\n    --plasma_private-outline-radius: var(${tokens.groupBorderRadius});\n    border-radius: var(${tokens.groupBorderRadius});\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAMhB;;;;"}

package/cjs/components/Segment/ui/SegmentGroup/variations/_size/base_m358nl.css

@@ -0,0 +1 @@
+.b16s69xg{width:var(--plasma-segment-group-width);height:var(--plasma-segment-group-height);--plasma_private-outline-radius:var(--plasma-segment-group-border-radius);border-radius:var(--plasma-segment-group-border-radius);}

package/cjs/components/Segment/ui/SegmentItem/SegmentItem.css

@@ -1,12 +1,10 @@
 .base_7kjuok_b1kyapt7__5060a19f{font-family:var(--plasma-segment-item-font-family);font-size:var(--plasma-segment-item-font-size);font-style:var(--plasma-segment-item-font-style);font-weight:var(--plasma-segment-item-font-weight);-webkit-letter-spacing:var(--plasma-segment-item-letter-spacing);-moz-letter-spacing:var(--plasma-segment-item-letter-spacing);-ms-letter-spacing:var(--plasma-segment-item-letter-spacing);letter-spacing:var(--plasma-segment-item-letter-spacing);line-height:var(--plasma-segment-item-lineheight);--plasma_private-outline-radius:var(--plasma-segment-item-border-radius);border-radius:var(--plasma-segment-item-border-radius);width:var(--plasma-segment-item-width);height:var(--plasma-segment-item-height);padding:var(--plasma-segment-item-padding);}
 
-.base_dettiq_b1tykljf__414ed295{color:var(--plasma-segment-item-color);background-color:var(--plasma-segment-item-background-color);}.base_dettiq_b1tykljf__414ed295:hover{color:var(--plasma-segment-item-color-hover);background-color:var(--plasma-segment-item-background-color-hover);}.base_dettiq_b1tykljf__414ed295:hover .base_dettiq_r1gg7fed__414ed295{color:var(--plasma-segment-item-color-hover);}.base_dettiq_b1tykljf__414ed295:hover .base_dettiq_r1gg7fed__414ed295.base_dettiq_segmentAdditionalText__414ed295{color:var(--plasma-segment-item-additional-color-hover);}.base_dettiq_b1tykljf__414ed295.base_dettiq_selectedSegmentItem__414ed295{color:var(--plasma-segment-item-selected-color);background-color:var(--plasma-segment-item-selected-background-color);}.base_dettiq_b1tykljf__414ed295.base_dettiq_selectedSegmentItem__414ed295 .base_dettiq_r1gg7fed__414ed295{color:var(--plasma-segment-item-selected-color);}.base_dettiq_b1tykljf__414ed295.base_dettiq_selectedSegmentItem__414ed295 .base_dettiq_r1gg7fed__414ed295.base_dettiq_segmentAdditionalText__414ed295{color:var(--plasma-segment-item-selected-additional-color);}.base_dettiq_b1tykljf__414ed295.base_dettiq_selectedSegmentItem__414ed295:hover{color:var(--plasma-segment-item-selected-color-hover);background-color:var(--plasma-segment-item-selected-background-color-hover);}.base_dettiq_b1tykljf__414ed295.base_dettiq_selectedSegmentItem__414ed295:hover .base_dettiq_r1gg7fed__414ed295{color:var(--plasma-segment-item-selected-additional-color-hover);}
+.base_1m1u2ys_b1tykljf__1c5eb012{color:var(--plasma-segment-item-color);background-color:var(--plasma-segment-item-background-color);}.base_1m1u2ys_b1tykljf__1c5eb012:hover{color:var(--plasma-segment-item-color-hover);background-color:var(--plasma-segment-item-background-color-hover);}.base_1m1u2ys_b1tykljf__1c5eb012.base_1m1u2ys_selectedSegmentItem__1c5eb012{color:var(--plasma-segment-item-selected-color);background-color:var(--plasma-segment-item-selected-background-color);}.base_1m1u2ys_b1tykljf__1c5eb012.base_1m1u2ys_selectedSegmentItem__1c5eb012:hover{color:var(--plasma-segment-item-selected-color-hover);background-color:var(--plasma-segment-item-selected-background-color-hover);}
 
 .base_y6af8r_bwprat9__353907e1[disabled]{cursor:not-allowed;}.base_y6af8r_bwprat9__353907e1[disabled]:hover{color:var(--plasma-segment-item-color);background-color:var(--plasma-segment-item-background-color);}.base_y6af8r_bwprat9__353907e1[disabled].base_y6af8r_selectedSegmentItem__353907e1:hover{color:var(--plasma-segment-item-selected-color);background-color:var(--plasma-segment-item-selected-background-color);}
 
-.base_omc5u1_b795lc7__e9b122aa.base_omc5u1_segmentPilled__e9b122aa{--plasma_private-outline-radius:var(--plasma-segment-item-pilled-border-radius);border-radius:var(--plasma-segment-item-pilled-border-radius);padding:var(--plasma-segment-item-pilled-padding);}
+.base_15s0fel_b795lc7__4501241a.base_15s0fel_segmentPilled__4501241a{--plasma_private-outline-radius:var(--plasma-segment-item-pilled-border-radius);border-radius:var(--plasma-segment-item-pilled-border-radius);}
 
-.SegmentItem_styles_19oo2vi_bxcdyja__d4eb580c{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-sizing:border-box;min-width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:none;cursor:pointer;margin-left:var(--plasma-segment-item-margin-left);-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;}.SegmentItem_styles_19oo2vi_bxcdyja__d4eb580c:first-child{margin-left:0;}.SegmentItem_styles_19oo2vi_bxcdyja__d4eb580c::before{content:'';position:absolute;top:var(--plasma_private-clip-outline-offset);left:var(--plasma_private-clip-outline-offset);right:var(--plasma_private-clip-outline-offset);bottom:var(--plasma_private-clip-outline-offset);z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) + var(--plasma_private-clip-outline-radius));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.SegmentItem_styles_19oo2vi_bxcdyja__d4eb580c.SegmentItem_styles_19oo2vi_focusVisible__d4eb580c:focus::before,.SegmentItem_styles_19oo2vi_bxcdyja__d4eb580c[data-focus-visible-added]::before{z-index:1;outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}
-.SegmentItem_styles_19oo2vi_sxjfe87__d4eb580c{display:inline-block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:var(--plasma-segment-item-content-padding);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:var(--sxjfe87-0);margin-left:var(--sxjfe87-1);}
-.SegmentItem_styles_19oo2vi_r1gg7fed__d4eb580c{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-segment-item-content-icon-margin);overflow:hidden;color:var(--plasma-segment-item-color);}.SegmentItem_styles_19oo2vi_r1gg7fed__d4eb580c.SegmentItem_styles_19oo2vi_segmentAdditionalText__d4eb580c{text-overflow:ellipsis;overflow:hidden;color:var(--plasma-segment-item-additional-color);}
-.SegmentItem_styles_19oo2vi_lctm1j9__d4eb580c{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-right:var(--plasma-segment-item-content-icon-margin);color:inherit;}
+.SegmentItem_styles_18h1p52_bxcdyja__b7ac762c{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-sizing:border-box;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:none;cursor:pointer;margin-left:var(--plasma-segment-item-margin-left);-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;}.SegmentItem_styles_18h1p52_bxcdyja__b7ac762c:first-child{margin-left:0;}.SegmentItem_styles_18h1p52_bxcdyja__b7ac762c::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) + 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.SegmentItem_styles_18h1p52_bxcdyja__b7ac762c.SegmentItem_styles_18h1p52_focusVisible__b7ac762c:focus::before,.SegmentItem_styles_18h1p52_bxcdyja__b7ac762c[data-focus-visible-added]::before{z-index:1;outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}
+.SegmentItem_styles_18h1p52_sxjfe87__b7ac762c{display:inline-block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

package/cjs/components/Segment/ui/SegmentItem/SegmentItem.js

@@ -15,18 +15,15 @@ var base$3 = require('./variations/_pilled/base.js');
 var SegmentItem_styles = require('./SegmentItem.styles.js');
 var extractTextFrom = require('../../../../utils/extractTextFrom.js');
 
-var _excluded = ["size", "view", "id", "label", "value", "pilled", "contentLeft", "contentRight", "customHandleSelect", "aria-label"];
+var _excluded = ["size", "view", "id", "label", "value", "pilled", "customHandleSelect", "aria-label"];
 var segmentItemRoot = function segmentItemRoot(Root) {
   return /*#__PURE__*/React.forwardRef(function (props, outerRef) {
     var size = props.size,
-      _props$view = props.view,
-      view = _props$view === void 0 ? 'default' : _props$view,
+      view = props.view,
       id = props.id,
       label = props.label,
       value = props.value,
       pilled = props.pilled,
-      contentLeft = props.contentLeft,
-      contentRight = props.contentRight,
       customHandleSelect = props.customHandleSelect,
       ariaLabelExternal = props['aria-label'],
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
@@ -40,8 +37,8 @@ var segmentItemRoot = function segmentItemRoot(Root) {
     var ariaLabelDefault = React.useMemo(function () {
       return extractTextFrom.extractTextFrom(label);
     }, [label]);
-    var pilledClass = pilled ? tokens.classes.segmentPilled : undefined;
-    var xsSize = size === 'xs' ? tokens.classes.segmentXsSize : undefined;
+    var pilledAttr = view !== 'clear' && pilled;
+    var pilledClass = pilledAttr ? tokens.classes.segmentPilled : undefined;
     var isSelected = selectedSegmentItems === null || selectedSegmentItems === void 0 ? void 0 : selectedSegmentItems.includes(value || ariaLabelDefault);
     var selectedClass = isSelected ? tokens.classes.selectedSegmentItem : undefined;
     var handleSelectSegment = React.useCallback(function (event) {
@@ -50,7 +47,7 @@ var segmentItemRoot = function segmentItemRoot(Root) {
       }
       customHandleSelect === null || customHandleSelect === void 0 || customHandleSelect(event);
       handleSelect === null || handleSelect === void 0 || handleSelect(value || ariaLabelDefault);
-    }, [selectionMode, disabledGroup]);
+    }, [selectionMode]);
     return /*#__PURE__*/React.createElement(Root, _rollupPluginBabelHelpers.extends({
       view: view,
       size: size,
@@ -58,14 +55,12 @@ var segmentItemRoot = function segmentItemRoot(Root) {
       ref: outerRef,
       "aria-label": ariaLabelExternal || ariaLabelDefault,
       value: value,
-      pilled: pilled,
-      className: index.cx(selectedClass, pilledClass, xsSize),
+      pilled: pilledAttr,
+      className: index.cx(selectedClass, pilledClass),
       onClick: handleSelectSegment,
       tabIndex: disabledGroup ? -1 : 0,
       disabled: disabledGroup
-    }, rest), contentLeft && /*#__PURE__*/React.createElement(SegmentItem_styles.LeftContent, null, contentLeft), /*#__PURE__*/React.createElement(SegmentItem_styles.StyledContent, null, label || value), contentRight && /*#__PURE__*/React.createElement(SegmentItem_styles.RightContent, {
-      className: typeof contentRight === 'string' ? tokens.classes.segmentAdditionalText : ''
-    }, contentRight));
+    }, rest), /*#__PURE__*/React.createElement(SegmentItem_styles.StyledContent, null, label || value));
   });
 };
 var segmentItemConfig = {
@@ -90,7 +85,7 @@ var segmentItemConfig = {
     }
   },
   defaults: {
-    view: 'default',
+    view: 'clear',
     size: 'xs'
   }
 };

package/cjs/components/Segment/ui/SegmentItem/SegmentItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentItem.js","sources":["../../../../../src/components/Segment/ui/SegmentItem/SegmentItem.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport type { MouseEvent } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../../../engines/types';\nimport { cx, extractTextFrom } from '../../../../utils';\nimport { classes } from '../../tokens';\nimport { useSegmentInner } from '../../SegmentProvider/SegmentProvider';\n\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport type { SegmentItemProps } from './SegmentItem.types';\nimport { StyledContent, base, LeftContent, RightContent } from './SegmentItem.styles';\n\nexport const segmentItemRoot = (Root: RootProps<HTMLLabelElement, SegmentItemProps>) =>\n    forwardRef<HTMLLabelElement, SegmentItemProps>((props, outerRef) => {\n        const {\n            size,\n            view = 'default',\n            id,\n            label,\n            value,\n            pilled,\n            contentLeft,\n            contentRight,\n            customHandleSelect,\n            'aria-label': ariaLabelExternal,\n            ...rest\n        } = props;\n        const { selectionMode, disabledGroup, handleSelect, selectedSegmentItems } = useSegmentInner();\n\n        const uniqId = safeUseId();\n        const segmentId = id || `label-${uniqId}`;\n\n        const ariaLabelDefault = useMemo(() => extractTextFrom(label), [label]);\n        const pilledClass = pilled ? classes.segmentPilled : undefined;\n        const xsSize = size === 'xs' ? classes.segmentXsSize : undefined;\n\n        const isSelected = selectedSegmentItems?.includes(value || ariaLabelDefault);\n        const selectedClass = isSelected ? classes.selectedSegmentItem : undefined;\n\n        const handleSelectSegment = useCallback(\n            (event: MouseEvent<HTMLButtonElement>) => {\n                if (disabledGroup) {\n                    return;\n                }\n\n                customHandleSelect?.(event);\n                handleSelect?.(value || ariaLabelDefault);\n            },\n            [selectionMode, disabledGroup],\n        );\n\n        return (\n            <Root\n                view={view}\n                size={size}\n                id={segmentId}\n                ref={outerRef}\n                aria-label={ariaLabelExternal || ariaLabelDefault}\n                value={value}\n                pilled={pilled}\n                className={cx(selectedClass, pilledClass, xsSize)}\n                onClick={handleSelectSegment}\n                tabIndex={disabledGroup ? -1 : 0}\n                disabled={disabledGroup}\n                {...rest}\n            >\n                {contentLeft && <LeftContent>{contentLeft}</LeftContent>}\n                <StyledContent>{label || value}</StyledContent>\n                {contentRight && (\n                    <RightContent className={typeof contentRight === 'string' ? classes.segmentAdditionalText : ''}>\n                        {contentRight}\n                    </RightContent>\n                )}\n            </Root>\n        );\n    });\n\nexport const segmentItemConfig = {\n    name: 'SegmentItem',\n    tag: 'button',\n    layout: segmentItemRoot,\n    base,\n    variations: {\n        size: {\n            css: sizeCSS,\n        },\n        view: {\n            css: viewCSS,\n        },\n        disabled: {\n            css: disabledCSS,\n            attrs: true,\n        },\n        pilled: {\n            css: pilledCSS,\n            attrs: true,\n        },\n    },\n    defaults: {\n        view: 'default',\n        size: 'xs',\n    },\n};\n"],"names":["segmentItemRoot","Root","forwardRef","props","outerRef","size","_props$view","view","id","label","value","pilled","contentLeft","contentRight","customHandleSelect","ariaLabelExternal","rest","_objectWithoutProperties","_excluded","_useSegmentInner","useSegmentInner","selectionMode","disabledGroup","handleSelect","selectedSegmentItems","uniqId","safeUseId","segmentId","concat","ariaLabelDefault","useMemo","extractTextFrom","pilledClass","classes","segmentPilled","undefined","xsSize","segmentXsSize","isSelected","includes","selectedClass","selectedSegmentItem","handleSelectSegment","useCallback","event","React","createElement","_extends","ref","className","cx","onClick","tabIndex","disabled","LeftContent","StyledContent","RightContent","segmentAdditionalText","segmentItemConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","pilledCSS","defaults"],"mappings":"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"}
+{"version":3,"file":"SegmentItem.js","sources":["../../../../../src/components/Segment/ui/SegmentItem/SegmentItem.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport type { MouseEvent } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../../../engines/types';\nimport { cx, extractTextFrom } from '../../../../utils';\nimport { classes } from '../../tokens';\nimport { useSegmentInner } from '../../SegmentProvider/SegmentProvider';\n\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport type { SegmentItemProps } from './SegmentItem.types';\nimport { StyledContent, base } from './SegmentItem.styles';\n\nexport const segmentItemRoot = (Root: RootProps<HTMLLabelElement, SegmentItemProps>) =>\n    forwardRef<HTMLLabelElement, SegmentItemProps>((props, outerRef) => {\n        const {\n            size,\n            view,\n            id,\n            label,\n            value,\n            pilled,\n            customHandleSelect,\n            'aria-label': ariaLabelExternal,\n            ...rest\n        } = props;\n        const { selectionMode, disabledGroup, handleSelect, selectedSegmentItems } = useSegmentInner();\n\n        const uniqId = safeUseId();\n        const segmentId = id || `label-${uniqId}`;\n\n        const ariaLabelDefault = useMemo(() => extractTextFrom(label), [label]);\n        const pilledAttr = view !== 'clear' && pilled;\n        const pilledClass = pilledAttr ? classes.segmentPilled : undefined;\n\n        const isSelected = selectedSegmentItems?.includes(value || ariaLabelDefault);\n        const selectedClass = isSelected ? classes.selectedSegmentItem : undefined;\n\n        const handleSelectSegment = useCallback(\n            (event: MouseEvent<HTMLButtonElement>) => {\n                if (disabledGroup) {\n                    return;\n                }\n\n                customHandleSelect?.(event);\n                handleSelect?.(value || ariaLabelDefault);\n            },\n            [selectionMode],\n        );\n\n        return (\n            <Root\n                view={view}\n                size={size}\n                id={segmentId}\n                ref={outerRef}\n                aria-label={ariaLabelExternal || ariaLabelDefault}\n                value={value}\n                pilled={pilledAttr}\n                className={cx(selectedClass, pilledClass)}\n                onClick={handleSelectSegment}\n                tabIndex={disabledGroup ? -1 : 0}\n                disabled={disabledGroup}\n                {...rest}\n            >\n                <StyledContent>{label || value}</StyledContent>\n            </Root>\n        );\n    });\n\nexport const segmentItemConfig = {\n    name: 'SegmentItem',\n    tag: 'button',\n    layout: segmentItemRoot,\n    base,\n    variations: {\n        size: {\n            css: sizeCSS,\n        },\n        view: {\n            css: viewCSS,\n        },\n        disabled: {\n            css: disabledCSS,\n            attrs: true,\n        },\n        pilled: {\n            css: pilledCSS,\n            attrs: true,\n        },\n    },\n    defaults: {\n        view: 'clear',\n        size: 'xs',\n    },\n};\n"],"names":["segmentItemRoot","Root","forwardRef","props","outerRef","size","view","id","label","value","pilled","customHandleSelect","ariaLabelExternal","rest","_objectWithoutProperties","_excluded","_useSegmentInner","useSegmentInner","selectionMode","disabledGroup","handleSelect","selectedSegmentItems","uniqId","safeUseId","segmentId","concat","ariaLabelDefault","useMemo","extractTextFrom","pilledAttr","pilledClass","classes","segmentPilled","undefined","isSelected","includes","selectedClass","selectedSegmentItem","handleSelectSegment","useCallback","event","React","createElement","_extends","ref","className","cx","onClick","tabIndex","disabled","StyledContent","segmentItemConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","pilledCSS","defaults"],"mappings":"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"}

package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js

@@ -1,46 +1,17 @@
-import './SegmentItem.styles_19oo2vi.css';
+import './SegmentItem.styles_18h1p52.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('@linaria/react');
-var tokens = require('../../tokens.js');
 
 var base = "bxcdyja";
-var _exp5 = function _exp5() {
-  return function (_ref) {
-    var hasRightMargin = _ref.hasRightMargin;
-    return hasRightMargin ? "var(".concat(tokens.tokens.itemIconMargin, ")") : '0';
-  };
-};
-var _exp6 = function _exp6() {
-  return function (_ref2) {
-    var hasLeftMargin = _ref2.hasLeftMargin;
-    return hasLeftMargin ? "var(".concat(tokens.tokens.itemIconMargin, ")") : '0';
-  };
-};
 var StyledContent = /*#__PURE__*/react.styled('div')({
   name: "StyledContent",
   "class": "sxjfe87",
-  propsAsIs: false,
-  vars: {
-    "sxjfe87-0": [/*#__PURE__*/_exp5()],
-    "sxjfe87-1": [/*#__PURE__*/_exp6()]
-  }
-});
-var RightContent = /*#__PURE__*/react.styled('div')({
-  name: "RightContent",
-  "class": "r1gg7fed",
-  propsAsIs: false
-});
-var LeftContent = /*#__PURE__*/react.styled('div')({
-  name: "LeftContent",
-  "class": "lctm1j9",
   propsAsIs: false
 });
 
-exports.LeftContent = LeftContent;
-exports.RightContent = RightContent;
 exports.StyledContent = StyledContent;
 exports.base = base;
 //# sourceMappingURL=SegmentItem.styles.js.map

package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentItem.styles.js","sources":["../../../../../src/components/Segment/ui/SegmentItem/SegmentItem.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\nimport { css } from '@linaria/core';\n\nimport { addFocus, applyEllipsis } from '../../../../mixins';\nimport { classes, tokens } from '../../tokens';\n\nexport const base = css`\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    min-width: 0;\n\n    appearance: none;\n    border: none;\n    outline: none;\n    cursor: pointer;\n    margin-left: var(${tokens.itemMarginLeft});\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n    &:first-child {\n        margin-left: 0;\n    }\n\n    ${addFocus({\n        outlineSize: '0.063rem',\n        outlineOffset: 'var(--plasma_private-clip-outline-offset)',\n        outlineColor: `var(${tokens.outlineFocusColor})`,\n        outlineRadius: 'calc(var(--plasma_private-outline-radius) + var(--plasma_private-clip-outline-radius))',\n        customFocusRules: `\n            &.focus-visible:focus,\n            &[data-focus-visible-added] {\n                &::before {\n                    z-index: 1;\n                    outline: none;\n                    box-shadow: 0 0 0 0.063rem var(${tokens.outlineFocusColor});\n                }\n            }\n        `,\n    })};\n`;\n\nexport const StyledContent = styled.div<{\n    hasRightMargin?: boolean;\n    hasLeftMargin?: boolean;\n    isSecondary?: boolean;\n}>`\n    display: inline-block;\n    width: fit-content;\n    padding: var(${tokens.itemContentPadding});\n    ${applyEllipsis()};\n\n    margin-right: ${({ hasRightMargin }) => (hasRightMargin ? `var(${tokens.itemIconMargin})` : '0')};\n    margin-left: ${({ hasLeftMargin }) => (hasLeftMargin ? `var(${tokens.itemIconMargin})` : '0')};\n`;\n\nexport const RightContent = styled.div`\n    display: flex;\n    margin-left: var(${tokens.itemIconMargin});\n    overflow: hidden;\n\n    color: var(${tokens.itemColor});\n\n    &.${classes.segmentAdditionalText} {\n        text-overflow: ellipsis;\n        overflow: hidden;\n        color: var(${tokens.itemAdditionalColor});\n    }\n`;\n\nexport const LeftContent = styled.div`\n    display: flex;\n    margin-right: var(${tokens.itemIconMargin});\n\n    color: inherit;\n`;\n"],"names":["base","_exp5","_ref","hasRightMargin","concat","tokens","itemIconMargin","_exp6","_ref2","hasLeftMargin","StyledContent","styled","name","class","propsAsIs","vars","RightContent","LeftContent"],"mappings":";;;;;;;AAMO,IAAMA,IAAI,GAmChB,UAAA;AAAC,IAAAC,KAAA,GAxCgBA,SAwChBA,KAAAA,GAAA;AAAA,EAAA,OAYkB,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,cAAAA,GAAAA,IAAAA,CAAAA,cAAAA,CAAAA;IAAAA,OAAsBA,cAAc,UAAAC,MAAA,CAAUC,aAAM,CAACC,cAAe,SAAK,GAAI,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,KAAA,GApDlFA,SAoDkFA,KAAAA,GAAA;AAAA,EAAA,OACjF,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGC,aAAAA,GAAAA,KAAAA,CAAAA,aAAAA,CAAAA;IAAAA,OAAqBA,aAAa,UAAAL,MAAA,CAAUC,aAAM,CAACC,cAAe,SAAK,GAAI,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAX1F,IAAMI,aAAa,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAC,EAAAA,IAAA,EAAA;AAAA,IAAA,WAAA,EAAA,cAUfd,KAAgF,EAAA,CAAA;AAAA,IAAA,WAAA,EAAA,cACjFM,KAA8E,EAAA,CAAA;AAAA,GAAA;AAAA,CAChG,EAAA;AAEM,IAAMS,YAAY,gBAAGL,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,cAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAYjC,EAAA;AAEM,IAAMG,WAAW,gBAAGN,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAKhC;;;;;;;"}
+{"version":3,"file":"SegmentItem.styles.js","sources":["../../../../../src/components/Segment/ui/SegmentItem/SegmentItem.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\nimport { css } from '@linaria/core';\n\nimport { addFocus, applyEllipsis } from '../../../../mixins';\nimport { tokens } from '../../tokens';\n\nexport const base = css`\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    align-items: center;\n\n    appearance: none;\n    border: none;\n    outline: none;\n    cursor: pointer;\n    margin-left: var(${tokens.itemMarginLeft});\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n    &:first-child {\n        margin-left: 0;\n    }\n\n    ${addFocus({\n        outlineSize: '0.063rem',\n        outlineOffset: '-0.125rem',\n        outlineColor: `var(${tokens.outlineFocusColor})`,\n        outlineRadius: 'calc(var(--plasma_private-outline-radius) + 0.063rem)',\n        customFocusRules: `\n            &.focus-visible:focus,\n            &[data-focus-visible-added] {\n                &::before {\n                    z-index: 1;\n                    outline: none;\n                    box-shadow: 0 0 0 0.063rem var(${tokens.outlineFocusColor});\n                }\n            }\n        `,\n    })};\n`;\n\nexport const StyledContent = styled.div`\n    display: inline-block;\n    width: fit-content;\n    ${applyEllipsis()};\n`;\n"],"names":["base","StyledContent","styled","name","class","propsAsIs"],"mappings":";;;;;;AAMO,IAAMA,IAAI,GAmChB,UAAA;AAEM,IAAMC,aAAa,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAIlC;;;;;"}

package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles_18h1p52.css

@@ -0,0 +1,2 @@
+.bxcdyja{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-sizing:border-box;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:none;cursor:pointer;margin-left:var(--plasma-segment-item-margin-left);-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;}.bxcdyja:first-child{margin-left:0;}.bxcdyja::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) + 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.bxcdyja.focus-visible:focus::before,.bxcdyja[data-focus-visible-added]::before{z-index:1;outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}
+.sxjfe87{display:inline-block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

package/cjs/components/Segment/ui/SegmentItem/variations/_pilled/base.js

@@ -1,4 +1,4 @@
-import './base_omc5u1.css';
+import './base_15s0fel.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/cjs/components/Segment/ui/SegmentItem/variations/_pilled/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../../../src/components/Segment/ui/SegmentItem/variations/_pilled/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../tokens';\n\nexport const base = css`\n    &.${String(classes.segmentPilled)} {\n        --plasma_private-outline-radius: var(${tokens.itemPilledBorderRadius});\n        border-radius: var(${tokens.itemPilledBorderRadius});\n\n        padding: var(${tokens.itemPilledPadding});\n    }\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAOhB;;;;"}
+{"version":3,"file":"base.js","sources":["../../../../../../../src/components/Segment/ui/SegmentItem/variations/_pilled/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../tokens';\n\nexport const base = css`\n    &.${String(classes.segmentPilled)} {\n        --plasma_private-outline-radius: var(${tokens.itemPilledBorderRadius});\n        border-radius: var(${tokens.itemPilledBorderRadius});\n    }\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAKhB;;;;"}

package/cjs/components/Segment/ui/SegmentItem/variations/_pilled/{base_omc5u1.css → base_15s0fel.css}

@@ -1 +1 @@
-.b795lc7.segment-pilled{--plasma_private-outline-radius:var(--plasma-segment-item-pilled-border-radius);border-radius:var(--plasma-segment-item-pilled-border-radius);padding:var(--plasma-segment-item-pilled-padding);}
+.b795lc7.segment-pilled{--plasma_private-outline-radius:var(--plasma-segment-item-pilled-border-radius);border-radius:var(--plasma-segment-item-pilled-border-radius);}

package/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js

@@ -1,4 +1,4 @@
-import './base_dettiq.css';
+import './base_1m1u2ys.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../../../src/components/Segment/ui/SegmentItem/variations/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../tokens';\nimport { RightContent } from '../../SegmentItem.styles';\n\nexport const base = css`\n    color: var(${tokens.itemColor});\n    background-color: var(${tokens.itemBackgroundColor});\n\n    &:hover {\n        color: var(${tokens.itemColorHover});\n        background-color: var(${tokens.itemBackgroundColorHover});\n\n        ${RightContent} {\n            color: var(${tokens.itemColorHover});\n        }\n\n        ${RightContent}.${classes.segmentAdditionalText} {\n            color: var(${tokens.itemAdditionalColorHover});\n        }\n    }\n\n    &.${String(classes.selectedSegmentItem)} {\n        color: var(${tokens.itemSelectedColor});\n        background-color: var(${tokens.itemSelectedBackgroundColor});\n\n        ${RightContent} {\n            color: var(${tokens.itemSelectedColor});\n        }\n\n        ${RightContent}.${classes.segmentAdditionalText} {\n            color: var(${tokens.itemSelectedAdditionalColor});\n        }\n\n        &:hover {\n            color: var(${tokens.itemSelectedColorHover});\n            background-color: var(${tokens.itemSelectedBackgroundColorHover});\n\n            ${RightContent} {\n                color: var(${tokens.itemSelectedAdditionalColorHover});\n            }\n        }\n    }\n`;\n"],"names":["base"],"mappings":";;;;AAKO,IAAMA,IAAI,GAsChB;;;;"}
+{"version":3,"file":"base.js","sources":["../../../../../../../src/components/Segment/ui/SegmentItem/variations/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../tokens';\n\nexport const base = css`\n    color: var(${tokens.itemColor});\n    background-color: var(${tokens.itemBackgroundColor});\n\n    &:hover {\n        color: var(${tokens.itemColorHover});\n        background-color: var(${tokens.itemBackgroundColorHover});\n    }\n\n    &.${String(classes.selectedSegmentItem)} {\n        color: var(${tokens.itemSelectedColor});\n        background-color: var(${tokens.itemSelectedBackgroundColor});\n\n        &:hover {\n            color: var(${tokens.itemSelectedColorHover});\n            background-color: var(${tokens.itemSelectedBackgroundColorHover});\n        }\n    }\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAkBhB;;;;"}

package/cjs/components/Segment/ui/SegmentItem/variations/_view/base_1m1u2ys.css

@@ -0,0 +1 @@
+.b1tykljf{color:var(--plasma-segment-item-color);background-color:var(--plasma-segment-item-background-color);}.b1tykljf:hover{color:var(--plasma-segment-item-color-hover);background-color:var(--plasma-segment-item-background-color-hover);}.b1tykljf.selected-segment-item{color:var(--plasma-segment-item-selected-color);background-color:var(--plasma-segment-item-selected-background-color);}.b1tykljf.selected-segment-item:hover{color:var(--plasma-segment-item-selected-color-hover);background-color:var(--plasma-segment-item-selected-background-color-hover);}

package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var plasmaCore = require('@salutejs/plasma-core');
-require('@linaria/react');
 var IconDisclosureLeft = require('../../../../_Icon/Icons/IconDisclosureLeft.js');
 var IconDisclosureRight = require('../../../../_Icon/Icons/IconDisclosureRight.js');
+require('@linaria/react');
 var tokens = require('../../../tokens.js');
 var index = require('../../../../../utils/index.js');
 var TabsContext = require('../../../TabsContext.js');

package/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js

@@ -8,9 +8,9 @@ var plasmaCore = require('@salutejs/plasma-core');
 var tokens = require('../../../tokens.js');
 var index = require('../../../../../utils/index.js');
 var TabsContext = require('../../../TabsContext.js');
-require('@linaria/react');
 var IconDisclosureLeft = require('../../../../_Icon/Icons/IconDisclosureLeft.js');
 var IconDisclosureRight = require('../../../../_Icon/Icons/IconDisclosureRight.js');
+require('@linaria/react');
 var VerticalTabs_styles = require('./VerticalTabs.styles.js');
 var base = require('./variations/_size/base.js');
 var base$1 = require('./variations/_view/base.js');

package/cjs/index.css

@@ -387,41 +387,33 @@
 
 .Tooltip_aay375_s1cz8cv8__390cdb21{--plasma-popover-arrow-mask-width:var(--plasma-tooltip-arrow-mask-width);--plasma-popover-arrow-mask-height:var(--plasma-tooltip-arrow-mask-height);--plasma-popover-arrow-mask-image:var(--plasma-tooltip-arrow-mask-image);--plasma-popover-arrow-background:var(--plasma-tooltip-arrow-background);--plasma-popover-arrow-height:var(--plasma-tooltip-arrow-height);--plasma-popover-arrow-edge-margin:var(--plasma-tooltip-arrow-edge-margin);}.Tooltip_aay375_s1cz8cv8__390cdb21.Tooltip_aay375_tooltipAnimated__390cdb21 .Tooltip_aay375_popoverRoot__390cdb21{-webkit-transition:opacity 200ms ease-in-out,visibility 200ms ease-in-out;transition:opacity 200ms ease-in-out,visibility 200ms ease-in-out;}
 
-.base_18cpjsq_b16s69xg__2d529a83{width:var(--plasma-segment-group-width);height:var(--plasma-segment-group-height);}.base_18cpjsq_b16s69xg__2d529a83:before{border-radius:var(--plasma-segment-group-border-radius);}
+.base_m358nl_b16s69xg__c51d77df{width:var(--plasma-segment-group-width);height:var(--plasma-segment-group-height);--plasma_private-outline-radius:var(--plasma-segment-group-border-radius);border-radius:var(--plasma-segment-group-border-radius);}
 
 .base_hsx1sr_bo2wq9n__1e99adcc{background-color:var(--plasma-segment-group-background-color);}
 
 .base_1n8kaiq_bvqq8jn__3fd538b8[disabled]{opacity:var(--plasma-segment-disabled-opacity);cursor:not-allowed;}
 
-.base_pxl3nb_b1re0ohg__002ee1a3.base_pxl3nb_segmentPilled__002ee1a3:before{border-radius:var(--plasma-segment-group-pilled-border-radius);}
+.base_fqbatz_b1re0ohg__24d92a6d.base_fqbatz_segmentPilled__24d92a6d{--plasma_private-outline-radius:var(--plasma-segment-group-pilled-border-radius);border-radius:var(--plasma-segment-group-pilled-border-radius);}
 
-.base_a7w5s0_b13sjoz1__a0df01cb{position:relative;}.base_a7w5s0_b13sjoz1__a0df01cb.base_a7w5s0_segmentGroupFilledBackground__a0df01cb:before{content:'';position:absolute;inset:-0.125rem;background-color:var(--plasma-segment-group-filled-background-color);}
+.base_escgtx_b13sjoz1__a1f0e6e1.base_escgtx_segmentGroupFilledBackground__a1f0e6e1{background-color:var(--plasma-segment-group-filled-background-color);}
 
 .base_74wj10_b1bb2stb__3b76a172.base_74wj10_segmentStretched__3b76a172{width:100%;}.base_74wj10_b1bb2stb__3b76a172.base_74wj10_segmentStretched__3b76a172 .base_74wj10_spuzt9m__3b76a172,.base_74wj10_b1bb2stb__3b76a172.base_74wj10_segmentStretched__3b76a172 .base_74wj10_sin9wo2__3b76a172,.base_74wj10_b1bb2stb__3b76a172.base_74wj10_segmentStretched__3b76a172 .base_74wj10_sin9wo2__3b76a172 > button{width:100%;}
 
-.base_1ejecy9_bb2d6sr__61b9631c.base_1ejecy9_segmentVertical__61b9631c{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.base_1ejecy9_bb2d6sr__61b9631c.base_1ejecy9_segmentVertical__61b9631c .base_1ejecy9_spuzt9m__61b9631c{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.base_1ejecy9_bb2d6sr__61b9631c.base_1ejecy9_segmentVertical__61b9631c .base_1ejecy9_sin9wo2__61b9631c{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
-
-.SegmentGroup_styles_79d8q2_b2sori2__2f429695{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;}.SegmentGroup_styles_79d8q2_b2sori2__2f429695.SegmentGroup_styles_79d8q2_segmentVertical__2f429695{max-width:none;max-height:100%;}.SegmentGroup_styles_79d8q2_b2sori2__2f429695:before{border-radius:var(--plasma-segment-group-border-radius);}
-.SegmentGroup_styles_79d8q2_sin9wo2__2f429695{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;}
-.SegmentGroup_styles_79d8q2_spuzt9m__2f429695{position:relative;height:100%;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;--plasma_private-clip-outline-offset:-0.063rem;--plasma_private-clip-outline-radius:0.063rem;}.SegmentGroup_styles_79d8q2_spuzt9m__2f429695.SegmentGroup_styles_79d8q2_segmentGroupClipScroll__2f429695{overflow:scroll;-webkit-scroll-padding:0.25rem;-moz-scroll-padding:0.25rem;-ms-scroll-padding:0.25rem;scroll-padding:0.25rem;overscroll-behavior:contain;--plasma_private-clip-outline-offset:0.063rem;--plasma_private-clip-outline-radius:-0.063rem;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.SegmentGroup_styles_79d8q2_spuzt9m__2f429695.SegmentGroup_styles_79d8q2_segmentGroupClipScroll__2f429695::-webkit-scrollbar{display:none;}.SegmentGroup_styles_79d8q2_spuzt9m__2f429695.SegmentGroup_styles_79d8q2_segmentGroupClipScroll__2f429695 .SegmentGroup_styles_79d8q2_sin9wo2__2f429695{max-width:none;}
-.SegmentGroup_styles_79d8q2_s1qf4oye__2f429695{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;outline:none;position:relative;}.SegmentGroup_styles_79d8q2_s1qf4oye__2f429695::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) - 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.SegmentGroup_styles_79d8q2_s1qf4oye__2f429695.SegmentGroup_styles_79d8q2_focusVisible__2f429695:focus::before,.SegmentGroup_styles_79d8q2_s1qf4oye__2f429695[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}.SegmentGroup_styles_79d8q2_s1qf4oye__2f429695[disabled]{cursor:not-allowed;}
-.SegmentGroup_styles_79d8q2_s3pgccr__2f429695.SegmentGroup_styles_79d8q2_s1qf4oye__2f429695{padding:var(--plasma-segment-group-arrow-padding);padding-right:0;margin-right:0.1875rem;margin-left:0.125rem;}
-.SegmentGroup_styles_79d8q2_sax6mvm__2f429695.SegmentGroup_styles_79d8q2_s1qf4oye__2f429695{padding:var(--plasma-segment-group-arrow-padding);padding-left:0;margin-left:0.1875rem;margin-right:0.125rem;}
-.SegmentGroup_styles_79d8q2_s1n81rr8__2f429695.SegmentGroup_styles_79d8q2_s1qf4oye__2f429695{padding:var(--plasma-segment-group-vertical-arrow-padding);padding-bottom:0;margin-bottom:0.1875rem;}
-.SegmentGroup_styles_79d8q2_s7ukuvj__2f429695.SegmentGroup_styles_79d8q2_s1qf4oye__2f429695{padding:var(--plasma-segment-group-vertical-arrow-padding);padding-top:0;margin-top:0.1875rem;}
+.SegmentGroup_styles_m9i9p0_b2sori2__a29c0677{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.SegmentGroup_styles_m9i9p0_sin9wo2__a29c0677{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.SegmentGroup_styles_m9i9p0_spuzt9m__a29c0677{position:relative;height:100%;margin:0;padding:0.25rem;overflow-x:auto;overflow-y:hidden;-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-moz-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;}.SegmentGroup_styles_m9i9p0_spuzt9m__a29c0677::-webkit-scrollbar{display:none;}
+.SegmentGroup_styles_m9i9p0_s1qf4oye__a29c0677{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;position:relative;}.SegmentGroup_styles_m9i9p0_s1qf4oye__a29c0677::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) - 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.SegmentGroup_styles_m9i9p0_s1qf4oye__a29c0677.SegmentGroup_styles_m9i9p0_focusVisible__a29c0677:focus::before,.SegmentGroup_styles_m9i9p0_s1qf4oye__a29c0677[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}.SegmentGroup_styles_m9i9p0_s1qf4oye__a29c0677[disabled]{cursor:not-allowed;}
 
 .base_7kjuok_b1kyapt7__5060a19f{font-family:var(--plasma-segment-item-font-family);font-size:var(--plasma-segment-item-font-size);font-style:var(--plasma-segment-item-font-style);font-weight:var(--plasma-segment-item-font-weight);-webkit-letter-spacing:var(--plasma-segment-item-letter-spacing);-moz-letter-spacing:var(--plasma-segment-item-letter-spacing);-ms-letter-spacing:var(--plasma-segment-item-letter-spacing);letter-spacing:var(--plasma-segment-item-letter-spacing);line-height:var(--plasma-segment-item-lineheight);--plasma_private-outline-radius:var(--plasma-segment-item-border-radius);border-radius:var(--plasma-segment-item-border-radius);width:var(--plasma-segment-item-width);height:var(--plasma-segment-item-height);padding:var(--plasma-segment-item-padding);}
 
-.base_dettiq_b1tykljf__414ed295{color:var(--plasma-segment-item-color);background-color:var(--plasma-segment-item-background-color);}.base_dettiq_b1tykljf__414ed295:hover{color:var(--plasma-segment-item-color-hover);background-color:var(--plasma-segment-item-background-color-hover);}.base_dettiq_b1tykljf__414ed295:hover .base_dettiq_r1gg7fed__414ed295{color:var(--plasma-segment-item-color-hover);}.base_dettiq_b1tykljf__414ed295:hover .base_dettiq_r1gg7fed__414ed295.base_dettiq_segmentAdditionalText__414ed295{color:var(--plasma-segment-item-additional-color-hover);}.base_dettiq_b1tykljf__414ed295.base_dettiq_selectedSegmentItem__414ed295{color:var(--plasma-segment-item-selected-color);background-color:var(--plasma-segment-item-selected-background-color);}.base_dettiq_b1tykljf__414ed295.base_dettiq_selectedSegmentItem__414ed295 .base_dettiq_r1gg7fed__414ed295{color:var(--plasma-segment-item-selected-color);}.base_dettiq_b1tykljf__414ed295.base_dettiq_selectedSegmentItem__414ed295 .base_dettiq_r1gg7fed__414ed295.base_dettiq_segmentAdditionalText__414ed295{color:var(--plasma-segment-item-selected-additional-color);}.base_dettiq_b1tykljf__414ed295.base_dettiq_selectedSegmentItem__414ed295:hover{color:var(--plasma-segment-item-selected-color-hover);background-color:var(--plasma-segment-item-selected-background-color-hover);}.base_dettiq_b1tykljf__414ed295.base_dettiq_selectedSegmentItem__414ed295:hover .base_dettiq_r1gg7fed__414ed295{color:var(--plasma-segment-item-selected-additional-color-hover);}
+.base_1m1u2ys_b1tykljf__1c5eb012{color:var(--plasma-segment-item-color);background-color:var(--plasma-segment-item-background-color);}.base_1m1u2ys_b1tykljf__1c5eb012:hover{color:var(--plasma-segment-item-color-hover);background-color:var(--plasma-segment-item-background-color-hover);}.base_1m1u2ys_b1tykljf__1c5eb012.base_1m1u2ys_selectedSegmentItem__1c5eb012{color:var(--plasma-segment-item-selected-color);background-color:var(--plasma-segment-item-selected-background-color);}.base_1m1u2ys_b1tykljf__1c5eb012.base_1m1u2ys_selectedSegmentItem__1c5eb012:hover{color:var(--plasma-segment-item-selected-color-hover);background-color:var(--plasma-segment-item-selected-background-color-hover);}
 
 .base_y6af8r_bwprat9__353907e1[disabled]{cursor:not-allowed;}.base_y6af8r_bwprat9__353907e1[disabled]:hover{color:var(--plasma-segment-item-color);background-color:var(--plasma-segment-item-background-color);}.base_y6af8r_bwprat9__353907e1[disabled].base_y6af8r_selectedSegmentItem__353907e1:hover{color:var(--plasma-segment-item-selected-color);background-color:var(--plasma-segment-item-selected-background-color);}
 
-.base_omc5u1_b795lc7__e9b122aa.base_omc5u1_segmentPilled__e9b122aa{--plasma_private-outline-radius:var(--plasma-segment-item-pilled-border-radius);border-radius:var(--plasma-segment-item-pilled-border-radius);padding:var(--plasma-segment-item-pilled-padding);}
+.base_15s0fel_b795lc7__4501241a.base_15s0fel_segmentPilled__4501241a{--plasma_private-outline-radius:var(--plasma-segment-item-pilled-border-radius);border-radius:var(--plasma-segment-item-pilled-border-radius);}
 
-.SegmentItem_styles_19oo2vi_bxcdyja__d4eb580c{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-sizing:border-box;min-width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:none;cursor:pointer;margin-left:var(--plasma-segment-item-margin-left);-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;}.SegmentItem_styles_19oo2vi_bxcdyja__d4eb580c:first-child{margin-left:0;}.SegmentItem_styles_19oo2vi_bxcdyja__d4eb580c::before{content:'';position:absolute;top:var(--plasma_private-clip-outline-offset);left:var(--plasma_private-clip-outline-offset);right:var(--plasma_private-clip-outline-offset);bottom:var(--plasma_private-clip-outline-offset);z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) + var(--plasma_private-clip-outline-radius));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.SegmentItem_styles_19oo2vi_bxcdyja__d4eb580c.SegmentItem_styles_19oo2vi_focusVisible__d4eb580c:focus::before,.SegmentItem_styles_19oo2vi_bxcdyja__d4eb580c[data-focus-visible-added]::before{z-index:1;outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}
-.SegmentItem_styles_19oo2vi_sxjfe87__d4eb580c{display:inline-block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:var(--plasma-segment-item-content-padding);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:var(--sxjfe87-0);margin-left:var(--sxjfe87-1);}
-.SegmentItem_styles_19oo2vi_r1gg7fed__d4eb580c{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-segment-item-content-icon-margin);overflow:hidden;color:var(--plasma-segment-item-color);}.SegmentItem_styles_19oo2vi_r1gg7fed__d4eb580c.SegmentItem_styles_19oo2vi_segmentAdditionalText__d4eb580c{text-overflow:ellipsis;overflow:hidden;color:var(--plasma-segment-item-additional-color);}
-.SegmentItem_styles_19oo2vi_lctm1j9__d4eb580c{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-right:var(--plasma-segment-item-content-icon-margin);color:inherit;}
+.SegmentItem_styles_18h1p52_bxcdyja__b7ac762c{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-sizing:border-box;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:none;cursor:pointer;margin-left:var(--plasma-segment-item-margin-left);-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;}.SegmentItem_styles_18h1p52_bxcdyja__b7ac762c:first-child{margin-left:0;}.SegmentItem_styles_18h1p52_bxcdyja__b7ac762c::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) + 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.SegmentItem_styles_18h1p52_bxcdyja__b7ac762c.SegmentItem_styles_18h1p52_focusVisible__b7ac762c:focus::before,.SegmentItem_styles_18h1p52_bxcdyja__b7ac762c[data-focus-visible-added]::before{z-index:1;outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}
+.SegmentItem_styles_18h1p52_sxjfe87__b7ac762c{display:inline-block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 
 .base_1wf7n5i_b1x66a6y__80fc5ddb{height:var(--plasma-skeleton-line-height);}.base_1wf7n5i_b1x66a6y__80fc5ddb .base_1wf7n5i_sn3du7u__80fc5ddb{height:var(--plasma-skeleton-visible-line-height);}
 

package/emotion/cjs/components/Segment/Segment.template-doc.mdx

@@ -21,13 +21,13 @@ import { PropsTable, Description } from '@site/src/components';
 
 ### Провайдер контекста
 
-Оберните в `SegmentProvider` компонент, в котором будут использованы SegmentGroup с SegmentItem.
+Оберните в `SegmentProvider` компонент, в котором будут использованы SegmentGroup с SegmentItem. 
 Внутри данного провайдера есть доступ к хуку `useSegment`.
 
 ### Выбранные по умолчанию SegmentItem
 
-Можно задать выбранные по умолчанию сегменты с помощью свойства `defaultSelected`.
-Оно передается в `SegmentProvider`, в виде массива `value` элементов.
+Можно задать выбранные по умолчанию сегменты с помощью свойства `defaultSelected`. 
+Оно передается в `SegmentProvider`, в виде массива `value` элеметов.
 
 ```tsx live
 import React from 'react';
@@ -41,9 +41,8 @@ export function App() {
 
         return (
             <>
-                <div>Выбранный элемент: {selectedSegmentItems.join(', ')}</div>
-                <br />
-                <SegmentGroup hasBackground pilled clip={false}>
+                <div>Выбранные элементы: {selectedSegmentItems.join(', ')}</div>
+                <SegmentGroup view='filled' selectionMode='multiple' filledBackground pilled>
                     {items.map((_, i) => (
                         <SegmentItem
                             label={`Label ${i}`}
@@ -59,49 +58,7 @@ export function App() {
     }
 
     return (
-        <div style={{ display: "block" }} >
-            <SegmentProvider defaultSelected={['label_1']}>
-                <SegmentTemplate/>
-            </SegmentProvider>
-        </div>
-    );
-}
-```
-
-### Вертикальное отображение
-
-Для смены ориентации передаем `orientation: 'vertical'`
-
-```tsx live
-import React from 'react';
-import { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@salutejs/{{ package }}';
-
-export function App() {
-    const items = Array(8).fill(0);
-
-    const SegmentTemplate = () => {
-        const {selectedSegmentItems} = useSegment();
-
-        return (
-            <>
-                <div>Выбранный элемент: {selectedSegmentItems.join(', ')}</div>
-                <br />
-                <SegmentGroup hasBackground clip={false}>
-                    {items.map((_, i) => (
-                        <SegmentItem
-                            label={`Label ${i}`}
-                            value={`label_${i}`}
-                            key={`label_${i}`}
-                            view='secondary'
-                        />
-                    ))}
-                </SegmentGroup>
-            </>
-        )
-    }
-
-    return (
-        <div style={{ display: "block" }} >
+        <div style=\{{ display: "block" }} >
             <SegmentProvider defaultSelected={['label_1']}>
                 <SegmentTemplate/>
             </SegmentProvider>