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

package/dist/css/es/components/Tour/components/Card/Card.css

@@ -29,15 +29,16 @@
 
 .IconButton_styles_1ek7d1f_blr36gw__03e8ec5e{--box-shadow-spread:var(--plasma-button-border-width,0.063rem);position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);color:var(--plasma-button-color);background:var(--plasma-button-background-color);box-shadow:inset 0 0 0 var(--box-shadow-spread) var(--plasma-button-border-color,inset 0 0 0 0 transparent);height:var(--plasma-button-height);width:var(--plasma-button-width);padding:0 var(--plasma-button-padding,calc(var(--plasma-button-height) * 1.618 / 4));font-family:var(--plasma-button-font-family);font-size:var(--plasma-button-font-size);font-style:var(--plasma-button-font-style);font-weight:var(--plasma-button-font-weight);-webkit-letter-spacing:var(--plasma-button-letter-spacing);-moz-letter-spacing:var(--plasma-button-letter-spacing);-ms-letter-spacing:var(--plasma-button-letter-spacing);letter-spacing:var(--plasma-button-letter-spacing);line-height:var(--plasma-button-line-height);--plasma_private-btn-outline-size:var(--plasma-button-outline-size,0.0625rem);position:relative;--plasma-button-padding:0;--plasma-button-color:var(--plasma-icon-button-color);--plasma-button-background-color:var(--plasma-icon-button-background-color);--plasma-button-border-color:var(--plasma-icon-button-border-color);--plasma-button-color-hover:var(--plasma-icon-button-color-hover);--plasma-button-background-color-hover:var(--plasma-icon-button-background-color-hover);--plasma-button-border-color-hover:var(--plasma-icon-button-border-color-hover);--plasma-button-color-active:var(--plasma-icon-button-color-active);--plasma-button-background-color-active:var(--plasma-icon-button-background-color-active);--plasma-button-border-color-active:var(--plasma-icon-button-border-color-active);--plasma-button-loading-background-color:var(--plasma-icon-button-loading-background-color);--plasma-button-font-family:var(--plasma-icon-button-font-family);--plasma-button-font-size:var(--plasma-icon-button-font-size);--plasma-button-font-style:var(--plasma-icon-button-font-style);--plasma-button-font-weight:var(--plasma-icon-button-font-weight);--plasma-button-letter-spacing:var(--plasma-icon-button-letter-spacing);--plasma-button-line-height:var(--plasma-icon-button-line-height);--plasma-button-width:var(--plasma-icon-button-width);--plasma-button-height:var(--plasma-icon-button-height);--plasma-button-radius:var(--plasma-icon-button-radius);--plasma-button-disabled-opacity:var(--plasma-icon-button-disabled-opacity);--plasma-button-focus-color:var(--plasma-icon-button-focus-color);--plasma-button-spinner-size:var(--plasma-icon-button-spinner-size);--plasma-button-spinner-color:var(--plasma-icon-button-spinner-color);--plasma-button-border-width:var(--plasma-icon-button-border-width);}a.IconButton_styles_1ek7d1f_blr36gw__03e8ec5e{-webkit-text-decoration:none;text-decoration:none;}.IconButton_styles_1ek7d1f_blr36gw__03e8ec5e.IconButton_styles_1ek7d1f_blr36gw__03e8ec5e.IconButton_styles_1ek7d1f_buttonSquare__03e8ec5e{width:var(--plasma-button-height);padding:0;}@media (hover:hover) and (pointer:fine){.IconButton_styles_1ek7d1f_blr36gw__03e8ec5e:hover{color:var(--plasma-button-color-hover,var(--plasma-button-color));background:var(--plasma-button-background-color-hover,var(--plasma-button-background-color));box-shadow:inset 0 0 0 var(--box-shadow-spread) var(--plasma-button-border-color-hover,inset 0 0 0 0 transparent);scale:var(--plasma-button-scale-hover);}}.IconButton_styles_1ek7d1f_blr36gw__03e8ec5e:active{color:var(--plasma-button-color-active,var(--plasma-button-color));background:var(--plasma-button-background-color-active,var(--plasma-button-background-color));box-shadow:inset 0 0 0 var(--box-shadow-spread) var(--plasma-button-border-color-active,inset 0 0 0 0 transparent);scale:var(---plasma-button-scale-active);}.IconButton_styles_1ek7d1f_blr36gw__03e8ec5e:focus-visible{outline:none;}.IconButton_styles_1ek7d1f_blr36gw__03e8ec5e::before{content:'';position:absolute;inset:0;z-index:1;border-radius:calc(0.125rem + var(--plasma_private-btn-br));outline:var(--plasma_private-btn-outline-size) solid transparent;outline-offset:0.125rem;-webkit-transition:outline-color 0.2s ease-in-out;transition:outline-color 0.2s ease-in-out;pointer-events:none;}.IconButton_styles_1ek7d1f_blr36gw__03e8ec5e.IconButton_styles_1ek7d1f_focusVisible__03e8ec5e:focus::before,.IconButton_styles_1ek7d1f_blr36gw__03e8ec5e[data-focus-visible-added]::before{outline-color:var(--plasma-button-focus-color);}.IconButton_styles_1ek7d1f_blr36gw__03e8ec5e[disabled]{opacity:var(--plasma-button-disabled-opacity);cursor:not-allowed;}@media (hover:hover) and (pointer:fine){.IconButton_styles_1ek7d1f_blr36gw__03e8ec5e[disabled]:hover,.IconButton_styles_1ek7d1f_blr36gw__03e8ec5e[disabled]:active{scale:none;color:var(--plasma-button-color);background:var(--plasma-button-background-color);}}.IconButton_styles_1ek7d1f_blr36gw__03e8ec5e.IconButton_styles_1ek7d1f_buttonStretchingFixed__03e8ec5e{width:var(--plasma-button-width);}.IconButton_styles_1ek7d1f_blr36gw__03e8ec5e.IconButton_styles_1ek7d1f_buttonStretchingFilled__03e8ec5e{width:100%;}.IconButton_styles_1ek7d1f_blr36gw__03e8ec5e.IconButton_styles_1ek7d1f_buttonStretchingAuto__03e8ec5e{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
 
-.Card_styles_m0p57t_tbc7s1g__09659e5e{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--tbc7s1g-0);-ms-flex-direction:var(--tbc7s1g-0);flex-direction:var(--tbc7s1g-0);padding:var(--sdds-core-tour-card-card-padding);background:var(--sdds-core-tour-card-card-background);border-radius:var(--sdds-core-tour-card-border-radius);box-sizing:border-box;width:var(--tbc7s1g-1);height:var(--tbc7s1g-2);max-height:var(--tbc7s1g-3);gap:var(--tbc7s1g-4);}
-.Card_styles_m0p57t_c1cvsi6y__09659e5e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;}
-.Card_styles_m0p57t_i1o2e5sn__09659e5e{width:var(--i1o2e5sn-0);height:var(--i1o2e5sn-1);border-radius:calc(var(--sdds-core-tour-card-border-radius) - var(--sdds-core-tour-card-card-padding));}
-.Card_styles_m0p57t_ckcs0i4__09659e5e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;padding:var(--sdds-core-tour-card-text-padding);padding:var(--ckcs0i4-0);gap:var(--sdds-core-tour-card-text-gap);}
-.Card_styles_m0p57t_t15yp80a__09659e5e{color:var(--sdds-core-tour-card-title-color);font-family:var(--sdds-core-tour-card-title-font-family);font-size:var(--sdds-core-tour-card-title-font-size);font-style:var(--sdds-core-tour-card-title-font-style);-webkit-letter-spacing:var(--sdds-core-tour-card-title-font-letter-spacing);-moz-letter-spacing:var(--sdds-core-tour-card-title-font-letter-spacing);-ms-letter-spacing:var(--sdds-core-tour-card-title-font-letter-spacing);letter-spacing:var(--sdds-core-tour-card-title-font-letter-spacing);line-height:var(--sdds-core-tour-card-title-font-line-height);font-weight:var(--sdds-core-tour-card-title-font-weight);}
-.Card_styles_m0p57t_d1cs9yrc__09659e5e{color:var(--sdds-core-tour-card-description-color);font-family:var(--sdds-core-tour-card-description-font-family);font-size:var(--sdds-core-tour-card-description-font-size);font-style:var(--sdds-core-tour-card-description-font-style);line-height:var(--sdds-core-tour-card-description-font-line-height);font-weight:var(--sdds-core-tour-card-description-font-weight);}
-.Card_styles_m0p57t_c17sry1y__09659e5e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--c17sry1y-0);-ms-flex-direction:var(--c17sry1y-0);flex-direction:var(--c17sry1y-0);-webkit-align-items:var(--c17sry1y-1);-webkit-box-align:var(--c17sry1y-1);-ms-flex-align:var(--c17sry1y-1);align-items:var(--c17sry1y-1);-webkit-box-pack:var(--c17sry1y-2);-webkit-justify-content:var(--c17sry1y-2);-ms-flex-pack:var(--c17sry1y-2);justify-content:var(--c17sry1y-2);}
-.Card_styles_m0p57t_d1mvnxmw__09659e5e{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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:var(--d1mvnxmw-0);padding:0;list-style:none;gap:var(--sdds-core-tour-card-pagination-dots-gap);}
-.Card_styles_m0p57t_d1uwxd7k__09659e5e{width:var(--sdds-core-tour-card-pagination-dot-size);height:var(--sdds-core-tour-card-pagination-dot-size);cursor:pointer;border-radius:50%;background:var(--d1uwxd7k-0);-webkit-transition:background 0.3s ease-in-out;transition:background 0.3s ease-in-out;}.Card_styles_m0p57t_d1uwxd7k__09659e5e:hover{background:var(--d1uwxd7k-1);}.Card_styles_m0p57t_d1uwxd7k__09659e5e:active{background:var(--d1uwxd7k-2);}
-.Card_styles_m0p57t_aof2pbk__09659e5e{margin:var(--aof2pbk-0);-webkit-order:var(--aof2pbk-1);-ms-flex-order:var(--aof2pbk-1);order:var(--aof2pbk-1);}
-.Card_styles_m0p57t_s1d55h5t__09659e5e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:var(--s1d55h5t-0);}
-.Card_styles_m0p57t_cvdlr61__09659e5e{position:absolute;top:1rem;right:1rem;--plasma-icon-button-color:var(--sdds-core-tour-card-close-button-color);--plasma-icon-button-background-color:var(--sdds-core-tour-card-close-button-background-color);--plasma-icon-button-color-hover:var(--sdds-core-tour-card-close-button-color-hover);--plasma-icon-button-color-active:var(--sdds-core-tour-card-close-button-color-active);--plasma-icon-button-height:var(--sdds-core-tour-card-close-button-width);--plasma-icon-button-width:var(--sdds-core-tour-card-close-button-height);--plasma-icon-button-radius:var(--sdds-core-tour-card-close-button-radius);--plasma-icon-button-focus-color:var(--sdds-core-tour-card-close-button-focus-color);}
+.Card_styles_1iom4f3_tbc7s1g__03d2546d{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--tbc7s1g-0);-ms-flex-direction:var(--tbc7s1g-0);flex-direction:var(--tbc7s1g-0);padding:var(--sdds-core-tour-card-card-padding);background:var(--sdds-core-tour-card-card-background);border-radius:var(--sdds-core-tour-card-border-radius);box-sizing:border-box;width:var(--tbc7s1g-1);height:var(--tbc7s1g-2);max-height:var(--tbc7s1g-3);gap:var(--tbc7s1g-4);}
+.Card_styles_1iom4f3_c1cvsi6y__03d2546d{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;}
+.Card_styles_1iom4f3_i1o2e5sn__03d2546d{width:var(--i1o2e5sn-0);height:var(--i1o2e5sn-1);border-radius:var(--sdds-core-tour-card-image-border-radius,calc(var(--sdds-core-tour-card-border-radius) - var(--sdds-core-tour-card-card-padding)));margin:var(--sdds-core-tour-card-image-margin);}
+.Card_styles_1iom4f3_ckcs0i4__03d2546d{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;padding:var(--ckcs0i4-0);gap:var(--sdds-core-tour-card-text-gap);}
+.Card_styles_1iom4f3_t15yp80a__03d2546d{color:var(--sdds-core-tour-card-title-color);font-family:var(--sdds-core-tour-card-title-font-family);font-size:var(--sdds-core-tour-card-title-font-size);font-style:var(--sdds-core-tour-card-title-font-style);-webkit-letter-spacing:var(--sdds-core-tour-card-title-font-letter-spacing);-moz-letter-spacing:var(--sdds-core-tour-card-title-font-letter-spacing);-ms-letter-spacing:var(--sdds-core-tour-card-title-font-letter-spacing);letter-spacing:var(--sdds-core-tour-card-title-font-letter-spacing);line-height:var(--sdds-core-tour-card-title-font-line-height);font-weight:var(--sdds-core-tour-card-title-font-weight);}
+.Card_styles_1iom4f3_d1cs9yrc__03d2546d{color:var(--sdds-core-tour-card-description-color);font-family:var(--sdds-core-tour-card-description-font-family);font-size:var(--sdds-core-tour-card-description-font-size);font-style:var(--sdds-core-tour-card-description-font-style);line-height:var(--sdds-core-tour-card-description-font-line-height);font-weight:var(--sdds-core-tour-card-description-font-weight);}
+.Card_styles_1iom4f3_c17sry1y__03d2546d{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--c17sry1y-0);-ms-flex-direction:var(--c17sry1y-0);flex-direction:var(--c17sry1y-0);-webkit-align-items:var(--c17sry1y-1);-webkit-box-align:var(--c17sry1y-1);-ms-flex-align:var(--c17sry1y-1);align-items:var(--c17sry1y-1);-webkit-box-pack:var(--c17sry1y-2);-webkit-justify-content:var(--c17sry1y-2);-ms-flex-pack:var(--c17sry1y-2);justify-content:var(--c17sry1y-2);}
+.Card_styles_1iom4f3_n1mvnxmw__03d2546d{color:var(--sdds-core-tour-card-pagination-number-color);font-family:var(--sdds-core-tour-card-pagination-number-font-family);font-size:var(--sdds-core-tour-card-pagination-number-font-size);font-style:var(--sdds-core-tour-card-pagination-number-font-style);line-height:var(--sdds-core-tour-card-pagination-number-font-line-height);font-weight:var(--sdds-core-tour-card-pagination-number-font-weight);text-align:center;}
+.Card_styles_1iom4f3_d1uwxd7k__03d2546d{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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:var(--d1uwxd7k-0);padding:0;list-style:none;gap:var(--sdds-core-tour-card-pagination-dots-gap);}
+.Card_styles_1iom4f3_dof2pbk__03d2546d{width:var(--sdds-core-tour-card-pagination-dot-size);height:var(--sdds-core-tour-card-pagination-dot-size);cursor:pointer;border-radius:50%;background:var(--dof2pbk-0);-webkit-transition:background 0.3s ease-in-out;transition:background 0.3s ease-in-out;}.Card_styles_1iom4f3_dof2pbk__03d2546d:hover{background:var(--dof2pbk-1);}.Card_styles_1iom4f3_dof2pbk__03d2546d:active{background:var(--dof2pbk-2);}
+.Card_styles_1iom4f3_a1d55h5t__03d2546d{margin:var(--a1d55h5t-0);-webkit-order:var(--a1d55h5t-1);-ms-flex-order:var(--a1d55h5t-1);order:var(--a1d55h5t-1);}
+.Card_styles_1iom4f3_svdlr61__03d2546d{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:var(--svdlr61-0);}
+.Card_styles_1iom4f3_ciy9mm4__03d2546d{position:absolute;top:1rem;right:1rem;--plasma-icon-button-color:var(--sdds-core-tour-card-close-button-color);--plasma-icon-button-background-color:var(--sdds-core-tour-card-close-button-background-color);--plasma-icon-button-color-hover:var(--sdds-core-tour-card-close-button-color-hover);--plasma-icon-button-color-active:var(--sdds-core-tour-card-close-button-color-active);--plasma-icon-button-height:var(--sdds-core-tour-card-close-button-width);--plasma-icon-button-width:var(--sdds-core-tour-card-close-button-height);--plasma-icon-button-radius:var(--sdds-core-tour-card-close-button-radius);--plasma-icon-button-focus-color:var(--sdds-core-tour-card-close-button-focus-color);}

