@lunit/design-system 2.1.0 → 2.2.3

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

@@ -1,9 +1,9 @@
-import { PaletteColor } from "@mui/material/styles";
-import * as base from "./base";
-import { ColorToken } from "./types";
+import { PaletteColor } from '@mui/material/styles';
+import * as base from './base';
+import { ColorToken } from './types';
 export type BaseColor = Record<keyof typeof base.blue, PaletteColor>;
 export type GreyColor = Record<keyof typeof base.grey, PaletteColor>;
-declare module "@mui/material/styles/createPalette" {
+declare module '@mui/material/styles' {
     interface PaletteOptions {
         lunit_global?: {
             grey: GreyColor;
@@ -36,20 +36,20 @@ declare module "@mui/material/styles/createPalette" {
     }
 }
 export declare const createColorCssBaseline: () => {
-    ":root": {
+    ':root': {
         [x: string]: string;
     };
-    ".light1": {
-        [x: string]: string;
+    '.light1': {
+        [name: string]: string;
     };
-    ".light2": {
-        [x: string]: string;
+    '.light2': {
+        [name: string]: string;
     };
-    ".dark1": {
-        [x: string]: string;
+    '.dark1': {
+        [name: string]: string;
     };
-    ".dark2": {
-        [x: string]: string;
+    '.dark2': {
+        [name: string]: string;
     };
 };
 declare const paletteOptions: {
@@ -124,11 +124,8 @@ declare const paletteOptions: {
             icon_success_02: string;
             icon_warning_02: string;
             icon_info_02: string;
-            hover: string;
             status_hover: string;
-            focused: string;
             status_focused: string;
-            selected: string;
             status_selected: string;
             shadow_01: string;
             shadow_02: string;
@@ -142,14 +139,12 @@ declare const paletteOptions: {
             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;
             btn_selected_secondary_text: string;
             btn_selected_tertiary_bg: string;
             btn_selected_tertiary_text: string;
@@ -160,8 +155,6 @@ declare const paletteOptions: {
             textfield_bg: string;
             textfield_border_error: string;
             dropdown_divider_border: string;
-            datatable_border_01: string;
-            datatable_border_02: string;
             datatable_zebra: string;
             scrollbars_bg: string;
             scrollbars_hover: string;

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

@@ -1,4 +1,4 @@
-import { ColorTokenValueBySurface } from "./types";
+import { ColorTokenValueBySurface } from './types';
 export interface TokenComponentColorValue {
     [component: string]: {
         [token: string]: ColorTokenValueBySurface;

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

@@ -1,4 +1,4 @@
-import { ColorTokenValueBySurface } from "./types";
+import { ColorTokenValueBySurface } from './types';
 export interface TokenCoreColorValue {
     [token: string]: ColorTokenValueBySurface;
 }

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

@@ -1,2 +1,2 @@
-export * from "./component";
-export * from "./core";
+export * from './component';
+export * from './core';

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

@@ -19,11 +19,8 @@ export interface ColorToken {
         icon_success_02: string;
         icon_warning_02: string;
         icon_info_02: string;
-        hover: string;
         status_hover: string;
-        focused: string;
         status_focused: string;
-        selected: string;
         status_selected: string;
         shadow_01: string;
         shadow_02: string;
@@ -37,14 +34,12 @@ export interface ColorToken {
         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;
         btn_selected_secondary_text: string;
         btn_selected_tertiary_bg: string;
         btn_selected_tertiary_text: string;
@@ -55,8 +50,6 @@ export interface ColorToken {
         textfield_bg: string;
         textfield_border_error: string;
         dropdown_divider_border: string;
-        datatable_border_01: string;
-        datatable_border_02: string;
         datatable_zebra: string;
         scrollbars_bg: string;
         scrollbars_hover: string;

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

@@ -1,6 +1,6 @@
-import { Components, Theme } from "@mui/material";
-import { typographyDefaultProps } from "./Typography";
-export declare const foundationCssBaseline: Components<Theme>["MuiCssBaseline"];
+import { Components, Theme } from '@mui/material';
+import { typographyDefaultProps } from './Typography';
+export declare const foundationCssBaseline: Components<Theme>['MuiCssBaseline'];
 export declare const typography: import("@mui/material").TypographyVariantsOptions;
 export { typographyDefaultProps };
 export declare const palette: {
@@ -75,11 +75,8 @@ export declare const palette: {
             icon_success_02: string;
             icon_warning_02: string;
             icon_info_02: string;
-            hover: string;
             status_hover: string;
-            focused: string;
             status_focused: string;
-            selected: string;
             status_selected: string;
             shadow_01: string;
             shadow_02: string;
@@ -93,14 +90,12 @@ export declare const palette: {
             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;
             btn_selected_secondary_text: string;
             btn_selected_tertiary_bg: string;
             btn_selected_tertiary_text: string;
@@ -111,8 +106,6 @@ export declare const palette: {
             textfield_bg: string;
             textfield_border_error: string;
             dropdown_divider_border: string;
-            datatable_border_01: string;
-            datatable_border_02: string;
             datatable_zebra: string;
             scrollbars_bg: string;
             scrollbars_hover: string;
@@ -151,4 +144,4 @@ export declare const elevation: {
     shadow3: string;
     shadow4: string;
 };
-export { spacing } from "./spacing";
+export { spacing } from './spacing';

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

@@ -1,2 +1,2 @@
-import { SpacingOptions } from "@mui/system";
+import { SpacingOptions } from '@mui/system';
 export declare const spacing: SpacingOptions;

package/dist/types/index.d.ts

@@ -1,20 +1,20 @@
-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";
-export { default as Chip } from "./components/Chip";
-export { default as Checkbox } from "./components/Checkbox";
-export { default as Dialog } from "./components/Dialog";
-export { default as DataTable } from "./components/DataTable";
-export { default as DatePicker } from "./components/DatePicker";
-export { default as Dropdown, DropdownItem, DropdownDivider, DropdownSubtitle, } from "./components/Dropdown";
-export { default as FormLabel } from "./components/FormLabel";
-export { default as Radio } from "./components/Radio";
-export { default as RadioGroup } from "./components/RadioGroup";
-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";
+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';
+export { default as Chip } from './components/Chip';
+export { default as Checkbox } from './components/Checkbox';
+export { default as Dialog } from './components/Dialog';
+export { default as DataTable } from './components/DataTable';
+export { default as DatePicker } from './components/DatePicker';
+export { default as Dropdown, DropdownItem, DropdownDivider, DropdownSubtitle, } from './components/Dropdown';
+export { default as FormLabel } from './components/FormLabel';
+export { default as Radio } from './components/Radio';
+export { default as RadioGroup } from './components/RadioGroup';
+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/dist/types/theme.d.ts

@@ -1,4 +1,4 @@
-import { ThemeOptions } from "@mui/material";
+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": "2.1.0",
+  "version": "2.2.3",
   "description": "Lunit Design System",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
@@ -56,39 +56,34 @@
       }
     }
   },
+  "engines": {
+    "node": ">=20.0.0"
+  },
   "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/react": "11.14.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.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.21",
+    "@mui/icons-material": "^7.3.2",
+    "@mui/material": "^7.3.2",
+    "@mui/system": "^7.3.2",
+    "@mui/utils": "^7.3.2",
+    "@storybook/addon-docs": "9.1.2",
+    "@storybook/addon-links": "9.1.2",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+    "@storybook/react-webpack5": "9.1.2",
+    "@testing-library/react": "^16.3.0",
     "@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": "18.2.0",
-    "react-dom": "18.2.0",
-    "storybook": "^7.0.21",
-    "storybook-addon-pseudo-states": "^2.0.1",
+    "storybook": "9.1.2",
+    "storybook-addon-pseudo-states": "^9.1.2",
     "ts-loader": "^9.3.0",
-    "typescript": "^4.6.4",
     "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2",
     "webpack-node-externals": "^3.0.0"
@@ -97,9 +92,10 @@
     "@lunit/design-system-icons": "*"
   },
   "peerDependencies": {
-    "@mui/material": "^5.0.0",
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "@mui/material": "^7.0.0",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   }
-}
+}

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

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

package/src/components/Alert/Alert.tsx

@@ -1,17 +1,17 @@
-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 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,
   StyledAlertTitle,
   StyledAlertChildren,
   StyledBottomAction,
-} from "./Alert.styled";
-import { AlertProps } from "./Alert.types";
-import Button from "../Button";
+} from './Alert.styled';
+import { AlertProps } from './Alert.types';
+import Button from '../Button';
 
 const MAPPED_ICON = {
   success: <Success variant="filled" />,
@@ -29,13 +29,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
       iconMapping={MAPPED_ICON}
       slots={{
         closeButton: () => (
-          <Button
-            kind="ghost"
-            size="small"
-            color="secondary"
-            icon={<Close />}
-            onClick={onClose}
-          />
+          <Button kind="ghost" size="small" color="secondary" icon={<Close />} onClick={onClose} />
         ),
       }}
       onClose={onClose}

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

@@ -1,5 +1,5 @@
-import { AlertProps as MuiAlertProps } from "@mui/material";
-import { ReactNode } from "react";
+import { AlertProps as MuiAlertProps } from '@mui/material';
+import { ReactNode } from 'react';
 
 export interface AlertProps extends MuiAlertProps {
   title?: string;

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

@@ -1,47 +1,38 @@
-import { AlertColor, Theme } from "@mui/material";
+import { AlertColor, Theme } from '@mui/material';
 
-export const getBackgroundColor = (
-  theme: Theme,
-  severity: AlertColor | undefined
-) => {
+export const getBackgroundColor = (theme: Theme, severity: AlertColor | undefined) => {
   switch (severity) {
-    case "info":
+    case 'info':
       return theme.palette.lunit_token.component.alert_info_bg;
-    case "warning":
+    case 'warning':
       return theme.palette.lunit_token.component.alert_warning_bg;
-    case "error":
+    case 'error':
       return theme.palette.lunit_token.component.alert_error_bg;
     default:
       return theme.palette.lunit_token.component.alert_success_bg;
   }
 };
 
-export const getBorderColor = (
-  theme: Theme,
-  severity: AlertColor | undefined
-) => {
+export const getBorderColor = (theme: Theme, severity: AlertColor | undefined) => {
   switch (severity) {
-    case "info":
+    case 'info':
       return theme.palette.lunit_token.component.alert_info_border;
-    case "warning":
+    case 'warning':
       return theme.palette.lunit_token.component.alert_warning_border;
-    case "error":
+    case 'error':
       return theme.palette.lunit_token.component.alert_error_border;
     default:
       return theme.palette.lunit_token.component.alert_success_border;
   }
 };
 
-export const getIconColor = (
-  theme: Theme,
-  severity: AlertColor | undefined
-) => {
+export const getIconColor = (theme: Theme, severity: AlertColor | undefined) => {
   switch (severity) {
-    case "info":
+    case 'info':
       return theme.palette.lunit_token.core.icon_info_02;
-    case "warning":
+    case 'warning':
       return theme.palette.lunit_token.core.icon_warning_02;
-    case "error":
+    case 'error':
       return theme.palette.lunit_token.core.icon_error_02;
     default:
       return theme.palette.lunit_token.core.icon_success_02;

package/src/components/Alert/index.ts

@@ -1 +1 @@
-export { default } from "./Alert";
+export { default } from './Alert';