@elicecontents/content-ui 1.0.11 → 1.0.12-rc.0

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

@@ -24,7 +24,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 var EliceLayoutContext = React__default.default.createContext(undefined);
 var MainContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "efnp08i6"
-})("width:100%;height:100vh;max-width:1280px;display:flex;flex-direction:column;padding:", function (_ref) {
+})("width:100%;height:100vh;justify-content:center;align-items:center;display:flex;flex-direction:column;padding:", function (_ref) {
   var isMiniTablet = _ref.isMiniTablet;
   return isMiniTablet ? "0 20px" : "0 40px";
 }, ";box-sizing:border-box;position:relative;background-image:", function (_ref2) {
@@ -37,26 +37,26 @@ var MainContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
 var _HeaderContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "efnp08i5"
 })("production" === "production" ? {
-  name: "14ia2gs",
-  styles: "height:74px;width:100%;justify-content:space-between;flex-direction:row"
+  name: "gwvfyq",
+  styles: "height:74px;width:100%;max-width:1200px;justify-content:space-between;flex-direction:row"
 } : {
-  name: "14ia2gs",
-  styles: "height:74px;width:100%;justify-content:space-between;flex-direction:row",
+  name: "gwvfyq",
+  styles: "height:74px;width:100%;max-width:1200px;justify-content:space-between;flex-direction:row",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 var _FooterContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "efnp08i4"
 })("production" === "production" ? {
-  name: "1mz0nio",
-  styles: "height:92px;width:100%;padding:18px 0;align-items:center;justify-content:space-between;flex-direction:row"
+  name: "304f34",
+  styles: "height:92px;width:100%;max-width:1200px;padding:18px 0;align-items:center;justify-content:space-between;flex-direction:row"
 } : {
-  name: "1mz0nio",
-  styles: "height:92px;width:100%;padding:18px 0;align-items:center;justify-content:space-between;flex-direction:row",
+  name: "304f34",
+  styles: "height:92px;width:100%;max-width:1200px;padding:18px 0;align-items:center;justify-content:space-between;flex-direction:row",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 var SubtitleContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "efnp08i3"
-})("height:80px;width:100%;padding:20px 40px;display:flex;align-items:", function (_ref4) {
+})("height:80px;width:100%;max-width:1200px;padding:20px 40px;display:flex;align-items:", function (_ref4) {
   var alignment = _ref4.alignment;
   return alignment;
 }, ";justify-content:", function (_ref5) {
@@ -77,7 +77,7 @@ var SubtitleContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
 }, ";");
 var _ContentContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "efnp08i2"
