@vector-im/compound-web 9.1.0 → 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,9 +2,9 @@ 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
 /**

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,9 +4,9 @@ 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
 /**

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.

package/dist/components/Dropdown/Dropdown.module.cjs

@@ -1,11 +1,11 @@
 var Dropdown_module_default = {
-	container: "_container_gn3xc_8",
-	placeholder: "_placeholder_gn3xc_47",
-	border: "_border_gn3xc_51",
-	content: "_content_gn3xc_60",
-	open: "_open_gn3xc_108",
-	help: "_help_gn3xc_112",
-	error: "_error_gn3xc_117"
+	container: "_container_z8zo1_8",
+	placeholder: "_placeholder_z8zo1_49",
+	border: "_border_z8zo1_53",
+	content: "_content_z8zo1_62",
+	open: "_open_z8zo1_110",
+	help: "_help_z8zo1_114",
+	error: "_error_z8zo1_119"
 };
 //#endregion
 exports.default = Dropdown_module_default;

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.module.cjs","names":[],"sources":["../../../src/components/Dropdown/Dropdown.module.css"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.container {\n  display: flex;\n  flex-direction: column;\n\n  label {\n    font: var(--cpd-font-body-md-medium);\n    margin-block-end: var(--cpd-space-1x);\n  }\n\n  button {\n    inline-size: 100%;\n    border: 1px solid var(--cpd-color-border-interactive-primary);\n    background: var(--cpd-color-bg-canvas-default);\n    border-radius: 0.5rem;\n    padding: var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x)\n      var(--cpd-space-4x);\n    box-sizing: border-box;\n    color: var(--cpd-color-text-primary);\n    font: var(--cpd-font-body-md-regular);\n    cursor: pointer;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--cpd-space-4x);\n\n    svg {\n      transition: transform 0.1s linear;\n    }\n  }\n\n  /**\n   * When the dropdown is open, rotate the arrow icon\n   */\n  button[aria-expanded=\"true\"] {\n    svg {\n      transform: rotate(180deg);\n    }\n  }\n\n  button.placeholder {\n    color: var(--cpd-color-text-secondary);\n  }\n\n  .border {\n    display: none;\n    border-inline-start: 1px solid var(--cpd-color-border-interactive-secondary);\n    border-inline-end: 1px solid var(--cpd-color-border-interactive-secondary);\n    block-size: var(--cpd-space-1x);\n    margin-block-start: calc(var(--cpd-space-1x) * -1);\n    box-sizing: border-box;\n  }\n\n  .content {\n    display: none;\n    position: relative;\n\n    ul {\n      /**\n       * To make the component going over the other elements\n       */\n      position: absolute;\n      display: block;\n      inline-size: 100%;\n      background: var(--cpd-color-bg-canvas-default);\n      border: 1px solid var(--cpd-color-border-interactive-secondary);\n      border-block-start: 0;\n      border-end-start-radius: var(--cpd-space-4x);\n      border-end-end-radius: var(--cpd-space-4x);\n      box-sizing: border-box;\n      box-shadow: 0 4px 24px 0 rgb(27 29 34 / 10%);\n      margin: 0;\n      padding: 0;\n      padding-block-end: var(--cpd-space-4x);\n      cursor: pointer;\n\n      li {\n        list-style-type: \"\";\n        font: var(--cpd-font-body-md-medium);\n        padding: var(--cpd-space-3x) var(--cpd-space-4x);\n        border-block-end: 1px solid var(--cpd-color-gray-300);\n        color: var(--cpd-color-text-secondary);\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        gap: var(--cpd-space-4x);\n\n        @media (hover) {\n          &:hover {\n            background: var(--cpd-color-gray-200);\n          }\n        }\n\n        &[aria-selected=\"true\"] {\n          color: var(--cpd-color-text-primary);\n          background: var(--cpd-color-gray-300);\n        }\n      }\n    }\n  }\n\n  .open {\n    display: block;\n  }\n\n  .help {\n    font: var(--cpd-font-body-sm-regular);\n    color: var(--cpd-color-text-secondary);\n  }\n\n  .error {\n    font: var(--cpd-font-body-sm-medium);\n    color: var(--cpd-color-text-critical-primary);\n    display: flex;\n    gap: var(--cpd-space-2x);\n  }\n\n  .error,\n  .help {\n    margin-block-start: var(--cpd-space-2x);\n  }\n\n  &[aria-invalid=\"true\"] {\n    label {\n      color: var(--cpd-color-text-critical-primary);\n    }\n\n    button {\n      border-color: var(--cpd-color-text-critical-primary);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Dropdown.module.cjs","names":[],"sources":["../../../src/components/Dropdown/Dropdown.module.css"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.container {\n  display: flex;\n  flex-direction: column;\n\n  label {\n    font: var(--cpd-font-body-md-medium);\n    margin-block-end: var(--cpd-space-1x);\n  }\n\n  button {\n    inline-size: 100%;\n    border: 1px solid var(--cpd-color-border-interactive-primary);\n    background: var(--cpd-color-bg-canvas-default);\n    border-radius: 0.5rem;\n    padding: var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x)\n      var(--cpd-space-4x);\n    box-sizing: border-box;\n    color: var(--cpd-color-text-primary);\n    font: var(--cpd-font-body-md-regular);\n    cursor: pointer;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--cpd-space-4x);\n\n    svg {\n      @media (prefers-reduced-motion: no-preference) {\n        transition: transform 0.1s linear;\n      }\n    }\n  }\n\n  /**\n   * When the dropdown is open, rotate the arrow icon\n   */\n  button[aria-expanded=\"true\"] {\n    svg {\n      transform: rotate(180deg);\n    }\n  }\n\n  button.placeholder {\n    color: var(--cpd-color-text-secondary);\n  }\n\n  .border {\n    display: none;\n    border-inline-start: 1px solid var(--cpd-color-border-interactive-secondary);\n    border-inline-end: 1px solid var(--cpd-color-border-interactive-secondary);\n    block-size: var(--cpd-space-1x);\n    margin-block-start: calc(var(--cpd-space-1x) * -1);\n    box-sizing: border-box;\n  }\n\n  .content {\n    display: none;\n    position: relative;\n\n    ul {\n      /**\n       * To make the component going over the other elements\n       */\n      position: absolute;\n      display: block;\n      inline-size: 100%;\n      background: var(--cpd-color-bg-canvas-default);\n      border: 1px solid var(--cpd-color-border-interactive-secondary);\n      border-block-start: 0;\n      border-end-start-radius: var(--cpd-space-4x);\n      border-end-end-radius: var(--cpd-space-4x);\n      box-sizing: border-box;\n      box-shadow: 0 4px 24px 0 rgb(27 29 34 / 10%);\n      margin: 0;\n      padding: 0;\n      padding-block-end: var(--cpd-space-4x);\n      cursor: pointer;\n\n      li {\n        list-style-type: \"\";\n        font: var(--cpd-font-body-md-medium);\n        padding: var(--cpd-space-3x) var(--cpd-space-4x);\n        border-block-end: 1px solid var(--cpd-color-gray-300);\n        color: var(--cpd-color-text-secondary);\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        gap: var(--cpd-space-4x);\n\n        @media (hover) {\n          &:hover {\n            background: var(--cpd-color-gray-200);\n          }\n        }\n\n        &[aria-selected=\"true\"] {\n          color: var(--cpd-color-text-primary);\n          background: var(--cpd-color-gray-300);\n        }\n      }\n    }\n  }\n\n  .open {\n    display: block;\n  }\n\n  .help {\n    font: var(--cpd-font-body-sm-regular);\n    color: var(--cpd-color-text-secondary);\n  }\n\n  .error {\n    font: var(--cpd-font-body-sm-medium);\n    color: var(--cpd-color-text-critical-primary);\n    display: flex;\n    gap: var(--cpd-space-2x);\n  }\n\n  .error,\n  .help {\n    margin-block-start: var(--cpd-space-2x);\n  }\n\n  &[aria-invalid=\"true\"] {\n    label {\n      color: var(--cpd-color-text-critical-primary);\n    }\n\n    button {\n      border-color: var(--cpd-color-text-critical-primary);\n    }\n  }\n}\n"],"mappings":""}

