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

package/dist/components/TextField/TextInput.styled.js

@@ -0,0 +1,103 @@
+import { styled } from '@mui/material';
+import { InputMsg, styles } from '../BaseTextField/BaseTextField.styled';
+const baseTextInputStyle = (theme) => {
+    return {
+        ...styles.baseTextFieldStyle(theme),
+        textOverflow: 'ellipsis',
+    };
+};
+const textInputLarge = {
+    padding: '11px 16px',
+};
+const textInputWithLeftIcon = {
+    paddingLeft: '44px',
+};
+const BaseTextInput = styled('input', {
+    shouldForwardProp: (prop) => ![
+        'error',
+        'large',
+        'showClear',
+        'leftIcon',
+        'width',
+        'OuterBoxProps',
+        'InputContainerProps',
+    ].includes(prop.toString()),
+})(({ theme, large, error, leftIcon, width }) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let resultStyle = {
+        ...baseTextInputStyle(theme),
+        width: 
+        // eslint-disable-next-line no-nested-ternary
+        typeof width !== 'undefined' ? (typeof width === 'number' ? `${width}px` : width) : width,
+    };
+    if (error) {
+        resultStyle = {
+            ...resultStyle,
+            ...styles.baseTextFieldErrorStyle(theme),
+        };
+    }
+    if (large) {
+        resultStyle = {
+            ...resultStyle,
+            ...textInputLarge,
+        };
+    }
+    if (leftIcon) {
+        resultStyle = {
+            ...resultStyle,
+            ...textInputWithLeftIcon,
+        };
+    }
+    return resultStyle;
+});
+const LeftIconContainer = styled('div')(() => {
+    return {
+        position: 'absolute',
+        left: '0px',
+        top: '0px',
+        zIndex: '2',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingLeft: '16px',
+        paddingRight: '8px',
+        pointerEvents: 'none',
+    };
+});
+const RightIconContainer = styled('div')(() => {
+    return {
+        position: 'absolute',
+        right: '16px',
+        top: '0px',
+        zIndex: '2',
+        height: '36px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    };
+});
+const ButtonWrapper = styled('button')(({ theme }) => {
+    return {
+        width: '28px',
+        height: '28px',
+        backgroundColor: 'transparent',
+        opacity: '0.8',
+        border: 'none',
+        color: theme.palette.neutralGrey[45],
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: '8px',
+        padding: 0,
+        '&:hover': {
+            backgroundColor: theme.palette.neutralGrey[70],
+            cursor: 'pointer',
+        },
+        '&:active': {
+            backgroundColor: theme.palette.neutralGrey[60],
+        },
+    };
+});
+export { BaseTextInput, InputMsg, LeftIconContainer, RightIconContainer, ButtonWrapper };
+//# sourceMappingURL=TextInput.styled.js.map

package/dist/components/TextField/TextInput.types.js

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

package/dist/components/TextField/TextInput.utils.js

@@ -0,0 +1,6 @@
+// Function for inferring required input by props
+function isPasswordInput(props) {
+    return props.type === 'password';
+}
+export default isPasswordInput;
+//# sourceMappingURL=TextInput.utils.js.map

package/dist/components/TextField/components/Buttons.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CloseSmall, HideSmall, ShowSmall } from '../../Icons';
+import { ButtonWrapper } from '../TextInput.styled';
+function ClearButton({ onClick }) {
+    return (_jsx(ButtonWrapper, { onClick: onClick, children: _jsx(CloseSmall, { fontSize: "small" }) }));
+}
+function ShowHidePasswordButton({ onClick, isHidden, }) {
+    return (_jsx(ButtonWrapper, { onClick: onClick, children: isHidden ? _jsx(HideSmall, {}) : _jsx(ShowSmall, {}) }));
+}
+export { ClearButton, ShowHidePasswordButton };
+//# sourceMappingURL=Buttons.js.map

