@lunit/oui 1.2.0 → 2.0.0

package/dist/icons/index.js

@@ -14,6 +14,7 @@ export { default as RefreshLeft } from './RefreshLeft';
 export { default as RefreshRight } from './RefreshRight';
 export { default as ShowLarge } from './ShowLarge';
 export { default as ShowSmall } from './ShowSmall';
+export { default as CopyCoordinates } from './CopyCoordinates';
 export { Analyze } from '@lunit/design-system-icons';
 export { Annotation } from '@lunit/design-system-icons';
 export { Apps } from '@lunit/design-system-icons';
@@ -159,7 +160,7 @@ export { TagT1 } from '@lunit/design-system-icons';
 export { TagT2 } from '@lunit/design-system-icons';
 export { TagT3 } from '@lunit/design-system-icons';
 export { Text } from '@lunit/design-system-icons';
-export { Toggle } from '@lunit/design-system-icons';
+export { Toggle as ToggleIcon } from '@lunit/design-system-icons';
 export { Undo } from '@lunit/design-system-icons';
 export { Unlock } from '@lunit/design-system-icons';
 export { UploadFolder } from '@lunit/design-system-icons';
@@ -177,3 +178,4 @@ export { Warning16 } from '@lunit/design-system-icons';
 export { Warning } from '@lunit/design-system-icons';
 export { ZoomIn } from '@lunit/design-system-icons';
 export { ZoomOut } from '@lunit/design-system-icons';
+export { MonitoringSystem } from '@lunit/design-system-icons';

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import theme from './theme';
 export { theme };
 export * from './components';
+export * from './presentations';
 export * from './icons';

package/dist/index.js

@@ -1,4 +1,5 @@
 import theme from './theme';
 export { theme };
 export * from './components';
+export * from './presentations';
 export * from './icons';

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

@@ -0,0 +1,3 @@
+import { AccordionProps } from './Accordion.types';
+declare const Accordion: ({ componentType, MuiAccordionProps, AccordionDetailsProps, AccordionSummaryProps, size, tooltip, title, items, metrics, isOpen, onChange, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export default Accordion;

package/dist/presentations/Accordion/Accordion.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { v4 as uuidV4 } from 'uuid';
+import { Box } from '@mui/material';
+import theme from '../../theme';
+import { ArrowDown, Information } from '../../icons';
+import { Tooltip } from '../../components';
+import { BaseAccordion, BaseAccordionDetails, BaseAccordionSummary } from './Accordion.styled';
+import { PresentationTypography } from '../presentations.styled';
+import { FreeText } from '../FreeText';
+import { Statistic } from '../Statistic';
+import { Score } from '../Score';
+const Accordion = ({ componentType = 'accordion', MuiAccordionProps, AccordionDetailsProps, AccordionSummaryProps, size = 'medium', tooltip = [], title, items, metrics, isOpen, onChange, }) => {
+    return (_jsxs(BaseAccordion, { ...MuiAccordionProps, expanded: isOpen, onChange: onChange, sx: { alignItems: 'center' }, children: [_jsxs(BaseAccordionSummary, { expandIcon: _jsx(ArrowDown, { sx: { fill: theme.palette.neutralGrey[40] } }), ...AccordionSummaryProps, 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: {
+                                marginRight: size.includes('small') ? '4px' : '6px',
+                                display: 'flex',
+                                alignItems: 'center',
+                            }, children: _jsx(Information, {}) }) })), _jsx(PresentationTypography, { size: size, children: title }), metrics && (_jsx(PresentationTypography, { size: size, children: _jsxs(Box, { sx: { marginLeft: '4px' }, children: [": ", metrics] }) }))] }), _jsx(BaseAccordionDetails, { ...AccordionDetailsProps, sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: items.map((item) => {
+                    return (_jsxs(_Fragment, { children: [item.componentType === 'statistic' && _jsx(Statistic, { ...item }), item.componentType === 'freeText' && _jsx(FreeText, { ...item }), item.componentType === 'score' && _jsx(Score, { ...item })] }));
+                }) })] }));
+};
+export default Accordion;

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+declare const BaseAccordion: import("@emotion/styled").StyledComponent<{
+    children: NonNullable<import("react").ReactNode>;
+    classes?: Partial<import("@mui/material").AccordionClasses> | undefined;
+    defaultExpanded?: boolean | undefined;
+    disabled?: boolean | undefined;
+    disableGutters?: boolean | undefined;
+    expanded?: boolean | undefined;
+    onChange?: ((event: import("react").SyntheticEvent<Element, Event>, expanded: boolean) => void) | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    TransitionComponent?: import("react").JSXElementConstructor<import("@mui/material/transitions").TransitionProps & {
+        children?: import("react").ReactElement<any, any> | undefined;
+    }> | undefined;
+    TransitionProps?: import("@mui/material/transitions").TransitionProps | undefined;
+} & Omit<import("@mui/material").PaperOwnProps, "classes" | "onChange"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "disabled" | "expanded" | "square" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "onChange" | "elevation" | "TransitionComponent" | "disableGutters" | "defaultExpanded" | "TransitionProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+declare const BaseAccordionSummary: import("@emotion/styled").StyledComponent<import("@mui/material").AccordionSummaryOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "disabled" | "style" | "classes" | "className" | "children" | "sx" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "expandIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+declare const BaseAccordionDetails: import("@emotion/styled").StyledComponent<import("@mui/material").AccordionDetailsProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export { BaseAccordion, BaseAccordionDetails, BaseAccordionSummary };

