@umami/react-zen 0.91.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__MWY5Z {
-  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_list__ODI4M {
-  padding: var(--spacing-2);
-}
-.Select_popover__ZDNlZ {
-  min-width: 200px;
-  border: var(--border);
-  border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow-3);
-  background: var(--background-color);
-  overflow: hidden;
-}
-.Select_icon__ZGNhZ {
-  color: var(--font-color-disabled);
-}
-.Select_icon__ZGNhZ:hover {
-  color: var(--font-color);
-  cursor: pointer;
-}
-.Select_search__NGY0O {
-  border-bottom: var(--border);
-  outline: none;
-}
-.Select_search__NGY0O input {
-  border: 0;
-  box-shadow: none;
-}
-.Select_search__NGY0O 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[];
@@ -780,6 +781,7 @@ declare module '@umami/react-zen/Select' {
         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

@@ -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__MWY5Z", "list": "Select_list__ODI4M", "popover": "Select_popover__ZDNlZ", "icon": "Select_icon__ZGNhZ", "search": "Select_search__NGY0O" };
-
-// src/components/Select.tsx
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var Select2 = (0, import_react189.forwardRef)(
   ({
@@ -31034,6 +31028,7 @@ var Select2 = (0, import_react189.forwardRef)(
     onSearch,
     onSelectionChange,
     onChange,
+    buttonProps,
     listProps,
     popoverProps,
     renderValue,
@@ -31050,53 +31045,41 @@ var Select2 = (0, import_react189.forwardRef)(
       setSearch(value2);
       onSearch?.(value2);
     };
-    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,
-                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,
-                className: (0, import_classnames43.default)(Select_default.list, listProps?.className),
-                style: { ...listProps?.style, display: isLoading ? "none" : void 0 },
-                children
-              }
-            )
-          ] }) })
-        ]
-      }
-    );
+    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" };
@@ -31117,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,
@@ -31145,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
   ] });
 }
@@ -31165,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
         ]
       }
@@ -31179,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" };
@@ -31188,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 })
@@ -31213,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" };
@@ -31222,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 }
       }
     ) }),
@@ -31236,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" };
@@ -31254,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
@@ -31285,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" };
@@ -31299,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 })
       }
@@ -31308,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" };
@@ -31343,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: [
@@ -31359,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" };
@@ -31377,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
         }
       )
@@ -31386,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" };
@@ -31418,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 })
@@ -31427,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

@@ -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, useState as useState17 } from "react";
-
-// css-modules:E:\dev\umami-react-zen\src\components\Select.module.css
-var Select_default = { "button": "Select_button__MWY5Z", "list": "Select_list__ODI4M", "popover": "Select_popover__ZDNlZ", "icon": "Select_icon__ZGNhZ", "search": "Select_search__NGY0O" };
-
-// src/components/Select.tsx
 import { jsx as jsx53, jsxs as jsxs30 } from "react/jsx-runtime";
 var Select2 = forwardRef9(
   ({
@@ -30927,6 +30921,7 @@ var Select2 = forwardRef9(
     onSearch,
     onSelectionChange,
     onChange,
+    buttonProps,
     listProps,
     popoverProps,
     renderValue,
@@ -30943,52 +30938,40 @@ var Select2 = forwardRef9(
       setSearch(value2);
       onSearch?.(value2);
     };
-    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,
-                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,
-                className: (0, import_classnames43.default)(Select_default.list, listProps?.className),
-                style: { ...listProps?.style, display: isLoading ? "none" : void 0 },
-                children
-              }
-            )
-          ] }) })
-        ]
-      }
-    );
+    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
@@ -31010,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,
@@ -31038,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
   ] });
 }
@@ -31058,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
         ]
       }
@@ -31072,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" };
@@ -31081,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 })
@@ -31106,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" };
@@ -31115,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 }
       }
     ) }),
@@ -31129,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" };
@@ -31147,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
@@ -31177,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
@@ -31192,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 })
       }
@@ -31201,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" };
@@ -31236,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: [
@@ -31252,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" };
@@ -31270,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
         }
       )
@@ -31279,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" };
@@ -31311,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 })
@@ -31320,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.91.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__MWY5Z {
-  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_list__ODI4M {
-  padding: var(--spacing-2);
-}
-.Select_popover__ZDNlZ {
-  min-width: 200px;
-  border: var(--border);
-  border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow-3);
-  background: var(--background-color);
-  overflow: hidden;
-}
-.Select_icon__ZGNhZ {
-  color: var(--font-color-disabled);
-}
-.Select_icon__ZGNhZ:hover {
-  color: var(--font-color);
-  cursor: pointer;
-}
-.Select_search__NGY0O {
-  border-bottom: var(--border);
-  outline: none;
-}
-.Select_search__NGY0O input {
-  border: 0;
-  box-shadow: none;
-}
-.Select_search__NGY0O input[data-focused] {
-  outline: none;
-}
-
 /* virtual-css:css:12d12fae43d9120371ddbb4f1c814f07 */
 .SideNav_sidenav__M2NlY {
   height: 100%;