@lunit/oui 2.4.19 → 3.0.0

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/DataTable/DataTable.js

@@ -1,9 +1,9 @@
 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: {
+    return (_jsx(DataGridContainer, { children: _jsx(DataGridPro, { rows: rows, columns: columns, columnHeaderHeight: 40, rowHeight: 40, showColumnVerticalBorder: true, showCellVerticalBorder: true, disableColumnMenu: true, hideFooter: true, slots: {
                 noRowsOverlay: () => _jsx("div", {}),
                 baseCheckbox: Checkbox,
             }, ...otherProps }) }));

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/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/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/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/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/foundations/palette.js

@@ -200,6 +200,10 @@ const palette = {
         InvalidHover: '#A7A7A7',
         InvalidSelected: '#6E6E74',
     },
+    DataGrid: {
+        bg: 'transparent',
+        headerBg: 'transparent',
+    },
     scope1: '#7292FD',
     scope2: '#587EFC',
     scope3: '#B0C0F4',

package/dist/presentations/AnalysisBar/AnalysisBar.styled.js

@@ -52,10 +52,13 @@ export const GraphScoreIndicator = ({ value, isCutoff, isJet, }) => {
             leftPos = '20px';
         }
     }
-    return (_jsxs(GraphScoreIndicatorContainer, { className: "analysis-bar-score-indicator", sx: {
-            left: leftPos,
-            transform: isJet ? 'translateX(-50%) translateY(8px)' : 'translateX(-50%)',
-        }, isJet: isJet, children: [_jsx(Typography, { variant: "small_body_sb1", sx: { textAlign: 'center' }, children: value }), _jsx(GraphScoreIndicatorPip, {})] }));
+    return (_jsxs(GraphScoreIndicatorContainer, { className: "analysis-bar-score-indicator", sx: [{
+                left: leftPos
+            }, isJet ? {
+                transform: 'translateX(-50%) translateY(8px)'
+            } : {
+                transform: 'translateX(-50%)'
+            }], isJet: isJet, children: [_jsx(Typography, { variant: "small_body_sb1", sx: { textAlign: 'center' }, children: value }), _jsx(GraphScoreIndicatorPip, {})] }));
 };
 const GraphAxisLabelContainer = styled('span')(() => {
     return {

package/dist/presentations/FreeText/FreeText.js

@@ -7,27 +7,45 @@ const FreeText = ({ componentType = 'freeText', size = 'medium', content, height
         throw new Error("The 'componentType' prop is required.");
     if (!content)
         throw new Error("The 'content' prop is required.");
-    return (_jsx(Box, { sx: {
-            padding: background ? '8px 6px 8px 16px' : 0,
-            borderRadius: background ? '8px' : 0,
-            backgroundColor: background ? theme.palette.neutralGrey[75] : 'transparent',
-            height: height ? height : 'auto',
-            display: 'flex',
-            overflowY: 'auto',
-        }, children: _jsx(PresentationTypography, { size: size, sx: {
-                display: 'block',
-                whiteSpace: 'pre-wrap',
-                overflow: 'auto',
-                color: background ? '#FFFFFF' : 'inherit',
-                height: height ? '100%' : 'auto',
-                '&::-webkit-scrollbar': {
-                    width: '12px',
-                },
-                '&::-webkit-scrollbar-thumb': {
-                    width: '6px',
-                    backgroundColor: theme.palette.neutralGrey[65],
-                    borderRadius: '6px',
-                },
-            }, children: content }) }));
+    return (_jsx(Box, { sx: [{
+                display: 'flex',
+                overflowY: 'auto'
+            }, background ? {
+                padding: '8px 6px 8px 16px'
+            } : {
+                padding: 0
+            }, background ? {
+                borderRadius: '8px'
+            } : {
+                borderRadius: 0
+            }, background ? {
+                backgroundColor: theme.palette.neutralGrey[75]
+            } : {
+                backgroundColor: 'transparent'
+            }, height ? {
+                height: height
+            } : {
+                height: 'auto'
+            }], children: _jsx(PresentationTypography, { size: size, sx: [{
+                    display: 'block',
+                    whiteSpace: 'pre-wrap',
+                    overflow: 'auto',
+                    '&::-webkit-scrollbar': {
+                        width: '12px',
+                    },
+                    '&::-webkit-scrollbar-thumb': {
+                        width: '6px',
+                        backgroundColor: theme.palette.neutralGrey[65],
+                        borderRadius: '6px',
+                    }
+                }, background ? {
+                    color: '#FFFFFF'
+                } : {
+                    color: 'inherit'
+                }, height ? {
+                    height: '100%'
+                } : {
+                    height: 'auto'
+                }], children: content }) }));
 };
 export default FreeText;

package/dist/theme.js

@@ -1,4 +1,5 @@
 import { createTheme } from '@mui/material/styles';
+import '@mui/x-data-grid/themeAugmentation';
 import MuiCssBaseline from './components/MuiCssBaseline';
 import MuiInputBase from './components/MuiInputBase';
 import MuiOutlinedInput from './components/MuiOutlinedInput';

package/dist/{components → types/components}/Checkbox/Checkbox.types.d.ts

@@ -10,6 +10,6 @@ export interface CheckboxProps extends Omit<BoxProps<'span'>, 'onChange' | 'onCh
     onChange?: MuiCheckboxProps['onChange'];
     onChangeCapture?: MuiCheckboxProps['onChangeCapture'];
     label?: string;
-    inputProps?: MuiCheckboxProps['inputProps'];
-    inputRef?: MuiCheckboxProps['inputRef'];
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    inputRef?: React.Ref<HTMLInputElement>;
 }

package/dist/types/components/DataTable/DataTable.d.ts

@@ -0,0 +1,3 @@
+import { type DataGridProProps } from '@mui/x-data-grid-pro';
+declare function DataTable({ rows, columns, ...otherProps }: DataGridProProps): import("react/jsx-runtime").JSX.Element;
+export default DataTable;

package/dist/{components → types/components}/DatePicker/DatePicker.types.d.ts

@@ -1,6 +1,6 @@
 import type { DatePickerProps as MuiDatePickerProps } from '@mui/x-date-pickers/DatePicker';
 export type DatePickerAlignment = 'left' | 'center' | 'right';
-export interface DatePickerProps extends MuiDatePickerProps<Date> {
+export interface DatePickerProps extends MuiDatePickerProps {
     alignment?: DatePickerAlignment;
     placeholder?: string;
 }

package/dist/{components → types/components}/Dropdown/Dropdown.types.d.ts

@@ -7,6 +7,7 @@ type BaseDropdownProps<T = unknown> = SelectProps<T>;
 interface DropdownProps<T = unknown> extends Omit<BaseDropdownProps<T>, 'IconComponent' | 'error' | 'sx' | 'style'> {
     error?: string;
     helperMsg?: string;
+    placeholder?: string;
     ContainerProps?: BoxProps;
     sx?: SelectProps['sx'];
     style?: SelectProps['style'];

package/dist/{components → types/components}/Dropdown/IconDropdown.types.d.ts

@@ -1,10 +1,9 @@
 import type { TypographyProps } from '@mui/system';
 import type { BaseDropdownProps } from '../Dropdown/Dropdown.types';
-interface BaseIconDropdownProps extends BaseDropdownProps {
+type BaseIconDropdownProps = BaseDropdownProps & {
     isToggled?: boolean;
-}
-interface IconDropdownProps extends BaseIconDropdownProps {
-}
+};
+type IconDropdownProps = BaseIconDropdownProps;
 interface PlaceholderProps extends TypographyProps {
     disabled?: boolean;
 }

package/dist/{components → types/components}/Menu/Menu.types.d.ts

@@ -1,4 +1,4 @@
-import type { MenuProps as MuiMenuProps } from '@mui/material';
+import type { MenuProps as MuiMenuProps, PaperProps } from '@mui/material';
 export type MenuSize = 'small' | 'medium';
 export interface MenuProps extends StyledMenuProps {
     size?: MenuSize;
@@ -7,6 +7,8 @@ export interface MenuProps extends StyledMenuProps {
 }
 export interface StyledMenuProps extends MuiMenuProps {
     size?: MenuSize;
+    /** @deprecated Use slotProps={{ paper: ... }} instead */
+    PaperProps?: PaperProps;
 }
 export interface MenuContextValue {
     size: MenuSize;

package/dist/{components → types/components}/Radio/Radio.types.d.ts

@@ -9,6 +9,6 @@ export interface RadioProps extends Omit<BoxProps<'span'>, 'onChange' | 'onChang
     onChange?: MuiRadioProps['onChange'];
     onChangeCapture?: MuiRadioProps['onChangeCapture'];
     label?: string;
-    inputProps?: MuiRadioProps['inputProps'];
-    inputRef?: MuiRadioProps['inputRef'];
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    inputRef?: React.Ref<HTMLInputElement>;
 }

package/dist/{components → types/components}/Toggle/Toggle.types.d.ts

@@ -8,8 +8,8 @@ export interface ToggleProps extends Omit<BoxProps<'span'>, 'onChange' | 'onChan
     required?: MuiSwitchProps['required'];
     onChange?: MuiSwitchProps['onChange'];
     onChangeCapture?: MuiSwitchProps['onChangeCapture'];
-    inputProps?: MuiSwitchProps['inputProps'];
-    inputRef?: MuiSwitchProps['inputRef'];
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    inputRef?: React.Ref<HTMLInputElement>;
     indeterminate?: boolean;
     label?: string;
     labelPlacement?: 'left' | 'right';

package/dist/{foundations → types/foundations}/typography.d.ts

@@ -1,4 +1,4 @@
-import { TypographyOptions } from '@mui/material/styles/createTypography';
+import type { TypographyVariantsOptions } from '@mui/material/styles';
 export interface LunitTypographyVariants {
     h7: React.CSSProperties;
     h8: React.CSSProperties;
@@ -153,5 +153,5 @@ declare module '@mui/material/Typography' {
     interface TypographyPropsVariantOverrides extends LunitTypographyPropsVariantOverrides {
     }
 }
-declare const typographyOptions: TypographyOptions;
+declare const typographyOptions: TypographyVariantsOptions;
 export default typographyOptions;

package/dist/{theme.d.ts → types/theme.d.ts}

@@ -1,3 +1,4 @@
+import '@mui/x-data-grid/themeAugmentation';
 import { LunitPalette, LunitTypographyPropsVariantOverrides, LunitTypographyVariants, LunitTypographyVariantsOptions } from './foundations';
 declare module '@mui/material/styles' {
     interface Palette extends LunitPalette {