@umami/react-zen 0.60.0 → 0.62.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.60.0",
+  "version": "0.62.0",
   "description": "React components built by Umami",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",

package/styles.css

@@ -112,6 +112,9 @@
 
   --box-shadow: var(--box-shadow-1);
 
+  --light-color: #fff;
+  --dark-color: #000;
+
   /* Theme settings */
 
   --base-color-1: #fcfcfc;
@@ -175,7 +178,7 @@
   --active-font-color: var(--base-color-1);
 
   --inactive-color: var(--accent-color-gray);
-  --inactive-font-color: var(--base-color-12);
+  --inactive-font-color: var(--font-color);
 }
 
 html[data-theme='dark'], .dark-theme {
@@ -231,13 +234,13 @@ html[data-theme='dark'], .dark-theme {
   --success-font-color: var(--base-color-1);
 
   --danger-color: var(--accent-color-red);
-  --danger-font-color: var(--base-color-1);
+  --danger-font-color: var(--base-color-12);
 
   --warning-color: var(--accent-color-orange);
-  --warning-font-color: var(--base-color-1);
+  --warning-font-color: var(--base-color-12);
 
   --active-color: var(--accent-color-blue);
-  --active-font-color: var(--base-color-1);
+  --active-font-color: var(--base-color-12);
 
   --inactive-color: var(--accent-color-gray);
   --inactive-font-color: var(--base-color-12);
@@ -311,19 +314,6 @@ li {
   outline-color: var(--primary-color);
 }
 
-/* virtual-css:css:c1c264103e87c7a7d9c345a7e75f073b */
-.Form_form__ZjMwZ {
-  position: relative;
-  font-size: var(--font-size);
-}
-.Form_text__NDc1Y {
-  text-align: center;
-  margin: auto;
-}
-.Form_icon__ZGE1Z {
-  align-self: flex-start;
-}
-
 /* virtual-css:css:fd9059b0b8139e56f974f8291736b4c8 */
 .Icon_icon__YWI0Z {
   display: inline-block;
@@ -350,7 +340,7 @@ li {
 }
 
 /* virtual-css:css:1f23037feb6ff5b206a7d955b2a6ff41 */
-.AlertBanner_banner__NTQ1Y {
+.AlertBanner_banner__NDQ0Z {
   display: flex;
   align-items: center;
   padding: var(--padding);
@@ -363,44 +353,35 @@ li {
   color: var(--font-color);
   gap: var(--spacing-3);
 }
-.AlertBanner_message__NDNiZ {
+.AlertBanner_message__MzQ3Y {
   display: flex;
   flex-direction: column;
   flex: 1;
 }
-.AlertBanner_title__ZWUwM {
+.AlertBanner_title__MDI0M {
   font-weight: 700;
 }
-.AlertBanner_close__MzEwM {
+.AlertBanner_close__YzE5M {
   color: var(--font-color-muted);
 }
-.AlertBanner_close__MzEwM:hover {
+.AlertBanner_close__YzE5M:hover {
   color: var(--font-color);
   cursor: pointer;
 }
-.AlertBanner_error__YWZmN {
-  color: var(--danger-font-color);
-  background-color: var(--danger-color);
-  border: 0;
-}
-.AlertBanner_error__YWZmN .AlertBanner_close__MzEwM {
-  color: var(--danger-font-color);
-}
-.AlertBanner_info__ZmE3M {
-  color: var(--primary-font-color);
-  background-color: var(--primary-color);
-  border: 0;
+.AlertBanner_error__NDVmM {
+  color: var(--danger-color);
+  border: 1px solid var(--danger-color);
 }
-.AlertBanner_info__ZmE3M .AlertBanner_close__MzEwM {
-  color: var(--primary-font-color);
+.AlertBanner_error__NDVmM .AlertBanner_close__YzE5M {
+  color: var(--danger-color);
 }
-.AlertBanner_start__MTRkZ {
+.AlertBanner_start__YTlmZ {
   text-align: start;
 }
-.AlertBanner_end__MWIwO {
+.AlertBanner_end__ZmJlM {
   text-align: end;
 }
-.AlertBanner_center__OTkwZ {
+.AlertBanner_center__Y2ZmN {
   text-align: center;
 }
 
@@ -2524,18 +2505,31 @@ li {
   }
 }
 
+/* virtual-css:css:c1c264103e87c7a7d9c345a7e75f073b */
+.Form_form__ZjMwZ {
+  position: relative;
+  font-size: var(--font-size);
+}
+.Form_text__NDc1Y {
+  text-align: center;
+  margin: auto;
+}
+.Form_icon__ZGE1Z {
+  align-self: flex-start;
+}
+
 /* virtual-css:css:b910a97cb1b22b0482f1309d736856b2 */
-.FormField_field__NzY5Y {
+.FormField_field__YTM1N {
   display: flex;
   flex-direction: column;
 }
-.FormField_description__OGY3Y {
+.FormField_description__ZjFiM {
   line-height: 1.8rem;
   font-size: var(--font-size);
 }
-.FormField_error__NmEzO {
+.FormField_error__NWZhM {
   color: var(--danger-color);
-  line-height: 1.8rem;
+  line-height: 2rem;
   font-weight: 600;
 }
 
@@ -3048,12 +3042,12 @@ body a.Button_button__ZjBiN {
 }
 
 /* virtual-css:css:a3f0bcbc602e66499a3823844c11db39 */
-.Code_code__OGIyN {
+.Code_code__YTUzN {
   font-family: var(--font-family-code);
   font-size: var(--font-size-2);
   font-weight: var(--font-weight-medium);
   color: var(--font-color);
-  background: var(--highlight-color);
+  background: var(--layer-color-1);
   border-radius: var(--border-radius);
   padding: var(--spacing-1);
 }
@@ -3241,18 +3235,19 @@ body a.Button_button__ZjBiN {
 }
 
 /* virtual-css:css:ac55918cdbb6b3a9ac9deedf05ce3806 */
-.input_field__ZTk4Z {
+.input_field__Zjk2M {
+  position: relative;
   min-width: 240px;
 }
-.input_field__ZTk4Z,
-.input_row__ZGY2N {
+.input_field__Zjk2M,
+.input_row__NTFhN {
   position: relative;
 }
-.input_field__ZTk4Z[data-readonly] .input_input__ODNmN,
-.input_field__ZTk4Z[data-disabled] .input_input__ODNmN {
+.input_field__Zjk2M[data-readonly] .input_input__NTExY,
+.input_field__Zjk2M[data-disabled] .input_input__NTExY {
   background: var(--input-disabled-color);
 }
-.input_input__ODNmN {
+.input_input__NTExY {
   font-size: var(--font-size);
   color: var(--font-color);
   border: var(--border);
@@ -3263,37 +3258,38 @@ body a.Button_button__ZjBiN {
   line-height: 1.5rem;
   width: 100%;
 }
-.input_input__ODNmN:focus {
+.input_input__NTExY:focus {
   border-color: transparent;
   outline: var(--outline);
 }
-.input_input__ODNmN::placeholder {
+.input_input__NTExY::placeholder {
   color: var(--font-color-muted);
 }
-.input_input__ODNmN:disabled {
+.input_input__NTExY:disabled {
   color: var(--font-color-muted);
 }
-.input_input__ODNmN::-webkit-search-cancel-button,
-.input_input__ODNmN::-webkit-search-decoration {
+.input_input__NTExY::-webkit-search-cancel-button,
+.input_input__NTExY::-webkit-search-decoration {
   -webkit-appearance: none;
 }
-.input_icon__MTEwY {
+.input_icon__ZGI5Y {
   color: var(--font-color-muted);
   background: var(--background-color);
 }
-.input_icon__MTEwY:hover {
+.input_icon__ZGI5Y:hover {
   color: var(--font-color);
   cursor: pointer;
 }
 
 /* virtual-css:css:f85c857d13f820fa4badfb09996080b9 */
-.TextField_allowCopy__Yjc3Y {
+.TextField_allowCopy__NmUxY {
   padding-right: 32px;
 }
-.TextField_icon__OWIxY {
+.TextField_icon__OTcxO {
   position: absolute;
-  top: var(--padding-y);
-  right: var(--padding-x);
+  top: var(--spacing-4);
+  right: var(--spacing-3);
+  background: none;
 }
 
 /* virtual-css:css:603e8ab63f869366a7b9c81da6a1d757 */
@@ -3360,14 +3356,17 @@ body a.Button_button__ZjBiN {
 }
 
 /* virtual-css:css:e32e6d85b42dfdfd441346c5ed822361 */
-.DataTable_datatable__MWRkN {
+.DataTable_datatable__ZmQ3Z {
   position: relative;
   font-size: var(--font-size);
   color: var(--font-color);
 }
-.DataTable_cell__MmMyM {
+.DataTable_cell__NzZlM {
   align-items: center;
 }
+.DataTable_hidden__M2MxN {
+  display: none;
+}
 
 /* virtual-css:css:e66162403f9946d7217dc462fee28120 */
 .Dots_dots__NzQ0Z {
@@ -3488,7 +3487,7 @@ body a.Button_button__ZjBiN {
 }
 
 /* virtual-css:css:3130df15a3cfaee8cb812b182afb7ee1 */
-.Menu_menu__YWZhN {
+.Menu_menu__YmUyN {
   min-width: 200px;
   border: var(--border);
   border-radius: var(--border-radius);
@@ -3497,19 +3496,19 @@ body a.Button_button__ZjBiN {
   background: var(--background-color);
   overflow: hidden;
 }
-.Menu_separator__MzA3M {
+.Menu_separator__NDFlO {
   border-bottom: var(--border);
-  margin: var(--spacing-1) calc(-1* var(--spacing-3));
+  margin: var(--spacing-2) calc(-1 * var(--spacing-3));
 }
-.Menu_section__OGY0Z:not(:last-child) {
+.Menu_section__YjJjY:not(:last-child) {
   margin-bottom: var(--spacing-4);
 }
-.Menu_header__NjgyY {
+.Menu_header__NDVjN {
   font-size: var(--font-size-2);
   font-weight: var(--font-weight-bold);
   padding: var(--padding);
 }
-.Menu_item__NWNhZ {
+.Menu_item__YjBiN {
   display: flex;
   align-items: center;
   gap: var(--gap);
@@ -3522,23 +3521,23 @@ body a.Button_button__ZjBiN {
   outline: none;
   width: 100%;
 }
-.Menu_item__NWNhZ[data-focus],
-.Menu_item__NWNhZ[data-focus-visible] {
+.Menu_item__YjBiN[data-focus],
+.Menu_item__YjBiN[data-focus-visible] {
   outline: var(--outline);
   background: var(--highlight-color);
 }
-.Menu_item__NWNhZ:hover {
+.Menu_item__YjBiN:hover {
   background: var(--highlight-color);
 }
-.Menu_item__NWNhZ[data-selected] {
+.Menu_item__YjBiN[data-selected] {
   font-weight: bold;
 }
-.Menu_item__NWNhZ[data-selected] .Menu_check__M2IyM {
+.Menu_item__YjBiN[data-selected] .Menu_check__YmVhZ {
   display: flex;
   justify-content: flex-end;
   flex: 1;
 }
-.Menu_check__M2IyM {
+.Menu_check__YmVhZ {
   display: none;
 }
 
@@ -3820,24 +3819,29 @@ body a.Button_button__ZjBiN {
 }
 
 /* virtual-css:css:3ce2e85ef9035a94276951bdf0511402 */
-.SearchField_search__N2VmN {
+.SearchField_search__MzkwY {
   position: absolute;
-  top: 12px;
-  left: 9px;
+  top: 0;
+  left: var(--spacing-3);
+  bottom: 0;
+  height: 100%;
+  background: none;
 }
-.SearchField_input__MTQ2Y {
-  padding-left: 28px;
-  padding-right: 24px;
+.SearchField_input__OGFiY {
+  padding-left: var(--spacing-7);
+  padding-right: var(--spacing-7);
 }
-.SearchField_close__MmUwM {
+.SearchField_close__NmJkM {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: absolute;
-  top: 9px;
-  right: 0;
-  border: none;
+  top: 0;
+  right: var(--spacing-3);
+  bottom: 0;
+  height: 100%;
+  border: 0;
   background: none;
-  border-radius: var(--border-radius-full);
-  padding: 0;
-  margin: 0 var(--spacing-2);
 }
 
 /* virtual-css:css:851dd5366a20c382ffec60997ee93e35 */