@vector-im/compound-web 9.0.1 → 9.2.0

package/dist/components/ActivityMarker/Pill.cjs

@@ -1,7 +1,7 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_Pill_module = require("./Pill.module.cjs");
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/ActivityMarker/Pill.tsx
 function Pill({ children, ...props }) {

package/dist/components/ActivityMarker/Unread.cjs

@@ -1,7 +1,7 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_Unread_module = require("./Unread.module.cjs");
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/ActivityMarker/Unread.tsx
 function Unread(props) {

package/dist/components/ActivityMarker/UnreadCounter.cjs

@@ -1,7 +1,7 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_UnreadCounter_module = require("./UnreadCounter.module.cjs");
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/ActivityMarker/UnreadCounter.tsx
 function UnreadCounter({ count, ...props }) {

package/dist/components/Alert/Alert.cjs

@@ -3,17 +3,17 @@ const require_Alert_module = require("./Alert.module.cjs");
 const require_Text = require("../Typography/Text.cjs");
 const require_IconButton = require("../Button/IconButton/IconButton.cjs");
 let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
+classnames = require_runtime.__toESM(classnames, 1);
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let _vector_im_compound_design_tokens_assets_web_icons_check_circle = require("@vector-im/compound-design-tokens/assets/web/icons/check-circle");
-_vector_im_compound_design_tokens_assets_web_icons_check_circle = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_check_circle);
+_vector_im_compound_design_tokens_assets_web_icons_check_circle = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_check_circle, 1);
 let _vector_im_compound_design_tokens_assets_web_icons_error_solid = require("@vector-im/compound-design-tokens/assets/web/icons/error-solid");
-_vector_im_compound_design_tokens_assets_web_icons_error_solid = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_error_solid);
+_vector_im_compound_design_tokens_assets_web_icons_error_solid = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_error_solid, 1);
 let _vector_im_compound_design_tokens_assets_web_icons_info = require("@vector-im/compound-design-tokens/assets/web/icons/info");
-_vector_im_compound_design_tokens_assets_web_icons_info = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_info);
+_vector_im_compound_design_tokens_assets_web_icons_info = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_info, 1);
 let _vector_im_compound_design_tokens_assets_web_icons_close = require("@vector-im/compound-design-tokens/assets/web/icons/close");
