@innovaccer/design-system 2.21.0 → 2.23.0

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1695030042950 
+   * Generated on: 1697533162690 
    *      Package: @innovaccer/design-system
-   *      Version: v2.21.0
+   *      Version: v2.23.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -892,8 +892,8 @@
           disabled = props.disabled,
           className = props.className;
           props.tooltip;
-          var iconVariations = props.iconVariations,
-          rest = __rest(props, ["size", "appearance", "iconAlign", "tabIndex", "largeIcon", "type", "children", "icon", "expanded", "selected", "loading", "disabled", "className", "tooltip", "iconVariations"]);
+          var iconType = props.iconType,
+          rest = __rest(props, ["size", "appearance", "iconAlign", "tabIndex", "largeIcon", "type", "children", "icon", "expanded", "selected", "loading", "disabled", "className", "tooltip", "iconType"]);
 
       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));
@@ -916,7 +916,7 @@
       }, /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-Button--Icon",
         name: icon,
-        variations: iconVariations,
+        type: iconType,
         size: largeIcon && !children ? sizeMapping$3[size] + 4 : sizeMapping$3[size]
       })), children && /*#__PURE__*/React__namespace.createElement("span", {
         className: "Button-text"
@@ -2341,116 +2341,36 @@
       });
     };
 
-    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 iconTypeMapper = {
+      timelapse: 'outlined',
+      content_copy: 'outlined',
+      speed: 'outlined',
+      add_circle_outline: 'outlined',
+      turned_in_not: 'outlined',
+      important_devices: 'outlined',
+      thumb_down_off_alt: 'outlined',
+      alarm_on: 'outlined',
+      calendar_view_month: 'outlined',
+      aspect_ratio: 'outlined',
+      change_history: 'outlined',
+      arrow_circle_down: 'outlined',
+      card_membership: 'outlined',
+      query_builder: 'outlined',
+      copyright: 'outlined',
+      arrow_circle_up: 'outlined',
+      alarm: 'outlined',
+      work_outline: 'outlined',
+      bookmark_border: 'outlined',
+      delete_outline: 'outlined',
+      credit_card: 'outlined',
+      highlight_of: 'outlined',
+      check_circle_outline: 'outlined',
+      help_outline: 'outlined',
+      schedule: 'outlined',
+      radio_button_unchecked: 'outlined',
+      radio_button_checked: 'outlined',
+      "delete": 'outlined'
     };
-    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;
 
@@ -2458,8 +2378,7 @@
           className = props.className,
           name = props.name,
           size = props.size,
-          children = props.children,
-          variations = props.variations;
+          children = props.children;
       var accessibilityProps = useAccessibilityProps(props);
       var baseProps = extractBaseProps(props);
       var mapper = {
@@ -2469,7 +2388,7 @@
         filled: 'rounded',
         'two-tone': 'rounded'
       };
-      var type = props.type && mapper[props.type] || props.type;
+      var type = props.type && mapper[props.type] || props.type || name && iconTypeMapper[name] || 'rounded';
 
       var getIconAppearance = function getIconAppearance(iconColor) {
         var x = iconColor.indexOf('_');
@@ -2478,17 +2397,9 @@
 
       var color = appearance && appearance.includes('_') ? getIconAppearance(appearance) : appearance;
       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",
-        'font-variation-settings': "\"FILL\" " + fill + ", \"wght\" " + weight + ", \"GRAD\" " + grade + ", \"opsz\" " + opticalSize
+        width: size + "px"
       };
 
       if (children && /*#__PURE__*/React__namespace.isValidElement(children)) {
@@ -2506,8 +2417,7 @@
     };
     Icon.displayName = 'Icon';
     Icon.defaultProps = {
-      size: 16,
-      type: 'rounded'
+      size: 16
     };
 
     var GenericText = function GenericText(_a) {
@@ -2562,7 +2472,7 @@
           onClose = props.onClose,
           onClick = props.onClick,
           labelPrefix = props.labelPrefix,
-          iconVariations = props.iconVariations;
+          iconType = props.iconType;
       var baseProps = extractBaseProps(props);
 
       var iconClass = function iconClass(align) {
@@ -2620,7 +2530,7 @@
       }), icon && /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-GenericChip--Icon",
         name: icon,
