@innovaccer/design-system 2.14.1 → 2.15.0

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1675668316017 
+   * Generated on: 1678111228905 
    *      Package: @innovaccer/design-system
-   *      Version: v2.14.1
+   *      Version: v2.15.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -200,64 +200,68 @@
         return month <= 12 && date <= monthLength[month - 1];
       };
 
-      switch (format) {
-        case 'dd/mm/yyyy':
-          {
-            var p = val.split('/');
-            var date_1 = +p[0] || 1;
-            var month = +p[1] || 1;
-            var year = +p[2] || 1900;
-            return validate(date_1, month, year);
-          }
+      if (val) {
+        switch (format) {
+          case 'dd/mm/yyyy':
+            {
+              var p = val.split('/');
+              var date_1 = +p[0] || 1;
+              var month = +p[1] || 1;
+              var year = +p[2] || 1900;
+              return validate(date_1, month, year);
+            }
 
-        case 'mm/dd/yyyy':
-          {
-            var p = val.split('/');
-            var date_2 = +p[1] || 1;
-            var month = +p[0] || 1;
-            var year = +p[2] || 1900;
-            return validate(date_2, month, year);
-          }
+          case 'mm/dd/yyyy':
+            {
+              var p = val.split('/');
+              var date_2 = +p[1] || 1;
+              var month = +p[0] || 1;
+              var year = +p[2] || 1900;
+              return validate(date_2, month, year);
+            }
 
-        case 'yyyy/mm/dd':
-          {
-            var p = val.split('/');
-            var date_3 = +p[2] || 1;
-            var month = +p[1] || 1;
-            var year = +p[0] || 1900;
-            return validate(date_3, month, year);
-          }
+          case 'yyyy/mm/dd':
+            {
+              var p = val.split('/');
+              var date_3 = +p[2] || 1;
+              var month = +p[1] || 1;
+              var year = +p[0] || 1900;
+              return validate(date_3, month, year);
+            }
 
-        case 'dd-mm-yyyy':
-          {
-            var p = val.split('-');
-            var date_4 = +p[0] || 1;
-            var month = +p[1] || 1;
-            var year = +p[2] || 1900;
-            return validate(date_4, month, year);
-          }
+          case 'dd-mm-yyyy':
+            {
+              var p = val.split('-');
+              var date_4 = +p[0] || 1;
+              var month = +p[1] || 1;
+              var year = +p[2] || 1900;
+              return validate(date_4, month, year);
+            }
 
-        case 'mm-dd-yyyy':
-          {
-            var p = val.split('-');
-            var date_5 = +p[1] || 1;
-            var month = +p[0] || 1;
-            var year = +p[2] || 1900;
-            return validate(date_5, month, year);
-          }
+          case 'mm-dd-yyyy':
+            {
+              var p = val.split('-');
+              var date_5 = +p[1] || 1;
+              var month = +p[0] || 1;
+              var year = +p[2] || 1900;
+              return validate(date_5, month, year);
+            }
 
-        case 'yyyy-mm-dd':
-          {
-            var p = val.split('-');
-            var date_6 = +p[2] || 1;
-            var month = +p[1] || 1;
-            var year = +p[0] || 1900;
-            return validate(date_6, month, year);
-          }
+          case 'yyyy-mm-dd':
+            {
+              var p = val.split('-');
+              var date_6 = +p[2] || 1;
+              var month = +p[1] || 1;
+              var year = +p[0] || 1900;
+              return validate(date_6, month, year);
+            }
 
-        default:
-          return false;
+          default:
+            return false;
+        }
       }
+
+      return false;
     };
     var time$1 = function time(val, format) {
       var _a = getTimeObjFromStr(format, val),
@@ -881,7 +885,7 @@
       var firstSortedList = sortList(firstList);
       var secondSortedList = sortList(secondList);
       return firstSortedList.length === secondSortedList.length && firstSortedList.every(function (option, index) {
-        return option.value === secondSortedList[index].value || option.label === secondSortedList[index].label;
+        return option.value === secondSortedList[index].value;
       });
     };
     var _isControlled = function _isControlled(selected) {
@@ -1032,108 +1036,6 @@
       size: 'regular'
     };
 
