@lunit/oui 2.4.19 → 3.0.1

package/dist/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete as MuiAutocomplete, TextField, useTheme } from '@mui/material';
+import { Chip } from '../Chip';
+import { Button } from '../Button';
+import { CircularProgress } from '../Progress';
+import { CloseSmall } from '../../icons';
+import { autocompleteSx, paperSx } from './Autocomplete.styled';
+const LOADING_SPINNER_SIZE = 20;
+function Autocomplete({ placeholder = '', error, helperText, loading = false, noOptionsText, onDelete, onClearButtonClick, disabled, inputValue, sx, ...otherProps }) {
+    const theme = useTheme();
+    return (_jsx(MuiAutocomplete, { multiple: true, freeSolo: true, disableClearable: true, disabled: disabled, loading: loading, loadingText: noOptionsText, inputValue: inputValue, sx: [autocompleteSx(theme, disabled), ...(Array.isArray(sx) ? sx : [sx])], slotProps: {
+            listbox: { style: { maxHeight: '180px', overflow: 'auto' } },
+            paper: { sx: paperSx(theme) },
+        }, renderValue: (values) => values.map((option) => (_jsx(Chip, { disabled: disabled, label: option, onDelete: onDelete ? () => onDelete(option) : undefined }, option))), renderInput: (params) => (_jsx(TextField, { ...params, variant: "outlined", placeholder: placeholder, error: error, helperText: helperText, slotProps: {
+                ...params.slotProps,
+                input: {
+                    ...params.slotProps?.input,
+                    endAdornment: (_jsxs(_Fragment, { children: [loading ? (_jsx(CircularProgress, { size: LOADING_SPINNER_SIZE, sx: { color: theme.palette.neutralGrey[45] } })) : null, onClearButtonClick ? (_jsx(Button, { icon: _jsx(CloseSmall, { style: { color: theme.palette.neutralGrey[45] } }), size: "small", variant: "ghost", onClick: onClearButtonClick })) : null] })),
+                },
+            } })), ...otherProps }));
+}
+export default Autocomplete;

package/dist/components/Autocomplete/Autocomplete.styled.js

@@ -0,0 +1,36 @@
+const MIN_INPUT_HEIGHT = '44px';
+/** Tokenized styling for the underlying MUI Autocomplete. */
+export const autocompleteSx = (theme, disabled) => ({
+    '.MuiAutocomplete-inputRoot': {
+        padding: `${theme.spacing(1.5, 3.5)} !important`,
+        gap: theme.spacing(1),
+        '& .MuiInputBase-input::placeholder': {
+            opacity: disabled ? 0.42 : 1,
+        },
+        '& .MuiAutocomplete-input': {
+            height: '100%',
+        },
+    },
+    '.MuiOutlinedInput-root': {
+        minHeight: MIN_INPUT_HEIGHT,
+    },
+    '.MuiInputBase-root.Mui-disabled': {
+        border: `1px solid ${theme.palette.neutralGrey[70]}`,
+        color: theme.palette.neutralGrey[45],
+        backgroundColor: theme.palette.neutralGrey[75],
+        pointerEvents: 'none',
+        opacity: 0.8,
+    },
+    '.MuiFormHelperText-root.Mui-error': {
+        ...theme.typography.body5,
+        color: theme.palette.error.main,
+        margin: 0,
+        paddingLeft: theme.spacing(1),
+    },
+});
+/** Tokenized styling for the listbox paper. */
+export const paperSx = (theme) => ({
+    backgroundColor: theme.palette.neutralGrey[70],
+    borderRadius: theme.spacing(2),
+    backgroundImage: 'none',
+});

package/dist/components/Autocomplete/Autocomplete.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Autocomplete/index.js

@@ -0,0 +1,2 @@
+import Autocomplete from './Autocomplete';
+export { Autocomplete };

package/dist/components/Checkbox/Checkbox.js

@@ -5,6 +5,6 @@ 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 }))] }));
+    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, slotProps: { input: { ...inputProps, ref: inputRef } } }), label && (_jsx(Typography, { variant: "body5", sx: { display: 'flex', alignItems: 'center' }, children: label }))] }));
 });
 export default Checkbox;

