@elicecontents/content-ui 1.0.22 → 1.0.23-rc.0

package/cjs/components/chat/Chat.js

@@ -69,7 +69,8 @@ var EliceChatContainer = function EliceChatContainer(_ref) {
   var scrollRef = React.useRef(null);
   var _useRecorder = RecorderContext.useRecorder(),
     recorderState = _useRecorder.state,
-    setIsRecording = _useRecorder.setIsRecording;
+    setIsRecording = _useRecorder.setIsRecording,
+    resetAnalyzer = _useRecorder.resetAnalyzer;
   React.useEffect(function () {
     if (scrollRef.current) {
       scrollRef.current.scrollIntoView({
@@ -77,10 +78,16 @@ var EliceChatContainer = function EliceChatContainer(_ref) {
       });
     }
   }, [messages, isLoadingMessage]);
+  React.useEffect(function () {
+    if (recorderState.step === "ready") {
+      resetAnalyzer();
+    }
+  }, [recorderState.step]);
   var onClickRecordSubmit = function onClickRecordSubmit() {
     onTransform === null || onTransform === void 0 ? void 0 : onTransform();
   };
   var onClickCloseIsRecording = function onClickCloseIsRecording() {
+    onTranscribingChange === null || onTranscribingChange === void 0 ? void 0 : onTranscribingChange(false);
     setIsRecording(false);
   };
   var handleSend = function handleSend() {
@@ -309,7 +316,7 @@ var StyledScrollBarStack = /*#__PURE__*/_styled__default.default(material.Stack,
 }, ";}");
 var StyledInput = /*#__PURE__*/_styled__default.default(material.Input, {
   target: "e1i7zt6"
-})("width:100%;height:100%;border:none!important;background-color:transparent;font-size:", function (_ref10) {
+})("width:100%;height:100%;background-color:transparent;font-size:", function (_ref10) {
   var isTablet = _ref10.isTablet;
   return isTablet ? '0.5rem' : '1.2rem';
 }, ";font-weight:", function (_ref11) {
@@ -321,7 +328,7 @@ var StyledInput = /*#__PURE__*/_styled__default.default(material.Input, {
 }, ";::placeholder{color:", function (_ref13) {
   var theme = _ref13.theme;
   return theme.palette.grey[300];
-}, ";}::before{border:none;}:hover{::before{border:none;}}::after{border-bottom:none!important;}::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref14) {
+}, ";}&:has(> textarea:disabled)::before{border:none;}::before{border:none;}:hover{::before{border:none;}}::after{border-bottom:none!important;}::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref14) {
   var theme = _ref14.theme;
   return theme.palette.grey[200];
 }, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref15) {

package/cjs/components/layout/Layout.js

@@ -62,28 +62,17 @@ var Stack = React__default.default.forwardRef(function Stack(_a, ref) {
     sx: stepSx
   }, props));
 });
