@umami/react-zen 0.116.0 → 0.118.0

package/dist/index.js

@@ -34,8 +34,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js
 var require_use_sync_external_store_shim_production = __commonJS({
   "node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js"(exports) {
-    var import_react196 = __toESM(require("react"));
-    var React7 = import_react196.default;
+    var import_react189 = __toESM(require("react"));
+    var React7 = import_react189.default;
     function is2(x, y) {
       return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
     }
@@ -87,7 +87,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
 // node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
 var require_use_sync_external_store_shim_development = __commonJS({
   "node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js"(exports) {
-    var import_react196 = __toESM(require("react"));
+    var import_react189 = __toESM(require("react"));
     (function() {
       function is2(x, y) {
         return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
@@ -141,7 +141,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return getSnapshot();
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React7 = import_react196.default, objectIs = "function" === typeof Object.is ? Object.is : is2, useState18 = React7.useState, useEffect13 = React7.useEffect, useLayoutEffect3 = React7.useLayoutEffect, useDebugValue = React7.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      var React7 = import_react189.default, objectIs = "function" === typeof Object.is ? Object.is : is2, useState18 = React7.useState, useEffect13 = React7.useEffect, useLayoutEffect3 = React7.useLayoutEffect, useDebugValue = React7.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
       exports.useSyncExternalStore = void 0 !== React7.useSyncExternalStore ? React7.useSyncExternalStore : shim;
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
     })();
@@ -26119,25 +26119,30 @@ var FormField_default = { "field": "FormField_field__YTM1N", "description": "For
 
 // src/components/forms/FormField.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var FormField = (0, import_react153.forwardRef)(
-  ({ name, description, label, rules, className, children, ...props }, ref) => {
-    const { formState, control } = useFormContext();
-    const { field } = useController({ name, control, rules });
-    const errors = formState?.errors || {};
-    const errorMessage = errors[name]?.message;
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ...props, ref, className: (0, import_classnames6.default)(FormField_default.input, className), children: [
-      typeof children === "function" ? children(field) : import_react153.Children.map(
-        children,
-        (child) => child ? (0, import_react153.cloneElement)(child, { ...field, label: child.props.label || label }) : null
-      ),
-      description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: FormField_default.description, children: description }),
-      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: FormField_default.error, children: errorMessage })
-    ] });
-  }
-);
+function FormField({
+  name,
+  description,
+  label,
+  rules,
+  className,
+  children,
+  ...props
+}) {
+  const { formState, control } = useFormContext();
+  const { field } = useController({ name, control, rules });
+  const errors = formState?.errors || {};
+  const errorMessage = errors[name]?.message;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ...props, className: (0, import_classnames6.default)(FormField_default.input, className), children: [
+    typeof children === "function" ? children(field) : import_react153.Children.map(
+      children,
+      (child) => child ? (0, import_react153.cloneElement)(child, { ...field, label: child.props.label || label }) : null
+    ),
+    description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: FormField_default.description, children: description }),
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: FormField_default.error, children: errorMessage })
+  ] });
+}
 
 // src/components/Button.tsx
-var import_react154 = require("react");
 var import_classnames7 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Button.module.css
@@ -26145,35 +26150,32 @@ var Button_default = { "button": "Button_button__NDYwM", "primary": "Button_prim
 
 // src/components/Button.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var Button2 = (0, import_react154.forwardRef)(
-  ({
-    variant = "secondary",
-    size = "md",
-    asChild,
-    preventFocusOnPress = true,
-    className,
-    children,
-    ...props
-  }, ref) => {
-    const Component = asChild ? Slot : $d2b4bc8c273e7be6$export$353f5b6fc5456de1;
-    const buttonProps = Component === $d2b4bc8c273e7be6$export$353f5b6fc5456de1 ? { preventFocusOnPress } : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      Component,
-      {
-        ...props,
-        ...buttonProps,
-        ref,
-        className: (0, import_classnames7.default)(
-          Button_default.button,
-          className,
-          variant && Button_default[variant],
-          size && Button_default[size]
-        ),
-        children
-      }
-    );
-  }
-);
+function Button2({
+  variant = "secondary",
+  size = "md",
+  asChild,
+  preventFocusOnPress = true,
+  className,
+  children,
+  ...props
+}) {
+  const Component = asChild ? Slot : $d2b4bc8c273e7be6$export$353f5b6fc5456de1;
+  const buttonProps = Component === $d2b4bc8c273e7be6$export$353f5b6fc5456de1 ? { preventFocusOnPress } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    Component,
+    {
+      ...props,
+      ...buttonProps,
+      className: (0, import_classnames7.default)(
+        Button_default.button,
+        className,
+        variant && Button_default[variant],
+        size && Button_default[size]
+      ),
+      children
+    }
+  );
+}
 
 // src/components/forms/FormResetButton.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
@@ -26453,6 +26455,7 @@ function eachSafely(values, each2) {
 }
 
 // node_modules/.pnpm/@react-spring+shared@9.7.5_react@19.1.0/node_modules/@react-spring/shared/dist/react-spring_shared.modern.mjs
+var import_react154 = require("react");
 var import_react155 = require("react");
 var import_react156 = require("react");
 var import_react157 = require("react");
@@ -26460,7 +26463,6 @@ var import_react158 = require("react");
 var import_react159 = require("react");
 var import_react160 = require("react");
 var import_react161 = require("react");