-    var isSpaceKey = function isSpaceKey(e) {
-      return e.key === 'Space';
-    };
-
-    var allowed = {
-      button: new Set(['Enter', 'Space', 'Spacebar', ' ']),
-      link: new Set(['Enter']),
-      checkbox: new Set([]),
-      radio: new Set([])
-    };
-
-    var isKeyboardInteractionAllowed = function isKeyboardInteractionAllowed(role, key) {
-      if (!allowed[role]) {
-        return false;
-      }
-
-      var allowedKeys = allowed[role];
-      return allowedKeys.has(key);
-    };
-
-    var useAccessibilityProps = function useAccessibilityProps(_a) {
-      var onClick = _a.onClick,
-          _onKeyDown = _a.onKeyDown,
-          _b = _a.role,
-          role = _b === void 0 ? 'button' : _b,
-          rest = __rest(_a, ["onClick", "onKeyDown", "role"]);
-
-      return __assign({}, onClick ? {
-        onClick: onClick,
-        role: role,
-        tabIndex: 0,
-        'aria-label': rest['aria-label'],
-        onKeyDown: function onKeyDown(e) {
-          if (_onKeyDown) {
-            _onKeyDown(e);
-
-            return;
-          }
-
-          var key = e.key;
-
-          if (isKeyboardInteractionAllowed(role, key)) {
-            if (onClick) {
-              e.preventDefault();
-              onClick(e);
-            }
-          }
-        }
-      } : {
-        role: role,
-        'aria-label': rest['aria-label']
-      });
-    };
-
-    var Icon = function Icon(props) {
-      var _a;
-
-      var appearance = props.appearance,
-          className = props.className,
-          name = props.name,
-          size = props.size,
-          children = props.children;
-      var accessibilityProps = useAccessibilityProps(props);
-      var baseProps = extractBaseProps(props);
-
-      var mapper = function mapper(val) {
-        if (val === 'outline') return 'outlined';
-        if (val === 'rounded') return 'round';
-        return val;
-      };
-
-      var type = mapper(props.type);
-
-      var getIconAppearance = function getIconAppearance(iconColor) {
-        var x = iconColor.indexOf('_');
-        return iconColor.slice(0, x) + iconColor.charAt(x + 1).toUpperCase() + iconColor.slice(x + 2);
-      };
-
-      var color = appearance && appearance.includes('_') ? getIconAppearance(appearance) : appearance;
-      var iconClass = classNames__default["default"]((_a = {}, _a['material-icons'] = true, _a["material-icons-" + mapper(type)] = type && type !== 'filled', _a['Icon'] = true, _a["Icon--" + color] = appearance, _a["" + className] = className, _a));
-      var styles = {
-        fontSize: size + "px",
-        width: size + "px"
-      };
-
-      if (children && /*#__PURE__*/React__namespace.isValidElement(children)) {
-        return /*#__PURE__*/React__namespace.createElement("span", __assign({}, baseProps, {
-          className: className
-        }), children);
-      }
-
-      return /*#__PURE__*/React__namespace.createElement("i", __assign({}, baseProps, {
-        className: iconClass,
-        style: styles
-      }, accessibilityProps), type ? name + "_" + type : name);
-    };
-    Icon.displayName = 'Icon';
-    Icon.defaultProps = {
-      size: 16,
-      type: 'round'
-    };
-
     var uidGenerator = function uidGenerator() {
       var dt = new Date().getTime();
       var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
@@ -1145,16 +1047,76 @@
       return uuid;
     };
 