-        variations: iconVariations,
+        type: iconType,
         appearance: iconAppearance('left'),
         className: iconClass('left')
       }), renderLabel(), clearButton && /*#__PURE__*/React__namespace.createElement("div", {
@@ -2652,7 +2562,7 @@
           name = props.name,
           className = props.className,
           labelPrefix = props.labelPrefix,
-          iconVariations = props.iconVariations;
+          iconType = props.iconType;
       var baseProps = extractBaseProps(props);
 
       var onCloseHandler = function onCloseHandler() {
@@ -2674,7 +2584,7 @@
         label: label,
         selected: select,
         icon: icon,
-        iconVariations: iconVariations,
+        iconType: iconType,
         clearButton: clearbutton,
         disabled: disabled,
         className: chipClass,
@@ -2720,7 +2630,7 @@
             selected = item.selected,
             clearButton = item.clearButton,
             name = item.name,
-            iconVariations = item.iconVariations;
+            iconType = item.iconType;
         return /*#__PURE__*/React__namespace.createElement("span", {
           key: ind,
           className: "ChipGroup-item"
@@ -2732,7 +2642,7 @@
           icon: icon,
           disabled: disabled,
           clearButton: clearButton,
-          iconVariations: iconVariations,
+          iconType: iconType,
           type: type,
           onClick: function onClick() {
             return onClickHandler(item);
@@ -4154,8 +4064,8 @@
           open = props.open,
           inlineLabel = props.inlineLabel,
           error = props.error,
-          iconVariations = props.iconVariations,
-          rest = __rest(props, ["triggerSize", "placeholder", "menu", "children", "icon", "disabled", "open", "inlineLabel", "error", "iconVariations"]);
+          iconType = props.iconType,
+          rest = __rest(props, ["triggerSize", "placeholder", "menu", "children", "icon", "disabled", "open", "inlineLabel", "error", "iconType"]);
 
       var buttonDisabled = disabled ? 'disabled' : 'default';
       var trimmedPlaceholder = placeholder.trim();
@@ -4180,13 +4090,13 @@
         appearance: buttonDisabled,
         className: "d-flex align-items-center mr-4",
         name: icon,
-        variations: iconVariations
+        type: iconType
       }), value && /*#__PURE__*/React__namespace.createElement("span", {
         className: textClass
       }, value)), /*#__PURE__*/React__namespace.createElement(Icon, {
         appearance: buttonDisabled,
         name: iconName,
-        variations: iconVariations
+        type: iconType
       }));
     });
     DropdownButton.displayName = 'DropdownButton';
@@ -4313,7 +4223,7 @@
       var label = optionData.label,
           icon = optionData.icon,
           disabled = optionData.disabled,
-          iconVariations = optionData.iconVariations;
+          iconType = optionData.iconType;
       var OptionClass = classNames__default["default"]((_a = {}, _a["" + className] = true, _a['Option--icon'] = icon, _a));
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: OptionClass,
@@ -4325,7 +4235,7 @@
         className: "Option-icon mr-4",
         "data-test": dataTest + "--Icon",
         name: icon,
-        variations: iconVariations
+        type: iconType
       }), /*#__PURE__*/React__namespace.createElement("div", {
         className: 'Option-label'
       }, /*#__PURE__*/React__namespace.createElement(Text, {
@@ -4618,6 +4528,47 @@
       return null;
     };
 
+    var errorTitle = {
+      FAILED_TO_FETCH: 'Failed to fetch data',
+      NO_RECORDS_FOUND: 'No results found',
+      DEFAULT: 'No record available'
+    };
+    var errorDescription = {
+      FAILED_TO_FETCH: "We couldn't load the data, try reloading.",
+      NO_RECORDS_FOUND: 'Try modifying your search to find what you are looking for.',
+      DEFAULT: 'We have nothing to show you at the moment.'
+    };
+    var ErrorTemplate = function ErrorTemplate(_a) {
+      var dropdownStyle = _a.dropdownStyle,
+          errorType = _a.errorType,
+          updateOptions = _a.updateOptions;
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        className: "Dropdown-wrapper px-7 d-flex",
+        style: dropdownStyle,
+        "data-test": "DesignSystem-Dropdown--wrapper"
+      }, /*#__PURE__*/React__namespace.createElement("div", {
+        className: "d-flex flex-column justify-content-center align-items-center",
+        "data-test": "DesignSystem-Dropdown--errorWrapper"
+      }, /*#__PURE__*/React__namespace.createElement(Text, {
+        className: "mb-3",
+        weight: "strong"
+      }, errorTitle[errorType]), /*#__PURE__*/React__namespace.createElement(Text, {
+        className: "text-align-center mb-6",
+        weight: "medium",
+        size: "small",
+        appearance: "subtle"
+      }, errorDescription[errorType]), errorType === 'FAILED_TO_FETCH' && /*#__PURE__*/React__namespace.createElement(Button, {
+        size: "tiny",
+        largeIcon: true,
+        "aria-label": "reload",
+        icon: "refresh",
+        iconAlign: "left",
+        onClick: function onClick() {
+          return updateOptions();
+        }
+      }, "Reload")));
+    };
+
     var alignmentMapping = {
       right: 'bottom-start',
       left: 'bottom-end'
@@ -4664,7 +4615,11 @@
           className = props.className,
           _m = props.searchPlaceholder,
           searchPlaceholder = _m === void 0 ? 'Search..' : _m,
-          scrollIndex = props.scrollIndex;
+          scrollIndex = props.scrollIndex,
+          updateOptions = props.updateOptions,
+          noResultMessage = props.noResultMessage,
+          errorType = props.errorType,
+          loadingOptions = props.loadingOptions;
       var baseProps = extractBaseProps(props);
       var dropdownRef = /*#__PURE__*/React__namespace.createRef();
       var triggerRef = /*#__PURE__*/React__namespace.createRef();
@@ -4690,6 +4645,7 @@
         minHeight && setMinHeight(minHeight);
       };
 
