@umami/react-zen 0.165.0 → 0.167.0

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { ButtonProps as ButtonProps$1, DisclosureGroupProps, DisclosureProps, DialogProps as DialogProps$1, BreadcrumbsProps, BreadcrumbProps, CalendarProps as CalendarProps$1, CheckboxProps as CheckboxProps$1, ComboBoxProps, TableProps, TooltipProps as TooltipProps$1, LabelProps as LabelProps$1, ListBoxProps, ListBoxItemProps, SeparatorProps, ListBoxSectionProps, MenuProps as MenuProps$1, MenuItemProps as MenuItemProps$1, MenuSectionProps as MenuSectionProps$1, ModalOverlayProps, ModalRenderProps, TextFieldProps as TextFieldProps$1, PopoverProps, ProgressBarProps as ProgressBarProps$1, RadioProps, RadioGroupProps as RadioGroupProps$1, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SelectValueRenderProps, SliderProps as SliderProps$1, SwitchProps as SwitchProps$1, TableHeaderProps, TableBodyProps, RowProps as RowProps$1, ColumnProps as ColumnProps$1, CellProps, TabsProps, TabListProps, TabProps, TabPanelProps, ToggleButtonProps, TagGroupProps, TagProps } from 'react-aria-components';
+import { ButtonProps as ButtonProps$1, DisclosureGroupProps, DisclosureProps, DialogProps as DialogProps$1, BreadcrumbsProps, BreadcrumbProps, CalendarProps as CalendarProps$1, CheckboxProps as CheckboxProps$1, ListBoxProps, ListBoxItemProps, SeparatorProps, ListBoxSectionProps, ComboBoxProps, ListBoxRenderProps, PopoverProps, TableProps, TooltipProps as TooltipProps$1, LabelProps as LabelProps$1, MenuProps as MenuProps$1, MenuItemProps as MenuItemProps$1, MenuSectionProps as MenuSectionProps$1, ModalOverlayProps, ModalRenderProps, TextFieldProps as TextFieldProps$1, ProgressBarProps as ProgressBarProps$1, RadioProps, RadioGroupProps as RadioGroupProps$1, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SelectValueRenderProps, SliderProps as SliderProps$1, SwitchProps as SwitchProps$1, TableHeaderProps, TableBodyProps, RowProps as RowProps$1, ColumnProps as ColumnProps$1, CellProps, TabsProps, TabListProps, TabProps, TabPanelProps, ToggleButtonProps, TagGroupProps, TagProps } from 'react-aria-components';
 export { BreadcrumbProps, BreadcrumbsProps, DialogTrigger, FileTrigger, Focusable, MenuTrigger, PopoverProps, Pressable, RadioProps, RouterProvider, Selection, SubmenuTrigger, TabListProps, TabPanelProps, TabProps, TableBodyProps, TabsProps, TooltipTrigger } from 'react-aria-components';
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, ReactElement, Dispatch, SetStateAction } from 'react';
@@ -312,11 +312,35 @@ interface CheckboxProps extends CheckboxProps$1 {
 }
 declare function Checkbox({ label, className, children, ...props }: CheckboxProps): react.JSX.Element;
 
+interface ListProps extends ListBoxProps<any> {
+    items?: any[];
+    idProperty?: string;
+    labelProperty?: string;
+    separatorProperty?: string;
+    highlightColor?: string;
+    showCheckmark?: boolean;
+    label?: string;
+    value?: string[];
+    onChange?: (value: string[]) => void;
+}
+declare function List({ items, idProperty, labelProperty, separatorProperty, highlightColor, showCheckmark, label, value, onChange, className, selectedKeys, defaultSelectedKeys, onSelectionChange, style, children, ...props }: ListProps): react.JSX.Element;
+interface ListItemProps extends ListBoxItemProps<any> {
+    showCheckmark?: boolean;
+}
+declare function ListItem({ id, children, className, showCheckmark, ...props }: ListItemProps): react.JSX.Element;
+declare function ListSeparator({ className, ...props }: SeparatorProps): react.JSX.Element;
+interface ListSectionProps extends ListBoxSectionProps<any> {
+    title?: string;
+}
+declare function ListSection({ title, className, children, ...props }: ListSectionProps): react.JSX.Element;
+
 interface ComboboxProps extends ComboBoxProps<any> {
-    items: any[];
-    className?: string;
+    items?: any[];
+    renderEmptyState?: (props: ListBoxRenderProps) => ReactNode;
+    listProps?: ListProps;
+    popoverProps?: PopoverProps;
 }
