config-driven-form 1.3.0 → 1.4.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 (7) hide show
  1. package/dist/index.d.mts +1 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.js +373 -118
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +373 -118
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +13 -4
package/dist/index.mjs CHANGED
@@ -32,6 +32,14 @@ var TextField = ({ name, schema, uiSchema, isRequired }) => {
32
32
  schema.title || name,
33
33
  isRequired && /* @__PURE__ */ jsx("span", { className: "cdf-required-mark", children: "*" })
34
34
  ] }),
35
+ schema.description && /* @__PURE__ */ jsx(
36
+ "p",
37
+ {
38
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
39
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
40
+ children: schema.description
41
+ }
42
+ ),
35
43
  /* @__PURE__ */ jsx("div", { className: "cdf-input-wrapper", children: /* @__PURE__ */ jsx(
36
44
  "input",
37
45
  {
@@ -74,6 +82,14 @@ var PasswordField = ({
74
82
  schema.title || name,
75
83
  isRequired && /* @__PURE__ */ jsx("span", { className: "cdf-required-mark", children: "*" })
76
84
  ] }),
85
+ schema.description && /* @__PURE__ */ jsx(
86
+ "p",
87
+ {
88
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
89
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
90
+ children: schema.description
91
+ }
92
+ ),
77
93
  /* @__PURE__ */ jsxs("div", { className: "cdf-input-wrapper", children: [
78
94
  /* @__PURE__ */ jsx(
79
95
  "input",
@@ -123,6 +139,14 @@ var NumberField = ({ name, schema, uiSchema, isRequired }) => {
123
139
  schema.title || name,
124
140
  isRequired && /* @__PURE__ */ jsx("span", { className: "cdf-required-mark", children: "*" })
125
141
  ] }),
142
+ schema.description && /* @__PURE__ */ jsx(
143
+ "p",
144
+ {
145
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
146
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
147
+ children: schema.description
148
+ }
149
+ ),
126
150
  /* @__PURE__ */ jsx("div", { className: "cdf-input-wrapper", children: /* @__PURE__ */ jsx(
127
151
  "input",
128
152
  {
@@ -180,6 +204,14 @@ var RichTextField = ({
180
204
  schema.title || name,
181
205
  isRequired && /* @__PURE__ */ jsx("span", { className: "cdf-required-mark", children: "*" })
182
206
  ] }),
207
+ schema.description && /* @__PURE__ */ jsx(
208
+ "p",
209
+ {
210
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
211
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
212
+ children: schema.description
213
+ }
214
+ ),
183
215
  /* @__PURE__ */ jsxs(
184
216
  "div",
185
217
  {
@@ -261,6 +293,14 @@ var SelectField = ({ name, schema, uiSchema, isRequired }) => {
261
293
  schema.title || name,
262
294
  isRequired && /* @__PURE__ */ jsx("span", { className: "cdf-required-mark", children: "*" })
263
295
  ] }),
296
+ schema.description && /* @__PURE__ */ jsx(
297
+ "p",
298
+ {
299
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
300
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
301
+ children: schema.description
302
+ }
303
+ ),
264
304
  /* @__PURE__ */ jsx("div", { className: "cdf-input-wrapper", children: /* @__PURE__ */ jsxs(
265
305
  "select",
266
306
  {
@@ -316,6 +356,14 @@ var RadioField = ({ name, schema, uiSchema, isRequired }) => {
316
356
  schema.title || name,
317
357
  isRequired && /* @__PURE__ */ jsx("span", { className: "cdf-required-mark", children: "*" })
318
358
  ] }),
359
+ schema.description && /* @__PURE__ */ jsx(
360
+ "p",
361
+ {
362
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
363
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
364
+ children: schema.description
365
+ }
366
+ ),
319
367
  /* @__PURE__ */ jsx("div", { className: cx("cdf-radio-group", globalClasses.radioGroup, localClasses.radioGroup), children: (_a = schema.enum) == null ? void 0 : _a.map((option) => /* @__PURE__ */ jsxs(
320
368
  "label",
321
369
  {
@@ -450,6 +498,14 @@ var CheckboxGroupField = ({
450
498
  schema.title || name,
451
499
  isRequired && /* @__PURE__ */ jsx("span", { className: "cdf-required-mark", children: "*" })
452
500
  ] }),
501
+ schema.description && /* @__PURE__ */ jsx(
502
+ "p",
503
+ {
504
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
505
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
506
+ children: schema.description
507
+ }
508
+ ),
453
509
  /* @__PURE__ */ jsx(
454
510
  "div",
455
511
  {
@@ -538,6 +594,14 @@ var FileField = ({ name, schema, uiSchema, isRequired }) => {
538
594
  schema.title || name,
539
595
  isRequired && /* @__PURE__ */ jsx("span", { className: "cdf-required-mark", children: "*" })
540
596
  ] }),
597
+ schema.description && /* @__PURE__ */ jsx(
598
+ "p",
599
+ {
600
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
601
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
602
+ children: schema.description
603
+ }
604
+ ),
541
605
  /* @__PURE__ */ jsxs(
542
606
  "div",
543
607
  {
@@ -1117,10 +1181,7 @@ var Canvas = ({
1117
1181
  flex: 1,
1118
1182
  padding: "2rem",
1119
1183
  backgroundColor: "#f3f4f6",
1120
- overflowY: "auto",
1121
- display: "flex",
1122
- flexDirection: "column",
1123
- alignItems: "center"
1184
+ overflowY: "auto"
1124
1185
  },
1125
1186
  onClick: () => onSelectField(""),
1126
1187
  children: /* @__PURE__ */ jsx(
@@ -1128,6 +1189,8 @@ var Canvas = ({
1128
1189
  {
1129
1190
  ref: setNodeRef,
1130
1191
  style: {
1192
+ margin: "0 auto",
1193
+ height: "fit-content",
1131
1194
  width: "100%",
1132
1195
  maxWidth: "800px",
1133
1196
  minHeight: "400px",
@@ -1391,6 +1454,25 @@ var PropertiesPanel = ({
1391
1454
  [element]: value
1392
1455
  });
1393
1456
  };
1457
+ const handleErrorMessageChange = (errorKey, message) => {
1458
+ const currentMessages = typeof field.schema.errorMessage === "object" ? field.schema.errorMessage : {};
1459
+ const newMessages = { ...currentMessages };
1460
+ if (!message) {
1461
+ delete newMessages[errorKey];
1462
+ } else {
1463
+ newMessages[errorKey] = message;
1464
+ }
1465
+ handleSchemaChange(
1466
+ "errorMessage",
1467
+ Object.keys(newMessages).length > 0 ? newMessages : void 0
1468
+ );
1469
+ };
1470
+ const getErrorMessage = (errorKey) => {
1471
+ if (typeof field.schema.errorMessage === "object") {
1472
+ return field.schema.errorMessage[errorKey] || "";
1473
+ }
1474
+ return "";
1475
+ };
1394
1476
  return /* @__PURE__ */ jsxs(
1395
1477
  "div",
1396
1478
  {
@@ -1579,135 +1661,308 @@ var PropertiesPanel = ({
1579
1661
  ] }),
1580
1662
  activeTab === "validation" && /* @__PURE__ */ jsxs(Fragment, { children: [
1581
1663
  /* @__PURE__ */ jsxs(
1582
- "label",
1664
+ "div",
1583
1665
  {
1584
1666
  style: {
1585
1667
  display: "flex",
1586
- alignItems: "center",
1587
- gap: "0.5rem",
1588
- fontSize: "0.875rem",
1589
- fontWeight: 500,
1590
- color: "#374151",
1591
- cursor: "pointer"
1668
+ flexDirection: "column",
1669
+ gap: "0.375rem",
1670
+ marginBottom: "1rem",
1671
+ borderBottom: "1px solid #e5e7eb",
1672
+ paddingBottom: "1rem"
1592
1673
  },
1593
1674
  children: [
1594
- /* @__PURE__ */ jsx(
1595
- "input",
1675
+ /* @__PURE__ */ jsxs(
1676
+ "label",
1596
1677
  {
1597
- type: "checkbox",
1598
- checked: field.isRequired || false,
1599
- onChange: (e) => onUpdate(field.id, { isRequired: e.target.checked })
1678
+ style: {
1679
+ display: "flex",
1680
+ alignItems: "center",
1681
+ gap: "0.5rem",
1682
+ fontSize: "0.875rem",
1683
+ fontWeight: 500,
1684
+ color: "#374151",
1685
+ cursor: "pointer"
1686
+ },
1687
+ children: [
1688
+ /* @__PURE__ */ jsx(
1689
+ "input",
1690
+ {
1691
+ type: "checkbox",
1692
+ checked: field.isRequired || false,
1693
+ onChange: (e) => onUpdate(field.id, { isRequired: e.target.checked })
1694
+ }
1695
+ ),
1696
+ "Required Field"
1697
+ ]
1600
1698
  }
1601
1699
  ),
1602
- "Required Field"
1700
+ field.isRequired && /* @__PURE__ */ jsx(
1701
+ "input",
1702
+ {
1703
+ type: "text",
1704
+ placeholder: "Custom required error message",
1705
+ value: getErrorMessage("required"),
1706
+ onChange: (e) => handleErrorMessageChange("required", e.target.value),
1707
+ style: {
1708
+ width: "100%",
1709
+ padding: "0.4rem",
1710
+ border: "1px dashed #d1d5db",
1711
+ borderRadius: "0.375rem",
1712
+ fontSize: "0.75rem",
1713
+ marginTop: "0.25rem",
1714
+ backgroundColor: "#f9fafb"
1715
+ }
1716
+ }
1717
+ )
1603
1718
  ]
1604
1719
  }
1605
1720
  ),
1606
1721
  (field.type === "text" || field.type === "email" || field.type === "password") && /* @__PURE__ */ jsxs(Fragment, { children: [
1607
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
1608
- /* @__PURE__ */ jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Min Length" }),
1609
- /* @__PURE__ */ jsx(
1610
- "input",
1611
- {
1612
- type: "number",
1613
- value: field.schema.minLength || "",
1614
- onChange: (e) => handleSchemaChange(
1615
- "minLength",
1616
- e.target.value ? Number(e.target.value) : void 0
1722
+ /* @__PURE__ */ jsxs(
1723
+ "div",
1724
+ {
1725
+ style: {
1726
+ display: "flex",
1727
+ flexDirection: "column",
1728
+ gap: "0.375rem",
1729
+ marginBottom: "0.5rem"
1730
+ },
1731
+ children: [
1732
+ /* @__PURE__ */ jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Min Length" }),
1733
+ /* @__PURE__ */ jsx(
1734
+ "input",
1735
+ {
1736
+ type: "number",
1737
+ value: field.schema.minLength || "",
1738
+ onChange: (e) => handleSchemaChange(
1739
+ "minLength",
1740
+ e.target.value ? Number(e.target.value) : void 0
1741
+ ),
1742
+ style: {
1743
+ width: "100%",
1744
+ padding: "0.5rem",
1745
+ border: "1px solid #d1d5db",
1746
+ borderRadius: "0.375rem",
1747
+ fontSize: "0.875rem"
1748
+ }
1749
+ }
1617
1750
  ),
1618
- style: {
1619
- width: "100%",
1620
- padding: "0.5rem",
1621
- border: "1px solid #d1d5db",
1622
- borderRadius: "0.375rem",
1623
- fontSize: "0.875rem"
1624
- }
1625
- }
1626
- )
1627
- ] }),
1628
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
1629
- /* @__PURE__ */ jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Max Length" }),
1630
- /* @__PURE__ */ jsx(
1631
- "input",
1632
- {
1633
- type: "number",
1634
- value: field.schema.maxLength || "",
1635
- onChange: (e) => handleSchemaChange(
1636
- "maxLength",
1637
- e.target.value ? Number(e.target.value) : void 0
1751
+ field.schema.minLength !== void 0 && /* @__PURE__ */ jsx(
1752
+ "input",
1753
+ {
1754
+ type: "text",
1755
+ placeholder: "Custom error message",
1756
+ value: getErrorMessage("minLength"),
1757
+ onChange: (e) => handleErrorMessageChange("minLength", e.target.value),
1758
+ style: {
1759
+ width: "100%",
1760
+ padding: "0.4rem",
1761
+ border: "1px dashed #d1d5db",
1762
+ borderRadius: "0.375rem",
1763
+ fontSize: "0.75rem",
1764
+ backgroundColor: "#f9fafb"
1765
+ }
1766
+ }
1767
+ )
1768
+ ]
1769
+ }
1770
+ ),
1771
+ /* @__PURE__ */ jsxs(
1772
+ "div",
1773
+ {
1774
+ style: {
1775
+ display: "flex",
1776
+ flexDirection: "column",
1777
+ gap: "0.375rem",
1778
+ marginBottom: "0.5rem"
1779
+ },
1780
+ children: [
1781
+ /* @__PURE__ */ jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Max Length" }),
1782
+ /* @__PURE__ */ jsx(
1783
+ "input",
1784
+ {
1785
+ type: "number",
1786
+ value: field.schema.maxLength || "",
1787
+ onChange: (e) => handleSchemaChange(
1788
+ "maxLength",
1789
+ e.target.value ? Number(e.target.value) : void 0
1790
+ ),
1791
+ style: {
1792
+ width: "100%",
1793
+ padding: "0.5rem",
1794
+ border: "1px solid #d1d5db",
1795
+ borderRadius: "0.375rem",
1796
+ fontSize: "0.875rem"
1797
+ }
1798
+ }
1638
1799
  ),
1639
- style: {
1640
- width: "100%",
1641
- padding: "0.5rem",
1642
- border: "1px solid #d1d5db",
1643
- borderRadius: "0.375rem",
1644
- fontSize: "0.875rem"
1645
- }
1646
- }
1647
- )
1648
- ] }),
1649
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
1650
- /* @__PURE__ */ jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Regex Pattern" }),
1651
- /* @__PURE__ */ jsx(
1652
- "input",
1653
- {
1654
- type: "text",
1655
- value: field.schema.pattern || "",
1656
- onChange: (e) => handleSchemaChange("pattern", e.target.value || void 0),
1657
- style: {
1658
- width: "100%",
1659
- padding: "0.5rem",
1660
- border: "1px solid #d1d5db",
1661
- borderRadius: "0.375rem",
1662
- fontSize: "0.875rem"
1663
- }
1664
- }
1665
- )
1666
- ] })
1800
+ field.schema.maxLength !== void 0 && /* @__PURE__ */ jsx(
1801
+ "input",
1802
+ {
1803
+ type: "text",
1804
+ placeholder: "Custom error message",
1805
+ value: getErrorMessage("maxLength"),
1806
+ onChange: (e) => handleErrorMessageChange("maxLength", e.target.value),
1807
+ style: {
1808
+ width: "100%",
1809
+ padding: "0.4rem",
1810
+ border: "1px dashed #d1d5db",
1811
+ borderRadius: "0.375rem",
1812
+ fontSize: "0.75rem",
1813
+ backgroundColor: "#f9fafb"
1814
+ }
1815
+ }
1816
+ )
1817
+ ]
1818
+ }
1819
+ ),
1820
+ /* @__PURE__ */ jsxs(
1821
+ "div",
1822
+ {
1823
+ style: {
1824
+ display: "flex",
1825
+ flexDirection: "column",
1826
+ gap: "0.375rem",
1827
+ marginBottom: "0.5rem"
1828
+ },
1829
+ children: [
1830
+ /* @__PURE__ */ jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Regex Pattern" }),
1831
+ /* @__PURE__ */ jsx(
1832
+ "input",
1833
+ {
1834
+ type: "text",
1835
+ value: field.schema.pattern || "",
1836
+ onChange: (e) => handleSchemaChange("pattern", e.target.value || void 0),
1837
+ style: {
1838
+ width: "100%",
1839
+ padding: "0.5rem",
1840
+ border: "1px solid #d1d5db",
1841
+ borderRadius: "0.375rem",
1842
+ fontSize: "0.875rem"
1843
+ }
1844
+ }
1845
+ ),
1846
+ field.schema.pattern !== void 0 && /* @__PURE__ */ jsx(
1847
+ "input",
1848
+ {
1849
+ type: "text",
1850
+ placeholder: "Custom error message",
1851
+ value: getErrorMessage("pattern"),
1852
+ onChange: (e) => handleErrorMessageChange("pattern", e.target.value),
1853
+ style: {
1854
+ width: "100%",
1855
+ padding: "0.4rem",
1856
+ border: "1px dashed #d1d5db",
1857
+ borderRadius: "0.375rem",
1858
+ fontSize: "0.75rem",
1859
+ backgroundColor: "#f9fafb"
1860
+ }
1861
+ }
1862
+ )
1863
+ ]
1864
+ }
1865
+ )
1667
1866
  ] }),
1668
1867
  field.type === "number" && /* @__PURE__ */ jsxs(Fragment, { children: [
1669
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
1670
- /* @__PURE__ */ jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Minimum Value" }),
1671
- /* @__PURE__ */ jsx(
1672
- "input",
1673
- {
1674
- type: "number",
1675
- value: field.schema.minimum || "",
1676
- onChange: (e) => handleSchemaChange(
1677
- "minimum",
1678
- e.target.value ? Number(e.target.value) : void 0
1868
+ /* @__PURE__ */ jsxs(
1869
+ "div",
1870
+ {
1871
+ style: {
1872
+ display: "flex",
1873
+ flexDirection: "column",
1874
+ gap: "0.375rem",
1875
+ marginBottom: "0.5rem"
1876
+ },
1877
+ children: [
1878
+ /* @__PURE__ */ jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Minimum Value" }),
1879
+ /* @__PURE__ */ jsx(
1880
+ "input",
1881
+ {
1882
+ type: "number",
1883
+ value: field.schema.minimum || "",
1884
+ onChange: (e) => handleSchemaChange(
1885
+ "minimum",
1886
+ e.target.value ? Number(e.target.value) : void 0
1887
+ ),
1888
+ style: {
1889
+ width: "100%",
1890
+ padding: "0.5rem",
1891
+ border: "1px solid #d1d5db",
1892
+ borderRadius: "0.375rem",
1893
+ fontSize: "0.875rem"
1894
+ }
1895
+ }
1679
1896
  ),
1680
- style: {
1681
- width: "100%",
1682
- padding: "0.5rem",
1683
- border: "1px solid #d1d5db",
1684
- borderRadius: "0.375rem",
1685
- fontSize: "0.875rem"
1686
- }
1687
- }
1688
- )
1689
- ] }),
1690
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
1691
- /* @__PURE__ */ jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Maximum Value" }),
1692
- /* @__PURE__ */ jsx(
1693
- "input",
1694
- {
1695
- type: "number",
1696
- value: field.schema.maximum || "",
1697
- onChange: (e) => handleSchemaChange(
1698
- "maximum",
1699
- e.target.value ? Number(e.target.value) : void 0
1897
+ field.schema.minimum !== void 0 && /* @__PURE__ */ jsx(
1898
+ "input",
1899
+ {
1900
+ type: "text",
1901
+ placeholder: "Custom error message",
1902
+ value: getErrorMessage("minimum"),
1903
+ onChange: (e) => handleErrorMessageChange("minimum", e.target.value),
1904
+ style: {
1905
+ width: "100%",
1906
+ padding: "0.4rem",
1907
+ border: "1px dashed #d1d5db",
1908
+ borderRadius: "0.375rem",
1909
+ fontSize: "0.75rem",
1910
+ backgroundColor: "#f9fafb"
1911
+ }
1912
+ }
1913
+ )
1914
+ ]
1915
+ }
1916
+ ),
1917
+ /* @__PURE__ */ jsxs(
1918
+ "div",
1919
+ {
1920
+ style: {
1921
+ display: "flex",
1922
+ flexDirection: "column",
1923
+ gap: "0.375rem",
1924
+ marginBottom: "0.5rem"
1925
+ },
1926
+ children: [
1927
+ /* @__PURE__ */ jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Maximum Value" }),
1928
+ /* @__PURE__ */ jsx(
1929
+ "input",
1930
+ {
1931
+ type: "number",
1932
+ value: field.schema.maximum || "",
1933
+ onChange: (e) => handleSchemaChange(
1934
+ "maximum",
1935
+ e.target.value ? Number(e.target.value) : void 0
1936
+ ),
1937
+ style: {
1938
+ width: "100%",
1939
+ padding: "0.5rem",
1940
+ border: "1px solid #d1d5db",
1941
+ borderRadius: "0.375rem",
1942
+ fontSize: "0.875rem"
1943
+ }
1944
+ }
1700
1945
  ),
1701
- style: {
1702
- width: "100%",
1703
- padding: "0.5rem",
1704
- border: "1px solid #d1d5db",
1705
- borderRadius: "0.375rem",
1706
- fontSize: "0.875rem"
1707
- }
1708
- }
1709
- )
1710
- ] })
1946
+ field.schema.maximum !== void 0 && /* @__PURE__ */ jsx(
1947
+ "input",
1948
+ {
1949
+ type: "text",
1950
+ placeholder: "Custom error message",
1951
+ value: getErrorMessage("maximum"),
1952
+ onChange: (e) => handleErrorMessageChange("maximum", e.target.value),
1953
+ style: {
1954
+ width: "100%",
1955
+ padding: "0.4rem",
1956
+ border: "1px dashed #d1d5db",
1957
+ borderRadius: "0.375rem",
1958
+ fontSize: "0.75rem",
1959
+ backgroundColor: "#f9fafb"
1960
+ }
1961
+ }
1962
+ )
1963
+ ]
1964
+ }
1965
+ )
1711
1966
  ] })
1712
1967
  ] }),
1713
1968
  activeTab === "design" && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -2007,14 +2262,14 @@ var FormBuilder = ({
2007
2262
  style: {
2008
2263
  flex: 1,
2009
2264
  padding: "3rem",
2010
- overflowY: "auto",
2011
- display: "flex",
2012
- justifyContent: "center"
2265
+ overflowY: "auto"
2013
2266
  },
2014
2267
  children: /* @__PURE__ */ jsxs(
2015
2268
  "div",
2016
2269
  {
2017
2270
  style: {
2271
+ margin: "0 auto",
2272
+ height: "fit-content",
2018
2273
  width: "100%",
2019
2274
  maxWidth: "800px",
2020
2275
  backgroundColor: "white",