@vention/machine-ui 3.27.0

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

@@ -0,0 +1,136 @@
+import { VentionDropZone, type DropZoneProps } from "./vention-dropzone"
+import { renderWithTheme } from "../../../lib/testing/utils"
+import { fireEvent } from "@testing-library/react"
+import { DropZoneSize, DropZoneState, DropZoneStyle, getDropZoneBorder, getDropZoneStatus } from "./vention-dropzone-utils"
+
+// Mock DragEvent since it's not available in the test environment
+class MockDragEvent extends Event {
+  relatedTarget: HTMLElement | null
+
+  constructor(type: string, options: Partial<{ bubbles: boolean; relatedTarget: HTMLElement }>) {
+    super(type, { bubbles: options.bubbles || false })
+    this.relatedTarget = options.relatedTarget || null
+  }
+}
+
+const files = [
+  new File(["content"], "example.dxf", { type: "application/dxf" }),
+  new File(["content"], "example.dxf", { type: "application/dxf" }),
+]
+const dataTransfer = { files }
+
+function createTestCases(
+  props: { size: DropZoneSize; style: DropZoneStyle; state: DropZoneState; disabled?: boolean; dragLeaveTargetID?: string }[]
+): (DropZoneProps & { state: DropZoneState; expectedStyle: string; dragLeaveTargetID?: string })[] {
+  return props.map(({ size, state, disabled, style, dragLeaveTargetID }) => {
+    const hasError = state === DropZoneState.Error
+    const border = getDropZoneBorder(getDropZoneStatus(state, hasError), disabled, style)
+
+    return {
+      style,
+      size,
+      onFilesSelect: hasError ? () => ["file size exceeded"] : () => [],
+      fileCriteriaDescription: "DXF, DWG max 50 MB",
+      disabled,
+      state,
+      expectedStyle: `border: ${border}`,
+      dragLeaveTargetID,
+    }
+  })
+}
+
+function testInDocument(element: HTMLElement | null, expected: boolean): void {
+  if (expected) {
+    expect(element).toBeInTheDocument()
+  } else {
+    expect(element).not.toBeInTheDocument()
+  }
+}
+
+describe("VentionDropZone", () => {
+  test.each(
+    createTestCases([
+      { style: "outline", size: "large", state: DropZoneState.Default },
+      { style: "filled", size: "small", state: DropZoneState.DraggedOver },
+      { style: "outline", size: "small", state: DropZoneState.Hover },
+      { style: "filled", size: "small", state: DropZoneState.MouseUp },
+      { style: "outline", size: "small", state: DropZoneState.MouseLeave },
+      { style: "filled", size: "large", disabled: true, state: DropZoneState.MouseUp },
+      { style: "outline", size: "large", disabled: true, state: DropZoneState.DragLeave },
+      { style: "filled", size: "small", state: DropZoneState.Drop },
+      { style: "outline", size: "small", state: DropZoneState.Error },
+      { style: "filled", size: "large", disabled: true, state: DropZoneState.Pressed },
+      { style: "filled", size: "large", disabled: true, state: DropZoneState.Error },
+      { style: "outline", size: "large", disabled: true, state: DropZoneState.Hover },
+      { style: "outline", size: "large", disabled: true, state: DropZoneState.DraggedOver },
+      { style: "filled", size: "small", state: DropZoneState.DragLeave },
+      { style: "outline", size: "small", state: DropZoneState.DragLeave, dragLeaveTargetID: "dropzoneContents" },
+      { style: "filled", size: "small", state: DropZoneState.FileChange },
+      { style: "outline", size: "small", disabled: true, state: DropZoneState.FileChange },
+      { style: "filled", size: "small", disabled: true, state: DropZoneState.Drop },
+    ])
+  )("renders correctly with props: %o", props => {
+    const { queryByTestId } = renderWithTheme(<VentionDropZone {...props} />)
+
+    const dropZoneContainer = queryByTestId("dropzoneContainer")
+    testInDocument(dropZoneContainer, true)
+
+    const dropZoneContents = queryByTestId("dropzoneContents")
+    testInDocument(dropZoneContents, true)
+
+    const dropZoneIcon = queryByTestId("dropzoneUploadIcon")
+    testInDocument(dropZoneIcon, true)
+
+    const dropZoneTitle = queryByTestId("dropzoneTitle")
+    testInDocument(dropZoneTitle, true)
+
+    const dropZoneInput = queryByTestId("dropzoneFileInput")
+    testInDocument(dropZoneInput, true)
+
+    switch (props.state) {
+      case DropZoneState.DraggedOver:
+        fireEvent.dragOver(dropZoneContainer)
+        break
+      case DropZoneState.Hover:
+        fireEvent.mouseOver(dropZoneContainer)
+        break
+      case DropZoneState.Pressed:
+        fireEvent.mouseDown(dropZoneContainer)
+        break
+      case DropZoneState.MouseUp:
+        fireEvent.mouseDown(dropZoneContainer)
+        fireEvent.mouseUp(dropZoneContainer)
+        break
+      case DropZoneState.MouseLeave:
+        fireEvent.mouseEnter(dropZoneContainer)
+        fireEvent.mouseLeave(dropZoneContainer)
+        break
+      case DropZoneState.FileChange:
+        fireEvent.click(dropZoneContainer)
+        fireEvent.change(dropZoneInput, { target: { files } })
+        break
+      case DropZoneState.DragLeave:
+        fireEvent.dragEnter(dropZoneContainer)
+        dropZoneContainer.dispatchEvent(
+          new MockDragEvent("dragleave", {
+            bubbles: true,
+            relatedTarget: props.dragLeaveTargetID ? queryByTestId(props.dragLeaveTargetID) : null,
+          })
+        )
+        break
+      case DropZoneState.Error:
+        fireEvent.drop(dropZoneContainer, { dataTransfer })
+        // simulate leaving the drop zone after error to see if it resets properly
+        fireEvent.mouseLeave(dropZoneContainer)
+        break
+      case DropZoneState.Drop:
+        fireEvent.drop(dropZoneContainer, { dataTransfer: { files: files } })
+    }
+
+    expect(dropZoneContainer).toHaveStyle(props.expectedStyle)
+
+    const criteriaDescription = queryByTestId("dropzoneCriteria")
+    const isCriteriaVisible = props.disabled || props.state !== DropZoneState.DraggedOver
+    testInDocument(criteriaDescription, isCriteriaVisible)
+  })
+})

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

