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

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

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import type { Theme } from "@mui/material/styles";
-import type { OutlinedChipProps, BaseContainedChipProps } from "./Chip.types";
+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?: "default" | "primary" | "secondary" | "error" | "warning" | "success" | "info" | undefined;
+    color?: "primary" | "secondary" | "error" | "warning" | "success" | "default" | "info" | 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;
@@ -19,13 +19,13 @@ 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;
-}, "color" | "label" | "children" | "sx" | "tabIndex" | "disabled" | "size" | keyof import("@mui/material/OverridableComponent").CommonProps | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled" | "variant"> & import("@mui/system").MUIStyledCommonProps<Theme> & OutlinedChipProps, {}, {}>;
+}, "color" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "disabled" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "size" | "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?: "default" | "primary" | "secondary" | "error" | "warning" | "success" | "info" | undefined;
+    color?: "primary" | "secondary" | "error" | "warning" | "success" | "default" | "info" | 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;
@@ -38,13 +38,13 @@ 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;
-}, "color" | "label" | "children" | "sx" | "tabIndex" | "disabled" | "size" | keyof import("@mui/material/OverridableComponent").CommonProps | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled" | "variant"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;
+}, "color" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "disabled" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "size" | "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?: "default" | "primary" | "secondary" | "error" | "warning" | "success" | "info" | undefined;
+    color?: "primary" | "secondary" | "error" | "warning" | "success" | "default" | "info" | 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;
@@ -57,13 +57,13 @@ 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;
-}, "color" | "label" | "children" | "sx" | "tabIndex" | "disabled" | "size" | keyof import("@mui/material/OverridableComponent").CommonProps | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled" | "variant"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;
+}, "color" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "disabled" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "size" | "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?: "default" | "primary" | "secondary" | "error" | "warning" | "success" | "info" | undefined;
+    color?: "primary" | "secondary" | "error" | "warning" | "success" | "default" | "info" | 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;
@@ -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;
-}, "color" | "label" | "children" | "sx" | "tabIndex" | "disabled" | "size" | keyof import("@mui/material/OverridableComponent").CommonProps | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled" | "variant"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;
+}, "color" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "disabled" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "size" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;

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

@@ -1,7 +1,7 @@
 import { CHIP_COLORS } from "./consts";
 import type { ChipProps as MuiChipProps } from "@mui/material";
 type ColorKeys = keyof typeof CHIP_COLORS;
-export type ChipColor = typeof CHIP_COLORS[ColorKeys];
+export type ChipColor = (typeof CHIP_COLORS)[ColorKeys];
 export type ChipThumbnail = string | JSX.Element;
 /**
  * Mui Chip's variant is 'kind' in our design system

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

@@ -1,2 +1,3 @@
-declare const TextField: () => JSX.Element;
+import type { TextFieldProps } from "./TextField.types";
+declare const TextField: (props: TextFieldProps) => JSX.Element;
 export default TextField;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { TextFieldProps, TextFieldSize } from "./TextField.types";
+declare const BaseTextField: import("@emotion/styled").StyledComponent<import("@mui/material/TextField").OutlinedTextFieldProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Omit<TextFieldProps, "size"> & {
+    textFieldSize: TextFieldSize;
+    hasLeftIcon?: boolean | undefined;
+    hasRightIcon?: boolean | undefined;
+}, {}, {}>;
+declare const IconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export { BaseTextField, IconWrapper };

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

@@ -0,0 +1,29 @@
+import type { SxProps } from "@mui/material";
+import type { OutlinedTextFieldProps } from "@mui/material/TextField";
+export type TextFieldSize = "small" | "medium" | "large";
+export interface BaseTextFieldProps extends Omit<OutlinedTextFieldProps, "size" | "value" | "helperText" | "variant"> {
+    /**
+     * The design system TextField variable is outlined fixed.
+     */
+    variant: "outlined";
+    value?: string;
+    helperText?: string;
+    /**
+     * @default "small"
+     */
+    size?: TextFieldSize;
+}
+export interface SingleTextFieldProps extends BaseTextFieldProps {
+    size: TextFieldSize;
+    leftIcon?: JSX.Element;
+    rightIcon?: JSX.Element;
+    leftIconSx?: SxProps;
+    rightIconSx?: SxProps;
+    onLeftIconClick?: () => void;
+    onRightIconClick?: () => void;
+}
+export interface MultiTextFieldProps extends BaseTextFieldProps {
+    rows?: number | string;
+    size: TextFieldSize;
+}
+export type TextFieldProps = SingleTextFieldProps | MultiTextFieldProps;

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

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

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