-declare function ComboBox({ items, className, ...props }: ComboboxProps): react.JSX.Element;
+declare function ComboBox({ items, className, renderEmptyState, listProps, popoverProps, children, ...props }: ComboboxProps): react.JSX.Element;
 
 interface CodeProps extends HTMLAttributes<HTMLElement> {
     asChild?: boolean;
@@ -444,28 +468,6 @@ interface LabelProps extends LabelProps$1 {
 }
 declare function Label({ className, ...props }: LabelProps): react.JSX.Element;
 
-interface ListProps extends ListBoxProps<any> {
-    items?: any[];
-    idProperty?: string;
-    labelProperty?: string;
-    separatorProperty?: string;
-    highlightColor?: string;
-    showCheckmark?: boolean;
-    label?: string;
-    value?: string[];
-    onChange?: (value: string[]) => void;
-}
-declare function List({ items, idProperty, labelProperty, separatorProperty, highlightColor, showCheckmark, label, value, onChange, className, selectedKeys, defaultSelectedKeys, onSelectionChange, style, children, ...props }: ListProps): react.JSX.Element;
-interface ListItemProps extends ListBoxItemProps<any> {
-    showCheckmark?: boolean;
-}
-declare function ListItem({ id, children, className, showCheckmark, ...props }: ListItemProps): react.JSX.Element;
-declare function ListSeparator({ className, ...props }: SeparatorProps): react.JSX.Element;
-interface ListSectionProps extends ListBoxSectionProps<any> {
-    title?: string;
-}
-declare function ListSection({ title, className, children, ...props }: ListSectionProps): react.JSX.Element;
-
 interface LoadingProps {
     size?: 'sm' | 'md' | 'lg';
     icon?: 'dots' | 'spinner';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps as ButtonProps$1, DisclosureGroupProps, DisclosureProps, DialogProps as DialogProps$1, BreadcrumbsProps, BreadcrumbProps, CalendarProps as CalendarProps$1, CheckboxProps as CheckboxProps$1, ComboBoxProps, TableProps, TooltipProps as TooltipProps$1, LabelProps as LabelProps$1, ListBoxProps, ListBoxItemProps, SeparatorProps, ListBoxSectionProps, MenuProps as MenuProps$1, MenuItemProps as MenuItemProps$1, MenuSectionProps as MenuSectionProps$1, ModalOverlayProps, ModalRenderProps, TextFieldProps as TextFieldProps$1, PopoverProps, ProgressBarProps as ProgressBarProps$1, RadioProps, RadioGroupProps as RadioGroupProps$1, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SelectValueRenderProps, SliderProps as SliderProps$1, SwitchProps as SwitchProps$1, TableHeaderProps, TableBodyProps, RowProps as RowProps$1, ColumnProps as ColumnProps$1, CellProps, TabsProps, TabListProps, TabProps, TabPanelProps, ToggleButtonProps, TagGroupProps, TagProps } from 'react-aria-components';
+import { ButtonProps as ButtonProps$1, DisclosureGroupProps, DisclosureProps, DialogProps as DialogProps$1, BreadcrumbsProps, BreadcrumbProps, CalendarProps as CalendarProps$1, CheckboxProps as CheckboxProps$1, ListBoxProps, ListBoxItemProps, SeparatorProps, ListBoxSectionProps, ComboBoxProps, ListBoxRenderProps, PopoverProps, TableProps, TooltipProps as TooltipProps$1, LabelProps as LabelProps$1, MenuProps as MenuProps$1, MenuItemProps as MenuItemProps$1, MenuSectionProps as MenuSectionProps$1, ModalOverlayProps, ModalRenderProps, TextFieldProps as TextFieldProps$1, ProgressBarProps as ProgressBarProps$1, RadioProps, RadioGroupProps as RadioGroupProps$1, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SelectValueRenderProps, SliderProps as SliderProps$1, SwitchProps as SwitchProps$1, TableHeaderProps, TableBodyProps, RowProps as RowProps$1, ColumnProps as ColumnProps$1, CellProps, TabsProps, TabListProps, TabProps, TabPanelProps, ToggleButtonProps, TagGroupProps, TagProps } from 'react-aria-components';
 export { BreadcrumbProps, BreadcrumbsProps, DialogTrigger, FileTrigger, Focusable, MenuTrigger, PopoverProps, Pressable, RadioProps, RouterProvider, Selection, SubmenuTrigger, TabListProps, TabPanelProps, TabProps, TableBodyProps, TabsProps, TooltipTrigger } from 'react-aria-components';
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, ReactElement, Dispatch, SetStateAction } from 'react';
@@ -312,11 +312,35 @@ interface CheckboxProps extends CheckboxProps$1 {
 }
 declare function Checkbox({ label, className, children, ...props }: CheckboxProps): react.JSX.Element;
 
+interface ListProps extends ListBoxProps<any> {
+    items?: any[];
+    idProperty?: string;
+    labelProperty?: string;
+    separatorProperty?: string;
+    highlightColor?: string;
+    showCheckmark?: boolean;
+    label?: string;
+    value?: string[];
+    onChange?: (value: string[]) => void;
+}
+declare function List({ items, idProperty, labelProperty, separatorProperty, highlightColor, showCheckmark, label, value, onChange, className, selectedKeys, defaultSelectedKeys, onSelectionChange, style, children, ...props }: ListProps): react.JSX.Element;
+interface ListItemProps extends ListBoxItemProps<any> {
+    showCheckmark?: boolean;
+}
+declare function ListItem({ id, children, className, showCheckmark, ...props }: ListItemProps): react.JSX.Element;
+declare function ListSeparator({ className, ...props }: SeparatorProps): react.JSX.Element;
+interface ListSectionProps extends ListBoxSectionProps<any> {
+    title?: string;
+}
+declare function ListSection({ title, className, children, ...props }: ListSectionProps): react.JSX.Element;
+
 interface ComboboxProps extends ComboBoxProps<any> {
-    items: any[];
-    className?: string;
+    items?: any[];
+    renderEmptyState?: (props: ListBoxRenderProps) => ReactNode;
+    listProps?: ListProps;
+    popoverProps?: PopoverProps;
 }
-declare function ComboBox({ items, className, ...props }: ComboboxProps): react.JSX.Element;
+declare function ComboBox({ items, className, renderEmptyState, listProps, popoverProps, children, ...props }: ComboboxProps): react.JSX.Element;
 
 interface CodeProps extends HTMLAttributes<HTMLElement> {
     asChild?: boolean;
@@ -444,28 +468,6 @@ interface LabelProps extends LabelProps$1 {
 }
 declare function Label({ className, ...props }: LabelProps): react.JSX.Element;
 
-interface ListProps extends ListBoxProps<any> {
-    items?: any[];
-    idProperty?: string;
-    labelProperty?: string;
-    separatorProperty?: string;
-    highlightColor?: string;
-    showCheckmark?: boolean;
-    label?: string;
-    value?: string[];
-    onChange?: (value: string[]) => void;
-}
-declare function List({ items, idProperty, labelProperty, separatorProperty, highlightColor, showCheckmark, label, value, onChange, className, selectedKeys, defaultSelectedKeys, onSelectionChange, style, children, ...props }: ListProps): react.JSX.Element;
-interface ListItemProps extends ListBoxItemProps<any> {
-    showCheckmark?: boolean;
-}
-declare function ListItem({ id, children, className, showCheckmark, ...props }: ListItemProps): react.JSX.Element;
-declare function ListSeparator({ className, ...props }: SeparatorProps): react.JSX.Element;
-interface ListSectionProps extends ListBoxSectionProps<any> {
-    title?: string;
-}
-declare function ListSection({ title, className, children, ...props }: ListSectionProps): react.JSX.Element;
-
 interface LoadingProps {
     size?: 'sm' | 'md' | 'lg';
     icon?: 'dots' | 'spinner';

package/dist/index.js

@@ -32157,7 +32157,7 @@ function Checkbox2({ label, className, children, ...props }) {
 }
 
 // src/components/ComboBox.tsx
-var import_classnames21 = __toESM(require_classnames());
+var import_classnames22 = __toESM(require_classnames());
 
 // src/components/List.tsx
 var import_react179 = require("react");
@@ -32289,18 +32289,64 @@ function ListSection({ title, className, children, ...props }) {
   ] });
 }
 