-var import_react162 = require("react");
 var __defProp2 = Object.defineProperty;
 var __export2 = (target, all) => {
   for (var name in all)
@@ -27220,9 +27222,9 @@ function isAnimatedString(value) {
   return is.str(value) && (value[0] == "#" || /\d/.test(value) || // Do not identify a CSS variable as an AnimatedString if its SSR
   !isSSR() && cssVariableRegex.test(value) || value in (colors || {}));
 }
-var useIsomorphicLayoutEffect2 = isSSR() ? import_react158.useEffect : import_react158.useLayoutEffect;
+var useIsomorphicLayoutEffect2 = isSSR() ? import_react157.useEffect : import_react157.useLayoutEffect;
 var useIsMounted = () => {
-  const isMounted = (0, import_react157.useRef)(false);
+  const isMounted = (0, import_react156.useRef)(false);
   useIsomorphicLayoutEffect2(() => {
     isMounted.current = true;
     return () => {
@@ -27232,7 +27234,7 @@ var useIsMounted = () => {
   return isMounted;
 };
 function useForceUpdate() {
-  const update3 = (0, import_react156.useState)()[1];
+  const update3 = (0, import_react155.useState)()[1];
   const isMounted = useIsMounted();
   return () => {
     if (isMounted.current) {
@@ -27241,13 +27243,13 @@ function useForceUpdate() {
   };
 }
 function useMemoOne(getResult, inputs) {
-  const [initial] = (0, import_react159.useState)(
+  const [initial] = (0, import_react158.useState)(
     () => ({
       inputs,
       result: getResult()
     })
   );
-  const committed = (0, import_react159.useRef)();
+  const committed = (0, import_react158.useRef)();
   const prevCache = committed.current;
   let cache = prevCache;
   if (cache) {
@@ -27263,7 +27265,7 @@ function useMemoOne(getResult, inputs) {
   } else {
     cache = initial;
   }
-  (0, import_react159.useEffect)(() => {
+  (0, import_react158.useEffect)(() => {
     committed.current = cache;
     if (prevCache == initial) {
       initial.inputs = initial.result = void 0;
@@ -27282,22 +27284,22 @@ function areInputsEqual(next, prev) {
   }
   return true;
 }
-var useOnce = (effect) => (0, import_react160.useEffect)(effect, emptyDeps);
+var useOnce = (effect) => (0, import_react159.useEffect)(effect, emptyDeps);
 var emptyDeps = [];
 function usePrev(value) {
-  const prevRef = (0, import_react161.useRef)();
-  (0, import_react161.useEffect)(() => {
+  const prevRef = (0, import_react160.useRef)();
+  (0, import_react160.useEffect)(() => {
     prevRef.current = value;
   });
   return prevRef.current;
 }
 
 // node_modules/.pnpm/@react-spring+core@9.7.5_react@19.1.0/node_modules/@react-spring/core/dist/react-spring_core.modern.mjs
-var import_react164 = require("react");
+var import_react163 = require("react");
 
 // node_modules/.pnpm/@react-spring+animated@9.7.5_react@19.1.0/node_modules/@react-spring/animated/dist/react-spring_animated.modern.mjs
 var React4 = __toESM(require("react"), 1);
-var import_react163 = require("react");
+var import_react162 = require("react");
 var $node = Symbol.for("Animated:node");
 var isAnimated = (value) => !!value && value[$node] === value;
 var getAnimated = (owner) => owner && owner[$node];
@@ -27484,10 +27486,10 @@ var withAnimated = (Component, host2) => {
     // re-rendered on every animation frame.
     !is.fun(Component) || Component.prototype && Component.prototype.isReactComponent
   );
-  return (0, import_react163.forwardRef)((givenProps, givenRef) => {
-    const instanceRef = (0, import_react163.useRef)(null);
+  return (0, import_react162.forwardRef)((givenProps, givenRef) => {
+    const instanceRef = (0, import_react162.useRef)(null);
     const ref = hasInstance && // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, import_react163.useCallback)(
+    (0, import_react162.useCallback)(
       (value) => {
         instanceRef.current = updateRef(givenRef, value);
       },
@@ -27506,7 +27508,7 @@ var withAnimated = (Component, host2) => {
       }
     };
     const observer = new PropsObserver(callback, deps);
-    const observerRef = (0, import_react163.useRef)();
+    const observerRef = (0, import_react162.useRef)();
     useIsomorphicLayoutEffect2(() => {
       observerRef.current = observer;
       each(deps, (dep) => addFluidObserver(dep, observer));
@@ -27520,7 +27522,7 @@ var withAnimated = (Component, host2) => {
         }
       };
     });
-    (0, import_react163.useEffect)(callback, []);
+    (0, import_react162.useEffect)(callback, []);
     useOnce(() => () => {
       const observer2 = observerRef.current;
       each(observer2.deps, (dep) => removeFluidObserver(dep, observer2));
@@ -27596,11 +27598,11 @@ var getDisplayName = (arg) => is.str(arg) ? arg : arg && is.str(arg.displayName)
 
 // node_modules/.pnpm/@react-spring+core@9.7.5_react@19.1.0/node_modules/@react-spring/core/dist/react-spring_core.modern.mjs
 var React5 = __toESM(require("react"), 1);
+var import_react164 = require("react");
 var import_react165 = require("react");
-var import_react166 = require("react");
 var React22 = __toESM(require("react"), 1);
+var import_react166 = require("react");
 var import_react167 = require("react");
-var import_react168 = require("react");
 function callProp(value, ...args) {
   return is.fun(value) ? value(...args) : value;
 }
@@ -29059,7 +29061,7 @@ var SpringContext = ({
   children,
   ...props
 }) => {
-  const inherited = (0, import_react165.useContext)(ctx);
+  const inherited = (0, import_react164.useContext)(ctx);
   const pause = props.pause || !!inherited.pause, immediate = props.immediate || !!inherited.immediate;
   props = useMemoOne(() => ({ pause, immediate }), [pause, immediate]);
   const { Provider } = ctx;
@@ -29158,13 +29160,13 @@ function useTransition(data, props, deps) {
     ref: propsRef,
     config: propsConfig
   } = propsFn ? propsFn() : props;
-  const ref = (0, import_react167.useMemo)(
+  const ref = (0, import_react166.useMemo)(
     () => propsFn || arguments.length == 3 ? SpringRef() : void 0,
     []
   );
   const items = toArray(data);
   const transitions = [];
-  const usedTransitions = (0, import_react167.useRef)(null);
+  const usedTransitions = (0, import_react166.useRef)(null);
   const prevTransitions = reset ? null : usedTransitions.current;
   useIsomorphicLayoutEffect2(() => {
     usedTransitions.current = transitions;
@@ -29235,8 +29237,8 @@ function useTransition(data, props, deps) {
   const forceUpdate = useForceUpdate();
   const defaultProps = getDefaultProps(props);
   const changes = /* @__PURE__ */ new Map();
-  const exitingTransitions = (0, import_react167.useRef)(/* @__PURE__ */ new Map());
-  const forceChange = (0, import_react167.useRef)(false);
+  const exitingTransitions = (0, import_react166.useRef)(/* @__PURE__ */ new Map());
+  const forceChange = (0, import_react166.useRef)(false);
   each(transitions, (t, i) => {
     const key = t.key;
     const prevPhase = t.phase;
@@ -29326,7 +29328,7 @@ function useTransition(data, props, deps) {
       changes.set(t, { phase, springs, payload });
     }
   });
-  const context = (0, import_react167.useContext)(SpringContext);
+  const context = (0, import_react166.useContext)(SpringContext);
   const prevContext = usePrev(context);
   const hasContext = context !== prevContext && hasProps(context);
   useIsomorphicLayoutEffect2(() => {
@@ -29869,9 +29871,9 @@ var animated = host.animated;
 
 // src/components/toast/Toaster.tsx
 var import_classnames10 = __toESM(require_classnames());
-var import_react172 = require("react");
+var import_react171 = require("react");
 
-// node_modules/.pnpm/zustand@5.0.4_@types+react@_42140c18b55ae1e0eb4a005a18cf040e/node_modules/zustand/esm/vanilla.mjs
+// node_modules/.pnpm/zustand@5.0.5_@types+react@_a1d6b7db10f76afd26403e7782bb5bbf/node_modules/zustand/esm/vanilla.mjs
 var createStoreImpl = (createState) => {
   let state;
   const listeners = /* @__PURE__ */ new Set();
@@ -29895,16 +29897,16 @@ var createStoreImpl = (createState) => {
 };
 var createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
 
-// node_modules/.pnpm/zustand@5.0.4_@types+react@_42140c18b55ae1e0eb4a005a18cf040e/node_modules/zustand/esm/react.mjs
-var import_react169 = __toESM(require("react"), 1);
+// node_modules/.pnpm/zustand@5.0.5_@types+react@_a1d6b7db10f76afd26403e7782bb5bbf/node_modules/zustand/esm/react.mjs
+var import_react168 = __toESM(require("react"), 1);
 var identity = (arg) => arg;
 function useStore(api, selector = identity) {
-  const slice = import_react169.default.useSyncExternalStore(
+  const slice = import_react168.default.useSyncExternalStore(
     api.subscribe,
     () => selector(api.getState()),
     () => selector(api.getInitialState())
   );
-  import_react169.default.useDebugValue(slice);
+  import_react168.default.useDebugValue(slice);
   return slice;
 }
 var createImpl = (createState) => {
@@ -29916,12 +29918,12 @@ var createImpl = (createState) => {
 var create = (createState) => createState ? createImpl(createState) : createImpl;
 
 // src/components/hooks/useToast.ts
-var import_react171 = require("react");
+var import_react170 = require("react");
 
 // src/components/toast/ToastProvider.tsx
-var import_react170 = require("react");
+var import_react169 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var ToastContext = (0, import_react170.createContext)({});
+var ToastContext = (0, import_react169.createContext)({});
 function ToastProvider({ children, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ToastContext.Provider, { value: props, children: [
     children,
@@ -29952,7 +29954,7 @@ function displayToast(message, { duration = TOAST_DURATION, ...options } = {}) {
 }
 function useToast() {
   const { toasts } = store();
-  const config2 = (0, import_react171.useContext)(ToastContext);
+  const config2 = (0, import_react170.useContext)(ToastContext);
   const toast = (message, options) => {
     displayToast(message, { ...options, ...config2 });
   };
@@ -29966,7 +29968,7 @@ var Toaster_default = { "toaster": "Toaster_toaster__OGJjM", "position-top": "To
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function Toaster({ duration = 0, position = "bottom-right" }) {
   const { toasts } = useToast();
-  const [hovered, setHovered] = (0, import_react172.useState)(false);
+  const [hovered, setHovered] = (0, import_react171.useState)(false);
   const transitions = useTransition(toasts, {
     from: {
       opacity: 0,
@@ -29979,7 +29981,7 @@ function Toaster({ duration = 0, position = "bottom-right" }) {
     },
     config: { duration: 100 }
   });
-  (0, import_react172.useEffect)(() => {
+  (0, import_react171.useEffect)(() => {
     if (duration) {
       const timeout = setInterval(() => {
         if (hovered || !toasts.length) return;
@@ -30013,10 +30015,10 @@ function Toaster({ duration = 0, position = "bottom-right" }) {
 }
 
 // src/components/hooks/useDebounce.ts
-var import_react173 = require("react");
+var import_react172 = require("react");
 function useDebounce(value, delay) {
-  const [debouncedValue, setValue] = (0, import_react173.useState)(value);
-  (0, import_react173.useEffect)(() => {
+  const [debouncedValue, setValue] = (0, import_react172.useState)(value);
+  (0, import_react172.useEffect)(() => {
     const timer = setTimeout(() => {
       setValue(value);
     }, delay);
@@ -30028,7 +30030,7 @@ function useDebounce(value, delay) {
 }
 
 // src/components/hooks/useTheme.ts
-var import_react174 = require("react");
+var import_react173 = require("react");
 function getDefaultTheme() {
   return typeof window !== "undefined" ? window?.matchMedia("(prefers-color-scheme: dark)")?.matches ? "dark" : "light" : "light";
 }
@@ -30042,7 +30044,7 @@ function setTheme(theme) {
 }
 function useTheme(defaultTheme) {
   const { theme } = store2();
-  (0, import_react174.useEffect)(() => {
+  (0, import_react173.useEffect)(() => {
     if (defaultTheme) {
       setTheme(defaultTheme);
     }
@@ -30051,7 +30053,7 @@ function useTheme(defaultTheme) {
 }
 
 // src/components/Accordion.tsx
-var import_react175 = require("react");
+var import_react174 = require("react");
 var import_classnames12 = __toESM(require_classnames());
 
 // src/components/Text.tsx
@@ -30125,7 +30127,7 @@ function AccordionItem({
   ...props
 }) {
   const [trigger, panel] = children;
-  const [expanded, setExpanded] = (0, import_react175.useState)(defaultExpanded);
+  const [expanded, setExpanded] = (0, import_react174.useState)(defaultExpanded);
   const handleExpandedChange = (isExpanded) => {
     requestAnimationFrame(() => setExpanded(isExpanded));
   };
@@ -30299,9 +30301,6 @@ function Calendar2({
   );
 }
 
-// src/components/Checkbox.tsx
-var import_react176 = require("react");
-
 // node_modules/.pnpm/react-icons@5.5.0_react@19.1.0/node_modules/react-icons/im/index.mjs
 function ImCheckmark(props) {
   return GenIcon({ "tag": "svg", "attr": { "version": "1.1", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M13.5 2l-7.5 7.5-3.5-3.5-2.5 2.5 6 6 10-10z" }, "child": [] }] })(props);
@@ -30315,26 +30314,23 @@ var Checkbox_default = { "checkbox": "Checkbox_checkbox__OTliN", "box": "Checkbo
 
 // src/components/Checkbox.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var Checkbox2 = (0, import_react176.forwardRef)(
-  ({ label, className, children, ...props }, ref) => {
-    const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-      $bc237834342dbd75$export$48513f6b9f8ce62d,
-      {
-        ...props,
-        ref,
-        isSelected,
-        className: (0, import_classnames17.default)(Checkbox_default.checkbox, className),
-        children: ({ isIndeterminate, isSelected: isSelected2 }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: Checkbox_default.box, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { className: Checkbox_default.icon, size: "xs", children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icons.Minus, {}) : isSelected2 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ImCheckmark, {}) : null }) }),
-            children
-          ] });
-        }
+function Checkbox2({ label, className, children, ...props }) {
+  const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    $bc237834342dbd75$export$48513f6b9f8ce62d,
+    {
+      ...props,
+      isSelected,
+      className: (0, import_classnames17.default)(Checkbox_default.checkbox, className),
+      children: ({ isIndeterminate, isSelected: isSelected2 }) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: Checkbox_default.box, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { className: Checkbox_default.icon, size: "xs", children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icons.Minus, {}) : isSelected2 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ImCheckmark, {}) : null }) }),
+          children
+        ] });
       }
-    );
-  }
-);
+    }
+  );
+}
 
 // css-modules:E:\dev\umami-react-zen\src\components\Code.module.css
 var Code_default = { "code": "Code_code__NmYxN" };
@@ -30377,11 +30373,11 @@ function Container({
 }
 
 // src/components/ConfirmationDialog.tsx
-var import_react179 = require("react");
+var import_react177 = require("react");
 var import_classnames22 = __toESM(require_classnames());
 
 // src/components/TextField.tsx
-var import_react178 = require("react");
+var import_react176 = require("react");
 var import_classnames21 = __toESM(require_classnames());
 
 // src/components/Label.tsx
@@ -30397,7 +30393,7 @@ function Label2({ className, ...props }) {
 }
 
 // src/components/CopyButton.tsx
-var import_react177 = require("react");
+var import_react175 = require("react");
 var import_classnames20 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\CopyButton.module.css
@@ -30407,8 +30403,8 @@ var CopyButton_default = { "icon": "CopyButton_icon__YTM2Y", "copy-button": "Cop
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var TIMEOUT = 2e3;
 function CopyButton({ value, timeout = TIMEOUT, className, children, ...props }) {
-  const [copied, setCopied] = (0, import_react177.useState)(false);
-  const ref = (0, import_react177.useRef)(timeout);
+  const [copied, setCopied] = (0, import_react175.useState)(false);
+  const ref = (0, import_react175.useRef)(timeout);
   const handleCopy = async () => {
     if (value) {
       await navigator.clipboard.writeText(value);
@@ -30428,55 +30424,52 @@ var TextField_default = { "allowCopy": "TextField_allowCopy__Y2RhY", "icon": "Te
 
 // src/components/TextField.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
-var TextField2 = (0, import_react178.forwardRef)(
-  ({
-    value,
-    defaultValue,
-    label,
-    placeholder,
-    allowCopy,
-    asChild,
-    className,
-    onChange,
-    children,
-    ...props
-  }, ref) => {
-    const [inputValue, setInputValue] = (0, import_react178.useState)(defaultValue || value);
-    const Component = asChild ? Slot : $3985021b0ad6602f$export$f5b8910cec6cf069;
-    const handleChange = (e) => {
-      setInputValue(e.target.value);
-      return onChange?.(e);
-    };
-    (0, import_react178.useEffect)(() => {
-      setInputValue(value);
-    }, [value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-      $bcdf0525bf22703d$export$2c73285ae9390cec,
-      {
-        "aria-label": "Text",
-        ...props,
-        ref,
-        value: inputValue,
-        className: (0, import_classnames21.default)(input_default.field, className),
-        children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label2, { children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: input_default.row, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-              Component,
-              {
-                className: (0, import_classnames21.default)(TextField_default.input, input_default.input, allowCopy && TextField_default.allowCopy),
-                placeholder,
-                onChange: handleChange,
-                children
-              }
-            ),
-            allowCopy && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CopyButton, { className: (0, import_classnames21.default)(TextField_default.icon, input_default.icon), value: inputValue })
-          ] })
-        ]
-      }
-    );
-  }
-);
+function TextField2({
+  value,
+  defaultValue,
+  label,
+  placeholder,
+  allowCopy,
+  asChild,
+  className,
+  onChange,
+  children,
+  ...props
+}) {
+  const [inputValue, setInputValue] = (0, import_react176.useState)(defaultValue || value);
+  const Component = asChild ? Slot : $3985021b0ad6602f$export$f5b8910cec6cf069;
+  const handleChange = (e) => {
+    setInputValue(e.target.value);
+    return onChange?.(e);
+  };
+  (0, import_react176.useEffect)(() => {
+    setInputValue(value);
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    $bcdf0525bf22703d$export$2c73285ae9390cec,
+    {
+      "aria-label": "Text",
+      ...props,
+      value: inputValue,
+      className: (0, import_classnames21.default)(input_default.field, className),
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label2, { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: input_default.row, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            Component,
+            {
+              className: (0, import_classnames21.default)(TextField_default.input, input_default.input, allowCopy && TextField_default.allowCopy),
+              placeholder,
+              onChange: handleChange,
+              children
+            }
+          ),
+          allowCopy && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CopyButton, { className: (0, import_classnames21.default)(TextField_default.icon, input_default.icon), value: inputValue })
+        ] })
+      ]
+    }
+  );
+}
 
 // css-modules:E:\dev\umami-react-zen\src\components\ConfirmationDialog.module.css
 var ConfirmationDialog_default = { "dialog": "ConfirmationDialog_dialog__Mzg4M", "value": "ConfirmationDialog_value__YzhjZ" };
@@ -30490,7 +30483,7 @@ function ConfirmationDialog({
   children,
   ...props
 }) {
-  const [canSave, setCanSave] = (0, import_react179.useState)(false);
+  const [canSave, setCanSave] = (0, import_react177.useState)(false);
   const handleChange = (e) => {
     setCanSave(e.target.value === value);
   };
@@ -30517,7 +30510,7 @@ function ConfirmationDialog({
 
 // src/components/DataTable.tsx
 var import_classnames24 = __toESM(require_classnames());
-var import_react180 = require("react");
+var import_react178 = require("react");
 
 // src/components/Table.tsx
 var import_classnames23 = __toESM(require_classnames());
@@ -30576,11 +30569,11 @@ var DataTable_default = { "datatable": "DataTable_datatable__MWRkN", "cell": "Da
 
 // src/components/DataTable.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var import_react181 = require("react");
+var import_react179 = require("react");
 function DataTable({ data = [], className, children, ...props }) {
   const items = data.length && data?.[0]?.id === void 0 ? data.map((row, id) => ({ ...row, id })) : data;
   const widths = [];
-  const columns = import_react180.Children.map(children, (child) => {
+  const columns = import_react178.Children.map(children, (child) => {
     widths.push(child?.props?.width || "1fr");
     return { ...child.props };
   });
@@ -30590,7 +30583,7 @@ function DataTable({ data = [], className, children, ...props }) {
       if (hidden) {
         return null;
       }
-      return /* @__PURE__ */ (0, import_react181.createElement)(TableColumn, { ...columnProps, key: id, id }, label);
+      return /* @__PURE__ */ (0, import_react179.createElement)(TableColumn, { ...columnProps, key: id, id }, label);
     }) }),
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableBody, { children: items.map((row, index) => {
       return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableRow, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns.map(({ id, as, hidden, className: className2, children: children2, ...cellProps }) => {
@@ -30598,14 +30591,14 @@ function DataTable({ data = [], className, children, ...props }) {
           return null;
         }
         const value = typeof children2 === "function" ? children2(row) : children2 || row[id];
-        return /* @__PURE__ */ (0, import_react181.createElement)(
+        return /* @__PURE__ */ (0, import_react179.createElement)(
           TableCell,
           {
             ...cellProps,
             key: id,
             className: (0, import_classnames24.default)(DataTable_default.cell, className2)
           },
-          as ? (0, import_react180.createElement)(as, {}, value) : value
+          as ? (0, import_react178.createElement)(as, {}, value) : value
         );
       }) }, index);
     }) })
@@ -30632,7 +30625,7 @@ function Dots({ className, ...props }) {
 }
 
 // src/components/FloatingTooltip.tsx
-var import_react182 = require("react");
+var import_react180 = require("react");
 var import_classnames27 = __toESM(require_classnames());
 
 // src/components/Tooltip.tsx
@@ -30659,8 +30652,8 @@ var FloatingTooltip_default = { "floating": "FloatingTooltip_floating__ZjM4N" };
 // src/components/FloatingTooltip.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function FloatingTooltip({ className, style, children, ...props }) {
-  const [position, setPosition] = (0, import_react182.useState)({ x: -1e3, y: -1e3 });
-  (0, import_react182.useEffect)(() => {
+  const [position, setPosition] = (0, import_react180.useState)({ x: -1e3, y: -1e3 });
+  (0, import_react180.useEffect)(() => {
     const handler = (e) => {
       setPosition({ x: e.clientX, y: e.clientY });
     };
@@ -30754,7 +30747,7 @@ function Heading2({
 }
 
 // src/components/HoverTrigger.tsx
-var import_react183 = require("react");
+var import_react181 = require("react");
 
 // css-modules:E:\dev\umami-react-zen\src\components\HoverTrigger.module.css
 var HoverTrigger_default = { "wrapper": "HoverTrigger_wrapper__NGFlN" };
@@ -30770,12 +30763,12 @@ function HoverTrigger({
   children
 }) {
   const [triggerElement, popupElement] = children;
-  const triggerRef = (0, import_react183.useRef)(null);
-  const [open, setOpen] = (0, import_react183.useState)(isOpen);
-  const isOverMenu = (0, import_react183.useRef)(false);
-  const isOverButton = (0, import_react183.useRef)(false);
-  const timeout = (0, import_react183.useRef)(null);
-  (0, import_react183.useEffect)(() => {
+  const triggerRef = (0, import_react181.useRef)(null);
+  const [open, setOpen] = (0, import_react181.useState)(isOpen);
+  const isOverMenu = (0, import_react181.useRef)(false);
+  const isOverButton = (0, import_react181.useRef)(false);
+  const timeout = (0, import_react181.useRef)(null);
+  (0, import_react181.useEffect)(() => {
     if (isOpen !== open) {
       setOpen(isOpen);
     }
@@ -30865,7 +30858,7 @@ function Image({
 }
 
 // src/components/InlineEditField.tsx
-var import_react184 = require("react");
+var import_react182 = require("react");
 var import_classnames31 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\InlineEditField.module.css
@@ -30884,8 +30877,8 @@ function InlineEditField({
   onCancel,
   ...props
 }) {
-  const [value, setValue] = (0, import_react184.useState)(defaultValue);
-  const [edit, setEdit] = (0, import_react184.useState)(defaultEdit);
+  const [value, setValue] = (0, import_react182.useState)(defaultValue);
+  const [edit, setEdit] = (0, import_react182.useState)(defaultEdit);
   const handleEdit = () => setEdit(true);
   const handleChange = (e) => {
     const val = e.target.value;
@@ -30896,7 +30889,7 @@ function InlineEditField({
     setEdit(false);
     onCommit?.(value);
   };
-  const handleCancel = (0, import_react184.useCallback)(() => {
+  const handleCancel = (0, import_react182.useCallback)(() => {
     setEdit(false);
     setValue(defaultValue);
     onCancel?.();
@@ -30935,7 +30928,7 @@ function InlineEditField({
 }
 
 // src/components/List.tsx
-var import_react185 = require("react");
+var import_react183 = require("react");
 var import_classnames32 = __toESM(require_classnames());
 
 // src/lib/constants.ts
@@ -31007,7 +31000,7 @@ function List({
       children: children || items?.map((item) => {
         const id = item[idProperty] || item.toString();
         const label = item[labelProperty] || item.toString();
-        return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react185.Fragment, { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react183.Fragment, { children: [
           item[separatorProperty] && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)($431f98aba6844401$export$1ff3c3f08ae963c0, { className: List_default.separator }),
           /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ListItem, { id, className: List_default.item, children: label })
         ] }, id);
@@ -31073,21 +31066,16 @@ var import_jsx_runtime44 = require("react/jsx-runtime");
 function Menu2({ className, children, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)($3674c52c6b3c5bce$export$d9b273488cd8ce6f, { ...props, className: (0, import_classnames34.default)(Menu_default.menu, className), children });
 }
-function MenuItem2({ children, className, ...props }) {
+function MenuItem2({ showChecked = false, children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)($3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ...props, className: (0, import_classnames34.default)(Menu_default.item, className), children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { "aria-hidden": "true", className: Menu_default.check, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icons.Check, {}) }) })
+    showChecked && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { "aria-hidden": "true", className: Menu_default.check, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icons.Check, {}) }) })
   ] });
 }
 function MenuSeparator({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)($431f98aba6844401$export$1ff3c3f08ae963c0, { ...props, className: (0, import_classnames34.default)(Menu_default.separator, className) });
 }
-function MenuSection({
-  title,
-  className,
-  children,
-  ...props
-}) {
+function MenuSection({ title, className, children, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)($3674c52c6b3c5bce$export$4b1545b4f2016d26, { ...props, className: (0, import_classnames34.default)(Menu_default.section, className), children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)($72a5793c14baf454$export$8b251419efc915eb, { className: Menu_default.header, children: title }),
     children
@@ -31117,7 +31105,7 @@ function Modal2({
 }
 
 // src/components/Navbar.tsx
-var import_react186 = require("react");
+var import_react184 = require("react");
 var import_classnames36 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Navbar.module.css
@@ -31125,16 +31113,16 @@ var Navbar_default = { "nav": "Navbar_nav__ZjEwM", "item": "Navbar_item__MWVhZ",
 
 // src/components/Navbar.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
-var NavbarContext = (0, import_react186.createContext)(void 0);
+var NavbarContext = (0, import_react184.createContext)(void 0);
 var useNavigationContext = () => {
-  const context = (0, import_react186.useContext)(NavbarContext);
+  const context = (0, import_react184.useContext)(NavbarContext);
   if (!context) {
     throw new Error("useNavigationContext must be used within a Navbar");
   }
   return context;
 };
 function Navbar({ showArrow = true, className, children, ...props }) {
-  const [activeMenu, setActiveMenu] = (0, import_react186.useState)("");
+  const [activeMenu, setActiveMenu] = (0, import_react184.useState)("");
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(NavbarContext.Provider, { value: { activeMenu, setActiveMenu }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ...props, className: (0, import_classnames36.default)(Navbar_default.nav, className), children }) });
 }
 function NavbarItem({ label, children, className, ...props }) {
@@ -31175,7 +31163,7 @@ function NavMenuItem({ isSelected, className, children, ...props }) {
 }
 
 // src/components/PasswordField.tsx
-var import_react187 = require("react");
+var import_react185 = require("react");
 var import_classnames38 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\PasswordField.module.css
@@ -31183,20 +31171,18 @@ var PasswordField_default = { "icon": "PasswordField_icon__NTRlM" };
 
 // src/components/PasswordField.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
-var PasswordField = (0, import_react187.forwardRef)(
-  ({ label, className, ...props }, ref) => {
-    const [show, setShow] = (0, import_react187.useState)(false);
-    const type = show ? "text" : "password";
-    const handleShowPassword = () => setShow((state) => !state);
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)($bcdf0525bf22703d$export$2c73285ae9390cec, { ...props, ref, className: (0, import_classnames38.default)(input_default.field, className), children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Label2, { children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: input_default.row, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)($3985021b0ad6602f$export$f5b8910cec6cf069, { type, className: input_default.input }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icon, { onClick: handleShowPassword, className: (0, import_classnames38.default)(PasswordField_default.icon, input_default.icon), children: show ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icons.EyeSlash, {}) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icons.Eye, {}) })
-      ] })
-    ] });
-  }
-);
+function PasswordField({ label, className, ...props }) {
+  const [show, setShow] = (0, import_react185.useState)(false);
+  const type = show ? "text" : "password";
+  const handleShowPassword = () => setShow((state) => !state);
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)($bcdf0525bf22703d$export$2c73285ae9390cec, { ...props, className: (0, import_classnames38.default)(input_default.field, className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Label2, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: input_default.row, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)($3985021b0ad6602f$export$f5b8910cec6cf069, { type, className: input_default.input }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icon, { onClick: handleShowPassword, className: (0, import_classnames38.default)(PasswordField_default.icon, input_default.icon), children: show ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icons.EyeSlash, {}) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icons.Eye, {}) })
+    ] })
+  ] });
+}
 
 // src/components/Popover.tsx
 var import_classnames39 = __toESM(require_classnames());
@@ -31261,7 +31247,6 @@ function ProgressCircle({ className, showValue, ...props }) {
 }
 
 // src/components/RadioGroup.tsx
-var import_react188 = require("react");
 var import_classnames42 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\RadioGroup.module.css
@@ -31269,20 +31254,18 @@ var RadioGroup_default = { "radiogroup": "RadioGroup_radiogroup__ZjI3O", "radio"
 
 // src/components/RadioGroup.tsx
 var import_jsx_runtime52 = require("react/jsx-runtime");
-var RadioGroup2 = (0, import_react188.forwardRef)(
-  ({ label, children, className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, ref, className: (0, import_classnames42.default)(RadioGroup_default.radiogroup, className), children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Label2, { children: label }),
-      children
-    ] });
-  }
-);
+function RadioGroup2({ label, children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, className: (0, import_classnames42.default)(RadioGroup_default.radiogroup, className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Label2, { children: label }),
+    children
+  ] });
+}
 function Radio2({ children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)($b6c3ddc6086f204d$export$d7b12c4107be0d61, { ...props, className: (0, import_classnames42.default)(RadioGroup_default.radio, className), children });
 }
 
 // src/components/SearchField.tsx
-var import_react189 = require("react");
+var import_react186 = require("react");
 var import_classnames43 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\SearchField.module.css
@@ -31290,139 +31273,141 @@ var SearchField_default = { "search": "SearchField_search__MzkwY", "input": "Sea
 
 // src/components/SearchField.tsx
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var SearchField2 = (0, import_react189.forwardRef)(
-  ({ label, placeholder, value, delay = 0, onSearch, className, ...props }, ref) => {
-    const [search, setSearch] = (0, import_react189.useState)(value ?? "");
-    const searchValue = useDebounce(search, delay);
-    const handleChange = (value2) => {
-      setSearch(value2);
-      if (delay === 0 || value2 === "") {
-        onSearch?.(value2);
-      }
-    };
-    const resetSearch = () => {
-      setSearch("");
-      onSearch?.("");
-    };
-    (0, import_react189.useEffect)(() => {
-      if (delay > 0) {
-        onSearch?.(searchValue);
-      }
-    }, [searchValue, delay]);
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-      $440f4836bcb56932$export$b94867ecbd698f21,
-      {
-        "aria-label": "Search",
-        ...props,
-        ref,
-        className: (0, import_classnames43.default)(input_default.field, className),
-        onChange: handleChange,
-        children: ({ state }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Label2, { children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: input_default.row, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { className: (0, import_classnames43.default)(SearchField_default.search, input_default.icon), children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icons.MagnifyingGlass, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-                $3985021b0ad6602f$export$f5b8910cec6cf069,
-                {
-                  className: (0, import_classnames43.default)(SearchField_default.input, input_default.input),
-                  placeholder
-                }
-              ),
-              state.value && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-                $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
-                {
-                  className: (0, import_classnames43.default)(SearchField_default.close, input_default.icon),
-                  onPress: resetSearch,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icons.Close, {}) })
-                }
-              )
-            ] })
-          ] });
-        }
-      }
-    );
-  }
-);
-
-// src/components/Select.tsx
-var import_react190 = require("react");
-var import_jsx_runtime54 = require("react/jsx-runtime");
-var Select2 = (0, import_react190.forwardRef)(
-  ({
-    items = [],
-    value,
-    defaultValue,
-    label,
-    isLoading,
-    allowSearch,
-    searchValue,
-    searchDelay,
-    onSearch,
-    onSelectionChange,
-    onChange,
-    buttonProps,
-    listProps,
-    popoverProps,
-    renderValue,
-    className,
-    children,
-    ...props
-  }, ref) => {
-    const [search, setSearch] = (0, import_react190.useState)("");
-    const handleChange = (e) => {
-      onSelectionChange?.(e);
-      onChange?.(e);
-    };
-    const handleSearch = (value2) => {
-      setSearch(value2);
+function SearchField2({
+  label,
+  placeholder,
+  value,
+  delay = 0,
+  onSearch,
+  className,
+  ...props
+}) {
+  const [search, setSearch] = (0, import_react186.useState)(value ?? "");
+  const searchValue = useDebounce(search, delay);
+  const handleChange = (value2) => {
+    setSearch(value2);
+    if (delay === 0 || value2 === "") {
       onSearch?.(value2);
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
-      $82d7e5349645de74$export$ef9b1a59e592288f,
-      {
-        "aria-label": "Select",
-        ...props,
-        ref,
-        selectedKey: value,
-        defaultSelectedKey: defaultValue,
-        onSelectionChange: handleChange,
-        children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Label2, { children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Button2, { variant: "outline", ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Row, { justifyContent: "space-between", gap: "3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)($82d7e5349645de74$export$e288731fd71264f0, { children: renderValue }),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon, { rotate: 90, size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icons.Chevron, {}) }) })
-          ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Popover2, { ...popoverProps, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Column, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Box, { padding: "2", border: true, borderRadius: true, backgroundColor: true, shadow: "3", children: [
-            allowSearch && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Box, { marginBottom: "2", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-              SearchField2,
+    }
+  };
+  const resetSearch = () => {
+    setSearch("");
+    onSearch?.("");
+  };
+  (0, import_react186.useEffect)(() => {
+    if (delay > 0) {
+      onSearch?.(searchValue);
+    }
+  }, [searchValue, delay]);
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    $440f4836bcb56932$export$b94867ecbd698f21,
+    {
+      ...props,
+      "aria-label": "Search",
+      className: (0, import_classnames43.default)(input_default.field, className),
+      onChange: handleChange,
+      children: ({ state }) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Label2, { children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: input_default.row, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { className: (0, import_classnames43.default)(SearchField_default.search, input_default.icon), children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icons.MagnifyingGlass, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              $3985021b0ad6602f$export$f5b8910cec6cf069,
               {
-                value: search,
-                onSearch: handleSearch,
-                delay: searchDelay,
-                defaultValue: searchValue,
-                autoFocus: true
+                className: (0, import_classnames43.default)(SearchField_default.input, input_default.input),
+                placeholder
               }
-            ) }),
-            isLoading && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Loading, { icon: "dots", position: "center", size: "sm" }),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-              List,
+            ),
+            state.value && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
               {
-                ...listProps,
-                items,
-                style: { ...listProps?.style, display: isLoading ? "none" : void 0 },
-                children
+                className: (0, import_classnames43.default)(SearchField_default.close, input_default.icon),
+                onPress: resetSearch,
+                children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icons.Close, {}) })
               }
             )
-          ] }) }) })
-        ]
+          ] })
+        ] });
       }
-    );
-  }
-);
+    }
+  );
+}
+
+// src/components/Select.tsx
+var import_react187 = require("react");
+var import_jsx_runtime54 = require("react/jsx-runtime");
+function Select2({
+  items = [],
+  value,
+  defaultValue,
+  label,
+  isLoading,
+  allowSearch,
+  searchValue,
+  searchDelay,
+  onSearch,
+  onSelectionChange,
+  onChange,
+  buttonProps,
+  listProps,
+  popoverProps,
+  renderValue,
+  className,
+  children,
+  ...props
+}) {
+  const [search, setSearch] = (0, import_react187.useState)("");
+  const handleChange = (e) => {
+    onSelectionChange?.(e);
+    onChange?.(e);
+  };
+  const handleSearch = (value2) => {
+    setSearch(value2);
+    onSearch?.(value2);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+    $82d7e5349645de74$export$ef9b1a59e592288f,
+    {
+      "aria-label": "Select",
+      ...props,
+      selectedKey: value,
+      defaultSelectedKey: defaultValue,
+      onSelectionChange: handleChange,
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Label2, { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Button2, { variant: "outline", ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Row, { justifyContent: "space-between", gap: "3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)($82d7e5349645de74$export$e288731fd71264f0, { children: renderValue }),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon, { rotate: 90, size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icons.Chevron, {}) }) })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Popover2, { ...popoverProps, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Column, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Box, { padding: "2", border: true, borderRadius: true, backgroundColor: true, shadow: "3", children: [
+          allowSearch && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Box, { marginBottom: "2", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            SearchField2,
+            {
+              value: search,
+              onSearch: handleSearch,
+              delay: searchDelay,
+              defaultValue: searchValue,
+              autoFocus: true
+            }
+          ) }),
+          isLoading && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Loading, { icon: "dots", position: "center", size: "sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            List,
+            {
+              ...listProps,
+              items,
+              style: { ...listProps?.style, display: isLoading ? "none" : void 0 },
+              children
+            }
+          )
+        ] }) }) })
+      ]
+    }
+  );
+}
 
 // src/components/Sidebar.tsx
-var import_react191 = require("react");
+var import_react188 = require("react");
 var import_classnames44 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Sidebar.module.css
@@ -31430,7 +31415,7 @@ var Sidebar_default = { "sidenav": "Sidebar_sidenav__ODc2Z", "header": "Sidebar_
 
 // src/components/Sidebar.tsx
 var import_jsx_runtime55 = require("react/jsx-runtime");
-var SidebarContext = (0, import_react191.createContext)(null);
+var SidebarContext = (0, import_react188.createContext)(null);
 function Sidebar({
   variant = "1",
   isCollapsed,
@@ -31486,7 +31471,7 @@ function SidebarItem({
   children,
   ...props
 }) {
-  const { isCollapsed } = (0, import_react191.useContext)(SidebarContext);
+  const { isCollapsed } = (0, import_react188.useContext)(SidebarContext);
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)($4e3b923658d69c60$export$8c610744efcf8a1d, { delay: 0, closeDelay: 0, isDisabled: !isCollapsed, children: [
     /* @__PURE__ */ (0, import_jsx_runtime55.jsx)($f645667febf57a63$export$35a3bebf7ef2d934, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       Row,
@@ -31505,7 +31490,6 @@ function SidebarItem({
 }
 
 // src/components/Slider.tsx
-var import_react192 = require("react");
 var import_classnames45 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Slider.module.css
@@ -31513,31 +31497,29 @@ var Slider_default = { "slider": "Slider_slider__MjBhO", "header": "Slider_heade
 
 // src/components/Slider.tsx
 var import_jsx_runtime56 = require("react/jsx-runtime");
-var Slider2 = (0, import_react192.forwardRef)(
-  ({ className, showValue = true, label, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)($6f909507e6374d18$export$472062a354075cee, { ...props, ref, className: (0, import_classnames45.default)(Slider_default.slider, className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: Slider_default.header, children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Label2, { className: Slider_default.label, children: label }),
-        showValue && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)($6f909507e6374d18$export$a590f758a961cb5b, { className: Slider_default.output })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
-        const isHorizontal = state.orientation === "horizontal";
-        return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-            "div",
-            {
-              className: Slider_default.fill,
-              style: {
-                [isHorizontal ? "width" : "height"]: (isHorizontal ? state.getThumbPercent(0) : 1 - state.getThumbPercent(0)) * 100 + "%"
-              }
+function Slider2({ className, showValue = true, label, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)($6f909507e6374d18$export$472062a354075cee, { ...props, className: (0, import_classnames45.default)(Slider_default.slider, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: Slider_default.header, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Label2, { className: Slider_default.label, children: label }),
+      showValue && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)($6f909507e6374d18$export$a590f758a961cb5b, { className: Slider_default.output })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
+      const isHorizontal = state.orientation === "horizontal";
+      return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          "div",
+          {
+            className: Slider_default.fill,
+            style: {
+              [isHorizontal ? "width" : "height"]: (isHorizontal ? state.getThumbPercent(0) : 1 - state.getThumbPercent(0)) * 100 + "%"
             }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)($6f909507e6374d18$export$2c1b491743890dec, { className: Slider_default.thumb })
-        ] });
-      } })
-    ] });
-  }
-);
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)($6f909507e6374d18$export$2c1b491743890dec, { className: Slider_default.thumb })
+      ] });
+    } })
+  ] });
+}
 
 // src/components/StatusLight.tsx
 var import_classnames46 = __toESM(require_classnames());
@@ -31562,7 +31544,6 @@ function StatusLight(props) {
 }
 
 // src/components/Switch.tsx
-var import_react193 = require("react");
 var import_classnames47 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Switch.module.css
@@ -31570,27 +31551,24 @@ var Switch_default = { "switch": "Switch_switch__NzI0O", "track": "Switch_track_
 
 // src/components/Switch.tsx
 var import_jsx_runtime58 = require("react/jsx-runtime");
-var Switch2 = (0, import_react193.forwardRef)(
-  ({ label, children, className, ...props }, ref) => {
-    const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Label2, { children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
-        $8e59e948500a8fe1$export$b5d5cf8927ab7262,
-        {
-          ...props,
-          isSelected,
-          ref,
-          className: (0, import_classnames47.default)(Switch_default.switch, className),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: Switch_default.track, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: Switch_default.knob }) }),
-            children
-          ]
-        }
-      )
-    ] });
-  }
-);
+function Switch2({ label, children, className, ...props }) {
+  const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Label2, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+      $8e59e948500a8fe1$export$b5d5cf8927ab7262,
+      {
+        ...props,
+        isSelected,
+        className: (0, import_classnames47.default)(Switch_default.switch, className),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: Switch_default.track, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: Switch_default.knob }) }),
+          children
+        ]
+      }
+    )
+  ] });
+}
 
 // css-modules:E:\dev\umami-react-zen\src\components\Tabs.module.css
 var Tabs_default = { "tabs": "Tabs_tabs__OWVjO", "list": "Tabs_list__YWRjM", "tab": "Tabs_tab__ZjgwM", "quiet": "Tabs_quiet__ZTQ1O" };
