@arquimedes.co/eureka-forms 3.0.31-test → 3.0.32

package/dist/Shared/ErkSelect/ErkSelect.js

@@ -1,141 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useState } from 'react';
-import { FormControl, FormHelperText as MuiFormHelperText, InputLabel as MuiInputLabel, Select as MuiSelect, styled, InputAdornment, } from '@mui/material';
-import ErkMenuItem from '../ErkMenuItem';
-export const StyledSelect = styled(MuiSelect)(({ theme, size, ...props }) => ({
-    borderRadius: 10,
-    opacity: props.disabled ? 0.5 : 1,
-    backgroundColor: theme.palette.stepBackgroundColor.default,
-    minHeight: size === 'small' ? 31 : size === 'medium' ? 40 : undefined,
-    '&.Erk-MuiInputBase-adornedEnd': {
-        paddingRight: 7,
-    },
-    '& .Erk-MuiSelect-select': {
-        fontSize: '1rem',
-        padding: '6px 12px',
-        lineHeight: size === 'small' ? '1.188em' : size === 'medium' ? '1.75em' : undefined,
-        height: size === 'small' ? '1.188em' : size === 'medium' ? '1.75em' : undefined,
-        '&.Erk-MuiInputBase-inputAdornedEnd': {
-            paddingRight: '0px !important',
-        },
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    },
-    '& .Erk-MuiOutlinedInput-notchedOutline': {
-        borderColor: theme.palette.outline.main,
-    },
-    '&:hover:not(.Mui-readOnly) .Erk-MuiOutlinedInput-notchedOutline': {
-        borderColor: props.disabled || props.readOnly ? theme.palette.outline.main : theme.palette.primary.main,
-    },
-    '&.Mui-readOnly': {
-        '& .Erk-MuiSelect-select': {
-            color: theme.palette.text.primary,
-            WebkitTextFillColor: theme.palette.text.primary,
-        },
-        '& .Erk-MuiSelect-icon': {
-            color: theme.palette.text.primary + 'a0',
-        },
-    },
-    '& .Mui-disabled, &.Mui-readOnly': {
-        cursor: 'default',
-    },
-    '&.Erk-MuiInputBase-root.Mui-focused': {
-        '& .Erk-MuiOutlinedInput-notchedOutline': {
-            borderColor: theme.palette.primary.main,
-            borderWidth: 2,
-        },
-    },
-    '& .Erk-MuiInputAdornment-root': {
-        marginLeft: 0,
-        marginRight: size === 'medium' ? 2 : 0,
-        color: theme.palette.text.primary + 'a0',
-        fill: theme.palette.text.primary + 'a0',
-        cursor: props.disabled || props.readOnly ? 'default' : 'pointer',
-    },
-    '& .Erk-MuiSelect-iconOpen': {
-        transform: props.IconComponent ? 'none' : undefined,
-    },
-    '& .Erk-MuiInputBase-input:has(.ErkIcon) ': {
-        paddingLeft: 40,
-        '& .ErkIcon': {
-            left: 12,
-            top: '50%',
-            position: 'absolute',
-            transform: 'translateY(-50%)',
-            fill: theme.palette.primary.main,
-            width: '20px',
-            height: '20px',
-        },
-    },
-}));
-export const StyledInputLabel = styled(MuiInputLabel)(({ theme, size = 'small', ...props }) => ({
-    color: theme.palette.text.primary + '8a',
-    '&.Erk-MuiInputLabel-root.Mui-focused': {
-        color: theme.palette.primary.main,
-    },
-    '&.Erk-MuiFormLabel-root:not(.Erk-MuiInputLabel-shrink)': {
-        transform: `translate(12px, ${size === 'small' ? 5 : 9}px) scale(1)`,
-        maxWidth: 'calc(100% - 40px)',
-    },
-    '&.Mui-error': {
-        color: theme.palette.error.main,
-    },
-    opacity: props.disabled ? 0.5 : 1,
-}));
-export const StyledHelperText = styled(MuiFormHelperText)(({ theme, ...props }) => ({
-    color: theme.palette.helperText.primary,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    opacity: props.disabled ? 0.5 : 1,
-    '&.Mui-error': {
-        color: theme.palette.error.main,
-    },
-}));
-function CustomSelect({ label, error, value, loading, onChange, children, required, inputRef, MenuProps, helperText, IconComponent, size = 'small', labelMargin = 5, multiple = false, readOnly = false, disabled = false, clearable = true, fullWidth = true, clearLabel = 'Sin Seleccionar', ...others }) {
-    const [open, setOpen] = useState(false);
-    const handleChange = useCallback((event) => onChange?.(event.target.value), [onChange]);
-    return (_jsxs(FormControl, { size: size, error: error, variant: "outlined", required: required, fullWidth: fullWidth, style: { marginTop: label ? labelMargin : undefined, maxWidth: '100%' }, children: [label && (_jsx(StyledInputLabel, { disabled: disabled, open: open, size: size === 'small' ? 'small' : undefined, children: label })), _jsxs(StyledSelect, { ...others, size: size, autoWidth: false, open: others.open ?? open, label: label, inputRef: inputRef, readOnly: readOnly, disabled: disabled, multiple: multiple, onChange: handleChange, value: value ?? (multiple ? [] : ''), IconComponent: IconComponent ? () => _jsx(_Fragment, {}) : undefined, endAdornment: IconComponent ? (_jsx(InputAdornment, { position: "end", onClick: (e) => {
-                        e.stopPropagation();
-                        if (!readOnly && !disabled) {
-                            if (others.open !== undefined) {
-                                if (others.open)
-                                    others.onClose?.(e);
-                                else
-                                    others.onOpen?.(e);
-                            }
-                            else
-                                setOpen((open) => !open);
-                        }
-                    }, children: _jsx(IconComponent, { size: size === 'small' ? 22 : 26 }) })) : undefined, onFocus: (e) => {
-                    if (!e.relatedTarget?.closest('.Erk-MuiPaper-root')) {
-                        setOpen(true);
-                    }
-                    others.onFocus?.(e);
-                }, MenuProps: {
-                    disablePortal: true,
-                    sx: (theme) => ({
-                        '& .Erk-MuiMenuItem-root:has(.ErkIcon) ': {
-                            gap: '10px',
-                            padding: '6px 12px',
-                            display: 'flex',
-                            maxWidth: '100%',
-                            alignItems: 'center',
-                            '& .ErkIcon': {
-                                width: '20px',
-                                fill: theme.palette.primary.main,
-                            },
-                        },
-                    }),
-                    ...MenuProps,
-                }, onOpen: others.onOpen ?? (() => setOpen(true)), onClose: others.onClose ?? (() => setOpen(false)), inputProps: { disabled: readOnly || disabled }, children: [((clearable && !multiple) || loading) && (_jsx(ErkMenuItem, { value: '', "data-testid": 'smart-select-empty', style: { whiteSpace: 'normal' }, children: _jsx("em", { children: loading ? 'Cargando...' : clearLabel }) }, 'EMPTY')), children] }), helperText && _jsx(StyledHelperText, { disabled: disabled, children: helperText })] }));
-}
-/**
- * Generic textfield with apps designs. Is class due to the use in the react-hook-forms library
- */
-class ErkSelect extends React.Component {
-    render() {
-        return _jsx(CustomSelect, { ...this.props });
-    }
-}
-export default ErkSelect;

