@7shifts/sous-chef 3.76.2 → 3.77.0-beta.0

package/dist/index.js

@@ -53,68 +53,79 @@ var AsyncSelect__default = /*#__PURE__*/_interopDefaultLegacy(AsyncSelect);
 // This file is automatically generated by 'scripts/tokens/build-colors.sh'
 // Do not edit this file directly, if you need to add a color modify 'src/foundation/tokens/color/_color-tokens.scss'
 var COLORS = {
-  'white': 'var(--color-white)',
-  'black': 'var(--color-black)',
-  'tangerine-100': 'var(--color-tangerine-100)',
-  'tangerine-200': 'var(--color-tangerine-200)',
-  'tangerine-300': 'var(--color-tangerine-300)',
-  'tangerine-400': 'var(--color-tangerine-400)',
-  'tangerine-500': 'var(--color-tangerine-500)',
-  'tangerine-600': 'var(--color-tangerine-600)',
-  'eggplant-100': 'var(--color-eggplant-100)',
-  'eggplant-200': 'var(--color-eggplant-200)',
-  'eggplant-300': 'var(--color-eggplant-300)',
-  'eggplant-400': 'var(--color-eggplant-400)',
-  'eggplant-500': 'var(--color-eggplant-500)',
-  'eggplant-600': 'var(--color-eggplant-600)',
-  'mint-100': 'var(--color-mint-100)',
-  'mint-200': 'var(--color-mint-200)',
-  'mint-300': 'var(--color-mint-300)',
-  'mint-400': 'var(--color-mint-400)',
-  'mint-500': 'var(--color-mint-500)',
-  'mint-600': 'var(--color-mint-600)',
-  'radish-100': 'var(--color-radish-100)',
-  'radish-200': 'var(--color-radish-200)',
-  'radish-300': 'var(--color-radish-300)',
-  'radish-400': 'var(--color-radish-400)',
-  'radish-500': 'var(--color-radish-500)',
-  'radish-600': 'var(--color-radish-600)',
-  'blueberry-100': 'var(--color-blueberry-100)',
-  'blueberry-200': 'var(--color-blueberry-200)',
-  'blueberry-300': 'var(--color-blueberry-300)',
-  'blueberry-400': 'var(--color-blueberry-400)',
-  'blueberry-500': 'var(--color-blueberry-500)',
-  'blueberry-600': 'var(--color-blueberry-600)',
-  'banana-100': 'var(--color-banana-100)',
-  'banana-200': 'var(--color-banana-200)',
-  'banana-300': 'var(--color-banana-300)',
-  'banana-400': 'var(--color-banana-400)',
-  'banana-500': 'var(--color-banana-500)',
-  'banana-600': 'var(--color-banana-600)',
-  'grey-100': 'var(--color-grey-100)',
-  'grey-200': 'var(--color-grey-200)',
-  'grey-300': 'var(--color-grey-300)',
-  'grey-400': 'var(--color-grey-400)',
-  'grey-500': 'var(--color-grey-500)',
-  'grey-600': 'var(--color-grey-600)',
-  'oat-100': 'var(--color-oat-100)',
-  'oat-200': 'var(--color-oat-200)',
-  'oat-300': 'var(--color-oat-300)',
-  'oat-400': 'var(--color-oat-400)',
-  'oat-500': 'var(--color-oat-500)',
-  'oat-600': 'var(--color-oat-600)',
-  'lime-100': 'var(--color-lime-100)',
-  'lime-200': 'var(--color-lime-200)',
-  'lime-300': 'var(--color-lime-300)',
-  'lime-400': 'var(--color-lime-400)',
-  'lime-500': 'var(--color-lime-500)',
-  'lime-600': 'var(--color-lime-600)',
-  'blackberry-100': 'var(--color-blackberry-100)',
-  'blackberry-200': 'var(--color-blackberry-200)',
-  'blackberry-300': 'var(--color-blackberry-300)',
-  'blackberry-400': 'var(--color-blackberry-400)',
-  'blackberry-500': 'var(--color-blackberry-500)',
-  'blackberry-600': 'var(--color-blackberry-600)'
+  'surface-color-dim': 'var(--color-surface-color-dim)',
+  'surface-color': 'var(--color-surface-color)',
+  'surface-on-color-disabled': 'var(--color-surface-on-color-disabled)',
+  'surface-on-color-subtle': 'var(--color-surface-on-color-subtle)',
+  'surface-on-color': 'var(--color-surface-on-color)',
+  'surface-on-color-bold': 'var(--color-surface-on-color-bold)',
+  'surface-container': 'var(--color-surface-container)',
+  'surface-container-high': 'var(--color-surface-container-high)',
+  'surface-container-highest': 'var(--color-surface-container-highest)',
+  'surface-container-disabled': 'var(--color-surface-container-disabled)',
+  'surface-container-disabled-variant': 'var(--color-surface-container-disabled-variant)',
+  'surface-on-container-disabled': 'var(--color-surface-on-container-disabled)',
+  'surface-inverse': 'var(--color-surface-inverse)',
+  'surface-on-inverse': 'var(--color-surface-on-inverse)',
+  'outline': 'var(--color-outline)',
+  'outline-variant': 'var(--color-outline-variant)',
+  'primary-color': 'var(--color-primary-color)',
+  'primary-on-color': 'var(--color-primary-on-color)',
+  'primary-color-variant': 'var(--color-primary-color-variant)',
+  'primary-on-color-variant': 'var(--color-primary-on-color-variant)',
+  'primary-container': 'var(--color-primary-container)',
+  'primary-on-container': 'var(--color-primary-on-container)',
+  'primary-container-variant': 'var(--color-primary-container-variant)',
+  'primary-on-container-variant': 'var(--color-primary-on-container-variant)',
+  'secondary-color': 'var(--color-secondary-color)',
+  'secondary-on-color': 'var(--color-secondary-on-color)',
+  'secondary-container': 'var(--color-secondary-container)',
+  'secondary-on-container': 'var(--color-secondary-on-container)',
+  'secondary-container-variant': 'var(--color-secondary-container-variant)',
+  'secondary-on-container-variant': 'var(--color-secondary-on-container-variant)',
+  'tertiary-color': 'var(--color-tertiary-color)',
+  'tertiary-on-color': 'var(--color-tertiary-on-color)',
+  'tertiary-container': 'var(--color-tertiary-container)',
+  'tertiary-on-container': 'var(--color-tertiary-on-container)',
+  'tertiary-container-variant': 'var(--color-tertiary-container-variant)',
+  'tertiary-on-container-variant': 'var(--color-tertiary-on-container-variant)',
+  'success-color': 'var(--color-success-color)',
+  'success-on-color': 'var(--color-success-on-color)',
+  'success-container': 'var(--color-success-container)',
+  'success-on-container': 'var(--color-success-on-container)',
+  'success-container-variant': 'var(--color-success-container-variant)',
+  'danger-color': 'var(--color-danger-color)',
+  'danger-on-color': 'var(--color-danger-on-color)',
+  'danger-container': 'var(--color-danger-container)',
+  'danger-on-container': 'var(--color-danger-on-container)',
+  'danger-container-variant': 'var(--color-danger-container-variant)',
+  'danger-on-container-variant': 'var(--color-danger-on-container-variant)',
+  'info-color': 'var(--color-info-color)',
+  'info-on-color': 'var(--color-info-on-color)',
+  'info-container': 'var(--color-info-container)',
+  'info-on-container': 'var(--color-info-on-container)',
+  'info-container-variant': 'var(--color-info-container-variant)',
+  'info-on-container-variant': 'var(--color-info-on-container-variant)',
+  'upsell-color': 'var(--color-upsell-color)',
+  'upsell-on-color': 'var(--color-upsell-on-color)',
+  'upsell-color-variant': 'var(--color-upsell-color-variant)',
+  'upsell-on-color-variant': 'var(--color-upsell-on-color-variant)',
+  'upsell-container': 'var(--color-upsell-container)',
+  'upsell-on-container': 'var(--color-upsell-on-container)',
+  'upsell-container-variant': 'var(--color-upsell-container-variant)',
+  'upsell-on-container-variant': 'var(--color-upsell-on-container-variant)',
+  'warning-color': 'var(--color-warning-color)',
+  'warning-on-color': 'var(--color-warning-on-color)',
+  'warning-container': 'var(--color-warning-container)',
+  'warning-on-container': 'var(--color-warning-on-container)',
+  'warning-container-variant': 'var(--color-warning-container-variant)',
+  'warning-on-container-variant': 'var(--color-warning-on-container-variant)',
+  'neutral-color': 'var(--color-neutral-color)',
+  'neutral-on-color': 'var(--color-neutral-on-color)',
+  'neutral-container': 'var(--color-neutral-container)',
+  'neutral-on-container': 'var(--color-neutral-on-container)',
+  'neutral-container-variant': 'var(--color-neutral-container-variant)',
+  'neutral-on-container-variant': 'var(--color-neutral-on-container-variant)'
 };
 
 // This file is automatically generated by 'scripts/tokens/build-z-indexes.sh'
