@vector-im/compound-web 8.3.6 → 9.0.0

package/dist/components/ReleaseAnnouncement/ReleaseAnnouncement.js

@@ -1,121 +1,112 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { isValidElement, cloneElement } from "react";
-import { useMergeRefs, FloatingPortal, FloatingFocusManager, FloatingArrow } from "@floating-ui/react";
 import { Text } from "../Typography/Text.js";
-import styles from "./ReleaseAnnouncement.module.css.js";
-import { ReleaseAnnouncementContext, useReleaseAnnouncementContext } from "./ReleaseAnnouncementContext.js";
-import { useReleaseAnnouncement } from "./useReleaseAnnouncement.js";
 import { Button } from "../Button/Button.js";
-function ReleaseAnnouncement({
-  /**
-   * The children anchor should be a single valid React element.
-   */
-  children,
-  placement = "right",
-  displayArrow = true,
-  ...props
-}) {
-  const context = useReleaseAnnouncement({ placement, displayArrow, ...props });
-  return /* @__PURE__ */ jsxs(ReleaseAnnouncementContext.Provider, { value: context, children: [
-    /* @__PURE__ */ jsx(ReleaseAnnouncementAnchor, { children }),
-    /* @__PURE__ */ jsx(ReleaseAnnouncementContainer, { children: /* @__PURE__ */ jsx(ReleaseAnnouncementContent, {}) })
-  ] });
+import ReleaseAnnouncement_module_default from "./ReleaseAnnouncement.module.js";
+import { useReleaseAnnouncement } from "./useReleaseAnnouncement.js";
+import { ReleaseAnnouncementContext, useReleaseAnnouncementContext } from "./ReleaseAnnouncementContext.js";
+import { cloneElement, isValidElement } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { FloatingArrow, FloatingFocusManager, FloatingPortal, useMergeRefs } from "@floating-ui/react";
+//#region src/components/ReleaseAnnouncement/ReleaseAnnouncement.tsx
+/**
+* The ReleaseAnnouncement component purpose is to inform the user of a new available feature.
+* This component is a floating component that will appear next to an anchor.
+* @param children - Act as an anchor, the component will be displayed alongside of it.
+* @param placement - The placement of the component
+*/
+function ReleaseAnnouncement({ children, placement = "right", displayArrow = true, ...props }) {
+	const context = useReleaseAnnouncement({
+		placement,
+		displayArrow,
+		...props
+	});
+	return /* @__PURE__ */ jsxs(ReleaseAnnouncementContext.Provider, {
+		value: context,
+		children: [/* @__PURE__ */ jsx(ReleaseAnnouncementAnchor, { children }), /* @__PURE__ */ jsx(ReleaseAnnouncementContainer, { children: /* @__PURE__ */ jsx(ReleaseAnnouncementContent, {}) })]
+	});
 }
-function ReleaseAnnouncementAnchor({
-  children
-}) {
-  const context = useReleaseAnnouncementContext();
-  const childrenRef = children?.ref;
-  const ref = useMergeRefs([context.refs.setReference, childrenRef]);
-  if (!isValidElement(children)) {
-    throw new Error(
-      "ReleaseAnnouncement anchor must be a single valid React element"
-    );
-  }
-  const referenceProps = context.getReferenceProps({
-    ref,
-    // If the ReleaseAnnouncement is open, we need manually aria-describedby.
-    // The RA has the dialog role and it's not adding automatically the aria-describedby.
-    ...context.open && {
-      "aria-describedby": context.getFloatingProps().id
-    }
-  });
-  delete referenceProps["aria-expanded"];
-  return cloneElement(children, referenceProps);
+/**
+* The anchor for the ReleaseAnnouncement components.
+* The Release Announcement will appear next to this element.
+* @param children - should be a single valid React element
+* @constructor
+*/
+function ReleaseAnnouncementAnchor({ children }) {
+	const context = useReleaseAnnouncementContext();
+	const childrenRef = children?.ref;
+	const ref = useMergeRefs([context.refs.setReference, childrenRef]);
+	if (!isValidElement(children)) throw new Error("ReleaseAnnouncement anchor must be a single valid React element");
+	const referenceProps = context.getReferenceProps({
+		ref,
+		...context.open && { "aria-describedby": context.getFloatingProps().id }
+	});
+	delete referenceProps["aria-expanded"];
+	return cloneElement(children, referenceProps);
 }
-function ReleaseAnnouncementContainer({
-  children
-}) {
-  const {
-    context: floatingContext,
-    arrowRef,
-    displayArrow,
-    ...rest
-  } = useReleaseAnnouncementContext();
-  if (!floatingContext.open) return null;
-  return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, { context: floatingContext, modal: false, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: rest.refs.setFloating,
-      style: rest.floatingStyles,
-      "aria-labelledby": rest.labelId,
-      "aria-describedby": rest.descriptionId,
-      ...rest.getFloatingProps(),
-      className: styles.content,
-      children: [
-        displayArrow && /* @__PURE__ */ jsx(
-          FloatingArrow,
-          {
-            ref: arrowRef,
-            context: floatingContext,
-            width: 20,
-            height: 12,
-            className: styles.arrow
-          }
-        ),
-        children
-      ]
-    }
-  ) }) });
+/**
+* The container for the ReleaseAnnouncement components.
+* Manage focus and positioning of the children.
+* @param children
+*/
+function ReleaseAnnouncementContainer({ children }) {
+	const { context: floatingContext, arrowRef, displayArrow, ...rest } = useReleaseAnnouncementContext();
+	if (!floatingContext.open) return null;
+	return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, {
+		context: floatingContext,
+		modal: false,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: rest.refs.setFloating,
+			style: rest.floatingStyles,
+			"aria-labelledby": rest.labelId,
+			"aria-describedby": rest.descriptionId,
+			...rest.getFloatingProps(),
+			className: ReleaseAnnouncement_module_default.content,
+			children: [displayArrow && /* @__PURE__ */ jsx(FloatingArrow, {
+				ref: arrowRef,
+				context: floatingContext,
+				width: 20,
+				height: 12,
+				className: ReleaseAnnouncement_module_default.arrow
+			}), children]
+		})
+	}) });
 }
