blixify-ui-web 1.2.63 → 1.2.64

package/lib/components/data/updateModule.js

@@ -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 || [], 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) {
+                    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,7 +1205,7 @@ 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())))));
             }
         }
@@ -1218,7 +1218,7 @@ var renderEachListObject = function (type, selectedModelId, model, selectedData,
                                 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) {
@@ -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, _e;
+    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
@@ -1563,7 +1572,7 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                     // 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, { ref: isOptional
+                        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: [
                                 {
@@ -1577,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)) {
@@ -1589,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",
@@ -1611,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
@@ -1650,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
                         ? {
@@ -1684,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
@@ -1699,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,
@@ -1787,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) {
@@ -1797,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
@@ -1887,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,
@@ -1915,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,
@@ -1931,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,
@@ -1940,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,
@@ -1955,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;
@@ -1997,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 &&
@@ -2254,7 +2263,9 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
     // 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 border-gray-200 bg-white shadow-sm ".concat(mobileView ? "p-4" : "p-5");
+    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];
@@ -2263,7 +2274,7 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
     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 text-gray-900") }, key),
+            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,
@@ -2274,7 +2285,7 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                 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 text-gray-900", containerClassName: "".concat(sectionClassName), notCollapseContainerCss: "bg-white rounded-lg border border-gray-200 shadow-sm", collapseContainerCss: "bg-white rounded-lg border border-gray-200 shadow-sm", 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") },
+                    : 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),
@@ -2282,7 +2293,7 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                     renderInputs(key, inputs),
                     renderStaticDetailList(key))));
         }),
-        hasSections && ((_e = inputList["default"]) === null || _e === void 0 ? void 0 : _e.length) > 0 ? (
+        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 },