@lunit/oui 1.0.1-alpha.9 → 1.0.1

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

@@ -0,0 +1,144 @@
+import { ButtonBase, styled } from '@mui/material';
+import type { Theme } from '@mui/material';
+import { baseButtonStyle, baseLargeStyle, baseSmallStyle } from './BaseButton.styled';
+import { baseLargeIconStyle, baseMediumIconStyle, baseSmallIconStyle } from './IconButton.styled';
+import type { BaseButtonProps } from '../Button.types';
+
+const outlinedPrimaryStyle = (theme: Theme, focusOutline: boolean | undefined) => {
+  const mainColor = theme.palette.lunitTeal[40];
+  return {
+    ...baseButtonStyle(theme, false),
+    backgroundColor: 'transparent',
+    color: mainColor,
+    border: `1px solid ${mainColor}`,
+    '&:hover': {
+      backgroundColor: theme.palette.neutralGrey[70],
+      opacity: 0.8,
+    },
+    '&:disabled': {
+      color: mainColor,
+      backgroundColor: 'transparent',
+      opacity: 0.4,
+    },
+    '&:focus': {
+      border: `1px solid ${mainColor}`,
+      outline: focusOutline ? `2px solid ${mainColor}` : 'none',
+    },
+    '&:focus-visible': {
+      border: `1px solid ${mainColor}`,
+      outline: focusOutline ? `2px solid ${mainColor}` : 'none',
+    },
+  };
+};
+
+const outlinedSecondaryStyle = (theme: Theme, focusOutline: boolean | undefined) => {
+  const mainColor = theme.palette.neutralGrey[25];
+  return {
+    backgroundColor: 'transparent',
+    color: mainColor,
+    border: `1px solid ${mainColor}`,
+    '&:hover': {
+      backgroundColor: theme.palette.neutralGrey[70],
+      opacity: 0.8,
+    },
+    '&:disabled': {
+      backgroundColor: 'transparent',
+      color: mainColor,
+      opacity: 0.4,
+    },
+    '&:focus': {
+      border: `1px solid ${mainColor}`,
+      outline: focusOutline ? `2px solid ${mainColor}` : 'none',
+    },
+    '&:focus-visible': {
+      border: `1px solid ${mainColor}`,
+      outline: focusOutline ? `2px solid ${mainColor}` : 'none',
+    },
+  };
+};
+const outlinedErrorStyle = (theme: Theme, focusOutline: boolean | undefined) => {
+  const mainColor = theme.palette.red[5];
+  return {
+    backgroundColor: 'transparent',
+    color: mainColor,
+    border: `1px solid ${mainColor}`,
+    '&:hover': {
+      backgroundColor: theme.palette.neutralGrey[70],
+      opacity: 0.8,
+    },
+    '&:disabled': {
+      backgroundColor: 'transparent',
+      color: mainColor,
+      opacity: 0.4,
+    },
+    '&:focus': {
+      border: `1px solid ${mainColor}`,
+      outline: focusOutline ? `2px solid ${mainColor}` : 'none',
+    },
+    '&:focus-visible': {
+      border: `1px solid ${mainColor}`,
+      outline: focusOutline ? `2px solid ${mainColor}` : 'none',
+    },
+  };
+};
+
+const BaseOutlinedButton = styled(ButtonBase, {
+  shouldForwardProp: (prop) =>
+    !['color', 'variant', 'size', 'focusOutline', 'isIconOnly'].includes(prop.toString()),
+})<BaseButtonProps>(({ theme, color, size, focusOutline, isIconOnly }) => {
+  let resultStyle = outlinedPrimaryStyle(theme, focusOutline);
+
+  // Apply icon sizing if icon only
+  if (isIconOnly) {
+    if (size === 'small') {
+      resultStyle = {
+        ...resultStyle,
+        ...baseSmallIconStyle,
+      };
+    } else if (size === 'large') {
+      resultStyle = {
+        ...resultStyle,
+        ...baseLargeIconStyle,
+      };
+    } else {
+      resultStyle = {
+        ...resultStyle,
+        ...baseMediumIconStyle,
+      };
+    }
+  } else {
+    // Apply label or icon-label
+    if (size === 'small') {
+      resultStyle = {
+        ...resultStyle,
+        ...baseSmallStyle,
+      };
+    }
+
+    if (size === 'large') {
+      resultStyle = {
+        ...resultStyle,
+        ...baseLargeStyle,
+      };
+    }
+  }
+
+  // Apply color
+  if (color === 'error') {
+    resultStyle = {
+      ...resultStyle,
+      ...outlinedErrorStyle(theme, focusOutline),
+    };
+  }
+
+  if (color === 'secondary') {
+    resultStyle = {
+      ...resultStyle,
+      ...outlinedSecondaryStyle(theme, focusOutline),
+    };
+  }
+
+  return resultStyle;
+});
+
+export { outlinedPrimaryStyle, outlinedSecondaryStyle, outlinedErrorStyle, BaseOutlinedButton };

