@vention/machine-ui 3.27.0

package/src/lib/components/vention-icon/svg/vention.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M18.0884 9.12332C17.6438 9.12332 17.2832 8.75925 17.2832 8.31052C17.2832 7.86179 17.6438 7.49807 18.0884 7.49807C18.5329 7.49807 18.8935 7.86179 18.8935 8.31052C18.8935 8.75925 18.5329 9.12332 18.0884 9.12332ZM11.9678 16.1285C11.5233 16.1285 11.1627 15.7647 11.1627 15.316C11.1627 14.8673 11.5233 14.5036 11.9678 14.5036C12.4124 14.5036 12.773 14.8673 12.773 15.316C12.773 15.7647 12.4124 16.1285 11.9678 16.1285ZM5.92181 9.12332C5.47726 9.12332 5.11668 8.75925 5.11668 8.31052C5.11668 7.86179 5.47726 7.49807 5.92181 7.49807C6.36636 7.49807 6.72695 7.86179 6.72695 8.31052C6.72695 8.75925 6.36671 9.12332 5.92181 9.12332ZM19.3269 6.86678L19.3004 6.84518C18.9681 6.56786 18.5479 6.41527 18.1173 6.41527C17.5609 6.41527 17.039 6.66297 16.6847 7.09498L12.0006 12.8114L7.31573 7.09498C6.96142 6.66262 6.43952 6.41492 5.88349 6.41492C5.45287 6.41492 5.03271 6.56751 4.7007 6.84449L4.67387 6.86678C4.29133 7.18591 4.05512 7.63638 4.00844 8.13493C3.96175 8.63348 4.10982 9.12019 4.42651 9.50655L10.4899 16.9054C10.8439 17.3374 11.3661 17.5851 11.9222 17.5851C11.9483 17.5851 11.9741 17.5826 11.9999 17.5816C12.0263 17.5826 12.0525 17.5851 12.0793 17.5851C12.635 17.5851 13.1572 17.337 13.5115 16.905L19.5746 9.50621C20.2275 8.70978 20.1164 7.52559 19.3269 6.86643V6.86678Z" fill="currentColor"/>
+</svg>