+      var isDropdownListBlank = listOptions.length === 0 && !loadingOptions && selected.length <= 0;
       React__namespace.useEffect(function () {
         var _a;
 
@@ -4732,7 +4688,7 @@
           disabled = props.disabled,
           inlineLabel = props.inlineLabel,
           triggerLabel = props.triggerLabel,
-          iconVariations = props.iconVariations;
+          iconType = props.iconType;
       var CustomTrigger = customTrigger ? customTrigger(triggerLabel ? triggerLabel : placeholder) : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null);
       var NewCustomTrigger = /*#__PURE__*/React__namespace.cloneElement(CustomTrigger, {
         tabIndex: 0,
@@ -4748,7 +4704,7 @@
         menu: menu,
         error: error,
         ref: dropdownTriggerRef,
-        iconVariations: iconVariations
+        iconType: iconType
       }, triggerLabel);
       var dropdownStyle = {
         maxHeight: maxHeight,
@@ -4763,6 +4719,16 @@
         minHeight: minHeight
       };
 
+      var defaultErrorTemplate = function defaultErrorTemplate() {
+        return /*#__PURE__*/React__namespace.createElement(ErrorTemplate, {
+          dropdownStyle: __assign(__assign({}, dropdownStyle), {
+            minHeight: maxHeight
+          }),
+          updateOptions: updateOptions,
+          errorType: errorType
+        });
+      };
+
       var getDropdownSectionClass = function getDropdownSectionClass(showClearButton) {
         var _a;
 
@@ -4969,7 +4935,8 @@
             allItemsSectionLabel = _c === void 0 ? 'All Items' : _c,
             _d = props.loadersCount,
             loadersCount = _d === void 0 ? 10 : _d,
-            loadingOptions = props.loadingOptions;
+            _e = props.errorTemplate,
+            errorTemplate = _e === void 0 ? defaultErrorTemplate : _e;
 
         var selectAllPresent = _isSelectAllPresent(searchTerm, remainingOptions, withSelectAll, withCheckbox);
 
@@ -4984,18 +4951,22 @@
           }, renderLoading(loadersCount)));
         }
 
-        if (listOptions.length === 0 && !loadingOptions && selected.length <= 0) {
-          var _e = props.noResultMessage,
-              noResultMessage = _e === void 0 ? 'No result found' : _e;
-          return /*#__PURE__*/React__namespace.createElement("div", {
-            className: "Dropdown-wrapper",
-            style: dropdownStyle,
-            "data-test": "DesignSystem-Dropdown--errorWrapper"
-          }, /*#__PURE__*/React__namespace.createElement("div", {
-            className: 'Option'
-          }, /*#__PURE__*/React__namespace.createElement("div", {
-            className: 'Option-subinfo'
-          }, noResultMessage)));
+        if (isDropdownListBlank) {
+          if (noResultMessage) {
+            return /*#__PURE__*/React__namespace.createElement("div", {
+              className: "Dropdown-wrapper",
+              style: dropdownStyle,
+              "data-test": "DesignSystem-Dropdown--errorWrapper"
+            }, /*#__PURE__*/React__namespace.createElement("div", {
+              className: 'Option'
+            }, /*#__PURE__*/React__namespace.createElement("div", {
+              className: 'Option-subinfo'
+            }, noResultMessage)));
+          } else {
+            return errorTemplate && errorTemplate({
+              errorType: errorType
+            });
+          }
         }
 
         return /*#__PURE__*/React__namespace.createElement("div", {
@@ -5104,6 +5075,7 @@
         }
       };
 
+      var enableSearch = (withSearch || props.async) && (!isDropdownListBlank || errorType === 'NO_RECORDS_FOUND');
       return /*#__PURE__*/React__namespace.createElement("div", __assign({}, baseProps, {
         className: dropdownClass,
         ref: triggerRef,
@@ -5117,7 +5089,7 @@
         position: alignmentMapping[align]
       }, popoverOptions, {
         "data-test": "DesignSystem-Dropdown--Popover"
-      }), (withSearch || props.async) && renderSearch(), renderDropdownSection(), showApplyButton && withCheckbox && renderApplyButton()));
+      }), enableSearch && renderSearch(), renderDropdownSection(), showApplyButton && withCheckbox && renderApplyButton()));
     };
 
     DropdownList.displayName = 'DropdownList';
