@umami/react-zen 0.60.0 → 0.61.0

package/dist/index.js

@@ -34,8 +34,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js
 var require_use_sync_external_store_shim_production_min = __commonJS({
   "node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js"(exports) {
-    var import_react192 = __toESM(require("react"));
-    var e = import_react192.default;
+    var import_react191 = __toESM(require("react"));
+    var e = import_react191.default;
     function h(a, b) {
       return a === b && (0 !== a || 1 / a === 1 / b) || a !== a && b !== b;
     }
@@ -81,14 +81,14 @@ var require_use_sync_external_store_shim_production_min = __commonJS({
 // node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
 var require_use_sync_external_store_shim_development = __commonJS({
   "node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js"(exports) {
-    var import_react192 = __toESM(require("react"));
+    var import_react191 = __toESM(require("react"));
     if (true) {
       (function() {
         "use strict";
         if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === "function") {
           __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
         }
-        var React7 = import_react192.default;
+        var React7 = import_react191.default;
         var ReactSharedInternals = React7.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
         function error(format) {
           {
@@ -25734,9 +25734,6 @@ function useForm(props = {}) {
 // src/components/forms/Form.tsx
 var import_classnames5 = __toESM(require_classnames());
 
-// css-modules:E:\dev\umami-react-zen\src\components\forms\Form.module.css
-var Form_default = { "form": "Form_form__ZjMwZ", "text": "Form_text__NDc1Y", "icon": "Form_icon__ZGE1Z" };
-
 // src/components/AlertBanner.tsx
 var import_react149 = require("react");
 var import_classnames2 = __toESM(require_classnames());
@@ -26033,7 +26030,7 @@ var Icons = {
 };
 
 // css-modules:E:\dev\umami-react-zen\src\components\AlertBanner.module.css
-var AlertBanner_default = { "banner": "AlertBanner_banner__NTQ1Y", "message": "AlertBanner_message__NDNiZ", "title": "AlertBanner_title__ZWUwM", "close": "AlertBanner_close__MzEwM", "error": "AlertBanner_error__YWZmN", "info": "AlertBanner_info__ZmE3M", "start": "AlertBanner_start__MTRkZ", "end": "AlertBanner_end__MWIwO", "center": "AlertBanner_center__OTkwZ" };
+var AlertBanner_default = { "banner": "AlertBanner_banner__NDQ0Z", "message": "AlertBanner_message__MzQ3Y", "title": "AlertBanner_title__MDI0M", "close": "AlertBanner_close__YzE5M", "error": "AlertBanner_error__NDVmM", "start": "AlertBanner_start__YTlmZ", "end": "AlertBanner_end__ZmJlM", "center": "AlertBanner_center__Y2ZmN" };
 
 // src/components/AlertBanner.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -26060,7 +26057,7 @@ function AlertBanner({
         align && AlertBanner_default[align]
       ),
       children: [
-        (icon || variant) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { size: "md", children: variant ? (0, import_react149.createElement)(AlertIcons[variant]) : icon }),
+        (icon || variant) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { size: "sm", children: variant ? (0, import_react149.createElement)(AlertIcons[variant]) : icon }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: AlertBanner_default.message, children: [
           title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: AlertBanner_default.title, children: title }),
           description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: AlertBanner_default.description, children: description })
@@ -26357,6 +26354,9 @@ function Column({ reverse, children, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Flexbox, { ...props, direction: reverse ? "column-reverse" : "column", children });
 }
 
+// css-modules:E:\dev\umami-react-zen\src\components\forms\Form.module.css
+var Form_default = { "form": "Form_form__ZjMwZ", "text": "Form_text__NDc1Y", "icon": "Form_icon__ZGE1Z" };
+
 // src/components/forms/Form.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function Form({
@@ -26417,7 +26417,7 @@ function Form({
       {
         variant: "error",
         align: "center",
-        description: error instanceof Error ? error?.message : error
+        title: error instanceof Error ? error?.message : error
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -26442,7 +26442,7 @@ function Row({ reverse, children, ...props }) {
 
 // src/components/forms/FormButtons.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-function FormButtons({ children, ...props }) {
+function FormButtons({ fill, children, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Row, { paddingTop: "3", gap: "3", justifyContent: "flex-end", ...props, children });
 }
 
@@ -26451,7 +26451,7 @@ var import_react151 = require("react");
 var import_classnames6 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\forms\FormField.module.css
-var FormField_default = { "field": "FormField_field__NzY5Y", "description": "FormField_description__OGY3Y", "error": "FormField_error__NmEzO" };
+var FormField_default = { "field": "FormField_field__YTM1N", "description": "FormField_description__ZjFiM", "error": "FormField_error__NWZhM" };
 
 // src/components/forms/FormField.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
@@ -26560,9 +26560,9 @@ function LoadingButton({ isLoading, children, ...props }) {
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function FormSubmitButton({
   variant = "primary",
-  children,
-  disabled,
+  isDisabled,
   isLoading,
+  children,
   ...props
 }) {
   const {
@@ -26574,7 +26574,7 @@ function FormSubmitButton({
       ...props,
       type: "submit",
       variant,
-      disabled: disabled !== void 0 ? disabled : !isDirty || !isValid || isSubmitting || isSubmitted,
+      disabled: isDisabled !== void 0 ? isDisabled : !isDirty || !isValid || isSubmitting || isSubmitted,
       isLoading: isLoading !== void 0 ? isLoading : isValid && isSubmitSuccessful && (isSubmitting || isSubmitted),
       children
     }
@@ -26582,7 +26582,6 @@ function FormSubmitButton({
 }
 
 // src/components/toast/Toast.tsx
-var import_react153 = require("react");
 var import_classnames9 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\toast\Toast.module.css
@@ -26591,10 +26590,6 @@ var Toast_default = { "toast": "Toast_toast__YjU0N", "icon": "Toast_icon__YmFhZ"
 // src/components/toast/Toast.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var TOAST_CLOSE_ACTION = "close";
-var icons = {
-  info: Icons.Info,
-  error: Icons.Alert
-};
 function Toast({
   id,
   message,
@@ -26609,7 +26604,6 @@ function Toast({
 }) {
   const hasActions = actions?.length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ...props, className: (0, import_classnames9.default)(Toast_default.toast, className, variant && Toast_default[variant]), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: Toast_default.icon, size: "md", children: variant && (0, import_react153.createElement)(icons[variant]) }),
     title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: Toast_default.title, children: title }),
     message && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: Toast_default.description, children: message }),
     hasActions && actions.map((action) => {
@@ -26788,6 +26782,7 @@ function eachSafely(values, each2) {
 }
 
 // node_modules/@react-spring/shared/dist/react-spring_shared.modern.mjs
+var import_react153 = require("react");
 var import_react154 = require("react");
 var import_react155 = require("react");
 var import_react156 = require("react");
@@ -26795,7 +26790,6 @@ var import_react157 = require("react");
 var import_react158 = require("react");
 var import_react159 = require("react");
 var import_react160 = require("react");
-var import_react161 = require("react");
 var __defProp2 = Object.defineProperty;
 var __export2 = (target, all) => {
   for (var name in all)
@@ -27555,9 +27549,9 @@ function isAnimatedString(value) {
   return is.str(value) && (value[0] == "#" || /\d/.test(value) || // Do not identify a CSS variable as an AnimatedString if its SSR
   !isSSR() && cssVariableRegex.test(value) || value in (colors || {}));
 }
-var useIsomorphicLayoutEffect = isSSR() ? import_react157.useEffect : import_react157.useLayoutEffect;
+var useIsomorphicLayoutEffect = isSSR() ? import_react156.useEffect : import_react156.useLayoutEffect;
 var useIsMounted = () => {
-  const isMounted = (0, import_react156.useRef)(false);
+  const isMounted = (0, import_react155.useRef)(false);
   useIsomorphicLayoutEffect(() => {
     isMounted.current = true;
     return () => {
@@ -27567,7 +27561,7 @@ var useIsMounted = () => {
   return isMounted;
 };
 function useForceUpdate() {
-  const update3 = (0, import_react155.useState)()[1];
+  const update3 = (0, import_react154.useState)()[1];
   const isMounted = useIsMounted();
   return () => {
     if (isMounted.current) {
@@ -27576,13 +27570,13 @@ function useForceUpdate() {
   };
 }
 function useMemoOne(getResult, inputs) {
-  const [initial] = (0, import_react158.useState)(
+  const [initial] = (0, import_react157.useState)(
     () => ({
       inputs,
       result: getResult()
     })
   );
-  const committed = (0, import_react158.useRef)();
+  const committed = (0, import_react157.useRef)();
   const prevCache = committed.current;
   let cache = prevCache;
   if (cache) {
@@ -27598,7 +27592,7 @@ function useMemoOne(getResult, inputs) {
   } else {
     cache = initial;
   }
-  (0, import_react158.useEffect)(() => {
+  (0, import_react157.useEffect)(() => {
     committed.current = cache;
     if (prevCache == initial) {
       initial.inputs = initial.result = void 0;
@@ -27617,22 +27611,22 @@ function areInputsEqual(next, prev) {
   }
   return true;
 }
-var useOnce = (effect) => (0, import_react159.useEffect)(effect, emptyDeps);
+var useOnce = (effect) => (0, import_react158.useEffect)(effect, emptyDeps);
 var emptyDeps = [];
 function usePrev(value) {
-  const prevRef = (0, import_react160.useRef)();
-  (0, import_react160.useEffect)(() => {
+  const prevRef = (0, import_react159.useRef)();
+  (0, import_react159.useEffect)(() => {
     prevRef.current = value;
   });
   return prevRef.current;
 }
 
 // node_modules/@react-spring/core/dist/react-spring_core.modern.mjs
-var import_react163 = require("react");
+var import_react162 = require("react");
 
 // node_modules/@react-spring/animated/dist/react-spring_animated.modern.mjs
 var React4 = __toESM(require("react"), 1);
-var import_react162 = require("react");
+var import_react161 = require("react");
 var $node = Symbol.for("Animated:node");
 var isAnimated = (value) => !!value && value[$node] === value;
 var getAnimated = (owner) => owner && owner[$node];
@@ -27819,10 +27813,10 @@ var withAnimated = (Component, host2) => {
     // re-rendered on every animation frame.
     !is.fun(Component) || Component.prototype && Component.prototype.isReactComponent
   );
-  return (0, import_react162.forwardRef)((givenProps, givenRef) => {
-    const instanceRef = (0, import_react162.useRef)(null);
+  return (0, import_react161.forwardRef)((givenProps, givenRef) => {
+    const instanceRef = (0, import_react161.useRef)(null);
     const ref = hasInstance && // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, import_react162.useCallback)(
+    (0, import_react161.useCallback)(
       (value) => {
         instanceRef.current = updateRef(givenRef, value);
       },
@@ -27841,7 +27835,7 @@ var withAnimated = (Component, host2) => {
       }
     };
     const observer = new PropsObserver(callback, deps);
-    const observerRef = (0, import_react162.useRef)();
+    const observerRef = (0, import_react161.useRef)();
     useIsomorphicLayoutEffect(() => {
       observerRef.current = observer;
       each(deps, (dep) => addFluidObserver(dep, observer));
@@ -27855,7 +27849,7 @@ var withAnimated = (Component, host2) => {
         }
       };
     });
-    (0, import_react162.useEffect)(callback, []);
+    (0, import_react161.useEffect)(callback, []);
     useOnce(() => () => {
       const observer2 = observerRef.current;
       each(observer2.deps, (dep) => removeFluidObserver(dep, observer2));
@@ -27931,11 +27925,11 @@ var getDisplayName = (arg) => is.str(arg) ? arg : arg && is.str(arg.displayName)
 
 // node_modules/@react-spring/core/dist/react-spring_core.modern.mjs
 var React5 = __toESM(require("react"), 1);
+var import_react163 = require("react");
 var import_react164 = require("react");
-var import_react165 = require("react");
 var React22 = __toESM(require("react"), 1);
+var import_react165 = require("react");
 var import_react166 = require("react");
-var import_react167 = require("react");
 function callProp(value, ...args) {
   return is.fun(value) ? value(...args) : value;
 }
@@ -29394,7 +29388,7 @@ var SpringContext = ({
   children,
   ...props
 }) => {
-  const inherited = (0, import_react164.useContext)(ctx);
+  const inherited = (0, import_react163.useContext)(ctx);
   const pause = props.pause || !!inherited.pause, immediate = props.immediate || !!inherited.immediate;
   props = useMemoOne(() => ({ pause, immediate }), [pause, immediate]);
   const { Provider } = ctx;
@@ -29493,13 +29487,13 @@ function useTransition(data, props, deps) {
     ref: propsRef,
     config: propsConfig
   } = propsFn ? propsFn() : props;
-  const ref = (0, import_react166.useMemo)(
+  const ref = (0, import_react165.useMemo)(
     () => propsFn || arguments.length == 3 ? SpringRef() : void 0,
     []
   );
   const items = toArray(data);
   const transitions = [];
-  const usedTransitions = (0, import_react166.useRef)(null);
+  const usedTransitions = (0, import_react165.useRef)(null);
   const prevTransitions = reset ? null : usedTransitions.current;
   useIsomorphicLayoutEffect(() => {
     usedTransitions.current = transitions;
@@ -29570,8 +29564,8 @@ function useTransition(data, props, deps) {
   const forceUpdate = useForceUpdate();
   const defaultProps = getDefaultProps(props);
   const changes = /* @__PURE__ */ new Map();
-  const exitingTransitions = (0, import_react166.useRef)(/* @__PURE__ */ new Map());
-  const forceChange = (0, import_react166.useRef)(false);
+  const exitingTransitions = (0, import_react165.useRef)(/* @__PURE__ */ new Map());
+  const forceChange = (0, import_react165.useRef)(false);
   each(transitions, (t, i) => {
     const key = t.key;
     const prevPhase = t.phase;
@@ -29661,7 +29655,7 @@ function useTransition(data, props, deps) {
       changes.set(t, { phase, springs, payload });
     }
   });
-  const context = (0, import_react166.useContext)(SpringContext);
+  const context = (0, import_react165.useContext)(SpringContext);
   const prevContext = usePrev(context);
   const hasContext = context !== prevContext && hasProps(context);
   useIsomorphicLayoutEffect(() => {
@@ -30204,7 +30198,7 @@ var animated = host.animated;
 
 // src/components/toast/Toaster.tsx
 var import_classnames10 = __toESM(require_classnames());
-var import_react171 = require("react");
+var import_react170 = require("react");
 
 // node_modules/zustand/esm/vanilla.mjs
 var createStoreImpl = (createState) => {
@@ -30231,15 +30225,15 @@ var createStoreImpl = (createState) => {
 var createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
 
 // node_modules/zustand/esm/react.mjs
-var import_react168 = __toESM(require("react"), 1);
+var import_react167 = __toESM(require("react"), 1);
 var identity = (arg) => arg;
 function useStore(api, selector = identity) {
-  const slice = import_react168.default.useSyncExternalStore(
+  const slice = import_react167.default.useSyncExternalStore(
     api.subscribe,
     () => selector(api.getState()),
     () => selector(api.getInitialState())
   );
-  import_react168.default.useDebugValue(slice);
+  import_react167.default.useDebugValue(slice);
   return slice;
 }
 var createImpl = (createState) => {
@@ -30251,16 +30245,16 @@ var createImpl = (createState) => {
 var create = (createState) => createState ? createImpl(createState) : createImpl;
 
 // src/components/hooks/useToast.ts
-var import_react170 = require("react");
+var import_react169 = require("react");
 
 // src/components/toast/ToastProvider.tsx
-var import_react169 = require("react");
+var import_react168 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var ToastContext = (0, import_react169.createContext)({});
-function ToastProvider({ children, ...config2 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ToastContext.Provider, { value: config2, children: [
+var ToastContext = (0, import_react168.createContext)({});
+function ToastProvider({ children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ToastContext.Provider, { value: props, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Toaster, { ...config2 })
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Toaster, { ...props })
   ] });
 }
 
@@ -30287,7 +30281,7 @@ function displayToast(message, { duration = TOAST_DURATION, ...options } = {}) {
 }
 function useToast() {
   const { toasts } = store();
-  const config2 = (0, import_react170.useContext)(ToastContext);
+  const config2 = (0, import_react169.useContext)(ToastContext);
   const toast = (message, options) => {
     displayToast(message, { ...options, ...config2 });
   };
@@ -30301,7 +30295,7 @@ var Toaster_default = { "toaster": "Toaster_toaster__OGJjM", "position-top": "To
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function Toaster({ duration = 0, position = "bottom-right" }) {
   const { toasts } = useToast();
-  const [hovered, setHovered] = (0, import_react171.useState)(false);
+  const [hovered, setHovered] = (0, import_react170.useState)(false);
   const transitions = useTransition(toasts, {
     from: {
       opacity: 0,
@@ -30314,7 +30308,7 @@ function Toaster({ duration = 0, position = "bottom-right" }) {
     },
     config: { duration: 100 }
   });
-  (0, import_react171.useEffect)(() => {
+  (0, import_react170.useEffect)(() => {
     if (duration) {
       const timeout = setInterval(() => {
         if (hovered || !toasts.length) return;
@@ -30348,10 +30342,10 @@ function Toaster({ duration = 0, position = "bottom-right" }) {
 }
 
 // src/components/hooks/useDebounce.ts
-var import_react172 = require("react");
+var import_react171 = require("react");
 function useDebounce(value, delay) {
-  const [debouncedValue, setValue] = (0, import_react172.useState)(value);
-  (0, import_react172.useEffect)(() => {
+  const [debouncedValue, setValue] = (0, import_react171.useState)(value);
+  (0, import_react171.useEffect)(() => {
     const timer = setTimeout(() => {
       setValue(value);
     }, delay);
@@ -30363,7 +30357,7 @@ function useDebounce(value, delay) {
 }
 
 // src/components/hooks/useTheme.ts
-var import_react173 = require("react");
+var import_react172 = require("react");
 var initialState2 = {
   theme: "light"
 };
@@ -30374,7 +30368,7 @@ function setTheme(theme) {
 }
 function useTheme(defaultTheme) {
   const { theme } = store2();
-  (0, import_react173.useEffect)(() => {
+  (0, import_react172.useEffect)(() => {
     if (defaultTheme) {
       setTheme(defaultTheme);
     }
@@ -30383,7 +30377,7 @@ function useTheme(defaultTheme) {
 }
 
 // src/components/Accordion.tsx
-var import_react174 = require("react");
+var import_react173 = require("react");
 var import_classnames12 = __toESM(require_classnames());
 
 // src/components/Text.tsx
@@ -30443,7 +30437,7 @@ function AccordionItem({
   ...props
 }) {
   const [trigger, panel] = children;
-  const [expanded, setExpanded] = (0, import_react174.useState)(defaultExpanded);
+  const [expanded, setExpanded] = (0, import_react173.useState)(defaultExpanded);
   const handleExpandedChange = (isExpanded) => {
     requestAnimationFrame(() => setExpanded(isExpanded));
   };
@@ -30587,7 +30581,7 @@ function Calendar({ className, ...props }) {
 }
 
 // src/components/Checkbox.tsx
-var import_react175 = require("react");
+var import_react174 = require("react");
 
 // node_modules/react-icons/im/index.mjs
 function ImCheckmark(props) {
@@ -30602,7 +30596,7 @@ var Checkbox_default = { "checkbox": "Checkbox_checkbox__ZTFlY", "box": "Checkbo
 
 // src/components/Checkbox.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var Checkbox = (0, import_react175.forwardRef)(
+var Checkbox = (0, import_react174.forwardRef)(
   ({ label, className, children, ...props }, ref) => {
     const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -30624,7 +30618,7 @@ var Checkbox = (0, import_react175.forwardRef)(
 );
 
 // css-modules:E:\dev\umami-react-zen\src\components\Code.module.css
-var Code_default = { "code": "Code_code__OGIyN" };
+var Code_default = { "code": "Code_code__YTUzN" };
 
 // src/components/Code.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
@@ -30731,11 +30725,11 @@ function Container({
 }
 
 // src/components/ConfirmationDialog.tsx
-var import_react178 = require("react");
+var import_react177 = require("react");
 var import_classnames25 = __toESM(require_classnames());
 
 // src/components/TextField.tsx
-var import_react177 = require("react");
+var import_react176 = require("react");
 var import_classnames24 = __toESM(require_classnames());
 
 // src/components/Label.tsx
@@ -30751,7 +30745,7 @@ function Label({ className, ...props }) {
 }
 
 // src/components/CopyButton.tsx
-var import_react176 = require("react");
+var import_react175 = require("react");
 var import_classnames23 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\CopyButton.module.css
@@ -30761,8 +30755,8 @@ var CopyButton_default = { "icon": "CopyButton_icon__YTM2Y", "copy-button": "Cop
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var TIMEOUT = 2e3;
 function CopyButton({ value, timeout = TIMEOUT, className, children, ...props }) {
-  const [copied, setCopied] = (0, import_react176.useState)(false);
-  const ref = (0, import_react176.useRef)(timeout);
+  const [copied, setCopied] = (0, import_react175.useState)(false);
+  const ref = (0, import_react175.useRef)(timeout);
   const handleCopy = async () => {
     if (value) {
       await navigator.clipboard.writeText(value);
@@ -30775,14 +30769,14 @@ function CopyButton({ value, timeout = TIMEOUT, className, children, ...props })
 }
 
 // css-modules:E:\dev\umami-react-zen\src\components\styles\input.module.css
-var input_default = { "field": "input_field__ZTk4Z", "row": "input_row__ZGY2N", "input": "input_input__ODNmN", "icon": "input_icon__MTEwY" };
+var input_default = { "field": "input_field__Zjk2M", "row": "input_row__NTFhN", "input": "input_input__NTExY", "icon": "input_icon__ZGI5Y" };
 
 // css-modules:E:\dev\umami-react-zen\src\components\TextField.module.css
-var TextField_default = { "allowCopy": "TextField_allowCopy__Yjc3Y", "icon": "TextField_icon__OWIxY" };
+var TextField_default = { "allowCopy": "TextField_allowCopy__NmUxY", "icon": "TextField_icon__OTcxO" };
 
 // src/components/TextField.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var TextField = (0, import_react177.forwardRef)(
+var TextField = (0, import_react176.forwardRef)(
   ({
     value,
     defaultValue,
@@ -30795,13 +30789,13 @@ var TextField = (0, import_react177.forwardRef)(
     children,
     ...props
   }, ref) => {
-    const [inputValue, setInputValue] = (0, import_react177.useState)(defaultValue || value);
+    const [inputValue, setInputValue] = (0, import_react176.useState)(defaultValue || value);
     const Component = asChild ? Slot : $3985021b0ad6602f$export$f5b8910cec6cf069;
     const handleChange = (e) => {
       setInputValue(e.target.value);
       return onChange?.(e);
     };
-    (0, import_react177.useEffect)(() => {
+    (0, import_react176.useEffect)(() => {
       setInputValue(value);
     }, [value]);
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
@@ -30843,7 +30837,7 @@ function ConfirmationDialog({
   children,
   ...props
 }) {
-  const [canSave, setCanSave] = (0, import_react178.useState)(false);
+  const [canSave, setCanSave] = (0, import_react177.useState)(false);
   const handleChange = (e) => {
     setCanSave(e.target.value === value);
   };
@@ -30870,7 +30864,7 @@ function ConfirmationDialog({
 
 // src/components/DataTable.tsx
 var import_classnames27 = __toESM(require_classnames());
-var import_react179 = require("react");
+var import_react178 = require("react");
 
 // src/components/Table.tsx
 var import_classnames26 = __toESM(require_classnames());
@@ -30892,30 +30886,30 @@ function TableBody({ children, className, ...props }) {
 function TableRow({ children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)($1910c06f0ca9905e$export$b59bdbef9ce70de2, { ...props, className: (0, import_classnames26.default)(Table_default.row, className), children });
 }
-function TableColumn({ children, className, alignment, ...props }) {
+function TableColumn({ children, className, align, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     $1910c06f0ca9905e$export$816b5d811295e6bc,
     {
       ...props,
-      className: (0, import_classnames26.default)(Table_default.column, className, alignment && Table_default[alignment]),
+      className: (0, import_classnames26.default)(Table_default.column, className, align && Table_default[align]),
       isRowHeader: true,
       children
     }
   );
 }
-function TableCell({ children, className, alignment, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)($1910c06f0ca9905e$export$f6f0c3fe4ec306ea, { ...props, className: (0, import_classnames26.default)(Table_default.cell, className, alignment && Table_default[alignment]), children });
+function TableCell({ children, className, align, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)($1910c06f0ca9905e$export$f6f0c3fe4ec306ea, { ...props, className: (0, import_classnames26.default)(Table_default.cell, className, align && Table_default[align]), children });
 }
 
 // css-modules:E:\dev\umami-react-zen\src\components\DataTable.module.css
-var DataTable_default = { "datatable": "DataTable_datatable__MWRkN", "cell": "DataTable_cell__MmMyM" };
+var DataTable_default = { "datatable": "DataTable_datatable__ZmQ3Z", "cell": "DataTable_cell__NzZlM", "hidden": "DataTable_hidden__M2MxN" };
 
 // src/components/DataTable.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var import_react180 = require("react");
+var import_react179 = require("react");
 function DataTable({ data = [], className, children, ...props }) {
   const items = data.length && data?.[0]?.id === void 0 ? data.map((record, id) => ({ ...record, id })) : data;
-  const columns = import_react179.Children.map(children, (child) => {
+  const columns = import_react178.Children.map(children, (child) => {
     return { ...child.props };
   });
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Table, { ...props, className: (0, import_classnames27.default)(DataTable_default.datatable, className), children: [
@@ -30923,13 +30917,20 @@ function DataTable({ data = [], className, children, ...props }) {
       if (hidden) {
         return null;
       }
-      return /* @__PURE__ */ (0, import_react180.createElement)(TableColumn, { ...columnProps, key: id, id }, label);
+      return /* @__PURE__ */ (0, import_react179.createElement)(TableColumn, { ...columnProps, key: id, id }, label);
     }) }),
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TableBody, { items, children: (row) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TableRow, { children: columns.map(({ id, as, children: children2, className: className2, ...cellProps }) => {
-        const value = typeof children2 === "function" ? children2(row, id) : children2 || row[id];
-        const Component = as || "div";
-        return /* @__PURE__ */ (0, import_react180.createElement)(TableCell, { ...cellProps, key: id, className: (0, import_classnames27.default)(DataTable_default.cell, className2) }, as ? (0, import_react179.createElement)(as, {}, value) : value);
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TableRow, { children: columns.map(({ id, as, hidden, className: className2, children: children2, ...cellProps }) => {
+        const value = typeof children2 === "function" ? children2(row) : children2 || row[id];
+        return /* @__PURE__ */ (0, import_react179.createElement)(
+          TableCell,
+          {
+            ...cellProps,
+            key: id,
+            className: (0, import_classnames27.default)(DataTable_default.cell, className2, hidden && DataTable_default.hidden)
+          },
+          as ? (0, import_react178.createElement)(as, {}, value) : value
+        );
       }) });
     } })
   ] });
@@ -31028,7 +31029,7 @@ function Heading({
 }
 
 // src/components/HoverTrigger.tsx
-var import_react181 = require("react");
+var import_react180 = require("react");
 
 // css-modules:E:\dev\umami-react-zen\src\components\HoverTrigger.module.css
 var HoverTrigger_default = { "wrapper": "HoverTrigger_wrapper__NGFlN" };
@@ -31044,12 +31045,12 @@ function HoverTrigger({
   children
 }) {
   const [triggerElement, popupElement] = children;
-  const triggerRef = (0, import_react181.useRef)(null);
-  const [open, setOpen] = (0, import_react181.useState)(isOpen);
-  const isOverMenu = (0, import_react181.useRef)(false);
-  const isOverButton = (0, import_react181.useRef)(false);
-  const timeout = (0, import_react181.useRef)(null);
-  (0, import_react181.useEffect)(() => {
+  const triggerRef = (0, import_react180.useRef)(null);
+  const [open, setOpen] = (0, import_react180.useState)(isOpen);
+  const isOverMenu = (0, import_react180.useRef)(false);
+  const isOverButton = (0, import_react180.useRef)(false);
+  const timeout = (0, import_react180.useRef)(null);
+  (0, import_react180.useEffect)(() => {
     if (isOpen !== open) {
       setOpen(isOpen);
     }
@@ -31139,7 +31140,7 @@ function Image({
 }
 
 // src/components/InlineEditField.tsx
-var import_react182 = require("react");
+var import_react181 = require("react");
 var import_classnames32 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\InlineEditField.module.css
@@ -31157,8 +31158,8 @@ function InlineEditField({
   onCancel,
   ...props
 }) {
-  const [value, setValue] = (0, import_react182.useState)(defaultValue);
-  const [edit, setEdit] = (0, import_react182.useState)(defaultEdit);
+  const [value, setValue] = (0, import_react181.useState)(defaultValue);
+  const [edit, setEdit] = (0, import_react181.useState)(defaultEdit);
   const handleEdit = () => setEdit(true);
   const handleChange = (e) => {
     const val = e.target.value;
@@ -31169,7 +31170,7 @@ function InlineEditField({
     setEdit(false);
     onCommit?.(value);
   };
-  const handleCancel = (0, import_react182.useCallback)(() => {
+  const handleCancel = (0, import_react181.useCallback)(() => {
     setEdit(false);
     setValue(defaultValue);
     onCancel?.();
@@ -31226,7 +31227,7 @@ function Loading(props) {
 var import_classnames34 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Menu.module.css
-var Menu_default = { "menu": "Menu_menu__YWZhN", "separator": "Menu_separator__MzA3M", "section": "Menu_section__OGY0Z", "header": "Menu_header__NjgyY", "item": "Menu_item__NWNhZ", "check": "Menu_check__M2IyM" };
+var Menu_default = { "menu": "Menu_menu__YmUyN", "separator": "Menu_separator__NDFlO", "section": "Menu_section__YjJjY", "header": "Menu_header__NDVjN", "item": "Menu_item__YjBiN", "check": "Menu_check__YmVhZ" };
 
 // src/components/Menu.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
@@ -31282,7 +31283,7 @@ function Modal({
 }
 
 // src/components/NavBar.tsx
-var import_react183 = require("react");
+var import_react182 = require("react");
 var import_classnames36 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\NavBar.module.css
@@ -31290,16 +31291,16 @@ var NavBar_default = { "nav": "NavBar_nav__NDgxZ", "item": "NavBar_item__OGRlN",
 
 // src/components/NavBar.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
-var NavBarContext = (0, import_react183.createContext)(void 0);
+var NavBarContext = (0, import_react182.createContext)(void 0);
 var useNavigationContext = () => {
-  const context = (0, import_react183.useContext)(NavBarContext);
+  const context = (0, import_react182.useContext)(NavBarContext);
   if (!context) {
     throw new Error("useNavigationContext must be used within a NavBar");
   }
   return context;
 };
 function NavBar({ showArrow = true, className, children, ...props }) {
-  const [activeMenu, setActiveMenu] = (0, import_react183.useState)("");
+  const [activeMenu, setActiveMenu] = (0, import_react182.useState)("");
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(NavBarContext.Provider, { value: { activeMenu, setActiveMenu }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ...props, className: (0, import_classnames36.default)(NavBar_default.nav, className), children }) });
 }
 function NavBarItem({ label, children, className, ...props }) {
@@ -31317,7 +31318,7 @@ function NavBarItem({ label, children, className, ...props }) {
 }
 
 // src/components/PasswordField.tsx
-var import_react184 = require("react");
+var import_react183 = require("react");
 var import_classnames37 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\PasswordField.module.css
@@ -31325,9 +31326,9 @@ var PasswordField_default = { "icon": "PasswordField_icon__NTRlM" };
 
 // src/components/PasswordField.tsx
 var import_jsx_runtime47 = require("react/jsx-runtime");
-var PasswordField = (0, import_react184.forwardRef)(
+var PasswordField = (0, import_react183.forwardRef)(
   ({ label, className, ...props }, ref) => {
-    const [show, setShow] = (0, import_react184.useState)(false);
+    const [show, setShow] = (0, import_react183.useState)(false);
     const type = show ? "text" : "password";
     const handleShowPassword = () => setShow((state) => !state);
     return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)($bcdf0525bf22703d$export$2c73285ae9390cec, { ...props, ref, className: (0, import_classnames37.default)(input_default.field, className), children: [
@@ -31391,7 +31392,7 @@ function ProgressCircle({ className, showValue, ...props }) {
 }
 
 // src/components/RadioGroup.tsx
-var import_react185 = require("react");
+var import_react184 = require("react");
 var import_classnames40 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\RadioGroup.module.css
@@ -31399,7 +31400,7 @@ var RadioGroup_default = { "radiogroup": "RadioGroup_radiogroup__YWJkY", "radio"
 
 // src/components/RadioGroup.tsx
 var import_jsx_runtime50 = require("react/jsx-runtime");
-var RadioGroup = (0, import_react185.forwardRef)(
+var RadioGroup = (0, import_react184.forwardRef)(
   ({ label, children, className, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, ref, className: (0, import_classnames40.default)(RadioGroup_default.radiogroup, className), children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Label, { children: label }),
@@ -31412,20 +31413,19 @@ function Radio({ children, className, ...props }) {
 }
 
 // src/components/SearchField.tsx
-var import_react186 = require("react");
+var import_react185 = require("react");
 var import_classnames41 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\SearchField.module.css
-var SearchField_default = { "search": "SearchField_search__N2VmN", "input": "SearchField_input__MTQ2Y", "close": "SearchField_close__MmUwM" };
+var SearchField_default = { "search": "SearchField_search__MzkwY", "input": "SearchField_input__OGFiY", "close": "SearchField_close__NmJkM" };
 
 // src/components/SearchField.tsx
 var import_jsx_runtime51 = require("react/jsx-runtime");
-var SearchField = (0, import_react186.forwardRef)(
+var SearchField = (0, import_react185.forwardRef)(
   ({ label, placeholder, value, delay = 0, onSearch, className, ...props }, ref) => {
-    const [search, setSearch] = (0, import_react186.useState)(value ?? "");
+    const [search, setSearch] = (0, import_react185.useState)(value ?? "");
     const searchValue = useDebounce(search, delay);
-    const handleChange = (e) => {
-      const { value: value2 } = e.target;
+    const handleChange = (value2) => {
       setSearch(value2);
       if (delay === 0 || value2 === "") {
         onSearch?.(value2);
@@ -31435,40 +31435,48 @@ var SearchField = (0, import_react186.forwardRef)(
       setSearch("");
       onSearch?.("");
     };
-    (0, import_react186.useEffect)(() => {
+    (0, import_react185.useEffect)(() => {
       if (delay > 0) {
         onSearch?.(searchValue);
       }
-    }, [searchValue, delay, onSearch]);
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)($440f4836bcb56932$export$b94867ecbd698f21, { ...props, ref, className: (0, import_classnames41.default)(input_default.field, className), children: ({ state }) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Label, { children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: input_default.row, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icons.MagnifyingGlass, { className: (0, import_classnames41.default)(SearchField_default.search, input_default.icon) }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-            $3985021b0ad6602f$export$f5b8910cec6cf069,
-            {
-              className: (0, import_classnames41.default)(SearchField_default.input, input_default.input),
-              placeholder,
-              onChange: handleChange
-            }
-          ),
-          state.value && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-            $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
-            {
-              className: (0, import_classnames41.default)(SearchField_default.close, input_default.icon),
-              onPress: resetSearch,
-              children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icons.Close, {}) })
-            }
-          )
-        ] })
-      ] });
-    } });
+    }, [searchValue, delay]);
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      $440f4836bcb56932$export$b94867ecbd698f21,
+      {
+        ...props,
+        ref,
+        className: (0, import_classnames41.default)(input_default.field, className),
+        onChange: handleChange,
+        children: ({ state }) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+            label && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Label, { children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: input_default.row, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon, { className: (0, import_classnames41.default)(SearchField_default.search, input_default.icon), children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icons.MagnifyingGlass, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                $3985021b0ad6602f$export$f5b8910cec6cf069,
+                {
+                  className: (0, import_classnames41.default)(SearchField_default.input, input_default.input),
+                  placeholder
+                }
+              ),
+              state.value && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
+                {
+                  className: (0, import_classnames41.default)(SearchField_default.close, input_default.icon),
+                  onPress: resetSearch,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icons.Close, {}) })
+                }
+              )
+            ] })
+          ] });
+        }
+      }
+    );
   }
 );
 
 // src/components/Select.tsx
-var import_react187 = require("react");
+var import_react186 = require("react");
 var import_classnames42 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Select.module.css
@@ -31476,7 +31484,7 @@ var Select_default = { "button": "Select_button__NTBiN", "list": "Select_list__N
 
 // src/components/Select.tsx
 var import_jsx_runtime52 = require("react/jsx-runtime");
-var Select = (0, import_react187.forwardRef)(
+var Select = (0, import_react186.forwardRef)(
   ({
     children,
     items = [],
@@ -31549,7 +31557,7 @@ function SideNavItem({
 }
 
 // src/components/Slider.tsx
-var import_react188 = require("react");
+var import_react187 = require("react");
 var import_classnames43 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Slider.module.css
@@ -31557,7 +31565,7 @@ var Slider_default = { "slider": "Slider_slider__MjBhO", "header": "Slider_heade
 
 // src/components/Slider.tsx
 var import_jsx_runtime54 = require("react/jsx-runtime");
-var Slider = (0, import_react188.forwardRef)(
+var Slider = (0, import_react187.forwardRef)(
   ({ className, showValue = true, label, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)($6f909507e6374d18$export$472062a354075cee, { ...props, ref, className: (0, import_classnames43.default)(Slider_default.slider, className), children: [
       /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: Slider_default.header, children: [
@@ -31606,7 +31614,7 @@ function StatusLight(props) {
 }
 
 // src/components/Switch.tsx
-var import_react189 = require("react");
+var import_react188 = require("react");
 var import_classnames45 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Switch.module.css
@@ -31614,7 +31622,7 @@ var Switch_default = { "switch": "Switch_switch__NmQyM", "track": "Switch_track_
 
 // src/components/Switch.tsx
 var import_jsx_runtime56 = require("react/jsx-runtime");
-var Switch = (0, import_react189.forwardRef)(
+var Switch = (0, import_react188.forwardRef)(
   ({ label, children, className, ...props }, ref) => {
     const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
@@ -31655,7 +31663,7 @@ function TabPanel({ children, ...props }) {
 }
 
 // src/components/TextArea.tsx
-var import_react190 = require("react");
+var import_react189 = require("react");
 var import_classnames46 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\TextArea.module.css
@@ -31663,7 +31671,7 @@ var TextArea_default = { "textarea": "TextArea_textarea__MTk5Y", "resize-none":
 
 // src/components/TextArea.tsx
 var import_jsx_runtime58 = require("react/jsx-runtime");
-var TextArea = (0, import_react190.forwardRef)(
+var TextArea = (0, import_react189.forwardRef)(
   ({ rows, cols, resize, className, style, children, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       TextField,
@@ -31729,7 +31737,7 @@ function ThemeButton({
 }
 
 // src/components/Toggle.tsx
-var import_react191 = require("react");
+var import_react190 = require("react");
 var import_classnames48 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Toggle.module.css
@@ -31737,7 +31745,7 @@ var Toggle_default = { "toggle": "Toggle_toggle__OWVjZ" };
 
 // src/components/Toggle.tsx
 var import_jsx_runtime60 = require("react/jsx-runtime");
-var Toggle = (0, import_react191.forwardRef)(
+var Toggle = (0, import_react190.forwardRef)(
   ({ label, children, className, ...props }, ref) => {
     const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
@@ -31791,8 +31799,11 @@ function Tooltip({ children, className, ...props }) {
 
 // src/components/ZenProvider.tsx
 var import_jsx_runtime63 = require("react/jsx-runtime");
+var defaultToastCofig = {
+  duration: 3e3
+};
 function ZenProvider({ children, ...props }) {
-  const { toast } = props;
+  const { toast = defaultToastCofig } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ToastProvider, { ...toast, children });
 }
 /*! Bundled license information: