@eventcatalog/visualiser 3.21.0 → 3.22.0

package/dist/styles-core.css

@@ -56,6 +56,12 @@
   --color-cyan-500: oklch(71.5% 0.143 215.221);
   --color-cyan-600: oklch(60.9% 0.126 221.723);
   --color-cyan-700: oklch(52% 0.105 223.128);
+  --color-sky-100: oklch(95.1% 0.026 236.824);
+  --color-sky-300: oklch(82.8% 0.111 230.318);
+  --color-sky-400: oklch(74.6% 0.16 232.661);
+  --color-sky-500: oklch(68.5% 0.169 237.323);
+  --color-sky-600: oklch(58.8% 0.158 241.966);
+  --color-sky-700: oklch(50% 0.134 242.749);
   --color-blue-100: oklch(93.2% 0.032 255.585);
   --color-blue-200: oklch(88.2% 0.059 254.128);
   --color-blue-300: oklch(80.9% 0.105 251.813);
@@ -107,6 +113,7 @@
   --color-slate-500: oklch(55.4% 0.046 257.417);
   --color-slate-600: oklch(44.6% 0.043 257.281);
   --color-slate-700: oklch(37.2% 0.044 257.287);
+  --color-slate-950: oklch(12.9% 0.042 264.695);
   --color-gray-50: oklch(98.5% 0.002 247.839);
   --color-gray-100: oklch(96.7% 0.003 264.542);
   --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -229,6 +236,9 @@
 .eventcatalog-visualizer .bottom-4 {
   bottom: calc(var(--spacing) * 4);
 }
+.eventcatalog-visualizer .bottom-full {
+  bottom: 100%;
+}
 .eventcatalog-visualizer .\!left-\[-0px\] {
   left: -0px !important;
 }
@@ -562,6 +572,9 @@
 .eventcatalog-visualizer .w-full {
   width: 100%;
 }
+.eventcatalog-visualizer .w-max {
+  width: max-content;
+}
 .eventcatalog-visualizer .max-w-40 {
   max-width: calc(var(--spacing) * 40);
 }
@@ -571,12 +584,21 @@
 .eventcatalog-visualizer .max-w-60 {
   max-width: calc(var(--spacing) * 60);
 }
+.eventcatalog-visualizer .max-w-\[8\.5rem\] {
+  max-width: 8.5rem;
+}
+.eventcatalog-visualizer .max-w-\[9rem\] {
+  max-width: 9rem;
+}
 .eventcatalog-visualizer .max-w-\[120px\] {
   max-width: 120px;
 }
 .eventcatalog-visualizer .max-w-\[280px\] {
   max-width: 280px;
 }
+.eventcatalog-visualizer .max-w-\[320px\] {
+  max-width: 320px;
+}
 .eventcatalog-visualizer .max-w-full {
   max-width: 100%;
 }
@@ -636,6 +658,9 @@
   --tw-scale-z: 110%;
   scale: var(--tw-scale-x) var(--tw-scale-y);
 }
+.eventcatalog-visualizer .rotate-45 {
+  rotate: 45deg;
+}
 .eventcatalog-visualizer .rotate-180 {
   rotate: 180deg;
 }
@@ -845,6 +870,10 @@
   border-top-style: var(--tw-border-style);
   border-top-width: 1px;
 }
+.eventcatalog-visualizer .border-r {
+  border-right-style: var(--tw-border-style);
+  border-right-width: 1px;
+}
 .eventcatalog-visualizer .border-r-\[1px\] {
   border-right-style: var(--tw-border-style);
   border-right-width: 1px;
@@ -1103,6 +1132,24 @@
 .eventcatalog-visualizer .border-rose-500 {
   border-color: var(--color-rose-500);
 }
+.eventcatalog-visualizer .border-sky-400 {
+  border-color: var(--color-sky-400);
+}
+.eventcatalog-visualizer .border-sky-500 {
+  border-color: var(--color-sky-500);
+}
+.eventcatalog-visualizer .border-sky-500\/25 {
+  border-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 25%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    border-color: color-mix(in oklab, var(--color-sky-500) 25%, transparent);
+  }
+}
+.eventcatalog-visualizer .border-sky-500\/30 {
+  border-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 30%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    border-color: color-mix(in oklab, var(--color-sky-500) 30%, transparent);
+  }
+}
 .eventcatalog-visualizer .border-slate-400 {
   border-color: var(--color-slate-400);
 }
