@lunit/oui 1.2.0 → 2.0.0

package/dist/presentations/Histogram/Histogram.types.js

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

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

@@ -0,0 +1,23 @@
+import type { VictoryStructuredData } from './Histogram.types';
+/**
+ * Creates an array of data points for the histogram chart.
+ *
+ * @param sourceData - The source data array.
+ * @returns An array of data points for the histogram chart.
+ */
+export declare function makeHistoDataArray(sourceData: number[]): VictoryStructuredData;
+/**
+ * Returns the border radius for a tab button based on its index and the total number of tabs.
+ *
+ * @param idx - The index of the tab button.
+ * @param max - The total number of tab buttons.
+ * @returns The border radius for the tab button.
+ */
+export declare function doBorderRadius(idx: number, max: number): string;
+/**
+ * Calculates the font size for a tab button based on its label.
+ *
+ * @param text - The label of the tab button.
+ * @returns The font size for the tab button.
+ */
+export declare const calculateFontSize: (text: string) => number;

package/dist/presentations/Histogram/Histogram.utils.js

@@ -0,0 +1,45 @@
+/**
+ * Creates an array of data points for the histogram chart.
+ *
+ * @param sourceData - The source data array.
+ * @returns An array of data points for the histogram chart.
+ */
+export function makeHistoDataArray(sourceData) {
+    const cappedData = sourceData.slice(0, 10);
+    return cappedData.map((d, i) => ({
+        x: i * 10,
+        y: d,
+    }));
+}
+/**
+ * Returns the border radius for a tab button based on its index and the total number of tabs.
+ *
+ * @param idx - The index of the tab button.
+ * @param max - The total number of tab buttons.
+ * @returns The border radius for the tab button.
+ */
+export function doBorderRadius(idx, max) {
+    const BORDER_RADIUS = '6px';
+    const borderRadiusMap = {
+        0: `${BORDER_RADIUS} 0 0 0`,
+        1: `0 ${BORDER_RADIUS} 0 0`,
+        [max - 2]: `0 0 0 ${BORDER_RADIUS}`,
+        [max - 1]: `0 0 ${BORDER_RADIUS} 0`,
+    };
+    return borderRadiusMap[idx] || '0';
+}
+/**
+ * Calculates the font size for a tab button based on its label.
+ *
+ * @param text - The label of the tab button.
+ * @returns The font size for the tab button.
+ */
+export const calculateFontSize = (text) => {
+    if (text.length <= 9)
+        return 14;
+    if (text.length <= 12)
+        return 12;
+    if (text.length <= 15)
+        return 11;
+    return 9;
+};

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

@@ -0,0 +1,3 @@
+import type { HistogramChartProps } from './Histogram.types';
+declare const HistogramChart: ({ dataset, xAxisLabels, yAxisLabels }: HistogramChartProps) => import("react/jsx-runtime").JSX.Element;
+export default HistogramChart;

package/dist/presentations/Histogram/HistogramCharts.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { VictoryAxis, VictoryBar, VictoryChart, VictoryLabel } from 'victory';
+import theme from '../../theme';
+import { makeHistoDataArray } from './Histogram.utils';
+const HistogramChart = ({ dataset, xAxisLabels, yAxisLabels }) => {
+    const dataArray = dataset.data;
+    return (_jsxs(VictoryChart, { height: 400, width: 470, domain: { x: [0, 100], y: [0, 100] }, children: [_jsx(VictoryAxis, { crossAxis: true, tickValues: xAxisLabels, style: {
+                    tickLabels: { fill: theme.palette.neutralGrey[0], fontSize: '20px' },
+                    ticks: { stroke: theme.palette.neutralGrey[50], opacity: 0.5 },
+                } }), _jsx(VictoryAxis, { orientation: "right", dependentAxis: true, tickFormat: (t) => (t === 0 ? '   (%)' : `${t}`), tickValues: yAxisLabels, style: {
+                    tickLabels: {
+                        fill: theme.palette.neutralGrey[0],
+                        fontSize: '20px',
+                    },
+                    grid: { stroke: theme.palette.neutralGrey[50], strokeDasharray: '10, 5', opacity: 0.5 },
+                }, tickLabelComponent: _jsx(VictoryLabel, { dx: 10 }) }), _jsx(VictoryBar, { data: makeHistoDataArray(dataArray), style: {
+                    data: { fill: theme.palette.lunitTeal[40], width: 34 },
+                }, alignment: "start", cornerRadius: { topLeft: 6, topRight: 6 } })] }));
+};
+export default HistogramChart;

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

