@7shifts/sous-chef 4.10.3 → 4.11.0

package/dist/foundation/tokens/color/color-codes.d.ts

@@ -1,6 +1,8 @@
 export declare const COLOR_CODES: {
     readonly white: " #fff";
     readonly black: " #000";
+    readonly eggshell: " #fafafa";
+    readonly coal: " #252525";
     readonly 'tangerine-100': " #fef1ed";
     readonly 'tangerine-200': " #fdd5c8";
     readonly 'tangerine-300': " #fcab91";
@@ -48,7 +50,7 @@ export declare const COLOR_CODES: {
     readonly 'oat-300': " #c7c0b2";
     readonly 'oat-400': " #6e6d6c";
     readonly 'oat-500': " #4c4b49";
-    readonly 'oat-600': " #383430";
+    readonly 'oat-600': " #413E3E";
     readonly 'lime-100': " #efffe0";
     readonly 'lime-200': " #c6ff94";
     readonly 'lime-300': " #81ffac";

package/dist/foundation/tokens/color/color-constants.d.ts

@@ -1,6 +1,8 @@
 export declare const COLORS: {
     readonly white: "var(--color-white)";
     readonly black: "var(--color-black)";
+    readonly eggshell: "var(--color-eggshell)";
+    readonly coal: "var(--color-coal)";
     readonly 'tangerine-100': "var(--color-tangerine-100)";
     readonly 'tangerine-200': "var(--color-tangerine-200)";
     readonly 'tangerine-300': "var(--color-tangerine-300)";

package/dist/foundation/tokens/color/color-types.d.ts

@@ -1 +1 @@
-export type Color = 'white' | 'black' | 'tangerine-100' | 'tangerine-200' | 'tangerine-300' | 'tangerine-400' | 'tangerine-500' | 'tangerine-600' | 'eggplant-100' | 'eggplant-200' | 'eggplant-300' | 'eggplant-400' | 'eggplant-500' | 'eggplant-600' | 'mint-100' | 'mint-200' | 'mint-300' | 'mint-400' | 'mint-500' | 'mint-600' | 'radish-100' | 'radish-200' | 'radish-300' | 'radish-400' | 'radish-500' | 'radish-600' | 'blueberry-100' | 'blueberry-200' | 'blueberry-300' | 'blueberry-400' | 'blueberry-500' | 'blueberry-600' | 'banana-100' | 'banana-200' | 'banana-300' | 'banana-400' | 'banana-500' | 'banana-600' | 'grey-100' | 'grey-200' | 'grey-300' | 'grey-400' | 'grey-500' | 'grey-600' | 'oat-100' | 'oat-200' | 'oat-300' | 'oat-400' | 'oat-500' | 'oat-600' | 'lime-100' | 'lime-200' | 'lime-300' | 'lime-400' | 'lime-500' | 'lime-600' | 'blackberry-100' | 'blackberry-200' | 'blackberry-300' | 'blackberry-400' | 'blackberry-500' | 'blackberry-600' | 'seq-1' | 'seq-2' | 'seq-3' | 'seq-4' | 'seq-5' | 'seq-6' | 'seq-7' | 'seq-8' | 'seq-9' | 'seq-10' | 'seq-11' | 'seq-12' | 'seq-13' | 'seq-14' | 'seq-15' | 'seq-16' | 'seq-17' | 'seq-18' | 'seq-19' | 'seq-20' | 'neutral-color' | 'neutral-on-color' | 'neutral-container' | 'neutral-on-container' | 'neutral-container-variant' | 'neutral-on-container-variant' | 'neutral-black-transparent-05' | 'neutral-black-transparent-10' | 'neutral-black-transparent-15' | 'neutral-black-transparent-20' | 'neutral-black-transparent-30' | 'neutral-black-transparent-40' | 'neutral-black-transparent-50' | 'neutral-black-transparent-60' | 'neutral-black-transparent-70' | 'neutral-black-transparent-80' | 'neutral-black-transparent-90' | 'neutral-white-transparent-05' | 'neutral-white-transparent-10' | 'neutral-white-transparent-15' | 'neutral-white-transparent-20' | 'neutral-white-transparent-30' | 'neutral-white-transparent-40' | 'neutral-white-transparent-50' | 'neutral-white-transparent-60' | 'neutral-white-transparent-70' | 'neutral-white-transparent-80' | 'neutral-white-transparent-90' | 'surface-color-overlay' | 'surface-color-dim' | 'surface-color' | 'surface-on-color-disabled' | 'surface-on-color-subtle' | 'surface-on-color' | 'surface-on-color-bold' | 'surface-container' | 'surface-container-high' | 'surface-container-highest' | 'surface-container-disabled' | 'surface-container-disabled-variant' | 'surface-on-container-disabled' | 'surface-inverse' | 'surface-on-inverse' | 'surface-on-inverse-disabled' | 'outline' | 'outline-variant' | 'outline-inverse' | 'primary-color' | 'primary-on-color' | 'primary-color-variant' | 'primary-on-color-variant' | 'primary-container' | 'primary-on-container' | 'primary-container-variant' | 'primary-on-container-variant' | 'secondary-color' | 'secondary-on-color' | 'secondary-container' | 'secondary-on-container' | 'secondary-container-variant' | 'secondary-on-container-variant' | 'tertiary-color' | 'tertiary-on-color' | 'tertiary-container' | 'tertiary-on-container' | 'tertiary-container-variant' | 'tertiary-on-container-variant' | 'success-color' | 'success-on-color' | 'success-container' | 'success-on-container' | 'success-container-variant' | 'success-on-container-variant' | 'danger-color' | 'danger-on-color' | 'danger-container' | 'danger-on-container' | 'danger-container-variant' | 'danger-on-container-variant' | 'info-color' | 'info-on-color' | 'info-container' | 'info-on-container' | 'info-container-variant' | 'info-on-container-variant' | 'upsell-color' | 'upsell-on-color' | 'upsell-color-variant' | 'upsell-on-color-variant' | 'upsell-container' | 'upsell-on-container' | 'upsell-container-variant' | 'upsell-on-container-variant' | 'warning-color' | 'warning-on-color' | 'warning-container' | 'warning-on-container' | 'warning-container-variant' | 'warning-on-container-variant' | 'shadow-overlay' | 'shadow-active' | 'hover-inverse' | 'hover-lighten' | 'hover-darken' | 'brand-neutrals-caviar-dynamic' | 'brand-neutrals-caviar-hue' | 'brand-neutrals-chefscoat-dynamic' | 'brand-neutrals-chefscoat-hue' | 'brand-neutrals-marshmallow-hue' | 'brand-neutrals-oat-hue' | 'brand-neutrals-earl-hue' | 'brand-primary-spritz-hue' | 'brand-primary-spritz-tint' | 'brand-primary-spritz-shade' | 'brand-primary-curacao-hue' | 'brand-primary-curacao-tint' | 'brand-primary-curacao-shade' | 'brand-primary-mojito-hue' | 'brand-primary-mojito-tint' | 'brand-primary-mojito-shade' | 'brand-primary-empress-hue' | 'brand-primary-empress-tint' | 'brand-primary-empress-shade' | 'brand-secondary-ice-hue' | 'brand-secondary-zest-hue' | 'brand-secondary-lavender-hue' | 'brand-secondary-ranch-hue' | 'brand-secondary-pesto-hue' | 'brand-secondary-babaganoush-hue' | 'on-graphic-black' | 'on-graphic-white' | 'canvas-background-color';
+export type Color = 'white' | 'black' | 'eggshell' | 'coal' | 'tangerine-100' | 'tangerine-200' | 'tangerine-300' | 'tangerine-400' | 'tangerine-500' | 'tangerine-600' | 'eggplant-100' | 'eggplant-200' | 'eggplant-300' | 'eggplant-400' | 'eggplant-500' | 'eggplant-600' | 'mint-100' | 'mint-200' | 'mint-300' | 'mint-400' | 'mint-500' | 'mint-600' | 'radish-100' | 'radish-200' | 'radish-300' | 'radish-400' | 'radish-500' | 'radish-600' | 'blueberry-100' | 'blueberry-200' | 'blueberry-300' | 'blueberry-400' | 'blueberry-500' | 'blueberry-600' | 'banana-100' | 'banana-200' | 'banana-300' | 'banana-400' | 'banana-500' | 'banana-600' | 'grey-100' | 'grey-200' | 'grey-300' | 'grey-400' | 'grey-500' | 'grey-600' | 'oat-100' | 'oat-200' | 'oat-300' | 'oat-400' | 'oat-500' | 'oat-600' | 'lime-100' | 'lime-200' | 'lime-300' | 'lime-400' | 'lime-500' | 'lime-600' | 'blackberry-100' | 'blackberry-200' | 'blackberry-300' | 'blackberry-400' | 'blackberry-500' | 'blackberry-600' | 'seq-1' | 'seq-2' | 'seq-3' | 'seq-4' | 'seq-5' | 'seq-6' | 'seq-7' | 'seq-8' | 'seq-9' | 'seq-10' | 'seq-11' | 'seq-12' | 'seq-13' | 'seq-14' | 'seq-15' | 'seq-16' | 'seq-17' | 'seq-18' | 'seq-19' | 'seq-20' | 'neutral-color' | 'neutral-on-color' | 'neutral-container' | 'neutral-on-container' | 'neutral-container-variant' | 'neutral-on-container-variant' | 'neutral-black-transparent-05' | 'neutral-black-transparent-10' | 'neutral-black-transparent-15' | 'neutral-black-transparent-20' | 'neutral-black-transparent-30' | 'neutral-black-transparent-40' | 'neutral-black-transparent-50' | 'neutral-black-transparent-60' | 'neutral-black-transparent-70' | 'neutral-black-transparent-80' | 'neutral-black-transparent-90' | 'neutral-white-transparent-05' | 'neutral-white-transparent-10' | 'neutral-white-transparent-15' | 'neutral-white-transparent-20' | 'neutral-white-transparent-30' | 'neutral-white-transparent-40' | 'neutral-white-transparent-50' | 'neutral-white-transparent-60' | 'neutral-white-transparent-70' | 'neutral-white-transparent-80' | 'neutral-white-transparent-90' | 'surface-color-overlay' | 'surface-color-dim' | 'surface-color' | 'surface-on-color-disabled' | 'surface-on-color-subtle' | 'surface-on-color' | 'surface-on-color-bold' | 'surface-container' | 'surface-container-high' | 'surface-container-highest' | 'surface-container-disabled' | 'surface-container-disabled-variant' | 'surface-on-container-disabled' | 'surface-inverse' | 'surface-on-inverse' | 'surface-on-inverse-disabled' | 'outline' | 'outline-variant' | 'outline-inverse' | 'primary-color' | 'primary-on-color' | 'primary-color-variant' | 'primary-on-color-variant' | 'primary-container' | 'primary-on-container' | 'primary-container-variant' | 'primary-on-container-variant' | 'secondary-color' | 'secondary-on-color' | 'secondary-container' | 'secondary-on-container' | 'secondary-container-variant' | 'secondary-on-container-variant' | 'tertiary-color' | 'tertiary-on-color' | 'tertiary-container' | 'tertiary-on-container' | 'tertiary-container-variant' | 'tertiary-on-container-variant' | 'success-color' | 'success-on-color' | 'success-container' | 'success-on-container' | 'success-container-variant' | 'success-on-container-variant' | 'danger-color' | 'danger-on-color' | 'danger-container' | 'danger-on-container' | 'danger-container-variant' | 'danger-on-container-variant' | 'info-color' | 'info-on-color' | 'info-container' | 'info-on-container' | 'info-container-variant' | 'info-on-container-variant' | 'upsell-color' | 'upsell-on-color' | 'upsell-color-variant' | 'upsell-on-color-variant' | 'upsell-container' | 'upsell-on-container' | 'upsell-container-variant' | 'upsell-on-container-variant' | 'warning-color' | 'warning-on-color' | 'warning-container' | 'warning-on-container' | 'warning-container-variant' | 'warning-on-container-variant' | 'shadow-overlay' | 'shadow-active' | 'hover-inverse' | 'hover-lighten' | 'hover-darken' | 'brand-neutrals-caviar-dynamic' | 'brand-neutrals-caviar-hue' | 'brand-neutrals-chefscoat-dynamic' | 'brand-neutrals-chefscoat-hue' | 'brand-neutrals-marshmallow-hue' | 'brand-neutrals-oat-hue' | 'brand-neutrals-earl-hue' | 'brand-primary-spritz-hue' | 'brand-primary-spritz-tint' | 'brand-primary-spritz-shade' | 'brand-primary-curacao-hue' | 'brand-primary-curacao-tint' | 'brand-primary-curacao-shade' | 'brand-primary-mojito-hue' | 'brand-primary-mojito-tint' | 'brand-primary-mojito-shade' | 'brand-primary-empress-hue' | 'brand-primary-empress-tint' | 'brand-primary-empress-shade' | 'brand-secondary-ice-hue' | 'brand-secondary-zest-hue' | 'brand-secondary-lavender-hue' | 'brand-secondary-ranch-hue' | 'brand-secondary-pesto-hue' | 'brand-secondary-babaganoush-hue' | 'on-graphic-black' | 'on-graphic-white' | 'canvas-background-color';

package/dist/hooks/useScrollDetector.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
 export declare const useScrollDetector: (contentRef: RefObject<HTMLElement>) => {
-    hasScroll: boolean;
-    isScrolled: boolean;
+    hasScrollBottom: boolean;
+    hasScrollTop: boolean;
 };

package/dist/icons/components/status/IconInfinity.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IconSize, IconVariant } from '../../types';
+type Props = {
+    size?: IconSize;
+    color?: string;
+    testId?: string;
+    variant?: IconVariant;
+} & React.SVGProps<SVGSVGElement>;
+declare const IconInfinity: React.ForwardRefExoticComponent<Omit<Props, 'ref'>>;
+export default IconInfinity;

package/dist/icons/components/status/index.d.ts

@@ -10,6 +10,7 @@ export { default as IconCircleXMark } from './IconCircleXMark';
 export { default as IconDeleteLeft } from './IconDeleteLeft';
 export { default as IconExclamation } from './IconExclamation';
 export { default as IconExclamationTriangle } from './IconExclamationTriangle';
+export { default as IconInfinity } from './IconInfinity';
 export { default as IconInfoCircle } from './IconInfoCircle';
 export { default as IconQuestionCircle } from './IconQuestionCircle';
 export { default as IconTimesOctagon } from './IconTimesOctagon';

package/dist/index.css

@@ -103,6 +103,10 @@
   --color-white-rgb: 255, 255, 255;
   --color-black: #000;
   --color-black-rgb: 0, 0, 0;
+  --color-eggshell: #fafafa;
+  --color-eggshell-rgb: 250, 250, 250;
+  --color-coal: #252525;
+  --color-coal-rgb: 37, 37, 37;
   --color-tangerine-100: #fef1ed;
   --color-tangerine-100-rgb: 254, 241, 237;
   --color-tangerine-200: #fdd5c8;
@@ -197,8 +201,8 @@
   --color-oat-400-rgb: 110, 109, 108;
   --color-oat-500: #4c4b49;
   --color-oat-500-rgb: 76, 75, 73;
-  --color-oat-600: #383430;
-  --color-oat-600-rgb: 56, 52, 48;
+  --color-oat-600: #413E3E;
+  --color-oat-600-rgb: 65, 62, 62;
   --color-lime-100: #efffe0;
   --color-lime-100-rgb: 239, 255, 224;
   --color-lime-200: #c6ff94;
@@ -512,6 +516,7 @@
 :root {
   --border-radius-300: 4px;
   --border-radius-400: 8px;
+  --border-radius-500: 12px;
   --border-radius-600: 20px;
 }
 :root {
@@ -2008,17 +2013,18 @@ h5._i2LHD {
 }
 
 ._ntozd {
-  position: relative;
   border: 1px solid var(--color-outline);
+  border-radius: var(--border-radius-500);
   background: var(--color-surface-color);
   overflow: auto;
   outline: none;
-  padding: 32px 24px;
   box-shadow: 0 0 12px -3px var(--color-shadow-overlay);
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
+  padding: 0;
   min-height: 266px;
+  position: relative;
 }
 ._ntozd > form {
   display: contents;
@@ -2049,15 +2055,16 @@ h5._i2LHD {
 }
 
 ._cq2CU {
+  border: 1px solid var(--color-outline);
+  border-radius: var(--border-radius-500);
   background: var(--color-surface-color);
   overflow: auto;
   outline: none;
-  padding: 32px 24px;
   box-shadow: 0 0 12px -3px var(--color-shadow-overlay);
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  min-height: 266px;
+  padding: 0;
   max-height: calc(100vh - 40px);
   pointer-events: all;
 }
@@ -2074,34 +2081,66 @@ h5._i2LHD {
 .modal-drag-handle:active {
   cursor: grabbing;
 }
-._tgpG9 {
+._VRlTj {
+  position: relative;
+}
+._VRlTj::after {
+  content: "";
+  position: absolute;
+  left: 20px;
+  right: 20px;
+  top: 100%;
+  height: 8px;
+  opacity: 0;
+  background: radial-gradient(50% 100% at 50% 0%, var(--color-shadow-overlay) -150%, transparent 100%);
+  pointer-events: none;
+  transition: opacity 0.4s ease-in-out;
+}
+._GH74U {
   font-family: var(--font-family-primary);
   font-size: var(--font-section-title-size);
   line-height: var(--font-section-title-height);
   font-weight: var(--font-section-title-weight);
   color: var(--color-surface-on-color-bold);
-  padding: 0;
+  padding: 0 22px;
 }
-._b1dgU {
-  display: flex;
-  justify-content: end;
-  margin-bottom: -20px;
-  margin-right: 8px;
-  z-index: calc(var(--z-index-base) + 2);
-}
-
-._c2nm4 {
+._OlX-6 {
   font-family: var(--font-family-primary);
   font-size: var(--font-sub-title-size);
   line-height: var(--font-sub-title-height);
   font-weight: var(--font-sub-title-weight);
-  color: var(--color-surface-on-color);
+  padding: 0 22px;
+  color: var(--color-surface-on-color-subtle);
+}
+._brFTl {
+  border-bottom: 1px solid var(--color-outline);
+}
+._brFTl::after {
+  opacity: 1;
+}
+._LTnd3 {
+  display: flex;
+  justify-content: end;
+  z-index: calc(var(--z-index-base) + 2);
+}
+._7V-hB {
+  display: flex;
+  justify-content: end;
+  padding-right: 4px;
+  padding-top: 4px;
+  min-height: 38px;
+}
+._docda {
+  height: 200px;
+  margin-bottom: 32px;
+  background-color: lightgray;
+  background-position: 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+._docda > button {
+  background: var(--color-shadow-overlay);
 }
-/**
- * This is for adding a shadow when the body is scrollable.
- * It is using ::before and ::after to accomplish that => https://www.kizu.ru/shadowscroll/
- * There is a cleaner solution using background-attachment (https://lea.verou.me/2012/04/background-attachment-local/) but I had some issues in Chrome using that approach
- */
 ._4YK4k {
   font-family: var(--font-family-primary);
   font-size: var(--font-body-ui-size);
@@ -2109,41 +2148,36 @@ h5._i2LHD {
   font-weight: var(--font-body-ui-weight);
   overflow: auto;
   position: relative;
-  padding: 0 8px 0 8px;
-}
-._wo1vv {
-  z-index: var(--z-index-base);
-  background: var(--color-surface-color) no-repeat;
-  background-image: radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
-  background-position: 0 0, 0 100%;
-  background-size: 100% 14px;
-}
-._wo1vv::before, ._wo1vv::after {
-  content: "";
-  position: relative;
-  z-index: -1;
-  display: block;
-  height: 30px;
-  margin: 0 0 -30px;
-  background: linear-gradient(to bottom, var(--color-surface-color), var(--color-surface-color) 30%, rgba(255, 255, 255, 0));
-}
-._wo1vv::after {
-  margin: -30px 0 0;
-  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-surface-color) 70%, var(--color-surface-color));
-}
-._9u6xC {
-  padding-bottom: 8px;
+  padding: 16px 22px;
 }
 ._bezlP {
+  position: relative;
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  padding: 32px 8px 0 8px;
+  padding-left: 22px;
+  padding-top: 12px;
+  padding-right: 22px;
+  padding-bottom: 20px;
 }
-
-._EdqHx {
-  margin-left: -12px;
+._bezlP::before {
+  content: "";
+  position: absolute;
+  left: 20px;
+  right: 20px;
+  bottom: 100%;
+  height: 8px;
+  opacity: 0;
+  background: radial-gradient(50% 100% at 50% 100%, var(--color-shadow-overlay) -150%, transparent 100%);
+  pointer-events: none;
+  transition: opacity 0.4s ease-in-out;
+}
+._hC4vb {
+  border-top: 1px solid var(--color-outline);
+}
+._hC4vb::before {
+  opacity: 1;
 }
 ._et9Fs {
   --rdp-cell-size: 37px;