@crediblemark/build 0.24.5 → 0.24.6

package/dist/{chunk-H2LU4EW3.mjs → chunk-WDTSUNWU.mjs}

@@ -1,11 +1,11 @@
 import {
   EditorInner
-} from "./chunk-2VS2BST6.mjs";
+} from "./chunk-WH3A7FAR.mjs";
 import {
   IconButton,
   LoadedRichTextMenuInner,
   Loader
-} from "./chunk-VBNE6GK2.mjs";
+} from "./chunk-5JSNFZKX.mjs";
 import {
   ChevronDown,
   CircleCheckBig,
@@ -17,7 +17,7 @@ import {
   SlidersHorizontal,
   Type,
   useAppStore
-} from "./chunk-GIUKL443.mjs";
+} from "./chunk-XLNVCM4Q.mjs";
 import {
   get_class_name_factory_default
 } from "./chunk-BFHV72KK.mjs";
@@ -75,7 +75,7 @@ function useFieldStore(selector) {
 }
 
 // css-module:/home/crediblemark/Project/Credibuild/components/AutoField/styles.module.css#css-module
-var styles_module_default = { "InputWrapper": "_InputWrapper_1q7gk_1", "Input-label": "_Input-label_1q7gk_5", "Input-labelIcon": "_Input-labelIcon_1q7gk_14", "Input-disabledIcon": "_Input-disabledIcon_1q7gk_21", "Input-input": "_Input-input_1q7gk_26", "Input": "_Input_1q7gk_1", "Input--readOnly": "_Input--readOnly_1q7gk_82", "Input-radioGroupItems": "_Input-radioGroupItems_1q7gk_93", "Input-radio": "_Input-radio_1q7gk_93", "Input-radioInner": "_Input-radioInner_1q7gk_110", "Input-radioInput": "_Input-radioInput_1q7gk_155" };
+var styles_module_default = { "InputWrapper": "_InputWrapper_1mz7o_1", "Input-label": "_Input-label_1mz7o_5", "Input-label--noChildren": "_Input-label--noChildren_1mz7o_14", "Input-labelIcon": "_Input-labelIcon_1mz7o_18", "Input-disabledIcon": "_Input-disabledIcon_1mz7o_25", "Input-input": "_Input-input_1mz7o_30", "Input": "_Input_1mz7o_1", "Input--readOnly": "_Input--readOnly_1mz7o_86", "Input-radioGroupItems": "_Input-radioGroupItems_1mz7o_97", "Input-radio": "_Input-radio_1mz7o_97", "Input-radioInner": "_Input-radioInner_1mz7o_114", "Input-radioInput": "_Input-radioInput_1mz7o_159" };
 
 // components/AutoField/FieldLabel.tsx
 import { useMemo } from "react";
