@elicecontents/content-ui 1.0.3-alpha.0 → 1.0.4-alpha.0

package/cjs/components/Modal/Modal.d.ts

@@ -0,0 +1,9 @@
+import type { ModalProps } from '@mui/material';
+export type EliceModalProps = {
+    open: boolean;
+    handleClose: () => void;
+    iconClose?: boolean;
+    fontFamily?: string;
+} & ModalProps;
+declare const EliceModal: (props: EliceModalProps) => import("react/jsx-runtime").JSX.Element;
+export default EliceModal;

package/cjs/components/Modal/Modal.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var HighlightOffIcon = require('@mui/icons-material/HighlightOff');
+var material = require('@mui/material');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var HighlightOffIcon__default = /*#__PURE__*/_interopDefaultCompat(HighlightOffIcon);
+
+var EliceModal = function EliceModal(props) {
+  var open = props.open,
+    handleClose = props.handleClose,
+    children = props.children,
+    _props$iconClose = props.iconClose,
+    iconClose = _props$iconClose === void 0 ? false : _props$iconClose;
+  return jsxRuntime.jsx(material.Modal, {
+    open: open,
+    onClose: handleClose,
+    "aria-labelledby": "modal-modal-title",
+    "aria-describedby": "modal-modal-description",
+    children: jsxRuntime.jsxs(material.Box, {
+      sx: Object.assign({
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        maxWidth: '95vw',
+        minWidth: '80vw',
+        bgcolor: '#F4F6FF',
+        borderRadius: '2.6rem',
+        padding: '2.4rem 3.2rem 2.4rem 3.2rem',
+        outline: 'none'
+      }, props.sx),
+      children: [iconClose && jsxRuntime.jsx(material.Stack, {
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "flex-end",
+        children: jsxRuntime.jsx(HighlightOffIcon__default.default, {
+          onClick: handleClose,
+          sx: {
+            width: '2.7rem',
+            height: '2.7rem',
+            cursor: 'pointer'
+          },
+          color: "secondary"
+        })
+      }), jsxRuntime.jsx(material.Typography, {
+        variant: 'body1',
+        children: children
+      })]
+    })
+  });
+};
+
+exports.default = EliceModal;

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

@@ -0,0 +1,2 @@
+export { default as EliceModal } from './Modal';
+export type { EliceModalProps } from './Modal';

package/cjs/components/Modal/index.js

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

package/cjs/components/answer-feedback/Correct.js