-var fontSizeMap = {
-  h1: '1em',
-  subtitle1: '1.3em',
-  subtitle2: '1.2em',
-  subtitle3: '1em',
-  body1: '1em',
-  buttoninput: '1em',
-  pagination: '1.6em'
-};
 /**
  *  @summary Alpha of Design System. Wrapper of MUI Typography
  * */
 function Typography(_a) {
-  var _b;
   var step = _a.step,
     sx = _a.sx,
     props = tslib.__rest(_a, ["step", "sx"]);
-  var variantFontSize = props.variant && Object.hasOwn(fontSizeMap, props.variant) ? fontSizeMap[props.variant] : fontSizeMap['body1'];
   var stepSx = {
     '&:is([class*="Typography"])': Object.assign(Object.assign({}, sx !== null && sx !== void 0 ? sx : {}), {
       '--fluid-size': "var(--step-".concat(step !== null && step !== void 0 ? step : 0, ")"),
-      fontSize: (_b = sx === null || sx === void 0 ? void 0 : sx.fontSize) !== null && _b !== void 0 ? _b : variantFontSize
+      fontSize: sx === null || sx === void 0 ? void 0 : sx.fontSize
     })
   };
   return jsxRuntime.jsx(material.Typography, Object.assign({
@@ -133,11 +122,11 @@ var Layout = function Layout(_ref) {
 var HeaderContainerInner = /*#__PURE__*/_styled__default.default(Stack, {
   target: "efnp08i6"
 })("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 HeaderContainer = function HeaderContainer(_ref2) {
@@ -152,7 +141,7 @@ var HeaderTitle = LayoutHeaderTitle.default;
 var HeaderSubTitle = LayoutHeaderSubTitle.default;
 var ContentContainerInner = /*#__PURE__*/_styled__default.default(Stack, {
   target: "efnp08i5"
-})("flex:1;width:100%;max-height:calc(100vh - 74px - 92px);overflow-y:auto;min-height:0;position:relative;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref3) {
+})("flex:1;width:100%;max-width:1200px;max-height:calc(100vh - 74px - 92px);overflow-y:auto;min-height:0;position:relative;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref3) {
   var theme = _ref3.theme;
   return theme.palette.primary.main;
 }, ";border-radius:4px;}&::-webkit-scrollbar-track{background-color:", function (_ref4) {
@@ -222,22 +211,22 @@ var ContentContainer = function ContentContainer(_ref5) {
     };
   }, []);
   return jsxRuntime.jsxs(Stack, {
-    sx: {
+    sx: Object.assign({
       position: 'relative',
       width: '100%',
       height: '100%'
-    },
+    }, sx),
     children: [jsxRuntime.jsxs(ContentContainerInner, {
       ref: contentRef,
       theme: theme,
       flex: 1,
-      sx: Object.assign(Object.assign({}, sx), {
+      sx: {
         scrollbarWidth: 'none',
         msOverflowStyle: 'none',
         '&::-webkit-scrollbar': {
           display: 'none'
         }
-      }),
+      },
       children: [children, enableScrollTracking && hasScroll && !isScrollActive && jsxRuntime.jsx(ScrollMoreButton, {
         children: jsxRuntime.jsx(ScrollMoreIcon.default, {
           size: 32,

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

@@ -18,6 +18,7 @@ type RecorderContextType = {
     resumeRecording: () => void;
     setIsRecording: (isRecording: boolean) => void;
     setStep: (step: AudioStep) => void;
+    resetAnalyzer: () => void;
 };
 type RecorderAction = {
     type: 'SET_STEP';
@@ -34,6 +35,8 @@ type RecorderAction = {
 } | {
     type: 'SET_URL';
     payload: string;
+} | {
+    type: 'RESET_ANALYZER';
 };
 export declare const RecorderProvider: ({ children, }: {
     children: React.ReactNode;

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

@@ -14,6 +14,10 @@ var initialState = {
 };
 var recorderReducer = function recorderReducer(state, action) {
   switch (action.type) {
+    case 'RESET_ANALYZER':
+      return Object.assign(Object.assign({}, state), {
+        analyser: null
+      });
     case 'SET_STEP':
       return Object.assign(Object.assign({}, state), {
         step: action.payload
@@ -93,6 +97,7 @@ var RecorderProvider = function RecorderProvider(_ref) {
             // AudioContext 연결
             audioContextRef.current = new AudioContext();
             analyserRef.current = audioContextRef.current.createAnalyser();
+            console.log('analyserRef', analyserRef.current);
             sourceRef.current = audioContextRef.current.createMediaStreamSource(stream);
             sourceRef.current.connect(analyserRef.current);
             analyserRef.current.fftSize = 256;
@@ -107,17 +112,17 @@ var RecorderProvider = function RecorderProvider(_ref) {
               });
             });
             recorder.start();
-            _context.next = 23;
+            _context.next = 24;
             break;
-          case 20:
-            _context.prev = 20;
+          case 21:
+            _context.prev = 21;
             _context.t0 = _context["catch"](0);
             console.error('🎤 마이크 권한 오류:', _context.t0);
-          case 23:
+          case 24:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[0, 20]]);
+      }, _callee, null, [[0, 21]]);
     }));
     return function startRecording(_x) {
       return _ref2.apply(this, arguments);
@@ -178,6 +183,11 @@ var RecorderProvider = function RecorderProvider(_ref) {
       payload: step
     });
   };
+  var resetAnalyzer = function resetAnalyzer() {
+    dispatch({
+      type: 'RESET_ANALYZER'
+    });
+  };
   return jsxRuntime.jsx(RecorderContext.Provider, {
     value: {
       state: state,
@@ -187,7 +197,8 @@ var RecorderProvider = function RecorderProvider(_ref) {
       pauseRecording: pauseRecording,
       resumeRecording: resumeRecording,
       setIsRecording: setIsRecording,
-      setStep: setStep
+      setStep: setStep,
+      resetAnalyzer: resetAnalyzer
     },
     children: children
   });

package/cjs/typography/TypographyType.d.ts

@@ -162,9 +162,6 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:1200px)": {
-                fontSize: string;
-            };
             "@media (max-width:768px)": {
                 fontSize: string;
             };
@@ -173,9 +170,6 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:1200px)": {
-                fontSize: string;
-            };
             "@media (max-width:768px)": {
                 fontSize: string;
             };
@@ -184,9 +178,6 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:1200px)": {
-                fontSize: string;
-            };
             "@media (max-width:768px)": {
                 fontSize: string;
             };
@@ -195,9 +186,6 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:1200px)": {
-                fontSize: string;
-            };
             "@media (max-width:768px)": {
                 fontSize: string;
             };
@@ -206,9 +194,6 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:1200px)": {
-                fontSize: string;
-            };
             "@media (max-width:768px)": {
                 fontSize: string;
             };
@@ -217,9 +202,6 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:1200px)": {
-                fontSize: string;
-            };
             "@media (max-width:768px)": {
                 fontSize: string;
             };
@@ -228,9 +210,6 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:1200px)": {
-                fontSize: string;
-            };
             "@media (max-width:768px)": {
                 fontSize: string;
             };

package/cjs/typography/TypographyType.js

@@ -68,68 +68,54 @@ var DEFAULT_TYPOGRAPHY_STYLES = {
   })
 };
 var TYPEG_TYPOGRAPHY_STYLES = {
-  h1: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
-    fontSize: '28px',
+  h1: _rollupPluginBabelHelpers.defineProperty({
+    fontSize: 'calc(var(--fluid-size) * 1.4)',
     fontWeight: 700,
     lineHeight: '140%'
-  }, "@media (max-width:1200px)", {
-    fontSize: '20px'
-  }), "@media (max-width:768px)", {
-    fontSize: '24px'
+  }, "@media (max-width:768px)", {
+    fontSize: 'calc(var(--fluid-size) * 1.2)'
   }),
-  h2: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
-    fontSize: '24px',
+  h2: _rollupPluginBabelHelpers.defineProperty({
+    fontSize: 'calc(var(--fluid-size) * 1.2)',
     fontWeight: 700,
     lineHeight: '140%'
-  }, "@media (max-width:1200px)", {
-    fontSize: '24px'
-  }), "@media (max-width:768px)", {
-    fontSize: '20px'
+  }, "@media (max-width:768px)", {
+    fontSize: 'calc(var(--fluid-size) * 1)'
   }),
-  subtitle1: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
-    fontSize: '26px',
+  subtitle1: _rollupPluginBabelHelpers.defineProperty({
+    fontSize: 'calc(var(--fluid-size) * 1.3)',
     fontWeight: 700,
     lineHeight: '140%'
-  }, "@media (max-width:1200px)", {
-    fontSize: '26px'
-  }), "@media (max-width:768px)", {
-    fontSize: '22px'
+  }, "@media (max-width:768px)", {
+    fontSize: 'calc(var(--fluid-size) * 1.1)'
   }),
