@salutejs/plasma-new-hope 0.322.0-canary.1944.14662885061.0 → 0.322.0-canary.1947.14664713311.0

package/emotion/cjs/components/PaginationDots/hooks/useAnimation.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimation = void 0;
+var _react = /*#__PURE__*/require("react");
+var _PaginationDots = /*#__PURE__*/require("../PaginationDots");
+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 useAnimation = exports.useAnimation = function useAnimation(_ref) {
+  var isVertical = _ref.isVertical,
+    onAnimationEnd = _ref.onAnimationEnd,
+    activeElementRef = _ref.activeElementRef,
+    animatedDotsWrapperRef = _ref.animatedDotsWrapperRef,
+    canScrollForward = _ref.canScrollForward,
+    canScrollBackward = _ref.canScrollBackward,
+    dots = _ref.dots,
+    prevDots = _ref.prevDots,
+    innerViewIndex = _ref.innerViewIndex;
+  var isAnimationRunningRef = (0, _react.useRef)(false);
+  var _useState = (0, _react.useState)(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    skipAnimation = _useState2[0],
+    setSkipAnimation = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hasForwardAnimation = _useState4[0],
+    setHasForwardAnimation = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hasBackwardAnimation = _useState6[0],
+    setHasBackwardAnimation = _useState6[1];
+  var hasAnimation = hasForwardAnimation || hasBackwardAnimation;
+  var handleAnimationEnd = function handleAnimationEnd() {
+    if (isAnimationRunningRef.current) {
+      isAnimationRunningRef.current = false;
+      onAnimationEnd();
+    }
+    setHasForwardAnimation(false);
+    setHasBackwardAnimation(false);
+  };
+  (0, _react.useLayoutEffect)(function () {
+    var _activeElementRef$cur, _activeElementRef$cur2;
+    var animatedEl = animatedDotsWrapperRef.current;
+    if (!animatedEl || !hasForwardAnimation && !hasBackwardAnimation) {
+      return;
+    }
+    var before = (0, _PaginationDots.getVisualOffsets)(prevDots, innerViewIndex);
+    var after = (0, _PaginationDots.getVisualOffsets)(dots, innerViewIndex);
+    var diff = before - after;
+    var _ref2 = activeElementRef.current,
+      activeWidth = _ref2.offsetWidth,
+      activeHeight = _ref2.offsetHeight;
+    var _ref3 = (hasBackwardAnimation ? (_activeElementRef$cur = activeElementRef.current) === null || _activeElementRef$cur === void 0 ? void 0 : _activeElementRef$cur.previousSibling : (_activeElementRef$cur2 = activeElementRef.current) === null || _activeElementRef$cur2 === void 0 ? void 0 : _activeElementRef$cur2.nextSibling) || {},
+      width = _ref3.offsetWidth,
+      height = _ref3.offsetHeight;
+    animatedEl.style.transition = 'none';
+    if (hasForwardAnimation) {
+      if (canScrollForward) {
+        animatedEl.style.transform = isVertical ? "translateY(".concat(height, "px)") : "translateX(".concat(width, "px)");
+      } else {
+        animatedEl.style.transform = isVertical ? "translateY(".concat(height - activeHeight, "px)") : "translateX(".concat(width - activeWidth, "px)");
+      }
+      requestAnimationFrame(function () {
+        animatedEl.style.transition = 'transform 0.3s linear';
+        if (canScrollForward) {
+          animatedEl.style.transform = isVertical ? "translateY(".concat(-diff, "px)") : "translateX(".concat(-diff, "px)");
+        } else {
+          animatedEl.style.transform = isVertical ? "translateY(-".concat(activeHeight, "px)") : "translateX(-".concat(activeWidth, "px)");
+        }
+        isAnimationRunningRef.current = true;
+      });
+    }
+    if (hasBackwardAnimation) {
+      if (canScrollBackward) {
+        animatedEl.style.transform = isVertical ? "translateY(".concat(-height, "px)") : "translateX(".concat(-width, "px)");
+      } else {
+        animatedEl.style.transform = isVertical ? "translateY(".concat(-height + activeHeight, "px)") : "translateX(".concat(-width + activeWidth, "px)");
+      }
+      requestAnimationFrame(function () {
+        if (animatedEl) {
+          animatedEl.style.transition = 'transform 0.3s linear';
+          if (canScrollBackward) {
+            animatedEl.style.transform = isVertical ? "translateY(".concat(-diff, "px)") : "translateX(".concat(-diff, "px)");
+          } else {
+            animatedEl.style.transform = isVertical ? "translateY(".concat(activeHeight, "px)") : "translateX(".concat(activeWidth, "px)");
+          }
+          isAnimationRunningRef.current = true;
+        }
+      });
+    }
+  }, [isVertical, innerViewIndex, hasForwardAnimation, hasBackwardAnimation]);
+  return {
+    skipAnimation: skipAnimation,
+    hasAnimation: hasAnimation,
+    hasBackwardAnimation: hasBackwardAnimation,
+    hasForwardAnimation: hasForwardAnimation,
+    setSkipAnimation: setSkipAnimation,
+    setHasForwardAnimation: setHasForwardAnimation,
+    setHasBackwardAnimation: setHasBackwardAnimation,
+    handleAnimationEnd: handleAnimationEnd
+  };
+};

package/emotion/cjs/components/PaginationDots/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "paginationDotsClasses", {
+  enumerable: true,
+  get: function get() {
+    return _PaginationDots2.classes;
+  }
+});
+Object.defineProperty(exports, "paginationDotsConfig", {
+  enumerable: true,
+  get: function get() {
+    return _PaginationDots.paginationDotsConfig;
+  }
+});
+Object.defineProperty(exports, "paginationDotsRoot", {
+  enumerable: true,
+  get: function get() {
+    return _PaginationDots.paginationDotsRoot;
+  }
+});
+Object.defineProperty(exports, "paginationDotsTokens", {
+  enumerable: true,
+  get: function get() {
+    return _PaginationDots2.tokens;
+  }
+});
+var _PaginationDots = /*#__PURE__*/require("./PaginationDots");
+var _PaginationDots2 = /*#__PURE__*/require("./PaginationDots.tokens");