package/dist/components/TextField/components/NormalTextInput.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useState } from 'react';
+import { InputMsg, BaseTextFieldContainer, BaseTextFieldBox, } from '../../BaseTextField/BaseTextField.styled';
+import { BaseTextInput, LeftIconContainer, RightIconContainer } from '../TextInput.styled';
+import { ClearButton } from './Buttons';
+const NormalTextInput = forwardRef((props, ref) => {
+    const { error, helperMsg, leftIcon, rightIcon, onClearButtonClick, inputSX, ...inputProps } = props;
+    const [showClear, setShowClear] = useState(!!props.defaultValue ?? false);
+    const showRightIcon = useMemo(() => {
+        return (rightIcon ?? // if rightIcon is passed, use it, else use clear button
+            (!props.disabled && // hide if disabled
+                !props.readOnly && // hide if readonly
+                !!onClearButtonClick && // hide if no function (it doesn't do anything)
+                showClear));
+    }, [props.disabled, onClearButtonClick, props.readOnly, rightIcon, showClear]);
+    function handleClearButtonClick() {
+        onClearButtonClick?.();
+        setShowClear(false);
+    }
+    function changeHandler(e) {
+        // wrap incoming onChange
+        if (props.onChange) {
+            props.onChange(e);
+        }
+        // rightIcon overrides clear button
+        if (rightIcon)
+            return;
+        // handle show/hide of clear button
+        if (e.target.value) {
+            if (!showClear)
+                setShowClear(true);
+        }
+        else if (showClear)
+            setShowClear(false);
+    }
+    return (_jsxs(BaseTextFieldBox, { ...props.OuterBoxProps, width: props.width, children: [_jsxs(BaseTextFieldContainer, { ...props.InputContainerProps, width: props.width, children: [leftIcon && (_jsx(LeftIconContainer, { sx: inputProps.disabled ? { opacity: '0.8' } : undefined, children: leftIcon })), _jsx(BaseTextInput, { ref: ref, ...inputProps, error: !!error, onChange: (e) => changeHandler(e), leftIcon: leftIcon, sx: inputSX ?? { paddingRight: showRightIcon ? '44px' : '16px' } }), showRightIcon && (_jsxs(RightIconContainer, { children: [rightIcon && rightIcon, !rightIcon && _jsx(ClearButton, { onClick: () => handleClearButtonClick() })] }))] }), error ? (_jsx(InputMsg, { variant: "body5", error: true, children: error })) : (helperMsg && _jsx(InputMsg, { variant: "body5", children: helperMsg }))] }));
+});
+export default NormalTextInput;
+//# sourceMappingURL=NormalTextInput.js.map

package/dist/components/TextField/components/PasswordInput.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { InputMsg, BaseTextFieldContainer } from '../../BaseTextField/BaseTextField.styled';
+import { BaseTextInput, LeftIconContainer, RightIconContainer } from '../TextInput.styled';
+import { ShowHidePasswordButton } from './Buttons';
+function PasswordInputContainer(props) {
+    const { error, disabled, helperMsg, leftIcon, children, hidePassword, handlePasswordShowHide, width, OuterBoxProps, } = props;
+    return (_jsxs(BaseTextFieldContainer, { ...OuterBoxProps, width: width, children: [leftIcon && (_jsx(LeftIconContainer, { sx: disabled ? { opacity: '0.8' } : undefined, children: leftIcon })), children, _jsx(RightIconContainer, { error: error, children: !disabled && (_jsx(ShowHidePasswordButton, { onClick: (event) => {
+                        event.preventDefault();
+                        handlePasswordShowHide();
+                    }, isHidden: hidePassword })) }), error ? (_jsx(InputMsg, { variant: "body5", error: true, children: error })) : (helperMsg && _jsx(InputMsg, { variant: "body5", children: helperMsg }))] }));
+}
+const PasswordInput = forwardRef((props, ref) => {
+    const { error, helperMsg, leftIcon, type, inputSX, ...otherInputProps } = props;
+    const [hidePassword, setHidePassword] = useState(true);
+    function handlePasswordShowHide() {
+        setHidePassword(!hidePassword);
+    }
+    return (_jsx(PasswordInputContainer, { ...props, hidePassword: hidePassword, handlePasswordShowHide: () => handlePasswordShowHide(), children: _jsx(BaseTextInput, { type: hidePassword ? 'password' : 'text', ref: ref, ...otherInputProps, leftIcon: leftIcon, sx: inputSX }) }));
+});
+export default PasswordInput;
+//# sourceMappingURL=PasswordInput.js.map

