@umami/react-zen 0.65.0 → 0.66.0

package/dist/index.js

@@ -34,8 +34,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // node_modules/.pnpm/use-sync-external-store@1.4.0_react@19.0.0/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js
 var require_use_sync_external_store_shim_production = __commonJS({
   "node_modules/.pnpm/use-sync-external-store@1.4.0_react@19.0.0/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js"(exports) {
-    var import_react198 = __toESM(require("react"));
-    var React7 = import_react198.default;
+    var import_react199 = __toESM(require("react"));
+    var React7 = import_react199.default;
     function is2(x, y) {
       return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
     }
@@ -87,7 +87,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
 // node_modules/.pnpm/use-sync-external-store@1.4.0_react@19.0.0/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
 var require_use_sync_external_store_shim_development = __commonJS({
   "node_modules/.pnpm/use-sync-external-store@1.4.0_react@19.0.0/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js"(exports) {
-    var import_react198 = __toESM(require("react"));
+    var import_react199 = __toESM(require("react"));
     (function() {
       function is2(x, y) {
         return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
@@ -141,7 +141,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return getSnapshot();
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React7 = import_react198.default, objectIs = "function" === typeof Object.is ? Object.is : is2, useState17 = React7.useState, useEffect13 = React7.useEffect, useLayoutEffect2 = React7.useLayoutEffect, useDebugValue = React7.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      var React7 = import_react199.default, objectIs = "function" === typeof Object.is ? Object.is : is2, useState17 = React7.useState, useEffect13 = React7.useEffect, useLayoutEffect2 = React7.useLayoutEffect, useDebugValue = React7.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
       exports.useSyncExternalStore = void 0 !== React7.useSyncExternalStore ? React7.useSyncExternalStore : shim;
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
     })();
@@ -27386,7 +27386,7 @@ var import_react157 = require("react");
 var import_classnames7 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Button.module.css
-var Button_default = { "button": "Button_button__ZTY3M", "primary": "Button_primary__YzkyZ", "outline": "Button_outline__OGU2Z", "quiet": "Button_quiet__ZTliZ", "danger": "Button_danger__ZDc1M", "sm": "Button_sm__NzRiZ", "md": "Button_md__ZTZiM", "lg": "Button_lg__ODE0Z", "xl": "Button_xl__NzE0M" };
+var Button_default = { "button": "Button_button__NDYwM", "primary": "Button_primary__OWE0M", "outline": "Button_outline__NTQyN", "quiet": "Button_quiet__NDFjM", "danger": "Button_danger__NDUzM", "sm": "Button_sm__NTVjM", "md": "Button_md__NDE4O", "lg": "Button_lg__NTU4O", "xl": "Button_xl__NjFkM" };
 
 // src/components/Button.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
@@ -27394,8 +27394,8 @@ var Button2 = (0, import_react157.forwardRef)(
   ({
     variant = "secondary",
     size = "md",
-    preventFocusOnPress = true,
     asChild,
+    preventFocusOnPress = true,
     className,
     children,
     ...props
@@ -27435,18 +27435,19 @@ function FormResetButton({ values = {}, children, onPress, ...props }) {
 var import_classnames8 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Spinner.module.css
-var Spinner_default = { "spinner": "Spinner_spinner__NGM1Z", "spinner-rotate": "Spinner_spinner-rotate__OGEwZ", "track": "Spinner_track__NDk4Z", "fill": "Spinner_fill__NDViY", "spinner-dash": "Spinner_spinner-dash__ZDNmY", "size-sm": "Spinner_size-sm__NTY4Y", "size-md": "Spinner_size-md__ZDQ0Y", "size-lg": "Spinner_size-lg__YzIxZ", "size-xl": "Spinner_size-xl__NGQ1Z", "quiet": "Spinner_quiet__ODg0N" };
+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_runtime12 = require("react/jsx-runtime");
 function Spinner(props) {
-  const { size = "lg", quiet, className, ...domProps } = props;
+  const { size = "lg", quiet, className, isDisabled, ...domProps } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "div",
     {
       ...domProps,
       className: (0, import_classnames8.default)(Spinner_default.spinner, className, Spinner_default[`size-${size}`], {
-        [Spinner_default.quiet]: quiet
+        [Spinner_default.quiet]: quiet,
+        [Spinner_default.disabled]: isDisabled
       }),
       children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { viewBox: "25 25 50 50", children: [
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { className: Spinner_default.track, cx: "50", cy: "50", r: "20" }),
@@ -27458,10 +27459,16 @@ function Spinner(props) {
 
 // src/components/LoadingButton.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-function LoadingButton({ isLoading, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Button2, { ...props, children: [
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Spinner, {}) }),
-    children
+function LoadingButton({
+  isLoading,
+  isDisabled,
+  showText = true,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Button2, { ...props, isDisabled, children: [
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Spinner, { isDisabled }) }),
+    showText && children
   ] });
 }
 
@@ -27477,7 +27484,6 @@ function FormSubmitButton({
   const {
     formState: { isDirty, isValid, isSubmitting, isSubmitted, isSubmitSuccessful }
   } = useFormContext();
-  console.log({ isDirty, isValid, isSubmitting, isSubmitted, isSubmitSuccessful });
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     LoadingButton,
     {
@@ -31554,19 +31560,30 @@ function Code({ asChild, children }) {
 var import_classnames21 = __toESM(require_classnames());
 
 // src/components/List.tsx
+var import_react180 = require("react");
 var import_classnames19 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\List.module.css
-var List_default = { "list": "List_list__ZjQ0Z", "separator": "List_separator__OGExO", "section": "List_section__MGFiY", "header": "List_header__MDczN", "item": "List_item__OGFiZ", "check": "List_check__NTA3N" };
+var List_default = { "list": "List_list__MDIxN", "separator": "List_separator__YWY4N", "section": "List_section__NWU0Y", "header": "List_header__Yzg0Y", "item": "List_item__NjEyN", "check": "List_check__MTNlZ" };
 
 // src/components/List.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
-function List({ items, className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)($eed445e0843c11d0$export$41f133550aa26f48, { ...props, items, className: (0, import_classnames19.default)(List_default.list, className), children: children || items?.map((item, index) => {
-    if (item === null) {
-      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)($431f98aba6844401$export$1ff3c3f08ae963c0, { className: List_default.separator }, index);
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ListItem, { id: item, className: List_default.item, children: item }, index);
+function List({
+  items,
+  idProperty = "id",
+  labelProperty = "label",
+  separatorProperty = "separatpr",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)($eed445e0843c11d0$export$41f133550aa26f48, { ...props, items, className: (0, import_classnames19.default)(List_default.list, className), children: children || items?.map((item) => {
+    const id = item[idProperty] || item.toString();
+    const label = item[labelProperty] || item.toString();
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react180.Fragment, { children: [
+      item[separatorProperty] && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)($431f98aba6844401$export$1ff3c3f08ae963c0, { className: List_default.separator }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ListItem, { id, className: List_default.item, children: label })
+    ] }, id);
   }) });
 }
 function ListItem({ children, className, ...props }) {
@@ -31648,11 +31665,11 @@ function Container({
 }
 
 // src/components/ConfirmationDialog.tsx
-var import_react182 = require("react");
+var import_react183 = require("react");
 var import_classnames26 = __toESM(require_classnames());
 
 // src/components/TextField.tsx
-var import_react181 = require("react");
+var import_react182 = require("react");
 var import_classnames25 = __toESM(require_classnames());
 
 // src/components/Label.tsx
@@ -31668,7 +31685,7 @@ function Label2({ className, ...props }) {
 }
 
 // src/components/CopyButton.tsx
-var import_react180 = require("react");
+var import_react181 = require("react");
 var import_classnames24 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\CopyButton.module.css
@@ -31678,8 +31695,8 @@ var CopyButton_default = { "icon": "CopyButton_icon__YTM2Y", "copy-button": "Cop
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var TIMEOUT = 2e3;
 function CopyButton({ value, timeout = TIMEOUT, className, children, ...props }) {
-  const [copied, setCopied] = (0, import_react180.useState)(false);
-  const ref = (0, import_react180.useRef)(timeout);
+  const [copied, setCopied] = (0, import_react181.useState)(false);
+  const ref = (0, import_react181.useRef)(timeout);
   const handleCopy = async () => {
     if (value) {
       await navigator.clipboard.writeText(value);
@@ -31692,14 +31709,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__NGM0Z", "row": "input_row__NjY4Y", "input": "input_input__MjUyM", "icon": "input_icon__ZjY5O" };
+var input_default = { "field": "input_field__ZGEyY", "row": "input_row__YTllZ", "input": "input_input__ZTAzN", "icon": "input_icon__YjcxZ" };
 
 // css-modules:E:\dev\umami-react-zen\src\components\TextField.module.css
 var TextField_default = { "allowCopy": "TextField_allowCopy__Y2RhY", "icon": "TextField_icon__MWVlN" };
 
 // src/components/TextField.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var TextField2 = (0, import_react181.forwardRef)(
+var TextField2 = (0, import_react182.forwardRef)(
   ({
     value,
     defaultValue,
@@ -31712,13 +31729,13 @@ var TextField2 = (0, import_react181.forwardRef)(
     children,
     ...props
   }, ref) => {
-    const [inputValue, setInputValue] = (0, import_react181.useState)(defaultValue || value);
+    const [inputValue, setInputValue] = (0, import_react182.useState)(defaultValue || value);
     const Component = asChild ? Slot : $3985021b0ad6602f$export$f5b8910cec6cf069;
     const handleChange = (e) => {
       setInputValue(e.target.value);
       return onChange?.(e);
     };
-    (0, import_react181.useEffect)(() => {
+    (0, import_react182.useEffect)(() => {
       setInputValue(value);
     }, [value]);
     return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
@@ -31760,7 +31777,7 @@ function ConfirmationDialog({
   children,
   ...props
 }) {
-  const [canSave, setCanSave] = (0, import_react182.useState)(false);
+  const [canSave, setCanSave] = (0, import_react183.useState)(false);
   const handleChange = (e) => {
     setCanSave(e.target.value === value);
   };
@@ -31787,7 +31804,7 @@ function ConfirmationDialog({
 
 // src/components/DataTable.tsx
 var import_classnames28 = __toESM(require_classnames());
-var import_react183 = require("react");
+var import_react184 = require("react");
 
 // src/components/Table.tsx
 var import_classnames27 = __toESM(require_classnames());
@@ -31829,10 +31846,10 @@ var DataTable_default = { "datatable": "DataTable_datatable__ZmQ3Z", "cell": "Da
 
 // src/components/DataTable.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var import_react184 = require("react");
+var import_react185 = 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_react183.Children.map(children, (child) => {
+  const columns = import_react184.Children.map(children, (child) => {
     return { ...child.props };
   });
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Table2, { ...props, className: (0, import_classnames28.default)(DataTable_default.datatable, className), children: [
@@ -31840,19 +31857,19 @@ function DataTable({ data = [], className, children, ...props }) {
       if (hidden) {
         return null;
       }
-      return /* @__PURE__ */ (0, import_react184.createElement)(TableColumn, { ...columnProps, key: id, id }, label);
+      return /* @__PURE__ */ (0, import_react185.createElement)(TableColumn, { ...columnProps, key: id, id }, label);
     }) }),
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TableBody, { items, children: (row) => {
       return /* @__PURE__ */ (0, import_jsx_runtime37.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_react184.createElement)(
+        return /* @__PURE__ */ (0, import_react185.createElement)(
           TableCell,
           {
             ...cellProps,
             key: id,
             className: (0, import_classnames28.default)(DataTable_default.cell, className2, hidden && DataTable_default.hidden)
           },
-          as ? (0, import_react183.createElement)(as, {}, value) : value
+          as ? (0, import_react184.createElement)(as, {}, value) : value
         );
       }) });
     } })
@@ -31879,7 +31896,7 @@ function Dots({ className, ...props }) {
 }
 
 // src/components/FloatingTooltip.tsx
-var import_react185 = require("react");
+var import_react186 = require("react");
 var import_classnames31 = __toESM(require_classnames());
 
 // src/components/Tooltip.tsx
@@ -31906,8 +31923,8 @@ var FloatingTooltip_default = { "floating": "FloatingTooltip_floating__ZjM4N" };
 // src/components/FloatingTooltip.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
 function FloatingTooltip({ className, style, children, ...props }) {
-  const [position, setPosition] = (0, import_react185.useState)({ x: -1e3, y: -1e3 });
-  (0, import_react185.useEffect)(() => {
+  const [position, setPosition] = (0, import_react186.useState)({ x: -1e3, y: -1e3 });
+  (0, import_react186.useEffect)(() => {
     const handler = (e) => {
       setPosition({ x: e.clientX, y: e.clientY });
     };
@@ -32001,7 +32018,7 @@ function Heading2({
 }
 
 // src/components/HoverTrigger.tsx
-var import_react186 = require("react");
+var import_react187 = require("react");
 
 // css-modules:E:\dev\umami-react-zen\src\components\HoverTrigger.module.css
 var HoverTrigger_default = { "wrapper": "HoverTrigger_wrapper__NGFlN" };
@@ -32017,12 +32034,12 @@ function HoverTrigger({
   children
 }) {
   const [triggerElement, popupElement] = children;
-  const triggerRef = (0, import_react186.useRef)(null);
-  const [open, setOpen] = (0, import_react186.useState)(isOpen);
-  const isOverMenu = (0, import_react186.useRef)(false);
-  const isOverButton = (0, import_react186.useRef)(false);
-  const timeout = (0, import_react186.useRef)(null);
-  (0, import_react186.useEffect)(() => {
+  const triggerRef = (0, import_react187.useRef)(null);
+  const [open, setOpen] = (0, import_react187.useState)(isOpen);
+  const isOverMenu = (0, import_react187.useRef)(false);
+  const isOverButton = (0, import_react187.useRef)(false);
+  const timeout = (0, import_react187.useRef)(null);
+  (0, import_react187.useEffect)(() => {
     if (isOpen !== open) {
       setOpen(isOpen);
     }
@@ -32112,7 +32129,7 @@ function Image({
 }
 
 // src/components/InlineEditField.tsx
-var import_react187 = require("react");
+var import_react188 = require("react");
 var import_classnames35 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\InlineEditField.module.css
@@ -32131,8 +32148,8 @@ function InlineEditField({
   onCancel,
   ...props
 }) {
-  const [value, setValue] = (0, import_react187.useState)(defaultValue);
-  const [edit, setEdit] = (0, import_react187.useState)(defaultEdit);
+  const [value, setValue] = (0, import_react188.useState)(defaultValue);
+  const [edit, setEdit] = (0, import_react188.useState)(defaultEdit);
   const handleEdit = () => setEdit(true);
   const handleChange = (e) => {
     const val = e.target.value;
@@ -32143,7 +32160,7 @@ function InlineEditField({
     setEdit(false);
     onCommit?.(value);
   };
-  const handleCancel = (0, import_react187.useCallback)(() => {
+  const handleCancel = (0, import_react188.useCallback)(() => {
     setEdit(false);
     setValue(defaultValue);
     onCancel?.();
@@ -32206,12 +32223,7 @@ var Menu_default = { "menu": "Menu_menu__YmUyN", "separator": "Menu_separator__N
 // src/components/Menu.tsx
 var import_jsx_runtime47 = require("react/jsx-runtime");
 function Menu2({ items, className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)($3674c52c6b3c5bce$export$d9b273488cd8ce6f, { ...props, className: (0, import_classnames37.default)(Menu_default.menu, className), children: children || items?.map((item, index) => {
-    if (item === null) {
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)($431f98aba6844401$export$1ff3c3f08ae963c0, { className: Menu_default.separator }, index);
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(MenuItem2, { id: item, children: item }, index);
-  }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)($3674c52c6b3c5bce$export$d9b273488cd8ce6f, { ...props, className: (0, import_classnames37.default)(Menu_default.menu, className), children });
 }
 function MenuItem2({ children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)($3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ...props, className: (0, import_classnames37.default)(Menu_default.item, className), children: [
@@ -32257,7 +32269,7 @@ function Modal2({
 }
 
 // src/components/NavBar.tsx
-var import_react188 = require("react");
+var import_react189 = require("react");
 var import_classnames39 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\NavBar.module.css
@@ -32265,16 +32277,16 @@ var NavBar_default = { "nav": "NavBar_nav__NDgxZ", "item": "NavBar_item__OGRlN",
 
 // src/components/NavBar.tsx
 var import_jsx_runtime49 = require("react/jsx-runtime");
-var NavBarContext = (0, import_react188.createContext)(void 0);
+var NavBarContext = (0, import_react189.createContext)(void 0);
 var useNavigationContext = () => {
-  const context = (0, import_react188.useContext)(NavBarContext);
+  const context = (0, import_react189.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_react188.useState)("");
+  const [activeMenu, setActiveMenu] = (0, import_react189.useState)("");
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(NavBarContext.Provider, { value: { activeMenu, setActiveMenu }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ...props, className: (0, import_classnames39.default)(NavBar_default.nav, className), children }) });
 }
 function NavBarItem({ label, children, className, ...props }) {
@@ -32292,7 +32304,7 @@ function NavBarItem({ label, children, className, ...props }) {
 }
 
 // src/components/PasswordField.tsx
-var import_react189 = require("react");
+var import_react190 = require("react");
 var import_classnames40 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\PasswordField.module.css
@@ -32300,9 +32312,9 @@ var PasswordField_default = { "icon": "PasswordField_icon__NTRlM" };
 
 // src/components/PasswordField.tsx
 var import_jsx_runtime50 = require("react/jsx-runtime");
-var PasswordField = (0, import_react189.forwardRef)(
+var PasswordField = (0, import_react190.forwardRef)(
   ({ label, className, ...props }, ref) => {
-    const [show, setShow] = (0, import_react189.useState)(false);
+    const [show, setShow] = (0, import_react190.useState)(false);
     const type = show ? "text" : "password";
     const handleShowPassword = () => setShow((state) => !state);
     return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)($bcdf0525bf22703d$export$2c73285ae9390cec, { ...props, ref, className: (0, import_classnames40.default)(input_default.field, className), children: [
@@ -32366,7 +32378,7 @@ function ProgressCircle({ className, showValue, ...props }) {
 }
 
 // src/components/RadioGroup.tsx
-var import_react190 = require("react");
+var import_react191 = require("react");
 var import_classnames43 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\RadioGroup.module.css
@@ -32374,7 +32386,7 @@ var RadioGroup_default = { "radiogroup": "RadioGroup_radiogroup__ZjI3O", "radio"
 
 // src/components/RadioGroup.tsx
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var RadioGroup2 = (0, import_react190.forwardRef)(
+var RadioGroup2 = (0, import_react191.forwardRef)(
   ({ label, children, className, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, ref, className: (0, import_classnames43.default)(RadioGroup_default.radiogroup, className), children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Label2, { children: label }),
@@ -32387,7 +32399,7 @@ function Radio2({ children, className, ...props }) {
 }
 
 // src/components/SearchField.tsx
-var import_react191 = require("react");
+var import_react192 = require("react");
 var import_classnames44 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\SearchField.module.css
@@ -32395,9 +32407,9 @@ var SearchField_default = { "search": "SearchField_search__MzkwY", "input": "Sea
 
 // src/components/SearchField.tsx
 var import_jsx_runtime54 = require("react/jsx-runtime");
-var SearchField2 = (0, import_react191.forwardRef)(
+var SearchField2 = (0, import_react192.forwardRef)(
   ({ label, placeholder, value, delay = 0, onSearch, className, ...props }, ref) => {
-    const [search, setSearch] = (0, import_react191.useState)(value ?? "");
+    const [search, setSearch] = (0, import_react192.useState)(value ?? "");
     const searchValue = useDebounce(search, delay);
     const handleChange = (value2) => {
       setSearch(value2);
@@ -32409,7 +32421,7 @@ var SearchField2 = (0, import_react191.forwardRef)(
       setSearch("");
       onSearch?.("");
     };
-    (0, import_react191.useEffect)(() => {
+    (0, import_react192.useEffect)(() => {
       if (delay > 0) {
         onSearch?.(searchValue);
       }
@@ -32450,23 +32462,29 @@ var SearchField2 = (0, import_react191.forwardRef)(
 );
 
 // src/components/Select.tsx
-var import_react192 = require("react");
+var import_react193 = require("react");
 var import_classnames45 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Select.module.css
-var Select_default = { "button": "Select_button__YTc2N", "list": "Select_list__ZjZhM", "icon": "Select_icon__NzU3O" };
+var Select_default = { "button": "Select_button__ZGY1Y", "popover": "Select_popover__MTQ1Y", "list": "Select_list__MDYyZ", "icon": "Select_icon__N2M0O", "search": "Select_search__MWQwM" };
 
 // src/components/Select.tsx
 var import_jsx_runtime55 = require("react/jsx-runtime");
-var Select2 = (0, import_react192.forwardRef)(
+var Select2 = (0, import_react193.forwardRef)(
   ({
-    children,
     items = [],
     value,
     label,
-    className,
+    isLoading,
+    allowSearch,
+    searchDelay,
+    onSearch,
     onSelectionChange,
     onChange,
+    listProps,
+    popoverProps,
+    className,
+    children,
     ...props
   }, ref) => {
     const handleChange = (e) => {
@@ -32486,7 +32504,27 @@ var Select2 = (0, import_react192.forwardRef)(
             /* @__PURE__ */ (0, import_jsx_runtime55.jsx)($82d7e5349645de74$export$e288731fd71264f0, {}),
             /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon, { rotate: 90, size: "xs", className: input_default.icon, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icons.Chevron, {}) }) })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Popover2, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(List, { items, className: Select_default.list, children }) })
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Popover2, { ...popoverProps, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Column, { className: Select_default.popover, children: [
+            allowSearch && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+              SearchField2,
+              {
+                className: Select_default.search,
+                onSearch,
+                delay: searchDelay,
+                autoFocus: true
+              }
+            ),
+            isLoading && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Loading, { icon: "dots", position: "center", size: "sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+              List,
+              {
+                ...listProps,
+                className: (0, import_classnames45.default)(Select_default.list, listProps?.className),
+                style: { ...listProps?.style, display: isLoading ? "none" : void 0 },
+                children
+              }
+            )
+          ] }) })
         ]
       }
     );
@@ -32494,56 +32532,90 @@ var Select2 = (0, import_react192.forwardRef)(
 );
 
 // src/components/SideNav.tsx
-var import_react193 = require("react");
+var import_react194 = require("react");
 var import_classnames46 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\SideNav.module.css
-var SideNav_default = { "sidenav": "SideNav_sidenav__NTNmY", "header": "SideNav_header__NzhjN", "name": "SideNav_name__ZWUxM", "section": "SideNav_section__MmE3N", "title": "SideNav_title__N2Y0O", "content": "SideNav_content__MzA2M", "item": "SideNav_item__OGU5M", "label": "SideNav_label__NjFiY", "collapsed": "SideNav_collapsed__NTBlM" };
+var SideNav_default = { "sidenav": "SideNav_sidenav__M2NlY", "header": "SideNav_header__NGU1Y", "name": "SideNav_name__OTM0N", "section": "SideNav_section__MTUxM", "title": "SideNav_title__YTg5O", "content": "SideNav_content__MjczM", "item": "SideNav_item__ZTlkN", "label": "SideNav_label__NDU1N", "collapsed": "SideNav_collapsed__YzExM", "muted": "SideNav_muted__MmRlM", "selected": "SideNav_selected__ZjY4N", "variant-quiet": "SideNav_variant-quiet__OTZlN", "variant-1": "SideNav_variant-1__NjVmN", "variant-2": "SideNav_variant-2__NWZjM", "variant-3": "SideNav_variant-3__ZDE4O", "noborder": "SideNav_noborder__YTJjO" };
 
 // src/components/SideNav.tsx
 var import_jsx_runtime56 = require("react/jsx-runtime");
-var SideNavContext = (0, import_react193.createContext)(null);
-function SideNav({ isCollapsed, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SideNavContext.Provider, { value: { isCollapsed }, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: (0, import_classnames46.default)(SideNav_default.sidenav, isCollapsed && SideNav_default.collapsed), children }) });
+var SideNavContext = (0, import_react194.createContext)(null);
+function SideNav({
+  variant = "1",
+  isCollapsed,
+  muteItems = true,
+  showBorder = true,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SideNavContext.Provider, { value: { isCollapsed }, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    Column,
+    {
+      ...props,
+      className: (0, import_classnames46.default)(
+        SideNav_default.sidenav,
+        isCollapsed && SideNav_default.collapsed,
+        muteItems && SideNav_default.muted,
+        variant && SideNav_default[`variant-${variant}`],
+        !showBorder && SideNav_default.noborder,
+        className
+      ),
+      children
+    }
+  ) });
+}
+function SideNavSection({
+  title,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Column, { className: SideNav_default.section, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: SideNav_default.title, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: SideNav_default.content, children })
+  ] });
 }
 function SideNavHeader({
-  name,
+  label,
   icon,
-  children
+  className,
+  children,
+  ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Block, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Row, { ...props, className: (0, import_classnames46.default)(SideNav_default.header, className), children: [
     icon && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon, { size: "sm", children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: (0, import_classnames46.default)(SideNav_default.name, SideNav_default.label), children: name }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: (0, import_classnames46.default)(SideNav_default.name, SideNav_default.label), children: label }),
     children
   ] });
 }
-function SideNavSection({ title, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: SideNav_default.section, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: SideNav_default.title, children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: SideNav_default.content, children })
-  ] });
-}
 function SideNavItem({
   label,
   icon,
+  isSelected,
   className,
+  children,
   ...props
 }) {
-  const { isCollapsed } = (0, import_react193.useContext)(SideNavContext);
-  if (isCollapsed) {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)($4e3b923658d69c60$export$8c610744efcf8a1d, { delay: 0, closeDelay: 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)($f645667febf57a63$export$35a3bebf7ef2d934, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Block, { className: (0, import_classnames46.default)(SideNav_default.item, className), children: icon && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon, { size: "sm", children: icon }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Tooltip2, { placement: "right", children: label })
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Block, { ...props, className: (0, import_classnames46.default)(SideNav_default.item, className), children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon, { size: "sm", children: icon }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { className: SideNav_default.label, children: label })
+  const { isCollapsed } = (0, import_react194.useContext)(SideNavContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)($4e3b923658d69c60$export$8c610744efcf8a1d, { delay: 0, closeDelay: 0, isDisabled: !isCollapsed, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)($f645667febf57a63$export$35a3bebf7ef2d934, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+      Row,
+      {
+        ...props,
+        className: (0, import_classnames46.default)(SideNav_default.item, className, isSelected && SideNav_default.selected),
+        children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon, { size: "sm", children: icon }),
+          label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { className: (0, import_classnames46.default)(SideNav_default.label), children: label }),
+          children
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Tooltip2, { placement: "right", children: label })
   ] });
 }
 
 // src/components/Slider.tsx
-var import_react194 = require("react");
+var import_react195 = require("react");
 var import_classnames47 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Slider.module.css
@@ -32551,7 +32623,7 @@ var Slider_default = { "slider": "Slider_slider__MjBhO", "header": "Slider_heade
 
 // src/components/Slider.tsx
 var import_jsx_runtime57 = require("react/jsx-runtime");
-var Slider2 = (0, import_react194.forwardRef)(
+var Slider2 = (0, import_react195.forwardRef)(
   ({ className, showValue = true, label, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)($6f909507e6374d18$export$472062a354075cee, { ...props, ref, className: (0, import_classnames47.default)(Slider_default.slider, className), children: [
       /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: Slider_default.header, children: [
@@ -32600,7 +32672,7 @@ function StatusLight(props) {
 }
 
 // src/components/Switch.tsx
-var import_react195 = require("react");
+var import_react196 = require("react");
 var import_classnames49 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Switch.module.css
@@ -32608,7 +32680,7 @@ var Switch_default = { "switch": "Switch_switch__NzI0O", "track": "Switch_track_
 
 // src/components/Switch.tsx
 var import_jsx_runtime59 = require("react/jsx-runtime");
-var Switch2 = (0, import_react195.forwardRef)(
+var Switch2 = (0, import_react196.forwardRef)(
   ({ label, children, className, ...props }, ref) => {
     const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
@@ -32649,7 +32721,7 @@ function TabPanel2({ children, ...props }) {
 }
 
 // src/components/TextArea.tsx
-var import_react196 = require("react");
+var import_react197 = require("react");
 var import_classnames50 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\TextArea.module.css
@@ -32657,7 +32729,7 @@ var TextArea_default = { "textarea": "TextArea_textarea__MTk5Y", "resize-none":
 
 // src/components/TextArea.tsx
 var import_jsx_runtime61 = require("react/jsx-runtime");
-var TextArea2 = (0, import_react196.forwardRef)(
+var TextArea2 = (0, import_react197.forwardRef)(
   ({ rows, cols, resize, className, style, children, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       TextField2,
@@ -32723,7 +32795,7 @@ function ThemeButton({
 }
 
 // src/components/Toggle.tsx
-var import_react197 = require("react");
+var import_react198 = require("react");
 var import_classnames52 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Toggle.module.css
@@ -32731,7 +32803,7 @@ var Toggle_default = { "toggle": "Toggle_toggle__OWVjZ" };
 
 // src/components/Toggle.tsx
 var import_jsx_runtime63 = require("react/jsx-runtime");
-var Toggle = (0, import_react197.forwardRef)(
+var Toggle = (0, import_react198.forwardRef)(
   ({ label, children, className, ...props }, ref) => {
     const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [