@7shifts/sous-chef 3.6.0 → 3.8.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,282 +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.map(children, 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 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"};
 
@@ -4833,6 +4560,18 @@ var ModalBody = function ModalBody(_ref) {
 
 var styles$g = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
 
+var updateButtonProps = function updateButtonProps(button, newProps) {
+  if (!button) {
+    return null;
+  }
+
+  if (button.type !== Button$1) {
+    return button;
+  }
+
+  return React__default.cloneElement(button, _extends({}, newProps));
+};
+
 var ModalFooter = function ModalFooter(_ref) {
   var children = _ref.children,
       actions = _ref.actions,
@@ -4842,13 +4581,16 @@ var ModalFooter = function ModalFooter(_ref) {
     var _actions$primary, _actions$secondary, _actions$tertiary, _classnames;
 
     var primaryButton = updateButtonProps(actions.primary, {
-      theme: (actions === null || actions === void 0 ? void 0 : (_actions$primary = actions.primary) === null || _actions$primary === void 0 ? void 0 : _actions$primary.props.theme) || 'primary'
+      theme: (actions === null || actions === void 0 ? void 0 : (_actions$primary = actions.primary) === null || _actions$primary === void 0 ? void 0 : _actions$primary.props.theme) || 'primary',
+      size: BUTTON_SIZES.MIN_WIDTH_100
     });
     var secondaryButton = updateButtonProps(actions.secondary, {
-      theme: (actions === null || actions === void 0 ? void 0 : (_actions$secondary = actions.secondary) === null || _actions$secondary === void 0 ? void 0 : _actions$secondary.props.theme) || 'default'
+      theme: (actions === null || actions === void 0 ? void 0 : (_actions$secondary = actions.secondary) === null || _actions$secondary === void 0 ? void 0 : _actions$secondary.props.theme) || 'default',
+      size: BUTTON_SIZES.MIN_WIDTH_100
     });
     var tertiaryButton = updateButtonProps(actions.tertiary, {
-      theme: (actions === null || actions === void 0 ? void 0 : (_actions$tertiary = actions.tertiary) === null || _actions$tertiary === void 0 ? void 0 : _actions$tertiary.props.theme) || 'link-primary'
+      theme: (actions === null || actions === void 0 ? void 0 : (_actions$tertiary = actions.tertiary) === null || _actions$tertiary === void 0 ? void 0 : _actions$tertiary.props.theme) || 'link-primary',
+      size: BUTTON_SIZES.MIN_WIDTH_100
     });
     return React__default.createElement(FooterContainer, {
       testId: testId
@@ -4864,20 +4606,6 @@ var ModalFooter = function ModalFooter(_ref) {
   return React__default.createElement(FooterContainer, null, children);
 };
 
-var updateButtonProps = function updateButtonProps(button, newProps) {
-  if (!button) {
-    return null;
-  }
-
-  if (button.type !== Button$1) {
-    return button;
-  }
-
-  return React__default.cloneElement(button, _extends({
-    size: BUTTON_SIZES.MIN_WIDTH_100
-  }, newProps));
-};
-
 var FooterContainer = function FooterContainer(_ref2) {
   var children = _ref2.children,
       testId = _ref2.testId;
@@ -5093,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);
-
-  if (hasError) {
-    return React__default.createElement(Tooltip$1, {
-      overlay: errorMessage,
-      delayOnClose: delayOnCloseError,
-      placement: "top",
-      theme: "white"
-    }, TableCell);
-  }
-
-  return TableCell;
+  }));
+  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);
 };
 
 var DataTableCell = forwardRef(DataTableCellElement);
 
+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 Context$1 = createContext({});
 var useFormContext = function useFormContext() {
   var context = useContext(Context$1);
@@ -5406,100 +5177,425 @@ var AffixContainer = function AffixContainer(_ref) {
     return children;
   }
 
-  var classes = classnames(styles$m['affix-container'], (_classnames = {}, _classnames[styles$m['affix-container--prefixed']] = hasPrefix, _classnames[styles$m['affix-container--suffixed']] = hasSuffix, _classnames));
+  var classes = classnames(styles$m['affix-container'], (_classnames = {}, _classnames[styles$m['affix-container--prefixed']] = hasPrefix, _classnames[styles$m['affix-container--suffixed']] = hasSuffix, _classnames));
+  return React__default.createElement("div", {
+    className: classes,
+    ref: container,
+    "data-testid": testId
+  }, hasPrefix && React__default.createElement("div", {
+    className: styles$m['prefix'],
+    ref: prefixElement
+  }, prefix), children, hasSuffix && React__default.createElement("div", {
+    className: styles$m['suffix'],
+    ref: suffixElement
+  }, suffix));
+};
+
+var styles$n = {"data-table-editable-cell":"_qYNve","data-table-editable-cell--right-aligned":"_3w6bw","data-table-editable-cell--currency":"_2y-_5","data-table-editable-cell--invalid":"_1Mx8j","data-table-editable-cell--top-left":"_2BlhN","data-table-editable-cell--top-right":"_1qDoN","data-table-editable-cell--bottom-left":"_2NUlb","data-table-editable-cell--bottom-right":"_3Mm-v"};
+
+var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, ref) {
+  var _columns$columnIndex, _controllers$error, _classnames, _classnames2;
+
+  var name = _ref.name,
+      columnIndex = _ref.columnIndex,
+      rowIndex = _ref.rowIndex,
+      inputId = _ref.id,
+      value = _ref.value,
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
+      placeholder = _ref.placeholder,
+      disabled = _ref.disabled,
+      error = _ref.error,
+      prefix = _ref.prefix,
+      suffix = _ref.suffix,
+      defaultValue = _ref.defaultValue,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type,
+      testId = _ref.testId;
+
+  var _useDataTableContext = useDataTableContext(),
+      columns = _useDataTableContext.columns,
+      numberOfRows = _useDataTableContext.numberOfRows;
+
+  var column = (_columns$columnIndex = columns === null || columns === void 0 ? void 0 : columns[columnIndex]) != null ? _columns$columnIndex : null;
+  var isRightAligned = column ? column.isRightAligned : false;
+  var numberOfColumns = (columns === null || columns === void 0 ? void 0 : columns.length) || 0;
+  var isTopLeftCell = columnIndex === 0 && rowIndex === 0;
+  var isTopRightCell = columnIndex === numberOfColumns - 1 && rowIndex === 0;
+  var isBottomLeftCell = columnIndex === 0 && rowIndex === numberOfRows - 1;
+  var isBottomRightCell = columnIndex === numberOfColumns - 1 && rowIndex === numberOfRows - 1;
+  var controllers = useFieldControllers({
+    name: name,
+    id: inputId,
+    value: value,
+    onChange: onChange,
+    onBlur: onBlur,
+    error: error,
+    type: type
+  });
+  var hasError = !!controllers.error;
+  var errorMessage = (_controllers$error = controllers.error) === null || _controllers$error === void 0 ? void 0 : _controllers$error.toString();
+  var fieldProps = {
+    name: name,
+    id: controllers.id
+  };
+  var EditableCell = React__default.createElement("div", {
+    className: classnames((_classnames = {}, _classnames[styles$n['data-table-editable-cell--currency']] = type === 'currency', _classnames), styles$n['data-table-editable-cell']),
+    "data-testid": testId,
+    role: "cell"
+  }, React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
+    prefix: prefix,
+    suffix: suffix
+  }, React__default.createElement("input", {
+    name: name,
+    id: controllers.id,
+    className: classnames((_classnames2 = {}, _classnames2[styles$n['data-table-editable-cell--right-aligned']] = isRightAligned, _classnames2[styles$n['data-table-editable-cell--top-left']] = isTopLeftCell, _classnames2[styles$n['data-table-editable-cell--top-right']] = isTopRightCell, _classnames2[styles$n['data-table-editable-cell--bottom-left']] = isBottomLeftCell, _classnames2[styles$n['data-table-editable-cell--bottom-right']] = isBottomRightCell, _classnames2[styles$n['data-table-editable-cell--invalid']] = hasError, _classnames2)),
+    type: type === 'currency' ? 'number' : 'text',
+    step: type === 'currency' ? 'any' : '',
+    "data-testid": testId && testId + "-text-field",
+    "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
+    "aria-invalid": hasError,
+    disabled: disabled,
+    placeholder: placeholder,
+    defaultValue: defaultValue,
+    value: controllers.value,
+    onChange: controllers.onChange,
+    onBlur: controllers.onBlur,
+    ref: ref
+  }))));
+  return React__default.createElement(Tooltip$1, {
+    overlay: errorMessage,
+    placement: "top",
+    theme: "white"
+  }, EditableCell);
+};
+
+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: classes,
-    ref: container,
-    "data-testid": testId
-  }, hasPrefix && React__default.createElement("div", {
-    className: styles$m['prefix'],
-    ref: prefixElement
-  }, prefix), children, hasSuffix && React__default.createElement("div", {
-    className: styles$m['suffix'],
-    ref: suffixElement
-  }, suffix));
+    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$n = {"data-table-editable-cell":"_qYNve","data-table-editable-cell--right-aligned":"_3w6bw","data-table-editable-cell--currency":"_2y-_5","data-table-editable-cell--invalid":"_1Mx8j","data-table-editable-cell--top-left":"_2BlhN","data-table-editable-cell--top-right":"_1qDoN","data-table-editable-cell--bottom-left":"_2NUlb","data-table-editable-cell--bottom-right":"_3Mm-v"};
+var styles$q = {"data-table-loading-block":"_94pbt"};
 
