@vector-im/compound-web 8.4.0 → 9.0.1

package/dist/components/Avatar/AvatarStack.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarStack.cjs","sources":["../../../src/components/Avatar/AvatarStack.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, { useEffect } from \"react\";\nimport styles from \"./Avatar.module.css\";\nimport clipMask from \"./avatar-clip.mask.svg?raw\";\n\ntype AvatarStackProps = {\n  className?: string;\n};\n\nconst AVATAR_MASK_ID = \"cpdAvatarClipSvg\";\nlet AvatarStackUsageCount = 0;\n\n/**\n * Renders a stack of avatars and clips the content appropriately.\n *\n * The `type` of avatars should always be set to `round`\n * And all the avatars should have the same size.\n */\nexport const AvatarStack: React.FC<\n  React.PropsWithChildren<AvatarStackProps>\n> = ({ children, className }) => {\n  /**\n   * The `clip-path` property in CSS supports a `path()` function, however\n   * that has to use pixel values.\n   * `clipPathUnits=\"objectBoundingBox\"` only exists inside an SVG document.\n   * Which is why we have the external `avatar-clip.mask.svg`.\n   *\n   * It is possible to load this SVG externally using `url(path/to/doc.svg#id)`\n   * But this is only supported in Firefox\n   * This leaves us with no choice but rendering SVG inline in the HTML document\n   * And making sure there is always only a single instance regardless of the\n   * amount of `AvatarStack` instance in the document.\n   */\n  useEffect(() => {\n    if (AvatarStackUsageCount === 0) {\n      const svgMask = `\n        <div aria-hidden=\"true\" id=\"${AVATAR_MASK_ID}\" class=\"${styles[\"clip-path\"]}\">\n          ${clipMask}\n        </div>\n      `;\n      document.body.insertAdjacentHTML(\"beforeend\", svgMask);\n    }\n    AvatarStackUsageCount++;\n    return () => {\n      AvatarStackUsageCount--;\n      if (AvatarStackUsageCount <= 0) {\n        // Cleanup the mask if there are no instances of `AvatarStack` left\n        // on the page\n        document.getElementById(AVATAR_MASK_ID)?.remove();\n      }\n    };\n  }, []);\n\n  return (\n    <div className={classnames(styles[\"stacked-avatars\"], className)}>\n      {children}\n    </div>\n  );\n};\n"],"names":["useEffect","styles","clipMask","jsx","classnames"],"mappings":";;;;;;;AAgBA,MAAM,iBAAiB;AACvB,IAAI,wBAAwB;AAQrB,MAAM,cAET,CAAC,EAAE,UAAU,gBAAgB;AAa/BA,QAAAA,UAAU,MAAM;AACd,QAAI,0BAA0B,GAAG;AAC/B,YAAM,UAAU;AAAA,sCACgB,cAAc,YAAYC,cAAAA,QAAO,WAAW,CAAC;AAAA,YACvEC,gBAAAA,OAAQ;AAAA;AAAA;AAGd,eAAS,KAAK,mBAAmB,aAAa,OAAO;AAAA,IACvD;AACA;AACA,WAAO,MAAM;AACX;AACA,UAAI,yBAAyB,GAAG;AAG9B,iBAAS,eAAe,cAAc,GAAG,OAAA;AAAA,MAC3C;AAAA,IACF;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,SACEC,+BAAC,SAAI,WAAWC,WAAWH,sBAAO,iBAAiB,GAAG,SAAS,GAC5D,UACH;AAEJ;;"}
+{"version":3,"file":"AvatarStack.cjs","names":[],"sources":["../../../src/components/Avatar/AvatarStack.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, { useEffect } from \"react\";\nimport styles from \"./Avatar.module.css\";\nimport clipMask from \"./avatar-clip.mask.svg?raw\";\n\ntype AvatarStackProps = {\n  className?: string;\n};\n\nconst AVATAR_MASK_ID = \"cpdAvatarClipSvg\";\nlet AvatarStackUsageCount = 0;\n\n/**\n * Renders a stack of avatars and clips the content appropriately.\n *\n * The `type` of avatars should always be set to `round`\n * And all the avatars should have the same size.\n */\nexport const AvatarStack: React.FC<\n  React.PropsWithChildren<AvatarStackProps>\n> = ({ children, className }) => {\n  /**\n   * The `clip-path` property in CSS supports a `path()` function, however\n   * that has to use pixel values.\n   * `clipPathUnits=\"objectBoundingBox\"` only exists inside an SVG document.\n   * Which is why we have the external `avatar-clip.mask.svg`.\n   *\n   * It is possible to load this SVG externally using `url(path/to/doc.svg#id)`\n   * But this is only supported in Firefox\n   * This leaves us with no choice but rendering SVG inline in the HTML document\n   * And making sure there is always only a single instance regardless of the\n   * amount of `AvatarStack` instance in the document.\n   */\n  useEffect(() => {\n    if (AvatarStackUsageCount === 0) {\n      const svgMask = `\n        <div aria-hidden=\"true\" id=\"${AVATAR_MASK_ID}\" class=\"${styles[\"clip-path\"]}\">\n          ${clipMask}\n        </div>\n      `;\n      document.body.insertAdjacentHTML(\"beforeend\", svgMask);\n    }\n    AvatarStackUsageCount++;\n    return () => {\n      AvatarStackUsageCount--;\n      if (AvatarStackUsageCount <= 0) {\n        // Cleanup the mask if there are no instances of `AvatarStack` left\n        // on the page\n        document.getElementById(AVATAR_MASK_ID)?.remove();\n      }\n    };\n  }, []);\n\n  return (\n    <div className={classnames(styles[\"stacked-avatars\"], className)}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAgBA,IAAM,iBAAiB;AACvB,IAAI,wBAAwB;;;;;;;AAQ5B,IAAa,eAER,EAAE,UAAU,gBAAgB;;;;;;;;;;;;;AAa/B,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,0BAA0B,GAAG;GAC/B,MAAM,UAAU;sCACgB,eAAe,WAAW,sBAAA,QAAO,aAAa;YACxE,yBAAA,QAAS;;;AAGf,YAAS,KAAK,mBAAmB,aAAa,QAAQ;;AAExD;AACA,eAAa;AACX;AACA,OAAI,yBAAyB,EAG3B,UAAS,eAAe,eAAe,EAAE,QAAQ;;IAGpD,EAAE,CAAC;AAEN,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,YAAA,GAAA,WAAA,SAAsB,sBAAA,QAAO,oBAAoB,UAAU;EAC7D;EACG,CAAA"}

package/dist/components/Avatar/AvatarStack.js

@@ -1,31 +1,51 @@
-import { jsx } from "react/jsx-runtime";
+import Avatar_module_default from "./Avatar.module.js";
+import avatar_clip_mask_default from "./avatar-clip.mask.js";
 import classNames from "classnames";
 import { useEffect } from "react";
-import styles from "./Avatar.module.css.js";
-import clipMask from "./avatar-clip.mask.svg.js";
-const AVATAR_MASK_ID = "cpdAvatarClipSvg";
-let AvatarStackUsageCount = 0;
-const AvatarStack = ({ children, className }) => {
-  useEffect(() => {
-    if (AvatarStackUsageCount === 0) {
-      const svgMask = `
-        <div aria-hidden="true" id="${AVATAR_MASK_ID}" class="${styles["clip-path"]}">
-          ${clipMask}
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Avatar/AvatarStack.tsx
+var AVATAR_MASK_ID = "cpdAvatarClipSvg";
+var AvatarStackUsageCount = 0;
+/**
+* Renders a stack of avatars and clips the content appropriately.
+*
+* The `type` of avatars should always be set to `round`
+* And all the avatars should have the same size.
+*/
+var AvatarStack = ({ children, className }) => {
+	/**
+	* The `clip-path` property in CSS supports a `path()` function, however
+	* that has to use pixel values.
+	* `clipPathUnits="objectBoundingBox"` only exists inside an SVG document.
+	* Which is why we have the external `avatar-clip.mask.svg`.
+	*
+	* It is possible to load this SVG externally using `url(path/to/doc.svg#id)`
+	* But this is only supported in Firefox
+	* This leaves us with no choice but rendering SVG inline in the HTML document
+	* And making sure there is always only a single instance regardless of the
+	* amount of `AvatarStack` instance in the document.
+	*/
+	useEffect(() => {
+		if (AvatarStackUsageCount === 0) {
+			const svgMask = `
+        <div aria-hidden="true" id="${AVATAR_MASK_ID}" class="${Avatar_module_default["clip-path"]}">
+          ${avatar_clip_mask_default}
         </div>
       `;
-      document.body.insertAdjacentHTML("beforeend", svgMask);
-    }
-    AvatarStackUsageCount++;
-    return () => {
-      AvatarStackUsageCount--;
-      if (AvatarStackUsageCount <= 0) {
-        document.getElementById(AVATAR_MASK_ID)?.remove();
-      }
-    };
-  }, []);
-  return /* @__PURE__ */ jsx("div", { className: classNames(styles["stacked-avatars"], className), children });
-};
-export {
-  AvatarStack
+			document.body.insertAdjacentHTML("beforeend", svgMask);
+		}
+		AvatarStackUsageCount++;
+		return () => {
+			AvatarStackUsageCount--;
+			if (AvatarStackUsageCount <= 0) document.getElementById(AVATAR_MASK_ID)?.remove();
+		};
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		className: classNames(Avatar_module_default["stacked-avatars"], className),
+		children
+	});
 };
-//# sourceMappingURL=AvatarStack.js.map
+//#endregion
+export { AvatarStack };
+
+//# sourceMappingURL=AvatarStack.js.map

package/dist/components/Avatar/AvatarStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarStack.js","sources":["../../../src/components/Avatar/AvatarStack.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, { useEffect } from \"react\";\nimport styles from \"./Avatar.module.css\";\nimport clipMask from \"./avatar-clip.mask.svg?raw\";\n\ntype AvatarStackProps = {\n  className?: string;\n};\n\nconst AVATAR_MASK_ID = \"cpdAvatarClipSvg\";\nlet AvatarStackUsageCount = 0;\n\n/**\n * Renders a stack of avatars and clips the content appropriately.\n *\n * The `type` of avatars should always be set to `round`\n * And all the avatars should have the same size.\n */\nexport const AvatarStack: React.FC<\n  React.PropsWithChildren<AvatarStackProps>\n> = ({ children, className }) => {\n  /**\n   * The `clip-path` property in CSS supports a `path()` function, however\n   * that has to use pixel values.\n   * `clipPathUnits=\"objectBoundingBox\"` only exists inside an SVG document.\n   * Which is why we have the external `avatar-clip.mask.svg`.\n   *\n   * It is possible to load this SVG externally using `url(path/to/doc.svg#id)`\n   * But this is only supported in Firefox\n   * This leaves us with no choice but rendering SVG inline in the HTML document\n   * And making sure there is always only a single instance regardless of the\n   * amount of `AvatarStack` instance in the document.\n   */\n  useEffect(() => {\n    if (AvatarStackUsageCount === 0) {\n      const svgMask = `\n        <div aria-hidden=\"true\" id=\"${AVATAR_MASK_ID}\" class=\"${styles[\"clip-path\"]}\">\n          ${clipMask}\n        </div>\n      `;\n      document.body.insertAdjacentHTML(\"beforeend\", svgMask);\n    }\n    AvatarStackUsageCount++;\n    return () => {\n      AvatarStackUsageCount--;\n      if (AvatarStackUsageCount <= 0) {\n        // Cleanup the mask if there are no instances of `AvatarStack` left\n        // on the page\n        document.getElementById(AVATAR_MASK_ID)?.remove();\n      }\n    };\n  }, []);\n\n  return (\n    <div className={classnames(styles[\"stacked-avatars\"], className)}>\n      {children}\n    </div>\n  );\n};\n"],"names":["classnames"],"mappings":";;;;;AAgBA,MAAM,iBAAiB;AACvB,IAAI,wBAAwB;AAQrB,MAAM,cAET,CAAC,EAAE,UAAU,gBAAgB;AAa/B,YAAU,MAAM;AACd,QAAI,0BAA0B,GAAG;AAC/B,YAAM,UAAU;AAAA,sCACgB,cAAc,YAAY,OAAO,WAAW,CAAC;AAAA,YACvE,QAAQ;AAAA;AAAA;AAGd,eAAS,KAAK,mBAAmB,aAAa,OAAO;AAAA,IACvD;AACA;AACA,WAAO,MAAM;AACX;AACA,UAAI,yBAAyB,GAAG;AAG9B,iBAAS,eAAe,cAAc,GAAG,OAAA;AAAA,MAC3C;AAAA,IACF;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,SACE,oBAAC,SAAI,WAAWA,WAAW,OAAO,iBAAiB,GAAG,SAAS,GAC5D,UACH;AAEJ;"}
+{"version":3,"file":"AvatarStack.js","names":[],"sources":["../../../src/components/Avatar/AvatarStack.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, { useEffect } from \"react\";\nimport styles from \"./Avatar.module.css\";\nimport clipMask from \"./avatar-clip.mask.svg?raw\";\n\ntype AvatarStackProps = {\n  className?: string;\n};\n\nconst AVATAR_MASK_ID = \"cpdAvatarClipSvg\";\nlet AvatarStackUsageCount = 0;\n\n/**\n * Renders a stack of avatars and clips the content appropriately.\n *\n * The `type` of avatars should always be set to `round`\n * And all the avatars should have the same size.\n */\nexport const AvatarStack: React.FC<\n  React.PropsWithChildren<AvatarStackProps>\n> = ({ children, className }) => {\n  /**\n   * The `clip-path` property in CSS supports a `path()` function, however\n   * that has to use pixel values.\n   * `clipPathUnits=\"objectBoundingBox\"` only exists inside an SVG document.\n   * Which is why we have the external `avatar-clip.mask.svg`.\n   *\n   * It is possible to load this SVG externally using `url(path/to/doc.svg#id)`\n   * But this is only supported in Firefox\n   * This leaves us with no choice but rendering SVG inline in the HTML document\n   * And making sure there is always only a single instance regardless of the\n   * amount of `AvatarStack` instance in the document.\n   */\n  useEffect(() => {\n    if (AvatarStackUsageCount === 0) {\n      const svgMask = `\n        <div aria-hidden=\"true\" id=\"${AVATAR_MASK_ID}\" class=\"${styles[\"clip-path\"]}\">\n          ${clipMask}\n        </div>\n      `;\n      document.body.insertAdjacentHTML(\"beforeend\", svgMask);\n    }\n    AvatarStackUsageCount++;\n    return () => {\n      AvatarStackUsageCount--;\n      if (AvatarStackUsageCount <= 0) {\n        // Cleanup the mask if there are no instances of `AvatarStack` left\n        // on the page\n        document.getElementById(AVATAR_MASK_ID)?.remove();\n      }\n    };\n  }, []);\n\n  return (\n    <div className={classnames(styles[\"stacked-avatars\"], className)}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAgBA,IAAM,iBAAiB;AACvB,IAAI,wBAAwB;;;;;;;AAQ5B,IAAa,eAER,EAAE,UAAU,gBAAgB;;;;;;;;;;;;;AAa/B,iBAAgB;AACd,MAAI,0BAA0B,GAAG;GAC/B,MAAM,UAAU;sCACgB,eAAe,WAAW,sBAAO,aAAa;YACxE,yBAAS;;;AAGf,YAAS,KAAK,mBAAmB,aAAa,QAAQ;;AAExD;AACA,eAAa;AACX;AACA,OAAI,yBAAyB,EAG3B,UAAS,eAAe,eAAe,EAAE,QAAQ;;IAGpD,EAAE,CAAC;AAEN,QACE,oBAAC,OAAD;EAAK,WAAW,WAAW,sBAAO,oBAAoB,UAAU;EAC7D;EACG,CAAA"}

package/dist/components/Avatar/avatar-clip.mask.cjs

@@ -0,0 +1,6 @@
+//#region src/components/Avatar/avatar-clip.mask.svg?raw
+var avatar_clip_mask_default = "<!--\nCopyright 2023 New Vector Ltd.\nCopyright 2026 Element Creations 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<svg>\n  <clipPath id=\"cpdAvatarClip\" clipPathUnits=\"objectBoundingBox\">\n    <!-- \n        All values below need to be between 0 and 1\n        for objectBoundingBox to work\n     -->\n    <path d=\"M 0,0 V 1 H 0.7683594 A 0.6,0.6 0 0 1 0.5,0.5 0.6,0.6 0 0 1 0.7683594,0 Z\" />\n  </clipPath>\n</svg>\n";
+//#endregion
+exports.default = avatar_clip_mask_default;
+
+//# sourceMappingURL=avatar-clip.mask.cjs.map

package/dist/components/Avatar/avatar-clip.mask.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-clip.mask.cjs","names":[],"sources":["../../../src/components/Avatar/avatar-clip.mask.svg?raw"],"sourcesContent":["export default \"<!--\\nCopyright 2023 New Vector Ltd.\\nCopyright 2026 Element Creations 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<svg>\\n  <clipPath id=\\\"cpdAvatarClip\\\" clipPathUnits=\\\"objectBoundingBox\\\">\\n    <!-- \\n        All values below need to be between 0 and 1\\n        for objectBoundingBox to work\\n     -->\\n    <path d=\\\"M 0,0 V 1 H 0.7683594 A 0.6,0.6 0 0 1 0.5,0.5 0.6,0.6 0 0 1 0.7683594,0 Z\\\" />\\n  </clipPath>\\n</svg>\\n\""],"mappings":";AAAA,IAAA,2BAAe"}

