@vector-im/compound-web 8.3.6 → 9.0.0

package/dist/components/Alert/Alert.js

@@ -1,63 +1,67 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import Alert_module_default from "./Alert.module.js";
+import { Text } from "../Typography/Text.js";
+import { IconButton } from "../Button/IconButton/IconButton.js";
 import classNames from "classnames";
 import { useCallback } from "react";
 import CheckCircleIcon from "@vector-im/compound-design-tokens/assets/web/icons/check-circle";
 import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
 import InfoIcon from "@vector-im/compound-design-tokens/assets/web/icons/info";
 import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
-import styles from "./Alert.module.css.js";
-import { Text } from "../Typography/Text.js";
-import { IconButton } from "../Button/IconButton/IconButton.js";
-const Alert = ({
-  type,
-  title,
-  children,
-  className,
-  actions,
-  onClose,
-  ...props
-}) => {
-  const classes = classNames(styles.alert, className);
-  const renderIcon = useCallback(
-    (props2) => {
-      switch (type) {
-        case "critical":
-          return /* @__PURE__ */ jsx(ErrorIcon, { ...props2 });
-        case "info":
-          return /* @__PURE__ */ jsx(InfoIcon, { ...props2 });
-        case "success":
-          return /* @__PURE__ */ jsx(CheckCircleIcon, { ...props2 });
-      }
-    },
-    [type]
-  );
-  return /* @__PURE__ */ jsxs("div", { ...props, className: classes, "data-type": type, children: [
-    renderIcon({
-      width: 24,
-      height: 24,
-      className: styles.icon,
-      "aria-hidden": true
-    }),
-    /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
-      /* @__PURE__ */ jsxs("div", { className: styles["text-content"], children: [
-        /* @__PURE__ */ jsx(Text, { size: "md", weight: "semibold", children: title }),
-        /* @__PURE__ */ jsx(Text, { size: "sm", weight: "regular", children })
-      ] }),
-      actions && /* @__PURE__ */ jsx("div", { className: styles.actions, children: actions })
-    ] }),
-    onClose && /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        onClick: onClose,
-        "aria-label": "Close",
-        role: "button",
-        className: styles.close,
-        children: /* @__PURE__ */ jsx(CloseIcon, {})
-      }
-    )
-  ] });
-};
-export {
-  Alert
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Alert/Alert.tsx
+/**
+* An alert component component that is dismissable when passing an `onClose`
+* property.
+*/
+var Alert = ({ type, title, children, className, actions, onClose, ...props }) => {
+	const classes = classNames(Alert_module_default.alert, className);
+	const renderIcon = useCallback((props) => {
+		switch (type) {
+			case "critical": return /* @__PURE__ */ jsx(ErrorIcon, { ...props });
+			case "info": return /* @__PURE__ */ jsx(InfoIcon, { ...props });
+			case "success": return /* @__PURE__ */ jsx(CheckCircleIcon, { ...props });
+		}
+	}, [type]);
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: classes,
+		"data-type": type,
+		children: [
+			renderIcon({
+				width: 24,
+				height: 24,
+				className: Alert_module_default.icon,
+				"aria-hidden": true
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: Alert_module_default.content,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: Alert_module_default["text-content"],
+					children: [/* @__PURE__ */ jsx(Text, {
+						size: "md",
+						weight: "semibold",
+						children: title
+					}), /* @__PURE__ */ jsx(Text, {
+						size: "sm",
+						weight: "regular",
+						children
+					})]
+				}), actions && /* @__PURE__ */ jsx("div", {
+					className: Alert_module_default.actions,
+					children: actions
+				})]
+			}),
+			onClose && /* @__PURE__ */ jsx(IconButton, {
+				onClick: onClose,
+				"aria-label": "Close",
+				role: "button",
+				className: Alert_module_default.close,
+				children: /* @__PURE__ */ jsx(CloseIcon, {})
+			})
+		]
+	});
 };
-//# sourceMappingURL=Alert.js.map
+//#endregion
+export { Alert };
+
+//# sourceMappingURL=Alert.js.map