@@ -5195,7 +5167,8 @@
               searchTerm = _a.searchTerm,
               selectAll = _a.selectAll,
               tempSelected = _a.tempSelected,
-              previousSelected = _a.previousSelected;
+              previousSelected = _a.previousSelected,
+              errorType = _a.errorType;
           var updatedAsync = async === undefined ? _this.state.async : async;
           var _b = _this.props,
               fetchOptions = _b.fetchOptions,
@@ -5222,7 +5195,18 @@
 
               var disabledOptions = _this.getDisabledOptions(unSelectedGroup.slice(0, _this.staticLimit));
 
+              var errorResult = errorType;
+
+              if (optionsLength === 0 && searchTerm === '') {
+                errorResult = 'DEFAULT';
+              } else if (searchTerm !== '') {
+                errorResult = 'NO_RECORDS_FOUND';
+              } else {
+                errorResult = 'FAILED_TO_FETCH';
+              }
+
               _this.setState(__assign(__assign({}, _this.state), {
+                errorType: fetchOptions ? errorResult : errorType,
                 scrollIndex: res.scrollToIndex || 0,
                 optionsLength: optionsLength,
                 loading: false,
@@ -5238,6 +5222,11 @@
 
               if (updatedAsync || withSearch) (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             }
+          })["catch"](function () {
+            _this.setState({
+              errorType: fetchOptions ? 'FAILED_TO_FETCH' : errorType,
+              loading: false
+            });
           });
         };
 
@@ -5245,7 +5234,8 @@
           _this.setState(__assign(__assign({}, _this.state), {
             loading: true,
             searchInit: true,
-            searchTerm: search
+            searchTerm: search,
+            errorType: 'NO_RECORDS_FOUND'
           }));
         };
 
@@ -5493,6 +5483,15 @@
             _this.updateOptions(false);
           });
         });
+
+        _this.reload = function () {
+          _this.setState({
+            loading: true
+          }, function () {
+            _this.updateOptions(false);
+          });
+        };
+
         _this.debounceClear = debounce(250, function () {
           return _this.updateOptions(false);
         });
@@ -5660,7 +5659,8 @@
           previousSelected: selectedGroup,
           selected: _showSelectedItems(async, '', withCheckbox) ? selected : [],
           triggerLabel: _this.updateTriggerLabel(selectedGroup, optionsLength),
-          selectAll: getSelectAll$1(selectedGroup, optionsLength, disabledOptions.length)
+          selectAll: getSelectAll$1(selectedGroup, optionsLength, disabledOptions.length),
+          errorType: 'DEFAULT'
         };
         return _this;
       }
@@ -5730,7 +5730,8 @@
             selectAll = _a.selectAll,
             triggerLabel = _a.triggerLabel,
             previousSelected = _a.previousSelected,
-            scrollIndex = _a.scrollIndex;
+            scrollIndex = _a.scrollIndex,
+            errorType = _a.errorType;
         var _b = this.props,
             _c = _b.withSelectAll,
             withSelectAll = _c === void 0 ? true : _c,
@@ -5771,7 +5772,9 @@
           onOptionSelect: this.onOptionSelect,
           onSelectAll: this.onSelectAll,
           customTrigger: triggerOptions.customTrigger,
-          scrollIndex: scrollIndex
+          scrollIndex: scrollIndex,
+          updateOptions: this.reload,
+          errorType: errorType
         }, rest));
       };
 
@@ -5822,13 +5825,13 @@
       var _a;
 
       var className = props.className,
-          iconVariations = props.iconVariations,
-          rest = __rest(props, ["className", "iconVariations"]);
+          iconType = props.iconType,
+          rest = __rest(props, ["className", "iconType"]);
 
       var iconClass = classNames__default["default"]((_a = {}, _a['ActionButton'] = true, _a["" + className] = className, _a));
       return /*#__PURE__*/React__namespace.createElement(Icon, __assign({
         className: iconClass,
-        variations: iconVariations,
+        type: iconType,
         "data-test": "DesignSystem-Input-ActionButton"
       }, rest));
     };