package/src/lib/components/vention-icon/svg/versions.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7 7V17M4 8V16M10 7C10 6.46957 10.2107 5.96086 10.5858 5.58579C10.9609 5.21071 11.4696 5 12 5H18C18.5304 5 19.0391 5.21071 19.4142 5.58579C19.7893 5.96086 20 6.46957 20 7V17C20 17.5304 19.7893 18.0391 19.4142 18.4142C19.0391 18.7893 18.5304 19 18 19H12C11.4696 19 10.9609 18.7893 10.5858 18.4142C10.2107 18.0391 10 17.5304 10 17V7Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/components/vention-icon/svg/video.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15 10L19.553 7.724C19.7054 7.64783 19.8748 7.61188 20.045 7.61954C20.2152 7.62721 20.3806 7.67824 20.5256 7.7678C20.6706 7.85736 20.7902 7.98247 20.8733 8.13127C20.9563 8.28006 20.9999 8.44761 21 8.618V15.382C20.9999 15.5524 20.9563 15.7199 20.8733 15.8687C20.7902 16.0175 20.6706 16.1426 20.5256 16.2322C20.3806 16.3218 20.2152 16.3728 20.045 16.3805C19.8748 16.3881 19.7054 16.3522 19.553 16.276L15 14V10Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M3 8C3 7.46957 3.21071 6.96086 3.58579 6.58579C3.96086 6.21071 4.46957 6 5 6H13C13.5304 6 14.0391 6.21071 14.4142 6.58579C14.7893 6.96086 15 7.46957 15 8V16C15 16.5304 14.7893 17.0391 14.4142 17.4142C14.0391 17.7893 13.5304 18 13 18H5C4.46957 18 3.96086 17.7893 3.58579 17.4142C3.21071 17.0391 3 16.5304 3 16V8Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/components/vention-icon/svg/web-link.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 6H6C5.46957 6 4.96086 6.21071 4.58579 6.58579C4.21071 6.96086 4 7.46957 4 8V18C4 18.5304 4.21071 19.0391 4.58579 19.4142C4.96086 19.7893 5.46957 20 6 20H16C16.5304 20 17.0391 19.7893 17.4142 19.4142C17.7893 19.0391 18 18.5304 18 18V12M11 13L20 4M20 4H15M20 4V9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/components/vention-icon/svg/weight-2.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2 12H3M6 8H4C3.73478 8 3.48043 8.10536 3.29289 8.29289C3.10536 8.48043 3 8.73478 3 9V15C3 15.2652 3.10536 15.5196 3.29289 15.7071C3.48043 15.8946 3.73478 16 4 16H6M9 12H15M18 8H20C20.2652 8 20.5196 8.10536 20.7071 8.29289C20.8946 8.48043 21 8.73478 21 9V15C21 15.2652 20.8946 15.5196 20.7071 15.7071C20.5196 15.8946 20.2652 16 20 16H18M22 12H21M6 7V17C6 17.2652 6.10536 17.5196 6.29289 17.7071C6.48043 17.8946 6.73478 18 7 18H8C8.26522 18 8.51957 17.8946 8.70711 17.7071C8.89464 17.5196 9 17.2652 9 17V7C9 6.73478 8.89464 6.48043 8.70711 6.29289C8.51957 6.10536 8.26522 6 8 6H7C6.73478 6 6.48043 6.10536 6.29289 6.29289C6.10536 6.48043 6 6.73478 6 7ZM15 7V17C15 17.2652 15.1054 17.5196 15.2929 17.7071C15.4804 17.8946 15.7348 18 16 18H17C17.2652 18 17.5196 17.8946 17.7071 17.7071C17.8946 17.5196 18 17.2652 18 17V7C18 6.73478 17.8946 6.48043 17.7071 6.29289C17.5196 6.10536 17.2652 6 17 6H16C15.7348 6 15.4804 6.10536 15.2929 6.29289C15.1054 6.48043 15 6.73478 15 7Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/components/vention-icon/svg/weight.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9 6C9 6.79565 9.31607 7.55871 9.87868 8.12132C10.4413 8.68393 11.2044 9 12 9C12.7956 9 13.5587 8.68393 14.1213 8.12132C14.6839 7.55871 15 6.79565 15 6C15 5.20435 14.6839 4.44129 14.1213 3.87868C13.5587 3.31607 12.7956 3 12 3C11.2044 3 10.4413 3.31607 9.87868 3.87868C9.31607 4.44129 9 5.20435 9 6Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M6.8349 9H17.1649C17.3991 8.99996 17.6259 9.08213 17.8057 9.23216C17.9855 9.3822 18.107 9.59059 18.1489 9.821L19.7859 18.821C19.8121 18.9651 19.8064 19.1133 19.769 19.2549C19.7317 19.3966 19.6637 19.5283 19.5698 19.6408C19.4759 19.7532 19.3585 19.8437 19.2258 19.9058C19.0931 19.9679 18.9484 20 18.8019 20H5.1979C5.05141 20 4.9067 19.9679 4.77401 19.9058C4.64131 19.8437 4.52388 19.7532 4.43001 19.6408C4.33615 19.5283 4.26813 19.3966 4.23079 19.2549C4.19345 19.1133 4.18768 18.9651 4.2139 18.821L5.8509 9.821C5.89283 9.59059 6.01429 9.3822 6.19411 9.23216C6.37393 9.08213 6.60071 8.99996 6.8349 9Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/components/vention-icon/svg/wifi-low.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 18H12.01M9.17188 15.172C9.92199 14.4221 10.9392 14.0009 11.9999 14.0009C13.0605 14.0009 14.0778 14.4221 14.8279 15.172M6.34277 12.343C7.08565 11.6001 7.96758 11.0108 8.93821 10.6087C9.90884 10.2066 10.9492 9.99969 11.9998 9.99969C13.0504 9.99969 14.0907 10.2066 15.0613 10.6087C16.032 11.0108 16.9139 11.6001 17.6568 12.343" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/components/vention-icon/svg/wifi-lowest.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 18H12.01M9.17188 15.172C9.92199 14.4221 10.9392 14.0009 11.9999 14.0009C13.0605 14.0009 14.0778 14.4221 14.8279 15.172" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/components/vention-icon/svg/wifi-off.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 18H12.01M9.17188 15.172C9.92199 14.4221 10.9392 14.0009 11.9999 14.0009C13.0605 14.0009 14.0778 14.4221 14.8279 15.172M6.34277 12.343C7.4032 11.2796 8.74274 10.5377 10.2068 10.203M14.3698 10.358C15.6124 10.746 16.741 11.4327 17.6568 12.358M3.51514 9.515C4.53858 8.48943 5.73928 7.65767 7.05914 7.06M10.1601 6.14C12.0252 5.8508 13.9322 6.00562 15.7263 6.59187C17.5203 7.17811 19.1507 8.17927 20.4851 9.514M3 3L21 21" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/components/vention-icon/svg/wifi.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 18H12.01M9.17188 15.172C9.92199 14.4221 10.9392 14.0009 11.9999 14.0009C13.0605 14.0009 14.0778 14.4221 14.8279 15.172M6.34277 12.343C7.08565 11.6001 7.96758 11.0108 8.93821 10.6087C9.90884 10.2066 10.9492 9.99969 11.9998 9.99969C13.0504 9.99969 14.0907 10.2066 15.0613 10.6087C16.032 11.0108 16.9139 11.6001 17.6568 12.343M3.51514 9.51501C8.20114 4.82801 15.7991 4.82801 20.5151 9.51501" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/components/vention-icon/svg/world-download.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21 12C21 10.22 20.4722 8.47991 19.4832 6.99987C18.4943 5.51983 17.0887 4.36628 15.4442 3.68509C13.7996 3.0039 11.99 2.82567 10.2442 3.17294C8.49836 3.5202 6.89472 4.37737 5.63604 5.63604C4.37737 6.89472 3.5202 8.49836 3.17294 10.2442C2.82567 11.99 3.0039 13.7996 3.68509 15.4442C4.36628 17.0887 5.51983 18.4943 6.99987 19.4832C8.47991 20.4722 10.22 21 12 21M3.6001 9H20.4001M3.6001 15H12.0001M11.5778 3C9.89314 5.69961 9 8.81787 9 12C9 15.1821 9.89314 18.3004 11.5778 21M12.5 3C14.219 5.755 15 8.876 15 12M18 14V21M18 21L15 18M18 21L21 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/components/vention-icon/svg/world.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.6001 9H20.4001M3.6001 15H20.4001M11.5002 3C9.8155 5.69961 8.92236 8.81787 8.92236 12C8.92236 15.1821 9.8155 18.3004 11.5002 21M12.5 3C14.1847 5.69961 15.0778 8.81787 15.0778 12C15.0778 15.1821 14.1847 18.3004 12.5 21M3 12C3 13.1819 3.23279 14.3522 3.68508 15.4442C4.13738 16.5361 4.80031 17.5282 5.63604 18.364C6.47177 19.1997 7.46392 19.8626 8.55585 20.3149C9.64778 20.7672 10.8181 21 12 21C13.1819 21 14.3522 20.7672 15.4442 20.3149C16.5361 19.8626 17.5282 19.1997 18.364 18.364C19.1997 17.5282 19.8626 16.5361 20.3149 15.4442C20.7672 14.3522 21 13.1819 21 12C21 9.61305 20.0518 7.32387 18.364 5.63604C16.6761 3.94821 14.3869 3 12 3C9.61305 3 7.32387 3.94821 5.63604 5.63604C3.94821 7.32387 3 9.61305 3 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/components/vention-icon/svg/xyz-1.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.6665 15.3333L7.33317 20.6666M4.6665 20.6666L7.33317 15.3333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M16.6665 15.3333L17.9998 18.6666M17.9998 18.6666L19.3332 15.3333M17.9998 18.6666V20.6666" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M10.6665 3.33331H13.3332L10.6665 8.66665H13.3332" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/components/vention-icon/svg/xyz-2.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.3558 14L18.1558 16.9045H18.2104L20.0104 14H21.0058L18.8104 17.4909L21.0058 20.9818H20.0104L18.2104 18.1318H18.1558L16.3558 20.9818H15.3604L17.6104 17.4909L15.3604 14H16.3558Z" fill="currentColor"/>
+    <path d="M3.04091 20.9818V20.3682L6.80455 14.75H3V14H7.81364V14.6136L4.05 20.2318H7.85455V20.9818H3.04091Z" fill="currentColor"/>
+    <path d="M9.04541 3H10.0136L11.95 6.25909H12.0318L13.9681 3H14.9363L12.4136 7.10455V9.98182H11.5681V7.10455L9.04541 3Z" fill="currentColor"/>
+</svg>

