@innovaccer/design-system 2.21.0 → 2.23.0

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1695030042653 
+   * Generated on: 1697533162404 
    *      Package: @innovaccer/design-system
-   *      Version: v2.21.0
+   *      Version: v2.23.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -1227,7 +1227,7 @@ var Breadcrumbs = function Breadcrumbs(props) {
   })));
 };
 
-var _excluded$D = ["size", "appearance", "iconAlign", "tabIndex", "largeIcon", "type", "children", "icon", "expanded", "selected", "loading", "disabled", "className", "tooltip", "iconVariations"];
+var _excluded$E = ["size", "appearance", "iconAlign", "tabIndex", "largeIcon", "type", "children", "icon", "expanded", "selected", "loading", "disabled", "className", "tooltip", "iconType"];
 var sizeMapping$3 = {
   tiny: 12,
   regular: 16,
@@ -1255,8 +1255,8 @@ var ButtonElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
       disabled = props.disabled,
       className = props.className;
       props.tooltip;
-      var iconVariations = props.iconVariations,
-      rest = _objectWithoutProperties(props, _excluded$D);
+      var iconType = props.iconType,
+      rest = _objectWithoutProperties(props, _excluded$E);
 
   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));
@@ -1279,7 +1279,7 @@ var ButtonElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, /*#__PURE__*/React.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.createElement("span", {
     className: "Button-text"
@@ -2565,7 +2565,7 @@ _defineProperty$1(Calendar, "defaultProps", {
   jumpView: true
 });
 
-var _excluded$C = ["shadow", "children", "className"];
+var _excluded$D = ["shadow", "children", "className"];
 var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classNames;
 
@@ -2573,7 +2573,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
       shadow = _props$shadow === void 0 ? 'shadow10' : _props$shadow,
       children = props.children,
       className = props.className,
-      rest = _objectWithoutProperties(props, _excluded$C);
+      rest = _objectWithoutProperties(props, _excluded$D);
 
   var classes = classnames((_classNames = {
     Card: true
@@ -2590,12 +2590,12 @@ Card.defaultProps = {
   shadow: 'shadow10'
 };
 
-var _excluded$B = ["border", "children", "className"];
+var _excluded$C = ["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$B);
+      rest = _objectWithoutProperties(props, _excluded$C);
 
   var classes = classnames(_defineProperty$1({
     CardSubdued: true
@@ -2662,7 +2662,7 @@ var isSpaceKey = function isSpaceKey(e) {
   return e.key === 'Space';
 };
 
-var _excluded$A = ["onClick", "onKeyDown", "role", "tabIndex"];
+var _excluded$B = ["onClick", "onKeyDown", "role", "tabIndex"];
 var allowed = {
   button: new Set(['Enter', 'Space', 'Spacebar', ' ']),
   link: new Set(['Enter']),
@@ -2686,7 +2686,7 @@ var useAccessibilityProps = function useAccessibilityProps(_ref) {
       _ref$role = _ref.role,
       role = _ref$role === void 0 ? 'button' : _ref$role,
       tabIndex = _ref.tabIndex,
-      rest = _objectWithoutProperties(_ref, _excluded$A);
+      rest = _objectWithoutProperties(_ref, _excluded$B);
 
   return _objectSpread2({}, onClick ? {
     onClick: onClick,
@@ -2716,115 +2716,44 @@ var useAccessibilityProps = function useAccessibilityProps(_ref) {
   });
 };
 
-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 _objectSpread2(_objectSpread2(_objectSpread2({}, defaultVariant), iconVariantMapper[iconName]), variations);
+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'
 };
+/**
+ *
+ * <pre class="DocPage-codeBlock mx-6 mb-7">
+ *  Following Icons are mapped to **outlined** type by default:
+ *  <br />
+ *  timelapse,  content_copy,  speed,  add_circle_outline,  turned_in_not,  important_devices,  thumb_down_off_alt,  alarm_on,  calendar_view_month,  aspect_ratio,  change_history,  arrow_circle_down,  card_membership,  query_builder,  copyright,  arrow_circle_up,  alarm,  work_outline,  bookmark_border,  delete_outline,  credit_card,  highlight_of,  check_circle_outline, help_outline,  schedule,  radio_button_unchecked,  radio_button_checked,  delete
+ * </pre>
+ */
 
 var Icon = function Icon(props) {
   var _classNames;
@@ -2833,8 +2762,7 @@ var Icon = function Icon(props) {
       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 = {
@@ -2844,7 +2772,7 @@ var Icon = function Icon(props) {
     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('_');
@@ -2853,17 +2781,9 @@ var Icon = function Icon(props) {
 
   var color = appearance && appearance.includes('_') ? getIconAppearance(appearance) : appearance;
   var iconClass = classnames((_classNames = {}, _defineProperty$1(_classNames, 'material-icons', true), _defineProperty$1(_classNames, 'material-icons-rounded', type === 'rounded'), _defineProperty$1(_classNames, 'material-icons-outlined', type === 'outlined'), _defineProperty$1(_classNames, 'Icon', true), _defineProperty$1(_classNames, "Icon--".concat(color), appearance), _defineProperty$1(_classNames, "".concat(className), className), _classNames));
-
-  var _getFontVariation = getFontVariation(name, variations, type, size),
-      fill = _getFontVariation.fill,
-      grade = _getFontVariation.grade,
-      opticalSize = _getFontVariation.opticalSize,
-      weight = _getFontVariation.weight;
-
   var styles = {
     fontSize: "".concat(size, "px"),
-    width: "".concat(size, "px"),
-    'font-variation-settings': "\"FILL\" ".concat(fill, ", \"wght\" ").concat(weight, ", \"GRAD\" ").concat(grade, ", \"opsz\" ").concat(opticalSize)
+    width: "".concat(size, "px")
   }; // change `children` to {name} after migration
 
   if (children && /*#__PURE__*/React.isValidElement(children)) {
@@ -2881,25 +2801,24 @@ var Icon = function Icon(props) {
 };
 Icon.displayName = 'Icon';
 Icon.defaultProps = {
-  size: 16,
-  type: 'rounded'
+  size: 16
 };
 
-var _excluded$z = ["children", "componentType", "className"];
+var _excluded$A = ["children", "componentType", "className"];
 
 var GenericText = function GenericText(_ref) {
   var children = _ref.children,
       _ref$componentType = _ref.componentType,
       componentType = _ref$componentType === void 0 ? 'span' : _ref$componentType,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$z);
+      props = _objectWithoutProperties(_ref, _excluded$A);
 
   return /*#__PURE__*/React.createElement(componentType, _objectSpread2(_objectSpread2({}, props), {}, {
     className: className
   }), children);
 };
 
-var _excluded$y = ["appearance", "size", "children", "weight", "small", "className", "color"];
+var _excluded$z = ["appearance", "size", "children", "weight", "small", "className", "color"];
 var Text = function Text(props) {
   var _classNames;
 
@@ -2910,7 +2829,7 @@ var Text = function Text(props) {
       small = props.small,
       className = props.className,
       color = props.color,
-      rest = _objectWithoutProperties(props, _excluded$y);
+      rest = _objectWithoutProperties(props, _excluded$z);
 
   var classes = classnames((_classNames = {
     Text: true
@@ -2940,7 +2859,7 @@ var GenericChip = function GenericChip(props) {
       onClose = props.onClose,
       onClick = props.onClick,
       labelPrefix = props.labelPrefix,
-      iconVariations = props.iconVariations;
+      iconType = props.iconType;
   var baseProps = extractBaseProps(props);
 
   var iconClass = function iconClass(align) {
@@ -3003,7 +2922,7 @@ var GenericChip = function GenericChip(props) {
     }), icon && /*#__PURE__*/React.createElement(Icon, {
       "data-test": "DesignSystem-GenericChip--Icon",
       name: icon,
-      variations: iconVariations,
+      type: iconType,
       appearance: iconAppearance('left'),
       className: iconClass('left')
     }), renderLabel(), clearButton && /*#__PURE__*/React.createElement("div", {
@@ -3036,7 +2955,7 @@ var Chip = function Chip(props) {
       name = props.name,
       className = props.className,
       labelPrefix = props.labelPrefix,
-      iconVariations = props.iconVariations;
+      iconType = props.iconType;
   var baseProps = extractBaseProps(props);
 
   var onCloseHandler = function onCloseHandler() {
@@ -3058,7 +2977,7 @@ var Chip = function Chip(props) {
     label: label,
     selected: select,
     icon: icon,
-    iconVariations: iconVariations,
+    iconType: iconType,
     clearButton: clearbutton,
     disabled: disabled,
     className: chipClass,
@@ -3102,7 +3021,7 @@ var ChipGroup = function ChipGroup(props) {
         selected = item.selected,
         clearButton = item.clearButton,
         name = item.name,
-        iconVariations = item.iconVariations;
+        iconType = item.iconType;
     return /*#__PURE__*/React.createElement("span", {
       key: ind,
       className: "ChipGroup-item"
@@ -3114,7 +3033,7 @@ var ChipGroup = function ChipGroup(props) {
       icon: icon,
       disabled: disabled,
       clearButton: clearButton,
-      iconVariations: iconVariations,
+      iconType: iconType,
       type: type,
       onClick: function onClick() {
         return onClickHandler(item);
@@ -3197,7 +3116,7 @@ var CheckboxIcon = function CheckboxIcon(props) {
   }
 };
 
-var _excluded$x = ["size", "tabIndex", "defaultChecked", "indeterminate", "label", "error", "disabled", "onChange", "name", "value", "className", "checked", "helpText", "id"];
+var _excluded$y = ["size", "tabIndex", "defaultChecked", "indeterminate", "label", "error", "disabled", "onChange", "name", "value", "className", "checked", "helpText", "id"];
 var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
   var _classNames, _classNames2, _classNames3, _classNames4, _classNames5, _classNames6;
 
@@ -3218,7 +3137,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$x);
+      rest = _objectWithoutProperties(props, _excluded$y);
 
   var ref = React.useRef(null);
   React.useImperativeHandle(forwardedRef, function () {
@@ -3299,7 +3218,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
 });
 Checkbox.displayName = 'Checkbox';
 
-var _excluded$w = ["size", "sizeXS", "sizeS", "sizeM", "sizeL", "sizeXL", "className", "children"];
+var _excluded$x = ["size", "sizeXS", "sizeS", "sizeM", "sizeL", "sizeXL", "className", "children"];
 var Column = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classNames;
 
@@ -3311,7 +3230,7 @@ var Column = /*#__PURE__*/React.forwardRef(function (props, ref) {
       sizeXL = props.sizeXL,
       className = props.className,
       children = props.children,
-      rest = _objectWithoutProperties(props, _excluded$w);
+      rest = _objectWithoutProperties(props, _excluded$x);
 
   var classes = classnames((_classNames = {}, _defineProperty$1(_classNames, 'Col', true), _defineProperty$1(_classNames, "Col--".concat(size), size), _defineProperty$1(_classNames, "Col--xs-".concat(sizeXS), sizeXS), _defineProperty$1(_classNames, "Col--s-".concat(sizeS), sizeS), _defineProperty$1(_classNames, "Col--m-".concat(sizeM), sizeM), _defineProperty$1(_classNames, "Col--l-".concat(sizeL), sizeL), _defineProperty$1(_classNames, "Col--xl-".concat(sizeXL), sizeXL), _defineProperty$1(_classNames, "".concat(className), className), _classNames));
   return /*#__PURE__*/React.createElement("div", _extends$2({
@@ -3422,7 +3341,7 @@ var Trigger$1 = function Trigger(props) {
   }));
 };
 
-var _excluded$v = ["date", "open", "position", "inputFormat", "outputFormat", "inputOptions", "validators", "withInput", "disabledBefore", "disabledAfter", "onDateChange", "closeOnSelect", "size", "showTodayDate", "children", "view"];
+var _excluded$w = ["date", "open", "position", "inputFormat", "outputFormat", "inputOptions", "validators", "withInput", "disabledBefore", "disabledAfter", "onDateChange", "closeOnSelect", "size", "showTodayDate", "children", "view"];
 var DatePicker = /*#__PURE__*/function (_React$Component) {
   _inherits(DatePicker, _React$Component);
 
@@ -3565,7 +3484,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
           _this$props4$children = _this$props4.children,
           children = _this$props4$children === void 0 ? /*#__PURE__*/React.createElement(React.Fragment, null) : _this$props4$children,
           view = _this$props4.view,
-          rest = _objectWithoutProperties(_this$props4, _excluded$v);
+          rest = _objectWithoutProperties(_this$props4, _excluded$w);
 
       var date = this.state.date;
       var months = config.months;
@@ -4629,7 +4548,7 @@ function debounce$1 (delay, atBegin, callback) {
   return callback === undefined ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);
 }
 
-var _excluded$u = ["triggerSize", "placeholder", "menu", "children", "icon", "disabled", "open", "inlineLabel", "error", "iconVariations"];
+var _excluded$v = ["triggerSize", "placeholder", "menu", "children", "icon", "disabled", "open", "inlineLabel", "error", "iconType"];
 var DropdownButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classNames, _classNames2;
 
@@ -4645,8 +4564,8 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
       open = props.open,
       inlineLabel = props.inlineLabel,
       error = props.error,
-      iconVariations = props.iconVariations,
-      rest = _objectWithoutProperties(props, _excluded$u);
+      iconType = props.iconType,
+      rest = _objectWithoutProperties(props, _excluded$v);
 
   var buttonDisabled = disabled ? 'disabled' : 'default';
   var trimmedPlaceholder = placeholder.trim();
@@ -4671,13 +4590,13 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
     appearance: buttonDisabled,
     className: "d-flex align-items-center mr-4",
     name: icon,
-    variations: iconVariations
+    type: iconType
   }), value && /*#__PURE__*/React.createElement("span", {
     className: textClass
   }, value)), /*#__PURE__*/React.createElement(Icon, {
     appearance: buttonDisabled,
     name: iconName,
-    variations: iconVariations
+    type: iconType
   }));
 });
 DropdownButton.displayName = 'DropdownButton';
@@ -4816,7 +4735,7 @@ var IconOption = function IconOption(props) {
   var label = optionData.label,
       icon = optionData.icon,
       disabled = optionData.disabled,
-      iconVariations = optionData.iconVariations;
+      iconType = optionData.iconType;
   var OptionClass = classnames((_classNames = {}, _defineProperty$1(_classNames, "".concat(className), true), _defineProperty$1(_classNames, 'Option--icon', icon), _classNames));
   return (
     /*#__PURE__*/
@@ -4833,7 +4752,7 @@ var IconOption = function IconOption(props) {
       className: "Option-icon mr-4",
       "data-test": "".concat(dataTest, "--Icon"),
       name: icon,
-      variations: iconVariations
+      type: iconType
     }), /*#__PURE__*/React.createElement("div", {
       className: 'Option-label'
     }, /*#__PURE__*/React.createElement(Text, {
@@ -5134,6 +5053,47 @@ var Loading = function Loading(props) {
   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(_ref) {
+  var dropdownStyle = _ref.dropdownStyle,
+      errorType = _ref.errorType,
+      updateOptions = _ref.updateOptions;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "Dropdown-wrapper px-7 d-flex",
+    style: dropdownStyle,
+    "data-test": "DesignSystem-Dropdown--wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex flex-column justify-content-center align-items-center",
+    "data-test": "DesignSystem-Dropdown--errorWrapper"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "mb-3",
+    weight: "strong"
+  }, errorTitle[errorType]), /*#__PURE__*/React.createElement(Text, {
+    className: "text-align-center mb-6",
+    weight: "medium",
+    size: "small",
+    appearance: "subtle"
+  }, errorDescription[errorType]), errorType === 'FAILED_TO_FETCH' && /*#__PURE__*/React.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'
@@ -5180,7 +5140,11 @@ var DropdownList = function DropdownList(props) {
       className = props.className,
       _props$searchPlacehol = props.searchPlaceholder,
       searchPlaceholder = _props$searchPlacehol === void 0 ? 'Search..' : _props$searchPlacehol,
-      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.createRef();
   var triggerRef = /*#__PURE__*/React.createRef();
@@ -5209,6 +5173,7 @@ var DropdownList = function DropdownList(props) {
     minHeight && setMinHeight(minHeight);
   };
 
+  var isDropdownListBlank = listOptions.length === 0 && !loadingOptions && selected.length <= 0;
   React.useEffect(function () {
     var timer;
 
@@ -5251,7 +5216,7 @@ var DropdownList = function DropdownList(props) {
       disabled = props.disabled,
       inlineLabel = props.inlineLabel,
       triggerLabel = props.triggerLabel,
-      iconVariations = props.iconVariations;
+      iconType = props.iconType;
   var CustomTrigger = customTrigger ? customTrigger(triggerLabel ? triggerLabel : placeholder) : /*#__PURE__*/React.createElement(React.Fragment, null);
   var NewCustomTrigger = /*#__PURE__*/React.cloneElement(CustomTrigger, {
     tabIndex: 0,
@@ -5267,7 +5232,7 @@ var DropdownList = function DropdownList(props) {
     menu: menu,
     error: error,
     ref: dropdownTriggerRef,
-    iconVariations: iconVariations
+    iconType: iconType
   }, triggerLabel);
   var dropdownStyle = {
     maxHeight: maxHeight,
@@ -5282,6 +5247,16 @@ var DropdownList = function DropdownList(props) {
     minHeight: minHeight
   };
 
+  var defaultErrorTemplate = function defaultErrorTemplate() {
+    return /*#__PURE__*/React.createElement(ErrorTemplate, {
+      dropdownStyle: _objectSpread2(_objectSpread2({}, dropdownStyle), {}, {
+        minHeight: maxHeight
+      }),
+      updateOptions: updateOptions,
+      errorType: errorType
+    });
+  };
+
   var getDropdownSectionClass = function getDropdownSectionClass(showClearButton) {
     var _classNames;
 
@@ -5494,7 +5469,8 @@ var DropdownList = function DropdownList(props) {
         allItemsSectionLabel = _props$allItemsSectio === void 0 ? 'All Items' : _props$allItemsSectio,
         _props$loadersCount = props.loadersCount,
         loadersCount = _props$loadersCount === void 0 ? 10 : _props$loadersCount,
-        loadingOptions = props.loadingOptions;
+        _props$errorTemplate = props.errorTemplate,
+        errorTemplate = _props$errorTemplate === void 0 ? defaultErrorTemplate : _props$errorTemplate;
 
     var selectAllPresent = _isSelectAllPresent(searchTerm, remainingOptions, withSelectAll, withCheckbox);
 
@@ -5509,18 +5485,22 @@ var DropdownList = function DropdownList(props) {
       }, renderLoading(loadersCount)));
     }
 
-    if (listOptions.length === 0 && !loadingOptions && selected.length <= 0) {
-      var _props$noResultMessag = props.noResultMessage,
-          noResultMessage = _props$noResultMessag === void 0 ? 'No result found' : _props$noResultMessag;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "Dropdown-wrapper",
-        style: dropdownStyle,
-        "data-test": "DesignSystem-Dropdown--errorWrapper"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: 'Option'
-      }, /*#__PURE__*/React.createElement("div", {
-        className: 'Option-subinfo'
-      }, noResultMessage)));
+    if (isDropdownListBlank) {
+      if (noResultMessage) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "Dropdown-wrapper",
+          style: dropdownStyle,
+          "data-test": "DesignSystem-Dropdown--errorWrapper"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: 'Option'
+        }, /*#__PURE__*/React.createElement("div", {
+          className: 'Option-subinfo'
+        }, noResultMessage)));
+      } else {
+        return errorTemplate && errorTemplate({
+          errorType: errorType
+        });
+      }
     }
 
     return /*#__PURE__*/React.createElement("div", {
@@ -5634,6 +5614,7 @@ var DropdownList = function DropdownList(props) {
     }
   };
 
+  var enableSearch = (withSearch || props.async) && (!isDropdownListBlank || errorType === 'NO_RECORDS_FOUND');
   return (
     /*#__PURE__*/
     //TODO(a11y)
@@ -5651,13 +5632,13 @@ var DropdownList = function DropdownList(props) {
       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';
 
-var _excluded$t = ["triggerOptions", "selected", "tabIndex"];
+var _excluded$u = ["triggerOptions", "selected", "tabIndex"];
 var inputRef = /*#__PURE__*/React.createRef();
 
 /**
@@ -5673,6 +5654,21 @@ var inputRef = /*#__PURE__*/React.createRef();
  *    * onChange: Called when selected options are updated.
  *  - Uncontrolled Dropdown:
  *    * onChange: Called when user `clicks on option` / `clicks on Clear, or Apply button`.
+ * 4. Default errorTemplate:
+ *
+ *  <pre class="DocPage-codeBlock mx-6 mb-7">
+ * (props) => {
+ *      const { errorType = 'DEFAULT' } = props;
+ *      const errorMessages = {
+ *        'FAILED\_TO\_FETCH': 'Failed to fetch data',
+ *        'NO\_RECORDS\_FOUND': 'No results found',
+ *        'DEFAULT': 'No record available'
+ *      }
+ *      return(
+ *        \<Heading>{errorMessages[errorType]}\</Heading>
+ *      );
+ * }
+ * </pre>
  */
 var Dropdown = /*#__PURE__*/function (_React$Component) {
   _inherits(Dropdown, _React$Component);
@@ -5751,7 +5747,8 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
           searchTerm = _this$state.searchTerm,
           selectAll = _this$state.selectAll,
           tempSelected = _this$state.tempSelected,
-          previousSelected = _this$state.previousSelected;
+          previousSelected = _this$state.previousSelected,
+          errorType = _this$state.errorType;
       var updatedAsync = async === undefined ? _this.state.async : async;
       var _this$props = _this.props,
           fetchOptions = _this$props.fetchOptions,
@@ -5778,7 +5775,18 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
 
           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(_objectSpread2(_objectSpread2({}, _this.state), {}, {
+            errorType: fetchOptions ? errorResult : errorType,
             scrollIndex: res.scrollToIndex || 0,
             optionsLength: optionsLength,
             loading: false,
@@ -5794,6 +5802,11 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
 
           if (updatedAsync || withSearch) (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
         }
+      })["catch"](function () {
+        _this.setState({
+          errorType: fetchOptions ? 'FAILED_TO_FETCH' : errorType,
+          loading: false
+        });
       });
     });
 
@@ -5801,7 +5814,8 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
       _this.setState(_objectSpread2(_objectSpread2({}, _this.state), {}, {
         loading: true,
         searchInit: true,
-        searchTerm: search
+        searchTerm: search,
+        errorType: 'NO_RECORDS_FOUND'
       }));
     });
 
@@ -6048,6 +6062,14 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
       });
     }));
 
+    _defineProperty$1(_assertThisInitialized$1(_this), "reload", function () {
+      _this.setState({
+        loading: true
+      }, function () {
+        _this.updateOptions(false);
+      });
+    });
+
     _defineProperty$1(_assertThisInitialized$1(_this), "debounceClear", debounce$1(250, function () {
       return _this.updateOptions(false);
     }));
@@ -6219,7 +6241,8 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
       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;
   }
@@ -6294,7 +6317,8 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
           selectAll = _this$state7.selectAll,
           triggerLabel = _this$state7.triggerLabel,
           previousSelected = _this$state7.previousSelected,
-          scrollIndex = _this$state7.scrollIndex;
+          scrollIndex = _this$state7.scrollIndex,
+          errorType = _this$state7.errorType;
       var _this$props13 = this.props,
           _this$props13$withSel = _this$props13.withSelectAll,
           withSelectAll = _this$props13$withSel === void 0 ? true : _this$props13$withSel,
@@ -6305,7 +6329,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$t);
+          rest = _objectWithoutProperties(_this$props14, _excluded$u);
 
       var remainingOptionsLen = searchedOptionsLength - options.length;
       var firstEnabledOption = tabIndex ? tabIndex : _isSelectAllPresent(searchTerm, remainingOptionsLen, withSelectAll, withCheckbox) ? 0 : options.findIndex(function (option) {
@@ -6335,7 +6359,9 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
         onOptionSelect: this.onOptionSelect,
         onSelectAll: this.onSelectAll,
         customTrigger: triggerOptions.customTrigger,
-        scrollIndex: scrollIndex
+        scrollIndex: scrollIndex,
+        updateOptions: this.reload,
+        errorType: errorType
       }, rest));
     }
   }]);
@@ -6351,7 +6377,7 @@ _defineProperty$1(Dropdown, "defaultProps", {
   searchDebounceDuration: 300
 });
 
-var _excluded$s = ["appearance", "size", "children", "className", "color"];
+var _excluded$t = ["appearance", "size", "children", "className", "color"];
 var sizeMap = {
   s: 'h5',
   m: 'h4',
@@ -6367,7 +6393,7 @@ var Heading = function Heading(props) {
       children = props.children,
       className = props.className,
       color = props.color,
-      rest = _objectWithoutProperties(props, _excluded$s);
+      rest = _objectWithoutProperties(props, _excluded$t);
 
   var classes = classnames((_classNames = {
     Heading: true
@@ -6385,18 +6411,18 @@ Heading.defaultProps = {
   size: 'm'
 };
 
-var _excluded$r = ["className", "iconVariations"];
+var _excluded$s = ["className", "iconType"];
 var ActionButton$1 = function ActionButton(props) {
   var _classNames;
 
   var className = props.className,
-      iconVariations = props.iconVariations,
-      rest = _objectWithoutProperties(props, _excluded$r);
+      iconType = props.iconType,
+      rest = _objectWithoutProperties(props, _excluded$s);
 
   var iconClass = classnames((_classNames = {}, _defineProperty$1(_classNames, 'ActionButton', true), _defineProperty$1(_classNames, "".concat(className), className), _classNames));
   return /*#__PURE__*/React.createElement(Icon, _extends$2({
     className: iconClass,
-    variations: iconVariations,
+    type: iconType,
     "data-test": "DesignSystem-Input-ActionButton"
   }, rest));
 };
@@ -6406,7 +6432,7 @@ ActionButton$1.defaultProps = {
   type: 'rounded'
 };
 
-var _excluded$q = ["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 _excluded$r = ["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 sizeMapping$2 = {
   tiny: 12,
   regular: 16,
@@ -6447,8 +6473,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       autoFocus = props.autoFocus,
       disabled = props.disabled,
       readOnly = props.readOnly,
-      iconVariations = props.iconVariations,
-      rest = _objectWithoutProperties(props, _excluded$q);
+      iconType = props.iconType,
+      rest = _objectWithoutProperties(props, _excluded$r);
 
   var ref = React.useRef(null);
 
@@ -6507,7 +6533,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
   }, /*#__PURE__*/React.createElement(Icon, {
     name: icon,
     size: sizeMapping$2[size],
-    variations: iconVariations
+    type: iconType
   })), /*#__PURE__*/React.createElement("input", _extends$2({
     "data-test": "DesignSystem-Input"
   }, baseProps, rest, {
@@ -6557,7 +6583,7 @@ Object.assign(Input, {
   ActionButton: ActionButton$1
 });
 
-var _excluded$p = ["size", "defaultValue", "name", "placeholder", "icon", "prefix", "suffix", "error", "min", "max", "onChange", "onClick", "onBlur", "onFocus", "className", "autoFocus", "disabled", "readOnly", "value", "showActionButton", "onKeyDown", "iconVariations"];
+var _excluded$q = ["size", "defaultValue", "name", "placeholder", "icon", "prefix", "suffix", "error", "min", "max", "onChange", "onClick", "onBlur", "onFocus", "className", "autoFocus", "disabled", "readOnly", "value", "showActionButton", "onKeyDown", "iconType"];
 var sizeMapping$1 = {
   regular: 16,
   large: 20
@@ -6607,8 +6633,8 @@ var MetricInput = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       _props$showActionButt = props.showActionButton,
       showActionButton = _props$showActionButt === void 0 ? true : _props$showActionButt,
       onKeyDown = props.onKeyDown,
-      iconVariations = props.iconVariations,
-      rest = _objectWithoutProperties(props, _excluded$p);
+      iconType = props.iconType,
+      rest = _objectWithoutProperties(props, _excluded$q);
 
   var ref = React.useRef(null);
   var isUncontrolled = valueProp === undefined;
@@ -6706,7 +6732,7 @@ var MetricInput = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
   }, icon && /*#__PURE__*/React.createElement(Icon, {
     "data-test": "DesignSystem-MetricInput--icon",
     name: icon,
-    variations: iconVariations,
+    type: iconType,
     size: sizeMapping$1[size],
     appearance: !value ? 'disabled' : 'subtle',
     className: iconClass
@@ -6772,7 +6798,7 @@ var getDefaultValue = function getDefaultValue(mask, placeholderChar) {
   return val;
 };
 
-var _excluded$o = ["mask", "value", "placeholderChar", "validators", "clearOnEmptyBlur", "defaultValue", "mask", "error", "caption", "required", "onChange", "onPaste", "onBlur", "onFocus", "onClear", "className", "id", "helpText"];
+var _excluded$p = ["mask", "value", "placeholderChar", "validators", "clearOnEmptyBlur", "defaultValue", "mask", "error", "caption", "required", "onChange", "onPaste", "onBlur", "onFocus", "onClear", "className", "id", "helpText"];
 
 /**
  * It works as Uncontrolled Input
@@ -6801,7 +6827,7 @@ var InputMask = /*#__PURE__*/React.forwardRef(function (props, forwardRef) {
       className = props.className,
       id = props.id,
       helpText = props.helpText,
-      rest = _objectWithoutProperties(props, _excluded$o);
+      rest = _objectWithoutProperties(props, _excluded$p);
 
   var isEditable = React.useCallback(function (pos) {
     return _typeof(mask[pos]) === 'object';
@@ -7105,7 +7131,7 @@ InputMask.utils = {
 };
 var X = InputMask;
 
-var _excluded$n = ["required", "optional", "withInput", "disabled", "children", "className", "info"];
+var _excluded$o = ["required", "optional", "withInput", "disabled", "children", "className", "info"];
 
 /**
  * *NOTE: Extends props with HTMLProps<HTMLLabelElement>*
@@ -7120,7 +7146,7 @@ var Label = function Label(props) {
       children = props.children,
       className = props.className,
       info = props.info,
-      rest = _objectWithoutProperties(props, _excluded$n);
+      rest = _objectWithoutProperties(props, _excluded$o);
 
   var baseProps = extractBaseProps(props);
   var LabelClass = classnames((_classNames = {
@@ -7278,7 +7304,7 @@ var Editable = function Editable(props) {
 };
 Editable.displayName = 'Editable';
 
-var _excluded$m = ["onChange", "onClose"];
+var _excluded$n = ["onChange", "onClose"];
 var EditableDropdown = function EditableDropdown(props) {
   var _classNames2;
 
@@ -7289,7 +7315,7 @@ var EditableDropdown = function EditableDropdown(props) {
 
   var onDropdownChange = dropdownOptions.onChange,
       onDropdownClose = dropdownOptions.onClose,
-      rest = _objectWithoutProperties(dropdownOptions, _excluded$m);
+      rest = _objectWithoutProperties(dropdownOptions, _excluded$n);
 
   var _React$useState = React.useState(placeholder),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -7371,7 +7397,7 @@ EditableDropdown.defaultProps = {
   dropdownOptions: {}
 };
 
-var _excluded$l = ["children", "className", "appearance", "size", "disabled"];
+var _excluded$m = ["children", "className", "appearance", "size", "disabled"];
 var Link = function Link(props) {
   var _classNames;
 
@@ -7380,7 +7406,7 @@ var Link = function Link(props) {
       appearance = props.appearance,
       size = props.size,
       disabled = props.disabled,
-      rest = _objectWithoutProperties(props, _excluded$l);
+      rest = _objectWithoutProperties(props, _excluded$m);
 
   var classes = classnames((_classNames = {
     Link: true
@@ -7465,7 +7491,7 @@ var Meta = function Meta(props) {
   var label = props.label,
       icon = props.icon,
       size = props.size,
-      iconVariations = props.iconVariations;
+      iconType = props.iconType;
   return /*#__PURE__*/React.createElement("span", {
     "data-test": "DesignSystem-MetaList--Meta",
     className: 'Meta'
@@ -7474,7 +7500,7 @@ var Meta = function Meta(props) {
     name: icon,
     appearance: "subtle",
     className: 'Meta-icon',
-    variations: iconVariations,
+    type: iconType,
     size: size === 'regular' ? 16 : 12
   }), /*#__PURE__*/React.createElement(Text, {
     size: size,
@@ -7509,7 +7535,7 @@ var MetaList = function MetaList(props) {
     var _item$label = item.label,
         label = _item$label === void 0 ? '' : _item$label,
         icon = item.icon,
-        iconVariations = item.iconVariations;
+        iconType = item.iconType;
     var rightSeperator = ind !== list.length - 1;
     return /*#__PURE__*/React.createElement("span", {
       key: ind,
@@ -7518,7 +7544,7 @@ var MetaList = function MetaList(props) {
       size: size,
       label: label,
       icon: icon,
-      iconVariations: iconVariations
+      iconType: iconType
     }), rightSeperator && /*#__PURE__*/React.createElement(Icon, {
       "data-test": "DesignSystem-MetaList--rightSeperator",
       name: "fiber_manual_record",
@@ -8276,12 +8302,12 @@ _defineProperty$1(MultiSlider, "defaultProps", {
 
 _defineProperty$1(MultiSlider, "Handle", MultiSliderHandle);
 
-var _excluded$k = ["children", "className", "onOutsideClick"];
+var _excluded$l = ["children", "className", "onOutsideClick"];
 var OutsideClick = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       className = props.className,
       onOutsideClick = props.onOutsideClick,
-      rest = _objectWithoutProperties(props, _excluded$k);
+      rest = _objectWithoutProperties(props, _excluded$l);
 
   var innerRef = React.useRef(null);
   React.useImperativeHandle(ref, function () {
@@ -8313,7 +8339,7 @@ var OutsideClick = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 OutsideClick.displayName = 'OutsideClick';
 
-var _excluded$j = ["appearance", "children", "className", "color"];
+var _excluded$k = ["appearance", "children", "className", "color"];
 var Paragraph = function Paragraph(props) {
   var _classNames;
 
@@ -8321,7 +8347,7 @@ var Paragraph = function Paragraph(props) {
       children = props.children,
       className = props.className,
       color = props.color,
-      rest = _objectWithoutProperties(props, _excluded$j);
+      rest = _objectWithoutProperties(props, _excluded$k);
 
   var classes = classnames((_classNames = {
     Text: true
@@ -8369,7 +8395,7 @@ ProgressBar.defaultProps = {
   size: 'regular'
 };
 
-var _excluded$i = ["size", "label", "disabled", "onChange", "name", "value", "checked", "defaultChecked", "className", "helpText", "error"];
+var _excluded$j = ["size", "label", "disabled", "onChange", "name", "value", "checked", "defaultChecked", "className", "helpText", "error"];
 var Radio = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
   var _classNames, _classNames2, _classNames3;
 
@@ -8385,7 +8411,7 @@ var Radio = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       className = props.className,
       helpText = props.helpText,
       error = props.error,
-      rest = _objectWithoutProperties(props, _excluded$i);
+      rest = _objectWithoutProperties(props, _excluded$j);
 
   var ref = React.useRef(null);
   React.useImperativeHandle(forwardedRef, function () {
@@ -8436,11 +8462,11 @@ var Radio = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
 });
 Radio.displayName = 'Radio';
 
-var _excluded$h = ["className", "children"];
+var _excluded$i = ["className", "children"];
 var Row = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
       children = props.children,
-      rest = _objectWithoutProperties(props, _excluded$h);
+      rest = _objectWithoutProperties(props, _excluded$i);
 
   var classes = classnames(_defineProperty$1({
     Row: true
@@ -8557,13 +8583,13 @@ Spinner.defaultProps = {
   size: 'medium'
 };
 
-var _excluded$g = ["value", "defaultValue", "onRelease", "onChange"];
+var _excluded$h = ["value", "defaultValue", "onRelease", "onChange"];
 var Slider = function Slider(props) {
   var valueProp = props.value,
       defaultValue = props.defaultValue,
       onRelease = props.onRelease,
       onChange = props.onChange,
-      rest = _objectWithoutProperties(props, _excluded$g);
+      rest = _objectWithoutProperties(props, _excluded$h);
 
   var _React$useState = React.useState(valueProp === undefined ? defaultValue : valueProp),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -8596,7 +8622,7 @@ Slider.defaultProps = _objectSpread2(_objectSpread2({}, MultiSlider.defaultProps
   defaultValue: 0
 });
 
-var _excluded$f = ["value", "defaultValue", "onChange", "onRelease"];
+var _excluded$g = ["value", "defaultValue", "onChange", "onRelease"];
 var RangeIndex;
 
 (function (RangeIndex) {
@@ -8609,7 +8635,7 @@ var RangeSlider = function RangeSlider(props) {
       defaultValue = props.defaultValue,
       onChange = props.onChange,
       onRelease = props.onRelease,
-      rest = _objectWithoutProperties(props, _excluded$f);
+      rest = _objectWithoutProperties(props, _excluded$g);
 
   var _React$useState = React.useState(valueProp === undefined ? defaultValue : valueProp),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -8645,7 +8671,7 @@ RangeSlider.defaultProps = _objectSpread2(_objectSpread2({}, MultiSlider.default
   defaultValue: [0, 10]
 });
 
-var _excluded$e = ["appearance", "children", "className", "color"];
+var _excluded$f = ["appearance", "children", "className", "color"];
 var Subheading = function Subheading(props) {
   var _classNames;
 
@@ -8653,7 +8679,7 @@ var Subheading = function Subheading(props) {
       children = props.children,
       className = props.className,
       color = props.color,
-      rest = _objectWithoutProperties(props, _excluded$e);
+      rest = _objectWithoutProperties(props, _excluded$f);
 
   var classes = classnames((_classNames = {
     Subheading: true
@@ -8670,7 +8696,7 @@ Subheading.defaultProps = {
   appearance: 'default'
 };
 
-var _excluded$d = ["size", "defaultChecked", "disabled", "onChange", "name", "value", "className", "appearance", "checked"];
+var _excluded$e = ["size", "defaultChecked", "disabled", "onChange", "name", "value", "className", "appearance", "checked"];
 
 /**
  * ######Switch has two types:
@@ -8690,7 +8716,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className = props.className;
       props.appearance;
       var checkedProp = props.checked,
-      rest = _objectWithoutProperties(props, _excluded$d);
+      rest = _objectWithoutProperties(props, _excluded$e);
 
   var _React$useState = React.useState(checkedProp === undefined ? defaultChecked : checkedProp),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -8729,7 +8755,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 Switch.displayName = 'Switch';
 
-var _excluded$c = ["rows", "resize", "disabled", "name", "placeholder", "value", "defaultValue", "required", "error", "onChange", "onClick", "onBlur", "onFocus", "className"];
+var _excluded$d = ["rows", "resize", "disabled", "name", "placeholder", "value", "defaultValue", "required", "error", "onChange", "onClick", "onBlur", "onFocus", "className"];
 var Textarea = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classNames;
 
@@ -8749,7 +8775,7 @@ var Textarea = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onBlur = props.onBlur,
       onFocus = props.onFocus,
       className = props.className,
-      rest = _objectWithoutProperties(props, _excluded$c);
+      rest = _objectWithoutProperties(props, _excluded$d);
 
   var classes = classnames((_classNames = {}, _defineProperty$1(_classNames, 'Textarea', true), _defineProperty$1(_classNames, 'Textarea--resize', resize), _defineProperty$1(_classNames, 'Textarea--error', error), _classNames), className);
   return /*#__PURE__*/React.createElement("textarea", _extends$2({
@@ -13878,7 +13904,7 @@ _defineProperty$1(PopperWrapper, "defaultProps", {
   style: {}
 });
 
-var _excluded$b = ["position", "customStyle", "dark", "children", "onToggle", "className", "hideOnReferenceEscape", "boundaryElement"];
+var _excluded$c = ["position", "customStyle", "dark", "children", "onToggle", "className", "hideOnReferenceEscape", "boundaryElement"];
 var propsList = ['appendToBody', 'trigger', 'hoverable', 'on', 'open', 'closeOnBackdropClick', 'offset', 'closeOnScroll'];
 var Popover = function Popover(props) {
   var position = props.position,
@@ -13890,7 +13916,7 @@ var Popover = function Popover(props) {
       hideOnReferenceEscape = props.hideOnReferenceEscape,
       _props$boundaryElemen = props.boundaryElement,
       boundaryElement = _props$boundaryElemen === void 0 ? document.body : _props$boundaryElemen,
-      rest = _objectWithoutProperties(props, _excluded$b);
+      rest = _objectWithoutProperties(props, _excluded$c);
 
   var _React$useState = React.useState(!!props.open),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -13942,7 +13968,7 @@ Popover.defaultProps = Object.assign({}, filterProps(PopperWrapper.defaultProps,
   customStyle: {}
 });
 
-var _excluded$a = ["type", "onClick"];
+var _excluded$b = ["type", "onClick"];
 var keyCodes = {
   BACKSPACE: 'Backspace',
   DELETE: 'Delete',
@@ -14061,7 +14087,7 @@ var ChipInput = function ChipInput(props) {
     var _chipOptions$type = chipOptions.type,
         type = _chipOptions$type === void 0 ? 'input' : _chipOptions$type,
         _onClick = chipOptions.onClick,
-        rest = _objectWithoutProperties(chipOptions, _excluded$a);
+        rest = _objectWithoutProperties(chipOptions, _excluded$b);
 
     return /*#__PURE__*/React.createElement(Chip, _extends$2({
       "data-test": "DesignSystem-ChipInput--Chip",
@@ -14289,7 +14315,7 @@ var MenuItem = function MenuItem(props) {
     "data-test": "DesignSystem-VerticalNav--Icon",
     className: expanded ? 'mr-4' : '',
     name: menu.icon,
-    variations: menu.iconVariations
+    type: menu.iconType
   }), expanded && /*#__PURE__*/React.createElement(_MenuLabel, {
     label: menu.label,
     labelColor: itemColor
@@ -14485,7 +14511,7 @@ var HorizontalNav = function HorizontalNav(props) {
       return /*#__PURE__*/React.createElement(Icon, {
         className: "mr-3 HorizontalNav-animate",
         name: menu.icon,
-        variations: menu.iconVariations,
+        type: menu.iconType,
         "data-test": "DesignSystem-HorizontalNav--Icon"
       });
     }
@@ -14535,7 +14561,7 @@ var HorizontalNav = function HorizontalNav(props) {
   }), list);
 };
 
-var _excluded$9 = ["children", "tooltip"];
+var _excluded$a = ["children", "tooltip"];
 var tooltipPropsList = ['trigger', 'on', 'open', 'offset', 'onToggle', 'dark', 'customStyle', 'closeOnBackdropClick', 'hideOnReferenceEscape', 'closeOnScroll'];
 var positionValue = {
   bottom: 'bottom',
@@ -14550,7 +14576,7 @@ var positionValue = {
 var Tooltip = function Tooltip(props) {
   var children = props.children,
       tooltip = props.tooltip,
-      rest = _objectWithoutProperties(props, _excluded$9);
+      rest = _objectWithoutProperties(props, _excluded$a);
 
   var tooltipWrapper = /*#__PURE__*/React.createElement("div", {
     className: "Tooltip"
@@ -14626,7 +14652,7 @@ Dialog.defaultProps = {
   secondaryButtonAppearance: 'basic'
 };
 
-var _excluded$8 = ["label"];
+var _excluded$9 = ["label"];
 var OverlayFooter = function OverlayFooter(props) {
   var open = props.open,
       className = props.className,
@@ -14663,7 +14689,7 @@ var OverlayFooter = function OverlayFooter(props) {
       className: classes
     }), actions.map(function (_ref, index) {
       _ref.label;
-          var options = _objectWithoutProperties(_ref, _excluded$8);
+          var options = _objectWithoutProperties(_ref, _excluded$9);
 
       return /*#__PURE__*/React.createElement(Button, _extends$2({
         type: "button"
@@ -15616,7 +15642,7 @@ Collapsible.defaultProps = {
   withTrigger: true
 };
 
-var Status = function Status(props) {
+var Status$1 = function Status(props) {
   var type = props.type,
       time = props.time,
       className = props.className,
@@ -15711,7 +15737,7 @@ var Status = function Status(props) {
       return null;
   }
 };
-Status.displayName = 'Status';
+Status$1.displayName = 'Status';
 
 var Box = function Box(props) {
   var _classNames;
@@ -15792,7 +15818,7 @@ var ChatMessage = function ChatMessage(props) {
     typingText: typingText,
     isTyping: isTyping,
     statusType: statusType
-  }), !isTyping && statusOptions && /*#__PURE__*/React.createElement(Status, statusOptions));
+  }), !isTyping && statusOptions && /*#__PURE__*/React.createElement(Status$1, statusOptions));
 };
 ChatMessage.displayName = 'ChatMessage';
 
@@ -16024,7 +16050,7 @@ Pagination.defaultProps = {
   pageJumpDebounceDuration: 750
 };
 
-var _excluded$7 = ["onChange"];
+var _excluded$8 = ["onChange"];
 var EditableInput = function EditableInput(props) {
   var _classNames2, _classNames4;
 
@@ -16038,7 +16064,7 @@ var EditableInput = function EditableInput(props) {
       className = props.className;
 
   var onInputChange = inputOptions.onChange,
-      rest = _objectWithoutProperties(inputOptions, _excluded$7);
+      rest = _objectWithoutProperties(inputOptions, _excluded$8);
 
   var _React$useState = React.useState(props.value),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -16201,7 +16227,7 @@ EditableInput.defaultProps = {
   inputOptions: {}
 };
 
-var _excluded$6 = ["onChange", "chipOptions"],
+var _excluded$7 = ["onChange", "chipOptions"],
     _excluded2$1 = ["onClick"];
 var EditableChipInput = function EditableChipInput(props) {
   var _classNames3;
@@ -16215,7 +16241,7 @@ var EditableChipInput = function EditableChipInput(props) {
   var onChipInputChange = chipInputOptions.onChange,
       _chipInputOptions$chi = chipInputOptions.chipOptions,
       chipOptions = _chipInputOptions$chi === void 0 ? {} : _chipInputOptions$chi,
-      rest = _objectWithoutProperties(chipInputOptions, _excluded$6);
+      rest = _objectWithoutProperties(chipInputOptions, _excluded$7);
 
   var _onClick = chipOptions.onClick,
       chipObject = _objectWithoutProperties(chipOptions, _excluded2$1);
@@ -17031,7 +17057,7 @@ var getCustomDates = function getCustomDates() {
   };
 };
 
-var _excluded$5 = ["startDate", "endDate", "yearNav", "monthNav", "open", "inputFormat", "outputFormat", "startInputOptions", "endInputOptions", "validators", "withInput", "position", "disabledBefore", "disabledAfter", "onRangeChange", "rangeLimit"];
+var _excluded$6 = ["startDate", "endDate", "yearNav", "monthNav", "open", "inputFormat", "outputFormat", "startInputOptions", "endInputOptions", "validators", "withInput", "position", "disabledBefore", "disabledAfter", "onRangeChange", "rangeLimit"];
 var DateRangePicker = /*#__PURE__*/function (_React$Component) {
   _inherits(DateRangePicker, _React$Component);
 
@@ -17301,7 +17327,7 @@ var DateRangePicker = /*#__PURE__*/function (_React$Component) {
           disabledAfter = _this$props6.disabledAfter;
           _this$props6.onRangeChange;
           var rangeLimit = _this$props6.rangeLimit,
-          rest = _objectWithoutProperties(_this$props6, _excluded$5);
+          rest = _objectWithoutProperties(_this$props6, _excluded$6);
 
       var _this$state3 = this.state,
           startDate = _this$state3.startDate,
@@ -17570,7 +17596,7 @@ var Tabs = function Tabs(props) {
         count = _ref.count,
         icon = _ref.icon,
         disabled = _ref.disabled,
-        iconVariations = _ref.iconVariations;
+        iconType = _ref.iconType;
 
     if (count !== undefined) {
       return /*#__PURE__*/React.createElement(Pills, {
@@ -17588,7 +17614,7 @@ var Tabs = function Tabs(props) {
         "data-test": "DesignSystem-Tabs--Icon",
         className: "mr-4 ".concat(iconClass),
         name: icon,
-        variations: iconVariations,
+        type: iconType,
         appearance: iconAppearance
       });
     }
@@ -18205,7 +18231,7 @@ function _fromFileEntry() {
   return _fromFileEntry.apply(this, arguments);
 }
 
-var _excluded$4 = ["refKey", "onKeyDown", "onFocus", "onBlur", "onClick", "onDragEnterCallback", "onDragOverCallback", "onDragLeaveCallback", "onDropCallback"],
+var _excluded$5 = ["refKey", "onKeyDown", "onFocus", "onBlur", "onClick", "onDragEnterCallback", "onDragOverCallback", "onDragLeaveCallback", "onDropCallback"],
     _excluded2 = ["refKey", "onChange", "onClick"];
 var initialState = {
   isFocused: false,
@@ -18483,7 +18509,7 @@ var DropzoneBase = function DropzoneBase(props) {
           onDragOverCallback = _ref.onDragOverCallback,
           onDragLeaveCallback = _ref.onDragLeaveCallback,
           onDropCallback = _ref.onDropCallback,
-          rest = _objectWithoutProperties(_ref, _excluded$4);
+          rest = _objectWithoutProperties(_ref, _excluded$5);
 
       return _objectSpread2(_defineProperty$1({
         onDragEnter: composeDragHandler(composeEventHandlers(onDragEnterCallback, onDragEnterCb)),
@@ -20681,7 +20707,7 @@ Header.defaultProps = {
   showFilters: true
 };
 
-var _excluded$3 = ["children"];
+var _excluded$4 = ["children"];
 
 var defaultErrorTemplate = function defaultErrorTemplate(props) {
   var _props$errorType = props.errorType,
@@ -21066,7 +21092,7 @@ var Table = /*#__PURE__*/function (_React$Component) {
 
       var _ref = headerOptions,
           headerChildren = _ref.children,
-          headerAttr = _objectWithoutProperties(_ref, _excluded$3);
+          headerAttr = _objectWithoutProperties(_ref, _excluded$4);
 
       var classes = className ? " ".concat(className) : '';
       var totalRecords = this.state.totalRecords;
@@ -21339,9 +21365,84 @@ Navigation.defaultProps = {
   rounded: false
 };
 
-var PageHeader = function PageHeader(props) {
-  var _classNames;
+var Status = function Status(props) {
+  var status = props.status,
+      meta = props.meta,
+      navigationPosition = props.navigationPosition,
+      navigation = props.navigation,
+      tabs = props.tabs;
+  var statusClasses = classnames({
+    'PageHeader-statusWrapper': true,
+    'mb-3': navigationPosition === 'bottom' && navigation || tabs
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, (status || meta) && /*#__PURE__*/React.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.createElement(React.Fragment, null, actions ? /*#__PURE__*/React.createElement(Column, {
+    size: "4",
+    sizeXL: "4",
+    sizeM: "4",
+    "data-test": "DesignSystem-PageHeader--Actions"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "PageHeader-actionsWrapper"
+  }, actions)) : (navigation || stepper) && /*#__PURE__*/React.createElement(Column, {
+    size: "4",
+    sizeXL: "4",
+    sizeM: "4",
+    "data-test": "DesignSystem-PageHeader--Actions"
+  }, /*#__PURE__*/React.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.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.createElement(React.Fragment, null, (!breadcrumbs || navigationPosition === 'center') && colSize === '4' && /*#__PURE__*/React.createElement(Column, {
+    size: "4",
+    sizeXL: "4",
+    sizeM: "4",
+    "data-test": "DesignSystem-PageHeader--CenterNav"
+  }, /*#__PURE__*/React.createElement(Nav, props)));
+};
+var BackButton = function BackButton(props) {
+  var button = props.button;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, button && /*#__PURE__*/React.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.createElement("div", {
+    className: "PageHeader-titleWrapper",
+    "data-test": "DesignSystem-PageHeader--Title"
+  }, /*#__PURE__*/React.createElement(Heading, {
+    className: "PageHeader-title"
+  }, title), badge);
+};
+
+var PageHeader = function PageHeader(props) {
   var title = props.title,
       navigation = props.navigation,
       stepper = props.stepper,
@@ -21353,57 +21454,64 @@ var PageHeader = function PageHeader(props) {
       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((_classNames = {
+  var wrapperClasses = classnames(_defineProperty$1({
     'PageHeader-wrapper': true
-  }, _defineProperty$1(_classNames, 'PageHeader-wrapper--separator', separator), _defineProperty$1(_classNames, 'PageHeader-wrapper--withTabs', tabs), _classNames), className);
+  }, 'PageHeader-wrapper--withTabs', tabs), className);
   var classes = classnames({
     PageHeader: true
   });
-
-  var renderNav = function renderNav() {
-    if (!navigation && !stepper) {
-      return null;
-    }
-
-    return /*#__PURE__*/React.createElement("div", {
-      className: "PageHeader-navigationWrapper"
-    }, navigation || stepper);
-  };
-
   var colSize = (navigation || stepper) && navigationPosition === 'center' ? '4' : actions ? '8' : '12';
-  return /*#__PURE__*/React.createElement("div", _extends$2({}, 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.createElement("div", {
+    "data-test": "DesignSystem-PageHeader"
+  }, /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
     className: wrapperClasses
-  }), breadcrumbs, /*#__PURE__*/React.createElement("div", {
+  }), breadcrumbs && /*#__PURE__*/React.createElement("div", {
+    className: "pl-6",
+    "data-test": "DesignSystem-PageHeader--Breadcrumbs"
+  }, breadcrumbs), /*#__PURE__*/React.createElement("div", {
+    className: "d-flex pl-6"
+  }, /*#__PURE__*/React.createElement(BackButton, {
+    button: button
+  }), /*#__PURE__*/React.createElement("div", {
     className: classes
   }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
     size: colSize,
     sizeXL: colSize,
     sizeM: colSize
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "PageHeader-titleWrapper"
-  }, /*#__PURE__*/React.createElement(Heading, {
-    className: "PageHeader-title"
-  }, title), badge)), (!breadcrumbs || navigationPosition === 'center') && colSize === '4' && /*#__PURE__*/React.createElement(Column, {
-    size: "4",
-    sizeXL: "4",
-    sizeM: "4"
-  }, renderNav()), actions ? /*#__PURE__*/React.createElement(Column, {
-    size: "4",
-    sizeXL: "4",
-    sizeM: "4"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "PageHeader-actionsWrapper"
-  }, actions)) : (navigation || stepper) && /*#__PURE__*/React.createElement(Column, {
-    size: "4",
-    sizeXL: "4",
-    sizeM: "4"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "PageHeader-actionsWrapper"
-  })))), (status || meta) && /*#__PURE__*/React.createElement("div", {
-    className: "PageHeader-statusWrapper"
-  }, status, meta), breadcrumbs && navigationPosition === 'bottom' && renderNav(), tabs && /*#__PURE__*/React.createElement("div", null, tabs));
+  }, /*#__PURE__*/React.createElement(Title, {
+    badge: badge,
+    title: title
+  })), /*#__PURE__*/React.createElement(CenterNav, centerNavProps), /*#__PURE__*/React.createElement(Action, {
+    actions: actions,
+    navigation: navigation,
+    stepper: stepper
+  })), /*#__PURE__*/React.createElement(Status, statusProps))), /*#__PURE__*/React.createElement("div", {
+    className: "pl-3"
+  }, navigationPosition === 'bottom' && /*#__PURE__*/React.createElement(Nav, {
+    navigation: navigation,
+    stepper: stepper
+  }), tabs && /*#__PURE__*/React.createElement("div", {
+    "data-test": "DesignSystem-PageHeader--Tabs"
+  }, tabs))), separator && /*#__PURE__*/React.createElement(Divider, {
+    appearance: "header"
+  }));
 };
 PageHeader.defaultProps = {
   navigationPosition: 'center',
@@ -21548,7 +21656,7 @@ FileList.defaultProps = {
 };
 FileList.displayName = 'FileList';
 
-var _excluded$2 = ["type", "fields", "placeholder", "autoFocus", "onComplete", "onFocus", "onBlur", "className", "value"];
+var _excluded$3 = ["type", "fields", "placeholder", "autoFocus", "onComplete", "onFocus", "onBlur", "className", "value"];
 var KEY_CODE = {
   backspace: 'Backspace',
   left: 'ArrowLeft',
@@ -21573,7 +21681,7 @@ var VerificationCodeInput = function VerificationCodeInput(props) {
       onBlur = props.onBlur,
       className = props.className;
       props.value;
-      var rest = _objectWithoutProperties(props, _excluded$2);
+      var rest = _objectWithoutProperties(props, _excluded$3);
 
   var initialValues = useMemo(function () {
     if (props.value && props.value.length) {
@@ -21979,7 +22087,7 @@ var HelpText = function HelpText(props) {
 };
 HelpText.displayName = 'HelpText';
 
-var _excluded$1 = ["children", "type", "className", "disabled", "tabIndex", "icon", "subtle", "size", "iconAlign", "iconVariations"];
+var _excluded$2 = ["children", "type", "className", "disabled", "tabIndex", "icon", "subtle", "size", "iconAlign", "iconType"];
 var sizeMapping = {
   tiny: 12,
   regular: 16
@@ -21996,8 +22104,8 @@ var LinkButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
       subtle = props.subtle,
       size = props.size,
       iconAlign = props.iconAlign,
-      iconVariations = props.iconVariations,
-      rest = _objectWithoutProperties(props, _excluded$1);
+      iconType = props.iconType,
+      rest = _objectWithoutProperties(props, _excluded$2);
 
   var buttonClass = classnames((_classNames = {}, _defineProperty$1(_classNames, 'LinkButton', true), _defineProperty$1(_classNames, "LinkButton--".concat(size), size), _defineProperty$1(_classNames, 'LinkButton--default', !subtle), _defineProperty$1(_classNames, 'LinkButton--subtle', subtle), _defineProperty$1(_classNames, "LinkButton--iconAlign-".concat(iconAlign), children && iconAlign), _defineProperty$1(_classNames, "".concat(className), className), _classNames));
   var iconClass = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'LinkButton-icon', true), _defineProperty$1(_classNames2, "LinkButton-icon--".concat(iconAlign), children && iconAlign), _classNames2));
@@ -22013,7 +22121,7 @@ var LinkButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, /*#__PURE__*/React.createElement(Icon, {
     "data-test": "DesignSystem-LinkButton--Icon",
     name: icon,
-    variations: iconVariations,
+    type: iconType,
     size: size && sizeMapping[size]
   })), children));
 });
@@ -22024,7 +22132,7 @@ LinkButton.defaultProps = {
   iconAlign: 'left'
 };
 
-var _excluded = ["children", "disabled", "className", "zIndex", "onClick"];
+var _excluded$1 = ["children", "disabled", "className", "zIndex", "onClick"];
 var ActionCard = function ActionCard(props) {
   var _classNames;
 
@@ -22033,7 +22141,7 @@ var ActionCard = function ActionCard(props) {
       className = props.className,
       zIndex = props.zIndex,
       onClick = props.onClick,
-      rest = _objectWithoutProperties(props, _excluded);
+      rest = _objectWithoutProperties(props, _excluded$1);
 
   var classes = classnames((_classNames = {}, _defineProperty$1(_classNames, 'ActionCard', true), _defineProperty$1(_classNames, 'ActionCard--disabled', disabled), _classNames), className);
 
@@ -22060,6 +22168,132 @@ var ActionCard = function ActionCard(props) {
 };
 ActionCard.displayName = 'ActionCard';
 
-var version = "2.21.0";
+var selectedCardValues = new Map();
+function useMultiSelect() {
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      selectedCardIds = _React$useState2[0],
+      setSelectedCardIds = _React$useState2[1];
+
+  var isCardSelected = function isCardSelected(id) {
+    return selectedCardIds.includes(id);
+  };
+
+  var updateCardSelection = function updateCardSelection(id, value) {
+    var idList = _toConsumableArray(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 _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      selectedCardIds = _React$useState2[0],
+      setSelectedCardIds = _React$useState2[1];
+
+  var _React$useState3 = React.useState([]),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      selectedCardValues = _React$useState4[0],
+      setSelectedCardValues = _React$useState4[1];
+
+  var isCardSelected = function isCardSelected(id) {
+    return selectedCardIds.includes(id);
+  };
+
+  var updateCardSelection = function updateCardSelection(id, value) {
+    var idList = _toConsumableArray(selectedCardIds);
+
+    var valueList = _toConsumableArray(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 _excluded = ["children", "onClick", "disabled", "id", "cardValue", "overlayZIndex", "selected", "className"];
+var SelectionCard = function SelectionCard(props) {
+  var _classNames;
+
+  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 = _objectWithoutProperties(props, _excluded);
+
+  var classes = classnames((_classNames = {}, _defineProperty$1(_classNames, 'Selection-card', true), _defineProperty$1(_classNames, 'Selection-card--selected', selected), _defineProperty$1(_classNames, 'Selection-card--disabled', disabled && !selected), _defineProperty$1(_classNames, 'Selection-card--selected-disabled', disabled && selected), _classNames), 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.createElement("div", _extends$2({
+    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.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";
 
-export { ActionCard, 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, LinkButton, 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 };
+export { ActionCard, 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, LinkButton, 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, SelectionCard, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text, Textarea, TimePicker, Toast, Tooltip, index as Utils, VerificationCodeInput, VerticalNav, version };