package/dist/components/TextField/index.js

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

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@mui/material';
+import { forwardRef } from 'react';
+import BaseTooltip from './Tooltip.styled';
+const Tooltip = forwardRef(({ icon, title, children, size = 'small', placement = 'bottom', noPadding = false, ...otherProps }, ref) => {
+    return (_jsx(BaseTooltip, { ref: ref, arrow: true, size: size, PopperProps: {
+            popperOptions: {
+                modifiers: [
+                    {
+                        name: 'offset',
+                        enabled: true,
+                        options: {
+                            offset: [0, 6],
+                        },
+                    },
+                ],
+            },
+        }, title: icon && size === 'small' ? (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'row', gap: '8px' }, children: [icon, title && _jsx(Typography, { variant: "body5", children: title })] })) : (title), placement: placement, noPadding: noPadding, ...otherProps, children: children }));
+});
+export default Tooltip;
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip/Tooltip.styled.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip as MuiTooltip, styled, tooltipClasses } from '@mui/material';
+import typographyOptions from '../../foundations/typography';
+import { resizeArrowBySize, setMarginByPlacement, setPaddingBySize } from './Tooltip.utils';
+const BaseTooltip = styled(({ className, ref, ...props }) => (_jsx(MuiTooltip, { ...props, ref: ref, classes: { popper: className } })), {
+    shouldForwardProp: (prop) => prop !== 'noPadding',
+})(({ theme, size = 'small', placement = 'bottom', noPadding }) => ({
+    [`& .${tooltipClasses.tooltip}`]: {
+        ...typographyOptions.body5,
+        margin: '0px !important',
+        padding: noPadding ? '0px !important' : setPaddingBySize(size),
+        backgroundColor: theme.palette.neutralGrey[75],
+        borderRadius: size === 'small' ? '4px' : '8px',
+        filter: 'drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.32)) drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.4))',
+    },
+    [`& .${tooltipClasses.arrow}`]: {
+        color: theme.palette.neutralGrey[75],
+        margin: `${setMarginByPlacement(placement, resizeArrowBySize(size, placement))} !important`,
+        width: `${resizeArrowBySize(size, placement).width}px  !important`,
+        height: `${resizeArrowBySize(size, placement).height}px !important`,
+    },
+}));
+export default BaseTooltip;
+//# sourceMappingURL=Tooltip.styled.js.map

package/dist/components/Tooltip/Tooltip.types.js

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

package/dist/components/Tooltip/Tooltip.utils.js

@@ -0,0 +1,30 @@
+// small(10px * 6px) -> (10/2)^2 + 6^2 = 7.8^2
+// large(16px * 8px)   -> (16/2)^2 + 8^2 = 11.3^2
+const setArrowSizeBySize = {
+    small: { width: 11, height: 7.8 },
+    large: { width: 16, height: 11.3 },
+};
+const tooltipPlacementToSize = {
+    bottom: setArrowSizeBySize,
+    left: setArrowSizeBySize,
+    right: setArrowSizeBySize,
+    top: setArrowSizeBySize,
+};
+export const resizeArrowBySize = (tooltipType, tooltipPlacement) => {
+    const size = tooltipPlacementToSize[tooltipPlacement][tooltipType];
+    if (tooltipPlacement === 'left' || tooltipPlacement === 'right') {
+        return { width: size.height, height: size.width };
+    }
+    return size;
+};
+export const setMarginByPlacement = (tooltipPlacement, margin) => ({
+    bottom: `-${margin.height}px 0 0 0`,
+    right: `0 0 0 -${margin.width}px`,
+    left: `0 -${margin.width}px 0 0`,
+    top: `0 0 -${margin.height}px 0`,
+})[tooltipPlacement];
+export const setPaddingBySize = (tooltipSize) => ({
+    small: '6px 8px',
+    large: '12px 16px',
+})[tooltipSize];
+//# sourceMappingURL=Tooltip.utils.js.map

