@arquimedes.co/eureka-forms 3.0.48-test → 3.0.49-new-steps

package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { AddressFieldMode, LocationInputMode } from '../../../@Types/LocationFormStep';
+import { useFormStep } from '../../StepHooks';
+import FormContext from '../../../Contexts/FormContext';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { calcStepWidth } from '../../StepFunctions';
+import ErkLocationField from '../../../Shared/ErkLocationField/ErkLocationField';
+import { fieldConfig } from '../../../Shared/ErkLocationField/addressFields';
+import { validateRestrictions } from '../../../Shared/ErkLocationField/locationRestrictions';
+import styles from './MaterialLocationStep.module.css';
+function MaterialLocationStep({ step, editable }) {
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const { postview } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const isReadOnly = !editable || postview;
+    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size);
+    const { ref, value, onChange, error } = useFormStep(step, {
+        defaultValue: step.defaultValue ?? null,
+        rules: {
+            required: step.required ? 'La ubicación es obligatoria' : undefined,
+            validate: (val) => {
+                if (!val)
+                    return step.required ? 'La ubicación es obligatoria' : true;
+                if (val.source === LocationInputMode.MANUAL) {
+                    // Un campo es obligatorio en manual solo si no está omitido (FIXED lo llena solo).
+                    const detail = val.addressDetail;
+                    const isRequired = (key) => fieldConfig(step.addressFields, key).mode !== AddressFieldMode.OMIT;
+                    if (step.required && isRequired('street') && !detail?.street)
+                        return 'Por favor completa la calle en el formulario manual.';
+                    if (step.required && isRequired('city') && !detail?.city)
+                        return 'Por favor completa la ciudad en el formulario manual.';
+                    if (step.required && isRequired('country') && !detail?.country)
+                        return 'Por favor completa el país en el formulario manual.';
+                    return true;
+                }
+                if (val.latitude === undefined || val.longitude === undefined) {
+                    return step.required ? 'Coordenadas geográficas no capturadas.' : true;
+                }
+                // Restricciones geográficas (radio / geofence).
+                return validateRestrictions(val.latitude, val.longitude, step.restrictions) ?? true;
+            },
+        },
+    });
+    return (_jsxs("div", { className: styles.container, style: { width: widthStyle }, children: [step.label && _jsxs("div", { className: styles.label, children: [step.label, step.required && _jsx("span", { className: styles.required, children: " *" })] }), _jsx(ErkLocationField, { value: value, onChange: onChange, allowedModes: step.allowedModes, defaultMode: step.defaultMode, addressFields: step.addressFields, helperText: error?.message ?? step.description, required: step.required, error: !!error, readOnly: isReadOnly, inputRef: ref })] }));
+}
+export default MaterialLocationStep;

package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.module.css

