intelicoreact 0.3.1 → 0.3.4

package/dist/Atomic/FormElements/CheckboxesLine/CheckboxesLine.js

@@ -30,9 +30,10 @@ var CheckboxesLine = function CheckboxesLine(props) {
       value = _ref.value,
       disabled = _ref.disabled,
       isPositionColumn = _ref.isPositionColumn,
-      className = _ref.className;
+      className = _ref.className,
+      testId = _ref.testId;
 
-  var handleChange = function handleChange(val, id, e) {
+  var handleChange = function handleChange(val, id) {
     onChange(val ? [].concat((0, _toConsumableArray2.default)(value), [id]) : (0, _toConsumableArray2.default)(value === null || value === void 0 ? void 0 : value.filter(function (el) {
       return el !== id;
     })));
@@ -40,20 +41,21 @@ var CheckboxesLine = function CheckboxesLine(props) {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(RC, (0, _defineProperty2.default)({}, "".concat(RC, "_column"), isPositionColumn), className)
-  }, (items === null || items === void 0 ? void 0 : items.map(function (item, idx) {
+  }, (items === null || items === void 0 ? void 0 : items.map(function (item) {
     var _value$includes;
 
-    return /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, (0, _defineProperty2.default)({
+    return /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+      testId: (item === null || item === void 0 ? void 0 : item.testId) || testId,
       id: item.id,
       className: "".concat(RC, "__checkbox-input"),
       key: item.label,
       label: item.label,
       value: (value === null || value === void 0 ? void 0 : (_value$includes = value.includes) === null || _value$includes === void 0 ? void 0 : _value$includes.call(value, item.id)) || false,
-      disabled: disabled,
       onChange: function onChange(val, e) {
         return handleChange(val, item.id, e);
-      }
-    }, "disabled", item.disabled));
+      },
+      disabled: disabled || item.disabled
+    });
   })) || null);
 };
 

package/dist/Atomic/FormElements/Input/Input.js

@@ -78,7 +78,8 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       _ref$isCropFirstNool = _ref.isCropFirstNool,
       isCropFirstNool = _ref$isCropFirstNool === void 0 ? false : _ref$isCropFirstNool,
       _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'input' : _ref$testId;
+      testId = _ref$testId === void 0 ? 'input' : _ref$testId,
+      action = _ref.action;
   var DEFAULT_BLINK_TIME = 100; // STATES
 
   var _useState = (0, _react.useState)(false),
@@ -241,7 +242,7 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     onMouseLeave: function onMouseLeave() {
       return setOnInputHover(false);
     }
