@umami/react-zen 0.122.0 → 0.125.0

package/dist/index.css

@@ -3046,7 +3046,7 @@
 }
 
 /* virtual-css:css:616ae3b49446388ff62e911490fa55d8 */
-.Button_button__NDYwM {
+.Button_button__YTAxZ {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3065,86 +3065,89 @@
   line-height: 1.5;
   --button-height: calc(1.5 * var(--font-size) + 2 * var(--padding-y)) ;
 }
-.Button_button__NDYwM:disabled {
+.Button_button__YTAxZ:disabled {
   color: var(--font-color-muted);
   pointer-events: none;
 }
-.Button_button__NDYwM:hover {
+.Button_button__YTAxZ:hover {
   color: var(--font-color);
   background: color-mix(in srgb, var(--base-color-3), 5% var(--dark-color));
 }
-.Button_button__NDYwM[data-pressed] {
+.Button_button__YTAxZ[data-pressed] {
   background: color-mix(in srgb, var(--base-color-3), 10% var(--dark-color));
 }
-.Button_button__NDYwM.Button_primary__OWE0M {
+.Button_button__YTAxZ.Button_primary__NDFlY {
   color: var(--primary-font-color) !important;
   background: var(--primary-color);
 }
-.Button_button__NDYwM.Button_primary__OWE0M:hover {
+.Button_button__YTAxZ.Button_primary__NDFlY:hover {
   background: color-mix(in srgb, var(--primary-color), 10% var(--primary-font-color));
 }
-.Button_button__NDYwM.Button_primary__OWE0M[data-pressed] {
+.Button_button__YTAxZ.Button_primary__NDFlY[data-pressed] {
   background: color-mix(in srgb, var(--primary-color), 20% var(--primary-font-color));
 }
-.Button_button__NDYwM.Button_primary__OWE0M:disabled {
+.Button_button__YTAxZ.Button_primary__NDFlY:disabled {
   color: var(--primary-font-color);
   background: var(--base-color-9);
 }
-.Button_button__NDYwM.Button_outline__NTQyN {
+.Button_button__YTAxZ.Button_outline__ZjQ3O {
   background: var(--background-color);
   border: var(--border);
   box-shadow: var(--box-shadow-1);
 }
-.Button_button__NDYwM.Button_outline__NTQyN:hover {
+.Button_button__YTAxZ.Button_outline__ZjQ3O:hover {
   border-color: var(--border-color-3);
 }
-.Button_button__NDYwM.Button_outline__NTQyN[data-pressed] {
+.Button_button__YTAxZ.Button_outline__ZjQ3O[data-pressed] {
   background: var(--highlight-color);
 }
-.Button_button__NDYwM.Button_quiet__NDFjM {
+.Button_button__YTAxZ.Button_outline__ZjQ3O:disabled {
+  background: var(--base-color-2);
+}
+.Button_button__YTAxZ.Button_quiet__ZWYwN {
   background: transparent;
 }
-.Button_button__NDYwM.Button_quiet__NDFjM:hover {
+.Button_button__YTAxZ.Button_quiet__ZWYwN:hover {
   background: var(--highlight-color);
 }
-.Button_button__NDYwM.Button_quiet__NDFjM[data-pressed] {
+.Button_button__YTAxZ.Button_quiet__ZWYwN[data-pressed] {
   background: color-mix(in srgb, var(--highlight-color), 5% var(--dark-color));
 }
-.Button_button__NDYwM.Button_danger__NDUzM {
+.Button_button__YTAxZ.Button_danger__YTg1M {
   color: var(--light-color);
   background: var(--danger-color);
 }
-.Button_button__NDYwM.Button_danger__NDUzM:hover {
+.Button_button__YTAxZ.Button_danger__YTg1M:hover {
   background: color-mix(in srgb, var(--danger-color), 6% black);
 }
-.Button_button__NDYwM.Button_danger__NDUzM[data-pressed] {
+.Button_button__YTAxZ.Button_danger__YTg1M[data-pressed] {
   background: color-mix(in srgb, var(--danger-color), 12% black);
 }
-.Button_button__NDYwM.Button_danger__NDUzM:disabled {
+.Button_button__YTAxZ.Button_danger__YTg1M:disabled {
   color: var(--primary-font-color);
   background: var(--base-color-8);
 }
-.Button_button__NDYwM.Button_sm__NTVjM {
+.Button_button__YTAxZ.Button_sm__ZTAwM {
   font-size: calc(0.9 * var(--font-size));
   padding: calc(0.5 * var(--padding-y)) calc(0.75 * var(--padding-x));
   min-height: calc(0.9 * var(--button-height));
 }
-.Button_button__NDYwM.Button_md__NDE4O {
+.Button_button__YTAxZ.Button_md__MDNjZ {
   font-size: var(--font-size);
   padding: var(--padding);
   min-height: var(--button-height);
 }
-.Button_button__NDYwM.Button_lg__NTU4O {
+.Button_button__YTAxZ.Button_lg__Njc0N {
   font-size: calc(1.25 * var(--font-size));
   padding: var(--padding-y) calc(1.25 * var(--padding-x));
   min-height: calc(1.25 * var(--button-height));
 }
-.Button_button__NDYwM.Button_xl__NjFkM {
+.Button_button__YTAxZ.Button_xl__MmUxM {
   font-size: calc(1.5 * var(--font-size));
   padding: calc(1.25 * var(--padding-y)) calc(1.25 * var(--padding-x));
   min-height: calc(1.5 * var(--button-height));
 }
-body a.Button_button__NDYwM {
+body a.Button_button__YTAxZ {
   color: inherit;
   text-decoration: none;
 }
@@ -3651,7 +3654,7 @@ body a.Button_button__NDYwM {
 }
 
 /* virtual-css:css:f85c857d13f820fa4badfb09996080b9 */
-.TextField_field__YWExY {
+.TextField_field__YWQzN {
   display: flex;
   align-items: center;
   padding: 0 var(--padding-x);
@@ -3682,12 +3685,13 @@ body a.Button_button__NDYwM {
     }
   }
 }
-.TextField_field__YWExY input,
-.TextField_field__YWExY textarea {
+.TextField_field__YWQzN input,
+.TextField_field__YWQzN textarea {
   border: none;
   outline: none;
   padding: var(--padding-y) 0;
   background: transparent;
+  width: 100%;
   flex: 1;
   &::placeholder {
     color: var(--font-color-muted);
@@ -3697,8 +3701,11 @@ body a.Button_button__NDYwM {
     -webkit-appearance: none;
   }
 }
-.TextField_textarea__ODY3N {
-  padding-right: 0;
+.TextField_textarea__YWRmM {
+  padding: 0;
+  & textarea {
+    padding: var(--padding);
+  }
 }
 
 /* virtual-css:css:603e8ab63f869366a7b9c81da6a1d757 */
@@ -4421,26 +4428,27 @@ body a.Button_button__NDYwM {
 }
 
 /* virtual-css:css:851dd5366a20c382ffec60997ee93e35 */
-.Select_select__OWQwZ {
+.Select_select__NmFmN {
   width: 100%;
 }
-.Select_button__YTEzN {
+.Select_button__OGYyM {
   width: 100%;
 }
-.Select_value__N2NjM {
+.Select_value__N2M0Y {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
 }
-.Select_list__ZDFkY {
+.Select_list__NzIyZ {
   padding: var(--spacing-2);
   background-color: var(--background-color);
   border: var(--border);
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow-3);
+  width: 260px;
 }
-.Select_search__YTgyZ {
+.Select_search__MGM1N {
   margin-bottom: var(--spacing-2);
 }
 

package/dist/index.js

@@ -26136,7 +26136,7 @@ function FormField({
 var import_classnames7 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Button.module.css
-var Button_default = { "button": "Button_button__NDYwM", "primary": "Button_primary__OWE0M", "outline": "Button_outline__NTQyN", "quiet": "Button_quiet__NDFjM", "danger": "Button_danger__NDUzM", "sm": "Button_sm__NTVjM", "md": "Button_md__NDE4O", "lg": "Button_lg__NTU4O", "xl": "Button_xl__NjFkM" };
+var Button_default = { "button": "Button_button__YTAxZ", "primary": "Button_primary__NDFlY", "outline": "Button_outline__ZjQ3O", "quiet": "Button_quiet__ZWYwN", "danger": "Button_danger__YTg1M", "sm": "Button_sm__ZTAwM", "md": "Button_md__MDNjZ", "lg": "Button_lg__Njc0N", "xl": "Button_xl__MmUxM" };
 
 // src/components/Button.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
@@ -30408,7 +30408,7 @@ function CopyButton({ value, timeout = TIMEOUT, className, children, ...props })
 }
 
 // css-modules:E:\dev\umami-react-zen\src\components\TextField.module.css
-var TextField_default = { "field": "TextField_field__YWExY", "textarea": "TextField_textarea__ODY3N" };
+var TextField_default = { "field": "TextField_field__YWQzN", "textarea": "TextField_textarea__YWRmM" };
 
 // src/components/TextField.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
@@ -31299,7 +31299,7 @@ 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" };
+var Select_default = { "select": "Select_select__NmFmN", "button": "Select_button__OGYyM", "value": "Select_value__N2M0Y", "list": "Select_list__NzIyZ", "search": "Select_search__MGM1N" };
 
 // src/components/Select.tsx
 var import_jsx_runtime58 = require("react/jsx-runtime");

package/dist/index.mjs

@@ -26023,7 +26023,7 @@ function FormField({
 var import_classnames7 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Button.module.css
-var Button_default = { "button": "Button_button__NDYwM", "primary": "Button_primary__OWE0M", "outline": "Button_outline__NTQyN", "quiet": "Button_quiet__NDFjM", "danger": "Button_danger__NDUzM", "sm": "Button_sm__NTVjM", "md": "Button_md__NDE4O", "lg": "Button_lg__NTU4O", "xl": "Button_xl__NjFkM" };
+var Button_default = { "button": "Button_button__YTAxZ", "primary": "Button_primary__NDFlY", "outline": "Button_outline__ZjQ3O", "quiet": "Button_quiet__ZWYwN", "danger": "Button_danger__YTg1M", "sm": "Button_sm__ZTAwM", "md": "Button_md__MDNjZ", "lg": "Button_lg__Njc0N", "xl": "Button_xl__MmUxM" };
 
 // src/components/Button.tsx
 import { jsx as jsx13 } from "react/jsx-runtime";
@@ -30295,7 +30295,7 @@ function CopyButton({ value, timeout = TIMEOUT, className, children, ...props })
 }
 
 // css-modules:E:\dev\umami-react-zen\src\components\TextField.module.css
-var TextField_default = { "field": "TextField_field__YWExY", "textarea": "TextField_textarea__ODY3N" };
+var TextField_default = { "field": "TextField_field__YWQzN", "textarea": "TextField_textarea__YWRmM" };
 
 // src/components/TextField.tsx
 import { Fragment as Fragment4, jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
@@ -31190,7 +31190,7 @@ 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" };
+var Select_default = { "select": "Select_select__NmFmN", "button": "Select_button__OGYyM", "value": "Select_value__N2M0Y", "list": "Select_list__NzIyZ", "search": "Select_search__MGM1N" };
 
 // src/components/Select.tsx
 import { jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";

package/package.json

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

package/styles.css

@@ -3364,7 +3364,7 @@ li {
 }
 
 /* virtual-css:css:616ae3b49446388ff62e911490fa55d8 */
-.Button_button__NDYwM {
+.Button_button__YTAxZ {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3383,86 +3383,89 @@ li {
   line-height: 1.5;
   --button-height: calc(1.5 * var(--font-size) + 2 * var(--padding-y)) ;
 }
-.Button_button__NDYwM:disabled {
+.Button_button__YTAxZ:disabled {
   color: var(--font-color-muted);
   pointer-events: none;
 }
-.Button_button__NDYwM:hover {
+.Button_button__YTAxZ:hover {
   color: var(--font-color);
   background: color-mix(in srgb, var(--base-color-3), 5% var(--dark-color));
 }
-.Button_button__NDYwM[data-pressed] {
+.Button_button__YTAxZ[data-pressed] {
   background: color-mix(in srgb, var(--base-color-3), 10% var(--dark-color));
 }
-.Button_button__NDYwM.Button_primary__OWE0M {
+.Button_button__YTAxZ.Button_primary__NDFlY {
   color: var(--primary-font-color) !important;
   background: var(--primary-color);
 }
-.Button_button__NDYwM.Button_primary__OWE0M:hover {
+.Button_button__YTAxZ.Button_primary__NDFlY:hover {
   background: color-mix(in srgb, var(--primary-color), 10% var(--primary-font-color));
 }
-.Button_button__NDYwM.Button_primary__OWE0M[data-pressed] {
+.Button_button__YTAxZ.Button_primary__NDFlY[data-pressed] {
   background: color-mix(in srgb, var(--primary-color), 20% var(--primary-font-color));
 }
-.Button_button__NDYwM.Button_primary__OWE0M:disabled {
+.Button_button__YTAxZ.Button_primary__NDFlY:disabled {
   color: var(--primary-font-color);
   background: var(--base-color-9);
 }
-.Button_button__NDYwM.Button_outline__NTQyN {
+.Button_button__YTAxZ.Button_outline__ZjQ3O {
   background: var(--background-color);
   border: var(--border);
   box-shadow: var(--box-shadow-1);
 }
-.Button_button__NDYwM.Button_outline__NTQyN:hover {
+.Button_button__YTAxZ.Button_outline__ZjQ3O:hover {
   border-color: var(--border-color-3);
 }
-.Button_button__NDYwM.Button_outline__NTQyN[data-pressed] {
+.Button_button__YTAxZ.Button_outline__ZjQ3O[data-pressed] {
   background: var(--highlight-color);
 }
-.Button_button__NDYwM.Button_quiet__NDFjM {
+.Button_button__YTAxZ.Button_outline__ZjQ3O:disabled {
+  background: var(--base-color-2);
+}
+.Button_button__YTAxZ.Button_quiet__ZWYwN {
   background: transparent;
 }
-.Button_button__NDYwM.Button_quiet__NDFjM:hover {
+.Button_button__YTAxZ.Button_quiet__ZWYwN:hover {
   background: var(--highlight-color);
 }
-.Button_button__NDYwM.Button_quiet__NDFjM[data-pressed] {
+.Button_button__YTAxZ.Button_quiet__ZWYwN[data-pressed] {
   background: color-mix(in srgb, var(--highlight-color), 5% var(--dark-color));
 }
-.Button_button__NDYwM.Button_danger__NDUzM {
+.Button_button__YTAxZ.Button_danger__YTg1M {
   color: var(--light-color);
   background: var(--danger-color);
 }
-.Button_button__NDYwM.Button_danger__NDUzM:hover {
+.Button_button__YTAxZ.Button_danger__YTg1M:hover {
   background: color-mix(in srgb, var(--danger-color), 6% black);
 }
-.Button_button__NDYwM.Button_danger__NDUzM[data-pressed] {
+.Button_button__YTAxZ.Button_danger__YTg1M[data-pressed] {
   background: color-mix(in srgb, var(--danger-color), 12% black);
 }
-.Button_button__NDYwM.Button_danger__NDUzM:disabled {
+.Button_button__YTAxZ.Button_danger__YTg1M:disabled {
   color: var(--primary-font-color);
   background: var(--base-color-8);
 }
-.Button_button__NDYwM.Button_sm__NTVjM {
+.Button_button__YTAxZ.Button_sm__ZTAwM {
   font-size: calc(0.9 * var(--font-size));
   padding: calc(0.5 * var(--padding-y)) calc(0.75 * var(--padding-x));
   min-height: calc(0.9 * var(--button-height));
 }
-.Button_button__NDYwM.Button_md__NDE4O {
+.Button_button__YTAxZ.Button_md__MDNjZ {
   font-size: var(--font-size);
   padding: var(--padding);
   min-height: var(--button-height);
 }
-.Button_button__NDYwM.Button_lg__NTU4O {
+.Button_button__YTAxZ.Button_lg__Njc0N {
   font-size: calc(1.25 * var(--font-size));
   padding: var(--padding-y) calc(1.25 * var(--padding-x));
   min-height: calc(1.25 * var(--button-height));
 }
-.Button_button__NDYwM.Button_xl__NjFkM {
+.Button_button__YTAxZ.Button_xl__MmUxM {
   font-size: calc(1.5 * var(--font-size));
   padding: calc(1.25 * var(--padding-y)) calc(1.25 * var(--padding-x));
   min-height: calc(1.5 * var(--button-height));
 }
-body a.Button_button__NDYwM {
+body a.Button_button__YTAxZ {
   color: inherit;
   text-decoration: none;
 }
@@ -3969,7 +3972,7 @@ body a.Button_button__NDYwM {
 }
 
 /* virtual-css:css:f85c857d13f820fa4badfb09996080b9 */
-.TextField_field__YWExY {
+.TextField_field__YWQzN {
   display: flex;
   align-items: center;
   padding: 0 var(--padding-x);
@@ -4000,12 +4003,13 @@ body a.Button_button__NDYwM {
     }
   }
 }
-.TextField_field__YWExY input,
-.TextField_field__YWExY textarea {
+.TextField_field__YWQzN input,
+.TextField_field__YWQzN textarea {
   border: none;
   outline: none;
   padding: var(--padding-y) 0;
   background: transparent;
+  width: 100%;
   flex: 1;
   &::placeholder {
     color: var(--font-color-muted);
@@ -4015,8 +4019,11 @@ body a.Button_button__NDYwM {
     -webkit-appearance: none;
   }
 }
-.TextField_textarea__ODY3N {
-  padding-right: 0;
+.TextField_textarea__YWRmM {
+  padding: 0;
+  & textarea {
+    padding: var(--padding);
+  }
 }
 
 /* virtual-css:css:603e8ab63f869366a7b9c81da6a1d757 */
@@ -4739,26 +4746,27 @@ body a.Button_button__NDYwM {
 }
 
 /* virtual-css:css:851dd5366a20c382ffec60997ee93e35 */
-.Select_select__OWQwZ {
+.Select_select__NmFmN {
   width: 100%;
 }
-.Select_button__YTEzN {
+.Select_button__OGYyM {
   width: 100%;
 }
-.Select_value__N2NjM {
+.Select_value__N2M0Y {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
 }
-.Select_list__ZDFkY {
+.Select_list__NzIyZ {
   padding: var(--spacing-2);
   background-color: var(--background-color);
   border: var(--border);
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow-3);
+  width: 260px;
 }
-.Select_search__YTgyZ {
+.Select_search__MGM1N {
   margin-bottom: var(--spacing-2);
 }