@lunit/design-system 1.0.0-a.3 → 1.0.0-a.5

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

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 import type { SxProps } from "@mui/material";
 interface TextFieldProps {
     sx?: SxProps;
     icon: JSX.Element;
     onIconClick?: () => void;
 }
-declare const TextFieldIcon: ({ sx, icon, onIconClick }: TextFieldProps) => JSX.Element;
+declare const TextFieldIcon: ({ sx, icon, onIconClick }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default TextFieldIcon;

package/dist/types/components/Toast/Toast.utils.d.ts

@@ -1,2 +1,2 @@
-import type { AlertColor } from "@mui/material";
-export declare const getIconColor: (severity: AlertColor | undefined) => import("csstype").Property.Color | undefined;
+import type { AlertColor, Theme } from "@mui/material";
+export declare const getIconColor: (theme: Theme, severity: AlertColor | undefined) => import("csstype").Property.Color | undefined;

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

@@ -1 +1,2 @@
-export { default as Toast } from './Toast';
+export { default } from "./Toast";
+export type { ToastProps } from "./Toast.types";

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

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

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

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

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?: "primary" | "secondary" | "error" | "warning" | "success" | "info" | "standard" | undefined;
+    color?: "primary" | "secondary" | "error" | "success" | "info" | "warning" | "standard" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     fullWidth?: boolean | undefined;
@@ -34,6 +34,6 @@ 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;
-}, "color" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "tabIndex" | "onChange" | "onClick" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "value" | "size" | "selected" | "disableFocusRipple" | "fullWidth"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CustomToggleButtonProps, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "onChange" | "onClick" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "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 {};

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

@@ -1,3 +1,3 @@
 import { ToggleButtonGroupProps } from "@mui/material/ToggleButtonGroup";
