@elicecontents/content-ui 0.0.0 → 1.0.0

package/cjs/typography/typography.js

@@ -12,12 +12,6 @@ var createAIDTTypography = function createAIDTTypography(fontFamily) {
       fontWeight: 900,
       fontDisplay: 'swap',
       src: "url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard.css') format('woff2')"
-    }, {
-      fontFamily: 'Pretendard',
-      fontStyle: 'normal',
-      fontWeight: 800,
-      fontDisplay: 'swap',
-      src: "url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/Pretendard-Bold.min.css') format('woff2')"
     }, {
       fontFamily: 'Pretendard',
       fontStyle: 'normal',
@@ -30,30 +24,12 @@ var createAIDTTypography = function createAIDTTypography(fontFamily) {
       fontWeight: 500,
       fontDisplay: 'swap',
       src: "url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/Pretendard-Medium.min.css') format('woff2')"
-    }, {
-      fontFamily: 'Pretendard',
-      fontStyle: 'normal',
-      fontWeight: 400,
-      fontDisplay: 'swap',
-      src: "url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/Pretendard-Regular.min.css') format('woff2')"
-    }, {
-      fontFamily: 'Pretendard',
-      fontStyle: 'normal',
-      fontWeight: 300,
-      fontDisplay: 'swap',
-      src: "url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/Pretendard-Light.min.css') format('woff2')"
     }, {
       fontFamily: 'EliceDXNeolli',
       fontStyle: 'normal',
       fontWeight: 900,
       fontDisplay: 'swap',
       src: "url(https://cdn.jsdelivr.net/gh/fonts-archive/EliceDXNeolli/EliceDXNeolli-Bold.woff2) format('woff2')"
-    }, {
-      fontFamily: 'EliceDXNeolli',
-      fontStyle: 'normal',
-      fontWeight: 800,
-      fontDisplay: 'swap',
-      src: "url(https://cdn.jsdelivr.net/gh/fonts-archive/EliceDXNeolli/EliceDXNeolli-Bold.woff2) format('woff2')"
     }, {
       fontFamily: 'EliceDXNeolli',
       fontStyle: 'normal',
@@ -66,118 +42,61 @@ var createAIDTTypography = function createAIDTTypography(fontFamily) {
       fontWeight: 500,
       fontDisplay: 'swap',
       src: "url(https://cdn.jsdelivr.net/gh/fonts-archive/EliceDXNeolli/EliceDXNeolli-Medium.woff2) format('woff2')"
-    }, {
-      fontFamily: 'EliceDXNeolli',
-      fontStyle: 'normal',
-      fontWeight: 400,
-      fontDisplay: 'swap',
-      src: "url('https://cdn.jsdelivr.net/gh/fonts-archive/EliceDXNeolli/EliceDXNeolli-Medium.woff2') format('woff2')"
-    }, {
-      fontFamily: 'EliceDXNeolli',
-      fontStyle: 'normal',
-      fontWeight: 300,
-      fontDisplay: 'swap',
-      src: "url('https://cdn.jsdelivr.net/gh/fonts-archive/EliceDXNeolli/EliceDXNeolli-Light.woff2') format('woff2')"
     }],
-    h1: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
-      fontSize: '3.5rem'
-    }, "@media (max-width:1279px)", {
-      fontSize: '2.75rem'
-    }), "@media (max-height:800px)", {
-      fontSize: '2rem'
-    }), "@media (max-width:1023px)", {
-      fontSize: '2rem'
-    }), "fontWeight", 800), "lineHeight", 1.18),
-    h2: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
-      fontSize: '3rem'
-    }, "@media (max-width:1279px)", {
-      fontSize: '2.5rem'
-    }), "@media (max-height:800px)", {
-      fontSize: '1.75rem'
-    }), "@media (max-width:1023px)", {
-      fontSize: '1.75rem'
-    }), "fontWeight", 800), "lineHeight", 1.2),
-    h3: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
-      fontSize: '2.25rem'
-    }, "@media (max-width:1279px)", {
-      fontSize: '2.25rem'
-    }), "@media (max-height:800px)", {
-      fontSize: '1.625rem'
-    }), "@media (max-width:1023px)", {
-      fontSize: '1.625rem'
-    }), "fontWeight", 800), "lineHeight", 1.2),
-    h4: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
-      fontSize: '2rem'
-    }, "@media (max-width:1279px)", {
-      fontSize: '2rem'
-    }), "@media (max-height:800px)", {
-      fontSize: '1.5rem'
-    }), "@media (max-width:1023px)", {
-      fontSize: '1.5rem'
-    }), "fontWeight", 800), "lineHeight", 1.24),
-    h5: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
-      fontSize: '1.75rem'
-    }, "@media (max-width:1279px)", {
-      fontSize: '1.75rem'
-    }), "@media (max-height:800px)", {
-      fontSize: '1.375rem'
-    }), "@media (max-width:1023px)", {
-      fontSize: '1.375rem'
-    }), "fontWeight", 800), "lineHeight", 1.28),
-    h6: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
-      fontSize: '1.5rem'
-    }, "@media (max-width:1279px)", {
-      fontSize: '1.5rem'
-    }), "@media (max-height:800px)", {
-      fontSize: '1.25rem'
-    }), "@media (max-width:1023px)", {
-      fontSize: '1.25rem'
-    }), "fontWeight", 800), "lineHeight", 1.24),
-    subtitle1: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
-      fontSize: '1.25rem'
-    }, "@media (max-width:1279px)", {
-      fontSize: '1.2rem'
-    }), "@media (max-height:800px)", {
-      fontSize: '1.125rem'
-    }), "@media (max-width:1023px)", {
-      fontSize: '1.125rem'
-    }), "fontWeight", 800), "lineHeight", 1.4),
-    subtitle2: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
-      fontSize: '1.125rem'
-    }, "@media (max-width:1279px)", {
-      fontSize: '1.1rem'
-    }), "@media (max-height:800px)", {
-      fontSize: '1rem'
-    }), "@media (max-width:1023px)", {
-      fontSize: '1rem'
-    }), "fontWeight", 800), "lineHeight", 1.32),
-    body1: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
-      fontSize: '1rem'
-    }, "@media (max-width:1279px)", {
-      fontSize: '1rem'
-    }), "@media (max-height:800px)", {
-      fontSize: '0.9375rem'
-    }), "@media (max-width:1023px)", {
-      fontSize: '0.9375rem'
-    }), "fontWeight", 500), "lineHeight", 1.48),
-    body2: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
-      fontSize: '0.875rem'
-    }, "@media (max-width:1279px)", {
-      fontSize: '0.875rem'
-    }), "@media (max-height:800px)", {
-      fontSize: '0.8125rem'
-    }), "@media (max-width:1023px)", {
-      fontSize: '0.8125rem'
-    }), "fontWeight", 500), "lineHeight", 1.4),
-    caption: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
-      fontSize: '0.75rem'
-    }, "@media (max-width:1279px)", {
-      fontSize: '0.75rem'
-    }), "@media (max-height:800px)", {
-      fontSize: '0.6875rem'
-    }), "@media (max-width:1023px)", {
-      fontSize: '0.6875rem'
-    }), "fontWeight", 500), "lineHeight", 1.32)
+    h1: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
+      fontSize: '20px',
+      fontWeight: 700,
+      lineHeight: '140%'
+    }, "@media (max-width:1200px)", {
+      fontSize: '20px'
+    }), "@media (max-width:512px)", {
+      fontSize: '22px'
+    }),
+    subtitle1: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
+      fontSize: '26px',
+      fontWeight: 700,
+      lineHeight: '140%'
+    }, "@media (max-width:1200px)", {
+      fontSize: '26px'
+    }), "@media (max-width:512px)", {
+      fontSize: '22px'
+    }),
+    subtitle2: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
+      fontSize: '20px',
+      fontWeight: 700,
+      lineHeight: '140%'
+    }, "@media (max-width:1200px)", {
+      fontSize: '20px'
+    }), "@media (max-width:512px)", {
+      fontSize: '16px'
+    }),
+    body1: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
+      fontSize: '20px',
+      fontWeight: 500,
+      lineHeight: '140%'
+    }, "@media (max-width:1200px)", {
+      fontSize: '20px'
+    }), "@media (max-width:512px)", {
+      fontSize: '16px'
+    }),
+    buttoninput: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
+      fontSize: '20px',
+      fontWeight: 700,
+      lineHeight: '140%'
+    }, "@media (max-width:1200px)", {
+      fontSize: '20px'
+    }), "@media (max-width:512px)", {
+      fontSize: '16px'
+    }),
+    pagination: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
+      fontSize: '32px',
+      fontWeight: 900,
+      lineHeight: '140%'
+    }, "@media (max-width:1200px)", {
+      fontSize: '32px'
+    }), "@media (max-width:512px)", {
+      fontSize: '24px'
+    })
   };
 };
 

package/es/_virtual/_rollupPluginBabelHelpers.js

@@ -53,6 +53,13 @@ function _nonIterableSpread() {
 function _slicedToArray(r, e) {
   return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
 }
+function _taggedTemplateLiteral(e, t) {
+  return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
+    raw: {
+      value: Object.freeze(t)
+    }
+  }));
+}
 function _toConsumableArray(r) {
   return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
 }
@@ -78,4 +85,4 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
-export { _arrayLikeToArray as arrayLikeToArray, _arrayWithHoles as arrayWithHoles, _arrayWithoutHoles as arrayWithoutHoles, _defineProperty as defineProperty, _iterableToArray as iterableToArray, _iterableToArrayLimit as iterableToArrayLimit, _nonIterableRest as nonIterableRest, _nonIterableSpread as nonIterableSpread, _slicedToArray as slicedToArray, _toConsumableArray as toConsumableArray, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey, _unsupportedIterableToArray as unsupportedIterableToArray };
+export { _arrayLikeToArray as arrayLikeToArray, _arrayWithHoles as arrayWithHoles, _arrayWithoutHoles as arrayWithoutHoles, _defineProperty as defineProperty, _iterableToArray as iterableToArray, _iterableToArrayLimit as iterableToArrayLimit, _nonIterableRest as nonIterableRest, _nonIterableSpread as nonIterableSpread, _slicedToArray as slicedToArray, _taggedTemplateLiteral as taggedTemplateLiteral, _toConsumableArray as toConsumableArray, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey, _unsupportedIterableToArray as unsupportedIterableToArray };

