@salutejs/plasma-new-hope 0.326.0-canary.2012.15531128062.0 → 0.326.0-canary.2013.15537674452.0

package/styled-components/cjs/components/Carousel/CarouselNew/ui/Dots/Dots.js

@@ -0,0 +1,229 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dots = void 0;
+var _react = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("react"));
+var _classnames = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("classnames"));
+var _hooks = /*#__PURE__*/require("../../../../../hooks");
+var _Carousel = /*#__PURE__*/require("../../Carousel.tokens");
+var _index = /*#__PURE__*/require("./utils/index");
+var _Dots = /*#__PURE__*/require("./Dots.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var SIZE = 16; // размер точки в px
+var ANIMATION_DURATION = 0.3; // скорость анимации в секундах
+
+var Dots = exports.Dots = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var _ref$index = _ref.index,
+    originalIndex = _ref$index === void 0 ? 0 : _ref$index,
+    onChange = _ref.onChange,
+    _ref$centered = _ref.centered,
+    centered = _ref$centered === void 0 ? false : _ref$centered,
+    _ref$count = _ref.count,
+    count = _ref$count === void 0 ? 0 : _ref$count,
+    _ref$visibleCount = _ref.visibleCount,
+    originalVisibleCount = _ref$visibleCount === void 0 ? 0 : _ref$visibleCount;
+  // Трансформируем входные параметры для корректной работы в дальнейшем
+  var _getInitialData = (0, _index.getInitialData)(originalIndex, count, originalVisibleCount),
+    _getInitialData2 = _slicedToArray(_getInitialData, 2),
+    index = _getInitialData2[0],
+    visibleCount = _getInitialData2[1];
+
+  // Рефки на DOM-ноды
+  var transitionWrapperRef = (0, _react.useRef)(null);
+  var dotWrapperRef = (0, _react.useRef)(null);
+  var leftAnimationWrapperRef = (0, _react.useRef)(null);
+  var rightAnimationWrapperRef = (0, _react.useRef)(null);
+
+  // Консистентные переменные
+  var isAnimating = (0, _react.useRef)(false);
+  var prevIndex = (0, _react.useRef)(-Infinity);
+  var prevActiveIndex = (0, _react.useRef)(Infinity);
+  var isRightDirection = index > prevIndex.current;
+  var diffDotsRange = Math.abs(index - prevIndex.current);
+  var activeIndex = (0, _index.getActiveIndex)(index, isRightDirection, count, visibleCount);
+  var hiddenDotsLeft = activeIndex < index;
+  var hiddenDotsRight = index + (visibleCount - 1 - activeIndex) < count - 1;
+  var handleClick = function handleClick(i) {
+    if (isAnimating.current) return;
+    if (onChange) {
+      onChange(index + (i - activeIndex));
+    }
+  };
+  var handleTransitionEnd = function handleTransitionEnd() {
+    if (!dotWrapperRef || !dotWrapperRef.current || !transitionWrapperRef || !transitionWrapperRef.current || !rightAnimationWrapperRef || !rightAnimationWrapperRef.current || !leftAnimationWrapperRef || !leftAnimationWrapperRef.current) {
+      return;
+    }
+    dotWrapperRef.current.classList.remove(_Carousel.classes.animating);
+    transitionWrapperRef.current.classList.remove(_Carousel.classes.animating);
+    Array.from(dotWrapperRef.current.children).forEach(function (child) {
+      var _child$classList;
+      (_child$classList = child.classList).remove.apply(_child$classList, [_Carousel.classes.active, _Carousel.classes.animateOut, _Carousel.classes.temporaryNatural, _Carousel.classes.shrinking]);
+    });
+    dotWrapperRef.current.children[activeIndex].classList.add(_Carousel.classes.active);
+    if (centered) {
+      transitionWrapperRef.current.style.transform = "translateX(".concat(visibleCount * SIZE / 2 - SIZE / 2 - activeIndex * SIZE, "px)");
+    } else {
+      transitionWrapperRef.current.style.transform = 'translateX(0)';
+    }
+    setTimeout(function () {
+      if (transitionWrapperRef && transitionWrapperRef.current) {
+        isAnimating.current = false;
+      }
+    });
+
+    // Очищаем блоки с анимированными точками
+    leftAnimationWrapperRef.current.innerText = '';
+    rightAnimationWrapperRef.current.innerText = '';
+    prevIndex.current = index;
+    prevActiveIndex.current = activeIndex;
+    isAnimating.current = false;
+  };
+  (0, _react.useLayoutEffect)(function () {
+    if (!dotWrapperRef || !dotWrapperRef.current || !transitionWrapperRef || !transitionWrapperRef.current) {
+      return;
+    }
+
+    // Вычисляем начальный сдвиг по горизонтали, чтобы точка стала по центру
+    if (centered) {
+      transitionWrapperRef.current.style.transform = "translateX(".concat(visibleCount * SIZE / 2 - SIZE / 2 - activeIndex * SIZE, "px)");
+    }
+    prevIndex.current = index;
+    prevActiveIndex.current = activeIndex;
+  }, []);
+  (0, _hooks.useDidMountLayoutEffect)(function () {
+    var _dotWrapperRef$curren;
+    if (!dotWrapperRef || !dotWrapperRef.current || !transitionWrapperRef || !transitionWrapperRef.current || !leftAnimationWrapperRef || !leftAnimationWrapperRef.current || !rightAnimationWrapperRef || !rightAnimationWrapperRef.current || isAnimating.current) {
+      return;
+    }
+    isAnimating.current = true;
+    dotWrapperRef.current.classList.add(_Carousel.classes.animating);
+    transitionWrapperRef.current.classList.add(_Carousel.classes.animating);
+    var targetIndex = (0, _index.getTargetIndex)(index, prevIndex.current, prevActiveIndex.current, diffDotsRange);
+    var dotsToAdd = Math.abs(targetIndex - activeIndex);
+    if (centered) {
+      transitionWrapperRef.current.style.transform = "translateX(".concat(visibleCount * SIZE / 2 - SIZE / 2 - targetIndex * SIZE, "px)");
+    } else if (dotsToAdd > 0) {
+      transitionWrapperRef.current.style.transform = "translateX(".concat(-SIZE * (targetIndex - activeIndex), "px)");
+    }
+
+    // Стираем все активные классы и устанавливаем активный класс на таргет.
+    // В конце анимации произойдет переопределение активного класса.
+    Array.from(dotWrapperRef.current.children).forEach(function (child) {
+      child.classList.remove(_Carousel.classes.active);
+    });
+    (_dotWrapperRef$curren = dotWrapperRef.current.children[targetIndex]) === null || _dotWrapperRef$curren === void 0 || _dotWrapperRef$curren.classList.add(_Carousel.classes.active);
+    if (index > prevIndex.current) {
+      // Двигаемся вправо
+
+      // Если мы добавляем 1 и более точек, то нужно начать
+      // приводить размер крайней правой точки (что будет в m размере?)
+      // к натуральному размеру
+      if (dotsToAdd >= 1) {
+        var _dotWrapperRef$curren2;
+        (_dotWrapperRef$curren2 = dotWrapperRef.current.children[visibleCount - 1]) === null || _dotWrapperRef$curren2 === void 0 || _dotWrapperRef$curren2.classList.add(_Carousel.classes.temporaryNatural);
+      }
+
+      // Т.к. мы двигаемся вправо, то нужно начать уменьшать размер крайней левой точки
+      // (опять же, что в m size?)
+      if (dotsToAdd >= 1) {
+        var _dotWrapperRef$curren3;
+        (_dotWrapperRef$curren3 = dotWrapperRef.current.children[dotsToAdd]) === null || _dotWrapperRef$curren3 === void 0 || _dotWrapperRef$curren3.classList.add(_Carousel.classes.shrinking);
+      }
+      if (dotsToAdd > 0) {
+        var _loop = function _loop() {
+          var _dotWrapperRef$curren4;
+          var node = document.createElement('div');
+          node.textContent = '';
+          node.classList.add(_Carousel.classes.dot);
+          node.style.opacity = '0';
+          var delay = i * (ANIMATION_DURATION / dotsToAdd);
+          node.style.animationDelay = "".concat(delay, "s");
+          rightAnimationWrapperRef.current.appendChild(node);
+          var duration = ANIMATION_DURATION / dotsToAdd;
+          requestAnimationFrame(function () {
+            node.classList.add(_Carousel.classes.animateIn);
+            node.style.animationDuration = "".concat(duration, "s");
+          });
+          var currentDomNode = (_dotWrapperRef$curren4 = dotWrapperRef.current.children) === null || _dotWrapperRef$curren4 === void 0 ? void 0 : _dotWrapperRef$curren4[i];
+          currentDomNode === null || currentDomNode === void 0 || currentDomNode.classList.add(_Carousel.classes.animateOut);
+          currentDomNode.style.animationDelay = "".concat(delay, "s");
+          currentDomNode.style.animationDuration = "".concat(duration, "s");
+        };
+        for (var i = 0; i < dotsToAdd; i++) {
+          _loop();
+        }
+      }
+    } else {
+      // Двигаемся влево
+
+      // Если мы добавляем 1 и более точек, то нужно начать
+      // приводить размер крайней левой точки (что будет в m размере?)
+      // к натуральному размеру.
+      if (dotsToAdd >= 1) {
+        var _dotWrapperRef$curren5;
+        (_dotWrapperRef$curren5 = dotWrapperRef.current.children[0]) === null || _dotWrapperRef$curren5 === void 0 || _dotWrapperRef$curren5.classList.add(_Carousel.classes.temporaryNatural);
+      }
+
+      // Т.к. мы двигаемся влево, то нужно начать уменьшать размер крайней правой точки
+      // (опять же, что в m size?)
+      if (dotsToAdd >= 1) {
+        var _dotWrapperRef$curren6;
+        (_dotWrapperRef$curren6 = dotWrapperRef.current.children[visibleCount - 1 - dotsToAdd]) === null || _dotWrapperRef$curren6 === void 0 || _dotWrapperRef$curren6.classList.add(_Carousel.classes.shrinking);
+      }
+      if (dotsToAdd > 0) {
+        var _loop2 = function _loop2() {
+          var _dotWrapperRef$curren7;
+          var node = document.createElement('div');
+          node.textContent = '';
+          node.classList.add(_Carousel.classes.dot);
+          node.style.opacity = '0';
+          var delay = (dotsToAdd - 1 - _i) * (ANIMATION_DURATION / dotsToAdd);
+          node.style.animationDelay = "".concat(delay, "s");
+          leftAnimationWrapperRef.current.prepend(node);
+          var duration = ANIMATION_DURATION / dotsToAdd;
+          requestAnimationFrame(function () {
+            node.classList.add(_Carousel.classes.animateIn);
+            node.style.animationDuration = "".concat(duration, "s");
+          });
+          var currentDomNode = (_dotWrapperRef$curren7 = dotWrapperRef.current.children) === null || _dotWrapperRef$curren7 === void 0 ? void 0 : _dotWrapperRef$curren7[dotWrapperRef.current.children.length - 1 - _i];
+          currentDomNode === null || currentDomNode === void 0 || currentDomNode.classList.add(_Carousel.classes.animateOut);
+          currentDomNode.style.animationDelay = "".concat(_i * (ANIMATION_DURATION / dotsToAdd), "s");
+          currentDomNode.style.animationDuration = "".concat(duration, "s");
+        };
+        for (var _i = dotsToAdd - 1; _i >= 0; _i--) {
+          _loop2();
+        }
+      }
+    }
+  }, [index]);
+  return /*#__PURE__*/_react["default"].createElement(_Dots.Wrapper, null, /*#__PURE__*/_react["default"].createElement(_Dots.TransitionWrapper, {
+    ref: transitionWrapperRef,
+    onTransitionEnd: handleTransitionEnd
+  }, /*#__PURE__*/_react["default"].createElement(_Dots.LeftAnimationWrapper, {
+    ref: leftAnimationWrapperRef
+  }), /*#__PURE__*/_react["default"].createElement(_Dots.DotWrapper, {
+    ref: dotWrapperRef,
+    className: (0, _classnames["default"])(hiddenDotsLeft && _Carousel.classes.availableDotsLeft, hiddenDotsRight && _Carousel.classes.availableDotsRight)
+  }, Array(visibleCount).fill(0).map(function (_, i) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: i,
+      className: (0, _classnames["default"])(_Carousel.classes.dot, i === activeIndex && _Carousel.classes.active),
+      onClick: function onClick() {
+        return handleClick(i);
+      }
+    });
+  })), /*#__PURE__*/_react["default"].createElement(_Dots.RightAnimationWrapper, {
+    ref: rightAnimationWrapperRef
+  })));
+});