package/emotion/cjs/components/PaginationDots/utils/getDotSize.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDotSize = void 0;
+var getDotSize = exports.getDotSize = function getDotSize(size, index, offset, count, visibleCount) {
+  var innerViewValue = index - offset;
+  var toEnd = count - (visibleCount + offset);
+  var canScrollBackward = Boolean(offset);
+  var canScrollForward = Boolean(toEnd);
+  var isFirst = innerViewValue === 0;
+  var isSecond = innerViewValue === 1;
+  var isSecondLast = innerViewValue === visibleCount - 2;
+  var isLast = innerViewValue === visibleCount - 1;
+  if (size === 's') {
+    if (isFirst && canScrollBackward || isLast && canScrollForward) {
+      return 'xs';
+    }
+    return 's';
+  }
+  if (canScrollBackward) {
+    // (m) m m s xs
+    // m (m) m s xs
+    // m m (m) s xs
+    // s m (m) s xs
+    // xs s m (m) s
+    // xs s m (m) s
+    // xs s m m (m)
+    if (isFirst) {
+      return offset === 1 ? 's' : 'xs';
+    }
+    if (isSecond && offset > 1) {
+      return 's';
+    }
+  }
+  if (canScrollForward) {
+    if (isLast) {
+      return toEnd === 1 ? 's' : 'xs';
+    }
+    if (isSecondLast && toEnd > 1) {
+      return 's';
+    }
+  }
+  return 'm';
+};

package/emotion/cjs/components/PaginationDots/variations/_size/base.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _react = /*#__PURE__*/require("@emotion/react");
+var base = exports.base = /*#__PURE__*/(0, _react.css)(";label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvUGFnaW5hdGlvbkRvdHMvdmFyaWF0aW9ucy9fc2l6ZS9iYXNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUV1QiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL1BhZ2luYXRpb25Eb3RzL3ZhcmlhdGlvbnMvX3NpemUvYmFzZS50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuZXhwb3J0IGNvbnN0IGJhc2UgPSBjc3NgYDtcbiJdfQ== */"));

package/emotion/cjs/components/PaginationDots/variations/_size/tokens.json

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

package/emotion/cjs/components/PaginationDots/variations/_view/base.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _react = /*#__PURE__*/require("@emotion/react");
+var base = exports.base = /*#__PURE__*/(0, _react.css)(";label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvUGFnaW5hdGlvbkRvdHMvdmFyaWF0aW9ucy9fdmlldy9iYXNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUV1QiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL1BhZ2luYXRpb25Eb3RzL3ZhcmlhdGlvbnMvX3ZpZXcvYmFzZS50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuZXhwb3J0IGNvbnN0IGJhc2UgPSBjc3NgYDtcbiJdfQ== */"));

package/emotion/cjs/components/PaginationDots/variations/_view/tokens.json

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

