@elicecontents/content-ui 1.0.19 → 1.0.20-rc.1

package/cjs/components/layout/Layout.js

@@ -1,9 +1,8 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var _styled = require('@emotion/styled/base');
+var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var material = require('@mui/material');
@@ -22,7 +21,76 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 var EliceLayoutContext = React__default.default.createContext(undefined);
-var EliceLayout = Object.assign(function (_ref) {
+/**
+ *  @summary Alpha of Design System. Wrapper of MUI Box
+ * */
+var Box = React__default.default.forwardRef(function Box(_a, ref) {
+  var component = _a.component,
+    step = _a.step,
+    sx = _a.sx,
+    props = tslib.__rest(_a, ["component", "step", "sx"]);
+  var stepSx = Object.assign(Object.assign({}, step !== undefined ? {
+    '--fluid-size': "var(--step-".concat(step, ")"),
+    '& *:not([class*=Typography]):not([class*=Typography] *)': {
+      'font-size': 'var(--fluid-size)'
+    }
+  } : {}), sx);
+  return jsxRuntime.jsx(material.Box, Object.assign({
+    ref: ref,
+    component: component,
+    sx: stepSx
+  }, props));
+});
+/**
+ *  @summary Alpha of Design System. Wrapper of MUI Stack
+ * */
+var Stack = React__default.default.forwardRef(function Stack(_a, ref) {
+  var component = _a.component,
+    step = _a.step,
+    sx = _a.sx,
+    props = tslib.__rest(_a, ["component", "step", "sx"]);
+  var stepSx = Object.assign(Object.assign({}, step !== undefined ? {
+    '--fluid-size': "var(--step-".concat(step, ")"),
+    '& *:not([class*=Typography]):not([class*=Typography] *)': {
+      'font-size': 'var(--fluid-size)'
+    }
+  } : {}), sx);
+  return jsxRuntime.jsx(material.Stack, Object.assign({
+    ref: ref,
+    // FIXME: delete any in React 19.
+    component: component,
+    sx: stepSx
+  }, props));
+});
+var fontSizeMap = {
+  h1: '1em',
+  subtitle1: '1.3em',
+  subtitle2: '1.2em',
+  subtitle3: '1em',
+  body1: '1em',
+  buttoninput: '1em',
+  pagination: '1.6em'
+};
+/**
+ *  @summary Alpha of Design System. Wrapper of MUI Typography
+ * */
+function Typography(_a) {
+  var _b;
+  var step = _a.step,
+    sx = _a.sx,
+    props = tslib.__rest(_a, ["step", "sx"]);
+  var variantFontSize = props.variant && Object.hasOwn(fontSizeMap, props.variant) ? fontSizeMap[props.variant] : fontSizeMap['body1'];
+  var stepSx = {
+    '&:is([class*="Typography"])': Object.assign(Object.assign({}, sx !== null && sx !== void 0 ? sx : {}), {
+      '--fluid-size': "var(--step-".concat(step !== null && step !== void 0 ? step : 0, ")"),
+      fontSize: (_b = sx === null || sx === void 0 ? void 0 : sx.fontSize) !== null && _b !== void 0 ? _b : variantFontSize
+    })
+  };
+  return jsxRuntime.jsx(material.Typography, Object.assign({
+    sx: stepSx
+  }, props));
+}
+var Layout = function Layout(_ref) {
   var children = _ref.children,
     onPrev = _ref.onPrev,
     onNext = _ref.onNext,
@@ -61,205 +129,190 @@ var EliceLayout = Object.assign(function (_ref) {
       }), children]
     })
   });
