ecomlab-components-next 0.1.183 → 0.1.185

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,83 @@
+"use strict";
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("./Checkbox.scss");
+var _excluded = ["id", "value", "onChange", "containerClassName", "inputClassName", "className", "children", "green", "yellow", "red", "grey", "disabled", "stopPropagation"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _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; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+var Checkbox = function Checkbox(_ref) {
+  var id = _ref.id,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    containerClassName = _ref.containerClassName,
+    inputClassName = _ref.inputClassName,
+    className = _ref.className,
+    children = _ref.children,
+    _ref$green = _ref.green,
+    green = _ref$green === void 0 ? false : _ref$green,
+    _ref$yellow = _ref.yellow,
+    yellow = _ref$yellow === void 0 ? false : _ref$yellow,
+    _ref$red = _ref.red,
+    red = _ref$red === void 0 ? false : _ref$red,
+    _ref$grey = _ref.grey,
+    grey = _ref$grey === void 0 ? false : _ref$grey,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$stopPropagation = _ref.stopPropagation,
+    stopPropagation = _ref$stopPropagation === void 0 ? true : _ref$stopPropagation,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = (0, _react.useState)(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    _value = _useState2[0],
+    set_value = _useState2[1];
+  var _onChange = function _onChange(e) {
+    set_value(e.target.checked);
+    if (onChange) {
+      onChange(e.target.checked);
+    }
+  };
+  var colorCheckbox = function colorCheckbox() {
+    if (green) return 'checkbox-container_green';
+    if (red) return 'checkbox-container_red';
+    if (grey) return 'checkbox-container_grey';
+    if (yellow) return 'checkbox-container_yellow';
+  };
+  (0, _react.useEffect)(function () {
+    set_value(value);
+  }, [value]);
+  return /*#__PURE__*/_react["default"].createElement("label", {
+    onClick: function onClick(e) {
+      if (stopPropagation) {
+        e.stopPropagation();
+      }
+    },
+    className: "checkbox-container ".concat(colorCheckbox() || '', " ").concat(containerClassName ? containerClassName : "")
+  }, /*#__PURE__*/_react["default"].createElement("input", _extends({
+    type: "checkbox",
+    disabled: disabled,
+    id: id,
+    className: "checkbox " + (inputClassName ? inputClassName : ""),
+    checked: _value,
+    onChange: _onChange
+  }, props)), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "checkbox-element " + (className ? className : "")
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "checkbox-container__text"
+  }, " ", children));
+};
+var _default = exports["default"] = Checkbox;

package/dist/components/Checkbox/Checkbox.scss

