@salutejs/plasma-new-hope 0.326.1-canary.2043.15852251108.0 → 0.327.0-canary.1741.15775036215.0

package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalTabItem.styles.js","sources":["../../../../../../src/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.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 StyledContent = styled.div`\n    display: inline-block;\n    width: fit-content;\n\n    padding: 0 var(${tokens.itemContentPaddingClear}, var(${tokens.itemContentPadding}));\n`;\n\nexport const TabItemValue = styled.span`\n    white-space: nowrap;\n    color: var(${tokens.itemValueColor});\n\n    font-family: var(${tokens.valueFontFamily}, var(${tokens.fontFamily}));\n    font-size: var(${tokens.valueFontSize}, var(${tokens.fontSize}));\n    font-style: var(${tokens.valueFontStyle}, var(${tokens.fontStyle}));\n    font-weight: var(${tokens.valueFontWeight}, var(${tokens.fontWeight}));\n    letter-spacing: var(${tokens.valueLetterSpacing}, var(${tokens.letterSpacing}));\n    line-height: var(${tokens.valueLineHeight}, var(${tokens.lineHeight}));\n`;\n\nexport const RightContent = styled.div`\n    display: flex;\n    color: inherit;\n\n    &:hover {\n        color: inherit;\n    }\n`;\n\nexport const LeftContent = styled.div`\n    display: flex;\n    color: inherit;\n\n    &:hover {\n        color: inherit;\n    }\n`;\n\nexport const base = css`\n    position: relative;\n\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: var(${tokens.itemContentGap});\n\n    padding: var(${tokens.itemPaddingOrientationVertical});\n\n    appearance: none;\n    border: none;\n    outline: none;\n    cursor: var(${tokens.itemCursor});\n    white-space: nowrap;\n    box-sizing: border-box;\n\n    -webkit-tap-highlight-color: transparent;\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    &.${classes.tabsTruncate} {\n        ${StyledContent} {\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        ${TabItemValue} {\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n    }\n`;\n"],"names":["StyledContent","styled","name","class","propsAsIs","TabItemValue","RightContent","LeftContent","base"],"mappings":";;AAMO,IAAMA,aAAa,gBAAGC,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAKlC,EAAA;AAEM,IAAMC,YAAY,gBAAGJ,MAAM,CAAA,MAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,cAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAUjC,EAAA;AAEM,IAAME,YAAY,gBAAGL,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,cAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAOjC,EAAA;AAEM,IAAMG,WAAW,gBAAGN,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAOhC,EAAA;AAEM,IAAMI,IAAI,GA+ChB;;;;"}
+{"version":3,"file":"VerticalTabItem.styles.js","sources":["../../../../../../src/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.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 StyledContent = styled.div`\n    display: inline-block;\n    width: fit-content;\n\n    padding: 0 var(${tokens.itemContentPaddingClear}, var(${tokens.itemContentPadding}));\n`;\n\nexport const TabItemValue = styled.span`\n    white-space: nowrap;\n    color: var(${tokens.itemValueColor});\n\n    font-family: var(${tokens.valueFontFamily}, var(${tokens.fontFamily}));\n    font-size: var(${tokens.valueFontSize}, var(${tokens.fontSize}));\n    font-style: var(${tokens.valueFontStyle}, var(${tokens.fontStyle}));\n    font-weight: var(${tokens.valueFontWeight}, var(${tokens.fontWeight}));\n    letter-spacing: var(${tokens.valueLetterSpacing}, var(${tokens.letterSpacing}));\n    line-height: var(${tokens.valueLineHeight}, var(${tokens.lineHeight}));\n`;\n\nexport const RightContent = styled.div`\n    display: flex;\n    color: inherit;\n\n    &:hover {\n        color: inherit;\n    }\n`;\n\nexport const LeftContent = styled.div`\n    display: flex;\n    color: inherit;\n\n    &:hover {\n        color: inherit;\n    }\n`;\n\nexport const base = css`\n    position: relative;\n\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: var(${tokens.itemContentGap});\n\n    padding: var(${tokens.itemPaddingOrientationVertical});\n\n    appearance: none;\n    border: none;\n    outline: none;\n    cursor: var(${tokens.itemCursor});\n    white-space: nowrap;\n    box-sizing: border-box;\n\n    -webkit-tap-highlight-color: transparent;\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    &.${classes.tabsTruncate} {\n        ${StyledContent} {\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        ${TabItemValue} {\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n    }\n`;\n"],"names":["StyledContent","styled","name","class","propsAsIs","TabItemValue","RightContent","LeftContent","base"],"mappings":";;AAMO,MAAMA,aAAa,gBAAGC,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,KAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAKlC,EAAA;AAEM,MAAMC,YAAY,gBAAGJ,MAAM,CAAA,MAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,cAAA;AAAAC,EAAAA,KAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAUjC,EAAA;AAEM,MAAME,YAAY,gBAAGL,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,cAAA;AAAAC,EAAAA,KAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAOjC,EAAA;AAEM,MAAMG,WAAW,gBAAGN,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,KAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAOhC,EAAA;AAEM,MAAMI,IAAI,GA+ChB;;;;"}

package/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_disabled/base.js

@@ -1,5 +1,5 @@
 import './base_13f4t5k.css';
-var base = "bvdfayd";
+const base = "bvdfayd";
 
 export { base };
 //# sourceMappingURL=base.js.map

package/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_disabled/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../../../../src/components/Tabs/ui/vertical/VerticalTabItem/variations/_disabled/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../../tokens';\n\nexport const base = css`\n    &[disabled] {\n        cursor: not-allowed;\n\n        &:hover {\n            color: var(${tokens.itemColor});\n            background-color: var(${tokens.itemBackgroundColor});\n        }\n\n        &.${classes.selectedTabsItem}:hover {\n            color: var(${tokens.itemSelectedColor});\n            background-color: var(${tokens.itemSelectedBackgroundColor});\n        }\n    }\n`;\n"],"names":["base"],"mappings":"AAIO,IAAMA,IAAI,GAchB;;;;"}
+{"version":3,"file":"base.js","sources":["../../../../../../../../src/components/Tabs/ui/vertical/VerticalTabItem/variations/_disabled/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../../tokens';\n\nexport const base = css`\n    &[disabled] {\n        cursor: not-allowed;\n\n        &:hover {\n            color: var(${tokens.itemColor});\n            background-color: var(${tokens.itemBackgroundColor});\n        }\n\n        &.${classes.selectedTabsItem}:hover {\n            color: var(${tokens.itemSelectedColor});\n            background-color: var(${tokens.itemSelectedBackgroundColor});\n        }\n    }\n`;\n"],"names":["base"],"mappings":"AAIO,MAAMA,IAAI,GAchB;;;;"}

package/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_size/base.js

@@ -1,5 +1,5 @@
 import './base_322rr.css';
-var base = "b13ylalc";
+const base = "b13ylalc";
 
 export { base };
 //# sourceMappingURL=base.js.map