@@ -1397,9 +1444,27 @@
 .eventcatalog-visualizer .bg-rose-500 {
   background-color: var(--color-rose-500);
 }
+.eventcatalog-visualizer .bg-sky-400 {
+  background-color: var(--color-sky-400);
+}
+.eventcatalog-visualizer .bg-sky-500 {
+  background-color: var(--color-sky-500);
+}
+.eventcatalog-visualizer .bg-sky-500\/10 {
+  background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 10%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-sky-500) 10%, transparent);
+  }
+}
+.eventcatalog-visualizer .bg-sky-600 {
+  background-color: var(--color-sky-600);
+}
 .eventcatalog-visualizer .bg-slate-500 {
   background-color: var(--color-slate-500);
 }
+.eventcatalog-visualizer .bg-slate-950 {
+  background-color: var(--color-slate-950);
+}
 .eventcatalog-visualizer .bg-teal-500 {
   background-color: var(--color-teal-500);
 }
@@ -1550,6 +1615,14 @@
   --tw-gradient-from: var(--color-rose-500);
   --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
 }
+.eventcatalog-visualizer .from-sky-400 {
+  --tw-gradient-from: var(--color-sky-400);
+  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+}
+.eventcatalog-visualizer .from-sky-500 {
+  --tw-gradient-from: var(--color-sky-500);
+  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+}
 .eventcatalog-visualizer .from-slate-400 {
   --tw-gradient-from: var(--color-slate-400);
   --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1682,6 +1755,14 @@
   --tw-gradient-to: var(--color-rose-700);
   --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
 }
+.eventcatalog-visualizer .to-sky-600 {
+  --tw-gradient-to: var(--color-sky-600);
+  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+}
+.eventcatalog-visualizer .to-sky-700 {
+  --tw-gradient-to: var(--color-sky-700);
+  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+}
 .eventcatalog-visualizer .to-slate-600 {
   --tw-gradient-to: var(--color-slate-600);
   --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1727,6 +1808,9 @@
 .eventcatalog-visualizer .stroke-1 {
   stroke-width: 1;
 }
+.eventcatalog-visualizer .object-contain {
+  object-fit: contain;
+}
 .eventcatalog-visualizer .object-cover {
   object-fit: cover;
 }
@@ -1760,6 +1844,9 @@
 .eventcatalog-visualizer .px-2 {
   padding-inline: calc(var(--spacing) * 2);
 }
+.eventcatalog-visualizer .px-2\.5 {
+  padding-inline: calc(var(--spacing) * 2.5);
+}
 .eventcatalog-visualizer .px-3 {
   padding-inline: calc(var(--spacing) * 3);
 }
@@ -1866,6 +1953,9 @@
 .eventcatalog-visualizer .text-\[10px\] {
   font-size: 10px;
 }
+.eventcatalog-visualizer .text-\[11px\] {
+  font-size: 11px;
+}
 .eventcatalog-visualizer .text-\[12px\] {
   font-size: 12px;
 }
@@ -2269,6 +2359,18 @@
 .eventcatalog-visualizer .text-rose-100 {
   color: var(--color-rose-100);
 }
+.eventcatalog-visualizer .text-sky-100 {
+  color: var(--color-sky-100);
+}
+.eventcatalog-visualizer .text-sky-300 {
+  color: var(--color-sky-300);
+}
+.eventcatalog-visualizer .text-sky-500 {
+  color: var(--color-sky-500);
+}
+.eventcatalog-visualizer .text-sky-700 {
+  color: var(--color-sky-700);
+}
 .eventcatalog-visualizer .text-slate-100 {
   color: var(--color-slate-100);
 }
@@ -2513,6 +2615,15 @@
     --tw-ring-color: color-mix(in oklab, var(--color-rose-400) 60%, transparent);
   }
 }
+.eventcatalog-visualizer .ring-sky-400 {
+  --tw-ring-color: var(--color-sky-400);
+}
+.eventcatalog-visualizer .ring-sky-400\/60 {
+  --tw-ring-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 60%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --tw-ring-color: color-mix(in oklab, var(--color-sky-400) 60%, transparent);
+  }
+}
 .eventcatalog-visualizer .ring-slate-400\/60 {
   --tw-ring-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 60%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
@@ -2614,6 +2725,18 @@
   --tw-outline-style: none;
   outline-style: none;
 }
+.eventcatalog-visualizer .group-focus-within\:block {
+  .eventcatalog-visualizer &:is(:where(.group):focus-within *) {
+    display: block;
+  }
+}
+.eventcatalog-visualizer .group-hover\:block {
+  .eventcatalog-visualizer &:is(:where(.group):hover *) {
+    @media (hover: hover) {
+      display: block;
+    }
+  }
+}
 .eventcatalog-visualizer .group-hover\:text-\[rgb\(var\(--ec-accent\)\)\] {
   .eventcatalog-visualizer &:is(:where(.group):hover *) {
     @media (hover: hover) {
@@ -2883,6 +3006,11 @@
     color: var(--color-pink-300);
   }
 }
+.eventcatalog-visualizer .dark\:text-sky-300 {
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-sky-300);
+  }
+}
 .eventcatalog-visualizer .dark\:text-teal-300 {
   @media (prefers-color-scheme: dark) {
     color: var(--color-teal-300);
@@ -2913,6 +3041,16 @@
     width: 100%;
   }
 }
+.eventcatalog-visualizer .\[\&\>svg\]\:h-2 {
+  .eventcatalog-visualizer &>svg {
+    height: calc(var(--spacing) * 2);
+  }
+}
+.eventcatalog-visualizer .\[\&\>svg\]\:w-2 {
+  .eventcatalog-visualizer &>svg {
+    width: calc(var(--spacing) * 2);
+  }
+}
 .eventcatalog-visualizer .react-flow {
   direction: ltr;
   --xy-edge-stroke-default: #b1b1b7;
@@ -3654,6 +3792,9 @@
 .eventcatalog-visualizer .react-flow__node {
   cursor: pointer;
 }
+.eventcatalog-visualizer .react-flow__node:hover .ec-truncated-resource-name-tooltip {
+  display: block;
+}
 .eventcatalog-visualizer .ec-animating-layout .react-flow__node {
   transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }

package/dist/styles.css

@@ -56,6 +56,12 @@
   --color-cyan-500: oklch(71.5% 0.143 215.221);
   --color-cyan-600: oklch(60.9% 0.126 221.723);
   --color-cyan-700: oklch(52% 0.105 223.128);
+  --color-sky-100: oklch(95.1% 0.026 236.824);
+  --color-sky-300: oklch(82.8% 0.111 230.318);
+  --color-sky-400: oklch(74.6% 0.16 232.661);
+  --color-sky-500: oklch(68.5% 0.169 237.323);
+  --color-sky-600: oklch(58.8% 0.158 241.966);
+  --color-sky-700: oklch(50% 0.134 242.749);
   --color-blue-100: oklch(93.2% 0.032 255.585);
   --color-blue-200: oklch(88.2% 0.059 254.128);
   --color-blue-300: oklch(80.9% 0.105 251.813);
@@ -107,6 +113,7 @@
   --color-slate-500: oklch(55.4% 0.046 257.417);
   --color-slate-600: oklch(44.6% 0.043 257.281);
   --color-slate-700: oklch(37.2% 0.044 257.287);
+  --color-slate-950: oklch(12.9% 0.042 264.695);
   --color-gray-50: oklch(98.5% 0.002 247.839);
   --color-gray-100: oklch(96.7% 0.003 264.542);
   --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -229,6 +236,9 @@
 .eventcatalog-visualizer .bottom-4 {
   bottom: calc(var(--spacing) * 4);
 }
+.eventcatalog-visualizer .bottom-full {
+  bottom: 100%;
+}
 .eventcatalog-visualizer .\!left-\[-0px\] {
   left: -0px !important;
 }
@@ -562,6 +572,9 @@
 .eventcatalog-visualizer .w-full {
   width: 100%;
 }
+.eventcatalog-visualizer .w-max {
+  width: max-content;
+}
 .eventcatalog-visualizer .max-w-40 {
   max-width: calc(var(--spacing) * 40);
 }
@@ -571,12 +584,21 @@
 .eventcatalog-visualizer .max-w-60 {
   max-width: calc(var(--spacing) * 60);
 }
+.eventcatalog-visualizer .max-w-\[8\.5rem\] {
+  max-width: 8.5rem;
+}
+.eventcatalog-visualizer .max-w-\[9rem\] {
+  max-width: 9rem;
+}
 .eventcatalog-visualizer .max-w-\[120px\] {
   max-width: 120px;
 }
 .eventcatalog-visualizer .max-w-\[280px\] {
   max-width: 280px;
 }
+.eventcatalog-visualizer .max-w-\[320px\] {
+  max-width: 320px;
+}
 .eventcatalog-visualizer .max-w-full {
   max-width: 100%;
 }
@@ -636,6 +658,9 @@
   --tw-scale-z: 110%;
   scale: var(--tw-scale-x) var(--tw-scale-y);
 }
