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

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?: "success" | "info" | "warning" | "error" | "primary" | "secondary" | "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?: "outlined" | "filled" | undefined;
+    variant?: "filled" | "outlined" | 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, {}, {}>;
+}, 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, {}, {}>;
 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?: "success" | "info" | "warning" | "error" | "primary" | "secondary" | "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?: "outlined" | "filled" | undefined;
+    variant?: "filled" | "outlined" | 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, {}, {}>;
+}, 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, {}, {}>;
 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?: "success" | "info" | "warning" | "error" | "primary" | "secondary" | "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?: "outlined" | "filled" | undefined;
+    variant?: "filled" | "outlined" | 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, {}, {}>;
+}, 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, {}, {}>;
 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?: "success" | "info" | "warning" | "error" | "primary" | "secondary" | "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?: "outlined" | "filled" | undefined;
+    variant?: "filled" | "outlined" | 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, {}, {}>;
+}, 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, {}, {}>;

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/DataTable/DataTable.d.ts

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

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

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

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

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

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

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

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

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

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

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

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) => import("react/jsx-runtime").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) => import("react/jsx-runtime").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, 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

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

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?: "success" | "info" | "warning" | "error" | "standard" | "primary" | "secondary" | 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" | "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, {}, {}>;
+}, 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, {}, {}>;
 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/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/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.4",
   "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",