@7shifts/sous-chef 3.77.0-beta.1 → 3.77.0-beta.2

package/dist/index.js

@@ -53,6 +53,68 @@ 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)',
@@ -69,6 +131,7 @@ var COLORS = {
   'surface-on-inverse': 'var(--color-surface-on-inverse)',
   'outline': 'var(--color-outline)',
   'outline-variant': 'var(--color-outline-variant)',
+  'outline-inverse': 'var(--color-outline-inverse)',
   'primary-color': 'var(--color-primary-color)',
   'primary-on-color': 'var(--color-primary-on-color)',
   'primary-color-variant': 'var(--color-primary-color-variant)',
@@ -94,6 +157,7 @@ var COLORS = {
   'success-container': 'var(--color-success-container)',
   'success-on-container': 'var(--color-success-on-container)',
   'success-container-variant': 'var(--color-success-container-variant)',
+  'success-on-container-variant': 'var(--color-success-on-container-variant)',
   'danger-color': 'var(--color-danger-color)',
   'danger-on-color': 'var(--color-danger-on-color)',
   'danger-container': 'var(--color-danger-container)',
@@ -808,7 +872,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--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--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 BUTTON_SIZES = {
   FULL_WIDTH: 'full-width',
@@ -819,6 +883,7 @@ var BUTTON_THEMES = {
   PRIMARY: 'primary',
   DANGER: 'danger',
   UPSELL: 'upsell',
+  MARKETING: 'marketing',
   HOLLOW: 'hollow',
   HOLLOW_CONTRAST: 'hollow-contrast',
   LINK_PRIMARY: 'link-primary',
@@ -891,7 +956,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.LINK_CONTRAST];
+  var contrastSpinner = [BUTTON_THEMES.PRIMARY, BUTTON_THEMES.DANGER, BUTTON_THEMES.UPSELL, BUTTON_THEMES.MARKETING, 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, {
@@ -902,7 +967,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--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--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)),
     type: type,
     disabled: disabled || loading,
     href: href,
@@ -6427,14 +6492,14 @@ var HeaderSortIcon = function HeaderSortIcon(_ref) {
     }
   }, sortDir !== 'desc' && React__default["default"].createElement(IconChevronUp, {
     size: "small",
-    color: "grey-400"
+    color: "surface-on-color-subtle"
   }), sortDir !== 'asc' && React__default["default"].createElement("span", {
     style: {
       marginTop: '-4px'
     }
   }, React__default["default"].createElement(IconChevronDown, {
     size: "small",
-    color: "grey-400"
+    color: "surface-on-color-subtle"
   })));
 };
 
@@ -7080,7 +7145,7 @@ var ErrorMessage = function ErrorMessage(_ref) {
     space: 8,
     alignItems: "center"
   }, React__default["default"].createElement(IconTimesOctagon, {
-    color: "radish-400",
+    color: "danger-color",
     size: "medium"
   }), children));
 };
