@saas-ui/forms 2.0.0-next.3 → 2.0.0-next.5

package/dist/index.js

@@ -1,14 +1,19 @@
 'use strict';
 
-var React8 = require('react');
-var utils = require('@chakra-ui/utils');
 var reactHookForm = require('react-hook-form');
 var react = require('@chakra-ui/react');
-var icons = require('@chakra-ui/icons');
-var reactUtils = require('@chakra-ui/react-utils');
+var jsxRuntime = require('react/jsx-runtime');
+var React12 = require('react');
 var core = require('@saas-ui/core');
+var react$1 = require('@emotion/react');
+var utils = require('@chakra-ui/utils');
+var createStyled = require('@emotion/styled');
+var reactUtils = require('@chakra-ui/react-utils');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-function _interopNamespaceDefault(e) {
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -25,70 +30,2404 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-var React8__namespace = /*#__PURE__*/_interopNamespaceDefault(React8);
+var React12__namespace = /*#__PURE__*/_interopNamespace(React12);
+var createStyled__default = /*#__PURE__*/_interopDefault(createStyled);
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// ../../node_modules/lodash.mergewith/index.js
+var require_lodash = __commonJS({
+  "../../node_modules/lodash.mergewith/index.js"(exports, module) {
+    var LARGE_ARRAY_SIZE = 200;
+    var HASH_UNDEFINED = "__lodash_hash_undefined__";
+    var HOT_COUNT = 800;
+    var HOT_SPAN = 16;
+    var MAX_SAFE_INTEGER = 9007199254740991;
+    var argsTag = "[object Arguments]";
+    var arrayTag = "[object Array]";
+    var asyncTag = "[object AsyncFunction]";
+    var boolTag = "[object Boolean]";
+    var dateTag = "[object Date]";
+    var errorTag = "[object Error]";
+    var funcTag = "[object Function]";
+    var genTag = "[object GeneratorFunction]";
+    var mapTag = "[object Map]";
+    var numberTag = "[object Number]";
+    var nullTag = "[object Null]";
+    var objectTag = "[object Object]";
+    var proxyTag = "[object Proxy]";
+    var regexpTag = "[object RegExp]";
+    var setTag = "[object Set]";
+    var stringTag = "[object String]";
+    var undefinedTag = "[object Undefined]";
+    var weakMapTag = "[object WeakMap]";
+    var arrayBufferTag = "[object ArrayBuffer]";
+    var dataViewTag = "[object DataView]";
+    var float32Tag = "[object Float32Array]";
+    var float64Tag = "[object Float64Array]";
+    var int8Tag = "[object Int8Array]";
+    var int16Tag = "[object Int16Array]";
+    var int32Tag = "[object Int32Array]";
+    var uint8Tag = "[object Uint8Array]";
+    var uint8ClampedTag = "[object Uint8ClampedArray]";
+    var uint16Tag = "[object Uint16Array]";
+    var uint32Tag = "[object Uint32Array]";
+    var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+    var reIsHostCtor = /^\[object .+?Constructor\]$/;
+    var reIsUint = /^(?:0|[1-9]\d*)$/;
+    var typedArrayTags = {};
+    typedArrayTags[float32Tag] = typedArrayTags[float64Tag] = typedArrayTags[int8Tag] = typedArrayTags[int16Tag] = typedArrayTags[int32Tag] = typedArrayTags[uint8Tag] = typedArrayTags[uint8ClampedTag] = typedArrayTags[uint16Tag] = typedArrayTags[uint32Tag] = true;
+    typedArrayTags[argsTag] = typedArrayTags[arrayTag] = typedArrayTags[arrayBufferTag] = typedArrayTags[boolTag] = typedArrayTags[dataViewTag] = typedArrayTags[dateTag] = typedArrayTags[errorTag] = typedArrayTags[funcTag] = typedArrayTags[mapTag] = typedArrayTags[numberTag] = typedArrayTags[objectTag] = typedArrayTags[regexpTag] = typedArrayTags[setTag] = typedArrayTags[stringTag] = typedArrayTags[weakMapTag] = false;
+    var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
+    var freeSelf = typeof self == "object" && self && self.Object === Object && self;
+    var root = freeGlobal || freeSelf || Function("return this")();
+    var freeExports = typeof exports == "object" && exports && !exports.nodeType && exports;
+    var freeModule = freeExports && typeof module == "object" && module && !module.nodeType && module;
+    var moduleExports = freeModule && freeModule.exports === freeExports;
+    var freeProcess = moduleExports && freeGlobal.process;
+    var nodeUtil = function() {
+      try {
+        var types = freeModule && freeModule.require && freeModule.require("util").types;
+        if (types) {
+          return types;
+        }
+        return freeProcess && freeProcess.binding && freeProcess.binding("util");
+      } catch (e) {
+      }
+    }();
+    var nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray;
+    function apply(func, thisArg, args) {
+      switch (args.length) {
+        case 0:
+          return func.call(thisArg);
+        case 1:
+          return func.call(thisArg, args[0]);
+        case 2:
+          return func.call(thisArg, args[0], args[1]);
+        case 3:
+          return func.call(thisArg, args[0], args[1], args[2]);
+      }
+      return func.apply(thisArg, args);
+    }
+    function baseTimes(n, iteratee) {
+      var index = -1, result = Array(n);
+      while (++index < n) {
+        result[index] = iteratee(index);
+      }
+      return result;
+    }
+    function baseUnary(func) {
+      return function(value) {
+        return func(value);
+      };
+    }
+    function getValue(object, key) {
+      return object == null ? void 0 : object[key];
+    }
+    function overArg(func, transform2) {
+      return function(arg) {
+        return func(transform2(arg));
+      };
+    }
+    var arrayProto = Array.prototype;
+    var funcProto = Function.prototype;
+    var objectProto = Object.prototype;
+    var coreJsData = root["__core-js_shared__"];
+    var funcToString = funcProto.toString;
+    var hasOwnProperty = objectProto.hasOwnProperty;
+    var maskSrcKey = function() {
+      var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || "");
+      return uid ? "Symbol(src)_1." + uid : "";
+    }();
+    var nativeObjectToString = objectProto.toString;
+    var objectCtorString = funcToString.call(Object);
+    var reIsNative = RegExp(
+      "^" + funcToString.call(hasOwnProperty).replace(reRegExpChar, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
+    );
+    var Buffer2 = moduleExports ? root.Buffer : void 0;
+    var Symbol2 = root.Symbol;
+    var Uint8Array2 = root.Uint8Array;
+    var allocUnsafe = Buffer2 ? Buffer2.allocUnsafe : void 0;
+    var getPrototype = overArg(Object.getPrototypeOf, Object);
+    var objectCreate = Object.create;
+    var propertyIsEnumerable = objectProto.propertyIsEnumerable;
+    var splice = arrayProto.splice;
+    var symToStringTag = Symbol2 ? Symbol2.toStringTag : void 0;
+    var defineProperty = function() {
+      try {
+        var func = getNative(Object, "defineProperty");
+        func({}, "", {});
+        return func;
+      } catch (e) {
+      }
+    }();
+    var nativeIsBuffer = Buffer2 ? Buffer2.isBuffer : void 0;
+    var nativeMax = Math.max;
+    var nativeNow = Date.now;
+    var Map2 = getNative(root, "Map");
+    var nativeCreate = getNative(Object, "create");
+    var baseCreate = function() {
+      function object() {
+      }
+      return function(proto) {
+        if (!isObject2(proto)) {
+          return {};
+        }
+        if (objectCreate) {
+          return objectCreate(proto);
+        }
+        object.prototype = proto;
+        var result = new object();
+        object.prototype = void 0;
+        return result;
+      };
+    }();
+    function Hash(entries) {
+      var index = -1, length = entries == null ? 0 : entries.length;
+      this.clear();
+      while (++index < length) {
+        var entry = entries[index];
+        this.set(entry[0], entry[1]);
+      }
+    }
+    function hashClear() {
+      this.__data__ = nativeCreate ? nativeCreate(null) : {};
+      this.size = 0;
+    }
+    function hashDelete(key) {
+      var result = this.has(key) && delete this.__data__[key];
+      this.size -= result ? 1 : 0;
+      return result;
+    }
+    function hashGet(key) {
+      var data = this.__data__;
+      if (nativeCreate) {
+        var result = data[key];
+        return result === HASH_UNDEFINED ? void 0 : result;
+      }
+      return hasOwnProperty.call(data, key) ? data[key] : void 0;
+    }
+    function hashHas(key) {
+      var data = this.__data__;
+      return nativeCreate ? data[key] !== void 0 : hasOwnProperty.call(data, key);
+    }
+    function hashSet(key, value) {
+      var data = this.__data__;
+      this.size += this.has(key) ? 0 : 1;
+      data[key] = nativeCreate && value === void 0 ? HASH_UNDEFINED : value;
+      return this;
+    }
+    Hash.prototype.clear = hashClear;
+    Hash.prototype["delete"] = hashDelete;
+    Hash.prototype.get = hashGet;
+    Hash.prototype.has = hashHas;
+    Hash.prototype.set = hashSet;
+    function ListCache(entries) {
+      var index = -1, length = entries == null ? 0 : entries.length;
+      this.clear();
+      while (++index < length) {
+        var entry = entries[index];
+        this.set(entry[0], entry[1]);
+      }
+    }
+    function listCacheClear() {
+      this.__data__ = [];
+      this.size = 0;
+    }
+    function listCacheDelete(key) {
+      var data = this.__data__, index = assocIndexOf(data, key);
+      if (index < 0) {
+        return false;
+      }
+      var lastIndex = data.length - 1;
+      if (index == lastIndex) {
+        data.pop();
+      } else {
+        splice.call(data, index, 1);
+      }
+      --this.size;
+      return true;
+    }
+    function listCacheGet(key) {
+      var data = this.__data__, index = assocIndexOf(data, key);
+      return index < 0 ? void 0 : data[index][1];
+    }
+    function listCacheHas(key) {
+      return assocIndexOf(this.__data__, key) > -1;
+    }
+    function listCacheSet(key, value) {
+      var data = this.__data__, index = assocIndexOf(data, key);
+      if (index < 0) {
+        ++this.size;
+        data.push([key, value]);
+      } else {
+        data[index][1] = value;
+      }
+      return this;
+    }
+    ListCache.prototype.clear = listCacheClear;
+    ListCache.prototype["delete"] = listCacheDelete;
+    ListCache.prototype.get = listCacheGet;
+    ListCache.prototype.has = listCacheHas;
+    ListCache.prototype.set = listCacheSet;
+    function MapCache(entries) {
+      var index = -1, length = entries == null ? 0 : entries.length;
+      this.clear();
+      while (++index < length) {
+        var entry = entries[index];
+        this.set(entry[0], entry[1]);
+      }
+    }
+    function mapCacheClear() {
+      this.size = 0;
+      this.__data__ = {
+        "hash": new Hash(),
+        "map": new (Map2 || ListCache)(),
+        "string": new Hash()
+      };
+    }
+    function mapCacheDelete(key) {
+      var result = getMapData(this, key)["delete"](key);
+      this.size -= result ? 1 : 0;
+      return result;
+    }
+    function mapCacheGet(key) {
+      return getMapData(this, key).get(key);
+    }
+    function mapCacheHas(key) {
+      return getMapData(this, key).has(key);
+    }
+    function mapCacheSet(key, value) {
+      var data = getMapData(this, key), size = data.size;
+      data.set(key, value);
+      this.size += data.size == size ? 0 : 1;
+      return this;
+    }
+    MapCache.prototype.clear = mapCacheClear;
+    MapCache.prototype["delete"] = mapCacheDelete;
+    MapCache.prototype.get = mapCacheGet;
+    MapCache.prototype.has = mapCacheHas;
+    MapCache.prototype.set = mapCacheSet;
+    function Stack2(entries) {
+      var data = this.__data__ = new ListCache(entries);
+      this.size = data.size;
+    }
+    function stackClear() {
+      this.__data__ = new ListCache();
+      this.size = 0;
+    }
+    function stackDelete(key) {
+      var data = this.__data__, result = data["delete"](key);
+      this.size = data.size;
+      return result;
+    }
+    function stackGet(key) {
+      return this.__data__.get(key);
+    }
+    function stackHas(key) {
+      return this.__data__.has(key);
+    }
+    function stackSet(key, value) {
+      var data = this.__data__;
+      if (data instanceof ListCache) {
+        var pairs = data.__data__;
+        if (!Map2 || pairs.length < LARGE_ARRAY_SIZE - 1) {
+          pairs.push([key, value]);
+          this.size = ++data.size;
+          return this;
+        }
+        data = this.__data__ = new MapCache(pairs);
+      }
+      data.set(key, value);
+      this.size = data.size;
+      return this;
+    }
+    Stack2.prototype.clear = stackClear;
+    Stack2.prototype["delete"] = stackDelete;
+    Stack2.prototype.get = stackGet;
+    Stack2.prototype.has = stackHas;
+    Stack2.prototype.set = stackSet;
+    function arrayLikeKeys(value, inherited) {
+      var isArr = isArray(value), isArg = !isArr && isArguments(value), isBuff = !isArr && !isArg && isBuffer(value), isType = !isArr && !isArg && !isBuff && isTypedArray(value), skipIndexes = isArr || isArg || isBuff || isType, result = skipIndexes ? baseTimes(value.length, String) : [], length = result.length;
+      for (var key in value) {
+        if ((inherited || hasOwnProperty.call(value, key)) && !(skipIndexes && // Safari 9 has enumerable `arguments.length` in strict mode.
+        (key == "length" || // Node.js 0.10 has enumerable non-index properties on buffers.
+        isBuff && (key == "offset" || key == "parent") || // PhantomJS 2 has enumerable non-index properties on typed arrays.
+        isType && (key == "buffer" || key == "byteLength" || key == "byteOffset") || // Skip index properties.
+        isIndex(key, length)))) {
+          result.push(key);
+        }
+      }
+      return result;
+    }
+    function assignMergeValue(object, key, value) {
+      if (value !== void 0 && !eq(object[key], value) || value === void 0 && !(key in object)) {
+        baseAssignValue(object, key, value);
+      }
+    }
+    function assignValue(object, key, value) {
+      var objValue = object[key];
+      if (!(hasOwnProperty.call(object, key) && eq(objValue, value)) || value === void 0 && !(key in object)) {
+        baseAssignValue(object, key, value);
+      }
+    }
+    function assocIndexOf(array, key) {
+      var length = array.length;
+      while (length--) {
+        if (eq(array[length][0], key)) {
+          return length;
+        }
+      }
+      return -1;
+    }
+    function baseAssignValue(object, key, value) {
+      if (key == "__proto__" && defineProperty) {
+        defineProperty(object, key, {
+          "configurable": true,
+          "enumerable": true,
+          "value": value,
+          "writable": true
+        });
+      } else {
+        object[key] = value;
+      }
+    }
+    var baseFor = createBaseFor();
+    function baseGetTag(value) {
+      if (value == null) {
+        return value === void 0 ? undefinedTag : nullTag;
+      }
+      return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
+    }
+    function baseIsArguments(value) {
+      return isObjectLike(value) && baseGetTag(value) == argsTag;
+    }
+    function baseIsNative(value) {
+      if (!isObject2(value) || isMasked(value)) {
+        return false;
+      }
+      var pattern = isFunction2(value) ? reIsNative : reIsHostCtor;
+      return pattern.test(toSource(value));
+    }
+    function baseIsTypedArray(value) {
+      return isObjectLike(value) && isLength(value.length) && !!typedArrayTags[baseGetTag(value)];
+    }
+    function baseKeysIn(object) {
+      if (!isObject2(object)) {
+        return nativeKeysIn(object);
+      }
+      var isProto = isPrototype(object), result = [];
+      for (var key in object) {
+        if (!(key == "constructor" && (isProto || !hasOwnProperty.call(object, key)))) {
+          result.push(key);
+        }
+      }
+      return result;
+    }
+    function baseMerge(object, source, srcIndex, customizer, stack) {
+      if (object === source) {
+        return;
+      }
+      baseFor(source, function(srcValue, key) {
+        stack || (stack = new Stack2());
+        if (isObject2(srcValue)) {
+          baseMergeDeep(object, source, key, srcIndex, baseMerge, customizer, stack);
+        } else {
+          var newValue = customizer ? customizer(safeGet(object, key), srcValue, key + "", object, source, stack) : void 0;
+          if (newValue === void 0) {
+            newValue = srcValue;
+          }
+          assignMergeValue(object, key, newValue);
+        }
+      }, keysIn);
+    }
+    function baseMergeDeep(object, source, key, srcIndex, mergeFunc, customizer, stack) {
+      var objValue = safeGet(object, key), srcValue = safeGet(source, key), stacked = stack.get(srcValue);
+      if (stacked) {
+        assignMergeValue(object, key, stacked);
+        return;
+      }
+      var newValue = customizer ? customizer(objValue, srcValue, key + "", object, source, stack) : void 0;
+      var isCommon = newValue === void 0;
+      if (isCommon) {
+        var isArr = isArray(srcValue), isBuff = !isArr && isBuffer(srcValue), isTyped = !isArr && !isBuff && isTypedArray(srcValue);
+        newValue = srcValue;
+        if (isArr || isBuff || isTyped) {
+          if (isArray(objValue)) {
+            newValue = objValue;
+          } else if (isArrayLikeObject(objValue)) {
+            newValue = copyArray(objValue);
+          } else if (isBuff) {
+            isCommon = false;
+            newValue = cloneBuffer(srcValue, true);
+          } else if (isTyped) {
+            isCommon = false;
+            newValue = cloneTypedArray(srcValue, true);
+          } else {
+            newValue = [];
+          }
+        } else if (isPlainObject(srcValue) || isArguments(srcValue)) {
+          newValue = objValue;
+          if (isArguments(objValue)) {
+            newValue = toPlainObject(objValue);
+          } else if (!isObject2(objValue) || isFunction2(objValue)) {
+            newValue = initCloneObject(srcValue);
+          }
+        } else {
+          isCommon = false;
+        }
+      }
+      if (isCommon) {
+        stack.set(srcValue, newValue);
+        mergeFunc(newValue, srcValue, srcIndex, customizer, stack);
+        stack["delete"](srcValue);
+      }
+      assignMergeValue(object, key, newValue);
+    }
+    function baseRest(func, start) {
+      return setToString(overRest(func, start, identity), func + "");
+    }
+    var baseSetToString = !defineProperty ? identity : function(func, string) {
+      return defineProperty(func, "toString", {
+        "configurable": true,
+        "enumerable": false,
+        "value": constant(string),
+        "writable": true
+      });
+    };
+    function cloneBuffer(buffer, isDeep) {
+      if (isDeep) {
+        return buffer.slice();
+      }
+      var length = buffer.length, result = allocUnsafe ? allocUnsafe(length) : new buffer.constructor(length);
+      buffer.copy(result);
+      return result;
+    }
+    function cloneArrayBuffer(arrayBuffer) {
+      var result = new arrayBuffer.constructor(arrayBuffer.byteLength);
+      new Uint8Array2(result).set(new Uint8Array2(arrayBuffer));
+      return result;
+    }
+    function cloneTypedArray(typedArray, isDeep) {
+      var buffer = isDeep ? cloneArrayBuffer(typedArray.buffer) : typedArray.buffer;
+      return new typedArray.constructor(buffer, typedArray.byteOffset, typedArray.length);
+    }
+    function copyArray(source, array) {
+      var index = -1, length = source.length;
+      array || (array = Array(length));
+      while (++index < length) {
+        array[index] = source[index];
+      }
+      return array;
+    }
+    function copyObject(source, props, object, customizer) {
+      var isNew = !object;
+      object || (object = {});
+      var index = -1, length = props.length;
+      while (++index < length) {
+        var key = props[index];
+        var newValue = customizer ? customizer(object[key], source[key], key, object, source) : void 0;
+        if (newValue === void 0) {
+          newValue = source[key];
+        }
+        if (isNew) {
+          baseAssignValue(object, key, newValue);
+        } else {
+          assignValue(object, key, newValue);
+        }
+      }
+      return object;
+    }
+    function createAssigner(assigner) {
+      return baseRest(function(object, sources) {
+        var index = -1, length = sources.length, customizer = length > 1 ? sources[length - 1] : void 0, guard = length > 2 ? sources[2] : void 0;
+        customizer = assigner.length > 3 && typeof customizer == "function" ? (length--, customizer) : void 0;
+        if (guard && isIterateeCall(sources[0], sources[1], guard)) {
+          customizer = length < 3 ? void 0 : customizer;
+          length = 1;
+        }
+        object = Object(object);
+        while (++index < length) {
+          var source = sources[index];
+          if (source) {
+            assigner(object, source, index, customizer);
+          }
+        }
+        return object;
+      });
+    }
+    function createBaseFor(fromRight) {
+      return function(object, iteratee, keysFunc) {
+        var index = -1, iterable = Object(object), props = keysFunc(object), length = props.length;
+        while (length--) {
+          var key = props[fromRight ? length : ++index];
+          if (iteratee(iterable[key], key, iterable) === false) {
+            break;
+          }
+        }
+        return object;
+      };
+    }
+    function getMapData(map, key) {
+      var data = map.__data__;
+      return isKeyable(key) ? data[typeof key == "string" ? "string" : "hash"] : data.map;
+    }
+    function getNative(object, key) {
+      var value = getValue(object, key);
+      return baseIsNative(value) ? value : void 0;
+    }
+    function getRawTag(value) {
+      var isOwn = hasOwnProperty.call(value, symToStringTag), tag = value[symToStringTag];
+      try {
+        value[symToStringTag] = void 0;
+        var unmasked = true;
+      } catch (e) {
+      }
+      var result = nativeObjectToString.call(value);
+      if (unmasked) {
+        if (isOwn) {
+          value[symToStringTag] = tag;
+        } else {
+          delete value[symToStringTag];
+        }
+      }
+      return result;
+    }
+    function initCloneObject(object) {
+      return typeof object.constructor == "function" && !isPrototype(object) ? baseCreate(getPrototype(object)) : {};
+    }
+    function isIndex(value, length) {
+      var type = typeof value;
+      length = length == null ? MAX_SAFE_INTEGER : length;
+      return !!length && (type == "number" || type != "symbol" && reIsUint.test(value)) && (value > -1 && value % 1 == 0 && value < length);
+    }
+    function isIterateeCall(value, index, object) {
+      if (!isObject2(object)) {
+        return false;
+      }
+      var type = typeof index;
+      if (type == "number" ? isArrayLike(object) && isIndex(index, object.length) : type == "string" && index in object) {
+        return eq(object[index], value);
+      }
+      return false;
+    }
+    function isKeyable(value) {
+      var type = typeof value;
+      return type == "string" || type == "number" || type == "symbol" || type == "boolean" ? value !== "__proto__" : value === null;
+    }
+    function isMasked(func) {
+      return !!maskSrcKey && maskSrcKey in func;
+    }
+    function isPrototype(value) {
+      var Ctor = value && value.constructor, proto = typeof Ctor == "function" && Ctor.prototype || objectProto;
+      return value === proto;
+    }
+    function nativeKeysIn(object) {
+      var result = [];
+      if (object != null) {
+        for (var key in Object(object)) {
+          result.push(key);
+        }
+      }
+      return result;
+    }
+    function objectToString(value) {
+      return nativeObjectToString.call(value);
+    }
+    function overRest(func, start, transform2) {
+      start = nativeMax(start === void 0 ? func.length - 1 : start, 0);
+      return function() {
+        var args = arguments, index = -1, length = nativeMax(args.length - start, 0), array = Array(length);
+        while (++index < length) {
+          array[index] = args[start + index];
+        }
+        index = -1;
+        var otherArgs = Array(start + 1);
+        while (++index < start) {
+          otherArgs[index] = args[index];
+        }
+        otherArgs[start] = transform2(array);
+        return apply(func, this, otherArgs);
+      };
+    }
+    function safeGet(object, key) {
+      if (key === "constructor" && typeof object[key] === "function") {
+        return;
+      }
+      if (key == "__proto__") {
+        return;
+      }
+      return object[key];
+    }
+    var setToString = shortOut(baseSetToString);
+    function shortOut(func) {
+      var count = 0, lastCalled = 0;
+      return function() {
+        var stamp = nativeNow(), remaining = HOT_SPAN - (stamp - lastCalled);
+        lastCalled = stamp;
+        if (remaining > 0) {
+          if (++count >= HOT_COUNT) {
+            return arguments[0];
+          }
+        } else {
+          count = 0;
+        }
+        return func.apply(void 0, arguments);
+      };
+    }
+    function toSource(func) {
+      if (func != null) {
+        try {
+          return funcToString.call(func);
+        } catch (e) {
+        }
+        try {
+          return func + "";
+        } catch (e) {
+        }
+      }
+      return "";
+    }
+    function eq(value, other) {
+      return value === other || value !== value && other !== other;
+    }
+    var isArguments = baseIsArguments(function() {
+      return arguments;
+    }()) ? baseIsArguments : function(value) {
+      return isObjectLike(value) && hasOwnProperty.call(value, "callee") && !propertyIsEnumerable.call(value, "callee");
+    };
+    var isArray = Array.isArray;
+    function isArrayLike(value) {
+      return value != null && isLength(value.length) && !isFunction2(value);
+    }
+    function isArrayLikeObject(value) {
+      return isObjectLike(value) && isArrayLike(value);
+    }
+    var isBuffer = nativeIsBuffer || stubFalse;
+    function isFunction2(value) {
+      if (!isObject2(value)) {
+        return false;
+      }
+      var tag = baseGetTag(value);
+      return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
+    }
+    function isLength(value) {
+      return typeof value == "number" && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
+    }
+    function isObject2(value) {
+      var type = typeof value;
+      return value != null && (type == "object" || type == "function");
+    }
+    function isObjectLike(value) {
+      return value != null && typeof value == "object";
+    }
+    function isPlainObject(value) {
+      if (!isObjectLike(value) || baseGetTag(value) != objectTag) {
+        return false;
+      }
+      var proto = getPrototype(value);
+      if (proto === null) {
+        return true;
+      }
+      var Ctor = hasOwnProperty.call(proto, "constructor") && proto.constructor;
+      return typeof Ctor == "function" && Ctor instanceof Ctor && funcToString.call(Ctor) == objectCtorString;
+    }
+    var isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedArray;
+    function toPlainObject(value) {
+      return copyObject(value, keysIn(value));
+    }
+    function keysIn(object) {
+      return isArrayLike(object) ? arrayLikeKeys(object, true) : baseKeysIn(object);
+    }
+    var mergeWith6 = createAssigner(function(object, source, srcIndex, customizer) {
+      baseMerge(object, source, srcIndex, customizer);
+    });
+    function constant(value) {
+      return function() {
+        return value;
+      };
+    }
+    function identity(value) {
+      return value;
+    }
+    function stubFalse() {
+      return false;
+    }
+    module.exports = mergeWith6;
+  }
+});
+
+// ../../node_modules/react-fast-compare/index.js
+var require_react_fast_compare = __commonJS({
+  "../../node_modules/react-fast-compare/index.js"(exports, module) {
+    var hasElementType = typeof Element !== "undefined";
+    var hasMap = typeof Map === "function";
+    var hasSet = typeof Set === "function";
+    var hasArrayBuffer = typeof ArrayBuffer === "function" && !!ArrayBuffer.isView;
+    function equal(a, b) {
+      if (a === b)
+        return true;
+      if (a && b && typeof a == "object" && typeof b == "object") {
+        if (a.constructor !== b.constructor)
+          return false;
+        var length, i, keys;
+        if (Array.isArray(a)) {
+          length = a.length;
+          if (length != b.length)
+            return false;
+          for (i = length; i-- !== 0; )
+            if (!equal(a[i], b[i]))
+              return false;
+          return true;
+        }
+        var it;
+        if (hasMap && a instanceof Map && b instanceof Map) {
+          if (a.size !== b.size)
+            return false;
+          it = a.entries();
+          while (!(i = it.next()).done)
+            if (!b.has(i.value[0]))
+              return false;
+          it = a.entries();
+          while (!(i = it.next()).done)
+            if (!equal(i.value[1], b.get(i.value[0])))
+              return false;
+          return true;
+        }
+        if (hasSet && a instanceof Set && b instanceof Set) {
+          if (a.size !== b.size)
+            return false;
+          it = a.entries();
+          while (!(i = it.next()).done)
+            if (!b.has(i.value[0]))
+              return false;
+          return true;
+        }
+        if (hasArrayBuffer && ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
+          length = a.length;
+          if (length != b.length)
+            return false;
+          for (i = length; i-- !== 0; )
+            if (a[i] !== b[i])
+              return false;
+          return true;
+        }
+        if (a.constructor === RegExp)
+          return a.source === b.source && a.flags === b.flags;
+        if (a.valueOf !== Object.prototype.valueOf)
+          return a.valueOf() === b.valueOf();
+        if (a.toString !== Object.prototype.toString)
+          return a.toString() === b.toString();
+        keys = Object.keys(a);
+        length = keys.length;
+        if (length !== Object.keys(b).length)
+          return false;
+        for (i = length; i-- !== 0; )
+          if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
+            return false;
+        if (hasElementType && a instanceof Element)
+          return false;
+        for (i = length; i-- !== 0; ) {
+          if ((keys[i] === "_owner" || keys[i] === "__v" || keys[i] === "__o") && a.$$typeof) {
+            continue;
+          }
+          if (!equal(a[keys[i]], b[keys[i]]))
+            return false;
+        }
+        return true;
+      }
+      return a !== a && b !== b;
+    }
+    module.exports = function isEqual2(a, b) {
+      try {
+        return equal(a, b);
+      } catch (error) {
+        if ((error.message || "").match(/stack|recursion/i)) {
+          console.warn("react-fast-compare cannot handle circular refs");
+          return false;
+        }
+        throw error;
+      }
+    };
+  }
+});
+var DisplayField = ({
+  name,
+  label,
+  placeholder,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.FormControl, { ...props, children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsx(react.FormLabel, { htmlFor: name, children: label }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "md", children: /* @__PURE__ */ jsxRuntime.jsx(FormValue, { name }) })
+  ] });
+};
+DisplayField.displayName = "DisplayField";
+var FormValue = ({ name }) => {
+  const { getValues } = reactHookForm.useFormContext();
+  return getValues(name) || null;
+};
+FormValue.displayName = "FormValue";
+var NumberInput = react.forwardRef((props, ref) => {
+  const {
+    hideStepper,
+    incrementIcon = /* @__PURE__ */ jsxRuntime.jsx(core.ChevronUpIcon, {}),
+    decrementIcon = /* @__PURE__ */ jsxRuntime.jsx(core.ChevronDownIcon, {}),
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.NumberInput, { ...rest, ref, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.NumberInputField, {}),
+    !hideStepper && /* @__PURE__ */ jsxRuntime.jsxs(react.NumberInputStepper, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.NumberIncrementStepper, { children: incrementIcon }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.NumberDecrementStepper, { children: decrementIcon })
+    ] })
+  ] });
+});
+NumberInput.defaultProps = {
+  hideStepper: false
+};
+NumberInput.displayName = "NumberInput";
+function useTheme() {
+  const theme = React12.useContext(
+    react$1.ThemeContext
+  );
+  if (!theme) {
+    throw Error(
+      "useTheme: `theme` is undefined. Seems you forgot to wrap your app in `<ChakraProvider />` or `<ThemeProvider />`"
+    );
+  }
+  return theme;
+}
+var ColorModeContext = React12.createContext({});
+ColorModeContext.displayName = "ColorModeContext";
+function useColorMode() {
+  const context = React12.useContext(ColorModeContext);
+  if (context === void 0) {
+    throw new Error("useColorMode must be used within a ColorModeProvider");
+  }
+  return context;
+}
+
+// ../../node_modules/@chakra-ui/system/dist/chunk-7V3ZYTH7.mjs
+function useChakra() {
+  const colorModeResult = useColorMode();
+  const theme = useTheme();
+  return { ...colorModeResult, theme };
+}
+
+// ../../node_modules/@chakra-ui/shared-utils/dist/index.mjs
+var cx = (...classNames) => classNames.filter(Boolean).join(" ");
+function isObject(value) {
+  const type = typeof value;
+  return value != null && (type === "object" || type === "function") && !Array.isArray(value);
+}
+function runIfFn(valueOrFn, ...args) {
+  return isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;
+}
+var isFunction = (value) => typeof value === "function";
+
+// ../../node_modules/@chakra-ui/styled-system/dist/index.mjs
+__toESM(require_lodash(), 1);
+var import_lodash2 = __toESM(require_lodash(), 1);
+var import_lodash3 = __toESM(require_lodash(), 1);
+var import_lodash4 = __toESM(require_lodash(), 1);
+var isImportant = (value) => /!(important)?$/.test(value);
+var withoutImportant = (value) => typeof value === "string" ? value.replace(/!(important)?$/, "").trim() : value;
+var tokenToCSSVar = (scale, value) => (theme) => {
+  const valueStr = String(value);
+  const important = isImportant(valueStr);
+  const valueWithoutImportant = withoutImportant(valueStr);
+  const key = scale ? `${scale}.${valueWithoutImportant}` : valueWithoutImportant;
+  let transformed = isObject(theme.__cssMap) && key in theme.__cssMap ? theme.__cssMap[key].varRef : value;
+  transformed = withoutImportant(transformed);
+  return important ? `${transformed} !important` : transformed;
+};
+function createTransform(options) {
+  const { scale, transform: transform2, compose } = options;
+  const fn = (value, theme) => {
+    var _a2;
+    const _value = tokenToCSSVar(scale, value)(theme);
+    let result = (_a2 = transform2 == null ? void 0 : transform2(_value, theme)) != null ? _a2 : _value;
+    if (compose) {
+      result = compose(result, theme);
+    }
+    return result;
+  };
+  return fn;
+}
+var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
+function toConfig(scale, transform2) {
+  return (property) => {
+    const result = { property, scale };
+    result.transform = createTransform({
+      scale,
+      transform: transform2
+    });
+    return result;
+  };
+}
+var getRtl = ({ rtl, ltr }) => (theme) => theme.direction === "rtl" ? rtl : ltr;
+function logical(options) {
+  const { property, scale, transform: transform2 } = options;
+  return {
+    scale,
+    property: getRtl(property),
+    transform: scale ? createTransform({
+      scale,
+      compose: transform2
+    }) : transform2
+  };
+}
+var transformTemplate = [
+  "rotate(var(--chakra-rotate, 0))",
+  "scaleX(var(--chakra-scale-x, 1))",
+  "scaleY(var(--chakra-scale-y, 1))",
+  "skewX(var(--chakra-skew-x, 0))",
+  "skewY(var(--chakra-skew-y, 0))"
+];
+function getTransformTemplate() {
+  return [
+    "translateX(var(--chakra-translate-x, 0))",
+    "translateY(var(--chakra-translate-y, 0))",
+    ...transformTemplate
+  ].join(" ");
+}
+function getTransformGpuTemplate() {
+  return [
+    "translate3d(var(--chakra-translate-x, 0), var(--chakra-translate-y, 0), 0)",
+    ...transformTemplate
+  ].join(" ");
+}
+var filterTemplate = {
+  "--chakra-blur": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-brightness": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-contrast": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-grayscale": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-hue-rotate": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-invert": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-saturate": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-sepia": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-drop-shadow": "var(--chakra-empty,/*!*/ /*!*/)",
+  filter: [
+    "var(--chakra-blur)",
+    "var(--chakra-brightness)",
+    "var(--chakra-contrast)",
+    "var(--chakra-grayscale)",
+    "var(--chakra-hue-rotate)",
+    "var(--chakra-invert)",
+    "var(--chakra-saturate)",
+    "var(--chakra-sepia)",
+    "var(--chakra-drop-shadow)"
+  ].join(" ")
+};
+var backdropFilterTemplate = {
+  backdropFilter: [
+    "var(--chakra-backdrop-blur)",
+    "var(--chakra-backdrop-brightness)",
+    "var(--chakra-backdrop-contrast)",
+    "var(--chakra-backdrop-grayscale)",
+    "var(--chakra-backdrop-hue-rotate)",
+    "var(--chakra-backdrop-invert)",
+    "var(--chakra-backdrop-opacity)",
+    "var(--chakra-backdrop-saturate)",
+    "var(--chakra-backdrop-sepia)"
+  ].join(" "),
+  "--chakra-backdrop-blur": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-backdrop-brightness": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-backdrop-contrast": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-backdrop-grayscale": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-backdrop-hue-rotate": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-backdrop-invert": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-backdrop-opacity": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-backdrop-saturate": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-backdrop-sepia": "var(--chakra-empty,/*!*/ /*!*/)"
+};
+function getRingTemplate(value) {
+  return {
+    "--chakra-ring-offset-shadow": `var(--chakra-ring-inset) 0 0 0 var(--chakra-ring-offset-width) var(--chakra-ring-offset-color)`,
+    "--chakra-ring-shadow": `var(--chakra-ring-inset) 0 0 0 calc(var(--chakra-ring-width) + var(--chakra-ring-offset-width)) var(--chakra-ring-color)`,
+    "--chakra-ring-width": value,
+    boxShadow: [
+      `var(--chakra-ring-offset-shadow)`,
+      `var(--chakra-ring-shadow)`,
+      `var(--chakra-shadow, 0 0 #0000)`
+    ].join(", ")
+  };
+}
+var flexDirectionTemplate = {
+  "row-reverse": {
+    space: "--chakra-space-x-reverse",
+    divide: "--chakra-divide-x-reverse"
+  },
+  "column-reverse": {
+    space: "--chakra-space-y-reverse",
+    divide: "--chakra-divide-y-reverse"
+  }
+};
+var directionMap = {
+  "to-t": "to top",
+  "to-tr": "to top right",
+  "to-r": "to right",
+  "to-br": "to bottom right",
+  "to-b": "to bottom",
+  "to-bl": "to bottom left",
+  "to-l": "to left",
+  "to-tl": "to top left"
+};
+var valueSet = new Set(Object.values(directionMap));
+var globalSet = /* @__PURE__ */ new Set([
+  "none",
+  "-moz-initial",
+  "inherit",
+  "initial",
+  "revert",
+  "unset"
+]);
+var trimSpace = (str) => str.trim();
+function parseGradient(value, theme) {
+  if (value == null || globalSet.has(value))
+    return value;
+  const regex = /(^[a-z-A-Z]+)\((.*)\)/g;
+  const results = regex.exec(value);
+  const type = results == null ? void 0 : results[1];
+  const values = results == null ? void 0 : results[2];
+  if (!type || !values)
+    return value;
+  const _type = type.includes("-gradient") ? type : `${type}-gradient`;
+  const [maybeDirection, ...stops] = values.split(",").map(trimSpace).filter(Boolean);
+  if ((stops == null ? void 0 : stops.length) === 0)
+    return value;
+  const direction = maybeDirection in directionMap ? directionMap[maybeDirection] : maybeDirection;
+  stops.unshift(direction);
+  const _values = stops.map((stop) => {
+    if (valueSet.has(stop))
+      return stop;
+    const firstStop = stop.indexOf(" ");
+    const [_color, _stop] = firstStop !== -1 ? [stop.substr(0, firstStop), stop.substr(firstStop + 1)] : [stop];
+    const _stopOrFunc = isCSSFunction(_stop) ? _stop : _stop && _stop.split(" ");
+    const key = `colors.${_color}`;
+    const color2 = key in theme.__cssMap ? theme.__cssMap[key].varRef : _color;
+    return _stopOrFunc ? [
+      color2,
+      ...Array.isArray(_stopOrFunc) ? _stopOrFunc : [_stopOrFunc]
+    ].join(" ") : color2;
+  });
+  return `${_type}(${_values.join(", ")})`;
+}
+var isCSSFunction = (value) => {
+  return typeof value === "string" && value.includes("(") && value.includes(")");
+};
+var gradientTransform = (value, theme) => parseGradient(value, theme != null ? theme : {});
+function isCssVar(value) {
+  return /^var\(--.+\)$/.test(value);
+}
+var analyzeCSSValue = (value) => {
+  const num = parseFloat(value.toString());
+  const unit = value.toString().replace(String(num), "");
+  return { unitless: !unit, value: num, unit };
+};
+var wrap = (str) => (value) => `${str}(${value})`;
+var transformFunctions = {
+  filter(value) {
+    return value !== "auto" ? value : filterTemplate;
+  },
+  backdropFilter(value) {
+    return value !== "auto" ? value : backdropFilterTemplate;
+  },
+  ring(value) {
+    return getRingTemplate(transformFunctions.px(value));
+  },
+  bgClip(value) {
+    return value === "text" ? { color: "transparent", backgroundClip: "text" } : { backgroundClip: value };
+  },
+  transform(value) {
+    if (value === "auto")
+      return getTransformTemplate();
+    if (value === "auto-gpu")
+      return getTransformGpuTemplate();
+    return value;
+  },
+  vh(value) {
+    return value === "$100vh" ? "var(--chakra-vh)" : value;
+  },
+  px(value) {
+    if (value == null)
+      return value;
+    const { unitless } = analyzeCSSValue(value);
+    return unitless || typeof value === "number" ? `${value}px` : value;
+  },
+  fraction(value) {
+    return !(typeof value === "number") || value > 1 ? value : `${value * 100}%`;
+  },
+  float(value, theme) {
+    const map = { left: "right", right: "left" };
+    return theme.direction === "rtl" ? map[value] : value;
+  },
+  degree(value) {
+    if (isCssVar(value) || value == null)
+      return value;
+    const unitless = typeof value === "string" && !value.endsWith("deg");
+    return typeof value === "number" || unitless ? `${value}deg` : value;
+  },
+  gradient: gradientTransform,
+  blur: wrap("blur"),
+  opacity: wrap("opacity"),
+  brightness: wrap("brightness"),
+  contrast: wrap("contrast"),
+  dropShadow: wrap("drop-shadow"),
+  grayscale: wrap("grayscale"),
+  hueRotate: wrap("hue-rotate"),
+  invert: wrap("invert"),
+  saturate: wrap("saturate"),
+  sepia: wrap("sepia"),
+  bgImage(value) {
+    if (value == null)
+      return value;
+    const prevent = isCSSFunction(value) || globalSet.has(value);
+    return !prevent ? `url(${value})` : value;
+  },
+  outline(value) {
+    const isNoneOrZero = String(value) === "0" || String(value) === "none";
+    return value !== null && isNoneOrZero ? { outline: "2px solid transparent", outlineOffset: "2px" } : { outline: value };
+  },
+  flexDirection(value) {
+    var _a2;
+    const { space: space2, divide: divide2 } = (_a2 = flexDirectionTemplate[value]) != null ? _a2 : {};
+    const result = { flexDirection: value };
+    if (space2)
+      result[space2] = 1;
+    if (divide2)
+      result[divide2] = 1;
+    return result;
+  }
+};
+var t = {
+  borderWidths: toConfig("borderWidths"),
+  borderStyles: toConfig("borderStyles"),
+  colors: toConfig("colors"),
+  borders: toConfig("borders"),
+  radii: toConfig("radii", transformFunctions.px),
+  space: toConfig("space", pipe(transformFunctions.vh, transformFunctions.px)),
+  spaceT: toConfig("space", pipe(transformFunctions.vh, transformFunctions.px)),
+  degreeT(property) {
+    return { property, transform: transformFunctions.degree };
+  },
+  prop(property, scale, transform2) {
+    return {
+      property,
+      scale,
+      ...scale && {
+        transform: createTransform({ scale, transform: transform2 })
+      }
+    };
+  },
+  propT(property, transform2) {
+    return { property, transform: transform2 };
+  },
+  sizes: toConfig("sizes", pipe(transformFunctions.vh, transformFunctions.px)),
+  sizesT: toConfig("sizes", pipe(transformFunctions.vh, transformFunctions.fraction)),
+  shadows: toConfig("shadows"),
+  logical,
+  blur: toConfig("blur", transformFunctions.blur)
+};
+var background = {
+  background: t.colors("background"),
+  backgroundColor: t.colors("backgroundColor"),
+  backgroundImage: t.propT("backgroundImage", transformFunctions.bgImage),
+  backgroundSize: true,
+  backgroundPosition: true,
+  backgroundRepeat: true,
+  backgroundAttachment: true,
+  backgroundClip: { transform: transformFunctions.bgClip },
+  bgSize: t.prop("backgroundSize"),
+  bgPosition: t.prop("backgroundPosition"),
+  bg: t.colors("background"),
+  bgColor: t.colors("backgroundColor"),
+  bgPos: t.prop("backgroundPosition"),
+  bgRepeat: t.prop("backgroundRepeat"),
+  bgAttachment: t.prop("backgroundAttachment"),
+  bgGradient: t.propT("backgroundImage", transformFunctions.gradient),
+  bgClip: { transform: transformFunctions.bgClip }
+};
+Object.assign(background, {
+  bgImage: background.backgroundImage,
+  bgImg: background.backgroundImage
+});
+var border = {
+  border: t.borders("border"),
+  borderWidth: t.borderWidths("borderWidth"),
+  borderStyle: t.borderStyles("borderStyle"),
+  borderColor: t.colors("borderColor"),
+  borderRadius: t.radii("borderRadius"),
+  borderTop: t.borders("borderTop"),
+  borderBlockStart: t.borders("borderBlockStart"),
+  borderTopLeftRadius: t.radii("borderTopLeftRadius"),
+  borderStartStartRadius: t.logical({
+    scale: "radii",
+    property: {
+      ltr: "borderTopLeftRadius",
+      rtl: "borderTopRightRadius"
+    }
+  }),
+  borderEndStartRadius: t.logical({
+    scale: "radii",
+    property: {
+      ltr: "borderBottomLeftRadius",
+      rtl: "borderBottomRightRadius"
+    }
+  }),
+  borderTopRightRadius: t.radii("borderTopRightRadius"),
+  borderStartEndRadius: t.logical({
+    scale: "radii",
+    property: {
+      ltr: "borderTopRightRadius",
+      rtl: "borderTopLeftRadius"
+    }
+  }),
+  borderEndEndRadius: t.logical({
+    scale: "radii",
+    property: {
+      ltr: "borderBottomRightRadius",
+      rtl: "borderBottomLeftRadius"
+    }
+  }),
+  borderRight: t.borders("borderRight"),
+  borderInlineEnd: t.borders("borderInlineEnd"),
+  borderBottom: t.borders("borderBottom"),
+  borderBlockEnd: t.borders("borderBlockEnd"),
+  borderBottomLeftRadius: t.radii("borderBottomLeftRadius"),
+  borderBottomRightRadius: t.radii("borderBottomRightRadius"),
+  borderLeft: t.borders("borderLeft"),
+  borderInlineStart: {
+    property: "borderInlineStart",
+    scale: "borders"
+  },
+  borderInlineStartRadius: t.logical({
+    scale: "radii",
+    property: {
+      ltr: ["borderTopLeftRadius", "borderBottomLeftRadius"],
+      rtl: ["borderTopRightRadius", "borderBottomRightRadius"]
+    }
+  }),
+  borderInlineEndRadius: t.logical({
+    scale: "radii",
+    property: {
+      ltr: ["borderTopRightRadius", "borderBottomRightRadius"],
+      rtl: ["borderTopLeftRadius", "borderBottomLeftRadius"]
+    }
+  }),
+  borderX: t.borders(["borderLeft", "borderRight"]),
+  borderInline: t.borders("borderInline"),
+  borderY: t.borders(["borderTop", "borderBottom"]),
+  borderBlock: t.borders("borderBlock"),
+  borderTopWidth: t.borderWidths("borderTopWidth"),
+  borderBlockStartWidth: t.borderWidths("borderBlockStartWidth"),
+  borderTopColor: t.colors("borderTopColor"),
+  borderBlockStartColor: t.colors("borderBlockStartColor"),
+  borderTopStyle: t.borderStyles("borderTopStyle"),
+  borderBlockStartStyle: t.borderStyles("borderBlockStartStyle"),
+  borderBottomWidth: t.borderWidths("borderBottomWidth"),
+  borderBlockEndWidth: t.borderWidths("borderBlockEndWidth"),
+  borderBottomColor: t.colors("borderBottomColor"),
+  borderBlockEndColor: t.colors("borderBlockEndColor"),
+  borderBottomStyle: t.borderStyles("borderBottomStyle"),
+  borderBlockEndStyle: t.borderStyles("borderBlockEndStyle"),
+  borderLeftWidth: t.borderWidths("borderLeftWidth"),
+  borderInlineStartWidth: t.borderWidths("borderInlineStartWidth"),
+  borderLeftColor: t.colors("borderLeftColor"),
+  borderInlineStartColor: t.colors("borderInlineStartColor"),
+  borderLeftStyle: t.borderStyles("borderLeftStyle"),
+  borderInlineStartStyle: t.borderStyles("borderInlineStartStyle"),
+  borderRightWidth: t.borderWidths("borderRightWidth"),
+  borderInlineEndWidth: t.borderWidths("borderInlineEndWidth"),
+  borderRightColor: t.colors("borderRightColor"),
+  borderInlineEndColor: t.colors("borderInlineEndColor"),
+  borderRightStyle: t.borderStyles("borderRightStyle"),
+  borderInlineEndStyle: t.borderStyles("borderInlineEndStyle"),
+  borderTopRadius: t.radii(["borderTopLeftRadius", "borderTopRightRadius"]),
+  borderBottomRadius: t.radii([
+    "borderBottomLeftRadius",
+    "borderBottomRightRadius"
+  ]),
+  borderLeftRadius: t.radii(["borderTopLeftRadius", "borderBottomLeftRadius"]),
+  borderRightRadius: t.radii([
+    "borderTopRightRadius",
+    "borderBottomRightRadius"
+  ])
+};
+Object.assign(border, {
+  rounded: border.borderRadius,
+  roundedTop: border.borderTopRadius,
+  roundedTopLeft: border.borderTopLeftRadius,
+  roundedTopRight: border.borderTopRightRadius,
+  roundedTopStart: border.borderStartStartRadius,
+  roundedTopEnd: border.borderStartEndRadius,
+  roundedBottom: border.borderBottomRadius,
+  roundedBottomLeft: border.borderBottomLeftRadius,
+  roundedBottomRight: border.borderBottomRightRadius,
+  roundedBottomStart: border.borderEndStartRadius,
+  roundedBottomEnd: border.borderEndEndRadius,
+  roundedLeft: border.borderLeftRadius,
+  roundedRight: border.borderRightRadius,
+  roundedStart: border.borderInlineStartRadius,
+  roundedEnd: border.borderInlineEndRadius,
+  borderStart: border.borderInlineStart,
+  borderEnd: border.borderInlineEnd,
+  borderTopStartRadius: border.borderStartStartRadius,
+  borderTopEndRadius: border.borderStartEndRadius,
+  borderBottomStartRadius: border.borderEndStartRadius,
+  borderBottomEndRadius: border.borderEndEndRadius,
+  borderStartRadius: border.borderInlineStartRadius,
+  borderEndRadius: border.borderInlineEndRadius,
+  borderStartWidth: border.borderInlineStartWidth,
+  borderEndWidth: border.borderInlineEndWidth,
+  borderStartColor: border.borderInlineStartColor,
+  borderEndColor: border.borderInlineEndColor,
+  borderStartStyle: border.borderInlineStartStyle,
+  borderEndStyle: border.borderInlineEndStyle
+});
+var color = {
+  color: t.colors("color"),
+  textColor: t.colors("color"),
+  fill: t.colors("fill"),
+  stroke: t.colors("stroke")
+};
+var effect = {
+  boxShadow: t.shadows("boxShadow"),
+  mixBlendMode: true,
+  blendMode: t.prop("mixBlendMode"),
+  backgroundBlendMode: true,
+  bgBlendMode: t.prop("backgroundBlendMode"),
+  opacity: true
+};
+Object.assign(effect, {
+  shadow: effect.boxShadow
+});
+var filter = {
+  filter: { transform: transformFunctions.filter },
+  blur: t.blur("--chakra-blur"),
+  brightness: t.propT("--chakra-brightness", transformFunctions.brightness),
+  contrast: t.propT("--chakra-contrast", transformFunctions.contrast),
+  hueRotate: t.degreeT("--chakra-hue-rotate"),
+  invert: t.propT("--chakra-invert", transformFunctions.invert),
+  saturate: t.propT("--chakra-saturate", transformFunctions.saturate),
+  dropShadow: t.propT("--chakra-drop-shadow", transformFunctions.dropShadow),
+  backdropFilter: { transform: transformFunctions.backdropFilter },
+  backdropBlur: t.blur("--chakra-backdrop-blur"),
+  backdropBrightness: t.propT(
+    "--chakra-backdrop-brightness",
+    transformFunctions.brightness
+  ),
+  backdropContrast: t.propT("--chakra-backdrop-contrast", transformFunctions.contrast),
+  backdropHueRotate: t.degreeT("--chakra-backdrop-hue-rotate"),
+  backdropInvert: t.propT("--chakra-backdrop-invert", transformFunctions.invert),
+  backdropSaturate: t.propT("--chakra-backdrop-saturate", transformFunctions.saturate)
+};
+var flexbox = {
+  alignItems: true,
+  alignContent: true,
+  justifyItems: true,
+  justifyContent: true,
+  flexWrap: true,
+  flexDirection: { transform: transformFunctions.flexDirection },
+  flex: true,
+  flexFlow: true,
+  flexGrow: true,
+  flexShrink: true,
+  flexBasis: t.sizes("flexBasis"),
+  justifySelf: true,
+  alignSelf: true,
+  order: true,
+  placeItems: true,
+  placeContent: true,
+  placeSelf: true,
+  gap: t.space("gap"),
+  rowGap: t.space("rowGap"),
+  columnGap: t.space("columnGap")
+};
+Object.assign(flexbox, {
+  flexDir: flexbox.flexDirection
+});
+var grid = {
+  gridGap: t.space("gridGap"),
+  gridColumnGap: t.space("gridColumnGap"),
+  gridRowGap: t.space("gridRowGap"),
+  gridColumn: true,
+  gridRow: true,
+  gridAutoFlow: true,
+  gridAutoColumns: true,
+  gridColumnStart: true,
+  gridColumnEnd: true,
+  gridRowStart: true,
+  gridRowEnd: true,
+  gridAutoRows: true,
+  gridTemplate: true,
+  gridTemplateColumns: true,
+  gridTemplateRows: true,
+  gridTemplateAreas: true,
+  gridArea: true
+};
+var interactivity = {
+  appearance: true,
+  cursor: true,
+  resize: true,
+  userSelect: true,
+  pointerEvents: true,
+  outline: { transform: transformFunctions.outline },
+  outlineOffset: true,
+  outlineColor: t.colors("outlineColor")
+};
+var layout = {
+  width: t.sizesT("width"),
+  inlineSize: t.sizesT("inlineSize"),
+  height: t.sizes("height"),
+  blockSize: t.sizes("blockSize"),
+  boxSize: t.sizes(["width", "height"]),
+  minWidth: t.sizes("minWidth"),
+  minInlineSize: t.sizes("minInlineSize"),
+  minHeight: t.sizes("minHeight"),
+  minBlockSize: t.sizes("minBlockSize"),
+  maxWidth: t.sizes("maxWidth"),
+  maxInlineSize: t.sizes("maxInlineSize"),
+  maxHeight: t.sizes("maxHeight"),
+  maxBlockSize: t.sizes("maxBlockSize"),
+  overflow: true,
+  overflowX: true,
+  overflowY: true,
+  overscrollBehavior: true,
+  overscrollBehaviorX: true,
+  overscrollBehaviorY: true,
+  display: true,
+  hideFrom: {
+    scale: "breakpoints",
+    transform: (value, theme) => {
+      var _a2, _b, _c;
+      const mq = (_c = (_b = (_a2 = theme.__breakpoints) == null ? void 0 : _a2.get(value)) == null ? void 0 : _b.minWQuery) != null ? _c : `@media screen and (min-width: ${value})`;
+      return { [mq]: { display: "none" } };
+    }
+  },
+  hideBelow: {
+    scale: "breakpoints",
+    transform: (value, theme) => {
+      var _a2, _b, _c;
+      const mq = (_c = (_b = (_a2 = theme.__breakpoints) == null ? void 0 : _a2.get(value)) == null ? void 0 : _b.maxWQuery) != null ? _c : `@media screen and (max-width: ${value})`;
+      return { [mq]: { display: "none" } };
+    }
+  },
+  verticalAlign: true,
+  boxSizing: true,
+  boxDecorationBreak: true,
+  float: t.propT("float", transformFunctions.float),
+  objectFit: true,
+  objectPosition: true,
+  visibility: true,
+  isolation: true
+};
+Object.assign(layout, {
+  w: layout.width,
+  h: layout.height,
+  minW: layout.minWidth,
+  maxW: layout.maxWidth,
+  minH: layout.minHeight,
+  maxH: layout.maxHeight,
+  overscroll: layout.overscrollBehavior,
+  overscrollX: layout.overscrollBehaviorX,
+  overscrollY: layout.overscrollBehaviorY
+});
+var list = {
+  listStyleType: true,
+  listStylePosition: true,
+  listStylePos: t.prop("listStylePosition"),
+  listStyleImage: true,
+  listStyleImg: t.prop("listStyleImage")
+};
+function get(obj, path, fallback, index) {
+  const key = typeof path === "string" ? path.split(".") : [path];
+  for (index = 0; index < key.length; index += 1) {
+    if (!obj)
+      break;
+    obj = obj[key[index]];
+  }
+  return obj === void 0 ? fallback : obj;
+}
+var memoize = (fn) => {
+  const cache = /* @__PURE__ */ new WeakMap();
+  const memoizedFn = (obj, path, fallback, index) => {
+    if (typeof obj === "undefined") {
+      return fn(obj, path, fallback);
+    }
+    if (!cache.has(obj)) {
+      cache.set(obj, /* @__PURE__ */ new Map());
+    }
+    const map = cache.get(obj);
+    if (map.has(path)) {
+      return map.get(path);
+    }
+    const value = fn(obj, path, fallback, index);
+    map.set(path, value);
+    return value;
+  };
+  return memoizedFn;
+};
+var memoizedGet = memoize(get);
+var srOnly = {
+  border: "0px",
+  clip: "rect(0, 0, 0, 0)",
+  width: "1px",
+  height: "1px",
+  margin: "-1px",
+  padding: "0px",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  position: "absolute"
+};
+var srFocusable = {
+  position: "static",
+  width: "auto",
+  height: "auto",
+  clip: "auto",
+  padding: "0",
+  margin: "0",
+  overflow: "visible",
+  whiteSpace: "normal"
+};
+var getWithPriority = (theme, key, styles) => {
+  const result = {};
+  const obj = memoizedGet(theme, key, {});
+  for (const prop in obj) {
+    const isInStyles = prop in styles && styles[prop] != null;
+    if (!isInStyles)
+      result[prop] = obj[prop];
+  }
+  return result;
+};
+var others = {
+  srOnly: {
+    transform(value) {
+      if (value === true)
+        return srOnly;
+      if (value === "focusable")
+        return srFocusable;
+      return {};
+    }
+  },
+  layerStyle: {
+    processResult: true,
+    transform: (value, theme, styles) => getWithPriority(theme, `layerStyles.${value}`, styles)
+  },
+  textStyle: {
+    processResult: true,
+    transform: (value, theme, styles) => getWithPriority(theme, `textStyles.${value}`, styles)
+  },
+  apply: {
+    processResult: true,
+    transform: (value, theme, styles) => getWithPriority(theme, value, styles)
+  }
+};
+var position = {
+  position: true,
+  pos: t.prop("position"),
+  zIndex: t.prop("zIndex", "zIndices"),
+  inset: t.spaceT("inset"),
+  insetX: t.spaceT(["left", "right"]),
+  insetInline: t.spaceT("insetInline"),
+  insetY: t.spaceT(["top", "bottom"]),
+  insetBlock: t.spaceT("insetBlock"),
+  top: t.spaceT("top"),
+  insetBlockStart: t.spaceT("insetBlockStart"),
+  bottom: t.spaceT("bottom"),
+  insetBlockEnd: t.spaceT("insetBlockEnd"),
+  left: t.spaceT("left"),
+  insetInlineStart: t.logical({
+    scale: "space",
+    property: { ltr: "left", rtl: "right" }
+  }),
+  right: t.spaceT("right"),
+  insetInlineEnd: t.logical({
+    scale: "space",
+    property: { ltr: "right", rtl: "left" }
+  })
+};
+Object.assign(position, {
+  insetStart: position.insetInlineStart,
+  insetEnd: position.insetInlineEnd
+});
+var ring = {
+  ring: { transform: transformFunctions.ring },
+  ringColor: t.colors("--chakra-ring-color"),
+  ringOffset: t.prop("--chakra-ring-offset-width"),
+  ringOffsetColor: t.colors("--chakra-ring-offset-color"),
+  ringInset: t.prop("--chakra-ring-inset")
+};
+var space = {
+  margin: t.spaceT("margin"),
+  marginTop: t.spaceT("marginTop"),
+  marginBlockStart: t.spaceT("marginBlockStart"),
+  marginRight: t.spaceT("marginRight"),
+  marginInlineEnd: t.spaceT("marginInlineEnd"),
+  marginBottom: t.spaceT("marginBottom"),
+  marginBlockEnd: t.spaceT("marginBlockEnd"),
+  marginLeft: t.spaceT("marginLeft"),
+  marginInlineStart: t.spaceT("marginInlineStart"),
+  marginX: t.spaceT(["marginInlineStart", "marginInlineEnd"]),
+  marginInline: t.spaceT("marginInline"),
+  marginY: t.spaceT(["marginTop", "marginBottom"]),
+  marginBlock: t.spaceT("marginBlock"),
+  padding: t.space("padding"),
+  paddingTop: t.space("paddingTop"),
+  paddingBlockStart: t.space("paddingBlockStart"),
+  paddingRight: t.space("paddingRight"),
+  paddingBottom: t.space("paddingBottom"),
+  paddingBlockEnd: t.space("paddingBlockEnd"),
+  paddingLeft: t.space("paddingLeft"),
+  paddingInlineStart: t.space("paddingInlineStart"),
+  paddingInlineEnd: t.space("paddingInlineEnd"),
+  paddingX: t.space(["paddingInlineStart", "paddingInlineEnd"]),
+  paddingInline: t.space("paddingInline"),
+  paddingY: t.space(["paddingTop", "paddingBottom"]),
+  paddingBlock: t.space("paddingBlock")
+};
+Object.assign(space, {
+  m: space.margin,
+  mt: space.marginTop,
+  mr: space.marginRight,
+  me: space.marginInlineEnd,
+  marginEnd: space.marginInlineEnd,
+  mb: space.marginBottom,
+  ml: space.marginLeft,
+  ms: space.marginInlineStart,
+  marginStart: space.marginInlineStart,
+  mx: space.marginX,
+  my: space.marginY,
+  p: space.padding,
+  pt: space.paddingTop,
+  py: space.paddingY,
+  px: space.paddingX,
+  pb: space.paddingBottom,
+  pl: space.paddingLeft,
+  ps: space.paddingInlineStart,
+  paddingStart: space.paddingInlineStart,
+  pr: space.paddingRight,
+  pe: space.paddingInlineEnd,
+  paddingEnd: space.paddingInlineEnd
+});
+var textDecoration = {
+  textDecorationColor: t.colors("textDecorationColor"),
+  textDecoration: true,
+  textDecor: { property: "textDecoration" },
+  textDecorationLine: true,
+  textDecorationStyle: true,
+  textDecorationThickness: true,
+  textUnderlineOffset: true,
+  textShadow: t.shadows("textShadow")
+};
+var transform = {
+  clipPath: true,
+  transform: t.propT("transform", transformFunctions.transform),
+  transformOrigin: true,
+  translateX: t.spaceT("--chakra-translate-x"),
+  translateY: t.spaceT("--chakra-translate-y"),
+  skewX: t.degreeT("--chakra-skew-x"),
+  skewY: t.degreeT("--chakra-skew-y"),
+  scaleX: t.prop("--chakra-scale-x"),
+  scaleY: t.prop("--chakra-scale-y"),
+  scale: t.prop(["--chakra-scale-x", "--chakra-scale-y"]),
+  rotate: t.degreeT("--chakra-rotate")
+};
+var transition = {
+  transition: true,
+  transitionDelay: true,
+  animation: true,
+  willChange: true,
+  transitionDuration: t.prop("transitionDuration", "transition.duration"),
+  transitionProperty: t.prop("transitionProperty", "transition.property"),
+  transitionTimingFunction: t.prop(
+    "transitionTimingFunction",
+    "transition.easing"
+  )
+};
+var typography = {
+  fontFamily: t.prop("fontFamily", "fonts"),
+  fontSize: t.prop("fontSize", "fontSizes", transformFunctions.px),
+  fontWeight: t.prop("fontWeight", "fontWeights"),
+  lineHeight: t.prop("lineHeight", "lineHeights"),
+  letterSpacing: t.prop("letterSpacing", "letterSpacings"),
+  textAlign: true,
+  fontStyle: true,
+  textIndent: true,
+  wordBreak: true,
+  overflowWrap: true,
+  textOverflow: true,
+  textTransform: true,
+  whiteSpace: true,
+  isTruncated: {
+    transform(value) {
+      if (value === true) {
+        return {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        };
+      }
+    }
+  },
+  noOfLines: {
+    static: {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      display: "-webkit-box",
+      WebkitBoxOrient: "vertical",
+      WebkitLineClamp: "var(--chakra-line-clamp)"
+    },
+    property: "--chakra-line-clamp"
+  }
+};
+var scroll = {
+  scrollBehavior: true,
+  scrollSnapAlign: true,
+  scrollSnapStop: true,
+  scrollSnapType: true,
+  scrollMargin: t.spaceT("scrollMargin"),
+  scrollMarginTop: t.spaceT("scrollMarginTop"),
+  scrollMarginBottom: t.spaceT("scrollMarginBottom"),
+  scrollMarginLeft: t.spaceT("scrollMarginLeft"),
+  scrollMarginRight: t.spaceT("scrollMarginRight"),
+  scrollMarginX: t.spaceT(["scrollMarginLeft", "scrollMarginRight"]),
+  scrollMarginY: t.spaceT(["scrollMarginTop", "scrollMarginBottom"]),
+  scrollPadding: t.spaceT("scrollPadding"),
+  scrollPaddingTop: t.spaceT("scrollPaddingTop"),
+  scrollPaddingBottom: t.spaceT("scrollPaddingBottom"),
+  scrollPaddingLeft: t.spaceT("scrollPaddingLeft"),
+  scrollPaddingRight: t.spaceT("scrollPaddingRight"),
+  scrollPaddingX: t.spaceT(["scrollPaddingLeft", "scrollPaddingRight"]),
+  scrollPaddingY: t.spaceT(["scrollPaddingTop", "scrollPaddingBottom"])
+};
+function resolveReference(operand) {
+  if (isObject(operand) && operand.reference) {
+    return operand.reference;
+  }
+  return String(operand);
+}
+var toExpression = (operator, ...operands) => operands.map(resolveReference).join(` ${operator} `).replace(/calc/g, "");
+var add = (...operands) => `calc(${toExpression("+", ...operands)})`;
+var subtract = (...operands) => `calc(${toExpression("-", ...operands)})`;
+var multiply = (...operands) => `calc(${toExpression("*", ...operands)})`;
+var divide = (...operands) => `calc(${toExpression("/", ...operands)})`;
+var negate = (x) => {
+  const value = resolveReference(x);
+  if (value != null && !Number.isNaN(parseFloat(value))) {
+    return String(value).startsWith("-") ? String(value).slice(1) : `-${value}`;
+  }
+  return multiply(value, -1);
+};
+var calc = Object.assign(
+  (x) => ({
+    add: (...operands) => calc(add(x, ...operands)),
+    subtract: (...operands) => calc(subtract(x, ...operands)),
+    multiply: (...operands) => calc(multiply(x, ...operands)),
+    divide: (...operands) => calc(divide(x, ...operands)),
+    negate: () => calc(negate(x)),
+    toString: () => x.toString()
+  }),
+  {
+    add,
+    subtract,
+    multiply,
+    divide,
+    negate
+  }
+);
+function analyzeCSSValue2(value) {
+  const num = parseFloat(value.toString());
+  const unit = value.toString().replace(String(num), "");
+  return { unitless: !unit, value: num, unit };
+}
+function px(value) {
+  if (value == null)
+    return value;
+  const { unitless } = analyzeCSSValue2(value);
+  return unitless || typeof value === "number" ? `${value}px` : value;
+}
+function toMediaQueryString(min, max) {
+  const query = ["@media screen"];
+  if (min)
+    query.push("and", `(min-width: ${px(min)})`);
+  if (max)
+    query.push("and", `(max-width: ${px(max)})`);
+  return query.join(" ");
+}
+var state = {
+  hover: (str, post) => `${str}:hover ${post}, ${str}[data-hover] ${post}`,
+  focus: (str, post) => `${str}:focus ${post}, ${str}[data-focus] ${post}`,
+  focusVisible: (str, post) => `${str}:focus-visible ${post}`,
+  focusWithin: (str, post) => `${str}:focus-within ${post}`,
+  active: (str, post) => `${str}:active ${post}, ${str}[data-active] ${post}`,
+  disabled: (str, post) => `${str}:disabled ${post}, ${str}[data-disabled] ${post}`,
+  invalid: (str, post) => `${str}:invalid ${post}, ${str}[data-invalid] ${post}`,
+  checked: (str, post) => `${str}:checked ${post}, ${str}[data-checked] ${post}`,
+  indeterminate: (str, post) => `${str}:indeterminate ${post}, ${str}[aria-checked=mixed] ${post}, ${str}[data-indeterminate] ${post}`,
+  readOnly: (str, post) => `${str}:read-only ${post}, ${str}[readonly] ${post}, ${str}[data-read-only] ${post}`,
+  expanded: (str, post) => `${str}:read-only ${post}, ${str}[aria-expanded=true] ${post}, ${str}[data-expanded] ${post}`,
+  placeholderShown: (str, post) => `${str}:placeholder-shown ${post}`
+};
+var toGroup = (fn) => merge((v) => fn(v, "&"), "[role=group]", "[data-group]", ".group");
+var toPeer = (fn) => merge((v) => fn(v, "~ &"), "[data-peer]", ".peer");
+var merge = (fn, ...selectors) => selectors.map(fn).join(", ");
+var pseudoSelectors = {
+  _hover: "&:hover, &[data-hover]",
+  _active: "&:active, &[data-active]",
+  _focus: "&:focus, &[data-focus]",
+  _highlighted: "&[data-highlighted]",
+  _focusWithin: "&:focus-within",
+  _focusVisible: "&:focus-visible, &[data-focus-visible]",
+  _disabled: "&:disabled, &[disabled], &[aria-disabled=true], &[data-disabled]",
+  _readOnly: "&[aria-readonly=true], &[readonly], &[data-readonly]",
+  _before: "&::before",
+  _after: "&::after",
+  _empty: "&:empty",
+  _expanded: "&[aria-expanded=true], &[data-expanded]",
+  _checked: "&[aria-checked=true], &[data-checked]",
+  _grabbed: "&[aria-grabbed=true], &[data-grabbed]",
+  _pressed: "&[aria-pressed=true], &[data-pressed]",
+  _invalid: "&[aria-invalid=true], &[data-invalid]",
+  _valid: "&[data-valid], &[data-state=valid]",
+  _loading: "&[data-loading], &[aria-busy=true]",
+  _selected: "&[aria-selected=true], &[data-selected]",
+  _hidden: "&[hidden], &[data-hidden]",
+  _autofill: "&:-webkit-autofill",
+  _even: "&:nth-of-type(even)",
+  _odd: "&:nth-of-type(odd)",
+  _first: "&:first-of-type",
+  _firstLetter: "&::first-letter",
+  _last: "&:last-of-type",
+  _notFirst: "&:not(:first-of-type)",
+  _notLast: "&:not(:last-of-type)",
+  _visited: "&:visited",
+  _activeLink: "&[aria-current=page]",
+  _activeStep: "&[aria-current=step]",
+  _indeterminate: "&:indeterminate, &[aria-checked=mixed], &[data-indeterminate]",
+  _groupHover: toGroup(state.hover),
+  _peerHover: toPeer(state.hover),
+  _groupFocus: toGroup(state.focus),
+  _peerFocus: toPeer(state.focus),
+  _groupFocusVisible: toGroup(state.focusVisible),
+  _peerFocusVisible: toPeer(state.focusVisible),
+  _groupActive: toGroup(state.active),
+  _peerActive: toPeer(state.active),
+  _groupDisabled: toGroup(state.disabled),
+  _peerDisabled: toPeer(state.disabled),
+  _groupInvalid: toGroup(state.invalid),
+  _peerInvalid: toPeer(state.invalid),
+  _groupChecked: toGroup(state.checked),
+  _peerChecked: toPeer(state.checked),
+  _groupFocusWithin: toGroup(state.focusWithin),
+  _peerFocusWithin: toPeer(state.focusWithin),
+  _peerPlaceholderShown: toPeer(state.placeholderShown),
+  _placeholder: "&::placeholder",
+  _placeholderShown: "&:placeholder-shown",
+  _fullScreen: "&:fullscreen",
+  _selection: "&::selection",
+  _rtl: "[dir=rtl] &, &[dir=rtl]",
+  _ltr: "[dir=ltr] &, &[dir=ltr]",
+  _mediaDark: "@media (prefers-color-scheme: dark)",
+  _mediaReduceMotion: "@media (prefers-reduced-motion: reduce)",
+  _dark: ".chakra-ui-dark &:not([data-theme]),[data-theme=dark] &:not([data-theme]),&[data-theme=dark]",
+  _light: ".chakra-ui-light &:not([data-theme]),[data-theme=light] &:not([data-theme]),&[data-theme=light]"
+};
+var pseudoPropNames = Object.keys(
+  pseudoSelectors
+);
+var systemProps = (0, import_lodash3.default)(
+  {},
+  background,
+  border,
+  color,
+  flexbox,
+  layout,
+  filter,
+  ring,
+  interactivity,
+  grid,
+  others,
+  position,
+  effect,
+  space,
+  scroll,
+  typography,
+  textDecoration,
+  transform,
+  list,
+  transition
+);
+Object.assign({}, space, layout, flexbox, grid, position);
+var propNames = [...Object.keys(systemProps), ...pseudoPropNames];
+var styleProps = { ...systemProps, ...pseudoSelectors };
+var isStyleProp = (prop) => prop in styleProps;
+var expandResponsive = (styles) => (theme) => {
+  if (!theme.__breakpoints)
+    return styles;
+  const { isResponsive, toArrayValue, media: medias } = theme.__breakpoints;
+  const computedStyles = {};
+  for (const key in styles) {
+    let value = runIfFn(styles[key], theme);
+    if (value == null)
+      continue;
+    value = isObject(value) && isResponsive(value) ? toArrayValue(value) : value;
+    if (!Array.isArray(value)) {
+      computedStyles[key] = value;
+      continue;
+    }
+    const queries = value.slice(0, medias.length).length;
+    for (let index = 0; index < queries; index += 1) {
+      const media = medias == null ? void 0 : medias[index];
+      if (!media) {
+        computedStyles[key] = value[index];
+        continue;
+      }
+      computedStyles[media] = computedStyles[media] || {};
+      if (value[index] == null) {
+        continue;
+      }
+      computedStyles[media][key] = value[index];
+    }
+  }
+  return computedStyles;
+};
+function splitByComma(value) {
+  const chunks = [];
+  let chunk = "";
+  let inParens = false;
+  for (let i = 0; i < value.length; i++) {
+    const char = value[i];
+    if (char === "(") {
+      inParens = true;
+      chunk += char;
+    } else if (char === ")") {
+      inParens = false;
+      chunk += char;
+    } else if (char === "," && !inParens) {
+      chunks.push(chunk);
+      chunk = "";
+    } else {
+      chunk += char;
+    }
+  }
+  chunk = chunk.trim();
+  if (chunk) {
+    chunks.push(chunk);
+  }
+  return chunks;
+}
+function isCssVar2(value) {
+  return /^var\(--.+\)$/.test(value);
+}
+var isCSSVariableTokenValue = (key, value) => key.startsWith("--") && typeof value === "string" && !isCssVar2(value);
+var resolveTokenValue = (theme, value) => {
+  var _a2, _b;
+  if (value == null)
+    return value;
+  const getVar = (val) => {
+    var _a22, _b2;
+    return (_b2 = (_a22 = theme.__cssMap) == null ? void 0 : _a22[val]) == null ? void 0 : _b2.varRef;
+  };
+  const getValue = (val) => {
+    var _a22;
+    return (_a22 = getVar(val)) != null ? _a22 : val;
+  };
+  const [tokenValue, fallbackValue] = splitByComma(value);
+  value = (_b = (_a2 = getVar(tokenValue)) != null ? _a2 : getValue(fallbackValue)) != null ? _b : getValue(value);
+  return value;
+};
+function getCss(options) {
+  const { configs = {}, pseudos = {}, theme } = options;
+  const css2 = (stylesOrFn, nested = false) => {
+    var _a2, _b, _c;
+    const _styles = runIfFn(stylesOrFn, theme);
+    const styles = expandResponsive(_styles)(theme);
+    let computedStyles = {};
+    for (let key in styles) {
+      const valueOrFn = styles[key];
+      let value = runIfFn(valueOrFn, theme);
+      if (key in pseudos) {
+        key = pseudos[key];
+      }
+      if (isCSSVariableTokenValue(key, value)) {
+        value = resolveTokenValue(theme, value);
+      }
+      let config = configs[key];
+      if (config === true) {
+        config = { property: key };
+      }
+      if (isObject(value)) {
+        computedStyles[key] = (_a2 = computedStyles[key]) != null ? _a2 : {};
+        computedStyles[key] = (0, import_lodash2.default)(
+          {},
+          computedStyles[key],
+          css2(value, true)
+        );
+        continue;
+      }
+      let rawValue = (_c = (_b = config == null ? void 0 : config.transform) == null ? void 0 : _b.call(config, value, theme, _styles)) != null ? _c : value;
+      rawValue = (config == null ? void 0 : config.processResult) ? css2(rawValue, true) : rawValue;
+      const configProperty = runIfFn(config == null ? void 0 : config.property, theme);
+      if (!nested && (config == null ? void 0 : config.static)) {
+        const staticStyles = runIfFn(config.static, theme);
+        computedStyles = (0, import_lodash2.default)({}, computedStyles, staticStyles);
+      }
+      if (configProperty && Array.isArray(configProperty)) {
+        for (const property of configProperty) {
+          computedStyles[property] = rawValue;
+        }
+        continue;
+      }
+      if (configProperty) {
+        if (configProperty === "&" && isObject(rawValue)) {
+          computedStyles = (0, import_lodash2.default)({}, computedStyles, rawValue);
+        } else {
+          computedStyles[configProperty] = rawValue;
+        }
+        continue;
+      }
+      if (isObject(rawValue)) {
+        computedStyles = (0, import_lodash2.default)({}, computedStyles, rawValue);
+        continue;
+      }
+      computedStyles[key] = rawValue;
+    }
+    return computedStyles;
+  };
+  return css2;
+}
+var css = (styles) => (theme) => {
+  const cssFn = getCss({
+    theme,
+    pseudos: pseudoSelectors,
+    configs: systemProps
+  });
+  return cssFn(styles);
+};
+function normalize2(value, toArray) {
+  if (Array.isArray(value))
+    return value;
+  if (isObject(value))
+    return toArray(value);
+  if (value != null)
+    return [value];
+}
+function getNextIndex(values, i) {
+  for (let j = i + 1; j < values.length; j++) {
+    if (values[j] != null)
+      return j;
+  }
+  return -1;
+}
+function createResolver(theme) {
+  const breakpointUtil = theme.__breakpoints;
+  return function resolver(config, prop, value, props) {
+    var _a2, _b;
+    if (!breakpointUtil)
+      return;
+    const result = {};
+    const normalized = normalize2(value, breakpointUtil.toArrayValue);
+    if (!normalized)
+      return result;
+    const len = normalized.length;
+    const isSingle = len === 1;
+    const isMultipart = !!config.parts;
+    for (let i = 0; i < len; i++) {
+      const key = breakpointUtil.details[i];
+      const nextKey = breakpointUtil.details[getNextIndex(normalized, i)];
+      const query = toMediaQueryString(key.minW, nextKey == null ? void 0 : nextKey._minW);
+      const styles = runIfFn((_a2 = config[prop]) == null ? void 0 : _a2[normalized[i]], props);
+      if (!styles)
+        continue;
+      if (isMultipart) {
+        (_b = config.parts) == null ? void 0 : _b.forEach((part) => {
+          (0, import_lodash4.default)(result, {
+            [part]: isSingle ? styles[part] : { [query]: styles[part] }
+          });
+        });
+        continue;
+      }
+      if (!isMultipart) {
+        if (isSingle)
+          (0, import_lodash4.default)(result, styles);
+        else
+          result[query] = styles;
+        continue;
+      }
+      result[query] = styles;
+    }
+    return result;
+  };
+}
+function resolveStyleConfig(config) {
+  return (props) => {
+    var _a2;
+    const { variant, size, theme } = props;
+    const recipe = createResolver(theme);
+    return (0, import_lodash4.default)(
+      {},
+      runIfFn((_a2 = config.baseStyle) != null ? _a2 : {}, props),
+      recipe(config, "sizes", size, props),
+      recipe(config, "variants", variant, props)
+    );
+  };
+}
+
+// ../../node_modules/@chakra-ui/system/dist/chunk-T2VHL7RE.mjs
+var import_react_fast_compare = __toESM(require_react_fast_compare(), 1);
+function useStyleConfigImpl(themeKey, props = {}) {
+  var _a2;
+  const { styleConfig: styleConfigProp, ...rest } = props;
+  const { theme, colorMode } = useChakra();
+  const themeStyleConfig = themeKey ? utils.memoizedGet(theme, `components.${themeKey}`) : void 0;
+  const styleConfig = styleConfigProp || themeStyleConfig;
+  const mergedProps = utils.mergeWith(
+    { theme, colorMode },
+    (_a2 = styleConfig == null ? void 0 : styleConfig.defaultProps) != null ? _a2 : {},
+    utils.filterUndefined(utils.omit(rest, ["children"]))
+  );
+  const stylesRef = React12.useRef({});
+  if (styleConfig) {
+    const getStyles = resolveStyleConfig(styleConfig);
+    const styles = getStyles(mergedProps);
+    const isStyleEqual = (0, import_react_fast_compare.default)(stylesRef.current, styles);
+    if (!isStyleEqual) {
+      stylesRef.current = styles;
+    }
+  }
+  return stylesRef.current;
+}
+function useStyleConfig(themeKey, props = {}) {
+  return useStyleConfigImpl(themeKey, props);
+}
+
+// ../../node_modules/@chakra-ui/system/dist/chunk-NAGWYFCH.mjs
+var allPropNames = /* @__PURE__ */ new Set([
+  ...propNames,
+  "textStyle",
+  "layerStyle",
+  "apply",
+  "noOfLines",
+  "focusBorderColor",
+  "errorBorderColor",
+  "as",
+  "__css",
+  "css",
+  "sx"
+]);
+var validHTMLProps = /* @__PURE__ */ new Set([
+  "htmlWidth",
+  "htmlHeight",
+  "htmlSize",
+  "htmlTranslate"
+]);
+function shouldForwardProp(prop) {
+  return validHTMLProps.has(prop) || !allPropNames.has(prop);
+}
 
