@arquimedes.co/eureka-forms 3.0.31 → 3.0.32

package/dist/Shared/ErkDatePickerRange/ErkDatePickerRange.stories.js

@@ -1,274 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ErkDatePickerRange from './ErkDatePickerRange';
-import { useArgs } from 'storybook/internal/preview-api';
-import { useState } from 'react';
-const meta = {
-    component: ErkDatePickerRange,
-    tags: ['autodocs'],
-    args: {
-        readOnly: false,
-    },
-    parameters: {
-        dateRange: [new Date('2021-07-01'), new Date('2021-07-21')],
-    },
-};
-export default meta;
-export const Empty = {
-    args: {
-        label: 'Seleccionar Rango',
-        value: [null, null],
-    },
-};
-export const Default = {
-    args: {
-        label: 'Rango de Fechas',
-        value: [new Date('2021-07-01'), new Date('2021-07-21')],
-    },
-    render: function Component(args) {
-        const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
-    },
-};
-export const Interactive = {
-    args: {
-        label: 'Rango Interactivo',
-        value: [null, null],
-        helperText: 'Seleccione un rango de fechas',
-    },
-    render: function Component(args) {
-        const [value, setValue] = useState(args.value ?? [null, null]);
-        const handleChange = (newValue) => {
-            setValue(newValue);
-            args.onChange?.(newValue);
-        };
-        return (_jsxs("div", { children: [_jsx(ErkDatePickerRange, { ...args, value: value, onChange: handleChange }), _jsxs("div", { style: { marginTop: '20px', fontSize: '14px' }, children: [_jsx("strong", { children: "Valor seleccionado:" }), _jsxs("div", { children: ["Inicio: ", value[0]?.toLocaleDateString('es-ES') ?? 'No seleccionado'] }), _jsxs("div", { children: ["Fin: ", value[1]?.toLocaleDateString('es-ES') ?? 'No seleccionado'] })] })] }));
-    },
-};
-export const ValueAndLabel = {
-    args: {
-        label: 'Rango de Fechas',
-        value: [null, null],
-    },
-    render: function Component(args) {
-        const [, setArgs] = useArgs();
-        const onValueChange = (value) => {
-            args.onChange?.(value);
-            setArgs({ value });
-        };
-        return _jsx(ErkDatePickerRange, { ...args, onChange: onValueChange });
-    },
-};
-export const Full = {
-    args: {
-        label: 'Rango de Fechas',
-        value: [null, null],
-        helperText: 'Seleccione un rango de fechas',
-    },
-    render: function Component(args) {
-        const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
-    },
-};
-export const Error = {
-    args: {
-        label: 'Rango de Fechas',
-        value: [null, null],
-        helperText: 'Error: Rango de fechas inválido',
-        error: true,
-    },
-    render: function Component(args) {
-        const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
-    },
-};
-export const Menu = {
-    args: {
-        label: 'Rango de Fechas',
-        value: [null, null],
-    },
-    render: function Component(args) {
-        const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
-    },
-    play: async ({ canvas, userEvent }) => {
-        const selector = canvas.getByTestId('date-picker');
-        await userEvent.click(selector);
-    },
-};
-export const WithSelectedRange = {
-    args: {
-        label: 'Vacaciones',
-        value: [new Date('2024-12-20'), new Date('2025-01-05')],
-        helperText: 'Período de vacaciones',
-    },
-    render: function Component(args) {
-        const [, setArgs] = useArgs();
-        const onValueChange = (value) => {
-            args.onChange?.(value);
-            setArgs({ value });
-        };
-        return _jsx(ErkDatePickerRange, { ...args, onChange: onValueChange });
-    },
-};
-export const Disabled = {
-    args: {
-        label: 'Rango de Fechas',
-        value: [new Date('2021-07-01'), new Date('2021-07-21')],
-        disabled: true,
-        helperText: 'Campo deshabilitado',
-    },
-    render: function Component(args) {
-        const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
-    },
-};
-export const ReadOnly = {
-    args: {
-        label: 'Rango de Fechas',
-        value: [new Date('2021-07-01'), new Date('2021-07-21')],
-        readOnly: true,
-        helperText: 'Campo de solo lectura',
-    },
-    render: function Component(args) {
-        const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
-    },
-};
-export const WithError = {
-    args: {
-        label: 'Rango de Fechas',
-        value: [new Date('2021-07-21'), new Date('2021-07-01')],
-        helperText: 'La fecha de inicio debe ser anterior a la fecha de fin',
-        error: true,
-    },
-    render: function Component(args) {
-        const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
-    },
-};
-export const Required = {
-    args: {
-        label: 'Rango de Fechas',
-        value: [null, null],
-        helperText: 'Este campo es obligatorio',
-        required: true,
-    },
-    render: function Component(args) {
-        const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
-    },
-};
-export const SmallSize = {
-    args: {
-        label: 'Rango Pequeño',
-        value: [new Date('2021-07-01'), new Date('2021-07-21')],
-        size: 'small',
-        helperText: 'Tamaño pequeño',
-    },
-    render: function Component(args) {
-        const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
-    },
-};
-export const MediumSize = {
-    args: {
-        label: 'Rango Mediano',
-        value: [new Date('2021-07-01'), new Date('2021-07-21')],
-        size: 'medium',
-        helperText: 'Tamaño mediano',
-    },
-    render: function Component(args) {
-        const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
-    },
-};
-export const CurrentMonth = {
-    args: {
-        label: 'Mes Actual',
-        value: [new Date(2025, 10, 1), new Date(2025, 10, 30)],
-        helperText: 'Noviembre 2025',
-    },
-    render: function Component(args) {
-        const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
-    },
-};
-export const LastWeek = {
-    args: {
-        label: 'Última Semana',
-        value: [new Date(new Date().setDate(new Date().getDate() - 7)), new Date()],
-        helperText: 'Últimos 7 días',
-    },
-    render: function Component(args) {
-        const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
-    },
-};
-export const NextMonth = {
-    args: {
-        label: 'Próximo Mes',
-        value: [
-            new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1),
-            new Date(new Date().getFullYear(), new Date().getMonth() + 2, 0),
-        ],
-        helperText: 'Planificación del próximo mes',
-    },
-    render: function Component(args) {
-        const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
-    },
-};
-export const WithMinMaxDates = {
-    args: {
-        label: 'Reserva de Hotel',
-        value: [null, null],
-        helperText: 'Seleccione fechas entre hoy y 3 meses',
-        minDate: new Date(),
-        maxDate: new Date(new Date().setMonth(new Date().getMonth() + 3)),
-    },
-    render: function Component(args) {
-        const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
-    },
-};
-export const YearRange = {
-    args: {
-        label: 'Período Fiscal',
-        value: [new Date('2025-01-01'), new Date('2025-12-31')],
-        helperText: 'Año fiscal 2025',
-    },
-    render: function Component(args) {
-        const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
-    },
-};
-export const QuarterRange = {
-    args: {
-        label: 'Trimestre Q1 2025',
-        value: [new Date('2025-01-01'), new Date('2025-03-31')],
-        helperText: 'Primer trimestre del año',
-    },
-    render: function Component(args) {
-        const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
-    },
-};
-export const EventDuration = {
-    args: {
-        label: 'Duración del Evento',
-        value: [new Date('2025-06-15'), new Date('2025-06-18')],
-        helperText: 'Conferencia anual (4 días)',
-    },
-    render: function Component(args) {
-        const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
-    },
-};
-export const MultipleStates = {
-    render: function Component() {
-        const [range1, setRange1] = useState([null, null]);
-        const [range2, setRange2] = useState([new Date('2025-01-01'), new Date('2025-01-31')]);
-        const [range3, setRange3] = useState([null, null]);
-        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '20px' }, children: [_jsx(ErkDatePickerRange, { label: "Fecha de Inicio del Proyecto", value: range1, onChange: setRange1, helperText: "Seleccione el per\u00EDodo del proyecto" }), _jsx(ErkDatePickerRange, { label: "Per\u00EDodo de Pruebas", value: range2, onChange: setRange2, helperText: "Enero 2025" }), _jsx(ErkDatePickerRange, { label: "Fecha de Entrega", value: range3, onChange: setRange3, error: range3[0] === null, helperText: range3[0] === null ? 'Este campo es obligatorio' : 'Fecha confirmada', required: true })] }));
-    },
-};

package/dist/Shared/ErkMenuItem.d.ts

@@ -1,4 +0,0 @@
-declare const Styled: import("@emotion/styled").StyledComponent<import("@mui/material").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-    ref?: ((instance: HTMLLIElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "children" | "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters" | "divider" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export default Styled;

package/dist/Shared/ErkMenuItem.js

@@ -1,18 +0,0 @@
-import { MenuItem, styled } from '@mui/material';
-const Styled = styled(MenuItem)(({ theme }) => ({
-    padding: '6px 12px',
-    whiteSpace: 'normal',
-    '& .Erk-MuiMenuItem-root:has(.ErkIcon) ': {
-        paddingLeft: '40px',
-        '& .ErkIcon': {
-            left: 12,
-            top: '50%',
-            position: 'absolute',
-            transform: 'translateY(-50%)',
-            fill: theme.palette.primary.main,
-            width: '20px',
-            height: '20px',
-        },
-    },
-}));
-export default Styled;

package/dist/Shared/ErkPhoneInput/EkrPhoneInput.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import { TextFieldProps as MuiTextFieldProps } from '@mui/material';
-import { ErkTextFieldProps } from '../ErkTextField/ErkTextField';
-export interface ErkPhoneInputProps extends Omit<ErkTextFieldProps, 'onChange' | 'ref'> {
-    /** The value of the phoneinput */
-    value?: string;
-    onChange?: (value: string) => void;
-    inputRef?: any;
-    readOnly?: boolean;
-}
-/**
- * Generic phoneinput with apps designs. Is class due to the use in the react-hook-forms library
- */
-declare class ErkPhoneInput extends React.Component<ErkPhoneInputProps & Omit<MuiTextFieldProps, 'onChange'>> {
-    render(): JSX.Element;
-}
-export default ErkPhoneInput;

package/dist/Shared/ErkPhoneInput/EkrPhoneInput.js

@@ -1,96 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo } from 'react';
-import parse from 'libphonenumber-js/max';
-import { defaultCountries, FlagImage, parseCountry, usePhoneInput } from 'react-international-phone';
-import isoCountries from 'i18n-iso-countries';
-import es from 'i18n-iso-countries/langs/es.json';
-import { InputAdornment, Select, styled } from '@mui/material';
-import { MenuItem } from '@mui/material';
-import { StyledTextField } from '../ErkTextField/ErkTextField';
-import { useAppSelector } from '../../hooks';
-isoCountries.registerLocale(es);
-const StyledSelect = styled(Select)(() => ({
-    padding: 0,
-    input: {
-        padding: 0,
-    },
-    '& .Erk-MuiSelect-select': {
-        height: '20px',
-    },
-    '& .Erk-MuiSelect-select.Erk-MuiInputBase-inputSizeSmall': {
-        paddingBottom: 0,
-        borderBottom: 'none',
-    },
-    backgroundColor: 'transparent',
-    '& input': {
-        padding: 0,
-        margin: 0,
-    },
-    '&.Erk-MuiInputBase-root::before': {
-        borderBottom: 'none !important',
-    },
-    '&.Erk-MuiInput-underline::after': {
-        borderBottom: 'none',
-    },
-    '&.Mui-readOnly': {
-        '& .Erk-MuiSelect-select': {
-            paddingRight: 5,
-        },
-        '& .Erk-MuiSelect-icon': {
-            display: 'none',
-        },
-    },
-}));
-function CustomPhoneInput({ value, onChange, inputRef, IconComponent, size = 'small', readOnly = false, disabled = false, ...others }) {
-    const defaultCountry = useAppSelector((state) => state.global.countryCode);
-    const { inputValue, handlePhoneValueChange, inputRef: phoneRef, country, setCountry, } = usePhoneInput({
-        value: '+' + value,
-        inputRef,
-        defaultCountry: (defaultCountry ?? 'CO').toLowerCase(),
-        disableDialCodePrefill: true,
-        disableDialCodeAndPrefix: true,
-        onChange: (data) => onChange?.(data.phone.replace('+', '')),
-    });
-    const countries = useMemo(() => defaultCountries
-        .map((c) => {
-        const country = parseCountry(c);
-        return {
-            country,
-            name: isoCountries.getName(country.iso2.toUpperCase(), 'es') ?? country.name,
-        };
-    })
-        .sort((a, b) => a.name.localeCompare(b.name)), []);
-    return (_jsx("div", { style: { position: 'relative', width: '100%', maxWidth: '100%' }, children: _jsx(StyledTextField, { ...others, value: inputValue, readOnly: readOnly, disabled: disabled, fullWidth: true, size: size, variant: "outlined", onChange: handlePhoneValueChange, type: "tel", padding: "6px 12px 6px 6px", autoComplete: "tel", inputRef: phoneRef, onPaste: (e) => {
-                const value = e.clipboardData.getData('Text');
-                if (!value.startsWith('+')) {
-                    const phone = parse('+' + value);
-                    if (phone?.isValid()) {
-                        e.preventDefault();
-                        if (phone.country)
-                            setCountry(phone.country.toLowerCase());
-                        onChange?.(phone.number);
-                    }
-                }
-            }, slotProps: {
-                input: {
-                    readOnly,
-                    disabled: readOnly || disabled,
-                    startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(StyledSelect, { size: 'small', variant: "standard", readOnly: readOnly, value: country.iso2, inputProps: { readOnly, disabled: readOnly || disabled }, onChange: (e) => setCountry(e.target.value), renderValue: (value) => (_jsx(FlagImage, { iso2: value, style: { display: 'flex' }, width: 20 })), children: countries.map(({ country, name }) => {
-                                return (_jsxs(MenuItem, { value: country.iso2, children: [_jsx(FlagImage, { iso2: country.iso2, size: 20 }), _jsx("span", { style: {
-                                                marginLeft: '8px',
-                                                marginRight: '8px',
-                                            }, children: name }), _jsxs("span", { style: { color: 'grey' }, children: ["+", country.dialCode] })] }, country.iso2));
-                            }) }) })),
-                    endAdornment: IconComponent,
-                },
-            } }) }));
-}
-/**
- * Generic phoneinput with apps designs. Is class due to the use in the react-hook-forms library
- */
-class ErkPhoneInput extends React.Component {
-    render() {
-        return _jsx(CustomPhoneInput, { ...this.props });
-    }
-}
-export default ErkPhoneInput;

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

