npm - @salutejs/plasma-new-hope - Versions diffs - 0.177.0-dev.0 → 0.177.1-canary.1502.11573459466.0 - Mend

@salutejs/plasma-new-hope 0.177.0-dev.0 → 0.177.1-canary.1502.11573459466.0

Files changed (131) hide show

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

@@ -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_1fr5ovg_b2r261u__3eaab5a9{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_1fr5ovg_s1tfgc53__3eaab5a9{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_1fr5ovg_s16g9t9z__3eaab5a9{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_1fr5ovg_s16g9t9z__3eaab5a9.VerticalTabs_styles_1fr5ovg_tabsClipScroll__3eaab5a9{overflow:scroll;-webkit-scroll-padding:0.25rem;-moz-scroll-padding:0.25rem;-ms-scroll-padding:0.25rem;scroll-padding:0.25rem;overscroll-behavior:contain;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.VerticalTabs_styles_1fr5ovg_s16g9t9z__3eaab5a9.VerticalTabs_styles_1fr5ovg_tabsClipScroll__3eaab5a9::-webkit-scrollbar{display:none;}.VerticalTabs_styles_1fr5ovg_s16g9t9z__3eaab5a9.VerticalTabs_styles_1fr5ovg_tabsClipScroll__3eaab5a9 .VerticalTabs_styles_1fr5ovg_s1tfgc53__3eaab5a9{margin-top:auto;}.VerticalTabs_styles_1fr5ovg_s16g9t9z__3eaab5a9.VerticalTabs_styles_1fr5ovg_tabsClipShowAll__3eaab5a9{overflow:visible;}
-.VerticalTabs_styles_1fr5ovg_s81cx4__3eaab5a9{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;}.VerticalTabs_styles_1fr5ovg_s81cx4__3eaab5a9::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_1fr5ovg_s81cx4__3eaab5a9.VerticalTabs_styles_1fr5ovg_focusVisible__3eaab5a9:focus::before,.VerticalTabs_styles_1fr5ovg_s81cx4__3eaab5a9[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-tabs-outline-focus-color);}.VerticalTabs_styles_1fr5ovg_s81cx4__3eaab5a9[disabled]{cursor:not-allowed;}
+.VerticalTabs_styles_1r1hidh_b2r261u__b37a3ef1{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_1r1hidh_s1tfgc53__b37a3ef1{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_1r1hidh_s16g9t9z__b37a3ef1{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_1r1hidh_s16g9t9z__b37a3ef1.VerticalTabs_styles_1r1hidh_tabsClipScroll__b37a3ef1{overflow:scroll;-webkit-scroll-padding:0.25rem;-moz-scroll-padding:0.25rem;-ms-scroll-padding:0.25rem;scroll-padding:0.25rem;overscroll-behavior:contain;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.VerticalTabs_styles_1r1hidh_s16g9t9z__b37a3ef1.VerticalTabs_styles_1r1hidh_tabsClipScroll__b37a3ef1::-webkit-scrollbar{display:none;}.VerticalTabs_styles_1r1hidh_s16g9t9z__b37a3ef1.VerticalTabs_styles_1r1hidh_tabsClipScroll__b37a3ef1 .VerticalTabs_styles_1r1hidh_s1tfgc53__b37a3ef1{margin-top:auto;}.VerticalTabs_styles_1r1hidh_s16g9t9z__b37a3ef1.VerticalTabs_styles_1r1hidh_tabsClipShowAll__b37a3ef1{overflow:visible;}
+.VerticalTabs_styles_1r1hidh_s81cx4__b37a3ef1{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_1r1hidh_s81cx4__b37a3ef1::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_1r1hidh_s81cx4__b37a3ef1.VerticalTabs_styles_1r1hidh_focusVisible__b37a3ef1:focus::before,.VerticalTabs_styles_1r1hidh_s81cx4__b37a3ef1[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-tabs-outline-focus-color);}.VerticalTabs_styles_1r1hidh_s81cx4__b37a3ef1[disabled]{cursor:not-allowed;}.VerticalTabs_styles_1r1hidh_s81cx4__b37a3ef1:hover{color:var(--plasma-tabs-arrow-color-hover);}.VerticalTabs_styles_1r1hidh_s81cx4__b37a3ef1: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 CHANGED Viewed

@@ -1,7 +1,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import React, { forwardRef, useState, useMemo, useRef, useCallback, useEffect } from 'react';
 import { safeUseId } from '@salutejs/plasma-core';
-import { classes, tokens } from '../../../tokens.js';
+import { classes } from '../../../tokens.js';
 import { cx } from '../../../../../utils/index.js';
 import { TabItemRefs, TabsContext } from '../../../TabsContext.js';
 import { StyledContentWrapper, StyledContent, base, StyledArrow } from './VerticalTabs.styles.js';
@@ -11,6 +11,7 @@ import { base as base$3 } from './variations/_disabled/base.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";
@@ -99,18 +100,18 @@ var verticalTabsRoot = function verticalTabsRoot(Root) {
       tabIndex: disabled ? -1 : 0,
       disabled: disabled,
       ref: upArrowRef
-    }, /*#__PURE__*/React.createElement(IconDisclosureLeft, {
-      color: "var(".concat(tokens.arrowColor, ")")
-    }));
+    }, _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
-    }, /*#__PURE__*/React.createElement(IconDisclosureRight, {
-      color: "var(".concat(tokens.arrowColor, ")")
-    }));
+    }, _IconDisclosureRight || (_IconDisclosureRight = /*#__PURE__*/React.createElement(IconDisclosureRight, {
+      color: "inherit"
+    })));
     var handleScroll = useCallback(function (event) {
       event.stopPropagation();
       var maxScrollTop = event.currentTarget.scrollHeight - event.currentTarget.clientHeight;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalTabs.js","sources":["../../../../../../src/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState, useEffect, useRef, KeyboardEvent } from 'react';\nimport type { MutableRefObject } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../../../../engines/types';\nimport { classes, tokens } from '../../../tokens';\nimport { cx } from '../../../../../utils';\nimport { TabItemRefs, TabsContext } from '../../../TabsContext';\nimport type { VerticalTabsProps } from '../../../Tabs.types';\nimport { IconDisclosureLeft, IconDisclosureRight } from '../../../../_Icon';\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(true);\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 = Math.round(scrollRef.current.scrollTop);\n const firstOverflowingTab = refs.items\n .slice()\n .reverse()\n .find((item: MutableRefObject<HTMLElement \| null>) => {\n if (!item.current \|\| item.current.offsetTop === undefined) {\n return;\n }\n const tabStartY = item.current.offsetTop;\n\n return tabStartY < scrollTop;\n });\n\n firstOverflowingTab?.current?.scrollIntoView({ block: 'start', inline: 'nearest' });\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 = refs.items.find((item: MutableRefObject<HTMLElement \| null>) => {\n if (!item.current \|\| item.current.offsetTop === undefined) {\n return;\n }\n const tabEndY = item.current.offsetTop + item.current.offsetHeight;\n\n return tabEndY > scrollBottom;\n });\n\n lastOverflowingTab?.current?.scrollIntoView({ block: 'end', inline: 'nearest' });\n }, [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={`var(${tokens.arrowColor})`} />\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={`var(${tokens.arrowColor})`} />\n </StyledArrow>\n );\n\n const handleScroll = useCallback(\n (event: React.UIEvent<HTMLElement>): void => {\n event.stopPropagation();\n const maxScrollTop = event.currentTarget.scrollHeight - event.currentTarget.clientHeight;\n const scrollTop = Math.round(event.currentTarget.scrollTop);\n\n setFirstItemVisible(scrollTop <= 0);\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 useEffect(() => {\n setLastItemVisible(scrollRef.current?.scrollHeight === scrollRef.current?.clientHeight);\n }, []);\n\n // Этот хук компенсирует появление верхней стрелки при прокрутке\n useEffect(() => {\n if (firstItemVisible \|\| !scrollRef.current \|\| !upArrowRef.current) {\n return;\n }\n\n scrollRef.current.scrollTo({\n top: Math.round(scrollRef.current.scrollTop + upArrowRef.current.clientHeight),\n });\n }, [firstItemVisible, 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","refs","useMemo","TabItemRefs","uniqId","safeUseId","tabsId","noDividerClass","classes","tabsNoDivider","undefined","hasTopArrowClass","tabsHasTopArrow","hasBottomArrowClass","tabsHasBottomArrow","clipScrollClass","tabsClipScroll","clipShowAllClass","tabsClipShowAll","scrollRef","useRef","trackRef","upArrowRef","onPrev","useCallback","_firstOverflowingTab$","current","scrollTop","Math","round","firstOverflowingTab","items","slice","reverse","find","item","offsetTop","tabStartY","scrollIntoView","block","inline","onNext","_lastOverflowingTab$c","scrollBottom","clientHeight","lastOverflowingTab","tabEndY","offsetHeight","PreviousButton","React","createElement","StyledArrow","type","onClick","tabIndex","ref","IconDisclosureLeft","color","concat","tokens","arrowColor","NextButton","IconDisclosureRight","handleScroll","event","stopPropagation","maxScrollTop","currentTarget","scrollHeight","onKeyDown","minIndex","maxIndex","length","nextIndex","keyCode","end","up","down","home","_refs$items$nextIndex","_refs$items$nextIndex2","preventDefault","focus","behavior","useEffect","_scrollRef$current","_scrollRef$current2","scrollTo","top","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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"}
1	+ {"version":3,"file":"VerticalTabs.js","sources":["../../../../../../src/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState, useEffect, 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';\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(true);\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 = Math.round(scrollRef.current.scrollTop);\n const firstOverflowingTab = refs.items\n .slice()\n .reverse()\n .find((item: MutableRefObject<HTMLElement \| null>) => {\n if (!item.current \|\| item.current.offsetTop === undefined) {\n return;\n }\n const tabStartY = item.current.offsetTop;\n\n return tabStartY < scrollTop;\n });\n\n firstOverflowingTab?.current?.scrollIntoView({ block: 'start', inline: 'nearest' });\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 = refs.items.find((item: MutableRefObject<HTMLElement \| null>) => {\n if (!item.current \|\| item.current.offsetTop === undefined) {\n return;\n }\n const tabEndY = item.current.offsetTop + item.current.offsetHeight;\n\n return tabEndY > scrollBottom;\n });\n\n lastOverflowingTab?.current?.scrollIntoView({ block: 'end', inline: 'nearest' });\n }, [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 maxScrollTop = event.currentTarget.scrollHeight - event.currentTarget.clientHeight;\n const scrollTop = Math.round(event.currentTarget.scrollTop);\n\n setFirstItemVisible(scrollTop <= 0);\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 useEffect(() => {\n setLastItemVisible(scrollRef.current?.scrollHeight === scrollRef.current?.clientHeight);\n }, []);\n\n // Этот хук компенсирует появление верхней стрелки при прокрутке\n useEffect(() => {\n if (firstItemVisible \|\| !scrollRef.current \|\| !upArrowRef.current) {\n return;\n }\n\n scrollRef.current.scrollTo({\n top: Math.round(scrollRef.current.scrollTop + upArrowRef.current.clientHeight),\n });\n }, [firstItemVisible, 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","refs","useMemo","TabItemRefs","uniqId","safeUseId","tabsId","noDividerClass","classes","tabsNoDivider","undefined","hasTopArrowClass","tabsHasTopArrow","hasBottomArrowClass","tabsHasBottomArrow","clipScrollClass","tabsClipScroll","clipShowAllClass","tabsClipShowAll","scrollRef","useRef","trackRef","upArrowRef","onPrev","useCallback","_firstOverflowingTab$","current","scrollTop","Math","round","firstOverflowingTab","items","slice","reverse","find","item","offsetTop","tabStartY","scrollIntoView","block","inline","onNext","_lastOverflowingTab$c","scrollBottom","clientHeight","lastOverflowingTab","tabEndY","offsetHeight","PreviousButton","React","createElement","StyledArrow","type","onClick","tabIndex","ref","_IconDisclosureLeft","IconDisclosureLeft","color","NextButton","_IconDisclosureRight","IconDisclosureRight","handleScroll","event","stopPropagation","maxScrollTop","currentTarget","scrollHeight","onKeyDown","minIndex","maxIndex","length","nextIndex","keyCode","end","up","down","home","_refs$items$nextIndex","_refs$items$nextIndex2","preventDefault","focus","behavior","useEffect","_scrollRef$current","_scrollRef$current2","scrollTo","top","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 CHANGED Viewed

@@ -1,4 +1,4 @@
-import './VerticalTabs.styles_1fr5ovg.css';
+import './VerticalTabs.styles_1r1hidh.css';
 import { styled } from '@linaria/react';
 var base = "b2r261u";

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

	@@ -1 +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: 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 scroll-padding: 0.25rem;\n overscroll-behavior: contain;\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"],"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,CAgCzC,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,~~CAmBhC~~;;;;"}
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: 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 scroll-padding: 0.25rem;\n overscroll-behavior: contain;\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,CAgCzC,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;;;;"}

package/{cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.styles_1fr5ovg.css → es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.styles_1r1hidh.css} RENAMED Viewed

@@ -1,4 +1,4 @@
 .b2r261u{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;}
 .s1tfgc53{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;}
 .s16g9t9z{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;}.s16g9t9z.tabs-clip-scroll{overflow:scroll;-webkit-scroll-padding:0.25rem;-moz-scroll-padding:0.25rem;-ms-scroll-padding:0.25rem;scroll-padding:0.25rem;overscroll-behavior:contain;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.s16g9t9z.tabs-clip-scroll::-webkit-scrollbar{display:none;}.s16g9t9z.tabs-clip-scroll .s1tfgc53{margin-top:auto;}.s16g9t9z.tabs-clip-show-all{overflow:visible;}
-.s81cx4{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;}.s81cx4::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;}.s81cx4.focus-visible:focus::before,.s81cx4[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-tabs-outline-focus-color);}.s81cx4[disabled]{cursor:not-allowed;}
+.s81cx4{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);}.s81cx4::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;}.s81cx4.focus-visible:focus::before,.s81cx4[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-tabs-outline-focus-color);}.s81cx4[disabled]{cursor:not-allowed;}.s81cx4:hover{color:var(--plasma-tabs-arrow-color-hover);}.s81cx4:active{color:var(--plasma-tabs-arrow-color-active);}