+.eventcatalog-visualizer .rotate-45 {
+  rotate: 45deg;
+}
 .eventcatalog-visualizer .rotate-180 {
   rotate: 180deg;
 }
@@ -845,6 +870,10 @@
   border-top-style: var(--tw-border-style);
   border-top-width: 1px;
 }
+.eventcatalog-visualizer .border-r {
+  border-right-style: var(--tw-border-style);
+  border-right-width: 1px;
+}
 .eventcatalog-visualizer .border-r-\[1px\] {
   border-right-style: var(--tw-border-style);
   border-right-width: 1px;
@@ -1103,6 +1132,24 @@
 .eventcatalog-visualizer .border-rose-500 {
   border-color: var(--color-rose-500);
 }
+.eventcatalog-visualizer .border-sky-400 {
+  border-color: var(--color-sky-400);
+}
+.eventcatalog-visualizer .border-sky-500 {
+  border-color: var(--color-sky-500);
+}
+.eventcatalog-visualizer .border-sky-500\/25 {
+  border-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 25%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    border-color: color-mix(in oklab, var(--color-sky-500) 25%, transparent);
+  }
+}
+.eventcatalog-visualizer .border-sky-500\/30 {
+  border-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 30%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    border-color: color-mix(in oklab, var(--color-sky-500) 30%, transparent);
+  }
+}
 .eventcatalog-visualizer .border-slate-400 {
   border-color: var(--color-slate-400);
 }
@@ -1397,9 +1444,27 @@
 .eventcatalog-visualizer .bg-rose-500 {
   background-color: var(--color-rose-500);
 }
+.eventcatalog-visualizer .bg-sky-400 {
+  background-color: var(--color-sky-400);
+}
+.eventcatalog-visualizer .bg-sky-500 {
+  background-color: var(--color-sky-500);
+}
+.eventcatalog-visualizer .bg-sky-500\/10 {
+  background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 10%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-sky-500) 10%, transparent);
+  }
+}
+.eventcatalog-visualizer .bg-sky-600 {
+  background-color: var(--color-sky-600);
+}
 .eventcatalog-visualizer .bg-slate-500 {
   background-color: var(--color-slate-500);
 }
+.eventcatalog-visualizer .bg-slate-950 {
+  background-color: var(--color-slate-950);
+}
 .eventcatalog-visualizer .bg-teal-500 {
   background-color: var(--color-teal-500);
 }
@@ -1550,6 +1615,14 @@
   --tw-gradient-from: var(--color-rose-500);
   --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
 }
+.eventcatalog-visualizer .from-sky-400 {
+  --tw-gradient-from: var(--color-sky-400);
+  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+}
+.eventcatalog-visualizer .from-sky-500 {
+  --tw-gradient-from: var(--color-sky-500);
+  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+}
 .eventcatalog-visualizer .from-slate-400 {
   --tw-gradient-from: var(--color-slate-400);
   --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1682,6 +1755,14 @@
   --tw-gradient-to: var(--color-rose-700);
   --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
 }