package/dist/components/Avatar/avatar-clip.mask.js

@@ -0,0 +1,6 @@
+//#region src/components/Avatar/avatar-clip.mask.svg?raw
+var avatar_clip_mask_default = "<!--\nCopyright 2023 New Vector Ltd.\nCopyright 2026 Element Creations 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<svg>\n  <clipPath id=\"cpdAvatarClip\" clipPathUnits=\"objectBoundingBox\">\n    <!-- \n        All values below need to be between 0 and 1\n        for objectBoundingBox to work\n     -->\n    <path d=\"M 0,0 V 1 H 0.7683594 A 0.6,0.6 0 0 1 0.5,0.5 0.6,0.6 0 0 1 0.7683594,0 Z\" />\n  </clipPath>\n</svg>\n";
+//#endregion
+export { avatar_clip_mask_default as default };
+
+//# sourceMappingURL=avatar-clip.mask.js.map

package/dist/components/Avatar/avatar-clip.mask.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-clip.mask.js","names":[],"sources":["../../../src/components/Avatar/avatar-clip.mask.svg?raw"],"sourcesContent":["export default \"<!--\\nCopyright 2023 New Vector Ltd.\\nCopyright 2026 Element Creations 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<svg>\\n  <clipPath id=\\\"cpdAvatarClip\\\" clipPathUnits=\\\"objectBoundingBox\\\">\\n    <!-- \\n        All values below need to be between 0 and 1\\n        for objectBoundingBox to work\\n     -->\\n    <path d=\\\"M 0,0 V 1 H 0.7683594 A 0.6,0.6 0 0 1 0.5,0.5 0.6,0.6 0 0 1 0.7683594,0 Z\\\" />\\n  </clipPath>\\n</svg>\\n\""],"mappings":";AAAA,IAAA,2BAAe"}