-})("flex:1;width:100%;max-height:calc(100vh - 74px - 92px);max-width:1200px;overflow-y:auto;min-height:0;position:relative;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref10) {
+})("flex:1;width:100%;max-width:1200px;max-height:calc(100vh - 74px - 92px);max-width:1200px;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 (_ref11) {

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
@@ -133,7 +139,7 @@ var EliceRecorderStep = function EliceRecorderStep(_ref) {
             children: "\uC77C\uC2DC \uC815\uC9C0"
           })]
         }), jsxRuntime.jsxs(StyledRecorderButton, {
-          onClick: type == "needPause" || type === "allNeed" ? handleStop : handleOnlySubmit,
+          onClick: type == "needPause" || type === "allNeed" || type == "needWaiting" ? handleStop : handleOnlySubmit,
           step: currentStep,
           theme: theme,
           children: [jsxRuntime.jsx(Recording.default, {}), jsxRuntime.jsx(material.Typography, {

package/cjs/components/tooltip/Tooltip.js

@@ -51,22 +51,70 @@ var EliceTooltip = function EliceTooltip(_a) {
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
-  return isControl ? jsxRuntime.jsx(material.Tooltip, Object.assign({
-    arrow: true,
-    title: jsxRuntime.jsxs(material.Stack, {
-      direction: "row",
-      gap: "0.625rem",
-      children: [jsxRuntime.jsx(Close.default, {
-        style: {
-          opacity: 0.7,
-          flexShrink: 0,
-          cursor: 'pointer'
-        },
-        onClick: function onClick() {
-          return setOpen(false);
+  return isControl ? jsxRuntime.jsx(material.ClickAwayListener, {
+    onClickAway: function onClickAway() {
+      return setOpen(false);
+    },
+    children: jsxRuntime.jsx(material.Tooltip, Object.assign({
+      arrow: true,
+      title: jsxRuntime.jsxs(material.Stack, {
+        direction: "row",
+        gap: "0.625rem",
+        children: [jsxRuntime.jsx(Close.default, {
+          style: {
+            opacity: 0.7,
+            flexShrink: 0,
+            cursor: 'pointer'
+          },
+          onClick: function onClick() {
+            return setOpen(false);
+          }
+        }), jsxRuntime.jsx(StyledScrollBar, {
+          style: {
+            maxHeight: '15rem',
+            overflowY: 'auto'
+          },
+          children: jsxRuntime.jsx(material.Typography, {
+            variant: "subtitle2",
+            children: title
+          })
+        })]
+      }),
+      placement: placement,
+      open: open,
+      onOpen: function onOpen() {
+        if (triggerAction === 'default') {
+          setOpen(true);
+        }
+      },
+      onClick: function onClick() {
+        if (triggerAction === 'click') {
+          setOpen(true);
         }
-      }), jsxRuntime.jsx(StyledScrollBar, {
+      },
+      slotProps: slotProps,
+      style: {
+        cursor: triggerAction === 'click' ? 'pointer' : 'auto'
+      }
+    }, rest, {
+      children: jsxRuntime.jsx(material.Stack, {
+        position: "relative",
+        width: "fit-content",
+        height: "fit-content",
+        whiteSpace: "pre-wrap",
+        children: children
+      })
+    }))
+  }) : jsxRuntime.jsx(material.ClickAwayListener, {
+    onClickAway: function onClickAway() {
+      return setOpen(false);
+    },
+    children: jsxRuntime.jsx(material.Tooltip, Object.assign({
+      arrow: true,
+      title: jsxRuntime.jsx(StyledScrollBar, {
         style: {
+          fontWeight: 700,
+          fontSize: '1.375rem',
           maxHeight: '15rem',
           overflowY: 'auto'
         },
@@ -74,56 +122,18 @@ var EliceTooltip = function EliceTooltip(_a) {
           variant: "subtitle2",
           children: title
         })
-      })]
-    }),
-    placement: placement,
-    open: open,
-    onOpen: function onOpen() {
-      if (triggerAction === 'default') {
-        setOpen(true);
-      }
-    },
-    onClick: function onClick() {
-      if (triggerAction === 'click') {
-        setOpen(true);
-      }
-    },
-    slotProps: slotProps,
-    style: {
-      cursor: triggerAction === 'click' ? 'pointer' : 'auto'
-    }
-  }, rest, {
-    children: jsxRuntime.jsx(material.Stack, {
-      position: "relative",
-      width: "fit-content",
-      height: "fit-content",
-      whiteSpace: "pre-wrap",
-      children: children
-    })
-  })) : jsxRuntime.jsx(material.Tooltip, Object.assign({
-    arrow: true,
-    title: jsxRuntime.jsx(StyledScrollBar, {
-      style: {
-        fontWeight: 700,
-        fontSize: '1.375rem',
-        maxHeight: '15rem',
-        overflowY: 'auto'
-      },
-      children: jsxRuntime.jsx(material.Typography, {
-        variant: "subtitle2",
-        children: title
+      }),
+      placement: placement,
+      slotProps: slotProps
+    }, rest, {
+      children: jsxRuntime.jsx(material.Stack, {
+        position: "relative",
+        width: "fit-content",
+        height: "fit-content",
+        children: children
       })
-    }),
-    placement: placement,
-    slotProps: slotProps
-  }, rest, {
-    children: jsxRuntime.jsx(material.Stack, {
-      position: "relative",
-      width: "fit-content",
-      height: "fit-content",
-      children: children
-    })
-  }));
+    }))
+  });
 };
 
 exports.default = EliceTooltip;

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

@@ -15,7 +15,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 var EliceLayoutContext = React.createContext(undefined);
 var MainContainer = /*#__PURE__*/_styled(Stack, {
   target: "efnp08i6"
-})("width:100%;height:100vh;max-width:1280px;display:flex;flex-direction:column;padding:", function (_ref) {
+})("width:100%;height:100vh;justify-content:center;align-items:center;display:flex;flex-direction:column;padding:", function (_ref) {
   var isMiniTablet = _ref.isMiniTablet;
   return isMiniTablet ? "0 20px" : "0 40px";
 }, ";box-sizing:border-box;position:relative;background-image:", function (_ref2) {
@@ -28,26 +28,26 @@ var MainContainer = /*#__PURE__*/_styled(Stack, {
 var _HeaderContainer = /*#__PURE__*/_styled(Stack, {
   target: "efnp08i5"
 })("production" === "production" ? {
-  name: "14ia2gs",
-  styles: "height:74px;width:100%;justify-content:space-between;flex-direction:row"
+  name: "gwvfyq",
+  styles: "height:74px;width:100%;max-width:1200px;justify-content:space-between;flex-direction:row"
 } : {
-  name: "14ia2gs",
-  styles: "height:74px;width:100%;justify-content:space-between;flex-direction:row",
+  name: "gwvfyq",
+  styles: "height:74px;width:100%;max-width:1200px;justify-content:space-between;flex-direction:row",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 var _FooterContainer = /*#__PURE__*/_styled(Stack, {
   target: "efnp08i4"
 })("production" === "production" ? {
-  name: "1mz0nio",
-  styles: "height:92px;width:100%;padding:18px 0;align-items:center;justify-content:space-between;flex-direction:row"
+  name: "304f34",
+  styles: "height:92px;width:100%;max-width:1200px;padding:18px 0;align-items:center;justify-content:space-between;flex-direction:row"
 } : {
-  name: "1mz0nio",
-  styles: "height:92px;width:100%;padding:18px 0;align-items:center;justify-content:space-between;flex-direction:row",
+  name: "304f34",
+  styles: "height:92px;width:100%;max-width:1200px;padding:18px 0;align-items:center;justify-content:space-between;flex-direction:row",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 var SubtitleContainer = /*#__PURE__*/_styled(Stack, {
   target: "efnp08i3"
-})("height:80px;width:100%;padding:20px 40px;display:flex;align-items:", function (_ref4) {
+})("height:80px;width:100%;max-width:1200px;padding:20px 40px;display:flex;align-items:", function (_ref4) {
   var alignment = _ref4.alignment;
   return alignment;
 }, ";justify-content:", function (_ref5) {
@@ -68,7 +68,7 @@ var SubtitleContainer = /*#__PURE__*/_styled(Stack, {
 }, ";");
 var _ContentContainer = /*#__PURE__*/_styled(Stack, {
   target: "efnp08i2"
-})("flex:1;width:100%;max-height:calc(100vh - 74px - 92px);max-width:1200px;overflow-y:auto;min-height:0;position:relative;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref10) {
+})("flex:1;width:100%;max-width:1200px;max-height:calc(100vh - 74px - 92px);max-width:1200px;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 (_ref11) {

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
@@ -124,7 +130,7 @@ var EliceRecorderStep = function EliceRecorderStep(_ref) {
             children: "\uC77C\uC2DC \uC815\uC9C0"
           })]
         }), jsxs(StyledRecorderButton, {
-          onClick: type == "needPause" || type === "allNeed" ? handleStop : handleOnlySubmit,
+          onClick: type == "needPause" || type === "allNeed" || type == "needWaiting" ? handleStop : handleOnlySubmit,
           step: currentStep,
           theme: theme,
           children: [jsx(Recording, {}), jsx(Typography, {

package/es/components/tooltip/Tooltip.js

@@ -3,7 +3,7 @@ import _styled from '@emotion/styled/base';
 import { __rest } from 'tslib';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { useTheme, Tooltip, Stack, Typography } from '@mui/material';
+import { useTheme, ClickAwayListener, Tooltip, Stack, Typography } from '@mui/material';
 import { main300Color, main400Color } from '../tokenColorTemporary.js';
 import Close from '../../icons/Close.js';
 
@@ -43,22 +43,70 @@ var EliceTooltip = function EliceTooltip(_a) {
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
-  return isControl ? jsx(Tooltip, Object.assign({
-    arrow: true,
-    title: jsxs(Stack, {
-      direction: "row",
-      gap: "0.625rem",
-      children: [jsx(Close, {
-        style: {
-          opacity: 0.7,
-          flexShrink: 0,
-          cursor: 'pointer'
-        },
-        onClick: function onClick() {
-          return setOpen(false);
+  return isControl ? jsx(ClickAwayListener, {
+    onClickAway: function onClickAway() {
+      return setOpen(false);
+    },
+    children: jsx(Tooltip, Object.assign({
+      arrow: true,
+      title: jsxs(Stack, {
+        direction: "row",
+        gap: "0.625rem",
+        children: [jsx(Close, {
+          style: {
+            opacity: 0.7,
+            flexShrink: 0,
+            cursor: 'pointer'
+          },
+          onClick: function onClick() {
+            return setOpen(false);
+          }
+        }), jsx(StyledScrollBar, {
+          style: {
+            maxHeight: '15rem',
+            overflowY: 'auto'
+          },
+          children: jsx(Typography, {
+            variant: "subtitle2",
+            children: title
+          })
+        })]
+      }),
+      placement: placement,
+      open: open,
+      onOpen: function onOpen() {
+        if (triggerAction === 'default') {
+          setOpen(true);
+        }
+      },
+      onClick: function onClick() {
+        if (triggerAction === 'click') {
+          setOpen(true);
         }
-      }), jsx(StyledScrollBar, {
+      },
+      slotProps: slotProps,
+      style: {
+        cursor: triggerAction === 'click' ? 'pointer' : 'auto'
+      }
+    }, rest, {
+      children: jsx(Stack, {
+        position: "relative",
+        width: "fit-content",
+        height: "fit-content",
+        whiteSpace: "pre-wrap",
+        children: children
+      })
+    }))
+  }) : jsx(ClickAwayListener, {
+    onClickAway: function onClickAway() {
+      return setOpen(false);
+    },
+    children: jsx(Tooltip, Object.assign({
+      arrow: true,
+      title: jsx(StyledScrollBar, {
         style: {
+          fontWeight: 700,
+          fontSize: '1.375rem',
           maxHeight: '15rem',
           overflowY: 'auto'
         },
@@ -66,56 +114,18 @@ var EliceTooltip = function EliceTooltip(_a) {
           variant: "subtitle2",
           children: title
         })
-      })]
-    }),
-    placement: placement,
-    open: open,
-    onOpen: function onOpen() {
-      if (triggerAction === 'default') {
-        setOpen(true);
-      }
-    },
-    onClick: function onClick() {
-      if (triggerAction === 'click') {
-        setOpen(true);
-      }
-    },
-    slotProps: slotProps,
-    style: {
-      cursor: triggerAction === 'click' ? 'pointer' : 'auto'
-    }
-  }, rest, {
-    children: jsx(Stack, {
-      position: "relative",
-      width: "fit-content",
-      height: "fit-content",
-      whiteSpace: "pre-wrap",
-      children: children
-    })
-  })) : jsx(Tooltip, Object.assign({
-    arrow: true,
-    title: jsx(StyledScrollBar, {
-      style: {
-        fontWeight: 700,
-        fontSize: '1.375rem',
-        maxHeight: '15rem',
-        overflowY: 'auto'
-      },
-      children: jsx(Typography, {
-        variant: "subtitle2",
-        children: title
+      }),
+      placement: placement,
+      slotProps: slotProps
+    }, rest, {
+      children: jsx(Stack, {
+        position: "relative",
+        width: "fit-content",
+        height: "fit-content",
+        children: children
       })
-    }),
-    placement: placement,
-    slotProps: slotProps
-  }, rest, {
-    children: jsx(Stack, {
-      position: "relative",
-      width: "fit-content",
-      height: "fit-content",
-      children: children
-    })
-  }));
+    }))
+  });
 };
 
 export { EliceTooltip as default };

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.11",
+  "version": "1.0.12-rc.0",
   "description": "A set of UI components for creating content of Elice",
   "author": "Elice <contact@elice.io>",
   "license": "UNLICENSED",