@arquimedes.co/eureka-forms 2.0.34-test → 2.0.36-test

package/dist/mjs/Shared/RoundedSelect/RoundedSelect.js

@@ -1,160 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import InputLabel from '@material-ui/core/InputLabel';
-import FormControl from '@material-ui/core/FormControl';
-import OutlinedInput from '@material-ui/core/OutlinedInput';
-import Select from '@material-ui/core/Select';
-import { FormHelperText } from '@material-ui/core';
-const useStyles = makeStyles((theme) => ({
-    root: {
-        display: 'flex',
-        flexWrap: 'wrap',
-    },
-    formControl: {
-        margin: theme.spacing(1),
-        minWidth: 120,
-    },
-    selectEmpty: {
-        marginTop: theme.spacing(2),
-    },
-}));
-const useOutlinedInputStyles = (props) => makeStyles({
-    root: {
-        cursor: props.cantEdit ? 'default' : 'default',
-        height: props.height,
-        borderRadius: props.borderRadius,
-        backgroundColor: props.backgroundColor,
-        fontSize: props.fontSize,
-        '& $notchedOutline': {
-            borderColor: props.outlineColor,
-            '& legend': {
-                fontSize: 'calc(' + props.fontSize + ' * 0.75)',
-            },
-        },
-        '&:hover $notchedOutline': {
-            borderColor: props.cantEdit
-                ? props.outlineColor
-                : props.focusColor,
-        },
-        '& .Mui-disabled': {
-            cursor: 'default',
-            color: props.color,
-            pointerEvents: 'none',
-        },
-        '& .Mui-error': {
-            color: props.errorColor,
-        },
-        '&.Mui-error .EF-MuiOutlinedInput-notchedOutline': {
-            borderColor: props.outlineColor,
-        },
-        '&.Mui-disabled .EF-MuiOutlinedInput-notchedOutline': {
-            borderColor: props.outlineColor,
-        },
-        '& .EF-MuiSelect-root': {
-            paddingLeft: props.paddingLeft,
-            paddingRight: props.paddingRight,
-        },
-        '&$focused $notchedOutline': {
-            borderColor: props.focusColor,
-        },
-        '& .EF-MuiSelect-icon': {
-            color: props.color?.startsWith('#')
-                ? props.color + '8a'
-                : props.color,
-        },
-        '& .EF-MuiSelect-icon.Mui-disabled': {
-            color: props.outlineColor,
-        },
-        '& .EF-MuiSelect-icon.iconOutlined': {
-            right: 8,
-        },
-        '& .EF-MuiSelect-iconOpen': {
-            transform: props.showIcon ? 'none' : 'rotate(180deg)',
-        },
-        color: props.color,
-    },
-    focused: {},
-    notchedOutline: {},
-});
-const useLabelInputStyles = (props) => makeStyles(() => ({
-    focused: {
-        color: props.focusColor + ' !important',
-    },
-    root: {
-        color: props.color?.startsWith('#')
-            ? props.color + '8a'
-            : props.color,
-        fontWeight: props.fontWeight,
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        maxWidth: 'calc(100% - 45px)',
-        textOverflow: 'ellipsis',
-        marginTop: props.height != '40px' ? '-4px' : '0px',
-        '&.EF-MuiInputLabel-shrink': {
-            marginTop: '0px',
-            maxWidth: 'calc(100% - 5px)',
-        },
-        '& .Mui-error': {
-            color: props.errorColor,
-        },
-        '&.Mui-error': {
-            color: props.errorColor,
-        },
-    },
-}));
-const useHelperTextStyles = (props) => makeStyles(() => ({
-    root: {
-        color: props.helperTextColor,
-        '&.Mui-error': {
-            color: props.errorColor,
-        },
-    },
-}));
-function CustomSelect({ children, value = '', handleUpdate, label, minWidth, helperText, color = '#293241', errorColor = '#cc2936', focusColor = '#3d5a7f', outlineColor = '#0000003b', helperTextColor = '#989898', backgroundColor = '#ffffff', readOnly = false, borderRadius = 10, paddingLeft = 14, paddingRight = 32, cantEdit = false, showIcon = true, containerMargin = '8px', height = '40px', fontSize = '1rem', required, iconComponent, error, ...others }) {
-    const styleProps = {
-        color,
-        height,
-        readOnly,
-        fontSize,
-        cantEdit,
-        errorColor,
-        focusColor,
-        paddingLeft,
-        paddingRight,
-        outlineColor,
-        borderRadius,
-        helperTextColor,
-        backgroundColor,
-        showIcon: showIcon && iconComponent !== undefined,
-    };
-    const classes = useStyles();
-    const outlinedInputClasses = useOutlinedInputStyles(styleProps)();
-    const labelClasses = useLabelInputStyles(styleProps)();
-    const helperTextClasses = useHelperTextStyles(styleProps)();
-    const [open, setOpen] = useState(false);
-    return (_jsxs(FormControl, { variant: "outlined", className: classes.formControl, size: "small", style: minWidth !== undefined
-            ? { minWidth, outlineColor, margin: containerMargin }
-            : {
-                margin: containerMargin,
-            }, fullWidth: true, required: required, error: error, children: [label && _jsx(InputLabel, { classes: labelClasses, children: label }), _jsx(Select, { ...others, value: value, MenuProps: {}, onChange: handleUpdate, ...(showIcon && iconComponent
-                    ? { IconComponent: iconComponent }
-                    : {}), open: open, onFocus: (e) => {
-                    if (!e.relatedTarget?.closest('.EF-MuiPaper-root')) {
-                        setOpen(true);
-                    }
-                }, onClose: () => {
-                    setOpen(false);
-                }, onOpen: () => {
-                    setOpen(true);
-                }, input: _jsx(OutlinedInput, { disabled: cantEdit, name: label, label: label ? label + (required ? ' *' : '') : undefined, classes: outlinedInputClasses }), children: children }), helperText !== undefined && (_jsx(FormHelperText, { classes: helperTextClasses, children: helperText }))] }));
-}
-/**
- * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library
- */
-class RoundedSelect extends React.Component {
-    render() {
-        return _jsx(CustomSelect, { ...this.props });
-    }
-}
-export default RoundedSelect;