@@ -0,0 +1,136 @@
+.checkbox-container,
+.checkbox-container_green,
+.checkbox-container_red,
+.checkbox-container_yellow,
+.checkbox-container_grey {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    cursor: pointer;
+
+    &__text {
+        color: #0B110B;
+        font-family: NunitoSans;
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 15px;
+        overflow: hidden;
+    }
+
+    .checkbox-element {
+        display: inline-block;
+        font-family: 'Montserrat';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 11px;
+        line-height: 15px;
+        vertical-align: middle;
+
+        &::before {
+            content: "";
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            left: 344px;
+            top: 321px;
+            // authorization box differences
+            border: none;
+            border: 1px solid #C5D3C5;
+            background-color: #fff;
+            border-radius: 4px;
+            vertical-align: middle;
+        }
+    }
+
+    .checkbox {
+        opacity: 0;
+        position: fixed;
+        width: 1px;
+        height: 1px;
+        clip: rect(1px, 1px, 1px, 1px);
+
+        &:checked~.checkbox-element::before {
+            background-image: url('./img/check.svg');
+            background-position: center;
+            background-size: 10px;
+            background-color: #0009E8;
+            vertical-align: middle;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+    }
+}
+
+// Green checkbox
+.checkbox-container_green {
+
+    .checkbox-element {
+        &::before {
+            border: 1px solid #83E38C;
+            background-color: #F0FFF1;
+        }
+    }
+
+    .checkbox {
+
+        &:checked~.checkbox-element::before {
+            background-color: #83E38C;
+        }
+    }
+}
+
+// Grey checkbox
+.checkbox-container_grey {
+
+    .checkbox-element {
+        &::before {
+            border: 1px solid #9199A5;
+            background-color: #F0F2F4;
+        }
+    }
+
+    .checkbox {
+
+        &:checked~.checkbox-element::before {
+            background-color: #9199A5;
+        }
+    }
+}
+
+// Red checkbox
+.checkbox-container_red {
+
+    .checkbox-element {
+        &::before {
+            border: 1px solid #FF7E7E;
+            background-color: #FFF0F0;
+        }
+    }
+
+    .checkbox {
+
+        &:checked~.checkbox-element::before {
+            background-color: #FF7E7E;
+        }
+    }
+}
+
+// Yellow checkbox
+.checkbox-container_yellow {
+
+    .checkbox-element {
+        &::before {
+            border: 1px solid #FFDC75;
+            background-color: #FFFDF0;
+        }
+    }
+
+    .checkbox {
+
+        &:checked~.checkbox-element::before {
+            background-color: #FFDC75;
+        }
+    }
+}

package/dist/components/Checkbox/Checkbox.stories.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+var _addonActions = require("@storybook/addon-actions");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _default = exports["default"] = {
+  title: 'Checkbox',
+  component: _Checkbox["default"],
+  args: {
+    id: 1,
+    value: true,
+    onChange: (0, _addonActions.action)('onChange'),
+    containerClassName: 'test-c',
+    inputClassName: 'test-i',
+    className: 'test',
+    children: /*#__PURE__*/React.createElement("span", null, "test"),
+    uncontrolled: false
+  }
+};
+var Default = exports.Default = {
+  render: function render(args) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '10px',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100%'
+      }
+    }, /*#__PURE__*/React.createElement(_Checkbox["default"], args), /*#__PURE__*/React.createElement(_Checkbox["default"], _extends({
+      green: true
+    }, args)), /*#__PURE__*/React.createElement(_Checkbox["default"], _extends({
+      grey: true
+    }, args)), /*#__PURE__*/React.createElement(_Checkbox["default"], _extends({
+      yellow: true
+    }, args)), /*#__PURE__*/React.createElement(_Checkbox["default"], _extends({
+      red: true
+    }, args)));
+  }
+};

package/dist/components/Checkbox/img/check.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M8.33268 1.5L3.74935 6.08333L1.66602 4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/components/Inputs/DropDownSelector/DownSelector.js

@@ -10,7 +10,7 @@ var _reactSelect = _interopRequireWildcard(require("react-select"));
 var _close_icon = _interopRequireDefault(require("./img/close_icon.svg"));
 var _close_icon_disabled = _interopRequireDefault(require("./img/close_icon_disabled.svg"));
 var _async = _interopRequireDefault(require("react-select/async"));
-var _Checkbox = _interopRequireDefault(require("../../Checkbox/Checkbox/Checkbox"));
+var _Checkbox = _interopRequireDefault(require("../../Checkbox/Checkbox"));
 require("./DropdownSelector.scss");
 var _excluded = ["taskOptions", "err", "options_prop", "setState", "placeholder", "className", "style", "multi", "name", "isClearable", "isSearchable", "disabled", "defaultValue", "state", "loadOptions", "showIndicator", "icon", "iconPlaceholder", "id", "fetchCallback", "setInputChange", "queryValue", "range", "noUpwardPaging", "resetPageOnChange", "tooltip", "color", "size", "width", "required", "lang", "refPosition", "minMenuHeight", "positionMenu", "onBlur", "all", "onClickSingle"],
   _excluded2 = ["index", "getValue"];

package/dist/components/Inputs/InputDynamicWidth/InputDynamicWidth.js

