@innovaccer/design-system 2.19.0 → 2.21.0

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1692978951414 
+   * Generated on: 1695030042950 
    *      Package: @innovaccer/design-system
-   *      Version: v2.19.0
+   *      Version: v2.21.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -892,7 +892,8 @@
           disabled = props.disabled,
           className = props.className;
           props.tooltip;
-          var rest = __rest(props, ["size", "appearance", "iconAlign", "tabIndex", "largeIcon", "type", "children", "icon", "expanded", "selected", "loading", "disabled", "className", "tooltip"]);
+          var iconVariations = props.iconVariations,
+          rest = __rest(props, ["size", "appearance", "iconAlign", "tabIndex", "largeIcon", "type", "children", "icon", "expanded", "selected", "loading", "disabled", "className", "tooltip", "iconVariations"]);
 
       var buttonClass = classNames__default["default"]((_a = {}, _a['Button'] = true, _a['Button--expanded'] = expanded, _a["Button--" + size] = size, _a["Button--" + size + "Square"] = !children, _a["Button--" + appearance] = appearance, _a['Button--selected'] = selected && (appearance === 'basic' || appearance === 'transparent'), _a["Button--iconAlign-" + iconAlign] = children && iconAlign, _a["" + className] = className, _a));
       var iconClass = classNames__default["default"]((_b = {}, _b['Button-icon'] = true, _b["Button-icon--" + iconAlign] = children && iconAlign, _b));
@@ -915,6 +916,7 @@
       }, /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-Button--Icon",
         name: icon,
+        variations: iconVariations,
         size: largeIcon && !children ? sizeMapping$3[size] + 4 : sizeMapping$3[size]
       })), children && /*#__PURE__*/React__namespace.createElement("span", {
         className: "Button-text"
@@ -1154,6 +1156,27 @@
         return undefined;
       }
     };
+    var dateComparison = function dateComparison(date, operator, currDate, currMonth, currYear) {
+      var currentDate = new Date(currYear + "-" + currMonth + "-" + currDate);
+
+      if (date) {
+        switch (operator) {
+          case 'less':
+            return date <= currentDate;
+
+          case 'equal':
+            return date.toDateString() === currentDate.toDateString();
+
+          case 'more':
+            return date >= currentDate;
+
+          default:
+            return false;
+        }
+      }
+
+      return false;
+    };
 
     var Calendar = function (_super) {
       __extends(Calendar, _super);
@@ -1302,9 +1325,8 @@
             neighbouringMonthDate = prevMonthDayRange + date;
             type = 'prev';
           } else if (date > dayRange) {
-            neighbouringMonthIndex = index + 1;
-            neighbouringMonthDate = date - dayRange;
-            type = 'next';
+            neighbouringMonthIndex = index;
+            neighbouringMonthDate = date;
           } else {
             neighbouringMonthIndex = index;
             neighbouringMonthDate = date;
@@ -1563,6 +1585,10 @@
                 'Calendar-value--disabled': disabled,
                 'Calendar-yearValue': true
               }, _a["Calendar-yearValue--" + size] = size, _a['Calendar-value--currDateMonthYear'] = isCurrentYear(), _a));
+              var textClass = classNames__default["default"]({
+                'Calendar-value--currDate': isCurrentYear() && !active,
+                'Calendar-text': true
+              });
               var getTextColor = classNames__default["default"]({
                 inverse: !active && !isCurrentYear() && !disabled,
                 white: active,
@@ -1579,7 +1605,7 @@
               }, /*#__PURE__*/React__namespace.createElement(Text, {
                 size: size === 'small' ? 'small' : 'regular',
                 color: getTextColor,
-                className: "Calendar-text"
+                className: textClass
               }, year));
             }));
           });
@@ -1631,6 +1657,10 @@
                 primary: isCurrentMonth(),
                 'inverse-lightest': disabled
               });
+              var textClass = classNames__default["default"]({
+                'Calendar-value--currDate': isCurrentMonth() && !active,
+                'Calendar-text': true
+              });
               return /*#__PURE__*/React__namespace.createElement("div", {
                 key: row + "-" + col,
                 "data-test": "DesignSystem-Calendar--monthValue",
@@ -1640,7 +1670,7 @@
               }, /*#__PURE__*/React__namespace.createElement(Text, {
                 size: size === 'small' ? 'small' : 'regular',
                 color: getTextColor,
-                className: "Calendar-text"
+                className: textClass
               }, months[month]));
             }));
           });
