@lunit/oui 1.3.0 → 2.0.0

package/dist/assets/ic-copy-coordinates-outlined-20px.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-const SvgIcCopyCoordinatesoutlined20Px = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: _jsx("path", { fill: "#4E4E50", fillRule: "evenodd", d: "M5 0a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM4 2a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zM1 5a1 1 0 0 1 1-1V3a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2h-1a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm10-1.5v2a.5.5 0 0 1-1 0v-2a.5.5 0 0 1 1 0m0 8v-2a.5.5 0 0 0-1 0v2a.5.5 0 0 0 1 0m1-4a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5M8.5 7h-2a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1", clipRule: "evenodd" }) }));
+const SvgIcCopyCoordinatesoutlined20Px = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: _jsx("path", { fillRule: "evenodd", d: "M5 0a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM4 2a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zM1 5a1 1 0 0 1 1-1V3a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2h-1a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm10-1.5v2a.5.5 0 0 1-1 0v-2a.5.5 0 0 1 1 0m0 8v-2a.5.5 0 0 0-1 0v2a.5.5 0 0 0 1 0m1-4a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5M8.5 7h-2a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1", clipRule: "evenodd" }) }));
 export default SvgIcCopyCoordinatesoutlined20Px;

package/dist/components/Alert/Alert.utils.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Success, Error, Information } from '../../icons';
+import { Success, Warning, Information } from '../../icons';
 import theme from '../../theme';
 export const getIcons = (severity) => {
     switch (severity) {
@@ -8,9 +8,9 @@ export const getIcons = (severity) => {
         case 'success':
             return _jsx(Success, {});
         case 'error':
-            return _jsx(Error, {});
+            return _jsx(Warning, {});
         default:
-            return _jsx(Error, {});
+            return _jsx(Warning, {});
     }
 };
 export const getBackgroundColor = (severity) => {

package/dist/components/Chip/Chip.utils.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Error16, StartT2 } from '../../icons';
+import { Warning16, StartT2 } from '../../icons';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const presetMap = {
     default: {
@@ -22,7 +22,7 @@ const presetMap = {
     failed: {
         className: 'presetFailed',
         label: 'Failed',
-        icon: _jsx(Error16, {}),
+        icon: _jsx(Warning16, {}),
     },
     ready: {
         className: 'presetReady',
@@ -41,7 +41,7 @@ const presetMap = {
     invalid: {
         className: 'presetInvalid',
         label: 'Invalid',
-        icon: _jsx(Error16, {}),
+        icon: _jsx(Warning16, {}),
     },
 };
 // eslint-disable-next-line import/prefer-default-export

package/dist/components/TextField/TextArea.types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { BoxProps } from '@mui/material';
+import type { BoxProps, SxProps } from '@mui/material';
 import type { HelperMsgProps, RootTextFieldProps } from '../BaseTextField/BaseTextField.types';
 interface RootTextAreaProps extends Omit<RootTextFieldProps, 'BoxProps'> {
     multiline: 'true';
@@ -10,6 +10,7 @@ interface RootTextAreaProps extends Omit<RootTextFieldProps, 'BoxProps'> {
     width?: string | number;
     height?: string | number;
     OuterBoxProps?: BoxProps;
+    sx?: SxProps;
 }
 interface TextAreaWithHelperMsgProps extends Omit<RootTextAreaProps, 'error' | 'multiline'>, Omit<HelperMsgProps, 'error'> {
     error?: string;

package/dist/components/TextField/TextInput.js

@@ -2,11 +2,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import PasswordInput from './components/PasswordInput';
 import NormalTextInput from './components/NormalTextInput';
-import isPasswordInput from './TextInput.utils';
+import { isPasswordInput, isFileInput } from './TextInput.utils';
+import FileInput from './components/FileInput';
 const TextInput = forwardRef((props, ref) => {
     if (isPasswordInput(props)) {
         return (_jsx(PasswordInput, { ...props, ref: ref }));
     }
+    if (isFileInput(props)) {
+        return (_jsx(FileInput, { ...props, ref: ref }));
+    }
     return (_jsx(NormalTextInput, { ...props, ref: ref }));
 });
 export default TextInput;

package/dist/components/TextField/TextInput.styled.js

@@ -21,8 +21,9 @@ const BaseTextInput = styled('input', {
         'width',
         'OuterBoxProps',
         'InputContainerProps',
+        'sx',
     ].includes(prop.toString()),
-})(({ theme, large, error, leftIcon, width }) => {
+})(({ theme, large, error, leftIcon, width, type }) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let resultStyle = {
         ...baseTextInputStyle(theme),

package/dist/components/TextField/TextInput.types.d.ts

@@ -20,7 +20,11 @@ interface NormalTextInputProps extends InputWithHelperMsgProps {
     onClearButtonClick?: () => void;
     rightIcon?: React.ReactNode;
 }
+interface FileInputProps extends NormalTextInputProps {
+    type: 'file';
+    accept: string;
+}
 interface PasswordTextInputProps extends PasswordInputWithHelperMsgProps {
 }
-type TextInputProps = PasswordTextInputProps | NormalTextInputProps;
-export type { TextInputProps, NormalTextInputProps, PasswordTextInputProps, RootTextInputProps };
+type TextInputProps = PasswordTextInputProps | NormalTextInputProps | FileInputProps;
+export type { TextInputProps, NormalTextInputProps, PasswordTextInputProps, FileInputProps, RootTextInputProps, };

package/dist/components/TextField/TextInput.utils.d.ts

@@ -1,3 +1,3 @@
-import type { PasswordTextInputProps, TextInputProps } from './TextInput.types';
-declare function isPasswordInput(props: TextInputProps): props is PasswordTextInputProps;
-export default isPasswordInput;
+import type { FileInputProps, PasswordTextInputProps, TextInputProps } from './TextInput.types';
+export declare function isPasswordInput(props: TextInputProps): props is PasswordTextInputProps;
+export declare function isFileInput(props: TextInputProps): props is FileInputProps;

package/dist/components/TextField/TextInput.utils.js

@@ -1,5 +1,7 @@
 // Function for inferring required input by props
-function isPasswordInput(props) {
+export function isPasswordInput(props) {
     return props.type === 'password';
 }
-export default isPasswordInput;
+export function isFileInput(props) {
+    return props.type === 'file';
+}

package/dist/components/TextField/components/Buttons.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 declare function ClearButton({ onClick }: {
     onClick?: () => void;
 }): import("react/jsx-runtime").JSX.Element;
@@ -5,4 +6,9 @@ declare function ShowHidePasswordButton({ onClick, isHidden, }: {
     onClick?: (event: any) => void;
     isHidden: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-export { ClearButton, ShowHidePasswordButton };
+declare function FileInputWrapperButton({ children, onClick, width, }: {
+    children: React.ReactNode;
+    onClick: () => void;
+    width?: string | number;
+}): import("react/jsx-runtime").JSX.Element;
+export { ClearButton, ShowHidePasswordButton, FileInputWrapperButton };

package/dist/components/TextField/components/Buttons.js

@@ -7,4 +7,18 @@ function ClearButton({ onClick }) {
 function ShowHidePasswordButton({ onClick, isHidden, }) {
     return (_jsx(ButtonWrapper, { onClick: onClick, children: isHidden ? _jsx(HideSmall, {}) : _jsx(ShowSmall, {}) }));
 }
-export { ClearButton, ShowHidePasswordButton };
+function FileInputWrapperButton({ children, onClick, width, }) {
+    return (_jsx("button", { onClick: onClick, style: {
+            position: 'unset',
+            width: width,
+            color: 'unset',
+            letterSpacing: 'unset',
+            margin: 'unset',
+            border: 'unset',
+            paddingInline: 'unset',
+            paddingBlock: 'unset',
+            backgroundColor: 'unset',
+            cursor: 'pointer',
+        }, children: children }));
+}
+export { ClearButton, ShowHidePasswordButton, FileInputWrapperButton };

package/dist/components/TextField/components/FileInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { FileInputProps } from '../TextInput.types';
+declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
+export default FileInput;

package/dist/components/TextField/components/FileInput.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useState } from 'react';
+import { InputMsg, BaseTextFieldContainer, BaseTextFieldBox, } from '../../BaseTextField/BaseTextField.styled';
+import { BaseTextInput, LeftIconContainer, RightIconContainer } from '../TextInput.styled';
+import { FileInputWrapperButton } from './Buttons';
+import { Project } from '../../../icons';
+const FileInput = forwardRef((props, ref) => {
+    const { error, helperMsg, leftIcon, rightIcon, onClearButtonClick, inputSX, type: inputType, ...inputProps } = props;
+    const [fileName, setFileName] = useState('');
+    const fileRef = useRef(null);
+    const baseSX = inputSX ?? {
+        paddingRight: '44px',
+        pointerEvents: 'none',
+    };
+    return (_jsxs(BaseTextFieldBox, { ...props.OuterBoxProps, width: props.width, children: [_jsxs(BaseTextFieldContainer, { ...props.InputContainerProps, width: props.width, children: [leftIcon && (_jsx(LeftIconContainer, { sx: inputProps.disabled ? { opacity: '0.8' } : undefined, children: leftIcon })), _jsx("input", { ref: fileRef, type: "file", accept: props.accept, style: { display: 'none' }, onChange: (e) => {
+                            setFileName(e.target.value.split('\\').pop());
+                        } }), _jsxs(FileInputWrapperButton, { onClick: () => fileRef?.current?.click(), width: props.width, children: [_jsx(BaseTextInput, { ...inputProps, ref: ref, type: "text", error: !!error, value: fileName, 
+                                // @Tobio89: this dummy onchange clears an error without triggering unwanted style changes
+                                onChange: () => { }, leftIcon: leftIcon, sx: baseSX }), _jsx(RightIconContainer, { children: _jsx(Project, {}) })] })] }), error ? (_jsx(InputMsg, { variant: "body5", error: true, children: error })) : (helperMsg && _jsx(InputMsg, { variant: "body5", children: helperMsg }))] }));
+});
+export default FileInput;

package/dist/components/Toggle/Toggle.d.ts

@@ -0,0 +1,3 @@
+import type { ToggleProps } from './Toggle.types';
+declare const Toggle: ({ value, name, checked, defaultChecked, disabled, required, onChange, onChangeCapture, inputProps, inputRef, label, labelPlacement, toggleColor, indeterminate, ...rootProps }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
+export default Toggle;

package/dist/components/Toggle/Toggle.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Typography } from '@mui/material';
+import { Container, StyledIndeterminateToggle, StyledToggle } from './Toggle.styled';
+const Toggle = ({ value, name, checked, defaultChecked, disabled, required, onChange, onChangeCapture, inputProps, inputRef, label, labelPlacement = 'right', toggleColor, indeterminate, ...rootProps }) => {
+    const ToggleComponent = indeterminate ? StyledIndeterminateToggle : StyledToggle;
+    return (_jsxs(Container, { ...rootProps, className: clsx('toggle', { 'is-disabled': disabled }, rootProps.className), component: label != null ? 'label' : 'span', children: [_jsx(ToggleComponent, { disableRipple: true, value: true, name: name, 
+                // indeterminate가 true인 Toggle을 클릭했을 때
+                // 발생하는 change event target의 checked property의 일관성을 보장함
+                checked: indeterminate ? true : checked, defaultChecked: defaultChecked, disabled: disabled, required: required, onChange: onChange, onChangeCapture: onChangeCapture, inputProps: inputProps, inputRef: inputRef, focusRipple: false, toggleColor: toggleColor }), label && (_jsx(Typography, { variant: "body_m1", sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    order: labelPlacement === 'left' ? -1 : 1,
+                }, children: label }))] }));
+};
+export default Toggle;

package/dist/components/Toggle/Toggle.styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ToggleProps } from './Toggle.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 StyledToggle: import("@emotion/styled").StyledComponent<import("@mui/material").SwitchProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ToggleProps, {}, {}>;
+export declare const StyledIndeterminateToggle: import("@emotion/styled").StyledComponent<import("@mui/material").SwitchProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ToggleProps, {}, {}>;

package/dist/components/Toggle/Toggle.styled.js

@@ -0,0 +1,90 @@
+import { Box, styled, Switch } from '@mui/material';
+export const Container = styled(Box)(({ theme }) => ({
+    display: 'inline-flex',
+    gap: theme.spacing(2),
+    pointerEvents: 'none',
+    '&.is-disabled': {
+        opacity: 0.4,
+    },
+    '&:not(:last-child)': {
+        marginBottom: '6px',
+    },
+}));
+export const StyledToggle = styled(Switch, {
+    shouldForwardProp: (prop) => prop !== 'toggleColor',
+})(({ theme, toggleColor, disabled }) => ({
+    width: '32px',
+    height: '22px',
+    borderRadius: '9px',
+    padding: '2px',
+    backgroundColor: 'transparent',
+    pointerEvents: 'auto',
+    opacity: disabled ? 0.4 : 1,
+    '& .MuiSwitch-switchBase': {
+        transition: 'all 100ms ease-in-out',
+        padding: '4px',
+    },
+    '& .MuiSwitch-thumb': {
+        width: '14px',
+        height: '14px',
+        background: theme.palette.neutralGrey[0],
+        boxShadow: '0px 0px 1px rgba(0, 0, 0, 0.4)',
+    },
+    '& .MuiSwitch-track': {
+        opacity: 1,
+        borderRadius: '12px',
+        backgroundColor: theme.palette.neutralGrey[45],
+    },
+    '& .MuiSwitch-switchBase .MuiSwitch-input': {
+        width: '200%',
+        height: '100%',
+        top: 0,
+        left: '-50%',
+    },
+    '& .MuiSwitch-switchBase.Mui-checked': {
+        transform: 'translateX(10px)',
+        color: theme.palette.neutralGrey[0],
+    },
+    '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+        opacity: 1,
+        backgroundColor: toggleColor || theme.palette.lunitTeal[40],
+    },
+    '& .MuiSwitch-switchBase.Mui-disabled + .MuiSwitch-track': {
+        opacity: 1,
+    },
+    '& .MuiSwitch-switchBase.Mui-focusVisible': {
+        boxShadow: 'none',
+        background: 'transparent',
+        borderColor: 'transparent',
+        outline: 'none',
+    },
+    '& .MuiSwitch-switchBase.Mui-focusVisible + .MuiSwitch-track::after': {
+        borderRadius: '12px',
+        content: '""',
+        position: 'absolute',
+        border: `1px solid ${theme.palette.lunitTeal[10]}`,
+        boxSizing: 'border-box',
+        top: '1px',
+        left: '1px',
+        bottom: '1px',
+        right: '1px',
+    },
+}));
+export const StyledIndeterminateToggle = styled(StyledToggle)({
+    padding: '2px',
+    cursor: 'pointer',
+    '& .MuiSwitch-thumb': {
+        height: '2px',
+        width: '12px',
+        borderRadius: '2px',
+        boxShadow: 'none',
+    },
+    '& .MuiSwitch-switchBase.Mui-checked': {
+        padding: '10px 5px',
+        left: '50%',
+        transform: 'translateX(-50%)',
+    },
+    '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+        borderRadius: '12px',
+    },
+});

package/dist/components/Toggle/Toggle.types.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import type { BoxProps, Color, SwitchProps as MuiSwitchProps } from '@mui/material';
+export interface ToggleProps extends Omit<BoxProps<'span'>, 'onChange' | 'onChangeCapture'> {
+    value?: MuiSwitchProps['value'];
+    name?: MuiSwitchProps['name'];
+    checked?: MuiSwitchProps['checked'];
+    defaultChecked?: MuiSwitchProps['defaultChecked'];
+    disabled?: MuiSwitchProps['disabled'];
+    required?: MuiSwitchProps['required'];
+    onChange?: MuiSwitchProps['onChange'];
+    onChangeCapture?: MuiSwitchProps['onChangeCapture'];
+    inputProps?: MuiSwitchProps['inputProps'];
+    inputRef?: MuiSwitchProps['inputRef'];
+    indeterminate?: boolean;
+    label?: string;
+    labelPlacement?: 'left' | 'right';
+    toggleColor?: React.CSSProperties['color'] | Color;
+}

package/dist/components/Toggle/Toggle.types.js

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

package/dist/components/Toggle/index.d.ts

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

package/dist/components/Toggle/index.js

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

package/dist/components/UploadManager/UploadManager.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Grow, Typography, Box } from '@mui/material';
-import { ArrowUp, Close, Success, Error16, RefreshLeft } from '../../icons';
+import { ArrowUp, Close, Success, Warning16, RefreshLeft } from '../../icons';
 import { useState, Fragment, useMemo } from 'react';
 import { Divider } from '../Divider';
 import { Button } from '../Button';
@@ -51,7 +51,7 @@ const UploadFile = ({ file, onCancel, onRetry }) => {
                                                 if (onRetry)
                                                     onRetry(file.id);
                                             }
-                                        }, icon: mouseOnErrorIconButton ? (_jsx(RefreshLeft, { style: { color: theme.palette.neutralGrey[0] } })) : (_jsx(Error16, { style: { color: theme.palette.red[5] } })), variant: "ghost", color: "secondary", sx: {
+                                        }, icon: mouseOnErrorIconButton ? (_jsx(RefreshLeft, { style: { color: theme.palette.neutralGrey[0] } })) : (_jsx(Warning16, { style: { color: theme.palette.red[5] } })), variant: "ghost", color: "secondary", sx: {
                                             cursor: file.meta.retry ? 'pointer' : 'default',
                                         } }) }) })] })), !file.meta?.errorMessage && file.meta?.postProcessConverting && (_jsxs(Typography, { variant: "body5", sx: {
                             marginRight: '30px',

package/dist/components/index.d.ts

@@ -20,5 +20,6 @@ export * from './Radio';
 export * from './Stepper';
 export * from './TabbedPanel';
 export * from './TextField';
+export * from './Toggle';
 export * from './Tooltip';
 export * from './UploadManager';

package/dist/components/index.js

@@ -20,5 +20,6 @@ export * from './Radio';
 export * from './Stepper';
 export * from './TabbedPanel';
 export * from './TextField';
+export * from './Toggle';
 export * from './Tooltip';
 export * from './UploadManager';

package/dist/icons/index.d.ts

@@ -160,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';

package/dist/icons/index.js

@@ -160,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';

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