package/src/components/Card/Card.styled.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Card as MuiCard, styled } from '@mui/material';
+import type { CardProps } from './Card.types';
+
+const BaseCard = styled(({ ...props }: CardProps) => <MuiCard {...props} />)(
+  ({ theme, size = 'large', selected }) => ({
+    width: size === 'small' ? '480px' : '520px',
+    height: size === 'small' ? '156px' : '284px',
+    cursor: 'pointer',
+    borderRadius: '8px',
+    backgroundColor: !selected ? theme.palette.neutralGrey[85] : theme.palette.neutralGrey[75],
+    '&:hover': {
+      backgroundColor: theme.palette.neutralGrey[75],
+    },
+  }),
+);
+
+export default BaseCard;

package/src/components/Card/Card.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import BaseCard from './Card.styled';
+import type { CardProps } from './Card.types';
+
+function Card({ size, selected, onClick, children, ...props }: CardProps) {
+  return (
+    <BaseCard
+      size={size}
+      selected={selected}
+      onClick={onClick}
+      {...props}
+    >
+      {children}
+    </BaseCard>
+  );
+}
+
+export default Card;

package/src/components/Card/Card.types.ts

@@ -0,0 +1,10 @@
+import type { CardProps as MuiCardProps } from '@mui/material';
+
+export type CardSize = 'small' | 'large';
+
+export interface CardProps extends MuiCardProps {
+  size?: CardSize;
+  open?: boolean;
+  selected?: boolean;
+  onClick?: () => void;
+}

package/src/components/Card/index.ts

@@ -0,0 +1,5 @@
+import Card from './Card';
+import type { CardProps } from './Card.types';
+
+export { Card };
+export type { CardProps };

package/src/components/Checkbox/Checkbox.styled.tsx

@@ -0,0 +1,27 @@
+import { styled, Box, Checkbox } from '@mui/material';
+
+export const Container = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'touchRippleRef',
+})(({ theme }) => ({
+  display: 'inline-flex',
+  gap: theme.spacing(2),
+}));
+
+export const StyledCheckbox = styled(Checkbox)(({ theme }) => ({
+  width: '22px',
+  height: '22px',
+  padding: 0,
+  '&.Mui-disabled, &.Mui-disabled + .MuiTypography-root': {
+    opacity: 0.4,
+  },
+  '&.Mui-focusVisible > .checkbox-icon': {
+    borderRadius: '4px',
+    boxShadow: `0 0 0 1px ${theme.palette.lunitTeal[10]}`,
+  },
+}));
+
+export const iconStyle = {
+  display: 'inline-block',
+  width: '18px',
+  height: '18px',
+};

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,64 @@
+import React, { forwardRef } from 'react';
+import { Typography } from '@mui/material';
+import clsx from 'clsx';
+import { Container, StyledCheckbox } from './Checkbox.styled';
+import type { CheckboxProps } from './Checkbox.types';
+import { UncheckedIcon, CheckedIcon, IndeterminateIcon } from './Checkbox.utils';
+
+const Checkbox = forwardRef<HTMLSpanElement, CheckboxProps>(
+  (
+    {
+      value,
+      name,
+      checked,
+      defaultChecked,
+      disabled,
+      required,
+      indeterminate,
+      onChange,
+      onChangeCapture,
+      label,
+      inputProps,
+      inputRef,
+      ...rootProps
+    }: CheckboxProps,
+    ref,
+  ) => {
+    return (
+      <Container
+        {...rootProps}
+        className={clsx('checkbox', rootProps.className)}
+        component={label != null ? 'label' : 'span'}
+        ref={ref}
+      >
+        <StyledCheckbox
+          disableRipple
+          icon={<UncheckedIcon />}
+          checkedIcon={<CheckedIcon />}
+          indeterminateIcon={<IndeterminateIcon />}
+          value={value}
+          name={name}
+          checked={indeterminate ? true : checked}
+          defaultChecked={defaultChecked}
+          disabled={disabled}
+          required={required}
+          indeterminate={indeterminate}
+          onChange={onChange}
+          onChangeCapture={onChangeCapture}
+          inputProps={inputProps}
+          inputRef={inputRef}
+        />
+        {label && (
+          <Typography
+            variant="body5"
+            sx={{ display: 'flex', alignItems: 'center' }}
+          >
+            {label}
+          </Typography>
+        )}
+      </Container>
+    );
+  },
+);
+
+export default Checkbox;

