blixify-ui-web 1.2.60 → 1.2.64

package/lib/components/data/updateModule.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"updateModule.d.ts","sourceRoot":"","sources":["../../../src/components/data/updateModule.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"updateModule.d.ts","sourceRoot":"","sources":["../../../src/components/data/updateModule.tsx"],"names":[],"mappings":"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"}

package/lib/components/data/updateModule.js

@@ -463,7 +463,7 @@ var handleRetrieveReferenceOptions = function (selectedData, model, dbModule, de
                                     _a.label = 2;
                                 case 2: return [3 /*break*/, 5];
                                 case 3:
-                                    if (!((utils_1.OBJECT_DATA_TYPES.includes(eachModel.type)) &&
+                                    if (!(utils_1.OBJECT_DATA_TYPES.includes(eachModel.type) &&
                                         eachModel.objectData)) return [3 /*break*/, 5];
                                     return [4 /*yield*/, Promise.all(eachModel.objectData.map(function (eachObjectData) { return __awaiter(void 0, void 0, void 0, function () {
                                             var selectedDataValue, isReferenceMap, hasValue;
@@ -1176,7 +1176,7 @@ var renderEachListObject = function (type, selectedModelId, model, selectedData,
                 return (react_1.default.createElement("div", { id: selectedModelId, className: shouldHide ? "hidden" : "" },
                     react_1.default.createElement("div", { className: "flex justify-between mt-5" },
                         react_1.default.createElement("h3", { className: "font-medium leading-6 text-gray-900 text-md sm:text-lg" }, selectedModel.name)),
-                    react_1.default.createElement(flexTable_1.FlexTable, { ref: flexTableRef, id: selectedModelId, data: [], columns: selectedModel.objectData || [], categoryList: selectedModel.listFlexCategories, disabled: selectedModel.disabled, className: "w-full", showTotal: selectedModel.listFlexSubTotal, showGrandTotal: selectedModel.listFlexGrandTotal, flexMathQueries: selectedModel.listFlexMathQueries, maxRows: selectedModel.listFlexMaxRows, defaultTitleTemplate: selectedModel.listFlexDefaultCategory, hideEmptyState: selectedModel.listFlexHideEmptyState, mobileView: selectedModel.listFlexMobileView, categoryColumnLabel: selectedModel.listFlexCategoryColumnLabel, optional: selectedModel.listFlexOptional, imageEndpoint: devSettings === null || devSettings === void 0 ? void 0 : devSettings.imageEndpoint, resolveImageUrl: resolveFlexImageUrl, onChangeData: function (newData) {
+                    react_1.default.createElement(flexTable_1.FlexTable, { darkMode: tabInfo === null || tabInfo === void 0 ? void 0 : tabInfo.darkMode, ref: flexTableRef, id: selectedModelId, data: [], columns: selectedModel.objectData || [], pinColumns: { left: ["category"] }, categoryList: selectedModel.listFlexCategories, disabled: selectedModel.disabled, className: "w-full", showTotal: selectedModel.listFlexSubTotal, showGrandTotal: selectedModel.listFlexGrandTotal, flexMathQueries: selectedModel.listFlexMathQueries, maxRows: selectedModel.listFlexMaxRows, defaultTitleTemplate: selectedModel.listFlexDefaultCategory, hideEmptyState: selectedModel.listFlexHideEmptyState, mobileView: selectedModel.listFlexMobileView, categoryColumnLabel: selectedModel.listFlexCategoryColumnLabel, optional: selectedModel.listFlexOptional, imageEndpoint: devSettings === null || devSettings === void 0 ? void 0 : devSettings.imageEndpoint, resolveImageUrl: resolveFlexImageUrl, onChangeData: function (newData) {
                             if (type === "update") {
                                 var updatedData = newData.map(function (item) {
                                     var id = item.id, title = item.title, category = item.category, rest = __rest(item, ["id", "title", "category"]);
@@ -1205,20 +1205,20 @@ var renderEachListObject = function (type, selectedModelId, model, selectedData,
                         } },
                         react_1.default.createElement("svg", { className: "w-12 h-12 mx-auto text-gray-400", stroke: "currentColor", fill: "none", viewBox: "0 0 48 48", "aria-hidden": "true" },
                             react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 14v20c0 4.418 7.163 8 16 8 1.381 0 2.721-.087 4-.252M8 14c0 4.418 7.163 8 16 8s16-3.582 16-8M8 14c0-4.418 7.163-8 16-8s16 3.582 16 8m0 0v14m0-4c0 4.418-7.163 8-16 8S8 28.418 8 24m32 10v6m0 0v6m0-6h6m-6 0h-6" })),
-                        react_1.default.createElement("span", { className: "block mt-2 text-sm font-medium text-gray-900" },
+                        react_1.default.createElement("span", { className: "block mt-2 text-sm font-medium ".concat((tabInfo === null || tabInfo === void 0 ? void 0 : tabInfo.darkMode) ? "text-gray-300" : "text-gray-900") },
                             "Create a new ", "".concat(selectedModel.name.toLocaleLowerCase())))));
             }
         }
         else {
             if (list[selectedModelId]) {
                 return (react_1.default.createElement("div", { id: selectedModelId, className: shouldHide ? "hidden" : "" },
-                    react_1.default.createElement("div", { className: "flex justify-between mt-5" },
+                    react_1.default.createElement("div", { className: "flex justify-between ".concat(type === "read" ? "pt-4" : "mt-5") },
                         react_1.default.createElement("h3", { className: "font-medium leading-6 text-gray-900 text-md sm:text-lg" }, selectedModel.name),
                         type === "update" && !selectedModel.listFlexTable && (react_1.default.createElement(iconButton_1.IconButton, { className: "sm", icon: react_1.default.createElement(outline_1.PlusCircleIcon, { className: "w-6 h-6 text-white" }), background: "bg-primary-500 hover:bg-primary-600", onClick: function () {
                                 setSelectedObjectStructureId === null || setSelectedObjectStructureId === void 0 ? void 0 : setSelectedObjectStructureId(selectedModelId);
                                 handlePopUpModal === null || handlePopUpModal === void 0 ? void 0 : handlePopUpModal(true);
                             } }))),
-                    react_1.default.createElement("div", { className: "flex flex-col space-y-2 mt-2" }, selectedModel.listFlexTable ? (react_1.default.createElement(flexTable_1.FlexTable, { ref: flexTableRef, id: selectedModelId, 
+                    react_1.default.createElement("div", { className: "flex flex-col space-y-2 mt-2" }, selectedModel.listFlexTable ? (react_1.default.createElement(flexTable_1.FlexTable, { darkMode: tabInfo === null || tabInfo === void 0 ? void 0 : tabInfo.darkMode, ref: flexTableRef, id: selectedModelId, 
                         // INFO: imageEndpoint is fallback; resolveImageUrl builds nested
                         // storage paths matching listObject (collection/record/field/row/column/file)
                         imageEndpoint: devSettings === null || devSettings === void 0 ? void 0 : devSettings.imageEndpoint, resolveImageUrl: resolveFlexImageUrl, data: ((_e = clonedSelectedData[selectedModelId]) === null || _e === void 0 ? void 0 : _e.map(function (item) {
@@ -1252,7 +1252,7 @@ var renderEachListObject = function (type, selectedModelId, model, selectedData,
                                 }
                                 return acc;
                             }, {}));
-                        })) || [], columns: selectedModel.objectData || [], categoryList: selectedModel.listFlexCategories, disabled: type === "read" || selectedModel.disabled, className: "w-full", showTotal: selectedModel.listFlexSubTotal, showGrandTotal: selectedModel.listFlexGrandTotal, flexMathQueries: selectedModel.listFlexMathQueries, maxRows: selectedModel.listFlexMaxRows, defaultTitleTemplate: selectedModel.listFlexDefaultCategory, hideEmptyState: selectedModel.listFlexHideEmptyState, mobileView: selectedModel.listFlexMobileView, categoryColumnLabel: selectedModel.listFlexCategoryColumnLabel, optional: selectedModel.listFlexOptional, onChangeData: function (newData) {
+                        })) || [], columns: selectedModel.objectData || [], pinColumns: { left: ["category"] }, categoryList: selectedModel.listFlexCategories, disabled: type === "read" || selectedModel.disabled, className: "w-full", showTotal: selectedModel.listFlexSubTotal, showGrandTotal: selectedModel.listFlexGrandTotal, flexMathQueries: selectedModel.listFlexMathQueries, maxRows: selectedModel.listFlexMaxRows, defaultTitleTemplate: selectedModel.listFlexDefaultCategory, hideEmptyState: selectedModel.listFlexHideEmptyState, mobileView: selectedModel.listFlexMobileView, categoryColumnLabel: selectedModel.listFlexCategoryColumnLabel, optional: selectedModel.listFlexOptional, onChangeData: function (newData) {
                             if (type === "update") {
                                 var updatedData = newData.map(function (item) {
                                     var id = item.id, title = item.title, category = item.category, rest = __rest(item, ["id", "title", "category"]);
@@ -1294,7 +1294,7 @@ exports.renderEachListObject = renderEachListObject;
  * @returns
  */
 var renderDataTemplateForm = function (data, model, formInputRef, updateMethod, modalInput, cellInput, props, referenceProps, fileProps, objectProps, signatureProps, isForm, offline, columnType, bareUpdateIndividualComponent, mobileView) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     var inputList = {};
     var formInputRefList = {};
     var staticList = {};
@@ -1410,7 +1410,7 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                         return null;
                     });
                 }
-                inputList[groupId].push(react_1.default.createElement(select_1.Select, { ref: isOptional
+                inputList[groupId].push(react_1.default.createElement(select_1.Select, { darkMode: props === null || props === void 0 ? void 0 : props.darkMode, ref: isOptional
                         ? null
                         : formInputRef[(_e = eachAttribute.refIndex) !== null && _e !== void 0 ? _e : index], id: eachAttribute.id, optional: isOptional, value: clonedSelectedData[eachAttribute.id]
                         ? (_f = clonedSelectedData[eachAttribute.id]) === null || _f === void 0 ? void 0 : _f[(_g = eachAttribute.targetFieldsAttributeOption) !== null && _g !== void 0 ? _g : ""]
@@ -1462,11 +1462,13 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
             case "object":
                 var objectValue = Object.values((_k = clonedSelectedData[eachAttribute.id]) !== null && _k !== void 0 ? _k : {});
                 inputList[groupId].push(react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700" },
+                    react_1.default.createElement("label", { className: "block text-sm font-medium ".concat((props === null || props === void 0 ? void 0 : props.darkMode) ? "text-white" : "text-gray-700") },
                         label,
                         " ",
                         labelExtra),
-                    react_1.default.createElement("div", { className: "block w-full px-5 py-3 mt-1 text-base text-left text-gray-300 bg-white border border-gray-300 rounded-md cursor-pointer focus:border-primary-500 focus:outline-none", onClick: function () {
+                    react_1.default.createElement("div", { className: "block w-full px-5 py-3 mt-1 text-base text-left rounded-md cursor-pointer focus:border-primary-500 focus:outline-none ".concat((props === null || props === void 0 ? void 0 : props.darkMode)
+                            ? "text-gray-400 bg-gray-800 border border-gray-700"
+                            : "text-gray-300 bg-white border border-gray-300"), onClick: function () {
                             var _a;
                             objectProps === null || objectProps === void 0 ? void 0 : objectProps.setSelectedObjectStructureId(eachAttribute.id);
                             objectProps === null || objectProps === void 0 ? void 0 : objectProps.setSelectedObjectData((_a = clonedSelectedData[eachAttribute.id]) !== null && _a !== void 0 ? _a : {});
@@ -1504,11 +1506,18 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                         }
                     });
                 }
-                inputList[groupId].push(react_1.default.createElement(select_1.Select, { ref: isOptional
+                inputList[groupId].push(react_1.default.createElement(select_1.Select, { darkMode: props === null || props === void 0 ? void 0 : props.darkMode, ref: isOptional
                         ? null
                         : formInputRef[(_o = eachAttribute.refIndex) !== null && _o !== void 0 ? _o : index], id: eachAttribute.id, optional: isOptional, value: (_p = clonedSelectedData[eachAttribute.id]) !== null && _p !== void 0 ? _p : (eachAttribute.type === "list" ? "" : []), placeholder: placeholder !== eachAttribute.name
                         ? placeholder
-                        : "Select An Option", label: label, labelExtra: labelExtra, subLabel: subLabel, infoElement: (cellInput === null || cellInput === void 0 ? void 0 : cellInput.active) ? undefined : infoElement, newValue: eachAttribute.listNewValue, newValueLabel: eachAttribute.listNewValueLabel, showTag: eachAttribute.showTagSelections, disableKeyboard: eachAttribute.disabledKeyboardSearch, type: (_q = eachAttribute.listView) !== null && _q !== void 0 ? _q : undefined, options: optionList_2, onChange: function (value) {
+                        : "Select An Option", label: label, labelExtra: labelExtra, subLabel: subLabel, infoElement: (cellInput === null || cellInput === void 0 ? void 0 : cellInput.active) ? undefined : infoElement, newValue: eachAttribute.listNewValue, newValueLabel: eachAttribute.listNewValueLabel, showTag: eachAttribute.showTagSelections, 
+                    // INFO: a coloured cell is tap-only — typing only filtered a handful of
+                    // fixed options and popped the phone keyboard over them; columns that
+                    // accept new values keep the search box
+                    disableKeyboard: eachAttribute.disabledKeyboardSearch ||
+                        (!!(cellInput === null || cellInput === void 0 ? void 0 : cellInput.active) &&
+                            !!eachAttribute.showTagSelections &&
+                            !eachAttribute.listNewValue), type: (_q = eachAttribute.listView) !== null && _q !== void 0 ? _q : undefined, options: optionList_2, onChange: function (value) {
                         updateMethod.handleOnChangeSelect(eachAttribute.id, value);
                     }, disabled: disabled, cellInput: {
                         active: cellInput === null || cellInput === void 0 ? void 0 : cellInput.active,
@@ -1525,7 +1534,7 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                 var organisationMembers = [];
                 if (personDevSettings)
                     organisationMembers = (_r = personDevSettings.organisationMembers) !== null && _r !== void 0 ? _r : [];
-                inputList[groupId].push(react_1.default.createElement(select_1.Select, { ref: isOptional
+                inputList[groupId].push(react_1.default.createElement(select_1.Select, { darkMode: props === null || props === void 0 ? void 0 : props.darkMode, ref: isOptional
                         ? null
                         : formInputRef[(_s = eachAttribute.refIndex) !== null && _s !== void 0 ? _s : index], id: eachAttribute.id, optional: isOptional, value: personValue, placeholder: placeholder !== eachAttribute.name
                         ? placeholder
@@ -1544,7 +1553,7 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                 var roleOptions = [];
                 if (rolesDevSettings)
                     roleOptions = (_t = rolesDevSettings.roleOptions) !== null && _t !== void 0 ? _t : [];
-                inputList[groupId].push(react_1.default.createElement(select_1.Select, { ref: isOptional
+                inputList[groupId].push(react_1.default.createElement(select_1.Select, { darkMode: props === null || props === void 0 ? void 0 : props.darkMode, ref: isOptional
                         ? null
                         : formInputRef[(_u = eachAttribute.refIndex) !== null && _u !== void 0 ? _u : index], id: eachAttribute.id, optional: isOptional, value: rolesValue, placeholder: placeholder !== eachAttribute.name
                         ? placeholder
@@ -1559,8 +1568,11 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                 if (eachAttribute === null || eachAttribute === void 0 ? void 0 : eachAttribute.enableCheckbox) {
                     var value = (_v = clonedSelectedData[eachAttribute.id]) !== null && _v !== void 0 ? _v : false;
                     // Use shared Checkbox component so validation can run via handleSubmit
-                    inputList[groupId].push(react_1.default.createElement("div", { className: "flex flex-row h-full space-x-5 mx-auto items-center" },
-                        react_1.default.createElement(checkbox_1.Checkbox, { ref: isOptional
+                    inputList[groupId].push(
+                    // INFO: flush with the card padding like every other input — the
+                    // row used to be centred with its own inset
+                    react_1.default.createElement("div", { className: "flex flex-row items-center gap-x-3" },
+                        react_1.default.createElement(checkbox_1.Checkbox, { darkMode: props === null || props === void 0 ? void 0 : props.darkMode, ref: isOptional
                                 ? null
                                 : formInputRef[(_w = eachAttribute.refIndex) !== null && _w !== void 0 ? _w : index], id: eachAttribute.id, itemList: [
                                 {
@@ -1574,7 +1586,7 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                                 if ((cellInput === null || cellInput === void 0 ? void 0 : cellInput.active) && cellInput.onBlur) {
                                     cellInput.onBlur(__assign(__assign({}, clonedSelectedData), (_a = {}, _a[eachAttribute.id] = checkedValue, _a)));
                                 }
-                            }, darkMode: false }),
+                            } }),
                         selectInputCustomElement && (react_1.default.createElement("div", { className: "self-center" }, selectInputCustomElement))));
                 }
                 else if (eachAttribute.enableRadioButtons && !(cellInput === null || cellInput === void 0 ? void 0 : cellInput.active)) {
@@ -1586,7 +1598,7 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                                 " ",
                                 labelExtra),
                             selectInputCustomElement && (react_1.default.createElement("div", { className: "self-center" }, selectInputCustomElement)))),
-                        react_1.default.createElement(radioList_1.RadioList, { key: "".concat(eachAttribute.id, "-radioList"), id: eachAttribute.id, list: [
+                        react_1.default.createElement(radioList_1.RadioList, { darkMode: props === null || props === void 0 ? void 0 : props.darkMode, key: "".concat(eachAttribute.id, "-radioList"), id: eachAttribute.id, list: [
                                 {
                                     id: "true",
                                     label: "Yes",
@@ -1595,7 +1607,7 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                                     id: "false",
                                     label: "No",
                                 },
-                            ], optional: isOptional, value: value, onSelect: function (value) {
+                            ], optional: isOptional, pill: true, value: value, onSelect: function (value) {
                                 var _a;
                                 updateMethod.handleOnChangeSelect(eachAttribute.id, value);
                                 // INFO: radios commit on select like the checkbox branch —
@@ -1608,7 +1620,7 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                 }
                 else {
                     var value = (_y = clonedSelectedData[eachAttribute.id]) === null || _y === void 0 ? void 0 : _y.toString();
-                    inputList[groupId].push(react_1.default.createElement(select_1.Select, { ref: isOptional
+                    inputList[groupId].push(react_1.default.createElement(select_1.Select, { darkMode: props === null || props === void 0 ? void 0 : props.darkMode, ref: isOptional
                             ? null
                             : formInputRef[(_z = eachAttribute.refIndex) !== null && _z !== void 0 ? _z : index], id: eachAttribute.id, value: value, label: label, subLabel: subLabel, infoElement: (cellInput === null || cellInput === void 0 ? void 0 : cellInput.active) ? undefined : infoElement, labelExtra: labelExtra, placeholder: placeholder !== eachAttribute.name
                             ? placeholder
@@ -1647,7 +1659,7 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                     ? ".png,.jpg,.jpeg,.heic,.heif,.tiff"
                     : ".pdf");
                 var fileDescription = (_1 = eachAttribute.fileDescription) !== null && _1 !== void 0 ? _1 : (eachAttribute.type === "image" ? undefined : "PDF up to 30MB");
-                inputList[groupId].push(react_1.default.createElement(uploadInput_1.UploadInput, { lib: { axios: (_2 = props === null || props === void 0 ? void 0 : props.lib) === null || _2 === void 0 ? void 0 : _2.axios }, ref: isOptional
+                inputList[groupId].push(react_1.default.createElement(uploadInput_1.UploadInput, { darkMode: props === null || props === void 0 ? void 0 : props.darkMode, lib: { axios: (_2 = props === null || props === void 0 ? void 0 : props.lib) === null || _2 === void 0 ? void 0 : _2.axios }, ref: isOptional
                         ? null
                         : formInputRef[(_3 = eachAttribute.refIndex) !== null && _3 !== void 0 ? _3 : index], id: eachAttribute.id, label: label, labelExtra: labelExtra, infoElement: (cellInput === null || cellInput === void 0 ? void 0 : cellInput.active) ? undefined : infoElement, optional: isOptional, file: (_4 = url !== null && url !== void 0 ? url : clonedSelectedData[eachAttribute.id]) !== null && _4 !== void 0 ? _4 : "", accept: accept, capture: eachAttribute.imageInputCapture, fileDescription: fileDescription, maxFileSize: fileProps === null || fileProps === void 0 ? void 0 : fileProps.maxFileSize, onChange: updateMethod.handleOnChangeFile, showModal: eachAttribute.showCameraGalleryOptionModal, disabled: disabled, handleCustomDownloadFile: fileProps === null || fileProps === void 0 ? void 0 : fileProps.handleCustomDownloadFile, compress: eachAttribute.maxFileSize && eachAttribute.compressfileQuality
                         ? {
@@ -1681,7 +1693,7 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                 var multiFileDescription = (_7 = eachAttribute.fileDescription) !== null && _7 !== void 0 ? _7 : (eachAttribute.type === "multipleImage"
                     ? undefined
                     : "PDF up to 30MB");
-                inputList[groupId].push(react_1.default.createElement(uploadInput_1.UploadInput, { type: "multi", files: __assign(__assign({}, (!react_1.default.isValidElement(clonedSelectedData[eachAttribute.id])
+                inputList[groupId].push(react_1.default.createElement(uploadInput_1.UploadInput, { darkMode: props === null || props === void 0 ? void 0 : props.darkMode, type: "multi", files: __assign(__assign({}, (!react_1.default.isValidElement(clonedSelectedData[eachAttribute.id])
                         ? clonedSelectedData[eachAttribute.id]
                         : { upload: [], remove: [] })), { data: multipleDataUrl }), optional: isOptional, ref: isOptional
                         ? null
@@ -1696,7 +1708,7 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                         : undefined, customElement: eachAttribute.customElement, mobileView: mobileView, imageTagEdit: eachAttribute.imageTagEdit, imageTagOptions: eachAttribute.imageTagOptions, imageTagNewOption: eachAttribute.imageTagNewOption, imageDefaultTag: eachAttribute.imageDefaultTag, imageTagToggleMode: eachAttribute.imageTagToggleMode }));
                 break;
             case "number":
-                inputList[groupId].push(react_1.default.createElement(textInput_1.TextInput, { id: eachAttribute.id, ref: isOptional
+                inputList[groupId].push(react_1.default.createElement(textInput_1.TextInput, { darkMode: props === null || props === void 0 ? void 0 : props.darkMode, id: eachAttribute.id, ref: isOptional
                         ? null
                         : formInputRef[(_10 = eachAttribute.refIndex) !== null && _10 !== void 0 ? _10 : index], type: "number", value: (_11 = clonedSelectedData[eachAttribute.id]) !== null && _11 !== void 0 ? _11 : "", placeholder: placeholder, label: label, labelExtra: labelExtra, subLabel: subLabel, infoElement: (cellInput === null || cellInput === void 0 ? void 0 : cellInput.active) ? undefined : infoElement, optional: isOptional, onChange: updateMethod.handleOnChangeText, disabled: disabled, minNumber: eachAttribute.minNumber, maxNumber: eachAttribute.maxNumber, cellInput: {
                         active: cellInput === null || cellInput === void 0 ? void 0 : cellInput.active,
@@ -1784,7 +1796,7 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                         }
                     }
                     inputList[groupId].push(react_1.default.createElement("div", { id: eachAttribute.id, className: "flex flex-col gap-y-2" },
-                        react_1.default.createElement(textInput_1.TextInput, { value: displayValue, label: eachAttribute.name, type: "text", placeholder: eachAttribute.name, disabled: true }),
+                        react_1.default.createElement(textInput_1.TextInput, { darkMode: props === null || props === void 0 ? void 0 : props.darkMode, value: displayValue, label: eachAttribute.name, type: "text", placeholder: eachAttribute.name, disabled: true }),
                         react_1.default.createElement("div", { className: "h-80 w-full" },
                             react_1.default.createElement(mapView_1.MapView, { polygonList: polygonList_1, autoFitToMarkers: true, handleSelectPolygon: function (selectedIds) {
                                     if (selectedIds && selectedIds.length > 0 && !disabled) {
@@ -1794,7 +1806,7 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                 }
                 else {
                     inputList[groupId].push(react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(select_1.Select, { ref: isOptional
+                        react_1.default.createElement(select_1.Select, { darkMode: props === null || props === void 0 ? void 0 : props.darkMode, ref: isOptional
                                 ? null
                                 : formInputRef[(_18 = eachAttribute.refIndex) !== null && _18 !== void 0 ? _18 : index], id: eachAttribute.id, value: (_19 = clonedSelectedData[eachAttribute.id]) !== null && _19 !== void 0 ? _19 : (eachAttribute.type === "reference" ? "" : []), label: label, labelExtra: labelExtra, subLabel: subLabel, infoElement: (cellInput === null || cellInput === void 0 ? void 0 : cellInput.active) ? undefined : infoElement, optional: isOptional, placeholder: placeholder !== eachAttribute.name
                                 ? placeholder
@@ -1884,7 +1896,7 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                 else if (eachAttribute.type === "password") {
                     textType = "password";
                 }
-                inputList[groupId].push(react_1.default.createElement(textInput_1.TextInput, { id: eachAttribute.id, ref: isOptional
+                inputList[groupId].push(react_1.default.createElement(textInput_1.TextInput, { darkMode: props === null || props === void 0 ? void 0 : props.darkMode, id: eachAttribute.id, ref: isOptional
                         ? null
                         : formInputRef[(_20 = eachAttribute.refIndex) !== null && _20 !== void 0 ? _20 : index], type: textType, value: (_21 = clonedSelectedData[eachAttribute.id]) !== null && _21 !== void 0 ? _21 : "", placeholder: placeholder, label: label, labelExtra: labelExtra, subLabel: subLabel, infoElement: (cellInput === null || cellInput === void 0 ? void 0 : cellInput.active) ? undefined : infoElement, optional: isOptional, onChange: updateMethod.handleOnChangeText, disabled: disabled, cellInput: {
                         active: cellInput === null || cellInput === void 0 ? void 0 : cellInput.active,
@@ -1912,7 +1924,7 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                     dateValue = undefined;
                 var showTime = eachAttribute.hideShowTime ? false : true;
                 var hideDate = eachAttribute.hideShowDate ? true : false;
-                inputList[groupId].push(react_1.default.createElement(datePicker_1.InputDatePicker, { title: label, labelExtra: labelExtra, subLabel: subLabel, id: eachAttribute.id, optional: isOptional, ref: isOptional
+                inputList[groupId].push(react_1.default.createElement(datePicker_1.InputDatePicker, { darkMode: props === null || props === void 0 ? void 0 : props.darkMode, title: label, labelExtra: labelExtra, subLabel: subLabel, id: eachAttribute.id, optional: isOptional, ref: isOptional
                         ? null
                         : formInputRef[(_25 = eachAttribute.refIndex) !== null && _25 !== void 0 ? _25 : index], onChange: updateMethod.handleOnChangeDate, value: dateValue, disabled: disabled, cellInput: {
                         active: cellInput === null || cellInput === void 0 ? void 0 : cellInput.active,
@@ -1928,7 +1940,7 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                     break;
                 }
                 var markdownRef = formInputRef[(_27 = eachAttribute.refIndex) !== null && _27 !== void 0 ? _27 : index];
-                inputList[groupId].push(react_1.default.createElement(markdown_1.MarkdownInput, { id: eachAttribute.id, ref: markdownRef, label: label, labelExtra: labelExtra, subLabel: subLabel, value: (_28 = clonedSelectedData[eachAttribute.id]) !== null && _28 !== void 0 ? _28 : "", placeholder: placeholder, optional: isOptional, onChange: updateMethod.handleOnChangeMarkdown, disabled: disabled, infoElement: (cellInput === null || cellInput === void 0 ? void 0 : cellInput.active) ? undefined : infoElement, lib: ((_29 = props === null || props === void 0 ? void 0 : props.lib) === null || _29 === void 0 ? void 0 : _29.axios) ? { axios: props.lib.axios } : undefined, uploadEndpoint: ((_30 = referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.devSettings) === null || _30 === void 0 ? void 0 : _30.uploadEndpoint) ||
+                inputList[groupId].push(react_1.default.createElement(markdown_1.MarkdownInput, { darkMode: props === null || props === void 0 ? void 0 : props.darkMode, id: eachAttribute.id, ref: markdownRef, label: label, labelExtra: labelExtra, subLabel: subLabel, value: (_28 = clonedSelectedData[eachAttribute.id]) !== null && _28 !== void 0 ? _28 : "", placeholder: placeholder, optional: isOptional, onChange: updateMethod.handleOnChangeMarkdown, disabled: disabled, infoElement: (cellInput === null || cellInput === void 0 ? void 0 : cellInput.active) ? undefined : infoElement, lib: ((_29 = props === null || props === void 0 ? void 0 : props.lib) === null || _29 === void 0 ? void 0 : _29.axios) ? { axios: props.lib.axios } : undefined, uploadEndpoint: ((_30 = referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.devSettings) === null || _30 === void 0 ? void 0 : _30.uploadEndpoint) ||
                         eachAttribute.uploadEndpoint, enableImageUpload: eachAttribute.enableImageUpload, enableVideoUpload: eachAttribute.enableVideoUpload, compress: eachAttribute.maxFileSize && eachAttribute.compressfileQuality
                         ? {
                             maxFileSize: eachAttribute.maxFileSize,
@@ -1937,7 +1949,7 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                         : undefined, customElement: selectInputCustomElement }));
                 break;
             case "textArea":
-                inputList[groupId].push(react_1.default.createElement(textArea_1.TextArea, { id: eachAttribute.id, ref: isOptional
+                inputList[groupId].push(react_1.default.createElement(textArea_1.TextArea, { darkMode: props === null || props === void 0 ? void 0 : props.darkMode, id: eachAttribute.id, ref: isOptional
                         ? null
                         : formInputRef[(_31 = eachAttribute.refIndex) !== null && _31 !== void 0 ? _31 : index], label: label, labelExtra: labelExtra, subLabel: subLabel, placeholder: placeholder, value: (_32 = clonedSelectedData[eachAttribute.id]) !== null && _32 !== void 0 ? _32 : "", rows: 4, optional: isOptional, onChange: updateMethod.handleOnChangeText, infoElement: (cellInput === null || cellInput === void 0 ? void 0 : cellInput.active) ? undefined : infoElement, disabled: disabled, customElement: selectInputCustomElement, cellInput: {
                         active: cellInput === null || cellInput === void 0 ? void 0 : cellInput.active,
@@ -1952,7 +1964,7 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                     signatureUrl = (0, blobModule_1.renderImageUrlFromPath)(fileProps === null || fileProps === void 0 ? void 0 : fileProps.imageEndpoint, eachAttribute.imageCollectionName, props === null || props === void 0 ? void 0 : props.id, eachAttribute.imageFileName, clonedSelectedData[eachAttribute.id], fileProps === null || fileProps === void 0 ? void 0 : fileProps.imageBucketName);
                 }
                 inputList[groupId].push(react_1.default.createElement("div", { className: eachAttribute.description ? "w-full min-h-72" : "w-full h-72" },
-                    react_1.default.createElement(signature_1.Signature, { id: eachAttribute.id, ref: formInputRef[(_33 = eachAttribute.refIndex) !== null && _33 !== void 0 ? _33 : index], label: label, labelExtra: labelExtra, description: eachAttribute.description, subLabel: undefined, dataURL: signatureUrl, optional: isOptional, signing: signatureProps === null || signatureProps === void 0 ? void 0 : signatureProps.signing, onChange: signatureProps === null || signatureProps === void 0 ? void 0 : signatureProps.setSigning, onSubmit: function (_, dataURL) {
+                    react_1.default.createElement(signature_1.Signature, { darkMode: props === null || props === void 0 ? void 0 : props.darkMode, id: eachAttribute.id, ref: formInputRef[(_33 = eachAttribute.refIndex) !== null && _33 !== void 0 ? _33 : index], label: label, labelExtra: labelExtra, description: eachAttribute.description, subLabel: undefined, dataURL: signatureUrl, optional: isOptional, signing: signatureProps === null || signatureProps === void 0 ? void 0 : signatureProps.signing, onChange: signatureProps === null || signatureProps === void 0 ? void 0 : signatureProps.setSigning, onSubmit: function (_, dataURL) {
                             return updateMethod.handleSignatureComplete(dataURL, eachAttribute.id);
                         }, signatureClear: true, canvasContainerClassName: "shadow-none", infoElement: (cellInput === null || cellInput === void 0 ? void 0 : cellInput.active) ? undefined : infoElement, customElement: selectInputCustomElement })));
                 break;
@@ -1994,7 +2006,7 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                         : ((_38 = canvasData === null || canvasData === void 0 ? void 0 : canvasData.texts) !== null && _38 !== void 0 ? _38 : []);
                     normalizedDrawings = [];
                 }
-                inputList[groupId].push(react_1.default.createElement(canvas_1.Canvas, { ref: isOptional
+                inputList[groupId].push(react_1.default.createElement(canvas_1.Canvas, { darkMode: props === null || props === void 0 ? void 0 : props.darkMode, ref: isOptional
                         ? null
                         : formInputRef[(_39 = eachAttribute.refIndex) !== null && _39 !== void 0 ? _39 : index], id: eachAttribute.id, label: label, labelExtra: labelExtra, infoElement: (cellInput === null || cellInput === void 0 ? void 0 : cellInput.active) ? undefined : infoElement, customElement: selectInputCustomElement, optional: isOptional, enableDraw: (props === null || props === void 0 ? void 0 : props.type) === "update" ? eachAttribute.enableDraw : false, enableImageUpload: (props === null || props === void 0 ? void 0 : props.type) === "update" ? eachAttribute.enableImageUpload : false, readOnly: (props === null || props === void 0 ? void 0 : props.type) !== "update", texts: normalizedTexts, drawings: normalizedDrawings, backgroundImageUrl: eachAttribute.enableImageUpload &&
                         canvasData &&
@@ -2246,24 +2258,50 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
         return (react_1.default.createElement("div", { className: "col-span-12 mt-4" },
             react_1.default.createElement(detailList_1.DetailList, { title: "", list: items, size: "compact", className: "border rounded-lg" })));
     };
+    // INFO: every section is a white card on whatever background the host paints
+    // (Space paints grey) — title, optional description, then the fields in the
+    // same 12-column grid the form uses, so column spans behave identically inside
+    // a card and at the top level. Colour is reserved for the active step, the
+    // primary action and status; sections themselves stay neutral.
+    var sectionCardClassName = "col-span-12 rounded-lg border shadow-sm ".concat((props === null || props === void 0 ? void 0 : props.darkMode)
+        ? "border-gray-700 ".concat((_e = props === null || props === void 0 ? void 0 : props.darkModeBg) !== null && _e !== void 0 ? _e : "bg-gray-900")
+        : "border-gray-200 bg-white", " ").concat(mobileView ? "p-4" : "p-5");
+    var sectionGridClassName = "grid grid-cols-12 ".concat(mobileView ? "gap-x-6 gap-y-2 md:gap-6" : "gap-6");
+    var hasSections = sortedInputListEntries.some(function (_a) {
+        var key = _a[0];
+        return key !== "default";
+    });
+    var renderSectionHeading = function (key) {
+        var _a;
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: "".concat(sectionClassName, " font-bold ").concat((props === null || props === void 0 ? void 0 : props.darkMode) ? "text-white" : "text-gray-900") }, key),
+            ((_a = props === null || props === void 0 ? void 0 : props.groupDescriptions) === null || _a === void 0 ? void 0 : _a[key]) && (react_1.default.createElement("p", { className: "col-span-12 text-sm text-gray-500 mt-0.5" }, props.groupDescriptions[key]))));
+    };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        sortedInputListEntries.map(function (_a, index) {
-            var _b, _c, _d;
+        sortedInputListEntries.map(function (_a) {
+            var _b, _c, _d, _e;
             var key = _a[0], inputs = _a[1];
             if (key === "default")
                 return null;
             return Object.keys((_b = props === null || props === void 0 ? void 0 : props.groupIdCollapsible) !== null && _b !== void 0 ? _b : {}).length > 0 ? (react_1.default.createElement(collapse_1.Collapse, { key: key, defaultValue: ((_c = props === null || props === void 0 ? void 0 : props.groupIdCollapsible) === null || _c === void 0 ? void 0 : _c[key])
                     ? !((_d = props === null || props === void 0 ? void 0 : props.groupIdCollapsible) === null || _d === void 0 ? void 0 : _d[key])
-                    : true, titleClassName: "!font-bold", containerClassName: "".concat(sectionClassName), notCollapseContainerCss: "bg-primary-50 rounded-md", collapseContainerCss: "bg-white rounded-md", title: key, icon: react_1.default.createElement(react_1.default.Fragment, null), content: react_1.default.createElement("div", { className: "grid grid-cols-4 ".concat(mobileView ? "gap-x-6 gap-y-2 md:gap-6" : "gap-6", " mt-6") },
+                    : true, titleClassName: "!font-bold ".concat((props === null || props === void 0 ? void 0 : props.darkMode) ? "text-white" : "text-gray-900"), containerClassName: "".concat(sectionClassName), notCollapseContainerCss: "rounded-lg border shadow-sm ".concat((props === null || props === void 0 ? void 0 : props.darkMode) ? "bg-white/5 border-gray-700" : "bg-white border-gray-200"), collapseContainerCss: "rounded-lg border shadow-sm ".concat((props === null || props === void 0 ? void 0 : props.darkMode) ? "bg-white/5 border-gray-700" : "bg-white border-gray-200"), title: key, desc: (_e = props === null || props === void 0 ? void 0 : props.groupDescriptions) === null || _e === void 0 ? void 0 : _e[key], icon: react_1.default.createElement(react_1.default.Fragment, null), content: react_1.default.createElement("div", { className: "".concat(sectionGridClassName, " mt-6") },
+                    renderInputs(key, inputs),
+                    renderStaticDetailList(key)), formInputRefList: formInputRefList === null || formInputRefList === void 0 ? void 0 : formInputRefList[key] })) : (react_1.default.createElement("div", { key: key, className: sectionCardClassName },
+                renderSectionHeading(key),
+                react_1.default.createElement("div", { className: "".concat(sectionGridClassName, " mt-4") },
                     renderInputs(key, inputs),
-                    renderStaticDetailList(key)), formInputRefList: formInputRefList === null || formInputRefList === void 0 ? void 0 : formInputRefList[key] })) : (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("div", { className: "".concat(index !== 0 ? "border-t pt-4 mt-5" : "", " ").concat(sectionClassName, " font-bold ") }, key),
-                renderInputs(key, inputs),
-                renderStaticDetailList(key)));
+                    renderStaticDetailList(key))));
         }),
-        sortedInputListEntries.length > 1 && !(props === null || props === void 0 ? void 0 : props.groupIdCollapsible) && (react_1.default.createElement("div", { className: "mt-5 border-t text-md text-neutral-600 col-span-12" })),
-        renderDefaultInputs(),
-        renderStaticDetailList("default")));
+        hasSections && ((_f = inputList["default"]) === null || _f === void 0 ? void 0 : _f.length) > 0 ? (
+        // INFO: fields without a section sit in their own untitled card so they
+        // line up with the sections instead of floating on the page background
+        react_1.default.createElement("div", { className: sectionCardClassName },
+            react_1.default.createElement("div", { className: sectionGridClassName },
+                renderDefaultInputs(),
+                renderStaticDetailList("default")))) : (react_1.default.createElement(react_1.default.Fragment, null,
+            renderDefaultInputs(),
+            renderStaticDetailList("default")))));
 };
 exports.renderDataTemplateForm = renderDataTemplateForm;
 var compareUpdatedFields = function (prevData, currentData) {