@@ -0,0 +1,3 @@
+import type { HistogramTabsProps } from './Histogram.types';
+declare const HistogramTabs: ({ options, active, onChange }: HistogramTabsProps) => import("react/jsx-runtime").JSX.Element;
+export default HistogramTabs;

package/dist/presentations/Histogram/HistogramTabs.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+import { calculateFontSize, doBorderRadius } from './Histogram.utils';
+import { HistogramTabsContainer, TabButton } from './Histogram.styled';
+const HistogramTabs = ({ options, active, onChange }) => {
+    return (_jsx(HistogramTabsContainer, { children: options.map((tabLabel, idx) => {
+            const fontSize = calculateFontSize(tabLabel);
+            const commonButtonProps = {
+                key: tabLabel,
+                disableRipple: true,
+                active: idx === active,
+                onClick: () => onChange(idx),
+                sx: {
+                    padding: '4px 6px',
+                    borderRadius: doBorderRadius(idx, options.length),
+                },
+            };
+            return (_jsx(TabButton, { ...commonButtonProps, children: _jsx(Typography, { variant: "body_sb1", sx: {
+                        fontSize: `${fontSize}px`,
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        width: '100%',
+                    }, children: tabLabel }) }));
+        }) }));
+};
+export default HistogramTabs;

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

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

package/dist/presentations/Histogram/index.js

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

package/dist/presentations/HorizonDivider/HorizonDivider.d.ts

@@ -0,0 +1,3 @@
+import type { HorizonDividerProps } from './HorizonDivider.types';
+declare const HorizonDivider: ({ componentType }: HorizonDividerProps) => import("react/jsx-runtime").JSX.Element;
+export default HorizonDivider;

package/dist/presentations/HorizonDivider/HorizonDivider.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Divider } from '../../components';
+const HorizonDivider = ({ componentType = 'divider' }) => {
+    return _jsx(Divider, { orientation: "horizontal" });
+};
+export default HorizonDivider;

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

@@ -0,0 +1,4 @@
+interface HorizonDividerProps {
+    componentType: 'divider';
+}
+export type { HorizonDividerProps };

package/dist/presentations/HorizonDivider/HorizonDivider.types.js

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

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

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

package/dist/presentations/HorizonDivider/index.js

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

package/dist/presentations/Score/Score.d.ts

@@ -0,0 +1,3 @@
+import { ScoreProps } from './Score.types';
+declare const Score: ({ componentType, title, size, metrics }: ScoreProps) => import("react/jsx-runtime").JSX.Element;
+export default Score;

package/dist/presentations/Score/Score.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PresentationTypography } from '../presentations.styled';
+const capitalize = (str) => {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+};
+const Score = ({ componentType = 'score', title, size = 'medium', metrics }) => {
+    return (_jsxs(PresentationTypography, { size: size, style: { color: metrics.isFullColored ? metrics.color : 'inherit' }, children: [title, ": ", metrics.value, metrics.scoreType && (_jsx("span", { style: { color: metrics.color, marginLeft: 4 }, children: capitalize(metrics.scoreType) }))] }));
+};
+export default Score;

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

@@ -0,0 +1,13 @@
+import { PresentationElementSize } from '../presentations.types';
+interface ScoreProps {
+    componentType: 'score';
+    title: string;
+    size?: PresentationElementSize;
+    metrics: {
+        value: string;
+        scoreType?: 'positive' | 'negative';
+        color?: string;
+        isFullColored?: boolean;
+    };
+}
+export type { ScoreProps };

package/dist/presentations/Score/Score.types.js

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

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

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

package/dist/presentations/Score/index.js

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

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

@@ -0,0 +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;
+export default Statistic;

package/dist/presentations/Statistic/Statistic.js

@@ -0,0 +1,12 @@
+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 }) => {
+    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 })) }));
+};
+export default Statistic;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare const Container: 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 HorizontalStatisticContainer: 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 VerticalStatisticContainer: ({ title, metrics, }: {
+    title: string;
+    metrics: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/presentations/Statistic/Statistic.styled.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, styled, Typography } from '@mui/material';
+import theme from '../../theme';
+export const Container = styled(Box)(({ theme }) => ({
+    display: 'flex',
+}));
+export const HorizontalStatisticContainer = styled(Box)({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: '6px',
+    width: '100%',
+});
+export const VerticalStatisticContainer = ({ title, metrics, }) => {
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '6px' }, children: [_jsx(Typography, { variant: "body8", color: theme.palette.neutralGrey[40], children: title }), _jsx(Typography, { variant: "body5", color: theme.palette.neutralGrey[0], children: metrics })] }));
+};

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

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

package/dist/presentations/Statistic/Statistic.types.js

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

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

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

package/dist/presentations/Statistic/index.js

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

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