package/dist/presentations/Accordion/Accordion.styled.js

@@ -0,0 +1,39 @@
+import { Accordion, AccordionDetails, AccordionSummary, styled } from '@mui/material';
+const baseAccordionStyle = {
+    background: 'transparent',
+    padding: '0',
+    border: 'none',
+    boxShadow: 'none',
+    minHeight: '36px',
+    '&::before': {
+        display: 'none', // This removes an extra divider line
+    },
+    '&.Mui-expanded': {
+        margin: 0,
+        minHeight: 'initial',
+    },
+};
+const baseAccordionSummaryStyle = {
+    height: '36px',
+};
+const baseAccordionDetailStyle = {
+    paddingTop: '8px',
+};
+const BaseAccordion = styled(Accordion)(() => {
+    return {
+        ...baseAccordionStyle,
+    };
+});
+const BaseAccordionSummary = styled(AccordionSummary)(() => {
+    return {
+        ...baseAccordionStyle,
+        ...baseAccordionSummaryStyle,
+    };
+});
+const BaseAccordionDetails = styled(AccordionDetails)(() => {
+    return {
+        ...baseAccordionStyle,
+        ...baseAccordionDetailStyle,
+    };
+});
+export { BaseAccordion, BaseAccordionDetails, BaseAccordionSummary };

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import type { AccordionDetailsProps, AccordionSummaryProps, AccordionProps as MuiAccordionProps } from '@mui/material';
+import { PresentationElementSize } from '../presentations.types';
+import { FreeTextProps } from '../FreeText';
+import { StatisticProps } from '../Statistic';
+import { ScoreProps } from '../Score';
+export interface AccordionSpec {
+    componentType: 'accordion';
+    title: string;
+    size?: PresentationElementSize;
+    items: (StatisticProps | FreeTextProps | ScoreProps)[];
+    isOpen?: boolean;
+    tooltip?: (StatisticProps | FreeTextProps)[];
+    metrics?: string;
+}
+interface AccordionProps extends AccordionSpec {
+    MuiAccordionProps?: MuiAccordionProps;
+    AccordionSummaryProps?: AccordionSummaryProps;
+    AccordionDetailsProps?: AccordionDetailsProps;
+    onChange?: (event: React.SyntheticEvent, expanded: boolean) => void;
+}
+export type { AccordionProps };

