@7shifts/sous-chef 3.11.2 → 3.13.0

package/dist/index.modern.js

@@ -3,14 +3,14 @@ import classnames from 'classnames';
 import { toast as toast$1, ToastContainer as ToastContainer$1, Slide } from 'react-toastify';
 import ReactDOM from 'react-dom';
 import 'react-toastify/dist/ReactToastify.css';
+import { debounce } from 'lodash-es';
+import parseTime from 'time-autocomplete/src/core/AMPMParser';
 import ReactModal from 'react-modal';
 import DayPicker, { DateUtils } from 'react-day-picker';
 import 'react-day-picker/lib/style.css';
 import dateFnsFormat from 'date-fns/format';
 import dateFnsParse from 'date-fns/parse';
 import startOfDay from 'date-fns/startOfDay';
-import { debounce } from 'lodash-es';
-import parseTime from 'time-autocomplete/src/core/AMPMParser';
 import Select, { components } from 'react-select';
 import { Link as Link$1 } from 'react-router-dom';
 import AsyncSelect from 'react-select/async';
@@ -18,6 +18,8 @@ import DayPickerInput from 'react-day-picker/DayPickerInput';
 import { isDate, startOfDay as startOfDay$1 } from 'date-fns';
 import eachDayOfInterval from 'date-fns/eachDayOfInterval';
 
+var COLORS = {};
+
 function _extends() {
   _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -762,6 +764,14 @@ var ButtonElement = forwardRef(function (_ref2, ref) {
 });
 var Button$1 = forwardRef(Button);
 
+var getColor = function getColor(color) {
+  if (color && COLORS[color]) {
+    return COLORS[color];
+  } else {
+    return color;
+  }
+};
+
 var ICON_SIZES = {
   small: '12px',
   medium: '16px',
@@ -780,7 +790,8 @@ var getIconStyles = function getIconStyles(_ref) {
     width: ICON_SIZES[size],
     height: ICON_SIZES[size],
     verticalAlign: 'middle',
-    fill: color
+    fill: color,
+    color: getColor(color)
   }, styles);
 };
 
@@ -931,7 +942,8 @@ var IconArrowTurnDownRight = forwardRef(function (_ref, ref) {
     clipPath: "url(#icon-arrow-turn-down-right_svg__a)"
   }, React__default.createElement("path", {
     opacity: 0.9,
-    d: "m15.957 14.862 3.905-3.905a.47.47 0 0 0 0-.664l-3.905-3.906a.47.47 0 0 0-.664 0l-.332.332a.47.47 0 0 0 0 .665l2.537 2.538H1.406V5.938a.469.469 0 0 0-.137-.331L.8 5.138a.469.469 0 0 0-.8.331v4.921c0 .518.42.938.937.938h16.561l-2.537 2.538a.47.47 0 0 0 0 .664l.332.332a.47.47 0 0 0 .664 0Z"
+    d: "m15.957 14.862 3.905-3.905a.47.47 0 0 0 0-.664l-3.905-3.906a.47.47 0 0 0-.664 0l-.332.332a.47.47 0 0 0 0 .665l2.537 2.538H1.406V5.938a.469.469 0 0 0-.137-.331L.8 5.138a.469.469 0 0 0-.8.331v4.921c0 .518.42.938.937.938h16.561l-2.537 2.538a.47.47 0 0 0 0 .664l.332.332a.47.47 0 0 0 .664 0Z",
+    fill: "currentColor"
   })), React__default.createElement("defs", null, React__default.createElement("clipPath", {
     id: "icon-arrow-turn-down-right_svg__a"
   }, React__default.createElement("path", {
@@ -2410,13 +2422,12 @@ var IconFourSquares = forwardRef(function (_ref, ref) {
     rx: 1,
     fill: "currentColor"
   }), React__default.createElement("rect", {
-    x: 10.822,
-    y: 10.823,
-    width: 8.094,
-    height: 8.094,
-    rx: 0.75,
-    stroke: "currentColor",
-    strokeWidth: 0.5
+    x: 10.573,
+    y: 10.573,
+    width: 8.594,
+    height: 8.594,
+    rx: 1,
+    fill: "currentColor"
   }), React__default.createElement("rect", {
     x: 0.833,
     y: 0.833,
@@ -2998,7 +3009,8 @@ var IconMessages = forwardRef(function (_ref, ref) {
     "data-testid": testId,
     ref: ref
   }, props), React__default.createElement("path", {
-    d: "M17.778 5.556h-3.334V2.222A2.224 2.224 0 0 0 12.222 0h-10A2.224 2.224 0 0 0 0 2.222v5.556C0 9.003.997 10 2.222 10h1.111v1.806a.415.415 0 0 0 .664.333l2.67-1.51v2.704c0 1.226.996 2.223 2.222 2.223h3.333l3.781 2.138a.416.416 0 0 0 .663-.333v-1.805h1.112A2.224 2.224 0 0 0 20 13.333V7.778a2.224 2.224 0 0 0-2.222-2.222ZM2.222 8.889c-.61 0-1.11-.5-1.11-1.111V2.222c0-.61.5-1.11 1.11-1.11h10c.611 0 1.111.5 1.111 1.11v5.556c0 .61-.5 1.11-1.11 1.11H7.485l-.253.147-2.789 1.576V8.89H2.222Zm16.667 4.444c0 .611-.5 1.111-1.111 1.111h-2.222v1.723L12.77 14.59l-.254-.146H8.89c-.611 0-1.111-.5-1.111-1.11V10h4.444a2.224 2.224 0 0 0 2.222-2.222V6.667h3.334c.61 0 1.11.5 1.11 1.11v5.556Z"
+    d: "M17.778 5.556h-3.334V2.222A2.224 2.224 0 0 0 12.222 0h-10A2.224 2.224 0 0 0 0 2.222v5.556C0 9.003.997 10 2.222 10h1.111v1.806a.415.415 0 0 0 .664.333l2.67-1.51v2.704c0 1.226.996 2.223 2.222 2.223h3.333l3.781 2.138a.416.416 0 0 0 .663-.333v-1.805h1.112A2.224 2.224 0 0 0 20 13.333V7.778a2.224 2.224 0 0 0-2.222-2.222ZM2.222 8.889c-.61 0-1.11-.5-1.11-1.111V2.222c0-.61.5-1.11 1.11-1.11h10c.611 0 1.111.5 1.111 1.11v5.556c0 .61-.5 1.11-1.11 1.11H7.485l-.253.147-2.789 1.576V8.89H2.222Zm16.667 4.444c0 .611-.5 1.111-1.111 1.111h-2.222v1.723L12.77 14.59l-.254-.146H8.89c-.611 0-1.111-.5-1.111-1.11V10h4.444a2.224 2.224 0 0 0 2.222-2.222V6.667h3.334c.61 0 1.11.5 1.11 1.11v5.556Z",
+    fill: "currentColor"
   }));
 });
 IconMessages.displayName = 'IconMessages';
@@ -3077,7 +3089,8 @@ var IconMugSaucerSolid = forwardRef(function (_ref, ref) {
     "data-testid": testId,
     ref: ref
   }, props), React__default.createElement("path", {
-    d: "M7 14h6a3 3 0 0 0 3-3h1c2.206 0 4-1.794 4-4s-1.794-4-4-4H4.75a.748.748 0 0 0-.75.75V11a3 3 0 0 0 3 3Zm10-9c1.103 0 2 .897 2 2s-.897 2-2 2h-1V5h1Zm1.49 12H2.51c-1.488 0-1.907-2-1.126-2h18.228c.782 0 .369 2-1.122 2Z"
+    d: "M7 14h6a3 3 0 0 0 3-3h1c2.206 0 4-1.794 4-4s-1.794-4-4-4H4.75a.748.748 0 0 0-.75.75V11a3 3 0 0 0 3 3Zm10-9c1.103 0 2 .897 2 2s-.897 2-2 2h-1V5h1Zm1.49 12H2.51c-1.488 0-1.907-2-1.126-2h18.228c.782 0 .369 2-1.122 2Z",
+    fill: "currentColor"
   }));
 });
 IconMugSaucerSolid.displayName = 'IconMugSaucerSolid';
@@ -4303,6 +4316,141 @@ var SousChefProvider = function SousChefProvider(_ref) {
   return React__default.createElement(Fragment, null, React__default.createElement(ToastContainer, null), children);
 };
 
