@aatulwork/customform-renderer 1.0.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +358 -12
  2. package/dist/index.d.mts +21 -5
  3. package/dist/index.d.ts +21 -5
  4. package/dist/index.js +68 -43
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +68 -43
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -136,6 +136,22 @@ var transformFormValues = (data, formSchema) => {
136
136
  });
137
137
  return transformedData;
138
138
  };
139
+ var useFormColors = (customColors) => {
140
+ const theme = material.useTheme();
141
+ return {
142
+ primary: customColors?.primary || theme.palette.primary.main,
143
+ secondary: customColors?.secondary || theme.palette.secondary.main,
144
+ error: customColors?.error || theme.palette.error.main,
145
+ success: customColors?.success || theme.palette.success.main,
146
+ warning: customColors?.warning || theme.palette.warning.main,
147
+ info: customColors?.info || theme.palette.info.main,
148
+ textPrimary: customColors?.textPrimary || theme.palette.text.primary,
149
+ textSecondary: customColors?.textSecondary || theme.palette.text.secondary,
150
+ divider: customColors?.divider || theme.palette.divider,
151
+ background: customColors?.background || theme.palette.background.default,
152
+ backgroundPaper: customColors?.backgroundPaper || theme.palette.background.paper
153
+ };
154
+ };
139
155
  var TextField = ({ field, control, defaultValue, rules, errors }) => {
140
156
  return /* @__PURE__ */ jsxRuntime.jsx(
141
157
  reactHookForm.Controller,
@@ -631,8 +647,9 @@ var useCKEditor = (options = {}) => {
631
647
  load
632
648
  };
633
649
  };
634
- var CKEditorField = ({ field, control, defaultValue, rules, errors, setValue, formSchema, services }) => {
650
+ var CKEditorField = ({ field, control, defaultValue, rules, errors, setValue, formSchema, services, colors }) => {
635
651
  const theme = material.useTheme();
652
+ const formColors = useFormColors(colors);
636
653
  const editorContainerRef = react.useRef(null);
637
654
  const fileUploadService = services?.fileUpload || defaultFileUploadService;
638
655
  const fileBaseUrl = services?.fileBaseUrl || "";
@@ -684,13 +701,13 @@ var CKEditorField = ({ field, control, defaultValue, rules, errors, setValue, fo
684
701
  if (isCKEditorLoading) {
685
702
  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
686
703
  /* @__PURE__ */ jsxRuntime.jsx(material.FormLabel, { required: field.required, error: !!errors[field.name], children: field.label }),
687
- /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { p: 2, textAlign: "center", color: "text.secondary" }, children: "Loading editor..." })
704
+ /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { p: 2, textAlign: "center", color: formColors.textSecondary }, children: "Loading editor..." })
688
705
  ] });
689
706
  }
690
707
  if (ckEditorError || !isCKEditorReady) {
691
708
  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
692
709
  /* @__PURE__ */ jsxRuntime.jsx(material.FormLabel, { required: field.required, error: !!errors[field.name], children: field.label }),
693
- /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { p: 2, border: "1px solid", borderColor: "error.main", borderRadius: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { error: true, children: ckEditorError?.message || "CKEditor failed to load. Please ensure the CKEditor script is loaded." }) })
710
+ /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { p: 2, border: "1px solid", borderColor: formColors.error, borderRadius: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { error: true, children: ckEditorError?.message || "CKEditor failed to load. Please ensure the CKEditor script is loaded." }) })
694
711
  ] });
695
712
  }
696
713
  return /* @__PURE__ */ jsxRuntime.jsx(
@@ -736,11 +753,11 @@ var CKEditorField = ({ field, control, defaultValue, rules, errors, setValue, fo
736
753
  minHeight: "100px"
737
754
  },
738
755
  "&:hover": {
739
- borderColor: errors[field.name] ? theme.palette.error.main : theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.87)" : theme.palette.primary.main
756
+ borderColor: errors[field.name] ? formColors.error : theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.87)" : formColors.primary
740
757
  },
