@umami/react-zen 0.238.0 → 0.240.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
-import { Button as Button$1, DisclosureGroup, Disclosure, DisclosurePanel, Dialog as Dialog$1, Breadcrumbs as Breadcrumbs$1, Breadcrumb as Breadcrumb$1, Calendar as Calendar$1, Heading as Heading$1, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, Checkbox as Checkbox$1, Label as Label$1, ListBox, ListBoxItem, Separator, ListBoxSection, Header, Popover as Popover$1, ComboBox as ComboBox$1, Group, Input, TextField as TextField$1, TextArea, Table as Table$1, TableHeader as TableHeader$1, TableBody as TableBody$1, Row as Row$1, Column as Column$1, Cell, Tooltip as Tooltip$1, OverlayArrow, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, SubmenuTrigger, ModalOverlay, Modal as Modal$1, ProgressBar as ProgressBar$1, RadioGroup as RadioGroup$1, Radio as Radio$1, SearchField as SearchField$1, Select as Select$1, SelectValue, TooltipTrigger, Focusable, Slider as Slider$1, SliderOutput, SliderTrack, Switch as Switch$1, Tabs as Tabs$1, TabList as TabList$1, Tab as Tab$1, TabPanel as TabPanel$1, ToggleButton, TagGroup, TagList, Tag, SliderThumb } from 'react-aria-components';
+import { Button as Button$1, DisclosureGroup, Disclosure, DisclosurePanel, Dialog as Dialog$1, Breadcrumbs as Breadcrumbs$1, Breadcrumb as Breadcrumb$1, Calendar as Calendar$1, Heading as Heading$1, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, Checkbox as Checkbox$1, Label as Label$1, ListBox, ListBoxItem, Separator, ListBoxSection, Header, Popover as Popover$1, ComboBox as ComboBox$1, Group, Input, TextField as TextField$1, TextArea, Table as Table$1, TableHeader as TableHeader$1, TableBody as TableBody$1, Row as Row$1, Column as Column$1, Cell, Tooltip as Tooltip$1, OverlayArrow, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, SubmenuTrigger, ModalOverlay, Modal as Modal$1, ProgressBar as ProgressBar$1, RadioGroup as RadioGroup$1, Radio as Radio$1, SearchField as SearchField$1, Select as Select$1, SelectValue, Slider as Slider$1, SliderOutput, SliderTrack, Switch as Switch$1, Tabs as Tabs$1, TabList as TabList$1, Tab as Tab$1, TabPanel as TabPanel$1, TagGroup as TagGroup$1, TagList, Tag as Tag$1, ToggleButton, SliderThumb } from 'react-aria-components';
 export { DialogTrigger, FileTrigger, Focusable, MenuTrigger, Pressable, RouterProvider, SubmenuTrigger, TooltipTrigger } from 'react-aria-components';
 import * as lucide_react_star from 'lucide-react';
-import { forwardRef, createContext, isValidElement, cloneElement, createElement, Fragment as Fragment$1, useState, useRef, useEffect, useId, Children, useCallback, useLayoutEffect, useContext } from 'react';
+import { forwardRef, createContext, isValidElement, cloneElement, createElement, useState, useRef, useEffect, useId, Fragment as Fragment$1, Children, useCallback, useLayoutEffect, useContext } from 'react';
 import { tv } from 'tailwind-variants';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
@@ -364,6 +364,37 @@ var toast = tv({
     }
   }
 });
