@7shifts/sous-chef 3.77.1 → 3.78.1

package/dist/index.modern.js

@@ -8983,7 +8983,7 @@ const useLocalStorage = (key, initialValue) => {
 
 var styles$L = {"hint-modal":"_NwD6V","hint-modal--after-open":"_4ofZb","hint-modal--before-close":"_hGoMD","hint-modal__overlay":"_iK5zl","hint-modal__image":"_V9hLa","hint-modal__body":"_oOqUg","hint-modal__close-button":"_5zcBK"};
 
-const _excluded$h = ["header", "children", "mediaUrl", "onClose", "modalId", "primaryButton", "secondaryButton", "testId"];
+const _excluded$h = ["header", "children", "mediaUrl", "onClose", "modalId", "primaryButton", "secondaryButton", "testId", "onSetDoNotShowAgainStatus"];
 const HintModal = _ref => {
   let {
       header,
@@ -8993,26 +8993,33 @@ const HintModal = _ref => {
       modalId,
       primaryButton,
       secondaryButton,
-      testId
+      testId,
+      onSetDoNotShowAgainStatus
     } = _ref,
     positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   const __ = useTranslation('HintModal');
   const [doNotShowAgain, setDoNotShowAgain] = useState(false);
   const [persistedDoNotShow, setPersistedDoNotShow] = useLocalStorage(modalId, false);
+  const persistDoNotShowAgain = value => {
+    setPersistedDoNotShow(value);
+    if (onSetDoNotShowAgainStatus) {
+      onSetDoNotShowAgainStatus(value);
+    }
+  };
   const primaryButtonUpdated = updateButtonProps$1(primaryButton, {
     theme: primaryButton.props.theme || 'primary',
     size: BUTTON_SIZES.MIN_WIDTH_100,
     onClick: () => {
-      setPersistedDoNotShow(doNotShowAgain);
-      primaryButton.props.onClick();
+      persistDoNotShowAgain(doNotShowAgain);
+      primaryButton.props.onClick(doNotShowAgain);
     }
   });
   const secondaryButtonUpdated = secondaryButton ? updateButtonProps$1(secondaryButton, {
     theme: secondaryButton.props.theme || 'default',
     size: BUTTON_SIZES.MIN_WIDTH_100,
     onClick: () => {
-      setPersistedDoNotShow(doNotShowAgain);
-      secondaryButton.props.onClick();
+      persistDoNotShowAgain(doNotShowAgain);
+      secondaryButton.props.onClick(doNotShowAgain);
     }
   }) : undefined;
   const positionStyles = usePositionStyles(positionProps);
@@ -9022,7 +9029,7 @@ const HintModal = _ref => {
     })
   };
   const handleOnClose = () => {
-    setPersistedDoNotShow(doNotShowAgain);
+    persistDoNotShowAgain(doNotShowAgain);
     onClose();
   };
   return React__default.createElement(ReactModal, {
@@ -14566,8 +14573,9 @@ const EMPTY_STATE_SIZE = {
   LARGE: 'large'
 };
 
-var styles$2 = {"empty-state-container-inline":"_mhyqH","empty-state-container-inline--inside-modal":"_Kiu3T","empty-state-container-inline__content":"_Px6C0","empty-state-container-inline__content--large":"_voA-r","empty-state-container-inline__content--medium":"_Q9cut","empty-state-container-inline__body":"_xMUQ6","empty-state-container-inline__image":"_79QnQ","empty-state-container-inline__image--large":"_HxPhH","empty-state-container-inline__image--medium":"_TeUmg"};
+var styles$2 = {"empty-state-container-inline":"_mhyqH","empty-state-container-inline--inside-modal":"_Kiu3T","empty-state-container-inline__content":"_Px6C0","empty-state-container-inline__content--large":"_voA-r","empty-state-container-inline__content--medium":"_Q9cut","empty-state-container-inline__body":"_xMUQ6","empty-state-container-inline__image":"_79QnQ","empty-state-container-inline__image--large":"_HxPhH","empty-state-container-inline__image--medium":"_TeUmg","empty-state-container-inline--small-container":"_VWrGi"};
 
+const smallWidthPx = 320;
 const EmptyStateContainerInline = ({
   header,
   title,
@@ -14579,14 +14587,34 @@ const EmptyStateContainerInline = ({
   isPaywall: _isPaywall = false,
   testId
 }) => {
+  var _ref$current2;
   const {
     isModalMounted: isInsideModal
   } = useModalContext();
+  const [isOnSmallContainer, setIsOnSmallContainer] = useState(false);
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    if (isSmallParent(parentWidthFromRef(ref))) {
+      setIsOnSmallContainer(true);
+    }
+  }, []);
+  useLayoutEffect(() => {
+    var _ref$current;
+    const parentElement = (_ref$current = ref.current) == null ? void 0 : _ref$current.parentElement;
+    if (parentElement) {
+      const parentResize = new ResizeObserver(event => {
+        setIsOnSmallContainer(isSmallParent(parentWidthFromResizeEvent(event)));
+      });
+      parentResize.observe(parentElement);
+    }
+  }, [(_ref$current2 = ref.current) == null ? void 0 : _ref$current2.parentElement]);
   return React__default.createElement("div", {
     className: classnames(styles$2['empty-state-container-inline'], {
-      [styles$2['empty-state-container-inline--inside-modal']]: isInsideModal
+      [styles$2['empty-state-container-inline--inside-modal']]: isInsideModal,
+      [styles$2['empty-state-container-inline--small-container']]: isOnSmallContainer
     }),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: ref
   }, React__default.createElement("div", {
     className: classnames(styles$2['empty-state-container-inline__content'], {
       [styles$2['empty-state-container-inline__content--large']]: _size === EMPTY_STATE_SIZE.LARGE,
@@ -14603,7 +14631,8 @@ const EmptyStateContainerInline = ({
     className: styles$2['empty-state-container-inline__body']
   }, children), React__default.createElement(Stack, {
     space: 8,
-    marginTop: 12
+    marginTop: 12,
+    alignItems: isOnSmallContainer ? 'center' : undefined
   }, actions && React__default.createElement(EmptyStateContainerCTA, {
     actions: actions,
     isPaywall: _isPaywall,
@@ -14620,6 +14649,22 @@ const EmptyStateContainerInline = ({
     alt: String(title)
   })));
 };
+function parentWidthFromRef(ref) {
+  var _ref$current3;
+  return (_ref$current3 = ref.current) == null || (_ref$current3 = _ref$current3.parentElement) == null || (_ref$current3 = _ref$current3.getBoundingClientRect()) == null ? void 0 : _ref$current3.width;
+}
+function parentWidthFromResizeEvent(event) {
+  if (event.length > 0) {
+    if (event[0].contentBoxSize.length > 0) {
+      return event[0].contentBoxSize[0].inlineSize;
+    }
+    return event[0].contentRect.width;
+  }
+  return undefined;
+}
+function isSmallParent(width) {
+  return width !== undefined && width <= smallWidthPx;
+}
 
 const EmptyStateContainer = ({
   header,