@vector-im/compound-web 8.3.1 → 8.3.5

package/dist/components/Button/Button.module.css.cjs

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const button = "_button_187yx_8";
-const destructive = "_destructive_187yx_107";
+const button = "_button_13vu4_8";
+const destructive = "_destructive_13vu4_110";
 const styles = {
   button,
-  "icon-only": "_icon-only_187yx_50",
-  "has-icon": "_has-icon_187yx_57",
+  "icon-only": "_icon-only_13vu4_53",
+  "has-icon": "_has-icon_13vu4_60",
   destructive
 };
 exports.button = button;

package/dist/components/Button/Button.module.css.js

@@ -1,9 +1,9 @@
-const button = "_button_187yx_8";
-const destructive = "_destructive_187yx_107";
+const button = "_button_13vu4_8";
+const destructive = "_destructive_13vu4_110";
 const styles = {
   button,
-  "icon-only": "_icon-only_187yx_50",
-  "has-icon": "_has-icon_187yx_57",
+  "icon-only": "_icon-only_13vu4_53",
+  "has-icon": "_has-icon_13vu4_60",
   destructive
 };
 export {

package/dist/components/Button/IconButton/IconButton.module.css.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const destructive = "_destructive_1pz9o_95";
+const destructive = "_destructive_1215g_95";
 const styles = {
-  "icon-button": "_icon-button_1pz9o_8",
-  "no-background": "_no-background_1pz9o_42",
+  "icon-button": "_icon-button_1215g_8",
+  "no-background": "_no-background_1215g_42",
   destructive
 };
 exports.default = styles;

package/dist/components/Button/IconButton/IconButton.module.css.js

@@ -1,7 +1,7 @@
-const destructive = "_destructive_1pz9o_95";
+const destructive = "_destructive_1215g_95";
 const styles = {
-  "icon-button": "_icon-button_1pz9o_8",
-  "no-background": "_no-background_1pz9o_42",
+  "icon-button": "_icon-button_1215g_8",
+  "no-background": "_no-background_1215g_42",
   destructive
 };
 export {

package/dist/components/InlineSpinner/InlineSpinner.cjs

@@ -2,15 +2,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
+const classNames = require("classnames");
 const InlineSpinner_module = require("./InlineSpinner.module.css.cjs");
 const SpinnerIcon = require("@vector-im/compound-design-tokens/assets/web/icons/spinner");
 const InlineSpinner = React.forwardRef(
-  function InlineSpinner2({ size = 20, ...props }, ref) {
+  function InlineSpinner2({ size = 20, className, ...props }, ref) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       SpinnerIcon,
       {
         ref,
-        className: InlineSpinner_module.default.icon,
+        className: classNames(InlineSpinner_module.default.icon, className),
         style: { width: size, height: size },
         ...props
       }

package/dist/components/InlineSpinner/InlineSpinner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InlineSpinner.cjs","sources":["../../../src/components/InlineSpinner/InlineSpinner.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 React, { type SVGAttributes, forwardRef } from \"react\";\nimport styles from \"./InlineSpinner.module.css\";\nimport SpinnerIcon from \"@vector-im/compound-design-tokens/assets/web/icons/spinner\";\n\ntype InlineSpinnerProps = {\n  size?: number;\n} & SVGAttributes<SVGElement>;\n\nexport const InlineSpinner = forwardRef<SVGSVGElement, InlineSpinnerProps>(\n  function InlineSpinner({ size = 20, ...props }, ref) {\n    return (\n      <SpinnerIcon\n        ref={ref}\n        className={styles.icon}\n        style={{ width: size, height: size }}\n        {...props}\n      />\n    );\n  },\n);\n"],"names":["forwardRef","InlineSpinner","jsx","styles"],"mappings":";;;;;;AAeO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,SAASC,eAAc,EAAE,OAAO,IAAI,GAAG,MAAA,GAAS,KAAK;AACnD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,qBAAAA,QAAO;AAAA,QAClB,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAA;AAAA,QAC7B,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;;"}
+{"version":3,"file":"InlineSpinner.cjs","sources":["../../../src/components/InlineSpinner/InlineSpinner.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 React, { type SVGAttributes, forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./InlineSpinner.module.css\";\nimport SpinnerIcon from \"@vector-im/compound-design-tokens/assets/web/icons/spinner\";\n\ntype InlineSpinnerProps = {\n  size?: number;\n} & SVGAttributes<SVGElement>;\n\nexport const InlineSpinner = forwardRef<SVGSVGElement, InlineSpinnerProps>(\n  function InlineSpinner({ size = 20, className, ...props }, ref) {\n    return (\n      <SpinnerIcon\n        ref={ref}\n        className={classNames(styles.icon, className)}\n        style={{ width: size, height: size }}\n        {...props}\n      />\n    );\n  },\n);\n"],"names":["forwardRef","InlineSpinner","jsx","styles"],"mappings":";;;;;;;AAgBO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,SAASC,eAAc,EAAE,OAAO,IAAI,WAAW,GAAG,MAAA,GAAS,KAAK;AAC9D,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,WAAWC,6BAAO,MAAM,SAAS;AAAA,QAC5C,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAA;AAAA,QAC7B,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"InlineSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/InlineSpinner/InlineSpinner.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAQ9D,eAAO,MAAM,aAAa;WAHjB,MAAM;yEAcd,CAAC"}
+{"version":3,"file":"InlineSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/InlineSpinner/InlineSpinner.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAS9D,eAAO,MAAM,aAAa;WAHjB,MAAM;yEAcd,CAAC"}

package/dist/components/InlineSpinner/InlineSpinner.js

@@ -1,14 +1,15 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import classNames from "classnames";
 import styles from "./InlineSpinner.module.css.js";
 import SpinnerIcon from "@vector-im/compound-design-tokens/assets/web/icons/spinner";
 const InlineSpinner = forwardRef(
-  function InlineSpinner2({ size = 20, ...props }, ref) {
+  function InlineSpinner2({ size = 20, className, ...props }, ref) {
     return /* @__PURE__ */ jsx(
       SpinnerIcon,
       {
         ref,
-        className: styles.icon,
+        className: classNames(styles.icon, className),
         style: { width: size, height: size },
         ...props
       }

package/dist/components/InlineSpinner/InlineSpinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineSpinner.js","sources":["../../../src/components/InlineSpinner/InlineSpinner.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 React, { type SVGAttributes, forwardRef } from \"react\";\nimport styles from \"./InlineSpinner.module.css\";\nimport SpinnerIcon from \"@vector-im/compound-design-tokens/assets/web/icons/spinner\";\n\ntype InlineSpinnerProps = {\n  size?: number;\n} & SVGAttributes<SVGElement>;\n\nexport const InlineSpinner = forwardRef<SVGSVGElement, InlineSpinnerProps>(\n  function InlineSpinner({ size = 20, ...props }, ref) {\n    return (\n      <SpinnerIcon\n        ref={ref}\n        className={styles.icon}\n        style={{ width: size, height: size }}\n        {...props}\n      />\n    );\n  },\n);\n"],"names":["InlineSpinner"],"mappings":";;;;AAeO,MAAM,gBAAgB;AAAA,EAC3B,SAASA,eAAc,EAAE,OAAO,IAAI,GAAG,MAAA,GAAS,KAAK;AACnD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,OAAO;AAAA,QAClB,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAA;AAAA,QAC7B,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
+{"version":3,"file":"InlineSpinner.js","sources":["../../../src/components/InlineSpinner/InlineSpinner.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 React, { type SVGAttributes, forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./InlineSpinner.module.css\";\nimport SpinnerIcon from \"@vector-im/compound-design-tokens/assets/web/icons/spinner\";\n\ntype InlineSpinnerProps = {\n  size?: number;\n} & SVGAttributes<SVGElement>;\n\nexport const InlineSpinner = forwardRef<SVGSVGElement, InlineSpinnerProps>(\n  function InlineSpinner({ size = 20, className, ...props }, ref) {\n    return (\n      <SpinnerIcon\n        ref={ref}\n        className={classNames(styles.icon, className)}\n        style={{ width: size, height: size }}\n        {...props}\n      />\n    );\n  },\n);\n"],"names":["InlineSpinner"],"mappings":";;;;;AAgBO,MAAM,gBAAgB;AAAA,EAC3B,SAASA,eAAc,EAAE,OAAO,IAAI,WAAW,GAAG,MAAA,GAAS,KAAK;AAC9D,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,WAAW,OAAO,MAAM,SAAS;AAAA,QAC5C,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAA;AAAA,QAC7B,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

package/dist/components/Menu/CheckboxMenuItem.cjs

@@ -12,11 +12,12 @@ const CheckboxMenuItem = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(
       MenuItem.MenuItem,
       {
-        as: "div",
+        as: "button",
         role: "menuitemcheckbox",
         "aria-checked": checked,
         className,
         label,
+        hideChevron: true,
         onSelect,
         disabled,
         Icon: /* @__PURE__ */ jsxRuntime.jsx(
@@ -25,6 +26,7 @@ const CheckboxMenuItem = React.forwardRef(
             id: toggleId,
             ref,
             "aria-hidden": true,
+            tabIndex: -1,
             checked,
             disabled,
             onChange

package/dist/components/Menu/CheckboxMenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxMenuItem.cjs","sources":["../../../src/components/Menu/CheckboxMenuItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { CheckboxInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the checkbox is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a checkbox control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const CheckboxMenuItem = forwardRef<HTMLInputElement, Props>(\n  function CheckboxMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The checkbox is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"div\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <CheckboxInput\n            id={toggleId}\n            ref={ref}\n            // This is purely cosmetic; really the whole MenuItem is the toggle.\n            aria-hidden\n            checked={checked}\n            disabled={disabled}\n            onChange={onChange}\n          />\n        }\n      />\n    );\n  },\n);\n"],"names":["forwardRef","CheckboxMenuItem","useId","useCallback","jsx","MenuItem","CheckboxInput"],"mappings":";;;;;;AA8BO,MAAM,mBAAmBA,MAAAA;AAAAA,EAC9B,SAASC,kBACP,EAAE,WAAW,OAAO,UAAU,SAAS,SAAA,GACvC,KACA;AACA,UAAM,WAAWC,MAAAA,MAAA;AAGjB,UAAM,WAAWC,MAAAA,YAAY,MAAM;AAAA,IAAC,GAAG,CAAA,CAAE;AAKzC,WACEC,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MACED,2BAAAA;AAAAA,UAACE,SAAAA;AAAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAIR;AACF;;"}
+{"version":3,"file":"CheckboxMenuItem.cjs","sources":["../../../src/components/Menu/CheckboxMenuItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { CheckboxInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the checkbox is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a checkbox control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const CheckboxMenuItem = forwardRef<HTMLInputElement, Props>(\n  function CheckboxMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The checkbox is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a <button> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"button\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        hideChevron\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <CheckboxInput\n            id={toggleId}\n            ref={ref}\n            // This is purely cosmetic; really the whole MenuItem is the toggle.\n            aria-hidden\n            tabIndex={-1}\n            checked={checked}\n            disabled={disabled}\n            onChange={onChange}\n          />\n        }\n      />\n    );\n  },\n);\n"],"names":["forwardRef","CheckboxMenuItem","useId","useCallback","jsx","MenuItem","CheckboxInput"],"mappings":";;;;;;AA8BO,MAAM,mBAAmBA,MAAAA;AAAAA,EAC9B,SAASC,kBACP,EAAE,WAAW,OAAO,UAAU,SAAS,SAAA,GACvC,KACA;AACA,UAAM,WAAWC,MAAAA,MAAA;AAGjB,UAAM,WAAWC,MAAAA,YAAY,MAAM;AAAA,IAAC,GAAG,CAAA,CAAE;AAKzC,WACEC,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,MACED,2BAAAA;AAAAA,UAACE,SAAAA;AAAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAIR;AACF;;"}

package/dist/components/Menu/CheckboxMenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxMenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/CheckboxMenuItem.tsx"],"names":[],"mappings":"AAOA,OAAO,KAKN,MAAM,OAAO,CAAC;AAcf;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;IAV3B;;OAEG;aACM,OAAO;0CA2CjB,CAAC"}
+{"version":3,"file":"CheckboxMenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/CheckboxMenuItem.tsx"],"names":[],"mappings":"AAOA,OAAO,KAKN,MAAM,OAAO,CAAC;AAcf;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;IAV3B;;OAEG;aACM,OAAO;0CA6CjB,CAAC"}

package/dist/components/Menu/CheckboxMenuItem.js

@@ -10,11 +10,12 @@ const CheckboxMenuItem = forwardRef(
     return /* @__PURE__ */ jsx(
       MenuItem,
       {
-        as: "div",
+        as: "button",
         role: "menuitemcheckbox",
         "aria-checked": checked,
         className,
         label,
+        hideChevron: true,
         onSelect,
         disabled,
         Icon: /* @__PURE__ */ jsx(
@@ -23,6 +24,7 @@ const CheckboxMenuItem = forwardRef(
             id: toggleId,
             ref,
             "aria-hidden": true,
+            tabIndex: -1,
             checked,
             disabled,
             onChange

package/dist/components/Menu/CheckboxMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxMenuItem.js","sources":["../../../src/components/Menu/CheckboxMenuItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { CheckboxInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the checkbox is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a checkbox control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const CheckboxMenuItem = forwardRef<HTMLInputElement, Props>(\n  function CheckboxMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The checkbox is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"div\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <CheckboxInput\n            id={toggleId}\n            ref={ref}\n            // This is purely cosmetic; really the whole MenuItem is the toggle.\n            aria-hidden\n            checked={checked}\n            disabled={disabled}\n            onChange={onChange}\n          />\n        }\n      />\n    );\n  },\n);\n"],"names":["CheckboxMenuItem"],"mappings":";;;;AA8BO,MAAM,mBAAmB;AAAA,EAC9B,SAASA,kBACP,EAAE,WAAW,OAAO,UAAU,SAAS,SAAA,GACvC,KACA;AACA,UAAM,WAAW,MAAA;AAGjB,UAAM,WAAW,YAAY,MAAM;AAAA,IAAC,GAAG,CAAA,CAAE;AAKzC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAIR;AACF;"}
+{"version":3,"file":"CheckboxMenuItem.js","sources":["../../../src/components/Menu/CheckboxMenuItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { CheckboxInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the checkbox is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a checkbox control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const CheckboxMenuItem = forwardRef<HTMLInputElement, Props>(\n  function CheckboxMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The checkbox is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a <button> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"button\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        hideChevron\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <CheckboxInput\n            id={toggleId}\n            ref={ref}\n            // This is purely cosmetic; really the whole MenuItem is the toggle.\n            aria-hidden\n            tabIndex={-1}\n            checked={checked}\n            disabled={disabled}\n            onChange={onChange}\n          />\n        }\n      />\n    );\n  },\n);\n"],"names":["CheckboxMenuItem"],"mappings":";;;;AA8BO,MAAM,mBAAmB;AAAA,EAC9B,SAASA,kBACP,EAAE,WAAW,OAAO,UAAU,SAAS,SAAA,GACvC,KACA;AACA,UAAM,WAAW,MAAA;AAGjB,UAAM,WAAW,YAAY,MAAM;AAAA,IAAC,GAAG,CAAA,CAAE;AAKzC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,MACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAIR;AACF;"}

package/dist/components/Menu/MenuItem.module.css.cjs

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const item = "_item_dyt4i_8";
-const interactive = "_interactive_dyt4i_26";
-const label = "_label_dyt4i_34";
-const icon = "_icon_dyt4i_50";
-const disabled = "_disabled_dyt4i_118";
+const item = "_item_lqfwq_8";
+const interactive = "_interactive_lqfwq_26";
+const label = "_label_lqfwq_34";
+const icon = "_icon_lqfwq_50";
+const disabled = "_disabled_lqfwq_118";
 const styles = {
   item,
   interactive,
-  "no-label": "_no-label_dyt4i_30",
+  "no-label": "_no-label_lqfwq_30",
   label,
-  "no-icon": "_no-icon_dyt4i_41",
+  "no-icon": "_no-icon_lqfwq_41",
   icon,
-  "nav-hint": "_nav-hint_dyt4i_59",
+  "nav-hint": "_nav-hint_lqfwq_59",
   disabled
 };
 exports.default = styles;

package/dist/components/Menu/MenuItem.module.css.js

@@ -1,16 +1,16 @@
-const item = "_item_dyt4i_8";
-const interactive = "_interactive_dyt4i_26";
-const label = "_label_dyt4i_34";
-const icon = "_icon_dyt4i_50";
-const disabled = "_disabled_dyt4i_118";
+const item = "_item_lqfwq_8";
+const interactive = "_interactive_lqfwq_26";
+const label = "_label_lqfwq_34";
+const icon = "_icon_lqfwq_50";
+const disabled = "_disabled_lqfwq_118";
 const styles = {
   item,
   interactive,
-  "no-label": "_no-label_dyt4i_30",
+  "no-label": "_no-label_lqfwq_30",
   label,
-  "no-icon": "_no-icon_dyt4i_41",
+  "no-icon": "_no-icon_lqfwq_41",
   icon,
-  "nav-hint": "_nav-hint_dyt4i_59",
+  "nav-hint": "_nav-hint_lqfwq_59",
   disabled
 };
 export {

package/dist/components/Menu/ToggleMenuItem.cjs

@@ -12,12 +12,13 @@ const ToggleMenuItem = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(
       MenuItem.MenuItem,
       {
-        as: "div",
+        as: "button",
         role: "menuitemcheckbox",
         "aria-checked": checked,
         className,
         Icon,
         label,
+        hideChevron: true,
         onSelect,
         disabled,
         onClick,
@@ -27,6 +28,7 @@ const ToggleMenuItem = React.forwardRef(
             id: toggleId,
             ref,
             "aria-hidden": true,
+            tabIndex: -1,
             checked,
             disabled,
             onChange

package/dist/components/Menu/ToggleMenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleMenuItem.cjs","sources":["../../../src/components/Menu/ToggleMenuItem.tsx"],"sourcesContent":["/*\nCopyright 2023, 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 React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { ToggleInput } from \"../Form/Controls/Toggle\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"Icon\" | \"label\" | \"onSelect\" | \"disabled\" | \"onClick\"\n> & {\n  /**\n   * Whether the toggle is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a toggle control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(\n  function ToggleMenuItem(\n    { className, Icon, label, onSelect, checked, disabled, onClick },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The toggle is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"div\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        Icon={Icon}\n        label={label}\n        onSelect={onSelect}\n        disabled={disabled}\n        onClick={onClick}\n      >\n        <ToggleInput\n          id={toggleId}\n          ref={ref}\n          // This is purely cosmetic; really the whole MenuItem is the toggle.\n          aria-hidden\n          checked={checked}\n          disabled={disabled}\n          onChange={onChange}\n        />\n      </MenuItem>\n    );\n  },\n);\n"],"names":["forwardRef","ToggleMenuItem","useId","useCallback","jsx","MenuItem","ToggleInput"],"mappings":";;;;;;AA8BO,MAAM,iBAAiBA,MAAAA;AAAAA,EAC5B,SAASC,gBACP,EAAE,WAAW,MAAM,OAAO,UAAU,SAAS,UAAU,QAAA,GACvD,KACA;AACA,UAAM,WAAWC,MAAAA,MAAA;AAGjB,UAAM,WAAWC,MAAAA,YAAY,MAAM;AAAA,IAAC,GAAG,CAAA,CAAE;AAKzC,WACEC,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEA,UAAAD,2BAAAA;AAAAA,UAACE,OAAAA;AAAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;;"}
+{"version":3,"file":"ToggleMenuItem.cjs","sources":["../../../src/components/Menu/ToggleMenuItem.tsx"],"sourcesContent":["/*\nCopyright 2023, 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 React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { ToggleInput } from \"../Form/Controls/Toggle\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"Icon\" | \"label\" | \"onSelect\" | \"disabled\" | \"onClick\"\n> & {\n  /**\n   * Whether the toggle is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a toggle control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(\n  function ToggleMenuItem(\n    { className, Icon, label, onSelect, checked, disabled, onClick },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The toggle is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"button\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        Icon={Icon}\n        label={label}\n        hideChevron\n        onSelect={onSelect}\n        disabled={disabled}\n        onClick={onClick}\n      >\n        <ToggleInput\n          id={toggleId}\n          ref={ref}\n          // This is purely cosmetic; really the whole MenuItem is the toggle.\n          aria-hidden\n          tabIndex={-1}\n          checked={checked}\n          disabled={disabled}\n          onChange={onChange}\n        />\n      </MenuItem>\n    );\n  },\n);\n"],"names":["forwardRef","ToggleMenuItem","useId","useCallback","jsx","MenuItem","ToggleInput"],"mappings":";;;;;;AA8BO,MAAM,iBAAiBA,MAAAA;AAAAA,EAC5B,SAASC,gBACP,EAAE,WAAW,MAAM,OAAO,UAAU,SAAS,UAAU,QAAA,GACvD,KACA;AACA,UAAM,WAAWC,MAAAA,MAAA;AAGjB,UAAM,WAAWC,MAAAA,YAAY,MAAM;AAAA,IAAC,GAAG,CAAA,CAAE;AAKzC,WACEC,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QAEA,UAAAD,2BAAAA;AAAAA,UAACE,OAAAA;AAAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;;"}

package/dist/components/Menu/ToggleMenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleMenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/ToggleMenuItem.tsx"],"names":[],"mappings":"AAOA,OAAO,KAKN,MAAM,OAAO,CAAC;AAcf;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;IAVzB;;OAEG;aACM,OAAO;0CA4CjB,CAAC"}
+{"version":3,"file":"ToggleMenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/ToggleMenuItem.tsx"],"names":[],"mappings":"AAOA,OAAO,KAKN,MAAM,OAAO,CAAC;AAcf;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;IAVzB;;OAEG;aACM,OAAO;0CA8CjB,CAAC"}

package/dist/components/Menu/ToggleMenuItem.js

@@ -10,12 +10,13 @@ const ToggleMenuItem = forwardRef(
     return /* @__PURE__ */ jsx(
       MenuItem,
       {
-        as: "div",
+        as: "button",
         role: "menuitemcheckbox",
         "aria-checked": checked,
         className,
         Icon,
         label,
+        hideChevron: true,
         onSelect,
         disabled,
         onClick,
@@ -25,6 +26,7 @@ const ToggleMenuItem = forwardRef(
             id: toggleId,
             ref,
             "aria-hidden": true,
+            tabIndex: -1,
             checked,
             disabled,
             onChange

package/dist/components/Menu/ToggleMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleMenuItem.js","sources":["../../../src/components/Menu/ToggleMenuItem.tsx"],"sourcesContent":["/*\nCopyright 2023, 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 React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { ToggleInput } from \"../Form/Controls/Toggle\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"Icon\" | \"label\" | \"onSelect\" | \"disabled\" | \"onClick\"\n> & {\n  /**\n   * Whether the toggle is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a toggle control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(\n  function ToggleMenuItem(\n    { className, Icon, label, onSelect, checked, disabled, onClick },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The toggle is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"div\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        Icon={Icon}\n        label={label}\n        onSelect={onSelect}\n        disabled={disabled}\n        onClick={onClick}\n      >\n        <ToggleInput\n          id={toggleId}\n          ref={ref}\n          // This is purely cosmetic; really the whole MenuItem is the toggle.\n          aria-hidden\n          checked={checked}\n          disabled={disabled}\n          onChange={onChange}\n        />\n      </MenuItem>\n    );\n  },\n);\n"],"names":["ToggleMenuItem"],"mappings":";;;;AA8BO,MAAM,iBAAiB;AAAA,EAC5B,SAASA,gBACP,EAAE,WAAW,MAAM,OAAO,UAAU,SAAS,UAAU,QAAA,GACvD,KACA;AACA,UAAM,WAAW,MAAA;AAGjB,UAAM,WAAW,YAAY,MAAM;AAAA,IAAC,GAAG,CAAA,CAAE;AAKzC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEA,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"version":3,"file":"ToggleMenuItem.js","sources":["../../../src/components/Menu/ToggleMenuItem.tsx"],"sourcesContent":["/*\nCopyright 2023, 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 React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { ToggleInput } from \"../Form/Controls/Toggle\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"Icon\" | \"label\" | \"onSelect\" | \"disabled\" | \"onClick\"\n> & {\n  /**\n   * Whether the toggle is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a toggle control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(\n  function ToggleMenuItem(\n    { className, Icon, label, onSelect, checked, disabled, onClick },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The toggle is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"button\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        Icon={Icon}\n        label={label}\n        hideChevron\n        onSelect={onSelect}\n        disabled={disabled}\n        onClick={onClick}\n      >\n        <ToggleInput\n          id={toggleId}\n          ref={ref}\n          // This is purely cosmetic; really the whole MenuItem is the toggle.\n          aria-hidden\n          tabIndex={-1}\n          checked={checked}\n          disabled={disabled}\n          onChange={onChange}\n        />\n      </MenuItem>\n    );\n  },\n);\n"],"names":["ToggleMenuItem"],"mappings":";;;;AA8BO,MAAM,iBAAiB;AAAA,EAC5B,SAASA,gBACP,EAAE,WAAW,MAAM,OAAO,UAAU,SAAS,UAAU,QAAA,GACvD,KACA;AACA,UAAM,WAAW,MAAA;AAGjB,UAAM,WAAW,YAAY,MAAM;AAAA,IAAC,GAAG,CAAA,CAAE;AAKzC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QAEA,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/components/ReleaseAnnouncement/ReleaseAnnouncement.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ReleaseAnnouncement.cjs","sources":["../../../src/components/ReleaseAnnouncement/ReleaseAnnouncement.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 React, {\n  cloneElement,\n  isValidElement,\n  type JSX,\n  type PropsWithChildren,\n  type Ref,\n} from \"react\";\nimport {\n  FloatingPortal,\n  FloatingFocusManager,\n  type Placement,\n  useMergeRefs,\n  FloatingArrow,\n} from \"@floating-ui/react\";\nimport { Text } from \"../Typography/Text\";\nimport { Button } from \"../Button\";\nimport styles from \"./ReleaseAnnouncement.module.css\";\nimport {\n  useReleaseAnnouncementContext,\n  ReleaseAnnouncementContext,\n} from \"./ReleaseAnnouncementContext\";\nimport { useReleaseAnnouncement } from \"./useReleaseAnnouncement\";\n\ntype UseReleaseAnnouncementParam = Parameters<typeof useReleaseAnnouncement>[0];\n\ninterface ReleaseAnnouncementProps\n  extends Omit<UseReleaseAnnouncementParam, \"placement\" | \"displayArrow\"> {\n  /**\n   * The placement of the component\n   * @default \"right\"\n   */\n  placement?: Placement;\n  /**\n   * Whether to display an arrow.\n   * @default true\n   */\n  displayArrow?: boolean;\n}\n\n/**\n * The ReleaseAnnouncement component purpose is to inform the user of a new available feature.\n * This component is a floating component that will appear next to an anchor.\n * @param children - Act as an anchor, the component will be displayed alongside of it.\n * @param placement - The placement of the component\n */\nexport function ReleaseAnnouncement({\n  /**\n   * The children anchor should be a single valid React element.\n   */\n  children,\n  placement = \"right\",\n  displayArrow = true,\n  ...props\n}: PropsWithChildren<ReleaseAnnouncementProps>): JSX.Element {\n  const context = useReleaseAnnouncement({ placement, displayArrow, ...props });\n\n  return (\n    <ReleaseAnnouncementContext.Provider value={context}>\n      <ReleaseAnnouncementAnchor>{children}</ReleaseAnnouncementAnchor>\n      <ReleaseAnnouncementContainer>\n        <ReleaseAnnouncementContent />\n      </ReleaseAnnouncementContainer>\n    </ReleaseAnnouncementContext.Provider>\n  );\n}\n\n/**\n * The anchor for the ReleaseAnnouncement components.\n * The Release Announcement will appear next to this element.\n * @param children - should be a single valid React element\n * @constructor\n */\nfunction ReleaseAnnouncementAnchor({\n  children,\n}: Readonly<PropsWithChildren>): JSX.Element {\n  const context = useReleaseAnnouncementContext();\n\n  // The children can have a ref and we don't want to discard it\n  // Doing a dirty cast to get the optional ref\n  const childrenRef = (children as unknown as { ref?: Ref<HTMLElement> })?.ref;\n  const ref = useMergeRefs([context.refs.setReference, childrenRef]);\n\n  if (!isValidElement(children)) {\n    throw new Error(\n      \"ReleaseAnnouncement anchor must be a single valid React element\",\n    );\n  }\n\n  const referenceProps = context.getReferenceProps({\n    ref,\n    // If the ReleaseAnnouncement is open, we need manually aria-describedby.\n    // The RA has the dialog role and it's not adding automatically the aria-describedby.\n    ...(context.open && {\n      \"aria-describedby\": context.getFloatingProps().id as string,\n    }),\n  });\n\n  // getReferenceProps includes aria-expanded (being true when the popup is shown)\n  // but axe only allows this on certain elements and we use release anncounements on\n  // all sorts of elements. Semantically, I don't think it makes sense because the point\n  // of aria-expanded is a hint to the user that there is something that can be expanded.\n  // The user can't cause a release announcement to be shown, it just appears when it thinks\n  // it's time, so I think adding it here is misleading.\n  delete referenceProps[\"aria-expanded\"];\n\n  return cloneElement(children, referenceProps);\n}\n\n/**\n * The container for the ReleaseAnnouncement components.\n * Manage focus and positioning of the children.\n * @param children\n */\nfunction ReleaseAnnouncementContainer({\n  children,\n}: PropsWithChildren): JSX.Element | null {\n  const {\n    context: floatingContext,\n    arrowRef,\n    displayArrow,\n    ...rest\n  } = useReleaseAnnouncementContext();\n\n  if (!floatingContext.open) return null;\n\n  return (\n    <FloatingPortal>\n      <FloatingFocusManager context={floatingContext} modal={false}>\n        <div\n          ref={rest.refs.setFloating}\n          style={rest.floatingStyles}\n          aria-labelledby={rest.labelId}\n          aria-describedby={rest.descriptionId}\n          {...rest.getFloatingProps()}\n          className={styles.content}\n        >\n          {displayArrow && (\n            <FloatingArrow\n              ref={arrowRef}\n              context={floatingContext}\n              // design absolute value\n              width={20}\n              height={12}\n              className={styles.arrow}\n            />\n          )}\n          {children}\n        </div>\n      </FloatingFocusManager>\n    </FloatingPortal>\n  );\n}\n\n/**\n * The content of the ReleaseAnnouncement component.\n * ---------------------------------------------------------------\n * - The header in a bold text                  -------------    -\n * - A description in a regular text           | Close button |  -\n * - Description can be on multiple lines       -------------    -\n * ---------------------------------------------------------------\n */\nfunction ReleaseAnnouncementContent(): JSX.Element {\n  const { labelId, descriptionId, header, description, closeLabel, onClick } =\n    useReleaseAnnouncementContext();\n\n  return (\n    <>\n      <Text\n        as=\"h3\"\n        id={labelId}\n        className={styles.header}\n        size=\"lg\"\n        weight=\"semibold\"\n      >\n        {header}\n      </Text>\n      <Text\n        as=\"span\"\n        id={descriptionId}\n        className={styles.description}\n        size=\"sm\"\n        weight=\"regular\"\n      >\n        {description}\n      </Text>\n      <Button\n        size=\"sm\"\n        kind=\"secondary\"\n        className={styles.button}\n        onClick={onClick}\n      >\n        {closeLabel}\n      </Button>\n    </>\n  );\n}\n"],"names":["useReleaseAnnouncement","jsxs","ReleaseAnnouncementContext","jsx","useReleaseAnnouncementContext","useMergeRefs","isValidElement","cloneElement","FloatingPortal","FloatingFocusManager","styles","FloatingArrow","Fragment","Text","Button"],"mappings":";;;;;;;;;;AAoDO,SAAS,oBAAoB;AAAA;AAAA;AAAA;AAAA,EAIlC;AAAA,EACA,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,GAAG;AACL,GAA6D;AAC3D,QAAM,UAAUA,uBAAAA,uBAAuB,EAAE,WAAW,cAAc,GAAG,OAAO;AAE5E,SACEC,2BAAAA,KAACC,2BAAAA,2BAA2B,UAA3B,EAAoC,OAAO,SAC1C,UAAA;AAAA,IAAAC,+BAAC,6BAA2B,UAAS;AAAA,IACrCA,2BAAAA,IAAC,8BAAA,EACC,UAAAA,2BAAAA,IAAC,4BAAA,CAAA,CAA2B,EAAA,CAC9B;AAAA,EAAA,GACF;AAEJ;AAQA,SAAS,0BAA0B;AAAA,EACjC;AACF,GAA6C;AAC3C,QAAM,UAAUC,2BAAAA,8BAAA;AAIhB,QAAM,cAAe,UAAoD;AACzE,QAAM,MAAMC,MAAAA,aAAa,CAAC,QAAQ,KAAK,cAAc,WAAW,CAAC;AAEjE,MAAI,CAACC,MAAAA,eAAe,QAAQ,GAAG;AAC7B,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEA,QAAM,iBAAiB,QAAQ,kBAAkB;AAAA,IAC/C;AAAA;AAAA;AAAA,IAGA,GAAI,QAAQ,QAAQ;AAAA,MAClB,oBAAoB,QAAQ,mBAAmB;AAAA,IAAA;AAAA,EACjD,CACD;AAQD,SAAO,eAAe,eAAe;AAErC,SAAOC,MAAAA,aAAa,UAAU,cAAc;AAC9C;AAOA,SAAS,6BAA6B;AAAA,EACpC;AACF,GAA0C;AACxC,QAAM;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACDH,yDAAA;AAEJ,MAAI,CAAC,gBAAgB,KAAM,QAAO;AAElC,wCACGI,MAAAA,gBAAA,EACC,UAAAL,2BAAAA,IAACM,MAAAA,wBAAqB,SAAS,iBAAiB,OAAO,OACrD,UAAAR,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,KAAK,KAAK;AAAA,MACf,OAAO,KAAK;AAAA,MACZ,mBAAiB,KAAK;AAAA,MACtB,oBAAkB,KAAK;AAAA,MACtB,GAAG,KAAK,iBAAA;AAAA,MACT,WAAWS,2BAAAA,QAAO;AAAA,MAEjB,UAAA;AAAA,QAAA,gBACCP,2BAAAA;AAAAA,UAACQ,MAAAA;AAAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,SAAS;AAAA,YAET,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAWD,2BAAAA,QAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAGrB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ;AAUA,SAAS,6BAA0C;AACjD,QAAM,EAAE,SAAS,eAAe,QAAQ,aAAa,YAAY,QAAA,IAC/DN,yDAAA;AAEF,SACEH,2BAAAA,KAAAW,qBAAA,EACE,UAAA;AAAA,IAAAT,2BAAAA;AAAAA,MAACU,KAAAA;AAAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,IAAI;AAAA,QACJ,WAAWH,2BAAAA,QAAO;AAAA,QAClB,MAAK;AAAA,QACL,QAAO;AAAA,QAEN,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEHP,2BAAAA;AAAAA,MAACU,KAAAA;AAAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,IAAI;AAAA,QACJ,WAAWH,2BAAAA,QAAO;AAAA,QAClB,MAAK;AAAA,QACL,QAAO;AAAA,QAEN,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEHP,2BAAAA;AAAAA,MAACW,OAAAA;AAAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,WAAWJ,2BAAAA,QAAO;AAAA,QAClB;AAAA,QAEC,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;;"}
+{"version":3,"file":"ReleaseAnnouncement.cjs","sources":["../../../src/components/ReleaseAnnouncement/ReleaseAnnouncement.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 React, {\n  cloneElement,\n  isValidElement,\n  type JSX,\n  type PropsWithChildren,\n  type Ref,\n} from \"react\";\nimport {\n  FloatingPortal,\n  FloatingFocusManager,\n  type Placement,\n  useMergeRefs,\n  FloatingArrow,\n} from \"@floating-ui/react\";\nimport { Text } from \"../Typography/Text\";\nimport { Button } from \"../Button\";\nimport styles from \"./ReleaseAnnouncement.module.css\";\nimport {\n  useReleaseAnnouncementContext,\n  ReleaseAnnouncementContext,\n} from \"./ReleaseAnnouncementContext\";\nimport { useReleaseAnnouncement } from \"./useReleaseAnnouncement\";\n\ntype UseReleaseAnnouncementParam = Parameters<typeof useReleaseAnnouncement>[0];\n\ninterface ReleaseAnnouncementProps extends Omit<\n  UseReleaseAnnouncementParam,\n  \"placement\" | \"displayArrow\"\n> {\n  /**\n   * The placement of the component\n   * @default \"right\"\n   */\n  placement?: Placement;\n  /**\n   * Whether to display an arrow.\n   * @default true\n   */\n  displayArrow?: boolean;\n}\n\n/**\n * The ReleaseAnnouncement component purpose is to inform the user of a new available feature.\n * This component is a floating component that will appear next to an anchor.\n * @param children - Act as an anchor, the component will be displayed alongside of it.\n * @param placement - The placement of the component\n */\nexport function ReleaseAnnouncement({\n  /**\n   * The children anchor should be a single valid React element.\n   */\n  children,\n  placement = \"right\",\n  displayArrow = true,\n  ...props\n}: PropsWithChildren<ReleaseAnnouncementProps>): JSX.Element {\n  const context = useReleaseAnnouncement({ placement, displayArrow, ...props });\n\n  return (\n    <ReleaseAnnouncementContext.Provider value={context}>\n      <ReleaseAnnouncementAnchor>{children}</ReleaseAnnouncementAnchor>\n      <ReleaseAnnouncementContainer>\n        <ReleaseAnnouncementContent />\n      </ReleaseAnnouncementContainer>\n    </ReleaseAnnouncementContext.Provider>\n  );\n}\n\n/**\n * The anchor for the ReleaseAnnouncement components.\n * The Release Announcement will appear next to this element.\n * @param children - should be a single valid React element\n * @constructor\n */\nfunction ReleaseAnnouncementAnchor({\n  children,\n}: Readonly<PropsWithChildren>): JSX.Element {\n  const context = useReleaseAnnouncementContext();\n\n  // The children can have a ref and we don't want to discard it\n  // Doing a dirty cast to get the optional ref\n  const childrenRef = (children as unknown as { ref?: Ref<HTMLElement> })?.ref;\n  const ref = useMergeRefs([context.refs.setReference, childrenRef]);\n\n  if (!isValidElement(children)) {\n    throw new Error(\n      \"ReleaseAnnouncement anchor must be a single valid React element\",\n    );\n  }\n\n  const referenceProps = context.getReferenceProps({\n    ref,\n    // If the ReleaseAnnouncement is open, we need manually aria-describedby.\n    // The RA has the dialog role and it's not adding automatically the aria-describedby.\n    ...(context.open && {\n      \"aria-describedby\": context.getFloatingProps().id as string,\n    }),\n  });\n\n  // getReferenceProps includes aria-expanded (being true when the popup is shown)\n  // but axe only allows this on certain elements and we use release anncounements on\n  // all sorts of elements. Semantically, I don't think it makes sense because the point\n  // of aria-expanded is a hint to the user that there is something that can be expanded.\n  // The user can't cause a release announcement to be shown, it just appears when it thinks\n  // it's time, so I think adding it here is misleading.\n  delete referenceProps[\"aria-expanded\"];\n\n  return cloneElement(children, referenceProps);\n}\n\n/**\n * The container for the ReleaseAnnouncement components.\n * Manage focus and positioning of the children.\n * @param children\n */\nfunction ReleaseAnnouncementContainer({\n  children,\n}: PropsWithChildren): JSX.Element | null {\n  const {\n    context: floatingContext,\n    arrowRef,\n    displayArrow,\n    ...rest\n  } = useReleaseAnnouncementContext();\n\n  if (!floatingContext.open) return null;\n\n  return (\n    <FloatingPortal>\n      <FloatingFocusManager context={floatingContext} modal={false}>\n        <div\n          ref={rest.refs.setFloating}\n          style={rest.floatingStyles}\n          aria-labelledby={rest.labelId}\n          aria-describedby={rest.descriptionId}\n          {...rest.getFloatingProps()}\n          className={styles.content}\n        >\n          {displayArrow && (\n            <FloatingArrow\n              ref={arrowRef}\n              context={floatingContext}\n              // design absolute value\n              width={20}\n              height={12}\n              className={styles.arrow}\n            />\n          )}\n          {children}\n        </div>\n      </FloatingFocusManager>\n    </FloatingPortal>\n  );\n}\n\n/**\n * The content of the ReleaseAnnouncement component.\n * ---------------------------------------------------------------\n * - The header in a bold text                  -------------    -\n * - A description in a regular text           | Close button |  -\n * - Description can be on multiple lines       -------------    -\n * ---------------------------------------------------------------\n */\nfunction ReleaseAnnouncementContent(): JSX.Element {\n  const { labelId, descriptionId, header, description, closeLabel, onClick } =\n    useReleaseAnnouncementContext();\n\n  return (\n    <>\n      <Text\n        as=\"h3\"\n        id={labelId}\n        className={styles.header}\n        size=\"lg\"\n        weight=\"semibold\"\n      >\n        {header}\n      </Text>\n      <Text\n        as=\"span\"\n        id={descriptionId}\n        className={styles.description}\n        size=\"sm\"\n        weight=\"regular\"\n      >\n        {description}\n      </Text>\n      <Button\n        size=\"sm\"\n        kind=\"secondary\"\n        className={styles.button}\n        onClick={onClick}\n      >\n        {closeLabel}\n      </Button>\n    </>\n  );\n}\n"],"names":["useReleaseAnnouncement","jsxs","ReleaseAnnouncementContext","jsx","useReleaseAnnouncementContext","useMergeRefs","isValidElement","cloneElement","FloatingPortal","FloatingFocusManager","styles","FloatingArrow","Fragment","Text","Button"],"mappings":";;;;;;;;;;AAsDO,SAAS,oBAAoB;AAAA;AAAA;AAAA;AAAA,EAIlC;AAAA,EACA,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,GAAG;AACL,GAA6D;AAC3D,QAAM,UAAUA,uBAAAA,uBAAuB,EAAE,WAAW,cAAc,GAAG,OAAO;AAE5E,SACEC,2BAAAA,KAACC,2BAAAA,2BAA2B,UAA3B,EAAoC,OAAO,SAC1C,UAAA;AAAA,IAAAC,+BAAC,6BAA2B,UAAS;AAAA,IACrCA,2BAAAA,IAAC,8BAAA,EACC,UAAAA,2BAAAA,IAAC,4BAAA,CAAA,CAA2B,EAAA,CAC9B;AAAA,EAAA,GACF;AAEJ;AAQA,SAAS,0BAA0B;AAAA,EACjC;AACF,GAA6C;AAC3C,QAAM,UAAUC,2BAAAA,8BAAA;AAIhB,QAAM,cAAe,UAAoD;AACzE,QAAM,MAAMC,MAAAA,aAAa,CAAC,QAAQ,KAAK,cAAc,WAAW,CAAC;AAEjE,MAAI,CAACC,MAAAA,eAAe,QAAQ,GAAG;AAC7B,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEA,QAAM,iBAAiB,QAAQ,kBAAkB;AAAA,IAC/C;AAAA;AAAA;AAAA,IAGA,GAAI,QAAQ,QAAQ;AAAA,MAClB,oBAAoB,QAAQ,mBAAmB;AAAA,IAAA;AAAA,EACjD,CACD;AAQD,SAAO,eAAe,eAAe;AAErC,SAAOC,MAAAA,aAAa,UAAU,cAAc;AAC9C;AAOA,SAAS,6BAA6B;AAAA,EACpC;AACF,GAA0C;AACxC,QAAM;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACDH,yDAAA;AAEJ,MAAI,CAAC,gBAAgB,KAAM,QAAO;AAElC,wCACGI,MAAAA,gBAAA,EACC,UAAAL,2BAAAA,IAACM,MAAAA,wBAAqB,SAAS,iBAAiB,OAAO,OACrD,UAAAR,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,KAAK,KAAK;AAAA,MACf,OAAO,KAAK;AAAA,MACZ,mBAAiB,KAAK;AAAA,MACtB,oBAAkB,KAAK;AAAA,MACtB,GAAG,KAAK,iBAAA;AAAA,MACT,WAAWS,2BAAAA,QAAO;AAAA,MAEjB,UAAA;AAAA,QAAA,gBACCP,2BAAAA;AAAAA,UAACQ,MAAAA;AAAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,SAAS;AAAA,YAET,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAWD,2BAAAA,QAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAGrB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ;AAUA,SAAS,6BAA0C;AACjD,QAAM,EAAE,SAAS,eAAe,QAAQ,aAAa,YAAY,QAAA,IAC/DN,yDAAA;AAEF,SACEH,2BAAAA,KAAAW,qBAAA,EACE,UAAA;AAAA,IAAAT,2BAAAA;AAAAA,MAACU,KAAAA;AAAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,IAAI;AAAA,QACJ,WAAWH,2BAAAA,QAAO;AAAA,QAClB,MAAK;AAAA,QACL,QAAO;AAAA,QAEN,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEHP,2BAAAA;AAAAA,MAACU,KAAAA;AAAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,IAAI;AAAA,QACJ,WAAWH,2BAAAA,QAAO;AAAA,QAClB,MAAK;AAAA,QACL,QAAO;AAAA,QAEN,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEHP,2BAAAA;AAAAA,MAACW,OAAAA;AAAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,WAAWJ,2BAAAA,QAAO;AAAA,QAClB;AAAA,QAEC,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ReleaseAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/ReleaseAnnouncement/ReleaseAnnouncement.tsx"],"names":[],"mappings":"AAOA,OAAc,EAGZ,KAAK,GAAG,EACR,KAAK,iBAAiB,EAEvB,MAAM,OAAO,CAAC;AACf,OAAO,EAGL,KAAK,SAAS,EAGf,MAAM,oBAAoB,CAAC;AAQ5B,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE,KAAK,2BAA2B,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEhF,UAAU,wBACR,SAAQ,IAAI,CAAC,2BAA2B,EAAE,WAAW,GAAG,cAAc,CAAC;IACvE;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC;AAClC;;GAEG;AACH,QAAQ,EACR,SAAmB,EACnB,YAAmB,EACnB,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,wBAAwB,CAAC,GAAG,GAAG,CAAC,OAAO,CAW3D"}
+{"version":3,"file":"ReleaseAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/ReleaseAnnouncement/ReleaseAnnouncement.tsx"],"names":[],"mappings":"AAOA,OAAc,EAGZ,KAAK,GAAG,EACR,KAAK,iBAAiB,EAEvB,MAAM,OAAO,CAAC;AACf,OAAO,EAGL,KAAK,SAAS,EAGf,MAAM,oBAAoB,CAAC;AAQ5B,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE,KAAK,2BAA2B,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEhF,UAAU,wBAAyB,SAAQ,IAAI,CAC7C,2BAA2B,EAC3B,WAAW,GAAG,cAAc,CAC7B;IACC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC;AAClC;;GAEG;AACH,QAAQ,EACR,SAAmB,EACnB,YAAmB,EACnB,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,wBAAwB,CAAC,GAAG,GAAG,CAAC,OAAO,CAW3D"}

package/dist/components/ReleaseAnnouncement/ReleaseAnnouncement.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReleaseAnnouncement.js","sources":["../../../src/components/ReleaseAnnouncement/ReleaseAnnouncement.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 React, {\n  cloneElement,\n  isValidElement,\n  type JSX,\n  type PropsWithChildren,\n  type Ref,\n} from \"react\";\nimport {\n  FloatingPortal,\n  FloatingFocusManager,\n  type Placement,\n  useMergeRefs,\n  FloatingArrow,\n} from \"@floating-ui/react\";\nimport { Text } from \"../Typography/Text\";\nimport { Button } from \"../Button\";\nimport styles from \"./ReleaseAnnouncement.module.css\";\nimport {\n  useReleaseAnnouncementContext,\n  ReleaseAnnouncementContext,\n} from \"./ReleaseAnnouncementContext\";\nimport { useReleaseAnnouncement } from \"./useReleaseAnnouncement\";\n\ntype UseReleaseAnnouncementParam = Parameters<typeof useReleaseAnnouncement>[0];\n\ninterface ReleaseAnnouncementProps\n  extends Omit<UseReleaseAnnouncementParam, \"placement\" | \"displayArrow\"> {\n  /**\n   * The placement of the component\n   * @default \"right\"\n   */\n  placement?: Placement;\n  /**\n   * Whether to display an arrow.\n   * @default true\n   */\n  displayArrow?: boolean;\n}\n\n/**\n * The ReleaseAnnouncement component purpose is to inform the user of a new available feature.\n * This component is a floating component that will appear next to an anchor.\n * @param children - Act as an anchor, the component will be displayed alongside of it.\n * @param placement - The placement of the component\n */\nexport function ReleaseAnnouncement({\n  /**\n   * The children anchor should be a single valid React element.\n   */\n  children,\n  placement = \"right\",\n  displayArrow = true,\n  ...props\n}: PropsWithChildren<ReleaseAnnouncementProps>): JSX.Element {\n  const context = useReleaseAnnouncement({ placement, displayArrow, ...props });\n\n  return (\n    <ReleaseAnnouncementContext.Provider value={context}>\n      <ReleaseAnnouncementAnchor>{children}</ReleaseAnnouncementAnchor>\n      <ReleaseAnnouncementContainer>\n        <ReleaseAnnouncementContent />\n      </ReleaseAnnouncementContainer>\n    </ReleaseAnnouncementContext.Provider>\n  );\n}\n\n/**\n * The anchor for the ReleaseAnnouncement components.\n * The Release Announcement will appear next to this element.\n * @param children - should be a single valid React element\n * @constructor\n */\nfunction ReleaseAnnouncementAnchor({\n  children,\n}: Readonly<PropsWithChildren>): JSX.Element {\n  const context = useReleaseAnnouncementContext();\n\n  // The children can have a ref and we don't want to discard it\n  // Doing a dirty cast to get the optional ref\n  const childrenRef = (children as unknown as { ref?: Ref<HTMLElement> })?.ref;\n  const ref = useMergeRefs([context.refs.setReference, childrenRef]);\n\n  if (!isValidElement(children)) {\n    throw new Error(\n      \"ReleaseAnnouncement anchor must be a single valid React element\",\n    );\n  }\n\n  const referenceProps = context.getReferenceProps({\n    ref,\n    // If the ReleaseAnnouncement is open, we need manually aria-describedby.\n    // The RA has the dialog role and it's not adding automatically the aria-describedby.\n    ...(context.open && {\n      \"aria-describedby\": context.getFloatingProps().id as string,\n    }),\n  });\n\n  // getReferenceProps includes aria-expanded (being true when the popup is shown)\n  // but axe only allows this on certain elements and we use release anncounements on\n  // all sorts of elements. Semantically, I don't think it makes sense because the point\n  // of aria-expanded is a hint to the user that there is something that can be expanded.\n  // The user can't cause a release announcement to be shown, it just appears when it thinks\n  // it's time, so I think adding it here is misleading.\n  delete referenceProps[\"aria-expanded\"];\n\n  return cloneElement(children, referenceProps);\n}\n\n/**\n * The container for the ReleaseAnnouncement components.\n * Manage focus and positioning of the children.\n * @param children\n */\nfunction ReleaseAnnouncementContainer({\n  children,\n}: PropsWithChildren): JSX.Element | null {\n  const {\n    context: floatingContext,\n    arrowRef,\n    displayArrow,\n    ...rest\n  } = useReleaseAnnouncementContext();\n\n  if (!floatingContext.open) return null;\n\n  return (\n    <FloatingPortal>\n      <FloatingFocusManager context={floatingContext} modal={false}>\n        <div\n          ref={rest.refs.setFloating}\n          style={rest.floatingStyles}\n          aria-labelledby={rest.labelId}\n          aria-describedby={rest.descriptionId}\n          {...rest.getFloatingProps()}\n          className={styles.content}\n        >\n          {displayArrow && (\n            <FloatingArrow\n              ref={arrowRef}\n              context={floatingContext}\n              // design absolute value\n              width={20}\n              height={12}\n              className={styles.arrow}\n            />\n          )}\n          {children}\n        </div>\n      </FloatingFocusManager>\n    </FloatingPortal>\n  );\n}\n\n/**\n * The content of the ReleaseAnnouncement component.\n * ---------------------------------------------------------------\n * - The header in a bold text                  -------------    -\n * - A description in a regular text           | Close button |  -\n * - Description can be on multiple lines       -------------    -\n * ---------------------------------------------------------------\n */\nfunction ReleaseAnnouncementContent(): JSX.Element {\n  const { labelId, descriptionId, header, description, closeLabel, onClick } =\n    useReleaseAnnouncementContext();\n\n  return (\n    <>\n      <Text\n        as=\"h3\"\n        id={labelId}\n        className={styles.header}\n        size=\"lg\"\n        weight=\"semibold\"\n      >\n        {header}\n      </Text>\n      <Text\n        as=\"span\"\n        id={descriptionId}\n        className={styles.description}\n        size=\"sm\"\n        weight=\"regular\"\n      >\n        {description}\n      </Text>\n      <Button\n        size=\"sm\"\n        kind=\"secondary\"\n        className={styles.button}\n        onClick={onClick}\n      >\n        {closeLabel}\n      </Button>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAoDO,SAAS,oBAAoB;AAAA;AAAA;AAAA;AAAA,EAIlC;AAAA,EACA,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,GAAG;AACL,GAA6D;AAC3D,QAAM,UAAU,uBAAuB,EAAE,WAAW,cAAc,GAAG,OAAO;AAE5E,SACE,qBAAC,2BAA2B,UAA3B,EAAoC,OAAO,SAC1C,UAAA;AAAA,IAAA,oBAAC,6BAA2B,UAAS;AAAA,IACrC,oBAAC,8BAAA,EACC,UAAA,oBAAC,4BAAA,CAAA,CAA2B,EAAA,CAC9B;AAAA,EAAA,GACF;AAEJ;AAQA,SAAS,0BAA0B;AAAA,EACjC;AACF,GAA6C;AAC3C,QAAM,UAAU,8BAAA;AAIhB,QAAM,cAAe,UAAoD;AACzE,QAAM,MAAM,aAAa,CAAC,QAAQ,KAAK,cAAc,WAAW,CAAC;AAEjE,MAAI,CAAC,eAAe,QAAQ,GAAG;AAC7B,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEA,QAAM,iBAAiB,QAAQ,kBAAkB;AAAA,IAC/C;AAAA;AAAA;AAAA,IAGA,GAAI,QAAQ,QAAQ;AAAA,MAClB,oBAAoB,QAAQ,mBAAmB;AAAA,IAAA;AAAA,EACjD,CACD;AAQD,SAAO,eAAe,eAAe;AAErC,SAAO,aAAa,UAAU,cAAc;AAC9C;AAOA,SAAS,6BAA6B;AAAA,EACpC;AACF,GAA0C;AACxC,QAAM;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,8BAAA;AAEJ,MAAI,CAAC,gBAAgB,KAAM,QAAO;AAElC,6BACG,gBAAA,EACC,UAAA,oBAAC,wBAAqB,SAAS,iBAAiB,OAAO,OACrD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,KAAK,KAAK;AAAA,MACf,OAAO,KAAK;AAAA,MACZ,mBAAiB,KAAK;AAAA,MACtB,oBAAkB,KAAK;AAAA,MACtB,GAAG,KAAK,iBAAA;AAAA,MACT,WAAW,OAAO;AAAA,MAEjB,UAAA;AAAA,QAAA,gBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,SAAS;AAAA,YAET,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW,OAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAGrB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ;AAUA,SAAS,6BAA0C;AACjD,QAAM,EAAE,SAAS,eAAe,QAAQ,aAAa,YAAY,QAAA,IAC/D,8BAAA;AAEF,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,IAAI;AAAA,QACJ,WAAW,OAAO;AAAA,QAClB,MAAK;AAAA,QACL,QAAO;AAAA,QAEN,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,IAAI;AAAA,QACJ,WAAW,OAAO;AAAA,QAClB,MAAK;AAAA,QACL,QAAO;AAAA,QAEN,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,WAAW,OAAO;AAAA,QAClB;AAAA,QAEC,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}
+{"version":3,"file":"ReleaseAnnouncement.js","sources":["../../../src/components/ReleaseAnnouncement/ReleaseAnnouncement.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 React, {\n  cloneElement,\n  isValidElement,\n  type JSX,\n  type PropsWithChildren,\n  type Ref,\n} from \"react\";\nimport {\n  FloatingPortal,\n  FloatingFocusManager,\n  type Placement,\n  useMergeRefs,\n  FloatingArrow,\n} from \"@floating-ui/react\";\nimport { Text } from \"../Typography/Text\";\nimport { Button } from \"../Button\";\nimport styles from \"./ReleaseAnnouncement.module.css\";\nimport {\n  useReleaseAnnouncementContext,\n  ReleaseAnnouncementContext,\n} from \"./ReleaseAnnouncementContext\";\nimport { useReleaseAnnouncement } from \"./useReleaseAnnouncement\";\n\ntype UseReleaseAnnouncementParam = Parameters<typeof useReleaseAnnouncement>[0];\n\ninterface ReleaseAnnouncementProps extends Omit<\n  UseReleaseAnnouncementParam,\n  \"placement\" | \"displayArrow\"\n> {\n  /**\n   * The placement of the component\n   * @default \"right\"\n   */\n  placement?: Placement;\n  /**\n   * Whether to display an arrow.\n   * @default true\n   */\n  displayArrow?: boolean;\n}\n\n/**\n * The ReleaseAnnouncement component purpose is to inform the user of a new available feature.\n * This component is a floating component that will appear next to an anchor.\n * @param children - Act as an anchor, the component will be displayed alongside of it.\n * @param placement - The placement of the component\n */\nexport function ReleaseAnnouncement({\n  /**\n   * The children anchor should be a single valid React element.\n   */\n  children,\n  placement = \"right\",\n  displayArrow = true,\n  ...props\n}: PropsWithChildren<ReleaseAnnouncementProps>): JSX.Element {\n  const context = useReleaseAnnouncement({ placement, displayArrow, ...props });\n\n  return (\n    <ReleaseAnnouncementContext.Provider value={context}>\n      <ReleaseAnnouncementAnchor>{children}</ReleaseAnnouncementAnchor>\n      <ReleaseAnnouncementContainer>\n        <ReleaseAnnouncementContent />\n      </ReleaseAnnouncementContainer>\n    </ReleaseAnnouncementContext.Provider>\n  );\n}\n\n/**\n * The anchor for the ReleaseAnnouncement components.\n * The Release Announcement will appear next to this element.\n * @param children - should be a single valid React element\n * @constructor\n */\nfunction ReleaseAnnouncementAnchor({\n  children,\n}: Readonly<PropsWithChildren>): JSX.Element {\n  const context = useReleaseAnnouncementContext();\n\n  // The children can have a ref and we don't want to discard it\n  // Doing a dirty cast to get the optional ref\n  const childrenRef = (children as unknown as { ref?: Ref<HTMLElement> })?.ref;\n  const ref = useMergeRefs([context.refs.setReference, childrenRef]);\n\n  if (!isValidElement(children)) {\n    throw new Error(\n      \"ReleaseAnnouncement anchor must be a single valid React element\",\n    );\n  }\n\n  const referenceProps = context.getReferenceProps({\n    ref,\n    // If the ReleaseAnnouncement is open, we need manually aria-describedby.\n    // The RA has the dialog role and it's not adding automatically the aria-describedby.\n    ...(context.open && {\n      \"aria-describedby\": context.getFloatingProps().id as string,\n    }),\n  });\n\n  // getReferenceProps includes aria-expanded (being true when the popup is shown)\n  // but axe only allows this on certain elements and we use release anncounements on\n  // all sorts of elements. Semantically, I don't think it makes sense because the point\n  // of aria-expanded is a hint to the user that there is something that can be expanded.\n  // The user can't cause a release announcement to be shown, it just appears when it thinks\n  // it's time, so I think adding it here is misleading.\n  delete referenceProps[\"aria-expanded\"];\n\n  return cloneElement(children, referenceProps);\n}\n\n/**\n * The container for the ReleaseAnnouncement components.\n * Manage focus and positioning of the children.\n * @param children\n */\nfunction ReleaseAnnouncementContainer({\n  children,\n}: PropsWithChildren): JSX.Element | null {\n  const {\n    context: floatingContext,\n    arrowRef,\n    displayArrow,\n    ...rest\n  } = useReleaseAnnouncementContext();\n\n  if (!floatingContext.open) return null;\n\n  return (\n    <FloatingPortal>\n      <FloatingFocusManager context={floatingContext} modal={false}>\n        <div\n          ref={rest.refs.setFloating}\n          style={rest.floatingStyles}\n          aria-labelledby={rest.labelId}\n          aria-describedby={rest.descriptionId}\n          {...rest.getFloatingProps()}\n          className={styles.content}\n        >\n          {displayArrow && (\n            <FloatingArrow\n              ref={arrowRef}\n              context={floatingContext}\n              // design absolute value\n              width={20}\n              height={12}\n              className={styles.arrow}\n            />\n          )}\n          {children}\n        </div>\n      </FloatingFocusManager>\n    </FloatingPortal>\n  );\n}\n\n/**\n * The content of the ReleaseAnnouncement component.\n * ---------------------------------------------------------------\n * - The header in a bold text                  -------------    -\n * - A description in a regular text           | Close button |  -\n * - Description can be on multiple lines       -------------    -\n * ---------------------------------------------------------------\n */\nfunction ReleaseAnnouncementContent(): JSX.Element {\n  const { labelId, descriptionId, header, description, closeLabel, onClick } =\n    useReleaseAnnouncementContext();\n\n  return (\n    <>\n      <Text\n        as=\"h3\"\n        id={labelId}\n        className={styles.header}\n        size=\"lg\"\n        weight=\"semibold\"\n      >\n        {header}\n      </Text>\n      <Text\n        as=\"span\"\n        id={descriptionId}\n        className={styles.description}\n        size=\"sm\"\n        weight=\"regular\"\n      >\n        {description}\n      </Text>\n      <Button\n        size=\"sm\"\n        kind=\"secondary\"\n        className={styles.button}\n        onClick={onClick}\n      >\n        {closeLabel}\n      </Button>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAsDO,SAAS,oBAAoB;AAAA;AAAA;AAAA;AAAA,EAIlC;AAAA,EACA,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,GAAG;AACL,GAA6D;AAC3D,QAAM,UAAU,uBAAuB,EAAE,WAAW,cAAc,GAAG,OAAO;AAE5E,SACE,qBAAC,2BAA2B,UAA3B,EAAoC,OAAO,SAC1C,UAAA;AAAA,IAAA,oBAAC,6BAA2B,UAAS;AAAA,IACrC,oBAAC,8BAAA,EACC,UAAA,oBAAC,4BAAA,CAAA,CAA2B,EAAA,CAC9B;AAAA,EAAA,GACF;AAEJ;AAQA,SAAS,0BAA0B;AAAA,EACjC;AACF,GAA6C;AAC3C,QAAM,UAAU,8BAAA;AAIhB,QAAM,cAAe,UAAoD;AACzE,QAAM,MAAM,aAAa,CAAC,QAAQ,KAAK,cAAc,WAAW,CAAC;AAEjE,MAAI,CAAC,eAAe,QAAQ,GAAG;AAC7B,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEA,QAAM,iBAAiB,QAAQ,kBAAkB;AAAA,IAC/C;AAAA;AAAA;AAAA,IAGA,GAAI,QAAQ,QAAQ;AAAA,MAClB,oBAAoB,QAAQ,mBAAmB;AAAA,IAAA;AAAA,EACjD,CACD;AAQD,SAAO,eAAe,eAAe;AAErC,SAAO,aAAa,UAAU,cAAc;AAC9C;AAOA,SAAS,6BAA6B;AAAA,EACpC;AACF,GAA0C;AACxC,QAAM;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,8BAAA;AAEJ,MAAI,CAAC,gBAAgB,KAAM,QAAO;AAElC,6BACG,gBAAA,EACC,UAAA,oBAAC,wBAAqB,SAAS,iBAAiB,OAAO,OACrD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,KAAK,KAAK;AAAA,MACf,OAAO,KAAK;AAAA,MACZ,mBAAiB,KAAK;AAAA,MACtB,oBAAkB,KAAK;AAAA,MACtB,GAAG,KAAK,iBAAA;AAAA,MACT,WAAW,OAAO;AAAA,MAEjB,UAAA;AAAA,QAAA,gBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,SAAS;AAAA,YAET,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW,OAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAGrB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ;AAUA,SAAS,6BAA0C;AACjD,QAAM,EAAE,SAAS,eAAe,QAAQ,aAAa,YAAY,QAAA,IAC/D,8BAAA;AAEF,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,IAAI;AAAA,QACJ,WAAW,OAAO;AAAA,QAClB,MAAK;AAAA,QACL,QAAO;AAAA,QAEN,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,IAAI;AAAA,QACJ,WAAW,OAAO;AAAA,QAClB,MAAK;AAAA,QACL,QAAO;AAAA,QAEN,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,WAAW,OAAO;AAAA,QAClB;AAAA,QAEC,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}

package/dist/style.css

@@ -247,7 +247,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._icon-button_1pz9o_8 {
+._icon-button_1215g_8 {
   --cpd-icon-button-indicator-border-size: calc(
     var(--cpd-icon-button-size) * 0.0625
   );
@@ -267,13 +267,13 @@ Please see LICENSE files in the repository root for full details.
   line-height: 0px;
 }
 
-._icon-button_1pz9o_8[data-kind="primary"] {
+._icon-button_1215g_8[data-kind="primary"] {
   * {
-    color: var(--cpd-color-icon-tertiary);
+    color: var(--cpd-color-icon-secondary);
   }
 }
 
-._icon-button_1pz9o_8[data-kind="secondary"] {
+._icon-button_1215g_8[data-kind="secondary"] {
   background: var(--cpd-color-bg-subtle-secondary);
 
   * {
@@ -281,11 +281,11 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-._no-background_1pz9o_42[data-kind="secondary"] {
+._no-background_1215g_42[data-kind="secondary"] {
   background: transparent;
 }
 
-._icon-button_1pz9o_8[aria-disabled="true"] {
+._icon-button_1215g_8[aria-disabled="true"] {
   cursor: not-allowed;
 
   * {
@@ -298,7 +298,7 @@ Please see LICENSE files in the repository root for full details.
  */
 
 @media (hover) {
-  ._icon-button_1pz9o_8:not([aria-disabled="true"]):hover {
+  ._icon-button_1215g_8:not([aria-disabled="true"]):hover {
     background: var(--cpd-color-bg-subtle-primary);
 
     * {
@@ -307,7 +307,7 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-._icon-button_1pz9o_8:not([aria-disabled="true"]):active {
+._icon-button_1215g_8:not([aria-disabled="true"]):active {
   background: var(--cpd-color-bg-subtle-primary);
 
   * {
@@ -316,7 +316,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 @media (hover) {
-  ._icon-button_1pz9o_8:not([aria-disabled="true"])[data-indicator]:is(:hover)::before {
+  ._icon-button_1215g_8:not([aria-disabled="true"])[data-indicator]:is(:hover)::before {
     /* Same colour as the background */
     border: var(--cpd-icon-button-indicator-border-size) solid
       var(--cpd-color-bg-subtle-primary);
@@ -325,7 +325,7 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-._icon-button_1pz9o_8:not([aria-disabled="true"])[data-indicator]:is(:active)::before {
+._icon-button_1215g_8:not([aria-disabled="true"])[data-indicator]:is(:active)::before {
   /* Same colour as the background */
   border: var(--cpd-icon-button-indicator-border-size) solid
     var(--cpd-color-bg-subtle-primary);
@@ -334,13 +334,13 @@ Please see LICENSE files in the repository root for full details.
 }
 
 @media (hover) {
-  ._icon-button_1pz9o_8:not([aria-disabled="true"])._destructive_1pz9o_95:hover {
+  ._icon-button_1215g_8:not([aria-disabled="true"])._destructive_1215g_95:hover {
     background: var(--cpd-color-bg-critical-subtle-hovered);
     outline: 1px solid var(--cpd-color-border-critical-subtle);
   }
 }
 
-._icon-button_1pz9o_8:not([aria-disabled="true"])._destructive_1pz9o_95 {
+._icon-button_1215g_8:not([aria-disabled="true"])._destructive_1215g_95 {
   * {
     color: var(--cpd-color-icon-critical-primary);
   }
@@ -899,12 +899,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._item_dyt4i_8 {
+._item_lqfwq_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
       hover */
-        var(--cpd-space-2x),
+      var(--cpd-space-2x),
       1fr
     );
   place-items: center end;
@@ -917,105 +917,105 @@ Please see LICENSE files in the repository root for full details.
   background: var(--cpd-color-bg-action-secondary-rest);
 }
 
-._item_dyt4i_8._interactive_dyt4i_26 {
+._item_lqfwq_8._interactive_lqfwq_26 {
   cursor: pointer;
 }
 
-._item_dyt4i_8._no-label_dyt4i_30 {
+._item_lqfwq_8._no-label_lqfwq_30 {
   grid-template: "icon ." auto / auto 1fr;
 }
 
-._label_dyt4i_34 {
+._label_lqfwq_34 {
   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_dyt4i_8._no-icon_dyt4i_41 {
+._item_lqfwq_8._no-icon_lqfwq_41 {
   grid-template: "label ." auto / auto 1fr;
 
-  ._label_dyt4i_34 {
+  ._label_lqfwq_34 {
     /* Without icon, the height changes when hovered */
     min-block-size: 24px;
   }
 }
 
-._icon_dyt4i_50 {
+._icon_lqfwq_50 {
   grid-area: icon;
   margin-inline-end: var(--cpd-space-3x);
 }
 
-._item_dyt4i_8._no-label_dyt4i_30 ._icon_dyt4i_50 {
+._item_lqfwq_8._no-label_lqfwq_30 ._icon_lqfwq_50 {
   margin-inline-end: var(--cpd-space-4x);
 }
 
-._nav-hint_dyt4i_59 {
+._nav-hint_lqfwq_59 {
   /* Hidden until the item is hovered over */
   display: none;
   flex-shrink: 0;
 }
 
-button._item_dyt4i_8 {
+button._item_lqfwq_8 {
   appearance: none;
   border: none;
 }
 
-._item_dyt4i_8[data-kind="primary"] > ._label_dyt4i_34 {
+._item_lqfwq_8[data-kind="primary"] > ._label_lqfwq_34 {
   color: var(--cpd-color-text-primary);
 }
 
-._item_dyt4i_8[data-kind="primary"] > ._icon_dyt4i_50 {
+._item_lqfwq_8[data-kind="primary"] > ._icon_lqfwq_50 {
   color: var(--cpd-color-icon-primary);
 }
 
-._item_dyt4i_8[data-kind="primary"] > ._nav-hint_dyt4i_59 {
+._item_lqfwq_8[data-kind="primary"] > ._nav-hint_lqfwq_59 {
   color: var(--cpd-color-icon-tertiary);
 }
 
-._item_dyt4i_8[data-kind="critical"] > ._label_dyt4i_34 {
+._item_lqfwq_8[data-kind="critical"] > ._label_lqfwq_34 {
   color: var(--cpd-color-text-critical-primary);
 }
 
-._item_dyt4i_8[data-kind="critical"] > ._icon_dyt4i_50,
-._item_dyt4i_8[data-kind="critical"] > ._nav-hint_dyt4i_59 {
+._item_lqfwq_8[data-kind="critical"] > ._icon_lqfwq_50,
+._item_lqfwq_8[data-kind="critical"] > ._nav-hint_lqfwq_59 {
   color: var(--cpd-color-icon-critical-primary);
 }
 
 @media (hover) {
-  ._item_dyt4i_8._interactive_dyt4i_26[data-kind="primary"]:hover {
+  ._item_lqfwq_8._interactive_lqfwq_26[data-kind="primary"]:hover {
     background: var(--cpd-color-bg-action-secondary-hovered);
   }
 
-  ._item_dyt4i_8._interactive_dyt4i_26[data-kind="critical"]:hover {
+  ._item_lqfwq_8._interactive_lqfwq_26[data-kind="critical"]:hover {
     background: var(--cpd-color-bg-critical-subtle);
   }
 
   /* Replace the children with the navigation hint on hover */
-  ._item_dyt4i_8._interactive_dyt4i_26:hover > ._nav-hint_dyt4i_59 {
+  ._item_lqfwq_8._interactive_lqfwq_26:hover > ._nav-hint_lqfwq_59 {
     display: initial;
   }
 
-  ._item_dyt4i_8._interactive_dyt4i_26:hover > ._nav-hint_dyt4i_59 ~ * {
+  ._item_lqfwq_8._interactive_lqfwq_26:hover > ._nav-hint_lqfwq_59 ~ * {
     display: none;
   }
 }
 
-._item_dyt4i_8._interactive_dyt4i_26[data-kind="primary"]:active {
+._item_lqfwq_8._interactive_lqfwq_26[data-kind="primary"]:active {
   background: var(--cpd-color-bg-action-secondary-pressed);
 }
 
-._item_dyt4i_8._interactive_dyt4i_26[data-kind="critical"]:active {
+._item_lqfwq_8._interactive_lqfwq_26[data-kind="critical"]:active {
   background: var(--cpd-color-bg-critical-subtle-hovered);
 }
 
-._item_dyt4i_8[data-kind]._disabled_dyt4i_118 {
+._item_lqfwq_8[data-kind]._disabled_lqfwq_118 {
   pointer-events: none;
 }
 
-._item_dyt4i_8[data-kind]._disabled_dyt4i_118 > ._label_dyt4i_34,
-._item_dyt4i_8[data-kind]._disabled_dyt4i_118 > ._icon_dyt4i_50,
-._item_dyt4i_8[data-kind]._disabled_dyt4i_118 > ._nav-hint_dyt4i_59 {
+._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 {
   color: var(--cpd-color-text-disabled);
 }
 /*
@@ -1780,7 +1780,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._button_187yx_8 {
+._button_13vu4_8 {
   border-radius: var(--cpd-radius-pill-effect);
   cursor: pointer;
   appearance: none;
@@ -1794,22 +1794,25 @@ Please see LICENSE files in the repository root for full details.
   transition-property: color, background-color, border-color;
 }
 
-a._button_187yx_8 {
+a._button_13vu4_8 {
   /* Make the width match that of a real button */
   inline-size: max-content;
+
+  /* Buttons should not be underlined */
+  text-decoration: none;
 }
 
-._button_187yx_8 > svg {
+._button_13vu4_8 > svg {
   transition: color 0.1s;
 }
 
-._button_187yx_8[aria-disabled="true"] {
+._button_13vu4_8[aria-disabled="true"] {
   cursor: not-allowed;
   pointer-events: all !important;
   color: var(--cpd-color-text-disabled) !important;
 }
 
-._button_187yx_8[aria-disabled="true"] > svg {
+._button_13vu4_8[aria-disabled="true"] > svg {
   color: var(--cpd-color-icon-disabled) !important;
 }
 
@@ -1817,35 +1820,35 @@ a._button_187yx_8 {
  * SIZES
  */
 
-._button_187yx_8[data-size="lg"] {
+._button_13vu4_8[data-size="lg"] {
   padding-block: var(--cpd-space-2x);
   padding-inline: var(--cpd-space-8x);
   min-block-size: var(--cpd-space-12x);
 
-  &._icon-only_187yx_50 {
+  &._icon-only_13vu4_53 {
     padding-inline: var(--cpd-space-2x);
     block-size: var(--cpd-space-12x);
     inline-size: var(--cpd-space-12x);
   }
 }
 
-._button_187yx_8[data-size="lg"]._has-icon_187yx_57:not(._icon-only_187yx_50) {
+._button_13vu4_8[data-size="lg"]._has-icon_13vu4_60:not(._icon-only_13vu4_53) {
   padding-inline-start: var(--cpd-space-7x);
 }
 
-._button_187yx_8[data-size="sm"] {
+._button_13vu4_8[data-size="sm"] {
   padding-block: var(--cpd-space-1x);
   padding-inline: var(--cpd-space-5x);
   min-block-size: var(--cpd-space-9x);
 
-  &._icon-only_187yx_50 {
+  &._icon-only_13vu4_53 {
     padding-inline: var(--cpd-space-1x);
     block-size: var(--cpd-space-9x);
     inline-size: var(--cpd-space-9x);
   }
 }
 
-._button_187yx_8[data-size="sm"]._has-icon_187yx_57:not(._icon-only_187yx_50) {
+._button_13vu4_8[data-size="sm"]._has-icon_13vu4_60:not(._icon-only_13vu4_53) {
   padding-inline-start: var(--cpd-space-4x);
 }
 
@@ -1853,100 +1856,100 @@ a._button_187yx_8 {
  * KINDS
  */
 
-._button_187yx_8[data-kind="primary"] {
+._button_13vu4_8[data-kind="primary"] {
   color: var(--cpd-color-text-on-solid-primary);
   background: var(--cpd-color-bg-action-primary-rest);
   border-width: 0;
 }
 
-._button_187yx_8[data-kind="primary"] > svg {
+._button_13vu4_8[data-kind="primary"] > svg {
   color: var(--cpd-color-icon-on-solid-primary);
 }
 
 @media (hover) {
-  ._button_187yx_8[data-kind="primary"]:hover {
+  ._button_13vu4_8[data-kind="primary"]:hover {
     background: var(--cpd-color-bg-action-primary-hovered);
   }
 }
 
-._button_187yx_8[data-kind="primary"]:active,
-._button_187yx_8[data-kind="primary"][aria-expanded="true"] {
+._button_13vu4_8[data-kind="primary"]:active,
+._button_13vu4_8[data-kind="primary"][aria-expanded="true"] {
   background: var(--cpd-color-bg-action-primary-pressed);
 }
 
-._button_187yx_8[data-kind="primary"][aria-disabled="true"] {
+._button_13vu4_8[data-kind="primary"][aria-disabled="true"] {
   /* !important to override destructive background */
   background: var(--cpd-color-bg-subtle-primary) !important;
 }
 
-._button_187yx_8[data-kind="primary"]._destructive_187yx_107 {
+._button_13vu4_8[data-kind="primary"]._destructive_13vu4_110 {
   background: var(--cpd-color-bg-critical-primary);
 }
 
 @media (hover) {
-  ._button_187yx_8[data-kind="primary"]._destructive_187yx_107:hover {
+  ._button_13vu4_8[data-kind="primary"]._destructive_13vu4_110:hover {
     background: var(--cpd-color-bg-critical-hovered);
   }
 }
 
-._button_187yx_8[data-kind="primary"]._destructive_187yx_107:active,
-._button_187yx_8[data-kind="primary"]._destructive_187yx_107[aria-expanded="true"] {
+._button_13vu4_8[data-kind="primary"]._destructive_13vu4_110:active,
+._button_13vu4_8[data-kind="primary"]._destructive_13vu4_110[aria-expanded="true"] {
   /* TODO: We're waiting for this value to be formalized as a semantic token */
   background: var(--cpd-color-red-1100);
 }
 
-._button_187yx_8[data-kind="secondary"] {
+._button_13vu4_8[data-kind="secondary"] {
   border: 1px solid var(--cpd-color-border-interactive-secondary);
   color: var(--cpd-color-text-primary);
   background: var(--cpd-color-bg-canvas-default);
 }
 
-._button_187yx_8[data-kind="secondary"] > svg {
+._button_13vu4_8[data-kind="secondary"] > svg {
   color: var(--cpd-color-icon-primary);
 }
 
 @media (hover) {
-  ._button_187yx_8[data-kind="secondary"]:hover {
+  ._button_13vu4_8[data-kind="secondary"]:hover {
     border-color: var(--cpd-color-border-interactive-hovered);
     background: var(--cpd-color-bg-subtle-secondary);
   }
 }
 
-._button_187yx_8[data-kind="secondary"]:active,
-._button_187yx_8[data-kind="secondary"][aria-expanded="true"] {
+._button_13vu4_8[data-kind="secondary"]:active,
+._button_13vu4_8[data-kind="secondary"][aria-expanded="true"] {
   border-color: var(--cpd-color-border-interactive-hovered);
   background: var(--cpd-color-bg-subtle-primary);
 }
 
-._button_187yx_8[data-kind="secondary"][aria-disabled="true"] {
+._button_13vu4_8[data-kind="secondary"][aria-disabled="true"] {
   /* !important to override destructive values */
   border-color: var(--cpd-color-border-interactive-secondary) !important;
   background: var(--cpd-color-bg-subtle-secondary) !important;
 }
 
-._button_187yx_8[data-kind="secondary"]._destructive_187yx_107 {
+._button_13vu4_8[data-kind="secondary"]._destructive_13vu4_110 {
   border-color: var(--cpd-color-border-critical-subtle);
   color: var(--cpd-color-text-critical-primary);
 }
 
-._button_187yx_8[data-kind="secondary"]._destructive_187yx_107 > svg {
+._button_13vu4_8[data-kind="secondary"]._destructive_13vu4_110 > svg {
   color: var(--cpd-color-icon-critical-primary);
 }
 
 @media (hover) {
-  ._button_187yx_8[data-kind="secondary"]._destructive_187yx_107:hover {
+  ._button_13vu4_8[data-kind="secondary"]._destructive_13vu4_110:hover {
     border-color: var(--cpd-color-border-critical-hovered);
     background: var(--cpd-color-bg-critical-subtle);
   }
 }
 
-._button_187yx_8[data-kind="secondary"]._destructive_187yx_107:active,
-._button_187yx_8[data-kind="secondary"]._destructive_187yx_107[aria-expanded="true"] {
+._button_13vu4_8[data-kind="secondary"]._destructive_13vu4_110:active,
+._button_13vu4_8[data-kind="secondary"]._destructive_13vu4_110[aria-expanded="true"] {
   border-color: var(--cpd-color-border-critical-hovered);
   background: var(--cpd-color-bg-critical-subtle-hovered);
 }
 
-._button_187yx_8[data-kind="tertiary"] {
+._button_13vu4_8[data-kind="tertiary"] {
   border: none;
   color: var(--cpd-color-text-primary);
   text-decoration: underline;
@@ -1954,40 +1957,40 @@ a._button_187yx_8 {
 }
 
 @media (hover) {
-  ._button_187yx_8[data-kind="tertiary"]:hover {
+  ._button_13vu4_8[data-kind="tertiary"]:hover {
     background: var(--cpd-color-bg-subtle-secondary);
   }
 }
 
-._button_187yx_8[data-kind="tertiary"]:active,
-._button_187yx_8[data-kind="tertiary"][aria-expanded="true"] {
+._button_13vu4_8[data-kind="tertiary"]:active,
+._button_13vu4_8[data-kind="tertiary"][aria-expanded="true"] {
   background: var(--cpd-color-bg-subtle-primary);
 }
 
-._button_187yx_8[data-kind="tertiary"][aria-disabled="true"] {
+._button_13vu4_8[data-kind="tertiary"][aria-disabled="true"] {
   color: var(--cpd-color-text-disabled);
 
   /* !important to override destructive background */
   background: transparent !important;
 }
 
-._button_187yx_8[data-kind="tertiary"]._destructive_187yx_107 {
+._button_13vu4_8[data-kind="tertiary"]._destructive_13vu4_110 {
   color: var(--cpd-color-text-critical-primary);
 }
 
 @media (hover) {
-  ._button_187yx_8[data-kind="tertiary"]._destructive_187yx_107:hover {
+  ._button_13vu4_8[data-kind="tertiary"]._destructive_13vu4_110:hover {
     background: var(--cpd-color-bg-critical-subtle);
   }
 }
 
-._button_187yx_8[data-kind="tertiary"]._destructive_187yx_107:active,
-._button_187yx_8[data-kind="tertiary"]._destructive_187yx_107[aria-expanded="true"] {
+._button_13vu4_8[data-kind="tertiary"]._destructive_13vu4_110:active,
+._button_13vu4_8[data-kind="tertiary"]._destructive_13vu4_110[aria-expanded="true"] {
   background: var(--cpd-color-bg-critical-subtle-hovered);
 }
 
 @media (forced-colors: active) {
-  ._button_187yx_8[data-kind="primary"] {
+  ._button_13vu4_8[data-kind="primary"] {
     outline: 1px solid transparent;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-web",
-  "version": "8.3.1",
+  "version": "8.3.5",
   "description": "Compound components for the Web",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -36,7 +36,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/vector-im/compound-web.git"
+    "url": "git+https://github.com/element-hq/compound-web.git"
   },
   "keywords": [
     "compound",
@@ -56,7 +56,7 @@
     "@fontsource/inter": "^5.0.8",
     "@playwright/test": "^1.41.1",
     "@storybook/addon-a11y": "^10.0.0",
-    "@storybook/addon-designs": "11.0.1",
+    "@storybook/addon-designs": "11.1.1",
     "@storybook/addon-docs": "^10.0.0",
     "@storybook/addon-links": "^10.0.0",
     "@storybook/addon-themes": "^10.0.0",
@@ -65,7 +65,7 @@
     "@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/node22": "^22.0.0",
     "@tsconfig/vite-react": "^7.0.0",
     "@types/eslint": "^9.0.0",
     "@types/node": "^24.0.0",
@@ -83,7 +83,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-storybook": "^10.0.0",
     "jsdom": "^27.0.0",
-    "prettier": "3.6.2",
+    "prettier": "3.7.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "resize-observer-polyfill": "^1.5.1",

package/src/components/Button/Button.module.css

@@ -22,6 +22,9 @@ Please see LICENSE files in the repository root for full details.
 a.button {
   /* Make the width match that of a real button */
   inline-size: max-content;
+
+  /* Buttons should not be underlined */
+  text-decoration: none;
 }
 
 .button > svg {

package/src/components/Button/IconButton/IconButton.module.css

@@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details.
 
 .icon-button[data-kind="primary"] {
   * {
-    color: var(--cpd-color-icon-tertiary);
+    color: var(--cpd-color-icon-secondary);
   }
 }
 

package/src/components/InlineSpinner/InlineSpinner.tsx

@@ -6,6 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type SVGAttributes, forwardRef } from "react";
+import classNames from "classnames";
 import styles from "./InlineSpinner.module.css";
 import SpinnerIcon from "@vector-im/compound-design-tokens/assets/web/icons/spinner";
 
@@ -14,11 +15,11 @@ type InlineSpinnerProps = {
 } & SVGAttributes<SVGElement>;
 
 export const InlineSpinner = forwardRef<SVGSVGElement, InlineSpinnerProps>(
-  function InlineSpinner({ size = 20, ...props }, ref) {
+  function InlineSpinner({ size = 20, className, ...props }, ref) {
     return (
       <SpinnerIcon
         ref={ref}
-        className={styles.icon}
+        className={classNames(styles.icon, className)}
         style={{ width: size, height: size }}
         {...props}
       />

package/src/components/Menu/CheckboxMenuItem.tsx

@@ -39,15 +39,16 @@ export const CheckboxMenuItem = forwardRef<HTMLInputElement, Props>(
     const onChange = useCallback(() => {}, []);
 
     // <label> elements are not allowed to have a role like menuitemcheckbox, so
-    // we must instead use a plain <div> for the menu item and use aria-checked
+    // we must instead use a <button> for the menu item and use aria-checked
     // etc. to communicate its state.
     return (
       <MenuItem
-        as="div"
+        as="button"
         role="menuitemcheckbox"
         aria-checked={checked}
         className={className}
         label={label}
+        hideChevron
         onSelect={onSelect}
         disabled={disabled}
         Icon={
@@ -56,6 +57,7 @@ export const CheckboxMenuItem = forwardRef<HTMLInputElement, Props>(
             ref={ref}
             // This is purely cosmetic; really the whole MenuItem is the toggle.
             aria-hidden
+            tabIndex={-1}
             checked={checked}
             disabled={disabled}
             onChange={onChange}

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

@@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
   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
       hover */
-        var(--cpd-space-2x),
+      var(--cpd-space-2x),
       1fr
     );
   place-items: center end;

package/src/components/Menu/ToggleMenuItem.tsx

@@ -43,12 +43,13 @@ export const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(
     // etc. to communicate its state.
     return (
       <MenuItem
-        as="div"
+        as="button"
         role="menuitemcheckbox"
         aria-checked={checked}
         className={className}
         Icon={Icon}
         label={label}
+        hideChevron
         onSelect={onSelect}
         disabled={disabled}
         onClick={onClick}
@@ -58,6 +59,7 @@ export const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(
           ref={ref}
           // This is purely cosmetic; really the whole MenuItem is the toggle.
           aria-hidden
+          tabIndex={-1}
           checked={checked}
           disabled={disabled}
           onChange={onChange}

package/src/components/ReleaseAnnouncement/ReleaseAnnouncement.tsx

@@ -30,8 +30,10 @@ import { useReleaseAnnouncement } from "./useReleaseAnnouncement";
 
 type UseReleaseAnnouncementParam = Parameters<typeof useReleaseAnnouncement>[0];
 
-interface ReleaseAnnouncementProps
-  extends Omit<UseReleaseAnnouncementParam, "placement" | "displayArrow"> {
+interface ReleaseAnnouncementProps extends Omit<
+  UseReleaseAnnouncementParam,
+  "placement" | "displayArrow"
+> {
   /**
    * The placement of the component
    * @default "right"