@7shifts/sous-chef 3.12.0 → 3.13.1

package/dist/index.modern.js

@@ -18,6 +18,8 @@ import DayPickerInput from 'react-day-picker/DayPickerInput';
 import { isDate, startOfDay as startOfDay$1 } from 'date-fns';
 import eachDayOfInterval from 'date-fns/eachDayOfInterval';
 
+var COLORS = {};
+
 function _extends() {
   _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -762,6 +764,14 @@ var ButtonElement = forwardRef(function (_ref2, ref) {
 });
 var Button$1 = forwardRef(Button);
 
+var getColor = function getColor(color) {
+  if (color && COLORS[color]) {
+    return COLORS[color];
+  } else {
+    return color;
+  }
+};
+
 var ICON_SIZES = {
   small: '12px',
   medium: '16px',
@@ -780,7 +790,8 @@ var getIconStyles = function getIconStyles(_ref) {
     width: ICON_SIZES[size],
     height: ICON_SIZES[size],
     verticalAlign: 'middle',
-    fill: color
+    fill: color,
+    color: getColor(color)
   }, styles);
 };
 
@@ -931,7 +942,8 @@ var IconArrowTurnDownRight = forwardRef(function (_ref, ref) {
     clipPath: "url(#icon-arrow-turn-down-right_svg__a)"
   }, React__default.createElement("path", {
     opacity: 0.9,
-    d: "m15.957 14.862 3.905-3.905a.47.47 0 0 0 0-.664l-3.905-3.906a.47.47 0 0 0-.664 0l-.332.332a.47.47 0 0 0 0 .665l2.537 2.538H1.406V5.938a.469.469 0 0 0-.137-.331L.8 5.138a.469.469 0 0 0-.8.331v4.921c0 .518.42.938.937.938h16.561l-2.537 2.538a.47.47 0 0 0 0 .664l.332.332a.47.47 0 0 0 .664 0Z"
+    d: "m15.957 14.862 3.905-3.905a.47.47 0 0 0 0-.664l-3.905-3.906a.47.47 0 0 0-.664 0l-.332.332a.47.47 0 0 0 0 .665l2.537 2.538H1.406V5.938a.469.469 0 0 0-.137-.331L.8 5.138a.469.469 0 0 0-.8.331v4.921c0 .518.42.938.937.938h16.561l-2.537 2.538a.47.47 0 0 0 0 .664l.332.332a.47.47 0 0 0 .664 0Z",
+    fill: "currentColor"
   })), React__default.createElement("defs", null, React__default.createElement("clipPath", {
     id: "icon-arrow-turn-down-right_svg__a"
   }, React__default.createElement("path", {
@@ -2410,13 +2422,12 @@ var IconFourSquares = forwardRef(function (_ref, ref) {
     rx: 1,
     fill: "currentColor"
   }), React__default.createElement("rect", {
-    x: 10.822,
-    y: 10.823,
-    width: 8.094,
-    height: 8.094,
-    rx: 0.75,
-    stroke: "currentColor",
-    strokeWidth: 0.5
+    x: 10.573,
+    y: 10.573,
+    width: 8.594,
+    height: 8.594,
+    rx: 1,
+    fill: "currentColor"
   }), React__default.createElement("rect", {
     x: 0.833,
     y: 0.833,
@@ -2998,7 +3009,8 @@ var IconMessages = forwardRef(function (_ref, ref) {
     "data-testid": testId,
     ref: ref
   }, props), React__default.createElement("path", {
-    d: "M17.778 5.556h-3.334V2.222A2.224 2.224 0 0 0 12.222 0h-10A2.224 2.224 0 0 0 0 2.222v5.556C0 9.003.997 10 2.222 10h1.111v1.806a.415.415 0 0 0 .664.333l2.67-1.51v2.704c0 1.226.996 2.223 2.222 2.223h3.333l3.781 2.138a.416.416 0 0 0 .663-.333v-1.805h1.112A2.224 2.224 0 0 0 20 13.333V7.778a2.224 2.224 0 0 0-2.222-2.222ZM2.222 8.889c-.61 0-1.11-.5-1.11-1.111V2.222c0-.61.5-1.11 1.11-1.11h10c.611 0 1.111.5 1.111 1.11v5.556c0 .61-.5 1.11-1.11 1.11H7.485l-.253.147-2.789 1.576V8.89H2.222Zm16.667 4.444c0 .611-.5 1.111-1.111 1.111h-2.222v1.723L12.77 14.59l-.254-.146H8.89c-.611 0-1.111-.5-1.111-1.11V10h4.444a2.224 2.224 0 0 0 2.222-2.222V6.667h3.334c.61 0 1.11.5 1.11 1.11v5.556Z"
+    d: "M17.778 5.556h-3.334V2.222A2.224 2.224 0 0 0 12.222 0h-10A2.224 2.224 0 0 0 0 2.222v5.556C0 9.003.997 10 2.222 10h1.111v1.806a.415.415 0 0 0 .664.333l2.67-1.51v2.704c0 1.226.996 2.223 2.222 2.223h3.333l3.781 2.138a.416.416 0 0 0 .663-.333v-1.805h1.112A2.224 2.224 0 0 0 20 13.333V7.778a2.224 2.224 0 0 0-2.222-2.222ZM2.222 8.889c-.61 0-1.11-.5-1.11-1.111V2.222c0-.61.5-1.11 1.11-1.11h10c.611 0 1.111.5 1.111 1.11v5.556c0 .61-.5 1.11-1.11 1.11H7.485l-.253.147-2.789 1.576V8.89H2.222Zm16.667 4.444c0 .611-.5 1.111-1.111 1.111h-2.222v1.723L12.77 14.59l-.254-.146H8.89c-.611 0-1.111-.5-1.111-1.11V10h4.444a2.224 2.224 0 0 0 2.222-2.222V6.667h3.334c.61 0 1.11.5 1.11 1.11v5.556Z",
+    fill: "currentColor"
   }));
 });
 IconMessages.displayName = 'IconMessages';
@@ -3077,7 +3089,8 @@ var IconMugSaucerSolid = forwardRef(function (_ref, ref) {
     "data-testid": testId,
     ref: ref
   }, props), React__default.createElement("path", {
-    d: "M7 14h6a3 3 0 0 0 3-3h1c2.206 0 4-1.794 4-4s-1.794-4-4-4H4.75a.748.748 0 0 0-.75.75V11a3 3 0 0 0 3 3Zm10-9c1.103 0 2 .897 2 2s-.897 2-2 2h-1V5h1Zm1.49 12H2.51c-1.488 0-1.907-2-1.126-2h18.228c.782 0 .369 2-1.122 2Z"
+    d: "M7 14h6a3 3 0 0 0 3-3h1c2.206 0 4-1.794 4-4s-1.794-4-4-4H4.75a.748.748 0 0 0-.75.75V11a3 3 0 0 0 3 3Zm10-9c1.103 0 2 .897 2 2s-.897 2-2 2h-1V5h1Zm1.49 12H2.51c-1.488 0-1.907-2-1.126-2h18.228c.782 0 .369 2-1.122 2Z",
+    fill: "currentColor"
   }));
 });
 IconMugSaucerSolid.displayName = 'IconMugSaucerSolid';
@@ -4303,6 +4316,141 @@ var SousChefProvider = function SousChefProvider(_ref) {
   return React__default.createElement(Fragment, null, React__default.createElement(ToastContainer, null), children);
 };
 