package/dist/components/Dropdown/Dropdown.module.js

@@ -1,11 +1,11 @@
 var Dropdown_module_default = {
-	container: "_container_gn3xc_8",
-	placeholder: "_placeholder_gn3xc_47",
-	border: "_border_gn3xc_51",
-	content: "_content_gn3xc_60",
-	open: "_open_gn3xc_108",
-	help: "_help_gn3xc_112",
-	error: "_error_gn3xc_117"
+	container: "_container_z8zo1_8",
+	placeholder: "_placeholder_z8zo1_49",
+	border: "_border_z8zo1_53",
+	content: "_content_z8zo1_62",
+	open: "_open_z8zo1_110",
+	help: "_help_z8zo1_114",
+	error: "_error_z8zo1_119"
 };
 //#endregion
 export { Dropdown_module_default as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.module.js","names":[],"sources":["../../../src/components/Dropdown/Dropdown.module.css"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.container {\n  display: flex;\n  flex-direction: column;\n\n  label {\n    font: var(--cpd-font-body-md-medium);\n    margin-block-end: var(--cpd-space-1x);\n  }\n\n  button {\n    inline-size: 100%;\n    border: 1px solid var(--cpd-color-border-interactive-primary);\n    background: var(--cpd-color-bg-canvas-default);\n    border-radius: 0.5rem;\n    padding: var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x)\n      var(--cpd-space-4x);\n    box-sizing: border-box;\n    color: var(--cpd-color-text-primary);\n    font: var(--cpd-font-body-md-regular);\n    cursor: pointer;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--cpd-space-4x);\n\n    svg {\n      transition: transform 0.1s linear;\n    }\n  }\n\n  /**\n   * When the dropdown is open, rotate the arrow icon\n   */\n  button[aria-expanded=\"true\"] {\n    svg {\n      transform: rotate(180deg);\n    }\n  }\n\n  button.placeholder {\n    color: var(--cpd-color-text-secondary);\n  }\n\n  .border {\n    display: none;\n    border-inline-start: 1px solid var(--cpd-color-border-interactive-secondary);\n    border-inline-end: 1px solid var(--cpd-color-border-interactive-secondary);\n    block-size: var(--cpd-space-1x);\n    margin-block-start: calc(var(--cpd-space-1x) * -1);\n    box-sizing: border-box;\n  }\n\n  .content {\n    display: none;\n    position: relative;\n\n    ul {\n      /**\n       * To make the component going over the other elements\n       */\n      position: absolute;\n      display: block;\n      inline-size: 100%;\n      background: var(--cpd-color-bg-canvas-default);\n      border: 1px solid var(--cpd-color-border-interactive-secondary);\n      border-block-start: 0;\n      border-end-start-radius: var(--cpd-space-4x);\n      border-end-end-radius: var(--cpd-space-4x);\n      box-sizing: border-box;\n      box-shadow: 0 4px 24px 0 rgb(27 29 34 / 10%);\n      margin: 0;\n      padding: 0;\n      padding-block-end: var(--cpd-space-4x);\n      cursor: pointer;\n\n      li {\n        list-style-type: \"\";\n        font: var(--cpd-font-body-md-medium);\n        padding: var(--cpd-space-3x) var(--cpd-space-4x);\n        border-block-end: 1px solid var(--cpd-color-gray-300);\n        color: var(--cpd-color-text-secondary);\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        gap: var(--cpd-space-4x);\n\n        @media (hover) {\n          &:hover {\n            background: var(--cpd-color-gray-200);\n          }\n        }\n\n        &[aria-selected=\"true\"] {\n          color: var(--cpd-color-text-primary);\n          background: var(--cpd-color-gray-300);\n        }\n      }\n    }\n  }\n\n  .open {\n    display: block;\n  }\n\n  .help {\n    font: var(--cpd-font-body-sm-regular);\n    color: var(--cpd-color-text-secondary);\n  }\n\n  .error {\n    font: var(--cpd-font-body-sm-medium);\n    color: var(--cpd-color-text-critical-primary);\n    display: flex;\n    gap: var(--cpd-space-2x);\n  }\n\n  .error,\n  .help {\n    margin-block-start: var(--cpd-space-2x);\n  }\n\n  &[aria-invalid=\"true\"] {\n    label {\n      color: var(--cpd-color-text-critical-primary);\n    }\n\n    button {\n      border-color: var(--cpd-color-text-critical-primary);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Dropdown.module.js","names":[],"sources":["../../../src/components/Dropdown/Dropdown.module.css"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.container {\n  display: flex;\n  flex-direction: column;\n\n  label {\n    font: var(--cpd-font-body-md-medium);\n    margin-block-end: var(--cpd-space-1x);\n  }\n\n  button {\n    inline-size: 100%;\n    border: 1px solid var(--cpd-color-border-interactive-primary);\n    background: var(--cpd-color-bg-canvas-default);\n    border-radius: 0.5rem;\n    padding: var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x)\n      var(--cpd-space-4x);\n    box-sizing: border-box;\n    color: var(--cpd-color-text-primary);\n    font: var(--cpd-font-body-md-regular);\n    cursor: pointer;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--cpd-space-4x);\n\n    svg {\n      @media (prefers-reduced-motion: no-preference) {\n        transition: transform 0.1s linear;\n      }\n    }\n  }\n\n  /**\n   * When the dropdown is open, rotate the arrow icon\n   */\n  button[aria-expanded=\"true\"] {\n    svg {\n      transform: rotate(180deg);\n    }\n  }\n\n  button.placeholder {\n    color: var(--cpd-color-text-secondary);\n  }\n\n  .border {\n    display: none;\n    border-inline-start: 1px solid var(--cpd-color-border-interactive-secondary);\n    border-inline-end: 1px solid var(--cpd-color-border-interactive-secondary);\n    block-size: var(--cpd-space-1x);\n    margin-block-start: calc(var(--cpd-space-1x) * -1);\n    box-sizing: border-box;\n  }\n\n  .content {\n    display: none;\n    position: relative;\n\n    ul {\n      /**\n       * To make the component going over the other elements\n       */\n      position: absolute;\n      display: block;\n      inline-size: 100%;\n      background: var(--cpd-color-bg-canvas-default);\n      border: 1px solid var(--cpd-color-border-interactive-secondary);\n      border-block-start: 0;\n      border-end-start-radius: var(--cpd-space-4x);\n      border-end-end-radius: var(--cpd-space-4x);\n      box-sizing: border-box;\n      box-shadow: 0 4px 24px 0 rgb(27 29 34 / 10%);\n      margin: 0;\n      padding: 0;\n      padding-block-end: var(--cpd-space-4x);\n      cursor: pointer;\n\n      li {\n        list-style-type: \"\";\n        font: var(--cpd-font-body-md-medium);\n        padding: var(--cpd-space-3x) var(--cpd-space-4x);\n        border-block-end: 1px solid var(--cpd-color-gray-300);\n        color: var(--cpd-color-text-secondary);\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        gap: var(--cpd-space-4x);\n\n        @media (hover) {\n          &:hover {\n            background: var(--cpd-color-gray-200);\n          }\n        }\n\n        &[aria-selected=\"true\"] {\n          color: var(--cpd-color-text-primary);\n          background: var(--cpd-color-gray-300);\n        }\n      }\n    }\n  }\n\n  .open {\n    display: block;\n  }\n\n  .help {\n    font: var(--cpd-font-body-sm-regular);\n    color: var(--cpd-color-text-secondary);\n  }\n\n  .error {\n    font: var(--cpd-font-body-sm-medium);\n    color: var(--cpd-color-text-critical-primary);\n    display: flex;\n    gap: var(--cpd-space-2x);\n  }\n\n  .error,\n  .help {\n    margin-block-start: var(--cpd-space-2x);\n  }\n\n  &[aria-invalid=\"true\"] {\n    label {\n      color: var(--cpd-color-text-critical-primary);\n    }\n\n    button {\n      border-color: var(--cpd-color-text-critical-primary);\n    }\n  }\n}\n"],"mappings":""}

