@innovaccer/design-system 2.14.1 → 2.15.0

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1675668315737 
+   * Generated on: 1678111228630 
    *      Package: @innovaccer/design-system
-   *      Version: v2.14.1
+   *      Version: v2.15.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -567,86 +567,90 @@ var date$1 = function date(val, format) {
     return month <= 12 && date <= monthLength[month - 1];
   };
 
-  switch (format) {
-    case 'dd/mm/yyyy':
-      {
-        var p = val.split('/');
+  if (val) {
+    switch (format) {
+      case 'dd/mm/yyyy':
+        {
+          var p = val.split('/');
 
-        var _date = +p[0] || 1;
+          var _date = +p[0] || 1;
 
-        var month = +p[1] || 1;
-        var year = +p[2] || 1900;
-        return validate(_date, month, year);
-      }
+          var month = +p[1] || 1;
+          var year = +p[2] || 1900;
+          return validate(_date, month, year);
+        }
 
-    case 'mm/dd/yyyy':
-      {
-        var _p = val.split('/');
+      case 'mm/dd/yyyy':
+        {
+          var _p = val.split('/');
 
-        var _date2 = +_p[1] || 1;
+          var _date2 = +_p[1] || 1;
 
-        var _month = +_p[0] || 1;
+          var _month = +_p[0] || 1;
 
-        var _year = +_p[2] || 1900;
+          var _year = +_p[2] || 1900;
 
-        return validate(_date2, _month, _year);
-      }
+          return validate(_date2, _month, _year);
+        }
 
-    case 'yyyy/mm/dd':
-      {
-        var _p2 = val.split('/');
+      case 'yyyy/mm/dd':
+        {
+          var _p2 = val.split('/');
 
-        var _date3 = +_p2[2] || 1;
+          var _date3 = +_p2[2] || 1;
 
-        var _month2 = +_p2[1] || 1;
+          var _month2 = +_p2[1] || 1;
 
-        var _year2 = +_p2[0] || 1900;
+          var _year2 = +_p2[0] || 1900;
 
-        return validate(_date3, _month2, _year2);
-      }
+          return validate(_date3, _month2, _year2);
+        }
 
-    case 'dd-mm-yyyy':
-      {
-        var _p3 = val.split('-');
+      case 'dd-mm-yyyy':
+        {
+          var _p3 = val.split('-');
 
-        var _date4 = +_p3[0] || 1;
+          var _date4 = +_p3[0] || 1;
 
-        var _month3 = +_p3[1] || 1;
+          var _month3 = +_p3[1] || 1;
 
-        var _year3 = +_p3[2] || 1900;
+          var _year3 = +_p3[2] || 1900;
 
-        return validate(_date4, _month3, _year3);
-      }
+          return validate(_date4, _month3, _year3);
+        }
 
-    case 'mm-dd-yyyy':
-      {
-        var _p4 = val.split('-');
+      case 'mm-dd-yyyy':
+        {
+          var _p4 = val.split('-');
 
-        var _date5 = +_p4[1] || 1;
+          var _date5 = +_p4[1] || 1;
 
-        var _month4 = +_p4[0] || 1;
+          var _month4 = +_p4[0] || 1;
 
-        var _year4 = +_p4[2] || 1900;
+          var _year4 = +_p4[2] || 1900;
 
-        return validate(_date5, _month4, _year4);
-      }
+          return validate(_date5, _month4, _year4);
+        }
 
-    case 'yyyy-mm-dd':
-      {
-        var _p5 = val.split('-');
+      case 'yyyy-mm-dd':
+        {
+          var _p5 = val.split('-');
 
-        var _date6 = +_p5[2] || 1;
+          var _date6 = +_p5[2] || 1;
 
-        var _month5 = +_p5[1] || 1;
+          var _month5 = +_p5[1] || 1;
 
-        var _year5 = +_p5[0] || 1900;
+          var _year5 = +_p5[0] || 1900;
 
-        return validate(_date6, _month5, _year5);
-      }
+          return validate(_date6, _month5, _year5);
+        }
 
-    default:
-      return false;
+      default:
+        return false;
+    }
   }
+
+  return false;
 };
 var time$1 = function time(val, format) {
   var _getTimeObjFromStr = getTimeObjFromStr(format, val),
@@ -1244,7 +1248,7 @@ var _isEqual = function _isEqual(firstList, secondList) {
   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) {
@@ -1399,110 +1403,6 @@ Text.defaultProps = {
   size: 'regular'
 };
 
-var isSpaceKey = function isSpaceKey(e) {
-  return e.key === 'Space';
-};
-
-var _excluded$x = ["onClick", "onKeyDown", "role"];
-var allowed = {
-  button: new Set(['Enter', 'Space', 'Spacebar', ' ']),
-  link: new Set(['Enter']),
-  // onChange handles everything, no need for extra keyboard interaction
-  checkbox: new Set([]),
-  radio: new Set([])
-}; // Refer for keyboard interactions: https://webaim.org/techniques/keyboard/#testing
-
-var isKeyboardInteractionAllowed = function isKeyboardInteractionAllowed(role, key) {
-  if (!allowed[role]) {
-    return false;
-  }
-
-  var allowedKeys = allowed[role];
-  return allowedKeys.has(key);
-};
-
-var useAccessibilityProps = function useAccessibilityProps(_ref) {
-  var onClick = _ref.onClick,
-      _onKeyDown = _ref.onKeyDown,
-      _ref$role = _ref.role,
-      role = _ref$role === void 0 ? 'button' : _ref$role,
-      rest = _objectWithoutProperties(_ref, _excluded$x);
-
-  return _objectSpread2({}, 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 _classNames;
-
-  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((_classNames = {}, _defineProperty$1(_classNames, 'material-icons', true), _defineProperty$1(_classNames, "material-icons-".concat(mapper(type)), type && type !== 'filled'), _defineProperty$1(_classNames, 'Icon', true), _defineProperty$1(_classNames, "Icon--".concat(color), appearance), _defineProperty$1(_classNames, "".concat(className), className), _classNames));
-  var styles = {
-    fontSize: "".concat(size, "px"),
-    width: "".concat(size, "px")
-  }; // change `children` to {name} after migration
-
-  if (children && /*#__PURE__*/React.isValidElement(children)) {
-    return /*#__PURE__*/React.createElement("span", _extends$2({}, baseProps, {
-      className: className
-    }), children);
-  }
-
-  return /*#__PURE__*/React.createElement("i", _extends$2({}, baseProps, {
-    className: iconClass,
-    style: styles
-  }, accessibilityProps), type ? "".concat(name, "_").concat(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) {
@@ -1514,7 +1414,66 @@ var uidGenerator = function uidGenerator() {
   return uuid;
 };
 
-var _excluded$w = ["size", "tabIndex", "defaultChecked", "indeterminate", "label", "disabled", "onChange", "name", "value", "className", "checked", "helpText", "id"];
+var CheckboxIcon = function CheckboxIcon(props) {
+  switch (props.name) {
+    case 'checked--regular':
+      return /*#__PURE__*/React__default.createElement("svg", {
+        width: "10",
+        height: "8",
+        viewBox: "0 0 10 8",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, /*#__PURE__*/React__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.createElement("svg", {
+        width: "10",
+        height: "8",
+        viewBox: "0 0 10 8",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, /*#__PURE__*/React__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.createElement("svg", {
+        width: "10",
+        height: "2",
+        viewBox: "0 0 10 2",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, /*#__PURE__*/React__default.createElement("path", {
+        d: "M0 0H10V2H0V0Z",
+        fill: "white"
+      }));
+
+    case 'indeterminate--tiny':
+      return /*#__PURE__*/React__default.createElement("svg", {
+        width: "8",
+        height: "2",
+        viewBox: "0 0 8 2",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, /*#__PURE__*/React__default.createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M8 0H0V2H8V0Z",
+        fill: "white"
+      }));
+
+    default:
+      return null;
+  }
+};
+
+var _excluded$x = ["size", "tabIndex", "defaultChecked", "indeterminate", "label", "error", "disabled", "onChange", "name", "value", "className", "checked", "helpText", "id"];
 
 /**
  * ######Checkbox has two types:
@@ -1522,7 +1481,7 @@ var _excluded$w = ["size", "tabIndex", "defaultChecked", "indeterminate", "label
  *  - [Uncontrolled Checkbox](https://reactjs.org/docs/uncontrolled-components.html)
  */
 var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
-  var _classNames, _classNames2, _classNames3;
+  var _classNames, _classNames2, _classNames3, _classNames4, _classNames6;
 
   var _props$size = props.size,
       size = _props$size === void 0 ? 'regular' : _props$size,
@@ -1531,6 +1490,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       defaultChecked = props.defaultChecked,
       indeterminate = props.indeterminate,
       label = props.label,
+      error = props.error,
       disabled = props.disabled,
       onChange = props.onChange,
       name = props.name,
@@ -1540,7 +1500,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       helpText = props.helpText,
       _props$id = props.id,
       id = _props$id === void 0 ? "".concat(name, "-").concat(label, "-").concat(uidGenerator()) : _props$id,
-      rest = _objectWithoutProperties(props, _excluded$w);
+      rest = _objectWithoutProperties(props, _excluded$x);
 
   var ref = React.useRef(null);
   React.useImperativeHandle(forwardedRef, function () {
@@ -1563,7 +1523,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
   var CheckboxClass = classnames((_classNames = {}, _defineProperty$1(_classNames, 'Checkbox', true), _defineProperty$1(_classNames, 'Checkbox--disabled', disabled), _classNames), className);
   var CheckboxOuterWrapper = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'Checkbox-outerWrapper', true), _defineProperty$1(_classNames2, "Checkbox-outerWrapper--".concat(size), size), _classNames2));
   var CheckboxInputWrapper = classnames((_classNames3 = {}, _defineProperty$1(_classNames3, 'Checkbox-input', true), _defineProperty$1(_classNames3, 'Checkbox-input--checked', checked), _defineProperty$1(_classNames3, 'Checkbox-input--indeterminate', props.indeterminate), _classNames3));
-  var CheckboxWrapper = classnames(_defineProperty$1({}, 'Checkbox-wrapper', true));
+  var CheckboxWrapper = classnames((_classNames4 = {}, _defineProperty$1(_classNames4, 'Checkbox-wrapper', true), _defineProperty$1(_classNames4, 'Checkbox-wrapper--default', !error), _defineProperty$1(_classNames4, 'Checkbox-wrapper--error', error), _classNames4));
   var CheckboxLabelClass = classnames(_defineProperty$1({}, 'Checkbox-label', true));
 
   var setIndeterminate = function setIndeterminate(indeterminateValue) {
@@ -1579,8 +1539,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
     if (onChange) onChange(e);
   };
 
-  var IconName = indeterminate ? 'remove' : checked ? 'check' : '';
-  var IconSize = size === 'tiny' ? 12 : 16;
+  var IconMapper = classnames((_classNames6 = {}, _defineProperty$1(_classNames6, 'checked--regular', checked && size === 'regular'), _defineProperty$1(_classNames6, 'checked--tiny', checked && size === 'tiny'), _defineProperty$1(_classNames6, 'indeterminate--regular', indeterminate && size === 'regular'), _defineProperty$1(_classNames6, 'indeterminate--tiny', indeterminate && size === 'tiny'), _classNames6));
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     "data-test": "DesignSystem-Checkbox",
     className: CheckboxClass
@@ -1603,10 +1562,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
   })), /*#__PURE__*/React.createElement("span", {
     className: CheckboxWrapper,
     "data-test": "DesignSystem-Checkbox-Icon"
-  }, IconName && /*#__PURE__*/React.createElement(Icon, {
-    name: IconName,
-    size: IconSize,
-    appearance: 'white'
+  }, IconMapper && /*#__PURE__*/React.createElement(CheckboxIcon, {
+    name: IconMapper
   }))), /*#__PURE__*/React.createElement("div", {
     className: "Checkbox-labelWrapper"
   }, label && label.trim() && /*#__PURE__*/React.createElement("label", {
@@ -2013,12 +1970,15 @@ Placeholder.defaultProps = {
 };
 
 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.createElement(PlaceholderParagraph, {
-        length: 'large',
+        length: size,
         "data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
       });
 
@@ -2360,7 +2320,8 @@ var DropdownList = function DropdownList(props) {
         className: "Option-loading",
         key: "".concat(option, "-").concat(ind)
       }, /*#__PURE__*/React.createElement(Loading, {
-        loadingType: type
+        loadingType: type,
+        optionIndex: ind
       }));
     });
   };
@@ -2591,7 +2552,7 @@ var DropdownList = function DropdownList(props) {
 
 DropdownList.displayName = 'DropdownList';
 
-var _excluded$v = ["triggerOptions", "selected", "tabIndex"];
+var _excluded$w = ["triggerOptions", "selected", "tabIndex"];
 var inputRef = /*#__PURE__*/React.createRef();
 
 /**
@@ -3239,7 +3200,7 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
           triggerOptions = _this$props14$trigger === void 0 ? {} : _this$props14$trigger;
           _this$props14.selected;
           var tabIndex = _this$props14.tabIndex,
-          rest = _objectWithoutProperties(_this$props14, _excluded$v);
+          rest = _objectWithoutProperties(_this$props14, _excluded$w);
 
       var remainingOptionsLen = searchedOptionsLength - options.length;
       var firstEnabledOption = tabIndex ? tabIndex : _isSelectAllPresent(searchTerm, remainingOptionsLen, withSelectAll, withCheckbox) ? 0 : options.findIndex(function (option) {
@@ -3398,7 +3359,7 @@ var Breadcrumbs = function Breadcrumbs(props) {
   })));
 };
 
-var _excluded$u = ["size", "appearance", "iconAlign", "tabIndex", "largeIcon", "type", "children", "icon", "expanded", "selected", "loading", "disabled", "className", "tooltip"];
+var _excluded$v = ["size", "appearance", "iconAlign", "tabIndex", "largeIcon", "type", "children", "icon", "expanded", "selected", "loading", "disabled", "className", "tooltip"];
 var sizeMapping$2 = {
   tiny: 12,
   regular: 16,
@@ -3426,7 +3387,7 @@ var ButtonElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
       disabled = props.disabled,
       className = props.className;
       props.tooltip;
-      var rest = _objectWithoutProperties(props, _excluded$u);
+      var rest = _objectWithoutProperties(props, _excluded$v);
 
   var buttonClass = classnames((_classNames = {}, _defineProperty$1(_classNames, 'Button', true), _defineProperty$1(_classNames, 'Button--expanded', expanded), _defineProperty$1(_classNames, "Button--".concat(size), size), _defineProperty$1(_classNames, "Button--".concat(size, "Square"), !children), _defineProperty$1(_classNames, "Button--".concat(appearance), appearance), _defineProperty$1(_classNames, 'Button--selected', selected && (appearance === 'basic' || appearance === 'transparent')), _defineProperty$1(_classNames, "Button--iconAlign-".concat(iconAlign), children && iconAlign), _defineProperty$1(_classNames, "".concat(className), className), _classNames));
   var iconClass = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'Button-icon', true), _defineProperty$1(_classNames2, "Button-icon--".concat(iconAlign), children && iconAlign), _classNames2));
@@ -4087,6 +4048,13 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
             'Calendar-value--disabled': disabled,
             'Calendar-yearValue': true
           }, _defineProperty$1(_classNames2, "Calendar-yearValue--".concat(size), size), _defineProperty$1(_classNames2, 'Calendar-value--currDateMonthYear', isCurrentYear()), _classNames2));
+          var getTextColor = classnames({
+            inverse: !active && !isCurrentYear() && !disabled,
+            white: active,
+            'primary-lighter': isCurrentYear() && disabled,
+            primary: isCurrentYear(),
+            'inverse-lightest': disabled
+          });
           return (
             /*#__PURE__*/
             //  TODO(a11y)
@@ -4099,7 +4067,8 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
               onMouseOver: _this.yearMouseOverHandler.bind(_assertThisInitialized$1(_this), year, isCurrentYear(), disabled)
             }, /*#__PURE__*/React.createElement(Text, {
               size: size === 'small' ? 'small' : 'regular',
-              appearance: active ? 'white' : disabled ? 'disabled' : isCurrentYear() ? 'link' : 'default'
+              color: getTextColor,
+              className: "Calendar-text"
             }, year))
           );
         }));