package/dist/components/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../src/components/Alert/Alert.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, useCallback } from \"react\";\n\nimport CheckCircleIcon from \"@vector-im/compound-design-tokens/assets/web/icons/check-circle\";\nimport ErrorIcon from \"@vector-im/compound-design-tokens/assets/web/icons/error-solid\";\nimport InfoIcon from \"@vector-im/compound-design-tokens/assets/web/icons/info\";\nimport CloseIcon from \"@vector-im/compound-design-tokens/assets/web/icons/close\";\n\nimport styles from \"./Alert.module.css\";\nimport { Text } from \"../Typography/Text\";\nimport { IconButton } from \"../Button\";\n\ntype AlertProps = {\n  /**\n   * The type of alert\n   */\n  type: \"success\" | \"critical\" | \"info\";\n  /**\n   * The headline of the alert.\n   */\n  title: string;\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * Actions that will be displayed to the right of the content\n   * Wraps and stacks actions under content when alert's size is <=600px\n   * eg\n   * ```\n   * <Alert\n   *  title='Title'\n   *  actions={<Button onClick={doSomething}>Yes</Button>}\n   * />\n   * ```\n   */\n  actions?: React.ReactNode;\n  /**\n   * Event callback when dismissing the alert. Determines the display of the\n   * \"close\" button at the top right of the alert.\n   * @param e the event parameters\n   */\n  onClose?: (e: React.MouseEvent) => void;\n};\n\n/**\n * An alert component component that is dismissable when passing an `onClose`\n * property.\n */\nexport const Alert: React.FC<PropsWithChildren<AlertProps>> = ({\n  type,\n  title,\n  children,\n  className,\n  actions,\n  onClose,\n  ...props\n}: PropsWithChildren<AlertProps>) => {\n  const classes = classNames(styles.alert, className);\n\n  const renderIcon = useCallback(\n    (props: React.ComponentProps<typeof ErrorIcon>) => {\n      switch (type) {\n        case \"critical\":\n          return <ErrorIcon {...props} />;\n        case \"info\":\n          return <InfoIcon {...props} />;\n        case \"success\":\n          return <CheckCircleIcon {...props} />;\n      }\n    },\n    [type],\n  );\n\n  return (\n    <div {...props} className={classes} data-type={type}>\n      {renderIcon({\n        width: 24,\n        height: 24,\n        className: styles.icon,\n        \"aria-hidden\": true,\n      })}\n      <div className={styles.content}>\n        <div className={styles[\"text-content\"]}>\n          <Text size=\"md\" weight=\"semibold\">\n            {title}\n          </Text>\n          <Text size=\"sm\" weight=\"regular\">\n            {children}\n          </Text>\n        </div>\n        {actions && <div className={styles.actions}>{actions}</div>}\n      </div>\n      {/* TODO: Setup an i18n function for the aria label below */}\n      {onClose && (\n        <IconButton\n          onClick={onClose}\n          aria-label=\"Close\"\n          role=\"button\"\n          className={styles.close}\n        >\n          <CloseIcon />\n        </IconButton>\n      )}\n    </div>\n  );\n};\n"],"names":["props"],"mappings":";;;;;;;;;;AAwDO,MAAM,QAAiD,CAAC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAqC;AACnC,QAAM,UAAU,WAAW,OAAO,OAAO,SAAS;AAElD,QAAM,aAAa;AAAA,IACjB,CAACA,WAAkD;AACjD,cAAQ,MAAA;AAAA,QACN,KAAK;AACH,iBAAO,oBAAC,WAAA,EAAW,GAAGA,OAAAA,CAAO;AAAA,QAC/B,KAAK;AACH,iBAAO,oBAAC,UAAA,EAAU,GAAGA,OAAAA,CAAO;AAAA,QAC9B,KAAK;AACH,iBAAO,oBAAC,iBAAA,EAAiB,GAAGA,OAAAA,CAAO;AAAA,MAAA;AAAA,IAEzC;AAAA,IACA,CAAC,IAAI;AAAA,EAAA;AAGP,8BACG,OAAA,EAAK,GAAG,OAAO,WAAW,SAAS,aAAW,MAC5C,UAAA;AAAA,IAAA,WAAW;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAW,OAAO;AAAA,MAClB,eAAe;AAAA,IAAA,CAChB;AAAA,IACD,qBAAC,OAAA,EAAI,WAAW,OAAO,SACrB,UAAA;AAAA,MAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,cAAc,GACnC,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAK,MAAK,MAAK,QAAO,YACpB,UAAA,OACH;AAAA,4BACC,MAAA,EAAK,MAAK,MAAK,QAAO,WACpB,SAAA,CACH;AAAA,MAAA,GACF;AAAA,MACC,WAAW,oBAAC,OAAA,EAAI,WAAW,OAAO,SAAU,UAAA,QAAA,CAAQ;AAAA,IAAA,GACvD;AAAA,IAEC,WACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,cAAW;AAAA,QACX,MAAK;AAAA,QACL,WAAW,OAAO;AAAA,QAElB,8BAAC,WAAA,CAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACb,GAEJ;AAEJ;"}
+{"version":3,"file":"Alert.js","names":[],"sources":["../../../src/components/Alert/Alert.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, useCallback } from \"react\";\n\nimport CheckCircleIcon from \"@vector-im/compound-design-tokens/assets/web/icons/check-circle\";\nimport ErrorIcon from \"@vector-im/compound-design-tokens/assets/web/icons/error-solid\";\nimport InfoIcon from \"@vector-im/compound-design-tokens/assets/web/icons/info\";\nimport CloseIcon from \"@vector-im/compound-design-tokens/assets/web/icons/close\";\n\nimport styles from \"./Alert.module.css\";\nimport { Text } from \"../Typography/Text\";\nimport { IconButton } from \"../Button\";\n\ntype AlertProps = {\n  /**\n   * The type of alert\n   */\n  type: \"success\" | \"critical\" | \"info\";\n  /**\n   * The headline of the alert.\n   */\n  title: string;\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * Actions that will be displayed to the right of the content\n   * Wraps and stacks actions under content when alert's size is <=600px\n   * eg\n   * ```\n   * <Alert\n   *  title='Title'\n   *  actions={<Button onClick={doSomething}>Yes</Button>}\n   * />\n   * ```\n   */\n  actions?: React.ReactNode;\n  /**\n   * Event callback when dismissing the alert. Determines the display of the\n   * \"close\" button at the top right of the alert.\n   * @param e the event parameters\n   */\n  onClose?: (e: React.MouseEvent) => void;\n};\n\n/**\n * An alert component component that is dismissable when passing an `onClose`\n * property.\n */\nexport const Alert: React.FC<PropsWithChildren<AlertProps>> = ({\n  type,\n  title,\n  children,\n  className,\n  actions,\n  onClose,\n  ...props\n}: PropsWithChildren<AlertProps>) => {\n  const classes = classNames(styles.alert, className);\n\n  const renderIcon = useCallback(\n    (props: React.ComponentProps<typeof ErrorIcon>) => {\n      switch (type) {\n        case \"critical\":\n          return <ErrorIcon {...props} />;\n        case \"info\":\n          return <InfoIcon {...props} />;\n        case \"success\":\n          return <CheckCircleIcon {...props} />;\n      }\n    },\n    [type],\n  );\n\n  return (\n    <div {...props} className={classes} data-type={type}>\n      {renderIcon({\n        width: 24,\n        height: 24,\n        className: styles.icon,\n        \"aria-hidden\": true,\n      })}\n      <div className={styles.content}>\n        <div className={styles[\"text-content\"]}>\n          <Text size=\"md\" weight=\"semibold\">\n            {title}\n          </Text>\n          <Text size=\"sm\" weight=\"regular\">\n            {children}\n          </Text>\n        </div>\n        {actions && <div className={styles.actions}>{actions}</div>}\n      </div>\n      {/* TODO: Setup an i18n function for the aria label below */}\n      {onClose && (\n        <IconButton\n          onClick={onClose}\n          aria-label=\"Close\"\n          role=\"button\"\n          className={styles.close}\n        >\n          <CloseIcon />\n        </IconButton>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAwDA,IAAa,SAAkD,EAC7D,MACA,OACA,UACA,WACA,SACA,SACA,GAAG,YACgC;CACnC,MAAM,UAAU,WAAW,qBAAO,OAAO,UAAU;CAEnD,MAAM,aAAa,aAChB,UAAkD;AACjD,UAAQ,MAAR;GACE,KAAK,WACH,QAAO,oBAAC,WAAD,EAAW,GAAI,OAAS,CAAA;GACjC,KAAK,OACH,QAAO,oBAAC,UAAD,EAAU,GAAI,OAAS,CAAA;GAChC,KAAK,UACH,QAAO,oBAAC,iBAAD,EAAiB,GAAI,OAAS,CAAA;;IAG3C,CAAC,KAAK,CACP;AAED,QACE,qBAAC,OAAD;EAAK,GAAI;EAAO,WAAW;EAAS,aAAW;YAA/C;GACG,WAAW;IACV,OAAO;IACP,QAAQ;IACR,WAAW,qBAAO;IAClB,eAAe;IAChB,CAAC;GACF,qBAAC,OAAD;IAAK,WAAW,qBAAO;cAAvB,CACE,qBAAC,OAAD;KAAK,WAAW,qBAAO;eAAvB,CACE,oBAAC,MAAD;MAAM,MAAK;MAAK,QAAO;gBACpB;MACI,CAAA,EACP,oBAAC,MAAD;MAAM,MAAK;MAAK,QAAO;MACpB;MACI,CAAA,CACH;QACL,WAAW,oBAAC,OAAD;KAAK,WAAW,qBAAO;eAAU;KAAc,CAAA,CACvD;;GAEL,WACC,oBAAC,YAAD;IACE,SAAS;IACT,cAAW;IACX,MAAK;IACL,WAAW,qBAAO;cAElB,oBAAC,WAAD,EAAa,CAAA;IACF,CAAA;GAEX"}

package/dist/components/Alert/Alert.module.cjs

@@ -0,0 +1,18 @@
+//#region src/components/Alert/Alert.module.css
+var alert = "_alert_zx76t_10";
+var content = "_content_zx76t_37";
+var title = "_title_zx76t_48";
+var icon = "_icon_zx76t_48";
+var actions = "_actions_zx76t_64";
+var Alert_module_default = {
+	alert,
+	content,
+	"text-content": "_text-content_zx76t_44",
+	title,
+	icon,
+	actions
+};
+//#endregion
+exports.default = Alert_module_default;
+
+//# sourceMappingURL=Alert.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.module.cjs","names":[],"sources":["../../../src/components/Alert/Alert.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/* TODO: Review entire file for semantic token definiton */\n\n.alert {\n  container-type: inline-size;\n  container-name: alert;\n  display: flex;\n  align-items: start;\n  justify-content: start;\n  gap: var(--cpd-space-3x);\n  padding: var(--cpd-space-4x);\n  border-radius: 8px;\n  border: 1px solid;\n}\n\n.alert[data-type=\"success\"] {\n  background-color: var(--cpd-color-green-200);\n  border-color: var(--cpd-color-green-500);\n}\n\n.alert[data-type=\"critical\"] {\n  background-color: var(--cpd-color-red-200);\n  border-color: var(--cpd-color-red-500);\n}\n\n.alert[data-type=\"info\"] {\n  background-color: var(--cpd-color-blue-200);\n  border-color: var(--cpd-color-blue-500);\n}\n\n.content {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  gap: var(--cpd-space-3x);\n}\n\n.text-content {\n  flex: 1 1 0;\n}\n\n[data-type=\"success\"] :is(.title, .icon) {\n  color: var(--cpd-color-green-900);\n}\n\n[data-type=\"critical\"] :is(.title, .icon) {\n  color: var(--cpd-color-red-900);\n}\n\n[data-type=\"info\"] :is(.title, .icon) {\n  color: var(--cpd-color-blue-900);\n}\n\n.alert p {\n  margin: 0;\n}\n\n.actions {\n  flex: 0;\n  display: flex;\n  flex-direction: row;\n  gap: var(--cpd-space-1x);\n  align-self: center;\n}\n\n.icon {\n  flex-shrink: 0;\n}\n\n/* @TODO 600px break should be a token */\n\n/* wrap actions into a stacked layout when the alert is <=600px */\n@container alert (max-width: 600px) {\n  .content {\n    flex-wrap: wrap;\n  }\n\n  .text-content {\n    flex: 1 0 100%;\n  }\n}\n"],"mappings":""}

package/dist/components/Alert/Alert.module.js

@@ -0,0 +1,18 @@
+//#region src/components/Alert/Alert.module.css
+var alert = "_alert_zx76t_10";
+var content = "_content_zx76t_37";
+var title = "_title_zx76t_48";
+var icon = "_icon_zx76t_48";
+var actions = "_actions_zx76t_64";
+var Alert_module_default = {
+	alert,
+	content,
+	"text-content": "_text-content_zx76t_44",
+	title,
+	icon,
+	actions
+};
+//#endregion
+export { Alert_module_default as default };
+
+//# sourceMappingURL=Alert.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.module.js","names":[],"sources":["../../../src/components/Alert/Alert.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/* TODO: Review entire file for semantic token definiton */\n\n.alert {\n  container-type: inline-size;\n  container-name: alert;\n  display: flex;\n  align-items: start;\n  justify-content: start;\n  gap: var(--cpd-space-3x);\n  padding: var(--cpd-space-4x);\n  border-radius: 8px;\n  border: 1px solid;\n}\n\n.alert[data-type=\"success\"] {\n  background-color: var(--cpd-color-green-200);\n  border-color: var(--cpd-color-green-500);\n}\n\n.alert[data-type=\"critical\"] {\n  background-color: var(--cpd-color-red-200);\n  border-color: var(--cpd-color-red-500);\n}\n\n.alert[data-type=\"info\"] {\n  background-color: var(--cpd-color-blue-200);\n  border-color: var(--cpd-color-blue-500);\n}\n\n.content {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  gap: var(--cpd-space-3x);\n}\n\n.text-content {\n  flex: 1 1 0;\n}\n\n[data-type=\"success\"] :is(.title, .icon) {\n  color: var(--cpd-color-green-900);\n}\n\n[data-type=\"critical\"] :is(.title, .icon) {\n  color: var(--cpd-color-red-900);\n}\n\n[data-type=\"info\"] :is(.title, .icon) {\n  color: var(--cpd-color-blue-900);\n}\n\n.alert p {\n  margin: 0;\n}\n\n.actions {\n  flex: 0;\n  display: flex;\n  flex-direction: row;\n  gap: var(--cpd-space-1x);\n  align-self: center;\n}\n\n.icon {\n  flex-shrink: 0;\n}\n\n/* @TODO 600px break should be a token */\n\n/* wrap actions into a stacked layout when the alert is <=600px */\n@container alert (max-width: 600px) {\n  .content {\n    flex-wrap: wrap;\n  }\n\n  .text-content {\n    flex: 1 0 100%;\n  }\n}\n"],"mappings":""}

package/dist/components/Avatar/Avatar.cjs

@@ -1,59 +1,52 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const classNames = require("classnames");
-const React = require("react");
-const string = require("../../utils/string.cjs");
-const Avatar_module = require("./Avatar.module.css.cjs");
-const useIdColorHash = require("./useIdColorHash.cjs");
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_string = require("../../utils/string.cjs");
+const require_Avatar_module = require("./Avatar.module.cjs");
+const require_useIdColorHash = require("./useIdColorHash.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/Avatar/Avatar.tsx
+/**
+* Some props warrant that the avatar become a button for accessibility purposes
+* @param props Avatar props
+* @returns whether the avatar should be a button or not
+*/
 function shouldBeAButton(props) {
-  return !!(props.onClick || props.onKeyDown || props.onKeyUp);
+	return !!(props.onClick || props.onKeyDown || props.onKeyUp);
 }
-const Avatar = React.forwardRef(function Avatar2({
-  src,
-  id,
-  name = "",
-  type = "round",
-  className = "",
-  size,
-  style = {},
-  onError,
-  ...props
-}, ref) {
-  return React.createElement(
-    shouldBeAButton(props) ? "button" : "span",
-    {
-      ref,
-      role: "img",
-      // Default the aria-label to id
-      "aria-label": id,
-      ...props,
-      "data-type": type,
-      "data-color": useIdColorHash.useIdColorHash(id),
-      className: classNames(Avatar_module.default.avatar, className, {
-        [Avatar_module.default["avatar-imageless"]]: !src
-      }),
-      style: {
-        ...style,
-        "--cpd-avatar-size": size
-      }
-    },
-    /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: !src ? string.getInitialLetter(name) : /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
-      {
-        loading: "lazy",
-        alt: "",
-        src,
-        referrerPolicy: "no-referrer",
-        className: classNames(Avatar_module.default.image),
-        "data-type": type,
-        style,
-        width: size,
-        height: size,
-        onError
-      }
-    ) })
-  );
+/**
+* Avatar component that will fallback to an initial letter over a coloured
+* background if no source is provided or if the source has failed to load.
+*/
+var Avatar = (0, react.forwardRef)(function Avatar({ src, id, name = "", type = "round", className = "", size, style = {}, onError, ...props }, ref) {
+	return react.default.createElement(shouldBeAButton(props) ? "button" : "span", {
+		ref,
+		role: "img",
+		"aria-label": id,
+		...props,
+		"data-type": type,
+		"data-color": require_useIdColorHash.useIdColorHash(id),
+		className: (0, classnames.default)(require_Avatar_module.default.avatar, className, { [require_Avatar_module.default["avatar-imageless"]]: !src }),
+		style: {
+			...style,
+			"--cpd-avatar-size": size
+		}
+	}, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Fragment, { children: !src ? require_string.getInitialLetter(name) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		loading: "lazy",
+		alt: "",
+		src,
+		referrerPolicy: "no-referrer",
+		className: (0, classnames.default)(require_Avatar_module.default.image),
+		"data-type": type,
+		style,
+		width: size,
+		height: size,
+		onError
+	}) }));
 });
