hs-uix 1.6.5 → 1.7.0

package/dist/form.js

@@ -38,6 +38,9 @@ module.exports = __toCommonJS(form_exports);
 var import_react = __toESM(require("react"));
 var import_ui_extensions = require("@hubspot/ui-extensions");
 var import_crm = require("@hubspot/ui-extensions/crm");
+
+// packages/form/src/formValues.js
+var isPlainObject = (value) => Object.prototype.toString.call(value) === "[object Object]";
 var getEmptyValue = (field) => {
   switch (field.type) {
     case "toggle":
@@ -73,12 +76,6 @@ var isValueEmpty = (value, field) => {
   if ((field.type === "toggle" || field.type === "checkbox") && value === false) return true;
   return false;
 };
-var isPromise = (value) => value && typeof value.then === "function";
-var isAsyncFunction = (fn) => fn && fn.constructor && fn.constructor.name === "AsyncFunction";
-var normalizeValidatorResult = (result) => {
-  if (result === true || result === void 0 || result === null || result === false) return null;
-  return String(result);
-};
 var isDateValueObject = (value) => isPlainObject(value) && Number.isInteger(value.year) && Number.isInteger(value.month) && Number.isInteger(value.date);
 var isTimeValueObject = (value) => isPlainObject(value) && Number.isInteger(value.hours) && Number.isInteger(value.minutes);
 var compareDateValues = (a, b) => {
@@ -90,6 +87,64 @@ var compareTimeValues = (a, b) => {
   if (a.hours !== b.hours) return a.hours - b.hours;
   return a.minutes - b.minutes;
 };
+var deepEqual = (a, b) => {
+  if (Object.is(a, b)) return true;
+  if (typeof a !== typeof b) return false;
+  if (a == null || b == null) return false;
+  if (Array.isArray(a)) {
+    if (!Array.isArray(b) || a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      if (!deepEqual(a[i], b[i])) return false;
+    }
+    return true;
+  }
+  if (a instanceof Date && b instanceof Date) {
+    return a.getTime() === b.getTime();
+  }
+  if (isPlainObject(a) && isPlainObject(b)) {
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length) return false;
+    for (const key of aKeys) {
+      if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
+      if (!deepEqual(a[key], b[key])) return false;
+    }
+    return true;
+  }
+  return false;
+};
+var deepClone = (value) => {
+  if (Array.isArray(value)) return value.map(deepClone);
+  if (value instanceof Date) return new Date(value.getTime());
+  if (isPlainObject(value)) {
+    const next = {};
+    for (const key of Object.keys(value)) {
+      next[key] = deepClone(value[key]);
+    }
+    return next;
+  }
+  return value;
+};
+
+// packages/form/src/formValidation.js
+var isPromise = (value) => value && typeof value.then === "function";
+var isAsyncFunction = (fn) => fn && fn.constructor && fn.constructor.name === "AsyncFunction";
+var normalizeValidatorResult = (result) => {
+  if (result === true || result === void 0 || result === null || result === false) return null;
+  return String(result);
+};
+var resolveRequired = (field, allValues) => {
+  if (typeof field.required === "function") return field.required(allValues);
+  return !!field.required;
+};
+var resolveDisabled = (field, allValues) => {
+  if (typeof field.disabled === "function") return field.disabled(allValues);
+  return !!field.disabled;
+};
+var resolveOptions = (field, allValues) => {
+  if (typeof field.options === "function") return field.options(allValues);
+  return field.options || [];
+};
 var runDefaultFieldValidator = (value, field, allValues) => {
   const errorPrefix = field.label || field.name;
   switch (field.type) {
@@ -259,50 +314,53 @@ var runValidators = (value, field, allValues, fieldTypes, options = {}) => {
   }
   return null;
 };
-var resolveRequired = (field, allValues) => {
-  if (typeof field.required === "function") return field.required(allValues);
-  return !!field.required;
-};
-var resolveDisabled = (field, allValues) => {
-  if (typeof field.disabled === "function") return field.disabled(allValues);
-  return !!field.disabled;
-};
-var resolveOptions = (field, allValues) => {
-  if (typeof field.options === "function") return field.options(allValues);
-  return field.options || [];
-};
+
+// packages/form/src/formDependencies.js
 var getDependsOnName = (field) => field.dependsOnConfig && field.dependsOnConfig.field;
 var getDependsOnDisplay = (field) => field.dependsOnConfig && field.dependsOnConfig.display || "grouped";
 var getDependsOnLabel = (field) => field.dependsOnConfig && field.dependsOnConfig.label;
 var getDependsOnMessage = (field) => field.dependsOnConfig && field.dependsOnConfig.message;
-var getRepeaterErrorKey = (fieldName, rowIdx, subFieldName) => `${fieldName}[${rowIdx}].${subFieldName}`;
-var isPlainObject = (value) => Object.prototype.toString.call(value) === "[object Object]";
-var deepEqual = (a, b) => {
-  if (Object.is(a, b)) return true;
-  if (typeof a !== typeof b) return false;
-  if (a == null || b == null) return false;
-  if (Array.isArray(a)) {
-    if (!Array.isArray(b) || a.length !== b.length) return false;
-    for (let i = 0; i < a.length; i++) {
-      if (!deepEqual(a[i], b[i])) return false;
-    }
-    return true;
-  }
-  if (a instanceof Date && b instanceof Date) {
-    return a.getTime() === b.getTime();
-  }
-  if (isPlainObject(a) && isPlainObject(b)) {
-    const aKeys = Object.keys(a);
-    const bKeys = Object.keys(b);
-    if (aKeys.length !== bKeys.length) return false;
-    for (const key of aKeys) {
-      if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
-      if (!deepEqual(a[key], b[key])) return false;
-    }
-    return true;
+var resolveDependentCascade = ({ name, value, fields, values, getEmptyValueForField }) => {
+  const newValues = { ...values, [name]: value };
+  const queue = [name];
+  const visited = /* @__PURE__ */ new Set();
+  const changedDependents = [];
+  while (queue.length > 0) {
+    const current = queue.shift();
+    if (!current || visited.has(current)) continue;
+    visited.add(current);
+    fields.forEach((dep) => {
+      const parentName = getDependsOnName(dep);
+      if (parentName !== current || dep.name === current) return;
+      if (!dep.options) return;
+      const depOptions = resolveOptions(dep, newValues);
+      const depValue = newValues[dep.name];
+      if (depValue == null || depValue === "") return;
+      const validValues = new Set(depOptions.map((o) => o.value));
+      let nextDepValue = depValue;
+      let changed = false;
+      if (Array.isArray(depValue)) {
+        const filtered = depValue.filter((v) => validValues.has(v));
+        if (filtered.length !== depValue.length) {
+          nextDepValue = filtered;
+          changed = true;
+        }
+      } else if (!validValues.has(depValue)) {
+        nextDepValue = getEmptyValueForField(dep);
+        changed = true;
+      }
+      if (changed) {
+        newValues[dep.name] = nextDepValue;
+        queue.push(dep.name);
+        changedDependents.push(dep.name);
+      }
+    });
   }
-  return false;
+  return { newValues, changedDependents };
 };
+
+// packages/form/src/FormBuilder.jsx
+var getRepeaterErrorKey = (fieldName, rowIdx, subFieldName) => `${fieldName}[${rowIdx}].${subFieldName}`;
 var fieldSetHasErrors = (errors, fields) => {
   if (!errors || !fields || fields.length === 0) return false;
   const names = new Set(fields.map((field) => field.name));
@@ -311,18 +369,6 @@ var fieldSetHasErrors = (errors, fields) => {
     return names.has(base);
   });
 };
-var deepClone = (value) => {
-  if (Array.isArray(value)) return value.map(deepClone);
-  if (value instanceof Date) return new Date(value.getTime());
-  if (isPlainObject(value)) {
-    const next = {};
-    for (const key of Object.keys(value)) {
-      next[key] = deepClone(value[key]);
-    }
-    return next;
-  }
-  return value;
-};
 var useFormPrefill = (properties, mapping) => {
   return (0, import_react.useMemo)(() => {
     if (!properties) return {};
@@ -1189,42 +1235,18 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
   const handleFieldChange = (0, import_react.useCallback)(
     (name, value, options = {}) => {
       const { clearNestedErrors = true } = options;
-      const newValues = { ...formValuesRef.current, [name]: value };
-      const queue = [name];
-      const visited = /* @__PURE__ */ new Set();
+      const { newValues, changedDependents } = resolveDependentCascade({
+        name,
+        value,
+        fields,
+        values: formValuesRef.current,
+        getEmptyValueForField: getFieldEmptyValue
+      });
       const clearedErrors = {};
-      while (queue.length > 0) {
-        const current = queue.shift();
-        if (!current || visited.has(current)) continue;
-        visited.add(current);
-        fields.forEach((dep) => {
-          const parentName = getDependsOnName(dep);
-          if (parentName !== current || dep.name === current) return;
-          if (!dep.options) return;
-          const depOptions = resolveOptions(dep, newValues);
-          const depValue = newValues[dep.name];
-          if (depValue == null || depValue === "") return;
-          const validValues = new Set(depOptions.map((o) => o.value));
-          let nextDepValue = depValue;
-          let changed = false;
-          if (Array.isArray(depValue)) {
-            const filtered = depValue.filter((v) => validValues.has(v));
-            if (filtered.length !== depValue.length) {
-              nextDepValue = filtered;
-              changed = true;
-            }
-          } else if (!validValues.has(depValue)) {
-            nextDepValue = getFieldEmptyValue(dep);
-            changed = true;
-          }
-          if (changed) {
-            newValues[dep.name] = nextDepValue;
-            queue.push(dep.name);
-            if (formErrorsRef.current[dep.name] != null) {
-              clearedErrors[dep.name] = null;
-            }
-          }
-        });
+      for (const depName of changedDependents) {
+        if (formErrorsRef.current[depName] != null) {
+          clearedErrors[depName] = null;
+        }
       }
       if (formErrorsRef.current[name] != null) {
         clearedErrors[name] = null;
@@ -2042,7 +2064,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
               );
           }
           return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { key: sf.name, flex: 1 }, sfElement);
-        }), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Inline, { gap: "xs" }, canReorder && rowIdx > 0 && (renderMoveUpControl ? renderMoveUpControl({ index: rowIdx, onClick: () => moveRow(rowIdx, rowIdx - 1) }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "secondary", size: "sm", onClick: () => moveRow(rowIdx, rowIdx - 1) }, moveUpLabel)), canReorder && rowIdx < rows.length - 1 && (renderMoveDownControl ? renderMoveDownControl({ index: rowIdx, onClick: () => moveRow(rowIdx, rowIdx + 1) }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "secondary", size: "sm", onClick: () => moveRow(rowIdx, rowIdx + 1) }, moveDownLabel)), canRemove && (renderRemoveControl ? renderRemoveControl({ index: rowIdx, onClick: () => removeRow(rowIdx) }) : /* @__PURE__ */ import_react.default.createElement(
+        }), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Inline, { gap: "xs" }, canReorder && (renderMoveUpControl ? renderMoveUpControl({ index: rowIdx, disabled: rowIdx === 0, onClick: () => moveRow(rowIdx, rowIdx - 1) }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "secondary", size: "sm", disabled: rowIdx === 0, onClick: () => moveRow(rowIdx, rowIdx - 1) }, moveUpLabel)), canReorder && (renderMoveDownControl ? renderMoveDownControl({ index: rowIdx, disabled: rowIdx === rows.length - 1, onClick: () => moveRow(rowIdx, rowIdx + 1) }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "secondary", size: "sm", disabled: rowIdx === rows.length - 1, onClick: () => moveRow(rowIdx, rowIdx + 1) }, moveDownLabel)), canRemove && (renderRemoveControl ? renderRemoveControl({ index: rowIdx, onClick: () => removeRow(rowIdx) }) : /* @__PURE__ */ import_react.default.createElement(
           import_ui_extensions.Button,
           {
             variant: "secondary",
@@ -2050,7 +2072,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
             onClick: () => removeRow(rowIdx)
           },
           removeLabel
-        ))))), canAdd && (renderAddControl ? renderAddControl({ onClick: addRow, count: rows.length }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Link, { onClick: addRow }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "flush" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Icon, { name: "add" }), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { format: { fontWeight: "demibold" } }, addLabel)))), repeaterHasError && repeaterErrorMessage && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy" }, repeaterErrorMessage));
+        ))))), canAdd && (renderAddControl ? renderAddControl({ onClick: addRow, count: rows.length }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Link, { onClick: addRow }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Icon, { name: "add" }), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { format: { fontWeight: "demibold" } }, addLabel)))), repeaterHasError && repeaterErrorMessage && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy" }, repeaterErrorMessage));
       }
       default:
         return /* @__PURE__ */ import_react.default.createElement(

package/dist/form.mjs

@@ -42,6 +42,9 @@ import {
   CrmPropertyList,
   CrmAssociationPropertyList
 } from "@hubspot/ui-extensions/crm";
+
+// packages/form/src/formValues.js
+var isPlainObject = (value) => Object.prototype.toString.call(value) === "[object Object]";
 var getEmptyValue = (field) => {
   switch (field.type) {
     case "toggle":
@@ -77,12 +80,6 @@ var isValueEmpty = (value, field) => {
   if ((field.type === "toggle" || field.type === "checkbox") && value === false) return true;
   return false;
 };
-var isPromise = (value) => value && typeof value.then === "function";
-var isAsyncFunction = (fn) => fn && fn.constructor && fn.constructor.name === "AsyncFunction";
-var normalizeValidatorResult = (result) => {
-  if (result === true || result === void 0 || result === null || result === false) return null;
-  return String(result);
-};
 var isDateValueObject = (value) => isPlainObject(value) && Number.isInteger(value.year) && Number.isInteger(value.month) && Number.isInteger(value.date);
 var isTimeValueObject = (value) => isPlainObject(value) && Number.isInteger(value.hours) && Number.isInteger(value.minutes);
 var compareDateValues = (a, b) => {
@@ -94,6 +91,64 @@ var compareTimeValues = (a, b) => {
   if (a.hours !== b.hours) return a.hours - b.hours;
   return a.minutes - b.minutes;
 };
+var deepEqual = (a, b) => {
+  if (Object.is(a, b)) return true;
+  if (typeof a !== typeof b) return false;
+  if (a == null || b == null) return false;
+  if (Array.isArray(a)) {
+    if (!Array.isArray(b) || a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      if (!deepEqual(a[i], b[i])) return false;
+    }
+    return true;
+  }
+  if (a instanceof Date && b instanceof Date) {
+    return a.getTime() === b.getTime();
+  }
+  if (isPlainObject(a) && isPlainObject(b)) {
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length) return false;
+    for (const key of aKeys) {
+      if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
+      if (!deepEqual(a[key], b[key])) return false;
+    }
+    return true;
+  }
+  return false;
+};
+var deepClone = (value) => {
+  if (Array.isArray(value)) return value.map(deepClone);
+  if (value instanceof Date) return new Date(value.getTime());
+  if (isPlainObject(value)) {
+    const next = {};
+    for (const key of Object.keys(value)) {
+      next[key] = deepClone(value[key]);
+    }
+    return next;
+  }
+  return value;
+};
+
+// packages/form/src/formValidation.js
+var isPromise = (value) => value && typeof value.then === "function";
+var isAsyncFunction = (fn) => fn && fn.constructor && fn.constructor.name === "AsyncFunction";
+var normalizeValidatorResult = (result) => {
+  if (result === true || result === void 0 || result === null || result === false) return null;
+  return String(result);
+};
+var resolveRequired = (field, allValues) => {
+  if (typeof field.required === "function") return field.required(allValues);
+  return !!field.required;
+};
+var resolveDisabled = (field, allValues) => {
+  if (typeof field.disabled === "function") return field.disabled(allValues);
+  return !!field.disabled;
+};
+var resolveOptions = (field, allValues) => {
+  if (typeof field.options === "function") return field.options(allValues);
+  return field.options || [];
+};
 var runDefaultFieldValidator = (value, field, allValues) => {
   const errorPrefix = field.label || field.name;
   switch (field.type) {
@@ -263,50 +318,53 @@ var runValidators = (value, field, allValues, fieldTypes, options = {}) => {
   }
   return null;
 };
-var resolveRequired = (field, allValues) => {
-  if (typeof field.required === "function") return field.required(allValues);
-  return !!field.required;
-};
-var resolveDisabled = (field, allValues) => {
-  if (typeof field.disabled === "function") return field.disabled(allValues);
-  return !!field.disabled;
-};
-var resolveOptions = (field, allValues) => {
-  if (typeof field.options === "function") return field.options(allValues);
-  return field.options || [];
-};
+
+// packages/form/src/formDependencies.js
 var getDependsOnName = (field) => field.dependsOnConfig && field.dependsOnConfig.field;
 var getDependsOnDisplay = (field) => field.dependsOnConfig && field.dependsOnConfig.display || "grouped";
 var getDependsOnLabel = (field) => field.dependsOnConfig && field.dependsOnConfig.label;
 var getDependsOnMessage = (field) => field.dependsOnConfig && field.dependsOnConfig.message;
-var getRepeaterErrorKey = (fieldName, rowIdx, subFieldName) => `${fieldName}[${rowIdx}].${subFieldName}`;
-var isPlainObject = (value) => Object.prototype.toString.call(value) === "[object Object]";
-var deepEqual = (a, b) => {
-  if (Object.is(a, b)) return true;
-  if (typeof a !== typeof b) return false;
-  if (a == null || b == null) return false;
-  if (Array.isArray(a)) {
-    if (!Array.isArray(b) || a.length !== b.length) return false;
-    for (let i = 0; i < a.length; i++) {
-      if (!deepEqual(a[i], b[i])) return false;
-    }
-    return true;
-  }
-  if (a instanceof Date && b instanceof Date) {
-    return a.getTime() === b.getTime();
-  }
-  if (isPlainObject(a) && isPlainObject(b)) {
-    const aKeys = Object.keys(a);
-    const bKeys = Object.keys(b);
-    if (aKeys.length !== bKeys.length) return false;
-    for (const key of aKeys) {
-      if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
-      if (!deepEqual(a[key], b[key])) return false;
-    }
-    return true;
+var resolveDependentCascade = ({ name, value, fields, values, getEmptyValueForField }) => {
+  const newValues = { ...values, [name]: value };
+  const queue = [name];
+  const visited = /* @__PURE__ */ new Set();
+  const changedDependents = [];
+  while (queue.length > 0) {
+    const current = queue.shift();
+    if (!current || visited.has(current)) continue;
+    visited.add(current);
+    fields.forEach((dep) => {
+      const parentName = getDependsOnName(dep);
+      if (parentName !== current || dep.name === current) return;
+      if (!dep.options) return;
+      const depOptions = resolveOptions(dep, newValues);
+      const depValue = newValues[dep.name];
+      if (depValue == null || depValue === "") return;
+      const validValues = new Set(depOptions.map((o) => o.value));
+      let nextDepValue = depValue;
+      let changed = false;
+      if (Array.isArray(depValue)) {
+        const filtered = depValue.filter((v) => validValues.has(v));
+        if (filtered.length !== depValue.length) {
+          nextDepValue = filtered;
+          changed = true;
+        }
+      } else if (!validValues.has(depValue)) {
+        nextDepValue = getEmptyValueForField(dep);
+        changed = true;
+      }
+      if (changed) {
+        newValues[dep.name] = nextDepValue;
+        queue.push(dep.name);
+        changedDependents.push(dep.name);
+      }
+    });
   }
-  return false;
+  return { newValues, changedDependents };
 };
+
+// packages/form/src/FormBuilder.jsx
+var getRepeaterErrorKey = (fieldName, rowIdx, subFieldName) => `${fieldName}[${rowIdx}].${subFieldName}`;
 var fieldSetHasErrors = (errors, fields) => {
   if (!errors || !fields || fields.length === 0) return false;
   const names = new Set(fields.map((field) => field.name));
@@ -315,18 +373,6 @@ var fieldSetHasErrors = (errors, fields) => {
     return names.has(base);
   });
 };
-var deepClone = (value) => {
-  if (Array.isArray(value)) return value.map(deepClone);
-  if (value instanceof Date) return new Date(value.getTime());
-  if (isPlainObject(value)) {
-    const next = {};
-    for (const key of Object.keys(value)) {
-      next[key] = deepClone(value[key]);
-    }
-    return next;
-  }
-  return value;
-};
 var useFormPrefill = (properties, mapping) => {
   return useMemo(() => {
     if (!properties) return {};
@@ -1193,42 +1239,18 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
   const handleFieldChange = useCallback(
     (name, value, options = {}) => {
       const { clearNestedErrors = true } = options;
-      const newValues = { ...formValuesRef.current, [name]: value };
-      const queue = [name];
-      const visited = /* @__PURE__ */ new Set();
+      const { newValues, changedDependents } = resolveDependentCascade({
+        name,
+        value,
+        fields,
+        values: formValuesRef.current,
+        getEmptyValueForField: getFieldEmptyValue
+      });
       const clearedErrors = {};
-      while (queue.length > 0) {
-        const current = queue.shift();
-        if (!current || visited.has(current)) continue;
-        visited.add(current);
-        fields.forEach((dep) => {
-          const parentName = getDependsOnName(dep);
-          if (parentName !== current || dep.name === current) return;
-          if (!dep.options) return;
-          const depOptions = resolveOptions(dep, newValues);
-          const depValue = newValues[dep.name];
-          if (depValue == null || depValue === "") return;
-          const validValues = new Set(depOptions.map((o) => o.value));
-          let nextDepValue = depValue;
-          let changed = false;
-          if (Array.isArray(depValue)) {
-            const filtered = depValue.filter((v) => validValues.has(v));
-            if (filtered.length !== depValue.length) {
-              nextDepValue = filtered;
-              changed = true;
-            }
-          } else if (!validValues.has(depValue)) {
-            nextDepValue = getFieldEmptyValue(dep);
-            changed = true;
-          }
-          if (changed) {
-            newValues[dep.name] = nextDepValue;
-            queue.push(dep.name);
-            if (formErrorsRef.current[dep.name] != null) {
-              clearedErrors[dep.name] = null;
-            }
-          }
-        });
+      for (const depName of changedDependents) {
+        if (formErrorsRef.current[depName] != null) {
+          clearedErrors[depName] = null;
+        }
       }
       if (formErrorsRef.current[name] != null) {
         clearedErrors[name] = null;
@@ -2046,7 +2068,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
               );
           }
           return /* @__PURE__ */ React.createElement(Box, { key: sf.name, flex: 1 }, sfElement);
-        }), /* @__PURE__ */ React.createElement(Inline, { gap: "xs" }, canReorder && rowIdx > 0 && (renderMoveUpControl ? renderMoveUpControl({ index: rowIdx, onClick: () => moveRow(rowIdx, rowIdx - 1) }) : /* @__PURE__ */ React.createElement(Button, { variant: "secondary", size: "sm", onClick: () => moveRow(rowIdx, rowIdx - 1) }, moveUpLabel)), canReorder && rowIdx < rows.length - 1 && (renderMoveDownControl ? renderMoveDownControl({ index: rowIdx, onClick: () => moveRow(rowIdx, rowIdx + 1) }) : /* @__PURE__ */ React.createElement(Button, { variant: "secondary", size: "sm", onClick: () => moveRow(rowIdx, rowIdx + 1) }, moveDownLabel)), canRemove && (renderRemoveControl ? renderRemoveControl({ index: rowIdx, onClick: () => removeRow(rowIdx) }) : /* @__PURE__ */ React.createElement(
+        }), /* @__PURE__ */ React.createElement(Inline, { gap: "xs" }, canReorder && (renderMoveUpControl ? renderMoveUpControl({ index: rowIdx, disabled: rowIdx === 0, onClick: () => moveRow(rowIdx, rowIdx - 1) }) : /* @__PURE__ */ React.createElement(Button, { variant: "secondary", size: "sm", disabled: rowIdx === 0, onClick: () => moveRow(rowIdx, rowIdx - 1) }, moveUpLabel)), canReorder && (renderMoveDownControl ? renderMoveDownControl({ index: rowIdx, disabled: rowIdx === rows.length - 1, onClick: () => moveRow(rowIdx, rowIdx + 1) }) : /* @__PURE__ */ React.createElement(Button, { variant: "secondary", size: "sm", disabled: rowIdx === rows.length - 1, onClick: () => moveRow(rowIdx, rowIdx + 1) }, moveDownLabel)), canRemove && (renderRemoveControl ? renderRemoveControl({ index: rowIdx, onClick: () => removeRow(rowIdx) }) : /* @__PURE__ */ React.createElement(
           Button,
           {
             variant: "secondary",
@@ -2054,7 +2076,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
             onClick: () => removeRow(rowIdx)
           },
           removeLabel
-        ))))), canAdd && (renderAddControl ? renderAddControl({ onClick: addRow, count: rows.length }) : /* @__PURE__ */ React.createElement(Link, { onClick: addRow }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "flush" }, /* @__PURE__ */ React.createElement(Icon, { name: "add" }), /* @__PURE__ */ React.createElement(Text, { format: { fontWeight: "demibold" } }, addLabel)))), repeaterHasError && repeaterErrorMessage && /* @__PURE__ */ React.createElement(Text, { variant: "microcopy" }, repeaterErrorMessage));
+        ))))), canAdd && (renderAddControl ? renderAddControl({ onClick: addRow, count: rows.length }) : /* @__PURE__ */ React.createElement(Link, { onClick: addRow }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ React.createElement(Icon, { name: "add" }), /* @__PURE__ */ React.createElement(Text, { format: { fontWeight: "demibold" } }, addLabel)))), repeaterHasError && repeaterErrorMessage && /* @__PURE__ */ React.createElement(Text, { variant: "microcopy" }, repeaterErrorMessage));
       }
       default:
         return /* @__PURE__ */ React.createElement(