package/es/index.css CHANGED Viewed

@@ -229,7 +229,7 @@
 .base_1sq08yf_bxoicu2__bb7a4868{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);}
-.base_9miwn_bupjtit__d014f2e9{background-color:var(--plasma-tabs-background-color);}.base_9miwn_bupjtit__d014f2e9::after{content:'';position:absolute;bottom:0.125rem;left:0.125rem;right:0.125rem;background:var(--plasma-tabs-divider-color);height:var(--plasma-tabs-divider-height);border-radius:var(--plasma-tabs-divider-border-radius);}.base_9miwn_bupjtit__d014f2e9.base_9miwn_tabsHasLeftArrow__d014f2e9::after{left:1.5rem;}.base_9miwn_bupjtit__d014f2e9.base_9miwn_tabsHasRightArrow__d014f2e9::after{right:1.5rem;}
+.base_4ob3q5_bupjtit__17aafbe8{background-color:var(--plasma-tabs-background-color);}.base_4ob3q5_bupjtit__17aafbe8::after{content:'';position:absolute;bottom:0.125rem;left:0.125rem;right:0.125rem;background:var(--plasma-tabs-divider-color);height:var(--plasma-tabs-divider-height);border-radius:var(--plasma-tabs-divider-border-radius);}.base_4ob3q5_bupjtit__17aafbe8.base_4ob3q5_tabsHasLeftArrow__17aafbe8::after{left:1.5rem;}.base_4ob3q5_bupjtit__17aafbe8.base_4ob3q5_tabsHasRightArrow__17aafbe8::after{right:1.5rem;}.base_4ob3q5_bupjtit__17aafbe8.base_4ob3q5_tabsNoDivider__17aafbe8::after{height:0;}
 .base_j9bg3m_bbh58a1__de7491f9{opacity:var(--plasma-tabs-disabled-opacity);}