+/**
+* The content of the ReleaseAnnouncement component.
+* ---------------------------------------------------------------
+* - The header in a bold text                  -------------    -
+* - A description in a regular text           | Close button |  -
+* - Description can be on multiple lines       -------------    -
+* ---------------------------------------------------------------
+*/
 function ReleaseAnnouncementContent() {
-  const { labelId, descriptionId, header, description, closeLabel, onClick } = useReleaseAnnouncementContext();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Text,
-      {
-        as: "h3",
-        id: labelId,
-        className: styles.header,
-        size: "lg",
-        weight: "semibold",
-        children: header
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Text,
-      {
-        as: "span",
-        id: descriptionId,
-        className: styles.description,
-        size: "sm",
-        weight: "regular",
-        children: description
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        size: "sm",
-        kind: "secondary",
-        className: styles.button,
-        onClick,
-        children: closeLabel
-      }
-    )
-  ] });
+	const { labelId, descriptionId, header, description, closeLabel, onClick } = useReleaseAnnouncementContext();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Text, {
+			as: "h3",
+			id: labelId,
+			className: ReleaseAnnouncement_module_default.header,
+			size: "lg",
+			weight: "semibold",
+			children: header
+		}),
+		/* @__PURE__ */ jsx(Text, {
+			as: "span",
+			id: descriptionId,
+			className: ReleaseAnnouncement_module_default.description,
+			size: "sm",
+			weight: "regular",
+			children: description
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			kind: "secondary",
+			className: ReleaseAnnouncement_module_default.button,
+			onClick,
+			children: closeLabel
+		})
+	] });
 }