package/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_size/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../../../../src/components/Tabs/ui/vertical/VerticalTabItem/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../../../../../tokens';\n\nexport const base = css`\n    font-family: var(${tokens.fontFamily});\n    font-size: var(${tokens.fontSize});\n    font-style: var(${tokens.fontStyle});\n    font-weight: var(${tokens.fontWeight});\n    letter-spacing: var(${tokens.letterSpacing});\n    line-height: var(${tokens.lineHeight});\n\n    --plasma_private-outline-radius: var(${tokens.itemBorderRadius});\n    border-radius: var(${tokens.itemBorderRadius});\n\n    width: 100%;\n    height: var(${tokens.itemHeight});\n`;\n"],"names":["base"],"mappings":"AAIO,IAAMA,IAAI,GAahB;;;;"}
+{"version":3,"file":"base.js","sources":["../../../../../../../../src/components/Tabs/ui/vertical/VerticalTabItem/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../../../../../tokens';\n\nexport const base = css`\n    font-family: var(${tokens.fontFamily});\n    font-size: var(${tokens.fontSize});\n    font-style: var(${tokens.fontStyle});\n    font-weight: var(${tokens.fontWeight});\n    letter-spacing: var(${tokens.letterSpacing});\n    line-height: var(${tokens.lineHeight});\n\n    --plasma_private-outline-radius: var(${tokens.itemBorderRadius});\n    border-radius: var(${tokens.itemBorderRadius});\n\n    width: 100%;\n    height: var(${tokens.itemHeight});\n`;\n"],"names":["base"],"mappings":"AAIO,MAAMA,IAAI,GAahB;;;;"}

package/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_view/base.js

@@ -1,5 +1,5 @@
 import './base_12fk3xi.css';
-var base = "byyhn69";
+const base = "byyhn69";
 
 export { base };
 //# sourceMappingURL=base.js.map

package/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_view/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../../../../src/components/Tabs/ui/vertical/VerticalTabItem/variations/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../../tokens';\nimport { TabItemValue } from '../../VerticalTabItem.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        ${TabItemValue} {\n            color: var(${tokens.itemValueColorHover});\n        }\n    }\n\n    &:active {\n        color: var(${tokens.itemColorActive});\n\n        ${TabItemValue} {\n            color: var(${tokens.itemValueColorActive});\n        }\n    }\n\n    &.${classes.tabItemAnimated} {\n        transition: var(${tokens.itemBackgroundTransition});\n    }\n\n    &.${classes.selectedTabsItem} {\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            &::after {\n                background: var(${tokens.itemSelectedDividerColorHover});\n            }\n        }\n\n        ${TabItemValue} {\n            color: var(${tokens.itemSelectedValueColorHover});\n\n            &:hover {\n                color: var(${tokens.itemSelectedValueColorHover});\n            }\n        }\n\n        &::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            bottom: 0;\n            background: var(${tokens.itemSelectedDividerColor});\n            width: var(${tokens.itemSelectedDividerWidth});\n\n            border-radius: 0.063rem;\n        }\n    }\n`;\n"],"names":["base"],"mappings":"AAKO,IAAMA,IAAI,GA0DhB;;;;"}
+{"version":3,"file":"base.js","sources":["../../../../../../../../src/components/Tabs/ui/vertical/VerticalTabItem/variations/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../../tokens';\nimport { TabItemValue } from '../../VerticalTabItem.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        ${TabItemValue} {\n            color: var(${tokens.itemValueColorHover});\n        }\n    }\n\n    &:active {\n        color: var(${tokens.itemColorActive});\n\n        ${TabItemValue} {\n            color: var(${tokens.itemValueColorActive});\n        }\n    }\n\n    &.${classes.tabItemAnimated} {\n        transition: var(${tokens.itemBackgroundTransition});\n    }\n\n    &.${classes.selectedTabsItem} {\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            &::after {\n                background: var(${tokens.itemSelectedDividerColorHover});\n            }\n        }\n\n        ${TabItemValue} {\n            color: var(${tokens.itemSelectedValueColorHover});\n\n            &:hover {\n                color: var(${tokens.itemSelectedValueColorHover});\n            }\n        }\n\n        &::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            bottom: 0;\n            background: var(${tokens.itemSelectedDividerColor});\n            width: var(${tokens.itemSelectedDividerWidth});\n\n            border-radius: 0.063rem;\n        }\n    }\n`;\n"],"names":["base"],"mappings":"AAKO,MAAMA,IAAI,GA0DhB;;;;"}

package/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.css

@@ -1,9 +1,9 @@
 .IconRoot_7pl7ig_svvlqhf__32c458a1{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:var(--svvlqhf-0);height:var(--svvlqhf-0);-webkit-flex:0 0 var(--svvlqhf-0);-ms-flex:0 0 var(--svvlqhf-0);flex:0 0 var(--svvlqhf-0);}
 
-.VerticalTabs_styles_1khdtzl_b2r261u__8b23c604{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0.125rem;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
-.VerticalTabs_styles_1khdtzl_s1tfgc53__8b23c604{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-.VerticalTabs_styles_1khdtzl_s16g9t9z__8b23c604{margin:-0.125rem;padding:0.25rem;box-sizing:content-box;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;z-index:1;}.VerticalTabs_styles_1khdtzl_s16g9t9z__8b23c604.VerticalTabs_styles_1khdtzl_tabsClipScroll__8b23c604{overflow:scroll;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.VerticalTabs_styles_1khdtzl_s16g9t9z__8b23c604.VerticalTabs_styles_1khdtzl_tabsClipScroll__8b23c604::-webkit-scrollbar{display:none;}.VerticalTabs_styles_1khdtzl_s16g9t9z__8b23c604.VerticalTabs_styles_1khdtzl_tabsClipScroll__8b23c604 .VerticalTabs_styles_1khdtzl_s1tfgc53__8b23c604{margin-top:auto;}.VerticalTabs_styles_1khdtzl_s16g9t9z__8b23c604.VerticalTabs_styles_1khdtzl_tabsClipShowAll__8b23c604{overflow:visible;}
-.VerticalTabs_styles_1khdtzl_s81cx4__8b23c604{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);position:relative;color:var(--plasma-tabs-arrow-color);}.VerticalTabs_styles_1khdtzl_s81cx4__8b23c604::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;}.VerticalTabs_styles_1khdtzl_s81cx4__8b23c604.VerticalTabs_styles_1khdtzl_focusVisible__8b23c604:focus::before,.VerticalTabs_styles_1khdtzl_s81cx4__8b23c604[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-tabs-outline-focus-color);}.VerticalTabs_styles_1khdtzl_s81cx4__8b23c604[disabled]{cursor:not-allowed;}.VerticalTabs_styles_1khdtzl_s81cx4__8b23c604:hover{color:var(--plasma-tabs-arrow-color-hover);}.VerticalTabs_styles_1khdtzl_s81cx4__8b23c604:active{color:var(--plasma-tabs-arrow-color-active);}
+.VerticalTabs_styles_1egpt45_b2r261u__2941d0b4{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0.125rem;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.VerticalTabs_styles_1egpt45_s1tfgc53__2941d0b4{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;}
+.VerticalTabs_styles_1egpt45_s16g9t9z__2941d0b4{margin:-0.125rem;padding:0.25rem;box-sizing:content-box;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;z-index:1;}.VerticalTabs_styles_1egpt45_s16g9t9z__2941d0b4.VerticalTabs_styles_1egpt45_tabsClipScroll__2941d0b4{overflow:scroll;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.VerticalTabs_styles_1egpt45_s16g9t9z__2941d0b4.VerticalTabs_styles_1egpt45_tabsClipScroll__2941d0b4::-webkit-scrollbar{display:none;}.VerticalTabs_styles_1egpt45_s16g9t9z__2941d0b4.VerticalTabs_styles_1egpt45_tabsClipScroll__2941d0b4 .VerticalTabs_styles_1egpt45_s1tfgc53__2941d0b4{margin-top:auto;}.VerticalTabs_styles_1egpt45_s16g9t9z__2941d0b4.VerticalTabs_styles_1egpt45_tabsClipShowAll__2941d0b4{overflow:visible;}
+.VerticalTabs_styles_1egpt45_s81cx4__2941d0b4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);position:relative;color:var(--plasma-tabs-arrow-color);}.VerticalTabs_styles_1egpt45_s81cx4__2941d0b4::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;}.VerticalTabs_styles_1egpt45_s81cx4__2941d0b4.VerticalTabs_styles_1egpt45_focusVisible__2941d0b4:focus::before,.VerticalTabs_styles_1egpt45_s81cx4__2941d0b4[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-tabs-outline-focus-color);}.VerticalTabs_styles_1egpt45_s81cx4__2941d0b4[disabled]{cursor:not-allowed;}.VerticalTabs_styles_1egpt45_s81cx4__2941d0b4:hover{color:var(--plasma-tabs-arrow-color-hover);}.VerticalTabs_styles_1egpt45_s81cx4__2941d0b4:active{color:var(--plasma-tabs-arrow-color-active);}
 
 .base_1sekozo_b1t51iwr__491bf88c{width:var(--plasma-tabs-width);height:var(--plasma-tabs-height);--plasma_private-outline-radius:var(--plasma-tabs-border-radius);border-radius:var(--plasma-tabs-border-radius);}
 

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