package/styled-components/cjs/components/Carousel/CarouselNew/ui/Dots/Dots.styles.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.TransitionWrapper = exports.RightAnimationWrapper = exports.LeftAnimationWrapper = exports.DotWrapper = void 0;
+var _styledComponents = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("styled-components"));
+var _Carousel = /*#__PURE__*/require("../../Carousel.tokens");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-feybgn-0"
+})(["display:flex;align-items:center;justify-content:center;margin-top:0.75rem;--duration:0.3s;--half-duration:0.15s;"]);
+var TransitionWrapper = exports.TransitionWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-feybgn-1"
+})(["position:relative;display:flex;transition:transform 0s ease;&.", "{transition:transform var(--duration) ease;}& .", "{width:0.5rem;height:0.5rem;margin:0 0.25rem;cursor:pointer;background-color:var(", ");border-radius:100%;&.", "{background-color:var(", ");}@keyframes fadeOut{from{transform:scale(0.75);opacity:1;}to{transform:scale(0);opacity:0;}}&.", "{animation:fadeOut var(--half-duration) ease forwards;}@keyframes shrinking{from{transform:scale(1);}to{transform:scale(0.75);}}&.", "{animation:shrinking var(--half-duration) var(--half-duration) ease forwards;}}"], _Carousel.classes.animating, _Carousel.classes.dot, _Carousel.tokens.paginationDotBackground, _Carousel.classes.active, _Carousel.tokens.paginationDotActiveBackground, _Carousel.classes.animateOut, _Carousel.classes.shrinking);
+var DotWrapper = exports.DotWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-feybgn-2"
+})(["display:flex;&.", "{.", ":not(.", "):first-child{transform:scale(0.75);}}&.", "{.", ":not(.", "):last-child{transform:scale(0.75);}}&.", " .", "{transition:background-color var(--duration) ease;}"], _Carousel.classes.availableDotsLeft, _Carousel.classes.dot, _Carousel.classes.temporaryNatural, _Carousel.classes.availableDotsRight, _Carousel.classes.dot, _Carousel.classes.temporaryNatural, _Carousel.classes.animating, _Carousel.classes.dot);
+var LeftAnimationWrapper = exports.LeftAnimationWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-feybgn-3"
+})(["position:absolute;top:0;right:100%;bottom:0;display:flex;& .", "{transition:transform var(--duration) ease;@keyframes fadeIn{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}&.", "{animation:fadeIn var(--half-duration) ease forwards;}&:first-child{@keyframes fadeInFirst{from{transform:scale(0);opacity:0;}to{transform:scale(0.75);opacity:1;}}&.", "{animation:fadeInFirst var(--half-duration) ease forwards;}}}"], _Carousel.classes.dot, _Carousel.classes.animateIn, _Carousel.classes.animateIn);
+var RightAnimationWrapper = exports.RightAnimationWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-feybgn-4"
+})(["position:absolute;top:0;left:100%;bottom:0;display:flex;& .", "{transition:transform var(--duration) ease;@keyframes fadeIn{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}&.", "{animation:fadeIn var(--half-duration) ease forwards;}&:last-child{@keyframes fadeInLast{from{transform:scale(0);opacity:0;}to{transform:scale(0.75);opacity:1;}}&.", "{animation:fadeInLast var(--half-duration) ease forwards;}}}"], _Carousel.classes.dot, _Carousel.classes.animateIn, _Carousel.classes.animateIn);