package/dist/css/es/components/Tour/components/Card/Card.js

@@ -1,16 +1,17 @@
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { forwardRef } from 'react';
-import { IconClose } from '../../../_Icon/Icons/IconClose.js';
+import React__default, { forwardRef, useRef, useCallback } from 'react';
 import cls from 'classnames';
+import { IconClose } from '../../../_Icon/Icons/IconClose.js';
+import { usePaginationDots } from '../../../PaginationDots/usePaginationDots.js';
 import { base } from './variations/_view/base.js';
 import { base as base$1 } from './variations/_size/base.js';
-import { TourCard, CloseButton, Img, CardBody, CardText, Title, Description, Controls, DotsContainer, Dot, ActionButtonsContainer, SkipButtonContainer } from './Card.styles.js';
-import { classes } from './Card.tokens.js';
+import { DotsContainer, Dot, NumberContainer, TourCard, CloseButton, Img, CardBody, CardText, Title, Description, Controls, ActionButtonsContainer, SkipButtonContainer } from './Card.styles.js';
+import { classes, tokens } from './Card.tokens.js';
 
-var _IconClose;
-var _excluded = ["view", "size", "image", "title", "description", "orientation", "showPagination", "stepCurrent", "stepLength", "actionButtons", "skipButton", "showClose", "goToStep", "onClose", "style", "className"];
+var _excluded = ["view", "size", "image", "title", "description", "orientation", "contentDirection", "showPagination", "paginationVisibleItems", "paginationType", "stepCurrent", "stepLength", "actionButtons", "skipButton", "showClose", "goToStep", "onClose", "style", "className"];
 var tourCardRoot = function tourCardRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, outerRef) {
+    var _NumberContainer;
     var view = _ref.view,
       size = _ref.size,
       image = _ref.image,
@@ -18,8 +19,14 @@ var tourCardRoot = function tourCardRoot(Root) {
       description = _ref.description,
       _ref$orientation = _ref.orientation,
       orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
+      _ref$contentDirection = _ref.contentDirection,
+      contentDirection = _ref$contentDirection === void 0 ? 'row-reverse' : _ref$contentDirection,
       _ref$showPagination = _ref.showPagination,
       showPagination = _ref$showPagination === void 0 ? true : _ref$showPagination,
+      _ref$paginationVisibl = _ref.paginationVisibleItems,
+      paginationVisibleItems = _ref$paginationVisibl === void 0 ? 3 : _ref$paginationVisibl,
+      _ref$paginationType = _ref.paginationType,
+      paginationType = _ref$paginationType === void 0 ? 'dot' : _ref$paginationType,
       _ref$stepCurrent = _ref.stepCurrent,
       stepCurrent = _ref$stepCurrent === void 0 ? 0 : _ref$stepCurrent,
       _ref$stepLength = _ref.stepLength,
@@ -35,11 +42,45 @@ var tourCardRoot = function tourCardRoot(Root) {
       rest = _objectWithoutProperties(_ref, _excluded);
     // Если показан только текст, то к нему добавляется отступ снизу для компенсации.
     var onlyText = !showPagination && !actionButtons && !skipButton;
+    var paginationItems = useRef(Array(stepLength).fill(0).map(function (_, ind) {
+      return {
+        id: ind + 1
+      };
+    }));
+    var _usePaginationDots = usePaginationDots({
+        items: paginationItems.current,
+        index: stepCurrent,
+        visibleItems: Math.min(paginationVisibleItems, stepLength)
+      }),
+      sliced = _usePaginationDots.sliced,
+      activeId = _usePaginationDots.activeId;
     var dotOnClick = function dotOnClick(index) {
       if (goToStep) {
         goToStep(index);
       }
     };
+    var getPaginationContent = useCallback(function () {
+      var paginationContent = {
+        dot: /*#__PURE__*/React__default.createElement(DotsContainer, {
+          orientation: orientation,
+          className: classes.pagination
+        }, sliced.map(function (_ref2, index) {
+          var id = _ref2.id;
+          return /*#__PURE__*/React__default.createElement(Dot, {
+            key: index,
+            isActive: activeId === id,
+            onClick: function onClick() {
+              return dotOnClick(index);
+            }
+          });
+        })),
+        compact: _NumberContainer || (_NumberContainer = /*#__PURE__*/React__default.createElement(NumberContainer, null, activeId, "/", stepLength))
+      };
+      if (orientation !== 'horizontal') {
+        return paginationContent.dot;
+      }
+      return paginationContent[paginationType];
+    }, [sliced, activeId, stepLength, orientation, paginationType]);
     return /*#__PURE__*/React__default.createElement(Root, _extends({
       ref: outerRef,
       view: view,
@@ -47,13 +88,14 @@ var tourCardRoot = function tourCardRoot(Root) {
     }, rest), /*#__PURE__*/React__default.createElement(TourCard, {
       className: cls(className, classes.card),
       style: style,
-      orientation: orientation
+      orientation: orientation,
+      contentDirection: contentDirection
     }, showClose && /*#__PURE__*/React__default.createElement(CloseButton, {
       onClick: onClose
-    }, _IconClose || (_IconClose = /*#__PURE__*/React__default.createElement(IconClose, {
-      size: "xs",
+    }, /*#__PURE__*/React__default.createElement(IconClose, {
+      sizeCustomValue: "var(".concat(tokens.closeButtonIconSize, ", 1rem)"),
       color: "inherit"
-    }))), image && /*#__PURE__*/React__default.createElement(Img, _extends({}, image, {
+    })), image && /*#__PURE__*/React__default.createElement(Img, _extends({}, image, {
       orientation: orientation
     })), /*#__PURE__*/React__default.createElement(CardBody, {
       orientation: orientation
@@ -64,19 +106,9 @@ var tourCardRoot = function tourCardRoot(Root) {
     }, title), /*#__PURE__*/React__default.createElement(Description, {
       className: classes.description
     }, description)), /*#__PURE__*/React__default.createElement(Controls, {
-      orientation: orientation
-    }, showPagination && /*#__PURE__*/React__default.createElement(DotsContainer, {
       orientation: orientation,
-      className: classes.pagination
-    }, Array(stepLength).fill(null).map(function (_, index) {
-      return /*#__PURE__*/React__default.createElement(Dot, {
-        key: index,
-        isActive: stepCurrent === index,
-        onClick: function onClick() {
-          return dotOnClick(index);
-        }
-      });
-    })), actionButtons && /*#__PURE__*/React__default.createElement(ActionButtonsContainer, {
+      contentDirection: contentDirection
+    }, showPagination && getPaginationContent(), actionButtons && /*#__PURE__*/React__default.createElement(ActionButtonsContainer, {
       orientation: orientation,
       className: classes.actionButtons
     }, actionButtons), skipButton && /*#__PURE__*/React__default.createElement(SkipButtonContainer, {

package/dist/css/es/components/Tour/components/Card/Card.styles.js

@@ -1,4 +1,4 @@
-import './Card.styles_m0p57t.css';
+import './Card.styles_1iom4f3.css';
 import { styled } from '@linaria/react';
 import { tokens } from './Card.tokens.js';
 import { component, mergeConfig } from '../../../../engines/common.js';
@@ -8,8 +8,12 @@ var mergedConfig = /*#__PURE__*/mergeConfig(iconButtonConfig);
 var IconButton = /*#__PURE__*/component(mergedConfig);
 var _exp = function _exp() {
   return function (_ref) {
-    var orientation = _ref.orientation;
-    return orientation === 'horizontal' ? 'row-reverse' : 'column';
+    var orientation = _ref.orientation,
+      contentDirection = _ref.contentDirection;
+    if (orientation === 'vertical') {
+      return 'column';
+    }
+    return contentDirection;
   };
 };
 var _exp5 = function _exp5() {
@@ -74,7 +78,7 @@ var Img = /*#__PURE__*/styled('img')({
     "i1o2e5sn-1": [/*#__PURE__*/_exp0()]
   }
 });
-var _exp12 = function _exp12() {
+var _exp13 = function _exp13() {
   return function (_ref8) {
     var onlyText = _ref8.onlyText;
     return onlyText ? "var(".concat(tokens.textPaddingExtra, ")") : "var(".concat(tokens.textPadding, ")");
@@ -85,7 +89,7 @@ var CardText = /*#__PURE__*/styled('div')({
   "class": "ckcs0i4",
   propsAsIs: false,
   vars: {
-    "ckcs0i4-0": [/*#__PURE__*/_exp12()]
+    "ckcs0i4-0": [/*#__PURE__*/_exp13()]
   }
 });
 var Title = /*#__PURE__*/styled('span')({
@@ -98,19 +102,23 @@ var Description = /*#__PURE__*/styled('span')({
   "class": "d1cs9yrc",
   propsAsIs: false
 });
-var _exp27 = function _exp27() {
+var _exp28 = function _exp28() {
   return function (_ref9) {
-    var orientation = _ref9.orientation;
-    return orientation === 'horizontal' ? 'row' : 'column';
+    var orientation = _ref9.orientation,
+      contentDirection = _ref9.contentDirection;
+    if (orientation === 'vertical') {
+      return 'column';
+    }
+    return contentDirection === 'row-reverse' ? 'row' : 'row-reverse';
   };
 };
-var _exp28 = function _exp28() {
+var _exp29 = function _exp29() {
   return function (_ref0) {
     var orientation = _ref0.orientation;
     return orientation === 'horizontal' ? 'center' : 'stretch';
   };
 };
-var _exp29 = function _exp29() {
+var _exp30 = function _exp30() {
   return function (_ref1) {
     var orientation = _ref1.orientation;
     return orientation === 'horizontal' ? 'space-between' : 'normal';
@@ -121,38 +129,43 @@ var Controls = /*#__PURE__*/styled('div')({
   "class": "c17sry1y",
   propsAsIs: false,
   vars: {
-    "c17sry1y-0": [/*#__PURE__*/_exp27()],
-    "c17sry1y-1": [/*#__PURE__*/_exp28()],
-    "c17sry1y-2": [/*#__PURE__*/_exp29()]
+    "c17sry1y-0": [/*#__PURE__*/_exp28()],
+    "c17sry1y-1": [/*#__PURE__*/_exp29()],
+    "c17sry1y-2": [/*#__PURE__*/_exp30()]
   }
 });
-var _exp30 = function _exp30() {
+var NumberContainer = /*#__PURE__*/styled('div')({
+  name: "NumberContainer",
+  "class": "n1mvnxmw",
+  propsAsIs: false
+});
+var _exp37 = function _exp37() {
   return function (_ref10) {
     var orientation = _ref10.orientation;
-    return orientation === 'horizontal' ? '0 0 0 8px' : "var(".concat(tokens.dotContainerMargin, ")");
+    return orientation === 'horizontal' ? '0 0 0 0.5rem' : "var(".concat(tokens.dotContainerMargin, ")");
   };
 };
 var DotsContainer = /*#__PURE__*/styled('ul')({
   name: "DotsContainer",
-  "class": "d1mvnxmw",
+  "class": "d1uwxd7k",
   propsAsIs: false,
   vars: {
-    "d1mvnxmw-0": [/*#__PURE__*/_exp30()]
+    "d1uwxd7k-0": [/*#__PURE__*/_exp37()]
   }
 });
-var _exp34 = function _exp34() {
+var _exp41 = function _exp41() {
   return function (_ref11) {
     var isActive = _ref11.isActive;
     return isActive ? "var(".concat(tokens.dotActiveBackground, ")") : "var(".concat(tokens.dotBackground, ")");
   };
 };
-var _exp35 = function _exp35() {
+var _exp42 = function _exp42() {
   return function (_ref12) {
     var isActive = _ref12.isActive;
     return isActive ? "var(".concat(tokens.dotActiveBackgroundHover, ",var(").concat(tokens.dotActiveBackground, "))") : "var(".concat(tokens.dotBackgroundHover, ")");
   };
 };
-var _exp36 = function _exp36() {
+var _exp43 = function _exp43() {
   return function (_ref13) {
     var isActive = _ref13.isActive;
     return isActive ? "var(".concat(tokens.dotActiveBackgroundActive, ", var(").concat(tokens.dotActiveBackground, "))") : "var(".concat(tokens.dotBackgroundActive, ")");
@@ -160,21 +173,21 @@ var _exp36 = function _exp36() {
 };
 var Dot = /*#__PURE__*/styled('li')({
   name: "Dot",
-  "class": "d1uwxd7k",
+  "class": "dof2pbk",
   propsAsIs: false,
   vars: {
-    "d1uwxd7k-0": [/*#__PURE__*/_exp34()],
-    "d1uwxd7k-1": [/*#__PURE__*/_exp35()],
-    "d1uwxd7k-2": [/*#__PURE__*/_exp36()]
+    "dof2pbk-0": [/*#__PURE__*/_exp41()],
+    "dof2pbk-1": [/*#__PURE__*/_exp42()],
+    "dof2pbk-2": [/*#__PURE__*/_exp43()]
   }
 });
-var _exp37 = function _exp37() {
+var _exp44 = function _exp44() {
   return function (_ref14) {
     var orientation = _ref14.orientation;
     return orientation === 'horizontal' ? '0' : "var(".concat(tokens.actionButtonsMargin, ")");
   };
 };
-var _exp38 = function _exp38() {
+var _exp45 = function _exp45() {
   return function (_ref15) {
     var orientation = _ref15.orientation;
     return orientation === 'horizontal' ? '-1' : 'auto';
@@ -182,14 +195,14 @@ var _exp38 = function _exp38() {
 };
 var ActionButtonsContainer = /*#__PURE__*/styled('div')({
   name: "ActionButtonsContainer",
-  "class": "aof2pbk",
+  "class": "a1d55h5t",
   propsAsIs: false,
   vars: {
-    "aof2pbk-0": [/*#__PURE__*/_exp37()],
-    "aof2pbk-1": [/*#__PURE__*/_exp38()]
+    "a1d55h5t-0": [/*#__PURE__*/_exp44()],
+    "a1d55h5t-1": [/*#__PURE__*/_exp45()]
   }
 });
-var _exp39 = function _exp39() {
+var _exp46 = function _exp46() {
   return function (_ref16) {
     var orientation = _ref16.orientation;
     return orientation === 'horizontal' ? '0 0 0 8px' : "var(".concat(tokens.skipButtonMargin, ")");
@@ -197,19 +210,19 @@ var _exp39 = function _exp39() {
 };
 var SkipButtonContainer = /*#__PURE__*/styled('div')({
   name: "SkipButtonContainer",
-  "class": "s1d55h5t",
+  "class": "svdlr61",
   propsAsIs: false,
   vars: {
-    "s1d55h5t-0": [/*#__PURE__*/_exp39()]
+    "svdlr61-0": [/*#__PURE__*/_exp46()]
   }
 });
-var _exp40 = function _exp40() {
+var _exp47 = function _exp47() {
   return IconButton;
 };
-var CloseButton = /*#__PURE__*/styled(_exp40())({
+var CloseButton = /*#__PURE__*/styled(_exp47())({
   name: "CloseButton",
-  "class": "cvdlr61",
+  "class": "ciy9mm4",
   propsAsIs: true
 });
 
-export { ActionButtonsContainer, CardBody, CardText, CloseButton, Controls, Description, Dot, DotsContainer, IconButton, Img, SkipButtonContainer, Title, TourCard };
+export { ActionButtonsContainer, CardBody, CardText, CloseButton, Controls, Description, Dot, DotsContainer, IconButton, Img, NumberContainer, SkipButtonContainer, Title, TourCard };

package/dist/css/es/components/Tour/components/Card/{Card.styles_m0p57t.css → Card.styles_1iom4f3.css}

@@ -1,12 +1,13 @@
 .tbc7s1g{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--tbc7s1g-0);-ms-flex-direction:var(--tbc7s1g-0);flex-direction:var(--tbc7s1g-0);padding:var(--sdds-core-tour-card-card-padding);background:var(--sdds-core-tour-card-card-background);border-radius:var(--sdds-core-tour-card-border-radius);box-sizing:border-box;width:var(--tbc7s1g-1);height:var(--tbc7s1g-2);max-height:var(--tbc7s1g-3);gap:var(--tbc7s1g-4);}
 .c1cvsi6y{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;}
-.i1o2e5sn{width:var(--i1o2e5sn-0);height:var(--i1o2e5sn-1);border-radius:calc(var(--sdds-core-tour-card-border-radius) - var(--sdds-core-tour-card-card-padding));}
-.ckcs0i4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;padding:var(--sdds-core-tour-card-text-padding);padding:var(--ckcs0i4-0);gap:var(--sdds-core-tour-card-text-gap);}
+.i1o2e5sn{width:var(--i1o2e5sn-0);height:var(--i1o2e5sn-1);border-radius:var(--sdds-core-tour-card-image-border-radius,calc(var(--sdds-core-tour-card-border-radius) - var(--sdds-core-tour-card-card-padding)));margin:var(--sdds-core-tour-card-image-margin);}
+.ckcs0i4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;padding:var(--ckcs0i4-0);gap:var(--sdds-core-tour-card-text-gap);}
 .t15yp80a{color:var(--sdds-core-tour-card-title-color);font-family:var(--sdds-core-tour-card-title-font-family);font-size:var(--sdds-core-tour-card-title-font-size);font-style:var(--sdds-core-tour-card-title-font-style);-webkit-letter-spacing:var(--sdds-core-tour-card-title-font-letter-spacing);-moz-letter-spacing:var(--sdds-core-tour-card-title-font-letter-spacing);-ms-letter-spacing:var(--sdds-core-tour-card-title-font-letter-spacing);letter-spacing:var(--sdds-core-tour-card-title-font-letter-spacing);line-height:var(--sdds-core-tour-card-title-font-line-height);font-weight:var(--sdds-core-tour-card-title-font-weight);}
 .d1cs9yrc{color:var(--sdds-core-tour-card-description-color);font-family:var(--sdds-core-tour-card-description-font-family);font-size:var(--sdds-core-tour-card-description-font-size);font-style:var(--sdds-core-tour-card-description-font-style);line-height:var(--sdds-core-tour-card-description-font-line-height);font-weight:var(--sdds-core-tour-card-description-font-weight);}
 .c17sry1y{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--c17sry1y-0);-ms-flex-direction:var(--c17sry1y-0);flex-direction:var(--c17sry1y-0);-webkit-align-items:var(--c17sry1y-1);-webkit-box-align:var(--c17sry1y-1);-ms-flex-align:var(--c17sry1y-1);align-items:var(--c17sry1y-1);-webkit-box-pack:var(--c17sry1y-2);-webkit-justify-content:var(--c17sry1y-2);-ms-flex-pack:var(--c17sry1y-2);justify-content:var(--c17sry1y-2);}
-.d1mvnxmw{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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:var(--d1mvnxmw-0);padding:0;list-style:none;gap:var(--sdds-core-tour-card-pagination-dots-gap);}
-.d1uwxd7k{width:var(--sdds-core-tour-card-pagination-dot-size);height:var(--sdds-core-tour-card-pagination-dot-size);cursor:pointer;border-radius:50%;background:var(--d1uwxd7k-0);-webkit-transition:background 0.3s ease-in-out;transition:background 0.3s ease-in-out;}.d1uwxd7k:hover{background:var(--d1uwxd7k-1);}.d1uwxd7k:active{background:var(--d1uwxd7k-2);}
-.aof2pbk{margin:var(--aof2pbk-0);-webkit-order:var(--aof2pbk-1);-ms-flex-order:var(--aof2pbk-1);order:var(--aof2pbk-1);}
-.s1d55h5t{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:var(--s1d55h5t-0);}
-.cvdlr61{position:absolute;top:1rem;right:1rem;--plasma-icon-button-color:var(--sdds-core-tour-card-close-button-color);--plasma-icon-button-background-color:var(--sdds-core-tour-card-close-button-background-color);--plasma-icon-button-color-hover:var(--sdds-core-tour-card-close-button-color-hover);--plasma-icon-button-color-active:var(--sdds-core-tour-card-close-button-color-active);--plasma-icon-button-height:var(--sdds-core-tour-card-close-button-width);--plasma-icon-button-width:var(--sdds-core-tour-card-close-button-height);--plasma-icon-button-radius:var(--sdds-core-tour-card-close-button-radius);--plasma-icon-button-focus-color:var(--sdds-core-tour-card-close-button-focus-color);}
+.n1mvnxmw{color:var(--sdds-core-tour-card-pagination-number-color);font-family:var(--sdds-core-tour-card-pagination-number-font-family);font-size:var(--sdds-core-tour-card-pagination-number-font-size);font-style:var(--sdds-core-tour-card-pagination-number-font-style);line-height:var(--sdds-core-tour-card-pagination-number-font-line-height);font-weight:var(--sdds-core-tour-card-pagination-number-font-weight);text-align:center;}
+.d1uwxd7k{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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:var(--d1uwxd7k-0);padding:0;list-style:none;gap:var(--sdds-core-tour-card-pagination-dots-gap);}
+.dof2pbk{width:var(--sdds-core-tour-card-pagination-dot-size);height:var(--sdds-core-tour-card-pagination-dot-size);cursor:pointer;border-radius:50%;background:var(--dof2pbk-0);-webkit-transition:background 0.3s ease-in-out;transition:background 0.3s ease-in-out;}.dof2pbk:hover{background:var(--dof2pbk-1);}.dof2pbk:active{background:var(--dof2pbk-2);}
+.a1d55h5t{margin:var(--a1d55h5t-0);-webkit-order:var(--a1d55h5t-1);-ms-flex-order:var(--a1d55h5t-1);order:var(--a1d55h5t-1);}
+.svdlr61{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:var(--svdlr61-0);}
+.ciy9mm4{position:absolute;top:1rem;right:1rem;--plasma-icon-button-color:var(--sdds-core-tour-card-close-button-color);--plasma-icon-button-background-color:var(--sdds-core-tour-card-close-button-background-color);--plasma-icon-button-color-hover:var(--sdds-core-tour-card-close-button-color-hover);--plasma-icon-button-color-active:var(--sdds-core-tour-card-close-button-color-active);--plasma-icon-button-height:var(--sdds-core-tour-card-close-button-width);--plasma-icon-button-width:var(--sdds-core-tour-card-close-button-height);--plasma-icon-button-radius:var(--sdds-core-tour-card-close-button-radius);--plasma-icon-button-focus-color:var(--sdds-core-tour-card-close-button-focus-color);}

package/dist/css/es/components/Tour/components/Card/Card.tokens.js

@@ -11,6 +11,8 @@ var 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',
@@ -27,6 +29,12 @@ var 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',
@@ -38,6 +46,7 @@ var 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/css/es/components/_Icon/Icon.assets/ChevronDown.js

@@ -0,0 +1,18 @@
+import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+
+var _path;
+var ChevronDown = function ChevronDown(props) {
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    width: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M15.2929 9.88286C15.6834 9.49233 16.3166 9.49233 16.7071 9.88286C17.0976 10.2734 17.0976 10.9065 16.7071 11.2971L12 16.0042L7.29289 11.2971C6.90237 10.9065 6.90237 10.2734 7.29289 9.88286C7.68342 9.49233 8.31658 9.49233 8.70711 9.88286L12 13.1758L15.2929 9.88286Z",
+    fill: "currentColor"
+  })));
+};
+
+export { ChevronDown };

package/dist/css/es/components/_Icon/Icons/IconChevronDown.js

@@ -0,0 +1,21 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import { ChevronDown } from '../Icon.assets/ChevronDown.js';
+import { IconRoot } from '../IconRoot.js';
+
+var _excluded = ["size", "color", "className"];
+var IconChevronDown = function IconChevronDown(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'xs' : _ref$size,
+    color = _ref.color,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default.createElement(IconRoot, _extends({
+    className: className,
+    size: size,
+    color: color,
+    icon: ChevronDown
+  }, rest));
+};
+
+export { IconChevronDown };

package/dist/css/es/components/_Icon/Icons/IconClose.js

@@ -1,22 +1,25 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import { Close } from '../Icon.assets/Close.js';
 import { IconRoot } from '../IconRoot.js';
 
+var _excluded = ["size", "color", "className", "sizeCustomProperty", "sizeCustomValue"];
 var IconClose = function IconClose(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 's' : _ref$size,
     color = _ref.color,
     className = _ref.className,
     sizeCustomProperty = _ref.sizeCustomProperty,
-    sizeCustomValue = _ref.sizeCustomValue;
-  return /*#__PURE__*/React__default.createElement(IconRoot, {
+    sizeCustomValue = _ref.sizeCustomValue,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default.createElement(IconRoot, _extends({
     className: className,
     size: size,
     color: color,
     sizeCustomProperty: sizeCustomProperty,
     sizeCustomValue: sizeCustomValue,
     icon: Close
-  });
+  }, rest));
 };
 
 export { IconClose };

package/dist/css/es/components/_beta/Popover/Popover.styles.js

@@ -1,4 +1,4 @@
-import './Popover.styles_wo1y9u.css';
+import './Popover.styles_1go1jhe.css';
 import { styled } from '@linaria/react';
 import { tokens } from './Popover.tokens.js';
 

package/dist/css/es/components/_beta/Popover/{Popover.styles_wo1y9u.css → Popover.styles_1go1jhe.css}

@@ -1,4 +1,4 @@
-.b9iw01k{border-radius:var(--plasma-popover-border-radius);}
+.b9iw01k{border-radius:var(--plasma-popover-border-radius);outline:none;}
 .wy49zyb{position:relative;background:var(--plasma-popover-background-color);padding:var(--plasma-popover-padding);border-radius:var(--plasma-popover-border-radius);box-shadow:var(--plasma-popover-box-shadow);-webkit-filter:var(--plasma-popover-drop-shadow,none);filter:var(--plasma-popover-drop-shadow,none);width:100%;height:100%;box-sizing:border-box;}
 .c1elsyff{position:absolute;top:var(--plasma-popover-icon-offset);right:var(--plasma-popover-icon-offset);padding:0;margin:0;border:none;background:none;cursor:pointer;line-height:0;color:var(--plasma-popover-icon-color);}.c1elsyff:hover{color:var(--plasma-popover-icon-color-hover);}.c1elsyff:active{color:var(--plasma-popover-icon-color-active);}
 .t1ndukn0{position:absolute;pointer-events:none;width:var(--t1ndukn0-0);height:var(--t1ndukn0-1);top:var(--t1ndukn0-2);right:var(--t1ndukn0-3);bottom:var(--t1ndukn0-4);left:var(--t1ndukn0-5);}.t1ndukn0::before{content:'';position:absolute;top:50%;left:50%;width:var(--plasma-popover-tail-width);height:var(--plasma-popover-tail-height);background:var(--plasma-popover-background-color);-webkit-transform:translate(-50%,-50%) var(--t1ndukn0-6);-ms-transform:translate(-50%,-50%) var(--t1ndukn0-6);transform:translate(-50%,-50%) var(--t1ndukn0-6);-webkit-clip-path:shape( from 100% 100%, line to 0% 100%, curve to 50% 0% with calc(25% - var(--plasma-popover-tail-side-curvature) * 1.24939) calc(50% - var(--plasma-popover-tail-side-curvature) * 3.90435), curve to 100% 100% with calc(75% + var(--plasma-popover-tail-side-curvature) * 1.24939) calc(50% - var(--plasma-popover-tail-side-curvature) * 3.90435), close );clip-path:shape( from 100% 100%, line to 0% 100%, curve to 50% 0% with calc(25% - var(--plasma-popover-tail-side-curvature) * 1.24939) calc(50% - var(--plasma-popover-tail-side-curvature) * 3.90435), curve to 100% 100% with calc(75% + var(--plasma-popover-tail-side-curvature) * 1.24939) calc(50% - var(--plasma-popover-tail-side-curvature) * 3.90435), close );}

package/dist/css/es/hooks/useFocusTrap.js

@@ -48,17 +48,22 @@ var useFocusTrap = function useFocusTrap() {
   var focusAfterNode = arguments.length > 2 ? arguments[2] : undefined;
   var focusAfterAnimation = arguments.length > 3 ? arguments[3] : undefined;
   var enableOnFirstMount = arguments.length > 4 ? arguments[4] : undefined;
+  var focusTrapSelectors = arguments.length > 5 ? arguments[5] : undefined;
   var ref = useRef();
+  var focusTrapSelectorsRef = useRef(focusTrapSelectors);
+  focusTrapSelectorsRef.current = focusTrapSelectors;
   var setRef = useCallback(function (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, function () {
+        return focusTrapSelectorsRef.current;
+      });
       focusManager.markForFocusAfter(focusAfterNode);
 
       // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.
@@ -81,11 +86,13 @@ var useFocusTrap = function useFocusTrap() {
       return;
     }
     var handleKeyDown = function handleKeyDown(event) {
-      if (event.key === 'Tab' && ref.current) {
-        scopeTab(ref.current, event, active);
+      if (event.key === 'Tab' && ref.current && focusManager.isTopFocusNode(ref.current)) {
+        scopeTab(ref.current, event, active, focusTrapSelectorsRef.current);
         if (enableOnFirstMount) {
           setTimeout(function () {
-            focusManager.teardownScopedFocus();
+            if (ref.current) {
+              focusManager.teardownScopedFocus(ref.current);
+            }
           });
         }
       }