@7shifts/sous-chef 3.44.17 → 3.45.1

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import './foundation/tokens/typography/_typography-tokens.scss';
 import './foundation/tokens/color/_color-tokens.scss';
+import './foundation/tokens/border-radius/_border-radius.scss';
 import './foundation/tokens/zindex/_z-index-tokens.scss';
 import './foundation/_initital-setup.scss';
 export * from './foundation/tokens/color/color-constants';

package/dist/index.js

@@ -5834,7 +5834,7 @@ var LINK_TARGET = {
   BLANK: '_blank'
 };
 
-var styles$8 = {"link--primary":"_1mKoj","link--contrast":"_HUvH1"};
+var styles$8 = {"link":"_36SZq"};
 
 var _excluded$2q = ["href", "target", "theme", "onClick", "children"];
 var Link = function Link(_ref) {
@@ -6002,18 +6002,28 @@ var useModalContext = function useModalContext() {
   return context || {};
 };
 
+var AccordionContext = React.createContext({
+  isAccordionMounted: false
+});
+var useAccordionContext = function useAccordionContext() {
+  var context = React.useContext(AccordionContext);
+  return context || {};
+};
+
 var useBackgroundColor = function useBackgroundColor() {
   var _useModalContext = useModalContext(),
     isInsideModal = _useModalContext.isModalMounted;
+  var _useAccordionContext = useAccordionContext(),
+    isInsideAccordion = _useAccordionContext.isAccordionMounted;
   var _useState = React.useState(COLORS.white),
     backgroundColor = _useState[0],
     setBackgroundColor = _useState[1];
   React.useLayoutEffect(function () {
-    if (!isInsideModal) {
+    if (!isInsideModal && !isInsideAccordion) {
       var bodyStyles = window.getComputedStyle(document.body);
       setBackgroundColor(bodyStyles.getPropertyValue('background-color'));
     }
-  }, [isInsideModal]);
+  }, [isInsideModal, isInsideAccordion]);
   return backgroundColor;
 };
 
