intelicoreact 0.0.95 → 0.0.96

package/dist/Functions/useMouseUpOutside.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useMouseUpOutside;
+
+var _react = require("react");
+
+function useMouseUpOutside(ref, setOut, open) {
+  function handleMouseUpOutside(event) {
+    if (ref.current && !ref.current.contains(event.target)) {
+      setOut(open);
+    }
+  }
+
+  (0, _react.useEffect)(function () {
+    document.addEventListener('mouseup', handleMouseUpOutside);
+    return function () {
+      document.removeEventListener('mouseup', handleMouseUpOutside);
+    };
+  }, [ref]);
+}

package/dist/Functions/useToggle.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var useToggle = function useToggle(initialState) {
+  var _useState = (0, _react.useState)(!!initialState),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isToggled = _useState2[0],
+      setToggle = _useState2[1];
+
+  var toggle = (0, _react.useCallback)(function () {
+    return setToggle(function (isOn) {
+      return !isOn;
+    });
+  }, []);
+  var toggleOn = (0, _react.useCallback)(function () {
+    return setToggle(true);
+  }, []);
+  var toggleOff = (0, _react.useCallback)(function () {
+    return setToggle(false);
+  }, []);
+  return {
+    isToggled: isToggled,
+    toggle: toggle,
+    toggleOn: toggleOn,
+    toggleOff: toggleOff
+  };
+};
+
+var _default = useToggle;
+exports.default = _default;

package/dist/Functions/utils.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStyles = exports.logout = exports.useOutsideToggle = exports.handleObjectChange = void 0;
+
+var _react = require("react");
+
+/* eslint-disable guard-for-in, no-unused-vars */
+var handleObjectChange = function handleObjectChange(updateObject, updateFunction) {
+  return function (data) {
+    var prop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    var isNumber = arguments.length > 2 ? arguments[2] : undefined;
+    var value;
+
+    if (data !== null && data !== void 0 && data.target) {
+      value = data.target.type === 'checkbox' ? data.target.checked : data.target.value;
+    } else value = data;
+
+    value = isNumber ? +value : value;
+    var props = prop.split('.');
+    var currentObject = props.reduce(function (res, chapter, index) {
+      if (props.length !== index + 1) res = res[chapter];
+      return res;
+    }, updateObject);
+    currentObject[props.pop()] = value;
+    updateFunction();
+  };
+};
+
+exports.handleObjectChange = handleObjectChange;
+
+var useOutsideToggle = function useOutsideToggle(ref, setOut, open) {
+  function handleClickOutside(event) {
+    if (ref.current && !ref.current.contains(event.target)) {
+      setOut(open);
+    }
+  }
+
+  (0, _react.useEffect)(function () {
+    document.addEventListener('mouseup', handleClickOutside);
+    return function () {
+      // Unbind the event listener on clean up
+      document.removeEventListener('mouseup', handleClickOutside);
+    };
+  }, [ref]);
+};
+
+exports.useOutsideToggle = useOutsideToggle;
+
+var logout = function logout() {
+  window.localStorage.removeItem('accessToken');
+  window.localStorage.removeItem('tokenExpires');
+  window.location.reload();
+};
+
+exports.logout = logout;
+
+var getStyles = function getStyles(el, prop) {
+  if (!el) return null;
+  if (!prop) return window.getComputedStyle(el);
+  return window.getComputedStyle(el).getPropertyValue(prop);
+};
+
+exports.getStyles = getStyles;

package/dist/Molecular/Datepicker/Datepicker.js

