@umami/react-zen 0.8.0 → 0.10.0

package/dist/index.mjs

@@ -267,194 +267,12 @@ var require_classnames = __commonJS({
   }
 });
 
-// node_modules/zustand/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js
+// node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js
 import __import_react3 from "react";
-var require_use_sync_external_store_shim_production_min2 = __commonJS({
-  "node_modules/zustand/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js"(exports) {
-    var e = __import_react3;
-    function h(a, b) {
-      return a === b && (0 !== a || 1 / a === 1 / b) || a !== a && b !== b;
-    }
-    var k = "function" === typeof Object.is ? Object.is : h;
-    var l = e.useState;
-    var m = e.useEffect;
-    var n = e.useLayoutEffect;
-    var p = e.useDebugValue;
-    function q(a, b) {
-      var d = b(), f = l({ inst: { value: d, getSnapshot: b } }), c = f[0].inst, g = f[1];
-      n(function() {
-        c.value = d;
-        c.getSnapshot = b;
-        r2(c) && g({ inst: c });
-      }, [a, d, b]);
-      m(function() {
-        r2(c) && g({ inst: c });
-        return a(function() {
-          r2(c) && g({ inst: c });
-        });
-      }, [a]);
-      p(d);
-      return d;
-    }
-    function r2(a) {
-      var b = a.getSnapshot;
-      a = a.value;
-      try {
-        var d = b();
-        return !k(a, d);
-      } catch (f) {
-        return true;
-      }
-    }
-    function t(a, b) {
-      return b();
-    }
-    var u = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? t : q;
-    exports.useSyncExternalStore = void 0 !== e.useSyncExternalStore ? e.useSyncExternalStore : u;
-  }
-});
-
-// node_modules/zustand/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
-import __import_react4 from "react";
-var require_use_sync_external_store_shim_development2 = __commonJS({
-  "node_modules/zustand/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js"(exports) {
-    if (true) {
-      (function() {
-        "use strict";
-        if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === "function") {
-          __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
-        }
-        var React19 = __import_react4;
-        var ReactSharedInternals = React19.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-        function error(format) {
-          {
-            {
-              for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-                args[_key2 - 1] = arguments[_key2];
-              }
-              printWarning("error", format, args);
-            }
-          }
-        }
-        function printWarning(level, format, args) {
-          {
-            var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
-            var stack = ReactDebugCurrentFrame.getStackAddendum();
-            if (stack !== "") {
-              format += "%s";
-              args = args.concat([stack]);
-            }
-            var argsWithFormat = args.map(function(item) {
-              return String(item);
-            });
-            argsWithFormat.unshift("Warning: " + format);
-            Function.prototype.apply.call(console[level], console, argsWithFormat);
-          }
-        }
-        function is(x, y) {
-          return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y;
-        }
-        var objectIs = typeof Object.is === "function" ? Object.is : is;
-        var useState14 = React19.useState, useEffect11 = React19.useEffect, useLayoutEffect3 = React19.useLayoutEffect, useDebugValue2 = React19.useDebugValue;
-        var didWarnOld18Alpha = false;
-        var didWarnUncachedGetSnapshot = false;
-        function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
-          {
-            if (!didWarnOld18Alpha) {
-              if (React19.startTransition !== void 0) {
-                didWarnOld18Alpha = true;
-                error("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release.");
-              }
-            }
-          }
-          var value = getSnapshot();
-          {
-            if (!didWarnUncachedGetSnapshot) {
-              var cachedValue = getSnapshot();
-              if (!objectIs(value, cachedValue)) {
-                error("The result of getSnapshot should be cached to avoid an infinite loop");
-                didWarnUncachedGetSnapshot = true;
-              }
-            }
-          }
-          var _useState = useState14({
-            inst: {
-              value,
-              getSnapshot
-            }
-          }), inst = _useState[0].inst, forceUpdate = _useState[1];
-          useLayoutEffect3(function() {
-            inst.value = value;
-            inst.getSnapshot = getSnapshot;
-            if (checkIfSnapshotChanged(inst)) {
-              forceUpdate({
-                inst
-              });
-            }
-          }, [subscribe, value, getSnapshot]);
-          useEffect11(function() {
-            if (checkIfSnapshotChanged(inst)) {
-              forceUpdate({
-                inst
-              });
-            }
-            var handleStoreChange = function() {
-              if (checkIfSnapshotChanged(inst)) {
-                forceUpdate({
-                  inst
-                });
-              }
-            };
-            return subscribe(handleStoreChange);
-          }, [subscribe]);
-          useDebugValue2(value);
-          return value;
-        }
-        function checkIfSnapshotChanged(inst) {
-          var latestGetSnapshot = inst.getSnapshot;
-          var prevValue = inst.value;
-          try {
-            var nextValue = latestGetSnapshot();
-            return !objectIs(prevValue, nextValue);
-          } catch (error2) {
-            return true;
-          }
-        }
-        function useSyncExternalStore$1(subscribe, getSnapshot, getServerSnapshot) {
-          return getSnapshot();
-        }
-        var canUseDOM = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
-        var isServerEnvironment = !canUseDOM;
-        var shim = isServerEnvironment ? useSyncExternalStore$1 : useSyncExternalStore;
-        var useSyncExternalStore$2 = React19.useSyncExternalStore !== void 0 ? React19.useSyncExternalStore : shim;
-        exports.useSyncExternalStore = useSyncExternalStore$2;
-        if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop === "function") {
-          __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
-        }
-      })();
-    }
-  }
-});
-
-// node_modules/zustand/node_modules/use-sync-external-store/shim/index.js
-var require_shim2 = __commonJS({
-  "node_modules/zustand/node_modules/use-sync-external-store/shim/index.js"(exports, module) {
-    var import_use_sync_external_store_shim_production_min = __toESM(require_use_sync_external_store_shim_production_min2());
-    var import_use_sync_external_store_shim_development = __toESM(require_use_sync_external_store_shim_development2());
-    if (false) {
-      module.exports = import_use_sync_external_store_shim_production_min.default;
-    } else {
-      module.exports = import_use_sync_external_store_shim_development.default;
-    }
-  }
-});
-
-// node_modules/zustand/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js
-import __import_react5 from "react";
 var require_with_selector_production_min = __commonJS({
-  "node_modules/zustand/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js"(exports) {
-    var import_shim2 = __toESM(require_shim2());
-    var h = __import_react5;
+  "node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js"(exports) {
+    var import_shim2 = __toESM(require_shim());
+    var h = __import_react3;
     var n = import_shim2.default;
     function p(a, b) {
       return a === b && (0 !== a || 1 / a === 1 / b) || a !== a && b !== b;
@@ -508,18 +326,18 @@ var require_with_selector_production_min = __commonJS({
   }
 });
 
-// node_modules/zustand/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js
-import __import_react6 from "react";
+// node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js
+import __import_react4 from "react";
 var require_with_selector_development = __commonJS({
-  "node_modules/zustand/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js"(exports) {
-    var import_shim2 = __toESM(require_shim2());
+  "node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js"(exports) {
+    var import_shim2 = __toESM(require_shim());
     if (true) {
       (function() {
         "use strict";
         if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === "function") {
           __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
         }
-        var React19 = __import_react6;
+        var React19 = __import_react4;
         var shim = import_shim2.default;
         function is(x, y) {
           return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y;
@@ -599,9 +417,9 @@ var require_with_selector_development = __commonJS({
   }
 });
 
-// node_modules/zustand/node_modules/use-sync-external-store/shim/with-selector.js
+// node_modules/use-sync-external-store/shim/with-selector.js
 var require_with_selector = __commonJS({
-  "node_modules/zustand/node_modules/use-sync-external-store/shim/with-selector.js"(exports, module) {
+  "node_modules/use-sync-external-store/shim/with-selector.js"(exports, module) {
     var import_with_selector_production_min = __toESM(require_with_selector_production_min());
     var import_with_selector_development = __toESM(require_with_selector_development());
     if (false) {
@@ -2831,7 +2649,7 @@ function $f6c31cce2adf654f$export$45712eceda6fad21(props) {
         }
       };
       let onTouchEnd = (e) => {
-        if ($f6c31cce2adf654f$var$shouldPreventDefaultUp(e.target)) e.preventDefault();
+        if ($f6c31cce2adf654f$var$shouldPreventDefaultUp(e.currentTarget)) e.preventDefault();
       };
       let onPointerCancel = (e) => {
         cancel(e);
@@ -19288,7 +19106,7 @@ function $bc237834342dbd75$var$Checkbox(props, ref) {
   let groupState = (0, $kPH7g$useContext)($bc237834342dbd75$export$139c5b8563afc1fc);
   let inputRef = (0, $df56164dff5785e2$export$4338b53315abf666)((0, $5dc95899b306f630$export$c9058316764c140e)(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
   let { labelProps, inputProps, isSelected, isDisabled, isReadOnly, isPressed, isInvalid } = groupState ? (0, $fba3e38d5ca8983f$export$353b32fc6898d37d)({
-    ...props,
+    ...(0, $64fa3d84918910a7$export$ef03459518577ad4)(props),
     // Value is optional for standalone checkboxes, but required for CheckboxGroup items;
     // it's passed explicitly here to avoid typescript error (requires ignore).
     // @ts-ignore
@@ -19296,7 +19114,7 @@ function $bc237834342dbd75$var$Checkbox(props, ref) {
     // ReactNode type doesn't allow function children.
     children: typeof props.children === "function" ? true : props.children
   }, groupState, inputRef) : (0, $406796ff087fe49b$export$e375f10ce42261c5)({
-    ...props,
+    ...(0, $64fa3d84918910a7$export$ef03459518577ad4)(props),
     children: typeof props.children === "function" ? true : props.children,
     validationBehavior
   }, (0, $3017fa7ffdddec74$export$8042c6c013fd5226)(props), inputRef);
@@ -19307,7 +19125,6 @@ function $bc237834342dbd75$var$Checkbox(props, ref) {
     isDisabled: isInteractionDisabled
   });
   let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
-    // TODO: should data attrs go on the label or on the <input>? useCheckbox passes them to the input...
     ...props,
     defaultClassName: "react-aria-Checkbox",
     values: {
@@ -23879,7 +23696,7 @@ function createFormControl(props = {}) {
     timer = setTimeout(callback, wait);
   };
   const _updateValid = async (shouldUpdateValid) => {
-    if (_proxyFormState.isValid || shouldUpdateValid) {
+    if (!props.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
       const isValid = _options.resolver ? isEmptyObject((await _executeSchema()).errors) : await executeBuiltInValidation(_fields, true);
       if (isValid !== _formState.isValid) {
         _subjects.state.next({
@@ -23889,7 +23706,7 @@ function createFormControl(props = {}) {
     }
   };
   const _updateIsValidating = (names, isValidating) => {
-    if (_proxyFormState.isValidating || _proxyFormState.validatingFields) {
+    if (!props.disabled && (_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
       (names || Array.from(_names.mount)).forEach((name) => {
         if (name) {
           isValidating ? set(_formState.validatingFields, name, isValidating) : unset(_formState.validatingFields, name);
@@ -23902,7 +23719,7 @@ function createFormControl(props = {}) {
     }
   };
   const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
-    if (args && method) {
+    if (args && method && !props.disabled) {
       _state.action = true;
       if (shouldUpdateFieldsAndState && Array.isArray(get(_fields, name))) {
         const fieldValues = method(get(_fields, name), args.argA, args.argB);
@@ -23958,28 +23775,30 @@ function createFormControl(props = {}) {
     const output = {
       name
     };
-    const disabledField = !!(get(_fields, name) && get(_fields, name)._f && get(_fields, name)._f.disabled);
-    if (!isBlurEvent || shouldDirty) {
-      if (_proxyFormState.isDirty) {
-        isPreviousDirty = _formState.isDirty;
-        _formState.isDirty = output.isDirty = _getDirty();
-        shouldUpdateField = isPreviousDirty !== output.isDirty;
+    if (!props.disabled) {
+      const disabledField = !!(get(_fields, name) && get(_fields, name)._f && get(_fields, name)._f.disabled);
+      if (!isBlurEvent || shouldDirty) {
+        if (_proxyFormState.isDirty) {
+          isPreviousDirty = _formState.isDirty;
+          _formState.isDirty = output.isDirty = _getDirty();
+          shouldUpdateField = isPreviousDirty !== output.isDirty;
+        }
+        const isCurrentFieldPristine = disabledField || deepEqual(get(_defaultValues, name), fieldValue);
+        isPreviousDirty = !!(!disabledField && get(_formState.dirtyFields, name));
+        isCurrentFieldPristine || disabledField ? unset(_formState.dirtyFields, name) : set(_formState.dirtyFields, name, true);
+        output.dirtyFields = _formState.dirtyFields;
+        shouldUpdateField = shouldUpdateField || _proxyFormState.dirtyFields && isPreviousDirty !== !isCurrentFieldPristine;
       }
-      const isCurrentFieldPristine = disabledField || deepEqual(get(_defaultValues, name), fieldValue);
-      isPreviousDirty = !!(!disabledField && get(_formState.dirtyFields, name));
-      isCurrentFieldPristine || disabledField ? unset(_formState.dirtyFields, name) : set(_formState.dirtyFields, name, true);
-      output.dirtyFields = _formState.dirtyFields;
-      shouldUpdateField = shouldUpdateField || _proxyFormState.dirtyFields && isPreviousDirty !== !isCurrentFieldPristine;
-    }
-    if (isBlurEvent) {
-      const isPreviousFieldTouched = get(_formState.touchedFields, name);
-      if (!isPreviousFieldTouched) {
-        set(_formState.touchedFields, name, isBlurEvent);
-        output.touchedFields = _formState.touchedFields;
-        shouldUpdateField = shouldUpdateField || _proxyFormState.touchedFields && isPreviousFieldTouched !== isBlurEvent;
+      if (isBlurEvent) {
+        const isPreviousFieldTouched = get(_formState.touchedFields, name);
+        if (!isPreviousFieldTouched) {
+          set(_formState.touchedFields, name, isBlurEvent);
+          output.touchedFields = _formState.touchedFields;
+          shouldUpdateField = shouldUpdateField || _proxyFormState.touchedFields && isPreviousFieldTouched !== isBlurEvent;
+        }
       }
+      shouldUpdateField && shouldRender && _subjects.state.next(output);
     }
-    shouldUpdateField && shouldRender && _subjects.state.next(output);
     return shouldUpdateField ? output : {};
   };
   const shouldRenderByError = (name, isValid, error, fieldState) => {
@@ -24062,7 +23881,7 @@ function createFormControl(props = {}) {
     }
     _names.unMount = /* @__PURE__ */ new Set();
   };
-  const _getDirty = (name, data) => (name && data && set(_formValues, name, data), !deepEqual(getValues(), _defaultValues));
+  const _getDirty = (name, data) => !props.disabled && (name && data && set(_formValues, name, data), !deepEqual(getValues(), _defaultValues));
   const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
     ..._state.mount ? _formValues : isUndefined(defaultValue) ? _defaultValues : isString(names) ? { [names]: defaultValue } : defaultValue
   }, isGlobal, defaultValue);
@@ -24104,7 +23923,7 @@ function createFormControl(props = {}) {
       const fieldValue = value[fieldKey];
       const fieldName = `${name}.${fieldKey}`;
       const field = get(_fields, fieldName);
-      (_names.array.has(name) || !isPrimitive(fieldValue) || field && !field._f) && !isDateObject(fieldValue) ? setValues(fieldName, fieldValue, options) : setFieldValue(fieldName, fieldValue, options);
+      (_names.array.has(name) || isObject(fieldValue) || field && !field._f) && !isDateObject(fieldValue) ? setValues(fieldName, fieldValue, options) : setFieldValue(fieldName, fieldValue, options);
     }
   };
   const setValue = (name, value, options = {}) => {
@@ -24141,7 +23960,7 @@ function createFormControl(props = {}) {
     const field = get(_fields, name);
     const getCurrentFieldValue = () => target.type ? getFieldValue(field._f) : getEventValue(event);
     const _updateIsFieldValueUpdated = (fieldValue) => {
-      isFieldValueUpdated = Number.isNaN(fieldValue) || deepEqual(fieldValue, get(_formValues, name, fieldValue));
+      isFieldValueUpdated = Number.isNaN(fieldValue) || isDateObject(fieldValue) && isNaN(fieldValue.getTime()) || deepEqual(fieldValue, get(_formValues, name, fieldValue));
     };
     if (field) {
       let error;
@@ -24470,7 +24289,11 @@ function createFormControl(props = {}) {
     }
     if (!keepStateOptions.keepValues) {
       if (keepStateOptions.keepDirtyValues) {
-        for (const fieldName of _names.mount) {
+        const fieldsToCheck = /* @__PURE__ */ new Set([
+          ..._names.mount,
+          ...Object.keys(getDirtyFields(_defaultValues, _formValues))
+        ]);
+        for (const fieldName of Array.from(fieldsToCheck)) {
           get(_formState.dirtyFields, fieldName) ? set(values, fieldName, get(_formValues, fieldName)) : setValue(fieldName, get(values, fieldName));
         }
       } else {
@@ -24694,6 +24517,11 @@ function useForm(props = {}) {
       values: control._getWatch()
     });
   }, [props.shouldUnregister, control]);
+  React.useEffect(() => {
+    if (_formControl.current) {
+      _formControl.current.watch = _formControl.current.watch.bind({});
+    }
+  }, [formState]);
   _formControl.current.formState = getProxyFormState(formState, control);
   return _formControl.current;
 }
@@ -24722,36 +24550,119 @@ var Box_default = {
   "font-size-md": "Box_font-size-md",
   "font-size-lg": "Box_font-size-lg",
   "font-size-xl": "Box_font-size-xl",
-  "border-thin": "Box_border-thin",
-  "border-medium": "Box_border-medium",
-  "border-thick": "Box_border-thick",
+  "border-sm": "Box_border-sm",
+  "border-md": "Box_border-md",
+  "border-lg": "Box_border-lg",
   "border-radius-sm": "Box_border-radius-sm",
   "border-radius-md": "Box_border-radius-md",
   "border-radius-lg": "Box_border-radius-lg",
   "border-radius-full": "Box_border-radius-full",
-  "gap-xs": "Box_gap-xs",
-  "gap-sm": "Box_gap-sm",
-  "gap-md": "Box_gap-md",
-  "gap-lg": "Box_gap-lg",
-  "gap-xl": "Box_gap-xl",
   "shadow-1": "Box_shadow-1",
   "shadow-2": "Box_shadow-2",
   "shadow-3": "Box_shadow-3",
   "shadow-4": "Box_shadow-4",
   "shadow-5": "Box_shadow-5",
-  "shadow-6": "Box_shadow-6"
+  "shadow-6": "Box_shadow-6",
+  "background-color-50": "Box_background-color-50",
+  "background-color-100": "Box_background-color-100",
+  "background-color-200": "Box_background-color-200",
+  "background-color-300": "Box_background-color-300",
+  "background-color-400": "Box_background-color-400",
+  "background-color-500": "Box_background-color-500",
+  "background-color-600": "Box_background-color-600",
+  "background-color-700": "Box_background-color-700",
+  "background-color-800": "Box_background-color-800",
+  "background-color-900": "Box_background-color-900",
+  "background-color-950": "Box_background-color-950",
+  "padding-1": "Box_padding-1",
+  "margin-1": "Box_margin-1",
+  "padding-2": "Box_padding-2",
+  "margin-2": "Box_margin-2",
+  "padding-3": "Box_padding-3",
+  "margin-3": "Box_margin-3",
+  "padding-4": "Box_padding-4",
+  "margin-4": "Box_margin-4",
+  "padding-5": "Box_padding-5",
+  "margin-5": "Box_margin-5",
+  "padding-6": "Box_padding-6",
+  "margin-6": "Box_margin-6",
+  "padding-7": "Box_padding-7",
+  "margin-7": "Box_margin-7",
+  "padding-8": "Box_padding-8",
+  "margin-8": "Box_margin-8",
+  "padding-9": "Box_padding-9",
+  "margin-9": "Box_margin-9",
+  "padding-10": "Box_padding-10",
+  "margin-10": "Box_margin-10",
+  "padding-11": "Box_padding-11",
+  "margin-11": "Box_margin-11",
+  "padding-12": "Box_padding-12",
+  "margin-12": "Box_margin-12",
+  "padding-x-1": "Box_padding-x-1",
+  "margin-x-1": "Box_margin-x-1",
+  "padding-x-2": "Box_padding-x-2",
+  "margin-x-2": "Box_margin-x-2",
+  "padding-x-3": "Box_padding-x-3",
+  "margin-x-3": "Box_margin-x-3",
+  "padding-x-4": "Box_padding-x-4",
+  "margin-x-4": "Box_margin-x-4",
+  "padding-x-5": "Box_padding-x-5",
+  "margin-x-5": "Box_margin-x-5",
+  "padding-x-6": "Box_padding-x-6",
+  "margin-x-6": "Box_margin-x-6",
+  "padding-x-7": "Box_padding-x-7",
+  "margin-x-7": "Box_margin-x-7",
+  "padding-x-8": "Box_padding-x-8",
+  "margin-x-8": "Box_margin-x-8",
+  "padding-x-9": "Box_padding-x-9",
+  "margin-x-9": "Box_margin-x-9",
+  "padding-x-10": "Box_padding-x-10",
+  "margin-x-10": "Box_margin-x-10",
+  "padding-x-11": "Box_padding-x-11",
+  "margin-x-11": "Box_margin-x-11",
+  "padding-x-12": "Box_padding-x-12",
+  "margin-x-12": "Box_margin-x-12",
+  "padding-y-1": "Box_padding-y-1",
+  "margin-y-1": "Box_margin-y-1",
+  "padding-y-2": "Box_padding-y-2",
+  "margin-y-2": "Box_margin-y-2",
+  "padding-y-3": "Box_padding-y-3",
+  "margin-y-3": "Box_margin-y-3",
+  "padding-y-4": "Box_padding-y-4",
+  "margin-y-4": "Box_margin-y-4",
+  "padding-y-5": "Box_padding-y-5",
+  "margin-y-5": "Box_margin-y-5",
+  "padding-y-6": "Box_padding-y-6",
+  "margin-y-6": "Box_margin-y-6",
+  "padding-y-7": "Box_padding-y-7",
+  "margin-y-7": "Box_margin-y-7",
+  "padding-y-8": "Box_padding-y-8",
+  "margin-y-8": "Box_margin-y-8",
+  "padding-y-9": "Box_padding-y-9",
+  "margin-y-9": "Box_margin-y-9",
+  "padding-y-10": "Box_padding-y-10",
+  "margin-y-10": "Box_margin-y-10",
+  "padding-y-11": "Box_padding-y-11",
+  "margin-y-11": "Box_margin-y-11",
+  "padding-y-12": "Box_padding-y-12",
+  "margin-y-12": "Box_margin-y-12"
 };
 
 // src/components/Box.tsx
 import { jsx } from "react/jsx-runtime";
 function Box({
   className,
-  spacing,
   fontSize,
+  backgroundColor,
   border,
   borderRadius,
   shadow,
-  gap,
+  padding,
+  margin,
+  paddingX,
+  marginX,
+  paddingY,
+  marginY,
   asChild,
   children,
   ...props
@@ -24764,11 +24675,16 @@ function Box({
       className: (0, import_classnames.default)(
         className,
         fontSize && Box_default[`font-size-${fontSize}`],
-        gap && Box_default[`gap-${gap}`],
+        backgroundColor && Box_default[`background-color-${backgroundColor}`],
         border && Box_default[`border-${border}`],
         borderRadius && Box_default[`border-radius-${borderRadius}`],
         shadow && Box_default[`shadow-${shadow}`],
-        spacing && Box_default[`spacing-${spacing}`]
+        padding && Box_default[`padding-${padding}`],
+        margin && Box_default[`margin-${margin}`],
+        paddingX && Box_default[`padding-x-${padding}`],
+        marginX && Box_default[`margin-x-${margin}`],
+        paddingY && Box_default[`padding-y-${padding}`],
+        marginY && Box_default[`margin-y-${margin}`]
       ),
       children
     }
@@ -24854,18 +24770,11 @@ var Flexbox_default = {
   "align-self-safe-center": "Flexbox_align-self-safe-center",
   "align-self-unsafe-center": "Flexbox_align-self-unsafe-center",
   inline: "Flexbox_inline",
-  spacing1: "Flexbox_spacing1",
-  spacing2: "Flexbox_spacing2",
-  spacing3: "Flexbox_spacing3",
-  spacing4: "Flexbox_spacing4",
-  spacing5: "Flexbox_spacing5",
-  spacing6: "Flexbox_spacing6",
-  spacing7: "Flexbox_spacing7",
-  spacing8: "Flexbox_spacing8",
-  spacing9: "Flexbox_spacing9",
-  spacing10: "Flexbox_spacing10",
-  spacing11: "Flexbox_spacing11",
-  spacing12: "Flexbox_spacing12"
+  "gap-xs": "Flexbox_gap-xs",
+  "gap-sm": "Flexbox_gap-sm",
+  "gap-md": "Flexbox_gap-md",
+  "gap-lg": "Flexbox_gap-lg",
+  "gap-xl": "Flexbox_gap-xl"
 };
 
 // src/components/Flexbox.tsx
@@ -24882,7 +24791,7 @@ function Flexbox({
   grow,
   shrink,
   basis,
-  spacing,
+  gap,
   style,
   className,
   children,
@@ -24897,6 +24806,7 @@ function Flexbox({
         className,
         direction && Flexbox_default[direction],
         wrap && Flexbox_default[wrap],
+        gap && Flexbox_default[`gap-${gap}`],
         justifyContent && Flexbox_default[`justify-content-${replace(justifyContent)}`],
         justifyItems && Flexbox_default[`justify-items-${replace(justifyItems)}`],
         alignContent && Flexbox_default[`align-content-${replace(alignContent)}`],
@@ -25278,19 +25188,48 @@ function Text({ children, type, size, spacing, weight, asChild, className, ...pr
 
 // src/components/form/Form.tsx
 import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
-function Form(props) {
-  const {
+function Form({
+  gap = "md",
+  autoComplete,
+  onSubmit,
+  error,
+  preventSubmit = false,
+  mode,
+  disabled,
+  reValidateMode,
+  defaultValues,
+  values,
+  errors,
+  resetOptions,
+  resolver,
+  context,
+  shouldFocusError,
+  shouldUnregister,
+  shouldUseNativeValidation,
+  progressive,
+  criteriaMode,
+  delayError,
+  className,
+  children,
+  ...props
+}) {
+  const formValues = useForm({
+    mode,
+    disabled,
+    reValidateMode,
+    defaultValues,
     values,
-    autoComplete,
-    onSubmit,
-    error,
-    className,
-    style,
-    children,
-    preventSubmit = false,
-    ...formProps
-  } = props;
-  const formValues = useForm({ defaultValues: values });
+    errors,
+    resetOptions,
+    resolver,
+    context,
+    shouldFocusError,
+    shouldUnregister,
+    shouldUseNativeValidation,
+    progressive,
+    criteriaMode,
+    delayError
+  });
   const { handleSubmit } = formValues;
   const onKeyDown = !onSubmit || preventSubmit ? (e) => e.key === "Enter" && e.preventDefault() : void 0;
   useEffect(() => {
@@ -25309,20 +25248,19 @@ function Form(props) {
     /* @__PURE__ */ jsx7(
       "form",
       {
-        ...formProps,
+        ...props,
         autoComplete,
         className: (0, import_classnames6.default)(Form_default.form, className),
-        style,
         onSubmit: onSubmit ? handleSubmit(onSubmit) : void 0,
         onKeyDown,
-        children: /* @__PURE__ */ jsx7(Column, { gap: "md", children: typeof children === "function" ? children(formValues) : children })
+        children: /* @__PURE__ */ jsx7(Column, { gap, children: typeof children === "function" ? children(formValues) : children })
       }
     )
   ] });
 }
 
 // src/components/form/FormField.tsx
-import { cloneElement as cloneElement2 } from "react";
+import { cloneElement as cloneElement2, forwardRef } from "react";
 var import_classnames7 = __toESM(require_classnames());
 
 // src/lib/utils.ts
@@ -25346,24 +25284,29 @@ function mapChildren(children, handler) {
 
 // src/components/form/FormField.module.css
 var FormField_default = {
-  input: "FormField_input",
+  field: "FormField_field",
   description: "FormField_description",
   error: "FormField_error"
 };
 
 // src/components/form/FormField.tsx
 import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
-function FormField({ name, description, rules, className, children, ...props }) {
-  const { formState, control } = useFormContext();
-  const { field } = useController({ name, control, rules });
-  const errors = formState?.errors || {};
-  const errorMessage = errors[name]?.message;
-  return /* @__PURE__ */ jsxs3("div", { ...props, className: (0, import_classnames7.default)(FormField_default.input, className), children: [
-    typeof children === "function" ? children(field) : mapChildren(children, (child) => child ? cloneElement2(child, field) : null),
-    description && /* @__PURE__ */ jsx8("div", { className: FormField_default.description, children: description }),
-    errorMessage && /* @__PURE__ */ jsx8("div", { className: FormField_default.error, children: errorMessage })
-  ] });
-}
+var FormField = forwardRef(
+  ({ name, description, label, rules, className, children, ...props }, ref) => {
+    const { formState, control } = useFormContext();
+    const { field } = useController({ name, control, rules });
+    const errors = formState?.errors || {};
+    const errorMessage = errors[name]?.message;
+    return /* @__PURE__ */ jsxs3("div", { ...props, ref, className: (0, import_classnames7.default)(FormField_default.input, className), children: [
+      typeof children === "function" ? children(field) : mapChildren(
+        children,
+        (child) => child ? cloneElement2(child, { ...field, label: child.props.label || label }) : null
+      ),
+      description && /* @__PURE__ */ jsx8("div", { className: FormField_default.description, children: description }),
+      errorMessage && /* @__PURE__ */ jsx8("div", { className: FormField_default.error, children: errorMessage })
+    ] });
+  }
+);
 
 // src/components/Button.tsx
 var import_classnames8 = __toESM(require_classnames());
@@ -25413,16 +25356,13 @@ function Button({
 
 // src/components/form/FormResetButton.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
-function FormResetButton(props) {
-  const { className, children, onPress, ...buttonProps } = props;
+function FormResetButton({ values = {}, children, onPress, ...props }) {
   const { reset } = useFormContext();
   const handleReset = (e) => {
-    reset();
-    if (onPress) {
-      onPress(e);
-    }
+    reset(values);
+    onPress?.(e);
   };
-  return /* @__PURE__ */ jsx10(Button, { ...buttonProps, type: "reset", onPress: handleReset, className, children });
+  return /* @__PURE__ */ jsx10(Button, { ...props, type: "reset", onPress: handleReset, children });
 }
 
 // src/components/Spinner.tsx
@@ -25476,7 +25416,6 @@ function FormSubmitButton({ children, disabled, isLoading, ...props }) {
   const {
     formState: { isDirty, isValid, isSubmitting, isSubmitted, isSubmitSuccessful }
   } = useFormContext();
-  console.log({ isLoading, isValid, isSubmitSuccessful, isSubmitting, isSubmitted });
   return /* @__PURE__ */ jsx13(
     LoadingButton,
     {
@@ -26613,6 +26552,14 @@ function Calendar({ className, ...props }) {
   ] });
 }
 
+// src/components/Checkbox.tsx
+import { forwardRef as forwardRef2 } from "react";
+
+// node_modules/react-icons/im/index.mjs
+function ImCheckmark(props) {
+  return GenIcon({ "tag": "svg", "attr": { "version": "1.1", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M13.5 2l-7.5 7.5-3.5-3.5-2.5 2.5 6 6 10-10z" }, "child": [] }] })(props);
+}
+
 // src/components/Checkbox.tsx
 var import_classnames15 = __toESM(require_classnames());
 
@@ -26625,14 +26572,26 @@ var Checkbox_default = {
 
 // src/components/Checkbox.tsx
 import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
-function Checkbox({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx20($bc237834342dbd75$export$48513f6b9f8ce62d, { ...props, className: (0, import_classnames15.default)(Checkbox_default.checkbox, className), children: ({ isIndeterminate, isSelected }) => {
-    return /* @__PURE__ */ jsxs11(Fragment3, { children: [
-      /* @__PURE__ */ jsx20("div", { className: Checkbox_default.box, children: /* @__PURE__ */ jsx20(Icon, { className: Checkbox_default.icon, size: "xs", children: isIndeterminate ? /* @__PURE__ */ jsx20(Icons.Minus, {}) : isSelected ? /* @__PURE__ */ jsx20(Icons.Check, {}) : null }) }),
-      children
-    ] });
-  } });
-}
+var Checkbox = forwardRef2(
+  ({ label, className, children, ...props }, ref) => {
+    const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
+    return /* @__PURE__ */ jsx20(
+      $bc237834342dbd75$export$48513f6b9f8ce62d,
+      {
+        ...props,
+        ref,
+        isSelected,
+        className: (0, import_classnames15.default)(Checkbox_default.checkbox, className),
+        children: ({ isIndeterminate, isSelected: isSelected2 }) => {
+          return /* @__PURE__ */ jsxs11(Fragment3, { children: [
+            /* @__PURE__ */ jsx20("div", { className: Checkbox_default.box, children: /* @__PURE__ */ jsx20(Icon, { className: Checkbox_default.icon, size: "xs", children: isIndeterminate ? /* @__PURE__ */ jsx20(Icons.Minus, {}) : isSelected2 ? /* @__PURE__ */ jsx20(ImCheckmark, {}) : null }) }),
+            children
+          ] });
+        }
+      }
+    );
+  }
+);
 
 // src/components/Combobox.tsx
 var import_classnames19 = __toESM(require_classnames());
@@ -26713,15 +26672,29 @@ function Combobox({ items, className, ...props }) {
 }
 
 // src/components/ConfirmationDialog.tsx
-var import_classnames22 = __toESM(require_classnames());
+var import_classnames23 = __toESM(require_classnames());
 import { useState as useState5 } from "react";
 
 // src/components/TextField.tsx
-import { useEffect as useEffect3, useState as useState4 } from "react";
-var import_classnames21 = __toESM(require_classnames());
+import { useEffect as useEffect3, useState as useState4, forwardRef as forwardRef3 } from "react";
+var import_classnames22 = __toESM(require_classnames());
 
-// src/components/CopyButton.tsx
+// src/components/Label.tsx
 var import_classnames20 = __toESM(require_classnames());
+
+// src/components/Label.module.css
+var Label_default = {
+  label: "Label_label"
+};
+
+// src/components/Label.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsx25($01b77f81d0f07f68$export$b04be29aa201d4f5, { ...props, className: (0, import_classnames20.default)(Label_default.label, className) });
+}
+
+// src/components/CopyButton.tsx
+var import_classnames21 = __toESM(require_classnames());
 import { useState as useState3, useRef } from "react";
 
 // src/components/CopyButton.module.css
@@ -26731,20 +26704,20 @@ var CopyButton_default = {
 };
 
 // src/components/CopyButton.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var TIMEOUT = 2e3;
-function CopyButton({ value, className, children, ...props }) {
+function CopyButton({ value, timeout = TIMEOUT, className, children, ...props }) {
   const [copied, setCopied] = useState3(false);
-  const timeout = useRef(0);
+  const ref = useRef(timeout);
   const handleCopy = async () => {
     if (value) {
       await navigator.clipboard.writeText(value);
       setCopied(true);
-      clearTimeout(timeout.current);
-      timeout.current = +setTimeout(() => setCopied(false), TIMEOUT);
+      clearTimeout(ref.current);
+      ref.current = +setTimeout(() => setCopied(false), timeout);
     }
   };
-  return /* @__PURE__ */ jsx25(Icon, { ...props, className: (0, import_classnames20.default)(CopyButton_default.icon, className), onClick: handleCopy, children: copied ? /* @__PURE__ */ jsx25(Icons.Check, {}) : /* @__PURE__ */ jsx25(Icons.Copy, {}) });
+  return /* @__PURE__ */ jsx26(Icon, { ...props, className: (0, import_classnames21.default)(CopyButton_default.icon, className), onClick: handleCopy, children: copied ? /* @__PURE__ */ jsx26(Icons.Check, {}) : /* @__PURE__ */ jsx26(Icons.Copy, {}) });
 }
 
 // src/components/Input.module.css
@@ -26752,7 +26725,6 @@ var Input_default = {
   field: "Input_field",
   row: "Input_row",
   input: "Input_input",
-  label: "Input_label",
   icon: "Input_icon"
 };
 
@@ -26764,48 +26736,57 @@ var TextField_default = {
 };
 
 // src/components/TextField.tsx
-import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
-function TextField({
-  name,
-  value,
-  defaultValue,
-  label,
-  asTextArea,
-  allowCopy,
-  className,
-  onChange,
-  ...props
-}) {
-  const [inputValue, setInputValue] = useState4(defaultValue || value);
-  const Component = asTextArea ? $216918bed6669f72$export$f5c9f3c2c4054eec : $3985021b0ad6602f$export$f5b8910cec6cf069;
-  const handleChange = (e) => {
-    setInputValue(e.target.value);
-    return onChange?.(e);
-  };
-  useEffect3(() => {
-    setInputValue(value);
-  }, [value]);
-  return /* @__PURE__ */ jsxs14($bcdf0525bf22703d$export$2c73285ae9390cec, { className: (0, import_classnames21.default)(Input_default.field, className), children: [
-    label && /* @__PURE__ */ jsx26($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: Input_default.label, children: label }),
-    /* @__PURE__ */ jsxs14("div", { className: Input_default.row, children: [
-      /* @__PURE__ */ jsx26(
-        Component,
-        {
-          ...props,
-          value: inputValue,
-          className: (0, import_classnames21.default)(
-            TextField_default.input,
-            Input_default.input,
-            asTextArea && TextField_default.textarea,
-            allowCopy && TextField_default.allowCopy
-          ),
-          onChange: handleChange
-        }
-      ),
-      allowCopy && /* @__PURE__ */ jsx26(CopyButton, { className: (0, import_classnames21.default)(TextField_default.icon, Input_default.icon), value: inputValue })
-    ] })
-  ] });
-}
+import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+var TextField = forwardRef3(
+  ({
+    value,
+    defaultValue,
+    label,
+    placeholder,
+    asTextArea,
+    allowCopy,
+    className,
+    onChange,
+    ...props
+  }, ref) => {
+    const [inputValue, setInputValue] = useState4(defaultValue || value);
+    const Component = asTextArea ? $216918bed6669f72$export$f5c9f3c2c4054eec : $3985021b0ad6602f$export$f5b8910cec6cf069;
+    const handleChange = (e) => {
+      setInputValue(e.target.value);
+      return onChange?.(e);
+    };
+    useEffect3(() => {
+      setInputValue(value);
+    }, [value]);
+    return /* @__PURE__ */ jsxs14(
+      $bcdf0525bf22703d$export$2c73285ae9390cec,
+      {
+        ...props,
+        ref,
+        value: inputValue,
+        className: (0, import_classnames22.default)(Input_default.field, className),
+        children: [
+          label && /* @__PURE__ */ jsx27(Label, { children: label }),
+          /* @__PURE__ */ jsxs14("div", { className: Input_default.row, children: [
+            /* @__PURE__ */ jsx27(
+              Component,
+              {
+                className: (0, import_classnames22.default)(
+                  TextField_default.input,
+                  Input_default.input,
+                  asTextArea && TextField_default.textarea,
+                  allowCopy && TextField_default.allowCopy
+                ),
+                onChange: handleChange
+              }
+            ),
+            allowCopy && /* @__PURE__ */ jsx27(CopyButton, { className: (0, import_classnames22.default)(TextField_default.icon, Input_default.icon), value: inputValue })
+          ] })
+        ]
+      }
+    );
+  }
+);
 
 // src/components/ConfirmationDialog.module.css
 var ConfirmationDialog_default = {
@@ -26814,7 +26795,7 @@ var ConfirmationDialog_default = {
 };
 
 // src/components/ConfirmationDialog.tsx
-import { Fragment as Fragment4, jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 function ConfirmationDialog({
   value,
   confirmMessage,
@@ -26826,11 +26807,11 @@ function ConfirmationDialog({
   const handleChange = (e) => {
     setCanSave(e.target.value === value);
   };
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     AlertDialog,
     {
       ...props,
-      className: (0, import_classnames22.default)(ConfirmationDialog_default.dialog, className),
+      className: (0, import_classnames23.default)(ConfirmationDialog_default.dialog, className),
       isConfirmDisabled: !canSave,
       children: ({ close }) => {
         return /* @__PURE__ */ jsxs15(Fragment4, { children: [
@@ -26839,8 +26820,8 @@ function ConfirmationDialog({
             confirmMessage || "Type the following value to confirm",
             ":"
           ] }),
-          /* @__PURE__ */ jsx27("div", { className: ConfirmationDialog_default.value, children: value }),
-          /* @__PURE__ */ jsx27(TextField, { autoFocus: true, "aria-label": "Confirmation", onChange: handleChange })
+          /* @__PURE__ */ jsx28("div", { className: ConfirmationDialog_default.value, children: value }),
+          /* @__PURE__ */ jsx28(TextField, { autoFocus: true, "aria-label": "Confirmation", onChange: handleChange })
         ] });
       }
     }
@@ -26848,11 +26829,11 @@ function ConfirmationDialog({
 }
 
 // src/components/DataTable.tsx
-var import_classnames24 = __toESM(require_classnames());
-import { Children as Children3 } from "react";
+var import_classnames25 = __toESM(require_classnames());
+import { Children as Children2 } from "react";
 
 // src/components/Table.tsx
-var import_classnames23 = __toESM(require_classnames());
+var import_classnames24 = __toESM(require_classnames());
 
 // src/components/Table.module.css
 var Table_default = {
@@ -26868,32 +26849,32 @@ var Table_default = {
 };
 
 // src/components/Table.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function Table({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx28($1910c06f0ca9905e$export$54ec01a60f47d33d, { ...props, className: (0, import_classnames23.default)(Table_default.table, className), "aria-label": "Table", children });
+  return /* @__PURE__ */ jsx29($1910c06f0ca9905e$export$54ec01a60f47d33d, { ...props, className: (0, import_classnames24.default)(Table_default.table, className), "aria-label": "Table", children });
 }
 function TableHeader({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx28($1910c06f0ca9905e$export$f850895b287ef28e, { ...props, className: (0, import_classnames23.default)(Table_default.header, className), children });
+  return /* @__PURE__ */ jsx29($1910c06f0ca9905e$export$f850895b287ef28e, { ...props, className: (0, import_classnames24.default)(Table_default.header, className), children });
 }
 function TableBody({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx28($1910c06f0ca9905e$export$76ccd210b9029917, { ...props, className: (0, import_classnames23.default)(Table_default.body, className), children });
+  return /* @__PURE__ */ jsx29($1910c06f0ca9905e$export$76ccd210b9029917, { ...props, className: (0, import_classnames24.default)(Table_default.body, className), children });
 }
 function TableRow({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx28($1910c06f0ca9905e$export$b59bdbef9ce70de2, { ...props, className: (0, import_classnames23.default)(Table_default.row, className), children });
+  return /* @__PURE__ */ jsx29($1910c06f0ca9905e$export$b59bdbef9ce70de2, { ...props, className: (0, import_classnames24.default)(Table_default.row, className), children });
 }
 function TableColumn({ children, className, alignment, ...props }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     $1910c06f0ca9905e$export$816b5d811295e6bc,
     {
       ...props,
-      className: (0, import_classnames23.default)(Table_default.column, className, alignment && Table_default[alignment]),
+      className: (0, import_classnames24.default)(Table_default.column, className, alignment && Table_default[alignment]),
       isRowHeader: true,
       children
     }
   );
 }
 function TableCell({ children, className, alignment, ...props }) {
-  return /* @__PURE__ */ jsx28($1910c06f0ca9905e$export$f6f0c3fe4ec306ea, { ...props, className: (0, import_classnames23.default)(Table_default.cell, className, alignment && Table_default[alignment]), children });
+  return /* @__PURE__ */ jsx29($1910c06f0ca9905e$export$f6f0c3fe4ec306ea, { ...props, className: (0, import_classnames24.default)(Table_default.cell, className, alignment && Table_default[alignment]), children });
 }
 
 // src/components/DataTable.module.css
@@ -26903,22 +26884,22 @@ var DataTable_default = {
 };
 
 // src/components/DataTable.tsx
-import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
 function DataTable({ data = [], className, children, ...props }) {
-  const columns = Children3.map(children, (child) => {
+  const columns = Children2.map(children, (child) => {
     return { ...child.props, value: child.props.children };
   });
-  return /* @__PURE__ */ jsxs16(Table, { ...props, className: (0, import_classnames24.default)(DataTable_default.datatable, className), children: [
-    /* @__PURE__ */ jsx29(TableHeader, { children: columns.map(({ id, label, hidden, ...columnProps }) => {
+  return /* @__PURE__ */ jsxs16(Table, { ...props, className: (0, import_classnames25.default)(DataTable_default.datatable, className), children: [
+    /* @__PURE__ */ jsx30(TableHeader, { children: columns.map(({ id, label, hidden, ...columnProps }) => {
       if (hidden) {
         return null;
       }
       return /* @__PURE__ */ createElement2(TableColumn, { ...columnProps, key: id, id }, label);
     }) }),
-    /* @__PURE__ */ jsx29(TableBody, { items: data, children: (row) => {
-      return /* @__PURE__ */ jsx29(TableRow, { children: columns.map(({ id, value, className: className2, ...cellProps }) => {
-        return /* @__PURE__ */ createElement2(TableCell, { ...cellProps, key: id, className: (0, import_classnames24.default)(DataTable_default.cell, className2) }, !value && row[id], typeof value === "function" ? value(row, id) : value);
+    /* @__PURE__ */ jsx30(TableBody, { items: data, children: (row) => {
+      return /* @__PURE__ */ jsx30(TableRow, { children: columns.map(({ id, value, className: className2, ...cellProps }) => {
+        return /* @__PURE__ */ createElement2(TableCell, { ...cellProps, key: id, className: (0, import_classnames25.default)(DataTable_default.cell, className2) }, !value && row[id], typeof value === "function" ? value(row, id) : value);
       }) });
     } })
   ] });
@@ -26928,7 +26909,7 @@ function DataColumn(props) {
 }
 
 // src/components/Dots.tsx
-var import_classnames25 = __toESM(require_classnames());
+var import_classnames26 = __toESM(require_classnames());
 
 // src/components/Dots.module.css
 var Dots_default = {
@@ -26938,17 +26919,17 @@ var Dots_default = {
 };
 
 // src/components/Dots.tsx
-import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
 function Dots({ className, ...props }) {
-  return /* @__PURE__ */ jsxs17("div", { ...props, className: (0, import_classnames25.default)(Dots_default.dots, className), children: [
-    /* @__PURE__ */ jsx30("div", { className: Dots_default.dot }),
-    /* @__PURE__ */ jsx30("div", { className: Dots_default.dot }),
-    /* @__PURE__ */ jsx30("div", { className: Dots_default.dot })
+  return /* @__PURE__ */ jsxs17("div", { ...props, className: (0, import_classnames26.default)(Dots_default.dots, className), children: [
+    /* @__PURE__ */ jsx31("div", { className: Dots_default.dot }),
+    /* @__PURE__ */ jsx31("div", { className: Dots_default.dot }),
+    /* @__PURE__ */ jsx31("div", { className: Dots_default.dot })
   ] });
 }
 
 // src/components/Heading.tsx
-var import_classnames26 = __toESM(require_classnames());
+var import_classnames27 = __toESM(require_classnames());
 
 // src/components/Heading.module.css
 var Heading_default = {
@@ -26965,21 +26946,21 @@ var Heading_default = {
 };
 
 // src/components/Heading.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function Heading({ size = 5, className, children, asChild, ...props }) {
   const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : "h1";
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     Component,
     {
       ...props,
-      className: (0, import_classnames26.default)(Heading_default.heading, className, size && Heading_default[`size${size}`]),
+      className: (0, import_classnames27.default)(Heading_default.heading, className, size && Heading_default[`size${size}`]),
       children
     }
   );
 }
 
 // src/components/InlineEditField.tsx
-var import_classnames27 = __toESM(require_classnames());
+var import_classnames28 = __toESM(require_classnames());
 import { useState as useState6, useCallback } from "react";
 
 // src/components/InlineEditField.module.css
@@ -26989,7 +26970,7 @@ var InlineEditField_default = {
 };
 
 // src/components/InlineEditField.tsx
-import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
 function InlineEditField({
   value: defaultValue = "",
   defaultEdit,
@@ -27029,12 +27010,12 @@ function InlineEditField({
     {
       "aria-label": "Edit",
       ...props,
-      className: (0, import_classnames27.default)(InlineEditField_default.edit, className),
+      className: (0, import_classnames28.default)(InlineEditField_default.edit, className),
       onClick: handleEdit,
       children: [
         !edit && children,
-        !edit && /* @__PURE__ */ jsx32(Icon, { className: InlineEditField_default.icon, children: /* @__PURE__ */ jsx32(Icons.Edit, {}) }),
-        edit && /* @__PURE__ */ jsx32(
+        !edit && /* @__PURE__ */ jsx33(Icon, { className: InlineEditField_default.icon, children: /* @__PURE__ */ jsx33(Icons.Edit, {}) }),
+        edit && /* @__PURE__ */ jsx33(
           TextField,
           {
             value,
@@ -27049,20 +27030,6 @@ function InlineEditField({
   );
 }
 
-// src/components/Label.tsx
-var import_classnames28 = __toESM(require_classnames());
-
-// src/components/Label.module.css
-var Label_default = {
-  label: "Label_label"
-};
-
-// src/components/Label.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
-function Label({ asChild, className, ...props }) {
-  return /* @__PURE__ */ jsx33($01b77f81d0f07f68$export$b04be29aa201d4f5, { ...props, className: (0, import_classnames28.default)(Label_default.label, className) });
-}
-
 // src/components/Loading.tsx
 var import_classnames29 = __toESM(require_classnames());
 
@@ -27148,7 +27115,8 @@ function Modal({ children, className, ...props }) {
 }
 
 // src/components/PasswordField.tsx
-import { useState as useState7 } from "react";
+import { useState as useState7, forwardRef as forwardRef4 } from "react";
+var import_classnames33 = __toESM(require_classnames());
 
 // src/components/PasswordField.module.css
 var PasswordField_default = {
@@ -27156,20 +27124,21 @@ var PasswordField_default = {
 };
 
 // src/components/PasswordField.tsx
-var import_classnames33 = __toESM(require_classnames());
 import { jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
-function PasswordField({ label, ...props }) {
-  const [show, setShow] = useState7(false);
-  const type = show ? "text" : "password";
-  const handleShowPassword = () => setShow((state) => !state);
-  return /* @__PURE__ */ jsxs21($bcdf0525bf22703d$export$2c73285ae9390cec, { ...props, className: Input_default.field, children: [
-    label && /* @__PURE__ */ jsx38($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: Input_default.label, children: label }),
-    /* @__PURE__ */ jsxs21("div", { className: Input_default.row, children: [
-      /* @__PURE__ */ jsx38($3985021b0ad6602f$export$f5b8910cec6cf069, { type, className: Input_default.input }),
-      /* @__PURE__ */ jsx38(Icon, { onClick: handleShowPassword, className: (0, import_classnames33.default)(PasswordField_default.icon, Input_default.icon), children: show ? /* @__PURE__ */ jsx38(Icons.EyeSlash, {}) : /* @__PURE__ */ jsx38(Icons.Eye, {}) })
-    ] })
-  ] });
-}
+var PasswordField = forwardRef4(
+  ({ label, className, ...props }, ref) => {
+    const [show, setShow] = useState7(false);
+    const type = show ? "text" : "password";
+    const handleShowPassword = () => setShow((state) => !state);
+    return /* @__PURE__ */ jsxs21($bcdf0525bf22703d$export$2c73285ae9390cec, { ...props, ref, className: (0, import_classnames33.default)(Input_default.field, className), children: [
+      label && /* @__PURE__ */ jsx38(Label, { children: label }),
+      /* @__PURE__ */ jsxs21("div", { className: Input_default.row, children: [
+        /* @__PURE__ */ jsx38($3985021b0ad6602f$export$f5b8910cec6cf069, { type, className: Input_default.input }),
+        /* @__PURE__ */ jsx38(Icon, { onClick: handleShowPassword, className: (0, import_classnames33.default)(PasswordField_default.icon, Input_default.icon), children: show ? /* @__PURE__ */ jsx38(Icons.EyeSlash, {}) : /* @__PURE__ */ jsx38(Icons.Eye, {}) })
+      ] })
+    ] });
+  }
+);
 
 // src/components/Page.tsx
 var import_classnames34 = __toESM(require_classnames());
@@ -27246,6 +27215,7 @@ function ProgressCircle({ className, showValue, ...props }) {
 }
 
 // src/components/RadioGroup.tsx
+import { forwardRef as forwardRef5 } from "react";
 var import_classnames37 = __toESM(require_classnames());
 
 // src/components/RadioGroup.module.css
@@ -27255,16 +27225,21 @@ var RadioGroup_default = {
 };
 
 // src/components/RadioGroup.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
-function RadioGroup({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx42($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, className: (0, import_classnames37.default)(RadioGroup_default.radiogroup, className), children });
-}
+import { jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
+var RadioGroup = forwardRef5(
+  ({ label, children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs24($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, ref, className: (0, import_classnames37.default)(RadioGroup_default.radiogroup, className), children: [
+      label && /* @__PURE__ */ jsx42(Label, { children: label }),
+      children
+    ] });
+  }
+);
 function Radio({ children, className, ...props }) {
   return /* @__PURE__ */ jsx42($b6c3ddc6086f204d$export$d7b12c4107be0d61, { ...props, className: (0, import_classnames37.default)(RadioGroup_default.radio, className), children });
 }
 
 // src/components/SearchField.tsx
-import { useState as useState8, useEffect as useEffect4 } from "react";
+import { useState as useState8, useEffect as useEffect4, forwardRef as forwardRef6 } from "react";
 var import_classnames38 = __toESM(require_classnames());
 
 // src/components/SearchField.module.css
@@ -27275,43 +27250,56 @@ var SearchField_default = {
 };
 
 // src/components/SearchField.tsx
-import { jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
-function SearchField({ value, delay = 0, onSearch, className, ...props }) {
-  const [search, setSearch] = useState8(value ?? "");
-  const searchValue = useDebounce(search, delay);
-  const handleChange = (e) => {
-    const { value: value2 } = e.target;
-    setSearch(value2);
-    if (delay === 0 || value2 === "") {
-      onSearch?.(value2);
-    }
-  };
-  const resetSearch = () => {
-    setSearch("");
-    onSearch?.("");
-  };
-  useEffect4(() => {
-    if (delay > 0) {
-      onSearch?.(searchValue);
-    }
-  }, [searchValue, delay, onSearch]);
-  return /* @__PURE__ */ jsx43($440f4836bcb56932$export$b94867ecbd698f21, { ...props, className: (0, import_classnames38.default)(Input_default.field, className), children: ({ state }) => {
-    return /* @__PURE__ */ jsxs24("div", { className: Input_default.row, children: [
-      /* @__PURE__ */ jsx43(Icons.MagnifyingGlass, { className: (0, import_classnames38.default)(SearchField_default.search, Input_default.icon) }),
-      /* @__PURE__ */ jsx43(
-        $3985021b0ad6602f$export$f5b8910cec6cf069,
-        {
-          className: (0, import_classnames38.default)(SearchField_default.input, Input_default.input),
-          onChange: handleChange
-        }
-      ),
-      state.value && /* @__PURE__ */ jsx43($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: (0, import_classnames38.default)(SearchField_default.close, Input_default.icon), onPress: resetSearch, children: /* @__PURE__ */ jsx43(Icon, { children: /* @__PURE__ */ jsx43(Icons.Close, {}) }) })
-    ] });
-  } });
-}
+import { Fragment as Fragment7, jsx as jsx43, jsxs as jsxs25 } from "react/jsx-runtime";
+var SearchField = forwardRef6(
+  ({ label, value, delay = 0, onSearch, className, ...props }, ref) => {
+    const [search, setSearch] = useState8(value ?? "");
+    const searchValue = useDebounce(search, delay);
+    const handleChange = (e) => {
+      const { value: value2 } = e.target;
+      setSearch(value2);
+      if (delay === 0 || value2 === "") {
+        onSearch?.(value2);
+      }
+    };
+    const resetSearch = () => {
+      setSearch("");
+      onSearch?.("");
+    };
+    useEffect4(() => {
+      if (delay > 0) {
+        onSearch?.(searchValue);
+      }
+    }, [searchValue, delay, onSearch]);
+    return /* @__PURE__ */ jsx43($440f4836bcb56932$export$b94867ecbd698f21, { ...props, ref, className: (0, import_classnames38.default)(Input_default.field, className), children: ({ state }) => {
+      return /* @__PURE__ */ jsxs25(Fragment7, { children: [
+        label && /* @__PURE__ */ jsx43(Label, { children: label }),
+        /* @__PURE__ */ jsxs25("div", { className: Input_default.row, children: [
+          /* @__PURE__ */ jsx43(Icons.MagnifyingGlass, { className: (0, import_classnames38.default)(SearchField_default.search, Input_default.icon) }),
+          /* @__PURE__ */ jsx43(
+            $3985021b0ad6602f$export$f5b8910cec6cf069,
+            {
+              className: (0, import_classnames38.default)(SearchField_default.input, Input_default.input),
+              onChange: handleChange
+            }
+          ),
+          state.value && /* @__PURE__ */ jsx43(
+            $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
+            {
+              className: (0, import_classnames38.default)(SearchField_default.close, Input_default.icon),
+              onPress: resetSearch,
+              children: /* @__PURE__ */ jsx43(Icon, { children: /* @__PURE__ */ jsx43(Icons.Close, {}) })
+            }
+          )
+        ] })
+      ] });
+    } });
+  }
+);
 
 // src/components/Select.tsx
 var import_classnames39 = __toESM(require_classnames());
+import { forwardRef as forwardRef7 } from "react";
 
 // src/components/Select.module.css
 var Select_default = {
@@ -27322,75 +27310,82 @@ var Select_default = {
 };
 
 // src/components/Select.tsx
-import { jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
-function Select({
-  children,
-  items = [],
-  value,
-  label,
-  className,
-  onSelectionChange,
-  onChange,
-  ...props
-}) {
-  const handleChange = (e) => {
-    onSelectionChange?.(e);
-    onChange?.(e);
-  };
-  return /* @__PURE__ */ jsxs25(
-    $82d7e5349645de74$export$ef9b1a59e592288f,
-    {
-      ...props,
-      className: (0, import_classnames39.default)(Input_default.field, className),
-      onSelectionChange: handleChange,
-      children: [
-        label && /* @__PURE__ */ jsx44($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: Input_default.label, children: label }),
-        /* @__PURE__ */ jsx44($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: (0, import_classnames39.default)(Input_default.input, className), children: /* @__PURE__ */ jsxs25(Row, { justifyContent: "space-between", gap: "md", children: [
-          /* @__PURE__ */ jsx44($82d7e5349645de74$export$e288731fd71264f0, {}),
-          /* @__PURE__ */ jsx44("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx44(Icon, { rotate: 90, size: "xs", className: Input_default.icon, children: /* @__PURE__ */ jsx44(Icons.Chevron, {}) }) })
-        ] }) }),
-        /* @__PURE__ */ jsx44(Popover, { children: /* @__PURE__ */ jsx44(List, { items, className: Select_default.list, children }) })
-      ]
-    }
-  );
-}
+import { jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
+var Select = forwardRef7(
+  ({
+    children,
+    items = [],
+    value,
+    label,
+    className,
+    onSelectionChange,
+    onChange,
+    ...props
+  }, ref) => {
+    const handleChange = (e) => {
+      onSelectionChange?.(e);
+      onChange?.(e);
+    };
+    return /* @__PURE__ */ jsxs26(
+      $82d7e5349645de74$export$ef9b1a59e592288f,
+      {
+        ...props,
+        ref,
+        className: (0, import_classnames39.default)(Input_default.field, className),
+        onSelectionChange: handleChange,
+        children: [
+          label && /* @__PURE__ */ jsx44(Label, { children: label }),
+          /* @__PURE__ */ jsx44($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: (0, import_classnames39.default)(Input_default.input, className), children: /* @__PURE__ */ jsxs26(Row, { justifyContent: "space-between", gap: "md", children: [
+            /* @__PURE__ */ jsx44($82d7e5349645de74$export$e288731fd71264f0, {}),
+            /* @__PURE__ */ jsx44("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx44(Icon, { rotate: 90, size: "xs", className: Input_default.icon, children: /* @__PURE__ */ jsx44(Icons.Chevron, {}) }) })
+          ] }) }),
+          /* @__PURE__ */ jsx44(Popover, { children: /* @__PURE__ */ jsx44(List, { items, className: Select_default.list, children }) })
+        ]
+      }
+    );
+  }
+);
 
 // src/components/Slider.tsx
+import { forwardRef as forwardRef8 } from "react";
 var import_classnames40 = __toESM(require_classnames());
 
 // src/components/Slider.module.css
 var Slider_default = {
   slider: "Slider_slider",
-  label: "Slider_label",
-  output: "Slider_output",
+  header: "Slider_header",
   track: "Slider_track",
   fill: "Slider_fill",
   thumb: "Slider_thumb"
 };
 
 // src/components/Slider.tsx
-import { Fragment as Fragment7, jsx as jsx45, jsxs as jsxs26 } from "react/jsx-runtime";
-function Slider({ className, showValue = true, label, ...props }) {
-  return /* @__PURE__ */ jsxs26($6f909507e6374d18$export$472062a354075cee, { ...props, className: (0, import_classnames40.default)(Slider_default.slider, className), children: [
-    label && /* @__PURE__ */ jsx45(Label, { className: Slider_default.label, children: label }),
-    showValue && /* @__PURE__ */ jsx45($6f909507e6374d18$export$a590f758a961cb5b, { className: Slider_default.output }),
-    /* @__PURE__ */ jsx45($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
-      const isHorizontal = state.orientation === "horizontal";
-      return /* @__PURE__ */ jsxs26(Fragment7, { children: [
-        /* @__PURE__ */ jsx45(
-          "div",
-          {
-            className: Slider_default.fill,
-            style: {
-              [isHorizontal ? "width" : "height"]: (isHorizontal ? state.getThumbPercent(0) : 1 - state.getThumbPercent(0)) * 100 + "%"
+import { Fragment as Fragment8, jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
+var Slider = forwardRef8(
+  ({ className, showValue = true, label, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs27($6f909507e6374d18$export$472062a354075cee, { ...props, ref, className: (0, import_classnames40.default)(Slider_default.slider, className), children: [
+      /* @__PURE__ */ jsxs27("div", { className: Slider_default.header, children: [
+        label && /* @__PURE__ */ jsx45(Label, { className: Slider_default.label, children: label }),
+        showValue && /* @__PURE__ */ jsx45($6f909507e6374d18$export$a590f758a961cb5b, { className: Slider_default.output })
+      ] }),
+      /* @__PURE__ */ jsx45($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
+        const isHorizontal = state.orientation === "horizontal";
+        return /* @__PURE__ */ jsxs27(Fragment8, { children: [
+          /* @__PURE__ */ jsx45(
+            "div",
+            {
+              className: Slider_default.fill,
+              style: {
+                [isHorizontal ? "width" : "height"]: (isHorizontal ? state.getThumbPercent(0) : 1 - state.getThumbPercent(0)) * 100 + "%"
+              }
             }
-          }
-        ),
-        /* @__PURE__ */ jsx45($6f909507e6374d18$export$2c1b491743890dec, { className: Slider_default.thumb })
-      ] });
-    } })
-  ] });
-}
+          ),
+          /* @__PURE__ */ jsx45($6f909507e6374d18$export$2c1b491743890dec, { className: Slider_default.thumb })
+        ] });
+      } })
+    ] });
+  }
+);
 
 // src/components/StatusLight.tsx
 var import_classnames41 = __toESM(require_classnames());
@@ -27408,10 +27403,10 @@ var StatusLight_default = {
 };
 
 // src/components/StatusLight.tsx
-import { jsx as jsx46, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs28 } from "react/jsx-runtime";
 function StatusLight(props) {
   const { color, variant = "inactive", children, className, ...domProps } = props;
-  return /* @__PURE__ */ jsxs27("div", { ...domProps, className: (0, import_classnames41.default)(StatusLight_default.statuslight, className), children: [
+  return /* @__PURE__ */ jsxs28("div", { ...domProps, className: (0, import_classnames41.default)(StatusLight_default.statuslight, className), children: [
     /* @__PURE__ */ jsx46("div", { className: StatusLight_default.bg, children: /* @__PURE__ */ jsx46(
       "div",
       {
@@ -27424,6 +27419,7 @@ function StatusLight(props) {
 }
 
 // src/components/Switch.tsx
+import { forwardRef as forwardRef9 } from "react";
 var import_classnames42 = __toESM(require_classnames());
 
 // src/components/Switch.module.css
@@ -27434,13 +27430,28 @@ var Switch_default = {
 };
 
 // src/components/Switch.tsx
-import { jsx as jsx47, jsxs as jsxs28 } from "react/jsx-runtime";
-function Switch({ children, className, ...props }) {
-  return /* @__PURE__ */ jsxs28($8e59e948500a8fe1$export$b5d5cf8927ab7262, { ...props, className: (0, import_classnames42.default)(Switch_default.switch, className), children: [
-    /* @__PURE__ */ jsx47("div", { className: Switch_default.track, children: /* @__PURE__ */ jsx47("div", { className: Switch_default.knob }) }),
-    children
-  ] });
-}
+import { Fragment as Fragment9, jsx as jsx47, jsxs as jsxs29 } from "react/jsx-runtime";
+var Switch = forwardRef9(
+  ({ label, children, className, ...props }, ref) => {
+    const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
+    return /* @__PURE__ */ jsxs29(Fragment9, { children: [
+      label && /* @__PURE__ */ jsx47(Label, { children: label }),
+      /* @__PURE__ */ jsxs29(
+        $8e59e948500a8fe1$export$b5d5cf8927ab7262,
+        {
+          ...props,
+          isSelected,
+          ref,
+          className: (0, import_classnames42.default)(Switch_default.switch, className),
+          children: [
+            /* @__PURE__ */ jsx47("div", { className: Switch_default.track, children: /* @__PURE__ */ jsx47("div", { className: Switch_default.knob }) }),
+            children
+          ]
+        }
+      )
+    ] });
+  }
+);
 
 // src/components/Tabs.module.css
 var Tabs_default = {
@@ -27483,20 +27494,29 @@ function TextOverflow({ asChild, children, className, ...props }) {
 
 // src/components/TextArea.tsx
 var import_classnames44 = __toESM(require_classnames());
+import { forwardRef as forwardRef10 } from "react";
 
 // src/components/TextArea.module.css
 var TextArea_default = {
   textarea: "TextArea_textarea",
-  none: "TextArea_none",
-  horizontal: "TextArea_horizontal",
-  vertical: "TextArea_vertical"
+  "resize-none": "TextArea_resize-none",
+  "resize-horizontal": "TextArea_resize-horizontal",
+  "resize-vertical": "TextArea_resize-vertical"
 };
 
 // src/components/TextArea.tsx
 import { jsx as jsx50 } from "react/jsx-runtime";
-function TextArea({ resize, className, ...props }) {
-  return /* @__PURE__ */ jsx50(TextField, { ...props, className: (0, import_classnames44.default)(resize && TextArea_default[resize]), asTextArea: true });
-}
+var TextArea = forwardRef10(({ resize, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx50(
+    TextField,
+    {
+      ...props,
+      ref,
+      className: (0, import_classnames44.default)(resize && TextArea_default[`resize-${resize}`]),
+      asTextArea: true
+    }
+  );
+});
 
 // src/components/Toast.tsx
 var import_classnames45 = __toESM(require_classnames());
@@ -27598,7 +27618,7 @@ function composeContextScopes(...scopes) {
 
 // node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-slot/dist/index.mjs
 import * as React7 from "react";
-import { Fragment as Fragment8, jsx as jsx52 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx52 } from "react/jsx-runtime";
 var Slot = React7.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
   const childrenArray = React7.Children.toArray(children);
@@ -27632,7 +27652,7 @@ var SlotClone = React7.forwardRef((props, forwardedRef) => {
 });
 SlotClone.displayName = "SlotClone";
 var Slottable = ({ children }) => {
-  return /* @__PURE__ */ jsx52(Fragment8, { children });
+  return /* @__PURE__ */ jsx52(Fragment10, { children });
 };
 function isSlottable(child) {
   return React7.isValidElement(child) && child.type === Slottable;
@@ -28221,7 +28241,7 @@ var VisuallyHidden = React17.forwardRef(
 VisuallyHidden.displayName = NAME;
 
 // node_modules/@radix-ui/react-toast/dist/index.mjs
-import { Fragment as Fragment9, jsx as jsx58, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx58, jsxs as jsxs30 } from "react/jsx-runtime";
 var PROVIDER_NAME = "ToastProvider";
 var [Collection, useCollection, createCollectionScope] = createCollection("Toast");
 var [createToastContext, createToastScope] = createContextScope("Toast", [createCollectionScope]);
@@ -28375,7 +28395,7 @@ var ToastViewport = React18.forwardRef(
         return () => viewport.removeEventListener("keydown", handleKeyDown);
       }
     }, [getItems, getSortedTabbableCandidates]);
-    return /* @__PURE__ */ jsxs29(
+    return /* @__PURE__ */ jsxs30(
       Branch,
       {
         ref: wrapperRef,
@@ -28567,7 +28587,7 @@ var ToastImpl = React18.forwardRef(
       return node ? getAnnounceTextContent(node) : null;
     }, [node]);
     if (!context.viewport) return null;
-    return /* @__PURE__ */ jsxs29(Fragment9, { children: [
+    return /* @__PURE__ */ jsxs30(Fragment11, { children: [
       announceTextContent && /* @__PURE__ */ jsx58(
         ToastAnnounce,
         {
@@ -28687,7 +28707,7 @@ var ToastAnnounce = (props) => {
     const timer = window.setTimeout(() => setIsAnnounced(true), 1e3);
     return () => window.clearTimeout(timer);
   }, []);
-  return isAnnounced ? null : /* @__PURE__ */ jsx58(Portal, { asChild: true, children: /* @__PURE__ */ jsx58(VisuallyHidden, { ...announceProps, children: renderAnnounceText && /* @__PURE__ */ jsxs29(Fragment9, { children: [
+  return isAnnounced ? null : /* @__PURE__ */ jsx58(Portal, { asChild: true, children: /* @__PURE__ */ jsx58(VisuallyHidden, { ...announceProps, children: renderAnnounceText && /* @__PURE__ */ jsxs30(Fragment11, { children: [
     context.label,
     " ",
     children
@@ -28848,7 +28868,7 @@ var Toast_default = {
 };
 
 // src/components/Toast.tsx
-import { Fragment as Fragment10, jsx as jsx59, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx59, jsxs as jsxs31 } from "react/jsx-runtime";
 import { createElement as createElement4 } from "react";
 var icons = {
   info: Icons.Info,
@@ -28864,7 +28884,7 @@ function Toast2({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs30(Root2, { ...props, className: (0, import_classnames45.default)(Toast_default.toast, className, variant && Toast_default[variant]), children: [
+  return /* @__PURE__ */ jsxs31(Root2, { ...props, className: (0, import_classnames45.default)(Toast_default.toast, className, variant && Toast_default[variant]), children: [
     /* @__PURE__ */ jsx59(Icon, { className: Toast_default.icon, size: "md", children: variant && createElement3(icons[variant]) }),
     title && /* @__PURE__ */ jsx59(ToastTitle, { className: Toast_default.title, children: title }),
     description && /* @__PURE__ */ jsx59(ToastDescription, { className: Toast_default.description, children: description }),
@@ -28874,7 +28894,7 @@ function Toast2({
 }
 function Toaster(props) {
   const { toasts } = useToast();
-  return /* @__PURE__ */ jsxs30(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs31(Fragment12, { children: [
     toasts.map(({ id, message, props: props2 }) => {
       return /* @__PURE__ */ createElement4(Toast2, { ...props2, key: id, description: message });
     }),
@@ -28883,6 +28903,7 @@ function Toaster(props) {
 }
 
 // src/components/Toggle.tsx
+import { forwardRef as forwardRef17 } from "react";
 var import_classnames46 = __toESM(require_classnames());
 
 // src/components/Toggle.module.css
@@ -28891,10 +28912,25 @@ var Toggle_default = {
 };
 
 // src/components/Toggle.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
-function Toggle({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx60($efde0372d7a700fe$export$d2b052e7b4be1756, { ...props, className: (0, import_classnames46.default)(Toggle_default.toggle, className), children });
-}
+import { Fragment as Fragment13, jsx as jsx60, jsxs as jsxs32 } from "react/jsx-runtime";
+var Toggle = forwardRef17(
+  ({ label, children, className, ...props }, ref) => {
+    const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
+    return /* @__PURE__ */ jsxs32(Fragment13, { children: [
+      label && /* @__PURE__ */ jsx60(Label, { children: label }),
+      /* @__PURE__ */ jsx60(
+        $efde0372d7a700fe$export$d2b052e7b4be1756,
+        {
+          ...props,
+          ref,
+          isSelected,
+          className: (0, import_classnames46.default)(Toggle_default.toggle, className),
+          children
+        }
+      )
+    ] });
+  }
+);
 
 // src/components/ToggleGroup.tsx
 var import_classnames47 = __toESM(require_classnames());
@@ -29333,19 +29369,19 @@ var Tooltip_default = {
 };
 
 // src/components/Tooltip.tsx
-import { jsx as jsx62, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs33 } from "react/jsx-runtime";
 function Tooltip({ children, className, ...props }) {
-  return /* @__PURE__ */ jsxs31($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: (0, import_classnames48.default)(Tooltip_default.tooltip, className), children: [
+  return /* @__PURE__ */ jsxs33($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: (0, import_classnames48.default)(Tooltip_default.tooltip, className), children: [
     /* @__PURE__ */ jsx62($44f671af83e7d9e0$export$746d02f47f4d381, { className: Tooltip_default.arrow, children: /* @__PURE__ */ jsx62("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx62("path", { d: "M0 0 L4 4 L8 0" }) }) }),
     children
   ] });
 }
 
 // src/components/ZenProvider.tsx
-import { jsx as jsx63, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs34 } from "react/jsx-runtime";
 function ZenProvider({ config = {}, children }) {
   const { toast: toast2 } = config;
-  return /* @__PURE__ */ jsxs32(ToastProvider, { ...toast2, children: [
+  return /* @__PURE__ */ jsxs34(ToastProvider, { ...toast2, children: [
     children,
     /* @__PURE__ */ jsx63(Toaster, {})
   ] });
@@ -29464,28 +29500,6 @@ classnames/index.js:
   	http://jedwatson.github.io/classnames
   *)
 
-use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js:
-  (**
-  * @license React
-  * use-sync-external-store-shim.production.min.js
-  *
-  * Copyright (c) Facebook, Inc. and its affiliates.
-  *
-  * This source code is licensed under the MIT license found in the
-  * LICENSE file in the root directory of this source tree.
-  *)
-
-use-sync-external-store/cjs/use-sync-external-store-shim.development.js:
-  (**
-  * @license React
-  * use-sync-external-store-shim.development.js
-  *
-  * Copyright (c) Facebook, Inc. and its affiliates.
-  *
-  * This source code is licensed under the MIT license found in the
-  * LICENSE file in the root directory of this source tree.
-  *)
-
 use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js:
   (**
   * @license React