-export {
-  ReleaseAnnouncement
-};
-//# sourceMappingURL=ReleaseAnnouncement.js.map
+//#endregion
+export { ReleaseAnnouncement };
+
+//# sourceMappingURL=ReleaseAnnouncement.js.map

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 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;"}
+{"version":3,"file":"ReleaseAnnouncement.js","names":[],"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"],"mappings":";;;;;;;;;;;;;;;AAsDA,SAAgB,oBAAoB,EAIlC,UACA,YAAY,SACZ,eAAe,MACf,GAAG,SACwD;CAC3D,MAAM,UAAU,uBAAuB;EAAE;EAAW;EAAc,GAAG;EAAO,CAAC;AAE7E,QACE,qBAAC,2BAA2B,UAA5B;EAAqC,OAAO;YAA5C,CACE,oBAAC,2BAAD,EAA4B,UAAqC,CAAA,EACjE,oBAAC,8BAAD,EAAA,UACE,oBAAC,4BAAD,EAA8B,CAAA,EACD,CAAA,CACK;;;;;;;;;AAU1C,SAAS,0BAA0B,EACjC,YAC2C;CAC3C,MAAM,UAAU,+BAA+B;CAI/C,MAAM,cAAe,UAAoD;CACzE,MAAM,MAAM,aAAa,CAAC,QAAQ,KAAK,cAAc,YAAY,CAAC;AAElE,KAAI,CAAC,eAAe,SAAS,CAC3B,OAAM,IAAI,MACR,kEACD;CAGH,MAAM,iBAAiB,QAAQ,kBAAkB;EAC/C;EAGA,GAAI,QAAQ,QAAQ,EAClB,oBAAoB,QAAQ,kBAAkB,CAAC,IAChD;EACF,CAAC;AAQF,QAAO,eAAe;AAEtB,QAAO,aAAa,UAAU,eAAe;;;;;;;AAQ/C,SAAS,6BAA6B,EACpC,YACwC;CACxC,MAAM,EACJ,SAAS,iBACT,UACA,cACA,GAAG,SACD,+BAA+B;AAEnC,KAAI,CAAC,gBAAgB,KAAM,QAAO;AAElC,QACE,oBAAC,gBAAD,EAAA,UACE,oBAAC,sBAAD;EAAsB,SAAS;EAAiB,OAAO;YACrD,qBAAC,OAAD;GACE,KAAK,KAAK,KAAK;GACf,OAAO,KAAK;GACZ,mBAAiB,KAAK;GACtB,oBAAkB,KAAK;GACvB,GAAI,KAAK,kBAAkB;GAC3B,WAAW,mCAAO;aANpB,CAQG,gBACC,oBAAC,eAAD;IACE,KAAK;IACL,SAAS;IAET,OAAO;IACP,QAAQ;IACR,WAAW,mCAAO;IAClB,CAAA,EAEH,SACG;;EACe,CAAA,EACR,CAAA;;;;;;;;;;AAYrB,SAAS,6BAA0C;CACjD,MAAM,EAAE,SAAS,eAAe,QAAQ,aAAa,YAAY,YAC/D,+BAA+B;AAEjC,QACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,MAAD;GACE,IAAG;GACH,IAAI;GACJ,WAAW,mCAAO;GAClB,MAAK;GACL,QAAO;aAEN;GACI,CAAA;EACP,oBAAC,MAAD;GACE,IAAG;GACH,IAAI;GACJ,WAAW,mCAAO;GAClB,MAAK;GACL,QAAO;aAEN;GACI,CAAA;EACP,oBAAC,QAAD;GACE,MAAK;GACL,MAAK;GACL,WAAW,mCAAO;GACT;aAER;GACM,CAAA;EACR,EAAA,CAAA"}

package/dist/components/ReleaseAnnouncement/ReleaseAnnouncement.module.cjs

@@ -0,0 +1,11 @@
+var ReleaseAnnouncement_module_default = {
+	content: "_content_16f2y_8",
+	header: "_header_16f2y_37",
+	description: "_description_16f2y_43",
+	button: "_button_16f2y_48",
+	arrow: "_arrow_16f2y_53"
+};
+//#endregion
+exports.default = ReleaseAnnouncement_module_default;
+
+//# sourceMappingURL=ReleaseAnnouncement.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReleaseAnnouncement.module.cjs","names":[],"sources":["../../../src/components/ReleaseAnnouncement/ReleaseAnnouncement.module.css"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.content {\n  /* 320px + 20px padding left + 20px padding right */\n  max-inline-size: 320px;\n  border-radius: var(--cpd-space-3x);\n  background: var(--cpd-color-bg-action-primary-rest);\n  padding: var(--cpd-space-5x) var(--cpd-space-6x);\n\n  /* from figma */\n  box-shadow: 0 4px 24px 0 rgb(0 0 0 / 10%);\n\n  /*\n  * Grid, we want to have the following layout:\n  * ----------------------------------\n  * -  ---------------   ----------  -\n  * -  | heading     |   |        |  -\n  * -  --------------    | button |  -\n  * -  ---------------   | button |  -\n  * -  | description |   |        |  -\n  * -  ---------------   ----------  -\n  * ----------------------------------\n  */\n  display: grid;\n  grid-template:\n    \"header button\" auto\n    \"description button\" auto;\n  align-items: center;\n  column-gap: var(--cpd-space-6x);\n}\n\n.header {\n  margin: 0;\n  color: var(--cpd-color-text-on-solid-primary);\n  grid-area: header;\n}\n\n.description {\n  color: var(--cpd-color-gray-500);\n  grid-area: description;\n}\n\n.button {\n  color: var(--cpd-color-bg-subtle-secondary);\n  grid-area: button;\n}\n\n.arrow {\n  fill: var(--cpd-color-bg-action-primary-rest);\n}\n\n@media (forced-colors: active) {\n  .content {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}