-// src/display-field.tsx
-var DisplayField = ({
-  name,
-  label,
-  placeholder,
-  ...props
-}) => {
-  return /* @__PURE__ */ React8__namespace.createElement(react.FormControl, {
-    ...props
-  }, label ? /* @__PURE__ */ React8__namespace.createElement(react.FormLabel, {
-    htmlFor: name
-  }, label) : null, /* @__PURE__ */ React8__namespace.createElement(react.Text, {
-    fontSize: "md"
-  }, /* @__PURE__ */ React8__namespace.createElement(FormValue, {
-    name
-  })));
-};
-if (utils.__DEV__) {
-  DisplayField.displayName = "DisplayField";
+// ../../node_modules/@chakra-ui/object-utils/dist/index.mjs
+function assignAfter(target, ...sources) {
+  if (target == null) {
+    throw new TypeError("Cannot convert undefined or null to object");
+  }
+  const result = { ...target };
+  for (const nextSource of sources) {
+    if (nextSource == null)
+      continue;
+    for (const nextKey in nextSource) {
+      if (!Object.prototype.hasOwnProperty.call(nextSource, nextKey))
+        continue;
+      if (nextKey in result)
+        delete result[nextKey];
+      result[nextKey] = nextSource[nextKey];
+    }
+  }
+  return result;
 }
-var FormValue = ({ name }) => {
-  const { getValues } = reactHookForm.useFormContext();
-  return getValues(name) || null;
+var _a;
+var emotion_styled = (_a = createStyled__default.default.default) != null ? _a : createStyled__default.default;
+var toCSSObject = ({ baseStyle }) => (props) => {
+  const { theme, css: cssProp, __css, sx, ...rest } = props;
+  const styleProps2 = utils.objectFilter(rest, (_, prop) => isStyleProp(prop));
+  const finalBaseStyle = utils.runIfFn(baseStyle, props);
+  const finalStyles = assignAfter(
+    {},
+    __css,
+    finalBaseStyle,
+    utils.filterUndefined(styleProps2),
+    sx
+  );
+  const computedCSS = css(finalStyles)(props.theme);
+  return cssProp ? [computedCSS, cssProp] : computedCSS;
 };
-if (utils.__DEV__) {
-  FormValue.displayName = "FormValue";
+function styled(component, options) {
+  const { baseStyle, ...styledOptions } = options != null ? options : {};
+  if (!styledOptions.shouldForwardProp) {
+    styledOptions.shouldForwardProp = shouldForwardProp;
+  }
+  const styleObject = toCSSObject({ baseStyle });
+  const Component = emotion_styled(
+    component,
+    styledOptions
+  )(styleObject);
+  const chakraComponent = React12__namespace.default.forwardRef(function ChakraComponent(props, ref) {
+    const { colorMode, forced } = useColorMode();
+    return React12__namespace.default.createElement(Component, {
+      ref,
+      "data-theme": forced ? colorMode : void 0,
+      ...props
+    });
+  });
+  return chakraComponent;
 }
-var NumberInput = react.forwardRef((props, ref) => {
-  const { hideStepper, incrementIcon, decrementIcon, ...rest } = props;
-  return /* @__PURE__ */ React8__namespace.createElement(react.NumberInput, {
-    ...rest,
-    ref
-  }, /* @__PURE__ */ React8__namespace.createElement(react.NumberInputField, null), !hideStepper && /* @__PURE__ */ React8__namespace.createElement(react.NumberInputStepper, null, /* @__PURE__ */ React8__namespace.createElement(react.NumberIncrementStepper, {
-    children: incrementIcon
-  }), /* @__PURE__ */ React8__namespace.createElement(react.NumberDecrementStepper, {
-    children: decrementIcon
-  })));
-});
-NumberInput.defaultProps = {
-  hideStepper: false
+
+// ../../node_modules/@chakra-ui/system/dist/chunk-3LE6AY5Q.mjs
+function factory() {
+  const cache = /* @__PURE__ */ new Map();
+  return new Proxy(styled, {
+    apply(target, thisArg, argArray) {
+      return styled(...argArray);
+    },
+    get(_, element) {
+      if (!cache.has(element)) {
+        cache.set(element, styled(element));
+      }
+      return cache.get(element);
+    }
+  });
+}
+var chakra = factory();
+function forwardRef2(component) {
+  return React12.forwardRef(component);
+}
+var fallbackIcon = {
+  path: /* @__PURE__ */ jsxRuntime.jsxs("g", { stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        strokeLinecap: "round",
+        fill: "none",
+        d: "M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "currentColor",
+        strokeLinecap: "round",
+        d: "M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { fill: "none", strokeMiterlimit: "10", cx: "12", cy: "12", r: "11.25" })
+  ] }),
+  viewBox: "0 0 24 24"
 };
-if (utils.__DEV__) {
-  NumberInput.displayName = "NumberInput";
+var Icon = forwardRef2((props, ref) => {
+  const {
+    as: element,
+    viewBox,
+    color: color2 = "currentColor",
+    focusable = false,
+    children,
+    className,
+    __css,
+    ...rest
+  } = props;
+  const _className = cx("chakra-icon", className);
+  const customStyles = useStyleConfig("Icon", props);
+  const styles = {
+    w: "1em",
+    h: "1em",
+    display: "inline-block",
+    lineHeight: "1em",
+    flexShrink: 0,
+    color: color2,
+    ...__css,
+    ...customStyles
+  };
+  const shared = {
+    ref,
+    focusable,
+    className: _className,
+    __css: styles
+  };
+  const _viewBox = viewBox != null ? viewBox : fallbackIcon.viewBox;
+  if (element && typeof element !== "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx(chakra.svg, { as: element, ...shared, ...rest });
+  }
+  const _path = children != null ? children : fallbackIcon.path;
+  return /* @__PURE__ */ jsxRuntime.jsx(chakra.svg, { verticalAlign: "middle", viewBox: _viewBox, ...shared, ...rest, children: _path });
+});
+Icon.displayName = "Icon";
+function createIcon(options) {
+  const {
+    viewBox = "0 0 24 24",
+    d: pathDefinition,
+    displayName,
+    defaultProps = {}
+  } = options;
+  const path = React12.Children.toArray(options.path);
+  const Comp = forwardRef2((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Icon, { ref, viewBox, ...defaultProps, ...props, children: path.length ? path : /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "currentColor", d: pathDefinition }) }));
+  Comp.displayName = displayName;
+  return Comp;
 }
+var ViewOffIcon = createIcon({
+  displayName: "ViewOffIcon",
+  path: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "currentColor", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M23.2,10.549a20.954,20.954,0,0,0-4.3-3.6l4-3.995a1,1,0,1,0-1.414-1.414l-.018.018a.737.737,0,0,1-.173.291l-19.5,19.5c-.008.007-.018.009-.026.017a1,1,0,0,0,1.631,1.088l4.146-4.146a11.26,11.26,0,0,0,4.31.939h.3c4.256,0,8.489-2.984,11.051-5.8A2.171,2.171,0,0,0,23.2,10.549ZM16.313,13.27a4.581,4.581,0,0,1-3,3.028,4.3,4.3,0,0,1-3.1-.19.253.253,0,0,1-.068-.407l5.56-5.559a.252.252,0,0,1,.407.067A4.3,4.3,0,0,1,16.313,13.27Z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.615,13.4a.244.244,0,0,0,.061-.24A4.315,4.315,0,0,1,7.5,12,4.5,4.5,0,0,1,12,7.5a4.276,4.276,0,0,1,1.16.173.244.244,0,0,0,.24-.062l1.941-1.942a.254.254,0,0,0-.1-.421A10.413,10.413,0,0,0,12,4.75C7.7,4.692,3.4,7.7.813,10.549a2.15,2.15,0,0,0-.007,2.9,21.209,21.209,0,0,0,3.438,3.03.256.256,0,0,0,.326-.029Z" })
+  ] })
+});
+var ViewIcon = createIcon({
+  displayName: "ViewIcon",
+  path: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "currentColor", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M23.432,10.524C20.787,7.614,16.4,4.538,12,4.6,7.6,4.537,3.213,7.615.568,10.524a2.211,2.211,0,0,0,0,2.948C3.182,16.351,7.507,19.4,11.839,19.4h.308c4.347,0,8.671-3.049,11.288-5.929A2.21,2.21,0,0,0,23.432,10.524ZM7.4,12A4.6,4.6,0,1,1,12,16.6,4.6,4.6,0,0,1,7.4,12Z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "2" })
+  ] })
+});
+var MinusIcon = createIcon({
+  displayName: "MinusIcon",
+  path: /* @__PURE__ */ jsxRuntime.jsx("g", { fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { height: "4", width: "20", x: "2", y: "10" }) })
+});
+
+// ../../node_modules/@chakra-ui/icons/dist/chunk-VJ54TX72.mjs
+var AddIcon = createIcon({
+  d: "M0,12a1.5,1.5,0,0,0,1.5,1.5h8.75a.25.25,0,0,1,.25.25V22.5a1.5,1.5,0,0,0,3,0V13.75a.25.25,0,0,1,.25-.25H22.5a1.5,1.5,0,0,0,0-3H13.75a.25.25,0,0,1-.25-.25V1.5a1.5,1.5,0,0,0-3,0v8.75a.25.25,0,0,1-.25.25H1.5A1.5,1.5,0,0,0,0,12Z",
+  displayName: "AddIcon"
+});
 var InputRightButton = react.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ React8__namespace.createElement(react.InputRightElement, {
-      w: "auto",
-      px: "1",
-      py: "1",
-      alignItems: "stretch"
-    }, /* @__PURE__ */ React8__namespace.createElement(react.Button, {
-      ref,
-      height: "auto",
-      ...props
-    }));
+    return /* @__PURE__ */ jsxRuntime.jsx(react.InputRightElement, { w: "auto", px: "1", py: "1", alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsx(react.Button, { ref, height: "auto", ...props }) });
   }
 );
 InputRightButton.id = "InputRightElement";
 InputRightButton.displayName = "InputRightButton";