@@ -0,0 +1,451 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useClickOutside = require("../../Functions/useClickOutside");
+
+var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
+
+var _moment = _interopRequireDefault(require("moment"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Langs = _interopRequireDefault(require("../../../../Langs"));
+
+var _Button = _interopRequireDefault(require("../../Atomic/UI/Button/Button"));
+
+var _Calendar = _interopRequireDefault(require("./components/Calendar"));
+
+require("./Datepicker.scss");
+
+var _Switcher = _interopRequireDefault(require("../../Atomic/FormElements/Switcher/Switcher"));
+
+var _Dropdown = _interopRequireDefault(require("../../Atomic/FormElements/Dropdown/Dropdown"));
+
+var _Input = _interopRequireDefault(require("../../Atomic/FormElements/Input/Input"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var padTime = function padTime(time) {
+  return "".concat(time.toString().padStart(2, '0'), ":00");
+};
+
+var Datepicker = function Datepicker(props) {
+  var _props$values = props.values,
+      values = _props$values === void 0 ? {} : _props$values,
+      onChange = props.onChange,
+      onChangeCompare = props.onChangeCompare,
+      onCancel = props.onCancel,
+      _props$getSelectedMod = props.getSelectedMode,
+      getSelectedMode = _props$getSelectedMod === void 0 ? function () {} : _props$getSelectedMod,
+      onChangeInterval = props.onChangeInterval,
+      isCompareHidden = props.isCompareHidden,
+      limitRange = props.limitRange;
+  var _values$start = values.start,
+      start = _values$start === void 0 ? null : _values$start,
+      _values$end = values.end,
+      end = _values$end === void 0 ? null : _values$end,
+      _values$compare = values.compare,
+      compare = _values$compare === void 0 ? false : _values$compare;
+  var txt = _Langs.default[global.lng];
+  var startDateInputRef = (0, _react.useRef)(null);
+  var endDateInputRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(start),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      startDate = _useState2[0],
+      setStartDate = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(end),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      endDate = _useState4[0],
+      setEndDate = _useState4[1];
+
+  var dateInterval = getSelectedMode({
+    start: startDate,
+    end: endDate
+  });
+
+  var _useState5 = (0, _react.useState)(start),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      startDateInput = _useState6[0],
+      setStartDateInput = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(end),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      endDateInput = _useState8[0],
+      setEndDateInput = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(start ? (0, _moment.default)(start).hour() : 0),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      startHour = _useState10[0],
+      setStartHour = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(end ? (0, _moment.default)(end).hour() : 0),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      endHour = _useState12[0],
+      setEndHour = _useState12[1]; // eslint-disable-next-line no-unused-vars
+
+
+  var _useState13 = (0, _react.useState)(compare),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      isCompare = _useState14[0],
+      setIsCompare = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(start ? (0, _moment.default)(start).toDate() : (0, _moment.default)().subtract(1, 'month').toDate()),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      date1 = _useState16[0],
+      setDate1 = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(end ? (0, _moment.default)(end).toDate() : (0, _moment.default)().toDate()),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      date2 = _useState18[0],
+      setDate2 = _useState18[1];
+
+  var _useState19 = (0, _react.useState)(false),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      isStartFocused = _useState20[0],
+      setIsStartFocused = _useState20[1];
+
+  var _useState21 = (0, _react.useState)(false),
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      isEndFocused = _useState22[0],
+      setIsEndFocused = _useState22[1];
+
+  var _useState23 = (0, _react.useState)(null),
+      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+      hoverStatus = _useState24[0],
+      setHoverStatus = _useState24[1];
+
+  var isNearby = (0, _react.useMemo)(function () {
+    return (0, _moment.default)(date2).subtract(1, 'month').isSame((0, _moment.default)(date1), 'month');
+  }, [date1, date2]);
+  var isPreviousPeriodShowed = (0, _react.useMemo)(function () {
+    return isCompare && !isCompareHidden && startDate && endDate;
+  }, [startDate, endDate, isCompare]);
+  var prevEndHour = (0, _react.useRef)(endHour);
+
+  var getStartHourItems = function getStartHourItems() {
+    return (0, _toConsumableArray2.default)(Array(24).keys()).map(function (hour) {
+      return {
+        label: padTime(hour),
+        value: hour,
+        disabled: (0, _moment.default)(startDate).isSame(endDate, 'day') && endHour <= hour
+      };
+    });
+  };
+
+  var getEndHourItems = function getEndHourItems() {
+    return (0, _toConsumableArray2.default)(Array(24).keys()).map(function (hour) {
+      return {
+        label: padTime(hour + 1),
+        value: hour === 23 ? 0 : hour + 1,
+        disabled: ((0, _moment.default)(startDate).isSame(endDate, 'day') || (0, _moment.default)(startDate).isSame((0, _moment.default)(endDate).subtract(1, 'days'), 'day') && endHour === 0) && hour < startHour
+      };
+    });
+  };
+
+  var startPrevDate = (0, _react.useMemo)(function () {
+    if (isPreviousPeriodShowed) {
+      var intervalHoursCount = (0, _moment.default)(endDate).diff(startDate, 'hours');
+      return (0, _moment.default)(startDate).subtract(intervalHoursCount, 'hours').toDate();
+    } else return null;
+  }, [startDate, endDate, isCompare]);
+  var endPrevDate = (0, _react.useMemo)(function () {
+    if (isPreviousPeriodShowed) {
+      return startDate;
+    } else return null;
+  }, [startDate, endDate, isCompare]);
+  var title = (0, _react.useMemo)(function () {
+    if (isCompare && !isCompareHidden && startDate && endDate) {
+      return "".concat((0, _moment.default)(startPrevDate).format('ll'), " (").concat((0, _moment.default)(startPrevDate).format('HH:mm'), ") - ").concat((0, _moment.default)(endPrevDate).format('ll'), " (").concat((0, _moment.default)(endPrevDate).format('HH:mm'), ")");
+    } else return '';
+  }, [startDate, endDate, isCompare]);
+
+  var subtractDay = function subtractDay(date) {
+    return endHour === 0 ? (0, _moment.default)(date).subtract(1, 'days') : date;
+  };
+
+  var addDay = function addDay(date) {
+    return endHour === 0 ? (0, _moment.default)(date).add(1, 'days') : date;
+  };
+
+  (0, _react.useEffect)(function () {
+    if ((0, _moment.default)(startDate).isSameOrAfter(endDate)) {
+      setStartDate((0, _moment.default)(endDate).subtract(1, 'd').toDate());
+      setDate1((0, _moment.default)(endDate).subtract(1, 'd'));
+    }
+  }, [startDate]);
+  (0, _react.useEffect)(function () {
+    if ((0, _moment.default)(endDate).isSameOrBefore(startDate)) {
+      setEndDate((0, _moment.default)(startDate).add(1, 'd').toDate());
+      setDate2((0, _moment.default)(startDate).add(1, 'd'));
+    }
+  }, [endDate]);
+  (0, _react.useEffect)(function () {
+    setStartDateInput(startDate);
+    setEndDateInput(endDate);
+
+    if ((0, _moment.default)(startDate).isBefore((0, _moment.default)(endDate), 'month')) {
+      setDate1((0, _moment.default)(startDate));
+      setDate2((0, _moment.default)(endDate));
+    }
+  }, [startDate, endDate]);
+  (0, _react.useEffect)(function () {
+    if ((0, _moment.default)(date1).isSameOrAfter((0, _moment.default)(date2), 'month')) {
+      setDate1((0, _moment.default)(date2).subtract(1, 'month'));
+    }
+  }, [date1, date2]);
+  (0, _react.useEffect)(function () {
+    onChangeInterval(dateInterval);
+  }, [dateInterval]);
+
+  var handleClick = function handleClick(date) {
+    prevEndHour.current = 0;
+
+    if (!startDate || startDate && endDate && !((0, _moment.default)(startDate).add(1, 'd').isSame(endDate, 'day') && endHour === 0)) {
+      setStartDate((0, _moment.default)(date).startOf('day').toDate());
+      setEndDate((0, _moment.default)(date).add(1, 'd').startOf('day').toDate());
+      setStartHour(0);
+      setEndHour(0);
+    } else if ((0, _moment.default)(date).isBefore((0, _moment.default)(startDate), 'day')) {
+      setEndDate((0, _moment.default)(startDate).add(1, 'd').startOf('day').toDate());
+      setStartDate((0, _moment.default)(date).set('hour', parseInt(startHour, 10)).toDate());
+    } else if ((0, _moment.default)(date).isAfter((0, _moment.default)(startDate), 'day')) {
+      setEndDate((0, _moment.default)(date).add(1, 'd').startOf('day').toDate());
+    }
+
+    setHoverStatus(null);
+  };
+
+  var timerId;
+
+  var handleHover = function handleHover(date) {
+    if (!date) {
+      timerId = setTimeout(function () {
+        setHoverStatus(null);
+      }, 400);
+      return;
+    }
+
+    if (timerId) clearTimeout(timerId);
+
+    if ((0, _moment.default)(startDate).add(1, 'd').isSame(endDate, 'day') && endHour === 0) {
+      if ((0, _moment.default)(date).isAfter((0, _moment.default)(startDate), 'day')) setHoverStatus('end');else if ((0, _moment.default)(date).isBefore((0, _moment.default)(startDate), 'day')) setHoverStatus('start');else setHoverStatus(null);
+    } else {
+      setHoverStatus('start');
+    }
+  };
+
+  var handleChangeStartHour = function handleChangeStartHour(_ref) {
+    var val = _ref.target.value;
+    setStartHour(+val);
+    setStartDate((0, _moment.default)(startDate).set('hour', +val).toDate());
+  };
+
+  var handleChangeEndHour = function handleChangeEndHour(_ref2) {
+    var val = _ref2.target.value;
+    var newHour = +val;
+    setEndHour(newHour);
+    var newEndDate;
+
+    if (prevEndHour.current === 0 && newHour !== 0) {
+      newEndDate = (0, _moment.default)(endDate).subtract(1, 'days');
+    } else if (prevEndHour.current !== 0 && newHour === 0) {
+      newEndDate = (0, _moment.default)(endDate).add(1, 'days');
+    } else {
+      newEndDate = endDate;
+    }
+
+    prevEndHour.current = newHour;
+    setEndDate((0, _moment.default)(newEndDate).set('hour', newHour).toDate());
+  };
+
+  var renderButtons = function renderButtons() {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+      className: "plr15 mr5",
+      onClick: function onClick() {
+        return onCancel();
+      }
+    }, txt.buttons.cancel), /*#__PURE__*/_react.default.createElement(_Button.default, {
+      className: "plr20",
+      type: "filled",
+      disabled: !startDate || !endDate,
+      onClick: function onClick() {
+        return onChange({
+          start: startDate,
+          end: endDate,
+          startPrevDate: startPrevDate,
+          endPrevDate: endPrevDate,
+          compare: isCompare
+        });
+      }
+    }, txt.buttons.apply));
+  };
+
+  var renderPreviousPeriod = function renderPreviousPeriod() {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, txt.labels.previousPeriod, ": ", /*#__PURE__*/_react.default.createElement("span", {
+      className: "date-picker__previous-period-interval"
+    }, title));
+  };
+
+  var handleStartDateFocus = function handleStartDateFocus() {
+    setIsStartFocused(true);
+    setStartDateInput((0, _moment.default)(startDate).format('L'));
+  };
+
+  var handleStartDateBlur = function handleStartDateBlur() {
+    var newDate;
+
+    if ((0, _moment.default)(startDateInput).isValid()) {
+      newDate = (0, _moment.default)(startDateInput).set('hour', parseInt(startHour, 10)).toDate();
+      setStartDate(newDate);
+    } else {
+      newDate = startDate;
+      setStartDateInput(newDate);
+    }
+
+    setIsStartFocused(false);
+    startDateInputRef.current.blur();
+    setDate1((0, _moment.default)(newDate).isSameOrAfter((0, _moment.default)(date2), 'month') ? (0, _moment.default)(date2).subtract(1, 'month') : (0, _moment.default)(newDate));
+  };
+
+  var handleEndDateFocus = function handleEndDateFocus() {
+    setIsEndFocused(true);
+    setEndDateInput((0, _moment.default)(subtractDay(endDateInput)).format('L'));
+  };
+
+  var handleEndDateBlur = function handleEndDateBlur() {
+    var newDate;
+
+    if ((0, _moment.default)(endDateInput).isValid()) {
+      newDate = (0, _moment.default)(endDateInput).set('hour', parseInt(endHour, 10)).toDate();
+      setEndDate(addDay(newDate));
+    } else {
+      newDate = endDate;
+      setEndDateInput(newDate);
+    }
+
+    setIsEndFocused(false);
+    endDateInputRef.current.blur();
+    setDate2(newDate);
+    setEndDateInput();
+  };
+
+  var handleKeyPressed = function handleKeyPressed(e, handleDateBlur) {
+    if (e.key === 'Enter') handleDateBlur();
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "date-picker"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "date-picker__header"
+  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    dataTest: "datepicker_start-date-input",
+    className: (0, _classnames.default)('mr5', {
+      'date-picker-text-input--active': hoverStatus === 'start'
+    }),
+    value: isStartFocused ? startDateInput : (0, _moment.default)(startDate).format('ll'),
+    disabled: !startDate,
+    onChange: function onChange(e) {
+      return setStartDateInput(e.target.value);
+    },
+    onFocus: handleStartDateFocus,
+    onBlur: handleStartDateBlur,
+    onKeyPress: function onKeyPress(e) {
+      return handleKeyPressed(e, handleStartDateBlur);
+    },
+    ref: startDateInputRef
+  }), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
+    dataTest: "datepicker_start-hour-select-input",
+    onChange: handleChangeStartHour,
+    value: startHour,
+    items: getStartHourItems(),
+    disabled: !startDate,
+    short: true
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "pl5 pr5 date-picker__header--gray"
+  }, "\u2014"), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    dataTest: "datepicker_end-date-input",
+    className: (0, _classnames.default)('mr5', {
+      'date-picker-text-input--active': hoverStatus === 'end'
+    }),
+    value: isEndFocused ? endDateInput : (0, _moment.default)(subtractDay(endDate)).format('ll'),
+    disabled: !endDate,
+    onChange: function onChange(e) {
+      return setEndDateInput(e.target.value);
+    },
+    onFocus: handleEndDateFocus,
+    onBlur: handleEndDateBlur,
+    onKeyPress: function onKeyPress(e) {
+      return handleKeyPressed(e, handleEndDateBlur);
+    },
+    ref: endDateInputRef
+  }), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
+    dataTest: "datepicker_end-hour-select-input",
+    onChange: handleChangeEndHour,
+    value: endHour,
+    items: getEndHourItems(),
+    disabled: !endDate,
+    short: true
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "date-picker__previous-period"
+  }, isCompare && !isCompareHidden && startDate && endDate && renderPreviousPeriod()), /*#__PURE__*/_react.default.createElement("div", {
+    className: "date-picker__calendars"
+  }, /*#__PURE__*/_react.default.createElement(_Calendar.default, {
+    date: date1,
+    setDate: setDate1,
+    allowNext: !isNearby,
+    startDate: startDate,
+    endDate: endDate,
+    startPrevDate: startPrevDate,
+    endPrevDate: endPrevDate,
+    onClick: handleClick,
+    onHover: handleHover,
+    limitRange: limitRange
+  }), /*#__PURE__*/_react.default.createElement(_Calendar.default, {
+    date: date2,
+    setDate: setDate2,
+    allowPrev: !isNearby,
+    startDate: startDate,
+    endDate: endDate,
+    startPrevDate: startPrevDate,
+    endPrevDate: endPrevDate,
+    onClick: handleClick,
+    onHover: handleHover
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "date-picker__footer j46"
+  }, !isCompareHidden ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "j4"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "mr5"
+  }, /*#__PURE__*/_react.default.createElement(_Switcher.default, {
+    dataTest: "datepicker_compare",
+    label: txt.labels.compare,
+    isSwitchOn: isCompare,
+    onChange: function onChange() {
+      onChangeCompare(!isCompare);
+      setIsCompare(function (state) {
+        return !state;
+      });
+    }
+  }))) : /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null, renderButtons())));
+};
+
+var _default = Datepicker;
+exports.default = _default;

