@7shifts/sous-chef 3.44.17 → 3.45.0

package/dist/index.css

@@ -163,6 +163,11 @@
   --color-blackberry-600: #193f78;
   --color-blackberry-600-rgb: 25, 63, 120;
 }
+:root {
+  --border-radius-300: 4px;
+  --border-radius-400: 8px;
+  --border-radius-600: 20px;
+}
 :root {
   --z-index-base: 1;
   --z-index-nav: 7;
@@ -488,7 +493,7 @@ Just for future references:
   font-weight: var(--p-font-weight-bold);
   text-align: center;
   padding: 9px 12px;
-  border-radius: 4px;
+  border-radius: var(--border-radius-400);
   border-width: 1px;
   min-width: 38px;
   min-height: 38px;
@@ -831,11 +836,11 @@ Just for future references:
   border-color: var(--color-grey-200);
 }
 ._SMSPF button:last-child {
-  border-radius: 0 4px 4px 0;
+  border-radius: 0 var(--border-radius-400) var(--border-radius-400) 0;
   margin-left: -1px;
 }
 ._SMSPF button:first-child {
-  border-radius: 4px 0 0 4px;
+  border-radius: var(--border-radius-400) 0 0 var(--border-radius-400);
 }
 ._SMSPF button:not(:first-child):not(:last-child) {
   border-radius: 0;
@@ -892,7 +897,7 @@ Just for future references:
   font-weight: var(--p-font-weight-normal);
   background: var(--color-grey-500);
   color: var(--color-white);
-  border-radius: 4px;
+  border-radius: var(--border-radius-400);
   min-height: auto;
 }
 ._38KEH._1qUTA {
@@ -989,19 +994,19 @@ Just for future references:
   line-height: var(--font-line-height-200);
   font-weight: var(--p-font-weight-normal);
   border: 1px solid var(--color-grey-200);
-  border-radius: 8px;
+  border-radius: var(--border-radius-600);
 }
 ._1YYyL tr:first-of-type > td:first-of-type {
-  border-top-left-radius: 8px;
+  border-top-left-radius: var(--border-radius-600);
 }
 ._1YYyL tr:first-of-type > td:last-of-type {
-  border-top-right-radius: 8px;
+  border-top-right-radius: var(--border-radius-600);
 }
 ._1YYyL tr:last-of-type > td:first-of-type {
-  border-bottom-left-radius: 8px;
+  border-bottom-left-radius: var(--border-radius-600);
 }
 ._1YYyL tr:last-of-type > td:last-of-type {
-  border-bottom-right-radius: 8px;
+  border-bottom-right-radius: var(--border-radius-600);
 }
 ._2atob tr:last-of-type > td:first-of-type {
   border-bottom-left-radius: 0;
@@ -1029,10 +1034,10 @@ Just for future references:
   border-top: 0;
 }
 ._ASPHe tr:last-of-type td:first-of-type {
-  border-bottom-left-radius: 8px;
+  border-bottom-left-radius: var(--border-radius-600);
 }
 ._ASPHe tr:last-of-type td:last-of-type {
-  border-bottom-right-radius: 8px;
+  border-bottom-right-radius: var(--border-radius-600);
 }
 ._1ahC- {
   margin-top: 20px;
@@ -1049,18 +1054,18 @@ Just for future references:
 ._1oK6H {
   top: 24px;
   border-bottom: 0;
-  border-top-right-radius: 8px;
-  border-top-left-radius: 8px;
+  border-top-right-radius: var(--border-radius-600);
+  border-top-left-radius: var(--border-radius-600);
 }
 ._2hHXC {
   bottom: 0;
   border-top: 0;
-  border-bottom-right-radius: 8px;
-  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: var(--border-radius-600);
+  border-bottom-left-radius: var(--border-radius-600);
 }
 ._2_e_e {
-  width: 8px;
-  height: 8px;
+  width: var(--border-radius-600);
+  height: var(--border-radius-600);
   overflow: hidden;
   position: absolute;
   left: -1px;
@@ -1089,8 +1094,8 @@ Just for future references:
   box-shadow: -6px 6px 0 0 white;
 }
 ._1Oi6E {
-  width: 8px;
-  height: 8px;
+  width: var(--border-radius-600);
+  height: var(--border-radius-600);
   overflow: hidden;
   position: absolute;
   right: -1px;
@@ -1123,7 +1128,7 @@ Just for future references:
   background: var(--color-grey-100);
   margin: 1px;
   position: relative;
-  border-radius: 3px;
+  border-radius: var(--border-radius-600);
   box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15);
 }
 
@@ -1287,7 +1292,7 @@ Just for future references:
   font-weight: var(--p-font-weight-normal);
   line-height: 22px;
   padding: 7px;
