@umami/react-zen 0.28.0 → 0.29.0

package/dist/index.mjs

@@ -82,8 +82,8 @@ var require_use_sync_external_store_shim_development = __commonJS({
         if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === "function") {
           __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
         }
-        var React8 = __import_react2;
-        var ReactSharedInternals = React8.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+        var React10 = __import_react2;
+        var ReactSharedInternals = React10.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
         function error(format) {
           {
             {
@@ -113,13 +113,13 @@ var require_use_sync_external_store_shim_development = __commonJS({
           return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y;
         }
         var objectIs = typeof Object.is === "function" ? Object.is : is2;
-        var useState15 = React8.useState, useEffect11 = React8.useEffect, useLayoutEffect2 = React8.useLayoutEffect, useDebugValue = React8.useDebugValue;
+        var useState15 = React10.useState, useEffect11 = React10.useEffect, useLayoutEffect2 = React10.useLayoutEffect, useDebugValue = React10.useDebugValue;
         var didWarnOld18Alpha = false;
         var didWarnUncachedGetSnapshot = false;
         function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
           {
             if (!didWarnOld18Alpha) {
-              if (React8.startTransition !== void 0) {
+              if (React10.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.");
               }
@@ -184,7 +184,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         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 = React8.useSyncExternalStore !== void 0 ? React8.useSyncExternalStore : shim;
+        var useSyncExternalStore$2 = React10.useSyncExternalStore !== void 0 ? React10.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());
@@ -213,7 +213,7 @@ var require_classnames = __commonJS({
     (function() {
       "use strict";
       var hasOwn = {}.hasOwnProperty;
-      function classNames51() {
+      function classNames52() {
         var classes = "";
         for (var i = 0; i < arguments.length; i++) {
           var arg = arguments[i];
@@ -231,7 +231,7 @@ var require_classnames = __commonJS({
           return "";
         }
         if (Array.isArray(arg)) {
-          return classNames51.apply(null, arg);
+          return classNames52.apply(null, arg);
         }
         if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
           return arg.toString();
@@ -254,14 +254,14 @@ var require_classnames = __commonJS({
         return value + newClass;
       }
       if (typeof module !== "undefined" && module.exports) {
-        classNames51.default = classNames51;
-        module.exports = classNames51;
+        classNames52.default = classNames52;
+        module.exports = classNames52;
       } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
         define("classnames", [], function() {
-          return classNames51;
+          return classNames52;
         });
       } else {
-        window.classNames = classNames51;
+        window.classNames = classNames52;
       }
     })();
   }
@@ -24267,19 +24267,17 @@ function useController(props) {
         set(control._formValues, name, value2);
       }
     }
+    !isArrayField && control.register(name);
     return () => {
       (isArrayField ? _shouldUnregisterField && !control._state.action : _shouldUnregisterField) ? control.unregister(name) : updateMounted(name, false);
     };
   }, [name, control, isArrayField, shouldUnregister]);
   React.useEffect(() => {
-    if (isBoolean(disabled) && get(control._fields, name)) {
-      control._updateDisabledField({
-        disabled,
-        fields: control._fields,
-        name,
-        value: get(control._fields, name)._f.value
-      });
-    }
+    control._updateDisabledField({
+      disabled,
+      fields: control._fields,
+      name
+    });
   }, [disabled, name, control]);
   return React.useMemo(() => ({
     field,
@@ -24383,10 +24381,10 @@ var getValueAndMessage = (validationData) => isObject(validationData) && !isRege
   value: validationData,
   message: ""
 };
-var validateField = async (field, formValues, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) => {
-  const { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, valueAsNumber, mount, disabled } = field._f;
+var validateField = async (field, disabledFieldNames, formValues, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) => {
+  const { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, valueAsNumber, mount } = field._f;
   const inputValue = get(formValues, name);
-  if (!mount || disabled) {
+  if (!mount || disabledFieldNames.has(name)) {
     return {};
   }
   const inputRef = refs ? refs[0] : ref;
@@ -24662,9 +24660,6 @@ var getDirtyFields = (defaultValues, formValues) => getDirtyFieldsFromDefaultVal
 var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => isUndefined(value) ? value : valueAsNumber ? value === "" ? NaN : value ? +value : value : valueAsDate && isString(value) ? new Date(value) : setValueAs ? setValueAs(value) : value;
 function getFieldValue(_f) {
   const ref = _f.ref;
-  if (_f.refs ? _f.refs.every((ref2) => ref2.disabled) : ref.disabled) {
-    return;
-  }
   if (isFileInput(ref)) {
     return ref.files;
   }
@@ -24772,6 +24767,7 @@ function createFormControl(props = {}) {
   };
   let _names = {
     mount: /* @__PURE__ */ new Set(),
+    disabled: /* @__PURE__ */ new Set(),
     unMount: /* @__PURE__ */ new Set(),
     array: /* @__PURE__ */ new Set(),
     watch: /* @__PURE__ */ new Set()
@@ -24961,7 +24957,7 @@ function createFormControl(props = {}) {
           if (isPromiseFunction && _proxyFormState.validatingFields) {
             _updateIsValidating([name], true);
           }
-          const fieldError = await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !shouldOnlyCheckValid, isFieldArrayRoot);
+          const fieldError = await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !shouldOnlyCheckValid, isFieldArrayRoot);
           if (isPromiseFunction && _proxyFormState.validatingFields) {
             _updateIsValidating([name]);
           }
@@ -25089,11 +25085,9 @@ function createFormControl(props = {}) {
       });
       if (shouldSkipValidation) {
         if (_proxyFormState.isValid) {
-          if (_options.mode === "onBlur") {
-            if (isBlurEvent) {
-              _updateValid();
-            }
-          } else {
+          if (_options.mode === "onBlur" && isBlurEvent) {
+            _updateValid();
+          } else if (!isBlurEvent) {
             _updateValid();
           }
         }
@@ -25112,7 +25106,7 @@ function createFormControl(props = {}) {
         }
       } else {
         _updateIsValidating([name], true);
-        error = (await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
+        error = (await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
         _updateIsValidating([name]);
         _updateIsFieldValueUpdated(fieldValue);
         if (isFieldValueUpdated) {
@@ -25222,13 +25216,10 @@ function createFormControl(props = {}) {
     });
     !options.keepIsValid && _updateValid();
   };
-  const _updateDisabledField = ({ disabled, name, field, fields, value }) => {
-    if (isBoolean(disabled) && _state.mount || !!disabled) {
-      const inputValue = disabled ? void 0 : isUndefined(value) ? getFieldValue(field ? field._f : get(fields, name)._f) : value;
-      if (disabled || !disabled && !isUndefined(inputValue)) {
-        set(_formValues, name, inputValue);
-      }
-      updateTouchAndDirty(name, inputValue, false, false, true);
+  const _updateDisabledField = ({ disabled, name, field, fields }) => {
+    if (isBoolean(disabled) && _state.mount || !!disabled || _names.disabled.has(name)) {
+      disabled ? _names.disabled.add(name) : _names.disabled.delete(name);
+      updateTouchAndDirty(name, getFieldValue(field ? field._f : get(fields, name)._f), false, false, true);
     }
   };
   const register = (name, options = {}) => {
@@ -25248,8 +25239,7 @@ function createFormControl(props = {}) {
       _updateDisabledField({
         field,
         disabled: isBoolean(options.disabled) ? options.disabled : _options.disabled,
-        name,
-        value: options.value
+        name
       });
     } else {
       updateValidAndValue(name, true, options.value);
@@ -25324,13 +25314,12 @@ function createFormControl(props = {}) {
       e.preventDefault && e.preventDefault();
       e.persist && e.persist();
     }
-    if (_options.disabled) {
-      if (onInvalid) {
-        await onInvalid({ ..._formState.errors }, e);
+    let fieldValues = cloneObject(_formValues);
+    if (_names.disabled.size) {
+      for (const name of _names.disabled) {
+        set(fieldValues, name, void 0);
       }
-      return;
     }
-    let fieldValues = cloneObject(_formValues);
     _subjects.state.next({
       isSubmitting: true
     });
@@ -25438,6 +25427,7 @@ function createFormControl(props = {}) {
       mount: keepStateOptions.keepDirtyValues ? _names.mount : /* @__PURE__ */ new Set(),
       unMount: /* @__PURE__ */ new Set(),
       array: /* @__PURE__ */ new Set(),
+      disabled: /* @__PURE__ */ new Set(),
       watch: /* @__PURE__ */ new Set(),
       watchAll: false,
       focus: ""
@@ -25891,8 +25881,25 @@ function RxExternalLink(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 15 15", "fill": "none" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "clipRule": "evenodd", "d": "M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z", "fill": "currentColor" }, "child": [] }] })(props);
 }
 
+// src/assets/moon.svg
+import * as React4 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SvgMoon = (props) => /* @__PURE__ */ jsx2("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1399.98 1400", ...props, children: /* @__PURE__ */ jsx2("path", { d: "M562.44 837.55C335.89 611 288.08 273.54 418.71 0a734.31 734.31 0 0 0-203.17 143.73c-287.39 287.39-287.39 753.33 0 1040.72s753.33 287.4 1040.74 0A733.8 733.8 0 0 0 1400 981.29c-273.55 130.63-611 82.8-837.56-143.74Z" }) });
+var moon_default = SvgMoon;
+
+// src/assets/sun.svg
+import * as React5 from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var SvgSun = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1400 1400", ...props, children: [
+  /* @__PURE__ */ jsx3("path", { d: "M367.43 422.13a54.44 54.44 0 0 1-38.66-16L205 282.35A54.69 54.69 0 0 1 282.37 205l123.74 123.79a54.68 54.68 0 0 1-38.68 93.34ZM1156.3 1211a54.51 54.51 0 0 1-38.67-16l-123.74-123.79a54.68 54.68 0 1 1 77.34-77.33L1195 1117.65a54.7 54.7 0 0 1-38.7 93.35Zm-912.6 0a54.7 54.7 0 0 1-38.7-93.35l123.74-123.76a54.69 54.69 0 0 1 77.36 77.32L282.37 1195a54.51 54.51 0 0 1-38.67 16Zm788.87-788.87a54.68 54.68 0 0 1-38.68-93.34L1117.61 205a54.69 54.69 0 0 1 77.39 77.35l-123.77 123.76a54.44 54.44 0 0 1-38.66 16.02ZM229.69 754.69h-175a54.69 54.69 0 0 1 0-109.38h175a54.69 54.69 0 0 1 0 109.38Zm1115.62 0h-175a54.69 54.69 0 0 1 0-109.38h175a54.69 54.69 0 0 1 0 109.38ZM700 1400a54.68 54.68 0 0 1-54.69-54.69v-175a54.69 54.69 0 0 1 109.38 0v175A54.68 54.68 0 0 1 700 1400Zm0-1115.62a54.7 54.7 0 0 1-54.69-54.69v-175a54.69 54.69 0 0 1 109.38 0v175A54.7 54.7 0 0 1 700 284.38Z" }),
+  /* @__PURE__ */ jsx3("circle", { cx: 700, cy: 700, r: 306.25 })
+] });
+var sun_default = SvgSun;
+
 // src/components/Icons.tsx
 var Icons = {
+  Moon: moon_default,
+  Sun: sun_default,
   Alert: GoAlert,
   Arrow: PiArrowRight,
   Check: MdCheck,
@@ -25918,7 +25925,7 @@ var Icons = {
 var AlertBanner_default = { "banner": "AlertBanner_banner__NDk3N", "message": "AlertBanner_message__OGU2O", "title": "AlertBanner_title__YjhjN", "close": "AlertBanner_close__ZjhiY", "error": "AlertBanner_error__NzM5N", "info": "AlertBanner_info__MTMxY" };
 
 // src/components/AlertBanner.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function AlertBanner({
   title,
   description,
@@ -25930,14 +25937,14 @@ function AlertBanner({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs("div", { ...props, className: (0, import_classnames2.default)(AlertBanner_default.banner, className, variant && AlertBanner_default[variant]), children: [
-    (icon || variant) && /* @__PURE__ */ jsx2(Icon, { size: "md", children: variant ? createElement(AlertIcons[variant]) : icon }),
-    /* @__PURE__ */ jsxs("div", { className: AlertBanner_default.message, children: [
-      title && /* @__PURE__ */ jsx2("div", { className: AlertBanner_default.title, children: title }),
-      description && /* @__PURE__ */ jsx2("div", { className: AlertBanner_default.description, children: description })
+  return /* @__PURE__ */ jsxs2("div", { ...props, className: (0, import_classnames2.default)(AlertBanner_default.banner, className, variant && AlertBanner_default[variant]), children: [
+    (icon || variant) && /* @__PURE__ */ jsx4(Icon, { size: "md", children: variant ? createElement(AlertIcons[variant]) : icon }),
+    /* @__PURE__ */ jsxs2("div", { className: AlertBanner_default.message, children: [
+      title && /* @__PURE__ */ jsx4("div", { className: AlertBanner_default.title, children: title }),
+      description && /* @__PURE__ */ jsx4("div", { className: AlertBanner_default.description, children: description })
     ] }),
     children,
-    allowClose && /* @__PURE__ */ jsx2(Icon, { className: AlertBanner_default.close, onClick: onClose, children: /* @__PURE__ */ jsx2(Icons.Close, {}) })
+    allowClose && /* @__PURE__ */ jsx4(Icon, { className: AlertBanner_default.close, onClick: onClose, children: /* @__PURE__ */ jsx4(Icons.Close, {}) })
   ] });
 }
 var AlertIcons = {
@@ -26073,7 +26080,7 @@ function useDesignProps(props) {
 
 // src/components/Box.tsx
 var import_classnames3 = __toESM(require_classnames());
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function Box({
   display,
   color,
@@ -26163,7 +26170,7 @@ function Box({
     gridColumn,
     order
   });
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx5(
     Component,
     {
       ...props,
@@ -26178,7 +26185,7 @@ function Box({
 }
 
 // src/components/Flexbox.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function Flexbox({
   display = "flex",
   direction,
@@ -26207,13 +26214,13 @@ function Flexbox({
     gapX,
     gapY
   });
-  return /* @__PURE__ */ jsx4(Box, { ...props, className: (0, import_classnames4.default)(className, classes), style: { ...styleProps, ...style }, children });
+  return /* @__PURE__ */ jsx6(Box, { ...props, className: (0, import_classnames4.default)(className, classes), style: { ...styleProps, ...style }, children });
 }
 
 // src/components/Column.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function Column({ reverse, children, ...props }) {
-  return /* @__PURE__ */ jsx5(Flexbox, { ...props, direction: reverse ? "column-reverse" : "column", children });
+  return /* @__PURE__ */ jsx7(Flexbox, { ...props, direction: reverse ? "column-reverse" : "column", children });
 }
 
 // src/components/Text.tsx
@@ -26223,7 +26230,7 @@ var import_classnames5 = __toESM(require_classnames());
 var Text_default = { "text": "Text_text__NzMxN" };
 
 // src/components/Text.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function Text({
   color,
   size,
@@ -26247,7 +26254,7 @@ function Text({
     letterSpacing: spacing,
     color
   });
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx8(
     Component,
     {
       ...props,
@@ -26262,7 +26269,7 @@ function Text({
 var Form_default = { "form": "Form_form__MmRlO", "text": "Form_text__YzQwZ", "icon": "Form_icon__NjM1M", "error": "Form_error__ODQ0M" };
 
 // src/components/forms/Form.tsx
-import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 function Form({
   gap = "3",
   autoComplete,
@@ -26315,12 +26322,12 @@ function Form({
       formValues.reset(void 0, { keepDirty: true, keepValues: true });
     }
   }, [error]);
-  return /* @__PURE__ */ jsxs2(FormProvider, { ...formValues, children: [
-    error && /* @__PURE__ */ jsxs2(AlertBanner, { variant: "error", className: Form_default.error, children: [
-      /* @__PURE__ */ jsx7(Icon, { size: "lg", className: Form_default.icon, children: /* @__PURE__ */ jsx7(Icons.Alert, {}) }),
-      /* @__PURE__ */ jsx7(Text, { className: Form_default.text, children: error })
+  return /* @__PURE__ */ jsxs3(FormProvider, { ...formValues, children: [
+    error && /* @__PURE__ */ jsxs3(AlertBanner, { variant: "error", className: Form_default.error, children: [
+      /* @__PURE__ */ jsx9(Icon, { size: "lg", className: Form_default.icon, children: /* @__PURE__ */ jsx9(Icons.Alert, {}) }),
+      /* @__PURE__ */ jsx9(Text, { className: Form_default.text, children: error })
     ] }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx9(
       "form",
       {
         ...props,
@@ -26328,7 +26335,7 @@ function Form({
         className: (0, import_classnames6.default)(Form_default.form, className),
         onSubmit: onSubmit ? handleSubmit(onSubmit) : void 0,
         onKeyDown,
-        children: /* @__PURE__ */ jsx7(Column, { gap, children: typeof children === "function" ? children(formValues) : children })
+        children: /* @__PURE__ */ jsx9(Column, { gap, children: typeof children === "function" ? children(formValues) : children })
       }
     )
   ] });
@@ -26342,20 +26349,20 @@ var import_classnames7 = __toESM(require_classnames());
 var FormField_default = { "field": "FormField_field__NTJhZ", "description": "FormField_description__NTYzZ", "error": "FormField_error__MzFkZ" };
 
 // src/components/forms/FormField.tsx
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 var FormField = forwardRef(
   ({ name, description, label, rules, className, children, ...props }, ref) => {
     const { formState, control } = useFormContext();
     const { field } = useController({ name, control, rules });
     const errors = formState?.errors || {};
     const errorMessage = errors[name]?.message;
-    return /* @__PURE__ */ jsxs3("div", { ...props, ref, className: (0, import_classnames7.default)(FormField_default.input, className), children: [
+    return /* @__PURE__ */ jsxs4("div", { ...props, ref, className: (0, import_classnames7.default)(FormField_default.input, className), children: [
       typeof children === "function" ? children(field) : Children.map(
         children,
         (child) => child ? cloneElement2(child, { ...field, label: child.props.label || label }) : null
       ),
-      description && /* @__PURE__ */ jsx8("div", { className: FormField_default.description, children: description }),
-      errorMessage && /* @__PURE__ */ jsx8("div", { className: FormField_default.error, children: errorMessage })
+      description && /* @__PURE__ */ jsx10("div", { className: FormField_default.description, children: description }),
+      errorMessage && /* @__PURE__ */ jsx10("div", { className: FormField_default.error, children: errorMessage })
     ] });
   }
 );
@@ -26368,7 +26375,7 @@ var import_classnames8 = __toESM(require_classnames());
 var Button_default = { "button": "Button_button__N2NhN", "primary": "Button_primary__MDA0Z", "outline": "Button_outline__MzBjM", "quiet": "Button_quiet__NTFlY", "danger": "Button_danger__ZDg3Y", "xs": "Button_xs__ZGIyN", "sm": "Button_sm__MGY0N", "md": "Button_md__MGYwY", "lg": "Button_lg__NWQyZ", "xl": "Button_xl__MDQxY" };
 
 // src/components/Button.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var Button = forwardRef2(
   ({
     variant = "secondary",
@@ -26381,7 +26388,7 @@ var Button = forwardRef2(
   }, ref) => {
     const Component = asChild ? Slot : $d2b4bc8c273e7be6$export$353f5b6fc5456de1;
     const buttonProps = Component === $d2b4bc8c273e7be6$export$353f5b6fc5456de1 ? { preventFocusOnPress } : void 0;
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx11(
       Component,
       {
         ...props,
@@ -26400,14 +26407,14 @@ var Button = forwardRef2(
 );
 
 // src/components/forms/FormResetButton.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function FormResetButton({ values = {}, children, onPress, ...props }) {
   const { reset } = useFormContext();
   const handleReset = (e) => {
     reset(values);
     onPress?.(e);
   };
-  return /* @__PURE__ */ jsx10(Button, { ...props, type: "reset", onPress: handleReset, children });
+  return /* @__PURE__ */ jsx12(Button, { ...props, type: "reset", onPress: handleReset, children });
 }
 
 // src/components/Spinner.tsx
@@ -26417,40 +26424,40 @@ var import_classnames9 = __toESM(require_classnames());
 var Spinner_default = { "spinner": "Spinner_spinner__MzEyN", "spinner-rotate": "Spinner_spinner-rotate__MTIzZ", "track": "Spinner_track__ZmMyZ", "fill": "Spinner_fill__ZGRmY", "spinner-dash": "Spinner_spinner-dash__NDQzM", "size-sm": "Spinner_size-sm__MmQ2Z", "size-md": "Spinner_size-md__YzU5Y", "size-lg": "Spinner_size-lg__ODBhM", "size-xl": "Spinner_size-xl__YTg2M", "quiet": "Spinner_quiet__NWVlN" };
 
 // src/components/Spinner.tsx
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 function Spinner(props) {
   const { size = "lg", quiet, className, ...domProps } = props;
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       ...domProps,
       className: (0, import_classnames9.default)(Spinner_default.spinner, className, Spinner_default[`size-${size}`], {
         [Spinner_default.quiet]: quiet
       }),
-      children: /* @__PURE__ */ jsxs4("svg", { viewBox: "25 25 50 50", children: [
-        /* @__PURE__ */ jsx11("circle", { className: Spinner_default.track, cx: "50", cy: "50", r: "20" }),
-        /* @__PURE__ */ jsx11("circle", { className: Spinner_default.fill, cx: "50", cy: "50", r: "20" })
+      children: /* @__PURE__ */ jsxs5("svg", { viewBox: "25 25 50 50", children: [
+        /* @__PURE__ */ jsx13("circle", { className: Spinner_default.track, cx: "50", cy: "50", r: "20" }),
+        /* @__PURE__ */ jsx13("circle", { className: Spinner_default.fill, cx: "50", cy: "50", r: "20" })
       ] })
     }
   );
 }
 
 // src/components/LoadingButton.tsx
-import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 function LoadingButton({ isLoading, children, ...props }) {
-  return /* @__PURE__ */ jsxs5(Button, { ...props, children: [
-    isLoading && /* @__PURE__ */ jsx12(Icon, { size: "sm", children: /* @__PURE__ */ jsx12(Spinner, {}) }),
+  return /* @__PURE__ */ jsxs6(Button, { ...props, children: [
+    isLoading && /* @__PURE__ */ jsx14(Icon, { size: "sm", children: /* @__PURE__ */ jsx14(Spinner, {}) }),
     children
   ] });
 }
 
 // src/components/forms/FormSubmitButton.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function FormSubmitButton({ children, disabled, isLoading, ...props }) {
   const {
     formState: { isDirty, isValid, isSubmitting, isSubmitted, isSubmitSuccessful }
   } = useFormContext();
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx15(
     LoadingButton,
     {
       ...props,
@@ -26470,7 +26477,7 @@ import { createElement as createElement2 } from "react";
 var Toast_default = { "toast": "Toast_toast__NTUyY", "icon": "Toast_icon__OWNlN", "title": "Toast_title__MWUyY", "description": "Toast_description__OTU1M", "action": "Toast_action__OWNmM", "close": "Toast_close__MmM0M", "info": "Toast_info__Y2IxZ", "error": "Toast_error__ZGE4Z" };
 
 // src/components/toast/Toast.tsx
-import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 var TOAST_CLOSE_ACTION = "close";
 var icons = {
   info: Icons.Info,
@@ -26489,14 +26496,14 @@ function Toast({
   ...props
 }) {
   const hasActions = actions?.length > 0;
-  return /* @__PURE__ */ jsxs6("div", { ...props, className: (0, import_classnames10.default)(Toast_default.toast, className, variant && Toast_default[variant]), children: [
-    /* @__PURE__ */ jsx14(Icon, { className: Toast_default.icon, size: "md", children: variant && createElement2(icons[variant]) }),
-    title && /* @__PURE__ */ jsx14("div", { className: Toast_default.title, children: title }),
-    message && /* @__PURE__ */ jsx14("div", { className: Toast_default.description, children: message }),
+  return /* @__PURE__ */ jsxs7("div", { ...props, className: (0, import_classnames10.default)(Toast_default.toast, className, variant && Toast_default[variant]), children: [
+    /* @__PURE__ */ jsx16(Icon, { className: Toast_default.icon, size: "md", children: variant && createElement2(icons[variant]) }),
+    title && /* @__PURE__ */ jsx16("div", { className: Toast_default.title, children: title }),
+    message && /* @__PURE__ */ jsx16("div", { className: Toast_default.description, children: message }),
     hasActions && actions.map((action) => {
-      return /* @__PURE__ */ jsx14(Button, { className: Toast_default.action, onPress: () => onClose?.(action), children: action }, action);
+      return /* @__PURE__ */ jsx16(Button, { className: Toast_default.action, onPress: () => onClose?.(action), children: action }, action);
     }),
-    !hasActions && allowClose && /* @__PURE__ */ jsx14(
+    !hasActions && allowClose && /* @__PURE__ */ jsx16(
       Icon,
       {
         size: "sm",
@@ -26504,7 +26511,7 @@ function Toast({
         className: Toast_default.close,
         "aria-label": "Close",
         onClick: () => onClose?.(TOAST_CLOSE_ACTION),
-        children: /* @__PURE__ */ jsx14(Icons.Close, {})
+        children: /* @__PURE__ */ jsx16(Icons.Close, {})
       }
     )
   ] });
@@ -27512,7 +27519,7 @@ function usePrev(value) {
 import { useContext as useContext2, useMemo, useRef as useRef6 } from "react";
 
 // node_modules/@react-spring/animated/dist/react-spring_animated.modern.mjs
-import * as React5 from "react";
+import * as React7 from "react";
 import { forwardRef as forwardRef3, useRef as useRef5, useCallback, useEffect as useEffect5 } from "react";
 var $node = Symbol.for("Animated:node");
 var isAnimated = (value) => !!value && value[$node] === value;
@@ -27742,7 +27749,7 @@ var withAnimated = (Component, host2) => {
       each(observer2.deps, (dep) => removeFluidObserver(dep, observer2));
     });
     const usedProps = host2.getComponentProps(props.getValue());
-    return /* @__PURE__ */ React5.createElement(Component, { ...usedProps, ref });
+    return /* @__PURE__ */ React7.createElement(Component, { ...usedProps, ref });
   });
 };
 var PropsObserver = class {
@@ -27811,7 +27818,7 @@ var createHost = (components, {
 var getDisplayName = (arg) => is.str(arg) ? arg : arg && is.str(arg.displayName) ? arg.displayName : is.fun(arg) && arg.name || null;
 
 // node_modules/@react-spring/core/dist/react-spring_core.modern.mjs
-import * as React6 from "react";
+import * as React8 from "react";
 import { useContext } from "react";
 import { useState as useState4 } from "react";
 import * as React22 from "react";
@@ -29279,13 +29286,13 @@ var SpringContext = ({
   const pause = props.pause || !!inherited.pause, immediate = props.immediate || !!inherited.immediate;
   props = useMemoOne(() => ({ pause, immediate }), [pause, immediate]);
   const { Provider } = ctx;
-  return /* @__PURE__ */ React6.createElement(Provider, { value: props }, children);
+  return /* @__PURE__ */ React8.createElement(Provider, { value: props }, children);
 };
 var ctx = makeContext(SpringContext, {});
 SpringContext.Provider = ctx.Provider;
 SpringContext.Consumer = ctx.Consumer;
 function makeContext(target, init) {
-  Object.assign(target, React6.createContext(init));
+  Object.assign(target, React8.createContext(init));
   target.Provider._context = target;
   target.Consumer._context = target;
   return target;
@@ -30112,15 +30119,15 @@ var createStoreImpl = (createState) => {
 var createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
 
 // node_modules/zustand/esm/react.mjs
-import React7 from "react";
+import React9 from "react";
 var identity = (arg) => arg;
 function useStore(api, selector = identity) {
-  const slice = React7.useSyncExternalStore(
+  const slice = React9.useSyncExternalStore(
     api.subscribe,
     () => selector(api.getState()),
     () => selector(api.getInitialState())
   );
-  React7.useDebugValue(slice);
+  React9.useDebugValue(slice);
   return slice;
 }
 var createImpl = (createState) => {
@@ -30136,12 +30143,12 @@ import { useContext as useContext4 } from "react";
 
 // src/components/toast/ToastProvider.tsx
 import { createContext as createContext2 } from "react";
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 var ToastContext = createContext2({});
 function ToastProvider({ children, ...config2 }) {
-  return /* @__PURE__ */ jsxs7(ToastContext.Provider, { value: config2, children: [
+  return /* @__PURE__ */ jsxs8(ToastContext.Provider, { value: config2, children: [
     children,
-    /* @__PURE__ */ jsx15(Toaster, { ...config2 })
+    /* @__PURE__ */ jsx17(Toaster, { ...config2 })
   ] });
 }
 
@@ -30166,9 +30173,8 @@ function displayToast(message, { duration = TOAST_DURATION, ...options } = {}) {
     };
   });
 }
-var useStore2 = store;
 function useToast() {
-  const { toasts } = useStore2();
+  const { toasts } = store();
   const config2 = useContext4(ToastContext);
   const toast = (message, options) => {
     displayToast(message, { ...options, ...config2 });
@@ -30180,7 +30186,7 @@ function useToast() {
 var Toaster_default = { "toaster": "Toaster_toaster__Mjg1N", "position-top": "Toaster_position-top__N2UwN", "position-top-right": "Toaster_position-top-right__MmExM", "position-top-left": "Toaster_position-top-left__ZWFkZ", "position-bottom": "Toaster_position-bottom__NmI1Z", "position-bottom-right": "Toaster_position-bottom-right__MGUzZ", "position-bottom-left": "Toaster_position-bottom-left__Yzc0O", "position-left": "Toaster_position-left__MDUwZ", "position-right": "Toaster_position-right__ZmRhM" };
 
 // src/components/toast/Toaster.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function Toaster({ duration = 0, position = "bottom-right" }) {
   const { toasts } = useToast();
   const [hovered, setHovered] = useState5(false);
@@ -30212,7 +30218,7 @@ function Toaster({ duration = 0, position = "bottom-right" }) {
       };
     }
   }, [duration, toasts, hovered]);
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       className: (0, import_classnames11.default)(Toaster_default.toaster, Toaster_default[`position-${position}`]),
@@ -30222,7 +30228,7 @@ function Toaster({ duration = 0, position = "bottom-right" }) {
         const { id, ...props } = item;
         return (
           // @ts-ignore
-          /* @__PURE__ */ jsx16(animated.div, { style, children: /* @__PURE__ */ jsx16(Toast, { ...props, id, onClose: () => removeToast(id) }) }, id)
+          /* @__PURE__ */ jsx18(animated.div, { style, children: /* @__PURE__ */ jsx18(Toast, { ...props, id, onClose: () => removeToast(id) }) }, id)
         );
       })
     }
@@ -30246,15 +30252,15 @@ function useDebounce(value, delay) {
 
 // src/components/hooks/useTheme.ts
 var initialState2 = {
-  name: "light"
+  theme: "light"
 };
 var store2 = create(() => ({ ...initialState2 }));
-function setTheme(name) {
-  store2.setState({ name });
-  document.body.setAttribute("data-theme", name);
+function setTheme(theme) {
+  store2.setState({ theme });
+  document.body.setAttribute("data-theme", theme);
 }
 function useTheme() {
-  const theme = store2.getState();
+  const { theme } = store2();
   return { theme, setTheme };
 }
 
@@ -30266,9 +30272,9 @@ var import_classnames12 = __toESM(require_classnames());
 var Accordion_default = { "accordion": "Accordion_accordion__N2U1M", "item": "Accordion_item__YTQxO", "button": "Accordion_button__ZTA5Z", "icon": "Accordion_icon__ZmQ5M", "panel": "Accordion_panel__YjcyN", "expanded": "Accordion_expanded__NGYxM" };
 
 // src/components/Accordion.tsx
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 function Accordion({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx17($28f4fd908f0de97f$export$944aceb4f8c89f10, { ...props, className: (0, import_classnames12.default)(Accordion_default.accordion, className), children });
+  return /* @__PURE__ */ jsx19($28f4fd908f0de97f$export$944aceb4f8c89f10, { ...props, className: (0, import_classnames12.default)(Accordion_default.accordion, className), children });
 }
 function AccordionItem({
   defaultExpanded,
@@ -30281,18 +30287,18 @@ function AccordionItem({
   const handleExpandedChange = (isExpanded) => {
     requestAnimationFrame(() => setExpanded(isExpanded));
   };
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     $28f4fd908f0de97f$export$74a362b31437ec83,
     {
       ...props,
       className: (0, import_classnames12.default)(Accordion_default.item, className),
       onExpandedChange: handleExpandedChange,
       children: [
-        /* @__PURE__ */ jsxs8(Button, { slot: "trigger", className: Accordion_default.button, children: [
-          /* @__PURE__ */ jsx17(Text, { children: trigger }),
-          /* @__PURE__ */ jsx17(Icon, { className: Accordion_default.icon, size: "xs", children: /* @__PURE__ */ jsx17(Icons.Chevron, {}) })
+        /* @__PURE__ */ jsxs9(Button, { slot: "trigger", className: Accordion_default.button, children: [
+          /* @__PURE__ */ jsx19(Text, { children: trigger }),
+          /* @__PURE__ */ jsx19(Icon, { className: Accordion_default.icon, size: "xs", children: /* @__PURE__ */ jsx19(Icons.Chevron, {}) })
         ] }),
-        /* @__PURE__ */ jsx17($28f4fd908f0de97f$export$feabaa331e1d464c, { className: (0, import_classnames12.default)(Accordion_default.panel, expanded && Accordion_default.expanded), children: panel })
+        /* @__PURE__ */ jsx19($28f4fd908f0de97f$export$feabaa331e1d464c, { className: (0, import_classnames12.default)(Accordion_default.panel, expanded && Accordion_default.expanded), children: panel })
       ]
     }
   );
@@ -30308,27 +30314,27 @@ var import_classnames13 = __toESM(require_classnames());
 var Dialog_default = { "dialog": "Dialog_dialog__YjBmO", "title": "Dialog_title__MmNiZ" };
 
 // src/components/Dialog.tsx
-import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 function Dialog({ title, children, className, ...props }) {
-  return /* @__PURE__ */ jsx18($de32f1b87079253c$export$3ddf2d174ce01153, { ...props, className: (0, import_classnames13.default)(Dialog_default.dialog, className), children: ({ close }) => {
-    return /* @__PURE__ */ jsxs9(Fragment2, { children: [
-      title && /* @__PURE__ */ jsx18("div", { className: Dialog_default.title, children: title }),
+  return /* @__PURE__ */ jsx20($de32f1b87079253c$export$3ddf2d174ce01153, { ...props, className: (0, import_classnames13.default)(Dialog_default.dialog, className), children: ({ close }) => {
+    return /* @__PURE__ */ jsxs10(Fragment2, { children: [
+      title && /* @__PURE__ */ jsx20("div", { className: Dialog_default.title, children: title }),
       typeof children === "function" ? children({ close }) : children
     ] });
   } });
 }
 
 // src/components/Row.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function Row({ reverse, children, ...props }) {
-  return /* @__PURE__ */ jsx19(Flexbox, { ...props, direction: reverse ? "row-reverse" : "row", children });
+  return /* @__PURE__ */ jsx21(Flexbox, { ...props, direction: reverse ? "row-reverse" : "row", children });
 }
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/AlertDialog.module.css
 var AlertDialog_default = { "dialog": "AlertDialog_dialog__NDdlY", "title": "AlertDialog_title__ZGFlY" };
 
 // src/components/AlertDialog.tsx
-import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
 function AlertDialog({
   title,
   description,
@@ -30350,12 +30356,12 @@ function AlertDialog({
     onCancel?.();
     close();
   };
-  return /* @__PURE__ */ jsx20(Dialog, { ...props, title, className: (0, import_classnames14.default)(AlertDialog_default.dialog, className), children: ({ close }) => {
-    return /* @__PURE__ */ jsxs10(Column, { gap: "4", children: [
+  return /* @__PURE__ */ jsx22(Dialog, { ...props, title, className: (0, import_classnames14.default)(AlertDialog_default.dialog, className), children: ({ close }) => {
+    return /* @__PURE__ */ jsxs11(Column, { gap: "4", children: [
       typeof children === "function" ? children({ close }) : children,
-      /* @__PURE__ */ jsxs10(Row, { gap: "3", justifyContent: "end", children: [
-        /* @__PURE__ */ jsx20(Button, { onPress: () => handleClose(close), children: cancelLabel }),
-        /* @__PURE__ */ jsx20(
+      /* @__PURE__ */ jsxs11(Row, { gap: "3", justifyContent: "end", children: [
+        /* @__PURE__ */ jsx22(Button, { onPress: () => handleClose(close), children: cancelLabel }),
+        /* @__PURE__ */ jsx22(
           Button,
           {
             variant: isDanger ? "danger" : "primary",
@@ -30373,10 +30379,10 @@ function AlertDialog({
 var Blockquote_default = { "blockquote": "Blockquote_blockquote__ZjZlY" };
 
 // src/components/Blockquote.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function Blockquote({ asChild, children }) {
   const Component = asChild ? Slot : "blockquote";
-  return /* @__PURE__ */ jsx21(Component, { className: Blockquote_default.blockquote, children });
+  return /* @__PURE__ */ jsx23(Component, { className: Blockquote_default.blockquote, children });
 }
 
 // src/components/Breadcrumbs.tsx
@@ -30386,14 +30392,14 @@ var import_classnames15 = __toESM(require_classnames());
 var Breadcrumbs_default = { "breadcrumbs": "Breadcrumbs_breadcrumbs__NmE0Y", "breadcrumb": "Breadcrumbs_breadcrumb__N2NlN", "icon": "Breadcrumbs_icon__ZDMwZ" };
 
 // src/components/Breadcrumbs.tsx
-import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
 function Breadcrumbs({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx22($778035c5624f61e7$export$2dc68d50d56fbbd, { ...props, className: (0, import_classnames15.default)(Breadcrumbs_default.breadcrumbs, className), children });
+  return /* @__PURE__ */ jsx24($778035c5624f61e7$export$2dc68d50d56fbbd, { ...props, className: (0, import_classnames15.default)(Breadcrumbs_default.breadcrumbs, className), children });
 }
 function Breadcrumb2({ children, className, ...props }) {
-  return /* @__PURE__ */ jsxs11($778035c5624f61e7$export$dabcc1ec9dd9d1cc, { ...props, className: (0, import_classnames15.default)(Breadcrumbs_default.breadcrumb, className), children: [
+  return /* @__PURE__ */ jsxs12($778035c5624f61e7$export$dabcc1ec9dd9d1cc, { ...props, className: (0, import_classnames15.default)(Breadcrumbs_default.breadcrumb, className), children: [
     children,
-    /* @__PURE__ */ jsx22(Icon, { className: Breadcrumbs_default.icon, size: "xs", children: /* @__PURE__ */ jsx22(Icons.Chevron, {}) })
+    /* @__PURE__ */ jsx24(Icon, { className: Breadcrumbs_default.icon, size: "xs", children: /* @__PURE__ */ jsx24(Icons.Chevron, {}) })
   ] });
 }
 
@@ -30404,17 +30410,17 @@ var import_classnames16 = __toESM(require_classnames());
 var Calendar_default = { "calendar": "Calendar_calendar__YWQ4M", "header": "Calendar_header__OTIxN", "heading": "Calendar_heading__Mjk4N", "button": "Calendar_button__MzY0Y", "headerCell": "Calendar_headerCell__NDk1Z", "cell": "Calendar_cell__ZjA0O" };
 
 // src/components/Calendar.tsx
-import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 function Calendar({ className, ...props }) {
-  return /* @__PURE__ */ jsxs12($dfd62f934fc76fed$export$e1aef45b828286de, { ...props, className: (0, import_classnames16.default)(Calendar_default.calendar, className), children: [
-    /* @__PURE__ */ jsxs12("header", { className: Calendar_default.header, children: [
-      /* @__PURE__ */ jsx23(Button, { slot: "previous", className: Calendar_default.button, variant: "quiet", children: /* @__PURE__ */ jsx23(Icon, { rotate: 180, children: /* @__PURE__ */ jsx23(Icons.Chevron, {}) }) }),
-      /* @__PURE__ */ jsx23($5cb03073d3f54797$export$a8a3e93435678ff9, { className: Calendar_default.heading }),
-      /* @__PURE__ */ jsx23(Button, { slot: "next", className: Calendar_default.button, variant: "quiet", children: /* @__PURE__ */ jsx23(Icon, { children: /* @__PURE__ */ jsx23(Icons.Chevron, {}) }) })
+  return /* @__PURE__ */ jsxs13($dfd62f934fc76fed$export$e1aef45b828286de, { ...props, className: (0, import_classnames16.default)(Calendar_default.calendar, className), children: [
+    /* @__PURE__ */ jsxs13("header", { className: Calendar_default.header, children: [
+      /* @__PURE__ */ jsx25(Button, { slot: "previous", className: Calendar_default.button, variant: "quiet", children: /* @__PURE__ */ jsx25(Icon, { rotate: 180, children: /* @__PURE__ */ jsx25(Icons.Chevron, {}) }) }),
+      /* @__PURE__ */ jsx25($5cb03073d3f54797$export$a8a3e93435678ff9, { className: Calendar_default.heading }),
+      /* @__PURE__ */ jsx25(Button, { slot: "next", className: Calendar_default.button, variant: "quiet", children: /* @__PURE__ */ jsx25(Icon, { children: /* @__PURE__ */ jsx25(Icons.Chevron, {}) }) })
     ] }),
-    /* @__PURE__ */ jsxs12($dfd62f934fc76fed$export$5bd780d491cfc46c, { children: [
-      /* @__PURE__ */ jsx23($dfd62f934fc76fed$export$22e2d15eaa4d2377, { children: (day) => /* @__PURE__ */ jsx23($dfd62f934fc76fed$export$ad2135cac3a11b3d, { className: Calendar_default.headerCell, children: day }) }),
-      /* @__PURE__ */ jsx23($dfd62f934fc76fed$export$e11f8ba65d857bff, { className: Calendar_default.body, children: (date) => /* @__PURE__ */ jsx23($dfd62f934fc76fed$export$5d847498420df57b, { className: Calendar_default.cell, date }) })
+    /* @__PURE__ */ jsxs13($dfd62f934fc76fed$export$5bd780d491cfc46c, { children: [
+      /* @__PURE__ */ jsx25($dfd62f934fc76fed$export$22e2d15eaa4d2377, { children: (day) => /* @__PURE__ */ jsx25($dfd62f934fc76fed$export$ad2135cac3a11b3d, { className: Calendar_default.headerCell, children: day }) }),
+      /* @__PURE__ */ jsx25($dfd62f934fc76fed$export$e11f8ba65d857bff, { className: Calendar_default.body, children: (date) => /* @__PURE__ */ jsx25($dfd62f934fc76fed$export$5d847498420df57b, { className: Calendar_default.cell, date }) })
     ] })
   ] });
 }
@@ -30434,11 +30440,11 @@ var import_classnames17 = __toESM(require_classnames());
 var Checkbox_default = { "checkbox": "Checkbox_checkbox__NGI1M", "box": "Checkbox_box__OWZmM", "icon": "Checkbox_icon__OTM3O" };
 
 // src/components/Checkbox.tsx
-import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 var Checkbox = forwardRef4(
   ({ label, className, children, ...props }, ref) => {
     const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx26(
       $bc237834342dbd75$export$48513f6b9f8ce62d,
       {
         ...props,
@@ -30446,8 +30452,8 @@ var Checkbox = forwardRef4(
         isSelected,
         className: (0, import_classnames17.default)(Checkbox_default.checkbox, className),
         children: ({ isIndeterminate, isSelected: isSelected2 }) => {
-          return /* @__PURE__ */ jsxs13(Fragment3, { children: [
-            /* @__PURE__ */ jsx24("div", { className: Checkbox_default.box, children: /* @__PURE__ */ jsx24(Icon, { className: Checkbox_default.icon, size: "xs", children: isIndeterminate ? /* @__PURE__ */ jsx24(Icons.Minus, {}) : isSelected2 ? /* @__PURE__ */ jsx24(ImCheckmark, {}) : null }) }),
+          return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+            /* @__PURE__ */ jsx26("div", { className: Checkbox_default.box, children: /* @__PURE__ */ jsx26(Icon, { className: Checkbox_default.icon, size: "xs", children: isIndeterminate ? /* @__PURE__ */ jsx26(Icons.Minus, {}) : isSelected2 ? /* @__PURE__ */ jsx26(ImCheckmark, {}) : null }) }),
             children
           ] });
         }
@@ -30460,10 +30466,10 @@ var Checkbox = forwardRef4(
 var Code_default = { "code": "Code_code__MGFiZ" };
 
 // src/components/Code.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function Code({ asChild, children }) {
   const Component = asChild ? Slot : "code";
-  return /* @__PURE__ */ jsx25(Component, { className: Code_default.code, children });
+  return /* @__PURE__ */ jsx27(Component, { className: Code_default.code, children });
 }
 
 // src/components/Combobox.tsx
@@ -30476,23 +30482,23 @@ var import_classnames18 = __toESM(require_classnames());
 var List_default = { "list": "List_list__YjljZ", "separator": "List_separator__MTY2Z", "section": "List_section__OTJjN", "header": "List_header__OGNhM", "item": "List_item__ZDcxO", "check": "List_check__ZDNkM" };
 
 // src/components/List.tsx
-import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 function List({ items, className, children, ...props }) {
-  return /* @__PURE__ */ jsx26($eed445e0843c11d0$export$41f133550aa26f48, { ...props, items, className: (0, import_classnames18.default)(List_default.list, className), children: children || items?.map((item, index) => {
+  return /* @__PURE__ */ jsx28($eed445e0843c11d0$export$41f133550aa26f48, { ...props, items, className: (0, import_classnames18.default)(List_default.list, className), children: children || items?.map((item, index) => {
     if (item === null) {
-      return /* @__PURE__ */ jsx26($431f98aba6844401$export$1ff3c3f08ae963c0, { className: List_default.separator }, index);
+      return /* @__PURE__ */ jsx28($431f98aba6844401$export$1ff3c3f08ae963c0, { className: List_default.separator }, index);
     }
-    return /* @__PURE__ */ jsx26(ListItem, { id: item, className: List_default.item, children: item }, index);
+    return /* @__PURE__ */ jsx28(ListItem, { id: item, className: List_default.item, children: item }, index);
   }) });
 }
 function ListItem({ children, className, ...props }) {
-  return /* @__PURE__ */ jsxs14($eed445e0843c11d0$export$a11e76429ed99b4, { ...props, className: (0, import_classnames18.default)(List_default.item, className), children: [
+  return /* @__PURE__ */ jsxs15($eed445e0843c11d0$export$a11e76429ed99b4, { ...props, className: (0, import_classnames18.default)(List_default.item, className), children: [
     children,
-    /* @__PURE__ */ jsx26("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx26(Icon, { size: "sm", className: List_default.check, children: /* @__PURE__ */ jsx26(Icons.Check, {}) }) })
+    /* @__PURE__ */ jsx28("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx28(Icon, { size: "sm", className: List_default.check, children: /* @__PURE__ */ jsx28(Icons.Check, {}) }) })
   ] });
 }
 function ListSeparator({ className, ...props }) {
-  return /* @__PURE__ */ jsx26($431f98aba6844401$export$1ff3c3f08ae963c0, { ...props, className: (0, import_classnames18.default)(List_default.separator, className) });
+  return /* @__PURE__ */ jsx28($431f98aba6844401$export$1ff3c3f08ae963c0, { ...props, className: (0, import_classnames18.default)(List_default.separator, className) });
 }
 function ListSection({
   title,
@@ -30500,8 +30506,8 @@ function ListSection({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs14($eed445e0843c11d0$export$dca12b0bb56e4fc, { ...props, className: (0, import_classnames18.default)(List_default.section, className), children: [
-    title && /* @__PURE__ */ jsx26($72a5793c14baf454$export$8b251419efc915eb, { className: List_default.header, children: title }),
+  return /* @__PURE__ */ jsxs15($eed445e0843c11d0$export$dca12b0bb56e4fc, { ...props, className: (0, import_classnames18.default)(List_default.section, className), children: [
+    title && /* @__PURE__ */ jsx28($72a5793c14baf454$export$8b251419efc915eb, { className: List_default.header, children: title }),
     children
   ] });
 }
@@ -30513,11 +30519,11 @@ var import_classnames19 = __toESM(require_classnames());
 var ListItem_default = { "item": "ListItem_item__NjU4Z", "check": "ListItem_check__ZTkxY" };
 
 // src/components/ListItem.tsx
-import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 function ListItem2({ children, className, ...props }) {
-  return /* @__PURE__ */ jsxs15($eed445e0843c11d0$export$a11e76429ed99b4, { ...props, className: (0, import_classnames19.default)(ListItem_default.item, className), children: [
+  return /* @__PURE__ */ jsxs16($eed445e0843c11d0$export$a11e76429ed99b4, { ...props, className: (0, import_classnames19.default)(ListItem_default.item, className), children: [
     children,
-    /* @__PURE__ */ jsx27("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx27(Icon, { size: "sm", className: ListItem_default.check, children: /* @__PURE__ */ jsx27(Icons.Check, {}) }) })
+    /* @__PURE__ */ jsx29("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx29(Icon, { size: "sm", className: ListItem_default.check, children: /* @__PURE__ */ jsx29(Icons.Check, {}) }) })
   ] });
 }
 
@@ -30528,23 +30534,23 @@ var import_classnames20 = __toESM(require_classnames());
 var Popover_default = { "popover": "Popover_popover__NDdlY", "popover-slide": "Popover_popover-slide__NThhN" };
 
 // src/components/Popover.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function Popover({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx28($07b14b47974efb58$export$5b6b19405a83ff9d, { ...props, className: (0, import_classnames20.default)(Popover_default.popover, className), children });
+  return /* @__PURE__ */ jsx30($07b14b47974efb58$export$5b6b19405a83ff9d, { ...props, className: (0, import_classnames20.default)(Popover_default.popover, className), children });
 }
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/Combobox.module.css
 var Combobox_default = { "combobox": "Combobox_combobox__ZTRmY", "field": "Combobox_field__NTEzO", "input": "Combobox_input__OTg4M", "button": "Combobox_button__NTk2Z", "list": "Combobox_list__NzdmO", "icon": "Combobox_icon__MTA3O" };
 
 // src/components/Combobox.tsx
-import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
 function Combobox({ items, className, ...props }) {
-  return /* @__PURE__ */ jsxs16($d01f2c01039c0eec$export$72b9695b8216309a, { ...props, className: (0, import_classnames21.default)(Combobox_default.combobox, className), children: [
-    /* @__PURE__ */ jsxs16("div", { className: Combobox_default.field, children: [
-      /* @__PURE__ */ jsx29($3985021b0ad6602f$export$f5b8910cec6cf069, { className: Combobox_default.input }),
-      /* @__PURE__ */ jsx29($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: Combobox_default.button, children: /* @__PURE__ */ jsx29(Icon, { rotate: 90, size: "xs", className: Combobox_default.icon, children: /* @__PURE__ */ jsx29(Icons.Chevron, {}) }) })
+  return /* @__PURE__ */ jsxs17($d01f2c01039c0eec$export$72b9695b8216309a, { ...props, className: (0, import_classnames21.default)(Combobox_default.combobox, className), children: [
+    /* @__PURE__ */ jsxs17("div", { className: Combobox_default.field, children: [
+      /* @__PURE__ */ jsx31($3985021b0ad6602f$export$f5b8910cec6cf069, { className: Combobox_default.input }),
+      /* @__PURE__ */ jsx31($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: Combobox_default.button, children: /* @__PURE__ */ jsx31(Icon, { rotate: 90, size: "xs", className: Combobox_default.icon, children: /* @__PURE__ */ jsx31(Icons.Chevron, {}) }) })
     ] }),
-    /* @__PURE__ */ jsx29(Popover, { children: /* @__PURE__ */ jsx29(List, { items, className: Combobox_default.list, children: items.map((item) => /* @__PURE__ */ jsx29(ListItem2, { textValue: item, children: item }, item)) }) })
+    /* @__PURE__ */ jsx31(Popover, { children: /* @__PURE__ */ jsx31(List, { items, className: Combobox_default.list, children: items.map((item) => /* @__PURE__ */ jsx31(ListItem2, { textValue: item, children: item }, item)) }) })
   ] });
 }
 
@@ -30555,7 +30561,7 @@ var import_classnames22 = __toESM(require_classnames());
 var Container_default = { "container": "Container_container__OWM4N", "centered": "Container_centered__ZWI4Z", "fluid": "Container_fluid__ZjA3M" };
 
 // src/components/Container.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function Container({
   isCentered = true,
   isFluid,
@@ -30563,7 +30569,7 @@ function Container({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx32(
     Box,
     {
       ...props,
@@ -30593,9 +30599,9 @@ var import_classnames23 = __toESM(require_classnames());
 var Label_default = { "label": "Label_label__M2VmO" };
 
 // src/components/Label.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function Label({ className, ...props }) {
-  return /* @__PURE__ */ jsx31($01b77f81d0f07f68$export$b04be29aa201d4f5, { ...props, className: (0, import_classnames23.default)(Label_default.label, className) });
+  return /* @__PURE__ */ jsx33($01b77f81d0f07f68$export$b04be29aa201d4f5, { ...props, className: (0, import_classnames23.default)(Label_default.label, className) });
 }
 
 // src/components/CopyButton.tsx
@@ -30606,7 +30612,7 @@ import { useState as useState8, useRef as useRef7 } from "react";
 var CopyButton_default = { "icon": "CopyButton_icon__Y2VjO", "copy-button": "CopyButton_copy-button__YmUzZ" };
 
 // src/components/CopyButton.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var TIMEOUT = 2e3;
 function CopyButton({ value, timeout = TIMEOUT, className, children, ...props }) {
   const [copied, setCopied] = useState8(false);
@@ -30619,7 +30625,7 @@ function CopyButton({ value, timeout = TIMEOUT, className, children, ...props })
       ref.current = +setTimeout(() => setCopied(false), timeout);
     }
   };
-  return /* @__PURE__ */ jsx32(Icon, { ...props, className: (0, import_classnames24.default)(CopyButton_default.icon, className), onClick: handleCopy, children: copied ? /* @__PURE__ */ jsx32(Icons.Check, {}) : /* @__PURE__ */ jsx32(Icons.Copy, {}) });
+  return /* @__PURE__ */ jsx34(Icon, { ...props, className: (0, import_classnames24.default)(CopyButton_default.icon, className), onClick: handleCopy, children: copied ? /* @__PURE__ */ jsx34(Icons.Check, {}) : /* @__PURE__ */ jsx34(Icons.Copy, {}) });
 }
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/styles/input.module.css
@@ -30629,7 +30635,7 @@ var input_default = { "field": "input_field__OWZkN", "row": "input_row__ZmZmO",
 var TextField_default = { "allowCopy": "TextField_allowCopy__N2FhM", "icon": "TextField_icon__NzRhZ" };
 
 // src/components/TextField.tsx
-import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
 var TextField = forwardRef5(
   ({
     value,
@@ -30652,7 +30658,7 @@ var TextField = forwardRef5(
     useEffect8(() => {
       setInputValue(value);
     }, [value]);
-    return /* @__PURE__ */ jsxs17(
+    return /* @__PURE__ */ jsxs18(
       $bcdf0525bf22703d$export$2c73285ae9390cec,
       {
         ...props,
@@ -30660,9 +30666,9 @@ var TextField = forwardRef5(
         value: inputValue,
         className: (0, import_classnames25.default)(input_default.field, className),
         children: [
-          label && /* @__PURE__ */ jsx33(Label, { children: label }),
-          /* @__PURE__ */ jsxs17("div", { className: input_default.row, children: [
-            /* @__PURE__ */ jsx33(
+          label && /* @__PURE__ */ jsx35(Label, { children: label }),
+          /* @__PURE__ */ jsxs18("div", { className: input_default.row, children: [
+            /* @__PURE__ */ jsx35(
               Component,
               {
                 className: (0, import_classnames25.default)(TextField_default.input, input_default.input, allowCopy && TextField_default.allowCopy),
@@ -30671,7 +30677,7 @@ var TextField = forwardRef5(
                 children
               }
             ),
-            allowCopy && /* @__PURE__ */ jsx33(CopyButton, { className: (0, import_classnames25.default)(TextField_default.icon, input_default.icon), value: inputValue })
+            allowCopy && /* @__PURE__ */ jsx35(CopyButton, { className: (0, import_classnames25.default)(TextField_default.icon, input_default.icon), value: inputValue })
           ] })
         ]
       }
@@ -30683,7 +30689,7 @@ var TextField = forwardRef5(
 var ConfirmationDialog_default = { "dialog": "ConfirmationDialog_dialog__MmIxM", "value": "ConfirmationDialog_value__NWExM" };
 
 // src/components/ConfirmationDialog.tsx
-import { Fragment as Fragment4, jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
 function ConfirmationDialog({
   value,
   confirmMessage,
@@ -30695,21 +30701,21 @@ function ConfirmationDialog({
   const handleChange = (e) => {
     setCanSave(e.target.value === value);
   };
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx36(
     AlertDialog,
     {
       ...props,
       className: (0, import_classnames26.default)(ConfirmationDialog_default.dialog, className),
       isConfirmDisabled: !canSave,
       children: ({ close }) => {
-        return /* @__PURE__ */ jsxs18(Fragment4, { children: [
+        return /* @__PURE__ */ jsxs19(Fragment4, { children: [
           typeof children === "function" ? children({ close }) : children,
-          /* @__PURE__ */ jsxs18(Text, { children: [
+          /* @__PURE__ */ jsxs19(Text, { children: [
             confirmMessage || "Type the following value to confirm",
             ":"
           ] }),
-          /* @__PURE__ */ jsx34("div", { className: ConfirmationDialog_default.value, children: value }),
-          /* @__PURE__ */ jsx34(TextField, { autoFocus: true, "aria-label": "Confirmation", onChange: handleChange })
+          /* @__PURE__ */ jsx36("div", { className: ConfirmationDialog_default.value, children: value }),
+          /* @__PURE__ */ jsx36(TextField, { autoFocus: true, "aria-label": "Confirmation", onChange: handleChange })
         ] });
       }
     }
@@ -30727,21 +30733,21 @@ var import_classnames27 = __toESM(require_classnames());
 var Table_default = { "table": "Table_table__MjBhM", "header": "Table_header__YmVhM", "body": "Table_body__ODA0O", "row": "Table_row__MTk4Z", "column": "Table_column__YjdmZ", "cell": "Table_cell__OTQxZ", "start": "Table_start__YWFkM", "center": "Table_center__ZTFmN", "end": "Table_end__MDEyM" };
 
 // src/components/Table.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function Table({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx35($1910c06f0ca9905e$export$54ec01a60f47d33d, { ...props, className: (0, import_classnames27.default)(Table_default.table, className), "aria-label": "Table", children });
+  return /* @__PURE__ */ jsx37($1910c06f0ca9905e$export$54ec01a60f47d33d, { ...props, className: (0, import_classnames27.default)(Table_default.table, className), "aria-label": "Table", children });
 }
 function TableHeader({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx35($1910c06f0ca9905e$export$f850895b287ef28e, { ...props, className: (0, import_classnames27.default)(Table_default.header, className), children });
+  return /* @__PURE__ */ jsx37($1910c06f0ca9905e$export$f850895b287ef28e, { ...props, className: (0, import_classnames27.default)(Table_default.header, className), children });
 }
 function TableBody({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx35($1910c06f0ca9905e$export$76ccd210b9029917, { ...props, className: (0, import_classnames27.default)(Table_default.body, className), children });
+  return /* @__PURE__ */ jsx37($1910c06f0ca9905e$export$76ccd210b9029917, { ...props, className: (0, import_classnames27.default)(Table_default.body, className), children });
 }
 function TableRow({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx35($1910c06f0ca9905e$export$b59bdbef9ce70de2, { ...props, className: (0, import_classnames27.default)(Table_default.row, className), children });
+  return /* @__PURE__ */ jsx37($1910c06f0ca9905e$export$b59bdbef9ce70de2, { ...props, className: (0, import_classnames27.default)(Table_default.row, className), children });
 }
 function TableColumn({ children, className, alignment, ...props }) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx37(
     $1910c06f0ca9905e$export$816b5d811295e6bc,
     {
       ...props,
@@ -30752,29 +30758,29 @@ function TableColumn({ children, className, alignment, ...props }) {
   );
 }
 function TableCell({ children, className, alignment, ...props }) {
-  return /* @__PURE__ */ jsx35($1910c06f0ca9905e$export$f6f0c3fe4ec306ea, { ...props, className: (0, import_classnames27.default)(Table_default.cell, className, alignment && Table_default[alignment]), children });
+  return /* @__PURE__ */ jsx37($1910c06f0ca9905e$export$f6f0c3fe4ec306ea, { ...props, className: (0, import_classnames27.default)(Table_default.cell, className, alignment && Table_default[alignment]), children });
 }
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/DataTable.module.css
 var DataTable_default = { "datatable": "DataTable_datatable__Nzg4N", "cell": "DataTable_cell__NjljZ" };
 
 // src/components/DataTable.tsx
-import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
 import { createElement as createElement7 } from "react";
 function DataTable({ data = [], className, children, ...props }) {
   const items = data.length && data?.[0]?.id === void 0 ? data.map((record, id) => ({ ...record, id })) : data;
   const columns = Children2.map(children, (child) => {
     return { ...child.props };
   });
-  return /* @__PURE__ */ jsxs19(Table, { ...props, className: (0, import_classnames28.default)(DataTable_default.datatable, className), children: [
-    /* @__PURE__ */ jsx36(TableHeader, { children: columns.map(({ id, label, as, hidden, ...columnProps }) => {
+  return /* @__PURE__ */ jsxs20(Table, { ...props, className: (0, import_classnames28.default)(DataTable_default.datatable, className), children: [
+    /* @__PURE__ */ jsx38(TableHeader, { children: columns.map(({ id, label, as, hidden, ...columnProps }) => {
       if (hidden) {
         return null;
       }
       return /* @__PURE__ */ createElement7(TableColumn, { ...columnProps, key: id, id }, label);
     }) }),
-    /* @__PURE__ */ jsx36(TableBody, { items, children: (row) => {
-      return /* @__PURE__ */ jsx36(TableRow, { children: columns.map(({ id, as, children: children2, className: className2, ...cellProps }) => {
+    /* @__PURE__ */ jsx38(TableBody, { items, children: (row) => {
+      return /* @__PURE__ */ jsx38(TableRow, { children: columns.map(({ id, as, children: children2, className: className2, ...cellProps }) => {
         const value = typeof children2 === "function" ? children2(row, id) : children2 || row[id];
         const Component = as || "div";
         return /* @__PURE__ */ createElement7(TableCell, { ...cellProps, key: id, className: (0, import_classnames28.default)(DataTable_default.cell, className2) }, as ? createElement6(as, {}, value) : value);
@@ -30793,18 +30799,18 @@ var import_classnames29 = __toESM(require_classnames());
 var Dots_default = { "dots": "Dots_dots__ZjYzY", "dot": "Dots_dot__OWM1M", "dots-blink": "Dots_dots-blink__ZTJjM" };
 
 // src/components/Dots.tsx
-import { jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
 function Dots({ className, ...props }) {
-  return /* @__PURE__ */ jsxs20("div", { ...props, className: (0, import_classnames29.default)(Dots_default.dots, className), children: [
-    /* @__PURE__ */ jsx37("div", { className: Dots_default.dot }),
-    /* @__PURE__ */ jsx37("div", { className: Dots_default.dot }),
-    /* @__PURE__ */ jsx37("div", { className: Dots_default.dot })
+  return /* @__PURE__ */ jsxs21("div", { ...props, className: (0, import_classnames29.default)(Dots_default.dots, className), children: [
+    /* @__PURE__ */ jsx39("div", { className: Dots_default.dot }),
+    /* @__PURE__ */ jsx39("div", { className: Dots_default.dot }),
+    /* @__PURE__ */ jsx39("div", { className: Dots_default.dot })
   ] });
 }
 
 // src/components/Grid.tsx
 var import_classnames30 = __toESM(require_classnames());
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function Grid({
   display = "grid",
   justifyContent,
@@ -30837,7 +30843,7 @@ function Grid({
     gridTemplateAreas: areas,
     gridAutoFlow: autoFlow
   });
-  return /* @__PURE__ */ jsx38(Box, { ...props, className: (0, import_classnames30.default)(className, classes), style: { ...styleProps, ...style }, children });
+  return /* @__PURE__ */ jsx40(Box, { ...props, className: (0, import_classnames30.default)(className, classes), style: { ...styleProps, ...style }, children });
 }
 
 // src/components/Heading.tsx
@@ -30847,7 +30853,7 @@ var import_classnames31 = __toESM(require_classnames());
 var Heading_default = { "heading": "Heading_heading__YjA1Y" };
 
 // src/components/Heading.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function Heading({
   size = "5",
   weight,
@@ -30864,7 +30870,7 @@ function Heading({
     fontWeight: weight,
     letterSpacing: spacing
   });
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx41(
     Box,
     {
       ...props,
@@ -30882,7 +30888,7 @@ import { useRef as useRef8, useState as useState11, useEffect as useEffect9 } fr
 var HoverTrigger_default = { "wrapper": "HoverTrigger_wrapper__ZDFiN" };
 
 // src/components/HoverTrigger.tsx
-import { Fragment as Fragment5, jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx42, jsxs as jsxs22 } from "react/jsx-runtime";
 var CLOSE_DELAY = 500;
 function HoverTrigger({
   isOpen,
@@ -30933,9 +30939,9 @@ function HoverTrigger({
       }
     }, closeDelay);
   };
-  return /* @__PURE__ */ jsxs21(Fragment5, { children: [
-    /* @__PURE__ */ jsx40("div", { ref: triggerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: triggerElement }),
-    /* @__PURE__ */ jsx40(Popover, { isOpen: open, isNonModal: true, triggerRef, children: /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsxs22(Fragment5, { children: [
+    /* @__PURE__ */ jsx42("div", { ref: triggerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: triggerElement }),
+    /* @__PURE__ */ jsx42(Popover, { isOpen: open, isNonModal: true, triggerRef, children: /* @__PURE__ */ jsx42(
       "div",
       {
         className: HoverTrigger_default.wrapper,
@@ -30955,7 +30961,7 @@ import { useState as useState12, useCallback as useCallback2 } from "react";
 var InlineEditField_default = { "edit": "InlineEditField_edit__NzdlN", "icon": "InlineEditField_icon__OTg4N" };
 
 // src/components/InlineEditField.tsx
-import { jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
 function InlineEditField({
   value: defaultValue = "",
   defaultEdit,
@@ -30990,7 +30996,7 @@ function InlineEditField({
       handleCancel();
     }
   };
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       "aria-label": "Edit",
@@ -30999,8 +31005,8 @@ function InlineEditField({
       onClick: handleEdit,
       children: [
         !edit && children,
-        !edit && /* @__PURE__ */ jsx41(Icon, { className: InlineEditField_default.icon, children: /* @__PURE__ */ jsx41(Icons.Edit, {}) }),
-        edit && /* @__PURE__ */ jsx41(
+        !edit && /* @__PURE__ */ jsx43(Icon, { className: InlineEditField_default.icon, children: /* @__PURE__ */ jsx43(Icons.Edit, {}) }),
+        edit && /* @__PURE__ */ jsx43(
           TextField,
           {
             value,
@@ -31022,12 +31028,12 @@ var import_classnames33 = __toESM(require_classnames());
 var Loading_default = { "loading": "Loading_loading__ODhhZ", "page": "Loading_page__NDVmN", "center": "Loading_center__Zjc5M", "inline": "Loading_inline__NTVmN" };
 
 // src/components/Loading.tsx
-import { jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
 function Loading(props) {
   const { size, position = "inline", icon = "spinner", className, ...domProps } = props;
-  return /* @__PURE__ */ jsxs23("div", { ...domProps, className: (0, import_classnames33.default)(Loading_default.loading, className, Loading_default[position]), children: [
-    icon === "dots" && /* @__PURE__ */ jsx42(Dots, {}),
-    icon === "spinner" && /* @__PURE__ */ jsx42(Spinner, { size })
+  return /* @__PURE__ */ jsxs24("div", { ...domProps, className: (0, import_classnames33.default)(Loading_default.loading, className, Loading_default[position]), children: [
+    icon === "dots" && /* @__PURE__ */ jsx44(Dots, {}),
+    icon === "spinner" && /* @__PURE__ */ jsx44(Spinner, { size })
   ] });
 }
 
@@ -31041,11 +31047,11 @@ var import_classnames34 = __toESM(require_classnames());
 var MenuItem_default = { "item": "MenuItem_item__MjliN", "check": "MenuItem_check__OWE5Y" };
 
 // src/components/MenuItem.tsx
-import { jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
 function MenuItem2({ children, className, ...props }) {
-  return /* @__PURE__ */ jsxs24($3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ...props, className: (0, import_classnames34.default)(MenuItem_default.item, className), children: [
+  return /* @__PURE__ */ jsxs25($3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ...props, className: (0, import_classnames34.default)(MenuItem_default.item, className), children: [
     children,
-    /* @__PURE__ */ jsx43("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx43(Icon, { className: MenuItem_default.check, children: /* @__PURE__ */ jsx43(Icons.Check, {}) }) })
+    /* @__PURE__ */ jsx45("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx45(Icon, { className: MenuItem_default.check, children: /* @__PURE__ */ jsx45(Icons.Check, {}) }) })
   ] });
 }
 
@@ -31053,13 +31059,13 @@ function MenuItem2({ children, className, ...props }) {
 var Menu_default = { "menu": "Menu_menu__ZmM3M", "separator": "Menu_separator__NDRhY" };
 
 // src/components/Menu.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 function Menu({ items, className, children, ...props }) {
-  return /* @__PURE__ */ jsx44($3674c52c6b3c5bce$export$d9b273488cd8ce6f, { ...props, className: (0, import_classnames35.default)(Menu_default.menu, className), children: children || items?.map((item, index) => {
+  return /* @__PURE__ */ jsx46($3674c52c6b3c5bce$export$d9b273488cd8ce6f, { ...props, className: (0, import_classnames35.default)(Menu_default.menu, className), children: children || items?.map((item, index) => {
     if (item === null) {
-      return /* @__PURE__ */ jsx44($431f98aba6844401$export$1ff3c3f08ae963c0, { className: Menu_default.separator }, index);
+      return /* @__PURE__ */ jsx46($431f98aba6844401$export$1ff3c3f08ae963c0, { className: Menu_default.separator }, index);
     }
-    return /* @__PURE__ */ jsx44(MenuItem2, { id: item, children: item }, index);
+    return /* @__PURE__ */ jsx46(MenuItem2, { id: item, children: item }, index);
   }) });
 }
 
@@ -31070,9 +31076,9 @@ var import_classnames36 = __toESM(require_classnames());
 var Modal_default = { "overlay": "Modal_overlay__NDQ5M", "modal-fade": "Modal_modal-fade__ZWUyZ", "modal": "Modal_modal__ZmIxM", "modal-zoom": "Modal_modal-zoom__MDZmY" };
 
 // src/components/Modal.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function Modal({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx45($f3f84453ead64de5$export$8948f78d83984c69, { ...props, className: Modal_default.overlay, children: /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx47($f3f84453ead64de5$export$8948f78d83984c69, { ...props, className: Modal_default.overlay, children: /* @__PURE__ */ jsx47(
     $f3f84453ead64de5$export$2b77a92f1a5ad772,
     {
       className: (0, import_classnames36.default)(Modal_default.modal, className),
@@ -31098,14 +31104,14 @@ var useNavigationMenu = store3;
 var NavigationMenu_default = { "nav": "NavigationMenu_nav__MzRiY", "item": "NavigationMenu_item__YTI0N", "icon": "NavigationMenu_icon__ZDczY" };
 
 // src/components/NavigationMenu.tsx
-import { jsx as jsx46, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs26 } from "react/jsx-runtime";
 function NavigationMenu({
   showArrow = true,
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx46("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.nav, className), children });
+  return /* @__PURE__ */ jsx48("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.nav, className), children });
 }
 function NavigationMenuItem({
   label,
@@ -31115,15 +31121,15 @@ function NavigationMenuItem({
 }) {
   const { activeMenu } = useNavigationMenu();
   if (label) {
-    return /* @__PURE__ */ jsxs25(HoverTrigger, { isOpen: activeMenu === label, onHoverStart: () => setActiveMenu(label), children: [
-      /* @__PURE__ */ jsxs25("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.item, className), children: [
-        /* @__PURE__ */ jsx46(Text, { children: label }),
-        /* @__PURE__ */ jsx46(Icon, { rotate: 90, size: "xs", className: NavigationMenu_default.icon, children: /* @__PURE__ */ jsx46(Icons.Chevron, {}) })
+    return /* @__PURE__ */ jsxs26(HoverTrigger, { isOpen: activeMenu === label, onHoverStart: () => setActiveMenu(label), children: [
+      /* @__PURE__ */ jsxs26("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.item, className), children: [
+        /* @__PURE__ */ jsx48(Text, { children: label }),
+        /* @__PURE__ */ jsx48(Icon, { rotate: 90, size: "xs", className: NavigationMenu_default.icon, children: /* @__PURE__ */ jsx48(Icons.Chevron, {}) })
       ] }),
       children
     ] });
   }
-  return /* @__PURE__ */ jsx46("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.item, className), children });
+  return /* @__PURE__ */ jsx48("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.item, className), children });
 }
 
 // src/components/PasswordField.tsx
@@ -31134,17 +31140,17 @@ var import_classnames38 = __toESM(require_classnames());
 var PasswordField_default = { "icon": "PasswordField_icon__NDMyZ" };
 
 // src/components/PasswordField.tsx
-import { jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs27 } from "react/jsx-runtime";
 var PasswordField = forwardRef6(
   ({ label, className, ...props }, ref) => {
     const [show, setShow] = useState13(false);
     const type = show ? "text" : "password";
     const handleShowPassword = () => setShow((state) => !state);
-    return /* @__PURE__ */ jsxs26($bcdf0525bf22703d$export$2c73285ae9390cec, { ...props, ref, className: (0, import_classnames38.default)(input_default.field, className), children: [
-      label && /* @__PURE__ */ jsx47(Label, { children: label }),
-      /* @__PURE__ */ jsxs26("div", { className: input_default.row, children: [
-        /* @__PURE__ */ jsx47($3985021b0ad6602f$export$f5b8910cec6cf069, { type, className: input_default.input }),
-        /* @__PURE__ */ jsx47(Icon, { onClick: handleShowPassword, className: (0, import_classnames38.default)(PasswordField_default.icon, input_default.icon), children: show ? /* @__PURE__ */ jsx47(Icons.EyeSlash, {}) : /* @__PURE__ */ jsx47(Icons.Eye, {}) })
+    return /* @__PURE__ */ jsxs27($bcdf0525bf22703d$export$2c73285ae9390cec, { ...props, ref, className: (0, import_classnames38.default)(input_default.field, className), children: [
+      label && /* @__PURE__ */ jsx49(Label, { children: label }),
+      /* @__PURE__ */ jsxs27("div", { className: input_default.row, children: [
+        /* @__PURE__ */ jsx49($3985021b0ad6602f$export$f5b8910cec6cf069, { type, className: input_default.input }),
+        /* @__PURE__ */ jsx49(Icon, { onClick: handleShowPassword, className: (0, import_classnames38.default)(PasswordField_default.icon, input_default.icon), children: show ? /* @__PURE__ */ jsx49(Icons.EyeSlash, {}) : /* @__PURE__ */ jsx49(Icons.Eye, {}) })
       ] })
     ] });
   }
@@ -31157,12 +31163,12 @@ var import_classnames39 = __toESM(require_classnames());
 var ProgressBar_default = { "progressbar": "ProgressBar_progressbar__MTQwN", "track": "ProgressBar_track__YTM0O", "fill": "ProgressBar_fill__ZTkyN", "value": "ProgressBar_value__YTU3N" };
 
 // src/components/ProgressBar.tsx
-import { Fragment as Fragment6, jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx50, jsxs as jsxs28 } from "react/jsx-runtime";
 function ProgressBar({ className, showValue, ...props }) {
-  return /* @__PURE__ */ jsx48($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames39.default)(ProgressBar_default.progressbar, className), children: ({ percentage = 0, valueText }) => {
-    return /* @__PURE__ */ jsxs27(Fragment6, { children: [
-      /* @__PURE__ */ jsx48("div", { className: ProgressBar_default.track, children: /* @__PURE__ */ jsx48("div", { className: ProgressBar_default.fill, style: { width: `${percentage}%` } }) }),
-      showValue && /* @__PURE__ */ jsx48("div", { className: ProgressBar_default.value, children: valueText })
+  return /* @__PURE__ */ jsx50($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames39.default)(ProgressBar_default.progressbar, className), children: ({ percentage = 0, valueText }) => {
+    return /* @__PURE__ */ jsxs28(Fragment6, { children: [
+      /* @__PURE__ */ jsx50("div", { className: ProgressBar_default.track, children: /* @__PURE__ */ jsx50("div", { className: ProgressBar_default.fill, style: { width: `${percentage}%` } }) }),
+      showValue && /* @__PURE__ */ jsx50("div", { className: ProgressBar_default.value, children: valueText })
     ] });
   } });
 }
@@ -31174,16 +31180,16 @@ var import_classnames40 = __toESM(require_classnames());
 var ProgressCircle_default = { "progresscircle": "ProgressCircle_progresscircle__NTQ3N", "track": "ProgressCircle_track__Mjk3Y", "fill": "ProgressCircle_fill__OWJlY", "value": "ProgressCircle_value__NzQ5Y" };
 
 // src/components/ProgressCircle.tsx
-import { Fragment as Fragment7, jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx51, jsxs as jsxs29 } from "react/jsx-runtime";
 function ProgressCircle({ className, showValue, ...props }) {
-  return /* @__PURE__ */ jsx49($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames40.default)(ProgressCircle_default.progresscircle, className), children: ({ percentage = 0, valueText }) => {
+  return /* @__PURE__ */ jsx51($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames40.default)(ProgressCircle_default.progresscircle, className), children: ({ percentage = 0, valueText }) => {
     const radius = 45;
     const circumference = radius * 2 * Math.PI;
     const offset = circumference - percentage / 100 * circumference;
-    return /* @__PURE__ */ jsxs28(Fragment7, { children: [
-      /* @__PURE__ */ jsxs28("svg", { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ jsx49("circle", { className: ProgressCircle_default.track, cx: "50", cy: "50", r: "45" }),
-        /* @__PURE__ */ jsx49(
+    return /* @__PURE__ */ jsxs29(Fragment7, { children: [
+      /* @__PURE__ */ jsxs29("svg", { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ jsx51("circle", { className: ProgressCircle_default.track, cx: "50", cy: "50", r: "45" }),
+        /* @__PURE__ */ jsx51(
           "circle",
           {
             className: ProgressCircle_default.fill,
@@ -31195,7 +31201,7 @@ function ProgressCircle({ className, showValue, ...props }) {
           }
         )
       ] }),
-      showValue && /* @__PURE__ */ jsx49("label", { className: ProgressCircle_default.value, children: valueText })
+      showValue && /* @__PURE__ */ jsx51("label", { className: ProgressCircle_default.value, children: valueText })
     ] });
   } });
 }
@@ -31208,17 +31214,17 @@ var import_classnames41 = __toESM(require_classnames());
 var RadioGroup_default = { "radiogroup": "RadioGroup_radiogroup__M2FmO", "radio": "RadioGroup_radio__NjdlY" };
 
 // src/components/RadioGroup.tsx
-import { jsx as jsx50, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
 var RadioGroup = forwardRef7(
   ({ label, children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs29($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, ref, className: (0, import_classnames41.default)(RadioGroup_default.radiogroup, className), children: [
-      label && /* @__PURE__ */ jsx50(Label, { children: label }),
+    return /* @__PURE__ */ jsxs30($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, ref, className: (0, import_classnames41.default)(RadioGroup_default.radiogroup, className), children: [
+      label && /* @__PURE__ */ jsx52(Label, { children: label }),
       children
     ] });
   }
 );
 function Radio({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx50($b6c3ddc6086f204d$export$d7b12c4107be0d61, { ...props, className: (0, import_classnames41.default)(RadioGroup_default.radio, className), children });
+  return /* @__PURE__ */ jsx52($b6c3ddc6086f204d$export$d7b12c4107be0d61, { ...props, className: (0, import_classnames41.default)(RadioGroup_default.radio, className), children });
 }
 
 // src/components/SearchField.tsx
@@ -31229,7 +31235,7 @@ var import_classnames42 = __toESM(require_classnames());
 var SearchField_default = { "search": "SearchField_search__MmNlZ", "input": "SearchField_input__NTAwN", "close": "SearchField_close__NzZiM" };
 
 // src/components/SearchField.tsx
-import { Fragment as Fragment8, jsx as jsx51, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx53, jsxs as jsxs31 } from "react/jsx-runtime";
 var SearchField = forwardRef8(
   ({ label, value, delay = 0, onSearch, className, ...props }, ref) => {
     const [search, setSearch] = useState14(value ?? "");
@@ -31250,24 +31256,24 @@ var SearchField = forwardRef8(
         onSearch?.(searchValue);
       }
     }, [searchValue, delay, onSearch]);
-    return /* @__PURE__ */ jsx51($440f4836bcb56932$export$b94867ecbd698f21, { ...props, ref, className: (0, import_classnames42.default)(input_default.field, className), children: ({ state }) => {
-      return /* @__PURE__ */ jsxs30(Fragment8, { children: [
-        label && /* @__PURE__ */ jsx51(Label, { children: label }),
-        /* @__PURE__ */ jsxs30("div", { className: input_default.row, children: [
-          /* @__PURE__ */ jsx51(Icons.MagnifyingGlass, { className: (0, import_classnames42.default)(SearchField_default.search, input_default.icon) }),
-          /* @__PURE__ */ jsx51(
+    return /* @__PURE__ */ jsx53($440f4836bcb56932$export$b94867ecbd698f21, { ...props, ref, className: (0, import_classnames42.default)(input_default.field, className), children: ({ state }) => {
+      return /* @__PURE__ */ jsxs31(Fragment8, { children: [
+        label && /* @__PURE__ */ jsx53(Label, { children: label }),
+        /* @__PURE__ */ jsxs31("div", { className: input_default.row, children: [
+          /* @__PURE__ */ jsx53(Icons.MagnifyingGlass, { className: (0, import_classnames42.default)(SearchField_default.search, input_default.icon) }),
+          /* @__PURE__ */ jsx53(
             $3985021b0ad6602f$export$f5b8910cec6cf069,
             {
               className: (0, import_classnames42.default)(SearchField_default.input, input_default.input),
               onChange: handleChange
             }
           ),
-          state.value && /* @__PURE__ */ jsx51(
+          state.value && /* @__PURE__ */ jsx53(
             $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
             {
               className: (0, import_classnames42.default)(SearchField_default.close, input_default.icon),
               onPress: resetSearch,
-              children: /* @__PURE__ */ jsx51(Icon, { children: /* @__PURE__ */ jsx51(Icons.Close, {}) })
+              children: /* @__PURE__ */ jsx53(Icon, { children: /* @__PURE__ */ jsx53(Icons.Close, {}) })
             }
           )
         ] })
@@ -31284,7 +31290,7 @@ import { forwardRef as forwardRef9 } from "react";
 var Select_default = { "button": "Select_button__YTM3Z", "list": "Select_list__MjJiN", "icon": "Select_icon__NzlhY" };
 
 // src/components/Select.tsx
-import { jsx as jsx52, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs32 } from "react/jsx-runtime";
 var Select = forwardRef9(
   ({
     children,
@@ -31300,7 +31306,7 @@ var Select = forwardRef9(
       onSelectionChange?.(e);
       onChange?.(e);
     };
-    return /* @__PURE__ */ jsxs31(
+    return /* @__PURE__ */ jsxs32(
       $82d7e5349645de74$export$ef9b1a59e592288f,
       {
         ...props,
@@ -31308,12 +31314,12 @@ var Select = forwardRef9(
         className: (0, import_classnames43.default)(input_default.field, className),
         onSelectionChange: handleChange,
         children: [
-          label && /* @__PURE__ */ jsx52(Label, { children: label }),
-          /* @__PURE__ */ jsx52($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: (0, import_classnames43.default)(input_default.input, className), children: /* @__PURE__ */ jsxs31(Row, { justifyContent: "space-between", gap: "3", children: [
-            /* @__PURE__ */ jsx52($82d7e5349645de74$export$e288731fd71264f0, {}),
-            /* @__PURE__ */ jsx52("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx52(Icon, { rotate: 90, size: "xs", className: input_default.icon, children: /* @__PURE__ */ jsx52(Icons.Chevron, {}) }) })
+          label && /* @__PURE__ */ jsx54(Label, { children: label }),
+          /* @__PURE__ */ jsx54($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: (0, import_classnames43.default)(input_default.input, className), children: /* @__PURE__ */ jsxs32(Row, { justifyContent: "space-between", gap: "3", children: [
+            /* @__PURE__ */ jsx54($82d7e5349645de74$export$e288731fd71264f0, {}),
+            /* @__PURE__ */ jsx54("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx54(Icon, { rotate: 90, size: "xs", className: input_default.icon, children: /* @__PURE__ */ jsx54(Icons.Chevron, {}) }) })
           ] }) }),
-          /* @__PURE__ */ jsx52(Popover, { children: /* @__PURE__ */ jsx52(List, { items, className: Select_default.list, children }) })
+          /* @__PURE__ */ jsx54(Popover, { children: /* @__PURE__ */ jsx54(List, { items, className: Select_default.list, children }) })
         ]
       }
     );
@@ -31328,18 +31334,18 @@ var import_classnames44 = __toESM(require_classnames());
 var Slider_default = { "slider": "Slider_slider__ODQ1M", "header": "Slider_header__NmYzN", "track": "Slider_track__Y2M4O", "fill": "Slider_fill__MWM4N", "thumb": "Slider_thumb__NGU2Z" };
 
 // src/components/Slider.tsx
-import { Fragment as Fragment9, jsx as jsx53, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx55, jsxs as jsxs33 } from "react/jsx-runtime";
 var Slider = forwardRef10(
   ({ className, showValue = true, label, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs32($6f909507e6374d18$export$472062a354075cee, { ...props, ref, className: (0, import_classnames44.default)(Slider_default.slider, className), children: [
-      /* @__PURE__ */ jsxs32("div", { className: Slider_default.header, children: [
-        label && /* @__PURE__ */ jsx53(Label, { className: Slider_default.label, children: label }),
-        showValue && /* @__PURE__ */ jsx53($6f909507e6374d18$export$a590f758a961cb5b, { className: Slider_default.output })
+    return /* @__PURE__ */ jsxs33($6f909507e6374d18$export$472062a354075cee, { ...props, ref, className: (0, import_classnames44.default)(Slider_default.slider, className), children: [
+      /* @__PURE__ */ jsxs33("div", { className: Slider_default.header, children: [
+        label && /* @__PURE__ */ jsx55(Label, { className: Slider_default.label, children: label }),
+        showValue && /* @__PURE__ */ jsx55($6f909507e6374d18$export$a590f758a961cb5b, { className: Slider_default.output })
       ] }),
-      /* @__PURE__ */ jsx53($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
+      /* @__PURE__ */ jsx55($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
         const isHorizontal = state.orientation === "horizontal";
-        return /* @__PURE__ */ jsxs32(Fragment9, { children: [
-          /* @__PURE__ */ jsx53(
+        return /* @__PURE__ */ jsxs33(Fragment9, { children: [
+          /* @__PURE__ */ jsx55(
             "div",
             {
               className: Slider_default.fill,
@@ -31348,7 +31354,7 @@ var Slider = forwardRef10(
               }
             }
           ),
-          /* @__PURE__ */ jsx53($6f909507e6374d18$export$2c1b491743890dec, { className: Slider_default.thumb })
+          /* @__PURE__ */ jsx55($6f909507e6374d18$export$2c1b491743890dec, { className: Slider_default.thumb })
         ] });
       } })
     ] });
@@ -31362,11 +31368,11 @@ var import_classnames45 = __toESM(require_classnames());
 var StatusLight_default = { "statuslight": "StatusLight_statuslight__NGIzM", "status": "StatusLight_status__NjQ5O", "bg": "StatusLight_bg__MDIxM", "success": "StatusLight_success__NGRjZ", "warning": "StatusLight_warning__MTFhZ", "error": "StatusLight_error__NzBjO", "active": "StatusLight_active__YTJhM", "inactive": "StatusLight_inactive__ZDZmN" };
 
 // src/components/StatusLight.tsx
-import { jsx as jsx54, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs34 } from "react/jsx-runtime";
 function StatusLight(props) {
   const { color, variant = "inactive", children, className, ...domProps } = props;
-  return /* @__PURE__ */ jsxs33("div", { ...domProps, className: (0, import_classnames45.default)(StatusLight_default.statuslight, className), children: [
-    /* @__PURE__ */ jsx54("div", { className: StatusLight_default.bg, children: /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsxs34("div", { ...domProps, className: (0, import_classnames45.default)(StatusLight_default.statuslight, className), children: [
+    /* @__PURE__ */ jsx56("div", { className: StatusLight_default.bg, children: /* @__PURE__ */ jsx56(
       "div",
       {
         className: (0, import_classnames45.default)(StatusLight_default.status, StatusLight_default[variant]),
@@ -31385,13 +31391,13 @@ var import_classnames46 = __toESM(require_classnames());
 var Switch_default = { "switch": "Switch_switch__YzA5O", "track": "Switch_track__MTM0M", "knob": "Switch_knob__OWM5N" };
 
 // src/components/Switch.tsx
-import { Fragment as Fragment10, jsx as jsx55, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx57, jsxs as jsxs35 } from "react/jsx-runtime";
 var Switch = forwardRef11(
   ({ label, children, className, ...props }, ref) => {
     const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-    return /* @__PURE__ */ jsxs34(Fragment10, { children: [
-      label && /* @__PURE__ */ jsx55(Label, { children: label }),
-      /* @__PURE__ */ jsxs34(
+    return /* @__PURE__ */ jsxs35(Fragment10, { children: [
+      label && /* @__PURE__ */ jsx57(Label, { children: label }),
+      /* @__PURE__ */ jsxs35(
         $8e59e948500a8fe1$export$b5d5cf8927ab7262,
         {
           ...props,
@@ -31399,7 +31405,7 @@ var Switch = forwardRef11(
           ref,
           className: (0, import_classnames46.default)(Switch_default.switch, className),
           children: [
-            /* @__PURE__ */ jsx55("div", { className: Switch_default.track, children: /* @__PURE__ */ jsx55("div", { className: Switch_default.knob }) }),
+            /* @__PURE__ */ jsx57("div", { className: Switch_default.track, children: /* @__PURE__ */ jsx57("div", { className: Switch_default.knob }) }),
             children
           ]
         }
@@ -31412,18 +31418,18 @@ var Switch = forwardRef11(
 var Tabs_default = { "tabs": "Tabs_tabs__ZmM4Z", "list": "Tabs_list__MGM4O", "quiet": "Tabs_quiet__YmI3N", "tab": "Tabs_tab__NWEyN" };
 
 // src/components/Tabs.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 function Tabs({ children, ...props }) {
-  return /* @__PURE__ */ jsx56($5e8ad37a45e1c704$export$b2539bed5023c21c, { ...props, className: Tabs_default.tabs, children });
+  return /* @__PURE__ */ jsx58($5e8ad37a45e1c704$export$b2539bed5023c21c, { ...props, className: Tabs_default.tabs, children });
 }
 function TabList({ children, ...props }) {
-  return /* @__PURE__ */ jsx56($5e8ad37a45e1c704$export$e51a686c67fdaa2d, { ...props, className: Tabs_default.list, children });
+  return /* @__PURE__ */ jsx58($5e8ad37a45e1c704$export$e51a686c67fdaa2d, { ...props, className: Tabs_default.list, children });
 }
 function Tab({ children, ...props }) {
-  return /* @__PURE__ */ jsx56($5e8ad37a45e1c704$export$3e41faf802a29e71, { ...props, className: Tabs_default.tab, children });
+  return /* @__PURE__ */ jsx58($5e8ad37a45e1c704$export$3e41faf802a29e71, { ...props, className: Tabs_default.tab, children });
 }
 function TabPanel({ children, ...props }) {
-  return /* @__PURE__ */ jsx56($5e8ad37a45e1c704$export$3d96ec278d3efce4, { ...props, className: Tabs_default.panel, children });
+  return /* @__PURE__ */ jsx58($5e8ad37a45e1c704$export$3d96ec278d3efce4, { ...props, className: Tabs_default.panel, children });
 }
 
 // src/components/TextArea.tsx
@@ -31434,43 +31440,86 @@ import { forwardRef as forwardRef12 } from "react";
 var TextArea_default = { "textarea": "TextArea_textarea__YzRiM", "resize-none": "TextArea_resize-none__ZTljZ", "resize-horizontal": "TextArea_resize-horizontal__NzgyN", "resize-vertical": "TextArea_resize-vertical__MTIxZ" };
 
 // src/components/TextArea.tsx
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var TextArea = forwardRef12(
   ({ rows, cols, resize, className, style, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx57(
+    return /* @__PURE__ */ jsx59(
       TextField,
       {
         ...props,
         ref,
         className: (0, import_classnames47.default)(resize && TextArea_default[`resize-${resize}`]),
         asChild: true,
-        children: /* @__PURE__ */ jsx57($216918bed6669f72$export$f5c9f3c2c4054eec, { rows, cols, style: { ...style }, children })
+        children: /* @__PURE__ */ jsx59($216918bed6669f72$export$f5c9f3c2c4054eec, { rows, cols, style: { ...style }, children })
       }
     );
   }
 );
 
+// src/components/ThemeButton.tsx
+var import_classnames48 = __toESM(require_classnames());
+
+// css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/ThemeButton.module.css
+var ThemeButton_default = { "button": "ThemeButton_button__OWVmZ" };
+
+// src/components/ThemeButton.tsx
+import { jsx as jsx60, jsxs as jsxs36 } from "react/jsx-runtime";
+function ThemeButton({ className, variant = "quiet", ...props }) {
+  const { theme, setTheme: setTheme2 } = useTheme();
+  const transitions = useTransition(theme, {
+    initial: { opacity: 1 },
+    from: {
+      opacity: 0,
+      transform: `translateY(${theme === "light" ? "20px" : "-20px"}) scale(0.5)`
+    },
+    enter: { opacity: 1, transform: "translateY(0px) scale(1.0)" },
+    leave: {
+      opacity: 0,
+      transform: `translateY(${theme === "light" ? "-20px" : "20px"}) scale(0.5)`
+    }
+  });
+  function handleClick() {
+    setTheme2(theme === "light" ? "dark" : "light");
+  }
+  return /* @__PURE__ */ jsxs36(
+    Button,
+    {
+      ...props,
+      className: (0, import_classnames48.default)(ThemeButton_default.button, className),
+      variant,
+      onPress: handleClick,
+      children: [
+        transitions((style, item) => (
+          // @ts-ignore
+          /* @__PURE__ */ jsx60(animated.div, { style, children: /* @__PURE__ */ jsx60(Icon, { size: "sm", children: item === "light" ? /* @__PURE__ */ jsx60(Icons.Sun, {}) : /* @__PURE__ */ jsx60(Icons.Moon, {}) }) }, item)
+        )),
+        "\xA0"
+      ]
+    }
+  );
+}
+
 // src/components/Toggle.tsx
 import { forwardRef as forwardRef13 } from "react";
-var import_classnames48 = __toESM(require_classnames());
+var import_classnames49 = __toESM(require_classnames());
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/Toggle.module.css
 var Toggle_default = { "toggle": "Toggle_toggle__NGNlM" };
 
 // src/components/Toggle.tsx
-import { Fragment as Fragment11, jsx as jsx58, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx61, jsxs as jsxs37 } from "react/jsx-runtime";
 var Toggle = forwardRef13(
   ({ label, children, className, ...props }, ref) => {
     const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-    return /* @__PURE__ */ jsxs35(Fragment11, { children: [
-      label && /* @__PURE__ */ jsx58(Label, { children: label }),
-      /* @__PURE__ */ jsx58(
+    return /* @__PURE__ */ jsxs37(Fragment11, { children: [
+      label && /* @__PURE__ */ jsx61(Label, { children: label }),
+      /* @__PURE__ */ jsx61(
         $efde0372d7a700fe$export$d2b052e7b4be1756,
         {
           ...props,
           ref,
           isSelected,
-          className: (0, import_classnames48.default)(Toggle_default.toggle, className),
+          className: (0, import_classnames49.default)(Toggle_default.toggle, className),
           children
         }
       )
@@ -31479,43 +31528,43 @@ var Toggle = forwardRef13(
 );
 
 // src/components/ToggleGroup.tsx
-var import_classnames49 = __toESM(require_classnames());
+var import_classnames50 = __toESM(require_classnames());
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/ToggleGroup.module.css
 var ToggleGroup_default = { "group": "ToggleGroup_group__NDAzY", "list": "ToggleGroup_list__ZDEwO", "item": "ToggleGroup_item__N2ZmN" };
 
 // src/components/ToggleGroup.tsx
-import { jsx as jsx59, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs38 } from "react/jsx-runtime";
 function ToggleGroup({ label, className, children, ...props }) {
-  return /* @__PURE__ */ jsxs36($eaf9e70818b436db$export$67ea30858aaf75e3, { ...props, className: (0, import_classnames49.default)(ToggleGroup_default.group, className), selectionBehavior: "toggle", children: [
-    label && /* @__PURE__ */ jsx59(Label, { children: label }),
-    /* @__PURE__ */ jsx59($eaf9e70818b436db$export$f9fef0f55402315b, { className: ToggleGroup_default.list, children })
+  return /* @__PURE__ */ jsxs38($eaf9e70818b436db$export$67ea30858aaf75e3, { ...props, className: (0, import_classnames50.default)(ToggleGroup_default.group, className), selectionBehavior: "toggle", children: [
+    label && /* @__PURE__ */ jsx62(Label, { children: label }),
+    /* @__PURE__ */ jsx62($eaf9e70818b436db$export$f9fef0f55402315b, { className: ToggleGroup_default.list, children })
   ] });
 }
 function ToggleGroupItem({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx59($eaf9e70818b436db$export$3288d34c523a1192, { ...props, className: (0, import_classnames49.default)(ToggleGroup_default.item, className), children });
+  return /* @__PURE__ */ jsx62($eaf9e70818b436db$export$3288d34c523a1192, { ...props, className: (0, import_classnames50.default)(ToggleGroup_default.item, className), children });
 }
 
 // src/components/Tooltip.tsx
-var import_classnames50 = __toESM(require_classnames());
+var import_classnames51 = __toESM(require_classnames());
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/Tooltip.module.css
 var Tooltip_default = { "tooltip": "Tooltip_tooltip__Y2Y2N", "arrow": "Tooltip_arrow__NzgwN", "slide": "Tooltip_slide__ODJjZ" };
 
 // src/components/Tooltip.tsx
-import { jsx as jsx60, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs39 } from "react/jsx-runtime";
 function Tooltip({ children, className, ...props }) {
-  return /* @__PURE__ */ jsxs37($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: (0, import_classnames50.default)(Tooltip_default.tooltip, className), children: [
-    /* @__PURE__ */ jsx60($44f671af83e7d9e0$export$746d02f47f4d381, { className: Tooltip_default.arrow, children: /* @__PURE__ */ jsx60("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx60("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+  return /* @__PURE__ */ jsxs39($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: (0, import_classnames51.default)(Tooltip_default.tooltip, className), children: [
+    /* @__PURE__ */ jsx63($44f671af83e7d9e0$export$746d02f47f4d381, { className: Tooltip_default.arrow, children: /* @__PURE__ */ jsx63("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx63("path", { d: "M0 0 L4 4 L8 0" }) }) }),
     children
   ] });
 }
 
 // src/components/ZenProvider.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 function ZenProvider({ children, ...props }) {
   const { toast } = props;
-  return /* @__PURE__ */ jsx61(ToastProvider, { ...toast, children });
+  return /* @__PURE__ */ jsx64(ToastProvider, { ...toast, children });
 }
 export {
   Accordion,
@@ -31592,6 +31641,7 @@ export {
   Text,
   TextArea,
   TextField,
+  ThemeButton,
   Toast,
   ToastProvider,
   Toaster,