package/dist/components/ReleaseAnnouncement/ReleaseAnnouncement.module.js

@@ -0,0 +1,11 @@
+var ReleaseAnnouncement_module_default = {
+	content: "_content_16f2y_8",
+	header: "_header_16f2y_37",
+	description: "_description_16f2y_43",
+	button: "_button_16f2y_48",
+	arrow: "_arrow_16f2y_53"
+};
+//#endregion
+export { ReleaseAnnouncement_module_default as default };
+
+//# sourceMappingURL=ReleaseAnnouncement.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReleaseAnnouncement.module.js","names":[],"sources":["../../../src/components/ReleaseAnnouncement/ReleaseAnnouncement.module.css"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.content {\n  /* 320px + 20px padding left + 20px padding right */\n  max-inline-size: 320px;\n  border-radius: var(--cpd-space-3x);\n  background: var(--cpd-color-bg-action-primary-rest);\n  padding: var(--cpd-space-5x) var(--cpd-space-6x);\n\n  /* from figma */\n  box-shadow: 0 4px 24px 0 rgb(0 0 0 / 10%);\n\n  /*\n  * Grid, we want to have the following layout:\n  * ----------------------------------\n  * -  ---------------   ----------  -\n  * -  | heading     |   |        |  -\n  * -  --------------    | button |  -\n  * -  ---------------   | button |  -\n  * -  | description |   |        |  -\n  * -  ---------------   ----------  -\n  * ----------------------------------\n  */\n  display: grid;\n  grid-template:\n    \"header button\" auto\n    \"description button\" auto;\n  align-items: center;\n  column-gap: var(--cpd-space-6x);\n}\n\n.header {\n  margin: 0;\n  color: var(--cpd-color-text-on-solid-primary);\n  grid-area: header;\n}\n\n.description {\n  color: var(--cpd-color-gray-500);\n  grid-area: description;\n}\n\n.button {\n  color: var(--cpd-color-bg-subtle-secondary);\n  grid-area: button;\n}\n\n.arrow {\n  fill: var(--cpd-color-bg-action-primary-rest);\n}\n\n@media (forced-colors: active) {\n  .content {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}

package/dist/components/ReleaseAnnouncement/ReleaseAnnouncementContext.cjs