package/styled-components/cjs/components/Carousel/CarouselNew/ui/Dots/utils/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTargetIndex = exports.getInitialData = exports.getActiveIndex = void 0;
+var getInitialData = exports.getInitialData = function getInitialData(index, count, visibleCount) {
+  var newIndex = index;
+  var newVisibleCount = visibleCount;
+
+  // Ограничения на макс. и мин. значения индекса
+  if (index < 0) {
+    newIndex = 0;
+  } else if (index >= count) {
+    newIndex = count - 1;
+  }
+
+  // Ограничение на количество точек
+  if (visibleCount > count) {
+    newVisibleCount = count;
+  }
+  return [newIndex, newVisibleCount];
+};
+var getActiveIndex = exports.getActiveIndex = function getActiveIndex(index, isRightDirection, count, visibleCount) {
+  if (index < Math.trunc(visibleCount / 2)) {
+    return index;
+  }
+  if (count - 1 - index < Math.trunc(visibleCount / 2)) {
+    return visibleCount - 1 - (count - 1 - index);
+  }
+  if (visibleCount % 2) {
+    return Math.trunc(visibleCount / 2);
+  }
+  if (isRightDirection) {
+    return visibleCount / 2;
+  }
+  return visibleCount / 2 - 1;
+};
+var getTargetIndex = exports.getTargetIndex = function getTargetIndex(index, prevIndex, prevActiveIndex, diffDotsRange) {
+  var targetIndex = 0;
+  if (index > prevIndex) {
+    targetIndex = prevActiveIndex + diffDotsRange;
+  } else {
+    targetIndex = prevActiveIndex - diffDotsRange;
+  }
+  return targetIndex;
+};

