intelicoreact 1.5.38 → 1.5.40

package/dist/Atomic/FormElements/Calendar/Calendar.js

@@ -1,249 +1,170 @@
 "use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return _default;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
-const _moment = /*#__PURE__*/ _interop_require_default(require("moment"));
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _reactfeather = require("react-feather");
-const _reactinputmask = /*#__PURE__*/ _interop_require_default(require("react-input-mask"));
+exports.default = _default;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _moment = _interopRequireDefault(require("moment"));
+var _reactFeather = require("react-feather");
+var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
 require("./Calendar.scss");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(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 = {
-        __proto__: null
-    };
-    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];
-            }
-        }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 _default(props) {
+  const {
+    date,
+    setDate,
+    setIsOpened,
+    allowPrev = true,
+    allowNext = true,
+    params,
+    className,
+    isListTop,
+    testId = "calendar"
+  } = props;
+  // const { minDate = '01/01/1900', maxDate = moment().format('MM/DD/YYYY') } = params;
+  const {
+    format,
+    minDate,
+    maxDate,
+    momentMinDate,
+    momentMaxDate,
+    isDontLimitFuture
+  } = params;
+  const [days, setDays] = (0, _react.useState)({});
+  const [showDate, setShowDate] = (0, _react.useState)(date);
+  const [isChangeYear, setIsChangeYear] = (0, _react.useState)(false);
+  const [inputYearValue, setInputYearValue] = (0, _react.useState)((0, _moment.default)(showDate).format("YYYY"));
+  const yearInputRef = (0, _react.useRef)(null);
+  const selectedDay = (0, _moment.default)(showDate);
+  const isError = "Invalid date";
+  const showMonth = (0, _react.useMemo)(() => (0, _moment.default)(showDate).format("MMM"), [date, showDate]);
+  const showYear = (0, _react.useMemo)(() => (0, _moment.default)(showDate).format("YYYY"), [date, showDate]);
+  const isShovPrevArrow = allowPrev && !(minDate && (0, _moment.default)(showDate).startOf("month").isSameOrBefore(momentMinDate, "months"));
+  const isShovNextArrow = allowNext && (isDontLimitFuture || !(0, _moment.default)(showDate).startOf("month").isSameOrAfter(maxDate ? momentMaxDate : (0, _moment.default)().add(1, "day").startOf("day"), "months"));
+  (0, _react.useEffect)(() => {
+    const result = {};
+    const day = selectedDay.startOf("month");
+    const daysInMonth = day.daysInMonth();
+    for (let d = 0; d < daysInMonth; d += 1) {
+      let 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");
     }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
-const CN = 'calendar';
-const paramsDefault = {};
-const dateDefault = (0, _moment.default)().format('L');
-const Calendar = ({ date = dateDefault, setDate, setIsOpened, className, isListTop, allowPrev = true, allowNext = true, params = paramsDefault, testId = CN })=>{
-    if (!setDate || !setIsOpened) {
-        throw new Error('Required props setDate and setIsOpened must be provided to Calendar component');
-    }
-    const { minDate, maxDate, momentMinDate, momentMaxDate, isDontLimitFuture } = params;
-    const [days, setDays] = (0, _react.useState)({});
-    const [showDate, setShowDate] = (0, _react.useState)(date);
-    const [isChangeYear, setIsChangeYear] = (0, _react.useState)(false);
-    const [inputYearValue, setInputYearValue] = (0, _react.useState)((0, _moment.default)(showDate).format('YYYY'));
-    const yearInputRef = (0, _react.useRef)(null);
-    const selectedDay = (0, _moment.default)(showDate);
-    const isError = 'Invalid date';
-    const showMonth = (0, _react.useMemo)(()=>(0, _moment.default)(showDate).format('MMM'), [
-        showDate
-    ]);
-    const showYear = (0, _react.useMemo)(()=>(0, _moment.default)(showDate).format('YYYY'), [
-        showDate
-    ]);
-    const isShovPrevArrow = allowPrev && !(minDate && (0, _moment.default)(showDate).startOf('month').isSameOrBefore(momentMinDate, 'months'));
-    const isShovNextArrow = allowNext && (isDontLimitFuture || !(0, _moment.default)(showDate).startOf('month').isSameOrAfter(maxDate ? momentMaxDate : (0, _moment.default)().add(1, 'day').startOf('day'), 'months'));
-    (0, _react.useEffect)(()=>{
-        const result = {};
-        const day = selectedDay.startOf('month');
-        const daysInMonth = day.daysInMonth();
-        for(let d = 0; d < daysInMonth; d += 1){
-            let 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);
-    }, [
-        showDate
-    ]);
-    const renderDay = (week, dayOfWeek)=>{
-        var _days_week;
-        const day = (_days_week = days[week]) === null || _days_week === void 0 ? void 0 : _days_week[dayOfWeek];
-        if (!day) return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-            className: "calendar__day"
-        });
-        const isFutureDay = day && !isDontLimitFuture && maxDate ? (0, _moment.default)(day.date).isAfter(momentMaxDate || (0, _moment.default)().add(1, 'days'), 'day') : (0, _moment.default)(day.date).isAfter((0, _moment.default)(), 'day');
-        const isBeforeDay = day && (0, _moment.default)(day.date).isBefore(momentMinDate || '', 'day');
-        const classNames = (0, _classnames.default)('calendar__day', {
-            'calendar__day--clickable': day
-        }, {
-            'calendar__day--disabled': !isDontLimitFuture && isFutureDay
-        }, {
-            'calendar__day--disabled': isBeforeDay
-        }, {
-            'calendar__day--selected': (0, _moment.default)(date).format() === (0, _moment.default)(day.date).format()
-        });
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-            className: classNames,
-            onClick: day && (isDontLimitFuture || !isFutureDay) ? ()=>{
-                setDate((0, _moment.default)(day.date).format('L'));
-                setIsOpened(false);
-            } : undefined,
-            children: day && day.date.getDate()
-        }, `${week}_${dayOfWeek}`);
-    };
-    const handlePrev = ()=>{
-        setShowDate((0, _moment.default)(showDate).subtract(1, 'month').format('L'));
-    };
-    const handleNext = ()=>{
-        setShowDate((0, _moment.default)(showDate).add(1, 'month').format('L'));
-    };
-    const closeYearInput = ()=>{
-        const newDate = (()=>{
-            const dateArr = showDate.split('/');
-            dateArr[2] = inputYearValue;
-            return (0, _moment.default)(dateArr.join('/')).format('MM/DD/YYYY') === isError ? showDate : (0, _moment.default)(dateArr.join('/')).format('MM/DD/YYYY');
-        })();
-        let resultDate = newDate;
-        if (minDate && (0, _moment.default)(minDate) > (0, _moment.default)(newDate)) resultDate = (0, _moment.default)(showDate).format('MM/DD/YYYY');
-        else if (maxDate && (0, _moment.default)(maxDate) < (0, _moment.default)(newDate)) resultDate = (0, _moment.default)(showDate).format('MM/DD/YYYY');
-        setIsChangeYear(false);
-        setShowDate(resultDate);
-        setInputYearValue(resultDate);
-    };
-    (0, _react.useEffect)(()=>{
-        let timeoutId;
-        if (isChangeYear && yearInputRef.current) {
-            const input = yearInputRef.current.querySelector('input');
-            if (input) {
-                setInputYearValue(showYear);
-                timeoutId = setTimeout(()=>{
-                    input.focus();
-                    input.select();
-                }, 0);
-            }
-        }
-        return ()=>{
-            clearTimeout(timeoutId);
-        };
-    }, [
-        isChangeYear,
-        showYear
-    ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-        "data-testid": testId,
-        className: (0, _classnames.default)(CN, className, {
-            'calendar_list-top': isListTop
-        }),
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                className: "calendar-header",
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                        className: "calendar-header__prev",
-                        "data-testid": `${testId}-prev-arrow`,
-                        children: isShovPrevArrow && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                            onClick: handlePrev,
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronLeft, {})
-                        })
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                        className: (0, _classnames.default)('calendar-header__title'),
-                        ref: yearInputRef,
-                        children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                                className: "calendar-header__title-month",
-                                children: `${showMonth} `
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                                className: (0, _classnames.default)('calendar-header__title-year', {
-                                    'calendar-header__title-year_change-mode': isChangeYear
-                                }),
-                                onClick: ()=>setIsChangeYear(true),
-                                children: isChangeYear ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactinputmask.default, {
-                                    className: "calendar-header__title-year-change-input",
-                                    value: inputYearValue,
-                                    mask: "9999",
-                                    onBlur: closeYearInput,
-                                    onKeyUp: (e)=>{
-                                        if (e.key === 'Escape') setIsChangeYear(false);
-                                        if (e.key === 'Enter') closeYearInput();
-                                    },
-                                    onChange: (e)=>setInputYearValue(e.target.value)
-                                }) : showYear
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                        "data-testid": `${testId}-next-arrow`,
-                        className: "calendar-header__next",
-                        children: isShovNextArrow && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                            onClick: handleNext,
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronRight, {})
-                        })
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                className: "calendar__week",
-                children: [
-                    ...Array.from({
-                        length: 7
-                    }).keys()
-                ].map((dayOfWeek)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                        className: "calendar__day calendar__day--title",
-                        children: (0, _moment.default)().weekday(dayOfWeek).format('dd')
-                    }, `day-of-week_${dayOfWeek}`))
-            }),
-            Object.keys(days).map((week, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    className: "calendar__week",
-                    children: [
-                        ...Array.from({
-                            length: 7
-                        }).keys()
-                    ].map((dayOfWeek)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_react.default.Fragment, {
-                            children: renderDay(Number(week), dayOfWeek)
-                        }, `calendar-day--${dayOfWeek}`))
-                }, `week_${index}`))
-        ]
+    setDays(result);
+  }, [showDate]);
+  const renderDay = (week, dayOfWeek) => {
+    const day = days[week][dayOfWeek];
+    if (!day) return /*#__PURE__*/_react.default.createElement("div", {
+      className: "calendar__day"
     });
-};
-const _default = Calendar;
+    const isFutureDay = day && !isDontLimitFuture && maxDate ? (0, _moment.default)(day.date).isAfter(momentMaxDate || (0, _moment.default)().add(1, "days"), "day") : (0, _moment.default)(day.date).isAfter((0, _moment.default)(), "day");
+    const isBeforeDay = day && (0, _moment.default)(day.date).isBefore(momentMinDate || "", "day");
+    const classNames = (0, _classnames.default)("calendar__day", {
+      "calendar__day--clickable": day
+    }, {
+      "calendar__day--disabled": !isDontLimitFuture && isFutureDay
+    }, {
+      "calendar__day--disabled": isBeforeDay
+    }, {
+      "calendar__day--selected": (0, _moment.default)(date).format() === (0, _moment.default)(day.date).format()
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: `${week}_${dayOfWeek}`,
+      className: classNames,
+      onClick: day && (isDontLimitFuture || !isFutureDay) ? () => {
+        setDate((0, _moment.default)(day.date).format("L"));
+        setIsOpened(false);
+      } : null
+    }, day && day.date.getDate());
+  };
+  const handlePrev = () => {
+    setShowDate((0, _moment.default)(showDate).subtract(1, "month").format("L"));
+  };
+  const handleNext = () => {
+    setShowDate((0, _moment.default)(showDate).add(1, "month").format("L"));
+  };
+  const closeYearInput = () => {
+    const newDate = (() => {
+      const dateArr = showDate.split("/");
+      const oldYear = dateArr[2];
+      dateArr[2] = inputYearValue;
+      return (0, _moment.default)(dateArr.join("/")).format("MM/DD/YYYY") === isError ? showDate : (0, _moment.default)(dateArr.join("/")).format("MM/DD/YYYY");
+    })();
+    let resultDate = newDate;
+    if (minDate && (0, _moment.default)(minDate) > (0, _moment.default)(newDate)) resultDate = (0, _moment.default)(showDate).format("MM/DD/YYYY");else if (maxDate && (0, _moment.default)(maxDate) < (0, _moment.default)(newDate)) resultDate = (0, _moment.default)(showDate).format("MM/DD/YYYY");
+    setIsChangeYear(false);
+    setShowDate(resultDate);
+    setInputYearValue(resultDate);
+  };
+  (0, _react.useEffect)(() => {
+    if (isChangeYear && yearInputRef.current) {
+      const input = yearInputRef.current.getElementsByTagName("input")[0];
+      setInputYearValue(showYear);
+      setTimeout(() => {
+        input.focus();
+        input.select();
+      }, 0);
+    }
+  }, [isChangeYear]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": testId,
+    className: (0, _classnames.default)("calendar", className, {
+      "calendar_list-top": isListTop
+    })
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "calendar-header"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "calendar-header__prev",
+    "data-testid": `${testId}-prev-arrow`
+  }, isShovPrevArrow && /*#__PURE__*/_react.default.createElement("div", {
+    onClick: handlePrev
+  }, /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronLeft, null))), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("calendar-header__title"),
+    ref: yearInputRef
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "calendar-header__title-month"
+  }, `${showMonth} `), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)("calendar-header__title-year", {
+      "calendar-header__title-year_change-mode": isChangeYear
+    }),
+    onClick: () => setIsChangeYear(true)
+  }, isChangeYear ? /*#__PURE__*/_react.default.createElement(_reactInputMask.default, {
+    className: "calendar-header__title-year-change-input",
+    value: inputYearValue,
+    mask: "9999",
+    onBlur: e => closeYearInput(),
+    onKeyUp: e => {
+      if (e.key === "Escape") setIsChangeYear(false);
+      if (e.key === "Enter") closeYearInput();
+    },
+    onChange: e => setInputYearValue(e.target.value)
+  }) : `${showYear}`)), /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": `${testId}-next-arrow`,
+    className: "calendar-header__next"
+  }, isShovNextArrow && /*#__PURE__*/_react.default.createElement("div", {
+    onClick: handleNext
+  }, /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronRight, null)))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "calendar__week"
+  }, [...Array(7).keys()].map(dayOfWeek => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: `day-of-week_${dayOfWeek}`,
+      className: "calendar__day calendar__day--title"
+    }, (0, _moment.default)().weekday(dayOfWeek).format("dd"));
+  })), Object.keys(days).map((week, index) => /*#__PURE__*/_react.default.createElement("div", {
+    key: `week_${index}`,
+    className: "calendar__week"
+  }, [...Array(7).keys()].map(dayOfWeek => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    key: `calendar-day--${dayOfWeek}`
+  }, renderDay(week, dayOfWeek))))));
+}

