@7shifts/sous-chef 3.7.0 → 3.9.0

package/dist/index.modern.js

@@ -4275,7 +4275,9 @@ var useDataTableContext = function useDataTableContext() {
   return context;
 };
 
-var styles$9 = {"item":"_2GGMG","selected":"_1ZCir","clickable":"_3VoZI","item-column":"_kcNkt","item-column--default-padding":"_2obax","item-column--right-align":"_bLVPl","item-column--vertical-border":"_3PWfD","actions":"_1IGwu"};
+var styles$9 = {"item":"_2GGMG","clickable":"_3VoZI","selected":"_1ZCir"};
+
+var styles$a = {"actions":"_3Iab2"};
 
 var MenuContext = React__default.createContext({
   onToggleMenu: function onToggleMenu() {},
@@ -4305,7 +4307,7 @@ var Menu = function Menu(_ref) {
   }, children);
 };
 
-var styles$a = {"list":"_v0AEt","list-item":"_IRJ4j"};
+var styles$b = {"list":"_v0AEt","list-item":"_IRJ4j"};
 
 var MenuItem = function MenuItem(_ref) {
   var onClick = _ref.onClick,
@@ -4321,7 +4323,7 @@ var MenuItem = function MenuItem(_ref) {
   };
 
   return React__default.createElement("li", {
-    className: styles$a['list-item'],
+    className: styles$b['list-item'],
     onClick: handleClick,
     onKeyPress: handleClick,
     tabIndex: 0,
@@ -4413,7 +4415,7 @@ var MenuListVisible = function MenuListVisible(_ref2) {
     setPosition(pos);
   }, [triggerRef]);
   return React__default.createElement("ul", {
-    className: classnames(styles$a['list']),
+    className: classnames(styles$b['list']),
     role: "menu",
     style: position,
     ref: paneElement
@@ -4430,283 +4432,7 @@ var KebabMenu = function KebabMenu(_ref) {
   })));
 };
 
-var ActionsCell = function ActionsCell(_ref) {
-  var actions = _ref.actions;
-  var kebabMenuItems = actions.filter(function (action) {
-    return action.showInKebab === undefined || action.showInKebab;
-  });
-  var sideActions = actions.filter(function (action) {
-    return action.showInKebab === false;
-  });
-  return React__default.createElement("div", {
-    className: classnames(styles$9['item-column'], styles$9['actions']),
-    "data-testid": "data-table-dropdown-menu"
-  }, sideActions.length > 0 && sideActions.map(function (action) {
-    return React__default.createElement(Button$1, Object.assign({
-      key: action.action,
-      onClick: action.onAction,
-      theme: "link-icon"
-    }, action.showInKebab === false ? action.buttonProps : {}), action.label);
-  }), kebabMenuItems.length > 0 && React__default.createElement(KebabMenu, {
-    actions: kebabMenuItems
-  }));
-};
-
-var _excluded$2f = ["children", "onClick", "isSelected", "actions", "hasDefaultPadding", "testId"];
-
-var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
-  var _classnames;
-
-  var children = _ref.children,
-      onClick = _ref.onClick,
-      _ref$isSelected = _ref.isSelected,
-      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
-      _ref$actions = _ref.actions,
-      actions = _ref$actions === void 0 ? [] : _ref$actions,
-      _ref$hasDefaultPaddin = _ref.hasDefaultPadding,
-      hasDefaultPadding = _ref$hasDefaultPaddin === void 0 ? true : _ref$hasDefaultPaddin,
-      testId = _ref.testId,
-      nativeDivProps = _objectWithoutPropertiesLoose(_ref, _excluded$2f);
-
-  var _useDataTableContext = useDataTableContext(),
-      columns = _useDataTableContext.columns,
-      showActionMenu = _useDataTableContext.showActionMenu,
-      hasVerticalBorders = _useDataTableContext.hasVerticalBorders;
-
-  var styleNames = classnames(styles$9['item'], (_classnames = {}, _classnames[styles$9['clickable']] = onClick, _classnames[styles$9['selected']] = isSelected, _classnames));
-
-  var renderColumn = function renderColumn(columnElement, index) {
-    var _classnames2;
-
-    var column = columns === null || columns === void 0 ? void 0 : columns[index];
-    var isRightAligned = column === null || column === void 0 ? void 0 : column.isRightAligned;
-    return React__default.createElement("div", {
-      className: classnames((_classnames2 = {}, _classnames2[styles$9['item-column--right-align']] = isRightAligned, _classnames2[styles$9['item-column--vertical-border']] = hasVerticalBorders, _classnames2[styles$9['item-column--default-padding']] = hasDefaultPadding, _classnames2), styles$9['item-column']),
-      style: {
-        flex: (column === null || column === void 0 ? void 0 : column.size) || 1
-      },
-      key: index,
-      "data-testid": testId && testId + "-column"
-    }, columnElement);
-  };
-
-  return React__default.createElement("div", Object.assign({}, nativeDivProps, {
-    className: styleNames,
-    onClick: onClick ? onClick : undefined,
-    onKeyPress: onClick ? onClick : undefined,
-    "data-testid": testId && testId + "-row",
-    role: "row",
-    ref: ref
-  }), React__default.Children.toArray(children).filter(Boolean).map(function (child, index) {
-    return renderColumn(child, index);
-  }), showActionMenu && React__default.createElement(ActionsCell, {
-    actions: actions
-  }));
-};
-
-var DataTableRow = forwardRef(DataTableRowComponent);
-
-var styles$b = {"header":"_2ZgmC","header-item":"_3slLU","header-item--sortable":"_1-26z","header-item--right-align":"_1vCLo","header-item--action":"_2i1wY","header-sort-icon":"_BLrNe","body":"_CT4Lp","footer":"_398L3","pagination-controls":"_2smmY"};
-
-var WHITE = '#ffffff';
-var EGGPLANT200 = '#d3dbf4';
-var EGGPLANT300 = '#a7b7ea';
-var EGGPLANT400 = '#6d87dd';
-var EGGPLANT500 = '#6179c6';
-var EGGPLANT600 = '#415184';
-var RADISH400 = '#e76767';
-var GREY100 = '#F3F3F3';
-var GREY200 = '#D5D5D5';
-var GREY300 = '#949494';
-var GREY400 = '#767676';
-var GREY500 = '#464646';
-
-var SORT_ORDER = {
-  ASC: 'asc',
-  DESC: 'desc'
-};
-
-var DataTableHeader = function DataTableHeader(_ref) {
-  var columns = _ref.columns,
-      onSort = _ref.onSort,
-      showActionMenu = _ref.showActionMenu;
-  var haveLabels = columns.find(function (column) {
-    return column.label && column.label !== '';
-  });
-
-  if (!haveLabels) {
-    return null;
-  }
-
-  var handleSort = function handleSort(column) {
-    var nextDirection = getNextSort(column);
-
-    if (onSort) {
-      onSort({
-        columnName: column.name,
-        direction: nextDirection
-      });
-    }
-  };
-
-  return React__default.createElement("div", {
-    className: styles$b['header']
-  }, columns.map(function (column) {
-    var _classnames;
-
-    var isSortable = column.isSortable;
-    var sortDir = column.currentSort;
-    var isRightAligned = column.isRightAligned;
-    return React__default.createElement("div", {
-      className: classnames((_classnames = {}, _classnames[styles$b['header-item']] = true, _classnames[styles$b['header-item--sortable']] = isSortable, _classnames[styles$b['header-item--right-align']] = isRightAligned, _classnames)),
-      style: {
-        flex: column.size || 1
-      },
-      key: column.name,
-      onClick: function onClick() {
-        return isSortable && handleSort(column);
-      },
-      onKeyPress: function onKeyPress() {
-        return isSortable && handleSort(column);
-      },
-      role: "columnheader",
-      tabIndex: 0
-    }, column.label, ' ', isSortable && React__default.createElement("span", {
-      className: styles$b['header-sort-icon']
-    }, React__default.createElement(IconSort$1, {
-      sortDirection: sortDir
-    })));
-  }), showActionMenu && React__default.createElement("div", {
-    className: classnames(styles$b['header-item'], styles$b['header-item--action'])
-  }));
-};
-
-var getNextSort = function getNextSort(column) {
-  switch (column.currentSort) {
-    case SORT_ORDER.ASC:
-      return null;
-
-    case SORT_ORDER.DESC:
-      return SORT_ORDER.ASC;
-
-    default:
-      return SORT_ORDER.DESC;
-  }
-};
-
-var IconSort$1 = function IconSort(_ref2) {
-  var sortDirection = _ref2.sortDirection;
-  var sortDir = sortDirection || null;
-  return React__default.createElement("div", {
-    style: {
-      display: 'inline-flex',
-      flexDirection: 'column'
-    }
-  }, sortDir !== 'desc' && React__default.createElement(IconChevronUp, {
-    size: "small",
-    color: GREY400
-  }), sortDir !== 'asc' && React__default.createElement("span", {
-    style: {
-      marginTop: '-4px'
-    }
-  }, React__default.createElement(IconChevronDown, {
-    size: "small",
-    color: GREY400
-  })));
-};
-
-var DataTable = function DataTable(_ref) {
-  var items = _ref.items,
-      columns = _ref.columns,
-      itemComponent = _ref.itemComponent,
-      maxHeight = _ref.maxHeight,
-      _ref$hasPrevious = _ref.hasPrevious,
-      hasPrevious = _ref$hasPrevious === void 0 ? true : _ref$hasPrevious,
-      _ref$hasNext = _ref.hasNext,
-      hasNext = _ref$hasNext === void 0 ? true : _ref$hasNext,
-      onPreviousClick = _ref.onPreviousClick,
-      onNextClick = _ref.onNextClick,
-      onSort = _ref.onSort,
-      _ref$isLoading = _ref.isLoading,
-      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-      _ref$showActionMenu = _ref.showActionMenu,
-      showActionMenu = _ref$showActionMenu === void 0 ? false : _ref$showActionMenu,
-      footerComponent = _ref.footerComponent,
-      _ref$hasVerticalBorde = _ref.hasVerticalBorders,
-      hasVerticalBorders = _ref$hasVerticalBorde === void 0 ? false : _ref$hasVerticalBorde,
-      testId = _ref.testId;
-  var RowItem = itemComponent || DefaultItemComponent;
-  var conditionalStyles = {};
-
-  if (maxHeight !== null) {
-    conditionalStyles = _extends({}, conditionalStyles, {
-      maxHeight: maxHeight,
-      overflowY: 'auto'
-    });
-  }
-
-  var numberOfRows = items.length + (footerComponent ? 1 : 0);
-  return React__default.createElement(Context.Provider, {
-    value: {
-      columns: columns,
-      showActionMenu: showActionMenu,
-      numberOfRows: numberOfRows,
-      hasVerticalBorders: hasVerticalBorders
-    }
-  }, columns && React__default.createElement(DataTableHeader, {
-    columns: columns,
-    onSort: onSort,
-    showActionMenu: showActionMenu
-  }), React__default.createElement("div", {
-    className: styles$b['body'],
-    style: conditionalStyles,
-    role: "table",
-    "data-testid": testId
-  }, isLoading && React__default.createElement(Spinner, {
-    block: true
-  }), !isLoading && items.map(function (item, index) {
-    return React__default.createElement(RowItem, {
-      item: item,
-      columns: columns,
-      key: index,
-      index: index,
-      testId: testId
-    });
-  }), footerComponent && !isLoading && React__default.createElement("div", {
-    className: styles$b['footer'],
-    "data-testid": testId && testId + "-footer"
-  }, footerComponent)), onPreviousClick && onNextClick && (hasPrevious || hasNext) && React__default.createElement("div", {
-    className: styles$b['pagination-controls'],
-    "data-testid": testId && testId + "-pagination-controls"
-  }, React__default.createElement(PaginationControls, {
-    hasPrevious: hasPrevious && !isLoading,
-    hasNext: hasNext && !isLoading,
-    onPreviousClick: onPreviousClick,
-    onNextClick: onNextClick
-  })));
-};
-
-var DefaultItemComponent = function DefaultItemComponent(_ref2) {
-  var columns = _ref2.columns,
-      item = _ref2.item,
-      testId = _ref2.testId;
-  var headingKeys = columns ? columns.map(function (column) {
-    return column.name;
-  }) : Object.keys(item);
-  var columnsToShow = headingKeys.filter(function (key) {
-    return key !== 'actions';
-  });
-  return React__default.createElement(DataTableRow, {
-    actions: item.actions,
-    testId: testId
-  }, columnsToShow.map(function (headingKey) {
-    return React__default.createElement("div", {
-      key: headingKey
-    }, item[headingKey] || '');
-  }));
-};
-
-var styles$c = {"data-table-cell":"_2Ybjx","data-table-cell--right-aligned":"_1cXj6","data-table-cell--invalid":"_D73Vx"};
+var styles$c = {"data-table-cell":"_2Ybjx","data-table-cell--no-padding":"_5KXHH","data-table-cell--vertical-border":"_2-I0j","data-table-cell--invalid":"_D73Vx","data-table-cell__content":"_3A9-M","data-table-cell__content--right-align":"_17Km7","data-table-cell__content--with-error":"_2c6KQ","data-table-cell__error-icon":"_2hIl3","data-table-cell__error-icon--right-align":"_8Uhyd","data-table-cell__error-icon--left-align":"_3X51R"};
 
 var styles$d = {"overlay":"_2puqJ","overlay--after-open":"_1167h","overlay--before-close":"_t_t7L","content":"_wQQ_2","content--after-open":"_3jwux","content--before-close":"_2c2QP"};
 