package/dist/Molecular/Datepicker/Datepicker.scss

@@ -0,0 +1,8 @@
+.test {
+  width: 380px;
+}
+
+.testing {
+  border: none;
+  box-shadow: none;
+}

package/dist/Molecular/Datepicker/Datepicker.stories.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatepickerTemplate = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _yup = require("yup");
+
+var _Datepicker = _interopRequireDefault(require("./Datepicker"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+global.lng = 'en'; // export default {
+//   title: 'Form Elements/Datepicker',
+//   component: Datepicker,
+// };
+
+var Template = function Template(args) {
+  var params = {
+    minDate: args === null || args === void 0 ? void 0 : args.minDate,
+    maxDate: args === null || args === void 0 ? void 0 : args.maxDate
+  };
+  return /*#__PURE__*/_react.default.createElement(_Datepicker.default, {
+    data: args.date,
+    params: params
+  });
+};
+
+var DatepickerTemplate = Template.bind({});
+exports.DatepickerTemplate = DatepickerTemplate;
+DatepickerTemplate.args = {
+  date: '10/14/2021',
+  minDate: '10/11/2021',
+  maxDate: '10/25/2021'
+};

package/dist/Molecular/Datepicker/components/Calendar.js

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _moment = _interopRequireDefault(require("moment"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var Icon = _interopRequireWildcard(require("react-feather"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Calendar = function Calendar(props) {
+  var date = props.date,
+      setDate = props.setDate,
+      startDate = props.startDate,
+      endDate = props.endDate,
+      _props$allowPrev = props.allowPrev,
+      allowPrev = _props$allowPrev === void 0 ? true : _props$allowPrev,
+      _props$allowNext = props.allowNext,
+      allowNext = _props$allowNext === void 0 ? true : _props$allowNext,
+      onClick = props.onClick,
+      onHover = props.onHover,
+      startPrevDate = props.startPrevDate,
+      endPrevDate = props.endPrevDate,
+      limitRange = props.limitRange;
+
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      days = _useState2[0],
+      setDays = _useState2[1];
+
+  var title = (0, _react.useMemo)(function () {
+    return "".concat((0, _moment.default)(date).format('MMM'), " ").concat((0, _moment.default)(date).format('YYYY'));
+  }, [date]);
+  (0, _react.useEffect)(function () {
+    var result = {};
+    var day = (0, _moment.default)(date).startOf('month');
+    var daysInMonth = day.daysInMonth();
+
+    for (var d = 0; d < daysInMonth; d += 1) {
+      var week = day.week();
+      if (day.month() === 11 && week === 1) week = 53;
+      if (day.month() === 0 && week === 53) week = 0;
+
+      if (!Object.prototype.hasOwnProperty.call(result, week)) {
+        result[week] = {};
+      }
+
+      result[week][day.weekday()] = {
+        date: day.toDate()
+      };
+      day.add(1, 'd');
+    }
+
+    setDays(result);
+  }, [date]);
+
+  var renderDay = function renderDay(week, dayOfWeek) {
+    var day = days[week][dayOfWeek];
+    var isFutureDay = day && (0, _moment.default)(day.date).isAfter((0, _moment.default)(), 'day');
+    var isPastDay = limitRange ? day && (0, _moment.default)(day.date).isBefore((0, _moment.default)().subtract(limitRange, 'days'), 'day') : null;
+    var isRangeEnd = day && ((0, _moment.default)(day.date).isSame(startDate, 'day') || (0, _moment.default)(day.date).isSame((0, _moment.default)(endDate).subtract(1, 'hour'), 'day'));
+    var isRangeInside = day && startDate && endDate && (0, _moment.default)(day.date).isAfter(startDate, 'day') && (0, _moment.default)(day.date).isBefore((0, _moment.default)(endDate).subtract(1, 'hour'), 'day');
+    var isPrevRangeEnd = day && ((0, _moment.default)(day.date).isSame(startPrevDate, 'day') || (0, _moment.default)(day.date).isSame((0, _moment.default)(endPrevDate).subtract(1, 'day'), 'day'));
+    var isPrevRangeInside = day && startPrevDate && endPrevDate && (0, _moment.default)(day.date).isAfter(startPrevDate, 'day') && (0, _moment.default)(day.date).isBefore((0, _moment.default)(endPrevDate).subtract(1, 'day'), 'day');
+    var classNames = (0, _classnames.default)('calendar__day', {
+      'calendar__day--clickable': day
+    }, {
+      'calendar__day--disabled': isFutureDay
+    }, {
+      'calendar__day--disabled': isPastDay
+    }, {
+      'calendar__day--range-end': isRangeEnd
+    }, {
+      'calendar__day--range-inside': isRangeInside
+    }, {
+      'calendar__day--prev-range-end': isPrevRangeEnd
+    }, {
+      'calendar__day--prev-range-inside': isPrevRangeInside
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: "".concat(week, "_").concat(dayOfWeek),
+      className: classNames,
+      onClick: day && !isFutureDay ? function () {
+        return onClick(day.date);
+      } : null,
+      onMouseOver: day && !isFutureDay ? function () {
+        return onHover(day.date);
+      } : null,
+      onMouseLeave: function onMouseLeave() {
+        return onHover(null);
+      }
+    }, day && day.date.getDate());
+  };
+
+  var handlePrev = function handlePrev() {
+    setDate((0, _moment.default)(date).subtract(1, 'month').toDate());
+  };
+
+  var handleNext = function handleNext() {
+    setDate((0, _moment.default)(date).add(1, 'month').toDate());
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "calendar"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "calendar-header"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "calendar-header__prev"
+  }, allowPrev && /*#__PURE__*/_react.default.createElement("div", {
+    onClick: handlePrev
+  }, /*#__PURE__*/_react.default.createElement(Icon.ChevronLeft, {
+    size: 16
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "calendar-header__title"
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: "calendar-header__next"
+  }, allowNext && /*#__PURE__*/_react.default.createElement("div", {
+    onClick: handleNext
+  }, /*#__PURE__*/_react.default.createElement(Icon.ChevronRight, {
+    size: 16
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "calendar__week"
+  }, (0, _toConsumableArray2.default)(Array(7).keys()).map(function (dayOfWeek) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: "day-of-week_".concat(dayOfWeek),
+      className: "calendar__day calendar__day--title"
+    }, (0, _moment.default)().weekday(dayOfWeek).format('dd').charAt(0));
+  })), Object.keys(days).map(function (week, index) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: "week_".concat(index),
+      className: "calendar__week"
+    }, (0, _toConsumableArray2.default)(Array(7).keys()).map(function (dayOfWeek) {
+      return renderDay(week, dayOfWeek);
+    }));
+  }));
+};
+
+var _default = Calendar;
+exports.default = _default;

package/dist/Molecular/FormElements/FormElement.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Label = _interopRequireDefault(require("../../Atomic/FormElements/Label/Label"));
+
+require("./FormElement.scss");
+
+var RC = 'form-element';
+
+var FormElement = function FormElement(_ref) {
+  var label = _ref.label,
+      required = _ref.required,
+      children = _ref.children,
+      error = _ref.error,
+      className = _ref.className,
+      hint = _ref.hint;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(className, RC)
+  }, label && /*#__PURE__*/_react.default.createElement(_Label.default, {
+    className: "".concat(RC, "__label"),
+    label: label,
+    hint: hint,
+    isRequired: required
+  }), children, error && /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(RC, "__error")
+  }, error));
+};
+
+var _default = FormElement;
+exports.default = _default;