-var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, ref) {
-  var _columns$columnIndex, _controllers$error, _classnames, _classnames2;
+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 name = _ref.name,
-      columnIndex = _ref.columnIndex,
-      rowIndex = _ref.rowIndex,
-      inputId = _ref.id,
-      value = _ref.value,
-      onChange = _ref.onChange,
-      onBlur = _ref.onBlur,
-      placeholder = _ref.placeholder,
-      disabled = _ref.disabled,
-      error = _ref.error,
-      prefix = _ref.prefix,
-      suffix = _ref.suffix,
-      defaultValue = _ref.defaultValue,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type,
+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;
 
-  var _useDataTableContext = useDataTableContext(),
-      columns = _useDataTableContext.columns,
-      numberOfRows = _useDataTableContext.numberOfRows;
+  if (isScrollableTable) {
+    conditionalStyles = _extends({}, conditionalStyles, {
+      maxHeight: maxHeight,
+      overflowY: 'auto'
+    });
+  }
 
-  var column = (_columns$columnIndex = columns === null || columns === void 0 ? void 0 : columns[columnIndex]) != null ? _columns$columnIndex : null;
-  var isRightAligned = column ? column.isRightAligned : false;
-  var numberOfColumns = (columns === null || columns === void 0 ? void 0 : columns.length) || 0;
-  var isTopLeftCell = columnIndex === 0 && rowIndex === 0;
-  var isTopRightCell = columnIndex === numberOfColumns - 1 && rowIndex === 0;
-  var isBottomLeftCell = columnIndex === 0 && rowIndex === numberOfRows - 1;
-  var isBottomRightCell = columnIndex === numberOfColumns - 1 && rowIndex === numberOfRows - 1;
-  var controllers = useFieldControllers({
-    name: name,
-    id: inputId,
-    value: value,
-    onChange: onChange,
-    onBlur: onBlur,
-    error: error,
-    type: type
-  });
-  var hasError = !!controllers.error;
-  var errorMessage = (_controllers$error = controllers.error) === null || _controllers$error === void 0 ? void 0 : _controllers$error.toString();
-  var fieldProps = {
-    name: name,
-    id: controllers.id
-  };
-  var EditableCell = React__default.createElement("div", {
-    className: classnames((_classnames = {}, _classnames[styles$n['data-table-editable-cell--currency']] = type === 'currency', _classnames), styles$n['data-table-editable-cell']),
-    "data-testid": testId,
-    role: "cell"
-  }, React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
-    prefix: prefix,
-    suffix: suffix
-  }, React__default.createElement("input", {
-    name: name,
-    id: controllers.id,
-    className: classnames((_classnames2 = {}, _classnames2[styles$n['data-table-editable-cell--right-aligned']] = isRightAligned, _classnames2[styles$n['data-table-editable-cell--top-left']] = isTopLeftCell, _classnames2[styles$n['data-table-editable-cell--top-right']] = isTopRightCell, _classnames2[styles$n['data-table-editable-cell--bottom-left']] = isBottomLeftCell, _classnames2[styles$n['data-table-editable-cell--bottom-right']] = isBottomRightCell, _classnames2[styles$n['data-table-editable-cell--invalid']] = hasError, _classnames2)),
-    type: type === 'currency' ? 'number' : 'text',
-    step: type === 'currency' ? 'any' : '',
-    "data-testid": testId && testId + "-text-field",
-    "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
-    "aria-invalid": hasError,
-    disabled: disabled,
-    placeholder: placeholder,
-    defaultValue: defaultValue,
-    value: controllers.value,
-    onChange: controllers.onChange,
-    onBlur: controllers.onBlur,
-    ref: ref
-  }))));
-  return React__default.createElement(Tooltip$1, {
-    overlay: errorMessage,
-    placement: "top",
-    theme: "white"
-  }, EditableCell);
+  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 DataTableEditableCell = forwardRef(DataTableEditableCellElement);
+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,
@@ -5705,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',
@@ -5769,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
@@ -5787,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;
@@ -5822,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);
     }