+// src/components/Grid.tsx
+var import_classnames21 = __toESM(require_classnames());
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function Grid({
+  display = "grid",
+  justifyContent,
+  justifyItems,
+  alignContent,
+  alignItems,
+  gap,
+  gapX,
+  gapY,
+  autoFlow,
+  rows,
+  columns,
+  areas,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const [classes, styleProps] = useDesignProps({
+    display,
+    justifyContent,
+    justifyItems,
+    alignContent,
+    alignItems,
+    gap,
+    gapX,
+    gapY,
+    gridTemplateRows: rows,
+    gridTemplateColumns: columns,
+    gridTemplateAreas: areas,
+    gridAutoFlow: autoFlow
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Box, { ...props, className: (0, import_classnames21.default)(className, classes), style: { ...styleProps, ...style }, children });
+}
+
 // css-modules:E:\dev\umami-react-zen\src\components\ComboBox.module.css
 var ComboBox_default = { "combobox": "ComboBox_combobox__ZDYxZ", "input": "ComboBox_input__YjNkN", "button": "ComboBox_button__NTlhM", "list": "ComboBox_list__NTdiY" };
 
 // src/components/ComboBox.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
-function ComboBox2({ items, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)($d01f2c01039c0eec$export$72b9695b8216309a, { ...props, className: (0, import_classnames21.default)(ComboBox_default.combobox, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Row, { alignItems: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)($3985021b0ad6602f$export$f5b8910cec6cf069, { className: ComboBox_default.input }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: ComboBox_default.button, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon2, { "aria-hidden": "true", rotate: 90, size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronRight, {}) }) })
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function ComboBox2({
+  items,
+  className,
+  renderEmptyState,
+  listProps,
+  popoverProps,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)($d01f2c01039c0eec$export$72b9695b8216309a, { ...props, className: (0, import_classnames22.default)(ComboBox_default.combobox, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Grid, { alignItems: "center", columns: "1fr auto", width: "100%", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)($3985021b0ad6602f$export$f5b8910cec6cf069, { className: ComboBox_default.input }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: ComboBox_default.button, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon2, { "aria-hidden": "true", rotate: 90, size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChevronRight, {}) }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)($07b14b47974efb58$export$5b6b19405a83ff9d, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: ComboBox_default.list, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(List, { items, children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ListItem, { textValue: item, children: item }, item)) }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)($07b14b47974efb58$export$5b6b19405a83ff9d, { ...popoverProps, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: ComboBox_default.list, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(List, { items, renderEmptyState, ...listProps, children: children || items?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ListItem, { textValue: item, children: item }, item)) }) }) })
   ] });
 }
 
@@ -32308,20 +32354,20 @@ function ComboBox2({ items, className, ...props }) {
 var Code_default = { "code": "Code_code__ZTc0M" };
 
 // src/components/Code.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function Code({ asChild, children }) {
   const Component = asChild ? Slot : "code";
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Component, { className: Code_default.code, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Component, { className: Code_default.code, children });
 }
 
 // src/components/Container.tsx
-var import_classnames22 = __toESM(require_classnames());
+var import_classnames23 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Container.module.css
 var Container_default = { "container": "Container_container__ZWU0Y", "centered": "Container_centered__OTM1M", "fluid": "Container_fluid__NTBhY" };
 
 // src/components/Container.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function Container({
   isCentered = true,
   isFluid,