@@ -5872,8 +5875,8 @@
           autoFocus = props.autoFocus,
           disabled = props.disabled,
           readOnly = props.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"]);
+          iconType = props.iconType,
+          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", "iconType"]);
 
       var ref = React__namespace.useRef(null);
 
@@ -5930,7 +5933,7 @@
       }, /*#__PURE__*/React__namespace.createElement(Icon, {
         name: icon,
         size: sizeMapping$2[size],
-        variations: iconVariations
+        type: iconType
       })), /*#__PURE__*/React__namespace.createElement("input", __assign({
         "data-test": "DesignSystem-Input"
       }, baseProps, rest, {
@@ -6022,8 +6025,8 @@
           _h = props.showActionButton,
           showActionButton = _h === void 0 ? true : _h,
           onKeyDown = props.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"]);
+          iconType = props.iconType,
+          rest = __rest(props, ["size", "defaultValue", "name", "placeholder", "icon", "prefix", "suffix", "error", "min", "max", "onChange", "onClick", "onBlur", "onFocus", "className", "autoFocus", "disabled", "readOnly", "value", "showActionButton", "onKeyDown", "iconType"]);
 
       var ref = React__namespace.useRef(null);
       var isUncontrolled = valueProp === undefined;
@@ -6120,7 +6123,7 @@
       }, icon && /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-MetricInput--icon",
         name: icon,
-        variations: iconVariations,
+        type: iconType,
         size: sizeMapping$1[size],
         appearance: !value ? 'disabled' : 'subtle',
         className: iconClass
@@ -6862,7 +6865,7 @@
       var label = props.label,
           icon = props.icon,
           size = props.size,
-          iconVariations = props.iconVariations;
+          iconType = props.iconType;
       return /*#__PURE__*/React__namespace.createElement("span", {
         "data-test": "DesignSystem-MetaList--Meta",
         className: 'Meta'
@@ -6871,7 +6874,7 @@
         name: icon,
         appearance: "subtle",
         className: 'Meta-icon',
-        variations: iconVariations,
+        type: iconType,
         size: size === 'regular' ? 16 : 12
       }), /*#__PURE__*/React__namespace.createElement(Text, {
         size: size,
@@ -6906,7 +6909,7 @@
         var _a = item.label,
             label = _a === void 0 ? '' : _a,
             icon = item.icon,
-            iconVariations = item.iconVariations;
+            iconType = item.iconType;
         var rightSeperator = ind !== list.length - 1;
         return /*#__PURE__*/React__namespace.createElement("span", {
           key: ind,
@@ -6915,7 +6918,7 @@
           size: size,
           label: label,
           icon: icon,
-          iconVariations: iconVariations
+          iconType: iconType
         }), rightSeperator && /*#__PURE__*/React__namespace.createElement(Icon, {
           "data-test": "DesignSystem-MetaList--rightSeperator",
           name: "fiber_manual_record",
@@ -8965,7 +8968,7 @@
         "data-test": "DesignSystem-VerticalNav--Icon",
         className: expanded ? 'mr-4' : '',
         name: menu.icon,
-        variations: menu.iconVariations
+        type: menu.iconType
       }), expanded && /*#__PURE__*/React__namespace.createElement(_MenuLabel, {
         label: menu.label,
         labelColor: itemColor
@@ -9163,7 +9166,7 @@
           return /*#__PURE__*/React__namespace.createElement(Icon, {
             className: "mr-3 HorizontalNav-animate",
             name: menu.icon,
-            variations: menu.iconVariations,
+            type: menu.iconType,
             "data-test": "DesignSystem-HorizontalNav--Icon"
           });
         }
@@ -10217,7 +10220,7 @@
       withTrigger: true
     };
 
-    var Status = function Status(props) {
+    var Status$1 = function Status(props) {
       var _a, _b;
 
       var type = props.type,
@@ -10314,7 +10317,7 @@
           return null;
       }
     };
-    Status.displayName = 'Status';
+    Status$1.displayName = 'Status';
 
     var Box = function Box(props) {
       var _a;
@@ -10387,7 +10390,7 @@
         typingText: typingText,
         isTyping: isTyping,
         statusType: statusType
-      }), !isTyping && statusOptions && /*#__PURE__*/React__namespace.createElement(Status, __assign({}, statusOptions)));
+      }), !isTyping && statusOptions && /*#__PURE__*/React__namespace.createElement(Status$1, __assign({}, statusOptions)));
     };
     ChatMessage.displayName = 'ChatMessage';
 
