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

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

@@ -1,4 +1,4 @@
-import { BreakpointsOptions } from '@mui/system';
+import type { BreakpointsOptions } from '@mui/system';
 /**
  * Customized breakpoints for Material-UI Design System.
  * (https://mui.com/material-ui/customization/breakpoints)

package/dist/types/components/AI-feedback/AIFeedback.d.ts

@@ -1,5 +1,5 @@
-import { default as React } from 'react';
-import { EliceTooltipProps } from '../tooltip';
+import React from 'react';
+import type { EliceTooltipProps } from '../tooltip';
 export type EliceAIFeedbackProps = Omit<EliceTooltipProps, 'children'> & {
     CustomAvatar?: React.ReactNode;
 };

package/dist/types/components/AIDTTypography/AIDTTypography.d.ts

@@ -1,11 +1,22 @@
-import { default as React } from 'react';
-import { TypographyProps } from '@mui/material';
-import { TypographyFontFamilyType } from '../../typography';
-interface AIDTTypographyProps extends TypographyProps {
+import React from 'react';
+import type { BaseTypographyVariant, ContentTypographyVariant } from '../../typography/TypographyType';
+import type { TypographyProps } from '@mui/material';
+import type { TypographyFontFamilyType } from '../../typography';
+interface AIDTTypographyBaseProps extends Omit<TypographyProps, 'variant'> {
     fontFamily?: TypographyFontFamilyType;
     fontWeight?: number;
     fontSize?: string;
     lineHeight?: number;
 }
+/** typographyType: 'Content' | 'ContentClamp' 일 때만 title1, title2, body3, subtitle3, clampH1 등 Content 전용 variant 사용 가능 */
+interface AIDTTypographyPropsWithContent extends AIDTTypographyBaseProps {
+    typographyType: 'Content' | 'ContentClamp';
+    variant?: ContentTypographyVariant;
+}
+interface AIDTTypographyPropsWithBase extends AIDTTypographyBaseProps {
+    typographyType?: 'Default' | 'Fluid' | 'Clamp';
+    variant?: BaseTypographyVariant;
+}
+type AIDTTypographyProps = AIDTTypographyPropsWithContent | AIDTTypographyPropsWithBase;
 declare const AIDTTypography: React.FC<AIDTTypographyProps>;
 export default AIDTTypography;