@@ -1809,21 +1839,6 @@
               var inRange = false;
               var inRangeLast = false;
 
-              if (rangePicker) {
-                startActive = compareDate(startDate, 'equal', yearNavVal, monthNavVal, date);
-                endActive = compareDate(endDate, 'equal', yearNavVal, monthNavVal, date);
-                inRangeLast = compareDate(hoverDate, 'equal', yearNavVal, monthNavVal, date);
-                active = !disabled && (startActive || endActive);
-
-                if (startDate && endDate) {
-                  inRange = !disabled && (compareDate(startDate, 'less', yearNavVal, monthNavVal, date) || startActive) && (compareDate(endDate, 'more', yearNavVal, monthNavVal, date) || endActive);
-                } else if (startDate) {
-                  inRange = !disabled && (compareDate(hoverDate, 'more', yearNavVal, monthNavVal, date) || inRangeLast) && compareDate(startDate, 'less', yearNavVal, monthNavVal, date);
-                } else if (endDate) {
-                  inRange = !disabled && (compareDate(hoverDate, 'less', yearNavVal, monthNavVal, date) || inRangeLast) && compareDate(endDate, 'more', yearNavVal, monthNavVal, date);
-                }
-              }
-
               var _b = getDateInfo(startDate),
                   sYear = _b.year,
                   sMonth = _b.month,
@@ -1836,37 +1851,63 @@
 
               var isStart = startActive || endDate && inRangeLast && compareDate(hoverDate, 'less', eYear, eMonth, eDate);
               var isEnd = endActive || startDate && inRangeLast && compareDate(hoverDate, 'more', sYear, sMonth, sDate);
-              var isRangeError = inRange && inRangeError;
               var dateInString = "" + (date <= 0 ? prevMonthDayRange + date : date > dayRange ? date - dayRange : date);
               var monthInString = "" + (date <= 0 ? monthNavVal === 0 ? monthNavVal + monthBlock : (monthNavVal - 1) % monthBlock + 1 : date > dayRange ? (monthNavVal + 1) % monthBlock + 1 : monthNavVal + 1);
               var yearInString = "" + (date <= 0 && monthNavVal + 1 === 1 ? yearNavVal - 1 : date > dayRange && monthNavVal + 1 === 12 ? yearNavVal + 1 : yearNavVal);
               var completeDateString = (monthInString.length === 2 ? monthInString : "0" + monthInString) + "/" + (dateInString.length === 2 ? dateInString : "0" + dateInString) + "/" + yearInString;
               var isEventExist = events && _typeof(events) === 'object' && events.hasOwnProperty(completeDateString);
