@vention/machine-ui 3.27.0

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

@@ -0,0 +1,176 @@
+import "@testing-library/jest-dom"
+
+import { areElementsInDOM, renderWithTheme } from "../../testing/utils"
+import { COLORS } from "../../theme/colors"
+import { VentionSpinner } from "./vention-spinner"
+
+describe("<VentionSpinner />", () => {
+  it("should show spinner with type progress", () => {
+    const spinnerValue = 45
+
+    const { queryByTestId } = renderWithTheme(<VentionSpinner type="progress" value={spinnerValue} color={COLORS.blue[50]} />)
+
+    const { backgroundSpinner, mainSpinner, successIcon, errorIcon } = getElementsOfInterest(queryByTestId)
+
+    areElementsInDOM([
+      { element: backgroundSpinner, isInDOM: true },
+      { element: mainSpinner, isInDOM: true },
+      { element: successIcon, isInDOM: false },
+      { element: errorIcon, isInDOM: false },
+    ])
+
+    expect(backgroundSpinner).toHaveStyle(`color: ${COLORS.slate[200]}`)
+    expect(backgroundSpinner).toHaveAttribute("aria-valuenow", "100")
+
+    expect(mainSpinner).toHaveClass("MuiCircularProgress-determinate")
+    expect(mainSpinner).toHaveAttribute("aria-valuenow", spinnerValue.toString())
+    expect(mainSpinner).toHaveStyle(`color: ${COLORS.blue[50]}`)
+  })
+
+  it("should show spinner with type indeterminate", () => {
+    const { queryByTestId } = renderWithTheme(<VentionSpinner type="indeterminate" />)
+
+    const { backgroundSpinner, mainSpinner, successIcon, errorIcon } = getElementsOfInterest(queryByTestId)
+
+    areElementsInDOM([
+      { element: backgroundSpinner, isInDOM: false },
+      { element: mainSpinner, isInDOM: true },
+      { element: successIcon, isInDOM: false },
+      { element: errorIcon, isInDOM: false },
+    ])
+
+    expect(mainSpinner).toHaveClass("MuiCircularProgress-indeterminate")
+  })
+
+  it("should show spinner with type success", () => {
+    const { queryByTestId } = renderWithTheme(<VentionSpinner type="success" />)
+
+    const { backgroundSpinner, mainSpinner, successIcon, errorIcon, spinnerContainer } = getElementsOfInterest(queryByTestId)
+
+    areElementsInDOM([
+      { element: backgroundSpinner, isInDOM: false },
+      { element: mainSpinner, isInDOM: false },
+      { element: successIcon, isInDOM: true },
+      { element: errorIcon, isInDOM: false },
+    ])
+
+    expect(spinnerContainer).toHaveStyle(`background-color: ${COLORS.green[500]}`)
+    expect(successIcon).toHaveClass("tabler-icon-check")
+  })
+
+  it("should show spinner with type error", () => {
+    const { queryByTestId } = renderWithTheme(<VentionSpinner type="error" />)
+
+    const { backgroundSpinner, mainSpinner, successIcon, errorIcon, spinnerContainer } = getElementsOfInterest(queryByTestId)
+
+    areElementsInDOM([
+      { element: backgroundSpinner, isInDOM: false },
+      { element: mainSpinner, isInDOM: false },
+      { element: successIcon, isInDOM: false },
+      { element: errorIcon, isInDOM: true },
+    ])
+
+    expect(spinnerContainer).toHaveStyle(`background-color: ${COLORS.red[500]}`)
+  })
+
+  it("should show spinner colored spinner", () => {
+    const { queryByTestId } = renderWithTheme(<VentionSpinner colored />)
+    const { mainSpinner } = getElementsOfInterest(queryByTestId)
+    expect(mainSpinner).toHaveStyle(`color: ${COLORS.blue[500]}`)
+  })
+
+  it("should show spinner with label", () => {
+    const label = "Loading..."
+    const { getByText } = renderWithTheme(<VentionSpinner label={label} />)
+    getByText(label)
+  })
+
+  it("should show filled icon with huge error spinner", () => {
+    const { getByTestId } = renderWithTheme(<VentionSpinner type="error" size="x-large" />)
+    const hugeIcon = getByTestId("errorIcon")
+
+    expect(hugeIcon).toHaveClass("tabler-icon-alert-triangle-filled")
+  })
+
+  it("should show filled icon with large error spinner", () => {
+    const { getByTestId } = renderWithTheme(<VentionSpinner type="error" size="large" />)
+    const largeIcon = getByTestId("errorIcon")
+
+    expect(largeIcon).toHaveClass("tabler-icon-alert-triangle-filled")
+  })
+
+  it("should show filled icon with medium error spinner", () => {
+    const { getByTestId: getMediumIcon } = renderWithTheme(<VentionSpinner type="error" size="medium" />)
+    const mediumIcon = getMediumIcon("errorIcon")
+
+    expect(mediumIcon).toHaveClass("tabler-icon-alert-triangle-filled")
+  })
+
+  it("should show red outlined icon with small and tiny error spinner", () => {
+    const { getByTestId } = renderWithTheme(<VentionSpinner type="error" size="small" />)
+    const smallIcon = getByTestId("errorIcon")
+
+    expect(smallIcon).toHaveClass("tabler-icon-alert-triangle")
+    expect(smallIcon).toHaveStyle(`color: ${COLORS.red[500]}`)
+  })
+
+  it("should show red outlined icon with tiny error spinner", () => {
+    const { getByTestId: getTinyIcon } = renderWithTheme(<VentionSpinner type="error" size="x-small" />)
+    const tinyIcon = getTinyIcon("errorIcon")
+
+    expect(tinyIcon).toHaveClass("tabler-icon-alert-triangle")
+    expect(tinyIcon).toHaveStyle(`color: ${COLORS.red[500]}`)
+  })
+
+  it("should show exclamation icon with extra tiny error spinner", () => {
+    const { getByTestId: getExtraTinyIcon } = renderWithTheme(<VentionSpinner type="error" size="xx-small" />)
+    const extraTinyIcon = getExtraTinyIcon("errorIcon")
+
+    expect(extraTinyIcon).toHaveClass("tabler-icon-exclamation-mark")
+    expect(extraTinyIcon).toHaveStyle(`color: ${COLORS.red[500]}`)
+  })
+
+  it("should show white icon for huge success spinner", () => {
+    const { getByTestId } = renderWithTheme(<VentionSpinner type="success" size="x-large" />)
+    const hugeIcon = getByTestId("successIcon")
+    expect(hugeIcon).toHaveStyle(`color: white`)
+  })
+
+  it("should show white icon for large success spinner", () => {
+    const { getByTestId } = renderWithTheme(<VentionSpinner type="success" size="large" />)
+    const largeIcon = getByTestId("successIcon")
+    expect(largeIcon).toHaveStyle(`color: white`)
+  })
+
+  it("should show white icon for medium success spinner", () => {
+    const { getByTestId } = renderWithTheme(<VentionSpinner type="success" size="medium" />)
+    const mediumIcon = getByTestId("successIcon")
+    expect(mediumIcon).toHaveStyle(`color: white`)
+  })
+
+  it("should show green icon for small success spinner", () => {
+    const { getByTestId } = renderWithTheme(<VentionSpinner type="success" size="small" />)
+    const smallIcon = getByTestId("successIcon")
+    expect(smallIcon).toHaveStyle(`color: ${COLORS.green[500]}`)
+  })
+
+  it("should show green icon for tiny success spinner", () => {
+    const { getByTestId } = renderWithTheme(<VentionSpinner type="success" size="x-small" />)
+    const tinyIcon = getByTestId("successIcon")
+    expect(tinyIcon).toHaveStyle(`color: ${COLORS.green[500]}`)
+  })
+
+  it("should show green icon for extra-tiny success spinner", () => {
+    const { getByTestId } = renderWithTheme(<VentionSpinner type="success" size="xx-small" />)
+    const extraTinyIcon = getByTestId("successIcon")
+    expect(extraTinyIcon).toHaveStyle(`color: ${COLORS.green[500]}`)
+  })
+})
+
+const getElementsOfInterest = (queryByTestId: (testId: string) => HTMLElement) => ({
+  backgroundSpinner: queryByTestId("backgroundSpinner"),
+  mainSpinner: queryByTestId("mainSpinner"),
+  successIcon: queryByTestId("successIcon"),
+  errorIcon: queryByTestId("errorIcon"),
+  spinnerContainer: queryByTestId("spinnerContainer"),
+})

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