@@ -0,0 +1,18 @@
+.container {
+    max-width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 5px 10px 0;
+    box-sizing: border-box;
+}
+
+.label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--eureka-text, #333);
+}
+
+.required {
+    color: var(--eureka-error, #e53935);
+}

package/dist/FormSteps/NumberStep/MaterialNumberStep/MaterialNumberStep.d.ts

@@ -0,0 +1,3 @@
+import { NumberStepProps } from '../NumberStep';
+declare function MaterialNumberStep({ step, editable }: NumberStepProps): JSX.Element;
+export default MaterialNumberStep;

package/dist/FormSteps/NumberStep/MaterialNumberStep/MaterialNumberStep.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState, useEffect } from 'react';
+import { NumberStepType, } from '../../../@Types/NumericFormSteps';
+import { useFormStep } from '../../StepHooks';
+import FormContext from '../../../Contexts/FormContext';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { calcStepWidth } from '../../StepFunctions';
+import ErkNumberField from '../../../Shared/ErkNumberField/ErkNumberField';
+import ErkSelect from '../../../Shared/ErkSelect/ErkSelect';
+import ErkMenuItem from '../../../Shared/ErkMenuItem';
+import styles from './MaterialNumberStep.module.css';
+const DEFAULT_CURRENCIES = ['COP', 'USD', 'EUR', 'MXN', 'CLP', 'BRL'];
+const DEFAULT_UNITS = ['unidades', 'kg', 'g', 'm', 'cm', 'l', 'ml', 'hrs', 'mes', 'año'];
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function getNumericValue(value) {
+    if (value === null || value === undefined)
+        return null;
+    if (typeof value === 'number')
+        return value;
+    return value.value;
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+function MaterialNumberStep({ step, editable }) {
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const { postview, formStyle } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const isReadOnly = !editable || postview;
+    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size);
+    const isComposite = step.numberType === NumberStepType.MONEY ||
+        step.numberType === NumberStepType.MEASURE ||
+        step.numberType === NumberStepType.UNIT_PRICE;
+    // Narrowed views — only used after the corresponding numberType check
+    const asMoney = step;
+    const asMeasure = step;
+    const asUnitPrice = step;
+    const { ref, value, onChange, error } = useFormStep(step, {
+        defaultValue: step.defaultValue ?? null,
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+            validate: (val) => {
+                if (!step.required && (val === null || val === undefined || val === ''))
+                    return true;
+                if (step.required && (val === null || val === undefined || val === ''))
+                    return 'Este campo es obligatorio';
+                const numVal = getNumericValue(val);
+                if (numVal === null)
+                    return 'Formato numérico inválido';
+                if (step.min !== undefined && numVal < step.min)
+                    return `El valor mínimo es ${step.min}`;
+                if (step.max !== undefined && numVal > step.max)
+                    return `El valor máximo es ${step.max}`;
+                return true;
+            },
+        },
+    });
+    // Currency/unit selectors
+    const [selectedCurrency, setSelectedCurrency] = useState(() => {
+        const v = value;
+        return v?.currency ?? asMoney.currency ?? asUnitPrice.currency ?? 'COP';
+    });
+    const [selectedUnit, setSelectedUnit] = useState(() => {
+        const v = value;
+        return v?.unit ?? asMeasure.unit ?? asUnitPrice.unit ?? 'unidades';
+    });
+    // Sync when value changes externally
+    useEffect(() => {
+        if (value && typeof value === 'object') {
+            if ('currency' in value && value.currency && value.currency !== selectedCurrency) {
+                void Promise.resolve().then(() => setSelectedCurrency(value.currency));
+            }
+            if ('unit' in value && value.unit && value.unit !== selectedUnit) {
+                void Promise.resolve().then(() => setSelectedUnit(value.unit));
+            }
+        }
+    }, [value, selectedCurrency, selectedUnit]);
+    // ---------------------------------------------------------------------------
+    // Handlers: wrap ErkNumberField's (number | null) into the step value shape
+    // ---------------------------------------------------------------------------
+    const handleNumberChange = (num) => {
+        if (num === null) {
+            onChange(null);
+            return;
+        }
+        if (step.numberType === NumberStepType.MONEY) {
+            onChange({ value: num, currency: selectedCurrency });
+        }
+        else if (step.numberType === NumberStepType.MEASURE) {
+            onChange({ value: num, unit: selectedUnit });
+        }
+        else if (step.numberType === NumberStepType.UNIT_PRICE) {
+            onChange({ value: num, currency: selectedCurrency, unit: selectedUnit });
+        }
+        else {
+            onChange(num);
+        }
+    };
+    const handleCurrencyChange = (curr) => {
+        const next = curr ?? 'USD';
+        setSelectedCurrency(next);
+        const num = getNumericValue(value);
+        if (num !== null) {
+            onChange(step.numberType === NumberStepType.UNIT_PRICE
+                ? { value: num, currency: next, unit: selectedUnit }
+                : { value: num, currency: next });
+        }
+    };
+    const handleUnitChange = (u) => {
+        const next = u ?? 'unidades';
+        setSelectedUnit(next);
+        const num = getNumericValue(value);
+        if (num !== null) {
+            onChange(step.numberType === NumberStepType.UNIT_PRICE
+                ? { value: num, currency: selectedCurrency, unit: next }
+                : { value: num, unit: next });
+        }
+    };
+    // ---------------------------------------------------------------------------
+    // Static suffix text shown inside ErkNumberField
+    // ---------------------------------------------------------------------------
+    const staticSuffix = () => {
+        if (step.numberType === NumberStepType.PERCENTAGE)
+            return '%';
+        if (step.numberType === NumberStepType.MONEY && !asMoney.allowCurrencyChange)
+            return asMoney.currency ?? 'USD';
+        if (step.numberType === NumberStepType.MEASURE && !asMeasure.allowUnitChange)
+            return asMeasure.unit ?? 'unidades';
+        // UNIT_PRICE renders its adornment fully inside the field only when neither part is editable.
+        if (step.numberType === NumberStepType.UNIT_PRICE && !asUnitPrice.allowCurrencyChange && !asUnitPrice.allowUnitChange)
+            return `${asUnitPrice.currency ?? 'USD'} / ${asUnitPrice.unit ?? 'unidades'}`;
+        if (!isComposite && step.suffix)
+            return step.suffix;
+        return undefined;
+    };
+    // ---------------------------------------------------------------------------
+    // Resolved selector lists
+    // ---------------------------------------------------------------------------
+    const currenciesList = step.numberType === NumberStepType.MONEY || step.numberType === NumberStepType.UNIT_PRICE
+        ? (step.availableCurrencies ?? DEFAULT_CURRENCIES)
+        : [];
+    const unitsList = step.numberType === NumberStepType.MEASURE || step.numberType === NumberStepType.UNIT_PRICE
+        ? (step.availableUnits ?? DEFAULT_UNITS)
+        : [];
+    const isMoneyDynamic = step.numberType === NumberStepType.MONEY && asMoney.allowCurrencyChange;
+    const isMeasureDynamic = step.numberType === NumberStepType.MEASURE && asMeasure.allowUnitChange;
+    // UNIT_PRICE has two independent toggles: currency and unit can each be fixed or selectable.
+    const isUnitPriceCurrencyDynamic = step.numberType === NumberStepType.UNIT_PRICE && !!asUnitPrice.allowCurrencyChange;
+    const isUnitPriceUnitDynamic = step.numberType === NumberStepType.UNIT_PRICE && !!asUnitPrice.allowUnitChange;
+    const isUnitPriceDynamic = isUnitPriceCurrencyDynamic || isUnitPriceUnitDynamic;
+    // ---------------------------------------------------------------------------
+    // Shared CSS vars
+    // ---------------------------------------------------------------------------
+    const cssVars = {
+        width: widthStyle,
+        '--eureka-outline': formStyle.outlineColor,
+        '--eureka-primary': formStyle.primaryColor,
+        '--eureka-text': formStyle.textColor,
+        '--eureka-bg': formStyle.standAloneBackgroundColor ?? '#fff',
+    };
+    // ---------------------------------------------------------------------------
+    // Read-only view
+    // ---------------------------------------------------------------------------
+    return (_jsx("div", { className: styles.container, style: cssVars, children: _jsxs("div", { className: styles.inputRow, children: [_jsx("div", { style: { flex: 1 }, children: _jsx(ErkNumberField, { label: step.label, value: getNumericValue(value), onChange: handleNumberChange, error: !!error, errorBorder: true, required: step.required, helperText: error?.message ?? step.description ?? undefined, inputRef: ref, min: step.min, max: step.max, decimals: step.numberType === NumberStepType.INTEGER ? 0 : (step.decimals ?? 2), suffix: staticSuffix(), readOnly: isReadOnly, spinner: step.spinner, step: step.step, placeholder: step.placeholder }) }), isMoneyDynamic && (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedCurrency, onChange: handleCurrencyChange, clearable: false, children: currenciesList.map((c) => (_jsx(ErkMenuItem, { value: c, children: c }, c))) }) })), isMeasureDynamic && (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedUnit, onChange: handleUnitChange, clearable: false, children: unitsList.map((u) => (_jsx(ErkMenuItem, { value: u, children: u }, u))) }) })), isUnitPriceDynamic && (_jsxs(_Fragment, { children: [isUnitPriceCurrencyDynamic ? (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedCurrency, onChange: handleCurrencyChange, clearable: false, children: currenciesList.map((c) => (_jsx(ErkMenuItem, { value: c, children: c }, c))) }) })) : (_jsx("span", { className: styles.suffixText, children: asUnitPrice.currency ?? 'USD' })), _jsx("span", { className: styles.dividerSlash, children: "/" }), isUnitPriceUnitDynamic ? (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedUnit, onChange: handleUnitChange, clearable: false, children: unitsList.map((u) => (_jsx(ErkMenuItem, { value: u, children: u }, u))) }) })) : (_jsx("span", { className: styles.suffixText, children: asUnitPrice.unit ?? 'unidades' }))] }))] }) }));
+}
+export default MaterialNumberStep;