package/styled-components/cjs/components/Carousel/CarouselNew/ui/Item/Item.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CarouselItem = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("react"));
+var _styledComponents = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("styled-components"));
+var _excluded = ["scrollSnapAlign", "scrollSnapStop", "children"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var StyledItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-1j1qvbq-0"
+})(["scroll-snap-align:", ";scroll-snap-stop:", ";"], function (_ref) {
+  var scrollSnapAlign = _ref.scrollSnapAlign;
+  return scrollSnapAlign || 'none';
+}, function (_ref2) {
+  var scrollSnapAlign = _ref2.scrollSnapAlign,
+    scrollSnapStop = _ref2.scrollSnapStop;
+  return scrollSnapAlign ? scrollSnapStop : 'normal';
+});
+var CarouselItem = exports.CarouselItem = function CarouselItem(_ref3) {
+  var _ref3$scrollSnapAlign = _ref3.scrollSnapAlign,
+    scrollSnapAlign = _ref3$scrollSnapAlign === void 0 ? 'center' : _ref3$scrollSnapAlign,
+    _ref3$scrollSnapStop = _ref3.scrollSnapStop,
+    scrollSnapStop = _ref3$scrollSnapStop === void 0 ? 'always' : _ref3$scrollSnapStop,
+    children = _ref3.children,
+    rest = _objectWithoutProperties(_ref3, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(StyledItem, _extends({
+    scrollSnapAlign: scrollSnapAlign,
+    scrollSnapStop: scrollSnapStop,
+    role: "group",
+    "aria-roledescription": "slide"
+  }, rest), children);
+};

package/styled-components/cjs/components/Carousel/CarouselNew/ui/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Item = /*#__PURE__*/require("./Item/Item");
+Object.keys(_Item).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Item[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Item[key];
+    }
+  });
+});
+var _Dots = /*#__PURE__*/require("./Dots/Dots");
+Object.keys(_Dots).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Dots[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Dots[key];
+    }
+  });
+});

