@prom-ui/core 0.0.13 → 0.0.16

package/Portal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Portal",
-  "version": "0.0.13",
+  "version": "0.0.16",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {

package/Rating/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-require("./style.css");
+require('./style.css');
 
 Object.defineProperty(exports, '__esModule', { value: true });
 

package/Rating/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@prom-ui/core/Rating",
-  "version": "0.0.13",
+  "version": "0.0.16",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {
-    "evokit": "3.2.3"
+    "evokit": "^3.2.3"
   }
 }

package/Rating/style.css

@@ -1 +1,26 @@
-.Rating__ek-rating___fJb0G{display:block;-webkit-tap-highlight-color:transparent;box-sizing:border-box;height:1em;width:calc(1em*5)}.Rating__ek-rating___fJb0G:focus{outline:0}.Rating__ek-rating_size_small___YZP0u{height:14px;width:calc(14px*5)}.Rating__ek-rating_size_default___X0xeh{height:18px;width:calc(18px*5)}.Rating__ek-rating_size_big___fQ-Lk{height:22px;width:calc(22px*5)}
+.Rating__ek-rating___fJb0G {
+    display: block;
+    -webkit-tap-highlight-color: transparent;
+    box-sizing: border-box;
+    height: 1em;
+    width: calc(1em * 5)
+}
+
+.Rating__ek-rating___fJb0G:focus {
+        outline: none;
+    }
+
+.Rating__ek-rating_size_small___YZP0u {
+    height: 14px;
+    width: calc(14px * 5);
+}
+
+.Rating__ek-rating_size_default___X0xeh {
+    height: 18px;
+    width: calc(18px * 5);
+}
+
+.Rating__ek-rating_size_big___fQ-Lk {
+    height: 22px;
+    width: calc(22px * 5);
+}

package/Scroll/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-require("./style.css");
+require('./style.css');
 
 Object.defineProperty(exports, '__esModule', { value: true });
 

package/Scroll/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@prom-ui/core/Scroll",
-  "version": "0.0.13",
+  "version": "0.0.16",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {
-    "evokit": "3.2.3"
+    "evokit": "^3.2.3"
   }
 }

package/Scroll/style.css