package/dist/Shared/ErkSelect/ErkSelect.stories.d.ts

@@ -1,21 +0,0 @@
-import type { StoryObj } from '@storybook/react-vite';
-import ErkSelect from './ErkSelect';
-declare const meta: {
-    component: typeof ErkSelect;
-    tags: string[];
-    args: {
-        readOnly: false;
-        MenuProps: {
-            disablePortal: false;
-        };
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const Empty: 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/Shared/ErkSelect/ErkSelect.stories.js

@@ -1,87 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ErkSelect from './ErkSelect';
-import { MenuItem } from '@mui/material';
-import { useArgs } from 'storybook/internal/preview-api';
-const meta = {
-    component: ErkSelect,
-    tags: ['autodocs'],
-    args: {
-        readOnly: false,
-        MenuProps: {
-            disablePortal: false,
-        },
-    },
-};
-export default meta;
-export const Default = {
-    args: {
-        label: 'Label',
-    },
-    render: function Component(args) {
-        const [, setArgs] = useArgs();
-        const onValueChange = (value) => {
-            args.onChange?.(value);
-            setArgs({ value });
-        };
-        return (_jsxs(ErkSelect, { ...args, onChange: onValueChange, children: [_jsx(MenuItem, { value: 'option1', children: "Option 1" }), _jsx(MenuItem, { value: 'option2', children: "Option 2" }), _jsx(MenuItem, { value: 'option3', children: "Option 3" })] }));
-    },
-};
-export const Empty = {
-    args: {},
-    render: function Component(args) {
-        return _jsx(ErkSelect, { ...args });
-    },
-};
-export const ValueAndLabel = {
-    args: {
-        label: 'Label',
-        value: 'option',
-    },
-    render: function Component({ inputRef, ...args }) {
-        const [, setArgs] = useArgs();
-        const onValueChange = (value) => {
-            args.onChange?.(value);
-            setArgs({ value });
-        };
-        return (_jsx(ErkSelect, { ...args, onChange: onValueChange, inputRef: inputRef, children: _jsx(MenuItem, { value: 'option', style: { whiteSpace: 'normal' }, children: "Option" }) }));
-    },
-};
-export const Full = {
-    args: {
-        label: 'Label',
-        helperText: 'Helper text',
-    },
-    render: function Component(args) {
-        return (_jsxs(ErkSelect, { ...args, children: [_jsx(MenuItem, { value: 'option1', children: "Option 1" }), _jsx(MenuItem, { value: 'option2', children: "Option 2" }), _jsx(MenuItem, { value: 'option3', children: "Option 3" })] }));
-    },
-};
-export const Error = {
-    args: {
-        label: 'Label',
-        helperText: 'Helper text',
-        error: true,
-    },
-    render: function Component(args) {
-        return (_jsxs(ErkSelect, { ...args, children: [_jsx(MenuItem, { value: 'option1', children: "Option 1" }), _jsx(MenuItem, { value: 'option2', children: "Option 2" }), _jsx(MenuItem, { value: 'option3', children: "Option 3" })] }));
-    },
-};
-export const ErrorColor = {
-    args: {
-        label: 'Label',
-        helperText: 'Helper text',
-        error: true,
-    },
-    render: function Component(args) {
-        return (_jsxs(ErkSelect, { ...args, children: [_jsx(MenuItem, { value: 'option1', children: "Option 1" }), _jsx(MenuItem, { value: 'option2', children: "Option 2" }), _jsx(MenuItem, { value: 'option3', children: "Option 3" })] }));
-    },
-};
-export const DifferentColors = {
-    args: {
-        label: 'Label',
-        value: 'option',
-        helperText: 'Helper text',
-    },
-    render: function Component({ inputRef, ...args }) {
-        return (_jsx(ErkSelect, { ...args, inputRef: inputRef, children: _jsx(MenuItem, { value: 'option', style: { whiteSpace: 'normal' }, children: "Option" }) }));
-    },
-};

package/dist/Shared/ErkSmartSelect/ErkSmartSelect.d.ts

@@ -1,28 +0,0 @@
-import React from 'react';
-import { SelectProps as MuiSelectProps } from '@mui/material';
-export interface ErkSmartSelectProps extends Omit<MuiSelectProps, 'ref' | 'onInvalid'> {
-    /** 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 */
-    onChange?: (value: any) => void;
-    /** Strig to place in the label */
-    label: string;
-    /** The helper Text to display */
-    helperText?: string;
-    /** The icon to display */
-    IconComponent?: React.ElementType;
-    /** If the options are searchable */
-    searchable?: 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;
-    /** If input is readOnly */
-    readOnly?: boolean;
-    onFocus?: React.FocusEventHandler;
-}
-export default function ErkSmartSelect({ options, value, onChange, label, getValueString, loading, getOptionSelected, IconComponent, size, disabled, readOnly, searchable, inputRef, ...others }: ErkSmartSelectProps): JSX.Element;

package/dist/Shared/ErkSmartSelect/ErkSmartSelect.js

@@ -1,54 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createFilterOptions, CircularProgress, Autocomplete as MuiAutocomplete, styled, } from '@mui/material';
-import ErkSelect from '../ErkSelect/ErkSelect';
-import { StyledTextField } from '../ErkTextField/ErkTextField';
-import ErkMenuItem from '../ErkMenuItem';
-const filter = createFilterOptions();
-const StyledAutoComplete = styled(MuiAutocomplete)(({ theme, readOnly, ...props }) => ({
-    '& .Erk-MuiInputBase-root': {
-        cursor: props.disabled || readOnly ? 'default' : 'text',
-    },
-    '& .Erk-MuiInputBase-input': {
-        paddingRight: 24,
-    },
-    '& .Erk-MuiAutocomplete-endAdornment': {
-        marginLeft: 0,
-        marginRight: 9,
-        cursor: 'inherit',
-        color: theme.palette.text.primary + 'a0',
-        '& .Erk-MuiButtonBase-root': {
-            padding: 0,
-            color: readOnly ? theme.palette.text.primary + 'a0' : undefined,
-        },
-    },
-    '& .Erk-MuiAutocomplete-popupIndicatorOpen': {
-        transform: props.popupIcon ? 'none' : undefined,
-    },
-}));
-export default function ErkSmartSelect({ options, value = '', onChange, label, getValueString = (value) => value?.value, loading = false, getOptionSelected, IconComponent, size = 'small', disabled = false, readOnly = false, searchable = false, inputRef, ...others }) {
-    if (searchable) {
-        return (_jsx(StyledAutoComplete, { fullWidth: true, openOnFocus: true, size: size, loading: loading, disabled: disabled || readOnly, readOnly: readOnly, options: options ?? [], loadingText: "Cargando...", onFocus: others.onFocus, "data-testid": "smart-select", noOptionsText: "No hay opciones", value: !loading && value ? value : null, onChange: (_event, newValue) => onChange?.(newValue), popupIcon: loading ? _jsx(CircularProgress, { size: 22 }) : IconComponent ? _jsx(IconComponent, {}) : undefined, filterOptions: (options, params) => {
-                if (value && value.label === params?.inputValue) {
-                    return options;
-                }
-                else {
-                    return filter(options, params);
-                }
-            }, renderOption: ({ key, ...props }, option) => (_jsx(ErkMenuItem, { ...props, children: option.label }, key)), getOptionKey: (option) => getValueString(option), 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 ?? '';
-                }
-            }, slotProps: { popper: { sx: { zIndex: 1305 } } }, renderInput: (params) => (_jsx(StyledTextField, { ...params, size: size, label: label, labelMargin: 0, name: others.name, readOnly: readOnly, disabled: disabled, inputRef: inputRef, error: others.error, onBlur: others.onBlur, required: others.required, helperText: others.helperText })) }));
-    }
-    else {
-        return (_jsxs(ErkSelect, { ...others, labelMargin: 0, disabled: disabled, readOnly: readOnly, inputRef: inputRef, onChange: (value) => onChange?.(options?.find((option) => getValueString(option) === value)), value: loading ? '' : getValueString(value), label: label, IconComponent: loading ? () => _jsx(CircularProgress, { size: 22 }) : IconComponent, children: [options?.map((option) => (_jsx(ErkMenuItem, { value: getValueString(option), "data-testid": 'smart-select-' + getValueString(option), children: option.label }, getValueString(option)))), options === undefined && value && !loading && (_jsx(ErkMenuItem, { value: getValueString(value), children: value.label ?? '' }, getValueString(value)))] }));
-    }
-}