741
758
  "& .ck-focused": {
742
- border: errors[field.name] ? `1px solid ${theme.palette.error.main} !important` : `1px solid ${theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.23)" : `${theme.palette.primary.main}`} !important`,
743
- boxShadow: errors[field.name] ? `0 0 0 1px ${theme.palette.error.main}` : `0 0 0 1px ${material.alpha(theme.palette.primary.main, 0.5)} !important`
759
+ border: errors[field.name] ? `1px solid ${formColors.error} !important` : `1px solid ${theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.23)" : formColors.primary} !important`,
760
+ boxShadow: errors[field.name] ? `0 0 0 1px ${formColors.error}` : `0 0 0 1px ${material.alpha(formColors.primary, 0.5)} !important`
744
761
  }
745
762
  }
746
763
  },
@@ -803,10 +820,12 @@ var FileField = ({
803
820
  setUploadingFiles,
804
821
  setError,
805
822
  clearErrors,
806
- services
823
+ services,
824
+ colors
807
825
  }) => {
808
826
  const theme = material.useTheme();
809
827
  const isMobile = material.useMediaQuery(theme.breakpoints.down("md"));
828
+ const formColors = useFormColors(colors);
810
829
  const acceptTypes = field.validation?.allowedFileTypes ? field.validation.allowedFileTypes.map((type) => `.${type.replace(".", "")}`).join(",") : void 0;
811
830
  const isMultiple = field.allowMultiple || false;
812
831
  const fileUploadService = services?.fileUpload || defaultFileUploadService;
@@ -846,15 +865,15 @@ var FileField = ({
846
865
  alignItems: "center",
847
866
  justifyContent: "center",
848
867
  border: "1px dashed",
849
- borderColor: errors[field.name] ? "error.main" : isUploading ? "primary.main" : hasFiles ? "primary.main" : "divider",
868
+ borderColor: errors[field.name] ? formColors.error : isUploading ? formColors.primary : hasFiles ? formColors.primary : formColors.divider,
850
869
  p: 1,
851
870
  cursor: isUploading ? "wait" : "pointer",
852
871
  transition: "all 0.2s ease-in-out",
853
- backgroundColor: isUploading || hasFiles ? "action.hover" : "background.paper",
872
+ backgroundColor: isUploading || hasFiles ? "action.hover" : formColors.backgroundPaper,
854
873
  opacity: isUploading ? 0.7 : 1,
855
874
  pointerEvents: isUploading ? "none" : "auto",
856
875
  "&:hover": {
857
- borderColor: isUploading ? "primary.main" : "primary.main",
876
+ borderColor: isUploading ? formColors.primary : formColors.primary,
858
877
  backgroundColor: "action.hover"
859
878
  }
860
879
  },
@@ -923,19 +942,19 @@ var FileField = ({
923
942
  ),
924
943
  isUploading ? /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 1, py: 3, width: "100%" }, children: [
925
944
  /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 40 }),
926
- /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "primary.main", sx: { fontWeight: 500 }, children: "Uploading files..." }),
927
- /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "text.secondary", children: "Please wait while files are being uploaded" })
945
+ /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { fontWeight: 500, color: formColors.primary }, children: "Uploading files..." }),
946
+ /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { color: formColors.textSecondary }, children: "Please wait while files are being uploaded" })
928
947
  ] }) : !hasFiles ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
929
- /* @__PURE__ */ jsxRuntime.jsx(CloudUploadIcon__default.default, { sx: { fontSize: 40, color: "text.secondary", mb: 1 } }),
930
- /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", color: "text.secondary", children: [
948
+ /* @__PURE__ */ jsxRuntime.jsx(CloudUploadIcon__default.default, { sx: { fontSize: 40, color: formColors.textSecondary, mb: 1 } }),
949
+ /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", sx: { color: formColors.textSecondary }, children: [
931
950
  "Click to upload or drag and drop",
932
951
  isMultiple && " (multiple files allowed)"
933
952
  ] }),
934
- field.validation?.allowedFileTypes && field.validation.allowedFileTypes.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", color: "text.secondary", sx: { mt: 0.5 }, children: [
953
+ field.validation?.allowedFileTypes && field.validation.allowedFileTypes.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", sx: { mt: 0.5, color: formColors.textSecondary }, children: [
935
954
  "Allowed: ",
936
955
  field.validation.allowedFileTypes.join(", ")
937
956
  ] }),
938
- field.validation?.maxFileSize && /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", color: "text.secondary", sx: { mt: 0.5 }, children: [
957
+ field.validation?.maxFileSize && /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", sx: { mt: 0.5, color: formColors.textSecondary }, children: [
939
958
  "Max size: ",
940
959
  formatFileSize(field.validation.maxFileSize),
941
960
  " per file"
@@ -948,10 +967,10 @@ var FileField = ({
948
967
  " uploaded"
949
968
  ] }),
950
969
  files.length === 1 && !isMultiple ? /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 2, width: "100%" }, children: [
951
- /* @__PURE__ */ jsxRuntime.jsx(InsertDriveFileIcon__default.default, { sx: { fontSize: 40, color: "primary.main" } }),
970
+ /* @__PURE__ */ jsxRuntime.jsx(InsertDriveFileIcon__default.default, { sx: { fontSize: 40, color: formColors.primary } }),
952
971
  /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { flexGrow: 1, minWidth: 0 }, children: [
953
972
  /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", maxWidth: isMobile ? "200px" : "300px" }, children: files[0] instanceof File ? files[0].name : files[0].originalName || files[0].fileName }),
954
- /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "text.secondary", children: formatFileSize(files[0].size || 0) })
973
+ /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { color: formColors.textSecondary }, children: formatFileSize(files[0].size || 0) })
955
974
  ] }),
956
975
  /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Remove file", placement: "bottom", arrow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
957
976
  material.IconButton,
@@ -966,7 +985,7 @@ var FileField = ({
966
985
  fileInput.value = "";
967
986
  }
968
987
  },
969
- sx: { color: "error.main" },
988
+ sx: { color: formColors.error },
970
989
  children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { fontSize: "small" })
971
990
  }
972
991
  ) })
@@ -981,15 +1000,15 @@ var FileField = ({
981
1000
  gap: 1.5,
982
1001
  p: 1,
983
1002
  borderRadius: 1,
984
- backgroundColor: "background.default",
1003
+ backgroundColor: formColors.background,
985
1004
  border: "1px solid",
986
- borderColor: "divider"
1005
+ borderColor: formColors.divider
987
1006
  },
988
1007
  children: [
989
- /* @__PURE__ */ jsxRuntime.jsx(InsertDriveFileIcon__default.default, { sx: { fontSize: 32, color: "primary.main" } }),
1008
+ /* @__PURE__ */ jsxRuntime.jsx(InsertDriveFileIcon__default.default, { sx: { fontSize: 32, color: formColors.primary } }),
990
1009
  /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { flexGrow: 1, minWidth: 0 }, children: [
991
1010
  /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis" }, children: fileName }),
992
- /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "text.secondary", children: formatFileSize(file.size || 0) })
1011
+ /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { color: formColors.textSecondary }, children: formatFileSize(file.size || 0) })
993
1012
  ] }),
994
1013
  /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Remove file", placement: "bottom", arrow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
995
1014
  material.IconButton,
@@ -1005,7 +1024,7 @@ var FileField = ({
1005
1024
  formField.onChange(null);
1006
1025
  }
1007
1026
  },
1008
- sx: { color: "error.main" },
1027
+ sx: { color: formColors.error },
1009
1028
  children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { fontSize: "small" })
1010
1029
  }
1011
1030
  ) })
@@ -1018,7 +1037,7 @@ var FileField = ({
1018
1037
  ]
1019
1038
  }
1020
1039
  ),
1021
- errors[field.name] && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "error", sx: { mt: 1, display: "block" }, children: errors[field.name]?.message })
1040
+ errors[field.name] && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { mt: 1, display: "block", color: formColors.error }, children: errors[field.name]?.message })
1022
1041
  ] });
1023
1042
  }
1024
1043
  },
@@ -1220,7 +1239,8 @@ var FieldRenderer = (props) => {
1220
1239
  errors: props.errors,
1221
1240
  setValue: props.setValue,
1222
1241
  formSchema,
1223
- services
1242
+ services,
1243
+ colors: props.colors
1224
1244
  };
1225
1245
  switch (field.type) {
1226
1246
  case "text":
@@ -1452,10 +1472,11 @@ var formatFieldValue = (field, value, dateFormatter, services) => {
1452
1472
  return String(value);
1453
1473
  }
1454
1474
  };