+.eventcatalog-visualizer .to-sky-600 {
+  --tw-gradient-to: var(--color-sky-600);
+  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+}
+.eventcatalog-visualizer .to-sky-700 {
+  --tw-gradient-to: var(--color-sky-700);
+  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+}
 .eventcatalog-visualizer .to-slate-600 {
   --tw-gradient-to: var(--color-slate-600);
   --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1727,6 +1808,9 @@
 .eventcatalog-visualizer .stroke-1 {
   stroke-width: 1;
 }
+.eventcatalog-visualizer .object-contain {
+  object-fit: contain;
+}
 .eventcatalog-visualizer .object-cover {
   object-fit: cover;
 }
@@ -1760,6 +1844,9 @@
 .eventcatalog-visualizer .px-2 {
   padding-inline: calc(var(--spacing) * 2);
 }
+.eventcatalog-visualizer .px-2\.5 {
+  padding-inline: calc(var(--spacing) * 2.5);
+}
 .eventcatalog-visualizer .px-3 {
   padding-inline: calc(var(--spacing) * 3);
 }
@@ -1866,6 +1953,9 @@
 .eventcatalog-visualizer .text-\[10px\] {
   font-size: 10px;
 }
+.eventcatalog-visualizer .text-\[11px\] {
+  font-size: 11px;
+}
 .eventcatalog-visualizer .text-\[12px\] {
   font-size: 12px;
 }
@@ -2269,6 +2359,18 @@
 .eventcatalog-visualizer .text-rose-100 {
   color: var(--color-rose-100);
 }
+.eventcatalog-visualizer .text-sky-100 {
+  color: var(--color-sky-100);
+}
+.eventcatalog-visualizer .text-sky-300 {
+  color: var(--color-sky-300);
+}
+.eventcatalog-visualizer .text-sky-500 {
+  color: var(--color-sky-500);
+}
+.eventcatalog-visualizer .text-sky-700 {
+  color: var(--color-sky-700);
+}
 .eventcatalog-visualizer .text-slate-100 {
   color: var(--color-slate-100);
 }
@@ -2513,6 +2615,15 @@
     --tw-ring-color: color-mix(in oklab, var(--color-rose-400) 60%, transparent);
   }
 }
+.eventcatalog-visualizer .ring-sky-400 {
+  --tw-ring-color: var(--color-sky-400);
+}
+.eventcatalog-visualizer .ring-sky-400\/60 {
+  --tw-ring-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 60%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --tw-ring-color: color-mix(in oklab, var(--color-sky-400) 60%, transparent);
+  }
+}
 .eventcatalog-visualizer .ring-slate-400\/60 {
   --tw-ring-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 60%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
@@ -2614,6 +2725,18 @@
   --tw-outline-style: none;
   outline-style: none;
 }
+.eventcatalog-visualizer .group-focus-within\:block {
+  .eventcatalog-visualizer &:is(:where(.group):focus-within *) {
+    display: block;
+  }
+}
+.eventcatalog-visualizer .group-hover\:block {
+  .eventcatalog-visualizer &:is(:where(.group):hover *) {
+    @media (hover: hover) {
+      display: block;
+    }
+  }
+}
 .eventcatalog-visualizer .group-hover\:text-\[rgb\(var\(--ec-accent\)\)\] {
   .eventcatalog-visualizer &:is(:where(.group):hover *) {
     @media (hover: hover) {
@@ -2883,6 +3006,11 @@
     color: var(--color-pink-300);
   }
 }
+.eventcatalog-visualizer .dark\:text-sky-300 {
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-sky-300);
+  }
+}
 .eventcatalog-visualizer .dark\:text-teal-300 {
   @media (prefers-color-scheme: dark) {
     color: var(--color-teal-300);
@@ -2913,6 +3041,16 @@
     width: 100%;
   }
 }
+.eventcatalog-visualizer .\[\&\>svg\]\:h-2 {
+  .eventcatalog-visualizer &>svg {
+    height: calc(var(--spacing) * 2);
+  }
+}
+.eventcatalog-visualizer .\[\&\>svg\]\:w-2 {
+  .eventcatalog-visualizer &>svg {
+    width: calc(var(--spacing) * 2);
+  }
+}
 .eventcatalog-visualizer .react-flow {
   direction: ltr;
   --xy-edge-stroke-default: #b1b1b7;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventcatalog/visualiser",
-  "version": "3.21.0",
+  "version": "3.22.0",
   "description": "ReactFlow nodes and visualiser components for EventCatalog - framework agnostic",
   "main": "dist/index.js",
   "module": "dist/index.mjs",