@umami/react-zen 0.24.0 → 0.25.0

package/dist/index.css

@@ -2641,17 +2641,25 @@ body a.Button_button__YmM3M {
 }
 
 /* virtual-css:css:0fb02723d81c5960ed149d3d9f58f1ba */
-.List_list__MjlhZ {
+.List_list__OGNmY {
   overflow: hidden;
   min-width: 100px;
   outline: none;
 }
-.List_item__MmJiZ {
+.List_item__ZTAwN {
   border: var(--border-radius);
 }
-.List_separator__OTRkO {
+.List_separator__ZDRjM {
   border-bottom: var(--border);
 }
+.List_section__MjY4N {
+  margin-bottom: var(--spacing-3);
+}
+.List_header__ZjI0N {
+  font-size: var(--font-size-2);
+  font-weight: var(--font-weight-bold);
+  padding: var(--padding-y) var(--padding-x);
+}
 
 /* virtual-css:css:f94974973c639ccc39a8a6465cbebeb2 */
 .Popover_popover__YmFhM[data-placement=top] {
@@ -3450,23 +3458,23 @@ body a.Button_button__YmM3M {
 }
 
 /* virtual-css:css:10b212fa8a7332a22ad571a388244d38 */
-.Tabs_tabs__MzI2N {
+.Tabs_tabs__NTRlO {
   font-size: var(--font-size);
   color: var(--font-color);
   position: relative;
   width: 100%;
 }
-.Tabs_list__N2ZhO {
+.Tabs_list__Yjc4M {
   display: flex;
   align-items: center;
   border-bottom: 2px solid var(--border-color);
-  gap: var(--gap);
+  gap: var(--spacing-6);
   margin-bottom: var(--spacing-6);
 }
-.Tabs_list__N2ZhO.Tabs_quiet__OWFhN {
+.Tabs_list__Yjc4M.Tabs_quiet__ZTViO {
   border: 0;
 }
-.Tabs_tab__M2M2Y {
+.Tabs_tab__OTEyN {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3477,14 +3485,14 @@ body a.Button_button__YmM3M {
   margin: 0 0 -2px 0;
   cursor: pointer;
 }
-.Tabs_tab__M2M2Y:hover {
+.Tabs_tab__OTEyN:hover {
   color: var(--font-color);
 }
-.Tabs_tab__M2M2Y[data-selected] {
+.Tabs_tab__OTEyN[data-selected] {
   color: var(--font-color);
   border-bottom: 2px solid var(--primary-color);
 }
-.Tabs_tab__M2M2Y[data-disabled] {
+.Tabs_tab__OTEyN[data-disabled] {
   color: var(--font-faded-color);
   cursor: default;
 }

package/dist/index.d.ts

@@ -44,7 +44,7 @@ declare module '@umami/react-zen' {
     import { Icons } from '@umami/react-zen/Icons';
     import { InlineEditField } from '@umami/react-zen/InlineEditField';
     import { Label } from '@umami/react-zen/Label';
-    import { List } from '@umami/react-zen/List';
+    import { List, ListSeparator, ListSection } from '@umami/react-zen/List';
     import { ListItem } from '@umami/react-zen/ListItem';
     import { Loading } from '@umami/react-zen/Loading';
     import { LoadingButton } from '@umami/react-zen/LoadingButton';
@@ -76,7 +76,7 @@ declare module '@umami/react-zen' {
     import { ToggleGroup, ToggleGroupItem } from '@umami/react-zen/ToggleGroup';
     import { Tooltip } from '@umami/react-zen/Tooltip';
     import { ZenProvider } from '@umami/react-zen/ZenProvider';
-    export { Form, FormField, FormResetButton, FormSubmitButton, useDebounce, useTheme, useToast, Accordion, AccordionItem, AlertBanner, AlertDialog, Blockquote, Box, Breadcrumb, Breadcrumbs, Button, Calendar, Checkbox, Code, Column, Combobox, Container, ConfirmationDialog, DataTable, DataColumn, Dialog, DialogTrigger, Dots, FileTrigger, Flexbox, Grid, Heading, HoverTrigger, Icon, Icons, InlineEditField, Label, List, ListItem, Loading, LoadingButton, Menu, MenuItem, MenuTrigger, Modal, NavigationMenu, NavigationMenuItem, PasswordField, Popover, ProgressBar, ProgressCircle, Radio, RadioGroup, Row, SearchField, Select, Slider, Slot, Spinner, StatusLight, SubmenuTrigger, Switch, Table, TableHeader, TableBody, TableRow, TableColumn, TableCell, Tab, Tabs, TabList, TabPanel, Text, TextOverflow, TextField, TextArea, Toast, ToastProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipTrigger, ZenProvider, };
+    export { Form, FormField, FormResetButton, FormSubmitButton, useDebounce, useTheme, useToast, Accordion, AccordionItem, AlertBanner, AlertDialog, Blockquote, Box, Breadcrumb, Breadcrumbs, Button, Calendar, Checkbox, Code, Column, Combobox, Container, ConfirmationDialog, DataTable, DataColumn, Dialog, DialogTrigger, Dots, FileTrigger, Flexbox, Grid, Heading, HoverTrigger, Icon, Icons, InlineEditField, Label, List, ListItem, ListSection, Loading, LoadingButton, Menu, MenuItem, MenuTrigger, Modal, NavigationMenu, NavigationMenuItem, PasswordField, Popover, ProgressBar, ProgressCircle, Radio, RadioGroup, Row, SearchField, Select, ListSeparator, Slider, Slot, Spinner, StatusLight, SubmenuTrigger, Switch, Table, TableHeader, TableBody, TableRow, TableColumn, TableCell, Tab, Tabs, TabList, TabPanel, Text, TextOverflow, TextField, TextArea, Toast, ToastProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipTrigger, ZenProvider, };
 }
 
 declare module '@umami/react-zen/hooks/useDebounce' {
@@ -479,15 +479,17 @@ declare module '@umami/react-zen/Label' {
 
 declare module '@umami/react-zen/List' {
     import { ReactNode } from 'react';
-    import { ListBoxProps } from 'react-aria-components';
-    interface ListProps extends ListBoxProps<any> {
+    import { ListBoxProps, SeparatorProps, ListBoxSectionProps } from 'react-aria-components';
+    export interface ListProps extends ListBoxProps<any> {
         items?: any[];
         className?: string;
         children?: ReactNode;
     }
-    function List({ items, className, children, ...props }: ListProps): import("react").JSX.Element;
-    export { List };
-    export type { ListProps };
+    export function List({ items, className, children, ...props }: ListProps): import("react").JSX.Element;
+    export function ListSeparator({ className, ...props }: SeparatorProps): import("react").JSX.Element;
+    export function ListSection({ title, className, children, ...props }: ListBoxSectionProps<any> & {
+        title?: string;
+    }): ReactNode;
 }
 
 declare module '@umami/react-zen/ListItem' {

package/dist/index.js

@@ -475,6 +475,8 @@ __export(components_exports, {
   Label: () => Label,
   List: () => List,
   ListItem: () => ListItem,
+  ListSection: () => ListSection,
+  ListSeparator: () => ListSeparator,
   Loading: () => Loading,
   LoadingButton: () => LoadingButton,
   Menu: () => Menu,
@@ -20695,6 +20697,14 @@ function $612b8eb6cb90e02d$export$d1e8e3fbb7461f6(selectionManager, dragAndDropH
 // node_modules/react-aria-components/dist/Header.mjs
 var import_react118 = __toESM(require("react"), 1);
 var $72a5793c14baf454$export$e0e4026c12a8bdbb = /* @__PURE__ */ (0, import_react118.createContext)({});
+var $72a5793c14baf454$export$8b251419efc915eb = /* @__PURE__ */ (0, $e1995378a142960e$export$18af5c7a9e9b3664)("header", function Header(props, ref) {
+  [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $72a5793c14baf454$export$e0e4026c12a8bdbb);
+  return /* @__PURE__ */ (0, import_react118.default).createElement("header", {
+    className: "react-aria-Header",
+    ...props,
+    ref
+  }, props.children);
+});
 
 // node_modules/react-aria-components/dist/Separator.mjs
 var import_react119 = __toESM(require("react"), 1);
@@ -20955,6 +20965,7 @@ function $eed445e0843c11d0$var$ListBoxSection(props, ref, section, className = "
     renderDropIndicator: (0, $612b8eb6cb90e02d$export$971707d8a129a1f7)(dragAndDropHooks, dropState)
   })));
 }
+var $eed445e0843c11d0$export$dca12b0bb56e4fc = /* @__PURE__ */ (0, $e1995378a142960e$export$e953bb1cd0f19726)("section", $eed445e0843c11d0$var$ListBoxSection);
 var $eed445e0843c11d0$export$a11e76429ed99b4 = /* @__PURE__ */ (0, $e1995378a142960e$export$18af5c7a9e9b3664)("item", function ListBoxItem(props, forwardedRef, item) {
   let ref = (0, $df56164dff5785e2$export$4338b53315abf666)(forwardedRef);
   let state = (0, import_react120.useContext)($eed445e0843c11d0$export$7c5906fe4f1f2af2);
@@ -27147,7 +27158,7 @@ function ListItem({ children, className, ...props }) {
 }
 
 // css-modules:E:\dev\umami-react-zen\src\components\List.module.css
-var List_default = { "list": "List_list__MjlhZ", "item": "List_item__MmJiZ", "separator": "List_separator__OTRkO" };
+var List_default = { "list": "List_list__OGNmY", "item": "List_item__ZTAwN", "separator": "List_separator__ZDRjM", "section": "List_section__MjY4N", "header": "List_header__ZjI0N" };
 
 // src/components/List.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
@@ -27159,6 +27170,20 @@ function List({ items, className, children, ...props }) {
     return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ListItem, { id: item, className: List_default.item, children: item }, index);
   }) });
 }
+function ListSeparator({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)($431f98aba6844401$export$1ff3c3f08ae963c0, { ...props, className: (0, import_classnames17.default)(List_default.separator, className) });
+}
+function ListSection({
+  title,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)($eed445e0843c11d0$export$dca12b0bb56e4fc, { ...props, className: (0, import_classnames17.default)(List_default.section, className), children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)($72a5793c14baf454$export$8b251419efc915eb, { className: List_default.header, children: title }),
+    children
+  ] });
+}
 
 // src/components/Popover.tsx
 var import_classnames18 = __toESM(require_classnames());
@@ -28046,7 +28071,7 @@ var Switch = (0, import_react168.forwardRef)(
 );
 
 // css-modules:E:\dev\umami-react-zen\src\components\Tabs.module.css
-var Tabs_default = { "tabs": "Tabs_tabs__MzI2N", "list": "Tabs_list__N2ZhO", "quiet": "Tabs_quiet__OWFhN", "tab": "Tabs_tab__M2M2Y" };
+var Tabs_default = { "tabs": "Tabs_tabs__NTRlO", "list": "Tabs_list__Yjc4M", "quiet": "Tabs_quiet__ZTViO", "tab": "Tabs_tab__OTEyN" };
 
 // src/components/Tabs.tsx
 var import_jsx_runtime54 = require("react/jsx-runtime");

package/dist/index.mjs

@@ -20598,6 +20598,14 @@ function $612b8eb6cb90e02d$export$d1e8e3fbb7461f6(selectionManager, dragAndDropH
 // node_modules/react-aria-components/dist/Header.mjs
 import $i47tY$react, { createContext as $i47tY$createContext } from "react";
 var $72a5793c14baf454$export$e0e4026c12a8bdbb = /* @__PURE__ */ (0, $i47tY$createContext)({});
+var $72a5793c14baf454$export$8b251419efc915eb = /* @__PURE__ */ (0, $e1995378a142960e$export$18af5c7a9e9b3664)("header", function Header(props, ref) {
+  [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $72a5793c14baf454$export$e0e4026c12a8bdbb);
+  return /* @__PURE__ */ (0, $i47tY$react).createElement("header", {
+    className: "react-aria-Header",
+    ...props,
+    ref
+  }, props.children);
+});
 
 // node_modules/react-aria-components/dist/Separator.mjs
 import $i9JCE$react, { createContext as $i9JCE$createContext } from "react";
@@ -20858,6 +20866,7 @@ function $eed445e0843c11d0$var$ListBoxSection(props, ref, section, className = "
     renderDropIndicator: (0, $612b8eb6cb90e02d$export$971707d8a129a1f7)(dragAndDropHooks, dropState)
   })));
 }
+var $eed445e0843c11d0$export$dca12b0bb56e4fc = /* @__PURE__ */ (0, $e1995378a142960e$export$e953bb1cd0f19726)("section", $eed445e0843c11d0$var$ListBoxSection);
 var $eed445e0843c11d0$export$a11e76429ed99b4 = /* @__PURE__ */ (0, $e1995378a142960e$export$18af5c7a9e9b3664)("item", function ListBoxItem(props, forwardedRef, item) {
   let ref = (0, $df56164dff5785e2$export$4338b53315abf666)(forwardedRef);
   let state = (0, $e8Bmu$useContext)($eed445e0843c11d0$export$7c5906fe4f1f2af2);
@@ -27048,10 +27057,10 @@ function ListItem({ children, className, ...props }) {
 }
 
 // css-modules:E:\dev\umami-react-zen\src\components\List.module.css
-var List_default = { "list": "List_list__MjlhZ", "item": "List_item__MmJiZ", "separator": "List_separator__OTRkO" };
+var List_default = { "list": "List_list__OGNmY", "item": "List_item__ZTAwN", "separator": "List_separator__ZDRjM", "section": "List_section__MjY4N", "header": "List_header__ZjI0N" };
 
 // src/components/List.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 function List({ items, className, children, ...props }) {
   return /* @__PURE__ */ jsx25($eed445e0843c11d0$export$41f133550aa26f48, { ...props, items, className: (0, import_classnames17.default)(List_default.list, className), children: children || items?.map((item, index) => {
     if (item === null) {
@@ -27060,6 +27069,20 @@ function List({ items, className, children, ...props }) {
     return /* @__PURE__ */ jsx25(ListItem, { id: item, className: List_default.item, children: item }, index);
   }) });
 }
+function ListSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx25($431f98aba6844401$export$1ff3c3f08ae963c0, { ...props, className: (0, import_classnames17.default)(List_default.separator, className) });
+}
+function ListSection({
+  title,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs13($eed445e0843c11d0$export$dca12b0bb56e4fc, { ...props, className: (0, import_classnames17.default)(List_default.section, className), children: [
+    title && /* @__PURE__ */ jsx25($72a5793c14baf454$export$8b251419efc915eb, { className: List_default.header, children: title }),
+    children
+  ] });
+}
 
 // src/components/Popover.tsx
 var import_classnames18 = __toESM(require_classnames());
@@ -27077,10 +27100,10 @@ function Popover({ children, className, ...props }) {
 var Combobox_default = { "combobox": "Combobox_combobox__YzBkN", "field": "Combobox_field__NTRmY", "input": "Combobox_input__MTkxZ", "button": "Combobox_button__ZTcwY", "list": "Combobox_list__MzViM", "icon": "Combobox_icon__ZDk4Z" };
 
 // src/components/Combobox.tsx
-import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 function Combobox({ items, className, ...props }) {
-  return /* @__PURE__ */ jsxs13($d01f2c01039c0eec$export$72b9695b8216309a, { ...props, className: (0, import_classnames19.default)(Combobox_default.combobox, className), children: [
-    /* @__PURE__ */ jsxs13("div", { className: Combobox_default.field, children: [
+  return /* @__PURE__ */ jsxs14($d01f2c01039c0eec$export$72b9695b8216309a, { ...props, className: (0, import_classnames19.default)(Combobox_default.combobox, className), children: [
+    /* @__PURE__ */ jsxs14("div", { className: Combobox_default.field, children: [
       /* @__PURE__ */ jsx27($3985021b0ad6602f$export$f5b8910cec6cf069, { className: Combobox_default.input }),
       /* @__PURE__ */ jsx27($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: Combobox_default.button, children: /* @__PURE__ */ jsx27(Icon, { rotate: 90, size: "xs", className: Combobox_default.icon, children: /* @__PURE__ */ jsx27(Icons.Chevron, {}) }) })
     ] }),
@@ -27169,7 +27192,7 @@ var input_default = { "field": "input_field__NWJiY", "row": "input_row__ZjAzO",
 var TextField_default = { "allowCopy": "TextField_allowCopy__Yjc3Y", "icon": "TextField_icon__OWIxY" };
 
 // src/components/TextField.tsx
-import { jsx as jsx31, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
 var TextField = forwardRef5(
   ({
     value,
@@ -27192,7 +27215,7 @@ var TextField = forwardRef5(
     useEffect3(() => {
       setInputValue(value);
     }, [value]);
-    return /* @__PURE__ */ jsxs14(
+    return /* @__PURE__ */ jsxs15(
       $bcdf0525bf22703d$export$2c73285ae9390cec,
       {
         ...props,
@@ -27201,7 +27224,7 @@ var TextField = forwardRef5(
         className: (0, import_classnames23.default)(input_default.field, className),
         children: [
           label && /* @__PURE__ */ jsx31(Label, { children: label }),
-          /* @__PURE__ */ jsxs14("div", { className: input_default.row, children: [
+          /* @__PURE__ */ jsxs15("div", { className: input_default.row, children: [
             /* @__PURE__ */ jsx31(
               Component,
               {
@@ -27223,7 +27246,7 @@ var TextField = forwardRef5(
 var ConfirmationDialog_default = { "dialog": "ConfirmationDialog_dialog__M2YwO", "value": "ConfirmationDialog_value__OWE1O" };
 
 // src/components/ConfirmationDialog.tsx
-import { Fragment as Fragment4, jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
 function ConfirmationDialog({
   value,
   confirmMessage,
@@ -27242,9 +27265,9 @@ function ConfirmationDialog({
       className: (0, import_classnames24.default)(ConfirmationDialog_default.dialog, className),
       isConfirmDisabled: !canSave,
       children: ({ close }) => {
-        return /* @__PURE__ */ jsxs15(Fragment4, { children: [
+        return /* @__PURE__ */ jsxs16(Fragment4, { children: [
           typeof children === "function" ? children({ close }) : children,
-          /* @__PURE__ */ jsxs15(Text, { children: [
+          /* @__PURE__ */ jsxs16(Text, { children: [
             confirmMessage || "Type the following value to confirm",
             ":"
           ] }),
@@ -27299,14 +27322,14 @@ function TableCell({ children, className, alignment, ...props }) {
 var DataTable_default = { "datatable": "DataTable_datatable__MWRkN", "cell": "DataTable_cell__MmMyM" };
 
 // src/components/DataTable.tsx
-import { jsx as jsx34, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
 import { createElement as createElement3 } from "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 = Children3.map(children, (child) => {
     return { ...child.props };
   });
-  return /* @__PURE__ */ jsxs16(Table, { ...props, className: (0, import_classnames26.default)(DataTable_default.datatable, className), children: [
+  return /* @__PURE__ */ jsxs17(Table, { ...props, className: (0, import_classnames26.default)(DataTable_default.datatable, className), children: [
     /* @__PURE__ */ jsx34(TableHeader, { children: columns.map(({ id, label, as, hidden, ...columnProps }) => {
       if (hidden) {
         return null;
@@ -27333,9 +27356,9 @@ var import_classnames27 = __toESM(require_classnames());
 var Dots_default = { "dots": "Dots_dots__NzQ0Z", "dot": "Dots_dot__MDk2Z", "dots-blink": "Dots_dots-blink__M2M4Z" };
 
 // src/components/Dots.tsx
-import { jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
 function Dots({ className, ...props }) {
-  return /* @__PURE__ */ jsxs17("div", { ...props, className: (0, import_classnames27.default)(Dots_default.dots, className), children: [
+  return /* @__PURE__ */ jsxs18("div", { ...props, className: (0, import_classnames27.default)(Dots_default.dots, className), children: [
     /* @__PURE__ */ jsx35("div", { className: Dots_default.dot }),
     /* @__PURE__ */ jsx35("div", { className: Dots_default.dot }),
     /* @__PURE__ */ jsx35("div", { className: Dots_default.dot })
@@ -27422,7 +27445,7 @@ import { useRef as useRef2, useState as useState6, useEffect as useEffect4 } fro
 var HoverTrigger_default = { "wrapper": "HoverTrigger_wrapper__NGFlN" };
 
 // src/components/HoverTrigger.tsx
-import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs19 } from "react/jsx-runtime";
 var CLOSE_DELAY = 500;
 function HoverTrigger({
   isOpen,
@@ -27471,7 +27494,7 @@ function HoverTrigger({
       }
     }, closeDelay);
   };
-  return /* @__PURE__ */ jsxs18(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs19(Fragment5, { children: [
     /* @__PURE__ */ jsx38("div", { ref: triggerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: triggerElement }),
     /* @__PURE__ */ jsx38(Popover, { isOpen: open, isNonModal: true, triggerRef, children: /* @__PURE__ */ jsx38(
       "div",
@@ -27493,7 +27516,7 @@ import { useState as useState7, useCallback as useCallback2 } from "react";
 var InlineEditField_default = { "edit": "InlineEditField_edit__MDliZ", "icon": "InlineEditField_icon__ZjE1O" };
 
 // src/components/InlineEditField.tsx
-import { jsx as jsx39, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
 function InlineEditField({
   value: defaultValue = "",
   defaultEdit,
@@ -27528,7 +27551,7 @@ function InlineEditField({
       handleCancel();
     }
   };
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     "div",
     {
       "aria-label": "Edit",
@@ -27560,10 +27583,10 @@ var import_classnames31 = __toESM(require_classnames());
 var Loading_default = { "loading": "Loading_loading__MzE0Y", "page": "Loading_page__OWMxN", "center": "Loading_center__ZWRmO", "inline": "Loading_inline__NmJkY" };
 
 // src/components/Loading.tsx
-import { jsx as jsx40, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
 function Loading(props) {
   const { size, position = "inline", icon = "spinner", className, ...domProps } = props;
-  return /* @__PURE__ */ jsxs20("div", { ...domProps, className: (0, import_classnames31.default)(Loading_default.loading, className, Loading_default[position]), children: [
+  return /* @__PURE__ */ jsxs21("div", { ...domProps, className: (0, import_classnames31.default)(Loading_default.loading, className, Loading_default[position]), children: [
     icon === "dots" && /* @__PURE__ */ jsx40(Dots, {}),
     icon === "spinner" && /* @__PURE__ */ jsx40(Spinner, { size })
   ] });
@@ -27579,9 +27602,9 @@ var import_classnames32 = __toESM(require_classnames());
 var MenuItem_default = { "item": "MenuItem_item__ODRhY", "check": "MenuItem_check__MDU0O" };
 
 // src/components/MenuItem.tsx
-import { jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
 function MenuItem2({ children, className, ...props }) {
-  return /* @__PURE__ */ jsxs21($3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ...props, className: (0, import_classnames32.default)(MenuItem_default.item, className), children: [
+  return /* @__PURE__ */ jsxs22($3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ...props, className: (0, import_classnames32.default)(MenuItem_default.item, className), children: [
     children,
     /* @__PURE__ */ jsx41("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx41(Icon, { className: MenuItem_default.check, children: /* @__PURE__ */ jsx41(Icons.Check, {}) }) })
   ] });
@@ -27636,7 +27659,7 @@ var useNavigationMenu = store3;
 var NavigationMenu_default = { "nav": "NavigationMenu_nav__Y2I5M", "item": "NavigationMenu_item__NTg4Z", "icon": "NavigationMenu_icon__ZmU5N" };
 
 // src/components/NavigationMenu.tsx
-import { jsx as jsx44, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs23 } from "react/jsx-runtime";
 function NavigationMenu({
   showArrow = true,
   className,
@@ -27653,8 +27676,8 @@ function NavigationMenuItem({
 }) {
   const { activeMenu } = useNavigationMenu();
   if (label) {
-    return /* @__PURE__ */ jsxs22(HoverTrigger, { isOpen: activeMenu === label, onHoverStart: () => setActiveMenu(label), children: [
-      /* @__PURE__ */ jsxs22("div", { ...props, className: (0, import_classnames35.default)(NavigationMenu_default.item, className), children: [
+    return /* @__PURE__ */ jsxs23(HoverTrigger, { isOpen: activeMenu === label, onHoverStart: () => setActiveMenu(label), children: [
+      /* @__PURE__ */ jsxs23("div", { ...props, className: (0, import_classnames35.default)(NavigationMenu_default.item, className), children: [
         /* @__PURE__ */ jsx44(Text, { children: label }),
         /* @__PURE__ */ jsx44(Icon, { rotate: 90, size: "xs", className: NavigationMenu_default.icon, children: /* @__PURE__ */ jsx44(Icons.Chevron, {}) })
       ] }),
@@ -27672,15 +27695,15 @@ var import_classnames36 = __toESM(require_classnames());
 var PasswordField_default = { "icon": "PasswordField_icon__NTRlM" };
 
 // src/components/PasswordField.tsx
-import { jsx as jsx45, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs24 } from "react/jsx-runtime";
 var PasswordField = forwardRef6(
   ({ label, className, ...props }, ref) => {
     const [show, setShow] = useState8(false);
     const type = show ? "text" : "password";
     const handleShowPassword = () => setShow((state) => !state);
-    return /* @__PURE__ */ jsxs23($bcdf0525bf22703d$export$2c73285ae9390cec, { ...props, ref, className: (0, import_classnames36.default)(input_default.field, className), children: [
+    return /* @__PURE__ */ jsxs24($bcdf0525bf22703d$export$2c73285ae9390cec, { ...props, ref, className: (0, import_classnames36.default)(input_default.field, className), children: [
       label && /* @__PURE__ */ jsx45(Label, { children: label }),
-      /* @__PURE__ */ jsxs23("div", { className: input_default.row, children: [
+      /* @__PURE__ */ jsxs24("div", { className: input_default.row, children: [
         /* @__PURE__ */ jsx45($3985021b0ad6602f$export$f5b8910cec6cf069, { type, className: input_default.input }),
         /* @__PURE__ */ jsx45(Icon, { onClick: handleShowPassword, className: (0, import_classnames36.default)(PasswordField_default.icon, input_default.icon), children: show ? /* @__PURE__ */ jsx45(Icons.EyeSlash, {}) : /* @__PURE__ */ jsx45(Icons.Eye, {}) })
       ] })
@@ -27695,10 +27718,10 @@ var import_classnames37 = __toESM(require_classnames());
 var ProgressBar_default = { "progressbar": "ProgressBar_progressbar__MTQ2N", "track": "ProgressBar_track__YzI3M", "fill": "ProgressBar_fill__MGQ3N", "value": "ProgressBar_value__MmIxN" };
 
 // src/components/ProgressBar.tsx
-import { Fragment as Fragment6, jsx as jsx46, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx46, jsxs as jsxs25 } from "react/jsx-runtime";
 function ProgressBar({ className, showValue, ...props }) {
   return /* @__PURE__ */ jsx46($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames37.default)(ProgressBar_default.progressbar, className), children: ({ percentage = 0, valueText }) => {
-    return /* @__PURE__ */ jsxs24(Fragment6, { children: [
+    return /* @__PURE__ */ jsxs25(Fragment6, { children: [
       /* @__PURE__ */ jsx46("div", { className: ProgressBar_default.track, children: /* @__PURE__ */ jsx46("div", { className: ProgressBar_default.fill, style: { width: `${percentage}%` } }) }),
       showValue && /* @__PURE__ */ jsx46("div", { className: ProgressBar_default.value, children: valueText })
     ] });
@@ -27712,14 +27735,14 @@ var import_classnames38 = __toESM(require_classnames());
 var ProgressCircle_default = { "progresscircle": "ProgressCircle_progresscircle__Y2RjZ", "track": "ProgressCircle_track__ZTIzM", "fill": "ProgressCircle_fill__MzM1Y", "value": "ProgressCircle_value__MWMwN" };
 
 // src/components/ProgressCircle.tsx
-import { Fragment as Fragment7, jsx as jsx47, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
 function ProgressCircle({ className, showValue, ...props }) {
   return /* @__PURE__ */ jsx47($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames38.default)(ProgressCircle_default.progresscircle, className), children: ({ percentage = 0, valueText }) => {
     const radius = 45;
     const circumference = radius * 2 * Math.PI;
     const offset = circumference - percentage / 100 * circumference;
-    return /* @__PURE__ */ jsxs25(Fragment7, { children: [
-      /* @__PURE__ */ jsxs25("svg", { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", children: [
+    return /* @__PURE__ */ jsxs26(Fragment7, { children: [
+      /* @__PURE__ */ jsxs26("svg", { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", children: [
         /* @__PURE__ */ jsx47("circle", { className: ProgressCircle_default.track, cx: "50", cy: "50", r: "45" }),
         /* @__PURE__ */ jsx47(
           "circle",
@@ -27746,10 +27769,10 @@ var import_classnames39 = __toESM(require_classnames());
 var RadioGroup_default = { "radiogroup": "RadioGroup_radiogroup__YWY5M", "radio": "RadioGroup_radio__Mjk2O" };
 
 // src/components/RadioGroup.tsx
-import { jsx as jsx48, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
 var RadioGroup = forwardRef7(
   ({ label, children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs26($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, ref, className: (0, import_classnames39.default)(RadioGroup_default.radiogroup, className), children: [
+    return /* @__PURE__ */ jsxs27($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, ref, className: (0, import_classnames39.default)(RadioGroup_default.radiogroup, className), children: [
       label && /* @__PURE__ */ jsx48(Label, { children: label }),
       children
     ] });
@@ -27767,7 +27790,7 @@ var import_classnames40 = __toESM(require_classnames());
 var SearchField_default = { "search": "SearchField_search__Njc3N", "input": "SearchField_input__YzFlZ", "close": "SearchField_close__ZWM5Y" };
 
 // src/components/SearchField.tsx
-import { Fragment as Fragment8, jsx as jsx49, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
 var SearchField = forwardRef8(
   ({ label, value, delay = 0, onSearch, className, ...props }, ref) => {
     const [search, setSearch] = useState9(value ?? "");
@@ -27789,9 +27812,9 @@ var SearchField = forwardRef8(
       }
     }, [searchValue, delay, onSearch]);
     return /* @__PURE__ */ jsx49($440f4836bcb56932$export$b94867ecbd698f21, { ...props, ref, className: (0, import_classnames40.default)(input_default.field, className), children: ({ state }) => {
-      return /* @__PURE__ */ jsxs27(Fragment8, { children: [
+      return /* @__PURE__ */ jsxs28(Fragment8, { children: [
         label && /* @__PURE__ */ jsx49(Label, { children: label }),
-        /* @__PURE__ */ jsxs27("div", { className: input_default.row, children: [
+        /* @__PURE__ */ jsxs28("div", { className: input_default.row, children: [
           /* @__PURE__ */ jsx49(Icons.MagnifyingGlass, { className: (0, import_classnames40.default)(SearchField_default.search, input_default.icon) }),
           /* @__PURE__ */ jsx49(
             $3985021b0ad6602f$export$f5b8910cec6cf069,
@@ -27822,7 +27845,7 @@ import { forwardRef as forwardRef9 } from "react";
 var Select_default = { "button": "Select_button__YTJhM", "list": "Select_list__ODlhZ", "icon": "Select_icon__ZjQwY" };
 
 // src/components/Select.tsx
-import { jsx as jsx50, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs29 } from "react/jsx-runtime";
 var Select = forwardRef9(
   ({
     children,
@@ -27838,7 +27861,7 @@ var Select = forwardRef9(
       onSelectionChange?.(e);
       onChange?.(e);
     };
-    return /* @__PURE__ */ jsxs28(
+    return /* @__PURE__ */ jsxs29(
       $82d7e5349645de74$export$ef9b1a59e592288f,
       {
         ...props,
@@ -27847,7 +27870,7 @@ var Select = forwardRef9(
         onSelectionChange: handleChange,
         children: [
           label && /* @__PURE__ */ jsx50(Label, { children: label }),
-          /* @__PURE__ */ jsx50($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: (0, import_classnames41.default)(input_default.input, className), children: /* @__PURE__ */ jsxs28(Row, { justifyContent: "space-between", gap: "3", children: [
+          /* @__PURE__ */ jsx50($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: (0, import_classnames41.default)(input_default.input, className), children: /* @__PURE__ */ jsxs29(Row, { justifyContent: "space-between", gap: "3", children: [
             /* @__PURE__ */ jsx50($82d7e5349645de74$export$e288731fd71264f0, {}),
             /* @__PURE__ */ jsx50("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx50(Icon, { rotate: 90, size: "xs", className: input_default.icon, children: /* @__PURE__ */ jsx50(Icons.Chevron, {}) }) })
           ] }) }),
@@ -27866,17 +27889,17 @@ var import_classnames42 = __toESM(require_classnames());
 var Slider_default = { "slider": "Slider_slider__MjBhO", "header": "Slider_header__ZTE2M", "track": "Slider_track__ODk5M", "fill": "Slider_fill__YzdhM", "thumb": "Slider_thumb__NGEzM" };
 
 // src/components/Slider.tsx
-import { Fragment as Fragment9, jsx as jsx51, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx51, jsxs as jsxs30 } from "react/jsx-runtime";
 var Slider = forwardRef10(
   ({ className, showValue = true, label, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs29($6f909507e6374d18$export$472062a354075cee, { ...props, ref, className: (0, import_classnames42.default)(Slider_default.slider, className), children: [
-      /* @__PURE__ */ jsxs29("div", { className: Slider_default.header, children: [
+    return /* @__PURE__ */ jsxs30($6f909507e6374d18$export$472062a354075cee, { ...props, ref, className: (0, import_classnames42.default)(Slider_default.slider, className), children: [
+      /* @__PURE__ */ jsxs30("div", { className: Slider_default.header, children: [
         label && /* @__PURE__ */ jsx51(Label, { className: Slider_default.label, children: label }),
         showValue && /* @__PURE__ */ jsx51($6f909507e6374d18$export$a590f758a961cb5b, { className: Slider_default.output })
       ] }),
       /* @__PURE__ */ jsx51($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
         const isHorizontal = state.orientation === "horizontal";
-        return /* @__PURE__ */ jsxs29(Fragment9, { children: [
+        return /* @__PURE__ */ jsxs30(Fragment9, { children: [
           /* @__PURE__ */ jsx51(
             "div",
             {
@@ -27900,10 +27923,10 @@ var import_classnames43 = __toESM(require_classnames());
 var StatusLight_default = { "statuslight": "StatusLight_statuslight__MmJmM", "status": "StatusLight_status__YTQ4M", "bg": "StatusLight_bg__N2QyO", "success": "StatusLight_success__Njk1N", "warning": "StatusLight_warning__YTEyN", "error": "StatusLight_error__MzdjZ", "active": "StatusLight_active__YTdjM", "inactive": "StatusLight_inactive__ODZiY" };
 
 // src/components/StatusLight.tsx
-import { jsx as jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs31 } from "react/jsx-runtime";
 function StatusLight(props) {
   const { color, variant = "inactive", children, className, ...domProps } = props;
-  return /* @__PURE__ */ jsxs30("div", { ...domProps, className: (0, import_classnames43.default)(StatusLight_default.statuslight, className), children: [
+  return /* @__PURE__ */ jsxs31("div", { ...domProps, className: (0, import_classnames43.default)(StatusLight_default.statuslight, className), children: [
     /* @__PURE__ */ jsx52("div", { className: StatusLight_default.bg, children: /* @__PURE__ */ jsx52(
       "div",
       {
@@ -27923,13 +27946,13 @@ var import_classnames44 = __toESM(require_classnames());
 var Switch_default = { "switch": "Switch_switch__MjQzO", "track": "Switch_track__MDhkO", "knob": "Switch_knob__YWVhM" };
 
 // src/components/Switch.tsx
-import { Fragment as Fragment10, jsx as jsx53, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx53, jsxs as jsxs32 } from "react/jsx-runtime";
 var Switch = forwardRef11(
   ({ label, children, className, ...props }, ref) => {
     const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-    return /* @__PURE__ */ jsxs31(Fragment10, { children: [
+    return /* @__PURE__ */ jsxs32(Fragment10, { children: [
       label && /* @__PURE__ */ jsx53(Label, { children: label }),
-      /* @__PURE__ */ jsxs31(
+      /* @__PURE__ */ jsxs32(
         $8e59e948500a8fe1$export$b5d5cf8927ab7262,
         {
           ...props,
@@ -27947,7 +27970,7 @@ var Switch = forwardRef11(
 );
 
 // css-modules:E:\dev\umami-react-zen\src\components\Tabs.module.css
-var Tabs_default = { "tabs": "Tabs_tabs__MzI2N", "list": "Tabs_list__N2ZhO", "quiet": "Tabs_quiet__OWFhN", "tab": "Tabs_tab__M2M2Y" };
+var Tabs_default = { "tabs": "Tabs_tabs__NTRlO", "list": "Tabs_list__Yjc4M", "quiet": "Tabs_quiet__ZTViO", "tab": "Tabs_tab__OTEyN" };
 
 // src/components/Tabs.tsx
 import { jsx as jsx54 } from "react/jsx-runtime";
@@ -28702,7 +28725,7 @@ var VisuallyHidden = React18.forwardRef(
 VisuallyHidden.displayName = NAME;
 
 // node_modules/@radix-ui/react-toast/dist/index.mjs
-import { Fragment as Fragment11, jsx as jsx64, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx64, jsxs as jsxs33 } from "react/jsx-runtime";
 var PROVIDER_NAME = "ToastProvider";
 var [Collection, useCollection, createCollectionScope] = createCollection("Toast");
 var [createToastContext, createToastScope] = createContextScope2("Toast", [createCollectionScope]);
@@ -28856,7 +28879,7 @@ var ToastViewport = React19.forwardRef(
         return () => viewport.removeEventListener("keydown", handleKeyDown);
       }
     }, [getItems, getSortedTabbableCandidates]);
-    return /* @__PURE__ */ jsxs32(
+    return /* @__PURE__ */ jsxs33(
       Branch,
       {
         ref: wrapperRef,
@@ -29048,7 +29071,7 @@ var ToastImpl = React19.forwardRef(
       return node ? getAnnounceTextContent(node) : null;
     }, [node]);
     if (!context.viewport) return null;
-    return /* @__PURE__ */ jsxs32(Fragment11, { children: [
+    return /* @__PURE__ */ jsxs33(Fragment11, { children: [
       announceTextContent && /* @__PURE__ */ jsx64(
         ToastAnnounce,
         {
@@ -29168,7 +29191,7 @@ var ToastAnnounce = (props) => {
     const timer = window.setTimeout(() => setIsAnnounced(true), 1e3);
     return () => window.clearTimeout(timer);
   }, []);
-  return isAnnounced ? null : /* @__PURE__ */ jsx64(Portal, { asChild: true, children: /* @__PURE__ */ jsx64(VisuallyHidden, { ...announceProps, children: renderAnnounceText && /* @__PURE__ */ jsxs32(Fragment11, { children: [
+  return isAnnounced ? null : /* @__PURE__ */ jsx64(Portal, { asChild: true, children: /* @__PURE__ */ jsx64(VisuallyHidden, { ...announceProps, children: renderAnnounceText && /* @__PURE__ */ jsxs33(Fragment11, { children: [
     context.label,
     " ",
     children
@@ -29316,7 +29339,7 @@ var Root2 = Toast;
 var Toast_default = { "viewport": "Toast_viewport__NzVhM", "toast": "Toast_toast__YWM3Z", "slide-in": "Toast_slide-in__ZDZhN", "hide": "Toast_hide__NjM0N", "swipe-out": "Toast_swipe-out__NzI3N", "icon": "Toast_icon__MmY1Y", "title": "Toast_title__OTU5Z", "description": "Toast_description__OWJkZ", "action": "Toast_action__NjZiZ", "close": "Toast_close__MjU1N", "info": "Toast_info__MTZkO", "error": "Toast_error__NTA3M" };
 
 // src/components/Toast.tsx
-import { Fragment as Fragment12, jsx as jsx65, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx65, jsxs as jsxs34 } from "react/jsx-runtime";
 import { createElement as createElement5 } from "react";
 var icons = {
   info: Icons.Info,
@@ -29332,7 +29355,7 @@ function Toast2({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs33(Root2, { ...props, className: (0, import_classnames47.default)(Toast_default.toast, className, variant && Toast_default[variant]), children: [
+  return /* @__PURE__ */ jsxs34(Root2, { ...props, className: (0, import_classnames47.default)(Toast_default.toast, className, variant && Toast_default[variant]), children: [
     /* @__PURE__ */ jsx65(Icon, { className: Toast_default.icon, size: "md", children: variant && createElement4(icons[variant]) }),
     title && /* @__PURE__ */ jsx65(ToastTitle, { className: Toast_default.title, children: title }),
     description && /* @__PURE__ */ jsx65(ToastDescription, { className: Toast_default.description, children: description }),
@@ -29342,7 +29365,7 @@ function Toast2({
 }
 function Toaster(props) {
   const { toasts } = useToast();
-  return /* @__PURE__ */ jsxs33(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs34(Fragment12, { children: [
     toasts.map(({ id, message, props: props2 }) => {
       return /* @__PURE__ */ createElement5(Toast2, { ...props2, key: id, description: message });
     }),
@@ -29358,11 +29381,11 @@ var import_classnames48 = __toESM(require_classnames());
 var Toggle_default = { "toggle": "Toggle_toggle__OWVjZ" };
 
 // src/components/Toggle.tsx
-import { Fragment as Fragment13, jsx as jsx66, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx66, jsxs as jsxs35 } from "react/jsx-runtime";
 var Toggle = forwardRef18(
   ({ label, children, className, ...props }, ref) => {
     const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-    return /* @__PURE__ */ jsxs34(Fragment13, { children: [
+    return /* @__PURE__ */ jsxs35(Fragment13, { children: [
       label && /* @__PURE__ */ jsx66(Label, { children: label }),
       /* @__PURE__ */ jsx66(
         $efde0372d7a700fe$export$d2b052e7b4be1756,
@@ -29385,9 +29408,9 @@ var import_classnames49 = __toESM(require_classnames());
 var ToggleGroup_default = { "group": "ToggleGroup_group__Y2YyN", "list": "ToggleGroup_list__MjNjO", "item": "ToggleGroup_item__YTNhN" };
 
 // src/components/ToggleGroup.tsx
-import { jsx as jsx67, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs36 } from "react/jsx-runtime";
 function ToggleGroup({ label, className, children, ...props }) {
-  return /* @__PURE__ */ jsxs35($eaf9e70818b436db$export$67ea30858aaf75e3, { ...props, className: (0, import_classnames49.default)(ToggleGroup_default.group, className), selectionBehavior: "toggle", children: [
+  return /* @__PURE__ */ jsxs36($eaf9e70818b436db$export$67ea30858aaf75e3, { ...props, className: (0, import_classnames49.default)(ToggleGroup_default.group, className), selectionBehavior: "toggle", children: [
     label && /* @__PURE__ */ jsx67(Label, { children: label }),
     /* @__PURE__ */ jsx67($eaf9e70818b436db$export$f9fef0f55402315b, { className: ToggleGroup_default.list, children })
   ] });
@@ -29403,19 +29426,19 @@ var import_classnames50 = __toESM(require_classnames());
 var Tooltip_default = { "tooltip": "Tooltip_tooltip__NDBjM", "arrow": "Tooltip_arrow__NzM4M", "slide": "Tooltip_slide__NzNkY" };
 
 // src/components/Tooltip.tsx
-import { jsx as jsx68, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs37 } from "react/jsx-runtime";
 function Tooltip({ children, className, ...props }) {
-  return /* @__PURE__ */ jsxs36($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: (0, import_classnames50.default)(Tooltip_default.tooltip, className), children: [
+  return /* @__PURE__ */ jsxs37($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: (0, import_classnames50.default)(Tooltip_default.tooltip, className), children: [
     /* @__PURE__ */ jsx68($44f671af83e7d9e0$export$746d02f47f4d381, { className: Tooltip_default.arrow, children: /* @__PURE__ */ jsx68("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx68("path", { d: "M0 0 L4 4 L8 0" }) }) }),
     children
   ] });
 }
 
 // src/components/ZenProvider.tsx
-import { jsx as jsx69, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs38 } from "react/jsx-runtime";
 function ZenProvider({ config = {}, children }) {
   const { toast: toast2 } = config;
-  return /* @__PURE__ */ jsxs37(ToastProvider, { ...toast2, children: [
+  return /* @__PURE__ */ jsxs38(ToastProvider, { ...toast2, children: [
     children,
     /* @__PURE__ */ jsx69(Toaster, {})
   ] });
@@ -29457,6 +29480,8 @@ export {
   Label,
   List,
   ListItem,
+  ListSection,
+  ListSeparator,
   Loading,
   LoadingButton,
   Menu,

package/dist/styles.css

@@ -2914,17 +2914,25 @@ body a.Button_button__YmM3M {
 }
 
 /* virtual-css:css:0fb02723d81c5960ed149d3d9f58f1ba */
-.List_list__MjlhZ {
+.List_list__OGNmY {
   overflow: hidden;
   min-width: 100px;
   outline: none;
 }
-.List_item__MmJiZ {
+.List_item__ZTAwN {
   border: var(--border-radius);
 }
-.List_separator__OTRkO {
+.List_separator__ZDRjM {
   border-bottom: var(--border);
 }
+.List_section__MjY4N {
+  margin-bottom: var(--spacing-3);
+}
+.List_header__ZjI0N {
+  font-size: var(--font-size-2);
+  font-weight: var(--font-weight-bold);
+  padding: var(--padding-y) var(--padding-x);
+}
 
 /* virtual-css:css:f94974973c639ccc39a8a6465cbebeb2 */
 .Popover_popover__YmFhM[data-placement=top] {
@@ -3723,23 +3731,23 @@ body a.Button_button__YmM3M {
 }
 
 /* virtual-css:css:10b212fa8a7332a22ad571a388244d38 */
-.Tabs_tabs__MzI2N {
+.Tabs_tabs__NTRlO {
   font-size: var(--font-size);
   color: var(--font-color);
   position: relative;
   width: 100%;
 }
-.Tabs_list__N2ZhO {
+.Tabs_list__Yjc4M {
   display: flex;
   align-items: center;
   border-bottom: 2px solid var(--border-color);
-  gap: var(--gap);
+  gap: var(--spacing-6);
   margin-bottom: var(--spacing-6);
 }
-.Tabs_list__N2ZhO.Tabs_quiet__OWFhN {
+.Tabs_list__Yjc4M.Tabs_quiet__ZTViO {
   border: 0;
 }
-.Tabs_tab__M2M2Y {
+.Tabs_tab__OTEyN {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3750,14 +3758,14 @@ body a.Button_button__YmM3M {
   margin: 0 0 -2px 0;
   cursor: pointer;
 }
-.Tabs_tab__M2M2Y:hover {
+.Tabs_tab__OTEyN:hover {
   color: var(--font-color);
 }
-.Tabs_tab__M2M2Y[data-selected] {
+.Tabs_tab__OTEyN[data-selected] {
   color: var(--font-color);
   border-bottom: 2px solid var(--primary-color);
 }
-.Tabs_tab__M2M2Y[data-disabled] {
+.Tabs_tab__OTEyN[data-disabled] {
   color: var(--font-faded-color);
   cursor: default;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "description": "React components built by Umami",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",