-  subtitle2: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
-    fontSize: '24px',
+  subtitle2: _rollupPluginBabelHelpers.defineProperty({
+    fontSize: 'calc(var(--fluid-size) * 1.1)',
     fontWeight: 500,
     lineHeight: '160%'
-  }, "@media (max-width:1200px)", {
-    fontSize: '24px'
-  }), "@media (max-width:768px)", {
-    fontSize: '20px'
+  }, "@media (max-width:768px)", {
+    fontSize: 'calc(var(--fluid-size) * 1)'
   }),
-  subtitle3: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
-    fontSize: '22px',
+  subtitle3: _rollupPluginBabelHelpers.defineProperty({
+    fontSize: 'calc(var(--fluid-size) * 1.1)',
     fontWeight: 500,
     lineHeight: '160%'
-  }, "@media (max-width:1200px)", {
-    fontSize: '20px'
-  }), "@media (max-width:768px)", {
-    fontSize: '18px'
+  }, "@media (max-width:768px)", {
+    fontSize: 'calc(var(--fluid-size) * 0.9)'
   }),
-  buttoninput: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
-    fontSize: '20px',
+  buttoninput: _rollupPluginBabelHelpers.defineProperty({
+    fontSize: 'calc(var(--fluid-size) * 1)',
     fontWeight: 700,
     lineHeight: '160%'
-  }, "@media (max-width:1200px)", {
-    fontSize: '20px'
-  }), "@media (max-width:768px)", {
-    fontSize: '16px'
+  }, "@media (max-width:768px)", {
+    fontSize: 'calc(var(--fluid-size) * 0.8)'
   }),