@@ -1,16 +1,20 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const ReleaseAnnouncementContext = React.createContext(null);
+require("../../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+//#region src/components/ReleaseAnnouncement/ReleaseAnnouncementContext.ts
+/**
+* The context for the ReleaseAnnouncement components.
+*/
+var ReleaseAnnouncementContext = (0, react.createContext)(null);
+/**
+* Provides the context for the ReleaseAnnouncement components.
+*/
 function useReleaseAnnouncementContext() {
-  const context = React.useContext(ReleaseAnnouncementContext);
-  if (context == null) {
-    throw new Error(
-      "ReleaseAnnouncement components must be wrapped in <ReleaseAnnouncement />"
-    );
-  }
-  return context;
+	const context = (0, react.useContext)(ReleaseAnnouncementContext);
+	if (context == null) throw new Error("ReleaseAnnouncement components must be wrapped in <ReleaseAnnouncement />");
+	return context;
 }
+//#endregion
 exports.ReleaseAnnouncementContext = ReleaseAnnouncementContext;
 exports.useReleaseAnnouncementContext = useReleaseAnnouncementContext;
-//# sourceMappingURL=ReleaseAnnouncementContext.cjs.map
+
+//# sourceMappingURL=ReleaseAnnouncementContext.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ReleaseAnnouncementContext.cjs","sources":["../../../src/components/ReleaseAnnouncement/ReleaseAnnouncementContext.ts"],"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 { createContext, useContext } from \"react\";\nimport { useReleaseAnnouncement } from \"./useReleaseAnnouncement\";\n\ntype ContextType = ReturnType<typeof useReleaseAnnouncement> | null;\n/**\n * The context for the ReleaseAnnouncement components.\n */\nexport const ReleaseAnnouncementContext = createContext<ContextType>(null);\n\n/**\n * Provides the context for the ReleaseAnnouncement components.\n */\nexport function useReleaseAnnouncementContext() {\n  const context = useContext(ReleaseAnnouncementContext);\n\n  if (context == null) {\n    throw new Error(\n      \"ReleaseAnnouncement components must be wrapped in <ReleaseAnnouncement />\",\n    );\n  }\n\n  return context;\n}\n"],"names":["createContext","useContext"],"mappings":";;;AAcO,MAAM,6BAA6BA,MAAAA,cAA2B,IAAI;AAKlE,SAAS,gCAAgC;AAC9C,QAAM,UAAUC,MAAAA,WAAW,0BAA0B;AAErD,MAAI,WAAW,MAAM;AACnB,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEA,SAAO;AACT;;;"}
+{"version":3,"file":"ReleaseAnnouncementContext.cjs","names":[],"sources":["../../../src/components/ReleaseAnnouncement/ReleaseAnnouncementContext.ts"],"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 { createContext, useContext } from \"react\";\nimport { useReleaseAnnouncement } from \"./useReleaseAnnouncement\";\n\ntype ContextType = ReturnType<typeof useReleaseAnnouncement> | null;\n/**\n * The context for the ReleaseAnnouncement components.\n */\nexport const ReleaseAnnouncementContext = createContext<ContextType>(null);\n\n/**\n * Provides the context for the ReleaseAnnouncement components.\n */\nexport function useReleaseAnnouncementContext() {\n  const context = useContext(ReleaseAnnouncementContext);\n\n  if (context == null) {\n    throw new Error(\n      \"ReleaseAnnouncement components must be wrapped in <ReleaseAnnouncement />\",\n    );\n  }\n\n  return context;\n}\n"],"mappings":";;;;;;AAcA,IAAa,8BAAA,GAAA,MAAA,eAAwD,KAAK;;;;AAK1E,SAAgB,gCAAgC;CAC9C,MAAM,WAAA,GAAA,MAAA,YAAqB,2BAA2B;AAEtD,KAAI,WAAW,KACb,OAAM,IAAI,MACR,4EACD;AAGH,QAAO"}

package/dist/components/ReleaseAnnouncement/ReleaseAnnouncementContext.js

@@ -1,16 +1,18 @@
 import { createContext, useContext } from "react";
-const ReleaseAnnouncementContext = createContext(null);
+//#region src/components/ReleaseAnnouncement/ReleaseAnnouncementContext.ts
+/**
+* The context for the ReleaseAnnouncement components.
+*/
+var ReleaseAnnouncementContext = createContext(null);
+/**
+* Provides the context for the ReleaseAnnouncement components.
+*/
 function useReleaseAnnouncementContext() {
-  const context = useContext(ReleaseAnnouncementContext);
-  if (context == null) {
-    throw new Error(
-      "ReleaseAnnouncement components must be wrapped in <ReleaseAnnouncement />"
-    );
-  }
-  return context;
+	const context = useContext(ReleaseAnnouncementContext);
+	if (context == null) throw new Error("ReleaseAnnouncement components must be wrapped in <ReleaseAnnouncement />");
+	return context;
 }