@@ -0,0 +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;
+export default ToggleControl;

package/dist/presentations/ToggleControl/ToggleControl.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { v4 as uuidV4 } from 'uuid';
+import { Box } from '@mui/material';
+import { ToggleControlContainer, ToggleControlOuter } from './ToggleControl.styled';
+import { AnalysisBar } from '../AnalysisBar';
+import { StyledToggle } from '../../components/Toggle/Toggle.styled';
+import { PresentationSymbolIcon, PresentationTypography } from '../presentations.styled';
+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 handleChange = (event) => {
+        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 }) }))] }));
+};
+export default ToggleControl;

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { PresentationElementSize } from '../presentations.types';
+interface ToggleControlContainerProps {
+    size?: PresentationElementSize;
+    isGrouped?: boolean;
+}
+export declare const ToggleControlOuter: 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> & {
+    hasBar: boolean;
+}, {}, {}>;
+export declare const ToggleControlContainer: 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> & ToggleControlContainerProps, {}, {}>;
+export {};

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

@@ -0,0 +1,27 @@
+import { Box, styled } from '@mui/material';
+const getPadding = (size) => {
+    if (size === 'large-bold') {
+        return '14px 16px 14px 0';
+    }
+    return '0 16px 0 0';
+};
+export const ToggleControlOuter = styled(Box, { shouldForwardProp: (prop) => prop !== 'hasBar' })(({ hasBar }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: hasBar ? '10px' : '8px',
+    width: '100%',
+    height: hasBar ? 'auto' : '20px',
+}));
+export const ToggleControlContainer = styled(Box, {
+    shouldForwardProp: (prop) => !['size'].includes(prop.toString()),
+})(({ size }) => {
+    return {
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'space-between',
+        gap: '34px',
+        padding: getPadding(size),
+        alignItems: 'center',
+    };
+});

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { FreeTextProps } from '../FreeText';
+import type { AnalysisBarProps } from '../AnalysisBar';
+import type { PresentationElementSize, PresentationSymbol } from '../presentations.types';
+import { StatisticProps } from '../Statistic';
+export interface ToggleControlSpec {
+    componentType: 'toggle';
+    title: string;
+    size?: PresentationElementSize;
+    symbol?: PresentationSymbol;
+    color?: string;
+    checked: boolean;
+    tooltip?: (StatisticProps | FreeTextProps)[];
+    bar?: AnalysisBarProps;
+}
+export interface ToggleControlProps extends ToggleControlSpec {
+    isParent?: boolean;
+    isDimmed?: boolean;
+    disabled?: boolean;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}

package/dist/presentations/ToggleControl/ToggleControl.types.js

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

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

@@ -0,0 +1,4 @@
+import ToggleControl from './ToggleControl';
+import type { ToggleControlProps, ToggleControlSpec } from './ToggleControl.types';
+export { ToggleControl };
+export type { ToggleControlProps, ToggleControlSpec };

package/dist/presentations/ToggleControl/index.js

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

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

@@ -0,0 +1,3 @@
+import type { ToggleControlGroupProps } from './ToggleControlGroup.types';
+declare const ToggleControlGroup: ({ componentType, size, title, tooltip, bar, childToggles, disabled, checked, behavior, onChange, }: ToggleControlGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default ToggleControlGroup;

package/dist/presentations/ToggleControlGroup/ToggleControlGroup.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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 [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);
+        onChange(event);
+    };
+    const handleMultiChange = (index) => {
+        const newState = [...childrenChecked];
+        newState[index] = !newState[index];
+        setChildrenChecked(newState);
+    };
+    const handleExclusiveChange = (index, event) => {
+        const newState = Array(childrenChecked.length).fill(false);
+        setChildrenChecked(newState);
+        newState[index] = event.target.checked;
+        setChildrenChecked(newState);
+    };
+    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);
+                        child.onChange(event);
+                    } }, uuidV4()));
+            })] }));
+};
+export default ToggleControlGroup;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ToggleControlGroupContainer: 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/ToggleControlGroup/ToggleControlGroup.styled.js

@@ -0,0 +1,9 @@
+import { Box, styled } from '@mui/material';
+export const ToggleControlGroupContainer = styled(Box)(() => {
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: '8px',
+    };
+});

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { AnalysisBarProps } from '../AnalysisBar';
+import { FreeTextProps } from '../FreeText';
+import type { PresentationElementSize } from '../presentations.types';
+import { StatisticProps } from '../Statistic';
+import type { ToggleControlProps } from '../ToggleControl';
+export type ToggleControlGroupBehavior = 'exclusive' | 'multi';
+export interface ToggleGroupControlSpec {
+    componentType: 'toggleGroup';
+    title: string;
+    behavior?: ToggleControlGroupBehavior;
+    size?: PresentationElementSize;
+    tooltip?: (StatisticProps | FreeTextProps)[];
+    bar?: AnalysisBarProps;
+    checked: boolean;
+    childToggles: ToggleControlProps[];
+}
+export interface ToggleControlGroupProps extends ToggleGroupControlSpec {
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+}