@@ -5858,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, {
@@ -5899,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,
@@ -5916,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;
@@ -5927,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"];
 
@@ -5953,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
   })));
@@ -5993,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"];
 
@@ -6014,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];
@@ -6030,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,
@@ -6043,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));
 };
 
@@ -6085,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',
@@ -6108,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
@@ -6128,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;
@@ -6140,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));
 };
 
@@ -6165,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;
@@ -6200,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
@@ -6242,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%';
@@ -6278,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,
@@ -6287,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);
@@ -6363,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)) {
@@ -6395,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) {
@@ -6544,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,
@@ -6574,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,
@@ -6587,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, {
@@ -6600,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,
@@ -6692,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,
@@ -6714,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));
   })));
 };
@@ -6762,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,
@@ -6779,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,
@@ -6790,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",
@@ -6799,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,
@@ -6824,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,
@@ -6835,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)));
@@ -6974,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, {
@@ -6987,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;
@@ -6997,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, {
@@ -7082,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",
@@ -7098,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",
@@ -7357,7 +7453,7 @@ var MultiSelectField = function MultiSelectField(_ref) {
   }));
 };
 
-var styles$J = {"custom-control":"_1cDCR"};
+var styles$M = {"custom-control":"_1cDCR"};
 
 var _excluded$2k = ["children"];
 
