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

package/dist/index.js

@@ -1,17 +1,14 @@
 'use strict';
 
+var React11 = require('react');
 var reactHookForm = require('react-hook-form');
-var react = require('@chakra-ui/react');
 var jsxRuntime = require('react/jsx-runtime');
-var React12 = require('react');
+var react = require('@chakra-ui/react');
 var core = require('@saas-ui/core');
-var react$1 = require('@emotion/react');
+var icons = require('@saas-ui/core/icons');
 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 _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -30,851 +27,31 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React12__namespace = /*#__PURE__*/_interopNamespace(React12);
-var createStyled__default = /*#__PURE__*/_interopDefault(createStyled);
+var React11__namespace = /*#__PURE__*/_interopNamespace(React11);
 
-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 });
+// src/form-context.tsx
+var FormContext = React11.createContext(null);
+var useFormContext = () => {
+  const context = React11.useContext(FormContext);
+  const hookContext = reactHookForm.useFormContext();
+  if (!context) {
+    throw new Error("FormProvider must be used within a Form component");
   }
-  return to;
+  return {
+    ...hookContext,
+    ...context
+  };
+};
+var useFieldProps = (name) => {
+  var _a;
+  const parsedName = name == null ? void 0 : name.replace(/\.[0-9]/g, ".$");
+  const context = useFormContext();
+  return (_a = context == null ? void 0 : context.fields) == null ? void 0 : _a[parsedName];
+};
+var FormProvider = (props) => {
+  const { children, fieldResolver, schema, fields, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(FormContext.Provider, { value: { fieldResolver, schema, fields }, children }) });
 };
-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,
@@ -888,7 +65,7 @@ var DisplayField = ({
 };
 DisplayField.displayName = "DisplayField";
 var FormValue = ({ name }) => {
-  const { getValues } = reactHookForm.useFormContext();
+  const { getValues } = useFormContext();
   return getValues(name) || null;
 };
 FormValue.displayName = "FormValue";
@@ -903,1524 +80,14 @@ var NumberInput = react.forwardRef((props, ref) => {
     /* @__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);
-}
-
-// ../../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 _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;
-};
-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;
-}
-
-// ../../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"
-};
-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"
+      /* @__PURE__ */ jsxRuntime.jsx(react.NumberDecrementStepper, { children: decrementIcon })
+    ] })
+  ] });
 });
+NumberInput.defaultProps = {
+  hideStepper: false
+};
+NumberInput.displayName = "NumberInput";
 var InputRightButton = react.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(react.InputRightElement, { w: "auto", px: "1", py: "1", alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsx(react.Button, { ref, height: "auto", ...props }) });
@@ -2441,14 +108,14 @@ var PasswordInput = react.forwardRef(
       leftAddon,
       ...inputProps
     } = props;
