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

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useMemo, useEffect } from 'react';
+import { CloseSmall, ArrowLeft, ArrowRight } from '../Icons';
+import { StyledDatePicker } from './DatePicker.styled';
+import { Button } from '../Button';
+import theme from '../../theme';
+function DatePicker({ alignment, placeholder, onChange, value, ...props }) {
+    const [open, setOpen] = useState(false);
+    const [selectedDate, setSelectedDate] = useState(null);
+    const { slots, slotProps, ...otherProps } = props;
+    const handleFieldClick = () => {
+        setOpen(true);
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const handleChange = (date, context) => {
+        setSelectedDate(date);
+        if (onChange)
+            onChange(date, context);
+        setOpen(false);
+    };
+    const handleFieldClearClick = (e) => {
+        e.stopPropagation();
+        handleChange(null, null);
+    };
+    const popperPlacement = useMemo(() => {
+        switch (alignment) {
+            case 'left':
+                return 'bottom-start';
+            case 'right':
+                return 'bottom-end';
+            default:
+                return 'bottom';
+        }
+    }, [alignment]);
+    useEffect(() => {
+        if (value === null && selectedDate !== null) {
+            setSelectedDate(null);
+        }
+        if (value !== null && selectedDate === null) {
+            setSelectedDate(value);
+        }
+    }, [value, selectedDate, setSelectedDate]);
+    const canUseToday = useMemo(() => {
+        const today = new Date();
+        if (props.minDate && today < props.minDate)
+            return false;
+        if (props.maxDate && today > props.maxDate)
+            return false;
+        return true;
+    }, [props.minDate, props.maxDate]);
+    return (_jsx(StyledDatePicker, { open: open, value: selectedDate, onChange: handleChange, 
+        // onOpen={() => setOpen(true)}
+        onClose: () => setOpen(false), views: ['year', 'month', 'day'], slots: {
+            inputAdornment: () => {
+                if (selectedDate) {
+                    return (_jsx(Button, { variant: "ghost", color: "secondary", size: "small", icon: _jsx(CloseSmall, {}), sx: {
+                            color: theme.palette.neutralGrey[0],
+                            borderColor: 'transparent !important',
+                        }, onClick: handleFieldClearClick }));
+                }
+                return null;
+            },
+            leftArrowIcon: ArrowLeft,
+            rightArrowIcon: ArrowRight,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            ...slots,
+        }, slotProps: {
+            switchViewButton: {
+                sx: {
+                    display: 'none',
+                },
+            },
+            textField: {
+                variant: 'outlined',
+                onClick: handleFieldClick,
+                InputProps: {
+                    placeholder: placeholder || 'mm/dd/yyyy',
+                    sx: {
+                        borderRadius: '8px',
+                        // According to designer, the width of the date picker should be enforced at 320px
+                        // when the placement is bottom. that is why we have !important here.
+                        width: popperPlacement === 'bottom' ? '320px !important' : 'auto',
+                        borderColor: 'red',
+                        ...theme.typography.body5,
+                        '& input': {
+                            textTransform: 'lowercase',
+                        },
+                        '& ::placeholder': {
+                            textTransform: 'none',
+                        },
+                    },
+                    onMouseDown: (e) => {
+                        const element = e.target;
+                        if (element.tagName === 'INPUT') {
+                            e.preventDefault();
+                        }
+                    },
+                },
+            },
+            popper: {
+                placement: popperPlacement,
+                modifiers: [
+                    {
+                        name: 'offset',
+                        enabled: true,
+                        options: {
+                            offset: [0, 8],
+                        },
+                    },
+                ],
+                sx: {
+                    '& .MuiPickersDay-today': {
+                        border: `1px solid ${theme.palette.neutralGrey[0]} !important`,
+                        borderRadius: '50%',
+                    },
+                    '& .MuiPickersDay-root:hover': {
+                        border: `1px solid ${theme.palette.neutralGrey[0]}`,
+                        borderRadius: '50%',
+                    },
+                    '& .MuiPickersDay-root.Mui-selected': {
+                        backgroundColor: `${theme.palette.lunitTeal[40]} !important`,
+                        color: `${theme.palette.neutralGrey[97]} !important`,
+                    },
+                },
+            },
+            desktopPaper: {
+                sx: {
+                    background: theme.palette.neutralGrey[70],
+                },
+            },
+            previousIconButton: {
+                sx: {
+                    color: theme.palette.neutralGrey[0],
+                },
+            },
+            nextIconButton: {
+                sx: {
+                    color: theme.palette.neutralGrey[0],
+                },
+            },
+            actionBar: {
+                actions: ['today'],
+                sx: {
+                    '& button': {
+                        color: `${theme.palette.lunitTeal[40]} !important`,
+                        textTransform: 'capitalize',
+                        pointerEvents: canUseToday ? 'auto' : 'none',
+                        opacity: canUseToday ? 1 : 0.4,
+                    },
+                },
+            },
+            day: {
+                sx: {
+                    backgroundColor: 'transparent !important',
+                },
+            },
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            ...slotProps,
+        }, ...otherProps }));
+}
+export default DatePicker;
+//# sourceMappingURL=DatePicker.js.map

package/dist/components/DatePicker/DatePicker.styled.js

@@ -0,0 +1,17 @@
+import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
+import { styled } from '@mui/material/styles';
+const StyledDatePicker = styled(DesktopDatePicker)(({ theme }) => ({
+    '.MuiInputBase-root': {
+        height: '36px',
+        backgroundColor: theme.palette.neutralGrey[75],
+        '&:hover fieldset': {
+            borderColor: theme.palette.neutralGrey[45],
+        },
+        '&.Mui-focused fieldset': {
+            borderColor: theme.palette.lunitTeal[10],
+            borderWidth: '1px',
+        },
+    },
+}));
+export { StyledDatePicker };
+//# sourceMappingURL=DatePicker.styled.js.map

package/dist/components/DatePicker/DatePicker.types.js

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

package/dist/components/DatePicker/index.js

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

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CloseSmall } from '../Icons';
+import { Box } from '@mui/material';
+import theme from '../../theme';
+import { Button } from '../Button';
+import { StyledDialog, StyledHeaderBox, StyledDialogTitle, StyledDialogContent, StyledDialogActions, } from './Dialog.styled';
+function Dialog({ open, title, icon, closable, isPrompt, cancelText, submitText, onClose, text, children, dialogAction, buttonSize = 'small', loading = false, disableSubmit = false, sx, }) {
+    const handleClose = (event, reason) => {
+        if (onClose) {
+            onClose(event, reason);
+        }
+    };
+    const displayChildren = !text && !!children;
+    return (_jsxs(StyledDialog, { open: open, onClose: handleClose, displayChildren: displayChildren, isPrompt: isPrompt, sx: sx, className: "customDialog", PaperProps: {
+            className: 'dialogPaper',
+        }, children: [_jsxs(StyledHeaderBox, { isPrompt: isPrompt, displayChildren: displayChildren, className: "dialogTitle", children: [_jsx(Box, { children: _jsxs(StyledDialogTitle, { children: [icon && _jsx("div", { className: "dialogIcon", children: icon }), title] }) }), closable && (_jsx(Button, { size: "small", variant: "ghost", label: "", 
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        onClick: (event) => handleClose(event, 'cancel'), icon: _jsx(CloseSmall, {}), sx: { color: theme.palette.neutralGrey[0] } }))] }), !displayChildren && _jsx(StyledDialogContent, { children: text }), displayChildren && (_jsx(StyledDialogContent, { className: "childrenDialog", children: children })), dialogAction && _jsx(StyledDialogActions, { children: dialogAction }), !dialogAction && (cancelText || submitText) && (_jsxs(StyledDialogActions, { children: [cancelText && (_jsx(Button, { label: cancelText, size: buttonSize, variant: "ghost", onClick: () => handleClose(null, 'cancel') })), submitText && (_jsx(Button, { disabled: disableSubmit, loading: loading, label: submitText, size: buttonSize, sx: loading ? { width: '75px' } : null, onClick: () => handleClose(null, 'submit') }))] }))] }));
+}
+export default Dialog;
+//# sourceMappingURL=Dialog.js.map