@@ -7122,7 +7132,7 @@ var ALIGNMENTS = {
 
 var styles$p = {"text":"_32amZ","text__body":"_ayJRy","text__caption":"_3g1gi","text__insight":"_20Phg","text--bold":"_A0AyZ","text--italic":"_3jayQ","text--underline":"_GOcFw","text--monospace":"_3TfGK","text--align-left":"_b8gto","text--align-right":"_ecyH1","text--align-center":"_xBgXc","text--align-justify":"_280D5"};
 
-var _excluded$2v = ["children", "as", "emphasis", "alignment", "color", "testId"];
+var _excluded$2v = ["children", "as", "emphasis", "alignment", "color", "testId", "textWrap"];
 var Text = function Text(_ref) {
   var _classnames;
   var children = _ref.children,
@@ -7132,11 +7142,13 @@ var Text = function Text(_ref) {
     alignment = _ref.alignment,
     color = _ref.color,
     testId = _ref.testId,
+    textWrap = _ref.textWrap,
     positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$2v);
   var positionStyles = usePositionStyles(positionProps);
   var elementProps = {
     style: _extends({
-      color: getColor(color)
+      color: getColor(color),
+      textWrap: textWrap
     }, positionStyles),
     className: classnames(styles$p['text'], (_classnames = {}, _classnames[styles$p['text--bold']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD), _classnames[styles$p['text--italic']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC), _classnames[styles$p['text--underline']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE), _classnames[styles$p['text--monospace']] = emphasis === null || emphasis === void 0 ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE), _classnames[styles$p['text--align-left']] = alignment === ALIGNMENTS.LEFT, _classnames[styles$p['text--align-right']] = alignment === ALIGNMENTS.RIGHT, _classnames[styles$p['text--align-center']] = alignment === ALIGNMENTS.CENTER, _classnames[styles$p['text--align-justify']] = alignment === ALIGNMENTS.JUSTIFY, _classnames[styles$p['text__body']] = as === TEXT_TYPES.BODY, _classnames[styles$p['text__insight']] = as === TEXT_TYPES.INSIGHT, _classnames[styles$p['text__caption']] = as === TEXT_TYPES.CAPTION, _classnames)),
     'data-testid': testId
@@ -7203,15 +7215,20 @@ var DropdownListItem = function DropdownListItem(_ref) {
   };
   var childrenContainer = React__default.createElement("div", {
     className: styles$o['dropdown-list-item__container']
-  }, prefix, React__default.createElement("div", {
+  }, prefix && React__default.createElement("div", {
+    className: styles$o['dropdown-list-item__prefix']
+  }, prefix), React__default.createElement("div", {
     className: styles$o['dropdown-list-item__content']
   }, React__default.createElement(Stack, {
     space: 4,
     flex: [1]
   }, children, caption && React__default.createElement(Text, {
     as: "caption",
-    color: getCaptionColor()
-  }, caption))), suffix);
+    color: getCaptionColor(),
+    textWrap: "wrap"
+  }, caption))), suffix && React__default.createElement("div", {
+    className: styles$o['dropdown-list-item__suffix']
+  }, suffix));
   var linkItem = href && (reloadDocument ? React__default.createElement("a", {
     href: href,
     className: styles$o['dropdown-list-item__link'],
@@ -7403,7 +7420,7 @@ var CalloutCard = function CalloutCard(_ref) {
     className: styles$r['callout-card__header']
   }, React__default.createElement(Text, {
     as: "body",
-    color: "tangerine-400"
+    color: "blackberry-400"
   }, header)), React__default.createElement(Text, {
     as: "h2"
   }, title), React__default.createElement(Text, {
@@ -9103,7 +9120,11 @@ var Accordion = function Accordion(props) {
   if (items.length < 1) {
     return null;
   }
-  return React__default.createElement("div", {
+  return React__default.createElement(AccordionContext.Provider, {
+    value: {
+      isAccordionMounted: true
+    }
+  }, React__default.createElement("div", {
     className: styles$Q['accordion']
   }, items.map(function (item, index) {
     var id = item.id || index.toString();
@@ -9115,7 +9136,7 @@ var Accordion = function Accordion(props) {
       isOpen: id == activeId,
       handleAccordionItemOpen: handleAccordionItemOpen
     });
-  }));
+  })));
 };
 
 var useSelectFieldControllers = function useSelectFieldControllers(_ref) {
@@ -9248,16 +9269,16 @@ var getSelectStyles = function getSelectStyles(_ref) {
         flex: '1',
         fontFamily: FONT_FAMILY,
         minWidth: '110px',
-        position: 'initial',
-        borderRadius: '4px'
+        position: 'initial'
       });
     },
     control: function control(base, state) {
       return Object.assign({}, base, {
         backgroundColor: state.isDisabled ? COLORS['grey-100'] : COLORS['white'],
-        borderColor: state.isFocused ? COLORS['eggplant-400'] : borderColor,
+        borderColor: state.isFocused ? COLORS['blackberry-400'] : borderColor,
         color: state.isDisabled ? COLORS['grey-400'] : COLORS['grey-500'],
-        boxShadow: state.isFocused ? "0 0 8px " + COLORS['eggplant-300'] : 'none',
+        borderRadius: 'var(--border-radius-400)',
+        boxShadow: state.isFocused ? "0 0 8px " + COLORS['blackberry-300'] : 'none',
         '&:hover': 'none',
         fontSize: '14px',
         cursor: 'pointer',
@@ -9354,6 +9375,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     menu: function menu(base) {
       return _extends({}, base, {
+        borderRadius: 0,
         zIndex: getZIndex('dropdown')
       });
     },
@@ -13086,7 +13108,7 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
     space: 8
   }, header && React__default.createElement(Text, {
     as: "h4",
-    color: isPaywall ? 'eggplant-500' : 'tangerine-400'
+    color: isPaywall ? 'eggplant-500' : 'blackberry-400'
   }, header), React__default.createElement(Text, {
     as: "h1"
   }, title)), React__default.createElement("div", {