package/dist/presentations/Accordion/Accordion.types.js

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

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

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

package/dist/presentations/Accordion/index.js

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

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

@@ -0,0 +1,3 @@
+import type { AnalysisBarProps } from './AnalysisBar.types';
+declare const AnalysisBar: ({ componentType, expressionValue, caption, expressionLevels, segments, isDimmed, }: AnalysisBarProps) => import("react/jsx-runtime").JSX.Element;
+export default AnalysisBar;

package/dist/presentations/AnalysisBar/AnalysisBar.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { AnalysisBarSegmentContainer, AnalysisBarOuter, AxisLabels, GraphAxisLabel, GraphScoreIndicator, GraphSegment, } from './AnalysisBar.styled';
+import { adjustBarSegmentWidth, parseStringValToNumber } from './AnalysisBar.utils';
+import HeatmapGraphSVG from './HeatmapGraphIcon/HeatmapGraphSVG';
+const Segments = ({ segments, adjustForOnePercent }) => {
+    if (!segments) {
+        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(_Fragment, { children: segments?.map((segment, i) => {
+            if (segment.color === 'jet') {
+                return (_jsx(HeatmapGraphSVG, { width: `${segment.width}%`, height: 'auto' }));
+            }
+            return (_jsx(GraphSegment, { color: segment.color, width: adjustForOnePercent ? adjustBarSegmentWidth(segment.width) : segment.width }, i));
+        }) }));
+};
+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 (_jsx(GraphAxisLabel, { label: val, adjustForOnePercent: hasAdjustedOnePercentSegment, leftPos: parseStringValToNumber(val) }, i));
+                    }), caption && (_jsx(GraphAxisLabel, { label: caption, adjustForOnePercent: hasAdjustedOnePercentSegment, leftPos: 50 }))] })] }));
+};
+export default AnalysisBar;

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