package/dist/components/Avatar/useIdColorHash.cjs

@@ -1,12 +1,16 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/components/Avatar/useIdColorHash.ts
+/**
+* Determines a number for a given Matrix ID or room ID, helps disambiguating users
+* who are trying to impersonate someone else.
+* @param id - a Matrix ID or room ID
+* @returns a hash of the ID provided
+*/
 function useIdColorHash(id) {
-  const MIN = 1;
-  const MAX = 6;
-  const charCodeSum = id.split("").reduce((sum, char) => {
-    return sum + char.charCodeAt(0);
-  }, 0);
-  return charCodeSum % MAX + MIN;
+	return id.split("").reduce((sum, char) => {
+		return sum + char.charCodeAt(0);
+	}, 0) % 6 + 1;
 }
+//#endregion
 exports.useIdColorHash = useIdColorHash;
-//# sourceMappingURL=useIdColorHash.cjs.map
+
+//# sourceMappingURL=useIdColorHash.cjs.map

package/dist/components/Avatar/useIdColorHash.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useIdColorHash.cjs","sources":["../../../src/components/Avatar/useIdColorHash.ts"],"sourcesContent":["/*\nCopyright 2023 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/**\n * Determines a number for a given Matrix ID or room ID, helps disambiguating users\n * who are trying to impersonate someone else.\n * @param id - a Matrix ID or room ID\n * @returns a hash of the ID provided\n */\nexport function useIdColorHash(id: string): number {\n  const MIN = 1;\n  const MAX = 6;\n  // Sum up the values of all the char codes in the string\n  const charCodeSum = id.split(\"\").reduce((sum, char) => {\n    return sum + char.charCodeAt(0);\n  }, 0);\n  return (charCodeSum % MAX) + MIN;\n}\n"],"names":[],"mappings":";;AAaO,SAAS,eAAe,IAAoB;AACjD,QAAM,MAAM;AACZ,QAAM,MAAM;AAEZ,QAAM,cAAc,GAAG,MAAM,EAAE,EAAE,OAAO,CAAC,KAAK,SAAS;AACrD,WAAO,MAAM,KAAK,WAAW,CAAC;AAAA,EAChC,GAAG,CAAC;AACJ,SAAQ,cAAc,MAAO;AAC/B;;"}
+{"version":3,"file":"useIdColorHash.cjs","names":[],"sources":["../../../src/components/Avatar/useIdColorHash.ts"],"sourcesContent":["/*\nCopyright 2023 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/**\n * Determines a number for a given Matrix ID or room ID, helps disambiguating users\n * who are trying to impersonate someone else.\n * @param id - a Matrix ID or room ID\n * @returns a hash of the ID provided\n */\nexport function useIdColorHash(id: string): number {\n  const MIN = 1;\n  const MAX = 6;\n  // Sum up the values of all the char codes in the string\n  const charCodeSum = id.split(\"\").reduce((sum, char) => {\n    return sum + char.charCodeAt(0);\n  }, 0);\n  return (charCodeSum % MAX) + MIN;\n}\n"],"mappings":";;;;;;;AAaA,SAAgB,eAAe,IAAoB;AAOjD,QAHoB,GAAG,MAAM,GAAG,CAAC,QAAQ,KAAK,SAAS;AACrD,SAAO,MAAM,KAAK,WAAW,EAAE;IAC9B,EAAE,GAJO,IADA"}

package/dist/components/Avatar/useIdColorHash.js

@@ -1,12 +1,16 @@
+//#region src/components/Avatar/useIdColorHash.ts
+/**
+* Determines a number for a given Matrix ID or room ID, helps disambiguating users
+* who are trying to impersonate someone else.
+* @param id - a Matrix ID or room ID
+* @returns a hash of the ID provided
+*/
 function useIdColorHash(id) {
-  const MIN = 1;
-  const MAX = 6;
-  const charCodeSum = id.split("").reduce((sum, char) => {
-    return sum + char.charCodeAt(0);
-  }, 0);
-  return charCodeSum % MAX + MIN;
+	return id.split("").reduce((sum, char) => {
+		return sum + char.charCodeAt(0);
+	}, 0) % 6 + 1;
 }
-export {
-  useIdColorHash
-};
-//# sourceMappingURL=useIdColorHash.js.map
+//#endregion
+export { useIdColorHash };
+
+//# sourceMappingURL=useIdColorHash.js.map

package/dist/components/Avatar/useIdColorHash.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIdColorHash.js","sources":["../../../src/components/Avatar/useIdColorHash.ts"],"sourcesContent":["/*\nCopyright 2023 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/**\n * Determines a number for a given Matrix ID or room ID, helps disambiguating users\n * who are trying to impersonate someone else.\n * @param id - a Matrix ID or room ID\n * @returns a hash of the ID provided\n */\nexport function useIdColorHash(id: string): number {\n  const MIN = 1;\n  const MAX = 6;\n  // Sum up the values of all the char codes in the string\n  const charCodeSum = id.split(\"\").reduce((sum, char) => {\n    return sum + char.charCodeAt(0);\n  }, 0);\n  return (charCodeSum % MAX) + MIN;\n}\n"],"names":[],"mappings":"AAaO,SAAS,eAAe,IAAoB;AACjD,QAAM,MAAM;AACZ,QAAM,MAAM;AAEZ,QAAM,cAAc,GAAG,MAAM,EAAE,EAAE,OAAO,CAAC,KAAK,SAAS;AACrD,WAAO,MAAM,KAAK,WAAW,CAAC;AAAA,EAChC,GAAG,CAAC;AACJ,SAAQ,cAAc,MAAO;AAC/B;"}
+{"version":3,"file":"useIdColorHash.js","names":[],"sources":["../../../src/components/Avatar/useIdColorHash.ts"],"sourcesContent":["/*\nCopyright 2023 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/**\n * Determines a number for a given Matrix ID or room ID, helps disambiguating users\n * who are trying to impersonate someone else.\n * @param id - a Matrix ID or room ID\n * @returns a hash of the ID provided\n */\nexport function useIdColorHash(id: string): number {\n  const MIN = 1;\n  const MAX = 6;\n  // Sum up the values of all the char codes in the string\n  const charCodeSum = id.split(\"\").reduce((sum, char) => {\n    return sum + char.charCodeAt(0);\n  }, 0);\n  return (charCodeSum % MAX) + MIN;\n}\n"],"mappings":";;;;;;;AAaA,SAAgB,eAAe,IAAoB;AAOjD,QAHoB,GAAG,MAAM,GAAG,CAAC,QAAQ,KAAK,SAAS;AACrD,SAAO,MAAM,KAAK,WAAW,EAAE;IAC9B,EAAE,GAJO,IADA"}

package/dist/components/Badge/Badge.cjs

@@ -1,26 +1,26 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const classNames = require("classnames");
-const Badge_module = require("./Badge.module.css.cjs");
-const Typography = require("../Typography/Typography.cjs");
-const Badge = ({
-  children,
-  kind = "default",
-  className
-}) => {
-  const classes = classNames(Badge_module.default.badge, className);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Typography.Typography,
-    {
-      as: "span",
-      size: "sm",
-      weight: "medium",
-      className: classes,
-      "data-kind": kind,
-      children
-    }
-  );
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_Typography = require("../Typography/Typography.cjs");
+const require_Badge_module = require("./Badge.module.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Badge/Badge.tsx
+/**
+* A Badge component.
+*/
+var Badge = ({ children, kind = "default", className }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+		as: "span",
+		size: "sm",
+		weight: "medium",
+		className: (0, classnames.default)(require_Badge_module.default.badge, className),
+		"data-kind": kind,
+		children
+	});
 };
+//#endregion
 exports.Badge = Badge;
-//# sourceMappingURL=Badge.cjs.map
+
+//# sourceMappingURL=Badge.cjs.map

package/dist/components/Badge/Badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.cjs","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, { type PropsWithChildren } from \"react\";\nimport styles from \"./Badge.module.css\";\nimport { Typography } from \"../Typography/Typography\";\n\ntype BadgeProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The type of badge.\n   */\n  kind?: \"default\" | \"grey\" | \"on-solid\" | \"blue\" | \"green\" | \"red\";\n};\n\n/**\n * A Badge component.\n */\nexport const Badge: React.FC<PropsWithChildren<BadgeProps>> = ({\n  children,\n  kind = \"default\",\n  className,\n}) => {\n  const classes = classnames(styles.badge, className);\n  return (\n    <Typography\n      as=\"span\"\n      size=\"sm\"\n      weight=\"medium\"\n      className={classes}\n      data-kind={kind}\n    >\n      {children}\n    </Typography>\n  );\n};\n"],"names":["classnames","styles","jsx","Typography"],"mappings":";;;;;;AA0BO,MAAM,QAAiD,CAAC;AAAA,EAC7D;AAAA,EACA,OAAO;AAAA,EACP;AACF,MAAM;AACJ,QAAM,UAAUA,WAAWC,qBAAO,OAAO,SAAS;AAClD,SACEC,2BAAAA;AAAAA,IAACC,WAAAA;AAAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,MAAK;AAAA,MACL,QAAO;AAAA,MACP,WAAW;AAAA,MACX,aAAW;AAAA,MAEV;AAAA,IAAA;AAAA,EAAA;AAGP;;"}
+{"version":3,"file":"Badge.cjs","names":[],"sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, { type PropsWithChildren } from \"react\";\nimport styles from \"./Badge.module.css\";\nimport { Typography } from \"../Typography/Typography\";\n\ntype BadgeProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The type of badge.\n   */\n  kind?: \"default\" | \"grey\" | \"on-solid\" | \"blue\" | \"green\" | \"red\";\n};\n\n/**\n * A Badge component.\n */\nexport const Badge: React.FC<PropsWithChildren<BadgeProps>> = ({\n  children,\n  kind = \"default\",\n  className,\n}) => {\n  const classes = classnames(styles.badge, className);\n  return (\n    <Typography\n      as=\"span\"\n      size=\"sm\"\n      weight=\"medium\"\n      className={classes}\n      data-kind={kind}\n    >\n      {children}\n    </Typography>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AA0BA,IAAa,SAAkD,EAC7D,UACA,OAAO,WACP,gBACI;AAEJ,QACE,iBAAA,GAAA,kBAAA,KAAC,mBAAA,YAAD;EACE,IAAG;EACH,MAAK;EACL,QAAO;EACP,YAAA,GAAA,WAAA,SANuB,qBAAA,QAAO,OAAO,UAAU;EAO/C,aAAW;EAEV;EACU,CAAA"}

