@arquimedes.co/eureka-forms 2.0.99 → 3.0.1-refactor

package/dist/Shared/ErkCheckbox/ErkCheckBox.d.ts

@@ -0,0 +1,19 @@
+import React, { CSSProperties } from 'react';
+import { CheckboxProps as MuiCheckboxProps } from '@mui/material';
+interface StyleProps {
+    size?: CSSProperties['fontSize'];
+    padding?: string;
+    error?: number;
+}
+interface ErkCheckboxProps extends Omit<StyleProps, 'error'>, Omit<MuiCheckboxProps, 'size' | 'onChange'> {
+    onChange?: (checked: boolean) => void;
+    checked: boolean;
+    error?: boolean;
+}
+/**
+ * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library
+ */
+declare class ErkCheckbox extends React.Component<ErkCheckboxProps> {
+    render(): JSX.Element;
+}
+export default ErkCheckbox;

package/dist/Shared/ErkCheckbox/ErkCheckBox.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import CheckboxUncheckedIcon from '../../Icons/CheckboxUncheckedIcon';
+import CheckboxCheckedIcon from '../../Icons/CheckboxCheckedIcon';
+import { FormControl, Checkbox as MuiCheckbox, styled } from '@mui/material';
+const StyledCheckbox = styled(MuiCheckbox)(({ theme, size = '1.5rem', padding = '9px', disabled, readOnly, error }) => ({
+    padding: padding,
+    fontSize: size,
+    opacity: disabled ? 0.5 : 1,
+    pointerEvents: readOnly ? 'none' : undefined,
+    color: error ? theme.palette.error.main : '#787878',
+    '&.Mui-disabled': {
+        color: '#A0A0A0',
+    },
+}));
+/**
+ * Generic capta checkbox
+ */
+function CustomCheckBox({ onChange, error = false, readOnly = false, disabled = false, ...others }) {
+    return (_jsx(FormControl, { error: true, children: _jsx(StyledCheckbox, { ...others, error: +error, readOnly: readOnly, disabled: disabled, inputProps: { disabled: disabled || readOnly }, icon: _jsx(CheckboxUncheckedIcon, { style: { fontSize: 'inherit' } }), checkedIcon: _jsx(CheckboxCheckedIcon, { style: { fontSize: 'inherit' } }), onChange: (event) => onChange?.(typeof event === 'boolean' ? event : event.target.checked) }) }));
+}
+/**
+ * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library
+ */
+class ErkCheckbox extends React.Component {
+    render() {
+        return _jsx(CustomCheckBox, { ...this.props });
+    }
+}
+export default ErkCheckbox;

package/dist/Shared/{RoundedCheckBox/RoundedCheckBox.stories.d.ts → ErkCheckbox/ErkCheckBox.stories.d.ts}

@@ -1,14 +1,10 @@
 import type { StoryObj } from '@storybook/react';
-import RoundedCheckBox from './RoundedCheckBox';
+import ErkCheckBox from './ErkCheckBox';
 declare const meta: {
-    component: typeof RoundedCheckBox;
+    component: typeof ErkCheckBox;
     tags: string[];
     args: {
-        checkedColor: string;
-        uncheckedColor: string;
-        disabledColor: string;
         size: string;
-        errorColor: string;
     };
 };
 export default meta;
@@ -18,4 +14,3 @@ export declare const Checked: Story;
 export declare const Error: Story;
 export declare const Disabled: Story;
 export declare const ErrorColor: Story;
-export declare const DifferentColors: Story;

package/dist/Shared/ErkCheckbox/ErkCheckBox.stories.js

@@ -0,0 +1,37 @@
+import ErkCheckBox from './ErkCheckBox';
+const meta = {
+    component: ErkCheckBox,
+    tags: ['autodocs'],
+    args: {
+        size: '1.5rem',
+    },
+};
+export default meta;
+export const Uncheked = {
+    args: {
+        checked: false,
+    },
+};
+export const Checked = {
+    args: {
+        checked: true,
+    },
+};
+export const Error = {
+    args: {
+        checked: false,
+        error: true,
+    },
+};
+export const Disabled = {
+    args: {
+        checked: false,
+        disabled: true,
+    },
+};
+export const ErrorColor = {
+    args: {
+        checked: false,
+        error: true,
+    },
+};