-    const [show, setShow] = React12.useState(false);
+    const [show, setShow] = React11.useState(false);
     const handleClick = () => setShow(!show);
     const label = show ? "Hide password" : "Show password";
     let icon;
     if (show) {
-      icon = viewIcon || /* @__PURE__ */ jsxRuntime.jsx(ViewIcon, {});
+      icon = viewIcon || /* @__PURE__ */ jsxRuntime.jsx(icons.ViewIcon, {});
     } else {
-      icon = viewOffIcon || /* @__PURE__ */ jsxRuntime.jsx(ViewOffIcon, {});
+      icon = viewOffIcon || /* @__PURE__ */ jsxRuntime.jsx(icons.ViewOffIcon, {});
     }
     const groupProps = {
       width: w || width,
@@ -2480,11 +147,17 @@ var PasswordInput = react.forwardRef(
 );
 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, {
+  return React11__namespace.Children.map(children, (child) => {
+    if (React11__namespace.isValidElement(child) && child.props.name) {
+      let childName = child.props.name;
+      if (childName.includes(".")) {
+        childName = childName.replace(/^.*\.(.*)/, "$1");
+      } else if (childName.includes(".$")) {
+        childName = childName.replace(/^.*\.\$(.*)/, "$1");
+      }
+      return React11__namespace.cloneElement(child, {
         ...child.props,
-        name: `${name}.${child.props.name}`
+        name: `${name}.${childName}`
       });
     }
     return child;
@@ -2521,104 +194,170 @@ var RadioInput = react.forwardRef(
   }
 );
 RadioInput.displayName = "RadioInput";
-var SelectButton = react.forwardRef((props, ref) => {
-  const styles = react.useMultiStyleConfig("Input", props);
-  const focusStyles = styles.field._focusVisible;
-  const height = styles.field.h || styles.field.height;
-  const buttonStyles = {
-    fontWeight: "normal",
-    textAlign: "left",
-    color: "inherit",
-    _active: {
-      bg: "transparent"
-    },
-    minH: height,
-    _focus: focusStyles,
-    _expanded: focusStyles,
-    ...styles.field,
-    h: "auto"
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(react.MenuButton, { as: react.Button, ...props, ref, sx: buttonStyles });
+var [SelectProvider, useSelectContext] = reactUtils.createContext({
+  strict: true
 });
-SelectButton.displayName = "SelectButton";
-var Select = react.forwardRef((props, ref) => {
+var useSelect = (props) => {
   const {
     name,
-    options: optionsProp,
-    children,
-    onChange,
-    defaultValue,
     value,
+    defaultValue,
+    onChange,
+    multiple,
     placeholder,
+    options: optionsProp,
     isDisabled,
-    leftIcon,
-    rightIcon = /* @__PURE__ */ jsxRuntime.jsx(core.ChevronDownIcon, {}),
-    multiple,
-    size,
-    variant,
-    menuListProps,
-    renderValue = (value2) => value2 == null ? void 0 : value2.join(", "),
-    ...rest
+    renderValue = (value2) => typeof value2 === "string" ? value2 : value2 == null ? void 0 : value2.join(", ")
   } = props;
-  const menuProps = react.omitThemingProps(rest);
-  const [currentValue, setCurrentValue] = React12__namespace.useState(value || defaultValue);
+  const [currentValue, setCurrentValue] = react.useControllableState({
+    value,
+    defaultValue,
+    onChange
+  });
   const controlProps = react.useFormControl({ name });
-  const options = React12__namespace.useMemo(
+  const options = React11__namespace.default.useMemo(
     () => optionsProp && mapOptions(optionsProp),
     [optionsProp]
   );
   const handleChange = (value2) => {
     setCurrentValue(value2);
-    onChange == null ? void 0 : onChange(value2);
-  };
-  const buttonProps = {
-    isDisabled,
-    leftIcon,
-    rightIcon,
-    size,
-    variant
   };
-  const getDisplayValue = React12__namespace.useCallback(
+  const getDisplayValue = React11__namespace.default.useCallback(
     (value2) => {
       if (!options) {
         return value2;
       }
       for (const option of options) {
-        if (option.label && option.value === value2) {
-          return option.label;
+        if (option.value === value2) {
+          return option.label || option.value;
         }
       }
       return value2;
     },
     [options]
   );
-  const displayValue = currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
-    getDisplayValue
-  ) : [];
-  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,
+  const displayValue = React11__namespace.default.useMemo(
+    () => currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
+      getDisplayValue
+    ) : [],
+    [currentValue, getDisplayValue]
+  );
+  return {
+    defaultValue,
+    value: currentValue,
+    displayValue,
+    renderValue,
+    onChange: handleChange,
+    options,
+    multiple,
+    controlProps,
+    placeholder,
+    isDisabled
+  };
+};
+var SelectButton = react.forwardRef(
+  (props, ref) => {
+    var _a, _b, _c, _d, _e;
+    const styles = react.useMultiStyleConfig("SuiSelect", props);
+    const {
+      displayValue,
+      renderValue,
+      placeholder,
+      isDisabled: isSelectDisabled
+    } = useSelectContext();
+    const {
+      isInvalid,
+      isReadOnly,
+      isDisabled,
+      isFocused,
+      isRequired,
+      id,
+      onBlur,
+      onFocus
+    } = react.useFormControlContext();
+    const { rightIcon = /* @__PURE__ */ jsxRuntime.jsx(core.ChevronDownIcon, {}), ...rest } = props;
+    const focusStyles = (_a = styles.field) == null ? void 0 : _a._focusVisible;
+    const readOnlyStyles = (_b = styles.field) == null ? void 0 : _b._readOnly;
+    const invalid = (_c = styles.field) == null ? void 0 : _c._invalid;
+    const height = ((_d = styles.field) == null ? void 0 : _d.h) || ((_e = styles.field) == null ? void 0 : _e.height);
+    const buttonStyles = {
+      fontWeight: "normal",
+      textAlign: "left",
+      color: "inherit",
+      _active: {
+        bg: "transparent"
+      },
+      minH: height,
+      _focus: focusStyles,
+      _expanded: focusStyles,
+      _readOnly: readOnlyStyles,
+      _invalid: invalid,
+      ...styles.field,
+      h: "auto"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      react.MenuButton,
       {
-        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
+        as: react.Button,
+        id,
+        ...rest,
+        onFocus,
+        onBlur,
+        isDisabled: isDisabled || isSelectDisabled,
+        "data-invalid": utils.dataAttr(isInvalid),
+        "data-read-only": utils.dataAttr(isReadOnly),
+        "data-focus": utils.dataAttr(isFocused),
+        "data-required": utils.dataAttr(isRequired),
+        rightIcon,
+        ref,
+        sx: buttonStyles,
+        children: renderValue(displayValue) || placeholder
       }
-    ) }),
+    );
+  }
+);
+SelectButton.displayName = "SelectButton";
+var Select = react.forwardRef((props, ref) => {
+  const { name, children, isDisabled, multiple, ...rest } = props;
+  const menuProps = react.omitThemingProps(rest);
+  const context = useSelect(props);
+  const { value, controlProps } = context;
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(react.Menu, { ...menuProps, closeOnSelect: !multiple, children: /* @__PURE__ */ jsxRuntime.jsxs(react.chakra.div, { className: utils.cx("sui-select"), children: [
+    children,
     /* @__PURE__ */ jsxRuntime.jsx(
       react.chakra.input,
       {
         ...controlProps,
+        ref,
         name,
         type: "hidden",
-        value: currentValue,
+        value: value || "",
         className: "saas-select__input"
       }
     )
-  ] }) });
+  ] }) }) });
 });