@@ -0,0 +1,213 @@
+import { Theme, Typography } from "@mui/material"
+import Box from "@mui/material/Box"
+import CircularProgress from "@mui/material/CircularProgress"
+import { IconAlertTriangle, IconAlertTriangleFilled, IconCheck, IconExclamationMark } from "@tabler/icons-react"
+import { Sizes, StrictExtract } from "../../theme/machine-ui-theme"
+
+import { tss } from "tss-react/mui"
+
+export interface VentionSpinnerProps {
+  type?: "progress" | "indeterminate" | "success" | "error"
+  value?: number
+  size?: StrictExtract<Sizes, "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large">
+  colored?: boolean
+  label?: string
+  color?: string
+}
+
+const defaultProps: Partial<VentionSpinnerProps> = {
+  type: "indeterminate",
+  value: 0,
+  size: "medium",
+  colored: false,
+}
+
+export const VentionSpinner = (props: VentionSpinnerProps) => {
+  const { classes } = useStyles({ size: props.size, colored: props.colored, type: props.type, color: props.color })
+
+  const isSpinningState = props.type === "progress" || props.type === "indeterminate"
+  const spinnerContainerClass = isSpinningState ? classes.spinnerContainer : classes.statusContainer
+  const { size: spinnerSize, thickness, iconSize } = SPINNER_SIZES[props.size]
+  const iconProperties = {
+    stroke: 2,
+    size: iconSize,
+  }
+  const successIconProperties = {
+    ...iconProperties,
+    "data-testid": "successIcon",
+  }
+  const errorIconProperties = {
+    ...iconProperties,
+    "data-testid": "errorIcon",
+  }
+  const spinnerProperties = {
+    size: spinnerSize,
+    thickness,
+  }
+
+  return (
+    <Box className={classes.container}>
+      <Box className={spinnerContainerClass} data-testid="spinnerContainer">
+        {props.type === "progress" && (
+          <CircularProgress
+            className={classes.backgroundCircle}
+            variant="determinate"
+            value={100}
+            data-testid="backgroundSpinner"
+            {...spinnerProperties}
+          />
+        )}
+        {isSpinningState && (
+          <CircularProgress
+            className={classes.main}
+            variant={props.type === "indeterminate" ? "indeterminate" : "determinate"}
+            value={props.value}
+            data-testid="mainSpinner"
+            {...spinnerProperties}
+          />
+        )}
+        {props.type === "success" && <IconCheck {...successIconProperties} />}
+        {props.type === "error" && spinnerSize > SPINNER_SIZES.small.size && <IconAlertTriangleFilled {...errorIconProperties} />}
+        {props.type === "error" && (props.size === "small" || props.size === "x-small") && <IconAlertTriangle {...errorIconProperties} />}
+        {props.type === "error" && props.size === "xx-small" && <IconExclamationMark {...errorIconProperties} />}
+      </Box>
+      {props.label && (
+        <Typography variant="uiText14Regular" align="center">
+          {props.label}
+        </Typography>
+      )}
+    </Box>
+  )
+}
+
+const useStyles = tss
+  .withParams<Pick<VentionSpinnerProps, "type" | "size" | "colored" | "color">>()
+  .create(({ size, colored, color, type, theme }) => {
+    const containerSize = {
+      width: SPINNER_SIZES[size].size,
+      height: SPINNER_SIZES[size].size,
+    }
+
+    const { statusContainerColor, statusIconColor, mainSpinnerColor, statusTextColor } = getColors(
+      type,
+      colored,
+      color,
+      SPINNER_SIZES[size].size > SPINNER_SIZES.small.size,
+      theme
+    )
+
+    return {
+      main: {
+        color: mainSpinnerColor,
+        position: "absolute",
+        left: 0,
+      },
+      backgroundCircle: {
+        color: theme.palette.background.surface3,
+        position: "absolute",
+        left: 0,
+      },
+      spinnerContainer: {
+        position: "relative",
+        display: "block",
+        ...containerSize,
+      },
+      statusContainer: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: "50%",
+        backgroundColor: statusContainerColor,
+        ...containerSize,
+        "& .tabler-icon": {
+          color: statusIconColor,
+        },
+      },
+      container: {
+        display: "inline-flex",
+        alignItems: "center",
+        flexDirection: "column",
+        "& .MuiTypography-root": {
+          marginTop: theme.spacing(1),
+          color: statusTextColor,
+        },
+      },
+    }
+  })
+
+const getColors = (
+  type: VentionSpinnerProps["type"],
+  isColored: VentionSpinnerProps["colored"],
+  color: VentionSpinnerProps["color"],
+  isBigSpinner: boolean,
+  theme: Theme
+) => {
+  const iconColors = theme.palette.icon
+  const backgroundColors = theme.palette.background
+  const textColors = theme.palette.text
+
+  let mainSpinnerColor = iconColors.secondary
+  if (color) {
+    mainSpinnerColor = color
+  } else if (isColored) {
+    mainSpinnerColor = iconColors.brand
+  } else if (type === "indeterminate") {
+    mainSpinnerColor = iconColors.tertiary
+  }
+
+  let statusContainerColor = "transparent"
+  let statusIconColor = iconColors.primaryOnColor
+  let statusTextColor = textColors.primary
+  if (type === "success") {
+    if (isBigSpinner) statusContainerColor = backgroundColors.success
+    else statusIconColor = iconColors.positive
+    statusTextColor = textColors.positive
+  } else if (type === "error") {
+    if (isBigSpinner) statusContainerColor = backgroundColors.destructive
+    else statusIconColor = iconColors.negative
+    statusTextColor = textColors.negative
+  }
+
+  return {
+    statusContainerColor,
+    statusIconColor,
+    mainSpinnerColor,
+    statusTextColor,
+  }
+}
+
+const SPINNER_SIZES = {
+  "xx-small": {
+    size: 8,
+    thickness: 4,
+    iconSize: 8,
+  },
+  "x-small": {
+    size: 12,
+    thickness: 4,
+    iconSize: 16,
+    backgroundColor: "green",
+  },
+  small: {
+    size: 16,
+    thickness: 4,
+    iconSize: 24,
+  },
+  medium: {
+    size: 32,
+    thickness: 5,
+    iconSize: 20,
+  },
+  large: {
+    size: 40,
+    thickness: 5,
+    iconSize: 24,
+  },
+  "x-large": {
+    size: 88,
+    thickness: 2.8,
+    iconSize: 24,
+  },
+}
+
+VentionSpinner.defaultProps = defaultProps

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

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import React from "react"
+
+import { WorkInProgressStory } from "../../../../.storybook/blocks/work-in-progress"
+import { VentionSpinner } from "./vention-spinner"
+
+const meta: Meta<typeof VentionSpinner> = {
+  component: VentionSpinner,
+  title: "Components/VentionSpinner",
+  argTypes: {
+    type: {
+      control: {
+        type: "radio",
+        options: ["progress", "progress-filled", "indeterminate", "success", "error"],
+      },
+    },
+    size: {
+      control: {
+        type: "select",
+        options: ["xx-small", "x-small", "small", "medium", "large", "x-large"],
+      },
+    },
+  },
+}
+export default meta
+type Story = StoryObj<typeof VentionSpinner>
+
+export const Default: Story = {
+  args: {},
+}
+
+export const Progress: Story = {
+  args: {
+    type: "progress",
+    colored: true,
+    value: 25,
+  },
+}
+
+export const ProgressFilled: Story = {
+  decorators: [() => <WorkInProgressStory variantTitle="progress-filled" />],
+}
+
+export const Indeterminate: Story = {
+  args: {
+    type: "indeterminate",
+    colored: true,
+  },
+}
+
+export const Success: Story = {
+  args: {
+    type: "success",
+  },
+}
+
+export const Error: Story = {
+  args: {
+    type: "error",
+  },
+}
+
+export const WithLabel: Story = {
+  args: {
+    label: "Loading...",
+  },
+}