package/dist/components/Badge/Badge.js

@@ -1,26 +1,23 @@
-import { jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-import styles from "./Badge.module.css.js";
 import { Typography } from "../Typography/Typography.js";
-const Badge = ({
-  children,
-  kind = "default",
-  className
-}) => {
-  const classes = classNames(styles.badge, className);
-  return /* @__PURE__ */ jsx(
-    Typography,
-    {
-      as: "span",
-      size: "sm",
-      weight: "medium",
-      className: classes,
-      "data-kind": kind,
-      children
-    }
-  );
-};
-export {
-  Badge
+import Badge_module_default from "./Badge.module.js";
+import classNames from "classnames";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Badge/Badge.tsx
+/**
+* A Badge component.
+*/
+var Badge = ({ children, kind = "default", className }) => {
+	return /* @__PURE__ */ jsx(Typography, {
+		as: "span",
+		size: "sm",
+		weight: "medium",
+		className: classNames(Badge_module_default.badge, className),
+		"data-kind": kind,
+		children
+	});
 };
-//# sourceMappingURL=Badge.js.map
+//#endregion
+export { Badge };
+
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, { type PropsWithChildren } from \"react\";\nimport styles from \"./Badge.module.css\";\nimport { Typography } from \"../Typography/Typography\";\n\ntype BadgeProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The type of badge.\n   */\n  kind?: \"default\" | \"grey\" | \"on-solid\" | \"blue\" | \"green\" | \"red\";\n};\n\n/**\n * A Badge component.\n */\nexport const Badge: React.FC<PropsWithChildren<BadgeProps>> = ({\n  children,\n  kind = \"default\",\n  className,\n}) => {\n  const classes = classnames(styles.badge, className);\n  return (\n    <Typography\n      as=\"span\"\n      size=\"sm\"\n      weight=\"medium\"\n      className={classes}\n      data-kind={kind}\n    >\n      {children}\n    </Typography>\n  );\n};\n"],"names":["classnames"],"mappings":";;;;AA0BO,MAAM,QAAiD,CAAC;AAAA,EAC7D;AAAA,EACA,OAAO;AAAA,EACP;AACF,MAAM;AACJ,QAAM,UAAUA,WAAW,OAAO,OAAO,SAAS;AAClD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,MAAK;AAAA,MACL,QAAO;AAAA,MACP,WAAW;AAAA,MACX,aAAW;AAAA,MAEV;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Badge.js","names":[],"sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, { type PropsWithChildren } from \"react\";\nimport styles from \"./Badge.module.css\";\nimport { Typography } from \"../Typography/Typography\";\n\ntype BadgeProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The type of badge.\n   */\n  kind?: \"default\" | \"grey\" | \"on-solid\" | \"blue\" | \"green\" | \"red\";\n};\n\n/**\n * A Badge component.\n */\nexport const Badge: React.FC<PropsWithChildren<BadgeProps>> = ({\n  children,\n  kind = \"default\",\n  className,\n}) => {\n  const classes = classnames(styles.badge, className);\n  return (\n    <Typography\n      as=\"span\"\n      size=\"sm\"\n      weight=\"medium\"\n      className={classes}\n      data-kind={kind}\n    >\n      {children}\n    </Typography>\n  );\n};\n"],"mappings":";;;;;;;;;AA0BA,IAAa,SAAkD,EAC7D,UACA,OAAO,WACP,gBACI;AAEJ,QACE,oBAAC,YAAD;EACE,IAAG;EACH,MAAK;EACL,QAAO;EACP,WANY,WAAW,qBAAO,OAAO,UAAU;EAO/C,aAAW;EAEV;EACU,CAAA"}