@@ -1 +1,2 @@
 export { default } from "./TextField";
+export type { TextFieldProps, BaseTextFieldProps, MultiTextFieldProps, SingleTextFieldProps, } from "./TextField.types";

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

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ToastProps } from "./Toast.types";
+declare const Toast: React.ForwardRefExoticComponent<Omit<ToastProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Toast;

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

@@ -0,0 +1 @@
+export declare const StyledToast: import("@emotion/styled").StyledComponent<import("@mui/material").AlertProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -0,0 +1,4 @@
+import { AlertProps as BaseAlertProps } from "@mui/material";
+export interface ToastProps extends Omit<BaseAlertProps, "variant" | "slots" | "slotProps" | "components" | "componentsProps" | "severity"> {
+    severity?: "success" | "info" | "warning" | "error" | "normal";
+}

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

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

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

@@ -0,0 +1 @@
+export { default as Toast } from './Toast';

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

@@ -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" | "children" | "sx" | "tabIndex" | "onChange" | "onClick" | "disabled" | "value" | "action" | "size" | "selected" | keyof import("@mui/material/OverridableComponent").CommonProps | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "fullWidth"> & 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" | "size" | "selected" | "disableFocusRipple" | "fullWidth"> & 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/ToggleButton/ToggleButton.types.d.ts

@@ -1,18 +1,18 @@
 /// <reference types="react" />
 import type { ToggleButtonProps as MuiToggleButtonProps } from "@mui/material";