package/dist/Molecular/FormElements/FormElement.scss

@@ -0,0 +1,8 @@
+.form-element__error {
+  margin-top: 2px;
+  margin-left: 1px;
+  position: absolute;
+  display: block;
+  font-size: 10px;
+  color: #f06d8d;
+}

package/dist/Molecular/FormElements/FormElement.stories.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputTemplate = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Input = _interopRequireDefault(require("../../Atomic/FormElements/Input/Input"));
+
+var _FormElement = _interopRequireDefault(require("./FormElement"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+global.lng = 'en';
+var _default = {
+  title: 'Form Elements/Form Element',
+  component: _FormElement.default,
+  argTypes: {
+    label: {
+      description: 'string/JSX'
+    },
+    children: {
+      description: 'JSX'
+    },
+    error: {
+      description: 'string - print error if is errored'
+    },
+    required: {
+      description: 'boolean'
+    },
+    className: {
+      description: 'string'
+    },
+    hint: {
+      description: 'object {text: string, hintSide: bottom/right',
+      control: {
+        type: 'object'
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_FormElement.default, args, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    error: args.error
+  }));
+};
+
+var InputTemplate = Template.bind({});
+exports.InputTemplate = InputTemplate;
+InputTemplate.args = {
+  label: 'Text label',
+  error: 'error',
+  required: true,
+  hint: {
+    text: 'hint',
+    hintSide: 'bottom'
+  },
+  numStep: 1,
+  min: '0',
+  max: '5',
+  placeholder: 'Placeholder',
+  mask: ''
+};

package/dist/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _Button.default;
+  }
+});
+
+var _Button = _interopRequireDefault(require("./Atomic/UI/Button/Button"));