+var tag = tv({
+  slots: {
+    base: [
+      "inline-flex items-center gap-1 px-2 py-0.5 rounded text-sm",
+      "cursor-default outline-none",
+      "focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-1"
+    ],
+    removeButton: [
+      "flex items-center justify-center rounded-full p-0.5 -mr-1",
+      "cursor-pointer outline-none",
+      "hover:bg-black/10 dark:hover:bg-white/10",
+      "pressed:bg-black/20 dark:pressed:bg-white/20"
+    ]
+  },
+  variants: {
+    variant: {
+      default: {
+        base: "bg-interactive text-foreground-primary"
+      },
+      outline: {
+        base: "bg-transparent border border-edge text-foreground-primary"
+      },
+      primary: {
+        base: "bg-primary text-primary-foreground"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
 function Button({
   variant,
   size = "md",
@@ -1099,7 +1130,11 @@ var semanticColorMap = {
   "surface-sunken": { text: "", bg: "bg-surface-sunken" },
   "surface-overlay": { text: "", bg: "bg-surface-overlay" },
   "surface-inverted": { text: "", bg: "bg-surface-inverted" },
-  "surface-disabled": { text: "", bg: "bg-surface-disabled" }
+  "surface-disabled": { text: "", bg: "bg-surface-disabled" },
+  // Interactive colors
+  interactive: { text: "", bg: "bg-interactive" },
+  "interactive-hover": { text: "", bg: "bg-interactive-hover" },
+  "interactive-pressed": { text: "", bg: "bg-interactive-pressed" }
 };
 var tailwindColors = /* @__PURE__ */ new Set([
   "gray",
@@ -2499,6 +2534,7 @@ var Box = forwardRef(function Box2({
   flexBasis,
   flexGrow,
   flexShrink,
+  fill,
   gridArea,
   gridRow,
   gridColumn,
@@ -2586,6 +2622,7 @@ var Box = forwardRef(function Box2({
     ...flexBasis && { flexBasis },
     ...flexGrow !== void 0 && { flexGrow },
     ...flexShrink !== void 0 && { flexShrink },
+    ...fill && { flex: 1 },
     ...gridArea && { gridArea },
     ...gridRow && { gridRow },
     ...gridColumn && { gridColumn },
@@ -2850,20 +2887,12 @@ function Calendar({
 function Checkbox({ label, className, children, ...props }) {
   const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
   const styles = checkbox();
-  return /* @__PURE__ */ jsx(
-    Checkbox$1,
-    {
-      ...props,
-      isSelected,
-      className: cn(styles.root(), className),
-      children: ({ isIndeterminate, isSelected: isSelected2 }) => {
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Box, { className: styles.box(), children: /* @__PURE__ */ jsx(Icon, { className: styles.icon(), size: "sm", children: isIndeterminate ? /* @__PURE__ */ jsx(icons_exports.Minus, {}) : isSelected2 ? /* @__PURE__ */ jsx(icons_exports.Check, {}) : null }) }),
-          children
-        ] });
-      }
-    }
-  );
+  return /* @__PURE__ */ jsx(Checkbox$1, { ...props, isSelected, className: cn(styles.root(), className), children: ({ isIndeterminate, isSelected: isSelected2 }) => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Box, { className: styles.box(), children: /* @__PURE__ */ jsx(Icon, { className: styles.icon(), size: "sm", children: isIndeterminate ? /* @__PURE__ */ jsx(icons_exports.Minus, {}) : isSelected2 ? /* @__PURE__ */ jsx(icons_exports.Check, {}) : null }) }),
+      children
+    ] });
+  } });
 }
 function Code({ className, children, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -2882,7 +2911,12 @@ function useFieldId(id) {
   const generatedId = useId();
   return id ?? generatedId;
 }
-function Label({ size = "base", weight = "semibold", lineHeight = "loose", ...props }) {
+function Label({
+  size = "base",
+  weight = "semibold",
+  lineHeight = "loose",
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
     Text,
     {
@@ -2955,10 +2989,6 @@ function getHighlightColor(color) {
 }
 function List({
   id,
-  items = [],
-  idProperty = "id",
-  labelProperty = "label",
-  separatorProperty = "separator",
   highlightColor,
   showCheckmark = true,
   isFullscreen,
@@ -2990,7 +3020,6 @@ function List({
         ...props,
         selectedKeys: value || selectedKeys,
         defaultSelectedKeys: value || defaultSelectedKeys,
-        items,
         className: cn(
           "grid outline-none overflow-auto gap-1",
           isFullscreen && "block p-3 rounded-none fixed inset-0 overflow-auto z-[9999] bg-surface-base",
@@ -2998,14 +3027,7 @@ function List({
         ),
         onSelectionChange: handleSelectionChange,
         style: { ...style, ...getHighlightColor(highlightColor) },
-        children: children || items?.map((item) => {
-          const id2 = item[idProperty] || item.toString();
-          const label2 = item[labelProperty] || item.toString();
-          return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            item[separatorProperty] && /* @__PURE__ */ jsx(ListSeparator, {}),
-            /* @__PURE__ */ jsx(ListItem, { id: id2, showCheckmark, children: label2 })
-          ] }, id2);
-        })
+        children
       }
     )
   ] });
@@ -3062,7 +3084,6 @@ function Popover({ children, isFullscreen, className, ...props }) {
   );
 }
 function ComboBox({
-  items,
   className,
   renderEmptyState,
   listProps,
@@ -3099,16 +3120,23 @@ function ComboBox({
         ]
       }
     ),
-    /* @__PURE__ */ jsx(Popover, { ...popoverProps, children: /* @__PURE__ */ jsx(Box, { padding: "2", border: true, borderRadius: "md", shadow: "lg", className: "bg-surface-overlay", children: /* @__PURE__ */ jsx(List, { items, renderEmptyState, ...listProps, children: children || items?.map((item) => /* @__PURE__ */ jsx(ListItem, { textValue: item, children: item }, item)) }) }) })
+    /* @__PURE__ */ jsx(Popover, { ...popoverProps, children: /* @__PURE__ */ jsx(Box, { padding: "2", border: true, borderRadius: "md", shadow: "lg", className: "bg-surface-overlay", children: /* @__PURE__ */ jsx(List, { renderEmptyState, ...listProps, children }) }) })
   ] });
 }
 var TIMEOUT = 2e3;
-function CopyButton({ value, timeout = TIMEOUT, className, children, ...props }) {
+function CopyButton({
+  value,
+  timeout = TIMEOUT,
+  className,
+  children,
+  ...props
+}) {
   const [copied, setCopied] = useState(false);
   const ref = useRef(timeout);
   const handleCopy = async () => {
-    if (value) {
-      await navigator.clipboard.writeText(value);
+    const text2 = typeof value === "function" ? value() : value;
+    if (text2) {
+      await navigator.clipboard.writeText(text2);
       setCopied(true);
       clearTimeout(ref.current);
       ref.current = +setTimeout(() => setCopied(false), timeout);
@@ -3389,10 +3417,13 @@ function DataCard({ data = [], labelWidth = "auto", ...props }) {
       padding: "6",
       ...props,
       children: rows.map((row, index) => {
-        return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-          /* @__PURE__ */ jsx(Row, { paddingY: "3", border: "bottom", borderColor: "muted", paddingRight: "6", children: /* @__PURE__ */ jsx(Text, { weight: "bold", children: row?.label }) }),
-          /* @__PURE__ */ jsx(Row, { paddingY: "3", border: "bottom", children: /* @__PURE__ */ jsx(Text, { children: row?.value }) })
-        ] }, index);
+        return (
+          // biome-ignore lint/suspicious/noArrayIndexKey: rows are static display data
+          /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            /* @__PURE__ */ jsx(Row, { paddingY: "3", border: "bottom", borderColor: "muted", paddingRight: "6", children: /* @__PURE__ */ jsx(Text, { weight: "bold", children: row?.label }) }),
+            /* @__PURE__ */ jsx(Row, { paddingY: "3", border: "bottom", children: /* @__PURE__ */ jsx(Text, { children: row?.value }) })
+          ] }, index)
+        );
       })
     }
   );
@@ -3508,25 +3539,28 @@ function DataTable({
       return /* @__PURE__ */ createElement(TableColumn, { ...columnProps, key: id, id }, label);
     }) }),
     /* @__PURE__ */ jsx(TableBody, { children: rows.map((row, index) => {
-      return /* @__PURE__ */ jsx(TableRow, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, as, hidden, className: className2, children: children2, ...cellProps }) => {
-        if (hidden) {
-          return null;
-        }
-        const value = typeof children2 === "function" ? children2(row, index) : children2 || row[id];
-        return /* @__PURE__ */ createElement(
-          TableCell,
-          {
-            ...cellProps,
-            key: id,
-            className: cn("items-center", className2)
-          },
-          as ? createElement(as, {}, value) : value
-        );
-      }) }, index);
+      return (
+        // biome-ignore lint/suspicious/noArrayIndexKey: row data may not have unique ids
+        /* @__PURE__ */ jsx(TableRow, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, as, hidden, className: className2, children: children2, ...cellProps }) => {
+          if (hidden) {
+            return null;
+          }
+          const value = typeof children2 === "function" ? children2(row, index) : children2 || row[id];
+          return /* @__PURE__ */ createElement(
+            TableCell,
+            {
+              ...cellProps,
+              key: id,
+              className: cn("items-center", className2)
+            },
+            as ? createElement(as, {}, value) : value
+          );
+        }) }, index)
+      );
     }) })
   ] });
 }