@@ -0,0 +1,31 @@
+import React, { type PropsWithChildren } from 'react';
+export declare const AnalysisBarOuter: 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> & {
+    isDimmed: boolean;
+}, {}, {}>;
+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, }: {
+    value: string;
+    adjustForOnePercent: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const GraphAxisLabel: ({ label, leftPos, adjustForOnePercent, }: {
+    label: string;
+    leftPos: number;
+    adjustForOnePercent: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const AxisLabels: ({ children }: {
+    percent?: boolean;
+} & PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const AnalysisBarCaption: ({ label }: {
+    label: string;
+}) => import("react/jsx-runtime").JSX.Element;
+interface GraphSegmentProps {
+    color: string | undefined;
+    width: number;
+    square?: boolean;
+}
+export declare const GraphSegment: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & GraphSegmentProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export {};

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

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, styled, Typography } from '@mui/material';
+import { adjustBarLabelPosition, clampBarLabelPosition, parseStringValToNumber, } from './AnalysisBar.utils';
+export const AnalysisBarOuter = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'isDimmed',
+})(({ isDimmed }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: '100%',
+    gap: '4px',
+    opacity: isDimmed ? 0.4 : 1,
+}));
+export const AnalysisBarSegmentContainer = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    position: 'relative',
+    width: '100%',
+}));
+const GraphScoreIndicatorContainer = styled('span')(() => {
+    return {
+        width: '20px',
+        position: 'absolute',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        top: '-20px',
+        zIndex: 999,
+    };
+});
+const GraphScoreIndicatorPip = styled('span')(() => {
+    return {
+        height: '8px !important',
+        width: '8px !important',
+        borderRadius: '50%',
+        border: '3px solid black',
+        background: 'white',
+        boxSizing: 'content-box',
+    };
+});
+export const GraphScoreIndicator = ({ value, adjustForOnePercent, }) => {
+    let leftPos = parseStringValToNumber(value);
+    if (adjustForOnePercent) {
+        leftPos = adjustBarLabelPosition(leftPos);
+    }
+    return (_jsxs(GraphScoreIndicatorContainer, { className: "analysis-bar-score-indicator", sx: {
+            left: `${leftPos}%`,
+            transform: 'translateX(-50%)',
+        }, children: [_jsx(Typography, { variant: "small_body_sb1", sx: { textAlign: 'center' }, children: value }), _jsx(GraphScoreIndicatorPip, {})] }));
+};
+const GraphAxisLabelContainer = styled('span')(() => {
+    return {
+        position: 'absolute',
+        width: 'auto',
+        height: '10px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+    };
+});
+export const GraphAxisLabel = ({ label, leftPos, adjustForOnePercent, }) => {
+    const getLeft = (value, adjustForOnePercent) => {
+        if (adjustForOnePercent) {
+            return `${adjustBarLabelPosition(value)}%`;
+        }
+        return `${clampBarLabelPosition(value)}%`;
+    };
+    return (_jsx(GraphAxisLabelContainer, { sx: {
+            left: getLeft(leftPos, adjustForOnePercent),
+            transform: 'translateX(-50%)',
+        }, className: "analysis-bar-axis-label", children: _jsx(Typography, { variant: "small_body_m5", sx: { textAlign: 'center' }, children: label }) }));
+};
+export const AxisLabels = ({ children }) => {
+    return (_jsx(Box, { sx: {
+            position: 'relative',
+            display: 'flex',
+            justifyContent: 'space-between',
+            width: '100%',
+            height: '10px',
+        }, className: "analysis-bar-axis-label-box", children: children }));
+};
+export const AnalysisBarCaption = ({ label }) => {
+    return (_jsx(GraphAxisLabelContainer, { sx: {
+            left: '50%',
+            transform: 'translateX(-50%)',
+            width: 'auto',
+        }, className: "analysis-bar-caption", children: _jsx(Typography, { variant: "small_body_m5", sx: { textAlign: 'center' }, children: label }) }));
+};
+const segmentStyle = (color, width, square) => {
+    return {
+        backgroundColor: color,
+        width: `${width}%`,
+        height: '8px',
+        borderRadius: square ? '0px' : '12px',
+    };
+};
+export const GraphSegment = styled('span', {
+    shouldForwardProp: (prop) => !['color', 'width', 'square'].includes(prop.toString()),
+})(({ color, width, square }) => {
+    return {
+        ...segmentStyle(color ?? 'red', width, square ?? false), // fallback color
+    };
+});

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

@@ -0,0 +1,11 @@
+export interface AnalysisBarProps {
+    componentType: 'analysisBar';
+    expressionLevels: string[];
+    caption?: string;
+    segments?: {
+        color: 'jet' | string;
+        width: number;
+    }[];
+    expressionValue?: string;
+    isDimmed?: boolean;
+}

package/dist/presentations/AnalysisBar/AnalysisBar.types.js

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

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

@@ -0,0 +1,5 @@
+export declare function parseStringValToNumber(val: string): number;
+export declare function adjustBarSegmentWidth(value: number): number;
+export declare function adjustBarLabelPosition(value: number): number;
+export declare function clampNumericalPercentage(value: number): number;
+export declare function clampBarLabelPosition(value: number): number;

package/dist/presentations/AnalysisBar/AnalysisBar.utils.js

@@ -0,0 +1,34 @@
+export function parseStringValToNumber(val) {
+    const value = val.endsWith('%') ? val.slice(0, -1) : val;
+    return parseInt(value, 10);
+}
+export function adjustBarSegmentWidth(value) {
+    if (value === 0)
+        return 0;
+    const adjusted = Math.floor((value / 100) * 97);
+    return adjusted + 4;
+}
+export function adjustBarLabelPosition(value) {
+    if (value === 0)
+        return 1;
+    if (value === 1)
+        return 4;
+    if (value === 100)
+        return 98;
+    const adjusted = Math.floor((value / 100) * 93);
+    return adjusted + 6;
+}
+export function clampNumericalPercentage(value) {
+    if (value >= 100)
+        return 100;
+    if (value <= 0)
+        return 0;
+    return value;
+}
+export function clampBarLabelPosition(value) {
+    if (value >= 100)
+        return 97;
+    if (value <= 0)
+        return 1;
+    return value;
+}

package/dist/presentations/AnalysisBar/HeatmapGraphIcon/HeatmapGraphSVG.d.ts

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

package/dist/presentations/AnalysisBar/HeatmapGraphIcon/HeatmapGraphSVG.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const HeatmapGraphSVG = (props) => (_jsxs("svg", { width: "234", height: "8", viewBox: "0 0 234 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.30733e-07 4C5.85312e-08 1.79086 1.79086 5.86502e-08 4 1.30999e-07L230 7.53243e-06C232.209 7.60478e-06 234 1.79087 234 4.00001C234 6.20915 232.209 8.00001 230 8.00001L4 8C1.79086 8 2.02935e-07 6.20914 1.30733e-07 4Z", fill: "url(#paint0_linear_4060_316245)" }), _jsx("defs", { children: _jsxs("linearGradient", { id: "paint0_linear_4060_316245", x1: "-0.585003", y1: "5.99984", x2: "228.159", y2: "4.97311", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#3000FF" }), _jsx("stop", { offset: "0.239583", stopColor: "#5CFFE2" }), _jsx("stop", { offset: "0.447917", stopColor: "#E2FFA4" }), _jsx("stop", { offset: "0.546875", stopColor: "#FCFF75" }), _jsx("stop", { offset: "0.78125", stopColor: "#FDBA73" }), _jsx("stop", { offset: "1", stopColor: "#FF0F00" })] }) })] }));
+export default HeatmapGraphSVG;

package/dist/presentations/AnalysisBar/HeatmapGraphIcon/index.d.ts

@@ -0,0 +1,7 @@
+import { SvgIconProps } from '@mui/material/SvgIcon';
+type IconProps = SvgIconProps;
+declare const HeatmapGraphIcon: {
+    (props: IconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default HeatmapGraphIcon;

package/dist/presentations/AnalysisBar/HeatmapGraphIcon/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SvgIcon from '@mui/material/SvgIcon';
+import HeatmapGraph from './HeatmapGraphSVG';
+const HeatmapGraphIcon = (props) => {
+    return (_jsx(SvgIcon, { ...props, component: HeatmapGraph, inheritViewBox: true }));
+};
+HeatmapGraphIcon.displayName = 'HeatmapGraphIcon';
+export default HeatmapGraphIcon;

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

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

package/dist/presentations/AnalysisBar/index.js

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

package/dist/presentations/FreeText/FreeText.d.ts

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

package/dist/presentations/FreeText/FreeText.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import theme from '../../theme';
+import { PresentationTypography } from '../presentations.styled';
+const FreeText = ({ componentType = 'freeText', size = 'medium', content, height, background = false, }) => {
+    return (_jsx(Box, { sx: {
+            padding: background ? '8px 6px 8px 16px' : 0,
+            borderRadius: background ? '8px' : 0,
+            backgroundColor: background ? theme.palette.neutralGrey[75] : 'transparent',
+            height: height ? height : 'auto',
+        }, children: _jsx(PresentationTypography, { size: size, sx: {
+                display: 'flex',
+                whiteSpace: 'pre-wrap',
+                overflow: 'auto',
+                color: background ? '#FFFFFF' : 'inherit',
+                height: height ? '100%' : 'auto',
+                '&::-webkit-scrollbar': {
+                    width: '12px',
+                },
+                '&::-webkit-scrollbar-thumb': {
+                    width: '6px',
+                    backgroundColor: theme.palette.neutralGrey[65],
+                    borderRadius: '6px',
+                },
+            }, children: content }) }));
+};
+export default FreeText;

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

@@ -0,0 +1,9 @@
+import type { PresentationElementSize } from '../presentations.types';
+interface FreeTextProps {
+    componentType: 'freeText';
+    size?: PresentationElementSize;
+    content: string;
+    height?: number;
+    background?: boolean;
+}
+export type { FreeTextProps };

package/dist/presentations/FreeText/FreeText.types.js

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

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

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

package/dist/presentations/FreeText/index.js

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

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

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

package/dist/presentations/Histogram/Histogram.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box } from '@mui/material';
+import { HistogramContainer, HistogramChartContainer, HistogramTitle, HistogramNoData, } from './Histogram.styled';
+import HistogramTabs from './HistogramTabs';
+import HistogramChart from './HistogramCharts';
+const Histogram = ({ componentType = 'histogram', title, xAxisLabels, yAxisLabels, tabs, }) => {
+    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 }) }) })] }));
+};
+export default Histogram;

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export declare const HistogramContainer: 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 HistogramTitle: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & 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;
+}, "width" | "zIndex" | "typography" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "visibility" | "whiteSpace" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "style" | "classes" | "className" | "children" | "sx" | "variant" | "p" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const HistogramNoData: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & 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;
+}, "width" | "zIndex" | "typography" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "visibility" | "whiteSpace" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "style" | "classes" | "className" | "children" | "sx" | "variant" | "p" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const HistogramTabsContainer: 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 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 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> & {
+    component?: import("react").ElementType<any> | undefined;
+} & {
+    active?: boolean | undefined;
+}, {}, {}>;

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

