@7shifts/sous-chef 3.12.0 → 3.13.1

package/dist/index.js

@@ -23,6 +23,8 @@ var DayPickerInput = _interopDefault(require('react-day-picker/DayPickerInput'))
 var dateFns = require('date-fns');
 var eachDayOfInterval = _interopDefault(require('date-fns/eachDayOfInterval'));
 
+var COLORS = {};
+
 function _extends() {
   _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -767,6 +769,14 @@ var ButtonElement = React.forwardRef(function (_ref2, ref) {
 });
 var Button$1 = React.forwardRef(Button);
 
+var getColor = function getColor(color) {
+  if (color && COLORS[color]) {
+    return COLORS[color];
+  } else {
+    return color;
+  }
+};
+
 var ICON_SIZES = {
   small: '12px',
   medium: '16px',
@@ -785,7 +795,8 @@ var getIconStyles = function getIconStyles(_ref) {
     width: ICON_SIZES[size],
     height: ICON_SIZES[size],
     verticalAlign: 'middle',
-    fill: color
+    fill: color,
+    color: getColor(color)
   }, styles);
 };
 
@@ -936,7 +947,8 @@ var IconArrowTurnDownRight = React.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", {
@@ -2415,13 +2427,12 @@ var IconFourSquares = React.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,
@@ -3003,7 +3014,8 @@ var IconMessages = React.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';
@@ -3082,7 +3094,8 @@ var IconMugSaucerSolid = React.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';
@@ -4308,6 +4321,141 @@ var SousChefProvider = function SousChefProvider(_ref) {
   return React__default.createElement(React.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(React.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
@@ -4323,9 +4471,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() {},
@@ -4341,7 +4522,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);
@@ -4481,7 +4662,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,
@@ -4511,7 +4692,7 @@ var getKeyboardFocusableElements = function getKeyboardFocusableElements(element
   });
 };
 
-var styles$c = {"dropdown__trigger":"_2rs8m"};
+var styles$g = {"dropdown__trigger":"_2rs8m"};
 
 var DROPDOWN_ALIGNEMNT = {
   LEFT: 'left',
@@ -4522,7 +4703,7 @@ var DROPDOWN_TRIGGER = {
   CLICK: 'click'
 };
 
-var styles$d = {"label":"_h724f","label--truncate":"_1VUoF"};
+var styles$h = {"label":"_h724f","label--truncate":"_1VUoF"};
 
 var isEllipsisActive = function isEllipsisActive(e) {
   return e.offsetWidth < e.scrollWidth;
@@ -4583,7 +4764,7 @@ var Label = function Label(_ref) {
   var LabelElement = React__default.createElement("label", {
     htmlFor: htmlFor,
     id: labelId,
-    className: classnames(styles$d['label'], (_classNames = {}, _classNames[styles$d['label--truncate']] = shouldTruncate, _classNames))
+    className: classnames(styles$h['label'], (_classNames = {}, _classNames[styles$h['label--truncate']] = shouldTruncate, _classNames))
   }, children);
 
   if (showTooltip) {
@@ -4596,31 +4777,18 @@ var Label = function Label(_ref) {
   return LabelElement;
 };
 
-var styles$e = {"caption":"_1DWBq"};
+var styles$i = {"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$e['caption']
+    className: styles$i['caption']
   }, 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 styles$f = {"error-message":"_nZ2MD"};
+var styles$j = {"error-message":"_nZ2MD"};
 
 var ErrorMessage = function ErrorMessage(_ref) {
   var fieldId = _ref.fieldId,
@@ -4628,13 +4796,13 @@ var ErrorMessage = function ErrorMessage(_ref) {
       testId = _ref.testId;
   return React__default.createElement("div", {
     id: fieldId && fieldId + "-error-message",
-    className: styles$f['error-message'],
+    className: styles$j['error-message'],
     "data-testid": testId
   }, React__default.createElement(Inline, {
     space: 8,
     alignItems: "center"
   }, React__default.createElement(IconTimesOctagon, {
-    color: RADISH400,
+    color: "radish-400",
     size: "medium"
   }), children));
 };
@@ -4840,7 +5008,7 @@ var useTextField = function useTextField(_ref) {
   };
 };
 
-var styles$g = {"affix-container":"_ybKOk","affix-container--prefixed":"_2COk3","affix-container--suffixed":"_1xXXN","prefix":"_eX5OL","suffix":"__YH01"};
+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;
@@ -4879,16 +5047,16 @@ var AffixContainer = function AffixContainer(_ref) {
     return children;
   }
 
-  var classes = classnames(styles$g['affix-container'], (_classnames = {}, _classnames[styles$g['affix-container--prefixed']] = hasPrefix, _classnames[styles$g['affix-container--suffixed']] = hasSuffix, _classnames));
+  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$g['prefix'],
+    className: styles$k['prefix'],
     ref: prefixElement
   }, prefix), children, hasSuffix && React__default.createElement("div", {
-    className: styles$g['suffix'],
+    className: styles$k['suffix'],
     ref: suffixElement
   }, suffix));
 };