package/dist/components/Collapse/Collapse.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Collapse as MuiCollapse } from '@mui/material';
+function Collapse({ children, ...otherProps }) {
+    return _jsx(MuiCollapse, { ...otherProps, children: children });
+}
+export default Collapse;

package/dist/components/Collapse/Collapse.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Collapse/index.js

@@ -0,0 +1,2 @@
+import Collapse from './Collapse';
+export { Collapse };

package/dist/components/DataTable/DataTable.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { DataGrid } from '@mui/x-data-grid';
+import { DataGridPro } from '@mui/x-data-grid-pro';
 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", {}),
+const EmptyOverlay = () => _jsx("div", {});
+function DataTable({ rows, columns, slots, ...otherProps }) {
+    return (_jsx(DataGridContainer, { children: _jsx(DataGridPro, { rows: rows, columns: columns, columnHeaderHeight: 40, rowHeight: 40, showColumnVerticalBorder: true, showCellVerticalBorder: true, disableColumnMenu: true, hideFooter: true, ...otherProps, slots: {
+                noRowsOverlay: EmptyOverlay,
                 baseCheckbox: Checkbox,
-            }, ...otherProps }) }));
+                ...slots,
+            } }) }));
 }
 export default DataTable;

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

@@ -6,15 +6,7 @@ const DataGridContainer = styled('div')(({ theme }) => ({
         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' },
-        },
+        '--DataGrid-rowBorderColor': theme.palette.neutralGrey[80],
         '.MuiDataGrid-row': {
             '&:last-child .MuiDataGrid-cell': {
                 borderBottom: `1px solid ${theme.palette.neutralGrey[80]}`,
@@ -32,16 +24,23 @@ const DataGridContainer = styled('div')(({ theme }) => ({
             '&:hover .hover-shown, & .hover-shown.menu-active': { opacity: 1 },
         },
         '.MuiDataGrid-cell': {
-            ...theme.typography.body5,
-            borderBottom: `1px solid ${theme.palette.neutralGrey[80]}`,
+            fontWeight: theme.typography.body5.fontWeight,
+            fontSize: theme.typography.body5.fontSize,
             padding: theme.spacing(0, 2),
+            '&.MuiDataGrid-cell--withRightBorder:not(.MuiDataGrid-cellCheckbox)': {
+                borderRight: `1px solid ${theme.palette.neutralGrey[80]}`,
+            },
             '&:focus, &:focus-within, &:focus-visible': { outline: 'none' },
         },
-        '.MuiDataGrid-columnSeparator': { position: 'relative' },
-        '.MuiDataGrid-iconSeparator': { display: 'none' },
         '.MuiDataGrid-columnHeader': {
+            padding: theme.spacing(0, 2),
+            '&.MuiDataGrid-columnHeader--withRightBorder:not(.MuiDataGrid-columnHeaderCheckbox)': {
+                borderRight: `1px solid ${theme.palette.neutralGrey[80]}`,
+            },
             '&:focus': { outline: 'none' },
         },
+        '.MuiDataGrid-columnSeparator': { position: 'relative' },
+        '.MuiDataGrid-iconSeparator': { display: 'none' },
         '.MuiDataGrid-columnHeaderTitleContainer': {
             padding: 0,
             '&:focus': { outline: 'none' },

package/dist/components/DataTable/DataTable.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/DatePicker/DatePicker.js

@@ -71,27 +71,23 @@ function DatePicker({ alignment, placeholder, onChange, value, ...props }) {
             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': {
+                slotProps: {
+                    input: {
+                        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,
                             textTransform: 'lowercase',
                         },
-                        '& ::placeholder': {
-                            textTransform: 'none',
-                        },
                     },
-                    onMouseDown: (e) => {
-                        const element = e.target;
-                        if (element.tagName === 'INPUT') {
+                    htmlInput: {
+                        placeholder: placeholder || 'mm/dd/yyyy',
+                        onMouseDown: (e) => {
                             e.preventDefault();
-                        }
+                        },
                     },
                 },
             },

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

@@ -1,15 +1,33 @@
 import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
 import { styled } from '@mui/material/styles';
+// MUI X v8+ renders the picker field with the accessible DOM structure, so the
+// field root is `.MuiPickersInputBase-root` (not `.MuiInputBase-root`) and the
+// border lives on `.MuiPickersOutlinedInput-notchedOutline` (not a `fieldset`).
 const StyledDatePicker = styled(DesktopDatePicker)(({ theme }) => ({
-    '.MuiInputBase-root': {
+    '.MuiPickersInputBase-root': {
         height: '36px',
         backgroundColor: theme.palette.neutralGrey[75],
-        '&:hover fieldset': {
-            borderColor: theme.palette.neutralGrey[45],
+        '&:hover .MuiPickersOutlinedInput-notchedOutline': {
+            borderColor: `${theme.palette.neutralGrey[45]} !important`,
         },
-        '&.Mui-focused fieldset': {
-            borderColor: theme.palette.lunitTeal[10],
-            borderWidth: '1px',
+        // The library focus rule (`&.Mui-focused:not(.Mui-error) .notchedOutline`)
+        // has higher specificity and forces `primary.main` at 2px, so we need
+        // `!important` to keep the original teal 1px focus border.
+        '&.Mui-focused .MuiPickersOutlinedInput-notchedOutline': {
+            borderColor: `${theme.palette.lunitTeal[10]} !important`,
+            borderWidth: '1px !important',
+        },
+        // When the field is empty the hidden input shows its placeholder, so
+        // `:placeholder-shown` matches. In that state, stop clicking from
+        // selecting/highlighting the placeholder sections — restoring the original
+        // single-input behavior where the placeholder was never selectable.
+        '&:has(.MuiPickersInputBase-input:placeholder-shown)': {
+            '& .MuiPickersInputBase-sectionsContainer': {
+                userSelect: 'none',
+            },
+            '& .MuiPickersInputBase-sectionContent::selection': {
+                backgroundColor: 'transparent',
+            },
         },
     },
 }));

package/dist/components/Dialog/Dialog.js

@@ -11,8 +11,10 @@ function Dialog({ open, title, icon, closable, isPrompt, cancelText, submitText,
         }
     };
     const displayChildren = !text && !!children;
-    return (_jsxs(StyledDialog, { open: open, onClose: handleClose, displayChildren: displayChildren, isPrompt: isPrompt, sx: sx, className: "customDialog", PaperProps: {
-            className: 'dialogPaper',
+    return (_jsxs(StyledDialog, { open: open, onClose: handleClose, displayChildren: displayChildren, isPrompt: isPrompt, sx: sx, className: "customDialog", slotProps: {
+            paper: {
+                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: "", disabled: loading, 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, disabled: loading, variant: "ghost", onClick: () => handleClose(null, 'cancel') })), submitText && (_jsx(Button, { disabled: disableSubmit || loading, loading: loading, label: submitText, size: buttonSize, sx: loading ? { width: '75px' } : null, onClick: () => handleClose(null, 'submit') }))] }))] }));
 }
 export default Dialog;

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import BaseDrawer from './Drawer.styled';
+function Drawer({ children, open = true, wide, variant = 'permanent', ...otherProps }) {
+    return (_jsx(BaseDrawer, { variant: variant, open: open, wide: wide, ...otherProps, children: children }));
+}
+export default Drawer;

package/dist/components/Drawer/Drawer.styled.js

@@ -0,0 +1,29 @@
+import { Drawer as MuiDrawer, paperClasses } from '@mui/material';
+import { styled } from '@mui/material/styles';
+const DEFAULT_CLOSED_WIDTH = '52px';
+const DEFAULT_OPEN_WIDTH = '240px';
+const DEFAULT_WIDE_WIDTH = '280px';
+const WIDTH_TRANSITION = 'width 0.2s';
+const FORWARDED_EXCLUDES = ['wide', 'closedWidth', 'openWidth', 'wideWidth'];
+const BaseDrawer = styled(MuiDrawer, {
+    shouldForwardProp: (prop) => !FORWARDED_EXCLUDES.includes(prop.toString()),
+})(({ theme, open, wide, closedWidth, openWidth, wideWidth }) => {
+    const resolvedClosed = closedWidth ?? DEFAULT_CLOSED_WIDTH;
+    const resolvedOpen = openWidth ?? DEFAULT_OPEN_WIDTH;
+    const resolvedWide = wideWidth ?? DEFAULT_WIDE_WIDTH;
+    const width = !open ? resolvedClosed : wide ? resolvedWide : resolvedOpen;
+    return {
+        width,
+        background: theme.palette.neutralGrey[90],
+        boxSizing: 'border-box',
+        transition: WIDTH_TRANSITION,
+        [`& .${paperClasses.root}`]: {
+            width,
+            background: theme.palette.neutralGrey[90],
+            boxSizing: 'border-box',
+            transition: WIDTH_TRANSITION,
+            overflowY: 'hidden',
+        },
+    };
+});
+export default BaseDrawer;

package/dist/components/Drawer/Drawer.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Drawer/index.js

@@ -0,0 +1,2 @@
+import Drawer from './Drawer';
+export { Drawer };

package/dist/components/Dropdown/Dropdown.js

@@ -40,7 +40,6 @@ const Dropdown = (({ children, placeholder, value, error, helperMsg, onChange, s
                         : isOpen, 
                 // MUI expects a value of '' if undefined :S
                 value: value ?? '', MenuProps: MenuProps ?? {
-                    disablePortal: true,
                     sx: {
                         '.MuiPaper-root': {
                             marginTop: '4px',

package/dist/components/EllipsisTypography/EllipsisTypography.js

@@ -1,33 +1,69 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect, useRef, useState } from 'react';
+import { forwardRef, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import StyledTypography from './EllipsisTypography.styled';
 import { Tooltip } from '../Tooltip';
 import { ResizeObserverContext } from '../ResizeObserver/ResizeObserverContext';
-function EllipsisTypography({ children, heightThreshold: heightThresholdProp, tooltipPlacement = 'bottom', maxLines = 1, ...otherProps }) {
-    const typographyRef = useRef(null);
+const MAX_RETRY_COUNT = 10;
+const RETRY_DELAY_MS = 50;
+const DEFAULT_HEIGHT_THRESHOLD = 1;
+const EllipsisTypography = forwardRef(({ children, heightThreshold: heightThresholdProp, tooltipPlacement = 'bottom', maxLines = 1, ...otherProps }, forwardedRef) => {
+    const internalRef = useRef(null);
+    const retryCountRef = useRef(0);
+    const timeoutRef = useRef(null);
     const direction = otherProps.direction || 'row';
-    const heightThreshold = heightThresholdProp != null ? heightThresholdProp : 1;
+    const heightThreshold = heightThresholdProp ?? DEFAULT_HEIGHT_THRESHOLD;
     const [showTooltip, setShowTooltip] = useState(false);
     const { addResizeHandler, removeResizeHandler } = useContext(ResizeObserverContext);
+    const heightThresholdRef = useRef(heightThreshold);
+    heightThresholdRef.current = heightThreshold;
+    const checkOverflow = useCallback((target) => {
+        if (!target)
+            return;
+        const { scrollHeight, clientHeight, scrollWidth, clientWidth } = target;
+        // The element may not be laid out yet (all metrics 0); retry until it is.
+        if (scrollHeight === 0 && clientHeight === 0 && scrollWidth === 0 && clientWidth === 0) {
+            if (retryCountRef.current < MAX_RETRY_COUNT) {
+                retryCountRef.current += 1;
+                timeoutRef.current = setTimeout(() => checkOverflow(target), RETRY_DELAY_MS);
+            }
+            return;
+        }
+        retryCountRef.current = 0;
+        const threshold = heightThresholdRef.current;
+        // Single-line ellipsis truncates horizontally (scrollHeight === clientHeight), so width must
+        // also be compared. Multi-line clamp still overflows vertically.
+        const isOverflowing = scrollWidth > clientWidth + threshold || scrollHeight > clientHeight + threshold;
+        setShowTooltip(isOverflowing);
+    }, []);
+    const setRefs = useCallback((node) => {
+        internalRef.current = node;
+        if (typeof forwardedRef === 'function') {
+            forwardedRef(node);
+        }
+        else if (forwardedRef) {
+            forwardedRef.current = node;
+        }
+    }, [forwardedRef]);
     useEffect(() => {
-        if (!typographyRef.current)
+        const target = internalRef.current;
+        if (!target)
             return;
-        const target = typographyRef.current;
-        const checkOverflow = () => {
-            const isOverflowing = target.scrollHeight - target.clientHeight > heightThreshold;
-            setShowTooltip(isOverflowing);
-        };
+        const run = () => checkOverflow(target);
         if (addResizeHandler) {
-            addResizeHandler(target, checkOverflow);
+            addResizeHandler(target, run);
         }
-        checkOverflow();
+        run();
         return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
             if (removeResizeHandler) {
                 removeResizeHandler(target);
             }
         };
-    }, [heightThreshold, addResizeHandler, removeResizeHandler]);
-    const TypographyComponent = (_jsx(StyledTypography, { ...otherProps, ref: typographyRef, direction: direction, maxLines: maxLines, children: children }));
+    }, [children, maxLines, checkOverflow, addResizeHandler, removeResizeHandler]);
+    const TypographyComponent = (_jsx(StyledTypography, { ...otherProps, ref: setRefs, direction: direction, maxLines: maxLines, children: children }));
     return showTooltip ? (_jsx(Tooltip, { title: children, placement: tooltipPlacement, size: "small", children: TypographyComponent })) : (TypographyComponent);
-}
+});
+EllipsisTypography.displayName = 'EllipsisTypography';
 export default EllipsisTypography;

package/dist/components/Menu/Menu.js

@@ -5,8 +5,11 @@ export const MenuContext = createContext({
     size: 'small',
     showCheck: false,
 });
-const Menu = forwardRef(({ subheader, size = 'small', showCheck = false, children, ...props }, ref) => {
+const Menu = forwardRef(({ subheader, size = 'small', showCheck = false, children, PaperProps: paperProps, slotProps, ...props }, ref) => {
     const contextValue = useMemo(() => ({ size, showCheck }), [size, showCheck]);
-    return (_jsx(MenuContext.Provider, { value: contextValue, children: _jsxs(StyledMenu, { size: size, ref: ref, ...props, children: [subheader && _jsx(StyledListSubheader, { children: subheader }), children] }) }));
+    const mergedSlotProps = paperProps
+        ? { ...slotProps, paper: { ...paperProps, ...slotProps?.paper } }
+        : slotProps;
+    return (_jsx(MenuContext.Provider, { value: contextValue, children: _jsxs(StyledMenu, { size: size, ref: ref, slotProps: mergedSlotProps, ...props, children: [subheader && _jsx(StyledListSubheader, { children: subheader }), children] }) }));
 });
 export default Menu;

package/dist/components/MuiInputBase.js

@@ -7,12 +7,12 @@ const styleOverrides = {
     input: {
         height: '36px',
     },
-    inputAdornedStart: {
+    adornedStart: {
         'html &': {
             paddingLeft: 0,
         },
     },
-    inputAdornedEnd: {
+    adornedEnd: {
         'html &': {
             paddingRight: 0,
         },

package/dist/components/NoMatchContainer/NoMatchContainer.js

@@ -11,9 +11,12 @@ const NoMatchContainer = () => {
                 display: 'flex',
                 flexDirection: 'column',
                 alignItems: 'center',
-            }, children: [_jsx(Typography, { variant: "h7", color: "neutralGrey.25", sx: {
+            }, children: [_jsx(Typography, { variant: "h7", sx: {
+                        color: "neutralGrey.25",
                         mt: '100px',
-                        mb: '16px',
-                    }, children: "Nothing matches your search" }), _jsx(Typography, { variant: "h9", color: "neutralGrey.25", children: "Please try again!" })] }) }));
+                        mb: '16px'
+                    }, children: "Nothing matches your search" }), _jsx(Typography, { variant: "h9", sx: {
+                        color: "neutralGrey.25"
+                    }, children: "Please try again!" })] }) }));
 };
 export default NoMatchContainer;

package/dist/components/Popover/Popover.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import StyledPopover from './Popover.styled';
+function Popover({ children, ...otherProps }) {
+    return _jsx(StyledPopover, { ...otherProps, children: children });
+}
+export default Popover;

package/dist/components/Popover/Popover.styled.js

@@ -0,0 +1,10 @@
+import { Popover as MuiPopover } from '@mui/material';
+import { styled } from '@mui/material/styles';
+const StyledPopover = styled(MuiPopover)(({ theme }) => ({
+    '& .MuiPopover-paper': {
+        backgroundColor: theme.palette.neutralGrey[70],
+        borderRadius: theme.spacing(2),
+        backgroundImage: 'none',
+    },
+}));
+export default StyledPopover;

package/dist/components/Popover/Popover.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Popover/index.js

@@ -0,0 +1,2 @@
+import Popover from './Popover';
+export { Popover };

package/dist/components/Progress/LinearProgress.styled.js

@@ -5,7 +5,7 @@ const BaseLinearProgress = styled(MuiLinearProgress, {
     width: '100%',
     height,
     backgroundColor: 'transparent',
-    [`& .${linearProgressClasses.barColorPrimary}`]: {
+    [`& .${linearProgressClasses.bar}`]: {
         backgroundColor: barColor || theme.palette.lunitTeal[40],
     },
 }));

package/dist/components/Radio/Radio.js

@@ -4,6 +4,6 @@ import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Container, StyledRadio, UncheckedIcon, CheckedIcon } from './Radio.styled';
 const Radio = forwardRef(({ value, name, checked, defaultChecked, disabled, required, onChange, onChangeCapture, inputProps, inputRef, label, ...rootProps }, ref) => {
-    return (_jsxs(Container, { ...rootProps, className: clsx('radio', rootProps.className), component: label != null ? 'label' : 'span', ref: ref, children: [_jsx(StyledRadio, { disableRipple: true, icon: _jsx(UncheckedIcon, {}), checkedIcon: _jsx(CheckedIcon, {}), value: value, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, required: required, onChange: onChange, onChangeCapture: onChangeCapture, inputProps: inputProps, inputRef: inputRef }), label && (_jsx(Typography, { variant: "body_m1", sx: { display: 'flex', alignItems: 'center' }, children: label }))] }));
+    return (_jsxs(Container, { ...rootProps, className: clsx('radio', rootProps.className), component: label != null ? 'label' : 'span', ref: ref, children: [_jsx(StyledRadio, { disableRipple: true, icon: _jsx(UncheckedIcon, {}), checkedIcon: _jsx(CheckedIcon, {}), value: value, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, required: required, onChange: onChange, onChangeCapture: onChangeCapture, slotProps: { input: { ...inputProps, ref: inputRef } } }), label && (_jsx(Typography, { variant: "body_m1", sx: { display: 'flex', alignItems: 'center' }, children: label }))] }));
 });
 export default Radio;

package/dist/components/TabbedPanel/TabbedPanel.js

@@ -12,6 +12,6 @@ const TabbedPanel = ({ tabs, size = 'medium', buttonVariant = 'normal', activate
     // If prop is not explicitly set, use standard when there is only one tab
     // This means by default, it will left-align when there is only one tab.
     const menuVariantSetting = menuVariant || tabs.length < 2 ? 'standard' : 'fullWidth';
-    return (_jsx(Box, { children: _jsxs(TabContext, { value: activatedTab, children: [_jsx(BaseTabMenu, { size: size, value: activatedTab, onChange: handleChange, variant: menuVariantSetting, buttonVariant: buttonVariant, TabIndicatorProps: { sx: { display: 'none' } }, ...TabsProps, children: tabs.map((t) => (_jsx(BaseTab, { buttonVariant: buttonVariant, size: size, disabled: t.disabled, disableTouchRipple: true, disableRipple: true, label: _jsx(Typography, { variant: "body_sb1", children: t.value }), value: t.value, ...TabProps }, t.value))) }), tabs.map((t) => (_jsx(BaseTabPanel, { value: t.value, ...TabPanelProps, children: t.element }, t.value)))] }) }));
+    return (_jsx(Box, { children: _jsxs(TabContext, { value: activatedTab, children: [_jsx(BaseTabMenu, { size: size, value: activatedTab, onChange: handleChange, variant: menuVariantSetting, buttonVariant: buttonVariant, slotProps: { indicator: { sx: { display: 'none' } } }, ...TabsProps, children: tabs.map((t) => (_jsx(BaseTab, { buttonVariant: buttonVariant, size: size, disabled: t.disabled, disableTouchRipple: true, disableRipple: true, label: _jsx(Typography, { variant: "body_sb1", children: t.value }), value: t.value, ...TabProps }, t.value))) }), tabs.map((t) => (_jsx(BaseTabPanel, { value: t.value, ...TabPanelProps, children: t.element }, t.value)))] }) }));
 };
 export default TabbedPanel;

package/dist/components/TabbedPanel/TabbedPanel.styled.js

@@ -1,4 +1,4 @@
-import TabPanel from '@mui/lab/TabPanel/TabPanel';
+import TabPanel from '@mui/lab/TabPanel';
 import { Tab, Tabs, styled } from '@mui/material';
 const tabSizeStyle = (size) => {
     return {

package/dist/components/Toggle/Toggle.js

@@ -7,10 +7,13 @@ const Toggle = ({ value, name, checked, defaultChecked, disabled, required, onCh
     return (_jsxs(Container, { ...rootProps, className: clsx('toggle', { 'is-disabled': disabled }, rootProps.className), component: label != null ? 'label' : 'span', children: [_jsx(ToggleComponent, { disableRipple: true, value: true, name: name, 
                 // indeterminate가 true인 Toggle을 클릭했을 때
                 // 발생하는 change event target의 checked property의 일관성을 보장함
-                checked: indeterminate ? true : checked, defaultChecked: defaultChecked, disabled: disabled, required: required, onChange: onChange, onChangeCapture: onChangeCapture, inputProps: inputProps, inputRef: inputRef, focusRipple: false, toggleColor: toggleColor }), label && (_jsx(Typography, { variant: "body_m1", sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    order: labelPlacement === 'left' ? -1 : 1,
-                }, children: label }))] }));
+                checked: indeterminate ? true : checked, defaultChecked: defaultChecked, disabled: disabled, required: required, onChange: onChange, onChangeCapture: onChangeCapture, slotProps: { input: { ...inputProps, ref: inputRef } }, focusRipple: false, toggleColor: toggleColor }), label && (_jsx(Typography, { variant: "body_m1", sx: [{
+                        display: 'flex',
+                        alignItems: 'center'
+                    }, labelPlacement === 'left' ? {
+                        order: -1
+                    } : {
+                        order: 1
+                    }], children: label }))] }));
 };
 export default Toggle;