-  }, renderInput(), icon, withDelete && onInputHover && /*#__PURE__*/_react.default.createElement("span", {
+  }, renderInput(), icon, action, withDelete && onInputHover && /*#__PURE__*/_react.default.createElement("span", {
     "data-testid": "icon-close",
     className: (0, _classnames.default)("input__close", {
       hidden: !value

package/dist/Atomic/FormElements/RadioGroup/RadioGroup.js

@@ -55,7 +55,9 @@ var RadioGroup = function RadioGroup(_ref) {
           return _objectSpread(_objectSpread({}, item), {}, {
             checked: value
           });
-        } else return {
+        }
+
+        return {
           id: item.id,
           label: item.label,
           value: item.value

package/dist/Atomic/FormElements/RangeList/RangeList.js

@@ -54,7 +54,8 @@ var RangeList = function RangeList(props) {
       decimalPlaces = props.decimalPlaces,
       error = props.error,
       defaultErrorText = props.defaultErrorText,
-      nullValueText = props.nullValueText;
+      nullValueText = props.nullValueText,
+      testId = props.testId;
   var NULL_VALUE_TEXT = nullValueText !== null && nullValueText !== void 0 ? nullValueText : 'No data';
 
   var _useState = (0, _react.useState)(DEFAULT_STATE),
@@ -113,6 +114,8 @@ var RangeList = function RangeList(props) {
         setInnerError('');
         if (validateErrors) setOuterError(validateErrors(+state.from, +state.to));
       }
+
+      return null;
     },
     onKeyUpFromInput: function onKeyUpFromInput(code) {
       if (code === 13) {
@@ -136,7 +139,7 @@ var RangeList = function RangeList(props) {
   }, /*#__PURE__*/_react.default.createElement(_RangeListRow.RangeListCell, {
     className: "".concat(RC, "__cell-input")
   }, /*#__PURE__*/_react.default.createElement(_Input.default, {
-    testId: "range-list-from",
+    testId: "range-list".concat(testId && "--".concat(testId), "-from"),
     ref: inputFromRef,
     onlyNumbers: isFloatValues ? {
       type: 'float',
@@ -151,13 +154,13 @@ var RangeList = function RangeList(props) {
     onChange: function onChange(val) {
       return handle.inputsChange(val, 'from');
     },
-    onKeyUp: function onKeyUp(code, e) {
+    onKeyUp: function onKeyUp(code) {
       return handle.onKeyUpFromInput(code);
     }
   })), /*#__PURE__*/_react.default.createElement(_RangeListRow.RangeListCell, {
     className: "".concat(RC, "__cell-input")
   }, /*#__PURE__*/_react.default.createElement(_Input.default, {
-    testId: "range-list-to",
+    testId: "range-list".concat(testId && "--".concat(testId), "-to"),
     ref: inputToRef,
     onlyNumbers: isFloatValues ? {
       type: 'float',
@@ -172,13 +175,13 @@ var RangeList = function RangeList(props) {
     onChange: function onChange(val) {
       return handle.inputsChange(val, 'to');
     },
-    onKeyUp: function onKeyUp(code, e) {
+    onKeyUp: function onKeyUp(code) {
       return handle.onKeyUpToInput(code);
     }
   })), /*#__PURE__*/_react.default.createElement(_RangeListRow.RangeListCell, {
     className: "".concat(RC, "__cell-button")
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    testId: "range-list-button",
+    testId: "range-list".concat(testId && "--".concat(testId), "-button"),
     onClick: handle.addRange
   }, "Add"))), (innerError || outerError || error) && /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(RC, "__error")

package/dist/Atomic/FormElements/SwitcherHide/SwitcherHide.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,7 +9,7 @@ exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -19,10 +17,6 @@ var _Switcher = _interopRequireDefault(require("../Switcher/Switcher"));
 
 require("./SwitcherHide.scss");
 
-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 RC = 'switcher-hide';
 
 var SwitcherHide = function SwitcherHide(_ref) {

package/dist/Atomic/FormElements/SwitcherRangeList/SwitcherRangeList.js

@@ -37,7 +37,8 @@ var SwitcherRangeList = function SwitcherRangeList(props) {
       _props$setIsActive = props.setIsActive,
       setIsActive = _props$setIsActive === void 0 ? function () {} : _props$setIsActive,
       _props$onChange = props.onChange,
-      onChange = _props$onChange === void 0 ? function () {} : _props$onChange;
+      onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
+      testId = props.testId;
   return /*#__PURE__*/_react.default.createElement(_SwitcherHide.default, {
     isActive: isActive,
     onChange: setIsActive,
@@ -50,6 +51,7 @@ var SwitcherRangeList = function SwitcherRangeList(props) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "switcher-range-list__row"
   }, /*#__PURE__*/_react.default.createElement(_RangeList.default, {
+    testId: testId,
     className: "".concat(RC, "__range-list"),
     value: value,
     onChange: onChange,

package/dist/Atomic/FormElements/SwitcherTextarea/SwitcherTextarea.js

@@ -39,12 +39,14 @@ var SwitcherTextarea = function SwitcherTextarea(_ref) {
       _ref$setText = _ref.setText,
       setText = _ref$setText === void 0 ? function () {} : _ref$setText,
       _ref$activeText = _ref.activeText,
-      activeText = _ref$activeText === void 0 ? "is" : _ref$activeText,
+      activeText = _ref$activeText === void 0 ? 'is' : _ref$activeText,
       _ref$inactiveText = _ref.inactiveText,
-      inactiveText = _ref$inactiveText === void 0 ? "is not" : _ref$inactiveText,
+      inactiveText = _ref$inactiveText === void 0 ? 'is not' : _ref$inactiveText,
       placeholder = _ref.placeholder,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      testId = _ref.testId;
   return /*#__PURE__*/_react.default.createElement(_SwitcherHide.default, {
+    testId: testId,
     isActive: isActive,
     onChange: setIsActive,
     label: label,
@@ -55,6 +57,7 @@ var SwitcherTextarea = function SwitcherTextarea(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(RC, "__wrap switcher-hide__content")
   }, /*#__PURE__*/_react.default.createElement(_TextSwitcher.default, {
+    testId: testId,
     activeText: activeText,
     inactiveText: inactiveText,
     isActive: isIncluded !== null && isIncluded !== void 0 ? isIncluded : true,
@@ -68,6 +71,7 @@ var SwitcherTextarea = function SwitcherTextarea(_ref) {
     },
     className: "".concat(RC, "__btn")
   }, "Clear")), /*#__PURE__*/_react.default.createElement(_Textarea.default, {
+    testId: testId,
     value: text,
     placeholder: placeholder,
     onChange: function onChange(value) {

package/dist/Atomic/FormElements/TextSwitcher/TextSwitcher.js

@@ -27,9 +27,12 @@ var TextSwitcher = function TextSwitcher(_ref) {
       _ref$activeText = _ref.activeText,
       activeText = _ref$activeText === void 0 ? 'is' : _ref$activeText,
       _ref$inactiveText = _ref.inactiveText,
-      inactiveText = _ref$inactiveText === void 0 ? 'is not' : _ref$inactiveText;
+      inactiveText = _ref$inactiveText === void 0 ? 'is not' : _ref$inactiveText,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? '' : _ref$testId;
   var isUndefined = isActive === undefined || isActive === null;
   return /*#__PURE__*/_react.default.createElement("button", {
+    testId: testId,
     className: (0, _classnames.default)(RC, (_cn = {}, (0, _defineProperty2.default)(_cn, "".concat(RC, "_active"), isActive), (0, _defineProperty2.default)(_cn, "".concat(RC, "_disabled"), disabled), _cn), className),
     onClick: function onClick() {
       return onChange(!isActive);

package/dist/Atomic/FormElements/Textarea/Textarea.js

@@ -11,8 +11,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _Label = _interopRequireDefault(require("../Label/Label"));
-
 var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
 
 require("./Textarea.scss");
@@ -26,10 +24,12 @@ var Textarea = function Textarea(_ref) {
       disabled = _ref.disabled,
       className = _ref.className,
       _ref$isNotValidateASC = _ref.isNotValidateASCII,
-      isNotValidateASCII = _ref$isNotValidateASC === void 0 ? false : _ref$isNotValidateASC;
+      isNotValidateASCII = _ref$isNotValidateASC === void 0 ? false : _ref$isNotValidateASC,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? '' : _ref$testId;
   var handle = {
-    change: function change(value) {
-      var inputValue = value;
+    change: function change(val) {
+      var inputValue = val;
       if (!isNotValidateASCII) inputValue = (0, _fieldValueFormatters.formatToOnlyASCIICodeText)(inputValue);
       onChange(inputValue);
     }
@@ -37,6 +37,7 @@ var Textarea = function Textarea(_ref) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("".concat(RC), className)
   }, /*#__PURE__*/_react.default.createElement("textarea", {
+    testId: "textarea-".concat(testId),
     className: "".concat(RC, "__textarea"),
     value: value,
     onChange: function onChange(e) {

package/dist/Atomic/UI/AdvancedTag/AdvTag.js

@@ -42,7 +42,15 @@ var AdvTag = function AdvTag(_ref) {
       warnLeft = item.warnLeft,
       warnLeftMsg = item.warnLeftMsg,
       warnRightMsg = item.warnRightMsg,
-      noPingTree = item.noPingTree;
+      noPingTree = item.noPingTree,
+      _item$isEntityAndCoun = item.isEntityAndCounter,
+      isEntityAndCounter = _item$isEntityAndCoun === void 0 ? false : _item$isEntityAndCoun,
+      _item$entityAndCounte = item.entityAndCounter,
+      entityAndCounter = _item$entityAndCounte === void 0 ? {
+    nullCounterMessage: '',
+    title: '',
+    counter: null
+  } : _item$entityAndCounte;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -86,58 +94,94 @@ var AdvTag = function AdvTag(_ref) {
       return document.removeEventListener('click', handleClickOutside, true);
     };
   });
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: advancedTagClass,
-    ref: hintRef
-  }, warnLeft && /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": "".concat(testId, "-left"),
-    className: "pointer",
-    onMouseEnter: function onMouseEnter() {
-      return onWarningClick('warnLeft');
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setIsOpen(false);
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactFeather.AlertTriangle, {
-    width: 16,
-    height: 16,
-    className: "advanced-tags--warning-icon mr5"
-  })), labelLeft && /*#__PURE__*/_react.default.createElement("span", {
-    className: "mr5"
-  }, labelLeft), labelRight && /*#__PURE__*/_react.default.createElement("span", null, labelRight), item.type !== 'simple' ? /*#__PURE__*/_react.default.createElement("span", {
-    className: "ml5 mr5"
-  }, "|") : null, item.type !== 'simple' ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "df"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: activeNumberClass
-  }, active), /*#__PURE__*/_react.default.createElement("span", {
-    className: "strong color--pause"
-  }, "/"), /*#__PURE__*/_react.default.createElement("span", {
-    className: pauseNumberClass
-  }, pause)) : null, item.type !== 'simple' ? /*#__PURE__*/_react.default.createElement("span", {
-    className: "ml5 mr5"
-  }, "|") : null, merchants ? /*#__PURE__*/_react.default.createElement("span", null, merchants) : item.type !== 'simple' && /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": "".concat(testId, "-right"),
-    className: "pointer",
-    onMouseEnter: function onMouseEnter() {
-      return onWarningClick('warnRight');
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setIsOpen(false);
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactFeather.AlertTriangle, {
-    width: 16,
-    height: 16,
-    className: "advanced-tags--warning-icon"
-  })), isOpen && warnLeftMsg && clickedWarning === 'warnLeft' ? /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)('advanced-tags__warn-text advanced-tags__warn-text--warnLeft', {
-      'advanced-tags__warn-text--warnLeft--to-top': toTop
-    })
-  }, warnLeftMsg) : null, isOpen && warnRightMsg && clickedWarning === 'warnRight' ? /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)('advanced-tags__warn-text', 'advanced-tags__warn-text--warnRight', {
-      'advanced-tags__warn-text--warnRight--to-top': toTop
-    })
-  }, warnRightMsg) : null);
+
+  var renderClassicTag = function renderClassicTag() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: advancedTagClass,
+      ref: hintRef
+    }, warnLeft && /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "".concat(testId, "-left"),
+      className: "pointer",
+      onMouseEnter: function onMouseEnter() {
+        return onWarningClick('warnLeft');
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setIsOpen(false);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.AlertTriangle, {
+      width: 16,
+      height: 16,
+      className: "advanced-tags--warning-icon mr5"
+    })), labelLeft && /*#__PURE__*/_react.default.createElement("span", {
+      className: "mr5"
+    }, labelLeft), labelRight && /*#__PURE__*/_react.default.createElement("span", null, labelRight), item.type !== 'simple' ? /*#__PURE__*/_react.default.createElement("span", {
+      className: "ml5 mr5"
+    }, "|") : null, item.type !== 'simple' ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "df"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: activeNumberClass
+    }, active), /*#__PURE__*/_react.default.createElement("span", {
+      className: "strong color--pause"
+    }, "/"), /*#__PURE__*/_react.default.createElement("span", {
+      className: pauseNumberClass
+    }, pause)) : null, item.type !== 'simple' ? /*#__PURE__*/_react.default.createElement("span", {
+      className: "ml5 mr5"
+    }, "|") : null, merchants ? /*#__PURE__*/_react.default.createElement("span", null, merchants) : item.type !== 'simple' && /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "".concat(testId, "-right"),
+      className: "pointer",
+      onMouseEnter: function onMouseEnter() {
+        return onWarningClick('warnRight');
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setIsOpen(false);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.AlertTriangle, {
+      width: 16,
+      height: 16,
+      className: "advanced-tags--warning-icon"
+    })), isOpen && warnLeftMsg && clickedWarning === 'warnLeft' ? /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)('advanced-tags__warn-text advanced-tags__warn-text--warnLeft', {
+        'advanced-tags__warn-text--warnLeft--to-top': toTop
+      })
+    }, warnLeftMsg) : null, isOpen && warnRightMsg && clickedWarning === 'warnRight' ? /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)('advanced-tags__warn-text', 'advanced-tags__warn-text--warnRight', {
+        'advanced-tags__warn-text--warnRight--to-top': toTop
+      })
+    }, warnRightMsg) : null);
+  };
+
+  var renderWithEntityAndCounterTag = function renderWithEntityAndCounterTag() {
+    var _entityAndCounter$cou;
+
+    var isNullcounter = (entityAndCounter === null || entityAndCounter === void 0 ? void 0 : (_entityAndCounter$cou = entityAndCounter.counter) === null || _entityAndCounter$cou === void 0 ? void 0 : _entityAndCounter$cou.toString()) === '0';
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: advancedTagClass,
+      ref: hintRef
+    }, isNullcounter && /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "".concat(testId, "-left"),
+      className: "pointer",
+      onMouseEnter: function onMouseEnter() {
+        return onWarningClick('warnLeft');
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setIsOpen(false);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.AlertTriangle, {
+      width: 16,
+      height: 16,
+      className: "advanced-tags--warning-icon mr5"
+    })), isOpen && entityAndCounter !== null && entityAndCounter !== void 0 && entityAndCounter.nullCounterMessage && clickedWarning === 'warnLeft' ? /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)('advanced-tags__warn-text advanced-tags__warn-text--warnLeft', {
+        'advanced-tags__warn-text--warnLeft--to-top': toTop
+      })
+    }, entityAndCounter === null || entityAndCounter === void 0 ? void 0 : entityAndCounter.nullCounterMessage) : null, (entityAndCounter === null || entityAndCounter === void 0 ? void 0 : entityAndCounter.title) && /*#__PURE__*/_react.default.createElement("span", {
+      className: "mr5"
+    }, entityAndCounter === null || entityAndCounter === void 0 ? void 0 : entityAndCounter.title), /*#__PURE__*/_react.default.createElement("div", {
+      className: "advanced-tags__counter ".concat(isNullcounter ? 'advanced-tags__counter--null' : 'advanced-tags__counter--bold')
+    }, entityAndCounter === null || entityAndCounter === void 0 ? void 0 : entityAndCounter.counter));
+  };
+
+  return !isEntityAndCounter ? renderClassicTag() : renderWithEntityAndCounterTag();
 };
 
 var _default = AdvTag;