package/src/components/Checkbox/Checkbox.types.ts

@@ -0,0 +1,16 @@
+import type { BoxProps, CheckboxProps as MuiCheckboxProps } from '@mui/material';
+
+export interface CheckboxProps extends Omit<BoxProps<'span'>, 'onChange' | 'onChangeCapture'> {
+  value?: MuiCheckboxProps['value'];
+  name?: MuiCheckboxProps['name'];
+  checked?: MuiCheckboxProps['checked'];
+  defaultChecked?: MuiCheckboxProps['defaultChecked'];
+  disabled?: MuiCheckboxProps['disabled'];
+  required?: MuiCheckboxProps['required'];
+  indeterminate?: MuiCheckboxProps['indeterminate'];
+  onChange?: MuiCheckboxProps['onChange'];
+  onChangeCapture?: MuiCheckboxProps['onChangeCapture'];
+  label?: string;
+  inputProps?: MuiCheckboxProps['inputProps'];
+  inputRef?: MuiCheckboxProps['inputRef'];
+}

package/src/components/Checkbox/Checkbox.utils.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import { iconStyle } from './Checkbox.styled';
+
+export const UncheckedIcon = () => {
+  return (
+    <Box
+      component="span"
+      className="checkbox-icon"
+      sx={{
+        ...iconStyle,
+        background: `url("data:image/svg+xml,%0A%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 1.5H4C2.61929 1.5 1.5 2.61929 1.5 4V14C1.5 15.3807 2.61929 16.5 4 16.5H14C15.3807 16.5 16.5 15.3807 16.5 14V4C16.5 2.61929 15.3807 1.5 14 1.5ZM4 0C1.79086 0 0 1.79086 0 4V14C0 16.2091 1.79086 18 4 18H14C16.2091 18 18 16.2091 18 14V4C18 1.79086 16.2091 0 14 0H4Z' fill='%2399999B'/%3E%3C/svg%3E%0A")`,
+      }}
+    />
+  );
+};
+
+export const CheckedIcon = () => {
+  return (
+    <Box
+      component="span"
+      className="checkbox-icon"
+      sx={{
+        ...iconStyle,
+        background: `url("data:image/svg+xml,%0A%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 0C1.79086 0 0 1.79086 0 4V14C0 16.2091 1.79086 18 4 18H14C16.2091 18 18 16.2091 18 14V4C18 1.79086 16.2091 0 14 0H4ZM14.2516 7.14413C14.6074 6.72168 14.5533 6.09083 14.1309 5.73508C13.7084 5.37933 13.0776 5.43341 12.7218 5.85586L8.31824 11.0851L5.14993 8.37556C4.7302 8.01661 4.09895 8.06588 3.74 8.48561C3.38105 8.90533 3.43032 9.53658 3.85005 9.89553L7.78416 13.26C7.98672 13.4332 8.25006 13.5184 8.51571 13.4967C8.78135 13.4749 9.02732 13.348 9.19901 13.1441L14.2516 7.14413Z' fill='%2300C9EA'/%3E%3C/svg%3E%0A")`,
+      }}
+    />
+  );
+};
+
+export const IndeterminateIcon = () => {
+  return (
+    <Box
+      component="span"
+      className="checkbox-icon"
+      sx={{
+        ...iconStyle,
+        background: `url("data:image/svg+xml,%0A%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='18' height='18' rx='4' fill='%2300C9EA'/%3E%3Cpath d='M3 9C3 8.44772 3.44772 8 4 8H14C14.5523 8 15 8.44772 15 9V9C15 9.55228 14.5523 10 14 10H4C3.44772 10 3 9.55228 3 9V9Z' fill='white'/%3E%3C/svg%3E%0A")`,
+      }}
+    />
+  );
+};

