@arquimedes.co/eureka-forms 3.0.7-refactor → 3.0.10-refactor

package/dist/FormSteps/AYFStepMapper.js

@@ -76,7 +76,7 @@ function AYFStepMapper(props) {
                     message: 'No se permiten espacios',
                 }, maxLength: 30, IconComponent: () => _jsx(FileIcon, { style: { fontSize: 23 } }) }));
         case AYFFormStepTypes.AYF_CUT_OFF_DATE:
-            return _jsx(DatePickerStep, { ...props, step: props.step, defaultValue: new Date() });
+            return _jsx(DatePickerStep, { ...props, step: props.step, defaultValue: new Date().toString() });
         case AYFFormStepTypes.AYF_ICA_CITY:
             return (_jsx(SmartSelectStep, { ...props, step: props.step, getOptions: getCiudadesOptions, getOptionSelected: (option, value) => option === value, getValueString: (value) => value, IconComponent: () => _jsx(LocationIcon, {}) }));
         default:

package/dist/FormSteps/DatePickerStep/DatePickerStep.d.ts

@@ -4,7 +4,7 @@ export interface DatePickerStepProps extends StepProps {
     /** The DatePickerStep to display */
     step: DatePicker;
     /** Default value to display */
-    defaultValue?: Date | null;
+    defaultValue?: string | null;
 }
 declare function DatePickerStep(props: DatePickerStepProps): JSX.Element;
 export default DatePickerStep;

package/dist/FormSteps/DatePickerStep/MaterialDatePickerStep/MaterialDatePickerStep.js

@@ -3,6 +3,7 @@ import ErkDatePicker from '../../../Shared/ErkDatePicker/ErkDatePicker';
 import { useAppSelector } from '../../../hooks';
 import { useFormStep } from '../../StepHooks';
 import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
+import { useCallback } from 'react';
 function DatePickerStep({ step, editable, defaultValue }) {
     const postview = useAppSelector((state) => state.global.postview);
     const { ref, value, onChange, error, field } = useFormStep(step, {
@@ -11,6 +12,7 @@ function DatePickerStep({ step, editable, defaultValue }) {
             required: step.required ? 'Este campo es obligatorio' : undefined,
         },
     });
-    return (_jsx(MaterialInputContainer, { step: step, editable: editable, children: _jsx(ErkDatePicker, { ...field, value: value, inputRef: ref, error: !!error, label: step.label, onChange: onChange, pickTime: step.pickTime, required: step.required, readOnly: !editable || postview, helperText: error?.message ?? step.description }) }));
+    const handleChange = useCallback((date) => onChange(date?.toISOString() ?? null), [onChange]);
+    return (_jsx(MaterialInputContainer, { step: step, editable: editable, children: _jsx(ErkDatePicker, { ...field, value: value ? new Date(value) : null, inputRef: ref, error: !!error, labelMargin: 0, label: step.label, onChange: handleChange, pickTime: step.pickTime, required: step.required, readOnly: !editable || postview, helperText: error?.message ?? step.description }) }));
 }
 export default DatePickerStep;

package/dist/FormSteps/PhoneInputStep/MaterialTextInputStep/MaterialPhoneInputStep.js

@@ -28,6 +28,6 @@ function PhoneInputStep({ step, editable, defaultValue = step.defaultValue }) {
     return (_jsx("div", { className: styles.container, style: {
             width: currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size),
             minHeight: step.description || (!postview && editable) ? '55px' : '43px',
-        }, children: _jsx(ErkPhoneInput, { ...field, value: value, inputRef: ref, error: !!error, label: step.label, onChange: onChange, "data-testid": step.id, required: step.required, readOnly: !editable || postview, helperText: error?.message ?? step.description }) }));
+        }, children: _jsx(ErkPhoneInput, { ...field, value: value, inputRef: ref, error: !!error, labelMargin: 0, label: step.label, onChange: onChange, "data-testid": step.id, required: step.required, readOnly: !editable || postview, helperText: error?.message ?? step.description }) }));
 }
 export default PhoneInputStep;

package/dist/FormSteps/StepHooks.js

@@ -4,9 +4,9 @@ import { clearDependency, setStepDependency } from '../States/SiteSlice';
 import { createSelector } from '@reduxjs/toolkit';
 import { calcDefaultValue, evaluateCondition } from './StepFunctions';
 import { useController } from 'react-hook-form';
-import { SizeChangeContext } from './Utils/@StepFiller/StepFiller';
 import ConditionTypes from '../constants/ConditionTypes';
 import FormStepTypes, { ApiSelectorOptionTypes, ClassifierOptionTypes, EntityValueOptionTypes, } from '../constants/FormStepTypes';
