@elicecontents/content-ui 1.0.13 → 1.0.14-rc.0

package/cjs/components/AI-feedback/AIFeedback.d.ts

@@ -1,4 +1,7 @@
+import React from 'react';
 import type { EliceTooltipProps } from '../tooltip';
-export type EliceAIFeedbackProps = Omit<EliceTooltipProps, 'children'>;
-declare const EliceAIFeedback: ({ title, placement, ...rest }: EliceAIFeedbackProps) => import("react/jsx-runtime").JSX.Element;
+export type EliceAIFeedbackProps = Omit<EliceTooltipProps, 'children'> & {
+    CustomAvatar?: React.ReactNode;
+};
+declare const EliceAIFeedback: ({ title, placement, CustomAvatar, ...rest }: EliceAIFeedbackProps) => import("react/jsx-runtime").JSX.Element;
 export default EliceAIFeedback;

package/cjs/components/AI-feedback/AIFeedback.js

@@ -12,23 +12,24 @@ var EliceAIFeedback = function EliceAIFeedback(_a) {
   var title = _a.title,
     _a$placement = _a.placement,
     placement = _a$placement === void 0 ? 'left' : _a$placement,
-    rest = tslib.__rest(_a, ["title", "placement"]);
+    CustomAvatar = _a.CustomAvatar,
+    rest = tslib.__rest(_a, ["title", "placement", "CustomAvatar"]);
   return jsxRuntime.jsx(Tooltip.default, Object.assign({
     title: title,
     placement: placement
   }, rest, {
     isControl: true,
     triggerAction: "click",
-    children: jsxRuntime.jsx(material.Stack, {
+    children: jsxRuntime.jsxs(material.Stack, {
       position: "relative",
       width: "fit-content",
       height: "fit-content",
       maxWidth: "100%",
       maxHeight: "100%",
-      children: jsxRuntime.jsx("img", {
+      children: [CustomAvatar !== null && CustomAvatar !== void 0 ? CustomAvatar : jsxRuntime.jsx("img", {
         src: AIAvatar.default,
-        alt: ""
-      })
+        alt: "AI Avatar"
+      }), " "]
     })
   }));
 };

package/cjs/components/AdaptiveImage/AdaptiveImage.d.ts

@@ -1,4 +1,5 @@
-interface EliceImageProps {
+import React from 'react';
+interface AdaptiveImageProps {
     src: string;
     alt: string;
     fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
@@ -6,6 +7,8 @@ interface EliceImageProps {
     height?: number;
     loading?: boolean;
     sx?: object;
+    icon?: React.ReactNode;
+    responsiveBreakpoint?: number;
 }
-declare const EliceImage: ({ src, alt, fit, width, height, loading, sx, }: EliceImageProps) => import("react/jsx-runtime").JSX.Element;
-export default EliceImage;
+declare const AdaptiveImage: ({ src, alt, fit, width, height, loading, sx, icon, responsiveBreakpoint, }: AdaptiveImageProps) => import("react/jsx-runtime").JSX.Element;
+export default AdaptiveImage;

package/cjs/components/AdaptiveImage/AdaptiveImage.js

@@ -6,12 +6,15 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var material = require('@mui/material');
+var ZoomInIcon = require('@mui/icons-material/ZoomIn');
+var useAIDTMediaQuery = require('../../hooks/useAIDTMediaQuery.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var ZoomInIcon__default = /*#__PURE__*/_interopDefaultCompat(ZoomInIcon);
 
-var EliceImage = function EliceImage(_ref) {
+var AdaptiveImage = function AdaptiveImage(_ref) {
   var src = _ref.src,
     alt = _ref.alt,
     _ref$fit = _ref.fit,
@@ -22,43 +25,112 @@ var EliceImage = function EliceImage(_ref) {
     height = _ref$height === void 0 ? 300 : _ref$height,
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
-    sx = _ref.sx;
+    sx = _ref.sx,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? jsxRuntime.jsx(ZoomInIcon__default.default, {
+      fontSize: "large"
+    }) : _ref$icon,
+    _ref$responsiveBreakp = _ref.responsiveBreakpoint,
+    responsiveBreakpoint = _ref$responsiveBreakp === void 0 ? 600 : _ref$responsiveBreakp;
   var _React$useState = React__default.default.useState(false),
     _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
     imageLoaded = _React$useState2[0],
-    setImageLoaded = _React$useState2[1]; // 이미지 로드 상태 관리
+    setImageLoaded = _React$useState2[1];
+  var _React$useState3 = React__default.default.useState(false),
+    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
+    open = _React$useState4[0],
+    setOpen = _React$useState4[1];
   var handleImageLoad = function handleImageLoad() {
     return setImageLoaded(true);
-  }; // 이미지 로드 완료 시 로드 상태 변경
-  return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: jsxRuntime.jsxs(material.Box, {
-      sx: Object.assign({
-        position: 'relative',
-        width: '100%',
-        maxWidth: width,
-        minWidth: '50%',
-        height: height
-      }, sx),
-      children: [jsxRuntime.jsx("img", {
-        src: src,
-        alt: alt,
-        style: {
-          objectFit: fit,
+  };
+  var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
+    isTablet = _useAIDTMediaQuery.isTablet;
+  var isSmall = material.useMediaQuery("(max-width:".concat(responsiveBreakpoint, "px)")) || material.useMediaQuery("(max-height:".concat(responsiveBreakpoint, "px)")) || isTablet;
+  var handleOpen = function handleOpen() {
+    return setOpen(true);
+  };
+  var handleClose = function handleClose() {
+    return setOpen(false);
+  };
+  if (isSmall) {
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(material.Box, {
+        sx: Object.assign({
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
           width: '100%',
-          height: '100%'
-        },
-        onLoad: handleImageLoad
-      }), loading && !imageLoaded && jsxRuntime.jsx(material.CircularProgress, {
-        size: 24,
-        sx: {
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)'
-        }
+          height: 'auto',
+          minHeight: 48
+        }, sx),
+        children: jsxRuntime.jsx(material.IconButton, {
+          onClick: handleOpen,
+          children: icon
+        })
+      }), jsxRuntime.jsx(material.Dialog, {
+        open: open,
+        onClose: handleClose,
+        maxWidth: "md",
+        fullWidth: true,
+        children: jsxRuntime.jsxs(material.DialogContent, {
+          sx: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            p: 2,
+            position: 'relative',
+            minHeight: 200
+          },
+          children: [!imageLoaded && jsxRuntime.jsx(material.CircularProgress, {
+            size: 24,
+            sx: {
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)'
+            }
+          }), jsxRuntime.jsx("img", {
+            src: src,
+            alt: alt,
+            style: {
+              maxWidth: '100%',
+              maxHeight: '80vh',
+              objectFit: fit,
+              display: imageLoaded ? 'block' : 'none'
+            },
+            onLoad: handleImageLoad
+          })]
+        })
       })]
-    })
+    });
+  }
+  return jsxRuntime.jsxs(material.Box, {
+    sx: Object.assign({
+      position: 'relative',
+      width: '100%',
+      maxWidth: width,
+      minWidth: '50%',
+      height: height
+    }, sx),
+    children: [jsxRuntime.jsx("img", {
+      src: src,
+      alt: alt,
+      style: {
+        objectFit: fit,
+        width: '100%',
+        height: '100%'
+      },
+      onLoad: handleImageLoad
+    }), loading && !imageLoaded && jsxRuntime.jsx(material.CircularProgress, {
+      size: 24,
+      sx: {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)'
+      }
+    })]
   });
 };
 
-exports.default = EliceImage;
+exports.default = AdaptiveImage;

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

@@ -20,13 +20,14 @@ export interface EliceChatProps {
     isDisabled?: boolean;
     backgroundImage?: string;
     CustomAssistantAvatar?: React.ReactNode;
+    CustomUserAvatar?: React.ReactNode;
     type?: string;
     recorderType?: RecorderType;
     isOnlyRecord: boolean;
 }
 declare const EliceChat: {
     (props: React.ComponentProps<typeof EliceChatContainer>): import("react/jsx-runtime").JSX.Element;
-    MessageList({ messages, isLoadingMessage, scrollRef, height, CustomAssistantAvatar, }: {
+    MessageList({ messages, isLoadingMessage, scrollRef, height, CustomAssistantAvatar, CustomUserAvatar, }: {
         messages: {
             role: "system" | "user" | "assistant";
             content: string;
@@ -35,6 +36,7 @@ declare const EliceChat: {
         scrollRef: React.RefObject<HTMLDivElement>;
         height?: string | undefined;
         CustomAssistantAvatar: React.ReactNode;
+        CustomUserAvatar: React.ReactNode;
     }): import("react/jsx-runtime").JSX.Element;
     InputArea({ placeHolder, value, isDisabled, onChange, onSend, onReset, onRecord, onTranscribingChange, isOnlyRecord, }: {
         placeHolder: string;
@@ -51,5 +53,5 @@ declare const EliceChat: {
         isOnlyRecord: boolean;
     }): import("react/jsx-runtime").JSX.Element;
 };
-declare const EliceChatContainer: ({ placeholder, messages, content, onReset, onSend, onChange, onRecord, onTranscribingChange, setAudioFile, onTransform, isLoadingMessage, CustomAssistantAvatar, isDisabled, backgroundImage, height, recorderType, isOnlyRecord }: EliceChatProps) => import("react/jsx-runtime").JSX.Element;
+declare const EliceChatContainer: ({ placeholder, messages, content, onReset, onSend, onChange, onRecord, onTranscribingChange, setAudioFile, onTransform, isLoadingMessage, CustomAssistantAvatar, CustomUserAvatar, isDisabled, backgroundImage, height, recorderType, isOnlyRecord }: EliceChatProps) => import("react/jsx-runtime").JSX.Element;
 export default EliceChat;

package/cjs/components/chat/Chat.js

@@ -6,6 +6,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var useAIDTMediaQuery = require('../../hooks/useAIDTMediaQuery.js');
 var material = require('@mui/material');
 require('tslib');
 var Micro = require('../../icons/Micro.js');
@@ -46,6 +47,7 @@ var EliceChatContainer = function EliceChatContainer(_ref) {
     onTransform = _ref.onTransform,
     isLoadingMessage = _ref.isLoadingMessage,
     CustomAssistantAvatar = _ref.CustomAssistantAvatar,
+    CustomUserAvatar = _ref.CustomUserAvatar,
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     backgroundImage = _ref.backgroundImage,
@@ -108,7 +110,8 @@ var EliceChatContainer = function EliceChatContainer(_ref) {
       messages: messages,
       isLoadingMessage: isLoadingMessage,
       scrollRef: scrollRef,
-      CustomAssistantAvatar: CustomAssistantAvatar
+      CustomAssistantAvatar: CustomAssistantAvatar,
+      CustomUserAvatar: CustomUserAvatar
     }), jsxRuntime.jsx(EliceChat.InputArea, {
       placeHolder: placeholder,
       value: inputValue,
@@ -135,7 +138,8 @@ EliceChat.MessageList = function (_ref2) {
     scrollRef = _ref2.scrollRef,
     _ref2$height = _ref2.height,
     height = _ref2$height === void 0 ? "100%" : _ref2$height,
-    CustomAssistantAvatar = _ref2.CustomAssistantAvatar;
+    CustomAssistantAvatar = _ref2.CustomAssistantAvatar,
+    CustomUserAvatar = _ref2.CustomUserAvatar;
   var theme = material.useTheme();
   return jsxRuntime.jsx(StyledScrollBarStack, {
     theme: theme,
@@ -159,7 +163,7 @@ EliceChat.MessageList = function (_ref2) {
           alignItems: "center",
           children: [jsxRuntime.jsx(material.Stack, {
             flexShrink: 0,
-            children: isAssistant ? CustomAssistantAvatar !== null && CustomAssistantAvatar !== void 0 ? CustomAssistantAvatar : jsxRuntime.jsx(AssistantAvatar.default, {}) : jsxRuntime.jsx(UserAvatar.default, {})
+            children: isAssistant ? CustomAssistantAvatar !== null && CustomAssistantAvatar !== void 0 ? CustomAssistantAvatar : jsxRuntime.jsx(AssistantAvatar.default, {}) : CustomUserAvatar !== null && CustomUserAvatar !== void 0 ? CustomUserAvatar : jsxRuntime.jsx(UserAvatar.default, {})
           }), jsxRuntime.jsx(StyledMessage, {
             isAssistant: isAssistant,
             theme: theme,
@@ -186,9 +190,11 @@ EliceChat.InputArea = function (_ref3) {
   var _useRecorder2 = RecorderContext.useRecorder(),
     recorderState = _useRecorder2.state,
     setIsRecording = _useRecorder2.setIsRecording;
+  var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
+    isTablet = _useAIDTMediaQuery.isTablet,
+    isMiniTablet = _useAIDTMediaQuery.isMiniTablet;
   return jsxRuntime.jsx(material.Stack, {
-    direction: "row",
-    minHeight: "3.875rem",
+    direction: isMiniTablet ? "column" : "row",
     display: recorderState.isRecording ? "none" : "",
     bgcolor: theme.palette.grey[50],
     borderRadius: "1.125rem",
@@ -209,6 +215,7 @@ EliceChat.InputArea = function (_ref3) {
         flexGrow: 1,
         maxHeight: "14.625rem",
         children: jsxRuntime.jsx(StyledInput, {
+          isTablet: isTablet,
           disabled: isDisabled,
           value: value,
           onChange: onChange,
@@ -216,26 +223,39 @@ EliceChat.InputArea = function (_ref3) {
           theme: theme,
           multiline: true
         })
-      }), onRecord && jsxRuntime.jsx(IconButton.default, {
-        onClick: function onClick() {
-          onRecord();
-          setIsRecording(true);
-          onTranscribingChange === null || onTranscribingChange === void 0 ? void 0 : onTranscribingChange(true);
-        },
-        children: jsxRuntime.jsx(Micro.default, {
-          color: theme.palette.secondary.main
-        })
-      }), jsxRuntime.jsx(IconButton.default, {
-        onClick: onReset,
-        children: jsxRuntime.jsx(Reset.default, {
-          color: theme.palette.secondary.main
-        })
-      }), jsxRuntime.jsx(IconButton.default, {
-        onClick: onSend,
-        disabled: !value.trim(),
-        children: jsxRuntime.jsx(SendArrow.default, {
-          color: theme.palette.secondary.main
-        })
+      }), jsxRuntime.jsxs(material.Stack, {
+        direction: "row",
+        display: "flex",
+        justifyContent: isMiniTablet ? 'flex-end' : 'center',
+        gap: '0.625rem',
+        height: isTablet ? '3rem' : '3.5rem',
+        children: [onRecord && jsxRuntime.jsx(IconButton.default, {
+          width: isTablet ? '3rem' : '3.5rem',
+          height: isTablet ? '3rem' : '3.5rem',
+          onClick: function onClick() {
+            onRecord();
+            setIsRecording(true);
+            onTranscribingChange === null || onTranscribingChange === void 0 ? void 0 : onTranscribingChange(true);
+          },
+          children: jsxRuntime.jsx(Micro.default, {
+            color: theme.palette.secondary.main
+          })
+        }), jsxRuntime.jsx(IconButton.default, {
+          onClick: onReset,
+          width: isTablet ? '3rem' : '3.5rem',
+          height: isTablet ? '3rem' : '3.5rem',
+          children: jsxRuntime.jsx(Reset.default, {
+            color: theme.palette.secondary.main
+          })
+        }), jsxRuntime.jsx(IconButton.default, {
+          onClick: onSend,
+          width: isTablet ? '3rem' : '3.5rem',
+          height: isTablet ? '3rem' : '3.5rem',
+          disabled: !value.trim(),
+          children: jsxRuntime.jsx(SendArrow.default, {
+            color: theme.palette.secondary.main
+          })
+        })]
       })]
     })
   });
@@ -245,7 +265,7 @@ var StyledChatContainer = /*#__PURE__*/_styled__default.default(material.Stack,
 })("position:relative;max-height:100%;height:", function (_ref4) {
   var height = _ref4.height;
   return height !== null && height !== void 0 ? height : 'fit-content';
-}, ";min-width:30rem;max-width:100%;border:2px solid ", function (_ref5) {
+}, ";max-width:100%;border:2px solid ", function (_ref5) {
   var theme = _ref5.theme;
   return theme.palette.grey[300];
 }, ";border-radius:1.5rem;padding:1.5rem;gap:1.75rem;", function (_ref6) {
@@ -266,34 +286,43 @@ var StyledScrollBarStack = /*#__PURE__*/_styled__default.default(material.Stack,
 }, ";}");
 var StyledInput = /*#__PURE__*/_styled__default.default(material.Input, {
   target: "e1i7zt6"
-})("width:100%;height:100%;border:none!important;background-color:transparent;font-size:1.375rem;font-weight:700;outline:none;resize:none;color:", function (_ref10) {
-  var theme = _ref10.theme;
+})("width:100%;height:100%;border:none!important;background-color:transparent;font-size:", function (_ref10) {
+  var isTablet = _ref10.isTablet;
+  return isTablet ? '0.5rem' : '1.2rem';
+}, ";font-weight:", function (_ref11) {
+  var isTablet = _ref11.isTablet;
+  return isTablet ? 500 : 700;
+}, ";outline:none;resize:none;max-height:67px;color:", function (_ref12) {
+  var theme = _ref12.theme;
   return theme.palette.secondary.main;
-}, ";::placeholder{color:", function (_ref11) {
-  var theme = _ref11.theme;
+}, ";::placeholder{color:", function (_ref13) {
+  var theme = _ref13.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 (_ref12) {
-  var theme = _ref12.theme;
+}, ";}::before{border:none;}:hover{::before{border:none;}}::after{border-bottom:none!important;}::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref14) {
+  var theme = _ref14.theme;
   return theme.palette.grey[200];
-}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref13) {
-  var theme = _ref13.theme;
+}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref15) {
+  var theme = _ref15.theme;
   return theme.palette.primary.main;
-}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (_ref14) {
-  var theme = _ref14.theme;
+}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (_ref16) {
+  var theme = _ref16.theme;
   return theme.palette.secondary.main;
 }, ";}");
 var StyledMessage = /*#__PURE__*/_styled__default.default(material.Typography, {
   target: "e1i7zt5"
-})("color:", function (_ref15) {
-  var isAssistant = _ref15.isAssistant,
-    theme = _ref15.theme;
-  return isAssistant ? theme.palette.text.secondary : theme.palette.secondary.main;
-}, ";font-size:1rem;font-weight:", function (_ref16) {
-  var isAssistant = _ref16.isAssistant;
-  return isAssistant ? 500 : 700;
-}, ";background-color:", function (_ref17) {
+})("color:", function (_ref17) {
   var isAssistant = _ref17.isAssistant,
     theme = _ref17.theme;
+  return isAssistant ? theme.palette.text.secondary : theme.palette.secondary.main;
+}, ";font-size:", function (_ref18) {
+  var theme = _ref18.theme;
+  return theme.typography.body1.fontSize;
+}, ";font-weight:", function (_ref19) {
+  var isAssistant = _ref19.isAssistant;
+  return isAssistant ? 500 : 700;
+}, ";background-color:", function (_ref20) {
+  var isAssistant = _ref20.isAssistant,
+    theme = _ref20.theme;
   return isAssistant ? theme.palette.grey[50] : theme.palette.primary.light;
 }, ";border-radius:1rem;white-space:pre-wrap;padding:0.75rem;margin-bottom:16px;");
 var EmptyMessageContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
@@ -309,11 +338,11 @@ var EmptyMessageContainer = /*#__PURE__*/_styled__default.default(material.Stack
 var AIAvatarImage = /*#__PURE__*/_styled__default.default("img", {
   target: "e1i7zt3"
 })("production" === "production" ? {
-  name: "1l4h0oe",
-  styles: "width:120px;height:120px;flex-shrink:0"
+  name: "95o42w",
+  styles: "width:10rem;height:10rem;aspect-ratio:1/1;flex-shrink:0"
 } : {
-  name: "1l4h0oe",
-  styles: "width:120px;height:120px;flex-shrink:0",
+  name: "95o42w",
+  styles: "width:10rem;height:10rem;aspect-ratio:1/1;flex-shrink:0",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 var RecordingOverlay = /*#__PURE__*/_styled__default.default(material.Box, {
@@ -338,17 +367,17 @@ var OverlayContent = /*#__PURE__*/_styled__default.default(material.Box, {
 });
 var OnlyRecordButton = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "e1i7zt0"
-})("color:", function (_ref18) {
-  var theme = _ref18.theme;
+})("color:", function (_ref21) {
+  var theme = _ref21.theme;
   return theme.palette.common.white;
-}, ";background:", function (_ref19) {
-  var theme = _ref19.theme;
+}, ";background:", function (_ref22) {
+  var theme = _ref22.theme;
   return theme.palette.common.red[900];
-}, ";&:hover{background:", function (_ref20) {
-  var theme = _ref20.theme;
+}, ";width:100%;flex-direction:row;display:flex;justify-content:center;align-items:center;border-radius:16px;height:55px;gap:8px;&:hover{background:", function (_ref23) {
+  var theme = _ref23.theme;
   return theme.palette.common.red[600];
-}, ";color:", function (_ref21) {
-  var theme = _ref21.theme;
+}, ";color:", function (_ref24) {
+  var theme = _ref24.theme;
   return theme.palette.common.red[900];
 }, ";}");
 

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

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

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

@@ -9,10 +9,11 @@ export interface EliceLayoutProps {
     allowPrev?: boolean;
     allowNext?: boolean;
     onlyPage?: boolean;
+    enableScrollTracking?: boolean;
     sx?: SxProps<Theme>;
 }
 type Alignment = "left" | "center" | "right";
-declare const EliceLayout: (({ children, onPrev, onNext, allowPrev, allowNext, backgroundImage, backgroundColor, onlyPage, sx }: EliceLayoutProps) => import("react/jsx-runtime").JSX.Element) & {
+declare const EliceLayout: (({ children, onPrev, onNext, allowPrev, allowNext, backgroundImage, backgroundColor, onlyPage, enableScrollTracking, sx }: EliceLayoutProps) => import("react/jsx-runtime").JSX.Element) & {
     HeaderContainer: ({ children, sx }: {
         children: React.ReactNode;
         sx?: SxProps<Theme> | undefined;