package/dist/components/Dialog/Dialog.styled.js

@@ -0,0 +1,60 @@
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import { styled } from '@mui/material/styles';
+import { Box } from '@mui/material';
+const StyledDialog = styled(Dialog, {
+    shouldForwardProp: (prop) => prop !== 'displayChildren' && prop !== 'isPrompt',
+})(({ theme, displayChildren, isPrompt, sx }) => {
+    return {
+        '& .MuiDialog-paper': {
+            backgroundColor: theme.palette.neutralGrey[90],
+            width: displayChildren && !isPrompt ? 'auto' : '320px',
+            maxWidth: displayChildren && !isPrompt ? 'none' : '320px',
+            borderRadius: '8px',
+            padding: '28px 20px 24px 20px',
+        },
+        ...sx,
+    };
+});
+const StyledHeaderBox = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'displayChildren' && prop !== 'isPrompt',
+})(({ displayChildren, isPrompt }) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    height: '24px',
+    marginBottom: displayChildren && !isPrompt ? '32px' : '16px',
+}));
+const StyledTitle = styled(Box)({
+    display: 'flex',
+    alignItems: 'center',
+});
+const StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({
+    ...theme.typography.body_sb1,
+    padding: 0,
+    display: 'flex',
+    '& .dialogIcon': {
+        display: 'flex',
+        marginRight: '8px',
+    },
+}));
+const StyledDialogContent = styled(DialogContent)(({ theme }) => ({
+    ...theme.typography.body5,
+    marginBottom: '16px',
+    padding: 0,
+    whiteSpace: 'pre-line',
+    '&.childrenDialog': {
+        display: 'flex',
+        borderTop: 0,
+        borderBottom: 0,
+        maxHeight: 'fit-content',
+    },
+}));
+const StyledDialogActions = styled(DialogActions)(() => ({
+    padding: 0,
+    margin: '0 12px',
+}));
+export { StyledDialog, StyledHeaderBox, StyledTitle, StyledDialogTitle, StyledDialogContent, StyledDialogActions, };
+//# sourceMappingURL=Dialog.styled.js.map