-export {
-  ReleaseAnnouncementContext,
-  useReleaseAnnouncementContext
-};
-//# sourceMappingURL=ReleaseAnnouncementContext.js.map
+//#endregion
+export { ReleaseAnnouncementContext, useReleaseAnnouncementContext };
+
+//# sourceMappingURL=ReleaseAnnouncementContext.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ReleaseAnnouncementContext.js","sources":["../../../src/components/ReleaseAnnouncement/ReleaseAnnouncementContext.ts"],"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 { createContext, useContext } from \"react\";\nimport { useReleaseAnnouncement } from \"./useReleaseAnnouncement\";\n\ntype ContextType = ReturnType<typeof useReleaseAnnouncement> | null;\n/**\n * The context for the ReleaseAnnouncement components.\n */\nexport const ReleaseAnnouncementContext = createContext<ContextType>(null);\n\n/**\n * Provides the context for the ReleaseAnnouncement components.\n */\nexport function useReleaseAnnouncementContext() {\n  const context = useContext(ReleaseAnnouncementContext);\n\n  if (context == null) {\n    throw new Error(\n      \"ReleaseAnnouncement components must be wrapped in <ReleaseAnnouncement />\",\n    );\n  }\n\n  return context;\n}\n"],"names":[],"mappings":";AAcO,MAAM,6BAA6B,cAA2B,IAAI;AAKlE,SAAS,gCAAgC;AAC9C,QAAM,UAAU,WAAW,0BAA0B;AAErD,MAAI,WAAW,MAAM;AACnB,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEA,SAAO;AACT;"}
+{"version":3,"file":"ReleaseAnnouncementContext.js","names":[],"sources":["../../../src/components/ReleaseAnnouncement/ReleaseAnnouncementContext.ts"],"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 { createContext, useContext } from \"react\";\nimport { useReleaseAnnouncement } from \"./useReleaseAnnouncement\";\n\ntype ContextType = ReturnType<typeof useReleaseAnnouncement> | null;\n/**\n * The context for the ReleaseAnnouncement components.\n */\nexport const ReleaseAnnouncementContext = createContext<ContextType>(null);\n\n/**\n * Provides the context for the ReleaseAnnouncement components.\n */\nexport function useReleaseAnnouncementContext() {\n  const context = useContext(ReleaseAnnouncementContext);\n\n  if (context == null) {\n    throw new Error(\n      \"ReleaseAnnouncement components must be wrapped in <ReleaseAnnouncement />\",\n    );\n  }\n\n  return context;\n}\n"],"mappings":";;;;;AAcA,IAAa,6BAA6B,cAA2B,KAAK;;;;AAK1E,SAAgB,gCAAgC;CAC9C,MAAM,UAAU,WAAW,2BAA2B;AAEtD,KAAI,WAAW,KACb,OAAM,IAAI,MACR,4EACD;AAGH,QAAO"}

package/dist/components/ReleaseAnnouncement/useReleaseAnnouncement.cjs