package/dist/types/components/Modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import { ModalProps, SxProps } from '@mui/material';
+import type { ModalProps, SxProps } from '@mui/material';
 export type EliceModalProps = {
     open: boolean;
     handleClose: () => void;

package/dist/types/components/badge/Badge.d.ts

@@ -1,4 +1,4 @@
-import { StackProps } from '@mui/material';
+import type { StackProps } from '@mui/material';
 export interface BadgeProps extends StackProps {
     color: 'primary' | 'secondary' | 'black';
     label: string;

package/dist/types/components/base-input/BaseInput.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from "react";
 export type BaseInputType = "normal" | "area";
 export interface BaseInputProps {
     value: string;

package/dist/types/components/button/Button.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 EliceButtonProps extends ButtonProps {
     children?: React.ReactNode;
     variant?: 'contained' | 'outlined' | 'text';

package/dist/types/components/chat/Chat.d.ts

@@ -1,5 +1,5 @@
-import { default as React } from 'react';
-import { RecorderType } from '../recorder-step/RecorderStep';
+import React from "react";
+import type { RecorderType } from "../recorder-step/RecorderStep";
 export type EliceMessageItem = {
     role: "system" | "user" | "assistant";
     content: string;
@@ -27,6 +27,11 @@ export interface EliceChatProps {
     isRecordDisabled?: boolean;
     isResetDisabled?: boolean;
     maxRows?: number;
+    iconButtonColor?: string;
+    recordButtonColor?: string;
+    resetButtonColor?: string;
+    sendButtonColor?: string;
+    inputFontSize?: string;
 }
 declare const EliceChat: {
     (props: React.ComponentProps<typeof EliceChatContainer>): import("react/jsx-runtime").JSX.Element;
@@ -41,7 +46,7 @@ declare const EliceChat: {
         CustomAssistantAvatar: React.ReactNode;
         CustomUserAvatar: React.ReactNode;
     }): import("react/jsx-runtime").JSX.Element;
-    InputArea({ placeHolder, value, isDisabled, onChange, onSend, onReset, onRecord, onTranscribingChange, isOnlyRecord, isResetDisabled, isRecordDisabled, maxRows }: {
+    InputArea({ placeHolder, value, isDisabled, onChange, onSend, onReset, onRecord, onTranscribingChange, isOnlyRecord, isResetDisabled, isRecordDisabled, maxRows, iconButtonColor, recordButtonColor, resetButtonColor, sendButtonColor, inputFontSize, }: {
         placeHolder: string;
         value: string;
         isDisabled: boolean;
@@ -57,7 +62,12 @@ declare const EliceChat: {
         isResetDisabled: boolean;
         isRecordDisabled: boolean;
         maxRows: number;
+        iconButtonColor?: string;
+        recordButtonColor?: string;
+        resetButtonColor?: string;
+        sendButtonColor?: string;
+        inputFontSize?: string;
     }): import("react/jsx-runtime").JSX.Element;
 };
-declare const EliceChatContainer: ({ placeholder, messages, content, onReset, onSend, onChange, onRecord, onTranscribingChange, setAudioFile, onTransform, isLoadingMessage, CustomAssistantAvatar, CustomUserAvatar, isDisabled, backgroundImage, height, recorderType, isOnlyRecord, isResetDisabled, isRecordDisabled, maxRows, }: EliceChatProps) => import("react/jsx-runtime").JSX.Element;
+declare const EliceChatContainer: ({ placeholder, messages, content, onReset, onSend, onChange, onRecord, onTranscribingChange, setAudioFile, onTransform, isLoadingMessage, CustomAssistantAvatar, CustomUserAvatar, isDisabled, backgroundImage, height, recorderType, isOnlyRecord, isResetDisabled, isRecordDisabled, maxRows, iconButtonColor, recordButtonColor, resetButtonColor, sendButtonColor, inputFontSize, }: EliceChatProps) => import("react/jsx-runtime").JSX.Element;
 export default EliceChat;

package/dist/types/components/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/dialog/Dialog.d.ts

@@ -1,5 +1,5 @@
-import { default as React } from 'react';
-import { DialogProps } from '@mui/material';
+import React from 'react';
+import type { DialogProps } from '@mui/material';
 export interface EliceDialogProps extends Omit<DialogProps, 'open' | 'onClose' | 'title' | 'content'> {
     open?: boolean;
     onClose?: () => void;

package/dist/types/components/dotted-pagination/DottedPagination.d.ts

@@ -3,6 +3,7 @@ export interface DottedPaginationProps {
     totalPage?: number;
     onPrev?: VoidFunction;
     onNext?: VoidFunction;
+    DotColor?: string;
 }
 declare const EliceDottedPagination: (props: DottedPaginationProps) => import("react/jsx-runtime").JSX.Element | "Total page is at most 10";
 export default EliceDottedPagination;

package/dist/types/components/fluid/EliceBox.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { EliceBoxProps } from './types';
+export declare const EliceBox: React.ForwardRefExoticComponent<Omit<EliceBoxProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;

package/dist/types/components/fluid/EliceFluidLayout.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { SxProps, Theme } from '@mui/material';
+import type { FluidStep } from './types';
+export interface EliceFluidLayoutProps {
+    children: React.ReactNode;
+    step?: FluidStep;
+    backgroundImage?: string;
+    backgroundColor?: string;
+    onPrev?: () => void;
+    onNext?: () => void;
+    allowPrev?: boolean;
+    allowNext?: boolean;
+    onlyPage?: boolean;
+    enableScrollTracking?: boolean;
+    sx?: SxProps<Theme>;
+    innerSx?: SxProps<Theme>;
+}
+type Alignment = 'left' | 'center' | 'right';
+export declare const EliceFluidLayout: (({ children, step, backgroundImage, backgroundColor, enableScrollTracking, sx, innerSx, }: EliceFluidLayoutProps) => import("react/jsx-runtime").JSX.Element) & {
+    HeaderContainer: ({ children, sx }: {
+        children: React.ReactNode;
+        sx?: SxProps<Theme>;
+    }) => import("react/jsx-runtime").JSX.Element;
+    ContentContainer: ({ children, sx, scrollbarPosition, }: {
+        children: React.ReactNode;
+        sx?: SxProps<Theme>;
+        scrollbarPosition?: number;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, alignment, justifyContent, sx, }: {
+        children: React.ReactNode;
+        alignment?: Alignment;
+        justifyContent?: string;
+        sx?: SxProps<Theme>;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Subtitle: ({ children, alignment, justifyContent, sx, }: {
+        children: React.ReactNode;
+        alignment?: Alignment;
+        justifyContent?: string;
+        sx?: SxProps<Theme>;
+    }) => import("react/jsx-runtime").JSX.Element;
+    FooterContainer: ({ children, sx }: {
+        children: React.ReactNode;
+        sx?: SxProps<Theme>;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/types/components/fluid/EliceStack.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { EliceStackProps } from './types';
+export declare const EliceStack: React.ForwardRefExoticComponent<Omit<EliceStackProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;

package/dist/types/components/fluid/EliceTypography.d.ts

@@ -0,0 +1,2 @@
+import type { EliceTypographyProps } from './types';
+export declare function EliceTypography({ step, sx, fontSizeMap, ...props }: EliceTypographyProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/fluid/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const STEP_CSS_VARIABLES: {
+    readonly '--step--1': "clamp(18px, 15.508px + 0.2595vw + 0.0865vh, 28.8px)";
+    readonly '--step-0': "clamp(16.4px, 11.877px + 0.471vw + 0.157vh, 36px)";
+    readonly '--step-1': "clamp(14.5px, 7.462px + 0.7335vw + 0.2445vh, 45px)";
+    readonly '--step-2': "clamp(12.1px, 1.969px + 1.05525vw + 0.35175vh, 56px)";
+    readonly '--step-3': "clamp(9px, -5.077px + 1.46625vw + 0.48875vh, 70px)";
+    readonly '--step-4': "clamp(5px, -14.385px + 2.019vw + 0.673vh, 89px)";
+};
+export declare const DEFAULT_FONT_SIZE_MAP: Record<string, string>;

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

@@ -0,0 +1,7 @@
+export { EliceBox } from './EliceBox';
+export { EliceStack } from './EliceStack';
+export { EliceTypography } from './EliceTypography';
+export { EliceFluidLayout } from './EliceFluidLayout';
+export { STEP_CSS_VARIABLES, DEFAULT_FONT_SIZE_MAP } from './constants';
+export type { FluidStep, FluidStepProps, EliceBoxProps, EliceStackProps, EliceTypographyProps, FontSizeMap, } from './types';
+export type { EliceFluidLayoutProps } from './EliceFluidLayout';

package/dist/types/components/fluid/types.d.ts

@@ -0,0 +1,15 @@
+import type { BoxProps, StackProps, TypographyProps } from '@mui/material';
+export type FluidStep = -1 | 0 | 1 | 2 | 3;
+export interface FluidStepProps<T extends React.ElementType> {
+    /** true일 때 STEP_CSS_VARIABLES를 컴포넌트에 직접 주입 (theme 없이 독립 사용) */
+    root?: boolean;
+    step?: FluidStep;
+    component?: T;
+}
+export type EliceBoxProps<T extends React.ElementType> = BoxProps<T> & FluidStepProps<T>;
+export type EliceStackProps<T extends React.ElementType> = StackProps<T> & FluidStepProps<T>;
+export type FontSizeMap = Partial<Record<string, string>>;
+export type EliceTypographyProps = TypographyProps & Omit<FluidStepProps<React.ElementType>, 'component'> & {
+    /** variant별 font-size 배율 override (DEFAULT_FONT_SIZE_MAP과 merge) */
+    fontSizeMap?: FontSizeMap;
+};

package/dist/types/components/header-title/HeaderTitle.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { SxProps, Theme } from '@mui/material';
 export interface HeaderTitleProps {
     title: string;

package/dist/types/components/html-viewer/HtmlViewer.d.ts

@@ -0,0 +1,9 @@
+import type { EliceHtmlViewerProps } from './HtmlViewerTypes';
+/**
+ * Cross-platform HTML viewer with highlight & memo annotations.
+ *
+ * @security The `content` prop must be pre-sanitized by the caller before
+ * passing to this component. No internal HTML sanitization is performed.
+ */
+declare const EliceHtmlViewer: ({ content, documentId, defaultMode, annotations, onAnnotationCreate, onAnnotationUpdate, onAnnotationDelete, colors, sx, }: EliceHtmlViewerProps) => import("react/jsx-runtime").JSX.Element;
+export default EliceHtmlViewer;

package/dist/types/components/html-viewer/HtmlViewerContent.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface HtmlViewerContentProps {
+    content: string;
+}
+export declare const HtmlViewerContent: React.ForwardRefExoticComponent<HtmlViewerContentProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/components/html-viewer/HtmlViewerContext.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { Dispatch } from 'react';
+import type { EliceHtmlViewerProps, HtmlViewerAction, HtmlViewerState } from './HtmlViewerTypes';
+interface HtmlViewerContextType {
+    state: HtmlViewerState;
+    dispatch: Dispatch<HtmlViewerAction>;
+}
+type ProviderProps = Pick<EliceHtmlViewerProps, 'defaultMode' | 'annotations' | 'onAnnotationCreate' | 'onAnnotationUpdate' | 'onAnnotationDelete'> & {
+    children: React.ReactNode;
+};
+export declare const HtmlViewerProvider: ({ children, defaultMode, annotations: controlledAnnotations, onAnnotationCreate, onAnnotationUpdate, onAnnotationDelete, }: ProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useHtmlViewer: () => HtmlViewerContextType;
+export {};

package/dist/types/components/html-viewer/HtmlViewerHighlightLayer.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface HtmlViewerHighlightLayerProps {
+    contentRef: React.RefObject<HTMLDivElement>;
+    geometryRootRef: React.RefObject<HTMLDivElement>;
+    scrollHeight: number;
+}
+export declare const HtmlViewerHighlightLayer: ({ contentRef, geometryRootRef, scrollHeight, }: HtmlViewerHighlightLayerProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/types/components/html-viewer/HtmlViewerMemoMenu.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface HtmlViewerMemoMenuProps {
+    contentRef: React.RefObject<HTMLDivElement>;
+    documentId: string;
+    colors?: string[];
+}
+export declare const HtmlViewerMemoMenu: ({ contentRef, documentId, colors, }: HtmlViewerMemoMenuProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/types/components/html-viewer/HtmlViewerToolbar.d.ts

@@ -0,0 +1 @@
+export declare const HtmlViewerToolbar: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/html-viewer/HtmlViewerTypes.d.ts

@@ -0,0 +1,106 @@
+import type { SxProps, Theme } from '@mui/material';
+export type ViewerMode = 'read' | 'highlight';
+/**
+ * Quote-based anchor for DOM-change-resilient annotation restoration.
+ * prefix/suffix provide fuzzy-match fallback when domPath fails.
+ */
+export interface TextAnchor {
+    exact: string;
+    prefix?: string;
+    suffix?: string;
+    startPath?: string;
+    endPath?: string;
+    domPath?: string;
+    startOffset?: number;
+    endOffset?: number;
+    hintBlockIndex?: number;
+}
+export interface Annotation {
+    id: string;
+    documentId: string;
+    anchor: TextAnchor;
+    color: string;
+    memo?: string;
+    createdAt: string;
+    status?: 'active' | 'detached';
+}
+/**
+ * @security The `content` prop must be pre-sanitized by the caller.
+ * This component does NOT sanitize HTML internally.
+ * Pass empty string to render a placeholder instead of raw HTML.
+ */
+export interface EliceHtmlViewerProps {
+    /** Pre-sanitized HTML string. @security Caller must sanitize before passing. */
+    content: string;
+    documentId: string;
+    defaultMode?: ViewerMode;
+    onAnnotationCreate?: (annotation: Annotation) => void;
+    onAnnotationUpdate?: (annotation: Annotation) => void;
+    onAnnotationDelete?: (id: string) => void;
+    /** Controlled annotations. When provided, internal storage is bypassed. */
+    annotations?: Annotation[];
+    colors?: string[];
+    sx?: SxProps<Theme>;
+}
+export interface HighlightRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    annotationId: string;
+    color: string;
+}
+export type GestureState = {
+    kind: 'idle';
+} | {
+    kind: 'pressing';
+    startX: number;
+    startY: number;
+    startTime: number;
+    pointerType: string;
+} | {
+    kind: 'longPressArmed';
+    startX: number;
+    startY: number;
+} | {
+    kind: 'selecting';
+    anchorRange: Range;
+} | {
+    kind: 'scrolling';
+};
+export interface MenuPosition {
+    x: number;
+    y: number;
+}
+export interface HtmlViewerState {
+    mode: ViewerMode;
+    annotations: Annotation[];
+    activeAnnotationId: string | null;
+    pendingRange: Range | null;
+    menuPosition: MenuPosition | null;
+}
+export type HtmlViewerAction = {
+    type: 'SET_MODE';
+    payload: ViewerMode;
+} | {
+    type: 'ADD_ANNOTATION';
+    payload: Annotation;
+} | {
+    type: 'UPDATE_ANNOTATION';
+    payload: Annotation;
+} | {
+    type: 'DELETE_ANNOTATION';
+    payload: string;
+} | {
+    type: 'SET_ACTIVE_ANNOTATION';
+    payload: string | null;
+} | {
+    type: 'SET_PENDING_RANGE';
+    payload: Range | null;
+} | {
+    type: 'SET_MENU_POSITION';
+    payload: MenuPosition | null;
+} | {
+    type: 'SYNC_ANNOTATIONS';
+    payload: Annotation[];
+};

package/dist/types/components/html-viewer/hooks/useAnchorResolver.d.ts

@@ -0,0 +1,13 @@
+import type { TextAnchor } from '../HtmlViewerTypes';
+/**
+ * Creates a TextAnchor from a DOM Range for later restoration.
+ */
+export declare function saveAnchor(range: Range, contentRoot: HTMLElement): TextAnchor;
+/**
+ * Restores a DOM Range from a TextAnchor.
+ * Returns null if the anchor cannot be resolved (annotation becomes 'detached').
+ *
+ * Strategy A: domPath + offset
+ * Strategy B (fallback): full-text fuzzy match using exact + prefix + suffix
+ */
+export declare function restoreRange(anchor: TextAnchor, contentRoot: HTMLElement): Range | null;

package/dist/types/components/html-viewer/hooks/useAnnotationStorage.d.ts

@@ -0,0 +1,9 @@
+import type { Annotation } from '../HtmlViewerTypes';
+export interface UseAnnotationStorageReturn {
+    annotations: Annotation[];
+    addAnnotation: (partial: Omit<Annotation, 'id' | 'createdAt' | 'status'>) => Annotation;
+    updateAnnotation: (annotation: Annotation) => void;
+    deleteAnnotation: (id: string) => void;
+    generateId: () => string;
+}
+export declare function useAnnotationStorage(documentId: string): UseAnnotationStorageReturn;

package/dist/types/components/html-viewer/hooks/useGestureStateMachine.d.ts

@@ -0,0 +1,16 @@
+import type { Dispatch } from 'react';
+import type { HtmlViewerAction } from '../HtmlViewerTypes';
+interface UseGestureStateMachineOptions {
+    dispatch: Dispatch<HtmlViewerAction>;
+    isHighlightMode: () => boolean;
+    contentRef: React.RefObject<HTMLElement>;
+    surfaceRef: React.RefObject<HTMLElement>;
+}
+interface GestureHandlers {
+    onPointerDown: (e: React.PointerEvent) => void;
+    onPointerMove: (e: React.PointerEvent) => void;
+    onPointerUp: (e: React.PointerEvent) => void;
+    onPointerCancel: (e: React.PointerEvent) => void;
+}
+export declare function useGestureStateMachine({ dispatch, isHighlightMode, contentRef, surfaceRef, }: UseGestureStateMachineOptions): GestureHandlers;
+export {};

package/dist/types/components/html-viewer/hooks/useHighlightRects.d.ts

@@ -0,0 +1,2 @@
+import type { Annotation, HighlightRect } from '../HtmlViewerTypes';
+export declare function useHighlightRects(annotations: Annotation[], contentRef: React.RefObject<HTMLDivElement>, geometryRootRef: React.RefObject<HTMLDivElement>): HighlightRect[];

package/dist/types/components/html-viewer/hooks/useIntersectionVisibility.d.ts

@@ -0,0 +1,8 @@
+import type { HighlightRect } from '../HtmlViewerTypes';
+/**
+ * Tracks the visible Y range of a container and returns only the
+ * HighlightRects that overlap with the visible area.
+ *
+ * Falls back to returning all rects when viewport data is unavailable.
+ */
+export declare function useIntersectionVisibility(rects: HighlightRect[], geometryRootRef: React.RefObject<HTMLDivElement>): HighlightRect[];

package/dist/types/components/html-viewer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EliceHtmlViewer } from './HtmlViewer';
+export type { EliceHtmlViewerProps, Annotation, TextAnchor, ViewerMode, } from './HtmlViewerTypes';

package/dist/types/components/icon-button/IconButton.d.ts

@@ -1,5 +1,5 @@
-import { IconButtonProps } from '@mui/material';
-import { ReactNode } from 'react';
+import { type IconButtonProps } from '@mui/material';
+import type { ReactNode } from 'react';
 export interface EliceIconButtonProps extends IconButtonProps {
     children: ReactNode;
     backgroundColor?: string;

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

@@ -27,3 +27,5 @@ export * from './sound-visualizer';
 export { EliceRecorderStep } from './recorder-step';
 export type { EliceRecorderStepProps } from './recorder-step';
 export { RecorderProvider } from './recorder-step';
+export * from './html-viewer';
+export * from './fluid';

package/dist/types/components/layout/Footer/LayoutFooterPaging.d.ts

@@ -1,5 +1,5 @@
-import { default as React } from 'react';
-import { TypographyProps } from '@mui/material';
+import React from "react";
+import { TypographyProps } from "@mui/material";
 export interface LayoutFooterPagingProps {
     currentPage: number;
     totalPage: number;

package/dist/types/components/layout/Footer/LayoutFooterSubmit.d.ts

@@ -10,7 +10,8 @@ export interface LayoutFooterSubmitProps {
     submitButtonColor?: string;
     rollbackButtonColor?: string;
     submitTextColor?: string;
+    buttonSize?: 'small' | 'medium' | 'large';
     rollbackTextColor?: string;
 }
-declare const LayoutFooterSubmit: ({ isRollback, isSubmit, disableRollback, disableSubmit, submitText, rollbackText, onSubmit, onRollback, submitButtonColor, rollbackButtonColor, submitTextColor, rollbackTextColor, }: LayoutFooterSubmitProps) => import("react/jsx-runtime").JSX.Element;
+declare const LayoutFooterSubmit: ({ isRollback, isSubmit, disableRollback, disableSubmit, submitText, rollbackText, onSubmit, buttonSize, onRollback, submitButtonColor, rollbackButtonColor, submitTextColor, rollbackTextColor, }: LayoutFooterSubmitProps) => import("react/jsx-runtime").JSX.Element;
 export default LayoutFooterSubmit;

package/dist/types/components/layout/Header/LayoutHeaderSubTitle.d.ts

@@ -1,5 +1,5 @@
-import { default as React } from 'react';
-import { SxProps, Theme } from '@mui/material';
+import React from "react";
+import { SxProps, Theme } from "@mui/material";
 export interface LayoutHeaderSubTitleProps {
     children: React.ReactNode;
     sx?: SxProps<Theme>;

package/dist/types/components/layout/Header/LayoutHeaderTitle.d.ts

@@ -1,5 +1,5 @@
-import { default as React } from 'react';
-import { SxProps, Theme } from '@mui/material';
+import React from "react";
+import { SxProps, Theme } from "@mui/material";
 export interface LayoutHeaderTitleProps {
     children?: React.ReactNode;
     titleComponent?: React.ReactNode;

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

@@ -1,7 +1,5 @@
-import { default as React } from 'react';
-import { BoxProps, StackProps, SxProps, Theme, TypographyProps } from '@mui/material';
-import { LayoutHeaderTitleProps, LayoutHeaderSubTitleProps } from './Header';
-import { LayoutFooterPagingProps, LayoutFooterSubmitProps } from './Footer';
+import React from "react";
+import type { SxProps, Theme } from "@mui/material";
 export interface EliceLayoutProps {
     children: React.ReactNode;
     backgroundImage?: string;
@@ -15,32 +13,16 @@ export interface EliceLayoutProps {
     sx?: SxProps<Theme>;
 }
 type Alignment = "left" | "center" | "right";
-interface EliceStepProps<T extends React.ElementType> {
-    step?: -1 | 0 | 1 | 2 | 3;
-    component?: T;
-}
-type EliceBoxProps<T extends React.ElementType> = BoxProps<T> & EliceStepProps<T>;
-type EliceStackProps<T extends React.ElementType> = StackProps<T> & EliceStepProps<T>;
-type EliceTypographyProps = TypographyProps & Omit<EliceStepProps<React.ElementType>, 'component'>;
-/**
- *  @summary Alpha of Design System. Wrapper of MUI Box
- * */
-export declare const Box: React.ForwardRefExoticComponent<Omit<EliceBoxProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
-/**
- *  @summary Alpha of Design System. Wrapper of MUI Stack
- * */
-export declare const Stack: React.ForwardRefExoticComponent<Omit<EliceStackProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
-/**
- *  @summary Alpha of Design System. Wrapper of MUI Typography
- * */
-export declare function Typography({ step, sx, ...props }: EliceTypographyProps): import("react/jsx-runtime").JSX.Element;
+export { EliceBox as Box } from '../fluid/EliceBox';
+export { EliceStack as Stack } from '../fluid/EliceStack';
+export { EliceTypography as Typography } from '../fluid/EliceTypography';
 export declare const Layout: ({ children, onPrev, onNext, allowPrev, allowNext, backgroundImage, backgroundColor, onlyPage, enableScrollTracking, sx }: EliceLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export declare const HeaderContainer: ({ children, sx }: {
     children: React.ReactNode;
     sx?: SxProps<Theme>;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const HeaderTitle: ({ children, titleComponent, sx }: LayoutHeaderTitleProps) => JSX.Element;
-export declare const HeaderSubTitle: ({ children, sx }: LayoutHeaderSubTitleProps) => JSX.Element;
+export declare const HeaderTitle: ({ children, titleComponent, sx }: import("./Header").LayoutHeaderTitleProps) => JSX.Element;
+export declare const HeaderSubTitle: ({ children, sx }: import("./Header").LayoutHeaderSubTitleProps) => JSX.Element;
 export declare const ContentContainer: ({ children, sx, scrollbarPostion }: {
     children: React.ReactNode;
     sx?: SxProps<Theme>;
@@ -62,6 +44,5 @@ export declare const FooterContainer: ({ children, sx }: {
     children: React.ReactNode;
     sx?: SxProps<Theme>;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const FooterPaging: React.FC< LayoutFooterPagingProps>;
-export declare const FooterSubmit: ({ isRollback, isSubmit, disableRollback, disableSubmit, submitText, rollbackText, onSubmit, onRollback, submitButtonColor, rollbackButtonColor, submitTextColor, rollbackTextColor, }: LayoutFooterSubmitProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const FooterPaging: React.FC<import("./Footer").LayoutFooterPagingProps>;
+export declare const FooterSubmit: ({ isRollback, isSubmit, disableRollback, disableSubmit, submitText, rollbackText, onSubmit, buttonSize, onRollback, submitButtonColor, rollbackButtonColor, submitTextColor, rollbackTextColor, }: import("./Footer").LayoutFooterSubmitProps) => import("react/jsx-runtime").JSX.Element;