package/dist/components/Tooltip/Tooltip.js

@@ -3,8 +3,8 @@ 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: {
+    return (_jsx(BaseTooltip, { ref: ref, arrow: true, size: size, slotProps: {
+            popper: {
                 modifiers: [
                     {
                         name: 'offset',

package/dist/components/UploadManager/UploadManager.js

@@ -36,7 +36,7 @@ const UploadFile = ({ file, onCancel, onRetry }) => {
                                     marginRight: '16px',
                                     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: {
+                                }, 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: {
                                     width: '79px',
                                     marginRight: '16px',
                                     whiteSpace: 'nowrap',
@@ -59,7 +59,7 @@ const UploadFile = ({ file, onCancel, onRetry }) => {
                                             }
                                         }, icon: mouseOnErrorIconButton ? (_jsx(RefreshLeft, { style: { color: theme.palette.neutralGrey[0] } })) : (_jsx(Warning16, { 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: {
+                                        } }) }) })] })), !file.meta.errorMessage && !!file.meta.postProcessConverting && (_jsxs(Typography, { variant: "body5", sx: {
                             flexGrow: 3,
                             flexShrink: 0,
                             flexBasis: 'auto',
@@ -83,8 +83,10 @@ const UploadManager = ({ title, subTitle, files, onClose, onCancel, onRetry, })
             bottom: '20px',
             right: '20px',
             zIndex: 10,
-        }, 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))) })] }) }));
+        }, 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: [expanded ? {
+                                                    transform: 'rotate(0deg)'
+                                                } : {
+                                                    transform: '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;

package/dist/components/index.js

@@ -1,16 +1,20 @@
 export * from './Alert';
+export * from './Autocomplete';
 export * from './Button';
 export * from './Card';
 export * from './Checkbox';
 export * from './Chip';
+export * from './Collapse';
 export * from './DataTable';
 export * from './DatePicker';
 export * from './Dialog';
 export * from './Divider';
+export * from './Drawer';
 export * from './Dropdown';
 export * from './EllipsisTypography';
 export * from './FileDnDZone';
 export * from './List';
+export * from './Popover';
 export * from './LoadingIndicator';
 export * from './Menu';
 export * from './Pagination';