package/dist/Atomic/FormElements/Calendar/Calendar.scss

@@ -461,7 +461,6 @@
     box-sizing: border-box;
 
     &__title {
-      display: flex;
       &-month {
         margin-right: 5px;
       }

package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.js

@@ -1,65 +1,56 @@
 "use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return _default;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
-const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _utils = require("../../../Functions/utils");
 require("./CheckboxInput.scss");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-const RC = 'checkbox-input';
-const attrsOfNativeInputDefault = {};
-const CheckboxInput = ({ label, id, value, onChange, disabled, className, isStark, testId = RC, attributesOfNativeInput = attrsOfNativeInputDefault, ...props })=>{
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("label", {
-        "data-testid": testId,
-        className: (0, _classnames.default)(RC, className, {
-            [`checkbox-input_disabled`]: disabled
-        }),
-        htmlFor: id === null || id === void 0 ? void 0 : id.toString(),
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                className: (0, _classnames.default)(`checkbox-input__input`, {
-                    [`checkbox-input__input_checked`]: value,
-                    [`checkbox-input__input_indeterminate`]: isStark
-                }),
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
-                        ...id ? {
-                            'id': id.toString(),
-                            'data-id': id
-                        } : {},
-                        type: "checkbox",
-                        className: "checkbox-input__checkbox",
-                        onChange: (e)=>onChange(!value, e),
-                        checked: value !== null && value !== void 0 ? value : false,
-                        disabled: disabled,
-                        ref: (elem)=>{
-                            if (elem) elem.indeterminate = !!isStark;
-                        },
-                        "data-testid": `${testId}-input`,
-                        ...attributesOfNativeInput,
-                        ...props
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                        className: "checkbox-input__mark"
-                    })
-                ]
-            }),
-            label && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                className: "checkbox-input__label",
-                children: label
-            })
-        ]
-    });
+const CheckboxInput = _ref => {
+  let {
+    label,
+    fieldKey,
+    id,
+    value,
+    onChange,
+    disabled,
+    className,
+    isStark,
+    testId = "checkbox-input",
+    attributesOfNativeInput = {}
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("label", {
+    "data-testid": testId,
+    className: (0, _classnames.default)("checkbox-input", className, {
+      [`checkbox-input_disabled`]: disabled
+    }),
+    htmlFor: id
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(`checkbox-input__input`, {
+      [`checkbox-input__input_checked`]: value,
+      [`checkbox-input__input_indeterminate`]: isStark
+    })
+  }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, id ? {
+    id,
+    ["data-id"]: id
+  } : {}, {
+    type: "checkbox",
+    className: "checkbox-input__checkbox",
+    onChange: e => onChange(!value, e),
+    checked: value ?? false,
+    disabled: disabled,
+    ref: elem => {
+      if (elem) elem.indeterminate = isStark;
+    },
+    "data-testid": `${testId}-input`
+  }, attributesOfNativeInput)), /*#__PURE__*/_react.default.createElement("span", {
+    className: "checkbox-input__mark"
+  })), label && /*#__PURE__*/_react.default.createElement("div", {
+    className: "checkbox-input__label"
+  }, label));
 };