-  pagination: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
-    fontSize: '32px',
+  pagination: _rollupPluginBabelHelpers.defineProperty({
+    fontSize: 'calc(var(--fluid-size) * 1.6)',
     fontWeight: 900,
     lineHeight: '140%'
-  }, "@media (max-width:1200px)", {
-    fontSize: '32px'
-  }), "@media (max-width:768px)", {
-    fontSize: '24px'
+  }, "@media (max-width:768px)", {
+    fontSize: 'calc(var(--fluid-size) * 1.2)'
   })
 };
 var FLUID_TYPOGRAPHY_STYLES = {

package/cjs/typography/typography.d.ts

@@ -91,9 +91,6 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         fontSize: string;
         fontWeight: number;
         lineHeight: string;
-        "@media (max-width:1200px)": {
-            fontSize: string;
-        };
         "@media (max-width:768px)": {
             fontSize: string;
         };
@@ -102,9 +99,6 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         fontSize: string;
         fontWeight: number;
         lineHeight: string;
-        "@media (max-width:1200px)": {
-            fontSize: string;
-        };
         "@media (max-width:768px)": {
             fontSize: string;
         };
@@ -113,9 +107,6 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         fontSize: string;
         fontWeight: number;
         lineHeight: string;
-        "@media (max-width:1200px)": {
-            fontSize: string;
-        };
         "@media (max-width:768px)": {
             fontSize: string;
         };
@@ -124,9 +115,6 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         fontSize: string;
         fontWeight: number;
         lineHeight: string;
-        "@media (max-width:1200px)": {
-            fontSize: string;
-        };
         "@media (max-width:768px)": {
             fontSize: string;
         };
@@ -135,9 +123,6 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         fontSize: string;
         fontWeight: number;
         lineHeight: string;
-        "@media (max-width:1200px)": {
-            fontSize: string;
-        };
         "@media (max-width:768px)": {
             fontSize: string;
         };
@@ -146,9 +131,6 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         fontSize: string;
         fontWeight: number;
         lineHeight: string;
-        "@media (max-width:1200px)": {
-            fontSize: string;
-        };
         "@media (max-width:768px)": {
             fontSize: string;
         };
@@ -157,9 +139,6 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         fontSize: string;
         fontWeight: number;
         lineHeight: string;
-        "@media (max-width:1200px)": {
-            fontSize: string;
-        };
         "@media (max-width:768px)": {
             fontSize: string;
         };

package/es/components/chat/Chat.js

@@ -60,7 +60,8 @@ var EliceChatContainer = function EliceChatContainer(_ref) {
   var scrollRef = useRef(null);
   var _useRecorder = useRecorder(),
     recorderState = _useRecorder.state,
-    setIsRecording = _useRecorder.setIsRecording;
+    setIsRecording = _useRecorder.setIsRecording,
+    resetAnalyzer = _useRecorder.resetAnalyzer;
   useEffect(function () {
     if (scrollRef.current) {
       scrollRef.current.scrollIntoView({
@@ -68,10 +69,16 @@ var EliceChatContainer = function EliceChatContainer(_ref) {
       });
     }
   }, [messages, isLoadingMessage]);
+  useEffect(function () {
+    if (recorderState.step === "ready") {
+      resetAnalyzer();
+    }
+  }, [recorderState.step]);
   var onClickRecordSubmit = function onClickRecordSubmit() {
     onTransform === null || onTransform === void 0 ? void 0 : onTransform();
   };
   var onClickCloseIsRecording = function onClickCloseIsRecording() {
+    onTranscribingChange === null || onTranscribingChange === void 0 ? void 0 : onTranscribingChange(false);
     setIsRecording(false);
   };
   var handleSend = function handleSend() {
@@ -300,7 +307,7 @@ var StyledScrollBarStack = /*#__PURE__*/_styled(Stack, {
 }, ";}");
 var StyledInput = /*#__PURE__*/_styled(Input, {
   target: "e1i7zt6"
-})("width:100%;height:100%;border:none!important;background-color:transparent;font-size:", function (_ref10) {
+})("width:100%;height:100%;background-color:transparent;font-size:", function (_ref10) {
   var isTablet = _ref10.isTablet;
   return isTablet ? '0.5rem' : '1.2rem';
 }, ";font-weight:", function (_ref11) {
@@ -312,7 +319,7 @@ var StyledInput = /*#__PURE__*/_styled(Input, {
 }, ";::placeholder{color:", function (_ref13) {
   var theme = _ref13.theme;
   return theme.palette.grey[300];
-}, ";}::before{border:none;}:hover{::before{border:none;}}::after{border-bottom:none!important;}::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref14) {
+}, ";}&:has(> textarea:disabled)::before{border:none;}::before{border:none;}:hover{::before{border:none;}}::after{border-bottom:none!important;}::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref14) {
   var theme = _ref14.theme;
   return theme.palette.grey[200];
 }, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref15) {

package/es/components/layout/Layout.js

@@ -55,28 +55,17 @@ var Stack = React.forwardRef(function Stack(_a, ref) {
     sx: stepSx
   }, props));
 });
-var fontSizeMap = {
-  h1: '1em',
-  subtitle1: '1.3em',
-  subtitle2: '1.2em',
-  subtitle3: '1em',
-  body1: '1em',
-  buttoninput: '1em',
-  pagination: '1.6em'
-};
 /**
  *  @summary Alpha of Design System. Wrapper of MUI Typography
  * */
 function Typography(_a) {
-  var _b;
   var step = _a.step,
     sx = _a.sx,
     props = __rest(_a, ["step", "sx"]);
-  var variantFontSize = props.variant && Object.hasOwn(fontSizeMap, props.variant) ? fontSizeMap[props.variant] : fontSizeMap['body1'];
   var stepSx = {
     '&:is([class*="Typography"])': Object.assign(Object.assign({}, sx !== null && sx !== void 0 ? sx : {}), {
       '--fluid-size': "var(--step-".concat(step !== null && step !== void 0 ? step : 0, ")"),
-      fontSize: (_b = sx === null || sx === void 0 ? void 0 : sx.fontSize) !== null && _b !== void 0 ? _b : variantFontSize
+      fontSize: sx === null || sx === void 0 ? void 0 : sx.fontSize
     })
   };
   return jsx(Typography$1, Object.assign({
@@ -126,11 +115,11 @@ var Layout = function Layout(_ref) {
 var HeaderContainerInner = /*#__PURE__*/_styled(Stack, {
   target: "efnp08i6"
 })("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 HeaderContainer = function HeaderContainer(_ref2) {
@@ -145,7 +134,7 @@ var HeaderTitle = LayoutHeaderTitle;
 var HeaderSubTitle = LayoutHeaderSubTitle;
 var ContentContainerInner = /*#__PURE__*/_styled(Stack, {
   target: "efnp08i5"
-})("flex:1;width:100%;max-height:calc(100vh - 74px - 92px);overflow-y:auto;min-height:0;position:relative;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref3) {
+})("flex:1;width:100%;max-width:1200px;max-height:calc(100vh - 74px - 92px);overflow-y:auto;min-height:0;position:relative;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref3) {
   var theme = _ref3.theme;
   return theme.palette.primary.main;
 }, ";border-radius:4px;}&::-webkit-scrollbar-track{background-color:", function (_ref4) {
@@ -215,22 +204,22 @@ var ContentContainer = function ContentContainer(_ref5) {
     };
   }, []);
   return jsxs(Stack, {
-    sx: {
+    sx: Object.assign({
       position: 'relative',
       width: '100%',
       height: '100%'
-    },
+    }, sx),
     children: [jsxs(ContentContainerInner, {
       ref: contentRef,
       theme: theme,
       flex: 1,
-      sx: Object.assign(Object.assign({}, sx), {
+      sx: {
         scrollbarWidth: 'none',
         msOverflowStyle: 'none',
         '&::-webkit-scrollbar': {
           display: 'none'
         }
-      }),
+      },
       children: [children, enableScrollTracking && hasScroll && !isScrollActive && jsx(ScrollMoreButton, {
         children: jsx(ScrollMoreIcon, {
           size: 32,

package/es/components/recorder-step/RecorderContext.d.ts

@@ -18,6 +18,7 @@ type RecorderContextType = {
     resumeRecording: () => void;
     setIsRecording: (isRecording: boolean) => void;
     setStep: (step: AudioStep) => void;
+    resetAnalyzer: () => void;
 };
 type RecorderAction = {
     type: 'SET_STEP';
@@ -34,6 +35,8 @@ type RecorderAction = {
 } | {
     type: 'SET_URL';
     payload: string;
+} | {
+    type: 'RESET_ANALYZER';
 };
 export declare const RecorderProvider: ({ children, }: {
     children: React.ReactNode;

package/es/components/recorder-step/RecorderContext.js

@@ -12,6 +12,10 @@ var initialState = {
 };
 var recorderReducer = function recorderReducer(state, action) {
   switch (action.type) {
+    case 'RESET_ANALYZER':
+      return Object.assign(Object.assign({}, state), {
+        analyser: null
+      });
     case 'SET_STEP':
       return Object.assign(Object.assign({}, state), {
         step: action.payload
@@ -91,6 +95,7 @@ var RecorderProvider = function RecorderProvider(_ref) {
             // AudioContext 연결
             audioContextRef.current = new AudioContext();
             analyserRef.current = audioContextRef.current.createAnalyser();
+            console.log('analyserRef', analyserRef.current);
             sourceRef.current = audioContextRef.current.createMediaStreamSource(stream);
             sourceRef.current.connect(analyserRef.current);
             analyserRef.current.fftSize = 256;
@@ -105,17 +110,17 @@ var RecorderProvider = function RecorderProvider(_ref) {
               });
             });
             recorder.start();
-            _context.next = 23;
+            _context.next = 24;
             break;
-          case 20:
-            _context.prev = 20;
+          case 21:
+            _context.prev = 21;
             _context.t0 = _context["catch"](0);
             console.error('🎤 마이크 권한 오류:', _context.t0);
-          case 23:
+          case 24:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[0, 20]]);
+      }, _callee, null, [[0, 21]]);
     }));
     return function startRecording(_x) {
       return _ref2.apply(this, arguments);
@@ -176,6 +181,11 @@ var RecorderProvider = function RecorderProvider(_ref) {
       payload: step
     });
   };
+  var resetAnalyzer = function resetAnalyzer() {
+    dispatch({
+      type: 'RESET_ANALYZER'
+    });
+  };
   return jsx(RecorderContext.Provider, {
     value: {
       state: state,
@@ -185,7 +195,8 @@ var RecorderProvider = function RecorderProvider(_ref) {
       pauseRecording: pauseRecording,
       resumeRecording: resumeRecording,
       setIsRecording: setIsRecording,
-      setStep: setStep
+      setStep: setStep,
+      resetAnalyzer: resetAnalyzer
     },
     children: children
   });

package/es/typography/TypographyType.d.ts

@@ -162,9 +162,6 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:1200px)": {
-                fontSize: string;
-            };
             "@media (max-width:768px)": {
                 fontSize: string;
             };
@@ -173,9 +170,6 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:1200px)": {
-                fontSize: string;
-            };
             "@media (max-width:768px)": {
                 fontSize: string;
             };
@@ -184,9 +178,6 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:1200px)": {
-                fontSize: string;
-            };
             "@media (max-width:768px)": {
                 fontSize: string;
             };
@@ -195,9 +186,6 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:1200px)": {
-                fontSize: string;
-            };
             "@media (max-width:768px)": {
                 fontSize: string;
             };
@@ -206,9 +194,6 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:1200px)": {
-                fontSize: string;
-            };
             "@media (max-width:768px)": {
                 fontSize: string;
             };
@@ -217,9 +202,6 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:1200px)": {
-                fontSize: string;
-            };
             "@media (max-width:768px)": {
                 fontSize: string;
             };
@@ -228,9 +210,6 @@ export declare const TYPOGRAPHY_STYLES_MAP: {
             fontSize: string;
             fontWeight: number;
             lineHeight: string;
-            "@media (max-width:1200px)": {
-                fontSize: string;
-            };
             "@media (max-width:768px)": {
                 fontSize: string;
             };

package/es/typography/TypographyType.js

@@ -66,68 +66,54 @@ var DEFAULT_TYPOGRAPHY_STYLES = {
   })
 };
 var TYPEG_TYPOGRAPHY_STYLES = {
-  h1: _defineProperty(_defineProperty({
-    fontSize: '28px',
+  h1: _defineProperty({
+    fontSize: 'calc(var(--fluid-size) * 1.4)',
     fontWeight: 700,
     lineHeight: '140%'
-  }, "@media (max-width:1200px)", {
-    fontSize: '20px'
-  }), "@media (max-width:768px)", {
-    fontSize: '24px'
+  }, "@media (max-width:768px)", {
+    fontSize: 'calc(var(--fluid-size) * 1.2)'
   }),
-  h2: _defineProperty(_defineProperty({
-    fontSize: '24px',
+  h2: _defineProperty({
+    fontSize: 'calc(var(--fluid-size) * 1.2)',
     fontWeight: 700,
     lineHeight: '140%'
-  }, "@media (max-width:1200px)", {
-    fontSize: '24px'
-  }), "@media (max-width:768px)", {
-    fontSize: '20px'
+  }, "@media (max-width:768px)", {
+    fontSize: 'calc(var(--fluid-size) * 1)'
   }),
-  subtitle1: _defineProperty(_defineProperty({
-    fontSize: '26px',
+  subtitle1: _defineProperty({
+    fontSize: 'calc(var(--fluid-size) * 1.3)',
     fontWeight: 700,
     lineHeight: '140%'
-  }, "@media (max-width:1200px)", {
-    fontSize: '26px'
-  }), "@media (max-width:768px)", {
-    fontSize: '22px'
+  }, "@media (max-width:768px)", {
+    fontSize: 'calc(var(--fluid-size) * 1.1)'
   }),
-  subtitle2: _defineProperty(_defineProperty({
-    fontSize: '24px',
+  subtitle2: _defineProperty({
+    fontSize: 'calc(var(--fluid-size) * 1.1)',
     fontWeight: 500,
     lineHeight: '160%'
-  }, "@media (max-width:1200px)", {
-    fontSize: '24px'
-  }), "@media (max-width:768px)", {
-    fontSize: '20px'
+  }, "@media (max-width:768px)", {
+    fontSize: 'calc(var(--fluid-size) * 1)'
   }),
-  subtitle3: _defineProperty(_defineProperty({
-    fontSize: '22px',
+  subtitle3: _defineProperty({
+    fontSize: 'calc(var(--fluid-size) * 1.1)',
     fontWeight: 500,
     lineHeight: '160%'
-  }, "@media (max-width:1200px)", {
-    fontSize: '20px'
-  }), "@media (max-width:768px)", {
-    fontSize: '18px'
+  }, "@media (max-width:768px)", {
+    fontSize: 'calc(var(--fluid-size) * 0.9)'
   }),
-  buttoninput: _defineProperty(_defineProperty({
-    fontSize: '20px',
+  buttoninput: _defineProperty({
+    fontSize: 'calc(var(--fluid-size) * 1)',
     fontWeight: 700,
     lineHeight: '160%'
-  }, "@media (max-width:1200px)", {
-    fontSize: '20px'
-  }), "@media (max-width:768px)", {
-    fontSize: '16px'
+  }, "@media (max-width:768px)", {
+    fontSize: 'calc(var(--fluid-size) * 0.8)'
   }),
-  pagination: _defineProperty(_defineProperty({
-    fontSize: '32px',
+  pagination: _defineProperty({
+    fontSize: 'calc(var(--fluid-size) * 1.6)',
     fontWeight: 900,
     lineHeight: '140%'
-  }, "@media (max-width:1200px)", {
-    fontSize: '32px'
-  }), "@media (max-width:768px)", {
-    fontSize: '24px'
+  }, "@media (max-width:768px)", {
+    fontSize: 'calc(var(--fluid-size) * 1.2)'
   })
 };
 var FLUID_TYPOGRAPHY_STYLES = {

package/es/typography/typography.d.ts

@@ -91,9 +91,6 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         fontSize: string;
         fontWeight: number;
         lineHeight: string;
-        "@media (max-width:1200px)": {
-            fontSize: string;
-        };
         "@media (max-width:768px)": {
             fontSize: string;
         };
@@ -102,9 +99,6 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         fontSize: string;
         fontWeight: number;
         lineHeight: string;
-        "@media (max-width:1200px)": {
-            fontSize: string;
-        };
         "@media (max-width:768px)": {
             fontSize: string;
         };
@@ -113,9 +107,6 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         fontSize: string;
         fontWeight: number;
         lineHeight: string;
-        "@media (max-width:1200px)": {
-            fontSize: string;
-        };
         "@media (max-width:768px)": {
             fontSize: string;
         };
@@ -124,9 +115,6 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         fontSize: string;
         fontWeight: number;
         lineHeight: string;
-        "@media (max-width:1200px)": {
-            fontSize: string;
-        };
         "@media (max-width:768px)": {
             fontSize: string;
         };
@@ -135,9 +123,6 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         fontSize: string;
         fontWeight: number;
         lineHeight: string;
-        "@media (max-width:1200px)": {
-            fontSize: string;
-        };
         "@media (max-width:768px)": {
             fontSize: string;
         };
@@ -146,9 +131,6 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         fontSize: string;
         fontWeight: number;
         lineHeight: string;
-        "@media (max-width:1200px)": {
-            fontSize: string;
-        };
         "@media (max-width:768px)": {
             fontSize: string;
         };
@@ -157,9 +139,6 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
         fontSize: string;
         fontWeight: number;
         lineHeight: string;
-        "@media (max-width:1200px)": {
-            fontSize: string;
-        };
         "@media (max-width:768px)": {
             fontSize: string;
         };

package/package.json

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