1455
- var FormViewMode = ({ formSchema, initialValues, hideTitle = false, services }) => {
1475
+ var FormViewMode = ({ formSchema, initialValues, hideTitle = false, services, colors }) => {
1456
1476
  const fieldsToRender = getAllFields(formSchema);
1457
1477
  const theme = material.useTheme();
1458
1478
  const isMobile = material.useMediaQuery(theme.breakpoints.down("md"));
1479
+ const formColors = useFormColors(colors);
1459
1480
  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { maxWidth: 600, mx: "auto", width: "100%" }, children: [
1460
1481
  !hideTitle && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", gutterBottom: true, sx: { mb: 2, fontWeight: 600 }, children: formSchema.title }),
1461
1482
  formSchema.sections && formSchema.sections.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: formSchema.sections.map((section, sectionIndex) => /* @__PURE__ */ jsxRuntime.jsxs(material.Accordion, { defaultExpanded: sectionIndex === 0, children: [
@@ -1466,13 +1487,13 @@ var FormViewMode = ({ formSchema, initialValues, hideTitle = false, services })
1466
1487
  "aria-controls": `panel-${section.id}-content`,
1467
1488
  id: `panel-${section.id}-header`,
1468
1489
  children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
1469
- /* @__PURE__ */ jsxRuntime.jsx(DoubleArrowOutlinedIcon__default.default, { fontSize: "small", color: "primary" }),
1470
- /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", sx: { fontWeight: 600 }, color: "primary", children: section.title })
1490
+ /* @__PURE__ */ jsxRuntime.jsx(DoubleArrowOutlinedIcon__default.default, { fontSize: "small", sx: { color: formColors.primary } }),
1491
+ /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", sx: { fontWeight: 600, color: formColors.primary }, children: section.title })
1471
1492
  ] })
1472
1493
  }
1473
1494
  ),
1474
1495
  /* @__PURE__ */ jsxRuntime.jsxs(material.AccordionDetails, { children: [
1475
- section.description && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "text.secondary", sx: { mb: 1.5, display: "block" }, children: section.description }),
1496
+ section.description && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { mb: 1.5, display: "block", color: formColors.textSecondary }, children: section.description }),
1476
1497
  /* @__PURE__ */ jsxRuntime.jsx(
1477
1498
  material.Box,
1478
1499
  {
@@ -1508,8 +1529,10 @@ var FormRenderer = ({
1508
1529
  hideTitle = false,
1509
1530
  allowResetOnValuesChange = false,
1510
1531
  mode = "edit",
1511
- services
1532
+ services,
1533
+ colors
1512
1534
  }) => {
1535
+ const formColors = useFormColors(colors);
1513
1536
  const {
1514
1537
  control,
1515
1538
  handleSubmit,
@@ -1590,7 +1613,7 @@ var FormRenderer = ({
1590
1613
  }
1591
1614
  };
1592
1615
  if (mode === "view") {
1593
- return /* @__PURE__ */ jsxRuntime.jsx(FormViewMode, { formSchema, initialValues, hideTitle, services });
1616
+ return /* @__PURE__ */ jsxRuntime.jsx(FormViewMode, { formSchema, initialValues, hideTitle, services, colors });
1594
1617
  }
1595
1618
  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { component: "form", onSubmit: handleSubmit(handleFormSubmit), sx: { mx: "auto", width: "100%" }, children: [
1596
1619
  !hideTitle && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", gutterBottom: true, sx: { mb: 2, fontWeight: 600 }, children: formSchema.title }),
@@ -1634,7 +1657,8 @@ var FormRenderer = ({
1634
1657
  setUploadingFiles,
1635
1658
  setError,
1636
1659
  clearErrors,
1637
- services
1660
+ services,
1661
+ colors
1638
1662
  }
1639
1663
  )
1640
1664
  },
@@ -1644,7 +1668,7 @@ var FormRenderer = ({
1644
1668
  }
1645
1669
  );
1646
1670
  if (sectionDisplayMode === "stepper") {
1647
- return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { border: "1px solid", borderColor: "divider", p: 5, backgroundColor: "background.paper" }, children: [
1671
+ return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { border: "1px solid", borderColor: formColors.divider, p: 5, backgroundColor: formColors.backgroundPaper }, children: [
1648
1672
  /* @__PURE__ */ jsxRuntime.jsx(material.Stepper, { activeStep, orientation: "horizontal", children: formSchema.sections.map((section) => /* @__PURE__ */ jsxRuntime.jsx(material.Step, { children: /* @__PURE__ */ jsxRuntime.jsx(material.StepLabel, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", sx: { fontWeight: 600 }, children: section.title }) }) }, section.id)) }),
1649
1673
  /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mt: 5 }, children: formSchema.sections.map((section, sectionIndex) => {
1650
1674
  const sectionsLength = formSchema.sections?.length || 0;
@@ -1655,15 +1679,15 @@ var FormRenderer = ({
1655
1679
  display: activeStep === sectionIndex ? "block" : "none"
1656
1680
  },
1657
1681
  children: [
1658
- section.description && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "text.secondary", sx: { mb: 1.5, display: "block" }, children: section.description }),
1682
+ section.description && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { mb: 1.5, display: "block", color: formColors.textSecondary }, children: section.description }),
1659
1683
  renderFieldsGrid(section),
1660
- /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mt: 2, display: "flex", gap: 1, borderTop: "1px solid", pt: 2, borderColor: "divider", justifyContent: "center" }, children: [
1684
+ /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mt: 2, display: "flex", gap: 1, borderTop: "1px solid", pt: 2, borderColor: formColors.divider, justifyContent: "center" }, children: [
1661
1685
  sectionIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx(
1662
1686
  material.Button,
1663
1687
  {
1664
1688
  size: "small",
1665
1689
  variant: "outlined",
1666
- color: "success",
1690
+ sx: { borderColor: formColors.success, color: formColors.success, "&:hover": { borderColor: formColors.success, backgroundColor: `${formColors.success}15` } },
1667
1691
  startIcon: /* @__PURE__ */ jsxRuntime.jsx(ArrowBackIcon__default.default, {}),
1668
1692
  onClick: () => setActiveStep(sectionIndex - 1),
1669
1693
  children: "Previous"
@@ -1674,7 +1698,7 @@ var FormRenderer = ({
1674
1698
  {
1675
1699
  variant: "outlined",
1676
1700
  size: "small",
1677
- color: "warning",
1701
+ sx: { borderColor: formColors.warning, color: formColors.warning, "&:hover": { borderColor: formColors.warning, backgroundColor: `${formColors.warning}15` } },
1678
1702
  endIcon: /* @__PURE__ */ jsxRuntime.jsx(ArrowForwardIcon__default.default, {}),
1679
1703
  onClick: () => {
1680
1704
  if (sectionIndex < sectionsLength - 1) {
@@ -1700,13 +1724,13 @@ var FormRenderer = ({
1700
1724
  "aria-controls": `panel-${section.id}-content`,
1701
1725
  id: `panel-${section.id}-header`,
1702
1726
  children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
1703
- /* @__PURE__ */ jsxRuntime.jsx(DoubleArrowOutlinedIcon__default.default, { fontSize: "small", color: "primary" }),
1704
- /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", color: "primary", sx: { fontWeight: 600 }, children: section.title })
1727
+ /* @__PURE__ */ jsxRuntime.jsx(DoubleArrowOutlinedIcon__default.default, { fontSize: "small", sx: { color: formColors.primary } }),
1728
+ /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", sx: { fontWeight: 600, color: formColors.primary }, children: section.title })
1705
1729
  ] })
1706
1730
  }
1707
1731
  ),
1708
1732
  /* @__PURE__ */ jsxRuntime.jsxs(material.AccordionDetails, { children: [
1709
- section.description && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "text.secondary", sx: { mb: 1.5, display: "block" }, children: section.description }),
1733
+ section.description && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { mb: 1.5, display: "block", color: formColors.textSecondary }, children: section.description }),
1710
1734
  renderFieldsGrid(section)
1711
1735
  ] })
1712
1736
  ] }, section.id)) });
@@ -1748,7 +1772,8 @@ var FormRenderer = ({
1748
1772
  setUploadingFiles,
1749
1773
  setError,
1750
1774
  clearErrors,
1751
- services
1775
+ services,
1776
+ colors
1752
1777
  }
1753
1778
  )
1754
1779
  },
@@ -1765,7 +1790,7 @@ var FormRenderer = ({
1765
1790
  type: "submit",
1766
1791
  variant: "contained",
1767
1792
  size: "small",
1768
- sx: { minWidth: 120 },
1793
+ sx: { minWidth: 120, backgroundColor: formColors.primary, "&:hover": { backgroundColor: formColors.primary } },
1769
1794
  disabled: isLoading,
1770
1795
  children: isLoading ? "Submitting..." : "Submit"
1771
1796
  }