@vention/machine-ui 3.29.0 → 3.29.1-test.0

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

@@ -1,176 +0,0 @@
-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

@@ -1,213 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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()
-  })
-})