@@ -237,10 +237,10 @@
 .base_1j9ii1x_b1eicxhd__666b97df.base_1j9ii1x_tabsStretched__666b97df{width:100%;}.base_1j9ii1x_b1eicxhd__666b97df.base_1j9ii1x_tabsStretched__666b97df .base_1j9ii1x_s158pfyo__666b97df,.base_1j9ii1x_b1eicxhd__666b97df.base_1j9ii1x_tabsStretched__666b97df .base_1j9ii1x_s191iwmt__666b97df,.base_1j9ii1x_b1eicxhd__666b97df.base_1j9ii1x_tabsStretched__666b97df .base_1j9ii1x_s191iwmt__666b97df > button{width:100%;margin-left:0;}
-.HorizontalTabs_styles_16kuvxt_b7gl603__73e81f22{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:0.125rem;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;}
-.HorizontalTabs_styles_16kuvxt_s191iwmt__73e81f22{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;}
-.HorizontalTabs_styles_16kuvxt_s158pfyo__73e81f22{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;}.HorizontalTabs_styles_16kuvxt_s158pfyo__73e81f22.HorizontalTabs_styles_16kuvxt_tabsClipScroll__73e81f22{overflow:scroll;-webkit-scroll-padding:0.25rem;-moz-scroll-padding:0.25rem;-ms-scroll-padding:0.25rem;scroll-padding:0.25rem;overscroll-behavior:contain;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.HorizontalTabs_styles_16kuvxt_s158pfyo__73e81f22.HorizontalTabs_styles_16kuvxt_tabsClipScroll__73e81f22::-webkit-scrollbar{display:none;}.HorizontalTabs_styles_16kuvxt_s158pfyo__73e81f22.HorizontalTabs_styles_16kuvxt_tabsClipShowAll__73e81f22{overflow:visible;}
-.HorizontalTabs_styles_16kuvxt_s1in38wj__73e81f22{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;position:relative;--plasma_private-outer-padding:var(--s1in38wj-0);padding-right:var(--s1in38wj-1);padding-left:var(--s1in38wj-2);}.HorizontalTabs_styles_16kuvxt_s1in38wj__73e81f22::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;}.HorizontalTabs_styles_16kuvxt_s1in38wj__73e81f22.HorizontalTabs_styles_16kuvxt_focusVisible__73e81f22:focus::before,.HorizontalTabs_styles_16kuvxt_s1in38wj__73e81f22[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-tabs-outline-focus-color);}.HorizontalTabs_styles_16kuvxt_s1in38wj__73e81f22[disabled]{cursor:not-allowed;}
+.HorizontalTabs_styles_p9rk79_b7gl603__eeaee6e8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:0.125rem;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;}
+.HorizontalTabs_styles_p9rk79_s191iwmt__eeaee6e8{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;}
+.HorizontalTabs_styles_p9rk79_s158pfyo__eeaee6e8{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;}.HorizontalTabs_styles_p9rk79_s158pfyo__eeaee6e8.HorizontalTabs_styles_p9rk79_tabsClipScroll__eeaee6e8{overflow:scroll;-webkit-scroll-padding:0.25rem;-moz-scroll-padding:0.25rem;-ms-scroll-padding:0.25rem;scroll-padding:0.25rem;overscroll-behavior:contain;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.HorizontalTabs_styles_p9rk79_s158pfyo__eeaee6e8.HorizontalTabs_styles_p9rk79_tabsClipScroll__eeaee6e8::-webkit-scrollbar{display:none;}.HorizontalTabs_styles_p9rk79_s158pfyo__eeaee6e8.HorizontalTabs_styles_p9rk79_tabsClipShowAll__eeaee6e8{overflow:visible;}
+.HorizontalTabs_styles_p9rk79_s1in38wj__eeaee6e8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;position:relative;--plasma_private-outer-padding:var(--s1in38wj-0);padding-right:var(--s1in38wj-1);padding-left:var(--s1in38wj-2);color:var(--plasma-tabs-arrow-color);}.HorizontalTabs_styles_p9rk79_s1in38wj__eeaee6e8::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;}.HorizontalTabs_styles_p9rk79_s1in38wj__eeaee6e8.HorizontalTabs_styles_p9rk79_focusVisible__eeaee6e8:focus::before,.HorizontalTabs_styles_p9rk79_s1in38wj__eeaee6e8[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-tabs-outline-focus-color);}.HorizontalTabs_styles_p9rk79_s1in38wj__eeaee6e8[disabled]{cursor:not-allowed;}.HorizontalTabs_styles_p9rk79_s1in38wj__eeaee6e8:hover{color:var(--plasma-tabs-arrow-color-hover);}.HorizontalTabs_styles_p9rk79_s1in38wj__eeaee6e8:active{color:var(--plasma-tabs-arrow-color-active);}
 .base_4zingj_b1vyjqk2__b8b7d053{color:var(--plasma-tab-item-color);background-color:var(--plasma-tab-item-background-color);margin-left:var(--plasma-tab-item-margin-left-filled,var(--plasma-tab-item-margin-left));}.base_4zingj_b1vyjqk2__b8b7d053:hover{color:var(--plasma-tab-item-color-hover);background-color:var(--plasma-tab-item-background-color-hover);}.base_4zingj_b1vyjqk2__b8b7d053:hover .base_4zingj_t1nh4m12__b8b7d053{color:var(--plasma-tab-item-value-color-hover);}.base_4zingj_b1vyjqk2__b8b7d053:active{color:var(--plasma-tab-item-color-active);}.base_4zingj_b1vyjqk2__b8b7d053:active .base_4zingj_t1nh4m12__b8b7d053{color:var(--plasma-tab-item-value-color-active);}.base_4zingj_b1vyjqk2__b8b7d053.base_4zingj_tabItemAnimated__b8b7d053{-webkit-transition:var(--plasma-tab-item-background-transition);transition:var(--plasma-tab-item-background-transition);}.base_4zingj_b1vyjqk2__b8b7d053.base_4zingj_selectedTabsItem__b8b7d053{color:var(--plasma-tab-item-selected-color);background-color:var(--plasma-tab-item-selected-background-color);}.base_4zingj_b1vyjqk2__b8b7d053.base_4zingj_selectedTabsItem__b8b7d053:hover{color:var(--plasma-tab-item-selected-color-hover);background-color:var(--plasma-tab-item-selected-background-color-hover);}.base_4zingj_b1vyjqk2__b8b7d053.base_4zingj_selectedTabsItem__b8b7d053:hover::after{background:var(--plasma-tab-item-selected-hover-divider-color);}.base_4zingj_b1vyjqk2__b8b7d053.base_4zingj_selectedTabsItem__b8b7d053 .base_4zingj_t1nh4m12__b8b7d053{color:var(--plasma-tab-item-selected-value-color-hover);}.base_4zingj_b1vyjqk2__b8b7d053.base_4zingj_selectedTabsItem__b8b7d053 .base_4zingj_t1nh4m12__b8b7d053:hover{color:var(--plasma-tab-item-selected-value-color-hover);}.base_4zingj_b1vyjqk2__b8b7d053.base_4zingj_selectedTabsItem__b8b7d053::after{content:'';position:absolute;bottom:0;left:0;right:0;background:var(--plasma-tab-item-selected-divider-color);height:var(--plasma-tab-item-selected-divider-height);border-radius:0.063rem;}
