@prom-ui/core 0.0.133 → 0.0.141

package/ScrollControls/cjs/index.development.v2.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classNames = require('classnames');
-var Button = require('@prom-ui/core/Button');
 var Icon = require('@prom-ui/core/Icon');
 var BodyProvider = require('@prom-ui/core/BodyProvider');
 var Left = require('@prom-ui/icons/Left');
@@ -77,11 +76,12 @@ function __makeTemplateObject(cooked, raw) {
     return cooked;
 }
 
-var css = {"root":"ScrollControls__root___5xFyd","buttonCommon":"ScrollControls__buttonCommon___kQ3-r","prev":"ScrollControls__prev___YhapL ScrollControls__buttonCommon___kQ3-r","next":"ScrollControls__next___yCCvv ScrollControls__buttonCommon___kQ3-r","icon":"ScrollControls__icon___z7X7-","showOnHover":"ScrollControls__showOnHover___PVtmJ","hideOnDisabled":"ScrollControls__hideOnDisabled___hwEsJ"};
+var css = {"root":"ScrollControls__root___5xFyd","buttonCommon":"ScrollControls__buttonCommon___kQ3-r","prev":"ScrollControls__prev___YhapL ScrollControls__buttonCommon___kQ3-r","next":"ScrollControls__next___yCCvv ScrollControls__buttonCommon___kQ3-r","largeBoxShadow":"ScrollControls__largeBoxShadow___4Z-qq","smallBoxShadow":"ScrollControls__smallBoxShadow___ZAZeD","iconPlaceholder":"ScrollControls__iconPlaceholder___XLACs","icon":"ScrollControls__icon___z7X7-","showOnHover":"ScrollControls__showOnHover___PVtmJ","hideOnDisabled":"ScrollControls__hideOnDisabled___hwEsJ"};
 
 var DIRECTION_NEXT = 1;
 var DIRECTION_PREV = -1;
 var CONTROLS_UPDATE_DELAY = 100;