package/dist/Shared/ErkDatePicker/ErkDatePicker.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { MobileDatePickerProps as MuiDatePickerProps, PickerValidDate } from '@mui/x-date-pickers';
+import { ErkTextFieldProps } from '../ErkTextField/ErkTextField';
+interface ErkDatePickerProps extends Omit<MuiDatePickerProps<PickerValidDate>, 'ref' | 'onChange'>, Pick<ErkTextFieldProps, 'error' | 'required' | 'helperText'> {
+    onChange?: (date: Date | null) => void;
+    /** If it should display the timePicker */
+    pickTime?: boolean;
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+/**
+ * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library
+ */
+declare class ErkDatePicker extends React.Component<ErkDatePickerProps> {
+    render(): JSX.Element;
+}
+export default ErkDatePicker;

package/dist/Shared/ErkDatePicker/ErkDatePicker.js

@@ -0,0 +1,210 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import CalendarIcon from '../../Icons/CalendarIcon';
+import { styled, Dialog as MuiDialog } from '@mui/material';
+import { MobileDatePicker as MuiDatePicker, MobileDateTimePicker as MuiDateTimePicker, DatePickerToolbar as MuiDatePickerToolbar, DateTimePickerToolbar as MuiDateTimePickerToolbar, PickersDay as MuiPickerDay, } from '@mui/x-date-pickers';
+import { StyledTextField } from '../ErkTextField/ErkTextField';
+const StyledDateTimePicker = styled(MuiDateTimePicker)(({ ...props }) => ({
+    '& .EF-MuiInputBase-root': {
+        cursor: props.disabled ? 'default' : 'pointer',
+        '& input': {
+            cursor: props.disabled ? 'default' : 'pointer',
+            paddingRight: '0px',
+        },
+    },
+}));
+const StyledDatePicker = styled(MuiDatePicker)(({ ...props }) => ({
+    '& .EF-MuiInputBase-root': {
+        cursor: props.disabled ? 'default' : 'pointer',
+        '& input': {
+            cursor: props.disabled ? 'default' : 'pointer',
+        },
+    },
+}));
+const StyledDateTimeToolBar = styled(MuiDateTimePickerToolbar)(({ theme }) => ({
+    '&.MuiPickersToolbar-root': {
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.primary.contrastText,
+        '& span': {
+            fontSize: '1rem',
+            textTransform: 'capitalize',
+            color: theme.palette.primary.contrastText,
+        },
+        '& .MuiDateTimePickerToolbar-dateContainer': {
+            '& span': {
+                fontSize: '1.1rem',
+            },
+        },
+        '& .MuiDateTimePickerToolbar-timeDigitsContainer': {
+            '& span': {
+                fontSize: '2.3rem',
+            },
+        },
+        '& .MuiDateTimePickerToolbar-ampmSelection': {
+            '& span': {
+                color: theme.palette.primary.contrastText + '8b',
+                '&.Mui-selected': {
+                    color: theme.palette.primary.contrastText,
+                    fontWeight: 600,
+                },
+            },
+        },
+    },
+    cursor: 'default',
+    '& .MuiTypography-root': {
+        textTransform: 'capitalize',
+        color: theme.palette.primary.contrastText,
+    },
+}));
+const StyledDateToolBar = styled(MuiDatePickerToolbar)(({ theme }) => ({
+    '&.MuiPickersToolbar-root': {
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.primary.contrastText,
+        '& span': {
+            fontSize: '1rem',
+            textTransform: 'capitalize',
+            color: theme.palette.primary.contrastText,
+        },
+    },
+    cursor: 'default',
+    '& .MuiTypography-root': {
+        textTransform: 'capitalize',
+        color: theme.palette.primary.contrastText,
+    },
+}));
+const StyledDialog = styled(MuiDialog)(({ theme }) => ({
+    '& .MuiDialog-paper': {
+        borderRadius: '5px',
+        backgroundColor: 'transparent',
+    },
+    '& .EF-MuiDialogActions-root': {
+        '& .EF-MuiButtonBase-root': { fontWeight: 700 },
+    },
+    '& .MuiDialogContent-root': { scrollbarColor: theme.palette.primary.main + ' white' },
+    '& .MuiDayCalendar-weekDayLabel': {
+        cursor: 'default',
+    },
+    '& .MuiPickersCalendarHeader-root': {
+        marginTop: 5,
+    },
+    '& .MuiDateCalendar-root': {
+        height: 'fit-content',
+    },
+    '& .MuiPickersSlideTransition-root': {
+        minHeight: '195px',
+    },
+    '& .MuiClock-root': {
+        marginTop: '34px',
+        marginBottom: '30px',
+    },
+    '& .MuiTimeClock-arrowSwitcher': {
+        top: 5,
+    },
+}));
+const StyledDay = styled(MuiPickerDay)(({ theme }) => ({
+    fontWeight: 500,
+    fontSize: '0.9rem',
+    lineHeight: 'normal',
+    '&.MuiPickersDay-today': {
+        backgroundColor: theme.palette.primary.main + '33',
+    },
+    '&.MuiPickersDay-dayOutsideMonth': {
+        color: 'rgb(0,0,0,0.4)',
+        '&.Mui-selected': {
+            color: theme.palette.primary.contrastText,
+        },
+    },
+}));
+function CustomDatePicker({ error, required, disabled, readOnly, helperText, pickTime = false, ...others }) {
+    if (pickTime) {
+        return (_jsx(StyledDateTimePicker, { ...others, disabled: disabled ?? readOnly, defaultValue: required ? new Date() : undefined, showDaysOutsideCurrentMonth: true, slotProps: {
+                actionBar: {
+                    actions: ['clear', 'accept'],
+                },
+                layout: {
+                    sx: {
+                        backgroundColor: '#ffffff',
+                        textTransform: 'capitalize',
+                    },
+                },
+                monthButton: {
+                    sx: {
+                        textTransform: 'capitalize',
+                    },
+                },
+                toolbar: {
+                    toolbarFormat: 'eee, d MMM',
+                    hidden: false,
+                    toolbarPlaceholder: '– –',
+                },
+                textField: {
+                    error,
+                    disabled,
+                    helperText,
+                    placeholder: '',
+                    InputProps: {
+                        disabled: disabled ?? readOnly,
+                        endAdornment: (_jsx(CalendarIcon, { style: {
+                                width: 27,
+                                height: 27,
+                            } })),
+                    },
+                },
+            }, slots: {
+                day: StyledDay,
+                dialog: StyledDialog,
+                toolbar: StyledDateTimeToolBar,
+                textField: StyledTextField,
+            } }));
+    }
+    else {
+        return (_jsx(StyledDatePicker, { ...others, readOnly: readOnly, disabled: disabled ?? readOnly, defaultValue: required ? new Date() : undefined, showDaysOutsideCurrentMonth: true, views: ['year', 'month', 'day'], slotProps: {
+                actionBar: {
+                    actions: ['clear', 'accept'],
+                },
+                layout: {
+                    sx: {
+                        backgroundColor: '#ffffff',
+                        textTransform: 'capitalize',
+                    },
+                },
+                monthButton: {
+                    sx: {
+                        textTransform: 'capitalize',
+                    },
+                },
+                toolbar: {
+                    toolbarFormat: 'eee, d MMM',
+                    hidden: false,
+                    toolbarPlaceholder: '– –',
+                },
+                textField: {
+                    error,
+                    disabled,
+                    helperText,
+                    placeholder: '',
+                    InputProps: {
+                        disabled: disabled ?? readOnly,
+                        endAdornment: (_jsx(CalendarIcon, { style: {
+                                width: 27,
+                                height: 27,
+                            } })),
+                    },
+                },
+            }, localeText: {}, slots: {
+                day: StyledDay,
+                dialog: StyledDialog,
+                toolbar: StyledDateToolBar,
+                textField: StyledTextField,
+            } }));
+    }
+}
+/**
+ * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library
+ */
+class ErkDatePicker extends React.Component {
+    render() {
+        return _jsx(CustomDatePicker, { ...this.props });
+    }
+}
+export default ErkDatePicker;

package/dist/Shared/{RoundedDatePicker/RoundedDatePicker.stories.d.ts → ErkDatePicker/ErkDatePicker.stories.d.ts}

@@ -1,21 +1,10 @@
 import type { StoryObj } from '@storybook/react';
-import RoundedDatePicker from './RoundedDatePicker';
+import ErkDatePicker from './ErkDatePicker';
 declare const meta: {
-    component: typeof RoundedDatePicker;
+    component: typeof ErkDatePicker;
     tags: string[];
     args: {
-        focusColor: string;
-        secondaryColor: string;
-        helperTextColor: string;
-        outlineColor: string;
-        backgroundColor: string;
-        textColor: string;
-        contrastColor: string;
-        accentColor: string;
-        errorColor: string;
-        fontSize: string;
-        fontWeight: string;
-        cantEdit: false;
+        readOnly: false;
     };
     parameters: {
         date: Date;
@@ -32,5 +21,3 @@ export declare const Error: Story;
 export declare const Menu: Story;
 export declare const DateTimeDateMenu: Story;
 export declare const DateTimeTimeMenu: Story;
-export declare const ErrorColor: Story;
-export declare const DifferentColors: Story;

package/dist/Shared/ErkDatePicker/ErkDatePicker.stories.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useArgs } from '@storybook/preview-api';
+import ErkDatePicker from './ErkDatePicker';
+import { within, screen } from '@storybook/testing-library';
+import { userEvent } from '@storybook/testing-library';
+const meta = {
+    component: ErkDatePicker,
+    tags: ['autodocs'],
+    args: {
+        readOnly: false,
+    },
+    parameters: {
+        date: new Date('07-21-2021'),
+    },
+};
+export default meta;
+export const Empty = {
+    args: {
+        value: null,
+    },
+};
+export const Default = {
+    args: {
+        label: 'Label',
+        value: new Date('07-21-2021'),
+    },
+};
+export const ValueAndLabel = {
+    args: {
+        label: 'Label',
+        value: null,
+    },
+    render: function Component(args) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (value) => {
+            args.onChange?.(value);
+            setArgs({ value });
+        };
+        return _jsx(ErkDatePicker, { ...args, ref: args, onChange: onValueChange });
+    },
+};
+export const Full = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+    },
+};
+export const FullDateTime = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+        pickTime: true,
+    },
+};
+export const Error = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+        error: true,
+    },
+};
+export const Menu = {
+    args: {
+        label: 'Label',
+        value: null,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const selector = canvas.getByTestId('date-picker');
+        await userEvent.click(selector);
+    },
+};
+export const DateTimeDateMenu = {
+    args: {
+        label: 'Label',
+        value: null,
+        pickTime: true,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const selector = canvas.getByTestId('date-picker');
+        await userEvent.click(selector);
+    },
+};
+export const DateTimeTimeMenu = {
+    args: {
+        label: 'Label',
+        value: null,
+        pickTime: true,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const selector = canvas.getByTestId('date-picker');
+        await userEvent.click(selector);
+        const time = screen.getByText('12', {
+            selector: 'h3',
+        });
+        await userEvent.click(time);
+    },
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TextFieldProps as MuiTextFieldProps } from '@mui/material';
+interface ErkPhoneInputProps {
+    /** 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

@@ -0,0 +1,83 @@
+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 { useAppSelector } from '../../hooks';
+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';
+isoCountries.registerLocale(es);
+const StyledSelect = styled(Select)(({ theme }) => ({
+    padding: 0,
+    input: {
+        padding: 0,
+    },
+    '& .EF-MuiSelect-select.EF-MuiInputBase-inputSizeSmall': {
+        paddingBottom: 0,
+        borderBottom: 'none',
+    },
+    backgroundColor: theme.palette.stepBackgroundColor.default,
+    '& input': {
+        padding: 0,
+        margin: 0,
+    },
+    '&.EF-MuiInputBase-root::before': {
+        borderBottom: 'none !important',
+    },
+    '&.EF-MuiInput-underline::after': {
+        borderBottom: 'none',
+    },
+}));
+function CustomPhoneInput({ value, onChange, inputRef, 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.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: "small", 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: {
+                    disabled: readOnly || disabled,
+                    startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(StyledSelect, { size: "small", variant: "standard", value: country.iso2, inputProps: { 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));
+                            }) }) })),
+                },
+            } }) }));
+}
+/**
+ * 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

@@ -0,0 +1,39 @@
+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<MuiSelectProps<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" | "error" | "margin" | "sx" | "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" | "error" | "margin" | "sx" | "filled" | "variant" | "focused"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    component?: React.ElementType;
+}, {}, {}>;
+interface ErkSelectProps extends Omit<MuiSelectProps, 'color' | 'onChange'>, SelectorStyleProps {
+    /** children to display in the options */
+    children?: React.ReactNode;
+    /** Currently selected value */
+    value?: any;
+    onChange?: (value: any) => void;
+    /** String to place in the label */
+    label?: string;
+    /** The helper Text to display */
+    helperText?: string;
+    /** the components ref */
+    ref?: React.Ref<HTMLInputElement>;
+}
+/**
+ * Generic textfield with apps designs. Is class due to the use in the react-hook-forms library
+ */
+declare class ErkSelect extends React.Component<ErkSelectProps> {
+    render(): JSX.Element;
+}
+export default ErkSelect;