@lunit/design-system 2.1.0 → 2.2.0

package/dist/types/components/Button/Button.styled.d.ts

@@ -29,6 +29,8 @@ export declare const sizeStyle: ({ size, kind, hasIconOnly, typography, selected
     animationIterationCount?: import("csstype").Property.AnimationIterationCount | undefined;
     animationName?: import("csstype").Property.AnimationName | undefined;
     animationPlayState?: import("csstype").Property.AnimationPlayState | undefined;
+    animationRangeEnd?: string | number | undefined;
+    animationRangeStart?: string | number | undefined;
     animationTimeline?: import("csstype").Property.AnimationTimeline | undefined;
     animationTimingFunction?: import("csstype").Property.AnimationTimingFunction | undefined;
     appearance?: import("csstype").Property.Appearance | undefined;
@@ -150,6 +152,10 @@ export declare const sizeStyle: ({ size, kind, hasIconOnly, typography, selected
     fontStretch?: import("csstype").Property.FontStretch | undefined;
     fontStyle?: import("csstype").Property.FontStyle | undefined;
     fontSynthesis?: import("csstype").Property.FontSynthesis | undefined;
+    fontSynthesisPosition?: import("csstype").Property.FontSynthesisPosition | undefined;
+    fontSynthesisSmallCaps?: import("csstype").Property.FontSynthesisSmallCaps | undefined;
+    fontSynthesisStyle?: import("csstype").Property.FontSynthesisStyle | undefined;
+    fontSynthesisWeight?: import("csstype").Property.FontSynthesisWeight | undefined;
     fontVariant?: import("csstype").Property.FontVariant | undefined;
     fontVariantAlternates?: import("csstype").Property.FontVariantAlternates | undefined;
     fontVariantCaps?: import("csstype").Property.FontVariantCaps | undefined;
@@ -222,6 +228,7 @@ export declare const sizeStyle: ({ size, kind, hasIconOnly, typography, selected
     maskRepeat?: import("csstype").Property.MaskRepeat | undefined;
     maskSize?: string | number | undefined;
     maskType?: import("csstype").Property.MaskType | undefined;
+    masonryAutoFlow?: import("csstype").Property.MasonryAutoFlow | undefined;
     mathDepth?: import("csstype").Property.MathDepth | undefined;
     mathShift?: import("csstype").Property.MathShift | undefined;
     mathStyle?: import("csstype").Property.MathStyle | undefined;
@@ -260,6 +267,7 @@ export declare const sizeStyle: ({ size, kind, hasIconOnly, typography, selected
     overflowWrap?: import("csstype").Property.OverflowWrap | undefined;
     overflowX?: import("csstype").Property.OverflowX | undefined;
     overflowY?: import("csstype").Property.OverflowY | undefined;
+    overlay?: import("csstype").Property.Overlay | undefined;
     overscrollBehaviorBlock?: import("csstype").Property.OverscrollBehaviorBlock | undefined;
     overscrollBehaviorInline?: import("csstype").Property.OverscrollBehaviorInline | undefined;
     overscrollBehaviorX?: import("csstype").Property.OverscrollBehaviorX | undefined;
@@ -347,12 +355,15 @@ export declare const sizeStyle: ({ size, kind, hasIconOnly, typography, selected
     textTransform?: import("csstype").Property.TextTransform | undefined;
     textUnderlineOffset?: string | number | undefined;
     textUnderlinePosition?: import("csstype").Property.TextUnderlinePosition | undefined;
+    textWrap?: import("csstype").Property.TextWrap | undefined;
+    timelineScope?: import("csstype").Property.TimelineScope | undefined;
     top?: string | number | undefined;
     touchAction?: import("csstype").Property.TouchAction | undefined;
     transform?: import("csstype").Property.Transform | undefined;
     transformBox?: import("csstype").Property.TransformBox | undefined;
     transformOrigin?: string | number | undefined;
     transformStyle?: import("csstype").Property.TransformStyle | undefined;
+    transitionBehavior?: import("csstype").Property.TransitionBehavior | undefined;
     transitionDelay?: import("csstype").Property.TransitionDelay<string & {}> | undefined;
     transitionDuration?: import("csstype").Property.TransitionDuration<string & {}> | undefined;
     transitionProperty?: import("csstype").Property.TransitionProperty | undefined;
@@ -361,9 +372,14 @@ export declare const sizeStyle: ({ size, kind, hasIconOnly, typography, selected
     unicodeBidi?: import("csstype").Property.UnicodeBidi | undefined;
     userSelect?: import("csstype").Property.UserSelect | undefined;
     verticalAlign?: string | number | undefined;
+    viewTimelineAxis?: import("csstype").Property.ViewTimelineAxis | undefined;
+    viewTimelineInset?: string | number | undefined;
+    viewTimelineName?: import("csstype").Property.ViewTimelineName | undefined;
     viewTransitionName?: import("csstype").Property.ViewTransitionName | undefined;
     visibility?: import("csstype").Property.Visibility | undefined;
     whiteSpace?: import("csstype").Property.WhiteSpace | undefined;
+    whiteSpaceCollapse?: import("csstype").Property.WhiteSpaceCollapse | undefined;
+    whiteSpaceTrim?: import("csstype").Property.WhiteSpaceTrim | undefined;
     widows?: import("csstype").Property.Widows | undefined;
     width?: string | number | undefined;
     willChange?: import("csstype").Property.WillChange | undefined;
@@ -375,6 +391,7 @@ export declare const sizeStyle: ({ size, kind, hasIconOnly, typography, selected
     zoom?: import("csstype").Property.Zoom | undefined;
     all?: import("csstype").Globals | undefined;
     animation?: import("csstype").Property.Animation<string & {}> | undefined;
+    animationRange?: string | number | undefined;
     background?: string | number | undefined;
     backgroundPosition?: string | number | undefined;
     border?: string | number | undefined;
@@ -438,6 +455,7 @@ export declare const sizeStyle: ({ size, kind, hasIconOnly, typography, selected
     textDecoration?: string | number | undefined;
     textEmphasis?: import("csstype").Property.TextEmphasis | undefined;
     transition?: import("csstype").Property.Transition<string & {}> | undefined;
+    viewTimeline?: import("csstype").Property.ViewTimeline | undefined;
     MozAnimationDelay?: import("csstype").Property.AnimationDelay<string & {}> | undefined;
     MozAnimationDirection?: import("csstype").Property.AnimationDirection | undefined;
     MozAnimationDuration?: import("csstype").Property.AnimationDuration<string & {}> | undefined;
@@ -447,7 +465,6 @@ export declare const sizeStyle: ({ size, kind, hasIconOnly, typography, selected
     MozAnimationPlayState?: import("csstype").Property.AnimationPlayState | undefined;
     MozAnimationTimingFunction?: import("csstype").Property.AnimationTimingFunction | undefined;
     MozAppearance?: import("csstype").Property.MozAppearance | undefined;
-    MozBackfaceVisibility?: import("csstype").Property.BackfaceVisibility | undefined;
     MozBinding?: import("csstype").Property.MozBinding | undefined;
     MozBorderBottomColors?: import("csstype").Property.MozBorderBottomColors | undefined;
     MozBorderEndColor?: import("csstype").Property.BorderInlineEndColor | undefined;
@@ -474,20 +491,16 @@ export declare const sizeStyle: ({ size, kind, hasIconOnly, typography, selected
     MozMarginStart?: string | number | undefined;
     MozOrient?: import("csstype").Property.MozOrient | undefined;
     MozOsxFontSmoothing?: import("csstype").Property.FontSmooth<string | number> | undefined;
+    MozOutlineRadiusBottomleft?: string | number | undefined;
+    MozOutlineRadiusBottomright?: string | number | undefined;
+    MozOutlineRadiusTopleft?: string | number | undefined;
+    MozOutlineRadiusTopright?: string | number | undefined;
     MozPaddingEnd?: string | number | undefined;
     MozPaddingStart?: string | number | undefined;
-    MozPerspective?: import("csstype").Property.Perspective<string | number> | undefined;
-    MozPerspectiveOrigin?: string | number | undefined;
     MozStackSizing?: import("csstype").Property.MozStackSizing | undefined;
     MozTabSize?: string | number | undefined;
     MozTextBlink?: import("csstype").Property.MozTextBlink | undefined;
     MozTextSizeAdjust?: import("csstype").Property.TextSizeAdjust | undefined;
-    MozTransformOrigin?: string | number | undefined;
-    MozTransformStyle?: import("csstype").Property.TransformStyle | undefined;
-    MozTransitionDelay?: import("csstype").Property.TransitionDelay<string & {}> | undefined;
-    MozTransitionDuration?: import("csstype").Property.TransitionDuration<string & {}> | undefined;
-    MozTransitionProperty?: import("csstype").Property.TransitionProperty | undefined;
-    MozTransitionTimingFunction?: import("csstype").Property.TransitionTimingFunction | undefined;
     MozUserFocus?: import("csstype").Property.MozUserFocus | undefined;
     MozUserModify?: import("csstype").Property.MozUserModify | undefined;
     MozUserSelect?: import("csstype").Property.UserSelect | undefined;
@@ -667,7 +680,7 @@ export declare const sizeStyle: ({ size, kind, hasIconOnly, typography, selected
     MozBorderImage?: import("csstype").Property.BorderImage | undefined;
     MozColumnRule?: string | number | undefined;
     MozColumns?: string | number | undefined;
-    MozTransition?: import("csstype").Property.Transition<string & {}> | undefined;
+    MozOutlineRadius?: string | number | undefined;
     msContentZoomLimit?: import("csstype").Property.MsContentZoomLimit | undefined;
     msContentZoomSnap?: import("csstype").Property.MsContentZoomSnap | undefined;
     msFlex?: string | number | undefined;
@@ -725,6 +738,7 @@ export declare const sizeStyle: ({ size, kind, hasIconOnly, typography, selected
     KhtmlLineBreak?: import("csstype").Property.LineBreak | undefined;
     KhtmlOpacity?: import("csstype").Property.Opacity | undefined;
     KhtmlUserSelect?: import("csstype").Property.UserSelect | undefined;
+    MozBackfaceVisibility?: import("csstype").Property.BackfaceVisibility | undefined;
     MozBackgroundClip?: import("csstype").Property.BackgroundClip | undefined;
     MozBackgroundInlinePolicy?: import("csstype").Property.BoxDecorationBreak | undefined;
     MozBackgroundOrigin?: import("csstype").Property.BackgroundOrigin | undefined;
@@ -746,17 +760,22 @@ export declare const sizeStyle: ({ size, kind, hasIconOnly, typography, selected
     MozOpacity?: import("csstype").Property.Opacity | undefined;
     MozOutline?: string | number | undefined;
     MozOutlineColor?: import("csstype").Property.OutlineColor | undefined;
-    MozOutlineRadius?: string | number | undefined;
-    MozOutlineRadiusBottomleft?: string | number | undefined;
-    MozOutlineRadiusBottomright?: string | number | undefined;
-    MozOutlineRadiusTopleft?: string | number | undefined;
-    MozOutlineRadiusTopright?: string | number | undefined;
     MozOutlineStyle?: import("csstype").Property.OutlineStyle | undefined;
     MozOutlineWidth?: import("csstype").Property.OutlineWidth<string | number> | undefined;
+    MozPerspective?: import("csstype").Property.Perspective<string | number> | undefined;
+    MozPerspectiveOrigin?: string | number | undefined;
     MozTextAlignLast?: import("csstype").Property.TextAlignLast | undefined;
     MozTextDecorationColor?: import("csstype").Property.TextDecorationColor | undefined;
     MozTextDecorationLine?: import("csstype").Property.TextDecorationLine | undefined;
     MozTextDecorationStyle?: import("csstype").Property.TextDecorationStyle | undefined;
+    MozTransform?: import("csstype").Property.Transform | undefined;
+    MozTransformOrigin?: string | number | undefined;
+    MozTransformStyle?: import("csstype").Property.TransformStyle | undefined;
+    MozTransition?: import("csstype").Property.Transition<string & {}> | undefined;
+    MozTransitionDelay?: import("csstype").Property.TransitionDelay<string & {}> | undefined;
+    MozTransitionDuration?: import("csstype").Property.TransitionDuration<string & {}> | undefined;
+    MozTransitionProperty?: import("csstype").Property.TransitionProperty | undefined;
+    MozTransitionTimingFunction?: import("csstype").Property.TransitionTimingFunction | undefined;
     MozUserInput?: import("csstype").Property.MozUserInput | undefined;
     msImeMode?: import("csstype").Property.ImeMode | undefined;
     OAnimation?: import("csstype").Property.Animation<string & {}> | undefined;
@@ -789,8 +808,6 @@ export declare const sizeStyle: ({ size, kind, hasIconOnly, typography, selected
     WebkitBoxOrdinalGroup?: import("csstype").Property.BoxOrdinalGroup | undefined;
     WebkitBoxOrient?: import("csstype").Property.BoxOrient | undefined;
     WebkitBoxPack?: import("csstype").Property.BoxPack | undefined;
-    WebkitScrollSnapPointsX?: import("csstype").Property.ScrollSnapPointsX | undefined;
-    WebkitScrollSnapPointsY?: import("csstype").Property.ScrollSnapPointsY | undefined;
     alignmentBaseline?: import("csstype").Property.AlignmentBaseline | undefined;
     baselineShift?: string | number | undefined;
     clipRule?: import("csstype").Property.ClipRule | undefined;
@@ -890,37 +907,5 @@ export declare const iconStyle: ({ size, hasIconOnly, }: Pick<CustomButtonProps,
         };
     };
 };
-export declare const CustomButton: import("@emotion/styled").StyledComponent<{
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "primary" | "secondary" | "success" | "info" | "warning" | "error" | undefined;
-    disabled?: boolean | undefined;
-    disableElevation?: boolean | undefined;
-    disableFocusRipple?: boolean | undefined;
-    endIcon?: import("react").ReactNode;
-    fullWidth?: boolean | undefined;
-    href?: string | undefined;
-    size?: "small" | "medium" | "large" | undefined;
-    startIcon?: import("react").ReactNode;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "outlined" | "text" | "contained" | undefined;
-} & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    tabIndex?: number | undefined;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "color" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "tabIndex" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "size" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CustomButtonProps, {}, {}>;
+export declare const CustomButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "classes" | "className" | "style" | "children" | "sx" | "variant" | "tabIndex" | "color" | "action" | "href" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "size" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CustomButtonProps, {}, {}>;
 export {};

package/dist/types/components/Chip/Chip.styled.d.ts

@@ -1,79 +1,7 @@
 /// <reference types="react" />
 import type { Theme } from "@mui/material/styles";
 import type { OutlinedChipProps, BaseContainedChipProps, EnableContainedChipProps } from "./Chip.types";
-export declare const StyledOutlinedChip: import("@emotion/styled").StyledComponent<{
-    avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    children?: null | undefined;
-    classes?: Partial<import("@mui/material").ChipClasses> | undefined;
-    clickable?: boolean | undefined;
-    color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "default" | undefined;
-    deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    disabled?: boolean | undefined;
-    icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    label?: import("react").ReactNode;
-    onDelete?: ((event: any) => void) | undefined;
-    size?: "small" | "medium" | undefined;
-    skipFocusWhenDisabled?: boolean | undefined;
-    sx?: import("@mui/material").SxProps<Theme> | undefined;
-    tabIndex?: number | undefined;
-    variant?: "outlined" | "filled" | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "color" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "disabled" | "icon" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & OutlinedChipProps, {}, {}>;
-export declare const StyledContainedChipBase: import("@emotion/styled").StyledComponent<{
-    avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    children?: null | undefined;
-    classes?: Partial<import("@mui/material").ChipClasses> | undefined;
-    clickable?: boolean | undefined;
-    color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "default" | undefined;
-    deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    disabled?: boolean | undefined;
-    icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    label?: import("react").ReactNode;
-    onDelete?: ((event: any) => void) | undefined;
-    size?: "small" | "medium" | undefined;
-    skipFocusWhenDisabled?: boolean | undefined;
-    sx?: import("@mui/material").SxProps<Theme> | undefined;
-    tabIndex?: number | undefined;
-    variant?: "outlined" | "filled" | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "color" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "disabled" | "icon" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;
-export declare const StyledContainedChipEnable: import("@emotion/styled").StyledComponent<{
-    avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    children?: null | undefined;
-    classes?: Partial<import("@mui/material").ChipClasses> | undefined;
-    clickable?: boolean | undefined;
-    color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "default" | undefined;
-    deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    disabled?: boolean | undefined;
-    icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    label?: import("react").ReactNode;
-    onDelete?: ((event: any) => void) | undefined;
-    size?: "small" | "medium" | undefined;
-    skipFocusWhenDisabled?: boolean | undefined;
-    sx?: import("@mui/material").SxProps<Theme> | undefined;
-    tabIndex?: number | undefined;
-    variant?: "outlined" | "filled" | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "color" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "disabled" | "icon" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps & EnableContainedChipProps, {}, {}>;
-export declare const StyledContainedChipDeletable: import("@emotion/styled").StyledComponent<{
-    avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    children?: null | undefined;
-    classes?: Partial<import("@mui/material").ChipClasses> | undefined;
-    clickable?: boolean | undefined;
-    color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "default" | undefined;
-    deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    disabled?: boolean | undefined;
-    icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    label?: import("react").ReactNode;
-    onDelete?: ((event: any) => void) | undefined;
-    size?: "small" | "medium" | undefined;
-    skipFocusWhenDisabled?: boolean | undefined;
-    sx?: import("@mui/material").SxProps<Theme> | undefined;
-    tabIndex?: number | undefined;
-    variant?: "outlined" | "filled" | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "color" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "disabled" | "icon" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;
+export declare const StyledOutlinedChip: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "classes" | "className" | "style" | "children" | "sx" | "variant" | "label" | "tabIndex" | "color" | "icon" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & OutlinedChipProps, {}, {}>;
+export declare const StyledContainedChipBase: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "classes" | "className" | "style" | "children" | "sx" | "variant" | "label" | "tabIndex" | "color" | "icon" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;
+export declare const StyledContainedChipEnable: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "classes" | "className" | "style" | "children" | "sx" | "variant" | "label" | "tabIndex" | "color" | "icon" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps & EnableContainedChipProps, {}, {}>;
+export declare const StyledContainedChipDeletable: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "classes" | "className" | "style" | "children" | "sx" | "variant" | "label" | "tabIndex" | "color" | "icon" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 import { CHIP_COLORS } from "./consts";
 import type { ChipProps as MuiChipProps, ChipTypeMap as MuiChipTypeMap } from "@mui/material";
 import type { OverridableComponent } from "@mui/material/OverridableComponent";
+import type { JSX } from "react";
 type DesignSystemChipKind = "outlined" | "contained";
 type DesignSystemAndMuiContainedChipKind = "filled" | "contained";
 type ColorKeys = keyof typeof CHIP_COLORS;

package/dist/types/components/Dropdown/Dropdown.styled.d.ts

@@ -1,41 +1,7 @@
 /// <reference types="react" />
 import { DropdownProps } from "./Dropdown.types";
-export declare const StyledSelect: import("@emotion/styled").StyledComponent<import("@mui/material/Select").SelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Omit<DropdownProps, "size"> & {
+export declare const StyledSelect: import("@emotion/styled").StyledComponent<(import("@mui/material/Select").SelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>) & Omit<DropdownProps, "size"> & {
     selectSize: "small" | "medium" | "large";
 }, {}, {}>;
-export declare const StyledMenuItem: import("@emotion/styled").StyledComponent<{
-    autoFocus?: boolean | undefined;
-    classes?: Partial<import("@mui/material/MenuItem").MenuItemClasses> | undefined;
-    dense?: boolean | undefined;
-    disabled?: boolean | undefined;
-    disableGutters?: boolean | undefined;
-    divider?: boolean | undefined;
-    selected?: boolean | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-} & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-    tabIndex?: number | undefined;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "autoFocus" | "tabIndex" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const StyledIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
-    children?: import("react").ReactNode;
-    component?: import("react").ElementType<any> | undefined;
-    ref?: import("react").Ref<unknown> | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, ("zIndex" | "typography" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "displayPrint" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "marginX" | "marginY" | "paddingX" | "paddingY") | "children" | "sx" | "ref" | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledMenuItem: import("@emotion/styled").StyledComponent<import("@mui/material/MenuItem").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "classes" | "className" | "style" | "children" | "sx" | "autoFocus" | "tabIndex" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import type { MenuItemProps, SelectProps } from "@mui/material";
+import type { JSX } from "react";
 export interface DropdownProps extends Omit<SelectProps, "size" | "variant" | "placeholder"> {
     select?: "single" | "multiple";
     size?: "small" | "medium" | "large";

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import type { SxProps } from "@mui/material";
 import type { TextFieldProps as MuiTextFieldProps, OutlinedTextFieldProps } from "@mui/material/TextField";
+import type { JSX } from "react";
 export type TextFieldSize = "small" | "medium" | "large";
 export interface BaseTextFieldProps extends Omit<OutlinedTextFieldProps, "size" | "value" | "helperText" | "variant"> {
     /**

package/dist/types/components/TextField/TextFieldIcon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { type JSX } from "react";
 import type { SxProps } from "@mui/material";
 interface TextFieldProps {
     sx?: SxProps;

package/dist/types/components/ToggleButton/ToggleButton.styled.d.ts

@@ -3,38 +3,7 @@ import type { ToggleButtonProps } from "../ToggleButton/ToggleButton.types";
 type CustomToggleButtonProps = ToggleButtonProps & {
     hasIconOnly: boolean;
 };
-export declare const CustomToggleButton: import("@emotion/styled").StyledComponent<{
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ToggleButtonClasses> | undefined;
-    color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "standard" | undefined;
-    disabled?: boolean | undefined;
-    disableFocusRipple?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-    onChange?: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>, value: any) => void) | undefined;
-    onClick?: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>, value: any) => void) | undefined;
-    selected?: boolean | undefined;
-    size?: "small" | "medium" | "large" | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    value: {};
-} & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    tabIndex?: number | undefined;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "color" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "tabIndex" | "onChange" | "onClick" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "value" | "disableFocusRipple" | "fullWidth" | "size" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CustomToggleButtonProps, {}, {}>;
+export declare const CustomToggleButton: import("@emotion/styled").StyledComponent<import("@mui/material").ToggleButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "classes" | "className" | "style" | "children" | "sx" | "tabIndex" | "color" | "onChange" | "onClick" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "fullWidth" | "size" | "value" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CustomToggleButtonProps, {}, {}>;
 export declare const IconAndChildrenWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     hasIconOnly: boolean;

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

@@ -5,7 +5,7 @@ declare module "@mui/material/Typography" {
     interface TypographyPropsVariantOverrides extends TypographyPropsVariantOverridesType {
     }
 }
-declare const Typography: <C extends React.ElementType<any>>(props: TypographyProps<C, {
+declare const Typography: <C extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>(props: TypographyProps<C, {
     component?: C | undefined;
 }>) => import("react/jsx-runtime").JSX.Element;
 export default Typography;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/design-system",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Lunit Design System",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
@@ -56,37 +56,35 @@
       }
     }
   },
+  "engines": {
+    "node": ">=20.0.0"
+  },
   "devDependencies": {
     "@babel/core": "^7.17.10",
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
-    "@emotion/react": "^11.9.0",
+    "@emotion/react": "11.14.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/icons-material": "^5.11.3",
-    "@mui/material": "^5.11.3",
+    "@mui/icons-material": "5.18.0",
+    "@mui/material": "5.18.0",
     "@mui/utils": "^5.11.3",
-    "@mui/x-date-pickers": "^5.0.20",
-    "@storybook/addon-actions": "^7.0.21",
-    "@storybook/addon-essentials": "^7.0.21",
-    "@storybook/addon-interactions": "^7.0.21",
-    "@storybook/addon-links": "^7.0.21",
-    "@storybook/addon-storysource": "^7.0.21",
-    "@storybook/blocks": "^7.0.21",
-    "@storybook/react": "^7.0.21",
-    "@storybook/react-webpack5": "^7.0.21",
-    "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.0.21",
+    "@storybook/addon-docs": "9.1.2",
+    "@storybook/addon-links": "9.1.2",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+    "@storybook/react-webpack5": "9.1.2",
     "@types/lodash": "^4.14.182",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
     "babel-loader": "^8.2.5",
     "chromatic": "^6.7.0",
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
     "mustache": "^4.2.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "storybook": "^7.0.21",
-    "storybook-addon-pseudo-states": "^2.0.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "storybook": "9.1.2",
+    "storybook-addon-pseudo-states": "^9.1.2",
     "ts-loader": "^9.3.0",
     "typescript": "^4.6.4",
     "webpack": "^5.72.0",
@@ -98,8 +96,8 @@
   },
   "peerDependencies": {
     "@mui/material": "^5.0.0",
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   }
-}
+}

package/src/components/Chip/Chip.types.ts

@@ -6,6 +6,8 @@ import type {
 } from "@mui/material";
 import type { OverridableComponent } from "@mui/material/OverridableComponent";
 
+import type { JSX } from "react";
+
 type DesignSystemChipKind = "outlined" | "contained";
 type DesignSystemAndMuiContainedChipKind = "filled" | "contained";
 type ColorKeys = keyof typeof CHIP_COLORS;

package/src/components/Dropdown/Dropdown.types.ts

@@ -1,5 +1,7 @@
 import type { MenuItemProps, SelectProps } from "@mui/material";
 
+import type { JSX } from "react";
+
 export interface DropdownProps
   extends Omit<SelectProps, "size" | "variant" | "placeholder"> {
   // mui variant 를 바꾸게 되면 스타일이 틀어질 수 있어서 variant 를 아예 사용하지 못하게 props 에서 제거

package/src/components/TextField/TextField.types.ts

@@ -4,6 +4,8 @@ import type {
   OutlinedTextFieldProps,
 } from "@mui/material/TextField";
 
+import type { JSX } from "react";
+
 export type TextFieldSize = "small" | "medium" | "large";
 export interface BaseTextFieldProps
   extends Omit<

package/src/components/TextField/TextFieldIcon.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type JSX } from "react";
 
 import { IconWrapper } from "./TextField.style";
 

package/src/stories/GettingStarted.mdx

@@ -1,4 +1,4 @@
-import {  Meta } from '@storybook/blocks';
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="Getting Started/Overview" />
 
@@ -17,9 +17,9 @@ Material UI is peer dependency of Lunit Design System Library. You need to insta
 ```json
 "peerDependencies": {
   "@mui/material": "^5.0.0",
-  "@types/react": "^17.0.0 || ^18.0.0",
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 }
 ```
 
@@ -30,12 +30,9 @@ Material UI is peer dependency of Lunit Design System Library. You need to insta
 This library is based on Material UI's themes feature, so it imports themes and puts them into the provider. We also recommend using the `CssBaseline` component.
 
 ```tsx
-import {
-  createTheme,
-  ThemeProvider,
-} from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
-import { themeOptions } from '@lunit/design-system';
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import { themeOptions } from "@lunit/design-system";
 
 const theme = createTheme(themeOptions);
 
@@ -61,11 +58,8 @@ This library uses the `Pretendard` font-family by default. The [Pretendard font]
 const theme = createTheme(
   deepmerge(themeOptions, {
     typography: {
-      fontFamily: [
-        'Pretendard Variable',
-        'sans-serif',
-      ]
-    }
+      fontFamily: ["Pretendard Variable", "sans-serif"],
+    },
   })
 );
 ```
@@ -85,4 +79,4 @@ This library provides a variety of components that are used in Lunit's products.
 ## Support
 
 - Github: [Create a new issue](https://github.com/lunit-io/design-system/issues/new)
-- Slack: #tf_design_system
+- Slack: #tf_design_system