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

package/dist/index.modern.js

@@ -21,6 +21,68 @@ import { parsePhoneNumber, AsYouType, getCountryCallingCode } from 'libphonenumb
 // 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'
 const 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)',
@@ -37,6 +99,7 @@ const 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)',
@@ -62,6 +125,7 @@ const 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)',
@@ -778,7 +842,7 @@ const TooltipElement = ({
 };
 const Tooltip = 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"};
 
 const BUTTON_SIZES = {
   FULL_WIDTH: 'full-width',
@@ -789,6 +853,7 @@ const BUTTON_THEMES = {
   PRIMARY: 'primary',
   DANGER: 'danger',
   UPSELL: 'upsell',
+  MARKETING: 'marketing',
   HOLLOW: 'hollow',
   HOLLOW_CONTRAST: 'hollow-contrast',
   LINK_PRIMARY: 'link-primary',
@@ -861,7 +926,7 @@ const ButtonComponent = (_ref, ref) => {
   const {
     dataProps
   } = getDataProps(otherProps);
-  const contrastSpinner = [BUTTON_THEMES.PRIMARY, BUTTON_THEMES.DANGER, BUTTON_THEMES.UPSELL, BUTTON_THEMES.LINK_CONTRAST];
+  const contrastSpinner = [BUTTON_THEMES.PRIMARY, BUTTON_THEMES.DANGER, BUTTON_THEMES.UPSELL, BUTTON_THEMES.MARKETING, BUTTON_THEMES.LINK_CONTRAST];
   const childrenArr = Children.toArray(children);
   const isIconOnly = childrenArr.length === 1 && typeof childrenArr[0] != 'string';
   const ButtonElementResult = React__default.createElement(ButtonElement, {
@@ -877,6 +942,7 @@ const ButtonComponent = (_ref, ref) => {
       [styles$1i['button--primary']]: theme === BUTTON_THEMES.PRIMARY,
       [styles$1i['button--danger']]: theme === BUTTON_THEMES.DANGER,
       [styles$1i['button--upsell']]: theme === BUTTON_THEMES.UPSELL,
+      [styles$1i['button--marketing']]: theme === BUTTON_THEMES.MARKETING,
       [styles$1i['button--hollow']]: theme === BUTTON_THEMES.HOLLOW,
       [styles$1i['button--hollow-contrast']]: theme === BUTTON_THEMES.HOLLOW_CONTRAST,
       [styles$1i['button--link-primary']]: theme === BUTTON_THEMES.LINK_PRIMARY,
@@ -6558,14 +6624,14 @@ const HeaderSortIcon = ({
     }
   }, sortDir !== 'desc' && React__default.createElement(IconChevronUp, {
     size: "small",
-    color: "grey-400"
+    color: "surface-on-color-subtle"
   }), sortDir !== 'asc' && React__default.createElement("span", {
     style: {
       marginTop: '-4px'
     }
   }, React__default.createElement(IconChevronDown, {
     size: "small",
-    color: "grey-400"
+    color: "surface-on-color-subtle"
   })));
 };
 
@@ -7230,7 +7296,7 @@ const ErrorMessage = ({
     space: 8,
     alignItems: "center"
   }, React__default.createElement(IconTimesOctagon, {
-    color: "radish-400",
+    color: "danger-color",
     size: "medium"
   }), children));
 };
@@ -7608,7 +7674,7 @@ const TimeFieldInput = ({
   return React__default.createElement(AffixContainer, {
     prefix: prefix ? prefix : React__default.createElement(IconClock, {
       size: "medium",
-      color: "grey-400"
+      color: "surface-on-color-subtle"
     }),
     suffix: duration
   }, React__default.createElement("input", _extends({}, inputProps, {
@@ -8177,7 +8243,7 @@ const CalloutCard = ({
     className: styles$Y['callout-card__header']
   }, React__default.createElement(Text, {
     as: "body",
-    color: "blackberry-400"
+    color: "primary-color"
   }, header)), React__default.createElement(Text, {
     as: "h2"
   }, title), React__default.createElement(Text, {
@@ -9341,7 +9407,7 @@ const DataTableCellElement = ({
     })
   }, React__default.createElement(IconTimesOctagon, {
     size: "medium",
-    color: "radish-400"
+    color: "danger-on-container-variant"
   }));
   const TableCell = React__default.createElement("td", {
     className: classnames({
@@ -9785,7 +9851,7 @@ const EmptyStateContainerStack = ({
     alignItems: "center"
   }, header && React__default.createElement(Text, {
     as: "h4",
-    color: _isPaywall ? 'eggplant-500' : 'tangerine-400'
+    color: _isPaywall ? 'upsell-color' : 'secondary-color'
   }, header), React__default.createElement(Text, {
     emphasis: "bold",
     as: "body",
@@ -10100,17 +10166,14 @@ const AccordionItem = props => {
     justifyContent: "space-between",
     alignItems: "center"
   }, React__default.createElement(Text, {
-    color: "grey-600",
     emphasis: "bold"
   }, title), React__default.createElement(IconChevronDown, {
     className: styles$x[`accordion-item__icon${isOpen ? '--active' : ''}`],
-    color: 'grey-400'
+    color: 'surface-on-color-subtle'
   }))), React__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.createElement(Text, {
-    color: "grey-500"
-  }, content)));
+  }, isOpen && React__default.createElement(Text, null, content)));
 };
 
 var styles$w = {"accordion":"_058SP"};
@@ -10210,19 +10273,19 @@ const ActionListItem = ({
 }) => {
   const 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;
   };
@@ -10265,14 +10328,14 @@ const ActionListItem = ({
     flexWrap: "wrap",
     ml: 30
   }, suffix && React__default.createElement(Text, {
-    color: _disabled ? 'grey-300' : 'grey-400'
+    color: _disabled ? 'surface-on-color-disabled' : 'surface-on-color-subtle'
   }, suffix), actions && React__default.createElement(ActionListItemActions, {
     actions: actions,
     disabled: _disabled
   })), onAction && React__default.createElement("div", {
     className: classnames(style['action-list-item__chevron-icon'])
   }, React__default.createElement(IconChevronRight, {
-    color: _disabled ? 'grey-300' : 'grey-400'
+    color: _disabled ? 'surface-on-color-disabled' : 'surface-on-color-subtle'
   })))));
 };
 
@@ -10469,8 +10532,8 @@ const getSelectStyles = ({
     },
     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',
@@ -10822,7 +10885,7 @@ const DateFilterText = ({
         space: 12
       }, React__default.createElement("span", null, getDateString(weekRange.start, mode)), React__default.createElement(IconArrowRight, {
         size: "small",
-        color: "grey-400"
+        color: "surface-on-color-subtle"
       }), React__default.createElement("span", null, getDateString(weekRange.end, mode)));
     default:
       return React__default.createElement("span", null, getDateString(selectedDate, mode));
@@ -10850,7 +10913,7 @@ const DateFilterDisplay = forwardRef(({
     className: classnames(styles$q['date-filter-display__display-icon'])
   }, React__default.createElement(IconCalendarAlt, {
     size: "flexible",
-    color: "grey-400"
+    color: "surface-on-color-subtle"
   })), React__default.createElement(DateFilterText, {
     mode: mode,
     selectedDate: selectedDate,
@@ -10923,7 +10986,7 @@ const DateFilter = ({
     onChange: handleChange
   }, React__default.createElement(IconChevronLeft, {
     size: "small",
-    color: "grey-400"
+    color: "surface-on-color-subtle"
   })), React__default.createElement(DateFilterDisplay, {
     mode: _mode,
     weekStart: _weekStart,
@@ -10937,7 +11000,7 @@ const DateFilter = ({
     onChange: handleChange
   }, React__default.createElement(IconChevronRight, {
     size: "small",
-    color: "grey-400"
+    color: "surface-on-color-subtle"
   }))), calendarOpen && _mode !== DATE_FILTER_MODE.MONTH && React__default.createElement(Calendar, {
     onSelect: handleChange,
     selected: value,
@@ -11374,7 +11437,7 @@ const CreatableOption = ({
     className: styles$i['pill-select-field__creating-custom-input']
   }, !newOptionLabel && React__default.createElement(Text, {
     as: "body",
-    color: "grey-300"
+    color: "surface-on-color-disabled"
   }, __('enterOption')), !!newOptionLabel && newOptionLabel)));
 };
 
@@ -11759,7 +11822,7 @@ const PasswordCriteria = ({
     space: met ? 4 : 8
   }, met ? React__default.createElement(IconCheck, {
     size: "small",
-    color: "grey-200"
+    color: "surface-on-color-disabled"
   }) : '\u25CF', React__default.createElement("span", null, children)));
 };
 
@@ -11853,9 +11916,9 @@ const PasswordField = ({
     tabIndex: 0,
     role: "button"
   }, type === 'password' ? React__default.createElement(IconEyeSlash, {
-    color: "grey-400"
+    color: "surface-on-color-subtle"
   }) : React__default.createElement(IconEye, {
-    color: "grey-400"
+    color: "surface-on-color-subtle"
   }))));
 };
 
@@ -12517,7 +12580,7 @@ const DateRangeField = ({
     "data-testid": testId
   }, React__default.createElement(IconCalendarAlt, {
     size: "medium",
-    color: "grey-400"
+    color: "surface-on-color-subtle"
   }), React__default.createElement(FromDate, {
     name: name,
     id: controllers.id,
@@ -12541,7 +12604,7 @@ const DateRangeField = ({
     testId: testId
   }), React__default.createElement(IconArrowRight, {
     size: "medium",
-    color: "grey-400"
+    color: "surface-on-color"
   }), React__default.createElement(ToDate, {
     name: name,
     format: _format,
@@ -12858,7 +12921,7 @@ const TimeRangeEnd = ({
     interval: interval,
     prefix: React__default.createElement(IconArrowRight, {
       size: "medium",
-      color: "grey-400"
+      color: "surface-on-color-subtle"
     }),
     duration: duration,
     endField: true,
@@ -14120,7 +14183,7 @@ const CountrySelector = ({
     }, React__default.createElement("span", {
       className: classnames(flagIcons['fi'], flagIcons[`fi-${country.toLocaleLowerCase()}`], styles$7['country-selector__trigger-flag'])
     }), React__default.createElement(IconChevronDown, {
-      color: "grey-400",
+      color: "surface-on-color-subtle",
       size: "medium"
     }))),
     maxHeight: 300,
@@ -14533,7 +14596,7 @@ const EmptyStateContainerInline = ({
     space: 8
   }, header && React__default.createElement(Text, {
     as: "h4",
-    color: _isPaywall ? 'eggplant-500' : 'blackberry-400'
+    color: _isPaywall ? 'upsell-color' : 'primary-color'
   }, header), React__default.createElement(Text, {
     as: "h1"
   }, title)), React__default.createElement("div", {