-
-// src/password-input/password-input.tsx
 var PasswordInput = react.forwardRef(
   (props, ref) => {
     const {
@@ -99,62 +2438,89 @@ var PasswordInput = react.forwardRef(
       width,
       size,
       variant,
+      leftAddon,
       ...inputProps
     } = props;
-    const [show, setShow] = React8.useState(false);
+    const [show, setShow] = React12.useState(false);
     const handleClick = () => setShow(!show);
     const label = show ? "Hide password" : "Show password";
     let icon;
     if (show) {
-      icon = viewIcon || /* @__PURE__ */ React8.createElement(icons.ViewIcon, null);
+      icon = viewIcon || /* @__PURE__ */ jsxRuntime.jsx(ViewIcon, {});
     } else {
-      icon = viewOffIcon || /* @__PURE__ */ React8.createElement(icons.ViewOffIcon, null);
+      icon = viewOffIcon || /* @__PURE__ */ jsxRuntime.jsx(ViewOffIcon, {});
     }
     const groupProps = {
       width: w || width,
       size,
       variant
     };
-    return /* @__PURE__ */ React8.createElement(react.InputGroup, {
-      ...groupProps
-    }, /* @__PURE__ */ React8.createElement(react.Input, {
-      ...inputProps,
-      ref,
-      type: show ? "text" : "password",
-      autoComplete: show ? "off" : autoComplete
-    }), /* @__PURE__ */ React8.createElement(InputRightButton, {
-      onClick: handleClick,
-      "aria-label": label,
-      variant: "ghost"
-    }, icon));
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.InputGroup, { ...groupProps, children: [
+      leftAddon,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react.Input,
+        {
+          ...inputProps,
+          ref,
+          type: show ? "text" : "password",
+          autoComplete: show ? "off" : autoComplete
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InputRightButton,
+        {
+          onClick: handleClick,
+          "aria-label": label,
+          variant: "ghost",
+          children: icon
+        }
+      )
+    ] });
   }
 );
