@lunit/design-system 2.0.2 → 2.1.0

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

@@ -6,7 +6,7 @@ export declare const StyledOutlinedChip: import("@emotion/styled").StyledCompone
     children?: null | undefined;
     classes?: Partial<import("@mui/material").ChipClasses> | undefined;
     clickable?: boolean | undefined;
-    color?: "success" | "info" | "warning" | "error" | "default" | "primary" | "secondary" | 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;
@@ -16,16 +16,16 @@ export declare const StyledOutlinedChip: import("@emotion/styled").StyledCompone
     skipFocusWhenDisabled?: boolean | undefined;
     sx?: import("@mui/material").SxProps<Theme> | undefined;
     tabIndex?: number | undefined;
-    variant?: "filled" | "outlined" | 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;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "color" | "icon" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & OutlinedChipProps, {}, {}>;
+}, "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?: "success" | "info" | "warning" | "error" | "default" | "primary" | "secondary" | 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;
@@ -35,16 +35,16 @@ export declare const StyledContainedChipBase: import("@emotion/styled").StyledCo
     skipFocusWhenDisabled?: boolean | undefined;
     sx?: import("@mui/material").SxProps<Theme> | undefined;
     tabIndex?: number | undefined;
-    variant?: "filled" | "outlined" | 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;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "color" | "icon" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;
+}, "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?: "success" | "info" | "warning" | "error" | "default" | "primary" | "secondary" | 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;
@@ -54,16 +54,16 @@ export declare const StyledContainedChipEnable: import("@emotion/styled").Styled
     skipFocusWhenDisabled?: boolean | undefined;
     sx?: import("@mui/material").SxProps<Theme> | undefined;
     tabIndex?: number | undefined;
-    variant?: "filled" | "outlined" | 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;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "color" | "icon" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps & EnableContainedChipProps, {}, {}>;
+}, "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?: "success" | "info" | "warning" | "error" | "default" | "primary" | "secondary" | 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;
@@ -73,7 +73,7 @@ export declare const StyledContainedChipDeletable: import("@emotion/styled").Sty
     skipFocusWhenDisabled?: boolean | undefined;
     sx?: import("@mui/material").SxProps<Theme> | undefined;
     tabIndex?: number | undefined;
-    variant?: "filled" | "outlined" | 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;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "color" | "icon" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;
+}, "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, {}, {}>;

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