package/src/components/Checkbox/index.ts

@@ -0,0 +1,5 @@
+import Checkbox from './Checkbox';
+import type { CheckboxProps } from './Checkbox.types';
+
+export { Checkbox };
+export type { CheckboxProps };

package/src/components/Chip/Chip.styled.ts

@@ -0,0 +1,120 @@
+import { Chip as MUIChip } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import tinycolor from 'tinycolor2';
+import theme from '../../theme';
+import { ChipProps } from './Chip.types';
+
+const StyledChip = styled(MUIChip, {
+  shouldForwardProp: (prop) => prop !== 'disableRipple',
+})<ChipProps>(({ className }) => {
+  return {
+    height: '24px',
+
+    // Preset Colors
+    '&.presetDefault.MuiChip-colorDefault': {
+      backgroundColor: theme.palette.neutralGrey[70],
+      color: theme.palette.neutralGrey[25],
+    },
+
+    '&.presetUploaded': {
+      backgroundColor: theme.palette.analysisStatus.Uploaded,
+      color: theme.palette.lunitTeal[90],
+    },
+
+    '&.presetAnalyzing': {
+      backgroundColor: theme.palette.analysisStatus.Analyzing,
+      color: theme.palette.purple[80],
+    },
+
+    '&.presetAnalyzed': {
+      backgroundColor: theme.palette.analysisStatus.Analyzed,
+      color: theme.palette.green[50],
+    },
+
+    '&.presetFailed': {
+      color: theme.palette.neutralGrey[0],
+      backgroundColor: `${tinycolor(theme.palette.analysisStatus.FailedEnabled).setAlpha(0.5)}`,
+      border: `1px solid ${theme.palette.analysisStatus.FailedEnabled}`,
+
+      '&.MuiChip-clickable:hover': {
+        backgroundColor: `${tinycolor(theme.palette.analysisStatus.FailedHover).setAlpha(0.5)}`,
+        border: `1px solid ${theme.palette.analysisStatus.FailedHover}`,
+      },
+      '&.MuiChip-clickable:active': {
+        backgroundColor: theme.palette.analysisStatus.FailedSelected,
+        border: `1px solid ${theme.palette.analysisStatus.FailedSelected}`,
+      },
+    },
+
+    '&.presetReady': {
+      color: theme.palette.neutralGrey[0],
+      backgroundColor: `${tinycolor(theme.palette.analysisStatus.Ready).setAlpha(0.5)}`,
+      border: `1px solid ${theme.palette.analysisStatus.Ready}`,
+      '&.MuiChip-clickable:hover': {
+        backgroundColor: `${tinycolor(theme.palette.analysisStatus.ReadyHover).setAlpha(0.5)}`,
+        border: `1px solid ${theme.palette.analysisStatus.ReadyHover}`,
+      },
+      '&.MuiChip-clickable:active': {
+        backgroundColor: theme.palette.analysisStatus.ReadySelected,
+        border: `1px solid ${theme.palette.analysisStatus.ReadySelected}`,
+      },
+    },
+
+    '&.presetInferred': {
+      color: theme.palette.neutralGrey[0],
+      backgroundColor: `${tinycolor(theme.palette.analysisStatus.Inferred).setAlpha(0.5)}`,
+      border: `1px solid ${theme.palette.analysisStatus.Inferred}`,
+      '&.MuiChip-clickable:hover': {
+        backgroundColor: `${tinycolor(theme.palette.analysisStatus.InferredHover).setAlpha(0.5)}`,
+        border: `1px solid ${theme.palette.analysisStatus.InferredHover}`,
+      },
+      '&.MuiChip-clickable:active': {
+        backgroundColor: theme.palette.analysisStatus.InferredSelected,
+        border: `1px solid ${theme.palette.analysisStatus.InferredSelected}`,
+      },
+    },
+
+    '&.presetInvalid': {
+      color: theme.palette.neutralGrey[0],
+      backgroundColor: `${tinycolor(theme.palette.analysisStatus.Invalid).setAlpha(0.5)}`,
+      border: `1px solid ${tinycolor(theme.palette.analysisStatus.Invalid).setAlpha(0.5)}`,
+      '&.MuiChip-clickable:hover': {
+        backgroundColor: `${tinycolor(theme.palette.analysisStatus.InvalidHover).setAlpha(0.5)}`,
+        border: `1px solid ${theme.palette.neutralGrey[0]}`,
+      },
+      '&.MuiChip-clickable:active': {
+        backgroundColor: theme.palette.analysisStatus.InvalidSelected,
+        border: `1px solid ${theme.palette.neutralGrey[0]}`,
+      },
+    },
+
+    // Label Font
+    '.MuiChip-label': {
+      fontStyle: 'normal',
+      fontWeight: className === 'presetDefault' ? '400' : '500',
+      fontSize: '14px',
+      lineHeight: '20px',
+    },
+
+    // Icons position
+    '.MuiChip-icon': {
+      height: '18px',
+      marginRight: '-7px',
+      color: 'unset', // used default set by preset
+    },
+
+    '.MuiChip-deleteIcon': {
+      height: '18px',
+      width: '18px',
+      marginLeft: '-7px',
+      color: theme.palette.neutralGrey[0],
+      '&:hover': {
+        color: theme.palette.neutralGrey[0],
+        borderRadius: '50%',
+        backgroundColor: theme.palette.neutralGrey[90],
+      },
+    },
+  };
+});
+
+export default StyledChip;