package/dist/components/Dialog/Dialog.types.js

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

package/dist/components/Dialog/index.js

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

package/dist/components/Divider/Divider.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import BaseDivider from './Divider.styled';
+function Divider({ orientation = 'vertical', ...props }) {
+    return (_jsx(BaseDivider, { orientation: orientation, ...props }));
+}
+export default Divider;
+//# sourceMappingURL=Divider.js.map

package/dist/components/Divider/Divider.styled.js

@@ -0,0 +1,22 @@
+import { Divider } from '@mui/material';
+import { styled } from '@mui/material/styles';
+const BaseDivider = styled(Divider)(({ theme, orientation }) => {
+    if (orientation === 'vertical') {
+        return {
+            background: theme.palette.neutralGrey[65],
+            border: 'none',
+            height: '100%',
+            outline: 'none',
+            width: '1px',
+        };
+    }
+    return {
+        background: theme.palette.neutralGrey[65],
+        border: 'none',
+        height: '1px',
+        outline: 'none',
+        width: '100%',
+    };
+});
+export default BaseDivider;
+//# sourceMappingURL=Divider.styled.js.map

package/dist/components/Divider/Divider.types.js

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

package/dist/components/Divider/index.js

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

package/dist/components/Dropdown/Dropdown.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDown } from '../Icons';
+import { useState } from 'react';
+import { BaseDropdown, DropdownContainer, DropdownPlaceholder } from './Dropdown.styled';
+import { handlePlaceholder } from './Dropdown.utils';
+import theme from '../../theme';
+import { InputMsg } from '../BaseTextField/BaseTextField.styled';
+import { BUTTON_DROPDOWN_ITEM } from './DropdownItem.utils';
+const Dropdown = (({ children, placeholder, value, error, helperMsg, onChange, sx, style, MenuProps = undefined, ContainerProps, ...otherProps }) => {
+    // Prevents selecting a DropdownItem with `asButton` property.
+    const handleChange = (e, child) => {
+        if (!!onChange && e.target.value !== BUTTON_DROPDOWN_ITEM) {
+            onChange(e, child);
+        }
+    };
+    const [isOpen, setOpen] = useState(false);
+    return (_jsxs(DropdownContainer, { ...ContainerProps, fullWidth: otherProps.fullWidth, children: [_jsx(BaseDropdown, { sx: sx, style: style, IconComponent: () => (_jsx(ArrowDown, { onClick: () => {
+                        if (typeof otherProps.open === 'undefined')
+                            setOpen(false);
+                    }, style: isOpen || otherProps.open
+                        ? {
+                            cursor: 'pointer',
+                            transform: 'scaleY(-1)',
+                        }
+                        : undefined })), onClick: () => {
+                    if (!otherProps.disabled)
+                        setOpen(!isOpen);
+                }, 
+                // https://github.com/mui/material-ui/issues/26076#issuecomment-1014345564
+                onClose: () => {
+                    setTimeout(() => {
+                        document.activeElement.blur();
+                    }, 0);
+                }, onChange: handleChange, error: !!error, open: 
+                // eslint-disable-next-line no-nested-ternary
+                typeof otherProps.open !== 'undefined'
+                    ? otherProps.open
+                    : otherProps.disabled
+                        ? false
+                        : isOpen, 
+                // MUI expects a value of '' if undefined :S
+                value: value ?? '', MenuProps: MenuProps ?? {
+                    disablePortal: true,
+                    sx: {
+                        '.MuiPaper-root': {
+                            marginTop: '4px',
+                            borderRadius: '8px',
+                            background: theme.palette.neutralGrey[85],
+                            border: 'transparent',
+                        },
+                    },
+                }, ...otherProps, children: children }), handlePlaceholder(value) && placeholder && (_jsx(DropdownPlaceholder, { placeholder: placeholder, disabled: otherProps.disabled })), error ? (_jsx(InputMsg, { variant: "body5", error: true, children: error })) : (helperMsg && _jsx(InputMsg, { variant: "body5", children: helperMsg }))] }));
+});
+export default Dropdown;
+//# sourceMappingURL=Dropdown.js.map

