@lunit/oui 1.3.0 → 2.0.0

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 {};

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;