package/src/components/Chip/Chip.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { CloseSmall } from '../../icons';
+import StyledChip from './Chip.styled';
+import type { ChipProps } from './Chip.types';
+import { presetMap } from './Chip.utils';
+
+function Chip({ preset, label, icon, onDelete, onClick, ...otherProps }: ChipProps) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const overwrittenProps: any = {
+    label,
+    icon,
+    onDelete,
+    onClick,
+  };
+  // Remove undefined properties
+  Object.keys(overwrittenProps).forEach((key) =>
+    overwrittenProps[key] === undefined ? delete overwrittenProps[key] : {},
+  );
+
+  const newPreset = preset?.includes('failed') ? 'failed' : preset;
+
+  const customProps = {
+    disableRipple: true,
+    deleteIcon: <CloseSmall />,
+    ...presetMap[newPreset || 'default'],
+    ...overwrittenProps,
+    ...otherProps,
+  };
+
+  return <StyledChip {...customProps} />;
+}
+
+export default Chip;

package/src/components/Chip/Chip.types.ts

@@ -0,0 +1,18 @@
+import type { ChipProps as MuiChipProps } from '@mui/material';
+
+export type ChipsPreset =
+  | 'default'
+  | 'uploaded'
+  | 'analyzing'
+  | 'analyzed'
+  | 'analysis_failed'
+  | 'qc_failed'
+  | 'ready'
+  | 'inferred'
+  | 'inferencing'
+  | 'invalid';
+
+export interface ChipProps extends MuiChipProps {
+  preset?: ChipsPreset;
+  label?: string;
+}