+var SelectList = (props) => {
+  const { defaultValue, value, options, multiple, onChange } = useSelectContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(react.MenuList, { maxH: "100vh", overflowY: "auto", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    react.MenuOptionGroup,
+    {
+      defaultValue: defaultValue || value,
+      value,
+      onChange,
+      type: multiple ? "checkbox" : "radio",
+      children: options ? options.map(({ value: value2, label, ...rest }, i) => /* @__PURE__ */ jsxRuntime.jsx(SelectOption, { value: value2, ...rest, children: label || value2 }, i)) : props.children
+    }
+  ) });
+};
 Select.displayName = "Select";
+var SelectOption = react.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(react.MenuItemOption, { ref, ...props });
+  }
+);
+SelectOption.id = "MenuItemOption";
+SelectOption.displayName = "SelectOption";
 var NativeSelect = react.forwardRef(
   ({ options, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(react.Select, { ref, ...props, children: children || (options == null ? void 0 : options.map(({ value, label }) => {
@@ -2632,7 +371,7 @@ var getError = (name, formState) => {
 };
 var BaseField = (props) => {
   const { name, label, help, hideLabel, children, ...controlProps } = props;
-  const { formState } = reactHookForm.useFormContext();
+  const { formState } = useFormContext();
   const error = getError(name, formState);
   return /* @__PURE__ */ jsxRuntime.jsxs(react.FormControl, { ...controlProps, isInvalid: !!error, children: [
     label && !hideLabel ? /* @__PURE__ */ jsxRuntime.jsx(react.FormLabel, { children: label }) : null,
@@ -2694,7 +433,7 @@ var _createField = (InputComponent, { displayName, hideLabel, BaseField: BaseFie
 var withControlledInput = (InputComponent) => {
   return react.forwardRef(
     ({ name, rules, ...inputProps }, ref) => {
-      const { control } = reactHookForm.useFormContext();
+      const { control } = useFormContext();
       return /* @__PURE__ */ jsxRuntime.jsx(
         reactHookForm.Controller,
         {
@@ -2719,7 +458,7 @@ var withControlledInput = (InputComponent) => {
 var withUncontrolledInput = (InputComponent) => {
   return react.forwardRef(
     ({ name, rules, ...inputProps }, ref) => {
-      const { register } = reactHookForm.useFormContext();
+      const { register } = useFormContext();
       const { ref: _ref, ...field } = register(name, rules);
       return /* @__PURE__ */ jsxRuntime.jsx(
         InputComponent,
@@ -2735,7 +474,7 @@ var withUncontrolledInput = (InputComponent) => {
   );
 };
 var createField = (component, options) => {
-  var _a2;
+  var _a;
   let InputComponent;
   if (options == null ? void 0 : options.isControlled) {
     InputComponent = withControlledInput(component);
@@ -2743,7 +482,7 @@ var createField = (component, options) => {
     InputComponent = withUncontrolledInput(component);
   }
   const Field2 = _createField(InputComponent, {
-    displayName: `${(_a2 = component.displayName) != null ? _a2 : "Custom"}Field`,
+    displayName: `${(_a = component.displayName) != null ? _a : "Custom"}Field`,
     hideLabel: options == null ? void 0 : options.hideLabel,
     BaseField: (options == null ? void 0 : options.BaseField) || BaseField
   });
@@ -2780,9 +519,17 @@ var SwitchField = createField(
     isControlled: true
   }
 );
-var SelectField = createField(Select, {
-  isControlled: true
-});
+var SelectField = createField(
+  react.forwardRef((props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Select, { ref, ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SelectButton, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(SelectList, {})
+    ] });
+  }),
+  {
+    isControlled: true
+  }
+);
 var CheckboxField = createField(
   react.forwardRef(({ label, type, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(react.Checkbox, { ref, ...props, children: label });
@@ -2825,7 +572,7 @@ var defaultFieldTypes = {
   pin: PinField,
   "native-select": NativeSelectField
 };
-var FieldsContext = React12__namespace.default.createContext(
+var FieldsContext = React11__namespace.default.createContext(
   null
 );
 var FieldsProvider = (props) => {
@@ -2833,119 +580,26 @@ var FieldsProvider = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(FieldsContext.Provider, { value: fields, children: props.children });
 };
 var useField = (type) => {
-  const context = React12__namespace.default.useContext(FieldsContext);
+  const context = React11__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) => {
-  const getFields = () => {
-    return mapFields(schema);
-  };
-  const getNestedFields = (name) => {
-    var _a2;
-    const field = utils.get(schema, name);
-    if (!field)
-      return [];
-    if (((_a2 = field.items) == null ? void 0 : _a2.type) === "object") {
-      return mapFields(field.items.properties);
-    } else if (field.type === "object") {
-      return mapFields(field.properties);
-    }
-    return [field.items];
-  };
-  return { getFields, getNestedFields };
-};
-var Form = react.forwardRef(
+var Field = React11__namespace.forwardRef(
   (props, ref) => {
-    var _a2;
-    const {
-      mode = "all",
-      resolver,
-      reValidateMode,
-      shouldFocusError,
-      shouldUnregister,
-      shouldUseNativeValidation,
-      criteriaMode,
-      delayError,
-      schema,
-      defaultValues,
-      values,
-      context,
-      resetOptions,
-      onChange,
-      onSubmit,
-      onError,
-      formRef,
-      children,
-      ...rest
-    } = props;
-    const form = {
-      mode,
-      resolver,
-      defaultValues,
-      values,
-      reValidateMode,
-      shouldFocusError,
-      shouldUnregister,
-      shouldUseNativeValidation,
-      criteriaMode,
-      delayError,
-      context,
-      resetOptions
-    };
-    if (schema && !resolver) {
-      form.resolver = (_a2 = Form.getResolver) == null ? void 0 : _a2.call(Form, schema);
-    }
-    const methods = reactHookForm.useForm(form);
-    const { handleSubmit } = methods;
-    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]);
-    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
-        })
-      }
-    ) });
+    const { type = defaultInputType, name } = props;
+    const overrides = useFieldProps(name);
+    const InputComponent = useField((overrides == null ? void 0 : overrides.type) || type);
+    return /* @__PURE__ */ jsxRuntime.jsx(InputComponent, { ref, ...props, ...overrides });
   }
 );
-Form.getFieldResolver = objectFieldResolver;
-Form.displayName = "Form";
 var FormLayoutItem = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.chakra.div, { children });
 };
 FormLayoutItem.displayName = "FormLayoutItem";
 var FormLayout = ({ children, ...props }) => {
-  var _a2, _b, _c;
+  var _a, _b, _c;
   const theme = react.useTheme();
-  const defaultProps = (_c = (_b = (_a2 = theme.components) == null ? void 0 : _a2.SuiFormLayout) == null ? void 0 : _b.defaultProps) != null ? _c : {
+  const defaultProps = (_c = (_b = (_a = theme.components) == null ? void 0 : _a.SuiFormLayout) == null ? void 0 : _b.defaultProps) != null ? _c : {
     spacing: 4
   };
   const gridProps = {
@@ -2957,8 +611,8 @@ var FormLayout = ({ children, ...props }) => {
     {
       ...gridProps,
       className: utils.cx("sui-form__layout", props.className),
-      children: React12__namespace.Children.map(children, (child) => {
-        if (React12__namespace.isValidElement(child)) {
+      children: React11__namespace.Children.map(children, (child) => {
+        if (React11__namespace.isValidElement(child)) {
           return /* @__PURE__ */ jsxRuntime.jsx(FormLayoutItem, { children: child });
         }
         return child;
@@ -2980,7 +634,7 @@ var useArrayField = ({
   min,
   max
 }) => {
-  const { control } = reactHookForm.useFormContext();
+  const { control } = useFormContext();
   const context = reactHookForm.useFieldArray({
     control,
     name,
@@ -2995,9 +649,9 @@ var useArrayField = ({
   };
 };
 var useArrayFieldRow = ({ index }) => {
-  const { clearErrors } = reactHookForm.useFormContext();
+  const { clearErrors } = useFormContext();
   const { name, remove, fields } = useArrayFieldContext();
-  React12__namespace.useEffect(() => {
+  React11__namespace.useEffect(() => {
     clearErrors(name);
   }, []);
   return {
@@ -3005,7 +659,7 @@ var useArrayFieldRow = ({ index }) => {
     isFirst: index === 0,
     isLast: index === fields.length - 1,
     name: `${name}.${index}`,
-    remove: React12__namespace.useCallback(() => {
+    remove: React11__namespace.useCallback(() => {
       clearErrors(name);
       remove(index);
     }, [index])
@@ -3066,7 +720,7 @@ var ArrayFieldRowContainer = ({
 };
 ArrayFieldRowContainer.displayName = "ArrayFieldRowContainer";
 var ArrayFieldRemoveButton = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Button, { "aria-label": "Remove row", ...useArrayFieldRemoveButton(), ...props, children: props.children || /* @__PURE__ */ jsxRuntime.jsx(MinusIcon, {}) });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Button, { "aria-label": "Remove row", ...useArrayFieldRemoveButton(), ...props, children: props.children || /* @__PURE__ */ jsxRuntime.jsx(icons.MinusIcon, {}) });
 };
 ArrayFieldRemoveButton.displayName = "ArrayFieldRemoveButton";
 var ArrayFieldAddButton = (props) => {
@@ -3077,7 +731,7 @@ var ArrayFieldAddButton = (props) => {
       float: "right",
       ...useArrayFieldAddButton(),
       ...props,
-      children: props.children || /* @__PURE__ */ jsxRuntime.jsx(AddIcon, {})
+      children: props.children || /* @__PURE__ */ jsxRuntime.jsx(icons.PlusIcon, {})
     }
   );
 };
@@ -3085,8 +739,9 @@ ArrayFieldAddButton.displayName = "ArrayFieldAddButton";
 var ArrayField = react.forwardRef(
   (props, ref) => {
     const { children, ...containerProps } = props;
+    const rowFn = utils.isFunction(children) ? children : (fields) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fields.map(({ id }, index) => /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldRow, { index, children }, id)) || 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(ArrayFieldRows, { children: rowFn }),
       /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldAddButton, {})
     ] });
   }
@@ -3099,7 +754,7 @@ var ArrayFieldRows = ({
   return children(fields);
 };
 ArrayFieldRows.displayName = "ArrayFieldRows";
-var ArrayFieldContainer = React12__namespace.forwardRef(
+var ArrayFieldContainer = React11__namespace.forwardRef(
   ({
     name,
     defaultValue,
@@ -3116,7 +771,7 @@ var ArrayFieldContainer = React12__namespace.forwardRef(
       min,
       max
     });
-    React12__namespace.useImperativeHandle(ref, () => context, [ref, context]);
+    React11__namespace.useImperativeHandle(ref, () => context, [ref, context]);
     return /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(BaseField, { name, ...fieldProps, children }) });
   }
 );
@@ -3134,8 +789,8 @@ var ObjectField = (props) => {
 };
 ObjectField.displayName = "ObjectField";
 var mapNestedFields2 = (resolver, name) => {
-  var _a2;
-  return (_a2 = resolver.getNestedFields(name)) == null ? void 0 : _a2.map(
+  var _a;
+  return (_a = resolver.getNestedFields(name)) == null ? void 0 : _a.map(
     ({ name: name2, type, ...nestedFieldProps }, i) => /* @__PURE__ */ jsxRuntime.jsx(
       Field,
       {
@@ -3148,24 +803,27 @@ var mapNestedFields2 = (resolver, name) => {
   );
 };
 var AutoFields = ({
-  schema,
-  fieldResolver,
+  schema: schemaProp,
+  fieldResolver: fieldResolverProp,
   focusFirstField,
   ...props
 }) => {
-  const resolver = React12__namespace.useMemo(
-    () => fieldResolver || Form.getFieldResolver(schema),
-    [schema, fieldResolver]
-  );
-  const fields = React12__namespace.useMemo(() => resolver.getFields(), [resolver]);
-  const form = reactHookForm.useFormContext();
-  React12__namespace.useEffect(() => {
-    var _a2;
-    if (focusFirstField && ((_a2 = fields[0]) == null ? void 0 : _a2.name)) {
+  const context = useFormContext();
+  const schema = schemaProp || context.schema;
+  const fieldResolver = fieldResolverProp || context.fieldResolver;
+  const resolver = React11__namespace.useMemo(() => fieldResolver, [schema, fieldResolver]);
+  const fields = React11__namespace.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
+  const form = useFormContext();
+  React11__namespace.useEffect(() => {
+    var _a;
+    if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
       form.setFocus(fields[0].name);
     }
   }, [schema, fieldResolver, focusFirstField]);
-  return /* @__PURE__ */ jsxRuntime.jsx(FormLayout, { ...props, children: fields.map(
+  if (!resolver) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(FormLayout, { ...props, children: fields == null ? void 0 : fields.map(
     ({
       name,
       type,
@@ -3213,23 +871,6 @@ SubmitButton.defaultProps = {
   disableIfInvalid: false
 };
 SubmitButton.displayName = "SubmitButton";
-var AutoForm = react.forwardRef(
-  (props, ref) => {
-    const {
-      schema,
-      submitLabel = "Submit",
-      fieldResolver,
-      children,
-      ...rest
-    } = props;
-    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";
 var DisplayIf = ({
   children,
   name,
@@ -3244,10 +885,94 @@ var DisplayIf = ({
     disabled: isDisabled,
     exact: isExact
   });
-  const context = reactHookForm.useFormContext();
+  const context = useFormContext();
   return condition(value, context) ? children : null;
 };
 DisplayIf.displayName = "DisplayIf";
+var Form = react.forwardRef(
+  (props, ref) => {
+    const {
+      mode = "all",
+      resolver,
+      fieldResolver,
+      fields,
+      reValidateMode,
+      shouldFocusError,
+      shouldUnregister,
+      shouldUseNativeValidation,
+      criteriaMode,
+      delayError,
+      schema,
+      defaultValues,
+      values,
+      context,
+      resetOptions,
+      onChange,
+      onSubmit,
+      onError,
+      formRef,
+      children,
+      ...rest
+    } = props;
+    const form = {
+      mode,
+      resolver,
+      defaultValues,
+      values,
+      reValidateMode,
+      shouldFocusError,
+      shouldUnregister,
+      shouldUseNativeValidation,
+      criteriaMode,
+      delayError,
+      context,
+      resetOptions
+    };
+    const methods = reactHookForm.useForm(form);
+    const { handleSubmit } = methods;
+    React11__namespace.useImperativeHandle(formRef, () => methods, [formRef, methods]);
+    React11__namespace.useEffect(() => {
+      let subscription;
+      if (onChange) {
+        subscription = methods.watch(onChange);
+      }
+      return () => subscription == null ? void 0 : subscription.unsubscribe();
+    }, [methods, onChange]);
+    let _children = children;
+    if (!_children && fieldResolver) {
+      _children = /* @__PURE__ */ jsxRuntime.jsxs(FormLayout, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AutoFields, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(SubmitButton, { ...fields == null ? void 0 : fields.submit })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      FormProvider,
+      {
+        ...methods,
+        schema,
+        fieldResolver,
+        fields,
+        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,
+              DisplayIf,
+              ArrayField,
+              ObjectField,
+              ...methods
+            })
+          }
+        )
+      }
+    );
+  }
+);
+Form.displayName = "Form";
 var [StepFormProvider, useStepFormContext] = reactUtils.createContext({
   name: "StepFormContext",
   errorMessage: "useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`"
@@ -3256,14 +981,14 @@ function useStepForm(props) {
   const { onChange, ...rest } = props;
   const stepper = core.useStepper(rest);
   const { activeStep, isLastStep, nextStep } = stepper;
-  const [steps, updateSteps] = React12__namespace.useState({});
-  const onSubmitStep = React12__namespace.useCallback(
+  const [steps, updateSteps] = React11__namespace.useState({});
+  const onSubmitStep = React11__namespace.useCallback(
     async (data) => {
-      var _a2, _b;
+      var _a, _b;
       try {
         const step = steps[activeStep];
         if (isLastStep) {
-          await ((_a2 = props.onSubmit) == null ? void 0 : _a2.call(props, data));
+          await ((_a = props.onSubmit) == null ? void 0 : _a.call(props, data));
           updateStep({
             ...step,
             isCompleted: true
@@ -3278,7 +1003,7 @@ function useStepForm(props) {
     },
     [steps, activeStep, isLastStep]
   );
-  const getFormProps = React12__namespace.useCallback(() => {
+  const getFormProps = React11__namespace.useCallback(() => {
     const step = steps[activeStep];
     return {
       onSubmit: onSubmitStep,
@@ -3286,7 +1011,7 @@ function useStepForm(props) {
       resolver: step == null ? void 0 : step.resolver
     };
   }, [steps, onSubmitStep, activeStep]);
-  const updateStep = React12__namespace.useCallback(
+  const updateStep = React11__namespace.useCallback(
     (step) => {
       updateSteps((steps2) => {
         return {
@@ -3308,7 +1033,7 @@ function useFormStep(props) {
   const { name, schema, resolver, onSubmit } = props;
   const step = core.useStep({ name });
   const { steps, updateStep } = useStepFormContext();
-  React12__namespace.useEffect(() => {
+  React11__namespace.useEffect(() => {
     updateStep({ name, schema, resolver, onSubmit });
   }, [name, schema]);
   return {
@@ -3316,20 +1041,20 @@ function useFormStep(props) {
     ...steps[name] || { name, schema }
   };
 }
-var StepForm = React12__namespace.forwardRef(
+var StepForm = React11__namespace.forwardRef(
   (props, ref) => {
     const { children, ...rest } = props;
     const stepper = useStepForm(props);
     const { getFormProps, ...ctx } = stepper;
-    const context = React12__namespace.useMemo(() => ctx, [ctx]);
+    const context = React11__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 = React12__namespace.Children.map(children, (child) => {
-    if (React12__namespace.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
+  const elements = React11__namespace.Children.map(children, (child) => {
+    if (React11__namespace.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
       const { isCompleted } = useFormStep(child.props);
       return /* @__PURE__ */ jsxRuntime.jsx(
         core.StepperStep,
@@ -3344,7 +1069,7 @@ var FormStepper = (props) => {
     }
     return child;
   });
-  const onChange = React12__namespace.useCallback((i) => {
+  const onChange = React11__namespace.useCallback((i) => {
     setIndex(i);
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3395,9 +1120,35 @@ var NextButton = (props) => {
   );
 };
 NextButton.displayName = "NextButton";
+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) => {
+  const getFields = () => {
+    return mapFields(schema);
+  };
+  const getNestedFields = (name) => {
+    var _a;
+    const field = utils.get(schema, name);
+    if (!field)
+      return [];
+    if (((_a = field.items) == null ? void 0 : _a.type) === "object") {
+      return mapFields(field.items.properties);
+    } else if (field.type === "object") {
+      return mapFields(field.properties);
+    }
+    return [field.items];
+  };
+  return { getFields, getNestedFields };
+};
 var WatchField = (props) => {
   const { name, defaultValue, isDisabled, isExact } = props;
-  const form = reactHookForm.useFormContext();
+  const form = useFormContext();
   const field = reactHookForm.useWatch({
     name,
     defaultValue,
@@ -3408,23 +1159,31 @@ var WatchField = (props) => {
 };
 function createForm({
   resolver,
+  fieldResolver = objectFieldResolver,
   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 }) });
-  };
+  const CreateForm = react.forwardRef(
+    (props, ref) => {
+      const { schema, ...rest } = props;
+      return /* @__PURE__ */ jsxRuntime.jsx(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Form,
+        {
+          ref,
+          resolver: resolver == null ? void 0 : resolver(props.schema),
+          fieldResolver: fieldResolver == null ? void 0 : fieldResolver(schema),
+          ...rest
+        }
+      ) });
+    }
+  );
   return CreateForm;
 }
+var Form2 = createForm();
 
 Object.defineProperty(exports, 'Controller', {
   enumerable: true,
   get: function () { return reactHookForm.Controller; }
 });
-Object.defineProperty(exports, 'FormProvider', {
-  enumerable: true,
-  get: function () { return reactHookForm.FormProvider; }
-});
 Object.defineProperty(exports, 'appendErrors', {
   enumerable: true,
   get: function () { return reactHookForm.appendErrors; }
@@ -3441,10 +1200,6 @@ Object.defineProperty(exports, 'useForm', {
   enumerable: true,
   get: function () { return reactHookForm.useForm; }
 });
-Object.defineProperty(exports, 'useFormContext', {
-  enumerable: true,
-  get: function () { return reactHookForm.useFormContext; }
-});
 Object.defineProperty(exports, 'useFormState', {
   enumerable: true,
   get: function () { return reactHookForm.useFormState; }
@@ -3464,16 +1219,17 @@ exports.ArrayFieldRowFields = ArrayFieldRowFields;
 exports.ArrayFieldRowProvider = ArrayFieldRowProvider;
 exports.ArrayFieldRows = ArrayFieldRows;
 exports.AutoFields = AutoFields;
-exports.AutoForm = AutoForm;
 exports.BaseField = BaseField;
+exports.BaseForm = Form;
 exports.CheckboxField = CheckboxField;
 exports.DisplayField = DisplayField;
 exports.DisplayIf = DisplayIf;
 exports.Field = Field;
 exports.FieldsProvider = FieldsProvider;
-exports.Form = Form;
+exports.Form = Form2;
 exports.FormLayout = FormLayout;
 exports.FormLegend = FormLegend;
+exports.FormProvider = FormProvider;
 exports.FormStep = FormStep;
 exports.FormStepper = FormStepper;
 exports.FormValue = FormValue;
@@ -3491,7 +1247,10 @@ exports.PrevButton = PrevButton;
 exports.RadioField = RadioField;
 exports.RadioInput = RadioInput;
 exports.Select = Select;
+exports.SelectButton = SelectButton;
 exports.SelectField = SelectField;
+exports.SelectList = SelectList;
+exports.SelectOption = SelectOption;
 exports.StepForm = StepForm;
 exports.StepFormProvider = StepFormProvider;
 exports.SubmitButton = SubmitButton;
@@ -3509,6 +1268,7 @@ exports.useArrayFieldRemoveButton = useArrayFieldRemoveButton;
 exports.useArrayFieldRow = useArrayFieldRow;
 exports.useArrayFieldRowContext = useArrayFieldRowContext;
 exports.useField = useField;
+exports.useFormContext = useFormContext;
 exports.useFormStep = useFormStep;
 exports.useStepForm = useStepForm;
 exports.useStepFormContext = useStepFormContext;