package/styled-components/cjs/components/Carousel/CarouselNew/variations/_size/base.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);

package/styled-components/cjs/components/Carousel/CarouselNew/variations/_size/tokens.json

@@ -0,0 +1 @@
+[]

package/styled-components/cjs/components/Carousel/CarouselNew/variations/_view/base.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);

package/styled-components/cjs/components/Carousel/CarouselNew/variations/_view/tokens.json

@@ -0,0 +1 @@
+[]

package/styled-components/cjs/components/Carousel/{Carousel.styles.js → CarouselOld/Carousel.styles.js}

@@ -16,16 +16,16 @@ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);
  * Стилизованный компонент, обладающий всеми свойствами ``div``.
  */
 var CarouselGridWrapper = exports.CarouselGridWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-9g0yg0-0"
+  componentId: "plasma-new-hope__sc-15fotdl-0"
 })(["overflow:hidden;margin-left:calc(var(--plasma-grid-margin) * -1);margin-right:calc(var(--plasma-grid-margin) * -1);"]);
 var CarouselWrapper = exports.CarouselWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-9g0yg0-1"
+  componentId: "plasma-new-hope__sc-15fotdl-1"
 })(["position:relative;margin:0;padding:0;list-style:none;-ms-overflow-style:none;scrollbar-width:none;::-webkit-scrollbar{display:none;}overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:", ";", " &{scroll-padding:0 var(--plasma-grid-margin);padding-left:var(--plasma-grid-margin);}user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);"], function (_ref) {
   var scrollSnapType = _ref.scrollSnapType;
   return "x ".concat(scrollSnapType);
 }, CarouselGridWrapper);
 var CarouselTrack = exports.CarouselTrack = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-9g0yg0-2"