package/src/components/Chip/Chip.utils.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Error16, StartT2 } from '../../icons';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const presetMap: any = {
+  default: {
+    className: 'presetDefault',
+    label: 'label',
+    color: 'default',
+  },
+  uploaded: {
+    className: 'presetUploaded',
+    label: 'Uploaded',
+  },
+  analyzing: {
+    className: 'presetAnalyzing',
+    label: 'Analyzing',
+  },
+  analyzed: {
+    className: 'presetAnalyzed',
+    label: 'Analyzed',
+  },
+  failed: {
+    className: 'presetFailed',
+    label: 'Failed',
+    icon: <Error16 />,
+  },
+  ready: {
+    className: 'presetReady',
+    label: 'Ready',
+    icon: <StartT2 />,
+  },
+  inferred: {
+    className: 'presetInferred',
+    label: 'Inferred',
+    icon: <StartT2 />,
+  },
+  inferencing: {
+    className: 'presetAnalyzing',
+    label: 'Analyzing',
+  },
+  invalid: {
+    className: 'presetInvalid',
+    label: 'Invalid',
+    icon: <Error16 />,
+  },
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export { presetMap };

package/src/components/Chip/index.ts

@@ -0,0 +1,4 @@
+import Chip from './Chip';
+import type { ChipProps, ChipsPreset } from './Chip.types';
+
+export { Chip, ChipProps, ChipsPreset };

package/src/components/DataTable/DataTable.styled.ts

@@ -0,0 +1,66 @@
+import { styled } from '@mui/material/styles';
+
+const DataGridContainer = styled('div')(({ theme }) => ({
+  height: '100%',
+  width: '100%',
+  '.MuiDataGrid-root': {
+    border: 'none',
+    overflowY: 'hidden',
+    borderRadius: 0,
+    '.MuiDataGrid-withBorderColor': {
+      borderColor: theme.palette.neutralGrey[80],
+    },
+    '.MuiDataGrid-withBorder': {
+      borderRight: `1px solid ${theme.palette.neutralGrey[80]}`,
+      padding: theme.spacing(0, 2),
+      height: '40px',
+      '&:last-child': { borderRight: 'none' },
+    },
+    '.MuiDataGrid-row': {
+      '&:last-child .MuiDataGrid-cell': {
+        borderBottom: `1px solid ${theme.palette.neutralGrey[80]}`,
+      },
+      '.MuiDataGrid-cellCheckbox': {
+        borderRight: 0,
+      },
+      '&:hover': { backgroundColor: theme.palette.others.RowHover },
+      '&.Mui-selected': {
+        backgroundColor: theme.palette.others.RowHover,
+        border: 'transparent',
+        '&:hover': { backgroundColor: theme.palette.others.RowHover },
+      },
+      '& .hover-shown': { opacity: 0 },
+      '&:hover .hover-shown, & .hover-shown.menu-active': { opacity: 1 },
+    },
+    '.MuiDataGrid-cell': {
+      ...theme.typography.body5,
+      borderBottom: `1px solid ${theme.palette.neutralGrey[80]}`,
+      padding: theme.spacing(0, 2),
+      '&:focus, &:focus-within, &:focus-visible': { outline: 'none' },
+    },
+    '.MuiDataGrid-columnSeparator': { position: 'relative' },
+    '.MuiDataGrid-iconSeparator': { display: 'none' },
+    '.MuiDataGrid-columnHeader': {
+      '&:focus': { outline: 'none' },
+    },
+    '.MuiDataGrid-columnHeaderTitleContainer': {
+      padding: 0,
+      '&:focus': { outline: 'none' },
+    },
+  },
+  '.MuiDataGrid-columnHeaders': {
+    borderTop: `1px solid ${theme.palette.neutralGrey[80]}`,
+    borderBottom: `1px solid ${theme.palette.neutralGrey[80]}`,
+    borderRadius: 0,
+    '&:focus': { outline: 'none' },
+    '.MuiDataGrid-columnHeaderCheckbox': {
+      borderRight: 0,
+    },
+  },
+  '.MuiDataGrid-columnHeaderTitle': {
+    ...theme.typography.body_b1,
+    color: theme.palette.neutralGrey[40],
+  },
+}));
+
+export default DataGridContainer;

package/src/components/DataTable/DataTable.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { DataGridProps } from '@mui/x-data-grid';
+import DataGridContainer from './DataTable.styled';
+import { Checkbox } from '../Checkbox';
+
+function DataTable({ rows, columns, ...otherProps }: DataGridProps) {
+  return (
+    <DataGridContainer>
+      <DataGrid
+        rows={rows}
+        columns={columns}
+        columnHeaderHeight={40}
+        rowHeight={40}
+        showColumnVerticalBorder
+        showCellVerticalBorder
+        disableColumnMenu
+        hideFooter
+        slots={{
+          noRowsOverlay: () => <div />,
+          baseCheckbox: Checkbox,
+        }}
+        {...otherProps}
+      />
+    </DataGridContainer>
+  );
+}
+
+export default DataTable;