+    var CheckboxIcon = function CheckboxIcon(props) {
+      switch (props.name) {
+        case 'checked--regular':
+          return /*#__PURE__*/React__default["default"].createElement("svg", {
+            width: "10",
+            height: "8",
+            viewBox: "0 0 10 8",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg"
+          }, /*#__PURE__*/React__default["default"].createElement("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M3.66667 5.56L8.72667 0.5L9.66667 1.44667L3.66667 7.44667L0.333333 4.11333L1.27333 3.17333L3.66667 5.56Z",
+            fill: "white"
+          }));
+
+        case 'checked--tiny':
+          return /*#__PURE__*/React__default["default"].createElement("svg", {
+            width: "10",
+            height: "8",
+            viewBox: "0 0 10 8",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg"
+          }, /*#__PURE__*/React__default["default"].createElement("path", {
+            d: "M0.333344 4L1.27334 3.06L3.66668 5.44667L8.72668 0.386665L9.66668 1.33333L3.66668 7.33333L0.333344 4Z",
+            fill: "white"
+          }));
+
+        case 'indeterminate--regular':
+          return /*#__PURE__*/React__default["default"].createElement("svg", {
+            width: "10",
+            height: "2",
+            viewBox: "0 0 10 2",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg"
+          }, /*#__PURE__*/React__default["default"].createElement("path", {
+            d: "M0 0H10V2H0V0Z",
+            fill: "white"
+          }));
+
+        case 'indeterminate--tiny':
+          return /*#__PURE__*/React__default["default"].createElement("svg", {
+            width: "8",
+            height: "2",
+            viewBox: "0 0 8 2",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg"
+          }, /*#__PURE__*/React__default["default"].createElement("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M8 0H0V2H8V0Z",
+            fill: "white"
+          }));
+
+        default:
+          return null;
+      }
+    };
+
     var Checkbox = /*#__PURE__*/React__namespace.forwardRef(function (props, forwardedRef) {
-      var _a, _b, _c, _d, _e;
+      var _a, _b, _c, _d, _e, _f;
 
-      var _f = props.size,
-          size = _f === void 0 ? 'regular' : _f,
-          _g = props.tabIndex,
-          tabIndex = _g === void 0 ? 0 : _g,
+      var _g = props.size,
+          size = _g === void 0 ? 'regular' : _g,
+          _h = props.tabIndex,
+          tabIndex = _h === void 0 ? 0 : _h,
           defaultChecked = props.defaultChecked,
           indeterminate = props.indeterminate,
           label = props.label,
+          error = props.error,
           disabled = props.disabled,
           onChange = props.onChange,
           name = props.name,
@@ -1162,18 +1124,18 @@
           className = props.className,
           checkedProp = props.checked,
           helpText = props.helpText,
-          _h = props.id,
-          id = _h === void 0 ? name + "-" + label + "-" + uidGenerator() : _h,
-          rest = __rest(props, ["size", "tabIndex", "defaultChecked", "indeterminate", "label", "disabled", "onChange", "name", "value", "className", "checked", "helpText", "id"]);
+          _j = props.id,
+          id = _j === void 0 ? name + "-" + label + "-" + uidGenerator() : _j,
+          rest = __rest(props, ["size", "tabIndex", "defaultChecked", "indeterminate", "label", "error", "disabled", "onChange", "name", "value", "className", "checked", "helpText", "id"]);
 
       var ref = React__namespace.useRef(null);
       React__namespace.useImperativeHandle(forwardedRef, function () {
         return ref.current;
       });
 
-      var _j = React__namespace.useState(checkedProp === undefined ? defaultChecked : checkedProp),
-          checked = _j[0],
-          setChecked = _j[1];
+      var _k = React__namespace.useState(checkedProp === undefined ? defaultChecked : checkedProp),
+          checked = _k[0],
+          setChecked = _k[1];
 
       React__namespace.useEffect(function () {
         setIndeterminate(indeterminate);
@@ -1186,7 +1148,7 @@
       var CheckboxClass = classNames__default["default"]((_a = {}, _a['Checkbox'] = true, _a['Checkbox--disabled'] = disabled, _a), className);
       var CheckboxOuterWrapper = classNames__default["default"]((_b = {}, _b['Checkbox-outerWrapper'] = true, _b["Checkbox-outerWrapper--" + size] = size, _b));
       var CheckboxInputWrapper = classNames__default["default"]((_c = {}, _c['Checkbox-input'] = true, _c['Checkbox-input--checked'] = checked, _c['Checkbox-input--indeterminate'] = props.indeterminate, _c));
-      var CheckboxWrapper = classNames__default["default"]((_d = {}, _d['Checkbox-wrapper'] = true, _d));
+      var CheckboxWrapper = classNames__default["default"]((_d = {}, _d['Checkbox-wrapper'] = true, _d['Checkbox-wrapper--default'] = !error, _d['Checkbox-wrapper--error'] = error, _d));
       var CheckboxLabelClass = classNames__default["default"]((_e = {}, _e['Checkbox-label'] = true, _e));
 
       var setIndeterminate = function setIndeterminate(indeterminateValue) {
@@ -1202,8 +1164,7 @@
         if (onChange) onChange(e);
       };
 
-      var IconName = indeterminate ? 'remove' : checked ? 'check' : '';
-      var IconSize = size === 'tiny' ? 12 : 16;
+      var IconMapper = classNames__default["default"]((_f = {}, _f['checked--regular'] = checked && size === 'regular', _f['checked--tiny'] = checked && size === 'tiny', _f['indeterminate--regular'] = indeterminate && size === 'regular', _f['indeterminate--tiny'] = indeterminate && size === 'tiny', _f));
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", {
         "data-test": "DesignSystem-Checkbox",
         className: CheckboxClass
@@ -1226,10 +1187,8 @@
       })), /*#__PURE__*/React__namespace.createElement("span", {
         className: CheckboxWrapper,
         "data-test": "DesignSystem-Checkbox-Icon"
-      }, IconName && /*#__PURE__*/React__namespace.createElement(Icon, {
-        name: IconName,
-        size: IconSize,
-        appearance: 'white'
+      }, IconMapper && /*#__PURE__*/React__namespace.createElement(CheckboxIcon, {
+        name: IconMapper
       }))), /*#__PURE__*/React__namespace.createElement("div", {
         className: "Checkbox-labelWrapper"
       }, label && label.trim() && /*#__PURE__*/React__namespace.createElement("label", {
@@ -1611,12 +1570,15 @@
     };
 
     var Loading = function Loading(props) {
-      var loadingType = props.loadingType;
+      var loadingType = props.loadingType,
+          optionIndex = props.optionIndex;
+      var placeholderSizes = ['medium', 'large'];
+      var size = placeholderSizes[(optionIndex + 2) % 2];
 
       switch (loadingType) {
         case 'DEFAULT':
           return /*#__PURE__*/React__namespace.createElement(PlaceholderParagraph, {
-            length: 'large',
+            length: size,
             "data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
           });
 
@@ -1953,7 +1915,8 @@
             className: "Option-loading",
             key: option + "-" + ind
           }, /*#__PURE__*/React__namespace.createElement(Loading, {
-            loadingType: type
+            loadingType: type,
+            optionIndex: ind
           }));
         });
       };
