@shoplflow/base 0.26.0 → 0.26.3

package/dist/index.cjs

@@ -614,7 +614,7 @@ var createStackComponent2 = (stackOption) => React3.forwardRef(function Stack2(_
       margin,
       padding
     }, rest), {
-      "data-shoplflow": "Stack",
+      "data-shoplflow": "StackContainer",
       children: rest.children
     })
   );
@@ -723,13 +723,19 @@ var getModalWidthFromSize = (size2) => {
       return MODAL_SIZE_M;
   }
 };
-var getModalBodyTopBottomPadding = (isIncludeHeader) => {
+var getModalBodyTopBottomPadding = (isIncludeHeader, sizeVar) => {
   if (isIncludeHeader) {
     return react$1.css`
       padding-top: 16px;
       padding-bottom: 24px;
     `;
   }
+  if (sizeVar === "FULL") {
+    return react$1.css`
+      padding-top: 0;
+      padding-bottom: 0;
+    `;
+  }
   return react$1.css`
     padding-top: 24px;
     padding-bottom: 24px;
@@ -792,10 +798,10 @@ var BodyContainer = styled6__default.default.div`
   flex-direction: column;
   background: ${exports.colorTokens.neutral0};
   box-sizing: border-box;
-  min-height: ${({ minHeight }) => minHeight};
+  min-height: ${({ minHeight }) => minHeight}px;
   max-height: ${({ maxHeight }) => maxHeight}px;
   flex: 1;
-  ${({ isIncludeHeader }) => getModalBodyTopBottomPadding(isIncludeHeader)}
+  ${({ isIncludeHeader, sizeVar }) => getModalBodyTopBottomPadding(isIncludeHeader, sizeVar)}
 `;
 var ModalBodyContainerInner = styled6__default.default.div`
   display: grid;
@@ -812,6 +818,9 @@ var ModalBodyContent = styled6__default.default.div`
   height: 100%;
   box-sizing: border-box;
   padding: 0 24px;
+  ${({ sizeVar }) => sizeVar === "FULL" && react$1.css`
+      padding: 0;
+    `};
   background: ${exports.colorTokens.neutral0};
 `;
 var FooterContainer = styled6__default.default.div`
@@ -947,6 +956,9 @@ var ModalBody = ({
   }, [isIncludeFooter, isIncludeHeader]);
   const headerFooterHeight = React3.useMemo(() => getHeaderFooterHeight(), [getHeaderFooterHeight]);
   const setAutoHeightMin = () => {
+    if (sizeVar === "FULL") {
+      return windowHeight - topBottomMargin - headerFooterHeight;
+    }
     if (modalContainerHeight) {
       if (modalContainerHeight <= 1200) {
         if (windowHeight < modalContainerHeight) {
@@ -960,10 +972,10 @@ var ModalBody = ({
     }
   };
   const setAutoHeightMax = () => {
+    if (sizeVar === "FULL") {
+      return windowHeight;
+    }
     if (modalContainerHeight) {
-      if (sizeVar === "FULL") {
-        return windowHeight;
-      }
       if (modalContainerHeight > 1200) {
         return 1200 - topBottomMargin - headerFooterHeight;
       }
@@ -992,21 +1004,30 @@ var ModalBody = ({
     }
     return autoHeightMax;
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(BodyContainer, { isIncludeHeader, minHeight: setAutoHeightMin(), maxHeight: setAutoHeightMax(), children: /* @__PURE__ */ jsxRuntime.jsx(
-    exports.ScrollArea,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BodyContainer,
     {
-      id: `scrollbar`,
-      universal: true,
-      autoHeight: !modalContainerHeight,
-      autoHeightMin: setAutoHeightMin(),
-      autoHeightMax: setContentHeightMax(),
-      style: {
-        height: "100%",
-        overflow: "hidden"
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(ModalBodyContainerInner, { children: /* @__PURE__ */ jsxRuntime.jsx(ModalBodyContent, { isIncludeHeader, sizeVar, children }) })
+      isIncludeHeader,
+      sizeVar,
+      minHeight: setAutoHeightMin(),
+      maxHeight: setAutoHeightMax(),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        exports.ScrollArea,
+        {
+          id: `scrollbar`,
+          universal: true,
+          autoHeight: !modalContainerHeight,
+          autoHeightMin: setAutoHeightMin(),
+          autoHeightMax: setContentHeightMax(),
+          style: {
+            height: "100%",
+            overflow: "hidden"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(ModalBodyContainerInner, { children: /* @__PURE__ */ jsxRuntime.jsx(ModalBodyContent, { isIncludeHeader, sizeVar, children }) })
+        }
+      )
     }
-  ) });
+  );
 };
 var ModalBody_default = ModalBody;
 var ModalHeader = ({ children }) => {