package/dist/Shared/ErkSmartSelect/ErkSmartSelect.stories.js

@@ -1,159 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import ErkSmartSelect from './ErkSmartSelect';
-import { useArgs } from 'storybook/internal/preview-api';
-const meta = {
-    component: ErkSmartSelect,
-    tags: ['autodocs'],
-    args: {
-        searchable: false,
-        readOnly: false,
-    },
-};
-export default meta;
-export const Empty = {
-    args: {
-        label: 'Label',
-    },
-};
-export const Default = {
-    args: {
-        label: 'Label',
-        options: [
-            {
-                label: 'Option',
-                value: 'option',
-            },
-        ],
-    },
-    play: async ({ canvas, userEvent }) => {
-        const selector = canvas.getByTestId('smart-select');
-        await userEvent.click(selector);
-        const option = canvas.getByTestId('smart-select-option');
-        await userEvent.click(option);
-    },
-    render: function Component(args) {
-        const [, setArgs] = useArgs();
-        const onValueChange = (value) => {
-            args.onChange?.(value);
-            setArgs({ value });
-        };
-        return _jsx(ErkSmartSelect, { ...args, onChange: onValueChange });
-    },
-};
-export const Focused = {
-    args: {
-        label: 'Label',
-    },
-    play: async ({ canvas, userEvent }) => {
-        const selector = canvas.getByTestId('smart-select');
-        await userEvent.click(selector);
-        const option = canvas.getByTestId('smart-select-empty');
-        await userEvent.click(option);
-    },
-};
-export const FocusedSearchable = {
-    args: {
-        label: 'Label',
-        searchable: true,
-    },
-    play: async ({ canvas, userEvent }) => {
-        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 ({ canvas, userEvent }) => {
-        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 ({ canvas, userEvent }) => {
-        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 ({ canvas, userEvent }) => {
-        const selector = canvas.getByTestId('smart-select');
-        await userEvent.click(selector);
-    },
-};
-export const SearchableLoadingOpened = {
-    args: {
-        label: 'Label',
-        searchable: true,
-        loading: true,
-    },
-    play: async ({ canvas, userEvent }) => {
-        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,
-    },
-};
-export const DifferentColors = {
-    args: {
-        label: 'Label',
-        value: 'Value',
-        helperText: 'Helper text',
-    },
-};

package/dist/Shared/ErkTextField/ErkTextField.d.ts

@@ -1,34 +0,0 @@
-import { OutlinedTextFieldProps as MuiTextFieldProps } from '@mui/material';
-import React, { CSSProperties } from 'react';
-interface StyleProps extends Pick<CSSProperties, 'textAlign' | 'fontSize' | 'padding' | 'fontWeight' | 'backgroundColor' | 'borderRadius'> {
-    readOnly?: boolean;
-}
-declare module '@mui/material/TextField' {
-    interface TextFieldPropsSizeOverrides {
-        large: true;
-    }
-}
-export declare const StyledTextField: import("@emotion/styled").StyledComponent<{
-    variant?: import("@mui/material").TextFieldVariants | undefined;
-} & Omit<import("@mui/material").FilledTextFieldProps | MuiTextFieldProps | import("@mui/material").StandardTextFieldProps, "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & Omit<ErkTextFieldProps, "onChange"> & StyleProps, {}, {}>;
-export type ErkTextFieldSlotProps = Omit<ErkTextFieldProps, 'value' | 'onChange' | 'fullWidth'>;
-export interface ErkTextFieldProps extends Omit<MuiTextFieldProps, 'variant' | 'onChange' | 'ref'>, StyleProps {
-    /** The value of the textfield */
-    value?: string | number;
-    onChange?: (value: string) => void;
-    /** The icon to display */
-    IconComponent?: React.ElementType | React.ReactNode;
-    /** The max length of the string */
-    maxLength?: number;
-    /** Show red border on error */
-    errorBorder?: boolean;
-    /** labelMargin */
-    labelMargin?: number;
-}
-/**
- * Generic textfield with apps designs. Is class due to the use in the react-hook-forms library
- */
-declare class ErkTextField extends React.Component<ErkTextFieldProps> {
-    render(): JSX.Element;
-}
-export default ErkTextField;

package/dist/Shared/ErkTextField/ErkTextField.js

@@ -1,146 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled, TextField as MuiTextField, useTheme, } from '@mui/material';
-import React, { useCallback, useMemo } from 'react';
-export const StyledTextField = styled(MuiTextField, {
-    shouldForwardProp: (propName) => !['textAlign', 'errorBorder', 'labelMargin', 'minWidth', 'borderRadius'].includes(propName),
-})(({ theme, label, size, error, textAlign, errorBorder, labelMargin = 5, borderRadius = 10, fontSize = size === 'large' ? '1.5rem' : '1rem', padding = '6px 12px', fontWeight = 400, backgroundColor = theme.palette.stepBackgroundColor.default, ...props }) => ({
-    borderRadius,
-    opacity: props.disabled ? 0.5 : 1,
-    marginTop: label ? labelMargin : undefined,
-    minHeight: size === 'small' ? 31 : size === 'medium' ? 40 : undefined,
-    '& .Erk-MuiInputBase-root': {
-        borderRadius,
-        backgroundColor,
-    },
-    '& input, textarea': {
-        fontSize,
-        textAlign,
-        padding,
-        fontWeight,
-        borderRadius,
-        backgroundColor,
-        color: theme.palette.text.primary,
-        cursor: props.disabled || props.readOnly ? 'default' : 'text',
-        lineHeight: size === 'small' ? '1.188em' : size === 'medium' ? '1.75em' : undefined,
-        height: size === 'small' ? '1.188em' : size === 'medium' ? '1.75em' : undefined,
-        '&.Mui-readOnly': {
-            color: theme.palette.text.primary,
-            WebkitTextFillColor: theme.palette.text.primary,
-        },
-    },
-    '& .Erk-MuiFormLabel-root:not(.Erk-MuiInputLabel-shrink)': {
-        fontSize,
-        transform: `translate(12px, ${size === 'small' ? 5 : size === 'medium' ? 9 : 7}px) scale(1)`,
-    },
-    '& .Erk-MuiInputLabel-shrink': {
-        color: error && errorBorder ? theme.palette.error.main : undefined,
-    },
-    '& label': {
-        color: theme.palette.text.primary + '8a',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    },
-    '& .Erk-MuiOutlinedInput-root': {
-        '&.Mui-focused fieldset': {
-            borderColor: error && errorBorder ? theme.palette.error.main : theme.palette.primary.main,
-            borderWidth: 2,
-        },
-        '& .Erk-MuiOutlinedInput-notchedOutline': {
-            borderRadius,
-            borderColor: error && errorBorder ? theme.palette.error.main : theme.palette.outline.main,
-            '& legend': {
-                fontSize: '0.75rem',
-            },
-        },
-    },
-    '& .Erk-MuiOutlinedInput-root:hover:not(.Mui-readOnly) .Erk-MuiOutlinedInput-notchedOutline': {
-        borderColor: props.disabled || props.readOnly
-            ? theme.palette.outline.main
-            : error && errorBorder
-                ? theme.palette.error.main
-                : theme.palette.primary.main,
-    },
-    '& label.Mui-focused': {
-        color: theme.palette.primary.main,
-    },
-    '& .Mui-error': {
-        color: theme.palette.error.main,
-        '& fieldset': {
-            borderWidth: error && errorBorder ? 2 : undefined,
-        },
-    },
-    '& .Erk-MuiInputBase-adornedEnd': {
-        paddingRight: '7px',
-    },
-    '& .Erk-MuiFormHelperText-root': {
-        color: theme.palette.helperText.primary,
-        position: 'relative',
-        marginRight: props.maxLength ? 40 : 14,
-        overflow: 'hidden',
-        minHeight: 20,
-        textOverflow: 'ellipsis',
-    },
-    '& .Erk-MuiFormHelperText-root.Mui-error': {
-        color: theme.palette.error.main,
-    },
-    '& .Erk-MuiInputBase-multiline': {
-        padding: 0,
-    },
-    '& .Erk-MuiInputAdornment-root': {
-        marginLeft: 0,
-        marginRight: size === 'medium' ? 2 : 0,
-        fill: theme.palette.text.primary + 'a0',
-        color: theme.palette.text.primary + 'a0',
-    },
-}));
-function CustomTextfield({ onChange, value = '', IconComponent, size = 'small', fullWidth = true, ...others }) {
-    const { readOnly, disabled, maxLength } = others;
-    const { palette } = useTheme();
-    const handleChange = useCallback((event) => {
-        onChange?.(event.target.value);
-    }, [onChange]);
-    const inputProps = useMemo(() => ({
-        ...others.inputProps,
-        spellCheck: true,
-        endAdornment: IconComponent,
-        readOnly: !!readOnly,
-        disabled: !!readOnly || !!disabled,
-    }), [others.inputProps, IconComponent, readOnly, disabled]);
-    const length = maxLength ? value.toString()?.length : null;
-    if (maxLength) {
-        inputProps.inputProps = { maxLength };
-    }
-    const helperText = others.helperText ?? (others.error === false && !others.readOnly ? ' ' : undefined);
-    return (_jsxs("div", { style: {
-            position: 'relative',
-            width: fullWidth ? '100%' : 'fit-content',
-            maxWidth: '100%',
-        }, children: [_jsx(StyledTextField, { ...others, size: size, value: value, variant: "outlined", fullWidth: fullWidth, helperText: helperText, onChange: handleChange, slotProps: { input: inputProps } }), length !== null && (_jsxs("div", { style: helperText
-                    ? {
-                        position: 'absolute',
-                        bottom: '3px',
-                        right: '8px',
-                        minHeight: '20px',
-                        fontSize: '12px',
-                        color: palette.helperText.primary,
-                    }
-                    : {
-                        fontSize: '12px',
-                        color: palette.helperText.primary,
-                        textAlign: 'right',
-                        minHeight: '20px',
-                        paddingRight: '8px',
-                        paddingTop: '2px',
-                        paddingBottom: '2px',
-                    }, children: [length, "/", maxLength] }))] }));
-}
-/**
- * Generic textfield with apps designs. Is class due to the use in the react-hook-forms library
- */
-class ErkTextField extends React.Component {
-    render() {
-        return _jsx(CustomTextfield, { ...this.props });
-    }
-}
-export default ErkTextField;