@lunit/oui 3.0.0 → 3.1.0

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/Chip/Chip.utils.js

@@ -47,5 +47,4 @@ const presetMap = {
         label: 'Requested',
     },
 };
-// eslint-disable-next-line import/prefer-default-export
 export { presetMap };

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

@@ -2,10 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 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(DataGridPro, { 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.types.js

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

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

@@ -31,9 +31,7 @@ const Dropdown = (({ children, placeholder, value, error, helperMsg, onChange, s
                     setTimeout(() => {
                         document.activeElement.blur();
                     }, 0);
-                }, onChange: handleChange, error: !!error, open: 
-                // eslint-disable-next-line no-nested-ternary
-                typeof otherProps.open !== 'undefined'
+                }, onChange: handleChange, error: !!error, open: typeof otherProps.open !== 'undefined'
                     ? otherProps.open
                     : otherProps.disabled
                         ? false

package/dist/components/Dropdown/IconDropdown.js

@@ -13,9 +13,7 @@ const IconDropdown = ({ open, disabled, children, ...otherProps }) => {
                     cursor: 'pointer',
                     transform: 'scaleY(-1)',
                 }
-                : undefined })), open: 
-        // eslint-disable-next-line no-nested-ternary
-        typeof open !== 'undefined' ? open : disabled ? false : isOpen, disabled: disabled, multiple: false, onClick: () => {
+                : undefined })), open: typeof open !== 'undefined' ? open : disabled ? false : isOpen, disabled: disabled, multiple: false, onClick: () => {
             if (!disabled)
                 setOpen(!isOpen);
         }, MenuProps: {

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/List/ListItemCaption.styled.js

@@ -1,5 +1,4 @@
 import { styled, Typography } from '@mui/material';
-// eslint-disable-next-line import/prefer-default-export
 export const StyledListItemCaption = styled(Typography)(({ theme }) => ({
     ...theme.typography.body_m1,
     color: theme.palette.neutralGrey[45],

package/dist/components/LoadingIndicator/LoadingIndicator.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/no-var-requires */
 import { Player } from '@lottiefiles/react-lottie-player';
 import { LoadingOverlay, LoadingIndicatorBox, LoadingMessage, LoadingDetails, } from './LoadingIndicator.styled';
 const DotLoadingAnimation = require('./assets/DotLoadingAnimation.json');

package/dist/components/NoMatchContainer/NoMatchContainer.js

@@ -12,11 +12,11 @@ const NoMatchContainer = () => {
                 flexDirection: 'column',
                 alignItems: 'center',
             }, children: [_jsx(Typography, { variant: "h7", sx: {
-                        color: "neutralGrey.25",
+                        color: 'neutralGrey.25',
                         mt: '100px',
-                        mb: '16px'
+                        mb: '16px',
                     }, children: "Nothing matches your search" }), _jsx(Typography, { variant: "h9", sx: {
-                        color: "neutralGrey.25"
+                        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/Radio/RadioGroup.styled.js

@@ -1,5 +1,4 @@
 import { styled, RadioGroup } from '@mui/material';
-// eslint-disable-next-line import/prefer-default-export
 export const StyledRadioGroup = styled(RadioGroup)(({ theme }) => ({
     gap: theme.spacing(2),
 }));

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

@@ -26,9 +26,7 @@ const BaseTextInput = styled('input', {
 })(({ theme, large, error, leftIcon, width, type }) => {
     let resultStyle = {
         ...baseTextInputStyle(theme),
-        width: 
-        // eslint-disable-next-line no-nested-ternary
-        typeof width !== 'undefined' ? (typeof width === 'number' ? `${width}px` : width) : width,
+        width: typeof width !== 'undefined' ? (typeof width === 'number' ? `${width}px` : width) : width,
     };
     if (error) {
         resultStyle = {
@@ -64,9 +62,7 @@ const FileInputLabel = styled('label', {
 })(({ theme, large, error, leftIcon, width, disabled, readOnly }) => {
     let resultStyle = {
         ...baseTextInputStyle(theme),
-        width: 
-        // eslint-disable-next-line no-nested-ternary
-        typeof width !== 'undefined' ? (typeof width === 'number' ? `${width}px` : width) : width,
+        width: typeof width !== 'undefined' ? (typeof width === 'number' ? `${width}px` : width) : width,
     };
     if (error) {
         resultStyle = {

package/dist/components/Toggle/Toggle.js

@@ -7,13 +7,18 @@ 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, slotProps: { input: { ...inputProps, ref: inputRef } }, focusRipple: false, toggleColor: toggleColor }), label && (_jsx(Typography, { variant: "body_m1", sx: [{
+                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 }))] }));
+                        alignItems: 'center',
+                    },
+                    labelPlacement === 'left'
+                        ? {
+                            order: -1,
+                        }
+                        : {
+                            order: 1,
+                        },
+                ], children: label }))] }));
 };
 export default Toggle;

package/dist/components/UploadManager/UploadManager.js

@@ -83,10 +83,14 @@ 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: [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))) })] }) }));
+        }, 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';

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

@@ -52,13 +52,18 @@ export const GraphScoreIndicator = ({ value, isCutoff, isJet, }) => {
             leftPos = '20px';
         }
     }
-    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, {})] }));
+    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,26 +7,41 @@ 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: [{
+    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: [{
+                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',
@@ -37,15 +52,22 @@ const FreeText = ({ componentType = 'freeText', size = 'medium', content, height
                         width: '6px',
                         backgroundColor: theme.palette.neutralGrey[65],
                         borderRadius: '6px',
+                    },
+                },
+                background
+                    ? {
+                        color: '#FFFFFF',
+                    }
+                    : {
+                        color: 'inherit',
+                    },
+                height
+                    ? {
+                        height: '100%',
                     }
-                }, background ? {
-                    color: '#FFFFFF'
-                } : {
-                    color: 'inherit'
-                }, height ? {
-                    height: '100%'
-                } : {
-                    height: 'auto'
-                }], children: content }) }));
+                    : {
+                        height: 'auto',
+                    },
+            ], children: content }) }));
 };
 export default FreeText;

