@elicecontents/content-ui 0.0.0 → 1.0.0

package/cjs/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;

package/cjs/components/layout/Layout.js

@@ -4,194 +4,115 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
-var reactUse = require('react-use');
-var LoopIcon = require('@mui/icons-material/Loop');
 var material = require('@mui/material');
-var tokenColorTemporary = require('../tokenColorTemporary.js');
-var bg_pattern = require('./bg_pattern.png.js');
-var ArrowLeft = require('../../icons/ArrowLeft.js');
-var ArrowRight = require('../../icons/ArrowRight.js');
+var useAIDTMediaQuery = require('../../hooks/useAIDTMediaQuery.js');
+var LayoutPagination = require('./layout-pagination/LayoutPagination.js');
+var LayoutHeaderSubTitle = require('./Header/LayoutHeaderSubTitle.js');
+var LayoutHeaderTitle = require('./Header/LayoutHeaderTitle.js');
+var LayoutFooterPaging = require('./Footer/LayoutFooterPaging.js');
+var LayoutFooterSubmit = require('./Footer/LayoutFooterSubmit.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
-var LoopIcon__default = /*#__PURE__*/_interopDefaultCompat(LoopIcon);
 
-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 StyledContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
-  target: "efnp08i6"
-})("production" === "production" ? {
-  name: "14skuem",
-  styles: "display:flex;flex-direction:column;height:100%;width:100%;min-height:10rem;max-height:calc(100vh - 3.5rem);box-sizing:border-box;position:relative;padding:1.5rem 3.125rem"
-} : {
-  name: "14skuem",
-  styles: "display:flex;flex-direction:column;height:100%;width:100%;min-height:10rem;max-height:calc(100vh - 3.5rem);box-sizing:border-box;position:relative;padding:1.5rem 3.125rem",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var StyledContentContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
-  target: "efnp08i5"
-})("production" === "production" ? {
-  name: "1p0a3is",
-  styles: "display:flex;flex-direction:column;flex-grow:1;gap:0px;position:relative;z-index:2;border-radius:2rem;background-color:rgb(255, 255, 255);overflow:hidden"
-} : {
-  name: "1p0a3is",
-  styles: "display:flex;flex-direction:column;flex-grow:1;gap:0px;position:relative;z-index:2;border-radius:2rem;background-color:rgb(255, 255, 255);overflow:hidden",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var StyledTitleContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
+var MainContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "efnp08i4"
-})("background-color:", function (props) {
-  return props.backgroundColor ? props.backgroundColor : 'rgb(93, 107, 179)';
-}, ";z-index:500;flex-shrink:0;height:4.625rem;width:fit-content;min-width:20.875rem;position:relative;top:auto;left:3.125rem;border-radius:0px 0px 1.625rem 1.625rem;padding-top:1rem;box-sizing:border-box;");
-var StyledTitle = /*#__PURE__*/_styled__default.default(material.Typography, {
+})("width:100%;height:100%;background:#fff;padding:", function (_ref) {
+  var isMiniTablet = _ref.isMiniTablet;
+  return isMiniTablet ? "0 20px" : "0 40px";
+}, ";box-sizing:border-box;position:relative;");
+var _HeaderContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "efnp08i3"
-})("production" === "production" ? {
-  name: "1gsf9d8",
-  styles: "border-top:0.125rem dashed rgb(255, 255, 255);height:100%;min-width:100%;text-align:center;font-size:1.375rem;font-weight:700;color:rgb(255, 255, 255);display:flex;align-items:center;justify-content:center"
-} : {
-  name: "1gsf9d8",
-  styles: "border-top:0.125rem dashed rgb(255, 255, 255);height:100%;min-width:100%;text-align:center;font-size:1.375rem;font-weight:700;color:rgb(255, 255, 255);display:flex;align-items:center;justify-content:center",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var StyledScrollBarStack = /*#__PURE__*/_styled__default.default(material.Stack, {
+})("height:", function (_ref2) {
+  var height = _ref2.height;
+  return height || "74px";
+}, ";width:100%;background:#fff;justify-content:space-between;flex-direction:row;align-items:center;");
+var SubtitleContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "efnp08i2"
-})("flex-grow:1;position:relative;max-height:100%;overflow-y:scroll;box-sizing:border-box;::-webkit-scrollbar{width:0.5rem;}::-webkit-scrollbar-track{background:", tokenColorTemporary.gray200Color, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", tokenColorTemporary.main300Color, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", tokenColorTemporary.main400Color, ";}");
-var StyledStepSwitcherContainerStack = /*#__PURE__*/_styled__default.default(material.Stack, {
+})("height:", function (_ref3) {
+  var height = _ref3.height;
+  return height || "80px";
+}, ";width:100%;padding:20px 40px;background-color:#f7f7f7;margin-top:18px;margin-bottom:14px;display:flex;align-items:center;");
+var ContentContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "efnp08i1"
-})("production" === "production" ? {
-  name: "8mh45e",
-  styles: "flex-direction:row;width:100%;height:4.25rem;justify-content:space-between;align-items:center;padding-left:1.5rem;padding-right:1.5rem;box-sizing:border-box;flex-shrink:0"
-} : {
-  name: "8mh45e",
-  styles: "flex-direction:row;width:100%;height:4.25rem;justify-content:space-between;align-items:center;padding-left:1.5rem;padding-right:1.5rem;box-sizing:border-box;flex-shrink:0",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var StyledSwitchStepButton = /*#__PURE__*/_styled__default.default(material.Typography, {
+})("height:", function (_ref4) {
+  var height = _ref4.height;
+  return height || "100%";
+}, ";width:100%;background-color:#fff;");
+var _FooterContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "efnp08i0"
-})("production" === "production" ? {
-  name: "9f748q",
-  styles: "cursor:pointer;font-size:1.625rem;font-weight:700;height:2.5rem;display:flex;align-items:center"
-} : {
-  name: "9f748q",
-  styles: "cursor:pointer;font-size:1.625rem;font-weight:700;height:2.5rem;display:flex;align-items:center",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var EliceLayout = function EliceLayout(props) {
-  var _a;
-  var _props$levelKey = props.levelKey,
-    levelKey = _props$levelKey === void 0 ? 'middle' : _props$levelKey,
-    children = props.children,
-    sideChildren = props.sideChildren,
-    _props$title = props.title,
-    title = _props$title === void 0 ? 'The title' : _props$title,
-    currentPage = props.currentPage,
-    totalPage = props.totalPage,
-    allowNext = props.allowNext,
-    allowPre = props.allowPre,
-    onNext = props.onNext,
-    onPrev = props.onPrev,
-    onReset = props.onReset;
+})("height:", function (_ref5) {
+  var height = _ref5.height;
+  return height || "92px";
+}, ";width:100%;background:#fff;padding:18px 0;align-items:center;justify-content:space-between;flex-direction:row;");
+var EliceLayout = Object.assign(function (_ref6) {
+  var children = _ref6.children,
+    onPrev = _ref6.onPrev,
+    onNext = _ref6.onNext,
+    allowPrev = _ref6.allowPrev,
+    allowNext = _ref6.allowNext;
   var theme = material.useTheme();
-  var renderBgColorByLevelKey = function renderBgColorByLevelKey() {
-    if (levelKey === 'elementary') {
-      return tokenColorTemporary.KeyElementaryBg;
-    } else if (levelKey === 'middle') {
-      return tokenColorTemporary.KeyMiddleBg;
-    } else {
-      return tokenColorTemporary.KeyHighBg;
-    }
-  };
-  reactUse.useIsomorphicLayoutEffect(function () {
-    document.documentElement.style.fontSize = '16px';
-  }, []);
-  return jsxRuntime.jsx(StyledContainer, {
-    style: {
-      background: "url(".concat(bg_pattern.default, ")\n        100vw top repeat,\n      ").concat((_a = theme.palette.background["default"]) !== null && _a !== void 0 ? _a : renderBgColorByLevelKey(), " left top repeat")
-    },
-    children: jsxRuntime.jsxs(StyledContentContainer, {
-      children: [jsxRuntime.jsx(StyledTitleContainer, {
-        backgroundColor: theme.palette.primary.main,
-        children: jsxRuntime.jsx(StyledTitle, {
-          children: title
-        })
-      }), !!onReset && jsxRuntime.jsx(material.Stack, {
-        style: {
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          height: '3.5rem',
-          width: '3.5rem',
-          transform: 'scaleX(-1)'
-        },
-        alignItems: "center",
-        justifyContent: "center",
-        children: jsxRuntime.jsx(LoopIcon__default.default, {
-          onClick: onReset,
-          style: {
-            transform: 'rotate(135deg)',
-            color: tokenColorTemporary.secondaryColor,
-            cursor: 'pointer'
-          }
-        })
-      }), jsxRuntime.jsxs(material.Stack, {
-        direction: "row",
-        gap: "2rem",
-        width: "100%",
-        padding: "0px 3.125rem",
-        margin: "2rem 0px 1.625rem",
-        boxSizing: "border-box",
-        flexGrow: 1,
-        overflow: "hidden",
-        children: [jsxRuntime.jsx(StyledScrollBarStack, {
-          children: sideChildren
-        }), jsxRuntime.jsx(StyledScrollBarStack, {
-          children: children
-        })]
-      }), jsxRuntime.jsxs(StyledStepSwitcherContainerStack, {
-        children: [jsxRuntime.jsxs(StyledSwitchStepButton, {
-          color: allowPre ? '#0A379B' : '#8F8F8F',
-          onClick: function onClick() {
-            if (!allowPre || !onPrev) return;
-            onPrev();
-          },
-          children: [jsxRuntime.jsx(ArrowLeft.default, {
-            size: 24
-          }), '이전']
-        }), jsxRuntime.jsxs(material.Stack, {
-          direction: "row",
-          gap: 0,
-          alignItems: "center",
-          children: [jsxRuntime.jsx(material.Typography, {
-            color: "#5D6BB3",
-            fontSize: "2rem",
-            fontWeight: 900,
-            children: currentPage
-          }), jsxRuntime.jsx(material.Stack, {
-            style: {
-              border: '0.125rem solid #D8D8E2',
-              width: '2rem',
-              height: 0,
-              transform: 'rotate(-69deg)'
-            }
-          }), jsxRuntime.jsx(material.Typography, {
-            color: "#D8D8E2",
-            fontSize: "2rem",
-            fontWeight: 900,
-            children: totalPage
-          })]
-        }), jsxRuntime.jsxs(StyledSwitchStepButton, {
-          color: allowNext ? '#0A379B' : '#8F8F8F',
-          onClick: function onClick() {
-            if (!allowNext || !onNext) return;
-            onNext();
-          },
-          children: ['다음', jsxRuntime.jsx(ArrowRight.default, {
-            size: 24
-          })]
-        })]
-      })]
-    })
+  var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
+    isMiniTablet = _useAIDTMediaQuery.isMiniTablet;
+  return jsxRuntime.jsxs(MainContainer, {
+    bgColor: theme.palette.background["default"],
+    isMiniTablet: isMiniTablet,
+    children: [jsxRuntime.jsx(LayoutPagination.default, {
+      onPrev: onPrev,
+      onNext: onNext,
+      allowPrev: allowPrev,
+      allowNext: allowNext
+    }), children]
   });
-};
+}, {
+  // ✅ 헤더 height 조절 가능
+  HeaderContainer: function HeaderContainer(_ref7) {
+    var children = _ref7.children,
+      height = _ref7.height;
+    return jsxRuntime.jsx(_HeaderContainer, {
+      height: height,
+      children: children
+    });
+  },
+  HeaderTitle: LayoutHeaderTitle.default,
+  HeaderSubTitle: LayoutHeaderSubTitle.default,
+  // ✅ 서브타이틀 height 조절 가능
+  Subtitle: function Subtitle(_ref8) {
+    var children = _ref8.children,
+      height = _ref8.height;
+    return jsxRuntime.jsx(SubtitleContainer, {
+      height: height,
+      children: children
+    });
+  },
+  // ✅ Content height 조절 가능
+  Content: function Content(_ref9) {
+    var children = _ref9.children,
+      height = _ref9.height;
+    var _useAIDTMediaQuery2 = useAIDTMediaQuery.default(),
+      isMobile = _useAIDTMediaQuery2.isMobile,
+      isMiniTablet = _useAIDTMediaQuery2.isMiniTablet,
+      isTablet = _useAIDTMediaQuery2.isTablet,
+      isNotebook = _useAIDTMediaQuery2.isNotebook;
+    // ✅ 화면 크기에 따라 기본 Content 높이 설정 (props가 없을 경우)
+    var defaultHeight = isMobile ? "473px" : isMiniTablet ? "354px" : isTablet ? "410px" : isNotebook ? "510px" : "610px";
+    return jsxRuntime.jsx(ContentContainer, {
+      height: height || defaultHeight,
+      children: children
+    });
+  },
+  // ✅ 푸터 height 조절 가능
+  FooterContainer: function FooterContainer(_ref10) {
+    var children = _ref10.children,
+      height = _ref10.height;
+    return jsxRuntime.jsx(_FooterContainer, {
+      height: height,
+      children: children
+    });
+  },
+  FooterPaging: LayoutFooterPaging.default,
+  FooterSubmit: LayoutFooterSubmit.default
+});
 
 exports.default = EliceLayout;

package/cjs/components/layout/layout-pagination/LayoutPagination.d.ts

@@ -0,0 +1,8 @@
+export interface LayoutPaginationProps {
+    onPrev?: () => void;
+    onNext?: () => void;
+    allowPrev?: boolean;
+    allowNext?: boolean;
+}
+declare const LayoutPagination: ({ onPrev, onNext, allowPrev, allowNext, }: LayoutPaginationProps) => JSX.Element;
+export default LayoutPagination;

package/cjs/components/layout/layout-pagination/LayoutPagination.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _styled = require('@emotion/styled/base');
+var jsxRuntime = require('react/jsx-runtime');
+var PaginationButton = require('../../pagination-button/PaginationButton.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
+
+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 PaginationWrapper = /*#__PURE__*/_styled__default.default("div", {
+  target: "e8oep9n0"
+})("production" === "production" ? {
+  name: "ekcpux",
+  styles: "position:absolute;top:50%;left:10px;width:calc(100% - 20px);display:flex;justify-content:space-between;align-items:center;transform:translateY(-50%)"
+} : {
+  name: "ekcpux",
+  styles: "position:absolute;top:50%;left:10px;width:calc(100% - 20px);display:flex;justify-content:space-between;align-items:center;transform:translateY(-50%)",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var LayoutPagination = function LayoutPagination(_ref) {
+  var onPrev = _ref.onPrev,
+    onNext = _ref.onNext,
+    _ref$allowPrev = _ref.allowPrev,
+    allowPrev = _ref$allowPrev === void 0 ? true : _ref$allowPrev,
+    _ref$allowNext = _ref.allowNext,
+    allowNext = _ref$allowNext === void 0 ? true : _ref$allowNext;
+  return jsxRuntime.jsxs(PaginationWrapper, {
+    children: [jsxRuntime.jsx(PaginationButton.default, {
+      left: true,
+      onClick: onPrev,
+      disabled: !allowPrev
+    }), jsxRuntime.jsx(PaginationButton.default, {
+      right: true,
+      onClick: onNext,
+      disabled: !allowNext
+    })]
+  });
+};
+
+exports.default = LayoutPagination;

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

@@ -0,0 +1,2 @@
+export { default as LayoutPagination } from './LayoutPagination';
+export type { LayoutPaginationProps } from './LayoutPagination';

package/cjs/components/layout/layout-pagination/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var LayoutPagination = require('./LayoutPagination.js');
+
+
+
+exports.LayoutPagination = LayoutPagination.default;

package/cjs/components/pagination-button/PaginationButton.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface PaginationButtonProps {
+    left?: boolean;
+    right?: boolean;
+    onClick?: () => void;
+    disabled?: boolean;
+}
+declare const PaginationButton: React.FC<PaginationButtonProps>;
+export default PaginationButton;

package/cjs/components/pagination-button/PaginationButton.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _styled = require('@emotion/styled/base');
+var jsxRuntime = require('react/jsx-runtime');
+var ArrowLeft = require('../../icons/ArrowLeft.js');
+var ArrowRight = require('../../icons/ArrowRight.js');
+require('tslib');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
+
+var Button = /*#__PURE__*/_styled__default.default("button", {
+  target: "e16dnw7i0"
+})("width:60px;height:60px;display:flex;align-items:center;justify-content:center;border:none;background-color:", function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled ? "#ddd" : "#fff";
+}, ";border-radius:40px;box-shadow:0px 0px 1px 0px rgba(0, 0, 0, 0.40),0px 8px 10px 0px rgba(0, 0, 0, 0.05),0px 8px 30px 0px rgba(0, 0, 0, 0.12);border-radius:40px;cursor:", function (_ref2) {
+  var disabled = _ref2.disabled;
+  return disabled ? "not-allowed" : "pointer";
+}, ";&:hover{background-color:", function (_ref3) {
+  var disabled = _ref3.disabled;
+  return disabled ? "#ddd" : "#e0e0e0";
+}, ";}");
+var PaginationButton = function PaginationButton(_ref4) {
+  var left = _ref4.left,
+    right = _ref4.right,
+    onClick = _ref4.onClick,
+    _ref4$disabled = _ref4.disabled,
+    disabled = _ref4$disabled === void 0 ? false : _ref4$disabled;
+  return jsxRuntime.jsxs(Button, {
+    onClick: onClick,
+    disabled: disabled,
+    children: [left && jsxRuntime.jsx(ArrowLeft.default, {}), right && jsxRuntime.jsx(ArrowRight.default, {})]
+  });
+};
+
+exports.default = PaginationButton;

package/cjs/components/pagination-button/index.d.ts

@@ -0,0 +1 @@
+export { default as PaginationButton } from './PaginationButton';

package/cjs/components/pagination-button/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var PaginationButton = require('./PaginationButton.js');
+
+
+
+exports.PaginationButton = PaginationButton.default;

package/cjs/components/selection/Selection.d.ts

@@ -8,6 +8,7 @@ export interface EliceSelectionProps extends ToggleButtonGroupProps {
     }[];
     value: string[];
     setValue: Dispatch<SetStateAction<string[]>>;
+    limitSelectCount?: number;
 }
-declare const EliceSelection: ({ type, options, value, setValue, orientation, disabled, }: EliceSelectionProps) => import("react/jsx-runtime").JSX.Element;
+declare const EliceSelection: ({ type, options, value, setValue, orientation, disabled, limitSelectCount, }: EliceSelectionProps) => import("react/jsx-runtime").JSX.Element;
 export default EliceSelection;

package/cjs/components/selection/Selection.js

@@ -2,14 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var material = require('@mui/material');
-var tokenColorTemporary = require('../tokenColorTemporary.js');
+require('tslib');
 var SelectedCheckbox = require('../../icons/SelectedCheckbox.js');
-var UnselectedCheckbox = require('../../icons/UnselectedCheckbox.js');
 var SelectedRadio = require('../../icons/SelectedRadio.js');
+var UnselectedCheckbox = require('../../icons/UnselectedCheckbox.js');
 var UnselectedRadio = require('../../icons/UnselectedRadio.js');
+var tokenColorTemporary = require('../tokenColorTemporary.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -33,23 +35,26 @@ var EliceSelection = function EliceSelection(_ref) {
     setValue = _ref.setValue,
     _ref$orientation = _ref.orientation,
     orientation = _ref$orientation === void 0 ? 'vertical' : _ref$orientation,
-    disabled = _ref.disabled;
+    disabled = _ref.disabled,
+    _ref$limitSelectCount = _ref.limitSelectCount,
+    limitSelectCount = _ref$limitSelectCount === void 0 ? 1 : _ref$limitSelectCount;
   var theme = material.useTheme();
   var handleSelectionChange = function handleSelectionChange(event, newValue) {
     if (!newValue || disabled) return;
     setValue(function (prevState) {
-      if (type === 'checkbox' && Array.isArray(prevState)) {
-        var newValuesArray = Array.isArray(newValue) ? newValue : [newValue]; // ✅ newValue가 배열인지 확인
-        var updatedValues = prevState.filter(function (v) {
-          return !newValuesArray.includes(v);
-        }) // 기존 선택된 값에서 제거
-        .concat(newValuesArray.filter(function (v) {
-          return !prevState.includes(v);
-        })); // 새로운 값 추가
-        return updatedValues;
-      } else {
-        return Array.isArray(newValue) ? [newValue[0]] : [newValue]; // ✅ `radio` 모드는 단일 값 변경
+      var newValuesArray = Array.isArray(newValue) ? newValue : [newValue];
+      var updatedValues = _rollupPluginBabelHelpers.toConsumableArray(prevState);
+      newValuesArray.forEach(function (value) {
+        if (!updatedValues.includes(value)) {
+          updatedValues.push(value);
+        } else {
+          updatedValues.splice(updatedValues.indexOf(value), 1);
+        }
+      });
+      if (updatedValues.length > limitSelectCount) {
+        return updatedValues.slice(-limitSelectCount);
       }
+      return updatedValues;
     });
   };
   return jsxRuntime.jsx(material.ToggleButtonGroup, {

package/cjs/components/subtitle-button/SubtitleButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type ButtonProps } from '@mui/material';
+export interface EliceSubButtonProps extends ButtonProps {
+    children?: React.ReactNode;
+}
+declare const EliceSubButton: React.ForwardRefExoticComponent<Omit<EliceSubButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default EliceSubButton;

package/cjs/components/subtitle-button/SubtitleButton.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+var bluepurple = require('../../tokens/colors/bluepurple.js');
+var useAIDTMediaQuery = require('../../hooks/useAIDTMediaQuery.js');
+
+var EliceSubButton = React.forwardRef(function (_a, ref) {
+  var children = _a.children,
+    _a$variant = _a.variant,
+    variant = _a$variant === void 0 ? 'contained' : _a$variant,
+    disabled = _a.disabled,
+    rest = tslib.__rest(_a, ["children", "variant", "disabled"]);
+  var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
+    isTablet = _useAIDTMediaQuery.isTablet;
+  return jsxRuntime.jsx(material.Button, Object.assign({
+    ref: ref,
+    variant: variant,
+    disabled: disabled,
+    sx: {
+      width: isTablet ? '100%' : 'fit-content',
+      height: '56px',
+      borderRadius: isTablet ? 0 : '16px',
+      padding: '8px 12px',
+      backgroundColor: bluepurple.bluepurple[100],
+      fontFamily: 'inherit',
+      display: 'flex',
+      justifyContent: 'flex-start'
+    }
+  }, rest, {
+    children: jsxRuntime.jsx(material.Typography, {
+      variant: "buttoninput",
+      sx: {
+        color: "".concat(bluepurple.bluepurple[950], " !important")
+      },
+      children: children
+    })
+  }));
+});
+
+exports.default = EliceSubButton;

package/cjs/components/subtitle-button/index.d.ts

@@ -0,0 +1 @@
+export { default as EliceSubButton } from './SubtitleButton';

package/cjs/components/subtitle-button/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var SubtitleButton = require('./SubtitleButton.js');
+
+
+
+exports.EliceSubButton = SubtitleButton.default;

package/cjs/components/tokenColorTemporary.js

@@ -18,12 +18,8 @@ var textTeriaryColor = '#525265';
 var textQuaternaryColor = '#9FA0B1';
 var point3Color = '#8F68F6';
 var KeyElementaryBg = '#9BCAFF';
-var KeyMiddleBg = '#B2B2B2';
-var KeyHighBg = '#0A379B';
 
 exports.KeyElementaryBg = KeyElementaryBg;
-exports.KeyHighBg = KeyHighBg;
-exports.KeyMiddleBg = KeyMiddleBg;
 exports.gray100Color = gray100Color;
 exports.gray200Color = gray200Color;
 exports.gray300Color = gray300Color;

package/cjs/components/tooltip/Tooltip.js

@@ -8,8 +8,8 @@ var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var material = require('@mui/material');
-var tokenColorTemporary = require('../tokenColorTemporary.js');
 var Close = require('../../icons/Close.js');
+var tokenColorTemporary = require('../tokenColorTemporary.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/cjs/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useAIDTMediaQuery';

package/cjs/hooks/index.js

@@ -0,0 +1,4 @@
+'use strict';
+
+require('@mui/material');
+

package/cjs/hooks/useAIDTMediaQuery.d.ts

@@ -0,0 +1,8 @@
+declare const useAIDTMediaQuery: () => {
+    isMobile: boolean;
+    isMiniTablet: boolean;
+    isTablet: boolean;
+    isNotebook: boolean;
+    isDesktop: boolean;
+};
+export default useAIDTMediaQuery;