+
+              if (rangePicker) {
+                startActive = compareDate(startDate, 'equal', yearNavVal, monthNavVal, date);
+                endActive = compareDate(endDate, 'equal', yearNavVal, monthNavVal, date);
+                inRangeLast = compareDate(hoverDate, 'equal', yearNavVal, monthNavVal, date);
+                active = !disabled && (startActive || endActive);
+
+                if (startDate && endDate) {
+                  inRange = !disabled && (dateComparison(startDate, 'less', dateInString, monthInString, yearInString) && dateComparison(endDate, 'more', dateInString, monthInString, yearInString) || startActive || endActive);
+                } else if (startDate) {
+                  inRange = !disabled && (dateComparison(hoverDate, 'more', dateInString, monthInString, yearInString) || inRangeLast) && dateComparison(startDate, 'less', dateInString, monthInString, yearInString);
+                } else if (endDate) {
+                  inRange = !disabled && (compareDate(hoverDate, 'less', yearNavVal, monthNavVal, date) || inRangeLast) && compareDate(endDate, 'more', yearNavVal, monthNavVal, date);
+                }
+              }
+
+              var isRangeError = inRange && inRangeError;
+              var isStartActive = startDate && dateComparison(startDate, 'equal', dateInString, monthInString, yearInString);
+              var isEndActive = endDate && dateComparison(endDate, 'equal', dateInString, monthInString, yearInString);
+              var activeDate = startDate && endDate && (isStartActive || isEndActive);
+              var isHoverLast = dateComparison(hoverDate, 'equal', dateInString, monthInString, yearInString) && hoverDate && startDate && hoverDate >= startDate;
+              var isEdgeElement = col === 0 || col === 6;
+              var isValueRange = inRange || rangePicker && (active || activeDate);
               var wrapperClass = classNames__default["default"]({
                 'Calendar-valueWrapper': true,
-                'Calendar-valueWrapper--inRange': inRange || rangePicker && active,
+                'Calendar-valueWrapper--inRange': !isEdgeElement && isValueRange,
+                'Calendar-valueWrapper--inEdgeRange': isValueRange && isEdgeElement,
                 'Calendar-valueWrapper--inRangeError': isRangeError,
-                'Calendar-valueWrapper--start': isStart && !isEnd,
-                'Calendar-valueWrapper--end': isEnd && !isStart,
+                'Calendar-valueWrapper--start': isStart && !isEnd && col !== 6 || rangePicker && isStartActive && col !== 6,
+                'Calendar-valueWrapper--end': isEnd && !isStart && col !== 0 || rangePicker && isEndActive && col !== 0,
                 'Calendar-valueWrapper--startEnd': isStart && isEnd,
-                'Calendar-valueWrapper--startError': isStart && isRangeError,
-                'Calendar-valueWrapper--endError': isEnd && isRangeError,
-                'Calendar-valueWrapper--dummy': dummy
+                'Calendar-valueWrapper--startError': isStart && isRangeError || rangePicker && isRangeError && isStartActive,
+                'Calendar-valueWrapper--endError': isEnd && isRangeError || rangePicker && isRangeError && isEndActive,
+                'Calendar-valueWrapper--dummy': dummy,
+                'Calendar-valueWrapper--hoverDate': rangePicker && isHoverLast,
+                'Calendar-valueWrapper--inStartRange': isValueRange && col === 0 && !active && !activeDate,
+                'Calendar-valueWrapper--inEndRange': isValueRange && col === 6 && !active && !activeDate
               });
               var valueClass = classNames__default["default"]((_a = {
                 'Calendar-value': true,
-                'Calendar-inRangeValue': !isStart && !isEnd,
+                'Calendar-inRangeValue': !isStart && !isEnd && !active && !activeDate,
                 'Calendar-value--start': isStart && !isEnd,
                 'Calendar-value--end': isEnd && !isStart,
                 'Calendar-value--startError': isStart && isRangeError,
                 'Calendar-value--endError': isEnd && isRangeError,
-                'Calendar-value--active': active,
+                'Calendar-value--active': active || activeDate,
                 'Calendar-value--disabled': disabled,
                 'Calendar-dateValue': true
-              }, _a["Calendar-dateValue--" + size] = size, _a['Calendar-value--currDateMonthYear'] = today(), _a));
+              }, _a["Calendar-dateValue--" + size] = size, _a['Calendar-value--currDateMonthYear'] = today(), _a['Calendar-value--currDate'] = today() && !active && !activeDate, _a));
               var getTextColor = classNames__default["default"]({
-                inverse: !active && !today() && !disabled,
-                white: active,
+                inverse: !active && !today() && !disabled && !activeDate,
+                white: active || activeDate,
                 'primary-lighter': today() && disabled,
                 primary: today(),
                 'inverse-lightest': disabled
@@ -1884,7 +1925,7 @@
                 onMouseOver: onMouseOverHandler(date),
                 onMouseEnter: onMouseEnterHandler.bind(_this, date, today(), disabled)
               }, date), isEventExist && _this.renderEventsIndicator(size, active)), (dummy && date > 0 && index === monthsInView - 1 || dummy && date <= 0 && index === 0) && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Text, {
-                appearance: active ? 'white' : disabled ? 'disabled' : today() ? 'link' : 'default',
+                appearance: active || activeDate ? 'white' : disabled ? 'disabled' : today() ? 'link' : 'default',
                 size: size === 'small' ? 'small' : 'regular',
                 "data-test": "DesignSystem-Calendar--dateValue",
                 className: valueClass,
@@ -2300,6 +2341,116 @@
       });
     };
 
