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

package/dist/index.mjs

@@ -1,857 +1,37 @@
-import { useForm, FormProvider, useFormContext, useFieldArray, useWatch, get as get$1, Controller } from 'react-hook-form';
-export { Controller, FormProvider, appendErrors, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
-import { forwardRef, NumberInput as NumberInput$1, NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper, InputRightElement, Button, InputGroup, Input, RadioGroup, Stack, Radio, useMultiStyleConfig, MenuButton, omitThemingProps, useFormControl, Menu, chakra as chakra$1, MenuList, MenuOptionGroup, MenuItemOption, Select as Select$1, Switch, Checkbox, HStack, PinInput, FormControl, FormLabel, Text, Box, FormHelperText, FormErrorMessage, PinInputField, useTheme as useTheme$1, SimpleGrid, useStyleConfig as useStyleConfig$1, useMergeRefs, Textarea } from '@chakra-ui/react';
+import * as React11 from 'react';
+import React11__default, { createContext, useState, useContext } from 'react';
+import { useFormContext as useFormContext$1, useForm, FormProvider as FormProvider$1, useFieldArray, useWatch, get, Controller } from 'react-hook-form';
+export { Controller, appendErrors, useController, useFieldArray, useForm, useFormState, useWatch } from 'react-hook-form';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import * as React12 from 'react';
-import React12__default, { createContext, useState, forwardRef as forwardRef$1, Children, useContext, useRef } from 'react';
+import { forwardRef, NumberInput as NumberInput$1, NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper, InputRightElement, Button, InputGroup, Input, RadioGroup, Stack, Radio, useMultiStyleConfig, useFormControlContext, MenuButton, omitThemingProps, Menu, chakra, MenuItemOption, Select as Select$1, Switch, Checkbox, HStack, PinInput, FormControl, FormLabel, Text, useControllableState, useFormControl, MenuList, MenuOptionGroup, Box, FormHelperText, FormErrorMessage, PinInputField, useTheme, SimpleGrid, useStyleConfig, useMergeRefs, Textarea } from '@chakra-ui/react';
 import { StepperProvider, ChevronUpIcon, ChevronDownIcon, useStepper, useStep, useStepperContext, StepperStep, StepperContainer, StepperSteps } from '@saas-ui/core';
-import { ThemeContext } from '@emotion/react';
-import { cx as cx$1, runIfFn as runIfFn$1, callAllHandlers, get as get$2, memoizedGet as memoizedGet$1, mergeWith, filterUndefined, omit, objectFilter } from '@chakra-ui/utils';
-import createStyled from '@emotion/styled';
+import { ViewIcon, ViewOffIcon, MinusIcon, PlusIcon } from '@saas-ui/core/icons';
+import { dataAttr, cx, isFunction, runIfFn, callAllHandlers, get as get$1 } from '@chakra-ui/utils';
 import { createContext as createContext$1 } from '@chakra-ui/react-utils';
 
-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 = createContext(null);
+var useFormContext = () => {
+  const context = useContext(FormContext);
+  const hookContext = useFormContext$1();
+  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__ */ jsx(FormProvider$1, { ...rest, children: /* @__PURE__ */ 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,
@@ -876,1528 +56,18 @@ var NumberInput = forwardRef((props, ref) => {
     decrementIcon = /* @__PURE__ */ jsx(ChevronDownIcon, {}),
     ...rest
   } = props;
-  return /* @__PURE__ */ jsxs(NumberInput$1, { ...rest, ref, children: [
-    /* @__PURE__ */ jsx(NumberInputField, {}),
-    !hideStepper && /* @__PURE__ */ jsxs(NumberInputStepper, { children: [
-      /* @__PURE__ */ jsx(NumberIncrementStepper, { children: incrementIcon }),
-      /* @__PURE__ */ jsx(NumberDecrementStepper, { children: decrementIcon })
-    ] })
-  ] });
-});
-NumberInput.defaultProps = {
-  hideStepper: false
-};
-NumberInput.displayName = "NumberInput";
-function useTheme() {
-  const theme = useContext(
-    ThemeContext
-  );
-  if (!theme) {
-    throw Error(
-      "useTheme: `theme` is undefined. Seems you forgot to wrap your app in `<ChakraProvider />` or `<ThemeProvider />`"
-    );
-  }
-  return theme;
-}
-var ColorModeContext = createContext({});
-ColorModeContext.displayName = "ColorModeContext";
-function useColorMode() {
-  const context = 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 ? memoizedGet$1(theme, `components.${themeKey}`) : void 0;
-  const styleConfig = styleConfigProp || themeStyleConfig;
-  const mergedProps = mergeWith(
-    { theme, colorMode },
-    (_a2 = styleConfig == null ? void 0 : styleConfig.defaultProps) != null ? _a2 : {},
-    filterUndefined(omit(rest, ["children"]))
-  );
-  const stylesRef = 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) != null ? _a : createStyled;
-var toCSSObject = ({ baseStyle }) => (props) => {
-  const { theme, css: cssProp, __css, sx, ...rest } = props;
-  const styleProps2 = objectFilter(rest, (_, prop) => isStyleProp(prop));
-  const finalBaseStyle = runIfFn$1(baseStyle, props);
-  const finalStyles = assignAfter(
-    {},
-    __css,
-    finalBaseStyle,
-    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__default.forwardRef(function ChakraComponent(props, ref) {
-    const { colorMode, forced } = useColorMode();
-    return React12__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 forwardRef$1(component);
-}
-var fallbackIcon = {
-  path: /* @__PURE__ */ jsxs("g", { stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(chakra.svg, { as: element, ...shared, ...rest });
-  }
-  const _path = children != null ? children : fallbackIcon.path;
-  return /* @__PURE__ */ 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 = Children.toArray(options.path);
-  const Comp = forwardRef2((props, ref) => /* @__PURE__ */ jsx(Icon, { ref, viewBox, ...defaultProps, ...props, children: path.length ? path : /* @__PURE__ */ jsx("path", { fill: "currentColor", d: pathDefinition }) }));
-  Comp.displayName = displayName;
-  return Comp;
-}
-var ViewOffIcon = createIcon({
-  displayName: "ViewOffIcon",
-  path: /* @__PURE__ */ jsxs("g", { fill: "currentColor", children: [
-    /* @__PURE__ */ 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__ */ 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__ */ jsxs("g", { fill: "currentColor", children: [
-    /* @__PURE__ */ 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__ */ jsx("circle", { cx: "12", cy: "12", r: "2" })
-  ] })
-});
-var MinusIcon = createIcon({
-  displayName: "MinusIcon",
-  path: /* @__PURE__ */ jsx("g", { fill: "currentColor", children: /* @__PURE__ */ 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"
+  return /* @__PURE__ */ jsxs(NumberInput$1, { ...rest, ref, children: [
+    /* @__PURE__ */ jsx(NumberInputField, {}),
+    !hideStepper && /* @__PURE__ */ jsxs(NumberInputStepper, { children: [
+      /* @__PURE__ */ jsx(NumberIncrementStepper, { children: incrementIcon }),
+      /* @__PURE__ */ jsx(NumberDecrementStepper, { children: decrementIcon })
+    ] })
+  ] });
 });
+NumberInput.defaultProps = {
+  hideStepper: false
+};
+NumberInput.displayName = "NumberInput";
 var InputRightButton = forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(InputRightElement, { w: "auto", px: "1", py: "1", alignItems: "stretch", children: /* @__PURE__ */ jsx(Button, { ref, height: "auto", ...props }) });
@@ -2457,11 +127,17 @@ var PasswordInput = forwardRef(
 );
 PasswordInput.displayName = "PasswordInput";
 var mapNestedFields = (name, children) => {
-  return React12.Children.map(children, (child) => {
-    if (React12.isValidElement(child) && child.props.name) {
-      return React12.cloneElement(child, {
+  return React11.Children.map(children, (child) => {
+    if (React11.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.cloneElement(child, {
         ...child.props,
-        name: `${name}.${child.props.name}`
+        name: `${name}.${childName}`
       });
     }
     return child;
@@ -2498,104 +174,170 @@ var RadioInput = forwardRef(
   }
 );
 RadioInput.displayName = "RadioInput";
-var SelectButton = forwardRef((props, ref) => {
-  const styles = 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__ */ jsx(MenuButton, { as: Button, ...props, ref, sx: buttonStyles });
+var [SelectProvider, useSelectContext] = createContext$1({
+  strict: true
 });
-SelectButton.displayName = "SelectButton";
-var Select = forwardRef((props, ref) => {
+var useSelect = (props) => {
   const {
     name,
-    options: optionsProp,
-    children,
-    onChange,
-    defaultValue,
     value,
+    defaultValue,
+    onChange,
+    multiple,
     placeholder,
+    options: optionsProp,
     isDisabled,
-    leftIcon,
-    rightIcon = /* @__PURE__ */ jsx(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 = omitThemingProps(rest);
-  const [currentValue, setCurrentValue] = React12.useState(value || defaultValue);
+  const [currentValue, setCurrentValue] = useControllableState({
+    value,
+    defaultValue,
+    onChange
+  });
   const controlProps = useFormControl({ name });
-  const options = React12.useMemo(
+  const options = React11__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.useCallback(
+  const getDisplayValue = React11__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__ */ jsx(Menu, { ...menuProps, closeOnSelect: !multiple, children: /* @__PURE__ */ jsxs(chakra$1.div, { className: cx$1("sui-select"), children: [
-    /* @__PURE__ */ jsx(SelectButton, { ref, ...buttonProps, children: renderValue(displayValue) || placeholder }),
-    /* @__PURE__ */ jsx(MenuList, { maxH: "60vh", overflowY: "auto", ...menuListProps, children: /* @__PURE__ */ jsx(
-      MenuOptionGroup,
+  const displayValue = React11__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 = forwardRef(
+  (props, ref) => {
+    var _a, _b, _c, _d, _e;
+    const styles = useMultiStyleConfig("SuiSelect", props);
+    const {
+      displayValue,
+      renderValue,
+      placeholder,
+      isDisabled: isSelectDisabled
+    } = useSelectContext();
+    const {
+      isInvalid,
+      isReadOnly,
+      isDisabled,
+      isFocused,
+      isRequired,
+      id,
+      onBlur,
+      onFocus
+    } = useFormControlContext();
+    const { rightIcon = /* @__PURE__ */ jsx(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__ */ jsx(
+      MenuButton,
       {
-        defaultValue: defaultValue || value,
-        onChange: handleChange,
-        type: multiple ? "checkbox" : "radio",
-        children: options ? options.map(({ value: value2, label, ...rest2 }, i) => /* @__PURE__ */ jsx(MenuItemOption, { value: value2, ...rest2, children: label || value2 }, i)) : children
+        as: Button,
+        id,
+        ...rest,
+        onFocus,
+        onBlur,
+        isDisabled: isDisabled || isSelectDisabled,
+        "data-invalid": dataAttr(isInvalid),
+        "data-read-only": dataAttr(isReadOnly),
+        "data-focus": dataAttr(isFocused),
+        "data-required": dataAttr(isRequired),
+        rightIcon,
+        ref,
+        sx: buttonStyles,
+        children: renderValue(displayValue) || placeholder
       }
-    ) }),
+    );
+  }
+);
+SelectButton.displayName = "SelectButton";
+var Select = forwardRef((props, ref) => {
+  const { name, children, isDisabled, multiple, ...rest } = props;
+  const menuProps = omitThemingProps(rest);
+  const context = useSelect(props);
+  const { value, controlProps } = context;
+  return /* @__PURE__ */ jsx(SelectProvider, { value: context, children: /* @__PURE__ */ jsx(Menu, { ...menuProps, closeOnSelect: !multiple, children: /* @__PURE__ */ jsxs(chakra.div, { className: cx("sui-select"), children: [
+    children,
     /* @__PURE__ */ jsx(
-      chakra$1.input,
+      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__ */ jsx(MenuList, { maxH: "100vh", overflowY: "auto", ...props, children: /* @__PURE__ */ jsx(
+    MenuOptionGroup,
+    {
+      defaultValue: defaultValue || value,
+      value,
+      onChange,
+      type: multiple ? "checkbox" : "radio",
+      children: options ? options.map(({ value: value2, label, ...rest }, i) => /* @__PURE__ */ jsx(SelectOption, { value: value2, ...rest, children: label || value2 }, i)) : props.children
+    }
+  ) });
+};
 Select.displayName = "Select";
+var SelectOption = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(MenuItemOption, { ref, ...props });
+  }
+);
+SelectOption.id = "MenuItemOption";
+SelectOption.displayName = "SelectOption";
 var NativeSelect = forwardRef(
   ({ options, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(Select$1, { ref, ...props, children: children || (options == null ? void 0 : options.map(({ value, label }) => {
@@ -2605,7 +347,7 @@ var NativeSelect = forwardRef(
 );
 NativeSelect.displayName = "NativeSelect";
 var getError = (name, formState) => {
-  return get$1(formState.errors, name);
+  return get(formState.errors, name);
 };
 var BaseField = (props) => {
   const { name, label, help, hideLabel, children, ...controlProps } = props;
@@ -2712,7 +454,7 @@ var withUncontrolledInput = (InputComponent) => {
   );
 };
 var createField = (component, options) => {
-  var _a2;
+  var _a;
   let InputComponent;
   if (options == null ? void 0 : options.isControlled) {
     InputComponent = withControlledInput(component);
@@ -2720,7 +462,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
   });
@@ -2757,9 +499,17 @@ var SwitchField = createField(
     isControlled: true
   }
 );
-var SelectField = createField(Select, {
-  isControlled: true
-});
+var SelectField = createField(
+  forwardRef((props, ref) => {
+    return /* @__PURE__ */ jsxs(Select, { ref, ...props, children: [
+      /* @__PURE__ */ jsx(SelectButton, {}),
+      /* @__PURE__ */ jsx(SelectList, {})
+    ] });
+  }),
+  {
+    isControlled: true
+  }
+);
 var CheckboxField = createField(
   forwardRef(({ label, type, ...props }, ref) => {
     return /* @__PURE__ */ jsx(Checkbox, { ref, ...props, children: label });
@@ -2802,7 +552,7 @@ var defaultFieldTypes = {
   pin: PinField,
   "native-select": NativeSelectField
 };
-var FieldsContext = React12__default.createContext(
+var FieldsContext = React11__default.createContext(
   null
 );
 var FieldsProvider = (props) => {
@@ -2810,119 +560,26 @@ var FieldsProvider = (props) => {
   return /* @__PURE__ */ jsx(FieldsContext.Provider, { value: fields, children: props.children });
 };
 var useField = (type) => {
-  const context = React12__default.useContext(FieldsContext);
+  const context = React11__default.useContext(FieldsContext);
   return (context == null ? void 0 : context[type]) || InputField;
 };
 var defaultInputType = "text";
-var Field = React12.forwardRef(
-  (props, ref) => {
-    const { type = defaultInputType } = props;
-    const InputComponent = useField(type);
-    return /* @__PURE__ */ 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 = get$2(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 = forwardRef(
+var Field = React11.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 = useForm(form);
-    const { handleSubmit } = methods;
-    React12.useImperativeHandle(formRef, () => methods, [formRef, methods]);
-    React12.useEffect(() => {
-      let subscription;
-      if (onChange) {
-        subscription = methods.watch(onChange);
-      }
-      return () => subscription == null ? void 0 : subscription.unsubscribe();
-    }, [methods, onChange]);
-    return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(
-      chakra$1.form,
-      {
-        ref,
-        onSubmit: handleSubmit(onSubmit, onError),
-        ...rest,
-        className: cx$1("sui-form", props.className),
-        children: runIfFn$1(children, {
-          Field,
-          ...methods
-        })
-      }
-    ) });
+    const { type = defaultInputType, name } = props;
+    const overrides = useFieldProps(name);
+    const InputComponent = useField((overrides == null ? void 0 : overrides.type) || type);
+    return /* @__PURE__ */ jsx(InputComponent, { ref, ...props, ...overrides });
   }
 );
-Form.getFieldResolver = objectFieldResolver;
-Form.displayName = "Form";
 var FormLayoutItem = ({ children }) => {
-  return /* @__PURE__ */ jsx(chakra$1.div, { children });
+  return /* @__PURE__ */ jsx(chakra.div, { children });
 };
 FormLayoutItem.displayName = "FormLayoutItem";
 var FormLayout = ({ children, ...props }) => {
-  var _a2, _b, _c;
-  const theme = useTheme$1();
-  const defaultProps = (_c = (_b = (_a2 = theme.components) == null ? void 0 : _a2.SuiFormLayout) == null ? void 0 : _b.defaultProps) != null ? _c : {
+  var _a, _b, _c;
+  const theme = useTheme();
+  const defaultProps = (_c = (_b = (_a = theme.components) == null ? void 0 : _a.SuiFormLayout) == null ? void 0 : _b.defaultProps) != null ? _c : {
     spacing: 4
   };
   const gridProps = {
@@ -2933,9 +590,9 @@ var FormLayout = ({ children, ...props }) => {
     SimpleGrid,
     {
       ...gridProps,
-      className: cx$1("sui-form__layout", props.className),
-      children: React12.Children.map(children, (child) => {
-        if (React12.isValidElement(child)) {
+      className: cx("sui-form__layout", props.className),
+      children: React11.Children.map(children, (child) => {
+        if (React11.isValidElement(child)) {
           return /* @__PURE__ */ jsx(FormLayoutItem, { children: child });
         }
         return child;
@@ -2974,7 +631,7 @@ var useArrayField = ({
 var useArrayFieldRow = ({ index }) => {
   const { clearErrors } = useFormContext();
   const { name, remove, fields } = useArrayFieldContext();
-  React12.useEffect(() => {
+  React11.useEffect(() => {
     clearErrors(name);
   }, []);
   return {
@@ -2982,7 +639,7 @@ var useArrayFieldRow = ({ index }) => {
     isFirst: index === 0,
     isLast: index === fields.length - 1,
     name: `${name}.${index}`,
-    remove: React12.useCallback(() => {
+    remove: React11.useCallback(() => {
       clearErrors(name);
       remove(index);
     }, [index])
@@ -3039,7 +696,7 @@ var ArrayFieldRowContainer = ({
     width: "100%",
     mb: 4
   };
-  return /* @__PURE__ */ jsx(ArrayFieldRowProvider, { value: context, children: /* @__PURE__ */ jsx(chakra$1.div, { ...rest, __css: styles, children }) });
+  return /* @__PURE__ */ jsx(ArrayFieldRowProvider, { value: context, children: /* @__PURE__ */ jsx(chakra.div, { ...rest, __css: styles, children }) });
 };
 ArrayFieldRowContainer.displayName = "ArrayFieldRowContainer";
 var ArrayFieldRemoveButton = (props) => {
@@ -3054,7 +711,7 @@ var ArrayFieldAddButton = (props) => {
       float: "right",
       ...useArrayFieldAddButton(),
       ...props,
-      children: props.children || /* @__PURE__ */ jsx(AddIcon, {})
+      children: props.children || /* @__PURE__ */ jsx(PlusIcon, {})
     }
   );
 };
@@ -3062,8 +719,9 @@ ArrayFieldAddButton.displayName = "ArrayFieldAddButton";
 var ArrayField = forwardRef(
   (props, ref) => {
     const { children, ...containerProps } = props;
+    const rowFn = isFunction(children) ? children : (fields) => /* @__PURE__ */ jsx(Fragment, { children: fields.map(({ id }, index) => /* @__PURE__ */ jsx(ArrayFieldRow, { index, children }, id)) || null });
     return /* @__PURE__ */ jsxs(ArrayFieldContainer, { ref, ...containerProps, children: [
-      /* @__PURE__ */ jsx(ArrayFieldRows, { children: (fields) => /* @__PURE__ */ jsx(Fragment, { children: fields.map(({ id }, index) => /* @__PURE__ */ jsx(ArrayFieldRow, { index, children }, id)) }) }),
+      /* @__PURE__ */ jsx(ArrayFieldRows, { children: rowFn }),
       /* @__PURE__ */ jsx(ArrayFieldAddButton, {})
     ] });
   }
@@ -3076,7 +734,7 @@ var ArrayFieldRows = ({
   return children(fields);
 };
 ArrayFieldRows.displayName = "ArrayFieldRows";
-var ArrayFieldContainer = React12.forwardRef(
+var ArrayFieldContainer = React11.forwardRef(
   ({
     name,
     defaultValue,
@@ -3093,13 +751,13 @@ var ArrayFieldContainer = React12.forwardRef(
       min,
       max
     });
-    React12.useImperativeHandle(ref, () => context, [ref, context]);
+    React11.useImperativeHandle(ref, () => context, [ref, context]);
     return /* @__PURE__ */ jsx(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsx(BaseField, { name, ...fieldProps, children }) });
   }
 );
 ArrayFieldContainer.displayName = "ArrayFieldContainer";
 var FormLegend = (props) => {
-  const styles = useStyleConfig$1("SuiFormLegend");
+  const styles = useStyleConfig("SuiFormLegend");
   return /* @__PURE__ */ jsx(FormLabel, { as: "legend", sx: styles, ...props });
 };
 var ObjectField = (props) => {
@@ -3111,8 +769,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__ */ jsx(
       Field,
       {
@@ -3125,24 +783,27 @@ var mapNestedFields2 = (resolver, name) => {
   );
 };
 var AutoFields = ({
-  schema,
-  fieldResolver,
+  schema: schemaProp,
+  fieldResolver: fieldResolverProp,
   focusFirstField,
   ...props
 }) => {
-  const resolver = React12.useMemo(
-    () => fieldResolver || Form.getFieldResolver(schema),
-    [schema, fieldResolver]
-  );
-  const fields = React12.useMemo(() => resolver.getFields(), [resolver]);
+  const context = useFormContext();
+  const schema = schemaProp || context.schema;
+  const fieldResolver = fieldResolverProp || context.fieldResolver;
+  const resolver = React11.useMemo(() => fieldResolver, [schema, fieldResolver]);
+  const fields = React11.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
   const form = useFormContext();
-  React12.useEffect(() => {
-    var _a2;
-    if (focusFirstField && ((_a2 = fields[0]) == null ? void 0 : _a2.name)) {
+  React11.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__ */ jsx(FormLayout, { ...props, children: fields.map(
+  if (!resolver) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(FormLayout, { ...props, children: fields == null ? void 0 : fields.map(
     ({
       name,
       type,
@@ -3169,7 +830,7 @@ var SubmitButton = forwardRef(
       isLoading,
       ...rest
     } = props;
-    const { formState } = useFormContext();
+    const { formState } = useFormContext$1();
     const isDisabled = disableIfUntouched && !formState.isDirty || disableIfInvalid && !formState.isValid || isDisabledProp;
     return /* @__PURE__ */ jsx(
       Button,
@@ -3190,23 +851,6 @@ SubmitButton.defaultProps = {
   disableIfInvalid: false
 };
 SubmitButton.displayName = "SubmitButton";
-var AutoForm = forwardRef(
-  (props, ref) => {
-    const {
-      schema,
-      submitLabel = "Submit",
-      fieldResolver,
-      children,
-      ...rest
-    } = props;
-    return /* @__PURE__ */ jsx(Form, { ...rest, schema, ref, children: /* @__PURE__ */ jsxs(FormLayout, { children: [
-      /* @__PURE__ */ jsx(AutoFields, { schema, fieldResolver }),
-      submitLabel && /* @__PURE__ */ jsx(SubmitButton, { children: submitLabel }),
-      children
-    ] }) });
-  }
-);
-AutoForm.displayName = "AutoForm";
 var DisplayIf = ({
   children,
   name,
@@ -3225,6 +869,90 @@ var DisplayIf = ({
   return condition(value, context) ? children : null;
 };
 DisplayIf.displayName = "DisplayIf";
+var Form = 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 = useForm(form);
+    const { handleSubmit } = methods;
+    React11.useImperativeHandle(formRef, () => methods, [formRef, methods]);
+    React11.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__ */ jsxs(FormLayout, { children: [
+        /* @__PURE__ */ jsx(AutoFields, {}),
+        /* @__PURE__ */ jsx(SubmitButton, { ...fields == null ? void 0 : fields.submit })
+      ] });
+    }
+    return /* @__PURE__ */ jsx(
+      FormProvider,
+      {
+        ...methods,
+        schema,
+        fieldResolver,
+        fields,
+        children: /* @__PURE__ */ jsx(
+          chakra.form,
+          {
+            ref,
+            onSubmit: handleSubmit(onSubmit, onError),
+            ...rest,
+            className: cx("sui-form", props.className),
+            children: runIfFn(_children, {
+              Field,
+              DisplayIf,
+              ArrayField,
+              ObjectField,
+              ...methods
+            })
+          }
+        )
+      }
+    );
+  }
+);
+Form.displayName = "Form";
 var [StepFormProvider, useStepFormContext] = createContext$1({
   name: "StepFormContext",
   errorMessage: "useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`"
@@ -3233,14 +961,14 @@ function useStepForm(props) {
   const { onChange, ...rest } = props;
   const stepper = useStepper(rest);
   const { activeStep, isLastStep, nextStep } = stepper;
-  const [steps, updateSteps] = React12.useState({});
-  const onSubmitStep = React12.useCallback(
+  const [steps, updateSteps] = React11.useState({});
+  const onSubmitStep = React11.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
@@ -3255,7 +983,7 @@ function useStepForm(props) {
     },
     [steps, activeStep, isLastStep]
   );
-  const getFormProps = React12.useCallback(() => {
+  const getFormProps = React11.useCallback(() => {
     const step = steps[activeStep];
     return {
       onSubmit: onSubmitStep,
@@ -3263,7 +991,7 @@ function useStepForm(props) {
       resolver: step == null ? void 0 : step.resolver
     };
   }, [steps, onSubmitStep, activeStep]);
-  const updateStep = React12.useCallback(
+  const updateStep = React11.useCallback(
     (step) => {
       updateSteps((steps2) => {
         return {
@@ -3285,7 +1013,7 @@ function useFormStep(props) {
   const { name, schema, resolver, onSubmit } = props;
   const step = useStep({ name });
   const { steps, updateStep } = useStepFormContext();
-  React12.useEffect(() => {
+  React11.useEffect(() => {
     updateStep({ name, schema, resolver, onSubmit });
   }, [name, schema]);
   return {
@@ -3293,20 +1021,20 @@ function useFormStep(props) {
     ...steps[name] || { name, schema }
   };
 }
-var StepForm = React12.forwardRef(
+var StepForm = React11.forwardRef(
   (props, ref) => {
     const { children, ...rest } = props;
     const stepper = useStepForm(props);
     const { getFormProps, ...ctx } = stepper;
-    const context = React12.useMemo(() => ctx, [ctx]);
-    return /* @__PURE__ */ jsx(StepperProvider, { value: context, children: /* @__PURE__ */ jsx(StepFormProvider, { value: context, children: /* @__PURE__ */ jsx(Form, { ref, ...rest, ...getFormProps(), children: runIfFn$1(children, stepper) }) }) });
+    const context = React11.useMemo(() => ctx, [ctx]);
+    return /* @__PURE__ */ jsx(StepperProvider, { value: context, children: /* @__PURE__ */ jsx(StepFormProvider, { value: context, children: /* @__PURE__ */ jsx(Form, { ref, ...rest, ...getFormProps(), children: runIfFn(children, stepper) }) }) });
   }
 );
 var FormStepper = (props) => {
   const { activeIndex, setIndex } = useStepperContext();
   const { children, orientation, variant, colorScheme, size, ...rest } = props;
-  const elements = React12.Children.map(children, (child) => {
-    if (React12.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
+  const elements = React11.Children.map(children, (child) => {
+    if (React11.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
       const { isCompleted } = useFormStep(child.props);
       return /* @__PURE__ */ jsx(
         StepperStep,
@@ -3321,7 +1049,7 @@ var FormStepper = (props) => {
     }
     return child;
   });
-  const onChange = React12.useCallback((i) => {
+  const onChange = React11.useCallback((i) => {
     setIndex(i);
   }, []);
   return /* @__PURE__ */ jsx(
@@ -3341,7 +1069,7 @@ var FormStep = (props) => {
   const { name, schema, resolver, children, className, onSubmit, ...rest } = props;
   const step = useFormStep({ name, schema, resolver, onSubmit });
   const { isActive } = step;
-  return isActive ? /* @__PURE__ */ jsx(chakra$1.div, { ...rest, className: cx$1("sui-form__step", className), children }) : null;
+  return isActive ? /* @__PURE__ */ jsx(chakra.div, { ...rest, className: cx("sui-form__step", className), children }) : null;
 };
 FormStep.displayName = "FormStep";
 var PrevButton = (props) => {
@@ -3352,7 +1080,7 @@ var PrevButton = (props) => {
       isDisabled: isFirstStep || isCompleted,
       label: "Back",
       ...props,
-      className: cx$1("sui-form__prev-button", props.className),
+      className: cx("sui-form__prev-button", props.className),
       onClick: callAllHandlers(props.onClick, prevStep)
     }
   );
@@ -3366,12 +1094,38 @@ var NextButton = (props) => {
     {
       ...rest,
       isDisabled: isCompleted,
-      className: cx$1("sui-form__next-button", props.className),
+      className: cx("sui-form__next-button", props.className),
       children: isLastStep || isCompleted ? submitLabel : label
     }
   );
 };
 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 = get$1(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 = useFormContext();
@@ -3385,15 +1139,27 @@ var WatchField = (props) => {
 };
 function createForm({
   resolver,
+  fieldResolver = objectFieldResolver,
   fields
 } = {}) {
-  const CreateForm = (props) => {
-    const { schema, ...rest } = props;
-    return /* @__PURE__ */ jsx(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ jsx(Form, { resolver: resolver == null ? void 0 : resolver(props.schema), ...rest }) });
-  };
+  const CreateForm = forwardRef(
+    (props, ref) => {
+      const { schema, ...rest } = props;
+      return /* @__PURE__ */ jsx(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ jsx(
+        Form,
+        {
+          ref,
+          resolver: resolver == null ? void 0 : resolver(props.schema),
+          fieldResolver: fieldResolver == null ? void 0 : fieldResolver(schema),
+          ...rest
+        }
+      ) });
+    }
+  );
   return CreateForm;
 }
+var Form2 = createForm();
 
-export { ArrayField, ArrayFieldAddButton, ArrayFieldContainer, ArrayFieldProvider, ArrayFieldRemoveButton, ArrayFieldRow, ArrayFieldRowContainer, ArrayFieldRowFields, ArrayFieldRowProvider, ArrayFieldRows, AutoFields, AutoForm, BaseField, CheckboxField, DisplayField, DisplayIf, Field, FieldsProvider, Form, FormLayout, FormLegend, FormStep, FormStepper, FormValue, InputField, InputRightButton, NativeSelect, NativeSelectField, NextButton, NumberInputField2 as NumberInputField, ObjectField, PasswordInput, PasswordInputField, PinField, PrevButton, RadioField, RadioInput, Select, SelectField, StepForm, StepFormProvider, SubmitButton, SwitchField, TextareaField, WatchField, createField, createForm, defaultFieldTypes, objectFieldResolver, useArrayField, useArrayFieldAddButton, useArrayFieldContext, useArrayFieldRemoveButton, useArrayFieldRow, useArrayFieldRowContext, useField, useFormStep, useStepForm, useStepFormContext };
+export { ArrayField, ArrayFieldAddButton, ArrayFieldContainer, ArrayFieldProvider, ArrayFieldRemoveButton, ArrayFieldRow, ArrayFieldRowContainer, ArrayFieldRowFields, ArrayFieldRowProvider, ArrayFieldRows, AutoFields, BaseField, Form as BaseForm, CheckboxField, DisplayField, DisplayIf, Field, FieldsProvider, Form2 as Form, FormLayout, FormLegend, FormProvider, FormStep, FormStepper, FormValue, InputField, InputRightButton, NativeSelect, NativeSelectField, NextButton, NumberInputField2 as NumberInputField, ObjectField, PasswordInput, PasswordInputField, PinField, PrevButton, RadioField, RadioInput, Select, SelectButton, SelectField, SelectList, SelectOption, StepForm, StepFormProvider, SubmitButton, SwitchField, TextareaField, WatchField, createField, createForm, defaultFieldTypes, objectFieldResolver, useArrayField, useArrayFieldAddButton, useArrayFieldContext, useArrayFieldRemoveButton, useArrayFieldRow, useArrayFieldRowContext, useField, useFormContext, useFormStep, useStepForm, useStepFormContext };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map