@@ -0,0 +1,47 @@
+import { Box, Button, styled, Typography } from '@mui/material';
+export const HistogramContainer = styled(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: '5px',
+    position: 'relative',
+});
+export const HistogramTitle = styled(Typography)({
+    width: '100%',
+    paddingBottom: '12px',
+});
+export const HistogramNoData = styled(Typography)(({ theme }) => ({
+    top: '42%',
+    position: 'absolute',
+    padding: '8px 16px',
+    borderRadius: '4px',
+    background: theme.palette.neutralGrey[75],
+    zIndex: 9999,
+}));
+export const HistogramTabsContainer = styled(Box)({
+    width: '100%',
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr',
+});
+export const HistogramChartContainer = styled(Box)({
+    position: 'relative',
+    height: '200px',
+    width: '244px',
+    marginBottom: '32px',
+});
+export const TabButton = styled(Button, {
+    shouldForwardProp: (prop) => prop !== 'active',
+})(({ theme, active = false }) => ({
+    borderRadius: '8px',
+    backgroundColor: active ? theme.palette.neutralGrey[75] : 'transparent',
+    border: `1px solid ${theme.palette.neutralGrey[75]} !important`,
+    textTransform: 'none',
+    color: active ? theme.palette.neutralGrey[0] : theme.palette.neutralGrey[45],
+    cursor: active ? 'default' : 'pointer',
+    height: '28px',
+    width: '128px',
+    minWidth: '128px',
+    '&:hover': {
+        backgroundColor: active ? theme.palette.neutralGrey[75] : 'transparent',
+    },
+}));

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

@@ -0,0 +1,27 @@
+export interface HistogramTab {
+    label: string;
+    data: number[];
+}
+export interface HistogramProps {
+    componentType: 'histogram';
+    title?: string;
+    xAxisLabels: number[];
+    yAxisLabels: number[];
+    tabs: HistogramTab[];
+}
+export interface HistogramTabsProps {
+    options: string[];
+    active: number;
+    onChange: (index: number) => void;
+}
+export interface HistogramChartProps {
+    dataset: HistogramTab;
+    xAxisLabels: number[];
+    yAxisLabels: number[];
+}
+interface HistogramDatapoint {
+    x: number;
+    y: number;
+}
+export type VictoryStructuredData = HistogramDatapoint[];
+export {};