+  componentId: "plasma-new-hope__sc-15fotdl-2"
 })(["display:inline-flex;flex-direction:row;padding-left:", ";padding-right:", ";", " &{padding-right:", ";}"], function (_ref2) {
   var paddingStart = _ref2.paddingStart;
   return paddingStart || 0;

package/styled-components/cjs/components/Carousel/CarouselOld/Carousel.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/styled-components/cjs/components/Carousel/{CarouselItem.js → CarouselOld/CarouselItem.js}

@@ -12,7 +12,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 var StyledItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-1h5d6du-0"
+  componentId: "plasma-new-hope__sc-1b1k2uh-0"
 })(["scroll-snap-align:", ";scroll-snap-stop:", ";"], function (_ref) {
   var scrollSnapAlign = _ref.scrollSnapAlign;
   return scrollSnapAlign || 'none';

package/styled-components/cjs/components/Carousel/CarouselOld/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CarouselGridWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _Carousel2.CarouselGridWrapper;
+  }
+});
+Object.defineProperty(exports, "CarouselItem", {
+  enumerable: true,
+  get: function get() {
+    return _CarouselItem.CarouselItem;
+  }
+});
+Object.defineProperty(exports, "carouselConfig", {
+  enumerable: true,
+  get: function get() {
+    return _Carousel.carouselConfig;
+  }
+});
+Object.defineProperty(exports, "carouselRoot", {
+  enumerable: true,
+  get: function get() {
+    return _Carousel.carouselRoot;
+  }
+});
+var _Carousel = /*#__PURE__*/require("./Carousel");
+var _Carousel2 = /*#__PURE__*/require("./Carousel.styles");
+var _CarouselItem = /*#__PURE__*/require("./CarouselItem");

package/styled-components/cjs/components/Carousel/CarouselOld/useDragScroll.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDragScroll = void 0;
+var _react = /*#__PURE__*/require("react");
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var SCROLL_SPEED = 2;
+var useDragScroll = exports.useDragScroll = function useDragScroll(scrollRef, isDragScrollDisabled) {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setDragging = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    startX = _useState4[0],
+    setStartX = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    scrollLeft = _useState6[0],
+    setScrollLeft = _useState6[1];
+  var handleMouseMove = (0, _react.useCallback)(function (e) {
+    if (isDragging && scrollRef && scrollRef.current) {
+      var dx = (e.clientX - startX) * SCROLL_SPEED;
+      scrollRef.current.scrollLeft = scrollLeft - dx;
+    }
+  }, [scrollRef, scrollLeft, isDragging, startX]);
+  var handleMouseUp = (0, _react.useCallback)(function () {
+    setDragging(false);
+    if (scrollRef && scrollRef.current) {
+      scrollRef.current.style.cursor = 'grab';
+    }
+  }, [scrollRef, setDragging]);
+  var handleMouseDown = (0, _react.useCallback)(function (e) {
+    setDragging(true);
+    if (scrollRef && scrollRef.current) {
+      setStartX(e.clientX);
+      setScrollLeft(scrollRef.current.scrollLeft);
+      scrollRef.current.style.cursor = 'grabbing';
+    }
+  }, [scrollRef, setDragging, setStartX, setScrollLeft, handleMouseUp, handleMouseMove]);
+  (0, _react.useEffect)(function () {
+    if (scrollRef && scrollRef.current && !isDragScrollDisabled) {
+      scrollRef.current.style.userSelect = 'none';
+      scrollRef.current.addEventListener('mousedown', handleMouseDown);
+      scrollRef.current.addEventListener('mouseup', handleMouseUp);
+      scrollRef.current.addEventListener('mouseleave', handleMouseUp);
+      scrollRef.current.addEventListener('mousemove', handleMouseMove);
+    }
+    return function () {
+      if (scrollRef && scrollRef.current && !isDragScrollDisabled) {
+        scrollRef.current.removeEventListener('mousedown', handleMouseDown);
+        scrollRef.current.removeEventListener('mouseup', handleMouseUp);
+        scrollRef.current.removeEventListener('mouseleave', handleMouseUp);
+        scrollRef.current.removeEventListener('mousemove', handleMouseMove);
+      }
+    };
+  }, [scrollRef, handleMouseDown, handleMouseUp, handleMouseMove, isDragScrollDisabled]);
+};