package/src/lib/components/vention-icon/svgo.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  plugins: [
+    {
+      name: "convertColors",
+      params: {
+        currentColor: true,
+      },
+    },
+    {
+      name: "addAttributesToSVGElement",
+      params: {
+        attributes: [{ fill: "currentColor" }],
+      },
+    },
+    {
+      name: "removeDimensions",
+    },
+  ],
+}

package/src/lib/components/vention-icon/svgr-duotone.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  typescript: true,
+  filenameCase: "kebab",
+  index: false,
+  svgo: false, // Disable SVGO to prevent color stripping
+  // Disable automatic color replacement
+  replaceAttrValues: {},
+  // Use standard plugins
+  plugins: ["@svgr/plugin-jsx", "@svgr/plugin-prettier"],
+  svgProps: {
+    // Preserve original SVG attributes
+  },
+}

package/src/lib/components/vention-icon/svgr.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  typescript: true,
+  filenameCase: "kebab",
+  index: false,
+  svgo: false, // SVGO is run separately before SVGR
+  // Use standard plugins
+  plugins: ["@svgr/plugin-jsx", "@svgr/plugin-prettier"],
+  svgProps: {
+    // Preserve original SVG attributes
+  },
+}

package/src/lib/components/vention-icon/vention-icon.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { VentionIcon } from "./vention-icon"
+import React, { ComponentProps, useState } from "react"
+import { iconImports, duotoneIconImports, IconType, DuotoneIconType } from "./_generated/icon-types"
+import { VentionTextInput } from "../vention-text-input/vention-text-input"
+
+const meta: Meta<typeof VentionIcon> = {
+  component: VentionIcon,
+  title: "Components/VentionIcon",
+}
+export default meta
+type Story = StoryObj<typeof VentionIcon>
+
+export const Default: Story = {
+  args: {
+    size: 24,
+    type: "alert-circle",
+  },
+}
+
+export const GridView = ({ size = 24, color, hoverColor }: ComponentProps<typeof VentionIcon>) => {
+  const [search, setSearch] = useState("")
+
+  const regularIcons = Object.keys(iconImports) as IconType[]
+  const duotoneIcons = Object.keys(duotoneIconImports) as DuotoneIconType[]
+  const allIcons: (IconType | DuotoneIconType)[] = [...regularIcons, ...duotoneIcons]
+
+  const filteredIcons = allIcons.filter(icon => icon.toLowerCase().includes(search.toLowerCase()))
+
+  return (
+    <div style={{ padding: "16px", display: "flex", flexDirection: "column", gap: "8px" }}>
+      <VentionTextInput
+        label="Search Icons"
+        value={search}
+        onChange={event => setSearch(event.target.value)}
+        variant="outlined"
+        size="medium"
+        style={{ width: "300px" }}
+      />
+      <div style={{ display: "flex", flexWrap: "wrap", gap: "12px" }}>
+        {filteredIcons.map(filteredIcon => (
+          <div
+            key={filteredIcon}
+            style={{
+              textAlign: "center",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: "8px",
+              border: "1px solid #ccc",
+              borderRadius: "8px",
+              padding: "12px",
+            }}
+          >
+            <VentionIcon size={size} type={filteredIcon} color={color} hoverColor={hoverColor} />
+            <div style={{ fontFamily: "monospace", fontSize: "10px" }}>{filteredIcon}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/lib/components/vention-icon/vention-icon.test.tsx

@@ -0,0 +1,62 @@
+import "@testing-library/jest-dom"
+
+import { renderWithTheme } from "../../testing/utils"
+import { IconType, DuotoneIconType, VentionIcon } from "./vention-icon"
+import { iconImports, duotoneIconImports } from "./_generated/icon-types"
+
+describe("<VentionIcon />", () => {
+  it("should render", async () => {
+    const { findByTestId } = renderWithTheme(<VentionIcon type="alert-circle" />)
+
+    expect(await findByTestId("icon-alert-circle-root")).toBeInTheDocument()
+    expect(await findByTestId("icon-alert-circle")).toBeInTheDocument()
+  })
+  it("should be able to set color", async () => {
+    const { findByTestId } = renderWithTheme(<VentionIcon type="alert-circle" color="blue" />)
+
+    expect(await findByTestId("icon-alert-circle")).toBeInTheDocument()
+    expect(await findByTestId("icon-alert-circle")).toHaveStyle("color: blue")
+  })
+
+  it("should be able to use a custom dataTestId", async () => {
+    const { findByTestId } = renderWithTheme(<VentionIcon type="alert-circle" dataTestId="custom-test-id" />)
+
+    expect(await findByTestId("custom-test-id")).toBeInTheDocument()
+  })
+
+  // Dynamically test all regular icon types
+  Object.keys(iconImports).forEach((key: IconType) => {
+    it(`should render regular icon type: ${key}`, async () => {
+      const { findByTestId } = renderWithTheme(<VentionIcon type={key} />)
+
+      expect(await findByTestId(`icon-${key.toLowerCase()}`)).toBeInTheDocument()
+    })
+  })
+
+  // Dynamically test all duotone icon types
+  Object.keys(duotoneIconImports).forEach((key: DuotoneIconType) => {
+    it(`should render duotone icon type: ${key}`, async () => {
+      const { findByTestId } = renderWithTheme(<VentionIcon type={key} />)
+
+      expect(await findByTestId(`icon-${key.toLowerCase()}`)).toBeInTheDocument()
+    })
+  })
+
+  it("should render duotone icon with sizing but without color styling", async () => {
+    const { findByTestId } = renderWithTheme(<VentionIcon type="duotone-conveyor" size={32} />)
+
+    const iconElement = await findByTestId("icon-duotone-conveyor")
+    expect(iconElement).toBeInTheDocument()
+    expect(iconElement).toHaveStyle("height: 32px")
+    expect(iconElement).toHaveStyle("width: 32px")
+    expect(iconElement).not.toHaveStyle("color: rgb(0, 0, 0)")
+  })
+
+  it("should render regular icon with color styling", async () => {
+    const { findByTestId } = renderWithTheme(<VentionIcon type="alert-circle" color="red" />)
+
+    const iconElement = await findByTestId("icon-alert-circle")
+    expect(iconElement).toBeInTheDocument()
+    expect(iconElement).toHaveStyle("color: red")
+  })
+})

package/src/lib/components/vention-icon/vention-icon.tsx

@@ -0,0 +1,62 @@
+import { tss } from "tss-react/mui"
+
+import { iconImports, duotoneIconImports, IconType, DuotoneIconType } from "./_generated/icon-types"
+import { Suspense, memo } from "react"
+
+export type { IconType, DuotoneIconType }
+
+interface VentionIconProps {
+  type: IconType | DuotoneIconType
+  size?: number
+  color?: string
+  hoverColor?: string
+  dataTestId?: string
+}
+
+export const VentionIcon = memo((props: VentionIconProps) => {
+  const { classes } = useStyles({
+    size: props.size || 24,
+    color: props.color,
+    hoverColor: props.hoverColor,
+  })
+
+  const isDuotoneIcon = props.type in duotoneIconImports
+  const IconSvg = isDuotoneIcon ? duotoneIconImports[props.type as DuotoneIconType] : iconImports[props.type as IconType]
+
+  return (
+    <div className={classes.root} data-testid={props.dataTestId || `icon-${String(props.type)}-root`}>
+      <Suspense fallback={null}>
+        <IconSvg className={isDuotoneIcon ? classes.duotoneIcon : classes.icon} data-testid={`icon-${String(props.type)}`} />
+      </Suspense>
+    </div>
+  )
+})
+
+VentionIcon.displayName = "VentionIcon"
+
+const useStyles = tss
+  .withParams<Pick<VentionIconProps, "size" | "color" | "hoverColor">>()
+  .create(({ theme, size, color, hoverColor }) => ({
+    root: {
+      width: size,
+      height: size,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    icon: {
+      color: color ?? theme.palette.icon.primary,
+      transition: "color 0.1s ease-in-out",
+      height: size,
+      width: size,
+      strokeWidth: theme.custom.iconStrokeWidth,
+      "&:hover": {
+        color: hoverColor,
+      },
+    },
+    duotoneIcon: {
+      height: size,
+      width: size,
+      strokeWidth: theme.custom.iconStrokeWidth,
+    },
+  }))

package/src/lib/components/vention-link/vention-link.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { VentionLink } from "./vention-link"
+
+const meta: Meta<typeof VentionLink> = {
+  component: VentionLink,
+  title: "Components/VentionLink",
+  argTypes: {
+    onClick: { action: "link onClick executed!" },
+  },
+}
+export default meta
+type Story = StoryObj<typeof VentionLink>
+
+export const Primary: Story = {
+  args: {
+    labelText: "Link",
+    size: "medium",
+  },
+}

package/src/lib/components/vention-link/vention-link.test.tsx

@@ -0,0 +1,44 @@
+import "@testing-library/jest-dom"
+
+import { fireEvent } from "@testing-library/react"
+
+import { renderWithTheme } from "../../testing/utils"
+import { VentionLink } from "./vention-link"
+
+const handleClickMock = jest.fn()
+describe("VentionLink", () => {
+  it("should render the link with the correct text", () => {
+    const linkText = "Click me"
+    const { getByText } = renderWithTheme(<VentionLink labelText={linkText} size="medium" onClick={handleClickMock} />)
+    const linkElement = getByText(linkText)
+    expect(linkElement).toBeInTheDocument()
+  })
+
+  it("should call the onClick function when the link is clicked", () => {
+    const { getByText } = renderWithTheme(
+      <VentionLink labelText="Click me" size="large" underlined={false} external={false} onClick={handleClickMock} />
+    )
+    const linkElement = getByText("Click me")
+    fireEvent.click(linkElement)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+
+  it("should call the onClick function when the link is clicked with minimal props", () => {
+    const { getByText } = renderWithTheme(<VentionLink labelText="Click me" size="large" onClick={handleClickMock} />)
+    const linkElement = getByText("Click me")
+    fireEvent.click(linkElement)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+
+  it("should be retrievable with a default data-testid", () => {
+    const { getByTestId } = renderWithTheme(<VentionLink labelText="Click me" size="large" onClick={handleClickMock} />)
+    expect(getByTestId("ventionLink")).toBeInTheDocument()
+  })
+
+  it("should support a custom data-testid prop", () => {
+    const { getByTestId } = renderWithTheme(
+      <VentionLink labelText="Click me" size="large" onClick={handleClickMock} data-testid="testId" />
+    )
+    expect(getByTestId("testId")).toBeInTheDocument()
+  })
+})

package/src/lib/components/vention-link/vention-link.tsx

@@ -0,0 +1,88 @@
+import { Button } from "@mui/material"
+import { IconExternalLink } from "@tabler/icons-react"
+import { tss } from "tss-react/mui"
+
+import { applyDefaultProps } from "../../utilities"
+import { Sizes, StrictExtract } from "../../theme/machine-ui-theme"
+
+interface VentionLinkProps {
+  onClick: () => void
+  size?: StrictExtract<Sizes, "medium" | "large">
+  labelText?: string
+  disabled?: boolean
+  underlined?: boolean
+  external?: boolean
+  "data-testid"?: string
+}
+
+const defaultProps: Partial<VentionLinkProps> = {
+  size: "medium",
+  labelText: "Button",
+  disabled: false,
+  underlined: true,
+  external: true,
+  "data-testid": "ventionLink",
+}
+
+export const VentionLink = (inputProps: VentionLinkProps) => {
+  const linkProps = applyDefaultProps(inputProps, defaultProps)
+
+  const { classes } = useStyles({ underlined: linkProps.underlined, size: linkProps.size })
+
+  return (
+    <Button
+      className={classes.root}
+      disableRipple
+      disabled={linkProps.disabled}
+      onClick={linkProps.onClick}
+      data-testid={linkProps["data-testid"]}
+    >
+      {linkProps.labelText}
+      {linkProps.external ? (
+        <IconExternalLink stroke={1.25} size={linkProps.size === "medium" ? 14 : 16} className={classes.linkIcon} />
+      ) : null}
+    </Button>
+  )
+}
+
+const useStyles = tss.withParams<Pick<VentionLinkProps, "underlined" | "size">>().create(({ underlined, size, theme }) => {
+  const { buttonText } = theme.palette
+  const textColor = buttonText.brand
+  const textColorOnDisable = buttonText.tertiary
+  const borderBottomActive = underlined ? `1px solid ${textColor}` : "none"
+  const borderBottomHover = underlined ? `1px solid ${textColor}60` : "none"
+  const borderBottom = underlined ? `1px solid ${textColor}20` : "none"
+  const fontSize = size === "medium" ? "12px" : "14px"
+  const lineHeight = size === "medium" ? "16px" : "24px"
+
+  return {
+    root: {
+      width: "fit-content",
+      backgroundColor: "transparent",
+      color: textColor,
+      borderBottom: borderBottom,
+      borderRadius: 0,
+      padding: 0,
+      minWidth: 0,
+      fontSize: fontSize,
+      lineHeight: lineHeight,
+      fontWeight: 400,
+      "&:hover": {
+        borderBottom: borderBottomHover,
+        backgroundColor: "transparent",
+      },
+      "&:active": {
+        borderBottom: borderBottomActive,
+      },
+      "&:disabled": {
+        color: textColorOnDisable,
+        cursor: "not-allowed",
+      },
+      fontFamily: "Inter",
+      textTransform: "none",
+    },
+    linkIcon: {
+      paddingLeft: 2,
+    },
+  }
+})

package/src/lib/components/vention-menu/vention-menu-context.ts

@@ -0,0 +1,13 @@
+import { createContext } from "react"
+import { VentionMenuProps } from "./vention-menu"
+
+export type VentionMenuContextProps = Required<Pick<VentionMenuProps, "closeMenuOnClick" | "size" | "menuWidth">> & {
+  closeMenu: () => void
+}
+
+export const VentionMenuContext = createContext<VentionMenuContextProps>({
+  closeMenuOnClick: false,
+  size: "small",
+  menuWidth: "280px",
+  closeMenu: () => undefined,
+})

package/src/lib/components/vention-menu/vention-menu-item/vention-menu-child-item.tsx

@@ -0,0 +1,104 @@
+import { forwardRef, useContext, useImperativeHandle, useRef } from "react"
+import { VentionMenuContext } from "../vention-menu-context"
+import { getIconSizeGivenMenuSize, getStylingPropertiesGivenProps, getTextVariantGivenSize } from "../vention-menu-styling-helpers"
+import { ListItemIcon, ListItemText, MenuItem, Typography } from "@mui/material"
+import { VentionIcon } from "../../vention-icon/vention-icon"
+import { VentionMenuItemProps } from "./vention-menu-item"
+import { VentionMenuProps } from "../vention-menu"
+import { tss } from "tss-react/mui"
+
+interface VentionMenuChildItemProps extends Omit<VentionMenuItemProps, "subMenuItems"> {
+  hasSubMenu?: boolean
+}
+
+export const VentionMenuChildItem = forwardRef<HTMLLIElement | null, VentionMenuChildItemProps>((props, ref) => {
+  const {
+    labelText,
+    onClick,
+    disabled,
+    leftElement,
+    shortcutKey,
+    closeMenuOnClick,
+    customID,
+    focused = false,
+    hasSubMenu = false,
+    "data-testid": dataTestId = "menuOption",
+    children,
+  } = props
+  const { closeMenuOnClick: menuCloseMenuOnClick, closeMenu, size } = useContext(VentionMenuContext)
+  const { classes } = useStyles({ size, focused })
+
+  const shouldCloseMenuOnClick = closeMenuOnClick ?? menuCloseMenuOnClick
+  const variant = getTextVariantGivenSize(size)
+
+  const menuItemRef = useRef<HTMLLIElement | null>(null)
+  useImperativeHandle(ref, () => menuItemRef.current)
+
+  return (
+    <MenuItem
+      ref={menuItemRef}
+      data-testid={dataTestId}
+      className={classes.root}
+      disableRipple
+      disabled={disabled}
+      id={customID}
+      onClick={event => {
+        onClick?.(event)
+        if (shouldCloseMenuOnClick) {
+          closeMenu()
+        }
+      }}
+    >
+      {leftElement && <ListItemIcon className={classes.icon}>{leftElement}</ListItemIcon>}
+      <ListItemText>
+        <Typography className={classes.clampedText} variant={variant} noWrap justifyContent={"start"}>
+          {labelText ?? children}
+        </Typography>
+      </ListItemText>
+      <Typography variant={variant}>{shortcutKey && shortcutKey}</Typography>
+      {hasSubMenu && <VentionIcon type="chevron-right" size={getIconSizeGivenMenuSize(size)} />}
+    </MenuItem>
+  )
+})
+
+type StylingParams = Pick<VentionMenuProps, "size"> & Pick<VentionMenuItemProps, "focused">
+const useStyles = tss.withParams<StylingParams>().create(({ size, focused, theme }) => {
+  const stylingProperties = getStylingPropertiesGivenProps(size, theme)
+
+  return {
+    root: {
+      alignItems: "center",
+      backgroundColor: focused ? theme.palette.button.shaded : theme.palette.common.white,
+      color: theme.palette.buttonText.primary,
+      height: stylingProperties.itemHeight,
+      padding: stylingProperties.itemPadding,
+      margin: 0,
+      marginRight: stylingProperties.itemMargin,
+      marginLeft: stylingProperties.itemMargin,
+      textTransform: "none",
+      justifyContent: "start",
+      borderRadius: stylingProperties.borderRadius,
+      gap: stylingProperties.gap,
+      "&:disabled": {
+        color: theme.palette.buttonText.primaryDisabled,
+        cursor: "not-allowed",
+      },
+      "&:hover": {
+        backgroundColor: theme.palette.button.shaded,
+      },
+      "& .MuiListItemIcon-root": {
+        minWidth: "unset",
+      },
+    },
+    icon: {
+      height: stylingProperties.iconHeight,
+      width: stylingProperties.iconHeight,
+      color: theme.palette.icon.primary,
+      alignItems: "center",
+      marginRight: theme.spacing(1),
+    },
+    clampedText: {
+      display: "block",
+    },
+  }
+})

package/src/lib/components/vention-menu/vention-menu-item/vention-menu-divider.tsx

@@ -0,0 +1,33 @@
+import { tss } from "tss-react/mui"
+import { getPaddingForMenuDividerSize } from "../vention-menu-styling-helpers"
+import { MenuItem } from "@mui/material"
+
+export interface VentionMenuHeaderProps {
+  size: "small" | "medium" | "large"
+}
+
+export const VentionMenuDivider = ({ size }: VentionMenuHeaderProps) => {
+  const { classes } = useStyles({ size })
+
+  return (
+    <div className={classes.root}>
+      <MenuItem divider className={classes.divider} role="separator" />
+    </div>
+  )
+}
+
+type StylingParams = Pick<VentionMenuHeaderProps, "size">
+const useStyles = tss.withParams<StylingParams>().create(({ size }) => {
+  const stylingProperties = getPaddingForMenuDividerSize(size)
+
+  return {
+    root: {
+      padding: stylingProperties,
+    },
+    divider: {
+      padding: "0",
+      pointerEvents: "none",
+      cursor: "default",
+    },
+  }
+})