@elicecontents/content-ui 1.0.12 → 1.0.14

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/Modal/Modal.js

@@ -36,10 +36,12 @@ var EliceModal = function EliceModal(props) {
       }, props.sx),
       children: [iconClose && jsxRuntime.jsx(material.Stack, {
         display: "flex",
+        position: "relative",
         justifyContent: "flex-end",
+        zIndex: 1200,
         alignItems: "flex-end",
+        onClick: handleClose,
         children: jsxRuntime.jsx(HighlightOffIcon__default.default, {
-          onClick: handleClose,
           sx: {
             width: '2.7rem',
             height: '2.7rem',

package/cjs/components/button/Button.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 import { type ButtonProps } from '@mui/material';
 export interface EliceButtonProps extends ButtonProps {
     children?: React.ReactNode;
+    textColor?: string;
+    bgColor?: string;
 }
 declare const EliceButton: React.ForwardRefExoticComponent<Omit<EliceButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default EliceButton;

package/cjs/components/button/Button.js

@@ -13,10 +13,14 @@ var EliceButton = React.forwardRef(function (_a, ref) {
     _a$variant = _a.variant,
     variant = _a$variant === void 0 ? 'contained' : _a$variant,
     disabled = _a.disabled,
-    rest = tslib.__rest(_a, ["children", "variant", "disabled"]);
+    textColor = _a.textColor,
+    bgColor = _a.bgColor,
+    rest = tslib.__rest(_a, ["children", "variant", "disabled", "textColor", "bgColor"]);
   var theme = material.useTheme();
   var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
     isMiniTablet = _useAIDTMediaQuery.isMiniTablet;
+  var resolvedColor = textColor !== null && textColor !== void 0 ? textColor : disabled ? theme.palette.text.disabled : variant === 'outlined' ? theme.palette.primary.main : theme.palette.common.white;
+  var resolvedBgColor = bgColor !== null && bgColor !== void 0 ? bgColor : variant === 'outlined' ? theme.palette.common.white : disabled ? theme.palette.grey[300] : theme.palette.primary.main;
   return jsxRuntime.jsx(material.Button, Object.assign({
     ref: ref,
     variant: variant,
@@ -26,8 +30,8 @@ var EliceButton = React.forwardRef(function (_a, ref) {
       height: isMiniTablet ? '42px' : '56px',
       borderRadius: isMiniTablet ? '12px' : '16px',
       padding: isMiniTablet ? '8px 12px' : '12px 20px',
-      color: disabled ? theme.palette.text.disabled : variant === 'outlined' ? theme.palette.primary.main : theme.palette.common.white,
-      backgroundColor: variant === 'outlined' ? theme.palette.common.white : disabled ? theme.palette.grey[300] : theme.palette.primary.main,
+      color: resolvedColor,
+      backgroundColor: resolvedBgColor,
       fontFamily: 'inherit'
     }
   }, rest, {

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,
@@ -56,6 +58,8 @@ var EliceChatContainer = function EliceChatContainer(_ref) {
     _ref$isOnlyRecord = _ref.isOnlyRecord,
     isOnlyRecord = _ref$isOnlyRecord === void 0 ? false : _ref$isOnlyRecord;
   var theme = material.useTheme();
+  var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
+    isTablet = _useAIDTMediaQuery.isTablet;
   var _useState = React.useState(content),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     inputValue = _useState2[0],
@@ -84,6 +88,7 @@ var EliceChatContainer = function EliceChatContainer(_ref) {
     }
   };
   return jsxRuntime.jsxs(StyledChatContainer, {
+    isTablet: isTablet,
     theme: theme,
     height: height,
     backgroundImage: backgroundImage,
@@ -108,7 +113,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 +141,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 +166,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,
@@ -245,55 +252,58 @@ 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) {
-  var theme = _ref5.theme;
+}, ";min-width:", function (_ref5) {
+  var isTablet = _ref5.isTablet;
+  return isTablet ? '0' : '30rem';
+}, ";max-width:100%;border:2px solid ", function (_ref6) {
+  var theme = _ref6.theme;
   return theme.palette.grey[300];
-}, ";border-radius:1.5rem;padding:1.5rem;gap:1.75rem;", function (_ref6) {
-  var backgroundImage = _ref6.backgroundImage;
+}, ";border-radius:1.5rem;padding:1.5rem;gap:1.75rem;", function (_ref7) {
+  var backgroundImage = _ref7.backgroundImage;
   return backgroundImage && "\n    background-image: url(".concat(backgroundImage, ");\n    background-size: cover;\n    background-position: center;\n  ");
 }, ";");
 var StyledScrollBarStack = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "e1i7zt7"
-})("flex:1;overflow-y:auto;border-radius:1.125rem;padding-right:1rem;::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.palette.grey[200];
-}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref8) {
+})("flex:1;overflow-y:auto;border-radius:1.125rem;padding-right:1rem;::-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 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;
-  return theme.palette.secondary.main;
-}, ";::placeholder{color:", function (_ref11) {
+})("width:100%;height:100%;border:none!important;background-color:transparent;font-size:1.375rem;font-weight:700;outline:none;resize:none;color:", function (_ref11) {
   var theme = _ref11.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) {
+  return theme.palette.secondary.main;
+}, ";::placeholder{color:", function (_ref12) {
   var theme = _ref12.theme;
-  return theme.palette.grey[200];
-}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref13) {
+  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 (_ref13) {
   var theme = _ref13.theme;
-  return theme.palette.primary.main;
-}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (_ref14) {
+  return theme.palette.grey[200];
+}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref14) {
   var theme = _ref14.theme;
+  return theme.palette.primary.main;
+}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (_ref15) {
+  var theme = _ref15.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;
+})("color:", function (_ref16) {
+  var isAssistant = _ref16.isAssistant,
+    theme = _ref16.theme;
   return isAssistant ? theme.palette.text.secondary : theme.palette.secondary.main;
-}, ";font-size:1rem;font-weight:", function (_ref16) {
-  var isAssistant = _ref16.isAssistant;
+}, ";font-size:1rem;font-weight:", function (_ref17) {
+  var isAssistant = _ref17.isAssistant;
   return isAssistant ? 500 : 700;
-}, ";background-color:", function (_ref17) {
-  var isAssistant = _ref17.isAssistant,
-    theme = _ref17.theme;
+}, ";background-color:", function (_ref18) {
+  var isAssistant = _ref18.isAssistant,
+    theme = _ref18.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, {
@@ -338,17 +348,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;
-  return theme.palette.common.white;
-}, ";background:", function (_ref19) {
+})("color:", function (_ref19) {
   var theme = _ref19.theme;
-  return theme.palette.common.red[900];
-}, ";&:hover{background:", function (_ref20) {
+  return theme.palette.common.white;
+}, ";background:", function (_ref20) {
   var theme = _ref20.theme;
-  return theme.palette.common.red[600];
-}, ";color:", function (_ref21) {
+  return theme.palette.common.red[900];
+}, ";&:hover{background:", function (_ref21) {
   var theme = _ref21.theme;
+  return theme.palette.common.red[600];
+}, ";color:", function (_ref22) {
+  var theme = _ref22.theme;
   return theme.palette.common.red[900];
 }, ";}");
 

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

@@ -16,11 +16,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 var FooterContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "ecog5a42"
 })("production" === "production" ? {
-  name: "vw5qh8",
-  styles: "display:flex;align-items:center;justify-content:center;gap:12px"
+  name: "z2w5c4",
+  styles: "display:flex;align-items:center;justify-content:center;white-space:nowrap;flex-direction:row;gap:12px"
 } : {
-  name: "vw5qh8",
-  styles: "display:flex;align-items:center;justify-content:center;gap:12px",
+  name: "z2w5c4",
+  styles: "display:flex;align-items:center;justify-content:center;white-space:nowrap;flex-direction:row;gap:12px",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 var FooterPagination = /*#__PURE__*/_styled__default.default(material.Typography, {

package/cjs/components/recorder-step/RecorderStep.d.ts

@@ -6,11 +6,14 @@ export interface EliceRecorderStepProps {
     onTransform?: () => void;
     type?: RecorderType;
     visualType?: SoundVisualizerVariant;
+    isReadyVisual?: boolean;
     onRecord?: () => void;
+    onResume?: () => void;
+    onPause?: () => void;
     closeRecorder?: () => void;
     onTranscribingChange?: (value: boolean) => void;
     isLoadingMessage?: boolean;
     forcedStep?: RecorderStep;
 }
-declare const EliceRecorderStep: ({ onAudioReady, onTransform, visualType, onRecord, type, onTranscribingChange, forcedStep, closeRecorder, }: EliceRecorderStepProps) => import("react/jsx-runtime").JSX.Element;
+declare const EliceRecorderStep: ({ onAudioReady, onTransform, visualType, onRecord, type, isReadyVisual, onResume, onPause, onTranscribingChange, forcedStep, closeRecorder, }: EliceRecorderStepProps) => import("react/jsx-runtime").JSX.Element;
 export default EliceRecorderStep;

package/cjs/components/recorder-step/RecorderStep.js

@@ -28,6 +28,10 @@ var EliceRecorderStep = function EliceRecorderStep(_ref) {
     onRecord = _ref.onRecord,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? "notNeed" : _ref$type,
+    _ref$isReadyVisual = _ref.isReadyVisual,
+    isReadyVisual = _ref$isReadyVisual === void 0 ? false : _ref$isReadyVisual,
+    onResume = _ref.onResume,
+    onPause = _ref.onPause,
     onTranscribingChange = _ref.onTranscribingChange,
     forcedStep = _ref.forcedStep,
     closeRecorder = _ref.closeRecorder;
@@ -68,9 +72,11 @@ var EliceRecorderStep = function EliceRecorderStep(_ref) {
     };
   }();
   var handlePause = function handlePause() {
+    onPause === null || onPause === void 0 ? void 0 : onPause();
     pauseRecording();
   };
   var handleResume = function handleResume() {
+    onResume === null || onResume === void 0 ? void 0 : onResume();
     resumeRecording();
   };
   var handleStop = function handleStop() {
@@ -98,7 +104,7 @@ var EliceRecorderStep = function EliceRecorderStep(_ref) {
       variant: visualType,
       onClickRecord: handleStart
     }) : jsxRuntime.jsxs(StyledVisualizerBox, {
-      children: [jsxRuntime.jsx(SoundVisualizer.SoundVisualizer, {
+      children: [!isReadyVisual && jsxRuntime.jsx(SoundVisualizer.SoundVisualizer, {
         analyser: recorderState.analyser,
         variant: visualType,
         bgColor: theme.palette.common.white

package/cjs/hooks/index.d.ts

@@ -1 +1 @@
-export * from './useAIDTMediaQuery';
+export { default as useAIDTMediaQuery } from './useAIDTMediaQuery';

package/cjs/hooks/index.js

@@ -1,4 +1,7 @@
 'use strict';
 
-require('@mui/material');
+var useAIDTMediaQuery = require('./useAIDTMediaQuery.js');
 
+
+
+exports.useAIDTMediaQuery = useAIDTMediaQuery.default;

package/cjs/index.d.ts

@@ -1,3 +1,4 @@
+import './types/theme-augmentation';
 export * from './components';
 export * from './theme';
 export * from './tokens';

package/cjs/index.js

@@ -1,5 +1,6 @@
 'use strict';
 
+require('@mui/material/styles');
 var AIFeedback = require('./components/AI-feedback/AIFeedback.js');
 var Badge = require('./components/badge/Badge.js');
 var Button = require('./components/button/Button.js');
@@ -48,7 +49,7 @@ var Recording = require('./icons/Recording.js');
 var ReadyRecord = require('./icons/ReadyRecord.js');
 var RecordPlay = require('./icons/RecordPlay.js');
 var SendArrow = require('./icons/SendArrow.js');
-require('@mui/material');
+var useAIDTMediaQuery = require('./hooks/useAIDTMediaQuery.js');
 var mint = require('./tokens/colors/mint.js');
 var bluepurple = require('./tokens/colors/bluepurple.js');
 var gray = require('./tokens/colors/gray.js');
@@ -110,6 +111,7 @@ exports.Recording = Recording.default;
 exports.ReadyRecord = ReadyRecord.default;
 exports.RecordPlay = RecordPlay.default;
 exports.SendArrow = SendArrow.default;
+exports.useAIDTMediaQuery = useAIDTMediaQuery.default;
 exports.mint = mint.mint;
 exports.bluepurple = bluepurple.bluepurple;
 exports.gray = gray.gray;

package/cjs/theme/createAIDTTheme.d.ts

@@ -1,80 +1,3 @@
-/// <reference types="react" />
-import type { PaletteMode, PaletteOptions, Theme } from '@mui/material';
-import type { TypographyFontFamilyType } from '../typography';
-declare module '@mui/material/styles' {
-    interface TypographyVariants {
-        pagination: React.CSSProperties;
-        buttoninput: React.CSSProperties;
-    }
-    interface CommonColors {
-        white: string;
-        black: string;
-        text: {
-            primary: string;
-            secondary: string;
-            teritary: string;
-            inverse: string;
-        };
-        point: {
-            point1: string;
-            point2: string;
-            point3: string;
-            point4: string;
-        };
-        red: {
-            50: string;
-            100: string;
-            200: string;
-            600: string;
-            900: string;
-        };
-        green: {
-            50: string;
-            100: string;
-            200: string;
-            600: string;
-            900: string;
-            opacity: {
-                15: string;
-            };
-        };
-        yellow: {
-            200: string;
-            900: string;
-            opacity: {
-                '200-30': string;
-                '900-30': string;
-                '900-60': string;
-            };
-        };
-    }
-}
-declare module '@mui/material/Typography' {
-    interface TypographyPropsVariantOverrides {
-        pagination: true;
-        buttoninput: true;
-    }
-}
-export interface MuiPalette {
-    light: PaletteOptions;
-    dark: PaletteOptions;
-}
-export type AIDTPalettePublisher = 'elice' | 'type1' | 'type2';
-export type AIDTPaletteSubject = 'korean' | 'computerScience' | 'english' | 'socialStudy' | 'math' | 'science';
-export type AIDTPaletteLevel = 'elementary' | 'middle' | 'high';
-export interface SurfaceColor {
-    border: string;
-}
-export interface CreateAIDTThemeProps {
-    paletteMode?: PaletteMode;
-    palettePublisher?: AIDTPalettePublisher;
-    paletteSubject?: AIDTPaletteSubject;
-    paletteLevel?: AIDTPaletteLevel;
-    typographyFontFamily: TypographyFontFamilyType;
-}
-export type CreateAIDTTheme = (props?: CreateAIDTThemeProps) => Theme;
-/**
- * Create AIDT Theme according to PaletteName, pallettPublisher, pallettSubject, pallettLevel
- **/
-declare const createAIDTTheme: ({ paletteMode, palettePublisher, paletteSubject, paletteLevel, typographyFontFamily, }: CreateAIDTThemeProps) => Theme;
+import type { CreateAIDTThemeProps } from '../types/theme.types';
+declare const createAIDTTheme: ({ paletteMode, palettePublisher, paletteSubject, paletteLevel, typographyFontFamily, }: CreateAIDTThemeProps) => import("@mui/material").Theme;
 export { createAIDTTheme };

package/cjs/theme/createAIDTTheme.js

@@ -7,9 +7,6 @@ var _base = require('./_base.js');
 var AIDTTheme = require('./AIDTTheme.js');
 var breakpoints = require('../breakpoints/breakpoints.js');
 
-/**
- * Create AIDT Theme according to PaletteName, pallettPublisher, pallettSubject, pallettLevel
- **/
 var createAIDTTheme = function createAIDTTheme(_ref) {
   var _ref$paletteMode = _ref.paletteMode,
     paletteMode = _ref$paletteMode === void 0 ? 'light' : _ref$paletteMode,

package/cjs/tokens/colors/common.js

@@ -7,7 +7,8 @@ var common = Object.freeze({
     primary: '#1E1E1E',
     secondary: '#363643',
     teritary: '#525265',
-    inverse: '#ffffff'
+    inverse: '#ffffff',
+    quaternary: '#9FA0B1'
   },
   point: {
     point1: '#BB7CF5',

package/cjs/types/theme-augmentation.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+import '@mui/material/styles';
+declare module '@mui/material/styles' {
+    interface TypographyVariants {
+        pagination: React.CSSProperties;
+        buttoninput: React.CSSProperties;
+    }
+    interface TypographyVariantsOptions {
+        pagination?: React.CSSProperties;
+        buttoninput?: React.CSSProperties;
+    }
+    interface CommonColors {
+        white: string;
+        black: string;
+        text: {
+            primary: string;
+            secondary: string;
+            teritary: string;
+            inverse: string;
+        };
+        point: {
+            point1: string;
+            point2: string;
+            point3: string;
+            point4: string;
+        };
+        red: {
+            50: string;
+            100: string;
+            200: string;
+            600: string;
+            900: string;
+        };
+        green: {
+            50: string;
+            100: string;
+            200: string;
+            600: string;
+            900: string;
+            opacity: {
+                15: string;
+            };
+        };
+        yellow: {
+            200: string;
+            900: string;
+            opacity: {
+                '200-30': string;
+                '900-30': string;
+                '900-60': string;
+            };
+        };
+    }
+}
+declare module '@mui/material/Typography' {
+    interface TypographyPropsVariantOverrides {
+        subtitle3: true;
+        pagination: true;
+        buttoninput: true;
+    }
+}

package/cjs/types/theme.types.d.ts

@@ -0,0 +1,67 @@
+/// <reference types="react" />
+import type { PaletteMode, PaletteOptions, Theme } from '@mui/material';
+import type { TypographyFontFamilyType } from '../typography';
+export interface TypographyVariantsExtension {
+    pagination: React.CSSProperties;
+    buttoninput: React.CSSProperties;
+}
+export interface CommonColors {
+    white: string;
+    black: string;
+    text: {
+        primary: string;
+        secondary: string;
+        teritary: string;
+        inverse: string;
+    };
+    point: {
+        point1: string;
+        point2: string;
+        point3: string;
+        point4: string;
+    };
+    red: {
+        50: string;
+        100: string;
+        200: string;
+        600: string;
+        900: string;
+    };
+    green: {
+        50: string;
+        100: string;
+        200: string;
+        600: string;
+        900: string;
+        opacity: {
+            15: string;
+        };
+    };
+    yellow: {
+        200: string;
+        900: string;
+        opacity: {
+            '200-30': string;
+            '900-30': string;
+            '900-60': string;
+        };
+    };
+}
+export interface MuiPalette {
+    light: PaletteOptions;
+    dark: PaletteOptions;
+}
+export type AIDTPalettePublisher = 'elice' | 'type1' | 'type2';
+export type AIDTPaletteSubject = 'korean' | 'computerScience' | 'english' | 'socialStudy' | 'math' | 'science';
+export type AIDTPaletteLevel = 'elementary' | 'middle' | 'high';
+export interface SurfaceColor {
+    border: string;
+}
+export interface CreateAIDTThemeProps {
+    paletteMode?: PaletteMode;
+    palettePublisher?: AIDTPalettePublisher;
+    paletteSubject?: AIDTPaletteSubject;
+    paletteLevel?: AIDTPaletteLevel;
+    typographyFontFamily: TypographyFontFamilyType;
+}
+export type CreateAIDTTheme = (props?: CreateAIDTThemeProps) => Theme;

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