@@ -31611,7 +31589,6 @@ function TabPanel2({ children, ...props }) {
 }
 
 // src/components/TextArea.tsx
-var import_react194 = require("react");
 var import_classnames48 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\TextArea.module.css
@@ -31619,20 +31596,17 @@ var TextArea_default = { "textarea": "TextArea_textarea__MTk5Y", "resize-none":
 
 // src/components/TextArea.tsx
 var import_jsx_runtime60 = require("react/jsx-runtime");
-var TextArea2 = (0, import_react194.forwardRef)(
-  ({ rows, cols, resize, className, style, children, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-      TextField2,
-      {
-        ...props,
-        ref,
-        className: (0, import_classnames48.default)(resize && TextArea_default[`resize-${resize}`]),
-        asChild: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)($216918bed6669f72$export$f5c9f3c2c4054eec, { rows, cols, style: { ...style }, children })
-      }
-    );
-  }
-);
+function TextArea2({
+  rows,
+  cols,
+  resize,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TextField2, { ...props, className: (0, import_classnames48.default)(resize && TextArea_default[`resize-${resize}`]), asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)($216918bed6669f72$export$f5c9f3c2c4054eec, { rows, cols, style: { ...style }, children }) });
+}
 
 // src/components/ThemeButton.tsx
 var import_classnames49 = __toESM(require_classnames());
@@ -31685,7 +31659,6 @@ function ThemeButton({
 }
 
 // src/components/Toggle.tsx
-var import_react195 = require("react");
 var import_classnames50 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Toggle.module.css
@@ -31693,24 +31666,21 @@ var Toggle_default = { "toggle": "Toggle_toggle__OWVjZ" };
 
 // src/components/Toggle.tsx
 var import_jsx_runtime62 = require("react/jsx-runtime");
-var Toggle = (0, import_react195.forwardRef)(
-  ({ label, children, className, ...props }, ref) => {
-    const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Label2, { children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-        $efde0372d7a700fe$export$d2b052e7b4be1756,
-        {
-          ...props,
-          ref,
-          isSelected,
-          className: (0, import_classnames50.default)(Toggle_default.toggle, className),
-          children
-        }
-      )
-    ] });
-  }
-);
+function Toggle({ label, children, className, ...props }) {
+  const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Label2, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      $efde0372d7a700fe$export$d2b052e7b4be1756,
+      {
+        ...props,
+        isSelected,
+        className: (0, import_classnames50.default)(Toggle_default.toggle, className),
+        children
+      }
+    )
+  ] });
+}
 
 // src/components/ToggleGroup.tsx
 var import_classnames51 = __toESM(require_classnames());