@lunit/oui 1.0.0-alpha.5 → 1.0.0-alpha.7

package/dist/components/Button/styleds/GhostButton.styled.js

@@ -0,0 +1,128 @@
+import { ButtonBase, styled } from '@mui/material';
+import { baseButtonStyle, baseLargeStyle, baseSmallStyle } from './BaseButton.styled';
+import { baseLargeIconStyle, baseMediumIconStyle, baseSmallIconStyle } from './IconButton.styled';
+const ghostPrimaryStyle = (theme, focusOutline) => {
+    const mainColor = theme.palette.lunitTeal[40];
+    return {
+        ...baseButtonStyle(theme, false),
+        backgroundColor: 'transparent',
+        color: mainColor,
+        '&:hover': {
+            backgroundColor: theme.palette.neutralGrey[70],
+            opacity: 0.8,
+        },
+        '&:disabled': {
+            backgroundColor: 'transparent',
+            color: mainColor,
+            opacity: 0.4,
+        },
+        '&:focus': {
+            border: focusOutline ? `1px solid ${mainColor}` : '1px solid transparent',
+        },
+        '&:focus-visible': {
+            outline: 'none',
+            border: focusOutline ? `1px solid ${mainColor}` : '1px solid transparent',
+        },
+    };
+};
+const ghostSecondaryStyle = (theme, focusOutline) => {
+    const mainColor = theme.palette.neutralGrey[25];
+    return {
+        color: mainColor,
+        '&:hover': {
+            backgroundColor: theme.palette.neutralGrey[75],
+            opacity: 0.7,
+        },
+        '&:disabled': {
+            backgroundColor: 'transparent',
+            color: mainColor,
+            opacity: 0.4,
+        },
+        '&:focus': {
+            border: focusOutline ? `1px solid ${mainColor}` : '1px solid transparent',
+        },
+        '&:focus-visible': {
+            outline: 'none',
+            border: focusOutline ? `1px solid ${mainColor}` : '1px solid transparent',
+        },
+    };
+};
+const ghostErrorStyle = (theme, focusOutline) => {
+    const mainColor = theme.palette.red[5];
+    return {
+        color: mainColor,
+        '&:hover': {
+            backgroundColor: theme.palette.neutralGrey[70],
+            opacity: 0.7,
+        },
+        '&:disabled': {
+            backgroundColor: 'transparent',
+            color: mainColor,
+            opacity: 0.4,
+        },
+        '&:focus': {
+            border: focusOutline ? `1px solid ${mainColor}` : '1px solid transparent',
+        },
+        '&:focus-visible': {
+            outline: 'none',
+            border: focusOutline ? `1px solid ${mainColor}` : '1px solid transparent',
+        },
+    };
+};
+const BaseGhostButton = styled(ButtonBase, {
+    shouldForwardProp: (prop) => !['color', 'variant', 'size', 'focusOutline', 'isIconOnly'].includes(prop.toString()),
+})(({ theme, color, size, focusOutline, isIconOnly }) => {
+    let resultStyle = ghostPrimaryStyle(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,
+            ...ghostErrorStyle(theme, focusOutline),
+        };
+    }
+    if (color === 'secondary') {
+        resultStyle = {
+            ...resultStyle,
+            ...ghostSecondaryStyle(theme, focusOutline),
+        };
+    }
+    return resultStyle;
+});
+export { ghostPrimaryStyle, ghostSecondaryStyle, ghostErrorStyle, BaseGhostButton };
+//# sourceMappingURL=GhostButton.styled.js.map

package/dist/components/Button/styleds/IconButton.styled.js

@@ -0,0 +1,23 @@
+const baseSmallIconStyle = {
+    height: '28px',
+    width: '28px',
+    minWidth: '28px',
+    padding: '4px',
+};
+const baseLargeIconStyle = {
+    fontWeight: 600,
+    fontSize: '16px',
+    lineHeight: '22px',
+    // textTransform: 'capitalize', // Causes type error
+    height: '44px',
+    width: '44px',
+    padding: '12px',
+};
+const baseMediumIconStyle = {
+    height: '36px',
+    width: '36px',
+    minWidth: '36px',
+    padding: '8px',
+};
+export { baseMediumIconStyle, baseSmallIconStyle, baseLargeIconStyle };
+//# sourceMappingURL=IconButton.styled.js.map

package/dist/components/Button/styleds/OutlinedButton.styled.js