@@ -0,0 +1,98 @@
+"use strict";
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _close_icon = _interopRequireDefault(require("./img/close_icon.svg"));
+require("./InputDynamicWidth.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var InputDynamicWidth = /*#__PURE__*/_react["default"].memo(function (_ref) {
+  var onChange = _ref.onChange,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Поиск' : _ref$placeholder,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? false : _ref$maxWidth,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'right' : _ref$position,
+    _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    _ref$child = _ref.child,
+    child = _ref$child === void 0 ? true : _ref$child,
+    value = _ref.value,
+    setOpenDrop = _ref.setOpenDrop,
+    isFeedback = _ref.isFeedback,
+    clearDependence = _ref.clearDependence,
+    _ref$border = _ref.border,
+    border = _ref$border === void 0 ? true : _ref$border;
+  var _useState = (0, _react.useState)(value || ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    valueInside = _useState2[0],
+    setValueInside = _useState2[1];
+  var _useState3 = (0, _react.useState)(isOpen || !!value),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isFocus = _useState4[0],
+    setIsFocus = _useState4[1];
+  var handleChange = (0, _react.useCallback)(function (e) {
+    var newValue = e.target.value;
+    setValueInside(newValue);
+    if (onChange) onChange(newValue);
+  }, [onChange]);
+  var handleClear = (0, _react.useCallback)(function () {
+    setValueInside('');
+    if (onChange) onChange('');
+    if (!isOpen) setIsFocus(false);
+  }, [isOpen]);
+  (0, _react.useEffect)(function () {
+    setValueInside(value || '');
+  }, [value]);
+  (0, _react.useEffect)(function () {
+    if (clearDependence) {
+      setValueInside('');
+    }
+  }, [clearDependence]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "input-dynamic-width-bar",
+    style: {
+      justifyContent: position === 'left' ? 'end' : ''
+    },
+    onClick: function onClick() {
+      return setIsFocus(true);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    type: "text",
+    inputMode: "text",
+    placeholder: placeholder,
+    className: isFocus || value ? "input-dynamic-width-bar__search_active" : "input-dynamic-width-bar__search",
+    readOnly: !isFocus,
+    autoComplete: "off",
+    onBlur: function onBlur() {
+      if (!valueInside && !isOpen) setIsFocus(false);
+    },
+    value: valueInside,
+    onChange: handleChange,
+    style: {
+      maxWidth: maxWidth || '',
+      border: border ? '' : 'none'
+    }
+  }), valueInside && isFocus && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "input-dynamic-width-bar__btn_close",
+    type: "button",
+    onClick: handleClear
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: _close_icon["default"],
+    alt: "close"
+  })));
+});
+var _default = exports["default"] = InputDynamicWidth;

package/dist/components/Inputs/InputDynamicWidth/InputDynamicWidth.scss

