@elicecontents/content-ui 1.0.12 → 1.0.13

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/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,60 @@
+/// <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 {
+        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/Modal/Modal.js

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

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

@@ -9,10 +9,14 @@ var EliceButton = forwardRef(function (_a, ref) {
     _a$variant = _a.variant,
     variant = _a$variant === void 0 ? 'contained' : _a$variant,
     disabled = _a.disabled,
-    rest = __rest(_a, ["children", "variant", "disabled"]);
+    textColor = _a.textColor,
+    bgColor = _a.bgColor,
+    rest = __rest(_a, ["children", "variant", "disabled", "textColor", "bgColor"]);
   var theme = useTheme();
   var _useAIDTMediaQuery = useAIDTMediaQuery(),
     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 jsx(Button, Object.assign({
     ref: ref,
     variant: variant,
@@ -22,8 +26,8 @@ var EliceButton = 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/es/components/layout/Footer/LayoutFooterPaging.js

@@ -8,11 +8,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 var FooterContainer = /*#__PURE__*/_styled(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(Typography, {

package/es/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/es/components/recorder-step/RecorderStep.js

@@ -19,6 +19,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;
@@ -59,9 +63,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() {
@@ -89,7 +95,7 @@ var EliceRecorderStep = function EliceRecorderStep(_ref) {
       variant: visualType,
       onClickRecord: handleStart
     }) : jsxs(StyledVisualizerBox, {
-      children: [jsx(SoundVisualizer, {
+      children: [!isReadyVisual && jsx(SoundVisualizer, {
         analyser: recorderState.analyser,
         variant: visualType,
         bgColor: theme.palette.common.white

package/es/hooks/index.d.ts

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

package/es/hooks/index.js

@@ -1 +1 @@
-import '@mui/material';
+export { default as useAIDTMediaQuery } from './useAIDTMediaQuery.js';

package/es/index.d.ts

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

package/es/index.js

@@ -1,3 +1,4 @@
+import '@mui/material/styles';
 export { default as EliceAIFeedback } from './components/AI-feedback/AIFeedback.js';
 export { default as EliceBadge } from './components/badge/Badge.js';
 export { default as EliceButton } from './components/button/Button.js';
@@ -42,6 +43,7 @@ export { default as Recording } from './icons/Recording.js';
 export { default as ReadyRecord } from './icons/ReadyRecord.js';
 export { default as RecordPlay } from './icons/RecordPlay.js';
 export { default as SendArrow } from './icons/SendArrow.js';
+export { default as useAIDTMediaQuery } from './hooks/useAIDTMediaQuery.js';
 export { RecorderProvider } from './components/recorder-step/RecorderContext.js';
 export { createAIDTTheme } from './theme/createAIDTTheme.js';
 export { mint } from './tokens/colors/mint.js';

package/es/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/es/theme/createAIDTTheme.js

@@ -5,9 +5,6 @@ import { getThemeColors } from './AIDTTheme.js';
 import { AIDTBreakpoints } from '../breakpoints/breakpoints.js';
 import { common } from '../tokens/colors/common.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/es/tokens/colors/common.js

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

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

@@ -0,0 +1,60 @@
+/// <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 {
+        pagination: true;
+        buttoninput: true;
+    }
+}

package/es/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elicecontents/content-ui",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "A set of UI components for creating content of Elice",
   "author": "Elice <contact@elice.io>",
   "license": "UNLICENSED",