@@ -0,0 +1,136 @@
+import { ButtonBase, styled } from '@mui/material';
+import { baseButtonStyle, baseLargeStyle, baseSmallStyle } from './BaseButton.styled';
+import { baseLargeIconStyle, baseMediumIconStyle, baseSmallIconStyle } from './IconButton.styled';
+const outlinedPrimaryStyle = (theme, focusOutline) => {
+    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, focusOutline) => {
+    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, focusOutline) => {
+    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()),
+})(({ 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 };
+//# sourceMappingURL=OutlinedButton.styled.js.map

package/dist/components/Card/Card.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import BaseCard from './Card.styled';
+function Card({ size, selected, onClick, children, ...props }) {
+    return (_jsx(BaseCard, { size: size, selected: selected, onClick: onClick, ...props, children: children }));
+}
+export default Card;
+//# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.styled.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card as MuiCard, styled } from '@mui/material';
+const BaseCard = styled(({ ...props }) => _jsx(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;
+//# sourceMappingURL=Card.styled.js.map

package/dist/components/Card/Card.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Card.types.js.map

package/dist/components/Card/index.js

@@ -0,0 +1,3 @@
+import Card from './Card';
+export { Card };
+//# sourceMappingURL=index.js.map

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Typography } from '@mui/material';
+import clsx from 'clsx';
+import { Container, StyledCheckbox } from './Checkbox.styled';
+import { UncheckedIcon, CheckedIcon, IndeterminateIcon } from './Checkbox.utils';
+const Checkbox = forwardRef(({ value, name, checked, defaultChecked, disabled, required, indeterminate, onChange, onChangeCapture, label, inputProps, inputRef, ...rootProps }, ref) => {
+    return (_jsxs(Container, { ...rootProps, className: clsx('checkbox', rootProps.className), component: label != null ? 'label' : 'span', ref: ref, children: [_jsx(StyledCheckbox, { disableRipple: true, icon: _jsx(UncheckedIcon, {}), checkedIcon: _jsx(CheckedIcon, {}), indeterminateIcon: _jsx(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 && (_jsx(Typography, { variant: "body5", sx: { display: 'flex', alignItems: 'center' }, children: label }))] }));
+});
+export default Checkbox;
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox/Checkbox.styled.js

@@ -0,0 +1,25 @@
+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',
+};
+//# sourceMappingURL=Checkbox.styled.js.map

package/dist/components/Checkbox/Checkbox.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Checkbox.types.js.map

package/dist/components/Checkbox/Checkbox.utils.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { iconStyle } from './Checkbox.styled';
+export const UncheckedIcon = () => {
+    return (_jsx(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 (_jsx(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 (_jsx(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")`,
+        } }));
+};
+//# sourceMappingURL=Checkbox.utils.js.map

package/dist/components/Checkbox/index.js

@@ -0,0 +1,3 @@
+import Checkbox from './Checkbox';
+export { Checkbox };
+//# sourceMappingURL=index.js.map

package/dist/components/Chip/Chip.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CloseSmall } from '../Icons';
+import StyledChip from './Chip.styled';
+import { presetMap } from './Chip.utils';
+function Chip({ preset, label, icon, onDelete, onClick, ...otherProps }) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const overwrittenProps = {
+        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: _jsx(CloseSmall, {}),
+        ...presetMap[newPreset || 'default'],
+        ...overwrittenProps,
+        ...otherProps,
+    };
+    return _jsx(StyledChip, { ...customProps });
+}
+export default Chip;
+//# sourceMappingURL=Chip.js.map

package/dist/components/Chip/Chip.styled.js

@@ -0,0 +1,106 @@
+import { Chip as MUIChip } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import tinycolor from 'tinycolor2';
+import theme from '../../theme';
+const StyledChip = styled(MUIChip, {
+    shouldForwardProp: (prop) => prop !== 'disableRipple',
+})(({ 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;
+//# sourceMappingURL=Chip.styled.js.map

package/dist/components/Chip/Chip.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Chip.types.js.map

package/dist/components/Chip/Chip.utils.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Error16, StartT2 } from '../Icons';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const presetMap = {
+    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: _jsx(Error16, {}),
+    },
+    ready: {
+        className: 'presetReady',
+        label: 'Ready',
+        icon: _jsx(StartT2, {}),
+    },
+    inferred: {
+        className: 'presetInferred',
+        label: 'Inferred',
+        icon: _jsx(StartT2, {}),
+    },
+    inferencing: {
+        className: 'presetAnalyzing',
+        label: 'Analyzing',
+    },
+    invalid: {
+        className: 'presetInvalid',
+        label: 'Invalid',
+        icon: _jsx(Error16, {}),
+    },
+};
+// eslint-disable-next-line import/prefer-default-export
+export { presetMap };
+//# sourceMappingURL=Chip.utils.js.map

package/dist/components/Chip/index.js

@@ -0,0 +1,3 @@
+import Chip from './Chip';
+export { Chip };
+//# sourceMappingURL=index.js.map

package/dist/components/DataTable/DataTable.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DataGrid } from '@mui/x-data-grid';
+import DataGridContainer from './DataTable.styled';
+import { Checkbox } from '../Checkbox';
+function DataTable({ rows, columns, ...otherProps }) {
+    return (_jsx(DataGridContainer, { children: _jsx(DataGrid, { rows: rows, columns: columns, columnHeaderHeight: 40, rowHeight: 40, showColumnVerticalBorder: true, showCellVerticalBorder: true, disableColumnMenu: true, hideFooter: true, slots: {
+                noRowsOverlay: () => _jsx("div", {}),
+                baseCheckbox: Checkbox,
+            }, ...otherProps }) }));
+}
+export default DataTable;
+//# sourceMappingURL=DataTable.js.map

package/dist/components/DataTable/DataTable.styled.js

@@ -0,0 +1,65 @@
+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;
+//# sourceMappingURL=DataTable.styled.js.map

package/dist/components/DataTable/index.js

@@ -0,0 +1,2 @@
+export { default as DataTable } from './DataTable';
+//# sourceMappingURL=index.js.map