@umami/react-zen 0.8.0 → 0.10.0

package/dist/index.js

@@ -225,143 +225,9 @@ var require_classnames = __commonJS({
   }
 });
 
-// node_modules/zustand/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
-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) {
-    "use strict";
-    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 = require("react");
-        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, module2) {
-    "use strict";
-    if (false) {
-      module2.exports = null;
-    } else {
-      module2.exports = require_use_sync_external_store_shim_development2();
-    }
-  }
-});
-
-// node_modules/zustand/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js
+// node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js
 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) {
+  "node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js"(exports) {
     "use strict";
     if (true) {
       (function() {
@@ -370,7 +236,7 @@ var require_with_selector_development = __commonJS({
           __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
         }
         var React19 = require("react");
-        var shim = require_shim2();
+        var shim = require_shim();
         function is(x, y) {
           return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y;
         }
@@ -449,9 +315,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, module2) {
+  "node_modules/use-sync-external-store/shim/with-selector.js"(exports, module2) {
     "use strict";
     if (false) {
       module2.exports = null;
@@ -2767,7 +2633,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);
@@ -19224,7 +19090,7 @@ function $bc237834342dbd75$var$Checkbox(props, ref) {
   let groupState = (0, import_react110.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
@@ -19232,7 +19098,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);
@@ -19243,7 +19109,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: {
@@ -23815,7 +23680,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({
@@ -23825,7 +23690,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);
@@ -23838,7 +23703,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);
@@ -23894,28 +23759,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) => {
@@ -23998,7 +23865,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);
@@ -24040,7 +23907,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 = {}) => {
@@ -24077,7 +23944,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;
@@ -24406,7 +24273,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 {
@@ -24630,6 +24501,11 @@ function useForm(props = {}) {
       values: control._getWatch()
     });
   }, [props.shouldUnregister, control]);
+  import_react139.default.useEffect(() => {
+    if (_formControl.current) {
+      _formControl.current.watch = _formControl.current.watch.bind({});
+    }
+  }, [formState]);
   _formControl.current.formState = getProxyFormState(formState, control);
   return _formControl.current;
 }
@@ -24658,36 +24534,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
 var import_jsx_runtime = require("react/jsx-runtime");
 function Box({
   className,
-  spacing,
   fontSize,
+  backgroundColor,
   border,
   borderRadius,
   shadow,
-  gap,
+  padding,
+  margin,
+  paddingX,
+  marginX,
+  paddingY,
+  marginY,
   asChild,
   children,
   ...props
@@ -24700,11 +24659,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
     }
@@ -24790,18 +24754,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
@@ -24818,7 +24775,7 @@ function Flexbox({
   grow,
   shrink,
   basis,
-  spacing,
+  gap,
   style,
   className,
   children,
@@ -24833,6 +24790,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)}`],
@@ -25214,19 +25172,48 @@ function Text({ children, type, size, spacing, weight, asChild, className, ...pr
 
 // src/components/form/Form.tsx
 var import_jsx_runtime7 = require("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;
   (0, import_react143.useEffect)(() => {
@@ -25245,13 +25232,12 @@ function Form(props) {
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "form",
       {
-        ...formProps,
+        ...props,
         autoComplete,
         className: (0, import_classnames6.default)(Form_default.form, className),
-        style,
         onSubmit: onSubmit ? handleSubmit(onSubmit) : void 0,
         onKeyDown,
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Column, { gap: "md", children: typeof children === "function" ? children(formValues) : children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Column, { gap, children: typeof children === "function" ? children(formValues) : children })
       }
     )
   ] });
@@ -25277,24 +25263,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
 var import_jsx_runtime8 = require("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__ */ (0, import_jsx_runtime8.jsxs)("div", { ...props, className: (0, import_classnames7.default)(FormField_default.input, className), children: [
-    typeof children === "function" ? children(field) : mapChildren(children, (child) => child ? (0, import_react145.cloneElement)(child, field) : null),
-    description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: FormField_default.description, children: description }),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: FormField_default.error, children: errorMessage })
-  ] });
-}
+var FormField = (0, import_react145.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__ */ (0, import_jsx_runtime8.jsxs)("div", { ...props, ref, className: (0, import_classnames7.default)(FormField_default.input, className), children: [
+      typeof children === "function" ? children(field) : mapChildren(
+        children,
+        (child) => child ? (0, import_react145.cloneElement)(child, { ...field, label: child.props.label || label }) : null
+      ),
+      description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: FormField_default.description, children: description }),
+      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: FormField_default.error, children: errorMessage })
+    ] });
+  }
+);
 
 // src/components/Button.tsx
 var import_classnames8 = __toESM(require_classnames());
@@ -25344,16 +25335,13 @@ function Button({
 
 // src/components/form/FormResetButton.tsx
 var import_jsx_runtime10 = require("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__ */ (0, import_jsx_runtime10.jsx)(Button, { ...buttonProps, type: "reset", onPress: handleReset, className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { ...props, type: "reset", onPress: handleReset, children });
 }
 
 // src/components/Spinner.tsx
@@ -25407,7 +25395,6 @@ function FormSubmitButton({ children, disabled, isLoading, ...props }) {
   const {
     formState: { isDirty, isValid, isSubmitting, isSubmitted, isSubmitSuccessful }
   } = useFormContext();
-  console.log({ isLoading, isValid, isSubmitSuccessful, isSubmitting, isSubmitted });
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     LoadingButton,
     {
@@ -26546,6 +26533,14 @@ function Calendar({ className, ...props }) {
   ] });
 }
 
+// src/components/Checkbox.tsx
+var import_react158 = require("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());
 
@@ -26558,14 +26553,26 @@ var Checkbox_default = {
 
 // src/components/Checkbox.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-function Checkbox({ className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)($bc237834342dbd75$export$48513f6b9f8ce62d, { ...props, className: (0, import_classnames15.default)(Checkbox_default.checkbox, className), children: ({ isIndeterminate, isSelected }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: Checkbox_default.box, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: Checkbox_default.icon, size: "xs", children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icons.Minus, {}) : isSelected ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icons.Check, {}) : null }) }),
-      children
-    ] });
-  } });
-}
+var Checkbox = (0, import_react158.forwardRef)(
+  ({ label, className, children, ...props }, ref) => {
+    const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      $bc237834342dbd75$export$48513f6b9f8ce62d,
+      {
+        ...props,
+        ref,
+        isSelected,
+        className: (0, import_classnames15.default)(Checkbox_default.checkbox, className),
+        children: ({ isIndeterminate, isSelected: isSelected2 }) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: Checkbox_default.box, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: Checkbox_default.icon, size: "xs", children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icons.Minus, {}) : isSelected2 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ImCheckmark, {}) : null }) }),
+            children
+          ] });
+        }
+      }
+    );
+  }
+);
 
 // src/components/Combobox.tsx
 var import_classnames19 = __toESM(require_classnames());
@@ -26646,16 +26653,30 @@ function Combobox({ items, className, ...props }) {
 }
 
 // src/components/ConfirmationDialog.tsx
+var import_react161 = require("react");
+var import_classnames23 = __toESM(require_classnames());
+
+// src/components/TextField.tsx
 var import_react160 = require("react");
 var import_classnames22 = __toESM(require_classnames());
 
-// src/components/TextField.tsx
-var import_react159 = require("react");
-var import_classnames21 = __toESM(require_classnames());
+// 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
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)($01b77f81d0f07f68$export$b04be29aa201d4f5, { ...props, className: (0, import_classnames20.default)(Label_default.label, className) });
+}
 
 // src/components/CopyButton.tsx
-var import_react158 = require("react");
-var import_classnames20 = __toESM(require_classnames());
+var import_react159 = require("react");
+var import_classnames21 = __toESM(require_classnames());
 
 // src/components/CopyButton.module.css
 var CopyButton_default = {
@@ -26664,20 +26685,20 @@ var CopyButton_default = {
 };
 
 // src/components/CopyButton.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var TIMEOUT = 2e3;
-function CopyButton({ value, className, children, ...props }) {
-  const [copied, setCopied] = (0, import_react158.useState)(false);
-  const timeout = (0, import_react158.useRef)(0);
+function CopyButton({ value, timeout = TIMEOUT, className, children, ...props }) {
+  const [copied, setCopied] = (0, import_react159.useState)(false);
+  const ref = (0, import_react159.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__ */ (0, import_jsx_runtime25.jsx)(Icon, { ...props, className: (0, import_classnames20.default)(CopyButton_default.icon, className), onClick: handleCopy, children: copied ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icons.Check, {}) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icons.Copy, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { ...props, className: (0, import_classnames21.default)(CopyButton_default.icon, className), onClick: handleCopy, children: copied ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icons.Check, {}) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icons.Copy, {}) });
 }
 
 // src/components/Input.module.css
@@ -26685,7 +26706,6 @@ var Input_default = {
   field: "Input_field",
   row: "Input_row",
   input: "Input_input",
-  label: "Input_label",
   icon: "Input_icon"
 };
 
@@ -26697,48 +26717,57 @@ var TextField_default = {
 };
 
 // src/components/TextField.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-function TextField({
-  name,
-  value,
-  defaultValue,
-  label,
-  asTextArea,
-  allowCopy,
-  className,
-  onChange,
-  ...props
-}) {
-  const [inputValue, setInputValue] = (0, import_react159.useState)(defaultValue || value);
-  const Component = asTextArea ? $216918bed6669f72$export$f5c9f3c2c4054eec : $3985021b0ad6602f$export$f5b8910cec6cf069;
-  const handleChange = (e) => {
-    setInputValue(e.target.value);
-    return onChange?.(e);
-  };
-  (0, import_react159.useEffect)(() => {
-    setInputValue(value);
-  }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)($bcdf0525bf22703d$export$2c73285ae9390cec, { className: (0, import_classnames21.default)(Input_default.field, className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: Input_default.label, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: Input_default.row, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        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__ */ (0, import_jsx_runtime26.jsx)(CopyButton, { className: (0, import_classnames21.default)(TextField_default.icon, Input_default.icon), value: inputValue })
-    ] })
-  ] });
-}
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var TextField = (0, import_react160.forwardRef)(
+  ({
+    value,
+    defaultValue,
+    label,
+    placeholder,
+    asTextArea,
+    allowCopy,
+    className,
+    onChange,
+    ...props
+  }, ref) => {
+    const [inputValue, setInputValue] = (0, import_react160.useState)(defaultValue || value);
+    const Component = asTextArea ? $216918bed6669f72$export$f5c9f3c2c4054eec : $3985021b0ad6602f$export$f5b8910cec6cf069;
+    const handleChange = (e) => {
+      setInputValue(e.target.value);
+      return onChange?.(e);
+    };
+    (0, import_react160.useEffect)(() => {
+      setInputValue(value);
+    }, [value]);
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      $bcdf0525bf22703d$export$2c73285ae9390cec,
+      {
+        ...props,
+        ref,
+        value: inputValue,
+        className: (0, import_classnames22.default)(Input_default.field, className),
+        children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Label, { children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: Input_default.row, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              Component,
+              {
+                className: (0, import_classnames22.default)(
+                  TextField_default.input,
+                  Input_default.input,
+                  asTextArea && TextField_default.textarea,
+                  allowCopy && TextField_default.allowCopy
+                ),
+                onChange: handleChange
+              }
+            ),
+            allowCopy && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CopyButton, { className: (0, import_classnames22.default)(TextField_default.icon, Input_default.icon), value: inputValue })
+          ] })
+        ]
+      }
+    );
+  }
+);
 
 // src/components/ConfirmationDialog.module.css
 var ConfirmationDialog_default = {
@@ -26747,7 +26776,7 @@ var ConfirmationDialog_default = {
 };
 
 // src/components/ConfirmationDialog.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function ConfirmationDialog({
   value,
   confirmMessage,
@@ -26755,25 +26784,25 @@ function ConfirmationDialog({
   children,
   ...props
 }) {
-  const [canSave, setCanSave] = (0, import_react160.useState)(false);
+  const [canSave, setCanSave] = (0, import_react161.useState)(false);
   const handleChange = (e) => {
     setCanSave(e.target.value === value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     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__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
           typeof children === "function" ? children({ close }) : children,
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Text, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Text, { children: [
             confirmMessage || "Type the following value to confirm",
             ":"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: ConfirmationDialog_default.value, children: value }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TextField, { autoFocus: true, "aria-label": "Confirmation", onChange: handleChange })
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: ConfirmationDialog_default.value, children: value }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TextField, { autoFocus: true, "aria-label": "Confirmation", onChange: handleChange })
         ] });
       }
     }
@@ -26781,11 +26810,11 @@ function ConfirmationDialog({
 }
 
 // src/components/DataTable.tsx
-var import_classnames24 = __toESM(require_classnames());
-var import_react161 = require("react");
+var import_classnames25 = __toESM(require_classnames());
+var import_react162 = require("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 = {
@@ -26801,32 +26830,32 @@ var Table_default = {
 };
 
 // src/components/Table.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function Table({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)($1910c06f0ca9905e$export$54ec01a60f47d33d, { ...props, className: (0, import_classnames23.default)(Table_default.table, className), "aria-label": "Table", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)($1910c06f0ca9905e$export$54ec01a60f47d33d, { ...props, className: (0, import_classnames24.default)(Table_default.table, className), "aria-label": "Table", children });
 }
 function TableHeader({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)($1910c06f0ca9905e$export$f850895b287ef28e, { ...props, className: (0, import_classnames23.default)(Table_default.header, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)($1910c06f0ca9905e$export$f850895b287ef28e, { ...props, className: (0, import_classnames24.default)(Table_default.header, className), children });
 }
 function TableBody({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)($1910c06f0ca9905e$export$76ccd210b9029917, { ...props, className: (0, import_classnames23.default)(Table_default.body, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)($1910c06f0ca9905e$export$76ccd210b9029917, { ...props, className: (0, import_classnames24.default)(Table_default.body, className), children });
 }
 function TableRow({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)($1910c06f0ca9905e$export$b59bdbef9ce70de2, { ...props, className: (0, import_classnames23.default)(Table_default.row, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)($1910c06f0ca9905e$export$b59bdbef9ce70de2, { ...props, className: (0, import_classnames24.default)(Table_default.row, className), children });
 }
 function TableColumn({ children, className, alignment, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     $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__ */ (0, import_jsx_runtime28.jsx)($1910c06f0ca9905e$export$f6f0c3fe4ec306ea, { ...props, className: (0, import_classnames23.default)(Table_default.cell, className, alignment && Table_default[alignment]), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)($1910c06f0ca9905e$export$f6f0c3fe4ec306ea, { ...props, className: (0, import_classnames24.default)(Table_default.cell, className, alignment && Table_default[alignment]), children });
 }
 
 // src/components/DataTable.module.css
@@ -26836,22 +26865,22 @@ var DataTable_default = {
 };
 
 // src/components/DataTable.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var import_react162 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_react163 = require("react");
 function DataTable({ data = [], className, children, ...props }) {
-  const columns = import_react161.Children.map(children, (child) => {
+  const columns = import_react162.Children.map(children, (child) => {
     return { ...child.props, value: child.props.children };
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Table, { ...props, className: (0, import_classnames24.default)(DataTable_default.datatable, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableHeader, { children: columns.map(({ id, label, hidden, ...columnProps }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Table, { ...props, className: (0, import_classnames25.default)(DataTable_default.datatable, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TableHeader, { children: columns.map(({ id, label, hidden, ...columnProps }) => {
       if (hidden) {
         return null;
       }
-      return /* @__PURE__ */ (0, import_react162.createElement)(TableColumn, { ...columnProps, key: id, id }, label);
+      return /* @__PURE__ */ (0, import_react163.createElement)(TableColumn, { ...columnProps, key: id, id }, label);
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableBody, { items: data, children: (row) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableRow, { children: columns.map(({ id, value, className: className2, ...cellProps }) => {
-        return /* @__PURE__ */ (0, import_react162.createElement)(TableCell, { ...cellProps, key: id, className: (0, import_classnames24.default)(DataTable_default.cell, className2) }, !value && row[id], typeof value === "function" ? value(row, id) : value);
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TableBody, { items: data, children: (row) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TableRow, { children: columns.map(({ id, value, className: className2, ...cellProps }) => {
+        return /* @__PURE__ */ (0, import_react163.createElement)(TableCell, { ...cellProps, key: id, className: (0, import_classnames25.default)(DataTable_default.cell, className2) }, !value && row[id], typeof value === "function" ? value(row, id) : value);
       }) });
     } })
   ] });
@@ -26861,7 +26890,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 = {
@@ -26871,17 +26900,17 @@ var Dots_default = {
 };
 
 // src/components/Dots.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function Dots({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ...props, className: (0, import_classnames25.default)(Dots_default.dots, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: Dots_default.dot }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: Dots_default.dot }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: Dots_default.dot })
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { ...props, className: (0, import_classnames26.default)(Dots_default.dots, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: Dots_default.dot }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: Dots_default.dot }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("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 = {
@@ -26898,22 +26927,22 @@ var Heading_default = {
 };
 
 // src/components/Heading.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function Heading({ size = 5, className, children, asChild, ...props }) {
   const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : "h1";
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     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_react163 = require("react");
-var import_classnames27 = __toESM(require_classnames());
+var import_react164 = require("react");
+var import_classnames28 = __toESM(require_classnames());
 
 // src/components/InlineEditField.module.css
 var InlineEditField_default = {
@@ -26922,7 +26951,7 @@ var InlineEditField_default = {
 };
 
 // src/components/InlineEditField.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function InlineEditField({
   value: defaultValue = "",
   defaultEdit,
@@ -26933,8 +26962,8 @@ function InlineEditField({
   onCancel,
   ...props
 }) {
-  const [value, setValue] = (0, import_react163.useState)(defaultValue);
-  const [edit, setEdit] = (0, import_react163.useState)(defaultEdit);
+  const [value, setValue] = (0, import_react164.useState)(defaultValue);
+  const [edit, setEdit] = (0, import_react164.useState)(defaultEdit);
   const handleEdit = () => setEdit(true);
   const handleChange = (e) => {
     const val = e.target.value;
@@ -26945,7 +26974,7 @@ function InlineEditField({
     setEdit(false);
     onCommit?.(value);
   };
-  const handleCancel = (0, import_react163.useCallback)(() => {
+  const handleCancel = (0, import_react164.useCallback)(() => {
     setEdit(false);
     setValue(defaultValue);
     onCancel?.();
@@ -26957,17 +26986,17 @@ function InlineEditField({
       handleCancel();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "div",
     {
       "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__ */ (0, import_jsx_runtime32.jsx)(Icon, { className: InlineEditField_default.icon, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icons.Edit, {}) }),
-        edit && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        !edit && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { className: InlineEditField_default.icon, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icons.Edit, {}) }),
+        edit && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           TextField,
           {
             value,
@@ -26982,20 +27011,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
-var import_jsx_runtime33 = require("react/jsx-runtime");
-function Label({ asChild, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)($01b77f81d0f07f68$export$b04be29aa201d4f5, { ...props, className: (0, import_classnames28.default)(Label_default.label, className) });
-}
-
 // src/components/Loading.tsx
 var import_classnames29 = __toESM(require_classnames());
 
@@ -27081,7 +27096,8 @@ function Modal({ children, className, ...props }) {
 }
 
 // src/components/PasswordField.tsx
-var import_react164 = require("react");
+var import_react165 = require("react");
+var import_classnames33 = __toESM(require_classnames());
 
 // src/components/PasswordField.module.css
 var PasswordField_default = {
@@ -27089,20 +27105,21 @@ var PasswordField_default = {
 };
 
 // src/components/PasswordField.tsx
-var import_classnames33 = __toESM(require_classnames());
 var import_jsx_runtime38 = require("react/jsx-runtime");
-function PasswordField({ label, ...props }) {
-  const [show, setShow] = (0, import_react164.useState)(false);
-  const type = show ? "text" : "password";
-  const handleShowPassword = () => setShow((state) => !state);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)($bcdf0525bf22703d$export$2c73285ae9390cec, { ...props, className: Input_default.field, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: Input_default.label, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: Input_default.row, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)($3985021b0ad6602f$export$f5b8910cec6cf069, { type, className: Input_default.input }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { onClick: handleShowPassword, className: (0, import_classnames33.default)(PasswordField_default.icon, Input_default.icon), children: show ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icons.EyeSlash, {}) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icons.Eye, {}) })
-    ] })
-  ] });
-}
+var PasswordField = (0, import_react165.forwardRef)(
+  ({ label, className, ...props }, ref) => {
+    const [show, setShow] = (0, import_react165.useState)(false);
+    const type = show ? "text" : "password";
+    const handleShowPassword = () => setShow((state) => !state);
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)($bcdf0525bf22703d$export$2c73285ae9390cec, { ...props, ref, className: (0, import_classnames33.default)(Input_default.field, className), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Label, { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: Input_default.row, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)($3985021b0ad6602f$export$f5b8910cec6cf069, { type, className: Input_default.input }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { onClick: handleShowPassword, className: (0, import_classnames33.default)(PasswordField_default.icon, Input_default.icon), children: show ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icons.EyeSlash, {}) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icons.Eye, {}) })
+      ] })
+    ] });
+  }
+);
 
 // src/components/Page.tsx
 var import_classnames34 = __toESM(require_classnames());
@@ -27179,6 +27196,7 @@ function ProgressCircle({ className, showValue, ...props }) {
 }
 
 // src/components/RadioGroup.tsx
+var import_react166 = require("react");
 var import_classnames37 = __toESM(require_classnames());
 
 // src/components/RadioGroup.module.css
@@ -27189,15 +27207,20 @@ var RadioGroup_default = {
 
 // src/components/RadioGroup.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
-function RadioGroup({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, className: (0, import_classnames37.default)(RadioGroup_default.radiogroup, className), children });
-}
+var RadioGroup = (0, import_react166.forwardRef)(
+  ({ label, children, className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, ref, className: (0, import_classnames37.default)(RadioGroup_default.radiogroup, className), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Label, { children: label }),
+      children
+    ] });
+  }
+);
 function Radio({ children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)($b6c3ddc6086f204d$export$d7b12c4107be0d61, { ...props, className: (0, import_classnames37.default)(RadioGroup_default.radio, className), children });
 }
 
 // src/components/SearchField.tsx
-var import_react165 = require("react");
+var import_react167 = require("react");
 var import_classnames38 = __toESM(require_classnames());
 
 // src/components/SearchField.module.css
@@ -27209,41 +27232,54 @@ var SearchField_default = {
 
 // src/components/SearchField.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
-function SearchField({ value, delay = 0, onSearch, className, ...props }) {
-  const [search, setSearch] = (0, import_react165.useState)(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?.("");
-  };
-  (0, import_react165.useEffect)(() => {
-    if (delay > 0) {
-      onSearch?.(searchValue);
-    }
-  }, [searchValue, delay, onSearch]);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)($440f4836bcb56932$export$b94867ecbd698f21, { ...props, className: (0, import_classnames38.default)(Input_default.field, className), children: ({ state }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: Input_default.row, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icons.MagnifyingGlass, { className: (0, import_classnames38.default)(SearchField_default.search, Input_default.icon) }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-        $3985021b0ad6602f$export$f5b8910cec6cf069,
-        {
-          className: (0, import_classnames38.default)(SearchField_default.input, Input_default.input),
-          onChange: handleChange
-        }
-      ),
-      state.value && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: (0, import_classnames38.default)(SearchField_default.close, Input_default.icon), onPress: resetSearch, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icons.Close, {}) }) })
-    ] });
-  } });
-}
+var SearchField = (0, import_react167.forwardRef)(
+  ({ label, value, delay = 0, onSearch, className, ...props }, ref) => {
+    const [search, setSearch] = (0, import_react167.useState)(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?.("");
+    };
+    (0, import_react167.useEffect)(() => {
+      if (delay > 0) {
+        onSearch?.(searchValue);
+      }
+    }, [searchValue, delay, onSearch]);
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)($440f4836bcb56932$export$b94867ecbd698f21, { ...props, ref, className: (0, import_classnames38.default)(Input_default.field, className), children: ({ state }) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Label, { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: Input_default.row, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icons.MagnifyingGlass, { className: (0, import_classnames38.default)(SearchField_default.search, Input_default.icon) }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            $3985021b0ad6602f$export$f5b8910cec6cf069,
+            {
+              className: (0, import_classnames38.default)(SearchField_default.input, Input_default.input),
+              onChange: handleChange
+            }
+          ),
+          state.value && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
+            {
+              className: (0, import_classnames38.default)(SearchField_default.close, Input_default.icon),
+              onPress: resetSearch,
+              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icons.Close, {}) })
+            }
+          )
+        ] })
+      ] });
+    } });
+  }
+);
 
 // src/components/Select.tsx
+var import_react168 = require("react");
 var import_classnames39 = __toESM(require_classnames());
 
 // src/components/Select.module.css
@@ -27256,46 +27292,49 @@ var Select_default = {
 
 // src/components/Select.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
-function Select({
-  children,
-  items = [],
-  value,
-  label,
-  className,
-  onSelectionChange,
-  onChange,
-  ...props
-}) {
-  const handleChange = (e) => {
-    onSelectionChange?.(e);
-    onChange?.(e);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-    $82d7e5349645de74$export$ef9b1a59e592288f,
-    {
-      ...props,
-      className: (0, import_classnames39.default)(Input_default.field, className),
-      onSelectionChange: handleChange,
-      children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: Input_default.label, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: (0, import_classnames39.default)(Input_default.input, className), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Row, { justifyContent: "space-between", gap: "md", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)($82d7e5349645de74$export$e288731fd71264f0, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { rotate: 90, size: "xs", className: Input_default.icon, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icons.Chevron, {}) }) })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(List, { items, className: Select_default.list, children }) })
-      ]
-    }
-  );
-}
+var Select = (0, import_react168.forwardRef)(
+  ({
+    children,
+    items = [],
+    value,
+    label,
+    className,
+    onSelectionChange,
+    onChange,
+    ...props
+  }, ref) => {
+    const handleChange = (e) => {
+      onSelectionChange?.(e);
+      onChange?.(e);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+      $82d7e5349645de74$export$ef9b1a59e592288f,
+      {
+        ...props,
+        ref,
+        className: (0, import_classnames39.default)(Input_default.field, className),
+        onSelectionChange: handleChange,
+        children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Label, { children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: (0, import_classnames39.default)(Input_default.input, className), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Row, { justifyContent: "space-between", gap: "md", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)($82d7e5349645de74$export$e288731fd71264f0, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { rotate: 90, size: "xs", className: Input_default.icon, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icons.Chevron, {}) }) })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(List, { items, className: Select_default.list, children }) })
+        ]
+      }
+    );
+  }
+);
 
 // src/components/Slider.tsx
+var import_react169 = require("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"
@@ -27303,27 +27342,31 @@ var Slider_default = {
 
 // src/components/Slider.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
-function Slider({ className, showValue = true, label, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)($6f909507e6374d18$export$472062a354075cee, { ...props, className: (0, import_classnames40.default)(Slider_default.slider, className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Label, { className: Slider_default.label, children: label }),
-    showValue && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)($6f909507e6374d18$export$a590f758a961cb5b, { className: Slider_default.output }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
-      const isHorizontal = state.orientation === "horizontal";
-      return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-          "div",
-          {
-            className: Slider_default.fill,
-            style: {
-              [isHorizontal ? "width" : "height"]: (isHorizontal ? state.getThumbPercent(0) : 1 - state.getThumbPercent(0)) * 100 + "%"
+var Slider = (0, import_react169.forwardRef)(
+  ({ className, showValue = true, label, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)($6f909507e6374d18$export$472062a354075cee, { ...props, ref, className: (0, import_classnames40.default)(Slider_default.slider, className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: Slider_default.header, children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Label, { className: Slider_default.label, children: label }),
+        showValue && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)($6f909507e6374d18$export$a590f758a961cb5b, { className: Slider_default.output })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
+        const isHorizontal = state.orientation === "horizontal";
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            "div",
+            {
+              className: Slider_default.fill,
+              style: {
+                [isHorizontal ? "width" : "height"]: (isHorizontal ? state.getThumbPercent(0) : 1 - state.getThumbPercent(0)) * 100 + "%"
+              }
             }
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)($6f909507e6374d18$export$2c1b491743890dec, { className: Slider_default.thumb })
-      ] });
-    } })
-  ] });
-}
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)($6f909507e6374d18$export$2c1b491743890dec, { className: Slider_default.thumb })
+        ] });
+      } })
+    ] });
+  }
+);
 
 // src/components/StatusLight.tsx
 var import_classnames41 = __toESM(require_classnames());
@@ -27357,6 +27400,7 @@ function StatusLight(props) {
 }
 
 // src/components/Switch.tsx
+var import_react170 = require("react");
 var import_classnames42 = __toESM(require_classnames());
 
 // src/components/Switch.module.css
@@ -27368,12 +27412,27 @@ var Switch_default = {
 
 // src/components/Switch.tsx
 var import_jsx_runtime47 = require("react/jsx-runtime");
-function Switch({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)($8e59e948500a8fe1$export$b5d5cf8927ab7262, { ...props, className: (0, import_classnames42.default)(Switch_default.switch, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: Switch_default.track, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: Switch_default.knob }) }),
-    children
-  ] });
-}
+var Switch = (0, import_react170.forwardRef)(
+  ({ label, children, className, ...props }, ref) => {
+    const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Label, { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+        $8e59e948500a8fe1$export$b5d5cf8927ab7262,
+        {
+          ...props,
+          isSelected,
+          ref,
+          className: (0, import_classnames42.default)(Switch_default.switch, className),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: Switch_default.track, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: Switch_default.knob }) }),
+            children
+          ]
+        }
+      )
+    ] });
+  }
+);
 
 // src/components/Tabs.module.css
 var Tabs_default = {
@@ -27415,25 +27474,34 @@ function TextOverflow({ asChild, children, className, ...props }) {
 }
 
 // src/components/TextArea.tsx
+var import_react171 = require("react");
 var import_classnames44 = __toESM(require_classnames());
 
 // 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
 var import_jsx_runtime50 = require("react/jsx-runtime");
-function TextArea({ resize, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TextField, { ...props, className: (0, import_classnames44.default)(resize && TextArea_default[resize]), asTextArea: true });
-}
+var TextArea = (0, import_react171.forwardRef)(({ resize, className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    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());
-var import_react167 = require("react");
+var import_react173 = require("react");
 
 // node_modules/@radix-ui/react-toast/dist/index.mjs
 var React18 = __toESM(require("react"), 1);
@@ -27466,7 +27534,7 @@ function useComposedRefs(...refs) {
 }
 
 // node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-collection/dist/index.mjs
-var import_react166 = __toESM(require("react"), 1);
+var import_react172 = __toESM(require("react"), 1);
 
 // node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-context/dist/index.mjs
 var React6 = __toESM(require("react"), 1);
@@ -27618,13 +27686,13 @@ function createCollection(name) {
   );
   const CollectionProvider = (props) => {
     const { scope, children } = props;
-    const ref = import_react166.default.useRef(null);
-    const itemMap = import_react166.default.useRef(/* @__PURE__ */ new Map()).current;
+    const ref = import_react172.default.useRef(null);
+    const itemMap = import_react172.default.useRef(/* @__PURE__ */ new Map()).current;
     return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME2;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
-  const CollectionSlot = import_react166.default.forwardRef(
+  const CollectionSlot = import_react172.default.forwardRef(
     (props, forwardedRef) => {
       const { scope, children } = props;
       const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
@@ -27635,13 +27703,13 @@ function createCollection(name) {
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
-  const CollectionItemSlot = import_react166.default.forwardRef(
+  const CollectionItemSlot = import_react172.default.forwardRef(
     (props, forwardedRef) => {
       const { scope, children, ...itemData } = props;
-      const ref = import_react166.default.useRef(null);
+      const ref = import_react172.default.useRef(null);
       const composedRefs = useComposedRefs(forwardedRef, ref);
       const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-      import_react166.default.useEffect(() => {
+      import_react172.default.useEffect(() => {
         context.itemMap.set(ref, { ref, ...itemData });
         return () => void context.itemMap.delete(ref);
       });
@@ -27651,7 +27719,7 @@ function createCollection(name) {
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection2(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = import_react166.default.useCallback(() => {
+    const getItems = import_react172.default.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode) return [];
       const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
@@ -28782,7 +28850,7 @@ var Toast_default = {
 
 // src/components/Toast.tsx
 var import_jsx_runtime59 = require("react/jsx-runtime");
-var import_react168 = require("react");
+var import_react174 = require("react");
 var icons = {
   info: Icons.Info,
   error: Icons.Alert
@@ -28798,7 +28866,7 @@ function Toast2({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Root2, { ...props, className: (0, import_classnames45.default)(Toast_default.toast, className, variant && Toast_default[variant]), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon, { className: Toast_default.icon, size: "md", children: variant && (0, import_react167.createElement)(icons[variant]) }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon, { className: Toast_default.icon, size: "md", children: variant && (0, import_react173.createElement)(icons[variant]) }),
     title && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ToastTitle, { className: Toast_default.title, children: title }),
     description && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ToastDescription, { className: Toast_default.description, children: description }),
     children && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ToastAction, { className: Toast_default.action, altText: actionText || "Action", asChild: true, children }),
@@ -28809,13 +28877,14 @@ function Toaster(props) {
   const { toasts } = useToast();
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
     toasts.map(({ id, message, props: props2 }) => {
-      return /* @__PURE__ */ (0, import_react168.createElement)(Toast2, { ...props2, key: id, description: message });
+      return /* @__PURE__ */ (0, import_react174.createElement)(Toast2, { ...props2, key: id, description: message });
     }),
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Viewport, { className: Toast_default.viewport, ...props })
   ] });
 }
 
 // src/components/Toggle.tsx
+var import_react175 = require("react");
 var import_classnames46 = __toESM(require_classnames());
 
 // src/components/Toggle.module.css
@@ -28825,18 +28894,33 @@ var Toggle_default = {
 
 // src/components/Toggle.tsx
 var import_jsx_runtime60 = require("react/jsx-runtime");
-function Toggle({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)($efde0372d7a700fe$export$d2b052e7b4be1756, { ...props, className: (0, import_classnames46.default)(Toggle_default.toggle, className), children });
-}
+var Toggle = (0, import_react175.forwardRef)(
+  ({ label, children, className, ...props }, ref) => {
+    const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Label, { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        $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());
 
 // node_modules/@radix-ui/react-toggle-group/dist/index.mjs
-var import_react171 = __toESM(require("react"), 1);
+var import_react178 = __toESM(require("react"), 1);
 
 // node_modules/@radix-ui/react-roving-focus/dist/index.mjs
-var import_react169 = require("react");
+var import_react176 = require("react");
 var $d7bdfb9eb0fdf311$var$ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
 var $d7bdfb9eb0fdf311$var$EVENT_OPTIONS = {
   bubbles: false,
@@ -28848,18 +28932,18 @@ var [$d7bdfb9eb0fdf311$var$createRovingFocusGroupContext, $d7bdfb9eb0fdf311$expo
   $d7bdfb9eb0fdf311$var$createCollectionScope
 ]);
 var [$d7bdfb9eb0fdf311$var$RovingFocusProvider, $d7bdfb9eb0fdf311$var$useRovingFocusContext] = $d7bdfb9eb0fdf311$var$createRovingFocusGroupContext($d7bdfb9eb0fdf311$var$GROUP_NAME);
-var $d7bdfb9eb0fdf311$export$8699f7c8af148338 = /* @__PURE__ */ (0, import_react169.forwardRef)((props, forwardedRef) => {
-  return /* @__PURE__ */ (0, import_react169.createElement)($d7bdfb9eb0fdf311$var$Collection.Provider, {
+var $d7bdfb9eb0fdf311$export$8699f7c8af148338 = /* @__PURE__ */ (0, import_react176.forwardRef)((props, forwardedRef) => {
+  return /* @__PURE__ */ (0, import_react176.createElement)($d7bdfb9eb0fdf311$var$Collection.Provider, {
     scope: props.__scopeRovingFocusGroup
-  }, /* @__PURE__ */ (0, import_react169.createElement)($d7bdfb9eb0fdf311$var$Collection.Slot, {
+  }, /* @__PURE__ */ (0, import_react176.createElement)($d7bdfb9eb0fdf311$var$Collection.Slot, {
     scope: props.__scopeRovingFocusGroup
-  }, /* @__PURE__ */ (0, import_react169.createElement)($d7bdfb9eb0fdf311$var$RovingFocusGroupImpl, _extends({}, props, {
+  }, /* @__PURE__ */ (0, import_react176.createElement)($d7bdfb9eb0fdf311$var$RovingFocusGroupImpl, _extends({}, props, {
     ref: forwardedRef
   }))));
 });
-var $d7bdfb9eb0fdf311$var$RovingFocusGroupImpl = /* @__PURE__ */ (0, import_react169.forwardRef)((props, forwardedRef) => {
+var $d7bdfb9eb0fdf311$var$RovingFocusGroupImpl = /* @__PURE__ */ (0, import_react176.forwardRef)((props, forwardedRef) => {
   const { __scopeRovingFocusGroup, orientation, loop = false, dir, currentTabStopId: currentTabStopIdProp, defaultCurrentTabStopId, onCurrentTabStopIdChange, onEntryFocus, ...groupProps } = props;
-  const ref = (0, import_react169.useRef)(null);
+  const ref = (0, import_react176.useRef)(null);
   const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
   const direction = $f631663db3294ace$export$b39126d51d94e6f3(dir);
   const [currentTabStopId = null, setCurrentTabStopId] = $71cd76cc60e0454e$export$6f32135080cb4c3({
@@ -28867,12 +28951,12 @@ var $d7bdfb9eb0fdf311$var$RovingFocusGroupImpl = /* @__PURE__ */ (0, import_reac
     defaultProp: defaultCurrentTabStopId,
     onChange: onCurrentTabStopIdChange
   });
-  const [isTabbingBackOut, setIsTabbingBackOut] = (0, import_react169.useState)(false);
+  const [isTabbingBackOut, setIsTabbingBackOut] = (0, import_react176.useState)(false);
   const handleEntryFocus = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onEntryFocus);
   const getItems = $d7bdfb9eb0fdf311$var$useCollection(__scopeRovingFocusGroup);
-  const isClickFocusRef = (0, import_react169.useRef)(false);
-  const [focusableItemsCount, setFocusableItemsCount] = (0, import_react169.useState)(0);
-  (0, import_react169.useEffect)(() => {
+  const isClickFocusRef = (0, import_react176.useRef)(false);
+  const [focusableItemsCount, setFocusableItemsCount] = (0, import_react176.useState)(0);
+  (0, import_react176.useEffect)(() => {
     const node = ref.current;
     if (node) {
       node.addEventListener($d7bdfb9eb0fdf311$var$ENTRY_FOCUS, handleEntryFocus);
@@ -28881,35 +28965,35 @@ var $d7bdfb9eb0fdf311$var$RovingFocusGroupImpl = /* @__PURE__ */ (0, import_reac
   }, [
     handleEntryFocus
   ]);
-  return /* @__PURE__ */ (0, import_react169.createElement)($d7bdfb9eb0fdf311$var$RovingFocusProvider, {
+  return /* @__PURE__ */ (0, import_react176.createElement)($d7bdfb9eb0fdf311$var$RovingFocusProvider, {
     scope: __scopeRovingFocusGroup,
     orientation,
     dir: direction,
     loop,
     currentTabStopId,
-    onItemFocus: (0, import_react169.useCallback)(
+    onItemFocus: (0, import_react176.useCallback)(
       (tabStopId) => setCurrentTabStopId(tabStopId),
       [
         setCurrentTabStopId
       ]
     ),
-    onItemShiftTab: (0, import_react169.useCallback)(
+    onItemShiftTab: (0, import_react176.useCallback)(
       () => setIsTabbingBackOut(true),
       []
     ),
-    onFocusableItemAdd: (0, import_react169.useCallback)(
+    onFocusableItemAdd: (0, import_react176.useCallback)(
       () => setFocusableItemsCount(
         (prevCount) => prevCount + 1
       ),
       []
     ),
-    onFocusableItemRemove: (0, import_react169.useCallback)(
+    onFocusableItemRemove: (0, import_react176.useCallback)(
       () => setFocusableItemsCount(
         (prevCount) => prevCount - 1
       ),
       []
     )
-  }, /* @__PURE__ */ (0, import_react169.createElement)($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
+  }, /* @__PURE__ */ (0, import_react176.createElement)($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
     tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
     "data-orientation": orientation
   }, groupProps, {
@@ -28956,7 +29040,7 @@ var $d7bdfb9eb0fdf311$var$RovingFocusGroupImpl = /* @__PURE__ */ (0, import_reac
   })));
 });
 var $d7bdfb9eb0fdf311$var$ITEM_NAME = "RovingFocusGroupItem";
-var $d7bdfb9eb0fdf311$export$ab9df7c53fe8454 = /* @__PURE__ */ (0, import_react169.forwardRef)((props, forwardedRef) => {
+var $d7bdfb9eb0fdf311$export$ab9df7c53fe8454 = /* @__PURE__ */ (0, import_react176.forwardRef)((props, forwardedRef) => {
   const { __scopeRovingFocusGroup, focusable = true, active = false, tabStopId, ...itemProps } = props;
   const autoId = $1746a345f3d73bb7$export$f680877a34711e37();
   const id = tabStopId || autoId;
@@ -28964,7 +29048,7 @@ var $d7bdfb9eb0fdf311$export$ab9df7c53fe8454 = /* @__PURE__ */ (0, import_react1
   const isCurrentTabStop = context.currentTabStopId === id;
   const getItems = $d7bdfb9eb0fdf311$var$useCollection(__scopeRovingFocusGroup);
   const { onFocusableItemAdd, onFocusableItemRemove } = context;
-  (0, import_react169.useEffect)(() => {
+  (0, import_react176.useEffect)(() => {
     if (focusable) {
       onFocusableItemAdd();
       return () => onFocusableItemRemove();
@@ -28974,12 +29058,12 @@ var $d7bdfb9eb0fdf311$export$ab9df7c53fe8454 = /* @__PURE__ */ (0, import_react1
     onFocusableItemAdd,
     onFocusableItemRemove
   ]);
-  return /* @__PURE__ */ (0, import_react169.createElement)($d7bdfb9eb0fdf311$var$Collection.ItemSlot, {
+  return /* @__PURE__ */ (0, import_react176.createElement)($d7bdfb9eb0fdf311$var$Collection.ItemSlot, {
     scope: __scopeRovingFocusGroup,
     id,
     focusable,
     active
-  }, /* @__PURE__ */ (0, import_react169.createElement)($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({
+  }, /* @__PURE__ */ (0, import_react176.createElement)($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({
     tabIndex: isCurrentTabStop ? 0 : -1,
     "data-orientation": context.orientation
   }, itemProps, {
@@ -29063,15 +29147,15 @@ var $d7bdfb9eb0fdf311$export$be92b6f5f03c0fe9 = $d7bdfb9eb0fdf311$export$8699f7c
 var $d7bdfb9eb0fdf311$export$6d08773d2e66f8f2 = $d7bdfb9eb0fdf311$export$ab9df7c53fe8454;
 
 // node_modules/@radix-ui/react-toggle/dist/index.mjs
-var import_react170 = require("react");
-var $b3bbe2732c13b576$export$bea8ebba691c5813 = /* @__PURE__ */ (0, import_react170.forwardRef)((props, forwardedRef) => {
+var import_react177 = require("react");
+var $b3bbe2732c13b576$export$bea8ebba691c5813 = /* @__PURE__ */ (0, import_react177.forwardRef)((props, forwardedRef) => {
   const { pressed: pressedProp, defaultPressed = false, onPressedChange, ...buttonProps } = props;
   const [pressed = false, setPressed] = $71cd76cc60e0454e$export$6f32135080cb4c3({
     prop: pressedProp,
     onChange: onPressedChange,
     defaultProp: defaultPressed
   });
-  return /* @__PURE__ */ (0, import_react170.createElement)($8927f6f2acc4f386$export$250ffa63cdc0d034.button, _extends({
+  return /* @__PURE__ */ (0, import_react177.createElement)($8927f6f2acc4f386$export$250ffa63cdc0d034.button, _extends({
     type: "button",
     "aria-pressed": pressed,
     "data-state": pressed ? "on" : "off",
@@ -29090,24 +29174,24 @@ var [$6c1fd9e6a8969628$var$createToggleGroupContext, $6c1fd9e6a8969628$export$d1
   $d7bdfb9eb0fdf311$export$c7109489551a4f4
 ]);
 var $6c1fd9e6a8969628$var$useRovingFocusGroupScope = $d7bdfb9eb0fdf311$export$c7109489551a4f4();
-var $6c1fd9e6a8969628$export$af3ec21f6cfb5e30 = /* @__PURE__ */ import_react171.default.forwardRef((props, forwardedRef) => {
+var $6c1fd9e6a8969628$export$af3ec21f6cfb5e30 = /* @__PURE__ */ import_react178.default.forwardRef((props, forwardedRef) => {
   const { type, ...toggleGroupProps } = props;
   if (type === "single") {
     const singleProps = toggleGroupProps;
-    return /* @__PURE__ */ import_react171.default.createElement($6c1fd9e6a8969628$var$ToggleGroupImplSingle, _extends({}, singleProps, {
+    return /* @__PURE__ */ import_react178.default.createElement($6c1fd9e6a8969628$var$ToggleGroupImplSingle, _extends({}, singleProps, {
       ref: forwardedRef
     }));
   }
   if (type === "multiple") {
     const multipleProps = toggleGroupProps;
-    return /* @__PURE__ */ import_react171.default.createElement($6c1fd9e6a8969628$var$ToggleGroupImplMultiple, _extends({}, multipleProps, {
+    return /* @__PURE__ */ import_react178.default.createElement($6c1fd9e6a8969628$var$ToggleGroupImplMultiple, _extends({}, multipleProps, {
       ref: forwardedRef
     }));
   }
   throw new Error(`Missing prop \`type\` expected on \`${$6c1fd9e6a8969628$var$TOGGLE_GROUP_NAME}\``);
 });
 var [$6c1fd9e6a8969628$var$ToggleGroupValueProvider, $6c1fd9e6a8969628$var$useToggleGroupValueContext] = $6c1fd9e6a8969628$var$createToggleGroupContext($6c1fd9e6a8969628$var$TOGGLE_GROUP_NAME);
-var $6c1fd9e6a8969628$var$ToggleGroupImplSingle = /* @__PURE__ */ import_react171.default.forwardRef((props, forwardedRef) => {
+var $6c1fd9e6a8969628$var$ToggleGroupImplSingle = /* @__PURE__ */ import_react178.default.forwardRef((props, forwardedRef) => {
   const { value: valueProp, defaultValue, onValueChange = () => {
   }, ...toggleGroupSingleProps } = props;
   const [value, setValue] = $71cd76cc60e0454e$export$6f32135080cb4c3({
@@ -29115,24 +29199,24 @@ var $6c1fd9e6a8969628$var$ToggleGroupImplSingle = /* @__PURE__ */ import_react17
     defaultProp: defaultValue,
     onChange: onValueChange
   });
-  return /* @__PURE__ */ import_react171.default.createElement($6c1fd9e6a8969628$var$ToggleGroupValueProvider, {
+  return /* @__PURE__ */ import_react178.default.createElement($6c1fd9e6a8969628$var$ToggleGroupValueProvider, {
     scope: props.__scopeToggleGroup,
     type: "single",
     value: value ? [
       value
     ] : [],
     onItemActivate: setValue,
-    onItemDeactivate: import_react171.default.useCallback(
+    onItemDeactivate: import_react178.default.useCallback(
       () => setValue(""),
       [
         setValue
       ]
     )
-  }, /* @__PURE__ */ import_react171.default.createElement($6c1fd9e6a8969628$var$ToggleGroupImpl, _extends({}, toggleGroupSingleProps, {
+  }, /* @__PURE__ */ import_react178.default.createElement($6c1fd9e6a8969628$var$ToggleGroupImpl, _extends({}, toggleGroupSingleProps, {
     ref: forwardedRef
   })));
 });
-var $6c1fd9e6a8969628$var$ToggleGroupImplMultiple = /* @__PURE__ */ import_react171.default.forwardRef((props, forwardedRef) => {
+var $6c1fd9e6a8969628$var$ToggleGroupImplMultiple = /* @__PURE__ */ import_react178.default.forwardRef((props, forwardedRef) => {
   const { value: valueProp, defaultValue, onValueChange = () => {
   }, ...toggleGroupMultipleProps } = props;
   const [value1 = [], setValue] = $71cd76cc60e0454e$export$6f32135080cb4c3({
@@ -29140,7 +29224,7 @@ var $6c1fd9e6a8969628$var$ToggleGroupImplMultiple = /* @__PURE__ */ import_react
     defaultProp: defaultValue,
     onChange: onValueChange
   });
-  const handleButtonActivate = import_react171.default.useCallback(
+  const handleButtonActivate = import_react178.default.useCallback(
     (itemValue) => setValue(
       (prevValue = []) => [
         ...prevValue,
@@ -29151,7 +29235,7 @@ var $6c1fd9e6a8969628$var$ToggleGroupImplMultiple = /* @__PURE__ */ import_react
       setValue
     ]
   );
-  const handleButtonDeactivate = import_react171.default.useCallback(
+  const handleButtonDeactivate = import_react178.default.useCallback(
     (itemValue) => setValue(
       (prevValue = []) => prevValue.filter(
         (value) => value !== itemValue
@@ -29161,18 +29245,18 @@ var $6c1fd9e6a8969628$var$ToggleGroupImplMultiple = /* @__PURE__ */ import_react
       setValue
     ]
   );
-  return /* @__PURE__ */ import_react171.default.createElement($6c1fd9e6a8969628$var$ToggleGroupValueProvider, {
+  return /* @__PURE__ */ import_react178.default.createElement($6c1fd9e6a8969628$var$ToggleGroupValueProvider, {
     scope: props.__scopeToggleGroup,
     type: "multiple",
     value: value1,
     onItemActivate: handleButtonActivate,
     onItemDeactivate: handleButtonDeactivate
-  }, /* @__PURE__ */ import_react171.default.createElement($6c1fd9e6a8969628$var$ToggleGroupImpl, _extends({}, toggleGroupMultipleProps, {
+  }, /* @__PURE__ */ import_react178.default.createElement($6c1fd9e6a8969628$var$ToggleGroupImpl, _extends({}, toggleGroupMultipleProps, {
     ref: forwardedRef
   })));
 });
 var [$6c1fd9e6a8969628$var$ToggleGroupContext, $6c1fd9e6a8969628$var$useToggleGroupContext] = $6c1fd9e6a8969628$var$createToggleGroupContext($6c1fd9e6a8969628$var$TOGGLE_GROUP_NAME);
-var $6c1fd9e6a8969628$var$ToggleGroupImpl = /* @__PURE__ */ import_react171.default.forwardRef((props, forwardedRef) => {
+var $6c1fd9e6a8969628$var$ToggleGroupImpl = /* @__PURE__ */ import_react178.default.forwardRef((props, forwardedRef) => {
   const { __scopeToggleGroup, disabled = false, rovingFocus = true, orientation, dir, loop = true, ...toggleGroupProps } = props;
   const rovingFocusGroupScope = $6c1fd9e6a8969628$var$useRovingFocusGroupScope(__scopeToggleGroup);
   const direction = $f631663db3294ace$export$b39126d51d94e6f3(dir);
@@ -29181,24 +29265,24 @@ var $6c1fd9e6a8969628$var$ToggleGroupImpl = /* @__PURE__ */ import_react171.defa
     dir: direction,
     ...toggleGroupProps
   };
-  return /* @__PURE__ */ import_react171.default.createElement($6c1fd9e6a8969628$var$ToggleGroupContext, {
+  return /* @__PURE__ */ import_react178.default.createElement($6c1fd9e6a8969628$var$ToggleGroupContext, {
     scope: __scopeToggleGroup,
     rovingFocus,
     disabled
-  }, rovingFocus ? /* @__PURE__ */ import_react171.default.createElement($d7bdfb9eb0fdf311$export$be92b6f5f03c0fe9, _extends({
+  }, rovingFocus ? /* @__PURE__ */ import_react178.default.createElement($d7bdfb9eb0fdf311$export$be92b6f5f03c0fe9, _extends({
     asChild: true
   }, rovingFocusGroupScope, {
     orientation,
     dir: direction,
     loop
-  }), /* @__PURE__ */ import_react171.default.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({}, commonProps, {
+  }), /* @__PURE__ */ import_react178.default.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({}, commonProps, {
     ref: forwardedRef
-  }))) : /* @__PURE__ */ import_react171.default.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({}, commonProps, {
+  }))) : /* @__PURE__ */ import_react178.default.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({}, commonProps, {
     ref: forwardedRef
   })));
 });
 var $6c1fd9e6a8969628$var$ITEM_NAME = "ToggleGroupItem";
-var $6c1fd9e6a8969628$export$b453109e13abe10b = /* @__PURE__ */ import_react171.default.forwardRef((props, forwardedRef) => {
+var $6c1fd9e6a8969628$export$b453109e13abe10b = /* @__PURE__ */ import_react178.default.forwardRef((props, forwardedRef) => {
   const valueContext = $6c1fd9e6a8969628$var$useToggleGroupValueContext($6c1fd9e6a8969628$var$ITEM_NAME, props.__scopeToggleGroup);
   const context = $6c1fd9e6a8969628$var$useToggleGroupContext($6c1fd9e6a8969628$var$ITEM_NAME, props.__scopeToggleGroup);
   const rovingFocusGroupScope = $6c1fd9e6a8969628$var$useRovingFocusGroupScope(props.__scopeToggleGroup);
@@ -29209,20 +29293,20 @@ var $6c1fd9e6a8969628$export$b453109e13abe10b = /* @__PURE__ */ import_react171.
     pressed,
     disabled
   };
-  const ref = import_react171.default.useRef(null);
-  return context.rovingFocus ? /* @__PURE__ */ import_react171.default.createElement($d7bdfb9eb0fdf311$export$6d08773d2e66f8f2, _extends({
+  const ref = import_react178.default.useRef(null);
+  return context.rovingFocus ? /* @__PURE__ */ import_react178.default.createElement($d7bdfb9eb0fdf311$export$6d08773d2e66f8f2, _extends({
     asChild: true
   }, rovingFocusGroupScope, {
     focusable: !disabled,
     active: pressed,
     ref
-  }), /* @__PURE__ */ import_react171.default.createElement($6c1fd9e6a8969628$var$ToggleGroupItemImpl, _extends({}, commonProps, {
+  }), /* @__PURE__ */ import_react178.default.createElement($6c1fd9e6a8969628$var$ToggleGroupItemImpl, _extends({}, commonProps, {
     ref: forwardedRef
-  }))) : /* @__PURE__ */ import_react171.default.createElement($6c1fd9e6a8969628$var$ToggleGroupItemImpl, _extends({}, commonProps, {
+  }))) : /* @__PURE__ */ import_react178.default.createElement($6c1fd9e6a8969628$var$ToggleGroupItemImpl, _extends({}, commonProps, {
     ref: forwardedRef
   }));
 });
-var $6c1fd9e6a8969628$var$ToggleGroupItemImpl = /* @__PURE__ */ import_react171.default.forwardRef((props, forwardedRef) => {
+var $6c1fd9e6a8969628$var$ToggleGroupItemImpl = /* @__PURE__ */ import_react178.default.forwardRef((props, forwardedRef) => {
   const { __scopeToggleGroup, value, ...itemProps } = props;
   const valueContext = $6c1fd9e6a8969628$var$useToggleGroupValueContext($6c1fd9e6a8969628$var$ITEM_NAME, __scopeToggleGroup);
   const singleProps = {
@@ -29231,7 +29315,7 @@ var $6c1fd9e6a8969628$var$ToggleGroupItemImpl = /* @__PURE__ */ import_react171.
     "aria-pressed": void 0
   };
   const typeProps = valueContext.type === "single" ? singleProps : void 0;
-  return /* @__PURE__ */ import_react171.default.createElement($b3bbe2732c13b576$export$bea8ebba691c5813, _extends({}, typeProps, itemProps, {
+  return /* @__PURE__ */ import_react178.default.createElement($b3bbe2732c13b576$export$bea8ebba691c5813, _extends({}, typeProps, itemProps, {
     ref: forwardedRef,
     onPressedChange: (pressed) => {
       if (pressed) valueContext.onItemActivate(value);
@@ -29303,17 +29387,6 @@ classnames/index.js:
   	http://jedwatson.github.io/classnames
   *)
 
-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.development.js:
   (**
    * @license React