@umami/react-zen 0.65.0 → 0.66.0

package/styles.css

@@ -2547,7 +2547,7 @@ li {
 }
 
 /* virtual-css:css:616ae3b49446388ff62e911490fa55d8 */
-.Button_button__ZTY3M {
+.Button_button__NDYwM {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2566,133 +2566,137 @@ li {
   line-height: 1.5;
   --button-height: calc(1.5 * var(--font-size) + 2 * var(--padding-y)) ;
 }
-.Button_button__ZTY3M:disabled {
+.Button_button__NDYwM:disabled {
   color: var(--font-color-muted);
   pointer-events: none;
 }
-.Button_button__ZTY3M:hover {
+.Button_button__NDYwM:hover {
+  color: var(--font-color);
   background: color-mix(in srgb, var(--base-color-3), 5% var(--dark-color));
 }
-.Button_button__ZTY3M[data-pressed] {
+.Button_button__NDYwM[data-pressed] {
   background: color-mix(in srgb, var(--base-color-3), 10% var(--dark-color));
 }
-.Button_button__ZTY3M.Button_primary__YzkyZ {
+.Button_button__NDYwM.Button_primary__OWE0M {
   color: var(--primary-font-color) !important;
   background: var(--primary-color);
 }
-.Button_button__ZTY3M.Button_primary__YzkyZ:hover {
+.Button_button__NDYwM.Button_primary__OWE0M:hover {
   background: color-mix(in srgb, var(--primary-color), 10% var(--primary-font-color));
 }
-.Button_button__ZTY3M.Button_primary__YzkyZ[data-pressed] {
+.Button_button__NDYwM.Button_primary__OWE0M[data-pressed] {
   background: color-mix(in srgb, var(--primary-color), 20% var(--primary-font-color));
 }
-.Button_button__ZTY3M.Button_primary__YzkyZ:disabled {
+.Button_button__NDYwM.Button_primary__OWE0M:disabled {
   color: var(--primary-font-color);
   background: var(--base-color-9);
 }
-.Button_button__ZTY3M.Button_outline__OGU2Z {
+.Button_button__NDYwM.Button_outline__NTQyN {
   background: var(--background-color);
   border: var(--border);
   box-shadow: var(--box-shadow-1);
 }
-.Button_button__ZTY3M.Button_outline__OGU2Z:hover {
+.Button_button__NDYwM.Button_outline__NTQyN:hover {
   border-color: var(--border-color-3);
 }
-.Button_button__ZTY3M.Button_outline__OGU2Z[data-pressed] {
+.Button_button__NDYwM.Button_outline__NTQyN[data-pressed] {
   background: var(--highlight-color);
 }
-.Button_button__ZTY3M.Button_quiet__ZTliZ {
+.Button_button__NDYwM.Button_quiet__NDFjM {
   background: transparent;
 }
-.Button_button__ZTY3M.Button_quiet__ZTliZ:hover {
+.Button_button__NDYwM.Button_quiet__NDFjM:hover {
   background: var(--highlight-color);
 }
-.Button_button__ZTY3M.Button_quiet__ZTliZ[data-pressed] {
+.Button_button__NDYwM.Button_quiet__NDFjM[data-pressed] {
   background: color-mix(in srgb, var(--highlight-color), 5% var(--dark-color));
 }
-.Button_button__ZTY3M.Button_danger__ZDc1M {
+.Button_button__NDYwM.Button_danger__NDUzM {
   color: var(--light-color);
   background: var(--danger-color);
 }
-.Button_button__ZTY3M.Button_danger__ZDc1M:hover {
+.Button_button__NDYwM.Button_danger__NDUzM:hover {
   background: color-mix(in srgb, var(--danger-color), 6% black);
 }
-.Button_button__ZTY3M.Button_danger__ZDc1M[data-pressed] {
+.Button_button__NDYwM.Button_danger__NDUzM[data-pressed] {
   background: color-mix(in srgb, var(--danger-color), 12% black);
 }
-.Button_button__ZTY3M.Button_danger__ZDc1M:disabled {
+.Button_button__NDYwM.Button_danger__NDUzM:disabled {
   color: var(--primary-font-color);
   background: var(--base-color-8);
 }
-.Button_button__ZTY3M.Button_sm__NzRiZ {
+.Button_button__NDYwM.Button_sm__NTVjM {
   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__ZTY3M.Button_md__ZTZiM {
+.Button_button__NDYwM.Button_md__NDE4O {
   font-size: var(--font-size);
   padding: var(--padding);
   min-height: var(--button-height);
 }
-.Button_button__ZTY3M.Button_lg__ODE0Z {
+.Button_button__NDYwM.Button_lg__NTU4O {
   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__ZTY3M.Button_xl__NzE0M {
+.Button_button__NDYwM.Button_xl__NjFkM {
   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__ZTY3M {
+body a.Button_button__NDYwM {
   color: inherit;
   text-decoration: none;
 }
 
 /* virtual-css:css:6431f1954dbf33e1f5f76d4a337f4621 */
-.Spinner_spinner__NGM1Z {
+.Spinner_spinner__MmRhN {
   position: relative;
   display: inline-flex;
   justify-content: center;
   align-items: center;
 }
-.Spinner_spinner__NGM1Z svg {
+.Spinner_spinner__MmRhN svg {
   fill: none;
   font-size: 16px;
   stroke-width: 0.15em;
   transform-origin: center center;
-  animation: Spinner_spinner-rotate__OGEwZ 1.6s linear infinite;
+  animation: Spinner_spinner-rotate__MDI2M 1.6s linear infinite;
 }
-.Spinner_track__NDk4Z {
+.Spinner_track__ODIyN {
   stroke: var(--base-color-4);
 }
-.Spinner_fill__NDViY {
+.Spinner_fill__OGY5Y {
   stroke: var(--primary-color);
   stroke-linecap: square;
   stroke-dasharray: 1, 200;
   stroke-dashoffset: 0;
-  animation: Spinner_spinner-dash__ZDNmY 1.2s ease-in-out infinite;
+  animation: Spinner_spinner-dash__ZDE2N 1.2s ease-in-out infinite;
 }
-.Spinner_size-sm__NTY4Y svg {
+.Spinner_size-sm__YWEwM svg {
   width: 16px;
   height: 16px;
 }
-.Spinner_size-md__ZDQ0Y svg {
+.Spinner_size-md__NThiM svg {
   width: 24px;
   height: 24px;
 }
-.Spinner_size-lg__YzIxZ svg {
+.Spinner_size-lg__MDEzN svg {
   width: 32px;
   height: 32px;
 }
-.Spinner_size-xl__NGQ1Z svg {
+.Spinner_size-xl__ZTNkN svg {
   width: 64px;
   height: 64px;
 }
-.Spinner_quiet__ODg0N .Spinner_track__NDk4Z {
+.Spinner_quiet__ZGJlM .Spinner_track__ODIyN {
   display: none;
 }
-@keyframes Spinner_spinner-rotate__OGEwZ {
+.Spinner_disabled__YjdjY .Spinner_fill__OGY5Y {
+  stroke: var(--base-color-12);
+}
+@keyframes Spinner_spinner-rotate__MDI2M {
   0% {
     transform: rotate(0deg);
   }
@@ -2700,7 +2704,7 @@ body a.Button_button__ZTY3M {
     transform: rotate(360deg);
   }
 }
-@keyframes Spinner_spinner-dash__ZDNmY {
+@keyframes Spinner_spinner-dash__ZDE2N {
   0% {
     stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
@@ -3081,23 +3085,23 @@ body a.Button_button__ZTY3M {
 }
 
 /* virtual-css:css:0fb02723d81c5960ed149d3d9f58f1ba */
-.List_list__ZjQ0Z {
+.List_list__MDIxN {
   min-width: 100px;
-  overflow: hidden;
   outline: none;
+  overflow: auto;
 }
-.List_separator__OGExO {
+.List_separator__YWY4N {
   border-bottom: var(--border);
 }
-.List_section__MGFiY:not(:last-child) {
+.List_section__NWU0Y:not(:last-child) {
   margin-bottom: var(--spacing-4);
 }
-.List_header__MDczN {
+.List_header__Yzg0Y {
   font-size: var(--font-size-2);
   font-weight: var(--font-weight-bold);
   padding: var(--padding);
 }
-.List_item__OGFiZ {
+.List_item__NjEyN {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3110,22 +3114,22 @@ body a.Button_button__ZTY3M {
   outline: none;
   border-radius: var(--border-radius);
 }
-.List_item__OGFiZ[data-focus],
-.List_item__OGFiZ[data-focus-visible] {
+.List_item__NjEyN[data-focus],
+.List_item__NjEyN[data-focus-visible] {
   background: var(--highlight-color);
 }
-.List_item__OGFiZ:hover {
+.List_item__NjEyN:hover {
   background: var(--highlight-color);
 }
-.List_item__OGFiZ[data-selected] {
+.List_item__NjEyN[data-selected] {
   font-weight: bold;
 }
-.List_item__OGFiZ[data-selected] .List_check__NTA3N {
+.List_item__NjEyN[data-selected] .List_check__MTNlZ {
   display: flex;
   justify-content: flex-end;
   flex: 1;
 }
-.List_check__NTA3N {
+.List_check__MTNlZ {
   display: none;
 }
 
@@ -3262,19 +3266,19 @@ body a.Button_button__ZTY3M {
 }
 
 /* virtual-css:css:ac55918cdbb6b3a9ac9deedf05ce3806 */
-.input_field__NGM0Z {
+.input_field__ZGEyY {
   position: relative;
   min-width: 240px;
 }
-.input_field__NGM0Z,
-.input_row__NjY4Y {
+.input_field__ZGEyY,
+.input_row__YTllZ {
   position: relative;
 }
-.input_field__NGM0Z[data-readonly] .input_input__MjUyM,
-.input_field__NGM0Z[data-disabled] .input_input__MjUyM {
-  background: var(--base-color-4);
+.input_field__ZGEyY[data-readonly] .input_input__ZTAzN,
+.input_field__ZGEyY[data-disabled] .input_input__ZTAzN {
+  background: var(--base-color-2);
 }
-.input_input__MjUyM {
+.input_input__ZTAzN {
   font-size: var(--font-size);
   color: var(--font-color);
   border: var(--border);
@@ -3285,24 +3289,24 @@ body a.Button_button__ZTY3M {
   line-height: 1.5rem;
   width: 100%;
 }
-.input_input__MjUyM:focus {
+.input_input__ZTAzN:focus {
   border-color: transparent;
   outline: var(--outline);
 }
-.input_input__MjUyM::placeholder {
+.input_input__ZTAzN::placeholder {
   color: var(--font-color-muted);
 }
-.input_input__MjUyM:disabled {
+.input_input__ZTAzN:disabled {
   color: var(--font-color-muted);
 }
-.input_input__MjUyM::-webkit-search-cancel-button,
-.input_input__MjUyM::-webkit-search-decoration {
+.input_input__ZTAzN::-webkit-search-cancel-button,
+.input_input__ZTAzN::-webkit-search-decoration {
   -webkit-appearance: none;
 }
-.input_icon__ZjY5O {
+.input_icon__YjcxZ {
   color: var(--font-color-muted);
 }
-.input_icon__ZjY5O:hover {
+.input_icon__YjcxZ:hover {
   color: var(--font-color);
   cursor: pointer;
 }
@@ -3940,7 +3944,7 @@ body a.Button_button__ZTY3M {
 }
 
 /* virtual-css:css:851dd5366a20c382ffec60997ee93e35 */
-.Select_button__YTc2N {
+.Select_button__ZGY1Y {
   display: flex;
   align-items: center;
   font-size: var(--font-size);
@@ -3952,83 +3956,139 @@ body a.Button_button__ZTY3M {
   background: var(--background-color);
   cursor: pointer;
 }
-.Select_list__ZjZhM {
+.Select_popover__MTQ1Y {
   min-width: 200px;
   border: var(--border);
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow-3);
   background: var(--background-color);
+  overflow: hidden;
 }
-.Select_list__ZjZhM > * {
+.Select_list__MDYyZ > * {
   border-radius: 0;
 }
-.Select_icon__NzU3O {
+.Select_icon__N2M0O {
   color: var(--font-color-disabled);
 }
-.Select_icon__NzU3O:hover {
+.Select_icon__N2M0O:hover {
   color: var(--font-color);
   cursor: pointer;
 }
+.Select_search__MWQwM {
+  border-bottom: var(--border);
+  outline: none;
+}
+.Select_search__MWQwM input {
+  border: 0;
+  box-shadow: none;
+}
+.Select_search__MWQwM input[data-focused] {
+  outline: none;
+}
 
 /* virtual-css:css:12d12fae43d9120371ddbb4f1c814f07 */
-.SideNav_sidenav__NTNmY {
+.SideNav_sidenav__M2NlY {
   height: 100%;
   font-size: var(--font-size);
-  background-color: var(--base-color-1);
   border-right: 1px solid var(--border-color);
   width: 200px;
-  transition: width 0.1s ease-out;
   overflow: hidden;
+  transition: width 0.1s ease-out;
 }
-.SideNav_header__NzhjN {
+.SideNav_header__NGU1Y {
   display: flex;
   align-items: center;
   gap: var(--gap);
   padding: var(--padding);
 }
-.SideNav_name__ZWUxM {
+.SideNav_name__OTM0N {
   font-weight: var(--font-weight-bold);
 }
-.SideNav_section__MmE3N {
+.SideNav_section__MTUxM {
   padding: var(--spacing-3);
   overflow: hidden;
 }
-.SideNav_title__N2Y0O {
+.SideNav_title__YTg5O {
   font-weight: var(--font-weight-bold);
 }
-.SideNav_content__MzA2M {
+.SideNav_content__MjczM {
   display: grid;
   min-height: 40px;
   gap: var(--gap);
   overflow: hidden;
 }
-.SideNav_item__OGU5M {
+.SideNav_item__ZTlkN {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   width: 100%;
   min-height: 40px;
-  color: var(--font-color-muted);
+  color: var(--font-color);
   gap: var(--gap);
   padding: var(--padding);
+  border: 1px solid transparent;
   cursor: pointer;
   white-space: nowrap;
   overflow: hidden;
 }
-.SideNav_item__OGU5M:hover {
+.SideNav_item__ZTlkN:hover {
   color: var(--font-color);
-  background-color: var(--base-color-2);
 }
-.SideNav_label__NjFiY {
-  transition: opacity 0.3s;
+.SideNav_label__NDU1N {
+  opacity: 1;
+  width: 100%;
+  transition: all 0.3s;
 }
-.SideNav_collapsed__NTBlM .SideNav_label__NjFiY {
+.SideNav_collapsed__YzExM .SideNav_label__NDU1N {
   opacity: 0;
+  width: 0;
+  transition: all 0.3s;
 }
-.SideNav_collapsed__NTBlM {
+.SideNav_collapsed__YzExM {
   width: 68px;
   transition: width 0.2s ease-in-out;
 }
+.SideNav_muted__MmRlM .SideNav_item__ZTlkN {
+  color: var(--font-color-muted);
+}
+.SideNav_muted__MmRlM .SideNav_item__ZTlkN:hover {
+  color: var(--font-color);
+}
+.SideNav_muted__MmRlM .SideNav_item__ZTlkN.SideNav_selected__ZjY4N {
+  color: var(--font-color);
+}
+.SideNav_variant-quiet__OTZlN {
+  background: transparent;
+  & .SideNav_item__ZTlkN:hover,
+  .SideNav_selected__ZjY4N {
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+  }
+}
+.SideNav_variant-1__NjVmN {
+  background: var(--base-color-1);
+  & .SideNav_item__ZTlkN:hover,
+  .SideNav_selected__ZjY4N {
+    background: var(--base-color-2);
+  }
+}
+.SideNav_variant-2__NWZjM {
+  background: var(--base-color-2);
+  & .SideNav_item__ZTlkN:hover,
+  .SideNav_selected__ZjY4N {
+    background: var(--base-color-3);
+  }
+}
+.SideNav_variant-3__ZDE4O {
+  background: var(--base-color-3);
+  & .SideNav_item__ZTlkN:hover,
+  .SideNav_selected__ZjY4N {
+    background: var(--base-color-4);
+  }
+}
+.SideNav_sidenav__M2NlY.SideNav_noborder__YTJjO {
+  border: 0;
+}
 
 /* virtual-css:css:02d4c53a13519acb012573b18f89110d */
 .Slider_slider__MjBhO {