@@ -7443,7 +7508,7 @@ var TimeFieldInput = function TimeFieldInput(_ref) {
   return React__default["default"].createElement(AffixContainer, {
     prefix: prefix ? prefix : React__default["default"].createElement(IconClock, {
       size: "medium",
-      color: "grey-400"
+      color: "surface-on-color-subtle"
     }),
     suffix: duration
   }, React__default["default"].createElement("input", _extends({}, inputProps, {
@@ -8008,7 +8073,7 @@ var CalloutCard = function CalloutCard(_ref) {
     className: styles$Y['callout-card__header']
   }, React__default["default"].createElement(Text, {
     as: "body",
-    color: "blackberry-400"
+    color: "primary-color"
   }, header)), React__default["default"].createElement(Text, {
     as: "h2"
   }, title), React__default["default"].createElement(Text, {
@@ -9156,7 +9221,7 @@ var DataTableCellElement = function DataTableCellElement(_ref, ref) {
     className: classnames__default["default"](styles$E['data-table-cell__error-icon'], (_classnames = {}, _classnames[styles$E['data-table-cell__error-icon--right-align']] = isRightAligned, _classnames[styles$E['data-table-cell__error-icon--left-align']] = !isRightAligned, _classnames))
   }, React__default["default"].createElement(IconTimesOctagon, {
     size: "medium",
-    color: "radish-400"
+    color: "danger-on-container-variant"
   }));
   var TableCell = React__default["default"].createElement("td", {
     className: classnames__default["default"]((_classnames2 = {}, _classnames2[styles$E['data-table-cell--invalid']] = hasError, _classnames2[styles$E['data-table-cell--no-padding']] = noPadding, _classnames2[styles$E['data-table-cell--vertical-border']] = hasVerticalBorders, _classnames2), styles$E['data-table-cell']),
@@ -9584,7 +9649,7 @@ var EmptyStateContainerStack = function EmptyStateContainerStack(_ref) {
     alignItems: "center"
   }, header && React__default["default"].createElement(Text, {
     as: "h4",
-    color: isPaywall ? 'eggplant-500' : 'tangerine-400'
+    color: isPaywall ? 'upsell-color' : 'secondary-color'
   }, header), React__default["default"].createElement(Text, {
     emphasis: "bold",
     as: "body",
@@ -9895,17 +9960,14 @@ var AccordionItem = function AccordionItem(props) {
     justifyContent: "space-between",
     alignItems: "center"
   }, React__default["default"].createElement(Text, {
-    color: "grey-600",
     emphasis: "bold"
   }, title), React__default["default"].createElement(IconChevronDown, {
     className: styles$x["accordion-item__icon" + (isOpen ? '--active' : '')],
-    color: 'grey-400'
+    color: 'surface-on-color-subtle'
   }))), React__default["default"].createElement("div", {
     "data-testid": "" + (isOpen ? 'accordion-item-' + id + '-open' : 'accordion-item-' + id + '-closed'),
     className: styles$x["accordion-item__content" + (isOpen ? '--active' : '')]
-  }, isOpen && React__default["default"].createElement(Text, {
-    color: "grey-500"
-  }, content)));
+  }, isOpen && React__default["default"].createElement(Text, null, content)));
 };
 
 var styles$w = {"accordion":"_058SP"};
@@ -10011,19 +10073,19 @@ var ActionListItem = function ActionListItem(_ref) {
     testId = _ref.testId;
   var iconColor = function iconColor() {
     if (theme === 'info') {
-      return disabled ? 'blueberry-300' : 'blueberry-400';
+      return disabled ? 'info-color-variant' : 'info-color';
     }
     if (theme === 'warning') {
-      return disabled ? 'banana-300' : 'banana-400';
+      return disabled ? 'warning-color-variant' : 'warning-color';
     }
     if (theme === 'success') {
-      return disabled ? 'mint-300' : 'mint-400';
+      return disabled ? 'success-color-variant' : 'success-color';
     }
     if (theme === 'danger') {
-      return disabled ? 'radish-300' : 'radish-400';
+      return disabled ? 'danger-color-variant' : 'danger-color';
     }
     if (theme === 'upsell') {
-      return disabled ? 'eggplant-300' : 'eggplant-400';
+      return disabled ? 'upsell-color-variant' : 'upsell-color';
     }
     return undefined;
   };
@@ -10062,14 +10124,14 @@ var ActionListItem = function ActionListItem(_ref) {
     flexWrap: "wrap",
     ml: 30
   }, suffix && React__default["default"].createElement(Text, {
-    color: disabled ? 'grey-300' : 'grey-400'
+    color: disabled ? 'surface-on-color-disabled' : 'surface-on-color-subtle'
   }, suffix), actions && React__default["default"].createElement(ActionListItemActions, {
     actions: actions,
     disabled: disabled
   })), onAction && React__default["default"].createElement("div", {
     className: classnames__default["default"](style['action-list-item__chevron-icon'])
   }, React__default["default"].createElement(IconChevronRight, {
-    color: disabled ? 'grey-300' : 'grey-400'
+    color: disabled ? 'surface-on-color-disabled' : 'surface-on-color-subtle'
   })))));
 };
 
