@umami/react-zen 0.64.0 → 0.66.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.64.0",
+  "version": "0.66.0",
   "description": "React components built by Umami",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",
@@ -20,7 +20,7 @@
     "access": "public"
   },
   "scripts": {
-    "dev": "next dev -p 9000 --turbo",
+    "dev": "next dev -p 9001 --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -73,7 +73,7 @@
     "@types/react": "^19.0.9",
     "@types/react-dom": "^19.0.3",
     "@umami/esbuild-plugin-css-modules": "0.4.0",
-    "@umami/shiso": "^0.47.0",
+    "@umami/shiso": "^0.50.0",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-syntax-hermes-parser": "^0.26.0",
     "dts-bundle": "^0.7.3",
@@ -81,7 +81,7 @@
     "esbuild-css-modules-plugin": "^3.1.2",
     "esbuild-plugin-svgr": "^3.1.0",
     "esbuild-postcss": "^0.0.4",
-    "eslint": "^9.22.0",
+    "eslint": "^8.16.0",
     "eslint-config-next": "15.2.2",
     "eslint-config-prettier": "^10.1.1",
     "eslint-import-resolver-alias": "^1.1.2",

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;
 }
@@ -3429,12 +3433,73 @@ body a.Button_button__ZTY3M {
   }
 }
 
+/* virtual-css:css:34d15f1efb5cfdf86de5abea08f767ce */
+.Tooltip_tooltip__YmY4Z {
+  forced-color-adjust: none;
+  outline: none;
+}
+.Tooltip_bubble__MWE0N {
+  color: var(--light-color);
+  background: rgba(0, 0, 0, 0.8);
+  padding: var(--padding);
+  border-radius: var(--border-radius);
+}
+.Tooltip_tooltip__YmY4Z[data-placement=top] {
+  margin-bottom: 8px;
+  --origin: translateY(4px);
+}
+.Tooltip_tooltip__YmY4Z[data-placement=bottom] {
+  margin-top: 8px;
+  --origin: translateY(-4px);
+}
+.Tooltip_tooltip__YmY4Z[data-placement=bottom] .Tooltip_arrow__OGM1M svg {
+  transform: rotate(180deg);
+}
+.Tooltip_tooltip__YmY4Z[data-placement=right] {
+  margin-left: 8px;
+  --origin: translateX(-4px);
+}
+.Tooltip_tooltip__YmY4Z[data-placement=right] .Tooltip_arrow__OGM1M svg {
+  transform: rotate(90deg);
+}
+.Tooltip_tooltip__YmY4Z[data-placement=left] {
+  margin-right: 8px;
+  --origin: translateX(4px);
+}
+.Tooltip_tooltip__YmY4Z[data-placement=left] .Tooltip_arrow__OGM1M svg {
+  transform: rotate(-90deg);
+}
+.Tooltip_tooltip__YmY4Z .Tooltip_arrow__OGM1M {
+  width: 8px;
+  height: 8px;
+}
+.Tooltip_tooltip__YmY4Z .Tooltip_arrow__OGM1M svg {
+  display: block;
+  fill: rgba(0, 0, 0, 0.8);
+}
+.Tooltip_tooltip__YmY4Z[data-entering] {
+  animation: Tooltip_slide__MGVmY 200ms;
+}
+.Tooltip_tooltip__YmY4Z[data-exiting] {
+  animation: Tooltip_slide__MGVmY 200ms reverse ease-in;
+}
+@keyframes Tooltip_slide__MGVmY {
+  from {
+    transform: var(--origin);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
 /* virtual-css:css:a37d08939f4c2e286eced2d454e614ea */
-.FloatingTooltip_tooltip__YTcxZ {
+.FloatingTooltip_floating__ZjM4N {
   position: fixed;
   pointer-events: none;
   z-index: 9999;
-  transform: translate(-50%, calc(-100% - 6px));
+  transform: translate(-50%, calc(-100% - 10px));
 }
 
 /* virtual-css:css:94870e251b7b77526d8ae103079be601 */
@@ -3879,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);
@@ -3891,150 +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;
 }
-
-/* virtual-css:css:34d15f1efb5cfdf86de5abea08f767ce */
-.Tooltip_tooltip__ODVhY {
-  forced-color-adjust: none;
+.Select_search__MWQwM {
+  border-bottom: var(--border);
   outline: none;
 }
-.Tooltip_bubble__OTMzY {
-  color: var(--light-color);
-  background: rgba(0, 0, 0, 0.8);
-  padding: var(--padding);
-  border-radius: var(--border-radius);
-}
-.Tooltip_floating__YWVjM {
-  position: fixed;
-  pointer-events: none;
-  z-index: 9999;
-  transform: translate(-50%, calc(-100% - 5px));
-}
-.Tooltip_tooltip__ODVhY[data-placement=top] {
-  margin-bottom: 8px;
-  --origin: translateY(4px);
-}
-.Tooltip_tooltip__ODVhY[data-placement=bottom] {
-  margin-top: 8px;
-  --origin: translateY(-4px);
-}
-.Tooltip_tooltip__ODVhY[data-placement=bottom] .Tooltip_arrow__ZmMyY svg {
-  transform: rotate(180deg);
-}
-.Tooltip_tooltip__ODVhY[data-placement=right] {
-  margin-left: 8px;
-  --origin: translateX(-4px);
-}
-.Tooltip_tooltip__ODVhY[data-placement=right] .Tooltip_arrow__ZmMyY svg {
-  transform: rotate(90deg);
-}
-.Tooltip_tooltip__ODVhY[data-placement=left] {
-  margin-right: 8px;
-  --origin: translateX(4px);
-}
-.Tooltip_tooltip__ODVhY[data-placement=left] .Tooltip_arrow__ZmMyY svg {
-  transform: rotate(-90deg);
-}
-.Tooltip_tooltip__ODVhY .Tooltip_arrow__ZmMyY {
-  width: 8px;
-  height: 8px;
-}
-.Tooltip_tooltip__ODVhY .Tooltip_arrow__ZmMyY svg {
-  display: block;
-  fill: rgba(0, 0, 0, 0.8);
-}
-.Tooltip_tooltip__ODVhY[data-entering] {
-  animation: Tooltip_slide__OWE0Z 200ms;
-}
-.Tooltip_tooltip__ODVhY[data-exiting] {
-  animation: Tooltip_slide__OWE0Z 200ms reverse ease-in;
+.Select_search__MWQwM input {
+  border: 0;
+  box-shadow: none;
 }
-@keyframes Tooltip_slide__OWE0Z {
-  from {
-    transform: var(--origin);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
+.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 {