@@ -603,9 +614,9 @@ var Portal = function Portal(_ref) {
   return ReactDOM__default["default"].createPortal(children, container);
 };
 
-// returns the css color variable to pass directly to a style prop ex: 'var(--color-tangerine-400)'
+// returns the css color variable to pass directly to a style prop ex: 'var(--color-secondary-color)'
 var getColor = function getColor(color) {
-  if (color && COLORS[color]) {
+  if (color && color in COLORS) {
     return COLORS[color];
   } else {
     return color;
@@ -613,9 +624,9 @@ var getColor = function getColor(color) {
 };
 // returns the css z-index variable to pass directly to a style prop ex: 'var(--z-index-base)'
 var getZIndex = function getZIndex(zIndex) {
-  if (zIndex && ZINDEX[zIndex]) {
+  if (zIndex && zIndex in ZINDEX) {
     return ZINDEX[zIndex];
-  } else if (typeof zIndex === "number") {
+  } else if (typeof zIndex === 'number') {
     return zIndex;
   } else {
     return undefined;
@@ -797,7 +808,7 @@ var TooltipElement = function TooltipElement(_ref, forwardedRef) {
 };
 var Tooltip = React.forwardRef(TooltipElement);
 
-var styles$1i = {"button":"_pgOR3","button--loading":"_2yB9-","button__spinner":"_ppC-S","button--size-min-width-100":"_GtXOQ","button--size-full-width":"_Y-OxO","button--icon-only":"_3EfuT","button--default":"_ICNz7","button--primary":"_XwJWT","button--danger":"_gr3Dh","button--upsell":"_ME8te","button--marketing":"_mI-Dx","button--hollow":"_orywo","button--hollow-contrast":"_obtsl","button--link-contrast":"_00jK4","button--link-primary":"_JPwJ7","button--link-danger":"_9TprN","button--link-upsell":"_tktX-","button--link-toolbar":"_r3SQl","button--link-icon":"_oFBLN","disabled-button-wrapper":"_yTBTz"};
+var styles$1i = {"button":"_pgOR3","button--loading":"_2yB9-","button__spinner":"_ppC-S","button--size-min-width-100":"_GtXOQ","button--size-full-width":"_Y-OxO","button--icon-only":"_3EfuT","button--default":"_ICNz7","button--primary":"_XwJWT","button--danger":"_gr3Dh","button--upsell":"_ME8te","button--hollow":"_orywo","button--hollow-contrast":"_obtsl","button--link-contrast":"_00jK4","button--link-primary":"_JPwJ7","button--link-danger":"_9TprN","button--link-upsell":"_tktX-","button--link-toolbar":"_r3SQl","button--link-icon":"_oFBLN","disabled-button-wrapper":"_yTBTz"};
 
 var BUTTON_SIZES = {
   FULL_WIDTH: 'full-width',
@@ -808,7 +819,6 @@ var BUTTON_THEMES = {
   PRIMARY: 'primary',
   DANGER: 'danger',
   UPSELL: 'upsell',
-  MARKETING: 'marketing',
   HOLLOW: 'hollow',
   HOLLOW_CONTRAST: 'hollow-contrast',
   LINK_PRIMARY: 'link-primary',
@@ -881,7 +891,7 @@ var ButtonComponent = function ButtonComponent(_ref, ref) {
     otherProps = _getPositionProps.otherProps;
   var _getDataProps = getDataProps(otherProps),
     dataProps = _getDataProps.dataProps;
-  var contrastSpinner = [BUTTON_THEMES.PRIMARY, BUTTON_THEMES.DANGER, BUTTON_THEMES.UPSELL, BUTTON_THEMES.MARKETING, BUTTON_THEMES.LINK_CONTRAST];
+  var contrastSpinner = [BUTTON_THEMES.PRIMARY, BUTTON_THEMES.DANGER, BUTTON_THEMES.UPSELL, BUTTON_THEMES.LINK_CONTRAST];
   var childrenArr = React.Children.toArray(children);
   var isIconOnly = childrenArr.length === 1 && typeof childrenArr[0] != 'string';
   var ButtonElementResult = React__default["default"].createElement(ButtonElement, {
@@ -892,7 +902,7 @@ var ButtonComponent = function ButtonComponent(_ref, ref) {
     onBlur: onBlur,
     onFocus: onFocus,
     onKeyDown: onKeyDown,
-    className: classnames__default["default"](styles$1i['button'], (_classnames = {}, _classnames[styles$1i['button--default']] = theme === BUTTON_THEMES.DEFAULT, _classnames[styles$1i['button--primary']] = theme === BUTTON_THEMES.PRIMARY, _classnames[styles$1i['button--danger']] = theme === BUTTON_THEMES.DANGER, _classnames[styles$1i['button--upsell']] = theme === BUTTON_THEMES.UPSELL, _classnames[styles$1i['button--marketing']] = theme === BUTTON_THEMES.MARKETING, _classnames[styles$1i['button--hollow']] = theme === BUTTON_THEMES.HOLLOW, _classnames[styles$1i['button--hollow-contrast']] = theme === BUTTON_THEMES.HOLLOW_CONTRAST, _classnames[styles$1i['button--link-primary']] = theme === BUTTON_THEMES.LINK_PRIMARY, _classnames[styles$1i['button--link-danger']] = theme === BUTTON_THEMES.LINK_DANGER, _classnames[styles$1i['button--link-upsell']] = theme === BUTTON_THEMES.LINK_UPSELL, _classnames[styles$1i['button--link-toolbar']] = theme === BUTTON_THEMES.LINK_TOOLBAR, _classnames[styles$1i['button--link-contrast']] = theme === BUTTON_THEMES.LINK_CONTRAST, _classnames[styles$1i['button--link-icon']] = theme === BUTTON_THEMES.LINK_ICON, _classnames[styles$1i['button--loading']] = loading, _classnames[styles$1i['button--icon-only']] = isIconOnly, _classnames[styles$1i['button--size-min-width-100']] = size === BUTTON_SIZES.MIN_WIDTH_100, _classnames[styles$1i['button--size-full-width']] = size === BUTTON_SIZES.FULL_WIDTH, _classnames)),
+    className: classnames__default["default"](styles$1i['button'], (_classnames = {}, _classnames[styles$1i['button--default']] = theme === BUTTON_THEMES.DEFAULT, _classnames[styles$1i['button--primary']] = theme === BUTTON_THEMES.PRIMARY, _classnames[styles$1i['button--danger']] = theme === BUTTON_THEMES.DANGER, _classnames[styles$1i['button--upsell']] = theme === BUTTON_THEMES.UPSELL, _classnames[styles$1i['button--hollow']] = theme === BUTTON_THEMES.HOLLOW, _classnames[styles$1i['button--hollow-contrast']] = theme === BUTTON_THEMES.HOLLOW_CONTRAST, _classnames[styles$1i['button--link-primary']] = theme === BUTTON_THEMES.LINK_PRIMARY, _classnames[styles$1i['button--link-danger']] = theme === BUTTON_THEMES.LINK_DANGER, _classnames[styles$1i['button--link-upsell']] = theme === BUTTON_THEMES.LINK_UPSELL, _classnames[styles$1i['button--link-toolbar']] = theme === BUTTON_THEMES.LINK_TOOLBAR, _classnames[styles$1i['button--link-contrast']] = theme === BUTTON_THEMES.LINK_CONTRAST, _classnames[styles$1i['button--link-icon']] = theme === BUTTON_THEMES.LINK_ICON, _classnames[styles$1i['button--loading']] = loading, _classnames[styles$1i['button--icon-only']] = isIconOnly, _classnames[styles$1i['button--size-min-width-100']] = size === BUTTON_SIZES.MIN_WIDTH_100, _classnames[styles$1i['button--size-full-width']] = size === BUTTON_SIZES.FULL_WIDTH, _classnames)),
     type: type,
     disabled: disabled || loading,
     href: href,
@@ -6459,7 +6469,7 @@ var useBackgroundColor = function useBackgroundColor() {
     isInsideAccordion = _useAccordionContext.isAccordionMounted;
   var _useCardContext = useCardContext(),
     isInsideCard = _useCardContext.isCardMounted;
-  var _useState = React.useState(COLORS.white),
+  var _useState = React.useState(COLORS['surface-color']),
     backgroundColor = _useState[0],
     setBackgroundColor = _useState[1];
   React.useLayoutEffect(function () {
@@ -7755,7 +7765,7 @@ var DropdownListDivider = function DropdownListDivider(_ref) {
   });
 };
 
-var styles$_ = {"dropdown-list-item":"_W12mF","dropdown-list-item--selected":"_Zu9cD","dropdown-list-item__content":"_xS6fS","dropdown-list-item--disabled":"_0OB5b","dropdown-list-item__container":"_IBrNj","dropdown-list-item__link":"_vC0uY"};
+var styles$_ = {"dropdown-list-item":"_W12mF","dropdown-list-item--selected":"_Zu9cD","dropdown-list-item__content":"_xS6fS","dropdown-list-item__caption":"_7EI7m","dropdown-list-item--disabled":"_0OB5b","dropdown-list-item__prefix":"_dpo67","dropdown-list-item__suffix":"_ObP6B","dropdown-list-item__container":"_IBrNj","dropdown-list-item__link":"_vC0uY"};
 
 var DropdownListItem = function DropdownListItem(_ref) {
   var _classNames;
@@ -7782,15 +7792,6 @@ var DropdownListItem = function DropdownListItem(_ref) {
     onToggleDropdown();
     onClick && onClick(e);
   };
-  var getCaptionColor = function getCaptionColor() {
-    if (selected) {
-      return 'blackberry-500';
-    }
-    if (disabled) {
-      return 'grey-400';
-    }
-    return undefined;
-  };
   var childrenContainer = React__default["default"].createElement("div", {
     className: styles$_['dropdown-list-item__container']
   }, prefix && React__default["default"].createElement("div", {
@@ -7800,10 +7801,8 @@ var DropdownListItem = function DropdownListItem(_ref) {
   }, React__default["default"].createElement(Stack, {
     space: 4,
     flex: [1]
-  }, children, caption && React__default["default"].createElement(Text, {
-    as: "caption",
-    color: getCaptionColor(),
-    textWrap: "wrap"
+  }, children, caption && React__default["default"].createElement("div", {
+    className: styles$_['dropdown-list-item__caption']
   }, caption))), suffix && React__default["default"].createElement("div", {
     className: styles$_['dropdown-list-item__suffix']
   }, suffix));
@@ -9896,7 +9895,7 @@ var AccordionItem = function AccordionItem(props) {
     justifyContent: "space-between",
     alignItems: "center"
   }, React__default["default"].createElement(Text, {
-    color: "grey-500",
+    color: "grey-600",
     emphasis: "bold"
   }, title), React__default["default"].createElement(IconChevronDown, {
     className: styles$x["accordion-item__icon" + (isOpen ? '--active' : '')],
@@ -10179,7 +10178,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 ? COLORS['radish-400'] : COLORS['grey-200'];
+  var borderColor = isInvalid ? COLORS['danger-color'] : COLORS['outline'];
   return {
     valueContainer: function valueContainer(base) {
       return Object.assign({}, base, {
@@ -10196,18 +10195,18 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     control: function control(base, state) {
       return Object.assign({}, base, {
-        backgroundColor: state.isDisabled ? COLORS['grey-100'] : COLORS['white'],
-        borderColor: state.isFocused ? COLORS['blackberry-400'] : borderColor,
-        color: state.isDisabled ? COLORS['grey-400'] : COLORS['grey-500'],
+        backgroundColor: state.isDisabled ? COLORS['surface-container-disabled'] : COLORS['surface-color'],
+        borderColor: state.isFocused ? COLORS['primary-color'] : borderColor,
+        color: state.isDisabled ? COLORS['surface-on-container-disabled'] : COLORS['surface-on-color'],
         borderRadius: 'var(--border-radius-400)',
-        boxShadow: state.isFocused ? "0 0 8px " + COLORS['blackberry-300'] : 'none',
+        boxShadow: state.isFocused ? "0 0 8px " + COLORS['primary-color'] : 'none',
         '&:hover': 'none',
         fontSize: '14px',
         cursor: 'pointer',
         width: asToolbarFilter ? 'fit-content' : undefined,
         margin: 0,
         ':hover': asToolbarFilter ? {
-          backgroundColor: COLORS['grey-100']
+          backgroundColor: 'color-mix(in srgb, var(--color-surface-color) 100%, var(--color-surface-inverse) 5%)'
         } : 'none'
       });
     },
@@ -10218,7 +10217,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     placeholder: function placeholder(base, state) {
       return _extends({}, base, {
-        color: state.isDisabled && asToolbarFilter ? COLORS['grey-300'] : COLORS['grey-400'],
+        color: state.isDisabled && asToolbarFilter ? COLORS['surface-on-color-disabled'] : COLORS['surface-on-color-subtle'],
         marginRight: 0,
         position: 'static',
         transform: 'initial',
@@ -10229,7 +10228,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     noOptionsMessage: function noOptionsMessage() {
       return {
-        color: COLORS['grey-400'],
+        color: COLORS['surface-on-color'],
         textAlign: 'center',
         padding: '8px',
         fontFamily: FONT_FAMILY,
@@ -10238,7 +10237,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     loadingMessage: function loadingMessage() {
       return {
-        color: COLORS['grey-400'],
+        color: COLORS['surface-on-color'],
         textAlign: 'center',
         padding: '8px',
         fontFamily: FONT_FAMILY,
@@ -10247,7 +10246,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     singleValue: function singleValue(base, state) {
       return Object.assign({}, base, {
-        color: state.isDisabled ? COLORS['grey-400'] : null,
+        color: state.isDisabled ? COLORS['surface-on-color-disabled'] : null,
         marginRight: 0,
         position: asToolbarFilter ? 'static' : 'absolute',
         transform: 'initial',
@@ -10259,15 +10258,15 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     dropdownIndicator: function dropdownIndicator(base, state) {
       return Object.assign({}, base, {
-        color: state.isDisabled ? COLORS['grey-300'] : COLORS['grey-400'],
+        color: state.isDisabled ? COLORS['surface-on-color-disabled'] : COLORS['surface-on-color-subtle'],
         padding: '8px',
         ':hover': 'none'
       });
     },
     option: function option(base, state) {
       return Object.assign({}, base, {
-        backgroundColor: state.isDisabled ? null : state.isSelected ? COLORS['blackberry-200'] : state.isFocused ? COLORS['grey-100'] : COLORS['white'],
-        color: state.isDisabled ? COLORS['grey-400'] : state.isSelected ? COLORS['blackberry-600'] : COLORS['grey-500'],
+        backgroundColor: state.isDisabled ? null : state.isSelected ? COLORS['primary-container'] : state.isFocused ? COLORS['surface-container-high'] : COLORS['surface-color'],
+        color: state.isDisabled ? COLORS['surface-on-color-disabled'] : state.isSelected ? COLORS['primary-color'] : COLORS['surface-on-color'],
         cursor: 'pointer',
         fontFamily: FONT_FAMILY,
         fontSize: '14px',
@@ -10283,22 +10282,23 @@ var getSelectStyles = function getSelectStyles(_ref) {
       return Object.assign({}, base, {
         ':hover': {
           backgroundColor: 'none',
-          color: COLORS['grey-500']
+          color: COLORS['surface-on-color']
         }
       });
     },
     clearIndicator: function clearIndicator(base) {
       return Object.assign({}, base, {
-        color: COLORS['grey-400'],
+        color: COLORS['surface-on-color-subtle'],
         ':hover': {
-          color: COLORS['grey-500']
+          color: COLORS['surface-on-color']
         }
       });
     },
     menu: function menu(base) {
       return _extends({}, base, {
         borderRadius: 0,
-        zIndex: getZIndex('dropdown')
+        zIndex: getZIndex('dropdown'),
+        backgroundColor: COLORS['surface-color']
       });
     },
     menuPortal: function menuPortal(base) {
@@ -11251,7 +11251,8 @@ var PillSelectField = function PillSelectField(_ref) {
     };
     return React__default["default"].createElement("button", {
       className: styles$i['pill-select-field__removable-icon'],
-      onClick: handleClick
+      onClick: handleClick,
+      disabled: disabled
     }, React__default["default"].createElement(IconTimes, {
       size: "small"
     }));
@@ -11292,7 +11293,7 @@ var PillSelectField = function PillSelectField(_ref) {
     }, option.label, option.isRemovable && React__default["default"].createElement(RemoveButton, {
       option: option
     })));
-  }), createOptionLabel && React__default["default"].createElement(CreatableOption, {
+  }), createOptionLabel && !disabled && React__default["default"].createElement(CreatableOption, {
     name: name,
     testId: testId,
     onCreate: onCreate,
@@ -11586,9 +11587,7 @@ var PasswordCriteria = function PasswordCriteria(_ref) {
   }, met ? React__default["default"].createElement(IconCheck, {
     size: "small",
     color: "grey-200"
-  }) : "\u25CF", React__default["default"].createElement(Text, {
-    color: met ? 'grey-200' : 'grey-400'
-  }, children)));
+  }) : "\u25CF", React__default["default"].createElement("span", null, children)));
 };
 
 var usePasswordCriteria = function usePasswordCriteria(criterias) {
@@ -12910,12 +12909,13 @@ var styles$9 = {"currency-field__mask-display":"_ddacu"};
 var CURRENCY_DISPLAY_DEFAULT_MARGIN = 8;
 var CURRENCY_DISPLAY_MARGIN_BUFFER = 1;
 
-var _excluded$4 = ["currencySymbol", "step"];
+var _excluded$4 = ["currencySymbol", "step", "suffix"];
 var CurrencyFieldElement = function CurrencyFieldElement(_ref, forwardedRef) {
   var _ref$currencySymbol = _ref.currencySymbol,
     currencySymbol = _ref$currencySymbol === void 0 ? '$' : _ref$currencySymbol,
     _ref$step = _ref.step,
     step = _ref$step === void 0 ? 0.01 : _ref$step,
+    suffix = _ref.suffix,
     allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   var _useState = React.useState(CURRENCY_DISPLAY_DEFAULT_MARGIN),
     displayPadding = _useState[0],
@@ -12945,7 +12945,8 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, forwardedRef) {
     }
   }, [ref]);
   return React__default["default"].createElement(Field, _extends({}, fieldProps), React__default["default"].createElement(React.Fragment, null, React__default["default"].createElement(AffixContainer, {
-    prefix: currencySymbol
+    prefix: currencySymbol,
+    suffix: suffix
   }, React__default["default"].createElement("input", _extends({}, inputProps, {
     type: "number",
     inputMode: "decimal",
@@ -14292,7 +14293,7 @@ var Avatar = function Avatar(_ref) {
   var _classnames;
   var children = _ref.children,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? COLORS['grey-400'] : _ref$color,
+    color = _ref$color === void 0 ? COLORS['surface-on-color-subtle'] : _ref$color,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     urlProp = _ref.url,
@@ -14311,7 +14312,7 @@ var Avatar = function Avatar(_ref) {
     }),
     defaultProfilePictureColors = _useState2[0];
   // If passing an url we are defaulting to a lighter grey while the image loads
-  var backgroundColor = url ? COLORS['grey-200'] : getColor(color);
+  var backgroundColor = url ? COLORS['surface-container-highest'] : getColor(color);
   return React__default["default"].createElement("div", {
     className: classnames__default["default"](styles$6['avatar__container']),
     ref: elementRef