package/dist/scss/_fonts.scss

@@ -0,0 +1,109 @@
+/* roboto-100 - latin_cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 100;
+    src: local('Roboto Thin'), local('Roboto-Thin'),
+         url('../assets/fonts/roboto-v20-latin_cyrillic-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../assets/fonts/roboto-v20-latin_cyrillic-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-100italic - latin_cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 100;
+    src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'),
+         url('../assets/fonts/roboto-v20-latin_cyrillic-100italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../assets/fonts/roboto-v20-latin_cyrillic-100italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-300 - latin_cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    src: local('Roboto Light'), local('Roboto-Light'),
+         url('../assets/fonts/roboto-v20-latin_cyrillic-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../assets/fonts/roboto-v20-latin_cyrillic-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-300italic - latin_cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 300;
+    src: local('Roboto Light Italic'), local('Roboto-LightItalic'),
+         url('../assets/fonts/roboto-v20-latin_cyrillic-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../assets/fonts/roboto-v20-latin_cyrillic-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-regular - latin_cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Roboto'), local('Roboto-Regular'),
+         url('../assets/fonts/roboto-v20-latin_cyrillic-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../assets/fonts/roboto-v20-latin_cyrillic-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-italic - latin_cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 400;
+    src: local('Roboto Italic'), local('Roboto-Italic'),
+         url('../assets/fonts/roboto-v20-latin_cyrillic-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../assets/fonts/roboto-v20-latin_cyrillic-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-500 - latin_cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: local('Roboto Medium'), local('Roboto-Medium'),
+         url('../assets/fonts/roboto-v20-latin_cyrillic-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../assets/fonts/roboto-v20-latin_cyrillic-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-500italic - latin_cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 500;
+    src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
+         url('../assets/fonts/roboto-v20-latin_cyrillic-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../assets/fonts/roboto-v20-latin_cyrillic-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-700 - latin_cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Roboto Bold'), local('Roboto-Bold'),
+         url('../assets/fonts/roboto-v20-latin_cyrillic-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../assets/fonts/roboto-v20-latin_cyrillic-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-700italic - latin_cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 700;
+    src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
+         url('../assets/fonts/roboto-v20-latin_cyrillic-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../assets/fonts/roboto-v20-latin_cyrillic-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-900 - latin_cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 900;
+    src: local('Roboto Black'), local('Roboto-Black'),
+         url('../assets/fonts/roboto-v20-latin_cyrillic-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../assets/fonts/roboto-v20-latin_cyrillic-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* roboto-900italic - latin_cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 900;
+    src: local('Roboto Black Italic'), local('Roboto-BlackItalic'),
+         url('../assets/fonts/roboto-v20-latin_cyrillic-900italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('../assets/fonts/roboto-v20-latin_cyrillic-900italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  

package/dist/scss/_vars.scss

@@ -0,0 +1,48 @@
+/* THEME COLORS*/
+@use "sass:math";
+
+$color--secondary: #f06d8d;
+$color--primary: #6b81dd;
+$color--dark: #1e1e2d;
+$color--light: #fff;
+$color--gray: #a6acb1;
+$color--gray--dark: #9aa0b9;
+$color--gray--light: #e2e5ec;
+$color--gray--lighter: #f7f8fa;
+$color--gray--gentle: #f2f2f8;
+$color--blue--light: #F7FAFC;
+$color--blue--dark: #0056b3;
+$color--warning: #ffedc8;
+$color--success: #78c58d;
+$color--error: #f06d8d;
+$color--error-bg: #fce2e8;
+$color--green-light: #e4f3e8;
+
+/* COLORS*/
+$green: #00B031;
+
+/*GRID*/
+$g_air: 15px; //grid air
+$wide: calc(100% + 30px); //WIDE-WIDTH
+$s_air: 25px; //section air
+$air: 15px;
+$container: 100%;
+$container-xxl: 1255px;
+$container-xl: 1115px;
+$mobile-more-height: 6em;
+
+/*FONTS*/
+
+$font-title: 'Open Sans';
+$font-text: 'Open Sans';
+$h1-fs: 32px;
+$h1-lh: 1.31;
+$h2-fs: 26px;
+$h2-lh: 1.62;
+$h3-fs: 24px;
+$h3-lh: auto;
+$h4-fs: 22px;
+$h4-lh: 1.18;
+
+$txt: 14px;
+$txt--lh: math.div(20, 14);