@@ -0,0 +1,302 @@
+.input-dynamic-width-bar {
+    position: relative;
+    display: flex;
+    width: fit-content;
+    position: relative;
+    //  overflow: hidden;
+
+    &__search,
+    &__search_active {
+        position: relative;
+        width: 40px;
+        height: 40px;
+        border-radius: 8px;
+        padding: 10px;
+        transition-duration: 1000ms;
+        cursor: pointer;
+        background-repeat: no-repeat;
+        font-size: 13px;
+        color: transparent;
+        border: 1px solid #fff;
+        overflow: hidden;
+        background-image: url('./img/search_icon.svg');
+        background-color: white;
+        background-size: 16px;
+        background-position: left 12px center;
+        padding-left: 40px;
+        padding-right: 0;
+        transition: 0s;
+        color: #0B110B;
+        font-family: NunitoSans;
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 16px;
+        border: 1px solid #E0E7F2;
+
+        &:hover {
+            transition: 0.5s;
+            background-color: #F3F3F3;
+        }
+
+        &_active {
+            transition: 1s;
+            width: 100%;
+            max-width: 600px;
+            cursor: pointer;
+            padding-left: 16px;
+            color: #3B2C37;
+            font-family: Montserrat;
+            font-size: 13px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: normal;
+            outline: none;
+            padding-left: 40px;
+            padding-right: 40px;
+
+            &:hover {
+                transition: 0.5s;
+                background-color: #fff
+            }
+        }
+
+        &::placeholder {
+            color: #94A3B8;
+        }
+    }
+
+    &__btn_close {
+        border: none;
+        background-color: inherit;
+        position: absolute;
+        top: 12px;
+        right: 12px;
+        cursor: pointer;
+    }
+
+    &__drop {
+        position: absolute;
+        width: 100%;
+        top: calc(100% + 4px);
+        right: 0;
+        border-radius: 8px;
+        background: #F4F6F4;
+        box-shadow: 0px 4px 8px -16px rgba(41, 45, 50, 0.04), 0px 32px 80px 0px rgba(41, 45, 50, 0.12);
+        animation-name: showDiv;
+        min-width: 400px;
+        max-height: 600px;
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+
+    @keyframes showDiv {
+
+        0%,
+        99% {
+            display: none;
+        }
+
+        100% {
+            display: flex;
+        }
+    }
+
+}
+
+.search-result-feedback {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+
+    &__item {
+        width: 100%;
+        border-radius: 8px;
+        background: #FFF;
+    }
+
+    &__header {
+        padding: 4px 16px;
+    }
+
+    &__title {
+        color: #636D65;
+        font-family: NunitoSans;
+        font-size: 11px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 12px;
+
+        span {
+            color: #0B110B;
+            font-weight: 700;
+        }
+    }
+
+    .searh-product {
+        display: flex;
+        gap: 24px;
+        padding: 16px 24px;
+        cursor: pointer;
+
+        &__img-box {
+            width: 40px;
+            min-width: 40px;
+            height: 50px;
+
+            img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+        }
+
+        &__info-box {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            max-width: calc(100% - 24px - 40px);
+        }
+
+        &__title {
+            color: #020617;
+            font-family: NunitoSans;
+            font-size: 15px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: 20px;
+        }
+
+        &__article {
+            color: #64748B;
+            font-family: NunitoSans;
+            font-size: 11px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 14px;
+
+            span {
+                color: #00B45E;
+            }
+        }
+
+        &__info-item {
+            display: flex;
+            gap: 6px;
+            align-items: center;
+
+            span {
+                overflow: hidden;
+                color: #636D65;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                font-family: NunitoSans;
+                font-size: 10px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 12px;
+                letter-spacing: -0.22px;
+            }
+        }
+    }
+
+    .search-response {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        width: 100%;
+        padding: 8px 24px;
+        cursor: pointer;
+
+        &__message-and-icon {
+            display: flex;
+            gap: 12px;
+            width: 100%;
+            align-items: flex-start;
+        }
+
+        .message-user,
+        .message-support {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            width: 100%;
+            max-width: fit-content;
+            padding: 12px 24px;
+            border-radius: 0 16px 16px 16px;
+            background: #DDECFF;
+            align-items: end;
+
+            &__bottom-info {
+                display: flex;
+                width: 100%;
+                gap: 12px;
+                justify-content: space-between;
+            }
+
+            &__name {
+                overflow: hidden;
+                color: #475569;
+                text-align: right;
+                text-overflow: ellipsis;
+                font-family: Rubik;
+                font-size: 11px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 26px;
+            }
+
+            &__text {
+                color: #0B110B;
+                font-family: NunitoSans;
+                font-size: 13px;
+                font-style: normal;
+                font-weight: 500;
+                line-height: 16px;
+            }
+
+            &__img-box {
+                width: 36px;
+                min-width: 36px;
+                height: 36px;
+                border-radius: 4px;
+                overflow: hidden;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: contain;
+                }
+            }
+
+            &__date {
+                overflow: hidden;
+                color: #0B110B;
+                text-align: right;
+                text-overflow: ellipsis;
+                font-family: Rubik;
+                font-size: 11px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 26px;
+                margin-left: auto;
+            }
+        }
+
+        .message-support {
+            border-radius: 16px 0 16px 16px;
+            background-color: #FBECDF;
+        }
+    }
+}
+
+@media (max-width: 430px) {
+    .input-dynamic-width-bar {
+
+        &__search,
+        &__search_active {
+            font-size: 15px;
+        }
+    }
+}

package/dist/components/Inputs/InputDynamicWidth/InputDynamicWidth.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _InputDynamicWidth = _interopRequireDefault(require("./InputDynamicWidth"));
+var _addonActions = require("@storybook/addon-actions");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'Components/InputDynamicWidth',
+  component: _InputDynamicWidth["default"],
+  parameters: {
+    layout: 'centered'
+  },
+  args: {
+    onChange: _addonActions.action,
+    placeholder: 'Поиск'
+  }
+};
+var Default = exports.Default = {
+  render: function render(args) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        width: '100%',
+        gap: '10px',
+        flexDirection: 'column'
+      }
+    }, /*#__PURE__*/React.createElement(_InputDynamicWidth["default"], args));
+  }
+};

