bhl-forms 0.0.32 → 0.0.35

package/dist/bhl-forms.es.js

@@ -4804,8 +4804,8 @@ const invalidSetter$1 = (node, _context, property) => {
   reset: trap$1(resetValue$1),
   resetConfig: trap$1(resetConfig$1),
   setErrors: trap$1(setErrors$1$1),
-  submit: trap$1(submit$3),
-  t: trap$1(text$3),
+  submit: trap$1(submit$1),
+  t: trap$1(text$2),
   use: trap$1(use$1),
   name: trap$1(getName$1, false, false),
   walk: trap$1(walkTree$1)
@@ -5151,12 +5151,12 @@ function getNode$2(node, _context, locator) {
         pointer = node;
         break;
       default:
-        pointer = pointer.children.find((c2) => String(c2.name) === String(name)) || select$4(pointer, name);
+        pointer = pointer.children.find((c2) => String(c2.name) === String(name)) || select$3(pointer, name);
     }
   }
   return pointer || void 0;
 }
-function select$4(node, selector) {
+function select$3(node, selector) {
   const matches3 = String(selector).match(/^(find)\((.*)\)$/);
   if (matches3) {
     const [, action, argStr] = matches3;
@@ -5174,11 +5174,11 @@ function find$1(node, _context, searchTerm, searcher) {
   return bfs$1(node, searchTerm, searcher);
 }
 function bfs$1(tree, searchValue, searchGoal = "name") {
-  const search2 = typeof searchGoal === "string" ? (n2) => n2[searchGoal] == searchValue : searchGoal;
+  const search = typeof searchGoal === "string" ? (n2) => n2[searchGoal] == searchValue : searchGoal;
   const stack = [tree];
   while (stack.length) {
     const node = stack.shift();
-    if (search2(node, searchValue))
+    if (search(node, searchValue))
       return node;
     stack.push(...node.children);
   }
@@ -5243,13 +5243,13 @@ function createConfig$2(target = {}, parent) {
     }
   });
 }
-function text$3(node, _context, key, type = "ui") {
+function text$2(node, _context, key, type = "ui") {
   const fragment2 = typeof key === "string" ? { key, value: key, type } : key;
   const value = node.hook.text.dispatch(fragment2);
   node.emit("text", value, false);
   return value.value;
 }
-function submit$3(node) {
+function submit$1(node) {
   const name = node.name;
   do {
     if (node.props.isForm === true)
@@ -5267,15 +5267,16 @@ function resetValue$1(node, _context, value) {
 }
 function setErrors$1$1(node, _context, localErrors, childErrors) {
   const sourceKey = `${node.name}-set`;
-  createMessages$1(node, localErrors, childErrors).forEach((errors2) => {
-    node.store.apply(errors2, (message2) => message2.meta.source === sourceKey);
+  const errors2 = node.hook.setErrors.dispatch({ localErrors, childErrors });
+  createMessages$1(node, errors2.localErrors, errors2.childErrors).forEach((errors22) => {
+    node.store.apply(errors22, (message2) => message2.meta.source === sourceKey);
   });
   return node;
 }
-function clearErrors$1$1(node, context, clearChildErrors = true) {
+function clearErrors$1$1(node, context, clearChildErrors = true, sourceKey) {
   setErrors$1$1(node, context, []);
   if (clearChildErrors) {
-    const sourceKey = `${node.name}-set`;
+    sourceKey = sourceKey || `${node.name}-set`;
     node.walk((child) => {
       child.store.filter((message2) => {
         return !(message2.type === "error" && message2.meta && message2.meta.source === sourceKey);
@@ -6452,8 +6453,8 @@ const traps = {
   reset: trap(resetValue),
   resetConfig: trap(resetConfig),
   setErrors: trap(setErrors$1),
-  submit: trap(submit$2),
-  t: trap(text$2),
+  submit: trap(submit),
+  t: trap(text$1),
   use: trap(use),
   name: trap(getName, false, false),
   walk: trap(walkTree)
@@ -6821,12 +6822,12 @@ function getNode(node, _context, locator) {
         pointer = node;
         break;
       default:
-        pointer = pointer.children.find((c2) => String(c2.name) === String(name)) || select$3(pointer, name);
+        pointer = pointer.children.find((c2) => String(c2.name) === String(name)) || select$2(pointer, name);
     }
   }
   return pointer || void 0;
 }
-function select$3(node, selector) {
+function select$2(node, selector) {
   const matches3 = String(selector).match(/^(find)\((.*)\)$/);
   if (matches3) {
     const [, action, argStr] = matches3;
@@ -6844,11 +6845,11 @@ function find(node, _context, searchTerm, searcher) {
   return bfs(node, searchTerm, searcher);
 }
 function bfs(tree, searchValue, searchGoal = "name") {
-  const search2 = typeof searchGoal === "string" ? (n2) => n2[searchGoal] == searchValue : searchGoal;
+  const search = typeof searchGoal === "string" ? (n2) => n2[searchGoal] == searchValue : searchGoal;
   const stack = [tree];
   while (stack.length) {
     const node = stack.shift();
-    if (search2(node, searchValue))
+    if (search(node, searchValue))
       return node;
     stack.push(...node.children);
   }
@@ -6913,13 +6914,13 @@ function createConfig(target = {}, parent) {
     }
   });
 }
-function text$2(node, _context, key, type = "ui") {
+function text$1(node, _context, key, type = "ui") {
   const fragment2 = typeof key === "string" ? { key, value: key, type } : key;
   const value = node.hook.text.dispatch(fragment2);
   node.emit("text", value, false);
   return value.value;
 }
-function submit$2(node) {
+function submit(node) {
   const name = node.name;
   do {
     if (node.props.isForm === true)
@@ -6937,15 +6938,16 @@ function resetValue(node, _context, value) {
 }
 function setErrors$1(node, _context, localErrors, childErrors) {
   const sourceKey = `${node.name}-set`;
-  createMessages(node, localErrors, childErrors).forEach((errors2) => {
-    node.store.apply(errors2, (message2) => message2.meta.source === sourceKey);
+  const errors2 = node.hook.setErrors.dispatch({ localErrors, childErrors });
+  createMessages(node, errors2.localErrors, errors2.childErrors).forEach((errors3) => {
+    node.store.apply(errors3, (message2) => message2.meta.source === sourceKey);
   });
   return node;
 }
-function clearErrors$1(node, context, clearChildErrors = true) {
+function clearErrors$1(node, context, clearChildErrors = true, sourceKey) {
   setErrors$1(node, context, []);
   if (clearChildErrors) {
-    const sourceKey = `${node.name}-set`;
+    sourceKey = sourceKey || `${node.name}-set`;
     node.walk((child) => {
       child.store.filter((message2) => {
         return !(message2.type === "error" && message2.meta && message2.meta.source === sourceKey);
@@ -7112,11 +7114,11 @@ function sugar(node) {
     };
   }
   if (isSugar(node)) {
-    const _a = node, { $formkit: type, for: iterator, if: condition, children, key, bind } = _a, props2 = __objRest(_a, ["$formkit", "for", "if", "children", "key", "bind"]);
+    const _a = node, { $formkit: type, for: iterator, if: condition, children, bind } = _a, props2 = __objRest(_a, ["$formkit", "for", "if", "children", "bind"]);
     return Object.assign({
       $cmp: "FormKit",
       props: __spreadProps(__spreadValues({}, props2), { type })
-    }, condition ? { if: condition } : {}, iterator ? { for: iterator } : {}, children ? { children } : {}, key ? { key } : {}, bind ? { bind } : {});
+    }, condition ? { if: condition } : {}, iterator ? { for: iterator } : {}, children ? { children } : {}, bind ? { bind } : {});
   }
   return node;
 }
@@ -7430,143 +7432,158 @@ function clearErrors(id, clearChildren = true) {
     warn(652, id);
   }
 }
-const outer = composable("outer", () => ({
+const FORMKIT_VERSION = "1.0.0-beta.9";
+function createLibraryPlugin(...libraries) {
+  const library = libraries.reduce((merged, lib) => extend(merged, lib), {});
+  const plugin2 = () => {
+  };
+  plugin2.library = function(node) {
+    const type = camel(node.props.type);
+    if (has(library, type)) {
+      node.define(library[type]);
+    }
+  };
+  return plugin2;
+}
+const outer = createSection("outer", () => ({
   $el: "div",
   attrs: {
-    class: "$classes.outer",
+    key: "$id",
     "data-type": "$type",
     "data-multiple": "$attrs.multiple",
     "data-disabled": "$disabled || undefined",
     "data-complete": "$state.complete || undefined",
     "data-invalid": "$state.valid === false && $state.validationVisible || undefined",
     "data-errors": "$state.errors || undefined",
-    "data-submitted": "$state.submitted || undefined"
+    "data-submitted": "$state.submitted || undefined",
+    "data-prefix-icon": "$_rawPrefixIcon !== undefined || undefined",
+    "data-suffix-icon": "$_rawSuffixIcon !== undefined || undefined",
+    "data-prefix-icon-click": "$onPrefixIconClick !== undefined || undefined",
+    "data-suffix-icon-click": "$onSuffixIconClick !== undefined || undefined"
+  }
+}), true);
+const inner = createSection("inner", "div");
+const wrapper = createSection("wrapper", "div");
+const label = createSection("label", () => ({
+  $el: "label",
+  if: "$label",
+  attrs: {
+    for: "$id"
   }
 }));
-const wrapper$2 = composable("wrapper", () => ({
-  $el: "div",
+const messages = createSection("messages", () => ({
+  $el: "ul",
+  if: "$fns.length($messages)"
+}));
+const message = createSection("message", () => ({
+  $el: "li",
+  for: ["message", "$messages"],
   attrs: {
-    class: "$classes.wrapper"
+    key: "$message.key",
+    id: `$id + '-' + $message.key`,
+    "data-message-type": "$message.type"
   }
 }));
-const inner = composable("inner", () => ({
+const prefix = createSection("prefix", null);
+const suffix = createSection("suffix", null);
+const help = createSection("help", () => ({
   $el: "div",
+  if: "$help",
   attrs: {
-    class: "$classes.inner"
+    id: '$: "help-" + $id'
   }
 }));
-const help = (schema = {}, children = [], target = "help", cond = "$help") => ({
-  if: `$slots.${target}`,
-  then: `$slots.${target}`,
-  else: extend({
-    $el: "div",
-    attrs: {
-      id: `$: "help-" + ${target == "optionHelp" ? "$option.attrs.id" : "$id"}`,
-      class: `$classes.${target}`
-    },
-    if: cond,
-    children
-  }, schema)
-});
-const messages = composable("messages", () => ({
-  $el: "ul",
-  if: "$fns.length($messages)",
+const fieldset = createSection("fieldset", () => ({
+  $el: "fieldset",
   attrs: {
-    class: "$classes.messages",
-    "aria-live": '$type === "form" && "assertive" || "polite"'
+    id: "$id",
+    "aria-describedby": {
+      if: "$help",
+      then: '$: "help-" + $id',
+      else: void 0
+    }
   }
 }));
-const message = composable("message", () => ({
-  $el: "li",
-  for: ["message", "$messages"],
+const decorator = createSection("decorator", () => ({
+  $el: "span",
   attrs: {
-    key: "$message.key",
-    class: "$classes.message",
-    id: `$id + '-' + $message.key`,
-    "data-message-type": "$message.type"
+    "aria-hidden": "true"
   }
 }));
-const prefix = composable("prefix", () => ({ $el: null }));
-const suffix = composable("suffix", () => ({ $el: null }));
-function isSchemaObject(schema) {
-  return typeof schema === "object" && ("$el" in schema || "$cmp" in schema || "$formkit" in schema);
-}
-function extendSchema(schema, extension = {}) {
-  if (typeof schema === "string") {
-    return isSchemaObject(extension) || typeof extension === "string" ? extension : schema;
-  } else if (Array.isArray(schema)) {
-    return isSchemaObject(extension) ? extension : schema;
-  }
-  return extend(schema, extension);
-}
-function composable(key, schema) {
-  return (extendWith = {}, children = void 0) => {
-    const root = typeof schema === "function" ? schema(children) : typeof schema === "object" ? clone(schema) : schema;
-    const isObj = isSchemaObject(root);
-    if (isObj && !("children" in root) && children) {
-      if (Array.isArray(children)) {
-        if (children.length) {
-          root.children = children;
-        }
-      } else {
-        root.children = [children];
+const box = createSection("input", () => ({
+  $el: "input",
+  bind: "$attrs",
+  attrs: {
+    type: "$type",
+    name: "$node.props.altName || $node.name",
+    disabled: "$option.attrs.disabled || $disabled",
+    onInput: "$handlers.toggleChecked",
+    checked: "$fns.eq($_value, $onValue)",
+    onBlur: "$handlers.blur",
+    value: "$: true",
+    id: "$id",
+    "aria-describedby": {
+      if: "$options.length",
+      then: {
+        if: "$option.help",
+        then: '$: "help-" + $option.attrs.id',
+        else: void 0
+      },
+      else: {
+        if: "$help",
+        then: '$: "help-" + $id',
+        else: void 0
       }
     }
-    const extended = extendSchema(root, extendWith);
-    return {
-      if: `$slots.${key}`,
-      then: `$slots.${key}`,
-      else: Array.isArray(extended) ? extended : [extended]
-    };
-  };
-}
-const label = composable("label", () => ({
+  }
+}));
+const legend = createSection("legend", () => ({
+  $el: "legend",
+  if: "$label"
+}));
+const boxOption = createSection("option", () => ({
+  $el: "li",
+  for: ["option", "$options"],
+  attrs: {
+    "data-disabled": "$option.attrs.disabled || $disabled"
+  }
+}));
+const boxOptions = createSection("options", "ul");
+const boxWrapper = createSection("wrapper", () => ({
   $el: "label",
-  if: "$label",
   attrs: {
-    for: "$id",
-    class: "$classes.label"
+    "data-disabled": {
+      if: "$options.length",
+      then: void 0,
+      else: "$disabled"
+    }
   }
 }));
-const text$1 = composable("input", () => ({
-  $el: "input",
+const boxHelp = createSection("optionHelp", () => ({
+  $el: "div",
+  if: "$option.help",
+  attrs: {
+    id: '$: "help-" + $option.attrs.id'
+  }
+}));
+const boxLabel = createSection("label", "span");
+const buttonInput = createSection("input", () => ({
+  $el: "button",
   bind: "$attrs",
   attrs: {
     type: "$type",
     disabled: "$disabled",
-    class: "$classes.input",
     name: "$node.name",
-    onInput: "$handlers.DOMInput",
-    onBlur: "$handlers.blur",
-    value: "$_value",
-    id: "$id",
-    "aria-describedby": "$describedBy"
+    id: "$id"
   }
 }));
-const textSchema$1 = (extensions = {}) => [
-  outer(extensions.outer, [
-    wrapper$2(extensions.wrapper, [
-      label(extensions.label, "$label"),
-      inner(extensions.inner, [
-        prefix(extensions.prefix),
-        text$1(extensions.input),
-        suffix(extensions.suffix)
-      ])
-    ]),
-    help(extensions.help, "$help"),
-    messages(extensions.messages, [
-      message(extensions.message, "$message.value")
-    ])
-  ])
-];
-const file$1 = composable("input", () => ({
+const buttonLabel = createSection("default", null);
+const fileInput = createSection("input", () => ({
   $el: "input",
   bind: "$attrs",
   attrs: {
     type: "file",
-    foo: "bar",
     disabled: "$disabled",
-    class: "$classes.input",
     name: "$node.name",
     onChange: "$handlers.files",
     onBlur: "$handlers.blur",
@@ -7574,80 +7591,65 @@ const file$1 = composable("input", () => ({
     "aria-describedby": "$describedBy"
   }
 }));
-const fileList = composable("fileList", () => ({
+const fileItem = createSection("fileItem", () => ({
+  $el: "li",
+  for: ["file", "$value"]
+}));
+const fileList = createSection("fileList", () => ({
   $el: "ul",
   if: "$value.length",
   attrs: {
-    class: "$classes.fileList",
     "data-has-multiple": {
       if: "$value.length > 1",
       then: "true"
     }
   }
 }));
-const fileItem = composable("fileItem", () => ({
-  $el: "li",
-  for: ["file", "$value"],
+const fileName = createSection("fileName", () => ({
+  $el: "span",
   attrs: {
-    class: "$classes.fileItem"
+    class: "$classes.fileName"
   }
 }));
-const fileName = composable("fileName", () => ({
-  $el: "span",
+const fileRemove = createSection("fileRemove", () => ({
+  $el: "button",
   attrs: {
-    class: "$classes.fileName"
+    onClick: "$handlers.resetFiles"
   }
 }));
-const noFiles = composable("noFiles", () => ({
+const noFiles = createSection("noFiles", () => ({
   $el: "span",
-  if: "$value.length == 0",
+  if: "$value.length == 0"
+}));
+const formInput = createSection("form", () => ({
+  $el: "form",
+  bind: "$attrs",
   attrs: {
-    class: "$classes.noFiles"
+    id: "$id",
+    name: "$node.name",
+    onSubmit: "$handlers.submit",
+    "data-loading": "$state.loading || undefined"
   }
+}), true);
+const actions = createSection("actions", () => ({
+  $el: "div",
+  if: "$actions"
 }));
-const removeFiles = composable("removeFiles", () => ({
-  $el: "a",
-  attrs: {
-    href: "#",
-    class: "$classes.removeFiles",
-    onClick: "$handlers.resetFiles"
+const submitInput = createSection("submit", () => ({
+  $cmp: "FormKit",
+  bind: "$submitAttrs",
+  props: {
+    ignore: true,
+    type: "submit",
+    disabled: "$disabled",
+    label: "$submitLabel"
   }
 }));
-const fileSchema = (extensions = {}) => [
-  outer(extensions.outer, [
-    wrapper$2(extensions.wrapper, [
-      label(extensions.label, "$label"),
-      inner(extensions.inner, [
-        prefix(extensions.prefix),
-        file$1(extensions.input),
-        fileList(extensions.fileList, [
-          fileItem(extensions.file, [
-            fileName(extensions.fileName, "$file.name"),
-            {
-              if: "$value.length == 1",
-              then: removeFiles(extensions.removeFiles, "$ui.remove.value")
-            }
-          ])
-        ]),
-        {
-          if: "$value.length > 1",
-          then: removeFiles(extensions.removeFiles, "$ui.removeAll.value")
-        },
-        noFiles(extensions.noFiles, "$ui.noFiles.value"),
-        suffix(extensions.suffix)
-      ])
-    ]),
-    help(extensions.help, "$help"),
-    messages(extensions.messages, [
-      message(extensions.message, "$message.value")
-    ])
-  ])
-];
-const textarea$1 = composable("input", () => ({
-  $el: "textarea",
+const textInput = createSection("input", () => ({
+  $el: "input",
   bind: "$attrs",
   attrs: {
-    class: "$classes.input",
+    type: "$type",
     disabled: "$disabled",
     name: "$node.name",
     onInput: "$handlers.DOMInput",
@@ -7655,36 +7657,10 @@ const textarea$1 = composable("input", () => ({
     value: "$_value",
     id: "$id",
     "aria-describedby": "$describedBy"
-  },
-  children: "$initialValue"
+  }
 }));
-const textareaSchema = (extensions = {}) => [
-  outer(extensions.outer, [
-    wrapper$2(extensions.wrapper, [
-      label(extensions.label, "$label"),
-      inner(extensions.inner, [
-        prefix(extensions.prefix),
-        textarea$1(extensions.input),
-        suffix(extensions.suffix)
-      ])
-    ]),
-    help(extensions.help, "$help"),
-    messages(extensions.messages, [
-      message(extensions.message, "$message.value")
-    ])
-  ])
-];
-const hiddenSchema = (extensions = {}) => [
-  text$1(extensions.input)
-];
-const fragment = (schema = {}, children = []) => Object.keys(schema).length || typeof children !== "string" ? extend({ $el: "div", children }, schema) : children;
-const groupSchema = (extensions = {}) => {
-  return [fragment(extensions.wrapper, "$slots.default")];
-};
-const listSchema = (extensions = {}) => {
-  return [fragment(extensions.wrapper, "$slots.default")];
-};
-const select$2 = composable("input", (children) => ({
+const fragment = createSection("wrapper", null, true);
+const selectInput$1 = createSection("input", () => ({
   $el: "select",
   bind: "$attrs",
   attrs: {
@@ -7703,262 +7679,83 @@ const select$2 = composable("input", (children) => ({
     onInput: "$handlers.selectInput",
     onBlur: "$handlers.blur",
     "aria-describedby": "$describedBy"
-  },
-  children: {
-    if: "$slots.default",
-    then: "$slots.default",
-    else: children
-  }
-}));
-const option = (schema = {}, children = []) => ({
-  if: "$slots.option",
-  then: [
-    {
-      $el: "text",
-      if: "$options.length",
-      for: ["option", "$options"],
-      children: "$slots.option"
-    }
-  ],
-  else: extend({
-    $el: "option",
-    if: "$options.length",
-    for: ["option", "$options"],
-    bind: "$option.attrs",
-    attrs: {
-      class: "$classes.option",
-      value: "$option.value",
-      selected: "$fns.isSelected($option.value)"
-    },
-    children
-  }, schema)
-});
-const textSchema = (extensions = {}) => [
-  outer(extensions.outer, [
-    wrapper$2(extensions.wrapper, [
-      label(extensions.label, "$label"),
-      inner(extensions.inner, [
-        prefix(extensions.prefix),
-        select$2(extensions.input, [option(extensions.option, "$option.label")]),
-        suffix(extensions.suffix)
-      ])
-    ]),
-    help(extensions.help, "$help"),
-    messages(extensions.messages, [
-      message(extensions.message, "$message.value")
-    ])
-  ])
-];
-const boxLabel = composable("label", (children) => ({
-  $el: "span",
-  if: typeof children === "string" ? children : "$: true",
-  attrs: {
-    class: "$classes.label"
   }
 }));
-const wrapper$1 = composable("wrapper", () => ({
-  $el: "label",
+const option = createSection("option", () => ({
+  $el: "option",
+  for: ["option", "$options"],
+  bind: "$option.attrs",
   attrs: {
-    class: "$classes.wrapper",
-    "data-disabled": {
-      if: "$options.length",
-      then: void 0,
-      else: "$disabled"
-    }
+    class: "$classes.option",
+    value: "$option.value",
+    selected: "$fns.isSelected($option.value)"
   }
 }));
-const box = composable("input", () => ({
-  $el: "input",
+const optionSlot = () => ({
+  $el: null,
+  if: "$options.length",
+  for: ["option", "$options"],
+  children: "$slots.option"
+});
+const textareaInput = createSection("input", () => ({
+  $el: "textarea",
   bind: "$attrs",
   attrs: {
-    type: "$type",
-    class: "$classes.input",
-    name: "$node.props.altName || $node.name",
-    disabled: "$option.attrs.disabled || $disabled",
-    onInput: "$handlers.toggleChecked",
-    checked: "$fns.eq($_value, $onValue)",
+    disabled: "$disabled",
+    name: "$node.name",
+    onInput: "$handlers.DOMInput",
     onBlur: "$handlers.blur",
-    value: "$: true",
-    id: "$id",
-    "aria-describedby": {
-      if: "$options.length",
-      then: {
-        if: "$option.help",
-        then: '$: "help-" + $option.attrs.id',
-        else: void 0
-      },
-      else: {
-        if: "$help",
-        then: '$: "help-" + $id',
-        else: void 0
-      }
-    }
-  }
-}));
-const fieldset = composable("fieldset", () => ({
-  $el: "fieldset",
-  attrs: {
+    value: "$_value",
     id: "$id",
-    class: "$classes.fieldset",
-    "aria-describedby": {
-      if: "$help",
-      then: '$: "help-" + $id',
-      else: void 0
-    }
-  }
-}));
-const legend = composable("legend", () => ({
-  $el: "legend",
-  if: "$label",
-  attrs: {
-    class: "$classes.legend"
-  }
-}));
-const boxes = composable("option", () => ({
-  $el: "li",
-  for: ["option", "$options"],
-  attrs: {
-    class: "$classes.option",
-    "data-disabled": "$option.attrs.disabled || $disabled"
-  }
-}));
-const wrapper = composable("options", () => ({
-  $el: "ul",
-  attrs: {
-    class: "$classes.options"
-  }
-}));
-const decorator = composable("decorator", () => ({
-  $el: "span",
-  attrs: {
-    class: "$classes.decorator",
-    "aria-hidden": "true"
-  }
+    "aria-describedby": "$describedBy"
+  },
+  children: "$initialValue"
 }));
-const boxSchema = (extensions = {}) => {
-  const singleCheckbox = [
-    wrapper$1(extensions.wrapper, [
-      inner(extensions.inner, [
-        prefix(extensions.prefix),
-        box(extensions.input),
-        decorator(extensions.decorator),
-        suffix(extensions.suffix)
-      ]),
-      boxLabel(extensions.label, "$label")
-    ]),
-    help(extensions.help, "$help")
-  ];
-  const multiCheckbox = fieldset(extensions.fieldset, [
-    legend(extensions.legend, "$label"),
-    help(extensions.help, "$help"),
-    wrapper(extensions.options, [
-      boxes(extensions.option, [
-        wrapper$1(extensions.wrapper, [
-          inner(extensions.inner, [
-            prefix(extensions.prefix),
-            box(extend({
-              bind: "$option.attrs",
-              attrs: {
-                id: "$option.attrs.id",
-                value: "$option.value",
-                checked: "$fns.isChecked($option.value)"
-              }
-            }, extensions.input || {})),
-            decorator(extensions.decorator),
-            suffix(extensions.suffix)
-          ]),
-          boxLabel(extensions.label, "$option.label")
-        ]),
-        help(extensions.optionHelp, "$option.help", "optionHelp", "$option.help")
-      ])
-    ])
-  ]);
-  return [
-    outer(extensions.outer, [
-      {
-        if: "$options.length",
-        then: multiCheckbox,
-        else: singleCheckbox
-      },
-      messages(extensions.messages, [
-        message(extensions.message, "$message.value")
-      ])
-    ])
-  ];
+const icon = (sectionKey, el) => {
+  return createSection(`${sectionKey}Icon`, () => {
+    const rawIconProp = `_raw${sectionKey.charAt(0).toUpperCase()}${sectionKey.slice(1)}Icon`;
+    return {
+      if: `$${sectionKey}Icon && $${rawIconProp}`,
+      $el: `${el ? el : "span"}`,
+      attrs: {
+        class: `$classes.${sectionKey}Icon + " formkit-icon"`,
+        innerHTML: `$${rawIconProp}`,
+        onClick: `$handlers.iconClick(${sectionKey})`,
+        for: {
+          if: `${el === "label"}`,
+          then: "$id"
+        }
+      }
+    };
+  })();
 };
-const actions = composable("actions", () => ({
-  $el: "div",
-  if: "$actions",
-  attrs: {
-    class: "$classes.actions"
-  }
-}));
-const form$2 = composable("form", () => ({
-  $el: "form",
-  bind: "$attrs",
-  attrs: {
-    id: "$id",
-    class: "$classes.form",
-    name: "$node.name",
-    onSubmit: "$handlers.submit",
-    "data-loading": "$state.loading || undefined"
-  }
-}));
-const submit$1 = composable("submit", () => ({
-  $cmp: "FormKit",
-  bind: "$submitAttrs",
-  props: {
-    ignore: true,
-    type: "submit",
-    disabled: "$disabled",
-    label: "$submitLabel"
-  }
-}));
-const formSchema = (extensions = {}) => {
-  return [
-    form$2(extensions.form, [
-      "$slots.default",
-      messages(extensions.messages, [
-        message(extensions.message, "$message.value")
-      ]),
-      actions(extensions.actions, [submit$1(extensions.submit)])
-    ])
-  ];
-};
-const button$1 = composable("input", () => ({
-  $el: "button",
-  bind: "$attrs",
-  attrs: {
-    type: "$type",
-    disabled: "$disabled",
-    class: "$classes.input",
-    name: "$node.name",
-    id: "$id"
-  }
-}));
-const buttonSchema = (extensions = {}) => [
-  outer(extensions.outer, [
-    messages(extensions.messages, [
-      message(extensions.message, "$message.value")
-    ]),
-    wrapper$2(extensions.wrapper, [
-      button$1(extensions.input, [
-        prefix(extensions.prefix),
-        {
-          if: "$slots.default",
-          then: "$slots.default",
-          else: {
-            if: "$label",
-            then: "$label",
-            else: "$ui.submit.value"
-          }
-        },
-        suffix(extensions.suffix)
-      ])
-    ]),
-    help(extensions.help, "$help")
-  ])
-];
+function normalizeBoxes(node) {
+  return function(prop, next) {
+    if (prop.prop === "options" && Array.isArray(prop.value)) {
+      prop.value = prop.value.map((option2) => {
+        var _a;
+        if (!((_a = option2.attrs) === null || _a === void 0 ? void 0 : _a.id)) {
+          return extend(option2, {
+            attrs: { id: `${node.name}-option-${kebab(String(option2.value))}` }
+          });
+        }
+        return option2;
+      });
+      if (node.props.type === "checkbox" && !Array.isArray(node.value)) {
+        if (node.isCreated) {
+          node.input([], false);
+        } else {
+          node.on("created", () => {
+            if (!Array.isArray(node.value)) {
+              node.input([], false);
+            }
+          });
+        }
+      }
+    }
+    return next(prop);
+  };
+}
 function normalizeOptions(options2) {
   let i2 = 1;
   if (Array.isArray(options2)) {
@@ -8013,102 +7810,6 @@ function options(node) {
     return next(prop);
   });
 }
-function isSelected(node, option2) {
-  node.context && node.context.value;
-  const value = optionValue(node.props.options, option2);
-  return Array.isArray(node._value) ? node._value.some((optionA) => shouldSelect(optionA, value)) : node.value === void 0 && !option2 || shouldSelect(value, node._value);
-}
-function selectInput(node, e2) {
-  const target = e2.target;
-  const value = target.hasAttribute("multiple") ? Array.from(target.selectedOptions).map((o2) => optionValue(node.props.options, o2.value)) : optionValue(node.props.options, target.value);
-  node.input(value);
-}
-function applyPlaceholder(options2, placeholder) {
-  if (!options2.some((option2) => option2.attrs && option2.attrs["data-is-placeholder"])) {
-    return [
-      {
-        label: placeholder,
-        value: "",
-        attrs: {
-          hidden: true,
-          disabled: true,
-          "data-is-placeholder": "true"
-        }
-      },
-      ...options2
-    ];
-  }
-  return options2;
-}
-function select$1(node) {
-  node.on("created", () => {
-    var _a, _b, _c;
-    const isMultiple = undefine((_a = node.props.attrs) === null || _a === void 0 ? void 0 : _a.multiple);
-    if (!isMultiple && node.props.placeholder && Array.isArray(node.props.options)) {
-      node.hook.prop(({ prop, value }, next) => {
-        if (prop === "options") {
-          value = applyPlaceholder(value, node.props.placeholder);
-        }
-        return next({ prop, value });
-      });
-      node.props.options = applyPlaceholder(node.props.options, node.props.placeholder);
-    }
-    if (isMultiple) {
-      if (node.value === void 0) {
-        node.input([], false);
-      }
-    } else if (node.context && !node.context.options) {
-      node.props.attrs = Object.assign({}, node.props.attrs, {
-        value: node._value
-      });
-      node.on("input", ({ payload }) => {
-        node.props.attrs = Object.assign({}, node.props.attrs, {
-          value: payload
-        });
-      });
-    }
-    if ((_b = node.context) === null || _b === void 0 ? void 0 : _b.handlers) {
-      node.context.handlers.selectInput = selectInput.bind(null, node);
-    }
-    if ((_c = node.context) === null || _c === void 0 ? void 0 : _c.fns) {
-      node.context.fns.isSelected = isSelected.bind(null, node);
-    }
-  });
-  node.hook.input((value, next) => {
-    var _a, _b, _c;
-    if (!node.props.placeholder && value === void 0 && Array.isArray((_a = node.props) === null || _a === void 0 ? void 0 : _a.options) && node.props.options.length && !undefine((_c = (_b = node.props) === null || _b === void 0 ? void 0 : _b.attrs) === null || _c === void 0 ? void 0 : _c.multiple)) {
-      value = "__original" in node.props.options[0] ? node.props.options[0].__original : node.props.options[0].value;
-    }
-    return next(value);
-  });
-}
-function normalizeBoxes(node) {
-  return function(prop, next) {
-    if (prop.prop === "options" && Array.isArray(prop.value)) {
-      prop.value = prop.value.map((option2) => {
-        var _a;
-        if (!((_a = option2.attrs) === null || _a === void 0 ? void 0 : _a.id)) {
-          return extend(option2, {
-            attrs: { id: `${node.name}-option-${kebab(String(option2.value))}` }
-          });
-        }
-        return option2;
-      });
-      if (node.props.type === "checkbox" && !Array.isArray(node.value)) {
-        if (node.isCreated) {
-          node.input([], false);
-        } else {
-          node.on("created", () => {
-            if (!Array.isArray(node.value)) {
-              node.input([], false);
-            }
-          });
-        }
-      }
-    }
-    return next(prop);
-  };
-}
 function toggleChecked$1(node, e2) {
   const el = e2.target;
   if (el instanceof HTMLInputElement) {
@@ -8155,32 +7856,6 @@ function checkboxes(node) {
   });
   node.hook.prop(normalizeBoxes(node));
 }
-function toggleChecked(node, event) {
-  if (event.target instanceof HTMLInputElement) {
-    node.input(optionValue(node.props.options, event.target.value));
-  }
-}
-function isChecked(node, value) {
-  var _a, _b;
-  (_a = node.context) === null || _a === void 0 ? void 0 : _a.value;
-  (_b = node.context) === null || _b === void 0 ? void 0 : _b._value;
-  return shouldSelect(optionValue(node.props.options, value), node._value);
-}
-function radios(node) {
-  node.on("created", () => {
-    var _a, _b;
-    if (!Array.isArray(node.props.options)) {
-      warn(350, node);
-    }
-    if ((_a = node.context) === null || _a === void 0 ? void 0 : _a.handlers) {
-      node.context.handlers.toggleChecked = toggleChecked.bind(null, node);
-    }
-    if ((_b = node.context) === null || _b === void 0 ? void 0 : _b.fns) {
-      node.context.fns.isChecked = isChecked.bind(null, node);
-    }
-  });
-  node.hook.prop(normalizeBoxes(node));
-}
 function disables(node) {
   node.on("created", () => {
     node.props.disabled = undefine(node.props.disabled);
@@ -8196,6 +7871,82 @@ function disables(node) {
     node.config.disabled = undefine(node.props.disabled);
   });
 }
+function localize(key, value) {
+  return (node) => {
+    node.store.set(createMessage({
+      key,
+      type: "ui",
+      value: value || key,
+      meta: {
+        localize: true,
+        i18nArgs: [node]
+      }
+    }));
+  };
+}
+const isBrowser = typeof window !== "undefined";
+function removeHover(e2) {
+  if (e2.target instanceof HTMLElement && e2.target.hasAttribute("data-file-hover")) {
+    e2.target.removeAttribute("data-file-hover");
+  }
+}
+function preventStrayDrop(type, e2) {
+  if (!(e2.target instanceof HTMLInputElement)) {
+    e2.preventDefault();
+  } else if (type === "dragover") {
+    e2.target.setAttribute("data-file-hover", "true");
+  }
+  if (type === "drop") {
+    removeHover(e2);
+  }
+}
+function files(node) {
+  localize("noFiles", "Select file")(node);
+  localize("removeAll", "Remove all")(node);
+  localize("remove")(node);
+  if (isBrowser) {
+    if (!window._FormKit_File_Drop) {
+      window.addEventListener("dragover", preventStrayDrop.bind(null, "dragover"));
+      window.addEventListener("drop", preventStrayDrop.bind(null, "drop"));
+      window.addEventListener("dragleave", removeHover);
+      window._FormKit_File_Drop = true;
+    }
+  }
+  node.on("created", () => {
+    if (!Array.isArray(node.value)) {
+      node.input([], false);
+    }
+    if (!node.context)
+      return;
+    node.context.handlers.resetFiles = (e2) => {
+      e2.preventDefault();
+      node.input([]);
+      if (node.props.id && isBrowser) {
+        const el = document.getElementById(node.props.id);
+        if (el)
+          el.value = "";
+      }
+    };
+    node.context.handlers.files = (e2) => {
+      var _a, _b;
+      const files2 = [];
+      if (e2.target instanceof HTMLInputElement && e2.target.files) {
+        for (let i2 = 0; i2 < e2.target.files.length; i2++) {
+          let file2;
+          if (file2 = e2.target.files.item(i2)) {
+            files2.push({ name: file2.name, file: file2 });
+          }
+        }
+        node.input(files2);
+      }
+      if (node.context)
+        node.context.files = files2;
+      if (typeof ((_a = node.props.attrs) === null || _a === void 0 ? void 0 : _a.onChange) === "function") {
+        (_b = node.props.attrs) === null || _b === void 0 ? void 0 : _b.onChange(e2);
+      }
+    };
+  });
+}
 function handleSubmit(node, submitEvent) {
   return __async(this, null, function* () {
     submitEvent.preventDefault();
@@ -8226,7 +7977,7 @@ function handleSubmit(node, submitEvent) {
       }
     } else {
       if (typeof node.props.onSubmit === "function") {
-        const retVal = node.props.onSubmit(clone(node.value), node);
+        const retVal = node.props.onSubmit(node.hook.submit.dispatch(clone(node.value)), node);
         if (retVal instanceof Promise) {
           const autoDisable = node.props.disabled === void 0 && node.props.submitBehavior !== "live";
           if (autoDisable)
@@ -8262,155 +8013,235 @@ function form$1(node) {
   });
   node.on("settled:blocking", () => node.store.remove("incomplete"));
 }
-function localize(key, value) {
-  return (node) => {
-    node.store.set(createMessage({
-      key,
-      type: "ui",
-      value: value || key,
-      meta: {
-        localize: true,
-        i18nArgs: [node]
-      }
-    }));
-  };
-}
-const isBrowser = typeof window !== "undefined";
-function removeHover(e2) {
-  if (e2.target instanceof HTMLElement && e2.target.hasAttribute("data-file-hover")) {
-    e2.target.removeAttribute("data-file-hover");
+function ignore(node) {
+  if (node.props.ignore === void 0) {
+    node.props.ignore = true;
+    node.parent = null;
   }
 }
-function preventStrayDrop(type, e2) {
-  if (!(e2.target instanceof HTMLInputElement)) {
-    e2.preventDefault();
-  } else if (type === "dragover") {
-    e2.target.setAttribute("data-file-hover", "true");
-  }
-  if (type === "drop") {
-    removeHover(e2);
+function initialValue(node) {
+  node.on("created", () => {
+    if (node.context) {
+      node.context.initialValue = node.value || "";
+    }
+  });
+}
+function toggleChecked(node, event) {
+  if (event.target instanceof HTMLInputElement) {
+    node.input(optionValue(node.props.options, event.target.value));
   }
 }
-function files(node) {
-  localize("noFiles", "Select file")(node);
-  localize("removeAll", "Remove all")(node);
-  localize("remove")(node);
-  if (isBrowser) {
-    if (!window._FormKit_File_Drop) {
-      window.addEventListener("dragover", preventStrayDrop.bind(null, "dragover"));
-      window.addEventListener("drop", preventStrayDrop.bind(null, "drop"));
-      window.addEventListener("dragleave", removeHover);
-      window._FormKit_File_Drop = true;
+function isChecked(node, value) {
+  var _a, _b;
+  (_a = node.context) === null || _a === void 0 ? void 0 : _a.value;
+  (_b = node.context) === null || _b === void 0 ? void 0 : _b._value;
+  return shouldSelect(optionValue(node.props.options, value), node._value);
+}
+function radios(node) {
+  node.on("created", () => {
+    var _a, _b;
+    if (!Array.isArray(node.props.options)) {
+      warn(350, node);
+    }
+    if ((_a = node.context) === null || _a === void 0 ? void 0 : _a.handlers) {
+      node.context.handlers.toggleChecked = toggleChecked.bind(null, node);
+    }
+    if ((_b = node.context) === null || _b === void 0 ? void 0 : _b.fns) {
+      node.context.fns.isChecked = isChecked.bind(null, node);
     }
+  });
+  node.hook.prop(normalizeBoxes(node));
+}
+function isSelected(node, option2) {
+  node.context && node.context.value;
+  const value = optionValue(node.props.options, option2);
+  return Array.isArray(node._value) ? node._value.some((optionA) => shouldSelect(optionA, value)) : node.value === void 0 && !option2 || shouldSelect(value, node._value);
+}
+function selectInput(node, e2) {
+  const target = e2.target;
+  const value = target.hasAttribute("multiple") ? Array.from(target.selectedOptions).map((o2) => optionValue(node.props.options, o2.value)) : optionValue(node.props.options, target.value);
+  node.input(value);
+}
+function applyPlaceholder(options2, placeholder) {
+  if (!options2.some((option2) => option2.attrs && option2.attrs["data-is-placeholder"])) {
+    return [
+      {
+        label: placeholder,
+        value: "",
+        attrs: {
+          hidden: true,
+          disabled: true,
+          "data-is-placeholder": "true"
+        }
+      },
+      ...options2
+    ];
   }
+  return options2;
+}
+function select$1(node) {
   node.on("created", () => {
-    if (!Array.isArray(node.value)) {
-      node.input([], false);
+    var _a, _b, _c;
+    const isMultiple = undefine((_a = node.props.attrs) === null || _a === void 0 ? void 0 : _a.multiple);
+    if (!isMultiple && node.props.placeholder && Array.isArray(node.props.options)) {
+      node.hook.prop(({ prop, value }, next) => {
+        if (prop === "options") {
+          value = applyPlaceholder(value, node.props.placeholder);
+        }
+        return next({ prop, value });
+      });
+      node.props.options = applyPlaceholder(node.props.options, node.props.placeholder);
     }
-    if (!node.context)
-      return;
-    node.context.handlers.resetFiles = (e2) => {
-      e2.preventDefault();
-      node.input([]);
-      if (node.props.id && isBrowser) {
-        const el = document.getElementById(node.props.id);
-        if (el)
-          el.value = "";
+    if (isMultiple) {
+      if (node.value === void 0) {
+        node.input([], false);
       }
-    };
-    node.context.handlers.files = (e2) => {
-      var _a, _b;
-      const files2 = [];
-      if (e2.target instanceof HTMLInputElement && e2.target.files) {
-        for (let i2 = 0; i2 < e2.target.files.length; i2++) {
-          let file2;
-          if (file2 = e2.target.files.item(i2)) {
-            files2.push({ name: file2.name, file: file2 });
-          }
+    } else if (node.context && !node.context.options) {
+      node.props.attrs = Object.assign({}, node.props.attrs, {
+        value: node._value
+      });
+      node.on("input", ({ payload }) => {
+        node.props.attrs = Object.assign({}, node.props.attrs, {
+          value: payload
+        });
+      });
+    }
+    if ((_b = node.context) === null || _b === void 0 ? void 0 : _b.handlers) {
+      node.context.handlers.selectInput = selectInput.bind(null, node);
+    }
+    if ((_c = node.context) === null || _c === void 0 ? void 0 : _c.fns) {
+      node.context.fns.isSelected = isSelected.bind(null, node);
+    }
+  });
+  node.hook.input((value, next) => {
+    var _a, _b, _c;
+    if (!node.props.placeholder && value === void 0 && Array.isArray((_a = node.props) === null || _a === void 0 ? void 0 : _a.options) && node.props.options.length && !undefine((_c = (_b = node.props) === null || _b === void 0 ? void 0 : _b.attrs) === null || _c === void 0 ? void 0 : _c.multiple)) {
+      value = "__original" in node.props.options[0] ? node.props.options[0].__original : node.props.options[0].value;
+    }
+    return next(value);
+  });
+}
+function defaultIcon(sectionKey, defaultIcon2) {
+  return (node) => {
+    if (node.props[`${sectionKey}Icon`] === void 0) {
+      node.props[`${sectionKey}Icon`] = `default:${defaultIcon2}`;
+    }
+  };
+}
+function isSchemaObject(schema) {
+  return typeof schema === "object" && ("$el" in schema || "$cmp" in schema || "$formkit" in schema);
+}
+function isSlotCondition(node) {
+  if (isConditional(node) && node.if && node.if.startsWith("$slots.") && typeof node.then === "string" && node.then.startsWith("$slots.") && "else" in node) {
+    return true;
+  }
+  return false;
+}
+function extendSchema(schema, extension = {}) {
+  if (typeof schema === "string") {
+    return isSchemaObject(extension) || typeof extension === "string" ? extension : schema;
+  } else if (Array.isArray(schema)) {
+    return isSchemaObject(extension) ? extension : schema;
+  }
+  return extend(schema, extension);
+}
+function createSection(section, el, root = false) {
+  return (...children) => {
+    const extendable = (extensions) => {
+      const node = !el || typeof el === "string" ? { $el: el } : el();
+      if (isDOM(node) || isComponent(node)) {
+        if (!node.meta) {
+          node.meta = { section };
+        }
+        if (children.length && !node.children) {
+          node.children = [
+            ...children.map((child) => typeof child === "string" ? child : child(extensions))
+          ];
+        }
+        if (isDOM(node)) {
+          node.attrs = __spreadValues({
+            class: `$classes.${section}`
+          }, node.attrs || {});
         }
-        node.input(files2);
-      }
-      if (node.context)
-        node.context.files = files2;
-      if (typeof ((_a = node.props.attrs) === null || _a === void 0 ? void 0 : _a.onChange) === "function") {
-        (_b = node.props.attrs) === null || _b === void 0 ? void 0 : _b.onChange(e2);
       }
+      return {
+        if: `$slots.${section}`,
+        then: `$slots.${section}`,
+        else: section in extensions ? extendSchema(node, extensions[section]) : node
+      };
     };
-  });
+    return root ? createRoot(extendable) : extendable;
+  };
 }
-function ignore(node) {
-  if (node.props.ignore === void 0) {
-    node.props.ignore = true;
-    node.parent = null;
-  }
+function createRoot(rootSection) {
+  return (extensions) => {
+    return [rootSection(extensions)];
+  };
 }
-function initialValue(node) {
-  node.on("created", () => {
-    if (node.context) {
-      node.context.initialValue = node.value || "";
+function $if(condition, then, otherwise) {
+  return (extensions) => {
+    const node = then(extensions);
+    if (otherwise) {
+      return {
+        if: condition,
+        then: node,
+        else: otherwise(extensions)
+      };
+    } else if (isSlotCondition(node)) {
+      Object.assign(node.else, { if: condition });
+    } else if (isSchemaObject(node)) {
+      Object.assign(node, { if: condition });
     }
-  });
+    return node;
+  };
 }
-const textClassification$1 = {
-  type: "input",
-  schema: textSchema$1
-};
-const color = textClassification$1;
-const date$1 = textClassification$1;
-const datetimeLocal = textClassification$1;
-const email$1 = textClassification$1;
-const month = textClassification$1;
-const number$1 = textClassification$1;
-const password = textClassification$1;
-const search = textClassification$1;
-const tel = textClassification$1;
-const time = textClassification$1;
-const text = textClassification$1;
-const url$1 = textClassification$1;
-const week = textClassification$1;
-const range = textClassification$1;
-const textarea = {
-  type: "input",
-  schema: textareaSchema,
-  features: [initialValue]
-};
-const buttonClassification$1 = {
+function $extend(section, extendWith) {
+  return (extensions) => {
+    const node = section({});
+    if (isSlotCondition(node)) {
+      if (Array.isArray(node.else))
+        return node;
+      node.else = extendSchema(extendSchema(node.else, extendWith), extensions);
+      return node;
+    }
+    return extendSchema(extendSchema(node, extendWith), extensions);
+  };
+}
+function $root(section) {
+  return createRoot(section);
+}
+const button = {
+  schema: outer(messages(message("$message.value")), wrapper(buttonInput(icon("prefix"), prefix(), buttonLabel("$label || $ui.submit.value"), suffix(), icon("suffix"))), help("$help")),
   type: "input",
-  schema: buttonSchema,
+  props: [],
   features: [localize("submit"), ignore]
 };
-const submit = buttonClassification$1;
-const button = buttonClassification$1;
-const hidden = {
-  type: "input",
-  schema: hiddenSchema
-};
-const select = {
-  type: "input",
-  schema: textSchema,
-  props: ["options", "placeholder"],
-  features: [options, select$1]
-};
 const checkbox = {
+  schema: outer($if("$options == undefined", boxWrapper(inner(prefix(), box(), decorator(), suffix()), $if("$label", boxLabel("$label"))), fieldset(legend("$label"), help("$help"), boxOptions(boxOption(boxWrapper(inner(prefix(), $extend(box(), {
+    bind: "$option.attrs",
+    attrs: {
+      id: "$option.attrs.id",
+      value: "$option.value",
+      checked: "$fns.isChecked($option.value)"
+    }
+  }), decorator(), suffix()), $if("$option.label", boxLabel("$option.label"))), boxHelp("$option.help"))))), $if("$options.length === 0 && $help", help("$help")), messages(message("$message.value"))),
   type: "input",
-  schema: boxSchema,
   props: ["options", "onValue", "offValue"],
   features: [options, checkboxes]
 };
-const radio = {
+const file = {
+  schema: outer(wrapper(label("$label"), inner(icon("prefix", "label"), prefix(), fileInput(), fileList(fileItem(icon("fileItem"), fileName("$file.name"), $if("$value.length === 1", fileRemove(icon("fileRemove"), "$ui.remove.value")))), $if("$value.length > 1", fileRemove("$ui.removeAll.value")), noFiles(icon("fileItem"), "$ui.noFiles.value"), suffix(), icon("suffix"))), help("$help"), messages(message("$message.value"))),
   type: "input",
-  schema: boxSchema,
-  props: ["options"],
-  features: [options, radios]
-};
-const group = {
-  type: "group",
-  schema: groupSchema,
-  features: [disables]
+  props: [],
+  features: [
+    files,
+    defaultIcon("fileItem", "fileDoc"),
+    defaultIcon("fileRemove", "close")
+  ]
 };
 const form = {
+  schema: formInput("$slots.default", messages(message("$message.value")), actions(submitInput())),
   type: "group",
-  schema: formSchema,
   props: [
     "actions",
     "submit",
@@ -8421,57 +8252,83 @@ const form = {
   ],
   features: [form$1, disables]
 };
+const group = {
+  schema: fragment("$slots.default"),
+  type: "group",
+  props: [],
+  features: [disables]
+};
+const hidden = {
+  schema: $root(textInput()),
+  type: "input",
+  props: [],
+  features: []
+};
 const list$1 = {
+  schema: fragment("$slots.default"),
   type: "list",
-  schema: listSchema,
+  props: [],
   features: [disables]
 };
-const file = {
+const radio = {
+  schema: outer($if("$options == undefined", boxWrapper(inner(prefix(), box(), decorator(), suffix()), $if("$label", boxLabel("$label"))), fieldset(legend("$label"), help("$help"), boxOptions(boxOption(boxWrapper(inner(prefix(), $extend(box(), {
+    bind: "$option.attrs",
+    attrs: {
+      id: "$option.attrs.id",
+      value: "$option.value",
+      checked: "$fns.isChecked($option.value)"
+    }
+  }), decorator(), suffix()), $if("$option.label", boxLabel("$option.label"))), boxHelp("$option.help"))))), $if("$options.length === 0 && $help", help("$help")), messages(message("$message.value"))),
+  type: "input",
+  props: ["options", "onValue", "offValue"],
+  features: [options, radios]
+};
+const select = {
+  schema: outer(wrapper(label("$label"), inner(icon("prefix"), prefix(), selectInput$1($if("$slots.default", () => "$slots.default", $if("$slots.option", optionSlot, option("$option.label")))), icon("select"), suffix(), icon("suffix"))), help("$help"), messages(message("$message.value"))),
+  type: "input",
+  props: ["options", "placeholder"],
+  features: [options, select$1, defaultIcon("select", "down")]
+};
+const textarea = {
+  schema: outer(wrapper(label("$label"), inner(icon("prefix", "label"), prefix(), textareaInput(), suffix(), icon("suffix"))), help("$help"), messages(message("$message.value"))),
+  type: "input",
+  props: [],
+  features: [initialValue]
+};
+const text = {
+  schema: outer(wrapper(label("$label"), inner(icon("prefix", "label"), prefix(), textInput(), suffix(), icon("suffix"))), help("$help"), messages(message("$message.value"))),
   type: "input",
-  schema: fileSchema,
-  features: [files],
-  props: ["files"]
+  props: [],
+  features: []
 };
-var inputs = /* @__PURE__ */ Object.freeze({
+var index$1 = /* @__PURE__ */ Object.freeze({
   __proto__: null,
-  color,
-  date: date$1,
-  datetimeLocal,
-  email: email$1,
-  month,
-  number: number$1,
-  password,
-  search,
-  tel,
-  time,
-  text,
-  url: url$1,
-  week,
-  range,
-  textarea,
-  submit,
   button,
-  hidden,
-  select,
+  submit: button,
   checkbox,
-  radio,
-  group,
+  file,
   form,
+  group,
+  hidden,
   list: list$1,
-  file
+  radio,
+  select,
+  textarea,
+  text,
+  color: text,
+  date: text,
+  datetimeLocal: text,
+  email: text,
+  month: text,
+  number: text,
+  password: text,
+  search: text,
+  tel: text,
+  time: text,
+  url: text,
+  week: text,
+  range: text
 });
-function createLibraryPlugin(...libraries) {
-  const library = libraries.reduce((merged, lib) => extend(merged, lib), {});
-  const plugin2 = () => {
-  };
-  plugin2.library = function(node) {
-    const type = camel(node.props.type);
-    if (has(library, type)) {
-      node.define(library[type]);
-    }
-  };
-  return plugin2;
-}
 const accepted = function accepted2({ value }) {
   return ["yes", "on", "1", 1, true, "true"].includes(value);
 };
@@ -8482,7 +8339,7 @@ const date_after = function({ value }, compare = false) {
 };
 const alpha = function({ value }, set2 = "default") {
   const sets = {
-    default: /^[a-zA-ZÀ-ÖØ-öø-ÿĄąĆćĘꣳŃńŚśŹźŻż]+$/,
+    default: /^[a-zA-ZÀ-ÖØ-öø-ÿĄąĆćČčĎďĘęĚ죳ŃńŇňŘřŚśŠšŤťŮůŹźŻŽžż]+$/,
     latin: /^[a-zA-Z]+$/
   };
   const selectedSet = has(sets, set2) ? set2 : "default";
@@ -8490,7 +8347,7 @@ const alpha = function({ value }, set2 = "default") {
 };
 const alpha_spaces = function({ value }, set2 = "default") {
   const sets = {
-    default: /^[a-zA-ZÀ-ÖØ-öø-ÿĄąĆćĘꣳŃńŚśŹźŻż ]+$/,
+    default: /^[a-zA-ZÀ-ÖØ-öø-ÿĄąĆćČčĎďĘęĚ죳ŃńŇňŘřŚśŠšŤťŮůŹźŻŽžż ]+$/,
     latin: /^[a-zA-Z ]+$/
   };
   const selectedSet = has(sets, set2) ? set2 : "default";
@@ -9090,7 +8947,7 @@ function date2(date3) {
 function order(first, second) {
   return Number(first) >= Number(second) ? [second, first] : [first, second];
 }
-const ui$m = {
+const ui$q = {
   add: "Add",
   remove: "Remove",
   removeAll: "Remove all",
@@ -9098,7 +8955,7 @@ const ui$m = {
   submit: "Submit",
   noFiles: "No file chosen"
 };
-const validation$m = {
+const validation$q = {
   accepted({ name }) {
     return `Please accept the ${name}.`;
   },
@@ -9202,8 +9059,8 @@ const validation$m = {
 };
 var en = /* @__PURE__ */ Object.freeze({
   __proto__: null,
-  ui: ui$m,
-  validation: validation$m
+  ui: ui$q,
+  validation: validation$q
 });
 function createI18nPlugin(registry2) {
   return function i18nPlugin(node) {
@@ -9244,6 +9101,238 @@ function parseLocale(locale, availableLocales) {
   }
   return false;
 }
+function generateClasses(classes) {
+  const classesBySectionKey = {};
+  Object.keys(classes).forEach((type) => {
+    Object.keys(classes[type]).forEach((sectionKey) => {
+      if (!classesBySectionKey[sectionKey]) {
+        classesBySectionKey[sectionKey] = {
+          [type]: classes[type][sectionKey]
+        };
+      } else {
+        classesBySectionKey[sectionKey][type] = classes[type][sectionKey];
+      }
+    });
+  });
+  Object.keys(classesBySectionKey).forEach((sectionKey) => {
+    const classesObject = classesBySectionKey[sectionKey];
+    classesBySectionKey[sectionKey] = function(node, sectionKey2) {
+      return addClassesBySection(node, sectionKey2, classesObject);
+    };
+  });
+  return classesBySectionKey;
+}
+function addClassesBySection(node, _sectionKey, classesByType) {
+  const type = node.props.type;
+  let classList = "";
+  if (classesByType.global) {
+    classList += classesByType.global + " ";
+  }
+  if (classesByType[type]) {
+    classList += classesByType[type];
+  }
+  const listParts = classList.split("$reset");
+  if (listParts.length > 1) {
+    return `$reset ${listParts[listParts.length - 1].trim()}`;
+  }
+  return listParts[0].trim();
+}
+let documentStyles = void 0;
+let documentThemeLinkTag = null;
+let themeDidLoad;
+let themeHasLoaded = false;
+let themeWasRequested = false;
+const themeLoaded = new Promise((res) => {
+  themeDidLoad = () => {
+    themeHasLoaded = true;
+    res();
+  };
+});
+const isClient = typeof window !== "undefined" && typeof fetch !== "undefined";
+documentStyles = isClient ? getComputedStyle(document.documentElement) : void 0;
+const iconRegistry = {};
+const iconRequests = {};
+function createThemePlugin(theme2, icons, iconLoaderUrl, iconLoader) {
+  if (icons) {
+    Object.assign(iconRegistry, icons);
+  }
+  if (isClient && !themeWasRequested && (documentStyles === null || documentStyles === void 0 ? void 0 : documentStyles.getPropertyValue("--formkit-theme"))) {
+    themeDidLoad();
+    themeWasRequested = true;
+  } else if (theme2 && !themeWasRequested && isClient) {
+    loadTheme(theme2);
+  } else if (!themeWasRequested && isClient) {
+    themeDidLoad();
+  }
+  const themePlugin = function themePlugin2(node) {
+    var _a, _b;
+    node.addProps(["iconLoader", "iconLoaderUrl"]);
+    node.props.iconHandler = createIconHandler(((_a = node.props) === null || _a === void 0 ? void 0 : _a.iconLoader) ? node.props.iconLoader : iconLoader, ((_b = node.props) === null || _b === void 0 ? void 0 : _b.iconLoaderUrl) ? node.props.iconLoaderUrl : iconLoaderUrl);
+    loadIconPropIcons(node, node.props.iconHandler);
+    node.on("created", () => {
+      var _a2;
+      if ((_a2 = node === null || node === void 0 ? void 0 : node.context) === null || _a2 === void 0 ? void 0 : _a2.handlers) {
+        node.context.handlers.iconClick = (sectionKey) => {
+          const clickHandlerProp = `on${sectionKey.charAt(0).toUpperCase()}${sectionKey.slice(1)}IconClick`;
+          const handlerFunction = node.props[clickHandlerProp];
+          if (handlerFunction && typeof handlerFunction === "function") {
+            return (e2) => {
+              return handlerFunction(node, e2);
+            };
+          }
+          return void 0;
+        };
+      }
+    });
+  };
+  themePlugin.iconHandler = createIconHandler(iconLoader, iconLoaderUrl);
+  return themePlugin;
+}
+function loadTheme(theme2) {
+  if (!theme2 || !isClient || typeof getComputedStyle !== "function") {
+    return;
+  }
+  themeWasRequested = true;
+  documentThemeLinkTag = document.getElementById("formkit-theme");
+  if (theme2 && isClient && (!(documentStyles === null || documentStyles === void 0 ? void 0 : documentStyles.getPropertyValue("--formkit-theme")) && !documentThemeLinkTag || (documentThemeLinkTag === null || documentThemeLinkTag === void 0 ? void 0 : documentThemeLinkTag.getAttribute("data-theme")) && (documentThemeLinkTag === null || documentThemeLinkTag === void 0 ? void 0 : documentThemeLinkTag.getAttribute("data-theme")) !== theme2)) {
+    const formkitVersion = FORMKIT_VERSION.startsWith("__") ? "latest" : FORMKIT_VERSION;
+    const themeUrl = `https://cdn.jsdelivr.net/npm/@formkit/themes@${formkitVersion}/dist/${theme2}/theme.css`;
+    const link = document.createElement("link");
+    link.type = "text/css";
+    link.rel = "stylesheet";
+    link.id = "formkit-theme";
+    link.setAttribute("data-theme", theme2);
+    link.onload = () => {
+      documentStyles = getComputedStyle(document.documentElement);
+      themeDidLoad();
+    };
+    document.head.appendChild(link);
+    link.href = themeUrl;
+    if (documentThemeLinkTag) {
+      documentThemeLinkTag.remove();
+    }
+  }
+}
+function createIconHandler(iconLoader, iconLoaderUrl) {
+  return (iconName) => {
+    if (typeof iconName === "boolean") {
+      return;
+    }
+    if (iconName.startsWith("<svg")) {
+      return iconName;
+    }
+    if (typeof iconName !== "string")
+      return;
+    const icon2 = iconRegistry[iconName];
+    const isDefault = iconName.startsWith("default:");
+    iconName = isDefault ? iconName.split(":")[1] : iconName;
+    let loadedIcon = void 0;
+    if (icon2 || iconName in iconRegistry) {
+      return icon2;
+    } else if (!iconRequests[iconName]) {
+      loadedIcon = getIconFromStylesheet(iconName);
+      loadedIcon = isClient && typeof loadedIcon === "undefined" ? Promise.resolve(loadedIcon) : loadedIcon;
+      if (loadedIcon instanceof Promise) {
+        iconRequests[iconName] = loadedIcon.then((iconValue) => {
+          if (!iconValue && typeof iconName === "string" && !isDefault) {
+            return loadedIcon = typeof iconLoader === "function" ? iconLoader(iconName) : getRemoteIcon(iconName, iconLoaderUrl);
+          }
+          return iconValue;
+        }).then((finalIcon) => {
+          if (typeof iconName === "string") {
+            iconRegistry[isDefault ? `default:${iconName}` : iconName] = finalIcon;
+          }
+          return finalIcon;
+        });
+      } else if (typeof loadedIcon === "string") {
+        iconRegistry[isDefault ? `default:${iconName}` : iconName] = loadedIcon;
+        return loadedIcon;
+      }
+    }
+    return iconRequests[iconName];
+  };
+}
+function getIconFromStylesheet(iconName) {
+  if (!isClient)
+    return;
+  if (themeHasLoaded) {
+    return loadStylesheetIcon(iconName);
+  } else {
+    return themeLoaded.then(() => {
+      return loadStylesheetIcon(iconName);
+    });
+  }
+}
+function loadStylesheetIcon(iconName) {
+  const cssVarIcon = documentStyles === null || documentStyles === void 0 ? void 0 : documentStyles.getPropertyValue(`--fk-icon-${iconName}`);
+  if (cssVarIcon) {
+    const icon2 = atob(cssVarIcon);
+    if (icon2.startsWith("<svg")) {
+      iconRegistry[iconName] = icon2;
+      return icon2;
+    }
+  }
+  return void 0;
+}
+function getRemoteIcon(iconName, iconLoaderUrl) {
+  const formkitVersion = FORMKIT_VERSION.startsWith("__") ? "latest" : FORMKIT_VERSION;
+  const fetchUrl = typeof iconLoaderUrl === "function" ? iconLoaderUrl(iconName) : `https://cdn.jsdelivr.net/npm/@formkit/icons@${formkitVersion}/dist/icons/${iconName}.svg`;
+  if (!isClient)
+    return void 0;
+  return fetch(`${fetchUrl}`).then((r2) => __async(this, null, function* () {
+    const icon2 = yield r2.text();
+    if (icon2.startsWith("<svg")) {
+      return icon2;
+    }
+    return void 0;
+  })).catch((e2) => {
+    console.error(e2);
+    return void 0;
+  });
+}
+function loadIconPropIcons(node, iconHandler) {
+  const iconRegex = /^[a-zA-Z-]+(?:-icon|Icon)$/;
+  const iconProps = Object.keys(node.props).filter((prop) => {
+    return iconRegex.test(prop);
+  });
+  iconProps.forEach((sectionKey) => {
+    return loadPropIcon(node, iconHandler, sectionKey);
+  });
+}
+function loadPropIcon(node, iconHandler, sectionKey) {
+  const iconName = node.props[sectionKey];
+  const loadedIcon = iconHandler(iconName);
+  const rawIconProp = `_raw${sectionKey.charAt(0).toUpperCase()}${sectionKey.slice(1)}`;
+  const clickHandlerProp = `on${sectionKey.charAt(0).toUpperCase()}${sectionKey.slice(1)}Click`;
+  node.addProps([rawIconProp, clickHandlerProp]);
+  node.on(`prop:${sectionKey}`, reloadIcon);
+  if (loadedIcon instanceof Promise) {
+    return loadedIcon.then((svg) => {
+      node.props[rawIconProp] = svg;
+    });
+  } else {
+    node.props[rawIconProp] = loadedIcon;
+  }
+  return;
+}
+function reloadIcon(event) {
+  var _a;
+  const node = event.origin;
+  const iconName = event.payload;
+  const iconHandler = (_a = node === null || node === void 0 ? void 0 : node.props) === null || _a === void 0 ? void 0 : _a.iconHandler;
+  const sectionKey = event.name.split(":")[1];
+  const rawIconProp = `_raw${sectionKey.charAt(0).toUpperCase()}${sectionKey.slice(1)}`;
+  if (iconHandler && typeof iconHandler === "function") {
+    const loadedIcon = iconHandler(iconName);
+    if (loadedIcon instanceof Promise) {
+      return loadedIcon.then((svg) => {
+        node.props[rawIconProp] = svg;
+      });
+    } else {
+      node.props[rawIconProp] = loadedIcon;
+    }
+  }
+}
 let registered = false;
 const errors = {
   100: ({ data: node }) => `Only groups, lists, and forms can have children (${node.name}).`,
@@ -9265,7 +9354,8 @@ const warnings = {
   350: ({ data: node }) => `Invalid options prop for radio input (${node.name}). See https://formkit.com/inputs/radio`,
   650: 'Schema "$get()" must use the id of an input to access.',
   651: ({ data: id }) => `Cannot setErrors() on "${id}" because no such id exists.`,
-  652: ({ data: id }) => `Cannot clearErrors() on "${id}" because no such id exists.`
+  652: ({ data: id }) => `Cannot clearErrors() on "${id}" because no such id exists.`,
+  800: ({ data: name }) => `${name} is deprecated.`
 };
 const decodeErrors = (error2, next) => {
   if (error2.code in errors) {
@@ -9546,6 +9636,8 @@ function parseSchema(library, schema) {
           return null;
         const instanceScope = instanceScopes.get(instanceKey) || [];
         for (const key in values) {
+          if (Array.isArray(values) && key === "length")
+            continue;
           const iterationData = Object.defineProperty(__spreadValues(__spreadProps(__spreadValues({}, instanceScope.reduce((previousIterationData, scopedData) => {
             if (previousIterationData.__idata) {
               return __spreadValues(__spreadValues({}, previousIterationData), scopedData);
@@ -9920,7 +10012,10 @@ const pseudoProps = [
   "preserve",
   /^preserve(-e|E)rrors/,
   /^[a-z]+(?:-visibility|Visibility)$/,
-  /^[a-zA-Z-]+(?:-class|Class)$/
+  /^[a-zA-Z-]+(?:-class|Class)$/,
+  "prefixIcon",
+  "suffixIcon",
+  /^[a-zA-Z-]+(?:-icon|Icon)$/
 ];
 function classesToNodeProps(node, props2) {
   if (props2.classes) {
@@ -10040,6 +10135,8 @@ function useInput(props2, context, options2 = {}) {
     const sourceKey = `${node.name}-prop`;
     watchEffect(() => {
       const keys = Object.keys(props2.inputErrors);
+      if (!keys.length)
+        node.clearErrors(true, sourceKey);
       const messages2 = keys.reduce((messages3, key) => {
         let value2 = props2.inputErrors[key];
         if (typeof value2 === "string")
@@ -10197,7 +10294,12 @@ const vueBindings = function vueBindings2(node) {
       eq
     },
     handlers: {
-      blur: () => node.store.set(createMessage({ key: "blurred", visible: false, value: true })),
+      blur: (e2) => {
+        node.store.set(createMessage({ key: "blurred", visible: false, value: true }));
+        if (typeof node.props.attrs.onBlur === "function") {
+          node.props.attrs.onBlur(e2);
+        }
+      },
       touch: () => {
         node.store.set(createMessage({ key: "dirty", visible: false, value: true }));
       },
@@ -10250,18 +10352,25 @@ const vueBindings = function vueBindings2(node) {
       });
     });
   }
-  const rootProps = [
-    "help",
-    "label",
-    "disabled",
-    "options",
-    "type",
-    "attrs",
-    "preserve",
-    "preserveErrors",
-    "id"
-  ];
-  observeProps(rootProps);
+  const rootProps = () => {
+    const props2 = [
+      "help",
+      "label",
+      "disabled",
+      "options",
+      "type",
+      "attrs",
+      "preserve",
+      "preserveErrors",
+      "id"
+    ];
+    const iconPattern = /^[a-zA-Z-]+(?:-icon|Icon)$/;
+    const matchingProps = Object.keys(node.props).filter((prop) => {
+      return iconPattern.test(prop);
+    });
+    return props2.concat(matchingProps);
+  };
+  observeProps(rootProps());
   function definedAs(definition) {
     if (definition.props)
       observeProps(definition.props);
@@ -10322,14 +10431,71 @@ const vueBindings = function vueBindings2(node) {
   node.emit("context", node, false);
 };
 const defaultConfig = (options2 = {}) => {
-  const _a = options2, { rules = {}, locales = {}, inputs: inputs$1 = {}, messages: messages2 = {}, locale = void 0 } = _a, nodeOptions = __objRest(_a, ["rules", "locales", "inputs", "messages", "locale"]);
+  const _a = options2, { rules = {}, locales = {}, inputs: inputs$1 = {}, messages: messages2 = {}, locale = void 0, theme: theme2 = void 0, iconLoaderUrl = void 0, iconLoader = void 0, icons = {} } = _a, nodeOptions = __objRest(_a, ["rules", "locales", "inputs", "messages", "locale", "theme", "iconLoaderUrl", "iconLoader", "icons"]);
   const validation = createValidationPlugin(__spreadValues(__spreadValues({}, defaultRules), rules || {}));
   const i18n = createI18nPlugin(extend(__spreadValues({ en }, locales || {}), messages2));
-  const library = createLibraryPlugin(inputs, inputs$1);
+  const library = createLibraryPlugin(index$1, inputs$1);
+  const themePlugin = createThemePlugin(theme2, icons, iconLoaderUrl, iconLoader);
   return extend(__spreadValues({
-    plugins: [library, vueBindings, i18n, validation]
+    plugins: [library, themePlugin, vueBindings, i18n, validation]
   }, !locale ? {} : { config: { locale } }), nodeOptions || {}, true);
 };
+defineComponent({
+  props: {
+    icon: {
+      type: String,
+      default: ""
+    },
+    iconLoader: {
+      type: Function,
+      default: null
+    },
+    iconLoaderUrl: {
+      type: Function,
+      default: null
+    }
+  },
+  setup(props2) {
+    var _a, _b;
+    const icon2 = ref(void 0);
+    const config = inject(optionsSymbol, {});
+    const parent = inject(parentSymbol, null);
+    let iconHandler = void 0;
+    if (props2.iconLoader && typeof props2.iconLoader === "function") {
+      iconHandler = createIconHandler(props2.iconLoader);
+    } else if (parent && ((_a = parent.props) === null || _a === void 0 ? void 0 : _a.iconLoader)) {
+      iconHandler = createIconHandler(parent.props.iconLoader);
+    } else if (props2.iconLoaderUrl && typeof props2.iconLoaderUrl === "function") {
+      iconHandler = createIconHandler(iconHandler, props2.iconLoaderUrl);
+    } else {
+      const iconPlugin = (_b = config === null || config === void 0 ? void 0 : config.plugins) === null || _b === void 0 ? void 0 : _b.find((plugin2) => {
+        return typeof plugin2.iconHandler === "function";
+      });
+      if (iconPlugin) {
+        iconHandler = iconPlugin.iconHandler;
+      }
+    }
+    if (iconHandler && typeof iconHandler === "function") {
+      const iconOrPromise = iconHandler(props2.icon);
+      if (iconOrPromise instanceof Promise) {
+        iconOrPromise.then((iconValue) => {
+          icon2.value = iconValue;
+        });
+      } else {
+        icon2.value = iconOrPromise;
+      }
+    }
+    return () => {
+      if (icon2.value) {
+        return h$1("span", {
+          class: "formkit-icon",
+          innerHTML: icon2.value
+        });
+      }
+      return null;
+    };
+  }
+});
 var createPlugin$3 = {};
 var createPlugin$2 = {};
 Object.defineProperty(createPlugin$2, "__esModule", {
@@ -10371,42 +10537,6 @@ var _default = _createPlugin.default;
 createPlugin$3.default = _default;
 let createPlugin = createPlugin$3;
 var plugin = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default;
-function generateClasses(classes) {
-  const classesBySectionKey = {};
-  Object.keys(classes).forEach((type) => {
-    Object.keys(classes[type]).forEach((sectionKey) => {
-      if (!classesBySectionKey[sectionKey]) {
-        classesBySectionKey[sectionKey] = {
-          [type]: classes[type][sectionKey]
-        };
-      } else {
-        classesBySectionKey[sectionKey][type] = classes[type][sectionKey];
-      }
-    });
-  });
-  Object.keys(classesBySectionKey).forEach((sectionKey) => {
-    const classesObject = classesBySectionKey[sectionKey];
-    classesBySectionKey[sectionKey] = function(node, sectionKey2) {
-      return addClassesBySection(node, sectionKey2, classesObject);
-    };
-  });
-  return classesBySectionKey;
-}
-function addClassesBySection(node, _sectionKey, classesByType) {
-  const type = node.props.type;
-  let classList = "";
-  if (classesByType.global) {
-    classList += classesByType.global + " ";
-  }
-  if (classesByType[type]) {
-    classList += classesByType[type];
-  }
-  const listParts = classList.split("$reset");
-  if (listParts.length > 1) {
-    return `$reset ${listParts[listParts.length - 1].trim()}`;
-  }
-  return listParts[0].trim();
-}
 plugin(({ addVariant }) => {
   console.warn("@formkit/tailwindcss is deprecated in favor of @formkit/themes");
   addVariant("formkit-disabled", [
@@ -10695,6 +10825,10 @@ function schemaFromUrl(url3) {
     return schemaObj;
   });
 }
+const getBaseDomain = () => {
+  var parts = window.location.host.split(".");
+  return parts.slice(-2).join(".");
+};
 const flattenObj = (obj) => {
   const flattened = {};
   Object.keys(obj).forEach((key) => {
@@ -10830,6 +10964,7 @@ var theme = {
 };
 var index = "";
 const apps = {};
+const defaultSubmitUrl = "https://webhooks." + getBaseDomain() + "/api/v1/form_leads_ext";
 const init = () => {
   const classes = generateClasses(theme);
   const forms = window.bhlFormDefs || [];
@@ -10850,10 +10985,13 @@ const init = () => {
         }
       }
       let schemaObj = schema;
-      if (typeof schema === "string") {
+      if (schema instanceof Function) {
+        schemaObj = schema();
+      } else if (typeof schema === "string") {
         schemaObj = yield schemaFromUrl(schema);
       }
       const data = form2.data || {};
+      data.submitUrl = data.submitUrl || defaultSubmitUrl;
       data.prepData = data.prepData || prepData;
       data.fireStepEvent = data.fireStepEvent || fireStepEvent;
       const app = createApp(_sfc_main, { schema: schemaObj, data }).use(plugin$1, defaultConfig({