@@ -32329,11 +32375,11 @@ function Container({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     Box,
     {
       ...props,
-      className: (0, import_classnames22.default)(
+      className: (0, import_classnames23.default)(
         Container_default.container,
         className,
         isCentered && Container_default.centered,
@@ -32346,21 +32392,21 @@ function Container({
 
 // src/components/ConfirmationDialog.tsx
 var import_react182 = require("react");
-var import_classnames25 = __toESM(require_classnames());
+var import_classnames26 = __toESM(require_classnames());
 
 // src/components/TextField.tsx
 var import_react181 = require("react");
-var import_classnames24 = __toESM(require_classnames());
+var import_classnames25 = __toESM(require_classnames());
 
 // src/components/CopyButton.tsx
 var import_react180 = require("react");
-var import_classnames23 = __toESM(require_classnames());
+var import_classnames24 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\CopyButton.module.css
 var CopyButton_default = { "icon": "CopyButton_icon__YTM2Y", "copy-button": "CopyButton_copy-button__MjY1M" };
 
 // src/components/CopyButton.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var TIMEOUT = 2e3;
 function CopyButton({ value, timeout = TIMEOUT, className, children, ...props }) {
   const [copied, setCopied] = (0, import_react180.useState)(false);
@@ -32373,14 +32419,14 @@ function CopyButton({ value, timeout = TIMEOUT, className, children, ...props })
       ref.current = +setTimeout(() => setCopied(false), timeout);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon2, { ...props, className: (0, import_classnames23.default)(CopyButton_default.icon, className), onClick: handleCopy, children: copied ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Check, {}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Copy, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon2, { ...props, className: (0, import_classnames24.default)(CopyButton_default.icon, className), onClick: handleCopy, children: copied ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Check, {}) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Copy, {}) });
 }
 
 // css-modules:E:\dev\umami-react-zen\src\components\TextField.module.css
 var TextField_default = { "field": "TextField_field__YzU1O", "icon": "TextField_icon__MDJlY", "novalue": "TextField_novalue__NDg4Y", "textarea": "TextField_textarea__NTQ3M", "resize-vertical": "TextField_resize-vertical__ZDc3N", "resize-horizontal": "TextField_resize-horizontal__MzJjY", "resize-none": "TextField_resize-none__ZmUxZ" };
 
 // src/components/TextField.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function TextField2({
   value,
   defaultValue,
@@ -32405,14 +32451,14 @@ function TextField2({
   (0, import_react181.useEffect)(() => {
     setInputValue(value);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Label2, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Label2, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       $bcdf0525bf22703d$export$2c73285ae9390cec,
       {
         "aria-label": "Text",
         ...props,
-        className: (0, import_classnames24.default)(
+        className: (0, import_classnames25.default)(
           TextField_default.field,
           asTextArea && TextField_default.textarea,
           allowCopy && TextField_default.copy,
@@ -32425,8 +32471,8 @@ function TextField2({
         isDisabled,
         onChange: handleChange,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Component, { placeholder }),
-          allowCopy && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CopyButton, { value: inputValue, className: TextField_default.icon })
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Component, { placeholder }),
+          allowCopy && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CopyButton, { value: inputValue, className: TextField_default.icon })
         ]
       }
     )
@@ -32437,7 +32483,7 @@ function TextField2({
 var ConfirmationDialog_default = { "dialog": "ConfirmationDialog_dialog__YjQzN", "value": "ConfirmationDialog_value__Njg3N" };
 
 // src/components/ConfirmationDialog.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function ConfirmationDialog({
   value,
   confirmMessage,
@@ -32449,21 +32495,21 @@ function ConfirmationDialog({
   const handleChange = (e) => {
     setCanSave(e.target.value === value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     AlertDialog,
     {
       ...props,
-      className: (0, import_classnames25.default)(ConfirmationDialog_default.dialog, className),
+      className: (0, import_classnames26.default)(ConfirmationDialog_default.dialog, className),
       isConfirmDisabled: !canSave,
       children: ({ close }) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
           typeof children === "function" ? children({ close }) : children,
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Text, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Text, { children: [
             confirmMessage || "Type the following value to confirm",
             ":"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: ConfirmationDialog_default.value, children: value }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TextField2, { autoFocus: true, "aria-label": "Confirmation", onChange: handleChange })
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: ConfirmationDialog_default.value, children: value }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TextField2, { autoFocus: true, "aria-label": "Confirmation", onChange: handleChange })
         ] });
       }
     }
@@ -32471,66 +32517,66 @@ function ConfirmationDialog({
 }
 
 // src/components/DataTable.tsx
-var import_classnames27 = __toESM(require_classnames());
+var import_classnames28 = __toESM(require_classnames());
 var import_react183 = require("react");
 
 // src/components/Table.tsx
-var import_classnames26 = __toESM(require_classnames());
+var import_classnames27 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Table.module.css
 var Table_default = { "table": "Table_table__YjllN", "header": "Table_header__NmE0Y", "body": "Table_body__ZWYwN", "row": "Table_row__Y2M0Y", "column": "Table_column__ZGY2M", "cell": "Table_cell__MmZjM", "start": "Table_start__NGFiN", "center": "Table_center__NzFjM", "end": "Table_end__NmQyY" };
 
 // src/components/Table.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var gridTemplateColumns = "repeat(auto-fit, minmax(140px, 1fr))";
 function Table2({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)($1910c06f0ca9905e$export$54ec01a60f47d33d, { "aria-label": "Table", ...props, className: (0, import_classnames26.default)(Table_default.table, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)($1910c06f0ca9905e$export$54ec01a60f47d33d, { "aria-label": "Table", ...props, className: (0, import_classnames27.default)(Table_default.table, className), children });
 }
 function TableHeader({ children, className, style, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     $1910c06f0ca9905e$export$f850895b287ef28e,
     {
       ...props,
-      className: (0, import_classnames26.default)(Table_default.header, className),
+      className: (0, import_classnames27.default)(Table_default.header, className),
       style: { gridTemplateColumns, ...style },
       children
     }
   );
 }
 function TableBody({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)($1910c06f0ca9905e$export$76ccd210b9029917, { ...props, className: (0, import_classnames26.default)(Table_default.body, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)($1910c06f0ca9905e$export$76ccd210b9029917, { ...props, className: (0, import_classnames27.default)(Table_default.body, className), children });
 }
 function TableRow({ children, className, style, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     $1910c06f0ca9905e$export$b59bdbef9ce70de2,
     {
       ...props,
-      className: (0, import_classnames26.default)(Table_default.row, className),
+      className: (0, import_classnames27.default)(Table_default.row, className),
       style: { gridTemplateColumns, ...style },
       children
     }
   );
 }
 function TableColumn({ children, className, align, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     $1910c06f0ca9905e$export$816b5d811295e6bc,
     {
       ...props,
-      className: (0, import_classnames26.default)(Table_default.column, className, align && Table_default[align]),
+      className: (0, import_classnames27.default)(Table_default.column, className, align && Table_default[align]),
       isRowHeader: true,
       children
     }
   );
 }
 function TableCell({ children, className, align, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)($1910c06f0ca9905e$export$f6f0c3fe4ec306ea, { ...props, className: (0, import_classnames26.default)(Table_default.cell, className, align && Table_default[align]), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)($1910c06f0ca9905e$export$f6f0c3fe4ec306ea, { ...props, className: (0, import_classnames27.default)(Table_default.cell, className, align && Table_default[align]), children });
 }
 
 // css-modules:E:\dev\umami-react-zen\src\components\DataTable.module.css
 var DataTable_default = { "datatable": "DataTable_datatable__MWRkN", "cell": "DataTable_cell__MmMyM" };
 
 // src/components/DataTable.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var import_react184 = require("react");
 function DataTable({ data = [], className, children, ...props }) {
   const items = data.length && data?.[0]?.id === void 0 ? data.map((row, id) => ({ ...row, id })) : data;
@@ -32543,15 +32589,15 @@ function DataTable({ data = [], className, children, ...props }) {
     return null;
   })?.filter((n) => n);
   const gridTemplateColumns2 = widths.join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Table2, { ...props, className: (0, import_classnames27.default)(DataTable_default.datatable, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TableHeader, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, label, as, hidden, width, ...columnProps }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Table2, { ...props, className: (0, import_classnames28.default)(DataTable_default.datatable, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TableHeader, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, label, as, hidden, width, ...columnProps }) => {
       if (hidden) {
         return null;
       }
       return /* @__PURE__ */ (0, import_react184.createElement)(TableColumn, { ...columnProps, key: id, id }, label);
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TableBody, { children: items.map((row, index) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TableRow, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, as, hidden, className: className2, children: children2, ...cellProps }) => {
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TableBody, { children: items.map((row, index) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TableRow, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, as, hidden, className: className2, children: children2, ...cellProps }) => {
         if (hidden) {
           return null;
         }
@@ -32561,7 +32607,7 @@ function DataTable({ data = [], className, children, ...props }) {
           {
             ...cellProps,
             key: id,
-            className: (0, import_classnames27.default)(DataTable_default.cell, className2)
+            className: (0, import_classnames28.default)(DataTable_default.cell, className2)
           },
           as ? (0, import_react183.createElement)(as, {}, value) : value
         );
@@ -32574,40 +32620,40 @@ function DataColumn(props) {
 }
 
 // src/components/Dots.tsx
-var import_classnames28 = __toESM(require_classnames());
+var import_classnames29 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Dots.module.css
 var Dots_default = { "dots": "Dots_dots__ZjI3Y", "size-sm": "Dots_size-sm__ZTRjY", "size-md": "Dots_size-md__MmRkZ", "size-lg": "Dots_size-lg__MGJmY", "dot": "Dots_dot__ZDRiM", "dots-blink": "Dots_dots-blink__MWU4Z" };
 
 // src/components/Dots.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function Dots({ size = "md", className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { ...props, className: (0, import_classnames28.default)(Dots_default.dots, className, Dots_default[`size-${size}`]), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: Dots_default.dot }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: Dots_default.dot }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: Dots_default.dot })
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { ...props, className: (0, import_classnames29.default)(Dots_default.dots, className, Dots_default[`size-${size}`]), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: Dots_default.dot }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: Dots_default.dot }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: Dots_default.dot })
   ] });
 }
 
 // src/components/FloatingTooltip.tsx
 var import_react185 = require("react");
-var import_classnames30 = __toESM(require_classnames());
+var import_classnames31 = __toESM(require_classnames());
 
 // src/components/Tooltip.tsx
-var import_classnames29 = __toESM(require_classnames());
+var import_classnames30 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Tooltip.module.css
 var Tooltip_default = { "tooltip": "Tooltip_tooltip__YmY4Z", "bubble": "Tooltip_bubble__MWE0N", "arrow": "Tooltip_arrow__OGM1M", "slide": "Tooltip_slide__MGVmY" };
 
 // src/components/Tooltip.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function Tooltip2({ children, className, showArrow, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: (0, import_classnames29.default)(Tooltip_default.tooltip, className), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipBubble, { showArrow, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: (0, import_classnames30.default)(Tooltip_default.tooltip, className), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TooltipBubble, { showArrow, children }) });
 }
 function TooltipBubble({ showArrow, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { ...props, children: [
-    showArrow && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)($44f671af83e7d9e0$export$746d02f47f4d381, { className: Tooltip_default.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: Tooltip_default.bubble, children })
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { ...props, children: [
+    showArrow && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)($44f671af83e7d9e0$export$746d02f47f4d381, { className: Tooltip_default.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: Tooltip_default.bubble, children })
   ] });
 }
 
@@ -32615,7 +32661,7 @@ function TooltipBubble({ showArrow, children, ...props }) {
 var FloatingTooltip_default = { "floating": "FloatingTooltip_floating__ZjM4N" };
 
 // src/components/FloatingTooltip.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = 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)(() => {
@@ -32627,55 +32673,17 @@ function FloatingTooltip({ className, style, children, ...props }) {
       document.removeEventListener("mousemove", handler);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     TooltipBubble,
     {
       ...props,
-      className: (0, import_classnames30.default)(FloatingTooltip_default.floating, className, "BALLLLSSSS"),
+      className: (0, import_classnames31.default)(FloatingTooltip_default.floating, className, "BALLLLSSSS"),
       style: { ...style, left: position.x, top: position.y },
       children
     }
   );
 }
 
-// src/components/Grid.tsx
-var import_classnames31 = __toESM(require_classnames());
-var import_jsx_runtime45 = require("react/jsx-runtime");
-function Grid({
-  display = "grid",
-  justifyContent,
-  justifyItems,
-  alignContent,
-  alignItems,
-  gap,
-  gapX,
-  gapY,
-  autoFlow,
-  rows,
-  columns,
-  areas,
-  className,
-  style,
-  children,
-  ...props
-}) {
-  const [classes, styleProps] = useDesignProps({
-    display,
-    justifyContent,
-    justifyItems,
-    alignContent,
-    alignItems,
-    gap,
-    gapX,
-    gapY,
-    gridTemplateRows: rows,
-    gridTemplateColumns: columns,
-    gridTemplateAreas: areas,
-    gridAutoFlow: autoFlow
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Box, { ...props, className: (0, import_classnames31.default)(className, classes), style: { ...styleProps, ...style }, children });
-}
-
 // src/components/Heading.tsx
 var import_classnames32 = __toESM(require_classnames());
 
@@ -33277,6 +33285,7 @@ function Select2({
   };
   const handleOpenChange = () => {
     setSearch("");
+    onSearch?.("");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     $82d7e5349645de74$export$ef9b1a59e592288f,

package/dist/index.mjs

@@ -32040,7 +32040,7 @@ function Checkbox2({ label, className, children, ...props }) {
 }
 
 // src/components/ComboBox.tsx
-var import_classnames21 = __toESM(require_classnames());
+var import_classnames22 = __toESM(require_classnames());
 
 // src/components/List.tsx
 import { Fragment as Fragment4 } from "react";
@@ -32172,18 +32172,64 @@ function ListSection({ title, className, children, ...props }) {
   ] });
 }
 
+// src/components/Grid.tsx
+var import_classnames21 = __toESM(require_classnames());
+import { jsx as jsx34 } from "react/jsx-runtime";
+function Grid({
+  display = "grid",
+  justifyContent,
+  justifyItems,
+  alignContent,
+  alignItems,
+  gap,
+  gapX,
+  gapY,
+  autoFlow,
+  rows,
+  columns,
+  areas,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const [classes, styleProps] = useDesignProps({
+    display,
+    justifyContent,
+    justifyItems,
+    alignContent,
+    alignItems,
+    gap,
+    gapX,
+    gapY,
+    gridTemplateRows: rows,
+    gridTemplateColumns: columns,
+    gridTemplateAreas: areas,
+    gridAutoFlow: autoFlow
+  });
+  return /* @__PURE__ */ jsx34(Box, { ...props, className: (0, import_classnames21.default)(className, classes), style: { ...styleProps, ...style }, children });
+}
+
 // css-modules:E:\dev\umami-react-zen\src\components\ComboBox.module.css
 var ComboBox_default = { "combobox": "ComboBox_combobox__ZDYxZ", "input": "ComboBox_input__YjNkN", "button": "ComboBox_button__NTlhM", "list": "ComboBox_list__NTdiY" };
 
 // src/components/ComboBox.tsx
-import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
-function ComboBox2({ items, className, ...props }) {
-  return /* @__PURE__ */ jsxs19($d01f2c01039c0eec$export$72b9695b8216309a, { ...props, className: (0, import_classnames21.default)(ComboBox_default.combobox, className), children: [
-    /* @__PURE__ */ jsxs19(Row, { alignItems: "center", children: [
-      /* @__PURE__ */ jsx34($3985021b0ad6602f$export$f5b8910cec6cf069, { className: ComboBox_default.input }),
-      /* @__PURE__ */ jsx34($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: ComboBox_default.button, children: /* @__PURE__ */ jsx34(Icon2, { "aria-hidden": "true", rotate: 90, size: "sm", children: /* @__PURE__ */ jsx34(ChevronRight, {}) }) })
+import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
+function ComboBox2({
+  items,
+  className,
+  renderEmptyState,
+  listProps,
+  popoverProps,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs19($d01f2c01039c0eec$export$72b9695b8216309a, { ...props, className: (0, import_classnames22.default)(ComboBox_default.combobox, className), children: [
+    /* @__PURE__ */ jsxs19(Grid, { alignItems: "center", columns: "1fr auto", width: "100%", children: [
+      /* @__PURE__ */ jsx35($3985021b0ad6602f$export$f5b8910cec6cf069, { className: ComboBox_default.input }),
+      /* @__PURE__ */ jsx35($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: ComboBox_default.button, children: /* @__PURE__ */ jsx35(Icon2, { "aria-hidden": "true", rotate: 90, size: "sm", children: /* @__PURE__ */ jsx35(ChevronRight, {}) }) })
     ] }),
-    /* @__PURE__ */ jsx34($07b14b47974efb58$export$5b6b19405a83ff9d, { children: /* @__PURE__ */ jsx34("div", { className: ComboBox_default.list, children: /* @__PURE__ */ jsx34(List, { items, children: items.map((item) => /* @__PURE__ */ jsx34(ListItem, { textValue: item, children: item }, item)) }) }) })
+    /* @__PURE__ */ jsx35($07b14b47974efb58$export$5b6b19405a83ff9d, { ...popoverProps, children: /* @__PURE__ */ jsx35("div", { className: ComboBox_default.list, children: /* @__PURE__ */ jsx35(List, { items, renderEmptyState, ...listProps, children: children || items?.map((item) => /* @__PURE__ */ jsx35(ListItem, { textValue: item, children: item }, item)) }) }) })
   ] });
 }
 
@@ -32191,20 +32237,20 @@ function ComboBox2({ items, className, ...props }) {
 var Code_default = { "code": "Code_code__ZTc0M" };
 
 // src/components/Code.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function Code({ asChild, children }) {
   const Component = asChild ? Slot : "code";
-  return /* @__PURE__ */ jsx35(Component, { className: Code_default.code, children });
+  return /* @__PURE__ */ jsx36(Component, { className: Code_default.code, children });
 }
 
 // src/components/Container.tsx
-var import_classnames22 = __toESM(require_classnames());
+var import_classnames23 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Container.module.css
 var Container_default = { "container": "Container_container__ZWU0Y", "centered": "Container_centered__OTM1M", "fluid": "Container_fluid__NTBhY" };
 
 // src/components/Container.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function Container({
   isCentered = true,
   isFluid,
@@ -32212,11 +32258,11 @@ function Container({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     Box,
     {
       ...props,
-      className: (0, import_classnames22.default)(
+      className: (0, import_classnames23.default)(
         Container_default.container,
         className,
         isCentered && Container_default.centered,
@@ -32228,22 +32274,22 @@ function Container({
 }
 
 // src/components/ConfirmationDialog.tsx
-var import_classnames25 = __toESM(require_classnames());
+var import_classnames26 = __toESM(require_classnames());
 import { useState as useState10 } from "react";
 
 // src/components/TextField.tsx
 import { useEffect as useEffect9, useState as useState9 } from "react";
-var import_classnames24 = __toESM(require_classnames());
+var import_classnames25 = __toESM(require_classnames());
 
 // src/components/CopyButton.tsx
-var import_classnames23 = __toESM(require_classnames());
+var import_classnames24 = __toESM(require_classnames());
 import { useState as useState8, useRef as useRef7 } from "react";
 
 // css-modules:E:\dev\umami-react-zen\src\components\CopyButton.module.css
 var CopyButton_default = { "icon": "CopyButton_icon__YTM2Y", "copy-button": "CopyButton_copy-button__MjY1M" };
 
 // src/components/CopyButton.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var TIMEOUT = 2e3;
 function CopyButton({ value, timeout = TIMEOUT, className, children, ...props }) {
   const [copied, setCopied] = useState8(false);
@@ -32256,14 +32302,14 @@ function CopyButton({ value, timeout = TIMEOUT, className, children, ...props })
       ref.current = +setTimeout(() => setCopied(false), timeout);
     }
   };
-  return /* @__PURE__ */ jsx37(Icon2, { ...props, className: (0, import_classnames23.default)(CopyButton_default.icon, className), onClick: handleCopy, children: copied ? /* @__PURE__ */ jsx37(Check, {}) : /* @__PURE__ */ jsx37(Copy, {}) });
+  return /* @__PURE__ */ jsx38(Icon2, { ...props, className: (0, import_classnames24.default)(CopyButton_default.icon, className), onClick: handleCopy, children: copied ? /* @__PURE__ */ jsx38(Check, {}) : /* @__PURE__ */ jsx38(Copy, {}) });
 }
 
 // css-modules:E:\dev\umami-react-zen\src\components\TextField.module.css
 var TextField_default = { "field": "TextField_field__YzU1O", "icon": "TextField_icon__MDJlY", "novalue": "TextField_novalue__NDg4Y", "textarea": "TextField_textarea__NTQ3M", "resize-vertical": "TextField_resize-vertical__ZDc3N", "resize-horizontal": "TextField_resize-horizontal__MzJjY", "resize-none": "TextField_resize-none__ZmUxZ" };
 
 // src/components/TextField.tsx
-import { Fragment as Fragment6, jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
 function TextField2({
   value,
   defaultValue,
@@ -32289,13 +32335,13 @@ function TextField2({
     setInputValue(value);
   }, [value]);
   return /* @__PURE__ */ jsxs20(Fragment6, { children: [
-    label && /* @__PURE__ */ jsx38(Label2, { children: label }),
+    label && /* @__PURE__ */ jsx39(Label2, { children: label }),
     /* @__PURE__ */ jsxs20(
       $bcdf0525bf22703d$export$2c73285ae9390cec,
       {
         "aria-label": "Text",
         ...props,
-        className: (0, import_classnames24.default)(
+        className: (0, import_classnames25.default)(
           TextField_default.field,
           asTextArea && TextField_default.textarea,
           allowCopy && TextField_default.copy,
@@ -32308,8 +32354,8 @@ function TextField2({
         isDisabled,
         onChange: handleChange,
         children: [
-          /* @__PURE__ */ jsx38(Component, { placeholder }),
-          allowCopy && /* @__PURE__ */ jsx38(CopyButton, { value: inputValue, className: TextField_default.icon })
+          /* @__PURE__ */ jsx39(Component, { placeholder }),
+          allowCopy && /* @__PURE__ */ jsx39(CopyButton, { value: inputValue, className: TextField_default.icon })
         ]
       }
     )
@@ -32320,7 +32366,7 @@ function TextField2({
 var ConfirmationDialog_default = { "dialog": "ConfirmationDialog_dialog__YjQzN", "value": "ConfirmationDialog_value__Njg3N" };
 
 // src/components/ConfirmationDialog.tsx
-import { Fragment as Fragment7, jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
 function ConfirmationDialog({
   value,
   confirmMessage,
@@ -32332,11 +32378,11 @@ function ConfirmationDialog({
   const handleChange = (e) => {
     setCanSave(e.target.value === value);
   };
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     AlertDialog,
     {
       ...props,
-      className: (0, import_classnames25.default)(ConfirmationDialog_default.dialog, className),
+      className: (0, import_classnames26.default)(ConfirmationDialog_default.dialog, className),
       isConfirmDisabled: !canSave,
       children: ({ close }) => {
         return /* @__PURE__ */ jsxs21(Fragment7, { children: [
@@ -32345,8 +32391,8 @@ function ConfirmationDialog({
             confirmMessage || "Type the following value to confirm",
             ":"
           ] }),
-          /* @__PURE__ */ jsx39("div", { className: ConfirmationDialog_default.value, children: value }),
-          /* @__PURE__ */ jsx39(TextField2, { autoFocus: true, "aria-label": "Confirmation", onChange: handleChange })
+          /* @__PURE__ */ jsx40("div", { className: ConfirmationDialog_default.value, children: value }),
+          /* @__PURE__ */ jsx40(TextField2, { autoFocus: true, "aria-label": "Confirmation", onChange: handleChange })
         ] });
       }
     }
@@ -32354,66 +32400,66 @@ function ConfirmationDialog({
 }
 
 // src/components/DataTable.tsx
-var import_classnames27 = __toESM(require_classnames());
+var import_classnames28 = __toESM(require_classnames());
 import { Children as Children2, createElement as createElement7 } from "react";
 
 // src/components/Table.tsx
-var import_classnames26 = __toESM(require_classnames());
+var import_classnames27 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Table.module.css
 var Table_default = { "table": "Table_table__YjllN", "header": "Table_header__NmE0Y", "body": "Table_body__ZWYwN", "row": "Table_row__Y2M0Y", "column": "Table_column__ZGY2M", "cell": "Table_cell__MmZjM", "start": "Table_start__NGFiN", "center": "Table_center__NzFjM", "end": "Table_end__NmQyY" };
 
 // src/components/Table.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var gridTemplateColumns = "repeat(auto-fit, minmax(140px, 1fr))";
 function Table2({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx40($1910c06f0ca9905e$export$54ec01a60f47d33d, { "aria-label": "Table", ...props, className: (0, import_classnames26.default)(Table_default.table, className), children });
+  return /* @__PURE__ */ jsx41($1910c06f0ca9905e$export$54ec01a60f47d33d, { "aria-label": "Table", ...props, className: (0, import_classnames27.default)(Table_default.table, className), children });
 }
 function TableHeader({ children, className, style, ...props }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     $1910c06f0ca9905e$export$f850895b287ef28e,
     {
       ...props,
-      className: (0, import_classnames26.default)(Table_default.header, className),
+      className: (0, import_classnames27.default)(Table_default.header, className),
       style: { gridTemplateColumns, ...style },
       children
     }
   );
 }
 function TableBody({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx40($1910c06f0ca9905e$export$76ccd210b9029917, { ...props, className: (0, import_classnames26.default)(Table_default.body, className), children });
+  return /* @__PURE__ */ jsx41($1910c06f0ca9905e$export$76ccd210b9029917, { ...props, className: (0, import_classnames27.default)(Table_default.body, className), children });
 }
 function TableRow({ children, className, style, ...props }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     $1910c06f0ca9905e$export$b59bdbef9ce70de2,
     {
       ...props,
-      className: (0, import_classnames26.default)(Table_default.row, className),
+      className: (0, import_classnames27.default)(Table_default.row, className),
       style: { gridTemplateColumns, ...style },
       children
     }
   );
 }
 function TableColumn({ children, className, align, ...props }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     $1910c06f0ca9905e$export$816b5d811295e6bc,
     {
       ...props,
-      className: (0, import_classnames26.default)(Table_default.column, className, align && Table_default[align]),
+      className: (0, import_classnames27.default)(Table_default.column, className, align && Table_default[align]),
       isRowHeader: true,
       children
     }
   );
 }
 function TableCell({ children, className, align, ...props }) {
-  return /* @__PURE__ */ jsx40($1910c06f0ca9905e$export$f6f0c3fe4ec306ea, { ...props, className: (0, import_classnames26.default)(Table_default.cell, className, align && Table_default[align]), children });
+  return /* @__PURE__ */ jsx41($1910c06f0ca9905e$export$f6f0c3fe4ec306ea, { ...props, className: (0, import_classnames27.default)(Table_default.cell, className, align && Table_default[align]), children });
 }
 
 // css-modules:E:\dev\umami-react-zen\src\components\DataTable.module.css
 var DataTable_default = { "datatable": "DataTable_datatable__MWRkN", "cell": "DataTable_cell__MmMyM" };
 
 // src/components/DataTable.tsx
-import { jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs22 } from "react/jsx-runtime";
 import { createElement as createElement8 } from "react";
 function DataTable({ data = [], className, children, ...props }) {
   const items = data.length && data?.[0]?.id === void 0 ? data.map((row, id) => ({ ...row, id })) : data;
@@ -32426,15 +32472,15 @@ function DataTable({ data = [], className, children, ...props }) {
     return null;
   })?.filter((n) => n);
   const gridTemplateColumns2 = widths.join(" ");
-  return /* @__PURE__ */ jsxs22(Table2, { ...props, className: (0, import_classnames27.default)(DataTable_default.datatable, className), children: [
-    /* @__PURE__ */ jsx41(TableHeader, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, label, as, hidden, width, ...columnProps }) => {
+  return /* @__PURE__ */ jsxs22(Table2, { ...props, className: (0, import_classnames28.default)(DataTable_default.datatable, className), children: [
+    /* @__PURE__ */ jsx42(TableHeader, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, label, as, hidden, width, ...columnProps }) => {
       if (hidden) {
         return null;
       }
       return /* @__PURE__ */ createElement8(TableColumn, { ...columnProps, key: id, id }, label);
     }) }),
-    /* @__PURE__ */ jsx41(TableBody, { children: items.map((row, index) => {
-      return /* @__PURE__ */ jsx41(TableRow, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, as, hidden, className: className2, children: children2, ...cellProps }) => {
+    /* @__PURE__ */ jsx42(TableBody, { children: items.map((row, index) => {
+      return /* @__PURE__ */ jsx42(TableRow, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, as, hidden, className: className2, children: children2, ...cellProps }) => {
         if (hidden) {
           return null;
         }
@@ -32444,7 +32490,7 @@ function DataTable({ data = [], className, children, ...props }) {
           {
             ...cellProps,
             key: id,
-            className: (0, import_classnames27.default)(DataTable_default.cell, className2)
+            className: (0, import_classnames28.default)(DataTable_default.cell, className2)
           },
           as ? createElement7(as, {}, value) : value
         );
@@ -32457,40 +32503,40 @@ function DataColumn(props) {
 }
 
 // src/components/Dots.tsx
-var import_classnames28 = __toESM(require_classnames());
+var import_classnames29 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Dots.module.css
 var Dots_default = { "dots": "Dots_dots__ZjI3Y", "size-sm": "Dots_size-sm__ZTRjY", "size-md": "Dots_size-md__MmRkZ", "size-lg": "Dots_size-lg__MGJmY", "dot": "Dots_dot__ZDRiM", "dots-blink": "Dots_dots-blink__MWU4Z" };
 
 // src/components/Dots.tsx
-import { jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
 function Dots({ size = "md", className, ...props }) {
-  return /* @__PURE__ */ jsxs23("div", { ...props, className: (0, import_classnames28.default)(Dots_default.dots, className, Dots_default[`size-${size}`]), children: [
-    /* @__PURE__ */ jsx42("div", { className: Dots_default.dot }),
-    /* @__PURE__ */ jsx42("div", { className: Dots_default.dot }),
-    /* @__PURE__ */ jsx42("div", { className: Dots_default.dot })
+  return /* @__PURE__ */ jsxs23("div", { ...props, className: (0, import_classnames29.default)(Dots_default.dots, className, Dots_default[`size-${size}`]), children: [
+    /* @__PURE__ */ jsx43("div", { className: Dots_default.dot }),
+    /* @__PURE__ */ jsx43("div", { className: Dots_default.dot }),
+    /* @__PURE__ */ jsx43("div", { className: Dots_default.dot })
   ] });
 }
 
 // src/components/FloatingTooltip.tsx
-var import_classnames30 = __toESM(require_classnames());
+var import_classnames31 = __toESM(require_classnames());
 import { useEffect as useEffect10, useState as useState11 } from "react";
 
 // src/components/Tooltip.tsx
-var import_classnames29 = __toESM(require_classnames());
+var import_classnames30 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Tooltip.module.css
 var Tooltip_default = { "tooltip": "Tooltip_tooltip__YmY4Z", "bubble": "Tooltip_bubble__MWE0N", "arrow": "Tooltip_arrow__OGM1M", "slide": "Tooltip_slide__MGVmY" };
 
 // src/components/Tooltip.tsx
-import { jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
 function Tooltip2({ children, className, showArrow, ...props }) {
-  return /* @__PURE__ */ jsx43($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: (0, import_classnames29.default)(Tooltip_default.tooltip, className), children: /* @__PURE__ */ jsx43(TooltipBubble, { showArrow, children }) });
+  return /* @__PURE__ */ jsx44($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: (0, import_classnames30.default)(Tooltip_default.tooltip, className), children: /* @__PURE__ */ jsx44(TooltipBubble, { showArrow, children }) });
 }
 function TooltipBubble({ showArrow, children, ...props }) {
   return /* @__PURE__ */ jsxs24("div", { ...props, children: [
-    showArrow && /* @__PURE__ */ jsx43($44f671af83e7d9e0$export$746d02f47f4d381, { className: Tooltip_default.arrow, children: /* @__PURE__ */ jsx43("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx43("path", { d: "M0 0 L4 4 L8 0" }) }) }),
-    /* @__PURE__ */ jsx43("div", { className: Tooltip_default.bubble, children })
+    showArrow && /* @__PURE__ */ jsx44($44f671af83e7d9e0$export$746d02f47f4d381, { className: Tooltip_default.arrow, children: /* @__PURE__ */ jsx44("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx44("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+    /* @__PURE__ */ jsx44("div", { className: Tooltip_default.bubble, children })
   ] });
 }
 
@@ -32498,7 +32544,7 @@ function TooltipBubble({ showArrow, children, ...props }) {
 var FloatingTooltip_default = { "floating": "FloatingTooltip_floating__ZjM4N" };
 
 // src/components/FloatingTooltip.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 function FloatingTooltip({ className, style, children, ...props }) {
   const [position, setPosition] = useState11({ x: -1e3, y: -1e3 });
   useEffect10(() => {
@@ -32510,55 +32556,17 @@ function FloatingTooltip({ className, style, children, ...props }) {
       document.removeEventListener("mousemove", handler);
     };
   }, []);
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     TooltipBubble,
     {
       ...props,
-      className: (0, import_classnames30.default)(FloatingTooltip_default.floating, className, "BALLLLSSSS"),
+      className: (0, import_classnames31.default)(FloatingTooltip_default.floating, className, "BALLLLSSSS"),
       style: { ...style, left: position.x, top: position.y },
       children
     }
   );
 }
 
-// src/components/Grid.tsx
-var import_classnames31 = __toESM(require_classnames());
-import { jsx as jsx45 } from "react/jsx-runtime";
-function Grid({
-  display = "grid",
-  justifyContent,
-  justifyItems,
-  alignContent,
-  alignItems,
-  gap,
-  gapX,
-  gapY,
-  autoFlow,
-  rows,
-  columns,
-  areas,
-  className,
-  style,
-  children,
-  ...props
-}) {
-  const [classes, styleProps] = useDesignProps({
-    display,
-    justifyContent,
-    justifyItems,
-    alignContent,
-    alignItems,
-    gap,
-    gapX,
-    gapY,
-    gridTemplateRows: rows,
-    gridTemplateColumns: columns,
-    gridTemplateAreas: areas,
-    gridAutoFlow: autoFlow
-  });
-  return /* @__PURE__ */ jsx45(Box, { ...props, className: (0, import_classnames31.default)(className, classes), style: { ...styleProps, ...style }, children });
-}
-
 // src/components/Heading.tsx
 var import_classnames32 = __toESM(require_classnames());
 
@@ -33164,6 +33172,7 @@ function Select2({
   };
   const handleOpenChange = () => {
     setSearch("");
+    onSearch?.("");
   };
   return /* @__PURE__ */ jsxs36(
     $82d7e5349645de74$export$ef9b1a59e592288f,

package/package.json

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