+//#endregion
 exports.Avatar = Avatar;
-//# sourceMappingURL=Avatar.cjs.map
+
+//# sourceMappingURL=Avatar.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/Avatar/Avatar.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 ComponentProps, forwardRef } from \"react\";\nimport { getInitialLetter } from \"../../utils/string\";\nimport styles from \"./Avatar.module.css\";\nimport { useIdColorHash } from \"./useIdColorHash\";\n\ntype AvatarProps = (ComponentProps<\"button\"> | ComponentProps<\"span\">) & {\n  /**\n   * The avatar image URL, if any.\n   */\n  src?: React.ComponentProps<\"img\">[\"src\"];\n  /**\n   * The Matrix ID, Room ID, or Alias to generate the color when no image source\n   * is provided. Also used as a fallback when name is empty.\n   */\n  id: string;\n  /**\n   * The name used for the initial letter displayed when no image source is provided.\n   */\n  name: string;\n  /**\n   * Defines the avatar type, typically round, square is usually for spaces.\n   * @default \"round\"\n   */\n  type?: \"square\" | \"round\";\n  /**\n   * The avatar size in CSS units, e.g. `\"24px\"`.\n   */\n  size?: CSSStyleDeclaration[\"height\"];\n  /**\n   * On click handler, will turn the avatar into a button element.\n   */\n  onClick?: (e: React.MouseEvent) => void;\n  /**\n   * Key down handler, will turn the avatar into a button element.\n   */\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  /**\n   * Key up handler, will turn the avatar into a button element.\n   */\n  onKeyUp?: (e: React.KeyboardEvent) => void;\n  /**\n   * Callback when the image has failed to load.\n   */\n  onError?: React.ComponentProps<\"img\">[\"onError\"];\n};\n\n/**\n * Some props warrant that the avatar become a button for accessibility purposes\n * @param props Avatar props\n * @returns whether the avatar should be a button or not\n */\nfunction shouldBeAButton(props: Partial<AvatarProps>): boolean {\n  return !!(props.onClick || props.onKeyDown || props.onKeyUp);\n}\n\n/**\n * Avatar component that will fallback to an initial letter over a coloured\n * background if no source is provided or if the source has failed to load.\n */\nexport const Avatar = forwardRef<\n  HTMLSpanElement | HTMLButtonElement,\n  AvatarProps\n>(function Avatar(\n  {\n    src,\n    id,\n    name = \"\",\n    type = \"round\",\n    className = \"\",\n    size,\n    style = {},\n    onError,\n    ...props\n  },\n  ref,\n) {\n  return React.createElement(\n    shouldBeAButton(props) ? \"button\" : \"span\",\n    {\n      ref,\n      role: \"img\",\n      // Default the aria-label to id\n      \"aria-label\": id,\n      ...props,\n      \"data-type\": type,\n      \"data-color\": useIdColorHash(id),\n      className: classnames(styles.avatar, className, {\n        [styles[\"avatar-imageless\"]]: !src,\n      }),\n      style: {\n        ...style,\n        \"--cpd-avatar-size\": size,\n      } as React.CSSProperties,\n    },\n    <React.Fragment>\n      {!src ? (\n        getInitialLetter(name)\n      ) : (\n        <img\n          loading=\"lazy\"\n          alt=\"\"\n          src={src}\n          referrerPolicy=\"no-referrer\"\n          className={classnames(styles.image)}\n          data-type={type}\n          style={style}\n          width={size}\n          height={size}\n          onError={onError}\n        />\n      )}\n    </React.Fragment>,\n  );\n});\n"],"names":["forwardRef","Avatar","useIdColorHash","classnames","styles","jsx","getInitialLetter"],"mappings":";;;;;;;;AA2DA,SAAS,gBAAgB,OAAsC;AAC7D,SAAO,CAAC,EAAE,MAAM,WAAW,MAAM,aAAa,MAAM;AACtD;AAMO,MAAM,SAASA,MAAAA,WAGpB,SAASC,QACT;AAAA,EACE;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA,QAAQ,CAAA;AAAA,EACR;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,SAAO,MAAM;AAAA,IACX,gBAAgB,KAAK,IAAI,WAAW;AAAA,IACpC;AAAA,MACE;AAAA,MACA,MAAM;AAAA;AAAA,MAEN,cAAc;AAAA,MACd,GAAG;AAAA,MACH,aAAa;AAAA,MACb,cAAcC,eAAAA,eAAe,EAAE;AAAA,MAC/B,WAAWC,WAAWC,sBAAO,QAAQ,WAAW;AAAA,QAC9C,CAACA,cAAAA,QAAO,kBAAkB,CAAC,GAAG,CAAC;AAAA,MAAA,CAChC;AAAA,MACD,OAAO;AAAA,QACL,GAAG;AAAA,QACH,qBAAqB;AAAA,MAAA;AAAA,IACvB;AAAA,IAEFC,+BAAC,MAAM,UAAN,EACE,WAAC,MACAC,OAAAA,iBAAiB,IAAI,IAErBD,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,KAAI;AAAA,QACJ;AAAA,QACA,gBAAe;AAAA,QACf,WAAWF,WAAWC,cAAAA,QAAO,KAAK;AAAA,QAClC,aAAW;AAAA,QACX;AAAA,QACA,OAAO;AAAA,QACP,QAAQ;AAAA,QACR;AAAA,MAAA;AAAA,IAAA,EACF,CAEJ;AAAA,EAAA;AAEJ,CAAC;;"}
+{"version":3,"file":"Avatar.cjs","names":[],"sources":["../../../src/components/Avatar/Avatar.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 ComponentProps, forwardRef } from \"react\";\nimport { getInitialLetter } from \"../../utils/string\";\nimport styles from \"./Avatar.module.css\";\nimport { useIdColorHash } from \"./useIdColorHash\";\n\ntype AvatarProps = (ComponentProps<\"button\"> | ComponentProps<\"span\">) & {\n  /**\n   * The avatar image URL, if any.\n   */\n  src?: React.ComponentProps<\"img\">[\"src\"];\n  /**\n   * The Matrix ID, Room ID, or Alias to generate the color when no image source\n   * is provided. Also used as a fallback when name is empty.\n   */\n  id: string;\n  /**\n   * The name used for the initial letter displayed when no image source is provided.\n   */\n  name: string;\n  /**\n   * Defines the avatar type, typically round, square is usually for spaces.\n   * @default \"round\"\n   */\n  type?: \"square\" | \"round\";\n  /**\n   * The avatar size in CSS units, e.g. `\"24px\"`.\n   */\n  size?: CSSStyleDeclaration[\"height\"];\n  /**\n   * On click handler, will turn the avatar into a button element.\n   */\n  onClick?: (e: React.MouseEvent) => void;\n  /**\n   * Key down handler, will turn the avatar into a button element.\n   */\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  /**\n   * Key up handler, will turn the avatar into a button element.\n   */\n  onKeyUp?: (e: React.KeyboardEvent) => void;\n  /**\n   * Callback when the image has failed to load.\n   */\n  onError?: React.ComponentProps<\"img\">[\"onError\"];\n};\n\n/**\n * Some props warrant that the avatar become a button for accessibility purposes\n * @param props Avatar props\n * @returns whether the avatar should be a button or not\n */\nfunction shouldBeAButton(props: Partial<AvatarProps>): boolean {\n  return !!(props.onClick || props.onKeyDown || props.onKeyUp);\n}\n\n/**\n * Avatar component that will fallback to an initial letter over a coloured\n * background if no source is provided or if the source has failed to load.\n */\nexport const Avatar = forwardRef<\n  HTMLSpanElement | HTMLButtonElement,\n  AvatarProps\n>(function Avatar(\n  {\n    src,\n    id,\n    name = \"\",\n    type = \"round\",\n    className = \"\",\n    size,\n    style = {},\n    onError,\n    ...props\n  },\n  ref,\n) {\n  return React.createElement(\n    shouldBeAButton(props) ? \"button\" : \"span\",\n    {\n      ref,\n      role: \"img\",\n      // Default the aria-label to id\n      \"aria-label\": id,\n      ...props,\n      \"data-type\": type,\n      \"data-color\": useIdColorHash(id),\n      className: classnames(styles.avatar, className, {\n        [styles[\"avatar-imageless\"]]: !src,\n      }),\n      style: {\n        ...style,\n        \"--cpd-avatar-size\": size,\n      } as React.CSSProperties,\n    },\n    <React.Fragment>\n      {!src ? (\n        getInitialLetter(name)\n      ) : (\n        <img\n          loading=\"lazy\"\n          alt=\"\"\n          src={src}\n          referrerPolicy=\"no-referrer\"\n          className={classnames(styles.image)}\n          data-type={type}\n          style={style}\n          width={size}\n          height={size}\n          onError={onError}\n        />\n      )}\n    </React.Fragment>,\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;AA2DA,SAAS,gBAAgB,OAAsC;AAC7D,QAAO,CAAC,EAAE,MAAM,WAAW,MAAM,aAAa,MAAM;;;;;;AAOtD,IAAa,UAAA,GAAA,MAAA,YAGX,SAAS,OACT,EACE,KACA,IACA,OAAO,IACP,OAAO,SACP,YAAY,IACZ,MACA,QAAQ,EAAE,EACV,SACA,GAAG,SAEL,KACA;AACA,QAAO,MAAA,QAAM,cACX,gBAAgB,MAAM,GAAG,WAAW,QACpC;EACE;EACA,MAAM;EAEN,cAAc;EACd,GAAG;EACH,aAAa;EACb,cAAc,uBAAA,eAAe,GAAG;EAChC,YAAA,GAAA,WAAA,SAAsB,sBAAA,QAAO,QAAQ,WAAW,GAC7C,sBAAA,QAAO,sBAAsB,CAAC,KAChC,CAAC;EACF,OAAO;GACL,GAAG;GACH,qBAAqB;GACtB;EACF,EACD,iBAAA,GAAA,kBAAA,KAAC,MAAA,QAAM,UAAP,EAAA,UACG,CAAC,MACA,eAAA,iBAAiB,KAAK,GAEtB,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,SAAQ;EACR,KAAI;EACC;EACL,gBAAe;EACf,YAAA,GAAA,WAAA,SAAsB,sBAAA,QAAO,MAAM;EACnC,aAAW;EACJ;EACP,OAAO;EACP,QAAQ;EACC;EACT,CAAA,EAEW,CAAA,CAClB;EACD"}

package/dist/components/Avatar/Avatar.js

@@ -1,59 +1,49 @@
-import { jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-import React, { forwardRef } from "react";
 import { getInitialLetter } from "../../utils/string.js";
-import styles from "./Avatar.module.css.js";
+import Avatar_module_default from "./Avatar.module.js";
 import { useIdColorHash } from "./useIdColorHash.js";
+import classNames from "classnames";
+import React, { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Avatar/Avatar.tsx
+/**
+* Some props warrant that the avatar become a button for accessibility purposes
+* @param props Avatar props
+* @returns whether the avatar should be a button or not
+*/
 function shouldBeAButton(props) {
-  return !!(props.onClick || props.onKeyDown || props.onKeyUp);
+	return !!(props.onClick || props.onKeyDown || props.onKeyUp);
 }
-const Avatar = forwardRef(function Avatar2({
-  src,
-  id,
-  name = "",
-  type = "round",
-  className = "",
-  size,
-  style = {},
-  onError,
-  ...props
-}, ref) {
-  return React.createElement(
-    shouldBeAButton(props) ? "button" : "span",
-    {
-      ref,
-      role: "img",
-      // Default the aria-label to id
-      "aria-label": id,
-      ...props,
-      "data-type": type,
-      "data-color": useIdColorHash(id),
-      className: classNames(styles.avatar, className, {
-        [styles["avatar-imageless"]]: !src
-      }),
-      style: {
-        ...style,
-        "--cpd-avatar-size": size
-      }
-    },
-    /* @__PURE__ */ jsx(React.Fragment, { children: !src ? getInitialLetter(name) : /* @__PURE__ */ jsx(
-      "img",
-      {
-        loading: "lazy",
-        alt: "",
-        src,
-        referrerPolicy: "no-referrer",
-        className: classNames(styles.image),
-        "data-type": type,
-        style,
-        width: size,
-        height: size,
-        onError
-      }
-    ) })
-  );
+/**
+* Avatar component that will fallback to an initial letter over a coloured
+* background if no source is provided or if the source has failed to load.
+*/
+var Avatar = forwardRef(function Avatar({ src, id, name = "", type = "round", className = "", size, style = {}, onError, ...props }, ref) {
+	return React.createElement(shouldBeAButton(props) ? "button" : "span", {
+		ref,
+		role: "img",
+		"aria-label": id,
+		...props,
+		"data-type": type,
+		"data-color": useIdColorHash(id),
+		className: classNames(Avatar_module_default.avatar, className, { [Avatar_module_default["avatar-imageless"]]: !src }),
+		style: {
+			...style,
+			"--cpd-avatar-size": size
+		}
+	}, /* @__PURE__ */ jsx(React.Fragment, { children: !src ? getInitialLetter(name) : /* @__PURE__ */ jsx("img", {
+		loading: "lazy",
+		alt: "",
+		src,
+		referrerPolicy: "no-referrer",
+		className: classNames(Avatar_module_default.image),
+		"data-type": type,
+		style,
+		width: size,
+		height: size,
+		onError
+	}) }));
 });
-export {
-  Avatar
-};
-//# sourceMappingURL=Avatar.js.map
+//#endregion
+export { Avatar };
+
+//# sourceMappingURL=Avatar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.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 ComponentProps, forwardRef } from \"react\";\nimport { getInitialLetter } from \"../../utils/string\";\nimport styles from \"./Avatar.module.css\";\nimport { useIdColorHash } from \"./useIdColorHash\";\n\ntype AvatarProps = (ComponentProps<\"button\"> | ComponentProps<\"span\">) & {\n  /**\n   * The avatar image URL, if any.\n   */\n  src?: React.ComponentProps<\"img\">[\"src\"];\n  /**\n   * The Matrix ID, Room ID, or Alias to generate the color when no image source\n   * is provided. Also used as a fallback when name is empty.\n   */\n  id: string;\n  /**\n   * The name used for the initial letter displayed when no image source is provided.\n   */\n  name: string;\n  /**\n   * Defines the avatar type, typically round, square is usually for spaces.\n   * @default \"round\"\n   */\n  type?: \"square\" | \"round\";\n  /**\n   * The avatar size in CSS units, e.g. `\"24px\"`.\n   */\n  size?: CSSStyleDeclaration[\"height\"];\n  /**\n   * On click handler, will turn the avatar into a button element.\n   */\n  onClick?: (e: React.MouseEvent) => void;\n  /**\n   * Key down handler, will turn the avatar into a button element.\n   */\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  /**\n   * Key up handler, will turn the avatar into a button element.\n   */\n  onKeyUp?: (e: React.KeyboardEvent) => void;\n  /**\n   * Callback when the image has failed to load.\n   */\n  onError?: React.ComponentProps<\"img\">[\"onError\"];\n};\n\n/**\n * Some props warrant that the avatar become a button for accessibility purposes\n * @param props Avatar props\n * @returns whether the avatar should be a button or not\n */\nfunction shouldBeAButton(props: Partial<AvatarProps>): boolean {\n  return !!(props.onClick || props.onKeyDown || props.onKeyUp);\n}\n\n/**\n * Avatar component that will fallback to an initial letter over a coloured\n * background if no source is provided or if the source has failed to load.\n */\nexport const Avatar = forwardRef<\n  HTMLSpanElement | HTMLButtonElement,\n  AvatarProps\n>(function Avatar(\n  {\n    src,\n    id,\n    name = \"\",\n    type = \"round\",\n    className = \"\",\n    size,\n    style = {},\n    onError,\n    ...props\n  },\n  ref,\n) {\n  return React.createElement(\n    shouldBeAButton(props) ? \"button\" : \"span\",\n    {\n      ref,\n      role: \"img\",\n      // Default the aria-label to id\n      \"aria-label\": id,\n      ...props,\n      \"data-type\": type,\n      \"data-color\": useIdColorHash(id),\n      className: classnames(styles.avatar, className, {\n        [styles[\"avatar-imageless\"]]: !src,\n      }),\n      style: {\n        ...style,\n        \"--cpd-avatar-size\": size,\n      } as React.CSSProperties,\n    },\n    <React.Fragment>\n      {!src ? (\n        getInitialLetter(name)\n      ) : (\n        <img\n          loading=\"lazy\"\n          alt=\"\"\n          src={src}\n          referrerPolicy=\"no-referrer\"\n          className={classnames(styles.image)}\n          data-type={type}\n          style={style}\n          width={size}\n          height={size}\n          onError={onError}\n        />\n      )}\n    </React.Fragment>,\n  );\n});\n"],"names":["Avatar","classnames"],"mappings":";;;;;;AA2DA,SAAS,gBAAgB,OAAsC;AAC7D,SAAO,CAAC,EAAE,MAAM,WAAW,MAAM,aAAa,MAAM;AACtD;AAMO,MAAM,SAAS,WAGpB,SAASA,QACT;AAAA,EACE;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA,QAAQ,CAAA;AAAA,EACR;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,SAAO,MAAM;AAAA,IACX,gBAAgB,KAAK,IAAI,WAAW;AAAA,IACpC;AAAA,MACE;AAAA,MACA,MAAM;AAAA;AAAA,MAEN,cAAc;AAAA,MACd,GAAG;AAAA,MACH,aAAa;AAAA,MACb,cAAc,eAAe,EAAE;AAAA,MAC/B,WAAWC,WAAW,OAAO,QAAQ,WAAW;AAAA,QAC9C,CAAC,OAAO,kBAAkB,CAAC,GAAG,CAAC;AAAA,MAAA,CAChC;AAAA,MACD,OAAO;AAAA,QACL,GAAG;AAAA,QACH,qBAAqB;AAAA,MAAA;AAAA,IACvB;AAAA,IAEF,oBAAC,MAAM,UAAN,EACE,WAAC,MACA,iBAAiB,IAAI,IAErB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,KAAI;AAAA,QACJ;AAAA,QACA,gBAAe;AAAA,QACf,WAAWA,WAAW,OAAO,KAAK;AAAA,QAClC,aAAW;AAAA,QACX;AAAA,QACA,OAAO;AAAA,QACP,QAAQ;AAAA,QACR;AAAA,MAAA;AAAA,IAAA,EACF,CAEJ;AAAA,EAAA;AAEJ,CAAC;"}
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/Avatar/Avatar.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 ComponentProps, forwardRef } from \"react\";\nimport { getInitialLetter } from \"../../utils/string\";\nimport styles from \"./Avatar.module.css\";\nimport { useIdColorHash } from \"./useIdColorHash\";\n\ntype AvatarProps = (ComponentProps<\"button\"> | ComponentProps<\"span\">) & {\n  /**\n   * The avatar image URL, if any.\n   */\n  src?: React.ComponentProps<\"img\">[\"src\"];\n  /**\n   * The Matrix ID, Room ID, or Alias to generate the color when no image source\n   * is provided. Also used as a fallback when name is empty.\n   */\n  id: string;\n  /**\n   * The name used for the initial letter displayed when no image source is provided.\n   */\n  name: string;\n  /**\n   * Defines the avatar type, typically round, square is usually for spaces.\n   * @default \"round\"\n   */\n  type?: \"square\" | \"round\";\n  /**\n   * The avatar size in CSS units, e.g. `\"24px\"`.\n   */\n  size?: CSSStyleDeclaration[\"height\"];\n  /**\n   * On click handler, will turn the avatar into a button element.\n   */\n  onClick?: (e: React.MouseEvent) => void;\n  /**\n   * Key down handler, will turn the avatar into a button element.\n   */\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  /**\n   * Key up handler, will turn the avatar into a button element.\n   */\n  onKeyUp?: (e: React.KeyboardEvent) => void;\n  /**\n   * Callback when the image has failed to load.\n   */\n  onError?: React.ComponentProps<\"img\">[\"onError\"];\n};\n\n/**\n * Some props warrant that the avatar become a button for accessibility purposes\n * @param props Avatar props\n * @returns whether the avatar should be a button or not\n */\nfunction shouldBeAButton(props: Partial<AvatarProps>): boolean {\n  return !!(props.onClick || props.onKeyDown || props.onKeyUp);\n}\n\n/**\n * Avatar component that will fallback to an initial letter over a coloured\n * background if no source is provided or if the source has failed to load.\n */\nexport const Avatar = forwardRef<\n  HTMLSpanElement | HTMLButtonElement,\n  AvatarProps\n>(function Avatar(\n  {\n    src,\n    id,\n    name = \"\",\n    type = \"round\",\n    className = \"\",\n    size,\n    style = {},\n    onError,\n    ...props\n  },\n  ref,\n) {\n  return React.createElement(\n    shouldBeAButton(props) ? \"button\" : \"span\",\n    {\n      ref,\n      role: \"img\",\n      // Default the aria-label to id\n      \"aria-label\": id,\n      ...props,\n      \"data-type\": type,\n      \"data-color\": useIdColorHash(id),\n      className: classnames(styles.avatar, className, {\n        [styles[\"avatar-imageless\"]]: !src,\n      }),\n      style: {\n        ...style,\n        \"--cpd-avatar-size\": size,\n      } as React.CSSProperties,\n    },\n    <React.Fragment>\n      {!src ? (\n        getInitialLetter(name)\n      ) : (\n        <img\n          loading=\"lazy\"\n          alt=\"\"\n          src={src}\n          referrerPolicy=\"no-referrer\"\n          className={classnames(styles.image)}\n          data-type={type}\n          style={style}\n          width={size}\n          height={size}\n          onError={onError}\n        />\n      )}\n    </React.Fragment>,\n  );\n});\n"],"mappings":";;;;;;;;;;;;AA2DA,SAAS,gBAAgB,OAAsC;AAC7D,QAAO,CAAC,EAAE,MAAM,WAAW,MAAM,aAAa,MAAM;;;;;;AAOtD,IAAa,SAAS,WAGpB,SAAS,OACT,EACE,KACA,IACA,OAAO,IACP,OAAO,SACP,YAAY,IACZ,MACA,QAAQ,EAAE,EACV,SACA,GAAG,SAEL,KACA;AACA,QAAO,MAAM,cACX,gBAAgB,MAAM,GAAG,WAAW,QACpC;EACE;EACA,MAAM;EAEN,cAAc;EACd,GAAG;EACH,aAAa;EACb,cAAc,eAAe,GAAG;EAChC,WAAW,WAAW,sBAAO,QAAQ,WAAW,GAC7C,sBAAO,sBAAsB,CAAC,KAChC,CAAC;EACF,OAAO;GACL,GAAG;GACH,qBAAqB;GACtB;EACF,EACD,oBAAC,MAAM,UAAP,EAAA,UACG,CAAC,MACA,iBAAiB,KAAK,GAEtB,oBAAC,OAAD;EACE,SAAQ;EACR,KAAI;EACC;EACL,gBAAe;EACf,WAAW,WAAW,sBAAO,MAAM;EACnC,aAAW;EACJ;EACP,OAAO;EACP,QAAQ;EACC;EACT,CAAA,EAEW,CAAA,CAClB;EACD"}

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

@@ -0,0 +1,11 @@
+var Avatar_module_default = {
+	avatar: "_avatar_7h2br_8",
+	image: "_image_7h2br_43",
+	"avatar-imageless": "_avatar-imageless_7h2br_55",
+	"stacked-avatars": "_stacked-avatars_7h2br_109",
+	"clip-path": "_clip-path_7h2br_128"
+};
+//#endregion
+exports.default = Avatar_module_default;
+
+//# sourceMappingURL=Avatar.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.module.cjs","names":[],"sources":["../../../src/components/Avatar/Avatar.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.avatar {\n  display: inline-block;\n  box-sizing: border-box;\n\n  /* -2px to account for the border styling below */\n  line-height: calc(var(--cpd-avatar-size) - 2px);\n  text-align: center;\n  font-size: min(calc(var(--cpd-avatar-size) * 0.5625), 60px);\n  text-transform: uppercase;\n  speak: none; /* stylelint-disable-line declaration-property-value-no-unknown */\n  font-family: var(--cpd-font-family-sans);\n  font-weight: bold;\n  overflow: hidden;\n  user-select: none;\n\n  /* Set a background color to help with visual consistency when displaying\n   * avatars with a translucent background */\n  background: var(--cpd-color-bg-canvas-default);\n}\n\nbutton.avatar {\n  /**\n   * The avatar can be a button element, we need to reset its style\n   */\n  padding: 0;\n  border: 0;\n  appearance: none;\n  cursor: pointer;\n}\n\nbutton.avatar:disabled {\n  cursor: not-allowed;\n}\n\n.avatar,\n.image {\n  aspect-ratio: 1 / 1;\n  inline-size: var(--cpd-avatar-size);\n  border-radius: var(--cpd-avatar-radius);\n}\n\n.image {\n  object-fit: cover;\n  overflow: hidden;\n}\n\n/* Additional selector for button to raise selector above button.avatar */\nbutton.avatar-imageless,\n.avatar-imageless {\n  /* In the future we'd prefer to pass the HEX code as the data attr\n     and use `attr(data-color)` to avoid the style declaration from below\n     but this is currently not supported in all browsers */\n  background: var(--cpd-avatar-bg);\n  color: var(--cpd-avatar-color);\n\n  /* Additional style to ensure visibility in contrast-mode */\n  border: 1px solid var(--cpd-avatar-bg);\n}\n\n.avatar[data-color] {\n  --cpd-avatar-bg: var(--cpd-color-bg-decorative-1);\n  --cpd-avatar-color: var(--cpd-color-text-decorative-1);\n}\n\n.avatar[data-color=\"2\"] {\n  --cpd-avatar-bg: var(--cpd-color-bg-decorative-2);\n  --cpd-avatar-color: var(--cpd-color-text-decorative-2);\n}\n\n.avatar[data-color=\"3\"] {\n  --cpd-avatar-bg: var(--cpd-color-bg-decorative-3);\n  --cpd-avatar-color: var(--cpd-color-text-decorative-3);\n}\n\n.avatar[data-color=\"4\"] {\n  --cpd-avatar-bg: var(--cpd-color-bg-decorative-4);\n  --cpd-avatar-color: var(--cpd-color-text-decorative-4);\n}\n\n.avatar[data-color=\"5\"] {\n  --cpd-avatar-bg: var(--cpd-color-bg-decorative-5);\n  --cpd-avatar-color: var(--cpd-color-text-decorative-5);\n}\n\n.avatar[data-color=\"6\"] {\n  --cpd-avatar-bg: var(--cpd-color-bg-decorative-6);\n  --cpd-avatar-color: var(--cpd-color-text-decorative-6);\n}\n\n.avatar[data-type=\"round\"] {\n  --cpd-avatar-radius: 50%;\n}\n\n.avatar[data-type=\"square\"] {\n  --cpd-avatar-radius: 25%;\n}\n\n/**\n * Stacked avatars \n */\n\n.stacked-avatars::after {\n  content: \"\";\n  display: table;\n  clear: both;\n}\n\n.stacked-avatars .avatar {\n  float: inline-start;\n}\n\n.stacked-avatars .avatar:not(:last-child) {\n  /* injected in the document from AvatarStack.tsx */\n  clip-path: url(\"#cpdAvatarClip\");\n}\n\n.stacked-avatars > *:not(:first-child) {\n  margin-inline-start: calc(var(--cpd-avatar-size) * -0.4);\n}\n\n.clip-path {\n  /* In theory the SVG is invisible, but we still need to ensure it doesn't\n  affect the page's layout or otherwise make an appearance */\n  position: fixed;\n  inset-inline-start: -9999px;\n}\n"],"mappings":""}

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

@@ -0,0 +1,11 @@
+var Avatar_module_default = {
+	avatar: "_avatar_7h2br_8",
+	image: "_image_7h2br_43",
+	"avatar-imageless": "_avatar-imageless_7h2br_55",
+	"stacked-avatars": "_stacked-avatars_7h2br_109",
+	"clip-path": "_clip-path_7h2br_128"
+};
+//#endregion
+export { Avatar_module_default as default };
+
+//# sourceMappingURL=Avatar.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.module.js","names":[],"sources":["../../../src/components/Avatar/Avatar.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.avatar {\n  display: inline-block;\n  box-sizing: border-box;\n\n  /* -2px to account for the border styling below */\n  line-height: calc(var(--cpd-avatar-size) - 2px);\n  text-align: center;\n  font-size: min(calc(var(--cpd-avatar-size) * 0.5625), 60px);\n  text-transform: uppercase;\n  speak: none; /* stylelint-disable-line declaration-property-value-no-unknown */\n  font-family: var(--cpd-font-family-sans);\n  font-weight: bold;\n  overflow: hidden;\n  user-select: none;\n\n  /* Set a background color to help with visual consistency when displaying\n   * avatars with a translucent background */\n  background: var(--cpd-color-bg-canvas-default);\n}\n\nbutton.avatar {\n  /**\n   * The avatar can be a button element, we need to reset its style\n   */\n  padding: 0;\n  border: 0;\n  appearance: none;\n  cursor: pointer;\n}\n\nbutton.avatar:disabled {\n  cursor: not-allowed;\n}\n\n.avatar,\n.image {\n  aspect-ratio: 1 / 1;\n  inline-size: var(--cpd-avatar-size);\n  border-radius: var(--cpd-avatar-radius);\n}\n\n.image {\n  object-fit: cover;\n  overflow: hidden;\n}\n\n/* Additional selector for button to raise selector above button.avatar */\nbutton.avatar-imageless,\n.avatar-imageless {\n  /* In the future we'd prefer to pass the HEX code as the data attr\n     and use `attr(data-color)` to avoid the style declaration from below\n     but this is currently not supported in all browsers */\n  background: var(--cpd-avatar-bg);\n  color: var(--cpd-avatar-color);\n\n  /* Additional style to ensure visibility in contrast-mode */\n  border: 1px solid var(--cpd-avatar-bg);\n}\n\n.avatar[data-color] {\n  --cpd-avatar-bg: var(--cpd-color-bg-decorative-1);\n  --cpd-avatar-color: var(--cpd-color-text-decorative-1);\n}\n\n.avatar[data-color=\"2\"] {\n  --cpd-avatar-bg: var(--cpd-color-bg-decorative-2);\n  --cpd-avatar-color: var(--cpd-color-text-decorative-2);\n}\n\n.avatar[data-color=\"3\"] {\n  --cpd-avatar-bg: var(--cpd-color-bg-decorative-3);\n  --cpd-avatar-color: var(--cpd-color-text-decorative-3);\n}\n\n.avatar[data-color=\"4\"] {\n  --cpd-avatar-bg: var(--cpd-color-bg-decorative-4);\n  --cpd-avatar-color: var(--cpd-color-text-decorative-4);\n}\n\n.avatar[data-color=\"5\"] {\n  --cpd-avatar-bg: var(--cpd-color-bg-decorative-5);\n  --cpd-avatar-color: var(--cpd-color-text-decorative-5);\n}\n\n.avatar[data-color=\"6\"] {\n  --cpd-avatar-bg: var(--cpd-color-bg-decorative-6);\n  --cpd-avatar-color: var(--cpd-color-text-decorative-6);\n}\n\n.avatar[data-type=\"round\"] {\n  --cpd-avatar-radius: 50%;\n}\n\n.avatar[data-type=\"square\"] {\n  --cpd-avatar-radius: 25%;\n}\n\n/**\n * Stacked avatars \n */\n\n.stacked-avatars::after {\n  content: \"\";\n  display: table;\n  clear: both;\n}\n\n.stacked-avatars .avatar {\n  float: inline-start;\n}\n\n.stacked-avatars .avatar:not(:last-child) {\n  /* injected in the document from AvatarStack.tsx */\n  clip-path: url(\"#cpdAvatarClip\");\n}\n\n.stacked-avatars > *:not(:first-child) {\n  margin-inline-start: calc(var(--cpd-avatar-size) * -0.4);\n}\n\n.clip-path {\n  /* In theory the SVG is invisible, but we still need to ensure it doesn't\n  affect the page's layout or otherwise make an appearance */\n  position: fixed;\n  inset-inline-start: -9999px;\n}\n"],"mappings":""}

package/dist/components/Avatar/AvatarStack.cjs

@@ -1,31 +1,54 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const classNames = require("classnames");
-const React = require("react");
-const Avatar_module = require("./Avatar.module.css.cjs");
-const avatarClip_mask = require("./avatar-clip.mask.svg.cjs");
-const AVATAR_MASK_ID = "cpdAvatarClipSvg";
-let AvatarStackUsageCount = 0;
-const AvatarStack = ({ children, className }) => {
-  React.useEffect(() => {
-    if (AvatarStackUsageCount === 0) {
-      const svgMask = `
-        <div aria-hidden="true" id="${AVATAR_MASK_ID}" class="${Avatar_module.default["clip-path"]}">
-          ${avatarClip_mask.default}
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_Avatar_module = require("./Avatar.module.cjs");
+const require_avatar_clip_mask = require("./avatar-clip.mask.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/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.
+	*/
+	(0, react.useEffect)(() => {
+		if (AvatarStackUsageCount === 0) {
+			const svgMask = `
+        <div aria-hidden="true" id="${AVATAR_MASK_ID}" class="${require_Avatar_module.default["clip-path"]}">
+          ${require_avatar_clip_mask.default}
         </div>
       `;
-      document.body.insertAdjacentHTML("beforeend", svgMask);
-    }
-    AvatarStackUsageCount++;
-    return () => {
-      AvatarStackUsageCount--;
-      if (AvatarStackUsageCount <= 0) {
-        document.getElementById(AVATAR_MASK_ID)?.remove();
-      }
-    };
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(Avatar_module.default["stacked-avatars"], className), children });
+			document.body.insertAdjacentHTML("beforeend", svgMask);
+		}
+		AvatarStackUsageCount++;
+		return () => {
+			AvatarStackUsageCount--;
+			if (AvatarStackUsageCount <= 0) document.getElementById(AVATAR_MASK_ID)?.remove();
+		};
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, classnames.default)(require_Avatar_module.default["stacked-avatars"], className),
+		children
+	});
 };
+//#endregion
 exports.AvatarStack = AvatarStack;
-//# sourceMappingURL=AvatarStack.cjs.map
+
+//# sourceMappingURL=AvatarStack.cjs.map