@@ -4142,9 +4111,16 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           var valueClass = classnames((_classNames3 = {
             'Calendar-value': true,
             'Calendar-value--active': active,
-            'Calendar-value--dummy': disabled,
+            'Calendar-value--disabled': disabled,
             'Calendar-monthValue': true
           }, _defineProperty$1(_classNames3, "Calendar-monthValue--".concat(size), size), _defineProperty$1(_classNames3, 'Calendar-value--currDateMonthYear', isCurrentMonth()), _classNames3));
+          var getTextColor = classnames({
+            inverse: !active && !isCurrentMonth() && !disabled,
+            white: active,
+            'primary-lighter': isCurrentMonth() && disabled,
+            primary: isCurrentMonth(),
+            'inverse-lightest': disabled
+          });
           return (
             /*#__PURE__*/
             //TODO(a11y)
@@ -4157,7 +4133,8 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
               onMouseOver: _this.monthMouseOverHandler.bind(_assertThisInitialized$1(_this), month, isCurrentMonth(), disabled)
             }, /*#__PURE__*/React.createElement(Text, {
               size: size === 'small' ? 'small' : 'regular',
-              appearance: active ? 'white' : disabled ? 'disabled' : isCurrentMonth() ? 'link' : 'default'
+              color: getTextColor,
+              className: "Calendar-text"
             }, months[month]))
           );
         }));