@@ -12104,7 +12107,7 @@
             count = _b.count,
             icon = _b.icon,
             disabled = _b.disabled,
-            iconVariations = _b.iconVariations;
+            iconType = _b.iconType;
 
         if (count !== undefined) {
           return /*#__PURE__*/React__namespace.createElement(Pills, {
@@ -12122,7 +12125,7 @@
             "data-test": "DesignSystem-Tabs--Icon",
             className: "mr-4 " + iconClass,
             name: icon,
-            variations: iconVariations,
+            type: iconType,
             appearance: iconAppearance
           });
         }
@@ -15657,6 +15660,83 @@
       rounded: false
     };
 
+    var Status = function Status(props) {
+      var status = props.status,
+          meta = props.meta,
+          navigationPosition = props.navigationPosition,
+          navigation = props.navigation,
+          tabs = props.tabs;
+      var statusClasses = classNames__default["default"]({
+        'PageHeader-statusWrapper': true,
+        'mb-3': navigationPosition === 'bottom' && navigation || tabs
+      });
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, (status || meta) && /*#__PURE__*/React__namespace.createElement("div", {
+        className: statusClasses,
+        "data-test": "DesignSystem-PageHeader--Status"
+      }, status, meta));
+    };
+    var Action = function Action(props) {
+      var actions = props.actions,
+          navigation = props.navigation,
+          stepper = props.stepper;
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, actions ? /*#__PURE__*/React__namespace.createElement(Column, {
+        size: "4",
+        sizeXL: "4",
+        sizeM: "4",
+        "data-test": "DesignSystem-PageHeader--Actions"
+      }, /*#__PURE__*/React__namespace.createElement("div", {
+        className: "PageHeader-actionsWrapper"
+      }, actions)) : (navigation || stepper) && /*#__PURE__*/React__namespace.createElement(Column, {
+        size: "4",
+        sizeXL: "4",
+        sizeM: "4",
+        "data-test": "DesignSystem-PageHeader--Actions"
+      }, /*#__PURE__*/React__namespace.createElement("div", {
+        className: "PageHeader-actionsWrapper"
+      })));
+    };
+    var Nav = function Nav(props) {
+      var navigation = props.navigation,
+          stepper = props.stepper;
+
+      if (!navigation && !stepper) {
+        return null;
+      }
+
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        className: "PageHeader-navigationWrapper",
+        "data-test": "DesignSystem-PageHeader--Nav"
+      }, navigation || stepper);
+    };
+    var CenterNav = function CenterNav(props) {
+      var colSize = props.colSize,
+          breadcrumbs = props.breadcrumbs,
+          navigationPosition = props.navigationPosition;
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, (!breadcrumbs || navigationPosition === 'center') && colSize === '4' && /*#__PURE__*/React__namespace.createElement(Column, {
+        size: "4",
+        sizeXL: "4",
+        sizeM: "4",
+        "data-test": "DesignSystem-PageHeader--CenterNav"
+      }, /*#__PURE__*/React__namespace.createElement(Nav, __assign({}, props))));
+    };
+    var BackButton = function BackButton(props) {
+      var button = props.button;
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, button && /*#__PURE__*/React__namespace.createElement("div", {
+        className: "mr-5 my-3",
+        "data-test": "DesignSystem-PageHeader--Button"
+      }, button));
+    };
+    var Title = function Title(props) {
+      var badge = props.badge,
+          title = props.title;
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        className: "PageHeader-titleWrapper",
+        "data-test": "DesignSystem-PageHeader--Title"
+      }, /*#__PURE__*/React__namespace.createElement(Heading, {
+        className: "PageHeader-title"
+      }, title), badge);
+    };
+
     var PageHeader = function PageHeader(props) {
       var _a;
 
@@ -15671,57 +15751,64 @@
           status = props.status,
           meta = props.meta,
           navigationPosition = props.navigationPosition,
-          className = props.className;
+          className = props.className,
+          button = props.button;
       var baseProps = extractBaseProps(props);
       var wrapperClasses = classNames__default["default"]((_a = {
         'PageHeader-wrapper': true
-      }, _a['PageHeader-wrapper--separator'] = separator, _a['PageHeader-wrapper--withTabs'] = tabs, _a), className);
+      }, _a['PageHeader-wrapper--withTabs'] = tabs, _a), className);
       var classes = classNames__default["default"]({
         PageHeader: true
       });
-
-      var renderNav = function renderNav() {
-        if (!navigation && !stepper) {
-          return null;
-        }
-
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "PageHeader-navigationWrapper"
-        }, navigation || stepper);
-      };
-
       var colSize = (navigation || stepper) && navigationPosition === 'center' ? '4' : actions ? '8' : '12';