@@ -11,7 +11,6 @@ export interface DialogBase {
     titleVariant?: TypographyProps["variant"];
     children: React.ReactNode;
     actions?: React.ReactNode;
-    enableBackButtonClose?: boolean;
     enableBackdropClose?: boolean;
     size?: "small" | "medium";
     sx?: SxProps;
@@ -21,13 +20,11 @@ export interface DialogBase {
 export interface PassiveDialogType extends DialogBase {
     type: "passive";
     actions?: undefined;
-    enableBackButtonClose?: true;
     enableBackdropClose?: true;
 }
 export interface ActionDialogType extends DialogBase {
     type: "action";
     actions: React.ReactNode;
-    enableBackButtonClose?: false;
     enableBackdropClose?: boolean;
 }
 export interface PassiveModalProps extends PassiveDialogType {

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

@@ -1,2 +1,4 @@
-declare const Dropdown: () => import("react/jsx-runtime").JSX.Element;
+import React from "react";
+import { DropdownProps } from "./Dropdown.types";
+declare const Dropdown: React.ForwardRefExoticComponent<Omit<DropdownProps, "ref"> & React.RefAttributes<unknown>>;
 export default Dropdown;

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

@@ -0,0 +1,41 @@
+/// <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"> & {
+    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>, {}, {}>;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { MenuItemProps, SelectProps } from "@mui/material";
+export interface DropdownProps extends Omit<SelectProps, "size" | "variant" | "placeholder"> {
+    select?: "single" | "multiple";
+    size?: "small" | "medium" | "large";
+}
+export interface DropdownItemProps extends MenuItemProps {
+    leftIcon?: JSX.Element;
+    rightText?: string;
+    isFilledStyle?: boolean;
+}

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

@@ -0,0 +1,13 @@
+import { SxProps } from "@mui/material";
+import { DropdownItemProps } from "./Dropdown.types";
+export declare function DropdownItem(props: DropdownItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownDivider({ sx }: {
+    sx?: SxProps;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownSubtitle({ title, sx, }: {
+    title: string;
+    sx?: SxProps;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace DropdownSubtitle {
+    var muiSkipListHighlight: boolean;
+}

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

@@ -1 +1,3 @@
 export { default } from "./Dropdown";
+export { DropdownItem, DropdownDivider, DropdownSubtitle, } from "./DropdownItem";
+export type { DropdownProps, DropdownItemProps } from "./Dropdown.types";

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

@@ -6,7 +6,7 @@ type CustomToggleButtonProps = ToggleButtonProps & {
 export declare const CustomToggleButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ToggleButtonClasses> | undefined;
-    color?: "success" | "info" | "warning" | "error" | "standard" | "primary" | "secondary" | undefined;
+    color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "standard" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     fullWidth?: boolean | undefined;
@@ -34,7 +34,7 @@ export declare const CustomToggleButton: import("@emotion/styled").StyledCompone
     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;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "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, {}, {}>;
+}, "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 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/foundation/Typography/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { TypographyOptions } from "@mui/material/styles/createTypography";
-type DSVariants = "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "body1_16_semibold" | "body1_16_regular" | "body2_14_bold" | "body2_14_medium" | "body2_14_regular" | "body3_12_semibold" | "body3_12_regular" | "button1" | "button2";
+type DSVariants = "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "body1_16_semibold" | "body1_16_regular" | "body2_14_bold" | "body2_14_medium" | "body2_14_regular" | "body3_12_semibold" | "body3_12_regular" | "body_m2" | "body_reg6" | "body_reg8" | "small_body_sb1" | "small_body_m2" | "button1" | "button2";
 type DSVariantsType = Record<DSVariants, React.CSSProperties>;
 declare module "@mui/material/styles" {
     interface TypographyVariants extends DSVariantsType {
@@ -24,6 +24,11 @@ export declare const typographyDefaultProps: {
         body2_14_regular: string;
         body3_12_semibold: string;
         body3_12_regular: string;
+        body_m2: string;
+        body_reg6: string;
+        body_reg8: string;
+        small_body_sb1: string;
+        small_body_m2: string;
     };
 };
 export declare const createTypographyCssBaseline: () => {
@@ -43,6 +48,12 @@ export declare const createTypographyCssBaseline: () => {
         "--caption-font-weight": "var(--font-weight-medium)";
         "--caption-font-size": "12px";
         "--caption-line-height": "16px";
+        "--small_body_sb1-font-weight": "var(--font-weight-semibold)";
+        "--small_body_sb1-font-size": "12px";
+        "--small_body_sb1-line-height": "16px";
+        "--small_body_m2-font-weight": "var(--font-weight-medium)";
+        "--small_body_m2-font-size": "12px";
+        "--small_body_m2-line-height": "20px";
         "--body1-16-semibold-font-weight": "var(--font-weight-semibold)";
         "--body1-16-semibold-font-size": "16px";
         "--body1-16-semibold-line-height": "24px";
@@ -64,6 +75,15 @@ export declare const createTypographyCssBaseline: () => {
         "--body3-12-regular-font-weight": "var(--font-weight-regular)";
         "--body3-12-regular-font-size": "12.4px";
         "--body3-12-regular-line-height": "16px";
+        "--body_m2-font-weight": "var(--font-weight-medium)";
+        "--body_m2-font-size": "13px";
+        "--body_m2-line-height": "18px";
+        "--body_reg6-font-weight": "var(--font-weight-regular)";
+        "--body_reg6-font-size": "13px";
+        "--body_reg6-line-height": "18px";
+        "--body_reg8-font-weight": "var(--font-weight-regular)";
+        "--body_reg8-font-size": "12px";
+        "--body_reg8-line-height": "16px";
         "--headline1-font-weight": "var(--font-weight-semibold)";
         "--headline1-font-size": "52px";
         "--headline1-line-height": "68px";

package/dist/types/foundation/Typography/tokens.d.ts

@@ -13,6 +13,12 @@ export declare const cssVariables: {
     "--caption-font-weight": "var(--font-weight-medium)";
     "--caption-font-size": "12px";
     "--caption-line-height": "16px";
+    "--small_body_sb1-font-weight": "var(--font-weight-semibold)";
+    "--small_body_sb1-font-size": "12px";
+    "--small_body_sb1-line-height": "16px";
+    "--small_body_m2-font-weight": "var(--font-weight-medium)";
+    "--small_body_m2-font-size": "12px";
+    "--small_body_m2-line-height": "20px";
     "--body1-16-semibold-font-weight": "var(--font-weight-semibold)";
     "--body1-16-semibold-font-size": "16px";
     "--body1-16-semibold-line-height": "24px";
@@ -34,6 +40,15 @@ export declare const cssVariables: {
     "--body3-12-regular-font-weight": "var(--font-weight-regular)";
     "--body3-12-regular-font-size": "12.4px";
     "--body3-12-regular-line-height": "16px";
+    "--body_m2-font-weight": "var(--font-weight-medium)";
+    "--body_m2-font-size": "13px";
+    "--body_m2-line-height": "18px";
+    "--body_reg6-font-weight": "var(--font-weight-regular)";
+    "--body_reg6-font-size": "13px";
+    "--body_reg6-line-height": "18px";
+    "--body_reg8-font-weight": "var(--font-weight-regular)";
+    "--body_reg8-font-size": "12px";
+    "--body_reg8-line-height": "16px";
     "--headline1-font-weight": "var(--font-weight-semibold)";
     "--headline1-font-size": "52px";
     "--headline1-line-height": "68px";

package/dist/types/foundation/colors/base/blue.d.ts

@@ -1,6 +1,7 @@
 export declare const blue: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;
@@ -13,6 +14,7 @@ export declare const blue: {
 export declare const blueText: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;

package/dist/types/foundation/colors/base/green.d.ts

@@ -1,6 +1,7 @@
 export declare const green: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;
@@ -13,6 +14,7 @@ export declare const green: {
 export declare const greenText: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;

package/dist/types/foundation/colors/base/grey.d.ts

@@ -6,14 +6,21 @@ export declare const grey: {
     20: string;
     25: string;
     30: string;
+    35: string;
     40: string;
+    45: string;
     50: string;
+    55: string;
     60: string;
+    65: string;
     70: string;
     75: string;
     80: string;
+    82: string;
     85: string;
+    88: string;
     90: string;
+    93: string;
     95: string;
     100: string;
 };
@@ -25,13 +32,21 @@ export declare const greyText: {
     20: string;
     25: string;
     30: string;
+    35: string;
     40: string;
+    45: string;
     50: string;
+    55: string;
     60: string;
+    65: string;
     70: string;
+    75: string;
     80: string;
+    82: string;
     85: string;
+    88: string;
     90: string;
+    93: string;
     95: string;
     100: string;
 };

package/dist/types/foundation/colors/base/lunitTeal.d.ts

@@ -1,6 +1,7 @@
 export declare const lunit_teal: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;
@@ -13,6 +14,7 @@ export declare const lunit_teal: {
 export declare const lunit_tealText: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;

package/dist/types/foundation/colors/base/magenta.d.ts

@@ -1,6 +1,7 @@
 export declare const magenta: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;
@@ -13,6 +14,7 @@ export declare const magenta: {
 export declare const magentaText: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;

package/dist/types/foundation/colors/base/orange.d.ts

@@ -1,6 +1,7 @@
 export declare const orange: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;
@@ -13,6 +14,7 @@ export declare const orange: {
 export declare const orangeText: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;

package/dist/types/foundation/colors/base/purple.d.ts

@@ -1,6 +1,7 @@
 export declare const purple: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;
@@ -13,6 +14,7 @@ export declare const purple: {
 export declare const purpleText: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;

package/dist/types/foundation/colors/base/red.d.ts

@@ -1,6 +1,7 @@
 export declare const red: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;
@@ -13,6 +14,7 @@ export declare const red: {
 export declare const redText: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;

package/dist/types/foundation/colors/base/yellow.d.ts

@@ -1,6 +1,7 @@
 export declare const yellow: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;
@@ -13,6 +14,7 @@ export declare const yellow: {
 export declare const yellowText: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;

package/dist/types/foundation/colors/index.d.ts

@@ -125,8 +125,11 @@ declare const paletteOptions: {
             icon_warning_02: string;
             icon_info_02: string;
             hover: string;
+            status_hover: string;
             focused: string;
+            status_focused: string;
             selected: string;
+            status_selected: string;
             shadow_01: string;
             shadow_02: string;
             shadow_03: string;

package/dist/types/foundation/colors/types.d.ts

@@ -20,8 +20,11 @@ export interface ColorToken {
         icon_warning_02: string;
         icon_info_02: string;
         hover: string;
+        status_hover: string;
         focused: string;
+        status_focused: string;
         selected: string;
+        status_selected: string;
         shadow_01: string;
         shadow_02: string;
         shadow_03: string;

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

@@ -76,8 +76,11 @@ export declare const palette: {
             icon_warning_02: string;
             icon_info_02: string;
             hover: string;
+            status_hover: string;
             focused: string;
+            status_focused: string;
             selected: string;
+            status_selected: string;
             shadow_01: string;
             shadow_02: string;
             shadow_03: string;

package/dist/types/index.d.ts

@@ -7,7 +7,7 @@ export { default as Checkbox } from "./components/Checkbox";
 export { default as Dialog } from "./components/Dialog";
 export { default as DataTable } from "./components/DataTable";
 export { default as DatePicker } from "./components/DatePicker";
-export { default as Dropdown } from "./components/Dropdown";
+export { default as Dropdown, DropdownItem, DropdownDivider, DropdownSubtitle, } from "./components/Dropdown";
 export { default as FormLabel } from "./components/FormLabel";
 export { default as Radio } from "./components/Radio";
 export { default as RadioGroup } from "./components/RadioGroup";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/design-system",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "Lunit Design System",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
@@ -102,4 +102,4 @@
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   }
-}
+}

package/src/components/Chip/Chip.styled.ts

@@ -10,19 +10,14 @@ import type {
 } from "./Chip.types";
 
 const COMMON_STYLES = {
-  "&.MuiChip-root": {
-    height: "22px",
-    width: "auto",
-    minWidth: "22px",
-    boxShadow: "none",
-  },
+  height: "22px",
+  width: "auto",
+  minWidth: "22px",
+  boxShadow: "none",
   "&.Mui-disabled": {
     opacity: 1,
   },
   "& .MuiChip-label": {
-    display: "flex",
-    alignItems: "center",
-    textAlign: "center",
     padding: 0,
     marginInline: "8px",
   },
@@ -117,16 +112,14 @@ export const StyledContainedChipEnable = styled(StyledContainedChipBase, {
    * Setting the z-index of the chip to 0 and the z-index of the pseudo element to -1
    * allows the pseudo element(hover layer) to be rendered between the chip and the chip's children.
    */
-  "&.MuiChip-root": {
-    position: "relative",
-    left: 0,
-    right: 0,
-    zIndex: 0,
-  },
+  position: "relative",
+  left: 0,
+  right: 0,
+  zIndex: 0,
   "&:hover": {
     backgroundColor: getColorToken("bg", theme, color),
   },
-  "&.MuiChip-root:hover::before": {
+  "&:hover::before": {
     position: "absolute",
     zIndex: -1,
     content: '""',

package/src/components/Dialog/Dialog.tsx

@@ -26,7 +26,6 @@ export interface DialogBase {
   titleVariant?: TypographyProps["variant"];
   children: React.ReactNode;
   actions?: React.ReactNode;
-  enableBackButtonClose?: boolean; // only for passive dialog
   enableBackdropClose?: boolean;
   size?: "small" | "medium"; // default "small"
   sx?: SxProps;
@@ -37,13 +36,11 @@ export interface DialogBase {
 export interface PassiveDialogType extends DialogBase {
   type: "passive";
   actions?: undefined;
-  enableBackButtonClose?: true;
   enableBackdropClose?: true;
 }
 export interface ActionDialogType extends DialogBase {
   type: "action";
   actions: React.ReactNode;
-  enableBackButtonClose?: false;
   enableBackdropClose?: boolean;
 }
 
@@ -89,16 +86,11 @@ function Dialog(props: DialogProps) {
     function handleEscClose(event: KeyboardEvent) {
       if (event.key === "Escape") onClose();
     }
-    function handleBackButtonClose(event: KeyboardEvent) {
-      if (event.key === "Backspace") onClose();
-    }
 
     document.addEventListener("keydown", handleEscClose);
-    document.addEventListener("keydown", handleBackButtonClose);
 
     return () => {
       document.removeEventListener("keydown", handleEscClose);
-      document.removeEventListener("keydown", handleBackButtonClose);
     };
   }, [isOpen, isPassiveModal, onClose]);