package/dist/scss/main.scss

@@ -0,0 +1,40 @@
+@import './fonts';
+@import '~anme/scss/styles.scss';
+
+body {
+    font-family: 'Roboto', sans-serif;
+    margin: 0;
+}
+
+input {
+    font-family: inherit;
+    margin: 0;
+    outline: none;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    &[type=number] {
+        -moz-appearance: textfield;
+    }
+}
+
+button {
+    border: none;
+    outline: none;
+    padding: 0;
+    background: none;
+    font-family: inherit;
+    &:not(:disabled) {
+        cursor: pointer;
+    }
+}
+
+.main {
+    &__wrap {
+        display: flex;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.0.95",
+  "version": "0.0.96",
   "description": "fix input-calendar",
   "main": "dist/index.js",
   "scripts": {

package/src/Functions/useMouseUpOutside.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 
 export default function useMouseUpOutside(ref, setOut, open) {
   function handleMouseUpOutside(event) {
@@ -6,9 +6,11 @@ export default function useMouseUpOutside(ref, setOut, open) {
       setOut(open);
     }
   }
+
   useEffect(() => {
     document.addEventListener('mouseup', handleMouseUpOutside);
     return () => {
       document.removeEventListener('mouseup', handleMouseUpOutside);
     };
   }, [ref]);
+}