package/dist/components/Badge/Badge.module.cjs

@@ -0,0 +1,5 @@
+var Badge_module_default = { badge: "_badge_18gm1_8" };
+//#endregion
+exports.default = Badge_module_default;
+
+//# sourceMappingURL=Badge.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.module.cjs","names":[],"sources":["../../../src/components/Badge/Badge.module.css"],"sourcesContent":["/*\nCopyright 2023 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.badge {\n  display: inline-flex;\n  gap: var(--cpd-space-1x);\n  align-items: center;\n  border-radius: 9999px; /* pill effect */\n  padding: var(--cpd-space-1x) var(--cpd-space-3x);\n}\n\n.badge[data-kind=\"default\"] {\n  border: 1px solid var(--cpd-color-alpha-gray-400);\n  outline: none;\n  color: var(--cpd-color-gray-1100);\n}\n\n.badge[data-kind=\"grey\"] {\n  background: var(--cpd-color-alpha-gray-300);\n  color: var(--cpd-color-gray-1100);\n}\n\n.badge[data-kind=\"on-solid\"] {\n  background: var(--cpd-color-alpha-gray-1200);\n  color: var(--cpd-color-text-on-solid-primary);\n}\n\n.badge[data-kind=\"blue\"] {\n  background: var(--cpd-color-alpha-blue-300);\n  color: var(--cpd-color-blue-1100);\n}\n\n.badge[data-kind=\"green\"] {\n  background: var(--cpd-color-alpha-green-300);\n  color: var(--cpd-color-green-1100);\n}\n\n.badge[data-kind=\"red\"] {\n  background: var(--cpd-color-alpha-red-300);\n  color: var(--cpd-color-red-1100);\n}\n\n@media (forced-colors: active) {\n  .badge {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}