package/emotion/cjs/examples/plasma_b2c/components/PaginationDots/PaginationDots.config.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _react = /*#__PURE__*/require("@emotion/react");
+var _PaginationDots = /*#__PURE__*/require("../../../../components/PaginationDots");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _react.css)(_PaginationDots.paginationDotsTokens.itemBackground, ":#0808081f;", _PaginationDots.paginationDotsTokens.activeItemBackground, ":#080808;;label:plasma-new-hope__default;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV9iMmMvY29tcG9uZW50cy9QYWdpbmF0aW9uRG90cy9QYWdpbmF0aW9uRG90cy5jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBV3dCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV9iMmMvY29tcG9uZW50cy9QYWdpbmF0aW9uRG90cy9QYWdpbmF0aW9uRG90cy5jb25maWcudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IHBhZ2luYXRpb25Eb3RzVG9rZW5zIGFzIHRva2VucyB9IGZyb20gJy4uLy4uLy4uLy4uL2NvbXBvbmVudHMvUGFnaW5hdGlvbkRvdHMnO1xuXG5leHBvcnQgY29uc3QgY29uZmlnID0ge1xuICAgIGRlZmF1bHRzOiB7XG4gICAgICAgIHZpZXc6ICdkZWZhdWx0JyxcbiAgICAgICAgc2l6ZTogJ20nLFxuICAgIH0sXG4gICAgdmFyaWF0aW9uczoge1xuICAgICAgICB2aWV3OiB7XG4gICAgICAgICAgICBkZWZhdWx0OiBjc3NgXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMuaXRlbUJhY2tncm91bmR9OiAjMDgwODA4MWY7XG4gICAgICAgICAgICAgICAgJHt0b2tlbnMuYWN0aXZlSXRlbUJhY2tncm91bmR9OiAjMDgwODA4O1xuICAgICAgICAgICAgYCxcbiAgICAgICAgfSxcbiAgICAgICAgc2l6ZToge1xuICAgICAgICAgICAgczogY3NzYFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLmRvdFBhZGRpbmd9OiAwIDAuMzc1cmVtO1xuICAgICAgICAgICAgICAgICR7dG9rZW5zLnZlcnRpY2FsRG90UGFkZGluZ306IDAuMzc1cmVtIDA7XG5cbiAgICAgICAgICAgICAgICAke3Rva2Vucy5kb3RTaXplTX06IDAuNzVyZW07XG4gICAgICAgICAgICAgICAgJHt0b2tlbnMuZG90U2l6ZVN9OiAwLjVyZW07XG4gICAgICAgICAgICAgICAgJHt0b2tlbnMuZG90U2l6ZVhTfTogMC4zNzVyZW07XG4gICAgICAgICAgICAgICAgJHt0b2tlbnMuZG90Qm9yZGVyUmFkaXVzfTogNTAlO1xuXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMubGluZVdpZHRofTogMnJlbTtcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5saW5lSGVpZ2h0fTogMC41cmVtO1xuICAgICAgICAgICAgICAgICR7dG9rZW5zLmxpbmVCb3JkZXJSYWRpdXN9OiAwLjM3NXJlbTtcblxuICAgICAgICAgICAgICAgICR7dG9rZW5zLnZlcnRpY2FsTGluZVdpZHRofTogMC41cmVtO1xuICAgICAgICAgICAgICAgICR7dG9rZW5zLnZlcnRpY2FsTGluZUhlaWdodH06IDJyZW07XG4gICAgICAgICAgICBgLFxuICAgICAgICAgICAgbTogY3NzYFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLmRvdFBhZGRpbmd9OiAwIDAuMzc1cmVtO1xuICAgICAgICAgICAgICAgICR7dG9rZW5zLnZlcnRpY2FsRG90UGFkZGluZ306IDAuMzc1cmVtIDA7XG5cbiAgICAgICAgICAgICAgICAke3Rva2Vucy5kb3RCb3JkZXJSYWRpdXN9OiA1MCU7XG4gICAgICAgICAgICAgICAgJHt0b2tlbnMuZG90U2l6ZU19OiAwLjc1cmVtO1xuICAgICAgICAgICAgICAgICR7dG9rZW5zLmRvdFNpemVTfTogMC41cmVtO1xuICAgICAgICAgICAgICAgICR7dG9rZW5zLmRvdFNpemVYU306IDAuMzc1cmVtO1xuXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMubGluZVdpZHRofTogM3JlbTtcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5saW5lSGVpZ2h0fTogMC43NXJlbTtcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5saW5lQm9yZGVyUmFkaXVzfTogMC4zNzVyZW07XG5cbiAgICAgICAgICAgICAgICAke3Rva2Vucy52ZXJ0aWNhbExpbmVXaWR0aH06IDAuNzVyZW07XG4gICAgICAgICAgICAgICAgJHt0b2tlbnMudmVydGljYWxMaW5lSGVpZ2h0fTogM3JlbTtcbiAgICAgICAgICAgIGAsXG4gICAgICAgIH0sXG4gICAgfSxcbn07XG4iXX0= */"))
+    },
+    size: {
+      s: /*#__PURE__*/(0, _react.css)(_PaginationDots.paginationDotsTokens.dotPadding, ":0 0.375rem;", _PaginationDots.paginationDotsTokens.verticalDotPadding, ":0.375rem 0;", _PaginationDots.paginationDotsTokens.dotSizeM, ":0.75rem;", _PaginationDots.paginationDotsTokens.dotSizeS, ":0.5rem;", _PaginationDots.paginationDotsTokens.dotSizeXS, ":0.375rem;", _PaginationDots.paginationDotsTokens.dotBorderRadius, ":50%;", _PaginationDots.paginationDotsTokens.lineWidth, ":2rem;", _PaginationDots.paginationDotsTokens.lineHeight, ":0.5rem;", _PaginationDots.paginationDotsTokens.lineBorderRadius, ":0.375rem;", _PaginationDots.paginationDotsTokens.verticalLineWidth, ":0.5rem;", _PaginationDots.paginationDotsTokens.verticalLineHeight, ":2rem;;label:plasma-new-hope__s;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV9iMmMvY29tcG9uZW50cy9QYWdpbmF0aW9uRG90cy9QYWdpbmF0aW9uRG90cy5jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUJrQiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9leGFtcGxlcy9wbGFzbWFfYjJjL2NvbXBvbmVudHMvUGFnaW5hdGlvbkRvdHMvUGFnaW5hdGlvbkRvdHMuY29uZmlnLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBwYWdpbmF0aW9uRG90c1Rva2VucyBhcyB0b2tlbnMgfSBmcm9tICcuLi8uLi8uLi8uLi9jb21wb25lbnRzL1BhZ2luYXRpb25Eb3RzJztcblxuZXhwb3J0IGNvbnN0IGNvbmZpZyA9IHtcbiAgICBkZWZhdWx0czoge1xuICAgICAgICB2aWV3OiAnZGVmYXVsdCcsXG4gICAgICAgIHNpemU6ICdtJyxcbiAgICB9LFxuICAgIHZhcmlhdGlvbnM6IHtcbiAgICAgICAgdmlldzoge1xuICAgICAgICAgICAgZGVmYXVsdDogY3NzYFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLml0ZW1CYWNrZ3JvdW5kfTogIzA4MDgwODFmO1xuICAgICAgICAgICAgICAgICR7dG9rZW5zLmFjdGl2ZUl0ZW1CYWNrZ3JvdW5kfTogIzA4MDgwODtcbiAgICAgICAgICAgIGAsXG4gICAgICAgIH0sXG4gICAgICAgIHNpemU6IHtcbiAgICAgICAgICAgIHM6IGNzc2BcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5kb3RQYWRkaW5nfTogMCAwLjM3NXJlbTtcbiAgICAgICAgICAgICAgICAke3Rva2Vucy52ZXJ0aWNhbERvdFBhZGRpbmd9OiAwLjM3NXJlbSAwO1xuXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMuZG90U2l6ZU19OiAwLjc1cmVtO1xuICAgICAgICAgICAgICAgICR7dG9rZW5zLmRvdFNpemVTfTogMC41cmVtO1xuICAgICAgICAgICAgICAgICR7dG9rZW5zLmRvdFNpemVYU306IDAuMzc1cmVtO1xuICAgICAgICAgICAgICAgICR7dG9rZW5zLmRvdEJvcmRlclJhZGl1c306IDUwJTtcblxuICAgICAgICAgICAgICAgICR7dG9rZW5zLmxpbmVXaWR0aH06IDJyZW07XG4gICAgICAgICAgICAgICAgJHt0b2tlbnMubGluZUhlaWdodH06IDAuNXJlbTtcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5saW5lQm9yZGVyUmFkaXVzfTogMC4zNzVyZW07XG5cbiAgICAgICAgICAgICAgICAke3Rva2Vucy52ZXJ0aWNhbExpbmVXaWR0aH06IDAuNXJlbTtcbiAgICAgICAgICAgICAgICAke3Rva2Vucy52ZXJ0aWNhbExpbmVIZWlnaHR9OiAycmVtO1xuICAgICAgICAgICAgYCxcbiAgICAgICAgICAgIG06IGNzc2BcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5kb3RQYWRkaW5nfTogMCAwLjM3NXJlbTtcbiAgICAgICAgICAgICAgICAke3Rva2Vucy52ZXJ0aWNhbERvdFBhZGRpbmd9OiAwLjM3NXJlbSAwO1xuXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMuZG90Qm9yZGVyUmFkaXVzfTogNTAlO1xuICAgICAgICAgICAgICAgICR7dG9rZW5zLmRvdFNpemVNfTogMC43NXJlbTtcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5kb3RTaXplU306IDAuNXJlbTtcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5kb3RTaXplWFN9OiAwLjM3NXJlbTtcblxuICAgICAgICAgICAgICAgICR7dG9rZW5zLmxpbmVXaWR0aH06IDNyZW07XG4gICAgICAgICAgICAgICAgJHt0b2tlbnMubGluZUhlaWdodH06IDAuNzVyZW07XG4gICAgICAgICAgICAgICAgJHt0b2tlbnMubGluZUJvcmRlclJhZGl1c306IDAuMzc1cmVtO1xuXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMudmVydGljYWxMaW5lV2lkdGh9OiAwLjc1cmVtO1xuICAgICAgICAgICAgICAgICR7dG9rZW5zLnZlcnRpY2FsTGluZUhlaWdodH06IDNyZW07XG4gICAgICAgICAgICBgLFxuICAgICAgICB9LFxuICAgIH0sXG59O1xuIl19 */")),
+      m: /*#__PURE__*/(0, _react.css)(_PaginationDots.paginationDotsTokens.dotPadding, ":0 0.375rem;", _PaginationDots.paginationDotsTokens.verticalDotPadding, ":0.375rem 0;", _PaginationDots.paginationDotsTokens.dotBorderRadius, ":50%;", _PaginationDots.paginationDotsTokens.dotSizeM, ":0.75rem;", _PaginationDots.paginationDotsTokens.dotSizeS, ":0.5rem;", _PaginationDots.paginationDotsTokens.dotSizeXS, ":0.375rem;", _PaginationDots.paginationDotsTokens.lineWidth, ":3rem;", _PaginationDots.paginationDotsTokens.lineHeight, ":0.75rem;", _PaginationDots.paginationDotsTokens.lineBorderRadius, ":0.375rem;", _PaginationDots.paginationDotsTokens.verticalLineWidth, ":0.75rem;", _PaginationDots.paginationDotsTokens.verticalLineHeight, ":3rem;;label:plasma-new-hope__m;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV9iMmMvY29tcG9uZW50cy9QYWdpbmF0aW9uRG90cy9QYWdpbmF0aW9uRG90cy5jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNrQiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9leGFtcGxlcy9wbGFzbWFfYjJjL2NvbXBvbmVudHMvUGFnaW5hdGlvbkRvdHMvUGFnaW5hdGlvbkRvdHMuY29uZmlnLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBwYWdpbmF0aW9uRG90c1Rva2VucyBhcyB0b2tlbnMgfSBmcm9tICcuLi8uLi8uLi8uLi9jb21wb25lbnRzL1BhZ2luYXRpb25Eb3RzJztcblxuZXhwb3J0IGNvbnN0IGNvbmZpZyA9IHtcbiAgICBkZWZhdWx0czoge1xuICAgICAgICB2aWV3OiAnZGVmYXVsdCcsXG4gICAgICAgIHNpemU6ICdtJyxcbiAgICB9LFxuICAgIHZhcmlhdGlvbnM6IHtcbiAgICAgICAgdmlldzoge1xuICAgICAgICAgICAgZGVmYXVsdDogY3NzYFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLml0ZW1CYWNrZ3JvdW5kfTogIzA4MDgwODFmO1xuICAgICAgICAgICAgICAgICR7dG9rZW5zLmFjdGl2ZUl0ZW1CYWNrZ3JvdW5kfTogIzA4MDgwODtcbiAgICAgICAgICAgIGAsXG4gICAgICAgIH0sXG4gICAgICAgIHNpemU6IHtcbiAgICAgICAgICAgIHM6IGNzc2BcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5kb3RQYWRkaW5nfTogMCAwLjM3NXJlbTtcbiAgICAgICAgICAgICAgICAke3Rva2Vucy52ZXJ0aWNhbERvdFBhZGRpbmd9OiAwLjM3NXJlbSAwO1xuXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMuZG90U2l6ZU19OiAwLjc1cmVtO1xuICAgICAgICAgICAgICAgICR7dG9rZW5zLmRvdFNpemVTfTogMC41cmVtO1xuICAgICAgICAgICAgICAgICR7dG9rZW5zLmRvdFNpemVYU306IDAuMzc1cmVtO1xuICAgICAgICAgICAgICAgICR7dG9rZW5zLmRvdEJvcmRlclJhZGl1c306IDUwJTtcblxuICAgICAgICAgICAgICAgICR7dG9rZW5zLmxpbmVXaWR0aH06IDJyZW07XG4gICAgICAgICAgICAgICAgJHt0b2tlbnMubGluZUhlaWdodH06IDAuNXJlbTtcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5saW5lQm9yZGVyUmFkaXVzfTogMC4zNzVyZW07XG5cbiAgICAgICAgICAgICAgICAke3Rva2Vucy52ZXJ0aWNhbExpbmVXaWR0aH06IDAuNXJlbTtcbiAgICAgICAgICAgICAgICAke3Rva2Vucy52ZXJ0aWNhbExpbmVIZWlnaHR9OiAycmVtO1xuICAgICAgICAgICAgYCxcbiAgICAgICAgICAgIG06IGNzc2BcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5kb3RQYWRkaW5nfTogMCAwLjM3NXJlbTtcbiAgICAgICAgICAgICAgICAke3Rva2Vucy52ZXJ0aWNhbERvdFBhZGRpbmd9OiAwLjM3NXJlbSAwO1xuXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMuZG90Qm9yZGVyUmFkaXVzfTogNTAlO1xuICAgICAgICAgICAgICAgICR7dG9rZW5zLmRvdFNpemVNfTogMC43NXJlbTtcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5kb3RTaXplU306IDAuNXJlbTtcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5kb3RTaXplWFN9OiAwLjM3NXJlbTtcblxuICAgICAgICAgICAgICAgICR7dG9rZW5zLmxpbmVXaWR0aH06IDNyZW07XG4gICAgICAgICAgICAgICAgJHt0b2tlbnMubGluZUhlaWdodH06IDAuNzVyZW07XG4gICAgICAgICAgICAgICAgJHt0b2tlbnMubGluZUJvcmRlclJhZGl1c306IDAuMzc1cmVtO1xuXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMudmVydGljYWxMaW5lV2lkdGh9OiAwLjc1cmVtO1xuICAgICAgICAgICAgICAgICR7dG9rZW5zLnZlcnRpY2FsTGluZUhlaWdodH06IDNyZW07XG4gICAgICAgICAgICBgLFxuICAgICAgICB9LFxuICAgIH0sXG59O1xuIl19 */"))
+    }
+  }
+};