@@ -10265,8 +10327,8 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     option: function option(base, state) {
       return Object.assign({}, base, {
-        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'],
+        backgroundColor: state.isDisabled ? null : state.isSelected ? COLORS['primary-container-variant'] : state.isFocused ? COLORS['surface-container-high'] : COLORS['surface-color'],
+        color: state.isDisabled ? COLORS['surface-on-color-disabled'] : state.isSelected ? COLORS['primary-on-container-variant'] : COLORS['surface-on-color'],
         cursor: 'pointer',
         fontFamily: FONT_FAMILY,
         fontSize: '14px',
@@ -10633,7 +10695,7 @@ var DateFilterText = function DateFilterText(_ref) {
         space: 12
       }, React__default["default"].createElement("span", null, getDateString(weekRange.start, mode)), React__default["default"].createElement(IconArrowRight, {
         size: "small",
-        color: "grey-400"
+        color: "surface-on-color-subtle"
       }), React__default["default"].createElement("span", null, getDateString(weekRange.end, mode)));
     default:
       return React__default["default"].createElement("span", null, getDateString(selectedDate, mode));
@@ -10658,7 +10720,7 @@ var DateFilterDisplay = React.forwardRef(function (_ref, ref) {
     className: classnames__default["default"](styles$q['date-filter-display__display-icon'])
   }, React__default["default"].createElement(IconCalendarAlt, {
     size: "flexible",
-    color: "grey-400"
+    color: "surface-on-color-subtle"
   })), React__default["default"].createElement(DateFilterText, {
     mode: mode,
     selectedDate: selectedDate,
@@ -10734,7 +10796,7 @@ var DateFilter = function DateFilter(_ref) {
     onChange: handleChange
   }, React__default["default"].createElement(IconChevronLeft, {
     size: "small",
-    color: "grey-400"
+    color: "surface-on-color-subtle"
   })), React__default["default"].createElement(DateFilterDisplay, {
     mode: mode,
     weekStart: weekStart,
@@ -10752,7 +10814,7 @@ var DateFilter = function DateFilter(_ref) {
     onChange: handleChange
   }, React__default["default"].createElement(IconChevronRight, {
     size: "small",
-    color: "grey-400"
+    color: "surface-on-color-subtle"
   }))), calendarOpen && mode !== DATE_FILTER_MODE.MONTH && React__default["default"].createElement(Calendar, {
     onSelect: handleChange,
     selected: value,
@@ -11200,7 +11262,7 @@ var CreatableOption = function CreatableOption(_ref) {
     className: styles$i['pill-select-field__creating-custom-input']
   }, !newOptionLabel && React__default["default"].createElement(Text, {
     as: "body",
-    color: "grey-300"
+    color: "surface-on-color-disabled"
   }, __('enterOption')), !!newOptionLabel && newOptionLabel)));
 };
 
@@ -11586,7 +11648,7 @@ var PasswordCriteria = function PasswordCriteria(_ref) {
     space: met ? 4 : 8
   }, met ? React__default["default"].createElement(IconCheck, {
     size: "small",
-    color: "grey-200"
+    color: "surface-on-color-disabled"
   }) : "\u25CF", React__default["default"].createElement("span", null, children)));
 };
 
@@ -11683,9 +11745,9 @@ var PasswordField = function PasswordField(_ref) {
     tabIndex: 0,
     role: "button"
   }, type === 'password' ? React__default["default"].createElement(IconEyeSlash, {
-    color: "grey-400"
+    color: "surface-on-color-subtle"
   }) : React__default["default"].createElement(IconEye, {
-    color: "grey-400"
+    color: "surface-on-color-subtle"
   }))));
 };
 
@@ -12394,7 +12456,7 @@ var DateRangeField = function DateRangeField(_ref) {
     "data-testid": testId
   }, React__default["default"].createElement(IconCalendarAlt, {
     size: "medium",
-    color: "grey-400"
+    color: "surface-on-color-subtle"
   }), React__default["default"].createElement(FromDate, {
     name: name,
     id: controllers.id,
@@ -12420,7 +12482,7 @@ var DateRangeField = function DateRangeField(_ref) {
     testId: testId
   }), React__default["default"].createElement(IconArrowRight, {
     size: "medium",
-    color: "grey-400"
+    color: "surface-on-color"
   }), React__default["default"].createElement(ToDate, {
     name: name,
     format: format,
@@ -12778,7 +12840,7 @@ var TimeRangeEnd = function TimeRangeEnd(_ref) {
     interval: interval,
     prefix: React__default["default"].createElement(IconArrowRight, {
       size: "medium",
-      color: "grey-400"
+      color: "surface-on-color-subtle"
     }),
     duration: duration,
     endField: true,
@@ -14031,7 +14093,7 @@ var CountrySelector = function CountrySelector(_ref) {
     }, React__default["default"].createElement("span", {
       className: classnames__default["default"](flagIcons['fi'], flagIcons["fi-" + country.toLocaleLowerCase()], styles$7['country-selector__trigger-flag'])
     }), React__default["default"].createElement(IconChevronDown, {
-      color: "grey-400",
+      color: "surface-on-color-subtle",
       size: "medium"
     }))),
     maxHeight: 300,
@@ -14434,7 +14496,7 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
     space: 8
   }, header && React__default["default"].createElement(Text, {
     as: "h4",
-    color: isPaywall ? 'eggplant-500' : 'blackberry-400'
+    color: isPaywall ? 'upsell-color' : 'primary-color'
   }, header), React__default["default"].createElement(Text, {
     as: "h1"
   }, title)), React__default["default"].createElement("div", {