package/dist/components/Inputs/InputDynamicWidth/img/close_icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 4.53033C12.8232 4.23744 12.8232 3.76256 12.5303 3.46967C12.2374 3.17678 11.7626 3.17678 11.4697 3.46967L8 6.93934L4.53033 3.46967C4.23744 3.17678 3.76256 3.17678 3.46967 3.46967C3.17678 3.76256 3.17678 4.23744 3.46967 4.53033L6.93934 8L3.46967 11.4697C3.17678 11.7626 3.17678 12.2374 3.46967 12.5303C3.76256 12.8232 4.23744 12.8232 4.53033 12.5303L8 9.06066L11.4697 12.5303C11.7626 12.8232 12.2374 12.8232 12.5303 12.5303C12.8232 12.2374 12.8232 11.7626 12.5303 11.4697L9.06066 8L12.5303 4.53033Z" fill="#0B110B"/>
+</svg>

package/dist/components/Inputs/InputDynamicWidth/img/search_icon.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 418">
+<circle id="Ellipse 999" cx="6.5" cy="6.5" r="5.5" stroke="#0B110B" stroke-width="2"/>
+<path id="Vector 141" d="M12.2929 14.7071C12.6834 15.0976 13.3166 15.0976 13.7071 14.7071C14.0976 14.3166 14.0976 13.6834 13.7071 13.2929L12.2929 14.7071ZM9.29289 11.7071L12.2929 14.7071L13.7071 13.2929L10.7071 10.2929L9.29289 11.7071Z" fill="#0B110B"/>
+</g>
+</svg>

package/dist/components/SliderRange/Slider.scss

@@ -0,0 +1,161 @@
+.slider-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    align-items: center;
+    //  margin-top: 40px;
+    width: 100%;
+
+    &__text {
+        color: #000;
+        font-family: Montserrat;
+        font-size: 24px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 24px
+    }
+
+    .slider-box {
+        display: flex;
+        flex-direction: column;
+        max-width: 100%;
+        width: 100%;
+        gap: 10px;
+        flex-wrap: nowrap;
+        gap: 20px;
+
+        .slider-num {
+            min-width: 70px;
+            width: 70px;
+            height: 32px;
+            font-size: 14px;
+            padding: 10px;
+            color: #000;
+            font-family: Montserrat;
+            font-size: 24px;
+            font-style: normal;
+            font-weight: 600;
+            line-height: 24px;
+            background-color: white;
+            border-radius: 8px;
+            border: 1px solid #ffffff;
+            align-items: center;
+            justify-content: center;
+            justify-content: center;
+            text-align: center;
+
+            &:focus {
+                outline: none;
+                border: 2px solid #B047E2;
+            }
+
+            &::-webkit-inner-spin-button,
+            &::-webkit-outer-spin-button {
+                -webkit-appearance: none;
+                margin: 0;
+            }
+        }
+
+        .rc-slider-handle {
+            box-shadow: rgba(0, 0, 0, 0.05);
+            border: #B047E2 4px solid;
+            opacity: 1;
+            background-color: #B047E2;
+            -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
+            -moz-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
+            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
+        }
+
+        .rc-slider-track {
+            background-color: #B047E2;
+        }
+    }
+
+    .input-segment-box {
+        display: flex;
+        gap: 15px;
+        align-items: center;
+
+        .btn__blue {
+            border-radius: 8px;
+            font-size: 13px;
+            width: 88px;
+            min-width: 88px;
+        }
+
+        .input-box {
+            position: relative;
+            margin-top: 0;
+
+            .text_grey {
+                top: calc(50% - 9px);
+                left: 10px;
+                color: #9F9F9F;
+                font-size: 14px;
+                position: absolute;
+            }
+        }
+
+        input {
+            display: flex;
+            width: 148px;
+            height: 32px;
+            padding: 10px;
+            align-items: center;
+            gap: 12px;
+            flex-shrink: 0;
+            border-radius: 8px;
+            border: 1px solid var(--table-border, #E0E7F2);
+            background: #FFF;
+            padding-left: 97px;
+            color: #020617;
+            padding-right: 12px;
+            text-align: right;
+
+            &:focus {
+                //border: 1px solid #4DA9FF;
+                outline: none;
+            }
+
+            &::placeholder {
+                color: #9F9F9F;
+            }
+        }
+
+        .btn-group {
+            position: absolute;
+            width: 12px;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            top: 0;
+            right: 11px;
+            gap: 4px;
+            pointer-events: none;
+
+            .btn_top,
+            .btn_bottom {
+                width: 12px;
+                height: 50%;
+                border: none;
+                background-image: url('./img/arrow_delta_top.svg');
+                background-repeat: no-repeat;
+                background-position: bottom;
+                pointer-events: none;
+                background-color: inherit;
+            }
+
+            .btn_bottom {
+                background-image: url('./img/arrow_delta_bottom.svg');
+                background-position: top;
+            }
+        }
+
+        input[type=number]::-webkit-inner-spin-button,
+        input[type=number]::-webkit-outer-spin-button {
+            //-webkit-appearance: none;
+            opacity: 0;
+        }
+    }
+}