package/dist/components/Form/Controls/Action/Action.cjs

@@ -3,9 +3,9 @@ const require_Tooltip = require("../../../Tooltip/Tooltip.cjs");
 const require_Action_module = require("./Action.module.cjs");
 const require_Text = require("../Text/Text.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 _radix_ui_react_form = require("@radix-ui/react-form");
 //#region src/components/Form/Controls/Action/Action.tsx

package/dist/components/Form/Controls/Checkbox/Checkbox.cjs

@@ -1,13 +1,13 @@
 const require_runtime = require("../../../../_virtual/_rolldown/runtime.cjs");
 const require_Checkbox_module = require("./Checkbox.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 _radix_ui_react_form = require("@radix-ui/react-form");
 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);
 //#region src/components/Form/Controls/Checkbox/Checkbox.tsx
 /**
 * A styled checkbox input, for standalone use.

package/dist/components/Form/Controls/EditInPlace/EditInPlace.cjs

@@ -8,13 +8,13 @@ const require_Message = require("../../Message.cjs");
 const require_Root = require("../../Root.cjs");
 const require_Field = require("../../Field.cjs");
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 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");
 let _radix_ui_react_form = require("@radix-ui/react-form");
 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);
 //#region src/components/Form/Controls/EditInPlace/EditInPlace.tsx
 var State = /* @__PURE__ */ function(State) {
 	/** No changes on the input has been made */

package/dist/components/Form/Controls/MFA/MFA.cjs

@@ -1,9 +1,9 @@
 const require_runtime = require("../../../../_virtual/_rolldown/runtime.cjs");
 const require_MFA_module = require("./MFA.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 _radix_ui_react_form = require("@radix-ui/react-form");
 //#region src/components/Form/Controls/MFA/MFA.tsx

package/dist/components/Form/Controls/MFA/MFA.module.cjs

@@ -1,7 +1,7 @@
 var MFA_module_default = {
-	container: "_container_43om7_10",
-	control: "_control_43om7_25",
-	digit: "_digit_43om7_49"
+	container: "_container_17qhw_10",
+	control: "_control_17qhw_25",
+	digit: "_digit_17qhw_49"
 };
 //#endregion
 exports.default = MFA_module_default;

package/dist/components/Form/Controls/MFA/MFA.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MFA.module.cjs","names":[],"sources":["../../../../../src/components/Form/Controls/MFA/MFA.module.css"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\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.container {\n  --gap: var(--cpd-space-3x);\n  --digit-size: var(--cpd-space-10x);\n  --digit-height: var(--cpd-space-12x);\n\n  display: flex;\n  inline-size: fit-content;\n  flex-direction: row;\n  gap: var(--gap);\n\n  /* The input is positioned absolutely\n     so the container needs to be positioned relatively */\n  position: relative;\n}\n\n.control {\n  all: unset;\n\n  /** TODO: semantic token */\n  font-family: var(--cpd-font-family-mono), ui-monospace, monospace;\n  font-weight: 700;\n\n  /* Position the input to fill the container */\n  position: absolute;\n  inset: 0;\n\n  /* Spacing between digits is set to the gap\n     plus the size of one digit box\n     minus the size of one character */\n  letter-spacing: calc(var(--gap) + var(--digit-size) - 1ch);\n  line-height: var(--digit-height);\n\n  /* The padding at the start positions the first digit at the middle of the digit box */\n  padding-inline-start: calc(var(--cpd-space-10x) / 2 - (1ch / 2));\n\n  /* The negative margin at the end is to keep space for the cursor when the input is full */\n  margin-inline-end: calc(-1 * (var(--cpd-space-10x) + var(--cpd-space-3x)));\n}\n\n.digit {\n  box-sizing: border-box;\n  inline-size: var(--cpd-space-10x);\n  block-size: var(--cpd-space-12x);\n  border: 1px solid var(--cpd-color-border-interactive-primary);\n  background: var(--cpd-color-bg-canvas-default);\n  border-radius: 0.5rem;\n  padding: var(--cpd-space-3x) var(--cpd-space-4x);\n}\n\n@media (hover) {\n  .control:hover ~ .digit {\n    border-color: var(--cpd-color-border-interactive-hovered);\n\n    /** TODO: have the shadow in the design tokens */\n    box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);\n  }\n}\n\n.control:disabled {\n  color: var(--cpd-color-text-disabled);\n  cursor: not-allowed;\n}\n\n.control:disabled ~ .digit {\n  box-shadow: none;\n  background: var(--cpd-color-bg-canvas-disabled);\n  border-color: var(--cpd-color-border-disabled);\n}\n\n.control[readonly] {\n  color: var(--cpd-color-text-secondary);\n}\n\n.control[readonly] ~ .digit {\n  box-shadow: none;\n  background: var(--cpd-color-bg-subtle-secondary);\n  border-color: var(--cpd-color-bg-subtle-secondary);\n}\n\n.control[data-invalid] ~ .digit {\n  border-color: var(--cpd-color-text-critical-primary);\n}\n\n.control:focus ~ .digit:not([data-filled]) {\n  outline: 2px solid var(--cpd-color-border-focused);\n  border-color: transparent;\n}\n\n.digit[data-selected] {\n  border-color: var(--cpd-color-border-focused);\n  background-color: var(--cpd-color-bg-info-subtle);\n}\n"],"mappings":""}
+{"version":3,"file":"MFA.module.cjs","names":[],"sources":["../../../../../src/components/Form/Controls/MFA/MFA.module.css"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\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.container {\n  --gap: var(--cpd-space-3x);\n  --digit-size: var(--cpd-space-10x);\n  --digit-height: var(--cpd-space-12x);\n\n  display: flex;\n  inline-size: fit-content;\n  flex-direction: row;\n  gap: var(--gap);\n\n  /* The input is positioned absolutely\n     so the container needs to be positioned relatively */\n  position: relative;\n}\n\n.control {\n  all: unset;\n\n  /** TODO: semantic token */\n  font-family: var(--cpd-font-family-mono), ui-monospace, monospace;\n  font-weight: 700;\n\n  /* Position the input to fill the container */\n  position: absolute;\n  inset: 0;\n\n  /* Spacing between digits is set to the gap\n     plus the size of one digit box\n     minus the size of one character */\n  letter-spacing: calc(var(--gap) + var(--digit-size) - 1ch);\n  line-height: var(--digit-height);\n\n  /* The padding at the start positions the first digit at the middle of the digit box */\n  padding-inline-start: calc(var(--cpd-space-10x) / 2 - (1ch / 2));\n\n  /* The negative margin at the end is to keep space for the cursor when the input is full */\n  margin-inline-end: calc(-1 * (var(--cpd-space-10x) + var(--cpd-space-3x)));\n}\n\n.digit {\n  box-sizing: border-box;\n  inline-size: var(--cpd-space-10x);\n  block-size: var(--cpd-space-12x);\n  border: 1px solid var(--cpd-color-border-interactive-primary);\n  background: var(--cpd-color-bg-canvas-default);\n  border-radius: 0.5rem;\n  padding: var(--cpd-space-3x) var(--cpd-space-4x);\n}\n\n@media (hover) {\n  .control:hover ~ .digit {\n    border-color: var(--cpd-color-border-interactive-hovered);\n\n    /** TODO: have the shadow in the design tokens */\n    box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);\n  }\n}\n\n.control:disabled {\n  color: var(--cpd-color-text-disabled);\n  cursor: not-allowed;\n}\n\n.control:disabled ~ .digit {\n  box-shadow: none;\n  background: var(--cpd-color-bg-canvas-disabled);\n  border-color: var(--cpd-color-border-disabled);\n}\n\n.control[readonly] {\n  color: var(--cpd-color-text-secondary);\n}\n\n.control[readonly] ~ .digit {\n  box-shadow: none;\n  background: var(--cpd-color-bg-subtle-secondary);\n  border-color: var(--cpd-color-bg-subtle-secondary);\n}\n\n.control[data-invalid] ~ .digit {\n  border-color: var(--cpd-color-text-critical-primary);\n}\n\n/* stylelint-disable-next-line defensive-css/require-focus-visible */\n.control:focus ~ .digit:not([data-filled]) {\n  outline: 2px solid var(--cpd-color-border-focused);\n  border-color: transparent;\n}\n\n.digit[data-selected] {\n  border-color: var(--cpd-color-border-focused);\n  background-color: var(--cpd-color-bg-info-subtle);\n}\n"],"mappings":""}

package/dist/components/Form/Controls/MFA/MFA.module.js

@@ -1,7 +1,7 @@
 var MFA_module_default = {
-	container: "_container_43om7_10",
-	control: "_control_43om7_25",
-	digit: "_digit_43om7_49"
+	container: "_container_17qhw_10",
+	control: "_control_17qhw_25",
+	digit: "_digit_17qhw_49"
 };
 //#endregion
 export { MFA_module_default as default };

package/dist/components/Form/Controls/MFA/MFA.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"MFA.module.js","names":[],"sources":["../../../../../src/components/Form/Controls/MFA/MFA.module.css"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\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.container {\n  --gap: var(--cpd-space-3x);\n  --digit-size: var(--cpd-space-10x);\n  --digit-height: var(--cpd-space-12x);\n\n  display: flex;\n  inline-size: fit-content;\n  flex-direction: row;\n  gap: var(--gap);\n\n  /* The input is positioned absolutely\n     so the container needs to be positioned relatively */\n  position: relative;\n}\n\n.control {\n  all: unset;\n\n  /** TODO: semantic token */\n  font-family: var(--cpd-font-family-mono), ui-monospace, monospace;\n  font-weight: 700;\n\n  /* Position the input to fill the container */\n  position: absolute;\n  inset: 0;\n\n  /* Spacing between digits is set to the gap\n     plus the size of one digit box\n     minus the size of one character */\n  letter-spacing: calc(var(--gap) + var(--digit-size) - 1ch);\n  line-height: var(--digit-height);\n\n  /* The padding at the start positions the first digit at the middle of the digit box */\n  padding-inline-start: calc(var(--cpd-space-10x) / 2 - (1ch / 2));\n\n  /* The negative margin at the end is to keep space for the cursor when the input is full */\n  margin-inline-end: calc(-1 * (var(--cpd-space-10x) + var(--cpd-space-3x)));\n}\n\n.digit {\n  box-sizing: border-box;\n  inline-size: var(--cpd-space-10x);\n  block-size: var(--cpd-space-12x);\n  border: 1px solid var(--cpd-color-border-interactive-primary);\n  background: var(--cpd-color-bg-canvas-default);\n  border-radius: 0.5rem;\n  padding: var(--cpd-space-3x) var(--cpd-space-4x);\n}\n\n@media (hover) {\n  .control:hover ~ .digit {\n    border-color: var(--cpd-color-border-interactive-hovered);\n\n    /** TODO: have the shadow in the design tokens */\n    box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);\n  }\n}\n\n.control:disabled {\n  color: var(--cpd-color-text-disabled);\n  cursor: not-allowed;\n}\n\n.control:disabled ~ .digit {\n  box-shadow: none;\n  background: var(--cpd-color-bg-canvas-disabled);\n  border-color: var(--cpd-color-border-disabled);\n}\n\n.control[readonly] {\n  color: var(--cpd-color-text-secondary);\n}\n\n.control[readonly] ~ .digit {\n  box-shadow: none;\n  background: var(--cpd-color-bg-subtle-secondary);\n  border-color: var(--cpd-color-bg-subtle-secondary);\n}\n\n.control[data-invalid] ~ .digit {\n  border-color: var(--cpd-color-text-critical-primary);\n}\n\n.control:focus ~ .digit:not([data-filled]) {\n  outline: 2px solid var(--cpd-color-border-focused);\n  border-color: transparent;\n}\n\n.digit[data-selected] {\n  border-color: var(--cpd-color-border-focused);\n  background-color: var(--cpd-color-bg-info-subtle);\n}\n"],"mappings":""}
+{"version":3,"file":"MFA.module.js","names":[],"sources":["../../../../../src/components/Form/Controls/MFA/MFA.module.css"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\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.container {\n  --gap: var(--cpd-space-3x);\n  --digit-size: var(--cpd-space-10x);\n  --digit-height: var(--cpd-space-12x);\n\n  display: flex;\n  inline-size: fit-content;\n  flex-direction: row;\n  gap: var(--gap);\n\n  /* The input is positioned absolutely\n     so the container needs to be positioned relatively */\n  position: relative;\n}\n\n.control {\n  all: unset;\n\n  /** TODO: semantic token */\n  font-family: var(--cpd-font-family-mono), ui-monospace, monospace;\n  font-weight: 700;\n\n  /* Position the input to fill the container */\n  position: absolute;\n  inset: 0;\n\n  /* Spacing between digits is set to the gap\n     plus the size of one digit box\n     minus the size of one character */\n  letter-spacing: calc(var(--gap) + var(--digit-size) - 1ch);\n  line-height: var(--digit-height);\n\n  /* The padding at the start positions the first digit at the middle of the digit box */\n  padding-inline-start: calc(var(--cpd-space-10x) / 2 - (1ch / 2));\n\n  /* The negative margin at the end is to keep space for the cursor when the input is full */\n  margin-inline-end: calc(-1 * (var(--cpd-space-10x) + var(--cpd-space-3x)));\n}\n\n.digit {\n  box-sizing: border-box;\n  inline-size: var(--cpd-space-10x);\n  block-size: var(--cpd-space-12x);\n  border: 1px solid var(--cpd-color-border-interactive-primary);\n  background: var(--cpd-color-bg-canvas-default);\n  border-radius: 0.5rem;\n  padding: var(--cpd-space-3x) var(--cpd-space-4x);\n}\n\n@media (hover) {\n  .control:hover ~ .digit {\n    border-color: var(--cpd-color-border-interactive-hovered);\n\n    /** TODO: have the shadow in the design tokens */\n    box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);\n  }\n}\n\n.control:disabled {\n  color: var(--cpd-color-text-disabled);\n  cursor: not-allowed;\n}\n\n.control:disabled ~ .digit {\n  box-shadow: none;\n  background: var(--cpd-color-bg-canvas-disabled);\n  border-color: var(--cpd-color-border-disabled);\n}\n\n.control[readonly] {\n  color: var(--cpd-color-text-secondary);\n}\n\n.control[readonly] ~ .digit {\n  box-shadow: none;\n  background: var(--cpd-color-bg-subtle-secondary);\n  border-color: var(--cpd-color-bg-subtle-secondary);\n}\n\n.control[data-invalid] ~ .digit {\n  border-color: var(--cpd-color-text-critical-primary);\n}\n\n/* stylelint-disable-next-line defensive-css/require-focus-visible */\n.control:focus ~ .digit:not([data-filled]) {\n  outline: 2px solid var(--cpd-color-border-focused);\n  border-color: transparent;\n}\n\n.digit[data-selected] {\n  border-color: var(--cpd-color-border-focused);\n  background-color: var(--cpd-color-bg-info-subtle);\n}\n"],"mappings":""}

package/dist/components/Form/Controls/Password/Password.cjs

@@ -1,13 +1,13 @@
 const require_runtime = require("../../../../_virtual/_rolldown/runtime.cjs");
 const require_Action = require("../Action/Action.cjs");
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _radix_ui_react_form = require("@radix-ui/react-form");
 let _vector_im_compound_design_tokens_assets_web_icons_visibility_on = require("@vector-im/compound-design-tokens/assets/web/icons/visibility-on");
-_vector_im_compound_design_tokens_assets_web_icons_visibility_on = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_visibility_on);
+_vector_im_compound_design_tokens_assets_web_icons_visibility_on = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_visibility_on, 1);
 let _vector_im_compound_design_tokens_assets_web_icons_visibility_off = require("@vector-im/compound-design-tokens/assets/web/icons/visibility-off");
-_vector_im_compound_design_tokens_assets_web_icons_visibility_off = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_visibility_off);
+_vector_im_compound_design_tokens_assets_web_icons_visibility_off = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_visibility_off, 1);
 //#region src/components/Form/Controls/Password/Password.tsx
 var showState = {
 	isHidden: true,

package/dist/components/Form/Controls/Radio/Radio.cjs

@@ -1,9 +1,9 @@
 const require_runtime = require("../../../../_virtual/_rolldown/runtime.cjs");
 const require_Radio_module = require("./Radio.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 _radix_ui_react_form = require("@radix-ui/react-form");
 //#region src/components/Form/Controls/Radio/Radio.tsx

package/dist/components/Form/Controls/SettingsToggle/SettingsToggle.cjs

@@ -4,7 +4,7 @@ const require_Label = require("../../Label.cjs");
 const require_Message = require("../../Message.cjs");
 const require_InlineField = require("../../InlineField.cjs");
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _radix_ui_react_form = require("@radix-ui/react-form");
 //#region src/components/Form/Controls/SettingsToggle/SettingsToggle.tsx