@7shifts/sous-chef 3.78.0 → 3.78.1

package/dist/index.js

@@ -14477,10 +14477,11 @@ var 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"};
 
+var smallWidthPx = 320;
 var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
-  var _classNames, _classnames, _classnames2;
+  var _ref$current2, _classNames, _classnames, _classnames2;
   var header = _ref.header,
     title = _ref.title,
     children = _ref.children,
@@ -14494,9 +14495,29 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
     testId = _ref.testId;
   var _useModalContext = useModalContext(),
     isInsideModal = _useModalContext.isModalMounted;
+  var _useState = React.useState(false),
+    isOnSmallContainer = _useState[0],
+    setIsOnSmallContainer = _useState[1];
+  var ref = React.useRef(null);
+  React.useLayoutEffect(function () {
+    if (isSmallParent(parentWidthFromRef(ref))) {
+      setIsOnSmallContainer(true);
+    }
+  }, []);
+  React.useLayoutEffect(function () {
+    var _ref$current;
+    var parentElement = (_ref$current = ref.current) == null ? void 0 : _ref$current.parentElement;
+    if (parentElement) {
+      var parentResize = new ResizeObserver(function (event) {
+        setIsOnSmallContainer(isSmallParent(parentWidthFromResizeEvent(event)));
+      });
+      parentResize.observe(parentElement);
+    }
+  }, [(_ref$current2 = ref.current) == null ? void 0 : _ref$current2.parentElement]);
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$2['empty-state-container-inline'], (_classNames = {}, _classNames[styles$2['empty-state-container-inline--inside-modal']] = isInsideModal, _classNames)),
-    "data-testid": testId
+    className: classnames__default["default"](styles$2['empty-state-container-inline'], (_classNames = {}, _classNames[styles$2['empty-state-container-inline--inside-modal']] = isInsideModal, _classNames[styles$2['empty-state-container-inline--small-container']] = isOnSmallContainer, _classNames)),
+    "data-testid": testId,
+    ref: ref
   }, React__default["default"].createElement("div", {
     className: classnames__default["default"](styles$2['empty-state-container-inline__content'], (_classnames = {}, _classnames[styles$2['empty-state-container-inline__content--large']] = size === EMPTY_STATE_SIZE.LARGE, _classnames[styles$2['empty-state-container-inline__content--medium']] = size === EMPTY_STATE_SIZE.MEDIUM, _classnames))
   }, React__default["default"].createElement(Stack, {
@@ -14510,7 +14531,8 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
     className: styles$2['empty-state-container-inline__body']
   }, children), React__default["default"].createElement(Stack, {
     space: 8,
-    marginTop: 12
+    marginTop: 12,
+    alignItems: isOnSmallContainer ? 'center' : undefined
   }, actions && React__default["default"].createElement(EmptyStateContainerCTA, {
     actions: actions,
     isPaywall: isPaywall,
@@ -14524,6 +14546,22 @@ var EmptyStateContainerInline = function EmptyStateContainerInline(_ref) {
     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;
+}
 
 var EmptyStateContainer = function EmptyStateContainer(_ref) {
   var header = _ref.header,