package/emotion/cjs/examples/plasma_b2c/components/PaginationDots/PaginationDots.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaginationDots = void 0;
+var _PaginationDots = /*#__PURE__*/require("../../../../components/PaginationDots");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _PaginationDots2 = /*#__PURE__*/require("./PaginationDots.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_PaginationDots.paginationDotsConfig, _PaginationDots2.config);
+var PaginationDots = exports.PaginationDots = /*#__PURE__*/(0, _engines.component)(mergedConfig);

package/emotion/cjs/examples/plasma_b2c/components/PaginationDots/PaginationDots.stories.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { ComponentProps, useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+
+import { PaginationDots } from './PaginationDots';
+import { config } from './PaginationDots.config';
+
+const { views, sizes } = getConfigVariations(config);
+const orientations: Array<string> = ['vertical', 'horizontal'];
+
+const meta: Meta<typeof PaginationDots> = {
+    title: 'b2c/Data Entry/PaginationDots',
+    decorators: [WithTheme],
+    component: PaginationDots,
+    args: {
+        view: 'default',
+        size: 'm',
+    },
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        dotType: {
+            options: ['dot', 'line'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        orientation: {
+            options: orientations,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        count: {
+            control: {
+                type: 'number',
+            },
+        },
+        visibleCount: {
+            control: {
+                type: 'number',
+            },
+        },
+        ...disableProps(['value', 'focused', 'pin']),
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof PaginationDots> & {
+    currentDot: string;
+};
+
+const StoryDefault = ({ dotType, ...rest }: StoryPropsDefault) => {
+    const [value, setValue] = useState(0);
+
+    return (
+        <div style={{ width: '400px', height: '400px' }}>
+            <PaginationDots value={value} activeElementView={dotType} onChange={setValue} {...rest} />
+        </div>
+    );
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        size: 'm',
+        dotType: 'dot',
+        orientation: 'horizontal',
+        centered: false,
+        count: 9,
+        visibleCount: 9,
+    },
+    render: (args) => <StoryDefault {...args} />,
+};

package/emotion/cjs/examples/plasma_web/components/PaginationDots/PaginationDots.config.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _react = /*#__PURE__*/require("@emotion/react");
+var _PaginationDots = /*#__PURE__*/require("../../../../components/PaginationDots");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    focused: 'true',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _react.css)(_PaginationDots.paginationDotsTokens.itemBackground, ":'#0808081f',", _PaginationDots.paginationDotsTokens.activeItemBackground, ":'#080808',;;label:plasma-new-hope__default;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9QYWdpbmF0aW9uRG90cy9QYWdpbmF0aW9uRG90cy5jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBWXdCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9QYWdpbmF0aW9uRG90cy9QYWdpbmF0aW9uRG90cy5jb25maWcudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IHBhZ2luYXRpb25Eb3RzVG9rZW5zIGFzIHRva2VucyB9IGZyb20gJy4uLy4uLy4uLy4uL2NvbXBvbmVudHMvUGFnaW5hdGlvbkRvdHMnO1xuXG5leHBvcnQgY29uc3QgY29uZmlnID0ge1xuICAgIGRlZmF1bHRzOiB7XG4gICAgICAgIHZpZXc6ICdkZWZhdWx0JyxcbiAgICAgICAgZm9jdXNlZDogJ3RydWUnLFxuICAgICAgICBzaXplOiAnbScsXG4gICAgfSxcbiAgICB2YXJpYXRpb25zOiB7XG4gICAgICAgIHZpZXc6IHtcbiAgICAgICAgICAgIGRlZmF1bHQ6IGNzc2BcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5pdGVtQmFja2dyb3VuZH06ICcjMDgwODA4MWYnLFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLmFjdGl2ZUl0ZW1CYWNrZ3JvdW5kfTogJyMwODA4MDgnLFxuICAgICAgICAgICAgYCxcbiAgICAgICAgfSxcbiAgICAgICAgc2l6ZToge1xuICAgICAgICAgICAgczogY3NzYFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLmRvdFBhZGRpbmd9OiAnMCAwLjM3NXJlbScsXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMudmVydGljYWxEb3RQYWRkaW5nfTogJzAuMzc1cmVtIDAnLFxuXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMuZG90U2l6ZU19OiAnMC4zNzVyZW0nLFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLmRvdFNpemVTfTogJzAuNXJlbScsXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMuZG90U2l6ZVhTfTogJzAuNzVyZW0nLFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLmRvdEJvcmRlclJhZGl1c306ICc1MCUnLFxuICAgICAgICAgICAgICAgIFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLmxpbmVXaWR0aH06ICcycmVtJyxcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5saW5lSGVpZ2h0fTogJzAuNXJlbScsXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMubGluZUJvcmRlclJhZGl1c306ICcwLjM3NXJlbScsXG5cbiAgICAgICAgICAgICAgICAke3Rva2Vucy52ZXJ0aWNhbExpbmVXaWR0aH06ICcwLjVyZW0nLFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLnZlcnRpY2FsTGluZUhlaWdodH06ICcycmVtJyxcbiAgICAgICAgICAgIGAsXG4gICAgICAgICAgICBtOiBjc3NgXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMuZG90UGFkZGluZ306ICcwIDAuMzc1cmVtJyxcbiAgICAgICAgICAgICAgICAke3Rva2Vucy52ZXJ0aWNhbERvdFBhZGRpbmd9OiAnMC4zNzVyZW0gMCcsXG5cbiAgICAgICAgICAgICAgICAke3Rva2Vucy5kb3RCb3JkZXJSYWRpdXN9OiAnNTAlJyxcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5kb3RTaXplTX06ICcwLjM3NXJlbScsXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMuZG90U2l6ZVN9OiAnMC41cmVtJyxcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5kb3RTaXplWFN9OiAnMC43NXJlbScsXG5cbiAgICAgICAgICAgICAgICAke3Rva2Vucy5saW5lV2lkdGh9OiAnM3JlbScsXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMubGluZUhlaWdodH06ICcwLjc1cmVtJyxcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5saW5lQm9yZGVyUmFkaXVzfTogJzAuMzc1cmVtJyxcblxuICAgICAgICAgICAgICAgICR7dG9rZW5zLnZlcnRpY2FsTGluZVdpZHRofTogJzAuNzVyZW0nLFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLnZlcnRpY2FsTGluZUhlaWdodH06ICczcmVtJyxcbiAgICAgICAgICAgIGAsXG4gICAgICAgIH0sXG4gICAgfSxcbn07XG4iXX0= */"))
+    },
+    size: {
+      s: /*#__PURE__*/(0, _react.css)(_PaginationDots.paginationDotsTokens.dotPadding, ":'0 0.375rem',", _PaginationDots.paginationDotsTokens.verticalDotPadding, ":'0.375rem 0',", _PaginationDots.paginationDotsTokens.dotSizeM, ":'0.375rem',", _PaginationDots.paginationDotsTokens.dotSizeS, ":'0.5rem',", _PaginationDots.paginationDotsTokens.dotSizeXS, ":'0.75rem',", _PaginationDots.paginationDotsTokens.dotBorderRadius, ":'50%',", _PaginationDots.paginationDotsTokens.lineWidth, ":'2rem',", _PaginationDots.paginationDotsTokens.lineHeight, ":'0.5rem',", _PaginationDots.paginationDotsTokens.lineBorderRadius, ":'0.375rem',", _PaginationDots.paginationDotsTokens.verticalLineWidth, ":'0.5rem',", _PaginationDots.paginationDotsTokens.verticalLineHeight, ":'2rem',;;label:plasma-new-hope__s;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9QYWdpbmF0aW9uRG90cy9QYWdpbmF0aW9uRG90cy5jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0JrQiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9leGFtcGxlcy9wbGFzbWFfd2ViL2NvbXBvbmVudHMvUGFnaW5hdGlvbkRvdHMvUGFnaW5hdGlvbkRvdHMuY29uZmlnLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBwYWdpbmF0aW9uRG90c1Rva2VucyBhcyB0b2tlbnMgfSBmcm9tICcuLi8uLi8uLi8uLi9jb21wb25lbnRzL1BhZ2luYXRpb25Eb3RzJztcblxuZXhwb3J0IGNvbnN0IGNvbmZpZyA9IHtcbiAgICBkZWZhdWx0czoge1xuICAgICAgICB2aWV3OiAnZGVmYXVsdCcsXG4gICAgICAgIGZvY3VzZWQ6ICd0cnVlJyxcbiAgICAgICAgc2l6ZTogJ20nLFxuICAgIH0sXG4gICAgdmFyaWF0aW9uczoge1xuICAgICAgICB2aWV3OiB7XG4gICAgICAgICAgICBkZWZhdWx0OiBjc3NgXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMuaXRlbUJhY2tncm91bmR9OiAnIzA4MDgwODFmJyxcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5hY3RpdmVJdGVtQmFja2dyb3VuZH06ICcjMDgwODA4JyxcbiAgICAgICAgICAgIGAsXG4gICAgICAgIH0sXG4gICAgICAgIHNpemU6IHtcbiAgICAgICAgICAgIHM6IGNzc2BcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5kb3RQYWRkaW5nfTogJzAgMC4zNzVyZW0nLFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLnZlcnRpY2FsRG90UGFkZGluZ306ICcwLjM3NXJlbSAwJyxcblxuICAgICAgICAgICAgICAgICR7dG9rZW5zLmRvdFNpemVNfTogJzAuMzc1cmVtJyxcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5kb3RTaXplU306ICcwLjVyZW0nLFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLmRvdFNpemVYU306ICcwLjc1cmVtJyxcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5kb3RCb3JkZXJSYWRpdXN9OiAnNTAlJyxcbiAgICAgICAgICAgICAgICBcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5saW5lV2lkdGh9OiAnMnJlbScsXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMubGluZUhlaWdodH06ICcwLjVyZW0nLFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLmxpbmVCb3JkZXJSYWRpdXN9OiAnMC4zNzVyZW0nLFxuXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMudmVydGljYWxMaW5lV2lkdGh9OiAnMC41cmVtJyxcbiAgICAgICAgICAgICAgICAke3Rva2Vucy52ZXJ0aWNhbExpbmVIZWlnaHR9OiAnMnJlbScsXG4gICAgICAgICAgICBgLFxuICAgICAgICAgICAgbTogY3NzYFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLmRvdFBhZGRpbmd9OiAnMCAwLjM3NXJlbScsXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMudmVydGljYWxEb3RQYWRkaW5nfTogJzAuMzc1cmVtIDAnLFxuXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMuZG90Qm9yZGVyUmFkaXVzfTogJzUwJScsXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMuZG90U2l6ZU19OiAnMC4zNzVyZW0nLFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLmRvdFNpemVTfTogJzAuNXJlbScsXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMuZG90U2l6ZVhTfTogJzAuNzVyZW0nLFxuXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMubGluZVdpZHRofTogJzNyZW0nLFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLmxpbmVIZWlnaHR9OiAnMC43NXJlbScsXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMubGluZUJvcmRlclJhZGl1c306ICcwLjM3NXJlbScsXG5cbiAgICAgICAgICAgICAgICAke3Rva2Vucy52ZXJ0aWNhbExpbmVXaWR0aH06ICcwLjc1cmVtJyxcbiAgICAgICAgICAgICAgICAke3Rva2Vucy52ZXJ0aWNhbExpbmVIZWlnaHR9OiAnM3JlbScsXG4gICAgICAgICAgICBgLFxuICAgICAgICB9LFxuICAgIH0sXG59O1xuIl19 */")),
+      m: /*#__PURE__*/(0, _react.css)(_PaginationDots.paginationDotsTokens.dotPadding, ":'0 0.375rem',", _PaginationDots.paginationDotsTokens.verticalDotPadding, ":'0.375rem 0',", _PaginationDots.paginationDotsTokens.dotBorderRadius, ":'50%',", _PaginationDots.paginationDotsTokens.dotSizeM, ":'0.375rem',", _PaginationDots.paginationDotsTokens.dotSizeS, ":'0.5rem',", _PaginationDots.paginationDotsTokens.dotSizeXS, ":'0.75rem',", _PaginationDots.paginationDotsTokens.lineWidth, ":'3rem',", _PaginationDots.paginationDotsTokens.lineHeight, ":'0.75rem',", _PaginationDots.paginationDotsTokens.lineBorderRadius, ":'0.375rem',", _PaginationDots.paginationDotsTokens.verticalLineWidth, ":'0.75rem',", _PaginationDots.paginationDotsTokens.verticalLineHeight, ":'3rem',;;label:plasma-new-hope__m;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9QYWdpbmF0aW9uRG90cy9QYWdpbmF0aW9uRG90cy5jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0NrQiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9leGFtcGxlcy9wbGFzbWFfd2ViL2NvbXBvbmVudHMvUGFnaW5hdGlvbkRvdHMvUGFnaW5hdGlvbkRvdHMuY29uZmlnLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBwYWdpbmF0aW9uRG90c1Rva2VucyBhcyB0b2tlbnMgfSBmcm9tICcuLi8uLi8uLi8uLi9jb21wb25lbnRzL1BhZ2luYXRpb25Eb3RzJztcblxuZXhwb3J0IGNvbnN0IGNvbmZpZyA9IHtcbiAgICBkZWZhdWx0czoge1xuICAgICAgICB2aWV3OiAnZGVmYXVsdCcsXG4gICAgICAgIGZvY3VzZWQ6ICd0cnVlJyxcbiAgICAgICAgc2l6ZTogJ20nLFxuICAgIH0sXG4gICAgdmFyaWF0aW9uczoge1xuICAgICAgICB2aWV3OiB7XG4gICAgICAgICAgICBkZWZhdWx0OiBjc3NgXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMuaXRlbUJhY2tncm91bmR9OiAnIzA4MDgwODFmJyxcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5hY3RpdmVJdGVtQmFja2dyb3VuZH06ICcjMDgwODA4JyxcbiAgICAgICAgICAgIGAsXG4gICAgICAgIH0sXG4gICAgICAgIHNpemU6IHtcbiAgICAgICAgICAgIHM6IGNzc2BcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5kb3RQYWRkaW5nfTogJzAgMC4zNzVyZW0nLFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLnZlcnRpY2FsRG90UGFkZGluZ306ICcwLjM3NXJlbSAwJyxcblxuICAgICAgICAgICAgICAgICR7dG9rZW5zLmRvdFNpemVNfTogJzAuMzc1cmVtJyxcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5kb3RTaXplU306ICcwLjVyZW0nLFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLmRvdFNpemVYU306ICcwLjc1cmVtJyxcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5kb3RCb3JkZXJSYWRpdXN9OiAnNTAlJyxcbiAgICAgICAgICAgICAgICBcbiAgICAgICAgICAgICAgICAke3Rva2Vucy5saW5lV2lkdGh9OiAnMnJlbScsXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMubGluZUhlaWdodH06ICcwLjVyZW0nLFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLmxpbmVCb3JkZXJSYWRpdXN9OiAnMC4zNzVyZW0nLFxuXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMudmVydGljYWxMaW5lV2lkdGh9OiAnMC41cmVtJyxcbiAgICAgICAgICAgICAgICAke3Rva2Vucy52ZXJ0aWNhbExpbmVIZWlnaHR9OiAnMnJlbScsXG4gICAgICAgICAgICBgLFxuICAgICAgICAgICAgbTogY3NzYFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLmRvdFBhZGRpbmd9OiAnMCAwLjM3NXJlbScsXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMudmVydGljYWxEb3RQYWRkaW5nfTogJzAuMzc1cmVtIDAnLFxuXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMuZG90Qm9yZGVyUmFkaXVzfTogJzUwJScsXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMuZG90U2l6ZU19OiAnMC4zNzVyZW0nLFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLmRvdFNpemVTfTogJzAuNXJlbScsXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMuZG90U2l6ZVhTfTogJzAuNzVyZW0nLFxuXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMubGluZVdpZHRofTogJzNyZW0nLFxuICAgICAgICAgICAgICAgICR7dG9rZW5zLmxpbmVIZWlnaHR9OiAnMC43NXJlbScsXG4gICAgICAgICAgICAgICAgJHt0b2tlbnMubGluZUJvcmRlclJhZGl1c306ICcwLjM3NXJlbScsXG5cbiAgICAgICAgICAgICAgICAke3Rva2Vucy52ZXJ0aWNhbExpbmVXaWR0aH06ICcwLjc1cmVtJyxcbiAgICAgICAgICAgICAgICAke3Rva2Vucy52ZXJ0aWNhbExpbmVIZWlnaHR9OiAnM3JlbScsXG4gICAgICAgICAgICBgLFxuICAgICAgICB9LFxuICAgIH0sXG59O1xuIl19 */"))
+    }
+  }
+};