package/dist/components/SliderRange/SliderRange.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _rcSlider = _interopRequireDefault(require("rc-slider"));
+var _react = require("react");
+require("./Slider.scss");
+require("rc-slider/assets/index.css");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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 SliderRange = function SliderRange(_ref) {
+  var minValue = _ref.minValue,
+    maxValue = _ref.maxValue,
+    _ref$minMax = _ref.minMax,
+    minMax = _ref$minMax === void 0 ? true : _ref$minMax,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? false : _ref$defaultValue,
+    step = _ref.step,
+    setState = _ref.setState,
+    _ref$segments = _ref.segments,
+    segments = _ref$segments === void 0 ? false : _ref$segments,
+    _ref$lang = _ref.lang,
+    lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
+    unit = _ref.unit,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? false : _ref$locale;
+  var _useState = (0, _react.useState)(minValue ? minValue : 0),
+    _useState2 = _slicedToArray(_useState, 2),
+    min = _useState2[0],
+    setMin = _useState2[1];
+  var _useState3 = (0, _react.useState)(maxValue ? maxValue : 20000),
+    _useState4 = _slicedToArray(_useState3, 2),
+    max = _useState4[0],
+    setMax = _useState4[1];
+  var _useState5 = (0, _react.useState)(defaultValue),
+    _useState6 = _slicedToArray(_useState5, 2),
+    sliderRange = _useState6[0],
+    setSliderRange = _useState6[1];
+  (0, _react.useEffect)(function () {
+    if (setState) {
+      setState(sliderRange);
+    }
+  }, [sliderRange]);
+  (0, _react.useEffect)(function () {
+    setMax(maxValue);
+    setMin(minValue);
+  }, [minValue, maxValue]);
+  return /*#__PURE__*/React.createElement("section", {
+    className: "slider-panel"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "slider-box"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "slider-panel__text"
+  }, (locale ? sliderRange.toLocaleString() : sliderRange) + ' ' + (unit ? unit : '')), /*#__PURE__*/React.createElement(_rcSlider["default"], {
+    defaultValue: defaultValue ? defaultValue : 0,
+    min: min,
+    max: max,
+    value: sliderRange,
+    onChange: function onChange(e) {
+      return setSliderRange(e);
+    },
+    marks: {},
+    step: 1,
+    draggableTrack: true,
+    pushable: true
+  })));
+};
+var _default = exports["default"] = SliderRange;

package/dist/components/SliderRange/SliderRange.stories.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _SliderRange = _interopRequireDefault(require("./SliderRange"));
+var _addonActions = require("@storybook/addon-actions");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'SliderRange',
+  component: _SliderRange["default"],
+  args: {
+    id: 1,
+    value: true,
+    defaultValue: 2200,
+    locale: true,
+    unit: '₽',
+    minValue: 0,
+    maxValue: 50000,
+    setState: (0, _addonActions.action)('setState')
+  }
+};
+var Default = exports.Default = {
+  render: function render(args) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '10px',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100%'
+      }
+    }, /*#__PURE__*/React.createElement(_SliderRange["default"], args));
+  }
+};

package/dist/components/SliderRange/img/arrow_delta_bottom.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="6" viewBox="0 0 12 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 6L0.803848 0L11.1962 0L6 6Z" fill="#D9D9D9"/>
+</svg>

package/dist/components/SliderRange/img/arrow_delta_top.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="6" viewBox="0 0 12 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 0L11.1962 6H0.803848L6 0Z" fill="#D9D9D9"/>
+</svg>

