Support display of multitype slots (#7457)

Example with forcibly modified types for testing
<img width="736" height="425" alt="image"
src="https://github.com/user-attachments/assets/e885a7d0-5946-41be-b9b4-b9b195f50c92"
/>

Vue mode doesn't currently seem to display optional inputs, but the SVGs
here include support for being made hollow with `--shape: url(#hollow)`
<img width="765" height="360" alt="image"
src="https://github.com/user-attachments/assets/0ea57179-99a4-4001-aa18-856e172287c0"
/>


┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7457-Support-display-of-multitype-slots-2c86d73d3650818594afd988e73827e3)
by [Unito](https://www.unito.io)

packages/design-system/src/icons/nodeSlot2.svg

@@ -0,0 +1,19 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <clipPath id="hollow">
+      <path
+    d="M -50 50
+       A 100 100, 0, 0, 1, 150 50
+       A 100 100, 0, 0, 1, -50 50
+       M 30 50
+       A 20 20, 0, 0, 0, 70 50
+       A 20 20, 0, 0, 0, 30 50"/>
+    </clipPath>
+  </defs>
+  <g clip-path="var(--shape)" stroke-width="4">
+    <path d="M 50 0 A 50 50, 0, 0, 1, 50 100" fill="var(--type1, red)"/>
+    <path d="M 50 100 A 50 50, 0, 0, 1, 50 0" fill="var(--type2, blue)"/>
+    <path d="M50 0L50 100" stroke="var(--inner-stroke, black)"/>
+    <path d="M50 2A48 48 0 0 1 50 98A48 48 0 0 1 50 2" fill="transparent" stroke="var(--outer-stroke, transparent)"/>
+  </g>
+</svg>

packages/design-system/src/icons/nodeSlot3.svg

@@ -0,0 +1,20 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <clipPath id="hollow">
+        <path
+    d="M-50 50
+       A100 100 0 0 1 150 50
+       A100 100 0 0 1 -50 50
+       M30 50
+       A20 20 0 0 0 70 50
+       A20 20 0 0 0 30 50"/>
+    </clipPath>
+  </defs>
+  <g clip-path="var(--shape)" stroke-width="4">
+    <path d="M50 0A50 50 0 0 1 93 75L50 50" fill="var(--type1, red)"/>
+    <path d="M93 75A50 50 0 0 1 7 75L50 50" fill="var(--type2, blue)"/>
+    <path d="M7 75A50 50 0 0 1 50 0L50 50" fill="var(--type3, green)"/>
+    <path d="M50 50L50 0M50 50L93 75M50 50L7 75" stroke="var(--inner-stroke, black)"/>
+    <path d="M50 2A48 48 0 0 1 50 98A48 48 0 0 1 50 2" fill="transparent" stroke="var(--outer-stroke, transparent)"/>
+  </g>
+</svg>