@@ -1,19 +1,17 @@
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import React, { forwardRef, useState, useMemo, useRef, useCallback, useLayoutEffect } from 'react';
-import { cx } from '../../../../../utils/index.js';
+import { safeUseId } from '@salutejs/plasma-core';
 import { classes } from '../../../tokens.js';
+import { cx } from '../../../../../utils/index.js';
 import { TabItemRefs, TabsContext } from '../../../TabsContext.js';
 import { getFirstOverflowingTab, getLastOverflowingTab } from '../../../utils/index.js';
 import { StyledContentWrapper, StyledContent, base, StyledArrow } from './VerticalTabs.styles.js';
 import { base as base$1 } from './variations/_size/base.js';
 import { base as base$2 } from './variations/_view/base.js';
 import { base as base$3 } from './variations/_disabled/base.js';
-import { safeUseId } from '../../../../../utils/react.js';
 import { IconDisclosureLeft } from '../../../../_Icon/Icons/IconDisclosureLeft.js';
 import { IconDisclosureRight } from '../../../../_Icon/Icons/IconDisclosureRight.js';
 
-var _IconDisclosureLeft, _IconDisclosureRight;
-var _excluded = ["id", "disabled", "clip", "size", "view", "children", "index", "className", "orientation", "hasDivider"];
 var Keys = /*#__PURE__*/function (Keys) {
   Keys[Keys["end"] = 35] = "end";
   Keys[Keys["home"] = 36] = "home";
@@ -21,184 +19,170 @@ var Keys = /*#__PURE__*/function (Keys) {
   Keys[Keys["down"] = 40] = "down";
   return Keys;
 }(Keys || {}); // TODO: https://github.com/salute-developers/plasma/issues/1474
-var verticalTabsRoot = function verticalTabsRoot(Root) {
-  return /*#__PURE__*/forwardRef(function (props, outerRef) {
-    var id = props.id,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled,
-      _props$clip = props.clip,
-      clip = _props$clip === void 0 ? 'showAll' : _props$clip,
-      size = props.size,
-      view = props.view,
-      children = props.children,
-      index = props.index,
-      className = props.className,
-      orientation = props.orientation,
-      _props$hasDivider = props.hasDivider,
-      hasDivider = _props$hasDivider === void 0 ? true : _props$hasDivider,
-      rest = _objectWithoutProperties(props, _excluded);
-    var _useState = useState(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      firstItemVisible = _useState2[0],
-      setFirstItemVisible = _useState2[1];
-    var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      lastItemVisible = _useState4[0],
-      setLastItemVisible = _useState4[1];
+const verticalTabsRoot = Root => /*#__PURE__*/forwardRef((props, outerRef) => {
+  const {
+    id,
+    disabled = false,
+    clip = 'showAll',
+    size,
+    view,
+    children,
+    index,
+    className,
+    orientation,
+    hasDivider = true,
+    ...rest
+  } = props;
+  const [firstItemVisible, setFirstItemVisible] = useState(true);
+  const [lastItemVisible, setLastItemVisible] = useState(false);
 
-    // Триггер доп. скролла при появлении левой стрелки, которая отъедает ширину scroll-контейнера
-    var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      shouldTriggerAdditionalScroll = _useState6[0],
-      setShouldTriggerAdditionalScroll = _useState6[1];
-    var refs = useMemo(function () {
-      return new TabItemRefs(index);
-    }, []);
-    var uniqId = safeUseId();
-    var tabsId = id || uniqId;
-    var noDividerClass = !hasDivider ? classes.tabsNoDivider : undefined;
-    var hasTopArrowClass = !firstItemVisible ? classes.tabsHasTopArrow : undefined;
-    var hasBottomArrowClass = !lastItemVisible ? classes.tabsHasBottomArrow : undefined;
-    var clipScrollClass = clip === 'scroll' ? classes.tabsClipScroll : undefined;
-    var clipShowAllClass = clip === 'showAll' ? classes.tabsClipShowAll : undefined;
-    var scrollRef = useRef(null);
-    var trackRef = useRef(null);
-    var upArrowRef = useRef(null);
-    var onPrev = useCallback(function () {
-      if (disabled || !scrollRef.current) {
-        return;
-      }
-      var scrollTop = scrollRef.current.scrollTop;
-      var firstOverflowingTab = getFirstOverflowingTab(refs.items.slice().reverse(), scrollTop, orientation);
-      if (!(firstOverflowingTab !== null && firstOverflowingTab !== void 0 && firstOverflowingTab.current)) {
-        return;
-      }
-      var scrollElStyle = getComputedStyle(scrollRef.current);
-      scrollRef.current.scrollTo({
-        top: firstOverflowingTab.current.offsetTop - parseInt(scrollElStyle.paddingTop, 10)
-      });
-    }, [disabled, scrollRef, refs]);
-    var onNext = useCallback(function () {
-      if (disabled || !scrollRef.current) {
-        return;
-      }
-      var scrollBottom = Math.round(scrollRef.current.scrollTop + scrollRef.current.clientHeight);
-      var lastOverflowingTab = getLastOverflowingTab(refs.items, scrollBottom, orientation);
-      if (!(lastOverflowingTab !== null && lastOverflowingTab !== void 0 && lastOverflowingTab.current)) {
+  // Триггер доп. скролла при появлении левой стрелки, которая отъедает ширину scroll-контейнера
+  const [shouldTriggerAdditionalScroll, setShouldTriggerAdditionalScroll] = useState(false);
+  const refs = useMemo(() => new TabItemRefs(index), []);
+  const uniqId = safeUseId();
+  const tabsId = id || uniqId;
+  const noDividerClass = !hasDivider ? classes.tabsNoDivider : undefined;
+  const hasTopArrowClass = !firstItemVisible ? classes.tabsHasTopArrow : undefined;
+  const hasBottomArrowClass = !lastItemVisible ? classes.tabsHasBottomArrow : undefined;
+  const clipScrollClass = clip === 'scroll' ? classes.tabsClipScroll : undefined;
+  const clipShowAllClass = clip === 'showAll' ? classes.tabsClipShowAll : undefined;
+  const scrollRef = useRef(null);
+  const trackRef = useRef(null);
+  const upArrowRef = useRef(null);
+  const onPrev = useCallback(() => {
+    if (disabled || !scrollRef.current) {
+      return;
+    }
+    const {
+      scrollTop
+    } = scrollRef.current;
+    const firstOverflowingTab = getFirstOverflowingTab(refs.items.slice().reverse(), scrollTop, orientation);
+    if (!firstOverflowingTab?.current) {
+      return;
+    }
+    const scrollElStyle = getComputedStyle(scrollRef.current);
+    scrollRef.current.scrollTo({
+      top: firstOverflowingTab.current.offsetTop - parseInt(scrollElStyle.paddingTop, 10)
+    });
+  }, [disabled, scrollRef, refs]);
+  const onNext = useCallback(() => {
+    if (disabled || !scrollRef.current) {
+      return;
+    }
+    const scrollBottom = Math.round(scrollRef.current.scrollTop + scrollRef.current.clientHeight);
+    const lastOverflowingTab = getLastOverflowingTab(refs.items, scrollBottom, orientation);
+    if (!lastOverflowingTab?.current) {
+      return;
+    }
+    if (firstItemVisible) {
+      setShouldTriggerAdditionalScroll(true);
+    }
+    const scrollElStyle = getComputedStyle(scrollRef.current);
+    scrollRef.current.scrollTo({
+      top: Math.round(lastOverflowingTab.current.offsetTop + lastOverflowingTab.current.offsetHeight - scrollRef.current.clientHeight + parseInt(scrollElStyle.paddingTop, 10))
+    });
+  }, [firstItemVisible, disabled, scrollRef, refs]);
+  const PreviousButton = /*#__PURE__*/React.createElement(StyledArrow, {
+    type: "button",
+    "aria-label": "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u0442\u0430\u0431",
+    onClick: onPrev,
+    tabIndex: disabled ? -1 : 0,
+    disabled: disabled,
+    ref: upArrowRef
+  }, /*#__PURE__*/React.createElement(IconDisclosureLeft, {
+    color: "inherit"
+  }));
+  const NextButton = /*#__PURE__*/React.createElement(StyledArrow, {
+    type: "button",
+    "aria-label": "\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u0442\u0430\u0431",
+    onClick: onNext,
+    tabIndex: disabled ? -1 : 0,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(IconDisclosureRight, {
+    color: "inherit"
+  }));
+  const handleScroll = useCallback(event => {
+    event.stopPropagation();
+    const scrollElStyle = getComputedStyle(event.currentTarget);
+    const minScrollTop = parseInt(scrollElStyle.paddingLeft, 10);
+    const maxScrollTop = event.currentTarget.scrollHeight - event.currentTarget.clientHeight - parseInt(scrollElStyle.paddingTop, 10);
+    const scrollTop = Math.round(event.currentTarget.scrollTop);
+    setFirstItemVisible(scrollTop <= minScrollTop);
+    setLastItemVisible(scrollTop >= maxScrollTop);
+  }, [setFirstItemVisible, setLastItemVisible]);
+  const onKeyDown = useCallback(event => {
+    if (index === undefined) {
+      return;
+    }
+    const minIndex = 0;
+    const maxIndex = refs.items.length - 1;
+    let nextIndex;
+    switch (event.keyCode) {
+      case Keys.end:
+        nextIndex = maxIndex;
+        break;
+      case Keys.up:
+        nextIndex = index > minIndex ? index - 1 : index;
+        break;
+      case Keys.down:
+        nextIndex = index < maxIndex ? index + 1 : index;
+        break;
+      case Keys.home:
+        nextIndex = minIndex;
+        break;
+      default:
         return;
-      }
-      if (firstItemVisible) {
-        setShouldTriggerAdditionalScroll(true);
-      }
-      var scrollElStyle = getComputedStyle(scrollRef.current);
-      scrollRef.current.scrollTo({
-        top: Math.round(lastOverflowingTab.current.offsetTop + lastOverflowingTab.current.offsetHeight - scrollRef.current.clientHeight + parseInt(scrollElStyle.paddingTop, 10))
+    }
+    if (nextIndex !== index) {
+      event.preventDefault();
+      refs.items[nextIndex].current?.focus();
+      refs.items[nextIndex].current?.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest',
+        behavior: 'smooth'
       });
-    }, [firstItemVisible, disabled, scrollRef, refs]);
-    var PreviousButton = /*#__PURE__*/React.createElement(StyledArrow, {
-      type: "button",
-      "aria-label": "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u0442\u0430\u0431",
-      onClick: onPrev,
-      tabIndex: disabled ? -1 : 0,
-      disabled: disabled,
-      ref: upArrowRef
-    }, _IconDisclosureLeft || (_IconDisclosureLeft = /*#__PURE__*/React.createElement(IconDisclosureLeft, {
-      color: "inherit"
-    })));
-    var NextButton = /*#__PURE__*/React.createElement(StyledArrow, {
-      type: "button",
-      "aria-label": "\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u0442\u0430\u0431",
-      onClick: onNext,
-      tabIndex: disabled ? -1 : 0,
-      disabled: disabled
-    }, _IconDisclosureRight || (_IconDisclosureRight = /*#__PURE__*/React.createElement(IconDisclosureRight, {
-      color: "inherit"
-    })));
-    var handleScroll = useCallback(function (event) {
-      event.stopPropagation();
-      var scrollElStyle = getComputedStyle(event.currentTarget);
-      var minScrollTop = parseInt(scrollElStyle.paddingLeft, 10);
-      var maxScrollTop = event.currentTarget.scrollHeight - event.currentTarget.clientHeight - parseInt(scrollElStyle.paddingTop, 10);
-      var scrollTop = Math.round(event.currentTarget.scrollTop);
-      setFirstItemVisible(scrollTop <= minScrollTop);
-      setLastItemVisible(scrollTop >= maxScrollTop);
-    }, [setFirstItemVisible, setLastItemVisible]);
-    var onKeyDown = useCallback(function (event) {
-      if (index === undefined) {
-        return;
-      }
-      var minIndex = 0;
-      var maxIndex = refs.items.length - 1;
-      var nextIndex;
-      switch (event.keyCode) {
-        case Keys.end:
-          nextIndex = maxIndex;
-          break;
-        case Keys.up:
-          nextIndex = index > minIndex ? index - 1 : index;
-          break;
-        case Keys.down:
-          nextIndex = index < maxIndex ? index + 1 : index;
-          break;
-        case Keys.home:
-          nextIndex = minIndex;
-          break;
-        default:
-          return;
-      }
-      if (nextIndex !== index) {
-        var _refs$items$nextIndex, _refs$items$nextIndex2;
-        event.preventDefault();
-        (_refs$items$nextIndex = refs.items[nextIndex].current) === null || _refs$items$nextIndex === void 0 || _refs$items$nextIndex.focus();
-        (_refs$items$nextIndex2 = refs.items[nextIndex].current) === null || _refs$items$nextIndex2 === void 0 || _refs$items$nextIndex2.scrollIntoView({
-          block: 'nearest',
-          inline: 'nearest',
-          behavior: 'smooth'
-        });
-      }
-    }, [index]);
-    useLayoutEffect(function () {
-      var _scrollRef$current, _scrollRef$current2;
-      setLastItemVisible(((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollHeight) === ((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.clientHeight));
-    }, []);
+    }
+  }, [index]);
+  useLayoutEffect(() => {
+    setLastItemVisible(scrollRef.current?.scrollHeight === scrollRef.current?.clientHeight);
+  }, []);
 
-    // Этот хук компенсирует появление верхней стрелки при прокрутке
-    useLayoutEffect(function () {
-      if (firstItemVisible || !shouldTriggerAdditionalScroll || !scrollRef.current || !upArrowRef.current) {
-        return;
-      }
-      var style = getComputedStyle(scrollRef.current);
-      scrollRef.current.scrollTo({
-        top: Math.round(scrollRef.current.scrollTop + upArrowRef.current.clientHeight + parseInt(style.paddingTop, 10))
-      });
-      setShouldTriggerAdditionalScroll(false);
-    }, [firstItemVisible, shouldTriggerAdditionalScroll, scrollRef, upArrowRef]);
-    return /*#__PURE__*/React.createElement(TabsContext.Provider, {
-      value: refs
-    }, /*#__PURE__*/React.createElement(Root, _extends({
-      view: view,
-      role: "tablist",
-      size: size,
-      id: tabsId,
-      ref: outerRef,
-      disabled: disabled,
-      className: cx(hasTopArrowClass, hasBottomArrowClass, noDividerClass, className),
-      onKeyDown: onKeyDown,
-      orientation: orientation
-    }, rest), !firstItemVisible && PreviousButton, /*#__PURE__*/React.createElement(StyledContentWrapper, {
-      className: cx(clipScrollClass, clipShowAllClass),
-      ref: scrollRef,
-      onScroll: handleScroll
-    }, /*#__PURE__*/React.createElement(StyledContent, {
-      ref: trackRef
-    }, children)), !lastItemVisible && NextButton));
-  });
-};
-var verticalTabsConfig = {
+  // Этот хук компенсирует появление верхней стрелки при прокрутке
+  useLayoutEffect(() => {
+    if (firstItemVisible || !shouldTriggerAdditionalScroll || !scrollRef.current || !upArrowRef.current) {
+      return;
+    }
+    const style = getComputedStyle(scrollRef.current);
+    scrollRef.current.scrollTo({
+      top: Math.round(scrollRef.current.scrollTop + upArrowRef.current.clientHeight + parseInt(style.paddingTop, 10))
+    });
+    setShouldTriggerAdditionalScroll(false);
+  }, [firstItemVisible, shouldTriggerAdditionalScroll, scrollRef, upArrowRef]);
+  return /*#__PURE__*/React.createElement(TabsContext.Provider, {
+    value: refs
+  }, /*#__PURE__*/React.createElement(Root, _extends({
+    view: view,
+    role: "tablist",
+    size: size,
+    id: tabsId,
+    ref: outerRef,
+    disabled: disabled,
+    className: cx(hasTopArrowClass, hasBottomArrowClass, noDividerClass, className),
+    onKeyDown: onKeyDown,
+    orientation: orientation
+  }, rest), !firstItemVisible && PreviousButton, /*#__PURE__*/React.createElement(StyledContentWrapper, {
+    className: cx(clipScrollClass, clipShowAllClass),
+    ref: scrollRef,
+    onScroll: handleScroll
+  }, /*#__PURE__*/React.createElement(StyledContent, {
+    ref: trackRef
+  }, children)), !lastItemVisible && NextButton));
+});
+const verticalTabsConfig = {
   name: 'VerticalTabs',
   tag: 'div',
   layout: verticalTabsRoot,
-  base: base,
+  base,
   variations: {
     size: {
       css: base$1

package/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalTabs.js","sources":["../../../../../../src/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState, useLayoutEffect, useRef, KeyboardEvent } from 'react';\nimport type { MutableRefObject } from 'react';\nimport { cx, safeUseId } from 'src/utils';\nimport type { RootProps } from 'src/engines/types';\n\nimport { classes } from '../../../tokens';\nimport { TabItemRefs, TabsContext } from '../../../TabsContext';\nimport type { VerticalTabsProps } from '../../../Tabs.types';\nimport { IconDisclosureLeft, IconDisclosureRight } from '../../../../_Icon';\nimport { getFirstOverflowingTab, getLastOverflowingTab } from '../../../utils';\n\nimport { base, StyledArrow, StyledContent, StyledContentWrapper } from './VerticalTabs.styles';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\n\nenum Keys {\n    end = 35,\n    home = 36,\n    up = 38,\n    down = 40,\n}\n\n// TODO: https://github.com/salute-developers/plasma/issues/1474\nexport const verticalTabsRoot = (Root: RootProps<HTMLDivElement, VerticalTabsProps>) =>\n    forwardRef<HTMLDivElement, VerticalTabsProps>((props, outerRef) => {\n        const {\n            id,\n            disabled = false,\n            clip = 'showAll',\n            size,\n            view,\n            children,\n            index,\n            className,\n            orientation,\n            hasDivider = true,\n            ...rest\n        } = props;\n\n        const [firstItemVisible, setFirstItemVisible] = useState(true);\n        const [lastItemVisible, setLastItemVisible] = useState(false);\n\n        // Триггер доп. скролла при появлении левой стрелки, которая отъедает ширину scroll-контейнера\n        const [shouldTriggerAdditionalScroll, setShouldTriggerAdditionalScroll] = useState(false);\n\n        const refs = useMemo(() => new TabItemRefs(index), []);\n\n        const uniqId = safeUseId();\n        const tabsId = id || uniqId;\n\n        const noDividerClass = !hasDivider ? classes.tabsNoDivider : undefined;\n        const hasTopArrowClass = !firstItemVisible ? classes.tabsHasTopArrow : undefined;\n        const hasBottomArrowClass = !lastItemVisible ? classes.tabsHasBottomArrow : undefined;\n        const clipScrollClass = clip === 'scroll' ? classes.tabsClipScroll : undefined;\n        const clipShowAllClass = clip === 'showAll' ? classes.tabsClipShowAll : undefined;\n\n        const scrollRef = useRef<HTMLElement | null>(null);\n        const trackRef = useRef<HTMLElement | null>(null);\n        const upArrowRef = useRef<HTMLButtonElement | null>(null);\n\n        const onPrev = useCallback(() => {\n            if (disabled || !scrollRef.current) {\n                return;\n            }\n\n            const { scrollTop } = scrollRef.current;\n            const firstOverflowingTab = getFirstOverflowingTab(refs.items.slice().reverse(), scrollTop, orientation);\n\n            if (!firstOverflowingTab?.current) {\n                return;\n            }\n\n            const scrollElStyle = getComputedStyle(scrollRef.current);\n            scrollRef.current.scrollTo({\n                top: firstOverflowingTab.current.offsetTop - parseInt(scrollElStyle.paddingTop, 10),\n            });\n        }, [disabled, scrollRef, refs]);\n\n        const onNext = useCallback(() => {\n            if (disabled || !scrollRef.current) {\n                return;\n            }\n\n            const scrollBottom = Math.round(scrollRef.current.scrollTop + scrollRef.current.clientHeight);\n            const lastOverflowingTab = getLastOverflowingTab(refs.items, scrollBottom, orientation);\n\n            if (!lastOverflowingTab?.current) {\n                return;\n            }\n\n            if (firstItemVisible) {\n                setShouldTriggerAdditionalScroll(true);\n            }\n\n            const scrollElStyle = getComputedStyle(scrollRef.current);\n            scrollRef.current.scrollTo({\n                top: Math.round(\n                    lastOverflowingTab.current.offsetTop +\n                        lastOverflowingTab.current.offsetHeight -\n                        scrollRef.current.clientHeight +\n                        parseInt(scrollElStyle.paddingTop, 10),\n                ),\n            });\n        }, [firstItemVisible, disabled, scrollRef, refs]);\n\n        const PreviousButton = (\n            <StyledArrow\n                type=\"button\"\n                aria-label=\"Предыдущий таб\"\n                onClick={onPrev}\n                tabIndex={disabled ? -1 : 0}\n                disabled={disabled}\n                ref={upArrowRef}\n            >\n                <IconDisclosureLeft color=\"inherit\" />\n            </StyledArrow>\n        );\n\n        const NextButton = (\n            <StyledArrow\n                type=\"button\"\n                aria-label=\"Следующий таб\"\n                onClick={onNext}\n                tabIndex={disabled ? -1 : 0}\n                disabled={disabled}\n            >\n                <IconDisclosureRight color=\"inherit\" />\n            </StyledArrow>\n        );\n\n        const handleScroll = useCallback(\n            (event: React.UIEvent<HTMLElement>): void => {\n                event.stopPropagation();\n                const scrollElStyle = getComputedStyle(event.currentTarget);\n                const minScrollTop = parseInt(scrollElStyle.paddingLeft, 10);\n                const maxScrollTop =\n                    event.currentTarget.scrollHeight -\n                    event.currentTarget.clientHeight -\n                    parseInt(scrollElStyle.paddingTop, 10);\n                const scrollTop = Math.round(event.currentTarget.scrollTop);\n\n                setFirstItemVisible(scrollTop <= minScrollTop);\n                setLastItemVisible(scrollTop >= maxScrollTop);\n            },\n            [setFirstItemVisible, setLastItemVisible],\n        );\n\n        const onKeyDown = useCallback(\n            (event: KeyboardEvent<HTMLDivElement>) => {\n                if (index === undefined) {\n                    return;\n                }\n\n                const minIndex = 0;\n                const maxIndex = refs.items.length - 1;\n                let nextIndex: number;\n\n                switch (event.keyCode) {\n                    case Keys.end:\n                        nextIndex = maxIndex;\n                        break;\n                    case Keys.up:\n                        nextIndex = index > minIndex ? index - 1 : index;\n                        break;\n                    case Keys.down:\n                        nextIndex = index < maxIndex ? index + 1 : index;\n                        break;\n                    case Keys.home:\n                        nextIndex = minIndex;\n                        break;\n                    default:\n                        return;\n                }\n\n                if (nextIndex !== index) {\n                    event.preventDefault();\n                    refs.items[nextIndex].current?.focus();\n                    refs.items[nextIndex].current?.scrollIntoView({\n                        block: 'nearest',\n                        inline: 'nearest',\n                        behavior: 'smooth',\n                    });\n                }\n            },\n            [index],\n        );\n\n        useLayoutEffect(() => {\n            setLastItemVisible(scrollRef.current?.scrollHeight === scrollRef.current?.clientHeight);\n        }, []);\n\n        // Этот хук компенсирует появление верхней стрелки при прокрутке\n        useLayoutEffect(() => {\n            if (firstItemVisible || !shouldTriggerAdditionalScroll || !scrollRef.current || !upArrowRef.current) {\n                return;\n            }\n\n            const style = getComputedStyle(scrollRef.current);\n            scrollRef.current.scrollTo({\n                top: Math.round(\n                    scrollRef.current.scrollTop + upArrowRef.current.clientHeight + parseInt(style.paddingTop, 10),\n                ),\n            });\n            setShouldTriggerAdditionalScroll(false);\n        }, [firstItemVisible, shouldTriggerAdditionalScroll, scrollRef, upArrowRef]);\n\n        return (\n            <TabsContext.Provider value={refs}>\n                <Root\n                    view={view}\n                    role=\"tablist\"\n                    size={size}\n                    id={tabsId}\n                    ref={outerRef}\n                    disabled={disabled}\n                    className={cx(hasTopArrowClass, hasBottomArrowClass, noDividerClass, className)}\n                    onKeyDown={onKeyDown}\n                    orientation={orientation}\n                    {...rest}\n                >\n                    {!firstItemVisible && PreviousButton}\n                    <StyledContentWrapper\n                        className={cx(clipScrollClass, clipShowAllClass)}\n                        ref={scrollRef as MutableRefObject<HTMLDivElement | null>}\n                        onScroll={handleScroll}\n                    >\n                        <StyledContent ref={trackRef as MutableRefObject<HTMLDivElement | null>}>\n                            {children}\n                        </StyledContent>\n                    </StyledContentWrapper>\n                    {!lastItemVisible && NextButton}\n                </Root>\n            </TabsContext.Provider>\n        );\n    });\n\nexport const verticalTabsConfig = {\n    name: 'VerticalTabs',\n    tag: 'div',\n    layout: verticalTabsRoot,\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    },\n    defaults: {\n        view: 'divider',\n        size: 'xs',\n    },\n};\n"],"names":["Keys","verticalTabsRoot","Root","forwardRef","props","outerRef","id","_props$disabled","disabled","_props$clip","clip","size","view","children","index","className","orientation","_props$hasDivider","hasDivider","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","firstItemVisible","setFirstItemVisible","_useState3","_useState4","lastItemVisible","setLastItemVisible","_useState5","_useState6","shouldTriggerAdditionalScroll","setShouldTriggerAdditionalScroll","refs","useMemo","TabItemRefs","uniqId","safeUseId","tabsId","noDividerClass","classes","tabsNoDivider","undefined","hasTopArrowClass","tabsHasTopArrow","hasBottomArrowClass","tabsHasBottomArrow","clipScrollClass","tabsClipScroll","clipShowAllClass","tabsClipShowAll","scrollRef","useRef","trackRef","upArrowRef","onPrev","useCallback","current","scrollTop","firstOverflowingTab","getFirstOverflowingTab","items","slice","reverse","scrollElStyle","getComputedStyle","scrollTo","top","offsetTop","parseInt","paddingTop","onNext","scrollBottom","Math","round","clientHeight","lastOverflowingTab","getLastOverflowingTab","offsetHeight","PreviousButton","React","createElement","StyledArrow","type","onClick","tabIndex","ref","_IconDisclosureLeft","IconDisclosureLeft","color","NextButton","_IconDisclosureRight","IconDisclosureRight","handleScroll","event","stopPropagation","currentTarget","minScrollTop","paddingLeft","maxScrollTop","scrollHeight","onKeyDown","minIndex","maxIndex","length","nextIndex","keyCode","end","up","down","home","_refs$items$nextIndex","_refs$items$nextIndex2","preventDefault","focus","scrollIntoView","block","inline","behavior","useLayoutEffect","_scrollRef$current","_scrollRef$current2","style","TabsContext","Provider","value","_extends","role","cx","StyledContentWrapper","onScroll","StyledContent","verticalTabsConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","defaults"],"mappings":"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"}
+{"version":3,"file":"VerticalTabs.js","sources":["../../../../../../src/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState, useLayoutEffect, useRef, KeyboardEvent } from 'react';\nimport type { MutableRefObject } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../../../../engines/types';\nimport { classes } from '../../../tokens';\nimport { cx } from '../../../../../utils';\nimport { TabItemRefs, TabsContext } from '../../../TabsContext';\nimport type { VerticalTabsProps } from '../../../Tabs.types';\nimport { IconDisclosureLeft, IconDisclosureRight } from '../../../../_Icon';\nimport { getFirstOverflowingTab, getLastOverflowingTab } from '../../../utils';\n\nimport { base, StyledArrow, StyledContent, StyledContentWrapper } from './VerticalTabs.styles';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\n\nenum Keys {\n    end = 35,\n    home = 36,\n    up = 38,\n    down = 40,\n}\n\n// TODO: https://github.com/salute-developers/plasma/issues/1474\nexport const verticalTabsRoot = (Root: RootProps<HTMLDivElement, VerticalTabsProps>) =>\n    forwardRef<HTMLDivElement, VerticalTabsProps>((props, outerRef) => {\n        const {\n            id,\n            disabled = false,\n            clip = 'showAll',\n            size,\n            view,\n            children,\n            index,\n            className,\n            orientation,\n            hasDivider = true,\n            ...rest\n        } = props;\n\n        const [firstItemVisible, setFirstItemVisible] = useState(true);\n        const [lastItemVisible, setLastItemVisible] = useState(false);\n\n        // Триггер доп. скролла при появлении левой стрелки, которая отъедает ширину scroll-контейнера\n        const [shouldTriggerAdditionalScroll, setShouldTriggerAdditionalScroll] = useState(false);\n\n        const refs = useMemo(() => new TabItemRefs(index), []);\n\n        const uniqId = safeUseId();\n        const tabsId = id || uniqId;\n\n        const noDividerClass = !hasDivider ? classes.tabsNoDivider : undefined;\n        const hasTopArrowClass = !firstItemVisible ? classes.tabsHasTopArrow : undefined;\n        const hasBottomArrowClass = !lastItemVisible ? classes.tabsHasBottomArrow : undefined;\n        const clipScrollClass = clip === 'scroll' ? classes.tabsClipScroll : undefined;\n        const clipShowAllClass = clip === 'showAll' ? classes.tabsClipShowAll : undefined;\n\n        const scrollRef = useRef<HTMLElement | null>(null);\n        const trackRef = useRef<HTMLElement | null>(null);\n        const upArrowRef = useRef<HTMLButtonElement | null>(null);\n\n        const onPrev = useCallback(() => {\n            if (disabled || !scrollRef.current) {\n                return;\n            }\n\n            const { scrollTop } = scrollRef.current;\n            const firstOverflowingTab = getFirstOverflowingTab(refs.items.slice().reverse(), scrollTop, orientation);\n\n            if (!firstOverflowingTab?.current) {\n                return;\n            }\n\n            const scrollElStyle = getComputedStyle(scrollRef.current);\n            scrollRef.current.scrollTo({\n                top: firstOverflowingTab.current.offsetTop - parseInt(scrollElStyle.paddingTop, 10),\n            });\n        }, [disabled, scrollRef, refs]);\n\n        const onNext = useCallback(() => {\n            if (disabled || !scrollRef.current) {\n                return;\n            }\n\n            const scrollBottom = Math.round(scrollRef.current.scrollTop + scrollRef.current.clientHeight);\n            const lastOverflowingTab = getLastOverflowingTab(refs.items, scrollBottom, orientation);\n\n            if (!lastOverflowingTab?.current) {\n                return;\n            }\n\n            if (firstItemVisible) {\n                setShouldTriggerAdditionalScroll(true);\n            }\n\n            const scrollElStyle = getComputedStyle(scrollRef.current);\n            scrollRef.current.scrollTo({\n                top: Math.round(\n                    lastOverflowingTab.current.offsetTop +\n                        lastOverflowingTab.current.offsetHeight -\n                        scrollRef.current.clientHeight +\n                        parseInt(scrollElStyle.paddingTop, 10),\n                ),\n            });\n        }, [firstItemVisible, disabled, scrollRef, refs]);\n\n        const PreviousButton = (\n            <StyledArrow\n                type=\"button\"\n                aria-label=\"Предыдущий таб\"\n                onClick={onPrev}\n                tabIndex={disabled ? -1 : 0}\n                disabled={disabled}\n                ref={upArrowRef}\n            >\n                <IconDisclosureLeft color=\"inherit\" />\n            </StyledArrow>\n        );\n\n        const NextButton = (\n            <StyledArrow\n                type=\"button\"\n                aria-label=\"Следующий таб\"\n                onClick={onNext}\n                tabIndex={disabled ? -1 : 0}\n                disabled={disabled}\n            >\n                <IconDisclosureRight color=\"inherit\" />\n            </StyledArrow>\n        );\n\n        const handleScroll = useCallback(\n            (event: React.UIEvent<HTMLElement>): void => {\n                event.stopPropagation();\n                const scrollElStyle = getComputedStyle(event.currentTarget);\n                const minScrollTop = parseInt(scrollElStyle.paddingLeft, 10);\n                const maxScrollTop =\n                    event.currentTarget.scrollHeight -\n                    event.currentTarget.clientHeight -\n                    parseInt(scrollElStyle.paddingTop, 10);\n                const scrollTop = Math.round(event.currentTarget.scrollTop);\n\n                setFirstItemVisible(scrollTop <= minScrollTop);\n                setLastItemVisible(scrollTop >= maxScrollTop);\n            },\n            [setFirstItemVisible, setLastItemVisible],\n        );\n\n        const onKeyDown = useCallback(\n            (event: KeyboardEvent<HTMLDivElement>) => {\n                if (index === undefined) {\n                    return;\n                }\n\n                const minIndex = 0;\n                const maxIndex = refs.items.length - 1;\n                let nextIndex: number;\n\n                switch (event.keyCode) {\n                    case Keys.end:\n                        nextIndex = maxIndex;\n                        break;\n                    case Keys.up:\n                        nextIndex = index > minIndex ? index - 1 : index;\n                        break;\n                    case Keys.down:\n                        nextIndex = index < maxIndex ? index + 1 : index;\n                        break;\n                    case Keys.home:\n                        nextIndex = minIndex;\n                        break;\n                    default:\n                        return;\n                }\n\n                if (nextIndex !== index) {\n                    event.preventDefault();\n                    refs.items[nextIndex].current?.focus();\n                    refs.items[nextIndex].current?.scrollIntoView({\n                        block: 'nearest',\n                        inline: 'nearest',\n                        behavior: 'smooth',\n                    });\n                }\n            },\n            [index],\n        );\n\n        useLayoutEffect(() => {\n            setLastItemVisible(scrollRef.current?.scrollHeight === scrollRef.current?.clientHeight);\n        }, []);\n\n        // Этот хук компенсирует появление верхней стрелки при прокрутке\n        useLayoutEffect(() => {\n            if (firstItemVisible || !shouldTriggerAdditionalScroll || !scrollRef.current || !upArrowRef.current) {\n                return;\n            }\n\n            const style = getComputedStyle(scrollRef.current);\n            scrollRef.current.scrollTo({\n                top: Math.round(\n                    scrollRef.current.scrollTop + upArrowRef.current.clientHeight + parseInt(style.paddingTop, 10),\n                ),\n            });\n            setShouldTriggerAdditionalScroll(false);\n        }, [firstItemVisible, shouldTriggerAdditionalScroll, scrollRef, upArrowRef]);\n\n        return (\n            <TabsContext.Provider value={refs}>\n                <Root\n                    view={view}\n                    role=\"tablist\"\n                    size={size}\n                    id={tabsId}\n                    ref={outerRef}\n                    disabled={disabled}\n                    className={cx(hasTopArrowClass, hasBottomArrowClass, noDividerClass, className)}\n                    onKeyDown={onKeyDown}\n                    orientation={orientation}\n                    {...rest}\n                >\n                    {!firstItemVisible && PreviousButton}\n                    <StyledContentWrapper\n                        className={cx(clipScrollClass, clipShowAllClass)}\n                        ref={scrollRef as MutableRefObject<HTMLDivElement | null>}\n                        onScroll={handleScroll}\n                    >\n                        <StyledContent ref={trackRef as MutableRefObject<HTMLDivElement | null>}>\n                            {children}\n                        </StyledContent>\n                    </StyledContentWrapper>\n                    {!lastItemVisible && NextButton}\n                </Root>\n            </TabsContext.Provider>\n        );\n    });\n\nexport const verticalTabsConfig = {\n    name: 'VerticalTabs',\n    tag: 'div',\n    layout: verticalTabsRoot,\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    },\n    defaults: {\n        view: 'divider',\n        size: 'xs',\n    },\n};\n"],"names":["Keys","verticalTabsRoot","Root","forwardRef","props","outerRef","id","disabled","clip","size","view","children","index","className","orientation","hasDivider","rest","firstItemVisible","setFirstItemVisible","useState","lastItemVisible","setLastItemVisible","shouldTriggerAdditionalScroll","setShouldTriggerAdditionalScroll","refs","useMemo","TabItemRefs","uniqId","safeUseId","tabsId","noDividerClass","classes","tabsNoDivider","undefined","hasTopArrowClass","tabsHasTopArrow","hasBottomArrowClass","tabsHasBottomArrow","clipScrollClass","tabsClipScroll","clipShowAllClass","tabsClipShowAll","scrollRef","useRef","trackRef","upArrowRef","onPrev","useCallback","current","scrollTop","firstOverflowingTab","getFirstOverflowingTab","items","slice","reverse","scrollElStyle","getComputedStyle","scrollTo","top","offsetTop","parseInt","paddingTop","onNext","scrollBottom","Math","round","clientHeight","lastOverflowingTab","getLastOverflowingTab","offsetHeight","PreviousButton","React","createElement","StyledArrow","type","onClick","tabIndex","ref","IconDisclosureLeft","color","NextButton","IconDisclosureRight","handleScroll","event","stopPropagation","currentTarget","minScrollTop","paddingLeft","maxScrollTop","scrollHeight","onKeyDown","minIndex","maxIndex","length","nextIndex","keyCode","end","up","down","home","preventDefault","focus","scrollIntoView","block","inline","behavior","useLayoutEffect","style","TabsContext","Provider","value","_extends","role","cx","StyledContentWrapper","onScroll","StyledContent","verticalTabsConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","defaults"],"mappings":"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"}

package/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.styles.js

@@ -1,20 +1,20 @@
-import './VerticalTabs.styles_1khdtzl.css';
+import './VerticalTabs.styles_1egpt45.css';
 import { styled } from '@linaria/react';
 
-var base = "b2r261u";
-var StyledContent = /*#__PURE__*/styled('div')({
+const base = "b2r261u";
+const StyledContent = /*#__PURE__*/styled('div')({
   name: "StyledContent",
-  "class": "s1tfgc53",
+  class: "s1tfgc53",
   propsAsIs: false
 });
-var StyledContentWrapper = /*#__PURE__*/styled('div')({
+const StyledContentWrapper = /*#__PURE__*/styled('div')({
   name: "StyledContentWrapper",
-  "class": "s16g9t9z",
+  class: "s16g9t9z",
   propsAsIs: false
 });
-var StyledArrow = /*#__PURE__*/styled('button')({
+const StyledArrow = /*#__PURE__*/styled('button')({
   name: "StyledArrow",
-  "class": "s81cx4",
+  class: "s81cx4",
   propsAsIs: false
 });
 

package/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalTabs.styles.js","sources":["../../../../../../src/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.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    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: 0.125rem;\n    align-items: center;\n`;\n\nexport const StyledContent = styled.div<{ hasDivider?: boolean }>`\n    display: inline-flex;\n    flex-direction: column;\n    align-items: flex-start;\n`;\n\nexport const StyledContentWrapper = styled.div`\n    /* allows correctly display outline focus on tabs item */\n    margin: -0.125rem;\n    padding: 0.25rem;\n\n    box-sizing: content-box;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    align-items: center;\n\n    z-index: 1;\n\n    &.${classes.tabsClipScroll} {\n        overflow: scroll;\n\n        scrollbar-width: none;\n        ::-webkit-scrollbar {\n            display: none;\n        }\n\n        ${StyledContent} {\n            margin-top: auto;\n        }\n    }\n\n    &.${classes.tabsClipShowAll} {\n        overflow: visible;\n    }\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    transform: rotate(90deg);\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    color: var(${tokens.arrowColor});\n\n    &:hover {\n        color: var(${tokens.arrowColorHover});\n    }\n\n    &:active {\n        color: var(${tokens.arrowColorActive});\n    }\n`;\n"],"names":["base","StyledContent","styled","name","class","propsAsIs","StyledContentWrapper","StyledArrow"],"mappings":";;AAMO,IAAMA,IAAI,GAMhB,UAAA;AAEM,IAAMC,aAAa,gBAAGC,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAIlC,EAAA;AAEM,IAAMC,oBAAoB,gBAAGJ,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,sBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CA8BzC,EAAA;AAEM,IAAME,WAAW,gBAAGL,MAAM,CAAA,QAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,QAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CA6BhC;;;;"}
+{"version":3,"file":"VerticalTabs.styles.js","sources":["../../../../../../src/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.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    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: 0.125rem;\n    align-items: center;\n`;\n\nexport const StyledContent = styled.div<{ hasDivider?: boolean }>`\n    display: inline-flex;\n    flex-direction: column;\n    align-items: start;\n`;\n\nexport const StyledContentWrapper = styled.div`\n    /* allows correctly display outline focus on tabs item */\n    margin: -0.125rem;\n    padding: 0.25rem;\n\n    box-sizing: content-box;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    align-items: center;\n\n    z-index: 1;\n\n    &.${classes.tabsClipScroll} {\n        overflow: scroll;\n\n        scrollbar-width: none;\n        ::-webkit-scrollbar {\n            display: none;\n        }\n\n        ${StyledContent} {\n            margin-top: auto;\n        }\n    }\n\n    &.${classes.tabsClipShowAll} {\n        overflow: visible;\n    }\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    transform: rotate(90deg);\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    color: var(${tokens.arrowColor});\n\n    &:hover {\n        color: var(${tokens.arrowColorHover});\n    }\n\n    &:active {\n        color: var(${tokens.arrowColorActive});\n    }\n`;\n"],"names":["base","StyledContent","styled","name","class","propsAsIs","StyledContentWrapper","StyledArrow"],"mappings":";;AAMO,MAAMA,IAAI,GAMhB,UAAA;AAEM,MAAMC,aAAa,gBAAGC,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,KAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAIlC,EAAA;AAEM,MAAMC,oBAAoB,gBAAGJ,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,sBAAA;AAAAC,EAAAA,KAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CA8BzC,EAAA;AAEM,MAAME,WAAW,gBAAGL,MAAM,CAAA,QAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,KAAA,EAAA,QAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CA6BhC;;;;"}