+    var getOpticalSize = function getOpticalSize(size) {
+      if (size && size <= 20) {
+        return 20;
+      } else if (size && size >= 48) {
+        return 48;
+      }
+
+      return size;
+    };
+
+    var iconVariantMapper = {
+      more_horiz: {
+        weight: 600,
+        opticalSize: 24
+      },
+      "delete": {
+        fill: 0
+      },
+      radio_button_checked: {
+        fill: 0
+      },
+      radio_button_unchecked: {
+        fill: 0
+      },
+      schedule: {
+        fill: 0
+      },
+      help_outline: {
+        fill: 0
+      },
+      check_circle_outline: {
+        fill: 0
+      },
+      highlight_of: {
+        fill: 0
+      },
+      credit_card: {
+        fill: 0
+      },
+      delete_outline: {
+        fill: 0
+      },
+      bookmark_border: {
+        fill: 0
+      },
+      work_outline: {
+        fill: 0
+      },
+      alarm: {
+        fill: 0
+      },
+      arrow_circle_up: {
+        fill: 0
+      },
+      copyright: {
+        fill: 0
+      },
+      query_builder: {
+        fill: 0
+      },
+      card_membership: {
+        fill: 0
+      },
+      arrow_circle_down: {
+        fill: 0
+      },
+      change_history: {
+        fill: 0
+      },
+      aspect_ratio: {
+        fill: 0
+      },
+      calendar_view_month: {
+        fill: 0
+      },
+      alarm_on: {
+        fill: 0
+      },
+      thumb_down_off_alt: {
+        fill: 0
+      },
+      important_devices: {
+        fill: 0
+      },
+      turned_in_not: {
+        fill: 0
+      },
+      add_circle_outline: {
+        fill: 0
+      },
+      speed: {
+        fill: 0
+      },
+      content_copy: {
+        fill: 0
+      },
+      timelapse: {
+        fill: 0
+      }
+    };
+    var getFontVariation = function getFontVariation(iconName, variations, type, size) {
+      var defaultVariant = {
+        fill: type === 'outlined' ? 0 : 1,
+        weight: 400,
+        grade: 0,
+        opticalSize: getOpticalSize(size)
+      };
+      return __assign(__assign(__assign({}, defaultVariant), iconVariantMapper[iconName]), variations);
+    };
+
     var Icon = function Icon(props) {
       var _a;
 
@@ -2307,17 +2458,18 @@
           className = props.className,
           name = props.name,
           size = props.size,
-          children = props.children;
+          children = props.children,
+          variations = props.variations;
       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 mapper = {
+        outline: 'outlined',
+        sharp: 'outlined',
+        round: 'rounded',
+        filled: 'rounded',
+        'two-tone': 'rounded'
       };
-
-      var type = mapper(props.type);
+      var type = props.type && mapper[props.type] || props.type;
 
       var getIconAppearance = function getIconAppearance(iconColor) {
         var x = iconColor.indexOf('_');
@@ -2325,10 +2477,18 @@
       };
 
       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 iconClass = classNames__default["default"]((_a = {}, _a['material-icons'] = true, _a['material-icons-rounded'] = type === 'rounded', _a['material-icons-outlined'] = type === 'outlined', _a['Icon'] = true, _a["Icon--" + color] = appearance, _a["" + className] = className, _a));
+
+      var _b = getFontVariation(name, variations, type, size),
+          fill = _b.fill,
+          grade = _b.grade,
+          opticalSize = _b.opticalSize,
+          weight = _b.weight;
+
       var styles = {
         fontSize: size + "px",
-        width: size + "px"
+        width: size + "px",
+        'font-variation-settings': "\"FILL\" " + fill + ", \"wght\" " + weight + ", \"GRAD\" " + grade + ", \"opsz\" " + opticalSize
       };
 
       if (children && /*#__PURE__*/React__namespace.isValidElement(children)) {
@@ -2337,15 +2497,17 @@
         }), children);
       }
 