-declare const ToggleButtonGroup: ({ size, ...props }: ToggleButtonGroupProps) => JSX.Element;
+declare const ToggleButtonGroup: ({ size, ...props }: ToggleButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
 export default ToggleButtonGroup;

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

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

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

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

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

@@ -8,11 +8,7 @@ declare module "@mui/material/styles" {
     interface TypographyVariantsOptions extends Partial<DSVariantsType> {
     }
 }
-type TypographyPropsVariantOverridesType = Record<DSVariants, true>;
-declare module "@mui/material/Typography" {
-    interface TypographyPropsVariantOverrides extends TypographyPropsVariantOverridesType {
-    }
-}
+export type TypographyPropsVariantOverridesType = Record<DSVariants, true>;
 declare const typographyOptions: TypographyOptions;
 export declare const typographyDefaultProps: {
     variantMapping: {

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

@@ -131,17 +131,15 @@ declare const paletteOptions: {
             shadow_04: string;
         };
         component: {
-            btn_contained_primary_bg: string;
-            btn_contained_primary_text: string;
-            btn_contained_secondary_bg: string;
-            btn_contained_secondary_text: string;
-            btn_contained_error_bg: string;
-            btn_contained_error_text: string;
-            btn_outlined_primary_border: string;
-            btn_outlined_primary_text: string;
-            btn_ghost_primary_text: string;
-            btn_ghost_secondary_text: string;
-            btn_ghost_error_text: string;
+            btn_primary_bg: string;
+            btn_secondary_bg: string;
+            btn_error_bg: string;
+            btn_primary_border: string;
+            btn_secondary_border: string;
+            btn_primary_text_1: string;
+            btn_primary_text_2: string;
+            btn_secondary_text: string;
+            btn_error_text: string;
             btn_selected_primary_bg: string;
             btn_selected_primary_text: string;
             btn_selected_secondary_bg: string;

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

@@ -29,17 +29,15 @@ export interface ColorToken {
         shadow_04: CSSPropertyColor;
     };
     component: {
-        btn_contained_primary_bg: CSSPropertyColor;
-        btn_contained_primary_text: CSSPropertyColor;
-        btn_contained_secondary_bg: CSSPropertyColor;
-        btn_contained_secondary_text: CSSPropertyColor;
-        btn_contained_error_bg: CSSPropertyColor;
-        btn_contained_error_text: CSSPropertyColor;
-        btn_outlined_primary_border: CSSPropertyColor;
-        btn_outlined_primary_text: CSSPropertyColor;
-        btn_ghost_primary_text: CSSPropertyColor;
-        btn_ghost_secondary_text: CSSPropertyColor;
-        btn_ghost_error_text: CSSPropertyColor;
+        btn_primary_bg: CSSPropertyColor;
+        btn_secondary_bg: CSSPropertyColor;
+        btn_error_bg: CSSPropertyColor;
+        btn_primary_border: CSSPropertyColor;
+        btn_secondary_border: CSSPropertyColor;
+        btn_primary_text_1: CSSPropertyColor;
+        btn_primary_text_2: CSSPropertyColor;
+        btn_secondary_text: CSSPropertyColor;
+        btn_error_text: CSSPropertyColor;
         btn_selected_primary_bg: CSSPropertyColor;
         btn_selected_primary_text: CSSPropertyColor;
         btn_selected_secondary_bg: CSSPropertyColor;

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

@@ -78,17 +78,15 @@ export declare const palette: {
             shadow_04: string;
         };
         component: {
-            btn_contained_primary_bg: string;
-            btn_contained_primary_text: string;
-            btn_contained_secondary_bg: string;
-            btn_contained_secondary_text: string;
-            btn_contained_error_bg: string;
-            btn_contained_error_text: string;
-            btn_outlined_primary_border: string;
-            btn_outlined_primary_text: string;
-            btn_ghost_primary_text: string;
-            btn_ghost_secondary_text: string;
-            btn_ghost_error_text: string;
+            btn_primary_bg: string;
+            btn_secondary_bg: string;
+            btn_error_bg: string;
+            btn_primary_border: string;
+            btn_secondary_border: string;
+            btn_primary_text_1: string;
+            btn_primary_text_2: string;
+            btn_secondary_text: string;
+            btn_error_text: string;
             btn_selected_primary_bg: string;
             btn_selected_primary_text: string;
             btn_selected_secondary_bg: string;

package/dist/types/index.d.ts

@@ -3,6 +3,7 @@ export { base as baseColors } from "./foundation/colors";
 export { default as Alert } from "./components/Alert";
 export { default as Button } from "./components/Button";
 export { default as Chip } from "./components/Chip";
+export { default as Checkbox } from "./components/Checkbox";
 export { default as DataTable } from "./components/DataTable";
 export { default as DatePicker } from "./components/DatePicker";
 export { default as Dropdown } from "./components/Dropdown";
@@ -11,7 +12,9 @@ export { default as Modal } from "./components/Modal";
 export { default as Radio } from "./components/Radio";
 export { default as RadioGroup } from "./components/RadioGroup";
 export { default as TextField } from "./components/TextField";
+export { default as Toast } from "./components/Toast";
 export { default as Toggle } from "./components/Toggle";
 export { default as ToggleButton } from "./components/ToggleButton";
 export { default as ToggleButtonGroup } from "./components/ToggleButtonGroup";
 export { default as Tooltip } from "./components/Tooltip";
+export { default as Typography } from "./components/Typography";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/design-system",
-  "version": "1.0.0-a.3",
+  "version": "1.0.0-a.5",
   "description": "Lunit Design System",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
@@ -37,7 +37,7 @@
   "scripts": {
     "build:transpile": "tsc -p tsconfig.build.json",
     "build:cjs": "webpack -c webpack/cjs.config.js",
-    "build": "yarn build:transpile && yarn build:cjs",
+    "build": "npm run build:transpile && npm run build:cjs",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "chromatic"
@@ -48,6 +48,11 @@
         "dependsOn": [
           "^build"
         ]
+      },
+      "build-storybook": {
+        "dependsOn": [
+          "^build"
+        ]
       }
     }
   },
@@ -61,27 +66,27 @@
     "@mui/icons-material": "^5.11.3",
     "@mui/material": "^5.11.3",
     "@mui/utils": "^5.11.3",
-    "@mui/x-date-pickers": "^5.0.16",
-    "@storybook/addon-actions": "^7.0.6",
-    "@storybook/addon-essentials": "^7.0.6",
-    "@storybook/addon-interactions": "^7.0.6",
-    "@storybook/addon-links": "^7.0.6",
-    "@storybook/addon-storysource": "^7.0.6",
-    "@storybook/blocks": "^7.0.6",
-    "@storybook/react": "^7.0.6",
-    "@storybook/react-webpack5": "^7.0.6",
+    "@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.6",
+    "@storybook/theming": "^7.0.21",
     "@types/lodash": "^4.14.182",
     "babel-loader": "^8.2.5",
     "chromatic": "^6.7.0",
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
     "mustache": "^4.2.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "storybook": "^7.0.6",
-    "storybook-addon-pseudo-states": "^2.0.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "storybook": "^7.0.21",
+    "storybook-addon-pseudo-states": "^2.0.1",
     "ts-loader": "^9.3.0",
     "typescript": "^4.6.4",
     "webpack": "^5.72.0",

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

@@ -8,37 +8,40 @@ import {
   getBorderColor,
   getBackgroundColor,
   getIconColor,
-} from "./Alert.utils.";
+} from "./Alert.utils";
 
-export const StyledAlert = styled(MuiAlert)<AlertProps>(({ severity }) => ({
-  "&.MuiAlert-root": {
-    display: "flex",
-    padding: "15px",
-    borderRadius: "8px",
-    border: `1px solid ${getBorderColor(severity)}`,
-    backgroundColor: getBackgroundColor(severity),
-    boxShadow: "none",
-  },
-  "& .MuiAlert-icon": {
-    padding: "4px",
-    fontSize: "20px",
-    marginRight: "16px",
-    color: `${getIconColor(severity)} !important`,
-  },
-  "& .MuiAlert-message": {
-    padding: "4px 0",
-    width: "100%",
-    minHeight: "28px",
-  },
-  "& .MuiAlert-action": {
-    margin: 0,
-    padding: 0,
-  },
-  "& .MuiSvgIcon-root": {
-    height: "20px",
-    width: "20px",
-  },
-}));
+export const StyledAlert = styled(MuiAlert)<AlertProps>(
+  ({ severity, theme }) => ({
+    "&.MuiAlert-root": {
+      display: "flex",
+      padding: "12px",
+      borderRadius: "8px",
+      border: `1px solid ${getBorderColor(theme, severity)}`,
+      backgroundColor: getBackgroundColor(theme, severity),
+      boxShadow: "none",
+    },
+    "& .MuiAlert-icon": {
+      padding: "4px",
+      marginRight: "0",
+      fontSize: "20px",
+      color: `${getIconColor(theme, severity)} !important`,
+    },
+    "& .MuiAlert-message": {
+      width: "100%",
+      minHeight: "28px",
+      padding: "4px 0 0",
+      margin: "0 8px 0 8px",
+    },
+    "& .MuiAlert-action": {
+      margin: 0,
+      padding: 0,
+    },
+    "& .MuiSvgIcon-root": {
+      height: "20px",
+      width: "20px",
+    },
+  })
+);
 
 export const StyledAlertTitle = styled(MuiAlertTitle)(({ theme }) => ({
   "&.MuiAlertTitle-root": {

package/src/components/Alert/Alert.tsx

@@ -1,3 +1,8 @@
+import Success from "@lunit/design-system-icons/Success16";
+import Error from "@lunit/design-system-icons/Error16";
+import Warning from "@lunit/design-system-icons/Warning16";
+import Information from "@lunit/design-system-icons/Information16";
+import Close from "@lunit/design-system-icons/Close";
 import React, { forwardRef } from "react";
 import {
   StyledAlert,
@@ -6,13 +11,6 @@ import {
   StyledBottomAction,
 } from "./Alert.styled";
 import { AlertProps } from "./Alert.types";
-import {
-  Close,
-  Success,
-  Error,
-  Warning,
-  Information,
-} from "@lunit/design-system-icons";
 import Button from "../Button";
 
 const MAPPED_ICON = {

package/src/components/Alert/{Alert.utils..ts → Alert.utils.ts}

@@ -1,7 +1,9 @@
-import theme from "@/theme";
-import { AlertColor } from "@mui/material";
+import { AlertColor, Theme } from "@mui/material";
 
-export const getBackgroundColor = (severity: AlertColor | undefined) => {
+export const getBackgroundColor = (
+  theme: Theme,
+  severity: AlertColor | undefined
+) => {
   switch (severity) {
     case "info":
       return theme.palette.token.component.alert_info_bg;
@@ -14,7 +16,10 @@ export const getBackgroundColor = (severity: AlertColor | undefined) => {
   }
 };
 
-export const getBorderColor = (severity: AlertColor | undefined) => {
+export const getBorderColor = (
+  theme: Theme,
+  severity: AlertColor | undefined
+) => {
   switch (severity) {
     case "info":
       return theme.palette.token.component.alert_info_border;
@@ -27,7 +32,10 @@ export const getBorderColor = (severity: AlertColor | undefined) => {
   }
 };
 
-export const getIconColor = (severity: AlertColor | undefined) => {
+export const getIconColor = (
+  theme: Theme,
+  severity: AlertColor | undefined
+) => {
   switch (severity) {
     case "info":
       return theme.palette.token.core.icon_info_02;

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

@@ -68,76 +68,96 @@ export const kindStyle = ({ kind, color, token }: KindStyleParams) => ({
   // kind: container
   ...(kind === "contained" &&
     color === "primary" && {
-      color: token.component.btn_contained_primary_text,
-      backgroundColor: token.component.btn_contained_primary_bg,
-      "&:hover": getHoverStyle(token.component.btn_contained_primary_bg),
+      color: token.component.btn_primary_text_2,
+      backgroundColor: token.component.btn_primary_bg,
+      "&:hover": getHoverStyle(token.component.btn_primary_bg),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_contained_primary_text,
+        color: token.component.btn_primary_text_2,
       },
     }),
   ...(kind === "contained" &&
     color === "secondary" && {
-      color: token.component.btn_contained_secondary_text,
-
-      backgroundColor: token.component.btn_contained_secondary_bg,
-      "&:hover": getHoverStyle(token.component.btn_contained_secondary_bg),
+      color: token.component.btn_secondary_text,
+      backgroundColor: token.component.btn_secondary_bg,
+      "&:hover": getHoverStyle(token.component.btn_secondary_bg),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_contained_secondary_text,
+        color: token.component.btn_secondary_text,
       },
     }),
   ...(kind === "contained" &&
     color === "error" && {
-      color: token.component.btn_contained_error_text,
-      backgroundColor: token.component.btn_contained_error_bg,
-      "&:hover": getHoverStyle(token.component.btn_contained_error_bg),
+      color: token.component.btn_primary_text_2,
+      backgroundColor: token.component.btn_error_bg,
+      "&:hover": getHoverStyle(token.component.btn_error_bg),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_contained_error_text,
+        color: token.component.btn_primary_text_2,
       },
     }),
   // kind: ghost
   ...(kind === "ghost" &&
     color === "primary" && {
-      color: token.component.btn_ghost_primary_text,
+      color: token.component.btn_primary_text_1,
       border: "none",
       "&:hover": getHoverStyle("none"),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_ghost_primary_text,
+        color: token.component.btn_primary_text_1,
       },
     }),
   ...(kind === "ghost" &&
     color === "secondary" && {
-      color: token.component.btn_ghost_secondary_text,
+      color: token.component.btn_secondary_text,
       border: "none",
       "&:hover": getHoverStyle("none"),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_ghost_secondary_text,
+        color: token.component.btn_secondary_text,
       },
     }),
   ...(kind === "ghost" &&
     color === "error" && {
-      color: token.component.btn_ghost_error_text,
+      color: token.component.btn_error_text,
       "&:hover": getHoverStyle("none"),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_ghost_error_text,
+        color: token.component.btn_error_text,
       },
     }),
   // kind: outlined
   ...(kind === "outlined" &&
     color === "primary" && {
-      color: token.component.btn_outlined_primary_text,
-      border: `${OUTLINED_BORDER_WIDTH}px solid ${token.component.btn_outlined_primary_border}`,
+      color: token.component.btn_primary_text_1,
+      border: `${OUTLINED_BORDER_WIDTH}px solid ${token.component.btn_primary_border}`,
+      "&:hover": getHoverStyle("none"),
+      "&:hover:before": {
+        content: "''",
+        position: "absolute",
+        left: "-1px",
+        top: "-1px",
+        width: "calc(100% + 2px)",
+        height: "calc(100% + 2px)",
+        zIndex: -1,
+        backgroundColor: token.core.hover,
+        borderRadius,
+      },
+      "&.Mui-disabled": {
+        opacity: 0.38,
+        color: 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}`,
       "&:hover": getHoverStyle("none"),
       "&:hover:before": {
         content: "''",
@@ -152,7 +172,7 @@ export const kindStyle = ({ kind, color, token }: KindStyleParams) => ({
       },
       "&.Mui-disabled": {
         opacity: 0.38,
-        color: token.component.btn_outlined_primary_text,
+        color: token.component.btn_secondary_text,
       },
     }),
 });

package/src/components/Button/Button.tsx

@@ -6,7 +6,6 @@ import type { ButtonProps } from "./Button.types";
 
 const Button = (props: ButtonProps) => {
   const {
-    kind = "contained",
     size = "small",
     color = "primary",
     icon,
@@ -18,27 +17,30 @@ const Button = (props: ButtonProps) => {
 
   return (
     <>
-      {kind === "contained" || kind === "ghost" ? (
+      {/** props.kind 사용 이유: props.color 내 타입 좁히기 활용을 위해 사용 */}
+      {props.kind === "outlined" ? (
         <CustomButton
-          className={`${kind} ${className ? className : ""}`}
-          kind={kind}
-          color={color}
+          {...buttonProps}
+          className={`outlined ${className ? className : ""}`}
+          kind="outlined"
+          color={props.color ?? "primary"}
           size={size}
           startIcon={icon}
           hasIconOnly={hasIconOnly}
-          {...buttonProps}
         >
           {!hasIconOnly && <>{children}</>}
         </CustomButton>
       ) : (
         <CustomButton
-          className={`outlined ${className ? className : ""}`}
-          kind="outlined"
-          color="primary"
+          {...buttonProps}
+          className={`${props.kind ?? "contained"} ${
+            className ? className : ""
+          }`}
+          kind={props.kind ?? "contained"}
+          color={props.color ?? "primary"}
           size={size}
           startIcon={icon}
           hasIconOnly={hasIconOnly}
-          {...buttonProps}
         >
           {!hasIconOnly && <>{children}</>}
         </CustomButton>

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

@@ -16,7 +16,7 @@ interface GhostButtonProps extends BaseButtonProps {
 
 interface OutlinedButtonProps extends BaseButtonProps {
   kind?: "outlined";
-  color?: "primary";
+  color?: "primary" | "secondary";
 }
 
 export type ButtonProps =

package/src/components/TextField/TextField.style.ts

@@ -71,6 +71,9 @@ const getTextFieldPaddingBySize = ({
 };
 
 const commonStyle = ({ token }: { token: ColorToken }) => ({
+  "&.MuiTextField-root": {
+    width: "100%",
+  },
   "& .MuiOutlinedInput-root": {
     borderRadius: "8px",
     width: "100%",

package/src/components/TextField/TextField.tsx

@@ -11,7 +11,7 @@ import type {
 
 const SingleTextField = (props: SingleTextFieldProps) => {
   const {
-    size,
+    size = "small",
     leftIcon,
     rightIcon,
     leftIconSx,
@@ -48,7 +48,7 @@ const SingleTextField = (props: SingleTextFieldProps) => {
 };
 
 const MultiTextField = ({
-  size,
+  size = "small",
   onChange,
   ...restProps
 }: MultiTextFieldProps) => {
@@ -58,7 +58,7 @@ const MultiTextField = ({
 const TextField = (props: TextFieldProps) => {
   const {
     rows,
-    size = "small",
+    size,
     multiline = false,
     variant = "outlined",
     ...restProps

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

@@ -10,7 +10,7 @@ export interface BaseTextFieldProps
   /**
    * The design system TextField variable is outlined fixed.
    */
-  variant: "outlined";
+  variant?: "outlined";
   value?: string;
   helperText?: string;
 
@@ -21,7 +21,6 @@ export interface BaseTextFieldProps
 }
 
 export interface SingleTextFieldProps extends BaseTextFieldProps {
-  size: TextFieldSize;
   leftIcon?: JSX.Element;
   rightIcon?: JSX.Element;
   leftIconSx?: SxProps;
@@ -32,7 +31,6 @@ export interface SingleTextFieldProps extends BaseTextFieldProps {
 
 export interface MultiTextFieldProps extends BaseTextFieldProps {
   rows?: number | string;
-  size: TextFieldSize;
 }
 
 export type TextFieldProps = SingleTextFieldProps | MultiTextFieldProps;