package/dist/components/Badge/Badge.module.js

@@ -0,0 +1,5 @@
+var Badge_module_default = { badge: "_badge_18gm1_8" };
+//#endregion
+export { Badge_module_default as default };
+
+//# sourceMappingURL=Badge.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.module.js","names":[],"sources":["../../../src/components/Badge/Badge.module.css"],"sourcesContent":["/*\nCopyright 2023 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.badge {\n  display: inline-flex;\n  gap: var(--cpd-space-1x);\n  align-items: center;\n  border-radius: 9999px; /* pill effect */\n  padding: var(--cpd-space-1x) var(--cpd-space-3x);\n}\n\n.badge[data-kind=\"default\"] {\n  border: 1px solid var(--cpd-color-alpha-gray-400);\n  outline: none;\n  color: var(--cpd-color-gray-1100);\n}\n\n.badge[data-kind=\"grey\"] {\n  background: var(--cpd-color-alpha-gray-300);\n  color: var(--cpd-color-gray-1100);\n}\n\n.badge[data-kind=\"on-solid\"] {\n  background: var(--cpd-color-alpha-gray-1200);\n  color: var(--cpd-color-text-on-solid-primary);\n}\n\n.badge[data-kind=\"blue\"] {\n  background: var(--cpd-color-alpha-blue-300);\n  color: var(--cpd-color-blue-1100);\n}\n\n.badge[data-kind=\"green\"] {\n  background: var(--cpd-color-alpha-green-300);\n  color: var(--cpd-color-green-1100);\n}\n\n.badge[data-kind=\"red\"] {\n  background: var(--cpd-color-alpha-red-300);\n  color: var(--cpd-color-red-1100);\n}\n\n@media (forced-colors: active) {\n  .badge {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}

package/dist/components/Breadcrumb/Breadcrumb.cjs