-  border-radius: 4px;
+  border-radius: var(--border-radius-400);
   color: var(--color-grey-500);
   box-shadow: none;
   border: 1px solid var(--color-grey-200);
@@ -1605,7 +1610,7 @@ h5._32amZ {
   font-weight: var(--p-font-weight-normal);
   display: flex;
   gap: 8px;
-  border-radius: 4px;
+  border-radius: var(--border-radius-400);
   text-decoration: none;
   color: var(--color-grey-500);
   padding: 8px;
@@ -1723,7 +1728,7 @@ h5._32amZ {
   min-height: 38px;
   min-width: 38px;
   width: 72px;
-  border-radius: 4px;
+  border-radius: var(--border-radius-400);
 }
 ._Loib4 {
   min-height: 28px;
@@ -2322,19 +2327,19 @@ input:disabled + ._2W10t::after {
 }
 
 ._3YcR8._3YcR8 {
-  border-top-left-radius: 8px;
+  border-top-left-radius: var(--border-radius-600);
 }
 
 ._1nh6A._1nh6A {
-  border-top-right-radius: 8px;
+  border-top-right-radius: var(--border-radius-600);
 }
 
 ._hRUEo._hRUEo {
-  border-bottom-left-radius: 8px;
+  border-bottom-left-radius: var(--border-radius-600);
 }
 
 ._1AIOz._1AIOz {
-  border-bottom-right-radius: 8px;
+  border-bottom-right-radius: var(--border-radius-600);
 }
 @keyframes _2QIwh {
   from {
@@ -2387,7 +2392,7 @@ input:disabled + ._2W10t::after {
 }
 ._24Yjb table tbody tr:first-of-type > td:first-of-type::after {
   content: "";
-  width: 6px;
+  width: 16px;
   height: 1px;
   position: absolute;
   background: var(--color-white);
@@ -2430,7 +2435,7 @@ input:disabled + ._2W10t::after {
 }
 ._2pehG table tbody tr:first-of-type > td:last-of-type::after {
   content: "";
-  width: 6px;
+  width: 16px;
   height: 1px;
   position: absolute;
   background: var(--color-white);
@@ -2440,7 +2445,7 @@ input:disabled + ._2W10t::after {
 }
 ._2pehG:not(._3NVYV) table tbody tr:last-of-type > td:last-of-type::after {
   content: "";
-  width: 6px;
+  width: 16px;
   height: 1px;
   position: absolute;
   background: var(--color-white);
@@ -2450,7 +2455,7 @@ input:disabled + ._2W10t::after {
 }
 ._24Yjb:not(._3NVYV) table tbody tr:last-of-type > td:first-of-type::after {
   content: "";
-  width: 6px;
+  width: 16px;
   height: 1px;
   position: absolute;
   background: var(--color-white);
@@ -2460,7 +2465,7 @@ input:disabled + ._2W10t::after {
 }
 ._3NVYV._2pehG table tfoot tr:last-of-type > td:last-of-type::after {
   content: "";
-  width: 6px;
+  width: 16px;
   height: 1px;
   position: absolute;
   background: var(--color-white);
@@ -2470,7 +2475,7 @@ input:disabled + ._2W10t::after {
 }
 ._3NVYV._24Yjb table tfoot tr:last-of-type > td:first-of-type::after {
   content: "";
-  width: 6px;
+  width: 16px;
   height: 1px;
   position: absolute;
   background: var(--color-white);
@@ -2514,7 +2519,7 @@ input:disabled + ._2W10t::after {
 }
 ._332hh::after {
   content: "";
-  width: 6px;
+  width: 16px;
   height: 1px;
   position: absolute;
   background: var(--color-white);
@@ -2524,7 +2529,7 @@ input:disabled + ._2W10t::after {
 }
 ._332hh::before {
   content: "";
-  width: 6px;
+  width: 16px;
   height: 1px;
   position: absolute;
   background: var(--color-white);
@@ -2544,7 +2549,7 @@ input:disabled + ._2W10t::after {
 }
 ._22uc2::after {
   content: "";
-  width: 6px;
+  width: 16px;
   height: 1px;
   position: absolute;
   background: var(--color-white);
@@ -2554,7 +2559,7 @@ input:disabled + ._2W10t::after {
 }
 ._22uc2::before {
   content: "";
-  width: 6px;
+  width: 16px;
   height: 1px;
   position: absolute;
   background: var(--color-white);
@@ -2646,6 +2651,7 @@ input:disabled + ._2W10t::after {
 ._31JZJ {
   border: 1px solid var(--color-grey-200);
   border-radius: 20px;
+  background-color: var(--color-white);
 }
 ._1JTKu {
   flex: 1;
@@ -2718,11 +2724,11 @@ input:disabled + ._2W10t::after {
   width: 36px;
 }
 ._9_2Mg {
-  border-radius: 4px 0px 0px 4px;
+  border-radius: var(--border-radius-400) 0px 0px var(--border-radius-400);
   border-right: 0;
 }
 ._j2INh {
-  border-radius: 0px 4px 4px 0px;
+  border-radius: 0px var(--border-radius-400) var(--border-radius-400) 0px;
   border-left: 0;
 }
 ._2cjh7 {
@@ -2760,7 +2766,7 @@ input:disabled + ._2W10t::after {
   text-decoration: none;
 }
 ._9hSoW:first-child {
-  border-radius: 4px 0 0 4px;
+  border-radius: var(--border-radius-400) 0 0 var(--border-radius-400);
   border-width: 1px 0px 1px 1px;
 }
 ._9hSoW:first-child:not(._2E6yG):hover::after {
@@ -2797,7 +2803,7 @@ input:disabled + ._2W10t::after {
   left: -1px;
 }
 ._9hSoW:last-child {
-  border-radius: 0 4px 4px 0;
+  border-radius: 0 var(--border-radius-400) var(--border-radius-400) 0;
   border-width: 1px 1px 1px 0px;
 }
 ._9hSoW:last-child:not(._2E6yG):hover::before {
@@ -2848,7 +2854,7 @@ input:disabled + ._2W10t::after {
   min-width: 0;
 }
 ._eyfGn {
-  border-radius: 4px;
+  border-radius: var(--border-radius-400);
   padding: 7px;
   box-shadow: none;
   border: 1px solid var(--color-grey-200);
@@ -3156,7 +3162,7 @@ input:disabled + ._1aaPx::after {
   font-weight: var(--p-font-weight-normal);
   line-height: 22px;
   padding: 7px;
-  border-radius: 4px;
+  border-radius: var(--border-radius-400);
   color: var(--color-grey-500);
   box-shadow: none;
   border: 1px solid var(--color-grey-200);
@@ -3230,7 +3236,7 @@ input:disabled + ._1aaPx::after {
   font-weight: var(--p-font-weight-normal);
   line-height: 22px;
   padding: 7px;
-  border-radius: 4px;
+  border-radius: var(--border-radius-400);
   color: var(--color-grey-500);
   box-shadow: none;
   border: 1px solid var(--color-grey-200);
@@ -3277,7 +3283,7 @@ input:disabled + ._1aaPx::after {
   font-weight: var(--p-font-weight-normal);
   line-height: 22px;
   padding: 7px;
-  border-radius: 4px;
+  border-radius: var(--border-radius-400);
   color: var(--color-grey-500);
   box-shadow: none;
   border: 1px solid var(--color-grey-200);
@@ -3443,7 +3449,7 @@ input:disabled + ._1aaPx::after {
   font-weight: var(--p-font-weight-normal);
   line-height: 22px;
   padding: 7px;
-  border-radius: 4px;
+  border-radius: var(--border-radius-400);
   color: var(--color-grey-500);
   box-shadow: none;
   border: 1px solid var(--color-grey-200);
@@ -3551,8 +3557,8 @@ input._1zowl {
 ._3mUO5 {
   padding-left: 7px;
   padding-right: 7px;
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
+  border-top-left-radius: var(--border-radius-400);
+  border-bottom-left-radius: var(--border-radius-400);
   border: 1px solid var(--color-grey-200);
   border-right-color: transparent;
   height: 36px;
@@ -4688,7 +4694,7 @@ input._1zowl {
   line-height: var(--font-line-height-100);
   font-weight: var(--p-font-weight-normal);
   font-weight: var(--p-font-weight-bold);
-  border-radius: 2px;
+  border-radius: var(--border-radius-300);
   padding: 2px 8px;
   display: inline-block;
   text-align: center;

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

@@ -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'],
@@ -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,8 +9269,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
         flex: '1',
         fontFamily: FONT_FAMILY,
         minWidth: '110px',
-        position: 'initial',
-        borderRadius: '4px'
+        position: 'initial'
       });
     },
     control: function control(base, state) {
@@ -9257,6 +9277,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
         backgroundColor: state.isDisabled ? COLORS['grey-100'] : COLORS['white'],
         borderColor: state.isFocused ? COLORS['eggplant-400'] : borderColor,
         color: state.isDisabled ? COLORS['grey-400'] : COLORS['grey-500'],
+        borderRadius: 'var(--border-radius-400)',
         boxShadow: state.isFocused ? "0 0 8px " + COLORS['eggplant-300'] : 'none',
         '&:hover': 'none',
         fontSize: '14px',
@@ -9354,6 +9375,7 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     menu: function menu(base) {
       return _extends({}, base, {
+        borderRadius: 0,
         zIndex: getZIndex('dropdown')
       });
     },