@lunit/design-system 1.0.0-a.5 → 1.0.0-b.2

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

@@ -4,7 +4,7 @@ import type { ButtonProps } from "./Button.types";
 import type { ToggleButtonProps } from "../ToggleButton/ToggleButton.types";
 import type { Typography } from "@mui/material/styles/createTypography";
 type KindStyleParams = Pick<ButtonProps, "kind" | "color"> & {
-    token: ColorToken;
+    lunit_token: ColorToken;
 };
 type CustomButtonProps = ButtonProps & {
     hasIconOnly: boolean;
@@ -15,7 +15,7 @@ type sizeStyleParams = Pick<CustomButtonProps, "size" | "hasIconOnly" | "kind">
 export declare const sizeStyle: ({ size, kind, hasIconOnly, typography, selected, }: sizeStyleParams) => {
     padding?: string | undefined;
     minWidth?: string | undefined;
-    minHeight?: string | undefined;
+    height?: string | undefined;
     accentColor?: import("csstype").Property.AccentColor | undefined;
     alignContent?: import("csstype").Property.AlignContent | undefined;
     alignItems?: import("csstype").Property.AlignItems | undefined;
@@ -172,7 +172,6 @@ export declare const sizeStyle: ({ size, kind, hasIconOnly, typography, selected
     gridTemplateColumns?: string | number | undefined;
     gridTemplateRows?: string | number | undefined;
     hangingPunctuation?: import("csstype").Property.HangingPunctuation | undefined;
-    height?: string | number | undefined;
     hyphenateCharacter?: import("csstype").Property.HyphenateCharacter | undefined;
     hyphenateLimitChars?: import("csstype").Property.HyphenateLimitChars | undefined;
     hyphens?: import("csstype").Property.Hyphens | undefined;
@@ -232,6 +231,7 @@ export declare const sizeStyle: ({ size, kind, hasIconOnly, typography, selected
     maxLines?: import("csstype").Property.MaxLines | undefined;
     maxWidth?: string | number | undefined;
     minBlockSize?: string | number | undefined;
+    minHeight?: string | number | undefined;
     minInlineSize?: string | number | undefined;
     mixBlendMode?: import("csstype").Property.MixBlendMode | undefined;
     motionDistance?: string | number | undefined;
@@ -822,7 +822,7 @@ export declare const sizeStyle: ({ size, kind, hasIconOnly, typography, selected
     textAnchor?: import("csstype").Property.TextAnchor | undefined;
     vectorEffect?: import("csstype").Property.VectorEffect | undefined;
 };
-export declare const kindStyle: ({ kind, color, token }: KindStyleParams) => {
+export declare const kindStyle: ({ kind, color, lunit_token }: KindStyleParams) => {
     color?: import("csstype").Property.Color | undefined;
     border?: string | undefined;
     "&:hover"?: {
@@ -852,8 +852,8 @@ export declare const kindStyle: ({ kind, color, token }: KindStyleParams) => {
     } | undefined;
     backgroundColor?: import("csstype").Property.Color | undefined;
 };
-export declare const commonStyle: ({ token }: {
-    token: ColorToken;
+export declare const commonStyle: ({ lunit_token }: {
+    lunit_token: ColorToken;
 }) => {
     readonly fontWeight: "500";
     readonly borderRadius: "8px";
@@ -911,7 +911,7 @@ export declare const CustomButton: import("@emotion/styled").StyledComponent<{
     size?: "small" | "medium" | "large" | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "text" | "contained" | "outlined" | undefined;
+    variant?: "text" | "outlined" | "contained" | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;

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

@@ -1,5 +1,10 @@
 /// <reference types="react" />
-import type { ButtonProps as MuiButtonProps } from "@mui/material";
+import type { ButtonProps as MuiButtonProps, ButtonTypeMap as MuiButtonTypeMap } from "@mui/material";
+import type { OverridableComponent } from "@mui/material/OverridableComponent";
+/**
+ * TODO: Omit 을 사용할 경우 component prop 타입 추론이 안되는 이슈 발생
+ * https://github.com/lunit-io/design-system/pull/133#discussion_r1354277785
+ * */
 interface BaseButtonProps extends Omit<MuiButtonProps, "variant"> {
     icon?: React.ReactNode;
 }
@@ -16,4 +21,9 @@ interface OutlinedButtonProps extends BaseButtonProps {
     color?: "primary" | "secondary";
 }
 export type ButtonProps = ContainedButtonProps | GhostButtonProps | OutlinedButtonProps;
+export type ButtonTypeMap<P = {}, D extends React.ElementType = MuiButtonTypeMap["defaultComponent"]> = {
+    props: P & ButtonProps;
+    defaultComponent: D;
+};
+export type ButtonType = OverridableComponent<ButtonTypeMap>;
 export {};

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

@@ -1,3 +1,3 @@
-import type { ChipProps } from "./Chip.types";
-declare const Chip: (props: ChipProps) => import("react/jsx-runtime").JSX.Element;
+import type { ChipType } from "./Chip.types";
+declare const Chip: ChipType;
 export default Chip;

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

@@ -19,7 +19,7 @@ export declare const StyledOutlinedChip: import("@emotion/styled").StyledCompone
     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;
-}, "icon" | keyof import("@mui/material/OverridableComponent").CommonProps | "label" | "tabIndex" | "color" | "children" | "disabled" | "sx" | "size" | "variant" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & OutlinedChipProps, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "label" | "tabIndex" | "color" | "children" | "disabled" | "sx" | "size" | "variant" | "icon" | "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;
@@ -38,7 +38,7 @@ export declare const StyledContainedChipBase: import("@emotion/styled").StyledCo
     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;
-}, "icon" | keyof import("@mui/material/OverridableComponent").CommonProps | "label" | "tabIndex" | "color" | "children" | "disabled" | "sx" | "size" | "variant" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "label" | "tabIndex" | "color" | "children" | "disabled" | "sx" | "size" | "variant" | "icon" | "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;
@@ -57,7 +57,7 @@ export declare const StyledContainedChipEnable: import("@emotion/styled").Styled
     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;
-}, "icon" | keyof import("@mui/material/OverridableComponent").CommonProps | "label" | "tabIndex" | "color" | "children" | "disabled" | "sx" | "size" | "variant" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps & EnableContainedChipProps, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "label" | "tabIndex" | "color" | "children" | "disabled" | "sx" | "size" | "variant" | "icon" | "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;
@@ -76,4 +76,4 @@ export declare const StyledContainedChipDeletable: import("@emotion/styled").Sty
     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;
-}, "icon" | keyof import("@mui/material/OverridableComponent").CommonProps | "label" | "tabIndex" | "color" | "children" | "disabled" | "sx" | "size" | "variant" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "label" | "tabIndex" | "color" | "children" | "disabled" | "sx" | "size" | "variant" | "icon" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { CHIP_COLORS } from "./consts";
-import type { ChipProps as MuiChipProps } from "@mui/material";
+import type { ChipProps as MuiChipProps, ChipTypeMap as MuiChipTypeMap } from "@mui/material";
+import type { OverridableComponent } from "@mui/material/OverridableComponent";
 type ColorKeys = keyof typeof CHIP_COLORS;
 export type ChipColor = (typeof CHIP_COLORS)[ColorKeys];
 export type ChipThumbnail = string | JSX.Element;
@@ -35,4 +36,9 @@ export interface DeletableContainedChipProps extends BaseContainedChipProps {
 }
 export type ContainedChipProps = EnableContainedChipProps | ReadOnlyContainedChipProps | DeletableContainedChipProps;
 export type ChipProps = OutlinedChipProps | ContainedChipProps;
+export type ChipTypeMap<P = {}, D extends React.ElementType = MuiChipTypeMap["defaultComponent"]> = {
+    props: P & ChipProps;
+    defaultComponent: D;
+};
+export type ChipType = OverridableComponent<ChipTypeMap>;
 export {};

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

@@ -1,3 +1,4 @@
-import type { TextFieldProps } from "./TextField.types";
-declare const TextField: (props: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
+import React from "react";
+import type { MultiTextFieldProps, SingleTextFieldProps } from "./TextField.types";
+declare const TextField: React.ForwardRefExoticComponent<(Omit<SingleTextFieldProps, "ref"> | Omit<MultiTextFieldProps, "ref">) & React.RefAttributes<HTMLDivElement>>;
 export default TextField;

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

@@ -1,6 +1,6 @@
 import { SwitchProps } from "@mui/material";
 interface ToggleProps extends SwitchProps {
-    toggleSize: 'medium' | 'large';
+    toggleSize: "medium" | "large";
 }
 export declare const CommonToggle: import("@emotion/styled").StyledComponent<SwitchProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ToggleProps, {}, {}>;
 export declare const CommonIndeterminateToggle: import("@emotion/styled").StyledComponent<SwitchProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ToggleProps, {}, {}>;

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

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

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

@@ -1,7 +1 @@
-import Typography from "@mui/material/Typography";
-import type { TypographyPropsVariantOverridesType } from "../../foundation/Typography";
-declare module "@mui/material/Typography" {
-    interface TypographyPropsVariantOverrides extends TypographyPropsVariantOverridesType {
-    }
-}
-export default Typography;
+export { default } from "./Typography";

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

@@ -5,7 +5,7 @@ export type BaseColor = Record<keyof typeof base.blue, PaletteColor>;
 export type GreyColor = Record<keyof typeof base.grey, PaletteColor>;
 declare module "@mui/material/styles/createPalette" {
     interface PaletteOptions {
-        lunit?: {
+        lunit_global?: {
             grey: GreyColor;
             blue: BaseColor;
             green: BaseColor;
@@ -13,13 +13,14 @@ declare module "@mui/material/styles/createPalette" {
             lunit_teal: BaseColor;
             magenta: BaseColor;
             orange: BaseColor;
+            purple: BaseColor;
             red: BaseColor;
             yellow: BaseColor;
         };
-        token?: ColorToken;
+        lunit_token?: ColorToken;
     }
     interface Palette {
-        lunit: {
+        lunit_global: {
             grey: GreyColor;
             blue: BaseColor;
             green: BaseColor;
@@ -27,10 +28,11 @@ declare module "@mui/material/styles/createPalette" {
             lunit_teal: BaseColor;
             magenta: BaseColor;
             orange: BaseColor;
+            purple: BaseColor;
             red: BaseColor;
             yellow: BaseColor;
         };
-        token: ColorToken;
+        lunit_token: ColorToken;
     }
 }
 export declare const createColorCssBaseline: () => {
@@ -91,7 +93,7 @@ declare const paletteOptions: {
         A400: string;
         A700: string;
     };
-    lunit: {
+    lunit_global: {
         grey: GreyColor;
         blue: BaseColor;
         green: BaseColor;
@@ -99,10 +101,11 @@ declare const paletteOptions: {
         lunit_teal: BaseColor;
         magenta: BaseColor;
         orange: BaseColor;
+        purple: BaseColor;
         red: BaseColor;
         yellow: BaseColor;
     } | undefined;
-    token: {
+    lunit_token: {
         core: {
             bg_01: string;
             bg_02: string;

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

@@ -38,7 +38,7 @@ export declare const palette: {
         A400: string;
         A700: string;
     };
-    lunit: {
+    lunit_global: {
         grey: import("./colors").GreyColor;
         blue: import("./colors").BaseColor;
         green: import("./colors").BaseColor;
@@ -46,10 +46,11 @@ export declare const palette: {
         lunit_teal: import("./colors").BaseColor;
         magenta: import("./colors").BaseColor;
         orange: import("./colors").BaseColor;
+        purple: import("./colors").BaseColor;
         red: import("./colors").BaseColor;
         yellow: import("./colors").BaseColor;
     } | undefined;
-    token: {
+    lunit_token: {
         core: {
             bg_01: string;
             bg_02: string;

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export { default as theme } from "./theme";
+export { default as theme, themeOptions } from "./theme";
 export { base as baseColors } from "./foundation/colors";
 export { default as Alert } from "./components/Alert";
 export { default as Button } from "./components/Button";

package/dist/types/theme.d.ts

@@ -1,2 +1,4 @@
+import { ThemeOptions } from "@mui/material";
+export declare const themeOptions: ThemeOptions;
 declare const theme: import("@mui/material").Theme;
 export default theme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/design-system",
-  "version": "1.0.0-a.5",
+  "version": "1.0.0-b.2",
   "description": "Lunit Design System",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",

package/src/components/Alert/Alert.styled.ts

@@ -50,12 +50,12 @@ export const StyledAlertTitle = styled(MuiAlertTitle)(({ theme }) => ({
     fontWeight: 700,
     fontSize: "14px",
     lineHeight: "20px",
-    color: theme.palette.token.core.text_normal,
+    color: theme.palette.lunit_token.core.text_normal,
   },
 }));
 
 export const StyledAlertChildren = styled("div")(({ theme }) => ({
-  color: theme.palette.token.core.text_normal,
+  color: theme.palette.lunit_token.core.text_normal,
 }));
 
 export const StyledBottomAction = styled("div")({

package/src/components/Alert/Alert.utils.ts

@@ -6,13 +6,13 @@ export const getBackgroundColor = (
 ) => {
   switch (severity) {
     case "info":
-      return theme.palette.token.component.alert_info_bg;
+      return theme.palette.lunit_token.component.alert_info_bg;
     case "warning":
-      return theme.palette.token.component.alert_warning_bg;
+      return theme.palette.lunit_token.component.alert_warning_bg;
     case "error":
-      return theme.palette.token.component.alert_error_bg;
+      return theme.palette.lunit_token.component.alert_error_bg;
     default:
-      return theme.palette.token.component.alert_success_bg;
+      return theme.palette.lunit_token.component.alert_success_bg;
   }
 };
 
@@ -22,13 +22,13 @@ export const getBorderColor = (
 ) => {
   switch (severity) {
     case "info":
-      return theme.palette.token.component.alert_info_border;
+      return theme.palette.lunit_token.component.alert_info_border;
     case "warning":
-      return theme.palette.token.component.alert_warning_border;
+      return theme.palette.lunit_token.component.alert_warning_border;
     case "error":
-      return theme.palette.token.component.alert_error_border;
+      return theme.palette.lunit_token.component.alert_error_border;
     default:
-      return theme.palette.token.component.alert_success_border;
+      return theme.palette.lunit_token.component.alert_success_border;
   }
 };
 
@@ -38,12 +38,12 @@ export const getIconColor = (
 ) => {
   switch (severity) {
     case "info":
-      return theme.palette.token.core.icon_info_02;
+      return theme.palette.lunit_token.core.icon_info_02;
     case "warning":
-      return theme.palette.token.core.icon_warning_02;
+      return theme.palette.lunit_token.core.icon_warning_02;
     case "error":
-      return theme.palette.token.core.icon_error_02;
+      return theme.palette.lunit_token.core.icon_error_02;
     default:
-      return theme.palette.token.core.icon_success_02;
+      return theme.palette.lunit_token.core.icon_success_02;
   }
 };

package/src/components/Button/Button.styled.ts

@@ -12,7 +12,7 @@ import type { ToggleButtonProps } from "../ToggleButton/ToggleButton.types";
 import type { Typography } from "@mui/material/styles/createTypography";
 
 type KindStyleParams = Pick<ButtonProps, "kind" | "color"> & {
-  token: ColorToken;
+  lunit_token: ColorToken;
 };
 
 type CustomButtonProps = ButtonProps & { hasIconOnly: boolean };
@@ -40,7 +40,7 @@ export const sizeStyle = ({
         : getButtonPaddingBySizeAndKind({ kind, size, selected })
     }`,
     minWidth: "28px",
-    minHeight: "28px",
+    height: "28px",
   }),
   ...(size === "medium" && {
     ...typography.button2,
@@ -50,7 +50,7 @@ export const sizeStyle = ({
         : getButtonPaddingBySizeAndKind({ kind, size, selected })
     }`,
     minWidth: "36px",
-    minHeight: "36px",
+    height: "36px",
   }),
   ...(size === "large" && {
     ...typography.button1,
@@ -60,83 +60,83 @@ export const sizeStyle = ({
         : getButtonPaddingBySizeAndKind({ kind, size, selected })
     }`,
     minWidth: "44px",
-    minHeight: "44px",
+    height: "44px",
   }),
 });
 
-export const kindStyle = ({ kind, color, token }: KindStyleParams) => ({
+export const kindStyle = ({ kind, color, lunit_token }: KindStyleParams) => ({
   // kind: container
   ...(kind === "contained" &&
     color === "primary" && {
-      color: token.component.btn_primary_text_2,
-      backgroundColor: token.component.btn_primary_bg,
-      "&:hover": getHoverStyle(token.component.btn_primary_bg),
+      color: lunit_token.component.btn_primary_text_2,
+      backgroundColor: lunit_token.component.btn_primary_bg,
+      "&:hover": getHoverStyle(lunit_token.component.btn_primary_bg),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_primary_text_2,
+        color: lunit_token.component.btn_primary_text_2,
       },
     }),
   ...(kind === "contained" &&
     color === "secondary" && {
-      color: token.component.btn_secondary_text,
-      backgroundColor: token.component.btn_secondary_bg,
-      "&:hover": getHoverStyle(token.component.btn_secondary_bg),
+      color: lunit_token.component.btn_secondary_text,
+      backgroundColor: lunit_token.component.btn_secondary_bg,
+      "&:hover": getHoverStyle(lunit_token.component.btn_secondary_bg),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_secondary_text,
+        color: lunit_token.component.btn_secondary_text,
       },
     }),
   ...(kind === "contained" &&
     color === "error" && {
-      color: token.component.btn_primary_text_2,
-      backgroundColor: token.component.btn_error_bg,
-      "&:hover": getHoverStyle(token.component.btn_error_bg),
+      color: lunit_token.component.btn_primary_text_2,
+      backgroundColor: lunit_token.component.btn_error_bg,
+      "&:hover": getHoverStyle(lunit_token.component.btn_error_bg),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_primary_text_2,
+        color: lunit_token.component.btn_primary_text_2,
       },
     }),
   // kind: ghost
   ...(kind === "ghost" &&
     color === "primary" && {
-      color: token.component.btn_primary_text_1,
+      color: lunit_token.component.btn_primary_text_1,
       border: "none",
       "&:hover": getHoverStyle("none"),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_primary_text_1,
+        color: lunit_token.component.btn_primary_text_1,
       },
     }),
   ...(kind === "ghost" &&
     color === "secondary" && {
-      color: token.component.btn_secondary_text,
+      color: lunit_token.component.btn_secondary_text,
       border: "none",
       "&:hover": getHoverStyle("none"),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_secondary_text,
+        color: lunit_token.component.btn_secondary_text,
       },
     }),
   ...(kind === "ghost" &&
     color === "error" && {
-      color: token.component.btn_error_text,
+      color: lunit_token.component.btn_error_text,
       "&:hover": getHoverStyle("none"),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_error_text,
+        color: lunit_token.component.btn_error_text,
       },
     }),
   // kind: outlined
   ...(kind === "outlined" &&
     color === "primary" && {
-      color: token.component.btn_primary_text_1,
-      border: `${OUTLINED_BORDER_WIDTH}px solid ${token.component.btn_primary_border}`,
+      color: lunit_token.component.btn_primary_text_1,
+      border: `${OUTLINED_BORDER_WIDTH}px solid ${lunit_token.component.btn_primary_border}`,
       "&:hover": getHoverStyle("none"),
       "&:hover:before": {
         content: "''",
@@ -146,18 +146,18 @@ export const kindStyle = ({ kind, color, token }: KindStyleParams) => ({
         width: "calc(100% + 2px)",
         height: "calc(100% + 2px)",
         zIndex: -1,
-        backgroundColor: token.core.hover,
+        backgroundColor: lunit_token.core.hover,
         borderRadius,
       },
       "&.Mui-disabled": {
         opacity: 0.38,
-        color: token.component.btn_primary_text_1,
+        color: lunit_token.component.btn_primary_text_1,
       },
     }),
   ...(kind === "outlined" &&
     color === "secondary" && {
-      color: token.component.btn_secondary_text,
-      border: `${OUTLINED_BORDER_WIDTH}px solid ${token.component.btn_secondary_border}`,
+      color: lunit_token.component.btn_secondary_text,
+      border: `${OUTLINED_BORDER_WIDTH}px solid ${lunit_token.component.btn_secondary_border}`,
       "&:hover": getHoverStyle("none"),
       "&:hover:before": {
         content: "''",
@@ -167,17 +167,17 @@ export const kindStyle = ({ kind, color, token }: KindStyleParams) => ({
         width: "calc(100% + 2px)",
         height: "calc(100% + 2px)",
         zIndex: -1,
-        backgroundColor: token.core.hover,
+        backgroundColor: lunit_token.core.hover,
         borderRadius,
       },
       "&.Mui-disabled": {
         opacity: 0.38,
-        color: token.component.btn_secondary_text,
+        color: lunit_token.component.btn_secondary_text,
       },
     }),
 });
 
-export const commonStyle = ({ token }: { token: ColorToken }) =>
+export const commonStyle = ({ lunit_token }: { lunit_token: ColorToken }) =>
   ({
     fontWeight: "500",
     borderRadius,
@@ -189,7 +189,7 @@ export const commonStyle = ({ token }: { token: ColorToken }) =>
         height: `calc(100% + ${PADDING_OF_FOCUS}px)`,
         content: '""',
         borderRadius: "11px",
-        border: `1px solid ${token.core.focused}`,
+        border: `1px solid ${lunit_token.core.focused}`,
         boxSizing: "border-box",
       },
     },
@@ -201,7 +201,7 @@ export const commonStyle = ({ token }: { token: ColorToken }) =>
       width: "100%",
       height: "100%",
       zIndex: -1,
-      backgroundColor: token.core.hover,
+      backgroundColor: lunit_token.core.hover,
       borderRadius,
     },
   } as const);
@@ -237,16 +237,16 @@ export const CustomButton = styled(MuiButton, {
   ({
     theme: {
       typography,
-      palette: { token },
+      palette: { lunit_token },
     },
     kind,
     size,
     color,
     hasIconOnly,
   }) => ({
-    ...commonStyle({ token }),
+    ...commonStyle({ lunit_token }),
     ...iconStyle({ size, hasIconOnly }),
     ...sizeStyle({ size, kind, hasIconOnly, typography }),
-    ...kindStyle({ kind, color, token }),
+    ...kindStyle({ kind, color, lunit_token }),
   })
 );

package/src/components/Button/Button.tsx

@@ -2,9 +2,9 @@ import React from "react";
 
 import { CustomButton } from "./Button.styled";
 
-import type { ButtonProps } from "./Button.types";
+import type { ButtonType, ButtonProps } from "./Button.types";
 
-const Button = (props: ButtonProps) => {
+const Button: ButtonType = (props: ButtonProps) => {
   const {
     size = "small",
     color = "primary",

package/src/components/Button/Button.types.ts

@@ -1,5 +1,13 @@
-import type { ButtonProps as MuiButtonProps } from "@mui/material";
+import type {
+  ButtonProps as MuiButtonProps,
+  ButtonTypeMap as MuiButtonTypeMap,
+} from "@mui/material";
+import type { OverridableComponent } from "@mui/material/OverridableComponent";
 
+/**
+ * TODO: Omit 을 사용할 경우 component prop 타입 추론이 안되는 이슈 발생
+ * https://github.com/lunit-io/design-system/pull/133#discussion_r1354277785
+ * */
 interface BaseButtonProps extends Omit<MuiButtonProps, "variant"> {
   icon?: React.ReactNode;
 }
@@ -23,3 +31,13 @@ export type ButtonProps =
   | ContainedButtonProps
   | GhostButtonProps
   | OutlinedButtonProps;
+
+export type ButtonTypeMap<
+  P = {},
+  D extends React.ElementType = MuiButtonTypeMap["defaultComponent"]
+> = {
+  props: P & ButtonProps;
+  defaultComponent: D;
+};
+
+export type ButtonType = OverridableComponent<ButtonTypeMap>;