@@ -256,10 +256,10 @@
 .HorizontalTabItem_styles_hfqv5b_r13nweg3__5835ec0b{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:inherit;}.HorizontalTabItem_styles_hfqv5b_r13nweg3__5835ec0b:hover{color:inherit;}
 .HorizontalTabItem_styles_hfqv5b_l1iip2sx__5835ec0b{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:inherit;}.HorizontalTabItem_styles_hfqv5b_l1iip2sx__5835ec0b:hover{color:inherit;}
-.VerticalTabs_styles_1fr5ovg_b2r261u__3eaab5a9{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_1fr5ovg_s1tfgc53__3eaab5a9{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_1fr5ovg_s16g9t9z__3eaab5a9{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_1fr5ovg_s16g9t9z__3eaab5a9.VerticalTabs_styles_1fr5ovg_tabsClipScroll__3eaab5a9{overflow:scroll;-webkit-scroll-padding:0.25rem;-moz-scroll-padding:0.25rem;-ms-scroll-padding:0.25rem;scroll-padding:0.25rem;overscroll-behavior:contain;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.VerticalTabs_styles_1fr5ovg_s16g9t9z__3eaab5a9.VerticalTabs_styles_1fr5ovg_tabsClipScroll__3eaab5a9::-webkit-scrollbar{display:none;}.VerticalTabs_styles_1fr5ovg_s16g9t9z__3eaab5a9.VerticalTabs_styles_1fr5ovg_tabsClipScroll__3eaab5a9 .VerticalTabs_styles_1fr5ovg_s1tfgc53__3eaab5a9{margin-top:auto;}.VerticalTabs_styles_1fr5ovg_s16g9t9z__3eaab5a9.VerticalTabs_styles_1fr5ovg_tabsClipShowAll__3eaab5a9{overflow:visible;}
-.VerticalTabs_styles_1fr5ovg_s81cx4__3eaab5a9{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;}.VerticalTabs_styles_1fr5ovg_s81cx4__3eaab5a9::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_1fr5ovg_s81cx4__3eaab5a9.VerticalTabs_styles_1fr5ovg_focusVisible__3eaab5a9:focus::before,.VerticalTabs_styles_1fr5ovg_s81cx4__3eaab5a9[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-tabs-outline-focus-color);}.VerticalTabs_styles_1fr5ovg_s81cx4__3eaab5a9[disabled]{cursor:not-allowed;}
+.VerticalTabs_styles_1r1hidh_b2r261u__b37a3ef1{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_1r1hidh_s1tfgc53__b37a3ef1{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_1r1hidh_s16g9t9z__b37a3ef1{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_1r1hidh_s16g9t9z__b37a3ef1.VerticalTabs_styles_1r1hidh_tabsClipScroll__b37a3ef1{overflow:scroll;-webkit-scroll-padding:0.25rem;-moz-scroll-padding:0.25rem;-ms-scroll-padding:0.25rem;scroll-padding:0.25rem;overscroll-behavior:contain;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.VerticalTabs_styles_1r1hidh_s16g9t9z__b37a3ef1.VerticalTabs_styles_1r1hidh_tabsClipScroll__b37a3ef1::-webkit-scrollbar{display:none;}.VerticalTabs_styles_1r1hidh_s16g9t9z__b37a3ef1.VerticalTabs_styles_1r1hidh_tabsClipScroll__b37a3ef1 .VerticalTabs_styles_1r1hidh_s1tfgc53__b37a3ef1{margin-top:auto;}.VerticalTabs_styles_1r1hidh_s16g9t9z__b37a3ef1.VerticalTabs_styles_1r1hidh_tabsClipShowAll__b37a3ef1{overflow:visible;}
+.VerticalTabs_styles_1r1hidh_s81cx4__b37a3ef1{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_1r1hidh_s81cx4__b37a3ef1::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_1r1hidh_s81cx4__b37a3ef1.VerticalTabs_styles_1r1hidh_focusVisible__b37a3ef1:focus::before,.VerticalTabs_styles_1r1hidh_s81cx4__b37a3ef1[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-tabs-outline-focus-color);}.VerticalTabs_styles_1r1hidh_s81cx4__b37a3ef1[disabled]{cursor:not-allowed;}.VerticalTabs_styles_1r1hidh_s81cx4__b37a3ef1:hover{color:var(--plasma-tabs-arrow-color-hover);}.VerticalTabs_styles_1r1hidh_s81cx4__b37a3ef1: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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.177.0-dev.0",
+  "version": "0.177.1-canary.1502.11573459466.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -128,5 +128,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "a074652509beaf8ba69b2572c9678d8fca13a319"
+  "gitHead": "b131c32bcbc014ce7180be56f20bfbbbd2efe4e4"
 }

package/styled-components/cjs/components/Tabs/tokens.js CHANGED Viewed

@@ -39,6 +39,8 @@ var tokens = exports.tokens = {
   itemSelectedDividerColorHover: '--plasma-tab-item-selected-hover-divider-color',
   outlineFocusColor: '--plasma-tabs-outline-focus-color',
   arrowColor: '--plasma-tabs-arrow-color',
+  arrowColorHover: '--plasma-tabs-arrow-color-hover',
+  arrowColorActive: '--plasma-tabs-arrow-color-active',
   tabsFilledBackgroundColor: '--plasma-tabs-filled-background-color',
   tabsBackgroundColor: '--plasma-tabs-background-color',
   tabsBorderRadius: '--plasma-tabs-border-radius',

package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js CHANGED Viewed

@@ -101,7 +101,9 @@ var horizontalTabItemRoot = exports.horizontalTabItemRoot = function horizontalT
       disabled: disabled,
       pilled: pilled,
       role: role,
-      view: view,
+      view: view
+      // TODO: убрать каст any, когда будут удалены deprecated props
+      ,
       size: size,
       onFocus: onItemFocus,
       tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,

package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js CHANGED Viewed

@@ -17,7 +17,7 @@ var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
 var _base4 = /*#__PURE__*/require("./variations/_pilled/base");
 var _base5 = /*#__PURE__*/require("./variations/_stretch/base");
 var _HorizontalTabs = /*#__PURE__*/require("./HorizontalTabs.styles");
-var _excluded = ["id", "stretch", "disabled", "clip", "size", "view", "children", "pilled", "index", "className"];
+var _excluded = ["id", "stretch", "disabled", "clip", "size", "view", "children", "pilled", "index", "className", "hasDivider"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -35,7 +35,12 @@ var Keys = /*#__PURE__*/function (Keys) {
   Keys[Keys["left"] = 37] = "left";
   Keys[Keys["right"] = 39] = "right";
   return Keys;
-}(Keys || {}); // TODO: https://github.com/salute-developers/plasma/issues/1474
+}(Keys || {});
+var getIconSize = function getIconSize(size) {
+  return size === 'h1' || size === 'h2' ? 'm' : 's';
+};
+// TODO: https://github.com/salute-developers/plasma/issues/1474
 var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoot(Root) {
   return /*#__PURE__*/(0, _react.forwardRef)(function (props, outerRef) {
     var id = props.id,
@@ -52,6 +57,8 @@ var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoo
       pilled = _props$pilled === void 0 ? false : _props$pilled,
       index = props.index,
       className = props.className,
+      _props$hasDivider = props.hasDivider,
+      hasDivider = _props$hasDivider === void 0 ? true : _props$hasDivider,
       rest = _objectWithoutProperties(props, _excluded);
     var _useState = (0, _react.useState)(true),
       _useState2 = _slicedToArray(_useState, 2),
@@ -69,6 +76,7 @@ var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoo
     var isFilled = view === 'filled'; // outer padding is only for filled view
     var pilledAttr = view !== 'clear' && pilled;
     var pilledClass = pilledAttr ? _tokens.classes.tabsPilled : undefined;
+    var noDividerClass = !hasDivider ? _tokens.classes.tabsNoDivider : undefined;
     var stretchClass = firstItemVisible && lastItemVisible && stretch ? _tokens.classes.tabsStretch : undefined;
     var hasLeftArrowClass = !firstItemVisible ? _tokens.classes.tabsHasLeftArrow : undefined;
     var hasRightArrowClass = !lastItemVisible ? _tokens.classes.tabsHasRightArrow : undefined;
@@ -124,9 +132,10 @@ var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoo
         ref: leftArrowRef,
         isLeftArrow: true
       }, /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureLeft, {
-        color: "var(".concat(_tokens.tokens.arrowColor, ")")
+        size: getIconSize(size),
+        color: "inherit"
       }));
-    }, [onPrev, disabled, isFilled]);
+    }, [onPrev, size, disabled, isFilled]);
     var NextButton = (0, _react.useMemo)(function () {
       return /*#__PURE__*/_react["default"].createElement(_HorizontalTabs.StyledArrow, {
         type: "button",
@@ -136,9 +145,10 @@ var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoo
         disabled: disabled,
         isFilled: isFilled
       }, /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureRight, {
-        color: "var(".concat(_tokens.tokens.arrowColor, ")")
+        size: getIconSize(size),
+        color: "inherit"
       }));
-    }, [onNext, disabled, isFilled]);
+    }, [onNext, size, disabled, isFilled]);
     var handleScroll = (0, _react.useCallback)(function (event) {
       event.stopPropagation();
       var maxScrollLeft = event.currentTarget.scrollWidth - event.currentTarget.clientWidth;
@@ -198,13 +208,15 @@ var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoo
       value: refs
     }, /*#__PURE__*/_react["default"].createElement(Root, _extends({
       view: view,
-      role: "tablist",
+      role: "tablist"
+      // TODO: убрать каст any, когда будут удалены deprecated props
+      ,
       size: size,
       pilled: pilled,
       id: tabsId,
       ref: outerRef,
       disabled: disabled,
-      className: (0, _utils.cx)(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, className),
+      className: (0, _utils.cx)(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, noDividerClass, className),
       onKeyDown: onKeyDown
     }, rest), !firstItemVisible && PreviousButton, /*#__PURE__*/_react["default"].createElement(_HorizontalTabs.StyledContentWrapper, {
       className: (0, _utils.cx)(clipScrollClass, clipShowAllClass),

package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.styles.js CHANGED Viewed

@@ -21,7 +21,7 @@ var StyledContentWrapper = exports.StyledContentWrapper = /*#__PURE__*/_styledCo
 })(["margin:-0.125rem;padding:0.25rem;box-sizing:content-box;position:relative;height:100%;width:100%;display:flex;align-items:center;z-index:1;&.", "{overflow:scroll;scroll-padding:0.25rem;overscroll-behavior:contain;scrollbar-width:none;::-webkit-scrollbar{display:none;}}&.", "{overflow:visible;}"], _tokens.classes.tabsClipScroll, _tokens.classes.tabsClipShowAll);
 var StyledArrow = exports.StyledArrow = /*#__PURE__*/_styledComponents["default"].button.withConfig({
   componentId: "plasma-new-hope__sc-1nr0m0h-2"
-})(["display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;", ";&[disabled]{cursor:not-allowed;}--plasma_private-outer-padding:", ";padding-right:", ";padding-left:", ";"], /*#__PURE__*/(0, _mixins.addFocus)({
+})(["display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;", ";&[disabled]{cursor:not-allowed;}--plasma_private-outer-padding:", ";padding-right:", ";padding-left:", ";color:var(", ");&:hover{color:var(", ");}&:active{color:var(", ");}"], /*#__PURE__*/(0, _mixins.addFocus)({
   outlineSize: '0.063rem',
   outlineOffset: '-0.125rem',
   outlineColor: /*#__PURE__*/"var(".concat(_tokens.tokens.outlineFocusColor, ")"),
@@ -35,4 +35,4 @@ var StyledArrow = exports.StyledArrow = /*#__PURE__*/_styledComponents["default"
 }, function (_ref3) {
   var isLeftArrow = _ref3.isLeftArrow;
   return isLeftArrow ? 'var(--plasma_private-outer-padding)' : "var(".concat(_tokens.tokens.arrowInnerPadding, ")");
-});
+}, _tokens.tokens.arrowColor, _tokens.tokens.arrowColorHover, _tokens.tokens.arrowColorActive);

package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabs/variations/_view/base.js CHANGED Viewed

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _tokens = /*#__PURE__*/require("../../../../../tokens");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["background-color:var(", ");&::after{content:'';position:absolute;bottom:0.125rem;left:0.125rem;right:0.125rem;background:var(", ");height:var(", ");border-radius:var(", ");}&.", "{&::after{left:1.5rem;}}&.", "{&::after{right:1.5rem;}}"], _tokens.tokens.tabsBackgroundColor, _tokens.tokens.tabsDividerColor, _tokens.tokens.tabsDividerHeight, _tokens.tokens.tabsDividerBorderRadius, _tokens.classes.tabsHasLeftArrow, _tokens.classes.tabsHasRightArrow);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["background-color:var(", ");&::after{content:'';position:absolute;bottom:0.125rem;left:0.125rem;right:0.125rem;background:var(", ");height:var(", ");border-radius:var(", ");}&.", "{&::after{left:1.5rem;}}&.", "{&::after{right:1.5rem;}}&.", "{&::after{height:0;}}"], _tokens.tokens.tabsBackgroundColor, _tokens.tokens.tabsDividerColor, _tokens.tokens.tabsDividerHeight, _tokens.tokens.tabsDividerBorderRadius, _tokens.classes.tabsHasLeftArrow, _tokens.classes.tabsHasRightArrow, _tokens.classes.tabsNoDivider);

package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js CHANGED Viewed

@@ -15,6 +15,7 @@ var _VerticalTabs = /*#__PURE__*/require("./VerticalTabs.styles");
 var _base = /*#__PURE__*/require("./variations/_size/base");
 var _base2 = /*#__PURE__*/require("./variations/_view/base");
 var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
+var _IconDisclosureLeft, _IconDisclosureRight;
 var _excluded = ["id", "disabled", "clip", "size", "view", "children", "index", "className", "orientation", "hasDivider"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -114,18 +115,18 @@ var verticalTabsRoot = exports.verticalTabsRoot = function verticalTabsRoot(Root
       tabIndex: disabled ? -1 : 0,
       disabled: disabled,
       ref: upArrowRef
-    }, /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureLeft, {
-      color: "var(".concat(_tokens.tokens.arrowColor, ")")
-    }));
+    }, _IconDisclosureLeft || (_IconDisclosureLeft = /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureLeft, {
+      color: "inherit"
+    })));
     var NextButton = /*#__PURE__*/_react["default"].createElement(_VerticalTabs.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["default"].createElement(_Icon.IconDisclosureRight, {
-      color: "var(".concat(_tokens.tokens.arrowColor, ")")
-    }));
+    }, _IconDisclosureRight || (_IconDisclosureRight = /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureRight, {
+      color: "inherit"
+    })));
     var handleScroll = (0, _react.useCallback)(function (event) {
       event.stopPropagation();
       var maxScrollTop = event.currentTarget.scrollHeight - event.currentTarget.clientHeight;

package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.styles.js CHANGED Viewed

@@ -21,9 +21,9 @@ var StyledContentWrapper = exports.StyledContentWrapper = /*#__PURE__*/_styledCo
 })(["margin:-0.125rem;padding:0.25rem;box-sizing:content-box;position:relative;height:100%;width:100%;display:flex;align-items:center;z-index:1;&.", "{overflow:scroll;scroll-padding:0.25rem;overscroll-behavior:contain;scrollbar-width:none;::-webkit-scrollbar{display:none;}", "{margin-top:auto;}}&.", "{overflow:visible;}"], _tokens.classes.tabsClipScroll, StyledContent, _tokens.classes.tabsClipShowAll);
 var StyledArrow = exports.StyledArrow = /*#__PURE__*/_styledComponents["default"].button.withConfig({
   componentId: "plasma-new-hope__sc-gz8fxn-2"
-})(["display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;transform:rotate(90deg);", ";&[disabled]{cursor:not-allowed;}"], /*#__PURE__*/(0, _mixins.addFocus)({
+})(["display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;transform:rotate(90deg);", ";&[disabled]{cursor:not-allowed;}color:var(", ");&:hover{color:var(", ");}&:active{color:var(", ");}"], /*#__PURE__*/(0, _mixins.addFocus)({
   outlineSize: '0.063rem',
   outlineOffset: '-0.125rem',
   outlineColor: /*#__PURE__*/"var(".concat(_tokens.tokens.outlineFocusColor, ")"),
   outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)'
-}));
+}), _tokens.tokens.arrowColor, _tokens.tokens.arrowColorHover, _tokens.tokens.arrowColorActive);