-}, {
-  HeaderContainer: function HeaderContainer(_ref2) {
-    var children = _ref2.children,
-      sx = _ref2.sx;
-    return jsxRuntime.jsx(_HeaderContainer, {
-      sx: sx,
-      children: children
+};
+var HeaderContainerInner = /*#__PURE__*/_styled__default.default(Stack, {
+  target: "efnp08i6"
+})("production" === "production" ? {
+  name: "14ia2gs",
+  styles: "height:74px;width:100%;justify-content:space-between;flex-direction:row"
+} : {
+  name: "14ia2gs",
+  styles: "height:74px;width:100%;justify-content:space-between;flex-direction:row",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var HeaderContainer = function HeaderContainer(_ref2) {
+  var children = _ref2.children,
+    sx = _ref2.sx;
+  return jsxRuntime.jsx(HeaderContainerInner, {
+    sx: sx,
+    children: children
+  });
+};
+var HeaderTitle = LayoutHeaderTitle.default;
+var HeaderSubTitle = LayoutHeaderSubTitle.default;
+var ContentContainerInner = /*#__PURE__*/_styled__default.default(Stack, {
+  target: "efnp08i5"
+})("flex:1;width:100%;max-height:calc(100vh - 74px - 92px);overflow-y:auto;min-height:0;position:relative;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.palette.primary.main;
+}, ";border-radius:4px;}&::-webkit-scrollbar-track{background-color:", function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.palette.grey[300];
+}, ";border-radius:4px;}");
+var ContentContainer = function ContentContainer(_ref5) {
+  var children = _ref5.children,
+    sx = _ref5.sx,
+    _ref5$scrollbarPostio = _ref5.scrollbarPostion,
+    scrollbarPostion = _ref5$scrollbarPostio === void 0 ? 10 : _ref5$scrollbarPostio;
+  var theme = material.useTheme();
+  var contentRef = React__default.default.useRef(null);
+  var context = React__default.default.useContext(EliceLayoutContext);
+  if (!context) {
+    throw new Error("EliceLayout components must be used within an EliceLayout provider.");
+  }
+  var isScrollActive = context.isScrollActive,
+    setIsScrollActive = context.setIsScrollActive,
+    enableScrollTracking = context.enableScrollTracking;
+  var _React$useState3 = React__default.default.useState(false),
+    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
+    hasScroll = _React$useState4[0],
+    setHasScroll = _React$useState4[1];
+  var scrollTopRef = React__default.default.useRef(0);
+  var scrollBarRef = React__default.default.useRef(null);
+  React__default.default.useEffect(function () {
+    if (!enableScrollTracking) return;
+    var element = contentRef.current;
+    if (!element) return;
+    var handleScroll = function handleScroll() {
+      setIsScrollActive(element.scrollTop > 10);
+    };
+    element.addEventListener('scroll', handleScroll);
+    return function () {
+      element.removeEventListener('scroll', handleScroll);
+    };
+  }, [enableScrollTracking, setIsScrollActive]);
+  // ✅ 2. 스크롤 위치 계산용 useEffect (커스텀 스크롤바용)
+  React__default.default.useEffect(function () {
+    var el = contentRef.current;
+    if (!el) return;
+    var updateScrollBar = function updateScrollBar() {
+      var scrollTop = el.scrollTop,
+        scrollHeight = el.scrollHeight,
+        clientHeight = el.clientHeight;
+      // 상태로 관리하지 않고 직접 반영
+      scrollTopRef.current = scrollTop;
+      var thumbHeight = clientHeight / scrollHeight * clientHeight;
+      var top = scrollTop / scrollHeight * clientHeight;
+      if (scrollBarRef.current) {
+        scrollBarRef.current.style.height = "".concat(thumbHeight, "px");
+        scrollBarRef.current.style.top = "".concat(top, "px");
+      }
+      setHasScroll(scrollHeight > clientHeight);
+    };
+    el.addEventListener('scroll', updateScrollBar);
+    requestAnimationFrame(function () {
+      if (el.scrollHeight > el.clientHeight) {
+        el.scrollTop = 1; // 👉 살짝 움직여줌
+        el.scrollTop = 0; // 👉 바로 다시 원위치
+        updateScrollBar(); // 👉 thumb도 즉시 업데이트
+      }
     });
-  },
-  HeaderTitle: LayoutHeaderTitle.default,
-  HeaderSubTitle: LayoutHeaderSubTitle.default,
-  ContentContainer: function ContentContainer(_ref3) {
-    var children = _ref3.children,
-      sx = _ref3.sx,
-      _ref3$scrollbarPostio = _ref3.scrollbarPostion,
-      scrollbarPostion = _ref3$scrollbarPostio === void 0 ? 10 : _ref3$scrollbarPostio;
-    var theme = material.useTheme();
-    var contentRef = React__default.default.useRef(null);
-    var context = React__default.default.useContext(EliceLayoutContext);
-    if (!context) {
-      throw new Error("EliceLayout components must be used within an EliceLayout provider.");
-    }
-    var isScrollActive = context.isScrollActive,
-      setIsScrollActive = context.setIsScrollActive,
-      enableScrollTracking = context.enableScrollTracking;
-    var _React$useState3 = React__default.default.useState(false),
-      _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
-      hasScroll = _React$useState4[0],
-      setHasScroll = _React$useState4[1];
-    var scrollTopRef = React__default.default.useRef(0);
-    var scrollBarRef = React__default.default.useRef(null);
-    React__default.default.useEffect(function () {
-      if (!enableScrollTracking) return;
-      var element = contentRef.current;
-      if (!element) return;
-      var handleScroll = function handleScroll() {
-        setIsScrollActive(element.scrollTop > 10);
-      };
-      element.addEventListener('scroll', handleScroll);
-      return function () {
-        element.removeEventListener('scroll', handleScroll);
-      };
-    }, [enableScrollTracking, setIsScrollActive]);
-    // ✅ 2. 스크롤 위치 계산용 useEffect (커스텀 스크롤바용)
-    React__default.default.useEffect(function () {
-      var el = contentRef.current;
-      if (!el || !('ResizeObserver' in window)) return;
-      var observer = new ResizeObserver(function () {
-        var scrollHeight = el.scrollHeight,
-          clientHeight = el.clientHeight;
-        setHasScroll(scrollHeight > clientHeight);
-      });
-      var updateScrollBar = function updateScrollBar() {
-        var scrollTop = el.scrollTop,
-          scrollHeight = el.scrollHeight,
-          clientHeight = el.clientHeight;
-        // 상태로 관리하지 않고 직접 반영
-        scrollTopRef.current = scrollTop;
-        var thumbHeight = clientHeight / scrollHeight * clientHeight;
-        var top = scrollTop / scrollHeight * clientHeight;
-        if (scrollBarRef.current) {
-          scrollBarRef.current.style.height = "".concat(thumbHeight, "px");
-          scrollBarRef.current.style.top = "".concat(top, "px");
-        }
-        setHasScroll(scrollHeight > clientHeight);
-      };
-      el.addEventListener('scroll', updateScrollBar);
-      observer.observe(el);
-      requestAnimationFrame(function () {
-        if (el.scrollHeight > el.clientHeight) {
-          el.scrollTop = 1; // 👉 살짝 움직여줌
-          el.scrollTop = 0; // 👉 바로 다시 원위치
-          updateScrollBar(); // 👉 thumb도 즉시 업데이트
+    return function () {
+      return el.removeEventListener('scroll', updateScrollBar);
+    };
+  }, []);
+  return jsxRuntime.jsxs(Stack, {
+    sx: {
+      position: 'relative',
+      height: '100%'
+    },
+    children: [jsxRuntime.jsxs(ContentContainerInner, {
+      ref: contentRef,
+      theme: theme,
+      flex: 1,
+      sx: Object.assign(Object.assign({}, sx), {
+        scrollbarWidth: 'none',
+        msOverflowStyle: 'none',
+        '&::-webkit-scrollbar': {
+          display: 'none'
         }
-      });
-      return function () {
-        el.removeEventListener('scroll', updateScrollBar);
-        observer.disconnect();
-      };
-    }, []);
-    return jsxRuntime.jsxs(material.Stack, {
-      sx: {
-        position: 'relative',
+      }),
+      children: [children, enableScrollTracking && hasScroll && !isScrollActive && jsxRuntime.jsx(ScrollMoreButton, {
+        children: jsxRuntime.jsx(ScrollMoreIcon.default, {
+          size: 32,
+          color: "white",
+          bgOpacity: 0.5
+        })
+      })]
+    }), hasScroll && jsxRuntime.jsx("div", {
+      style: {
+        position: 'absolute',
+        top: 0,
+        right: "".concat(-1 * scrollbarPostion, "px"),
+        width: '8px',
         height: '100%',
-        width: '100%',
-        flex: 1,
-        maxWidth: '1200px'
+        backgroundColor: '#eee',
+        borderRadius: '4px'
       },
-      children: [jsxRuntime.jsxs(_ContentContainer, {
-        ref: contentRef,
-        theme: theme,
-        flex: 1,
-        sx: Object.assign(Object.assign({}, sx), {
-          scrollbarWidth: 'none',
-          msOverflowStyle: 'none',
-          '&::-webkit-scrollbar': {
-            display: 'none'
-          }
-        }),
-        children: [children, enableScrollTracking && hasScroll && !isScrollActive && jsxRuntime.jsx(ScrollMoreButton, {
-          children: jsxRuntime.jsx(ScrollMoreIcon.default, {
-            size: 32,
-            color: "white",
-            bgOpacity: 0.5
-          })
-        })]
-      }), hasScroll && jsxRuntime.jsx("div", {
+      children: jsxRuntime.jsx("div", {
+        ref: scrollBarRef,
         style: {
+          width: '100%',
+          backgroundColor: theme.palette.primary.main,
+          borderRadius: '4px',
           position: 'absolute',
-          top: 0,
-          right: "".concat(-1 * scrollbarPostion, "px"),
-          width: '8px',
-          height: '100%',
-          backgroundColor: '#eee',
-          borderRadius: '4px'
-        },
-        children: jsxRuntime.jsx("div", {
-          ref: scrollBarRef,
-          style: {
-            width: '100%',
-            backgroundColor: theme.palette.primary.main,
-            borderRadius: '4px',
-            position: 'absolute',
-            transition: 'top 0.01s linear'
-          }
-        })
-      })]
-    });
-  },
-  Subtitle: function Subtitle(_ref4) {
-    var children = _ref4.children,
-      _ref4$alignment = _ref4.alignment,
-      alignment = _ref4$alignment === void 0 ? "left" : _ref4$alignment,
-      _ref4$justifyContent = _ref4.justifyContent,
-      justifyContent = _ref4$justifyContent === void 0 ? "flex-start" : _ref4$justifyContent,
-      sx = _ref4.sx;
-    var context = React__default.default.useContext(EliceLayoutContext);
-    if (!context) {
-      throw new Error("EliceLayout components must be used within an EliceLayout provider.");
-    }
-    var isScrollActive = context.isScrollActive,
-      enableScrollTracking = context.enableScrollTracking;
-    return jsxRuntime.jsx(SubtitleContainer, {
-      isSticky: enableScrollTracking && isScrollActive,
-      alignment: alignment,
-      justifyContent: justifyContent,
-      sx: sx,
-      children: children
-    });
-  },
-  Content: function Content(_ref5) {
-    var children = _ref5.children,
-      _ref5$alignment = _ref5.alignment,
-      alignment = _ref5$alignment === void 0 ? "left" : _ref5$alignment,
-      _ref5$justifyContent = _ref5.justifyContent,
-      justifyContent = _ref5$justifyContent === void 0 ? "flex-start" : _ref5$justifyContent,
-      sx = _ref5.sx;
-    return jsxRuntime.jsx(_Content, {
-      alignment: alignment,
-      justifyContent: justifyContent,
-      sx: sx,
-      children: children
-    });
-  },
-  FooterContainer: function FooterContainer(_ref6) {
-    var children = _ref6.children,
-      sx = _ref6.sx;
-    return jsxRuntime.jsx(_FooterContainer, {
-      sx: sx,
-      children: children
-    });
-  },
-  FooterPaging: LayoutFooterPaging.default,
-  FooterSubmit: LayoutFooterSubmit.default
-});
-var MainContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
-  target: "efnp08i6"
-})("width:100%;height:100vh;justify-content:center;align-items:center;display:flex;flex-direction:column;padding:", function (_ref7) {
-  var isMiniTablet = _ref7.isMiniTablet;
-  return isMiniTablet ? "0 20px" : "0 40px";
-}, ";box-sizing:border-box;position:relative;background-image:", function (_ref8) {
-  var backgroundImage = _ref8.backgroundImage;
-  return backgroundImage ? "url(".concat(backgroundImage, ")") : "none";
-}, ";background-size:cover;background-position:center;background-color:", function (_ref9) {
-  var backgroundColor = _ref9.backgroundColor;
-  return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : "#fff";
-}, ";overflow-y:hidden;");
-var _HeaderContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
-  target: "efnp08i5"
-})("production" === "production" ? {
-  name: "gwvfyq",
-  styles: "height:74px;width:100%;max-width:1200px;justify-content:space-between;flex-direction:row"
-} : {
-  name: "gwvfyq",
-  styles: "height:74px;width:100%;max-width:1200px;justify-content:space-between;flex-direction:row",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var _FooterContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
+          transition: 'top 0.01s linear'
+        }
+      })
+    })]
+  });
+};
+var Subtitle = function Subtitle(_ref6) {
+  var children = _ref6.children,
+    _ref6$alignment = _ref6.alignment,
+    alignment = _ref6$alignment === void 0 ? "left" : _ref6$alignment,
+    _ref6$justifyContent = _ref6.justifyContent,
+    justifyContent = _ref6$justifyContent === void 0 ? "flex-start" : _ref6$justifyContent,
+    sx = _ref6.sx;
+  var context = React__default.default.useContext(EliceLayoutContext);
+  if (!context) {
+    throw new Error("EliceLayout components must be used within an EliceLayout provider.");
+  }
+  var isScrollActive = context.isScrollActive,
+    enableScrollTracking = context.enableScrollTracking;
+  return jsxRuntime.jsx(SubtitleContainer, {
+    isSticky: enableScrollTracking && isScrollActive,
+    alignment: alignment,
+    justifyContent: justifyContent,
+    sx: sx,
+    children: children
+  });
+};
+var ContentInner = /*#__PURE__*/_styled__default.default(Stack, {
   target: "efnp08i4"
+})("flex:1;width:100%;min-height:0;display:flex;text-align:", function (_ref7) {
+  var alignment = _ref7.alignment;
+  return alignment;
+}, ";justify-content:", function (_ref8) {
+  var justifyContent = _ref8.justifyContent;
+  return justifyContent;
+}, ";");
+var Content = function Content(_ref9) {
+  var children = _ref9.children,
+    _ref9$alignment = _ref9.alignment,
+    alignment = _ref9$alignment === void 0 ? "left" : _ref9$alignment,
+    _ref9$justifyContent = _ref9.justifyContent,
+    justifyContent = _ref9$justifyContent === void 0 ? "flex-start" : _ref9$justifyContent,
+    sx = _ref9.sx;
+  return jsxRuntime.jsx(ContentInner, {
+    alignment: alignment,
+    justifyContent: justifyContent,
+    sx: sx,
+    children: children
+  });
+};
+var FooterContainerInner = /*#__PURE__*/_styled__default.default(Stack, {
+  target: "efnp08i3"
 })("production" === "production" ? {
   name: "304f34",
   styles: "height:92px;width:100%;max-width:1200px;padding:18px 0;align-items:center;justify-content:space-between;flex-direction:row"
@@ -268,38 +321,51 @@ var _FooterContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
   styles: "height:92px;width:100%;max-width:1200px;padding:18px 0;align-items:center;justify-content:space-between;flex-direction:row",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-var SubtitleContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
-  target: "efnp08i3"
-})("height:80px;width:100%;max-width:1200px;padding:20px 40px;display:flex;align-items:", function (_ref10) {
-  var alignment = _ref10.alignment;
+var FooterContainer = function FooterContainer(_ref10) {
+  var children = _ref10.children,
+    sx = _ref10.sx;
+  return jsxRuntime.jsx(FooterContainerInner, {
+    sx: sx,
+    children: children
+  });
+};
+var FooterPaging = LayoutFooterPaging.default;
+var FooterSubmit = LayoutFooterSubmit.default;
+var MainContainer = /*#__PURE__*/_styled__default.default(Stack, {
+  target: "efnp08i2"
+})("width:100%;height:100vh;justify-content:center;align-items:center;display:flex;flex-direction:column;padding:", function (_ref11) {
+  var isMiniTablet = _ref11.isMiniTablet;
+  return isMiniTablet ? "0 20px" : "0 40px";
+}, ";box-sizing:border-box;position:relative;background-image:", function (_ref12) {
+  var backgroundImage = _ref12.backgroundImage;
+  return backgroundImage ? "url(".concat(backgroundImage, ")") : "none";
+}, ";background-size:cover;background-position:center;background-color:", function (_ref13) {
+  var backgroundColor = _ref13.backgroundColor;
+  return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : "#fff";
+}, ";overflow-y:hidden;");
+var SubtitleContainer = /*#__PURE__*/_styled__default.default(Stack, {
+  target: "efnp08i1"
+})("height:80px;width:100%;max-width:1200px;padding:20px 40px;display:flex;align-items:", function (_ref14) {
+  var alignment = _ref14.alignment;
   return alignment;
-}, ";justify-content:", function (_ref11) {
-  var justifyContent = _ref11.justifyContent;
+}, ";justify-content:", function (_ref15) {
+  var justifyContent = _ref15.justifyContent;
   return justifyContent;
-}, ";background-color:", function (_ref12) {
-  var isSticky = _ref12.isSticky;
+}, ";background-color:", function (_ref16) {
+  var isSticky = _ref16.isSticky;
   return isSticky ? "#fff" : "none";
-}, ";position:", function (_ref13) {
-  var isSticky = _ref13.isSticky;
+}, ";position:", function (_ref17) {
+  var isSticky = _ref17.isSticky;
   return isSticky ? "sticky" : "relative";
-}, ";top:", function (_ref14) {
-  var isSticky = _ref14.isSticky;
+}, ";top:", function (_ref18) {
+  var isSticky = _ref18.isSticky;
   return isSticky ? "0" : "auto";
-}, ";left:0;z-index:10;transition:all 0.2s ease-in-out;box-shadow:", function (_ref15) {
-  var isSticky = _ref15.isSticky;
+}, ";left:0;z-index:10;transition:all 0.2s ease-in-out;box-shadow:", function (_ref19) {
+  var isSticky = _ref19.isSticky;
   return isSticky ? "0 2px 5px rgba(0, 0, 0, 0.1)" : "none";
 }, ";");
-var _ContentContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
-  target: "efnp08i2"
-})("flex:1;width:100%;max-width:1200px;max-height:calc(100vh - 74px - 92px);overflow-y:auto;min-height:0;position:relative;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref16) {
-  var theme = _ref16.theme;
-  return theme.palette.primary.main;
-}, ";border-radius:4px;}&::-webkit-scrollbar-track{background-color:", function (_ref17) {
-  var theme = _ref17.theme;
-  return theme.palette.grey[300];
-}, ";border-radius:4px;}");
 var ScrollMoreButton = /*#__PURE__*/_styled__default.default(material.Button, {
-  target: "efnp08i1"
+  target: "efnp08i0"
 })("production" === "production" ? {
   name: "qkrk8u",
   styles: "position:absolute;bottom:20px;right:46px;border-radius:50%;min-width:36px;height:36px;padding:0;z-index:20"
@@ -308,14 +374,17 @@ var ScrollMoreButton = /*#__PURE__*/_styled__default.default(material.Button, {
   styles: "position:absolute;bottom:20px;right:46px;border-radius:50%;min-width:36px;height:36px;padding:0;z-index:20",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-var _Content = /*#__PURE__*/_styled__default.default(material.Stack, {
-  target: "efnp08i0"
-})("flex:1;width:100%;min-height:0;display:flex;text-align:", function (_ref18) {
-  var alignment = _ref18.alignment;
-  return alignment;
-}, ";justify-content:", function (_ref19) {
-  var justifyContent = _ref19.justifyContent;
-  return justifyContent;
-}, ";");
 
-exports.default = EliceLayout;
+exports.Box = Box;
+exports.Content = Content;
+exports.ContentContainer = ContentContainer;
+exports.FooterContainer = FooterContainer;
+exports.FooterPaging = FooterPaging;
+exports.FooterSubmit = FooterSubmit;
+exports.HeaderContainer = HeaderContainer;
+exports.HeaderSubTitle = HeaderSubTitle;
+exports.HeaderTitle = HeaderTitle;
+exports.Layout = Layout;
+exports.Stack = Stack;
+exports.Subtitle = Subtitle;
+exports.Typography = Typography;

package/cjs/components/layout/index.d.ts

@@ -1,2 +1,34 @@
-export { default as EliceLayout } from './Layout';
+/// <reference types="react" />
+export { Layout, HeaderContainer, HeaderTitle, HeaderSubTitle, ContentContainer, Content, FooterContainer, FooterPaging, FooterSubmit, Box, Stack, Typography, } from './Layout';
+export declare const EliceLayout: (({ children, onPrev, onNext, allowPrev, allowNext, backgroundImage, backgroundColor, onlyPage, enableScrollTracking, sx }: import("./Layout").EliceLayoutProps) => import("react/jsx-runtime").JSX.Element) & {
+    HeaderContainer: ({ children, sx }: {
+        children: import("react").ReactNode;
+        sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    HeaderTitle: ({ children, titleComponent, sx }: import("./Header").LayoutHeaderTitleProps) => JSX.Element;
+    HeaderSubTitle: ({ children, sx }: import("./Header").LayoutHeaderSubTitleProps) => JSX.Element;
+    Subtitle: ({ children, alignment, justifyContent, sx }: {
+        children: import("react").ReactNode;
+        alignment?: ("center" | "right" | "left") | undefined;
+        justifyContent?: string | undefined;
+        sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    ContentContainer: ({ children, sx, scrollbarPostion }: {
+        children: import("react").ReactNode;
+        sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+        scrollbarPostion?: number | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, alignment, justifyContent, sx, }: {
+        children: import("react").ReactNode;
+        alignment?: ("center" | "right" | "left") | undefined;
+        justifyContent?: string | undefined;
+        sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    FooterContainer: ({ children, sx }: {
+        children: import("react").ReactNode;
+        sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    FooterPaging: import("react").FC<import("./Footer").LayoutFooterPagingProps>;
+    FooterSubmit: ({ isRollback, isSubmit, disableRollback, disableSubmit, submitText, rollbackText, onSubmit, onRollback, sx, }: import("./Footer").LayoutFooterSubmitProps) => import("react/jsx-runtime").JSX.Element;
+};
 export type { EliceLayoutProps } from './Layout';

package/cjs/components/layout/index.js

@@ -2,6 +2,28 @@
 
 var Layout = require('./Layout.js');
 
+var EliceLayout = Object.assign(Layout.Layout, {
+  HeaderContainer: Layout.HeaderContainer,
+  HeaderTitle: Layout.HeaderTitle,
+  HeaderSubTitle: Layout.HeaderSubTitle,
+  Subtitle: Layout.Subtitle,
+  ContentContainer: Layout.ContentContainer,
+  Content: Layout.Content,
+  FooterContainer: Layout.FooterContainer,
+  FooterPaging: Layout.FooterPaging,
+  FooterSubmit: Layout.FooterSubmit
+});
 
-
-exports.EliceLayout = Layout.default;
+exports.Box = Layout.Box;
+exports.Content = Layout.Content;
+exports.ContentContainer = Layout.ContentContainer;
+exports.FooterContainer = Layout.FooterContainer;
+exports.FooterPaging = Layout.FooterPaging;
+exports.FooterSubmit = Layout.FooterSubmit;
+exports.HeaderContainer = Layout.HeaderContainer;
+exports.HeaderSubTitle = Layout.HeaderSubTitle;
+exports.HeaderTitle = Layout.HeaderTitle;
+exports.Layout = Layout.Layout;
+exports.Stack = Layout.Stack;
+exports.Typography = Layout.Typography;
+exports.EliceLayout = EliceLayout;