@lunit/oui 2.0.1 → 2.2.0

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

@@ -23,6 +23,7 @@ const baseDropdownStyle = (theme) => {
         '&.Mui-disabled': { border: 'none', background: theme.palette.neutralGrey[75] },
         '.MuiSvgIcon-root ': {
             cursor: 'pointer',
+            marginRight: '16px',
             color: theme.palette.neutralGrey[5],
             '&.Mui-disabled': {
                 color: theme.palette.neutralGrey[45],

package/dist/components/Tooltip/Tooltip.utils.js

@@ -25,5 +25,5 @@ export const setMarginByPlacement = (tooltipPlacement, margin) => ({
 })[tooltipPlacement];
 export const setPaddingBySize = (tooltipSize) => ({
     small: '6px 8px',
-    large: '12px 16px',
+    large: '16px',
 })[tooltipSize];

package/dist/presentations/Accordion/index.d.ts

@@ -1,2 +1,4 @@
 import Accordion from './Accordion';
+import { AccordionProps } from './Accordion.types';
 export { Accordion };
+export type { AccordionProps };

package/dist/presentations/AnalysisBar/AnalysisBar.js

@@ -8,7 +8,7 @@ const Segments = ({ segments, adjustForOnePercent }) => {
         return null;
     }
     if (segments?.length === 1 && segments[0].color === 'jet') {
-        return (_jsx(Box, { sx: { width: '100%', height: '12px', transform: 'scaleY(0.8) translateY(-10px)' }, children: _jsx(HeatmapGraphSVG, { width: 'auto', height: 'auto' }) }));
+        return (_jsx(Box, { sx: { width: '100%', height: '14px', transform: 'scaleY(0.8)' }, children: _jsx(HeatmapGraphSVG, { width: 'auto', height: 'auto' }) }));
     }
     return (_jsx(_Fragment, { children: segments?.map((segment, i) => {
             if (segment.color === 'jet') {
@@ -19,7 +19,7 @@ const Segments = ({ segments, adjustForOnePercent }) => {
 };
 const AnalysisBar = ({ componentType = 'analysisBar', expressionValue, caption, expressionLevels, segments, isDimmed = false, }) => {
     const hasAdjustedOnePercentSegment = segments?.[0].width === 1;
-    return (_jsxs(AnalysisBarOuter, { className: "analysis-bar", isDimmed: isDimmed, children: [_jsxs(AnalysisBarSegmentContainer, { children: [expressionValue && (_jsx(GraphScoreIndicator, { adjustForOnePercent: hasAdjustedOnePercentSegment, value: expressionValue })), _jsx(Segments, { segments: segments, adjustForOnePercent: hasAdjustedOnePercentSegment })] }), _jsxs(AxisLabels, { children: [expressionLevels.map((val, i) => {
+    return (_jsxs(AnalysisBarOuter, { className: "analysis-bar", isDimmed: isDimmed, children: [_jsxs(AnalysisBarSegmentContainer, { children: [expressionValue && (_jsx(GraphScoreIndicator, { adjustForOnePercent: hasAdjustedOnePercentSegment, value: expressionValue, isJet: segments?.[0].color === 'jet' })), _jsx(Segments, { segments: segments, adjustForOnePercent: hasAdjustedOnePercentSegment })] }), _jsxs(AxisLabels, { children: [expressionLevels.map((val, i) => {
                         return (_jsx(GraphAxisLabel, { label: val, adjustForOnePercent: hasAdjustedOnePercentSegment, leftPos: parseStringValToNumber(val) }, i));
                     }), caption && (_jsx(GraphAxisLabel, { label: caption, adjustForOnePercent: hasAdjustedOnePercentSegment, leftPos: 50 }))] })] }));
 };

package/dist/presentations/AnalysisBar/AnalysisBar.styled.d.ts

@@ -7,9 +7,10 @@ export declare const AnalysisBarOuter: import("@emotion/styled").StyledComponent
 export declare const AnalysisBarSegmentContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const GraphScoreIndicator: ({ value, adjustForOnePercent, }: {
+export declare const GraphScoreIndicator: ({ value, adjustForOnePercent, isJet, }: {
     value: string;
     adjustForOnePercent: boolean;
+    isJet?: boolean | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const GraphAxisLabel: ({ label, leftPos, adjustForOnePercent, }: {
     label: string;

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

@@ -17,14 +17,16 @@ export const AnalysisBarSegmentContainer = styled(Box)(() => ({
     position: 'relative',
     width: '100%',
 }));
-const GraphScoreIndicatorContainer = styled('span')(() => {
+const GraphScoreIndicatorContainer = styled('span', {
+    shouldForwardProp: (prop) => prop !== 'isJet',
+})(({ isJet }) => {
     return {
         width: '20px',
         position: 'absolute',
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
-        top: '-20px',
+        top: isJet ? '-20px' : '-19px',
         zIndex: 999,
     };
 });
@@ -38,14 +40,14 @@ const GraphScoreIndicatorPip = styled('span')(() => {
         boxSizing: 'content-box',
     };
 });
-export const GraphScoreIndicator = ({ value, adjustForOnePercent, }) => {
+export const GraphScoreIndicator = ({ value, adjustForOnePercent, isJet, }) => {
     let leftPos = parseStringValToNumber(value);
     if (adjustForOnePercent) {
         leftPos = adjustBarLabelPosition(leftPos);
     }
     return (_jsxs(GraphScoreIndicatorContainer, { className: "analysis-bar-score-indicator", sx: {
             left: `${leftPos}%`,
-            transform: 'translateX(-50%)',
+            transform: isJet ? 'translateX(-50%) translateY(8px)' : 'translateX(-50%)',
         }, children: [_jsx(Typography, { variant: "small_body_sb1", sx: { textAlign: 'center' }, children: value }), _jsx(GraphScoreIndicatorPip, {})] }));
 };
 const GraphAxisLabelContainer = styled('span')(() => {

package/dist/presentations/FreeText/FreeText.js

@@ -8,8 +8,9 @@ const FreeText = ({ componentType = 'freeText', size = 'medium', content, height
             borderRadius: background ? '8px' : 0,
             backgroundColor: background ? theme.palette.neutralGrey[75] : 'transparent',
             height: height ? height : 'auto',
+            display: 'flex',
         }, children: _jsx(PresentationTypography, { size: size, sx: {
-                display: 'flex',
+                display: 'block',
                 whiteSpace: 'pre-wrap',
                 overflow: 'auto',
                 color: background ? '#FFFFFF' : 'inherit',

package/dist/presentations/Histogram/Histogram.d.ts

@@ -1,3 +1,3 @@
 import type { HistogramProps } from './Histogram.types';
-declare const Histogram: ({ componentType, title, xAxisLabels, yAxisLabels, tabs, }: HistogramProps) => import("react/jsx-runtime").JSX.Element;
+declare const Histogram: ({ componentType, title, xAxisLabels, yAxisLabels, tabs, description, }: HistogramProps) => import("react/jsx-runtime").JSX.Element;
 export default Histogram;

package/dist/presentations/Histogram/Histogram.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
+import { v4 as uuidV4 } from 'uuid';
 import { Box } from '@mui/material';
-import { HistogramContainer, HistogramChartContainer, HistogramTitle, HistogramNoData, } from './Histogram.styled';
+import { HistogramContainer, HistogramChartContainer, HistogramTitle, HistogramNoData, HistogramDescription, } from './Histogram.styled';
 import HistogramTabs from './HistogramTabs';
 import HistogramChart from './HistogramCharts';
-const Histogram = ({ componentType = 'histogram', title, xAxisLabels, yAxisLabels, tabs, }) => {
+import { FreeText } from '../FreeText';
+const Histogram = ({ componentType = 'histogram', title, xAxisLabels, yAxisLabels, tabs, description = [], }) => {
     const [activeIndex, setActiveIndex] = useState(0);
     const noData = tabs[activeIndex].data.length === 0;
     return (_jsxs(HistogramContainer, { children: [noData && _jsx(HistogramNoData, { children: "No Data" }), title && _jsx(HistogramTitle, { children: title }), _jsx(HistogramTabs, { options: tabs.map((tab) => tab.label), active: activeIndex, onChange: setActiveIndex }), _jsx(HistogramChartContainer, { children: _jsx(Box, { sx: {
                         position: 'absolute',
                         left: '-25px',
-                    }, children: _jsx(HistogramChart, { dataset: tabs[activeIndex], xAxisLabels: xAxisLabels, yAxisLabels: yAxisLabels }) }) })] }));
+                    }, children: _jsx(HistogramChart, { dataset: tabs[activeIndex], xAxisLabels: xAxisLabels, yAxisLabels: yAxisLabels }) }) }), _jsx(HistogramDescription, { children: description.length > 0 &&
+                    description.map((item) => (_jsx(FreeText, { ...item }, uuidV4()))) })] }));
 };
 export default Histogram;

package/dist/presentations/Histogram/Histogram.styled.d.ts

@@ -14,6 +14,9 @@ export declare const HistogramTabsContainer: import("@emotion/styled").StyledCom
 export declare const HistogramChartContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const HistogramDescription: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const TabButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, "color" | "disabled" | "size" | "style" | "fullWidth" | "classes" | "className" | "children" | "sx" | "variant" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "href" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {

package/dist/presentations/Histogram/Histogram.styled.js

@@ -29,6 +29,11 @@ export const HistogramChartContainer = styled(Box)({
     width: '244px',
     marginBottom: '32px',
 });
+export const HistogramDescription = styled(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+});
 export const TabButton = styled(Button, {
     shouldForwardProp: (prop) => prop !== 'active',
 })(({ theme, active = false }) => ({

package/dist/presentations/Histogram/Histogram.types.d.ts

@@ -1,3 +1,4 @@
+import { FreeTextProps } from '../FreeText';
 export interface HistogramTab {
     label: string;
     data: number[];
@@ -5,6 +6,7 @@ export interface HistogramTab {
 export interface HistogramProps {
     componentType: 'histogram';
     title?: string;
+    description?: FreeTextProps[];
     xAxisLabels: number[];
     yAxisLabels: number[];
     tabs: HistogramTab[];

package/dist/presentations/Preview/Preview.d.ts

@@ -0,0 +1,3 @@
+import { PreviewProps } from './Preview.types';
+declare const Preview: ({ visualizationControls, analysisSummary }: PreviewProps) => import("react/jsx-runtime").JSX.Element;
+export default Preview;

package/dist/presentations/Preview/Preview.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { v4 as uuidV4 } from 'uuid';
+import { Container } from './Preview.styled';
+import { Box } from '@mui/material';
+import { ToggleControl } from '../ToggleControl';
+import { ToggleControlGroup } from '../ToggleControlGroup';
+import { AnalysisBar } from '../AnalysisBar';
+import { HorizonDivider } from '../HorizonDivider';
+import { Accordion } from '../Accordion';
+import { Statistic } from '../Statistic';
+import { Score } from '../Score';
+import { FreeText } from '../FreeText';
+import { Threshold } from '../Threshold';
+import { Histogram } from '../Histogram';
+const Preview = ({ visualizationControls = [], analysisSummary = [] }) => {
+    return (_jsxs(Container, { children: [_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' }, children: visualizationControls.map((item) => (_jsxs(Box, { children: [item.componentType === 'toggle' && (_jsx(ToggleControl, { ...item, onChange: () => { } }, uuidV4())), item.componentType === 'toggleGroup' && (_jsx(ToggleControlGroup, { ...item, onChange: () => { } }, uuidV4())), item.componentType === 'analysisBar' && (_jsx(AnalysisBar, { ...item }, uuidV4()))] }, uuidV4()))) }), _jsx(HorizonDivider, { componentType: "divider" }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' }, children: [_jsx(FreeText, { componentType: "freeText", size: "large-bold", content: "Analysis Summary" }), analysisSummary.map((item) => (_jsxs(Box, { children: [item.componentType === 'accordion' && (_jsx(Accordion, { ...item }, uuidV4())), item.componentType === 'statistic' && (_jsx(Statistic, { ...item }, uuidV4())), item.componentType === 'score' && (_jsx(Score, { ...item }, uuidV4())), item.componentType === 'freeText' && (_jsx(FreeText, { ...item }, uuidV4())), item.componentType === 'threshold' && (_jsx(Threshold, { ...item }, uuidV4())), item.componentType === 'histogram' && (_jsx(Histogram, { ...item }, uuidV4()))] }, uuidV4())))] })] }));
+};
+export default Preview;

package/dist/presentations/Preview/Preview.styled.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/presentations/Preview/Preview.styled.js

@@ -0,0 +1,9 @@
+import { Box, styled } from '@mui/material';
+import theme from '../../theme';
+export const Container = styled(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '12px',
+    width: '290px',
+    backgroundColor: theme.palette.neutralGrey[95],
+});

package/dist/presentations/Preview/Preview.types.d.ts

@@ -0,0 +1,14 @@
+import { AccordionProps } from '../Accordion';
+import { StatisticProps } from '../Statistic';
+import { ScoreProps } from '../Score';
+import { ToggleControlProps } from '../ToggleControl';
+import { ToggleControlGroupProps } from '../ToggleControlGroup';
+import { AnalysisBarProps } from '../AnalysisBar';
+import { FreeTextProps } from '../FreeText';
+import { ThresholdProps } from '../Threshold';
+import { HistogramProps } from '../Histogram';
+interface PreviewProps {
+    visualizationControls: (ToggleControlProps | ToggleControlGroupProps | AnalysisBarProps)[];
+    analysisSummary: (AccordionProps | StatisticProps | ScoreProps | FreeTextProps | ThresholdProps | HistogramProps)[];
+}
+export type { PreviewProps };

package/dist/presentations/Preview/Preview.types.js

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

package/dist/presentations/Preview/index.d.ts

@@ -0,0 +1,4 @@
+import Preview from './Preview';
+import { PreviewProps } from './Preview.types';
+export { Preview };
+export type { PreviewProps };

package/dist/presentations/Preview/index.js

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

package/dist/presentations/Statistic/Statistic.d.ts

@@ -1,3 +1,3 @@
 import { StatisticProps } from './Statistic.types';
-declare const Statistic: ({ componentType, title, layout, metrics, size, symbol, color, ...rest }: StatisticProps) => import("react/jsx-runtime").JSX.Element;
+declare const Statistic: ({ componentType, title, layout, metrics, size, symbol, color, isDimmed, ...rest }: StatisticProps) => import("react/jsx-runtime").JSX.Element;
 export default Statistic;

package/dist/presentations/Statistic/Statistic.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { Container, HorizontalStatisticContainer, VerticalStatisticContainer, } from './Statistic.styled';
 import { PresentationSymbolIcon, PresentationTypography } from '../presentations.styled';
-const Statistic = ({ componentType = 'statistic', title, layout = 'vertical', metrics = '', size = 'medium', symbol, color, ...rest }) => {
+const Statistic = ({ componentType = 'statistic', title, layout = 'vertical', metrics = '', size = 'medium', symbol, color, isDimmed = false, ...rest }) => {
     return (_jsx(Container, { ...rest, sx: { width: '100%' }, children: layout === 'horizontal' ? (_jsxs(HorizontalStatisticContainer, { children: [_jsxs(Box, { sx: {
                         display: 'flex',
                         alignItems: 'center',
                         gap: '6px',
-                    }, children: [symbol && (_jsx(PresentationSymbolIcon, { symbol: symbol, color: color })), _jsx(PresentationTypography, { size: size, children: title })] }), _jsx(PresentationTypography, { size: size, children: metrics })] })) : (_jsx(VerticalStatisticContainer, { title: title, metrics: metrics })) }));
+                    }, children: [symbol && (_jsx(PresentationSymbolIcon, { symbol: symbol, color: color, isDimmed: isDimmed })), _jsx(PresentationTypography, { isDimmed: isDimmed, size: size, children: title })] }), _jsx(PresentationTypography, { size: size, children: metrics })] })) : (_jsx(VerticalStatisticContainer, { title: title, metrics: metrics })) }));
 };
 export default Statistic;

package/dist/presentations/Statistic/Statistic.types.d.ts

@@ -1,6 +1,6 @@
 import { BoxProps } from '@mui/material';
 import { PresentationSymbolProps } from '../presentations.types';
-export interface StatisticProps extends BoxProps {
+export interface StatisticSpec extends BoxProps {
     componentType: 'statistic';
     title: string;
     layout?: 'horizontal' | 'vertical';
@@ -8,4 +8,8 @@ export interface StatisticProps extends BoxProps {
     size?: 'small-dimmed' | 'small' | 'small-bold' | 'medium' | 'medium-bold' | 'large-bold';
     symbol?: PresentationSymbolProps['symbol'];
     color?: string;
+    id?: string;
+}
+export interface StatisticProps extends StatisticSpec {
+    isDimmed?: boolean;
 }

package/dist/presentations/Statistic/index.d.ts

@@ -1,4 +1,4 @@
 import Statistic from './Statistic';
-import type { StatisticProps } from './Statistic.types';
+import type { StatisticProps, StatisticSpec } from './Statistic.types';
 export { Statistic };
-export type { StatisticProps };
+export type { StatisticProps, StatisticSpec };

package/dist/presentations/Threshold/Threshold.d.ts

@@ -0,0 +1,3 @@
+import { ThresholdProps } from './Threshold.types';
+declare const Threshold: ({ componentType, title, totalScore, totalCells, statisticItems, options, description, controlStep, onChangeDropdown, onSliderChangeCommitted, }: ThresholdProps) => import("react/jsx-runtime").JSX.Element;
+export default Threshold;

package/dist/presentations/Threshold/Threshold.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { v4 as uuidV4 } from 'uuid';
+import { Box } from '@mui/material';
+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 { HorizonDivider } from '../HorizonDivider';
+import { FreeText } from '../FreeText';
+import { getPresetValue, getSliderMarks } from './Threshold.utils';
+const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells, statisticItems, options, description, controlStep = 1, onChangeDropdown, onSliderChangeCommitted, }) => {
+    const [selectedItem, setSelectedItem] = useState(options[0].title.toString());
+    const [selectedValue, setSelectedValue] = useState(options[0].value);
+    const [isPresetSelected, setIsPresetSelected] = useState(options[0].isPreset);
+    const presetValue = getPresetValue(options, selectedItem);
+    const marks = getSliderMarks(presetValue);
+    const handleChange = (event) => {
+        setSelectedItem(event.target.value);
+        setSelectedValue(options.find((option) => option.title === event.target.value)?.value);
+        setIsPresetSelected(options.find((option) => option.title === event.target.value)?.isPreset || false);
+        onChangeDropdown(event);
+    };
+    const handleSliderChange = (event, value) => {
+        setSelectedValue(value);
+    };
+    return (_jsxs(Container, { children: [_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: selectedItem, onChange: handleChange, 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: isPresetSelected, step: controlStep, value: selectedValue, valueLabelDisplay: "on", defaultThreshold: presetValue, marks: marks, onChange: handleSliderChange, onChangeCommitted: onSliderChangeCommitted }), !isPresetSelected && (_jsx(Button, { label: "Update Configuration", sx: {
+                            width: '100%',
+                        } })), isPresetSelected && description?.preset && (_jsx(FreeText, { componentType: "freeText", size: "small-dimmed", content: description.preset })), !isPresetSelected && description?.user && (_jsx(FreeText, { componentType: "freeText", size: "small-dimmed", content: description.user }))] })] }));
+};
+export default Threshold;

package/dist/presentations/Threshold/Threshold.styled.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { BaseSliderProps } from './Threshold.types';
+export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const BaseSlider: import("@emotion/styled").StyledComponent<import("@mui/material").SliderOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "components" | "color" | "disabled" | "scale" | "size" | "style" | "classes" | "className" | "sx" | "track" | "defaultValue" | "tabIndex" | "aria-label" | "aria-labelledby" | "aria-valuetext" | "onChange" | "name" | "value" | "componentsProps" | "slotProps" | "slots" | "max" | "orientation" | "disableSwap" | "getAriaLabel" | "getAriaValueText" | "marks" | "min" | "onChangeCommitted" | "step" | "valueLabelDisplay" | "valueLabelFormat"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & BaseSliderProps, {}, {}>;

package/dist/presentations/Threshold/Threshold.styled.js

@@ -0,0 +1,81 @@
+import { Box, Slider, styled } from '@mui/material';
+import theme from '../../theme';
+export const Container = styled(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '12px',
+});
+export const BaseSlider = styled(Slider, {
+    shouldForwardProp: (prop) => prop !== 'defaultThreshold',
+})(({ defaultThreshold, marks }) => {
+    let markIndex = 0;
+    if (Array.isArray(marks) && marks.length > 0) {
+        markIndex = marks.findIndex((mark) => mark.value === defaultThreshold);
+    }
+    const defaultThresClass = `&:nth-of-type(${markIndex + 4})`;
+    const defaultLabelClass = `&:nth-of-type(${markIndex + 5})`;
+    return {
+        '& .MuiSlider-rail': {
+            background: theme.palette.neutralGrey[75],
+            height: '8px',
+        },
+        '& .MuiSlider-track': {
+            display: 'none',
+        },
+        '& .MuiSlider-thumb': {
+            background: theme.palette.neutralGrey[0],
+            '&:hover': {
+                boxShadow: `0px 0px 0px 8px rgba(255, 0, 0, 0.2)`,
+            },
+            '&.Mui-focusVisible': {
+                boxShadow: `0px 0px 0px 8px rgba(255, 0, 0, 0.2)`,
+            },
+            '&.Mui-disabled': {
+                visibility: 'hidden',
+            },
+        },
+        '& .MuiSlider-mark': {
+            background: theme.palette.neutralGrey[40],
+            height: '6px',
+            width: '6px',
+            borderRadius: '50%',
+            [defaultThresClass]: {
+                background: theme.palette.lunitTeal[40],
+            },
+        },
+        '& .MuiSlider-markLabel': {
+            fontFamily: 'Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
+            fontSize: '8px',
+            fontStyle: 'normal',
+            fontWeight: '500',
+            lineHeight: '12px',
+            [defaultLabelClass]: {
+                color: theme.palette.lunitTeal[40],
+            },
+        },
+        '& .MuiSlider-valueLabel': {
+            fontFamily: 'Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
+            fontSize: '12px',
+            fontWeight: '700',
+            lineHeight: '16px',
+            background: 'unset',
+            padding: 0,
+            width: 32,
+            height: 32,
+            borderRadius: '50% 50% 50% 0',
+            backgroundColor: theme.palette.lunitTeal[40],
+            transformOrigin: 'bottom left',
+            transform: 'translate(50%, -100%) rotate(-45deg) scale(0)',
+            '&:before': { display: 'none' },
+            '&.MuiSlider-valueLabelOpen': {
+                transform: 'translate(50%, -100%) rotate(-45deg) scale(1)',
+            },
+            '& > *': {
+                transform: 'rotate(45deg)',
+            },
+            '&.Mui-disabled': {
+                visibility: 'visible',
+            },
+        },
+    };
+});

package/dist/presentations/Threshold/Threshold.types.d.ts

@@ -0,0 +1,31 @@
+import { SyntheticEvent } from 'react';
+import { SliderProps } from '@mui/material';
+import { SelectChangeEvent } from '@mui/material/Select';
+import { ScoreProps } from '../Score';
+import { StatisticProps } from '../Statistic';
+export interface ThresholdOption {
+    title: string;
+    category: string;
+    value: number;
+    isPreset?: boolean;
+}
+export interface ThresholdSpec {
+    componentType: 'threshold';
+    totalScore: ScoreProps;
+    totalCells: StatisticProps;
+    statisticItems: StatisticProps[];
+    title?: string;
+    description?: {
+        preset: string;
+        user: string;
+    };
+    options: ThresholdOption[];
+    controlStep?: number;
+}
+export interface ThresholdProps extends ThresholdSpec {
+    onChangeDropdown: (event: SelectChangeEvent) => void;
+    onSliderChangeCommitted: (event: Event | SyntheticEvent, value: number | number[]) => void;
+}
+export interface BaseSliderProps extends SliderProps {
+    defaultThreshold: number;
+}

package/dist/presentations/Threshold/Threshold.types.js

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

package/dist/presentations/Threshold/Threshold.utils.d.ts

@@ -0,0 +1,16 @@
+import { ThresholdOption } from './Threshold.types';
+export declare const baseSliderMarks: ({
+    value: number;
+    label: string;
+} | {
+    value: number;
+    label?: undefined;
+})[];
+export declare const getPresetValue: (options: ThresholdOption[], selectedItem: string) => number;
+export declare const getSliderMarks: (presetValue: number) => ({
+    value: number;
+    label: string;
+} | {
+    value: number;
+    label?: undefined;
+})[];

package/dist/presentations/Threshold/Threshold.utils.js

@@ -0,0 +1,34 @@
+export const baseSliderMarks = [
+    { value: 0, label: '0' },
+    { value: 10 },
+    { value: 20 },
+    { value: 30 },
+    { value: 40 },
+    { value: 50 },
+    { value: 60 },
+    { value: 70 },
+    { value: 80 },
+    { value: 90 },
+    { value: 100, label: '100' },
+];
+export const getPresetValue = (options, selectedItem) => {
+    const selectedCategory = options.find((option) => option.title === selectedItem)?.category;
+    const presetValue = options.find((option) => option.category === selectedCategory && option.isPreset)?.value;
+    return presetValue;
+};
+export const getSliderMarks = (presetValue) => {
+    const marks = baseSliderMarks.map((mark) => {
+        if (mark.value === presetValue) {
+            return {
+                ...mark,
+                label: `Preset: ${presetValue}`,
+            };
+        }
+        return mark;
+    });
+    if (!baseSliderMarks.find((mark) => mark.value === presetValue)) {
+        const index = Math.floor(presetValue / 10);
+        marks.splice(index + 1, 0, { value: presetValue, label: `Preset: ${presetValue}` });
+    }
+    return marks;
+};

package/dist/presentations/Threshold/index.d.ts

@@ -0,0 +1,4 @@
+import Threshold from './Threshold';
+import type { ThresholdProps } from './Threshold.types';
+export { Threshold };
+export type { ThresholdProps };

package/dist/presentations/Threshold/index.js

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

package/dist/presentations/ToggleControl/ToggleControl.d.ts

@@ -1,3 +1,3 @@
 import type { ToggleControlProps } from './ToggleControl.types';
-declare const ToggleControl: ({ componentType, title, size, symbol, tooltip, color, isParent, disabled, bar, checked, isDimmed, onChange, }: ToggleControlProps) => import("react/jsx-runtime").JSX.Element;
+declare const ToggleControl: ({ componentType, title, size, symbol, tooltip, content, color, isParent, disabled, bar, checked, isDimmed, onChange, }: ToggleControlProps) => import("react/jsx-runtime").JSX.Element;
 export default ToggleControl;

package/dist/presentations/ToggleControl/ToggleControl.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { v4 as uuidV4 } from 'uuid';
 import { Box } from '@mui/material';
 import { ToggleControlContainer, ToggleControlOuter } from './ToggleControl.styled';
@@ -9,14 +10,15 @@ import { FreeText } from '../FreeText';
 import { Statistic } from '../Statistic';
 import { Tooltip } from '../../components';
 import { Information } from '../../icons';
-import theme from '../../theme';
-const ToggleControl = ({ componentType = 'toggle', title, size = 'medium', symbol, tooltip = [], color, isParent = false, disabled = false, bar, checked, isDimmed = false, onChange, }) => {
+const ToggleControl = ({ componentType = 'toggle', title, size = 'medium', symbol, tooltip = [], content = [], color, isParent = false, disabled = false, bar, checked, isDimmed = false, onChange, }) => {
+    const [isChecked, setIsChecked] = useState(checked);
     const handleChange = (event) => {
+        setIsChecked(event.target.checked);
         onChange && onChange(event);
     };
     return (_jsxs(ToggleControlOuter, { "data-toggle-name": `toggle-control-${title?.replace(/\s/g, '-')}`, hasBar: !!bar, style: { marginBottom: isParent ? '4px' : '0' }, children: [_jsxs(ToggleControlContainer, { className: "toggle-inner-container", size: size, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: '6px' }, className: "toggle-label", children: [!!tooltip.length && (_jsx(Tooltip, { arrow: true, size: "large", title: _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: tooltip.map((item) => (_jsxs(Box, { children: [item.componentType === 'freeText' && (_jsx(FreeText, { componentType: item.componentType, size: item.size, content: item.content })), item.componentType === 'statistic' && (_jsx(Statistic, { componentType: item.componentType, title: item.title, size: item.size, layout: item.layout, symbol: item.symbol, color: item.color }))] }, uuidV4()))) }), children: _jsx(Box, { sx: {
                                         display: 'flex',
                                         alignItems: 'center',
-                                    }, children: _jsx(Information, {}) }) })), symbol && (_jsx(PresentationSymbolIcon, { symbol: symbol, color: color, isDimmed: isDimmed || !checked })), _jsx(PresentationTypography, { size: size, sx: { color: checked && !isDimmed ? 'inherit' : theme.palette.neutralGrey[65] }, children: title })] }), _jsx(StyledToggle, { disabled: disabled, checked: checked, onChange: handleChange })] }), bar && (_jsx(Box, { sx: { paddingRight: '16px' }, children: _jsx(AnalysisBar, { isDimmed: isDimmed || !checked, componentType: bar.componentType, expressionValue: bar.expressionValue, expressionLevels: bar.expressionLevels, caption: bar.caption, segments: bar.segments }) }))] }));
+                                    }, children: _jsx(Information, {}) }) })), symbol && (_jsx(PresentationSymbolIcon, { symbol: symbol, color: color, isDimmed: isDimmed || !checked })), _jsx(PresentationTypography, { size: size, isDimmed: isDimmed || !checked, children: title })] }), _jsx(StyledToggle, { disabled: disabled, checked: isChecked, onChange: handleChange })] }), content.length > 0 && (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: content.map((item) => (_jsx(Statistic, { ...item, isDimmed: isDimmed || !checked }))) }, uuidV4())), bar && (_jsx(Box, { sx: { padding: '0 8px', fontSize: '14px', lineHeight: '8px' }, children: _jsx(AnalysisBar, { isDimmed: isDimmed || !checked, componentType: bar.componentType, expressionValue: bar.expressionValue, expressionLevels: bar.expressionLevels, caption: bar.caption, segments: bar.segments }) }))] }));
 };
 export default ToggleControl;