package/dist/components/Tooltip/index.js

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

package/dist/components/UploadManager/UploadManager.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Grow, Typography, Box } from '@mui/material';
+import { ArrowUp, Close, Success, Error16, RefreshLeft } from '../Icons';
+import { useState, Fragment, useMemo } from 'react';
+import { Divider } from '../Divider';
+import { Button } from '../Button';
+import { LinearProgress } from '../Progress';
+import { Tooltip } from '../Tooltip';
+import theme from '../../theme';
+import { StyledPaper, StyledToolbar, StyledToolbarButtonContainer, StyledCollapse, StyledUploadFile, } from './UploadManager.styled';
+/**
+ * Component used inside the UploadManager to display a file
+ */
+const UploadFile = ({ file, onCancel, onRetry }) => {
+    const [mouseOnErrorIconButton, setMouseOnErrorIconButton] = useState(false);
+    const progress = useMemo(() => {
+        if (file.meta?.calculatedProgress) {
+            // return calculated progress for mrxs files
+            return file.meta.calculatedProgress;
+        }
+        return file.progress?.percentage || 0;
+    }, [file.meta, file.progress?.percentage]);
+    const fileFormatConverting = useMemo(() => {
+        if (file.extension === 'isyntax') {
+            return 'iSyntax';
+        }
+        if (file.extension === 'i2syntax') {
+            return 'i2Syntax';
+        }
+        return '';
+    }, [file]);
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledUploadFile, { children: [!file.meta?.errorMessage && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body5", sx: {
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                }, children: file.name }), progress < 100 && (_jsx(Tooltip, { title: "Cancel", children: _jsx(Box, { children: _jsx(Button, { onClick: () => onCancel && onCancel(file.id), variant: "ghost", color: "secondary", icon: _jsx(Close, { style: { color: theme.palette.neutralGrey[40] } }) }) }) })), progress === 100 && file.meta.postProcessComplete && (_jsx(Tooltip, { title: "Done", children: _jsx(Box, { children: _jsx(Button, { variant: "ghost", icon: _jsx(Success, {}) }) }) }))] })), file.meta?.errorMessage && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body5", sx: {
+                                    whiteSpace: 'nowrap',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    flexShrink: 6,
+                                }, children: file.name }), _jsx(Typography, { color: "error", variant: "body4", sx: {
+                                    marginRight: '30px',
+                                    flexGrow: 3,
+                                    flexShrink: 0,
+                                    flexBasis: 'auto',
+                                    textAlign: 'right',
+                                    maxWidth: '290px',
+                                    whiteSpace: 'pre-wrap',
+                                }, children: file.meta?.errorMessage }), _jsx(Tooltip, { title: file.meta.retry ? 'Retry' : 'Retry by dragging and dropping the file again.', placement: "top", children: _jsx(Box, { children: _jsx(Button, { onMouseEnter: () => file.meta.retry && setMouseOnErrorIconButton(true), onMouseLeave: () => file.meta.retry && setMouseOnErrorIconButton(false), onClick: () => {
+                                            if (file.meta.retry) {
+                                                setMouseOnErrorIconButton(false);
+                                                if (onRetry)
+                                                    onRetry(file.id);
+                                            }
+                                        }, icon: mouseOnErrorIconButton ? (_jsx(RefreshLeft, { style: { color: theme.palette.neutralGrey[0] } })) : (_jsx(Error16, { style: { color: theme.palette.red[5] } })), variant: "ghost", color: "secondary", sx: {
+                                            cursor: file.meta.retry ? 'pointer' : 'default',
+                                        } }) }) })] })), !file.meta?.errorMessage && file.meta?.postProcessConverting && (_jsxs(Typography, { variant: "body5", sx: {
+                            marginRight: '30px',
+                            flexGrow: 3,
+                            flexShrink: 0,
+                            flexBasis: 'auto',
+                            textAlign: 'right',
+                            maxWidth: '290px',
+                            whiteSpace: 'pre-wrap',
+                        }, children: ["Converting ", fileFormatConverting, " file..."] }))] }), !file.meta?.errorMessage && (_jsx(_Fragment, { children: file.progress?.uploadStarted > 0 && (_jsxs(_Fragment, { children: [progress < 100 && (_jsx(LinearProgress, { variant: "determinate", value: progress })), progress >= 100 && !file.meta?.postProcessComplete && _jsx(LinearProgress, {})] })) }))] }));
+};
+/**
+ * Component used to display a list of files
+ */
+const UploadManager = ({ title, subTitle, files, onClose, onCancel, onRetry, }) => {
+    const [expanded, setExpanded] = useState(true);
+    const handleExpandClick = () => {
+        setExpanded((exp) => !exp);
+    };
+    return (_jsx(Grow, { in: true, 
+        // Should this be configurable?
+        style: {
+            position: 'absolute',
+            bottom: '20px',
+            right: '20px',
+        }, children: _jsxs(StyledPaper, { elevation: 1, children: [_jsxs(StyledToolbar, { children: [_jsx(Typography, { variant: "h9", children: title }), _jsx(Typography, { variant: "body1", sx: { marginLeft: '8px' }, children: subTitle }), _jsxs(StyledToolbarButtonContainer, { children: [_jsx(Tooltip, { title: expanded ? 'Minimize' : 'Maximize', children: _jsx(Box, { children: _jsx(Button, { onClick: handleExpandClick, variant: "ghost", color: "secondary", icon: _jsx(ArrowUp, { style: { color: theme.palette.neutralGrey[40] } }), size: "small", sx: {
+                                                transform: expanded ? 'rotate(0deg)' : 'rotate(180deg)',
+                                            } }) }) }), _jsx(Tooltip, { title: "Close", children: _jsx(Box, { children: _jsx(Button, { onClick: onClose, variant: "ghost", color: "secondary", icon: _jsx(Close, { style: { color: theme.palette.neutralGrey[40] } }), size: "small" }) }) })] })] }), expanded && _jsx(Divider, { orientation: "horizontal" }), _jsx(StyledCollapse, { in: expanded, timeout: "auto", unmountOnExit: true, children: files.map((download, index) => (_jsxs(Fragment, { children: [_jsx(UploadFile, { file: download, onCancel: onCancel, onRetry: onRetry }), index !== files.length - 1 && _jsx(Divider, { orientation: "horizontal" })] }, download.id))) })] }) }));
+};
+export default UploadManager;
+//# sourceMappingURL=UploadManager.js.map