+var CONTROLS_SMALL_HEIGHT = 64;
 var ScrollControlsButton = function (_a) {
   var _b, _c;
   var scrollRef = _a.scrollRef,
@@ -92,26 +92,27 @@ var ScrollControlsButton = function (_a) {
     onClickNext = _a.onClickNext,
     onClickPrev = _a.onClickPrev,
     zIndex = _a.zIndex,
-    _f = _a.theme,
-    theme = _f === void 0 ? 'white' : _f,
     children = _a.children;
   var t = BodyProvider.useBodyLocale().t;
   var updateControlsTimer = React.useRef(null);
-  var _g = React.useState({
+  var _f = React.useState({
       prev: false,
-      next: false
+      next: false,
+      isSmallHeight: false
     }),
-    controlsVisible = _g[0],
-    setControlsVisible = _g[1];
+    controlsVisible = _f[0],
+    setControlsVisible = _f[1];
   var updateControlsVisible = function (nextScrollLeft) {
     var _a = scrollRef.current,
       scrollLeft = _a.scrollLeft,
       scrollWidth = _a.scrollWidth,
-      clientWidth = _a.clientWidth;
+      clientWidth = _a.clientWidth,
+      clientHeight = _a.clientHeight;
     var currentScrollLeft = (Number.isInteger(nextScrollLeft) ? nextScrollLeft : scrollLeft) || 0;
     setControlsVisible({
       prev: currentScrollLeft > 1,
-      next: currentScrollLeft < scrollWidth - clientWidth
+      next: currentScrollLeft < scrollWidth - clientWidth,
+      isSmallHeight: clientHeight < CONTROLS_SMALL_HEIGHT
     });
   };
   var updateScrollLeft = function (direction) {
@@ -157,34 +158,37 @@ var ScrollControlsButton = function (_a) {
     };
   }, [isActive, children]);
   if (isActive && (controlsVisible.prev || controlsVisible.next)) {
-    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(Button.Button, {
-      "button-theme": theme,
-      "button-round": 'xs',
-      "button-weight": 'normal',
-      "button-padding": 'none xxs',
-      className: classNames__default["default"](css.prev, (_b = {}, _b[css.hideOnDisabled] = hideOnDisabled, _b)),
+    var iconPlaceholder = React__default["default"].createElement("svg", {
+      className: css.iconPlaceholder,
+      viewBox: '0 0 24 24',
+      width: 24,
+      height: 24,
+      focusable: false,
+      "aria-hidden": true,
+      tabIndex: -1
+    });
+    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("button", {
+      type: 'button',
+      className: classNames__default["default"](css.prev, (_b = {}, _b[css.hideOnDisabled] = hideOnDisabled, _b[css.largeBoxShadow] = !controlsVisible.isSmallHeight, _b[css.smallBoxShadow] = controlsVisible.isSmallHeight, _b)),
       onClick: handleOnClickPrev,
       style: {
         zIndex: zIndex
       },
       disabled: !controlsVisible.prev,
       title: t(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\u041D\u0430\u0437\u0430\u0434"], ["\u041D\u0430\u0437\u0430\u0434"])))
-    }, React__default["default"].createElement(Icon.Icon, {
+    }, iconPlaceholder, React__default["default"].createElement(Icon.Icon, {
       className: css.icon,
       "icon-as": Left.Left
-    })), React__default["default"].createElement(Button.Button, {
-      "button-theme": theme,
-      "button-round": 'xs',
-      "button-weight": 'normal',
-      "button-padding": 'none xxs',
-      className: classNames__default["default"](css.next, (_c = {}, _c[css.hideOnDisabled] = hideOnDisabled, _c)),
+    })), React__default["default"].createElement("button", {
+      type: 'button',
+      className: classNames__default["default"](css.next, (_c = {}, _c[css.hideOnDisabled] = hideOnDisabled, _c[css.largeBoxShadow] = !controlsVisible.isSmallHeight, _c[css.smallBoxShadow] = controlsVisible.isSmallHeight, _c)),
       onClick: handleOnClickNext,
       style: {
         zIndex: zIndex
       },
       disabled: !controlsVisible.next,
       title: t(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\u0414\u0430\u043B\u0435\u0435"], ["\u0414\u0430\u043B\u0435\u0435"])))
-    }, React__default["default"].createElement(Icon.Icon, {
+    }, iconPlaceholder, React__default["default"].createElement(Icon.Icon, {
       className: css.icon,
       "icon-as": Right.Right
     })));
@@ -198,7 +202,7 @@ var ScrollControls = React__namespace.forwardRef(function (_a, ref) {
   var children = _a.children,
     className = _a.className,
     _c = _a.hideOnDisabled,
-    hideOnDisabled = _c === void 0 ? false : _c,
+    hideOnDisabled = _c === void 0 ? true : _c,
     _d = _a.isActive,
     isActive = _d === void 0 ? true : _d,
     onClickNext = _a.onClickNext,
@@ -206,9 +210,7 @@ var ScrollControls = React__namespace.forwardRef(function (_a, ref) {
     _e = _a.showOnHover,
     showOnHover = _e === void 0 ? false : _e,
     zIndex = _a.zIndex,
-    _f = _a.theme,
-    theme = _f === void 0 ? 'white' : _f,
-    props = __rest(_a, ["children", "className", "hideOnDisabled", "isActive", "onClickNext", "onClickPrev", "showOnHover", "zIndex", "theme"]);
+    props = __rest(_a, ["children", "className", "hideOnDisabled", "isActive", "onClickNext", "onClickPrev", "showOnHover", "zIndex"]);
   var scrollRef = React__namespace.useRef(null);
   return React__namespace.createElement("div", __assign({
     ref: ref,
@@ -219,8 +221,7 @@ var ScrollControls = React__namespace.forwardRef(function (_a, ref) {
     isActive: isActive,
     onClickNext: onClickNext,
     onClickPrev: onClickPrev,
-    zIndex: zIndex,
-    theme: theme
+    zIndex: zIndex
   }, children));
 });
 

package/ScrollControls/cjs/index.production.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("classnames"),r=require("@prom-ui/core/Button"),n=require("@prom-ui/core/Icon"),o=require("@prom-ui/core/BodyProvider"),i=require("@prom-ui/icons/Left"),c=require("@prom-ui/icons/Right");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=l(e),s=u(e),f=l(t),d=function(){return d=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},d.apply(this,arguments)};function v(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var m,p,b="mOlOq",h="cF2KB rZcyK",O="_9B-9g rZcyK",y="lzBzL",x="StbVV",g="IONkE",j=function(t){var l,u,s=t.scrollRef,d=t.hideOnDisabled,b=void 0!==d&&d,x=t.isActive,j=void 0===x||x,w=t.onClickNext,P=t.onClickPrev,E=t.zIndex,N=t.theme,k=void 0===N?"white":N,I=t.children,C=o.useBodyLocale().t,q=e.useRef(null),z=e.useState({prev:!1,next:!1}),B=z[0],L=z[1],R=function(e){var t=s.current,r=t.scrollLeft,n=t.scrollWidth,o=t.clientWidth,i=(Number.isInteger(e)?e:r)||0;L({prev:i>1,next:i<n-o})},A=function(e){var t=s.current,r=t.scrollLeft,n=t.clientWidth*e;R(r+n),requestAnimationFrame((function(){s.current&&s.current.scrollBy({left:n,behavior:"smooth"})}))},D=function(){clearTimeout(q.current||0),q.current=setTimeout(R,100)};return e.useEffect((function(){return s.current&&j&&(R(),s.current.addEventListener("scroll",D)),function(){s.current&&j&&s.current.removeEventListener("scroll",D)}}),[j,I]),j&&(B.prev||B.next)?a.default.createElement(a.default.Fragment,null,a.default.createElement(r.Button,{"button-theme":k,"button-round":"xs","button-weight":"normal","button-padding":"none xxs",className:f.default(h,(l={},l[g]=b,l)),onClick:function(){"function"==typeof P&&P(),A(-1)},style:{zIndex:E},disabled:!B.prev,title:C(m||(m=v(["Назад"],["Назад"])))},a.default.createElement(n.Icon,{className:y,"icon-as":i.Left})),a.default.createElement(r.Button,{"button-theme":k,"button-round":"xs","button-weight":"normal","button-padding":"none xxs",className:f.default(O,(u={},u[g]=b,u)),onClick:function(){"function"==typeof w&&w(),A(1)},style:{zIndex:E},disabled:!B.next,title:C(p||(p=v(["Далее"],["Далее"])))},a.default.createElement(n.Icon,{className:y,"icon-as":c.Right}))):null},w=s.forwardRef((function(e,t){var r,n=e.children,o=e.className,i=e.hideOnDisabled,c=void 0!==i&&i,l=e.isActive,u=void 0===l||l,a=e.onClickNext,v=e.onClickPrev,m=e.showOnHover,p=void 0!==m&&m,h=e.zIndex,O=e.theme,y=void 0===O?"white":O,g=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}(e,["children","className","hideOnDisabled","isActive","onClickNext","onClickPrev","showOnHover","zIndex","theme"]),w=s.useRef(null);return s.createElement("div",d({ref:t,className:f.default(b,o,(r={},r[x]=p,r))},g),n(w),s.createElement(j,{scrollRef:w,hideOnDisabled:c,isActive:u,onClickNext:a,onClickPrev:v,zIndex:h,theme:y},n))}));exports.ScrollControls=w,require("./style.production.css");
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("classnames"),r=require("@prom-ui/core/Icon"),n=require("@prom-ui/core/BodyProvider"),i=require("@prom-ui/icons/Left"),l=require("@prom-ui/icons/Right");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=c(e),u=o(e),s=c(t),f=function(){return f=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},f.apply(this,arguments)};function d(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var v,m,p="mOlOq",b="cF2KB rZcyK",h="_9B-9g rZcyK",y="a-AIU",O="EU4JE",g="mOQTl",x="lzBzL",E="StbVV",j="IONkE",I=function(t){var c,o,u=t.scrollRef,f=t.hideOnDisabled,p=void 0!==f&&f,E=t.isActive,I=void 0===E||E,N=t.onClickNext,P=t.onClickPrev,k=t.zIndex,w=t.children,C=n.useBodyLocale().t,S=e.useRef(null),q=e.useState({prev:!1,next:!1,isSmallHeight:!1}),z=q[0],H=q[1],L=function(e){var t=u.current,r=t.scrollLeft,n=t.scrollWidth,i=t.clientWidth,l=t.clientHeight,c=(Number.isInteger(e)?e:r)||0;H({prev:c>1,next:c<n-i,isSmallHeight:l<64})},B=function(e){var t=u.current,r=t.scrollLeft,n=t.clientWidth*e;L(r+n),requestAnimationFrame((function(){u.current&&u.current.scrollBy({left:n,behavior:"smooth"})}))},R=function(){clearTimeout(S.current||0),S.current=setTimeout(L,100)};if(e.useEffect((function(){return u.current&&I&&(L(),u.current.addEventListener("scroll",R)),function(){u.current&&I&&u.current.removeEventListener("scroll",R)}}),[I,w]),I&&(z.prev||z.next)){var A=a.default.createElement("svg",{className:g,viewBox:"0 0 24 24",width:24,height:24,focusable:!1,"aria-hidden":!0,tabIndex:-1});return a.default.createElement(a.default.Fragment,null,a.default.createElement("button",{type:"button",className:s.default(b,(c={},c[j]=p,c[y]=!z.isSmallHeight,c[O]=z.isSmallHeight,c)),onClick:function(){"function"==typeof P&&P(),B(-1)},style:{zIndex:k},disabled:!z.prev,title:C(v||(v=d(["Назад"],["Назад"])))},A,a.default.createElement(r.Icon,{className:x,"icon-as":i.Left})),a.default.createElement("button",{type:"button",className:s.default(h,(o={},o[j]=p,o[y]=!z.isSmallHeight,o[O]=z.isSmallHeight,o)),onClick:function(){"function"==typeof N&&N(),B(1)},style:{zIndex:k},disabled:!z.next,title:C(m||(m=d(["Далее"],["Далее"])))},A,a.default.createElement(r.Icon,{className:x,"icon-as":l.Right})))}return null},N=u.forwardRef((function(e,t){var r,n=e.children,i=e.className,l=e.hideOnDisabled,c=void 0===l||l,o=e.isActive,a=void 0===o||o,d=e.onClickNext,v=e.onClickPrev,m=e.showOnHover,b=void 0!==m&&m,h=e.zIndex,y=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);i<n.length;i++)t.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(e,n[i])&&(r[n[i]]=e[n[i]])}return r}(e,["children","className","hideOnDisabled","isActive","onClickNext","onClickPrev","showOnHover","zIndex"]),O=u.useRef(null);return u.createElement("div",f({ref:t,className:s.default(p,i,(r={},r[E]=b,r))},y),n(O),u.createElement(I,{scrollRef:O,hideOnDisabled:c,isActive:a,onClickNext:d,onClickPrev:v,zIndex:h},n))}));exports.ScrollControls=N,require("./style.production.css");

package/ScrollControls/cjs/index.production.v2.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("classnames"),r=require("@prom-ui/core/Button"),n=require("@prom-ui/core/Icon"),o=require("@prom-ui/core/BodyProvider"),i=require("@prom-ui/icons/Left"),c=require("@prom-ui/icons/Right");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=l(e),s=u(e),d=l(t),f=function(){return f=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},f.apply(this,arguments)};function v(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var m,p,b="_5xFyd",h="YhapL kQ3-r",y="yCCvv kQ3-r",O="z7X7-",x="PVtmJ",g="hwEsJ",j=function(t){var l,u,s=t.scrollRef,f=t.hideOnDisabled,b=void 0!==f&&f,x=t.isActive,j=void 0===x||x,w=t.onClickNext,P=t.onClickPrev,k=t.zIndex,C=t.theme,E=void 0===C?"white":C,N=t.children,I=o.useBodyLocale().t,q=e.useRef(null),z=e.useState({prev:!1,next:!1}),L=z[0],R=z[1],B=function(e){var t=s.current,r=t.scrollLeft,n=t.scrollWidth,o=t.clientWidth,i=(Number.isInteger(e)?e:r)||0;R({prev:i>1,next:i<n-o})},A=function(e){var t=s.current,r=t.scrollLeft,n=t.clientWidth*e;B(r+n),requestAnimationFrame((function(){s.current&&s.current.scrollBy({left:n,behavior:"smooth"})}))},D=function(){clearTimeout(q.current||0),q.current=setTimeout(B,100)};return e.useEffect((function(){return s.current&&j&&(B(),s.current.addEventListener("scroll",D)),function(){s.current&&j&&s.current.removeEventListener("scroll",D)}}),[j,N]),j&&(L.prev||L.next)?a.default.createElement(a.default.Fragment,null,a.default.createElement(r.Button,{"button-theme":E,"button-round":"xs","button-weight":"normal","button-padding":"none xxs",className:d.default(h,(l={},l[g]=b,l)),onClick:function(){"function"==typeof P&&P(),A(-1)},style:{zIndex:k},disabled:!L.prev,title:I(m||(m=v(["Назад"],["Назад"])))},a.default.createElement(n.Icon,{className:O,"icon-as":i.Left})),a.default.createElement(r.Button,{"button-theme":E,"button-round":"xs","button-weight":"normal","button-padding":"none xxs",className:d.default(y,(u={},u[g]=b,u)),onClick:function(){"function"==typeof w&&w(),A(1)},style:{zIndex:k},disabled:!L.next,title:I(p||(p=v(["Далее"],["Далее"])))},a.default.createElement(n.Icon,{className:O,"icon-as":c.Right}))):null},w=s.forwardRef((function(e,t){var r,n=e.children,o=e.className,i=e.hideOnDisabled,c=void 0!==i&&i,l=e.isActive,u=void 0===l||l,a=e.onClickNext,v=e.onClickPrev,m=e.showOnHover,p=void 0!==m&&m,h=e.zIndex,y=e.theme,O=void 0===y?"white":y,g=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}(e,["children","className","hideOnDisabled","isActive","onClickNext","onClickPrev","showOnHover","zIndex","theme"]),w=s.useRef(null);return s.createElement("div",f({ref:t,className:d.default(b,o,(r={},r[x]=p,r))},g),n(w),s.createElement(j,{scrollRef:w,hideOnDisabled:c,isActive:u,onClickNext:a,onClickPrev:v,zIndex:h,theme:O},n))}));exports.ScrollControls=w,require("./style.production.v2.css");
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("classnames"),r=require("@prom-ui/core/Icon"),n=require("@prom-ui/core/BodyProvider"),i=require("@prom-ui/icons/Left"),l=require("@prom-ui/icons/Right");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=o(e),u=c(e),s=o(t),f=function(){return f=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},f.apply(this,arguments)};function d(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var v,m,p="_5xFyd",h="YhapL kQ3-r",b="yCCvv kQ3-r",y="_4Z-qq",O="ZAZeD",g="XLACs",x="z7X7-",j="PVtmJ",P="hwEsJ",C=function(t){var o,c,u=t.scrollRef,f=t.hideOnDisabled,p=void 0!==f&&f,j=t.isActive,C=void 0===j||j,E=t.onClickNext,k=t.onClickPrev,w=t.zIndex,N=t.children,I=n.useBodyLocale().t,q=e.useRef(null),S=e.useState({prev:!1,next:!1,isSmallHeight:!1}),H=S[0],L=S[1],z=function(e){var t=u.current,r=t.scrollLeft,n=t.scrollWidth,i=t.clientWidth,l=t.clientHeight,o=(Number.isInteger(e)?e:r)||0;L({prev:o>1,next:o<n-i,isSmallHeight:l<64})},A=function(e){var t=u.current,r=t.scrollLeft,n=t.clientWidth*e;z(r+n),requestAnimationFrame((function(){u.current&&u.current.scrollBy({left:n,behavior:"smooth"})}))},R=function(){clearTimeout(q.current||0),q.current=setTimeout(z,100)};if(e.useEffect((function(){return u.current&&C&&(z(),u.current.addEventListener("scroll",R)),function(){u.current&&C&&u.current.removeEventListener("scroll",R)}}),[C,N]),C&&(H.prev||H.next)){var D=a.default.createElement("svg",{className:g,viewBox:"0 0 24 24",width:24,height:24,focusable:!1,"aria-hidden":!0,tabIndex:-1});return a.default.createElement(a.default.Fragment,null,a.default.createElement("button",{type:"button",className:s.default(h,(o={},o[P]=p,o[y]=!H.isSmallHeight,o[O]=H.isSmallHeight,o)),onClick:function(){"function"==typeof k&&k(),A(-1)},style:{zIndex:w},disabled:!H.prev,title:I(v||(v=d(["Назад"],["Назад"])))},D,a.default.createElement(r.Icon,{className:x,"icon-as":i.Left})),a.default.createElement("button",{type:"button",className:s.default(b,(c={},c[P]=p,c[y]=!H.isSmallHeight,c[O]=H.isSmallHeight,c)),onClick:function(){"function"==typeof E&&E(),A(1)},style:{zIndex:w},disabled:!H.next,title:I(m||(m=d(["Далее"],["Далее"])))},D,a.default.createElement(r.Icon,{className:x,"icon-as":l.Right})))}return null},E=u.forwardRef((function(e,t){var r,n=e.children,i=e.className,l=e.hideOnDisabled,o=void 0===l||l,c=e.isActive,a=void 0===c||c,d=e.onClickNext,v=e.onClickPrev,m=e.showOnHover,h=void 0!==m&&m,b=e.zIndex,y=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);i<n.length;i++)t.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(e,n[i])&&(r[n[i]]=e[n[i]])}return r}(e,["children","className","hideOnDisabled","isActive","onClickNext","onClickPrev","showOnHover","zIndex"]),O=u.useRef(null);return u.createElement("div",f({ref:t,className:s.default(p,i,(r={},r[j]=h,r))},y),n(O),u.createElement(C,{scrollRef:O,hideOnDisabled:o,isActive:a,onClickNext:d,onClickPrev:v,zIndex:b},n))}));exports.ScrollControls=E,require("./style.production.v2.css");

package/ScrollControls/cjs/style.development.css

@@ -1 +1 @@
-.ScrollControls__root___mOlOq{position:relative;overflow:hidden}.ScrollControls__buttonCommon___rZcyK{position:absolute;top:50%;transform:translateY(-50%);border:0;box-shadow:0 0 10px rgba(0,0,0,.08);height:66px;max-width:30px;max-height:50%;min-height:24px}.ScrollControls__buttonCommon___rZcyK:disabled{opacity:.3;pointer-events:auto}.ScrollControls__buttonCommon___rZcyK:active{background:var(--black-200)}.ScrollControls__prev___cF2KB{left:0;margin-left:var(--pds-spacing-xs)}.ScrollControls__next___9B-9g{right:0;margin-right:var(--pds-spacing-xs)}.ScrollControls__icon___lzBzL{display:block;width:auto;height:24px;fill:currentColor;max-height:80%}.ScrollControls__showOnHover___StbVV .ScrollControls__next___9B-9g{right:-40px}.ScrollControls__showOnHover___StbVV .ScrollControls__prev___cF2KB{left:-40px}.ScrollControls__hideOnDisabled___IONkE:disabled{opacity:0;pointer-events:none;visibility:hidden}@media (hover:hover){.ScrollControls__showOnHover___StbVV:hover .ScrollControls__next___9B-9g{right:0}.ScrollControls__showOnHover___StbVV:hover .ScrollControls__prev___cF2KB{left:0}}
+.ScrollControls__root___mOlOq{position:relative;overflow:hidden}.ScrollControls__buttonCommon___rZcyK{position:absolute;top:50%;transform:translate(0,-50%);border:0;border-radius:50%;height:75%;max-height:42px;transition:120ms ease-in-out;transition-property:background-color,transform,opacity;-webkit-tap-highlight-color:transparent;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;color:var(--black-900);background:var(--white);aspect-ratio:1/1}.ScrollControls__buttonCommon___rZcyK::-moz-focus-inner{border-style:none}.ScrollControls__buttonCommon___rZcyK:disabled{cursor:default;opacity:.3;pointer-events:none}.ScrollControls__buttonCommon___rZcyK:hover{background:var(--black-50)}.ScrollControls__buttonCommon___rZcyK:active,.ScrollControls__buttonCommon___rZcyK:focus-visible{background:var(--black-100)}.ScrollControls__buttonCommon___rZcyK:focus:not(:focus-visible){outline:0}.ScrollControls__prev___cF2KB{left:var(--pds-spacing-m)}.ScrollControls__next___9B-9g{right:var(--pds-spacing-m)}.ScrollControls__largeBoxShadow___a-AIU{box-shadow:0 4px 10px rgba(147,148,156,.4)}.ScrollControls__smallBoxShadow___EU4JE{box-shadow:0 0 6px rgba(147,148,156,.4)}.ScrollControls__iconPlaceholder___mOQTl{display:block;width:auto;height:100%;pointer-events:none;visibility:hidden}.ScrollControls__icon___lzBzL{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:auto;height:70%;max-height:24px;fill:currentColor;pointer-events:none}.ScrollControls__showOnHover___StbVV .ScrollControls__next___9B-9g{opacity:0;transform:translate(calc(100% + var(--pds-spacing-m)),-50%)}.ScrollControls__showOnHover___StbVV .ScrollControls__prev___cF2KB{opacity:0;transform:translate(calc(-100% - var(--pds-spacing-m)),-50%)}.ScrollControls__hideOnDisabled___IONkE:disabled{opacity:0;pointer-events:none}@media (hover:hover){.ScrollControls__showOnHover___StbVV:hover .ScrollControls__next___9B-9g{opacity:1;transform:translate(0,-50%)}.ScrollControls__showOnHover___StbVV:hover .ScrollControls__next___9B-9g:disabled{opacity:.3}.ScrollControls__showOnHover___StbVV:hover .ScrollControls__next___9B-9g.ScrollControls__hideOnDisabled___IONkE:disabled{opacity:0}.ScrollControls__showOnHover___StbVV:hover .ScrollControls__prev___cF2KB{opacity:1;transform:translate(0,-50%)}.ScrollControls__showOnHover___StbVV:hover .ScrollControls__prev___cF2KB:disabled{opacity:.3}.ScrollControls__showOnHover___StbVV:hover .ScrollControls__prev___cF2KB.ScrollControls__hideOnDisabled___IONkE:disabled{opacity:0}}

package/ScrollControls/cjs/style.development.v2.css

@@ -1 +1 @@
-.ScrollControls__root___5xFyd{position:relative;overflow:hidden}.ScrollControls__buttonCommon___kQ3-r{position:absolute;top:50%;transform:translateY(-50%);border:0;box-shadow:0 0 10px rgba(0,0,0,.08);height:66px;max-width:30px;max-height:50%;min-height:24px}.ScrollControls__buttonCommon___kQ3-r:disabled{opacity:.3;pointer-events:auto}.ScrollControls__buttonCommon___kQ3-r:active{background:var(--black-200)}.ScrollControls__prev___YhapL{left:0;margin-left:var(--pds-spacing-xs)}.ScrollControls__next___yCCvv{right:0;margin-right:var(--pds-spacing-xs)}.ScrollControls__icon___z7X7-{display:block;width:auto;height:24px;fill:currentColor;max-height:80%}.ScrollControls__showOnHover___PVtmJ .ScrollControls__next___yCCvv{right:-40px}.ScrollControls__showOnHover___PVtmJ .ScrollControls__prev___YhapL{left:-40px}.ScrollControls__hideOnDisabled___hwEsJ:disabled{opacity:0;pointer-events:none;visibility:hidden}@media (hover:hover){.ScrollControls__showOnHover___PVtmJ:hover .ScrollControls__next___yCCvv{right:0}.ScrollControls__showOnHover___PVtmJ:hover .ScrollControls__prev___YhapL{left:0}}
+.ScrollControls__root___5xFyd{position:relative;overflow:hidden}.ScrollControls__buttonCommon___kQ3-r{position:absolute;top:50%;transform:translate(0,-50%);border:0;border-radius:50%;height:75%;max-height:42px;transition:120ms ease-in-out;transition-property:background-color,transform,opacity;-webkit-tap-highlight-color:transparent;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;color:var(--black-900);background:var(--white);aspect-ratio:1/1}.ScrollControls__buttonCommon___kQ3-r::-moz-focus-inner{border-style:none}.ScrollControls__buttonCommon___kQ3-r:disabled{cursor:default;opacity:.3;pointer-events:none}.ScrollControls__buttonCommon___kQ3-r:hover{background:var(--black-50)}.ScrollControls__buttonCommon___kQ3-r:active,.ScrollControls__buttonCommon___kQ3-r:focus-visible{background:var(--black-100)}.ScrollControls__buttonCommon___kQ3-r:focus:not(:focus-visible){outline:0}.ScrollControls__prev___YhapL{left:var(--pds-spacing-m)}.ScrollControls__next___yCCvv{right:var(--pds-spacing-m)}.ScrollControls__largeBoxShadow___4Z-qq{box-shadow:0 4px 10px rgba(147,148,156,.4)}.ScrollControls__smallBoxShadow___ZAZeD{box-shadow:0 0 6px rgba(147,148,156,.4)}.ScrollControls__iconPlaceholder___XLACs{display:block;width:auto;height:100%;pointer-events:none;visibility:hidden}.ScrollControls__icon___z7X7-{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:auto;height:70%;max-height:24px;fill:currentColor;pointer-events:none}.ScrollControls__showOnHover___PVtmJ .ScrollControls__next___yCCvv{opacity:0;transform:translate(calc(100% + var(--pds-spacing-m)),-50%)}.ScrollControls__showOnHover___PVtmJ .ScrollControls__prev___YhapL{opacity:0;transform:translate(calc(-100% - var(--pds-spacing-m)),-50%)}.ScrollControls__hideOnDisabled___hwEsJ:disabled{opacity:0;pointer-events:none}@media (hover:hover){.ScrollControls__showOnHover___PVtmJ:hover .ScrollControls__next___yCCvv{opacity:1;transform:translate(0,-50%)}.ScrollControls__showOnHover___PVtmJ:hover .ScrollControls__next___yCCvv:disabled{opacity:.3}.ScrollControls__showOnHover___PVtmJ:hover .ScrollControls__next___yCCvv.ScrollControls__hideOnDisabled___hwEsJ:disabled{opacity:0}.ScrollControls__showOnHover___PVtmJ:hover .ScrollControls__prev___YhapL{opacity:1;transform:translate(0,-50%)}.ScrollControls__showOnHover___PVtmJ:hover .ScrollControls__prev___YhapL:disabled{opacity:.3}.ScrollControls__showOnHover___PVtmJ:hover .ScrollControls__prev___YhapL.ScrollControls__hideOnDisabled___hwEsJ:disabled{opacity:0}}

package/ScrollControls/cjs/style.production.css

@@ -1 +1 @@
-.mOlOq{position:relative;overflow:hidden}.rZcyK{position:absolute;top:50%;transform:translateY(-50%);border:0;box-shadow:0 0 10px rgba(0,0,0,.08);height:66px;max-width:30px;max-height:50%;min-height:24px}.rZcyK:disabled{opacity:.3;pointer-events:auto}.rZcyK:active{background:var(--black-200)}.cF2KB{left:0;margin-left:var(--pds-spacing-xs)}._9B-9g{right:0;margin-right:var(--pds-spacing-xs)}.lzBzL{display:block;width:auto;height:24px;fill:currentColor;max-height:80%}.StbVV ._9B-9g{right:-40px}.StbVV .cF2KB{left:-40px}.IONkE:disabled{opacity:0;pointer-events:none;visibility:hidden}@media (hover:hover){.StbVV:hover ._9B-9g{right:0}.StbVV:hover .cF2KB{left:0}}
+.mOlOq{position:relative;overflow:hidden}.rZcyK{position:absolute;top:50%;transform:translate(0,-50%);border:0;border-radius:50%;height:75%;max-height:42px;transition:120ms ease-in-out;transition-property:background-color,transform,opacity;-webkit-tap-highlight-color:transparent;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;color:var(--black-900);background:var(--white);aspect-ratio:1/1}.rZcyK::-moz-focus-inner{border-style:none}.rZcyK:disabled{cursor:default;opacity:.3;pointer-events:none}.rZcyK:hover{background:var(--black-50)}.rZcyK:active,.rZcyK:focus-visible{background:var(--black-100)}.rZcyK:focus:not(:focus-visible){outline:0}.cF2KB{left:var(--pds-spacing-m)}._9B-9g{right:var(--pds-spacing-m)}.a-AIU{box-shadow:0 4px 10px rgba(147,148,156,.4)}.EU4JE{box-shadow:0 0 6px rgba(147,148,156,.4)}.mOQTl{display:block;width:auto;height:100%;pointer-events:none;visibility:hidden}.lzBzL{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:auto;height:70%;max-height:24px;fill:currentColor;pointer-events:none}.StbVV ._9B-9g{opacity:0;transform:translate(calc(100% + var(--pds-spacing-m)),-50%)}.StbVV .cF2KB{opacity:0;transform:translate(calc(-100% - var(--pds-spacing-m)),-50%)}.IONkE:disabled{opacity:0;pointer-events:none}@media (hover:hover){.StbVV:hover ._9B-9g{opacity:1;transform:translate(0,-50%)}.StbVV:hover ._9B-9g:disabled{opacity:.3}.StbVV:hover ._9B-9g.IONkE:disabled{opacity:0}.StbVV:hover .cF2KB{opacity:1;transform:translate(0,-50%)}.StbVV:hover .cF2KB:disabled{opacity:.3}.StbVV:hover .cF2KB.IONkE:disabled{opacity:0}}

package/ScrollControls/cjs/style.production.v2.css

@@ -1 +1 @@
-._5xFyd{position:relative;overflow:hidden}.kQ3-r{position:absolute;top:50%;transform:translateY(-50%);border:0;box-shadow:0 0 10px rgba(0,0,0,.08);height:66px;max-width:30px;max-height:50%;min-height:24px}.kQ3-r:disabled{opacity:.3;pointer-events:auto}.kQ3-r:active{background:var(--black-200)}.YhapL{left:0;margin-left:var(--pds-spacing-xs)}.yCCvv{right:0;margin-right:var(--pds-spacing-xs)}.z7X7-{display:block;width:auto;height:24px;fill:currentColor;max-height:80%}.PVtmJ .yCCvv{right:-40px}.PVtmJ .YhapL{left:-40px}.hwEsJ:disabled{opacity:0;pointer-events:none;visibility:hidden}@media (hover:hover){.PVtmJ:hover .yCCvv{right:0}.PVtmJ:hover .YhapL{left:0}}
+._5xFyd{position:relative;overflow:hidden}.kQ3-r{position:absolute;top:50%;transform:translate(0,-50%);border:0;border-radius:50%;height:75%;max-height:42px;transition:120ms ease-in-out;transition-property:background-color,transform,opacity;-webkit-tap-highlight-color:transparent;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;color:var(--black-900);background:var(--white);aspect-ratio:1/1}.kQ3-r::-moz-focus-inner{border-style:none}.kQ3-r:disabled{cursor:default;opacity:.3;pointer-events:none}.kQ3-r:hover{background:var(--black-50)}.kQ3-r:active,.kQ3-r:focus-visible{background:var(--black-100)}.kQ3-r:focus:not(:focus-visible){outline:0}.YhapL{left:var(--pds-spacing-m)}.yCCvv{right:var(--pds-spacing-m)}._4Z-qq{box-shadow:0 4px 10px rgba(147,148,156,.4)}.ZAZeD{box-shadow:0 0 6px rgba(147,148,156,.4)}.XLACs{display:block;width:auto;height:100%;pointer-events:none;visibility:hidden}.z7X7-{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:auto;height:70%;max-height:24px;fill:currentColor;pointer-events:none}.PVtmJ .yCCvv{opacity:0;transform:translate(calc(100% + var(--pds-spacing-m)),-50%)}.PVtmJ .YhapL{opacity:0;transform:translate(calc(-100% - var(--pds-spacing-m)),-50%)}.hwEsJ:disabled{opacity:0;pointer-events:none}@media (hover:hover){.PVtmJ:hover .yCCvv{opacity:1;transform:translate(0,-50%)}.PVtmJ:hover .yCCvv:disabled{opacity:.3}.PVtmJ:hover .yCCvv.hwEsJ:disabled{opacity:0}.PVtmJ:hover .YhapL{opacity:1;transform:translate(0,-50%)}.PVtmJ:hover .YhapL:disabled{opacity:.3}.PVtmJ:hover .YhapL.hwEsJ:disabled{opacity:0}}

package/ScrollControls/index.d.ts

@@ -2,17 +2,15 @@ import * as React from 'react';
 export declare type ScrollControlsProps = React.ComponentProps<"div"> & {
     /** Принимает children как функцию, `(scrollRef) =>` */
     children: (ref: React.RefObject<HTMLElement>) => any;
-    /** Показывать при наведении */
+    /** Показывать кнопки при наведении */
     showOnHover?: boolean;
-    /** Скрыть если не активно */
+    /** Скрыть кнопку если не активная */
     hideOnDisabled?: boolean;
     /** Если передать `false` компонент перестанет работать */
     isActive?: boolean;
     onClickNext?: () => void;
     onClickPrev?: () => void;
-    /** Устанавливает цвет кнопок */
-    theme?: 'white' | 'gray';
     /** Устанавливает z-index кнопкам */
     zIndex?: number;
 };
-export declare const ScrollControls: React.ForwardRefExoticComponent<Pick<ScrollControlsProps, "hideOnDisabled" | "isActive" | "onClickNext" | "onClickPrev" | "showOnHover" | "zIndex" | "theme" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollControls: React.ForwardRefExoticComponent<Pick<ScrollControlsProps, "hideOnDisabled" | "isActive" | "onClickNext" | "onClickPrev" | "showOnHover" | "zIndex" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;

package/ScrollControls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/ScrollControls",
-  "version": "0.0.133",
+  "version": "0.0.141",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/SideOverlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/SideOverlay",
-  "version": "0.0.133",
+  "version": "0.0.141",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/SimpleSlider/cjs/index.development.js

@@ -6,8 +6,10 @@ var React = require('react');
 var Swipe = require('react-easy-swipe');
 var classNames = require('classnames');
 require('intersection-observer');
-var Button = require('@prom-ui/core/Button');
+var Icon = require('@prom-ui/core/Icon');
 var BodyProvider = require('@prom-ui/core/BodyProvider');
+var Left = require('@prom-ui/icons/Left');
+var Right = require('@prom-ui/icons/Right');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -127,19 +129,21 @@ var getTrackStyle = function (_a) {
   };
 };
 
-var css = {"root":"SimpleSlider__root___WuTIM","track":"SimpleSlider__track___G8BYu","trackItem":"SimpleSlider__trackItem___94Eq7","buttonCommon":"SimpleSlider__buttonCommon___I5yQD","buttonPrev":"SimpleSlider__buttonPrev___UqTOk SimpleSlider__buttonCommon___I5yQD","buttonNext":"SimpleSlider__buttonNext___BbLNv SimpleSlider__buttonCommon___I5yQD","buttonIcon":"SimpleSlider__buttonIcon___89h6n","showOnHoverButtons":"SimpleSlider__showOnHoverButtons___yssoj","dots":"SimpleSlider__dots___E7g4J","dotsTransparent":"SimpleSlider__dotsTransparent___v-ZWk","dotsItem":"SimpleSlider__dotsItem___cbWCu","dotsButton":"SimpleSlider__dotsButton___7N4yb","showOnHoverDots":"SimpleSlider__showOnHoverDots___ig5DV"};
+var css = {"root":"SimpleSlider__root___WuTIM","track":"SimpleSlider__track___G8BYu","trackItem":"SimpleSlider__trackItem___94Eq7","resetButton":"SimpleSlider__resetButton___LXJjI","buttonCommon":"SimpleSlider__buttonCommon___I5yQD SimpleSlider__resetButton___LXJjI","buttonPrev":"SimpleSlider__buttonPrev___UqTOk SimpleSlider__buttonCommon___I5yQD SimpleSlider__resetButton___LXJjI","buttonNext":"SimpleSlider__buttonNext___BbLNv SimpleSlider__buttonCommon___I5yQD SimpleSlider__resetButton___LXJjI","buttonIcon":"SimpleSlider__buttonIcon___89h6n","dots":"SimpleSlider__dots___E7g4J","dotsTransparent":"SimpleSlider__dotsTransparent___v-ZWk","dotsItem":"SimpleSlider__dotsItem___cbWCu","dotsButton":"SimpleSlider__dotsButton___7N4yb SimpleSlider__resetButton___LXJjI","showOnHoverButtons":"SimpleSlider__showOnHoverButtons___yssoj","showOnHoverDots":"SimpleSlider__showOnHoverDots___ig5DV"};
 
 var SimpleSlider = React__namespace.forwardRef(function (_a, ref) {
   var _b, _c;
-  var _d = _a.autoPlay,
-    autoPlay = _d === void 0 ? 0 : _d,
+  var _d = _a.showIndex,
+    showIndex = _d === void 0 ? 0 : _d,
+    _e = _a.autoPlay,
+    autoPlay = _e === void 0 ? 0 : _e,
     children = _a.children,
     className = _a.className,
-    _e = _a.duration,
-    duration = _e === void 0 ? 500 : _e,
+    _f = _a.duration,
+    duration = _f === void 0 ? 500 : _f,
     height = _a.height,
-    _f = _a.infinite,
-    infinite = _f === void 0 ? false : _f,
+    _g = _a.infinite,
+    infinite = _g === void 0 ? false : _g,
     ratio = _a.ratio,
     style = _a.style,
     width = _a.width,
@@ -150,25 +154,25 @@ var SimpleSlider = React__namespace.forwardRef(function (_a, ref) {
     onClickButtonPrev = _a.onClickButtonPrev,
     onSwipeNext = _a.onSwipeNext,
     onSwipePrev = _a.onSwipePrev,
-    _g = _a.showOnHoverButtons,
-    showOnHoverButtons = _g === void 0 ? false : _g,
-    _h = _a.showOnHoverDots,
-    showOnHoverDots = _h === void 0 ? false : _h,
-    _j = _a.isDotsTransparent,
-    isDotsTransparent = _j === void 0 ? false : _j,
-    props = __rest(_a, ["autoPlay", "children", "className", "duration", "height", "infinite", "ratio", "style", "width", "onChangeIndex", "onClickDot", "onClickItem", "onClickButtonNext", "onClickButtonPrev", "onSwipeNext", "onSwipePrev", "showOnHoverButtons", "showOnHoverDots", "isDotsTransparent"]);
+    _h = _a.showOnHoverButtons,
+    showOnHoverButtons = _h === void 0 ? false : _h,
+    _j = _a.showOnHoverDots,
+    showOnHoverDots = _j === void 0 ? false : _j,
+    _k = _a.isDotsTransparent,
+    isDotsTransparent = _k === void 0 ? false : _k,
+    props = __rest(_a, ["showIndex", "autoPlay", "children", "className", "duration", "height", "infinite", "ratio", "style", "width", "onChangeIndex", "onClickDot", "onClickItem", "onClickButtonNext", "onClickButtonPrev", "onSwipeNext", "onSwipePrev", "showOnHoverButtons", "showOnHoverDots", "isDotsTransparent"]);
   var t = BodyProvider.useBodyLocale().t;
   var refTrack = React__namespace.useRef(null);
   var transitionRunning = React__namespace.useRef(false);
-  var _k = React__namespace.useState(false),
-    disableAutoPlay = _k[0],
-    setDisableAutoPlay = _k[1];
-  var _l = React__namespace.useState({
-      index: 0,
+  var _l = React__namespace.useState(false),
+    disableAutoPlay = _l[0],
+    setDisableAutoPlay = _l[1];
+  var _m = React__namespace.useState({
+      index: showIndex,
       offset: undefined
     }),
-    position = _l[0],
-    setPosition = _l[1];
+    position = _m[0],
+    setPosition = _m[1];
   var childrenCount = React__namespace.Children.count(children);
   var childrenArray = React__namespace.Children.toArray(children);
   var isDisablePrev = !infinite && position.index === 0;
@@ -243,15 +247,15 @@ var SimpleSlider = React__namespace.forwardRef(function (_a, ref) {
       offset: offset
     });
   };
-  var _m = useAutoPlay(function () {
+  var _o = useAutoPlay(function () {
       if (transitionRunning.current || isDisableNext) return;
       setPosition({
         index: nextIndex,
         offset: undefined
       });
     }, autoPlay),
-    startAutoPlay = _m[0],
-    stopAutoPlay = _m[1];
+    startAutoPlay = _o[0],
+    stopAutoPlay = _o[1];
   var handleTransitionStart = function () {
     transitionRunning.current = true;
     stopAutoPlay();
@@ -293,6 +297,14 @@ var SimpleSlider = React__namespace.forwardRef(function (_a, ref) {
       autoPlayObserver.disconnect();
     };
   }, [position.index, isAutoPlay]);
+  React__namespace.useEffect(function () {
+    if (showIndex !== position.index) {
+      setPosition({
+        index: showIndex,
+        offset: undefined
+      });
+    }
+  }, [showIndex]);
   return React__namespace.createElement(Swipe__default["default"], __assign({
     ref: ref,
     onSwipeLeft: handleSwipeNext,
@@ -343,46 +355,36 @@ var SimpleSlider = React__namespace.forwardRef(function (_a, ref) {
     }, child);
   }), infinite && React__namespace.createElement("li", {
     className: css.trackItem
-  }, childrenArray[0])), isShowNavi && React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(Button.Button, {
+  }, childrenArray[0])), isShowNavi && React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement("button", {
     type: 'button',
     className: css.buttonPrev,
     onClick: handleClickButtonPrev,
     disabled: isDisablePrev,
     "aria-label": t(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u0431\u0430\u043D\u043D\u0435\u0440"], ["\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u0431\u0430\u043D\u043D\u0435\u0440"]))),
     "data-qaid": 'prev_image'
-  }, React__namespace.createElement("svg", {
+  }, React__namespace.createElement(Icon.Icon, {
     className: css.buttonIcon,
-    width: 18,
-    height: 18,
-    viewBox: '0 0 64 64',
-    xmlns: 'http://www.w3.org/2000/svg'
-  }, React__namespace.createElement("path", {
-    d: 'M41.625 60.375L16 32 41.625 3.625 48.5 10 28.375 32 48.5 54z'
-  }))), React__namespace.createElement(Button.Button, {
+    "icon-as": Left.Left
+  })), React__namespace.createElement("button", {
     type: 'button',
     className: css.buttonNext,
     onClick: handleClickButtonNext,
     disabled: isDisableNext,
     "aria-label": t(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u0431\u0430\u043D\u043D\u0435\u0440"], ["\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u0431\u0430\u043D\u043D\u0435\u0440"]))),
     "data-qaid": 'next_image'
-  }, React__namespace.createElement("svg", {
+  }, React__namespace.createElement(Icon.Icon, {
     className: css.buttonIcon,
-    width: 18,
-    height: 18,
-    viewBox: '0 0 64 64',
-    xmlns: 'http://www.w3.org/2000/svg'
-  }, React__namespace.createElement("path", {
-    d: 'M22.875 60.375L16 54l20.125-22L16 10l6.875-6.375L48.5 32z'
-  })))), isShowDots && React__namespace.createElement("ul", {
+    "icon-as": Right.Right
+  }))), isShowDots && React__namespace.createElement("ul", {
     className: classNames__default["default"](css.dots, (_c = {}, _c[css.dotsTransparent] = isDotsTransparent, _c))
   }, childrenArray.map(function (child, index) {
     var viewIndex = index + 1;
     return React__namespace.createElement("li", {
       className: css.dotsItem,
       key: child.key
-    }, React__namespace.createElement(Button.Button, {
-      className: css.dotsButton,
+    }, React__namespace.createElement("button", {
       type: 'button',
+      className: css.dotsButton,
       onClick: function () {
         return handleClickDot(index);
       },