@@ -5095,44 +4821,87 @@ var Calendar = function Calendar(_ref) {
   }))));
 };
 
-var DataTableCellElement = function DataTableCellElement(_ref) {
-  var _columns$columnIndex, _classnames;
+var WHITE = '#ffffff';
+var EGGPLANT200 = '#d3dbf4';
+var EGGPLANT300 = '#a7b7ea';
+var EGGPLANT400 = '#6d87dd';
+var EGGPLANT500 = '#6179c6';
+var EGGPLANT600 = '#415184';
+var RADISH400 = '#e76767';
+var GREY100 = '#F3F3F3';
+var GREY200 = '#D5D5D5';
+var GREY300 = '#949494';
+var GREY400 = '#767676';
+var GREY500 = '#464646';
+
+var DataTableCellElement = function DataTableCellElement(_ref, ref) {
+  var _columns$columnIndex, _classnames, _classnames2, _classnames3;
 
   var children = _ref.children,
       columnIndex = _ref.columnIndex,
       error = _ref.error,
       _ref$delayOnCloseErro = _ref.delayOnCloseError,
-      delayOnCloseError = _ref$delayOnCloseErro === void 0 ? false : _ref$delayOnCloseErro;
+      delayOnCloseError = _ref$delayOnCloseErro === void 0 ? false : _ref$delayOnCloseErro,
+      _ref$noPadding = _ref.noPadding,
+      noPadding = _ref$noPadding === void 0 ? false : _ref$noPadding,
+      colSpan = _ref.colSpan;
 
   var _useDataTableContext = useDataTableContext(),
-      columns = _useDataTableContext.columns;
+      columns = _useDataTableContext.columns,
+      hasVerticalBorders = _useDataTableContext.hasVerticalBorders;
 
   var column = (_columns$columnIndex = columns === null || columns === void 0 ? void 0 : columns[columnIndex]) != null ? _columns$columnIndex : null;
   var isRightAligned = column ? column.isRightAligned : false;
   var hasError = !!error;
   var errorMessage = error;
-  var icon = hasError && React__default.createElement(IconTimesOctagon, {
+  var icon = hasError && React__default.createElement("div", {
+    className: classnames(styles$c['data-table-cell__error-icon'], (_classnames = {}, _classnames[styles$c['data-table-cell__error-icon--right-align']] = isRightAligned, _classnames[styles$c['data-table-cell__error-icon--left-align']] = !isRightAligned, _classnames))
+  }, React__default.createElement(IconTimesOctagon, {
     size: "medium",
     color: RADISH400
-  });
-  var TableCell = React__default.createElement("div", {
-    className: classnames((_classnames = {}, _classnames[styles$c['data-table-cell--right-aligned']] = isRightAligned, _classnames[styles$c['data-table-cell--invalid']] = hasError, _classnames), styles$c['data-table-cell'])
-  }, isRightAligned && icon, children, !isRightAligned && icon);
+  }));
+  var TableCell = React__default.createElement("td", {
+    className: classnames((_classnames2 = {}, _classnames2[styles$c['data-table-cell--invalid']] = hasError, _classnames2[styles$c['data-table-cell--no-padding']] = noPadding, _classnames2[styles$c['data-table-cell--vertical-border']] = hasVerticalBorders, _classnames2), styles$c['data-table-cell']),
+    colSpan: colSpan,
+    ref: ref
+  }, React__default.createElement("div", {
+    className: classnames(styles$c['data-table-cell__content'], (_classnames3 = {}, _classnames3[styles$c['data-table-cell__content--with-error']] = hasError, _classnames3[styles$c['data-table-cell__content--right-align']] = isRightAligned, _classnames3))
+  }, isRightAligned && icon, children, !isRightAligned && icon));
+  return React__default.createElement(Tooltip$1, {
+    overlay: errorMessage,
+    delayOnClose: delayOnCloseError,
+    placement: "top",
+    theme: "white"
+  }, TableCell);
+};
 
-  if (hasError) {
-    return React__default.createElement(Tooltip$1, {
-      overlay: errorMessage,
-      delayOnClose: delayOnCloseError,
-      placement: "top",
-      theme: "white"
-    }, TableCell);
-  }
+var DataTableCell = forwardRef(DataTableCellElement);
 
-  return TableCell;
+var DataTableRowActions = function DataTableRowActions(_ref) {
+  var actions = _ref.actions,
+      columnIndex = _ref.columnIndex;
+  var kebabMenuItems = actions.filter(function (action) {
+    return action.showInKebab === undefined || action.showInKebab;
+  });
+  var sideActions = actions.filter(function (action) {
+    return action.showInKebab === false;
+  });
+  return React__default.createElement(DataTableCell, {
+    columnIndex: columnIndex
+  }, React__default.createElement("div", {
+    className: styles$a['actions'],
+    "data-testid": "data-table-dropdown-menu"
+  }, sideActions.length > 0 && sideActions.map(function (action) {
+    return React__default.createElement(Button$1, Object.assign({
+      key: action.action,
+      onClick: action.onAction,
+      theme: typeof action.label === 'string' ? 'default' : 'link-icon'
+    }, action.showInKebab === false ? action.buttonProps : {}), action.label);
+  }), kebabMenuItems.length > 0 && React__default.createElement(KebabMenu, {
+    actions: kebabMenuItems
+  })));
 };
 
-var DataTableCell = forwardRef(DataTableCellElement);
-
 var Context$1 = createContext({});
 var useFormContext = function useFormContext() {
   var context = useContext(Context$1);
@@ -5503,6 +5272,331 @@ var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, r
 
 var DataTableEditableCell = forwardRef(DataTableEditableCellElement);
 
+var _excluded$2f = ["children", "onClick", "isSelected", "actions", "hasDefaultPadding", "hasDefaultCell", "testId"];
+
+var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
+  var _classnames;
+
+  var children = _ref.children,
+      onClick = _ref.onClick,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? [] : _ref$actions,
+      _ref$hasDefaultCell = _ref.hasDefaultCell,
+      hasDefaultCell = _ref$hasDefaultCell === void 0 ? true : _ref$hasDefaultCell,
+      testId = _ref.testId,
+      nativeDivProps = _objectWithoutPropertiesLoose(_ref, _excluded$2f);
+
+  var _useDataTableContext = useDataTableContext(),
+      showActionMenu = _useDataTableContext.showActionMenu;
+
+  var styleNames = classnames(styles$9['item'], (_classnames = {}, _classnames[styles$9['clickable']] = onClick, _classnames[styles$9['selected']] = isSelected, _classnames));
+
+  var renderColumn = function renderColumn(columnElement, index) {
+    var isUsingDataTableCell = columnElement && typeof columnElement === 'object' && 'type' in columnElement && (columnElement === null || columnElement === void 0 ? void 0 : columnElement.type) === DataTableCell;
+
+    if (isUsingDataTableCell || !hasDefaultCell) {
+      return columnElement;
+    }
+
+    var isUsingDataTableEditableCell = columnElement && typeof columnElement === 'object' && 'type' in columnElement && (columnElement === null || columnElement === void 0 ? void 0 : columnElement.type) === DataTableEditableCell;
+    return React__default.createElement(DataTableCell, {
+      key: index,
+      columnIndex: index,
+      noPadding: !!isUsingDataTableEditableCell
+    }, columnElement);
+  };
+
+  return React__default.createElement("tr", Object.assign({}, nativeDivProps, {
+    className: styleNames,
+    onClick: onClick ? onClick : undefined,
+    onKeyPress: onClick ? onClick : undefined,
+    "data-testid": testId && testId + "-row",
+    role: "row",
+    ref: ref
+  }), React__default.Children.toArray(children).filter(Boolean).map(function (child, index) {
+    return renderColumn(child, index);
+  }), showActionMenu && React__default.createElement(DataTableRowActions, {
+    actions: actions,
+    columnIndex: React__default.Children.count(children)
+  }));
+};
+
+var DataTableRow = forwardRef(DataTableRowComponent);
+
+var styles$o = {"table-container":"_3qoNq","table-content":"_2HcDV","table-content--with-scroll":"_3dowz","table":"_tGpUv","table--no-columns":"_3VePT","header":"_2ZgmC","header-item":"_3slLU","header-item__content":"_1jb-H","header-item__content--right-align":"_2Np60","header-item--sortable":"_1-26z","header-item--action":"_2i1wY","header-sort-icon":"_BLrNe","body":"_CT4Lp","body--no-bottom-radius":"_1wU1R","footer":"_398L3","pagination-controls":"_2smmY"};
+
+var calculatePercentageOfProportion = function calculatePercentageOfProportion(proportionNumbers) {
+  var sum = proportionNumbers.reduce(function (total, num) {
+    return total + num;
+  }, 0);
+  var percentages = proportionNumbers.map(function (num) {
+    return parseFloat((num / sum * 100).toFixed(2));
+  });
+  return percentages;
+};
+
+var SORT_ORDER = {
+  ASC: 'asc',
+  DESC: 'desc'
+};
+
+var DataTableHeader = function DataTableHeader(_ref) {
+  var columns = _ref.columns,
+      onSort = _ref.onSort,
+      showActionMenu = _ref.showActionMenu;
+  var haveLabels = columns.find(function (column) {
+    return column.label && column.label !== '';
+  });
+
+  if (!haveLabels) {
+    return React__default.createElement(ColumnSizes, {
+      columns: columns,
+      showActionMenu: showActionMenu
+    });
+  }
+
+  var handleSort = function handleSort(column) {
+    var nextDirection = getNextSort(column);
+
+    if (onSort) {
+      onSort({
+        columnName: column.name,
+        direction: nextDirection
+      });
+    }
+  };
+
+  return React__default.createElement(Fragment, null, React__default.createElement(ColumnSizes, {
+    columns: columns,
+    showActionMenu: showActionMenu
+  }), React__default.createElement("thead", null, React__default.createElement("tr", {
+    className: styles$o['header']
+  }, columns.map(function (column) {
+    var _classnames, _classnames2;
+
+    var isSortable = column.isSortable;
+    var sortDir = column.currentSort;
+    var isRightAligned = column.isRightAligned;
+    return React__default.createElement("th", {
+      className: classnames((_classnames = {}, _classnames[styles$o['header-item']] = true, _classnames[styles$o['header-item--sortable']] = isSortable, _classnames)),
+      style: {
+        flex: column.size || 1
+      },
+      key: column.name,
+      onClick: function onClick() {
+        return isSortable && handleSort(column);
+      },
+      onKeyPress: function onKeyPress() {
+        return isSortable && handleSort(column);
+      },
+      role: "columnheader",
+      tabIndex: 0
+    }, React__default.createElement("div", {
+      className: classnames(styles$o['header-item__content'], (_classnames2 = {}, _classnames2[styles$o['header-item__content--right-align']] = isRightAligned, _classnames2))
+    }, column.label, ' ', isSortable && React__default.createElement("span", {
+      className: styles$o['header-sort-icon']
+    }, React__default.createElement(IconSort$1, {
+      sortDirection: sortDir
+    }))));
+  }), showActionMenu && React__default.createElement("th", {
+    className: classnames(styles$o['header-item'], styles$o['header-item--action'])
+  }))));
+};
+
+var ColumnSizes = function ColumnSizes(_ref2) {
+  var columns = _ref2.columns,
+      showActionMenu = _ref2.showActionMenu;
+  var columnPercentageSizes = calculatePercentageOfProportion(columns.map(function (column) {
+    return column.size || 1;
+  }));
+  return React__default.createElement("colgroup", null, columns.map(function (column, index) {
+    return React__default.createElement("col", {
+      key: column.name,
+      style: {
+        width: columnPercentageSizes[index] + "%"
+      }
+    });
+  }), showActionMenu && React__default.createElement("col", {
+    style: {
+      width: "1%",
+      whiteSpace: 'nowrap'
+    }
+  }));
+};
+
+var getNextSort = function getNextSort(column) {
+  switch (column.currentSort) {
+    case SORT_ORDER.ASC:
+      return null;
+
+    case SORT_ORDER.DESC:
+      return SORT_ORDER.ASC;
+
+    default:
+      return SORT_ORDER.DESC;
+  }
+};
+
+var IconSort$1 = function IconSort(_ref3) {
+  var sortDirection = _ref3.sortDirection;
+  var sortDir = sortDirection || null;
+  return React__default.createElement("div", {
+    style: {
+      display: 'inline-flex',
+      flexDirection: 'column'
+    }
+  }, sortDir !== 'desc' && React__default.createElement(IconChevronUp, {
+    size: "small",
+    color: GREY400
+  }), sortDir !== 'asc' && React__default.createElement("span", {
+    style: {
+      marginTop: '-4px'
+    }
+  }, React__default.createElement(IconChevronDown, {
+    size: "small",
+    color: GREY400
+  })));
+};
+
+var styles$p = {"data-table-scroll-fake-border":"_1zw4R","data-table-scroll-fake-border--top":"_2vWl5","data-table-scroll-fake-border--bottom":"_397Yd","data-table-scroll-fake-border__left":"_AGTVL","data-table-scroll-fake-border__left--top":"_3wzKK","data-table-scroll-fake-border__left--bottom":"_2pJrs","data-table-scroll-fake-border__right":"_vh4go","data-table-scroll-fake-border__right--top":"_2sj0a","data-table-scroll-fake-border__right--bottom":"_1s8kO"};
+
+var DataTableScrollFakeBorder = function DataTableScrollFakeBorder(_ref) {
+  var _classNames, _classNames2, _classNames3;
+
+  var placement = _ref.placement;
+  return React__default.createElement("div", {
+    className: classnames(styles$p['data-table-scroll-fake-border'], (_classNames = {}, _classNames[styles$p['data-table-scroll-fake-border--top']] = placement === 'top', _classNames[styles$p['data-table-scroll-fake-border--bottom']] = placement === 'bottom', _classNames))
+  }, React__default.createElement("div", {
+    className: classnames(styles$p['data-table-scroll-fake-border__left'], (_classNames2 = {}, _classNames2[styles$p['data-table-scroll-fake-border__left--top']] = placement === 'top', _classNames2[styles$p['data-table-scroll-fake-border__left--bottom']] = placement === 'bottom', _classNames2))
+  }), React__default.createElement("div", {
+    className: classnames(styles$p['data-table-scroll-fake-border__right'], (_classNames3 = {}, _classNames3[styles$p['data-table-scroll-fake-border__right--top']] = placement === 'top', _classNames3[styles$p['data-table-scroll-fake-border__right--bottom']] = placement === 'bottom', _classNames3))
+  }));
+};
+
+var styles$q = {"data-table-loading-block":"_94pbt"};
+
+var DataTableLoadingBlock = function DataTableLoadingBlock(_ref) {
+  var amountOfColumns = _ref.amountOfColumns,
+      showActionMenu = _ref.showActionMenu;
+  var aditionalColums = showActionMenu ? 1 : 0;
+  var colSpan = amountOfColumns + aditionalColums;
+  return React__default.createElement("tr", {
+    className: styles$q['data-table-loading-block']
+  }, React__default.createElement("td", {
+    colSpan: colSpan
+  }, React__default.createElement(Spinner, {
+    block: true
+  })));
+};
+
+var DataTable = function DataTable(_ref) {
+  var _classNames, _classNames2, _classNames3;
+
+  var items = _ref.items,
+      columns = _ref.columns,
+      itemComponent = _ref.itemComponent,
+      maxHeight = _ref.maxHeight,
+      _ref$hasPrevious = _ref.hasPrevious,
+      hasPrevious = _ref$hasPrevious === void 0 ? true : _ref$hasPrevious,
+      _ref$hasNext = _ref.hasNext,
+      hasNext = _ref$hasNext === void 0 ? true : _ref$hasNext,
+      onPreviousClick = _ref.onPreviousClick,
+      onNextClick = _ref.onNextClick,
+      onSort = _ref.onSort,
+      _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+      _ref$showActionMenu = _ref.showActionMenu,
+      showActionMenu = _ref$showActionMenu === void 0 ? false : _ref$showActionMenu,
+      footerComponent = _ref.footerComponent,
+      _ref$hasVerticalBorde = _ref.hasVerticalBorders,
+      hasVerticalBorders = _ref$hasVerticalBorde === void 0 ? false : _ref$hasVerticalBorde,
+      testId = _ref.testId;
+  var RowItem = itemComponent || DefaultItemComponent;
+  var conditionalStyles = {};
+  var isScrollableTable = !!maxHeight;
+
+  if (isScrollableTable) {
+    conditionalStyles = _extends({}, conditionalStyles, {
+      maxHeight: maxHeight,
+      overflowY: 'auto'
+    });
+  }
+
+  var numberOfRows = items.length + (footerComponent ? 1 : 0);
+  var isShowingFooter = footerComponent && !isLoading;
+  var isShowingColumns = columns && columns.length > 0;
+  return React__default.createElement(Context.Provider, {
+    value: {
+      columns: columns,
+      showActionMenu: showActionMenu,
+      numberOfRows: numberOfRows,
+      hasVerticalBorders: hasVerticalBorders
+    }
+  }, React__default.createElement("div", {
+    className: classnames(styles$o['table-container'])
+  }, isShowingColumns && isScrollableTable && React__default.createElement(DataTableScrollFakeBorder, {
+    placement: "top"
+  }), React__default.createElement("div", {
+    className: classnames(styles$o['table-content'], (_classNames = {}, _classNames[styles$o['table-content--with-scroll']] = isScrollableTable, _classNames)),
+    style: conditionalStyles
+  }, React__default.createElement("table", {
+    className: classnames(styles$o['table'], (_classNames2 = {}, _classNames2[styles$o['table--no-columns']] = !isShowingColumns, _classNames2))
+  }, columns && isShowingColumns && React__default.createElement(DataTableHeader, {
+    columns: columns,
+    onSort: onSort,
+    showActionMenu: showActionMenu
+  }), React__default.createElement("tbody", {
+    className: classnames(styles$o['body'], (_classNames3 = {}, _classNames3[styles$o['body--no-bottom-radius']] = isShowingFooter, _classNames3)),
+    "data-testid": testId
+  }, isLoading && React__default.createElement(DataTableLoadingBlock, {
+    amountOfColumns: (columns === null || columns === void 0 ? void 0 : columns.length) || 1,
+    showActionMenu: showActionMenu
+  }), !isLoading && items.map(function (item, index) {
+    return React__default.createElement(RowItem, {
+      item: item,
+      columns: columns,
+      key: index,
+      index: index,
+      testId: testId
+    });
+  })), isShowingFooter && React__default.createElement("tfoot", {
+    className: styles$o['footer'],
+    "data-testid": testId && testId + "-footer"
+  }, footerComponent))), !isShowingFooter && isScrollableTable && React__default.createElement(DataTableScrollFakeBorder, {
+    placement: "bottom"
+  })), onPreviousClick && onNextClick && (hasPrevious || hasNext) && React__default.createElement("div", {
+    className: styles$o['pagination-controls'],
+    "data-testid": testId && testId + "-pagination-controls"
+  }, React__default.createElement(PaginationControls, {
+    hasPrevious: hasPrevious && !isLoading,
+    hasNext: hasNext && !isLoading,
+    onPreviousClick: onPreviousClick,
+    onNextClick: onNextClick
+  })));
+};
+
+var DefaultItemComponent = function DefaultItemComponent(_ref2) {
+  var columns = _ref2.columns,
+      item = _ref2.item,
+      testId = _ref2.testId;
+  var headingKeys = columns ? columns.map(function (column) {
+    return column.name;
+  }) : Object.keys(item);
+  var columnsToShow = headingKeys.filter(function (key) {
+    return key !== 'actions';
+  });
+  return React__default.createElement(DataTableRow, {
+    actions: item.actions,
+    testId: testId
+  }, columnsToShow.map(function (headingKey) {
+    return React__default.createElement("div", {
+      key: headingKey
+    }, item[headingKey] || '');
+  }));
+};
+
 var useSelectFieldControllers = function useSelectFieldControllers(_ref) {
   var name = _ref.name,
       inputId = _ref.id,
@@ -5707,9 +5801,9 @@ var ToolbarSelect = function ToolbarSelect(_ref) {
   }));
 };
 
