@7shifts/sous-chef 3.6.0 → 3.8.0

package/dist/index.js

@@ -4280,7 +4280,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() {},
@@ -4310,7 +4312,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,
@@ -4326,7 +4328,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,
@@ -4418,7 +4420,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
@@ -4435,282 +4437,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 = React.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"};
 
@@ -4838,6 +4565,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,
@@ -4847,13 +4586,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
@@ -4869,20 +4611,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;
@@ -5098,44 +4826,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 = React.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 = React.createContext({});
 var useFormContext = function useFormContext() {
   var context = React.useContext(Context$1);
@@ -5411,100 +5182,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 = React.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 = React.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(React.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 = React.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,
@@ -5710,9 +5806,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',
@@ -5774,14 +5870,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
@@ -5792,7 +5888,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;
@@ -5827,7 +5923,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);
     }
@@ -5863,7 +5959,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, {
@@ -5904,7 +6000,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,
@@ -5921,7 +6017,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;
@@ -5932,16 +6028,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"];
 
@@ -5958,18 +6054,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
   })));
@@ -5998,7 +6094,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"];
 
@@ -6019,7 +6115,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];
@@ -6035,7 +6131,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,
@@ -6048,24 +6144,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(reactRouterDom.Link, {
     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));
 };
 
@@ -6090,7 +6186,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',
@@ -6113,7 +6209,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
@@ -6133,7 +6229,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;
@@ -6145,14 +6241,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));
 };
 
@@ -6170,7 +6266,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;
@@ -6205,7 +6301,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
@@ -6247,12 +6343,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%';
@@ -6283,7 +6379,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,
@@ -6292,7 +6388,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 = React.useRef(null);
@@ -6368,7 +6464,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)) {
@@ -6400,7 +6496,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) {
@@ -6549,7 +6645,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,
@@ -6579,7 +6675,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,
@@ -6592,12 +6688,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, {
@@ -6605,7 +6701,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,
@@ -6697,7 +6793,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,
@@ -6719,7 +6815,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));
   })));
 };
@@ -6767,9 +6863,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,
@@ -6784,7 +6880,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,
@@ -6795,7 +6891,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",
@@ -6804,13 +6900,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,
@@ -6829,7 +6925,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,
@@ -6840,11 +6936,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)));
@@ -6979,7 +7075,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, {
@@ -6992,9 +7088,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;
@@ -7002,7 +7098,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, {
@@ -7087,11 +7183,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",
@@ -7103,7 +7199,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",
@@ -7362,7 +7458,7 @@ var MultiSelectField = function MultiSelectField(_ref) {
   }));
 };
 
-var styles$J = {"custom-control":"_1cDCR"};
+var styles$M = {"custom-control":"_1cDCR"};
 
 var _excluded$2k = ["children"];
 
@@ -7375,7 +7471,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(Select.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
     }
@@ -7388,7 +7484,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"];
 
@@ -7448,15 +7544,15 @@ function CustomMenu(_ref) {
   return React__default.createElement(Select.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",
@@ -7607,7 +7703,7 @@ var SelectField = function SelectField(props) {
   }, React__default.createElement(Select__default, Object.assign({}, selectProps))));
 };
 
-var styles$L = {"custom-list":"_uC4zU"};
+var styles$O = {"custom-list":"_uC4zU"};
 
 var _excluded$2m = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
 
@@ -7626,7 +7722,7 @@ var CustomList = function CustomList(_ref) {
   return React__default.createElement(Select.components.MenuList, Object.assign({}, props), React__default.createElement(React.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')))));
 };
 
@@ -7982,7 +8078,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,
@@ -8021,7 +8117,7 @@ var FromDate = function FromDate(_ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$M,
+    classNames: styles$P,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -8048,7 +8144,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,
@@ -8122,7 +8218,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) {
@@ -8141,7 +8237,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,
@@ -8226,7 +8322,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",
@@ -8450,11 +8546,13 @@ var TimeFieldElement = function TimeFieldElement(_ref, ref) {
 
 var TimeField = React.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, {
@@ -8463,15 +8561,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;
       }
@@ -8479,7 +8580,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);
     }
@@ -8601,7 +8702,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,
@@ -8624,7 +8725,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,
@@ -8655,7 +8756,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));
 };
 
@@ -8702,14 +8803,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, {
@@ -8719,9 +8820,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,
@@ -8729,7 +8830,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",
@@ -8743,7 +8844,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;
@@ -8772,7 +8873,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],
@@ -8844,7 +8945,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,
@@ -8859,7 +8960,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"
@@ -8868,21 +8969,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,
@@ -8897,15 +8998,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
@@ -8913,7 +9014,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"];
 
@@ -8937,7 +9038,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));
@@ -8945,9 +9046,9 @@ var Badge = function Badge(_ref, forwardedRef) {
 
 var Badge$1 = React.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,
@@ -8972,7 +9073,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
@@ -9041,7 +9142,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
     },
@@ -9054,7 +9155,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));
 };
 
@@ -9067,7 +9168,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;
@@ -9078,11 +9179,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',
@@ -9101,28 +9202,205 @@ 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);
 };
 
@@ -9146,6 +9424,7 @@ exports.DataTableRow = DataTableRow;
 exports.DateField = DateField;
 exports.DateFilter = DateFilter;
 exports.DateRangeField = DateRangeField;
+exports.EmptyState = EmptyState;
 exports.Form = Form;
 exports.FormFeedback = FormFeedback;
 exports.FormFooter = FormFooter;
@@ -9302,6 +9581,7 @@ exports.MultiSelectField = MultiSelectField;
 exports.Page = Page;
 exports.PaginationControls = PaginationControls;
 exports.PasswordField = PasswordField;
+exports.Paywall = Paywall;
 exports.PercentageField = PercentageField;
 exports.PersistentBanner = PersistentBanner;
 exports.Pill = Pill;