package/dist/presentations/HorizonDivider/HorizonDivider.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Divider } from '../../components';
+import { Divider } from '../../components/Divider';
 const HorizonDivider = ({ componentType = 'divider' }) => {
     if (!componentType)
         throw new Error("The 'componentType' prop is required.");

package/dist/presentations/Threshold/Threshold.js

@@ -6,25 +6,27 @@ import { BaseSlider, Container } from './Threshold.styled';
 import { Score } from '../Score';
 import { Statistic } from '../Statistic';
 import { PresentationTypography } from '../presentations.styled';
-import { Button, Dropdown, DropdownItem } from '../../components';
+import { Button } from '../../components/Button';
+import { Dropdown, DropdownItem } from '../../components/Dropdown';
 import { HorizonDivider } from '../HorizonDivider';
 import { FreeText } from '../FreeText';
-import { baseSliderMarks, getPresetValue } from './Threshold.utils';
-const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells, statisticItems, options, description, controlStep = 1, isLoading = false, thresholdState, onChangeDropdown, onChangeSlider, onSliderChangeCommitted, onClickUpdateConfiguration, }) => {
+import { NO_LABEL_ONLY_MARK, baseSliderMarks, getLabelOnlyMarkIndex, getSliderMarks, } from './Threshold.utils';
+const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells, statisticItems, options, description, controlStep = 1, showDefaultMark = false, isLoading = false, thresholdState, onChangeDropdown, onChangeSlider, onSliderChangeCommitted, onClickUpdateConfiguration, }) => {
     if (!componentType)
         throw new Error("The 'componentType' prop is required.");
-    if (!totalScore)
-        throw new Error("The 'totalScore' prop is required.");
     if (!statisticItems.length)
         throw new Error("The 'statisticItems' prop must contain at least one item.");
     if (!options.length)
         throw new Error("The 'options' prop must contain at least one item.");
     const [isThresholdChanged, setIsThresholdChanged] = useState(false);
     const selectedOptionValue = useMemo(() => {
-        return (options.find((option) => option.title === thresholdState?.selectedItem)?.value ||
+        return (options.find((option) => option.title === thresholdState?.selectedItem)?.value ??
             options[0].value);
     }, [options, thresholdState?.selectedItem]);
-    const presetValue = getPresetValue(options, thresholdState?.selectedItem);
+    const sliderMarks = useMemo(() => (showDefaultMark ? getSliderMarks(selectedOptionValue) : baseSliderMarks), [showDefaultMark, selectedOptionValue]);
+    const labelOnlyMarkIndex = useMemo(() => showDefaultMark
+        ? getLabelOnlyMarkIndex(sliderMarks, selectedOptionValue)
+        : NO_LABEL_ONLY_MARK, [showDefaultMark, sliderMarks, selectedOptionValue]);
     const handleDropdownChange = useCallback((event) => {
         onChangeDropdown(event);
         setIsThresholdChanged(false);
@@ -37,11 +39,11 @@ const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells,
         onClickUpdateConfiguration();
         setIsThresholdChanged(false);
     }, [onClickUpdateConfiguration]);
-    return (_jsxs(Container, { children: [_jsx(Score, { ...totalScore }), _jsx(Statistic, { ...totalCells }), statisticItems.map((item) => {
+    return (_jsxs(Container, { children: [totalScore && _jsx(Score, { ...totalScore }), _jsx(Statistic, { ...totalCells }), statisticItems.map((item) => {
                 return (_jsx(Statistic, { ...item }, uuidV4()));
             }), _jsx(HorizonDivider, { componentType: "divider" }), _jsx(PresentationTypography, { size: "medium", children: title }), _jsx(Dropdown, { value: thresholdState?.selectedItem, onChange: handleDropdownChange, sx: { width: '258px' }, children: options.map((option) => {
                     return (_jsx(DropdownItem, { value: option.title, children: option.title }, option.title));
-                }) }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', paddingTop: '36px', gap: '6px' }, children: [_jsx(BaseSlider, { disabled: thresholdState?.isPresetSelected, step: controlStep, value: thresholdState?.sliderValue, valueLabelDisplay: "on", defaultThreshold: presetValue, marks: baseSliderMarks, onChange: handleSliderChange, onChangeCommitted: onSliderChangeCommitted }), !thresholdState?.isPresetSelected && (_jsx(Button, { id: "update-threshold-config-btn", label: "Update Configuration", sx: {
+                }) }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', paddingTop: '36px', gap: '6px' }, children: [_jsx(BaseSlider, { disabled: thresholdState?.isPresetSelected, step: controlStep, value: thresholdState?.sliderValue, valueLabelDisplay: "on", marks: sliderMarks, labelOnlyMarkIndex: labelOnlyMarkIndex, onChange: handleSliderChange, onChangeCommitted: onSliderChangeCommitted }), !thresholdState?.isPresetSelected && (_jsx(Button, { id: "update-threshold-config-btn", label: "Update Configuration", sx: {
                             width: '100%',
                         }, disabled: !isThresholdChanged || isLoading, onClick: handleUpdateConfiguration, loading: isLoading })), thresholdState?.isPresetSelected && description?.preset && (_jsx(FreeText, { componentType: "freeText", size: "small-dimmed", content: description.preset })), !thresholdState?.isPresetSelected && description?.user && (_jsx(FreeText, { componentType: "freeText", size: "small-dimmed", content: description.user }))] })] }));
 };