package/dist/components/Table/ButtonColumn/ButtonColumn.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ButtonColumn = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _Checkbox = _interopRequireDefault(require("../../Checkbox/Checkbox/Checkbox"));
+var _Checkbox = _interopRequireDefault(require("../../Checkbox/Checkbox"));
 var _column = _interopRequireDefault(require("./img/column.svg"));
 require("./ButtonColumn.scss");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/dist/components/Table/Table/Filters/OptionsImage.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.OptionsImage = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _Checkbox = _interopRequireDefault(require("../../../Checkbox/Checkbox/Checkbox"));
+var _Checkbox = _interopRequireDefault(require("../../../Checkbox/Checkbox"));
 var _FilterReset = require("./img/FilterReset");
 var _FilterDefault = require("./img/FilterDefault");
 require("./OptionsImage.scss");

package/dist/components/Table/Table/Filters/OptionsList.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.OptionsList = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _Checkbox = _interopRequireDefault(require("../../../Checkbox/Checkbox/Checkbox"));
+var _Checkbox = _interopRequireDefault(require("../../../Checkbox/Checkbox"));
 var _ButtonBasic = _interopRequireDefault(require("../../../Buttons/ButtonBasic/ButtonBasic"));
 var _FilterReset = require("./img/FilterReset");
 var _FilterDefault = require("./img/FilterDefault");