package/dist/mjs/Shared/RoundedSelect/RoundedSelect.stories.d.ts

@@ -1,28 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import RoundedSelect from './RoundedSelect';
-declare const meta: {
-    component: typeof RoundedSelect;
-    tags: string[];
-    args: {
-        focusColor: string;
-        helperTextColor: string;
-        outlineColor: string;
-        backgroundColor: string;
-        color: string;
-        readOnly: false;
-        borderRadius: number;
-        fontSize: string;
-        errorColor: string;
-        fontWeight: string;
-        cantEdit: false;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Empty: Story;
-export declare const Default: Story;
-export declare const ValueAndLabel: Story;
-export declare const Full: Story;
-export declare const Error: Story;
-export declare const ErrorColor: Story;
-export declare const DifferentColors: Story;

package/dist/mjs/Shared/RoundedSmartSelect/RoundedSmartSelect.d.ts

@@ -1,63 +0,0 @@
-import React from 'react';
-import { TextFieldProps } from '@material-ui/core';
-interface StyleProps {
-    /** The color of the outline when selected and hovered on */
-    focusColor?: string;
-    /** The color of the outline when it is not selected */
-    outlineColor?: string;
-    /** The color of the background  */
-    backgroundColor?: string;
-    /** The color of the error to display */
-    errorColor?: string;
-    /** If the style should change on hover */
-    cantEdit?: boolean;
-    /** The hight of the container */
-    height?: string;
-    /** The color of the text in the form */
-    color?: string;
-    /** The fontsize of the content */
-    fontSize?: string;
-    /** The borderRadius of the input */
-    borderRadius?: number;
-    /** If input is readOnly */
-    readOnly?: boolean;
-    /** The weight of the font of the value and the placeholder */
-    fontWeight?: number | string;
-    /** The color of the helper text when not error */
-    helperTextColor?: string;
-    /** If custom icon exists and should be displayed */
-    showIcon?: boolean;
-    /** If the selector is completely hidden */
-    hidden?: boolean;
-}
-export interface RoundedSmartSelectProps extends Omit<TextFieldProps, 'color' | 'onFocus'>, StyleProps {
-    /** Currently selected value */
-    value: any;
-    /** The array of options to display */
-    options?: any[];
-    /** If the input is loading */
-    loading?: boolean;
-    /** function called when value changes */
-    handleUpdate?: (value: any) => void;
-    /** Strig to place in the label */
-    label: string;
-    /** The helper Text to display */
-    helperText?: string;
-    /** The margin around the selector */
-    containerMargin?: string;
-    /** The icon to display */
-    icon?: React.ReactNode;
-    /** If the options are searchable */
-    searchable?: boolean;
-    /** If can create new option */
-    creatable?: boolean;
-    /** Function to determine the currently selected option */
-    getOptionSelected?: (option: any, value: any) => boolean;
-    /** Function to determine the current value in string format */
-    getValueString?: (value: any) => string;
-    /** Function called on each value change */
-    changeListener?: (value: any) => void;
-    onFocus?: any;
-}
-export default function RoundedSmartSelect({ options, value, handleUpdate, label, getValueString, color, errorColor, focusColor, helperTextColor, outlineColor, backgroundColor, cantEdit, loading, height, fontSize, required, changeListener, error, getOptionSelected, helperText, readOnly, borderRadius, fontWeight, icon, searchable, containerMargin, showIcon, inputRef, disabled, hidden, creatable, onBlur, name, onFocus, }: RoundedSmartSelectProps): JSX.Element;
-export {};

package/dist/mjs/Shared/RoundedSmartSelect/RoundedSmartSelect.js

@@ -1,197 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Autocomplete, { createFilterOptions, } from '@material-ui/lab/Autocomplete';
-import { makeStyles } from '@material-ui/core/styles';
-import TextField from '@material-ui/core/TextField';
-import { cloneElement } from 'react';
-import { MenuItem, Popper } from '@material-ui/core';
-import RoundedSelect from '../RoundedSelect/RoundedSelect';
-import CircularProgress from '@material-ui/core/CircularProgress';
-const filter = createFilterOptions();
-const useTextfieldStyles = (props) => makeStyles(() => ({
-    root: {
-        opacity: props.hidden ? 0.5 : 1,
-        borderRadius: props.borderRadius,
-        '& input, textarea': {
-            cursor: props.cantEdit || props.hidden ? 'default' : 'text',
-            fontWeight: props.fontWeight,
-            color: props.color,
-            fontSize: props.fontSize,
-            '&::placeholder': {
-                fontSize: props.fontSize,
-            },
-            backgroundColor: props.backgroundColor,
-            borderRadius: props.borderRadius,
-            height: props.height,
-            marginTop: '0px !important',
-            padding: '0px 38px 0px 12px !important',
-        },
-        '& .EF-MuiInputBase-root': {
-            padding: '0px !important',
-            pointerEvents: 'all',
-        },
-        '& label': {
-            marginTop: '-4px',
-            fontSize: props.fontSize,
-            color: props.color?.startsWith('#')
-                ? props.color + '8a'
-                : props.color,
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            maxWidth: 'calc(100% - 22px)',
-        },
-        '& label.EF-MuiInputLabel-shrink': {
-            marginTop: '0px',
-            maxWidth: 'calc(100% - 5px)',
-        },
-        '& input + fieldset': {
-            borderRadius: props.borderRadius,
-        },
-        '& .EF-MuiInput-underline:after': {
-            borderBottomColor: props.outlineColor,
-        },
-        '& .EF-MuiOutlinedInput-root': {
-            borderRadius: props.borderRadius,
-            '&.Mui-focused fieldset': {
-                borderColor: props.focusColor,
-                borderWidth: props.readOnly ? 1 : 2,
-            },
-            '& .EF-MuiOutlinedInput-notchedOutline': {
-                borderColor: props.outlineColor,
-                pointerEvents: 'all',
-            },
-            height: props.height,
-            '& .EF-MuiAutocomplete-input': {
-                height: props.height,
-                marginTop: -10,
-            },
-            '& .EF-MuiAutocomplete-input::placeholder': {
-                color: '#787878',
-                opacity: 1,
-            },
-        },
-        '& .EF-MuiOutlinedInput-root:hover .EF-MuiOutlinedInput-notchedOutline': {
-            borderColor: props.cantEdit || props.hidden
-                ? props.outlineColor
-                : props.focusColor,
-        },
-        '& label.Mui-focused': {
-            color: props.focusColor,
-        },
-        '& .Mui-error': {
-            color: props.errorColor + ' !important',
-        },
-        '& .EF-MuiFormHelperText-root': {
-            color: props.helperTextColor,
-        },
-        '& .EF-MuiFormHelperText-root.Mui-error': {
-            color: props.errorColor + ' !important',
-        },
-        '& .EF-MuiFormLabel-root.Mui-disabled': {
-            color: '#0000008a',
-        },
-        '& .EF-MuiOutlinedInput-notchedOutline': {
-            borderColor: '#0000003b',
-        },
-        '& .EF-MuiAutocomplete-popupIndicator': {
-            padding: 0,
-            color: props.color?.startsWith('#')
-                ? props.color + '8a'
-                : props.color,
-        },
-        '& .EF-MuiAutocomplete-popupIndicatorOpen': {
-            transform: props.showIcon ? 'none' : 'rotate(180deg)',
-        },
-        '& .EF-MuiAutocomplete-clearIndicator': {
-            display: 'none',
-        },
-        '& .EF-MuiAutocomplete-endAdornment': {
-            top: 'calc(50% - 13px)',
-            color: props.color?.startsWith('#')
-                ? props.color + '8a'
-                : props.color,
-        },
-    },
-}));
-export default function RoundedSmartSelect({ options, value = '', handleUpdate, label, getValueString = (value) => value.value, color = '#293241', errorColor = '#cc2936', focusColor = '#3d5a7f', helperTextColor = '#989898', outlineColor = '#b8b8b8', backgroundColor = '#ffffff', cantEdit = false, loading = false, height = '31px', fontSize = '1rem', required, changeListener, error, getOptionSelected, helperText, readOnly = false, borderRadius = 10, fontWeight = '400', icon, searchable = false, containerMargin = '0px', showIcon = true, inputRef, disabled, hidden = false, creatable = false, onBlur, name, onFocus, }) {
-    const props = {
-        color,
-        height,
-        errorColor,
-        focusColor,
-        outlineColor,
-        helperTextColor,
-        backgroundColor,
-        borderRadius,
-        readOnly,
-        fontSize,
-        fontWeight,
-        hidden,
-        cantEdit,
-        showIcon: showIcon && icon !== undefined,
-    };
-    const textFieldClasses = useTextfieldStyles(props)();
-    if (searchable) {
-        return (_jsx(Autocomplete, { onFocus: onFocus, "data-testid": "smart-select", size: "small", fullWidth: true, openOnFocus: true, freeSolo: creatable, disabled: cantEdit || disabled, popupIcon: loading ? (_jsx(CircularProgress, { size: 22, style: { color: '#757575', marginTop: 1 } })) : showIcon && icon ? (icon) : undefined, onOpen: () => { }, loading: loading, loadingText: 'Cargando...', closeIcon: false, options: options ?? [], getOptionLabel: (option) => {
-                // Value selected with enter, right from the input
-                if (typeof option === 'string') {
-                    return option;
-                }
-                else if (option?.inputValue) {
-                    return option.inputValue ?? '';
-                }
-                else {
-                    // Regular option
-                    return option?.label ?? '';
-                }
-            }, getOptionSelected: getOptionSelected, PopperComponent: ({ style, ...props }) => (_jsx(Popper, { ...props, style: { ...style, zIndex: 1305 } })), value: !loading && value ? value : null, onChange: (event, newValue) => {
-                if (creatable) {
-                    if (typeof newValue === 'string') {
-                        changeListener?.(newValue);
-                        handleUpdate?.(newValue);
-                    }
-                    else if (newValue && newValue.inputValue) {
-                        changeListener?.(newValue.inputValue);
-                        handleUpdate?.(newValue.inputValue); // Create a new value from the user input
-                    }
-                    else {
-                        changeListener?.(newValue?.label);
-                        handleUpdate?.(newValue?.label);
-                    }
-                }
-                else {
-                    changeListener?.(newValue);
-                    handleUpdate?.(newValue);
-                }
-            }, filterOptions: (options, params) => {
-                if (value && value.label === params?.inputValue) {
-                    return options;
-                }
-                else {
-                    const filtered = filter(options, params);
-                    // Suggest the creation of a new value
-                    if (creatable && params.inputValue !== '') {
-                        filtered.push({
-                            inputValue: params.inputValue,
-                            label: `Crear "${params.inputValue}"`,
-                        });
-                    }
-                    return filtered;
-                }
-            }, renderOption: (option) => typeof option === 'string' ? option : option.label, renderInput: (params) => (_jsx(TextField, { classes: textFieldClasses, ...params, inputRef: inputRef, onBlur: onBlur, name: name, variant: "outlined", label: label, required: required, error: !hidden && error, helperText: hidden ? undefined : helperText })), noOptionsText: "No hay opciones" }));
-    }
-    else {
-        return (_jsxs(RoundedSelect, { onBlur: onBlur, onFocus: onFocus, "data-testid": "smart-select", inputRef: inputRef, name: name, fullWidth: true, handleUpdate: (event) => {
-                handleUpdate?.(options?.find((option) => getValueString(option) === event.target.value));
-            }, value: loading ? '' : getValueString(value), color: color, errorColor: errorColor, focusColor: focusColor, helperTextColor: helperTextColor, backgroundColor: backgroundColor, outlineColor: outlineColor, cantEdit: cantEdit, disabled: cantEdit || disabled, label: label, required: required, readOnly: readOnly, helperText: hidden ? undefined : helperText, containerMargin: containerMargin, height: height, fontSize: fontSize, error: !hidden && error, iconComponent: loading
-                ? () => (_jsx("div", { style: {
-                        marginTop: 3,
-                        marginRight: 8,
-                    }, children: _jsx(CircularProgress, { size: 22, style: {
-                            color: '#757575',
-                        } }) }))
-                : showIcon && icon
-                    ? (props) => cloneElement(icon, props)
-                    : undefined, showIcon: showIcon, children: [_jsx(MenuItem, { value: '', "data-testid": 'smart-select-empty', style: { whiteSpace: 'normal' }, children: _jsx("em", { children: options ? 'Sin Seleccionar' : 'Cargando...' }) }, 'EMPTY'), options?.map((option) => (_jsx(MenuItem, { value: getValueString(option), style: { whiteSpace: 'normal' }, "data-testid": 'smart-select-' + getValueString(option), children: option.label }, getValueString(option)))), options === undefined && value && !loading && (_jsx(MenuItem, { value: getValueString(value), style: { whiteSpace: 'normal' }, children: value.label ?? '' }, getValueString(value)))] }));
-    }
-}

package/dist/mjs/Shared/RoundedSmartSelect/RoundedSmartSelect.stories.d.ts

@@ -1,36 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import RoundedSmartSelect from './RoundedSmartSelect';
-declare const meta: {
-    component: typeof RoundedSmartSelect;
-    tags: string[];
-    args: {
-        searchable: false;
-        focusColor: string;
-        helperTextColor: string;
-        outlineColor: string;
-        backgroundColor: string;
-        color: string;
-        readOnly: false;
-        borderRadius: number;
-        fontSize: string;
-        errorColor: string;
-        fontWeight: string;
-        cantEdit: false;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Empty: Story;
-export declare const Default: Story;
-export declare const Focused: Story;
-export declare const FocusedSearchable: Story;
-export declare const SearchableWithOptions: Story;
-export declare const SearchableWithSearchAndOptions: Story;
-export declare const Loading: Story;
-export declare const LoadingOpened: Story;
-export declare const SearchableLoadingOpened: Story;
-export declare const WithValueandLabel: Story;
-export declare const Full: Story;
-export declare const Error: Story;
-export declare const ErrorColor: Story;
-export declare const DifferentColors: Story;

package/dist/mjs/Shared/RoundedSmartSelect/RoundedSmartSelect.stories.js

@@ -1,182 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useArgs } from '@storybook/preview-api';
-import RoundedSmartSelect from './RoundedSmartSelect';
-import { within, userEvent, screen } from '@storybook/testing-library';
-const meta = {
-    component: RoundedSmartSelect,
-    tags: ['autodocs'],
-    args: {
-        searchable: false,
-        focusColor: '#3d5a7f',
-        helperTextColor: '#989898',
-        outlineColor: '#0000003b',
-        backgroundColor: '#ffffff',
-        color: '#293241',
-        readOnly: false,
-        borderRadius: 10,
-        fontSize: '1rem',
-        errorColor: '#cc2936',
-        fontWeight: '300',
-        cantEdit: false,
-    },
-};
-export default meta;
-export const Empty = {
-    args: {
-        label: 'Label',
-    },
-};
-export const Default = {
-    args: {
-        label: 'Label',
-        options: [
-            {
-                label: 'Option',
-                value: 'option',
-            },
-        ],
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const selector = canvas.getByTestId('smart-select');
-        await userEvent.click(selector);
-        const option = screen.getByTestId('smart-select-option');
-        await userEvent.click(option);
-    },
-    render: function Component(args) {
-        const [, setArgs] = useArgs();
-        const onValueChange = (value) => {
-            args.handleUpdate?.(value);
-            setArgs({ value });
-        };
-        return (_jsx(RoundedSmartSelect, { ...args, ref: undefined, handleUpdate: onValueChange }));
-    },
-};
-export const Focused = {
-    args: {
-        label: 'Label',
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const selector = canvas.getByTestId('smart-select');
-        await userEvent.click(selector);
-        const option = screen.getByTestId('smart-select-empty');
-        await userEvent.click(option);
-    },
-};
-export const FocusedSearchable = {
-    args: {
-        label: 'Label',
-        searchable: true,
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const selector = canvas.getByTestId('smart-select');
-        await userEvent.click(selector);
-    },
-};
-export const SearchableWithOptions = {
-    args: {
-        label: 'Label',
-        searchable: true,
-        options: [
-            {
-                label: 'Option',
-                value: 'option',
-            },
-        ],
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const selector = canvas.getByTestId('smart-select');
-        await userEvent.click(selector);
-    },
-};
-export const SearchableWithSearchAndOptions = {
-    args: {
-        label: 'Label',
-        searchable: true,
-        value: 'Opt',
-        options: [
-            {
-                label: 'Option',
-                value: 'option',
-            },
-        ],
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const selector = canvas.getByTestId('smart-select');
-        await userEvent.click(selector);
-    },
-};
-export const Loading = {
-    args: {
-        label: 'Label',
-        loading: true,
-    },
-};
-export const LoadingOpened = {
-    args: {
-        label: 'Label',
-        loading: true,
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const selector = canvas.getByTestId('smart-select');
-        await userEvent.click(selector);
-    },
-};
-export const SearchableLoadingOpened = {
-    args: {
-        label: 'Label',
-        searchable: true,
-        loading: true,
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const selector = canvas.getByTestId('smart-select');
-        await userEvent.click(selector);
-    },
-};
-export const WithValueandLabel = {
-    args: {
-        label: 'Label',
-        value: 'Textinput Value',
-    },
-};
-export const Full = {
-    args: {
-        label: 'Label',
-        value: 'Value',
-        helperText: 'Helper text',
-    },
-};
-export const Error = {
-    args: {
-        label: 'Label',
-        value: 'Value',
-        helperText: 'Helper text',
-        error: true,
-    },
-};
-export const ErrorColor = {
-    args: {
-        label: 'Label',
-        value: 'Value',
-        helperText: 'Helper text',
-        error: true,
-        errorColor: 'blue',
-    },
-};
-export const DifferentColors = {
-    args: {
-        label: 'Label',
-        value: 'Value',
-        helperText: 'Helper text',
-        helperTextColor: 'green',
-        outlineColor: 'purple',
-        backgroundColor: 'red',
-        color: 'blue',
-    },
-};