package/es/components/button/Button.js

@@ -2,6 +2,7 @@ import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useTheme, Button, Typography } from '@mui/material';
+import useAIDTMediaQuery from '../../hooks/useAIDTMediaQuery.js';
 
 var EliceButton = forwardRef(function (_a, ref) {
   var children = _a.children,
@@ -10,21 +11,24 @@ var EliceButton = forwardRef(function (_a, ref) {
     disabled = _a.disabled,
     rest = __rest(_a, ["children", "variant", "disabled"]);
   var theme = useTheme();
+  var _useAIDTMediaQuery = useAIDTMediaQuery(),
+    isMiniTablet = _useAIDTMediaQuery.isMiniTablet;
   return jsx(Button, Object.assign({
     ref: ref,
     variant: variant,
     disabled: disabled,
     sx: {
       width: 'fit-content',
-      borderRadius: '1rem',
-      padding: '0.75rem 1.25rem',
+      height: isMiniTablet ? '42px' : '56px',
+      borderRadius: isMiniTablet ? '12px' : '16px',
+      padding: isMiniTablet ? '8px 12px' : '12px 20px',
       color: disabled ? theme.palette.text.disabled : variant === 'outlined' ? theme.palette.primary.main : theme.palette.common.white,
       backgroundColor: variant === 'outlined' ? theme.palette.common.white : disabled ? theme.palette.grey[300] : theme.palette.primary.main,
       fontFamily: 'inherit'
     }
   }, rest, {
     children: jsx(Typography, {
-      variant: "subtitle1",
+      variant: "buttoninput",
       children: children
     })
   }));

package/es/components/icon-button/IconButton.d.ts

@@ -2,6 +2,10 @@ import { type IconButtonProps } from '@mui/material';
 import type { ReactNode } from 'react';
 export interface EliceIconButtonProps extends IconButtonProps {
     children: ReactNode;
+    backgroundColor?: string;
+    width?: number;
+    height?: number;
+    borderRadius?: number;
 }
-declare const EliceIconButton: ({ children, disabled, ...rest }: EliceIconButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const EliceIconButton: ({ children, disabled, backgroundColor, width, height, borderRadius, ...rest }: EliceIconButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default EliceIconButton;

package/es/components/icon-button/IconButton.js

@@ -2,21 +2,29 @@ import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { useTheme, IconButton } from '@mui/material';
 import { gray400Color, gray300Color } from '../tokenColorTemporary.js';
+import useAIDTMediaQuery from '../../hooks/useAIDTMediaQuery.js';
 
 var EliceIconButton = function EliceIconButton(_a) {
   var children = _a.children,
     disabled = _a.disabled,
-    rest = __rest(_a, ["children", "disabled"]);
+    backgroundColor = _a.backgroundColor,
+    width = _a.width,
+    height = _a.height,
+    borderRadius = _a.borderRadius,
+    rest = __rest(_a, ["children", "disabled", "backgroundColor", "width", "height", "borderRadius"]);
   var theme = useTheme();
+  var _useAIDTMediaQuery = useAIDTMediaQuery(),
+    isMiniTablet = _useAIDTMediaQuery.isMiniTablet;
   return jsx(IconButton, Object.assign({
     disabled: disabled,
     style: {
       flexShrink: 0,
-      height: '3.5rem',
-      width: '3.5rem',
+      height: height !== null && height !== void 0 ? height : '3.5rem',
+      width: width !== null && width !== void 0 ? width : '3.5rem',
       boxSizing: 'border-box',
-      backgroundColor: disabled ? gray300Color : theme.palette.primary.main,
-      borderRadius: '1rem',
+      backgroundColor: disabled ? gray300Color : backgroundColor ? backgroundColor : theme.palette.primary.main,
+      borderRadius: borderRadius !== null && borderRadius !== void 0 ? borderRadius : '1rem',
+      padding: isMiniTablet ? 8 : 10,
       color: disabled ? gray400Color : theme.palette.primary.light
     }
   }, rest, {

package/es/components/index.d.ts

@@ -16,3 +16,4 @@ export * from './textarea';
 export * from './tooltip';
 export * from './AIDTTypography';
 export * from './AdaptiveImage';
+export * from './subtitle-button';

package/es/components/index.js

@@ -1,3 +1,4 @@
+export { default as EliceImage } from './AdaptiveImage/AdaptiveImage.js';
 export { default as EliceAIFeedback } from './AI-feedback/AIFeedback.js';
 export { default as EliceBadge } from './badge/Badge.js';
 export { default as EliceButton } from './button/Button.js';
@@ -13,4 +14,4 @@ export { default as EliceTable } from './table/Table.js';
 export { default as EliceTextarea } from './textarea/Textarea.js';
 export { default as EliceTooltip } from './tooltip/Tooltip.js';
 export { default as AIDTTypography } from './AIDTTypography/AIDTTypography.js';
-export { default as EliceImage } from './AdaptiveImage/AdaptiveImage.js';
+export { default as EliceSubButton } from './subtitle-button/SubtitleButton.js';

package/es/components/layout/Footer/LayoutFooterPaging.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface LayoutFooterPagingProps {
+    currentPage: number;
+    totalPage: number;
+}
+declare const LayoutFooterPaging: React.FC<LayoutFooterPagingProps>;
+export default LayoutFooterPaging;

package/es/components/layout/Footer/LayoutFooterPaging.js

@@ -0,0 +1,38 @@
+import _styled from '@emotion/styled/base';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Typography, useTheme } from '@mui/material';
+
+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 FooterPagination = /*#__PURE__*/_styled(Typography, {
+  target: "ecog5a41"
+})("production" === "production" ? {
+  name: "17qwk4",
+  styles: "padding:0 32px"
+} : {
+  name: "17qwk4",
+  styles: "padding:0 32px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledCurrentPage = /*#__PURE__*/_styled("span", {
+  target: "ecog5a40"
+})("color:", function (_ref) {
+  var fontColor = _ref.fontColor;
+  return fontColor;
+}, ";");
+var LayoutFooterPaging = function LayoutFooterPaging(_ref2) {
+  var currentPage = _ref2.currentPage,
+    totalPage = _ref2.totalPage;
+  var theme = useTheme();
+  return jsxs(FooterPagination, {
+    variant: "pagination",
+    sx: {
+      color: "#D8D8E2"
+    },
+    children: [jsx(StyledCurrentPage, {
+      fontColor: theme.palette.primary.main,
+      children: currentPage
+    }), " ", "/ ", totalPage]
+  });
+};
+
+export { LayoutFooterPaging as default };

package/es/components/layout/Footer/LayoutFooterSubmit.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const LayoutFooterSubmit: React.FC;
+export default LayoutFooterSubmit;

package/es/components/layout/Footer/LayoutFooterSubmit.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Stack } from '@mui/material';
+import EliceButton from '../../button/Button.js';
+
+var LayoutFooterSubmit = function LayoutFooterSubmit() {
+  return jsxs(Stack, {
+    direction: "row",
+    spacing: 1,
+    children: [jsx(EliceButton, {
+      variant: "outlined",
+      children: "\uB2E4\uC2DC\uD558\uAE30"
+    }), jsx(EliceButton, {
+      children: "\uC81C\uCD9C\uD558\uAE30"
+    })]
+  });
+};
+
+export { LayoutFooterSubmit as default };

package/es/components/layout/Footer/index.d.ts

@@ -0,0 +1,3 @@
+export { default as LayoutFooterPaging } from './LayoutFooterPaging';
+export { default as LayoutFooterSubmit } from './LayoutFooterSubmit';
+export type { LayoutFooterPagingProps } from './LayoutFooterPaging';

package/es/components/layout/Footer/index.js

@@ -0,0 +1,2 @@
+export { default as LayoutFooterPaging } from './LayoutFooterPaging.js';
+export { default as LayoutFooterSubmit } from './LayoutFooterSubmit.js';

package/es/components/layout/Header/LayoutHeaderSubTitle.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface LayoutHeaderSubTitleProps {
+    children: React.ReactNode;
+}
+declare const LayoutHeaderSubTitle: ({ children }: LayoutHeaderSubTitleProps) => JSX.Element;
+export default LayoutHeaderSubTitle;

package/es/components/layout/Header/LayoutHeaderSubTitle.js

@@ -0,0 +1,54 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral, slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useState } from 'react';
+import { Menu } from '@base-ui-components/react/menu';
+import { styled, Stack } from '@mui/material';
+import useAIDTMediaQuery from '../../../hooks/useAIDTMediaQuery.js';
+import EliceIconButton from '../../icon-button/IconButton.js';
+import MoreColumn from '../../../icons/MoreColumn.js';
+import { bluepurple } from '../../../tokens/colors/bluepurple.js';
+
+var _templateObject, _templateObject2, _templateObject3;
+var StyledPopup = styled(Menu.Popup)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  min-width: 150px;\n  background: transparent;\n  padding-top: 10px;\n  border-radius: 8px;\n"])));
+var StyledMenuItem = styled(Menu.Item)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction: column;\n"])));
+var StyledMoreTrigger = styled(Menu.Trigger)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border: none;\n  background-color: #fff;\n  padding: 0;\n"])));
+var LayoutHeaderSubTitle = function LayoutHeaderSubTitle(_ref) {
+  var children = _ref.children;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    menuOpen = _useState2[0],
+    setMenuOpen = _useState2[1];
+  var _useAIDTMediaQuery = useAIDTMediaQuery(),
+    isTablet = _useAIDTMediaQuery.isTablet; // ✅ 반응형 적용
+  return jsx(Stack, {
+    direction: "row",
+    spacing: 2,
+    alignItems: "center",
+    children: isTablet ? jsxs(Menu.Root, {
+      open: menuOpen,
+      onOpenChange: setMenuOpen,
+      children: [jsx(StyledMoreTrigger, {
+        children: jsx(EliceIconButton, {
+          width: 48,
+          height: 48,
+          backgroundColor: bluepurple[100],
+          borderRadius: 12,
+          children: jsx(MoreColumn, {})
+        })
+      }), jsx(Menu.Portal, {
+        children: jsx(Menu.Positioner, {
+          align: "start",
+          children: jsxs(StyledPopup, {
+            children: [jsx(Menu.Arrow, {}), React.Children.map(children, function (child, index) {
+              return jsx(StyledMenuItem, {
+                children: child
+              }, index);
+            })]
+          })
+        })
+      })]
+    }) : children
+  });
+};
+
+export { LayoutHeaderSubTitle as default };

package/es/components/layout/Header/LayoutHeaderTitle.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface LayoutHeaderTitleProps {
+    children?: React.ReactNode;
+    titleComponent?: React.ReactNode;
+}
+declare const LayoutHeaderTitle: ({ children, titleComponent }: LayoutHeaderTitleProps) => JSX.Element;
+export default LayoutHeaderTitle;

package/es/components/layout/Header/LayoutHeaderTitle.js

@@ -0,0 +1,35 @@
+import _styled from '@emotion/styled/base';
+import { jsx } from 'react/jsx-runtime';
+import { Typography, useTheme, Stack } from '@mui/material';
+
+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 StyledTitle = /*#__PURE__*/_styled(Stack, {
+  target: "e1to23d41"
+})("flex-shrink:0;width:fit-content;background-color:", function (_ref) {
+  var bgColor = _ref.bgColor;
+  return bgColor;
+}, ";position:relative;top:auto;box-sizing:border-box;padding-top:17px;border-radius:0 0 26px 26px;");
+var Title = /*#__PURE__*/_styled(Typography, {
+  target: "e1to23d40"
+})("production" === "production" ? {
+  name: "v13ytb",
+  styles: "border-top:1px dashed #fff;height:100%;display:flex;justify-content:center;padding:11px 24px;text-align:center;color:#fff"
+} : {
+  name: "v13ytb",
+  styles: "border-top:1px dashed #fff;height:100%;display:flex;justify-content:center;padding:11px 24px;text-align:center;color:#fff",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var LayoutHeaderTitle = function LayoutHeaderTitle(_ref2) {
+  var children = _ref2.children,
+    titleComponent = _ref2.titleComponent;
+  var theme = useTheme();
+  return jsx(StyledTitle, {
+    bgColor: theme.palette.secondary.main,
+    children: titleComponent ? titleComponent : typeof children === "string" ? jsx(Title, {
+      variant: "h1",
+      children: children
+    }) : children
+  });
+};
+
+export { LayoutHeaderTitle as default };

package/es/components/layout/Header/index.d.ts

@@ -0,0 +1,4 @@
+export { default as LayoutHeaderSubTitle } from './LayoutHeaderSubTitle';
+export { default as LayoutHeaderTitle } from './LayoutHeaderTitle';
+export type { LayoutHeaderSubTitleProps } from './LayoutHeaderSubTitle';
+export type { LayoutHeaderTitleProps } from './LayoutHeaderTitle';

package/es/components/layout/Header/index.js

@@ -0,0 +1,2 @@
+export { default as LayoutHeaderSubTitle } from './LayoutHeaderSubTitle.js';
+export { default as LayoutHeaderTitle } from './LayoutHeaderTitle.js';

package/es/components/layout/Layout.d.ts

@@ -1,16 +1,31 @@
-import type { ReactNode } from 'react';
+import React from "react";
 export interface EliceLayoutProps {
-    levelKey?: 'elementary' | 'middle' | 'high';
-    title: string;
-    children: ReactNode;
-    sideChildren?: ReactNode;
-    currentPage: number;
-    totalPage: number;
-    onReset?: VoidFunction;
-    onPrev?: VoidFunction;
-    onNext?: VoidFunction;
-    allowPre?: boolean;
+    children: React.ReactNode;
+    onPrev?: () => void;
+    onNext?: () => void;
+    allowPrev?: boolean;
     allowNext?: boolean;
 }
-declare const EliceLayout: (props: EliceLayoutProps) => import("react/jsx-runtime").JSX.Element;
+declare const EliceLayout: (({ children, onPrev, onNext, allowPrev, allowNext }: EliceLayoutProps) => import("react/jsx-runtime").JSX.Element) & {
+    HeaderContainer: ({ children, height }: {
+        children: React.ReactNode;
+        height?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    HeaderTitle: ({ children, titleComponent }: import("./Header").LayoutHeaderTitleProps) => JSX.Element;
+    HeaderSubTitle: ({ children }: import("./Header").LayoutHeaderSubTitleProps) => JSX.Element;
+    Subtitle: ({ children, height }: {
+        children: React.ReactNode;
+        height?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, height }: {
+        children: React.ReactNode;
+        height?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    FooterContainer: ({ children, height }: {
+        children: React.ReactNode;
+        height?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    FooterPaging: React.FC<import("./Footer").LayoutFooterPagingProps>;
+    FooterSubmit: React.FC<{}>;
+};
 export default EliceLayout;