@umami/react-zen 0.63.0 → 0.64.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.63.0",
+  "version": "0.64.0",
   "description": "React components built by Umami",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",
@@ -46,14 +46,15 @@
   },
   "dependencies": {
     "@fontsource/jetbrains-mono": "^5.2.5",
-    "@react-aria/focus": "^3.19.1",
+    "@react-aria/focus": "^3.20.1",
     "@react-spring/web": "^9.7.5",
     "classnames": "^2.5.1",
     "glob": "^10.3.10",
-    "lucide-react": "^0.475.0",
-    "next": "^15.2.1",
+    "highlight.js": "^11.11.1",
+    "lucide-react": "^0.479.0",
+    "next": "^15.2.2",
     "react": "^19.0.0",
-    "react-aria-components": "^1.6.0",
+    "react-aria-components": "^1.7.1",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
     "react-icons": "^5.4.0",
@@ -72,17 +73,17 @@
     "@types/react": "^19.0.9",
     "@types/react-dom": "^19.0.3",
     "@umami/esbuild-plugin-css-modules": "0.4.0",
-    "@umami/shiso": "^0.42.0",
+    "@umami/shiso": "^0.47.0",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-syntax-hermes-parser": "^0.26.0",
     "dts-bundle": "^0.7.3",
-    "esbuild": "^0.25.0",
+    "esbuild": "^0.25.1",
     "esbuild-css-modules-plugin": "^3.1.2",
     "esbuild-plugin-svgr": "^3.1.0",
     "esbuild-postcss": "^0.0.4",
-    "eslint": "^8.57.1",
-    "eslint-config-next": "14.2.3",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint": "^9.22.0",
+    "eslint-config-next": "15.2.2",
+    "eslint-config-prettier": "^10.1.1",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.1.3",
@@ -96,10 +97,15 @@
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-esbuild": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "stylelint": "^15.10.1",
+    "stylelint": "^16.15.0",
     "stylelint-config-prettier": "^9.0.5",
-    "stylelint-config-recommended": "^14.0.1",
+    "stylelint-config-recommended": "^15.0.0",
     "typescript": "^5.7.3"
   },
-  "packageManager": "pnpm@10.5.2+sha512.da9dc28cd3ff40d0592188235ab25d3202add8a207afbedc682220e4a0029ffbff4562102b9e6e46b4e3f9e8bd53e6d05de48544b0c57d4b0179e22c76d1199b"
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild",
+      "sharp"
+    ]
+  }
 }

package/styles.css

@@ -309,26 +309,27 @@ li {
 }
 
 /* virtual-css:css:fd9059b0b8139e56f974f8291736b4c8 */