-if (utils.__DEV__) {
-  PasswordInput.displayName = "PasswordInput";
-}
+PasswordInput.displayName = "PasswordInput";
+var mapNestedFields = (name, children) => {
+  return React12__namespace.Children.map(children, (child) => {
+    if (React12__namespace.isValidElement(child) && child.props.name) {
+      return React12__namespace.cloneElement(child, {
+        ...child.props,
+        name: `${name}.${child.props.name}`
+      });
+    }
+    return child;
+  });
+};
+var mapOptions = (options) => {
+  return options.map((option) => {
+    if (typeof option === "string") {
+      return {
+        label: option,
+        value: option
+      };
+    }
+    return option;
+  });
+};
 var RadioInput = react.forwardRef(
-  ({ options, spacing, direction, ...props }, ref) => {
+  ({ options: optionsProp, spacing, direction, ...props }, ref) => {
     const { onBlur, onChange, ...groupProps } = props;
-    return /* @__PURE__ */ React8__namespace.createElement(react.RadioGroup, {
-      onChange,
-      ...groupProps
-    }, /* @__PURE__ */ React8__namespace.createElement(react.Stack, {
-      spacing,
-      direction
-    }, options.map(({ value, label, ...radioProps }, i) => {
-      return /* @__PURE__ */ React8__namespace.createElement(react.Radio, {
-        key: i,
-        onBlur,
-        value,
-        ref,
-        ...radioProps
-      }, label || value);
-    })));
+    const options = mapOptions(optionsProp);
+    return /* @__PURE__ */ jsxRuntime.jsx(react.RadioGroup, { onChange, ...groupProps, children: /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { spacing, direction, children: options.map(({ value, label, ...radioProps }, i) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        react.Radio,
+        {
+          onBlur,
+          value,
+          ref,
+          ...radioProps,
+          children: label || value
+        },
+        i
+      );
+    }) }) });
   }
 );