@@ -1,58 +1,60 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const Chevron = require("@vector-im/compound-design-tokens/assets/web/icons/chevron-left");
-const Breadcrumb_module = require("./Breadcrumb.module.css.cjs");
-const Link = require("../Link/Link.cjs");
-const classNames = require("classnames");
-const IconButton = require("../Button/IconButton/IconButton.cjs");
-function Breadcrumb({
-  backLabel,
-  onBackClick,
-  pages,
-  onPageClick,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: classNames(Breadcrumb_module.default.breadcrumb, className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      IconButton.IconButton,
-      {
-        kind: "secondary",
-        size: "28px",
-        "aria-label": backLabel,
-        onClick: onBackClick,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Chevron, {})
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("ol", { className: Breadcrumb_module.default.pages, children: pages.map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      Page,
-      {
-        page,
-        isLastPage: index === pages.length - 1,
-        onClick: () => onPageClick(page, index)
-      },
-      index
-    )) })
-  ] });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_IconButton = require("../Button/IconButton/IconButton.cjs");
+const require_Link = require("../Link/Link.cjs");
+const require_Breadcrumb_module = require("./Breadcrumb.module.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _vector_im_compound_design_tokens_assets_web_icons_chevron_left = require("@vector-im/compound-design-tokens/assets/web/icons/chevron-left");
+_vector_im_compound_design_tokens_assets_web_icons_chevron_left = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_chevron_left);
+//#region src/components/Breadcrumb/Breadcrumb.tsx
+/**
+* A breadcrumb component.
+*/
+function Breadcrumb({ backLabel, onBackClick, pages, onPageClick, className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("nav", {
+		className: (0, classnames.default)(require_Breadcrumb_module.default.breadcrumb, className),
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+			kind: "secondary",
+			size: "28px",
+			"aria-label": backLabel,
+			onClick: onBackClick,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_vector_im_compound_design_tokens_assets_web_icons_chevron_left.default, {})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+			className: require_Breadcrumb_module.default.pages,
+			children: pages.map((page, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Page, {
+				page,
+				isLastPage: index === pages.length - 1,
+				onClick: () => onPageClick(page, index)
+			}, index))
+		})]
+	});
 }
+/**
+* A breadcrumb page.
+* If not the last page, the page is displayed in a link.
+*/
 function Page({ page, isLastPage, onClick }) {
-  const onKeyDown = (event) => {
-    if (event.key === " ") {
-      onClick();
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("li", { children: isLastPage ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Breadcrumb_module.default["last-page"], "aria-current": "page", children: page }) : /* @__PURE__ */ jsxRuntime.jsx(
-    Link.Link,
-    {
-      size: "small",
-      role: "button",
-      onClick,
-      onKeyDown,
-      tabIndex: 0,
-      children: page
-    }
-  ) });
+	const onKeyDown = (event) => {
+		if (event.key === " ") onClick();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: isLastPage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: require_Breadcrumb_module.default["last-page"],
+		"aria-current": "page",
+		children: page
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Link.Link, {
+		size: "sm",
+		role: "button",
+		onClick,
+		onKeyDown,
+		tabIndex: 0,
+		children: page
+	}) });
 }
+//#endregion
 exports.Breadcrumb = Breadcrumb;
-//# sourceMappingURL=Breadcrumb.cjs.map
+
+//# sourceMappingURL=Breadcrumb.cjs.map

