@elicecontents/content-ui 1.0.3 → 1.0.4

package/es/components/chat/Chat.js

@@ -13,67 +13,72 @@ import Send from '../../icons/Send.js';
 
 var StyledChatContainer = /*#__PURE__*/_styled(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(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(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(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 = useTheme();
   var _useState = useState(content),
     _useState2 = _slicedToArray(_useState, 2),
@@ -95,6 +100,7 @@ var _EliceChat = function EliceChat(_ref13) {
   };
   return jsxs(StyledChatContainer, {
     theme: theme,
+    height: height,
     children: [jsx(_EliceChat.MessageList, {
       messages: messages,
       isLoadingMessage: isLoadingMessage,
@@ -114,13 +120,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 = useTheme();
   return jsx(StyledScrollBarStack, {
     theme: theme,
+    height: height,
     children: messages.length === 0 ? jsx(Typography, {
       color: theme.palette.text.disabled,
       fontSize: "2rem",
@@ -149,14 +158,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 = useTheme();
   return jsxs(Stack, {
     direction: "row",

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

@@ -16,3 +16,4 @@ 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';
 export { default as BaseInput } from './base-input/BaseInput.js';
+export { default as EliceModal } from './Modal/Modal.js';

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

@@ -1,6 +1,6 @@
 import _styled from '@emotion/styled/base';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Typography, useTheme } from '@mui/material';
+import { useTheme, Typography } from '@mui/material';
 import useAIDTMediaQuery from '../../../hooks/useAIDTMediaQuery.js';
 import PaginationButton from '../../pagination-button/PaginationButton.js';
 
@@ -17,50 +17,49 @@ var FooterContainer = /*#__PURE__*/_styled("div", {
 });
 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__
-});
+})("padding:", function (_ref) {
+  var isTablet = _ref.isTablet;
+  return isTablet ? "0 10px" : "0 32px";
+}, ";white-space:nowrap;");
 var StyledCurrentPage = /*#__PURE__*/_styled("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 = useTheme();
   var _useAIDTMediaQuery = useAIDTMediaQuery(),
-    isMiniTablet = _useAIDTMediaQuery.isMiniTablet;
+    isTablet = _useAIDTMediaQuery.isTablet;
   return jsxs(FooterContainer, {
-    children: [isMiniTablet && jsx(PaginationButton, {
+    children: [isTablet && jsx(PaginationButton, {
       left: true,
       onClick: onPrev,
-      disabled: !allowPrev
+      disabled: !allowPrev,
+      size: 28
     }), jsxs(FooterPagination, {
       variant: "pagination",
       sx: {
         color: "#D8D8E2"
       },
+      isTablet: isTablet,
       children: [jsx(StyledCurrentPage, {
         fontColor: theme.palette.primary.main,
         children: currentPage
       }), " ", "/ ", totalPage]
-    }), isMiniTablet && jsx(PaginationButton, {
+    }), isTablet && jsx(PaginationButton, {
       right: true,
       onClick: onNext,
-      disabled: !allowNext
+      disabled: !allowNext,
+      size: 28
     })]
   });
 };

package/es/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/es/components/layout/Footer/LayoutFooterSubmit.js

@@ -2,14 +2,22 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Stack } from '@mui/material';
 import EliceButton from '../../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 jsxs(Stack, {
     direction: "row",
     spacing: 1,
-    children: [jsx(EliceButton, {
+    children: [isRollback && jsx(EliceButton, {
       variant: "outlined",
+      onClick: onRollback,
       children: "\uB2E4\uC2DC\uD558\uAE30"
-    }), jsx(EliceButton, {
+    }), isSubmit && jsx(EliceButton, {
+      onClick: onSubmit,
       children: "\uC81C\uCD9C\uD558\uAE30"
     })]
   });

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

@@ -24,13 +24,7 @@ var MainContainer = /*#__PURE__*/_styled(Stack, {
 }, ";background-size:cover;background-position:center;background-color:", function (_ref3) {
   var backgroundColor = _ref3.backgroundColor;
   return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : "#fff";
-}, ";overflow-y:hidden;background-image:", function (_ref4) {
-  var backgroundImage = _ref4.backgroundImage;
-  return backgroundImage ? "url(".concat(backgroundImage, ")") : "none";
-}, ";background-size:cover;background-position:center;background-color:", function (_ref5) {
-  var backgroundColor = _ref5.backgroundColor;
-  return backgroundColor || "#fff";
-}, ";");
+}, ";overflow-y:hidden;");
 var _HeaderContainer = /*#__PURE__*/_styled(Stack, {
   target: "efnp08i5"
 })("production" === "production" ? {
@@ -53,32 +47,32 @@ var _FooterContainer = /*#__PURE__*/_styled(Stack, {
 });
 var SubtitleContainer = /*#__PURE__*/_styled(Stack, {
   target: "efnp08i3"
-})("height:80px;width:100%;padding:20px 40px;display:flex;align-items:", function (_ref6) {
-  var alignment = _ref6.alignment;
+})("height:80px;width:100%;padding:20px 40px;display:flex;align-items:", function (_ref4) {
+  var alignment = _ref4.alignment;
   return alignment;
-}, ";justify-content:", function (_ref7) {
-  var justifyContent = _ref7.justifyContent;
+}, ";justify-content:", function (_ref5) {
+  var justifyContent = _ref5.justifyContent;
   return justifyContent;
-}, ";background-color:", function (_ref8) {
-  var isSticky = _ref8.isSticky;
+}, ";background-color:", function (_ref6) {
+  var isSticky = _ref6.isSticky;
   return isSticky ? "#fff" : "none";
-}, ";position:", function (_ref9) {
-  var isSticky = _ref9.isSticky;
+}, ";position:", function (_ref7) {
+  var isSticky = _ref7.isSticky;
   return isSticky ? "sticky" : "relative";
-}, ";top:", function (_ref10) {
-  var isSticky = _ref10.isSticky;
+}, ";top:", function (_ref8) {
+  var isSticky = _ref8.isSticky;
   return isSticky ? "0" : "auto";
-}, ";left:0;z-index:10;transition:all 0.2s ease-in-out;box-shadow:", function (_ref11) {
-  var isSticky = _ref11.isSticky;
+}, ";left:0;z-index:10;transition:all 0.2s ease-in-out;box-shadow:", function (_ref9) {
+  var isSticky = _ref9.isSticky;
   return isSticky ? "0 2px 5px rgba(0, 0, 0, 0.1)" : "none";
 }, ";");
 var _ContentContainer = /*#__PURE__*/_styled(Stack, {
   target: "efnp08i2"
-})("flex:1;width:100%;max-height:calc(100vh - 74px - 92px);overflow-y:auto;min-height:0;position:relative;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref12) {
-  var theme = _ref12.theme;
+})("flex:1;width:100%;max-height:calc(100vh - 74px - 92px);overflow-y:auto;min-height:0;position:relative;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref10) {
+  var theme = _ref10.theme;
   return theme.palette.primary.main;
-}, ";border-radius:4px;}&::-webkit-scrollbar-track{background-color:", function (_ref13) {
-  var theme = _ref13.theme;
+}, ";border-radius:4px;}&::-webkit-scrollbar-track{background-color:", function (_ref11) {
+  var theme = _ref11.theme;
   return theme.palette.grey[300];
 }, ";border-radius:4px;}");
 var ScrollMoreButton = /*#__PURE__*/_styled(Button, {
@@ -93,21 +87,23 @@ var ScrollMoreButton = /*#__PURE__*/_styled(Button, {
 });
 var _Content = /*#__PURE__*/_styled(Stack, {
   target: "efnp08i0"
-})("flex:1;width:100%;min-height:0;text-align:", function (_ref14) {
-  var alignment = _ref14.alignment;
+})("flex:1;width:100%;min-height:0;text-align:", function (_ref12) {
+  var alignment = _ref12.alignment;
   return alignment;
-}, ";justify-content:", function (_ref15) {
-  var justifyContent = _ref15.justifyContent;
+}, ";justify-content:", function (_ref13) {
+  var justifyContent = _ref13.justifyContent;
   return justifyContent;
 }, ";");
-var EliceLayout = Object.assign(function (_ref16) {
-  var children = _ref16.children,
-    onPrev = _ref16.onPrev,
-    onNext = _ref16.onNext,
-    allowPrev = _ref16.allowPrev,
-    allowNext = _ref16.allowNext,
-    backgroundImage = _ref16.backgroundImage,
-    backgroundColor = _ref16.backgroundColor;
+var EliceLayout = Object.assign(function (_ref14) {
+  var children = _ref14.children,
+    onPrev = _ref14.onPrev,
+    onNext = _ref14.onNext,
+    allowPrev = _ref14.allowPrev,
+    allowNext = _ref14.allowNext,
+    backgroundImage = _ref14.backgroundImage,
+    backgroundColor = _ref14.backgroundColor,
+    _ref14$onlyPage = _ref14.onlyPage,
+    onlyPage = _ref14$onlyPage === void 0 ? false : _ref14$onlyPage;
   var _useAIDTMediaQuery = useAIDTMediaQuery(),
     isTablet = _useAIDTMediaQuery.isTablet,
     isMiniTablet = _useAIDTMediaQuery.isMiniTablet;
@@ -124,7 +120,7 @@ var EliceLayout = Object.assign(function (_ref16) {
       isMiniTablet: isMiniTablet,
       backgroundImage: backgroundImage,
       backgroundColor: backgroundColor,
-      children: [!isTablet && jsx(LayoutPagination, {
+      children: [!onlyPage && !isTablet && jsx(LayoutPagination, {
         onPrev: onPrev,
         onNext: onNext,
         allowPrev: allowPrev,
@@ -133,16 +129,16 @@ var EliceLayout = Object.assign(function (_ref16) {
     })
   });
 }, {
-  HeaderContainer: function HeaderContainer(_ref17) {
-    var children = _ref17.children;
+  HeaderContainer: function HeaderContainer(_ref15) {
+    var children = _ref15.children;
     return jsx(_HeaderContainer, {
       children: children
     });
   },
   HeaderTitle: LayoutHeaderTitle,
   HeaderSubTitle: LayoutHeaderSubTitle,
-  ContentContainer: function ContentContainer(_ref18) {
-    var children = _ref18.children;
+  ContentContainer: function ContentContainer(_ref16) {
+    var children = _ref16.children;
     var theme = useTheme();
     var contentRef = React.useRef(null);
     var context = React.useContext(EliceLayoutContext);
@@ -193,12 +189,12 @@ var EliceLayout = Object.assign(function (_ref16) {
       })]
     });
   },
-  Subtitle: function Subtitle(_ref19) {
-    var children = _ref19.children,
-      _ref19$alignment = _ref19.alignment,
-      alignment = _ref19$alignment === void 0 ? "left" : _ref19$alignment,
-      _ref19$justifyContent = _ref19.justifyContent,
-      justifyContent = _ref19$justifyContent === void 0 ? "flex-start" : _ref19$justifyContent;
+  Subtitle: function Subtitle(_ref17) {
+    var children = _ref17.children,
+      _ref17$alignment = _ref17.alignment,
+      alignment = _ref17$alignment === void 0 ? "left" : _ref17$alignment,
+      _ref17$justifyContent = _ref17.justifyContent,
+      justifyContent = _ref17$justifyContent === void 0 ? "flex-start" : _ref17$justifyContent;
     var context = React.useContext(EliceLayoutContext);
     if (!context) {
       throw new Error("EliceLayout components must be used within an EliceLayout provider.");
@@ -211,12 +207,12 @@ var EliceLayout = Object.assign(function (_ref16) {
       children: children
     });
   },
-  Content: function Content(_ref20) {
-    var children = _ref20.children,
-      _ref20$alignment = _ref20.alignment,
-      alignment = _ref20$alignment === void 0 ? "left" : _ref20$alignment,
-      _ref20$justifyContent = _ref20.justifyContent,
-      justifyContent = _ref20$justifyContent === void 0 ? "flex-start" : _ref20$justifyContent;
+  Content: function Content(_ref18) {
+    var children = _ref18.children,
+      _ref18$alignment = _ref18.alignment,
+      alignment = _ref18$alignment === void 0 ? "left" : _ref18$alignment,
+      _ref18$justifyContent = _ref18.justifyContent,
+      justifyContent = _ref18$justifyContent === void 0 ? "flex-start" : _ref18$justifyContent;
     return jsx(_Content, {
       alignment: alignment,
       justifyContent: justifyContent,
@@ -226,8 +222,8 @@ var EliceLayout = Object.assign(function (_ref16) {
       })
     });
   },
-  FooterContainer: function FooterContainer(_ref21) {
-    var children = _ref21.children;
+  FooterContainer: function FooterContainer(_ref19) {
+    var children = _ref19.children;
     return jsx(_FooterContainer, {
       children: children
     });

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

@@ -6,11 +6,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 var PaginationWrapper = /*#__PURE__*/_styled("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/es/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/es/components/pagination-button/PaginationButton.js

@@ -1,30 +1,51 @@
 import _styled from '@emotion/styled/base';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import useAIDTMediaQuery from '../../hooks/useAIDTMediaQuery.js';
 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;
+})("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(),
+    isTablet = _useAIDTMediaQuery.isTablet;
+  console.log(isTablet);
   return jsxs(Button, {
     onClick: onClick,
     disabled: disabled,
-    children: [left && jsx(ArrowLeft, {}), right && jsx(ArrowRight, {})]
+    isTablet: isTablet,
+    size: size,
+    children: [left && jsx(ArrowLeft, {
+      size: size
+    }), right && jsx(ArrowRight, {
+      size: size
+    })]
   });
 };
 

package/es/components/question/Question.js

@@ -1,14 +1,14 @@
 import _styled from '@emotion/styled/base';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useTheme, Stack, Typography } from '@mui/material';
-import { point3Color, KeyElementaryBg } from '../tokenColorTemporary.js';
+import { primaryColor, KeyElementaryBg } from '../tokenColorTemporary.js';
 
 var StyledMark = /*#__PURE__*/_styled(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 : 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 : 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 : KeyElementaryBg;
 }, ";}");
@@ -21,12 +21,12 @@ var EliceQuestion = function EliceQuestion(_ref) {
     direction: "row",
     gap: "1rem",
     children: [jsx(StyledMark, {
-      contentColor: theme.palette.primary.light,
+      contentColor: theme.palette.background["default"],
       borderColor: theme.palette.primary.main,
       children: jsxs(Typography, {
         fontWeight: 800,
-        fontSize: "1.5rem",
-        color: theme.palette.primary.main,
+        fontSize: "1.3rem",
+        color: primaryColor,
         position: "relative",
         children: ["Q", jsx("span", {
           style: {
@@ -36,8 +36,8 @@ var EliceQuestion = function EliceQuestion(_ref) {
         })]
       })
     }), jsx(Typography, {
-      color: theme.palette.primary.main,
-      variant: "h4",
+      color: theme.palette.grey[900],
+      variant: "subtitle1",
       children: question
     })]
   });