-if (utils.__DEV__) {
-  RadioInput.displayName = "RadioInput";
-}
+RadioInput.displayName = "RadioInput";
 var SelectButton = react.forwardRef((props, ref) => {
   const styles = react.useMultiStyleConfig("Input", props);
   const focusStyles = styles.field._focusVisible;
@@ -172,20 +2538,13 @@ var SelectButton = react.forwardRef((props, ref) => {
     ...styles.field,
     h: "auto"
   };
-  return /* @__PURE__ */ React8__namespace.createElement(react.MenuButton, {
-    as: react.Button,
-    ...props,
-    ref,
-    sx: buttonStyles
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.MenuButton, { as: react.Button, ...props, ref, sx: buttonStyles });
 });
-if (utils.__DEV__) {
-  SelectButton.displayName = "SelectButton";
-}
+SelectButton.displayName = "SelectButton";
 var Select = react.forwardRef((props, ref) => {
   const {
     name,
-    options,
+    options: optionsProp,
     children,
     onChange,
     defaultValue,
@@ -193,7 +2552,7 @@ var Select = react.forwardRef((props, ref) => {
     placeholder,
     isDisabled,
     leftIcon,
-    rightIcon = /* @__PURE__ */ React8__namespace.createElement(icons.ChevronDownIcon, null),
+    rightIcon = /* @__PURE__ */ jsxRuntime.jsx(core.ChevronDownIcon, {}),
     multiple,
     size,
     variant,
@@ -202,8 +2561,12 @@ var Select = react.forwardRef((props, ref) => {
     ...rest
   } = props;
   const menuProps = react.omitThemingProps(rest);
-  const [currentValue, setCurrentValue] = React8__namespace.useState(value || defaultValue);
+  const [currentValue, setCurrentValue] = React12__namespace.useState(value || defaultValue);
   const controlProps = react.useFormControl({ name });
+  const options = React12__namespace.useMemo(
+    () => optionsProp && mapOptions(optionsProp),
+    [optionsProp]
+  );
   const handleChange = (value2) => {
     setCurrentValue(value2);
     onChange == null ? void 0 : onChange(value2);
@@ -215,7 +2578,7 @@ var Select = react.forwardRef((props, ref) => {
     size,
     variant
   };
-  const getDisplayValue = React8__namespace.useCallback(
+  const getDisplayValue = React12__namespace.useCallback(
     (value2) => {
       if (!options) {
         return value2;
@@ -232,60 +2595,38 @@ var Select = react.forwardRef((props, ref) => {
   const displayValue = currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
     getDisplayValue
   ) : [];
-  return /* @__PURE__ */ React8__namespace.createElement(react.Menu, {
-    ...menuProps,
-    closeOnSelect: !multiple
-  }, /* @__PURE__ */ React8__namespace.createElement(react.chakra.div, {
-    className: utils.cx("sui-select")
-  }, /* @__PURE__ */ React8__namespace.createElement(SelectButton, {
-    ref,
-    ...buttonProps
-  }, renderValue(displayValue) || placeholder), /* @__PURE__ */ React8__namespace.createElement(react.MenuList, {
-    maxH: "60vh",
-    overflowY: "auto",
-    ...menuListProps
-  }, /* @__PURE__ */ React8__namespace.createElement(react.MenuOptionGroup, {
-    defaultValue: defaultValue || value,
-    onChange: handleChange,
-    type: multiple ? "checkbox" : "radio"
-  }, options ? options.map(({ value: value2, label, ...rest2 }, i) => /* @__PURE__ */ React8__namespace.createElement(react.MenuItemOption, {
-    key: i,
-    value: value2,
-    ...rest2
-  }, label || value2)) : children)), /* @__PURE__ */ React8__namespace.createElement(react.chakra.input, {
-    ...controlProps,
-    name,
-    type: "hidden",
-    value: currentValue,
-    className: "saas-select__input"
-  })));
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Menu, { ...menuProps, closeOnSelect: !multiple, children: /* @__PURE__ */ jsxRuntime.jsxs(react.chakra.div, { className: utils.cx("sui-select"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SelectButton, { ref, ...buttonProps, children: renderValue(displayValue) || placeholder }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.MenuList, { maxH: "60vh", overflowY: "auto", ...menuListProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+      react.MenuOptionGroup,
+      {
+        defaultValue: defaultValue || value,
+        onChange: handleChange,
+        type: multiple ? "checkbox" : "radio",
+        children: options ? options.map(({ value: value2, label, ...rest2 }, i) => /* @__PURE__ */ jsxRuntime.jsx(react.MenuItemOption, { value: value2, ...rest2, children: label || value2 }, i)) : children
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.chakra.input,
+      {
+        ...controlProps,
+        name,
+        type: "hidden",
+        value: currentValue,
+        className: "saas-select__input"
+      }
+    )
+  ] }) });
 });
-if (utils.__DEV__) {
-  Select.displayName = "Select";
-}
+Select.displayName = "Select";
 var NativeSelect = react.forwardRef(
   ({ options, children, ...props }, ref) => {
-    return /* @__PURE__ */ React8__namespace.createElement(react.Select, {
-      ref,
-      ...props
-    }, children || (options == null ? void 0 : options.map(({ value, label }) => {
-      return /* @__PURE__ */ React8__namespace.createElement("option", {
-        key: value,
-        value
-      }, label || value);
-    })));
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Select, { ref, ...props, children: children || (options == null ? void 0 : options.map(({ value, label }) => {
+      return /* @__PURE__ */ jsxRuntime.jsx("option", { value, children: label || value }, value);
+    })) });
   }
 );
-if (utils.__DEV__) {
-  NativeSelect.displayName = "NativeSelect";
-}
-
-// src/field.tsx
-var inputTypes = {};
-var defaultInputType = "text";
-var getInput = (type) => {
-  return inputTypes[type] || inputTypes[defaultInputType];
-};
+NativeSelect.displayName = "NativeSelect";
 var getError = (name, formState) => {
   return reactHookForm.get(formState.errors, name);
 };
@@ -293,25 +2634,17 @@ var BaseField = (props) => {
   const { name, label, help, hideLabel, children, ...controlProps } = props;
   const { formState } = reactHookForm.useFormContext();
   const error = getError(name, formState);
-  return /* @__PURE__ */ React8__namespace.createElement(react.FormControl, {
-    ...controlProps,
-    isInvalid: !!error
-  }, label && !hideLabel ? /* @__PURE__ */ React8__namespace.createElement(react.FormLabel, null, label) : null, /* @__PURE__ */ React8__namespace.createElement(react.Box, null, children, help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ React8__namespace.createElement(react.FormHelperText, null, help) : null, (error == null ? void 0 : error.message) && /* @__PURE__ */ React8__namespace.createElement(react.FormErrorMessage, null, error == null ? void 0 : error.message)));
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.FormControl, { ...controlProps, isInvalid: !!error, children: [
+    label && !hideLabel ? /* @__PURE__ */ jsxRuntime.jsx(react.FormLabel, { children: label }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
+      children,
+      help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ jsxRuntime.jsx(react.FormHelperText, { children: help }) : null,
+      (error == null ? void 0 : error.message) && /* @__PURE__ */ jsxRuntime.jsx(react.FormErrorMessage, { children: error == null ? void 0 : error.message })
+    ] })
+  ] });
 };
-if (utils.__DEV__) {
-  BaseField.displayName = "BaseField";
-}
-var Field = React8__namespace.forwardRef(
-  (props, ref) => {
-    const { type = defaultInputType } = props;
-    const InputComponent = getInput(type);
-    return /* @__PURE__ */ React8__namespace.createElement(InputComponent, {
-      ref,
-      ...props
-    });
-  }
-);
-var createField = (InputComponent, { displayName, hideLabel, BaseField: BaseField2 }) => {
+BaseField.displayName = "BaseField";
+var _createField = (InputComponent, { displayName, hideLabel, BaseField: BaseField2 }) => {
   const Field2 = react.forwardRef((props, ref) => {
     const {
       id,
@@ -329,24 +2662,31 @@ var createField = (InputComponent, { displayName, hideLabel, BaseField: BaseFiel
       required: isRequired,
       ...rules
     };
-    return /* @__PURE__ */ React8__namespace.createElement(BaseField2, {
-      id,
-      name,
-      label,
-      help,
-      hideLabel,
-      isDisabled,
-      isInvalid,
-      isReadOnly,
-      isRequired
-    }, /* @__PURE__ */ React8__namespace.createElement(InputComponent, {
-      ref,
-      id,
-      name,
-      label: hideLabel ? label : void 0,
-      rules: inputRules,
-      ...inputProps
-    }));
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BaseField2,
+      {
+        id,
+        name,
+        label,
+        help,
+        hideLabel,
+        isDisabled,
+        isInvalid,
+        isReadOnly,
+        isRequired,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          InputComponent,
+          {
+            ref,
+            id,
+            name,
+            label: hideLabel ? label : void 0,
+            rules: inputRules,
+            ...inputProps
+          }
+        )
+      }
+    );
   });
   Field2.displayName = displayName;
   return Field2;
@@ -355,18 +2695,24 @@ var withControlledInput = (InputComponent) => {
   return react.forwardRef(
     ({ name, rules, ...inputProps }, ref) => {
       const { control } = reactHookForm.useFormContext();
-      return /* @__PURE__ */ React8__namespace.createElement(reactHookForm.Controller, {
-        name,
-        control,
-        rules,
-        render: ({ field: { ref: _ref, ...field } }) => /* @__PURE__ */ React8__namespace.createElement(InputComponent, {
-          ...field,
-          ...inputProps,
-          onChange: utils.callAllHandlers(inputProps.onChange, field.onChange),
-          onBlur: utils.callAllHandlers(inputProps.onBlur, field.onBlur),
-          ref: react.useMergeRefs(ref, _ref)
-        })
-      });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        reactHookForm.Controller,
+        {
+          name,
+          control,
+          rules,
+          render: ({ field: { ref: _ref, ...field } }) => /* @__PURE__ */ jsxRuntime.jsx(
+            InputComponent,
+            {
+              ...field,
+              ...inputProps,
+              onChange: utils.callAllHandlers(inputProps.onChange, field.onChange),
+              onBlur: utils.callAllHandlers(inputProps.onBlur, field.onBlur),
+              ref: react.useMergeRefs(ref, _ref)
+            }
+          )
+        }
+      );
     }
   );
 };
@@ -375,133 +2721,135 @@ var withUncontrolledInput = (InputComponent) => {
     ({ name, rules, ...inputProps }, ref) => {
       const { register } = reactHookForm.useFormContext();
       const { ref: _ref, ...field } = register(name, rules);
-      return /* @__PURE__ */ React8__namespace.createElement(InputComponent, {
-        ...field,
-        ...inputProps,
-        onChange: utils.callAllHandlers(inputProps.onChange, field.onChange),
-        onBlur: utils.callAllHandlers(inputProps.onBlur, field.onBlur),
-        ref: react.useMergeRefs(ref, _ref)
-      });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        InputComponent,
+        {
+          ...field,
+          ...inputProps,
+          onChange: utils.callAllHandlers(inputProps.onChange, field.onChange),
+          onBlur: utils.callAllHandlers(inputProps.onBlur, field.onBlur),
+          ref: react.useMergeRefs(ref, _ref)
+        }
+      );
     }
   );
 };
-var registerFieldType = (type, component, options) => {
+var createField = (component, options) => {
+  var _a2;
   let InputComponent;
   if (options == null ? void 0 : options.isControlled) {
     InputComponent = withControlledInput(component);
   } else {
     InputComponent = withUncontrolledInput(component);
   }
-  const Field2 = createField(InputComponent, {
-    displayName: `${type.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("")}Field`,
+  const Field2 = _createField(InputComponent, {
+    displayName: `${(_a2 = component.displayName) != null ? _a2 : "Custom"}Field`,
     hideLabel: options == null ? void 0 : options.hideLabel,
     BaseField: (options == null ? void 0 : options.BaseField) || BaseField
   });
-  inputTypes[type] = Field2;
   return Field2;
 };
-var InputField = registerFieldType(
-  "text",
+var InputField = createField(
   react.forwardRef(({ type = "text", leftAddon, rightAddon, size, ...rest }, ref) => {
-    const input = /* @__PURE__ */ React8__namespace.createElement(react.Input, {
-      type,
-      size,
-      ...rest,
-      ref
-    });
+    const input = /* @__PURE__ */ jsxRuntime.jsx(react.Input, { type, size, ...rest, ref });
     if (leftAddon || rightAddon) {
-      return /* @__PURE__ */ React8__namespace.createElement(react.InputGroup, {
-        size
-      }, leftAddon, input, rightAddon);
+      return /* @__PURE__ */ jsxRuntime.jsxs(react.InputGroup, { size, children: [
+        leftAddon,
+        input,
+        rightAddon
+      ] });
     }
     return input;
   })
 );
-var NumberInputField2 = registerFieldType(
-  "number",
+var NumberInputField2 = createField(
   NumberInput,
   {
     isControlled: true
   }
 );
-var PasswordInputField = registerFieldType(
-  "password",
-  react.forwardRef((props, ref) => /* @__PURE__ */ React8__namespace.createElement(PasswordInput, {
-    ref,
-    ...props
-  }))
+var PasswordInputField = createField(
+  react.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(PasswordInput, { ref, ...props }))
 );
-var TextareaField = registerFieldType(
-  "textarea",
-  react.Textarea
-);
-var SwitchField = registerFieldType(
-  "switch",
+var TextareaField = createField(react.Textarea);
+var SwitchField = createField(
   react.forwardRef(({ type, value, ...rest }, ref) => {
-    return /* @__PURE__ */ React8__namespace.createElement(react.Switch, {
-      isChecked: !!value,
-      ...rest,
-      ref
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Switch, { isChecked: !!value, ...rest, ref });
   }),
   {
     isControlled: true
   }
 );
-var SelectField = registerFieldType("select", Select, {
+var SelectField = createField(Select, {
   isControlled: true
 });
-var CheckboxField = registerFieldType(
-  "checkbox",
+var CheckboxField = createField(
   react.forwardRef(({ label, type, ...props }, ref) => {
-    return /* @__PURE__ */ React8__namespace.createElement(react.Checkbox, {
-      ref,
-      ...props
-    }, label);
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Checkbox, { ref, ...props, children: label });
   }),
   {
     hideLabel: true
   }
 );
-var RadioField = registerFieldType(
-  "radio",
-  RadioInput,
-  {
-    isControlled: true
-  }
-);
-var NativeSelectField = registerFieldType(
-  "native-select",
-  NativeSelect,
-  { isControlled: true }
-);
-var PinField = registerFieldType(
-  "pin",
+var RadioField = createField(RadioInput, {
+  isControlled: true
+});
+var NativeSelectField = createField(NativeSelect, {
+  isControlled: true
+});
+var PinField = createField(
   react.forwardRef((props, ref) => {
     const { pinLength = 4, pinType, spacing, ...inputProps } = props;
     const inputs = [];
     for (let i = 0; i < pinLength; i++) {
-      inputs.push(/* @__PURE__ */ React8__namespace.createElement(react.PinInputField, {
-        key: i,
-        ref
-      }));
-    }
-    return /* @__PURE__ */ React8__namespace.createElement(react.HStack, {
-      spacing
-    }, /* @__PURE__ */ React8__namespace.createElement(react.PinInput, {
-      ...inputProps,
-      type: pinType
-    }, inputs));
+      inputs.push(/* @__PURE__ */ jsxRuntime.jsx(react.PinInputField, { ref }, i));
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(react.HStack, { spacing, children: /* @__PURE__ */ jsxRuntime.jsx(react.PinInput, { ...inputProps, type: pinType, children: inputs }) });
   }),
   {
     isControlled: true
   }
 );
+var defaultFieldTypes = {
+  text: InputField,
+  email: InputField,
+  url: InputField,
+  phone: InputField,
+  number: NumberInputField2,
+  password: PasswordInputField,
+  textarea: TextareaField,
+  switch: SwitchField,
+  select: SelectField,
+  checkbox: CheckboxField,
+  radio: RadioField,
+  pin: PinField,
+  "native-select": NativeSelectField
+};
+var FieldsContext = React12__namespace.default.createContext(
+  null
+);
+var FieldsProvider = (props) => {
+  const fields = { ...defaultFieldTypes, ...props.value };
+  return /* @__PURE__ */ jsxRuntime.jsx(FieldsContext.Provider, { value: fields, children: props.children });
+};
+var useField = (type) => {
+  const context = React12__namespace.default.useContext(FieldsContext);
+  return (context == null ? void 0 : context[type]) || InputField;
+};
+var defaultInputType = "text";
+var Field = React12__namespace.forwardRef(
+  (props, ref) => {
+    const { type = defaultInputType } = props;
+    const InputComponent = useField(type);
+    return /* @__PURE__ */ jsxRuntime.jsx(InputComponent, { ref, ...props });
+  }
+);
 var mapFields = (schema) => schema && Object.entries(schema).map(([name, { items, label, title, ...field }]) => {
   return {
     ...field,
     name,
     label: label || title || name
+    // json schema compatibility
   };
 });
 var objectFieldResolver = (schema) => {
@@ -509,11 +2857,11 @@ var objectFieldResolver = (schema) => {
     return mapFields(schema);
   };
   const getNestedFields = (name) => {
-    var _a;
+    var _a2;
     const field = utils.get(schema, name);
     if (!field)
       return [];
-    if (((_a = field.items) == null ? void 0 : _a.type) === "object") {
+    if (((_a2 = field.items) == null ? void 0 : _a2.type) === "object") {
       return mapFields(field.items.properties);
     } else if (field.type === "object") {
       return mapFields(field.properties);
@@ -522,11 +2870,9 @@ var objectFieldResolver = (schema) => {
   };
   return { getFields, getNestedFields };
 };
-
-// src/form.tsx
 var Form = react.forwardRef(
   (props, ref) => {
-    var _a;
+    var _a2;
     const {
       mode = "all",
       resolver,
@@ -563,89 +2909,64 @@ var Form = react.forwardRef(
       resetOptions
     };
     if (schema && !resolver) {
-      form.resolver = (_a = Form.getResolver) == null ? void 0 : _a.call(Form, schema);
+      form.resolver = (_a2 = Form.getResolver) == null ? void 0 : _a2.call(Form, schema);
     }
     const methods = reactHookForm.useForm(form);
     const { handleSubmit } = methods;
-    React8__namespace.useImperativeHandle(formRef, () => methods, [formRef, methods]);
-    React8__namespace.useEffect(() => {
+    React12__namespace.useImperativeHandle(formRef, () => methods, [formRef, methods]);
+    React12__namespace.useEffect(() => {
       let subscription;
       if (onChange) {
         subscription = methods.watch(onChange);
       }
       return () => subscription == null ? void 0 : subscription.unsubscribe();
     }, [methods, onChange]);
-    const Field2 = React8__namespace.useMemo(
-      () => (props2) => /* @__PURE__ */ React8__namespace.createElement(Field, {
-        ...props2
-      }),
-      []
-    );
-    return /* @__PURE__ */ React8__namespace.createElement(reactHookForm.FormProvider, {
-      ...methods
-    }, /* @__PURE__ */ React8__namespace.createElement(react.chakra.form, {
-      ref,
-      onSubmit: handleSubmit(onSubmit, onError),
-      ...rest,
-      className: utils.cx("sui-form", props.className)
-    }, utils.runIfFn(children, {
-      Field: Field2,
-      ...methods
-    })));
+    return /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...methods, children: /* @__PURE__ */ jsxRuntime.jsx(
+      react.chakra.form,
+      {
+        ref,
+        onSubmit: handleSubmit(onSubmit, onError),
+        ...rest,
+        className: utils.cx("sui-form", props.className),
+        children: utils.runIfFn(children, {
+          Field,
+          ...methods
+        })
+      }
+    ) });
   }
 );
 Form.getFieldResolver = objectFieldResolver;
 Form.displayName = "Form";
-function createForm({ resolver }) {
-  const CreateForm = (props) => {
-    const { schema, ...rest } = props;
-    return /* @__PURE__ */ React8__namespace.createElement(Form, {
-      resolver: resolver == null ? void 0 : resolver(props.schema),
-      ...rest
-    });
-  };
-  return CreateForm;
-}
 var FormLayoutItem = ({ children }) => {
-  return /* @__PURE__ */ React8__namespace.createElement(react.chakra.div, null, children);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.chakra.div, { children });
 };
-if (utils.__DEV__) {
-  FormLayoutItem.displayName = "FormLayoutItem";
-}
+FormLayoutItem.displayName = "FormLayoutItem";
 var FormLayout = ({ children, ...props }) => {
-  var _a, _b, _c;
+  var _a2, _b, _c;
   const theme = react.useTheme();
-  const defaultProps = (_c = (_b = (_a = theme.components) == null ? void 0 : _a.FormLayout) == null ? void 0 : _b.defaultProps) != null ? _c : {
+  const defaultProps = (_c = (_b = (_a2 = theme.components) == null ? void 0 : _a2.SuiFormLayout) == null ? void 0 : _b.defaultProps) != null ? _c : {
     spacing: 4
   };
   const gridProps = {
     ...defaultProps,
     ...props
   };
-  return /* @__PURE__ */ React8__namespace.createElement(react.SimpleGrid, {
-    ...gridProps,
-    className: utils.cx("sui-form__layout", props.className)
-  }, React8__namespace.Children.map(children, (child) => {
-    if (React8__namespace.isValidElement(child)) {
-      return /* @__PURE__ */ React8__namespace.createElement(FormLayoutItem, null, child);
-    }
-    return child;
-  }));
-};
-if (utils.__DEV__) {
-  FormLayout.displayName = "FormLayout";
-}
-var mapNestedFields = (name, children) => {
-  return React8__namespace.Children.map(children, (child) => {
-    if (React8__namespace.isValidElement(child) && child.props.name) {
-      return React8__namespace.cloneElement(child, {
-        ...child.props,
-        name: `${name}.${child.props.name}`
-      });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.SimpleGrid,
+    {
+      ...gridProps,
+      className: utils.cx("sui-form__layout", props.className),
+      children: React12__namespace.Children.map(children, (child) => {
+        if (React12__namespace.isValidElement(child)) {
+          return /* @__PURE__ */ jsxRuntime.jsx(FormLayoutItem, { children: child });
+        }
+        return child;
+      })
     }
-    return child;
-  });
+  );
 };
+FormLayout.displayName = "FormLayout";
 var [ArrayFieldProvider, useArrayFieldContext] = reactUtils.createContext({
   name: "ArrayFieldContext"
 });
@@ -676,7 +2997,7 @@ var useArrayField = ({
 var useArrayFieldRow = ({ index }) => {
   const { clearErrors } = reactHookForm.useFormContext();
   const { name, remove, fields } = useArrayFieldContext();
-  React8__namespace.useEffect(() => {
+  React12__namespace.useEffect(() => {
     clearErrors(name);
   }, []);
   return {
@@ -684,7 +3005,7 @@ var useArrayFieldRow = ({ index }) => {
     isFirst: index === 0,
     isLast: index === fields.length - 1,
     name: `${name}.${index}`,
-    remove: React8__namespace.useCallback(() => {
+    remove: React12__namespace.useCallback(() => {
       clearErrors(name);
       remove(index);
     }, [index])
@@ -709,39 +3030,29 @@ var useArrayFieldAddButton = () => {
     isDisabled
   };
 };
-
-// src/array-field.tsx
 var ArrayFieldRow = ({
   children,
   index,
   ...rowFieldsProps
 }) => {
-  return /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRowContainer, {
-    index
-  }, /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRowFields, {
-    ...rowFieldsProps
-  }, children), /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRemoveButton, null));
-};
-if (utils.__DEV__) {
-  ArrayFieldRow.displayName = "ArrayFieldRow";
-}
+  return /* @__PURE__ */ jsxRuntime.jsxs(ArrayFieldRowContainer, { index, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldRowFields, { ...rowFieldsProps, children }),
+    /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldRemoveButton, {})
+  ] });
+};
+ArrayFieldRow.displayName = "ArrayFieldRow";
 var ArrayFieldRowFields = ({
   children,
   ...layoutProps
 }) => {
   const { name } = useArrayFieldRowContext();
-  return /* @__PURE__ */ React8__namespace.createElement(FormLayout, {
-    flex: "1",
-    mr: "2",
-    ...layoutProps
-  }, mapNestedFields(name, children));
-};
-if (utils.__DEV__) {
-  ArrayFieldRowFields.displayName = "ArrayFieldRowFields";
-}
+  return /* @__PURE__ */ jsxRuntime.jsx(FormLayout, { flex: "1", mr: "2", ...layoutProps, children: mapNestedFields(name, children) });
+};
+ArrayFieldRowFields.displayName = "ArrayFieldRowFields";
 var ArrayFieldRowContainer = ({
   children,
-  index
+  index,
+  ...rest
 }) => {
   const context = useArrayFieldRow({ index });
   const styles = {
@@ -751,61 +3062,44 @@ var ArrayFieldRowContainer = ({
     width: "100%",
     mb: 4
   };
-  return /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRowProvider, {
-    value: context
-  }, /* @__PURE__ */ React8__namespace.createElement(react.chakra.div, {
-    __css: styles
-  }, children));
+  return /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldRowProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(react.chakra.div, { ...rest, __css: styles, children }) });
 };
-if (utils.__DEV__) {
-  ArrayFieldRowContainer.displayName = "ArrayFieldRowContainer";
-}
+ArrayFieldRowContainer.displayName = "ArrayFieldRowContainer";
 var ArrayFieldRemoveButton = (props) => {
-  return /* @__PURE__ */ React8__namespace.createElement(react.Button, {
-    "aria-label": "Remove row",
-    ...useArrayFieldRemoveButton(),
-    ...props
-  }, props.children || /* @__PURE__ */ React8__namespace.createElement(icons.MinusIcon, null));
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Button, { "aria-label": "Remove row", ...useArrayFieldRemoveButton(), ...props, children: props.children || /* @__PURE__ */ jsxRuntime.jsx(MinusIcon, {}) });
 };
-if (utils.__DEV__) {
-  ArrayFieldRemoveButton.displayName = "ArrayFieldRemoveButton";
-}
+ArrayFieldRemoveButton.displayName = "ArrayFieldRemoveButton";
 var ArrayFieldAddButton = (props) => {
-  return /* @__PURE__ */ React8__namespace.createElement(react.Button, {
-    "aria-label": "Add row",
-    float: "right",
-    ...useArrayFieldAddButton(),
-    ...props
-  }, props.children || /* @__PURE__ */ React8__namespace.createElement(icons.AddIcon, null));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.Button,
+    {
+      "aria-label": "Add row",
+      float: "right",
+      ...useArrayFieldAddButton(),
+      ...props,
+      children: props.children || /* @__PURE__ */ jsxRuntime.jsx(AddIcon, {})
+    }
+  );
 };
-if (utils.__DEV__) {
-  ArrayFieldAddButton.displayName = "ArrayFieldAddButton";
-}
+ArrayFieldAddButton.displayName = "ArrayFieldAddButton";
 var ArrayField = react.forwardRef(
   (props, ref) => {
     const { children, ...containerProps } = props;
-    return /* @__PURE__ */ React8__namespace.createElement(ArrayFieldContainer, {
-      ref,
-      ...containerProps
-    }, /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRows, null, (fields) => /* @__PURE__ */ React8__namespace.createElement(React8__namespace.Fragment, null, fields.map(({ id }, index) => /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRow, {
-      key: id,
-      index
-    }, children)))), /* @__PURE__ */ React8__namespace.createElement(ArrayFieldAddButton, null));
+    return /* @__PURE__ */ jsxRuntime.jsxs(ArrayFieldContainer, { ref, ...containerProps, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldRows, { children: (fields) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fields.map(({ id }, index) => /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldRow, { index, children }, id)) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldAddButton, {})
+    ] });
   }
 );
-if (utils.__DEV__) {
-  ArrayField.displayName = "ArrayField";
-}
+ArrayField.displayName = "ArrayField";
 var ArrayFieldRows = ({
   children
 }) => {
   const { fields } = useArrayFieldContext();
   return children(fields);
 };
-if (utils.__DEV__) {
-  ArrayFieldRows.displayName = "ArrayFieldRows";
-}
-var ArrayFieldContainer = React8__namespace.forwardRef(
+ArrayFieldRows.displayName = "ArrayFieldRows";
+var ArrayFieldContainer = React12__namespace.forwardRef(
   ({
     name,
     defaultValue,
@@ -822,74 +3116,56 @@ var ArrayFieldContainer = React8__namespace.forwardRef(
       min,
       max
     });
-    React8__namespace.useImperativeHandle(ref, () => context, [ref, context]);
-    return /* @__PURE__ */ React8__namespace.createElement(ArrayFieldProvider, {
-      value: context
-    }, /* @__PURE__ */ React8__namespace.createElement(BaseField, {
-      name,
-      ...fieldProps
-    }, children));
+    React12__namespace.useImperativeHandle(ref, () => context, [ref, context]);
+    return /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(BaseField, { name, ...fieldProps, children }) });
   }
 );
-if (utils.__DEV__) {
-  ArrayFieldContainer.displayName = "ArrayFieldContainer";
-}
+ArrayFieldContainer.displayName = "ArrayFieldContainer";
 var FormLegend = (props) => {
   const styles = react.useStyleConfig("SuiFormLegend");
-  return /* @__PURE__ */ React8__namespace.createElement(react.FormLabel, {
-    as: "legend",
-    sx: styles,
-    ...props
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.FormLabel, { as: "legend", sx: styles, ...props });
 };
 var ObjectField = (props) => {
   const { name, label, hideLabel, children, columns, spacing, ...fieldProps } = props;
-  return /* @__PURE__ */ React8__namespace.createElement(react.FormControl, {
-    name,
-    as: "fieldset",
-    ...fieldProps
-  }, /* @__PURE__ */ React8__namespace.createElement(FormLegend, {
-    display: hideLabel ? "none" : "block"
-  }, label), /* @__PURE__ */ React8__namespace.createElement(FormLayout, {
-    columns,
-    gridGap: spacing
-  }, mapNestedFields(name, children)));
-};
-if (utils.__DEV__) {
-  ObjectField.displayName = "ObjectField";
-}
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.FormControl, { name, as: "fieldset", ...fieldProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(FormLegend, { display: hideLabel ? "none" : "block", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(FormLayout, { columns, gridGap: spacing, children: mapNestedFields(name, children) })
+  ] });
+};
+ObjectField.displayName = "ObjectField";
 var mapNestedFields2 = (resolver, name) => {
-  var _a;
-  return (_a = resolver.getNestedFields(name)) == null ? void 0 : _a.map(
-    ({ name: name2, type, ...nestedFieldProps }, i) => /* @__PURE__ */ React8__namespace.createElement(Field, {
-      key: name2 || i,
-      name: name2,
-      type,
-      ...nestedFieldProps
-    })
+  var _a2;
+  return (_a2 = resolver.getNestedFields(name)) == null ? void 0 : _a2.map(
+    ({ name: name2, type, ...nestedFieldProps }, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      Field,
+      {
+        name: name2,
+        type,
+        ...nestedFieldProps
+      },
+      name2 || i
+    )
   );
 };
-var Fields = ({
+var AutoFields = ({
   schema,
   fieldResolver,
   focusFirstField,
   ...props
 }) => {
-  const resolver = React8__namespace.useMemo(
+  const resolver = React12__namespace.useMemo(
     () => fieldResolver || Form.getFieldResolver(schema),
     [schema, fieldResolver]
   );
-  const fields = React8__namespace.useMemo(() => resolver.getFields(), [resolver]);
+  const fields = React12__namespace.useMemo(() => resolver.getFields(), [resolver]);
   const form = reactHookForm.useFormContext();
-  React8__namespace.useEffect(() => {
-    var _a;
-    if (focusFirstField && ((_a = fields[0]) == null ? void 0 : _a.name)) {
+  React12__namespace.useEffect(() => {
+    var _a2;
+    if (focusFirstField && ((_a2 = fields[0]) == null ? void 0 : _a2.name)) {
       form.setFocus(fields[0].name);
     }
   }, [schema, fieldResolver, focusFirstField]);
-  return /* @__PURE__ */ React8__namespace.createElement(FormLayout, {
-    ...props
-  }, fields.map(
+  return /* @__PURE__ */ jsxRuntime.jsx(FormLayout, { ...props, children: fields.map(
     ({
       name,
       type,
@@ -897,28 +3173,15 @@ var Fields = ({
       ...fieldProps
     }) => {
       if (type === "array") {
-        return /* @__PURE__ */ React8__namespace.createElement(ArrayField, {
-          key: name,
-          name,
-          ...fieldProps
-        }, mapNestedFields2(resolver, name));
+        return /* @__PURE__ */ jsxRuntime.jsx(ArrayField, { name, ...fieldProps, children: mapNestedFields2(resolver, name) }, name);
       } else if (type === "object") {
-        return /* @__PURE__ */ React8__namespace.createElement(ObjectField, {
-          key: name,
-          name,
-          ...fieldProps
-        }, mapNestedFields2(resolver, name));
+        return /* @__PURE__ */ jsxRuntime.jsx(ObjectField, { name, ...fieldProps, children: mapNestedFields2(resolver, name) }, name);
       }
-      return /* @__PURE__ */ React8__namespace.createElement(Field, {
-        key: name,
-        name,
-        type,
-        ...fieldProps
-      });
+      return /* @__PURE__ */ jsxRuntime.jsx(Field, { name, type, ...fieldProps }, name);
     }
-  ));
+  ) });
 };
-Fields.displayName = "Fields";
+AutoFields.displayName = "Fields";
 var SubmitButton = react.forwardRef(
   (props, ref) => {
     const {
@@ -931,13 +3194,17 @@ var SubmitButton = react.forwardRef(
     } = props;
     const { formState } = reactHookForm.useFormContext();
     const isDisabled = disableIfUntouched && !formState.isDirty || disableIfInvalid && !formState.isValid || isDisabledProp;
-    return /* @__PURE__ */ React8__namespace.createElement(react.Button, {
-      ...rest,
-      ref,
-      type: "submit",
-      isLoading: formState.isSubmitting || isLoading,
-      isDisabled
-    }, children);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      react.Button,
+      {
+        ...rest,
+        ref,
+        type: "submit",
+        isLoading: formState.isSubmitting || isLoading,
+        isDisabled,
+        children
+      }
+    );
   }
 );
 SubmitButton.defaultProps = {
@@ -946,8 +3213,6 @@ SubmitButton.defaultProps = {
   disableIfInvalid: false
 };
 SubmitButton.displayName = "SubmitButton";
-
-// src/auto-form.tsx
 var AutoForm = react.forwardRef(
   (props, ref) => {
     const {
@@ -957,14 +3222,11 @@ var AutoForm = react.forwardRef(
       children,
       ...rest
     } = props;
-    return /* @__PURE__ */ React8__namespace.createElement(Form, {
-      ...rest,
-      schema,
-      ref
-    }, /* @__PURE__ */ React8__namespace.createElement(FormLayout, null, /* @__PURE__ */ React8__namespace.createElement(Fields, {
-      schema,
-      fieldResolver
-    }), submitLabel && /* @__PURE__ */ React8__namespace.createElement(SubmitButton, null, submitLabel), children));
+    return /* @__PURE__ */ jsxRuntime.jsx(Form, { ...rest, schema, ref, children: /* @__PURE__ */ jsxRuntime.jsxs(FormLayout, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AutoFields, { schema, fieldResolver }),
+      submitLabel && /* @__PURE__ */ jsxRuntime.jsx(SubmitButton, { children: submitLabel }),
+      children
+    ] }) });
   }
 );
 AutoForm.displayName = "AutoForm";
@@ -985,9 +3247,7 @@ var DisplayIf = ({
   const context = reactHookForm.useFormContext();
   return condition(value, context) ? children : null;
 };
-if (utils.__DEV__) {
-  DisplayIf.displayName = "DisplayIf";
-}
+DisplayIf.displayName = "DisplayIf";
 var [StepFormProvider, useStepFormContext] = reactUtils.createContext({
   name: "StepFormContext",
   errorMessage: "useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`"
@@ -996,14 +3256,14 @@ function useStepForm(props) {
   const { onChange, ...rest } = props;
   const stepper = core.useStepper(rest);
   const { activeStep, isLastStep, nextStep } = stepper;
-  const [steps, updateSteps] = React8__namespace.useState({});
-  const onSubmitStep = React8__namespace.useCallback(
+  const [steps, updateSteps] = React12__namespace.useState({});
+  const onSubmitStep = React12__namespace.useCallback(
     async (data) => {
-      var _a, _b;
+      var _a2, _b;
       try {
         const step = steps[activeStep];
         if (isLastStep) {
-          await ((_a = props.onSubmit) == null ? void 0 : _a.call(props, data));
+          await ((_a2 = props.onSubmit) == null ? void 0 : _a2.call(props, data));
           updateStep({
             ...step,
             isCompleted: true
@@ -1018,7 +3278,7 @@ function useStepForm(props) {
     },
     [steps, activeStep, isLastStep]
   );
-  const getFormProps = React8__namespace.useCallback(() => {
+  const getFormProps = React12__namespace.useCallback(() => {
     const step = steps[activeStep];
     return {
       onSubmit: onSubmitStep,
@@ -1026,7 +3286,7 @@ function useStepForm(props) {
       resolver: step == null ? void 0 : step.resolver
     };
   }, [steps, onSubmitStep, activeStep]);
-  const updateStep = React8__namespace.useCallback(
+  const updateStep = React12__namespace.useCallback(
     (step) => {
       updateSteps((steps2) => {
         return {
@@ -1048,7 +3308,7 @@ function useFormStep(props) {
   const { name, schema, resolver, onSubmit } = props;
   const step = core.useStep({ name });
   const { steps, updateStep } = useStepFormContext();
-  React8__namespace.useEffect(() => {
+  React12__namespace.useEffect(() => {
     updateStep({ name, schema, resolver, onSubmit });
   }, [name, schema]);
   return {
@@ -1056,92 +3316,85 @@ function useFormStep(props) {
     ...steps[name] || { name, schema }
   };
 }
-
-// src/step-form.tsx
-var StepForm = React8__namespace.forwardRef(
+var StepForm = React12__namespace.forwardRef(
   (props, ref) => {
     const { children, ...rest } = props;
     const stepper = useStepForm(props);
     const { getFormProps, ...ctx } = stepper;
-    const context = React8__namespace.useMemo(() => ctx, [ctx]);
-    return /* @__PURE__ */ React8__namespace.createElement(core.StepperProvider, {
-      value: context
-    }, /* @__PURE__ */ React8__namespace.createElement(StepFormProvider, {
-      value: context
-    }, /* @__PURE__ */ React8__namespace.createElement(Form, {
-      ref,
-      ...rest,
-      ...getFormProps()
-    }, utils.runIfFn(children, stepper))));
+    const context = React12__namespace.useMemo(() => ctx, [ctx]);
+    return /* @__PURE__ */ jsxRuntime.jsx(core.StepperProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(StepFormProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(Form, { ref, ...rest, ...getFormProps(), children: utils.runIfFn(children, stepper) }) }) });
   }
 );
 var FormStepper = (props) => {
   const { activeIndex, setIndex } = core.useStepperContext();
   const { children, orientation, variant, colorScheme, size, ...rest } = props;
-  const elements = React8__namespace.Children.map(children, (child) => {
-    if (React8__namespace.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
+  const elements = React12__namespace.Children.map(children, (child) => {
+    if (React12__namespace.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
       const { isCompleted } = useFormStep(child.props);
-      return /* @__PURE__ */ React8__namespace.createElement(core.StepperStep, {
-        name: child.props.name,
-        title: child.props.title,
-        isCompleted,
-        ...rest
-      }, child.props.children);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        core.StepperStep,
+        {
+          name: child.props.name,
+          title: child.props.title,
+          isCompleted,
+          ...rest,
+          children: child.props.children
+        }
+      );
     }
     return child;
   });
-  const onChange = React8__namespace.useCallback((i) => {
+  const onChange = React12__namespace.useCallback((i) => {
     setIndex(i);
   }, []);
-  return /* @__PURE__ */ React8__namespace.createElement(core.StepperContainer, {
-    orientation,
-    step: activeIndex,
-    variant,
-    colorScheme,
-    size,
-    onChange
-  }, /* @__PURE__ */ React8__namespace.createElement(core.StepperSteps, {
-    mb: "4",
-    ...props
-  }, elements));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.StepperContainer,
+    {
+      orientation,
+      step: activeIndex,
+      variant,
+      colorScheme,
+      size,
+      onChange,
+      children: /* @__PURE__ */ jsxRuntime.jsx(core.StepperSteps, { mb: "4", ...props, children: elements })
+    }
+  );
 };
 var FormStep = (props) => {
   const { name, schema, resolver, children, className, onSubmit, ...rest } = props;
   const step = useFormStep({ name, schema, resolver, onSubmit });
   const { isActive } = step;
-  return isActive ? /* @__PURE__ */ React8__namespace.createElement(react.chakra.div, {
-    ...rest,
-    className: utils.cx("sui-form__step", className)
-  }, children) : null;
+  return isActive ? /* @__PURE__ */ jsxRuntime.jsx(react.chakra.div, { ...rest, className: utils.cx("sui-form__step", className), children }) : null;
 };
-if (utils.__DEV__) {
-  FormStep.displayName = "FormStep";
-}
+FormStep.displayName = "FormStep";
 var PrevButton = (props) => {
   const { isFirstStep, isCompleted, prevStep } = core.useStepperContext();
-  return /* @__PURE__ */ React8__namespace.createElement(react.Button, {
-    isDisabled: isFirstStep || isCompleted,
-    label: "Back",
-    ...props,
-    className: utils.cx("sui-form__prev-button", props.className),
-    onClick: utils.callAllHandlers(props.onClick, prevStep)
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.Button,
+    {
+      isDisabled: isFirstStep || isCompleted,
+      label: "Back",
+      ...props,
+      className: utils.cx("sui-form__prev-button", props.className),
+      onClick: utils.callAllHandlers(props.onClick, prevStep)
+    }
+  );
 };
-if (utils.__DEV__) {
-  PrevButton.displayName = "PrevButton";
-}
+PrevButton.displayName = "PrevButton";
 var NextButton = (props) => {
   const { label = "Next", submitLabel = "Complete", ...rest } = props;
   const { isLastStep, isCompleted } = core.useStepperContext();
-  return /* @__PURE__ */ React8__namespace.createElement(SubmitButton, {
-    ...rest,
-    isDisabled: isCompleted,
-    className: utils.cx("sui-form__next-button", props.className)
-  }, isLastStep || isCompleted ? submitLabel : label);
-};
-if (utils.__DEV__) {
-  NextButton.displayName = "NextButton";
-}
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SubmitButton,
+    {
+      ...rest,
+      isDisabled: isCompleted,
+      className: utils.cx("sui-form__next-button", props.className),
+      children: isLastStep || isCompleted ? submitLabel : label
+    }
+  );
+};
+NextButton.displayName = "NextButton";
 var WatchField = (props) => {
   const { name, defaultValue, isDisabled, isExact } = props;
   const form = reactHookForm.useFormContext();
@@ -1153,6 +3406,16 @@ var WatchField = (props) => {
   });
   return props.children(field, form) || null;
 };
+function createForm({
+  resolver,
+  fields
+} = {}) {
+  const CreateForm = (props) => {
+    const { schema, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ jsxRuntime.jsx(Form, { resolver: resolver == null ? void 0 : resolver(props.schema), ...rest }) });
+  };
+  return CreateForm;
+}
 
 Object.defineProperty(exports, 'Controller', {
   enumerable: true,
@@ -1200,13 +3463,14 @@ exports.ArrayFieldRowContainer = ArrayFieldRowContainer;
 exports.ArrayFieldRowFields = ArrayFieldRowFields;
 exports.ArrayFieldRowProvider = ArrayFieldRowProvider;
 exports.ArrayFieldRows = ArrayFieldRows;
+exports.AutoFields = AutoFields;
 exports.AutoForm = AutoForm;
 exports.BaseField = BaseField;
 exports.CheckboxField = CheckboxField;
 exports.DisplayField = DisplayField;
 exports.DisplayIf = DisplayIf;
 exports.Field = Field;
-exports.Fields = Fields;
+exports.FieldsProvider = FieldsProvider;
 exports.Form = Form;
 exports.FormLayout = FormLayout;
 exports.FormLegend = FormLegend;
@@ -1225,6 +3489,7 @@ exports.PasswordInputField = PasswordInputField;
 exports.PinField = PinField;
 exports.PrevButton = PrevButton;
 exports.RadioField = RadioField;
+exports.RadioInput = RadioInput;
 exports.Select = Select;
 exports.SelectField = SelectField;
 exports.StepForm = StepForm;
@@ -1233,19 +3498,19 @@ exports.SubmitButton = SubmitButton;
 exports.SwitchField = SwitchField;
 exports.TextareaField = TextareaField;
 exports.WatchField = WatchField;
+exports.createField = createField;
 exports.createForm = createForm;
+exports.defaultFieldTypes = defaultFieldTypes;
 exports.objectFieldResolver = objectFieldResolver;
-exports.registerFieldType = registerFieldType;
 exports.useArrayField = useArrayField;
 exports.useArrayFieldAddButton = useArrayFieldAddButton;
 exports.useArrayFieldContext = useArrayFieldContext;
 exports.useArrayFieldRemoveButton = useArrayFieldRemoveButton;
 exports.useArrayFieldRow = useArrayFieldRow;
 exports.useArrayFieldRowContext = useArrayFieldRowContext;
+exports.useField = useField;
 exports.useFormStep = useFormStep;
 exports.useStepForm = useStepForm;
 exports.useStepFormContext = useStepFormContext;
-exports.withControlledInput = withControlledInput;
-exports.withUncontrolledInput = withUncontrolledInput;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map