-      return /*#__PURE__*/React__namespace.createElement("div", __assign({}, baseProps, {
+      var centerNavProps = {
+        colSize: colSize,
+        breadcrumbs: breadcrumbs,
+        navigationPosition: navigationPosition,
+        navigation: navigation,
+        stepper: stepper
+      };
+      var statusProps = {
+        status: status,
+        meta: meta,
+        navigationPosition: navigationPosition,
+        navigation: navigation,
+        tabs: tabs
+      };
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        "data-test": "DesignSystem-PageHeader"
+      }, /*#__PURE__*/React__namespace.createElement("div", __assign({}, baseProps, {
         className: wrapperClasses
-      }), breadcrumbs, /*#__PURE__*/React__namespace.createElement("div", {
+      }), breadcrumbs && /*#__PURE__*/React__namespace.createElement("div", {
+        className: "pl-6",
+        "data-test": "DesignSystem-PageHeader--Breadcrumbs"
+      }, breadcrumbs), /*#__PURE__*/React__namespace.createElement("div", {
+        className: "d-flex pl-6"
+      }, /*#__PURE__*/React__namespace.createElement(BackButton, {
+        button: button
+      }), /*#__PURE__*/React__namespace.createElement("div", {
         className: classes
       }, /*#__PURE__*/React__namespace.createElement(Row, null, /*#__PURE__*/React__namespace.createElement(Column, {
         size: colSize,
         sizeXL: colSize,
         sizeM: colSize
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: "PageHeader-titleWrapper"
-      }, /*#__PURE__*/React__namespace.createElement(Heading, {
-        className: "PageHeader-title"
-      }, title), badge)), (!breadcrumbs || navigationPosition === 'center') && colSize === '4' && /*#__PURE__*/React__namespace.createElement(Column, {
-        size: "4",
-        sizeXL: "4",
-        sizeM: "4"
-      }, renderNav()), actions ? /*#__PURE__*/React__namespace.createElement(Column, {
-        size: "4",
-        sizeXL: "4",
-        sizeM: "4"
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: "PageHeader-actionsWrapper"
-      }, actions)) : (navigation || stepper) && /*#__PURE__*/React__namespace.createElement(Column, {
-        size: "4",
-        sizeXL: "4",
-        sizeM: "4"
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: "PageHeader-actionsWrapper"
-      })))), (status || meta) && /*#__PURE__*/React__namespace.createElement("div", {
-        className: "PageHeader-statusWrapper"
-      }, status, meta), breadcrumbs && navigationPosition === 'bottom' && renderNav(), tabs && /*#__PURE__*/React__namespace.createElement("div", null, tabs));
+      }, /*#__PURE__*/React__namespace.createElement(Title, {
+        badge: badge,
+        title: title
+      })), /*#__PURE__*/React__namespace.createElement(CenterNav, __assign({}, centerNavProps)), /*#__PURE__*/React__namespace.createElement(Action, {
+        actions: actions,
+        navigation: navigation,
+        stepper: stepper
+      })), /*#__PURE__*/React__namespace.createElement(Status, __assign({}, statusProps)))), /*#__PURE__*/React__namespace.createElement("div", {
+        className: "pl-3"
+      }, navigationPosition === 'bottom' && /*#__PURE__*/React__namespace.createElement(Nav, {
+        navigation: navigation,
+        stepper: stepper
+      }), tabs && /*#__PURE__*/React__namespace.createElement("div", {
+        "data-test": "DesignSystem-PageHeader--Tabs"
+      }, tabs))), separator && /*#__PURE__*/React__namespace.createElement(Divider, {
+        appearance: "header"
+      }));
     };
     PageHeader.defaultProps = {
       navigationPosition: 'center',
@@ -16306,8 +16393,8 @@
           subtle = props.subtle,
           size = props.size,
           iconAlign = props.iconAlign,
-          iconVariations = props.iconVariations,
-          rest = __rest(props, ["children", "type", "className", "disabled", "tabIndex", "icon", "subtle", "size", "iconAlign", "iconVariations"]);
+          iconType = props.iconType,
+          rest = __rest(props, ["children", "type", "className", "disabled", "tabIndex", "icon", "subtle", "size", "iconAlign", "iconType"]);
 
       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));
@@ -16323,7 +16410,7 @@
       }, /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-LinkButton--Icon",
         name: icon,
-        variations: iconVariations,
+        type: iconType,
         size: size && sizeMapping[size]
       })), children));
     });
