@7shifts/sous-chef 2.15.7 → 2.15.9

package/dist/foundation/colors.d.ts

@@ -6,44 +6,38 @@ export declare const TANGERINE300: '#fcab91';
 export declare const TANGERINE400: '#fb7448';
 export declare const TANGERINE500: '#e16840';
 export declare const TANGERINE600: '#96452b';
-export declare const TANGERINE700: '#4a2215';
 export declare const EGGPLANT100: '#f0f3fb';
 export declare const EGGPLANT200: '#d3dbf4';
 export declare const EGGPLANT300: '#a7b7ea';
 export declare const EGGPLANT400: '#6d87dd';
 export declare const EGGPLANT500: '#6179c6';
 export declare const EGGPLANT600: '#415184';
-export declare const EGGPLANT700: '#32295c';
 export declare const MINT100: '#ecfaf8';
 export declare const MINT200: '#c6f1eb';
 export declare const MINT300: '#8de4d7';
 export declare const MINT400: '#3abda9';
 export declare const MINT500: '#35ac9a';
 export declare const MINT600: '#277e71';
-export declare const MINT700: '#133e38';
 export declare const RADISH100: '#fcf0f0';
 export declare const RADISH200: '#f7d1d1';
 export declare const RADISH300: '#f0a3a3';
 export declare const RADISH400: '#e76767';
 export declare const RADISH500: '#cf5c5c';
 export declare const RADISH600: '#8a3d3d';
-export declare const RADISH700: '#441e1e';
 export declare const BLUEBERRY100: '#f6fdff';
 export declare const BLUEBERRY200: '#ceecf5';
 export declare const BLUEBERRY300: '#9cd9eb';
 export declare const BLUEBERRY400: '#5bc0de';
 export declare const BLUEBERRY500: '#51acc7';
 export declare const BLUEBERRY600: '#367385';
-export declare const BLUEBERRY700: '#1b3942';
 export declare const BANANA100: '#fff9ed';
 export declare const BANANA200: '#ffeec9';
 export declare const BANANA300: '#ffdd92';
 export declare const BANANA400: '#ffc74a';
 export declare const BANANA500: '#e5b242';
 export declare const BANANA600: '#99772c';
-export declare const BANANA700: '#4c3b16';
 export declare const GREY100: '#F3F3F3';
-export declare const GREY200: '#C8C8C8';
+export declare const GREY200: '#D5D5D5';
 export declare const GREY300: '#949494';
 export declare const GREY400: '#767676';
 export declare const GREY500: '#464646';
@@ -56,4 +50,4 @@ export declare const COLORS: {
     BLUEBERRY: string;
     BANANA: string;
 };
-export declare type Color = typeof WHITE | typeof BLACK | typeof TANGERINE100 | typeof TANGERINE200 | typeof TANGERINE300 | typeof TANGERINE400 | typeof TANGERINE500 | typeof TANGERINE600 | typeof TANGERINE700 | typeof EGGPLANT100 | typeof EGGPLANT200 | typeof EGGPLANT300 | typeof EGGPLANT400 | typeof EGGPLANT500 | typeof EGGPLANT600 | typeof EGGPLANT700 | typeof MINT100 | typeof MINT200 | typeof MINT300 | typeof MINT400 | typeof MINT500 | typeof MINT600 | typeof MINT700 | typeof RADISH100 | typeof RADISH200 | typeof RADISH300 | typeof RADISH400 | typeof RADISH500 | typeof RADISH600 | typeof RADISH700 | typeof BLUEBERRY100 | typeof BLUEBERRY200 | typeof BLUEBERRY300 | typeof BLUEBERRY400 | typeof BLUEBERRY500 | typeof BLUEBERRY600 | typeof BLUEBERRY700 | typeof BANANA100 | typeof BANANA200 | typeof BANANA300 | typeof BANANA400 | typeof BANANA500 | typeof BANANA600 | typeof BANANA700 | typeof GREY100 | typeof GREY200 | typeof GREY300 | typeof GREY400 | typeof GREY500 | typeof GREY600;
+export declare type Color = typeof WHITE | typeof BLACK | typeof TANGERINE100 | typeof TANGERINE200 | typeof TANGERINE300 | typeof TANGERINE400 | typeof TANGERINE500 | typeof TANGERINE600 | typeof EGGPLANT100 | typeof EGGPLANT200 | typeof EGGPLANT300 | typeof EGGPLANT400 | typeof EGGPLANT500 | typeof EGGPLANT600 | typeof MINT100 | typeof MINT200 | typeof MINT300 | typeof MINT400 | typeof MINT500 | typeof MINT600 | typeof RADISH100 | typeof RADISH200 | typeof RADISH300 | typeof RADISH400 | typeof RADISH500 | typeof RADISH600 | typeof BLUEBERRY100 | typeof BLUEBERRY200 | typeof BLUEBERRY300 | typeof BLUEBERRY400 | typeof BLUEBERRY500 | typeof BLUEBERRY600 | typeof BANANA100 | typeof BANANA200 | typeof BANANA300 | typeof BANANA400 | typeof BANANA500 | typeof BANANA600 | typeof GREY100 | typeof GREY200 | typeof GREY300 | typeof GREY400 | typeof GREY500 | typeof GREY600;