package/dist/presentations/ToggleControlGroup/ToggleControlGroup.types.js

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

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

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

package/dist/presentations/ToggleControlGroup/index.js

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

package/dist/presentations/index.d.ts

@@ -0,0 +1,9 @@
+export * from './Accordion';
+export * from './AnalysisBar';
+export * from './FreeText';
+export * from './Histogram';
+export * from './HorizonDivider';
+export * from './Score';
+export * from './Statistic';
+export * from './ToggleControl';
+export * from './ToggleControlGroup';

package/dist/presentations/index.js

@@ -0,0 +1,9 @@
+export * from './Accordion';
+export * from './AnalysisBar';
+export * from './FreeText';
+export * from './Histogram';
+export * from './HorizonDivider';
+export * from './Score';
+export * from './Statistic';
+export * from './ToggleControl';
+export * from './ToggleControlGroup';

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

@@ -0,0 +1,3 @@
+import type { PresentationSymbolProps, PresentationTypographyProps } from './presentations.types';
+export declare const PresentationTypography: (props: PresentationTypographyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PresentationSymbolIcon: ({ symbol, color, isDimmed, }: PresentationSymbolProps) => import("react/jsx-runtime").JSX.Element;

package/dist/presentations/presentations.styled.js

@@ -0,0 +1,91 @@
+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;
+    if (size === 'small-dimmed') {
+        return (_jsx(Typography, { variant: "body_m2", sx: { color: theme.palette.neutralGrey[40] }, ...rest }));
+    }
+    if (size === 'small') {
+        return (_jsx(Typography, { variant: "body8", ...rest }));
+    }
+    if (size === 'small-bold') {
+        return (_jsx(Typography, { variant: "body8", sx: { fontWeight: 'bold' }, ...rest }));
+    }
+    if (size === 'medium') {
+        return (_jsx(Typography, { variant: "body5", ...rest }));
+    }
+    if (size === 'medium-bold') {
+        return (_jsx(Typography, { variant: "body_b1", ...rest }));
+    }
+    if (size === 'large-bold') {
+        return (_jsx(Typography, { variant: "h9", ...rest }));
+    }
+    return _jsx(Typography, { ...rest });
+};
+export const PresentationSymbolIcon = ({ symbol, color = 'black', isDimmed = false, }) => {
+    if (symbol === 'circle') {
+        return (_jsx("div", { style: {
+                height: '100%',
+                width: '10px',
+                display: 'flex',
+                opacity: isDimmed ? 0.5 : 1,
+            }, children: _jsx("span", { style: {
+                    height: '6px',
+                    width: '6px',
+                    backgroundColor: color,
+                    borderRadius: '50%',
+                    border: '1px solid black',
+                } }) }));
+    }
+    if (symbol === 'rectangle') {
+        return (_jsx("div", { style: {
+                height: '100%',
+                width: '10px',
+                display: 'flex',
+                opacity: isDimmed ? 0.5 : 1,
+            }, children: _jsx("span", { style: {
+                    height: '10px',
+                    width: '10px',
+                    backgroundColor: color,
+                } }) }));
+    }
+    if (symbol === 'border-circle') {
+        return (_jsx("div", { style: {
+                height: '100%',
+                width: '10px',
+                display: 'flex',
+                opacity: isDimmed ? 0.5 : 1,
+            }, children: _jsx("span", { style: {
+                    height: '10px',
+                    width: '10px',
+                    backgroundColor: color,
+                    borderRadius: '50%',
+                    border: '1px solid black',
+                } }) }));
+    }
+    if (symbol === 'border-rectangle') {
+        return (_jsx("div", { style: {
+                height: '100%',
+                width: '10px',
+                display: 'flex',
+                opacity: isDimmed ? 0.5 : 1,
+            }, children: _jsx("span", { style: {
+                    height: '10px',
+                    width: '10px',
+                    backgroundColor: color,
+                    border: '1px solid black',
+                } }) }));
+    }
+    // Fallback
+    return (_jsx("div", { style: {
+            height: '100%',
+            width: '10px',
+            display: 'flex',
+            opacity: isDimmed ? 0.5 : 1,
+        }, children: _jsx("span", { style: {
+                height: '10px',
+                width: '10px',
+                backgroundColor: 'black',
+            } }) }));
+};