package/dist/Atomic/UI/AdvancedTag/AdvancedTags.scss

@@ -1,82 +1,115 @@
 .advanced-tags {
-    display: inline-flex;
-    background-color: #e2e5ec;
-    height: 24px;
-    align-items: center;
-    justify-content: center;
-    border-radius: 2px;
-    padding: 2px 8px;
-    margin-right: 4px;
+  display: inline-flex;
+  background-color: #e2e5ec;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+  padding: 2px 8px;
+  margin-right: 4px;
+  font-size: 10px;
+  position: relative;
+  margin-top: 2.5px;
+  margin-bottom: 2.5px;
+
+  &--error {
+    background-color: #fce2e8;
+  }
+
+
+
+  &--warning-icon {
+    min-height: 16px;
+    min-width: 16px;
+    font-size: 17px;
+    color: #f06d8d;
+  }
+
+  &__warn-text {
+    position: absolute;
+    background-color: #6b81dd;
+    color: #fff;
     font-size: 10px;
-    position: relative;
-    margin-top: 2.5px;
-    margin-bottom: 2.5px;
+    line-height: 16px;
+    border-radius: 4px;
+    max-width: 270px;
+    min-width: 80px;
+    padding: 8px;
+    z-index: 2;
 
-    &--error {
-        background-color: #fce2e8;
+    &:before {
+      content: '';
+      position: absolute;
+      width: 8.5px;
+      height: 8.5px;
+      background-color: #6b81dd;
+      transform: rotate(45deg);
     }
 
+    &--warnLeft {
+      top: 30px;
+      left: 4px;
 
+      &:before {
+        left: 8px;
+        top: -4px;
+      }
 
-    &--warning-icon {
-        min-height: 16px;
-        min-width: 16px;
-        font-size: 17px;
-        color: #f06d8d;
+      &--to-top {
+        top: -50px;
+      }
     }
 
-    &__warn-text {
-        position: absolute;
-        background-color: #6b81dd;
-        color: #fff;
-        font-size: 10px;
-        line-height: 16px;
-        border-radius: 4px;
-        max-width: 270px;
-        min-width: 80px;
-        padding: 8px;
-        z-index: 2;
-        // white-space: nowrap;
-        &:before {
-            content: '';
-            position: absolute;
-            width: 8.5px;
-            height: 8.5px;
-            background-color: #6b81dd;
-            transform: rotate(45deg);
-        }
-
-        &--warnLeft {
-            top: 30px;
-            left: 4px;
-
-            &:before {
-                left: 8px;
-                top: -4px;
-            }
-            &--to-top {
-            top: -50px;
-          }
-        }
-
-        &--warnRight {
-            top: 30px;
-            &:before {
-                right: 10px;
-                top: -4px;
-            }
-            &--to-top {
-            top: -50px;
-          }
-        }
+    &--warnRight {
+      top: 30px;
+
+      &:before {
+        right: 10px;
+        top: -4px;
+      }
 
+      &--to-top {
+        top: -50px;
+      }
     }
 
-    &--showMore {
-        background-color: #ffedc8;
-        cursor: pointer;
-        user-select: none;
+  }
+
+  &--showMore {
+    background-color: #ffedc8;
+    cursor: pointer;
+    user-select: none;
+  }
+
+
+  &__counter {
+    text-align: center;
+    margin-right: -8px;
+    padding: 0 8px 0;
+    width: fit-content;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      height: 27px;
+      width: 2px;
+      background-color: #9AA0B9;
+      opacity: 0.2;
+      left: 0;
+      top: -7px;
     }
 
+    &--null {
+      color: #9AA0B9;
+      opacity: 0.7;
+    }
 
+    &--bold {
+      font-family: 'Roboto';
+      font-weight: 700;
+      font-size: 11px;
+      color: #1E1E2D;
+    }
+  }
 }

package/dist/Atomic/UI/Button/Button.js

@@ -37,7 +37,7 @@ var Button = function Button(_ref) {
       variant = _ref$variant === void 0 ? 'primary' : _ref$variant;
   var noRenderIcon = noIcon || variant === 'ellipse-apply' || variant === 'ellipse-cancel';
   return /*#__PURE__*/_react.default.createElement("button", {
-    "data-testid": "button--".concat(testId, "--").concat((label === null || label === void 0 ? void 0 : label.replace(/\s/g, '-')) || variant),
+    "data-testid": "button".concat(testId && "--".concat(testId), "--").concat((label === null || label === void 0 ? void 0 : label.replace(/\s/g, '-')) || variant),
     tabIndex: tabIndex,
     style: style,
     className: (0, _classnames.default)(className, RC, (_cn = {}, (0, _defineProperty2.default)(_cn, "".concat(RC, "_").concat(variant), variant), (0, _defineProperty2.default)(_cn, 'button_icon-left', icon && !isIconRight), (0, _defineProperty2.default)(_cn, 'button_icon-right', icon && isIconRight), _cn)),

package/dist/Atomic/UI/Modal/Modal.js

@@ -92,7 +92,7 @@ var Modal = function Modal(_ref) {
     style: {
       zIndex: zIndex
     },
-    "data-testid": "modal--".concat(title || '', "--container"),
+    "data-testid": "modal--".concat(title === null || title === void 0 ? void 0 : title.replace(/\s/gi, '-'), "--container"),
     className: "modal-box j5"
   }, /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": 'modal-closeOverlay',

package/dist/Functions/usePasswordChecker.js

@@ -118,9 +118,9 @@ function usePasswordChecker() {
       className: "password-checker__header"
     }, /*#__PURE__*/_react.default.createElement("label", {
       className: "password-checker__header-label"
-    }, " Password must: "), " "), " ", /*#__PURE__*/_react.default.createElement("div", {
+    }, " Password must: "), ' '), ' ', /*#__PURE__*/_react.default.createElement("div", {
       className: "password-checker__body"
-    }, " ", checkRules.map(function (_ref) {
+    }, ' ', checkRules.map(function (_ref) {
       var icon = _ref.icon,
           text = _ref.text,
           isMatch = _ref.isMatch;
@@ -130,8 +130,8 @@ function usePasswordChecker() {
         className: "password-checker__body-item__icon"
       }, " ", icon, " "), " ", /*#__PURE__*/_react.default.createElement("div", {
         className: "password-checker__body-item__text"
-      }, " ", text, " "), " ");
-    }), " "), " ");
+      }, " ", text, " "), ' ');
+    }), ' '), ' ');
   };
 
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.3.1",
+  "version": "0.3.4",
   "description": "",
   "main": "dist/index.js",
   "files": [