@vector-im/compound-web 9.0.0 → 9.1.0

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,17 @@
+import { default as React, ComponentType, MouseEventHandler } from 'react';
+export declare const Toast: React.ForwardRefExoticComponent<{
+    className?: string;
+    /**
+     * An icon to display within the button.
+     */
+    Icon?: ComponentType<React.SVGAttributes<SVGElement>>;
+    /**
+     * Whether to show the action button. If true, an action button will be shown on the right side of the toast.
+     */
+    onClose?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * The tooltip to show on the close button. This is only used if `onClose` is provided.
+     */
+    tooltip?: string;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Toast.d.ts.map

package/dist/components/Toast/Toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAEZ,KAAK,aAAa,EAClB,KAAK,iBAAiB,EAEvB,MAAM,OAAO,CAAC;AAsBf,eAAO,MAAM,KAAK;gBAfJ,MAAM;IAClB;;OAEG;WACI,aAAa,CAAC,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACrD;;OAEG;cACO,iBAAiB,CAAC,iBAAiB,CAAC;IAC9C;;OAEG;cACO,MAAM;+EAuDhB,CAAC"}

package/dist/components/Toast/Toast.js

@@ -1,15 +1,39 @@
+import { Text } from "../Typography/Text.js";
+import { IconButton } from "../Button/IconButton/IconButton.js";
 import Toast_module_default from "./Toast.module.js";
 import classNames from "classnames";
 import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Toast/Toast.tsx
-var Toast = forwardRef(function Toast({ children, className, ...props }, ref) {
-	const classes = classNames(Toast_module_default["toast-container"], className);
-	return /* @__PURE__ */ jsx("div", {
+var Toast = forwardRef(function Toast({ children, className, Icon, onClose, tooltip, ...props }, ref) {
+	const hasCloseButton = Boolean(onClose);
+	const classes = classNames(Toast_module_default["toast-container"], className, { [Toast_module_default["has-close"]]: hasCloseButton });
+	return /* @__PURE__ */ jsxs(Text, {
 		...props,
+		as: "div",
+		size: "sm",
+		weight: "medium",
 		className: classes,
 		ref,
-		children
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: Toast_module_default.content,
+			children: [Icon && /* @__PURE__ */ jsx(Icon, {
+				className: Toast_module_default.icon,
+				width: 20,
+				height: 20,
+				"aria-hidden": true
+			}), children]
+		}), hasCloseButton && /* @__PURE__ */ jsx(IconButton, {
+			size: "24px",
+			kind: "secondary",
+			noBackground: true,
+			tooltip,
+			tooltipPlacement: "right",
+			className: Toast_module_default.close,
+			onClick: onClose,
+			children: /* @__PURE__ */ jsx(CloseIcon, {})
+		})]
 	});
 });
 //#endregion

package/dist/components/Toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","names":[],"sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, { forwardRef, type PropsWithChildren } from \"react\";\nimport styles from \"./Toast.module.css\";\n\ntype ToastProps = {\n  className?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n  { children, className, ...props }: PropsWithChildren<ToastProps>,\n  ref,\n) {\n  const classes = classnames(styles[\"toast-container\"], className);\n  return (\n    <div {...props} className={classes} ref={ref}>\n      {children}\n    </div>\n  );\n});\n"],"mappings":";;;;;AAeA,IAAa,QAAQ,WAAuC,SAAS,MACnE,EAAE,UAAU,WAAW,GAAG,SAC1B,KACA;CACA,MAAM,UAAU,WAAW,qBAAO,oBAAoB,UAAU;AAChE,QACE,oBAAC,OAAD;EAAK,GAAI;EAAO,WAAW;EAAc;EACtC;EACG,CAAA;EAER"}
+{"version":3,"file":"Toast.js","names":[],"sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, {\n  forwardRef,\n  type ComponentType,\n  type MouseEventHandler,\n  type PropsWithChildren,\n} from \"react\";\nimport styles from \"./Toast.module.css\";\nimport { Text } from \"../Typography/Text\";\nimport { IconButton } from \"../Button\";\nimport CloseIcon from \"@vector-im/compound-design-tokens/assets/web/icons/close\";\n\ntype ToastProps = {\n  className?: string;\n  /**\n   * An icon to display within the button.\n   */\n  Icon?: ComponentType<React.SVGAttributes<SVGElement>>;\n  /**\n   * Whether to show the action button. If true, an action button will be shown on the right side of the toast.\n   */\n  onClose?: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to show on the close button. This is only used if `onClose` is provided.\n   */\n  tooltip?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n  {\n    children,\n    className,\n    Icon,\n    onClose,\n    tooltip,\n    ...props\n  }: PropsWithChildren<ToastProps>,\n  ref,\n) {\n  const hasCloseButton = Boolean(onClose);\n\n  const classes = classnames(styles[\"toast-container\"], className, {\n    [styles[\"has-close\"]]: hasCloseButton,\n  });\n\n  return (\n    <Text\n      {...props}\n      as=\"div\"\n      size=\"sm\"\n      weight=\"medium\"\n      className={classes}\n      ref={ref}\n    >\n      <div className={styles.content}>\n        {Icon && (\n          <Icon\n            className={styles.icon}\n            width={20}\n            height={20}\n            aria-hidden={true}\n          />\n        )}\n        {children}\n      </div>\n      {hasCloseButton && (\n        <IconButton\n          size=\"24px\"\n          kind=\"secondary\"\n          noBackground={true}\n          tooltip={tooltip}\n          tooltipPlacement=\"right\"\n          className={styles.close}\n          onClick={onClose}\n        >\n          <CloseIcon />\n        </IconButton>\n      )}\n    </Text>\n  );\n});\n"],"mappings":";;;;;;;;AAmCA,IAAa,QAAQ,WAAuC,SAAS,MACnE,EACE,UACA,WACA,MACA,SACA,SACA,GAAG,SAEL,KACA;CACA,MAAM,iBAAiB,QAAQ,QAAQ;CAEvC,MAAM,UAAU,WAAW,qBAAO,oBAAoB,WAAW,GAC9D,qBAAO,eAAe,gBACxB,CAAC;AAEF,QACE,qBAAC,MAAD;EACE,GAAI;EACJ,IAAG;EACH,MAAK;EACL,QAAO;EACP,WAAW;EACN;YANP,CAQE,qBAAC,OAAD;GAAK,WAAW,qBAAO;aAAvB,CACG,QACC,oBAAC,MAAD;IACE,WAAW,qBAAO;IAClB,OAAO;IACP,QAAQ;IACR,eAAa;IACb,CAAA,EAEH,SACG;MACL,kBACC,oBAAC,YAAD;GACE,MAAK;GACL,MAAK;GACL,cAAc;GACL;GACT,kBAAiB;GACjB,WAAW,qBAAO;GAClB,SAAS;aAET,oBAAC,WAAD,EAAa,CAAA;GACF,CAAA,CAEV;;EAET"}

