@lunit/oui 2.4.18 → 3.0.0

package/dist/assets/ic-ellipse-exclude-outlined-20px.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgIcEllipseExcludeoutlined20Px = (props) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: [_jsx("defs", { children: _jsxs("mask", { id: "ic_ellipse_exclude=outlined_20px_svg__a", maskContentUnits: "userSpaceOnUse", maskUnits: "userSpaceOnUse", children: [_jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }), _jsx("path", { fill: "#000", d: "m10 10 23.34-32.485L50 10Z" })] }) }), _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16m0 1a9 9 0 1 0 0-18 9 9 0 0 0 0 18", clipRule: "evenodd", mask: "url(#ic_ellipse_exclude=outlined_20px_svg__a)" }), _jsx("path", { d: "M12.5 7a.5.5 0 0 1 0-1h6a.5.5 0 0 1 0 1z" })] }));
+export default SvgIcEllipseExcludeoutlined20Px;

package/dist/assets/ic-ellipse-include-outlined-20px.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgIcEllipseIncludeoutlined20Px = (props) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: [_jsx("defs", { children: _jsxs("mask", { id: "ic_ellipse_include=outlined_20px_svg__a", maskContentUnits: "userSpaceOnUse", maskUnits: "userSpaceOnUse", children: [_jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }), _jsx("path", { fill: "#000", d: "m10 10 12.998-43.082 31.678 48.469Z" })] }) }), _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16m0 1a9 9 0 1 0 0-18 9 9 0 0 0 0 18", clipRule: "evenodd", mask: "url(#ic_ellipse_include=outlined_20px_svg__a)" }), _jsx("path", { d: "M15.5 3a.5.5 0 0 0-.5.5V6h-2.5a.5.5 0 0 0 0 1H15v2.5a.5.5 0 0 0 1 0V7h2.5a.5.5 0 0 0 0-1H16V3.5a.5.5 0 0 0-.5-.5" })] }));
+export default SvgIcEllipseIncludeoutlined20Px;

package/dist/assets/ic-rectangle-exclude-outlined-20px.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgIcRectangleExcludeoutlined20Px = (props) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: [_jsx("path", { fillRule: "evenodd", d: "M1 2h1v16H1zm1 15h16v1H2zM2 2h10v1H2zm16 9h1v7h-1z", clipRule: "evenodd" }), _jsx("path", { d: "M12.5 7a.5.5 0 0 1 0-1h6a.5.5 0 0 1 0 1z" })] }));
+export default SvgIcRectangleExcludeoutlined20Px;

package/dist/assets/ic-rectangle-include-outlined-20px.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgIcRectangleIncludeoutlined20Px = (props) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: [_jsx("path", { fillRule: "evenodd", d: "M1 2h1v16H1zm1 15h16v1H2zM2 2h10v1H2zm16 9h1v7h-1z", clipRule: "evenodd" }), _jsx("path", { d: "M15.5 3a.5.5 0 0 0-.5.5V6h-2.5a.5.5 0 0 0 0 1H15v2.5a.5.5 0 0 0 1 0V7h2.5a.5.5 0 0 0 0-1H16V3.5a.5.5 0 0 0-.5-.5" })] }));
+export default SvgIcRectangleIncludeoutlined20Px;

package/dist/assets/index.js

@@ -5,6 +5,8 @@ export { default as IcCopyCoordinatesOutlined20Px } from './ic-copy-coordinates-
 export { default as IcCopyCoordinatesUrlOutlined20Px } from './ic-copy-coordinates-url-outlined-20px';
 export { default as IcDownloadPdfOutlined20Px } from './ic-download-pdf-outlined-20px';
 export { default as IcEllipseOutlined20Px } from './ic-ellipse-outlined-20px';
+export { default as IcEllipseExcludeOutlined20Px } from './ic-ellipse-exclude-outlined-20px';
+export { default as IcEllipseIncludeOutlined20Px } from './ic-ellipse-include-outlined-20px';
 export { default as IcFilterNotiOutlined20Px } from './ic-filter-noti-outlined-20px';
 export { default as IcHideLargeOutlined20Px } from './ic-hide-large-outlined-20px';
 export { default as IcHideSmallOutlined20Px } from './ic-hide-small-outlined-20px';
@@ -12,6 +14,8 @@ export { default as IcInformationLargeOutlined20Px } from './ic-information-larg
 export { default as IcInformationSmallOutlined20Px } from './ic-information-small-outlined-20px';
 export { default as IcManufacturerOutlined20Px } from './ic-manufacturer-outlined-20px';
 export { default as IcRectangleOutlined20Px } from './ic-rectangle-outlined-20px';
+export { default as IcRectangleExcludeOutlined20Px } from './ic-rectangle-exclude-outlined-20px';
+export { default as IcRectangleIncludeOutlined20Px } from './ic-rectangle-include-outlined-20px';
 export { default as IcRefreshLeftOutlined20Px } from './ic-refresh-left-outlined-20px';
 export { default as IcRefreshRightOutlined20Px } from './ic-refresh-right-outlined-20px';
 export { default as IcShowLargeOutlined20Px } from './ic-show-large-outlined-20px';

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/icons/EllipseExclude/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SvgIcon from '@mui/material/SvgIcon';
+import { IcEllipseExcludeOutlined20Px as outlined } from '../../assets';
+const variants = ['outlined'];
+const EllipseExclude = ({ variant = 'outlined', ...rest }) => {
+    if (variant === 'outlined') {
+        return (_jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true }));
+    }
+    return null;
+};
+EllipseExclude.displayName = 'EllipseExclude';
+EllipseExclude.variants = variants;
+export default EllipseExclude;

