@salutejs/plasma-new-hope 0.377.0 → 0.377.1-dev.0

package/dist/styled-components/cjs/components/Tour/components/Card/Card.js

@@ -17,8 +17,9 @@ _export(exports, {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _Icon = require("../../../_Icon");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _Icon = require("../../../_Icon");
+const _usePaginationDots = require("../../../PaginationDots/usePaginationDots");
 const _base = require("./variations/_view/base");
 const _base1 = require("./variations/_size/base");
 const _Cardstyles = require("./Card.styles");
@@ -69,14 +70,45 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const tourCardRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ view, size, image, title, description, orientation = 'horizontal', showPagination = true, stepCurrent = 0, stepLength = 0, actionButtons, skipButton, showClose = true, goToStep, onClose, style, className, ...rest }, outerRef)=>{
+const tourCardRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ view, size, image, title, description, orientation = 'horizontal', contentDirection = 'row-reverse', showPagination = true, paginationVisibleItems = 3, paginationType = 'dot', stepCurrent = 0, stepLength = 0, actionButtons, skipButton, showClose = true, goToStep, onClose, style, className, ...rest }, outerRef)=>{
         // Если показан только текст, то к нему добавляется отступ снизу для компенсации.
         const onlyText = !showPagination && !actionButtons && !skipButton;
+        const paginationItems = (0, _react.useRef)(Array(stepLength).fill(0).map((_, ind)=>({
+                id: ind + 1
+            })));
+        const { sliced, activeId } = (0, _usePaginationDots.usePaginationDots)({
+            items: paginationItems.current,
+            index: stepCurrent,
+            visibleItems: Math.min(paginationVisibleItems, stepLength)
+        });
         const dotOnClick = (index)=>{
             if (goToStep) {
                 goToStep(index);
             }
         };
+        const getPaginationContent = (0, _react.useCallback)(()=>{
+            const paginationContent = {
+                dot: /*#__PURE__*/ _react.default.createElement(_Cardstyles.DotsContainer, {
+                    orientation: orientation,
+                    className: _Cardtokens.classes.pagination
+                }, sliced.map(({ id }, index)=>/*#__PURE__*/ _react.default.createElement(_Cardstyles.Dot, {
+                        key: index,
+                        isActive: activeId === id,
+                        onClick: ()=>dotOnClick(index)
+                    }))),
+                compact: /*#__PURE__*/ _react.default.createElement(_Cardstyles.NumberContainer, null, activeId, "/", stepLength)
+            };
+            if (orientation !== 'horizontal') {
+                return paginationContent.dot;
+            }
+            return paginationContent[paginationType];
+        }, [
+            sliced,
+            activeId,
+            stepLength,
+            orientation,
+            paginationType
+        ]);
         return /*#__PURE__*/ _react.default.createElement(Root, {
             ref: outerRef,
             view: view,
@@ -85,11 +117,12 @@ const tourCardRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ view, size,
         }, /*#__PURE__*/ _react.default.createElement(_Cardstyles.TourCard, {
             className: (0, _classnames.default)(className, _Cardtokens.classes.card),
             style: style,
-            orientation: orientation
+            orientation: orientation,
+            contentDirection: contentDirection
         }, showClose && /*#__PURE__*/ _react.default.createElement(_Cardstyles.CloseButton, {
             onClick: onClose
         }, /*#__PURE__*/ _react.default.createElement(_Icon.IconClose, {
-            size: "xs",
+            sizeCustomValue: `var(${_Cardtokens.tokens.closeButtonIconSize}, 1rem)`,
             color: "inherit"
         })), image && /*#__PURE__*/ _react.default.createElement(_Cardstyles.Img, {
             ...image,
@@ -103,15 +136,9 @@ const tourCardRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ view, size,
         }, title), /*#__PURE__*/ _react.default.createElement(_Cardstyles.Description, {
             className: _Cardtokens.classes.description
         }, description)), /*#__PURE__*/ _react.default.createElement(_Cardstyles.Controls, {
-            orientation: orientation
-        }, showPagination && /*#__PURE__*/ _react.default.createElement(_Cardstyles.DotsContainer, {
             orientation: orientation,
-            className: _Cardtokens.classes.pagination
-        }, Array(stepLength).fill(null).map((_, index)=>/*#__PURE__*/ _react.default.createElement(_Cardstyles.Dot, {
-                key: index,
-                isActive: stepCurrent === index,
-                onClick: ()=>dotOnClick(index)
-            }))), actionButtons && /*#__PURE__*/ _react.default.createElement(_Cardstyles.ActionButtonsContainer, {
+            contentDirection: contentDirection
+        }, showPagination && getPaginationContent(), actionButtons && /*#__PURE__*/ _react.default.createElement(_Cardstyles.ActionButtonsContainer, {
             orientation: orientation,
             className: _Cardtokens.classes.actionButtons
         }, actionButtons), skipButton && /*#__PURE__*/ _react.default.createElement(_Cardstyles.SkipButtonContainer, {

package/dist/styled-components/cjs/components/Tour/components/Card/Card.styles.js

@@ -39,6 +39,9 @@ _export(exports, {
     get Img () {
         return Img;
     },
+    get NumberContainer () {
+        return NumberContainer;
+    },
     get SkipButtonContainer () {
         return SkipButtonContainer;
     },
@@ -64,7 +67,7 @@ const WIDTH_VERTICAL = 302;
 const WIDTH_HORIZONTAL = 720;
 const TourCard = _styledcomponents.default.div.withConfig({
     displayName: "Card.styles__TourCard",
-    componentId: "sc-c58c832a-0"
+    componentId: "sc-b6f0a16d-0"
 })([
     `position:relative;display:flex;flex-direction:`,
     `;padding:var(`,
@@ -75,35 +78,41 @@ const TourCard = _styledcomponents.default.div.withConfig({
     `;max-height:`,
     `px;gap:`,
     `;`
-], ({ orientation })=>orientation === 'horizontal' ? 'row-reverse' : 'column', _Cardtokens.tokens.padding, _Cardtokens.tokens.background, _Cardtokens.tokens.borderRadius, ({ orientation })=>orientation === 'horizontal' ? WIDTH_HORIZONTAL : WIDTH_VERTICAL, ({ orientation })=>orientation === 'horizontal' ? `${WIDTH_VERTICAL}px` : 'auto', ({ orientation })=>orientation === 'horizontal' ? WIDTH_VERTICAL : WIDTH_HORIZONTAL, ({ orientation })=>orientation === 'horizontal' ? `var(${_Cardtokens.tokens.gap})` : '0');
+], ({ orientation, contentDirection })=>{
+    if (orientation === 'vertical') {
+        return 'column';
+    }
+    return contentDirection;
+}, _Cardtokens.tokens.padding, _Cardtokens.tokens.background, _Cardtokens.tokens.borderRadius, ({ orientation })=>orientation === 'horizontal' ? WIDTH_HORIZONTAL : WIDTH_VERTICAL, ({ orientation })=>orientation === 'horizontal' ? `${WIDTH_VERTICAL}px` : 'auto', ({ orientation })=>orientation === 'horizontal' ? WIDTH_VERTICAL : WIDTH_HORIZONTAL, ({ orientation })=>orientation === 'horizontal' ? `var(${_Cardtokens.tokens.gap})` : '0');
 const CardBody = _styledcomponents.default.div.withConfig({
     displayName: "Card.styles__CardBody",
-    componentId: "sc-c58c832a-1"
+    componentId: "sc-b6f0a16d-1"
 })([
     `display:flex;flex-direction:column;flex:1;`
 ]);
 const Img = _styledcomponents.default.img.withConfig({
     displayName: "Card.styles__Img",
-    componentId: "sc-c58c832a-2"
+    componentId: "sc-b6f0a16d-2"
 })([
     `width:`,
     `;height:`,
-    `;border-radius:calc(var(`,
+    `;border-radius:var(`,
+    `,calc(var(`,
     `) - var(`,
-    `));`
-], ({ orientation })=>orientation === 'horizontal' ? 'auto' : '100%', ({ orientation })=>orientation === 'horizontal' ? '100%' : 'auto', _Cardtokens.tokens.borderRadius, _Cardtokens.tokens.padding);
+    `)));margin:var(`,
+    `);`
+], ({ orientation })=>orientation === 'horizontal' ? 'auto' : '100%', ({ orientation })=>orientation === 'horizontal' ? '100%' : 'auto', _Cardtokens.tokens.imageBorderRadius, _Cardtokens.tokens.borderRadius, _Cardtokens.tokens.padding, _Cardtokens.tokens.imageMargin);
 const CardText = _styledcomponents.default.div.withConfig({
     displayName: "Card.styles__CardText",
-    componentId: "sc-c58c832a-3"
+    componentId: "sc-b6f0a16d-3"
 })([
-    `display:flex;flex-direction:column;flex:1;padding:var(`,
-    `);padding:`,
+    `display:flex;flex-direction:column;flex:1;padding:`,
     `;gap:var(`,
     `);`
-], _Cardtokens.tokens.textPadding, ({ onlyText })=>onlyText ? `var(${_Cardtokens.tokens.textPaddingExtra})` : `var(${_Cardtokens.tokens.textPadding})`, _Cardtokens.tokens.textGap);
+], ({ onlyText })=>onlyText ? `var(${_Cardtokens.tokens.textPaddingExtra})` : `var(${_Cardtokens.tokens.textPadding})`, _Cardtokens.tokens.textGap);
 const Title = _styledcomponents.default.span.withConfig({
     displayName: "Card.styles__Title",
-    componentId: "sc-c58c832a-4"
+    componentId: "sc-b6f0a16d-4"
 })([
     `color:var(`,
     `);font-family:var(`,
@@ -116,7 +125,7 @@ const Title = _styledcomponents.default.span.withConfig({
 ], _Cardtokens.tokens.titleColor, _Cardtokens.tokens.titleFontFamily, _Cardtokens.tokens.titleFontSize, _Cardtokens.tokens.titleFontStyle, _Cardtokens.tokens.titleFontLetterSpacing, _Cardtokens.tokens.titleFontLineHeight, _Cardtokens.tokens.titleFontWeight);
 const Description = _styledcomponents.default.span.withConfig({
     displayName: "Card.styles__Description",
-    componentId: "sc-c58c832a-5"
+    componentId: "sc-b6f0a16d-5"
 })([
     `color:var(`,
     `);font-family:var(`,
@@ -128,24 +137,41 @@ const Description = _styledcomponents.default.span.withConfig({
 ], _Cardtokens.tokens.descriptionColor, _Cardtokens.tokens.descriptionFontFamily, _Cardtokens.tokens.descriptionFontSize, _Cardtokens.tokens.descriptionFontStyle, _Cardtokens.tokens.descriptionFontLineHeight, _Cardtokens.tokens.descriptionFontWeight);
 const Controls = _styledcomponents.default.div.withConfig({
     displayName: "Card.styles__Controls",
-    componentId: "sc-c58c832a-6"
+    componentId: "sc-b6f0a16d-6"
 })([
     `display:flex;flex-direction:`,
     `;align-items:`,
     `;justify-content:`,
     `;`
-], ({ orientation })=>orientation === 'horizontal' ? 'row' : 'column', ({ orientation })=>orientation === 'horizontal' ? 'center' : 'stretch', ({ orientation })=>orientation === 'horizontal' ? 'space-between' : 'normal');
+], ({ orientation, contentDirection })=>{
+    if (orientation === 'vertical') {
+        return 'column';
+    }
+    return contentDirection === 'row-reverse' ? 'row' : 'row-reverse';
+}, ({ orientation })=>orientation === 'horizontal' ? 'center' : 'stretch', ({ orientation })=>orientation === 'horizontal' ? 'space-between' : 'normal');
+const NumberContainer = _styledcomponents.default.div.withConfig({
+    displayName: "Card.styles__NumberContainer",
+    componentId: "sc-b6f0a16d-7"
+})([
+    `color:var(`,
+    `);font-family:var(`,
+    `);font-size:var(`,
+    `);font-style:var(`,
+    `);line-height:var(`,
+    `);font-weight:var(`,
+    `);text-align:center;`
+], _Cardtokens.tokens.paginationNumberColor, _Cardtokens.tokens.paginationNumberFontFamily, _Cardtokens.tokens.paginationNumberFontSize, _Cardtokens.tokens.paginationNumberFontStyle, _Cardtokens.tokens.paginationNumberFontLineHeight, _Cardtokens.tokens.paginationNumberFontWeight);
 const DotsContainer = _styledcomponents.default.ul.withConfig({
     displayName: "Card.styles__DotsContainer",
-    componentId: "sc-c58c832a-7"
+    componentId: "sc-b6f0a16d-8"
 })([
     `display:flex;align-items:center;justify-content:center;margin:`,
     `;padding:0;list-style:none;gap:var(`,
     `);`
-], ({ orientation })=>orientation === 'horizontal' ? '0 0 0 8px' : `var(${_Cardtokens.tokens.dotContainerMargin})`, _Cardtokens.tokens.dotsGap);
+], ({ orientation })=>orientation === 'horizontal' ? '0 0 0 0.5rem' : `var(${_Cardtokens.tokens.dotContainerMargin})`, _Cardtokens.tokens.dotsGap);
 const Dot = _styledcomponents.default.li.withConfig({
     displayName: "Card.styles__Dot",
-    componentId: "sc-c58c832a-8"
+    componentId: "sc-b6f0a16d-9"
 })([
     `width:var(`,
     `);height:var(`,
@@ -156,7 +182,7 @@ const Dot = _styledcomponents.default.li.withConfig({
 ], _Cardtokens.tokens.dotSize, _Cardtokens.tokens.dotSize, ({ isActive })=>isActive ? `var(${_Cardtokens.tokens.dotActiveBackground})` : `var(${_Cardtokens.tokens.dotBackground})`, ({ isActive })=>isActive ? `var(${_Cardtokens.tokens.dotActiveBackgroundHover},var(${_Cardtokens.tokens.dotActiveBackground}))` : `var(${_Cardtokens.tokens.dotBackgroundHover})`, ({ isActive })=>isActive ? `var(${_Cardtokens.tokens.dotActiveBackgroundActive}, var(${_Cardtokens.tokens.dotActiveBackground}))` : `var(${_Cardtokens.tokens.dotBackgroundActive})`);
 const ActionButtonsContainer = _styledcomponents.default.div.withConfig({
     displayName: "Card.styles__ActionButtonsContainer",
-    componentId: "sc-c58c832a-9"
+    componentId: "sc-b6f0a16d-10"
 })([
     `margin:`,
     `;order:`,
@@ -164,14 +190,14 @@ const ActionButtonsContainer = _styledcomponents.default.div.withConfig({
 ], ({ orientation })=>orientation === 'horizontal' ? '0' : `var(${_Cardtokens.tokens.actionButtonsMargin})`, ({ orientation })=>orientation === 'horizontal' ? '-1' : 'auto');
 const SkipButtonContainer = _styledcomponents.default.div.withConfig({
     displayName: "Card.styles__SkipButtonContainer",
-    componentId: "sc-c58c832a-10"
+    componentId: "sc-b6f0a16d-11"
 })([
     `display:flex;justify-content:center;margin:`,
     `;`
 ], ({ orientation })=>orientation === 'horizontal' ? '0 0 0 8px' : `var(${_Cardtokens.tokens.skipButtonMargin})`);
 const CloseButton = (0, _styledcomponents.default)(IconButton).withConfig({
     displayName: "Card.styles__CloseButton",
-    componentId: "sc-c58c832a-11"
+    componentId: "sc-b6f0a16d-12"
 })([
     `position:absolute;top:1rem;right:1rem;`,
     `:var(`,

package/dist/styled-components/cjs/components/Tour/components/Card/Card.tokens.js

@@ -29,6 +29,8 @@ const tokens = {
     background: '--sdds-core-tour-card-card-background',
     borderRadius: '--sdds-core-tour-card-border-radius',
     gap: '--sdds-core-tour-card-gap',
+    imageBorderRadius: '--sdds-core-tour-card-image-border-radius',
+    imageMargin: '--sdds-core-tour-card-image-margin',
     textPadding: '--sdds-core-tour-card-text-padding',
     textPaddingExtra: '--sdds-core-tour-card-text-padding-extra',
     textGap: '--sdds-core-tour-card-text-gap',
@@ -45,6 +47,12 @@ const tokens = {
     descriptionFontStyle: '--sdds-core-tour-card-description-font-style',
     descriptionFontLineHeight: '--sdds-core-tour-card-description-font-line-height',
     descriptionFontWeight: '--sdds-core-tour-card-description-font-weight',
+    paginationNumberColor: '--sdds-core-tour-card-pagination-number-color',
+    paginationNumberFontFamily: '--sdds-core-tour-card-pagination-number-font-family',
+    paginationNumberFontSize: '--sdds-core-tour-card-pagination-number-font-size',
+    paginationNumberFontStyle: '--sdds-core-tour-card-pagination-number-font-style',
+    paginationNumberFontLineHeight: '--sdds-core-tour-card-pagination-number-font-line-height',
+    paginationNumberFontWeight: '--sdds-core-tour-card-pagination-number-font-weight',
     dotsGap: '--sdds-core-tour-card-pagination-dots-gap',
     dotSize: '--sdds-core-tour-card-pagination-dot-size',
     dotBackground: '--sdds-core-tour-card-pagination-dot-background',
@@ -56,6 +64,7 @@ const tokens = {
     dotContainerMargin: '--sdds-core-tour-card-pagination-dot-container-margin',
     actionButtonsMargin: '--sdds-core-tour-card-actions-buttons-margin',
     skipButtonMargin: '--sdds-core-tour-card-skip-button-margin',
+    closeButtonIconSize: '--sdds-core-tour-card-close-button-icon-size',
     closeButtonWidth: '--sdds-core-tour-card-close-button-width',
     closeButtonHeight: '--sdds-core-tour-card-close-button-height',
     closeButtonRadius: '--sdds-core-tour-card-close-button-radius',

package/dist/styled-components/cjs/components/_Icon/Icons/IconChevronDown.js

@@ -16,11 +16,12 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const IconChevronDown = ({ size = 'xs', color, className })=>{
+const IconChevronDown = ({ size = 'xs', color, className, ...rest })=>{
     return /*#__PURE__*/ _react.default.createElement(_IconRoot.IconRoot, {
         className: className,
         size: size,
         color: color,
-        icon: _ChevronDown.ChevronDown
+        icon: _ChevronDown.ChevronDown,
+        ...rest
     });
 };

package/dist/styled-components/cjs/components/_Icon/Icons/IconClose.js

@@ -16,13 +16,14 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const IconClose = ({ size = 's', color, className, sizeCustomProperty, sizeCustomValue })=>{
+const IconClose = ({ size = 's', color, className, sizeCustomProperty, sizeCustomValue, ...rest })=>{
     return /*#__PURE__*/ _react.default.createElement(_IconRoot.IconRoot, {
         className: className,
         size: size,
         color: color,
         sizeCustomProperty: sizeCustomProperty,
         sizeCustomValue: sizeCustomValue,
-        icon: _Close.Close
+        icon: _Close.Close,
+        ...rest
     });
 };

package/dist/styled-components/cjs/components/_beta/Popover/Popover.styles.js

@@ -67,11 +67,11 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const base = (0, _styledcomponents.css)([
     `border-radius:var(`,
-    `);`
+    `);outline:none;`
 ], _Popovertokens.tokens.borderRadius);
 const Wrapper = _styledcomponents.default.div.withConfig({
     displayName: "Popover.styles__Wrapper",
-    componentId: "sc-4ef6b1a9-0"
+    componentId: "sc-faebddb-0"
 })([
     `position:relative;background:var(`,
     `);padding:var(`,
@@ -82,7 +82,7 @@ const Wrapper = _styledcomponents.default.div.withConfig({
 ], _Popovertokens.tokens.backgroundColor, _Popovertokens.tokens.padding, _Popovertokens.tokens.borderRadius, _Popovertokens.tokens.boxShadow, _Popovertokens.tokens.dropShadow);
 const CloseButton = _styledcomponents.default.button.withConfig({
     displayName: "Popover.styles__CloseButton",
-    componentId: "sc-4ef6b1a9-1"
+    componentId: "sc-faebddb-1"
 })([
     `position:absolute;top:var(`,
     `);right:var(`,
@@ -93,7 +93,7 @@ const CloseButton = _styledcomponents.default.button.withConfig({
 ], _Popovertokens.tokens.iconOffset, _Popovertokens.tokens.iconOffset, _Popovertokens.tokens.iconColor, _Popovertokens.tokens.iconColorHover, _Popovertokens.tokens.iconColorActive);
 const Tail = _styledcomponents.default.div.withConfig({
     displayName: "Popover.styles__Tail",
-    componentId: "sc-4ef6b1a9-2"
+    componentId: "sc-faebddb-2"
 })([
     `position:absolute;pointer-events:none;width:`,
     `;height:`,

package/dist/styled-components/cjs/hooks/useFocusTrap.js

@@ -44,18 +44,20 @@ const processNode = (node, firstFocusSelector, ref)=>{
     }
 };
 const focusManager = new _focusManager.FocusManager();
-const useFocusTrap = (active = true, firstFocusSelector, focusAfterNode, focusAfterAnimation, enableOnFirstMount)=>{
+const useFocusTrap = (active = true, firstFocusSelector, focusAfterNode, focusAfterAnimation, enableOnFirstMount, focusTrapSelectors)=>{
     const ref = (0, _react.useRef)();
+    const focusTrapSelectorsRef = (0, _react.useRef)(focusTrapSelectors);
+    focusTrapSelectorsRef.current = focusTrapSelectors;
     const setRef = (0, _react.useCallback)((node)=>{
         if (!active) {
             return;
         }
         if (ref.current) {
-            focusManager.teardownScopedFocus();
+            focusManager.teardownScopedFocus(ref.current);
             focusManager.returnFocus();
         }
         if ((active || enableOnFirstMount) && node) {
-            focusManager.setupScopedFocus(node);
+            focusManager.setupScopedFocus(node, ()=>focusTrapSelectorsRef.current);
             focusManager.markForFocusAfter(focusAfterNode);
             // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.
             setTimeout(()=>{
@@ -81,11 +83,13 @@ const useFocusTrap = (active = true, firstFocusSelector, focusAfterNode, focusAf
             return;
         }
         const handleKeyDown = (event)=>{
-            if (event.key === 'Tab' && ref.current) {
-                (0, _scopeTab.scopeTab)(ref.current, event, active);
+            if (event.key === 'Tab' && ref.current && focusManager.isTopFocusNode(ref.current)) {
+                (0, _scopeTab.scopeTab)(ref.current, event, active, focusTrapSelectorsRef.current);
                 if (enableOnFirstMount) {
                     setTimeout(()=>{
-                        focusManager.teardownScopedFocus();
+                        if (ref.current) {
+                            focusManager.teardownScopedFocus(ref.current);
+                        }
                     });
                 }
             }

package/dist/styled-components/cjs/mixins/applySliderThumb.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get applySliderThumb () {
+        return applySliderThumb;
+    },
+    get applySliderThumbFocus () {
+        return applySliderThumbFocus;
+    }
+});
+/**
+ * Слои фона бегунка. Порядок: содержимое, заливка по padding-box, рамка по border-box.
+ */ const thumbLayers = (tokens, borderColorToken, innerContent)=>`
+    background: ${innerContent} no-repeat center,
+        linear-gradient(var(${tokens.background}, transparent), var(${tokens.background}, transparent)) padding-box,
+        var(${borderColorToken}, transparent) border-box;
+`;
+const applySliderThumb = (tokens)=>`
+    box-sizing: content-box;
+    width: var(${tokens.width});
+    height: var(${tokens.height}, var(${tokens.width}));
+    border-radius: var(${tokens.borderRadius}, 50%);
+    cursor: grab;
+
+    border-style: solid;
+    border-color: transparent;
+    border-width: var(${tokens.borderWidth}, 0);
+
+    transition: background-color 0.1s ease-in-out, background-image 0.1s ease-in-out;
+
+    ${thumbLayers(tokens, tokens.borderColor, 'none')}
+`;
+const applySliderThumbFocus = (tokens)=>thumbLayers(tokens, tokens.focusBorderColor, `var(${tokens.innerContent}, none)`);

package/dist/styled-components/cjs/mixins/index.js

@@ -15,6 +15,7 @@ _export_star(require("./applySkeletonAnimation"), exports);
 _export_star(require("./applyHidden"), exports);
 _export_star(require("./createApplyPaperMixin"), exports);
 _export_star(require("./addScrollbar"), exports);
+_export_star(require("./applySliderThumb"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/styled-components/cjs/utils/focusManager.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "FocusManager", {
         return FocusManager;
     }
 });
-const _tabbable = require("./tabbable");
+const _focusScope = require("./focusScope");
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -31,11 +31,11 @@ class FocusManager {
         _define_property(this, "handleFocus", ()=>{
             // Фокус всегда должен находиться внутри необходимой ноды
             const focusNode = this.focusNodes[this.focusNodes.length - 1];
-            if (!focusNode || focusNode.contains(document.activeElement)) {
+            if (!focusNode || (0, _focusScope.isElementInFocusScope)(focusNode.element, document.activeElement, focusNode.getFocusTrapSelectors?.())) {
                 return;
             }
             // Выделяем первый tabbable элемент
-            const el = (0, _tabbable.findTabbableDescendants)(focusNode)[0] || focusNode;
+            const el = (0, _focusScope.findTabbableInFocusScope)(focusNode.element, focusNode.getFocusTrapSelectors?.())[0] || focusNode.element;
             el.focus();
         });
         // добавление на фокус после анмаунта
@@ -51,14 +51,25 @@ class FocusManager {
             }
         });
         // при маунте ноды
-        _define_property(this, "setupScopedFocus", (element)=>{
-            this.focusNodes.push(element);
-            document.addEventListener('focusin', this.handleFocus, true);
+        _define_property(this, "setupScopedFocus", (element, getFocusTrapSelectors)=>{
+            this.focusNodes.push({
+                element,
+                getFocusTrapSelectors
+            });
+            if (this.focusNodes.length === 1) {
+                document.addEventListener('focusin', this.handleFocus, true);
+            }
         });
         // при анмаунте
-        _define_property(this, "teardownScopedFocus", ()=>{
-            this.focusNodes.pop();
-            document.removeEventListener('focusin', this.handleFocus);
+        _define_property(this, "teardownScopedFocus", (element)=>{
+            const focusNodeIndex = element ? this.focusNodes.map((focusNode)=>focusNode.element).lastIndexOf(element) : this.focusNodes.length - 1;
+            if (focusNodeIndex >= 0) {
+                this.focusNodes.splice(focusNodeIndex, 1);
+            }
+            if (!this.focusNodes.length) {
+                document.removeEventListener('focusin', this.handleFocus, true);
+            }
         });
+        _define_property(this, "isTopFocusNode", (element)=>this.focusNodes[this.focusNodes.length - 1]?.element === element);
     }
 }

package/dist/styled-components/cjs/utils/focusScope.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get findTabbableInFocusScope () {
+        return findTabbableInFocusScope;
+    },
+    get isElementInFocusScope () {
+        return isElementInFocusScope;
+    }
+});
+const _tabbable = require("./tabbable");
+const getAdditionalFocusScopeElements = (root, focusTrapSelectors)=>{
+    if (!focusTrapSelectors?.length) {
+        return [];
+    }
+    const elements = focusTrapSelectors.flatMap((selector)=>Array.from(root.ownerDocument.querySelectorAll(selector)));
+    return Array.from(new Set(elements)).filter((element)=>element !== root);
+};
+const isElementInFocusScope = (root, element, focusTrapSelectors)=>{
+    if (!element) {
+        return false;
+    }
+    return [
+        root,
+        ...getAdditionalFocusScopeElements(root, focusTrapSelectors)
+    ].some((scopeElement)=>scopeElement.contains(element));
+};
+const findTabbableInFocusScope = (root, focusTrapSelectors)=>{
+    const additionalScopeElements = getAdditionalFocusScopeElements(root, focusTrapSelectors);
+    const tabbable = [
+        ...(0, _tabbable.findTabbableDescendants)(root),
+        ...additionalScopeElements.flatMap((element)=>[
+                ...(0, _tabbable.isTabble)(element) ? [
+                    element
+                ] : [],
+                ...(0, _tabbable.findTabbableDescendants)(element)
+            ])
+    ];
+    return Array.from(new Set(tabbable));
+};

package/dist/styled-components/cjs/utils/scopeTab.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "scopeTab", {
         return scopeTab;
     }
 });
-const _tabbable = require("./tabbable");
-const scopeTab = (node, event, activeFocusTrap)=>{
-    const tabbable = (0, _tabbable.findTabbableDescendants)(node);
+const _focusScope = require("./focusScope");
+const scopeTab = (node, event, activeFocusTrap, focusTrapSelectors)=>{
+    const tabbable = (0, _focusScope.findTabbableInFocusScope)(node, focusTrapSelectors);
     if (!tabbable.length) {
         event.preventDefault();
         return;

package/dist/styled-components/es/components/Accordion/Accordion.tokens.js

@@ -7,6 +7,8 @@ export const classes = {
     clearAccordionItem: 'clear-accordion-item',
     accordionItemShowBody: 'accordion-item-show-body',
     accordionPlusAnimationElement: 'accordion-plus-animation-element',
+    accordionArrowAnimation: 'accordion-arrow-animation',
+    accordionSignAnimation: 'accordion-sign-animation',
     accordionDisabled: 'accordion-disabled',
     accordionItemBody: 'accordion-item-body'
 };