package/dist/index.css

@@ -340,22 +340,22 @@ Please ask a designer if you have questions about which colours to use.
 
 ._3OB2g {
   background: #F3F3F3;
-  border-color: #C8C8C8;
+  border-color: #D5D5D5;
   color: #464646;
 }
 ._3OB2g:hover {
-  background: #C8C8C8;
+  background: #D5D5D5;
   border-color: #949494;
   color: #323232;
 }
 ._3OB2g:disabled {
   background: #F3F3F3;
-  border-color: #C8C8C8;
+  border-color: #D5D5D5;
   color: #949494;
 }
 ._3OB2g[aria-disabled=true] {
   background: #F3F3F3;
-  border-color: #C8C8C8;
+  border-color: #D5D5D5;
   color: #949494;
 }
 
@@ -445,7 +445,7 @@ Please ask a designer if you have questions about which colours to use.
 
 ._3BrS0 {
   background: transparent;
-  border-color: #C8C8C8;
+  border-color: #D5D5D5;
   color: #464646;
 }
 ._3BrS0:hover {
@@ -455,12 +455,12 @@ Please ask a designer if you have questions about which colours to use.
 }
 ._3BrS0:disabled {
   background: transparent;
-  border-color: #C8C8C8;
+  border-color: #D5D5D5;
   color: #949494;
 }
 ._3BrS0[aria-disabled=true] {
   background: transparent;
-  border-color: #C8C8C8;
+  border-color: #D5D5D5;
   color: #949494;
 }
 
@@ -604,7 +604,7 @@ Please ask a designer if you have questions about which colours to use.
   display: flex;
   padding: 16px;
   border: 1px solid #fff;