+var styles$9 = {"data-table-header":"_FcxnN","data-table-header__item":"_1QljH","data-table-header__item--sortable":"_1T4uT","data-table-header__itemfocus":"_HtAmk","data-table-header__item--action":"_39zhh","data-table-header__item-content":"_1CG8B","data-table-header__item-content--right-align":"_1iqpa","data-table-header__sort-icon":"_21Xc6"};
+
+var SORT_ORDER = {
+  ASC: 'asc',
+  DESC: 'desc'
+};
+
+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 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 ColumnSizes = function ColumnSizes(_ref) {
+  var columns = _ref.columns,
+      showActionMenu = _ref.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 HeaderSortIcon = function HeaderSortIcon(_ref) {
+  var sortDirection = _ref.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: "grey-400"
+  }), sortDir !== 'asc' && React__default.createElement("span", {
+    style: {
+      marginTop: '-4px'
+    }
+  }, React__default.createElement(IconChevronDown, {
+    size: "small",
+    color: "grey-400"
+  })));
+};
+
+var DataTableHeader = function DataTableHeader(_ref) {
+  var columns = _ref.columns,
+      onSort = _ref.onSort,
+      showActionMenu = _ref.showActionMenu;
+  var haveLabels = columns.find(function (column) {
+    return column.label && column.label !== '';
+  });
+
+  if (!haveLabels) {
+    return React__default.createElement(ColumnSizes, {
+      columns: columns,
+      showActionMenu: showActionMenu
+    });
+  }
+
+  var handleSort = function handleSort(column) {
+    var nextDirection = getNextSort(column);
+
+    if (onSort) {
+      onSort({
+        columnName: column.name,
+        direction: nextDirection
+      });
+    }
+  };
+
+  return React__default.createElement(Fragment, null, React__default.createElement(ColumnSizes, {
+    columns: columns,
+    showActionMenu: showActionMenu
+  }), React__default.createElement("thead", null, React__default.createElement("tr", {
+    className: styles$9['data-table-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$9['data-table-header__item']] = true, _classnames[styles$9['data-table-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$9['data-table-header__item-content'], (_classnames2 = {}, _classnames2[styles$9['data-table-header__item-content--right-align']] = isRightAligned, _classnames2))
+    }, column.label, ' ', isSortable && React__default.createElement("span", {
+      className: styles$9['data-table-header__sort-icon']
+    }, React__default.createElement(HeaderSortIcon, {
+      sortDirection: sortDir
+    }))));
+  }), showActionMenu && React__default.createElement("th", {
+    className: classnames(styles$9['data-table-header__item'], styles$9['data-table-header__item--action'])
+  }))));
+};
+
 var initialValue = {
   columns: [],
   numberOfRows: 0
@@ -4318,9 +4466,42 @@ var useDataTableContext = function useDataTableContext() {
   return context;
 };
 
-var styles$9 = {"item":"_2GGMG","clickable":"_3VoZI","selected":"_1ZCir"};
+var styles$a = {"data-table":"_umpGL","data-table__content":"_5BvsJ","data-table__content--with-scroll":"_3p04C","data-table__table":"_3_o_a","data-table__table--no-columns":"_3aKQI","data-table__body":"_tCd-U","data-table__body--no-bottom-radius":"_Hp5nC","data-table__footer":"__15fo","data-table__pagination-controls":"_2KGQu"};
+
+var styles$b = {"data-table-scroll-fake-border":"_1zw4R","data-table-scroll-fake-border--top":"_2vWl5","data-table-scroll-fake-border--bottom":"_397Yd","data-table-scroll-fake-border__left":"_AGTVL","data-table-scroll-fake-border__left--top":"_3wzKK","data-table-scroll-fake-border__left--bottom":"_2pJrs","data-table-scroll-fake-border__right":"_vh4go","data-table-scroll-fake-border__right--top":"_2sj0a","data-table-scroll-fake-border__right--bottom":"_1s8kO"};
+
+var DataTableScrollFakeBorder = function DataTableScrollFakeBorder(_ref) {
+  var _classNames, _classNames2, _classNames3;
+
+  var placement = _ref.placement;
+  return React__default.createElement("div", {
+    className: classnames(styles$b['data-table-scroll-fake-border'], (_classNames = {}, _classNames[styles$b['data-table-scroll-fake-border--top']] = placement === 'top', _classNames[styles$b['data-table-scroll-fake-border--bottom']] = placement === 'bottom', _classNames))
+  }, React__default.createElement("div", {
+    className: classnames(styles$b['data-table-scroll-fake-border__left'], (_classNames2 = {}, _classNames2[styles$b['data-table-scroll-fake-border__left--top']] = placement === 'top', _classNames2[styles$b['data-table-scroll-fake-border__left--bottom']] = placement === 'bottom', _classNames2))
+  }), React__default.createElement("div", {
+    className: classnames(styles$b['data-table-scroll-fake-border__right'], (_classNames3 = {}, _classNames3[styles$b['data-table-scroll-fake-border__right--top']] = placement === 'top', _classNames3[styles$b['data-table-scroll-fake-border__right--bottom']] = placement === 'bottom', _classNames3))
+  }));
+};
+
+var styles$c = {"data-table-loading-block":"_94pbt"};
+
+var DataTableLoadingBlock = function DataTableLoadingBlock(_ref) {
+  var amountOfColumns = _ref.amountOfColumns,
+      showActionMenu = _ref.showActionMenu;
+  var aditionalColums = showActionMenu ? 1 : 0;
+  var colSpan = amountOfColumns + aditionalColums;
+  return React__default.createElement("tr", {
+    className: styles$c['data-table-loading-block']
+  }, React__default.createElement("td", {
+    colSpan: colSpan
+  }, React__default.createElement(Spinner, {
+    block: true
+  })));
+};
+
+var styles$d = {"item":"_2GGMG","clickable":"_3VoZI","selected":"_1ZCir"};
 
-var styles$a = {"actions":"_3Iab2"};
+var styles$e = {"actions":"_3Iab2"};
 
 var DropdownContext = React__default.createContext({
   onToggleDropdown: function onToggleDropdown() {},
@@ -4336,7 +4517,7 @@ var useDropdownContext = function useDropdownContext() {
   return React__default.useContext(DropdownContext);
 };
 
-var styles$b = {"dropdown-pane":"_2EwLt"};
+var styles$f = {"dropdown-pane":"_2EwLt"};
 
 function isClickInside(ref, event) {
   return !ref.current || event.target instanceof Node && ref.current.contains(event.target);
@@ -4476,7 +4657,7 @@ var PaneOverlay = function PaneOverlay(_ref) {
   useKeyPress(['Escape'], handleEscapeKey);
   var overflow = maxHeight ? 'scroll' : undefined;
   return React__default.createElement("div", {
-    className: classnames(styles$b['dropdown-pane'], (_classNames = {}, _classNames[styles$b['dropdown-pane--with-padding']] = true, _classNames)),
+    className: classnames(styles$f['dropdown-pane'], (_classNames = {}, _classNames[styles$f['dropdown-pane--with-padding']] = true, _classNames)),
     style: _extends({}, position, {
       width: width,
       maxHeight: maxHeight,
@@ -4506,7 +4687,7 @@ var getKeyboardFocusableElements = function getKeyboardFocusableElements(element
   });
 };
 
-var styles$c = {"dropdown__trigger":"_2rs8m"};
+var styles$g = {"dropdown__trigger":"_2rs8m"};
 
 var DROPDOWN_ALIGNEMNT = {
   LEFT: 'left',
@@ -4517,422 +4698,588 @@ var DROPDOWN_TRIGGER = {
   CLICK: 'click'
 };
 
-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"};
+var styles$h = {"label":"_h724f","label--truncate":"_1VUoF"};
 
-var styles$e = {"header":"_36nxW","header__close-button":"_2zYre","sub-header":"_2XwRD"};
+var isEllipsisActive = function isEllipsisActive(e) {
+  return e.offsetWidth < e.scrollWidth;
+};
 
-var ModalHeader = function ModalHeader(_ref) {
-  var header = _ref.header,
-      subHeader = _ref.subHeader,
-      onClose = _ref.onClose,
-      loading = _ref.loading;
+var useLabelTooltip = function useLabelTooltip(labelId, tooltipContent, truncate) {
+  var _useState = useState(false),
+      showTooltip = _useState[0],
+      setShowTooltip = _useState[1];
 
-  if (!header && !subHeader) {
-    return onClose ? React__default.createElement("div", {
-      className: styles$e['header__close-button']
-    }, React__default.createElement(Button$1, {
-      theme: "link-icon",
-      onClick: onClose,
-      disabled: loading
-    }, React__default.createElement(IconTimes, null))) : null;
-  }
+  var shouldTruncate = typeof tooltipContent === 'string' && truncate;
+  var labelElement = document.getElementById(labelId);
+  var isHidden = labelElement && labelElement.offsetParent === null;
+  var handleApplyTooltip = useCallback(function () {
+    if (!shouldTruncate) {
+      return;
+    }
 
-  return React__default.createElement(Stack, {
-    space: 12,
-    marginBottom: 24
-  }, React__default.createElement(Inline, {
-    flex: [1],
-    alignItems: "center"
-  }, React__default.createElement("span", {
-    className: styles$e['header']
-  }, header), onClose && React__default.createElement(Button$1, {
-    theme: "link-icon",
-    onClick: onClose,
-    disabled: loading
-  }, React__default.createElement(IconTimes, null))), subHeader && React__default.createElement("div", {
-    className: styles$e['sub-header']
-  }, subHeader));
-};
+    var labelElement = document.getElementById(labelId);
 
-var ModalContext = createContext({
-  isModalMounted: false
-});
-var useModalContext = function useModalContext() {
-  var context = useContext(ModalContext);
-  return context || {};
-};
+    if (!labelElement) {
+      return;
+    }
 
-var Modal = function Modal(_ref) {
-  var children = _ref.children,
-      header = _ref.header,
-      subHeader = _ref.subHeader,
-      onClose = _ref.onClose,
-      loading = _ref.loading,
-      _ref$zIndex = _ref.zIndex,
-      zIndex = _ref$zIndex === void 0 ? Z_INDEX_LAYERS.MODAL : _ref$zIndex,
-      rootElementId = _ref.rootElementId,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 500 : _ref$width,
-      height = _ref.height,
-      maxWidth = _ref.maxWidth,
-      _ref$shouldReturnFocu = _ref.shouldReturnFocusAfterClose,
-      shouldReturnFocusAfterClose = _ref$shouldReturnFocu === void 0 ? true : _ref$shouldReturnFocu,
-      testId = _ref.testId;
-  var style = {
-    content: {
-      width: width,
-      height: height,
-      maxWidth: maxWidth
-    },
-    overlay: {
-      zIndex: zIndex
+    var shouldShowTooltip = isEllipsisActive(labelElement);
+
+    if (showTooltip !== shouldShowTooltip) {
+      setShowTooltip(shouldShowTooltip);
     }
-  };
-  return React__default.createElement(ReactModal, {
-    isOpen: true,
-    testId: testId,
-    shouldCloseOnEsc: true,
-    shouldCloseOnOverlayClick: false,
-    shouldReturnFocusAfterClose: shouldReturnFocusAfterClose,
-    onRequestClose: onClose && !loading ? onClose : undefined,
-    style: style,
-    closeTimeoutMS: 200,
-    contentLabel: "Modal",
-    appElement: rootElementId && document.getElementById(rootElementId) || undefined,
-    overlayClassName: {
-      base: styles$d['overlay'],
-      afterOpen: styles$d['overlay--after-open'],
-      beforeClose: styles$d['overlay--before-close']
-    },
-    className: {
-      base: styles$d['content'],
-      afterOpen: styles$d['content--after-open'],
-      beforeClose: styles$d['content--before-close']
-    }
-  }, React__default.createElement(ModalHeader, {
-    header: header,
-    subHeader: subHeader,
-    onClose: onClose,
-    loading: loading
-  }), React__default.createElement(ModalContext.Provider, {
-    value: {
-      isModalMounted: true
-    }
-  }, children));
-};
-
-Modal.setAppElement = function (rootElement) {
-  ReactModal.setAppElement(rootElement);
-};
-
-var THRESHOLD = 20;
-var useScrollShadow = function useScrollShadow() {
-  var ref = useRef(null);
-
-  var _useState = useState(false),
-      showScrollShadow = _useState[0],
-      setShowScrollShadow = _useState[1];
-
+  }, [shouldTruncate, isHidden]);
   useEffect(function () {
-    if (!ref.current) {
-      return;
-    }
-
-    var modalBody = ref.current;
-
-    if (modalBody.offsetHeight > THRESHOLD) {
-      setShowScrollShadow(true);
-    }
-  }, []);
+    var onWindowResize = debounce(handleApplyTooltip, 300);
+    window.addEventListener('resize', onWindowResize);
+    return function () {
+      return window.removeEventListener('resize', onWindowResize);
+    };
+  }, [handleApplyTooltip]);
+  useLayoutEffect(handleApplyTooltip, [handleApplyTooltip]);
   return {
-    ref: ref,
-    showScrollShadow: showScrollShadow
+    showTooltip: showTooltip,
+    shouldTruncate: shouldTruncate
   };
 };
 
-var styles$f = {"modal-body":"_2J-ku","modal-body--with-scroll-shadow":"_2ErCP"};
-
-var ModalBody = function ModalBody(_ref) {
+var Label = function Label(_ref) {
   var _classNames;
 
-  var children = _ref.children,
-      testId = _ref.testId;
+  var htmlFor = _ref.htmlFor,
+      children = _ref.children,
+      _ref$truncate = _ref.truncate,
+      truncate = _ref$truncate === void 0 ? true : _ref$truncate;
+  var labelId = "label-" + htmlFor;
 
-  var _useScrollShadow = useScrollShadow(),
-      ref = _useScrollShadow.ref,
-      showScrollShadow = _useScrollShadow.showScrollShadow;
+  var _useLabelTooltip = useLabelTooltip(labelId, children, truncate),
+      showTooltip = _useLabelTooltip.showTooltip,
+      shouldTruncate = _useLabelTooltip.shouldTruncate;
 
-  return React__default.createElement("div", {
-    className: classnames(styles$f['modal-body'], (_classNames = {}, _classNames[styles$f['modal-body--with-scroll-shadow']] = showScrollShadow, _classNames)),
-    ref: ref,
-    "data-testid": testId
+  var LabelElement = React__default.createElement("label", {
+    htmlFor: htmlFor,
+    id: labelId,
+    className: classnames(styles$h['label'], (_classNames = {}, _classNames[styles$h['label--truncate']] = shouldTruncate, _classNames))
   }, children);
-};
-
-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;
+  if (showTooltip) {
+    return React__default.createElement(Tooltip$1, {
+      overlay: children,
+      placement: "top"
+    }, LabelElement);
   }
 
-  return React__default.cloneElement(button, _extends({}, newProps));
+  return LabelElement;
 };
 
-var ModalFooter = function ModalFooter(_ref) {
-  var children = _ref.children,
-      actions = _ref.actions,
-      testId = _ref.testId;
-
-  if (actions) {
-    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',
-      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
-    });
-    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',
-      size: BUTTON_SIZES.MIN_WIDTH_100
-    });
-    return React__default.createElement(FooterContainer, {
-      testId: testId
-    }, React__default.createElement(Inline, {
-      justifyContent: "space-between"
-    }, React__default.createElement("div", {
-      className: classnames((_classnames = {}, _classnames[styles$g['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
-    }, tertiaryButton || React__default.createElement("div", null)), React__default.createElement(Inline, {
-      space: 12
-    }, secondaryButton, primaryButton)));
-  }
+var styles$i = {"caption":"_1DWBq"};
 
-  return React__default.createElement(FooterContainer, null, children);
+var Caption = function Caption(_ref) {
+  var fieldId = _ref.fieldId,
+      children = _ref.children;
+  return React__default.createElement("div", {
+    id: fieldId && fieldId + "-describer",
+    className: styles$i['caption']
+  }, children);
 };
 
-var FooterContainer = function FooterContainer(_ref2) {
-  var children = _ref2.children,
-      testId = _ref2.testId;
-  var childrenItens = React__default.Children.toArray(children);
-  var hasCustomAlignment = childrenItens.length === 1 && childrenItens[0].type === Inline;
+var styles$j = {"error-message":"_nZ2MD"};
+
+var ErrorMessage = function ErrorMessage(_ref) {
+  var fieldId = _ref.fieldId,
+      children = _ref.children,
+      testId = _ref.testId;
   return React__default.createElement("div", {
-    className: styles$g['modal-footer'],
+    id: fieldId && fieldId + "-error-message",
+    className: styles$j['error-message'],
     "data-testid": testId
   }, React__default.createElement(Inline, {
-    justifyContent: "end",
-    space: 12,
-    flex: hasCustomAlignment ? [1] : undefined
-  }, children));
+    space: 8,
+    alignItems: "center"
+  }, React__default.createElement(IconTimesOctagon, {
+    color: "radish-400",
+    size: "medium"
+  }), children));
 };
 
-var styles$h = {"container":"_v1b-5","wrapper":"_3mrLu","interactionDisabled":"_1J9dh","DayPicker-Day":"_8FcQE","navBar":"_1SPuq","todayButton":"_24FJ6","navButtonInteractionDisabled":"_Oxdm9","navButtonPrev":"_20uqc","navButtonNext":"_3C53z","months":"_M_eHz","month":"_3RPpJ","caption":"_1FXNw","weekdays":"_3KcRU","weekdaysRow":"_1fO_e","weekday":"_c1Y-X","body":"_34mA1","week":"_1PmqZ","day":"_1AWH2","disabled":"_3vJkw","selected":"_1DR0N","outside":"_276GV","footer":"_2M5xr","today":"_3N6fj","overlayWrapper":"_3Zqgu","overlay":"_20Ncd","weekNumber":"_2hb-S"};
+var Field = function Field(_ref) {
+  var id = _ref.id,
+      label = _ref.label,
+      caption = _ref.caption,
+      error = _ref.error,
+      children = _ref.children;
+  var shouldRenderLabel = label || typeof label === 'string';
+  return React__default.createElement(Stack, {
+    space: 8,
+    flexItems: true
+  }, shouldRenderLabel && React__default.createElement(Label, {
+    htmlFor: id
+  }, label), children, caption && React__default.createElement(Caption, {
+    fieldId: id
+  }, caption), error && React__default.createElement(ErrorMessage, {
+    fieldId: id
+  }, error));
+};
 
-var styles$i = {"container":"_okDvi","wrapper":"_17XdD","interactionDisabled":"_1O7OT","DayPicker-Day":"_3noGA","navBar":"_1Hl3Q","todayButton":"_m0Vs9","navButtonInteractionDisabled":"_1ULWH","navButtonPrev":"_3gjq8","navButtonNext":"_1m-Kd","months":"_Fq6Xh","month":"_3i0Oo","caption":"_36X9Y","weekdays":"_1aWPn","weekdaysRow":"_3HXCK","weekday":"_t-ctd","body":"_XAbiR","week":"_3Nwep","day":"_3nNcG","disabled":"_1M4ZF","selected":"_2PEs8","outside":"_1PIJa","footer":"_2T_z1","today":"_1hVM6","overlayWrapper":"_1L-hI","overlay":"_dDPZb","weekNumber":"_1alhT"};
+var Context$1 = createContext({});
+var useFormContext = function useFormContext() {
+  var context = useContext(Context$1);
+  return context || {};
+};
 
-function parseDate(str, format, locale) {
-  var parsed = dateFnsParse(str, format, new Date(), {
-    locale: locale
-  });
+var useFieldId = function useFieldId(_ref) {
+  var name = _ref.name,
+      inputId = _ref.id;
+  var id = useMemo(function () {
+    return inputId ? inputId : name + "-" + Math.random();
+  }, [inputId, name]);
+  return id;
+};
 
-  if (str.length === format.length && DateUtils.isDate(parsed)) {
-    return parsed;
+var getFormikState = function getFormikState(name, formik) {
+  if (formik === undefined) {
+    return null;
   }
 
-  return undefined;
-}
-function formatDate(date, format, locale) {
-  return dateFnsFormat(date, format, {
-    locale: locale
-  });
-}
-function setToMidnight(date) {
-  return date && startOfDay(date);
-}
-function getStartOfWeek(date, weekIndex) {
-  var d = new Date(date);
-  var firstDay = d.getDate() - d.getDay() + weekIndex;
-  var firstDayAdjusted = firstDay > d.getDate() ? firstDay - 7 : firstDay;
-  return new Date(d.setDate(firstDayAdjusted));
-}
-function getEndOfWeek(date, weekIndex) {
-  var startOfWeek = getStartOfWeek(date, weekIndex);
-  var endDay = startOfWeek.getDate() + 6;
-  return new Date(startOfWeek.setDate(endDay));
-}
-function createWeekRange(date, weekStart) {
-  return {
-    start: getStartOfWeek(date, weekStart),
-    end: getEndOfWeek(date, weekStart)
-  };
-}
-var DAYS = [getLocalizedString('time.sunday'), getLocalizedString('time.monday'), getLocalizedString('time.tuesday'), getLocalizedString('time.wednesday'), getLocalizedString('time.thursday'), getLocalizedString('time.friday'), getLocalizedString('time.saturday')];
-var MONTH_NAMES = [getLocalizedString('time.january'), getLocalizedString('time.february'), getLocalizedString('time.march'), getLocalizedString('time.april'), getLocalizedString('time.may'), getLocalizedString('time.june'), getLocalizedString('time.july'), getLocalizedString('time.august'), getLocalizedString('time.september'), getLocalizedString('time.october'), getLocalizedString('time.november'), getLocalizedString('time.december')];
-
-var CALENDAR_MODE = {
-  DAY: 'day',
-  WEEK: 'week'
-};
-var CALENDAR_PLACEMENT = {
-  BOTTOM: 'bottom',
-  TOP: 'top'
-};
+  var formikPath = getFormikArrayPath(name);
 
-var calculateCalendarPosition = function calculateCalendarPosition(placement, anchorPosition, calendarDimensions) {
-  if (!calendarDimensions) {
-    return {
-      left: 0,
-      top: 0
-    };
+  if (formikPath.length === 0) {
+    return null;
   }
 
-  var horizontalPosition = getHorizontalPosition(anchorPosition, calendarDimensions);
-  var verticalPosition = getVerticalPosition(anchorPosition, placement, calendarDimensions);
-  return _extends({}, horizontalPosition, verticalPosition);
-};
-
-var getHorizontalPosition = function getHorizontalPosition(anchorPosition, calendarDimensions) {
-  var innerWidth = window.innerWidth;
-  var calendarRight = anchorPosition.left + calendarDimensions.width;
+  var formikLatestLevel = formikPath.reduce(function (acc, path) {
+    var _acc$touched, _acc$error, _acc$value;
 
-  if (innerWidth > calendarRight + BUFFER) {
     return {
-      left: anchorPosition.left
+      touched: (_acc$touched = acc.touched) === null || _acc$touched === void 0 ? void 0 : _acc$touched[path],
+      error: (_acc$error = acc.error) === null || _acc$error === void 0 ? void 0 : _acc$error[path],
+      value: (_acc$value = acc.value) === null || _acc$value === void 0 ? void 0 : _acc$value[path]
     };
-  }
-
-  return {
-    left: anchorPosition.right - calendarDimensions.width
-  };
-};
+  }, {
+    touched: formik.touched,
+    error: formik.errors,
+    value: formik.values
+  });
+  return {
+    error: formikLatestLevel.touched ? formikLatestLevel.error : undefined,
+    value: formikLatestLevel.value
+  };
+};
+var getFormikArrayPath = function getFormikArrayPath(name) {
+  return name.split(/[^a-zA-Z0-9]/).filter(Boolean);
+};
 
-var getVerticalPosition = function getVerticalPosition(anchorPosition, placement, calendarDimensions) {
-  var calendarTopAboveTrigger = anchorPosition.top - calendarDimensions.height - PADDING;
-  var calendarTopBelowTrigger = anchorPosition.bottom + PADDING;
+var useFieldControllers = function useFieldControllers(_ref) {
+  var name = _ref.name,
+      inputId = _ref.id,
+      value = _ref.value,
+      _onChange = _ref.onChange,
+      _onBlur = _ref.onBlur,
+      _onFocus = _ref.onFocus,
+      _onKeyDown = _ref.onKeyDown,
+      error = _ref.error,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type;
 
-  if (placement === CALENDAR_PLACEMENT.TOP) {
-    if (calendarTopAboveTrigger < 0) {
-      return {
-        top: anchorPosition.bottom + PADDING
-      };
-    }
+  var _useFormContext = useFormContext(),
+      formik = _useFormContext.formik;
 
-    return {
-      top: calendarTopAboveTrigger + window.scrollY
-    };
-  } else {
-    if (calendarTopBelowTrigger + calendarDimensions.height > window.innerHeight) {
-      return {
-        top: calendarTopAboveTrigger + window.scrollY
-      };
+  var id = useFieldId({
+    name: name,
+    id: inputId
+  });
+  var controllers = {
+    id: id,
+    error: error,
+    value: value,
+    onChange: function onChange(e) {
+      return _onChange && _onChange(e.target.value);
+    },
+    onBlur: function onBlur(e) {
+      return _onBlur && _onBlur(e.target.value);
+    },
+    onFocus: function onFocus(e) {
+      return _onFocus && _onFocus(e.target.value);
+    },
+    onKeyDown: function onKeyDown(e) {
+      return _onKeyDown && _onKeyDown(e.key);
     }
+  };
+  var formikState = getFormikState(name, formik);
 
-    return {
-      top: calendarTopBelowTrigger + window.scrollY
+  if (formik && formikState) {
+    var currencyBlur = function currencyBlur() {
+      if (type === 'currency') {
+        formik.setFieldValue(name, Number(value).toFixed(2));
+      }
     };
+
+    controllers = _extends({}, controllers, {
+      error: error !== undefined ? controllers.error : formikState.error,
+      value: value !== undefined ? controllers.value : formikState.value,
+      onChange: _onChange ? controllers.onChange : function (e) {
+        return formik.setFieldValue(name, e.target.value);
+      },
+      onBlur: _onBlur ? function (e) {
+        _onBlur && _onBlur(e.target.value);
+        formik.setFieldTouched(name);
+        currencyBlur();
+      } : function () {
+        formik.setFieldTouched(name);
+        currencyBlur();
+      }
+    });
   }
+
+  return controllers;
 };
 
-var Calendar = function Calendar(_ref) {
-  var _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? CALENDAR_MODE.DAY : _ref$mode,
-      _ref$position = _ref.position,
-      position = _ref$position === void 0 ? CALENDAR_PLACEMENT.BOTTOM : _ref$position,
-      _ref$weekStart = _ref.weekStart,
-      weekStart = _ref$weekStart === void 0 ? 0 : _ref$weekStart,
-      selected = _ref.selected,
-      onSelect = _ref.onSelect,
-      onClickOutside = _ref.onClickOutside,
-      disabledDays = _ref.disabledDays,
-      anchorRef = _ref.anchorRef,
+var textFieldStyles = {"text-field":"_20YOA","text-field--invalid":"_3kUSh","text-field--prefixed":"_3IU3Q","text-field--suffixed":"_QXJOD"};
+
+var useTextField = function useTextField(_ref) {
+  var _classnames;
+
+  var autoComplete = _ref.autoComplete,
+      autoFocus = _ref.autoFocus,
+      defaultValue = _ref.defaultValue,
+      disabled = _ref.disabled,
+      error = _ref.error,
+      id = _ref.id,
+      maxLength = _ref.maxLength,
+      name = _ref.name,
+      caption = _ref.caption,
+      label = _ref.label,
+      onBlur = _ref.onBlur,
+      onChange = _ref.onChange,
+      onFocus = _ref.onFocus,
+      onKeyDown = _ref.onKeyDown,
+      placeholder = _ref.placeholder,
+      value = _ref.value,
+      ref = _ref.ref,
+      testId = _ref.testId;
+  var controllers = useFieldControllers({
+    error: error,
+    id: id,
+    name: name,
+    onChange: onChange,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    value: value
+  });
+  var hasError = !!controllers.error;
+  var inputProps = {
+    'aria-describedby': hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
+    'aria-invalid': hasError,
+    autoComplete: autoComplete,
+    autoFocus: autoFocus,
+    className: classnames(textFieldStyles['text-field'], (_classnames = {}, _classnames[textFieldStyles['text-field--invalid']] = hasError, _classnames)),
+    'data-testid': testId,
+    disabled: disabled,
+    defaultValue: defaultValue,
+    id: controllers.id,
+    maxLength: maxLength,
+    name: name,
+    onBlur: controllers.onBlur,
+    onChange: controllers.onChange,
+    onFocus: controllers.onFocus,
+    onKeyDown: controllers.onKeyDown,
+    placeholder: placeholder,
+    ref: ref,
+    size: 1,
+    type: 'text',
+    value: controllers.value
+  };
+  var fieldProps = {
+    caption: caption,
+    error: controllers.error,
+    label: label,
+    id: inputProps.id,
+    name: name
+  };
+  return {
+    inputProps: inputProps,
+    fieldProps: fieldProps
+  };
+};
+
+var styles$k = {"affix-container":"_ybKOk","affix-container--prefixed":"_2COk3","affix-container--suffixed":"_1xXXN","prefix":"_eX5OL","suffix":"__YH01"};
+
+var AffixContainer = function AffixContainer(_ref) {
+  var _classnames;
+
+  var prefix = _ref.prefix,
+      suffix = _ref.suffix,
+      children = _ref.children,
       testId = _ref.testId;
+  var container = useRef(null);
+  var prefixElement = useRef(null);
+  var suffixElement = useRef(null);
+  var isHidden = container.current && container.current.offsetParent === null;
+  useLayoutEffect(function () {
+    if (container.current) {
+      var input = container.current.querySelector('input, [class$=control] > div');
 
-  var _useState = useState(null),
-      calendarRef = _useState[0],
-      setCalendarRef = _useState[1];
+      if (input) {
+        if (prefix && prefixElement.current) {
+          var _prefixElement$curren;
 
-  var style = mode === CALENDAR_MODE.DAY ? styles$h : styles$i;
-  var anchorNode = anchorRef.current;
-  useOnClickOutside({
-    current: calendarRef
-  }, function (event) {
-    var _anchorRef$current;
+          var prefixWidth = prefixElement === null || prefixElement === void 0 ? void 0 : (_prefixElement$curren = prefixElement.current) === null || _prefixElement$curren === void 0 ? void 0 : _prefixElement$curren.offsetWidth;
+          input.style.paddingLeft = prefixWidth + 'px';
+        }
 
-    if (!((_anchorRef$current = anchorRef.current) !== null && _anchorRef$current !== void 0 && _anchorRef$current.contains(event === null || event === void 0 ? void 0 : event.srcElement))) {
-      onClickOutside();
+        if (suffix && suffixElement.current) {
+          var suffixWidth = suffixElement.current.offsetWidth;
+          input.style.paddingRight = suffixWidth + 'px';
+        }
+      }
     }
-  });
-  var weekRange = selected ? createWeekRange(selected, weekStart) : undefined;
-  var selectedRange = weekRange && {
-    from: weekRange.start,
-    to: weekRange.end
-  };
+  }, [prefix, suffix, isHidden]);
+  var hasPrefix = !!prefix;
+  var hasSuffix = !!suffix;
 
-  var handleSelect = function handleSelect(day) {
-    var selectedDate = setToMidnight(day);
+  if (!hasPrefix && !hasSuffix) {
+    return children;
+  }
 
-    if (mode === CALENDAR_MODE.DAY) {
-      onSelect(selectedDate);
+  var classes = classnames(styles$k['affix-container'], (_classnames = {}, _classnames[styles$k['affix-container--prefixed']] = hasPrefix, _classnames[styles$k['affix-container--suffixed']] = hasSuffix, _classnames));
+  return React__default.createElement("div", {
+    className: classes,
+    ref: container,
+    "data-testid": testId
+  }, hasPrefix && React__default.createElement("div", {
+    className: styles$k['prefix'],
+    ref: prefixElement
+  }, prefix), children, hasSuffix && React__default.createElement("div", {
+    className: styles$k['suffix'],
+    ref: suffixElement
+  }, suffix));
+};
+
+var TimeFieldInput = function TimeFieldInput(_ref) {
+  var inputProps = _ref.inputProps,
+      allOtherProps = _ref.allOtherProps,
+      prefix = _ref.prefix,
+      duration = _ref.duration;
+  return React__default.createElement(AffixContainer, {
+    prefix: prefix ? prefix : React__default.createElement(IconClock, {
+      size: "medium",
+      color: "grey-400"
+    }),
+    suffix: duration
+  }, React__default.createElement("input", Object.assign({}, inputProps, {
+    onBlur: function onBlur(e) {
+      e.target.value = parseTime(e.target.value, 'g:i A');
+      inputProps.onChange(e);
+      inputProps.onBlur(e);
+    },
+    onClick: allOtherProps.onClick,
+    onMouseEnter: allOtherProps.onMouseEnter,
+    onMouseLeave: allOtherProps.onMouseLeave,
+    onInput: function onInput(e) {
+      var target = e.target;
+      allOtherProps.onInputChange(target.value);
+    }
+  })));
+};
+
+var _excluded$2g = ["placeholder", "autoComplete", "selectedTimeOption", "prefix", "startTime", "duration"];
+
+var TimeFieldDropdownElement = function TimeFieldDropdownElement(_ref, ref) {
+  var _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? '9:00 AM' : _ref$placeholder,
+      _ref$autoComplete = _ref.autoComplete,
+      autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
+      selectedTimeOption = _ref.selectedTimeOption,
+      prefix = _ref.prefix,
+      duration = _ref.duration,
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2g);
+
+  var _useTextField = useTextField(_extends({}, allOtherProps, {
+    placeholder: placeholder,
+    autoComplete: autoComplete,
+    ref: ref
+  })),
+      inputProps = _useTextField.inputProps,
+      fieldProps = _useTextField.fieldProps;
+
+  useEffect(function () {
+    if (selectedTimeOption) {
+      inputProps.onChange({
+        target: {
+          value: selectedTimeOption
+        }
+      });
+    }
+  }, [selectedTimeOption]);
+  return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(TimeFieldInput, {
+    inputProps: inputProps,
+    allOtherProps: allOtherProps,
+    prefix: prefix,
+    duration: duration
+  }));
+};
+
+var TimeFieldDropdownTrigger = forwardRef(TimeFieldDropdownElement);
+
+var Dropdown = function Dropdown(_ref) {
+  var trigger = _ref.trigger,
+      _ref$triggersOn = _ref.triggersOn,
+      triggersOn = _ref$triggersOn === void 0 ? DROPDOWN_TRIGGER.CLICK : _ref$triggersOn,
+      _ref$alignment = _ref.alignment,
+      alignment = _ref$alignment === void 0 ? DROPDOWN_ALIGNEMNT.RIGHT : _ref$alignment,
+      width = _ref.width,
+      maxHeight = _ref.maxHeight,
+      testId = _ref.testId,
+      children = _ref.children,
+      triggerWidth = _ref.triggerWidth;
+
+  var _useState = useState(false),
+      isOpen = _useState[0],
+      setIsOpen = _useState[1];
+
+  var triggerRef = useRef(null);
+  var paneRef = useRef(null);
+  var isFocusingOverlay = useRef(false);
+
+  var handleToggleDropdown = function handleToggleDropdown() {
+    return setIsOpen(!isOpen);
+  };
+
+  var handleMouseClick = function handleMouseClick(e) {
+    if (trigger.type === TimeFieldDropdownTrigger) {
+      setIsOpen(true);
     } else {
-      var _weekRange = createWeekRange(selectedDate, weekStart);
+      handleToggleDropdown();
+    }
 
-      onSelect(_weekRange.start);
+    e.stopPropagation();
+
+    if ('onClick' in trigger.props) {
+      trigger.props.onClick(e);
     }
+  };
 
-    setTimeout(function () {
-      onClickOutside();
-    }, 100);
+  var handleMouseEnter = function handleMouseEnter(e) {
+    if (triggersOn !== 'hover') {
+      return;
+    }
+
+    setIsOpen(true);
+
+    if ('onMouseEnter' in trigger.props) {
+      trigger.props.onMouseEnter(e);
+    }
   };
 
-  if (!anchorNode) {
-    return null;
-  }
+  var handleFocus = function handleFocus(e) {
+    if (triggersOn !== 'hover') {
+      if (trigger.type === TimeFieldDropdownTrigger && !isOpen) {
+        setIsOpen(true);
+      }
 
-  var anchorPosition = anchorNode.getBoundingClientRect();
-  var calendarPosition = calculateCalendarPosition(position, anchorPosition, calendarRef === null || calendarRef === void 0 ? void 0 : calendarRef.getBoundingClientRect());
-  return React__default.createElement(Portal, null, React__default.createElement("div", {
-    className: style.overlayWrapper
-  }, React__default.createElement("div", {
-    className: style.overlay,
-    ref: function ref(_ref2) {
-      return setCalendarRef(_ref2);
-    },
-    style: _extends({}, calendarPosition, {
-      zIndex: Z_INDEX_LAYERS.MODAL
-    }),
-    "data-testid": testId
-  }, React__default.createElement(DayPicker, {
-    format: "MM/dd/yyyy",
-    classNames: style,
-    onDayClick: function onDayClick(day, activeModifiers) {
-      var isDateDisabled = Object.keys(activeModifiers).find(function (modifier) {
-        return modifier.includes('disabled');
-      });
+      if ('onFocus' in trigger.props) {
+        trigger.props.onFocus(e);
+      }
+
+      return;
+    }
+
+    setIsOpen(true);
+
+    if ('onFocus' in trigger.props) {
+      trigger.props.onFocus(e);
+    }
+  };
+
+  var handleMouseLeave = function handleMouseLeave(e) {
+    if (triggersOn !== 'hover' || !paneRef.current) {
+      return;
+    }
+
+    var panePosition = paneRef.current.getBoundingClientRect();
+
+    if (!isGoingTowardsPane(panePosition, e.clientY)) {
+      setIsOpen(false);
+
+      if ('onMouseLeave' in trigger.props) {
+        trigger.props.onMouseLeave && trigger.props.onMouseLeave(e);
+      }
+    }
+  };
+
+  var handlePaneMouseEnter = function handlePaneMouseEnter() {
+    isFocusingOverlay.current = true;
+  };
+
+  var handlePaneMouseLeave = function handlePaneMouseLeave() {
+    isFocusingOverlay.current = false;
+
+    if (triggersOn === 'hover') {
+      setIsOpen(false);
+    }
+  };
+
+  var handleOnBlur = function handleOnBlur(e) {
+    trigger.props.onBlur && trigger.props.onBlur(e);
+
+    if (!paneRef || !(paneRef !== null && paneRef !== void 0 && paneRef.current)) {
+      return;
+    }
+
+    var focusableElements = getKeyboardFocusableElements(paneRef.current);
 
-      if (!Boolean(isDateDisabled)) {
-        handleSelect(day);
-      }
+    if (focusableElements.length > 0) {
+      window.setTimeout(function () {
+        return focusableElements[0].focus();
+      }, 0);
+    } else {
+      setIsOpen(false);
+    }
+  };
+
+  var getRef = function getRef() {
+    if ((trigger.type === Button$1 || trigger.type === TimeFieldDropdownTrigger) && trigger.ref) {
+      return trigger.ref;
+    }
+
+    return triggerRef;
+  };
+
+  var updatedRef = getRef();
+  var triggerProps = {
+    onClick: handleMouseClick,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onBlur: handleOnBlur,
+    ref: updatedRef,
+    style: {
+      width: triggerWidth === 'full' ? '100%' : 'fit-content'
     },
-    selectedDays: mode === CALENDAR_MODE.DAY ? selected : selectedRange,
-    disabledDays: disabledDays,
-    months: MONTH_NAMES,
-    weekdaysLong: DAYS,
-    initialMonth: selected,
-    weekdaysShort: DAYS.map(function (day) {
-      return day.substring(0, 2);
-    }),
-    showOutsideDays: mode === CALENDAR_MODE.WEEK,
-    firstDayOfWeek: weekStart
-  }))));
+    onFocus: handleFocus
+  };
+  return React__default.createElement(DropdownContext.Provider, {
+    value: {
+      isOpen: isOpen,
+      onToggleDropdown: handleToggleDropdown,
+      triggerRef: updatedRef,
+      paneRef: paneRef
+    }
+  }, trigger.type === Button$1 || trigger.type === TimeFieldDropdownTrigger ? React__default.cloneElement(trigger, _extends({}, trigger.props, triggerProps)) : React__default.createElement("button", Object.assign({}, triggerProps, {
+    className: styles$g['dropdown__trigger'],
+    ref: updatedRef,
+    onFocus: handleFocus
+  }), trigger), React__default.createElement(DropdownPane, {
+    width: width,
+    maxHeight: maxHeight,
+    onMouseEnter: handlePaneMouseEnter,
+    onMouseLeave: handlePaneMouseLeave,
+    alignment: alignment,
+    testId: testId
+  }, children));
 };
 
-var styles$j = {"dropdown-list":"_1v1df","dropdown-list__item--hover":"_eAjpa"};
+var styles$l = {"dropdown-list":"_1v1df","dropdown-list__item--hover":"_eAjpa"};
 
 var findNextActiveIndex = function findNextActiveIndex(items, startAt) {
   var startIndex = 0;
@@ -5042,17 +5389,17 @@ var useListKeyboardNavigation = function useListKeyboardNavigation(listItems, ac
   };
 };
 
-var styles$k = {"dropdown-list-divider":"_3x1F6"};
+var styles$m = {"dropdown-list-divider":"_3x1F6"};
 
 var DropdownListDivider = function DropdownListDivider(_ref) {
   var testId = _ref.testId;
   return React__default.createElement("div", {
-    className: styles$k['dropdown-list-divider'],
+    className: styles$m['dropdown-list-divider'],
     "data-testid": testId
   });
 };
 
-var styles$l = {"dropdown-list-item":"_B3_I5","dropdown-list-item--selected":"_1mr1h","dropdown-list-item__content":"_2b7Fg","dropdown-list-item--disabled":"_2l0Cb"};
+var styles$n = {"dropdown-list-item":"_B3_I5","dropdown-list-item--selected":"_1mr1h","dropdown-list-item__content":"_2b7Fg","dropdown-list-item--disabled":"_2l0Cb"};
 
 var TEXT_TYPES = {
   CAPTION: 'caption',
@@ -5077,9 +5424,9 @@ var ALIGNMENTS = {
   JUSTIFY: 'justify'
 };
 
-var styles$m = {"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$o = {"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$2g = ["children", "as", "emphasis", "alignment", "color", "testId"];
+var _excluded$2h = ["children", "as", "emphasis", "alignment", "color", "testId"];
 
 var Text = function Text(_ref) {
   var _classnames;
@@ -5091,14 +5438,14 @@ var Text = function Text(_ref) {
       alignment = _ref.alignment,
       color = _ref.color,
       testId = _ref.testId,
-      positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$2g);
+      positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$2h);
 
   var positionStyles = usePositionStyles(positionProps);
   var elementProps = {
     style: _extends({
-      color: color
+      color: getColor(color)
     }, positionStyles),
-    className: classnames(styles$m['text'], (_classnames = {}, _classnames[styles$m['text--bold']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD), _classnames[styles$m['text--italic']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC), _classnames[styles$m['text--underline']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE), _classnames[styles$m['text--monospace']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE), _classnames[styles$m['text--align-left']] = alignment === ALIGNMENTS.LEFT, _classnames[styles$m['text--align-right']] = alignment === ALIGNMENTS.RIGHT, _classnames[styles$m['text--align-center']] = alignment === ALIGNMENTS.CENTER, _classnames[styles$m['text--align-justify']] = alignment === ALIGNMENTS.JUSTIFY, _classnames[styles$m['text__body']] = as === TEXT_TYPES.BODY, _classnames[styles$m['text__insight']] = as === TEXT_TYPES.INSIGHT, _classnames[styles$m['text__caption']] = as === TEXT_TYPES.CAPTION, _classnames)),
+    className: classnames(styles$o['text'], (_classnames = {}, _classnames[styles$o['text--bold']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD), _classnames[styles$o['text--italic']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC), _classnames[styles$o['text--underline']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE), _classnames[styles$o['text--monospace']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE), _classnames[styles$o['text--align-left']] = alignment === ALIGNMENTS.LEFT, _classnames[styles$o['text--align-right']] = alignment === ALIGNMENTS.RIGHT, _classnames[styles$o['text--align-center']] = alignment === ALIGNMENTS.CENTER, _classnames[styles$o['text--align-justify']] = alignment === ALIGNMENTS.JUSTIFY, _classnames[styles$o['text__body']] = as === TEXT_TYPES.BODY, _classnames[styles$o['text__insight']] = as === TEXT_TYPES.INSIGHT, _classnames[styles$o['text__caption']] = as === TEXT_TYPES.CAPTION, _classnames)),
     'data-testid': testId
   };
   var pTypes = [TEXT_TYPES.BODY, TEXT_TYPES.CAPTION, TEXT_TYPES.INSIGHT];
@@ -5109,37 +5456,24 @@ var Text = function Text(_ref) {
 var Bold = function Bold(_ref) {
   var children = _ref.children;
   return React__default.createElement("span", {
-    className: classnames(styles$m['text--bold'], styles$m['text'])
+    className: classnames(styles$o['text--bold'], styles$o['text'])
   }, children);
 };
 
 var Underline = function Underline(_ref) {
   var children = _ref.children;
   return React__default.createElement("span", {
-    className: classnames(styles$m['text--underline'], styles$m['text'])
+    className: classnames(styles$o['text--underline'], styles$o['text'])
   }, children);
 };
 
 var Italic = function Italic(_ref) {
   var children = _ref.children;
   return React__default.createElement("span", {
-    className: classnames(styles$m['text--italic'], styles$m['text'])
+    className: classnames(styles$o['text--italic'], styles$o['text'])
   }, children);
 };
 
-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 DropdownListItem = function DropdownListItem(_ref) {
   var _classNames;
 
@@ -5168,18 +5502,18 @@ var DropdownListItem = function DropdownListItem(_ref) {
 
   var getCaptionColor = function getCaptionColor() {
     if (selected) {
-      return EGGPLANT500;
+      return 'eggplant-500';
     }
 
     if (disabled) {
-      return GREY400;
+      return 'grey-400';
     }
 
     return undefined;
   };
 
   return React__default.createElement("li", {
-    className: classnames(styles$l['dropdown-list-item'], (_classNames = {}, _classNames[styles$l['dropdown-list-item--selected']] = selected, _classNames[styles$l['dropdown-list-item--disabled']] = disabled, _classNames)),
+    className: classnames(styles$n['dropdown-list-item'], (_classNames = {}, _classNames[styles$n['dropdown-list-item--selected']] = selected, _classNames[styles$n['dropdown-list-item--disabled']] = disabled, _classNames)),
     onMouseDown: function onMouseDown(e) {
       return e.preventDefault();
     },
@@ -5188,7 +5522,7 @@ var DropdownListItem = function DropdownListItem(_ref) {
     role: "menuitem",
     "data-testid": testId
   }, prefix, React__default.createElement("div", {
-    className: styles$l['dropdown-list-item__content']
+    className: styles$n['dropdown-list-item__content']
   }, React__default.createElement(Stack, {
     space: 4,
     flex: [1]
@@ -5280,7 +5614,7 @@ var DropdownList = function DropdownList(_ref) {
     }
   }, [highlightItemIndex]);
   return React__default.createElement("ul", {
-    className: styles$j['dropdown-list'],
+    className: styles$l['dropdown-list'],
     "data-testid": testId,
     ref: listRef
   }, React__default.Children.map(children, function (child, index) {
@@ -5288,7 +5622,7 @@ var DropdownList = function DropdownList(_ref) {
 
     return React__default.createElement("div", {
       key: index,
-      className: classnames(styles$j['dropdown-list__item'], (_classNames = {}, _classNames[styles$j['dropdown-list__item--hover']] = focusedItem === index, _classNames)),
+      className: classnames(styles$l['dropdown-list__item'], (_classNames = {}, _classNames[styles$l['dropdown-list__item--hover']] = focusedItem === index, _classNames)),
       onMouseEnter: function onMouseEnter() {
         return setFocusOnItem(index);
       }
@@ -5296,537 +5630,438 @@ var DropdownList = function DropdownList(_ref) {
   }));
 };
 
-var styles$n = {"label":"_h724f","label--truncate":"_1VUoF"};
-
-var isEllipsisActive = function isEllipsisActive(e) {
-  return e.offsetWidth < e.scrollWidth;
-};
-
-var useLabelTooltip = function useLabelTooltip(labelId, tooltipContent, truncate) {
-  var _useState = useState(false),
-      showTooltip = _useState[0],
-      setShowTooltip = _useState[1];
-
-  var shouldTruncate = typeof tooltipContent === 'string' && truncate;
-  var labelElement = document.getElementById(labelId);
-  var isHidden = labelElement && labelElement.offsetParent === null;
-  var handleApplyTooltip = useCallback(function () {
-    if (!shouldTruncate) {
-      return;
-    }
-
-    var labelElement = document.getElementById(labelId);
-
-    if (!labelElement) {
-      return;
-    }
-
-    var shouldShowTooltip = isEllipsisActive(labelElement);
-
-    if (showTooltip !== shouldShowTooltip) {
-      setShowTooltip(shouldShowTooltip);
-    }
-  }, [shouldTruncate, isHidden]);
-  useEffect(function () {
-    var onWindowResize = debounce(handleApplyTooltip, 300);
-    window.addEventListener('resize', onWindowResize);
-    return function () {
-      return window.removeEventListener('resize', onWindowResize);
-    };
-  }, [handleApplyTooltip]);
-  useLayoutEffect(handleApplyTooltip, [handleApplyTooltip]);
-  return {
-    showTooltip: showTooltip,
-    shouldTruncate: shouldTruncate
-  };
+var KebabMenu = function KebabMenu(_ref) {
+  var actions = _ref.actions;
+  return React__default.createElement(Dropdown, {
+    trigger: React__default.createElement(Button$1, {
+      theme: "link-icon"
+    }, React__default.createElement(IconEllipsisV, null)),
+    alignment: "right"
+  }, React__default.createElement(DropdownList, null, actions.map(function (action) {
+    return !action.hidden && React__default.createElement(DropdownListItem, {
+      onClick: action.onAction,
+      key: action.action
+    }, action.label);
+  })));
 };
 
-var Label = function Label(_ref) {
-  var _classNames;
+var styles$p = {"data-table-cell":"_SpJZY","data-table-cell--no-padding":"_3R9X2","data-table-cell--vertical-border":"_6CjWl","data-table-cell--invalid":"_tvnPS","data-table-cell__content":"_2D9Do","data-table-cell__content--right-align":"_1HyJe","data-table-cell__content--with-error":"_3tEcf","data-table-cell__error-icon":"_2ctV2","data-table-cell__error-icon--right-align":"_2QAov","data-table-cell__error-icon--left-align":"_AzpZE"};
 
-  var htmlFor = _ref.htmlFor,
-      children = _ref.children,
-      _ref$truncate = _ref.truncate,
-      truncate = _ref$truncate === void 0 ? true : _ref$truncate;
-  var labelId = "label-" + htmlFor;
+var styles$q = {"overlay":"_2puqJ","overlay--after-open":"_1167h","overlay--before-close":"_t_t7L","content":"_wQQ_2","content--after-open":"_3jwux","content--before-close":"_2c2QP"};
 
-  var _useLabelTooltip = useLabelTooltip(labelId, children, truncate),
-      showTooltip = _useLabelTooltip.showTooltip,
-      shouldTruncate = _useLabelTooltip.shouldTruncate;
+var styles$r = {"header":"_36nxW","header__close-button":"_2zYre","sub-header":"_2XwRD"};
 
-  var LabelElement = React__default.createElement("label", {
-    htmlFor: htmlFor,
-    id: labelId,
-    className: classnames(styles$n['label'], (_classNames = {}, _classNames[styles$n['label--truncate']] = shouldTruncate, _classNames))
-  }, children);
+var ModalHeader = function ModalHeader(_ref) {
+  var header = _ref.header,
+      subHeader = _ref.subHeader,
+      onClose = _ref.onClose,
+      loading = _ref.loading;
 
-  if (showTooltip) {
-    return React__default.createElement(Tooltip$1, {
-      overlay: children,
-      placement: "top"
-    }, LabelElement);
+  if (!header && !subHeader) {
+    return onClose ? React__default.createElement("div", {
+      className: styles$r['header__close-button']
+    }, React__default.createElement(Button$1, {
+      theme: "link-icon",
+      onClick: onClose,
+      disabled: loading
+    }, React__default.createElement(IconTimes, null))) : null;
   }
 
-  return LabelElement;
-};
-
-var styles$o = {"caption":"_1DWBq"};
-
-var Caption = function Caption(_ref) {
-  var fieldId = _ref.fieldId,
-      children = _ref.children;
-  return React__default.createElement("div", {
-    id: fieldId && fieldId + "-describer",
-    className: styles$o['caption']
-  }, children);
-};
-
-var styles$p = {"error-message":"_nZ2MD"};
-
-var ErrorMessage = function ErrorMessage(_ref) {
-  var fieldId = _ref.fieldId,
-      children = _ref.children,
-      testId = _ref.testId;
-  return React__default.createElement("div", {
-    id: fieldId && fieldId + "-error-message",
-    className: styles$p['error-message'],
-    "data-testid": testId
+  return React__default.createElement(Stack, {
+    space: 12,
+    marginBottom: 24
   }, React__default.createElement(Inline, {
-    space: 8,
+    flex: [1],
     alignItems: "center"
-  }, React__default.createElement(IconTimesOctagon, {
-    color: RADISH400,
-    size: "medium"
-  }), children));
+  }, React__default.createElement("span", {
+    className: styles$r['header']
+  }, header), onClose && React__default.createElement(Button$1, {
+    theme: "link-icon",
+    onClick: onClose,
+    disabled: loading
+  }, React__default.createElement(IconTimes, null))), subHeader && React__default.createElement("div", {
+    className: styles$r['sub-header']
+  }, subHeader));
 };
 
-var Field = function Field(_ref) {
-  var id = _ref.id,
-      label = _ref.label,
-      caption = _ref.caption,
-      error = _ref.error,
-      children = _ref.children;
-  var shouldRenderLabel = label || typeof label === 'string';
-  return React__default.createElement(Stack, {
-    space: 8,
-    flexItems: true
-  }, shouldRenderLabel && React__default.createElement(Label, {
-    htmlFor: id
-  }, label), children, caption && React__default.createElement(Caption, {
-    fieldId: id
-  }, caption), error && React__default.createElement(ErrorMessage, {
-    fieldId: id
-  }, error));
+var ModalContext = createContext({
+  isModalMounted: false
+});
+var useModalContext = function useModalContext() {
+  var context = useContext(ModalContext);
+  return context || {};
 };
 
-var Context$1 = createContext({});
-var useFormContext = function useFormContext() {
-  var context = useContext(Context$1);
-  return context || {};
+var Modal = function Modal(_ref) {
+  var children = _ref.children,
+      header = _ref.header,
+      subHeader = _ref.subHeader,
+      onClose = _ref.onClose,
+      loading = _ref.loading,
+      _ref$zIndex = _ref.zIndex,
+      zIndex = _ref$zIndex === void 0 ? Z_INDEX_LAYERS.MODAL : _ref$zIndex,
+      rootElementId = _ref.rootElementId,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 500 : _ref$width,
+      height = _ref.height,
+      maxWidth = _ref.maxWidth,
+      _ref$shouldReturnFocu = _ref.shouldReturnFocusAfterClose,
+      shouldReturnFocusAfterClose = _ref$shouldReturnFocu === void 0 ? true : _ref$shouldReturnFocu,
+      testId = _ref.testId;
+  var style = {
+    content: {
+      width: width,
+      height: height,
+      maxWidth: maxWidth
+    },
+    overlay: {
+      zIndex: zIndex
+    }
+  };
+  return React__default.createElement(ReactModal, {
+    isOpen: true,
+    testId: testId,
+    shouldCloseOnEsc: true,
+    shouldCloseOnOverlayClick: false,
+    shouldReturnFocusAfterClose: shouldReturnFocusAfterClose,
+    onRequestClose: onClose && !loading ? onClose : undefined,
+    style: style,
+    closeTimeoutMS: 200,
+    contentLabel: "Modal",
+    appElement: rootElementId && document.getElementById(rootElementId) || undefined,
+    overlayClassName: {
+      base: styles$q['overlay'],
+      afterOpen: styles$q['overlay--after-open'],
+      beforeClose: styles$q['overlay--before-close']
+    },
+    className: {
+      base: styles$q['content'],
+      afterOpen: styles$q['content--after-open'],
+      beforeClose: styles$q['content--before-close']
+    }
+  }, React__default.createElement(ModalHeader, {
+    header: header,
+    subHeader: subHeader,
+    onClose: onClose,
+    loading: loading
+  }), React__default.createElement(ModalContext.Provider, {
+    value: {
+      isModalMounted: true
+    }
+  }, children));
 };
 
-var useFieldId = function useFieldId(_ref) {
-  var name = _ref.name,
-      inputId = _ref.id;
-  var id = useMemo(function () {
-    return inputId ? inputId : name + "-" + Math.random();
-  }, [inputId, name]);
-  return id;
+Modal.setAppElement = function (rootElement) {
+  ReactModal.setAppElement(rootElement);
 };
 
-var getFormikState = function getFormikState(name, formik) {
-  if (formik === undefined) {
-    return null;
-  }
+var THRESHOLD = 20;
+var useScrollShadow = function useScrollShadow() {
+  var ref = useRef(null);
 
-  var formikPath = getFormikArrayPath(name);
+  var _useState = useState(false),
+      showScrollShadow = _useState[0],
+      setShowScrollShadow = _useState[1];
 
-  if (formikPath.length === 0) {
-    return null;
-  }
+  useEffect(function () {
+    if (!ref.current) {
+      return;
+    }
 
-  var formikLatestLevel = formikPath.reduce(function (acc, path) {
-    var _acc$touched, _acc$error, _acc$value;
+    var modalBody = ref.current;
 
-    return {
-      touched: (_acc$touched = acc.touched) === null || _acc$touched === void 0 ? void 0 : _acc$touched[path],
-      error: (_acc$error = acc.error) === null || _acc$error === void 0 ? void 0 : _acc$error[path],
-      value: (_acc$value = acc.value) === null || _acc$value === void 0 ? void 0 : _acc$value[path]
-    };
-  }, {
-    touched: formik.touched,
-    error: formik.errors,
-    value: formik.values
-  });
+    if (modalBody.offsetHeight > THRESHOLD) {
+      setShowScrollShadow(true);
+    }
+  }, []);
   return {
-    error: formikLatestLevel.touched ? formikLatestLevel.error : undefined,
-    value: formikLatestLevel.value
+    ref: ref,
+    showScrollShadow: showScrollShadow
   };
 };
-var getFormikArrayPath = function getFormikArrayPath(name) {
-  return name.split(/[^a-zA-Z0-9]/).filter(Boolean);
-};
-
-var useFieldControllers = function useFieldControllers(_ref) {
-  var name = _ref.name,
-      inputId = _ref.id,
-      value = _ref.value,
-      _onChange = _ref.onChange,
-      _onBlur = _ref.onBlur,
-      _onFocus = _ref.onFocus,
-      _onKeyDown = _ref.onKeyDown,
-      error = _ref.error,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type;
 
-  var _useFormContext = useFormContext(),
-      formik = _useFormContext.formik;
+var styles$s = {"modal-body":"_2J-ku","modal-body--with-scroll-shadow":"_2ErCP"};
 
-  var id = useFieldId({
-    name: name,
-    id: inputId
-  });
-  var controllers = {
-    id: id,
-    error: error,
-    value: value,
-    onChange: function onChange(e) {
-      return _onChange && _onChange(e.target.value);
-    },
-    onBlur: function onBlur(e) {
-      return _onBlur && _onBlur(e.target.value);
-    },
-    onFocus: function onFocus(e) {
-      return _onFocus && _onFocus(e.target.value);
-    },
-    onKeyDown: function onKeyDown(e) {
-      return _onKeyDown && _onKeyDown(e.key);
-    }
-  };
-  var formikState = getFormikState(name, formik);
+var ModalBody = function ModalBody(_ref) {
+  var _classNames;
 
-  if (formik && formikState) {
-    var currencyBlur = function currencyBlur() {
-      if (type === 'currency') {
-        formik.setFieldValue(name, Number(value).toFixed(2));
-      }
-    };
+  var children = _ref.children,
+      testId = _ref.testId;
 
-    controllers = _extends({}, controllers, {
-      error: error !== undefined ? controllers.error : formikState.error,
-      value: value !== undefined ? controllers.value : formikState.value,
-      onChange: _onChange ? controllers.onChange : function (e) {
-        return formik.setFieldValue(name, e.target.value);
-      },
-      onBlur: _onBlur ? function (e) {
-        _onBlur && _onBlur(e.target.value);
-        formik.setFieldTouched(name);
-        currencyBlur();
-      } : function () {
-        formik.setFieldTouched(name);
-        currencyBlur();
-      }
-    });
-  }
+  var _useScrollShadow = useScrollShadow(),
+      ref = _useScrollShadow.ref,
+      showScrollShadow = _useScrollShadow.showScrollShadow;
 
-  return controllers;
+  return React__default.createElement("div", {
+    className: classnames(styles$s['modal-body'], (_classNames = {}, _classNames[styles$s['modal-body--with-scroll-shadow']] = showScrollShadow, _classNames)),
+    ref: ref,
+    "data-testid": testId
+  }, children);
 };
 
-var textFieldStyles = {"text-field":"_20YOA","text-field--invalid":"_3kUSh","text-field--prefixed":"_3IU3Q","text-field--suffixed":"_QXJOD"};
+var styles$t = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
 
-var useTextField = function useTextField(_ref) {
-  var _classnames;
+var updateButtonProps = function updateButtonProps(button, newProps) {
+  if (!button) {
+    return null;
+  }
 
-  var autoComplete = _ref.autoComplete,
-      autoFocus = _ref.autoFocus,
-      defaultValue = _ref.defaultValue,
-      disabled = _ref.disabled,
-      error = _ref.error,
-      id = _ref.id,
-      maxLength = _ref.maxLength,
-      name = _ref.name,
-      caption = _ref.caption,
-      label = _ref.label,
-      onBlur = _ref.onBlur,
-      onChange = _ref.onChange,
-      onFocus = _ref.onFocus,
-      onKeyDown = _ref.onKeyDown,
-      placeholder = _ref.placeholder,
-      value = _ref.value,
-      ref = _ref.ref,
-      testId = _ref.testId;
-  var controllers = useFieldControllers({
-    error: error,
-    id: id,
-    name: name,
-    onChange: onChange,
-    onBlur: onBlur,
-    onFocus: onFocus,
-    onKeyDown: onKeyDown,
-    value: value
-  });
-  var hasError = !!controllers.error;
-  var inputProps = {
-    'aria-describedby': hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
-    'aria-invalid': hasError,
-    autoComplete: autoComplete,
-    autoFocus: autoFocus,
-    className: classnames(textFieldStyles['text-field'], (_classnames = {}, _classnames[textFieldStyles['text-field--invalid']] = hasError, _classnames)),
-    'data-testid': testId,
-    disabled: disabled,
-    defaultValue: defaultValue,
-    id: controllers.id,
-    maxLength: maxLength,
-    name: name,
-    onBlur: controllers.onBlur,
-    onChange: controllers.onChange,
-    onFocus: controllers.onFocus,
-    onKeyDown: controllers.onKeyDown,
-    placeholder: placeholder,
-    ref: ref,
-    size: 1,
-    type: 'text',
-    value: controllers.value
-  };
-  var fieldProps = {
-    caption: caption,
-    error: controllers.error,
-    label: label,
-    id: inputProps.id,
-    name: name
-  };
-  return {
-    inputProps: inputProps,
-    fieldProps: fieldProps
-  };
-};
+  if (button.type !== Button$1) {
+    return button;
+  }
 
-var TimeFieldInput = function TimeFieldInput(_ref) {
-  var inputProps = _ref.inputProps,
-      allOtherProps = _ref.allOtherProps;
-  return React__default.createElement("input", Object.assign({}, inputProps, {
-    onBlur: function onBlur(e) {
-      e.target.value = parseTime(e.target.value, 'g:i A');
-      inputProps.onChange(e);
-      inputProps.onBlur(e);
-    },
-    onClick: allOtherProps.onClick,
-    onMouseEnter: allOtherProps.onMouseEnter,
-    onMouseLeave: allOtherProps.onMouseLeave,
-    onInput: function onInput(e) {
-      var target = e.target;
-      allOtherProps.onInputChange(target.value);
-    }
-  }));
+  return React__default.cloneElement(button, _extends({}, newProps));
 };
 
-var _excluded$2h = ["placeholder", "autoComplete", "selectedTimeOption"];
+var ModalFooter = function ModalFooter(_ref) {
+  var children = _ref.children,
+      actions = _ref.actions,
+      testId = _ref.testId;
 
-var TimeFieldDropdownElement = function TimeFieldDropdownElement(_ref, ref) {
-  var _ref$placeholder = _ref.placeholder,
-      placeholder = _ref$placeholder === void 0 ? '9:00 AM' : _ref$placeholder,
-      _ref$autoComplete = _ref.autoComplete,
-      autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
-      selectedTimeOption = _ref.selectedTimeOption,
-      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2h);
+  if (actions) {
+    var _actions$primary, _actions$secondary, _actions$tertiary, _classnames;
 
-  var _useTextField = useTextField(_extends({}, allOtherProps, {
-    placeholder: placeholder,
-    autoComplete: autoComplete,
-    ref: ref
-  })),
-      inputProps = _useTextField.inputProps,
-      fieldProps = _useTextField.fieldProps;
+    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',
+      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
+    });
+    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',
+      size: BUTTON_SIZES.MIN_WIDTH_100
+    });
+    return React__default.createElement(FooterContainer, {
+      testId: testId
+    }, React__default.createElement(Inline, {
+      justifyContent: "space-between"
+    }, React__default.createElement("div", {
+      className: classnames((_classnames = {}, _classnames[styles$t['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
+    }, tertiaryButton || React__default.createElement("div", null)), React__default.createElement(Inline, {
+      space: 12
+    }, secondaryButton, primaryButton)));
+  }
+
+  return React__default.createElement(FooterContainer, null, children);
+};
 
-  useEffect(function () {
-    if (selectedTimeOption) {
-      inputProps.onChange({
-        target: {
-          value: selectedTimeOption
-        }
-      });
-    }
-  }, [selectedTimeOption]);
-  return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(TimeFieldInput, {
-    inputProps: inputProps,
-    allOtherProps: allOtherProps
-  }));
+var FooterContainer = function FooterContainer(_ref2) {
+  var children = _ref2.children,
+      testId = _ref2.testId;
+  var childrenItens = React__default.Children.toArray(children);
+  var hasCustomAlignment = childrenItens.length === 1 && childrenItens[0].type === Inline;
+  return React__default.createElement("div", {
+    className: styles$t['modal-footer'],
+    "data-testid": testId
+  }, React__default.createElement(Inline, {
+    justifyContent: "end",
+    space: 12,
+    flex: hasCustomAlignment ? [1] : undefined
+  }, children));
 };
 
-var TimeFieldDropdownTrigger = forwardRef(TimeFieldDropdownElement);
+var styles$u = {"container":"_v1b-5","wrapper":"_3mrLu","interactionDisabled":"_1J9dh","DayPicker-Day":"_8FcQE","navBar":"_1SPuq","todayButton":"_24FJ6","navButtonInteractionDisabled":"_Oxdm9","navButtonPrev":"_20uqc","navButtonNext":"_3C53z","months":"_M_eHz","month":"_3RPpJ","caption":"_1FXNw","weekdays":"_3KcRU","weekdaysRow":"_1fO_e","weekday":"_c1Y-X","body":"_34mA1","week":"_1PmqZ","day":"_1AWH2","disabled":"_3vJkw","selected":"_1DR0N","outside":"_276GV","footer":"_2M5xr","today":"_3N6fj","overlayWrapper":"_3Zqgu","overlay":"_20Ncd","weekNumber":"_2hb-S"};
 
-var Dropdown = function Dropdown(_ref) {
-  var trigger = _ref.trigger,
-      _ref$triggersOn = _ref.triggersOn,
-      triggersOn = _ref$triggersOn === void 0 ? DROPDOWN_TRIGGER.CLICK : _ref$triggersOn,
-      _ref$alignment = _ref.alignment,
-      alignment = _ref$alignment === void 0 ? DROPDOWN_ALIGNEMNT.RIGHT : _ref$alignment,
-      width = _ref.width,
-      maxHeight = _ref.maxHeight,
-      testId = _ref.testId,
-      children = _ref.children,
-      triggerWidth = _ref.triggerWidth;
+var styles$v = {"container":"_okDvi","wrapper":"_17XdD","interactionDisabled":"_1O7OT","DayPicker-Day":"_3noGA","navBar":"_1Hl3Q","todayButton":"_m0Vs9","navButtonInteractionDisabled":"_1ULWH","navButtonPrev":"_3gjq8","navButtonNext":"_1m-Kd","months":"_Fq6Xh","month":"_3i0Oo","caption":"_36X9Y","weekdays":"_1aWPn","weekdaysRow":"_3HXCK","weekday":"_t-ctd","body":"_XAbiR","week":"_3Nwep","day":"_3nNcG","disabled":"_1M4ZF","selected":"_2PEs8","outside":"_1PIJa","footer":"_2T_z1","today":"_1hVM6","overlayWrapper":"_1L-hI","overlay":"_dDPZb","weekNumber":"_1alhT"};
 
-  var _useState = useState(false),
-      isOpen = _useState[0],
-      setIsOpen = _useState[1];
+function parseDate(str, format, locale) {
+  var parsed = dateFnsParse(str, format, new Date(), {
+    locale: locale
+  });
 
-  var triggerRef = useRef(null);
-  var paneRef = useRef(null);
-  var isFocusingOverlay = useRef(false);
+  if (str.length === format.length && DateUtils.isDate(parsed)) {
+    return parsed;
+  }
 
-  var handleToggleDropdown = function handleToggleDropdown() {
-    return setIsOpen(!isOpen);
+  return undefined;
+}
+function formatDate(date, format, locale) {
+  return dateFnsFormat(date, format, {
+    locale: locale
+  });
+}
+function setToMidnight(date) {
+  return date && startOfDay(date);
+}
+function getStartOfWeek(date, weekIndex) {
+  var d = new Date(date);
+  var firstDay = d.getDate() - d.getDay() + weekIndex;
+  var firstDayAdjusted = firstDay > d.getDate() ? firstDay - 7 : firstDay;
+  return new Date(d.setDate(firstDayAdjusted));
+}
+function getEndOfWeek(date, weekIndex) {
+  var startOfWeek = getStartOfWeek(date, weekIndex);
+  var endDay = startOfWeek.getDate() + 6;
+  return new Date(startOfWeek.setDate(endDay));
+}
+function createWeekRange(date, weekStart) {
+  return {
+    start: getStartOfWeek(date, weekStart),
+    end: getEndOfWeek(date, weekStart)
   };
+}
+var DAYS = [getLocalizedString('time.sunday'), getLocalizedString('time.monday'), getLocalizedString('time.tuesday'), getLocalizedString('time.wednesday'), getLocalizedString('time.thursday'), getLocalizedString('time.friday'), getLocalizedString('time.saturday')];
+var MONTH_NAMES = [getLocalizedString('time.january'), getLocalizedString('time.february'), getLocalizedString('time.march'), getLocalizedString('time.april'), getLocalizedString('time.may'), getLocalizedString('time.june'), getLocalizedString('time.july'), getLocalizedString('time.august'), getLocalizedString('time.september'), getLocalizedString('time.october'), getLocalizedString('time.november'), getLocalizedString('time.december')];
 
-  var handleMouseClick = function handleMouseClick(e) {
-    if (trigger.type === TimeFieldDropdownTrigger) {
-      setIsOpen(true);
-    } else {
-      handleToggleDropdown();
-    }
+var CALENDAR_MODE = {
+  DAY: 'day',
+  WEEK: 'week'
+};
+var CALENDAR_PLACEMENT = {
+  BOTTOM: 'bottom',
+  TOP: 'top'
+};
 
-    e.stopPropagation();
+var calculateCalendarPosition = function calculateCalendarPosition(placement, anchorPosition, calendarDimensions) {
+  if (!calendarDimensions) {
+    return {
+      left: 0,
+      top: 0
+    };
+  }
 
-    if ('onClick' in trigger.props) {
-      trigger.props.onClick(e);
-    }
-  };
+  var horizontalPosition = getHorizontalPosition(anchorPosition, calendarDimensions);
+  var verticalPosition = getVerticalPosition(anchorPosition, placement, calendarDimensions);
+  return _extends({}, horizontalPosition, verticalPosition);
+};
 
-  var handleMouseEnter = function handleMouseEnter(e) {
-    if (triggersOn !== 'hover') {
-      return;
-    }
+var getHorizontalPosition = function getHorizontalPosition(anchorPosition, calendarDimensions) {
+  var innerWidth = window.innerWidth;
+  var calendarRight = anchorPosition.left + calendarDimensions.width;
 
-    setIsOpen(true);
+  if (innerWidth > calendarRight + BUFFER) {
+    return {
+      left: anchorPosition.left
+    };
+  }
 
-    if ('onMouseEnter' in trigger.props) {
-      trigger.props.onMouseEnter(e);
-    }
+  return {
+    left: anchorPosition.right - calendarDimensions.width
   };
+};
 
-  var handleFocus = function handleFocus(e) {
-    if (triggersOn !== 'hover') {
-      if (trigger.type === TimeFieldDropdownTrigger && !isOpen) {
-        setIsOpen(true);
-      }
-
-      if ('onFocus' in trigger.props) {
-        trigger.props.onFocus(e);
-      }
-
-      return;
-    }
-
-    setIsOpen(true);
+var getVerticalPosition = function getVerticalPosition(anchorPosition, placement, calendarDimensions) {
+  var calendarTopAboveTrigger = anchorPosition.top - calendarDimensions.height - PADDING;
+  var calendarTopBelowTrigger = anchorPosition.bottom + PADDING;
 
-    if ('onFocus' in trigger.props) {
-      trigger.props.onFocus(e);
+  if (placement === CALENDAR_PLACEMENT.TOP) {
+    if (calendarTopAboveTrigger < 0) {
+      return {
+        top: anchorPosition.bottom + PADDING
+      };
     }
-  };
 
-  var handleMouseLeave = function handleMouseLeave(e) {
-    if (triggersOn !== 'hover' || !paneRef.current) {
-      return;
+    return {
+      top: calendarTopAboveTrigger + window.scrollY
+    };
+  } else {
+    if (calendarTopBelowTrigger + calendarDimensions.height > window.innerHeight) {
+      return {
+        top: calendarTopAboveTrigger + window.scrollY
+      };
     }
 
-    var panePosition = paneRef.current.getBoundingClientRect();
-
-    if (!isGoingTowardsPane(panePosition, e.clientY)) {
-      setIsOpen(false);
+    return {
+      top: calendarTopBelowTrigger + window.scrollY
+    };
+  }
+};
 
-      if ('onMouseLeave' in trigger.props) {
-        trigger.props.onMouseLeave && trigger.props.onMouseLeave(e);
-      }
-    }
-  };
+var Calendar = function Calendar(_ref) {
+  var _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? CALENDAR_MODE.DAY : _ref$mode,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? CALENDAR_PLACEMENT.BOTTOM : _ref$position,
+      _ref$weekStart = _ref.weekStart,
+      weekStart = _ref$weekStart === void 0 ? 0 : _ref$weekStart,
+      selected = _ref.selected,
+      onSelect = _ref.onSelect,
+      onClickOutside = _ref.onClickOutside,
+      disabledDays = _ref.disabledDays,
+      anchorRef = _ref.anchorRef,
+      testId = _ref.testId;
 
-  var handlePaneMouseEnter = function handlePaneMouseEnter() {
-    isFocusingOverlay.current = true;
-  };
+  var _useState = useState(null),
+      calendarRef = _useState[0],
+      setCalendarRef = _useState[1];
 
-  var handlePaneMouseLeave = function handlePaneMouseLeave() {
-    isFocusingOverlay.current = false;
+  var style = mode === CALENDAR_MODE.DAY ? styles$u : styles$v;
+  var anchorNode = anchorRef.current;
+  useOnClickOutside({
+    current: calendarRef
+  }, function (event) {
+    var _anchorRef$current;
 
-    if (triggersOn === 'hover') {
-      setIsOpen(false);
+    if (!((_anchorRef$current = anchorRef.current) !== null && _anchorRef$current !== void 0 && _anchorRef$current.contains(event === null || event === void 0 ? void 0 : event.srcElement))) {
+      onClickOutside();
     }
+  });
+  var weekRange = selected ? createWeekRange(selected, weekStart) : undefined;
+  var selectedRange = weekRange && {
+    from: weekRange.start,
+    to: weekRange.end
   };
 
-  var handleOnBlur = function handleOnBlur() {
-    if (!paneRef || !(paneRef !== null && paneRef !== void 0 && paneRef.current)) {
-      return;
-    }
-
-    var focusableElements = getKeyboardFocusableElements(paneRef.current);
+  var handleSelect = function handleSelect(day) {
+    var selectedDate = setToMidnight(day);
 
-    if (focusableElements.length > 0) {
-      window.setTimeout(function () {
-        return focusableElements[0].focus();
-      }, 0);
-    } else if (!isFocusingOverlay.current) {
-      setIsOpen(false);
-    }
-  };
+    if (mode === CALENDAR_MODE.DAY) {
+      onSelect(selectedDate);
+    } else {
+      var _weekRange = createWeekRange(selectedDate, weekStart);
 
-  var getRef = function getRef() {
-    if ((trigger.type === Button$1 || trigger.type === TimeFieldDropdownTrigger) && trigger.ref) {
-      return trigger.ref;
+      onSelect(_weekRange.start);
     }
 
-    return triggerRef;
+    setTimeout(function () {
+      onClickOutside();
+    }, 100);
   };
 
-  var updatedRef = getRef();
-  var triggerProps = {
-    onClick: handleMouseClick,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    onBlur: handleOnBlur,
-    ref: updatedRef,
-    style: {
-      width: triggerWidth === 'full' ? '100%' : 'fit-content'
+  if (!anchorNode) {
+    return null;
+  }
+
+  var anchorPosition = anchorNode.getBoundingClientRect();
+  var calendarPosition = calculateCalendarPosition(position, anchorPosition, calendarRef === null || calendarRef === void 0 ? void 0 : calendarRef.getBoundingClientRect());
+  return React__default.createElement(Portal, null, React__default.createElement("div", {
+    className: style.overlayWrapper
+  }, React__default.createElement("div", {
+    className: style.overlay,
+    ref: function ref(_ref2) {
+      return setCalendarRef(_ref2);
     },
-    onFocus: handleFocus
-  };
-  return React__default.createElement(DropdownContext.Provider, {
-    value: {
-      isOpen: isOpen,
-      onToggleDropdown: handleToggleDropdown,
-      triggerRef: updatedRef,
-      paneRef: paneRef
-    }
-  }, trigger.type === Button$1 || trigger.type === TimeFieldDropdownTrigger ? React__default.cloneElement(trigger, _extends({}, trigger.props, triggerProps)) : React__default.createElement("button", Object.assign({}, triggerProps, {
-    className: styles$c['dropdown__trigger'],
-    ref: updatedRef,
-    onFocus: handleFocus
-  }), trigger), React__default.createElement(DropdownPane, {
-    width: width,
-    maxHeight: maxHeight,
-    onMouseEnter: handlePaneMouseEnter,
-    onMouseLeave: handlePaneMouseLeave,
-    alignment: alignment,
-    testId: testId
-  }, children));
-};
+    style: _extends({}, calendarPosition, {
+      zIndex: Z_INDEX_LAYERS.MODAL
+    }),
+    "data-testid": testId
+  }, React__default.createElement(DayPicker, {
+    format: "MM/dd/yyyy",
+    classNames: style,
+    onDayClick: function onDayClick(day, activeModifiers) {
+      var isDateDisabled = Object.keys(activeModifiers).find(function (modifier) {
+        return modifier.includes('disabled');
+      });
 
-var KebabMenu = function KebabMenu(_ref) {
-  var actions = _ref.actions;
-  return React__default.createElement(Dropdown, {
-    trigger: React__default.createElement(Button$1, {
-      theme: "link-icon"
-    }, React__default.createElement(IconEllipsisV, null)),
-    alignment: "right"
-  }, React__default.createElement(DropdownList, null, actions.map(function (action) {
-    return React__default.createElement(DropdownListItem, {
-      onClick: action.onAction,
-      key: action.action
-    }, action.label);
-  })));
+      if (!Boolean(isDateDisabled)) {
+        handleSelect(day);
+      }
+    },
+    selectedDays: mode === CALENDAR_MODE.DAY ? selected : selectedRange,
+    disabledDays: disabledDays,
+    months: MONTH_NAMES,
+    weekdaysLong: DAYS,
+    initialMonth: selected,
+    weekdaysShort: DAYS.map(function (day) {
+      return day.substring(0, 2);
+    }),
+    showOutsideDays: mode === CALENDAR_MODE.WEEK,
+    firstDayOfWeek: weekStart
+  }))));
 };
 
-var styles$q = {"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 DataTableCellElement = function DataTableCellElement(_ref, ref) {
   var _columns$columnIndex, _classnames, _classnames2, _classnames3;
 
@@ -5848,17 +6083,17 @@ var DataTableCellElement = function DataTableCellElement(_ref, ref) {
   var hasError = !!error;
   var errorMessage = error;
   var icon = hasError && React__default.createElement("div", {
-    className: classnames(styles$q['data-table-cell__error-icon'], (_classnames = {}, _classnames[styles$q['data-table-cell__error-icon--right-align']] = isRightAligned, _classnames[styles$q['data-table-cell__error-icon--left-align']] = !isRightAligned, _classnames))
+    className: classnames(styles$p['data-table-cell__error-icon'], (_classnames = {}, _classnames[styles$p['data-table-cell__error-icon--right-align']] = isRightAligned, _classnames[styles$p['data-table-cell__error-icon--left-align']] = !isRightAligned, _classnames))
   }, React__default.createElement(IconTimesOctagon, {
     size: "medium",
-    color: RADISH400
+    color: "radish-400"
   }));
   var TableCell = React__default.createElement("td", {
-    className: classnames((_classnames2 = {}, _classnames2[styles$q['data-table-cell--invalid']] = hasError, _classnames2[styles$q['data-table-cell--no-padding']] = noPadding, _classnames2[styles$q['data-table-cell--vertical-border']] = hasVerticalBorders, _classnames2), styles$q['data-table-cell']),
+    className: classnames((_classnames2 = {}, _classnames2[styles$p['data-table-cell--invalid']] = hasError, _classnames2[styles$p['data-table-cell--no-padding']] = noPadding, _classnames2[styles$p['data-table-cell--vertical-border']] = hasVerticalBorders, _classnames2), styles$p['data-table-cell']),
     colSpan: colSpan,
     ref: ref
   }, React__default.createElement("div", {
-    className: classnames(styles$q['data-table-cell__content'], (_classnames3 = {}, _classnames3[styles$q['data-table-cell__content--with-error']] = hasError, _classnames3[styles$q['data-table-cell__content--right-align']] = isRightAligned, _classnames3))
+    className: classnames(styles$p['data-table-cell__content'], (_classnames3 = {}, _classnames3[styles$p['data-table-cell__content--with-error']] = hasError, _classnames3[styles$p['data-table-cell__content--right-align']] = isRightAligned, _classnames3))
   }, isRightAligned && icon, children, !isRightAligned && icon));
   return React__default.createElement(Tooltip$1, {
     overlay: errorMessage,
@@ -5882,7 +6117,7 @@ var DataTableRowActions = function DataTableRowActions(_ref) {
   return React__default.createElement(DataTableCell, {
     columnIndex: columnIndex
   }, React__default.createElement("div", {
-    className: styles$a['actions'],
+    className: styles$e['actions'],
     "data-testid": "data-table-dropdown-menu"
   }, sideActions.length > 0 && sideActions.map(function (action) {
     return React__default.createElement(Button$1, Object.assign({
@@ -5895,60 +6130,7 @@ var DataTableRowActions = function DataTableRowActions(_ref) {
   })));
 };
 
-var styles$r = {"affix-container":"_ybKOk","affix-container--prefixed":"_2COk3","affix-container--suffixed":"_1xXXN","prefix":"_eX5OL","suffix":"__YH01"};
-
-var AffixContainer = function AffixContainer(_ref) {
-  var _classnames;
-
-  var prefix = _ref.prefix,
-      suffix = _ref.suffix,
-      children = _ref.children,
-      testId = _ref.testId;
-  var container = useRef(null);
-  var prefixElement = useRef(null);
-  var suffixElement = useRef(null);
-  var isHidden = container.current && container.current.offsetParent === null;
-  useLayoutEffect(function () {
-    if (container.current) {
-      var input = container.current.querySelector('input, [class$=control] > div');
-
-      if (input) {
-        if (prefix && prefixElement.current) {
-          var _prefixElement$curren;
-
-          var prefixWidth = prefixElement === null || prefixElement === void 0 ? void 0 : (_prefixElement$curren = prefixElement.current) === null || _prefixElement$curren === void 0 ? void 0 : _prefixElement$curren.offsetWidth;
-          input.style.paddingLeft = prefixWidth + 'px';
-        }
-
-        if (suffix && suffixElement.current) {
-          var suffixWidth = suffixElement.current.offsetWidth;
-          input.style.paddingRight = suffixWidth + 'px';
-        }
-      }
-    }
-  }, [prefix, suffix, isHidden]);
-  var hasPrefix = !!prefix;
-  var hasSuffix = !!suffix;
-
-  if (!hasPrefix && !hasSuffix) {
-    return children;
-  }
-
-  var classes = classnames(styles$r['affix-container'], (_classnames = {}, _classnames[styles$r['affix-container--prefixed']] = hasPrefix, _classnames[styles$r['affix-container--suffixed']] = hasSuffix, _classnames));
-  return React__default.createElement("div", {
-    className: classes,
-    ref: container,
-    "data-testid": testId
-  }, hasPrefix && React__default.createElement("div", {
-    className: styles$r['prefix'],
-    ref: prefixElement
-  }, prefix), children, hasSuffix && React__default.createElement("div", {
-    className: styles$r['suffix'],
-    ref: suffixElement
-  }, suffix));
-};
-
-var styles$s = {"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$w = {"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;
@@ -5997,7 +6179,7 @@ var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, r
     id: controllers.id
   };
   var EditableCell = React__default.createElement("div", {
-    className: classnames((_classnames = {}, _classnames[styles$s['data-table-editable-cell--currency']] = type === 'currency', _classnames), styles$s['data-table-editable-cell']),
+    className: classnames((_classnames = {}, _classnames[styles$w['data-table-editable-cell--currency']] = type === 'currency', _classnames), styles$w['data-table-editable-cell']),
     "data-testid": testId,
     role: "cell"
   }, React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
@@ -6006,249 +6188,103 @@ var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, r
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames((_classnames2 = {}, _classnames2[styles$s['data-table-editable-cell--right-aligned']] = isRightAligned, _classnames2[styles$s['data-table-editable-cell--top-left']] = isTopLeftCell, _classnames2[styles$s['data-table-editable-cell--top-right']] = isTopRightCell, _classnames2[styles$s['data-table-editable-cell--bottom-left']] = isBottomLeftCell, _classnames2[styles$s['data-table-editable-cell--bottom-right']] = isBottomRightCell, _classnames2[styles$s['data-table-editable-cell--invalid']] = hasError, _classnames2)),
+    className: classnames((_classnames2 = {}, _classnames2[styles$w['data-table-editable-cell--right-aligned']] = isRightAligned, _classnames2[styles$w['data-table-editable-cell--top-left']] = isTopLeftCell, _classnames2[styles$w['data-table-editable-cell--top-right']] = isTopRightCell, _classnames2[styles$w['data-table-editable-cell--bottom-left']] = isBottomLeftCell, _classnames2[styles$w['data-table-editable-cell--bottom-right']] = isBottomRightCell, _classnames2[styles$w['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,
-    onWheel: function onWheel(e) {
-      e.target.blur();
-    }
-  }))));
-  return React__default.createElement(Tooltip$1, {
-    overlay: errorMessage,
-    placement: "top",
-    theme: "white"
-  }, EditableCell);
-};
-
-var DataTableEditableCell = forwardRef(DataTableEditableCellElement);
-
-var _excluded$2i = ["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$2i);
-
-  var _useDataTableContext = useDataTableContext(),
-      showActionMenu = _useDataTableContext.showActionMenu;
-
-  var styleNames = classnames(styles$9['item'], (_classnames = {}, _classnames[styles$9['clickable']] = onClick, _classnames[styles$9['selected']] = isSelected, _classnames));
-
-  var renderColumn = function renderColumn(columnElement, index) {
-    var isUsingDataTableCell = columnElement && typeof columnElement === 'object' && 'type' in columnElement && (columnElement === null || columnElement === void 0 ? void 0 : columnElement.type) === DataTableCell;
-
-    if (isUsingDataTableCell || !hasDefaultCell) {
-      return columnElement;
-    }
-
-    var isUsingDataTableEditableCell = columnElement && typeof columnElement === 'object' && 'type' in columnElement && (columnElement === null || columnElement === void 0 ? void 0 : columnElement.type) === DataTableEditableCell;
-    return React__default.createElement(DataTableCell, {
-      key: index,
-      columnIndex: index,
-      noPadding: !!isUsingDataTableEditableCell
-    }, columnElement);
-  };
-
-  return React__default.createElement("tr", Object.assign({}, nativeDivProps, {
-    className: styleNames,
-    onClick: onClick ? onClick : undefined,
-    onKeyPress: onClick ? onClick : undefined,
-    "data-testid": testId && testId + "-row",
-    role: "row",
-    ref: ref
-  }), React__default.Children.toArray(children).filter(Boolean).map(function (child, index) {
-    return renderColumn(child, index);
-  }), showActionMenu && React__default.createElement(DataTableRowActions, {
-    actions: actions,
-    columnIndex: React__default.Children.count(children)
-  }));
-};
-
-var DataTableRow = forwardRef(DataTableRowComponent);
-
-var styles$t = {"table-container":"_3qoNq","table-content":"_2HcDV","table-content--with-scroll":"_3dowz","table":"_tGpUv","table--no-columns":"_3VePT","header":"_2ZgmC","header-item":"_3slLU","header-item__content":"_1jb-H","header-item__content--right-align":"_2Np60","header-item--sortable":"_1-26z","header-item--action":"_2i1wY","header-sort-icon":"_BLrNe","body":"_CT4Lp","body--no-bottom-radius":"_1wU1R","footer":"_398L3","pagination-controls":"_2smmY"};
-
-var calculatePercentageOfProportion = function calculatePercentageOfProportion(proportionNumbers) {
-  var sum = proportionNumbers.reduce(function (total, num) {
-    return total + num;
-  }, 0);
-  var percentages = proportionNumbers.map(function (num) {
-    return parseFloat((num / sum * 100).toFixed(2));
-  });
-  return percentages;
-};
-
-var SORT_ORDER = {
-  ASC: 'asc',
-  DESC: 'desc'
-};
-
-var DataTableHeader = function DataTableHeader(_ref) {
-  var columns = _ref.columns,
-      onSort = _ref.onSort,
-      showActionMenu = _ref.showActionMenu;
-  var haveLabels = columns.find(function (column) {
-    return column.label && column.label !== '';
-  });
-
-  if (!haveLabels) {
-    return React__default.createElement(ColumnSizes, {
-      columns: columns,
-      showActionMenu: showActionMenu
-    });
-  }
-
-  var handleSort = function handleSort(column) {
-    var nextDirection = getNextSort(column);
-
-    if (onSort) {
-      onSort({
-        columnName: column.name,
-        direction: nextDirection
-      });
-    }
-  };
-
-  return React__default.createElement(Fragment, null, React__default.createElement(ColumnSizes, {
-    columns: columns,
-    showActionMenu: showActionMenu
-  }), React__default.createElement("thead", null, React__default.createElement("tr", {
-    className: styles$t['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$t['header-item']] = true, _classnames[styles$t['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$t['header-item__content'], (_classnames2 = {}, _classnames2[styles$t['header-item__content--right-align']] = isRightAligned, _classnames2))
-    }, column.label, ' ', isSortable && React__default.createElement("span", {
-      className: styles$t['header-sort-icon']
-    }, React__default.createElement(IconSort$1, {
-      sortDirection: sortDir
-    }))));
-  }), showActionMenu && React__default.createElement("th", {
-    className: classnames(styles$t['header-item'], styles$t['header-item--action'])
+    placeholder: placeholder,
+    defaultValue: defaultValue,
+    value: controllers.value,
+    onChange: controllers.onChange,
+    onBlur: controllers.onBlur,
+    ref: ref,
+    onWheel: function onWheel(e) {
+      e.target.blur();
+    }
   }))));
+  return React__default.createElement(Tooltip$1, {
+    overlay: errorMessage,
+    placement: "top",
+    theme: "white"
+  }, EditableCell);
 };
 
-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 DataTableEditableCell = forwardRef(DataTableEditableCellElement);
 
-var getNextSort = function getNextSort(column) {
-  switch (column.currentSort) {
-    case SORT_ORDER.ASC:
-      return null;
+var _excluded$2i = ["children", "onClick", "isSelected", "actions", "hasDefaultPadding", "hasDefaultCell", "testId"];
 
-    case SORT_ORDER.DESC:
-      return SORT_ORDER.ASC;
+var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
+  var _classnames;
 
-    default:
-      return SORT_ORDER.DESC;
-  }
-};
+  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$2i);
 
-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 _useDataTableContext = useDataTableContext(),
+      showActionMenu = _useDataTableContext.showActionMenu;
 
-var styles$u = {"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 styleNames = classnames(styles$d['item'], (_classnames = {}, _classnames[styles$d['clickable']] = onClick, _classnames[styles$d['selected']] = isSelected, _classnames));
 
-var DataTableScrollFakeBorder = function DataTableScrollFakeBorder(_ref) {
-  var _classNames, _classNames2, _classNames3;
+  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;
 
-  var placement = _ref.placement;
-  return React__default.createElement("div", {
-    className: classnames(styles$u['data-table-scroll-fake-border'], (_classNames = {}, _classNames[styles$u['data-table-scroll-fake-border--top']] = placement === 'top', _classNames[styles$u['data-table-scroll-fake-border--bottom']] = placement === 'bottom', _classNames))
-  }, React__default.createElement("div", {
-    className: classnames(styles$u['data-table-scroll-fake-border__left'], (_classNames2 = {}, _classNames2[styles$u['data-table-scroll-fake-border__left--top']] = placement === 'top', _classNames2[styles$u['data-table-scroll-fake-border__left--bottom']] = placement === 'bottom', _classNames2))
-  }), React__default.createElement("div", {
-    className: classnames(styles$u['data-table-scroll-fake-border__right'], (_classNames3 = {}, _classNames3[styles$u['data-table-scroll-fake-border__right--top']] = placement === 'top', _classNames3[styles$u['data-table-scroll-fake-border__right--bottom']] = placement === 'bottom', _classNames3))
+    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 styles$v = {"data-table-loading-block":"_94pbt"};
+var DataTableRow = forwardRef(DataTableRowComponent);
 
-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$v['data-table-loading-block']
-  }, React__default.createElement("td", {
-    colSpan: colSpan
-  }, React__default.createElement(Spinner, {
-    block: true
-  })));
+var DataTableDefaultItemComponent = function DataTableDefaultItemComponent(_ref) {
+  var columns = _ref.columns,
+      item = _ref.item,
+      testId = _ref.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 DataTable = function DataTable(_ref) {
@@ -6273,7 +6309,7 @@ var DataTable = function DataTable(_ref) {
       _ref$hasVerticalBorde = _ref.hasVerticalBorders,
       hasVerticalBorders = _ref$hasVerticalBorde === void 0 ? false : _ref$hasVerticalBorde,
       testId = _ref.testId;
-  var RowItem = itemComponent || DefaultItemComponent;
+  var RowItem = itemComponent || DataTableDefaultItemComponent;
   var conditionalStyles = {};
   var isScrollableTable = !!maxHeight;
 
@@ -6295,20 +6331,20 @@ var DataTable = function DataTable(_ref) {
       hasVerticalBorders: hasVerticalBorders
     }
   }, React__default.createElement("div", {
-    className: classnames(styles$t['table-container'])
+    className: classnames(styles$a['data-table'])
   }, isShowingColumns && isScrollableTable && React__default.createElement(DataTableScrollFakeBorder, {
     placement: "top"
   }), React__default.createElement("div", {
-    className: classnames(styles$t['table-content'], (_classNames = {}, _classNames[styles$t['table-content--with-scroll']] = isScrollableTable, _classNames)),
+    className: classnames(styles$a['data-table__content'], (_classNames = {}, _classNames[styles$a['data-table__content--with-scroll']] = isScrollableTable, _classNames)),
     style: conditionalStyles
   }, React__default.createElement("table", {
-    className: classnames(styles$t['table'], (_classNames2 = {}, _classNames2[styles$t['table--no-columns']] = !isShowingColumns, _classNames2))
+    className: classnames(styles$a['data-table__table'], (_classNames2 = {}, _classNames2[styles$a['data-table__table--no-columns']] = !isShowingColumns, _classNames2))
   }, columns && isShowingColumns && React__default.createElement(DataTableHeader, {
     columns: columns,
     onSort: onSort,
     showActionMenu: showActionMenu
   }), React__default.createElement("tbody", {
-    className: classnames(styles$t['body'], (_classNames3 = {}, _classNames3[styles$t['body--no-bottom-radius']] = isShowingFooter, _classNames3)),
+    className: classnames(styles$a['data-table__body'], (_classNames3 = {}, _classNames3[styles$a['data-table__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,
@@ -6322,12 +6358,12 @@ var DataTable = function DataTable(_ref) {
       testId: testId
     });
   })), isShowingFooter && React__default.createElement("tfoot", {
-    className: styles$t['footer'],
+    className: styles$a['data-table__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$t['pagination-controls'],
+    className: styles$a['data-table__pagination-controls'],
     "data-testid": testId && testId + "-pagination-controls"
   }, React__default.createElement(PaginationControls, {
     hasPrevious: hasPrevious && !isLoading,
@@ -6337,26 +6373,6 @@ var DataTable = function DataTable(_ref) {
   })));
 };
 
-var DefaultItemComponent = function DefaultItemComponent(_ref2) {
-  var columns = _ref2.columns,
-      item = _ref2.item,
-      testId = _ref2.testId;
-  var headingKeys = columns ? columns.map(function (column) {
-    return column.name;
-  }) : Object.keys(item);
-  var columnsToShow = headingKeys.filter(function (key) {
-    return key !== 'actions';
-  });
-  return React__default.createElement(DataTableRow, {
-    actions: item.actions,
-    testId: testId
-  }, columnsToShow.map(function (headingKey) {
-    return React__default.createElement("div", {
-      key: headingKey
-    }, item[headingKey] || '');
-  }));
-};
-
 var useSelectFieldControllers = function useSelectFieldControllers(_ref) {
   var name = _ref.name,
       inputId = _ref.id,
@@ -6452,7 +6468,7 @@ var isReactSelectElement = function isReactSelectElement(element) {
   return typeof firstOption.id === 'string' && firstOption.id.includes('react-select');
 };
 
-var styles$w = {"custom-control":"_1cDCR"};
+var styles$x = {"custom-control":"_1cDCR"};
 
 var _excluded$2j = ["children"];
 
@@ -6465,7 +6481,7 @@ function CustomControl(_ref) {
   var SelectedOptionPrefix = props.selectProps.componentsProps.SelectedOptionPrefix;
   var selectedOption = (_props$getValue = props.getValue()) === null || _props$getValue === void 0 ? void 0 : _props$getValue[0];
   return React__default.createElement(components.Control, Object.assign({}, props), SelectedOptionPrefix && selectedOption ? React__default.createElement("div", {
-    className: styles$w['custom-control'],
+    className: styles$x['custom-control'],
     style: {
       paddingLeft: selectedOption ? 8 : 0
     }
@@ -6494,7 +6510,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
       asToolbarFilter = _ref$asToolbarFilter === void 0 ? false : _ref$asToolbarFilter,
       _ref$wrapToNextLine = _ref.wrapToNextLine,
       wrapToNextLine = _ref$wrapToNextLine === void 0 ? false : _ref$wrapToNextLine;
-  var borderColor = isInvalid ? RADISH400 : GREY200;
+  var borderColor = isInvalid ? COLORS['radish-400'] : COLORS['grey-200'];
   return {
     valueContainer: function valueContainer(base) {
       return Object.assign({}, base, {
@@ -6506,16 +6522,16 @@ var getSelectStyles = function getSelectStyles(_ref) {
         flex: '1',
         fontFamily: FONT_FAMILY,
         minWidth: '110px',
-        backgroundColor: state.isDisabled ? GREY100 : WHITE,
+        backgroundColor: state.isDisabled ? COLORS['grey-100'] : COLORS['white'],
         position: 'initial',
         borderRadius: '4px'
       });
     },
     control: function control(base, state) {
       return Object.assign({}, base, {
-        borderColor: state.isFocused ? EGGPLANT400 : borderColor,
-        color: state.isDisabled ? GREY400 : GREY500,
-        boxShadow: state.isFocused ? "0 0 8px " + EGGPLANT300 : 'none',
+        borderColor: state.isFocused ? COLORS['eggplant-400'] : borderColor,
+        color: state.isDisabled ? COLORS['grey-400'] : COLORS['grey-500'],
+        boxShadow: state.isFocused ? "0 0 8px " + COLORS['eggplant-300'] : 'none',
         '&:hover': 'none',
         background: 'none',
         fontSize: '14px',
@@ -6523,7 +6539,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
         width: asToolbarFilter ? 'fit-content' : undefined,
         margin: 0,
         ':hover': asToolbarFilter ? {
-          backgroundColor: GREY100
+          backgroundColor: COLORS['grey-100']
         } : 'none'
       });
     },
@@ -6534,7 +6550,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     placeholder: function placeholder(base, state) {
       return _extends({}, base, {
-        color: state.isDisabled && asToolbarFilter ? GREY300 : GREY400,
+        color: state.isDisabled && asToolbarFilter ? COLORS['grey-300'] : COLORS['grey-400'],
         marginRight: 0,
         position: 'static',
         transform: 'initial',
@@ -6545,7 +6561,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     noOptionsMessage: function noOptionsMessage() {
       return {
-        color: GREY400,
+        color: COLORS['grey-400'],
         textAlign: 'center',
         padding: '8px',
         fontFamily: FONT_FAMILY,
@@ -6554,7 +6570,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     loadingMessage: function loadingMessage() {
       return {
-        color: GREY400,
+        color: COLORS['grey-400'],
         textAlign: 'center',
         padding: '8px',
         fontFamily: FONT_FAMILY,
@@ -6563,7 +6579,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     singleValue: function singleValue(base, state) {
       return Object.assign({}, base, {
-        color: state.isDisabled ? GREY400 : null,
+        color: state.isDisabled ? COLORS['grey-400'] : null,
         marginRight: 0,
         position: asToolbarFilter ? 'static' : 'absolute',
         transform: 'initial',
@@ -6575,15 +6591,15 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     dropdownIndicator: function dropdownIndicator(base, state) {
       return Object.assign({}, base, {
-        color: state.isDisabled ? GREY300 : GREY400,
+        color: state.isDisabled ? COLORS['grey-300'] : COLORS['grey-400'],
         padding: '8px',
         ':hover': 'none'
       });
     },
     option: function option(base, state) {
       return Object.assign({}, base, {
-        backgroundColor: state.isDisabled ? null : state.isSelected ? EGGPLANT200 : state.isFocused ? GREY100 : WHITE,
-        color: state.isDisabled ? GREY400 : state.isSelected ? EGGPLANT600 : GREY500,
+        backgroundColor: state.isDisabled ? null : state.isSelected ? COLORS['eggplant-200'] : state.isFocused ? COLORS['grey-100'] : COLORS['white'],
+        color: state.isDisabled ? COLORS['grey-400'] : state.isSelected ? COLORS['eggplant-600'] : COLORS['grey-500'],
         cursor: 'pointer',
         fontFamily: FONT_FAMILY,
         fontSize: '14px',
@@ -6599,15 +6615,15 @@ var getSelectStyles = function getSelectStyles(_ref) {
       return Object.assign({}, base, {
         ':hover': {
           backgroundColor: 'none',
-          color: GREY500
+          color: COLORS['grey-500']
         }
       });
     },
     clearIndicator: function clearIndicator(base) {
       return Object.assign({}, base, {
-        color: GREY400,
+        color: COLORS['grey-400'],
         ':hover': {
-          color: GREY500
+          color: COLORS['grey-500']
         }
       });
     },
@@ -6633,7 +6649,7 @@ var CustomContainer = function CustomContainer(props) {
   }));
 };
 
-var styles$x = {"custom-menu-text-field":"_2-zhH","custom-menu-hr":"_3sdnK","custom-menu-div":"_2F1jP"};
+var styles$y = {"custom-menu-text-field":"_2-zhH","custom-menu-hr":"_3sdnK","custom-menu-div":"_2F1jP"};
 
 var _excluded$2l = ["children"];
 
@@ -6703,15 +6719,15 @@ function CustomMenu(_ref) {
   return React__default.createElement(components.Menu, Object.assign({}, props), React__default.createElement("div", {
     ref: containerRef
   }, children, React__default.createElement("hr", {
-    className: styles$x['custom-menu-hr']
+    className: styles$y['custom-menu-hr']
   }), !showFooter ? React__default.createElement(CreatableButton, null) : React__default.createElement("div", {
-    className: styles$x['custom-menu-div']
+    className: styles$y['custom-menu-div']
   }, React__default.createElement(Flex, {
     space: 4,
     flex: [1],
     flexItems: true
   }, React__default.createElement("input", {
-    className: classnames(textFieldStyles['text-field'], styles$x['custom-menu-text-field']),
+    className: classnames(textFieldStyles['text-field'], styles$y['custom-menu-text-field']),
     autoCorrect: "off",
     autoComplete: "off",
     spellCheck: "false",
@@ -6894,9 +6910,9 @@ var ToolbarSelect = function ToolbarSelect(_ref) {
   });
 };
 
-var styles$y = {"date-filter":"_2X-yg","date-filter--wide":"_3O5Kh"};
+var styles$z = {"date-filter":"_2X-yg","date-filter--wide":"_3O5Kh"};
 
-var styles$z = {"date-filter-display":"_23gnr","date-filter-display--non-interactive":"_Zv1Se","date-filter-display--wide":"_18V8V","date-filter-display__display-icon":"_2v9v_"};
+var styles$A = {"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',
@@ -6940,7 +6956,7 @@ var DateFilterText = function DateFilterText(_ref) {
         space: 12
       }, React__default.createElement("span", null, getDateString(weekRange.start, mode)), React__default.createElement(IconArrowRight, {
         size: "small",
-        color: GREY400
+        color: "grey-400"
       }), React__default.createElement("span", null, getDateString(weekRange.end, mode)));
 
     default:
@@ -6956,17 +6972,17 @@ var DateFilterDisplay = function DateFilterDisplay(_ref) {
       weekStart = _ref.weekStart,
       onClick = _ref.onClick;
   return React__default.createElement("button", {
-    className: classnames(styles$z['date-filter-display'], (_classnames = {}, _classnames[styles$z['date-filter-display--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames[styles$z['date-filter-display--non-interactive']] = mode === DATE_FILTER_MODE.MONTH, _classnames)),
+    className: classnames(styles$A['date-filter-display'], (_classnames = {}, _classnames[styles$A['date-filter-display--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames[styles$A['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$z['date-filter-display__display-icon'])
+    className: classnames(styles$A['date-filter-display__display-icon'])
   }, React__default.createElement(IconCalendarAlt, {
     size: "flexible",
-    color: GREY400
+    color: "grey-400"
   })), React__default.createElement(DateFilterText, {
     mode: mode,
     selectedDate: selectedDate,
@@ -6974,7 +6990,7 @@ var DateFilterDisplay = function DateFilterDisplay(_ref) {
   })));
 };
 
-var styles$A = {"date-stepper":"_s8MoI","date-stepper--backward":"_34Yoi","date-stepper--forward":"_BeWpb"};
+var styles$B = {"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;
@@ -7009,7 +7025,7 @@ var DateFilterStepper = function DateFilterStepper(_ref) {
       onChange = _ref.onChange,
       date = _ref.date;
   return React__default.createElement("button", {
-    className: classnames(styles$A['date-stepper'], (_classnames = {}, _classnames[styles$A['date-stepper--backward']] = stepDirection === STEP_DIRECTION.BACKWARD, _classnames[styles$A['date-stepper--forward']] = stepDirection === STEP_DIRECTION.FORWARD, _classnames)),
+    className: classnames(styles$B['date-stepper'], (_classnames = {}, _classnames[styles$B['date-stepper--backward']] = stepDirection === STEP_DIRECTION.BACKWARD, _classnames[styles$B['date-stepper--forward']] = stepDirection === STEP_DIRECTION.FORWARD, _classnames)),
     onClick: function onClick() {
       return handleDateStepper(date, mode, stepDirection, onChange);
     }
@@ -7045,7 +7061,7 @@ var DateFilter = function DateFilter(_ref) {
   return React__default.createElement("div", {
     "data-testid": testId,
     ref: calendarAnchorRef,
-    className: classnames(styles$y['date-filter'], (_classnames = {}, _classnames[styles$y['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
+    className: classnames(styles$z['date-filter'], (_classnames = {}, _classnames[styles$z['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
   }, React__default.createElement(Inline, {
     space: 0
   }, React__default.createElement(DateFilterStepper, {
@@ -7055,7 +7071,7 @@ var DateFilter = function DateFilter(_ref) {
     onChange: handleChange
   }, React__default.createElement(IconChevronLeft, {
     size: "small",
-    color: GREY400
+    color: "grey-400"
   })), React__default.createElement(DateFilterDisplay, {
     mode: mode,
     weekStart: weekStart,
@@ -7072,7 +7088,7 @@ var DateFilter = function DateFilter(_ref) {
     onChange: handleChange
   }, React__default.createElement(IconChevronRight, {
     size: "small",
-    color: GREY400
+    color: "grey-400"
   }))), calendarOpen && mode !== DATE_FILTER_MODE.MONTH && React__default.createElement(Calendar, {
     onSelect: handleChange,
     selected: date,
@@ -7086,7 +7102,7 @@ var DateFilter = function DateFilter(_ref) {
   }));
 };
 
-var styles$B = {"segmented-control":"_J5ph7","segmented-control__button":"_2xgv4","segmented-control__button--selected":"_1vG3O","segmented-control__divider":"_1uKNF"};
+var styles$C = {"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,
@@ -7103,7 +7119,7 @@ var SegmentedControl = function SegmentedControl(_ref) {
   };
 
   return React__default.createElement("div", {
-    className: styles$B['segmented-control'],
+    className: styles$C['segmented-control'],
     "data-testid": testId
   }, options.map(function (option, i) {
     var _classnames;
@@ -7114,16 +7130,16 @@ var SegmentedControl = function SegmentedControl(_ref) {
       onClick: function onClick() {
         return onChange(option);
       },
-      className: classnames(styles$B['segmented-control__button'], (_classnames = {}, _classnames[styles$B['segmented-control__button--selected']] = isSelected(option), _classnames))
+      className: classnames(styles$C['segmented-control__button'], (_classnames = {}, _classnames[styles$C['segmented-control__button--selected']] = isSelected(option), _classnames))
     }, option), !isLastElement(i) && React__default.createElement("div", {
-      className: classnames(styles$B['segmented-control__divider'])
+      className: classnames(styles$C['segmented-control__divider'])
     }));
   }));
 };
 
-var styles$C = {"form--standard-size":"_3CaV0"};
+var styles$D = {"form--standard-size":"_3CaV0"};
 
-var styles$D = {"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$E = {"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$2m = ["children", "onClick", "isSelected", "actions", "testId"];
 
@@ -7140,18 +7156,18 @@ var Card = function Card(_ref) {
 
   var positionStyles = usePositionStyles(positionProps);
   return React__default.createElement("div", {
-    className: classnames(styles$D['card']),
+    className: classnames(styles$E['card']),
     style: positionStyles
   }, onClick ? React__default.createElement("button", {
-    className: classnames(styles$D['card__body'], styles$D['card__body--interactive'], (_classnames = {}, _classnames[styles$D['card__body--focus']] = isSelected, _classnames[styles$D['card__body--with-kebab']] = actions, _classnames)),
+    className: classnames(styles$E['card__body'], styles$E['card__body--interactive'], (_classnames = {}, _classnames[styles$E['card__body--focus']] = isSelected, _classnames[styles$E['card__body--with-kebab']] = actions, _classnames)),
     "data-testid": testId,
     tabIndex: 0,
     onClick: onClick
   }, children) : React__default.createElement("div", {
-    className: classnames(styles$D['card__body'], (_classnames2 = {}, _classnames2[styles$D['card__body--focus']] = isSelected, _classnames2[styles$D['card__body--with-kebab']] = actions, _classnames2)),
+    className: classnames(styles$E['card__body'], (_classnames2 = {}, _classnames2[styles$E['card__body--focus']] = isSelected, _classnames2[styles$E['card__body--with-kebab']] = actions, _classnames2)),
     "data-testid": testId
   }, children), actions && React__default.createElement("div", {
-    className: classnames(styles$D['card__kebab'])
+    className: classnames(styles$E['card__kebab'])
   }, React__default.createElement(KebabMenu, {
     actions: actions
   })));
@@ -7165,7 +7181,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   }, children);
 };
 
-var styles$E = {"breadcrumb-item":"_XFvYB"};
+var styles$F = {"breadcrumb-item":"_XFvYB"};
 
 var BreadcrumbItem = function BreadcrumbItem(_ref) {
   var href = _ref.href,
@@ -7178,24 +7194,24 @@ var BreadcrumbItem = function BreadcrumbItem(_ref) {
   }), children);
   return reloadDocument ? React__default.createElement("a", {
     href: href,
-    className: styles$E['breadcrumb-item'],
+    className: styles$F['breadcrumb-item'],
     "data-testid": testId
   }, content) : React__default.createElement(Link$1, {
     to: href,
-    className: styles$E['breadcrumb-item'],
+    className: styles$F['breadcrumb-item'],
     relative: "path",
     reloadDocument: reloadDocument,
     "data-testid": testId
   }, content);
 };
 
-var styles$F = {"page-breadcrumbs":"_HAJCd"};
+var styles$G = {"page-breadcrumbs":"_HAJCd"};
 
 var PageBreadcrumbs = function PageBreadcrumbs(_ref) {
   var breadcrumbs = _ref.breadcrumbs;
   var items = getBreadbrumbItems(breadcrumbs);
   return React__default.createElement("div", {
-    className: styles$F['page-breadcrumbs']
+    className: styles$G['page-breadcrumbs']
   }, React__default.createElement(Breadcrumbs, null, items));
 };
 
@@ -7220,7 +7236,7 @@ var getBreadbrumbItems = function getBreadbrumbItems(breadcrumbs) {
   }, breadcrumbs.label);
 };
 
-var styles$G = {"page":"_FbhTM","page--fullwidth":"_3QyAE","page--restricted":"_17aOG"};
+var styles$H = {"page":"_FbhTM","page--fullwidth":"_3QyAE","page--restricted":"_17aOG"};
 
 var PAGE_SIZES = {
   FULL_WIDTH: 'fullwidth',
@@ -7243,7 +7259,7 @@ var Page = function Page(_ref) {
   var hasHeader = title || actions;
   var hasPageBlocks = hasHeader || banner || filterBar;
   return React__default.createElement("div", {
-    className: classnames(styles$G['page'], (_classNames = {}, _classNames[styles$G['page--restricted']] = size === PAGE_SIZES.RESTRICTED, _classNames[styles$G['page--fullwidth']] = size === PAGE_SIZES.FULL_WIDTH, _classNames)),
+    className: classnames(styles$H['page'], (_classNames = {}, _classNames[styles$H['page--restricted']] = size === PAGE_SIZES.RESTRICTED, _classNames[styles$H['page--fullwidth']] = size === PAGE_SIZES.FULL_WIDTH, _classNames)),
     "data-testid": testId
   }, React__default.createElement(Stack, {
     space: 20
@@ -7263,7 +7279,7 @@ var Page = function Page(_ref) {
   }, title), actions), subtitle && React__default.createElement(Text, null, subtitle)), banner, filterBar)), children));
 };
 
-var styles$H = {"form-section":"_7-5gD","form-section__title":"_a83vM","form-section__subtitle":"_1lKv8","form-section--no-margin":"_lZyFQ"};
+var styles$I = {"form-section":"_7-5gD","form-section__title":"_a83vM","form-section__subtitle":"_1lKv8","form-section--no-margin":"_lZyFQ"};
 
 var FormSection = function FormSection(_ref) {
   var _classnames;
@@ -7275,14 +7291,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$H['form-section'], (_classnames = {}, _classnames[styles$H['form-section--no-margin']] = noMargin, _classnames)),
+    className: classnames(styles$I['form-section'], (_classnames = {}, _classnames[styles$I['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$H['form-section__title'])
+    className: classnames(styles$I['form-section__title'])
   }, title), subtitle && React__default.createElement("h3", {
-    className: classnames(styles$H['form-section__subtitle'])
+    className: classnames(styles$I['form-section__subtitle'])
   }, subtitle)), children));
 };
 
@@ -7300,7 +7316,7 @@ var updateButtonProps$1 = function updateButtonProps(child, newProps) {
   }, newProps, child.props));
 };
 
-var styles$I = {"form-footer":"_3vVBF"};
+var styles$J = {"form-footer":"_3vVBF"};
 
 var FormFooterActions = function FormFooterActions(_ref) {
   var _actions$primary, _actions$secondary, _actions$tertiary;
@@ -7335,7 +7351,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$I['form-footer']),
+    className: classnames(styles$J['form-footer']),
     "data-testid": testId
   }, actions && React__default.createElement(FormFooterActions, {
     actions: actions
@@ -7377,12 +7393,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$C['form--standard-size']] = !wide, _classnames)),
+    className: classnames((_classnames = {}, _classnames[styles$D['form--standard-size']] = !wide, _classnames)),
     "data-testid": testId
   }, stackContent ? React__default.createElement(Stack, null, formattedChildren) : formattedChildren));
 };
 
-var styles$J = {"form-row":"_2i-Ll"};
+var styles$K = {"form-row":"_2i-Ll"};
 
 var SIZE_25_PERCENT = '25%';
 var SIZE_33_PERCENT = '33.333%';
@@ -7413,7 +7429,7 @@ var FormRow = function FormRow(_ref) {
     space: 20,
     testId: testId,
     alignItems: "stretch",
-    extraClass: styles$J['form-row']
+    extraClass: styles$K['form-row']
   }, children, additionalColumns.map(function (_, index) {
     return React__default.createElement("span", {
       key: index,
@@ -7422,7 +7438,7 @@ var FormRow = function FormRow(_ref) {
   }));
 };
 
-var styles$K = {"text-field":"_BkzdC","text-field--focus":"_Rop31","text-field--disabled":"_2x3Cm","text-field--invalid":"_3zOwV","text-field__toolbar":"_rQqnL"};
+var styles$L = {"text-field":"_BkzdC","text-field--focus":"_Rop31","text-field--disabled":"_2x3Cm","text-field--invalid":"_3zOwV","text-field__toolbar":"_rQqnL"};
 
 var useGrowTextAreaRef = function useGrowTextAreaRef(minHeight, maxHeight, autoGrow, forwardedRef) {
   var textareaRef = useRef(null);
@@ -7498,7 +7514,7 @@ var TextAreaField = function TextAreaField(_ref) {
       updateHeight = _useGrowTextAreaRef.updateHeight;
 
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$K['text-field'], (_classnames = {}, _classnames[styles$K['text-field--invalid']] = hasError, _classnames[styles$K['text-field--disabled']] = disabled, _classnames[styles$K['text-field--focus']] = hasFocus, _classnames)),
+    className: classnames(styles$L['text-field'], (_classnames = {}, _classnames[styles$L['text-field--invalid']] = hasError, _classnames[styles$L['text-field--disabled']] = disabled, _classnames[styles$L['text-field--focus']] = hasFocus, _classnames)),
     ref: containerRef,
     onClick: function onClick(event) {
       if (event.target === (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
@@ -7530,7 +7546,7 @@ var TextAreaField = function TextAreaField(_ref) {
     },
     ref: textAreaRef
   }), toolbar && React__default.createElement("div", {
-    className: styles$K['text-field__toolbar'],
+    className: styles$L['text-field__toolbar'],
     id: controllers.id + "-toolbar",
     ref: toolbarRef,
     onClick: function onClick(event) {
@@ -7610,7 +7626,7 @@ var useCheckBoxFieldControllers = function useCheckBoxFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$L = {"check-box-field":"_2sg0c","check-box-field__caption":"_2LdrP","check-box-field__custom-input":"_2mA8e"};
+var styles$M = {"check-box-field":"_2sg0c","check-box-field__caption":"_2LdrP","check-box-field__custom-input":"_2mA8e"};
 
 var CheckboxField = function CheckboxField(_ref) {
   var name = _ref.name,
@@ -7640,7 +7656,7 @@ var CheckboxField = function CheckboxField(_ref) {
     flexItems: true,
     flex: ['0 0 auto']
   }, React__default.createElement("div", {
-    className: styles$L['check-box-field']
+    className: styles$M['check-box-field']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
@@ -7653,12 +7669,12 @@ var CheckboxField = function CheckboxField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("span", {
-    className: styles$L['check-box-field__custom-input']
+    className: styles$M['check-box-field__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: controllers.id,
     truncate: false
   }, label)), caption && React__default.createElement("div", {
-    className: styles$L['check-box-field__caption']
+    className: styles$M['check-box-field__caption']
   }, React__default.createElement(Caption, {
     fieldId: controllers.id
   }, caption)), controllers.error && React__default.createElement(ErrorMessage, {
@@ -7666,7 +7682,7 @@ var CheckboxField = function CheckboxField(_ref) {
   }, controllers.error));
 };
 
-var styles$M = {"pill-select-field":"_g6T-p","pill-select-field__custom-input":"_1i2AX"};
+var styles$N = {"pill-select-field":"_g6T-p","pill-select-field__custom-input":"_1i2AX"};
 
 var useMultiSelectFieldControllers = function useMultiSelectFieldControllers(_ref) {
   var name = _ref.name,
@@ -7758,7 +7774,7 @@ var PillSelectField = function PillSelectField(_ref) {
     var itemId = controllers.id + "-" + itemIdentifier;
     return React__default.createElement("div", {
       key: itemIdentifier,
-      className: styles$M['pill-select-field']
+      className: styles$N['pill-select-field']
     }, React__default.createElement("input", {
       name: name + "-" + itemIdentifier,
       id: itemId,
@@ -7780,7 +7796,7 @@ var PillSelectField = function PillSelectField(_ref) {
         controllers.onChange(newValue);
       }
     }), React__default.createElement("span", {
-      className: styles$M['pill-select-field__custom-input']
+      className: styles$N['pill-select-field__custom-input']
     }, option.label));
   })));
 };
@@ -7828,9 +7844,9 @@ var useRadioGroupFieldContext = function useRadioGroupFieldContext() {
   return context;
 };
 
-var styles$N = {"label":"_1WGz2","label--truncate":"_mQ9Rd","radio-group-field__label":"_RXyG_"};
+var styles$O = {"label":"_1WGz2","label--truncate":"_mQ9Rd","radio-group-field__label":"_RXyG_"};
 
-var styles$O = {"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$P = {"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,
@@ -7845,7 +7861,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     id: inputId
   });
   return React__default.createElement("label", {
-    className: styles$O['radio-group-box-option']
+    className: styles$P['radio-group-box-option']
   }, React__default.createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -7856,7 +7872,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled
   }), React__default.createElement("div", {
-    className: styles$O['radio-group-box-option__box']
+    className: styles$P['radio-group-box-option__box']
   }, React__default.createElement(Stack, {
     space: 16,
     alignItems: "center",
@@ -7865,13 +7881,13 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     space: 8,
     alignItems: "center"
   }, label && React__default.createElement("div", {
-    className: styles$O['radio-group-box-option__label']
+    className: styles$P['radio-group-box-option__label']
   }, label), caption && React__default.createElement(Caption, {
     fieldId: id
   }, caption)))));
 };
 
-var styles$P = {"radio-group-option":"_1Clmp","radio-group-option__caption":"_3UmWA","radio-group-option__custom-input":"_1tMq-"};
+var styles$Q = {"radio-group-option":"_1Clmp","radio-group-option__caption":"_3UmWA","radio-group-option__custom-input":"_1tMq-"};
 
 var RadioGroupOption = function RadioGroupOption(_ref) {
   var value = _ref.value,
@@ -7890,7 +7906,7 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     space: 8,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: styles$P['radio-group-option']
+    className: styles$Q['radio-group-option']
   }, React__default.createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -7901,11 +7917,11 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled
   }), React__default.createElement("span", {
-    className: styles$P['radio-group-option__custom-input']
+    className: styles$Q['radio-group-option__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: id
   }, label)), caption && React__default.createElement("div", {
-    className: styles$P['radio-group-option__caption']
+    className: styles$Q['radio-group-option__caption']
   }, React__default.createElement(Caption, {
     fieldId: id
   }, caption)));
@@ -8040,7 +8056,7 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, React__default.createElement(Stack, {
     space: 12
   }, label && React__default.createElement("div", {
-    className: styles$N['radio-group-field__label']
+    className: styles$O['radio-group-field__label']
   }, label), React__default.createElement(Stack, {
     space: 8
   }, optionsType === OPTION_TYPES.RADIO ? React__default.createElement(RadioOptions, {
@@ -8053,9 +8069,9 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, children), controllers.error && React__default.createElement(ErrorMessage, null, controllers.error))));
 };
 
-var styles$Q = {"text-field":"_18Rzv","text-field--invalid":"_3eD7t","text-field--prefixed":"_2evrG","text-field--suffixed":"_-MgeO","password-container":"_-Rf3c","password-toggle":"_yinPY"};
+var styles$R = {"text-field":"_18Rzv","text-field--invalid":"_3eD7t","text-field--prefixed":"_2evrG","text-field--suffixed":"_-MgeO","password-container":"_-Rf3c","password-toggle":"_yinPY"};
 
-var styles$R = {"password-criteria":"_U0krC","password-criteria--invalid":"_2XIl4"};
+var styles$S = {"password-criteria":"_U0krC","password-criteria--invalid":"_2XIl4"};
 
 var PasswordCriteria = function PasswordCriteria(_ref) {
   var _classnames;
@@ -8063,12 +8079,12 @@ var PasswordCriteria = function PasswordCriteria(_ref) {
   var met = _ref.met,
       children = _ref.children;
   return React__default.createElement("span", {
-    className: classnames(styles$R['password-criteria'], (_classnames = {}, _classnames[styles$R['password-criteria--invalid']] = !met, _classnames))
+    className: classnames(styles$S['password-criteria'], (_classnames = {}, _classnames[styles$S['password-criteria--invalid']] = !met, _classnames))
   }, React__default.createElement(Inline, {
     space: met ? 4 : 8
   }, met ? React__default.createElement(IconCheck, {
     size: "small",
-    color: GREY200
+    color: "grey-200"
   }) : "\u25CF", children));
 };
 
@@ -8148,11 +8164,11 @@ var PasswordField = function PasswordField(_ref) {
     error: controllers.error
   };
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: styles$Q['password-container']
+    className: styles$R['password-container']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames(styles$Q['text-field'], (_classnames = {}, _classnames[styles$Q['text-field--invalid']] = hasError, _classnames)),
+    className: classnames(styles$R['text-field'], (_classnames = {}, _classnames[styles$R['text-field--invalid']] = hasError, _classnames)),
     type: type,
     "data-testid": testId,
     "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
@@ -8164,16 +8180,16 @@ var PasswordField = function PasswordField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("div", {
-    className: styles$Q['password-toggle'],
+    className: styles$R['password-toggle'],
     onClick: toggleType,
     onKeyPress: toggleType,
     "data-testid": testId && testId + "-toggle",
     tabIndex: 0,
     role: "button"
   }, type === 'password' ? React__default.createElement(IconEyeSlash, {
-    color: GREY400
+    color: "grey-400"
   }) : React__default.createElement(IconEye, {
-    color: GREY400
+    color: "grey-400"
   }))));
 };
 
@@ -8255,7 +8271,7 @@ var MultiSelectField = function MultiSelectField(_ref) {
   }));
 };
 
-var styles$S = {"custom-list":"_uC4zU"};
+var styles$T = {"custom-list":"_uC4zU"};
 
 var _excluded$2o = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
 
@@ -8274,7 +8290,7 @@ var CustomList = function CustomList(_ref) {
   return React__default.createElement(components.MenuList, Object.assign({}, props), React__default.createElement(Fragment, null, children, showFooter && React__default.createElement(Inline, {
     justifyContent: "center"
   }, React__default.createElement("div", {
-    className: styles$S['custom-list']
+    className: styles$T['custom-list']
   }, getLocalizedString('main.START_TYPING_TO_SEE_MORE_OPTIONS')))));
 };
 
@@ -8503,7 +8519,7 @@ var DateField = function DateField(_ref) {
     error: controllers.error
   };
   var dayPickerProps = {
-    classNames: styles$h,
+    classNames: styles$u,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -8521,7 +8537,7 @@ var DateField = function DateField(_ref) {
     })
   }, React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$h,
+    classNames: styles$u,
     formatDate: formatDate,
     parseDate: parseDate,
     placeholder: placeholder || format.toUpperCase(),
@@ -8630,7 +8646,7 @@ var getFormikError = function getFormikError(error) {
   return undefined;
 };
 
-var styles$T = {"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$U = {"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,
@@ -8669,7 +8685,7 @@ var FromDate = function FromDate(_ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$T,
+    classNames: styles$U,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -8696,7 +8712,7 @@ var FromDate = function FromDate(_ref) {
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$T,
+    classNames: styles$U,
     selectedDay: start,
     value: start,
     formatDate: formatDate,
@@ -8770,7 +8786,7 @@ var ToDate = function ToDate(_ref, ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$T,
+    classNames: styles$U,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -8789,7 +8805,7 @@ var ToDate = function ToDate(_ref, ref) {
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$T,
+    classNames: styles$U,
     selectedDay: end,
     value: end,
     formatDate: formatDate,
@@ -8874,11 +8890,11 @@ 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$T['date-range-field'], (_classnames = {}, _classnames[styles$T['date-range-field--invalid']] = hasError, _classnames[styles$T['date-range-field--disabled']] = disabled, _classnames)),
+    className: classnames(styles$U['date-range-field'], (_classnames = {}, _classnames[styles$U['date-range-field--invalid']] = hasError, _classnames[styles$U['date-range-field--disabled']] = disabled, _classnames)),
     "data-testid": testId
   }, React__default.createElement(IconCalendarAlt, {
     size: "medium",
-    color: GREY400
+    color: "grey-400"
   }), React__default.createElement(FromDate, {
     name: name,
     id: controllers.id,
@@ -8904,7 +8920,7 @@ var DateRangeField = function DateRangeField(_ref) {
     testId: testId
   }), React__default.createElement(IconArrowRight, {
     size: "medium",
-    color: GREY400
+    color: "grey-400"
   }), React__default.createElement(ToDate$1, {
     name: name,
     format: format,
@@ -9001,7 +9017,7 @@ var WeekField = function WeekField(_ref) {
   };
 
   var dayPickerProps = {
-    classNames: styles$i,
+    classNames: styles$v,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -9031,7 +9047,7 @@ var WeekField = function WeekField(_ref) {
     })
   }, React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$i,
+    classNames: styles$v,
     formatDate: formatDate,
     parseDate: parseDate,
     placeholder: placeholder || format.toUpperCase(),
@@ -9070,35 +9086,59 @@ var WeekField = function WeekField(_ref) {
   })));
 };
 
-var getTimeOptions = function getTimeOptions(interval, startTime) {
+var getTimeOptions = function getTimeOptions(interval, startTime, skipStartTime) {
   if (startTime === void 0) {
     startTime = new Date('Janurary 1 2023 00:00:00');
   }
 
+  if (skipStartTime === void 0) {
+    skipStartTime = false;
+  }
+
+  var intervalCoeffecient = 1000 * 60 * interval;
   var optionsCount = 60 * 24 / interval;
   var timeOptions = [];
-  var intervalCoeffecient = 1000 * 60 * interval;
   var rounded = new Date(Math.ceil(startTime.getTime() / intervalCoeffecient) * intervalCoeffecient);
+  var skipFirstInterval = skipStartTime && startTime.getTime() === rounded.getTime();
 
-  var formatHours = function formatHours(hours) {
-    if (hours === 0) {
-      return 12;
-    } else if (hours > 12) {
-      return hours - 12;
-    } else {
-      return hours;
-    }
-  };
-
-  for (var i = 0; i < optionsCount; i++) {
+  for (var i = skipFirstInterval ? 1 : 0; i < optionsCount; i++) {
     var newDate = new Date(rounded.getTime());
     newDate.setMinutes(rounded.getMinutes() + interval * i);
+    var hours = formatHours(newDate.getHours());
     var minutes = newDate.getMinutes();
-    timeOptions.push(formatHours(newDate.getHours()) + ":" + (minutes === 0 ? '00' : minutes) + " " + (newDate.getHours() < 12 ? 'AM' : 'PM'));
+    var period = newDate.getHours() < 12 ? 'AM' : 'PM';
+    timeOptions.push(hours + ":" + (minutes === 0 ? '00' : minutes) + " " + period);
   }
 
   return timeOptions;
 };
+var getDuration = function getDuration(timeOption, startTime) {
+  var start = new Date("Janurary 1 2023 " + startTime).getTime();
+  var end = new Date("Janurary 1 2023 " + timeOption).getTime();
+  var diffInMinutes = Math.round((end - start) / 60000);
+
+  if (diffInMinutes < 0) {
+    diffInMinutes = diffInMinutes + 1440;
+  }
+
+  if (diffInMinutes < 60) {
+    return "(" + diffInMinutes + " min" + (diffInMinutes === 1 ? '' : 's') + ")";
+  } else if (diffInMinutes >= 60) {
+    return "(" + +(diffInMinutes / 60).toFixed(2) + " hr" + (diffInMinutes === 60 ? '' : 's') + ")";
+  } else {
+    return undefined;
+  }
+};
+
+var formatHours = function formatHours(hours) {
+  if (hours === 0) {
+    return 12;
+  } else if (hours > 12) {
+    return hours - 12;
+  } else {
+    return hours;
+  }
+};
 
 var TimeFieldDropdown = function TimeFieldDropdown(_ref) {
   var trigger = _ref.trigger,
@@ -9106,7 +9146,9 @@ var TimeFieldDropdown = function TimeFieldDropdown(_ref) {
       startTime = _ref.startTime,
       onOptionClick = _ref.onOptionClick,
       inputValue = _ref.inputValue,
-      width = _ref.width;
+      width = _ref.width,
+      _ref$endField = _ref.endField,
+      endField = _ref$endField === void 0 ? false : _ref$endField;
   var startTimeParsed;
 
   if (startTime) {
@@ -9114,7 +9156,7 @@ var TimeFieldDropdown = function TimeFieldDropdown(_ref) {
   }
 
   var timeOptions = useMemo(function () {
-    return getTimeOptions(interval, startTimeParsed);
+    return getTimeOptions(interval, startTimeParsed, endField && !!startTime);
   }, [interval, startTime]);
 
   var _useState = useState(undefined),
@@ -9142,16 +9184,22 @@ var TimeFieldDropdown = function TimeFieldDropdown(_ref) {
       onClick: function onClick() {
         onOptionClick(option);
       }
-    }, option);
+    }, React__default.createElement(Inline, {
+      space: 4
+    }, option, endField && startTime && getDuration(option, startTime)));
   })));
 };
 
-var _excluded$2q = ["interval", "startTime"];
+var _excluded$2q = ["interval", "startTime", "prefix", "endField", "duration"];
 
 var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
   var _ref$interval = _ref.interval,
       interval = _ref$interval === void 0 ? 15 : _ref$interval,
       startTime = _ref.startTime,
+      prefix = _ref.prefix,
+      _ref$endField = _ref.endField,
+      endField = _ref$endField === void 0 ? false : _ref$endField,
+      duration = _ref.duration,
       allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2q);
 
   var internalRef = useRef(null);
@@ -9195,17 +9243,148 @@ var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
       onInputChange: function onInputChange(e) {
         return setSelectedDropdownValue(e);
       },
-      selectedTimeOption: selectedDropdownValue
+      selectedTimeOption: selectedDropdownValue,
+      prefix: prefix,
+      duration: duration
     })),
     startTime: startTime,
     onOptionClick: onOptionClick,
     inputValue: selectedDropdownValue,
-    width: width
+    width: width,
+    endField: endField
   });
 };
 
+var TimeRangeSelector = forwardRef(TimeFieldElement);
 var TimeField = forwardRef(TimeFieldElement);
 
+var styles$V = {"text-field":"_1EJlZ","time-range-field":"_20_Q3","text-field--invalid":"_3vaZG","text-field--prefixed":"_2dh_z","text-field--suffixed":"_2iyg-","time-range-field--invalid":"_22G5J","time-range-field--disabled":"_1bvhh"};
+
+var TimeRangeEnd = function TimeRangeEnd(_ref) {
+  var startTime = _ref.startTime,
+      onChange = _ref.onChange,
+      interval = _ref.interval,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? '2:00 PM' : _ref$placeholder,
+      duration = _ref.duration,
+      disabled = _ref.disabled,
+      testId = _ref.testId;
+  return React__default.createElement(TimeRangeSelector, {
+    name: "end-time",
+    startTime: startTime,
+    onChange: onChange,
+    placeholder: placeholder,
+    interval: interval,
+    prefix: React__default.createElement(IconArrowRight, {
+      size: "medium",
+      color: "grey-400"
+    }),
+    duration: duration,
+    endField: true,
+    testId: testId && testId + "-end-time",
+    disabled: disabled
+  });
+};
+
+var TimeRangeStart = function TimeRangeStart(_ref) {
+  var startTime = _ref.startTime,
+      onChange = _ref.onChange,
+      interval = _ref.interval,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? '9:00 AM' : _ref$placeholder,
+      id = _ref.id,
+      disabled = _ref.disabled,
+      testId = _ref.testId;
+  return React__default.createElement(TimeRangeSelector, {
+    name: "start-time",
+    startTime: startTime,
+    onChange: onChange,
+    placeholder: placeholder,
+    interval: interval,
+    testId: testId && testId + "-start-time",
+    id: id,
+    disabled: disabled
+  });
+};
+
+var TimeRangeField = function TimeRangeField(_ref) {
+  var _classnames;
+
+  var name = _ref.name,
+      inputId = _ref.id,
+      value = _ref.value,
+      _ref$interval = _ref.interval,
+      interval = _ref$interval === void 0 ? 15 : _ref$interval,
+      startTime = _ref.startTime,
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
+      label = _ref.label,
+      caption = _ref.caption,
+      error = _ref.error,
+      placeholder = _ref.placeholder,
+      disabled = _ref.disabled,
+      testId = _ref.testId;
+  var controllers = useRangeFieldControllers({
+    name: name,
+    id: inputId,
+    value: value,
+    onChange: onChange,
+    onBlur: onBlur,
+    error: error
+  });
+  var hasError = controllers.error;
+  var fieldProps = {
+    name: name,
+    id: controllers.id,
+    label: label,
+    caption: caption,
+    error: controllers.error
+  };
+  var _controllers$value = controllers.value,
+      start = _controllers$value.start,
+      end = _controllers$value.end;
+
+  var onStartChange = function onStartChange(inputValue) {
+    controllers.onChange({
+      start: inputValue === '' ? undefined : inputValue,
+      end: end
+    });
+  };
+
+  var onEndChange = function onEndChange(inputValue) {
+    controllers.onChange({
+      start: start,
+      end: inputValue === '' ? undefined : inputValue
+    });
+  };
+
+  var timeRangeDuration = getDuration(end, start);
+  return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
+    className: classnames(styles$V['time-range-field'], (_classnames = {}, _classnames[styles$V['time-range-field--invalid']] = hasError, _classnames[styles$V['time-range-field--disabled']] = disabled, _classnames)),
+    "data-testid": testId
+  }, React__default.createElement(TimeRangeStart, {
+    startTime: startTime,
+    interval: interval,
+    onChange: function onChange(value) {
+      return onStartChange(value);
+    },
+    placeholder: placeholder,
+    testId: testId,
+    id: controllers.id,
+    disabled: disabled
+  }), React__default.createElement(TimeRangeEnd, {
+    startTime: start,
+    interval: interval,
+    onChange: function onChange(value) {
+      return onEndChange(value);
+    },
+    placeholder: placeholder,
+    duration: timeRangeDuration,
+    testId: testId,
+    disabled: disabled
+  })));
+};
+
 var _excluded$2r = ["currencySymbol", "step"];
 
 var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
@@ -9368,7 +9547,7 @@ var BUTTON_THEME = {
   UPSELL: 'upsell'
 };
 
-var styles$U = {"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$W = {"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,
@@ -9391,7 +9570,7 @@ var ButtonCTA = function ButtonCTA(_ref) {
   }, button.props));
 };
 
-var styles$V = {"banner__caption":"_1jqm8"};
+var styles$X = {"banner__caption":"_1jqm8"};
 
 var InlineBannerCTA = function InlineBannerCTA(_ref) {
   var primaryButton = _ref.primaryButton,
@@ -9422,7 +9601,7 @@ var InlineBannerCTA = function InlineBannerCTA(_ref) {
     bannerTheme: bannerTheme,
     primaryCTA: true
   })), caption && multiLine && React__default.createElement("div", {
-    className: styles$V['banner__caption']
+    className: styles$X['banner__caption']
   }, caption));
 };
 
@@ -9469,14 +9648,14 @@ var InlineBanner = function InlineBanner(_ref) {
   var Layout = multiLine ? Stack : Inline;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$U['banner'], (_classnames = {}, _classnames[styles$U['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$U['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$U['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$U['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$U['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$U['banner--single-line']] = !multiLine, _classnames)),
+    className: classnames(styles$W['banner'], (_classnames = {}, _classnames[styles$W['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$W['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$W['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$W['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$W['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$W['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$U['banner__icon']
+    className: styles$W['banner__icon']
   }, React__default.createElement(InlineBannerIcon, {
     theme: theme
   })), React__default.createElement(Layout, {
@@ -9486,9 +9665,9 @@ var InlineBanner = function InlineBanner(_ref) {
     flex: ['min-content'],
     flexWrap: multiLine ? undefined : 'wrap'
   }, title && React__default.createElement("div", {
-    className: styles$U['banner__title']
+    className: styles$W['banner__title']
   }, title), React__default.createElement("div", {
-    className: classnames(styles$U['banner__body'], (_classnames2 = {}, _classnames2[styles$U['banner__body--multilineCTA']] = primaryButton && multiLine, _classnames2))
+    className: classnames(styles$W['banner__body'], (_classnames2 = {}, _classnames2[styles$W['banner__body--multilineCTA']] = primaryButton && multiLine, _classnames2))
   }, children), primaryButton && React__default.createElement(InlineBannerCTA, {
     primaryButton: primaryButton,
     secondaryButton: secondaryButton,
@@ -9496,7 +9675,7 @@ var InlineBanner = function InlineBanner(_ref) {
     multiLine: multiLine,
     bannerTheme: theme
   })), dismissable && React__default.createElement("div", {
-    className: styles$U['banner__close']
+    className: styles$W['banner__close']
   }, React__default.createElement(Button$1, {
     theme: "link-icon",
     type: "button",
@@ -9510,7 +9689,7 @@ var PERSISTENT_BANNER_THEME = {
   DANGER: 'danger'
 };
 
-var styles$W = {"persistent-banner":"_1KO1J","persistent-banner--info":"_2mTN3","persistent-banner--danger":"_1YuCF","persistent-banner--upsell":"_tlNFk"};
+var styles$Y = {"persistent-banner":"_1KO1J","persistent-banner--info":"_2mTN3","persistent-banner--danger":"_1YuCF","persistent-banner--upsell":"_tlNFk"};
 
 var PersistentBanner = function PersistentBanner(_ref) {
   var _classNames;
@@ -9539,7 +9718,7 @@ var PersistentBanner = function PersistentBanner(_ref) {
   };
 
   return React__default.createElement("div", {
-    className: classnames(styles$W['persistent-banner'], (_classNames = {}, _classNames[styles$W['persistent-banner--info']] = theme === PERSISTENT_BANNER_THEME.INFO, _classNames[styles$W['persistent-banner--danger']] = theme === PERSISTENT_BANNER_THEME.DANGER, _classNames[styles$W['persistent-banner--upsell']] = theme === PERSISTENT_BANNER_THEME.UPSELL, _classNames)),
+    className: classnames(styles$Y['persistent-banner'], (_classNames = {}, _classNames[styles$Y['persistent-banner--info']] = theme === PERSISTENT_BANNER_THEME.INFO, _classNames[styles$Y['persistent-banner--danger']] = theme === PERSISTENT_BANNER_THEME.DANGER, _classNames[styles$Y['persistent-banner--upsell']] = theme === PERSISTENT_BANNER_THEME.UPSELL, _classNames)),
     "data-testid": testId
   }, onDismiss ? React__default.createElement(Inline, {
     flex: [1],
@@ -9611,7 +9790,7 @@ var useProgress = function useProgress(progress, maxValue, getMetric) {
   };
 };
 
-var styles$X = {"circular-progress":"_1XR7V","circular-progress__label":"_1BygP","circular-progress__track":"_1Ak-z","circular-progress__indicator":"_22YIp"};
+var styles$Z = {"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,
@@ -9626,7 +9805,7 @@ var CircularProgress = function CircularProgress(_ref) {
 
   var determinant = metric.percentage * 2.79;
   return React__default.createElement("div", Object.assign({}, elementProps, {
-    className: styles$X['circular-progress'],
+    className: styles$Z['circular-progress'],
     "data-testid": testId
   }), React__default.createElement("svg", {
     viewBox: "0 0 100 100"
@@ -9635,21 +9814,21 @@ var CircularProgress = function CircularProgress(_ref) {
     cy: 50,
     r: 45,
     strokeWidth: "10px",
-    className: styles$X['circular-progress__track']
+    className: styles$Z['circular-progress__track']
   }), React__default.createElement("circle", {
     cx: 50,
     cy: 50,
     r: 45,
     strokeWidth: "10px",
-    className: styles$X['circular-progress__indicator'],
+    className: styles$Z['circular-progress__indicator'],
     strokeDashoffset: "66",
     strokeDasharray: determinant + " " + (279 - determinant)
   })), React__default.createElement("div", {
-    className: styles$X['circular-progress__label']
+    className: styles$Z['circular-progress__label']
   }, children || metric.progress + "/" + metric.maxValue));
 };
 
-var styles$Y = {"progress-bar":"_3nyZN","progress-bar__indicator":"_11TEp","progress-bar__steps":"_3XFTU"};
+var styles$_ = {"progress-bar":"_3nyZN","progress-bar__indicator":"_11TEp","progress-bar__steps":"_3XFTU"};
 
 var ProgressBar = function ProgressBar(_ref) {
   var progress = _ref.progress,
@@ -9664,15 +9843,15 @@ var ProgressBar = function ProgressBar(_ref) {
       metric = _useProgress.metric;
 
   return React__default.createElement(Stack, null, React__default.createElement("div", Object.assign({}, elementProps, {
-    className: styles$Y['progress-bar'],
+    className: styles$_['progress-bar'],
     "data-testid": testId
   }), React__default.createElement("div", {
-    className: styles$Y['progress-bar__indicator'],
+    className: styles$_['progress-bar__indicator'],
     style: {
       width: metric.percentage + "%"
     }
   })), steps && steps.length > 0 && React__default.createElement("div", {
-    className: styles$Y['progress-bar__steps']
+    className: styles$_['progress-bar__steps']
   }, steps.map(function (step) {
     return React__default.createElement("div", {
       key: step
@@ -9680,7 +9859,7 @@ var ProgressBar = function ProgressBar(_ref) {
   })));
 };
 
-var styles$Z = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
+var styles$$ = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
 
 var _excluded$2u = ["children", "theme", "title", "testId"];
 
@@ -9704,7 +9883,7 @@ var Badge = function Badge(_ref, forwardedRef) {
     overlay: title,
     ref: ref
   }, React__default.createElement("div", Object.assign({
-    className: classnames(styles$Z['badge'], (_classnames = {}, _classnames[styles$Z['badge--success']] = theme === 'success', _classnames[styles$Z['badge--danger']] = theme === 'danger', _classnames[styles$Z['badge--info']] = theme === 'info', _classnames[styles$Z['badge--warning']] = theme === 'warning', _classnames)),
+    className: classnames(styles$$['badge'], (_classnames = {}, _classnames[styles$$['badge--success']] = theme === 'success', _classnames[styles$$['badge--danger']] = theme === 'danger', _classnames[styles$$['badge--info']] = theme === 'info', _classnames[styles$$['badge--warning']] = theme === 'warning', _classnames)),
     ref: ref,
     "data-testid": testId
   }, otherProps), children));
@@ -9712,9 +9891,9 @@ var Badge = function Badge(_ref, forwardedRef) {
 
 var Badge$1 = forwardRef(Badge);
 
-var styles$_ = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
+var styles$10 = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
 
-var styles$$ = {"avatar-image":"_GKL9P"};
+var styles$11 = {"avatar-image":"_GKL9P"};
 
 var AvatarImage = function AvatarImage(_ref) {
   var url = _ref.url,
@@ -9739,7 +9918,7 @@ var AvatarImage = function AvatarImage(_ref) {
   }
 
   return React__default.createElement("div", {
-    className: styles$$['avatar-image']
+    className: styles$11['avatar-image']
   }, React__default.createElement(IconUserSolid, {
     size: "flexible",
     color: color
@@ -9789,7 +9968,7 @@ var Avatar = function Avatar(_ref) {
 
   var children = _ref.children,
       _ref$color = _ref.color,
-      color = _ref$color === void 0 ? GREY400 : _ref$color,
+      color = _ref$color === void 0 ? COLORS['grey-400'] : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       url = _ref.url,
@@ -9806,9 +9985,9 @@ var Avatar = function Avatar(_ref) {
   }),
       defaultProfilePictureColors = _useState2[0];
 
-  var backgroundColor = url ? GREY200 : color;
+  var backgroundColor = url ? COLORS['grey-200'] : getColor(color);
   return React__default.createElement("div", {
-    className: classnames(styles$_['avatar'], (_classnames = {}, _classnames[styles$_['avatar--small']] = size === 'small', _classnames[styles$_['avatar--medium']] = size === 'medium', _classnames[styles$_['avatar--large']] = size === 'large', _classnames[styles$_['avatar--extra-large']] = size === 'extra-large', _classnames)),
+    className: classnames(styles$10['avatar'], (_classnames = {}, _classnames[styles$10['avatar--small']] = size === 'small', _classnames[styles$10['avatar--medium']] = size === 'medium', _classnames[styles$10['avatar--large']] = size === 'large', _classnames[styles$10['avatar--extra-large']] = size === 'extra-large', _classnames)),
     style: {
       backgroundColor: children || url && !showIconInsteadOfImage ? backgroundColor : defaultProfilePictureColors.backgroundColor
     },
@@ -9821,7 +10000,7 @@ var Avatar = function Avatar(_ref) {
       return setShowIconInsteadOfImage(true);
     }
   }), badge && size !== 'small' && React__default.createElement("div", {
-    className: styles$_['avatar__badge']
+    className: styles$10['avatar__badge']
   }, badge));
 };
 
@@ -9834,7 +10013,7 @@ var CHIP_THEME = {
   DANGER: 'danger'
 };
 
-var styles$10 = {"chip":"_1fIeV","chip--marketing":"_V4byU","chip--success":"_37gN9","chip--upsell":"_Tw7tp","chip--warning":"_t94VZ","chip--info":"_3SmeO","chip--danger":"_2eoX0"};
+var styles$12 = {"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;
@@ -9845,11 +10024,11 @@ var Chip = function Chip(_ref) {
       testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$10['chip'], (_classnames = {}, _classnames[styles$10['chip--marketing']] = theme === CHIP_THEME.MARKETING, _classnames[styles$10['chip--success']] = theme === CHIP_THEME.SUCCESS, _classnames[styles$10['chip--upsell']] = theme === CHIP_THEME.UPSELL, _classnames[styles$10['chip--warning']] = theme === CHIP_THEME.WARNING, _classnames[styles$10['chip--info']] = theme === CHIP_THEME.INFO, _classnames[styles$10['chip--danger']] = theme === CHIP_THEME.DANGER, _classnames))
+    className: classnames(styles$12['chip'], (_classnames = {}, _classnames[styles$12['chip--marketing']] = theme === CHIP_THEME.MARKETING, _classnames[styles$12['chip--success']] = theme === CHIP_THEME.SUCCESS, _classnames[styles$12['chip--upsell']] = theme === CHIP_THEME.UPSELL, _classnames[styles$12['chip--warning']] = theme === CHIP_THEME.WARNING, _classnames[styles$12['chip--info']] = theme === CHIP_THEME.INFO, _classnames[styles$12['chip--danger']] = theme === CHIP_THEME.DANGER, _classnames))
   }, children);
 };
 
-var styles$11 = {"pill":"_23q4Y","pill--default":"_niDEM","pill--success":"_IwDRB","pill--danger":"_MPji-","pill--warning":"_3S2m8","pill--info":"_2G3ML"};
+var styles$13 = {"pill":"_23q4Y","pill--default":"_niDEM","pill--success":"_IwDRB","pill--danger":"_MPji-","pill--warning":"_3S2m8","pill--info":"_2G3ML"};
 
 var PILL_THEME = {
   INFO: 'info',
@@ -9868,7 +10047,7 @@ var Pill = function Pill(_ref) {
       testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$11['pill'], (_classnames = {}, _classnames[styles$11['pill--default']] = theme === PILL_THEME.DEFAULT, _classnames[styles$11['pill--warning']] = theme === PILL_THEME.WARNING, _classnames[styles$11['pill--success']] = theme === PILL_THEME.SUCCESS, _classnames[styles$11['pill--danger']] = theme === PILL_THEME.DANGER, _classnames[styles$11['pill--info']] = theme === PILL_THEME.INFO, _classnames))
+    className: classnames(styles$13['pill'], (_classnames = {}, _classnames[styles$13['pill--default']] = theme === PILL_THEME.DEFAULT, _classnames[styles$13['pill--warning']] = theme === PILL_THEME.WARNING, _classnames[styles$13['pill--success']] = theme === PILL_THEME.SUCCESS, _classnames[styles$13['pill--danger']] = theme === PILL_THEME.DANGER, _classnames[styles$13['pill--info']] = theme === PILL_THEME.INFO, _classnames))
   }, children);
 };
 
@@ -9878,9 +10057,9 @@ var EMPTY_STATE_SIZE = {
   LARGE: 'large'
 };
 
-var styles$12 = {"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$14 = {"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$13 = {"empty-state-container-cta":"_1Cx9N","empty-state-container-cta--inside-modal":"_WbcaM"};
+var styles$15 = {"empty-state-container-cta":"_1Cx9N","empty-state-container-cta--inside-modal":"_WbcaM"};
 
 var EmptyStateContainerCTA = function EmptyStateContainerCTA(_ref) {
   var _actions$primary, _actions$secondary, _classNames;
@@ -9898,7 +10077,7 @@ var EmptyStateContainerCTA = function EmptyStateContainerCTA(_ref) {
     size: BUTTON_SIZES.MIN_WIDTH_100
   });
   return React__default.createElement("div", {
-    className: classnames(styles$13['empty-state-container-cta'], (_classNames = {}, _classNames[styles$13['empty-state-container-cta--inside-modal']] = isInsideModal, _classNames))
+    className: classnames(styles$15['empty-state-container-cta'], (_classNames = {}, _classNames[styles$15['empty-state-container-cta--inside-modal']] = isInsideModal, _classNames))
   }, primaryButton, secondaryButton);
 };
 
@@ -9913,7 +10092,7 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
       isPaywall = _ref$isPaywall === void 0 ? false : _ref$isPaywall,
       testId = _ref.testId;
   return React__default.createElement("div", {
-    className: styles$12['empty-state-container-stack'],
+    className: styles$14['empty-state-container-stack'],
     "data-testid": testId
   }, React__default.createElement("img", {
     src: mediaUrl,
@@ -9924,12 +10103,12 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
     alignItems: "center"
   }, header && React__default.createElement(Text, {
     as: "h4",
-    color: isPaywall && EGGPLANT500
+    color: isPaywall && 'eggplant-500'
   }, header), React__default.createElement(Text, {
     emphasis: "bold",
     as: "body"
   }, title), React__default.createElement("div", {
-    className: styles$12['empty-state-container-stack__body']
+    className: styles$14['empty-state-container-stack__body']
   }, children)), React__default.createElement(Stack, {
     space: 8,
     alignItems: "center"
@@ -9941,7 +10120,7 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
   }, caption)));
 };
 
-var styles$14 = {"empty-state-container-inline":"_eMr1V","empty-state-container-inline--inside-modal":"_2sweG","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","empty-state-container-inline__image":"_G2VtA"};
+var styles$16 = {"empty-state-container-inline":"_eMr1V","empty-state-container-inline--inside-modal":"_2sweG","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","empty-state-container-inline__image":"_G2VtA"};
 
 var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
   var _classNames, _classnames;
@@ -9962,19 +10141,19 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
       isInsideModal = _useModalContext.isModalMounted;
 
   return React__default.createElement("div", {
-    className: classnames(styles$14['empty-state-container-inline'], (_classNames = {}, _classNames[styles$14['empty-state-container-inline--inside-modal']] = isInsideModal, _classNames)),
+    className: classnames(styles$16['empty-state-container-inline'], (_classNames = {}, _classNames[styles$16['empty-state-container-inline--inside-modal']] = isInsideModal, _classNames)),
     "data-testid": testId
   }, React__default.createElement("div", {
-    className: classnames(styles$14['empty-state-container-inline__content'], (_classnames = {}, _classnames[styles$14['empty-state-container__content--full-page']] = size === EMPTY_STATE_SIZE.LARGE, _classnames[styles$14['empty-state-container__content--inline-horizontal']] = size === EMPTY_STATE_SIZE.MEDIUM, _classnames))
+    className: classnames(styles$16['empty-state-container-inline__content'], (_classnames = {}, _classnames[styles$16['empty-state-container__content--full-page']] = size === EMPTY_STATE_SIZE.LARGE, _classnames[styles$16['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
+    color: isPaywall && 'eggplant-500'
   }, header), React__default.createElement(Text, {
     as: "h1"
   }, title)), React__default.createElement("div", {
-    className: styles$14['empty-state-container-inline__body']
+    className: styles$16['empty-state-container-inline__body']
   }, children), React__default.createElement(Stack, {
     space: 8,
     marginTop: 12
@@ -9985,7 +10164,7 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
   }), caption && React__default.createElement(Text, {
     as: "caption"
   }, caption))), React__default.createElement("div", {
-    className: styles$14['empty-state-container-inline__image']
+    className: styles$16['empty-state-container-inline__image']
   }, React__default.createElement("img", {
     src: mediaUrl,
     alt: String(title),
@@ -10059,5 +10238,5 @@ var EmptyState = function EmptyState(_ref) {
   }, children);
 };
 
-export { AsyncSelectField, Avatar, Badge$1 as Badge, Bold, BreadcrumbItem, Breadcrumbs, Button$1 as Button, Calendar, Card, CheckboxField, Chip, CircularProgress, CurrencyField, DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateFilter, DateRangeField, Dropdown, DropdownList, DropdownListDivider, DropdownListItem, EmptyState, Form, FormFeedback, FormFooter, FormRow, FormSection, IconAnalytics, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowTurnDownRight, IconArrowUp, IconAward, IconAwful, IconAwfulMonochromatic, IconBad, IconBadMonochromatic, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClipboardList, IconClock, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDecent, IconDecentMonochromatic, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGood, IconGoodMonochromatic, IconGreat, IconGreatMonochromatic, IconGrinBeam, IconGripVertical, IconHandshake, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMegaphone, IconMessages, IconMinus, IconMinusCircle, IconMoneyBill, IconMugSaucerSolid, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTable, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSearch, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Italic, Link, Modal, ModalBody, ModalFooter, MultiSelectField, Page, PaginationControls, PasswordField, Paywall, PercentageField, PersistentBanner, Pill, PillSelectField, ProgressBar, RadioGroupBoxOption, RadioGroupField, RadioGroupOption, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SegmentedControl, SelectField, SousChefProvider, Spinner, Stack, Text, TextAreaField, TextField, TimeField, Toggle, ToolbarSelect, Tooltip$1 as Tooltip, Underline, WeekField, toast };
+export { AsyncSelectField, Avatar, Badge$1 as Badge, Bold, BreadcrumbItem, Breadcrumbs, Button$1 as Button, Calendar, Card, CheckboxField, Chip, CircularProgress, CurrencyField, DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateFilter, DateRangeField, Dropdown, DropdownList, DropdownListDivider, DropdownListItem, EmptyState, Form, FormFeedback, FormFooter, FormRow, FormSection, IconAnalytics, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowTurnDownRight, IconArrowUp, IconAward, IconAwful, IconAwfulMonochromatic, IconBad, IconBadMonochromatic, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClipboardList, IconClock, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDecent, IconDecentMonochromatic, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGood, IconGoodMonochromatic, IconGreat, IconGreatMonochromatic, IconGrinBeam, IconGripVertical, IconHandshake, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMegaphone, IconMessages, IconMinus, IconMinusCircle, IconMoneyBill, IconMugSaucerSolid, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTable, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSearch, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Italic, Link, Modal, ModalBody, ModalFooter, MultiSelectField, Page, PaginationControls, PasswordField, Paywall, PercentageField, PersistentBanner, Pill, PillSelectField, ProgressBar, RadioGroupBoxOption, RadioGroupField, RadioGroupOption, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SegmentedControl, SelectField, SousChefProvider, Spinner, Stack, Text, TextAreaField, TextField, TimeField, TimeRangeField, Toggle, ToolbarSelect, Tooltip$1 as Tooltip, Underline, WeekField, toast };
 //# sourceMappingURL=index.modern.js.map