@umami/react-zen 0.116.0 → 0.118.0

package/dist/index.mjs

@@ -25996,7 +25996,7 @@ function FormButtons({ fill, children, ...props }) {
 }
 
 // src/components/forms/FormField.tsx
-import { cloneElement as cloneElement2, forwardRef, Children } from "react";
+import { cloneElement as cloneElement2, Children } from "react";
 var import_classnames6 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\forms\FormField.module.css
@@ -26004,25 +26004,30 @@ var FormField_default = { "field": "FormField_field__YTM1N", "description": "For
 
 // src/components/forms/FormField.tsx
 import { jsx as jsx9, jsxs as jsxs3 } 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_classnames6.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__ */ jsx9("div", { className: FormField_default.description, children: description }),
-      errorMessage && /* @__PURE__ */ jsx9("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__ */ jsxs3("div", { ...props, className: (0, import_classnames6.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__ */ jsx9("div", { className: FormField_default.description, children: description }),
+    errorMessage && /* @__PURE__ */ jsx9("div", { className: FormField_default.error, children: errorMessage })
+  ] });
+}
 
 // src/components/Button.tsx
-import { forwardRef as forwardRef2 } from "react";
 var import_classnames7 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Button.module.css
@@ -26030,35 +26035,32 @@ var Button_default = { "button": "Button_button__NDYwM", "primary": "Button_prim
 
 // src/components/Button.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
-var Button2 = forwardRef2(
-  ({
-    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__ */ jsx10(
-      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__ */ jsx10(
+    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
 import { jsx as jsx11 } from "react/jsx-runtime";
@@ -27182,7 +27184,7 @@ import { useContext as useContext2, useMemo, useRef as useRef6 } from "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
 import * as React4 from "react";
-import { forwardRef as forwardRef3, useRef as useRef5, useCallback, useEffect as useEffect5 } from "react";
+import { forwardRef, useRef as useRef5, useCallback, useEffect as useEffect5 } from "react";
 var $node = Symbol.for("Animated:node");
 var isAnimated = (value) => !!value && value[$node] === value;
 var getAnimated = (owner) => owner && owner[$node];
@@ -27369,7 +27371,7 @@ var withAnimated = (Component, host2) => {
     // re-rendered on every animation frame.
     !is.fun(Component) || Component.prototype && Component.prototype.isReactComponent
   );
-  return forwardRef3((givenProps, givenRef) => {
+  return forwardRef((givenProps, givenRef) => {
     const instanceRef = useRef5(null);
     const ref = hasInstance && // eslint-disable-next-line react-hooks/rules-of-hooks
     useCallback(
@@ -29756,7 +29758,7 @@ var animated = host.animated;
 var import_classnames10 = __toESM(require_classnames());
 import { useEffect as useEffect6, useState as useState5 } from "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();
@@ -29780,7 +29782,7 @@ 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
+// node_modules/.pnpm/zustand@5.0.5_@types+react@_a1d6b7db10f76afd26403e7782bb5bbf/node_modules/zustand/esm/react.mjs
 import React6 from "react";
 var identity = (arg) => arg;
 function useStore(api, selector = identity) {
@@ -30184,9 +30186,6 @@ function Calendar2({
   );
 }
 
-// src/components/Checkbox.tsx
-import { forwardRef as forwardRef4 } from "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);
@@ -30200,26 +30199,23 @@ var Checkbox_default = { "checkbox": "Checkbox_checkbox__OTliN", "box": "Checkbo
 
 // src/components/Checkbox.tsx
 import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
-var Checkbox2 = forwardRef4(
-  ({ label, className, children, ...props }, ref) => {
-    const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-    return /* @__PURE__ */ jsx25(
-      $bc237834342dbd75$export$48513f6b9f8ce62d,
-      {
-        ...props,
-        ref,
-        isSelected,
-        className: (0, import_classnames17.default)(Checkbox_default.checkbox, className),
-        children: ({ isIndeterminate, isSelected: isSelected2 }) => {
-          return /* @__PURE__ */ jsxs13(Fragment3, { children: [
-            /* @__PURE__ */ jsx25("div", { className: Checkbox_default.box, children: /* @__PURE__ */ jsx25(Icon, { className: Checkbox_default.icon, size: "xs", children: isIndeterminate ? /* @__PURE__ */ jsx25(Icons.Minus, {}) : isSelected2 ? /* @__PURE__ */ jsx25(ImCheckmark, {}) : null }) }),
-            children
-          ] });
-        }
+function Checkbox2({ label, className, children, ...props }) {
+  const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
+  return /* @__PURE__ */ jsx25(
+    $bc237834342dbd75$export$48513f6b9f8ce62d,
+    {
+      ...props,
+      isSelected,
+      className: (0, import_classnames17.default)(Checkbox_default.checkbox, className),
+      children: ({ isIndeterminate, isSelected: isSelected2 }) => {
+        return /* @__PURE__ */ jsxs13(Fragment3, { children: [
+          /* @__PURE__ */ jsx25("div", { className: Checkbox_default.box, children: /* @__PURE__ */ jsx25(Icon, { className: Checkbox_default.icon, size: "xs", children: isIndeterminate ? /* @__PURE__ */ jsx25(Icons.Minus, {}) : isSelected2 ? /* @__PURE__ */ jsx25(ImCheckmark, {}) : null }) }),
+          children
+        ] });
       }
-    );
-  }
-);
+    }
+  );
+}
 
 // css-modules:E:\dev\umami-react-zen\src\components\Code.module.css
 var Code_default = { "code": "Code_code__NmYxN" };
@@ -30266,7 +30262,7 @@ var import_classnames22 = __toESM(require_classnames());
 import { useState as useState10 } from "react";
 
 // src/components/TextField.tsx
-import { useEffect as useEffect9, useState as useState9, forwardRef as forwardRef5 } from "react";
+import { useEffect as useEffect9, useState as useState9 } from "react";
 var import_classnames21 = __toESM(require_classnames());
 
 // src/components/Label.tsx
@@ -30313,55 +30309,52 @@ var TextField_default = { "allowCopy": "TextField_allowCopy__Y2RhY", "icon": "Te
 
 // src/components/TextField.tsx
 import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
-var TextField2 = forwardRef5(
-  ({
-    value,
-    defaultValue,
-    label,
-    placeholder,
-    allowCopy,
-    asChild,
-    className,
-    onChange,
-    children,
-    ...props
-  }, ref) => {
-    const [inputValue, setInputValue] = useState9(defaultValue || value);
-    const Component = asChild ? Slot : $3985021b0ad6602f$export$f5b8910cec6cf069;
-    const handleChange = (e) => {
-      setInputValue(e.target.value);
-      return onChange?.(e);
-    };
-    useEffect9(() => {
-      setInputValue(value);
-    }, [value]);
-    return /* @__PURE__ */ jsxs14(
-      $bcdf0525bf22703d$export$2c73285ae9390cec,
-      {
-        "aria-label": "Text",
-        ...props,
-        ref,
-        value: inputValue,
-        className: (0, import_classnames21.default)(input_default.field, className),
-        children: [
-          label && /* @__PURE__ */ jsx30(Label2, { children: label }),
-          /* @__PURE__ */ jsxs14("div", { className: input_default.row, children: [
-            /* @__PURE__ */ jsx30(
-              Component,
-              {
-                className: (0, import_classnames21.default)(TextField_default.input, input_default.input, allowCopy && TextField_default.allowCopy),
-                placeholder,
-                onChange: handleChange,
-                children
-              }
-            ),
-            allowCopy && /* @__PURE__ */ jsx30(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] = useState9(defaultValue || value);
+  const Component = asChild ? Slot : $3985021b0ad6602f$export$f5b8910cec6cf069;
+  const handleChange = (e) => {
+    setInputValue(e.target.value);
+    return onChange?.(e);
+  };
+  useEffect9(() => {
+    setInputValue(value);
+  }, [value]);
+  return /* @__PURE__ */ jsxs14(
+    $bcdf0525bf22703d$export$2c73285ae9390cec,
+    {
+      "aria-label": "Text",
+      ...props,
+      value: inputValue,
+      className: (0, import_classnames21.default)(input_default.field, className),
+      children: [
+        label && /* @__PURE__ */ jsx30(Label2, { children: label }),
+        /* @__PURE__ */ jsxs14("div", { className: input_default.row, children: [
+          /* @__PURE__ */ jsx30(
+            Component,
+            {
+              className: (0, import_classnames21.default)(TextField_default.input, input_default.input, allowCopy && TextField_default.allowCopy),
+              placeholder,
+              onChange: handleChange,
+              children
+            }
+          ),
+          allowCopy && /* @__PURE__ */ jsx30(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" };
@@ -30958,21 +30951,16 @@ import { jsx as jsx44, jsxs as jsxs23 } from "react/jsx-runtime";
 function Menu2({ className, children, ...props }) {
   return /* @__PURE__ */ jsx44($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__ */ jsxs23($3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ...props, className: (0, import_classnames34.default)(Menu_default.item, className), children: [
     children,
-    /* @__PURE__ */ jsx44("div", { "aria-hidden": "true", className: Menu_default.check, children: /* @__PURE__ */ jsx44(Icon, { children: /* @__PURE__ */ jsx44(Icons.Check, {}) }) })
+    showChecked && /* @__PURE__ */ jsx44("div", { "aria-hidden": "true", className: Menu_default.check, children: /* @__PURE__ */ jsx44(Icon, { children: /* @__PURE__ */ jsx44(Icons.Check, {}) }) })
   ] });
 }
 function MenuSeparator({ className, ...props }) {
   return /* @__PURE__ */ jsx44($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__ */ jsxs23($3674c52c6b3c5bce$export$4b1545b4f2016d26, { ...props, className: (0, import_classnames34.default)(Menu_default.section, className), children: [
     title && /* @__PURE__ */ jsx44($72a5793c14baf454$export$8b251419efc915eb, { className: Menu_default.header, children: title }),
     children
@@ -31064,7 +31052,7 @@ function NavMenuItem({ isSelected, className, children, ...props }) {
 }
 
 // src/components/PasswordField.tsx
-import { useState as useState15, forwardRef as forwardRef6 } from "react";
+import { useState as useState15 } from "react";
 var import_classnames38 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\PasswordField.module.css
@@ -31072,20 +31060,18 @@ var PasswordField_default = { "icon": "PasswordField_icon__NTRlM" };
 
 // src/components/PasswordField.tsx
 import { jsx as jsx48, jsxs as jsxs25 } from "react/jsx-runtime";
-var PasswordField = forwardRef6(
-  ({ label, className, ...props }, ref) => {
-    const [show, setShow] = useState15(false);
-    const type = show ? "text" : "password";
-    const handleShowPassword = () => setShow((state) => !state);
-    return /* @__PURE__ */ jsxs25($bcdf0525bf22703d$export$2c73285ae9390cec, { ...props, ref, className: (0, import_classnames38.default)(input_default.field, className), children: [
-      label && /* @__PURE__ */ jsx48(Label2, { children: label }),
-      /* @__PURE__ */ jsxs25("div", { className: input_default.row, children: [
-        /* @__PURE__ */ jsx48($3985021b0ad6602f$export$f5b8910cec6cf069, { type, className: input_default.input }),
-        /* @__PURE__ */ jsx48(Icon, { onClick: handleShowPassword, className: (0, import_classnames38.default)(PasswordField_default.icon, input_default.icon), children: show ? /* @__PURE__ */ jsx48(Icons.EyeSlash, {}) : /* @__PURE__ */ jsx48(Icons.Eye, {}) })
-      ] })
-    ] });
-  }
-);
+function PasswordField({ label, className, ...props }) {
+  const [show, setShow] = useState15(false);
+  const type = show ? "text" : "password";
+  const handleShowPassword = () => setShow((state) => !state);
+  return /* @__PURE__ */ jsxs25($bcdf0525bf22703d$export$2c73285ae9390cec, { ...props, className: (0, import_classnames38.default)(input_default.field, className), children: [
+    label && /* @__PURE__ */ jsx48(Label2, { children: label }),
+    /* @__PURE__ */ jsxs25("div", { className: input_default.row, children: [
+      /* @__PURE__ */ jsx48($3985021b0ad6602f$export$f5b8910cec6cf069, { type, className: input_default.input }),
+      /* @__PURE__ */ jsx48(Icon, { onClick: handleShowPassword, className: (0, import_classnames38.default)(PasswordField_default.icon, input_default.icon), children: show ? /* @__PURE__ */ jsx48(Icons.EyeSlash, {}) : /* @__PURE__ */ jsx48(Icons.Eye, {}) })
+    ] })
+  ] });
+}
 
 // src/components/Popover.tsx
 var import_classnames39 = __toESM(require_classnames());
@@ -31150,7 +31136,6 @@ function ProgressCircle({ className, showValue, ...props }) {
 }
 
 // src/components/RadioGroup.tsx
-import { forwardRef as forwardRef7 } from "react";
 var import_classnames42 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\RadioGroup.module.css
@@ -31158,20 +31143,18 @@ var RadioGroup_default = { "radiogroup": "RadioGroup_radiogroup__ZjI3O", "radio"
 
 // src/components/RadioGroup.tsx
 import { jsx as jsx52, jsxs as jsxs28 } from "react/jsx-runtime";
-var RadioGroup2 = forwardRef7(
-  ({ label, children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs28($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, ref, className: (0, import_classnames42.default)(RadioGroup_default.radiogroup, className), children: [
-      label && /* @__PURE__ */ jsx52(Label2, { children: label }),
-      children
-    ] });
-  }
-);
+function RadioGroup2({ label, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs28($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, className: (0, import_classnames42.default)(RadioGroup_default.radiogroup, className), children: [
+    label && /* @__PURE__ */ jsx52(Label2, { children: label }),
+    children
+  ] });
+}
 function Radio2({ children, className, ...props }) {
   return /* @__PURE__ */ jsx52($b6c3ddc6086f204d$export$d7b12c4107be0d61, { ...props, className: (0, import_classnames42.default)(RadioGroup_default.radio, className), children });
 }
 
 // src/components/SearchField.tsx
-import { useState as useState16, useEffect as useEffect12, forwardRef as forwardRef8 } from "react";
+import { useState as useState16, useEffect as useEffect12 } from "react";
 var import_classnames43 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\SearchField.module.css
@@ -31179,136 +31162,138 @@ var SearchField_default = { "search": "SearchField_search__MzkwY", "input": "Sea
 
 // src/components/SearchField.tsx
 import { Fragment as Fragment9, jsx as jsx53, jsxs as jsxs29 } from "react/jsx-runtime";
-var SearchField2 = forwardRef8(
-  ({ label, placeholder, value, delay = 0, onSearch, className, ...props }, ref) => {
-    const [search, setSearch] = useState16(value ?? "");
-    const searchValue = useDebounce(search, delay);
-    const handleChange = (value2) => {
-      setSearch(value2);
-      if (delay === 0 || value2 === "") {
-        onSearch?.(value2);
-      }
-    };
-    const resetSearch = () => {
-      setSearch("");
-      onSearch?.("");
-    };
-    useEffect12(() => {
-      if (delay > 0) {
-        onSearch?.(searchValue);
-      }
-    }, [searchValue, delay]);
-    return /* @__PURE__ */ jsx53(
-      $440f4836bcb56932$export$b94867ecbd698f21,
-      {
-        "aria-label": "Search",
-        ...props,
-        ref,
-        className: (0, import_classnames43.default)(input_default.field, className),
-        onChange: handleChange,
-        children: ({ state }) => {
-          return /* @__PURE__ */ jsxs29(Fragment9, { children: [
-            label && /* @__PURE__ */ jsx53(Label2, { children: label }),
-            /* @__PURE__ */ jsxs29("div", { className: input_default.row, children: [
-              /* @__PURE__ */ jsx53(Icon, { className: (0, import_classnames43.default)(SearchField_default.search, input_default.icon), children: /* @__PURE__ */ jsx53(Icons.MagnifyingGlass, {}) }),
-              /* @__PURE__ */ jsx53(
-                $3985021b0ad6602f$export$f5b8910cec6cf069,
-                {
-                  className: (0, import_classnames43.default)(SearchField_default.input, input_default.input),
-                  placeholder
-                }
-              ),
-              state.value && /* @__PURE__ */ jsx53(
-                $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
-                {
-                  className: (0, import_classnames43.default)(SearchField_default.close, input_default.icon),
-                  onPress: resetSearch,
-                  children: /* @__PURE__ */ jsx53(Icon, { size: "sm", children: /* @__PURE__ */ jsx53(Icons.Close, {}) })
-                }
-              )
-            ] })
-          ] });
-        }
-      }
-    );
-  }
-);
-
-// src/components/Select.tsx
-import { forwardRef as forwardRef9, useState as useState17 } from "react";
-import { jsx as jsx54, jsxs as jsxs30 } from "react/jsx-runtime";
-var Select2 = forwardRef9(
-  ({
-    items = [],
-    value,
-    defaultValue,
-    label,
-    isLoading,
-    allowSearch,
-    searchValue,
-    searchDelay,
-    onSearch,
-    onSelectionChange,
-    onChange,
-    buttonProps,
-    listProps,
-    popoverProps,
-    renderValue,
-    className,
-    children,
-    ...props
-  }, ref) => {
-    const [search, setSearch] = useState17("");
-    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] = useState16(value ?? "");
+  const searchValue = useDebounce(search, delay);
+  const handleChange = (value2) => {
+    setSearch(value2);
+    if (delay === 0 || value2 === "") {
       onSearch?.(value2);
-    };
-    return /* @__PURE__ */ jsxs30(
-      $82d7e5349645de74$export$ef9b1a59e592288f,
-      {
-        "aria-label": "Select",
-        ...props,
-        ref,
-        selectedKey: value,
-        defaultSelectedKey: defaultValue,
-        onSelectionChange: handleChange,
-        children: [
-          label && /* @__PURE__ */ jsx54(Label2, { children: label }),
-          /* @__PURE__ */ jsx54(Button2, { variant: "outline", ...buttonProps, children: /* @__PURE__ */ jsxs30(Row, { justifyContent: "space-between", gap: "3", children: [
-            /* @__PURE__ */ jsx54($82d7e5349645de74$export$e288731fd71264f0, { children: renderValue }),
-            /* @__PURE__ */ jsx54("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx54(Icon, { rotate: 90, size: "xs", children: /* @__PURE__ */ jsx54(Icons.Chevron, {}) }) })
-          ] }) }),
-          /* @__PURE__ */ jsx54(Popover2, { ...popoverProps, children: /* @__PURE__ */ jsx54(Column, { children: /* @__PURE__ */ jsxs30(Box, { padding: "2", border: true, borderRadius: true, backgroundColor: true, shadow: "3", children: [
-            allowSearch && /* @__PURE__ */ jsx54(Box, { marginBottom: "2", children: /* @__PURE__ */ jsx54(
-              SearchField2,
+    }
+  };
+  const resetSearch = () => {
+    setSearch("");
+    onSearch?.("");
+  };
+  useEffect12(() => {
+    if (delay > 0) {
+      onSearch?.(searchValue);
+    }
+  }, [searchValue, delay]);
+  return /* @__PURE__ */ jsx53(
+    $440f4836bcb56932$export$b94867ecbd698f21,
+    {
+      ...props,
+      "aria-label": "Search",
+      className: (0, import_classnames43.default)(input_default.field, className),
+      onChange: handleChange,
+      children: ({ state }) => {
+        return /* @__PURE__ */ jsxs29(Fragment9, { children: [
+          label && /* @__PURE__ */ jsx53(Label2, { children: label }),
+          /* @__PURE__ */ jsxs29("div", { className: input_default.row, children: [
+            /* @__PURE__ */ jsx53(Icon, { className: (0, import_classnames43.default)(SearchField_default.search, input_default.icon), children: /* @__PURE__ */ jsx53(Icons.MagnifyingGlass, {}) }),
+            /* @__PURE__ */ jsx53(
+              $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__ */ jsx54(Loading, { icon: "dots", position: "center", size: "sm" }),
-            /* @__PURE__ */ jsx54(
-              List,
+            ),
+            state.value && /* @__PURE__ */ jsx53(
+              $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__ */ jsx53(Icon, { size: "sm", children: /* @__PURE__ */ jsx53(Icons.Close, {}) })
               }
             )
-          ] }) }) })
-        ]
+          ] })
+        ] });
       }
-    );
-  }
-);
+    }
+  );
+}
+
+// src/components/Select.tsx
+import { useState as useState17 } from "react";
+import { jsx as jsx54, jsxs as jsxs30 } from "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] = useState17("");
+  const handleChange = (e) => {
+    onSelectionChange?.(e);
+    onChange?.(e);
+  };
+  const handleSearch = (value2) => {
+    setSearch(value2);
+    onSearch?.(value2);
+  };
+  return /* @__PURE__ */ jsxs30(
+    $82d7e5349645de74$export$ef9b1a59e592288f,
+    {
+      "aria-label": "Select",
+      ...props,
+      selectedKey: value,
+      defaultSelectedKey: defaultValue,
+      onSelectionChange: handleChange,
+      children: [
+        label && /* @__PURE__ */ jsx54(Label2, { children: label }),
+        /* @__PURE__ */ jsx54(Button2, { variant: "outline", ...buttonProps, children: /* @__PURE__ */ jsxs30(Row, { justifyContent: "space-between", gap: "3", children: [
+          /* @__PURE__ */ jsx54($82d7e5349645de74$export$e288731fd71264f0, { children: renderValue }),
+          /* @__PURE__ */ jsx54("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx54(Icon, { rotate: 90, size: "xs", children: /* @__PURE__ */ jsx54(Icons.Chevron, {}) }) })
+        ] }) }),
+        /* @__PURE__ */ jsx54(Popover2, { ...popoverProps, children: /* @__PURE__ */ jsx54(Column, { children: /* @__PURE__ */ jsxs30(Box, { padding: "2", border: true, borderRadius: true, backgroundColor: true, shadow: "3", children: [
+          allowSearch && /* @__PURE__ */ jsx54(Box, { marginBottom: "2", children: /* @__PURE__ */ jsx54(
+            SearchField2,
+            {
+              value: search,
+              onSearch: handleSearch,
+              delay: searchDelay,
+              defaultValue: searchValue,
+              autoFocus: true
+            }
+          ) }),
+          isLoading && /* @__PURE__ */ jsx54(Loading, { icon: "dots", position: "center", size: "sm" }),
+          /* @__PURE__ */ jsx54(
+            List,
+            {
+              ...listProps,
+              items,
+              style: { ...listProps?.style, display: isLoading ? "none" : void 0 },
+              children
+            }
+          )
+        ] }) }) })
+      ]
+    }
+  );
+}
 
 // src/components/Sidebar.tsx
 var import_classnames44 = __toESM(require_classnames());
@@ -31394,7 +31379,6 @@ function SidebarItem({
 }
 
 // src/components/Slider.tsx
-import { forwardRef as forwardRef10 } from "react";
 var import_classnames45 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Slider.module.css
@@ -31402,31 +31386,29 @@ var Slider_default = { "slider": "Slider_slider__MjBhO", "header": "Slider_heade
 
 // src/components/Slider.tsx
 import { Fragment as Fragment10, jsx as jsx56, jsxs as jsxs32 } from "react/jsx-runtime";
-var Slider2 = forwardRef10(
-  ({ className, showValue = true, label, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs32($6f909507e6374d18$export$472062a354075cee, { ...props, ref, className: (0, import_classnames45.default)(Slider_default.slider, className), children: [
-      /* @__PURE__ */ jsxs32("div", { className: Slider_default.header, children: [
-        label && /* @__PURE__ */ jsx56(Label2, { className: Slider_default.label, children: label }),
-        showValue && /* @__PURE__ */ jsx56($6f909507e6374d18$export$a590f758a961cb5b, { className: Slider_default.output })
-      ] }),
-      /* @__PURE__ */ jsx56($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
-        const isHorizontal = state.orientation === "horizontal";
-        return /* @__PURE__ */ jsxs32(Fragment10, { children: [
-          /* @__PURE__ */ jsx56(
-            "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__ */ jsxs32($6f909507e6374d18$export$472062a354075cee, { ...props, className: (0, import_classnames45.default)(Slider_default.slider, className), children: [
+    /* @__PURE__ */ jsxs32("div", { className: Slider_default.header, children: [
+      label && /* @__PURE__ */ jsx56(Label2, { className: Slider_default.label, children: label }),
+      showValue && /* @__PURE__ */ jsx56($6f909507e6374d18$export$a590f758a961cb5b, { className: Slider_default.output })
+    ] }),
+    /* @__PURE__ */ jsx56($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
+      const isHorizontal = state.orientation === "horizontal";
+      return /* @__PURE__ */ jsxs32(Fragment10, { children: [
+        /* @__PURE__ */ jsx56(
+          "div",
+          {
+            className: Slider_default.fill,
+            style: {
+              [isHorizontal ? "width" : "height"]: (isHorizontal ? state.getThumbPercent(0) : 1 - state.getThumbPercent(0)) * 100 + "%"
             }
-          ),
-          /* @__PURE__ */ jsx56($6f909507e6374d18$export$2c1b491743890dec, { className: Slider_default.thumb })
-        ] });
-      } })
-    ] });
-  }
-);
+          }
+        ),
+        /* @__PURE__ */ jsx56($6f909507e6374d18$export$2c1b491743890dec, { className: Slider_default.thumb })
+      ] });
+    } })
+  ] });
+}
 
 // src/components/StatusLight.tsx
 var import_classnames46 = __toESM(require_classnames());
@@ -31451,7 +31433,6 @@ function StatusLight(props) {
 }
 
 // src/components/Switch.tsx
-import { forwardRef as forwardRef11 } from "react";
 var import_classnames47 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Switch.module.css
@@ -31459,27 +31440,24 @@ var Switch_default = { "switch": "Switch_switch__NzI0O", "track": "Switch_track_
 
 // src/components/Switch.tsx
 import { Fragment as Fragment11, jsx as jsx58, jsxs as jsxs34 } from "react/jsx-runtime";
-var Switch2 = forwardRef11(
-  ({ label, children, className, ...props }, ref) => {
-    const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-    return /* @__PURE__ */ jsxs34(Fragment11, { children: [
-      label && /* @__PURE__ */ jsx58(Label2, { children: label }),
-      /* @__PURE__ */ jsxs34(
-        $8e59e948500a8fe1$export$b5d5cf8927ab7262,
-        {
-          ...props,
-          isSelected,
-          ref,
-          className: (0, import_classnames47.default)(Switch_default.switch, className),
-          children: [
-            /* @__PURE__ */ jsx58("div", { className: Switch_default.track, children: /* @__PURE__ */ jsx58("div", { className: Switch_default.knob }) }),
-            children
-          ]
-        }
-      )
-    ] });
-  }
-);
+function Switch2({ label, children, className, ...props }) {
+  const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
+  return /* @__PURE__ */ jsxs34(Fragment11, { children: [
+    label && /* @__PURE__ */ jsx58(Label2, { children: label }),
+    /* @__PURE__ */ jsxs34(
+      $8e59e948500a8fe1$export$b5d5cf8927ab7262,
+      {
+        ...props,
+        isSelected,
+        className: (0, import_classnames47.default)(Switch_default.switch, className),
+        children: [
+          /* @__PURE__ */ jsx58("div", { className: Switch_default.track, children: /* @__PURE__ */ jsx58("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" };
@@ -31501,27 +31479,23 @@ function TabPanel2({ children, ...props }) {
 
 // src/components/TextArea.tsx
 var import_classnames48 = __toESM(require_classnames());
-import { forwardRef as forwardRef12 } from "react";
 
 // css-modules:E:\dev\umami-react-zen\src\components\TextArea.module.css
 var TextArea_default = { "textarea": "TextArea_textarea__MTk5Y", "resize-none": "TextArea_resize-none__OTJhY", "resize-horizontal": "TextArea_resize-horizontal__YWIyZ", "resize-vertical": "TextArea_resize-vertical__NTM3O" };
 
 // src/components/TextArea.tsx
 import { jsx as jsx60 } from "react/jsx-runtime";
-var TextArea2 = forwardRef12(
-  ({ rows, cols, resize, className, style, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx60(
-      TextField2,
-      {
-        ...props,
-        ref,
-        className: (0, import_classnames48.default)(resize && TextArea_default[`resize-${resize}`]),
-        asChild: true,
-        children: /* @__PURE__ */ jsx60($216918bed6669f72$export$f5c9f3c2c4054eec, { rows, cols, style: { ...style }, children })
-      }
-    );
-  }
-);
+function TextArea2({
+  rows,
+  cols,
+  resize,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx60(TextField2, { ...props, className: (0, import_classnames48.default)(resize && TextArea_default[`resize-${resize}`]), asChild: true, children: /* @__PURE__ */ jsx60($216918bed6669f72$export$f5c9f3c2c4054eec, { rows, cols, style: { ...style }, children }) });
+}
 
 // src/components/ThemeButton.tsx
 var import_classnames49 = __toESM(require_classnames());
@@ -31574,7 +31548,6 @@ function ThemeButton({
 }
 
 // src/components/Toggle.tsx
-import { forwardRef as forwardRef13 } from "react";
 var import_classnames50 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Toggle.module.css
@@ -31582,24 +31555,21 @@ var Toggle_default = { "toggle": "Toggle_toggle__OWVjZ" };
 
 // src/components/Toggle.tsx
 import { Fragment as Fragment12, jsx as jsx62, jsxs as jsxs36 } from "react/jsx-runtime";
-var Toggle = forwardRef13(
-  ({ label, children, className, ...props }, ref) => {
-    const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-    return /* @__PURE__ */ jsxs36(Fragment12, { children: [
-      label && /* @__PURE__ */ jsx62(Label2, { children: label }),
-      /* @__PURE__ */ jsx62(
-        $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__ */ jsxs36(Fragment12, { children: [
+    label && /* @__PURE__ */ jsx62(Label2, { children: label }),
+    /* @__PURE__ */ jsx62(
+      $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());