-  border-bottom: 1px solid #C8C8C8;
+  border-bottom: 1px solid #D5D5D5;
 }
 ._3DlpO:last-child:not(._NS-B9) {
   border-bottom: 1px solid #fff;
@@ -704,7 +704,7 @@ Please ask a designer if you have questions about which colours to use.
 }
 
 ._2ygIH {
-  border: 1px solid #C8C8C8;
+  border: 1px solid #D5D5D5;
   border-radius: 8px;
   font-family: "Proxima Nova", sans-serif;
   font-size: 14px;
@@ -726,7 +726,7 @@ The base colour is the default colour and is numbered with 400. If someone says
 Please ask a designer if you have questions about which colours to use.
 */
 ._1IynL button:disabled {
-  border-color: #C8C8C8;
+  border-color: #D5D5D5;
 }
 ._1IynL button:last-child {
   border-radius: 0 4px 4px 0;
@@ -754,7 +754,7 @@ Please ask a designer if you have questions about which colours to use.
   display: flex;
 }
 ._1d8Ci:not(:last-child):not(._3tb7U) {
-  border-bottom: 1px solid #C8C8C8;
+  border-bottom: 1px solid #D5D5D5;
 }
 
 ._1d8Ci:focus:not(:focus-visible) {
@@ -806,7 +806,7 @@ Please ask a designer if you have questions about which colours to use.
   justify-content: flex-end;
 }
 ._1rrRr:not(:last-child) {
-  border-right: 1px solid #C8C8C8;
+  border-right: 1px solid #D5D5D5;
 }
 
 ._azbIG {
@@ -929,7 +929,7 @@ Just for future references:
 ._3tNyE::before {
   content: "";
   display: block;
-  background: #C8C8C8;
+  background: #D5D5D5;
   transition: all ease-in-out 150ms;
   box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.03);
   border-radius: 26px;
@@ -945,7 +945,7 @@ Just for future references:
   right: 21px;
   top: 2px;
   background: #fff;
-  border: 1px solid #C8C8C8;
+  border: 1px solid #D5D5D5;
   border-radius: 24px;
   height: 14px;
   width: 14px;
@@ -1033,7 +1033,7 @@ Please ask a designer if you have questions about which colours to use.
 }
 
 ._1bTmd {
-  border: 1px solid #C8C8C8;
+  border: 1px solid #D5D5D5;
   border-radius: 8px;
   font-family: "Proxima Nova", sans-serif;
   font-size: 14px;
@@ -1112,7 +1112,7 @@ Please ask a designer if you have questions about which colours to use.
 
 ._wQQ_2 {
   position: initial;
-  border: 1px solid #C8C8C8;
+  border: 1px solid #D5D5D5;
   background: #fff;
   overflow: auto;
   outline: none;
@@ -1411,7 +1411,7 @@ Please ask a designer if you have questions about which colours to use.
 }
 
 ._3vJkw {
-  color: #C8C8C8;
+  color: #D5D5D5;
   cursor: default;
 }
 
@@ -1436,7 +1436,7 @@ Please ask a designer if you have questions about which colours to use.
   display: table-cell;
   padding: 0.5em;
   min-width: 1em;
-  border-right: 1px solid #C8C8C8;
+  border-right: 1px solid #D5D5D5;
   color: #949494;
   vertical-align: middle;
   text-align: right;
@@ -1629,7 +1629,7 @@ Please ask a designer if you have questions about which colours to use.
 }
 
 ._1M4ZF {
-  color: #C8C8C8;
+  color: #D5D5D5;
   cursor: default;
 }
 
@@ -1654,7 +1654,7 @@ Please ask a designer if you have questions about which colours to use.
   display: table-cell;
   padding: 0.5em;
   min-width: 1em;
-  border-right: 1px solid #C8C8C8;
+  border-right: 1px solid #D5D5D5;
   color: #949494;
   vertical-align: middle;
   text-align: right;
@@ -1922,7 +1922,7 @@ Please ask a designer if you have questions about which colours to use.
   border-radius: 4px;
   padding: 7px;
   box-shadow: none;
-  border: 1px solid #C8C8C8;
+  border: 1px solid #D5D5D5;
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -1979,7 +1979,7 @@ Please ask a designer if you have questions about which colours to use.
   font-family: "Proxima Nova", sans-serif;
   color: #464646;
   box-shadow: none;
-  border: 1px solid #C8C8C8;
+  border: 1px solid #D5D5D5;
   margin: 0;
   flex: 1;
   min-width: 90px;
@@ -2044,8 +2044,8 @@ Please ask a designer if you have questions about which colours to use.
   width: 14px;
   background-color: transparent;
   border-radius: 4px;
-  border: 1px solid #C8C8C8;
-  box-shadow: inset 0 1px 4px -2px #C8C8C8;
+  border: 1px solid #D5D5D5;
+  box-shadow: inset 0 1px 4px -2px #D5D5D5;
 }
 ._2mA8e::after {
   position: absolute;
@@ -2076,7 +2076,7 @@ input:focus-visible + ._2mA8e {
 }
 input:disabled + ._2mA8e {
   background-color: #F3F3F3;
-  border: 1px solid #C8C8C8;
+  border: 1px solid #D5D5D5;
 }
 input:disabled + ._2mA8e::after {
   box-shadow: none;
@@ -2117,7 +2117,7 @@ Please ask a designer if you have questions about which colours to use.
   font-size: 14px;
   font-weight: 600;
   padding: 8px;
-  border: 1px solid #C8C8C8;
+  border: 1px solid #D5D5D5;
   border-radius: 25px;
   min-height: 38px;
   min-width: 60px;
@@ -2133,8 +2133,8 @@ Please ask a designer if you have questions about which colours to use.
   box-sizing: border-box;
 }
 input:hover ~ ._1i2AX {
-  background-color: #C8C8C8;
-  border-color: #C8C8C8;
+  background-color: #D5D5D5;
+  border-color: #D5D5D5;
 }
 input:checked:hover ~ ._1i2AX {
   background-color: #e16840;
@@ -2234,8 +2234,8 @@ Please ask a designer if you have questions about which colours to use.
   width: 14px;
   background-color: transparent;
   border-radius: 50%;
-  border: 1px solid #C8C8C8;
-  box-shadow: inset 0 1px 4px -2px #C8C8C8;
+  border: 1px solid #D5D5D5;
+  box-shadow: inset 0 1px 4px -2px #D5D5D5;
 }
 ._1tMq-::after {
   position: absolute;
@@ -2264,7 +2264,7 @@ input:focus-visible + ._1tMq- {
 }
 input:disabled + ._1tMq- {
   background-color: #F3F3F3;
-  border: 1px solid #C8C8C8;
+  border: 1px solid #D5D5D5;
 }
 input:disabled + ._1tMq-::after {
   box-shadow: none;
@@ -2293,7 +2293,7 @@ Please ask a designer if you have questions about which colours to use.
   font-family: "Proxima Nova", sans-serif;
   color: #464646;
   box-shadow: none;
-  border: 1px solid #C8C8C8;
+  border: 1px solid #D5D5D5;
   margin: 0;
   flex: 1;
   min-width: 90px;
@@ -2349,7 +2349,7 @@ The base colour is the default colour and is numbered with 400. If someone says
 Please ask a designer if you have questions about which colours to use.
 */
 ._U0krC {
-  color: #C8C8C8;
+  color: #D5D5D5;
   font-family: "Proxima Nova", sans-serif;
 }
 
@@ -2401,7 +2401,7 @@ Please ask a designer if you have questions about which colours to use.
   font-family: "Proxima Nova", sans-serif;
   color: #464646;
   box-shadow: none;
-  border: 1px solid #C8C8C8;
+  border: 1px solid #D5D5D5;
   margin: 0;
   flex: 1;
   min-width: 90px;
@@ -2624,7 +2624,7 @@ Please ask a designer if you have questions about which colours to use.
 }
 
 ._2pgnH {
-  color: #C8C8C8;
+  color: #D5D5D5;
   cursor: default;
 }
 
@@ -2649,7 +2649,7 @@ Please ask a designer if you have questions about which colours to use.
   display: table-cell;
   padding: 0.5em;
   min-width: 1em;
-  border-right: 1px solid #C8C8C8;
+  border-right: 1px solid #D5D5D5;
   color: #949494;
   vertical-align: middle;
   text-align: right;
@@ -2676,7 +2676,7 @@ Please ask a designer if you have questions about which colours to use.
   font-family: "Proxima Nova", sans-serif;
   color: #464646;
   box-shadow: none;
-  border: 1px solid #C8C8C8;
+  border: 1px solid #D5D5D5;
   margin: 0;
   flex: 1;
   min-width: 90px;

package/dist/index.js

@@ -3116,10 +3116,10 @@ var WHITE = '#ffffff';
 var EGGPLANT200 = '#d3dbf4';
 var EGGPLANT300 = '#a7b7ea';
 var EGGPLANT400 = '#6d87dd';
-var EGGPLANT700 = '#32295c';
+var EGGPLANT600 = '#415184';
 var RADISH400 = '#e76767';
 var GREY100 = '#F3F3F3';
-var GREY200 = '#C8C8C8';
+var GREY200 = '#D5D5D5';
 var GREY300 = '#949494';
 var GREY400 = '#767676';
 var GREY500 = '#464646';
@@ -4187,6 +4187,8 @@ var useLabelTooltip = function useLabelTooltip(labelId, tooltipContent) {
       setShowTooltip = _useState[1];
 
   var shouldTruncate = typeof tooltipContent === 'string';
+  var labelElement = document.getElementById(labelId);
+  var isHidden = labelElement && labelElement.offsetParent === null;
   var handleApplyTooltip = React.useCallback(function () {
     if (!shouldTruncate) {
       return;
@@ -4199,8 +4201,11 @@ var useLabelTooltip = function useLabelTooltip(labelId, tooltipContent) {
     }
 
     var shouldShowTooltip = isEllipsisActive(labelElement);
-    setShowTooltip(shouldShowTooltip);
-  }, [shouldTruncate]);
+
+    if (showTooltip !== shouldShowTooltip) {
+      setShowTooltip(shouldShowTooltip);
+    }
+  }, [shouldTruncate, isHidden]);
   React.useEffect(function () {
     var onWindowResize = lodashEs.debounce(handleApplyTooltip, 300);
     window.addEventListener('resize', onWindowResize);
@@ -4300,6 +4305,7 @@ var AffixContainer = function AffixContainer(_ref) {
   var container = React.useRef(null);
   var prefixElement = React.useRef(null);
   var suffixElement = React.useRef(null);
+  var isHidden = container.current && container.current.offsetParent === null;
   React.useLayoutEffect(function () {
     if (container.current) {
       var input = container.current.querySelector('input, [class$=control] > div');
@@ -4318,7 +4324,7 @@ var AffixContainer = function AffixContainer(_ref) {
         }
       }
     }
-  }, [prefix, suffix]);
+  }, [prefix, suffix, isHidden]);
   var hasPrefix = !!prefix;
   var hasSuffix = !!suffix;
 
@@ -5438,7 +5444,7 @@ var getSelectStyles$1 = function getSelectStyles(_ref) {
     option: function option(base, state) {
       return Object.assign({}, base, {
         backgroundColor: state.isDisabled ? null : state.isSelected ? EGGPLANT200 : state.isFocused ? GREY100 : WHITE,
-        color: state.isDisabled ? GREY400 : state.isSelected ? EGGPLANT700 : GREY500,
+        color: state.isDisabled ? GREY400 : state.isSelected ? EGGPLANT600 : GREY500,
         cursor: 'pointer',
         fontFamily: FONT_FAMILY,
         fontSize: '14px',