@@ -4901,7 +5069,7 @@ var TimeFieldInput = function TimeFieldInput(_ref) {
   return React__default.createElement(AffixContainer, {
     prefix: prefix ? prefix : React__default.createElement(IconClock, {
       size: "medium",
-      color: GREY400
+      color: "grey-400"
     }),
     suffix: duration
   }, React__default.createElement("input", Object.assign({}, inputProps, {
@@ -5103,7 +5271,7 @@ var Dropdown = function Dropdown(_ref) {
       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'],
+    className: styles$g['dropdown__trigger'],
     ref: updatedRef,
     onFocus: handleFocus
   }), trigger), React__default.createElement(DropdownPane, {
@@ -5116,7 +5284,7 @@ var Dropdown = function Dropdown(_ref) {
   }, children));
 };
 
-var styles$h = {"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;
@@ -5226,27 +5394,17 @@ var useListKeyboardNavigation = function useListKeyboardNavigation(listItems, ac
   };
 };
 
-var styles$i = {"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$i['dropdown-list-divider'],
+    className: styles$m['dropdown-list-divider'],
     "data-testid": testId
   });
 };
 
-var styles$j = {"dropdown-list-item":"_B3_I5","dropdown-list-item--selected":"_1mr1h","dropdown-list-item__content":"_2b7Fg","dropdown-list-item--disabled":"_2l0Cb"};
-
-var COLORS = {};
-
-var getColor = function getColor(color) {
-  if (color && COLORS[color]) {
-    return COLORS[color];
-  } else {
-    return color;
-  }
-};
+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',
@@ -5271,7 +5429,7 @@ var ALIGNMENTS = {
   JUSTIFY: 'justify'
 };
 
-var styles$k = {"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$2h = ["children", "as", "emphasis", "alignment", "color", "testId"];
 
@@ -5292,7 +5450,7 @@ var Text = function Text(_ref) {
     style: _extends({
       color: getColor(color)
     }, positionStyles),
-    className: classnames(styles$k['text'], (_classnames = {}, _classnames[styles$k['text--bold']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD), _classnames[styles$k['text--italic']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC), _classnames[styles$k['text--underline']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE), _classnames[styles$k['text--monospace']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE), _classnames[styles$k['text--align-left']] = alignment === ALIGNMENTS.LEFT, _classnames[styles$k['text--align-right']] = alignment === ALIGNMENTS.RIGHT, _classnames[styles$k['text--align-center']] = alignment === ALIGNMENTS.CENTER, _classnames[styles$k['text--align-justify']] = alignment === ALIGNMENTS.JUSTIFY, _classnames[styles$k['text__body']] = as === TEXT_TYPES.BODY, _classnames[styles$k['text__insight']] = as === TEXT_TYPES.INSIGHT, _classnames[styles$k['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];
@@ -5303,21 +5461,21 @@ var Text = function Text(_ref) {
 var Bold = function Bold(_ref) {
   var children = _ref.children;
   return React__default.createElement("span", {
-    className: classnames(styles$k['text--bold'], styles$k['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$k['text--underline'], styles$k['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$k['text--italic'], styles$k['text'])
+    className: classnames(styles$o['text--italic'], styles$o['text'])
   }, children);
 };
 
@@ -5349,18 +5507,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$j['dropdown-list-item'], (_classNames = {}, _classNames[styles$j['dropdown-list-item--selected']] = selected, _classNames[styles$j['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();
     },
@@ -5369,7 +5527,7 @@ var DropdownListItem = function DropdownListItem(_ref) {
     role: "menuitem",
     "data-testid": testId
   }, prefix, React__default.createElement("div", {
-    className: styles$j['dropdown-list-item__content']
+    className: styles$n['dropdown-list-item__content']
   }, React__default.createElement(Stack, {
     space: 4,
     flex: [1]
@@ -5461,7 +5619,7 @@ var DropdownList = function DropdownList(_ref) {
     }
   }, [highlightItemIndex]);
   return React__default.createElement("ul", {
-    className: styles$h['dropdown-list'],
+    className: styles$l['dropdown-list'],
     "data-testid": testId,
     ref: listRef
   }, React__default.Children.map(children, function (child, index) {
@@ -5469,7 +5627,7 @@ var DropdownList = function DropdownList(_ref) {
 
     return React__default.createElement("div", {
       key: index,
-      className: classnames(styles$h['dropdown-list__item'], (_classNames = {}, _classNames[styles$h['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);
       }
@@ -5485,18 +5643,18 @@ var KebabMenu = function KebabMenu(_ref) {
     }, React__default.createElement(IconEllipsisV, null)),
     alignment: "right"
   }, React__default.createElement(DropdownList, null, actions.map(function (action) {
-    return React__default.createElement(DropdownListItem, {
+    return !action.hidden && React__default.createElement(DropdownListItem, {
       onClick: action.onAction,
       key: action.action
     }, action.label);
   })));
 };
 
-var styles$l = {"data-table-cell":"_2Ybjx","data-table-cell--no-padding":"_5KXHH","data-table-cell--vertical-border":"_2-I0j","data-table-cell--invalid":"_D73Vx","data-table-cell__content":"_3A9-M","data-table-cell__content--right-align":"_17Km7","data-table-cell__content--with-error":"_2c6KQ","data-table-cell__error-icon":"_2hIl3","data-table-cell__error-icon--right-align":"_8Uhyd","data-table-cell__error-icon--left-align":"_3X51R"};
+var styles$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 styles$m = {"overlay":"_2puqJ","overlay--after-open":"_1167h","overlay--before-close":"_t_t7L","content":"_wQQ_2","content--after-open":"_3jwux","content--before-close":"_2c2QP"};
+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 styles$n = {"header":"_36nxW","header__close-button":"_2zYre","sub-header":"_2XwRD"};
+var styles$r = {"header":"_36nxW","header__close-button":"_2zYre","sub-header":"_2XwRD"};
 
 var ModalHeader = function ModalHeader(_ref) {
   var header = _ref.header,
@@ -5506,7 +5664,7 @@ var ModalHeader = function ModalHeader(_ref) {
 
   if (!header && !subHeader) {
     return onClose ? React__default.createElement("div", {
-      className: styles$n['header__close-button']
+      className: styles$r['header__close-button']
     }, React__default.createElement(Button$1, {
       theme: "link-icon",
       onClick: onClose,
@@ -5521,13 +5679,13 @@ var ModalHeader = function ModalHeader(_ref) {
     flex: [1],
     alignItems: "center"
   }, React__default.createElement("span", {
-    className: styles$n['header']
+    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$n['sub-header']
+    className: styles$r['sub-header']
   }, subHeader));
 };
 
@@ -5577,14 +5735,14 @@ var Modal = function Modal(_ref) {
     contentLabel: "Modal",
     appElement: rootElementId && document.getElementById(rootElementId) || undefined,
     overlayClassName: {
-      base: styles$m['overlay'],
-      afterOpen: styles$m['overlay--after-open'],
-      beforeClose: styles$m['overlay--before-close']
+      base: styles$q['overlay'],
+      afterOpen: styles$q['overlay--after-open'],
+      beforeClose: styles$q['overlay--before-close']
     },
     className: {
-      base: styles$m['content'],
-      afterOpen: styles$m['content--after-open'],
-      beforeClose: styles$m['content--before-close']
+      base: styles$q['content'],
+      afterOpen: styles$q['content--after-open'],
+      beforeClose: styles$q['content--before-close']
     }
   }, React__default.createElement(ModalHeader, {
     header: header,
@@ -5627,7 +5785,7 @@ var useScrollShadow = function useScrollShadow() {
   };
 };
 
-var styles$o = {"modal-body":"_2J-ku","modal-body--with-scroll-shadow":"_2ErCP"};
+var styles$s = {"modal-body":"_2J-ku","modal-body--with-scroll-shadow":"_2ErCP"};
 
 var ModalBody = function ModalBody(_ref) {
   var _classNames;
@@ -5640,13 +5798,13 @@ var ModalBody = function ModalBody(_ref) {
       showScrollShadow = _useScrollShadow.showScrollShadow;
 
   return React__default.createElement("div", {
-    className: classnames(styles$o['modal-body'], (_classNames = {}, _classNames[styles$o['modal-body--with-scroll-shadow']] = showScrollShadow, _classNames)),
+    className: classnames(styles$s['modal-body'], (_classNames = {}, _classNames[styles$s['modal-body--with-scroll-shadow']] = showScrollShadow, _classNames)),
     ref: ref,
     "data-testid": testId
   }, children);
 };
 
-var styles$p = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
+var styles$t = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
 
 var updateButtonProps = function updateButtonProps(button, newProps) {
   if (!button) {
@@ -5685,7 +5843,7 @@ var ModalFooter = function ModalFooter(_ref) {
     }, React__default.createElement(Inline, {
       justifyContent: "space-between"
     }, React__default.createElement("div", {
-      className: classnames((_classnames = {}, _classnames[styles$p['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
+      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)));
@@ -5700,7 +5858,7 @@ var FooterContainer = function FooterContainer(_ref2) {
   var childrenItens = React__default.Children.toArray(children);
   var hasCustomAlignment = childrenItens.length === 1 && childrenItens[0].type === Inline;
   return React__default.createElement("div", {
-    className: styles$p['modal-footer'],
+    className: styles$t['modal-footer'],
     "data-testid": testId
   }, React__default.createElement(Inline, {
     justifyContent: "end",
@@ -5709,9 +5867,9 @@ var FooterContainer = function FooterContainer(_ref2) {
   }, children));
 };
 
-var styles$q = {"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 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 styles$r = {"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 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"};
 
 function parseDate(str, format, locale) {
   var parsed = dateFnsParse(str, format, new Date(), {
@@ -5834,7 +5992,7 @@ var Calendar = function Calendar(_ref) {
       calendarRef = _useState[0],
       setCalendarRef = _useState[1];
 
-  var style = mode === CALENDAR_MODE.DAY ? styles$q : styles$r;
+  var style = mode === CALENDAR_MODE.DAY ? styles$u : styles$v;
   var anchorNode = anchorRef.current;
   useOnClickOutside({
     current: calendarRef
@@ -5930,17 +6088,17 @@ var DataTableCellElement = function DataTableCellElement(_ref, ref) {
   var hasError = !!error;
   var errorMessage = error;
   var icon = hasError && React__default.createElement("div", {
-    className: classnames(styles$l['data-table-cell__error-icon'], (_classnames = {}, _classnames[styles$l['data-table-cell__error-icon--right-align']] = isRightAligned, _classnames[styles$l['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$l['data-table-cell--invalid']] = hasError, _classnames2[styles$l['data-table-cell--no-padding']] = noPadding, _classnames2[styles$l['data-table-cell--vertical-border']] = hasVerticalBorders, _classnames2), styles$l['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$l['data-table-cell__content'], (_classnames3 = {}, _classnames3[styles$l['data-table-cell__content--with-error']] = hasError, _classnames3[styles$l['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,
@@ -5964,7 +6122,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({
@@ -5977,7 +6135,7 @@ var DataTableRowActions = function DataTableRowActions(_ref) {
   })));
 };
 
-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;
@@ -6026,7 +6184,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, {
@@ -6035,7 +6193,7 @@ 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",
@@ -6080,7 +6238,7 @@ var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
   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 styleNames = classnames(styles$d['item'], (_classnames = {}, _classnames[styles$d['clickable']] = onClick, _classnames[styles$d['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;
@@ -6114,172 +6272,26 @@ var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
 
 var DataTableRow = React.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 DataTableDefaultItemComponent = function DataTableDefaultItemComponent(_ref) {
   var columns = _ref.columns,
-      onSort = _ref.onSort,
-      showActionMenu = _ref.showActionMenu;
-  var haveLabels = columns.find(function (column) {
-    return column.label && column.label !== '';
+      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';
   });
-
-  if (!haveLabels) {
-    return React__default.createElement(ColumnSizes, {
-      columns: columns,
-      showActionMenu: showActionMenu
-    });
-  }
-
-  var handleSort = function handleSort(column) {
-    var nextDirection = getNextSort(column);
-
-    if (onSort) {
-      onSort({
-        columnName: column.name,
-        direction: nextDirection
-      });
-    }
-  };
-
-  return React__default.createElement(React.Fragment, null, React__default.createElement(ColumnSizes, {
-    columns: columns,
-    showActionMenu: showActionMenu
-  }), React__default.createElement("thead", null, React__default.createElement("tr", {
-    className: styles$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'])
-  }))));
-};
-
-var ColumnSizes = function ColumnSizes(_ref2) {
-  var columns = _ref2.columns,
-      showActionMenu = _ref2.showActionMenu;
-  var columnPercentageSizes = calculatePercentageOfProportion(columns.map(function (column) {
-    return column.size || 1;
-  }));
-  return React__default.createElement("colgroup", null, columns.map(function (column, index) {
-    return React__default.createElement("col", {
-      key: column.name,
-      style: {
-        width: columnPercentageSizes[index] + "%"
-      }
-    });
-  }), showActionMenu && React__default.createElement("col", {
-    style: {
-      width: "1%",
-      whiteSpace: 'nowrap'
-    }
-  }));
-};
-
-var getNextSort = function getNextSort(column) {
-  switch (column.currentSort) {
-    case SORT_ORDER.ASC:
-      return null;
-
-    case SORT_ORDER.DESC:
-      return SORT_ORDER.ASC;
-
-    default:
-      return SORT_ORDER.DESC;
-  }
-};
-
-var IconSort$1 = function IconSort(_ref3) {
-  var sortDirection = _ref3.sortDirection;
-  var sortDir = sortDirection || null;
-  return React__default.createElement("div", {
-    style: {
-      display: 'inline-flex',
-      flexDirection: 'column'
-    }
-  }, sortDir !== 'desc' && React__default.createElement(IconChevronUp, {
-    size: "small",
-    color: GREY400
-  }), sortDir !== 'asc' && React__default.createElement("span", {
-    style: {
-      marginTop: '-4px'
-    }
-  }, React__default.createElement(IconChevronDown, {
-    size: "small",
-    color: GREY400
-  })));
-};
-
-var styles$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 DataTableScrollFakeBorder = function DataTableScrollFakeBorder(_ref) {
-  var _classNames, _classNames2, _classNames3;
-
-  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))
+  return React__default.createElement(DataTableRow, {
+    actions: item.actions,
+    testId: testId
+  }, columnsToShow.map(function (headingKey) {
+    return React__default.createElement("div", {
+      key: headingKey
+    }, item[headingKey] || '');
   }));
 };
 
-var styles$v = {"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$v['data-table-loading-block']
-  }, React__default.createElement("td", {
-    colSpan: colSpan
-  }, React__default.createElement(Spinner, {
-    block: true
-  })));
-};
-
 var DataTable = function DataTable(_ref) {
   var _classNames, _classNames2, _classNames3;
 
@@ -6302,7 +6314,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;
 
@@ -6324,20 +6336,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,
@@ -6351,12 +6363,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,
@@ -6366,26 +6378,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,
@@ -6481,7 +6473,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"];
 
@@ -6494,7 +6486,7 @@ function CustomControl(_ref) {
   var SelectedOptionPrefix = props.selectProps.componentsProps.SelectedOptionPrefix;
   var selectedOption = (_props$getValue = props.getValue()) === null || _props$getValue === void 0 ? void 0 : _props$getValue[0];
   return React__default.createElement(Select.components.Control, Object.assign({}, props), SelectedOptionPrefix && selectedOption ? React__default.createElement("div", {
-    className: styles$w['custom-control'],
+    className: styles$x['custom-control'],
     style: {
       paddingLeft: selectedOption ? 8 : 0
     }
@@ -6523,7 +6515,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, {
@@ -6535,16 +6527,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',
@@ -6552,7 +6544,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
         width: asToolbarFilter ? 'fit-content' : undefined,
         margin: 0,
         ':hover': asToolbarFilter ? {
-          backgroundColor: GREY100
+          backgroundColor: COLORS['grey-100']
         } : 'none'
       });
     },
@@ -6563,7 +6555,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',
@@ -6574,7 +6566,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     noOptionsMessage: function noOptionsMessage() {
       return {
-        color: GREY400,
+        color: COLORS['grey-400'],
         textAlign: 'center',
         padding: '8px',
         fontFamily: FONT_FAMILY,
@@ -6583,7 +6575,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     loadingMessage: function loadingMessage() {
       return {
-        color: GREY400,
+        color: COLORS['grey-400'],
         textAlign: 'center',
         padding: '8px',
         fontFamily: FONT_FAMILY,
@@ -6592,7 +6584,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',
@@ -6604,15 +6596,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',
@@ -6628,15 +6620,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']
         }
       });
     },
@@ -6662,7 +6654,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"];
 
@@ -6732,15 +6724,15 @@ function CustomMenu(_ref) {
   return React__default.createElement(Select.components.Menu, Object.assign({}, props), React__default.createElement("div", {
     ref: containerRef
   }, children, React__default.createElement("hr", {
-    className: styles$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",
@@ -6923,9 +6915,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',
@@ -6969,7 +6961,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:
@@ -6985,17 +6977,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,
@@ -7003,7 +6995,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;
@@ -7038,7 +7030,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);
     }
@@ -7074,7 +7066,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, {
@@ -7084,7 +7076,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,
@@ -7101,7 +7093,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,
@@ -7115,7 +7107,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,
@@ -7132,7 +7124,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;
@@ -7143,16 +7135,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"];
 
@@ -7169,18 +7161,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
   })));
@@ -7194,7 +7186,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,
@@ -7207,24 +7199,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(reactRouterDom.Link, {
     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));
 };
 
@@ -7249,7 +7241,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',
@@ -7272,7 +7264,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
@@ -7292,7 +7284,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;
@@ -7304,14 +7296,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));
 };
 
@@ -7329,7 +7321,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;
@@ -7364,7 +7356,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
@@ -7406,12 +7398,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%';
@@ -7442,7 +7434,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,
@@ -7451,7 +7443,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 = React.useRef(null);
@@ -7527,7 +7519,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)) {
@@ -7559,7 +7551,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) {
@@ -7639,7 +7631,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,
@@ -7669,7 +7661,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,
@@ -7682,12 +7674,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, {
@@ -7695,7 +7687,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,
@@ -7787,7 +7779,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,
@@ -7809,7 +7801,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));
   })));
 };
@@ -7857,9 +7849,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,
@@ -7874,7 +7866,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,
@@ -7885,7 +7877,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",
@@ -7894,13 +7886,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,
@@ -7919,7 +7911,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,
@@ -7930,11 +7922,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)));
@@ -8069,7 +8061,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, {
@@ -8082,9 +8074,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;
@@ -8092,12 +8084,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));
 };
 
@@ -8177,11 +8169,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",
@@ -8193,16 +8185,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"
   }))));
 };
 
@@ -8284,7 +8276,7 @@ var MultiSelectField = function MultiSelectField(_ref) {
   }));
 };
 
-var styles$S = {"custom-list":"_uC4zU"};
+var styles$T = {"custom-list":"_uC4zU"};
 
 var _excluded$2o = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
 
@@ -8303,7 +8295,7 @@ var CustomList = function CustomList(_ref) {
   return React__default.createElement(Select.components.MenuList, Object.assign({}, props), React__default.createElement(React.Fragment, null, children, showFooter && React__default.createElement(Inline, {
     justifyContent: "center"
   }, React__default.createElement("div", {
-    className: styles$S['custom-list']
+    className: styles$T['custom-list']
   }, getLocalizedString('main.START_TYPING_TO_SEE_MORE_OPTIONS')))));
 };
 
@@ -8532,7 +8524,7 @@ var DateField = function DateField(_ref) {
     error: controllers.error
   };
   var dayPickerProps = {
-    classNames: styles$q,
+    classNames: styles$u,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -8550,7 +8542,7 @@ var DateField = function DateField(_ref) {
     })
   }, React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$q,
+    classNames: styles$u,
     formatDate: formatDate,
     parseDate: parseDate,
     placeholder: placeholder || format.toUpperCase(),
@@ -8659,7 +8651,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,
@@ -8698,7 +8690,7 @@ var FromDate = function FromDate(_ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$T,
+    classNames: styles$U,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -8725,7 +8717,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,
@@ -8799,7 +8791,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) {
@@ -8818,7 +8810,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,
@@ -8903,11 +8895,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,
@@ -8933,7 +8925,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,
@@ -9030,7 +9022,7 @@ var WeekField = function WeekField(_ref) {
   };
 
   var dayPickerProps = {
-    classNames: styles$r,
+    classNames: styles$v,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -9060,7 +9052,7 @@ var WeekField = function WeekField(_ref) {
     })
   }, React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$r,
+    classNames: styles$v,
     formatDate: formatDate,
     parseDate: parseDate,
     placeholder: placeholder || format.toUpperCase(),
@@ -9271,7 +9263,7 @@ var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
 var TimeRangeSelector = React.forwardRef(TimeFieldElement);
 var TimeField = React.forwardRef(TimeFieldElement);
 
-var styles$U = {"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 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,
@@ -9290,7 +9282,7 @@ var TimeRangeEnd = function TimeRangeEnd(_ref) {
     interval: interval,
     prefix: React__default.createElement(IconArrowRight, {
       size: "medium",
-      color: GREY400
+      color: "grey-400"
     }),
     duration: duration,
     endField: true,
@@ -9373,7 +9365,7 @@ var TimeRangeField = function TimeRangeField(_ref) {
 
   var timeRangeDuration = getDuration(end, start);
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$U['time-range-field'], (_classnames = {}, _classnames[styles$U['time-range-field--invalid']] = hasError, _classnames[styles$U['time-range-field--disabled']] = disabled, _classnames)),
+    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,
@@ -9560,7 +9552,7 @@ var BUTTON_THEME = {
   UPSELL: 'upsell'
 };
 
-var styles$V = {"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,
@@ -9583,7 +9575,7 @@ var ButtonCTA = function ButtonCTA(_ref) {
   }, button.props));
 };
 
-var styles$W = {"banner__caption":"_1jqm8"};
+var styles$X = {"banner__caption":"_1jqm8"};
 
 var InlineBannerCTA = function InlineBannerCTA(_ref) {
   var primaryButton = _ref.primaryButton,
@@ -9614,7 +9606,7 @@ var InlineBannerCTA = function InlineBannerCTA(_ref) {
     bannerTheme: bannerTheme,
     primaryCTA: true
   })), caption && multiLine && React__default.createElement("div", {
-    className: styles$W['banner__caption']
+    className: styles$X['banner__caption']
   }, caption));
 };
 
@@ -9661,14 +9653,14 @@ var InlineBanner = function InlineBanner(_ref) {
   var Layout = multiLine ? Stack : Inline;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$V['banner'], (_classnames = {}, _classnames[styles$V['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$V['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$V['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$V['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$V['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$V['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$V['banner__icon']
+    className: styles$W['banner__icon']
   }, React__default.createElement(InlineBannerIcon, {
     theme: theme
   })), React__default.createElement(Layout, {
@@ -9678,9 +9670,9 @@ var InlineBanner = function InlineBanner(_ref) {
     flex: ['min-content'],
     flexWrap: multiLine ? undefined : 'wrap'
   }, title && React__default.createElement("div", {
-    className: styles$V['banner__title']
+    className: styles$W['banner__title']
   }, title), React__default.createElement("div", {
-    className: classnames(styles$V['banner__body'], (_classnames2 = {}, _classnames2[styles$V['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,
@@ -9688,7 +9680,7 @@ var InlineBanner = function InlineBanner(_ref) {
     multiLine: multiLine,
     bannerTheme: theme
   })), dismissable && React__default.createElement("div", {
-    className: styles$V['banner__close']
+    className: styles$W['banner__close']
   }, React__default.createElement(Button$1, {
     theme: "link-icon",
     type: "button",
@@ -9702,7 +9694,7 @@ var PERSISTENT_BANNER_THEME = {
   DANGER: 'danger'
 };
 
-var styles$X = {"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;
@@ -9731,7 +9723,7 @@ var PersistentBanner = function PersistentBanner(_ref) {
   };
 
   return React__default.createElement("div", {
-    className: classnames(styles$X['persistent-banner'], (_classNames = {}, _classNames[styles$X['persistent-banner--info']] = theme === PERSISTENT_BANNER_THEME.INFO, _classNames[styles$X['persistent-banner--danger']] = theme === PERSISTENT_BANNER_THEME.DANGER, _classNames[styles$X['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],
@@ -9803,7 +9795,7 @@ var useProgress = function useProgress(progress, maxValue, getMetric) {
   };
 };
 
-var styles$Y = {"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,
@@ -9818,7 +9810,7 @@ var CircularProgress = function CircularProgress(_ref) {
 
   var determinant = metric.percentage * 2.79;
   return React__default.createElement("div", Object.assign({}, elementProps, {
-    className: styles$Y['circular-progress'],
+    className: styles$Z['circular-progress'],
     "data-testid": testId
   }), React__default.createElement("svg", {
     viewBox: "0 0 100 100"
@@ -9827,21 +9819,21 @@ var CircularProgress = function CircularProgress(_ref) {
     cy: 50,
     r: 45,
     strokeWidth: "10px",
-    className: styles$Y['circular-progress__track']
+    className: styles$Z['circular-progress__track']
   }), React__default.createElement("circle", {
     cx: 50,
     cy: 50,
     r: 45,
     strokeWidth: "10px",
-    className: styles$Y['circular-progress__indicator'],
+    className: styles$Z['circular-progress__indicator'],
     strokeDashoffset: "66",
     strokeDasharray: determinant + " " + (279 - determinant)
   })), React__default.createElement("div", {
-    className: styles$Y['circular-progress__label']
+    className: styles$Z['circular-progress__label']
   }, children || metric.progress + "/" + metric.maxValue));
 };
 
-var styles$Z = {"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,
@@ -9856,15 +9848,15 @@ var ProgressBar = function ProgressBar(_ref) {
       metric = _useProgress.metric;
 
   return React__default.createElement(Stack, null, React__default.createElement("div", Object.assign({}, elementProps, {
-    className: styles$Z['progress-bar'],
+    className: styles$_['progress-bar'],
     "data-testid": testId
   }), React__default.createElement("div", {
-    className: styles$Z['progress-bar__indicator'],
+    className: styles$_['progress-bar__indicator'],
     style: {
       width: metric.percentage + "%"
     }
   })), steps && steps.length > 0 && React__default.createElement("div", {
-    className: styles$Z['progress-bar__steps']
+    className: styles$_['progress-bar__steps']
   }, steps.map(function (step) {
     return React__default.createElement("div", {
       key: step
@@ -9872,7 +9864,7 @@ var ProgressBar = function ProgressBar(_ref) {
   })));
 };
 
-var styles$_ = {"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"];
 
@@ -9896,7 +9888,7 @@ var Badge = function Badge(_ref, forwardedRef) {
     overlay: title,
     ref: ref
   }, React__default.createElement("div", Object.assign({
-    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)),
+    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));
@@ -9904,9 +9896,9 @@ var Badge = function Badge(_ref, forwardedRef) {
 
 var Badge$1 = React.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$10 = {"avatar-image":"_GKL9P"};
+var styles$11 = {"avatar-image":"_GKL9P"};
 
 var AvatarImage = function AvatarImage(_ref) {
   var url = _ref.url,
@@ -9931,7 +9923,7 @@ var AvatarImage = function AvatarImage(_ref) {
   }
 
   return React__default.createElement("div", {
-    className: styles$10['avatar-image']
+    className: styles$11['avatar-image']
   }, React__default.createElement(IconUserSolid, {
     size: "flexible",
     color: color
@@ -9981,7 +9973,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,
@@ -9998,9 +9990,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
     },
@@ -10013,7 +10005,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));
 };
 
@@ -10026,7 +10018,7 @@ var CHIP_THEME = {
   DANGER: 'danger'
 };
 
-var styles$11 = {"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;
@@ -10037,11 +10029,11 @@ var Chip = function Chip(_ref) {
       testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$11['chip'], (_classnames = {}, _classnames[styles$11['chip--marketing']] = theme === CHIP_THEME.MARKETING, _classnames[styles$11['chip--success']] = theme === CHIP_THEME.SUCCESS, _classnames[styles$11['chip--upsell']] = theme === CHIP_THEME.UPSELL, _classnames[styles$11['chip--warning']] = theme === CHIP_THEME.WARNING, _classnames[styles$11['chip--info']] = theme === CHIP_THEME.INFO, _classnames[styles$11['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$12 = {"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',
@@ -10060,7 +10052,7 @@ var Pill = function Pill(_ref) {
       testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$12['pill'], (_classnames = {}, _classnames[styles$12['pill--default']] = theme === PILL_THEME.DEFAULT, _classnames[styles$12['pill--warning']] = theme === PILL_THEME.WARNING, _classnames[styles$12['pill--success']] = theme === PILL_THEME.SUCCESS, _classnames[styles$12['pill--danger']] = theme === PILL_THEME.DANGER, _classnames[styles$12['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);
 };
 
@@ -10070,9 +10062,9 @@ var EMPTY_STATE_SIZE = {
   LARGE: 'large'
 };
 
-var styles$13 = {"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$14 = {"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;
@@ -10090,7 +10082,7 @@ var EmptyStateContainerCTA = function EmptyStateContainerCTA(_ref) {
     size: BUTTON_SIZES.MIN_WIDTH_100
   });
   return React__default.createElement("div", {
-    className: classnames(styles$14['empty-state-container-cta'], (_classNames = {}, _classNames[styles$14['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);
 };
 
@@ -10105,7 +10097,7 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
       isPaywall = _ref$isPaywall === void 0 ? false : _ref$isPaywall,
       testId = _ref.testId;
   return React__default.createElement("div", {
-    className: styles$13['empty-state-container-stack'],
+    className: styles$14['empty-state-container-stack'],
     "data-testid": testId
   }, React__default.createElement("img", {
     src: mediaUrl,
@@ -10116,12 +10108,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$13['empty-state-container-stack__body']
+    className: styles$14['empty-state-container-stack__body']
   }, children)), React__default.createElement(Stack, {
     space: 8,
     alignItems: "center"
@@ -10133,7 +10125,7 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
   }, caption)));
 };
 
-var styles$15 = {"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;
@@ -10154,19 +10146,19 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
       isInsideModal = _useModalContext.isModalMounted;
 
   return React__default.createElement("div", {
-    className: classnames(styles$15['empty-state-container-inline'], (_classNames = {}, _classNames[styles$15['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$15['empty-state-container-inline__content'], (_classnames = {}, _classnames[styles$15['empty-state-container__content--full-page']] = size === EMPTY_STATE_SIZE.LARGE, _classnames[styles$15['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$15['empty-state-container-inline__body']
+    className: styles$16['empty-state-container-inline__body']
   }, children), React__default.createElement(Stack, {
     space: 8,
     marginTop: 12
@@ -10177,7 +10169,7 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
   }), caption && React__default.createElement(Text, {
     as: "caption"
   }, caption))), React__default.createElement("div", {
-    className: styles$15['empty-state-container-inline__image']
+    className: styles$16['empty-state-container-inline__image']
   }, React__default.createElement("img", {
     src: mediaUrl,
     alt: String(title),
@@ -10258,6 +10250,7 @@ exports.Bold = Bold;
 exports.BreadcrumbItem = BreadcrumbItem;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button$1;
+exports.COLORS = COLORS;
 exports.Calendar = Calendar;
 exports.Card = Card;
 exports.CheckboxField = CheckboxField;