@@ -21,7 +21,7 @@ var Correct = function Correct() {
         fill: "#31A54C"
       }), jsxRuntime.jsx("path", {
         d: "M305 156.143C305 164.614 304.235 172.935 302.836 181.045L135.835 299.693C66.9728 288.285 14.4545 228.363 14.4545 156.143C14.4545 75.7613 79.5038 10.6182 159.727 10.6182C239.951 10.6182 305 75.7614 305 156.143Z",
-        stroke: "".concat((_a = theme.palette.primary.main) !== null && _a !== void 0 ? _a : '##9BCAFF'),
+        stroke: "".concat((_a = theme.palette.primary.main) !== null && _a !== void 0 ? _a : '#9BCAFF'),
         "stroke-width": "12"
       })]
     }), jsxRuntime.jsx("path", {
@@ -31,7 +31,7 @@ var Correct = function Correct() {
       "stroke-width": "4"
     }), jsxRuntime.jsx("path", {
       d: "M143.208 284.443C166.87 215.233 237.326 174.982 308.673 185.469L223.146 245.734L137.618 306C138.921 298.786 140.756 291.589 143.208 284.443Z",
-      fill: "".concat((_b = theme.palette.primary.main) !== null && _b !== void 0 ? _b : '##9BCAFF')
+      fill: "".concat((_b = theme.palette.primary.main) !== null && _b !== void 0 ? _b : '#9BCAFF')
     }), jsxRuntime.jsx("defs", {
       children: jsxRuntime.jsxs("filter", {
         id: "filter0_d_596_8851",

package/cjs/components/answer-feedback/Incorrect.js

@@ -21,7 +21,7 @@ var Incorrect = function Incorrect() {
         fill: "url(#paint0_linear_596_8855)"
       }), jsxRuntime.jsx("path", {
         d: "M305 156.143C305 164.614 304.235 172.935 302.836 181.045L135.835 299.693C66.9728 288.285 14.4545 228.363 14.4545 156.143C14.4545 75.7613 79.5038 10.6182 159.727 10.6182C239.951 10.6182 305 75.7614 305 156.143Z",
-        stroke: "".concat((_a = theme.palette.primary.main) !== null && _a !== void 0 ? _a : '##9BCAFF'),
+        stroke: "".concat((_a = theme.palette.primary.main) !== null && _a !== void 0 ? _a : '#9BCAFF'),
         "stroke-width": "12"
       })]
     }), jsxRuntime.jsxs("mask", {
@@ -54,7 +54,7 @@ var Incorrect = function Incorrect() {
       mask: "url(#path-3-outside-1_596_8855)"
     }), jsxRuntime.jsx("path", {
       d: "M143.208 284.443C166.87 215.233 237.326 174.982 308.673 185.469L137.618 306C138.921 298.786 140.756 291.589 143.208 284.443Z",
-      fill: "".concat((_b = theme.palette.primary.main) !== null && _b !== void 0 ? _b : '##9BCAFF')
+      fill: "".concat((_b = theme.palette.primary.main) !== null && _b !== void 0 ? _b : '#9BCAFF')
     }), jsxRuntime.jsxs("defs", {
       children: [jsxRuntime.jsxs("filter", {
         id: "filter0_d_596_8855",

package/cjs/components/chat/Chat.d.ts

@@ -11,18 +11,20 @@ export interface EliceChatProps {
     onChange: (text: string) => void;
     onSend: (text: string) => void;
     onRecord?: () => void;
+    height?: string;
     onTranscribingChange?: (value: boolean) => void;
     isLoadingMessage?: boolean;
 }
 declare const EliceChat: {
-    ({ placeholder, messages, content, onReset, onSend, onChange, onRecord, onTranscribingChange, isLoadingMessage, }: EliceChatProps): import("react/jsx-runtime").JSX.Element;
-    MessageList({ messages, isLoadingMessage, scrollRef, }: {
+    ({ placeholder, messages, content, onReset, onSend, onChange, onRecord, onTranscribingChange, isLoadingMessage, height, }: EliceChatProps): import("react/jsx-runtime").JSX.Element;
+    MessageList({ messages, isLoadingMessage, scrollRef, height, }: {
         messages: {
             role: "system" | "user" | "assistant";
             content: string;
         }[];
         isLoadingMessage?: boolean | undefined;
         scrollRef: React.RefObject<HTMLDivElement>;
+        height?: string | undefined;
     }): import("react/jsx-runtime").JSX.Element;
     InputArea({ placeHolder, value, onChange, onSend, onReset, onRecord, onTranscribingChange, }: {
         placeHolder: string;

package/cjs/components/chat/Chat.js

@@ -22,67 +22,72 @@ var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 
 var StyledChatContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "e1i7zt3"
-})("height:fit-content;max-height:100%;min-width:30rem;max-width:100%;border:2px solid ", function (_ref) {
-  var theme = _ref.theme;
+})("height:fit-content;max-height:100%;height:", function (_ref) {
+  var height = _ref.height;
+  return height;
+}, ";min-width:30rem;max-width:100%;border:2px solid ", function (_ref2) {
+  var theme = _ref2.theme;
   return theme.palette.grey[300];
 }, ";border-radius:1.5rem;padding:1.5rem;gap:1.75rem;");
 var StyledScrollBarStack = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "e1i7zt2"
-})("flex:1;overflow-y:auto;border-radius:1.125rem;padding-right:1rem;::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.palette.grey[200];
-}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref3) {
+})("flex:1;overflow-y:auto;border-radius:1.125rem;padding-right:1rem;::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref3) {
   var theme = _ref3.theme;
-  return theme.palette.primary.main;
-}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (_ref4) {
+  return theme.palette.grey[200];
+}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref4) {
   var theme = _ref4.theme;
+  return theme.palette.primary.main;
+}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (_ref5) {
+  var theme = _ref5.theme;
   return theme.palette.secondary.main;
 }, ";}");
 var StyledInput = /*#__PURE__*/_styled__default.default(material.Input, {
   target: "e1i7zt1"
-})("width:100%;height:100%;border:none!important;background-color:transparent;font-size:1.375rem;font-weight:700;outline:none;resize:none;color:", function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.palette.secondary.main;
-}, ";::placeholder{color:", function (_ref6) {
+})("width:100%;height:100%;border:none!important;background-color:transparent;font-size:1.375rem;font-weight:700;outline:none;resize:none;color:", function (_ref6) {
   var theme = _ref6.theme;
-  return theme.palette.grey[300];
-}, ";}::before{border:none;}:hover{::before{border:none;}}::after{border-bottom:none!important;}::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref7) {
+  return theme.palette.secondary.main;
+}, ";::placeholder{color:", function (_ref7) {
   var theme = _ref7.theme;
-  return theme.palette.grey[200];
-}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref8) {
+  return theme.palette.grey[300];
+}, ";}::before{border:none;}:hover{::before{border:none;}}::after{border-bottom:none!important;}::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref8) {
   var theme = _ref8.theme;
-  return theme.palette.primary.main;
-}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (_ref9) {
+  return theme.palette.grey[200];
+}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref9) {
   var theme = _ref9.theme;
+  return theme.palette.primary.main;
+}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (_ref10) {
+  var theme = _ref10.theme;
   return theme.palette.secondary.main;
 }, ";}");
 var StyledMessage = /*#__PURE__*/_styled__default.default(material.Typography, {
   target: "e1i7zt0"
-})("color:", function (_ref10) {
-  var isAssistant = _ref10.isAssistant,
-    theme = _ref10.theme;
+})("color:", function (_ref11) {
+  var isAssistant = _ref11.isAssistant,
+    theme = _ref11.theme;
   return isAssistant ? theme.palette.text.secondary : theme.palette.secondary.main;
-}, ";font-size:1rem;font-weight:", function (_ref11) {
-  var isAssistant = _ref11.isAssistant;
+}, ";font-size:1rem;font-weight:", function (_ref12) {
+  var isAssistant = _ref12.isAssistant;
   return isAssistant ? 500 : 700;
-}, ";background-color:", function (_ref12) {
-  var isAssistant = _ref12.isAssistant,
-    theme = _ref12.theme;
+}, ";background-color:", function (_ref13) {
+  var isAssistant = _ref13.isAssistant,
+    theme = _ref13.theme;
   return isAssistant ? theme.palette.grey[50] : theme.palette.primary.light;
-}, ";border-radius:1rem;padding:0.75rem;margin-bottom:16px;");
-var _EliceChat = function EliceChat(_ref13) {
-  var _ref13$placeholder = _ref13.placeholder,
-    placeholder = _ref13$placeholder === void 0 ? "AI와 대화를 시작해 보세요" : _ref13$placeholder,
-    _ref13$messages = _ref13.messages,
-    messages = _ref13$messages === void 0 ? [] : _ref13$messages,
-    _ref13$content = _ref13.content,
-    content = _ref13$content === void 0 ? "" : _ref13$content,
-    onReset = _ref13.onReset,
-    onSend = _ref13.onSend,
-    _onChange = _ref13.onChange,
-    onRecord = _ref13.onRecord,
-    onTranscribingChange = _ref13.onTranscribingChange,
-    isLoadingMessage = _ref13.isLoadingMessage;
+}, ";border-radius:1rem;white-space:pre-wrap;padding:0.75rem;margin-bottom:16px;");
+var _EliceChat = function EliceChat(_ref14) {
+  var _ref14$placeholder = _ref14.placeholder,
+    placeholder = _ref14$placeholder === void 0 ? "AI와 대화를 시작해 보세요" : _ref14$placeholder,
+    _ref14$messages = _ref14.messages,
+    messages = _ref14$messages === void 0 ? [] : _ref14$messages,
+    _ref14$content = _ref14.content,
+    content = _ref14$content === void 0 ? "" : _ref14$content,
+    onReset = _ref14.onReset,
+    onSend = _ref14.onSend,
+    _onChange = _ref14.onChange,
+    onRecord = _ref14.onRecord,
+    onTranscribingChange = _ref14.onTranscribingChange,
+    isLoadingMessage = _ref14.isLoadingMessage,
+    _ref14$height = _ref14.height,
+    height = _ref14$height === void 0 ? "100%" : _ref14$height;
   var theme = material.useTheme();
   var _useState = React.useState(content),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
@@ -104,6 +109,7 @@ var _EliceChat = function EliceChat(_ref13) {
   };
   return jsxRuntime.jsxs(StyledChatContainer, {
     theme: theme,
+    height: height,
     children: [jsxRuntime.jsx(_EliceChat.MessageList, {
       messages: messages,
       isLoadingMessage: isLoadingMessage,
@@ -123,13 +129,16 @@ var _EliceChat = function EliceChat(_ref13) {
   });
 };
 // ✅ 메시지 리스트 컴포넌트
-_EliceChat.MessageList = function (_ref14) {
-  var messages = _ref14.messages,
-    isLoadingMessage = _ref14.isLoadingMessage,
-    scrollRef = _ref14.scrollRef;
+_EliceChat.MessageList = function (_ref15) {
+  var messages = _ref15.messages,
+    isLoadingMessage = _ref15.isLoadingMessage,
+    scrollRef = _ref15.scrollRef,
+    _ref15$height = _ref15.height,
+    height = _ref15$height === void 0 ? "100%" : _ref15$height;
   var theme = material.useTheme();
   return jsxRuntime.jsx(StyledScrollBarStack, {
     theme: theme,
+    height: height,
     children: messages.length === 0 ? jsxRuntime.jsx(material.Typography, {
       color: theme.palette.text.disabled,
       fontSize: "2rem",
@@ -158,14 +167,14 @@ _EliceChat.MessageList = function (_ref14) {
     })
   });
 };
-_EliceChat.InputArea = function (_ref15) {
-  var placeHolder = _ref15.placeHolder,
-    value = _ref15.value,
-    onChange = _ref15.onChange,
-    onSend = _ref15.onSend,
-    onReset = _ref15.onReset,
-    onRecord = _ref15.onRecord,
-    onTranscribingChange = _ref15.onTranscribingChange;
+_EliceChat.InputArea = function (_ref16) {
+  var placeHolder = _ref16.placeHolder,
+    value = _ref16.value,
+    onChange = _ref16.onChange,
+    onSend = _ref16.onSend,
+    onReset = _ref16.onReset,
+    onRecord = _ref16.onRecord,
+    onTranscribingChange = _ref16.onTranscribingChange;
   var theme = material.useTheme();
   return jsxRuntime.jsxs(material.Stack, {
     direction: "row",

package/cjs/components/index.d.ts

@@ -18,3 +18,4 @@ export * from './AIDTTypography';
 export * from './AdaptiveImage';
 export * from './subtitle-button';
 export * from './base-input';
+export * from './Modal';

package/cjs/components/index.js

@@ -18,6 +18,7 @@ var AIDTTypography = require('./AIDTTypography/AIDTTypography.js');
 var AdaptiveImage = require('./AdaptiveImage/AdaptiveImage.js');
 var SubtitleButton = require('./subtitle-button/SubtitleButton.js');
 var BaseInput = require('./base-input/BaseInput.js');
+var Modal = require('./Modal/Modal.js');
 
 
 
@@ -39,3 +40,4 @@ exports.AIDTTypography = AIDTTypography.default;
 exports.EliceImage = AdaptiveImage.default;
 exports.EliceSubButton = SubtitleButton.default;
 exports.BaseInput = BaseInput.default;
+exports.EliceModal = Modal.default;

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

@@ -25,50 +25,49 @@ var FooterContainer = /*#__PURE__*/_styled__default.default("div", {
 });
 var FooterPagination = /*#__PURE__*/_styled__default.default(material.Typography, {
   target: "ecog5a41"
-})("production" === "production" ? {
-  name: "17qwk4",
-  styles: "padding:0 32px"
-} : {
-  name: "17qwk4",
-  styles: "padding:0 32px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+})("padding:", function (_ref) {
+  var isTablet = _ref.isTablet;
+  return isTablet ? "0 10px" : "0 32px";
+}, ";white-space:nowrap;");
 var StyledCurrentPage = /*#__PURE__*/_styled__default.default("span", {
   target: "ecog5a40"
-})("color:", function (_ref) {
-  var fontColor = _ref.fontColor;
+})("color:", function (_ref2) {
+  var fontColor = _ref2.fontColor;
   return fontColor;
 }, ";");
-var LayoutFooterPaging = function LayoutFooterPaging(_ref2) {
-  var currentPage = _ref2.currentPage,
-    totalPage = _ref2.totalPage,
-    onPrev = _ref2.onPrev,
-    onNext = _ref2.onNext,
-    _ref2$allowPrev = _ref2.allowPrev,
-    allowPrev = _ref2$allowPrev === void 0 ? true : _ref2$allowPrev,
-    _ref2$allowNext = _ref2.allowNext,
-    allowNext = _ref2$allowNext === void 0 ? true : _ref2$allowNext;
+var LayoutFooterPaging = function LayoutFooterPaging(_ref3) {
+  var currentPage = _ref3.currentPage,
+    totalPage = _ref3.totalPage,
+    onPrev = _ref3.onPrev,
+    onNext = _ref3.onNext,
+    _ref3$allowPrev = _ref3.allowPrev,
+    allowPrev = _ref3$allowPrev === void 0 ? true : _ref3$allowPrev,
+    _ref3$allowNext = _ref3.allowNext,
+    allowNext = _ref3$allowNext === void 0 ? true : _ref3$allowNext;
   var theme = material.useTheme();
   var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
-    isMiniTablet = _useAIDTMediaQuery.isMiniTablet;
+    isTablet = _useAIDTMediaQuery.isTablet;
   return jsxRuntime.jsxs(FooterContainer, {
-    children: [isMiniTablet && jsxRuntime.jsx(PaginationButton.default, {
+    children: [isTablet && jsxRuntime.jsx(PaginationButton.default, {
       left: true,
       onClick: onPrev,
-      disabled: !allowPrev
+      disabled: !allowPrev,
+      size: 28
     }), jsxRuntime.jsxs(FooterPagination, {
       variant: "pagination",
       sx: {
         color: "#D8D8E2"
       },
+      isTablet: isTablet,
       children: [jsxRuntime.jsx(StyledCurrentPage, {
         fontColor: theme.palette.primary.main,
         children: currentPage
       }), " ", "/ ", totalPage]
-    }), isMiniTablet && jsxRuntime.jsx(PaginationButton.default, {
+    }), isTablet && jsxRuntime.jsx(PaginationButton.default, {
       right: true,
       onClick: onNext,
-      disabled: !allowNext
+      disabled: !allowNext,
+      size: 28
     })]
   });
 };

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

@@ -1,3 +1,8 @@
-import React from "react";
-declare const LayoutFooterSubmit: React.FC;
+export interface LayoutFooterSubmitProps {
+    isRollback?: boolean;
+    isSubmit?: boolean;
+    onRollback?: () => void;
+    onSubmit?: () => void;
+}
+declare const LayoutFooterSubmit: ({ isRollback, isSubmit, onSubmit, onRollback, }: LayoutFooterSubmitProps) => import("react/jsx-runtime").JSX.Element;
 export default LayoutFooterSubmit;

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

@@ -6,14 +6,22 @@ var jsxRuntime = require('react/jsx-runtime');
 var material = require('@mui/material');
 var Button = require('../../button/Button.js');
 
-var LayoutFooterSubmit = function LayoutFooterSubmit() {
+var LayoutFooterSubmit = function LayoutFooterSubmit(_ref) {
+  var _ref$isRollback = _ref.isRollback,
+    isRollback = _ref$isRollback === void 0 ? false : _ref$isRollback,
+    _ref$isSubmit = _ref.isSubmit,
+    isSubmit = _ref$isSubmit === void 0 ? false : _ref$isSubmit,
+    onSubmit = _ref.onSubmit,
+    onRollback = _ref.onRollback;
   return jsxRuntime.jsxs(material.Stack, {
     direction: "row",
     spacing: 1,
-    children: [jsxRuntime.jsx(Button.default, {
+    children: [isRollback && jsxRuntime.jsx(Button.default, {
       variant: "outlined",
+      onClick: onRollback,
       children: "\uB2E4\uC2DC\uD558\uAE30"
-    }), jsxRuntime.jsx(Button.default, {
+    }), isSubmit && jsxRuntime.jsx(Button.default, {
+      onClick: onSubmit,
       children: "\uC81C\uCD9C\uD558\uAE30"
     })]
   });

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

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

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

@@ -7,9 +7,10 @@ export interface EliceLayoutProps {
     onNext?: () => void;
     allowPrev?: boolean;
     allowNext?: boolean;
+    onlyPage?: boolean;
 }
 type Alignment = "left" | "center" | "right";
-declare const EliceLayout: (({ children, onPrev, onNext, allowPrev, allowNext, backgroundImage, backgroundColor }: EliceLayoutProps) => import("react/jsx-runtime").JSX.Element) & {
+declare const EliceLayout: (({ children, onPrev, onNext, allowPrev, allowNext, backgroundImage, backgroundColor, onlyPage }: EliceLayoutProps) => import("react/jsx-runtime").JSX.Element) & {
     HeaderContainer: ({ children }: {
         children: React.ReactNode;
     }) => import("react/jsx-runtime").JSX.Element;
@@ -32,6 +33,6 @@ declare const EliceLayout: (({ children, onPrev, onNext, allowPrev, allowNext, b
         children: React.ReactNode;
     }) => import("react/jsx-runtime").JSX.Element;
     FooterPaging: React.FC<import("./Footer").LayoutFooterPagingProps>;
-    FooterSubmit: React.FC<{}>;
+    FooterSubmit: ({ isRollback, isSubmit, onSubmit, onRollback, }: import("./Footer").LayoutFooterSubmitProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default EliceLayout;

package/cjs/components/layout/Layout.js

@@ -27,13 +27,13 @@ var MainContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
 })("width:100%;height:100vh;display:flex;flex-direction:column;padding:", function (_ref) {
   var isMiniTablet = _ref.isMiniTablet;
   return isMiniTablet ? "0 20px" : "0 40px";
-}, ";box-sizing:border-box;position:relative;overflow-y:hidden;background-image:", function (_ref2) {
+}, ";box-sizing:border-box;position:relative;background-image:", function (_ref2) {
   var backgroundImage = _ref2.backgroundImage;
   return backgroundImage ? "url(".concat(backgroundImage, ")") : "none";
 }, ";background-size:cover;background-position:center;background-color:", function (_ref3) {
   var backgroundColor = _ref3.backgroundColor;
-  return backgroundColor || "#fff";
-}, ";");
+  return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : "#fff";
+}, ";overflow-y:hidden;");
 var _HeaderContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "efnp08i5"
 })("production" === "production" ? {
@@ -110,7 +110,9 @@ var EliceLayout = Object.assign(function (_ref14) {
     allowPrev = _ref14.allowPrev,
     allowNext = _ref14.allowNext,
     backgroundImage = _ref14.backgroundImage,
-    backgroundColor = _ref14.backgroundColor;
+    backgroundColor = _ref14.backgroundColor,
+    _ref14$onlyPage = _ref14.onlyPage,
+    onlyPage = _ref14$onlyPage === void 0 ? false : _ref14$onlyPage;
   var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
     isTablet = _useAIDTMediaQuery.isTablet,
     isMiniTablet = _useAIDTMediaQuery.isMiniTablet;
@@ -127,7 +129,7 @@ var EliceLayout = Object.assign(function (_ref14) {
       isMiniTablet: isMiniTablet,
       backgroundImage: backgroundImage,
       backgroundColor: backgroundColor,
-      children: [!isTablet && jsxRuntime.jsx(LayoutPagination.default, {
+      children: [!onlyPage && !isTablet && jsxRuntime.jsx(LayoutPagination.default, {
         onPrev: onPrev,
         onNext: onNext,
         allowPrev: allowPrev,

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

@@ -14,11 +14,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 var PaginationWrapper = /*#__PURE__*/_styled__default.default("div", {
   target: "e8oep9n0"
 })("production" === "production" ? {
-  name: "1m30dfz",
-  styles: "position:absolute;top:50%;left:10px;width:calc(100% - 20px);display:flex;justify-content:space-between;align-items:center;z-index:100;transform:translateY(-50%)"
+  name: "1mp32h2",
+  styles: "position:absolute;top:50%;left:10px;width:calc(100% - 20px);display:flex;justify-content:space-between;align-items:center;z-index:100;transform:translateY(-50%);pointer-events:none"
 } : {
-  name: "1m30dfz",
-  styles: "position:absolute;top:50%;left:10px;width:calc(100% - 20px);display:flex;justify-content:space-between;align-items:center;z-index:100;transform:translateY(-50%)",
+  name: "1mp32h2",
+  styles: "position:absolute;top:50%;left:10px;width:calc(100% - 20px);display:flex;justify-content:space-between;align-items:center;z-index:100;transform:translateY(-50%);pointer-events:none",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 var LayoutPagination = function LayoutPagination(_ref) {

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

@@ -4,6 +4,7 @@ interface PaginationButtonProps {
     right?: boolean;
     onClick?: () => void;
     disabled?: boolean;
+    size?: number;
 }
 declare const PaginationButton: React.FC<PaginationButtonProps>;
 export default PaginationButton;

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
+var useAIDTMediaQuery = require('../../hooks/useAIDTMediaQuery.js');
 var ArrowLeft = require('../../icons/ArrowLeft.js');
 var ArrowRight = require('../../icons/ArrowRight.js');
 require('tslib');
@@ -15,26 +16,46 @@ 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;
+})("width:", function (_ref) {
+  var size = _ref.size;
+  return size ? "".concat(size, "px") : "60px";
+}, ";height:", function (_ref2) {
+  var size = _ref2.size;
+  return size ? "".concat(size, "px") : "60px";
+}, ";display:flex;align-items:center;justify-content:center;border:none;pointer-events:auto;background-color:", function (_ref3) {
+  var disabled = _ref3.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;
+}, ";border-radius:40px;box-shadow:", function (_ref4) {
+  var isTablet = _ref4.isTablet;
+  return isTablet ? "none" : "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)";
+}, ";cursor:", function (_ref5) {
+  var disabled = _ref5.disabled;
   return disabled ? "not-allowed" : "pointer";
-}, ";&:hover{background-color:", function (_ref3) {
-  var disabled = _ref3.disabled;
-  return disabled ? "#ddd" : "#e0e0e0";
+}, ";&:hover{background-color:", function (_ref6) {
+  var disabled = _ref6.disabled,
+    isTablet = _ref6.isTablet;
+  return isTablet ? disabled ? "#ddd" : "#e0e0e0" : "none";
 }, ";}");
-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;
+var PaginationButton = function PaginationButton(_ref7) {
+  var left = _ref7.left,
+    right = _ref7.right,
+    onClick = _ref7.onClick,
+    _ref7$disabled = _ref7.disabled,
+    disabled = _ref7$disabled === void 0 ? false : _ref7$disabled,
+    size = _ref7.size;
+  var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
+    isTablet = _useAIDTMediaQuery.isTablet;
+  console.log(isTablet);
   return jsxRuntime.jsxs(Button, {
     onClick: onClick,
     disabled: disabled,
-    children: [left && jsxRuntime.jsx(ArrowLeft.default, {}), right && jsxRuntime.jsx(ArrowRight.default, {})]
+    isTablet: isTablet,
+    size: size,
+    children: [left && jsxRuntime.jsx(ArrowLeft.default, {
+      size: size
+    }), right && jsxRuntime.jsx(ArrowRight.default, {
+      size: size
+    })]
   });
 };
 

package/cjs/components/question/Question.js

@@ -15,8 +15,8 @@ var StyledMark = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "e7imhnw0"
 })("align-items:center;justify-content:center;flex-shrink:0;width:2.5rem;height:2.5rem;border-radius:50%;border-style:dashed;border-width:0.125rem;border-color:", function (props) {
   var _a;
-  return (_a = props.borderColor) !== null && _a !== void 0 ? _a : tokenColorTemporary.point3Color;
-}, ";position:relative;::before{content:'';position:absolute;width:2rem;height:2rem;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:50%;background-color:", function (props) {
+  return (_a = props.borderColor) !== null && _a !== void 0 ? _a : tokenColorTemporary.primaryColor;
+}, ";position:relative;::before{content:'';position:absolute;width:1.75rem;height:1.75rem;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:50%;background-color:", function (props) {
   var _a;
   return (_a = props.contentColor) !== null && _a !== void 0 ? _a : tokenColorTemporary.KeyElementaryBg;
 }, ";}");
@@ -29,12 +29,12 @@ var EliceQuestion = function EliceQuestion(_ref) {
     direction: "row",
     gap: "1rem",
     children: [jsxRuntime.jsx(StyledMark, {
-      contentColor: theme.palette.primary.light,
+      contentColor: theme.palette.background["default"],
       borderColor: theme.palette.primary.main,
       children: jsxRuntime.jsxs(material.Typography, {
         fontWeight: 800,
-        fontSize: "1.5rem",
-        color: theme.palette.primary.main,
+        fontSize: "1.3rem",
+        color: tokenColorTemporary.primaryColor,
         position: "relative",
         children: ["Q", jsxRuntime.jsx("span", {
           style: {
@@ -44,8 +44,8 @@ var EliceQuestion = function EliceQuestion(_ref) {
         })]
       })
     }), jsxRuntime.jsx(material.Typography, {
-      color: theme.palette.primary.main,
-      variant: "h4",
+      color: theme.palette.grey[900],
+      variant: "subtitle1",
       children: question
     })]
   });