package/styled-components/cjs/components/Carousel/index.js

@@ -21,12 +21,32 @@ Object.defineProperty(exports, "carouselConfig", {
     return _Carousel.carouselConfig;
   }
 });
+Object.defineProperty(exports, "carouselNewConfig", {
+  enumerable: true,
+  get: function get() {
+    return _Carousel3.carouselNewConfig;
+  }
+});
+Object.defineProperty(exports, "carouselNewRoot", {
+  enumerable: true,
+  get: function get() {
+    return _Carousel3.carouselNewRoot;
+  }
+});
 Object.defineProperty(exports, "carouselRoot", {
   enumerable: true,
   get: function get() {
     return _Carousel.carouselRoot;
   }
 });
-var _Carousel = /*#__PURE__*/require("./Carousel");
-var _Carousel2 = /*#__PURE__*/require("./Carousel.styles");
-var _CarouselItem = /*#__PURE__*/require("./CarouselItem");
+Object.defineProperty(exports, "carouselTokens", {
+  enumerable: true,
+  get: function get() {
+    return _Carousel4.tokens;
+  }
+});
+var _Carousel = /*#__PURE__*/require("./CarouselOld/Carousel");
+var _Carousel2 = /*#__PURE__*/require("./CarouselOld/Carousel.styles");
+var _CarouselItem = /*#__PURE__*/require("./CarouselOld/CarouselItem");
+var _Carousel3 = /*#__PURE__*/require("./CarouselNew/Carousel");
+var _Carousel4 = /*#__PURE__*/require("./CarouselNew/Carousel.tokens");

package/styled-components/cjs/components/Sheet/hooks/useOverflow.js

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useOverflow = void 0;
 var _react = /*#__PURE__*/require("react");
+var _utils = /*#__PURE__*/require("../../../utils");
 var useOverflow = exports.useOverflow = function useOverflow(_ref) {
   var opened = _ref.opened;
-  var overflow = (0, _react.useRef)(document.body.style.overflowY);
+  var overflow = (0, _react.useRef)(_utils.canUseDOM ? document.body.style.overflowY : 'initial');
 
   // linaria не поддерживает динамический global
   (0, _react.useEffect)(function () {

package/styled-components/cjs/examples/plasma_b2c/components/Carousel/Carousel.config.js

@@ -4,7 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Carousel = /*#__PURE__*/require("../../../../components/Carousel");
 var config = exports.config = {
-  defaults: {},
-  variations: {}
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-tertiary);", ":var(--surface-solid-default);"], _Carousel.carouselTokens.paginationDotBackground, _Carousel.carouselTokens.paginationDotActiveBackground)
+    },
+    size: {
+      s: /*#__PURE__*/(0, _styledComponents.css)([""])
+    }
+  }
 };

package/styled-components/cjs/examples/plasma_b2c/components/Carousel/Carousel.js

@@ -14,5 +14,5 @@ exports.mergedConfig = void 0;
 var _Carousel = /*#__PURE__*/require("../../../../components/Carousel");
 var _engines = /*#__PURE__*/require("../../../../engines");
 var _Carousel2 = /*#__PURE__*/require("./Carousel.config");
-var mergedConfig = exports.mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Carousel.carouselConfig, _Carousel2.config);
+var mergedConfig = exports.mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Carousel.carouselNewConfig, _Carousel2.config);
 var Carousel = exports.Carousel = /*#__PURE__*/(0, _engines.component)(mergedConfig);