package/dist/FormSteps/NumberStep/MaterialNumberStep/MaterialNumberStep.module.css

@@ -0,0 +1,94 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.inputRow {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    width: 100%;
+}
+
+.selectWrapper {
+    width: 100px;
+    min-width: 90px;
+}
+
+.dividerSlash {
+    align-self: flex-start;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    font-size: 20px;
+    font-weight: bold;
+    color: var(--eureka-text, #333);
+    opacity: 0.6;
+    margin-left: 2px;
+    margin-right: 2px;
+}
+
+.suffixText {
+    align-self: flex-start;
+    display: flex;
+    align-items: center;
+    height: 40px;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--eureka-primary, #1976d2);
+    padding: 0 4px;
+    user-select: none;
+}
+
+/* Read-Only Styles */
+.readOnlyContainer {
+    width: 100%;
+    margin-bottom: 8px;
+}
+
+.readOnlyCard {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    border: 1px solid var(--eureka-outline, #e0e0e0);
+    border-radius: 12px;
+    background-color: var(--eureka-bg, #ffffff);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.readOnlyCard:hover {
+    border-color: var(--eureka-primary, #1976d2);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.readOnlyDetails {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    width: 100%;
+}
+
+.readOnlyLabel {
+    font-size: 11px !important;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--eureka-text, #333) !important;
+    opacity: 0.6;
+    font-weight: 600 !important;
+}
+
+.readOnlyValue {
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    color: var(--eureka-primary, #1976d2) !important;
+}
+
+.readOnlyDesc {
+    font-size: 12px !important;
+    color: var(--eureka-text, #333) !important;
+    opacity: 0.5;
+    margin-top: 2px !important;
+}

package/dist/FormSteps/NumberStep/NumberStep.d.ts

@@ -0,0 +1,10 @@
+import { NumberStep } from '../../@Types/FormStep';
+import { StepProps } from '../Step';
+export interface NumberStepProps extends StepProps {
+    /** The NumberStep to display */
+    step: NumberStep;
+    /** The icon to display */
+    IconComponent?: React.ElementType;
+}
+declare function NumberStepComponent(props: NumberStepProps): JSX.Element;
+export default NumberStepComponent;

package/dist/FormSteps/NumberStep/NumberStep.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialNumberStep from './MaterialNumberStep/MaterialNumberStep';
+import { useAppSelector } from '../../hooks';
+function NumberStepComponent(props) {
+    const { formStyle } = useAppSelector((state) => state.global);
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialNumberStep, { ...props });
+        }
+    }
+}
+export default NumberStepComponent;

package/dist/FormSteps/Step.js

@@ -24,6 +24,10 @@ import CustomContext from '../Contexts/CustomContext';
 import { selectOriginalValue, useCondition } from './StepHooks';
 import TimePickerStep from './TimePickerStep/TimePickerStep';
 import PhoneInputStep from './PhoneInputStep/PhoneInputStep';
+import LocationStepComponent from './LocationStep/LocationStep';
+import NumberStepComponent from './NumberStep/NumberStep';
+import BookingStepComponent from './BookingStep/BookingStep';
+import CalendarStepComponent from './CalendarStep/CalendarStep';
 function StepComponent({ step, ...props }) {
     const { postview, partial } = useAppSelector((state) => state.global);
     const { customSteps, customClientInfoStep } = useContext(CustomContext);
@@ -74,6 +78,18 @@ function StepComponent({ step, ...props }) {
         case FormStepTypes.DATEPICKER: {
             return _jsx(DatePickerStep, { ...props, step: step, editable: editable });
         }
+        case FormStepTypes.LOCATION: {
+            return _jsx(LocationStepComponent, { ...props, step: step, editable: editable });
+        }
+        case FormStepTypes.NUMBER: {
+            return _jsx(NumberStepComponent, { ...props, step: step, editable: editable });
+        }
+        case FormStepTypes.BOOKING: {
+            return _jsx(BookingStepComponent, { ...props, step: step, editable: editable });
+        }
+        case FormStepTypes.CALENDAR: {
+            return _jsx(CalendarStepComponent, { ...props, step: step, editable: editable });
+        }
         case FormStepTypes.DATEPICKER_RANGE: {
             return _jsx(DatePickerRangeStep, { ...props, step: step, editable: editable });
         }

package/dist/FormSteps/StepFunctions.js

@@ -1,3 +1,4 @@
+import { NumberStepType, } from '../@Types/FormStep';
 import FormStepTypes, { ApiSelectorOptionTypes, ClassifierOptionTypes, EntityValueDataTypes, EntityValueOptionTypes, OptionTypes, } from '../constants/FormStepTypes';
 import CBRFormStepTypes from '../constants/CBRFormStepTypes';
 import AYFFormStepTypes from '../constants/AYFFormStepTypes';
@@ -87,6 +88,8 @@ function recursivelyCheckOpenSize(idStep, steps, values) {
             return size;
         }
         case FormStepTypes.DATEPICKER:
+        case FormStepTypes.LOCATION:
+        case FormStepTypes.NUMBER:
         case FormStepTypes.TEXTINPUT: {
             return step.size;
         }
@@ -117,6 +120,17 @@ export const calcDefaultValue = (step) => {
                 return getRawText();
             else
                 return '';
+        case FormStepTypes.LOCATION:
+            return step.defaultValue ?? null;
+        case FormStepTypes.NUMBER: {
+            const numStep = step;
+            if (numStep.numberType === NumberStepType.MONEY ||
+                numStep.numberType === NumberStepType.MEASURE ||
+                numStep.numberType === NumberStepType.UNIT_PRICE) {
+                return numStep.defaultValue ?? null;
+            }
+            return numStep.defaultValue ?? '';
+        }
         case FormStepTypes.RATING:
         case FormStepTypes.DATEPICKER:
         case FormStepTypes.DATEPICKER_RANGE:
@@ -135,7 +149,7 @@ export const calcDefaultValue = (step) => {
             return undefined;
     }
 };
-export const iterateNestedSteps = (idStep, steps, iteration, path = []) => {
+export const iterateNestedSteps = (idStep, steps, iteration, path = [idStep]) => {
     const step = steps[idStep];
     if (!step) {
         console.error('Missing Step:', idStep);
@@ -144,12 +158,15 @@ export const iterateNestedSteps = (idStep, steps, iteration, path = []) => {
     iteration(step, path);
     if (step.type === FormStepTypes.MAPPER) {
         for (const idStep of step.rootSteps) {
-            iterateNestedSteps(idStep, step.steps, iteration, [...path, step.id]);
+            iterateNestedSteps(idStep, step.steps, iteration, [
+                ...path,
+                step.id,
+            ]);
         }
     }
     else {
         for (const idSubStep of calcSubSteps(step.id, steps)) {
-            iterateNestedSteps(idSubStep, steps, iteration, path);
+            iterateNestedSteps(idSubStep, steps, iteration, [...path, step.id]);
         }
     }
 };
@@ -520,13 +537,13 @@ const evaluateEntityPropertyCondition = (condition, entity, entityValue) => {
                 case OperatorTypes.PAST_RELATIVE_MORE:
                 case OperatorTypes.FUTURE_RELATIVE_LESS:
                 case OperatorTypes.FUTURE_RELATIVE_MORE: {
-                    const date = getRelativeDate(condition.value?.days, condition.value?.hours, condition.value?.minutes, condition.propertyOperator === OperatorTypes.PAST_RELATIVE_LESS ||
+                    const date = getRelativeDate(condition.days, condition.hours, condition.minutes, condition.propertyOperator === OperatorTypes.PAST_RELATIVE_LESS ||
                         condition.propertyOperator === OperatorTypes.PAST_RELATIVE_MORE);
                     if (condition.propertyOperator === OperatorTypes.PAST_RELATIVE_LESS ||
                         condition.propertyOperator === OperatorTypes.FUTURE_RELATIVE_LESS)
-                        return new Date(value).getTime() < date.getTime();
+                        return new Date().getTime() > date.getTime();
                     else
-                        return new Date(value).getTime() > date.getTime();
+                        return new Date().getTime() < date.getTime();
                 }
             }
             return false;

package/dist/FormSteps/StepFunctions.test.js

@@ -1,3 +1,4 @@
+import * as Steps from '../@Types/FormStep';
 import AYFFormStepTypes from '../constants/AYFFormStepTypes';
 import CBRFormStepTypes from '../constants/CBRFormStepTypes';
 import FormStepTypes, { ApiSelectorOptionTypes, ClassifierOptionTypes, EntityValueOptionTypes, OptionTypes, } from '../constants/FormStepTypes';
@@ -496,6 +497,13 @@ describe('StepFunctions', function () {
             const defaultValue = calcDefaultValue(step);
             expect(defaultValue).toBe(null);
         });
+        test('Location step type', async () => {
+            const step = {
+                type: FormStepTypes.LOCATION,
+            };
+            const defaultValue = calcDefaultValue(step);
+            expect(defaultValue).toBe(null);
+        });
         test('Mapper, FileUpload, CBRFormStep types', async () => {
             const step1 = {
                 type: FormStepTypes.MAPPER,
@@ -527,6 +535,52 @@ describe('StepFunctions', function () {
             const defaultValue = calcDefaultValue(step);
             expect(defaultValue).toBeUndefined();
         });
+        test('Number step type without defaultValue', async () => {
+            const step1 = {
+                type: FormStepTypes.NUMBER,
+                numberType: Steps.NumberStepType.INTEGER,
+            };
+            const step2 = {
+                type: FormStepTypes.NUMBER,
+                numberType: Steps.NumberStepType.DECIMAL,
+            };
+            const step3 = {
+                type: FormStepTypes.NUMBER,
+                numberType: Steps.NumberStepType.PERCENTAGE,
+            };
+            const step4 = {
+                type: FormStepTypes.NUMBER,
+                numberType: Steps.NumberStepType.MONEY,
+            };
+            const step5 = {
+                type: FormStepTypes.NUMBER,
+                numberType: Steps.NumberStepType.MEASURE,
+            };
+            const step6 = {
+                type: FormStepTypes.NUMBER,
+                numberType: Steps.NumberStepType.UNIT_PRICE,
+            };
+            expect(calcDefaultValue(step1)).toBe('');
+            expect(calcDefaultValue(step2)).toBe('');
+            expect(calcDefaultValue(step3)).toBe('');
+            expect(calcDefaultValue(step4)).toBe(null);
+            expect(calcDefaultValue(step5)).toBe(null);
+            expect(calcDefaultValue(step6)).toBe(null);
+        });
+        test('Number step type with defaultValue', async () => {
+            const step1 = {
+                type: FormStepTypes.NUMBER,
+                numberType: Steps.NumberStepType.INTEGER,
+                defaultValue: 42,
+            };
+            const step2 = {
+                type: FormStepTypes.NUMBER,
+                numberType: Steps.NumberStepType.MONEY,
+                defaultValue: { value: 100, currency: 'USD' },
+            };
+            expect(calcDefaultValue(step1)).toBe(42);
+            expect(calcDefaultValue(step2)).toEqual({ value: 100, currency: 'USD' });
+        });
     });
     describe('iterateNestedSteps', function () {
         test('should iterate over nested steps', async () => {
@@ -565,9 +619,9 @@ describe('StepFunctions', function () {
             const iterationMock = vi.fn();
             iterateNestedSteps('idStep1', steps, iterationMock);
             expect(iterationMock).toHaveBeenCalledTimes(3);
-            expect(iterationMock).toHaveBeenCalledWith(steps.idStep1, []);
-            expect(iterationMock).toHaveBeenCalledWith(steps.idStep1.steps.idStep2, ['idStep1']);
-            expect(iterationMock).toHaveBeenCalledWith(steps.idStep1.steps.idStep3, ['idStep1']);
+            expect(iterationMock).toHaveBeenCalledWith(steps.idStep1, ['idStep1']);
+            expect(iterationMock).toHaveBeenCalledWith(steps.idStep1.steps.idStep2, ['idStep1', 'idStep1']);
+            expect(iterationMock).toHaveBeenCalledWith(steps.idStep1.steps.idStep3, ['idStep1', 'idStep1', 'idStep2']);
         });
     });
 });

package/dist/FormSteps/TitleStep/MaterialTitleStep/MaterialTitleStep.js

@@ -31,13 +31,12 @@ function TitleStep({ step }) {
         return values;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [stableDepsValues]);
-    const path = useMemo(() => [...step.stepPath, step.id].join('.'), [step.stepPath, step.id]);
     return (_jsxs("div", { className: styles.container, style: {
             color: formStyle.textColor,
             width: widthStats.currentBreakPoint <= size ? '100%' : calcStepWidth(size, form.size),
         }, children: [_jsx("div", { className: styles.titleLbl, style: {
                     textAlign: widthStats.isMobile && widthStats.currentBreakPoint <= size ? 'center' : 'start',
-                }, children: _jsx(SmartDraftRenderer, { draft: title, dependencies: values, property: `${path}.title`, onChange: (title) => onChange({ ...value, title }) }) }), _jsx("div", { className: styles.descriptionPar, children: _jsx(SmartDraftRenderer, { draft: description, dependencies: values, margin: title ? '10px 0px' : '0px 0px 5px 0px', property: `${path}.description`, onChange: (description) => onChange({ ...value, description }) }) })] }));
+                }, children: _jsx(SmartDraftRenderer, { draft: title, dependencies: values, property: `${step.stepPath.join('.')}.title`, onChange: (title) => onChange({ ...value, title }) }) }), _jsx("div", { className: styles.descriptionPar, children: _jsx(SmartDraftRenderer, { draft: description, dependencies: values, margin: title ? '10px 0px' : '0px 0px 5px 0px', property: `${step.stepPath.join('.')}.description`, onChange: (description) => onChange({ ...value, description }) }) })] }));
 }
 export default TitleStep;
 function calcBaseDraft(value) {

package/dist/Icons/@ErkIcon.d.ts

@@ -9,6 +9,6 @@ export interface IconProps {
     preserveAspectRatio?: 'none';
 }
 export declare function useIconProps(props: IconProps): IconProps & {
-    width?: number | string;
-    height?: number | string;
+    width?: number;
+    height?: number;
 };

package/dist/Icons/@ErkIcon.js

@@ -1,7 +1,7 @@
 export function useIconProps(props) {
     return {
-        width: props.size ?? '1em',
-        height: props.size ?? '1em',
+        width: props.size,
+        height: props.size,
         className: props.className ? props.className + ' ErkIcon' : 'ErkIcon',
         fill: 'currentColor',
         ...props,

package/dist/Icons/AddIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './@ErkIcon';
+declare function AddIcon(props: IconProps): JSX.Element;
+export default AddIcon;

package/dist/Icons/AddIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useIconProps } from './@ErkIcon';
+function AddIcon(props) {
+    const iconProps = useIconProps(props);
+    return (_jsx("svg", { ...iconProps, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" }) }));
+}
+export default AddIcon;

package/dist/Icons/EditIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './@ErkIcon';
+declare function EditIcon(props: IconProps): JSX.Element;
+export default EditIcon;

package/dist/Icons/{EmailIcon.js → EditIcon.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useIconProps } from './@ErkIcon';
-function EmailIcon(props) {
+function EditIcon(props) {
     const iconProps = useIconProps(props);
-    return (_jsx("svg", { ...iconProps, version: "1.1", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-1 14H5c-.55 0-1-.45-1-1V8l6.94 4.34c.65.41 1.47.41 2.12 0L20 8v9c0 .55-.45 1-1 1zm-7-7L4 6h16l-8 5z" }) }));
+    return (_jsx("svg", { ...iconProps, version: "1.1", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" }) }));
 }
-export default EmailIcon;
+export default EditIcon;

package/dist/Icons/RemoveIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './@ErkIcon';
+declare function RemoveIcon(props: IconProps): JSX.Element;
+export default RemoveIcon;

package/dist/Icons/RemoveIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useIconProps } from './@ErkIcon';
+function RemoveIcon(props) {
+    const iconProps = useIconProps(props);
+    return (_jsx("svg", { ...iconProps, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M19 13H5v-2h14v2z" }) }));
+}
+export default RemoveIcon;

package/dist/Icons/ViewDayIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './@ErkIcon';
+declare function ViewDayIcon(props: IconProps): JSX.Element;
+export default ViewDayIcon;

package/dist/Icons/ViewDayIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useIconProps } from './@ErkIcon';
+function ViewDayIcon(props) {
+    const iconProps = useIconProps(props);
+    return (_jsx("svg", { ...iconProps, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2 21h19v-2H2v2zm0-4h19v-8H2v8zm0-10h19V5H2v2z" }) }));
+}
+export default ViewDayIcon;