package/dist/components/UploadManager/UploadManager.styled.js

@@ -0,0 +1,38 @@
+import { Paper, Toolbar, Collapse } from '@mui/material';
+import { styled } from '@mui/material/styles';
+const StyledPaper = styled(Paper)(({ theme }) => ({
+    overflow: 'hidden',
+    borderRadius: '10px',
+    width: '500px',
+    backgroundColor: theme.palette.neutralGrey[90],
+}));
+const StyledToolbar = styled(Toolbar)({
+    padding: '20px 40px 20px 32px',
+    paddingRight: '40px !important',
+    paddingLeft: '32px !important',
+    color: '#fff',
+    minHeight: 'unset !important',
+});
+const StyledToolbarButtonContainer = styled(Toolbar)({
+    position: 'absolute',
+    display: 'flex',
+    gap: '12px',
+    right: '30px',
+    paddingRight: '4px !important',
+});
+const StyledCollapse = styled(Collapse)({
+    maxHeight: '320px',
+    overflowY: 'auto',
+    overflowX: 'hidden',
+});
+const StyledUploadFile = styled('div')({
+    display: 'flex',
+    justifyContent: 'space-between',
+    gap: '16px',
+    alignItems: 'center',
+    padding: '20px 30px 20px 32px',
+    paddingRight: '30x !important',
+    paddingLeft: '32px !important',
+});
+export { StyledPaper, StyledToolbar, StyledToolbarButtonContainer, StyledCollapse, StyledUploadFile, };
+//# sourceMappingURL=UploadManager.styled.js.map

package/dist/components/UploadManager/UploadManager.types.js

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

package/dist/components/UploadManager/index.js

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

package/dist/components/index.js