package/emotion/cjs/examples/plasma_web/components/PaginationDots/PaginationDots.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaginationDots = void 0;
+var _PaginationDots = /*#__PURE__*/require("../../../../components/PaginationDots");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _PaginationDots2 = /*#__PURE__*/require("./PaginationDots.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_PaginationDots.paginationDotsConfig, _PaginationDots2.config);
+var PaginationDots = exports.PaginationDots = /*#__PURE__*/(0, _engines.component)(mergedConfig);

package/emotion/cjs/examples/plasma_web/components/PaginationDots/PaginationDots.stories.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+
+import { PaginationDots } from './PaginationDots';
+import { config } from './PaginationDots.config';
+
+const { views, sizes } = getConfigVariations(config);
+const orientations: Array<string> = ['vertical', 'horizontal'];
+
+const meta: Meta<typeof PaginationDots> = {
+    title: 'web/Data Entry/PaginationDots',
+    decorators: [WithTheme],
+    component: PaginationDots,
+    args: {
+        view: 'default',
+        size: 'm',
+    },
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inner-radio',
+            },
+        },
+        orientation: {
+            options: orientations,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        activeDotCentered: {
+            control: {
+                type: 'boolean',
+            },
+        },
+        ...disableProps(['value', 'focused', 'pin']),
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof PaginationDots> & {
+    enableContentLeft: boolean;
+    enableContentRight: boolean;
+};
+
+const StoryDefault = ({ size, ...rest }: StoryPropsDefault) => {
+    return <PaginationDots size={size} value={0} count={9} {...rest} />;
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        orientation: 'horizontal',
+        stretched: true,
+        currentDot: 'first',
+    },
+    render: (args) => <StoryDefault {...args} />,
+};