package/dist/components/Dropdown/Dropdown.styled.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Select, Typography, Box, styled } from '@mui/material';
+const baseDropdownStyle = (theme) => {
+    return {
+        fontFamily: 'Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
+        fontSize: '14px',
+        fontWeight: '400',
+        background: theme.palette.neutralGrey[85],
+        borderRadius: '8px',
+        border: '1px solid transparent',
+        height: '36px',
+        color: theme.palette.neutralGrey[5],
+        padding: '0 2px',
+        '.MuiSelect-select': {
+            paddingRight: '0px !important',
+        },
+        '& fieldset': {
+            border: 'none',
+        },
+        '&.Mui-focused': {
+            border: `1px solid ${theme.palette.lunitTeal[10]} !important`,
+        },
+        '&.Mui-disabled': { border: 'none', background: theme.palette.neutralGrey[75] },
+        '.MuiSvgIcon-root ': {
+            cursor: 'pointer',
+            marginRight: '16px',
+            color: theme.palette.neutralGrey[5],
+            '&.Mui-disabled': {
+                color: theme.palette.neutralGrey[45],
+            },
+        },
+        '&:hover': {
+            border: `1px solid ${theme.palette.neutralGrey[45]}`,
+            '&.Mui-disabled': {
+                border: '1px solid transparent',
+            },
+        },
+    };
+};
+const fixedWidthDropdownStyle = {
+    width: '240px',
+};
+const errorDropdownStyle = (theme) => ({
+    border: `1px solid ${theme.palette.red[5]} !important`,
+});
+const BaseDropdown = styled(Select, {
+    shouldForwardProp: (prop) => prop !== 'small',
+})(({ theme, error, autoWidth, fullWidth, open }) => {
+    let style = baseDropdownStyle(theme);
+    if (!autoWidth && !fullWidth) {
+        style = {
+            ...style,
+            ...fixedWidthDropdownStyle,
+        };
+    }
+    if (error) {
+        style = {
+            ...style,
+            ...errorDropdownStyle(theme),
+        };
+    }
+    // add FocusStyle when click arrow
+    const openFocusStyle = open
+        ? { border: `1px solid ${theme.palette.lunitTeal[10]} !important` }
+        : {};
+    return { ...style, ...openFocusStyle };
+});
+const DropdownContainer = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'fullWidth',
+})(({ fullWidth }) => {
+    if (fullWidth) {
+        return {
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+        };
+    }
+    return {
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        width: '240px',
+    };
+});
+const PlaceholderElem = styled(Typography)(({ theme, disabled }) => {
+    return {
+        color: theme.palette.neutralGrey[45],
+        position: 'absolute',
+        left: '16px',
+        top: '8px',
+        backgroundColor: 'transparent',
+        height: '30px',
+        pointerEvents: 'none',
+        opacity: disabled ? '0.4' : '1',
+        cursor: 'pointer !important',
+    };
+});
+const DropdownPlaceholder = ({ placeholder, disabled, }) => {
+    return (_jsx(PlaceholderElem, { variant: "body5", disabled: disabled, children: placeholder }));
+};
+export { BaseDropdown, DropdownPlaceholder, DropdownContainer };
+//# sourceMappingURL=Dropdown.styled.js.map