-_vector_im_compound_design_tokens_assets_web_icons_close = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_close);
+_vector_im_compound_design_tokens_assets_web_icons_close = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_close, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/Alert/Alert.tsx
 /**

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

@@ -1,16 +1,10 @@
-//#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,
+	alert: "_alert_zx76t_10",
+	content: "_content_zx76t_37",
 	"text-content": "_text-content_zx76t_44",
-	title,
-	icon,
-	actions
+	title: "_title_zx76t_48",
+	icon: "_icon_zx76t_48",
+	actions: "_actions_zx76t_64"
 };
 //#endregion
 exports.default = Alert_module_default;

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

@@ -1,16 +1,10 @@
-//#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,
+	alert: "_alert_zx76t_10",
+	content: "_content_zx76t_37",
 	"text-content": "_text-content_zx76t_44",
-	title,
-	icon,
-	actions
+	title: "_title_zx76t_48",
+	icon: "_icon_zx76t_48",
+	actions: "_actions_zx76t_64"
 };
 //#endregion
 export { Alert_module_default as default };

package/dist/components/Avatar/Avatar.cjs

@@ -3,9 +3,9 @@ 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);
+classnames = require_runtime.__toESM(classnames, 1);
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/Avatar/Avatar.tsx
 /**

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

@@ -1,9 +1,9 @@
 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"
+	avatar: "_avatar_va14e_8",
+	image: "_image_va14e_43",
+	"avatar-imageless": "_avatar-imageless_va14e_55",
+	"stacked-avatars": "_stacked-avatars_va14e_109",
+	"clip-path": "_clip-path_va14e_128"
 };
 //#endregion
 exports.default = Avatar_module_default;

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

@@ -1 +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":""}
+{"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; /* stylelint-disable-line defensive-css/no-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

@@ -1,9 +1,9 @@
 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"
+	avatar: "_avatar_va14e_8",
+	image: "_image_va14e_43",
+	"avatar-imageless": "_avatar-imageless_va14e_55",
+	"stacked-avatars": "_stacked-avatars_va14e_109",
+	"clip-path": "_clip-path_va14e_128"
 };
 //#endregion
 export { Avatar_module_default as default };

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

@@ -1 +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":""}
+{"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; /* stylelint-disable-line defensive-css/no-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

@@ -2,9 +2,9 @@ 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);
+classnames = require_runtime.__toESM(classnames, 1);
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/Avatar/AvatarStack.tsx
 var AVATAR_MASK_ID = "cpdAvatarClipSvg";

package/dist/components/Badge/Badge.cjs

@@ -2,22 +2,26 @@ 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);
+classnames = require_runtime.__toESM(classnames, 1);
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 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, {
+var Badge = ({ children, Icon, kind = "default", className }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Typography.Typography, {
 		as: "span",
 		size: "sm",
 		weight: "medium",
-		className: (0, classnames.default)(require_Badge_module.default.badge, className),
+		className: (0, classnames.default)(require_Badge_module.default.badge, className, { [require_Badge_module.default["has-icon"]]: !!Icon }),
 		"data-kind": kind,
-		children
+		children: [Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+			width: "16",
+			height: "16",
+			"aria-hidden": true
+		}), children]
 	});
 };
 //#endregion

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

@@ -1 +1 @@
-{"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"}
+{"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 ComponentType, 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   * An icon to display within the badge.\n   */\n  Icon?: ComponentType<React.SVGAttributes<SVGElement>>;\n};\n\n/**\n * A Badge component.\n */\nexport const Badge: React.FC<PropsWithChildren<BadgeProps>> = ({\n  children,\n  Icon,\n  kind = \"default\",\n  className,\n}) => {\n  const classes = classnames(styles.badge, className, {\n    [styles[\"has-icon\"]]: !!Icon,\n  });\n  return (\n    <Typography\n      as=\"span\"\n      size=\"sm\"\n      weight=\"medium\"\n      className={classes}\n      data-kind={kind}\n    >\n      {Icon && <Icon width=\"16\" height=\"16\" aria-hidden={true} />}\n      {children}\n    </Typography>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AA8BA,IAAa,SAAkD,EAC7D,UACA,MACA,OAAO,WACP,gBACI;AAIJ,QACE,iBAAA,GAAA,kBAAA,MAAC,mBAAA,YAAD;EACE,IAAG;EACH,MAAK;EACL,QAAO;EACP,YAAA,GAAA,WAAA,SARuB,qBAAA,QAAO,OAAO,WAAW,GACjD,qBAAA,QAAO,cAAc,CAAC,CAAC,MACzB,CAAC;EAOE,aAAW;YALb,CAOG,QAAQ,iBAAA,GAAA,kBAAA,KAAC,MAAD;GAAM,OAAM;GAAK,QAAO;GAAK,eAAa;GAAQ,CAAA,EAC1D,SACU"}

package/dist/components/Badge/Badge.d.ts

@@ -1,4 +1,4 @@
-import { default as React, PropsWithChildren } from 'react';
+import { default as React, ComponentType, PropsWithChildren } from 'react';
 type BadgeProps = {
     /**
      * The CSS class name.
@@ -8,6 +8,10 @@ type BadgeProps = {
      * The type of badge.
      */
     kind?: "default" | "grey" | "on-solid" | "blue" | "green" | "red";
+    /**
+     * An icon to display within the badge.
+     */
+    Icon?: ComponentType<React.SVGAttributes<SVGElement>>;
 };
 /**
  * A Badge component.

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAItD,KAAK,UAAU,GAAG;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;CACnE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAiBzD,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI1E,KAAK,UAAU,GAAG;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;IAClE;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC;CACvD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAqBzD,CAAC"}

package/dist/components/Badge/Badge.js

@@ -2,19 +2,23 @@ import { Typography } from "../Typography/Typography.js";
 import Badge_module_default from "./Badge.module.js";
 import classNames from "classnames";
 import "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Badge/Badge.tsx
 /**
 * A Badge component.
 */
-var Badge = ({ children, kind = "default", className }) => {
-	return /* @__PURE__ */ jsx(Typography, {
+var Badge = ({ children, Icon, kind = "default", className }) => {
+	return /* @__PURE__ */ jsxs(Typography, {
 		as: "span",
 		size: "sm",
 		weight: "medium",
-		className: classNames(Badge_module_default.badge, className),
+		className: classNames(Badge_module_default.badge, className, { [Badge_module_default["has-icon"]]: !!Icon }),
 		"data-kind": kind,
-		children
+		children: [Icon && /* @__PURE__ */ jsx(Icon, {
+			width: "16",
+			height: "16",
+			"aria-hidden": true
+		}), children]
 	});
 };
 //#endregion

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

@@ -1 +1 @@
-{"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"}
+{"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 ComponentType, 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   * An icon to display within the badge.\n   */\n  Icon?: ComponentType<React.SVGAttributes<SVGElement>>;\n};\n\n/**\n * A Badge component.\n */\nexport const Badge: React.FC<PropsWithChildren<BadgeProps>> = ({\n  children,\n  Icon,\n  kind = \"default\",\n  className,\n}) => {\n  const classes = classnames(styles.badge, className, {\n    [styles[\"has-icon\"]]: !!Icon,\n  });\n  return (\n    <Typography\n      as=\"span\"\n      size=\"sm\"\n      weight=\"medium\"\n      className={classes}\n      data-kind={kind}\n    >\n      {Icon && <Icon width=\"16\" height=\"16\" aria-hidden={true} />}\n      {children}\n    </Typography>\n  );\n};\n"],"mappings":";;;;;;;;;AA8BA,IAAa,SAAkD,EAC7D,UACA,MACA,OAAO,WACP,gBACI;AAIJ,QACE,qBAAC,YAAD;EACE,IAAG;EACH,MAAK;EACL,QAAO;EACP,WARY,WAAW,qBAAO,OAAO,WAAW,GACjD,qBAAO,cAAc,CAAC,CAAC,MACzB,CAAC;EAOE,aAAW;YALb,CAOG,QAAQ,oBAAC,MAAD;GAAM,OAAM;GAAK,QAAO;GAAK,eAAa;GAAQ,CAAA,EAC1D,SACU"}

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

@@ -1,4 +1,7 @@
-var Badge_module_default = { badge: "_badge_18gm1_8" };
+var Badge_module_default = {
+	badge: "_badge_10dml_8",
+	"has-icon": "_has-icon_10dml_18"
+};
 //#endregion
 exports.default = Badge_module_default;
 

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

@@ -1 +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":""}
+{"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  box-sizing: border-box;\n  min-block-size: 28px;\n}\n\n.has-icon {\n  padding-inline-start: var(--cpd-space-2x);\n}\n\n.badge[data-kind=\"default\"] {\n  border: 1px solid var(--cpd-color-border-interactive-secondary);\n\n  /* To keep the same height than the other badges despite the border  */\n  padding-block: calc(var(--cpd-space-1x) - 1px);\n  outline: none;\n  color: var(--cpd-color-text-primary);\n\n  svg {\n    color: var(--cpd-color-icon-primary);\n  }\n}\n\n.badge[data-kind=\"grey\"] {\n  background: var(--cpd-color-bg-badge-secondary);\n  color: var(--cpd-color-text-primary);\n\n  svg {\n    color: var(--cpd-color-icon-primary);\n  }\n}\n\n.badge[data-kind=\"on-solid\"] {\n  background: var(--cpd-color-bg-badge-primary);\n  color: var(--cpd-color-text-on-solid-primary);\n\n  svg {\n    color: var(--cpd-color-icon-on-solid-primary);\n  }\n}\n\n.badge[data-kind=\"blue\"] {\n  background: var(--cpd-color-bg-badge-info);\n  color: var(--cpd-color-text-badge-info);\n\n  svg {\n    color: var(--cpd-color-icon-info-primary);\n  }\n}\n\n.badge[data-kind=\"green\"] {\n  background: var(--cpd-color-bg-badge-accent);\n  color: var(--cpd-color-text-badge-accent);\n\n  svg {\n    color: var(--cpd-color-icon-accent-primary);\n  }\n}\n\n.badge[data-kind=\"red\"] {\n  background: var(--cpd-color-bg-badge-critical);\n  color: var(--cpd-color-text-critical-primary);\n\n  svg {\n    color: var(--cpd-color-icon-critical-primary);\n  }\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

@@ -1,4 +1,7 @@
-var Badge_module_default = { badge: "_badge_18gm1_8" };
+var Badge_module_default = {
+	badge: "_badge_10dml_8",
+	"has-icon": "_has-icon_10dml_18"
+};
 //#endregion
 export { Badge_module_default as default };
 

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

@@ -1 +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":""}
+{"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  box-sizing: border-box;\n  min-block-size: 28px;\n}\n\n.has-icon {\n  padding-inline-start: var(--cpd-space-2x);\n}\n\n.badge[data-kind=\"default\"] {\n  border: 1px solid var(--cpd-color-border-interactive-secondary);\n\n  /* To keep the same height than the other badges despite the border  */\n  padding-block: calc(var(--cpd-space-1x) - 1px);\n  outline: none;\n  color: var(--cpd-color-text-primary);\n\n  svg {\n    color: var(--cpd-color-icon-primary);\n  }\n}\n\n.badge[data-kind=\"grey\"] {\n  background: var(--cpd-color-bg-badge-secondary);\n  color: var(--cpd-color-text-primary);\n\n  svg {\n    color: var(--cpd-color-icon-primary);\n  }\n}\n\n.badge[data-kind=\"on-solid\"] {\n  background: var(--cpd-color-bg-badge-primary);\n  color: var(--cpd-color-text-on-solid-primary);\n\n  svg {\n    color: var(--cpd-color-icon-on-solid-primary);\n  }\n}\n\n.badge[data-kind=\"blue\"] {\n  background: var(--cpd-color-bg-badge-info);\n  color: var(--cpd-color-text-badge-info);\n\n  svg {\n    color: var(--cpd-color-icon-info-primary);\n  }\n}\n\n.badge[data-kind=\"green\"] {\n  background: var(--cpd-color-bg-badge-accent);\n  color: var(--cpd-color-text-badge-accent);\n\n  svg {\n    color: var(--cpd-color-icon-accent-primary);\n  }\n}\n\n.badge[data-kind=\"red\"] {\n  background: var(--cpd-color-bg-badge-critical);\n  color: var(--cpd-color-text-critical-primary);\n\n  svg {\n    color: var(--cpd-color-icon-critical-primary);\n  }\n}\n\n@media (forced-colors: active) {\n  .badge {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}

package/dist/components/Breadcrumb/Breadcrumb.cjs

@@ -3,12 +3,12 @@ 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);
+classnames = require_runtime.__toESM(classnames, 1);
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 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);
+_vector_im_compound_design_tokens_assets_web_icons_chevron_left = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_chevron_left, 1);
 //#region src/components/Breadcrumb/Breadcrumb.tsx
 /**
 * A breadcrumb component.

package/dist/components/Button/Button.cjs

@@ -2,9 +2,9 @@ const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_Button_module = require("./Button.module.cjs");
 const require_UnstyledButton = require("./UnstyledButton.cjs");
 let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
+classnames = require_runtime.__toESM(classnames, 1);
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/Button/Button.tsx
 /**

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

@@ -1,11 +1,8 @@
-//#region src/components/Button/Button.module.css
-var button = "_button_13vu4_8";
-var destructive = "_destructive_13vu4_110";
 var Button_module_default = {
-	button,
+	button: "_button_13vu4_8",
 	"icon-only": "_icon-only_13vu4_53",
 	"has-icon": "_has-icon_13vu4_60",
-	destructive
+	destructive: "_destructive_13vu4_110"
 };
 //#endregion
 exports.default = Button_module_default;

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

@@ -1,11 +1,8 @@
-//#region src/components/Button/Button.module.css
-var button = "_button_13vu4_8";
-var destructive = "_destructive_13vu4_110";
 var Button_module_default = {
-	button,
+	button: "_button_13vu4_8",
 	"icon-only": "_icon-only_13vu4_53",
 	"has-icon": "_has-icon_13vu4_60",
-	destructive
+	destructive: "_destructive_13vu4_110"
 };
 //#endregion
 export { Button_module_default as default };

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

@@ -4,15 +4,15 @@ const require_IconButton_module = require("./IconButton.module.cjs");
 const require_IndicatorIcon = require("../../Icon/IndicatorIcon/IndicatorIcon.cjs");
 const require_Tooltip = require("../../Tooltip/Tooltip.cjs");
 let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
+classnames = require_runtime.__toESM(classnames, 1);
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/Button/IconButton/IconButton.tsx
 /**
 * Display an icon as a button. Can render an indicator
 */
-var IconButton = (0, react.forwardRef)(function IconButton({ kind = "primary", children, className, indicator, size = "32px", style, disabled, destructive, tooltip, noBackground = false, ...props }, ref) {
+var IconButton = (0, react.forwardRef)(function IconButton({ kind = "primary", children, className, indicator, size = "32px", style, disabled, destructive, tooltip, tooltipPlacement, noBackground = false, ...props }, ref) {
 	const button = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_UnstyledButton.UnstyledButton, {
 		as: "button",
 		ref,
@@ -36,6 +36,7 @@ var IconButton = (0, react.forwardRef)(function IconButton({ kind = "primary", c
 	});
 	return tooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
 		label: tooltip,
+		placement: tooltipPlacement,
 		children: button
 	}) : button;
 });

package/dist/components/Button/IconButton/IconButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs","names":[],"sources":["../../../../src/components/Button/IconButton/IconButton.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 React, { type PropsWithChildren, forwardRef } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./IconButton.module.css\";\nimport { UnstyledButton, type UnstyledButtonPropsFor } from \"../UnstyledButton\";\nimport { IndicatorIcon } from \"../../Icon/IndicatorIcon/IndicatorIcon\";\nimport { Tooltip } from \"../../Tooltip/Tooltip\";\n\ntype IconButtonProps = UnstyledButtonPropsFor<\"button\"> & {\n  /**\n   * The type of button.\n   * @default \"primary\"\n   */\n  kind?: \"primary\" | \"secondary\";\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The size of the button in CSS units, e.g. `\"24px\"`.\n   * Note that this is the size of the *button* itself: the icon will be 0.75 * this size\n   * @default 32px\n   */\n  size?: CSSStyleDeclaration[\"height\"];\n  /**\n   * The icon button indicator dot displayed on the top right\n   * As in IndicatorIcon\n   */\n  indicator?: \"default\" | \"success\" | \"critical\";\n  /**\n   * Whether the button is interactable\n   */\n  disabled?: boolean;\n  /**\n   * Whether this button triggers a destructive action.\n   * @default false\n   */\n  destructive?: boolean;\n  /**\n   * Optional tooltip for the button\n   */\n  tooltip?: string;\n  /**\n   * Hide the background when the button is not active or hovered.\n   * @default false\n   */\n  noBackground?: boolean;\n};\n\n/**\n * Display an icon as a button. Can render an indicator\n */\nexport const IconButton = forwardRef<\n  HTMLButtonElement,\n  PropsWithChildren<IconButtonProps>\n>(function IconButton(\n  {\n    kind = \"primary\",\n    children,\n    className,\n    indicator,\n    size = \"32px\",\n    style,\n    disabled,\n    destructive,\n    tooltip,\n    noBackground = false,\n    ...props\n  },\n  ref,\n) {\n  const classes = classnames(styles[\"icon-button\"], className, {\n    [styles.destructive]: destructive,\n    [styles[\"no-background\"]]: noBackground,\n  });\n\n  const button = (\n    <UnstyledButton\n      as=\"button\"\n      ref={ref}\n      className={classes}\n      style={\n        {\n          \"--cpd-icon-button-size\": size,\n          ...style,\n        } as React.CSSProperties\n      }\n      disabled={disabled}\n      {...props}\n      data-indicator={indicator}\n      data-kind={kind}\n    >\n      <IndicatorIcon\n        indicator={indicator}\n        colour={disabled ? \"var(--cpd-color-icon-disabled)\" : undefined}\n      >\n        {React.Children.only(children)}\n      </IndicatorIcon>\n    </UnstyledButton>\n  );\n\n  return tooltip ? <Tooltip label={tooltip}>{button}</Tooltip> : button;\n});\n"],"mappings":";;;;;;;;;;;;;;AA2DA,IAAa,cAAA,GAAA,MAAA,YAGX,SAAS,WACT,EACE,OAAO,WACP,UACA,WACA,WACA,OAAO,QACP,OACA,UACA,aACA,SACA,eAAe,OACf,GAAG,SAEL,KACA;CAMA,MAAM,SACJ,iBAAA,GAAA,kBAAA,KAAC,uBAAA,gBAAD;EACE,IAAG;EACE;EACL,YAAA,GAAA,WAAA,SATuB,0BAAA,QAAO,gBAAgB,WAAW;IAC1D,0BAAA,QAAO,cAAc;IACrB,0BAAA,QAAO,mBAAmB;GAC5B,CAAC;EAOE,OACE;GACE,0BAA0B;GAC1B,GAAG;GACJ;EAEO;EACV,GAAI;EACJ,kBAAgB;EAChB,aAAW;YAEX,iBAAA,GAAA,kBAAA,KAAC,sBAAA,eAAD;GACa;GACX,QAAQ,WAAW,mCAAmC,KAAA;aAErD,MAAA,QAAM,SAAS,KAAK,SAAS;GAChB,CAAA;EACD,CAAA;AAGnB,QAAO,UAAU,iBAAA,GAAA,kBAAA,KAAC,gBAAA,SAAD;EAAS,OAAO;YAAU;EAAiB,CAAA,GAAG;EAC/D"}
+{"version":3,"file":"IconButton.cjs","names":[],"sources":["../../../../src/components/Button/IconButton/IconButton.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 React, { type PropsWithChildren, forwardRef } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./IconButton.module.css\";\nimport { UnstyledButton, type UnstyledButtonPropsFor } from \"../UnstyledButton\";\nimport { IndicatorIcon } from \"../../Icon/IndicatorIcon/IndicatorIcon\";\nimport { Tooltip } from \"../../Tooltip/Tooltip\";\n\ntype IconButtonProps = UnstyledButtonPropsFor<\"button\"> & {\n  /**\n   * The type of button.\n   * @default \"primary\"\n   */\n  kind?: \"primary\" | \"secondary\";\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The size of the button in CSS units, e.g. `\"24px\"`.\n   * Note that this is the size of the *button* itself: the icon will be 0.75 * this size\n   * @default 32px\n   */\n  size?: CSSStyleDeclaration[\"height\"];\n  /**\n   * The icon button indicator dot displayed on the top right\n   * As in IndicatorIcon\n   */\n  indicator?: \"default\" | \"success\" | \"critical\";\n  /**\n   * Whether the button is interactable\n   */\n  disabled?: boolean;\n  /**\n   * Whether this button triggers a destructive action.\n   * @default false\n   */\n  destructive?: boolean;\n  /**\n   * Optional tooltip for the button\n   */\n  tooltip?: string;\n  /**\n   * The placement of the tooltip, if `tooltip` is provided.\n   */\n  tooltipPlacement?: React.ComponentProps<typeof Tooltip>[\"placement\"];\n  /**\n   * Hide the background when the button is not active or hovered.\n   * @default false\n   */\n  noBackground?: boolean;\n};\n\n/**\n * Display an icon as a button. Can render an indicator\n */\nexport const IconButton = forwardRef<\n  HTMLButtonElement,\n  PropsWithChildren<IconButtonProps>\n>(function IconButton(\n  {\n    kind = \"primary\",\n    children,\n    className,\n    indicator,\n    size = \"32px\",\n    style,\n    disabled,\n    destructive,\n    tooltip,\n    tooltipPlacement,\n    noBackground = false,\n    ...props\n  },\n  ref,\n) {\n  const classes = classnames(styles[\"icon-button\"], className, {\n    [styles.destructive]: destructive,\n    [styles[\"no-background\"]]: noBackground,\n  });\n\n  const button = (\n    <UnstyledButton\n      as=\"button\"\n      ref={ref}\n      className={classes}\n      style={\n        {\n          \"--cpd-icon-button-size\": size,\n          ...style,\n        } as React.CSSProperties\n      }\n      disabled={disabled}\n      {...props}\n      data-indicator={indicator}\n      data-kind={kind}\n    >\n      <IndicatorIcon\n        indicator={indicator}\n        colour={disabled ? \"var(--cpd-color-icon-disabled)\" : undefined}\n      >\n        {React.Children.only(children)}\n      </IndicatorIcon>\n    </UnstyledButton>\n  );\n\n  return tooltip ? (\n    <Tooltip label={tooltip} placement={tooltipPlacement}>\n      {button}\n    </Tooltip>\n  ) : (\n    button\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;AA+DA,IAAa,cAAA,GAAA,MAAA,YAGX,SAAS,WACT,EACE,OAAO,WACP,UACA,WACA,WACA,OAAO,QACP,OACA,UACA,aACA,SACA,kBACA,eAAe,OACf,GAAG,SAEL,KACA;CAMA,MAAM,SACJ,iBAAA,GAAA,kBAAA,KAAC,uBAAA,gBAAD;EACE,IAAG;EACE;EACL,YAAA,GAAA,WAAA,SATuB,0BAAA,QAAO,gBAAgB,WAAW;IAC1D,0BAAA,QAAO,cAAc;IACrB,0BAAA,QAAO,mBAAmB;GAC5B,CAAC;EAOE,OACE;GACE,0BAA0B;GAC1B,GAAG;GACJ;EAEO;EACV,GAAI;EACJ,kBAAgB;EAChB,aAAW;YAEX,iBAAA,GAAA,kBAAA,KAAC,sBAAA,eAAD;GACa;GACX,QAAQ,WAAW,mCAAmC,KAAA;aAErD,MAAA,QAAM,SAAS,KAAK,SAAS;GAChB,CAAA;EACD,CAAA;AAGnB,QAAO,UACL,iBAAA,GAAA,kBAAA,KAAC,gBAAA,SAAD;EAAS,OAAO;EAAS,WAAW;YACjC;EACO,CAAA,GAEV;EAEF"}

package/dist/components/Button/IconButton/IconButton.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { UnstyledButtonPropsFor } from '../UnstyledButton';
+import { Tooltip } from '../../Tooltip/Tooltip';
 type IconButtonProps = UnstyledButtonPropsFor<"button"> & {
     /**
      * The type of button.
@@ -34,6 +35,10 @@ type IconButtonProps = UnstyledButtonPropsFor<"button"> & {
      * Optional tooltip for the button
      */
     tooltip?: string;
+    /**
+     * The placement of the tooltip, if `tooltip` is provided.
+     */
+    tooltipPlacement?: React.ComponentProps<typeof Tooltip>["placement"];
     /**
      * Hide the background when the button is not active or hovered.
      * @default false

package/dist/components/Button/IconButton/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/IconButton/IconButton.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAIlE,OAAO,EAAkB,KAAK,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAIhF,KAAK,eAAe,GAAG,sBAAsB,CAAC,QAAQ,CAAC,GAAG;IACxD;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC/C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,iIAkDrB,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/IconButton/IconButton.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAIlE,OAAO,EAAkB,KAAK,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAEhF,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,KAAK,eAAe,GAAG,sBAAsB,CAAC,QAAQ,CAAC,GAAG;IACxD;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC/C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC;IACrE;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,iIAyDrB,CAAC"}

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

@@ -9,7 +9,7 @@ import { jsx } from "react/jsx-runtime";
 /**
 * Display an icon as a button. Can render an indicator
 */
-var IconButton = forwardRef(function IconButton({ kind = "primary", children, className, indicator, size = "32px", style, disabled, destructive, tooltip, noBackground = false, ...props }, ref) {
+var IconButton = forwardRef(function IconButton({ kind = "primary", children, className, indicator, size = "32px", style, disabled, destructive, tooltip, tooltipPlacement, noBackground = false, ...props }, ref) {
 	const button = /* @__PURE__ */ jsx(UnstyledButton, {
 		as: "button",
 		ref,
@@ -33,6 +33,7 @@ var IconButton = forwardRef(function IconButton({ kind = "primary", children, cl
 	});
 	return tooltip ? /* @__PURE__ */ jsx(Tooltip, {
 		label: tooltip,
+		placement: tooltipPlacement,
 		children: button
 	}) : button;
 });

package/dist/components/Button/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","names":[],"sources":["../../../../src/components/Button/IconButton/IconButton.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 React, { type PropsWithChildren, forwardRef } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./IconButton.module.css\";\nimport { UnstyledButton, type UnstyledButtonPropsFor } from \"../UnstyledButton\";\nimport { IndicatorIcon } from \"../../Icon/IndicatorIcon/IndicatorIcon\";\nimport { Tooltip } from \"../../Tooltip/Tooltip\";\n\ntype IconButtonProps = UnstyledButtonPropsFor<\"button\"> & {\n  /**\n   * The type of button.\n   * @default \"primary\"\n   */\n  kind?: \"primary\" | \"secondary\";\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The size of the button in CSS units, e.g. `\"24px\"`.\n   * Note that this is the size of the *button* itself: the icon will be 0.75 * this size\n   * @default 32px\n   */\n  size?: CSSStyleDeclaration[\"height\"];\n  /**\n   * The icon button indicator dot displayed on the top right\n   * As in IndicatorIcon\n   */\n  indicator?: \"default\" | \"success\" | \"critical\";\n  /**\n   * Whether the button is interactable\n   */\n  disabled?: boolean;\n  /**\n   * Whether this button triggers a destructive action.\n   * @default false\n   */\n  destructive?: boolean;\n  /**\n   * Optional tooltip for the button\n   */\n  tooltip?: string;\n  /**\n   * Hide the background when the button is not active or hovered.\n   * @default false\n   */\n  noBackground?: boolean;\n};\n\n/**\n * Display an icon as a button. Can render an indicator\n */\nexport const IconButton = forwardRef<\n  HTMLButtonElement,\n  PropsWithChildren<IconButtonProps>\n>(function IconButton(\n  {\n    kind = \"primary\",\n    children,\n    className,\n    indicator,\n    size = \"32px\",\n    style,\n    disabled,\n    destructive,\n    tooltip,\n    noBackground = false,\n    ...props\n  },\n  ref,\n) {\n  const classes = classnames(styles[\"icon-button\"], className, {\n    [styles.destructive]: destructive,\n    [styles[\"no-background\"]]: noBackground,\n  });\n\n  const button = (\n    <UnstyledButton\n      as=\"button\"\n      ref={ref}\n      className={classes}\n      style={\n        {\n          \"--cpd-icon-button-size\": size,\n          ...style,\n        } as React.CSSProperties\n      }\n      disabled={disabled}\n      {...props}\n      data-indicator={indicator}\n      data-kind={kind}\n    >\n      <IndicatorIcon\n        indicator={indicator}\n        colour={disabled ? \"var(--cpd-color-icon-disabled)\" : undefined}\n      >\n        {React.Children.only(children)}\n      </IndicatorIcon>\n    </UnstyledButton>\n  );\n\n  return tooltip ? <Tooltip label={tooltip}>{button}</Tooltip> : button;\n});\n"],"mappings":";;;;;;;;;;;AA2DA,IAAa,aAAa,WAGxB,SAAS,WACT,EACE,OAAO,WACP,UACA,WACA,WACA,OAAO,QACP,OACA,UACA,aACA,SACA,eAAe,OACf,GAAG,SAEL,KACA;CAMA,MAAM,SACJ,oBAAC,gBAAD;EACE,IAAG;EACE;EACL,WATY,WAAW,0BAAO,gBAAgB,WAAW;IAC1D,0BAAO,cAAc;IACrB,0BAAO,mBAAmB;GAC5B,CAAC;EAOE,OACE;GACE,0BAA0B;GAC1B,GAAG;GACJ;EAEO;EACV,GAAI;EACJ,kBAAgB;EAChB,aAAW;YAEX,oBAAC,eAAD;GACa;GACX,QAAQ,WAAW,mCAAmC,KAAA;aAErD,MAAM,SAAS,KAAK,SAAS;GAChB,CAAA;EACD,CAAA;AAGnB,QAAO,UAAU,oBAAC,SAAD;EAAS,OAAO;YAAU;EAAiB,CAAA,GAAG;EAC/D"}
+{"version":3,"file":"IconButton.js","names":[],"sources":["../../../../src/components/Button/IconButton/IconButton.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 React, { type PropsWithChildren, forwardRef } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./IconButton.module.css\";\nimport { UnstyledButton, type UnstyledButtonPropsFor } from \"../UnstyledButton\";\nimport { IndicatorIcon } from \"../../Icon/IndicatorIcon/IndicatorIcon\";\nimport { Tooltip } from \"../../Tooltip/Tooltip\";\n\ntype IconButtonProps = UnstyledButtonPropsFor<\"button\"> & {\n  /**\n   * The type of button.\n   * @default \"primary\"\n   */\n  kind?: \"primary\" | \"secondary\";\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The size of the button in CSS units, e.g. `\"24px\"`.\n   * Note that this is the size of the *button* itself: the icon will be 0.75 * this size\n   * @default 32px\n   */\n  size?: CSSStyleDeclaration[\"height\"];\n  /**\n   * The icon button indicator dot displayed on the top right\n   * As in IndicatorIcon\n   */\n  indicator?: \"default\" | \"success\" | \"critical\";\n  /**\n   * Whether the button is interactable\n   */\n  disabled?: boolean;\n  /**\n   * Whether this button triggers a destructive action.\n   * @default false\n   */\n  destructive?: boolean;\n  /**\n   * Optional tooltip for the button\n   */\n  tooltip?: string;\n  /**\n   * The placement of the tooltip, if `tooltip` is provided.\n   */\n  tooltipPlacement?: React.ComponentProps<typeof Tooltip>[\"placement\"];\n  /**\n   * Hide the background when the button is not active or hovered.\n   * @default false\n   */\n  noBackground?: boolean;\n};\n\n/**\n * Display an icon as a button. Can render an indicator\n */\nexport const IconButton = forwardRef<\n  HTMLButtonElement,\n  PropsWithChildren<IconButtonProps>\n>(function IconButton(\n  {\n    kind = \"primary\",\n    children,\n    className,\n    indicator,\n    size = \"32px\",\n    style,\n    disabled,\n    destructive,\n    tooltip,\n    tooltipPlacement,\n    noBackground = false,\n    ...props\n  },\n  ref,\n) {\n  const classes = classnames(styles[\"icon-button\"], className, {\n    [styles.destructive]: destructive,\n    [styles[\"no-background\"]]: noBackground,\n  });\n\n  const button = (\n    <UnstyledButton\n      as=\"button\"\n      ref={ref}\n      className={classes}\n      style={\n        {\n          \"--cpd-icon-button-size\": size,\n          ...style,\n        } as React.CSSProperties\n      }\n      disabled={disabled}\n      {...props}\n      data-indicator={indicator}\n      data-kind={kind}\n    >\n      <IndicatorIcon\n        indicator={indicator}\n        colour={disabled ? \"var(--cpd-color-icon-disabled)\" : undefined}\n      >\n        {React.Children.only(children)}\n      </IndicatorIcon>\n    </UnstyledButton>\n  );\n\n  return tooltip ? (\n    <Tooltip label={tooltip} placement={tooltipPlacement}>\n      {button}\n    </Tooltip>\n  ) : (\n    button\n  );\n});\n"],"mappings":";;;;;;;;;;;AA+DA,IAAa,aAAa,WAGxB,SAAS,WACT,EACE,OAAO,WACP,UACA,WACA,WACA,OAAO,QACP,OACA,UACA,aACA,SACA,kBACA,eAAe,OACf,GAAG,SAEL,KACA;CAMA,MAAM,SACJ,oBAAC,gBAAD;EACE,IAAG;EACE;EACL,WATY,WAAW,0BAAO,gBAAgB,WAAW;IAC1D,0BAAO,cAAc;IACrB,0BAAO,mBAAmB;GAC5B,CAAC;EAOE,OACE;GACE,0BAA0B;GAC1B,GAAG;GACJ;EAEO;EACV,GAAI;EACJ,kBAAgB;EAChB,aAAW;YAEX,oBAAC,eAAD;GACa;GACX,QAAQ,WAAW,mCAAmC,KAAA;aAErD,MAAM,SAAS,KAAK,SAAS;GAChB,CAAA;EACD,CAAA;AAGnB,QAAO,UACL,oBAAC,SAAD;EAAS,OAAO;EAAS,WAAW;YACjC;EACO,CAAA,GAEV;EAEF"}

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

@@ -1,9 +1,7 @@
-//#region src/components/Button/IconButton/IconButton.module.css
-var destructive = "_destructive_1215g_95";
 var IconButton_module_default = {
 	"icon-button": "_icon-button_1215g_8",
 	"no-background": "_no-background_1215g_42",
-	destructive
+	destructive: "_destructive_1215g_95"
 };
 //#endregion
 exports.default = IconButton_module_default;

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

@@ -1,9 +1,7 @@
-//#region src/components/Button/IconButton/IconButton.module.css
-var destructive = "_destructive_1215g_95";
 var IconButton_module_default = {
 	"icon-button": "_icon-button_1215g_8",
 	"no-background": "_no-background_1215g_42",
-	destructive
+	destructive: "_destructive_1215g_95"
 };
 //#endregion
 export { IconButton_module_default as default };

package/dist/components/Button/UnstyledButton.cjs

@@ -1,6 +1,6 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/Button/UnstyledButton.tsx
 /**

package/dist/components/ChatFilter/ChatFilter.cjs

@@ -2,7 +2,7 @@ const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_UnstyledButton = require("../Button/UnstyledButton.cjs");
 const require_ChatFilter_module = require("./ChatFilter.module.cjs");
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/ChatFilter/ChatFilter.tsx
 /**

package/dist/components/Dropdown/Dropdown.cjs

@@ -1,17 +1,17 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_Dropdown_module = require("./Dropdown.module.cjs");
 let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
+classnames = require_runtime.__toESM(classnames, 1);
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let _vector_im_compound_design_tokens_assets_web_icons_error_solid = require("@vector-im/compound-design-tokens/assets/web/icons/error-solid");
-_vector_im_compound_design_tokens_assets_web_icons_error_solid = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_error_solid);
+_vector_im_compound_design_tokens_assets_web_icons_error_solid = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_error_solid, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _floating_ui_react = require("@floating-ui/react");
 let _vector_im_compound_design_tokens_assets_web_icons_check = require("@vector-im/compound-design-tokens/assets/web/icons/check");
-_vector_im_compound_design_tokens_assets_web_icons_check = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_check);
+_vector_im_compound_design_tokens_assets_web_icons_check = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_check, 1);
 let _vector_im_compound_design_tokens_assets_web_icons_chevron_down = require("@vector-im/compound-design-tokens/assets/web/icons/chevron-down");
-_vector_im_compound_design_tokens_assets_web_icons_chevron_down = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_chevron_down);
+_vector_im_compound_design_tokens_assets_web_icons_chevron_down = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_chevron_down, 1);
 //#region src/components/Dropdown/Dropdown.tsx
 /**
 * The dropdown content.