@lunit/oui 1.0.0-alpha.6 → 1.0.0-alpha.7

package/dist/components/MuiOutlinedInput.js

@@ -0,0 +1,56 @@
+import { palette, typography } from '../foundations';
+const styleOverrides = {
+    root: {
+        borderRadius: 8,
+        backgroundColor: palette.neutralGrey[75],
+        color: palette.neutralGrey[45],
+        '&.MuiInputBase-adornedStart': {
+            paddingLeft: '16px',
+        },
+        '&.MuiInputBase-adornedEnd': {
+            paddingRight: '16px',
+        },
+        '&.Mui-disabled': {
+            backgroundColor: 'transparent',
+            borderWidth: '1px',
+            borderColor: palette.neutralGrey[45],
+        },
+    },
+    notchedOutline: {
+        border: '1px solid transparent',
+        borderRadius: 8,
+        padding: 0,
+        'html .MuiOutlinedInput-root:hover &': {
+            borderColor: palette.neutralGrey[45],
+        },
+        'html .MuiOutlinedInput-root.Mui-focused &': {
+            borderWidth: '1px',
+            borderColor: palette.lunitTeal[10],
+        },
+        'html .MuiOutlinedInput-root.Mui-disabled &': {
+            border: 'none',
+        },
+    },
+    input: {
+        ...typography.body5,
+        color: palette.neutralGrey[5],
+        padding: '8px 16px',
+        boxSizing: 'border-box',
+        '&::placeholder': {
+            color: palette.neutralGrey[45],
+        },
+        '&:-webkit-autofill': {
+            boxShadow: `0 0 0 100px ${palette.neutralGrey[75]}`,
+            WebkitTextFillColor: palette.neutralGrey[5],
+        },
+        '&.Mui-disabled': {
+            backgroundColor: 'inherit',
+            borderRadius: '8px',
+            WebkitTextFillColor: palette.neutralGrey[45],
+        },
+    },
+};
+export default {
+    styleOverrides,
+};
+//# sourceMappingURL=MuiOutlinedInput.js.map

package/dist/components/MuiTextField.js

@@ -0,0 +1,16 @@
+const styleOverrides = {
+    root: {
+        width: '100%',
+        input: {
+            textOverflow: 'ellipsis',
+        },
+    },
+};
+const defaultProps = {
+    variant: 'standard',
+};
+export default {
+    styleOverrides,
+    defaultProps,
+};
+//# sourceMappingURL=MuiTextField.js.map