-      return /*#__PURE__*/React__namespace.createElement("i", __assign({}, baseProps, {
+      return /*#__PURE__*/React__namespace.createElement("i", __assign({
+        "data-test": "DesignSystem-Icon"
+      }, baseProps, {
         className: iconClass,
         style: styles
-      }, accessibilityProps), type ? name + "_" + type : name);
+      }, accessibilityProps), name);
     };
     Icon.displayName = 'Icon';
     Icon.defaultProps = {
       size: 16,
-      type: 'round'
+      type: 'rounded'
     };
 
     var GenericText = function GenericText(_a) {
@@ -2399,7 +2561,8 @@
           selected = props.selected,
           onClose = props.onClose,
           onClick = props.onClick,
-          labelPrefix = props.labelPrefix;
+          labelPrefix = props.labelPrefix,
+          iconVariations = props.iconVariations;
       var baseProps = extractBaseProps(props);
 
       var iconClass = function iconClass(align) {
@@ -2457,6 +2620,7 @@
       }), icon && /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-GenericChip--Icon",
         name: icon,
+        variations: iconVariations,
         appearance: iconAppearance('left'),
         className: iconClass('left')
       }), renderLabel(), clearButton && /*#__PURE__*/React__namespace.createElement("div", {
@@ -2487,7 +2651,8 @@
           onClick = props.onClick,
           name = props.name,
           className = props.className,
-          labelPrefix = props.labelPrefix;
+          labelPrefix = props.labelPrefix,
+          iconVariations = props.iconVariations;
       var baseProps = extractBaseProps(props);
 
       var onCloseHandler = function onCloseHandler() {
@@ -2509,6 +2674,7 @@
         label: label,
         selected: select,
         icon: icon,
+        iconVariations: iconVariations,
         clearButton: clearbutton,
         disabled: disabled,
         className: chipClass,
@@ -2553,7 +2719,8 @@
             disabled = item.disabled,
             selected = item.selected,
             clearButton = item.clearButton,
-            name = item.name;
+            name = item.name,
+            iconVariations = item.iconVariations;
         return /*#__PURE__*/React__namespace.createElement("span", {
           key: ind,
           className: "ChipGroup-item"
@@ -2565,6 +2732,7 @@
           icon: icon,
           disabled: disabled,
           clearButton: clearButton,
+          iconVariations: iconVariations,
           type: type,
           onClick: function onClick() {
             return onClickHandler(item);
@@ -3986,7 +4154,8 @@
           open = props.open,
           inlineLabel = props.inlineLabel,
           error = props.error,
-          rest = __rest(props, ["triggerSize", "placeholder", "menu", "children", "icon", "disabled", "open", "inlineLabel", "error"]);
+          iconVariations = props.iconVariations,
+          rest = __rest(props, ["triggerSize", "placeholder", "menu", "children", "icon", "disabled", "open", "inlineLabel", "error", "iconVariations"]);
 
       var buttonDisabled = disabled ? 'disabled' : 'default';
       var trimmedPlaceholder = placeholder.trim();
@@ -4010,12 +4179,14 @@
       }, "" + inlineLabel.trim().charAt(0).toUpperCase() + inlineLabel.trim().slice(1)), icon && !inlineLabel && /*#__PURE__*/React__namespace.createElement(Icon, {
         appearance: buttonDisabled,
         className: "d-flex align-items-center mr-4",
-        name: icon
+        name: icon,
+        variations: iconVariations
       }), value && /*#__PURE__*/React__namespace.createElement("span", {
         className: textClass
       }, value)), /*#__PURE__*/React__namespace.createElement(Icon, {
         appearance: buttonDisabled,
-        name: iconName
+        name: iconName,
+        variations: iconVariations
       }));
     });
     DropdownButton.displayName = 'DropdownButton';
@@ -4141,7 +4312,8 @@
           dataTest = props.dataTest;
       var label = optionData.label,
           icon = optionData.icon,