@@ -3644,6 +3607,13 @@
                 'Calendar-value--disabled': disabled,
                 'Calendar-yearValue': true
               }, _a["Calendar-yearValue--" + size] = size, _a['Calendar-value--currDateMonthYear'] = isCurrentYear(), _a));
+              var getTextColor = classNames__default["default"]({
+                inverse: !active && !isCurrentYear() && !disabled,
+                white: active,
+                'primary-lighter': isCurrentYear() && disabled,
+                primary: isCurrentYear(),
+                'inverse-lightest': disabled
+              });
               return /*#__PURE__*/React__namespace.createElement("div", {
                 key: row + "-" + col,
                 "data-test": "DesignSystem-Calendar--yearValue",
@@ -3652,7 +3622,8 @@
                 onMouseOver: _this.yearMouseOverHandler.bind(_this, year, isCurrentYear(), disabled)
               }, /*#__PURE__*/React__namespace.createElement(Text, {
                 size: size === 'small' ? 'small' : 'regular',
-                appearance: active ? 'white' : disabled ? 'disabled' : isCurrentYear() ? 'link' : 'default'
+                color: getTextColor,
+                className: "Calendar-text"
               }, year));
             }));
           });
@@ -3694,9 +3665,16 @@
               var valueClass = classNames__default["default"]((_a = {
                 'Calendar-value': true,
                 'Calendar-value--active': active,
-                'Calendar-value--dummy': disabled,
+                'Calendar-value--disabled': disabled,
                 'Calendar-monthValue': true
               }, _a["Calendar-monthValue--" + size] = size, _a['Calendar-value--currDateMonthYear'] = isCurrentMonth(), _a));
+              var getTextColor = classNames__default["default"]({
+                inverse: !active && !isCurrentMonth() && !disabled,
+                white: active,
+                'primary-lighter': isCurrentMonth() && disabled,
+                primary: isCurrentMonth(),
+                'inverse-lightest': disabled
+              });
               return /*#__PURE__*/React__namespace.createElement("div", {
                 key: row + "-" + col,
                 "data-test": "DesignSystem-Calendar--monthValue",
@@ -3705,7 +3683,8 @@
                 onMouseOver: _this.monthMouseOverHandler.bind(_this, month, isCurrentMonth(), disabled)
               }, /*#__PURE__*/React__namespace.createElement(Text, {
                 size: size === 'small' ? 'small' : 'regular',
-                appearance: active ? 'white' : disabled ? 'disabled' : isCurrentMonth() ? 'link' : 'default'
+                color: getTextColor,
+                className: "Calendar-text"
               }, months[month]));
             }));
           });