@@ -91,7 +91,7 @@ var FieldLabel = ({
 }) => {
   const El = el;
   return /* @__PURE__ */ jsxs(El, { className, children: [
-    /* @__PURE__ */ jsxs("div", { className: getClassName("label"), children: [
+    /* @__PURE__ */ jsxs("div", { className: `${getClassName("label")} ${!children ? styles_module_default["Input-label--noChildren"] : ""}`, children: [
       icon ? /* @__PURE__ */ jsx2("div", { className: getClassName("labelIcon"), children: icon }) : /* @__PURE__ */ jsx2(Fragment, {}),
       label,
       readOnly && /* @__PURE__ */ jsx2("div", { className: getClassName("disabledIcon"), title: "Read-only", children: /* @__PURE__ */ jsx2(Lock, { size: "12" }) })
@@ -261,29 +261,15 @@ var Button = ({
   return el;
 };
 
-// components/AutoField/index.tsx
-import {
-  useCallback as useCallback4,
-  useEffect as useEffect6,
-  useMemo as useMemo5
-} from "react";
-
-// lib/use-safe-id.ts
-import React2, { useState as useState3 } from "react";
-var useSafeId = () => {
-  if (typeof React2.useId !== "undefined") {
-    return React2.useId();
-  }
-  const [id] = useState3(generateId());
-  return id;
-};
+// components/AutoField/subfield.tsx
+import { memo as memo2 } from "react";
 
 // components/AutoField/AutoFieldInternal.tsx
 import {
   Suspense as Suspense2,
-  useCallback as useCallback3,
-  useContext as useContext4,
-  useMemo as useMemo4
+  useCallback as useCallback4,
+  useContext as useContext5,
+  useMemo as useMemo5
 } from "react";
 import { useShallow as useShallow3 } from "zustand/react/shallow";
 import { lazy as lazy2 } from "react";
@@ -394,14 +380,14 @@ var SelectField = ({
 };
 
 // components/AutoField/fields/ExternalField/index.tsx
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 
 // components/ExternalInput/index.tsx
 import {
-  useMemo as useMemo3,
-  useEffect as useEffect3,
+  useMemo as useMemo4,
+  useEffect as useEffect4,
   useState as useState5,
-  useCallback,
+  useCallback as useCallback2,
   isValidElement
 } from "react";
 
@@ -409,7 +395,7 @@ import {
 var styles_module_default2 = { "ExternalInput-actions": "_ExternalInput-actions_1gpb4_1", "ExternalInput-button": "_ExternalInput-button_1gpb4_5", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_1gpb4_24", "ExternalInput--readOnly": "_ExternalInput--readOnly_1gpb4_31", "ExternalInput-detachButton": "_ExternalInput-detachButton_1gpb4_35", "ExternalInput": "_ExternalInput_1gpb4_1", "ExternalInputModal": "_ExternalInputModal_1gpb4_79", "ExternalInputModal-grid": "_ExternalInputModal-grid_1gpb4_89", "ExternalInputModal--filtersToggled": "_ExternalInputModal--filtersToggled_1gpb4_100", "ExternalInputModal-filters": "_ExternalInputModal-filters_1gpb4_105", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_1gpb4_124", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_1gpb4_133", "ExternalInputModal-table": "_ExternalInputModal-table_1gpb4_133", "ExternalInputModal-thead": "_ExternalInputModal-thead_1gpb4_149", "ExternalInputModal-th": "_ExternalInputModal-th_1gpb4_149", "ExternalInputModal-td": "_ExternalInputModal-td_1gpb4_164", "ExternalInputModal-tr": "_ExternalInputModal-tr_1gpb4_169", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_1gpb4_176", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_1gpb4_202", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_1gpb4_206", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_1gpb4_223", "ExternalInputModal-searchForm": "_ExternalInputModal-searchForm_1gpb4_227", "ExternalInputModal-search": "_ExternalInputModal-search_1gpb4_227", "ExternalInputModal-searchIcon": "_ExternalInputModal-searchIcon_1gpb4_264", "ExternalInputModal-searchIconText": "_ExternalInputModal-searchIconText_1gpb4_289", "ExternalInputModal-searchInput": "_ExternalInputModal-searchInput_1gpb4_299", "ExternalInputModal-searchActions": "_ExternalInputModal-searchActions_1gpb4_313", "ExternalInputModal-searchActionIcon": "_ExternalInputModal-searchActionIcon_1gpb4_326", "ExternalInputModal-footerContainer": "_ExternalInputModal-footerContainer_1gpb4_330", "ExternalInputModal-footer": "_ExternalInputModal-footer_1gpb4_330", "ExternalInputModal-field": "_ExternalInputModal-field_1gpb4_343" };
 
 // components/Modal/index.tsx
-import { useEffect as useEffect2, useState as useState4 } from "react";
+import { useEffect as useEffect2, useState as useState3 } from "react";
 
 // css-module:/home/crediblemark/Project/Credibuild/components/Modal/styles.module.css#css-module
 var styles_module_default3 = { "Modal": "_Modal_b422s_1", "Modal--isOpen": "_Modal--isOpen_b422s_15", "Modal-inner": "_Modal-inner_b422s_19" };
@@ -423,7 +409,7 @@ var Modal = ({
   onClose,
   isOpen
 }) => {
-  const [rootEl, setRootEl] = useState4(null);
+  const [rootEl, setRootEl] = useState3(null);
   useEffect2(() => {
     setRootEl(document.getElementById("credbuild-portal-root"));
   }, []);
@@ -462,9 +448,73 @@ var Heading = ({ children, rank, size = "m" }) => {
   );
 };
 
+// components/AutoField/index.tsx
+import {
+  useCallback,
+  useEffect as useEffect3,
+  useMemo as useMemo3
+} from "react";
+
+// lib/use-safe-id.ts
+import React2, { useState as useState4 } from "react";
+var useSafeId = () => {
+  if (typeof React2.useId !== "undefined") {
+    return React2.useId();
+  }
+  const [id] = useState4(generateId());
+  return id;
+};
+
+// components/AutoField/index.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var getClassName7 = get_class_name_factory_default("Input", styles_module_default);
+var getClassNameWrapper = get_class_name_factory_default("InputWrapper", styles_module_default);
+function AutoFieldPublicInternal({ value, ...props }) {
+  const DefaultLabel = useMemo3(() => {
+    const DefaultLabel2 = (labelProps) => /* @__PURE__ */ jsx9(
+      "div",
+      {
+        ...labelProps,
+        className: getClassName7({ readOnly: props.readOnly })
+      }
+    );
+    return DefaultLabel2;
+  }, [props.readOnly]);
+  const fieldStore = useFieldStoreApi();
+  const { id: propsId, onChange: propsOnChange } = props;
+  const onChange = useCallback(
+    (value2) => {
+      if (!propsId) return;
+      fieldStore.setState({ [propsId]: value2 });
+      propsOnChange(value2);
+    },
+    [fieldStore, propsOnChange, propsId]
+  );
+  useEffect3(() => {
+    if (!props.id) return;
+    fieldStore.setState({ [props.id]: value });
+  }, [props.id, value, fieldStore]);
+  return /* @__PURE__ */ jsx9(
+    AutoFieldInternal,
+    {
+      ...props,
+      onChange,
+      Label: DefaultLabel
+    }
+  );
+}
+function AutoField(props) {
+  const id = useSafeId();
+  if (props.field.type === "slot") {
+    return null;
+  }
+  const providerValue = useMemo3(() => ({ [id]: props.value }), [id, props.value]);
+  return /* @__PURE__ */ jsx9(fieldContextStore.Provider, { value: providerValue, children: /* @__PURE__ */ jsx9(AutoFieldPublicInternal, { ...props, id }) });
+}
+
 // components/ExternalInput/index.tsx
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
-var getClassName7 = get_class_name_factory_default("ExternalInput", styles_module_default2);
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+var getClassName8 = get_class_name_factory_default("ExternalInput", styles_module_default2);
 var getClassNameModal = get_class_name_factory_default("ExternalInputModal", styles_module_default2);
 var dataCache = {};
 var ExternalInput = ({
@@ -487,10 +537,10 @@ var ExternalInput = ({
   const hasFilterFields = !!filterFields;
   const [filters, setFilters] = useState5(field.initialFilters || {});
   const [filtersToggled, setFiltersToggled] = useState5(hasFilterFields);
-  const mappedData = useMemo3(() => {
+  const mappedData = useMemo4(() => {
     return data.map(mapRow);
   }, [data, mapRow]);
-  const keys = useMemo3(() => {
+  const keys = useMemo4(() => {
     const validKeys = /* @__PURE__ */ new Set();
     for (const item of mappedData) {
       for (const key of Object.keys(item)) {
@@ -502,7 +552,7 @@ var ExternalInput = ({
     return Array.from(validKeys);
   }, [mappedData]);
   const [searchQuery, setSearchQuery] = useState5(field.initialQuery || "");
-  const search = useCallback(
+  const search = useCallback2(
     async (query, filters2) => {
       setIsLoading(true);
       const cacheKey = `${id}-${query}-${JSON.stringify(filters2)}`;
@@ -522,7 +572,7 @@ var ExternalInput = ({
     },
     [id, field, shouldCacheData]
   );
-  const Footer = useCallback(
+  const Footer = useCallback2(
     (props) => field.renderFooter ? field.renderFooter(props) : /* @__PURE__ */ jsxs4("span", { className: getClassNameModal("footer"), children: [
       props.items.length,
       " result",
@@ -530,47 +580,47 @@ var ExternalInput = ({
     ] }),
     [field]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     search(searchQuery, filters);
   }, [search, searchQuery, filters]);
   return /* @__PURE__ */ jsxs4(
     "div",
     {
-      className: getClassName7({
+      className: getClassName8({
         dataSelected: !!value,
         modalVisible: isOpen,
         readOnly
       }),
       id,
       children: [
-        /* @__PURE__ */ jsxs4("div", { className: getClassName7("actions"), children: [
-          /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsxs4("div", { className: getClassName8("actions"), children: [
+          /* @__PURE__ */ jsx10(
             "button",
             {
               type: "button",
               onClick: () => setOpen(true),
-              className: getClassName7("button"),
+              className: getClassName8("button"),
               disabled: readOnly,
               children: value ? field.getItemSummary ? field.getItemSummary(value) : "External item" : /* @__PURE__ */ jsxs4(Fragment2, { children: [
-                /* @__PURE__ */ jsx9(Link, { size: "16" }),
-                /* @__PURE__ */ jsx9("span", { children: field.placeholder })
+                /* @__PURE__ */ jsx10(Link, { size: "16" }),
+                /* @__PURE__ */ jsx10("span", { children: field.placeholder })
               ] })
             }
           ),
-          value && /* @__PURE__ */ jsx9(
+          value && /* @__PURE__ */ jsx10(
             "button",
             {
               type: "button",
-              className: getClassName7("detachButton"),
+              className: getClassName8("detachButton"),
               onClick: () => {
                 onChange(null);
               },
               disabled: readOnly,
-              children: /* @__PURE__ */ jsx9(LockOpen, { size: 16 })
+              children: /* @__PURE__ */ jsx10(LockOpen, { size: 16 })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx9(Modal, { onClose: () => setOpen(false), isOpen, children: /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsx10(Modal, { onClose: () => setOpen(false), isOpen, children: /* @__PURE__ */ jsxs4(
           "form",
           {
             className: getClassNameModal({
@@ -585,11 +635,11 @@ var ExternalInput = ({
               search(searchQuery, filters);
             },
             children: [
-              /* @__PURE__ */ jsx9("div", { className: getClassNameModal("masthead"), children: field.showSearch ? /* @__PURE__ */ jsxs4("div", { className: getClassNameModal("searchForm"), children: [
+              /* @__PURE__ */ jsx10("div", { className: getClassNameModal("masthead"), children: field.showSearch ? /* @__PURE__ */ jsxs4("div", { className: getClassNameModal("searchForm"), children: [
                 /* @__PURE__ */ jsxs4("label", { className: getClassNameModal("search"), children: [
-                  /* @__PURE__ */ jsx9("span", { className: getClassNameModal("searchIconText"), children: "Search" }),
-                  /* @__PURE__ */ jsx9("div", { className: getClassNameModal("searchIcon"), children: /* @__PURE__ */ jsx9(Search, { size: "18" }) }),
-                  /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx10("span", { className: getClassNameModal("searchIconText"), children: "Search" }),
+                  /* @__PURE__ */ jsx10("div", { className: getClassNameModal("searchIcon"), children: /* @__PURE__ */ jsx10(Search, { size: "18" }) }),
+                  /* @__PURE__ */ jsx10(
                     "input",
                     {
                       className: getClassNameModal("searchInput"),
@@ -605,8 +655,8 @@ var ExternalInput = ({
                   )
                 ] }),
                 /* @__PURE__ */ jsxs4("div", { className: getClassNameModal("searchActions"), children: [
-                  /* @__PURE__ */ jsx9(Button, { type: "submit", loading: isLoading, fullWidth: true, children: "Search" }),
-                  hasFilterFields && /* @__PURE__ */ jsx9("div", { className: getClassNameModal("searchActionIcon"), children: /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx10(Button, { type: "submit", loading: isLoading, fullWidth: true, children: "Search" }),
+                  hasFilterFields && /* @__PURE__ */ jsx10("div", { className: getClassNameModal("searchActionIcon"), children: /* @__PURE__ */ jsx10(
                     IconButton,
                     {
                       type: "button",
@@ -616,19 +666,19 @@ var ExternalInput = ({
                         e.stopPropagation();
                         setFiltersToggled(!filtersToggled);
                       },
-                      children: /* @__PURE__ */ jsx9(SlidersHorizontal, { size: 20 })
+                      children: /* @__PURE__ */ jsx10(SlidersHorizontal, { size: 20 })
                     }
                   ) })
                 ] })
-              ] }) : /* @__PURE__ */ jsx9(Heading, { rank: "2", size: "xs", children: field.placeholder || "Select data" }) }),
+              ] }) : /* @__PURE__ */ jsx10(Heading, { rank: "2", size: "xs", children: field.placeholder || "Select data" }) }),
               /* @__PURE__ */ jsxs4("div", { className: getClassNameModal("grid"), children: [
-                hasFilterFields && /* @__PURE__ */ jsx9("div", { className: getClassNameModal("filters"), children: hasFilterFields && Object.keys(filterFields).map((fieldName) => {
+                hasFilterFields && /* @__PURE__ */ jsx10("div", { className: getClassNameModal("filters"), children: hasFilterFields && Object.keys(filterFields).map((fieldName) => {
                   const filterField = filterFields[fieldName];
-                  return /* @__PURE__ */ jsx9(
+                  return /* @__PURE__ */ jsx10(
                     "div",
                     {
                       className: getClassNameModal("field"),
-                      children: /* @__PURE__ */ jsx9(FieldLabel, { label: filterField.label || fieldName, children: /* @__PURE__ */ jsx9(
+                      children: /* @__PURE__ */ jsx10(FieldLabel, { label: filterField.label || fieldName, children: /* @__PURE__ */ jsx10(
                         AutoField,
                         {
                           field: filterField,
@@ -652,7 +702,7 @@ var ExternalInput = ({
                 }) }),
                 /* @__PURE__ */ jsxs4("div", { className: getClassNameModal("tableWrapper"), children: [
                   /* @__PURE__ */ jsxs4("table", { className: getClassNameModal("table"), children: [
-                    /* @__PURE__ */ jsx9("thead", { className: getClassNameModal("thead"), children: /* @__PURE__ */ jsx9("tr", { className: getClassNameModal("tr"), children: keys.map((key) => /* @__PURE__ */ jsx9(
+                    /* @__PURE__ */ jsx10("thead", { className: getClassNameModal("thead"), children: /* @__PURE__ */ jsx10("tr", { className: getClassNameModal("tr"), children: keys.map((key) => /* @__PURE__ */ jsx10(
                       "th",
                       {
                         className: getClassNameModal("th"),
@@ -661,8 +711,8 @@ var ExternalInput = ({
                       },
                       key
                     )) }) }),
-                    /* @__PURE__ */ jsx9("tbody", { className: getClassNameModal("tbody"), children: mappedData.map((item, i) => {
-                      return /* @__PURE__ */ jsx9(
+                    /* @__PURE__ */ jsx10("tbody", { className: getClassNameModal("tbody"), children: mappedData.map((item, i) => {
+                      return /* @__PURE__ */ jsx10(
                         "tr",
                         {
                           style: { whiteSpace: "nowrap" },
@@ -671,16 +721,16 @@ var ExternalInput = ({
                             onChange(mapProp(data[i]));
                             setOpen(false);
                           },
-                          children: keys.map((key) => /* @__PURE__ */ jsx9("td", { className: getClassNameModal("td"), children: item[key] }, key))
+                          children: keys.map((key) => /* @__PURE__ */ jsx10("td", { className: getClassNameModal("td"), children: item[key] }, key))
                         },
                         i
                       );
                     }) })
                   ] }),
-                  /* @__PURE__ */ jsx9("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ jsx9(Loader, { size: 24 }) })
+                  /* @__PURE__ */ jsx10("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ jsx10(Loader, { size: 24 }) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx9("div", { className: getClassNameModal("footerContainer"), children: /* @__PURE__ */ jsx9(Footer, { items: mappedData }) })
+              /* @__PURE__ */ jsx10("div", { className: getClassNameModal("footerContainer"), children: /* @__PURE__ */ jsx10(Footer, { items: mappedData }) })
             ]
           }
         ) })
@@ -690,7 +740,7 @@ var ExternalInput = ({
 };
 
 // components/AutoField/fields/ExternalField/index.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var ExternalField = ({
   field,
   onChange,
@@ -704,7 +754,7 @@ var ExternalField = ({
   const value = useDeepField(name);
   const validField = field;
   const deprecatedField = field;
-  useEffect4(() => {
+  useEffect5(() => {
     if (deprecatedField.adaptor) {
       console.error(
         "Warning: The `adaptor` API is deprecated. Please use updated APIs on the `external` field instead. This will be a breaking change in a future release."
@@ -714,13 +764,13 @@ var ExternalField = ({
   if (field.type !== "external") {
     return null;
   }
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     Label,
     {
       label: label || name,
-      icon: labelIcon || /* @__PURE__ */ jsx10(Link, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ jsx11(Link, { size: 16 }),
       el: "div",
-      children: /* @__PURE__ */ jsx10(
+      children: /* @__PURE__ */ jsx11(
         ExternalInput,
         {
           name,
@@ -745,7 +795,7 @@ var ExternalField = ({
 };
 
 // components/AutoField/lib/use-local-value.ts
-import { useCallback as useCallback2, useEffect as useEffect5, useState as useState6 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect6, useState as useState6 } from "react";
 
 // components/AutoField/lib/use-is-focused.ts
 var useIsFocused = (path) => {
@@ -757,14 +807,14 @@ var useLocalValue = (path, onChange) => {
   const value = useDeepField(path);
   const isFocused = useIsFocused(path);
   const [localValue, setLocalValue] = useState6(value?.toString());
-  const onChangeLocal = useCallback2(
+  const onChangeLocal = useCallback3(
     (val) => {
       setLocalValue(val);
       onChange(val);
     },
     [onChange]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     if (!isFocused) {
       setLocalValue(value);
     }
@@ -773,8 +823,8 @@ var useLocalValue = (path, onChange) => {
 };
 
 // components/AutoField/fields/DefaultField/index.tsx
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
-var getClassName8 = get_class_name_factory_default("Input", styles_module_default);
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+var getClassName9 = get_class_name_factory_default("Input", styles_module_default);
 var DefaultField = ({
   field,
   onChange,
@@ -786,19 +836,19 @@ var DefaultField = ({
   Label
 }) => {
   const [localValue, onChangeLocal] = useLocalValue(name, onChange);
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     Label,
     {
       label: label || name,
       icon: labelIcon || /* @__PURE__ */ jsxs5(Fragment3, { children: [
-        field.type === "text" && /* @__PURE__ */ jsx11(Type, { size: 16 }),
-        field.type === "number" && /* @__PURE__ */ jsx11(Hash, { size: 16 })
+        field.type === "text" && /* @__PURE__ */ jsx12(Type, { size: 16 }),
+        field.type === "number" && /* @__PURE__ */ jsx12(Hash, { size: 16 })
       ] }),
       readOnly,
-      children: /* @__PURE__ */ jsx11(
+      children: /* @__PURE__ */ jsx12(
         "input",
         {
-          className: getClassName8("input"),
+          className: getClassName9("input"),
           autoComplete: "off",
           type: field.type,
           title: label || name,
@@ -832,8 +882,8 @@ var DefaultField = ({
 };
 
 // components/AutoField/fields/TextareaField/index.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
-var getClassName9 = get_class_name_factory_default("Input", styles_module_default);
+import { jsx as jsx13 } from "react/jsx-runtime";
+var getClassName10 = get_class_name_factory_default("Input", styles_module_default);
 var TextareaField = ({
   field,
   onChange,
@@ -845,17 +895,17 @@ var TextareaField = ({
   Label
 }) => {
   const [localValue, onChangeLocal] = useLocalValue(name, onChange);
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     Label,
     {
       label: label || name,
-      icon: labelIcon || /* @__PURE__ */ jsx12(Type, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ jsx13(Type, { size: 16 }),
       readOnly,
-      children: /* @__PURE__ */ jsx12(
+      children: /* @__PURE__ */ jsx13(
         "textarea",
         {
           id,
-          className: getClassName9("input"),
+          className: getClassName10("input"),
           autoComplete: "off",
           name,
           value: typeof localValue === "undefined" ? "" : localValue,
@@ -875,14 +925,14 @@ import { lazy, Suspense } from "react";
 
 // components/RichTextEditor/components/EditorFallback.tsx
 import { memo } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var EditorFallback = memo((props) => {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     EditorInner,
     {
       ...props,
       editor: null,
-      menu: /* @__PURE__ */ jsx13(
+      menu: /* @__PURE__ */ jsx14(
         LoadedRichTextMenuInner,
         {
           field: props.field,
@@ -891,7 +941,7 @@ var EditorFallback = memo((props) => {
           readOnly: props.readOnly ?? false
         }
       ),
-      children: /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsx14(
         "div",
         {
           className: "rich-text",
@@ -905,9 +955,9 @@ var EditorFallback = memo((props) => {
 EditorFallback.displayName = "EditorFallback";
 
 // components/AutoField/fields/RichtextField/index.tsx
-import { Fragment as Fragment4, jsx as jsx14 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx15 } from "react/jsx-runtime";
 var Editor = lazy(
-  () => import("./Editor-HOZVZZIZ.mjs").then((m) => ({
+  () => import("./Editor-3EPLDK4J.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -930,23 +980,23 @@ var RichtextField = ({
     id,
     name
   };
-  return /* @__PURE__ */ jsx14(Fragment4, { children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(Fragment4, { children: /* @__PURE__ */ jsx15(
     Label,
     {
       label: label || name,
-      icon: labelIcon || /* @__PURE__ */ jsx14(Type, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ jsx15(Type, { size: 16 }),
       readOnly,
       el: "div",
-      children: /* @__PURE__ */ jsx14(Suspense, { fallback: /* @__PURE__ */ jsx14(EditorFallback, { ...editorProps }), children: /* @__PURE__ */ jsx14(Editor, { ...editorProps }) })
+      children: /* @__PURE__ */ jsx15(Suspense, { fallback: /* @__PURE__ */ jsx15(EditorFallback, { ...editorProps }), children: /* @__PURE__ */ jsx15(Editor, { ...editorProps }) })
     }
   ) });
 };
 
 // components/AutoField/AutoFieldInternal.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
-var ArrayField = lazy2(() => import("./ArrayField-F7OLZF6U.mjs").then((m) => ({ default: m.ArrayField })));
-var ObjectField = lazy2(() => import("./ObjectField-4SN4ZYFF.mjs").then((m) => ({ default: m.ObjectField })));
-var getClassNameWrapper = get_class_name_factory_default("InputWrapper", styles_module_default);
+import { jsx as jsx16 } from "react/jsx-runtime";
+var ArrayField = lazy2(() => import("./ArrayField-2QLVE7PT.mjs").then((m) => ({ default: m.ArrayField })));
+var ObjectField = lazy2(() => import("./ObjectField-XXOU2VP4.mjs").then((m) => ({ default: m.ObjectField })));
+var getClassNameWrapper2 = get_class_name_factory_default("InputWrapper", styles_module_default);
 var defaultFields = {
   array: ArrayField,
   external: ExternalField,
@@ -962,14 +1012,14 @@ function AutoFieldInternal(props) {
   const dispatch = useAppStore((s) => s.dispatch);
   const overrides = useAppStore((s) => s.overrides);
   const readOnly = useAppStore(useShallow3((s) => s.selectedItem?.readOnly));
-  const nestedFieldContext = useContext4(NestedFieldContext);
+  const nestedFieldContext = useContext5(NestedFieldContext);
   const { id, Label = FieldLabelInternal } = props;
   const field = props.field;
   const label = field.label;
   const labelIcon = field.labelIcon;
   const defaultId = useSafeId();
   const resolvedId = id || defaultId;
-  const render = useMemo4(
+  const render = useMemo5(
     () => ({
       ...overrides.fieldTypes,
       custom: overrides.fieldTypes?.custom,
@@ -990,7 +1040,7 @@ function AutoFieldInternal(props) {
       return getDeep(s, props.name ?? resolvedId);
     }
   });
-  const mergedProps = useMemo4(
+  const mergedProps = useMemo5(
     () => ({
       ...props,
       field,
@@ -1002,7 +1052,7 @@ function AutoFieldInternal(props) {
     }),
     [props, field, label, labelIcon, Label, resolvedId, fieldValue]
   );
-  const onFocus = useCallback3(
+  const onFocus = useCallback4(
     (e) => {
       if (mergedProps.name && (e.target.nodeName === "INPUT" || e.target.nodeName === "TEXTAREA")) {
         e.stopPropagation();
@@ -1016,7 +1066,7 @@ function AutoFieldInternal(props) {
     },
     [dispatch, mergedProps.name]
   );
-  const onBlur = useCallback3((e) => {
+  const onBlur = useCallback4((e) => {
     if ("name" in e.target) {
       dispatch({
         type: "setUi",
@@ -1026,7 +1076,7 @@ function AutoFieldInternal(props) {
       });
     }
   }, [dispatch]);
-  let Children = useMemo4(() => {
+  let Children = useMemo5(() => {
     if (field.type !== "custom" && field.type !== "slot") {
       return defaultFields[field.type];
     }
@@ -1034,7 +1084,7 @@ function AutoFieldInternal(props) {
   }, [field.type]);
   const fieldKey = field.type === "custom" ? field.key : void 0;
   const fieldRender = field.render;
-  let FieldComponent = useMemo4(() => {
+  let FieldComponent = useMemo5(() => {
     if (field.type === "custom" && !render[field.type]) {
       if (!fieldRender) {
         return null;
@@ -1054,78 +1104,81 @@ function AutoFieldInternal(props) {
   if (!FieldComponent) {
     throw new Error(`Field type for ${field.type} did not exist.`);
   }
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     NestedFieldContext.Provider,
     {
       value: {
         readOnlyFields: nestedFieldContext.readOnlyFields || readOnly || {},
         localName: nestedFieldContext.localName ?? mergedProps.name
       },
-      children: /* @__PURE__ */ jsx15(
+      children: /* @__PURE__ */ jsx16(
         "div",
         {
-          className: getClassNameWrapper(),
+          className: getClassNameWrapper2(),
           onFocus,
           onBlur,
           onClick: (e) => {
             e.stopPropagation();
           },
-          children: /* @__PURE__ */ jsx15(Suspense2, { fallback: null, children: /* @__PURE__ */ jsx15(FieldComponent, { ...mergedProps, children: /* @__PURE__ */ jsx15(Children, { ...mergedProps }) }) })
+          children: /* @__PURE__ */ jsx16(Suspense2, { fallback: null, children: /* @__PURE__ */ jsx16(FieldComponent, { ...mergedProps, children: /* @__PURE__ */ jsx16(Children, { ...mergedProps }) }) })
         }
       )
     }
   );
 }
-function AutoFieldPrivate2(props) {
-  return /* @__PURE__ */ jsx15(AutoFieldInternal, { ...props });
+function AutoFieldPrivate(props) {
+  return /* @__PURE__ */ jsx16(AutoFieldInternal, { ...props });
 }
 
-// components/AutoField/index.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
-var getClassName10 = get_class_name_factory_default("Input", styles_module_default);
-var getClassNameWrapper2 = get_class_name_factory_default("InputWrapper", styles_module_default);
-function AutoFieldPublicInternal({ value, ...props }) {
-  const DefaultLabel = useMemo5(() => {
-    const DefaultLabel2 = (labelProps) => /* @__PURE__ */ jsx16(
-      "div",
-      {
-        ...labelProps,
-        className: getClassName10({ readOnly: props.readOnly })
-      }
-    );
-    return DefaultLabel2;
-  }, [props.readOnly]);
-  const fieldStore = useFieldStoreApi();
-  const { id: propsId, onChange: propsOnChange } = props;
-  const onChange = useCallback4(
-    (value2) => {
-      if (!propsId) return;
-      fieldStore.setState({ [propsId]: value2 });
-      propsOnChange(value2);
-    },
-    [fieldStore, propsOnChange, propsId]
-  );
-  useEffect6(() => {
-    if (!props.id) return;
-    fieldStore.setState({ [props.id]: value });
-  }, [props.id, value, fieldStore]);
-  return /* @__PURE__ */ jsx16(
-    AutoFieldInternal,
+// components/AutoField/subfield.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var SubFieldInternal = ({
+  field,
+  id,
+  index,
+  name,
+  subName,
+  localName,
+  onChange,
+  forceReadOnly
+}) => {
+  const indexName = typeof index !== "undefined" ? `${name}[${index}]` : name;
+  const subPath = name ? `${indexName}.${subName}` : subName;
+  const localIndexName = typeof index !== "undefined" ? `${localName}[${index}]` : localName ?? subName;
+  const localWildcardName = typeof index !== "undefined" ? `${localName}[*]` : localName;
+  const localSubPath = `${localIndexName}.${subName}`;
+  const localWildcardSubPath = `${localWildcardName}.${subName}`;
+  const { readOnlyFields } = useNestedFieldContext();
+  const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subPath] !== "undefined" ? readOnlyFields[localSubPath] : readOnlyFields[localWildcardSubPath];
+  const label = field.label || subName;
+  return /* @__PURE__ */ jsx17(
+    NestedFieldProvider,
     {
-      ...props,
-      onChange,
-      Label: DefaultLabel
+      name: localIndexName,
+      wildcardName: localWildcardName,
+      subName,
+      readOnlyFields,
+      children: /* @__PURE__ */ jsx17(
+        AutoFieldPrivate,
+        {
+          name: subPath,
+          label,
+          id,
+          readOnly: subReadOnly,
+          field: {
+            ...field,
+            label
+            // May be used by custom fields
+          },
+          onChange: (val, ui) => {
+            onChange(val, ui, subName);
+          }
+        }
+      )
     }
   );
-}
-function AutoField(props) {
-  const id = useSafeId();
-  if (props.field.type === "slot") {
-    return null;
-  }
-  const providerValue = useMemo5(() => ({ [id]: props.value }), [id, props.value]);
-  return /* @__PURE__ */ jsx16(fieldContextStore.Provider, { value: providerValue, children: /* @__PURE__ */ jsx16(AutoFieldPublicInternal, { ...props, id }) });
-}
+};
+var SubField = memo2(SubFieldInternal);
 
 export {
   useSafeId,
@@ -1136,10 +1189,10 @@ export {
   FieldLabel,
   getDeep,
   useNestedFieldContext,
-  NestedFieldProvider,
   Heading,
   Button,
   EditorFallback,
-  AutoFieldPrivate2 as AutoFieldPrivate,
+  SubField,
+  AutoFieldPrivate,
   AutoField
 };