@lunit/oui 2.4.10 → 2.4.12

package/dist/foundations/palette.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PaletteOptions } from '@mui/material';
 type PaletteOptionItem<T extends PropertyKey> = Record<T, React.CSSProperties['color']>;
 type LunitTealKey = '5' | '10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90';

package/dist/foundations/typography.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TypographyOptions } from '@mui/material/styles/createTypography';
 export interface LunitTypographyVariants {
     h7: React.CSSProperties;

package/dist/index.d.ts

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

package/dist/index.js

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

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

@@ -1,22 +1,5 @@
-/// <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>, {}, {}>;
+import { ComponentType } from 'react';
+declare const BaseAccordion: ComponentType<any>;
+declare const BaseAccordionSummary: ComponentType<any>;
+declare const BaseAccordionDetails: ComponentType<any>;
 export { BaseAccordion, BaseAccordionDetails, BaseAccordionSummary };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { AccordionDetailsProps, AccordionSummaryProps, AccordionProps as MuiAccordionProps } from '@mui/material';
 import { PresentationElementSize } from '../presentations.types';
 import { FreeTextProps } from '../FreeText';

package/dist/presentations/AnalysisBar/AnalysisBar.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { findIndex as _findIndex } from 'lodash';
 import { Box } from '@mui/material';
 import { AnalysisBarSegmentContainer, AnalysisBarOuter, AxisLabels, GraphAxisLabel, GraphScoreIndicator, GraphSegment, } from './AnalysisBar.styled';
 import { parseStringValToNumber, normalizeSegmentWidths } from './AnalysisBar.utils';
@@ -9,8 +8,20 @@ const Segments = ({ segments, isCutoff }) => {
         return null;
     }
     const validSegments = segments.filter((segment) => segment.width > 0);
-    const combinedWidth = segments.reduce((sum, segment) => sum + segment.width, 0);
-    const onePercentSegmentIndex = _findIndex(segments, (segment) => segment.width > 0 && segment.width <= 1);
+    const onePercentIndex = segments.findIndex((segment) => segment.width > 0 && segment.width <= 1);
+    let combinedWidth = 0;
+    let nextSegmentIndex = -1;
+    if (onePercentIndex >= 0) {
+        let i = onePercentIndex;
+        while (i < segments.length && segments[i].width > 0 && segments[i].width <= 1) {
+            combinedWidth += segments[i].width;
+            i++;
+        }
+        if (i < segments.length) {
+            combinedWidth += segments[i].width;
+            nextSegmentIndex = i;
+        }
+    }
     if (segments?.length === 1 && segments[0].color === 'jet') {
         return (_jsx(Box, { sx: { width: '100%', height: '14px', transform: 'scaleY(0.8)' }, children: _jsx(HeatmapGraphSVG, {}) }));
     }
@@ -18,7 +29,7 @@ const Segments = ({ segments, isCutoff }) => {
             if (segment.color === 'jet') {
                 return _jsx(HeatmapGraphSVG, { width: `${segment.width}%` });
             }
-            return (_jsx(GraphSegment, { color: segment.color, width: segment.width, isFirstSegment: i === 0, isLastSegment: i === validSegments.length - 1, isCutoff: isCutoff, combinedWidth: combinedWidth, isNextSegment: onePercentSegmentIndex >= 0 && i === onePercentSegmentIndex + 1, isOnePercentSegment: segment.width <= 1 }, i));
+            return (_jsx(GraphSegment, { color: segment.color, width: segment.width, isFirstSegment: i === 0, isLastSegment: i === validSegments.length - 1, isCutoff: isCutoff, combinedWidth: combinedWidth, isNextSegment: nextSegmentIndex >= 0 && i === nextSegmentIndex, isOnePercentSegment: segment.width <= 1 }, i));
         }) }));
 };
 const AnalysisBar = ({ componentType = 'analysisBar', isCutoff = false, expressionValue, caption, expressionLevels = [], expressionLabels = [], segments, isDimmed = false, }) => {

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

@@ -1,28 +1,22 @@
-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>, {}, {}>;
+import { type PropsWithChildren, ComponentType } from 'react';
+export declare const AnalysisBarOuter: ComponentType<any>;
+export declare const AnalysisBarSegmentContainer: ComponentType<any>;
 export declare const GraphScoreIndicator: ({ value, isCutoff, isJet, }: {
     value: string;
-    isCutoff?: boolean | undefined;
-    isJet?: boolean | undefined;
+    isCutoff?: boolean;
+    isJet?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const GraphAxisLabel: ({ label, leftPos, isCutoff, }: {
     label: string;
     leftPos: number;
-    isCutoff?: boolean | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const AxisLabels: ({ children }: {
+    isCutoff?: boolean;
+}) => JSX.Element;
+export declare const AxisLabels: ({ children, }: {
     percent?: boolean;
-} & PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+} & PropsWithChildren) => JSX.Element;
 export declare const AnalysisBarCaption: ({ label }: {
     label: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => JSX.Element;
 interface GraphSegmentProps {
     color: string | undefined;
     width: number;
@@ -33,5 +27,5 @@ interface GraphSegmentProps {
     isFirstSegment: boolean;
     isLastSegment: 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 declare const GraphSegment: ComponentType<GraphSegmentProps>;
 export {};

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

@@ -79,7 +79,7 @@ export const GraphAxisLabel = ({ label, leftPos, isCutoff, }) => {
             transform: 'translateX(-50%)',
         }, className: "analysis-bar-axis-label", children: _jsx(Typography, { variant: "small_body_m5", sx: { textAlign: 'center' }, children: label }) }));
 };
-export const AxisLabels = ({ children }) => {
+export const AxisLabels = ({ children, }) => {
     return (_jsx(Box, { sx: {
             position: 'relative',
             display: 'flex',

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

@@ -1,26 +1,11 @@
-/// <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 HistogramDescription: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const TabButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "color" | "disabled" | "size" | "style" | "fullWidth" | "classes" | "className" | "children" | "sx" | "variant" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "href" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    component?: import("react").ElementType<any> | undefined;
-} & {
-    active?: boolean | undefined;
-}, {}, {}>;
+import { ButtonProps } from '@mui/material';
+import { ComponentType } from 'react';
+export declare const HistogramContainer: ComponentType<any>;
+export declare const HistogramTitle: ComponentType<any>;
+export declare const HistogramNoData: ComponentType<any>;
+export declare const HistogramTabsContainer: ComponentType<any>;
+export declare const HistogramChartContainer: ComponentType<any>;
+export declare const HistogramDescription: ComponentType<any>;
+export declare const TabButton: ComponentType<ButtonProps & {
+    active?: boolean;
+}>;

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

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

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

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

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

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

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

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

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

@@ -1,15 +1,3 @@
-/// <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 {};
+import { ComponentType } from 'react';
+export declare const ToggleControlOuter: ComponentType<any>;
+export declare const ToggleControlContainer: ComponentType<any>;

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

@@ -1,5 +1,7 @@
 import { Box, styled } from '@mui/material';
-export const ToggleControlOuter = styled(Box, { shouldForwardProp: (prop) => prop !== 'hasBar' })(({ hasBar }) => ({
+export const ToggleControlOuter = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'hasBar',
+})(({ hasBar }) => ({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'flex-start',

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FreeTextProps } from '../FreeText';
 import type { AnalysisBarProps } from '../AnalysisBar';
 import type { PresentationElementSize, PresentationSymbol } from '../presentations.types';

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

@@ -1,4 +1,2 @@
-/// <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>, {}, {}>;
+import { ComponentType } from 'react';
+export declare const ToggleControlGroupContainer: ComponentType<any>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { AnalysisBarProps } from '../AnalysisBar';
 import { FreeTextProps } from '../FreeText';
 import type { PresentationElementSize } from '../presentations.types';

package/dist/systems/drawer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ThemeOptions } from '@mui/material';
 declare module '@mui/material/styles' {
     interface Theme {

package/package.json

@@ -1,90 +1,38 @@
 {
   "name": "@lunit/oui",
-  "version": "2.4.10",
+  "version": "2.4.12",
   "validate-branch-name": {
     "pattern": "^(main|develop)|(feature|fix|release|hotfix|qe)/.+$",
     "errorMsg": "The branch name is not correct. Please check the pattern. (ex. feature/add-something)"
   },
-  "dependencies": {
-    "@babel/core": "^7.16.0",
-    "@date-io/date-fns": "^2.17.0",
+  "peerDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@lunit/design-system-icons": "^2.1.0",
-    "@lunit/design-system-logo": "1.1.1",
     "@mui/icons-material": "^5.15.2",
     "@mui/lab": "^5.0.0-alpha.158",
     "@mui/material": "^5.15.2",
-    "@mui/styles": "^5.15.2",
     "@mui/system": "^5.15.2",
     "@mui/x-data-grid": "^6.18.6",
     "@mui/x-date-pickers": "^6.18.6",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@svgr/webpack": "^8.1.0",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.68",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.18",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "@date-io/date-fns": "^2.17.0",
+    "@lunit/design-system-icons": "^2.1.0",
+    "@lunit/design-system-logo": "1.1.1",
     "@uppy/core": "^3.8.0",
-    "babel-jest": "^27.4.2",
-    "babel-loader": "^8.2.3",
-    "babel-plugin-named-asset-import": "^0.3.8",
-    "babel-preset-react-app": "^10.0.1",
-    "bfj": "^7.0.2",
-    "browserslist": "^4.18.1",
-    "camelcase": "^6.2.1",
-    "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "clsx": "^2.0.0",
-    "css-loader": "^6.5.1",
-    "css-minimizer-webpack-plugin": "^3.2.0",
     "date-fns": "2.30.0",
-    "dotenv": "^10.0.0",
-    "dotenv-expand": "^5.1.0",
-    "eslint": "^8.3.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-webpack-plugin": "^3.1.1",
-    "file-loader": "^6.2.0",
-    "fs-extra": "^10.0.0",
-    "html-webpack-plugin": "^5.5.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.4.3",
-    "jest-resolve": "^27.4.2",
-    "jest-watch-typeahead": "^1.0.0",
     "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^2.4.5",
-    "postcss": "^8.4.4",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-loader": "^6.2.1",
-    "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^7.0.1",
-    "prompts": "^2.4.2",
-    "react": "^18.2.0",
-    "react-app-polyfill": "^3.0.0",
-    "react-dev-utils": "^12.0.1",
-    "react-dom": "^18.2.0",
-    "react-refresh": "^0.11.0",
-    "resolve": "^1.20.0",
-    "resolve-url-loader": "^4.0.0",
-    "sass-loader": "^12.3.0",
-    "semver": "^7.3.5",
-    "source-map-loader": "^3.0.0",
-    "style-loader": "^3.3.1",
-    "styled-components": "^6.1.1",
-    "tailwindcss": "^3.0.2",
-    "terser-webpack-plugin": "^5.2.5",
+    "react-router-dom": "^7.9.6",
     "tinycolor2": "^1.6.0",
-    "typescript": "^4.9.5",
+    "uuid": "^11.1.0",
     "victory": "^37.3.6",
-    "web-vitals": "^2.1.4",
-    "webpack": "^5.64.4",
-    "webpack-dev-server": "^4.6.0",
-    "webpack-manifest-plugin": "^4.0.2",
-    "workbox-webpack-plugin": "^6.4.1"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
+    "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
     "build": "npm run build:transpile",
     "build:transpile": "tsc -p tsconfig.build.json",
     "build:cjs": "NODE_ENV=production webpack -c config/cjs.config.js",
@@ -168,44 +116,113 @@
     ]
   },
   "devDependencies": {
+    "@babel/core": "^7.16.0",
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
     "@lottiefiles/react-lottie-player": "^3.5.3",
     "@lunit/eslint-config": "^0.5.0",
-    "@storybook/addon-actions": "^7.6.6",
-    "@storybook/addon-essentials": "^7.6.6",
-    "@storybook/addon-interactions": "^7.6.6",
-    "@storybook/addon-links": "^7.6.6",
+    "@mui/icons-material": "5.15.2",
+    "@mui/lab": "5.0.0-alpha.158",
+    "@mui/material": "5.15.2",
+    "@mui/system": "5.15.2",
+    "@mui/x-data-grid": "6.18.6",
+    "@mui/x-date-pickers": "6.18.6",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
+    "@storybook/addon-actions": "^7.6.17",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
     "@storybook/addon-onboarding": "^1.0.10",
-    "@storybook/blocks": "^7.6.6",
-    "@storybook/manager-api": "^7.6.6",
-    "@storybook/react": "^7.6.6",
-    "@storybook/react-vite": "^7.6.6",
-    "@storybook/react-webpack5": "^7.6.6",
-    "@storybook/test": "^7.6.6",
-    "@storybook/theming": "^7.6.6",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/manager-api": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
+    "@storybook/react-webpack5": "^7.6.17",
+    "@storybook/test": "^7.6.17",
+    "@storybook/theming": "^7.6.17",
+    "@svgr/webpack": "^8.1.0",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
     "@tsconfig/recommended": "^1.0.3",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.68",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
     "@types/tinycolor2": "^1.4.6",
     "@typescript-eslint/eslint-plugin": "^8.18.1",
     "@typescript-eslint/parser": "^8.24.0",
+    "babel-jest": "^27.4.2",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-named-asset-import": "^0.3.8",
+    "babel-preset-react-app": "^10.0.1",
+    "bfj": "^7.0.2",
+    "browserslist": "^4.18.1",
+    "camelcase": "^6.2.1",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
+    "css-loader": "^6.5.1",
+    "css-minimizer-webpack-plugin": "^3.2.0",
+    "dotenv": "^10.0.0",
+    "dotenv-expand": "^5.1.0",
+    "eslint": "^8.3.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-prettier": "^5.1.0",
     "eslint-plugin-storybook": "^0.6.15",
+    "eslint-webpack-plugin": "^3.1.1",
+    "file-loader": "^6.2.0",
+    "fs-extra": "^10.0.0",
+    "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.4.3",
+    "jest-resolve": "^27.4.2",
+    "jest-watch-typeahead": "^1.0.0",
     "lint-staged": "^15.2.0",
+    "mini-css-extract-plugin": "^2.4.5",
+    "postcss": "^8.4.4",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-loader": "^6.2.1",
+    "postcss-normalize": "^10.0.1",
+    "postcss-preset-env": "^7.0.1",
     "prettier": "^3.1.1",
-    "storybook": "^7.6.6",
+    "prompts": "^2.4.2",
+    "react": "18.2.0",
+    "react-app-polyfill": "^3.0.0",
+    "react-dev-utils": "^12.0.1",
+    "react-dom": "18.2.0",
+    "react-refresh": "^0.11.0",
+    "resolve": "^1.20.0",
+    "resolve-url-loader": "^4.0.0",
+    "sass-loader": "^12.3.0",
+    "semver": "^7.3.5",
+    "source-map-loader": "^3.0.0",
+    "storybook": "^7.6.17",
+    "style-loader": "^3.3.1",
+    "styled-components": "^6.1.1",
+    "tailwindcss": "^3.0.2",
+    "terser-webpack-plugin": "^5.2.5",
     "ts-loader": "^9.5.1",
+    "typescript": "^5.9.3",
     "typescript-eslint": "^8.18.1",
-    "uuid": "^11.1.0",
+    "webpack": "^5.64.4",
     "webpack-cli": "^5.1.4",
-    "webpack-node-externals": "^3.0.0"
+    "webpack-dev-server": "^4.6.0",
+    "webpack-manifest-plugin": "^4.0.2",
+    "webpack-node-externals": "^3.0.0",
+    "workbox-webpack-plugin": "^6.4.1"
   },
   "description": "Lunit Oncology UI components",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "exports": {
     ".": {
       "import": "./dist/index.js",