@vention/machine-ui 3.27.0

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

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { IconRefresh } from "@tabler/icons-react"
+import React from "react"
+
+import { VentionButton } from "./vention-button"
+
+const meta: Meta<typeof VentionButton> = {
+  component: VentionButton,
+  title: "Components/VentionButton",
+}
+export default meta
+type Story = StoryObj<typeof VentionButton>
+
+export const Default: Story = {
+  args: {
+    onClick: () => {
+      alert("Button clicked")
+    },
+  },
+}
+
+export const Primary: Story = {
+  args: {
+    labelText: "Button",
+    variant: "filled-brand",
+    size: "medium",
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    labelText: "Button",
+    variant: "filled-brand",
+    size: "large",
+    loading: true,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    labelText: "Button",
+    variant: "outline",
+    size: "medium",
+    disabled: true,
+  },
+}
+
+export const Shaded: Story = {
+  args: {
+    labelText: "Button",
+    variant: "shaded",
+    size: "medium",
+  },
+}
+
+export const WithRightIcon: Story = {
+  args: {
+    labelText: "Scan",
+    variant: "outline",
+    size: "medium",
+    iconRight: <IconRefresh size={24} />,
+  },
+}
+
+export const OutlinedAndSmall: Story = {
+  args: {
+    labelText: "Button",
+    variant: "outline",
+    size: "small",
+  },
+}
+
+export const DestructiveAndLarge: Story = {
+  args: {
+    labelText: "Button",
+    variant: "destructive",
+    size: "large",
+  },
+}
+
+export const fullWidthWithTextOverflow: Story = {
+  args: {
+    labelText:
+      "Button with a very long text that should overflow, yes it is a very long text, a very long text indeed, this is the story of a button that has a very long text",
+    variant: "outline",
+    size: "medium",
+    fullWidth: true,
+  },
+}

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