@@ -1 +1,169 @@
-.Scroll__ek-scroll___m6Vr5{display:flex;flex-wrap:nowrap;flex-direction:row;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;list-style:none;padding:0;margin:0;box-sizing:border-box}.Scroll__ek-scroll___m6Vr5::after,.Scroll__ek-scroll___m6Vr5::before{content:"";align-self:normal}.Scroll__ek-scroll__item___bfetG{margin:0;padding:0;flex:0 0 auto;box-sizing:border-box}.Scroll__ek-scroll__item_blackhole_width-fit-content___k-fNo{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.Scroll__ek-scroll__item_blackhole_width-max-content___s8gGl{width:-webkit-max-content;width:-moz-max-content;width:max-content}.Scroll__ek-scroll_padding_xxs___9vZpV::after,.Scroll__ek-scroll_padding_xxs___9vZpV::before{flex:0 0 var(--pds-spacing-xxs)}.Scroll__ek-scroll_padding_xs___L5kMA::after,.Scroll__ek-scroll_padding_xs___L5kMA::before{flex:0 0 var(--pds-spacing-xs)}.Scroll__ek-scroll_padding_s___Nr3Ig::after,.Scroll__ek-scroll_padding_s___Nr3Ig::before{flex:0 0 var(--pds-spacing-s)}.Scroll__ek-scroll_padding_m___hcRCz::after,.Scroll__ek-scroll_padding_m___hcRCz::before{flex:0 0 var(--pds-spacing-m)}.Scroll__ek-scroll_padding_l___SKeiS::after,.Scroll__ek-scroll_padding_l___SKeiS::before{flex:0 0 var(--pds-spacing-l)}.Scroll__ek-scroll_padding_xl___MG4J-::after,.Scroll__ek-scroll_padding_xl___MG4J-::before{flex:0 0 var(--pds-spacing-xl)}.Scroll__ek-scroll_padding_xxl___m8ou2::after,.Scroll__ek-scroll_padding_xxl___m8ou2::before{flex:0 0 var(--pds-spacing-xxl)}.Scroll__ek-scroll_padding_3xl___xy72W::after,.Scroll__ek-scroll_padding_3xl___xy72W::before{flex:0 0 var(--pds-spacing-3xl)}.Scroll__ek-scroll_padding_4xl___gzW-I::after,.Scroll__ek-scroll_padding_4xl___gzW-I::before{flex:0 0 var(--pds-spacing-4xl)}.Scroll__ek-scroll_padding_5xl___JErmt::after,.Scroll__ek-scroll_padding_5xl___JErmt::before{flex:0 0 var(--pds-spacing-5xl)}.Scroll__ek-scroll_column_1___n5mTi>.Scroll__ek-scroll__item___bfetG{flex-basis:calc(100%/1);min-width:0}.Scroll__ek-scroll_column_2___GqdmF>.Scroll__ek-scroll__item___bfetG{flex-basis:calc(100%/2);min-width:0}.Scroll__ek-scroll_column_3___DKZCp>.Scroll__ek-scroll__item___bfetG{flex-basis:calc(100%/3);min-width:0}.Scroll__ek-scroll_column_4___-Nf-L>.Scroll__ek-scroll__item___bfetG{flex-basis:calc(100%/4);min-width:0}.Scroll__ek-scroll_column_5___OxDq->.Scroll__ek-scroll__item___bfetG{flex-basis:calc(100%/5);min-width:0}.Scroll__ek-scroll_column_6___wP8Pu>.Scroll__ek-scroll__item___bfetG{flex-basis:calc(100%/6);min-width:0}.Scroll__ek-scroll_column_7___-ZDSB>.Scroll__ek-scroll__item___bfetG{flex-basis:calc(100%/7);min-width:0}.Scroll__ek-scroll_column_8___PnnsU>.Scroll__ek-scroll__item___bfetG{flex-basis:calc(100%/8);min-width:0}.Scroll__ek-scroll_column_9___DDqgb>.Scroll__ek-scroll__item___bfetG{flex-basis:calc(100%/9);min-width:0}.Scroll__ek-scroll_column_10___Hh-uZ>.Scroll__ek-scroll__item___bfetG{flex-basis:calc(100%/10);min-width:0}.Scroll__ek-scroll_gap_xxs___15vfK>.Scroll__ek-scroll__item___bfetG+.Scroll__ek-scroll__item___bfetG{margin-left:var(--pds-spacing-xxs)}.Scroll__ek-scroll_gap_xs___Kvr2J>.Scroll__ek-scroll__item___bfetG+.Scroll__ek-scroll__item___bfetG{margin-left:var(--pds-spacing-xs)}.Scroll__ek-scroll_gap_s___71-or>.Scroll__ek-scroll__item___bfetG+.Scroll__ek-scroll__item___bfetG{margin-left:var(--pds-spacing-s)}.Scroll__ek-scroll_gap_m___glUvB>.Scroll__ek-scroll__item___bfetG+.Scroll__ek-scroll__item___bfetG{margin-left:var(--pds-spacing-m)}.Scroll__ek-scroll_gap_l___pQC7Z>.Scroll__ek-scroll__item___bfetG+.Scroll__ek-scroll__item___bfetG{margin-left:var(--pds-spacing-l)}.Scroll__ek-scroll_gap_xl___L1iAD>.Scroll__ek-scroll__item___bfetG+.Scroll__ek-scroll__item___bfetG{margin-left:var(--pds-spacing-xl)}.Scroll__ek-scroll_gap_xxl___wVNm->.Scroll__ek-scroll__item___bfetG+.Scroll__ek-scroll__item___bfetG{margin-left:var(--pds-spacing-xxl)}.Scroll__ek-scroll_gap_3xl___4tQXK>.Scroll__ek-scroll__item___bfetG+.Scroll__ek-scroll__item___bfetG{margin-left:var(--pds-spacing-3xl)}.Scroll__ek-scroll_gap_4xl___1-5dw>.Scroll__ek-scroll__item___bfetG+.Scroll__ek-scroll__item___bfetG{margin-left:var(--pds-spacing-4xl)}.Scroll__ek-scroll_gap_5xl___ym2qM>.Scroll__ek-scroll__item___bfetG+.Scroll__ek-scroll__item___bfetG{margin-left:var(--pds-spacing-5xl)}.Scroll__ek-scroll_bar_none___c1gVV{-ms-overflow-style:none;scrollbar-width:none}.Scroll__ek-scroll_bar_none___c1gVV::-webkit-scrollbar{display:none}.Scroll__ek-scroll_bar_auto___-TbaH{-ms-overflow-style:auto;scrollbar-width:auto}.Scroll__ek-scroll_bar_auto___-TbaH::-webkit-scrollbar{display:auto}.Scroll__ek-scroll_align_normal___zoDjM{align-items:normal}.Scroll__ek-scroll_align_start___4mACC{align-items:flex-start}.Scroll__ek-scroll_align_center___3PWHW{align-items:center}.Scroll__ek-scroll_align_end___AwLLA{align-items:flex-end}
+.Scroll__ek-scroll___m6Vr5 {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box
+}
+.Scroll__ek-scroll___m6Vr5::after,
+    .Scroll__ek-scroll___m6Vr5::before {
+        content: "";
+        align-self: normal;
+    }
+.Scroll__ek-scroll__item___bfetG {
+    margin: 0;
+    padding: 0;
+    flex: 0 0 auto;
+    box-sizing: border-box;
+}
+.Scroll__ek-scroll__item_blackhole_width-fit-content___k-fNo {
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+}
+.Scroll__ek-scroll__item_blackhole_width-max-content___s8gGl {
+    width: -webkit-max-content;
+    width: -moz-max-content;
+    width: max-content;
+}
+.Scroll__ek-scroll_padding_xxs___9vZpV::after,
+    .Scroll__ek-scroll_padding_xxs___9vZpV::before {
+        flex: 0 0 var(--pds-spacing-xxs);
+    }
+.Scroll__ek-scroll_padding_xs___L5kMA::after,
+    .Scroll__ek-scroll_padding_xs___L5kMA::before {
+        flex: 0 0 var(--pds-spacing-xs);
+    }
+.Scroll__ek-scroll_padding_s___Nr3Ig::after,
+    .Scroll__ek-scroll_padding_s___Nr3Ig::before {
+        flex: 0 0 var(--pds-spacing-s);
+    }
+.Scroll__ek-scroll_padding_m___hcRCz::after,
+    .Scroll__ek-scroll_padding_m___hcRCz::before {
+        flex: 0 0 var(--pds-spacing-m);
+    }
+.Scroll__ek-scroll_padding_l___SKeiS::after,
+    .Scroll__ek-scroll_padding_l___SKeiS::before {
+        flex: 0 0 var(--pds-spacing-l);
+    }
+.Scroll__ek-scroll_padding_xl___MG4J-::after,
+    .Scroll__ek-scroll_padding_xl___MG4J-::before {
+        flex: 0 0 var(--pds-spacing-xl);
+    }
+.Scroll__ek-scroll_padding_xxl___m8ou2::after,
+    .Scroll__ek-scroll_padding_xxl___m8ou2::before {
+        flex: 0 0 var(--pds-spacing-xxl);
+    }
+.Scroll__ek-scroll_padding_3xl___xy72W::after,
+    .Scroll__ek-scroll_padding_3xl___xy72W::before {
+        flex: 0 0 var(--pds-spacing-3xl);
+    }
+.Scroll__ek-scroll_padding_4xl___gzW-I::after,
+    .Scroll__ek-scroll_padding_4xl___gzW-I::before {
+        flex: 0 0 var(--pds-spacing-4xl);
+    }
+.Scroll__ek-scroll_padding_5xl___JErmt::after,
+    .Scroll__ek-scroll_padding_5xl___JErmt::before {
+        flex: 0 0 var(--pds-spacing-5xl);
+    }
+.Scroll__ek-scroll_column_1___n5mTi > .Scroll__ek-scroll__item___bfetG {
+        flex-basis: calc(100% / 1);
+        min-width: 0;
+    }
+.Scroll__ek-scroll_column_2___GqdmF > .Scroll__ek-scroll__item___bfetG {
+        flex-basis: calc(100% / 2);
+        min-width: 0;
+    }
+.Scroll__ek-scroll_column_3___DKZCp > .Scroll__ek-scroll__item___bfetG {
+        flex-basis: calc(100% / 3);
+        min-width: 0;
+    }
+.Scroll__ek-scroll_column_4___-Nf-L > .Scroll__ek-scroll__item___bfetG {
+        flex-basis: calc(100% / 4);
+        min-width: 0;
+    }
+.Scroll__ek-scroll_column_5___OxDq- > .Scroll__ek-scroll__item___bfetG {
+        flex-basis: calc(100% / 5);
+        min-width: 0;
+    }
+.Scroll__ek-scroll_column_6___wP8Pu > .Scroll__ek-scroll__item___bfetG {
+        flex-basis: calc(100% / 6);
+        min-width: 0;
+    }
+.Scroll__ek-scroll_column_7___-ZDSB > .Scroll__ek-scroll__item___bfetG {
+        flex-basis: calc(100% / 7);
+        min-width: 0;
+    }
+.Scroll__ek-scroll_column_8___PnnsU > .Scroll__ek-scroll__item___bfetG {
+        flex-basis: calc(100% / 8);
+        min-width: 0;
+    }
+.Scroll__ek-scroll_column_9___DDqgb > .Scroll__ek-scroll__item___bfetG {
+        flex-basis: calc(100% / 9);
+        min-width: 0;
+    }
+.Scroll__ek-scroll_column_10___Hh-uZ > .Scroll__ek-scroll__item___bfetG {
+        flex-basis: calc(100% / 10);
+        min-width: 0;
+    }
+.Scroll__ek-scroll_gap_xxs___15vfK > .Scroll__ek-scroll__item___bfetG + .Scroll__ek-scroll__item___bfetG {
+        margin-left: var(--pds-spacing-xxs);
+    }
+.Scroll__ek-scroll_gap_xs___Kvr2J > .Scroll__ek-scroll__item___bfetG + .Scroll__ek-scroll__item___bfetG {
+        margin-left: var(--pds-spacing-xs);
+    }
+.Scroll__ek-scroll_gap_s___71-or > .Scroll__ek-scroll__item___bfetG + .Scroll__ek-scroll__item___bfetG {
+        margin-left: var(--pds-spacing-s);
+    }
+.Scroll__ek-scroll_gap_m___glUvB > .Scroll__ek-scroll__item___bfetG + .Scroll__ek-scroll__item___bfetG {
+        margin-left: var(--pds-spacing-m);
+    }
+.Scroll__ek-scroll_gap_l___pQC7Z > .Scroll__ek-scroll__item___bfetG + .Scroll__ek-scroll__item___bfetG {
+        margin-left: var(--pds-spacing-l);
+    }
+.Scroll__ek-scroll_gap_xl___L1iAD > .Scroll__ek-scroll__item___bfetG + .Scroll__ek-scroll__item___bfetG {
+        margin-left: var(--pds-spacing-xl);
+    }
+.Scroll__ek-scroll_gap_xxl___wVNm- > .Scroll__ek-scroll__item___bfetG + .Scroll__ek-scroll__item___bfetG {
+        margin-left: var(--pds-spacing-xxl);
+    }
+.Scroll__ek-scroll_gap_3xl___4tQXK > .Scroll__ek-scroll__item___bfetG + .Scroll__ek-scroll__item___bfetG {
+        margin-left: var(--pds-spacing-3xl);
+    }
+.Scroll__ek-scroll_gap_4xl___1-5dw > .Scroll__ek-scroll__item___bfetG + .Scroll__ek-scroll__item___bfetG {
+        margin-left: var(--pds-spacing-4xl);
+    }
+.Scroll__ek-scroll_gap_5xl___ym2qM > .Scroll__ek-scroll__item___bfetG + .Scroll__ek-scroll__item___bfetG {
+        margin-left: var(--pds-spacing-5xl);
+    }
+.Scroll__ek-scroll_bar_none___c1gVV {
+    -ms-overflow-style: none; /* for Internet Explorer, Edge */
+    scrollbar-width: none /* for Firefox */
+}
+.Scroll__ek-scroll_bar_none___c1gVV::-webkit-scrollbar {
+        display: none;
+    }
+.Scroll__ek-scroll_bar_auto___-TbaH {
+    -ms-overflow-style: auto; /* for Internet Explorer, Edge */
+    scrollbar-width: auto /* for Firefox */
+}
+.Scroll__ek-scroll_bar_auto___-TbaH::-webkit-scrollbar {
+        display: auto; /* stylelint-disable-line csstree/validator */
+    }
+.Scroll__ek-scroll_align_normal___zoDjM {
+    align-items: normal;
+}
+.Scroll__ek-scroll_align_start___4mACC {
+    align-items: flex-start;
+}
+.Scroll__ek-scroll_align_center___3PWHW {
+    align-items: center;
+}
+.Scroll__ek-scroll_align_end___AwLLA {
+    align-items: flex-end;
+}

package/ScrollControls/ScrollControlsButton.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare type tScrollControlsButton = {
+    hideOnDisabled?: boolean;
+    children?: any;
+    isActive?: boolean;
+    onClickNext?: () => void;
+    onClickPrev?: () => void;
+    theme?: 'white' | 'gray';
+    zIndex?: number;
+    scrollRef: React.RefObject<HTMLElement>;
+};
+export declare const ScrollControlsButton: React.FC<tScrollControlsButton>;

package/ScrollControls/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { tScrollControlsButton } from './ScrollControlsButton';
+export declare type tScrollControls = tScrollControlsButton & {
+    className?: string;
+    children: (ref: React.RefObject<HTMLElement>) => void;
+    showOnHover?: boolean;
+};
+export declare const ScrollControls: React.FC<tScrollControls>;

package/ScrollControls/index.js

@@ -0,0 +1,250 @@
+'use strict';
+
+require('./style.css');
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var classNames = require('classnames');
+var ttag = require('ttag');
+var Button = require('@prom-ui/core/Button');
+var Icon = require('@prom-ui/core/Icon');
+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 }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __makeTemplateObject(cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+}
+
+var css = {"root":"ScrollControls__root___mOlOq","buttonCommon":"ScrollControls__buttonCommon___rZcyK","prev":"ScrollControls__prev___cF2KB ScrollControls__buttonCommon___rZcyK","next":"ScrollControls__next___9B-9g ScrollControls__buttonCommon___rZcyK","icon":"ScrollControls__icon___lzBzL","showOnHover":"ScrollControls__showOnHover___StbVV","hideOnDisabled":"ScrollControls__hideOnDisabled___IONkE"};
+
+var DIRECTION_NEXT = 1;
+var DIRECTION_PREV = -1;
+var CONTROLS_UPDATE_DELAY = 100;
+var ScrollControlsButton = function (_a) {
+  var _b, _c;
+
+  var scrollRef = _a.scrollRef,
+      _d = _a.hideOnDisabled,
+      hideOnDisabled = _d === void 0 ? false : _d,
+      _e = _a.isActive,
+      isActive = _e === void 0 ? true : _e,
+      onClickNext = _a.onClickNext,
+      onClickPrev = _a.onClickPrev,
+      zIndex = _a.zIndex,
+      _f = _a.theme,
+      theme = _f === void 0 ? 'white' : _f,
+      children = _a.children;
+  var updateControlsTimer = React.useRef(null);
+
+  var _g = React.useState({
+    prev: false,
+    next: false
+  }),
+      controlsVisible = _g[0],
+      setControlsVisible = _g[1];
+
+  var updateControlsVisible = function (nextScrollLeft) {
+    var _a = scrollRef.current,
+        scrollLeft = _a.scrollLeft,
+        scrollWidth = _a.scrollWidth,
+        clientWidth = _a.clientWidth;
+    var currentScrollLeft = (Number.isInteger(nextScrollLeft) ? nextScrollLeft : scrollLeft) || 0;
+    setControlsVisible({
+      prev: currentScrollLeft > 1,
+      next: currentScrollLeft < scrollWidth - clientWidth
+    });
+  };
+
+  var updateScrollLeft = function (direction) {
+    var _a = scrollRef.current,
+        scrollLeft = _a.scrollLeft,
+        clientWidth = _a.clientWidth;
+    var offset = clientWidth * direction;
+    updateControlsVisible(scrollLeft + offset);
+    requestAnimationFrame(function () {
+      if (scrollRef.current) {
+        scrollRef.current.scrollBy({
+          left: offset,
+          behavior: 'smooth'
+        });
+      }
+    });
+  };
+
+  var handleOnClickPrev = function () {
+    if (typeof onClickPrev === 'function') {
+      onClickPrev();
+    }
+
+    updateScrollLeft(DIRECTION_PREV);
+  };
+
+  var handleOnClickNext = function () {
+    if (typeof onClickNext === 'function') {
+      onClickNext();
+    }
+
+    updateScrollLeft(DIRECTION_NEXT);
+  };
+
+  var handleOnScroll = function () {
+    if (updateControlsTimer.current) {
+      clearTimeout(updateControlsTimer.current);
+    }
+
+    updateControlsTimer.current = setTimeout(updateControlsVisible, CONTROLS_UPDATE_DELAY);
+  };
+
+  React.useEffect(function () {
+    if (scrollRef.current && isActive) {
+      updateControlsVisible();
+      scrollRef.current.addEventListener('scroll', handleOnScroll);
+    }
+
+    return function () {
+      if (scrollRef.current && isActive) {
+        scrollRef.current.removeEventListener('scroll', handleOnScroll);
+      }
+    };
+  }, [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)),
+      onClick: handleOnClickPrev,
+      style: {
+        zIndex: zIndex
+      },
+      disabled: !controlsVisible.prev,
+      title: ttag.t(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\u041D\u0430\u0437\u0430\u0434"], ["\u041D\u0430\u0437\u0430\u0434"])))
+    }, 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)),
+      onClick: handleOnClickNext,
+      style: {
+        zIndex: zIndex
+      },
+      disabled: !controlsVisible.next,
+      title: ttag.t(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\u0414\u0430\u043B\u0435\u0435"], ["\u0414\u0430\u043B\u0435\u0435"])))
+    }, React__default["default"].createElement(Icon.Icon, {
+      className: css.icon,
+      "icon-as": Right.Right
+    })));
+  }
+
+  return null;
+};
+var templateObject_1, templateObject_2;
+
+var ScrollControls = React.forwardRef(function (_a, ref) {
+  var _b;
+
+  var children = _a.children,
+      className = _a.className,
+      _c = _a.hideOnDisabled,
+      hideOnDisabled = _c === void 0 ? false : _c,
+      _d = _a.isActive,
+      isActive = _d === void 0 ? true : _d,
+      onClickNext = _a.onClickNext,
+      onClickPrev = _a.onClickPrev,
+      _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"]);
+
+  var scrollRef = React.useRef(null);
+  return React__default["default"].createElement("div", __assign({
+    ref: ref,
+    className: classNames__default["default"](css.root, className, (_b = {}, _b[css.showOnHover] = showOnHover, _b))
+  }, props), children(scrollRef), React__default["default"].createElement(ScrollControlsButton, {
+    scrollRef: scrollRef,
+    hideOnDisabled: hideOnDisabled,
+    isActive: isActive,
+    onClickNext: onClickNext,
+    onClickPrev: onClickPrev,
+    zIndex: zIndex,
+    theme: theme
+  }, children));
+});
+ScrollControls.propTypes = {
+  /** Принимает children как функцию, `(scrollRef) =>` */
+  // children: PropTypes.func.isRequired,
+
+  /** Если передать `false` компонент перестанет работать */
+  isActive: PropTypes__default["default"].bool,
+  onClickNext: PropTypes__default["default"].func,
+  onClickPrev: PropTypes__default["default"].func,
+
+  /** Показывать при наведении */
+  showOnHover: PropTypes__default["default"].bool,
+
+  /** Скрыть если не активно */
+  hideOnDisabled: PropTypes__default["default"].bool,
+
+  /** Устанавливает z-index кнопкам */
+  zIndex: PropTypes__default["default"].number,
+
+  /** Устанавливает цвет кнопок */
+  theme: PropTypes__default["default"].oneOf(['white', 'gray'])
+};
+
+exports.ScrollControls = ScrollControls;

package/ScrollControls/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@prom-ui/core/ScrollControls",
+  "version": "0.0.16",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "dependencies": {
+    "@prom-ui/icons": "^0.0.5",
+    "classnames": "^2.3.1",
+    "ttag": "^1.7.24"
+  }
+}

package/ScrollControls/style.css

@@ -0,0 +1,67 @@
+.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;
+            }
+}

package/Skeleton/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-require("./style.css");
+require('./style.css');
 
 Object.defineProperty(exports, '__esModule', { value: true });
 

package/Skeleton/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@prom-ui/core/Skeleton",
-  "version": "0.0.13",
+  "version": "0.0.16",
   "main": "index.js",
   "types": "index.d.ts",
   "dependencies": {
-    "evokit": "3.2.3"
+    "evokit": "^3.2.3"
   }
 }