package/dist/components/Breadcrumb/Breadcrumb.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.cjs","sources":["../../../src/components/Breadcrumb/Breadcrumb.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  type HTMLProps,\n  type JSX,\n  type MouseEventHandler,\n  type KeyboardEvent,\n} from \"react\";\nimport { IconButton } from \"../Button\";\nimport Chevron from \"@vector-im/compound-design-tokens/assets/web/icons/chevron-left\";\nimport styles from \"./Breadcrumb.module.css\";\nimport { Link } from \"../Link/Link.tsx\";\nimport classNames from \"classnames\";\n\ninterface BreadcrumbProps extends HTMLProps<HTMLElement> {\n  /**\n   * The label for the back button.\n   */\n  backLabel: string;\n  /**\n   * The click handler for the back button.\n   */\n  onBackClick: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The pages to display in the breadcrumb.\n   * All the pages except the last one are displayed as links.\n   */\n  pages: string[];\n  /**\n   * The click handler for a page.\n   * @param page - The page that was clicked.\n   * @param index - The index of the page that was clicked.\n   */\n  onPageClick: (page: string, index: number) => void;\n}\n\n/**\n * A breadcrumb component.\n */\nexport function Breadcrumb({\n  backLabel,\n  onBackClick,\n  pages,\n  onPageClick,\n  className,\n  ...props\n}: BreadcrumbProps): JSX.Element {\n  return (\n    <nav className={classNames(styles.breadcrumb, className)} {...props}>\n      <IconButton\n        kind=\"secondary\"\n        size=\"28px\"\n        aria-label={backLabel}\n        onClick={onBackClick}\n      >\n        <Chevron />\n      </IconButton>\n      <ol className={styles.pages}>\n        {pages.map((page, index) => (\n          <Page\n            key={index}\n            page={page}\n            isLastPage={index === pages.length - 1}\n            onClick={() => onPageClick(page, index)}\n          />\n        ))}\n      </ol>\n    </nav>\n  );\n}\n\ninterface PageProps {\n  /**\n   * The page to display.\n   */\n  page: string;\n  /**\n   * Whether this is the last page in the breadcrumb.\n   */\n  isLastPage: boolean;\n  /**\n   * The click handler for the page, ignore for last page.\n   */\n  onClick: () => void;\n}\n\n/**\n * A breadcrumb page.\n * If not the last page, the page is displayed in a link.\n */\nfunction Page({ page, isLastPage, onClick }: PageProps): JSX.Element {\n  const onKeyDown = (event: KeyboardEvent<HTMLAnchorElement>) => {\n    if (event.key === \" \") {\n      onClick();\n    }\n  };\n\n  return (\n    <li>\n      {isLastPage ? (\n        <span className={styles[\"last-page\"]} aria-current=\"page\">\n          {page}\n        </span>\n      ) : (\n        <Link\n          size=\"small\"\n          role=\"button\"\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n          tabIndex={0}\n        >\n          {page}\n        </Link>\n      )}\n    </li>\n  );\n}\n"],"names":["jsxs","styles","jsx","IconButton","Link"],"mappings":";;;;;;;;AA4CO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiC;AAC/B,SACEA,gCAAC,SAAI,WAAW,WAAWC,0BAAO,YAAY,SAAS,GAAI,GAAG,OAC5D,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAACC,WAAAA;AAAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,SAAS;AAAA,QAET,yCAAC,SAAA,CAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEXD,2BAAAA,IAAC,QAAG,WAAWD,kBAAAA,QAAO,OACnB,UAAA,MAAM,IAAI,CAAC,MAAM,UAChBC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QAEC;AAAA,QACA,YAAY,UAAU,MAAM,SAAS;AAAA,QACrC,SAAS,MAAM,YAAY,MAAM,KAAK;AAAA,MAAA;AAAA,MAHjC;AAAA,IAAA,CAKR,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;AAqBA,SAAS,KAAK,EAAE,MAAM,YAAY,WAAmC;AACnE,QAAM,YAAY,CAAC,UAA4C;AAC7D,QAAI,MAAM,QAAQ,KAAK;AACrB,cAAA;AAAA,IACF;AAAA,EACF;AAEA,SACEA,2BAAAA,IAAC,MAAA,EACE,UAAA,aACCA,2BAAAA,IAAC,QAAA,EAAK,WAAWD,kBAAAA,QAAO,WAAW,GAAG,gBAAa,QAChD,UAAA,KAAA,CACH,IAEAC,2BAAAA;AAAAA,IAACE,KAAAA;AAAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MAET,UAAA;AAAA,IAAA;AAAA,EAAA,GAGP;AAEJ;;"}
+{"version":3,"file":"Breadcrumb.cjs","names":[],"sources":["../../../src/components/Breadcrumb/Breadcrumb.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  type HTMLProps,\n  type JSX,\n  type MouseEventHandler,\n  type KeyboardEvent,\n} from \"react\";\nimport { IconButton } from \"../Button\";\nimport Chevron from \"@vector-im/compound-design-tokens/assets/web/icons/chevron-left\";\nimport styles from \"./Breadcrumb.module.css\";\nimport { Link } from \"../Link/Link.tsx\";\nimport classNames from \"classnames\";\n\ninterface BreadcrumbProps extends HTMLProps<HTMLElement> {\n  /**\n   * The label for the back button.\n   */\n  backLabel: string;\n  /**\n   * The click handler for the back button.\n   */\n  onBackClick: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The pages to display in the breadcrumb.\n   * All the pages except the last one are displayed as links.\n   */\n  pages: string[];\n  /**\n   * The click handler for a page.\n   * @param page - The page that was clicked.\n   * @param index - The index of the page that was clicked.\n   */\n  onPageClick: (page: string, index: number) => void;\n}\n\n/**\n * A breadcrumb component.\n */\nexport function Breadcrumb({\n  backLabel,\n  onBackClick,\n  pages,\n  onPageClick,\n  className,\n  ...props\n}: BreadcrumbProps): JSX.Element {\n  return (\n    <nav className={classNames(styles.breadcrumb, className)} {...props}>\n      <IconButton\n        kind=\"secondary\"\n        size=\"28px\"\n        aria-label={backLabel}\n        onClick={onBackClick}\n      >\n        <Chevron />\n      </IconButton>\n      <ol className={styles.pages}>\n        {pages.map((page, index) => (\n          <Page\n            key={index}\n            page={page}\n            isLastPage={index === pages.length - 1}\n            onClick={() => onPageClick(page, index)}\n          />\n        ))}\n      </ol>\n    </nav>\n  );\n}\n\ninterface PageProps {\n  /**\n   * The page to display.\n   */\n  page: string;\n  /**\n   * Whether this is the last page in the breadcrumb.\n   */\n  isLastPage: boolean;\n  /**\n   * The click handler for the page, ignore for last page.\n   */\n  onClick: () => void;\n}\n\n/**\n * A breadcrumb page.\n * If not the last page, the page is displayed in a link.\n */\nfunction Page({ page, isLastPage, onClick }: PageProps): JSX.Element {\n  const onKeyDown = (event: KeyboardEvent<HTMLAnchorElement>) => {\n    if (event.key === \" \") {\n      onClick();\n    }\n  };\n\n  return (\n    <li>\n      {isLastPage ? (\n        <span className={styles[\"last-page\"]} aria-current=\"page\">\n          {page}\n        </span>\n      ) : (\n        <Link\n          size=\"sm\"\n          role=\"button\"\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n          tabIndex={0}\n        >\n          {page}\n        </Link>\n      )}\n    </li>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AA4CA,SAAgB,WAAW,EACzB,WACA,aACA,OACA,aACA,WACA,GAAG,SAC4B;AAC/B,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,YAAA,GAAA,WAAA,SAAsB,0BAAA,QAAO,YAAY,UAAU;EAAE,GAAI;YAA9D,CACE,iBAAA,GAAA,kBAAA,KAAC,mBAAA,YAAD;GACE,MAAK;GACL,MAAK;GACL,cAAY;GACZ,SAAS;aAET,iBAAA,GAAA,kBAAA,KAAC,gEAAA,SAAD,EAAW,CAAA;GACA,CAAA,EACb,iBAAA,GAAA,kBAAA,KAAC,MAAD;GAAI,WAAW,0BAAA,QAAO;aACnB,MAAM,KAAK,MAAM,UAChB,iBAAA,GAAA,kBAAA,KAAC,MAAD;IAEQ;IACN,YAAY,UAAU,MAAM,SAAS;IACrC,eAAe,YAAY,MAAM,MAAM;IACvC,EAJK,MAIL,CACF;GACC,CAAA,CACD;;;;;;;AAuBV,SAAS,KAAK,EAAE,MAAM,YAAY,WAAmC;CACnE,MAAM,aAAa,UAA4C;AAC7D,MAAI,MAAM,QAAQ,IAChB,UAAS;;AAIb,QACE,iBAAA,GAAA,kBAAA,KAAC,MAAD,EAAA,UACG,aACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,WAAW,0BAAA,QAAO;EAAc,gBAAa;YAChD;EACI,CAAA,GAEP,iBAAA,GAAA,kBAAA,KAAC,aAAA,MAAD;EACE,MAAK;EACL,MAAK;EACI;EACE;EACX,UAAU;YAET;EACI,CAAA,EAEN,CAAA"}