@@ -7370,7 +7466,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
     }
@@ -7383,7 +7479,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"];
 
@@ -7443,15 +7539,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",
@@ -7602,7 +7698,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"];
 
@@ -7621,7 +7717,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')))));
 };
 
@@ -7977,7 +8073,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,
@@ -8016,7 +8112,7 @@ var FromDate = function FromDate(_ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$M,
+    classNames: styles$P,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -8043,7 +8139,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,
@@ -8117,7 +8213,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) {
@@ -8136,7 +8232,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,
@@ -8221,7 +8317,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",
@@ -8445,11 +8541,13 @@ var TimeFieldElement = function TimeFieldElement(_ref, ref) {
 
 var TimeField = forwardRef(TimeFieldElement);
 
-var _excluded$2p = ["currencySymbol"];
+var _excluded$2p = ["currencySymbol", "step"];
 
 var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
   var _ref$currencySymbol = _ref.currencySymbol,
-      currencySymbol = _ref$currencySymbol === void 0 ? "$" : _ref$currencySymbol,
+      currencySymbol = _ref$currencySymbol === void 0 ? '$' : _ref$currencySymbol,
+      _ref$step = _ref.step,
+      step = _ref$step === void 0 ? 0.01 : _ref$step,
       allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2p);
 
   var _useTextField = useTextField(_extends({}, allOtherProps, {
@@ -8458,15 +8556,18 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
       inputProps = _useTextField.inputProps,
       fieldProps = _useTextField.fieldProps;
 
+  var isWholeNumber = Number.isInteger(step);
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
     prefix: currencySymbol
   }, React__default.createElement("input", Object.assign({}, inputProps, {
-    type: 'number',
-    inputMode: 'decimal',
-    step: '0.01',
+    type: "number",
+    inputMode: "decimal",
+    step: step,
     min: 0,
     onKeyDown: function onKeyDown(e) {
-      if (e.key === 'e' || e.key === '-') {
+      var isAddingDecimalsOnWholeNumber = isWholeNumber && (e.key === '.' || e.key === ',');
+
+      if (e.key === 'e' || e.key === '-' || isAddingDecimalsOnWholeNumber) {
         e.preventDefault();
         return;
       }
@@ -8474,7 +8575,7 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
       inputProps.onKeyDown(e);
     },
     onBlur: function onBlur(e) {
-      e.currentTarget.value = parseFloat(e.currentTarget.value).toFixed(2);
+      e.currentTarget.value = parseFloat(e.currentTarget.value).toFixed(isWholeNumber ? 0 : 2);
       inputProps.onChange(e);
       inputProps.onBlur(e);
     }
@@ -8596,7 +8697,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,
@@ -8619,7 +8720,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,
@@ -8650,7 +8751,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));
 };
 
@@ -8697,14 +8798,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, {
@@ -8714,9 +8815,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,
@@ -8724,7 +8825,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",
@@ -8738,7 +8839,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;
@@ -8767,7 +8868,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],
@@ -8839,7 +8940,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,
@@ -8854,7 +8955,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"
@@ -8863,21 +8964,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,
@@ -8892,15 +8993,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
@@ -8908,7 +9009,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"];
 
@@ -8932,7 +9033,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));
@@ -8940,9 +9041,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,
@@ -8967,7 +9068,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
@@ -9036,7 +9137,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
     },
@@ -9049,7 +9150,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));
 };
 
