@vector-im/compound-web 8.1.2 → 8.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-web",
-  "version": "8.1.2",
+  "version": "8.2.1",
   "description": "Compound components for the Web",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -8,10 +8,10 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.js",
+      "style": "./dist/style.css",
       "types": "./dist/index.d.ts",
-      "style": "./dist/style.css"
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
     },
     "./dist/style.css": "./dist/style.css"
   },
@@ -27,8 +27,9 @@
     "lint:ts": "tsc --noEmit -p .",
     "lint:styles": "npx stylelint 'src/**/*.css'",
     "test": "vitest",
-    "e2e": "playwright test",
-    "e2e:docker": "docker run --rm --network host --ipc=host --security-opt seccomp=playwright/seccomp_profile.json -v $(pwd)/../:/work/ -v /var/run/docker.sock:/var/run/docker.sock -v /tmp/:/tmp/ --init -it $(docker build --build-arg UID=$(id -u) --build-arg GID=$(id -g) -q playwright)",
+    "e2e": "yarn build-storybook && playwright test",
+    "e2e:docker": "yarn build-storybook && docker run --rm --network host --ipc=host --security-opt seccomp=playwright/seccomp_profile.json -v $(pwd)/../:/work/ -v /var/run/docker.sock:/var/run/docker.sock -v /tmp/:/tmp/ --init -it $(docker build --build-arg UID=$(id -u) --build-arg GID=$(id -g) -q playwright)",
+    "e2e:podman": "yarn build-storybook && podman run --rm --network host --ipc=host --security-opt seccomp=playwright/seccomp_profile.json -v $(pwd)/../:/work/ -v /tmp/:/tmp/ --userns=keep-id --init -it $(podman build --build-arg UID=$(id -u) --build-arg GID=$(id -g) -q playwright)",
     "build-storybook": "storybook build",
     "storybook": "storybook dev -p 6006",
     "gen:component": "node scripts/genComponent.js"
@@ -50,57 +51,54 @@
   },
   "homepage": "https://github.com/vector-im/compound-web#readme",
   "devDependencies": {
+    "@element-hq/element-web-playwright-common": "^1.4.2",
     "@fontsource/inconsolata": "^5.0.8",
     "@fontsource/inter": "^5.0.8",
     "@playwright/test": "^1.41.1",
-    "@storybook/addon-a11y": "^8.1.1",
-    "@storybook/addon-designs": "8.0.4",
-    "@storybook/addon-essentials": "^8.1.1",
-    "@storybook/addon-interactions": "^8.1.1",
-    "@storybook/addon-links": "^8.1.1",
-    "@storybook/addon-themes": "^8.1.1",
-    "@storybook/manager-api": "^8.1.1",
-    "@storybook/react": "^8.1.1",
-    "@storybook/react-vite": "^8.1.1",
-    "@storybook/test": "^8.1.1",
+    "@storybook/addon-a11y": "^9.0.16",
+    "@storybook/addon-designs": "10.0.2",
+    "@storybook/addon-docs": "^9.0.16",
+    "@storybook/addon-links": "^9.0.16",
+    "@storybook/addon-themes": "^9.0.16",
+    "@storybook/react-vite": "^9.0.16",
     "@testing-library/dom": "^10.3.2",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@tsconfig/node20": "^20.1.4",
-    "@tsconfig/vite-react": "^3.0.0",
+    "@tsconfig/vite-react": "^7.0.0",
     "@types/eslint": "^9.0.0",
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
-    "@vector-im/compound-design-tokens": "^4.0.0",
-    "@vitejs/plugin-react": "^4.0.4",
-    "@vitest/coverage-v8": "^3.0.0",
+    "@vector-im/compound-design-tokens": "^6.0.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "@vitest/coverage-v8": "^3.2.4",
     "browserslist-to-esbuild": "^2.0.0",
     "eslint": "^8.49.0",
     "eslint-config-prettier": "^10.0.0",
-    "eslint-plugin-matrix-org": "^1.2.1",
+    "eslint-plugin-matrix-org": "^2.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-storybook": "^0.11.0",
-    "jsdom": "^26.0.0",
-    "prettier": "3.4.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "eslint-plugin-storybook": "^9.0.16",
+    "jsdom": "^26.1.0",
+    "prettier": "3.6.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^6.0.0",
     "serve": "^14.2.1",
-    "storybook": "^8.1.1",
+    "storybook": "^9.0.16",
     "stylelint": "^16.13.2",
-    "stylelint-config-standard": "^37.0.0",
+    "stylelint-config-standard": "^39.0.0",
     "stylelint-plugin-defensive-css": "^1.0.0",
     "stylelint-use-logical": "^2.1.0",
     "stylelint-value-no-unknown-custom-properties": "^6.0.0",
     "typescript": "^5.2.2",
-    "vite": "^6.0.0",
-    "vite-plugin-dts": "^4.0.0",
-    "vitest": "^3.0.0"
+    "vite": "^7.0.3",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.2.4"
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.0",
@@ -117,7 +115,7 @@
     "@fontsource/inconsolata": "^5",
     "@fontsource/inter": "^5",
     "@types/react": "*",
-    "@vector-im/compound-design-tokens": ">=1.6.1 <5.0.0",
+    "@vector-im/compound-design-tokens": ">=1.6.1 <7.0.0",
     "react": "^18 || ^19.0.0"
   },
   "peerDependenciesMeta": {

package/src/components/ActivityMarker/Pill.tsx

@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { HTMLProps, JSX } from "react";
+import React, { type HTMLProps, type JSX } from "react";
 import styles from "./Pill.module.css";
 
 export function Pill({

package/src/components/ActivityMarker/Unread.tsx

@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { HTMLProps } from "react";
+import React, { type HTMLProps } from "react";
 import styles from "./Unread.module.css";
 
 export function Unread(props: HTMLProps<HTMLDivElement>) {

package/src/components/ActivityMarker/UnreadCounter.tsx

@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { HTMLProps } from "react";
+import React, { type HTMLProps } from "react";
 import styles from "./UnreadCounter.module.css";
 
 interface UnreadCounterProps extends HTMLProps<HTMLDivElement> {

package/src/components/Alert/Alert.tsx

@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classNames from "classnames";
-import React, { PropsWithChildren, useCallback } from "react";
+import React, { type PropsWithChildren, useCallback } from "react";
 
 import CheckCircleIcon from "@vector-im/compound-design-tokens/assets/web/icons/check-circle";
 import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";

package/src/components/Avatar/Avatar.tsx

@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classnames from "classnames";
-import React, { ComponentProps, forwardRef } from "react";
+import React, { type ComponentProps, forwardRef } from "react";
 import { getInitialLetter } from "../../utils/string";
 import styles from "./Avatar.module.css";
 import { useIdColorHash } from "./useIdColorHash";

package/src/components/Badge/Badge.tsx

@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classnames from "classnames";
-import React, { PropsWithChildren } from "react";
+import React, { type PropsWithChildren } from "react";
 import styles from "./Badge.module.css";
 import { Typography } from "../Typography/Typography";
 

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -5,7 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { HTMLProps, JSX, MouseEventHandler, KeyboardEvent } from "react";
+import React, {
+  type HTMLProps,
+  type JSX,
+  type MouseEventHandler,
+  type KeyboardEvent,
+} from "react";
 import { IconButton } from "../Button";
 import Chevron from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left";
 import styles from "./Breadcrumb.module.css";

package/src/components/Button/Button.tsx

@@ -7,14 +7,14 @@ Please see LICENSE files in the repository root for full details.
 
 import classNames from "classnames";
 import React, {
-  ComponentType,
-  PropsWithChildren,
+  type ComponentType,
+  type PropsWithChildren,
   forwardRef,
-  ForwardedRef,
-  Ref,
+  type ForwardedRef,
+  type Ref,
 } from "react";
 import styles from "./Button.module.css";
-import { UnstyledButton, UnstyledButtonPropsFor } from "./UnstyledButton";
+import { UnstyledButton, type UnstyledButtonPropsFor } from "./UnstyledButton";
 
 interface ButtonComponent {
   // With the explicit `as` prop

package/src/components/Button/IconButton/IconButton.tsx

@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { PropsWithChildren, forwardRef } from "react";
+import React, { type PropsWithChildren, forwardRef } from "react";
 import classnames from "classnames";
 
 import styles from "./IconButton.module.css";
-import { UnstyledButton, UnstyledButtonPropsFor } from "../UnstyledButton";
+import { UnstyledButton, type UnstyledButtonPropsFor } from "../UnstyledButton";
 import { IndicatorIcon } from "../../Icon/IndicatorIcon/IndicatorIcon";
 import { Tooltip } from "../../Tooltip/Tooltip";
 

package/src/components/Button/UnstyledButton.tsx

@@ -5,7 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { PropsWithChildren, forwardRef, ForwardedRef, Ref } from "react";
+import React, {
+  type PropsWithChildren,
+  forwardRef,
+  type ForwardedRef,
+  type Ref,
+} from "react";
 
 interface ButtonComponent {
   // With the explicit `as` prop

package/src/components/ChatFilter/ChatFilter.tsx

@@ -5,10 +5,10 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { ForwardedRef, forwardRef } from "react";
+import React, { type ForwardedRef, forwardRef } from "react";
 import {
   UnstyledButton,
-  UnstyledButtonPropsFor,
+  type UnstyledButtonPropsFor,
 } from "../Button/UnstyledButton";
 import styles from "./ChatFilter.module.css";
 

package/src/components/Dropdown/Dropdown.tsx

@@ -10,17 +10,17 @@ import Check from "@vector-im/compound-design-tokens/assets/web/icons/check";
 import Error from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
 
 import React, {
-  Dispatch,
+  type Dispatch,
   forwardRef,
-  HTMLProps,
+  type HTMLProps,
   memo,
-  RefObject,
-  SetStateAction,
+  type RefObject,
+  type SetStateAction,
   useCallback,
   useEffect,
   useRef,
   useState,
-  KeyboardEvent,
+  type KeyboardEvent,
   useMemo,
 } from "react";
 

package/src/components/Form/Controls/Action/Action.tsx

@@ -6,7 +6,12 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classnames from "classnames";
-import React, { forwardRef, ComponentRef, ComponentProps, useId } from "react";
+import React, {
+  forwardRef,
+  type ComponentRef,
+  type ComponentProps,
+  useId,
+} from "react";
 import styles from "./Action.module.css";
 import { TextInput } from "../Text";
 

package/src/components/Form/Controls/Checkbox/Checkbox.tsx

@@ -8,7 +8,11 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classnames from "classnames";
-import React, { ComponentProps, ComponentRef, forwardRef } from "react";
+import React, {
+  type ComponentProps,
+  type ComponentRef,
+  forwardRef,
+} from "react";
 import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
 import { Control } from "@radix-ui/react-form";
 

package/src/components/Form/Controls/MFA/MFA.tsx

@@ -8,10 +8,10 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, {
-  ComponentProps,
-  ComponentRef,
+  type ComponentProps,
+  type ComponentRef,
   forwardRef,
-  PropsWithoutRef,
+  type PropsWithoutRef,
 } from "react";
 
 import styles from "./MFA.module.css";

package/src/components/Form/Controls/Password/Password.tsx

@@ -5,9 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 import React, {
-  ComponentRef,
+  type ComponentRef,
   forwardRef,
-  ComponentProps,
+  type ComponentProps,
   useReducer,
 } from "react";
 import { Control } from "@radix-ui/react-form";

package/src/components/Form/Controls/Radio/Radio.tsx

@@ -9,10 +9,10 @@ Please see LICENSE files in the repository root for full details.
 
 import classnames from "classnames";
 import React, {
-  ComponentProps,
-  ComponentRef,
+  type ComponentProps,
+  type ComponentRef,
   forwardRef,
-  PropsWithChildren,
+  type PropsWithChildren,
 } from "react";
 import { Control } from "@radix-ui/react-form";
 

package/src/components/Form/Controls/SettingsToggle/SettingsToggle.tsx

@@ -6,10 +6,11 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import {
-  ComponentProps,
-  ComponentRef,
+  type ComponentProps,
+  type ComponentRef,
   forwardRef,
-  PropsWithChildren,
+  type PropsWithChildren,
+  useId,
 } from "react";
 import { ToggleInput } from "../Toggle";
 import { Label } from "../../Label";
@@ -48,13 +49,15 @@ export const SettingsToggleInput = forwardRef<
   { className, label, helpMessage, disabledMessage, name, ...props },
   ref,
 ) {
+  const generatedId = useId();
+  const id = props.id ?? generatedId;
   const content = (
     <InlineField
       className={className}
       name={name}
-      control={<ToggleInput ref={ref} {...props} />}
+      control={<ToggleInput id={id} ref={ref} {...props} />}
     >
-      <Label>{label}</Label>
+      <Label htmlFor={id}>{label}</Label>
       {helpMessage && <HelpMessage>{helpMessage}</HelpMessage>}
       {disabledMessage && props.disabled && (
         <HelpMessage>{disabledMessage}</HelpMessage>

package/src/components/Form/Controls/Text/Text.tsx

@@ -7,7 +7,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { forwardRef, ComponentProps, ComponentRef } from "react";
+import React, {
+  forwardRef,
+  type ComponentProps,
+  type ComponentRef,
+} from "react";
 import { Control } from "@radix-ui/react-form";
 
 import styles from "./Text.module.css";

package/src/components/Form/Controls/Toggle/Toggle.tsx

@@ -9,10 +9,10 @@ Please see LICENSE files in the repository root for full details.
 
 import classnames from "classnames";
 import React, {
-  ComponentProps,
-  ComponentRef,
+  type ComponentProps,
+  type ComponentRef,
   forwardRef,
-  PropsWithChildren,
+  type PropsWithChildren,
 } from "react";
 import styles from "./Toggle.module.css";
 import { Control } from "@radix-ui/react-form";
@@ -34,7 +34,13 @@ export const ToggleInput = forwardRef<
   const classes = classnames(styles.container, className);
   return (
     <div className={classes}>
-      <input ref={ref} className={styles.input} {...props} type="checkbox" />
+      <input
+        role="switch"
+        ref={ref}
+        className={styles.input}
+        {...props}
+        type="checkbox"
+      />
       <div className={styles.ui} />
     </div>
   );

package/src/components/Form/Field.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { forwardRef, PropsWithChildren } from "react";
+import React, { forwardRef, type PropsWithChildren } from "react";
 import { Field as RadixField } from "@radix-ui/react-form";
 
 import styles from "./form.module.css";

package/src/components/Form/InlineField.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { forwardRef, ReactElement } from "react";
+import React, { forwardRef, type ReactElement } from "react";
 import { Field } from "@radix-ui/react-form";
 
 import styles from "./form.module.css";

package/src/components/Form/Label.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { PropsWithChildren, forwardRef } from "react";
+import React, { type PropsWithChildren, forwardRef } from "react";
 import { Label as RadixLabel } from "@radix-ui/react-form";
 
 import styles from "./form.module.css";

package/src/components/Form/Message.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { forwardRef, PropsWithChildren } from "react";
+import React, { forwardRef, type PropsWithChildren } from "react";
 import { Message } from "@radix-ui/react-form";
 import CheckCircleSolidIcon from "@vector-im/compound-design-tokens/assets/web/icons/check-circle-solid";
 import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";

package/src/components/Form/Root.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { forwardRef, PropsWithChildren } from "react";
+import React, { forwardRef, type PropsWithChildren } from "react";
 import { Root as RadixRoot } from "@radix-ui/react-form";
 
 import styles from "./form.module.css";

package/src/components/Form/Submit.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { forwardRef, ComponentPropsWithoutRef } from "react";
+import React, { forwardRef, type ComponentPropsWithoutRef } from "react";
 import { Submit as RadixSubmit } from "@radix-ui/react-form";
 
 import { Button } from "../Button/Button";

package/src/components/Glass/Glass.tsx

@@ -6,8 +6,8 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, {
-  ComponentPropsWithoutRef,
-  ReactNode,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
   forwardRef,
   Children,
 } from "react";

package/src/components/Icon/BigIcon/BigIcon.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { JSX, PropsWithChildren } from "react";
+import React, { type JSX, type PropsWithChildren } from "react";
 import styles from "./BigIcon.module.css";
 import classNames from "classnames";
 

package/src/components/Icon/IndicatorIcon/IndicatorIcon.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { PropsWithChildren, forwardRef } from "react";
+import React, { type PropsWithChildren, forwardRef } from "react";
 import classnames from "classnames";
 
 import styles from "./IndicatorIcon.module.css";

package/src/components/InlineSpinner/InlineSpinner.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { SVGAttributes, forwardRef } from "react";
+import React, { type SVGAttributes, forwardRef } from "react";
 import styles from "./InlineSpinner.module.css";
 import SpinnerIcon from "@vector-im/compound-design-tokens/assets/web/icons/spinner";
 

package/src/components/Link/Link.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { forwardRef, PropsWithChildren } from "react";
+import React, { forwardRef, type PropsWithChildren } from "react";
 import styles from "./Link.module.css";
 import classNames from "classnames";
 

package/src/components/Menu/CheckboxMenuItem.tsx

@@ -5,7 +5,12 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { ComponentProps, forwardRef, useCallback, useId } from "react";
+import React, {
+  type ComponentProps,
+  forwardRef,
+  useCallback,
+  useId,
+} from "react";
 import { MenuItem } from "./MenuItem";
 import { CheckboxInput } from "../Form";
 

package/src/components/Menu/ContextMenu.tsx

@@ -5,7 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { FC, ReactNode, useCallback, useMemo, useState } from "react";
+import React, {
+  type FC,
+  type ReactNode,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
 import {
   Root,
   Trigger,
@@ -18,7 +24,11 @@ import { Drawer } from "vaul";
 import classnames from "classnames";
 import drawerStyles from "./DrawerMenu.module.css";
 import contextStyles from "./ContextMenu.module.css";
-import { MenuContext, MenuData, MenuItemWrapperProps } from "./MenuContext";
+import {
+  MenuContext,
+  type MenuData,
+  type MenuItemWrapperProps,
+} from "./MenuContext";
 import { DrawerMenu } from "./DrawerMenu";
 import { getPlatform } from "../../utils/platform";
 

package/src/components/Menu/DrawerMenu.module.css

@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
 
   /* TODO: This value is used across modals and menu drawers, so would be worth
   tokenizing */
-  background: rgba(3 12 27 / 52.8%);
+  background: rgb(3 12 27 / 52.8%);
 }
 
 .drawer {

package/src/components/Menu/DrawerMenu.tsx

@@ -5,7 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { ComponentPropsWithoutRef, ReactNode, forwardRef } from "react";
+import React, {
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+  forwardRef,
+} from "react";
 import styles from "./DrawerMenu.module.css";
 import { getPlatform } from "../../utils/platform";
 import classNames from "classnames";

package/src/components/Menu/FloatingMenu.module.css

@@ -15,7 +15,7 @@ Please see LICENSE files in the repository root for full details.
   outline: var(--cpd-border-width-1) solid
     var(--cpd-color-border-interactive-secondary) !important;
   outline-offset: calc(-1 * var(--cpd-border-width-1));
-  box-shadow: 0 4px 24px 0 rgba(0 0 0 / 10%);
+  box-shadow: 0 4px 24px 0 rgb(0 0 0 / 10%);
   inline-size: fit-content;
   max-inline-size: 320px;
   display: flex;

package/src/components/Menu/FloatingMenu.tsx

@@ -7,8 +7,8 @@ Please see LICENSE files in the repository root for full details.
 
 import classnames from "classnames";
 import React, {
-  ComponentPropsWithoutRef,
-  ReactNode,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
   forwardRef,
   useId,
 } from "react";