package/dist/components/Toast/Toast.module.cjs

@@ -1,5 +1,14 @@
 //#region src/components/Toast/Toast.module.css
-var Toast_module_default = { "toast-container": "_toast-container_1xofk_8" };
+var icon = "_icon_1ysb3_26";
+var content = "_content_1ysb3_34";
+var close = "_close_1ysb3_41";
+var Toast_module_default = {
+	"toast-container": "_toast-container_1ysb3_8",
+	icon,
+	"has-close": "_has-close_1ysb3_30",
+	content,
+	close
+};
 //#endregion
 exports.default = Toast_module_default;
 

package/dist/components/Toast/Toast.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.module.cjs","names":[],"sources":["../../../src/components/Toast/Toast.module.css"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.toast-container {\n  inline-size: fit-content;\n  background-color: var(--cpd-color-alpha-gray-1300);\n  color: var(--cpd-color-text-on-solid-primary);\n  border-radius: 99px;\n  font-size: var(--cpd-font-body-sm-medium);\n  padding: var(--cpd-space-2x) var(--cpd-space-4x);\n}\n\n@media (forced-colors: active) {\n  .toast-container {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Toast.module.cjs","names":[],"sources":["../../../src/components/Toast/Toast.module.css"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.toast-container {\n  inline-size: fit-content;\n  background-color: var(--cpd-color-bg-action-primary-rest);\n  color: var(--cpd-color-text-on-solid-primary);\n  border-radius: 99px;\n  padding: var(--cpd-space-2x) var(--cpd-space-4x);\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  gap: var(--cpd-space-2x);\n}\n\n@media (forced-colors: active) {\n  .toast-container {\n    outline: 1px solid transparent;\n  }\n}\n\n.icon {\n  flex-shrink: 0;\n}\n\n.has-close {\n  gap: var(--cpd-space-3x);\n}\n\n.content {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: flex-start;\n  gap: var(--cpd-space-2x);\n}\n\n.close {\n  align-self: flex-start;\n  padding: var(--cpd-space-0-5x) !important;\n\n  &:not(:hover, :focus-visible) {\n    * {\n      /* Override default color of icon button. The container background is different than the default canvas color */\n      color: var(--cpd-color-icon-on-solid-primary) !important;\n    }\n  }\n}\n"],"mappings":""}

package/dist/components/Toast/Toast.module.js

@@ -1,5 +1,14 @@
 //#region src/components/Toast/Toast.module.css
-var Toast_module_default = { "toast-container": "_toast-container_1xofk_8" };
+var icon = "_icon_1ysb3_26";
+var content = "_content_1ysb3_34";
+var close = "_close_1ysb3_41";
+var Toast_module_default = {
+	"toast-container": "_toast-container_1ysb3_8",
+	icon,
+	"has-close": "_has-close_1ysb3_30",
+	content,
+	close
+};
 //#endregion
 export { Toast_module_default as default };
 

package/dist/components/Toast/Toast.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.module.js","names":[],"sources":["../../../src/components/Toast/Toast.module.css"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.toast-container {\n  inline-size: fit-content;\n  background-color: var(--cpd-color-alpha-gray-1300);\n  color: var(--cpd-color-text-on-solid-primary);\n  border-radius: 99px;\n  font-size: var(--cpd-font-body-sm-medium);\n  padding: var(--cpd-space-2x) var(--cpd-space-4x);\n}\n\n@media (forced-colors: active) {\n  .toast-container {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Toast.module.js","names":[],"sources":["../../../src/components/Toast/Toast.module.css"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.toast-container {\n  inline-size: fit-content;\n  background-color: var(--cpd-color-bg-action-primary-rest);\n  color: var(--cpd-color-text-on-solid-primary);\n  border-radius: 99px;\n  padding: var(--cpd-space-2x) var(--cpd-space-4x);\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  gap: var(--cpd-space-2x);\n}\n\n@media (forced-colors: active) {\n  .toast-container {\n    outline: 1px solid transparent;\n  }\n}\n\n.icon {\n  flex-shrink: 0;\n}\n\n.has-close {\n  gap: var(--cpd-space-3x);\n}\n\n.content {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: flex-start;\n  gap: var(--cpd-space-2x);\n}\n\n.close {\n  align-self: flex-start;\n  padding: var(--cpd-space-0-5x) !important;\n\n  &:not(:hover, :focus-visible) {\n    * {\n      /* Override default color of icon button. The container background is different than the default canvas color */\n      color: var(--cpd-color-icon-on-solid-primary) !important;\n    }\n  }\n}\n"],"mappings":""}

package/dist/components/Tooltip/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAaA,OAAc,EACZ,KAAK,iBAAiB,EAEtB,KAAK,GAAG,EAOT,MAAM,OAAO,CAAC;AAIf,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,kBAAkB,EACvB,KAAK,YAAY,EAElB,MAAM,cAAc,CAAC;AAItB,KAAK,YAAY,GAAG,IAAI,CAAC,qBAAqB,EAAE,sBAAsB,CAAC,GACrE,CAAC,YAAY,GAAG,kBAAkB,CAAC,GAAG;IACpC;;;;;;;;OAQG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,6BAA6B,CAAC,EAAE,MAAM,CAAC;CACxC,CAAC;AAMJ;;GAEG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,oBAA2B,EAC3B,6BAAiC,EACjC,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,YAAY,CAAC,GAAG,GAAG,CAAC,OAAO,CAmB/C"}

package/dist/components/Tooltip/TooltipContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipContext.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipContext.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;AACxD;;GAEG;AACH,eAAO,MAAM,cAAc,sCAAmC,CAAC;AAE/D;;GAEG;AACH,wBAAgB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAS+ynC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;;;;;;;;;EADpgoC"}

package/dist/components/Tooltip/TooltipProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipProvider.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEvC,eAAO,MAAM,UAAU;;;CAA0B,CAAC;AAElD,UAAU,KAAK;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,KAAK,CAIrC,CAAC"}

package/dist/components/Tooltip/useTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/useTooltip.ts"],"names":[],"mappings":"AAOA,OAAO,EAKL,KAAK,gBAAgB,EACrB,KAAK,SAAS,EAUf,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAIL,KAAK,GAAG,EACR,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,qBAAqB;IACpC;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,IAAI,EAAE,OAAO,EACb,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,EACzB,MAAM,CAAC,EAAE,gBAAgB,GAAG,SAAS,KAClC,IAAI,CAAC;IACV;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;OAOG;IACH,oBAAoB,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,aAAa,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,KAAK,eAAe,GAAG,qBAAqB,GAC1C,CAAC,YAAY,GAAG,kBAAkB,CAAC,CAAC;AAEtC,wBAAgB,UAAU,CAAC,EACzB,IAAI,EAAE,cAAc,EACpB,QAAgB,EAChB,YAAY,EACZ,SAAoB,EACpB,oBAAoB,EACpB,OAAO,EACP,aAAa,EAAE,UAAU,EACzB,WAAW,EAAE,QAAQ,EACrB,GAAG,KAAK,EACT,EAAE,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAyJkq7B,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;;aAxB/07B,OAAO,GAAG,aAAa;;oBAvHvC,OAAO,UACL,KAAK,GAAG,SAAS,WAChB,gBAAgB,GAAG,SAAS;;;;;EA4IxC"}

package/dist/components/Typography/Body.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Body.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAK5D,CAAC"}

package/dist/components/Typography/Heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Heading.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE7C,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAE/D;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAC5B,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,GAAG;IAE9B,IAAI,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;CAC5B,CAOF,CAAC;AAEF,KAAK,YAAY,GAAG,IAAI,CACtB,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,EACpC,IAAI,GAAG,QAAQ,GAAG,MAAM,CACzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAMrC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAMrC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAMrC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAMrC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAMrC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAMrC,CAAC"}

package/dist/components/Typography/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Text.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE7C,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAE/D;;;GAGG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CACzB,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,GAAG;IAE9B,IAAI,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;CAC5B,CAOF,CAAC"}

package/dist/components/Typography/Typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Typography.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAItD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE7C,KAAK,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI;IAClD;;;OAGG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;IACP;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpD;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;AAEtC,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,EAAE,+DAQ3D,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,YAehD,CAAC"}

package/dist/components/VisualList/VisualList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualList.d.ts","sourceRoot":"","sources":["../../../src/components/VisualList/VisualList.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,EAAE,KAAK,GAAG,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIhE,UAAU,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC;IACjE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,eAAe,CAAC,GAAG,GAAG,CAAC,OAAO,CAMlD"}

package/dist/components/VisualList/VisualListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualListItem.d.ts","sourceRoot":"","sources":["../../../src/components/VisualList/VisualListItem.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,EACZ,KAAK,aAAa,EAClB,KAAK,GAAG,EACR,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAIf,UAAU,mBAAoB,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IAClE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC;IAErD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,OAAe,EACf,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,GAAG,GAAG,CAAC,OAAO,CAkBtD"}

package/dist/components/VisualList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VisualList/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.cjs

@@ -23,6 +23,7 @@ const require_NavBar = require("./components/Nav/NavBar.cjs");
 const require_NavItem = require("./components/Nav/NavItem.cjs");
 const require_Menu = require("./components/Menu/Menu.cjs");
 const require_MenuItem = require("./components/Menu/MenuItem.cjs");
+const require_SubMenu = require("./components/Menu/SubMenu.cjs");
 const require_Text$1 = require("./components/Form/Controls/Text/Text.cjs");
 const require_Action = require("./components/Form/Controls/Action/Action.cjs");
 const require_Password = require("./components/Form/Controls/Password/Password.cjs");
@@ -127,6 +128,7 @@ exports.Search = require_Search.Search;
 exports.Separator = require_Separator.Separator;
 exports.SettingsToggleControl = require_SettingsToggle.SettingsToggleControl;
 exports.SettingsToggleInput = require_SettingsToggle.SettingsToggleInput;
+exports.SubMenu = require_SubMenu.SubMenu;
 exports.Submit = require_Submit.Submit;
 exports.Text = require_Text.Text;
 exports.TextControl = require_Text$1.TextControl;

package/dist/{src/index.d.ts → index.d.ts}

@@ -18,6 +18,7 @@ export { NavBar, NavItem } from './components/Nav';
 export { Menu } from './components/Menu/Menu';
 export { MenuItem } from './components/Menu/MenuItem';
 export { MenuTitle } from './components/Menu/MenuTitle';
+export { SubMenu } from './components/Menu/SubMenu';
 export { RadioMenuItem } from './components/Menu/RadioMenuItem';
 export { Progress } from './components/Progress/Progress';
 export { Search } from './components/Search/Search';

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -21,6 +21,7 @@ import { NavBar } from "./components/Nav/NavBar.js";
 import { NavItem } from "./components/Nav/NavItem.js";
 import { Menu } from "./components/Menu/Menu.js";
 import { MenuItem } from "./components/Menu/MenuItem.js";
+import { SubMenu } from "./components/Menu/SubMenu.js";
 import { TextControl, TextInput } from "./components/Form/Controls/Text/Text.js";
 import { ActionControl, ActionInput } from "./components/Form/Controls/Action/Action.js";
 import { PasswordControl, PasswordInput } from "./components/Form/Controls/Password/Password.js";
@@ -55,4 +56,4 @@ import { UnreadCounter } from "./components/ActivityMarker/UnreadCounter.js";
 import { Pill } from "./components/ActivityMarker/Pill.js";
 import { Unread } from "./components/ActivityMarker/Unread.js";
 /* empty css              */
-export { ActionControl, ActionInput, Alert, Avatar, AvatarStack, Badge, BigIcon, Body, Breadcrumb, Button, ChatFilter, CheckboxInput as Checkbox, CheckboxControl, CheckboxInput, CheckboxMenuItem, ContextMenu, TextControl as Control, Dropdown, EditInPlace, ErrorMessage, Field, Form_exports as Form, Glass, H1, H2, H3, H4, H5, H6, Heading, HelpMessage, IconButton, IndicatorIcon, InlineField, InlineSpinner, Label, Link, MFAControl, MFAInput, Menu, MenuItem, MenuTitle, Message, NavBar, NavItem, PasswordControl, PasswordInput, Pill, Progress, RadioInput as Radio, RadioControl, RadioInput, RadioMenuItem, ReleaseAnnouncement, Root, Search, Separator, SettingsToggleControl, SettingsToggleInput, Submit, Text, TextControl, TextInput, Toast, ToggleInput as Toggle, ToggleControl, ToggleInput, ToggleMenuItem, Tooltip, TooltipProvider, Unread, UnreadCounter, ValidityState, VisualList, VisualListItem, getInitialLetter, useIdColorHash };
+export { ActionControl, ActionInput, Alert, Avatar, AvatarStack, Badge, BigIcon, Body, Breadcrumb, Button, ChatFilter, CheckboxInput as Checkbox, CheckboxControl, CheckboxInput, CheckboxMenuItem, ContextMenu, TextControl as Control, Dropdown, EditInPlace, ErrorMessage, Field, Form_exports as Form, Glass, H1, H2, H3, H4, H5, H6, Heading, HelpMessage, IconButton, IndicatorIcon, InlineField, InlineSpinner, Label, Link, MFAControl, MFAInput, Menu, MenuItem, MenuTitle, Message, NavBar, NavItem, PasswordControl, PasswordInput, Pill, Progress, RadioInput as Radio, RadioControl, RadioInput, RadioMenuItem, ReleaseAnnouncement, Root, Search, Separator, SettingsToggleControl, SettingsToggleInput, SubMenu, Submit, Text, TextControl, TextInput, Toast, ToggleInput as Toggle, ToggleControl, ToggleInput, ToggleMenuItem, Tooltip, TooltipProvider, Unread, UnreadCounter, ValidityState, VisualList, VisualListItem, getInitialLetter, useIdColorHash };

package/dist/setupTests.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setupTests.d.ts","sourceRoot":"","sources":["../src/setupTests.ts"],"names":[],"mappings":"AAYA,OAAO,2BAA2B,CAAC"}

package/dist/style.css

@@ -670,47 +670,80 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._badge_18gm1_8 {
+._badge_10dml_8 {
   display: inline-flex;
   gap: var(--cpd-space-1x);
   align-items: center;
   border-radius: 9999px; /* pill effect */
   padding: var(--cpd-space-1x) var(--cpd-space-3x);
+  box-sizing: border-box;
+  min-block-size: 28px;
+}
+
+._has-icon_10dml_18 {
+  padding-inline-start: var(--cpd-space-2x);
 }
 
-._badge_18gm1_8[data-kind="default"] {
-  border: 1px solid var(--cpd-color-alpha-gray-400);
+._badge_10dml_8[data-kind="default"] {
+  border: 1px solid var(--cpd-color-border-interactive-secondary);
+
+  /* To keep the same height than the other badges despite the border  */
+  padding-block: calc(var(--cpd-space-1x) - 1px);
   outline: none;
-  color: var(--cpd-color-gray-1100);
+  color: var(--cpd-color-text-primary);
+
+  svg {
+    color: var(--cpd-color-icon-primary);
+  }
 }
 
-._badge_18gm1_8[data-kind="grey"] {
-  background: var(--cpd-color-alpha-gray-300);
-  color: var(--cpd-color-gray-1100);
+._badge_10dml_8[data-kind="grey"] {
+  background: var(--cpd-color-bg-badge-secondary);
+  color: var(--cpd-color-text-primary);
+
+  svg {
+    color: var(--cpd-color-icon-primary);
+  }
 }
 
-._badge_18gm1_8[data-kind="on-solid"] {
-  background: var(--cpd-color-alpha-gray-1200);
+._badge_10dml_8[data-kind="on-solid"] {
+  background: var(--cpd-color-bg-badge-primary);
   color: var(--cpd-color-text-on-solid-primary);
+
+  svg {
+    color: var(--cpd-color-icon-on-solid-primary);
+  }
 }
 
-._badge_18gm1_8[data-kind="blue"] {
-  background: var(--cpd-color-alpha-blue-300);
-  color: var(--cpd-color-blue-1100);
+._badge_10dml_8[data-kind="blue"] {
+  background: var(--cpd-color-bg-badge-info);
+  color: var(--cpd-color-text-badge-info);
+
+  svg {
+    color: var(--cpd-color-icon-info-primary);
+  }
 }
 
-._badge_18gm1_8[data-kind="green"] {
-  background: var(--cpd-color-alpha-green-300);
-  color: var(--cpd-color-green-1100);
+._badge_10dml_8[data-kind="green"] {
+  background: var(--cpd-color-bg-badge-accent);
+  color: var(--cpd-color-text-badge-accent);
+
+  svg {
+    color: var(--cpd-color-icon-accent-primary);
+  }
 }
 
-._badge_18gm1_8[data-kind="red"] {
-  background: var(--cpd-color-alpha-red-300);
-  color: var(--cpd-color-red-1100);
+._badge_10dml_8[data-kind="red"] {
+  background: var(--cpd-color-bg-badge-critical);
+  color: var(--cpd-color-text-critical-primary);
+
+  svg {
+    color: var(--cpd-color-icon-critical-primary);
+  }
 }
 
 @media (forced-colors: active) {
-  ._badge_18gm1_8 {
+  ._badge_10dml_8 {
     outline: 1px solid transparent;
   }
 }
@@ -2094,7 +2127,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._item_lqfwq_8 {
+._item_bym9p_8 {
   display: grid;
   grid-template: "icon label ." auto "empty1 label empty2" auto / auto auto minmax(
       /* Reserve space for the chevron so that the layout doesn't shift on
@@ -2112,105 +2145,127 @@ Please see LICENSE files in the repository root for full details.
   background: var(--cpd-color-bg-action-secondary-rest);
 }
 
-._item_lqfwq_8._interactive_lqfwq_26 {
+._item_bym9p_8._interactive_bym9p_26,
+._item_bym9p_8[data-state] {
   cursor: pointer;
 }
 
-._item_lqfwq_8._no-label_lqfwq_30 {
+._item_bym9p_8._no-label_bym9p_31 {
   grid-template: "icon ." auto / auto 1fr;
 }
 
-._label_lqfwq_34 {
+._label_bym9p_35 {
   grid-area: label;
   margin-inline-end: var(--cpd-space-4x);
   text-align: start;
   word-break: break-word; /* stylelint-disable-line declaration-property-value-keyword-no-deprecated */
 }
 
-._item_lqfwq_8._no-icon_lqfwq_41 {
+._item_bym9p_8._no-icon_bym9p_42 {
   grid-template: "label ." auto / auto 1fr;
 
-  ._label_lqfwq_34 {
+  ._label_bym9p_35 {
     /* Without icon, the height changes when hovered */
     min-block-size: 24px;
   }
 }
 
-._icon_lqfwq_50 {
+._icon_bym9p_51 {
   grid-area: icon;
   margin-inline-end: var(--cpd-space-3x);
 }
 
-._item_lqfwq_8._no-label_lqfwq_30 ._icon_lqfwq_50 {
+._item_bym9p_8._no-label_bym9p_31 ._icon_bym9p_51 {
   margin-inline-end: var(--cpd-space-4x);
 }
 
-._nav-hint_lqfwq_59 {
+._nav-hint_bym9p_60 {
   /* Hidden until the item is hovered over */
   display: none;
   flex-shrink: 0;
 }
 
-button._item_lqfwq_8 {
+button._item_bym9p_8 {
   appearance: none;
   border: none;
 }
 
-._item_lqfwq_8[data-kind="primary"] > ._label_lqfwq_34 {
+._item_bym9p_8[data-kind="primary"] > ._label_bym9p_35 {
   color: var(--cpd-color-text-primary);
 }
 
-._item_lqfwq_8[data-kind="primary"] > ._icon_lqfwq_50 {
+._item_bym9p_8[data-kind="primary"] > ._icon_bym9p_51 {
   color: var(--cpd-color-icon-primary);
 }
 
-._item_lqfwq_8[data-kind="primary"] > ._nav-hint_lqfwq_59 {
+._item_bym9p_8[data-kind="primary"] > ._nav-hint_bym9p_60 {
   color: var(--cpd-color-icon-tertiary);
 }
 
-._item_lqfwq_8[data-kind="critical"] > ._label_lqfwq_34 {
+._item_bym9p_8[data-kind="critical"] > ._label_bym9p_35 {
   color: var(--cpd-color-text-critical-primary);
 }
 
-._item_lqfwq_8[data-kind="critical"] > ._icon_lqfwq_50,
-._item_lqfwq_8[data-kind="critical"] > ._nav-hint_lqfwq_59 {
+._item_bym9p_8[data-kind="critical"] > ._icon_bym9p_51,
+._item_bym9p_8[data-kind="critical"] > ._nav-hint_bym9p_60 {
   color: var(--cpd-color-icon-critical-primary);
 }
 
+/* Submenu triggers: always show the chevron and apply hover style when open */
+._item_bym9p_8[data-state] > ._nav-hint_bym9p_60 {
+  display: initial;
+}
+
+._item_bym9p_8[data-state] > ._nav-hint_bym9p_60 ~ * {
+  display: none;
+}
+
+._item_bym9p_8[data-state="open"][data-kind="primary"] {
+  background: var(--cpd-color-bg-action-secondary-hovered);
+}
+
+._item_bym9p_8[data-state="open"][data-kind="critical"] {
+  background: var(--cpd-color-bg-critical-subtle);
+}
+
 @media (hover) {
-  ._item_lqfwq_8._interactive_lqfwq_26[data-kind="primary"]:hover {
+  ._item_bym9p_8._interactive_bym9p_26[data-kind="primary"]:hover,
+  ._item_bym9p_8[data-state][data-kind="primary"]:hover {
     background: var(--cpd-color-bg-action-secondary-hovered);
   }
 
-  ._item_lqfwq_8._interactive_lqfwq_26[data-kind="critical"]:hover {
+  ._item_bym9p_8._interactive_bym9p_26[data-kind="critical"]:hover,
+  ._item_bym9p_8[data-state][data-kind="critical"]:hover {
     background: var(--cpd-color-bg-critical-subtle);
   }
 
   /* Replace the children with the navigation hint on hover */
-  ._item_lqfwq_8._interactive_lqfwq_26:hover > ._nav-hint_lqfwq_59 {
+  ._item_bym9p_8._interactive_bym9p_26:hover > ._nav-hint_bym9p_60 {
     display: initial;
   }
 
-  ._item_lqfwq_8._interactive_lqfwq_26:hover > ._nav-hint_lqfwq_59 ~ * {
+  ._item_bym9p_8._interactive_bym9p_26:hover > ._nav-hint_bym9p_60 ~ * {
     display: none;
   }
 }
 
-._item_lqfwq_8._interactive_lqfwq_26[data-kind="primary"]:active {
+._item_bym9p_8._interactive_bym9p_26[data-kind="primary"]:active,
+._item_bym9p_8[data-state][data-kind="primary"]:active {
   background: var(--cpd-color-bg-action-secondary-pressed);
 }
 
-._item_lqfwq_8._interactive_lqfwq_26[data-kind="critical"]:active {
+._item_bym9p_8._interactive_bym9p_26[data-kind="critical"]:active,
+._item_bym9p_8[data-state][data-kind="critical"]:active {
   background: var(--cpd-color-bg-critical-subtle-hovered);
 }
 
-._item_lqfwq_8[data-kind]._disabled_lqfwq_118 {
+._item_bym9p_8[data-kind]._disabled_bym9p_140 {
   pointer-events: none;
 }
 
-._item_lqfwq_8[data-kind]._disabled_lqfwq_118 > ._label_lqfwq_34,
-._item_lqfwq_8[data-kind]._disabled_lqfwq_118 > ._icon_lqfwq_50,
-._item_lqfwq_8[data-kind]._disabled_lqfwq_118 > ._nav-hint_lqfwq_59 {
+._item_bym9p_8[data-kind]._disabled_bym9p_140 > ._label_bym9p_35,
+._item_bym9p_8[data-kind]._disabled_bym9p_140 > ._icon_bym9p_51,
+._item_bym9p_8[data-kind]._disabled_bym9p_140 > ._nav-hint_bym9p_60 {
   color: var(--cpd-color-text-disabled);
 }
 /*
@@ -2732,20 +2787,50 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._toast-container_1xofk_8 {
+._toast-container_1ysb3_8 {
   inline-size: fit-content;
-  background-color: var(--cpd-color-alpha-gray-1300);
+  background-color: var(--cpd-color-bg-action-primary-rest);
   color: var(--cpd-color-text-on-solid-primary);
   border-radius: 99px;
-  font-size: var(--cpd-font-body-sm-medium);
   padding: var(--cpd-space-2x) var(--cpd-space-4x);
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: var(--cpd-space-2x);
 }
 
 @media (forced-colors: active) {
-  ._toast-container_1xofk_8 {
+  ._toast-container_1ysb3_8 {
     outline: 1px solid transparent;
   }
 }
+
+._icon_1ysb3_26 {
+  flex-shrink: 0;
+}
+
+._has-close_1ysb3_30 {
+  gap: var(--cpd-space-3x);
+}
+
+._content_1ysb3_34 {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  gap: var(--cpd-space-2x);
+}
+
+._close_1ysb3_41 {
+  align-self: flex-start;
+  padding: var(--cpd-space-0-5x) !important;
+
+  &:not(:hover, :focus-visible) {
+    * {
+      /* Override default color of icon button. The container background is different than the default canvas color */
+      color: var(--cpd-color-icon-on-solid-primary) !important;
+    }
+  }
+}
 /*
 Copyright 2024 New Vector Ltd.
 

package/dist/utils/__ComponentTemplate__/__ComponentTemplate__.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"__ComponentTemplate__.d.ts","sourceRoot":"","sources":["../../../src/utils/__ComponentTemplate__/__ComponentTemplate__.tsx"],"names":[],"mappings":"AAQA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAOlE,eAAO,MAAM,qBAAqB;gBAHpB,MAAM;+EAqBlB,CAAC"}

package/dist/utils/platform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"platform.d.ts","sourceRoot":"","sources":["../../src/utils/platform.ts"],"names":[],"mappings":"AAOA;;;GAGG;AACH,wBAAgB,WAAW,IAAI,SAAS,GAAG,KAAK,GAAG,OAAO,CAoBzD"}

package/dist/utils/size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.d.ts","sourceRoot":"","sources":["../../src/utils/size.ts"],"names":[],"mappings":"AAOA;;GAEG;AACH,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC"}

package/dist/utils/string.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"string.d.ts","sourceRoot":"","sources":["../../src/utils/string.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,cAAc,MAAM,CAAC;AAClC,eAAO,MAAM,eAAe,MAAM,CAAC;AAInC;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAarD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-web",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "description": "Compound components for the Web",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -51,7 +51,7 @@
   },
   "homepage": "https://github.com/vector-im/compound-web#readme",
   "devDependencies": {
-    "@element-hq/element-web-playwright-common": "^2.0.0",
+    "@element-hq/element-web-playwright-common": "^3.0.0",
     "@fontsource/inconsolata": "^5.0.8",
     "@fontsource/inter": "^5.0.8",
     "@playwright/test": "^1.41.1",