-interface ToggleButtonBaseProps extends MuiToggleButtonProps {
+interface ToggleButtonBaseProps extends Omit<MuiToggleButtonProps, "variant"> {
     selectedColor?: "primary" | "secondary";
     icon?: React.ReactNode;
 }
-interface ContainedToggleButtonProps extends Omit<ToggleButtonBaseProps, "variant"> {
+interface ContainedToggleButtonProps extends ToggleButtonBaseProps {
     kind?: "contained";
     color?: "primary" | "secondary";
 }
-interface GhostToggleButtonProps extends Omit<ToggleButtonBaseProps, "variant"> {
+interface GhostToggleButtonProps extends ToggleButtonBaseProps {
     kind?: "ghost";
     color?: "primary" | "secondary";
 }
-interface OutlinedToggleButtonProps extends Omit<ToggleButtonBaseProps, "variant"> {
+interface OutlinedToggleButtonProps extends ToggleButtonBaseProps {
     kind?: "outlined";
     color?: "primary";
 }

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

@@ -33,3 +33,19 @@ export declare const greyText: {
     95: string;
     100: string;
 };
+export declare const greyForMUI: {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    A100: string;
+    A200: string;
+    A400: string;
+    A700: string;
+};

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

@@ -1,4 +1,4 @@
-export declare const lunitGreen: {
+export declare const lunit_green: {
     5: string;
     10: string;
     20: string;
@@ -10,7 +10,7 @@ export declare const lunitGreen: {
     80: string;
     90: string;
 };
-export declare const lunitGreenText: {
+export declare const lunit_greenText: {
     5: string;
     10: string;
     20: string;

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

@@ -1,4 +1,4 @@
-export declare const lunitTeal: {
+export declare const lunit_teal: {
     5: string;
     10: string;
     20: string;
@@ -10,7 +10,7 @@ export declare const lunitTeal: {
     80: string;
     90: string;
 };
-export declare const lunitTealText: {
+export declare const lunit_tealText: {
     5: string;
     10: string;
     20: string;

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

@@ -9,8 +9,8 @@ declare module "@mui/material/styles/createPalette" {
             grey: GreyColor;
             blue: BaseColor;
             green: BaseColor;
-            lunitGreen: BaseColor;
-            lunitTeal: BaseColor;
+            lunit_green: BaseColor;
+            lunit_teal: BaseColor;
             magenta: BaseColor;
             orange: BaseColor;
             red: BaseColor;
@@ -23,8 +23,8 @@ declare module "@mui/material/styles/createPalette" {
             grey: GreyColor;
             blue: BaseColor;
             green: BaseColor;
-            lunitGreen: BaseColor;
-            lunitTeal: BaseColor;
+            lunit_green: BaseColor;
+            lunit_teal: BaseColor;
             magenta: BaseColor;
             orange: BaseColor;
             red: BaseColor;
@@ -57,12 +57,46 @@ export declare const createColorCssBaseline: () => {
     };
 };
 declare const paletteOptions: {
+    primary: {
+        main: string;
+    };
+    secondary: {
+        main: string;
+    };
+    error: {
+        main: string;
+    };
+    warning: {
+        main: string;
+    };
+    info: {
+        main: string;
+    };
+    success: {
+        main: string;
+    };
+    grey: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        A100: string;
+        A200: string;
+        A400: string;
+        A700: string;
+    };
     lunit: {
         grey: GreyColor;
         blue: BaseColor;
         green: BaseColor;
-        lunitGreen: BaseColor;
-        lunitTeal: BaseColor;
+        lunit_green: BaseColor;
+        lunit_teal: BaseColor;
         magenta: BaseColor;
         orange: BaseColor;
         red: BaseColor;
@@ -90,6 +124,7 @@ declare const paletteOptions: {
             icon_info_02: string;
             hover: string;
             focused: string;
+            selected: string;
             shadow_01: string;
             shadow_02: string;
             shadow_03: string;
@@ -117,10 +152,7 @@ declare const paletteOptions: {
             selectcontrol_handler_shadow: string;
             textfield_bg: string;
             textfield_border_error: string;
-            dropdown_option_selected: string;
             dropdown_divider_border: string;
-            dropdown_option_activatied: string;
-            datatable_cell_selected: string;
             datatable_border_01: string;
             datatable_border_02: string;
             datatable_zebra: string;
@@ -152,4 +184,5 @@ declare const paletteOptions: {
         };
     };
 };
+export { base };
 export default paletteOptions;

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

@@ -22,6 +22,7 @@ export interface ColorToken {
         icon_info_02: CSSPropertyColor;
         hover: CSSPropertyColor;
         focused: CSSPropertyColor;
+        selected: CSSPropertyColor;
         shadow_01: CSSPropertyColor;
         shadow_02: CSSPropertyColor;
         shadow_03: CSSPropertyColor;
@@ -49,10 +50,7 @@ export interface ColorToken {
         selectcontrol_handler_shadow: CSSPropertyColor;
         textfield_bg: CSSPropertyColor;
         textfield_border_error: CSSPropertyColor;
-        dropdown_option_selected: CSSPropertyColor;
         dropdown_divider_border: CSSPropertyColor;
-        dropdown_option_activatied: CSSPropertyColor;
-        datatable_cell_selected: CSSPropertyColor;
         datatable_border_01: CSSPropertyColor;
         datatable_border_02: CSSPropertyColor;
         datatable_zebra: CSSPropertyColor;

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

@@ -4,12 +4,46 @@ export declare const foundationCssBaseline: Components<Theme>["MuiCssBaseline"];
 export declare const typography: import("@mui/material").TypographyVariantsOptions;
 export { typographyDefaultProps };
 export declare const palette: {
+    primary: {
+        main: string;
+    };
+    secondary: {
+        main: string;
+    };
+    error: {
+        main: string;
+    };
+    warning: {
+        main: string;
+    };
+    info: {
+        main: string;
+    };
+    success: {
+        main: string;
+    };
+    grey: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        A100: string;
+        A200: string;
+        A400: string;
+        A700: string;
+    };
     lunit: {
         grey: import("./colors").GreyColor;
         blue: import("./colors").BaseColor;
         green: import("./colors").BaseColor;
-        lunitGreen: import("./colors").BaseColor;
-        lunitTeal: import("./colors").BaseColor;
+        lunit_green: import("./colors").BaseColor;
+        lunit_teal: import("./colors").BaseColor;
         magenta: import("./colors").BaseColor;
         orange: import("./colors").BaseColor;
         red: import("./colors").BaseColor;
@@ -37,6 +71,7 @@ export declare const palette: {
             icon_info_02: string;
             hover: string;
             focused: string;
+            selected: string;
             shadow_01: string;
             shadow_02: string;
             shadow_03: string;
@@ -64,10 +99,7 @@ export declare const palette: {
             selectcontrol_handler_shadow: string;
             textfield_bg: string;
             textfield_border_error: string;
-            dropdown_option_selected: string;
             dropdown_divider_border: string;
-            dropdown_option_activatied: string;
-            datatable_cell_selected: string;
             datatable_border_01: string;
             datatable_border_02: string;
             datatable_zebra: string;

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
 export { default as theme } from "./theme";
+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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/design-system",
-  "version": "1.0.0-a.2",
+  "version": "1.0.0-a.3",
   "description": "Lunit Design System",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
@@ -35,11 +35,11 @@
     "directory": "packages/design-system"
   },
   "scripts": {
-    "build:prepare": "tsc -p tsconfig.build.json",
+    "build:transpile": "tsc -p tsconfig.build.json",
     "build:cjs": "webpack -c webpack/cjs.config.js",
-    "build": "yarn build:prepare && yarn build:cjs",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "build": "yarn build:transpile && yarn build:cjs",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "chromatic": "chromatic"
   },
   "nx": {
@@ -53,21 +53,25 @@
   },
   "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/styled": "^11.8.1",
+    "@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": "^6.4.22",
-    "@storybook/addon-essentials": "^6.4.22",
-    "@storybook/addon-interactions": "^6.4.22",
-    "@storybook/addon-links": "^6.4.22",
-    "@storybook/addon-storysource": "^6.4.22",
-    "@storybook/builder-webpack5": "^6.4.22",
-    "@storybook/manager-webpack5": "^6.4.22",
-    "@storybook/react": "^6.4.22",
-    "@storybook/testing-library": "^0.0.11",
-    "@storybook/theming": "^6.4.22",
+    "@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",
+    "@storybook/testing-library": "^0.1.0",
+    "@storybook/theming": "^7.0.6",
     "@types/lodash": "^4.14.182",
     "babel-loader": "^8.2.5",
     "chromatic": "^6.7.0",
@@ -76,7 +80,8 @@
     "mustache": "^4.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "storybook-addon-pseudo-states": "^1.15.1",
+    "storybook": "^7.0.6",
+    "storybook-addon-pseudo-states": "^2.0.0",
     "ts-loader": "^9.3.0",
     "typescript": "^4.6.4",
     "webpack": "^5.72.0",

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

@@ -0,0 +1,60 @@
+import {
+  Alert as MuiAlert,
+  AlertTitle as MuiAlertTitle,
+  styled,
+} from "@mui/material";
+import type { AlertProps } from "./Alert.types";
+import {
+  getBorderColor,
+  getBackgroundColor,
+  getIconColor,
+} 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 StyledAlertTitle = styled(MuiAlertTitle)(({ theme }) => ({
+  "&.MuiAlertTitle-root": {
+    marginTop: 0,
+    marginBottom: 8,
+    fontWeight: 700,
+    fontSize: "14px",
+    lineHeight: "20px",
+    color: theme.palette.token.core.text_normal,
+  },
+}));
+
+export const StyledAlertChildren = styled("div")(({ theme }) => ({
+  color: theme.palette.token.core.text_normal,
+}));
+
+export const StyledBottomAction = styled("div")({
+  marginTop: "12px",
+});

package/src/components/Alert/Alert.tsx

@@ -1,9 +1,53 @@
-import React from "react";
+import React, { forwardRef } from "react";
+import {
+  StyledAlert,
+  StyledAlertTitle,
+  StyledAlertChildren,
+  StyledBottomAction,
+} from "./Alert.styled";
+import { AlertProps } from "./Alert.types";
+import {
+  Close,
+  Success,
+  Error,
+  Warning,
+  Information,
+} from "@lunit/design-system-icons";
+import Button from "../Button";
 
-import { Box } from "@mui/material";
-
-const Alert = () => {
-  return <Box>Alert</Box>;
+const MAPPED_ICON = {
+  success: <Success variant="filled" />,
+  info: <Information variant="filled" />,
+  warning: <Warning variant="filled" />,
+  error: <Error variant="filled" />,
 };
 
+const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
+  const { title, severity, children, bottomAction, onClose, ...rest } = props;
+  return (
+    <StyledAlert
+      ref={ref}
+      severity={severity}
+      iconMapping={MAPPED_ICON}
+      slots={{
+        closeButton: () => (
+          <Button
+            kind="ghost"
+            size="small"
+            color="secondary"
+            icon={<Close />}
+            onClick={onClose}
+          />
+        ),
+      }}
+      onClose={onClose}
+      {...rest}
+    >
+      {title && <StyledAlertTitle>{title}</StyledAlertTitle>}
+      <StyledAlertChildren>{children}</StyledAlertChildren>
+      {bottomAction && <StyledBottomAction>{bottomAction}</StyledBottomAction>}
+    </StyledAlert>
+  );
+});
+
 export default Alert;

package/src/components/Alert/Alert.types.ts

@@ -0,0 +1,10 @@
+import { AlertProps as MuiAlertProps } from "@mui/material";
+import { ReactNode } from "react";
+
+export interface AlertProps extends MuiAlertProps {
+  title?: string;
+  action?: ReactNode;
+  children: ReactNode;
+  bottomAction?: ReactNode;
+  onClose?: () => void;
+}