package/dist/components/Dropdown/Dropdown.types.js

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

package/dist/components/Dropdown/Dropdown.utils.js

@@ -0,0 +1,12 @@
+const PLACEHOLDER_VAL = 'PLACEHOLDER_VAL';
+const handlePlaceholder = (value) => {
+    if (Array.isArray(value)) {
+        if (value.length) {
+            return false;
+        }
+        return true;
+    }
+    return !value;
+};
+export { PLACEHOLDER_VAL, handlePlaceholder };
+//# sourceMappingURL=Dropdown.utils.js.map

package/dist/components/Dropdown/DropdownItem.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from '../Icons';
+import { BaseDropdownItem, KeyboardShortcut } from './DropdownItem.styled';
+import { BUTTON_DROPDOWN_ITEM, shouldPadForEmptyIcon } from './DropdownItem.utils';
+const DropdownItem = ({ checkIcon, customIcon, children, emptyIcon, asButton, value, keyboardShortcut, ...otherProps }) => {
+    return (_jsxs(BaseDropdownItem, { ...otherProps, value: asButton ? BUTTON_DROPDOWN_ITEM : value, emptyIcon: shouldPadForEmptyIcon(emptyIcon, checkIcon, customIcon, otherProps.selected), children: [customIcon ?? (checkIcon && otherProps.selected && _jsx(Check, {})), children, keyboardShortcut && _jsx(KeyboardShortcut, { label: keyboardShortcut })] }));
+};
+export default DropdownItem;
+//# sourceMappingURL=DropdownItem.js.map