@@ -3920,6 +3899,7 @@
               });
               var valueClass = classNames__default["default"]((_a = {
                 'Calendar-value': true,
+                'Calendar-inRangeValue': !isStart && !isEnd,
                 'Calendar-value--start': isStart && !isEnd,
                 'Calendar-value--end': isEnd && !isStart,
                 'Calendar-value--startError': isStart && isRangeError,
@@ -3928,12 +3908,19 @@
                 'Calendar-value--disabled': disabled,
                 'Calendar-dateValue': true
               }, _a["Calendar-dateValue--" + size] = size, _a['Calendar-value--currDateMonthYear'] = today(), _a));
+              var getTextColor = classNames__default["default"]({
+                inverse: !active && !today() && !disabled,
+                white: active,
+                'primary-lighter': today() && disabled,
+                primary: today(),
+                'inverse-lightest': disabled
+              });
               return /*#__PURE__*/React__namespace.createElement("div", {
                 key: row + "-" + col,
                 className: wrapperClass,
                 "data-test": "designSystem-Calendar-WrapperClass"
               }, !dummy && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Text, {
-                appearance: active ? 'white' : disabled ? 'disabled' : today() ? 'link' : 'default',
+                color: getTextColor,
                 size: size === 'small' ? 'small' : 'regular',
                 "data-test": "DesignSystem-Calendar--dateValue",
                 className: valueClass,
@@ -3960,7 +3947,7 @@
               size = _c.size,
               monthsInView = _c.monthsInView;
           var view = _this.state.view;
-          var containerClass = classNames__default["default"]((_a = {}, _a['Calendar'] = true, _a["Calendar--" + view + "--" + size] = view, _a["Calendar--" + size] = size, _a));
+          var containerClass = classNames__default["default"]((_a = {}, _a['Calendar'] = true, _a["Calendar-" + view + "--" + size] = view, _a["Calendar--" + size] = size, _a));
           var headerClass = classNames__default["default"]((_b = {}, _b["Calendar-header--" + size] = size, _b));
           var bodyClass = classNames__default["default"]({
             'Calendar-body': true
@@ -3991,7 +3978,7 @@
             month = _b.month,
             date = _b.date;
 
-        var todayCompleteDate = getDateInfo(new Date());
+        var todayCompleteDate = getDateInfo(new Date(Date.now()));
         _this.state = {
           currDate: currDate,
           startDate: startDate,
@@ -4297,6 +4284,108 @@
       withSeperator: true
     };
 
+    var isSpaceKey = function isSpaceKey(e) {
+      return e.key === 'Space';
+    };
+
+    var allowed = {
+      button: new Set(['Enter', 'Space', 'Spacebar', ' ']),
+      link: new Set(['Enter']),
+      checkbox: new Set([]),
+      radio: new Set([])
+    };
+
+    var isKeyboardInteractionAllowed = function isKeyboardInteractionAllowed(role, key) {
+      if (!allowed[role]) {
+        return false;
+      }
+
+      var allowedKeys = allowed[role];
+      return allowedKeys.has(key);
+    };
+
+    var useAccessibilityProps = function useAccessibilityProps(_a) {
+      var onClick = _a.onClick,
+          _onKeyDown = _a.onKeyDown,
+          _b = _a.role,
+          role = _b === void 0 ? 'button' : _b,
+          rest = __rest(_a, ["onClick", "onKeyDown", "role"]);
+
+      return __assign({}, onClick ? {
+        onClick: onClick,
+        role: role,
+        tabIndex: 0,
+        'aria-label': rest['aria-label'],
+        onKeyDown: function onKeyDown(e) {
+          if (_onKeyDown) {
+            _onKeyDown(e);
+
+            return;
+          }
+
+          var key = e.key;
+
+          if (isKeyboardInteractionAllowed(role, key)) {
+            if (onClick) {
+              e.preventDefault();
+              onClick(e);
+            }
+          }
+        }
+      } : {
+        role: role,
+        'aria-label': rest['aria-label']
+      });
+    };
+
+    var Icon = function Icon(props) {
+      var _a;
+
+      var appearance = props.appearance,
+          className = props.className,
+          name = props.name,
+          size = props.size,
+          children = props.children;
+      var accessibilityProps = useAccessibilityProps(props);
+      var baseProps = extractBaseProps(props);
+
+      var mapper = function mapper(val) {
+        if (val === 'outline') return 'outlined';
+        if (val === 'rounded') return 'round';
+        return val;
+      };
+
+      var type = mapper(props.type);
+
+      var getIconAppearance = function getIconAppearance(iconColor) {
+        var x = iconColor.indexOf('_');
+        return iconColor.slice(0, x) + iconColor.charAt(x + 1).toUpperCase() + iconColor.slice(x + 2);
+      };
+
+      var color = appearance && appearance.includes('_') ? getIconAppearance(appearance) : appearance;
+      var iconClass = classNames__default["default"]((_a = {}, _a['material-icons'] = true, _a["material-icons-" + mapper(type)] = type && type !== 'filled', _a['Icon'] = true, _a["Icon--" + color] = appearance, _a["" + className] = className, _a));
+      var styles = {
+        fontSize: size + "px",
+        width: size + "px"
+      };
+
+      if (children && /*#__PURE__*/React__namespace.isValidElement(children)) {
+        return /*#__PURE__*/React__namespace.createElement("span", __assign({}, baseProps, {
+          className: className
+        }), children);
+      }
+
+      return /*#__PURE__*/React__namespace.createElement("i", __assign({}, baseProps, {
+        className: iconClass,
+        style: styles
+      }, accessibilityProps), type ? name + "_" + type : name);
+    };
+    Icon.displayName = 'Icon';
+    Icon.defaultProps = {
+      size: 16,
+      type: 'round'
+    };
+
     var GenericChip = function GenericChip(props) {
       var _a;
 
@@ -4502,6 +4591,22 @@
       var _a = inputOptions.placeholderChar,
           placeholderChar = _a === void 0 ? '_' : _a;
 
+      var onPasteHandler = function onPasteHandler(_e, val) {
+        var onPaste = inputOptions.onPaste;
+        setState({
+          open: true
+        });
+
+        if (val && !val.includes(placeholderChar)) {
+          var d = translateToDate(inputFormat, val, validators);
+          setState({
+            date: d
+          });
+        }
+
+        if (onPaste) onPaste(_e, val);
+      };
+
       var onChangeHandler = function onChangeHandler(_e, val) {
         var onChange = inputOptions.onChange;
         setState({
@@ -4563,6 +4668,7 @@
         mask: mask,
         value: date$1 ? translateToString(inputFormat, date$1) : init ? X.utils.getDefaultValue(mask, placeholderChar) : '',
         onChange: onChangeHandler,
+        onPaste: onPasteHandler,
         onBlur: onBlurHandler,
         onClear: onClearHandler,
         caption: showError ? errorMessage : '',
@@ -5489,12 +5595,13 @@
           onClear = props.onClear,
           onBlur = props.onBlur,
           onFocus = props.onFocus,
+          onPaste = props.onPaste,
           actionIcon = props.actionIcon,
           className = props.className,
           autoFocus = props.autoFocus,
           disabled = props.disabled,
           readOnly = props.readOnly,
-          rest = __rest(props, ["size", "type", "minWidth", "defaultValue", "name", "placeholder", "value", "icon", "inlineLabel", "required", "error", "info", "onChange", "onClick", "onClear", "onBlur", "onFocus", "actionIcon", "className", "autoFocus", "disabled", "readOnly"]);
+          rest = __rest(props, ["size", "type", "minWidth", "defaultValue", "name", "placeholder", "value", "icon", "inlineLabel", "required", "error", "info", "onChange", "onClick", "onClear", "onBlur", "onFocus", "onPaste", "actionIcon", "className", "autoFocus", "disabled", "readOnly"]);
 
       var ref = React__namespace.useRef(null);
       React__namespace.useImperativeHandle(forwardedRef, function () {
@@ -5557,7 +5664,8 @@
         onChange: onChange,
         onBlur: onBlur,
         onClick: onClick,
-        onFocus: onFocus
+        onFocus: onFocus,
+        onPaste: onPaste
       })), disabled ? '' : info ? /*#__PURE__*/React__namespace.createElement(Tooltip, {
         position: "top",
         tooltip: info
@@ -5798,13 +5906,14 @@
           caption = props.caption,
           required = props.required,
           onChange = props.onChange,
+          onPaste = props.onPaste,
           onBlur = props.onBlur,
           onFocus = props.onFocus,
           onClear = props.onClear,
           className = props.className,
           id = props.id,
           helpText = props.helpText,
-          rest = __rest(props, ["mask", "value", "placeholderChar", "validators", "clearOnEmptyBlur", "defaultValue", "mask", "error", "caption", "required", "onChange", "onBlur", "onFocus", "onClear", "className", "id", "helpText"]);
+          rest = __rest(props, ["mask", "value", "placeholderChar", "validators", "clearOnEmptyBlur", "defaultValue", "mask", "error", "caption", "required", "onChange", "onPaste", "onBlur", "onFocus", "onClear", "className", "id", "helpText"]);
 
       var isEditable = React__namespace.useCallback(function (pos) {
         return _typeof(mask[pos]) === 'object';
@@ -5937,8 +6046,48 @@
         selectionPos.current = getCurrSelection();
         deferId.current = window.requestAnimationFrame(updateSelection);
       }, [selectionPos.current, getCurrSelection]);
+
+      var matchSeparatorValue = function matchSeparatorValue(currValue) {
+        var separator = props.placeholder || 'dd/mm/yyyy';
+
+        if (separator.substring(0, 4) === 'yyyy') {
+          return currValue && currValue[4] === separator[4] && currValue[7] === separator[7];
+        }
+
+        return currValue && currValue[2] === separator[2] && currValue[5] === separator[5];
+      };
+
+      var isSameFormat = function isSameFormat(currValue, inputLength) {
+        var value = currValue.substring(0, inputLength);
+
+        if (inputLength === 23) {
+          var date = value.split(' - ');
+          var startVal = date[0];
+          var endVal = date[1];
+          return matchSeparatorValue(startVal) && matchSeparatorValue(endVal);
+        }
+
+        return matchSeparatorValue(value);
+      };
+
+      var onPasteHandler = function onPasteHandler(e) {
+        var _a;
+
+        e.preventDefault();
+        var pastedValue = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('Text');
+        var sameFormat = isSameFormat(pastedValue, pastedValue.length);
+        var isValidDate = isValid(validators, pastedValue);
+
+        if (sameFormat && onPaste && isValidDate) {
+          onPaste(e, pastedValue);
+          setValue(pastedValue);
+        }
+      };
+
       var onChangeHandler = React__namespace.useCallback(function (e) {
-        var inputVal = e.currentTarget.value;
+        var _a;
+
+        var inputVal = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
         var currSelection = getCurrSelection();
         var start = Math.min(selectionPos.current.start, currSelection.start);
         var end = currSelection.end;
@@ -6051,6 +6200,7 @@
         onChange: onChangeHandler,
         onClear: onClearHandler,
         onBlur: onBlurHandler,
+        onPaste: onPasteHandler,
         autoComplete: 'off',
         ref: ref
       })), /*#__PURE__*/React__namespace.createElement(HelpText, {
@@ -7680,7 +7830,7 @@
       var iconClass = function iconClass(align) {
         var _a;
 
-        return classNames__default["default"]((_a = {}, _a['Toast-icon'] = true, _a["Toast-icon--" + align] = align, _a["Toast-icon--" + appearance] = appearance, _a));
+        return classNames__default["default"]((_a = {}, _a['Toast-icon'] = true, _a["Toast-icon--" + align] = align, _a["Toast-icon--" + appearance] = appearance, _a["Toast-close-icon--" + appearance] = appearance && align === 'right', _a));
       };
 
       var textClass = classNames__default["default"]((_c = {}, _c['Toast-text'] = true, _c["Toast-text--" + appearance] = appearance, _c));
@@ -10484,15 +10634,14 @@
           active = props.active,
           completed = props.completed,
           onChange = props.onChange;
-      var StepClass = classNames__default["default"]((_a = {}, _a['Step'] = true, _a['Step--active'] = active, _a['Step--disabled'] = disabled, _a['Stepper-animate'] = true, _a));
+      var StepClass = classNames__default["default"]((_a = {}, _a['Step'] = true, _a['Step--active'] = active, _a['Step--disabled'] = disabled, _a['Stepper-animate'] = true, _a['color-primary-dark'] = active || completed, _a['color-inverse-lightest'] = disabled, _a));
 
       var onClickHandle = function onClickHandle() {
         if (disabled) return;
         if (onChange) onChange(label, value);
       };
 
-      var iconAppearance = completed ? 'info' : disabled ? 'disabled' : active ? 'info' : 'default';
-      var appearance = active ? 'link' : disabled ? 'disabled' : 'default';
+      var textColor = active ? 'primary-dark' : disabled ? 'inverse-lightest' : 'inverse';
       return /*#__PURE__*/React__namespace.createElement("div", {
         "data-test": "DesignSystem-Step",
         className: StepClass,
@@ -10500,11 +10649,10 @@
       }, /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-Step--Icon",
         name: completed ? 'check_circle' : 'radio_button_unchecked',
-        appearance: iconAppearance,
         className: "mr-3 my-4 Stepper-animate"
       }), label && /*#__PURE__*/React__namespace.createElement(Text, {
         weight: "medium",
-        appearance: appearance,
+        color: textColor,
         className: "Stepper-animate"
       }, label));
     };
@@ -10594,6 +10742,56 @@
         }
       };
 
+      var onPasteHandler = function onPasteHandler(_e, val, type) {
+        setState({
+          open: true
+        });
+
+        if (type === 'start') {
+          var placeholderChar = startInputOptions.placeholderChar || '_';
+
+          if (val && !val.includes(placeholderChar)) {
+            var d = translateToDate(inputFormat, val, validators);
+
+            if (d) {
+              setState({
+                startDate: d
+              });
+
+              if (endDate) {
+                var _a = getDateInfo(endDate),
+                    eYear = _a.year,
+                    eMonth = _a.month,
+                    eDate = _a.date;
+
+                if (compareDate(startDate, 'more', eYear, eMonth, eDate)) {
+                  setState({
+                    endDate: undefined
+                  });
+                }
+              }
+
+              if (startInputOptions.onPaste) startInputOptions.onPaste(_e, val);
+            }
+          }
+        }
+
+        if (type === 'end') {
+          var placeholderChar = endInputOptions.placeholderChar ? endInputOptions.placeholderChar : '_';
+
+          if (val && !val.includes(placeholderChar)) {
+            var d = translateToDate(inputFormat, val, validators);
+
+            if (d) {
+              setState({
+                endDate: d
+              });
+              if (endInputOptions.onPaste) endInputOptions.onPaste(_e, val);
+            }
+          }
+        }
+      };
+
       var onChangeHandler = function onChangeHandler(_e, val, type) {
         setState({
           open: true
@@ -10743,6 +10941,9 @@
         onChange: function onChange(e, val) {
           onChangeHandler(e, val || '', 'start');
         },
+        onPaste: function onPaste(e, val) {
+          onPasteHandler(e, val || '', 'start');
+        },
         onBlur: function onBlur(e, val) {
           onBlurHandler(e, val || '', 'start');
         },
@@ -10772,6 +10973,9 @@
         onChange: function onChange(e, val) {
           onChangeHandler(e, val || '', 'end');
         },
+        onPaste: function onPaste(e, val) {
+          onPasteHandler(e, val || '', 'end');
+        },
         onBlur: function onBlur(e, val) {
           onBlurHandler(e, val || '', 'end');
         },
@@ -10819,6 +11023,22 @@
         return isValid(validators, startVal, inputFormat) && isValid(validators, endVal, inputFormat);
       };
 
+      var onPasteHandler = function onPasteHandler(_e, val) {
+        var onPaste = inputOptions.onPaste;
+        var date = val.split(' - ');
+        var startVal = date[0];
+        var endVal = date[1];
+        var endD = translateToDate(inputFormat, endVal, validators);
+        var startD = translateToDate(inputFormat, startVal, validators);
+        setState({
+          startDate: startD,
+          endDate: endD,
+          startValue: startVal,
+          endValue: endVal
+        });
+        if (onPaste) onPaste(_e, val);
+      };
+
       var onChangeHandler = function onChangeHandler(_e, val) {
         var date = val.split(' - ');
         var startVal = date[0];
@@ -10933,6 +11153,9 @@
         onBlur: function onBlur(e, val) {
           onBlurHandler(e, val || '');
         },
+        onPaste: function onPaste(e, val) {
+          onPasteHandler(e, val || '');
+        },
         onClear: onClearHandler,
         error: showError,
         caption: showError ? errorMessage : '',
@@ -15664,7 +15887,7 @@
     };
     HelpText.displayName = 'HelpText';
 
-    var version = "2.14.1";
+    var version = "2.15.0";
 
     exports.Avatar = Avatar;
     exports.AvatarGroup = AvatarGroup;