package/dist/components/Table/Table/RenderTh/RenderTh.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.RenderTh = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactRouterDom = require("react-router-dom");
-var _Checkbox = _interopRequireDefault(require("../../../Checkbox/Checkbox/Checkbox"));
+var _Checkbox = _interopRequireDefault(require("../../../Checkbox/Checkbox"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/dist/components/Table/Table/Table.js

@@ -20,7 +20,7 @@ var _TypeTdImage = require("./TypeTdImage");
 var _RenderFiltersTh = require("./RenderFiltersTh/RenderFiltersTh");
 var _ButtonCopy = require("../ButtonCopy/ButtonCopy");
 var _TableWithoutData = require("../TableWithoutData/TableWithoutData");
-var _Checkbox = _interopRequireDefault(require("../../Checkbox/Checkbox/Checkbox"));
+var _Checkbox = _interopRequireDefault(require("../../Checkbox/Checkbox"));
 var _TableInput = _interopRequireDefault(require("../TableInput/TableInput"));
 var _CheckboxToggle = _interopRequireDefault(require("../CheckboxToggle/CheckboxToggle"));
 var _SliderCarousel = _interopRequireDefault(require("../../Slider/SliderCarousel/SliderCarousel"));

package/dist/index.js

@@ -99,6 +99,12 @@ Object.defineProperty(exports, "InputDinamycPlaceholder", {
     return _InputDinamycPlaceholder["default"];
   }
 });
+Object.defineProperty(exports, "InputDynamicWidth", {
+  enumerable: true,
+  get: function get() {
+    return _InputDynamicWidth["default"];
+  }
+});
 Object.defineProperty(exports, "ListOfContent", {
   enumerable: true,
   get: function get() {
@@ -177,6 +183,12 @@ Object.defineProperty(exports, "ShortTileArticleBox", {
     return _ShortTileArticleBox["default"];
   }
 });
+Object.defineProperty(exports, "SliderRange", {
+  enumerable: true,
+  get: function get() {
+    return _SliderRange["default"];
+  }
+});
 Object.defineProperty(exports, "StatisticCard", {
   enumerable: true,
   get: function get() {
@@ -249,10 +261,12 @@ var _ArticleViewV = _interopRequireDefault(require("./components/Article/Article
 var _ListOfContent = _interopRequireDefault(require("./components/Article/ListOfContent/ListOfContent"));
 var _ShortTileArticleBox = _interopRequireDefault(require("./components/ArticleElements/ShortTileArticleBox/ShortTileArticleBox"));
 var _LongTileArticleBox = _interopRequireDefault(require("./components/ArticleElements/LongTileArticleBox/LongTileArticleBox"));
+var _InputDynamicWidth = _interopRequireDefault(require("./components/Inputs/InputDynamicWidth/InputDynamicWidth"));
 var _SelectExecutor = _interopRequireDefault(require("./components/SelectExecutor/SelectExecutor"));
 var _DownSelector = _interopRequireDefault(require("./components/Inputs/DropDownSelector/DownSelector"));
 var _TextareaDynamicPlaceholder = _interopRequireDefault(require("./components/Inputs/TextareaDynamicPlaceholder/TextareaDynamicPlaceholder"));
 var _NoArticles = _interopRequireDefault(require("./components/Article/NoArticles/NoArticles"));
 var _ViewSwitch = _interopRequireDefault(require("./components/ViewSwitch/ViewSwitch"));
+var _SliderRange = _interopRequireDefault(require("./components/SliderRange/SliderRange"));
 var _Checkbox = _interopRequireDefault(require("./components/Checkbox/Checkbox"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/dist/stories/Article/ImgArticle/ImgArticle.scss

@@ -10,6 +10,7 @@
     max-width: 100%;
     border-radius: 10px;
     overflow: hidden;
+    min-height: 60px;
 
     .img-container__button__readonly,
     .img-container__button {

package/dist/stories/ArticleMainContainer/ArticleMainContainer.js

@@ -15,7 +15,7 @@ var _ResultsFound = _interopRequireDefault(require("../ResultsFound/ResultsFound
 var _BasicSelection = _interopRequireDefault(require("../BasicSelection/BasicSelection"));
 var _DownSelector = _interopRequireDefault(require("../DropDownSelector/DownSelector"));
 var _MultilevelSidebar = _interopRequireDefault(require("../MultilevelSidebar/MultilevelSidebar"));
-var _InputDynamicWidth = _interopRequireDefault(require("../InputDynamicWidth/InputDynamicWidth"));
+var _InputDynamicWidth = _interopRequireDefault(require("../../components/Inputs/InputDynamicWidth/InputDynamicWidth"));
 var _Paginator = require("../Paginator/Paginator");
 var _fetchUrls = require("../../common/fetchUrls");
 var _react = require("react");

package/dist/stories/Table/Table.js

@@ -8,7 +8,6 @@ var _link3 = _interopRequireDefault(require("next/link"));
 var _headers = _interopRequireDefault(require("../../common/headers"));
 var _Rating = _interopRequireDefault(require("@mui/material/Rating"));
 var _Checkbox = _interopRequireDefault(require("../Checkbox/Checkbox"));
-var _Star = _interopRequireDefault(require("@mui/icons-material/Star"));
 var _deepEqual = _interopRequireDefault(require("deep-equal"));
 var _sort_arrow_down = _interopRequireDefault(require("./img/sort_arrow_down.svg"));
 var _TableInput = _interopRequireDefault(require("../../components/TableInput/TableInput"));
@@ -42,7 +41,7 @@ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructur
 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; }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } // import StarIcon from '@mui/icons-material/Star'
 var imageNotFound = require('./img/imageNotFound.svg');
 var SORT_DIRECTIONS = {
   ascending: 'ASC',
@@ -910,24 +909,7 @@ var _Table = function Table(_ref) {
             style: {
               justifyContent: 'flex-end'
             }
-          }, el ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Rating["default"], {
-            name: "rating-comp-".concat(ind + el),
-            precision: 0.2,
-            defaultValue: Math.floor(_value) * 0.2,
-            max: 1,
-            readOnly: true,
-            emptyIcon: /*#__PURE__*/React.createElement(_Star["default"], {
-              style: {
-                opacity: '.1'
-              }
-            }),
-            icon: /*#__PURE__*/React.createElement(_Star["default"], {
-              style: {
-                fill: '#faaf00'
-              }
-            }),
-            size: "large"
-          }), /*#__PURE__*/React.createElement("span", {
+          }, el ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
             style: {
               fontSize: '16px'
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecomlab-components-next",
-  "version": "0.1.183",
+  "version": "0.1.185",
   "description": "A set of common and reusable React components",
   "main": "dist/index.js",
   "files": [
@@ -35,6 +35,7 @@
     "react-spinners": "^0.15.0",
     "sass": "^1.55.0",
     "styled-components": "^6.1.14",
+    "rc-slider": "^10.2.0",
     "universal-cookie": "^7.2.2"
   },
   "devDependencies": {