@umami/react-zen 0.90.0 → 0.92.0

package/dist/index.css

@@ -4159,49 +4159,6 @@ body a.Button_button__NDYwM {
   background: none;
 }
 
-/* virtual-css:css:851dd5366a20c382ffec60997ee93e35 */
-.Select_button__ZGY1Y {
-  display: flex;
-  align-items: center;
-  font-size: var(--font-size);
-  color: var(--font-color);
-  gap: var(--gap);
-  border: var(--border);
-  padding: var(--padding);
-  border-radius: var(--border-radius);
-  background: var(--background-color);
-  cursor: pointer;
-}
-.Select_popover__MTQ1Y {
-  min-width: 200px;
-  border: var(--border);
-  border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow-3);
-  background: var(--background-color);
-  overflow: hidden;
-}
-.Select_list__MDYyZ > * {
-  border-radius: 0;
-}
-.Select_icon__N2M0O {
-  color: var(--font-color-disabled);
-}
-.Select_icon__N2M0O:hover {
-  color: var(--font-color);
-  cursor: pointer;
-}
-.Select_search__MWQwM {
-  border-bottom: var(--border);
-  outline: none;
-}
-.Select_search__MWQwM input {
-  border: 0;
-  box-shadow: none;
-}
-.Select_search__MWQwM input[data-focused] {
-  outline: none;
-}
-
 /* virtual-css:css:12d12fae43d9120371ddbb4f1c814f07 */
 .SideNav_sidenav__M2NlY {
   height: 100%;

package/dist/index.d.ts

@@ -473,9 +473,9 @@ declare module '@umami/react-zen/Flexbox' {
         justifyItems?: Responsive<JustifyItems>;
         alignContent?: AlignContent;
         alignItems?: AlignItems;
-        gap?: Responsive<Spacing>;
-        gapX?: Responsive<Spacing>;
-        gapY?: Responsive<Spacing>;
+        gap?: Responsive<Spacing | true>;
+        gapX?: Responsive<Spacing | true>;
+        gapY?: Responsive<Spacing | true>;
     }
     export function Flexbox({ display, direction, wrap, justifyContent, justifyItems, alignContent, alignItems, gap, gapX, gapY, className, style, children, ...props }: FlexboxProps): import("react").JSX.Element;
 }