-const _default = CheckboxInput;
+var _default = exports.default = CheckboxInput;

package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.scss

@@ -1,14 +1,4 @@
 .checkbox-input {
-  --checkbox-input-width: 16px;
-  --checkbox-input-height: 16px;
-  --checkbox-input-margin-right: 5px;
-  --checkbox-input-border-color: #9aa0b9;
-  --checkbox-input-bg-color: #ffff;
-  --checkbox-input-hover-bg-color: rgba(107, 129, 221, 0.2);
-  --checkbox-input-mark-bg-color: #6b81dd;
-  --checkbox-input-label-font-size: 13px;
-  --checkbox-input-disabled-opacity: 0.5;
-
   display: flex;
   align-items: center;
 
@@ -22,12 +12,12 @@
     cursor: auto;
     pointer-events: none;
 
-    opacity: var(--checkbox-input-disabled-opacity);
+    opacity: 0.5;
   }
 
   &:hover {
     .checkbox-input__input {
-      background-color: var(--checkbox-input-hover-bg-color);
+      background-color: rgba(#6b81dd, 0.2);
     }
   }
 
@@ -37,16 +27,16 @@
     overflow: hidden;
 
     box-sizing: border-box;
-    width: var(--checkbox-input-width);
-    min-width: var(--checkbox-input-width);
-    height: var(--checkbox-input-height);
-    margin-right: var(--checkbox-input-margin-right);
+    width: 16px;
+    min-width: 16px;
+    height: 16px;
+    margin-right: 5px;
 
     cursor: pointer;
 
-    border: 1px solid var(--checkbox-input-border-color);
+    border: 1px solid #9aa0b9;
     border-radius: 2px;
-    background-color: var(--checkbox-input-bg-color);
+    background-color: #ffff;
 
     transition: background-color 0.2s ease;
 
@@ -82,7 +72,7 @@
     width: 100%;
     height: 100%;
 
-    background-color: var(--checkbox-input-mark-bg-color);
+    background-color: #6b81dd;
 
     &::after {
       position: absolute;
@@ -92,7 +82,7 @@
       height: 8px;
       margin: auto;
 
-      content: '';
+      content: "";
 
       border: solid white;
       border-width: 0 2px 2px 0;
@@ -103,11 +93,11 @@
   }
 
   &__label {
-    font-size: var(--checkbox-input-label-font-size);
+    font-size: 13px;
     user-select: none;
   }
 
-  input[type='checkbox' i] {
+  input[type="checkbox" i] {
     &:indeterminate + span {
       display: block;
 
@@ -122,10 +112,10 @@
         height: 100%;
         margin: auto;
 
-        content: '';
+        content: "";
 
         border: none;
-        background-color: var(--checkbox-input-mark-bg-color);
+        background-color: #6b81dd;
 
         transform: rotate(0deg);
       }
@@ -138,7 +128,7 @@
 
         width: 45%;
 
-        content: '';
+        content: "";
 
         border: solid white;
         border-width: 0 1px 2px 0;