package/dist/presentations/ToggleControl/ToggleControl.styled.js

@@ -1,9 +1,9 @@
 import { Box, styled } from '@mui/material';
 const getPadding = (size) => {
     if (size === 'large-bold') {
-        return '14px 16px 14px 0';
+        return '14px 0';
     }
-    return '0 16px 0 0';
+    return '2px';
 };
 export const ToggleControlOuter = styled(Box, { shouldForwardProp: (prop) => prop !== 'hasBar' })(({ hasBar }) => ({
     display: 'flex',
@@ -20,7 +20,6 @@ export const ToggleControlContainer = styled(Box, {
         width: '100%',
         display: 'flex',
         justifyContent: 'space-between',
-        gap: '34px',
         padding: getPadding(size),
         alignItems: 'center',
     };

package/dist/presentations/ToggleControl/ToggleControl.types.d.ts

@@ -9,8 +9,9 @@ export interface ToggleControlSpec {
     size?: PresentationElementSize;
     symbol?: PresentationSymbol;
     color?: string;
-    checked: boolean;
+    checked?: boolean;
     tooltip?: (StatisticProps | FreeTextProps)[];
+    content?: StatisticProps[];
     bar?: AnalysisBarProps;
 }
 export interface ToggleControlProps extends ToggleControlSpec {

package/dist/presentations/ToggleControlGroup/ToggleControlGroup.js

@@ -1,14 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { v4 as uuidV4 } from 'uuid';
 import { filter as _filter } from 'lodash';
 import { ToggleControlGroupContainer } from './ToggleControlGroup.styled';
 import ToggleControl from '../ToggleControl/ToggleControl';
-const ToggleControlGroup = ({ componentType = 'toggleGroup', size = 'medium', title, tooltip = [], bar, childToggles, disabled, checked, behavior = 'multi', onChange, }) => {
+const ToggleControlGroup = ({ componentType = 'toggleGroup', size = 'medium', title, tooltip = [], bar, childToggles, disabled, checked = true, behavior = 'multi', onChange, }) => {
     const [toggleChecked, setToggleChecked] = useState(checked || _filter(childToggles, (child) => child.checked).length > 0);
     const [childrenChecked, setChildrenChecked] = useState(childToggles?.map((child) => child.checked) || []);
     const handleToggleChange = (event) => {
         setToggleChecked(!toggleChecked);
+        if (!_filter(childrenChecked, (child) => child).length) {
+            if (behavior === 'multi' && event.target.checked) {
+                setChildrenChecked(Array(childToggles.length).fill(true));
+            }
+            else if (behavior === 'exclusive' && event.target.checked) {
+                const newState = Array(childrenChecked.length).fill(false);
+                newState[0] = true;
+                setChildrenChecked(newState);
+            }
+        }
         onChange(event);
     };
     const handleMultiChange = (index) => {
@@ -22,6 +32,22 @@ const ToggleControlGroup = ({ componentType = 'toggleGroup', size = 'medium', ti
         newState[index] = event.target.checked;
         setChildrenChecked(newState);
     };
+    useEffect(() => {
+        if (behavior === 'exclusive') {
+            const newState = Array(childrenChecked.length).fill(false);
+            newState[0] = true;
+            setChildrenChecked(newState);
+        }
+        else {
+            const childChecked = Array(childToggles.length).fill(true);
+            childToggles.forEach((child, index) => {
+                if (child.checked === false) {
+                    childChecked[index] = false;
+                }
+            });
+            setChildrenChecked(childChecked);
+        }
+    }, [behavior, childToggles, childrenChecked.length]);
     return (_jsxs(ToggleControlGroupContainer, { children: [_jsx(ToggleControl, { isParent: true, componentType: "toggle", bar: bar, disabled: disabled, size: size, title: title, tooltip: tooltip, checked: toggleChecked, onChange: handleToggleChange }), childToggles?.map((child, index) => {
                 return (_jsx(ToggleControl, { componentType: "toggle", title: child.title, size: size, tooltip: child.tooltip, symbol: child.symbol, color: child.color, isDimmed: !toggleChecked, checked: childrenChecked[index], disabled: !toggleChecked, onChange: (event) => {
                         behavior === 'multi' ? handleMultiChange(index) : handleExclusiveChange(index, event);

package/dist/presentations/ToggleControlGroup/ToggleControlGroup.types.d.ts

@@ -12,7 +12,7 @@ export interface ToggleGroupControlSpec {
     size?: PresentationElementSize;
     tooltip?: (StatisticProps | FreeTextProps)[];
     bar?: AnalysisBarProps;
-    checked: boolean;
+    checked?: boolean;
     childToggles: ToggleControlProps[];
 }
 export interface ToggleControlGroupProps extends ToggleGroupControlSpec {

package/dist/presentations/ToggleControlGroup/index.d.ts

@@ -1,2 +1,4 @@
 import ToggleControlGroup from './ToggleControlGroup';
+import type { ToggleControlGroupProps } from './ToggleControlGroup.types';
 export { ToggleControlGroup };
+export type { ToggleControlGroupProps };

package/dist/presentations/index.d.ts

@@ -3,7 +3,9 @@ export * from './AnalysisBar';
 export * from './FreeText';
 export * from './Histogram';
 export * from './HorizonDivider';
+export * from './Preview';
 export * from './Score';
 export * from './Statistic';
+export * from './Threshold';
 export * from './ToggleControl';
 export * from './ToggleControlGroup';

package/dist/presentations/index.js

@@ -3,7 +3,9 @@ export * from './AnalysisBar';
 export * from './FreeText';
 export * from './Histogram';
 export * from './HorizonDivider';
+export * from './Preview';
 export * from './Score';
 export * from './Statistic';
+export * from './Threshold';
 export * from './ToggleControl';
 export * from './ToggleControlGroup';

package/dist/presentations/presentations.styled.js

@@ -2,24 +2,24 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
 import theme from '../theme';
 export const PresentationTypography = (props) => {
-    const { size, ...rest } = props;
+    const { size, isDimmed, ...rest } = props;
     if (size === 'small-dimmed') {
-        return (_jsx(Typography, { variant: "body_m2", sx: { color: theme.palette.neutralGrey[40] }, ...rest }));
+        return (_jsx(Typography, { variant: "body_m2", ...rest, sx: { color: theme.palette.neutralGrey[40] } }));
     }
     if (size === 'small') {
-        return (_jsx(Typography, { variant: "body8", ...rest }));
+        return (_jsx(Typography, { variant: "body8", ...rest, sx: { color: isDimmed ? theme.palette.neutralGrey[40] : 'inherit' } }));
     }
     if (size === 'small-bold') {
-        return (_jsx(Typography, { variant: "body8", sx: { fontWeight: 'bold' }, ...rest }));
+        return (_jsx(Typography, { variant: "body8", ...rest, sx: { fontWeight: 'bold', color: isDimmed ? theme.palette.neutralGrey[40] : 'inherit' } }));
     }
     if (size === 'medium') {
-        return (_jsx(Typography, { variant: "body5", ...rest }));
+        return (_jsx(Typography, { variant: "body5", ...rest, sx: { color: isDimmed ? theme.palette.neutralGrey[40] : 'inherit' } }));
     }
     if (size === 'medium-bold') {
-        return (_jsx(Typography, { variant: "body_b1", ...rest }));
+        return (_jsx(Typography, { variant: "body_b1", ...rest, sx: { color: isDimmed ? theme.palette.neutralGrey[40] : 'inherit' } }));
     }
     if (size === 'large-bold') {
-        return (_jsx(Typography, { variant: "h9", ...rest }));
+        return (_jsx(Typography, { variant: "h9", ...rest, sx: { color: isDimmed ? theme.palette.neutralGrey[40] : 'inherit' } }));
     }
     return _jsx(Typography, { ...rest });
 };

package/dist/presentations/presentations.types.d.ts

@@ -8,5 +8,7 @@ interface PresentationSymbolProps {
 }
 interface PresentationTypographyProps extends TypographyProps {
     size?: PresentationElementSize;
+    isDimmed?: boolean;
+    display?: 'block' | 'inline-block' | 'flex' | 'inherit';
 }
 export type { PresentationSymbolProps, PresentationTypographyProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/oui",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "validate-branch-name": {
     "pattern": "^(main|develop)|(feature|fix|release|hotfix|qe)/.+$",
     "errorMsg": "The branch name is not correct. Please check the pattern. (ex. feature/add-something)"