@umami/react-zen 0.131.0 → 0.133.0

package/dist/index.js

@@ -26357,55 +26357,70 @@ function FormField({
 }) {
   const context = useFormContext();
   const { formState, control } = context;
-  const controller = useController({ name, control, rules });
-  const { field } = controller;
   const errors = formState?.errors || {};
   const errorMessage = errors[name]?.message;
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ...props, className: (0, import_classnames6.default)(FormField_default.input, className), children: [
-    import_react153.Children.map(
-      typeof children === "function" ? children({ context, controller }) : children,
-      (child) => child ? (0, import_react153.cloneElement)(child, { ...field, label: child.props.label || label }) : null
-    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FormController, { name, control, rules, children: ({ field }) => {
+      return import_react153.Children.map(
+        typeof children === "function" ? children({ ...context }) : children,
+        (child) => child ? (0, import_react153.cloneElement)(child, { ...field, label: child.props.label || label }) : null
+      );
+    } }),
     description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: FormField_default.description, children: description }),
     errorMessage && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: FormField_default.error, children: errorMessage })
   ] });
 }
 
 // src/components/forms/FormFieldArray.tsx
+var import_classnames8 = __toESM(require_classnames());
+
+// src/components/Label.tsx
 var import_classnames7 = __toESM(require_classnames());
+
+// css-modules:E:\dev\umami-react-zen\src\components\Label.module.css
+var Label_default = { "label": "Label_label__YWE3M" };
+
+// src/components/Label.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
+function Label2({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)($01b77f81d0f07f68$export$b04be29aa201d4f5, { ...props, className: (0, import_classnames7.default)(Label_default.label, className) });
+}
+
+// src/components/forms/FormFieldArray.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function FormFieldArray({
   name,
   description,
   label,
+  rules,
   className,
   children,
   ...props
 }) {
   const context = useFormContext();
-  const { control, formState } = context;
+  const { formState, control } = context;
   const fieldProps = useFieldArray({
     control,
     name
   });
   const errors = formState?.errors || {};
   const errorMessage = errors[name]?.message;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ...props, className: (0, import_classnames7.default)(FormField_default.input, className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Label2, { children: label }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: FormField_default.description, children: description }),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: FormField_default.error, children: errorMessage }),
-    children({ context, ...fieldProps })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ...props, className: (0, import_classnames8.default)(FormField_default.input, className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label2, { children: label }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: FormField_default.description, children: description }),
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: FormField_default.error, children: errorMessage }),
+    children({ ...context, ...fieldProps })
   ] });
 }
 
 // src/components/Button.tsx
-var import_classnames8 = __toESM(require_classnames());
+var import_classnames9 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Button.module.css
 var Button_default = { "button": "Button_button__YTAxZ", "primary": "Button_primary__NDFlY", "outline": "Button_outline__ZjQ3O", "quiet": "Button_quiet__ZWYwN", "danger": "Button_danger__YTg1M", "sm": "Button_sm__ZTAwM", "md": "Button_md__MDNjZ", "lg": "Button_lg__Njc0N", "xl": "Button_xl__MmUxM" };
 
 // src/components/Button.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function Button2({
   variant = "secondary",
   size = "md",
