@umami/react-zen 0.121.0 → 0.122.0

package/dist/index.css

@@ -3015,17 +3015,18 @@
 }
 
 /* virtual-css:css:c1c264103e87c7a7d9c345a7e75f073b */
-.Form_form__NmE1N {
-  display: grid;
+.Form_form__ZTBhZ {
+  display: flex;
+  flex-direction: column;
   position: relative;
   font-size: var(--font-size);
   gap: var(--gap);
 }
-.Form_text__MjgxN {
+.Form_text__ZjUwN {
   text-align: center;
   margin: auto;
 }
-.Form_icon__MTI0N {
+.Form_icon__YTRiZ {
   align-self: flex-start;
 }
 
@@ -4283,59 +4284,6 @@ body a.Button_button__NDYwM {
   }
 }
 
-/* virtual-css:css:ac55918cdbb6b3a9ac9deedf05ce3806 */
-.input_field__ZmMwY {
-  position: relative;
-}
-.input_field__ZmMwY,
-.input_row__NTc1Z {
-  position: relative;
-}
-.input_field__ZmMwY[data-readonly] .input_input__MzU4N,
-.input_field__ZmMwY[data-disabled] .input_input__MzU4N {
-  background: var(--base-color-2);
-}
-.input_input__MzU4N {
-  font-size: var(--font-size);
-  color: var(--font-color);
-  border: var(--border);
-  border-radius: var(--border-radius);
-  background: var(--background-color);
-  box-shadow: var(--box-shadow);
-  padding: var(--padding);
-  line-height: 1.5rem;
-  width: 100%;
-}
-.input_input__MzU4N:focus {
-  border-color: transparent;
-  outline: var(--outline);
-  outline-offset: -1px;
-}
-.input_input__MzU4N::placeholder {
-  color: var(--font-color-muted);
-}
-.input_input__MzU4N:disabled {
-  color: var(--font-color-muted);
-}
-.input_input__MzU4N::-webkit-search-cancel-button,
-.input_input__MzU4N::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-.input_icon__YzA4Z {
-  color: var(--font-color-muted);
-}
-.input_icon__YzA4Z:hover {
-  color: var(--font-color);
-  cursor: pointer;
-}
-
-/* virtual-css:css:3547a441584a5024882cb71ab3ccf244 */
-.PasswordField_icon__NTRlM {
-  position: absolute;
-  top: 12px;
-  right: 9px;
-}
-
 /* virtual-css:css:f94974973c639ccc39a8a6465cbebeb2 */
 .Popover_popover__YmFhM[data-placement=top] {
   --origin: translateY(8px);
@@ -4472,6 +4420,30 @@ body a.Button_button__NDYwM {
   background-color: var(--base-color-4);
 }
 
+/* virtual-css:css:851dd5366a20c382ffec60997ee93e35 */
+.Select_select__OWQwZ {
+  width: 100%;
+}
+.Select_button__YTEzN {
+  width: 100%;
+}
+.Select_value__N2NjM {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+.Select_list__ZDFkY {
+  padding: var(--spacing-2);
+  background-color: var(--background-color);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow-3);
+}
+.Select_search__YTgyZ {
+  margin-bottom: var(--spacing-2);
+}
+
 /* virtual-css:css:844962527a8f0e375161b58db0fc39ed */
 .Sidebar_sidenav__ODc2Z {
   height: 100%;

package/dist/index.js

@@ -167,7 +167,7 @@ var require_classnames = __commonJS({
     (function() {
       "use strict";
       var hasOwn = {}.hasOwnProperty;
-      function classNames51() {
+      function classNames52() {
         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 classNames51.apply(null, arg);
+          return classNames52.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) {
-        classNames51.default = classNames51;
-        module2.exports = classNames51;
+        classNames52.default = classNames52;
+        module2.exports = classNames52;
       } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
         define("classnames", [], function() {
-          return classNames51;
+          return classNames52;
         });
       } else {
-        window.classNames = classNames51;
+        window.classNames = classNames52;
       }
     })();
   }
@@ -25841,7 +25841,7 @@ function AlertBanner({
 }
 
 // css-modules:E:\dev\umami-react-zen\src\components\forms\Form.module.css
-var Form_default = { "form": "Form_form__NmE1N", "text": "Form_text__MjgxN", "icon": "Form_icon__MTI0N" };
+var Form_default = { "form": "Form_form__ZTBhZ", "text": "Form_text__ZjUwN", "icon": "Form_icon__YTRiZ" };
 
 // src/components/forms/Form.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -31150,24 +31150,16 @@ function NavMenuItem({ isSelected, className, children, ...props }) {
 // src/components/PasswordField.tsx
 var import_react185 = require("react");
 var import_classnames38 = __toESM(require_classnames());
-
-// css-modules:E:\dev\umami-react-zen\src\components\styles\input.module.css
-var input_default = { "field": "input_field__ZmMwY", "row": "input_row__NTc1Z", "input": "input_input__MzU4N", "icon": "input_icon__YzA4Z" };
-
-// css-modules:E:\dev\umami-react-zen\src\components\PasswordField.module.css
-var PasswordField_default = { "icon": "PasswordField_icon__NTRlM" };
-
-// src/components/PasswordField.tsx
 var import_jsx_runtime52 = require("react/jsx-runtime");
 function PasswordField({ label, className, ...props }) {
   const [show, setShow] = (0, import_react185.useState)(false);
   const type = show ? "text" : "password";
   const handleShowPassword = () => setShow((state) => !state);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)($bcdf0525bf22703d$export$2c73285ae9390cec, { ...props, className: (0, import_classnames38.default)(input_default.field, className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Label2, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: input_default.row, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)($3985021b0ad6602f$export$f5b8910cec6cf069, { type, className: input_default.input }),
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon2, { onClick: handleShowPassword, className: (0, import_classnames38.default)(PasswordField_default.icon, input_default.icon), children: show ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(EyeSlash_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Eye_default, {}) })
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)($bcdf0525bf22703d$export$2c73285ae9390cec, { "aria-label": "Password", ...props, className: (0, import_classnames38.default)(TextField_default.field, className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)($3985021b0ad6602f$export$f5b8910cec6cf069, { type }),
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon2, { onClick: handleShowPassword, children: show ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(EyeSlash_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Eye_default, {}) })
     ] })
   ] });
 }
