@elicecontents/content-ui 0.0.0 → 1.0.0

package/es/components/layout/Layout.js

@@ -1,188 +1,110 @@
 import _styled from '@emotion/styled/base';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useIsomorphicLayoutEffect } from 'react-use';
-import LoopIcon from '@mui/icons-material/Loop';
-import { Stack, Typography, useTheme } from '@mui/material';
-import { secondaryColor, gray200Color, main300Color, main400Color, KeyElementaryBg, KeyMiddleBg, KeyHighBg } from '../tokenColorTemporary.js';
-import img from './bg_pattern.png.js';
-import ArrowLeft from '../../icons/ArrowLeft.js';
-import ArrowRight from '../../icons/ArrowRight.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTheme, Stack } from '@mui/material';
+import useAIDTMediaQuery from '../../hooks/useAIDTMediaQuery.js';
+import LayoutPagination from './layout-pagination/LayoutPagination.js';
+import LayoutHeaderSubTitle from './Header/LayoutHeaderSubTitle.js';
+import LayoutHeaderTitle from './Header/LayoutHeaderTitle.js';
+import LayoutFooterPaging from './Footer/LayoutFooterPaging.js';
+import LayoutFooterSubmit from './Footer/LayoutFooterSubmit.js';
 
-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(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(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(Stack, {
+var MainContainer = /*#__PURE__*/_styled(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(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(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(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(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:", gray200Color, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", main300Color, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", main400Color, ";}");
-var StyledStepSwitcherContainerStack = /*#__PURE__*/_styled(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(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(Typography, {
+})("height:", function (_ref4) {
+  var height = _ref4.height;
+  return height || "100%";
+}, ";width:100%;background-color:#fff;");
+var _FooterContainer = /*#__PURE__*/_styled(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 = useTheme();
-  var renderBgColorByLevelKey = function renderBgColorByLevelKey() {
-    if (levelKey === 'elementary') {
-      return KeyElementaryBg;
-    } else if (levelKey === 'middle') {
-      return KeyMiddleBg;
-    } else {
-      return KeyHighBg;
-    }
-  };
-  useIsomorphicLayoutEffect(function () {
-    document.documentElement.style.fontSize = '16px';
-  }, []);
-  return jsx(StyledContainer, {
-    style: {
-      background: "url(".concat(img, ")\n        100vw top repeat,\n      ").concat((_a = theme.palette.background["default"]) !== null && _a !== void 0 ? _a : renderBgColorByLevelKey(), " left top repeat")
-    },
-    children: jsxs(StyledContentContainer, {
-      children: [jsx(StyledTitleContainer, {
-        backgroundColor: theme.palette.primary.main,
-        children: jsx(StyledTitle, {
-          children: title
-        })
-      }), !!onReset && jsx(Stack, {
-        style: {
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          height: '3.5rem',
-          width: '3.5rem',
-          transform: 'scaleX(-1)'
-        },
-        alignItems: "center",
-        justifyContent: "center",
-        children: jsx(LoopIcon, {
-          onClick: onReset,
-          style: {
-            transform: 'rotate(135deg)',
-            color: secondaryColor,
-            cursor: 'pointer'
-          }
-        })
-      }), jsxs(Stack, {
-        direction: "row",
-        gap: "2rem",
-        width: "100%",
-        padding: "0px 3.125rem",
-        margin: "2rem 0px 1.625rem",
-        boxSizing: "border-box",
-        flexGrow: 1,
-        overflow: "hidden",
-        children: [jsx(StyledScrollBarStack, {
-          children: sideChildren
-        }), jsx(StyledScrollBarStack, {
-          children: children
-        })]
-      }), jsxs(StyledStepSwitcherContainerStack, {
-        children: [jsxs(StyledSwitchStepButton, {
-          color: allowPre ? '#0A379B' : '#8F8F8F',
-          onClick: function onClick() {
-            if (!allowPre || !onPrev) return;
-            onPrev();
-          },
-          children: [jsx(ArrowLeft, {
-            size: 24
-          }), '이전']
-        }), jsxs(Stack, {
-          direction: "row",
-          gap: 0,
-          alignItems: "center",
-          children: [jsx(Typography, {
-            color: "#5D6BB3",
-            fontSize: "2rem",
-            fontWeight: 900,
-            children: currentPage
-          }), jsx(Stack, {
-            style: {
-              border: '0.125rem solid #D8D8E2',
-              width: '2rem',
-              height: 0,
-              transform: 'rotate(-69deg)'
-            }
-          }), jsx(Typography, {
-            color: "#D8D8E2",
-            fontSize: "2rem",
-            fontWeight: 900,
-            children: totalPage
-          })]
-        }), jsxs(StyledSwitchStepButton, {
-          color: allowNext ? '#0A379B' : '#8F8F8F',
-          onClick: function onClick() {
-            if (!allowNext || !onNext) return;
-            onNext();
-          },
-          children: ['다음', jsx(ArrowRight, {
-            size: 24
-          })]
-        })]
-      })]
-    })
+  var _useAIDTMediaQuery = useAIDTMediaQuery(),
+    isMiniTablet = _useAIDTMediaQuery.isMiniTablet;
+  return jsxs(MainContainer, {
+    bgColor: theme.palette.background["default"],
+    isMiniTablet: isMiniTablet,
+    children: [jsx(LayoutPagination, {
+      onPrev: onPrev,
+      onNext: onNext,
+      allowPrev: allowPrev,
+      allowNext: allowNext
+    }), children]
   });
-};
+}, {
+  // ✅ 헤더 height 조절 가능
+  HeaderContainer: function HeaderContainer(_ref7) {
+    var children = _ref7.children,
+      height = _ref7.height;
+    return jsx(_HeaderContainer, {
+      height: height,
+      children: children
+    });
+  },
+  HeaderTitle: LayoutHeaderTitle,
+  HeaderSubTitle: LayoutHeaderSubTitle,
+  // ✅ 서브타이틀 height 조절 가능
+  Subtitle: function Subtitle(_ref8) {
+    var children = _ref8.children,
+      height = _ref8.height;
+    return jsx(SubtitleContainer, {
+      height: height,
+      children: children
+    });
+  },
+  // ✅ Content height 조절 가능
+  Content: function Content(_ref9) {
+    var children = _ref9.children,
+      height = _ref9.height;
+    var _useAIDTMediaQuery2 = useAIDTMediaQuery(),
+      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 jsx(ContentContainer, {
+      height: height || defaultHeight,
+      children: children
+    });
+  },
+  // ✅ 푸터 height 조절 가능
+  FooterContainer: function FooterContainer(_ref10) {
+    var children = _ref10.children,
+      height = _ref10.height;
+    return jsx(_FooterContainer, {
+      height: height,
+      children: children
+    });
+  },
+  FooterPaging: LayoutFooterPaging,
+  FooterSubmit: LayoutFooterSubmit
+});
 
 export { EliceLayout as default };

package/es/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/es/components/layout/layout-pagination/LayoutPagination.js

@@ -0,0 +1,36 @@
+import _styled from '@emotion/styled/base';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import PaginationButton from '../../pagination-button/PaginationButton.js';
+
+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("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 jsxs(PaginationWrapper, {
+    children: [jsx(PaginationButton, {
+      left: true,
+      onClick: onPrev,
+      disabled: !allowPrev
+    }), jsx(PaginationButton, {
+      right: true,
+      onClick: onNext,
+      disabled: !allowNext
+    })]
+  });
+};
+
+export { LayoutPagination as default };

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

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

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

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

package/es/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/es/components/pagination-button/PaginationButton.js

@@ -0,0 +1,31 @@
+import _styled from '@emotion/styled/base';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import ArrowLeft from '../../icons/ArrowLeft.js';
+import ArrowRight from '../../icons/ArrowRight.js';
+
+var Button = /*#__PURE__*/_styled("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 jsxs(Button, {
+    onClick: onClick,
+    disabled: disabled,
+    children: [left && jsx(ArrowLeft, {}), right && jsx(ArrowRight, {})]
+  });
+};
+
+export { PaginationButton as default };

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

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

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

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

package/es/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/es/components/selection/Selection.js

@@ -1,3 +1,4 @@
+import { toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import _styled from '@emotion/styled/base';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { ToggleButton, useTheme, ToggleButtonGroup, Stack } from '@mui/material';
@@ -25,23 +26,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 = 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 = _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 jsx(ToggleButtonGroup, {

package/es/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/es/components/subtitle-button/SubtitleButton.js

@@ -0,0 +1,41 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Button, Typography } from '@mui/material';
+import useAIDTMediaQuery from '../../hooks/useAIDTMediaQuery.js';
+import { bluepurple } from '../../tokens/colors/bluepurple.js';
+
+var EliceSubButton = forwardRef(function (_a, ref) {
+  var children = _a.children,
+    _a$variant = _a.variant,
+    variant = _a$variant === void 0 ? 'contained' : _a$variant,
+    disabled = _a.disabled,
+    rest = __rest(_a, ["children", "variant", "disabled"]);
+  var _useAIDTMediaQuery = useAIDTMediaQuery(),
+    isTablet = _useAIDTMediaQuery.isTablet;
+  return jsx(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[100],
+      fontFamily: 'inherit',
+      display: 'flex',
+      justifyContent: 'flex-start'
+    }
+  }, rest, {
+    children: jsx(Typography, {
+      variant: "buttoninput",
+      sx: {
+        color: "".concat(bluepurple[950], " !important")
+      },
+      children: children
+    })
+  }));
+});
+
+export { EliceSubButton as default };

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

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

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

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

package/es/components/tokenColorTemporary.js

@@ -16,7 +16,5 @@ var textTeriaryColor = '#525265';
 var textQuaternaryColor = '#9FA0B1';
 var point3Color = '#8F68F6';
 var KeyElementaryBg = '#9BCAFF';
-var KeyMiddleBg = '#B2B2B2';
-var KeyHighBg = '#0A379B';
 
-export { KeyElementaryBg, KeyHighBg, KeyMiddleBg, gray100Color, gray200Color, gray300Color, gray400Color, gray50Color, main200Color, main300Color, main400Color, point3Color, secondaryColor, textPrimaryColor, textQuaternaryColor, textSecondaryColor, textTeriaryColor };
+export { KeyElementaryBg, gray100Color, gray200Color, gray300Color, gray400Color, gray50Color, main200Color, main300Color, main400Color, point3Color, secondaryColor, textPrimaryColor, textQuaternaryColor, textSecondaryColor, textTeriaryColor };

package/es/hooks/index.d.ts

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

package/es/hooks/index.js

@@ -0,0 +1 @@
+import '@mui/material';

package/es/hooks/useAIDTMediaQuery.d.ts

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

package/es/hooks/useAIDTMediaQuery.js

@@ -0,0 +1,20 @@
+import { useTheme, useMediaQuery } from '@mui/material';
+import { breakpoints } from '../tokens/breakpoints/breakpoints.js';
+
+var useAIDTMediaQuery = function useAIDTMediaQuery() {
+  var theme = useTheme();
+  var isMobile = useMediaQuery(theme.breakpoints.down(breakpoints.xs)); // 390px 이하
+  var isMiniTablet = useMediaQuery(theme.breakpoints.down(breakpoints.sm)); // 512px 이하
+  var isTablet = useMediaQuery(theme.breakpoints.down(breakpoints.md)); // 768px 이하
+  var isNotebook = useMediaQuery(theme.breakpoints.down(breakpoints.lg)); // 1024px 이하
+  var isDesktop = useMediaQuery(theme.breakpoints.up(breakpoints.lg + 1)); // 1025px 이상
+  return {
+    isMobile: isMobile,
+    isMiniTablet: isMiniTablet,
+    isTablet: isTablet,
+    isNotebook: isNotebook,
+    isDesktop: isDesktop
+  };
+};
+
+export { useAIDTMediaQuery as default };

package/es/icons/ArrowLeft.js

@@ -3,19 +3,19 @@ import { jsx } from 'react/jsx-runtime';
 
 var ArrowLeft = function ArrowLeft(_a) {
   var _a$size = _a.size,
-    size = _a$size === void 0 ? 16 : _a$size,
+    size = _a$size === void 0 ? 36 : _a$size,
     _a$color = _a.color,
     color = _a$color === void 0 ? 'currentColor' : _a$color,
     other = __rest(_a, ["size", "color"]);
   return jsx("svg", Object.assign({
-    height: size,
     width: size,
-    viewBox: "0 0 16 16",
+    height: size,
+    viewBox: "0 0 36 36",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, other, {
     children: jsx("path", {
-      d: "M10.4986 2.3535C10.6938 2.15826 11.0104 2.15827 11.2056 2.35352L11.4414 2.58924C11.6366 2.7845 11.6366 3.1011 11.4413 3.29636L6.60933 8.12799L11.4414 12.9599C11.6366 13.1551 11.6366 13.4717 11.4414 13.667L11.2057 13.9027C11.0104 14.0979 10.6938 14.0979 10.4986 13.9027L5.19526 8.59939C4.95494 8.35934 4.93645 7.98118 5.1398 7.71965L5.2 7.65133L10.4986 2.3535Z",
+      d: "M22.1673 4.21094L24.2886 6.33226L12.621 17.9989L24.2886 29.6662L22.1673 31.7875L9.43934 19.0596C8.89861 18.5195 8.85702 17.6686 9.31456 17.0802L9.45 16.9264L22.1673 4.21094Z",
       fill: color
     })
   }));

package/es/icons/ArrowRight.js

@@ -3,27 +3,20 @@ import { jsx } from 'react/jsx-runtime';
 
 var ArrowRight = function ArrowRight(_a) {
   var _a$size = _a.size,
-    size = _a$size === void 0 ? 16 : _a$size,
+    size = _a$size === void 0 ? 36 : _a$size,
     _a$color = _a.color,
     color = _a$color === void 0 ? 'currentColor' : _a$color,
     other = __rest(_a, ["size", "color"]);
   return jsx("svg", Object.assign({
-    height: size,
     width: size,
-    viewBox: "0 0 16 16",
+    height: size,
+    viewBox: "0 0 36 36",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, other, {
-    children: jsx("svg", {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 16 16",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: jsx("path", {
-        d: "M5.50144 13.7745C5.30617 13.9697 4.98961 13.9697 4.79436 13.7745L4.55865 13.5387C4.36338 13.3435 4.36338 13.0269 4.55866 12.8316L9.39067 7.99998L4.55864 3.1681C4.36338 2.97284 4.36337 2.65625 4.55864 2.46098L4.79433 2.22529C4.9896 2.03003 5.30618 2.03003 5.50144 2.22529L10.8047 7.52859C11.0451 7.76864 11.0635 8.14679 10.8602 8.40832L10.8 8.47665L5.50144 13.7745Z",
-        fill: color
-      })
+    children: jsx("path", {
+      d: "M13.8323 31.7875L11.7109 29.6662L23.3785 17.9995L11.7109 6.33226L13.8323 4.21094L26.5602 16.9389C27.1009 17.479 27.1425 18.3298 26.685 18.9183L26.5495 19.072L13.8323 31.7875Z",
+      fill: color
     })
   }));
 };

package/es/icons/MoreColumn.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from "./_types";
+declare const MoreColumn: ({ size, color, ...other }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default MoreColumn;

package/es/icons/MoreColumn.js

@@ -0,0 +1,24 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+
+var MoreColumn = function MoreColumn(_a) {
+  var _a$size = _a.size,
+    size = _a$size === void 0 ? 6 : _a$size,
+    _a$color = _a.color,
+    color = _a$color === void 0 ? '#072567' : _a$color,
+    other = __rest(_a, ["size", "color"]);
+  return jsx("svg", Object.assign({
+    width: size,
+    height: size * (18 / 6),
+    viewBox: "0 0 6 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, other, {
+    children: jsx("path", {
+      d: "M3 13.5625C3.78125 13.5625 4.48438 13.9922 4.875 14.6562C5.26562 15.3594 5.26562 16.1797 4.875 16.8438C4.48438 17.5469 3.78125 17.9375 3 17.9375C2.17969 17.9375 1.47656 17.5469 1.08594 16.8438C0.695312 16.1797 0.695312 15.3594 1.08594 14.6562C1.47656 13.9922 2.17969 13.5625 3 13.5625ZM3 7.3125C3.78125 7.3125 4.48438 7.74219 4.875 8.40625C5.26562 9.10938 5.26562 9.92969 4.875 10.5938C4.48438 11.2969 3.78125 11.6875 3 11.6875C2.17969 11.6875 1.47656 11.2969 1.08594 10.5938C0.695312 9.92969 0.695312 9.10938 1.08594 8.40625C1.47656 7.74219 2.17969 7.3125 3 7.3125ZM5.1875 3.25C5.1875 4.07031 4.75781 4.77344 4.09375 5.16406C3.39062 5.55469 2.57031 5.55469 1.90625 5.16406C1.20312 4.77344 0.8125 4.07031 0.8125 3.25C0.8125 2.46875 1.20312 1.76562 1.90625 1.375C2.57031 0.984375 3.39062 0.984375 4.09375 1.375C4.75781 1.76562 5.1875 2.46875 5.1875 3.25Z",
+      fill: color
+    })
+  }));
+};
+
+export { MoreColumn as default };