@@ -4374,6 +4351,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           });
           var valueClass = classnames((_classNames4 = {
             'Calendar-value': true,
+            'Calendar-inRangeValue': !isStart && !isEnd,
             'Calendar-value--start': isStart && !isEnd,
             'Calendar-value--end': isEnd && !isStart,
             'Calendar-value--startError': isStart && isRangeError,
@@ -4382,12 +4360,19 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
             'Calendar-value--disabled': disabled,
             'Calendar-dateValue': true
           }, _defineProperty$1(_classNames4, "Calendar-dateValue--".concat(size), size), _defineProperty$1(_classNames4, 'Calendar-value--currDateMonthYear', today()), _classNames4));
+          var getTextColor = classnames({
+            inverse: !active && !today() && !disabled,
+            white: active,
+            'primary-lighter': today() && disabled,
+            primary: today(),
+            'inverse-lightest': disabled
+          });
           return /*#__PURE__*/React.createElement("div", {
             key: "".concat(row, "-").concat(col),
             className: wrapperClass,
             "data-test": "designSystem-Calendar-WrapperClass"
           }, !dummy && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
-            appearance: active ? 'white' : disabled ? 'disabled' : today() ? 'link' : 'default',
+            color: getTextColor,
             size: size === 'small' ? 'small' : 'regular',
             "data-test": "DesignSystem-Calendar--dateValue",
             className: valueClass,
@@ -4414,7 +4399,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           size = _this$props8.size,
           monthsInView = _this$props8.monthsInView;
       var view = _this.state.view;
-      var containerClass = classnames((_classNames5 = {}, _defineProperty$1(_classNames5, 'Calendar', true), _defineProperty$1(_classNames5, "Calendar--".concat(view, "--").concat(size), view), _defineProperty$1(_classNames5, "Calendar--".concat(size), size), _classNames5));
+      var containerClass = classnames((_classNames5 = {}, _defineProperty$1(_classNames5, 'Calendar', true), _defineProperty$1(_classNames5, "Calendar-".concat(view, "--").concat(size), view), _defineProperty$1(_classNames5, "Calendar--".concat(size), size), _classNames5));
       var headerClass = classnames(_defineProperty$1({}, "Calendar-header--".concat(size), size));
       var bodyClass = classnames({
         'Calendar-body': true
@@ -4447,7 +4432,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
         _month = _getDateInfo6.month,
         _date = _getDateInfo6.date;
 
-    var todayCompleteDate = getDateInfo(new Date());
+    var todayCompleteDate = getDateInfo(new Date(Date.now()));
     _this.state = {
       currDate: currDate,
       startDate: _startDate,
@@ -4670,7 +4655,7 @@ _defineProperty$1(Calendar, "defaultProps", {
   jumpView: true
 });
 
-var _excluded$t = ["shadow", "children", "className"];
+var _excluded$u = ["shadow", "children", "className"];
 var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classNames;
 
@@ -4678,7 +4663,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
       shadow = _props$shadow === void 0 ? 'default' : _props$shadow,
       children = props.children,
       className = props.className,
-      rest = _objectWithoutProperties(props, _excluded$t);
+      rest = _objectWithoutProperties(props, _excluded$u);
 
   var classes = classnames((_classNames = {
     Card: true
@@ -4691,12 +4676,12 @@ var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 Card.displayName = 'Card';
 
-var _excluded$s = ["border", "children", "className"];
+var _excluded$t = ["border", "children", "className"];
 var CardSubdued = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var border = props.border,
       children = props.children,
       className = props.className,
-      rest = _objectWithoutProperties(props, _excluded$s);
+      rest = _objectWithoutProperties(props, _excluded$t);
 
   var classes = classnames(_defineProperty$1({
     CardSubdued: true
@@ -4759,6 +4744,110 @@ CardFooter.defaultProps = {
   withSeperator: true
 };
 
+var isSpaceKey = function isSpaceKey(e) {
+  return e.key === 'Space';
+};
+
+var _excluded$s = ["onClick", "onKeyDown", "role"];
+var allowed = {
+  button: new Set(['Enter', 'Space', 'Spacebar', ' ']),
+  link: new Set(['Enter']),
+  // onChange handles everything, no need for extra keyboard interaction
+  checkbox: new Set([]),
+  radio: new Set([])
+}; // Refer for keyboard interactions: https://webaim.org/techniques/keyboard/#testing
+
+var isKeyboardInteractionAllowed = function isKeyboardInteractionAllowed(role, key) {
+  if (!allowed[role]) {
+    return false;
+  }
+
+  var allowedKeys = allowed[role];
+  return allowedKeys.has(key);
+};
+
+var useAccessibilityProps = function useAccessibilityProps(_ref) {
+  var onClick = _ref.onClick,
+      _onKeyDown = _ref.onKeyDown,
+      _ref$role = _ref.role,
+      role = _ref$role === void 0 ? 'button' : _ref$role,
+      rest = _objectWithoutProperties(_ref, _excluded$s);
+
+  return _objectSpread2({}, 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 _classNames;
+
+  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((_classNames = {}, _defineProperty$1(_classNames, 'material-icons', true), _defineProperty$1(_classNames, "material-icons-".concat(mapper(type)), type && type !== 'filled'), _defineProperty$1(_classNames, 'Icon', true), _defineProperty$1(_classNames, "Icon--".concat(color), appearance), _defineProperty$1(_classNames, "".concat(className), className), _classNames));
+  var styles = {
+    fontSize: "".concat(size, "px"),
+    width: "".concat(size, "px")
+  }; // change `children` to {name} after migration
+
+  if (children && /*#__PURE__*/React.isValidElement(children)) {
+    return /*#__PURE__*/React.createElement("span", _extends$2({}, baseProps, {
+      className: className
+    }), children);
+  }
+
+  return /*#__PURE__*/React.createElement("i", _extends$2({}, baseProps, {
+    className: iconClass,
+    style: styles
+  }, accessibilityProps), type ? "".concat(name, "_").concat(type) : name);
+};
+Icon.displayName = 'Icon';
+Icon.defaultProps = {
+  size: 16,
+  type: 'round'
+};
+
 var GenericChip = function GenericChip(props) {
   var _classNames3;
 
@@ -4969,6 +5058,22 @@ var Trigger$1 = function Trigger(props) {
   var _inputOptions$placeho = inputOptions.placeholderChar,
       placeholderChar = _inputOptions$placeho === void 0 ? '_' : _inputOptions$placeho;
 
+  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({
@@ -5030,6 +5135,7 @@ var Trigger$1 = function Trigger(props) {
     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 : '',
@@ -6034,7 +6140,7 @@ Heading.defaultProps = {
   size: 'm'
 };
 
-var _excluded$o = ["size", "type", "minWidth", "defaultValue", "name", "placeholder", "value", "icon", "inlineLabel", "required", "error", "info", "onChange", "onClick", "onClear", "onBlur", "onFocus", "actionIcon", "className", "autoFocus", "disabled", "readOnly"];
+var _excluded$o = ["size", "type", "minWidth", "defaultValue", "name", "placeholder", "value", "icon", "inlineLabel", "required", "error", "info", "onChange", "onClick", "onClear", "onBlur", "onFocus", "onPaste", "actionIcon", "className", "autoFocus", "disabled", "readOnly"];
 var sizeMapping$1 = {
   tiny: 12,
   regular: 16,
@@ -6069,6 +6175,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       onClear = props.onClear,
       onBlur = props.onBlur,
       onFocus = props.onFocus,
+      onPaste = props.onPaste,
       actionIcon = props.actionIcon,
       className = props.className,
       autoFocus = props.autoFocus,
@@ -6138,7 +6245,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
     onChange: onChange,
     onBlur: onBlur,
     onClick: onClick,
-    onFocus: onFocus
+    onFocus: onFocus,
+    onPaste: onPaste
   })), disabled ? '' : info ? /*#__PURE__*/React.createElement(Tooltip, {
     position: "top",
     tooltip: info
@@ -6368,7 +6476,7 @@ var getDefaultValue = function getDefaultValue(mask, placeholderChar) {
   return val;
 };
 
-var _excluded$m = ["mask", "value", "placeholderChar", "validators", "clearOnEmptyBlur", "defaultValue", "mask", "error", "caption", "required", "onChange", "onBlur", "onFocus", "onClear", "className", "id", "helpText"];
+var _excluded$m = ["mask", "value", "placeholderChar", "validators", "clearOnEmptyBlur", "defaultValue", "mask", "error", "caption", "required", "onChange", "onPaste", "onBlur", "onFocus", "onClear", "className", "id", "helpText"];
 
 /**
  * It works as Uncontrolled Input
@@ -6390,6 +6498,7 @@ var InputMask = /*#__PURE__*/React.forwardRef(function (props, forwardRef) {
       caption = props.caption,
       required = props.required,
       onChange = props.onChange,
+      onPaste = props.onPaste,
       onBlur = props.onBlur,
       onFocus = props.onFocus,
       onClear = props.onClear,
@@ -6521,8 +6630,48 @@ var InputMask = /*#__PURE__*/React.forwardRef(function (props, forwardRef) {
     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 _e$clipboardData;
+
+    e.preventDefault();
+    var pastedValue = (_e$clipboardData = e.clipboardData) === null || _e$clipboardData === void 0 ? void 0 : _e$clipboardData.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.useCallback(function (e) {
-    var inputVal = e.currentTarget.value;
+    var _e$currentTarget;
+
+    var inputVal = (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.value;
     var currSelection = getCurrSelection();
     var start = Math.min(selectionPos.current.start, currSelection.start);
     var end = currSelection.end;
@@ -6635,6 +6784,7 @@ var InputMask = /*#__PURE__*/React.forwardRef(function (props, forwardRef) {
     onChange: onChangeHandler,
     onClear: onClearHandler,
     onBlur: onBlurHandler,
+    onPaste: onPasteHandler,
     autoComplete: 'off',
     ref: ref
   })), /*#__PURE__*/React.createElement(HelpText, {
@@ -8341,7 +8491,7 @@ var Toast = function Toast(props) {
   var iconClass = function iconClass(align) {
     var _classNames3;
 
-    return classnames((_classNames3 = {}, _defineProperty$1(_classNames3, 'Toast-icon', true), _defineProperty$1(_classNames3, "Toast-icon--".concat(align), align), _defineProperty$1(_classNames3, "Toast-icon--".concat(appearance), appearance), _classNames3));
+    return classnames((_classNames3 = {}, _defineProperty$1(_classNames3, 'Toast-icon', true), _defineProperty$1(_classNames3, "Toast-icon--".concat(align), align), _defineProperty$1(_classNames3, "Toast-icon--".concat(appearance), appearance), _defineProperty$1(_classNames3, "Toast-close-icon--".concat(appearance), appearance && align === 'right'), _classNames3));
   };
 
   var textClass = classnames((_classNames4 = {}, _defineProperty$1(_classNames4, 'Toast-text', true), _defineProperty$1(_classNames4, "Toast-text--".concat(appearance), appearance), _classNames4));
@@ -15903,15 +16053,14 @@ var Step = function Step(props) {
       active = props.active,
       completed = props.completed,
       onChange = props.onChange;
-  var StepClass = classnames((_classNames = {}, _defineProperty$1(_classNames, 'Step', true), _defineProperty$1(_classNames, 'Step--active', active), _defineProperty$1(_classNames, 'Step--disabled', disabled), _defineProperty$1(_classNames, 'Stepper-animate', true), _classNames));
+  var StepClass = classnames((_classNames = {}, _defineProperty$1(_classNames, 'Step', true), _defineProperty$1(_classNames, 'Step--active', active), _defineProperty$1(_classNames, 'Step--disabled', disabled), _defineProperty$1(_classNames, 'Stepper-animate', true), _defineProperty$1(_classNames, 'color-primary-dark', active || completed), _defineProperty$1(_classNames, 'color-inverse-lightest', disabled), _classNames));
 
   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__*/
     // TODO(a11y)
@@ -15923,11 +16072,10 @@ var Step = function Step(props) {
     }, /*#__PURE__*/React.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.createElement(Text, {
       weight: "medium",
-      appearance: appearance,
+      color: textColor,
       className: "Stepper-animate"
     }, label))
   );
@@ -16016,7 +16164,7 @@ var Trigger = function Trigger(props) {
     }
   };
 
-  var onChangeHandler = function onChangeHandler(_e, val, type) {
+  var onPasteHandler = function onPasteHandler(_e, val, type) {
     setState({
       open: true
     });
@@ -16044,6 +16192,8 @@ var Trigger = function Trigger(props) {
               });
             }
           }
+
+          if (startInputOptions.onPaste) startInputOptions.onPaste(_e, val);
         }
       }
     }
@@ -16054,8 +16204,56 @@ var Trigger = function Trigger(props) {
       if (val && !val.includes(_placeholderChar)) {
         var _d = translateToDate(inputFormat, val, validators);
 
-        if (_d) setState({
-          endDate: _d
+        if (_d) {
+          setState({
+            endDate: _d
+          });
+          if (endInputOptions.onPaste) endInputOptions.onPaste(_e, val);
+        }
+      }
+    }
+  };
+
+  var onChangeHandler = function onChangeHandler(_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 _getDateInfo4 = getDateInfo(endDate),
+                eYear = _getDateInfo4.year,
+                eMonth = _getDateInfo4.month,
+                eDate = _getDateInfo4.date;
+
+            if (compareDate(startDate, 'more', eYear, eMonth, eDate)) {
+              setState({
+                endDate: undefined
+              });
+            }
+          }
+        }
+      }
+    }
+
+    if (type === 'end') {
+      var _placeholderChar2 = endInputOptions.placeholderChar ? endInputOptions.placeholderChar : '_';
+
+      if (val && !val.includes(_placeholderChar2)) {
+        var _d2 = translateToDate(inputFormat, val, validators);
+
+        if (_d2) setState({
+          endDate: _d2
         });
       }
     }
@@ -16088,9 +16286,9 @@ var Trigger = function Trigger(props) {
 
     if (type === 'end') {
       var _endInputOptions$plac = endInputOptions.placeholderChar,
-          _placeholderChar2 = _endInputOptions$plac === void 0 ? '_' : _endInputOptions$plac;
+          _placeholderChar3 = _endInputOptions$plac === void 0 ? '_' : _endInputOptions$plac;
 
-      if (val && hasNumber.test(val) && val.includes(_placeholderChar2)) {
+      if (val && hasNumber.test(val) && val.includes(_placeholderChar3)) {
         setState({
           endError: true
         });
@@ -16100,7 +16298,7 @@ var Trigger = function Trigger(props) {
         });
       }
 
-      if (!val || val.includes(_placeholderChar2)) setState({
+      if (!val || val.includes(_placeholderChar3)) setState({
         endDate: undefined
       });
     }
@@ -16166,6 +16364,9 @@ var Trigger = function Trigger(props) {
     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');
     },
@@ -16195,6 +16396,9 @@ var Trigger = function Trigger(props) {
     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');
     },
@@ -16243,6 +16447,22 @@ var SingleInputTrigger = function SingleInputTrigger(props) {
     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];
@@ -16357,6 +16577,9 @@ var SingleInputTrigger = function SingleInputTrigger(props) {
     onBlur: function onBlur(e, val) {
       onBlurHandler(e, val || '');
     },
+    onPaste: function onPaste(e, val) {
+      onPasteHandler(e, val || '');
+    },
     onClear: onClearHandler,
     error: showError,
     caption: showError ? errorMessage : '',
@@ -21334,6 +21557,6 @@ var HelpText = function HelpText(props) {
 };
 HelpText.displayName = 'HelpText';
 
-var version = "2.14.1";
+var version = "2.15.0";
 
 export { Avatar, AvatarGroup, Backdrop, Badge, Breadcrumbs, Button, Calendar, Caption, Card, CardBody, CardFooter, CardHeader, CardSubdued, ChatMessage, Checkbox, Chip, ChipGroup, ChipInput, ChoiceList, Collapsible, Column, DatePicker, DateRangePicker, Dialog, Divider, Dropdown, Dropzone, EditableChipInput, EditableDropdown, EditableInput, EmptyState, FileList, FileUploader, FileUploaderList, FullscreenModal, Grid, GridCell, Heading, HelpText, HorizontalNav, Icon, InlineMessage, Input, X as InputMask, Label, Legend, Link, List, Message, MetaList, MetricInput, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, MultiSlider, Navigation, OutsideClick, PageHeader, Pagination, Paragraph, Pills, Placeholder, PlaceholderImage, PlaceholderParagraph, Popover, ProgressBar, ProgressRing, Radio, RangeSlider, Row, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text, Textarea, TimePicker, Toast, Tooltip, index as Utils, VerificationCodeInput, VerticalNav, version };