package/dist/icons/EllipseInclude/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SvgIcon from '@mui/material/SvgIcon';
+import { IcEllipseIncludeOutlined20Px as outlined } from '../../assets';
+const variants = ['outlined'];
+const EllipseInclude = ({ variant = 'outlined', ...rest }) => {
+    if (variant === 'outlined') {
+        return (_jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true }));
+    }
+    return null;
+};
+EllipseInclude.displayName = 'EllipseInclude';
+EllipseInclude.variants = variants;
+export default EllipseInclude;

package/dist/icons/RectangleExclude/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SvgIcon from '@mui/material/SvgIcon';
+import { IcRectangleExcludeOutlined20Px as outlined } from '../../assets';
+const variants = ['outlined'];
+const RectangleExclude = ({ variant = 'outlined', ...rest }) => {
+    if (variant === 'outlined') {
+        return (_jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true }));
+    }
+    return null;
+};
+RectangleExclude.displayName = 'RectangleExclude';
+RectangleExclude.variants = variants;
+export default RectangleExclude;

package/dist/icons/RectangleInclude/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SvgIcon from '@mui/material/SvgIcon';
+import { IcRectangleIncludeOutlined20Px as outlined } from '../../assets';
+const variants = ['outlined'];
+const RectangleInclude = ({ variant = 'outlined', ...rest }) => {
+    if (variant === 'outlined') {
+        return (_jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true }));
+    }
+    return null;
+};
+RectangleInclude.displayName = 'RectangleInclude';
+RectangleInclude.variants = variants;
+export default RectangleInclude;

package/dist/icons/index.js

@@ -3,6 +3,8 @@ export { default as CloseLarge } from './CloseLarge';
 export { default as CloseSmall } from './CloseSmall';
 export { default as DownloadPdf } from './DownloadPdf';
 export { default as Ellipse } from './Ellipse';
+export { default as EllipseExclude } from './EllipseExclude';
+export { default as EllipseInclude } from './EllipseInclude';
 export { default as FilterNoti } from './FilterNoti';
 export { default as HideLarge } from './HideLarge';
 export { default as HideSmall } from './HideSmall';
@@ -10,6 +12,8 @@ export { default as InformationLarge } from './InformationLarge';
 export { default as InformationSmall } from './InformationSmall';
 export { default as Manufacturer } from './Manufacturer';
 export { default as Rectangle } from './Rectangle';
+export { default as RectangleExclude } from './RectangleExclude';
+export { default as RectangleInclude } from './RectangleInclude';
 export { default as RefreshLeft } from './RefreshLeft';
 export { default as RefreshRight } from './RefreshRight';
 export { default as ShowLarge } from './ShowLarge';

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/types/assets/ic-ellipse-exclude-outlined-20px.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+declare const SvgIcEllipseExcludeoutlined20Px: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SvgIcEllipseExcludeoutlined20Px;

package/dist/types/assets/ic-ellipse-include-outlined-20px.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+declare const SvgIcEllipseIncludeoutlined20Px: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SvgIcEllipseIncludeoutlined20Px;

package/dist/types/assets/ic-rectangle-exclude-outlined-20px.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+declare const SvgIcRectangleExcludeoutlined20Px: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SvgIcRectangleExcludeoutlined20Px;

package/dist/types/assets/ic-rectangle-include-outlined-20px.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+declare const SvgIcRectangleIncludeoutlined20Px: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SvgIcRectangleIncludeoutlined20Px;

package/dist/{assets → types/assets}/index.d.ts

@@ -5,6 +5,8 @@ export { default as IcCopyCoordinatesOutlined20Px } from './ic-copy-coordinates-
 export { default as IcCopyCoordinatesUrlOutlined20Px } from './ic-copy-coordinates-url-outlined-20px';
 export { default as IcDownloadPdfOutlined20Px } from './ic-download-pdf-outlined-20px';
 export { default as IcEllipseOutlined20Px } from './ic-ellipse-outlined-20px';
+export { default as IcEllipseExcludeOutlined20Px } from './ic-ellipse-exclude-outlined-20px';
+export { default as IcEllipseIncludeOutlined20Px } from './ic-ellipse-include-outlined-20px';
 export { default as IcFilterNotiOutlined20Px } from './ic-filter-noti-outlined-20px';
 export { default as IcHideLargeOutlined20Px } from './ic-hide-large-outlined-20px';
 export { default as IcHideSmallOutlined20Px } from './ic-hide-small-outlined-20px';
@@ -12,6 +14,8 @@ export { default as IcInformationLargeOutlined20Px } from './ic-information-larg
 export { default as IcInformationSmallOutlined20Px } from './ic-information-small-outlined-20px';
 export { default as IcManufacturerOutlined20Px } from './ic-manufacturer-outlined-20px';
 export { default as IcRectangleOutlined20Px } from './ic-rectangle-outlined-20px';
+export { default as IcRectangleExcludeOutlined20Px } from './ic-rectangle-exclude-outlined-20px';
+export { default as IcRectangleIncludeOutlined20Px } from './ic-rectangle-include-outlined-20px';
 export { default as IcRefreshLeftOutlined20Px } from './ic-refresh-left-outlined-20px';
 export { default as IcRefreshRightOutlined20Px } from './ic-refresh-right-outlined-20px';
 export { default as IcShowLargeOutlined20Px } from './ic-show-large-outlined-20px';