-function DataColumn(props) {
+function DataColumn(_props) {
   return null;
 }
 var sizeMap2 = {
@@ -3567,7 +3601,12 @@ function Tooltip({ children, className, showArrow, ...props }) {
     children
   ] });
 }
-function TooltipBubble({ children, className, color: _color, ...props }) {
+function TooltipBubble({
+  children,
+  className,
+  color: _color,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(Box, { ...props, className, children });
 }
 function FloatingTooltip({ className, style, children, ...props }) {
@@ -3585,7 +3624,10 @@ function FloatingTooltip({ className, style, children, ...props }) {
     TooltipBubble,
     {
       ...props,
-      className: cn("fixed pointer-events-none z-[9999] -translate-x-1/2 -translate-y-[calc(100%+10px)]", className),
+      className: cn(
+        "fixed pointer-events-none z-[9999] -translate-x-1/2 -translate-y-[calc(100%+10px)]",
+        className
+      ),
       style: { ...style, left: position.x, top: position.y },
       children
     }
@@ -3732,7 +3774,12 @@ function FormFieldArray({
     children({ ...context, ...fieldProps })
   ] });
 }
-function FormResetButton({ values = {}, children, onPress, ...props }) {
+function FormResetButton({
+  values = {},
+  children,
+  onPress,
+  ...props
+}) {
   const { reset } = useFormContext();
   const handleReset = (e) => {
     reset(values);
@@ -4023,7 +4070,7 @@ function Toast({
   return /* @__PURE__ */ jsxs(Row, { ...props, className: cn(toast({ variant }), className), children: [
     /* @__PURE__ */ jsxs(Column, { flexGrow: 1, gap: "1", children: [
       title && /* @__PURE__ */ jsx(Text, { weight: "semibold", children: title }),
-      message && /* @__PURE__ */ jsx(Text, { color: "muted", children: message })
+      message && /* @__PURE__ */ jsx(Text, { color: title ? "muted" : void 0, children: message })
     ] }),
     hasActions && actions.map((action) => {
       return /* @__PURE__ */ jsx(Button, { variant: "outline", onPress: () => onClose?.(action), children: action }, action);
@@ -4043,13 +4090,13 @@ function Toast({
 }
 var positionClasses = {
   "top-left": "top-4 left-4 items-start",
-  "top": "top-4 left-1/2 -translate-x-1/2 items-center",
+  top: "top-4 left-1/2 -translate-x-1/2 items-center",
   "top-right": "top-4 right-4 items-end",
   "bottom-left": "bottom-4 left-4 items-start",
-  "bottom": "bottom-4 left-1/2 -translate-x-1/2 items-center",
+  bottom: "bottom-4 left-1/2 -translate-x-1/2 items-center",
   "bottom-right": "bottom-4 right-4 items-end",
-  "left": "top-1/2 left-4 -translate-y-1/2 items-start",
-  "right": "top-1/2 right-4 -translate-y-1/2 items-end"
+  left: "top-1/2 left-4 -translate-y-1/2 items-start",
+  right: "top-1/2 right-4 -translate-y-1/2 items-end"
 };
 var AnimatedBox = animated(Box);
 function Toaster({ duration = 0, position = "bottom-right" }) {
@@ -4134,21 +4181,6 @@ function useToast() {
   };
   return { toast: toast2, toasts };
 }
-function IconLabel({
-  icon,
-  label,
-  iconProps,
-  labelProps,
-  showLabel = true,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(Row, { alignItems: "center", gap: true, ...props, children: [
-    icon && /* @__PURE__ */ jsx(Icon, { ...iconProps, children: icon }),
-    showLabel && label && /* @__PURE__ */ jsx(Text, { ...labelProps, children: label }),
-    showLabel && children
-  ] });
-}
 var objectFitMap = {
   fill: "object-fill",
   contain: "object-contain",
@@ -4240,7 +4272,11 @@ function MenuItem({
         className
       ),
       children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(IconLabel, { icon, label, children }),
+        /* @__PURE__ */ jsxs(Row, { alignItems: "center", gap: true, children: [
+          icon && /* @__PURE__ */ jsx(Icon, { children: icon }),
+          label && /* @__PURE__ */ jsx(Text, { children: label }),
+          children
+        ] }),
         showChecked && isSelected && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(icons_exports.Check, {}) }),
         showSubMenuIcon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(icons_exports.ChevronRight, {}) })
       ] })
@@ -4369,73 +4405,6 @@ function NavbarItem({
     }
   );
 }
-var NavMenuContext = createContext(null);
-function NavMenu({ muteItems, onItemClick, className, children, ...props }) {
-  return /* @__PURE__ */ jsx(NavMenuContext.Provider, { value: { onItemClick }, children: /* @__PURE__ */ jsx(Column, { ...props, color: muteItems ? "muted" : void 0, className, children }) });
-}
-function NavMenuGroup({
-  title,
-  allowMinimize = true,
-  isMinimized,
-  className,
-  children,
-  ...props
-}) {
-  const [minimized, setMinimized] = useState(!!isMinimized);
-  const handleClick = () => {
-    if (allowMinimize) {
-      setMinimized((state) => !state);
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    Column,
-    {
-      ...props,
-      className: cn(
-        className,
-        allowMinimize && "cursor-pointer",
-        allowMinimize && minimized && "[&_.navmenu-children]:hidden"
-      ),
-      children: [
-        /* @__PURE__ */ jsxs(
-          Row,
-          {
-            paddingY: "2",
-            paddingX: "3",
-            alignItems: "center",
-            justifyContent: "space-between",
-            onClick: handleClick,
-            children: [
-              /* @__PURE__ */ jsx(Text, { size: "xs", weight: "semibold", color: "muted", transform: "uppercase", children: title }),
-              allowMinimize && /* @__PURE__ */ jsx(Icon, { rotate: minimized ? 0 : 90, color: "muted", children: /* @__PURE__ */ jsx(icons_exports.ChevronRight, {}) })
-            ]
-          }
-        ),
-        !minimized && /* @__PURE__ */ jsx(Column, { className: "navmenu-children", children })
-      ]
-    }
-  );
-}
-function NavMenuItem({ isSelected, className, children, ...props }) {
-  const { onItemClick } = useContext(NavMenuContext);
-  return /* @__PURE__ */ jsx(
-    Row,
-    {
-      ...props,
-      paddingY: "2",
-      paddingX: "3",
-      borderRadius: "md",
-      onClick: onItemClick,
-      className: cn(
-        "cursor-pointer",
-        "hover:bg-interactive",
-        isSelected && "bg-interactive font-medium",
-        className
-      ),
-      children
-    }
-  );
-}
 var PALETTE_LABELS = {
   neutral: "Neutral",
   slate: "Slate",
@@ -4445,6 +4414,11 @@ var PALETTE_LABELS = {
 };
 function PaletteSwitcher({ className }) {
   const { palette, setPalette } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const currentPalette = mounted ? palette : "neutral";
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -4458,13 +4432,13 @@ function PaletteSwitcher({ className }) {
           type: "button",
           onClick: () => setPalette(p),
           "aria-label": PALETTE_LABELS[p],
-          "aria-pressed": palette === p,
+          "aria-pressed": currentPalette === p,
           className: cn(
             "px-3 h-9 flex items-center justify-center cursor-pointer outline-none transition-colors text-sm",
             "[&:not(:first-child)]:border-l [&:not(:first-child)]:border-edge",
             "hover:bg-interactive",
             "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset",
-            palette === p ? "bg-interactive text-foreground-primary" : "text-foreground-muted"
+            currentPalette === p ? "bg-interactive text-foreground-primary" : "text-foreground-muted"
           ),
           children: PALETTE_LABELS[p]
         },
@@ -4473,7 +4447,7 @@ function PaletteSwitcher({ className }) {
     }
   );
 }
-var SvgEyeSlash = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", ...props, children: [
+var SvgEye = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", ...props, children: [
   /* @__PURE__ */ jsx("path", { fill: "none", d: "M0 0h256v256H0z" }),
   /* @__PURE__ */ jsx(
     "path",
@@ -4483,23 +4457,25 @@ var SvgEyeSlash = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3
       strokeLinecap: "round",
       strokeLinejoin: "round",
       strokeWidth: 16,
-      d: "m48 40 160 176M154.91 157.6a40 40 0 0 1-53.82-59.2M135.53 88.71a40 40 0 0 1 32.3 35.53"
+      d: "M128 56c-80 0-112 72-112 72s32 72 112 72 112-72 112-72-32-72-112-72"
     }
   ),
   /* @__PURE__ */ jsx(
-    "path",
+    "circle",
     {
+      cx: 128,
+      cy: 128,
+      r: 40,
       fill: "none",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      strokeWidth: 16,
-      d: "M208.61 169.1C230.41 149.58 240 128 240 128s-32-72-112-72a126 126 0 0 0-20.68 1.68M74 68.6C33.23 89.24 16 128 16 128s32 72 112 72a118.05 118.05 0 0 0 54-12.6"
+      strokeWidth: 16
     }
   )
 ] });
-var EyeSlash_default = SvgEyeSlash;
-var SvgEye = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", ...props, children: [
+var Eye_default = SvgEye;
+var SvgEyeSlash = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", ...props, children: [
   /* @__PURE__ */ jsx("path", { fill: "none", d: "M0 0h256v256H0z" }),
   /* @__PURE__ */ jsx(
     "path",
@@ -4509,24 +4485,22 @@ var SvgEye = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/
       strokeLinecap: "round",
       strokeLinejoin: "round",
       strokeWidth: 16,
-      d: "M128 56c-80 0-112 72-112 72s32 72 112 72 112-72 112-72-32-72-112-72"
+      d: "m48 40 160 176M154.91 157.6a40 40 0 0 1-53.82-59.2M135.53 88.71a40 40 0 0 1 32.3 35.53"
     }
   ),
   /* @__PURE__ */ jsx(
-    "circle",
+    "path",
     {
-      cx: 128,
-      cy: 128,
-      r: 40,
       fill: "none",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      strokeWidth: 16
+      strokeWidth: 16,
+      d: "M208.61 169.1C230.41 149.58 240 128 240 128s-32-72-112-72a126 126 0 0 0-20.68 1.68M74 68.6C33.23 89.24 16 128 16 128s32 72 112 72a118.05 118.05 0 0 0 54-12.6"
     }
   )
 ] });
-var Eye_default = SvgEye;
+var EyeSlash_default = SvgEyeSlash;
 function PasswordField({ label, className, ...props }) {
   const [show, setShow] = useState(false);
   const type = show ? "text" : "password";
@@ -4716,7 +4690,6 @@ function SearchField({
   ] });
 }
 function Select({
-  items = [],
   value,
   defaultValue,
   label,
@@ -4789,7 +4762,6 @@ function Select({
                 List,
                 {
                   ...listProps,
-                  items,
                   isFullscreen,
                   ...isFullscreen && {
                     shouldSelectOnPressUp: true,
@@ -4808,83 +4780,6 @@ function Select({
     }
   );
 }
-var SidebarContext = createContext(null);
-function Sidebar({ isCollapsed, muteItems, className, children, ...props }) {
-  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: { isCollapsed }, children: /* @__PURE__ */ jsx(
-    Column,
-    {
-      border: "right",
-      ...props,
-      className: cn(
-        "text-base",
-        isCollapsed && "w-16",
-        muteItems && "text-foreground-muted",
-        className
-      ),
-      children
-    }
-  ) });
-}
-function SidebarSection({
-  title,
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(Column, { ...props, paddingY: "2", className, children: [
-    title && /* @__PURE__ */ jsx(Box, { paddingX: "4", paddingY: "2", children: /* @__PURE__ */ jsx(Text, { size: "xs", weight: "semibold", transform: "uppercase", color: "muted", children: title }) }),
-    /* @__PURE__ */ jsx(Column, { children })
-  ] });
-}
-function SidebarHeader({
-  label,
-  icon,
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(Row, { ...props, paddingX: "4", paddingY: "3", gap: "3", alignItems: "center", className, children: [
-    icon && /* @__PURE__ */ jsx(Icon, { size: "sm", children: icon }),
-    label && /* @__PURE__ */ jsx(Text, { weight: "semibold", children: label }),
-    children
-  ] });
-}
-function SidebarItem({
-  label,
-  icon,
-  isSelected,
-  className,
-  children,
-  ...props
-}) {
-  const { isCollapsed } = useContext(SidebarContext);
-  return /* @__PURE__ */ jsxs(TooltipTrigger, { delay: 0, closeDelay: 0, isDisabled: !isCollapsed, children: [
-    /* @__PURE__ */ jsx(Focusable, { children: /* @__PURE__ */ jsxs(
-      Row,
-      {
-        ...props,
-        paddingX: isCollapsed ? "0" : "4",
-        paddingY: "2",
-        gap: "3",
-        alignItems: "center",
-        justifyContent: isCollapsed ? "center" : void 0,
-        borderRadius: "md",
-        className: cn(
-          "cursor-pointer",
-          "hover:bg-interactive",
-          isSelected && "bg-interactive font-medium",
-          className
-        ),
-        children: [
-          icon && /* @__PURE__ */ jsx(Icon, { size: "sm", children: icon }),
-          label && !isCollapsed && /* @__PURE__ */ jsx(Text, { children: label }),
-          children
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Tooltip, { placement: "right", children: label })
-  ] });
-}
 function Fill2({ percentage }) {
   const width = `calc(10px + ${percentage}% - ${percentage * 0.2}px)`;
   return /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 rounded-full bg-primary", style: { width } });
@@ -4989,6 +4884,20 @@ function Tab({ children, className, ...props }) {
 function TabPanel({ children, className, ...props }) {
   return /* @__PURE__ */ jsx(TabPanel$1, { ...props, className, children });
 }
+function TagGroup({ label, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs(TagGroup$1, { ...props, className: cn("flex flex-col gap-1", className), children: [
+    label && /* @__PURE__ */ jsx(Label, { children: label }),
+    /* @__PURE__ */ jsx(TagList, { className: "flex flex-wrap gap-1", children })
+  ] });
+}
+function Tag({ variant, children, className, ...props }) {
+  const textValue = typeof children === "string" ? children : void 0;
+  const styles = tag({ variant });
+  return /* @__PURE__ */ jsx(Tag$1, { ...props, textValue, className: cn(styles.base(), className), children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    allowsRemoving && /* @__PURE__ */ jsx(Button$1, { slot: "remove", className: styles.removeButton(), children: /* @__PURE__ */ jsx(Icon, { size: "xs", children: /* @__PURE__ */ jsx(icons_exports.X, {}) }) })
+  ] }) });
+}
 function getElement(target) {
   return "current" in target ? target.current : target;
 }
@@ -5171,7 +5080,7 @@ function ToggleGroup({
     onChange?.(Array.from(keys).map((k) => k.toString()));
   };
   return /* @__PURE__ */ jsxs(
-    TagGroup,
+    TagGroup$1,
     {
       ...props,
       selectedKeys: value || selectedKeys,
@@ -5191,7 +5100,7 @@ function ToggleGroup({
 }
 function ToggleGroupItem({ className, children, ...props }) {
   return /* @__PURE__ */ jsx(
-    Tag,
+    Tag$1,
     {
       ...props,
       className: cn(
@@ -5220,6 +5129,6 @@ function ZenProvider({
   return /* @__PURE__ */ jsx(ToastProvider, { ...toast2, children });
 }
 
-export { Accordion, AccordionItem, AlertBanner, AlertDialog, Blockquote, Box, Breadcrumb, Breadcrumbs, Button, Calendar, Checkbox, Code, Column, ComboBox, ConfirmationDialog, Container, CopyButton, DataCard, DataColumn, DataTable, Dialog, Dots, Flexbox, FloatingTooltip, Form, FormButtons, FormController, FormField, FormFieldArray, FormResetButton, FormSubmitButton, Grid, Heading, HoverTrigger, Icon, IconLabel, Image, Label, List, ListItem, ListSection, ListSeparator, Loading, LoadingButton, Menu, MenuItem, MenuSection, MenuSeparator, Modal, NavMenu, NavMenuGroup, NavMenuItem, Navbar, NavbarContext, NavbarItem, PALETTES, PaletteSwitcher, PasswordField, Popover, ProgressBar, ProgressCircle, Radio, RadioGroup, Row, SearchField, Select, Sidebar, SidebarHeader, SidebarItem, SidebarSection, Slider, Spinner, StatusLight, SubMenuTrigger, Switch, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, Tabs, Text, TextField, ThemeButton, ThemeSwitcher, Toast, ToastContext, ToastProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipBubble, ZenProvider, cn, getCssColorValue, isHeightPreset, isMaxHeightPreset, isMaxWidthPreset, isMinHeightPreset, isMinWidthPreset, isWidthPreset, mapAlignContent, mapAlignItems, mapAlignSelf, mapBackgroundColor, mapBorder, mapBorderColor, mapBorderRadius, mapBorderWidth, mapCursor, mapDisplay, mapFlexDirection, mapFlexWrap, mapFontSize, mapFontWeight, mapGap, mapGridAutoFlow, mapGridColumns, mapGridRows, mapHeadingSize, mapHeight, mapJustifyContent, mapJustifyItems, mapLetterSpacing, mapLineHeight, mapMargin, mapMaxHeight, mapMaxWidth, mapMinHeight, mapMinWidth, mapOpacity, mapOverflow, mapPadding, mapPointerEvents, mapPosition, mapShadow, mapStateStyles, mapTextAlign, mapTextColor, mapTextDecorationStyle, mapTextIndent, mapTextTransform, mapTextWrap, mapVerticalAlign, mapWhitespace, mapWidth, mapWordBreak, removeToast, resolveRender, useBreakpoint, useDebounce, useInitTheme, useNavigationContext, useTheme, useToast };
+export { Accordion, AccordionItem, AlertBanner, AlertDialog, Blockquote, Box, Breadcrumb, Breadcrumbs, Button, Calendar, Checkbox, Code, Column, ComboBox, ConfirmationDialog, Container, CopyButton, DataCard, DataColumn, DataTable, Dialog, Dots, Flexbox, FloatingTooltip, Form, FormButtons, FormController, FormField, FormFieldArray, FormResetButton, FormSubmitButton, Grid, Heading, HoverTrigger, Icon, Image, Label, List, ListItem, ListSection, ListSeparator, Loading, LoadingButton, Menu, MenuItem, MenuSection, MenuSeparator, Modal, Navbar, NavbarContext, NavbarItem, PALETTES, PaletteSwitcher, PasswordField, Popover, ProgressBar, ProgressCircle, Radio, RadioGroup, Row, SearchField, Select, Slider, Spinner, StatusLight, SubMenuTrigger, Switch, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, Tabs, Tag, TagGroup, Text, TextField, ThemeButton, ThemeSwitcher, Toast, ToastContext, ToastProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipBubble, ZenProvider, cn, getCssColorValue, isHeightPreset, isMaxHeightPreset, isMaxWidthPreset, isMinHeightPreset, isMinWidthPreset, isWidthPreset, mapAlignContent, mapAlignItems, mapAlignSelf, mapBackgroundColor, mapBorder, mapBorderColor, mapBorderRadius, mapBorderWidth, mapCursor, mapDisplay, mapFlexDirection, mapFlexWrap, mapFontSize, mapFontWeight, mapGap, mapGridAutoFlow, mapGridColumns, mapGridRows, mapHeadingSize, mapHeight, mapJustifyContent, mapJustifyItems, mapLetterSpacing, mapLineHeight, mapMargin, mapMaxHeight, mapMaxWidth, mapMinHeight, mapMinWidth, mapOpacity, mapOverflow, mapPadding, mapPointerEvents, mapPosition, mapShadow, mapStateStyles, mapTextAlign, mapTextColor, mapTextDecorationStyle, mapTextIndent, mapTextTransform, mapTextWrap, mapVerticalAlign, mapWhitespace, mapWidth, mapWordBreak, removeToast, resolveRender, useBreakpoint, useDebounce, useInitTheme, useNavigationContext, useTheme, useToast };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map