+var styles$9 = {"data-table-header":"_FcxnN","data-table-header__item":"_1QljH","data-table-header__item--sortable":"_1T4uT","data-table-header__itemfocus":"_HtAmk","data-table-header__item--action":"_39zhh","data-table-header__item-content":"_1CG8B","data-table-header__item-content--right-align":"_1iqpa","data-table-header__sort-icon":"_21Xc6"};
+
+var SORT_ORDER = {
+  ASC: 'asc',
+  DESC: 'desc'
+};
+
+var getNextSort = function getNextSort(column) {
+  switch (column.currentSort) {
+    case SORT_ORDER.ASC:
+      return null;
+
+    case SORT_ORDER.DESC:
+      return SORT_ORDER.ASC;
+
+    default:
+      return SORT_ORDER.DESC;
+  }
+};
+
+var calculatePercentageOfProportion = function calculatePercentageOfProportion(proportionNumbers) {
+  var sum = proportionNumbers.reduce(function (total, num) {
+    return total + num;
+  }, 0);
+  var percentages = proportionNumbers.map(function (num) {
+    return parseFloat((num / sum * 100).toFixed(2));
+  });
+  return percentages;
+};
+
+var ColumnSizes = function ColumnSizes(_ref) {
+  var columns = _ref.columns,
+      showActionMenu = _ref.showActionMenu;
+  var columnPercentageSizes = calculatePercentageOfProportion(columns.map(function (column) {
+    return column.size || 1;
+  }));
+  return React__default.createElement("colgroup", null, columns.map(function (column, index) {
+    return React__default.createElement("col", {
+      key: column.name,
+      style: {
+        width: columnPercentageSizes[index] + "%"
+      }
+    });
+  }), showActionMenu && React__default.createElement("col", {
+    style: {
+      width: "1%",
+      whiteSpace: 'nowrap'
+    }
+  }));
+};
+
+var HeaderSortIcon = function HeaderSortIcon(_ref) {
+  var sortDirection = _ref.sortDirection;
+  var sortDir = sortDirection || null;
+  return React__default.createElement("div", {
+    style: {
+      display: 'inline-flex',
+      flexDirection: 'column'
+    }
+  }, sortDir !== 'desc' && React__default.createElement(IconChevronUp, {
+    size: "small",
+    color: "grey-400"
+  }), sortDir !== 'asc' && React__default.createElement("span", {
+    style: {
+      marginTop: '-4px'
+    }
+  }, React__default.createElement(IconChevronDown, {
+    size: "small",
+    color: "grey-400"
+  })));
+};
+
+var DataTableHeader = function DataTableHeader(_ref) {
+  var columns = _ref.columns,
+      onSort = _ref.onSort,
+      showActionMenu = _ref.showActionMenu;
+  var haveLabels = columns.find(function (column) {
+    return column.label && column.label !== '';
+  });
+
+  if (!haveLabels) {
+    return React__default.createElement(ColumnSizes, {
+      columns: columns,
+      showActionMenu: showActionMenu
+    });
+  }
+
+  var handleSort = function handleSort(column) {
+    var nextDirection = getNextSort(column);
+
+    if (onSort) {
+      onSort({
+        columnName: column.name,
+        direction: nextDirection
+      });
+    }
+  };
+
+  return React__default.createElement(Fragment, null, React__default.createElement(ColumnSizes, {
+    columns: columns,
+    showActionMenu: showActionMenu
+  }), React__default.createElement("thead", null, React__default.createElement("tr", {
+    className: styles$9['data-table-header']
+  }, columns.map(function (column) {
+    var _classnames, _classnames2;
+
+    var isSortable = column.isSortable;
+    var sortDir = column.currentSort;
+    var isRightAligned = column.isRightAligned;
+    return React__default.createElement("th", {
+      className: classnames((_classnames = {}, _classnames[styles$9['data-table-header__item']] = true, _classnames[styles$9['data-table-header__item--sortable']] = isSortable, _classnames)),
+      style: {
+        flex: column.size || 1
+      },
+      key: column.name,
+      onClick: function onClick() {
+        return isSortable && handleSort(column);
+      },
+      onKeyPress: function onKeyPress() {
+        return isSortable && handleSort(column);
+      },
+      role: "columnheader",
+      tabIndex: 0
+    }, React__default.createElement("div", {
+      className: classnames(styles$9['data-table-header__item-content'], (_classnames2 = {}, _classnames2[styles$9['data-table-header__item-content--right-align']] = isRightAligned, _classnames2))
+    }, column.label, ' ', isSortable && React__default.createElement("span", {
+      className: styles$9['data-table-header__sort-icon']
+    }, React__default.createElement(HeaderSortIcon, {
+      sortDirection: sortDir
+    }))));
+  }), showActionMenu && React__default.createElement("th", {
+    className: classnames(styles$9['data-table-header__item'], styles$9['data-table-header__item--action'])
+  }))));
+};
+
 var initialValue = {
   columns: [],
   numberOfRows: 0
@@ -4318,9 +4466,42 @@ var useDataTableContext = function useDataTableContext() {
   return context;
 };
 
-var styles$9 = {"item":"_2GGMG","clickable":"_3VoZI","selected":"_1ZCir"};
+var styles$a = {"data-table":"_umpGL","data-table__content":"_5BvsJ","data-table__content--with-scroll":"_3p04C","data-table__table":"_3_o_a","data-table__table--no-columns":"_3aKQI","data-table__body":"_tCd-U","data-table__body--no-bottom-radius":"_Hp5nC","data-table__footer":"__15fo","data-table__pagination-controls":"_2KGQu"};
+
+var styles$b = {"data-table-scroll-fake-border":"_1zw4R","data-table-scroll-fake-border--top":"_2vWl5","data-table-scroll-fake-border--bottom":"_397Yd","data-table-scroll-fake-border__left":"_AGTVL","data-table-scroll-fake-border__left--top":"_3wzKK","data-table-scroll-fake-border__left--bottom":"_2pJrs","data-table-scroll-fake-border__right":"_vh4go","data-table-scroll-fake-border__right--top":"_2sj0a","data-table-scroll-fake-border__right--bottom":"_1s8kO"};
+
+var DataTableScrollFakeBorder = function DataTableScrollFakeBorder(_ref) {
+  var _classNames, _classNames2, _classNames3;
+
+  var placement = _ref.placement;
+  return React__default.createElement("div", {
+    className: classnames(styles$b['data-table-scroll-fake-border'], (_classNames = {}, _classNames[styles$b['data-table-scroll-fake-border--top']] = placement === 'top', _classNames[styles$b['data-table-scroll-fake-border--bottom']] = placement === 'bottom', _classNames))
+  }, React__default.createElement("div", {
+    className: classnames(styles$b['data-table-scroll-fake-border__left'], (_classNames2 = {}, _classNames2[styles$b['data-table-scroll-fake-border__left--top']] = placement === 'top', _classNames2[styles$b['data-table-scroll-fake-border__left--bottom']] = placement === 'bottom', _classNames2))
+  }), React__default.createElement("div", {
+    className: classnames(styles$b['data-table-scroll-fake-border__right'], (_classNames3 = {}, _classNames3[styles$b['data-table-scroll-fake-border__right--top']] = placement === 'top', _classNames3[styles$b['data-table-scroll-fake-border__right--bottom']] = placement === 'bottom', _classNames3))
+  }));
+};
+
+var styles$c = {"data-table-loading-block":"_94pbt"};
+
+var DataTableLoadingBlock = function DataTableLoadingBlock(_ref) {
+  var amountOfColumns = _ref.amountOfColumns,
+      showActionMenu = _ref.showActionMenu;
+  var aditionalColums = showActionMenu ? 1 : 0;
+  var colSpan = amountOfColumns + aditionalColums;
+  return React__default.createElement("tr", {
+    className: styles$c['data-table-loading-block']
+  }, React__default.createElement("td", {
+    colSpan: colSpan
+  }, React__default.createElement(Spinner, {
+    block: true
+  })));
+};
+
+var styles$d = {"item":"_2GGMG","clickable":"_3VoZI","selected":"_1ZCir"};
 
-var styles$a = {"actions":"_3Iab2"};
+var styles$e = {"actions":"_3Iab2"};
 
 var DropdownContext = React__default.createContext({
   onToggleDropdown: function onToggleDropdown() {},
@@ -4336,7 +4517,7 @@ var useDropdownContext = function useDropdownContext() {
   return React__default.useContext(DropdownContext);
 };
 
-var styles$b = {"dropdown-pane":"_2EwLt"};
+var styles$f = {"dropdown-pane":"_2EwLt"};
 
 function isClickInside(ref, event) {
   return !ref.current || event.target instanceof Node && ref.current.contains(event.target);
@@ -4476,7 +4657,7 @@ var PaneOverlay = function PaneOverlay(_ref) {
   useKeyPress(['Escape'], handleEscapeKey);
   var overflow = maxHeight ? 'scroll' : undefined;
   return React__default.createElement("div", {
-    className: classnames(styles$b['dropdown-pane'], (_classNames = {}, _classNames[styles$b['dropdown-pane--with-padding']] = true, _classNames)),
+    className: classnames(styles$f['dropdown-pane'], (_classNames = {}, _classNames[styles$f['dropdown-pane--with-padding']] = true, _classNames)),
     style: _extends({}, position, {
       width: width,
       maxHeight: maxHeight,
@@ -4506,7 +4687,7 @@ var getKeyboardFocusableElements = function getKeyboardFocusableElements(element
   });
 };
 
-var styles$c = {"dropdown__trigger":"_2rs8m"};
+var styles$g = {"dropdown__trigger":"_2rs8m"};
 
 var DROPDOWN_ALIGNEMNT = {
   LEFT: 'left',
@@ -4517,7 +4698,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;
@@ -4578,7 +4759,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) {
@@ -4591,31 +4772,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,
@@ -4623,13 +4791,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));
 };
@@ -4835,7 +5003,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;
@@ -4874,16 +5042,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));
 };
@@ -4896,7 +5064,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, {
@@ -5098,7 +5266,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, {
@@ -5111,7 +5279,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;
@@ -5221,27 +5389,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',
@@ -5266,7 +5424,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"];
 
@@ -5287,7 +5445,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];
@@ -5298,21 +5456,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);
 };
 
@@ -5344,18 +5502,18 @@ var DropdownListItem = function DropdownListItem(_ref) {
 
   var getCaptionColor = function getCaptionColor() {
     if (selected) {
-      return EGGPLANT500;
+      return 'eggplant-500';
     }
 
     if (disabled) {
-      return GREY400;
+      return 'grey-400';
     }
 
     return undefined;
   };
 
   return React__default.createElement("li", {
-    className: classnames(styles$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();
     },
@@ -5364,7 +5522,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]
@@ -5456,7 +5614,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) {
@@ -5464,7 +5622,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);
       }
@@ -5480,18 +5638,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,
@@ -5501,7 +5659,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,
@@ -5516,13 +5674,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));
 };
 
