@elicecontents/content-ui 1.1.2 → 1.1.3-rc.1

package/dist/types/components/layout/index.d.ts

@@ -1,39 +1,33 @@
-import { EliceLayoutProps } from './Layout';
-import { SxProps } from '@mui/system';
-import { Theme } from '@mui/material';
-import { LayoutHeaderTitleProps, LayoutHeaderSubTitleProps } from './Header';
-import { FC } from 'react';
-import { LayoutFooterPagingProps, LayoutFooterSubmitProps } from './Footer';
 export { Layout, HeaderContainer, HeaderSubTitle, ContentContainer, Content, FooterContainer, FooterPaging, FooterSubmit, Box, Stack, Typography, } from './Layout';
-export declare const EliceLayout: (({ children, onPrev, onNext, allowPrev, allowNext, backgroundImage, backgroundColor, onlyPage, enableScrollTracking, sx }: EliceLayoutProps) => import("react/jsx-runtime").JSX.Element) & {
+export declare const EliceLayout: (({ children, onPrev, onNext, allowPrev, allowNext, backgroundImage, backgroundColor, onlyPage, enableScrollTracking, sx }: import("./Layout").EliceLayoutProps) => import("react/jsx-runtime").JSX.Element) & {
     HeaderContainer: ({ children, sx }: {
         children: React.ReactNode;
-        sx?: SxProps<Theme>;
+        sx?: import("@mui/system").SxProps<import("@mui/material").Theme>;
     }) => import("react/jsx-runtime").JSX.Element;
-    HeaderTitle: ({ children, titleComponent, sx }: LayoutHeaderTitleProps) => JSX.Element;
-    HeaderSubTitle: ({ children, sx }: LayoutHeaderSubTitleProps) => JSX.Element;
+    HeaderTitle: ({ children, titleComponent, sx }: import("./Header").LayoutHeaderTitleProps) => JSX.Element;
+    HeaderSubTitle: ({ children, sx }: import("./Header").LayoutHeaderSubTitleProps) => JSX.Element;
     Subtitle: ({ children, alignment, justifyContent, sx }: {
         children: React.ReactNode;
         alignment?: "center" | "right" | "left";
         justifyContent?: string;
-        sx?: SxProps<Theme>;
+        sx?: import("@mui/system").SxProps<import("@mui/material").Theme>;
     }) => import("react/jsx-runtime").JSX.Element;
     ContentContainer: ({ children, sx, scrollbarPostion }: {
         children: React.ReactNode;
-        sx?: SxProps<Theme>;
+        sx?: import("@mui/system").SxProps<import("@mui/material").Theme>;
         scrollbarPostion?: number;
     }) => import("react/jsx-runtime").JSX.Element;
     Content: ({ children, alignment, justifyContent, sx, }: {
         children: React.ReactNode;
         alignment?: "center" | "right" | "left";
         justifyContent?: string;
-        sx?: SxProps<Theme>;
+        sx?: import("@mui/system").SxProps<import("@mui/material").Theme>;
     }) => import("react/jsx-runtime").JSX.Element;
     FooterContainer: ({ children, sx }: {
         children: React.ReactNode;
-        sx?: SxProps<Theme>;
+        sx?: import("@mui/system").SxProps<import("@mui/material").Theme>;
     }) => import("react/jsx-runtime").JSX.Element;
-    FooterPaging: FC<LayoutFooterPagingProps>;
-    FooterSubmit: ({ isRollback, isSubmit, disableRollback, disableSubmit, submitText, rollbackText, onSubmit, onRollback, submitButtonColor, rollbackButtonColor, submitTextColor, rollbackTextColor, }: LayoutFooterSubmitProps) => import("react/jsx-runtime").JSX.Element;
+    FooterPaging: import("react").FC<import("./Footer").LayoutFooterPagingProps>;
+    FooterSubmit: ({ isRollback, isSubmit, disableRollback, disableSubmit, submitText, rollbackText, onSubmit, buttonSize, onRollback, submitButtonColor, rollbackButtonColor, submitTextColor, rollbackTextColor, }: import("./Footer").LayoutFooterSubmitProps) => import("react/jsx-runtime").JSX.Element;
 };
 export type { EliceLayoutProps } from './Layout';

package/dist/types/components/pagination-button/PaginationButton.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from "react";
 interface PaginationButtonProps {
     left?: boolean;
     right?: boolean;

package/dist/types/components/recorder/Recorder.d.ts

@@ -1,6 +1,6 @@
-import { SoundVisualizerVariant } from '../..';
-import { SxProps } from '@mui/material';
-import { AudioStep } from './recorderStore';
+import type { SoundVisualizerVariant } from '@elicecontents/content-ui';
+import type { SxProps } from '@mui/material';
+import type { AudioStep } from './recorderStore';
 export type RecorderStep = 'ready' | 'recording' | 'pause' | 'waiting';
 export type RecorderType = 'pause' | 'waiting' | 'unsubmit' | null;
 export interface EliceRecorderStepProps {

package/dist/types/components/recorder-chat/RecorderChat.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from "react";
 export type EliceMessageItem = {
     role: "system" | "user" | "assistant";
     content: string;

package/dist/types/components/recorder-chat/TypingIndicator.d.ts

@@ -1,3 +1,3 @@
-import { default as React } from 'react';
+import React from 'react';
 declare const TypingIndicator: React.FC;
 export default TypingIndicator;

package/dist/types/components/recorder-step/RecorderContext.d.ts

@@ -1,4 +1,5 @@
-import { default as React, Dispatch } from 'react';
+import React from 'react';
+import type { Dispatch } from 'react';
 export type AudioStep = 'ready' | 'recording' | 'pause' | 'waiting' | '';
 export type StepFlowType = 'basic' | 'pauseable' | 'oneClick' | 'recordOnly' | 'instantRecord';
 interface RecorderState {

package/dist/types/components/recorder-step/RecorderStep.d.ts

@@ -1,6 +1,6 @@
-import { AudioStep } from './RecorderContext';
-import { SoundVisualizerVariant } from '../..';
-import { SxProps } from '@mui/material';
+import { type AudioStep } from './RecorderContext';
+import type { SoundVisualizerVariant } from '@elicecontents/content-ui';
+import type { SxProps } from '@mui/material';
 export type RecorderStep = 'ready' | 'recording' | 'pause' | 'waiting';
 export type RecorderType = 'needPause' | 'needWaiting' | 'allNeed' | 'notNeed';
 export interface EliceRecorderStepProps {

package/dist/types/components/selection/Selection.d.ts

@@ -1,5 +1,5 @@
-import { ToggleButtonGroupProps } from '@mui/material';
-import { Dispatch, ReactNode, SetStateAction } from 'react';
+import type { ToggleButtonGroupProps } from '@mui/material';
+import type { Dispatch, ReactNode, SetStateAction } from 'react';
 export interface EliceSelectionProps extends ToggleButtonGroupProps {
     type: 'checkbox' | 'radio';
     options: {

package/dist/types/components/sound-visualizer/SoundVisualizer.d.ts

@@ -1,4 +1,4 @@
-import { SxProps } from '@mui/material';
+import type { SxProps } from '@mui/material';
 export type SoundVisualizerVariant = 'both' | 'bar' | 'circle';
 export interface SoundVisualizerProps {
     analyser: AnalyserNode | null;

package/dist/types/components/subtitle-button/SubtitleButton.d.ts

@@ -1,5 +1,5 @@
-import { default as React } from 'react';
-import { ButtonProps } from '@mui/material';
+import React from 'react';
+import { type ButtonProps } from '@mui/material';
 export interface EliceSubButtonProps extends ButtonProps {
     children?: React.ReactNode;
 }

package/dist/types/components/table/ColInfoTable.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 export interface ColInfoTableProps {
     data: Array<{
         id: string;

package/dist/types/components/table/RowInfoTable.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 export interface RowInfoTableProps {
     data: Array<{
         id: string;

package/dist/types/components/table/Table.d.ts

@@ -1,4 +1,4 @@
-import { DottedPaginationProps } from '../dotted-pagination/DottedPagination';
+import type { DottedPaginationProps } from '../dotted-pagination/DottedPagination';
 export type EiceTableProps = {
     type?: 'default' | 'single';
     rows: object[];

package/dist/types/components/textarea/Textarea.d.ts

@@ -1,7 +1,13 @@
 import { TextFieldProps } from '@mui/material';
-interface EliceTextareaProps extends Omit<TextFieldProps, 'variant'> {
-    variant?: 'default' | 'textarea';
+interface EliceTextareaProps extends Omit<TextFieldProps, 'type'> {
     maxLength?: number;
+    hideBorder?: boolean;
+    type: 'default' | 'textarea';
+    isCompleted?: boolean;
+    borderColor?: string;
+    hoverBorderColor?: string;
+    focusedBorderColor?: string;
+    disabledBackgroundColor?: string;
 }
-declare const EliceTextarea: ({ variant, rows, placeholder, multiline, maxLength, value, onChange, disabled, ...rest }: EliceTextareaProps) => import("react/jsx-runtime").JSX.Element;
+declare const EliceTextarea: ({ type, variant, rows, placeholder, multiline, maxLength, value, onChange, hideBorder, disabled, isCompleted, borderColor, hoverBorderColor, focusedBorderColor, disabledBackgroundColor, sx, ...rest }: EliceTextareaProps) => import("react/jsx-runtime").JSX.Element;
 export default EliceTextarea;

package/dist/types/components/tooltip/Tooltip.d.ts

@@ -1,5 +1,6 @@
-import { TooltipProps } from '@mui/material';
-import { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import type { TooltipProps } from '@mui/material';
+import type { ReactElement, ReactNode } from 'react';
 export interface EliceTooltipProps extends TooltipProps {
     title: string | ReactNode;
     isControl?: boolean;
@@ -10,6 +11,9 @@ export interface EliceTooltipProps extends TooltipProps {
     closeColor?: string;
     fontColor?: string;
     closeOnScroll?: boolean;
+    slotStyles?: React.CSSProperties;
+    allowMultiple?: boolean;
+    maxHeight?: string;
 }
-declare const EliceTooltip: ({ title, initOpen, isControl, placement, triggerAction, children, backgroundColor, closeColor, fontColor, closeOnScroll, ...rest }: EliceTooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const EliceTooltip: ({ title, initOpen, isControl, placement, triggerAction, children, backgroundColor, closeColor, fontColor, closeOnScroll, slotStyles, allowMultiple, maxHeight, ...rest }: EliceTooltipProps) => import("react/jsx-runtime").JSX.Element;
 export default EliceTooltip;

package/dist/types/components/video/VideoPlayer.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 export interface EliceVideoPlayerProps {
     source: string;
     autoPlay?: boolean;

package/dist/types/components/video/VideoV2.d.ts

@@ -1,4 +1,6 @@
 interface VideoV2Props {
+    /** video.js UI/에러 메시지 언어. 기본값: 'en' */
+    language?: "en" | "ko";
     source: {
         src: string;
         type?: string;
@@ -16,5 +18,5 @@ interface VideoV2Props {
         playbackRates?: number[];
     };
 }
-export declare function EliceVideoV2({ source, textTrack, options: _options, }: VideoV2Props): import("react/jsx-runtime").JSX.Element;
+export declare function EliceVideoV2({ language, source, textTrack, options: _options, }: VideoV2Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/video/VideoV3.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+export interface VideoV3Track {
+    src: string;
+    lang: string;
+    label?: string;
+    default?: boolean;
+}
+export interface VideoV3Source {
+    src: string;
+    type?: string;
+}
+export interface EliceVideoV3Props {
+    language?: 'en' | 'ko';
+    source: VideoV3Source[];
+    textTrack?: VideoV3Track[];
+    poster?: string;
+    autoPlay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    preload?: 'none' | 'metadata' | 'auto';
+    playbackRates?: number[];
+    rememberPositionKey?: string;
+    primaryColor?: string;
+    customColor?: {
+        background?: string;
+        text?: string;
+        mutedText?: string;
+        controlBackground?: string;
+        border?: string;
+        error?: string;
+        primary?: string;
+        focus?: string;
+    };
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function EliceVideoV3({ language, source, textTrack, poster, autoPlay, loop, muted, preload, playbackRates, rememberPositionKey, primaryColor, customColor, className, style, }: EliceVideoV3Props): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/video/index.d.ts

@@ -1,3 +1,5 @@
 export { default as EliceVideoPlayer } from './VideoPlayer';
 export { EliceVideoV2 } from './VideoV2';
+export { EliceVideoV3 } from './VideoV3';
 export type { EliceVideoPlayerProps } from './VideoPlayer';
+export type { EliceVideoV3Props, VideoV3Source, VideoV3Track } from './VideoV3';

package/dist/types/hooks/useAIDTMediaQuery.d.ts

@@ -1,4 +1,8 @@
-declare const useAIDTMediaQuery: () => {
+import { breakpoints as DEFAULT_BREAKPOINTS } from '../tokens';
+interface UseAIDTMediaQueryOptions {
+    breakpoints?: typeof DEFAULT_BREAKPOINTS;
+}
+declare const useAIDTMediaQuery: (options?: UseAIDTMediaQueryOptions) => {
     isMobile: boolean;
     isMiniTablet: boolean;
     isTablet: boolean;

package/dist/types/icons/MoreColumn.d.ts

@@ -1,3 +1,3 @@
-import { IconProps } from './_types';
+import { IconProps } from "./_types";
 declare const MoreColumn: ({ size, color, ...other }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export default MoreColumn;

package/dist/types/icons/QuestionBubble.d.ts

@@ -1,3 +1,3 @@
-import { IconProps } from './_types';
+import { IconProps } from "./_types";
 declare const QuestionBubble: ({ size, color, ...other }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export default QuestionBubble;

package/dist/types/icons/ReadyRecord.d.ts

@@ -1,4 +1,4 @@
-import { IconProps } from './_types';
+import { IconProps } from "./_types";
 declare const ReadyRecord: ({ size, outerColor, innerColor, ...other }: IconProps & {
     outerColor?: string;
     innerColor?: string;

package/dist/types/icons/RecordPause.d.ts

@@ -1,3 +1,3 @@
-import { IconProps } from './_types';
+import { IconProps } from "./_types";
 declare const RecordPause: ({ size, color, ...other }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export default RecordPause;

package/dist/types/icons/RecordPlay.d.ts

@@ -1,3 +1,3 @@
-import { IconProps } from './_types';
+import { IconProps } from "./_types";
 declare const RecordPlay: ({ size, color, ...other }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export default RecordPlay;

package/dist/types/icons/Recording.d.ts

@@ -1,4 +1,4 @@
-import { IconProps } from './_types';
+import { IconProps } from "./_types";
 declare const Recording: ({ size, color, squareColor, ...other }: IconProps & {
     squareColor?: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/types/icons/ScrollMoreIcon.d.ts

@@ -1,4 +1,4 @@
-import { IconProps } from './_types';
+import { IconProps } from "./_types";
 interface ScrollMoreIconProps extends IconProps {
     bgColor?: string;
     arrowColor?: string;

package/dist/types/icons/SearchIcon.d.ts

@@ -1,3 +1,3 @@
-import { IconProps } from './_types';
+import { IconProps } from "./_types";
 declare const SearchIcon: ({ size, color, ...other }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export default SearchIcon;

package/dist/types/index.d.ts

@@ -1,6 +1,8 @@
+import './types/theme-augmentation';
 export * from './components';
 export * from './theme';
 export * from './tokens';
 export * from './icons';
 export * from './hooks';
+export type { BaseTypographyVariant, ContentTypographyVariant } from './typography';
 export { createEliceTheme } from './theme/createEliceThemeOverride';

package/dist/types/palettes/_typing.d.ts

@@ -1,4 +1,4 @@
-import { PaletteOptions } from '@mui/material';
+import type { PaletteOptions } from '@mui/material';
 export interface MuiPalette {
     light: PaletteOptions;
     dark: PaletteOptions;

package/dist/types/palettes/eliceDefault.d.ts

@@ -1,2 +1,2 @@
-import { PublisherSubjects } from './types';
+import type { PublisherSubjects } from './types';
 export declare const elicePalettes: PublisherSubjects;

package/dist/types/palettes/type1.d.ts

@@ -1,2 +1,2 @@
-import { PublisherSubjects } from './types';
+import type { PublisherSubjects } from './types';
 export declare const type1Palettes: PublisherSubjects;

package/dist/types/palettes/type2.d.ts

@@ -1,2 +1,2 @@
-import { PublisherSubjects } from './types';
+import type { PublisherSubjects } from './types';
 export declare const type2Palettes: PublisherSubjects;

package/dist/types/theme/AIDTTheme.d.ts

@@ -1,3 +1,3 @@
-import { Publisher, PublisherSubjects, SubjectLevels, ThemeColor } from '../palettes/types';
+import type { Publisher, PublisherSubjects, SubjectLevels, ThemeColor } from '../palettes/types';
 declare const getThemeColors: (publisher: Publisher, subject: keyof PublisherSubjects, level: keyof SubjectLevels) => ThemeColor;
 export { getThemeColors };

package/dist/types/theme/_base.d.ts

@@ -1,2 +1,2 @@
-import { PaletteOptions } from '@mui/material';
+import type { PaletteOptions } from '@mui/material';
 export declare const basePalette: PaletteOptions;

package/dist/types/theme/createAIDTTheme.d.ts

@@ -1,4 +1,3 @@
-import { CreateAIDTThemeProps } from '../types/theme.types';
-import { Theme } from '@mui/material';
-declare const createAIDTTheme: ({ paletteMode, palettePublisher, paletteSubject, paletteLevel, typographyType, typographyFontFamily, }: CreateAIDTThemeProps) => Theme;
+import type { CreateAIDTThemeProps } from '../types/theme.types';
+declare const createAIDTTheme: ({ paletteMode, palettePublisher, paletteSubject, paletteLevel, typographyType, typographyFontFamily, }: CreateAIDTThemeProps) => import("@mui/material").Theme;
 export { createAIDTTheme };

package/dist/types/theme/createEliceThemeOverride.d.ts

@@ -1,7 +1,8 @@
-import { PaletteMode, Theme } from '@mui/material';
-import { ElicePaletteName } from '@elice/mui-system';
+import type { PaletteMode, Theme } from '@mui/material';
+import type { ElicePaletteName } from '@elice/mui-system';
 import { AIDTPaletteLevel, AIDTPalettePublisher, AIDTPaletteSubject } from '../types/theme.types';
 import { TypographyFontFamilyType } from '../typography';
+import { TYPOGRAPHY_STYLES_MAP } from '../typography/TypographyType';
 export interface CreateEliceThemeProps {
     paletteMode?: PaletteMode;
     paletteName?: ElicePaletteName;
@@ -9,10 +10,11 @@ export interface CreateEliceThemeProps {
     paletteSubject?: AIDTPaletteSubject;
     paletteLevel?: AIDTPaletteLevel;
     typographyFontFamily?: TypographyFontFamilyType;
+    typographyType?: keyof typeof TYPOGRAPHY_STYLES_MAP;
 }
 /**
  * Override createEliceTheme to use createAIDTTheme instead
  * This ensures the override works in both development and production builds
  */
-export declare const createEliceTheme: ({ paletteMode, palettePublisher, paletteSubject, paletteLevel, typographyFontFamily, }?: CreateEliceThemeProps) => Theme;
+export declare const createEliceTheme: ({ paletteMode, palettePublisher, paletteSubject, paletteLevel, typographyFontFamily, typographyType, }?: CreateEliceThemeProps) => Theme;
 export { createEliceTheme as originalCreateEliceTheme } from '@elice/mui-system';

package/dist/types/theme/transitions.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from '@mui/material';
+import type { Theme } from '@mui/material';
 /**
  * 부드러운 색상 및 transform 변화를 위한 transition
  * 버튼, 카드 등 인터랙티브 요소의 hover/focus 상태 변화에 사용

package/dist/types/tokens/breakpoints/breakpoints.d.ts

@@ -1,11 +1,11 @@
 export declare const breakpoints: Readonly<{
     xs: 390;
     sm: 512;
-    md: 768;
+    md: 830;
     lg: 1024;
     xl: 1280;
     tablet: 480;
     notebook: 640;
     desktop: 800;
-    height: 500;
+    height: 600;
 }>;

package/dist/types/tokens/colors/_typing.d.ts

@@ -1,4 +1,4 @@
-import { Color as MuiColor } from '@mui/material';
+import type { Color as MuiColor } from '@mui/material';
 type AccentColorName = 'A100' | 'A200' | 'A400' | 'A700';
 export type AIDTColor = Omit<MuiColor, AccentColorName> & {
     950: string;

package/dist/types/tokens/colors/bluepurple.d.ts

@@ -1,2 +1,2 @@
-import { AIDTColor } from './_typing';
+import type { AIDTColor } from './_typing';
 export declare const bluepurple: AIDTColor;

package/dist/types/tokens/colors/bluesky.d.ts

@@ -1,2 +1,2 @@
-import { AIDTColor } from './_typing';
+import type { AIDTColor } from './_typing';
 export declare const bluesky: AIDTColor;

package/dist/types/tokens/colors/common.d.ts

@@ -1,2 +1,2 @@
-import { CommonColors } from '@mui/material';
+import type { CommonColors } from '@mui/material';
 export declare const common: CommonColors;

package/dist/types/tokens/colors/gray.d.ts

@@ -1,2 +1,2 @@
-import { AIDTColor } from './_typing';
+import type { AIDTColor } from './_typing';
 export declare const gray: AIDTColor;

package/dist/types/tokens/colors/green.d.ts

@@ -1,2 +1,2 @@
-import { AIDTColor } from './_typing';
+import type { AIDTColor } from './_typing';
 export declare const green: AIDTColor;

package/dist/types/tokens/colors/mint.d.ts

@@ -1,2 +1,2 @@
-import { AIDTColor } from './_typing';
+import type { AIDTColor } from './_typing';
 export declare const mint: AIDTColor;

package/dist/types/tokens/colors/orange.d.ts

@@ -1,2 +1,2 @@
-import { AIDTColor } from './_typing';
+import type { AIDTColor } from './_typing';
 export declare const orange: AIDTColor;

package/dist/types/tokens/colors/pink.d.ts

@@ -1,2 +1,2 @@
-import { AIDTColor } from './_typing';
+import type { AIDTColor } from './_typing';
 export declare const pink: AIDTColor;

package/dist/types/tokens/colors/purple.d.ts

@@ -1,2 +1,2 @@
-import { AIDTColor } from './_typing';
+import type { AIDTColor } from './_typing';
 export declare const purple: AIDTColor;

package/dist/types/tokens/colors/yellow.d.ts

@@ -1,2 +1,2 @@
-import { AIDTColor } from './_typing';
+import type { AIDTColor } from './_typing';
 export declare const yellow: AIDTColor;

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

@@ -1,14 +1,23 @@
+import '@mui/material/styles';
 declare module '@mui/material/styles' {
     interface TypographyVariants {
         subtitle3: React.CSSProperties;
+        body3: React.CSSProperties;
+        title1: React.CSSProperties;
+        title2: React.CSSProperties;
+        clampH1: React.CSSProperties;
         pagination: React.CSSProperties;
         buttoninput: React.CSSProperties;
         textarea: React.CSSProperties;
     }
     interface TypographyVariantsOptions {
+        subtitle3?: React.CSSProperties;
+        body3?: React.CSSProperties;
+        title1?: React.CSSProperties;
+        title2?: React.CSSProperties;
+        clampH1?: React.CSSProperties;
         pagination?: React.CSSProperties;
         buttoninput?: React.CSSProperties;
-        subtitle?: React.CSSProperties;
         textarea?: React.CSSProperties;
     }
     interface CommonColors {
@@ -57,6 +66,10 @@ declare module '@mui/material/styles' {
 declare module '@mui/material/Typography' {
     interface TypographyPropsVariantOverrides {
         subtitle3: true;
+        body3: true;
+        title1: true;
+        title2: true;
+        clampH1: true;
         pagination: true;
         buttoninput: true;
         textarea: true;

package/dist/types/types/theme.types.d.ts

@@ -1,9 +1,11 @@
-import { PaletteMode, PaletteOptions, Theme } from '@mui/material';
-import { TypographyFontFamilyType } from '../typography';
+import type { PaletteMode, PaletteOptions, Theme } from '@mui/material';
+import type { TypographyFontFamilyType } from '../typography';
 import { TYPOGRAPHY_STYLES_MAP } from '../typography/TypographyType';
+/** Default/Fluid/Clamp 공통 커스텀 variant (MUI 기본 + buttoninput, pagination, textarea) */
 export interface TypographyVariantsExtension {
     pagination: React.CSSProperties;
     buttoninput: React.CSSProperties;
+    textarea: React.CSSProperties;
 }
 export interface CommonColors {
     white: string;