@@ -0,0 +1,24 @@
+export * from './Alert';
+export * from './Button';
+export * from './Card';
+export * from './Checkbox';
+export * from './Chip';
+export * from './DataTable';
+export * from './DatePicker';
+export * from './Dialog';
+export * from './Divider';
+export * from './Dropdown';
+export * from './FileDnDZone';
+export * from './Icons';
+export * from './List';
+export * from './LoadingIndicator';
+export * from './Menu';
+export * from './ProductLabel';
+export * from './Progress';
+export * from './Radio';
+export * from './Stepper';
+export * from './TabbedPanel';
+export * from './TextField';
+export * from './Tooltip';
+export * from './UploadManager';
+//# sourceMappingURL=index.js.map

package/dist/foundations/index.js

@@ -0,0 +1,4 @@
+export { default as palette } from './palette';
+export { default as typography } from './typography';
+export { default as spacing } from './spacing';
+//# sourceMappingURL=index.js.map

package/dist/foundations/palette.js

@@ -0,0 +1,209 @@
+const palette = {
+    brand: {
+        primary: '#3BC9DB',
+        secondary: '#96EDFF',
+    },
+    text: {
+        primary: '#FFFFFF',
+        secondary: '#AFAFB1',
+        disabled: '#A8A8A8',
+    },
+    background: {},
+    common: {},
+    lunitTeal: {
+        5: '#EAFAFF',
+        10: '#96EDFF',
+        20: '#30DFFC',
+        30: '#3BC9DB',
+        40: '#00C9EA',
+        50: '#0ABEE5',
+        60: '#00B3DB',
+        70: '#048AB4',
+        80: '#05495F',
+        90: '#002930',
+    },
+    neutralGrey: {
+        0: '#FFFFFF',
+        5: '#FAFAFB',
+        10: '#FAFAFA',
+        15: '#F1F1F4',
+        20: '#DFDFE2',
+        25: '#D4D4D6',
+        30: '#C6C6C8',
+        35: '#C4C4C4',
+        40: '#AFAFB1',
+        45: '#99999B',
+        50: '#7F7F81',
+        55: '#737377',
+        60: '#747477',
+        65: '#626264',
+        70: '#4E4E50',
+        75: '#3E3E40',
+        80: '#363B3E',
+        85: '#333336',
+        90: '#2D2D2F',
+        95: '#1F1F21',
+        96: '#1E1E1E',
+        97: '#111113',
+        100: '#000000',
+    },
+    yellow: {
+        5: '#FAF089',
+        10: '#FFE500',
+        20: '#FFE600',
+    },
+    orange: {
+        5: '#FFD9BE',
+        10: '#FFB784',
+        20: '#FF9B54',
+    },
+    magenta: {
+        5: '#F9D1D1',
+        10: '#FFC9C9',
+        20: '#FAB2D3',
+        30: '#FFA4B6',
+        40: '#FF8787',
+        50: '#FF8389',
+        60: '#FB7791',
+        70: '#F765A3',
+        80: '#FF50A0',
+        90: '#E41976',
+        100: '#B20052',
+    },
+    red: {
+        5: '#FA4D56',
+        10: '#FE353F',
+        20: '#FF0000',
+        30: '#E63B28',
+        40: '#DA1E28',
+        50: '#A60D0D',
+    },
+    blue: {
+        5: '#A5D8FF',
+        10: '#A6C0D6',
+        15: '#4DABF7',
+        20: '#78A9FF',
+        25: '#748FFC',
+        30: '#587EFC',
+        35: '#1971D7',
+        40: '#3A5DD9',
+        45: '#4F5DC5',
+        50: '#443AFF',
+        55: '#165BAA',
+        60: '#0055AB',
+        65: '#132A9B',
+        70: '#034480',
+        75: '#0B1354',
+    },
+    green: {
+        10: '#73FF0C',
+        20: '#66BB6A',
+        30: '#42BE65',
+        40: '#24A148',
+        50: '#014B58',
+    },
+    purple: {
+        5: '#BAC8FF',
+        10: '#B0C0F4',
+        15: '#D0BFFF',
+        20: '#C378DB',
+        30: '#9775FA',
+        40: '#9E6BF0',
+        50: '#A155B9',
+        60: '#8D2FAB',
+        70: '#7E41DA',
+        80: '#3612A1',
+    },
+    pdl1Tps: {
+        Cutoff1: '#5091FF',
+        Cutoff49: '#0CA678',
+        Cutoff50: '#F76707',
+        PositiveTc: '#AD1EFF',
+        NegativeTc: '#1EFCFF',
+    },
+    pdl1Cps: {
+        Cutoff1: '#5091FF',
+        Cutoff10: '#F76707',
+        Ca: '#0CA678',
+        Cis: '#5B8DEF',
+        Pch: '#FF8989',
+        PcL: '#D6C896',
+        PositiveTc: '#AD1EFF',
+        NegativeTc: '#1EFCFF',
+        PositiveIc: '#FFEE59',
+        NegativeIc: '#FF5403',
+    },
+    io: {
+        BmrkCutoff1: '#5091FF',
+        BmrkCutoff20: '#EE5140',
+        Inflamed: '#C65F6E',
+        ImmuneEx: '#91C4A3',
+        ImmuneDsrt: '#143DDE',
+        Ca: '#0CA678',
+        Cs: '#91C4A3',
+        Lc: '#FFF950',
+        Tc: '#F76707',
+    },
+    tumorPurity: {
+        DensityBar: '#EE5140',
+        Ca: '#0CA678',
+        Tc: '#F76707',
+        Ntc: '#FFF950',
+    },
+    her2: {
+        Ca: '#0CA678',
+        Cis: '#5B8DEF',
+        Her2_Negative: '#4B93F9',
+        Her2_1_Positive: '#79FD4B',
+        Her2_2_Positive: '#F8E71C',
+        Her2_3_Positive: '#EF0B0B',
+    },
+    erpr: {
+        Ca: '#0CA678',
+        Cis: '#5B8DEF',
+        Erpr_Negative: '#4B93F9',
+        Erpr_1_Positive: '#79FD4B',
+        Erpr_2_Positive: '#F8E71C',
+        Erpr_3_Positive: '#EF0B0B',
+        Cutoff0: '#75F0DA',
+        Cutoff1: '#FD6D0D',
+        Cutoff10: '#9E5EFF',
+    },
+    others: {
+        RowHover: 'rgba(134, 148, 177, 0.08)',
+        DatePickerHover: 'rgba(114, 146, 253, 0.3)',
+        Teal50Op20: 'rgba(0, 201, 234, 0.2)',
+        Teal50Op18: 'rgba(0, 201, 234, 0.18)',
+        Grn20Op32: 'rgba(102, 187, 106, 0.32)',
+        Grn30OP32: 'rgba(66, 190, 101, 0.32)',
+    },
+    alert: {
+        InfoBG: 'rgba(55, 81, 167, 0.92)',
+        SuccessBG: 'rgba(0, 137, 159, 0.92)',
+        ErrorBG: 'rgba(116, 25, 15, 0.9)',
+        WarningBG: 'rgba(209, 188, 0, 0.7)',
+    },
+    analysisStatus: {
+        Uploaded: '#99B8D1',
+        Analyzing: '#AA99EC',
+        Analyzed: '#8DCEC3',
+        FailedEnabled: '#CA1414',
+        FailedHover: '#FF8787',
+        FailedSelected: '#A60D0D',
+        Ready: '#00D1FF',
+        ReadyHover: '#38E3FF',
+        ReadySelected: '#006379',
+        Inferred: '#3E63DD',
+        InferredHover: '#46BCFF',
+        InferredSelected: '#273E89',
+        Invalid: '#838389',
+        InvalidHover: '#A7A7A7',
+        InvalidSelected: '#6E6E74',
+    },
+    info: { main: '#748FFC' },
+    success: { main: '#00C9EA' },
+    error: { main: '#FA4D56' },
+    warning: { main: '#FFE600' },
+};
+export default palette;
+//# sourceMappingURL=palette.js.map

package/dist/foundations/spacing.js

@@ -0,0 +1,3 @@
+const spacing = 4;
+export default spacing;
+//# sourceMappingURL=spacing.js.map