package/src/lib/components/vention-status-dot/vention-status-dot.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { machineUiTheme } from "../../theme/machine-ui-theme"
+import { VentionStatusDot } from "./vention-status-dot"
+
+const meta: Meta<typeof VentionStatusDot> = {
+  component: VentionStatusDot,
+  title: "Components/VentionStatusDot",
+}
+export default meta
+type Story = StoryObj<typeof VentionStatusDot>
+
+export const Default: Story = {
+  args: {
+    color: machineUiTheme.palette.background.success,
+  },
+}
+
+export const WithBorder: Story = {
+  args: {
+    color: machineUiTheme.palette.background.blue,
+    borderColor: machineUiTheme.palette.border.blueSubtle,
+  },
+}

package/src/lib/components/vention-status-dot/vention-status-dot.test.tsx

@@ -0,0 +1,44 @@
+import "@testing-library/jest-dom"
+
+import { renderWithTheme } from "../../testing/utils"
+import { VentionStatusDot } from "./vention-status-dot"
+
+describe("VentionStatusDot", () => {
+  it("renders without crashing", () => {
+    const { container } = renderWithTheme(<VentionStatusDot color="#000000" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+  it("renders with default size", () => {
+    const { container } = renderWithTheme(<VentionStatusDot color="#000000" />)
+    const rootDiv = container.firstChild
+    expect(rootDiv).toHaveStyle("width: 16px")
+    expect(rootDiv).toHaveStyle("height: 16px")
+  })
+
+  it("renders with medium size", () => {
+    const { container } = renderWithTheme(<VentionStatusDot color="#000000" size="medium" />)
+    const rootDiv = container.firstChild
+    expect(rootDiv).toHaveStyle("width: 24px")
+    expect(rootDiv).toHaveStyle("height: 24px")
+  })
+
+  it("renders with border color", () => {
+    const { container } = renderWithTheme(<VentionStatusDot size="small" color="#000000" borderColor="#FFFFFF" />)
+    const dotDiv = container.firstChild.firstChild
+    expect(dotDiv).toHaveStyle({
+      border: "2px solid #FFFFFF",
+    })
+  })
+
+  it("renders without border color", () => {
+    const { container } = renderWithTheme(<VentionStatusDot color="#000000" />)
+    const dotDiv = container.querySelector("div > div")
+    expect(dotDiv).not.toHaveStyle("border: 2px solid #FFFFFF")
+  })
+
+  it("renders with custom classes", () => {
+    const { container } = renderWithTheme(<VentionStatusDot color="#000000" className="custom-class" />)
+    const rootDiv = container.firstChild
+    expect(rootDiv).toHaveClass("custom-class")
+  })
+})

package/src/lib/components/vention-status-dot/vention-status-dot.tsx

@@ -0,0 +1,52 @@
+import { Sizes, StrictExtract } from "../../theme/machine-ui-theme"
+
+import React from "react"
+import { tss } from "tss-react/mui"
+
+export interface VentionStatusDotProps {
+  color: string
+  borderColor?: string
+  size?: StrictExtract<Sizes, "small" | "medium" | "x-large" | "xx-large">
+  className?: string
+}
+
+export const VentionStatusDot: React.FunctionComponent<VentionStatusDotProps> = props => {
+  const { size = "small", className } = props
+  const { classes, cx } = useStyles({ color: props.color, borderColor: props.borderColor, size })
+
+  return (
+    <div className={cx(classes.root, className)}>
+      <div className={classes.dot} />
+    </div>
+  )
+}
+
+const useStyles = tss.withParams<{ color: string; borderColor: string; size: string }>().create(({ color, borderColor, size }) => {
+  const sizeMapping = {
+    small: { rootSize: 16, dotSize: 8 },
+    medium: { rootSize: 24, dotSize: 12 },
+    "x-large": { rootSize: 28, dotSize: 14 },
+    "xx-large": { rootSize: 32, dotSize: 16 },
+  }
+  const { rootSize, dotSize } = sizeMapping[size]
+
+  return {
+    root: {
+      width: rootSize,
+      height: rootSize,
+      padding: rootSize / 4,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    dot: {
+      width: dotSize,
+      height: dotSize,
+      background: color,
+      borderRadius: "50%",
+      border: borderColor ? `2px solid ${borderColor}` : "none",
+    },
+  }
+})
+
+export default VentionStatusDot

package/src/lib/components/vention-status-indicator/vention-status-indicator.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { VentionStatusIndicator } from "./vention-status-indicator"
+import { machineUiTheme } from "../../theme/machine-ui-theme"
+import React from "react"
+
+const meta: Meta<typeof VentionStatusIndicator> = {
+  component: VentionStatusIndicator,
+  title: "Components/VentionStatusIndicator",
+}
+export default meta
+
+type Story = StoryObj<typeof VentionStatusIndicator>
+
+export const Default: Story = {
+  args: {
+    dotColor: machineUiTheme.palette.success.main,
+    label: "Active",
+  },
+}
+
+export const Sizes: Story = {
+  render: args => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+      <VentionStatusIndicator {...args} size="x-large" label="X-Large Size" />
+      <VentionStatusIndicator {...args} size="large" label="Large Size" />
+      <VentionStatusIndicator {...args} size="medium" label="Medium Size" />
+      <VentionStatusIndicator {...args} size="small" label="Small Size" />
+    </div>
+  ),
+  args: {
+    dotColor: machineUiTheme.palette.success.main,
+  },
+}
+
+export const WithOutline: Story = {
+  args: {
+    dotColor: machineUiTheme.palette.warning.main,
+    label: "Outlined",
+    outline: true,
+  },
+}
+
+export const DotOnRight: Story = {
+  args: {
+    dotColor: machineUiTheme.palette.error.main,
+    label: "Error",
+    dotPosition: "right",
+  },
+}

package/src/lib/components/vention-status-indicator/vention-status-indicator.test.tsx

@@ -0,0 +1,50 @@
+import "@testing-library/jest-dom"
+import { renderWithTheme } from "../../testing/utils"
+import { VentionStatusIndicator } from "./vention-status-indicator"
+import { screen } from "@testing-library/react"
+import { machineUiTheme as theme } from "../../theme/machine-ui-theme"
+
+describe("VentionStatusIndicator", () => {
+  it("renders without crashing", () => {
+    const { container } = renderWithTheme(<VentionStatusIndicator dotColor={theme.palette.success.main} label="Test Label" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it("renders with default props", () => {
+    renderWithTheme(<VentionStatusIndicator dotColor={theme.palette.success.main} label="Default Props" />)
+    expect(screen.getByText("Default Props")).toBeInTheDocument()
+  })
+
+  it("renders with different sizes", () => {
+    const sizes = ["xx-large", "x-large", "large", "medium", "small"] as const
+    sizes.forEach(size => {
+      renderWithTheme(<VentionStatusIndicator size={size} dotColor={theme.palette.success.main} label={`Size ${size}`} />)
+      expect(screen.getByText(`Size ${size}`)).toBeInTheDocument()
+    })
+  })
+
+  it("renders with outline", () => {
+    const { container } = renderWithTheme(<VentionStatusIndicator outline dotColor={theme.palette.warning.main} label="Outlined" />)
+    expect(container.firstChild).toHaveStyle(`border: 1px solid ${theme.palette.border.main}`)
+  })
+
+  it("renders with thicker outline when size is xx-large", () => {
+    const { container } = renderWithTheme(
+      <VentionStatusIndicator outline size="xx-large" dotColor={theme.palette.warning.main} label="Outlined" />
+    )
+    expect(container.firstChild).toHaveStyle(`border: 2px solid ${theme.palette.border.main}`)
+  })
+
+  it("renders with dot on right", () => {
+    const { container } = renderWithTheme(
+      <VentionStatusIndicator dotPosition="right" dotColor={theme.palette.error.main} label="Dot Right" />
+    )
+    const dotElement = container.querySelector('[class*="dot"]') as HTMLElement
+    expect(container.firstChild?.lastChild).toContainElement(dotElement)
+  })
+
+  it("renders with custom dotColor and label", () => {
+    renderWithTheme(<VentionStatusIndicator dotColor={theme.palette.success.main} label="Custom Label" />)
+    expect(screen.getByText("Custom Label")).toBeInTheDocument()
+  })
+})