package/dist/components/ProductLabel/ProductLabel.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@mui/material';
+import { LabelContainer, LabelContent, LabelCloseButton } from './ProductLabel.styled';
+import { Divider } from '../Divider';
+import { Close } from '../Icons';
+import { LunitScope } from '@lunit/design-system-logo';
+function ProductLabel({ open, onClose, children, footerStart, footerEnd }) {
+    const handleClose = () => {
+        if (onClose) {
+            onClose();
+        }
+    };
+    return (_jsxs(LabelContainer, { open: open, maxWidth: false, onClose: handleClose, "aria-labelledby": "label-dialog-title", children: [_jsx(LabelCloseButton, { variant: "ghost", icon: _jsx(Close, {}), onClick: handleClose }), _jsxs(LabelContent, { children: [_jsx("div", { children: _jsx(LunitScope, { style: { width: '170px' } }) }), _jsx(Typography, { variant: "body5", children: "Software Algorithm Device To Assist Users In Digital Pathology" }), _jsx(Divider, { orientation: "horizontal", sx: { margin: '15px 0' } }), children, _jsx(Divider, { orientation: "horizontal", sx: { margin: '8px 0' } }), (footerStart || footerEnd) && (_jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between' }, children: [footerStart ? footerStart : _jsx("div", {}), footerEnd] }))] })] }));
+}
+export default ProductLabel;
+//# sourceMappingURL=ProductLabel.js.map

package/dist/components/ProductLabel/ProductLabel.styled.js

@@ -0,0 +1,53 @@
+import { styled, Typography, Box, Dialog, DialogContent } from '@mui/material';
+import { Button } from '../Button';
+export const ProductName = styled(Typography)(({ theme }) => ({
+    ...theme.typography.body_b1,
+    marginBottom: '12px',
+}));
+export const LabelRow = styled(Box)({
+    display: 'flex',
+    flexDirection: 'row',
+    marginBottom: 12,
+    alignItems: 'flex-start',
+});
+export const LabelColumn = styled(Box)({ flex: 0 });
+export const LabelValue = styled(Box)({
+    flex: 1,
+    marginLeft: 16,
+});
+export const FramedText = styled(Typography)({
+    border: '1px solid #000',
+    padding: 2,
+    fontSize: 12,
+    lineHeight: '16px',
+    fontWeight: 700,
+    wordBreak: 'normal',
+});
+export const LabelSubBox = styled(Box)({
+    marginLeft: '11.5px',
+    marginBottom: '4px',
+});
+export const LabelContainer = styled(Dialog)({
+    '& .MuiPaper-root': {
+        width: 540,
+        backgroundColor: '#fff',
+        border: '2px solid #000',
+        borderRadius: '8px',
+        padding: 0,
+    },
+});
+export const LabelContent = styled(DialogContent)(({ theme }) => ({
+    padding: '30px',
+    color: theme.palette.neutralGrey[90],
+}));
+export const LabelCloseButton = styled(Button)({
+    position: 'absolute',
+    right: '30px',
+    top: '30px',
+    padding: 0,
+    color: '#4E4E50',
+    '&:hover': {
+        backgroundColor: 'transparent',
+    },
+});
+//# sourceMappingURL=ProductLabel.styled.js.map

package/dist/components/ProductLabel/ProductLabel.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ProductLabel.types.js.map

package/dist/components/ProductLabel/index.js

@@ -0,0 +1,3 @@
+import ProductLabel from './ProductLabel';
+export { ProductLabel };
+//# sourceMappingURL=index.js.map

package/dist/components/Progress/CircularProgress.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import BaseCircularProgress from './CircularProgress.styled';
+function CircularProgress({ progress, size = 36, ...otherProps }) {
+    return (_jsx(BaseCircularProgress, { size: size, value: progress, ...otherProps }));
+}
+export default CircularProgress;
+//# sourceMappingURL=CircularProgress.js.map

package/dist/components/Progress/CircularProgress.styled.js

@@ -0,0 +1,8 @@
+import { CircularProgress as MuiCircularProgress, styled } from '@mui/material';
+const BaseCircularProgress = styled(MuiCircularProgress, {
+    shouldForwardProp: (prop) => prop !== 'circleColor',
+})(({ theme, circleColor }) => ({
+    color: circleColor || theme.palette.lunitTeal[40],
+}));
+export default BaseCircularProgress;
+//# sourceMappingURL=CircularProgress.styled.js.map

package/dist/components/Progress/CircularProgress.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CircularProgress.types.js.map

package/dist/components/Progress/LinearProgress.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import BaseLinearProgress from './LinearProgress.styled';
+function LinearProgress({ barColor, progress, height = 4, ...otherProps }) {
+    return (_jsx(BaseLinearProgress, { value: progress, height: height, barColor: barColor, ...otherProps }));
+}
+export default LinearProgress;
+//# sourceMappingURL=LinearProgress.js.map

package/dist/components/Progress/LinearProgress.styled.js

@@ -0,0 +1,13 @@
+import { LinearProgress as MuiLinearProgress, linearProgressClasses, styled } from '@mui/material';
+const BaseLinearProgress = styled(MuiLinearProgress, {
+    shouldForwardProp: (prop) => prop !== 'barColor',
+})(({ theme, height, barColor }) => ({
+    width: '100%',
+    height,
+    backgroundColor: 'transparent',
+    [`& .${linearProgressClasses.barColorPrimary}`]: {
+        backgroundColor: barColor || theme.palette.lunitTeal[40],
+    },
+}));
+export default BaseLinearProgress;
+//# sourceMappingURL=LinearProgress.styled.js.map

package/dist/components/Progress/LinearProgress.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=LinearProgress.types.js.map

package/dist/components/Progress/index.js

@@ -0,0 +1,4 @@
+import CircularProgress from './CircularProgress';
+import LinearProgress from './LinearProgress';
+export { CircularProgress, LinearProgress };
+//# sourceMappingURL=index.js.map

package/dist/components/Radio/Radio.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Container, StyledRadio, UncheckedIcon, CheckedIcon } from './Radio.styled';
+const Radio = forwardRef(({ value, name, checked, defaultChecked, disabled, required, onChange, onChangeCapture, inputProps, inputRef, label, ...rootProps }, ref) => {
+    return (_jsxs(Container, { ...rootProps, className: clsx('radio', rootProps.className), component: label != null ? 'label' : 'span', ref: ref, children: [_jsx(StyledRadio, { disableRipple: true, icon: _jsx(UncheckedIcon, {}), checkedIcon: _jsx(CheckedIcon, {}), value: value, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, required: required, onChange: onChange, onChangeCapture: onChangeCapture, inputProps: inputProps, inputRef: inputRef }), label && (_jsx(Typography, { variant: "body_m1", sx: { display: 'flex', alignItems: 'center' }, children: label }))] }));
+});
+export default Radio;
+//# sourceMappingURL=Radio.js.map

package/dist/components/Radio/Radio.styled.js

@@ -0,0 +1,32 @@
+import { styled, Box, Radio } from '@mui/material';
+export const Container = styled(Box)(({ theme }) => ({
+    display: 'inline-flex',
+    gap: theme.spacing(2),
+}));
+export const StyledRadio = styled(Radio)(({ theme }) => ({
+    width: '22px',
+    height: '22px',
+    padding: 0,
+    borderRadius: '50%',
+    '&.Mui-disabled, &.Mui-disabled + .MuiTypography-root': {
+        opacity: 0.4,
+    },
+    '&.Mui-focusVisible > div': {
+        boxShadow: `0 0 0 1px ${theme.palette.lunitTeal[10]}`,
+    },
+}));
+export const UncheckedIcon = styled('div')(({ theme }) => ({
+    width: '18px',
+    height: '18px',
+    border: `1.5px solid ${theme.palette.neutralGrey[45]}`,
+    borderRadius: '50%',
+    boxSizing: 'border-box',
+}));
+export const CheckedIcon = styled('div')(({ theme }) => ({
+    width: '18px',
+    height: '18px',
+    border: `4px solid ${theme.palette.lunitTeal[40]}`,
+    borderRadius: '50%',
+    boxSizing: 'border-box',
+}));
+//# sourceMappingURL=Radio.styled.js.map

package/dist/components/Radio/Radio.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Radio.types.js.map

package/dist/components/Radio/RadioGroup.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { StyledRadioGroup } from './RadioGroup.styled';
+const RadioGroup = forwardRef(({ defaultValue, name, row, children, onChange, value, ...props }, ref) => {
+    return (_jsx(StyledRadioGroup, { ...props, defaultValue: defaultValue, name: name, onChange: onChange, value: value, row: row, ref: ref, children: children }));
+});
+export default RadioGroup;
+//# sourceMappingURL=RadioGroup.js.map

package/dist/components/Radio/RadioGroup.styled.js

@@ -0,0 +1,6 @@
+import { styled, RadioGroup } from '@mui/material';
+// eslint-disable-next-line import/prefer-default-export
+export const StyledRadioGroup = styled(RadioGroup)(({ theme }) => ({
+    gap: theme.spacing(2),
+}));
+//# sourceMappingURL=RadioGroup.styled.js.map

package/dist/components/Radio/RadioGroup.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=RadioGroup.types.js.map

package/dist/components/Radio/index.js

@@ -0,0 +1,4 @@
+import Radio from './Radio';
+import RadioGroup from './RadioGroup';
+export { Radio, RadioGroup };
+//# sourceMappingURL=index.js.map

package/dist/components/Stepper/Stepper.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChipContainer, StepperChip, StepperContainer, StepperTypography } from './Stepper.styled';
+const Stepper = ({ step, title, disabled = false, sx }) => {
+    return (_jsxs(StepperContainer, { sx: sx, children: [_jsx(ChipContainer, { children: _jsx(StepperChip, { label: `STEP ${step}`, disabled: disabled }) }), _jsx(StepperTypography, { variant: "h7", disabled: disabled, children: title })] }));
+};
+export default Stepper;
+//# sourceMappingURL=Stepper.js.map

package/dist/components/Stepper/Stepper.styled.js

@@ -0,0 +1,33 @@
+import { Box, Typography, styled } from '@mui/material';
+import { Chip } from '../Chip';
+import theme from '../../theme';
+export const StepperContainer = styled(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    height: '64px',
+});
+export const ChipContainer = styled(Box)({
+    display: 'inline-block',
+});
+export const StepperChip = styled(Chip, {
+    shouldForwardProp: (prop) => prop !== 'disabled',
+})(({ disabled }) => ({
+    backgroundColor: `${!disabled ? theme.palette.lunitTeal[40] : theme.palette.neutralGrey[70]} !important`,
+    color: `${!disabled ? theme.palette.lunitTeal[90] : theme.palette.neutralGrey[95]} !important`,
+    marginBottom: '4px',
+    '.MuiChip-label ': {
+        fontWeight: 400,
+        fontSize: '14px',
+        lineHeight: '24px',
+    },
+}));
+export const StepperTypography = styled(Typography, {
+    shouldForwardProp: (prop) => prop !== 'disabled',
+})(({ disabled }) => ({
+    color: !disabled ? 'white' : theme.palette.neutralGrey[70],
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    cursor: 'default',
+}));
+//# sourceMappingURL=Stepper.styled.js.map

package/dist/components/Stepper/Stepper.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Stepper.types.js.map

package/dist/components/Stepper/index.js

@@ -0,0 +1,3 @@
+import Stepper from './Stepper';
+export { Stepper };
+//# sourceMappingURL=index.js.map

package/dist/components/TabbedPanel/TabbedPanel.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@mui/material';
+import TabContext from '@mui/lab/TabContext';
+import { BaseTab, BaseTabMenu, BaseTabPanel } from './TabbedPanel.styled';
+const TabbedPanel = ({ tabs, size = 'medium', buttonVariant = 'normal', activatedTab, TabPanelProps, TabProps, TabsProps, menuVariant, onActivatedTab, onTabChangeListener, }) => {
+    const handleChange = (_, newValue) => {
+        if (onTabChangeListener) {
+            onTabChangeListener(newValue);
+        }
+        onActivatedTab(newValue);
+    };
+    // If prop is not explicitly set, use standard when there is only one tab
+    // This means by default, it will left-align when there is only one tab.
+    const menuVariantSetting = !menuVariant || tabs.length < 2 ? 'standard' : menuVariant;
+    return (_jsx(Box, { children: _jsxs(TabContext, { value: activatedTab, children: [_jsx(BaseTabMenu, { size: size, value: activatedTab, onChange: handleChange, variant: menuVariantSetting, buttonVariant: buttonVariant, TabIndicatorProps: { sx: { display: 'none' } }, ...TabsProps, children: tabs.map((t) => (_jsx(BaseTab, { buttonVariant: buttonVariant, size: size, disabled: t.disabled, disableTouchRipple: true, disableRipple: true, label: _jsx(Typography, { variant: "body_sb1", children: t.value }), value: t.value, ...TabProps }, t.value))) }), tabs.map((t) => (_jsx(BaseTabPanel, { value: t.value, ...TabPanelProps, children: t.element }, t.value)))] }) }));
+};
+export default TabbedPanel;
+//# sourceMappingURL=TabbedPanel.js.map

package/dist/components/TabbedPanel/TabbedPanel.styled.js

@@ -0,0 +1,116 @@
+import TabPanel from '@mui/lab/TabPanel/TabPanel';
+import { Tab, Tabs, styled } from '@mui/material';
+const tabSizeStyle = (size) => {
+    return {
+        minHeight: `${size === 'small' ? '28px' : '44px'} !important`,
+    };
+};
+// Style for Tabs (Tab Group)
+const baseTabMenuStyle = (theme) => {
+    return {
+        padding: 0,
+        borderBottom: `1px solid ${theme.palette.neutralGrey[65]}`,
+    };
+};
+const toggleTabMenuStyle = {
+    borderRadius: '8px',
+    outline: 'none',
+    boxShadow: 'none',
+    borderBottom: 'none',
+};
+// Style for Tab (Tab Button)
+const baseTabStyle = (theme, size) => {
+    return {
+        background: theme.palette.neutralGrey[90],
+        borderRadius: 'inherit',
+        color: theme.palette.neutralGrey[45],
+        minWidth: '100px',
+        padding: `${size === 'small' ? '4px 8px' : '12px 16px'}`,
+        textTransform: 'none',
+        '&:hover': {
+            opacity: 0.8,
+        },
+        '&:active': {
+            background: theme.palette.neutralGrey[60],
+            color: theme.palette.neutralGrey[0],
+        },
+        '&.Mui-selected': {
+            background: theme.palette.neutralGrey[90],
+            color: theme.palette.neutralGrey[0],
+        },
+    };
+};
+const toggleTabStyle = (theme) => {
+    return {
+        outline: 'none',
+        borderRadius: 'inherit',
+        border: `1px solid ${theme.palette.neutralGrey[75]}`,
+        boxShadow: 'none',
+        background: theme.palette.neutralGrey[90],
+        color: theme.palette.neutralGrey[45],
+        '&:hover': {
+            opacity: 0.8,
+        },
+        '&:active': {
+            borderRadius: 'inherit',
+            boxShadow: 'none',
+            outline: 'none',
+            borderColor: theme.palette.neutralGrey[60],
+            background: theme.palette.neutralGrey[60],
+            color: theme.palette.neutralGrey[0],
+        },
+        '&.Mui-selected': {
+            borderRadius: 'inherit',
+            boxShadow: 'none',
+            outline: 'none',
+            borderColor: 'transparent',
+            background: theme.palette.neutralGrey[75],
+            color: theme.palette.neutralGrey[0],
+            '&:hover': { opacity: 1 },
+        },
+        '&:first-of-type': {
+            borderRadius: '8px 0 0 8px',
+        },
+        '&:last-of-type': {
+            borderRadius: '0 8px 8px 0',
+        },
+    };
+};
+const baseTabbedPanelStyle = {
+    padding: '0',
+};
+const BaseTabMenu = styled(Tabs, {
+    shouldForwardProp: (prop) => !['size', 'buttonVariant'].includes(prop.toString()),
+})(({ theme, size, buttonVariant }) => {
+    let style = {
+        ...baseTabMenuStyle(theme),
+        ...tabSizeStyle(size ?? 'medium'),
+    };
+    if (buttonVariant === 'toggle') {
+        style = {
+            ...style,
+            ...toggleTabMenuStyle,
+        };
+    }
+    return style;
+});
+const BaseTab = styled(Tab, {
+    shouldForwardProp: (prop) => !['size', 'buttonVariant'].includes(prop.toString()),
+})(({ theme, size, buttonVariant }) => {
+    let style = {
+        ...baseTabStyle(theme, size ?? 'medium'),
+        ...tabSizeStyle(size ?? 'medium'),
+    };
+    if (buttonVariant === 'toggle') {
+        style = {
+            ...style,
+            ...toggleTabStyle(theme),
+        };
+    }
+    return style;
+});
+const BaseTabPanel = styled(TabPanel)(() => {
+    return baseTabbedPanelStyle;
+});
+export { BaseTabMenu, BaseTab, BaseTabPanel };
+//# sourceMappingURL=TabbedPanel.styled.js.map

package/dist/components/TabbedPanel/TabbedPanel.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TabbedPanel.types.js.map

package/dist/components/TabbedPanel/TabbedPanel.utils.js

@@ -0,0 +1,18 @@
+/**
+ *
+ * @param defaultTab string | undefined
+ * @param tabs TabConfig[]
+ * @returns string
+ * @description returns the initial value for useState, based on defaultTab.
+ * If default tab is provided and matched, returns that,
+ * else, returns first tab.
+ *
+ */
+function findDefaultTab(defaultTab, tabs) {
+    if (defaultTab) {
+        return tabs.find((t) => t.value === defaultTab)?.value ?? tabs[0].value;
+    }
+    return tabs[0].value;
+}
+export { findDefaultTab };
+//# sourceMappingURL=TabbedPanel.utils.js.map

package/dist/components/TabbedPanel/index.js

@@ -0,0 +1,3 @@
+import TabbedPanel from './TabbedPanel';
+export { TabbedPanel };
+//# sourceMappingURL=index.js.map

package/dist/components/TextField/TextArea.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { InputMsg, BaseTextFieldContainer } from '../BaseTextField/BaseTextField.styled';
+import BaseTextArea from './TextArea.styled';
+const TextArea = forwardRef((props, ref) => {
+    const { error, helperMsg, OuterBoxProps, ...areaProps } = props;
+    return (_jsxs(BaseTextFieldContainer, { ...OuterBoxProps, width: props.width, children: [_jsx(BaseTextArea, { ref: ref, ...areaProps, multiline: "true", error: !!error }), error ? (_jsx(InputMsg, { variant: "body5", error: true, children: error })) : (helperMsg && _jsx(InputMsg, { variant: "body5", children: helperMsg }))] }));
+});
+export default TextArea;
+//# sourceMappingURL=TextArea.js.map

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

@@ -0,0 +1,31 @@
+import { styled } from '@mui/material';
+import { styles } from '../BaseTextField/BaseTextField.styled';
+import { formatCSSSize } from '../BaseTextField/BaseTextField.utils';
+const baseTextAreaStyle = (theme, height) => {
+    return {
+        ...styles.baseTextFieldStyle(theme),
+        height: height ? formatCSSSize(height) : '100px',
+        resize: 'none',
+        '&::-webkit-scrollbar': {
+            width: '14px !important',
+        },
+        '&::-webkit-scrollbar-thumb': {
+            border: `4px solid ${theme.palette.neutralGrey[75]}`,
+        },
+    };
+};
+const BaseTextArea = styled('textarea', {
+    shouldForwardProp: (prop) => !['error', 'width', 'height'].includes(prop.toString()),
+})(({ theme, height, error }) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let resultStyle = baseTextAreaStyle(theme, height);
+    if (error) {
+        resultStyle = {
+            ...resultStyle,
+            ...styles.baseTextFieldErrorStyle(theme),
+        };
+    }
+    return resultStyle;
+});
+export default BaseTextArea;
+//# sourceMappingURL=TextArea.styled.js.map

package/dist/components/TextField/TextArea.types.js

@@ -0,0 +1,3 @@
+export {};
+// n.b structured to match TextInput
+//# sourceMappingURL=TextArea.types.js.map

package/dist/components/TextField/TextInput.js

@@ -0,0 +1,13 @@
+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';
+const TextInput = forwardRef((props, ref) => {
+    if (isPasswordInput(props)) {
+        return (_jsx(PasswordInput, { ...props, ref: ref }));
+    }
+    return (_jsx(NormalTextInput, { ...props, ref: ref }));
+});
+export default TextInput;
+//# sourceMappingURL=TextInput.js.map