@@ -31304,6 +31296,12 @@ function SearchField2({
 
 // src/components/Select.tsx
 var import_react187 = require("react");
+var import_classnames44 = __toESM(require_classnames());
+
+// css-modules:E:\dev\umami-react-zen\src\components\Select.module.css
+var Select_default = { "select": "Select_select__OWQwZ", "button": "Select_button__YTEzN", "value": "Select_value__N2NjM", "list": "Select_list__ZDFkY", "search": "Select_search__YTgyZ" };
+
+// src/components/Select.tsx
 var import_jsx_runtime58 = require("react/jsx-runtime");
 function Select2({
   items = [],
@@ -31339,26 +31337,36 @@ function Select2({
     {
       "aria-label": "Select",
       ...props,
+      className: (0, import_classnames44.default)(Select_default.select, className),
       selectedKey: value,
       defaultSelectedKey: defaultValue,
       onSelectionChange: handleChange,
       children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Label2, { children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button2, { variant: "outline", ...buttonProps, style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Row, { alignItems: "center", justifyContent: "space-between", gap: "3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)($82d7e5349645de74$export$e288731fd71264f0, { children: renderValue }),
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon2, { "aria-hidden": "true", rotate: 90, size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ChevronRight, {}) })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Popover2, { ...popoverProps, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Column, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Box, { padding: "2", border: true, borderRadius: true, backgroundColor: true, shadow: "3", children: [
-          allowSearch && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Box, { marginBottom: "2", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          Button2,
+          {
+            variant: "outline",
+            ...buttonProps,
+            className: (0, import_classnames44.default)(Select_default.button, buttonProps?.className),
+            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: Select_default.value, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)($82d7e5349645de74$export$e288731fd71264f0, { children: renderValue }),
+              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon2, { "aria-hidden": "true", rotate: 90, size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ChevronRight, {}) })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Popover2, { ...popoverProps, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: Select_default.list, children: [
+          allowSearch && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
             SearchField2,
             {
+              className: Select_default.search,
               value: search,
               onSearch: handleSearch,
               delay: searchDelay,
               defaultValue: searchValue,
               autoFocus: true
             }
-          ) }),
+          ),
           isLoading && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Loading, { icon: "dots", position: "center", size: "sm" }),
           /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
             List,
@@ -31369,7 +31377,7 @@ function Select2({
               children
             }
           )
-        ] }) }) })
+        ] }) })
       ]
     }
   );