@@ -9062,7 +9163,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;
@@ -9073,11 +9174,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',
@@ -9096,30 +9197,207 @@ 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);
+};
+
+var EMPTY_STATE_SIZE = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+};
+
+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$$ = {"empty-state-container-cta":"_1Cx9N"};
+
+var EmptyStateContainerCTA = function EmptyStateContainerCTA(_ref) {
+  var _actions$primary, _actions$secondary;
+
+  var isPaywall = _ref.isPaywall,
+      actions = _ref.actions;
+  var primaryButton = updateButtonProps(actions.primary, {
+    theme: actions !== null && actions !== void 0 && (_actions$primary = actions.primary) !== null && _actions$primary !== void 0 && _actions$primary.props.theme || isPaywall ? 'upsell' : 'primary',
+    size: BUTTON_SIZES.MIN_WIDTH_100
+  });
+  var secondaryButton = updateButtonProps(actions.secondary, {
+    theme: (actions === null || actions === void 0 ? void 0 : (_actions$secondary = actions.secondary) === null || _actions$secondary === void 0 ? void 0 : _actions$secondary.props.theme) || 'default',
+    size: BUTTON_SIZES.MIN_WIDTH_100
+  });
+  return React__default.createElement("div", {
+    className: styles$$['empty-state-container-cta']
+  }, primaryButton, secondaryButton);
+};
+
+var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
+  var header = _ref.header,
+      title = _ref.title,
+      children = _ref.children,
+      mediaUrl = _ref.mediaUrl,
+      actions = _ref.actions,
+      caption = _ref.caption,
+      _ref$isPaywall = _ref.isPaywall,
+      isPaywall = _ref$isPaywall === void 0 ? false : _ref$isPaywall,
+      testId = _ref.testId;
+  return React__default.createElement("div", {
+    className: styles$_['empty-state-container-stack'],
+    "data-testid": testId
+  }, React__default.createElement("img", {
+    src: mediaUrl,
+    alt: String(title),
+    width: "200px"
+  }), React__default.createElement(Stack, {
+    space: 8,
+    alignItems: "center"
+  }, header && React__default.createElement(Text, {
+    as: "h4",
+    color: isPaywall && EGGPLANT500
+  }, header), React__default.createElement(Text, {
+    emphasis: "bold",
+    as: "body"
+  }, title), React__default.createElement("div", {
+    className: styles$_['empty-state-container-stack__body']
+  }, children)), React__default.createElement(Stack, {
+    space: 8,
+    alignItems: "center"
+  }, actions && React__default.createElement(EmptyStateContainerCTA, {
+    actions: actions,
+    isPaywall: isPaywall
+  }), caption && React__default.createElement(Text, {
+    as: "caption"
+  }, caption)));
+};
+
+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;
+
+  var header = _ref.header,
+      title = _ref.title,
+      children = _ref.children,
+      mediaUrl = _ref.mediaUrl,
+      actions = _ref.actions,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? EMPTY_STATE_SIZE.LARGE : _ref$size,
+      caption = _ref.caption,
+      _ref$isPaywall = _ref.isPaywall,
+      isPaywall = _ref$isPaywall === void 0 ? false : _ref$isPaywall,
+      testId = _ref.testId;
+  return React__default.createElement("div", {
+    className: styles$10['empty-state-container-inline'],
+    "data-testid": testId
+  }, React__default.createElement("div", {
+    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, {
+    as: "h4",
+    color: isPaywall && EGGPLANT500
+  }, header), React__default.createElement(Text, {
+    as: "h1"
+  }, title)), React__default.createElement("div", {
+    className: styles$10['empty-state-container-inline__body']
+  }, children), React__default.createElement(Stack, {
+    space: 8
+  }, actions && React__default.createElement(EmptyStateContainerCTA, {
+    actions: actions,
+    isPaywall: isPaywall
+  }), caption && React__default.createElement(Text, {
+    as: "caption"
+  }, caption))), React__default.createElement("img", {
+    src: mediaUrl,
+    alt: String(title),
+    width: size === EMPTY_STATE_SIZE.LARGE ? '500px' : '333px'
+  }));
+};
+
+var EmptyStateContainer = function EmptyStateContainer(_ref) {
+  var header = _ref.header,
+      title = _ref.title,
+      children = _ref.children,
+      mediaUrl = _ref.mediaUrl,
+      actions = _ref.actions,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? EMPTY_STATE_SIZE.LARGE : _ref$size,
+      caption = _ref.caption,
+      _ref$isPaywall = _ref.isPaywall,
+      isPaywall = _ref$isPaywall === void 0 ? false : _ref$isPaywall,
+      testId = _ref.testId;
+  var isSmallSpot = size === EMPTY_STATE_SIZE.SMALL;
+  var EmptyStateComponent = isSmallSpot ? EmptyStateContainerStack : EmptyStateContainerInline;
+  return React__default.createElement(EmptyStateComponent, {
+    header: header,
+    title: title,
+    children: children,
+    mediaUrl: mediaUrl,
+    actions: actions,
+    size: size,
+    caption: caption,
+    isPaywall: isPaywall,
+    testId: testId
+  });
+};
+
+var Paywall = function Paywall(_ref) {
+  var header = _ref.header,
+      title = _ref.title,
+      children = _ref.children,
+      mediaUrl = _ref.mediaUrl,
+      actions = _ref.actions,
+      size = _ref.size,
+      caption = _ref.caption,
+      testId = _ref.testId;
+  return React__default.createElement(EmptyStateContainer, {
+    header: header,
+    title: title,
+    mediaUrl: mediaUrl,
+    actions: actions,
+    size: size,
+    caption: caption,
+    isPaywall: true,
+    testId: testId
+  }, children);
+};
+
+var EmptyState = function EmptyState(_ref) {
+  var title = _ref.title,
+      children = _ref.children,
+      mediaUrl = _ref.mediaUrl,
+      actions = _ref.actions,
+      caption = _ref.caption,
+      size = _ref.size,
+      testId = _ref.testId;
+  return React__default.createElement(EmptyStateContainer, {
+    title: title,
+    mediaUrl: mediaUrl,
+    actions: actions,
+    caption: caption,
+    size: size,
+    testId: testId
   }, children);
 };
 