@@ -26417,12 +26432,12 @@ function Button2({
 }) {
   const Component = asChild ? Slot : $d2b4bc8c273e7be6$export$353f5b6fc5456de1;
   const buttonProps = Component === $d2b4bc8c273e7be6$export$353f5b6fc5456de1 ? { preventFocusOnPress } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     Component,
     {
       ...props,
       ...buttonProps,
-      className: (0, import_classnames8.default)(
+      className: (0, import_classnames9.default)(
         Button_default.button,
         className,
         variant && Button_default[variant],
@@ -26434,44 +26449,44 @@ function Button2({
 }
 
 // src/components/forms/FormResetButton.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function FormResetButton({ values = {}, children, onPress, ...props }) {
   const { reset } = useFormContext();
   const handleReset = (e) => {
     reset(values);
     onPress?.(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button2, { ...props, type: "reset", onPress: handleReset, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button2, { ...props, type: "reset", onPress: handleReset, children });
 }
 
 // src/components/Spinner.tsx
-var import_classnames9 = __toESM(require_classnames());
+var import_classnames10 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Spinner.module.css
 var Spinner_default = { "spinner": "Spinner_spinner__MmRhN", "spinner-rotate": "Spinner_spinner-rotate__MDI2M", "track": "Spinner_track__ODIyN", "fill": "Spinner_fill__OGY5Y", "spinner-dash": "Spinner_spinner-dash__ZDE2N", "size-sm": "Spinner_size-sm__YWEwM", "size-md": "Spinner_size-md__NThiM", "size-lg": "Spinner_size-lg__MDEzN", "size-xl": "Spinner_size-xl__ZTNkN", "quiet": "Spinner_quiet__ZGJlM", "disabled": "Spinner_disabled__YjdjY" };
 
 // src/components/Spinner.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function Spinner(props) {
   const { size = "lg", quiet, className, isDisabled, ...domProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "div",
     {
       ...domProps,
-      className: (0, import_classnames9.default)(Spinner_default.spinner, className, Spinner_default[`size-${size}`], {
+      className: (0, import_classnames10.default)(Spinner_default.spinner, className, Spinner_default[`size-${size}`], {
         [Spinner_default.quiet]: quiet,
         [Spinner_default.disabled]: isDisabled
       }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { viewBox: "25 25 50 50", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { className: Spinner_default.track, cx: "50", cy: "50", r: "20" }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { className: Spinner_default.fill, cx: "50", cy: "50", r: "20" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { viewBox: "25 25 50 50", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { className: Spinner_default.track, cx: "50", cy: "50", r: "20" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { className: Spinner_default.fill, cx: "50", cy: "50", r: "20" })
       ] })
     }
   );
 }
 
 // src/components/LoadingButton.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function LoadingButton({
   isLoading,
   isDisabled,
@@ -26479,14 +26494,14 @@ function LoadingButton({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Button2, { ...props, isDisabled, children: [
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon2, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Spinner, { isDisabled }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Button2, { ...props, isDisabled, children: [
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon2, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Spinner, { isDisabled }) }),
     showText && children
   ] });
 }
 
 // src/components/forms/FormSubmitButton.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function FormSubmitButton({
   variant = "primary",
   isDisabled,
@@ -26497,7 +26512,7 @@ function FormSubmitButton({
   const {
     formState: { isDirty, isValid, isSubmitting, isSubmitted, isSubmitSuccessful }
   } = useFormContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     LoadingButton,
     {
       ...props,
@@ -26511,13 +26526,13 @@ function FormSubmitButton({
 }
 
 // src/components/toast/Toast.tsx
-var import_classnames10 = __toESM(require_classnames());
+var import_classnames11 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\toast\Toast.module.css
 var Toast_default = { "toast": "Toast_toast__ODE0M", "icon": "Toast_icon__ZmRlO", "title": "Toast_title__OGFiM", "description": "Toast_description__OTAxY", "action": "Toast_action__YzYxM", "close": "Toast_close__ZmMzM", "success": "Toast_success__Y2ZhZ", "error": "Toast_error__YzE0Y" };
 
 // src/components/toast/Toast.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var TOAST_CLOSE_ACTION = "close";
 function Toast({
   id,
@@ -26532,11 +26547,11 @@ function Toast({
   ...props
 }) {
   const hasActions = actions?.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ...props, className: (0, import_classnames10.default)(Toast_default.toast, className, variant && Toast_default[variant]), children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: Toast_default.title, children: title }),
-    message && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: Toast_default.description, children: message }),
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ...props, className: (0, import_classnames11.default)(Toast_default.toast, className, variant && Toast_default[variant]), children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: Toast_default.title, children: title }),
+    message && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: Toast_default.description, children: message }),
     hasActions && actions.map((action) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         Button2,
         {
           variant: "outline",
@@ -26547,7 +26562,7 @@ function Toast({
         action
       );
     }),
-    !hasActions && allowClose && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    !hasActions && allowClose && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       Icon2,
       {
         "aria-hidden": true,
@@ -26555,7 +26570,7 @@ function Toast({
         size: "sm",
         className: Toast_default.close,
         onClick: () => onClose?.(TOAST_CLOSE_ACTION),
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(X, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(X, {})
       }
     )
   ] });
@@ -30135,7 +30150,7 @@ var host = createHost(primitives, {
 var animated = host.animated;
 
 // src/components/toast/Toaster.tsx
-var import_classnames11 = __toESM(require_classnames());
+var import_classnames12 = __toESM(require_classnames());
 var import_react171 = require("react");
 
 // node_modules/.pnpm/zustand@5.0.5_@types+react@_a1d6b7db10f76afd26403e7782bb5bbf/node_modules/zustand/esm/vanilla.mjs
@@ -30187,12 +30202,12 @@ var import_react170 = require("react");
 
 // src/components/toast/ToastProvider.tsx
 var import_react169 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var ToastContext = (0, import_react169.createContext)({});
 function ToastProvider({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(ToastContext.Provider, { value: props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ToastContext.Provider, { value: props, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Toaster, { ...props })
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Toaster, { ...props })
   ] });
 }
 
@@ -30230,7 +30245,7 @@ function useToast() {
 var Toaster_default = { "toaster": "Toaster_toaster__OGJjM", "position-top": "Toaster_position-top__Y2YyM", "position-top-right": "Toaster_position-top-right__Y2I1Y", "position-top-left": "Toaster_position-top-left__ZGZlM", "position-bottom": "Toaster_position-bottom__NjJmM", "position-bottom-right": "Toaster_position-bottom-right__MGVjY", "position-bottom-left": "Toaster_position-bottom-left__ODBhZ", "position-left": "Toaster_position-left__MWMzM", "position-right": "Toaster_position-right__YWYzZ" };
 
 // src/components/toast/Toaster.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function Toaster({ duration = 0, position = "bottom-right" }) {
   const { toasts } = useToast();
   const [hovered, setHovered] = (0, import_react171.useState)(false);
@@ -30262,17 +30277,17 @@ function Toaster({ duration = 0, position = "bottom-right" }) {
       };
     }
   }, [duration, toasts, hovered]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
-      className: (0, import_classnames11.default)(Toaster_default.toaster, Toaster_default[`position-${position}`]),
+      className: (0, import_classnames12.default)(Toaster_default.toaster, Toaster_default[`position-${position}`]),
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
       children: transitions((style, item) => {
         const { id, ...props } = item;
         return (
           // @ts-ignore
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(animated.div, { style, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Toast, { ...props, id, onClose: () => removeToast(id) }) }, id)
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(animated.div, { style, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Toast, { ...props, id, onClose: () => removeToast(id) }) }, id)
         );
       })
     }
@@ -30319,16 +30334,16 @@ function useTheme(defaultTheme) {
 
 // src/components/Accordion.tsx
 var import_react174 = require("react");
-var import_classnames13 = __toESM(require_classnames());
+var import_classnames14 = __toESM(require_classnames());
 
 // src/components/Text.tsx
-var import_classnames12 = __toESM(require_classnames());
+var import_classnames13 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Text.module.css
 var Text_default = { "truncate": "Text_truncate__NjQ2M", "italic": "Text_italic__MmI4Y", "underline": "Text_underline__MzZmN", "strikethrough": "Text_strikethrough__ZTg3Y" };
 
 // src/components/Text.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function Text({
   color,
   size,
@@ -30358,11 +30373,11 @@ function Text({
     textTransform: transform,
     color
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     Component,
     {
       ...props,
-      className: (0, import_classnames12.default)(
+      className: (0, import_classnames13.default)(
         Text_default.text,
         className,
         classes,
@@ -30381,9 +30396,9 @@ function Text({
 var Accordion_default = { "accordion": "Accordion_accordion__ODg3O", "item": "Accordion_item__ZDU3Z", "button": "Accordion_button__MTRiY", "icon": "Accordion_icon__NDMwM", "panel": "Accordion_panel__OTQ4M", "expanded": "Accordion_expanded__ODY0N" };
 
 // src/components/Accordion.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function Accordion({ className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)($28f4fd908f0de97f$export$944aceb4f8c89f10, { ...props, className: (0, import_classnames13.default)(Accordion_default.accordion, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)($28f4fd908f0de97f$export$944aceb4f8c89f10, { ...props, className: (0, import_classnames14.default)(Accordion_default.accordion, className), children });
 }
 function AccordionItem({
   defaultExpanded,
@@ -30396,43 +30411,43 @@ function AccordionItem({
   const handleExpandedChange = (isExpanded) => {
     requestAnimationFrame(() => setExpanded(isExpanded));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     $28f4fd908f0de97f$export$74a362b31437ec83,
     {
       ...props,
-      className: (0, import_classnames13.default)(Accordion_default.item, className),
+      className: (0, import_classnames14.default)(Accordion_default.item, className),
       onExpandedChange: handleExpandedChange,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Button2, { slot: "trigger", className: Accordion_default.button, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text, { children: trigger }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon2, { className: Accordion_default.icon, size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChevronRight, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Button2, { slot: "trigger", className: Accordion_default.button, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text, { children: trigger }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon2, { className: Accordion_default.icon, size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChevronRight, {}) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)($28f4fd908f0de97f$export$feabaa331e1d464c, { className: (0, import_classnames13.default)(Accordion_default.panel, expanded && Accordion_default.expanded), children: panel })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)($28f4fd908f0de97f$export$feabaa331e1d464c, { className: (0, import_classnames14.default)(Accordion_default.panel, expanded && Accordion_default.expanded), children: panel })
       ]
     }
   );
 }
 
 // src/components/AlertDialog.tsx
-var import_classnames15 = __toESM(require_classnames());
+var import_classnames16 = __toESM(require_classnames());
 
 // src/components/Dialog.tsx
-var import_classnames14 = __toESM(require_classnames());
+var import_classnames15 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Dialog.module.css
 var Dialog_default = { "dialog": "Dialog_dialog__YzZhN", "title": "Dialog_title__NjZlN", "modal": "Dialog_modal__YjEzN", "menu": "Dialog_menu__ZmFhN", "sheet": "Dialog_sheet__NzkxM" };
 
 // src/components/Dialog.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function Dialog2({ title, variant = "modal", children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     $de32f1b87079253c$export$3ddf2d174ce01153,
     {
       ...props,
-      className: (0, import_classnames14.default)(Dialog_default.dialog, variant && Dialog_default[variant], className),
+      className: (0, import_classnames15.default)(Dialog_default.dialog, variant && Dialog_default[variant], className),
       children: (dialogProps) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: Dialog_default.title, children: title }),
+        return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: Dialog_default.title, children: title }),
           typeof children === "function" ? children(dialogProps) : children
         ] });
       }
@@ -30441,16 +30456,16 @@ function Dialog2({ title, variant = "modal", children, className, ...props }) {
 }
 
 // src/components/Column.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function Column({ reverse, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Flexbox, { ...props, direction: reverse ? "column-reverse" : "column", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Flexbox, { ...props, direction: reverse ? "column-reverse" : "column", children });
 }
 
 // css-modules:E:\dev\umami-react-zen\src\components\AlertDialog.module.css
 var AlertDialog_default = { "dialog": "AlertDialog_dialog__OTkwN", "title": "AlertDialog_title__ZGIwY" };
 
 // src/components/AlertDialog.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function AlertDialog({
   title,
   description,
@@ -30472,12 +30487,12 @@ function AlertDialog({
     onCancel?.();
     close();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Dialog2, { ...props, title, className: (0, import_classnames15.default)(AlertDialog_default.dialog, className), children: ({ close }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Column, { gap: "4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Dialog2, { ...props, title, className: (0, import_classnames16.default)(AlertDialog_default.dialog, className), children: ({ close }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Column, { gap: "4", children: [
       typeof children === "function" ? children({ close }) : children,
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Row, { gap: "3", justifyContent: "end", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button2, { onPress: () => handleClose(close), children: cancelLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Row, { gap: "3", justifyContent: "end", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button2, { onPress: () => handleClose(close), children: cancelLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           Button2,
           {
             variant: isDanger ? "danger" : "primary",
@@ -30495,32 +30510,32 @@ function AlertDialog({
 var Blockquote_default = { "blockquote": "Blockquote_blockquote__MzZmO" };
 
 // src/components/Blockquote.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function Blockquote({ asChild, children }) {
   const Component = asChild ? Slot : "blockquote";
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Component, { className: Blockquote_default.blockquote, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Component, { className: Blockquote_default.blockquote, children });
 }
 
 // src/components/Breadcrumbs.tsx
-var import_classnames16 = __toESM(require_classnames());
+var import_classnames17 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Breadcrumbs.module.css
 var Breadcrumbs_default = { "breadcrumbs": "Breadcrumbs_breadcrumbs__OTJlN", "breadcrumb": "Breadcrumbs_breadcrumb__YjU2O", "icon": "Breadcrumbs_icon__MWFiY" };
 
 // src/components/Breadcrumbs.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function Breadcrumbs2({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)($778035c5624f61e7$export$2dc68d50d56fbbd, { ...props, className: (0, import_classnames16.default)(Breadcrumbs_default.breadcrumbs, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)($778035c5624f61e7$export$2dc68d50d56fbbd, { ...props, className: (0, import_classnames17.default)(Breadcrumbs_default.breadcrumbs, className), children });
 }
 function Breadcrumb2({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)($778035c5624f61e7$export$dabcc1ec9dd9d1cc, { ...props, className: (0, import_classnames16.default)(Breadcrumbs_default.breadcrumb, className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)($778035c5624f61e7$export$dabcc1ec9dd9d1cc, { ...props, className: (0, import_classnames17.default)(Breadcrumbs_default.breadcrumb, className), children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon2, { className: Breadcrumbs_default.icon, size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ChevronRight, {}) })
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon2, { className: Breadcrumbs_default.icon, size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChevronRight, {}) })
   ] });
 }
 
 // src/components/Calendar.tsx
-var import_classnames17 = __toESM(require_classnames());
+var import_classnames18 = __toESM(require_classnames());
 
 // src/lib/date.ts
 function toCalendarDate(date) {
@@ -30533,7 +30548,7 @@ function toCalendarDate(date) {
 var Calendar_default = { "calendar": "Calendar_calendar__ZDMwM", "header": "Calendar_header__ZDE0Y", "heading": "Calendar_heading__MTk3Z", "button": "Calendar_button__MmIyO", "headerCell": "Calendar_headerCell__MjEwY", "cell": "Calendar_cell__MTc4M" };
 
 // src/components/Calendar.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function Calendar2({
   className,
   value,
@@ -30547,7 +30562,7 @@ function Calendar2({
     console.log({ raw: date });
     onChange?.(date.toDate($14e0f24ef4ac5c92$export$aa8b41735afcabd2()));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     $dfd62f934fc76fed$export$e1aef45b828286de,
     {
       ...props,
@@ -30555,17 +30570,17 @@ function Calendar2({
       minValue: toCalendarDate(minValue),
       maxValue: toCalendarDate(maxValue),
       defaultValue: toCalendarDate(defaultValue),
-      className: (0, import_classnames17.default)(Calendar_default.calendar, className),
+      className: (0, import_classnames18.default)(Calendar_default.calendar, className),
       onChange: handleChange,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("header", { className: Calendar_default.header, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button2, { slot: "previous", className: Calendar_default.button, variant: "quiet", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon2, { rotate: 180, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChevronRight, {}) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)($5cb03073d3f54797$export$a8a3e93435678ff9, { className: Calendar_default.heading }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button2, { slot: "next", className: Calendar_default.button, variant: "quiet", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon2, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChevronRight, {}) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("header", { className: Calendar_default.header, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button2, { slot: "previous", className: Calendar_default.button, variant: "quiet", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon2, { rotate: 180, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChevronRight, {}) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)($5cb03073d3f54797$export$a8a3e93435678ff9, { className: Calendar_default.heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button2, { slot: "next", className: Calendar_default.button, variant: "quiet", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon2, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChevronRight, {}) }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)($dfd62f934fc76fed$export$5bd780d491cfc46c, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)($dfd62f934fc76fed$export$22e2d15eaa4d2377, { children: (day) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)($dfd62f934fc76fed$export$ad2135cac3a11b3d, { className: Calendar_default.headerCell, children: day }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)($dfd62f934fc76fed$export$e11f8ba65d857bff, { className: Calendar_default.body, children: (date) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)($dfd62f934fc76fed$export$5d847498420df57b, { className: Calendar_default.cell, date }) })
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)($dfd62f934fc76fed$export$5bd780d491cfc46c, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)($dfd62f934fc76fed$export$22e2d15eaa4d2377, { children: (day) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)($dfd62f934fc76fed$export$ad2135cac3a11b3d, { className: Calendar_default.headerCell, children: day }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)($dfd62f934fc76fed$export$e11f8ba65d857bff, { className: Calendar_default.body, children: (date) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)($dfd62f934fc76fed$export$5d847498420df57b, { className: Calendar_default.cell, date }) })
         ] })
       ]
     }
@@ -30573,24 +30588,24 @@ function Calendar2({
 }
 
 // src/components/Checkbox.tsx
-var import_classnames18 = __toESM(require_classnames());
+var import_classnames19 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Checkbox.module.css
 var Checkbox_default = { "checkbox": "Checkbox_checkbox__OTliN", "box": "Checkbox_box__M2E3Z", "icon": "Checkbox_icon__ODgyZ" };
 
 // src/components/Checkbox.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function Checkbox2({ label, className, children, ...props }) {
   const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     $bc237834342dbd75$export$48513f6b9f8ce62d,
     {
       ...props,
       isSelected,
-      className: (0, import_classnames18.default)(Checkbox_default.checkbox, className),
+      className: (0, import_classnames19.default)(Checkbox_default.checkbox, className),
       children: ({ isIndeterminate, isSelected: isSelected2 }) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: Checkbox_default.box, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon2, { className: Checkbox_default.icon, size: "sm", children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Minus, {}) : isSelected2 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Check, {}) : null }) }),
+        return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: Checkbox_default.box, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon2, { className: Checkbox_default.icon, size: "sm", children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Minus, {}) : isSelected2 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Check, {}) : null }) }),
           children
         ] });
       }
@@ -30602,20 +30617,20 @@ function Checkbox2({ label, className, children, ...props }) {
 var Code_default = { "code": "Code_code__NmYxN" };
 
 // src/components/Code.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function Code({ asChild, children }) {
   const Component = asChild ? Slot : "code";
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Component, { className: Code_default.code, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Component, { className: Code_default.code, children });
 }
 
 // src/components/Container.tsx
-var import_classnames19 = __toESM(require_classnames());
+var import_classnames20 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Container.module.css
 var Container_default = { "container": "Container_container__ZWU0Y", "centered": "Container_centered__OTM1M", "fluid": "Container_fluid__NTBhY" };
 
 // src/components/Container.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function Container({
   isCentered = true,
   isFluid,
@@ -30623,11 +30638,11 @@ function Container({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     Box,
     {
       ...props,
-      className: (0, import_classnames19.default)(
+      className: (0, import_classnames20.default)(
         Container_default.container,
         className,
         isCentered && Container_default.centered,
@@ -30646,18 +30661,6 @@ var import_classnames23 = __toESM(require_classnames());
 var import_react176 = require("react");
 var import_classnames22 = __toESM(require_classnames());
 
-// src/components/Label.tsx
-var import_classnames20 = __toESM(require_classnames());
-
-// css-modules:E:\dev\umami-react-zen\src\components\Label.module.css
-var Label_default = { "label": "Label_label__YWE3M" };
-
-// src/components/Label.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
-function Label2({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)($01b77f81d0f07f68$export$b04be29aa201d4f5, { ...props, className: (0, import_classnames20.default)(Label_default.label, className) });
-}
-
 // src/components/CopyButton.tsx
 var import_react175 = require("react");
 var import_classnames21 = __toESM(require_classnames());
@@ -31543,6 +31546,7 @@ function SearchField2({
   value,
   defaultValue = "",
   delay = 0,
+  onChange,
   onSearch,
   className,
   ...props
@@ -31554,10 +31558,12 @@ function SearchField2({
     if (delay === 0 || value2 === "") {
       onSearch?.(value2);
     }
+    onChange?.(value2);
   };
   const resetSearch = () => {
     setSearch("");
     onSearch?.("");
+    onChange?.("");
   };
   (0, import_react186.useEffect)(() => {
     if (delay > 0) {