@@ -16369,7 +16456,129 @@
     };
     ActionCard.displayName = 'ActionCard';
 
-    var version = "2.21.0";
+    var selectedCardValues = new Map();
+    function useMultiSelect() {
+      var _a = React__namespace.useState([]),
+          selectedCardIds = _a[0],
+          setSelectedCardIds = _a[1];
+
+      var isCardSelected = function isCardSelected(id) {
+        return selectedCardIds.includes(id);
+      };
+
+      var updateCardSelection = function updateCardSelection(id, value) {
+        var idList = __spreadArrays(selectedCardIds);
+
+        if (isCardSelected(id)) {
+          idList = selectedCardIds.filter(function (cardKey) {
+            return id !== cardKey;
+          });
+          selectedCardValues["delete"](id);
+        } else {
+          idList.push(id);
+          selectedCardValues.set(id, value);
+        }
+
+        setSelectedCardIds(idList);
+      };
+
+      return {
+        selectedCardIds: selectedCardIds,
+        selectedCardValues: selectedCardValues,
+        isCardSelected: isCardSelected,
+        updateCardSelection: updateCardSelection
+      };
+    }
+
+    function useSingleSelect() {
+      var _a = React__namespace.useState([]),
+          selectedCardIds = _a[0],
+          setSelectedCardIds = _a[1];
+
+      var _b = React__namespace.useState([]),
+          selectedCardValues = _b[0],
+          setSelectedCardValues = _b[1];
+
+      var isCardSelected = function isCardSelected(id) {
+        return selectedCardIds.includes(id);
+      };
+
+      var updateCardSelection = function updateCardSelection(id, value) {
+        var idList = __spreadArrays(selectedCardIds);
+
+        var valueList = __spreadArrays(selectedCardValues);
+
+        if (selectedCardIds.includes(id)) {
+          idList = [];
+          valueList = [];
+        } else {
+          idList = [id];
+          valueList = value ? [value] : [];
+        }
+
+        setSelectedCardIds(idList);
+        setSelectedCardValues(valueList);
+      };
+
+      return {
+        selectedCardIds: selectedCardIds,
+        selectedCardValues: selectedCardValues,
+        isCardSelected: isCardSelected,
+        updateCardSelection: updateCardSelection
+      };
+    }
+
+    var SelectionCard = function SelectionCard(props) {
+      var _a;
+
+      var children = props.children,
+          onClick = props.onClick,
+          disabled = props.disabled,
+          id = props.id,
+          cardValue = props.cardValue,
+          overlayZIndex = props.overlayZIndex,
+          selected = props.selected,
+          className = props.className,
+          rest = __rest(props, ["children", "onClick", "disabled", "id", "cardValue", "overlayZIndex", "selected", "className"]);
+
+      var classes = classNames__default["default"]((_a = {}, _a['Selection-card'] = true, _a['Selection-card--selected'] = selected, _a['Selection-card--disabled'] = disabled && !selected, _a['Selection-card--selected-disabled'] = disabled && selected, _a), className);
+
+      var onClickHandler = function onClickHandler(event) {
+        onClick && onClick(event, id, cardValue);
+      };
+
+      var onKeyDownHandler = function onKeyDownHandler(event) {
+        if (event.key === 'Enter') {
+          onClickHandler(event);
+        }
+      };
+
+      return /*#__PURE__*/React__namespace.createElement("div", __assign({
+        role: "checkbox",
+        "aria-checked": selected,
+        tabIndex: 0,
+        onKeyDown: onKeyDownHandler,
+        onClick: function onClick(event) {
+          return onClickHandler(event);
+        },
+        className: classes,
+        "data-test": "DesignSystem-SelectionCard"
+      }, rest), /*#__PURE__*/React__namespace.createElement("div", {
+        className: "Selection-card-overlay",
+        style: {
+          zIndex: overlayZIndex
+        },
+        "data-test": "DesignSystem-SelectionCard-Overlay"
+      }), children);
+    };
+    SelectionCard.defaultProps = {
+      disabled: false,
+      overlayZIndex: 2
+    };
+    SelectionCard.useMultiSelect = useMultiSelect;
+    SelectionCard.useSingleSelect = useSingleSelect;
+
+    var version = "2.23.0";
 
     exports.ActionCard = ActionCard;
     exports.Avatar = Avatar;
@@ -16445,6 +16654,7 @@
     exports.Radio = Radio;
     exports.RangeSlider = RangeSlider;
     exports.Row = Row;
+    exports.SelectionCard = SelectionCard;
     exports.Sidesheet = Sidesheet;
     exports.Slider = Slider;
     exports.Spinner = Spinner;