@@ -0,0 +1,234 @@
+import { Box, Grid } from "@mui/material"
+import { VentionIcon } from "../vention-icon/vention-icon"
+import { useReducer, useRef } from "react"
+import { tss } from "tss-react"
+import { COLORS } from "../../theme/colors"
+import {
+  DropZoneSize,
+  DropZoneState,
+  DropZoneStyle,
+  getDropZoneBackgroundColor,
+  getDropZoneBorder,
+  getDropZoneStatus,
+  getDropZoneStyle,
+} from "./vention-dropzone-utils"
+
+export type DropZoneProps = {
+  style: DropZoneStyle
+  size: DropZoneSize
+  /**
+   * callback methods to receive files uploaded by user. Should return an array of error messages
+   * if any files are invalid. If all files are valid, return an empty array.
+   */
+  onFilesSelect: (file: FileList) => string[]
+  /**
+   * Describes file criteria such as extensions, size limits, etc
+   * ex: "DXF, DWG max 50 MB"
+   */
+  fileCriteriaDescription: string
+  defaultTitle?: string
+  disabled?: boolean
+}
+
+type DropZoneReducerState = {
+  dropZoneStatus: DropZoneState
+  title: string
+  errorMessages: string[]
+}
+
+const UPLOAD_TITLE = "Drop to start uploading"
+
+/**
+ * Vention's custom dropzone component. Supports drag and drop as well as
+ * click to upload. Supports different sizes and styles along with a disabled state.
+ * Use onFilesSelect callback to handle file selection and validation.
+ * Visualizes basic error state along with error messages returned by onFilesSelect.
+ */
+export function VentionDropZone({
+  style,
+  size,
+  onFilesSelect,
+  fileCriteriaDescription,
+  defaultTitle = "Drop files here or click to upload",
+  disabled = false,
+}: DropZoneProps): JSX.Element {
+  const [state, dispatch] = useReducer(dropZoneReducer, {
+    dropZoneStatus: DropZoneState.Default,
+    title: defaultTitle,
+    errorMessages: [],
+  })
+  const fileInputRef = useRef<HTMLInputElement>()
+  const { classes } = useStyle({ state: state.dropZoneStatus, style, size, disabled })
+
+  const handleHover = (): void => {
+    if (disabled) return
+    dispatch({ type: DropZoneState.Hover, title: defaultTitle })
+  }
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>): void => {
+    event.preventDefault()
+    if (disabled) return
+    dispatch({ type: DropZoneState.DraggedOver, title: UPLOAD_TITLE })
+  }
+
+  const handleDragLeave = (event: React.DragEvent<HTMLDivElement>): void => {
+    event.preventDefault()
+    if (disabled) return
+    // Ignore drag leave events that are triggered when hovering over children
+    const relatedTarget = event.relatedTarget
+    if (relatedTarget !== null && event.currentTarget.contains(relatedTarget as unknown as HTMLElement)) {
+      return
+    }
+
+    dispatch({ type: DropZoneState.Default, title: defaultTitle })
+  }
+
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>): void => {
+    event.preventDefault()
+    const files = event.dataTransfer.files
+    const errors = onFilesSelect(files)
+    dispatch({ type: DropZoneState.Default, errors, title: defaultTitle })
+  }
+
+  const handleFileInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    if (disabled) return
+    const errors = onFilesSelect(event.target.files)
+    dispatch({ type: DropZoneState.Default, errors, title: defaultTitle })
+  }
+
+  const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>): void => {
+    event.preventDefault()
+    if (disabled) return
+    dispatch({ type: DropZoneState.Pressed, title: defaultTitle })
+  }
+
+  const handleMouseUp = (): void => {
+    if (disabled) return
+
+    dispatch({ type: DropZoneState.Hover, title: defaultTitle })
+    fileInputRef.current.click()
+  }
+
+  return (
+    <Box
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+      onMouseEnter={handleHover}
+      onMouseLeave={() => {
+        dispatch({ type: DropZoneState.Default, title: defaultTitle })
+      }}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      className={classes.dropZoneContainer}
+      data-testid="dropzoneContainer"
+    >
+      <Grid data-testid="dropzoneContents" container className={classes.dropZoneContents}>
+        <Grid item className={classes.dropZoneUploadIcon}>
+          <VentionIcon dataTestId="dropzoneUploadIcon" type="circle-arrow-up" size={getDropZoneStyle(size, "iconSize")} />
+        </Grid>
+        <Grid item className={classes.dropZoneTexts}>
+          <div data-testid="dropzoneTitle" className={classes.dropTitle}>
+            {state.title}
+          </div>
+          {state.dropZoneStatus !== DropZoneState.DraggedOver && (
+            <>
+              <div data-testid="dropzoneCriteria" className={classes.criteriaDescription}>
+                {fileCriteriaDescription}
+              </div>
+              <div data-testid="dropzoneErrors">
+                {state.errorMessages.map(error => {
+                  return (
+                    <div key={error} className={classes.errorMessage}>
+                      ⚠ {error}
+                    </div>
+                  )
+                })}
+              </div>
+            </>
+          )}
+        </Grid>
+        <input
+          onChange={handleFileInputChange}
+          data-testid="dropzoneFileInput"
+          disabled={disabled}
+          aria-label="File upload"
+          type="file"
+          ref={fileInputRef}
+          className={classes.input}
+          multiple
+        />
+      </Grid>
+    </Box>
+  )
+}
+
+function dropZoneReducer(
+  reducerState: DropZoneReducerState,
+  { type, errors, title }: { type: DropZoneState; errors?: string[]; title: string }
+): DropZoneReducerState {
+  const errorMessages = errors || reducerState.errorMessages
+
+  return {
+    ...reducerState,
+    errorMessages,
+    title,
+    dropZoneStatus: getDropZoneStatus(type, errorMessages.length > 0),
+  }
+}
+
+const useStyle = tss
+  .withParams<{ state: DropZoneState; style: DropZoneStyle; size: DropZoneSize; disabled: boolean }>()
+  .create(({ state, style, size, disabled }) => {
+    const flexDirection = getDropZoneStyle(size, "flexDirection")
+    const alignItems = getDropZoneStyle(size, "alignItems")
+
+    return {
+      dropZoneContainer: {
+        minHeight: getDropZoneStyle(size, "minHeight"),
+        display: "grid",
+        flexDirection,
+        gap: getDropZoneStyle(size, "containerGap"),
+        alignItems,
+        padding: getDropZoneStyle(size, "padding"),
+        borderRadius: getDropZoneStyle(size, "borderRadius"),
+        border: getDropZoneBorder(state, disabled, style),
+        backgroundColor: getDropZoneBackgroundColor(style),
+      },
+      dropZoneUploadIcon: {
+        opacity: disabled ? 0.5 : 1,
+      },
+      dropZoneContents: {
+        display: "flex",
+        flexDirection,
+        gap: "6px",
+        alignItems,
+      },
+      dropZoneTexts: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems,
+      },
+      dropTitle: {
+        fontSize: getDropZoneStyle(size, "titleFontSize"),
+        fontWeight: 500,
+        color: COLORS.slate[900],
+        opacity: disabled ? 0.4 : 1,
+      },
+      criteriaDescription: {
+        fontSize: "12px",
+        fontWeight: 400,
+        color: COLORS.slate[700],
+        opacity: disabled ? 0.5 : 1,
+      },
+      errorMessage: {
+        fontSize: "12px",
+        color: COLORS.red[600],
+      },
+      input: {
+        visibility: "hidden",
+        height: 0,
+        width: 0,
+      },
+    }
+  })