@@ -5572,14 +5730,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,
@@ -5622,7 +5780,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;
@@ -5635,13 +5793,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) {
@@ -5680,7 +5838,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)));
@@ -5695,7 +5853,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",
@@ -5704,9 +5862,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(), {
@@ -5829,7 +5987,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
@@ -5925,17 +6083,17 @@ var DataTableCellElement = function DataTableCellElement(_ref, ref) {
   var hasError = !!error;
   var errorMessage = error;
   var icon = hasError && React__default.createElement("div", {
-    className: classnames(styles$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,
@@ -5959,7 +6117,7 @@ var DataTableRowActions = function DataTableRowActions(_ref) {
   return React__default.createElement(DataTableCell, {
     columnIndex: columnIndex
   }, React__default.createElement("div", {
-    className: styles$a['actions'],
+    className: styles$e['actions'],
     "data-testid": "data-table-dropdown-menu"
   }, sideActions.length > 0 && sideActions.map(function (action) {
     return React__default.createElement(Button$1, Object.assign({
@@ -5972,7 +6130,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;
@@ -6021,7 +6179,7 @@ var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, r
     id: controllers.id
   };
   var EditableCell = React__default.createElement("div", {
-    className: classnames((_classnames = {}, _classnames[styles$s['data-table-editable-cell--currency']] = type === 'currency', _classnames), styles$s['data-table-editable-cell']),
+    className: classnames((_classnames = {}, _classnames[styles$w['data-table-editable-cell--currency']] = type === 'currency', _classnames), styles$w['data-table-editable-cell']),
     "data-testid": testId,
     role: "cell"
   }, React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
@@ -6030,7 +6188,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",
@@ -6075,7 +6233,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;
@@ -6109,172 +6267,26 @@ var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
 
 var DataTableRow = forwardRef(DataTableRowComponent);
 
-var styles$t = {"table-container":"_3qoNq","table-content":"_2HcDV","table-content--with-scroll":"_3dowz","table":"_tGpUv","table--no-columns":"_3VePT","header":"_2ZgmC","header-item":"_3slLU","header-item__content":"_1jb-H","header-item__content--right-align":"_2Np60","header-item--sortable":"_1-26z","header-item--action":"_2i1wY","header-sort-icon":"_BLrNe","body":"_CT4Lp","body--no-bottom-radius":"_1wU1R","footer":"_398L3","pagination-controls":"_2smmY"};
-
-var calculatePercentageOfProportion = function calculatePercentageOfProportion(proportionNumbers) {
-  var sum = proportionNumbers.reduce(function (total, num) {
-    return total + num;
-  }, 0);
-  var percentages = proportionNumbers.map(function (num) {
-    return parseFloat((num / sum * 100).toFixed(2));
-  });
-  return percentages;
-};
-
-var SORT_ORDER = {
-  ASC: 'asc',
-  DESC: 'desc'
-};
-
-var DataTableHeader = function DataTableHeader(_ref) {
+var 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(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;
 
@@ -6297,7 +6309,7 @@ var DataTable = function DataTable(_ref) {
       _ref$hasVerticalBorde = _ref.hasVerticalBorders,
       hasVerticalBorders = _ref$hasVerticalBorde === void 0 ? false : _ref$hasVerticalBorde,
       testId = _ref.testId;
-  var RowItem = itemComponent || DefaultItemComponent;
+  var RowItem = itemComponent || DataTableDefaultItemComponent;
   var conditionalStyles = {};
   var isScrollableTable = !!maxHeight;
 
@@ -6319,20 +6331,20 @@ var DataTable = function DataTable(_ref) {
       hasVerticalBorders: hasVerticalBorders
     }
   }, React__default.createElement("div", {
-    className: classnames(styles$t['table-container'])
+    className: classnames(styles$a['data-table'])
   }, isShowingColumns && isScrollableTable && React__default.createElement(DataTableScrollFakeBorder, {
     placement: "top"
   }), React__default.createElement("div", {
-    className: classnames(styles$t['table-content'], (_classNames = {}, _classNames[styles$t['table-content--with-scroll']] = isScrollableTable, _classNames)),
+    className: classnames(styles$a['data-table__content'], (_classNames = {}, _classNames[styles$a['data-table__content--with-scroll']] = isScrollableTable, _classNames)),
     style: conditionalStyles
   }, React__default.createElement("table", {
-    className: classnames(styles$t['table'], (_classNames2 = {}, _classNames2[styles$t['table--no-columns']] = !isShowingColumns, _classNames2))
+    className: classnames(styles$a['data-table__table'], (_classNames2 = {}, _classNames2[styles$a['data-table__table--no-columns']] = !isShowingColumns, _classNames2))
   }, columns && isShowingColumns && React__default.createElement(DataTableHeader, {
     columns: columns,
     onSort: onSort,
     showActionMenu: showActionMenu
   }), React__default.createElement("tbody", {
-    className: classnames(styles$t['body'], (_classNames3 = {}, _classNames3[styles$t['body--no-bottom-radius']] = isShowingFooter, _classNames3)),
+    className: classnames(styles$a['data-table__body'], (_classNames3 = {}, _classNames3[styles$a['data-table__body--no-bottom-radius']] = isShowingFooter, _classNames3)),
     "data-testid": testId
   }, isLoading && React__default.createElement(DataTableLoadingBlock, {
     amountOfColumns: (columns === null || columns === void 0 ? void 0 : columns.length) || 1,
@@ -6346,12 +6358,12 @@ var DataTable = function DataTable(_ref) {
       testId: testId
     });
   })), isShowingFooter && React__default.createElement("tfoot", {
-    className: styles$t['footer'],
+    className: styles$a['data-table__footer'],
     "data-testid": testId && testId + "-footer"
   }, footerComponent))), !isShowingFooter && isScrollableTable && React__default.createElement(DataTableScrollFakeBorder, {
     placement: "bottom"
   })), onPreviousClick && onNextClick && (hasPrevious || hasNext) && React__default.createElement("div", {
-    className: styles$t['pagination-controls'],
+    className: styles$a['data-table__pagination-controls'],
     "data-testid": testId && testId + "-pagination-controls"
   }, React__default.createElement(PaginationControls, {
     hasPrevious: hasPrevious && !isLoading,
@@ -6361,26 +6373,6 @@ var DataTable = function DataTable(_ref) {
   })));
 };
 
-var DefaultItemComponent = function DefaultItemComponent(_ref2) {
-  var columns = _ref2.columns,
-      item = _ref2.item,
-      testId = _ref2.testId;
-  var headingKeys = columns ? columns.map(function (column) {
-    return column.name;
-  }) : Object.keys(item);
-  var columnsToShow = headingKeys.filter(function (key) {
-    return key !== 'actions';
-  });
-  return React__default.createElement(DataTableRow, {
-    actions: item.actions,
-    testId: testId
-  }, columnsToShow.map(function (headingKey) {
-    return React__default.createElement("div", {
-      key: headingKey
-    }, item[headingKey] || '');
-  }));
-};
-
 var useSelectFieldControllers = function useSelectFieldControllers(_ref) {
   var name = _ref.name,
       inputId = _ref.id,
@@ -6476,7 +6468,7 @@ var isReactSelectElement = function isReactSelectElement(element) {
   return typeof firstOption.id === 'string' && firstOption.id.includes('react-select');
 };
 
-var styles$w = {"custom-control":"_1cDCR"};
+var styles$x = {"custom-control":"_1cDCR"};
 
 var _excluded$2j = ["children"];
 
@@ -6489,7 +6481,7 @@ function CustomControl(_ref) {
   var SelectedOptionPrefix = props.selectProps.componentsProps.SelectedOptionPrefix;
   var selectedOption = (_props$getValue = props.getValue()) === null || _props$getValue === void 0 ? void 0 : _props$getValue[0];
   return React__default.createElement(components.Control, Object.assign({}, props), SelectedOptionPrefix && selectedOption ? React__default.createElement("div", {
-    className: styles$w['custom-control'],
+    className: styles$x['custom-control'],
     style: {
       paddingLeft: selectedOption ? 8 : 0
     }
@@ -6518,7 +6510,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
       asToolbarFilter = _ref$asToolbarFilter === void 0 ? false : _ref$asToolbarFilter,
       _ref$wrapToNextLine = _ref.wrapToNextLine,
       wrapToNextLine = _ref$wrapToNextLine === void 0 ? false : _ref$wrapToNextLine;
-  var borderColor = isInvalid ? RADISH400 : GREY200;
+  var borderColor = isInvalid ? COLORS['radish-400'] : COLORS['grey-200'];
   return {
     valueContainer: function valueContainer(base) {
       return Object.assign({}, base, {
@@ -6530,16 +6522,16 @@ var getSelectStyles = function getSelectStyles(_ref) {
         flex: '1',
         fontFamily: FONT_FAMILY,
         minWidth: '110px',
-        backgroundColor: state.isDisabled ? GREY100 : WHITE,
+        backgroundColor: state.isDisabled ? COLORS['grey-100'] : COLORS['white'],
         position: 'initial',
         borderRadius: '4px'
       });
     },
     control: function control(base, state) {
       return Object.assign({}, base, {
-        borderColor: state.isFocused ? EGGPLANT400 : borderColor,
-        color: state.isDisabled ? GREY400 : GREY500,
-        boxShadow: state.isFocused ? "0 0 8px " + EGGPLANT300 : 'none',
+        borderColor: state.isFocused ? COLORS['eggplant-400'] : borderColor,
+        color: state.isDisabled ? COLORS['grey-400'] : COLORS['grey-500'],
+        boxShadow: state.isFocused ? "0 0 8px " + COLORS['eggplant-300'] : 'none',
         '&:hover': 'none',
         background: 'none',
         fontSize: '14px',
@@ -6547,7 +6539,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
         width: asToolbarFilter ? 'fit-content' : undefined,
         margin: 0,
         ':hover': asToolbarFilter ? {
-          backgroundColor: GREY100
+          backgroundColor: COLORS['grey-100']
         } : 'none'
       });
     },
@@ -6558,7 +6550,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     placeholder: function placeholder(base, state) {
       return _extends({}, base, {
-        color: state.isDisabled && asToolbarFilter ? GREY300 : GREY400,
+        color: state.isDisabled && asToolbarFilter ? COLORS['grey-300'] : COLORS['grey-400'],
         marginRight: 0,
         position: 'static',
         transform: 'initial',
@@ -6569,7 +6561,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     noOptionsMessage: function noOptionsMessage() {
       return {
-        color: GREY400,
+        color: COLORS['grey-400'],
         textAlign: 'center',
         padding: '8px',
         fontFamily: FONT_FAMILY,
@@ -6578,7 +6570,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     loadingMessage: function loadingMessage() {
       return {
-        color: GREY400,
+        color: COLORS['grey-400'],
         textAlign: 'center',
         padding: '8px',
         fontFamily: FONT_FAMILY,
@@ -6587,7 +6579,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     singleValue: function singleValue(base, state) {
       return Object.assign({}, base, {
-        color: state.isDisabled ? GREY400 : null,
+        color: state.isDisabled ? COLORS['grey-400'] : null,
         marginRight: 0,
         position: asToolbarFilter ? 'static' : 'absolute',
         transform: 'initial',
@@ -6599,15 +6591,15 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     dropdownIndicator: function dropdownIndicator(base, state) {
       return Object.assign({}, base, {
-        color: state.isDisabled ? GREY300 : GREY400,
+        color: state.isDisabled ? COLORS['grey-300'] : COLORS['grey-400'],
         padding: '8px',
         ':hover': 'none'
       });
     },
     option: function option(base, state) {
       return Object.assign({}, base, {
-        backgroundColor: state.isDisabled ? null : state.isSelected ? EGGPLANT200 : state.isFocused ? GREY100 : WHITE,
-        color: state.isDisabled ? GREY400 : state.isSelected ? EGGPLANT600 : GREY500,
+        backgroundColor: state.isDisabled ? null : state.isSelected ? COLORS['eggplant-200'] : state.isFocused ? COLORS['grey-100'] : COLORS['white'],
+        color: state.isDisabled ? COLORS['grey-400'] : state.isSelected ? COLORS['eggplant-600'] : COLORS['grey-500'],
         cursor: 'pointer',
         fontFamily: FONT_FAMILY,
         fontSize: '14px',
@@ -6623,15 +6615,15 @@ var getSelectStyles = function getSelectStyles(_ref) {
       return Object.assign({}, base, {
         ':hover': {
           backgroundColor: 'none',
-          color: GREY500
+          color: COLORS['grey-500']
         }
       });
     },
     clearIndicator: function clearIndicator(base) {
       return Object.assign({}, base, {
-        color: GREY400,
+        color: COLORS['grey-400'],
         ':hover': {
-          color: GREY500
+          color: COLORS['grey-500']
         }
       });
     },
@@ -6657,7 +6649,7 @@ var CustomContainer = function CustomContainer(props) {
   }));
 };
 
-var styles$x = {"custom-menu-text-field":"_2-zhH","custom-menu-hr":"_3sdnK","custom-menu-div":"_2F1jP"};
+var styles$y = {"custom-menu-text-field":"_2-zhH","custom-menu-hr":"_3sdnK","custom-menu-div":"_2F1jP"};
 
 var _excluded$2l = ["children"];
 
@@ -6727,15 +6719,15 @@ function CustomMenu(_ref) {
   return React__default.createElement(components.Menu, Object.assign({}, props), React__default.createElement("div", {
     ref: containerRef
   }, children, React__default.createElement("hr", {
-    className: styles$x['custom-menu-hr']
+    className: styles$y['custom-menu-hr']
   }), !showFooter ? React__default.createElement(CreatableButton, null) : React__default.createElement("div", {
-    className: styles$x['custom-menu-div']
+    className: styles$y['custom-menu-div']
   }, React__default.createElement(Flex, {
     space: 4,
     flex: [1],
     flexItems: true
   }, React__default.createElement("input", {
-    className: classnames(textFieldStyles['text-field'], styles$x['custom-menu-text-field']),
+    className: classnames(textFieldStyles['text-field'], styles$y['custom-menu-text-field']),
     autoCorrect: "off",
     autoComplete: "off",
     spellCheck: "false",
@@ -6918,9 +6910,9 @@ var ToolbarSelect = function ToolbarSelect(_ref) {
   });
 };
 
-var styles$y = {"date-filter":"_2X-yg","date-filter--wide":"_3O5Kh"};
+var styles$z = {"date-filter":"_2X-yg","date-filter--wide":"_3O5Kh"};
 
-var styles$z = {"date-filter-display":"_23gnr","date-filter-display--non-interactive":"_Zv1Se","date-filter-display--wide":"_18V8V","date-filter-display__display-icon":"_2v9v_"};
+var styles$A = {"date-filter-display":"_23gnr","date-filter-display--non-interactive":"_Zv1Se","date-filter-display--wide":"_18V8V","date-filter-display__display-icon":"_2v9v_"};
 
 var DATE_FILTER_MODE = {
   DAY: 'day',
@@ -6964,7 +6956,7 @@ var DateFilterText = function DateFilterText(_ref) {
         space: 12
       }, React__default.createElement("span", null, getDateString(weekRange.start, mode)), React__default.createElement(IconArrowRight, {
         size: "small",
-        color: GREY400
+        color: "grey-400"
       }), React__default.createElement("span", null, getDateString(weekRange.end, mode)));
 
     default:
@@ -6980,17 +6972,17 @@ var DateFilterDisplay = function DateFilterDisplay(_ref) {
       weekStart = _ref.weekStart,
       onClick = _ref.onClick;
   return React__default.createElement("button", {
-    className: classnames(styles$z['date-filter-display'], (_classnames = {}, _classnames[styles$z['date-filter-display--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames[styles$z['date-filter-display--non-interactive']] = mode === DATE_FILTER_MODE.MONTH, _classnames)),
+    className: classnames(styles$A['date-filter-display'], (_classnames = {}, _classnames[styles$A['date-filter-display--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames[styles$A['date-filter-display--non-interactive']] = mode === DATE_FILTER_MODE.MONTH, _classnames)),
     onClick: onClick,
     tabIndex: mode === DATE_FILTER_MODE.MONTH ? -1 : undefined
   }, React__default.createElement(Inline, {
     space: 12,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: classnames(styles$z['date-filter-display__display-icon'])
+    className: classnames(styles$A['date-filter-display__display-icon'])
   }, React__default.createElement(IconCalendarAlt, {
     size: "flexible",
-    color: GREY400
+    color: "grey-400"
   })), React__default.createElement(DateFilterText, {
     mode: mode,
     selectedDate: selectedDate,
@@ -6998,7 +6990,7 @@ var DateFilterDisplay = function DateFilterDisplay(_ref) {
   })));
 };
 
-var styles$A = {"date-stepper":"_s8MoI","date-stepper--backward":"_34Yoi","date-stepper--forward":"_BeWpb"};
+var styles$B = {"date-stepper":"_s8MoI","date-stepper--backward":"_34Yoi","date-stepper--forward":"_BeWpb"};
 
 var handleDateStepper = function handleDateStepper(date, mode, stepDirection, onChange) {
   var step = stepDirection === STEP_DIRECTION.FORWARD ? 1 : -1;
@@ -7033,7 +7025,7 @@ var DateFilterStepper = function DateFilterStepper(_ref) {
       onChange = _ref.onChange,
       date = _ref.date;
   return React__default.createElement("button", {
-    className: classnames(styles$A['date-stepper'], (_classnames = {}, _classnames[styles$A['date-stepper--backward']] = stepDirection === STEP_DIRECTION.BACKWARD, _classnames[styles$A['date-stepper--forward']] = stepDirection === STEP_DIRECTION.FORWARD, _classnames)),
+    className: classnames(styles$B['date-stepper'], (_classnames = {}, _classnames[styles$B['date-stepper--backward']] = stepDirection === STEP_DIRECTION.BACKWARD, _classnames[styles$B['date-stepper--forward']] = stepDirection === STEP_DIRECTION.FORWARD, _classnames)),
     onClick: function onClick() {
       return handleDateStepper(date, mode, stepDirection, onChange);
     }
@@ -7069,7 +7061,7 @@ var DateFilter = function DateFilter(_ref) {
   return React__default.createElement("div", {
     "data-testid": testId,
     ref: calendarAnchorRef,
-    className: classnames(styles$y['date-filter'], (_classnames = {}, _classnames[styles$y['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
+    className: classnames(styles$z['date-filter'], (_classnames = {}, _classnames[styles$z['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
   }, React__default.createElement(Inline, {
     space: 0
   }, React__default.createElement(DateFilterStepper, {
@@ -7079,7 +7071,7 @@ var DateFilter = function DateFilter(_ref) {
     onChange: handleChange
   }, React__default.createElement(IconChevronLeft, {
     size: "small",
-    color: GREY400
+    color: "grey-400"
   })), React__default.createElement(DateFilterDisplay, {
     mode: mode,
     weekStart: weekStart,
@@ -7096,7 +7088,7 @@ var DateFilter = function DateFilter(_ref) {
     onChange: handleChange
   }, React__default.createElement(IconChevronRight, {
     size: "small",
-    color: GREY400
+    color: "grey-400"
   }))), calendarOpen && mode !== DATE_FILTER_MODE.MONTH && React__default.createElement(Calendar, {
     onSelect: handleChange,
     selected: date,
@@ -7110,7 +7102,7 @@ var DateFilter = function DateFilter(_ref) {
   }));
 };
 
-var styles$B = {"segmented-control":"_J5ph7","segmented-control__button":"_2xgv4","segmented-control__button--selected":"_1vG3O","segmented-control__divider":"_1uKNF"};
+var styles$C = {"segmented-control":"_J5ph7","segmented-control__button":"_2xgv4","segmented-control__button--selected":"_1vG3O","segmented-control__divider":"_1uKNF"};
 
 var SegmentedControl = function SegmentedControl(_ref) {
   var options = _ref.options,
@@ -7127,7 +7119,7 @@ var SegmentedControl = function SegmentedControl(_ref) {
   };
 
   return React__default.createElement("div", {
-    className: styles$B['segmented-control'],
+    className: styles$C['segmented-control'],
     "data-testid": testId
   }, options.map(function (option, i) {
     var _classnames;
@@ -7138,16 +7130,16 @@ var SegmentedControl = function SegmentedControl(_ref) {
       onClick: function onClick() {
         return onChange(option);
       },
-      className: classnames(styles$B['segmented-control__button'], (_classnames = {}, _classnames[styles$B['segmented-control__button--selected']] = isSelected(option), _classnames))
+      className: classnames(styles$C['segmented-control__button'], (_classnames = {}, _classnames[styles$C['segmented-control__button--selected']] = isSelected(option), _classnames))
     }, option), !isLastElement(i) && React__default.createElement("div", {
-      className: classnames(styles$B['segmented-control__divider'])
+      className: classnames(styles$C['segmented-control__divider'])
     }));
   }));
 };
 
-var styles$C = {"form--standard-size":"_3CaV0"};
+var styles$D = {"form--standard-size":"_3CaV0"};
 
-var styles$D = {"card":"_29ZIp","card__body":"_3Q8NT","card__body--interactive":"_2Fah6","card--focus":"_SGno0","card__body--focus":"_1zqRN","card__body--with-kebab":"_3Hwms","card__kebab":"_TmEUS"};
+var styles$E = {"card":"_29ZIp","card__body":"_3Q8NT","card__body--interactive":"_2Fah6","card--focus":"_SGno0","card__body--focus":"_1zqRN","card__body--with-kebab":"_3Hwms","card__kebab":"_TmEUS"};
 
 var _excluded$2m = ["children", "onClick", "isSelected", "actions", "testId"];
 
@@ -7164,18 +7156,18 @@ var Card = function Card(_ref) {
 
   var positionStyles = usePositionStyles(positionProps);
   return React__default.createElement("div", {
-    className: classnames(styles$D['card']),
+    className: classnames(styles$E['card']),
     style: positionStyles
   }, onClick ? React__default.createElement("button", {
-    className: classnames(styles$D['card__body'], styles$D['card__body--interactive'], (_classnames = {}, _classnames[styles$D['card__body--focus']] = isSelected, _classnames[styles$D['card__body--with-kebab']] = actions, _classnames)),
+    className: classnames(styles$E['card__body'], styles$E['card__body--interactive'], (_classnames = {}, _classnames[styles$E['card__body--focus']] = isSelected, _classnames[styles$E['card__body--with-kebab']] = actions, _classnames)),
     "data-testid": testId,
     tabIndex: 0,
     onClick: onClick
   }, children) : React__default.createElement("div", {
-    className: classnames(styles$D['card__body'], (_classnames2 = {}, _classnames2[styles$D['card__body--focus']] = isSelected, _classnames2[styles$D['card__body--with-kebab']] = actions, _classnames2)),
+    className: classnames(styles$E['card__body'], (_classnames2 = {}, _classnames2[styles$E['card__body--focus']] = isSelected, _classnames2[styles$E['card__body--with-kebab']] = actions, _classnames2)),
     "data-testid": testId
   }, children), actions && React__default.createElement("div", {
-    className: classnames(styles$D['card__kebab'])
+    className: classnames(styles$E['card__kebab'])
   }, React__default.createElement(KebabMenu, {
     actions: actions
   })));
@@ -7189,7 +7181,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   }, children);
 };
 
-var styles$E = {"breadcrumb-item":"_XFvYB"};
+var styles$F = {"breadcrumb-item":"_XFvYB"};
 
 var BreadcrumbItem = function BreadcrumbItem(_ref) {
   var href = _ref.href,
@@ -7202,24 +7194,24 @@ var BreadcrumbItem = function BreadcrumbItem(_ref) {
   }), children);
   return reloadDocument ? React__default.createElement("a", {
     href: href,
-    className: styles$E['breadcrumb-item'],
+    className: styles$F['breadcrumb-item'],
     "data-testid": testId
   }, content) : React__default.createElement(Link$1, {
     to: href,
-    className: styles$E['breadcrumb-item'],
+    className: styles$F['breadcrumb-item'],
     relative: "path",
     reloadDocument: reloadDocument,
     "data-testid": testId
   }, content);
 };
 
-var styles$F = {"page-breadcrumbs":"_HAJCd"};
+var styles$G = {"page-breadcrumbs":"_HAJCd"};
 
 var PageBreadcrumbs = function PageBreadcrumbs(_ref) {
   var breadcrumbs = _ref.breadcrumbs;
   var items = getBreadbrumbItems(breadcrumbs);
   return React__default.createElement("div", {
-    className: styles$F['page-breadcrumbs']
+    className: styles$G['page-breadcrumbs']
   }, React__default.createElement(Breadcrumbs, null, items));
 };
 
@@ -7244,7 +7236,7 @@ var getBreadbrumbItems = function getBreadbrumbItems(breadcrumbs) {
   }, breadcrumbs.label);
 };
 
-var styles$G = {"page":"_FbhTM","page--fullwidth":"_3QyAE","page--restricted":"_17aOG"};
+var styles$H = {"page":"_FbhTM","page--fullwidth":"_3QyAE","page--restricted":"_17aOG"};
 
 var PAGE_SIZES = {
   FULL_WIDTH: 'fullwidth',
@@ -7267,7 +7259,7 @@ var Page = function Page(_ref) {
   var hasHeader = title || actions;
   var hasPageBlocks = hasHeader || banner || filterBar;
   return React__default.createElement("div", {
-    className: classnames(styles$G['page'], (_classNames = {}, _classNames[styles$G['page--restricted']] = size === PAGE_SIZES.RESTRICTED, _classNames[styles$G['page--fullwidth']] = size === PAGE_SIZES.FULL_WIDTH, _classNames)),
+    className: classnames(styles$H['page'], (_classNames = {}, _classNames[styles$H['page--restricted']] = size === PAGE_SIZES.RESTRICTED, _classNames[styles$H['page--fullwidth']] = size === PAGE_SIZES.FULL_WIDTH, _classNames)),
     "data-testid": testId
   }, React__default.createElement(Stack, {
     space: 20
@@ -7287,7 +7279,7 @@ var Page = function Page(_ref) {
   }, title), actions), subtitle && React__default.createElement(Text, null, subtitle)), banner, filterBar)), children));
 };
 
-var styles$H = {"form-section":"_7-5gD","form-section__title":"_a83vM","form-section__subtitle":"_1lKv8","form-section--no-margin":"_lZyFQ"};
+var styles$I = {"form-section":"_7-5gD","form-section__title":"_a83vM","form-section__subtitle":"_1lKv8","form-section--no-margin":"_lZyFQ"};
 
 var FormSection = function FormSection(_ref) {
   var _classnames;
@@ -7299,14 +7291,14 @@ var FormSection = function FormSection(_ref) {
       noMargin = _ref$noMargin === void 0 ? false : _ref$noMargin,
       testId = _ref.testId;
   return React__default.createElement("div", {
-    className: classnames(styles$H['form-section'], (_classnames = {}, _classnames[styles$H['form-section--no-margin']] = noMargin, _classnames)),
+    className: classnames(styles$I['form-section'], (_classnames = {}, _classnames[styles$I['form-section--no-margin']] = noMargin, _classnames)),
     "data-testid": testId
   }, React__default.createElement(Stack, null, React__default.createElement(Stack, {
     space: 8
   }, title && React__default.createElement("h2", {
-    className: classnames(styles$H['form-section__title'])
+    className: classnames(styles$I['form-section__title'])
   }, title), subtitle && React__default.createElement("h3", {
-    className: classnames(styles$H['form-section__subtitle'])
+    className: classnames(styles$I['form-section__subtitle'])
   }, subtitle)), children));
 };
 
@@ -7324,7 +7316,7 @@ var updateButtonProps$1 = function updateButtonProps(child, newProps) {
   }, newProps, child.props));
 };
 
-var styles$I = {"form-footer":"_3vVBF"};
+var styles$J = {"form-footer":"_3vVBF"};
 
 var FormFooterActions = function FormFooterActions(_ref) {
   var _actions$primary, _actions$secondary, _actions$tertiary;
@@ -7359,7 +7351,7 @@ var FormFooter = function FormFooter(_ref) {
   });
   var isInlineChildren = React__default.Children.count(children) === 1 && React__default.isValidElement(children) && children.type === Inline;
   return React__default.createElement("div", {
-    className: classnames(styles$I['form-footer']),
+    className: classnames(styles$J['form-footer']),
     "data-testid": testId
   }, actions && React__default.createElement(FormFooterActions, {
     actions: actions
@@ -7401,12 +7393,12 @@ var Form = function Form(_ref) {
     }
   }, React__default.createElement("form", {
     onSubmit: onSubmit ? handleSubmit : formik === null || formik === void 0 ? void 0 : formik.handleSubmit,
-    className: classnames((_classnames = {}, _classnames[styles$C['form--standard-size']] = !wide, _classnames)),
+    className: classnames((_classnames = {}, _classnames[styles$D['form--standard-size']] = !wide, _classnames)),
     "data-testid": testId
   }, stackContent ? React__default.createElement(Stack, null, formattedChildren) : formattedChildren));
 };
 
-var styles$J = {"form-row":"_2i-Ll"};
+var styles$K = {"form-row":"_2i-Ll"};
 
 var SIZE_25_PERCENT = '25%';
 var SIZE_33_PERCENT = '33.333%';
@@ -7437,7 +7429,7 @@ var FormRow = function FormRow(_ref) {
     space: 20,
     testId: testId,
     alignItems: "stretch",
-    extraClass: styles$J['form-row']
+    extraClass: styles$K['form-row']
   }, children, additionalColumns.map(function (_, index) {
     return React__default.createElement("span", {
       key: index,
@@ -7446,7 +7438,7 @@ var FormRow = function FormRow(_ref) {
   }));
 };
 
-var styles$K = {"text-field":"_BkzdC","text-field--focus":"_Rop31","text-field--disabled":"_2x3Cm","text-field--invalid":"_3zOwV","text-field__toolbar":"_rQqnL"};
+var styles$L = {"text-field":"_BkzdC","text-field--focus":"_Rop31","text-field--disabled":"_2x3Cm","text-field--invalid":"_3zOwV","text-field__toolbar":"_rQqnL"};
 
 var useGrowTextAreaRef = function useGrowTextAreaRef(minHeight, maxHeight, autoGrow, forwardedRef) {
   var textareaRef = useRef(null);
@@ -7522,7 +7514,7 @@ var TextAreaField = function TextAreaField(_ref) {
       updateHeight = _useGrowTextAreaRef.updateHeight;
 
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$K['text-field'], (_classnames = {}, _classnames[styles$K['text-field--invalid']] = hasError, _classnames[styles$K['text-field--disabled']] = disabled, _classnames[styles$K['text-field--focus']] = hasFocus, _classnames)),
+    className: classnames(styles$L['text-field'], (_classnames = {}, _classnames[styles$L['text-field--invalid']] = hasError, _classnames[styles$L['text-field--disabled']] = disabled, _classnames[styles$L['text-field--focus']] = hasFocus, _classnames)),
     ref: containerRef,
     onClick: function onClick(event) {
       if (event.target === (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
@@ -7554,7 +7546,7 @@ var TextAreaField = function TextAreaField(_ref) {
     },
     ref: textAreaRef
   }), toolbar && React__default.createElement("div", {
-    className: styles$K['text-field__toolbar'],
+    className: styles$L['text-field__toolbar'],
     id: controllers.id + "-toolbar",
     ref: toolbarRef,
     onClick: function onClick(event) {
@@ -7634,7 +7626,7 @@ var useCheckBoxFieldControllers = function useCheckBoxFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$L = {"check-box-field":"_2sg0c","check-box-field__caption":"_2LdrP","check-box-field__custom-input":"_2mA8e"};
+var styles$M = {"check-box-field":"_2sg0c","check-box-field__caption":"_2LdrP","check-box-field__custom-input":"_2mA8e"};
 
 var CheckboxField = function CheckboxField(_ref) {
   var name = _ref.name,
@@ -7664,7 +7656,7 @@ var CheckboxField = function CheckboxField(_ref) {
     flexItems: true,
     flex: ['0 0 auto']
   }, React__default.createElement("div", {
-    className: styles$L['check-box-field']
+    className: styles$M['check-box-field']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
@@ -7677,12 +7669,12 @@ var CheckboxField = function CheckboxField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("span", {
-    className: styles$L['check-box-field__custom-input']
+    className: styles$M['check-box-field__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: controllers.id,
     truncate: false
   }, label)), caption && React__default.createElement("div", {
-    className: styles$L['check-box-field__caption']
+    className: styles$M['check-box-field__caption']
   }, React__default.createElement(Caption, {
     fieldId: controllers.id
   }, caption)), controllers.error && React__default.createElement(ErrorMessage, {
@@ -7690,7 +7682,7 @@ var CheckboxField = function CheckboxField(_ref) {
   }, controllers.error));
 };
 
-var styles$M = {"pill-select-field":"_g6T-p","pill-select-field__custom-input":"_1i2AX"};
+var styles$N = {"pill-select-field":"_g6T-p","pill-select-field__custom-input":"_1i2AX"};
 
 var useMultiSelectFieldControllers = function useMultiSelectFieldControllers(_ref) {
   var name = _ref.name,
@@ -7782,7 +7774,7 @@ var PillSelectField = function PillSelectField(_ref) {
     var itemId = controllers.id + "-" + itemIdentifier;
     return React__default.createElement("div", {
       key: itemIdentifier,
-      className: styles$M['pill-select-field']
+      className: styles$N['pill-select-field']
     }, React__default.createElement("input", {
       name: name + "-" + itemIdentifier,
       id: itemId,
@@ -7804,7 +7796,7 @@ var PillSelectField = function PillSelectField(_ref) {
         controllers.onChange(newValue);
       }
     }), React__default.createElement("span", {
-      className: styles$M['pill-select-field__custom-input']
+      className: styles$N['pill-select-field__custom-input']
     }, option.label));
   })));
 };
@@ -7852,9 +7844,9 @@ var useRadioGroupFieldContext = function useRadioGroupFieldContext() {
   return context;
 };
 
-var styles$N = {"label":"_1WGz2","label--truncate":"_mQ9Rd","radio-group-field__label":"_RXyG_"};
+var styles$O = {"label":"_1WGz2","label--truncate":"_mQ9Rd","radio-group-field__label":"_RXyG_"};
 
-var styles$O = {"label":"_1Tw96","label--truncate":"_1o8rK","radio-group-box-option":"_2OGKE","radio-group-box-option__box":"_23M9k","radio-group-box-option__label":"_1r-Wg"};
+var styles$P = {"label":"_1Tw96","label--truncate":"_1o8rK","radio-group-box-option":"_2OGKE","radio-group-box-option__box":"_23M9k","radio-group-box-option__label":"_1r-Wg"};
 
 var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
   var value = _ref.value,
@@ -7869,7 +7861,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     id: inputId
   });
   return React__default.createElement("label", {
-    className: styles$O['radio-group-box-option']
+    className: styles$P['radio-group-box-option']
   }, React__default.createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -7880,7 +7872,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled
   }), React__default.createElement("div", {
-    className: styles$O['radio-group-box-option__box']
+    className: styles$P['radio-group-box-option__box']
   }, React__default.createElement(Stack, {
     space: 16,
     alignItems: "center",
@@ -7889,13 +7881,13 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     space: 8,
     alignItems: "center"
   }, label && React__default.createElement("div", {
-    className: styles$O['radio-group-box-option__label']
+    className: styles$P['radio-group-box-option__label']
   }, label), caption && React__default.createElement(Caption, {
     fieldId: id
   }, caption)))));
 };
 
-var styles$P = {"radio-group-option":"_1Clmp","radio-group-option__caption":"_3UmWA","radio-group-option__custom-input":"_1tMq-"};
+var styles$Q = {"radio-group-option":"_1Clmp","radio-group-option__caption":"_3UmWA","radio-group-option__custom-input":"_1tMq-"};
 
 var RadioGroupOption = function RadioGroupOption(_ref) {
   var value = _ref.value,
@@ -7914,7 +7906,7 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     space: 8,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: styles$P['radio-group-option']
+    className: styles$Q['radio-group-option']
   }, React__default.createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -7925,11 +7917,11 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled
   }), React__default.createElement("span", {
-    className: styles$P['radio-group-option__custom-input']
+    className: styles$Q['radio-group-option__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: id
   }, label)), caption && React__default.createElement("div", {
-    className: styles$P['radio-group-option__caption']
+    className: styles$Q['radio-group-option__caption']
   }, React__default.createElement(Caption, {
     fieldId: id
   }, caption)));
@@ -8064,7 +8056,7 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, React__default.createElement(Stack, {
     space: 12
   }, label && React__default.createElement("div", {
-    className: styles$N['radio-group-field__label']
+    className: styles$O['radio-group-field__label']
   }, label), React__default.createElement(Stack, {
     space: 8
   }, optionsType === OPTION_TYPES.RADIO ? React__default.createElement(RadioOptions, {
@@ -8077,9 +8069,9 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, children), controllers.error && React__default.createElement(ErrorMessage, null, controllers.error))));
 };
 
-var styles$Q = {"text-field":"_18Rzv","text-field--invalid":"_3eD7t","text-field--prefixed":"_2evrG","text-field--suffixed":"_-MgeO","password-container":"_-Rf3c","password-toggle":"_yinPY"};
+var styles$R = {"text-field":"_18Rzv","text-field--invalid":"_3eD7t","text-field--prefixed":"_2evrG","text-field--suffixed":"_-MgeO","password-container":"_-Rf3c","password-toggle":"_yinPY"};
 
-var styles$R = {"password-criteria":"_U0krC","password-criteria--invalid":"_2XIl4"};
+var styles$S = {"password-criteria":"_U0krC","password-criteria--invalid":"_2XIl4"};
 
 var PasswordCriteria = function PasswordCriteria(_ref) {
   var _classnames;
@@ -8087,12 +8079,12 @@ var PasswordCriteria = function PasswordCriteria(_ref) {
   var met = _ref.met,
       children = _ref.children;
   return React__default.createElement("span", {
-    className: classnames(styles$R['password-criteria'], (_classnames = {}, _classnames[styles$R['password-criteria--invalid']] = !met, _classnames))
+    className: classnames(styles$S['password-criteria'], (_classnames = {}, _classnames[styles$S['password-criteria--invalid']] = !met, _classnames))
   }, React__default.createElement(Inline, {
     space: met ? 4 : 8
   }, met ? React__default.createElement(IconCheck, {
     size: "small",
-    color: GREY200
+    color: "grey-200"
   }) : "\u25CF", children));
 };
 
@@ -8172,11 +8164,11 @@ var PasswordField = function PasswordField(_ref) {
     error: controllers.error
   };
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: styles$Q['password-container']
+    className: styles$R['password-container']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames(styles$Q['text-field'], (_classnames = {}, _classnames[styles$Q['text-field--invalid']] = hasError, _classnames)),
+    className: classnames(styles$R['text-field'], (_classnames = {}, _classnames[styles$R['text-field--invalid']] = hasError, _classnames)),
     type: type,
     "data-testid": testId,
     "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
@@ -8188,16 +8180,16 @@ var PasswordField = function PasswordField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("div", {
-    className: styles$Q['password-toggle'],
+    className: styles$R['password-toggle'],
     onClick: toggleType,
     onKeyPress: toggleType,
     "data-testid": testId && testId + "-toggle",
     tabIndex: 0,
     role: "button"
   }, type === 'password' ? React__default.createElement(IconEyeSlash, {
-    color: GREY400
+    color: "grey-400"
   }) : React__default.createElement(IconEye, {
-    color: GREY400
+    color: "grey-400"
   }))));
 };
 
@@ -8279,7 +8271,7 @@ var MultiSelectField = function MultiSelectField(_ref) {
   }));
 };
 
-var styles$S = {"custom-list":"_uC4zU"};
+var styles$T = {"custom-list":"_uC4zU"};
 
 var _excluded$2o = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
 
@@ -8298,7 +8290,7 @@ var CustomList = function CustomList(_ref) {
   return React__default.createElement(components.MenuList, Object.assign({}, props), React__default.createElement(Fragment, null, children, showFooter && React__default.createElement(Inline, {
     justifyContent: "center"
   }, React__default.createElement("div", {
-    className: styles$S['custom-list']
+    className: styles$T['custom-list']
   }, getLocalizedString('main.START_TYPING_TO_SEE_MORE_OPTIONS')))));
 };
 
@@ -8527,7 +8519,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));
     },
@@ -8545,7 +8537,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(),
@@ -8654,7 +8646,7 @@ var getFormikError = function getFormikError(error) {
   return undefined;
 };
 
-var styles$T = {"container":"_1Ini2","wrapper":"_21VnL","interactionDisabled":"_wJ6Cb","DayPicker-Day":"_1c48y","navBar":"_3KwsN","todayButton":"_10CBO","navButtonInteractionDisabled":"_dHL-D","navButtonPrev":"_6kNi3","navButtonNext":"_13W_e","months":"_1FeSY","month":"_wU6A4","caption":"_AMbAo","weekdays":"_1LEst","weekdaysRow":"_2XECo","weekday":"_1C5ry","body":"_11F-Y","week":"_3MAFk","day":"_mG73F","disabled":"_2pgnH","selected":"_MtLaz","outside":"_CRqyX","footer":"_2KG9-","today":"_2JA2y","overlayWrapper":"_1JWbc","overlay":"_2tL6g","weekNumber":"_3u72O","text-field":"_25rf7","date-range-field":"_3qVhi","text-field--invalid":"_2M9Ud","text-field--prefixed":"_3TUb2","text-field--suffixed":"_foqL0","date-range-field--invalid":"_3df9R","date-range-field--disabled":"_2Nkht"};
+var styles$U = {"container":"_1Ini2","wrapper":"_21VnL","interactionDisabled":"_wJ6Cb","DayPicker-Day":"_1c48y","navBar":"_3KwsN","todayButton":"_10CBO","navButtonInteractionDisabled":"_dHL-D","navButtonPrev":"_6kNi3","navButtonNext":"_13W_e","months":"_1FeSY","month":"_wU6A4","caption":"_AMbAo","weekdays":"_1LEst","weekdaysRow":"_2XECo","weekday":"_1C5ry","body":"_11F-Y","week":"_3MAFk","day":"_mG73F","disabled":"_2pgnH","selected":"_MtLaz","outside":"_CRqyX","footer":"_2KG9-","today":"_2JA2y","overlayWrapper":"_1JWbc","overlay":"_2tL6g","weekNumber":"_3u72O","text-field":"_25rf7","date-range-field":"_3qVhi","text-field--invalid":"_2M9Ud","text-field--prefixed":"_3TUb2","text-field--suffixed":"_foqL0","date-range-field--invalid":"_3df9R","date-range-field--disabled":"_2Nkht"};
 
 var FromDate = function FromDate(_ref) {
   var name = _ref.name,
@@ -8693,7 +8685,7 @@ var FromDate = function FromDate(_ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$T,
+    classNames: styles$U,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -8720,7 +8712,7 @@ var FromDate = function FromDate(_ref) {
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$T,
+    classNames: styles$U,
     selectedDay: start,
     value: start,
     formatDate: formatDate,
@@ -8794,7 +8786,7 @@ var ToDate = function ToDate(_ref, ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$T,
+    classNames: styles$U,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -8813,7 +8805,7 @@ var ToDate = function ToDate(_ref, ref) {
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$T,
+    classNames: styles$U,
     selectedDay: end,
     value: end,
     formatDate: formatDate,
@@ -8898,11 +8890,11 @@ var DateRangeField = function DateRangeField(_ref) {
       start = _controllers$value.start,
       end = _controllers$value.end;
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$T['date-range-field'], (_classnames = {}, _classnames[styles$T['date-range-field--invalid']] = hasError, _classnames[styles$T['date-range-field--disabled']] = disabled, _classnames)),
+    className: classnames(styles$U['date-range-field'], (_classnames = {}, _classnames[styles$U['date-range-field--invalid']] = hasError, _classnames[styles$U['date-range-field--disabled']] = disabled, _classnames)),
     "data-testid": testId
   }, React__default.createElement(IconCalendarAlt, {
     size: "medium",
-    color: GREY400
+    color: "grey-400"
   }), React__default.createElement(FromDate, {
     name: name,
     id: controllers.id,
@@ -8928,7 +8920,7 @@ var DateRangeField = function DateRangeField(_ref) {
     testId: testId
   }), React__default.createElement(IconArrowRight, {
     size: "medium",
-    color: GREY400
+    color: "grey-400"
   }), React__default.createElement(ToDate$1, {
     name: name,
     format: format,
@@ -9025,7 +9017,7 @@ var WeekField = function WeekField(_ref) {
   };
 
   var dayPickerProps = {
-    classNames: styles$r,
+    classNames: styles$v,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -9055,7 +9047,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(),
@@ -9266,7 +9258,7 @@ var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
 var TimeRangeSelector = forwardRef(TimeFieldElement);
 var TimeField = 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,
@@ -9285,7 +9277,7 @@ var TimeRangeEnd = function TimeRangeEnd(_ref) {
     interval: interval,
     prefix: React__default.createElement(IconArrowRight, {
       size: "medium",
-      color: GREY400
+      color: "grey-400"
     }),
     duration: duration,
     endField: true,
@@ -9368,7 +9360,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,
@@ -9555,7 +9547,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,
@@ -9578,7 +9570,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,
@@ -9609,7 +9601,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));
 };
 
@@ -9656,14 +9648,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, {
@@ -9673,9 +9665,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,
@@ -9683,7 +9675,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",
@@ -9697,7 +9689,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;
@@ -9726,7 +9718,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],
@@ -9798,7 +9790,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,
@@ -9813,7 +9805,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"
@@ -9822,21 +9814,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,
@@ -9851,15 +9843,15 @@ var ProgressBar = function ProgressBar(_ref) {
       metric = _useProgress.metric;
 
   return React__default.createElement(Stack, null, React__default.createElement("div", Object.assign({}, elementProps, {
-    className: styles$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
@@ -9867,7 +9859,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"];
 
@@ -9891,7 +9883,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));
@@ -9899,9 +9891,9 @@ var Badge = function Badge(_ref, forwardedRef) {
 
 var Badge$1 = forwardRef(Badge);
 
-var styles$$ = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
+var styles$10 = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
 
-var styles$10 = {"avatar-image":"_GKL9P"};
+var styles$11 = {"avatar-image":"_GKL9P"};
 
 var AvatarImage = function AvatarImage(_ref) {
   var url = _ref.url,
@@ -9926,7 +9918,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
@@ -9976,7 +9968,7 @@ var Avatar = function Avatar(_ref) {
 
   var children = _ref.children,
       _ref$color = _ref.color,
-      color = _ref$color === void 0 ? GREY400 : _ref$color,
+      color = _ref$color === void 0 ? COLORS['grey-400'] : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       url = _ref.url,
@@ -9993,9 +9985,9 @@ var Avatar = function Avatar(_ref) {
   }),
       defaultProfilePictureColors = _useState2[0];
 
-  var backgroundColor = url ? GREY200 : color;
+  var backgroundColor = url ? COLORS['grey-200'] : getColor(color);
   return React__default.createElement("div", {
-    className: classnames(styles$$['avatar'], (_classnames = {}, _classnames[styles$$['avatar--small']] = size === 'small', _classnames[styles$$['avatar--medium']] = size === 'medium', _classnames[styles$$['avatar--large']] = size === 'large', _classnames[styles$$['avatar--extra-large']] = size === 'extra-large', _classnames)),
+    className: classnames(styles$10['avatar'], (_classnames = {}, _classnames[styles$10['avatar--small']] = size === 'small', _classnames[styles$10['avatar--medium']] = size === 'medium', _classnames[styles$10['avatar--large']] = size === 'large', _classnames[styles$10['avatar--extra-large']] = size === 'extra-large', _classnames)),
     style: {
       backgroundColor: children || url && !showIconInsteadOfImage ? backgroundColor : defaultProfilePictureColors.backgroundColor
     },
@@ -10008,7 +10000,7 @@ var Avatar = function Avatar(_ref) {
       return setShowIconInsteadOfImage(true);
     }
   }), badge && size !== 'small' && React__default.createElement("div", {
-    className: styles$$['avatar__badge']
+    className: styles$10['avatar__badge']
   }, badge));
 };
 
@@ -10021,7 +10013,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;
@@ -10032,11 +10024,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',
@@ -10055,7 +10047,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);
 };
 
@@ -10065,9 +10057,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;
@@ -10085,7 +10077,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);
 };
 
@@ -10100,7 +10092,7 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
       isPaywall = _ref$isPaywall === void 0 ? false : _ref$isPaywall,
       testId = _ref.testId;
   return React__default.createElement("div", {
-    className: styles$13['empty-state-container-stack'],
+    className: styles$14['empty-state-container-stack'],
     "data-testid": testId
   }, React__default.createElement("img", {
     src: mediaUrl,
@@ -10111,12 +10103,12 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
     alignItems: "center"
   }, header && React__default.createElement(Text, {
     as: "h4",
-    color: isPaywall && EGGPLANT500
+    color: isPaywall && 'eggplant-500'
   }, header), React__default.createElement(Text, {
     emphasis: "bold",
     as: "body"
   }, title), React__default.createElement("div", {
-    className: styles$13['empty-state-container-stack__body']
+    className: styles$14['empty-state-container-stack__body']
   }, children)), React__default.createElement(Stack, {
     space: 8,
     alignItems: "center"
@@ -10128,7 +10120,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;
@@ -10149,19 +10141,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
@@ -10172,7 +10164,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),
@@ -10246,5 +10238,5 @@ var EmptyState = function EmptyState(_ref) {
   }, children);
 };
 
-export { AsyncSelectField, Avatar, Badge$1 as Badge, Bold, BreadcrumbItem, Breadcrumbs, Button$1 as Button, Calendar, Card, CheckboxField, Chip, CircularProgress, CurrencyField, DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateFilter, DateRangeField, Dropdown, DropdownList, DropdownListDivider, DropdownListItem, EmptyState, Form, FormFeedback, FormFooter, FormRow, FormSection, IconAnalytics, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowTurnDownRight, IconArrowUp, IconAward, IconAwful, IconAwfulMonochromatic, IconBad, IconBadMonochromatic, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClipboardList, IconClock, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDecent, IconDecentMonochromatic, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGood, IconGoodMonochromatic, IconGreat, IconGreatMonochromatic, IconGrinBeam, IconGripVertical, IconHandshake, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMegaphone, IconMessages, IconMinus, IconMinusCircle, IconMoneyBill, IconMugSaucerSolid, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTable, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSearch, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Italic, Link, Modal, ModalBody, ModalFooter, MultiSelectField, Page, PaginationControls, PasswordField, Paywall, PercentageField, PersistentBanner, Pill, PillSelectField, ProgressBar, RadioGroupBoxOption, RadioGroupField, RadioGroupOption, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SegmentedControl, SelectField, SousChefProvider, Spinner, Stack, Text, TextAreaField, TextField, TimeField, TimeRangeField, Toggle, ToolbarSelect, Tooltip$1 as Tooltip, Underline, WeekField, toast };
+export { AsyncSelectField, Avatar, Badge$1 as Badge, Bold, BreadcrumbItem, Breadcrumbs, Button$1 as Button, COLORS, Calendar, Card, CheckboxField, Chip, CircularProgress, CurrencyField, DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateFilter, DateRangeField, Dropdown, DropdownList, DropdownListDivider, DropdownListItem, EmptyState, Form, FormFeedback, FormFooter, FormRow, FormSection, IconAnalytics, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowTurnDownRight, IconArrowUp, IconAward, IconAwful, IconAwfulMonochromatic, IconBad, IconBadMonochromatic, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClipboardList, IconClock, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDecent, IconDecentMonochromatic, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGood, IconGoodMonochromatic, IconGreat, IconGreatMonochromatic, IconGrinBeam, IconGripVertical, IconHandshake, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMegaphone, IconMessages, IconMinus, IconMinusCircle, IconMoneyBill, IconMugSaucerSolid, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTable, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSearch, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Italic, Link, Modal, ModalBody, ModalFooter, MultiSelectField, Page, PaginationControls, PasswordField, Paywall, PercentageField, PersistentBanner, Pill, PillSelectField, ProgressBar, RadioGroupBoxOption, RadioGroupField, RadioGroupOption, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SegmentedControl, SelectField, SousChefProvider, Spinner, Stack, Text, TextAreaField, TextField, TimeField, TimeRangeField, Toggle, ToolbarSelect, Tooltip$1 as Tooltip, Underline, WeekField, toast };
 //# sourceMappingURL=index.modern.js.map