-          disabled = optionData.disabled;
+          disabled = optionData.disabled,
+          iconVariations = optionData.iconVariations;
       var OptionClass = classNames__default["default"]((_a = {}, _a["" + className] = true, _a['Option--icon'] = icon, _a));
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: OptionClass,
@@ -4152,7 +4324,8 @@
       }, icon && /*#__PURE__*/React__namespace.createElement(Icon, {
         className: "Option-icon mr-4",
         "data-test": dataTest + "--Icon",
-        name: icon
+        name: icon,
+        variations: iconVariations
       }), /*#__PURE__*/React__namespace.createElement("div", {
         className: 'Option-label'
       }, /*#__PURE__*/React__namespace.createElement(Text, {
@@ -4558,7 +4731,8 @@
           error = props.error,
           disabled = props.disabled,
           inlineLabel = props.inlineLabel,
-          triggerLabel = props.triggerLabel;
+          triggerLabel = props.triggerLabel,
+          iconVariations = props.iconVariations;
       var CustomTrigger = customTrigger ? customTrigger(triggerLabel ? triggerLabel : placeholder) : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null);
       var NewCustomTrigger = /*#__PURE__*/React__namespace.cloneElement(CustomTrigger, {
         tabIndex: 0,
@@ -4573,7 +4747,8 @@
         inlineLabel: inlineLabel,
         menu: menu,
         error: error,
-        ref: dropdownTriggerRef
+        ref: dropdownTriggerRef,
+        iconVariations: iconVariations
       }, triggerLabel);
       var dropdownStyle = {
         maxHeight: maxHeight,
@@ -5647,36 +5822,20 @@
       var _a;
 
       var className = props.className,
-          name = props.name,
-          size = props.size,
-          children = props.children,
-          type = props.type;
-      var accessibilityProps = useAccessibilityProps(props);
-      var baseProps = extractBaseProps(props);
-      var iconClass = classNames__default["default"]((_a = {}, _a['material-icons'] = true, _a["material-icons-" + type] = type && type !== 'filled', _a['ActionButton'] = true, _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: iconClass,
-          "data-test": "DesignSystem-Input-ActionButton"
-        }), children);
-      }
+          iconVariations = props.iconVariations,
+          rest = __rest(props, ["className", "iconVariations"]);
 
-      return /*#__PURE__*/React__namespace.createElement("i", __assign({}, baseProps, {
+      var iconClass = classNames__default["default"]((_a = {}, _a['ActionButton'] = true, _a["" + className] = className, _a));
+      return /*#__PURE__*/React__namespace.createElement(Icon, __assign({
         className: iconClass,
-        style: styles
-      }, accessibilityProps, {
+        variations: iconVariations,
         "data-test": "DesignSystem-Input-ActionButton"
-      }), name + "_" + type);
+      }, rest));
     };
     ActionButton$1.displayName = 'ActionButton';
     ActionButton$1.defaultProps = {
       size: 16,
-      type: 'round'
+      type: 'rounded'
     };
 
     var sizeMapping$2 = {
@@ -5713,7 +5872,8 @@
           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", "onPaste", "actionIcon", "className", "autoFocus", "disabled", "readOnly"]);
+          iconVariations = props.iconVariations,
+          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", "iconVariations"]);
 
       var ref = React__namespace.useRef(null);
 
@@ -5769,7 +5929,8 @@
         className: leftIconClass
       }, /*#__PURE__*/React__namespace.createElement(Icon, {
         name: icon,
-        size: sizeMapping$2[size]
+        size: sizeMapping$2[size],
+        variations: iconVariations
       })), /*#__PURE__*/React__namespace.createElement("input", __assign({
         "data-test": "DesignSystem-Input"
       }, baseProps, rest, {
@@ -5861,7 +6022,8 @@
           _h = props.showActionButton,
           showActionButton = _h === void 0 ? true : _h,
           onKeyDown = props.onKeyDown,
-          rest = __rest(props, ["size", "defaultValue", "name", "placeholder", "icon", "prefix", "suffix", "error", "min", "max", "onChange", "onClick", "onBlur", "onFocus", "className", "autoFocus", "disabled", "readOnly", "value", "showActionButton", "onKeyDown"]);
+          iconVariations = props.iconVariations,
+          rest = __rest(props, ["size", "defaultValue", "name", "placeholder", "icon", "prefix", "suffix", "error", "min", "max", "onChange", "onClick", "onBlur", "onFocus", "className", "autoFocus", "disabled", "readOnly", "value", "showActionButton", "onKeyDown", "iconVariations"]);
 
       var ref = React__namespace.useRef(null);
       var isUncontrolled = valueProp === undefined;
@@ -5958,6 +6120,7 @@
       }, icon && /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-MetricInput--icon",
         name: icon,
+        variations: iconVariations,
         size: sizeMapping$1[size],
         appearance: !value ? 'disabled' : 'subtle',
         className: iconClass
@@ -6698,7 +6861,8 @@
     var Meta = function Meta(props) {
       var label = props.label,
           icon = props.icon,
-          size = props.size;
+          size = props.size,
+          iconVariations = props.iconVariations;
       return /*#__PURE__*/React__namespace.createElement("span", {
         "data-test": "DesignSystem-MetaList--Meta",
         className: 'Meta'
@@ -6707,6 +6871,7 @@
         name: icon,
         appearance: "subtle",
         className: 'Meta-icon',
+        variations: iconVariations,
         size: size === 'regular' ? 16 : 12
       }), /*#__PURE__*/React__namespace.createElement(Text, {
         size: size,
@@ -6740,7 +6905,8 @@
       }), list.map(function (item, ind) {
         var _a = item.label,
             label = _a === void 0 ? '' : _a,
-            icon = item.icon;
+            icon = item.icon,
+            iconVariations = item.iconVariations;
         var rightSeperator = ind !== list.length - 1;
         return /*#__PURE__*/React__namespace.createElement("span", {
           key: ind,
@@ -6748,7 +6914,8 @@
         }, /*#__PURE__*/React__namespace.createElement(Meta, {
           size: size,
           label: label,
-          icon: icon
+          icon: icon,
+          iconVariations: iconVariations
         }), rightSeperator && /*#__PURE__*/React__namespace.createElement(Icon, {
           "data-test": "DesignSystem-MetaList--rightSeperator",
           name: "fiber_manual_record",
@@ -8480,11 +8647,12 @@
       ENTER: 'Enter'
     };
     var ChipInput = function ChipInput(props) {
-      var _a;
+      var _a, _b;
 
       var chipOptions = props.chipOptions,
           allowDuplicates = props.allowDuplicates,
           disabled = props.disabled,
+          error = props.error,
           placeholder = props.placeholder,
           defaultValue = props.defaultValue,
           value = props.value,
@@ -8495,13 +8663,13 @@
           onFocus = props.onFocus;
       var inputRef = /*#__PURE__*/React__namespace.createRef();
 
-      var _b = React__namespace.useState(value || defaultValue),
-          chips = _b[0],
-          setChips = _b[1];
+      var _c = React__namespace.useState(value || defaultValue),
+          chips = _c[0],
+          setChips = _c[1];
 
-      var _c = React__namespace.useState(''),
-          inputValue = _c[0],
-          setInputValue = _c[1];
+      var _d = React__namespace.useState(''),
+          inputValue = _d[0],
+          setInputValue = _d[1];
 
       var baseProps = extractBaseProps(props);
       React__namespace.useEffect(function () {
@@ -8509,9 +8677,10 @@
           setChips(value);
         }
       }, [value]);
-      var ChipInputClass = classNames__default["default"]((_a = {
+      var ChipInputBorderClass = classNames__default["default"]((_a = {}, _a['ChipInput-border'] = true, _a['ChipInput-border--error'] = error, _a));
+      var ChipInputClass = classNames__default["default"]((_b = {
         ChipInput: true
-      }, _a['ChipInput--disabled'] = disabled, _a['ChipInput--withChips'] = chips && chips.length > 0, _a), className);
+      }, _b['ChipInput--disabled'] = disabled, _b['ChipInput--withChips'] = chips && chips.length > 0, _b['ChipInput--error'] = error, _b), className);
 
       var onUpdateChips = function onUpdateChips(updatedChips) {
         if (onChange) onChange(updatedChips);
@@ -8608,7 +8777,7 @@
       });
       return /*#__PURE__*/React__namespace.createElement("div", {
         "data-test": "DesignSystem-ChipInput--Border",
-        className: "ChipInput-border"
+        className: ChipInputBorderClass
       }, /*#__PURE__*/React__namespace.createElement("div", __assign({
         "data-test": "DesignSystem-ChipInput"
       }, baseProps, {
@@ -8795,7 +8964,8 @@
       }, menu.icon && /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-VerticalNav--Icon",
         className: expanded ? 'mr-4' : '',
-        name: menu.icon
+        name: menu.icon,
+        variations: menu.iconVariations
       }), expanded && /*#__PURE__*/React__namespace.createElement(_MenuLabel, {
         label: menu.label,
         labelColor: itemColor
@@ -8993,6 +9163,7 @@
           return /*#__PURE__*/React__namespace.createElement(Icon, {
             className: "mr-3 HorizontalNav-animate",
             name: menu.icon,
+            variations: menu.iconVariations,
             "data-test": "DesignSystem-HorizontalNav--Icon"
           });
         }
@@ -11932,7 +12103,8 @@
         var _b = tab,
             count = _b.count,
             icon = _b.icon,
-            disabled = _b.disabled;
+            disabled = _b.disabled,
+            iconVariations = _b.iconVariations;
 
         if (count !== undefined) {
           return /*#__PURE__*/React__namespace.createElement(Pills, {
@@ -11950,6 +12122,7 @@
             "data-test": "DesignSystem-Tabs--Icon",
             className: "mr-4 " + iconClass,
             name: icon,
+            variations: iconVariations,
             appearance: iconAppearance
           });
         }
@@ -16133,7 +16306,8 @@
           subtle = props.subtle,
           size = props.size,
           iconAlign = props.iconAlign,
-          rest = __rest(props, ["children", "type", "className", "disabled", "tabIndex", "icon", "subtle", "size", "iconAlign"]);
+          iconVariations = props.iconVariations,
+          rest = __rest(props, ["children", "type", "className", "disabled", "tabIndex", "icon", "subtle", "size", "iconAlign", "iconVariations"]);
 
       var buttonClass = classNames__default["default"]((_a = {}, _a['LinkButton'] = true, _a["LinkButton--" + size] = size, _a['LinkButton--default'] = !subtle, _a['LinkButton--subtle'] = subtle, _a["LinkButton--iconAlign-" + iconAlign] = children && iconAlign, _a["" + className] = className, _a));
       var iconClass = classNames__default["default"]((_b = {}, _b['LinkButton-icon'] = true, _b["LinkButton-icon--" + iconAlign] = children && iconAlign, _b));
@@ -16149,6 +16323,7 @@
       }, /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-LinkButton--Icon",
         name: icon,
+        variations: iconVariations,
         size: size && sizeMapping[size]
       })), children));
     });
