@vector-im/compound-web 8.3.0 → 8.3.4

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

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const avatar = "_avatar_1jp1e_8";
-const image = "_image_1jp1e_43";
+const avatar = "_avatar_zysgz_8";
+const image = "_image_zysgz_43";
 const styles = {
   avatar,
   image,
-  "avatar-imageless": "_avatar-imageless_1jp1e_54",
-  "stacked-avatars": "_stacked-avatars_1jp1e_107",
-  "clip-path": "_clip-path_1jp1e_126"
+  "avatar-imageless": "_avatar-imageless_zysgz_55",
+  "stacked-avatars": "_stacked-avatars_zysgz_109",
+  "clip-path": "_clip-path_zysgz_128"
 };
 exports.avatar = avatar;
 exports.default = styles;

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

@@ -1,11 +1,11 @@
-const avatar = "_avatar_1jp1e_8";
-const image = "_image_1jp1e_43";
+const avatar = "_avatar_zysgz_8";
+const image = "_image_zysgz_43";
 const styles = {
   avatar,
   image,
-  "avatar-imageless": "_avatar-imageless_1jp1e_54",
-  "stacked-avatars": "_stacked-avatars_1jp1e_107",
-  "clip-path": "_clip-path_1jp1e_126"
+  "avatar-imageless": "_avatar-imageless_zysgz_55",
+  "stacked-avatars": "_stacked-avatars_zysgz_109",
+  "clip-path": "_clip-path_zysgz_128"
 };
 export {
   avatar,

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/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/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/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":"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"}
+{"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":"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"}

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

@@ -463,7 +463,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._avatar_1jp1e_8 {
+._avatar_zysgz_8 {
   display: inline-block;
   box-sizing: border-box;
 
@@ -483,7 +483,7 @@ Please see LICENSE files in the repository root for full details.
   background: var(--cpd-color-bg-canvas-default);
 }
 
-button._avatar_1jp1e_8 {
+button._avatar_zysgz_8 {
   /**
    * The avatar can be a button element, we need to reset its style
    */
@@ -493,23 +493,25 @@ button._avatar_1jp1e_8 {
   cursor: pointer;
 }
 
-button._avatar_1jp1e_8:disabled {
+button._avatar_zysgz_8:disabled {
   cursor: not-allowed;
 }
 
-._avatar_1jp1e_8,
-._image_1jp1e_43 {
+._avatar_zysgz_8,
+._image_zysgz_43 {
   aspect-ratio: 1 / 1;
   inline-size: var(--cpd-avatar-size);
   border-radius: var(--cpd-avatar-radius);
 }
 
-._image_1jp1e_43 {
+._image_zysgz_43 {
   object-fit: cover;
   overflow: hidden;
 }
 
-._avatar-imageless_1jp1e_54 {
+/* Additional selector for button to raise selector above button.avatar */
+button._avatar-imageless_zysgz_55,
+._avatar-imageless_zysgz_55 {
   /* In the future we'd prefer to pass the HEX code as the data attr
      and use `attr(data-color)` to avoid the style declaration from below
      but this is currently not supported in all browsers */
@@ -520,41 +522,41 @@ button._avatar_1jp1e_8:disabled {
   border: 1px solid var(--cpd-avatar-bg);
 }
 
-._avatar_1jp1e_8[data-color] {
+._avatar_zysgz_8[data-color] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-1);
   --cpd-avatar-color: var(--cpd-color-text-decorative-1);
 }
 
-._avatar_1jp1e_8[data-color="2"] {
+._avatar_zysgz_8[data-color="2"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-2);
   --cpd-avatar-color: var(--cpd-color-text-decorative-2);
 }
 
-._avatar_1jp1e_8[data-color="3"] {
+._avatar_zysgz_8[data-color="3"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-3);
   --cpd-avatar-color: var(--cpd-color-text-decorative-3);
 }
 
-._avatar_1jp1e_8[data-color="4"] {
+._avatar_zysgz_8[data-color="4"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-4);
   --cpd-avatar-color: var(--cpd-color-text-decorative-4);
 }
 
-._avatar_1jp1e_8[data-color="5"] {
+._avatar_zysgz_8[data-color="5"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-5);
   --cpd-avatar-color: var(--cpd-color-text-decorative-5);
 }
 
-._avatar_1jp1e_8[data-color="6"] {
+._avatar_zysgz_8[data-color="6"] {
   --cpd-avatar-bg: var(--cpd-color-bg-decorative-6);
   --cpd-avatar-color: var(--cpd-color-text-decorative-6);
 }
 
-._avatar_1jp1e_8[data-type="round"] {
+._avatar_zysgz_8[data-type="round"] {
   --cpd-avatar-radius: 50%;
 }
 
-._avatar_1jp1e_8[data-type="square"] {
+._avatar_zysgz_8[data-type="square"] {
   --cpd-avatar-radius: 25%;
 }
 
@@ -562,26 +564,26 @@ button._avatar_1jp1e_8:disabled {
  * Stacked avatars 
  */
 
-._stacked-avatars_1jp1e_107::after {
+._stacked-avatars_zysgz_109::after {
   content: "";
   display: table;
   clear: both;
 }
 
-._stacked-avatars_1jp1e_107 ._avatar_1jp1e_8 {
+._stacked-avatars_zysgz_109 ._avatar_zysgz_8 {
   float: inline-start;
 }
 
-._stacked-avatars_1jp1e_107 ._avatar_1jp1e_8:not(:last-child) {
+._stacked-avatars_zysgz_109 ._avatar_zysgz_8:not(:last-child) {
   /* injected in the document from AvatarStack.tsx */
   clip-path: url("#cpdAvatarClip");
 }
 
-._stacked-avatars_1jp1e_107 > *:not(:first-child) {
+._stacked-avatars_zysgz_109 > *:not(:first-child) {
   margin-inline-start: calc(var(--cpd-avatar-size) * -0.2);
 }
 
-._clip-path_1jp1e_126 {
+._clip-path_zysgz_128 {
   /* In theory the SVG is invisible, but we still need to ensure it doesn't
   affect the page's layout or otherwise make an appearance */
   position: fixed;
@@ -897,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;
@@ -915,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);
 }
 /*
@@ -1778,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;
@@ -1792,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;
 }
 
@@ -1815,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);
 }
 
@@ -1851,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;
@@ -1952,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.0",
+  "version": "8.3.4",
   "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.0",
     "@storybook/addon-docs": "^10.0.0",
     "@storybook/addon-links": "^10.0.0",
     "@storybook/addon-themes": "^10.0.0",
@@ -74,7 +74,7 @@
     "@typescript-eslint/parser": "^8.0.0",
     "@vector-im/compound-design-tokens": "^6.0.0",
     "@vitejs/plugin-react": "^5.0.0",
-    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/coverage-v8": "^4.0.0",
     "browserslist-to-esbuild": "^2.0.0",
     "eslint": "^8.49.0",
     "eslint-config-prettier": "^10.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",
@@ -98,7 +98,7 @@
     "typescript": "^5.2.2",
     "vite": "^7.0.3",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^3.2.4"
+    "vitest": "^4.0.0"
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.0",

package/src/components/Avatar/Avatar.module.css

@@ -51,6 +51,8 @@ button.avatar:disabled {
   overflow: hidden;
 }
 
+/* Additional selector for button to raise selector above button.avatar */
+button.avatar-imageless,
 .avatar-imageless {
   /* In the future we'd prefer to pass the HEX code as the data attr
      and use `attr(data-color)` to avoid the style declaration from below

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/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/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/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"