@shoplflow/base 0.13.8 → 0.14.0

package/dist/index.cjs

@@ -645,14 +645,21 @@ var BodyContainer = styled5__default.default.div`
   flex: 1;
   ${({ isIncludeHeader }) => getModalBodyTopBottomPadding(isIncludeHeader)}
 `;
+var ModalBodyContainerInner = styled5__default.default.div`
+  display: grid;
+  align-self: stretch;
+  flex-direction: column;
+  flex-grow: 1;
+  //스크롤 생성시 하단 padding 적용하기 위한 설정
+  height: calc(100%);
+  box-sizing: border-box;
+`;
 var ModalBodyContent = styled5__default.default.div`
   display: flex;
   flex-direction: column;
-  width: 100%;
-  max-width: ${({ sizeVar }) => getModalWidthFromSize(sizeVar)}px;
+  height: 100%;
   box-sizing: border-box;
   padding: 0 24px;
-  overflow: hidden;
   background: ${exports.colorTokens.neutral0};
 `;
 var FooterContainer = styled5__default.default.div`
@@ -718,6 +725,11 @@ var ModalFooter = ({ children }) => {
 };
 ModalFooter[exports.MODAL_FOOTER_KEY] = true;
 var ModalFooter_default = ModalFooter;
+var ScrollArea = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Scrollbars__default.default, __spreadProps(__spreadValues({ autoHide: true, autoHideTimeout: 1e3, autoHideDuration: 200 }, rest), { "data-shoplflow": "ScrollArea", children }));
+};
+exports.ScrollArea = ScrollArea;
 var ModalBody = ({
   children,
   isIncludeHeader = false,
@@ -752,20 +764,18 @@ var ModalBody = ({
   const heightUnderMaxHeight = windowHeight - topBottomMargin - headerFooterHeight;
   const heightOverMaxHeight = 1200 - topBottomMargin - headerFooterHeight;
   return /* @__PURE__ */ jsxRuntime.jsx(BodyContainer, { isIncludeHeader, height: setAutoHeightMin(), children: /* @__PURE__ */ jsxRuntime.jsx(
-    Scrollbars__default.default,
+    exports.ScrollArea,
     {
       id: `scrollbar`,
+      universal: true,
       autoHeight: !modalContainerHeight,
       autoHeightMin: setAutoHeightMin(),
       autoHeightMax: windowHeight > 1200 ? heightOverMaxHeight : heightUnderMaxHeight,
-      autoHide: true,
-      autoHideTimeout: 1e3,
-      autoHideDuration: 200,
       style: {
         height: "100%",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(ModalBodyContent, { isIncludeHeader, sizeVar, children })
+      children: /* @__PURE__ */ jsxRuntime.jsx(ModalBodyContainerInner, { children: /* @__PURE__ */ jsxRuntime.jsx(ModalBodyContent, { isIncludeHeader, sizeVar, children }) })
     }
   ) });
 };
@@ -1063,10 +1073,10 @@ var StyledChipButton = styled5__default.default.button`
   width: fit-content;
   gap: 4px;
   cursor: pointer;
-  background: ${({ background: background2 }) => background2 && exports.colorTokens[background2]};
   ${({ sizeVar }) => getStyleBySizeVar(sizeVar)};
   ${(props) => props.styleVar === "LINE" && lineStyle(props)};
   ${({ disabled }) => getDisabledStyle(disabled)};
+  background: ${({ background: background2 }) => background2 && exports.colorTokens[background2]};
 `;
 
 // src/components/Chips/ChipButton/ChipButton.types.ts