@@ -769,6 +769,7 @@ declare module '@umami/react-zen/SearchField' {
 declare module '@umami/react-zen/Select' {
     import { ReactNode } from 'react';
     import { PopoverProps, SelectProps as AriaSelectProps, SelectValueRenderProps } from 'react-aria-components';
+    import { ButtonProps } from '@umami/react-zen/Button';
     import { ListProps } from '@umami/react-zen/List';
     interface SelectProps extends AriaSelectProps<HTMLSelectElement> {
         items?: any[];
@@ -776,9 +777,11 @@ declare module '@umami/react-zen/Select' {
         label?: string;
         isLoading?: boolean;
         allowSearch?: boolean;
+        searchValue?: string;
         searchDelay?: number;
         onSearch?: (value: string) => void;
         onChange?: (e: any) => void;
+        buttonProps?: ButtonProps;
         listProps?: ListProps;
         popoverProps?: PopoverProps;
         renderValue?: ReactNode | ((values: SelectValueRenderProps<object> & {

package/dist/index.js

@@ -40,12 +40,12 @@ var require_use_sync_external_store_shim_production = __commonJS({
       return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
     }
     var objectIs = "function" === typeof Object.is ? Object.is : is2;
-    var useState17 = React7.useState;
+    var useState18 = React7.useState;
     var useEffect13 = React7.useEffect;
     var useLayoutEffect2 = React7.useLayoutEffect;
     var useDebugValue = React7.useDebugValue;
     function useSyncExternalStore$2(subscribe, getSnapshot) {
-      var value = getSnapshot(), _useState = useState17({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
+      var value = getSnapshot(), _useState = useState18({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
       useLayoutEffect2(
         function() {
           inst.value = value;
@@ -103,7 +103,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
             "The result of getSnapshot should be cached to avoid an infinite loop"
           ), didWarnUncachedGetSnapshot = true);
         }
-        cachedValue = useState17({
+        cachedValue = useState18({
           inst: { value, getSnapshot }
         });
         var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
@@ -141,7 +141,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return getSnapshot();
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React7 = import_react195.default, objectIs = "function" === typeof Object.is ? Object.is : is2, useState17 = React7.useState, useEffect13 = React7.useEffect, useLayoutEffect2 = React7.useLayoutEffect, useDebugValue = React7.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      var React7 = import_react195.default, objectIs = "function" === typeof Object.is ? Object.is : is2, useState18 = React7.useState, useEffect13 = React7.useEffect, useLayoutEffect2 = React7.useLayoutEffect, useDebugValue = React7.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
       exports.useSyncExternalStore = void 0 !== React7.useSyncExternalStore ? React7.useSyncExternalStore : shim;
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
     })();
@@ -167,7 +167,7 @@ var require_classnames = __commonJS({
     (function() {
       "use strict";
       var hasOwn = {}.hasOwnProperty;
-      function classNames52() {
+      function classNames51() {
         var classes = "";
         for (var i = 0; i < arguments.length; i++) {
           var arg = arguments[i];
@@ -185,7 +185,7 @@ var require_classnames = __commonJS({
           return "";
         }
         if (Array.isArray(arg)) {
-          return classNames52.apply(null, arg);
+          return classNames51.apply(null, arg);
         }
         if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
           return arg.toString();
@@ -208,14 +208,14 @@ var require_classnames = __commonJS({
         return value + newClass;
       }
       if (typeof module2 !== "undefined" && module2.exports) {
-        classNames52.default = classNames52;
-        module2.exports = classNames52;
+        classNames51.default = classNames51;
+        module2.exports = classNames51;
       } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
         define("classnames", [], function() {
-          return classNames52;
+          return classNames51;
         });
       } else {
-        window.classNames = classNames52;
+        window.classNames = classNames51;
       }
     })();
   }
@@ -31015,12 +31015,6 @@ var SearchField2 = (0, import_react188.forwardRef)(
 
 // src/components/Select.tsx
 var import_react189 = require("react");
-var import_classnames43 = __toESM(require_classnames());
-
-// css-modules:E:\dev\umami-react-zen\src\components\Select.module.css
-var Select_default = { "button": "Select_button__ZGY1Y", "popover": "Select_popover__MTQ1Y", "list": "Select_list__MDYyZ", "icon": "Select_icon__N2M0O", "search": "Select_search__MWQwM" };
-
-// src/components/Select.tsx
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var Select2 = (0, import_react189.forwardRef)(
   ({
@@ -31029,10 +31023,12 @@ var Select2 = (0, import_react189.forwardRef)(
     label,
     isLoading,
     allowSearch,
+    searchValue,
     searchDelay,
     onSearch,
     onSelectionChange,
     onChange,
+    buttonProps,
     listProps,
     popoverProps,
     renderValue,
@@ -31040,55 +31036,50 @@ var Select2 = (0, import_react189.forwardRef)(
     children,
     ...props
   }, ref) => {
+    const [search, setSearch] = (0, import_react189.useState)("");
     const handleChange = (e) => {
       onSelectionChange?.(e);
       onChange?.(e);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
-      $82d7e5349645de74$export$ef9b1a59e592288f,
-      {
-        "aria-label": "Select",
-        ...props,
-        ref,
-        className: (0, import_classnames43.default)(input_default.field, className),
-        onSelectionChange: handleChange,
-        children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Label2, { children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: (0, import_classnames43.default)(input_default.input, className), children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Row, { justifyContent: "space-between", gap: "3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)($82d7e5349645de74$export$e288731fd71264f0, { children: renderValue }),
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { rotate: 90, size: "xs", className: input_default.icon, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icons.Chevron, {}) }) })
-          ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Popover2, { ...popoverProps, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Column, { className: Select_default.popover, children: [
-            allowSearch && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-              SearchField2,
-              {
-                className: Select_default.search,
-                onSearch,
-                delay: searchDelay,
-                autoFocus: true
-              }
-            ),
-            isLoading && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Loading, { icon: "dots", position: "center", size: "sm" }),
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-              List,
-              {
-                ...listProps,
-                items,
-                className: (0, import_classnames43.default)(Select_default.list, listProps?.className),
-                style: { ...listProps?.style, display: isLoading ? "none" : void 0 },
-                children
-              }
-            )
-          ] }) })
-        ]
-      }
-    );
+    const handleSearch = (value2) => {
+      setSearch(value2);
+      onSearch?.(value2);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)($82d7e5349645de74$export$ef9b1a59e592288f, { "aria-label": "Select", ...props, ref, onSelectionChange: handleChange, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Label2, { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Button2, { variant: "outline", ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Row, { justifyContent: "space-between", gap: "3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)($82d7e5349645de74$export$e288731fd71264f0, { children: renderValue }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { rotate: 90, size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icons.Chevron, {}) }) })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Popover2, { ...popoverProps, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Column, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Box, { padding: "2", border: true, borderRadius: true, backgroundColor: true, shadow: "3", children: [
+        allowSearch && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Box, { marginBottom: "2", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          SearchField2,
+          {
+            value: search,
+            onSearch: handleSearch,
+            delay: searchDelay,
+            defaultValue: searchValue,
+            autoFocus: true
+          }
+        ) }),
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Loading, { icon: "dots", position: "center", size: "sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          List,
+          {
+            ...listProps,
+            items,
+            style: { ...listProps?.style, display: isLoading ? "none" : void 0 },
+            children
+          }
+        )
+      ] }) }) })
+    ] });
   }
 );
 
 // src/components/SideNav.tsx
 var import_react190 = require("react");
-var import_classnames44 = __toESM(require_classnames());
+var import_classnames43 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\SideNav.module.css
 var SideNav_default = { "sidenav": "SideNav_sidenav__M2NlY", "header": "SideNav_header__NGU1Y", "name": "SideNav_name__OTM0N", "section": "SideNav_section__MTUxM", "title": "SideNav_title__YTg5O", "content": "SideNav_content__MjczM", "item": "SideNav_item__ZTlkN", "label": "SideNav_label__NDU1N", "collapsed": "SideNav_collapsed__YzExM", "muted": "SideNav_muted__MmRlM", "selected": "SideNav_selected__ZjY4N", "variant-quiet": "SideNav_variant-quiet__OTZlN", "variant-1": "SideNav_variant-1__NjVmN", "variant-2": "SideNav_variant-2__NWZjM", "variant-3": "SideNav_variant-3__ZDE4O", "noborder": "SideNav_noborder__YTJjO" };
@@ -31109,7 +31100,7 @@ function SideNav({
     Column,
     {
       ...props,
-      className: (0, import_classnames44.default)(
+      className: (0, import_classnames43.default)(
         SideNav_default.sidenav,
         isCollapsed && SideNav_default.collapsed,
         muteItems && SideNav_default.muted,
@@ -31137,9 +31128,9 @@ function SideNavHeader({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Row, { ...props, className: (0, import_classnames44.default)(SideNav_default.header, className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Row, { ...props, className: (0, import_classnames43.default)(SideNav_default.header, className), children: [
     icon && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon, { size: "sm", children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: (0, import_classnames44.default)(SideNav_default.name, SideNav_default.label), children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: (0, import_classnames43.default)(SideNav_default.name, SideNav_default.label), children: label }),
     children
   ] });
 }
@@ -31157,10 +31148,10 @@ function SideNavItem({
       Row,
       {
         ...props,
-        className: (0, import_classnames44.default)(SideNav_default.item, className, isSelected && SideNav_default.selected),
+        className: (0, import_classnames43.default)(SideNav_default.item, className, isSelected && SideNav_default.selected),
         children: [
           icon && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon, { size: "sm", children: icon }),
-          label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Text, { className: (0, import_classnames44.default)(SideNav_default.label), children: label }),
+          label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Text, { className: (0, import_classnames43.default)(SideNav_default.label), children: label }),
           children
         ]
       }
@@ -31171,7 +31162,7 @@ function SideNavItem({
 
 // src/components/Slider.tsx
 var import_react191 = require("react");
-var import_classnames45 = __toESM(require_classnames());
+var import_classnames44 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Slider.module.css
 var Slider_default = { "slider": "Slider_slider__MjBhO", "header": "Slider_header__ZTE2M", "track": "Slider_track__ODk5M", "fill": "Slider_fill__YzdhM", "thumb": "Slider_thumb__NGEzM" };
@@ -31180,7 +31171,7 @@ var Slider_default = { "slider": "Slider_slider__MjBhO", "header": "Slider_heade
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var Slider2 = (0, import_react191.forwardRef)(
   ({ className, showValue = true, label, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)($6f909507e6374d18$export$472062a354075cee, { ...props, ref, className: (0, import_classnames45.default)(Slider_default.slider, className), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)($6f909507e6374d18$export$472062a354075cee, { ...props, ref, className: (0, import_classnames44.default)(Slider_default.slider, className), children: [
       /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: Slider_default.header, children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Label2, { className: Slider_default.label, children: label }),
         showValue && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)($6f909507e6374d18$export$a590f758a961cb5b, { className: Slider_default.output })
@@ -31205,7 +31196,7 @@ var Slider2 = (0, import_react191.forwardRef)(
 );
 
 // src/components/StatusLight.tsx
-var import_classnames46 = __toESM(require_classnames());
+var import_classnames45 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\StatusLight.module.css
 var StatusLight_default = { "statuslight": "StatusLight_statuslight__MTliM", "status": "StatusLight_status__MDNmO", "bg": "StatusLight_bg__MjVjN", "success": "StatusLight_success__ZWI1N", "warning": "StatusLight_warning__YWRmM", "error": "StatusLight_error__NjdjM", "active": "StatusLight_active__NGZiY", "inactive": "StatusLight_inactive__NDI0Z" };
@@ -31214,11 +31205,11 @@ var StatusLight_default = { "statuslight": "StatusLight_statuslight__MTliM", "st
 var import_jsx_runtime56 = require("react/jsx-runtime");
 function StatusLight(props) {
   const { color, variant = "inactive", children, className, ...domProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { ...domProps, className: (0, import_classnames46.default)(StatusLight_default.statuslight, className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { ...domProps, className: (0, import_classnames45.default)(StatusLight_default.statuslight, className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: StatusLight_default.bg, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       "div",
       {
-        className: (0, import_classnames46.default)(StatusLight_default.status, StatusLight_default[variant]),
+        className: (0, import_classnames45.default)(StatusLight_default.status, StatusLight_default[variant]),
         style: { backgroundColor: color }
       }
     ) }),
@@ -31228,7 +31219,7 @@ function StatusLight(props) {
 
 // src/components/Switch.tsx
 var import_react192 = require("react");
-var import_classnames47 = __toESM(require_classnames());
+var import_classnames46 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Switch.module.css
 var Switch_default = { "switch": "Switch_switch__NzI0O", "track": "Switch_track__ZWU0O", "knob": "Switch_knob__YjFmZ" };
@@ -31246,7 +31237,7 @@ var Switch2 = (0, import_react192.forwardRef)(
           ...props,
           isSelected,
           ref,
-          className: (0, import_classnames47.default)(Switch_default.switch, className),
+          className: (0, import_classnames46.default)(Switch_default.switch, className),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: Switch_default.track, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: Switch_default.knob }) }),
             children
@@ -31277,7 +31268,7 @@ function TabPanel2({ children, ...props }) {
 
 // src/components/TextArea.tsx
 var import_react193 = require("react");
-var import_classnames48 = __toESM(require_classnames());
+var import_classnames47 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\TextArea.module.css
 var TextArea_default = { "textarea": "TextArea_textarea__MTk5Y", "resize-none": "TextArea_resize-none__OTJhY", "resize-horizontal": "TextArea_resize-horizontal__YWIyZ", "resize-vertical": "TextArea_resize-vertical__NTM3O" };
@@ -31291,7 +31282,7 @@ var TextArea2 = (0, import_react193.forwardRef)(
       {
         ...props,
         ref,
-        className: (0, import_classnames48.default)(resize && TextArea_default[`resize-${resize}`]),
+        className: (0, import_classnames47.default)(resize && TextArea_default[`resize-${resize}`]),
         asChild: true,
         children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)($216918bed6669f72$export$f5c9f3c2c4054eec, { rows, cols, style: { ...style }, children })
       }
@@ -31300,7 +31291,7 @@ var TextArea2 = (0, import_react193.forwardRef)(
 );
 
 // src/components/ThemeButton.tsx
-var import_classnames49 = __toESM(require_classnames());
+var import_classnames48 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\ThemeButton.module.css
 var ThemeButton_default = { "button": "ThemeButton_button__Zjc5N" };
@@ -31335,7 +31326,7 @@ function ThemeButton({
     Button2,
     {
       ...props,
-      className: (0, import_classnames49.default)(ThemeButton_default.button, className),
+      className: (0, import_classnames48.default)(ThemeButton_default.button, className),
       variant,
       onPress: handleClick,
       children: [
@@ -31351,7 +31342,7 @@ function ThemeButton({
 
 // src/components/Toggle.tsx
 var import_react194 = require("react");
-var import_classnames50 = __toESM(require_classnames());
+var import_classnames49 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Toggle.module.css
 var Toggle_default = { "toggle": "Toggle_toggle__OWVjZ" };
@@ -31369,7 +31360,7 @@ var Toggle = (0, import_react194.forwardRef)(
           ...props,
           ref,
           isSelected,
-          className: (0, import_classnames50.default)(Toggle_default.toggle, className),
+          className: (0, import_classnames49.default)(Toggle_default.toggle, className),
           children
         }
       )
@@ -31378,7 +31369,7 @@ var Toggle = (0, import_react194.forwardRef)(
 );
 
 // src/components/ToggleGroup.tsx
-var import_classnames51 = __toESM(require_classnames());
+var import_classnames50 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\ToggleGroup.module.css
 var ToggleGroup_default = { "group": "ToggleGroup_group__NTgyM", "list": "ToggleGroup_list__OWIyM", "item": "ToggleGroup_item__NDJmZ" };
@@ -31410,7 +31401,7 @@ function ToggleGroup({
       defaultSelectedKeys: defaultValue || defaultSelectedKeys,
       selectionMode,
       onSelectionChange: handleChange,
-      className: (0, import_classnames51.default)(ToggleGroup_default.group, className),
+      className: (0, import_classnames50.default)(ToggleGroup_default.group, className),
       children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Label2, { children: label }),
         /* @__PURE__ */ (0, import_jsx_runtime62.jsx)($eaf9e70818b436db$export$f9fef0f55402315b, { className: ToggleGroup_default.list, children })
@@ -31419,7 +31410,7 @@ function ToggleGroup({
   );
 }
 function ToggleGroupItem({ className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)($eaf9e70818b436db$export$3288d34c523a1192, { ...props, className: (0, import_classnames51.default)(ToggleGroup_default.item, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)($eaf9e70818b436db$export$3288d34c523a1192, { ...props, className: (0, import_classnames50.default)(ToggleGroup_default.item, className), children });
 }
 
 // src/components/ZenProvider.tsx

package/dist/index.mjs

@@ -34,12 +34,12 @@ var require_use_sync_external_store_shim_production = __commonJS({
       return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
     }
     var objectIs = "function" === typeof Object.is ? Object.is : is2;
-    var useState17 = React7.useState;
+    var useState18 = React7.useState;
     var useEffect13 = React7.useEffect;
     var useLayoutEffect2 = React7.useLayoutEffect;
     var useDebugValue = React7.useDebugValue;
     function useSyncExternalStore$2(subscribe, getSnapshot) {
-      var value = getSnapshot(), _useState = useState17({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
+      var value = getSnapshot(), _useState = useState18({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
       useLayoutEffect2(
         function() {
           inst.value = value;
@@ -97,7 +97,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
             "The result of getSnapshot should be cached to avoid an infinite loop"
           ), didWarnUncachedGetSnapshot = true);
         }
-        cachedValue = useState17({
+        cachedValue = useState18({
           inst: { value, getSnapshot }
         });
         var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
@@ -135,7 +135,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return getSnapshot();
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React7 = __import_react2, objectIs = "function" === typeof Object.is ? Object.is : is2, useState17 = React7.useState, useEffect13 = React7.useEffect, useLayoutEffect2 = React7.useLayoutEffect, useDebugValue = React7.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      var React7 = __import_react2, objectIs = "function" === typeof Object.is ? Object.is : is2, useState18 = React7.useState, useEffect13 = React7.useEffect, useLayoutEffect2 = React7.useLayoutEffect, useDebugValue = React7.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
       exports.useSyncExternalStore = void 0 !== React7.useSyncExternalStore ? React7.useSyncExternalStore : shim;
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
     })();
@@ -161,7 +161,7 @@ var require_classnames = __commonJS({
     (function() {
       "use strict";
       var hasOwn = {}.hasOwnProperty;
-      function classNames52() {
+      function classNames51() {
         var classes = "";
         for (var i = 0; i < arguments.length; i++) {
           var arg = arguments[i];
@@ -179,7 +179,7 @@ var require_classnames = __commonJS({
           return "";
         }
         if (Array.isArray(arg)) {
-          return classNames52.apply(null, arg);
+          return classNames51.apply(null, arg);
         }
         if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
           return arg.toString();
@@ -202,14 +202,14 @@ var require_classnames = __commonJS({
         return value + newClass;
       }
       if (typeof module !== "undefined" && module.exports) {
-        classNames52.default = classNames52;
-        module.exports = classNames52;
+        classNames51.default = classNames51;
+        module.exports = classNames51;
       } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
         define("classnames", [], function() {
-          return classNames52;
+          return classNames51;
         });
       } else {
-        window.classNames = classNames52;
+        window.classNames = classNames51;
       }
     })();
   }
@@ -30907,13 +30907,7 @@ var SearchField2 = forwardRef8(
 );
 
 // src/components/Select.tsx
-var import_classnames43 = __toESM(require_classnames());
-import { forwardRef as forwardRef9 } from "react";
-
-// css-modules:E:\dev\umami-react-zen\src\components\Select.module.css
-var Select_default = { "button": "Select_button__ZGY1Y", "popover": "Select_popover__MTQ1Y", "list": "Select_list__MDYyZ", "icon": "Select_icon__N2M0O", "search": "Select_search__MWQwM" };
-
-// src/components/Select.tsx
+import { forwardRef as forwardRef9, useState as useState17 } from "react";
 import { jsx as jsx53, jsxs as jsxs30 } from "react/jsx-runtime";
 var Select2 = forwardRef9(
   ({
@@ -30922,10 +30916,12 @@ var Select2 = forwardRef9(
     label,
     isLoading,
     allowSearch,
+    searchValue,
     searchDelay,
     onSearch,
     onSelectionChange,
     onChange,
+    buttonProps,
     listProps,
     popoverProps,
     renderValue,
@@ -30933,54 +30929,49 @@ var Select2 = forwardRef9(
     children,
     ...props
   }, ref) => {
+    const [search, setSearch] = useState17("");
     const handleChange = (e) => {
       onSelectionChange?.(e);
       onChange?.(e);
     };
-    return /* @__PURE__ */ jsxs30(
-      $82d7e5349645de74$export$ef9b1a59e592288f,
-      {
-        "aria-label": "Select",
-        ...props,
-        ref,
-        className: (0, import_classnames43.default)(input_default.field, className),
-        onSelectionChange: handleChange,
-        children: [
-          label && /* @__PURE__ */ jsx53(Label2, { children: label }),
-          /* @__PURE__ */ jsx53($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: (0, import_classnames43.default)(input_default.input, className), children: /* @__PURE__ */ jsxs30(Row, { justifyContent: "space-between", gap: "3", children: [
-            /* @__PURE__ */ jsx53($82d7e5349645de74$export$e288731fd71264f0, { children: renderValue }),
-            /* @__PURE__ */ jsx53("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx53(Icon, { rotate: 90, size: "xs", className: input_default.icon, children: /* @__PURE__ */ jsx53(Icons.Chevron, {}) }) })
-          ] }) }),
-          /* @__PURE__ */ jsx53(Popover2, { ...popoverProps, children: /* @__PURE__ */ jsxs30(Column, { className: Select_default.popover, children: [
-            allowSearch && /* @__PURE__ */ jsx53(
-              SearchField2,
-              {
-                className: Select_default.search,
-                onSearch,
-                delay: searchDelay,
-                autoFocus: true
-              }
-            ),
-            isLoading && /* @__PURE__ */ jsx53(Loading, { icon: "dots", position: "center", size: "sm" }),
-            /* @__PURE__ */ jsx53(
-              List,
-              {
-                ...listProps,
-                items,
-                className: (0, import_classnames43.default)(Select_default.list, listProps?.className),
-                style: { ...listProps?.style, display: isLoading ? "none" : void 0 },
-                children
-              }
-            )
-          ] }) })
-        ]
-      }
-    );
+    const handleSearch = (value2) => {
+      setSearch(value2);
+      onSearch?.(value2);
+    };
+    return /* @__PURE__ */ jsxs30($82d7e5349645de74$export$ef9b1a59e592288f, { "aria-label": "Select", ...props, ref, onSelectionChange: handleChange, children: [
+      label && /* @__PURE__ */ jsx53(Label2, { children: label }),
+      /* @__PURE__ */ jsx53(Button2, { variant: "outline", ...buttonProps, children: /* @__PURE__ */ jsxs30(Row, { justifyContent: "space-between", gap: "3", children: [
+        /* @__PURE__ */ jsx53($82d7e5349645de74$export$e288731fd71264f0, { children: renderValue }),
+        /* @__PURE__ */ jsx53("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx53(Icon, { rotate: 90, size: "xs", children: /* @__PURE__ */ jsx53(Icons.Chevron, {}) }) })
+      ] }) }),
+      /* @__PURE__ */ jsx53(Popover2, { ...popoverProps, children: /* @__PURE__ */ jsx53(Column, { children: /* @__PURE__ */ jsxs30(Box, { padding: "2", border: true, borderRadius: true, backgroundColor: true, shadow: "3", children: [
+        allowSearch && /* @__PURE__ */ jsx53(Box, { marginBottom: "2", children: /* @__PURE__ */ jsx53(
+          SearchField2,
+          {
+            value: search,
+            onSearch: handleSearch,
+            delay: searchDelay,
+            defaultValue: searchValue,
+            autoFocus: true
+          }
+        ) }),
+        isLoading && /* @__PURE__ */ jsx53(Loading, { icon: "dots", position: "center", size: "sm" }),
+        /* @__PURE__ */ jsx53(
+          List,
+          {
+            ...listProps,
+            items,
+            style: { ...listProps?.style, display: isLoading ? "none" : void 0 },
+            children
+          }
+        )
+      ] }) }) })
+    ] });
   }
 );
 
 // src/components/SideNav.tsx
-var import_classnames44 = __toESM(require_classnames());
+var import_classnames43 = __toESM(require_classnames());
 import { createContext as createContext4, useContext as useContext6 } from "react";
 
 // css-modules:E:\dev\umami-react-zen\src\components\SideNav.module.css
@@ -31002,7 +30993,7 @@ function SideNav({
     Column,
     {
       ...props,
-      className: (0, import_classnames44.default)(
+      className: (0, import_classnames43.default)(
         SideNav_default.sidenav,
         isCollapsed && SideNav_default.collapsed,
         muteItems && SideNav_default.muted,
@@ -31030,9 +31021,9 @@ function SideNavHeader({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs31(Row, { ...props, className: (0, import_classnames44.default)(SideNav_default.header, className), children: [
+  return /* @__PURE__ */ jsxs31(Row, { ...props, className: (0, import_classnames43.default)(SideNav_default.header, className), children: [
     icon && /* @__PURE__ */ jsx54(Icon, { size: "sm", children: icon }),
-    /* @__PURE__ */ jsx54("div", { className: (0, import_classnames44.default)(SideNav_default.name, SideNav_default.label), children: label }),
+    /* @__PURE__ */ jsx54("div", { className: (0, import_classnames43.default)(SideNav_default.name, SideNav_default.label), children: label }),
     children
   ] });
 }
@@ -31050,10 +31041,10 @@ function SideNavItem({
       Row,
       {
         ...props,
-        className: (0, import_classnames44.default)(SideNav_default.item, className, isSelected && SideNav_default.selected),
+        className: (0, import_classnames43.default)(SideNav_default.item, className, isSelected && SideNav_default.selected),
         children: [
           icon && /* @__PURE__ */ jsx54(Icon, { size: "sm", children: icon }),
-          label && /* @__PURE__ */ jsx54(Text, { className: (0, import_classnames44.default)(SideNav_default.label), children: label }),
+          label && /* @__PURE__ */ jsx54(Text, { className: (0, import_classnames43.default)(SideNav_default.label), children: label }),
           children
         ]
       }
@@ -31064,7 +31055,7 @@ function SideNavItem({
 
 // src/components/Slider.tsx
 import { forwardRef as forwardRef10 } from "react";
-var import_classnames45 = __toESM(require_classnames());
+var import_classnames44 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Slider.module.css
 var Slider_default = { "slider": "Slider_slider__MjBhO", "header": "Slider_header__ZTE2M", "track": "Slider_track__ODk5M", "fill": "Slider_fill__YzdhM", "thumb": "Slider_thumb__NGEzM" };
@@ -31073,7 +31064,7 @@ var Slider_default = { "slider": "Slider_slider__MjBhO", "header": "Slider_heade
 import { Fragment as Fragment10, jsx as jsx55, jsxs as jsxs32 } from "react/jsx-runtime";
 var Slider2 = forwardRef10(
   ({ className, showValue = true, label, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs32($6f909507e6374d18$export$472062a354075cee, { ...props, ref, className: (0, import_classnames45.default)(Slider_default.slider, className), children: [
+    return /* @__PURE__ */ jsxs32($6f909507e6374d18$export$472062a354075cee, { ...props, ref, className: (0, import_classnames44.default)(Slider_default.slider, className), children: [
       /* @__PURE__ */ jsxs32("div", { className: Slider_default.header, children: [
         label && /* @__PURE__ */ jsx55(Label2, { className: Slider_default.label, children: label }),
         showValue && /* @__PURE__ */ jsx55($6f909507e6374d18$export$a590f758a961cb5b, { className: Slider_default.output })
@@ -31098,7 +31089,7 @@ var Slider2 = forwardRef10(
 );
 
 // src/components/StatusLight.tsx
-var import_classnames46 = __toESM(require_classnames());
+var import_classnames45 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\StatusLight.module.css
 var StatusLight_default = { "statuslight": "StatusLight_statuslight__MTliM", "status": "StatusLight_status__MDNmO", "bg": "StatusLight_bg__MjVjN", "success": "StatusLight_success__ZWI1N", "warning": "StatusLight_warning__YWRmM", "error": "StatusLight_error__NjdjM", "active": "StatusLight_active__NGZiY", "inactive": "StatusLight_inactive__NDI0Z" };
@@ -31107,11 +31098,11 @@ var StatusLight_default = { "statuslight": "StatusLight_statuslight__MTliM", "st
 import { jsx as jsx56, jsxs as jsxs33 } from "react/jsx-runtime";
 function StatusLight(props) {
   const { color, variant = "inactive", children, className, ...domProps } = props;
-  return /* @__PURE__ */ jsxs33("div", { ...domProps, className: (0, import_classnames46.default)(StatusLight_default.statuslight, className), children: [
+  return /* @__PURE__ */ jsxs33("div", { ...domProps, className: (0, import_classnames45.default)(StatusLight_default.statuslight, className), children: [
     /* @__PURE__ */ jsx56("div", { className: StatusLight_default.bg, children: /* @__PURE__ */ jsx56(
       "div",
       {
-        className: (0, import_classnames46.default)(StatusLight_default.status, StatusLight_default[variant]),
+        className: (0, import_classnames45.default)(StatusLight_default.status, StatusLight_default[variant]),
         style: { backgroundColor: color }
       }
     ) }),
@@ -31121,7 +31112,7 @@ function StatusLight(props) {
 
 // src/components/Switch.tsx
 import { forwardRef as forwardRef11 } from "react";
-var import_classnames47 = __toESM(require_classnames());
+var import_classnames46 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Switch.module.css
 var Switch_default = { "switch": "Switch_switch__NzI0O", "track": "Switch_track__ZWU0O", "knob": "Switch_knob__YjFmZ" };
@@ -31139,7 +31130,7 @@ var Switch2 = forwardRef11(
           ...props,
           isSelected,
           ref,
-          className: (0, import_classnames47.default)(Switch_default.switch, className),
+          className: (0, import_classnames46.default)(Switch_default.switch, className),
           children: [
             /* @__PURE__ */ jsx57("div", { className: Switch_default.track, children: /* @__PURE__ */ jsx57("div", { className: Switch_default.knob }) }),
             children
@@ -31169,7 +31160,7 @@ function TabPanel2({ children, ...props }) {
 }
 
 // src/components/TextArea.tsx
-var import_classnames48 = __toESM(require_classnames());
+var import_classnames47 = __toESM(require_classnames());
 import { forwardRef as forwardRef12 } from "react";
 
 // css-modules:E:\dev\umami-react-zen\src\components\TextArea.module.css
@@ -31184,7 +31175,7 @@ var TextArea2 = forwardRef12(
       {
         ...props,
         ref,
-        className: (0, import_classnames48.default)(resize && TextArea_default[`resize-${resize}`]),
+        className: (0, import_classnames47.default)(resize && TextArea_default[`resize-${resize}`]),
         asChild: true,
         children: /* @__PURE__ */ jsx59($216918bed6669f72$export$f5c9f3c2c4054eec, { rows, cols, style: { ...style }, children })
       }
@@ -31193,7 +31184,7 @@ var TextArea2 = forwardRef12(
 );
 
 // src/components/ThemeButton.tsx
-var import_classnames49 = __toESM(require_classnames());
+var import_classnames48 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\ThemeButton.module.css
 var ThemeButton_default = { "button": "ThemeButton_button__Zjc5N" };
@@ -31228,7 +31219,7 @@ function ThemeButton({
     Button2,
     {
       ...props,
-      className: (0, import_classnames49.default)(ThemeButton_default.button, className),
+      className: (0, import_classnames48.default)(ThemeButton_default.button, className),
       variant,
       onPress: handleClick,
       children: [
@@ -31244,7 +31235,7 @@ function ThemeButton({
 
 // src/components/Toggle.tsx
 import { forwardRef as forwardRef13 } from "react";
-var import_classnames50 = __toESM(require_classnames());
+var import_classnames49 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Toggle.module.css
 var Toggle_default = { "toggle": "Toggle_toggle__OWVjZ" };
@@ -31262,7 +31253,7 @@ var Toggle = forwardRef13(
           ...props,
           ref,
           isSelected,
-          className: (0, import_classnames50.default)(Toggle_default.toggle, className),
+          className: (0, import_classnames49.default)(Toggle_default.toggle, className),
           children
         }
       )
@@ -31271,7 +31262,7 @@ var Toggle = forwardRef13(
 );
 
 // src/components/ToggleGroup.tsx
-var import_classnames51 = __toESM(require_classnames());
+var import_classnames50 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\ToggleGroup.module.css
 var ToggleGroup_default = { "group": "ToggleGroup_group__NTgyM", "list": "ToggleGroup_list__OWIyM", "item": "ToggleGroup_item__NDJmZ" };
@@ -31303,7 +31294,7 @@ function ToggleGroup({
       defaultSelectedKeys: defaultValue || defaultSelectedKeys,
       selectionMode,
       onSelectionChange: handleChange,
-      className: (0, import_classnames51.default)(ToggleGroup_default.group, className),
+      className: (0, import_classnames50.default)(ToggleGroup_default.group, className),
       children: [
         label && /* @__PURE__ */ jsx62(Label2, { children: label }),
         /* @__PURE__ */ jsx62($eaf9e70818b436db$export$f9fef0f55402315b, { className: ToggleGroup_default.list, children })
@@ -31312,7 +31303,7 @@ function ToggleGroup({
   );
 }
 function ToggleGroupItem({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx62($eaf9e70818b436db$export$3288d34c523a1192, { ...props, className: (0, import_classnames51.default)(ToggleGroup_default.item, className), children });
+  return /* @__PURE__ */ jsx62($eaf9e70818b436db$export$3288d34c523a1192, { ...props, className: (0, import_classnames50.default)(ToggleGroup_default.item, className), children });
 }
 
 // src/components/ZenProvider.tsx

package/package.json

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

package/styles.css

@@ -4475,49 +4475,6 @@ body a.Button_button__NDYwM {
   background: none;
 }
 
-/* virtual-css:css:851dd5366a20c382ffec60997ee93e35 */
-.Select_button__ZGY1Y {
-  display: flex;
-  align-items: center;
-  font-size: var(--font-size);
-  color: var(--font-color);
-  gap: var(--gap);
-  border: var(--border);
-  padding: var(--padding);
-  border-radius: var(--border-radius);
-  background: var(--background-color);
-  cursor: pointer;
-}
-.Select_popover__MTQ1Y {
-  min-width: 200px;
-  border: var(--border);
-  border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow-3);
-  background: var(--background-color);
-  overflow: hidden;
-}
-.Select_list__MDYyZ > * {
-  border-radius: 0;
-}
-.Select_icon__N2M0O {
-  color: var(--font-color-disabled);
-}
-.Select_icon__N2M0O:hover {
-  color: var(--font-color);
-  cursor: pointer;
-}
-.Select_search__MWQwM {
-  border-bottom: var(--border);
-  outline: none;
-}
-.Select_search__MWQwM input {
-  border: 0;
-  box-shadow: none;
-}
-.Select_search__MWQwM input[data-focused] {
-  outline: none;
-}
-
 /* virtual-css:css:12d12fae43d9120371ddbb4f1c814f07 */
 .SideNav_sidenav__M2NlY {
   height: 100%;