package/src/lib/components/vention-icon/_generated/duotone-icons/duotone-analytics.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+import type { SVGProps } from "react"
+const SvgDuotoneAnalytics = (props: SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M4 18V6C4 5.46957 4.21071 4.96086 4.58579 4.58579C4.96086 4.21071 5.46957 4 6 4H18C18.5304 4 19.0391 4.21071 19.4142 4.58579C19.7893 4.96086 20 5.46957 20 6V18C20 18.5304 19.7893 19.0391 19.4142 19.4142C19.0391 19.7893 18.5304 20 18 20H6C5.46957 20 4.96086 19.7893 4.58579 19.4142C4.21071 19.0391 4 18.5304 4 18Z"
+      fill="#A5F3FC"
+    />
+    <path d="M7 14L10 11L12 13L15 10L17 12" fill="#A5F3FC" />
+    <path
+      d="M7 14L10 11L12 13L15 10L17 12M4 18V6C4 5.46957 4.21071 4.96086 4.58579 4.58579C4.96086 4.21071 5.46957 4 6 4H18C18.5304 4 19.0391 4.21071 19.4142 4.58579C19.7893 4.96086 20 5.46957 20 6V18C20 18.5304 19.7893 19.0391 19.4142 19.4142C19.0391 19.7893 18.5304 20 18 20H6C5.46957 20 4.96086 19.7893 4.58579 19.4142C4.21071 19.0391 4 18.5304 4 18Z"
+      stroke="#0891B2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+export default SvgDuotoneAnalytics

package/src/lib/components/vention-icon/_generated/duotone-icons/duotone-communication.tsx

@@ -0,0 +1,35 @@
+import * as React from "react"
+import type { SVGProps } from "react"
+const SvgDuotoneCommunication = (props: SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <circle cx={18.5998} cy={5.39998} r={1.8} fill="#A5F3FC" />
+    <circle cx={18.5998} cy={18.6} r={1.8} fill="#A5F3FC" />
+    <circle cx={5.4001} cy={5.39998} r={1.8} fill="#A5F3FC" />
+    <circle cx={8.4002} cy={15.48} r={4.2} fill="#A5F3FC" />
+    <path d="M5.93103 6.93594L7.20603 11.1849L5.93103 6.93594ZM12.813 16.7939L17.064 18.0689L12.813 16.7939Z" fill="#A5F3FC" />
+    <path d="M11.683 12.3169L17.442 6.55794L11.683 12.3169Z" fill="#A5F3FC" />
+    <path
+      d="M4 5.49994C4 5.69692 4.0388 5.89198 4.11418 6.07396C4.18956 6.25595 4.30005 6.42131 4.43934 6.5606C4.57863 6.69989 4.74399 6.81038 4.92597 6.88576C5.10796 6.96114 5.30302 6.99994 5.5 6.99994C5.69698 6.99994 5.89204 6.96114 6.07403 6.88576C6.25601 6.81038 6.42137 6.69989 6.56066 6.5606C6.69995 6.42131 6.81044 6.25595 6.88582 6.07396C6.9612 5.89198 7 5.69692 7 5.49994C7 5.30296 6.9612 5.1079 6.88582 4.92591C6.81044 4.74393 6.69995 4.57857 6.56066 4.43928C6.42137 4.29999 6.25601 4.1895 6.07403 4.11412C5.89204 4.03874 5.69698 3.99994 5.5 3.99994C5.30302 3.99994 5.10796 4.03874 4.92597 4.11412C4.74399 4.1895 4.57863 4.29999 4.43934 4.43928C4.30005 4.57857 4.18956 4.74393 4.11418 4.92591C4.0388 5.1079 4 5.30296 4 5.49994Z"
+      fill="#A5F3FC"
+    />
+    <path
+      d="M17 5.49994C17 5.89776 17.158 6.27929 17.4393 6.5606C17.7206 6.8419 18.1022 6.99994 18.5 6.99994C18.8978 6.99994 19.2794 6.8419 19.5607 6.5606C19.842 6.27929 20 5.89776 20 5.49994C20 5.10211 19.842 4.72058 19.5607 4.43928C19.2794 4.15797 18.8978 3.99994 18.5 3.99994C18.1022 3.99994 17.7206 4.15797 17.4393 4.43928C17.158 4.72058 17 5.10211 17 5.49994Z"
+      fill="#A5F3FC"
+    />
+    <path
+      d="M17 18.4999C17 18.8978 17.158 19.2793 17.4393 19.5606C17.7206 19.8419 18.1022 19.9999 18.5 19.9999C18.8978 19.9999 19.2794 19.8419 19.5607 19.5606C19.842 19.2793 20 18.8978 20 18.4999C20 18.1021 19.842 17.7206 19.5607 17.4393C19.2794 17.158 18.8978 16.9999 18.5 16.9999C18.1022 16.9999 17.7206 17.158 17.4393 17.4393C17.158 17.7206 17 18.1021 17 18.4999Z"
+      fill="#A5F3FC"
+    />
+    <path
+      d="M4 15.4999C4 16.6934 4.47411 17.838 5.31802 18.6819C6.16193 19.5258 7.30653 19.9999 8.5 19.9999C9.69347 19.9999 10.8381 19.5258 11.682 18.6819C12.5259 17.838 13 16.6934 13 15.4999C13 14.3065 12.5259 13.1619 11.682 12.318C10.8381 11.474 9.69347 10.9999 8.5 10.9999C7.30653 10.9999 6.16193 11.474 5.31802 12.318C4.47411 13.1619 4 14.3065 4 15.4999Z"
+      fill="#A5F3FC"
+    />
+    <path
+      d="M5.93103 6.93594L7.20603 11.1849M12.813 16.7939L17.064 18.0689M11.683 12.3169L17.442 6.55794M4 5.49994C4 5.69692 4.0388 5.89198 4.11418 6.07396C4.18956 6.25595 4.30005 6.42131 4.43934 6.5606C4.57863 6.69989 4.74399 6.81038 4.92597 6.88576C5.10796 6.96114 5.30302 6.99994 5.5 6.99994C5.69698 6.99994 5.89204 6.96114 6.07403 6.88576C6.25601 6.81038 6.42137 6.69989 6.56066 6.5606C6.69995 6.42131 6.81044 6.25595 6.88582 6.07396C6.9612 5.89198 7 5.69692 7 5.49994C7 5.30296 6.9612 5.1079 6.88582 4.92591C6.81044 4.74393 6.69995 4.57857 6.56066 4.43928C6.42137 4.29999 6.25601 4.1895 6.07403 4.11412C5.89204 4.03874 5.69698 3.99994 5.5 3.99994C5.30302 3.99994 5.10796 4.03874 4.92597 4.11412C4.74399 4.1895 4.57863 4.29999 4.43934 4.43928C4.30005 4.57857 4.18956 4.74393 4.11418 4.92591C4.0388 5.1079 4 5.30296 4 5.49994ZM17 5.49994C17 5.89776 17.158 6.27929 17.4393 6.5606C17.7206 6.8419 18.1022 6.99994 18.5 6.99994C18.8978 6.99994 19.2794 6.8419 19.5607 6.5606C19.842 6.27929 20 5.89776 20 5.49994C20 5.10211 19.842 4.72058 19.5607 4.43928C19.2794 4.15797 18.8978 3.99994 18.5 3.99994C18.1022 3.99994 17.7206 4.15797 17.4393 4.43928C17.158 4.72058 17 5.10211 17 5.49994ZM17 18.4999C17 18.8978 17.158 19.2793 17.4393 19.5606C17.7206 19.8419 18.1022 19.9999 18.5 19.9999C18.8978 19.9999 19.2794 19.8419 19.5607 19.5606C19.842 19.2793 20 18.8978 20 18.4999C20 18.1021 19.842 17.7206 19.5607 17.4393C19.2794 17.158 18.8978 16.9999 18.5 16.9999C18.1022 16.9999 17.7206 17.158 17.4393 17.4393C17.158 17.7206 17 18.1021 17 18.4999ZM4 15.4999C4 16.6934 4.47411 17.838 5.31802 18.6819C6.16193 19.5258 7.30653 19.9999 8.5 19.9999C9.69347 19.9999 10.8381 19.5258 11.682 18.6819C12.5259 17.838 13 16.6934 13 15.4999C13 14.3065 12.5259 13.1619 11.682 12.318C10.8381 11.474 9.69347 10.9999 8.5 10.9999C7.30653 10.9999 6.16193 11.474 5.31802 12.318C4.47411 13.1619 4 14.3065 4 15.4999Z"
+      stroke="#0891B2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+export default SvgDuotoneCommunication

package/src/lib/components/vention-icon/_generated/duotone-icons/duotone-conveyor.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+import type { SVGProps } from "react"
+const SvgDuotoneConveyor = (props: SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M17 8H7C4.79086 8 3 9.79086 3 12C3 14.2091 4.79086 16 7 16H17C19.2091 16 21 14.2091 21 12C21 9.79086 19.2091 8 17 8Z"
+      fill="#FDE68A"
+      stroke="#D97706"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M17 11C17.5489 11 18 11.4511 18 12C18 12.5489 17.5489 13 17 13C16.4511 13 16 12.5489 16 12C16 11.4511 16.4511 11 17 11Z"
+      stroke="#D97706"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M7 11C7.54886 11 8 11.4511 8 12C8 12.5489 7.54886 13 7 13C6.45114 13 6 12.5489 6 12C6 11.4511 6.45114 11 7 11Z"
+      stroke="#D97706"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 11C12.5489 11 13 11.4511 13 12C13 12.5489 12.5489 13 12 13C11.4511 13 11 12.5489 11 12C11 11.4511 11.4511 11 12 11Z"
+      stroke="#D97706"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+export default SvgDuotoneConveyor

package/src/lib/components/vention-icon/_generated/duotone-icons/duotone-input-output.tsx

@@ -0,0 +1,10 @@
+import * as React from "react"
+import type { SVGProps } from "react"
+const SvgDuotoneInputOutput = (props: SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M3 14L7 10H21L17 14H3Z" fill="#A5F3FC" />
+    <path d="M7 10H21L17 6" stroke="#0891B2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M17 14H3L7 18" stroke="#0891B2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+export default SvgDuotoneInputOutput

package/src/lib/components/vention-icon/_generated/duotone-icons/duotone-linear.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import type { SVGProps } from "react"
+const SvgDuotoneLinear = (props: SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M4 18C4 18.5304 4.21071 19.0391 4.58579 19.4142C4.96086 19.7893 5.46957 20 6 20C6.53043 20 7.03914 19.7893 7.41421 19.4142C7.78929 19.0391 8 18.5304 8 18C8 17.4696 7.78929 16.9609 7.41421 16.5858C7.03914 16.2107 6.53043 16 6 16C5.46957 16 4.96086 16.2107 4.58579 16.5858C4.21071 16.9609 4 17.4696 4 18Z"
+      fill="#FDE68A"
+      stroke="#D97706"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16 6C16 6.53043 16.2107 7.03914 16.5858 7.41421C16.9609 7.78929 17.4696 8 18 8C18.5304 8 19.0391 7.78929 19.4142 7.41421C19.7893 7.03914 20 6.53043 20 6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4C17.4696 4 16.9609 4.21071 16.5858 4.58579C16.2107 4.96086 16 5.46957 16 6Z"
+      fill="#FDE68A"
+      stroke="#D97706"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path d="M7.5 16.5L16.5 7.5" stroke="#D97706" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+export default SvgDuotoneLinear

package/src/lib/components/vention-icon/_generated/duotone-icons/duotone-pneumatic.tsx

@@ -0,0 +1,12 @@
+import * as React from "react"
+import type { SVGProps } from "react"
+const SvgDuotonePneumatic = (props: SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M6 7H3V17H6V7Z" fill="#FDE68A" stroke="#D97706" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M16.5 7H13.5V17H16.5V7Z" fill="#FDE68A" stroke="#D97706" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M13.5 8.66666H6V15.3333H13.5V8.66666Z" fill="#FDE68A" stroke="#D97706" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M21 10.3333H16.5V13.6667H21V10.3333Z" fill="#FDE68A" stroke="#D97706" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M21 15.3333V8.66666" stroke="#D97706" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+export default SvgDuotonePneumatic

package/src/lib/components/vention-icon/_generated/duotone-icons/duotone-programming.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import type { SVGProps } from "react"
+const SvgDuotoneProgramming = (props: SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M13 20.693C12.095 21.321 10.64 20.985 10.325 19.683C10.2611 19.4192 10.1358 19.1742 9.95929 18.968C9.7828 18.7618 9.56011 18.6001 9.30935 18.4963C9.05859 18.3924 8.78683 18.3491 8.51621 18.3701C8.24559 18.3911 7.98375 18.4757 7.752 18.617C6.209 19.557 4.442 17.791 5.382 16.247C5.5231 16.0153 5.60755 15.7537 5.62848 15.4832C5.64942 15.2128 5.60624 14.9412 5.50247 14.6906C5.3987 14.44 5.23726 14.2174 5.03127 14.0409C4.82529 13.8645 4.58056 13.7391 4.317 13.675C2.561 13.249 2.561 10.751 4.317 10.325C4.5808 10.2611 4.82578 10.1358 5.032 9.95929C5.23822 9.7828 5.39985 9.56011 5.50375 9.30935C5.60764 9.05859 5.65085 8.78683 5.62987 8.51621C5.60889 8.24559 5.5243 7.98375 5.383 7.752C4.443 6.209 6.209 4.442 7.753 5.382C8.753 5.99 10.049 5.452 10.325 4.317C10.751 2.561 13.249 2.561 13.675 4.317C13.7389 4.5808 13.8642 4.82578 14.0407 5.032C14.2172 5.23822 14.4399 5.39985 14.6907 5.50375C14.9414 5.60764 15.2132 5.65085 15.4838 5.62987C15.7544 5.60889 16.0162 5.5243 16.248 5.383C17.791 4.443 19.558 6.209 18.618 7.753C18.4769 7.98466 18.3924 8.24634 18.3715 8.51677C18.3506 8.78721 18.3938 9.05877 18.4975 9.30938C18.6013 9.55999 18.7627 9.78258 18.9687 9.95905C19.1747 10.1355 19.4194 10.2609 19.683 10.325C21.175 10.687 21.399 12.544 20.357 13.355"
+      fill="#A7F3D0"
+    />
+    <path
+      d="M13 20.693C12.095 21.321 10.64 20.985 10.325 19.683C10.2611 19.4192 10.1358 19.1742 9.95929 18.968C9.7828 18.7618 9.56011 18.6001 9.30935 18.4963C9.05859 18.3924 8.78683 18.3491 8.51621 18.3701C8.24559 18.3911 7.98375 18.4757 7.752 18.617C6.209 19.557 4.442 17.791 5.382 16.247C5.5231 16.0153 5.60755 15.7537 5.62848 15.4832C5.64942 15.2128 5.60624 14.9412 5.50247 14.6906C5.3987 14.44 5.23726 14.2174 5.03127 14.0409C4.82529 13.8645 4.58056 13.7391 4.317 13.675C2.561 13.249 2.561 10.751 4.317 10.325C4.5808 10.2611 4.82578 10.1358 5.032 9.95929C5.23822 9.7828 5.39985 9.56011 5.50375 9.30935C5.60764 9.05859 5.65085 8.78683 5.62987 8.51621C5.60889 8.24559 5.5243 7.98375 5.383 7.752C4.443 6.209 6.209 4.442 7.753 5.382C8.753 5.99 10.049 5.452 10.325 4.317C10.751 2.561 13.249 2.561 13.675 4.317C13.7389 4.5808 13.8642 4.82578 14.0407 5.032C14.2172 5.23822 14.4399 5.39985 14.6907 5.50375C14.9414 5.60764 15.2132 5.65085 15.4838 5.62987C15.7544 5.60889 16.0162 5.5243 16.248 5.383C17.791 4.443 19.558 6.209 18.618 7.753C18.4769 7.98466 18.3924 8.24634 18.3715 8.51677C18.3506 8.78721 18.3938 9.05877 18.4975 9.30938C18.6013 9.55999 18.7627 9.78258 18.9687 9.95905C19.1747 10.1355 19.4194 10.2609 19.683 10.325C21.175 10.687 21.399 12.544 20.357 13.355"
+      stroke="#059669"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9 12C9 12.7956 9.31607 13.5587 9.87868 14.1213C10.4413 14.6839 11.2044 15 12 15C12.7956 15 13.5587 14.6839 14.1213 14.1213C14.6839 13.5587 15 12.7956 15 12C15 11.2044 14.6839 10.4413 14.1213 9.87868C13.5587 9.31607 12.7956 9 12 9C11.2044 9 10.4413 9.31607 9.87868 9.87868C9.31607 10.4413 9 11.2044 9 12Z"
+      stroke="#059669"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path d="M17 22L22 19L17 16V22Z" fill="#A7F3D0" stroke="#059669" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+export default SvgDuotoneProgramming

package/src/lib/components/vention-icon/_generated/duotone-icons/duotone-robot-arm.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import type { SVGProps } from "react"
+const SvgDuotoneRobotArm = (props: SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M8 11L16 21H9L6 14" fill="#FDE68A" />
+    <path d="M8 11L16 21H9L6 14" stroke="#D97706" strokeLinecap="round" strokeLinejoin="round" />
+    <rect x={7} y={7.64566} width={7.07667} height={3.3976} transform="rotate(-21.9536 7 7.64566)" fill="#FDE68A" />
+    <path
+      d="M4 10C4 11.1 4.9 12 6 12C7.1 12 8 11.1 8 10C8 8.9 7.1 8 6 8C4.9 8 4 8.9 4 10Z"
+      fill="#FDE68A"
+      stroke="#D97706"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M14 6C14 7.1 14.9 8 16 8C17.1 8 18 7.1 18 6C18 4.9 17.1 4 16 4C14.9 4 14 4.9 14 6Z"
+      fill="#FDE68A"
+      stroke="#D97706"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path d="M5 21H19" stroke="#D97706" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M6.5 8L14 5" stroke="#D97706" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M15 8L8 11" stroke="#D97706" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M20.9214 9.33719L20.0321 7.28558L17.8572 6.76604" stroke="#D97706" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M19.636 10.8693L17.4611 10.3497L16.5718 8.29813" stroke="#D97706" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+export default SvgDuotoneRobotArm

package/src/lib/components/vention-icon/_generated/duotone-icons/duotone-rotary.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import type { SVGProps } from "react"
+const SvgDuotoneRotary = (props: SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M17 4C17 3.73478 17.1054 3.48043 17.2929 3.29289C17.4804 3.10536 17.7348 3 18 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4V6C21 6.26522 20.8946 6.51957 20.7071 6.70711C20.5196 6.89464 20.2652 7 20 7H18C17.7348 7 17.4804 6.89464 17.2929 6.70711C17.1054 6.51957 17 6.26522 17 6V4Z"
+      fill="#FDE68A"
+      stroke="#D97706"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M3 18C3 17.7348 3.10536 17.4804 3.29289 17.2929C3.48043 17.1054 3.73478 17 4 17H6C6.26522 17 6.51957 17.1054 6.70711 17.2929C6.89464 17.4804 7 17.7348 7 18V20C7 20.2652 6.89464 20.5196 6.70711 20.7071C6.51957 20.8946 6.26522 21 6 21H4C3.73478 21 3.48043 20.8946 3.29289 20.7071C3.10536 20.5196 3 20.2652 3 20V18Z"
+      fill="#FDE68A"
+      stroke="#D97706"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path d="M17 5C10.373 5 5 10.373 5 17" stroke="#D97706" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+export default SvgDuotoneRotary

package/src/lib/components/vention-icon/_generated/duotone-icons/duotone-state-machine.tsx

@@ -0,0 +1,35 @@
+import * as React from "react"
+import type { SVGProps } from "react"
+const SvgDuotoneStateMachine = (props: SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M10 5C8.67392 5 7.40215 5.52678 6.46447 6.46447C5.52678 7.40215 5 8.67392 5 10"
+      stroke="#059669"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M19 10C19 8.67392 18.4732 7.40215 17.5355 6.46447C16.5979 5.52678 15.3261 5 14 5"
+      stroke="#059669"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 17C12 15.6739 11.4732 14.4021 10.5355 13.4645C9.59785 12.5268 8.32608 12 7 12"
+      stroke="#059669"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M5 14C5 15.3261 5.52678 16.5979 6.46447 17.5355C7.40215 18.4732 8.67392 19 10 19"
+      stroke="#059669"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <rect x={10} y={3} width={4} height={4} rx={1} fill="#A7F3D0" stroke="#059669" />
+    <rect x={10} y={17} width={4} height={4} rx={1} fill="#A7F3D0" stroke="#059669" />
+    <rect x={21} y={10} width={4} height={4} rx={1} transform="rotate(90 21 10)" fill="#A7F3D0" stroke="#059669" />
+    <rect x={7} y={10} width={4} height={4} rx={1} transform="rotate(90 7 10)" fill="#A7F3D0" stroke="#059669" />
+  </svg>
+)
+export default SvgDuotoneStateMachine

package/src/lib/components/vention-icon/_generated/duotone-icons/position-rx.tsx

@@ -0,0 +1,16 @@
+import * as React from "react"
+import type { SVGProps } from "react"
+const SvgPositionRx = (props: SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 30 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <rect width={30} height={24} rx={2} fill="#FEE2E2" />
+    <path
+      d="M18.501 8.72729L20.4825 12.3516L22.496 8.72729H24.9442L21.9846 13.6364L24.9953 18.5455H22.5599L20.4825 15.0107L18.4243 18.5455H15.9697L18.9612 13.6364L16.0464 8.72729H18.501Z"
+      fill="#7F1D1D"
+    />
+    <path
+      d="M5.00439 18.5455V5.45456H9.91349C10.9192 5.45456 11.7629 5.62928 12.4447 5.97871C13.1308 6.32814 13.6486 6.8182 13.998 7.44888C14.3517 8.0753 14.5285 8.80612 14.5285 9.64135C14.5285 10.4808 14.3496 11.2095 13.9916 11.8274C13.6379 12.4411 13.1159 12.9162 12.4256 13.2529C11.7352 13.5852 10.8872 13.7514 9.88153 13.7514H6.38508V11.7827H9.56192C10.15 11.7827 10.6315 11.7017 11.0065 11.5398C11.3815 11.3736 11.6585 11.1328 11.8375 10.8175C12.0207 10.4979 12.1123 10.1058 12.1123 9.64135C12.1123 9.17686 12.0207 8.78055 11.8375 8.45243C11.6543 8.12004 11.3751 7.86862 11.0001 7.69817C10.6251 7.52345 10.1415 7.43609 9.54914 7.43609H7.37584V18.5455H5.00439ZM11.7672 12.6137L15.0079 18.5455H12.3616L9.1784 12.6137H11.7672Z"
+      fill="#7F1D1D"
+    />
+  </svg>
+)
+export default SvgPositionRx