-.Icon_icon__YWI0Z {
+.Icon_icon__NzNmN {
   display: inline-block;
+  flex-shrink: 0;
 }
-.Icon_xs__ZjRhN {
+.Icon_xs__MDhiY {
   width: 12px;
   height: 12px;
 }
-.Icon_sm__OGRmY {
+.Icon_sm__ZWU0N {
   width: 16px;
   height: 16px;
 }
-.Icon_md__NTUzO {
+.Icon_md__YTY3Y {
   width: 24px;
   height: 24px;
 }
-.Icon_lg__M2ZjZ {
+.Icon_lg__ZGJlZ {
   width: 32px;
   height: 32px;
 }
-.Icon_xl__N2E1Y {
+.Icon_xl__MDU3Y {
   width: 48px;
   height: 48px;
 }
@@ -2546,7 +2547,7 @@ li {
 }
 
 /* virtual-css:css:616ae3b49446388ff62e911490fa55d8 */
-.Button_button__NmQ1Z {
+.Button_button__ZTY3M {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2565,85 +2566,85 @@ li {
   line-height: 1.5;
   --button-height: calc(1.5 * var(--font-size) + 2 * var(--padding-y)) ;
 }
-.Button_button__NmQ1Z:disabled {
+.Button_button__ZTY3M:disabled {
   color: var(--font-color-muted);
   pointer-events: none;
 }
-.Button_button__NmQ1Z:hover {
+.Button_button__ZTY3M:hover {
   background: color-mix(in srgb, var(--base-color-3), 5% var(--dark-color));
 }
-.Button_button__NmQ1Z[data-pressed] {
+.Button_button__ZTY3M[data-pressed] {
   background: color-mix(in srgb, var(--base-color-3), 10% var(--dark-color));
 }
-.Button_button__NmQ1Z.Button_primary__OTA1N {
+.Button_button__ZTY3M.Button_primary__YzkyZ {
   color: var(--primary-font-color) !important;
   background: var(--primary-color);
 }
-.Button_button__NmQ1Z.Button_primary__OTA1N:hover {
+.Button_button__ZTY3M.Button_primary__YzkyZ:hover {
   background: color-mix(in srgb, var(--primary-color), 10% var(--primary-font-color));
 }
-.Button_button__NmQ1Z.Button_primary__OTA1N[data-pressed] {
+.Button_button__ZTY3M.Button_primary__YzkyZ[data-pressed] {
   background: color-mix(in srgb, var(--primary-color), 20% var(--primary-font-color));
 }
-.Button_button__NmQ1Z.Button_primary__OTA1N:disabled {
+.Button_button__ZTY3M.Button_primary__YzkyZ:disabled {
   color: var(--primary-font-color);
   background: var(--base-color-9);
 }
-.Button_button__NmQ1Z.Button_outline__M2Y2Y {
-  background: transparent;
+.Button_button__ZTY3M.Button_outline__OGU2Z {
+  background: var(--background-color);
   border: var(--border);
   box-shadow: var(--box-shadow-1);
 }
-.Button_button__NmQ1Z.Button_outline__M2Y2Y:hover {
-  background: var(--highlight-color);
+.Button_button__ZTY3M.Button_outline__OGU2Z:hover {
+  border-color: var(--border-color-3);
 }
-.Button_button__NmQ1Z.Button_outline__M2Y2Y[data-pressed] {
-  background: color-mix(in srgb, var(--highlight-color), 5% var(--dark-color));
+.Button_button__ZTY3M.Button_outline__OGU2Z[data-pressed] {
+  background: var(--highlight-color);
 }
-.Button_button__NmQ1Z.Button_quiet__ZWIxO {
+.Button_button__ZTY3M.Button_quiet__ZTliZ {
   background: transparent;
 }
-.Button_button__NmQ1Z.Button_quiet__ZWIxO:hover {
+.Button_button__ZTY3M.Button_quiet__ZTliZ:hover {
   background: var(--highlight-color);
 }
-.Button_button__NmQ1Z.Button_quiet__ZWIxO[data-pressed] {
+.Button_button__ZTY3M.Button_quiet__ZTliZ[data-pressed] {
   background: color-mix(in srgb, var(--highlight-color), 5% var(--dark-color));
 }
-.Button_button__NmQ1Z.Button_danger__NmE2Y {
+.Button_button__ZTY3M.Button_danger__ZDc1M {
   color: var(--light-color);
   background: var(--danger-color);
 }
-.Button_button__NmQ1Z.Button_danger__NmE2Y:hover {
+.Button_button__ZTY3M.Button_danger__ZDc1M:hover {
   background: color-mix(in srgb, var(--danger-color), 6% black);
 }
-.Button_button__NmQ1Z.Button_danger__NmE2Y[data-pressed] {
+.Button_button__ZTY3M.Button_danger__ZDc1M[data-pressed] {
   background: color-mix(in srgb, var(--danger-color), 12% black);
 }
-.Button_button__NmQ1Z.Button_danger__NmE2Y:disabled {
+.Button_button__ZTY3M.Button_danger__ZDc1M:disabled {
   color: var(--primary-font-color);
   background: var(--base-color-8);
 }
-.Button_button__NmQ1Z.Button_sm__ZTRkN {
+.Button_button__ZTY3M.Button_sm__NzRiZ {
   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__NmQ1Z.Button_md__ZDE4Z {
+.Button_button__ZTY3M.Button_md__ZTZiM {
   font-size: var(--font-size);
   padding: var(--padding);
   min-height: var(--button-height);
 }
-.Button_button__NmQ1Z.Button_lg__Yjk1O {
+.Button_button__ZTY3M.Button_lg__ODE0Z {
   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__NmQ1Z.Button_xl__N2NkM {
+.Button_button__ZTY3M.Button_xl__NzE0M {
   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__NmQ1Z {
+body a.Button_button__ZTY3M {
   color: inherit;
   text-decoration: none;
 }
@@ -2911,15 +2912,17 @@ body a.Button_button__NmQ1Z {
 }
 
 /* virtual-css:css:642a816d71e0e4e5346089e7fb2bf78b */
-.Block_block__MGVlZ {
+.Block_block__MmJiM {
   display: flex;
   flex-direction: row;
   align-items: center;
   font-size: var(--font-size);
   gap: var(--gap);
   padding: var(--padding);
+  border: 1px solid transparent;
   border-radius: var(--border-radius);
   line-height: 1.5;
+  min-height: calc((1.5 * var(--font-size)) + (2 * var(--padding-y)));
 }
 
 /* virtual-css:css:24928f94983bde06afba78ec92a4df4b */
@@ -3259,19 +3262,19 @@ body a.Button_button__NmQ1Z {
 }
 
 /* virtual-css:css:ac55918cdbb6b3a9ac9deedf05ce3806 */
-.input_field__YjQxZ {
+.input_field__NGM0Z {
   position: relative;
   min-width: 240px;
 }
-.input_field__YjQxZ,
-.input_row__YjAxO {
+.input_field__NGM0Z,
+.input_row__NjY4Y {
   position: relative;
 }
-.input_field__YjQxZ[data-readonly] .input_input__NjMwN,
-.input_field__YjQxZ[data-disabled] .input_input__NjMwN {
+.input_field__NGM0Z[data-readonly] .input_input__MjUyM,
+.input_field__NGM0Z[data-disabled] .input_input__MjUyM {
   background: var(--base-color-4);
 }
-.input_input__NjMwN {
+.input_input__MjUyM {
   font-size: var(--font-size);
   color: var(--font-color);
   border: var(--border);
@@ -3282,37 +3285,36 @@ body a.Button_button__NmQ1Z {
   line-height: 1.5rem;
   width: 100%;
 }
-.input_input__NjMwN:focus {
+.input_input__MjUyM:focus {
   border-color: transparent;
   outline: var(--outline);
 }
-.input_input__NjMwN::placeholder {
+.input_input__MjUyM::placeholder {
   color: var(--font-color-muted);
 }
-.input_input__NjMwN:disabled {
+.input_input__MjUyM:disabled {
   color: var(--font-color-muted);
 }
-.input_input__NjMwN::-webkit-search-cancel-button,
-.input_input__NjMwN::-webkit-search-decoration {
+.input_input__MjUyM::-webkit-search-cancel-button,
+.input_input__MjUyM::-webkit-search-decoration {
   -webkit-appearance: none;
 }
-.input_icon__OTVkO {
+.input_icon__ZjY5O {
   color: var(--font-color-muted);
-  background: var(--background-color);
 }
-.input_icon__OTVkO:hover {
+.input_icon__ZjY5O:hover {
   color: var(--font-color);
   cursor: pointer;
 }
 
 /* virtual-css:css:f85c857d13f820fa4badfb09996080b9 */
-.TextField_allowCopy__NmUxY {
+.TextField_allowCopy__Y2RhY {
   padding-right: 32px;
 }
-.TextField_icon__OTcxO {
+.TextField_icon__MWVlN {
   position: absolute;
-  top: var(--spacing-4);
-  right: var(--spacing-3);
+  top: calc(var(--padding-y) + 4px);
+  right: var(--padding-x);
   background: none;
 }
 
@@ -3393,7 +3395,7 @@ body a.Button_button__NmQ1Z {
 }
 
 /* virtual-css:css:e66162403f9946d7217dc462fee28120 */
-.Dots_dots__NzQ0Z {
+.Dots_dots__YzQxM {
   position: relative;
   display: inline-flex;
   justify-content: center;
@@ -3401,21 +3403,21 @@ body a.Button_button__NmQ1Z {
   min-height: 50px;
   gap: 8px;
 }
-.Dots_dot__MDk2Z {
-  width: 10px;
-  height: 10px;
+.Dots_dot__ZDdiZ {
+  width: 8px;
+  height: 8px;
   border-radius: 100%;
   background: color-mix(in srgb, var(--font-color), 50% transparent);
-  animation: Dots_dots-blink__M2M4Z 1.2s infinite;
+  animation: Dots_dots-blink__NDE3Y 1.2s infinite;
   animation-fill-mode: both;
 }
-.Dots_dot__MDk2Z:nth-child(2) {
+.Dots_dot__ZDdiZ:nth-child(2) {
   animation-delay: 0.2s;
 }
-.Dots_dot__MDk2Z:nth-child(3) {
+.Dots_dot__ZDdiZ:nth-child(3) {
   animation-delay: 0.4s;
 }
-@keyframes Dots_dots-blink__M2M4Z {
+@keyframes Dots_dots-blink__NDE3Y {
   0% {
     opacity: 0.2;
   }
@@ -3427,6 +3429,14 @@ body a.Button_button__NmQ1Z {
   }
 }
 
+/* virtual-css:css:a37d08939f4c2e286eced2d454e614ea */
+.FloatingTooltip_tooltip__YTcxZ {
+  position: fixed;
+  pointer-events: none;
+  z-index: 9999;
+  transform: translate(-50%, calc(-100% - 6px));
+}
+
 /* virtual-css:css:94870e251b7b77526d8ae103079be601 */
 .Heading_heading__MGIyZ {
   color: var(--heading-color);
@@ -3900,53 +3910,62 @@ body a.Button_button__NmQ1Z {
 }
 
 /* virtual-css:css:34d15f1efb5cfdf86de5abea08f767ce */
-.Tooltip_tooltip__NDBjM {
-  font-size: var(--font-size);
-  color: var(--light-color);
-  background: rgba(0, 0, 0, 0.8);
+.Tooltip_tooltip__ODVhY {
   forced-color-adjust: none;
   outline: none;
+}
+.Tooltip_bubble__OTMzY {
+  color: var(--light-color);
+  background: rgba(0, 0, 0, 0.8);
   padding: var(--padding);
   border-radius: var(--border-radius);
-  max-width: 150px;
-  transform: translate3d(0, 0, 0);
 }
-.Tooltip_tooltip__NDBjM[data-placement=top] {
+.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__NDBjM[data-placement=bottom] {
+.Tooltip_tooltip__ODVhY[data-placement=bottom] {
   margin-top: 8px;
   --origin: translateY(-4px);
 }
-.Tooltip_tooltip__NDBjM[data-placement=bottom] .Tooltip_arrow__NzM4M svg {
+.Tooltip_tooltip__ODVhY[data-placement=bottom] .Tooltip_arrow__ZmMyY svg {
   transform: rotate(180deg);
 }
-.Tooltip_tooltip__NDBjM[data-placement=right] {
+.Tooltip_tooltip__ODVhY[data-placement=right] {
   margin-left: 8px;
   --origin: translateX(-4px);
 }
-.Tooltip_tooltip__NDBjM[data-placement=right] .Tooltip_arrow__NzM4M svg {
+.Tooltip_tooltip__ODVhY[data-placement=right] .Tooltip_arrow__ZmMyY svg {
   transform: rotate(90deg);
 }
-.Tooltip_tooltip__NDBjM[data-placement=left] {
+.Tooltip_tooltip__ODVhY[data-placement=left] {
   margin-right: 8px;
   --origin: translateX(4px);
 }
-.Tooltip_tooltip__NDBjM[data-placement=left] .Tooltip_arrow__NzM4M svg {
+.Tooltip_tooltip__ODVhY[data-placement=left] .Tooltip_arrow__ZmMyY svg {
   transform: rotate(-90deg);
 }
-.Tooltip_tooltip__NDBjM .Tooltip_arrow__NzM4M svg {
+.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__NDBjM[data-entering] {
-  animation: Tooltip_slide__NzNkY 200ms;
+.Tooltip_tooltip__ODVhY[data-entering] {
+  animation: Tooltip_slide__OWE0Z 200ms;
 }
-.Tooltip_tooltip__NDBjM[data-exiting] {
-  animation: Tooltip_slide__NzNkY 200ms reverse ease-in;
+.Tooltip_tooltip__ODVhY[data-exiting] {
+  animation: Tooltip_slide__OWE0Z 200ms reverse ease-in;
 }
-@keyframes Tooltip_slide__NzNkY {
+@keyframes Tooltip_slide__OWE0Z {
   from {
     transform: var(--origin);
     opacity: 0;
@@ -3958,52 +3977,63 @@ body a.Button_button__NmQ1Z {
 }
 
 /* virtual-css:css:12d12fae43d9120371ddbb4f1c814f07 */
-.SideNav_sidenav__NThiY {
+.SideNav_sidenav__NTNmY {
   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;
 }
-.SideNav_header__YTM2M {
+.SideNav_header__NzhjN {
   display: flex;
   align-items: center;
   gap: var(--gap);
   padding: var(--padding);
 }
-.SideNav_name__MWQ1M {
+.SideNav_name__ZWUxM {
   font-weight: var(--font-weight-bold);
 }
-.SideNav_section__MTUyY {
+.SideNav_section__MmE3N {
   padding: var(--spacing-3);
+  overflow: hidden;
 }
-.SideNav_title__MTNlY {
+.SideNav_title__N2Y0O {
   font-weight: var(--font-weight-bold);
 }
-.SideNav_content__OWM3N {
+.SideNav_content__MzA2M {
   display: grid;
+  min-height: 40px;
   gap: var(--gap);
+  overflow: hidden;
 }
-.SideNav_item__YTE4Z {
+.SideNav_item__OGU5M {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   width: 100%;
+  min-height: 40px;
   color: var(--font-color-muted);
   gap: var(--gap);
   padding: var(--padding);
   cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
 }
-.SideNav_item__YTE4Z:hover {
+.SideNav_item__OGU5M:hover {
   color: var(--font-color);
   background-color: var(--base-color-2);
 }
-.SideNav_collapsed__YWMzZ .SideNav_label__YzExN {
-  display: none;
+.SideNav_label__NjFiY {
+  transition: opacity 0.3s;
 }
-.SideNav_collapsed__YWMzZ {
-  width: 64px;
-  transition: width 0.3s ease-in-out;
+.SideNav_collapsed__NTBlM .SideNav_label__NjFiY {
+  opacity: 0;
+}
+.SideNav_collapsed__NTBlM {
+  width: 68px;
+  transition: width 0.2s ease-in-out;
 }
 
 /* virtual-css:css:02d4c53a13519acb012573b18f89110d */
@@ -4098,34 +4128,32 @@ body a.Button_button__NmQ1Z {
 }
 
 /* virtual-css:css:25b38ea4838450cf917453747a735c4a */
-.StatusLight_statuslight__MmJmM {
-  font-size: var(--font-size);
-  color: var(--font-color);
+.StatusLight_statuslight__MTliM {
   display: inline-flex;
   align-items: center;
   gap: 12px;
 }
-.StatusLight_status__YTQ4M,
-.StatusLight_bg__N2QyO {
+.StatusLight_status__MDNmO,
+.StatusLight_bg__MjVjN {
   width: 10px;
   height: 10px;
   border-radius: 100%;
   background: #fff;
   position: relative;
 }
-.StatusLight_status__YTQ4M.StatusLight_success__Njk1N {
+.StatusLight_status__MDNmO.StatusLight_success__ZWI1N {
   background: var(--success-color);
 }
-.StatusLight_status__YTQ4M.StatusLight_warning__YTEyN {
+.StatusLight_status__MDNmO.StatusLight_warning__YWRmM {
   background: var(--warning-color);
 }
-.StatusLight_status__YTQ4M.StatusLight_error__MzdjZ {
+.StatusLight_status__MDNmO.StatusLight_error__NjdjM {
   background: var(--danger-color);
 }
-.StatusLight_status__YTQ4M.StatusLight_active__YTdjM {
+.StatusLight_status__MDNmO.StatusLight_active__NGZiY {
   background: var(--active-color);
 }
-.StatusLight_status__YTQ4M.StatusLight_inactive__ODZiY {
+.StatusLight_status__MDNmO.StatusLight_inactive__NDI0Z {
   background: var(--inactive-color);
 }