@@ -31377,7 +31385,7 @@ function Select2({
 
 // src/components/Sidebar.tsx
 var import_react188 = require("react");
-var import_classnames44 = __toESM(require_classnames());
+var import_classnames45 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Sidebar.module.css
 var Sidebar_default = { "sidenav": "Sidebar_sidenav__ODc2Z", "header": "Sidebar_header__YWI3N", "name": "Sidebar_name__NThjO", "section": "Sidebar_section__YzQwN", "title": "Sidebar_title__NDBlN", "content": "Sidebar_content__NmUzM", "item": "Sidebar_item__ZjYxZ", "label": "Sidebar_label__OTI3N", "collapsed": "Sidebar_collapsed__NDY0N", "muted": "Sidebar_muted__NjI0N", "selected": "Sidebar_selected__N2RhZ", "variant-quiet": "Sidebar_variant-quiet__ZjllN", "variant-1": "Sidebar_variant-1__NmFhM", "variant-2": "Sidebar_variant-2__OWYzZ", "variant-3": "Sidebar_variant-3__ODk2Y", "noborder": "Sidebar_noborder__NTJlN" };
@@ -31398,7 +31406,7 @@ function Sidebar({
     Column,
     {
       ...props,
-      className: (0, import_classnames44.default)(
+      className: (0, import_classnames45.default)(
         Sidebar_default.sidenav,
         isCollapsed && Sidebar_default.collapsed,
         muteItems && Sidebar_default.muted,
@@ -31426,9 +31434,9 @@ function SidebarHeader({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Row, { ...props, className: (0, import_classnames44.default)(Sidebar_default.header, className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Row, { ...props, className: (0, import_classnames45.default)(Sidebar_default.header, className), children: [
     icon && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon2, { size: "sm", children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: (0, import_classnames44.default)(Sidebar_default.name, Sidebar_default.label), children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: (0, import_classnames45.default)(Sidebar_default.name, Sidebar_default.label), children: label }),
     children
   ] });
 }
@@ -31446,10 +31454,10 @@ function SidebarItem({
       Row,
       {
         ...props,
-        className: (0, import_classnames44.default)(Sidebar_default.item, className, isSelected && Sidebar_default.selected),
+        className: (0, import_classnames45.default)(Sidebar_default.item, className, isSelected && Sidebar_default.selected),
         children: [
           icon && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon2, { size: "sm", children: icon }),
-          label && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Text, { className: (0, import_classnames44.default)(Sidebar_default.label), children: label }),
+          label && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Text, { className: (0, import_classnames45.default)(Sidebar_default.label), children: label }),
           children
         ]
       }
@@ -31459,7 +31467,7 @@ function SidebarItem({
 }
 
 // src/components/Slider.tsx
-var import_classnames45 = __toESM(require_classnames());
+var import_classnames46 = __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" };
@@ -31467,7 +31475,7 @@ var Slider_default = { "slider": "Slider_slider__MjBhO", "header": "Slider_heade
 // src/components/Slider.tsx
 var import_jsx_runtime60 = require("react/jsx-runtime");
 function Slider2({ className, showValue = true, label, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)($6f909507e6374d18$export$472062a354075cee, { ...props, className: (0, import_classnames45.default)(Slider_default.slider, className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)($6f909507e6374d18$export$472062a354075cee, { ...props, className: (0, import_classnames46.default)(Slider_default.slider, className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: Slider_default.header, children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Label2, { className: Slider_default.label, children: label }),
       showValue && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)($6f909507e6374d18$export$a590f758a961cb5b, { className: Slider_default.output })
@@ -31491,7 +31499,7 @@ function Slider2({ className, showValue = true, label, ...props }) {
 }
 
 // src/components/StatusLight.tsx
-var import_classnames46 = __toESM(require_classnames());
+var import_classnames47 = __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" };
@@ -31500,11 +31508,11 @@ var StatusLight_default = { "statuslight": "StatusLight_statuslight__MTliM", "st
 var import_jsx_runtime61 = require("react/jsx-runtime");
 function StatusLight(props) {
   const { color, variant = "inactive", children, className, ...domProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { ...domProps, className: (0, import_classnames46.default)(StatusLight_default.statuslight, className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { ...domProps, className: (0, import_classnames47.default)(StatusLight_default.statuslight, className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: StatusLight_default.bg, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       "div",
       {
-        className: (0, import_classnames46.default)(StatusLight_default.status, StatusLight_default[variant]),
+        className: (0, import_classnames47.default)(StatusLight_default.status, StatusLight_default[variant]),
         style: { backgroundColor: color }
       }
     ) }),
@@ -31513,7 +31521,7 @@ function StatusLight(props) {
 }
 
 // src/components/Switch.tsx
-var import_classnames47 = __toESM(require_classnames());
+var import_classnames48 = __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" };
@@ -31529,7 +31537,7 @@ function Switch2({ label, children, className, ...props }) {
       {
         ...props,
         isSelected,
-        className: (0, import_classnames47.default)(Switch_default.switch, className),
+        className: (0, import_classnames48.default)(Switch_default.switch, className),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: Switch_default.track, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: Switch_default.knob }) }),
           children
@@ -31558,7 +31566,7 @@ function TabPanel2({ children, ...props }) {
 }
 
 // src/components/ThemeButton.tsx
-var import_classnames48 = __toESM(require_classnames());
+var import_classnames49 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\ThemeButton.module.css
 var ThemeButton_default = { "button": "ThemeButton_button__Zjc5N" };
@@ -31593,7 +31601,7 @@ function ThemeButton({
     Button2,
     {
       ...props,
-      className: (0, import_classnames48.default)(ThemeButton_default.button, className),
+      className: (0, import_classnames49.default)(ThemeButton_default.button, className),
       variant,
       onPress: handleClick,
       children: [
@@ -31608,7 +31616,7 @@ function ThemeButton({
 }
 
 // src/components/Toggle.tsx
-var import_classnames49 = __toESM(require_classnames());
+var import_classnames50 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Toggle.module.css
 var Toggle_default = { "toggle": "Toggle_toggle__OWVjZ" };
@@ -31624,7 +31632,7 @@ function Toggle({ label, children, className, ...props }) {
       {
         ...props,
         isSelected,
-        className: (0, import_classnames49.default)(Toggle_default.toggle, className),
+        className: (0, import_classnames50.default)(Toggle_default.toggle, className),
         children
       }
     )
@@ -31632,7 +31640,7 @@ function Toggle({ label, children, className, ...props }) {
 }
 
 // src/components/ToggleGroup.tsx
-var import_classnames50 = __toESM(require_classnames());
+var import_classnames51 = __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" };
@@ -31664,7 +31672,7 @@ function ToggleGroup({
       defaultSelectedKeys: defaultValue || defaultSelectedKeys,
       selectionMode,
       onSelectionChange: handleChange,
-      className: (0, import_classnames50.default)(ToggleGroup_default.group, className),
+      className: (0, import_classnames51.default)(ToggleGroup_default.group, className),
       children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Label2, { children: label }),
         /* @__PURE__ */ (0, import_jsx_runtime66.jsx)($eaf9e70818b436db$export$f9fef0f55402315b, { className: ToggleGroup_default.list, children })
@@ -31673,7 +31681,7 @@ function ToggleGroup({
   );
 }
 function ToggleGroupItem({ className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)($eaf9e70818b436db$export$3288d34c523a1192, { ...props, className: (0, import_classnames50.default)(ToggleGroup_default.item, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)($eaf9e70818b436db$export$3288d34c523a1192, { ...props, className: (0, import_classnames51.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 classNames51() {
+      function classNames52() {
         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 classNames51.apply(null, arg);
+          return classNames52.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) {
-        classNames51.default = classNames51;
-        module.exports = classNames51;
+        classNames52.default = classNames52;
+        module.exports = classNames52;
       } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
         define("classnames", [], function() {
-          return classNames51;
+          return classNames52;
         });
       } else {
-        window.classNames = classNames51;
+        window.classNames = classNames52;
       }
     })();
   }
@@ -25728,7 +25728,7 @@ function AlertBanner({
 }
 
 // css-modules:E:\dev\umami-react-zen\src\components\forms\Form.module.css
-var Form_default = { "form": "Form_form__NmE1N", "text": "Form_text__MjgxN", "icon": "Form_icon__MTI0N" };
+var Form_default = { "form": "Form_form__ZTBhZ", "text": "Form_text__ZjUwN", "icon": "Form_icon__YTRiZ" };
 
 // src/components/forms/Form.tsx
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -31041,24 +31041,16 @@ function NavMenuItem({ isSelected, className, children, ...props }) {
 // src/components/PasswordField.tsx
 import { useState as useState15 } from "react";
 var import_classnames38 = __toESM(require_classnames());
-
-// css-modules:E:\dev\umami-react-zen\src\components\styles\input.module.css
-var input_default = { "field": "input_field__ZmMwY", "row": "input_row__NTc1Z", "input": "input_input__MzU4N", "icon": "input_icon__YzA4Z" };
-
-// css-modules:E:\dev\umami-react-zen\src\components\PasswordField.module.css
-var PasswordField_default = { "icon": "PasswordField_icon__NTRlM" };
-
-// src/components/PasswordField.tsx
-import { jsx as jsx52, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx52, jsxs as jsxs28 } from "react/jsx-runtime";
 function PasswordField({ label, className, ...props }) {
   const [show, setShow] = useState15(false);
   const type = show ? "text" : "password";
   const handleShowPassword = () => setShow((state) => !state);
-  return /* @__PURE__ */ jsxs28($bcdf0525bf22703d$export$2c73285ae9390cec, { ...props, className: (0, import_classnames38.default)(input_default.field, className), children: [
+  return /* @__PURE__ */ jsxs28(Fragment8, { children: [
     label && /* @__PURE__ */ jsx52(Label2, { children: label }),
-    /* @__PURE__ */ jsxs28("div", { className: input_default.row, children: [
-      /* @__PURE__ */ jsx52($3985021b0ad6602f$export$f5b8910cec6cf069, { type, className: input_default.input }),
-      /* @__PURE__ */ jsx52(Icon2, { onClick: handleShowPassword, className: (0, import_classnames38.default)(PasswordField_default.icon, input_default.icon), children: show ? /* @__PURE__ */ jsx52(EyeSlash_default, {}) : /* @__PURE__ */ jsx52(Eye_default, {}) })
+    /* @__PURE__ */ jsxs28($bcdf0525bf22703d$export$2c73285ae9390cec, { "aria-label": "Password", ...props, className: (0, import_classnames38.default)(TextField_default.field, className), children: [
+      /* @__PURE__ */ jsx52($3985021b0ad6602f$export$f5b8910cec6cf069, { type }),
+      /* @__PURE__ */ jsx52(Icon2, { onClick: handleShowPassword, children: show ? /* @__PURE__ */ jsx52(EyeSlash_default, {}) : /* @__PURE__ */ jsx52(Eye_default, {}) })
     ] })
   ] });
 }
@@ -31082,10 +31074,10 @@ var import_classnames40 = __toESM(require_classnames());
 var ProgressBar_default = { "progressbar": "ProgressBar_progressbar__YzdlO", "track": "ProgressBar_track__YzgzY", "fill": "ProgressBar_fill__ZTJlM", "value": "ProgressBar_value__NDk1Z" };
 
 // src/components/ProgressBar.tsx
-import { Fragment as Fragment8, jsx as jsx54, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx54, jsxs as jsxs29 } from "react/jsx-runtime";
 function ProgressBar2({ className, showValue, ...props }) {
   return /* @__PURE__ */ jsx54($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames40.default)(ProgressBar_default.progressbar, className), children: ({ percentage = 0, valueText }) => {
-    return /* @__PURE__ */ jsxs29(Fragment8, { children: [
+    return /* @__PURE__ */ jsxs29(Fragment9, { children: [
       /* @__PURE__ */ jsx54("div", { className: ProgressBar_default.track, children: /* @__PURE__ */ jsx54("div", { className: ProgressBar_default.fill, style: { width: `${percentage}%` } }) }),
       showValue && /* @__PURE__ */ jsx54("div", { className: ProgressBar_default.value, children: valueText })
     ] });
@@ -31099,13 +31091,13 @@ var import_classnames41 = __toESM(require_classnames());
 var ProgressCircle_default = { "progresscircle": "ProgressCircle_progresscircle__NGMyY", "track": "ProgressCircle_track__YzY2M", "fill": "ProgressCircle_fill__ZmMzM", "value": "ProgressCircle_value__YjM0Y" };
 
 // src/components/ProgressCircle.tsx
-import { Fragment as Fragment9, jsx as jsx55, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx55, jsxs as jsxs30 } from "react/jsx-runtime";
 function ProgressCircle({ className, showValue, ...props }) {
   return /* @__PURE__ */ jsx55($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames41.default)(ProgressCircle_default.progresscircle, className), children: ({ percentage = 0, valueText }) => {
     const radius = 45;
     const circumference = radius * 2 * Math.PI;
     const offset = circumference - percentage / 100 * circumference;
-    return /* @__PURE__ */ jsxs30(Fragment9, { children: [
+    return /* @__PURE__ */ jsxs30(Fragment10, { children: [
       /* @__PURE__ */ jsxs30("svg", { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", children: [
         /* @__PURE__ */ jsx55("circle", { className: ProgressCircle_default.track, cx: "50", cy: "50", r: "45" }),
         /* @__PURE__ */ jsx55(
@@ -31146,7 +31138,7 @@ function Radio2({ children, className, ...props }) {
 // src/components/SearchField.tsx
 import { useState as useState16, useEffect as useEffect12 } from "react";
 var import_classnames43 = __toESM(require_classnames());
-import { Fragment as Fragment10, jsx as jsx57, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx57, jsxs as jsxs32 } from "react/jsx-runtime";
 function SearchField2({
   label,
   placeholder,
@@ -31174,7 +31166,7 @@ function SearchField2({
       onSearch?.(searchValue);
     }
   }, [searchValue, delay]);
-  return /* @__PURE__ */ jsxs32(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs32(Fragment11, { children: [
     label && /* @__PURE__ */ jsx57(Label2, { children: label }),
     /* @__PURE__ */ jsxs32(
       $440f4836bcb56932$export$b94867ecbd698f21,
@@ -31195,6 +31187,12 @@ function SearchField2({
 
 // src/components/Select.tsx
 import { useState as useState17 } from "react";
+var import_classnames44 = __toESM(require_classnames());
+
+// css-modules:E:\dev\umami-react-zen\src\components\Select.module.css
+var Select_default = { "select": "Select_select__OWQwZ", "button": "Select_button__YTEzN", "value": "Select_value__N2NjM", "list": "Select_list__ZDFkY", "search": "Select_search__YTgyZ" };
+
+// src/components/Select.tsx
 import { jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";
 function Select2({
   items = [],
@@ -31230,26 +31228,36 @@ function Select2({
     {
       "aria-label": "Select",
       ...props,
+      className: (0, import_classnames44.default)(Select_default.select, className),
       selectedKey: value,
       defaultSelectedKey: defaultValue,
       onSelectionChange: handleChange,
       children: [
         label && /* @__PURE__ */ jsx58(Label2, { children: label }),
-        /* @__PURE__ */ jsx58(Button2, { variant: "outline", ...buttonProps, style: { width: "100%" }, children: /* @__PURE__ */ jsxs33(Row, { alignItems: "center", justifyContent: "space-between", gap: "3", children: [
-          /* @__PURE__ */ jsx58($82d7e5349645de74$export$e288731fd71264f0, { children: renderValue }),
-          /* @__PURE__ */ jsx58(Icon2, { "aria-hidden": "true", rotate: 90, size: "sm", children: /* @__PURE__ */ jsx58(ChevronRight, {}) })
-        ] }) }),
-        /* @__PURE__ */ jsx58(Popover2, { ...popoverProps, children: /* @__PURE__ */ jsx58(Column, { children: /* @__PURE__ */ jsxs33(Box, { padding: "2", border: true, borderRadius: true, backgroundColor: true, shadow: "3", children: [
-          allowSearch && /* @__PURE__ */ jsx58(Box, { marginBottom: "2", children: /* @__PURE__ */ jsx58(
+        /* @__PURE__ */ jsx58(
+          Button2,
+          {
+            variant: "outline",
+            ...buttonProps,
+            className: (0, import_classnames44.default)(Select_default.button, buttonProps?.className),
+            children: /* @__PURE__ */ jsxs33("div", { className: Select_default.value, children: [
+              /* @__PURE__ */ jsx58($82d7e5349645de74$export$e288731fd71264f0, { children: renderValue }),
+              /* @__PURE__ */ jsx58(Icon2, { "aria-hidden": "true", rotate: 90, size: "sm", children: /* @__PURE__ */ jsx58(ChevronRight, {}) })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx58(Popover2, { ...popoverProps, children: /* @__PURE__ */ jsxs33("div", { className: Select_default.list, children: [
+          allowSearch && /* @__PURE__ */ jsx58(
             SearchField2,
             {
+              className: Select_default.search,
               value: search,
               onSearch: handleSearch,
               delay: searchDelay,
               defaultValue: searchValue,
               autoFocus: true
             }
-          ) }),
+          ),
           isLoading && /* @__PURE__ */ jsx58(Loading, { icon: "dots", position: "center", size: "sm" }),
           /* @__PURE__ */ jsx58(
             List,
@@ -31260,14 +31268,14 @@ function Select2({
               children
             }
           )
-        ] }) }) })
+        ] }) })
       ]
     }
   );
 }
 
 // src/components/Sidebar.tsx
-var import_classnames44 = __toESM(require_classnames());
+var import_classnames45 = __toESM(require_classnames());
 import { createContext as createContext4, useContext as useContext6 } from "react";
 
 // css-modules:E:\dev\umami-react-zen\src\components\Sidebar.module.css
@@ -31289,7 +31297,7 @@ function Sidebar({
     Column,
     {
       ...props,
-      className: (0, import_classnames44.default)(
+      className: (0, import_classnames45.default)(
         Sidebar_default.sidenav,
         isCollapsed && Sidebar_default.collapsed,
         muteItems && Sidebar_default.muted,
@@ -31317,9 +31325,9 @@ function SidebarHeader({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs34(Row, { ...props, className: (0, import_classnames44.default)(Sidebar_default.header, className), children: [
+  return /* @__PURE__ */ jsxs34(Row, { ...props, className: (0, import_classnames45.default)(Sidebar_default.header, className), children: [
     icon && /* @__PURE__ */ jsx59(Icon2, { size: "sm", children: icon }),
-    /* @__PURE__ */ jsx59("div", { className: (0, import_classnames44.default)(Sidebar_default.name, Sidebar_default.label), children: label }),
+    /* @__PURE__ */ jsx59("div", { className: (0, import_classnames45.default)(Sidebar_default.name, Sidebar_default.label), children: label }),
     children
   ] });
 }
@@ -31337,10 +31345,10 @@ function SidebarItem({
       Row,
       {
         ...props,
-        className: (0, import_classnames44.default)(Sidebar_default.item, className, isSelected && Sidebar_default.selected),
+        className: (0, import_classnames45.default)(Sidebar_default.item, className, isSelected && Sidebar_default.selected),
         children: [
           icon && /* @__PURE__ */ jsx59(Icon2, { size: "sm", children: icon }),
-          label && /* @__PURE__ */ jsx59(Text, { className: (0, import_classnames44.default)(Sidebar_default.label), children: label }),
+          label && /* @__PURE__ */ jsx59(Text, { className: (0, import_classnames45.default)(Sidebar_default.label), children: label }),
           children
         ]
       }
@@ -31350,22 +31358,22 @@ function SidebarItem({
 }
 
 // src/components/Slider.tsx
-var import_classnames45 = __toESM(require_classnames());
+var import_classnames46 = __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" };
 
 // src/components/Slider.tsx
-import { Fragment as Fragment11, jsx as jsx60, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx60, jsxs as jsxs35 } from "react/jsx-runtime";
 function Slider2({ className, showValue = true, label, ...props }) {
-  return /* @__PURE__ */ jsxs35($6f909507e6374d18$export$472062a354075cee, { ...props, className: (0, import_classnames45.default)(Slider_default.slider, className), children: [
+  return /* @__PURE__ */ jsxs35($6f909507e6374d18$export$472062a354075cee, { ...props, className: (0, import_classnames46.default)(Slider_default.slider, className), children: [
     /* @__PURE__ */ jsxs35("div", { className: Slider_default.header, children: [
       label && /* @__PURE__ */ jsx60(Label2, { className: Slider_default.label, children: label }),
       showValue && /* @__PURE__ */ jsx60($6f909507e6374d18$export$a590f758a961cb5b, { className: Slider_default.output })
     ] }),
     /* @__PURE__ */ jsx60($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
       const isHorizontal = state.orientation === "horizontal";
-      return /* @__PURE__ */ jsxs35(Fragment11, { children: [
+      return /* @__PURE__ */ jsxs35(Fragment12, { children: [
         /* @__PURE__ */ jsx60(
           "div",
           {
@@ -31382,7 +31390,7 @@ function Slider2({ className, showValue = true, label, ...props }) {
 }
 
 // src/components/StatusLight.tsx
-var import_classnames46 = __toESM(require_classnames());
+var import_classnames47 = __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" };
@@ -31391,11 +31399,11 @@ var StatusLight_default = { "statuslight": "StatusLight_statuslight__MTliM", "st
 import { jsx as jsx61, jsxs as jsxs36 } from "react/jsx-runtime";
 function StatusLight(props) {
   const { color, variant = "inactive", children, className, ...domProps } = props;
-  return /* @__PURE__ */ jsxs36("div", { ...domProps, className: (0, import_classnames46.default)(StatusLight_default.statuslight, className), children: [
+  return /* @__PURE__ */ jsxs36("div", { ...domProps, className: (0, import_classnames47.default)(StatusLight_default.statuslight, className), children: [
     /* @__PURE__ */ jsx61("div", { className: StatusLight_default.bg, children: /* @__PURE__ */ jsx61(
       "div",
       {
-        className: (0, import_classnames46.default)(StatusLight_default.status, StatusLight_default[variant]),
+        className: (0, import_classnames47.default)(StatusLight_default.status, StatusLight_default[variant]),
         style: { backgroundColor: color }
       }
     ) }),
@@ -31404,23 +31412,23 @@ function StatusLight(props) {
 }
 
 // src/components/Switch.tsx
-var import_classnames47 = __toESM(require_classnames());
+var import_classnames48 = __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" };
 
 // src/components/Switch.tsx
-import { Fragment as Fragment12, jsx as jsx62, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx62, jsxs as jsxs37 } from "react/jsx-runtime";
 function Switch2({ label, children, className, ...props }) {
   const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-  return /* @__PURE__ */ jsxs37(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs37(Fragment13, { children: [
     label && /* @__PURE__ */ jsx62(Label2, { children: label }),
     /* @__PURE__ */ jsxs37(
       $8e59e948500a8fe1$export$b5d5cf8927ab7262,
       {
         ...props,
         isSelected,
-        className: (0, import_classnames47.default)(Switch_default.switch, className),
+        className: (0, import_classnames48.default)(Switch_default.switch, className),
         children: [
           /* @__PURE__ */ jsx62("div", { className: Switch_default.track, children: /* @__PURE__ */ jsx62("div", { className: Switch_default.knob }) }),
           children
@@ -31449,7 +31457,7 @@ function TabPanel2({ children, ...props }) {
 }
 
 // src/components/ThemeButton.tsx
-var import_classnames48 = __toESM(require_classnames());
+var import_classnames49 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\ThemeButton.module.css
 var ThemeButton_default = { "button": "ThemeButton_button__Zjc5N" };
@@ -31484,7 +31492,7 @@ function ThemeButton({
     Button2,
     {
       ...props,
-      className: (0, import_classnames48.default)(ThemeButton_default.button, className),
+      className: (0, import_classnames49.default)(ThemeButton_default.button, className),
       variant,
       onPress: handleClick,
       children: [
@@ -31499,23 +31507,23 @@ function ThemeButton({
 }
 
 // src/components/Toggle.tsx
-var import_classnames49 = __toESM(require_classnames());
+var import_classnames50 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Toggle.module.css
 var Toggle_default = { "toggle": "Toggle_toggle__OWVjZ" };
 
 // src/components/Toggle.tsx
-import { Fragment as Fragment13, jsx as jsx65, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx65, jsxs as jsxs39 } from "react/jsx-runtime";
 function Toggle({ label, children, className, ...props }) {
   const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-  return /* @__PURE__ */ jsxs39(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs39(Fragment14, { children: [
     label && /* @__PURE__ */ jsx65(Label2, { children: label }),
     /* @__PURE__ */ jsx65(
       $efde0372d7a700fe$export$d2b052e7b4be1756,
       {
         ...props,
         isSelected,
-        className: (0, import_classnames49.default)(Toggle_default.toggle, className),
+        className: (0, import_classnames50.default)(Toggle_default.toggle, className),
         children
       }
     )
@@ -31523,7 +31531,7 @@ function Toggle({ label, children, className, ...props }) {
 }
 
 // src/components/ToggleGroup.tsx
-var import_classnames50 = __toESM(require_classnames());
+var import_classnames51 = __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" };
@@ -31555,7 +31563,7 @@ function ToggleGroup({
       defaultSelectedKeys: defaultValue || defaultSelectedKeys,
       selectionMode,
       onSelectionChange: handleChange,
-      className: (0, import_classnames50.default)(ToggleGroup_default.group, className),
+      className: (0, import_classnames51.default)(ToggleGroup_default.group, className),
       children: [
         label && /* @__PURE__ */ jsx66(Label2, { children: label }),
         /* @__PURE__ */ jsx66($eaf9e70818b436db$export$f9fef0f55402315b, { className: ToggleGroup_default.list, children })
@@ -31564,7 +31572,7 @@ function ToggleGroup({
   );
 }
 function ToggleGroupItem({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx66($eaf9e70818b436db$export$3288d34c523a1192, { ...props, className: (0, import_classnames50.default)(ToggleGroup_default.item, className), children });
+  return /* @__PURE__ */ jsx66($eaf9e70818b436db$export$3288d34c523a1192, { ...props, className: (0, import_classnames51.default)(ToggleGroup_default.item, className), children });
 }
 
 // src/components/ZenProvider.tsx

package/package.json

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

package/styles.css

@@ -3333,17 +3333,18 @@ li {
 }
 
 /* virtual-css:css:c1c264103e87c7a7d9c345a7e75f073b */
-.Form_form__NmE1N {
-  display: grid;
+.Form_form__ZTBhZ {
+  display: flex;
+  flex-direction: column;
   position: relative;
   font-size: var(--font-size);
   gap: var(--gap);
 }
-.Form_text__MjgxN {
+.Form_text__ZjUwN {
   text-align: center;
   margin: auto;
 }
-.Form_icon__MTI0N {
+.Form_icon__YTRiZ {
   align-self: flex-start;
 }
 
@@ -4601,59 +4602,6 @@ body a.Button_button__NDYwM {
   }
 }
 
-/* virtual-css:css:ac55918cdbb6b3a9ac9deedf05ce3806 */
-.input_field__ZmMwY {
-  position: relative;
-}
-.input_field__ZmMwY,
-.input_row__NTc1Z {
-  position: relative;
-}
-.input_field__ZmMwY[data-readonly] .input_input__MzU4N,
-.input_field__ZmMwY[data-disabled] .input_input__MzU4N {
-  background: var(--base-color-2);
-}
-.input_input__MzU4N {
-  font-size: var(--font-size);
-  color: var(--font-color);
-  border: var(--border);
-  border-radius: var(--border-radius);
-  background: var(--background-color);
-  box-shadow: var(--box-shadow);
-  padding: var(--padding);
-  line-height: 1.5rem;
-  width: 100%;
-}
-.input_input__MzU4N:focus {
-  border-color: transparent;
-  outline: var(--outline);
-  outline-offset: -1px;
-}
-.input_input__MzU4N::placeholder {
-  color: var(--font-color-muted);
-}
-.input_input__MzU4N:disabled {
-  color: var(--font-color-muted);
-}
-.input_input__MzU4N::-webkit-search-cancel-button,
-.input_input__MzU4N::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-.input_icon__YzA4Z {
-  color: var(--font-color-muted);
-}
-.input_icon__YzA4Z:hover {
-  color: var(--font-color);
-  cursor: pointer;
-}
-
-/* virtual-css:css:3547a441584a5024882cb71ab3ccf244 */
-.PasswordField_icon__NTRlM {
-  position: absolute;
-  top: 12px;
-  right: 9px;
-}
-
 /* virtual-css:css:f94974973c639ccc39a8a6465cbebeb2 */
 .Popover_popover__YmFhM[data-placement=top] {
   --origin: translateY(8px);
@@ -4790,6 +4738,30 @@ body a.Button_button__NDYwM {
   background-color: var(--base-color-4);
 }
 
+/* virtual-css:css:851dd5366a20c382ffec60997ee93e35 */
+.Select_select__OWQwZ {
+  width: 100%;
+}
+.Select_button__YTEzN {
+  width: 100%;
+}
+.Select_value__N2NjM {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+.Select_list__ZDFkY {
+  padding: var(--spacing-2);
+  background-color: var(--background-color);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow-3);
+}
+.Select_search__YTgyZ {
+  margin-bottom: var(--spacing-2);
+}
+
 /* virtual-css:css:844962527a8f0e375161b58db0fc39ed */
 .Sidebar_sidenav__ODc2Z {
   height: 100%;