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

package/dist/@Types/FormStep.d.ts

@@ -5,13 +5,7 @@ import { EurekaDraft } from './Draft/Draft';
 import { ErkValue } from './ErkValue';
 import * as GSteps from './GenericFormSteps';
 import { Time } from './Time';
-import { LocationStep } from './LocationFormStep';
-import { NumberStep, NumberStepType } from './NumericFormSteps';
-import { BookingStep } from './BookingFormStep';
-import { CalendarStep } from './CalendarFormStep';
-export type { LocationStep, NumberStep, BookingStep, CalendarStep };
-export { NumberStepType };
-export type FormStep = Title | TimePicker | Rating | CheckBox | TextArea | TextInput | DatePicker | FileUpload | Separator | FormSelector | ClassifierSelector | Collapsible | EntityValuePicker | ApiSelector | Mapper | DatePickerRange | LocationStep | NumberStep | BookingStep | CalendarStep;
+export type FormStep = Title | TimePicker | Rating | CheckBox | TextArea | TextInput | DatePicker | FileUpload | Separator | FormSelector | ClassifierSelector | Collapsible | EntityValuePicker | ApiSelector | Mapper | DatePickerRange;
 export interface Title extends GSteps.GBaseStep {
     type: FormStepTypes.TITLE;
     title?: EurekaDraft;
@@ -238,3 +232,4 @@ export interface Mapper extends GSteps.GBaseStep {
     deletable?: boolean;
     max?: number;
 }
+export {};

package/dist/@Types/FormStep.js

@@ -1,2 +1 @@
-import { NumberStepType } from './NumericFormSteps';
-export { NumberStepType };
+export {};

package/dist/@Types/GenericFormSteps.d.ts

@@ -9,6 +9,13 @@ export interface GBaseStep {
     clientInfoType?: string;
     dependencies?: string[];
     condition?: Condition;
+    /**
+     * Per-screen column-span overrides (tablet/mobile) written by the form editor. Desktop's
+     * source of truth stays the step's legacy `size`, and a missing entry falls back to the span
+     * derived from it (see `resolveStepSpan` in FormSteps/StepFunctions), so a form with no
+     * explicit overrides renders exactly like the legacy shape.
+     */
+    sizes?: Partial<Record<'tablet' | 'mobile', 1 | 2 | 3 | 4>>;
 }
 export interface GTitle extends GBaseStep {
     title: string;

package/dist/App/App.cbr.test.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import '@testing-library/jest-dom';
+import App from './App';
+import CBRFormStepTypes from '../constants/CBRFormStepTypes';
+const INCIDENT = {
+    idSpaceStep: 'CBR_TIPO_ESPACIO-PYDqn',
+    idElementStep: 'CBR_LOCATIVAS-fp6xL',
+    idCommentStep: 'CBR_COMENTARIO-sQjpP',
+    num: 1,
+};
+const ID_SUB_ELEMENT_STEP = 'CBR_LOCATIVAS-G4S0r';
+/** Shaped after a real posventa ticket: incidents are stored flat, keyed by generated step ids. */
+const POSVENTA_VALUES = {
+    CBR_INCIDENCIAS: [INCIDENT],
+    [INCIDENT.idSpaceStep]: { id: '35365', label: 'Zona de Oficios' },
+    [INCIDENT.idCommentStep]: 'GRAN HUMEDAD!!!',
+    [INCIDENT.idElementStep]: { id: '06', label: 'CIELOS', subStep: ID_SUB_ELEMENT_STEP },
+    [ID_SUB_ELEMENT_STEP]: { id: '0601', label: 'Cielo Falso' },
+};
+const POSVENTA_FORM = {
+    name: 'Formulario PosVenta',
+    firstSection: 'FIRST',
+    sections: {
+        FIRST: { id: 'FIRST', name: '', nextSection: null, steps: ['CBR_INCIDENCIAS'] },
+    },
+    steps: {
+        CBR_INCIDENCIAS: {
+            id: 'CBR_INCIDENCIAS',
+            type: CBRFormStepTypes.CBR_INCIDENCIAS,
+            label: 'Incidencias',
+            description: null,
+            addBtnLabel: 'Agregar Incidencia',
+            required: true,
+            unitLabel: 'Incidencia',
+            dependencies: ['CBR_PROYECTO'],
+            spaceStep: {
+                label: 'Espacio',
+                description: null,
+                size: 1,
+                required: true,
+                showIcon: true,
+                searchable: true,
+            },
+            commentStep: { label: 'Comentario', description: null, size: 1, required: true },
+            elementStep: {
+                label: 'Elemento',
+                description: null,
+                size: 1,
+                required: true,
+                showIcon: true,
+                searchable: true,
+                subStep: {
+                    label: 'Elemento Hijo',
+                    description: null,
+                    size: 1,
+                    required: true,
+                    showIcon: true,
+                    searchable: true,
+                },
+            },
+        },
+    },
+    size: { blockNum: 4, blockSize: 210, spacingSize: 20 },
+};
+describe('CBR posventa postview', () => {
+    it('renders the submitted incidents read-only', async () => {
+        const { container } = render(_jsx(App, { formData: POSVENTA_FORM, valuesData: POSVENTA_VALUES, idOrganization: 'melendez', postview: true, internal: true, isWidget: true, editable: false }));
+        await waitFor(() => {
+            expect(container.textContent).toContain('Incidencia 1');
+        });
+        expect(container.textContent).toContain('GRAN HUMEDAD!!!');
+        expect(screen.getByDisplayValue('Zona de Oficios')).toBeInTheDocument();
+        expect(screen.getByDisplayValue('CIELOS')).toBeInTheDocument();
+        expect(screen.getByDisplayValue('Cielo Falso')).toBeInTheDocument();
+    });
+});

package/dist/App/App.d.ts

@@ -1,4 +1,4 @@
-import { Classifier, Form } from '../@Types/Form';
+import { Classifier, Form, FormStyle } from '../@Types/Form';
 import './App.css';
 import { CustomStep, CustomStepProps } from '../FormSteps/CustomStep';
 import { EditorState } from 'draft-js';
@@ -17,6 +17,11 @@ export interface AppProps {
     formData?: Form;
     /** If the widget is usedInternally */
     internal?: boolean;
+    /**
+     * Overrides for the built-in internal style — only honored with `internal`, where the form's own
+     * style is ignored. Lets the host app (the admin) render the form in its color scheme, e.g. dark mode.
+     */
+    formStyle?: Partial<FormStyle>;
     /** If the widget is a postview (view what the user filled)*/
     postview?: boolean;
     /** If postview should only show steps with values*/

package/dist/App/AppHooks.js

@@ -12,7 +12,7 @@ import { iterateNestedSteps } from '../FormSteps/StepFunctions';
 import { createNextState } from '@reduxjs/toolkit';
 import { BaseConfirmationMessage } from '../Contexts/FormContext';
 export const useSetupApp = (isEmbedded, props) => {
-    const { preview, internal, postview, partial, editable, handleConfirmed, customSteps, valuesData, apiKey, formData, classifiers, idCurrentAgent, ...others } = props;
+    const { preview, internal, postview, partial, editable, handleConfirmed, customSteps, valuesData, apiKey, formData, classifiers, idCurrentAgent, formStyle: formStyleOverride, ...others } = props;
     const [form, setForm] = useState(undefined);
     const [organization, setOrganization] = useState(undefined);
     const dispatch = useAppDispatch();
@@ -112,7 +112,7 @@ export const useSetupApp = (isEmbedded, props) => {
             user,
             apiKey,
             formStyle: internal
-                ? InternalFormStyle
+                ? { ...InternalFormStyle, ...(formStyleOverride ?? {}) }
                 : {
                     ...InternalFormStyle,
                     ...(form?.style ?? {}),

package/dist/FormSteps/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/Incident/Incident.js

@@ -6,6 +6,7 @@ import FormContext from '../../../../../Contexts/FormContext';
 import { useAppSelector } from '../../../../../hooks';
 import { useContext } from 'react';
 import DeleteIcon from '../../../../../Icons/DeleteIcon';
+import { pillSurfaceStyle } from '../../../../../Utils/SurfaceStyle';
 function IncidentComponent({ step, incident, handleDelete, ...others }) {
     const { formStyle, postview } = useAppSelector((state) => state.global);
     const form = useContext(FormContext);
@@ -16,7 +17,7 @@ function IncidentComponent({ step, incident, handleDelete, ...others }) {
     if (incident.deleted) {
         return _jsx("div", {});
     }
-    return (_jsx("div", { className: widthStats.isMobile || form.size.blockNum < 3 ? styles.mobileContainer : styles.container, children: _jsxs("div", { className: styles.contentContainer, style: {
+    return (_jsx("div", { className: widthStats.isMobile || form.size.blockNum < 3 ? styles.mobileContainer : styles.container, style: pillSurfaceStyle(formStyle), children: _jsxs("div", { className: styles.contentContainer, style: {
                 width: (form.size.blockSize + form.size.spacingSize) * (form.size.blockNum - 1),
             }, children: [_jsxs("div", { className: styles.titleLbl, style: { color: formStyle.textColor }, children: [step.unitLabel + ' ' + incident.num, ":"] }), _jsx("div", { className: !others.editable || postview ? styles.disabledDeleteBtn : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: () => {
                         if (others.editable && !postview) {

package/dist/FormSteps/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/Incident/Incident.module.css

@@ -1,7 +1,6 @@
 .container,
 .mobileContainer {
-    background-color: #f0f0f0;
-    border: 1px solid #d6d6d6;
+    border: 1px solid;
     width: fit-content;
     border-radius: 20px;
     margin-bottom: 10px;

package/dist/FormSteps/CheckBoxStep/CheckBoxStep.mobileLabel.test.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it } from 'vitest';
+import '@testing-library/jest-dom';
+import { Provider } from 'react-redux';
+import { useForm, FormProvider } from 'react-hook-form';
+import { configureStore } from '@reduxjs/toolkit';
+import { EurekaFormsReducer, defaultRootState } from '../../Utils/store';
+import { RootApi } from '../../Utils/_api';
+import FormStepTypes from '../../constants/FormStepTypes';
+import { StoreContext } from '../../Utils/StoreContext';
+import { IdFormContext } from '../../Contexts/FormContext';
+import FormContext from '../../Contexts/FormContext';
+import SectionContext from '../../Contexts/SectionContext';
+import MaterialProviders from '../../Utils/MaterialProviders';
+import InternalFormStyle from '../../constants/InternalFormStyle';
+import CheckBoxStep from './CheckBoxStep';
+import styles from './MaterialCheckBoxStep/MaterialCheckBoxStep.module.css';
+const STORY_FORM_ID = 'STORY_FORM';
+const LONG_LABEL = 'Cumplimiento de lo ofrecido frente a lo entregado en su vivienda';
+const checkBoxStep = {
+    id: 'checkbox-step',
+    idSection: 'SECTION_1',
+    stepPath: ['checkbox-step'],
+    type: FormStepTypes.CHECKBOX,
+    label: LONG_LABEL,
+    description: null,
+    required: false,
+    size: 2,
+};
+const form = {
+    firstSection: 'SECTION_1',
+    sections: {
+        SECTION_1: { id: 'SECTION_1', name: 'Sección 1', steps: [], nextSection: null },
+    },
+    steps: { 'checkbox-step': { ...checkBoxStep } },
+    confirmationMessage: { blocks: [], entityMap: {} },
+    showLink: false,
+    size: { blockSize: 200, blockNum: 4, spacingSize: 10 },
+};
+function makeStore(currentBreakPoint) {
+    return configureStore({
+        reducer: { forms: EurekaFormsReducer, [RootApi.reducerPath]: RootApi.reducer },
+        preloadedState: {
+            forms: {
+                [STORY_FORM_ID]: {
+                    ...defaultRootState,
+                    widthStats: {
+                        currentBreakPoint,
+                        isMobile: currentBreakPoint <= checkBoxStep.size,
+                        isResponsive: true,
+                    },
+                },
+            },
+        },
+        middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(RootApi.middleware),
+    });
+}
+function Harness({ currentBreakPoint }) {
+    const methods = useForm({ mode: 'onTouched' });
+    return (_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(Provider, { store: makeStore(currentBreakPoint), context: StoreContext, children: _jsx(IdFormContext.Provider, { value: STORY_FORM_ID, children: _jsx(FormContext.Provider, { value: form, children: _jsx(SectionContext.Provider, { value: "SECTION_1", children: _jsx(FormProvider, { ...methods, children: _jsx(CheckBoxStep, { step: checkBoxStep, editable: true }) }) }) }) }) }) }));
+}
+function getLabelDiv() {
+    // the leaf div holding only the label text (the wrapping column also matches by textContent)
+    return screen.getByText((_, element) => element?.tagName === 'DIV' &&
+        element.children.length === 0 &&
+        element.textContent === `${LONG_LABEL}:`);
+}
+/** Makes every element report a 2-line-clamped overflow (jsdom has no layout). */
+function mockLabelOverflow() {
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+        configurable: true,
+        get() {
+            return 100;
+        },
+    });
+    Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
+        configurable: true,
+        get() {
+            return 48;
+        },
+    });
+}
+afterEach(() => {
+    // remove the overflow mocks so other tests see jsdom defaults again
+    delete HTMLElement.prototype.scrollHeight;
+    delete HTMLElement.prototype.clientHeight;
+});
+describe('CheckBoxStep label on collapsed (mobile) breakpoints', () => {
+    it('wraps the label (2-line clamp) instead of single-line truncating it when the step collapses to 100% width', () => {
+        // breakpoint 1 <= size 2 → MaterialInputContainer renders the step at width: 100%
+        render(_jsx(Harness, { currentBreakPoint: 1 }));
+        const label = getLabelDiv();
+        expect(label.className).toBe(styles.clampLbl);
+        expect(label.className).not.toBe(styles.overflowLbl);
+        // the fixed desktop pixel maxWidth must not constrain the collapsed label
+        expect(label.style.maxWidth).toBe('');
+    });
+    it('keeps the single-line ellipsis label on desktop widths (control)', () => {
+        // breakpoint 4 > size 2 → the step keeps its fixed desktop width
+        render(_jsx(Harness, { currentBreakPoint: 4 }));
+        const label = getLabelDiv();
+        expect(label.className).toBe(styles.overflowLbl);
+        expect(label.style.maxWidth).not.toBe('');
+        expect(screen.queryByRole('button', { name: 'ver más' })).not.toBeInTheDocument();
+    });
+    it('shows no "ver más" toggle when the label fits in the clamp', () => {
+        // jsdom defaults: scrollHeight === clientHeight === 0 → nothing is clipped
+        render(_jsx(Harness, { currentBreakPoint: 1 }));
+        expect(screen.queryByRole('button', { name: 'ver más' })).not.toBeInTheDocument();
+    });
+    it('offers "ver más" when the clamp clips the label, and expands/collapses on click', async () => {
+        mockLabelOverflow();
+        render(_jsx(Harness, { currentBreakPoint: 1 }));
+        const toggle = await screen.findByRole('button', { name: 'ver más' });
+        await userEvent.click(toggle);
+        expect(getLabelDiv().className).toBe(styles.expandedLbl);
+        const collapseToggle = screen.getByRole('button', { name: 'ver menos' });
+        await userEvent.click(collapseToggle);
+        expect(getLabelDiv().className).toBe(styles.clampLbl);
+    });
+});

package/dist/FormSteps/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './MaterialCheckBoxStep.module.css';
 import ErkCheckBox from '../../../Shared/ErkCheckbox/ErkCheckBox';
-import React, { useContext } from 'react';
+import React, { useContext, useLayoutEffect, useRef, useState } from 'react';
 import StepComponent from '../../Step';
 import FormContext from '../../../Contexts/FormContext';
-import { useAppSelector } from '../../../hooks';
+import { useAppSelector, selectWidthStats } from '../../../hooks';
 import { useFormStep } from '../../StepHooks';
 import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
 import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
-import { calcStepWidth } from '../../StepFunctions';
+import { calcStepWidth, resolveStepSpan } from '../../StepFunctions';
 function CheckBoxStep({ step, editable }) {
     const { ref, value, onChange, error, field } = useFormStep(step, {
         defaultValue: step.defaultValue ?? false,
@@ -19,6 +19,26 @@ function CheckBoxStep({ step, editable }) {
     });
     const { formStyle, postview } = useAppSelector((state) => state.global);
     const form = useContext(FormContext);
+    const widthStats = useAppSelector(selectWidthStats);
+    const span = resolveStepSpan(step, widthStats, form.size);
+    // when the breakpoint collapses the step to width: 100% (see MaterialInputContainer),
+    // the fixed desktop pixel width no longer matches the real available space
+    const collapsed = widthStats.currentBreakPoint <= span;
+    const labelRef = useRef(null);
+    const [expanded, setExpanded] = useState(false);
+    const [clamped, setClamped] = useState(false);
+    useLayoutEffect(() => {
+        if (!collapsed || expanded)
+            return;
+        const measure = () => {
+            const label = labelRef.current;
+            if (label)
+                setClamped(label.scrollHeight > label.clientHeight);
+        };
+        measure();
+        window.addEventListener('resize', measure);
+        return () => window.removeEventListener('resize', measure);
+    }, [collapsed, expanded, step.label]);
     const renderNested = () => {
         const steps = value ? step.steps : step.uncheckedSteps;
         return (_jsx(React.Fragment, { children: steps?.map((idStep) => {
@@ -27,12 +47,19 @@ function CheckBoxStep({ step, editable }) {
             }) }));
     };
     const renderLabel = (colon = false) => {
-        return (_jsxs("div", { className: step.size === 4 ? styles.checkboxLbl : styles.overflowLbl, style: {
-                maxWidth: calcStepWidth(step.size, form.size) - 45,
-            }, children: [step.label, step.required ? ' *' : '', colon ? ':' : ''] }));
+        const label = `${step.label}${step.required ? ' *' : ''}${colon ? ':' : ''}`;
+        if (!collapsed) {
+            return (_jsx("div", { className: span === 4 ? styles.checkboxLbl : styles.overflowLbl, style: {
+                    maxWidth: calcStepWidth(span, form.size) - 45,
+                }, children: label }));
+        }
+        return (_jsxs("div", { className: styles.labelColumn, children: [_jsx("div", { ref: labelRef, className: expanded ? styles.expandedLbl : styles.clampLbl, children: label }), (clamped || expanded) && (_jsx("button", { type: "button", className: styles.toggleLbl, style: { color: formStyle.primaryColor }, onClick: (event) => {
+                        event.stopPropagation();
+                        setExpanded(!expanded);
+                    }, children: expanded ? 'ver menos' : 'ver más' }))] }));
     };
     return (_jsxs(StepFillerContainer, { step: step, children: [_jsx(MaterialInputContainer, { step: step, editable: editable, maxHeight: step.size < 4, children: _jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.labelCheckBoxContainer, style: {
-                                height: step.size < 4 ? 31 : undefined,
+                                height: span < 4 && !collapsed ? 31 : undefined,
                                 minHeight: 31,
                                 alignItems: step.isList ? 'start' : 'center',
                             }, children: [step.label && !step.isList && renderLabel(true), _jsx(ErkCheckBox, { ...field, padding: "0px", inputRef: ref, error: !!error, checked: value, onChange: onChange, "data-testid": step.id, readOnly: !editable || postview }), step.label && step.isList && renderLabel()] }), (step.description ?? !!error) && (_jsx("div", { className: styles.descriptionPar, style: {

package/dist/FormSteps/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.module.css

@@ -14,6 +14,36 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
+.labelColumn {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1 1 auto;
+    min-width: 0;
+    margin-right: 10px;
+    margin-left: 10px;
+}
+.clampLbl,
+.expandedLbl {
+    font-size: 18px;
+}
+.clampLbl {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+}
+.toggleLbl {
+    background: none;
+    border: none;
+    padding: 0;
+    margin-top: 2px;
+    font-size: 13px;
+    font-weight: 700;
+    font-family: inherit;
+    cursor: pointer;
+}
 .labelCheckBoxContainer {
     display: flex;
     align-items: center;

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/MapperElementComponent.js

@@ -25,7 +25,7 @@ function MapperElementComponent(props) {
     const mapSubSteps = () => {
         return (_jsx(CustomContext.Provider, { value: nestedCustomContext, children: step.rootSteps.map((idSubStep) => {
                 const subStep = form.steps[element.ids[idSubStep]];
-                return (_createElement(StepComponent, { ...props, editable: editable ? (step.editable ?? true) : false, step: subStep, key: element.ids[idSubStep] }));
+                return (_createElement(StepComponent, { ...props, editable: editable ? (step.editable ?? true) : false, step: subStep, key: idSubStep }));
             }) }));
     };
     switch (step.style?.type) {

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/PagedMapperElement/PagedMapperElement.js

@@ -10,6 +10,7 @@ import DeleteIcon from '../../../../../Icons/DeleteIcon';
 import { MobileStepper, styled } from '@mui/material';
 import ArrowRightIcon from '../../../../../Icons/ArrowRightIcon';
 import ArrowLeftIcon from '../../../../../Icons/ArrowLeftIcon';
+import { pillSurfaceStyle } from '../../../../../Utils/SurfaceStyle';
 function PagedMapperElement({ step, num, loading, element, children, editable, onChange, value, handleDelete, customElementModifiers, customElementRender, }) {
     const deletable = step.deletable ?? true;
     const { size } = useContext(FormContext);
@@ -77,7 +78,7 @@ function PagedMapperElement({ step, num, loading, element, children, editable, o
     const { calcName } = customElementModifiers ?? {};
     const name = calcName ? calcName(element) : step.unitLabel ? step.unitLabel + ' ' + (num + 1) : '';
     const renderElement = (renderElementButtons) => {
-        return (_jsx("div", { className: widthStats.isMobile ? styles.mobileContainer : styles.container, ref: containerRef, children: _jsxs("div", { className: styles.contentContainer, style: {
+        return (_jsx("div", { className: widthStats.isMobile ? styles.mobileContainer : styles.container, style: pillSurfaceStyle(formStyle), ref: containerRef, children: _jsxs("div", { className: styles.contentContainer, style: {
                     width: (size.blockSize + size.spacingSize) * (step.style?.size ?? size.blockNum - 1),
                 }, children: [name && (_jsx("div", { className: styles.titleLbl, style: { color: formStyle.textColor }, children: loading ? 'Cargando...' : name + ':' })), _jsxs("div", { className: styles.btnsContainer, children: [renderElementButtons?.(element), (deletable || !element.isOriginal) && (_jsx("div", { className: !editable || postview ? styles.disabledDeleteBtn : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: () => {
                                     if (editable && !postview) {

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/PagedMapperElement/PagedMapperElement.module.css

@@ -4,8 +4,7 @@
 
 .container,
 .mobileContainer {
-    background-color: #f0f0f0;
-    border: 1px solid #d6d6d6;
+    border: 1px solid;
     width: fit-content;
     border-radius: 20px;
     margin-bottom: 10px;

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/PillMapperElement/PillMapperElement.js

@@ -4,6 +4,7 @@ import styles from './PillMapperElement.module.css';
 import FormContext from '../../../../../Contexts/FormContext';
 import { useAppSelector } from '../../../../../hooks';
 import DeleteIcon from '../../../../../Icons/DeleteIcon';
+import { pillSurfaceStyle } from '../../../../../Utils/SurfaceStyle';
 function PillMapperElement({ step, num, loading, element, children, editable, handleDelete, customElementModifiers, customElementRender, }) {
     const deletable = step.deletable ?? true;
     const { size } = useContext(FormContext);
@@ -16,6 +17,7 @@ function PillMapperElement({ step, num, loading, element, children, editable, ha
     const isDeleted = customElementModifiers?.isDeleted?.(element) ?? false;
     const renderElement = (renderElementButtons) => {
         return (_jsx("div", { className: widthStats.isMobile ? styles.mobileContainer : styles.container, style: {
+                ...pillSurfaceStyle(formStyle),
                 opacity: isDeleted ? 0.5 : 1,
             }, children: _jsxs("div", { className: styles.contentContainer, style: {
                     width: (size.blockSize + size.spacingSize) * (step.style?.size ?? size.blockNum - 1),

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/PillMapperElement/PillMapperElement.module.css

@@ -4,8 +4,7 @@
 
 .container,
 .mobileContainer {
-    background-color: #f0f0f0;
-    border: 1px solid #d6d6d6;
+    border: 1px solid;
     width: fit-content;
     border-radius: 20px;
     margin-bottom: 10px;

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

@@ -1,16 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styles from './MaterialPhoneInputStep.module.css';
-import { calcStepWidth } from '../../StepFunctions';
+import { calcStepWidth, resolveStepSpan } from '../../StepFunctions';
 import { useContext } from 'react';
 import FormContext from '../../../Contexts/FormContext';
-import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { selectWidthStats, useAppSelector } from '../../../hooks';
 import { useFormStep } from '../../StepHooks';
 import ErkPhoneInput from '../../../Shared/ErkPhoneInput/EkrPhoneInput';
 import { isEmptyPhoneNumber, isValidPhoneNumber } from '../../../Utils/PhoneFunctions';
 function PhoneInputStep({ step, editable, defaultValue = step.defaultValue }) {
-    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const widthStats = useAppSelector(selectWidthStats);
     const postview = useAppSelector((state) => state.global.postview);
     const form = useContext(FormContext);
+    const span = resolveStepSpan(step, widthStats, form.size);
     const { ref, value, onChange, error, field } = useFormStep(step, {
         defaultValue: defaultValue ?? '',
         debounce: true,
@@ -26,7 +27,7 @@ function PhoneInputStep({ step, editable, defaultValue = step.defaultValue }) {
         },
     });
     return (_jsx("div", { className: styles.container, style: {
-            width: currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size),
+            width: widthStats.currentBreakPoint <= span ? '100%' : calcStepWidth(span, form.size),
             minHeight: step.description || (!postview && editable) ? '55px' : '43px',
         }, 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 }) }));
 }

package/dist/FormSteps/Step.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import FormStepTypes from '../constants/FormStepTypes';
 import SelectorStep from './SelectorStep/SelectorStep';
 import SeparatorStep from './SeparatorStep/SeparatorStep';
@@ -24,18 +24,15 @@ 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 AvailabilityStepComponent from './AvailabilityStep/AvailabilityStep';
 function StepComponent({ step, ...props }) {
     const { postview, partial } = useAppSelector((state) => state.global);
     const { customSteps, customClientInfoStep } = useContext(CustomContext);
     const originalValue = useAppSelector((state) => selectOriginalValue(state, step));
-    const showStep = useCondition(step.condition);
+    const showStep = useCondition(step?.condition);
+    /** A rootSteps entry with no matching step definition must not take the whole form down with it. */
     if (!step) {
         console.error('Step not found!', step);
-        return _jsx("div", {});
+        return _jsx(_Fragment, {});
     }
     if (!showStep)
         return _jsx(_Fragment, {});
@@ -78,18 +75,6 @@ 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.AVAILABILITY: {
-            return _jsx(AvailabilityStepComponent, { ...props, step: step, editable: editable });
-        }
         case FormStepTypes.DATEPICKER_RANGE: {
             return _jsx(DatePickerRangeStep, { ...props, step: step, editable: editable });
         }

package/dist/FormSteps/StepFunctions.d.ts

@@ -3,11 +3,25 @@ import { ApiSelector, CheckBox, ClassifierSelector, EntityValuePicker, FormSelec
 import { AYFFormStep } from '../@Types/AYFFormStep';
 import { CBRFormStep } from '../@Types/CBRFormStep';
 import { Condition } from '../@Types/Condition';
-import { DependencyStore } from '../Form/Form';
+import { DependencyStore, WidthStats } from '../Form/Form';
+import { GBaseStep } from '../@Types/GenericFormSteps';
 import { Entity } from '../@Types/Entity';
 export type FillerSteps = FormSelector | ClassifierSelector | EntityValuePicker | ApiSelector | CheckBox;
 export declare function calcFillerSize(step: FillerSteps, steps: Record<string, FormStep>, values: Record<string, unknown>, size: FormSize): number;
 export declare const calcStepWidth: (stepSize: 1 | 2 | 3 | 4, size: FormSize) => number;
+/** Column span of a step inside the form grid (the grid itself has at most 4 columns). */
+export type FormSpan = 1 | 2 | 3 | 4;
+/** Steps that occupy form-grid columns; content-only steps (e.g. titles) may omit `size`. */
+interface SpannedStep {
+    size?: FormSpan;
+    sizes?: GBaseStep['sizes'];
+}
+/**
+ * Effective column span of a step at the current width: its explicit `sizes` override for the
+ * screen when present (clamped to that screen's columns), the derived legacy default otherwise.
+ * Desktop never reads `sizes` — its source of truth stays the legacy `size` field.
+ */
+export declare function resolveStepSpan(step: SpannedStep, widthStats: Pick<WidthStats, 'currentBreakPoint' | 'isMobile'>, formSize: FormSize): FormSpan;
 export declare const calcDefaultValue: (step: FormStep | CBRFormStep) => any;
 export declare const iterateNestedSteps: (idStep: string, steps: Record<string, FormStep>, iteration: (step: FormStep, path: string[]) => void, path?: string[]) => void;
 /**
@@ -25,3 +39,4 @@ export declare const evaluateCondition: (condition: Condition, dependencies: Dep
     } & Record<string, any>;
 }) => boolean;
 export declare function getRelativeDate(nDays?: number, nHours?: number, nMinutes?: number, subtract?: boolean, date?: Date): Date;
+export {};