@umami/react-zen 0.120.0 → 0.121.0

package/package.json

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

package/styles.css

@@ -3333,15 +3333,17 @@ li {
 }
 
 /* virtual-css:css:c1c264103e87c7a7d9c345a7e75f073b */
-.Form_form__ZjMwZ {
+.Form_form__NmE1N {
+  display: grid;
   position: relative;
   font-size: var(--font-size);
+  gap: var(--gap);
 }
-.Form_text__NDc1Y {
+.Form_text__MjgxN {
   text-align: center;
   margin: auto;
 }
-.Form_icon__ZGE1Z {
+.Form_icon__MTI0N {
   align-self: flex-start;
 }
 
@@ -3965,61 +3967,55 @@ 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 {
+/* virtual-css:css:f85c857d13f820fa4badfb09996080b9 */
+.TextField_field__YWExY {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--padding-x);
+  gap: var(--gap);
+  font-family: inherit;
   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;
+  position: relative;
+  &[data-readonly] {
+    background: var(--base-color-2);
+  }
+  &[data-disabled] {
+    color: var(--font-color-muted);
+    background: var(--base-color-2);
+  }
+  &:focus-within {
+    border-color: transparent;
+    outline: var(--outline);
+    outline-offset: -1px;
+    &[data-readonly] {
+      border-color: var(--border-color);
+      outline: none;
+    }
+  }
 }
-
-/* virtual-css:css:f85c857d13f820fa4badfb09996080b9 */
-.TextField_allowCopy__Y2RhY {
-  padding-right: 32px;
+.TextField_field__YWExY input,
+.TextField_field__YWExY textarea {
+  border: none;
+  outline: none;
+  padding: var(--padding-y) 0;
+  background: transparent;
+  flex: 1;
+  &::placeholder {
+    color: var(--font-color-muted);
+  }
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
 }
-.TextField_icon__MWVlN {
-  position: absolute;
-  top: calc(var(--padding-y) + 4px);
-  right: var(--padding-x);
-  background: none;
+.TextField_textarea__ODY3N {
+  padding-right: 0;
 }
 
 /* virtual-css:css:603e8ab63f869366a7b9c81da6a1d757 */
@@ -4349,7 +4345,7 @@ body a.Button_button__NDYwM {
 }
 
 /* virtual-css:css:3130df15a3cfaee8cb812b182afb7ee1 */
-.Menu_menu__ZGIxY {
+.Menu_menu__OTZkN {
   min-width: 200px;
   border: var(--border);
   border-radius: var(--border-radius);
@@ -4358,19 +4354,19 @@ body a.Button_button__NDYwM {
   background: var(--background-color);
   overflow: hidden;
 }
-.Menu_separator__YjgwM {
+.Menu_separator__ZTgwZ {
   border-bottom: var(--border);
   margin: var(--spacing-2) calc(-1 * var(--spacing-3));
 }
-.Menu_section__MmNkY:not(:last-child) {
+.Menu_section__ZDVhM:not(:last-child) {
   margin-bottom: var(--spacing-4);
 }
-.Menu_header__YmQ0M {
+.Menu_header__YWE2Z {
   font-size: var(--font-size-2);
   font-weight: var(--font-weight-bold);
   padding: var(--padding);
 }
-.Menu_item__NzJlM {
+.Menu_item__MTU4N {
   display: flex;
   align-items: center;
   gap: var(--gap);
@@ -4383,26 +4379,28 @@ body a.Button_button__NDYwM {
   outline: none;
   width: 100%;
 }
-.Menu_item__NzJlM[data-disabled] {
+.Menu_item__MTU4N[data-disabled] {
   color: var(--font-color-disabled);
 }
-.Menu_item__NzJlM[data-focus],
-.Menu_item__NzJlM[data-focus-visible] {
+.Menu_item__MTU4N[data-focus],
+.Menu_item__MTU4N[data-focus-visible] {
   outline: var(--outline);
   background: var(--highlight-color);
 }
-.Menu_item__NzJlM:hover {
+.Menu_item__MTU4N:hover {
   background: var(--highlight-color);
 }
-.Menu_item__NzJlM[data-selected] {
+.Menu_item__MTU4N[data-selected] {
   font-weight: bold;
+  & .Menu_checkmark__MTk4O {
+    display: flex;
+    justify-content: flex-end;
+  }
 }
-.Menu_item__NzJlM[data-selected] .Menu_check__ZDc1Z {
-  display: flex;
-  justify-content: flex-end;
-  flex: 1;
+.Menu_checkmark__MTk4O {
+  display: none;
 }
-.Menu_check__ZDc1Z {
+.Menu_hideCheckmark__MjEyZ .Menu_checkmark__MTk4O {
   display: none;
 }
 
@@ -4603,6 +4601,52 @@ 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;
@@ -4746,32 +4790,6 @@ body a.Button_button__NDYwM {
   background-color: var(--base-color-4);
 }
 
-/* virtual-css:css:3ce2e85ef9035a94276951bdf0511402 */
-.SearchField_search__MzkwY {
-  position: absolute;
-  top: 0;
-  left: var(--spacing-3);
-  bottom: 0;
-  height: 100%;
-  background: none;
-}
-.SearchField_input__OGFiY {
-  padding-left: var(--spacing-7);
-  padding-right: var(--spacing-7);
-}
-.SearchField_close__NmJkM {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 0;
-  right: var(--spacing-3);
-  bottom: 0;
-  height: 100%;
-  border: 0;
-  background: none;
-}
-
 /* virtual-css:css:844962527a8f0e375161b58db0fc39ed */
 .Sidebar_sidenav__ODc2Z {
   height: 100%;
@@ -5098,20 +5116,6 @@ body a.Button_button__NDYwM {
   cursor: default;
 }
 
-/* virtual-css:css:884bc0b1f4a7097bca42714da27c0d2b */
-.TextArea_textarea__MTk5Y {
-  font-family: inherit;
-}
-.TextArea_resize-none__OTJhY textarea {
-  resize: none;
-}
-.TextArea_resize-horizontal__YWIyZ textarea {
-  resize: horizontal;
-}
-.TextArea_resize-vertical__NTM3O textarea {
-  resize: vertical;
-}
-
 /* virtual-css:css:c0d584d0daeaec1be71f8a50d43bf66c */
 .ThemeButton_button__Zjc5N {
   width: 50px;