@lunit/design-system 2.2.0 → 2.2.3

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.2.0",
+  "version": "2.2.3",
   "description": "Lunit Design System",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
@@ -66,27 +66,24 @@
     "@babel/preset-typescript": "^7.21.4",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/icons-material": "5.18.0",
-    "@mui/material": "5.18.0",
-    "@mui/utils": "^5.11.3",
+    "@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",
-    "@types/react": "19.0.0",
-    "@types/react-dom": "19.0.0",
     "babel-loader": "^8.2.5",
     "chromatic": "^6.7.0",
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
     "mustache": "^4.2.0",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
     "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"
@@ -95,8 +92,9 @@
     "@lunit/design-system-icons": "*"
   },
   "peerDependencies": {
-    "@mui/material": "^5.0.0",
-    "@types/react": "^17.0.0 || ^18.0.0 || ^19.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';