@@ -1,52 +0,0 @@
-import React from 'react';
-import { SelectProps as MuiSelectProps } from '@mui/material';
-export interface SelectorStyleProps {
-    /** If input is readOnly */
-    readOnly?: boolean;
-}
-export declare const StyledSelect: import("@emotion/styled").StyledComponent<(import("@mui/material").FilledSelectProps & import("@mui/material").BaseSelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>) | (import("@mui/material").StandardSelectProps & import("@mui/material").BaseSelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>) | (import("@mui/material").OutlinedSelectProps & import("@mui/material").BaseSelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>), {}, {}>;
-export declare const StyledInputLabel: import("@emotion/styled").StyledComponent<import("@mui/material").InputLabelOwnProps & Pick<import("@mui/material").FormLabelOwnProps, "color" | "filled"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-    ref?: ((instance: HTMLLabelElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLLabelElement> | null | undefined;
-}, "required" | "size" | "color" | "children" | "className" | "style" | "classes" | "disabled" | "sx" | "margin" | "error" | "filled" | "variant" | "focused" | "disableAnimation" | "shrink"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    component?: React.ElementType;
-} & {
-    open: boolean;
-}, {}, {}>;
-export declare const StyledHelperText: import("@emotion/styled").StyledComponent<import("@mui/material").FormHelperTextOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-    ref?: ((instance: HTMLParagraphElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLParagraphElement> | null | undefined;
-}, "required" | "children" | "className" | "style" | "classes" | "disabled" | "sx" | "margin" | "error" | "filled" | "variant" | "focused"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    component?: React.ElementType;
-}, {}, {}>;
-export type ErkSelectValue<Type extends string | number, Multiple, Clearable> = Multiple extends true ? Type[] : Clearable extends true ? Type | undefined : Type;
-export interface ErkSelectProps<Type extends string | number = string, Multiple extends boolean | undefined = false, Clearable extends boolean | undefined = true> extends Omit<MuiSelectProps, 'color' | 'onChange' | 'ref'>, SelectorStyleProps {
-    /** if selecting multiple values */
-    multiple?: Multiple;
-    /** If the usar can clear the value */
-    clearable?: Clearable;
-    /** If the input is loading */
-    loading?: boolean;
-    /** children to display in the options */
-    children?: React.ReactNode;
-    /** Currently selected value */
-    value?: ErkSelectValue<Type, Multiple, Clearable>;
-    onChange?: (value: ErkSelectValue<Type, Multiple, Clearable>) => void;
-    /** String to place in the label */
-    label?: string;
-    /** The helper Text to display */
-    helperText?: string;
-    /** Label to display on clearable */
-    clearLabel?: string;
-    /** labelMargin */
-    labelMargin?: number;
-}
-export type CustomErkSelectOnChangeType<ChangeType, Multiple extends boolean | undefined, Clearable extends boolean | undefined> = Multiple extends true ? ChangeType[] : Clearable extends true ? ChangeType | undefined : ChangeType;
-export interface CustomErkSelectProps<ValueType extends string | number = string, ChangeType = any, Multiple extends boolean | undefined = false, Clearable extends boolean | undefined = true> extends Omit<ErkSelectProps<ValueType, Multiple, Clearable>, 'onChange'> {
-    onChange?: (value: CustomErkSelectOnChangeType<ChangeType, Multiple, Clearable>) => void;
-}
-/**
- * Generic textfield with apps designs. Is class due to the use in the react-hook-forms library
- */
-declare class ErkSelect<Type extends string | number = string, Multiple extends boolean | undefined = false, Clearable extends boolean | undefined = true> extends React.Component<ErkSelectProps<Type, Multiple, Clearable>> {
-    render(): JSX.Element;
-}
-export default ErkSelect;

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;