-var styles$o = {"date-filter":"_2X-yg","date-filter--wide":"_3O5Kh"};
+var styles$r = {"date-filter":"_2X-yg","date-filter--wide":"_3O5Kh"};
 
-var styles$p = {"date-filter-display":"_23gnr","date-filter-display--non-interactive":"_Zv1Se","date-filter-display--wide":"_18V8V","date-filter-display__display-icon":"_2v9v_"};
+var styles$s = {"date-filter-display":"_23gnr","date-filter-display--non-interactive":"_Zv1Se","date-filter-display--wide":"_18V8V","date-filter-display__display-icon":"_2v9v_"};
 
 var DATE_FILTER_MODE = {
   DAY: 'day',
@@ -5771,14 +5865,14 @@ var DateFilterDisplay = function DateFilterDisplay(_ref) {
       weekStart = _ref.weekStart,
       onClick = _ref.onClick;
   return React__default.createElement("button", {
-    className: classnames(styles$p['date-filter-display'], (_classnames = {}, _classnames[styles$p['date-filter-display--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames[styles$p['date-filter-display--non-interactive']] = mode === DATE_FILTER_MODE.MONTH, _classnames)),
+    className: classnames(styles$s['date-filter-display'], (_classnames = {}, _classnames[styles$s['date-filter-display--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames[styles$s['date-filter-display--non-interactive']] = mode === DATE_FILTER_MODE.MONTH, _classnames)),
     onClick: onClick,
     tabIndex: mode === DATE_FILTER_MODE.MONTH ? -1 : undefined
   }, React__default.createElement(Inline, {
     space: 12,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: classnames(styles$p['date-filter-display__display-icon'])
+    className: classnames(styles$s['date-filter-display__display-icon'])
   }, React__default.createElement(IconCalendarAlt, {
     size: "flexible",
     color: GREY400
@@ -5789,7 +5883,7 @@ var DateFilterDisplay = function DateFilterDisplay(_ref) {
   })));
 };
 
-var styles$q = {"date-stepper":"_s8MoI","date-stepper--backward":"_34Yoi","date-stepper--forward":"_BeWpb"};
+var styles$t = {"date-stepper":"_s8MoI","date-stepper--backward":"_34Yoi","date-stepper--forward":"_BeWpb"};
 
 var handleDateStepper = function handleDateStepper(date, mode, stepDirection, onChange) {
   var step = stepDirection === STEP_DIRECTION.FORWARD ? 1 : -1;
@@ -5824,7 +5918,7 @@ var DateFilterStepper = function DateFilterStepper(_ref) {
       onChange = _ref.onChange,
       date = _ref.date;
   return React__default.createElement("button", {
-    className: classnames(styles$q['date-stepper'], (_classnames = {}, _classnames[styles$q['date-stepper--backward']] = stepDirection === STEP_DIRECTION.BACKWARD, _classnames[styles$q['date-stepper--forward']] = stepDirection === STEP_DIRECTION.FORWARD, _classnames)),
+    className: classnames(styles$t['date-stepper'], (_classnames = {}, _classnames[styles$t['date-stepper--backward']] = stepDirection === STEP_DIRECTION.BACKWARD, _classnames[styles$t['date-stepper--forward']] = stepDirection === STEP_DIRECTION.FORWARD, _classnames)),
     onClick: function onClick() {
       return handleDateStepper(date, mode, stepDirection, onChange);
     }
@@ -5860,7 +5954,7 @@ var DateFilter = function DateFilter(_ref) {
   return React__default.createElement("div", {
     "data-testid": testId,
     ref: calendarAnchorRef,
-    className: classnames(styles$o['date-filter'], (_classnames = {}, _classnames[styles$o['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
+    className: classnames(styles$r['date-filter'], (_classnames = {}, _classnames[styles$r['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
   }, React__default.createElement(Inline, {
     space: 0
   }, React__default.createElement(DateFilterStepper, {
@@ -5901,7 +5995,7 @@ var DateFilter = function DateFilter(_ref) {
   }));
 };
 
-var styles$r = {"segmented-control":"_J5ph7","segmented-control__button":"_2xgv4","segmented-control__button--selected":"_1vG3O","segmented-control__divider":"_1uKNF"};
+var styles$u = {"segmented-control":"_J5ph7","segmented-control__button":"_2xgv4","segmented-control__button--selected":"_1vG3O","segmented-control__divider":"_1uKNF"};
 
 var SegmentedControl = function SegmentedControl(_ref) {
   var options = _ref.options,
@@ -5918,7 +6012,7 @@ var SegmentedControl = function SegmentedControl(_ref) {
   };
 
   return React__default.createElement("div", {
-    className: styles$r['segmented-control'],
+    className: styles$u['segmented-control'],
     "data-testid": testId
   }, options.map(function (option, i) {
     var _classnames;
@@ -5929,16 +6023,16 @@ var SegmentedControl = function SegmentedControl(_ref) {
       onClick: function onClick() {
         return onChange(option);
       },
-      className: classnames(styles$r['segmented-control__button'], (_classnames = {}, _classnames[styles$r['segmented-control__button--selected']] = isSelected(option), _classnames))
+      className: classnames(styles$u['segmented-control__button'], (_classnames = {}, _classnames[styles$u['segmented-control__button--selected']] = isSelected(option), _classnames))
     }, option), !isLastElement(i) && React__default.createElement("div", {
-      className: classnames(styles$r['segmented-control__divider'])
+      className: classnames(styles$u['segmented-control__divider'])
     }));
   }));
 };
 
-var styles$s = {"form--standard-size":"_3CaV0"};
+var styles$v = {"form--standard-size":"_3CaV0"};
 
-var styles$t = {"card":"_29ZIp","card__body":"_3Q8NT","card__body--interactive":"_2Fah6","card--focus":"_SGno0","card__body--focus":"_1zqRN","card__body--with-kebab":"_3Hwms","card__kebab":"_TmEUS"};
+var styles$w = {"card":"_29ZIp","card__body":"_3Q8NT","card__body--interactive":"_2Fah6","card--focus":"_SGno0","card__body--focus":"_1zqRN","card__body--with-kebab":"_3Hwms","card__kebab":"_TmEUS"};
 
 var _excluded$2g = ["children", "onClick", "isSelected", "actions", "testId"];
 
@@ -5955,18 +6049,18 @@ var Card = function Card(_ref) {
 
   var positionStyles = usePositionStyles(positionProps);
   return React__default.createElement("div", {
-    className: classnames(styles$t['card']),
+    className: classnames(styles$w['card']),
     style: positionStyles
   }, onClick ? React__default.createElement("button", {
-    className: classnames(styles$t['card__body'], styles$t['card__body--interactive'], (_classnames = {}, _classnames[styles$t['card__body--focus']] = isSelected, _classnames[styles$t['card__body--with-kebab']] = actions, _classnames)),
+    className: classnames(styles$w['card__body'], styles$w['card__body--interactive'], (_classnames = {}, _classnames[styles$w['card__body--focus']] = isSelected, _classnames[styles$w['card__body--with-kebab']] = actions, _classnames)),
     "data-testid": testId,
     tabIndex: 0,
     onClick: onClick
   }, children) : React__default.createElement("div", {
-    className: classnames(styles$t['card__body'], (_classnames2 = {}, _classnames2[styles$t['card__body--focus']] = isSelected, _classnames2[styles$t['card__body--with-kebab']] = actions, _classnames2)),
+    className: classnames(styles$w['card__body'], (_classnames2 = {}, _classnames2[styles$w['card__body--focus']] = isSelected, _classnames2[styles$w['card__body--with-kebab']] = actions, _classnames2)),
     "data-testid": testId
   }, children), actions && React__default.createElement("div", {
-    className: classnames(styles$t['card__kebab'])
+    className: classnames(styles$w['card__kebab'])
   }, React__default.createElement(KebabMenu, {
     actions: actions
   })));
@@ -5995,7 +6089,7 @@ var ALIGNMENTS = {
   JUSTIFY: 'justify'
 };
 
-var styles$u = {"text":"_3CIA3","text__body":"_1nnj8","text__caption":"_37K6o","text__insight":"_avqxy","text--bold":"_2TG6E","text--italic":"_2hlsn","text--underline":"_1Pjo6","text--monospace":"_eDdDI","text--align-left":"_2gNwS","text--align-right":"_ufv1W","text--align-center":"_2WMN6","text--align-justify":"_2iH-J"};
+var styles$x = {"text":"_3CIA3","text__body":"_1nnj8","text__caption":"_37K6o","text__insight":"_avqxy","text--bold":"_2TG6E","text--italic":"_2hlsn","text--underline":"_1Pjo6","text--monospace":"_eDdDI","text--align-left":"_2gNwS","text--align-right":"_ufv1W","text--align-center":"_2WMN6","text--align-justify":"_2iH-J"};
 
 var _excluded$2h = ["children", "as", "emphasis", "alignment", "color", "testId"];
 
@@ -6016,7 +6110,7 @@ var Text = function Text(_ref) {
     style: _extends({
       color: color
     }, positionStyles),
-    className: classnames(styles$u['text'], (_classnames = {}, _classnames[styles$u['text--bold']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD), _classnames[styles$u['text--italic']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC), _classnames[styles$u['text--underline']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE), _classnames[styles$u['text--monospace']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE), _classnames[styles$u['text--align-left']] = alignment === ALIGNMENTS.LEFT, _classnames[styles$u['text--align-right']] = alignment === ALIGNMENTS.RIGHT, _classnames[styles$u['text--align-center']] = alignment === ALIGNMENTS.CENTER, _classnames[styles$u['text--align-justify']] = alignment === ALIGNMENTS.JUSTIFY, _classnames[styles$u['text__body']] = as === TEXT_TYPES.BODY, _classnames[styles$u['text__insight']] = as === TEXT_TYPES.INSIGHT, _classnames[styles$u['text__caption']] = as === TEXT_TYPES.CAPTION, _classnames)),
+    className: classnames(styles$x['text'], (_classnames = {}, _classnames[styles$x['text--bold']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD), _classnames[styles$x['text--italic']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC), _classnames[styles$x['text--underline']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE), _classnames[styles$x['text--monospace']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE), _classnames[styles$x['text--align-left']] = alignment === ALIGNMENTS.LEFT, _classnames[styles$x['text--align-right']] = alignment === ALIGNMENTS.RIGHT, _classnames[styles$x['text--align-center']] = alignment === ALIGNMENTS.CENTER, _classnames[styles$x['text--align-justify']] = alignment === ALIGNMENTS.JUSTIFY, _classnames[styles$x['text__body']] = as === TEXT_TYPES.BODY, _classnames[styles$x['text__insight']] = as === TEXT_TYPES.INSIGHT, _classnames[styles$x['text__caption']] = as === TEXT_TYPES.CAPTION, _classnames)),
     'data-testid': testId
   };
   var pTypes = [TEXT_TYPES.BODY, TEXT_TYPES.CAPTION, TEXT_TYPES.INSIGHT];
@@ -6032,7 +6126,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   }, children);
 };
 
-var styles$v = {"breadcrumb-item":"_XFvYB"};
+var styles$y = {"breadcrumb-item":"_XFvYB"};
 
 var BreadcrumbItem = function BreadcrumbItem(_ref) {
   var href = _ref.href,
@@ -6045,24 +6139,24 @@ var BreadcrumbItem = function BreadcrumbItem(_ref) {
   }), children);
   return reloadDocument ? React__default.createElement("a", {
     href: href,
-    className: styles$v['breadcrumb-item'],
+    className: styles$y['breadcrumb-item'],
     "data-testid": testId
   }, content) : React__default.createElement(Link$1, {
     to: href,
-    className: styles$v['breadcrumb-item'],
+    className: styles$y['breadcrumb-item'],
     relative: "path",
     reloadDocument: reloadDocument,
     "data-testid": testId
   }, content);
 };
 
-var styles$w = {"page-breadcrumbs":"_HAJCd"};
+var styles$z = {"page-breadcrumbs":"_HAJCd"};
 
 var PageBreadcrumbs = function PageBreadcrumbs(_ref) {
   var breadcrumbs = _ref.breadcrumbs;
   var items = getBreadbrumbItems(breadcrumbs);
   return React__default.createElement("div", {
-    className: styles$w['page-breadcrumbs']
+    className: styles$z['page-breadcrumbs']
   }, React__default.createElement(Breadcrumbs, null, items));
 };
 
@@ -6087,7 +6181,7 @@ var getBreadbrumbItems = function getBreadbrumbItems(breadcrumbs) {
   }, breadcrumbs.label);
 };
 
-var styles$x = {"page":"_FbhTM","page--fullwidth":"_3QyAE","page--restricted":"_17aOG"};
+var styles$A = {"page":"_FbhTM","page--fullwidth":"_3QyAE","page--restricted":"_17aOG"};
 
 var PAGE_SIZES = {
   FULL_WIDTH: 'fullwidth',
@@ -6110,7 +6204,7 @@ var Page = function Page(_ref) {
   var hasHeader = title || actions;
   var hasPageBlocks = hasHeader || banner || filterBar;
   return React__default.createElement("div", {
-    className: classnames(styles$x['page'], (_classNames = {}, _classNames[styles$x['page--restricted']] = size === PAGE_SIZES.RESTRICTED, _classNames[styles$x['page--fullwidth']] = size === PAGE_SIZES.FULL_WIDTH, _classNames)),
+    className: classnames(styles$A['page'], (_classNames = {}, _classNames[styles$A['page--restricted']] = size === PAGE_SIZES.RESTRICTED, _classNames[styles$A['page--fullwidth']] = size === PAGE_SIZES.FULL_WIDTH, _classNames)),
     "data-testid": testId
   }, React__default.createElement(Stack, {
     space: 20
@@ -6130,7 +6224,7 @@ var Page = function Page(_ref) {
   }, title), actions), subtitle && React__default.createElement(Text, null, subtitle)), banner, filterBar)), children));
 };
 
-var styles$y = {"form-section":"_7-5gD","form-section__title":"_a83vM","form-section__subtitle":"_1lKv8","form-section--no-margin":"_lZyFQ"};
+var styles$B = {"form-section":"_7-5gD","form-section__title":"_a83vM","form-section__subtitle":"_1lKv8","form-section--no-margin":"_lZyFQ"};
 
 var FormSection = function FormSection(_ref) {
   var _classnames;
@@ -6142,14 +6236,14 @@ var FormSection = function FormSection(_ref) {
       noMargin = _ref$noMargin === void 0 ? false : _ref$noMargin,
       testId = _ref.testId;
   return React__default.createElement("div", {
-    className: classnames(styles$y['form-section'], (_classnames = {}, _classnames[styles$y['form-section--no-margin']] = noMargin, _classnames)),
+    className: classnames(styles$B['form-section'], (_classnames = {}, _classnames[styles$B['form-section--no-margin']] = noMargin, _classnames)),
     "data-testid": testId
   }, React__default.createElement(Stack, null, React__default.createElement(Stack, {
     space: 8
   }, title && React__default.createElement("h2", {
-    className: classnames(styles$y['form-section__title'])
+    className: classnames(styles$B['form-section__title'])
   }, title), subtitle && React__default.createElement("h3", {
-    className: classnames(styles$y['form-section__subtitle'])
+    className: classnames(styles$B['form-section__subtitle'])
   }, subtitle)), children));
 };
 
@@ -6167,7 +6261,7 @@ var updateButtonProps$1 = function updateButtonProps(child, newProps) {
   }, newProps, child.props));
 };
 
-var styles$z = {"form-footer":"_3vVBF"};
+var styles$C = {"form-footer":"_3vVBF"};
 
 var FormFooterActions = function FormFooterActions(_ref) {
   var _actions$primary, _actions$secondary, _actions$tertiary;
@@ -6202,7 +6296,7 @@ var FormFooter = function FormFooter(_ref) {
   });
   var isInlineChildren = React__default.Children.count(children) === 1 && React__default.isValidElement(children) && children.type === Inline;
   return React__default.createElement("div", {
-    className: classnames(styles$z['form-footer']),
+    className: classnames(styles$C['form-footer']),
     "data-testid": testId
   }, actions && React__default.createElement(FormFooterActions, {
     actions: actions
@@ -6244,12 +6338,12 @@ var Form = function Form(_ref) {
     }
   }, React__default.createElement("form", {
     onSubmit: onSubmit ? handleSubmit : formik === null || formik === void 0 ? void 0 : formik.handleSubmit,
-    className: classnames((_classnames = {}, _classnames[styles$s['form--standard-size']] = !wide, _classnames)),
+    className: classnames((_classnames = {}, _classnames[styles$v['form--standard-size']] = !wide, _classnames)),
     "data-testid": testId
   }, stackContent ? React__default.createElement(Stack, null, formattedChildren) : formattedChildren));
 };
 
-var styles$A = {"form-row":"_2i-Ll"};
+var styles$D = {"form-row":"_2i-Ll"};
 
 var SIZE_25_PERCENT = '25%';
 var SIZE_33_PERCENT = '33.333%';
@@ -6280,7 +6374,7 @@ var FormRow = function FormRow(_ref) {
     space: 20,
     testId: testId,
     alignItems: "stretch",
-    extraClass: styles$A['form-row']
+    extraClass: styles$D['form-row']
   }, children, additionalColumns.map(function (_, index) {
     return React__default.createElement("span", {
       key: index,
@@ -6289,7 +6383,7 @@ var FormRow = function FormRow(_ref) {
   }));
 };
 
-var styles$B = {"text-field":"_BkzdC","text-field--focus":"_Rop31","text-field--disabled":"_2x3Cm","text-field--invalid":"_3zOwV","text-field__toolbar":"_rQqnL"};
+var styles$E = {"text-field":"_BkzdC","text-field--focus":"_Rop31","text-field--disabled":"_2x3Cm","text-field--invalid":"_3zOwV","text-field__toolbar":"_rQqnL"};
 
 var useGrowTextAreaRef = function useGrowTextAreaRef(minHeight, maxHeight, autoGrow, forwardedRef) {
   var textareaRef = useRef(null);
@@ -6365,7 +6459,7 @@ var TextAreaField = function TextAreaField(_ref) {
       updateHeight = _useGrowTextAreaRef.updateHeight;
 
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$B['text-field'], (_classnames = {}, _classnames[styles$B['text-field--invalid']] = hasError, _classnames[styles$B['text-field--disabled']] = disabled, _classnames[styles$B['text-field--focus']] = hasFocus, _classnames)),
+    className: classnames(styles$E['text-field'], (_classnames = {}, _classnames[styles$E['text-field--invalid']] = hasError, _classnames[styles$E['text-field--disabled']] = disabled, _classnames[styles$E['text-field--focus']] = hasFocus, _classnames)),
     ref: containerRef,
     onClick: function onClick(event) {
       if (event.target === (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
@@ -6397,7 +6491,7 @@ var TextAreaField = function TextAreaField(_ref) {
     },
     ref: textAreaRef
   }), toolbar && React__default.createElement("div", {
-    className: styles$B['text-field__toolbar'],
+    className: styles$E['text-field__toolbar'],
     id: controllers.id + "-toolbar",
     ref: toolbarRef,
     onClick: function onClick(event) {
@@ -6546,7 +6640,7 @@ var useCheckBoxFieldControllers = function useCheckBoxFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$C = {"check-box-field":"_2sg0c","check-box-field__caption":"_2LdrP","check-box-field__custom-input":"_2mA8e"};
+var styles$F = {"check-box-field":"_2sg0c","check-box-field__caption":"_2LdrP","check-box-field__custom-input":"_2mA8e"};
 
 var CheckboxField = function CheckboxField(_ref) {
   var name = _ref.name,
@@ -6576,7 +6670,7 @@ var CheckboxField = function CheckboxField(_ref) {
     flexItems: true,
     flex: ['0 0 auto']
   }, React__default.createElement("div", {
-    className: styles$C['check-box-field']
+    className: styles$F['check-box-field']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
@@ -6589,12 +6683,12 @@ var CheckboxField = function CheckboxField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("span", {
-    className: styles$C['check-box-field__custom-input']
+    className: styles$F['check-box-field__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: controllers.id,
     truncate: false
   }, label)), caption && React__default.createElement("div", {
-    className: styles$C['check-box-field__caption']
+    className: styles$F['check-box-field__caption']
   }, React__default.createElement(Caption, {
     fieldId: controllers.id
   }, caption)), controllers.error && React__default.createElement(ErrorMessage, {
@@ -6602,7 +6696,7 @@ var CheckboxField = function CheckboxField(_ref) {
   }, controllers.error));
 };
 
-var styles$D = {"pill-select-field":"_g6T-p","pill-select-field__custom-input":"_1i2AX"};
+var styles$G = {"pill-select-field":"_g6T-p","pill-select-field__custom-input":"_1i2AX"};
 
 var useMultiSelectFieldControllers = function useMultiSelectFieldControllers(_ref) {
   var name = _ref.name,
@@ -6694,7 +6788,7 @@ var PillSelectField = function PillSelectField(_ref) {
     var itemId = controllers.id + "-" + itemIdentifier;
     return React__default.createElement("div", {
       key: itemIdentifier,
-      className: styles$D['pill-select-field']
+      className: styles$G['pill-select-field']
     }, React__default.createElement("input", {
       name: name + "-" + itemIdentifier,
       id: itemId,
@@ -6716,7 +6810,7 @@ var PillSelectField = function PillSelectField(_ref) {
         controllers.onChange(newValue);
       }
     }), React__default.createElement("span", {
-      className: styles$D['pill-select-field__custom-input']
+      className: styles$G['pill-select-field__custom-input']
     }, option.label));
   })));
 };
@@ -6764,9 +6858,9 @@ var useRadioGroupFieldContext = function useRadioGroupFieldContext() {
   return context;
 };
 
-var styles$E = {"label":"_1WGz2","label--truncate":"_mQ9Rd","radio-group-field__label":"_RXyG_"};
+var styles$H = {"label":"_1WGz2","label--truncate":"_mQ9Rd","radio-group-field__label":"_RXyG_"};
 
-var styles$F = {"label":"_1Tw96","label--truncate":"_1o8rK","radio-group-box-option":"_2OGKE","radio-group-box-option__box":"_23M9k","radio-group-box-option__label":"_1r-Wg"};
+var styles$I = {"label":"_1Tw96","label--truncate":"_1o8rK","radio-group-box-option":"_2OGKE","radio-group-box-option__box":"_23M9k","radio-group-box-option__label":"_1r-Wg"};
 
 var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
   var value = _ref.value,
@@ -6781,7 +6875,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     id: inputId
   });
   return React__default.createElement("label", {
-    className: styles$F['radio-group-box-option']
+    className: styles$I['radio-group-box-option']
   }, React__default.createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -6792,7 +6886,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled
   }), React__default.createElement("div", {
-    className: styles$F['radio-group-box-option__box']
+    className: styles$I['radio-group-box-option__box']
   }, React__default.createElement(Stack, {
     space: 16,
     alignItems: "center",
@@ -6801,13 +6895,13 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     space: 8,
     alignItems: "center"
   }, label && React__default.createElement("div", {
-    className: styles$F['radio-group-box-option__label']
+    className: styles$I['radio-group-box-option__label']
   }, label), caption && React__default.createElement(Caption, {
     fieldId: id
   }, caption)))));
 };
 
-var styles$G = {"radio-group-option":"_1Clmp","radio-group-option__caption":"_3UmWA","radio-group-option__custom-input":"_1tMq-"};
+var styles$J = {"radio-group-option":"_1Clmp","radio-group-option__caption":"_3UmWA","radio-group-option__custom-input":"_1tMq-"};
 
 var RadioGroupOption = function RadioGroupOption(_ref) {
   var value = _ref.value,
@@ -6826,7 +6920,7 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     space: 8,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: styles$G['radio-group-option']
+    className: styles$J['radio-group-option']
   }, React__default.createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -6837,11 +6931,11 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled
   }), React__default.createElement("span", {
-    className: styles$G['radio-group-option__custom-input']
+    className: styles$J['radio-group-option__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: id
   }, label)), caption && React__default.createElement("div", {
-    className: styles$G['radio-group-option__caption']
+    className: styles$J['radio-group-option__caption']
   }, React__default.createElement(Caption, {
     fieldId: id
   }, caption)));
@@ -6976,7 +7070,7 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, React__default.createElement(Stack, {
     space: 12
   }, label && React__default.createElement("div", {
-    className: styles$E['radio-group-field__label']
+    className: styles$H['radio-group-field__label']
   }, label), React__default.createElement(Stack, {
     space: 8
   }, optionsType === OPTION_TYPES.RADIO ? React__default.createElement(RadioOptions, {
@@ -6989,9 +7083,9 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, children), controllers.error && React__default.createElement(ErrorMessage, null, controllers.error))));
 };
 
-var styles$H = {"text-field":"_18Rzv","text-field--invalid":"_3eD7t","text-field--prefixed":"_2evrG","text-field--suffixed":"_-MgeO","password-container":"_-Rf3c","password-toggle":"_yinPY"};
+var styles$K = {"text-field":"_18Rzv","text-field--invalid":"_3eD7t","text-field--prefixed":"_2evrG","text-field--suffixed":"_-MgeO","password-container":"_-Rf3c","password-toggle":"_yinPY"};
 
-var styles$I = {"password-criteria":"_U0krC","password-criteria--invalid":"_2XIl4"};
+var styles$L = {"password-criteria":"_U0krC","password-criteria--invalid":"_2XIl4"};
 
 var PasswordCriteria = function PasswordCriteria(_ref) {
   var _classnames;
@@ -6999,7 +7093,7 @@ var PasswordCriteria = function PasswordCriteria(_ref) {
   var met = _ref.met,
       children = _ref.children;
   return React__default.createElement("span", {
-    className: classnames(styles$I['password-criteria'], (_classnames = {}, _classnames[styles$I['password-criteria--invalid']] = !met, _classnames))
+    className: classnames(styles$L['password-criteria'], (_classnames = {}, _classnames[styles$L['password-criteria--invalid']] = !met, _classnames))
   }, React__default.createElement(Inline, {
     space: met ? 4 : 8
   }, met ? React__default.createElement(IconCheck, {
@@ -7084,11 +7178,11 @@ var PasswordField = function PasswordField(_ref) {
     error: controllers.error
   };
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: styles$H['password-container']
+    className: styles$K['password-container']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames(styles$H['text-field'], (_classnames = {}, _classnames[styles$H['text-field--invalid']] = hasError, _classnames)),
+    className: classnames(styles$K['text-field'], (_classnames = {}, _classnames[styles$K['text-field--invalid']] = hasError, _classnames)),
     type: type,
     "data-testid": testId,
     "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
@@ -7100,7 +7194,7 @@ var PasswordField = function PasswordField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("div", {
-    className: styles$H['password-toggle'],
+    className: styles$K['password-toggle'],
     onClick: toggleType,
     onKeyPress: toggleType,
     "data-testid": testId && testId + "-toggle",
@@ -7302,7 +7396,9 @@ var MultiSelectField = function MultiSelectField(_ref) {
       closeOnSelect = _ref$closeOnSelect === void 0 ? false : _ref$closeOnSelect,
       _ref$menuShouldScroll = _ref.menuShouldScrollIntoView,
       menuShouldScrollIntoView = _ref$menuShouldScroll === void 0 ? true : _ref$menuShouldScroll,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      _ref$isSearchable = _ref.isSearchable,
+      isSearchable = _ref$isSearchable === void 0 ? true : _ref$isSearchable;
   var controllers = useMultiSelectFieldControllers({
     name: name,
     id: inputId,
@@ -7355,11 +7451,12 @@ var MultiSelectField = function MultiSelectField(_ref) {
       }
 
       return !isScrollingTheSelectMenu(e.target);
-    }
+    },
+    isSearchable: isSearchable
   }));
 };
 
-var styles$J = {"custom-control":"_1cDCR"};
+var styles$M = {"custom-control":"_1cDCR"};
 
 var _excluded$2k = ["children"];
 
@@ -7372,7 +7469,7 @@ function CustomControl(_ref) {
   var SelectedOptionPrefix = props.selectProps.componentsProps.SelectedOptionPrefix;
   var selectedOption = (_props$getValue = props.getValue()) === null || _props$getValue === void 0 ? void 0 : _props$getValue[0];
   return React__default.createElement(components.Control, Object.assign({}, props), SelectedOptionPrefix && selectedOption ? React__default.createElement("div", {
-    className: styles$J['custom-control'],
+    className: styles$M['custom-control'],
     style: {
       paddingLeft: selectedOption ? 8 : 0
     }
@@ -7385,7 +7482,7 @@ function CustomControl(_ref) {
   }, props)), children)) : children);
 }
 
-var styles$K = {"custom-menu-text-field":"_2-zhH","custom-menu-hr":"_3sdnK","custom-menu-div":"_2F1jP"};
+var styles$N = {"custom-menu-text-field":"_2-zhH","custom-menu-hr":"_3sdnK","custom-menu-div":"_2F1jP"};
 
 var _excluded$2l = ["children"];
 
@@ -7445,15 +7542,15 @@ function CustomMenu(_ref) {
   return React__default.createElement(components.Menu, Object.assign({}, props), React__default.createElement("div", {
     ref: containerRef
   }, children, React__default.createElement("hr", {
-    className: styles$K['custom-menu-hr']
+    className: styles$N['custom-menu-hr']
   }), !showFooter ? React__default.createElement(CreatableButton, null) : React__default.createElement("div", {
-    className: styles$K['custom-menu-div']
+    className: styles$N['custom-menu-div']
   }, React__default.createElement(Flex, {
     space: 4,
     flex: [1],
     flexItems: true
   }, React__default.createElement("input", {
-    className: classnames(textFieldStyles['text-field'], styles$K['custom-menu-text-field']),
+    className: classnames(textFieldStyles['text-field'], styles$N['custom-menu-text-field']),
     autoCorrect: "off",
     autoComplete: "off",
     spellCheck: "false",
@@ -7516,7 +7613,9 @@ var useSelectField = function useSelectField(_ref) {
       SelectedOptionPrefix = _ref.SelectedOptionPrefix,
       testId = _ref.testId,
       creatableButton = _ref.creatableButton,
-      onCreate = _ref.onCreate;
+      onCreate = _ref.onCreate,
+      _ref$isSearchable = _ref.isSearchable,
+      isSearchable = _ref$isSearchable === void 0 ? true : _ref$isSearchable;
 
   var _useState = useState(false),
       isMenuInputFocus = _useState[0],
@@ -7579,7 +7678,8 @@ var useSelectField = function useSelectField(_ref) {
     }),
     value: controllers.value,
     defaultValue: defaultValue,
-    menuIsOpen: isMenuInputFocus || undefined
+    menuIsOpen: isMenuInputFocus || undefined,
+    isSearchable: isSearchable
   };
   var fieldProps = {
     caption: caption,
@@ -7604,7 +7704,7 @@ var SelectField = function SelectField(props) {
   }, React__default.createElement(Select, Object.assign({}, selectProps))));
 };
 
-var styles$L = {"custom-list":"_uC4zU"};
+var styles$O = {"custom-list":"_uC4zU"};
 
 var _excluded$2m = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
 
@@ -7623,7 +7723,7 @@ var CustomList = function CustomList(_ref) {
   return React__default.createElement(components.MenuList, Object.assign({}, props), React__default.createElement(Fragment, null, children, showFooter && React__default.createElement(Inline, {
     justifyContent: "center"
   }, React__default.createElement("div", {
-    className: styles$L['custom-list']
+    className: styles$O['custom-list']
   }, getLocalizedString('main.START_TYPING_TO_SEE_MORE_OPTIONS')))));
 };
 
@@ -7979,7 +8079,7 @@ var getFormikError = function getFormikError(error) {
   return undefined;
 };
 
-var styles$M = {"container":"_1Ini2","wrapper":"_21VnL","interactionDisabled":"_wJ6Cb","DayPicker-Day":"_1c48y","navBar":"_3KwsN","todayButton":"_10CBO","navButtonInteractionDisabled":"_dHL-D","navButtonPrev":"_6kNi3","navButtonNext":"_13W_e","months":"_1FeSY","month":"_wU6A4","caption":"_AMbAo","weekdays":"_1LEst","weekdaysRow":"_2XECo","weekday":"_1C5ry","body":"_11F-Y","week":"_3MAFk","day":"_mG73F","disabled":"_2pgnH","selected":"_MtLaz","outside":"_CRqyX","footer":"_2KG9-","today":"_2JA2y","overlayWrapper":"_1JWbc","overlay":"_2tL6g","weekNumber":"_3u72O","text-field":"_25rf7","date-range-field":"_3qVhi","text-field--invalid":"_2M9Ud","text-field--prefixed":"_3TUb2","text-field--suffixed":"_foqL0","date-range-field--invalid":"_3df9R","date-range-field--disabled":"_2Nkht"};
+var styles$P = {"container":"_1Ini2","wrapper":"_21VnL","interactionDisabled":"_wJ6Cb","DayPicker-Day":"_1c48y","navBar":"_3KwsN","todayButton":"_10CBO","navButtonInteractionDisabled":"_dHL-D","navButtonPrev":"_6kNi3","navButtonNext":"_13W_e","months":"_1FeSY","month":"_wU6A4","caption":"_AMbAo","weekdays":"_1LEst","weekdaysRow":"_2XECo","weekday":"_1C5ry","body":"_11F-Y","week":"_3MAFk","day":"_mG73F","disabled":"_2pgnH","selected":"_MtLaz","outside":"_CRqyX","footer":"_2KG9-","today":"_2JA2y","overlayWrapper":"_1JWbc","overlay":"_2tL6g","weekNumber":"_3u72O","text-field":"_25rf7","date-range-field":"_3qVhi","text-field--invalid":"_2M9Ud","text-field--prefixed":"_3TUb2","text-field--suffixed":"_foqL0","date-range-field--invalid":"_3df9R","date-range-field--disabled":"_2Nkht"};
 
 var FromDate = function FromDate(_ref) {
   var name = _ref.name,
@@ -8018,7 +8118,7 @@ var FromDate = function FromDate(_ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$M,
+    classNames: styles$P,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -8045,7 +8145,7 @@ var FromDate = function FromDate(_ref) {
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$M,
+    classNames: styles$P,
     selectedDay: start,
     value: start,
     formatDate: formatDate,
@@ -8119,7 +8219,7 @@ var ToDate = function ToDate(_ref, ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$M,
+    classNames: styles$P,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -8138,7 +8238,7 @@ var ToDate = function ToDate(_ref, ref) {
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$M,
+    classNames: styles$P,
     selectedDay: end,
     value: end,
     formatDate: formatDate,
@@ -8223,7 +8323,7 @@ var DateRangeField = function DateRangeField(_ref) {
       start = _controllers$value.start,
       end = _controllers$value.end;
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$M['date-range-field'], (_classnames = {}, _classnames[styles$M['date-range-field--invalid']] = hasError, _classnames[styles$M['date-range-field--disabled']] = disabled, _classnames)),
+    className: classnames(styles$P['date-range-field'], (_classnames = {}, _classnames[styles$P['date-range-field--invalid']] = hasError, _classnames[styles$P['date-range-field--disabled']] = disabled, _classnames)),
     "data-testid": testId
   }, React__default.createElement(IconCalendarAlt, {
     size: "medium",
@@ -8603,7 +8703,7 @@ var BUTTON_THEME = {
   UPSELL: 'upsell'
 };
 
-var styles$N = {"banner":"_vgLin","banner__title":"_63TwY","banner__body":"_3n6S7","banner__body--multilineCTA":"_2pMYs","banner--info":"_ON6Eg","banner__icon":"_1-D-E","banner--success":"_1FFZh","banner--danger":"_2R34O","banner--warning":"_3Cfhe","banner--upsell":"_1SIOw","banner__close":"_3SNQ1","banner--single-line":"_3nLTI"};
+var styles$Q = {"banner":"_vgLin","banner__title":"_63TwY","banner__body":"_3n6S7","banner__body--multilineCTA":"_2pMYs","banner--info":"_ON6Eg","banner__icon":"_1-D-E","banner--success":"_1FFZh","banner--danger":"_2R34O","banner--warning":"_3Cfhe","banner--upsell":"_1SIOw","banner__close":"_3SNQ1","banner--single-line":"_3nLTI"};
 
 var ButtonCTA = function ButtonCTA(_ref) {
   var button = _ref.button,
@@ -8626,7 +8726,7 @@ var ButtonCTA = function ButtonCTA(_ref) {
   }, button.props));
 };
 
-var styles$O = {"banner__caption":"_1jqm8"};
+var styles$R = {"banner__caption":"_1jqm8"};
 
 var InlineBannerCTA = function InlineBannerCTA(_ref) {
   var primaryButton = _ref.primaryButton,
@@ -8657,7 +8757,7 @@ var InlineBannerCTA = function InlineBannerCTA(_ref) {
     bannerTheme: bannerTheme,
     primaryCTA: true
   })), caption && multiLine && React__default.createElement("div", {
-    className: styles$O['banner__caption']
+    className: styles$R['banner__caption']
   }, caption));
 };
 
@@ -8704,14 +8804,14 @@ var InlineBanner = function InlineBanner(_ref) {
   var Layout = multiLine ? Stack : Inline;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$N['banner'], (_classnames = {}, _classnames[styles$N['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$N['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$N['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$N['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$N['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$N['banner--single-line']] = !multiLine, _classnames)),
+    className: classnames(styles$Q['banner'], (_classnames = {}, _classnames[styles$Q['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$Q['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$Q['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$Q['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$Q['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$Q['banner--single-line']] = !multiLine, _classnames)),
     style: positionStyles
   }, React__default.createElement(Inline, {
     alignItems: multiLine ? undefined : 'center',
     flex: ['0 1 auto', 1],
     space: 12
   }, React__default.createElement("div", {
-    className: styles$N['banner__icon']
+    className: styles$Q['banner__icon']
   }, React__default.createElement(InlineBannerIcon, {
     theme: theme
   })), React__default.createElement(Layout, {
@@ -8721,9 +8821,9 @@ var InlineBanner = function InlineBanner(_ref) {
     flex: ['min-content'],
     flexWrap: multiLine ? undefined : 'wrap'
   }, title && React__default.createElement("div", {
-    className: styles$N['banner__title']
+    className: styles$Q['banner__title']
   }, title), React__default.createElement("div", {
-    className: classnames(styles$N['banner__body'], (_classnames2 = {}, _classnames2[styles$N['banner__body--multilineCTA']] = primaryButton && multiLine, _classnames2))
+    className: classnames(styles$Q['banner__body'], (_classnames2 = {}, _classnames2[styles$Q['banner__body--multilineCTA']] = primaryButton && multiLine, _classnames2))
   }, children), primaryButton && React__default.createElement(InlineBannerCTA, {
     primaryButton: primaryButton,
     secondaryButton: secondaryButton,
@@ -8731,7 +8831,7 @@ var InlineBanner = function InlineBanner(_ref) {
     multiLine: multiLine,
     bannerTheme: theme
   })), dismissable && React__default.createElement("div", {
-    className: styles$N['banner__close']
+    className: styles$Q['banner__close']
   }, React__default.createElement(Button$1, {
     theme: "link-icon",
     type: "button",
@@ -8745,7 +8845,7 @@ var PERSISTENT_BANNER_THEME = {
   DANGER: 'danger'
 };
 
-var styles$P = {"persistent-banner":"_1KO1J","persistent-banner--info":"_2mTN3","persistent-banner--danger":"_1YuCF","persistent-banner--upsell":"_tlNFk"};
+var styles$S = {"persistent-banner":"_1KO1J","persistent-banner--info":"_2mTN3","persistent-banner--danger":"_1YuCF","persistent-banner--upsell":"_tlNFk"};
 
 var PersistentBanner = function PersistentBanner(_ref) {
   var _classNames;
@@ -8774,7 +8874,7 @@ var PersistentBanner = function PersistentBanner(_ref) {
   };
 
   return React__default.createElement("div", {
-    className: classnames(styles$P['persistent-banner'], (_classNames = {}, _classNames[styles$P['persistent-banner--info']] = theme === PERSISTENT_BANNER_THEME.INFO, _classNames[styles$P['persistent-banner--danger']] = theme === PERSISTENT_BANNER_THEME.DANGER, _classNames[styles$P['persistent-banner--upsell']] = theme === PERSISTENT_BANNER_THEME.UPSELL, _classNames)),
+    className: classnames(styles$S['persistent-banner'], (_classNames = {}, _classNames[styles$S['persistent-banner--info']] = theme === PERSISTENT_BANNER_THEME.INFO, _classNames[styles$S['persistent-banner--danger']] = theme === PERSISTENT_BANNER_THEME.DANGER, _classNames[styles$S['persistent-banner--upsell']] = theme === PERSISTENT_BANNER_THEME.UPSELL, _classNames)),
     "data-testid": testId
   }, onDismiss ? React__default.createElement(Inline, {
     flex: [1],
@@ -8846,7 +8946,7 @@ var useProgress = function useProgress(progress, maxValue, getMetric) {
   };
 };
 
-var styles$Q = {"circular-progress":"_1XR7V","circular-progress__label":"_1BygP","circular-progress__track":"_1Ak-z","circular-progress__indicator":"_22YIp"};
+var styles$T = {"circular-progress":"_1XR7V","circular-progress__label":"_1BygP","circular-progress__track":"_1Ak-z","circular-progress__indicator":"_22YIp"};
 
 var CircularProgress = function CircularProgress(_ref) {
   var progress = _ref.progress,
@@ -8861,7 +8961,7 @@ var CircularProgress = function CircularProgress(_ref) {
 
   var determinant = metric.percentage * 2.79;
   return React__default.createElement("div", Object.assign({}, elementProps, {
-    className: styles$Q['circular-progress'],
+    className: styles$T['circular-progress'],
     "data-testid": testId
   }), React__default.createElement("svg", {
     viewBox: "0 0 100 100"
@@ -8870,21 +8970,21 @@ var CircularProgress = function CircularProgress(_ref) {
     cy: 50,
     r: 45,
     strokeWidth: "10px",
-    className: styles$Q['circular-progress__track']
+    className: styles$T['circular-progress__track']
   }), React__default.createElement("circle", {
     cx: 50,
     cy: 50,
     r: 45,
     strokeWidth: "10px",
-    className: styles$Q['circular-progress__indicator'],
+    className: styles$T['circular-progress__indicator'],
     strokeDashoffset: "66",
     strokeDasharray: determinant + " " + (279 - determinant)
   })), React__default.createElement("div", {
-    className: styles$Q['circular-progress__label']
+    className: styles$T['circular-progress__label']
   }, children || metric.progress + "/" + metric.maxValue));
 };
 
-var styles$R = {"progress-bar":"_3nyZN","progress-bar__indicator":"_11TEp","progress-bar__steps":"_3XFTU"};
+var styles$U = {"progress-bar":"_3nyZN","progress-bar__indicator":"_11TEp","progress-bar__steps":"_3XFTU"};
 
 var ProgressBar = function ProgressBar(_ref) {
   var progress = _ref.progress,
@@ -8899,15 +8999,15 @@ var ProgressBar = function ProgressBar(_ref) {
       metric = _useProgress.metric;
 
   return React__default.createElement(Stack, null, React__default.createElement("div", Object.assign({}, elementProps, {
-    className: styles$R['progress-bar'],
+    className: styles$U['progress-bar'],
     "data-testid": testId
   }), React__default.createElement("div", {
-    className: styles$R['progress-bar__indicator'],
+    className: styles$U['progress-bar__indicator'],
     style: {
       width: metric.percentage + "%"
     }
   })), steps && steps.length > 0 && React__default.createElement("div", {
-    className: styles$R['progress-bar__steps']
+    className: styles$U['progress-bar__steps']
   }, steps.map(function (step) {
     return React__default.createElement("div", {
       key: step
@@ -8915,7 +9015,7 @@ var ProgressBar = function ProgressBar(_ref) {
   })));
 };
 
-var styles$S = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
+var styles$V = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
 
 var _excluded$2s = ["children", "theme", "title", "testId"];
 
@@ -8939,7 +9039,7 @@ var Badge = function Badge(_ref, forwardedRef) {
     overlay: title,
     ref: ref
   }, React__default.createElement("div", Object.assign({
-    className: classnames(styles$S['badge'], (_classnames = {}, _classnames[styles$S['badge--success']] = theme === 'success', _classnames[styles$S['badge--danger']] = theme === 'danger', _classnames[styles$S['badge--info']] = theme === 'info', _classnames[styles$S['badge--warning']] = theme === 'warning', _classnames)),
+    className: classnames(styles$V['badge'], (_classnames = {}, _classnames[styles$V['badge--success']] = theme === 'success', _classnames[styles$V['badge--danger']] = theme === 'danger', _classnames[styles$V['badge--info']] = theme === 'info', _classnames[styles$V['badge--warning']] = theme === 'warning', _classnames)),
     ref: ref,
     "data-testid": testId
   }, otherProps), children));
@@ -8947,9 +9047,9 @@ var Badge = function Badge(_ref, forwardedRef) {
 
 var Badge$1 = forwardRef(Badge);
 
-var styles$T = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
+var styles$W = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
 
-var styles$U = {"avatar-image":"_GKL9P"};
+var styles$X = {"avatar-image":"_GKL9P"};
 
 var AvatarImage = function AvatarImage(_ref) {
   var url = _ref.url,
@@ -8974,7 +9074,7 @@ var AvatarImage = function AvatarImage(_ref) {
   }
 
   return React__default.createElement("div", {
-    className: styles$U['avatar-image']
+    className: styles$X['avatar-image']
   }, React__default.createElement(IconUserSolid, {
     size: "flexible",
     color: color
@@ -9043,7 +9143,7 @@ var Avatar = function Avatar(_ref) {
 
   var backgroundColor = url ? GREY200 : color;
   return React__default.createElement("div", {
-    className: classnames(styles$T['avatar'], (_classnames = {}, _classnames[styles$T['avatar--small']] = size === 'small', _classnames[styles$T['avatar--medium']] = size === 'medium', _classnames[styles$T['avatar--large']] = size === 'large', _classnames[styles$T['avatar--extra-large']] = size === 'extra-large', _classnames)),
+    className: classnames(styles$W['avatar'], (_classnames = {}, _classnames[styles$W['avatar--small']] = size === 'small', _classnames[styles$W['avatar--medium']] = size === 'medium', _classnames[styles$W['avatar--large']] = size === 'large', _classnames[styles$W['avatar--extra-large']] = size === 'extra-large', _classnames)),
     style: {
       backgroundColor: children || url && !showIconInsteadOfImage ? backgroundColor : defaultProfilePictureColors.backgroundColor
     },
@@ -9056,7 +9156,7 @@ var Avatar = function Avatar(_ref) {
       return setShowIconInsteadOfImage(true);
     }
   }), badge && size !== 'small' && React__default.createElement("div", {
-    className: styles$T['avatar__badge']
+    className: styles$W['avatar__badge']
   }, badge));
 };
 
@@ -9069,7 +9169,7 @@ var CHIP_THEME = {
   DANGER: 'danger'
 };
 
-var styles$V = {"chip":"_1fIeV","chip--marketing":"_V4byU","chip--success":"_37gN9","chip--upsell":"_Tw7tp","chip--warning":"_t94VZ","chip--info":"_3SmeO","chip--danger":"_2eoX0"};
+var styles$Y = {"chip":"_1fIeV","chip--marketing":"_V4byU","chip--success":"_37gN9","chip--upsell":"_Tw7tp","chip--warning":"_t94VZ","chip--info":"_3SmeO","chip--danger":"_2eoX0"};
 
 var Chip = function Chip(_ref) {
   var _classnames;
@@ -9080,11 +9180,11 @@ var Chip = function Chip(_ref) {
       testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$V['chip'], (_classnames = {}, _classnames[styles$V['chip--marketing']] = theme === CHIP_THEME.MARKETING, _classnames[styles$V['chip--success']] = theme === CHIP_THEME.SUCCESS, _classnames[styles$V['chip--upsell']] = theme === CHIP_THEME.UPSELL, _classnames[styles$V['chip--warning']] = theme === CHIP_THEME.WARNING, _classnames[styles$V['chip--info']] = theme === CHIP_THEME.INFO, _classnames[styles$V['chip--danger']] = theme === CHIP_THEME.DANGER, _classnames))
+    className: classnames(styles$Y['chip'], (_classnames = {}, _classnames[styles$Y['chip--marketing']] = theme === CHIP_THEME.MARKETING, _classnames[styles$Y['chip--success']] = theme === CHIP_THEME.SUCCESS, _classnames[styles$Y['chip--upsell']] = theme === CHIP_THEME.UPSELL, _classnames[styles$Y['chip--warning']] = theme === CHIP_THEME.WARNING, _classnames[styles$Y['chip--info']] = theme === CHIP_THEME.INFO, _classnames[styles$Y['chip--danger']] = theme === CHIP_THEME.DANGER, _classnames))
   }, children);
 };
 
-var styles$W = {"pill":"_23q4Y","pill--default":"_niDEM","pill--success":"_IwDRB","pill--danger":"_MPji-","pill--warning":"_3S2m8","pill--info":"_2G3ML"};
+var styles$Z = {"pill":"_23q4Y","pill--default":"_niDEM","pill--success":"_IwDRB","pill--danger":"_MPji-","pill--warning":"_3S2m8","pill--info":"_2G3ML"};
 
 var PILL_THEME = {
   INFO: 'info',
@@ -9103,28 +9203,28 @@ var Pill = function Pill(_ref) {
       testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$W['pill'], (_classnames = {}, _classnames[styles$W['pill--default']] = theme === PILL_THEME.DEFAULT, _classnames[styles$W['pill--warning']] = theme === PILL_THEME.WARNING, _classnames[styles$W['pill--success']] = theme === PILL_THEME.SUCCESS, _classnames[styles$W['pill--danger']] = theme === PILL_THEME.DANGER, _classnames[styles$W['pill--info']] = theme === PILL_THEME.INFO, _classnames))
+    className: classnames(styles$Z['pill'], (_classnames = {}, _classnames[styles$Z['pill--default']] = theme === PILL_THEME.DEFAULT, _classnames[styles$Z['pill--warning']] = theme === PILL_THEME.WARNING, _classnames[styles$Z['pill--success']] = theme === PILL_THEME.SUCCESS, _classnames[styles$Z['pill--danger']] = theme === PILL_THEME.DANGER, _classnames[styles$Z['pill--info']] = theme === PILL_THEME.INFO, _classnames))
   }, children);
 };
 
 var Bold = function Bold(_ref) {
   var children = _ref.children;
   return React__default.createElement("span", {
-    className: classnames(styles$u['text--bold'], styles$u['text'])
+    className: classnames(styles$x['text--bold'], styles$x['text'])
   }, children);
 };
 
 var Underline = function Underline(_ref) {
   var children = _ref.children;
   return React__default.createElement("span", {
-    className: classnames(styles$u['text--underline'], styles$u['text'])
+    className: classnames(styles$x['text--underline'], styles$x['text'])
   }, children);
 };
 
 var Italic = function Italic(_ref) {
   var children = _ref.children;
   return React__default.createElement("span", {
-    className: classnames(styles$u['text--italic'], styles$u['text'])
+    className: classnames(styles$x['text--italic'], styles$x['text'])
   }, children);
 };
 
@@ -9134,9 +9234,9 @@ var EMPTY_STATE_SIZE = {
   LARGE: 'large'
 };
 
-var styles$X = {"empty-state-container-stack":"_2B8Vd","empty-state-container-stack__content":"_NBTDp","empty-state-container-stack__content--full-page":"_1UWbP","empty-state-container-stack__content--inline-horizontal":"_2BVOy","empty-state-container-stack__body":"_1LuiZ"};
+var styles$_ = {"empty-state-container-stack":"_2B8Vd","empty-state-container-stack__content":"_NBTDp","empty-state-container-stack__content--full-page":"_1UWbP","empty-state-container-stack__content--inline-horizontal":"_2BVOy","empty-state-container-stack__body":"_1LuiZ"};
 
-var styles$Y = {"empty-state-container-cta":"_1Cx9N"};
+var styles$$ = {"empty-state-container-cta":"_1Cx9N"};
 
 var EmptyStateContainerCTA = function EmptyStateContainerCTA(_ref) {
   var _actions$primary, _actions$secondary;
@@ -9152,7 +9252,7 @@ var EmptyStateContainerCTA = function EmptyStateContainerCTA(_ref) {
     size: BUTTON_SIZES.MIN_WIDTH_100
   });
   return React__default.createElement("div", {
-    className: styles$Y['empty-state-container-cta']
+    className: styles$$['empty-state-container-cta']
   }, primaryButton, secondaryButton);
 };
 
@@ -9167,7 +9267,7 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
       isPaywall = _ref$isPaywall === void 0 ? false : _ref$isPaywall,
       testId = _ref.testId;
   return React__default.createElement("div", {
-    className: styles$X['empty-state-container-stack'],
+    className: styles$_['empty-state-container-stack'],
     "data-testid": testId
   }, React__default.createElement("img", {
     src: mediaUrl,
@@ -9183,7 +9283,7 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
     emphasis: "bold",
     as: "body"
   }, title), React__default.createElement("div", {
-    className: styles$X['empty-state-container-stack__body']
+    className: styles$_['empty-state-container-stack__body']
   }, children)), React__default.createElement(Stack, {
     space: 8,
     alignItems: "center"
@@ -9195,7 +9295,7 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
   }, caption)));
 };
 
-var styles$Z = {"empty-state-container-inline":"_eMr1V","empty-state-container-inline__content":"_2jreb","empty-state-container-inline__content--full-page":"_3RLfH","empty-state-container-inline__content--inline-horizontal":"_3BMpx","empty-state-container-inline__body":"_2J5vn"};
+var styles$10 = {"empty-state-container-inline":"_eMr1V","empty-state-container-inline__content":"_2jreb","empty-state-container-inline__content--full-page":"_3RLfH","empty-state-container-inline__content--inline-horizontal":"_3BMpx","empty-state-container-inline__body":"_2J5vn"};
 
 var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
   var _classnames;
@@ -9212,10 +9312,10 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
       isPaywall = _ref$isPaywall === void 0 ? false : _ref$isPaywall,
       testId = _ref.testId;
   return React__default.createElement("div", {
-    className: styles$Z['empty-state-container-inline'],
+    className: styles$10['empty-state-container-inline'],
     "data-testid": testId
   }, React__default.createElement("div", {
-    className: classnames(styles$Z['empty-state-container-inline__content'], (_classnames = {}, _classnames[styles$Z['empty-state-container__content--full-page']] = size === EMPTY_STATE_SIZE.LARGE, _classnames[styles$Z['empty-state-container__content--inline-horizontal']] = size === EMPTY_STATE_SIZE.MEDIUM, _classnames))
+    className: classnames(styles$10['empty-state-container-inline__content'], (_classnames = {}, _classnames[styles$10['empty-state-container__content--full-page']] = size === EMPTY_STATE_SIZE.LARGE, _classnames[styles$10['empty-state-container__content--inline-horizontal']] = size === EMPTY_STATE_SIZE.MEDIUM, _classnames))
   }, React__default.createElement(Stack, {
     space: 8
   }, header && React__default.createElement(Text, {
@@ -9224,7 +9324,7 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
   }, header), React__default.createElement(Text, {
     as: "h1"
   }, title)), React__default.createElement("div", {
-    className: styles$Z['empty-state-container-inline__body']
+    className: styles$10['empty-state-container-inline__body']
   }, children), React__default.createElement(Stack, {
     space: 8
   }, actions && React__default.createElement(EmptyStateContainerCTA, {