@@ -1,64 +1,54 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("@floating-ui/react");
-const React = require("react");
-function useReleaseAnnouncement({
-  open,
-  header,
-  description,
-  closeLabel,
-  placement,
-  onClick,
-  displayArrow
-}) {
-  const labelId = react.useId();
-  const descriptionId = react.useId();
-  const arrowRef = React.useRef(null);
-  const data = react.useFloating({
-    placement,
-    open,
-    whileElementsMounted: react.autoUpdate,
-    middleware: [
-      // arrow height 12px + 4px padding
-      react.offset(16),
-      react.shift({ limiter: react.limitShift({ offset: 50 }) }),
-      // add the little arrow along with the floating content
-      displayArrow && react.arrow({
-        element: arrowRef
-      })
-    ]
-  });
-  const role = react.useRole(data.context);
-  const interactions = react.useInteractions([role]);
-  return React.useMemo(
-    () => ({
-      open,
-      ...data,
-      ...interactions,
-      labelId,
-      descriptionId,
-      header,
-      description,
-      closeLabel,
-      onClick,
-      displayArrow,
-      arrowRef
-    }),
-    [
-      open,
-      role,
-      interactions,
-      data,
-      labelId,
-      descriptionId,
-      header,
-      description,
-      closeLabel,
-      onClick,
-      displayArrow,
-      arrowRef
-    ]
-  );
+require("../../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+let _floating_ui_react = require("@floating-ui/react");
+//#region src/components/ReleaseAnnouncement/useReleaseAnnouncement.tsx
+/**
+* This hook provides the necessary props to create a release announcement.
+*/
+function useReleaseAnnouncement({ open, header, description, closeLabel, placement, onClick, displayArrow }) {
+	const labelId = (0, _floating_ui_react.useId)();
+	const descriptionId = (0, _floating_ui_react.useId)();
+	const arrowRef = (0, react.useRef)(null);
+	const data = (0, _floating_ui_react.useFloating)({
+		placement,
+		open,
+		whileElementsMounted: _floating_ui_react.autoUpdate,
+		middleware: [
+			(0, _floating_ui_react.offset)(16),
+			(0, _floating_ui_react.shift)({ limiter: (0, _floating_ui_react.limitShift)({ offset: 50 }) }),
+			displayArrow && (0, _floating_ui_react.arrow)({ element: arrowRef })
+		]
+	});
+	const role = (0, _floating_ui_react.useRole)(data.context);
+	const interactions = (0, _floating_ui_react.useInteractions)([role]);
+	return (0, react.useMemo)(() => ({
+		open,
+		...data,
+		...interactions,
+		labelId,
+		descriptionId,
+		header,
+		description,
+		closeLabel,
+		onClick,
+		displayArrow,
+		arrowRef
+	}), [
+		open,
+		role,
+		interactions,
+		data,
+		labelId,
+		descriptionId,
+		header,
+		description,
+		closeLabel,
+		onClick,
+		displayArrow,
+		arrowRef
+	]);
 }
+//#endregion
 exports.useReleaseAnnouncement = useReleaseAnnouncement;
-//# sourceMappingURL=useReleaseAnnouncement.cjs.map
+
+//# sourceMappingURL=useReleaseAnnouncement.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useReleaseAnnouncement.cjs","sources":["../../../src/components/ReleaseAnnouncement/useReleaseAnnouncement.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 {\n  arrow,\n  autoUpdate,\n  limitShift,\n  offset,\n  type Placement,\n  shift,\n  useFloating,\n  useId,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { type MouseEventHandler, useMemo, useRef } from \"react\";\n\ninterface UseReleaseAnnouncementProps {\n  /**\n   * Whether the release announcement is open.\n   */\n  open: boolean;\n  /**\n   * The header of the release announcement.\n   */\n  header: string;\n  /**\n   * The description of the release announcement.\n   */\n  description: string;\n  /**\n   * The label of the close button.\n   */\n  closeLabel: string;\n  /**\n   * The placement of the release announcement.\n   */\n  placement: Placement;\n  /**\n   * The event handler for the close button.\n   */\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Whether to display an arrow.\n   */\n  displayArrow?: boolean;\n}\n\n/**\n * This hook provides the necessary props to create a release announcement.\n */\nexport function useReleaseAnnouncement({\n  open,\n  header,\n  description,\n  closeLabel,\n  placement,\n  onClick,\n  displayArrow,\n}: UseReleaseAnnouncementProps) {\n  // Set on `aria-labelledby` attribute\n  const labelId = useId();\n  // Set on `aria-describedby` attribute\n  const descriptionId = useId();\n  const arrowRef = useRef(null);\n\n  const data = useFloating({\n    placement,\n    open,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      // arrow height 12px + 4px padding\n      offset(16),\n      shift({ limiter: limitShift({ offset: 50 }) }),\n      // add the little arrow along with the floating content\n      displayArrow &&\n        arrow({\n          element: arrowRef,\n        }),\n    ],\n  });\n\n  // The role is used to determine the correct aria role for the floating content.\n  const role = useRole(data.context);\n  const interactions = useInteractions([role]);\n\n  // Put in the context all the useful data and interactions\n  return useMemo(\n    () => ({\n      open,\n      ...data,\n      ...interactions,\n      labelId,\n      descriptionId,\n      header,\n      description,\n      closeLabel,\n      onClick,\n      displayArrow,\n      arrowRef,\n    }),\n    [\n      open,\n      role,\n      interactions,\n      data,\n      labelId,\n      descriptionId,\n      header,\n      description,\n      closeLabel,\n      onClick,\n      displayArrow,\n      arrowRef,\n    ],\n  );\n}\n"],"names":["useId","useRef","useFloating","autoUpdate","offset","shift","limitShift","arrow","useRole","useInteractions","useMemo"],"mappings":";;;;AAuDO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgC;AAE9B,QAAM,UAAUA,MAAAA,MAAA;AAEhB,QAAM,gBAAgBA,MAAAA,MAAA;AACtB,QAAM,WAAWC,MAAAA,OAAO,IAAI;AAE5B,QAAM,OAAOC,MAAAA,YAAY;AAAA,IACvB;AAAA,IACA;AAAA,IACA,sBAAsBC,MAAAA;AAAAA,IACtB,YAAY;AAAA;AAAA,MAEVC,MAAAA,OAAO,EAAE;AAAA,MACTC,MAAAA,MAAM,EAAE,SAASC,MAAAA,WAAW,EAAE,QAAQ,GAAA,CAAI,GAAG;AAAA;AAAA,MAE7C,gBACEC,MAAAA,MAAM;AAAA,QACJ,SAAS;AAAA,MAAA,CACV;AAAA,IAAA;AAAA,EACL,CACD;AAGD,QAAM,OAAOC,MAAAA,QAAQ,KAAK,OAAO;AACjC,QAAM,eAAeC,MAAAA,gBAAgB,CAAC,IAAI,CAAC;AAG3C,SAAOC,MAAAA;AAAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;;"}
+{"version":3,"file":"useReleaseAnnouncement.cjs","names":[],"sources":["../../../src/components/ReleaseAnnouncement/useReleaseAnnouncement.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 {\n  arrow,\n  autoUpdate,\n  limitShift,\n  offset,\n  type Placement,\n  shift,\n  useFloating,\n  useId,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { type MouseEventHandler, useMemo, useRef } from \"react\";\n\ninterface UseReleaseAnnouncementProps {\n  /**\n   * Whether the release announcement is open.\n   */\n  open: boolean;\n  /**\n   * The header of the release announcement.\n   */\n  header: string;\n  /**\n   * The description of the release announcement.\n   */\n  description: string;\n  /**\n   * The label of the close button.\n   */\n  closeLabel: string;\n  /**\n   * The placement of the release announcement.\n   */\n  placement: Placement;\n  /**\n   * The event handler for the close button.\n   */\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Whether to display an arrow.\n   */\n  displayArrow?: boolean;\n}\n\n/**\n * This hook provides the necessary props to create a release announcement.\n */\nexport function useReleaseAnnouncement({\n  open,\n  header,\n  description,\n  closeLabel,\n  placement,\n  onClick,\n  displayArrow,\n}: UseReleaseAnnouncementProps) {\n  // Set on `aria-labelledby` attribute\n  const labelId = useId();\n  // Set on `aria-describedby` attribute\n  const descriptionId = useId();\n  const arrowRef = useRef(null);\n\n  const data = useFloating({\n    placement,\n    open,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      // arrow height 12px + 4px padding\n      offset(16),\n      shift({ limiter: limitShift({ offset: 50 }) }),\n      // add the little arrow along with the floating content\n      displayArrow &&\n        arrow({\n          element: arrowRef,\n        }),\n    ],\n  });\n\n  // The role is used to determine the correct aria role for the floating content.\n  const role = useRole(data.context);\n  const interactions = useInteractions([role]);\n\n  // Put in the context all the useful data and interactions\n  return useMemo(\n    () => ({\n      open,\n      ...data,\n      ...interactions,\n      labelId,\n      descriptionId,\n      header,\n      description,\n      closeLabel,\n      onClick,\n      displayArrow,\n      arrowRef,\n    }),\n    [\n      open,\n      role,\n      interactions,\n      data,\n      labelId,\n      descriptionId,\n      header,\n      description,\n      closeLabel,\n      onClick,\n      displayArrow,\n      arrowRef,\n    ],\n  );\n}\n"],"mappings":";;;;;;;AAuDA,SAAgB,uBAAuB,EACrC,MACA,QACA,aACA,YACA,WACA,SACA,gBAC8B;CAE9B,MAAM,WAAA,GAAA,mBAAA,QAAiB;CAEvB,MAAM,iBAAA,GAAA,mBAAA,QAAuB;CAC7B,MAAM,YAAA,GAAA,MAAA,QAAkB,KAAK;CAE7B,MAAM,QAAA,GAAA,mBAAA,aAAmB;EACvB;EACA;EACA,sBAAsB,mBAAA;EACtB,YAAY;kCAEH,GAAG;iCACJ,EAAE,UAAA,GAAA,mBAAA,YAAoB,EAAE,QAAQ,IAAI,CAAC,EAAE,CAAC;GAE9C,iBAAA,GAAA,mBAAA,OACQ,EACJ,SAAS,UACV,CAAC;GACL;EACF,CAAC;CAGF,MAAM,QAAA,GAAA,mBAAA,SAAe,KAAK,QAAQ;CAClC,MAAM,gBAAA,GAAA,mBAAA,iBAA+B,CAAC,KAAK,CAAC;AAG5C,SAAA,GAAA,MAAA,gBACS;EACL;EACA,GAAG;EACH,GAAG;EACH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF"}