-export { AsyncSelectField, Avatar, Badge$1 as Badge, Bold, BreadcrumbItem, Breadcrumbs, Button$1 as Button, Calendar, Card, CheckboxField, Chip, CircularProgress, CurrencyField, DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateFilter, DateRangeField, Form, FormFeedback, FormFooter, FormRow, FormSection, IconAnalytics, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowTurnDownRight, IconArrowUp, IconAward, IconAwful, IconAwfulMonochromatic, IconBad, IconBadMonochromatic, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClipboardList, IconClock, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDecent, IconDecentMonochromatic, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGood, IconGoodMonochromatic, IconGreat, IconGreatMonochromatic, IconGrinBeam, IconGripVertical, IconHandshake, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMegaphone, IconMessages, IconMinus, IconMinusCircle, IconMoneyBill, IconMugSaucerSolid, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSearch, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Italic, Link, Modal, ModalBody, ModalFooter, MultiSelectField, Page, PaginationControls, PasswordField, PercentageField, PersistentBanner, Pill, PillSelectField, ProgressBar, RadioGroupBoxOption, RadioGroupField, RadioGroupOption, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SegmentedControl, SelectField, SousChefProvider, Spinner, Stack, Text, TextAreaField, TextField, TimeField, Toggle, ToolbarSelect, Tooltip$1 as Tooltip, Underline, WeekField, toast };
+export { AsyncSelectField, Avatar, Badge$1 as Badge, Bold, BreadcrumbItem, Breadcrumbs, Button$1 as Button, Calendar, Card, CheckboxField, Chip, CircularProgress, CurrencyField, DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateFilter, DateRangeField, EmptyState, Form, FormFeedback, FormFooter, FormRow, FormSection, IconAnalytics, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowTurnDownRight, IconArrowUp, IconAward, IconAwful, IconAwfulMonochromatic, IconBad, IconBadMonochromatic, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClipboardList, IconClock, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDecent, IconDecentMonochromatic, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGood, IconGoodMonochromatic, IconGreat, IconGreatMonochromatic, IconGrinBeam, IconGripVertical, IconHandshake, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMegaphone, IconMessages, IconMinus, IconMinusCircle, IconMoneyBill, IconMugSaucerSolid, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSearch, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Italic, Link, Modal, ModalBody, ModalFooter, MultiSelectField, Page, PaginationControls, PasswordField, Paywall, PercentageField, PersistentBanner, Pill, PillSelectField, ProgressBar, RadioGroupBoxOption, RadioGroupField, RadioGroupOption, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SegmentedControl, SelectField, SousChefProvider, Spinner, Stack, Text, TextAreaField, TextField, TimeField, Toggle, ToolbarSelect, Tooltip$1 as Tooltip, Underline, WeekField, toast };
 //# sourceMappingURL=index.modern.js.map