+import { SizeChangeContext } from './Utils/@StepFiller/StepFillerContext';
 const selectIsDependency = createSelector([
     (state) => state.site.dependencies,
     (_state, step) => step,

package/dist/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.js

@@ -15,7 +15,7 @@ function TextAreaStep({ step, editable, maxLength }) {
     });
     return (_jsxs("div", { className: styles.container, style: {
             paddingBottom: step.required || step.description || !!error ? '0px' : '5px',
-        }, children: [_jsx("div", { className: styles.erkTextArea, children: _jsx(ErkTextField, { ...field, multiline: true, value: value, inputRef: ref, error: !!error, label: step.label, onChange: onChange, "data-testid": step.id, maxLength: maxLength, required: step.required, disabled: !editable || postview, minRows: postview && partial ? undefined : 4, helperText: error?.message ?? step.description ?? (step.required ? ' ' : null) }) }), _jsxs("div", { className: styles.print, children: [value && (_jsxs(React.Fragment, { children: [_jsx("div", { className: styles.printLbl, style: {
+        }, children: [_jsx("div", { className: styles.erkTextArea, children: _jsx(ErkTextField, { ...field, multiline: true, value: value, inputRef: ref, error: !!error, labelMargin: 0, label: step.label, onChange: onChange, "data-testid": step.id, maxLength: maxLength, required: step.required, disabled: !editable || postview, minRows: postview && partial ? undefined : 4, helperText: error?.message ?? step.description ?? (step.required ? ' ' : null) }) }), _jsxs("div", { className: styles.print, children: [value && (_jsxs(React.Fragment, { children: [_jsx("div", { className: styles.printLbl, style: {
                                     color: formStyle.descriptionTextColor,
                                 }, children: step.label }), _jsx("div", { className: styles.printLine, style: {
                                     color: formStyle.stepBackgroundColor,

package/dist/FormSteps/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.js

@@ -29,6 +29,6 @@ function TextInputStep({ step, editable, maxLength, IconComponent, defaultValue
     return (_jsx("div", { className: styles.container, style: {
             width: currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size),
             minHeight: step.description || (!postview && editable && (step.required || validation)) ? '55px' : '43px',
-        }, children: _jsx(ErkTextField, { ...field, inputRef: ref, value: value, maxLength: maxLength, "data-testid": step.id, label: step.label, readOnly: !editable || postview, required: step.required, error: !!error, IconComponent: step.showIcon ? IconComponent : undefined, onChange: onChange, helperText: error?.message ?? step.description }) }));
+        }, children: _jsx(ErkTextField, { ...field, value: value, inputRef: ref, labelMargin: 0, error: !!error, label: step.label, onChange: onChange, maxLength: maxLength, "data-testid": step.id, required: step.required, readOnly: !editable || postview, helperText: error?.message ?? step.description, IconComponent: step.showIcon ? IconComponent : undefined }) }));
 }
 export default TextInputStep;

package/dist/FormSteps/TimePickerStep/MaterialTimePickerStep/MaterialTimePickerStep.js

@@ -18,6 +18,6 @@ function TimePickerStep({ step, editable, defaultValue }) {
             },
         },
     });
-    return (_jsx(MaterialInputContainer, { step: step, editable: editable, children: _jsx(ErkTimePicker, { ...field, value: value, onChange: onChange, inputRef: ref, readOnly: !editable || postview, label: step.label, helperText: error?.message ?? step.description, error: !!error, required: step.required, pickDays: step.pickDays, minDays: step.minDays, maxDays: step.maxDays, pickHours: step.pickHours, minHours: step.minHours, maxHours: step.maxHours, pickMinutes: step.pickMinutes, minMinutes: step.minMinutes, maxMinutes: step.maxMinutes, working: step.working }) }));
+    return (_jsx(MaterialInputContainer, { step: step, editable: editable, children: _jsx(ErkTimePicker, { ...field, value: value, onChange: onChange, inputRef: ref, labelMargin: 0, readOnly: !editable || postview, label: step.label, helperText: error?.message ?? step.description, error: !!error, required: step.required, pickDays: step.pickDays, minDays: step.minDays, maxDays: step.maxDays, pickHours: step.pickHours, minHours: step.minHours, maxHours: step.maxHours, pickMinutes: step.pickMinutes, minMinutes: step.minMinutes, maxMinutes: step.maxMinutes, working: step.working }) }));
 }
 export default TimePickerStep;

package/dist/FormSteps/Utils/@StepFiller/StepFiller.d.ts

@@ -1,6 +1,5 @@
 import { FillerSteps } from '../../StepFunctions';
 import React from 'react';
-export declare const SizeChangeContext: React.Context<(() => void) | undefined>;
 export interface StepFillerContainerProps {
     step: FillerSteps;
     children: React.ReactNode;

package/dist/FormSteps/Utils/@StepFiller/StepFiller.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useState } from 'react';
+import { useCallback, useContext, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { calcFillerSize } from '../../StepFunctions';
 import FormContext from '../../../Contexts/FormContext';
 import styles from './StepFiller.module.css';
 import { selectBreakPoint, useAppSelector } from '../../../hooks';
-export const SizeChangeContext = createContext(undefined);
+import { SizeChangeContext } from './StepFillerContext';
 function StepFiller({ step, children }) {
     const { getValues } = useFormContext();
     const form = useContext(FormContext);

package/dist/FormSteps/Utils/@StepFiller/StepFillerContext.d.ts

@@ -0,0 +1 @@
+export declare const SizeChangeContext: import("react").Context<(() => void) | undefined>;

package/dist/FormSteps/Utils/@StepFiller/StepFillerContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const SizeChangeContext = createContext(undefined);

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

@@ -6,6 +6,8 @@ interface ErkDatePickerProps extends Omit<MuiDatePickerProps<PickerValidDate>, '
     /** If it should display the timePicker */
     pickTime?: boolean;
     inputRef?: React.Ref<HTMLInputElement>;
+    /** labelMargin */
+    labelMargin?: number;
 }
 /**
  * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library

package/dist/Shared/ErkDatePicker/ErkDatePicker.js

@@ -1,9 +1,9 @@
 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 { styled, Dialog as MuiDialog, InputAdornment } 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';
+import CalendarIcon from '../../Icons/CalendarIcon';
 const StyledDateTimePicker = styled(MuiDateTimePicker)(({ ...props }) => ({
     '& .Erk-MuiInputBase-root': {
         cursor: props.disabled ? 'default' : 'pointer',
@@ -84,7 +84,9 @@ const StyledDialog = styled(MuiDialog)(({ theme }) => ({
     '& .Erk-MuiDialogActions-root': {
         '& .Erk-MuiButtonBase-root': { fontWeight: 700 },
     },
-    '& .Erk-MuiDialogContent-root': { scrollbarColor: theme.palette.primary.main + ' white' },
+    '& .Erk-MuiDialogContent-root': {
+        scrollbarColor: theme.palette.primary.main + ' white',
+    },
 }));
 const StyledDay = styled(MuiPickerDay)(({ theme }) => ({
     fontWeight: 500,
@@ -100,7 +102,7 @@ const StyledDay = styled(MuiPickerDay)(({ theme }) => ({
         },
     },
 }));
-function CustomDatePicker({ error, required, disabled, readOnly, helperText, size = 'small', pickTime = false, ...others }) {
+function CustomDatePicker({ error, required, disabled, readOnly, helperText, size = 'small', labelMargin = 5, pickTime = false, ...others }) {
     if (pickTime) {
         return (_jsx(StyledDateTimePicker, { ampm: true, reduceAnimations: true, ...others, disabled: disabled ?? readOnly, defaultValue: required ? new Date() : undefined, showDaysOutsideCurrentMonth: true, slotProps: {
                 actionBar: {
@@ -115,9 +117,6 @@ function CustomDatePicker({ error, required, disabled, readOnly, helperText, siz
                             gridColumn: 1,
                             gridRow: 2,
                         },
-                        '& .Erk-MuiPickersLayout-root': {
-                            backgroundColor: 'red',
-                        },
                         '& .Erk-MuiPickersCalendarHeader-root': {
                             marginTop: '5px',
                         },
@@ -149,10 +148,12 @@ function CustomDatePicker({ error, required, disabled, readOnly, helperText, siz
                     size,
                     disabled,
                     helperText,
+                    labelMargin,
                     placeholder: '',
+                    fullWidth: true,
                     InputProps: {
                         disabled: disabled ?? readOnly,
-                        endAdornment: _jsx(CalendarIcon, { fill: "#000000a0", size: 22 }),
+                        endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(CalendarIcon, { size: size === 'small' ? 22 : 26 }) })),
                     },
                 },
             }, slots: {
@@ -197,10 +198,12 @@ function CustomDatePicker({ error, required, disabled, readOnly, helperText, siz
                     error,
                     disabled,
                     helperText,
+                    labelMargin,
+                    fullWidth: true,
                     placeholder: '',
                     InputProps: {
                         disabled: disabled ?? readOnly,
-                        endAdornment: _jsx(CalendarIcon, { fill: "#000000a0", size: 22 }),
+                        endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(CalendarIcon, { size: size === 'small' ? 20 : 24 }) })),
                     },
                 },
             }, slots: {

package/dist/Shared/ErkMenuItem.d.ts

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -4,7 +4,7 @@ import { ErkTextFieldProps } from '../ErkTextField/ErkTextField';
 export interface ErkPhoneInputProps extends Omit<ErkTextFieldProps, 'onChange' | 'ref'> {
     /** The value of the phoneinput */
     value?: string;
-    onChange: (value: string) => void;
+    onChange?: (value: string) => void;
     inputRef?: any;
     readOnly?: boolean;
 }

package/dist/Shared/ErkPhoneInput/EkrPhoneInput.js

@@ -29,8 +29,16 @@ const StyledSelect = styled(Select)(() => ({
     '&.Erk-MuiInput-underline::after': {
         borderBottom: 'none',
     },
+    '&.Mui-readOnly': {
+        '& .Erk-MuiSelect-select': {
+            paddingRight: 5,
+        },
+        '& .Erk-MuiSelect-icon': {
+            display: 'none',
+        },
+    },
 }));
-function CustomPhoneInput({ value, onChange, inputRef, size = 'small', readOnly = false, disabled = false, ...others }) {
+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,
@@ -38,7 +46,7 @@ function CustomPhoneInput({ value, onChange, inputRef, size = 'small', readOnly
         defaultCountry: (defaultCountry ?? 'CO').toLowerCase(),
         disableDialCodePrefill: true,
         disableDialCodeAndPrefix: true,
-        onChange: (data) => onChange(data.phone.replace('+', '')),
+        onChange: (data) => onChange?.(data.phone.replace('+', '')),
     });
     const countries = useMemo(() => defaultCountries
         .map((c) => {
@@ -57,19 +65,20 @@ function CustomPhoneInput({ value, onChange, inputRef, size = 'small', readOnly
                         e.preventDefault();
                         if (phone.country)
                             setCountry(phone.country.toLowerCase());
-                        onChange(phone.number);
+                        onChange?.(phone.number);
                     }
                 }
             }, slotProps: {
                 input: {
                     readOnly,
                     disabled: readOnly || disabled,
-                    startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(StyledSelect, { size: size, variant: "standard", 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 }) => {
+                    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,
                 },
             } }) }));
 }

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

@@ -7,33 +7,46 @@ export interface SelectorStyleProps {
 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" | "error" | "margin" | "sx" | "filled" | "variant" | "focused" | "disableAnimation" | "shrink"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+}, "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" | "error" | "margin" | "sx" | "filled" | "variant" | "focused"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+}, "required" | "children" | "className" | "style" | "classes" | "disabled" | "sx" | "margin" | "error" | "filled" | "variant" | "focused"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     component?: React.ElementType;
 }, {}, {}>;
-interface ErkSelectProps extends Omit<MuiSelectProps, 'color' | 'onChange'>, SelectorStyleProps {
+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?: any;
-    onChange?: (value: any) => void;
+    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;
-    /** the components ref */
-    ref?: React.Ref<HTMLInputElement>;
+    /** 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 extends React.Component<ErkSelectProps> {
+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,10 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
+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.background.default,
+    backgroundColor: theme.palette.stepBackgroundColor.default,
     minHeight: size === 'small' ? 31 : size === 'medium' ? 40 : undefined,
     '&.Erk-MuiInputBase-adornedEnd': {
         paddingRight: 7,
@@ -39,6 +40,7 @@ export const StyledSelect = styled(MuiSelect)(({ theme, size, ...props }) => ({
     },
     '& .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',
@@ -46,6 +48,18 @@ export const StyledSelect = styled(MuiSelect)(({ theme, size, ...props }) => ({
     '& .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',
@@ -70,17 +84,43 @@ export const StyledHelperText = styled(MuiFormHelperText)(({ theme, ...props })
         color: theme.palette.error.main,
     },
 }));
-function CustomSelect({ label, error, onChange, children, required, value = '', helperText, readOnly = false, disabled = false, IconComponent, ...others }) {
+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);
-    return (_jsxs(FormControl, { fullWidth: true, size: "small", error: error, variant: "outlined", required: required, children: [label && (_jsx(StyledInputLabel, { disabled: disabled, open: open, children: label })), _jsx(StyledSelect, { ...others, open: open, readOnly: readOnly, disabled: disabled, label: label, value: value, onChange: (event) => onChange?.(event?.target?.value), IconComponent: IconComponent ? () => _jsx(_Fragment, {}) : undefined, endAdornment: IconComponent ? (_jsx(InputAdornment, { position: "end", onClick: (e) => {
+    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' : 'normal', children: label })), _jsxs(StyledSelect, { ...others, size: size, ref: inputRef, autoWidth: false, open: others.open ?? open, label: label, 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)
-                            setOpen(!open);
-                    }, children: _jsx(IconComponent, {}) })) : undefined, onFocus: (e) => {
+                        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);
                     }
-                }, onOpen: () => setOpen(true), onClose: () => setOpen(false), inputProps: { disabled: readOnly || disabled }, children: children }), helperText && _jsx(StyledHelperText, { disabled: disabled, children: helperText })] }));
+                    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

package/dist/Shared/ErkSelect/ErkSelect.stories.js

@@ -23,13 +23,13 @@ export const ValueAndLabel = {
         label: 'Label',
         value: 'option',
     },
-    render: function Component({ ref, ...args }) {
+    render: function Component({ inputRef, ...args }) {
         const [, setArgs] = useArgs();
         const onValueChange = (value) => {
             args.onChange?.(value);
             setArgs({ value });
         };
-        return (_jsx(ErkSelect, { ...args, onChange: onValueChange, inputRef: ref, children: _jsx(MenuItem, { value: 'option', style: { whiteSpace: 'normal' }, children: "Option" }) }));
+        return (_jsx(ErkSelect, { ...args, onChange: onValueChange, inputRef: inputRef, children: _jsx(MenuItem, { value: 'option', style: { whiteSpace: 'normal' }, children: "Option" }) }));
     },
 };
 export const Full = {
@@ -58,7 +58,7 @@ export const DifferentColors = {
         value: 'option',
         helperText: 'Helper text',
     },
-    render: function Component({ ref, ...args }) {
-        return (_jsx(ErkSelect, { ...args, inputRef: ref, children: _jsx(MenuItem, { value: 'option', style: { whiteSpace: 'normal' }, children: "Option" }) }));
+    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.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createFilterOptions, MenuItem, CircularProgress, Autocomplete as MuiAutocomplete, styled, } from '@mui/material';
+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, ...props }) => ({
     '& .Erk-MuiInputBase-root': {
@@ -32,7 +33,7 @@ export default function ErkSmartSelect({ options, value = '', onChange, label, g
                 else {
                     return filter(options, params);
                 }
-            }, renderOption: ({ key, ...props }, option) => (_jsx(MenuItem, { ...props, children: option.label }, key)), getOptionLabel: (option) => {
+            }, renderOption: ({ key, ...props }, option) => (_jsx(ErkMenuItem, { ...props, children: option.label }, key)), getOptionLabel: (option) => {
                 // Value selected with enter, right from the input
                 if (typeof option === 'string') {
                     return option;
@@ -48,9 +49,9 @@ export default function ErkSmartSelect({ options, value = '', onChange, label, g
                 popper: {
                     sx: { zIndex: 1305 },
                 },
-            }, renderInput: (params) => (_jsx(StyledTextField, { ...params, size: size, label: label, name: others.name, readOnly: readOnly, disabled: disabled, inputRef: inputRef, error: others.error, onBlur: others.onBlur, required: others.required, helperText: others.helperText })) }));
+            }, 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, 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: [_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)))] }));
+        return (_jsxs(ErkSelect, { ...others, labelMargin: 0, 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: [_jsx(ErkMenuItem, { value: '', "data-testid": 'smart-select-empty', children: _jsx("em", { children: options ? 'Sin Seleccionar' : 'Cargando...' }) }, 'EMPTY'), 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/ErkTextField/ErkTextField.d.ts

@@ -1,15 +1,18 @@
 import { OutlinedTextFieldProps as MuiTextFieldProps } from '@mui/material';
 import React, { CSSProperties } from 'react';
-interface StyleProps {
-    fontSize?: CSSProperties['fontSize'];
-    padding?: CSSProperties['padding'];
+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'>;
-export interface ErkTextFieldProps extends Omit<MuiTextFieldProps, 'variant' | '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;
@@ -17,6 +20,10 @@ export interface ErkTextFieldProps extends Omit<MuiTextFieldProps, 'variant' | '
     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

package/dist/Shared/ErkTextField/ErkTextField.js

@@ -1,22 +1,39 @@
 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)(({ theme, size, fontSize = '1rem', padding = '6px 12px', ...props }) => ({
-    borderRadius: 10,
+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,
-        cursor: props.disabled || props.readOnly ? 'default' : 'text',
+        textAlign,
         padding,
-        fontWeight: 400,
+        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,
-        borderRadius: 10,
+        '&.Mui-readOnly': {
+            color: theme.palette.text.primary,
+            WebkitTextFillColor: theme.palette.text.primary,
+        },
     },
     '& .Erk-MuiFormLabel-root:not(.Erk-MuiInputLabel-shrink)': {
-        transform: `translate(12px, ${size === 'small' ? 5 : 9}px) scale(1)`,
+        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',
@@ -24,28 +41,34 @@ export const StyledTextField = styled(MuiTextField)(({ theme, size, fontSize = '
         overflow: 'hidden',
         textOverflow: 'ellipsis',
     },
-    '& input + fieldset': {},
     '& .Erk-MuiOutlinedInput-root': {
         '&.Mui-focused fieldset': {
-            borderColor: theme.palette.primary.main,
+            borderColor: error && errorBorder ? theme.palette.error.main : theme.palette.primary.main,
             borderWidth: 2,
         },
         '& .Erk-MuiOutlinedInput-notchedOutline': {
-            borderRadius: 10,
-            borderColor: theme.palette.outline.main,
+            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 : theme.palette.primary.main,
+        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',
@@ -65,11 +88,13 @@ export const StyledTextField = styled(MuiTextField)(({ theme, size, fontSize = '
         padding: 0,
     },
     '& .Erk-MuiInputAdornment-root': {
-        paddingTop: size === 'small' ? 2 : 0,
-        marginRight: 0,
+        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', ...others }) {
+function CustomTextfield({ onChange, value = '', IconComponent, size = 'small', fullWidth = true, ...others }) {
     const { readOnly, disabled, maxLength } = others;
     const { palette } = useTheme();
     const handleChange = useCallback((event) => {
@@ -79,6 +104,7 @@ function CustomTextfield({ onChange, value = '', IconComponent, size = 'small',
         ...others.inputProps,
         spellCheck: true,
         endAdornment: IconComponent,
+        readOnly: !!readOnly,
         disabled: !!readOnly || !!disabled,
     }), [others.inputProps, IconComponent, readOnly, disabled]);
     const length = maxLength ? value.toString()?.length : null;
@@ -86,7 +112,11 @@ function CustomTextfield({ onChange, value = '', IconComponent, size = 'small',
         inputProps.inputProps = { maxLength };
     }
     const helperText = others.helperText ?? (others.error === false ? ' ' : undefined);
-    return (_jsxs("div", { style: { position: 'relative', width: '100%', maxWidth: '100%' }, children: [_jsx(StyledTextField, { ...others, value: value, fullWidth: true, size: size, helperText: helperText, variant: "outlined", onChange: handleChange, slotProps: { input: inputProps } }), length !== null && (_jsxs("div", { style: helperText
+    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',

package/dist/Shared/ErkTimePicker/ErkTimePicker.d.ts

@@ -4,7 +4,7 @@ import { SelectProps as MuiSelectProps } from '@mui/material';
 import React from 'react';
 interface ErkTimePickerProps extends Omit<MuiSelectProps, 'color' | 'onChange'>, SelectorStyleProps {
     /** Currently selected value */
-    value: Time | undefined;
+    value?: Time;
     /** function called when value changes */
     onChange?: (time: Time) => void;
     /** Strig to place in the label */
@@ -21,6 +21,7 @@ interface ErkTimePickerProps extends Omit<MuiSelectProps, 'color' | 'onChange'>,
     minMinutes?: number;
     maxMinutes?: number;
     working?: boolean;
+    labelMargin?: number;
 }
 /**
  * Generic textfield with apps designs. Is class due to the use in the react-hook-forms library

package/dist/Shared/ErkTimePicker/ErkTimePicker.js

@@ -3,12 +3,12 @@ import { StyledHelperText, StyledInputLabel, StyledSelect } from '../ErkSelect/E
 import styles from './ErkTimePicker.module.css';
 import ClockIcon from '../../Icons/ClockIcon';
 import { ClickAwayListener, FormControl, InputAdornment, MenuItem, Popper, useTheme, } from '@mui/material';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { StyledTextField } from '../ErkTextField/ErkTextField';
-import Toggle from '../Toggle/Toggle';
-function CustomSelect({ value, onChange, label, error, required, pickDays, helperText, readOnly = false, disabled = false, minDays = 0, maxDays, pickHours, minHours = 0, maxHours, pickMinutes, minMinutes = 0, maxMinutes, working, ...others }) {
+import ErkToggle from '../Toggle/Toggle';
+function CustomSelect({ value, onChange, label, error, required, pickDays, helperText, readOnly = false, disabled = false, minDays = 0, maxDays, pickHours, minHours = 0, maxHours, pickMinutes, minMinutes = 0, maxMinutes, working, labelMargin = 5, size = 'small', ...others }) {
     const [open, setOpen] = useState(false);
-    const ref = React.useRef(null);
+    const ref = useRef(null);
     const { palette } = useTheme();
     const handleChange = useCallback((value) => {
         const time = { ...value };
@@ -34,7 +34,7 @@ function CustomSelect({ value, onChange, label, error, required, pickDays, helpe
             parts.push('*');
         return parts.join(' ');
     };
-    return (_jsxs(React.Fragment, { children: [open && (_jsx(ClickAwayListener, { mouseEvent: "onMouseDown", onClickAway: () => setOpen(false), children: _jsx(Popper, { open: true, anchorEl: ref.current, placement: 'bottom-start', modifiers: [
+    return (_jsxs(_Fragment, { children: [open && (_jsx(ClickAwayListener, { mouseEvent: "onMouseDown", onClickAway: () => setOpen(false), children: _jsx(Popper, { open: true, anchorEl: ref.current, placement: 'bottom-start', modifiers: [
                         {
                             name: 'preventOverflow',
                             enabled: true,
@@ -48,43 +48,19 @@ function CustomSelect({ value, onChange, label, error, required, pickDays, helpe
                             paddingTop: error && helperText ? '0px' : '30px',
                         }, children: [error && helperText && (_jsx("div", { className: styles.errorMessage, style: {
                                     color: palette.error.main,
-                                }, children: helperText })), pickDays && (_jsx("div", { className: styles.numberPickerContainer, children: _jsx(StyledTextField, { label: "D\u00EDas", type: "number", inputProps: {
-                                        min: minDays,
-                                        max: maxDays,
-                                    }, value: (value?.days ?? minDays) + '', onChange: (event) => {
-                                        handleChange({
-                                            ...value,
-                                            days: parseInt(event.target.value),
-                                        });
-                                    } }) })), pickHours && (_jsx("div", { className: styles.numberPickerContainer, children: _jsx(StyledTextField, { label: "Horas", type: "number", inputProps: {
-                                        min: minHours,
-                                        max: maxHours,
-                                    }, value: (value?.hours ?? minHours) + '', onChange: (event) => {
-                                        handleChange({
-                                            ...value,
-                                            hours: parseInt(event.target.value),
-                                        });
-                                    } }) })), pickMinutes && (_jsx("div", { className: styles.numberPickerContainer, children: _jsx(StyledTextField, { label: "Minutos", type: "number", inputProps: {
-                                        min: minMinutes,
-                                        max: maxMinutes,
-                                    }, value: (value?.minutes ?? minMinutes) + '', onChange: (event) => {
-                                        handleChange({
-                                            ...value,
-                                            minutes: parseInt(event.target.value),
-                                        });
-                                    } }) })), working === undefined && (_jsxs("div", { className: styles.workingContainer, children: ["H\u00E1biles:", _jsx(Toggle, { checked: !!value?.working, disabled: working !== undefined, onChange: (working) => {
+                                }, children: helperText })), pickDays && (_jsx("div", { className: styles.numberPickerContainer, children: _jsx(StyledTextField, { label: "D\u00EDas", type: "number", labelMargin: 0, value: (value?.days ?? minDays) + '', onChange: (event) => handleChange({ ...value, days: parseInt(event.target.value) }), inputProps: { min: minDays, max: maxDays } }) })), pickHours && (_jsx("div", { className: styles.numberPickerContainer, children: _jsx(StyledTextField, { label: "Horas", type: "number", labelMargin: 0, value: (value?.hours ?? minHours) + '', onChange: (event) => handleChange({ ...value, hours: parseInt(event.target.value) }), inputProps: { min: minHours, max: maxHours } }) })), pickMinutes && (_jsx("div", { className: styles.numberPickerContainer, children: _jsx(StyledTextField, { type: "number", label: "Minutos", labelMargin: 0, inputProps: { min: minMinutes, max: maxMinutes }, value: (value?.minutes ?? minMinutes) + '', onChange: (event) => handleChange({ ...value, minutes: parseInt(event.target.value) }) }) })), working === undefined && (_jsxs("div", { className: styles.workingContainer, children: ["H\u00E1biles:", _jsx(ErkToggle, { checked: !!value?.working, disabled: working !== undefined, onChange: (working) => {
                                             handleChange({
                                                 ...value,
                                                 working,
                                             });
-                                        } })] }))] }) }) })), _jsxs(FormControl, { fullWidth: true, size: "small", error: error, variant: "outlined", required: required, children: [label && (_jsx(StyledInputLabel, { disabled: disabled, open: open, children: label })), _jsx(StyledSelect, { ...others, ref: ref, open: open, readOnly: readOnly, disabled: disabled, onBlur: () => {
+                                        } })] }))] }) }) })), _jsxs(FormControl, { fullWidth: true, size: size, error: error, variant: "outlined", required: required, style: { marginTop: label ? labelMargin : undefined, maxWidth: '100%' }, children: [label && (_jsx(StyledInputLabel, { disabled: disabled, open: open, size: size === 'small' ? 'small' : 'normal', children: label })), _jsx(StyledSelect, { ...others, ref: ref, open: open, size: size, readOnly: readOnly, disabled: disabled, onBlur: () => {
                             if (!readOnly && !disabled)
                                 setOpen(false);
                         }, label: label ? calcLabel() : undefined, value: value ? 0 : '', title: calcTimeString(value), IconComponent: () => _jsx(_Fragment, {}), MenuProps: { sx: { visibility: 'hidden' } }, endAdornment: _jsx(InputAdornment, { position: "end", onClick: (e) => {
                                 e.stopPropagation();
                                 if (!readOnly && !disabled)
                                     setOpen(!open);
-                            }, children: _jsx(ClockIcon, {}) }), onFocus: (e) => {
+                            }, children: _jsx(ClockIcon, { size: size === 'small' ? 22 : 26 }) }), onFocus: (e) => {
                             if (!e.relatedTarget?.closest('.Erk-MuiPaper-root') && !readOnly && !disabled) {
                                 setOpen(true);
                             }

package/dist/Shared/Toggle/Toggle.d.ts

@@ -1,8 +1,9 @@
 interface ToggleProps {
-    checked: boolean;
-    onChange: (checked: boolean) => void;
+    checked?: boolean;
+    size?: 'small' | 'medium';
+    onChange?: (checked: boolean) => void | Promise<void>;
     /** If the Toggle is disabled */
     disabled?: boolean;
 }
-declare function Toggle({ checked, onChange }: ToggleProps): JSX.Element;
-export default Toggle;
+declare function ErkToggle({ checked, onChange, size, ...others }: ToggleProps): JSX.Element;
+export default ErkToggle;

package/dist/Shared/Toggle/Toggle.js

@@ -1,13 +1,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { styled, Switch as MuiSwitch } from '@mui/material';
-const Styled = styled(MuiSwitch)(({ theme, checked }) => ({
-    marginTop: -6,
-    marginBottom: -6,
+const Styled = styled(MuiSwitch)(({ theme, checked, size }) => ({
+    marginTop: size === 'medium' ? -6 : undefined,
+    marginBottom: size === 'medium' ? -6 : undefined,
+    overflow: 'visible',
+    '& .Erk-MuiSwitch-switchBase': {
+        marginTop: size === 'small' ? -5 : undefined,
+        transform: size === 'small' ? 'translateX(-5px)' : undefined,
+        color: 'var(--outlineGrey)',
+        '&.Mui-checked': {
+            transform: size === 'small' ? 'translateX(12px)' : undefined,
+            '& .Erk-MuiSwitch-thumb': {
+                backgroundColor: theme.palette.primary.main,
+            },
+        },
+        '& .Erk-MuiSwitch-thumb': {
+            width: size === 'small' ? 16 : 20,
+            height: size === 'small' ? 16 : 20,
+        },
+    },
     '& .Erk-MuiSwitch-track': {
         backgroundColor: checked ? theme.palette.primary.main : undefined,
+        opacity: checked ? 0.5 : undefined,
     },
 }));
-function Toggle({ checked, onChange }) {
-    return _jsx(Styled, { checked: checked, onChange: () => onChange(!checked), size: "medium" });
+function ErkToggle({ checked, onChange, size = 'medium', ...others }) {
+    return (_jsx(Styled, { ...others, checked: checked, onChange: () => {
+            if (onChange)
+                void onChange(!checked);
+        }, size: size }));
 }
-export default Toggle;
+export default ErkToggle;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arquimedes.co/eureka-forms",
   "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-  "version":"3.0.7-refactor",
+  "version":"3.0.10-refactor",
   "scripts": {
     "watch": "tsc --noEmit --watch --project tsconfig.app.json",
     "start": "vite",
@@ -45,6 +45,10 @@
     ]
   },
   "devDependencies": {
+    "@mui/material": "^6.3.0",
+    "@mui/x-data-grid-pro": "^7.23.5",
+    "@mui/x-date-pickers": "^7.23.3",
+    "@mui/x-date-pickers-pro": "^7.23.3",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.9",