@@ -0,0 +1,182 @@
+import "@testing-library/jest-dom"
+import { fireEvent, screen } from "@testing-library/react"
+import { renderWithTheme } from "../../testing/utils"
+import { getSpinnerColor, VentionButton } from "./vention-button"
+import { IconRefresh } from "@tabler/icons-react"
+import { machineUiTheme } from "../../theme/machine-ui-theme"
+import { VentionButtonProps } from "./button-utils"
+
+const handleClickMock = jest.fn()
+describe("VentionButton", () => {
+  it("should render the button with the correct text", () => {
+    const buttonText = "Click me"
+    const { getByText } = renderWithTheme(
+      <VentionButton labelText={buttonText} size="small" variant="filled-brand" onClick={handleClickMock} />
+    )
+    const buttonElement = getByText(buttonText)
+    expect(buttonElement).toBeInTheDocument()
+  })
+
+  it("should call the onClick function when the button is clicked", () => {
+    const { getByText } = renderWithTheme(
+      <VentionButton labelText="Click me" size="large" variant="filled-brand" onClick={handleClickMock} />
+    )
+    const buttonElement = getByText("Click me")
+    fireEvent.click(buttonElement)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+
+  it("should render the appropriate padding depending on the size", () => {
+    renderWithTheme(<VentionButton labelText="Click me" size="medium" variant="shaded" onClick={handleClickMock} />)
+    const button = screen.getByRole("button")
+    expect(button).toHaveStyle("border-radius: 4px")
+  })
+
+  it("should call the onClick function when the button is clicked with minimal props", () => {
+    const { getByText } = renderWithTheme(<VentionButton labelText="Click me" variant="shaded" size="small" onClick={handleClickMock} />)
+    const buttonElement = getByText("Click me")
+    fireEvent.click(buttonElement)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+
+  it("should call the onClick function when the button is clicked with filled variant", () => {
+    const { getByText } = renderWithTheme(<VentionButton labelText="Click me" variant="filled" onClick={handleClickMock} />)
+    const buttonElement = getByText("Click me")
+    fireEvent.click(buttonElement)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+
+  it("should call the onClick function when the button is clicked with outline variant", () => {
+    const { getByText } = renderWithTheme(<VentionButton labelText="Click me" variant="outline" onClick={handleClickMock} />)
+    const buttonElement = getByText("Click me")
+    fireEvent.click(buttonElement)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+
+  it("should call the onClick function when the button is clicked with filled variant with medium size", () => {
+    const { getByText } = renderWithTheme(<VentionButton labelText="Click me" variant="filled" size="medium" onClick={handleClickMock} />)
+    const buttonElement = getByText("Click me")
+    fireEvent.click(buttonElement)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+
+  it("should call the onClick function when the button is clicked with outline variant with medium size", () => {
+    const { getByText } = renderWithTheme(<VentionButton labelText="Click me" variant="outline" size="medium" onClick={handleClickMock} />)
+    const buttonElement = getByText("Click me")
+    fireEvent.click(buttonElement)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+
+  it("should call the onClick function when the button is clicked with shaded variant", () => {
+    const { getByText } = renderWithTheme(<VentionButton labelText="Click me" variant="shaded" onClick={handleClickMock} />)
+    const buttonElement = getByText("Click me")
+    fireEvent.click(buttonElement)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+
+  it("should call the onClick function when the button is clicked with destructive variant", () => {
+    const { getByText } = renderWithTheme(<VentionButton labelText="Click me" variant="destructive" onClick={handleClickMock} />)
+    const buttonElement = getByText("Click me")
+    fireEvent.click(buttonElement)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+
+  it("should call the onClick function when the button is clicked with shaded variant with medium size", () => {
+    const { getByText } = renderWithTheme(<VentionButton labelText="Click me" variant="shaded" size="medium" onClick={handleClickMock} />)
+    const buttonElement = getByText("Click me")
+    fireEvent.click(buttonElement)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+
+  it("should call the onClick function when the button is clicked with destructive variant with medium size", () => {
+    const { getByText } = renderWithTheme(
+      <VentionButton labelText="Click me" variant="destructive" size="medium" onClick={handleClickMock} />
+    )
+    const buttonElement = getByText("Click me")
+    fireEvent.click(buttonElement)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+
+  it("should call the onClick function when the button is clicked with text-only variant", () => {
+    const { getByText } = renderWithTheme(<VentionButton labelText="Click me" variant="text-only" onClick={handleClickMock} />)
+    const buttonElement = getByText("Click me")
+    fireEvent.click(buttonElement)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+
+  it("should call the onClick function when the button is clicked with text-only variant with medium size", () => {
+    const { getByText } = renderWithTheme(
+      <VentionButton labelText="Click me" variant="text-only" size="medium" onClick={handleClickMock} />
+    )
+    const buttonElement = getByText("Click me")
+    fireEvent.click(buttonElement)
+    expect(handleClickMock).toHaveBeenCalled()
+  })
+
+  it("should render with full width when fullWidth is true", () => {
+    renderWithTheme(<VentionButton labelText="Full Width" size="medium" fullWidth variant="filled" />)
+    const button = screen.getByRole("button")
+    expect(button).toHaveStyle("width: 100%")
+  })
+
+  it("should render the left icon when iconLeft is provided", () => {
+    renderWithTheme(<VentionButton labelText="With Icon" iconLeft={<IconRefresh data-testid="iconLeft" />} />)
+    const icon = screen.getByTestId("iconLeft")
+    expect(icon).toBeInTheDocument()
+  })
+
+  it("should render the right icon when iconRight is provided", () => {
+    renderWithTheme(<VentionButton labelText="With Icon" iconRight={<IconRefresh data-testid="iconRight" />} />)
+    const icon = screen.getByTestId("iconRight")
+    expect(icon).toBeInTheDocument()
+  })
+
+  it("should disable the button when disabled is true", () => {
+    renderWithTheme(<VentionButton labelText="Disabled" disabled />)
+    const button = screen.getByRole("button")
+    expect(button).toBeDisabled()
+  })
+
+  it("should apply correct styling for x-large size", () => {
+    const { getByText, getByTestId } = renderWithTheme(<VentionButton labelText="HMI Button" size="x-large" data-testid="HMI" />)
+    const typographyElement = getByText("HMI Button")
+    expect(typographyElement).toHaveClass("MuiTypography-heading18SemiBold")
+    const button = getByTestId("HMI")
+    expect(button).toHaveStyle("height: 56px")
+  })
+
+  it("should apply correct styling for xx-large size", () => {
+    const { getByText, getByTestId } = renderWithTheme(
+      <VentionButton labelText="MachineApps Button" variant="outline" size="xx-large" data-testid="MachineApps" />
+    )
+    const typographyElement = getByText("MachineApps Button")
+    expect(typographyElement).toHaveClass("MuiTypography-heading24SemiBold")
+    const button = getByTestId("MachineApps")
+    expect(button).toHaveStyle("height: 80px")
+    expect(button).toHaveStyle(`border: 2px solid ${machineUiTheme.palette.border.main}`)
+  })
+
+  it.each<VentionButtonProps["variant"]>(["outline", "filled-brand", "text-only"])(
+    "should apply spinner for loading true property with right color",
+    variant => {
+      const { getByTestId } = renderWithTheme(<VentionButton labelText="Spin me" variant={variant} size="large" loading={true} />)
+      const button = getByTestId("spinnerContainer")
+      const spinner = getByTestId("mainSpinner")
+      expect(button).toContainElement(spinner)
+      expect(spinner).toHaveStyle("height: 32px")
+      expect(spinner).toHaveStyle("color: " + getSpinnerColor(variant))
+    }
+  )
+
+  describe("VentionButton Spinner Sizes", () => {
+    const sizes: VentionButtonProps["size"][] = ["small", "medium", "large", "x-large", "xx-large"]
+    const resultSpinnerSizes = ["16px", "16px", "32px", "32px", "40px"]
+    sizes.forEach(size => {
+      it(`should render spinner with correct size when button size is "${size}"`, () => {
+        const { getByTestId } = renderWithTheme(<VentionButton labelText="Loading" variant="outline" size={size} loading={true} />)
+        const spinner = getByTestId("mainSpinner")
+        expect(spinner).toHaveStyle(`height: ${resultSpinnerSizes[sizes.indexOf(size)]}`)
+      })
+    })
+  })
+})

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

@@ -0,0 +1,151 @@
+import { Button, Typography, Theme } from "@mui/material"
+import { tss } from "tss-react/mui"
+import { getButtonHeight, getButtonStylingPropertiesGivenProps, VentionButtonProps } from "./button-utils"
+import { forwardRef } from "react"
+import { VentionSpinner } from "../vention-spinner/vention-spinner"
+import { COLORS } from "../../theme/colors"
+import { machineUiTheme } from "../../theme/machine-ui-theme"
+
+export const VentionButton = forwardRef<HTMLButtonElement, VentionButtonProps>((props, ref) => {
+  const {
+    variant = "filled-brand",
+    size = "small",
+    fullWidth = false,
+    className,
+    disabled = false,
+    iconLeft,
+    iconRight,
+    onClick,
+    type = "button",
+    children,
+    labelText = "Button",
+    loading = false,
+    ...other
+  } = props
+
+  const { classes, cx } = useStyles({
+    variant: variant,
+    size: size,
+    fullWidth: fullWidth,
+  })
+
+  return (
+    <Button
+      ref={ref}
+      className={cx(classes.root, className)}
+      disableRipple
+      disabled={disabled}
+      onClick={onClick}
+      type={type}
+      startIcon={iconLeft}
+      endIcon={iconRight}
+      fullWidth={fullWidth}
+      {...other}
+    >
+      {loading ? (
+        <VentionSpinner color={getSpinnerColor(variant)} size={getSpinnerSize(size)} />
+      ) : (
+        <Typography variant={getButtonTypography(size)} className={classes.label}>
+          {children || labelText}
+        </Typography>
+      )}
+    </Button>
+  )
+})
+
+const useStyles = tss
+  .withParams<Pick<VentionButtonProps, "variant" | "size" | "fullWidth">>()
+  .create(({ variant, size, fullWidth, theme }) => {
+    const stylingProperties = getButtonStylingPropertiesGivenProps(variant, size, theme)
+    const padding = getPaddingGivenSize(size, theme)
+
+    return {
+      label: {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      },
+      root: {
+        height: getButtonHeight(size, theme),
+        backgroundColor: stylingProperties.backgroundColor,
+        color: stylingProperties.textColor,
+        borderRadius: stylingProperties.borderRadius,
+        border: stylingProperties.border,
+        padding,
+        ...(fullWidth && { width: "100%" }),
+        "&:hover": {
+          backgroundColor: stylingProperties.backgroundColorOnHover,
+        },
+        "&:active": {
+          backgroundColor: stylingProperties.backgroundColorOnPress,
+        },
+        "&:disabled": {
+          backgroundColor: stylingProperties.backgroundColorOnDisable,
+          color: stylingProperties.textColorOnDisable,
+          cursor: "not-allowed",
+          opacity: 0.5,
+        },
+        textTransform: "none",
+        gap: theme.spacing(2),
+        " .MuiButton-endIcon": {
+          marginLeft: theme.spacing(0),
+          color: theme.palette.icon.primary,
+          flexShrink: 0,
+        },
+        " .MuiButton-icon": {
+          margin: 0,
+        },
+      },
+    }
+  })
+
+function getButtonTypography(size: VentionButtonProps["size"]) {
+  switch (size) {
+    case "small":
+      return "uiText12SemiBold"
+    case "medium":
+    case "large":
+      return "uiText14SemiBold"
+    case "x-large":
+      return "heading18SemiBold"
+    case "xx-large":
+      return "heading24SemiBold"
+  }
+}
+
+function getSpinnerSize(size: VentionButtonProps["size"]): VentionButtonProps["size"] {
+  switch (size) {
+    case "small":
+    case "medium":
+      return "small"
+    case "large":
+      return "medium"
+    case "x-large":
+      return "medium"
+    case "xx-large":
+      return "large"
+  }
+}
+
+export function getSpinnerColor(variant: VentionButtonProps["variant"]): string {
+  if (variant === "shaded" || variant === "text-only" || variant === "outline") {
+    return COLORS.slate[500]
+  }
+
+  return machineUiTheme.palette.common.white
+}
+
+function getPaddingGivenSize(size: VentionButtonProps["size"], theme: Theme): string {
+  switch (size) {
+    case "small":
+      return "0px 10px"
+    case "medium":
+      return "0px 14px"
+    case "large":
+      return "0px 18px"
+    case "x-large":
+      return `0px ${theme.spacing(4)}`
+    case "xx-large":
+      return `0px ${theme.spacing(6)}`
+  }
+}

package/src/lib/components/vention-button/vention-dropdown-button/vention-dropdown-button.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { VentionDropdownButton } from "./vention-dropdown-button"
+
+const meta: Meta<typeof VentionDropdownButton> = {
+  component: VentionDropdownButton,
+  title: "Components/VentionDropdownButton",
+
+  argTypes: {
+    onClick: { action: "onClick executed!" },
+  },
+}
+export default meta
+type Story = StoryObj<typeof VentionDropdownButton>
+
+export const Primary: Story = {
+  args: {
+    variant: "simple",
+    size: "medium",
+    iconType: "settings-filled",
+  },
+}
+
+export const StrokeSizes: Story = {
+  args: {
+    variant: "shaded",
+    size: "medium",
+    iconType: "cube",
+    stroke: 3,
+  },
+}
+
+export const Shaded: Story = {
+  args: {
+    variant: "shaded",
+    size: "medium",
+    iconType: "settings-filled",
+  },
+}
+
+export const OutlinedAndSmall: Story = {
+  args: {
+    variant: "outline",
+    size: "small",
+    iconType: "settings-filled",
+  },
+}
+
+export const DestructiveAndOutline: Story = {
+  args: {
+    iconType: "settings-filled",
+    variant: "outline",
+    size: "large",
+    stroke: 3,
+  },
+}

package/src/lib/components/vention-button/vention-dropdown-button/vention-dropdown-button.test.tsx

@@ -0,0 +1,96 @@
+import "@testing-library/jest-dom"
+import { renderWithTheme } from "../../../testing/utils"
+import { VentionDropdownButton } from "./vention-dropdown-button"
+import { fireEvent, screen } from "@testing-library/react"
+import { machineUiTheme } from "../../../theme/machine-ui-theme"
+
+describe("VentionDropdownButton", () => {
+  const smallPadding = "4px"
+  const smallGap = "4px"
+
+  it.each([
+    ["small", { padding: smallPadding, gap: smallGap, iconSize: "16" }],
+    ["medium", { padding: "6px", gap: "6px", iconSize: "20" }],
+    ["large", { padding: "8px", gap: "6px", iconSize: "24" }],
+  ] as const)("should render a button of size %s with padding, gap and icon size: %s", async (size, expected) => {
+    renderWithTheme(<VentionDropdownButton size={size} variant="simple" iconType={"bug"} />)
+    const button = screen.getByRole("button")
+    const icon = await screen.findByTestId("icon-bug-root")
+
+    expect(button).toHaveStyle(`padding: ${expected.padding}`)
+    expect(button).toHaveStyle(`gap: ${expected.gap}`)
+    const styles = window.getComputedStyle(icon)
+
+    expect(styles.height).toBe(`${expected.iconSize}px`)
+    expect(styles.width).toBe(`${expected.iconSize}px`)
+  })
+
+  it("should render the button correctly with minimal props (default size small and simple)", () => {
+    renderWithTheme(<VentionDropdownButton iconType={"bug"} />)
+
+    const button = screen.getByRole("button")
+    expect(button).toBeInTheDocument()
+    expect(button).toHaveStyle(`padding: ${smallPadding}`)
+    expect(button).toHaveStyle(`gap: ${smallGap}`)
+  })
+
+  it("should render the button with colored content if contentColor is provided", async () => {
+    const contentColor = "red"
+    const label = "Mock label"
+    const { findByTestId } = renderWithTheme(<VentionDropdownButton iconType={"bug"} contentColor={contentColor} label={label} />)
+
+    const icon = await findByTestId("icon-bug")
+    const button = screen.getByRole("button")
+    const colorStyle = `color: ${contentColor}`
+    const labelElement = screen.getByText(label)
+
+    expect(button).toHaveStyle(colorStyle)
+    expect(icon).toHaveStyle(colorStyle)
+    expect(window.getComputedStyle(labelElement).color).toBe(contentColor)
+  })
+
+  it("should have a badge when badgeText is provided", () => {
+    const badgeText = "Mock badge"
+    renderWithTheme(<VentionDropdownButton iconType={"bug"} badgeText={badgeText} />)
+
+    const badge = screen.getByText(badgeText)
+    expect(badge).toBeInTheDocument()
+  })
+
+  it("should not have a span when label is not provided", () => {
+    const { container } = renderWithTheme(<VentionDropdownButton iconType={"bug"} />)
+    expect(container.querySelector("span")).toBeNull()
+  })
+
+  it("should have a label when label is provided", () => {
+    const label = "Mock label"
+    const { container } = renderWithTheme(<VentionDropdownButton iconType={"bug"} label={label} />)
+    const labelElement = screen.getByText(label)
+    expect(container.querySelector("span")).not.toBeNull()
+    expect(labelElement).toBeInTheDocument()
+  })
+
+  it.each(
+    // prettier-ignore
+    [
+      ["simple", { active: machineUiTheme.palette.button.shadedPressed, hover: machineUiTheme.palette.button.shadedHover, disabled: "transparent" }],
+      ["outline", { active: machineUiTheme.palette.button.secondaryPressed, hover: machineUiTheme.palette.button.shadedHover, disabled: machineUiTheme.palette.common.white }],
+      ["shaded", { active: machineUiTheme.palette.button.shadedPressed, hover: machineUiTheme.palette.button.shadedHover, disabled: machineUiTheme.palette.button.shaded }]
+    ] as const
+  )("should have a background color when active", (variant, expected) => {
+    renderWithTheme(<VentionDropdownButton iconType={"bug"} variant={variant} />)
+
+    const button = screen.getByRole("button")
+    button.focus()
+    button.click()
+
+    expect(button).toHaveStyle(`background-color: ${expected.active}`)
+
+    button.blur()
+    fireEvent.mouseOver(button)
+    expect(button).toHaveStyle(`background-color: ${expected.hover}`)
+
+    button.setAttribute("disabled", "true")
+    expect(button).toHaveStyle(`background-color: ${expected.disabled}`)
+  })
+})

package/src/lib/components/vention-button/vention-dropdown-button/vention-dropdown-button.tsx

@@ -0,0 +1,94 @@
+import { ButtonProps, IconButton, Typography, TypographyOwnProps } from "@mui/material"
+import { tss } from "tss-react/mui"
+import { Sizes, StrictExtract } from "../../../theme/machine-ui-theme"
+import { IconChevronDown } from "@tabler/icons-react"
+import { getButtonHeight, getButtonStylingPropertiesGivenProps } from "../button-utils"
+import { VentionBadge } from "../../vention-badge/vention-badge"
+import { IconType, VentionIcon } from "../../vention-icon/vention-icon"
+
+export interface VentionDropdownButtonProps extends Omit<ButtonProps, "size" | "variant" | "color"> {
+  variant?: "simple" | "outline" | "shaded"
+  size?: StrictExtract<Sizes, "small" | "medium" | "large">
+  iconType: IconType
+  stroke?: number | string
+  disabled?: boolean
+  className?: string
+  label?: string
+  badgeText?: string
+  contentColor?: string
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
+}
+
+export const VentionDropdownButton = ({
+  variant = "simple",
+  size = "small",
+  className,
+  disabled = false,
+  onClick,
+  iconType,
+  badgeText,
+  label,
+  stroke = 1,
+  contentColor,
+  ...other
+}: VentionDropdownButtonProps) => {
+  const { classes, cx } = useStyles({ variant, size, contentColor })
+
+  return (
+    <IconButton className={cx(classes.root, className)} disableRipple disabled={disabled} onClick={onClick} {...other}>
+      <VentionIcon type={iconType} size={ICON_SIZES[size]} color={contentColor} />
+      {label && (
+        <Typography className={classes.label} variant={LABEL_VARIANTS[size]}>
+          {label}
+        </Typography>
+      )}
+      {badgeText && <VentionBadge size="small" color="slate" text={badgeText} variant="filled" className={classes.badge} />}
+      <IconChevronDown stroke={stroke} size={16} color={contentColor} />
+    </IconButton>
+  )
+}
+
+const useStyles = tss
+  .withParams<Pick<VentionDropdownButtonProps, "variant" | "size" | "contentColor">>()
+  .create(({ variant, size, contentColor, theme }) => {
+    const stylingProperties = getButtonStylingPropertiesGivenProps(variant, size, theme)
+    const color = contentColor ?? theme.palette.text.primary
+
+    return {
+      root: {
+        gap: BUTTON_GAPS[size],
+        height: getButtonHeight(size, theme),
+        padding: BUTTON_PADDINGS[size],
+        backgroundColor: stylingProperties.backgroundColor,
+        borderColor: theme.palette.border.main,
+        borderRadius: stylingProperties.borderRadius,
+        outline: stylingProperties.border,
+        color,
+        "&:hover": {
+          backgroundColor: stylingProperties.backgroundColorOnHover,
+        },
+        "&:active": {
+          backgroundColor: stylingProperties.backgroundColorOnPress,
+        },
+        "&:disabled": {
+          backgroundColor: stylingProperties.backgroundColorOnDisable,
+          color: stylingProperties.textColorOnDisable,
+          cursor: "not-allowed",
+        },
+      },
+      label: { backgroundColor: "transparent", color },
+      badge: {
+        maxWidth: "100px",
+      },
+    }
+  })
+
+const LABEL_VARIANTS: Record<NonNullable<VentionDropdownButtonProps["size"]>, TypographyOwnProps["variant"]> = {
+  small: "uiText12Medium",
+  medium: "uiText14Medium",
+  large: "uiText14Medium",
+}
+
+const ICON_SIZES = { small: 16, medium: 20, large: 24 } as const
+const BUTTON_PADDINGS = { small: "4px", medium: "6px", large: "8px" } as const
+const BUTTON_GAPS = { small: "4px", medium: "6px", large: "6px" } as const