@umami/react-zen 0.131.0 → 0.133.0

package/dist/index.mjs

@@ -26242,55 +26242,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__ */ jsxs6("div", { ...props, className: (0, import_classnames6.default)(FormField_default.input, className), children: [
-    Children.map(
-      typeof children === "function" ? children({ context, controller }) : children,
-      (child) => child ? cloneElement2(child, { ...field, label: child.props.label || label }) : null
-    ),
+    /* @__PURE__ */ jsx13(FormController, { name, control, rules, children: ({ field }) => {
+      return Children.map(
+        typeof children === "function" ? children({ ...context }) : children,
+        (child) => child ? cloneElement2(child, { ...field, label: child.props.label || label }) : null
+      );
+    } }),
     description && /* @__PURE__ */ jsx13("div", { className: FormField_default.description, children: description }),
     errorMessage && /* @__PURE__ */ jsx13("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());
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+
+// css-modules:E:\dev\umami-react-zen\src\components\Label.module.css
+var Label_default = { "label": "Label_label__YWE3M" };
+
+// src/components/Label.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function Label2({ className, ...props }) {
+  return /* @__PURE__ */ jsx14($01b77f81d0f07f68$export$b04be29aa201d4f5, { ...props, className: (0, import_classnames7.default)(Label_default.label, className) });
+}
+
+// src/components/forms/FormFieldArray.tsx
+import { jsx as jsx15, jsxs as jsxs7 } from "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__ */ jsxs7("div", { ...props, className: (0, import_classnames7.default)(FormField_default.input, className), children: [
-    label && /* @__PURE__ */ jsx14(Label2, { children: label }),
-    description && /* @__PURE__ */ jsx14("div", { className: FormField_default.description, children: description }),
-    errorMessage && /* @__PURE__ */ jsx14("div", { className: FormField_default.error, children: errorMessage }),
-    children({ context, ...fieldProps })
+  return /* @__PURE__ */ jsxs7("div", { ...props, className: (0, import_classnames8.default)(FormField_default.input, className), children: [
+    label && /* @__PURE__ */ jsx15(Label2, { children: label }),
+    description && /* @__PURE__ */ jsx15("div", { className: FormField_default.description, children: description }),
+    errorMessage && /* @__PURE__ */ jsx15("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
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function Button2({
   variant = "secondary",
   size = "md",
@@ -26302,12 +26317,12 @@ function Button2({
 }) {
   const Component = asChild ? Slot : $d2b4bc8c273e7be6$export$353f5b6fc5456de1;
   const buttonProps = Component === $d2b4bc8c273e7be6$export$353f5b6fc5456de1 ? { preventFocusOnPress } : void 0;
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     Component,
     {
       ...props,
       ...buttonProps,
-      className: (0, import_classnames8.default)(
+      className: (0, import_classnames9.default)(
         Button_default.button,
         className,
         variant && Button_default[variant],
@@ -26319,44 +26334,44 @@ function Button2({
 }
 
 // src/components/forms/FormResetButton.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function FormResetButton({ values = {}, children, onPress, ...props }) {
   const { reset } = useFormContext();
   const handleReset = (e) => {
     reset(values);
     onPress?.(e);
   };
-  return /* @__PURE__ */ jsx16(Button2, { ...props, type: "reset", onPress: handleReset, children });
+  return /* @__PURE__ */ jsx17(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
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 function Spinner(props) {
   const { size = "lg", quiet, className, isDisabled, ...domProps } = props;
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "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__ */ jsxs8("svg", { viewBox: "25 25 50 50", children: [
-        /* @__PURE__ */ jsx17("circle", { className: Spinner_default.track, cx: "50", cy: "50", r: "20" }),
-        /* @__PURE__ */ jsx17("circle", { className: Spinner_default.fill, cx: "50", cy: "50", r: "20" })
+        /* @__PURE__ */ jsx18("circle", { className: Spinner_default.track, cx: "50", cy: "50", r: "20" }),
+        /* @__PURE__ */ jsx18("circle", { className: Spinner_default.fill, cx: "50", cy: "50", r: "20" })
       ] })
     }
   );
 }
 
 // src/components/LoadingButton.tsx
-import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 function LoadingButton({
   isLoading,
   isDisabled,
@@ -26365,13 +26380,13 @@ function LoadingButton({
   ...props
 }) {
   return /* @__PURE__ */ jsxs9(Button2, { ...props, isDisabled, children: [
-    isLoading && /* @__PURE__ */ jsx18(Icon2, { size: "sm", children: /* @__PURE__ */ jsx18(Spinner, { isDisabled }) }),
+    isLoading && /* @__PURE__ */ jsx19(Icon2, { size: "sm", children: /* @__PURE__ */ jsx19(Spinner, { isDisabled }) }),
     showText && children
   ] });
 }
 
 // src/components/forms/FormSubmitButton.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function FormSubmitButton({
   variant = "primary",
   isDisabled,
@@ -26382,7 +26397,7 @@ function FormSubmitButton({
   const {
     formState: { isDirty, isValid, isSubmitting, isSubmitted, isSubmitSuccessful }
   } = useFormContext();
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     LoadingButton,
     {
       ...props,
@@ -26396,13 +26411,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
-import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
 var TOAST_CLOSE_ACTION = "close";
 function Toast({
   id,
@@ -26417,11 +26432,11 @@ function Toast({
   ...props
 }) {
   const hasActions = actions?.length > 0;
-  return /* @__PURE__ */ jsxs10("div", { ...props, className: (0, import_classnames10.default)(Toast_default.toast, className, variant && Toast_default[variant]), children: [
-    title && /* @__PURE__ */ jsx20("div", { className: Toast_default.title, children: title }),
-    message && /* @__PURE__ */ jsx20("div", { className: Toast_default.description, children: message }),
+  return /* @__PURE__ */ jsxs10("div", { ...props, className: (0, import_classnames11.default)(Toast_default.toast, className, variant && Toast_default[variant]), children: [
+    title && /* @__PURE__ */ jsx21("div", { className: Toast_default.title, children: title }),
+    message && /* @__PURE__ */ jsx21("div", { className: Toast_default.description, children: message }),
     hasActions && actions.map((action) => {
-      return /* @__PURE__ */ jsx20(
+      return /* @__PURE__ */ jsx21(
         Button2,
         {
           variant: "outline",
@@ -26432,7 +26447,7 @@ function Toast({
         action
       );
     }),
-    !hasActions && allowClose && /* @__PURE__ */ jsx20(
+    !hasActions && allowClose && /* @__PURE__ */ jsx21(
       Icon2,
       {
         "aria-hidden": true,
@@ -26440,7 +26455,7 @@ function Toast({
         size: "sm",
         className: Toast_default.close,
         onClick: () => onClose?.(TOAST_CLOSE_ACTION),
-        children: /* @__PURE__ */ jsx20(X, {})
+        children: /* @__PURE__ */ jsx21(X, {})
       }
     )
   ] });
@@ -30020,7 +30035,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());
 import { useEffect as useEffect6, useState as useState5 } from "react";
 
 // node_modules/.pnpm/zustand@5.0.5_@types+react@_a1d6b7db10f76afd26403e7782bb5bbf/node_modules/zustand/esm/vanilla.mjs
@@ -30072,12 +30087,12 @@ import { useContext as useContext4 } from "react";
 
 // src/components/toast/ToastProvider.tsx
 import { createContext as createContext2 } from "react";
-import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
 var ToastContext = createContext2({});
 function ToastProvider({ children, ...props }) {
   return /* @__PURE__ */ jsxs11(ToastContext.Provider, { value: props, children: [
     children,
-    /* @__PURE__ */ jsx21(Toaster, { ...props })
+    /* @__PURE__ */ jsx22(Toaster, { ...props })
   ] });
 }
 
@@ -30115,7 +30130,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
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function Toaster({ duration = 0, position = "bottom-right" }) {
   const { toasts } = useToast();
   const [hovered, setHovered] = useState5(false);
@@ -30147,17 +30162,17 @@ function Toaster({ duration = 0, position = "bottom-right" }) {
       };
     }
   }, [duration, toasts, hovered]);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "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__ */ jsx22(animated.div, { style, children: /* @__PURE__ */ jsx22(Toast, { ...props, id, onClose: () => removeToast(id) }) }, id)
+          /* @__PURE__ */ jsx23(animated.div, { style, children: /* @__PURE__ */ jsx23(Toast, { ...props, id, onClose: () => removeToast(id) }) }, id)
         );
       })
     }
@@ -30204,16 +30219,16 @@ function useTheme(defaultTheme) {
 
 // src/components/Accordion.tsx
 import { useState as useState7 } from "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
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function Text({
   color,
   size,
@@ -30243,11 +30258,11 @@ function Text({
     textTransform: transform,
     color
   });
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     Component,
     {
       ...props,
-      className: (0, import_classnames12.default)(
+      className: (0, import_classnames13.default)(
         Text_default.text,
         className,
         classes,
@@ -30266,9 +30281,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
-import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
 function Accordion({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx24($28f4fd908f0de97f$export$944aceb4f8c89f10, { ...props, className: (0, import_classnames13.default)(Accordion_default.accordion, className), children });
+  return /* @__PURE__ */ jsx25($28f4fd908f0de97f$export$944aceb4f8c89f10, { ...props, className: (0, import_classnames14.default)(Accordion_default.accordion, className), children });
 }
 function AccordionItem({
   defaultExpanded,
@@ -30285,39 +30300,39 @@ function AccordionItem({
     $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__ */ jsxs12(Button2, { slot: "trigger", className: Accordion_default.button, children: [
-          /* @__PURE__ */ jsx24(Text, { children: trigger }),
-          /* @__PURE__ */ jsx24(Icon2, { className: Accordion_default.icon, size: "xs", children: /* @__PURE__ */ jsx24(ChevronRight, {}) })
+          /* @__PURE__ */ jsx25(Text, { children: trigger }),
+          /* @__PURE__ */ jsx25(Icon2, { className: Accordion_default.icon, size: "xs", children: /* @__PURE__ */ jsx25(ChevronRight, {}) })
         ] }),
-        /* @__PURE__ */ jsx24($28f4fd908f0de97f$export$feabaa331e1d464c, { className: (0, import_classnames13.default)(Accordion_default.panel, expanded && Accordion_default.expanded), children: panel })
+        /* @__PURE__ */ jsx25($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
-import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
 function Dialog2({ title, variant = "modal", children, className, ...props }) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     $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__ */ jsxs13(Fragment2, { children: [
-          title && /* @__PURE__ */ jsx25("div", { className: Dialog_default.title, children: title }),
+          title && /* @__PURE__ */ jsx26("div", { className: Dialog_default.title, children: title }),
           typeof children === "function" ? children(dialogProps) : children
         ] });
       }
@@ -30326,16 +30341,16 @@ function Dialog2({ title, variant = "modal", children, className, ...props }) {
 }
 
 // src/components/Column.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function Column({ reverse, children, ...props }) {
-  return /* @__PURE__ */ jsx26(Flexbox, { ...props, direction: reverse ? "column-reverse" : "column", children });
+  return /* @__PURE__ */ jsx27(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
-import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
 function AlertDialog({
   title,
   description,
@@ -30357,12 +30372,12 @@ function AlertDialog({
     onCancel?.();
     close();
   };
-  return /* @__PURE__ */ jsx27(Dialog2, { ...props, title, className: (0, import_classnames15.default)(AlertDialog_default.dialog, className), children: ({ close }) => {
+  return /* @__PURE__ */ jsx28(Dialog2, { ...props, title, className: (0, import_classnames16.default)(AlertDialog_default.dialog, className), children: ({ close }) => {
     return /* @__PURE__ */ jsxs14(Column, { gap: "4", children: [
       typeof children === "function" ? children({ close }) : children,
       /* @__PURE__ */ jsxs14(Row, { gap: "3", justifyContent: "end", children: [
-        /* @__PURE__ */ jsx27(Button2, { onPress: () => handleClose(close), children: cancelLabel }),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx28(Button2, { onPress: () => handleClose(close), children: cancelLabel }),
+        /* @__PURE__ */ jsx28(
           Button2,
           {
             variant: isDanger ? "danger" : "primary",
@@ -30380,32 +30395,32 @@ function AlertDialog({
 var Blockquote_default = { "blockquote": "Blockquote_blockquote__MzZmO" };
 
 // src/components/Blockquote.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function Blockquote({ asChild, children }) {
   const Component = asChild ? Slot : "blockquote";
-  return /* @__PURE__ */ jsx28(Component, { className: Blockquote_default.blockquote, children });
+  return /* @__PURE__ */ jsx29(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
-import { jsx as jsx29, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
 function Breadcrumbs2({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx29($778035c5624f61e7$export$2dc68d50d56fbbd, { ...props, className: (0, import_classnames16.default)(Breadcrumbs_default.breadcrumbs, className), children });
+  return /* @__PURE__ */ jsx30($778035c5624f61e7$export$2dc68d50d56fbbd, { ...props, className: (0, import_classnames17.default)(Breadcrumbs_default.breadcrumbs, className), children });
 }
 function Breadcrumb2({ children, className, ...props }) {
-  return /* @__PURE__ */ jsxs15($778035c5624f61e7$export$dabcc1ec9dd9d1cc, { ...props, className: (0, import_classnames16.default)(Breadcrumbs_default.breadcrumb, className), children: [
+  return /* @__PURE__ */ jsxs15($778035c5624f61e7$export$dabcc1ec9dd9d1cc, { ...props, className: (0, import_classnames17.default)(Breadcrumbs_default.breadcrumb, className), children: [
     children,
-    /* @__PURE__ */ jsx29(Icon2, { className: Breadcrumbs_default.icon, size: "xs", children: /* @__PURE__ */ jsx29(ChevronRight, {}) })
+    /* @__PURE__ */ jsx30(Icon2, { className: Breadcrumbs_default.icon, size: "xs", children: /* @__PURE__ */ jsx30(ChevronRight, {}) })
   ] });
 }
 
 // src/components/Calendar.tsx
-var import_classnames17 = __toESM(require_classnames());
+var import_classnames18 = __toESM(require_classnames());
 
 // src/lib/date.ts
 function toCalendarDate(date) {
@@ -30418,7 +30433,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
-import { jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
 function Calendar2({
   className,
   value,
@@ -30440,17 +30455,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__ */ jsxs16("header", { className: Calendar_default.header, children: [
-          /* @__PURE__ */ jsx30(Button2, { slot: "previous", className: Calendar_default.button, variant: "quiet", children: /* @__PURE__ */ jsx30(Icon2, { rotate: 180, children: /* @__PURE__ */ jsx30(ChevronRight, {}) }) }),
-          /* @__PURE__ */ jsx30($5cb03073d3f54797$export$a8a3e93435678ff9, { className: Calendar_default.heading }),
-          /* @__PURE__ */ jsx30(Button2, { slot: "next", className: Calendar_default.button, variant: "quiet", children: /* @__PURE__ */ jsx30(Icon2, { children: /* @__PURE__ */ jsx30(ChevronRight, {}) }) })
+          /* @__PURE__ */ jsx31(Button2, { slot: "previous", className: Calendar_default.button, variant: "quiet", children: /* @__PURE__ */ jsx31(Icon2, { rotate: 180, children: /* @__PURE__ */ jsx31(ChevronRight, {}) }) }),
+          /* @__PURE__ */ jsx31($5cb03073d3f54797$export$a8a3e93435678ff9, { className: Calendar_default.heading }),
+          /* @__PURE__ */ jsx31(Button2, { slot: "next", className: Calendar_default.button, variant: "quiet", children: /* @__PURE__ */ jsx31(Icon2, { children: /* @__PURE__ */ jsx31(ChevronRight, {}) }) })
         ] }),
         /* @__PURE__ */ jsxs16($dfd62f934fc76fed$export$5bd780d491cfc46c, { children: [
-          /* @__PURE__ */ jsx30($dfd62f934fc76fed$export$22e2d15eaa4d2377, { children: (day) => /* @__PURE__ */ jsx30($dfd62f934fc76fed$export$ad2135cac3a11b3d, { className: Calendar_default.headerCell, children: day }) }),
-          /* @__PURE__ */ jsx30($dfd62f934fc76fed$export$e11f8ba65d857bff, { className: Calendar_default.body, children: (date) => /* @__PURE__ */ jsx30($dfd62f934fc76fed$export$5d847498420df57b, { className: Calendar_default.cell, date }) })
+          /* @__PURE__ */ jsx31($dfd62f934fc76fed$export$22e2d15eaa4d2377, { children: (day) => /* @__PURE__ */ jsx31($dfd62f934fc76fed$export$ad2135cac3a11b3d, { className: Calendar_default.headerCell, children: day }) }),
+          /* @__PURE__ */ jsx31($dfd62f934fc76fed$export$e11f8ba65d857bff, { className: Calendar_default.body, children: (date) => /* @__PURE__ */ jsx31($dfd62f934fc76fed$export$5d847498420df57b, { className: Calendar_default.cell, date }) })
         ] })
       ]
     }
@@ -30458,24 +30473,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
-import { Fragment as Fragment3, jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
 function Checkbox2({ label, className, children, ...props }) {
   const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     $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__ */ jsxs17(Fragment3, { children: [
-          /* @__PURE__ */ jsx31("div", { className: Checkbox_default.box, children: /* @__PURE__ */ jsx31(Icon2, { className: Checkbox_default.icon, size: "sm", children: isIndeterminate ? /* @__PURE__ */ jsx31(Minus, {}) : isSelected2 ? /* @__PURE__ */ jsx31(Check, {}) : null }) }),
+          /* @__PURE__ */ jsx32("div", { className: Checkbox_default.box, children: /* @__PURE__ */ jsx32(Icon2, { className: Checkbox_default.icon, size: "sm", children: isIndeterminate ? /* @__PURE__ */ jsx32(Minus, {}) : isSelected2 ? /* @__PURE__ */ jsx32(Check, {}) : null }) }),
           children
         ] });
       }
@@ -30487,20 +30502,20 @@ function Checkbox2({ label, className, children, ...props }) {
 var Code_default = { "code": "Code_code__NmYxN" };
 
 // src/components/Code.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function Code({ asChild, children }) {
   const Component = asChild ? Slot : "code";
-  return /* @__PURE__ */ jsx32(Component, { className: Code_default.code, children });
+  return /* @__PURE__ */ jsx33(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
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function Container({
   isCentered = true,
   isFluid,
@@ -30508,11 +30523,11 @@ function Container({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     Box,
     {
       ...props,
-      className: (0, import_classnames19.default)(
+      className: (0, import_classnames20.default)(
         Container_default.container,
         className,
         isCentered && Container_default.centered,
@@ -30531,18 +30546,6 @@ import { useState as useState10 } from "react";
 import { useEffect as useEffect9, useState as useState9 } from "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
-import { jsx as jsx34 } from "react/jsx-runtime";
-function Label2({ className, ...props }) {
-  return /* @__PURE__ */ jsx34($01b77f81d0f07f68$export$b04be29aa201d4f5, { ...props, className: (0, import_classnames20.default)(Label_default.label, className) });
-}
-
 // src/components/CopyButton.tsx
 var import_classnames21 = __toESM(require_classnames());
 import { useState as useState8, useRef as useRef7 } from "react";
@@ -31432,6 +31435,7 @@ function SearchField2({
   value,
   defaultValue = "",
   delay = 0,
+  onChange,
   onSearch,
   className,
   ...props
@@ -31443,10 +31447,12 @@ function SearchField2({
     if (delay === 0 || value2 === "") {
       onSearch?.(value2);
     }
+    onChange?.(value2);
   };
   const resetSearch = () => {
     setSearch("");
     onSearch?.("");
+    onChange?.("");
   };
   useEffect12(() => {
     if (delay > 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.131.0",
+  "version": "0.133.0",
   "description": "Modern, minimalist React component library",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",

package/styles.css

@@ -3363,6 +3363,14 @@ li {
   font-weight: 600;
 }
 
+/* virtual-css:css:eaf2e0c53cba41d4256ca460ee0d2b3e */
+.Label_label__YWE3M {
+  font-size: var(--font-size);
+  color: var(--font-color);
+  font-weight: var(--font-weight-bold);
+  line-height: 2.5;
+}
+
 /* virtual-css:css:616ae3b49446388ff62e911490fa55d8 */
 .Button_button__YTAxZ {
   display: flex;
@@ -3945,14 +3953,6 @@ body a.Button_button__YTAxZ {
   }
 }
 
-/* virtual-css:css:eaf2e0c53cba41d4256ca460ee0d2b3e */
-.Label_label__YWE3M {
-  font-size: var(--font-size);
-  color: var(--font-color);
-  font-weight: var(--font-weight-bold);
-  line-height: 2.5;
-}
-
 /* virtual-css:css:814f767aeadf5e17bfb63509d2206999 */
 .CopyButton_icon__YTM2Y {
   animation: CopyButton_copy-button__MjY1M 200ms;