package/dist/components/Dropdown/DropdownItem.styled.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MenuItem, Typography, styled } from '@mui/material';
+const baseDropdownItemStyle = (theme) => {
+    return {
+        background: theme.palette.neutralGrey[85],
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        borderRadius: '8px',
+        position: 'relative',
+        margin: '0 8px',
+        gap: '9px',
+        '&:hover': {
+            background: theme.palette.neutralGrey[75],
+        },
+        '&.Mui-disabled': {
+            background: theme.palette.neutralGrey[85],
+            opacity: '1',
+            color: '#C4C4C4',
+            cursor: 'pointer !important',
+        },
+        '&.Mui-selected': {
+            background: 'transparent',
+            '&:hover, &.Mui-selected:hover, &.Mui-focusVisible, &.Mui-selected.Mui-focusVisible': {
+                borderRadius: '8px',
+                backgroundColor: theme.palette.neutralGrey[75],
+            },
+        },
+    };
+};
+const padNoIconStyle = {
+    paddingLeft: '45px !important',
+};
+const BaseDropdownItem = styled(MenuItem, {
+    shouldForwardProp: (prop) => prop !== 'emptyIcon',
+})(({ theme, emptyIcon }) => {
+    let style = baseDropdownItemStyle(theme);
+    if (emptyIcon) {
+        style = {
+            ...style,
+            ...padNoIconStyle,
+        };
+    }
+    return style;
+});
+const BaseShortcutLabel = styled(Typography)(({ theme }) => {
+    return {
+        color: theme.palette.neutralGrey[45],
+        position: 'absolute',
+        right: '20px',
+    };
+});
+const KeyboardShortcut = ({ label }) => {
+    return _jsx(BaseShortcutLabel, { variant: "body_m1", children: label });
+};
+export { BaseDropdownItem, KeyboardShortcut };
+//# sourceMappingURL=DropdownItem.styled.js.map

package/dist/components/Dropdown/DropdownItem.types.js

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

package/dist/components/Dropdown/DropdownItem.utils.js

@@ -0,0 +1,10 @@
+const BUTTON_DROPDOWN_ITEM = 'BUTTON_DROPDOWN_ITEM';
+const shouldPadForEmptyIcon = (emptyIcon, checkIcon, customIcon, selected) => {
+    if (checkIcon)
+        return !selected;
+    if (customIcon)
+        return false;
+    return !!emptyIcon;
+};
+export { BUTTON_DROPDOWN_ITEM, shouldPadForEmptyIcon };
+//# sourceMappingURL=DropdownItem.utils.js.map

package/dist/components/Dropdown/DropdownSubtitle.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import BaseDropdownSubtitle from './DropdownSubtitle.styled';
+const DropdownSubtitle = ({ label }) => {
+    return _jsx(BaseDropdownSubtitle, { variant: "small_body_m1", children: label });
+};
+export default DropdownSubtitle;
+//# sourceMappingURL=DropdownSubtitle.js.map

package/dist/components/Dropdown/DropdownSubtitle.styled.js

@@ -0,0 +1,12 @@
+import { Typography, styled } from '@mui/material';
+const BaseDropdownSubtitle = styled(Typography)(({ theme }) => {
+    return {
+        color: theme.palette.neutralGrey[40],
+        width: '140px',
+        height: '20px',
+        padding: '8px',
+        paddingLeft: '16px',
+    };
+});
+export default BaseDropdownSubtitle;
+//# sourceMappingURL=DropdownSubtitle.styled.js.map

package/dist/components/Dropdown/DropdownSubtitle.types.js

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

package/dist/components/Dropdown/IconDropdown.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ArrowDownXs } from '../Icons';
+import { BaseIconDropdown } from './IconDropdown.styled';
+import theme from '../../theme';
+const IconDropdown = ({ open, disabled, children, ...otherProps }) => {
+    const [isOpen, setOpen] = useState(false);
+    return (_jsx(BaseIconDropdown, { IconComponent: () => (_jsx(ArrowDownXs, { onClick: () => {
+                if (typeof open === 'undefined')
+                    setOpen(false);
+            }, style: isOpen || open
+                ? {
+                    cursor: 'pointer',
+                    transform: 'scaleY(-1)',
+                }
+                : undefined })), open: 
+        // eslint-disable-next-line no-nested-ternary
+        typeof open !== 'undefined' ? open : disabled ? false : isOpen, disabled: disabled, multiple: false, onClick: () => {
+            if (!disabled)
+                setOpen(!isOpen);
+        }, MenuProps: {
+            sx: {
+                '.MuiPaper-root': {
+                    marginTop: '4px',
+                    borderRadius: '8px',
+                    background: theme.palette.neutralGrey[85],
+                    border: 'transparent',
+                    left: 0,
+                    width: '260px',
+                },
+            },
+        }, ...otherProps, children: children }));
+};
+export default IconDropdown;
+//# sourceMappingURL=IconDropdown.js.map