@@ -16159,8 +16334,44 @@
       iconAlign: 'left'
     };
 
-    var version = "2.19.0";
+    var ActionCard = function ActionCard(props) {
+      var _a;
+
+      var children = props.children,
+          disabled = props.disabled,
+          className = props.className,
+          zIndex = props.zIndex,
+          onClick = props.onClick,
+          rest = __rest(props, ["children", "disabled", "className", "zIndex", "onClick"]);
+
+      var classes = classNames__default["default"]((_a = {}, _a['ActionCard'] = true, _a['ActionCard--disabled'] = disabled, _a), className);
+
+      var onKeyDownHandler = function onKeyDownHandler(event) {
+        if (event.key === 'Enter' && onClick) {
+          onClick(event);
+        }
+      };
+
+      return /*#__PURE__*/React__namespace.createElement("div", __assign({
+        tabIndex: disabled ? -1 : 0,
+        role: "link",
+        "data-test": "DesignSystem-ActionCard",
+        className: classes,
+        onClick: onClick,
+        onKeyDown: onKeyDownHandler
+      }, rest), disabled && /*#__PURE__*/React__namespace.createElement("div", {
+        style: {
+          zIndex: zIndex
+        },
+        "data-test": "DesignSystem-ActionCard-Overlay",
+        className: "ActionCard-overlay--disabled"
+      }), children);
+    };
+    ActionCard.displayName = 'ActionCard';
+
+    var version = "2.21.0";
 
+    exports.ActionCard = ActionCard;
     exports.Avatar = Avatar;
     exports.AvatarGroup = AvatarGroup;
     exports.Backdrop = Backdrop;