@vector-im/compound-web 9.0.1 → 9.2.0

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

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

@@ -1,9 +1,9 @@
 const require_runtime = require("../../../../_virtual/_rolldown/runtime.cjs");
 const require_Text_module = require("./Text.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/Text/Text.tsx

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

@@ -1,6 +1,6 @@
 var Text_module_default = {
-	control: "_control_sqdq4_10",
-	"enable-ligatures": "_enable-ligatures_sqdq4_62"
+	control: "_control_d83jn_10",
+	"enable-ligatures": "_enable-ligatures_d83jn_63"
 };
 //#endregion
 exports.default = Text_module_default;

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

@@ -1 +1 @@
-{"version":3,"file":"Text.module.cjs","names":[],"sources":["../../../../../src/components/Form/Controls/Text/Text.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.control {\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  box-sizing: border-box;\n\n  /**\n  * Disable contextual alternate ligatures in inputs\n  * https://github.com/rsms/inter/issues/222\n  * https://github.com/rsms/inter/blob/master/src/features/calt.fea\n  */\n  font-feature-settings: \"calt\" 0;\n}\n\n@media (hover) {\n  .control:hover {\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:active {\n  border-color: var(--cpd-color-border-interactive-hovered);\n}\n\n.control:focus {\n  outline: 2px solid var(--cpd-color-border-focused);\n  border-color: transparent;\n}\n\n.control[data-invalid] {\n  border-color: var(--cpd-color-text-critical-primary);\n}\n\n.control:disabled {\n  box-shadow: none;\n  background: var(--cpd-color-bg-canvas-disabled);\n  border-color: var(--cpd-color-border-disabled);\n  color: var(--cpd-color-text-disabled);\n  cursor: not-allowed;\n}\n\n.control[readonly] {\n  box-shadow: none;\n  background: var(--cpd-color-bg-subtle-secondary);\n  border-color: var(--cpd-color-bg-subtle-secondary);\n  color: var(--cpd-color-text-secondary);\n}\n\n.control.enable-ligatures {\n  font-feature-settings: var(--cpd-font-feature-settings);\n}\n"],"mappings":""}
+{"version":3,"file":"Text.module.cjs","names":[],"sources":["../../../../../src/components/Form/Controls/Text/Text.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.control {\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  box-sizing: border-box;\n\n  /**\n  * Disable contextual alternate ligatures in inputs\n  * https://github.com/rsms/inter/issues/222\n  * https://github.com/rsms/inter/blob/master/src/features/calt.fea\n  */\n  font-feature-settings: \"calt\" 0;\n}\n\n@media (hover) {\n  .control:hover {\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:active {\n  border-color: var(--cpd-color-border-interactive-hovered);\n}\n\n/* stylelint-disable-next-line defensive-css/require-focus-visible */\n.control:focus {\n  outline: 2px solid var(--cpd-color-border-focused);\n  border-color: transparent;\n}\n\n.control[data-invalid] {\n  border-color: var(--cpd-color-text-critical-primary);\n}\n\n.control:disabled {\n  box-shadow: none;\n  background: var(--cpd-color-bg-canvas-disabled);\n  border-color: var(--cpd-color-border-disabled);\n  color: var(--cpd-color-text-disabled);\n  cursor: not-allowed;\n}\n\n.control[readonly] {\n  box-shadow: none;\n  background: var(--cpd-color-bg-subtle-secondary);\n  border-color: var(--cpd-color-bg-subtle-secondary);\n  color: var(--cpd-color-text-secondary);\n}\n\n.control.enable-ligatures {\n  font-feature-settings: var(--cpd-font-feature-settings);\n}\n"],"mappings":""}

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

@@ -1,6 +1,6 @@
 var Text_module_default = {
-	control: "_control_sqdq4_10",
-	"enable-ligatures": "_enable-ligatures_sqdq4_62"
+	control: "_control_d83jn_10",
+	"enable-ligatures": "_enable-ligatures_d83jn_63"
 };
 //#endregion
 export { Text_module_default as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Text.module.js","names":[],"sources":["../../../../../src/components/Form/Controls/Text/Text.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.control {\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  box-sizing: border-box;\n\n  /**\n  * Disable contextual alternate ligatures in inputs\n  * https://github.com/rsms/inter/issues/222\n  * https://github.com/rsms/inter/blob/master/src/features/calt.fea\n  */\n  font-feature-settings: \"calt\" 0;\n}\n\n@media (hover) {\n  .control:hover {\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:active {\n  border-color: var(--cpd-color-border-interactive-hovered);\n}\n\n.control:focus {\n  outline: 2px solid var(--cpd-color-border-focused);\n  border-color: transparent;\n}\n\n.control[data-invalid] {\n  border-color: var(--cpd-color-text-critical-primary);\n}\n\n.control:disabled {\n  box-shadow: none;\n  background: var(--cpd-color-bg-canvas-disabled);\n  border-color: var(--cpd-color-border-disabled);\n  color: var(--cpd-color-text-disabled);\n  cursor: not-allowed;\n}\n\n.control[readonly] {\n  box-shadow: none;\n  background: var(--cpd-color-bg-subtle-secondary);\n  border-color: var(--cpd-color-bg-subtle-secondary);\n  color: var(--cpd-color-text-secondary);\n}\n\n.control.enable-ligatures {\n  font-feature-settings: var(--cpd-font-feature-settings);\n}\n"],"mappings":""}
+{"version":3,"file":"Text.module.js","names":[],"sources":["../../../../../src/components/Form/Controls/Text/Text.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.control {\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  box-sizing: border-box;\n\n  /**\n  * Disable contextual alternate ligatures in inputs\n  * https://github.com/rsms/inter/issues/222\n  * https://github.com/rsms/inter/blob/master/src/features/calt.fea\n  */\n  font-feature-settings: \"calt\" 0;\n}\n\n@media (hover) {\n  .control:hover {\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:active {\n  border-color: var(--cpd-color-border-interactive-hovered);\n}\n\n/* stylelint-disable-next-line defensive-css/require-focus-visible */\n.control:focus {\n  outline: 2px solid var(--cpd-color-border-focused);\n  border-color: transparent;\n}\n\n.control[data-invalid] {\n  border-color: var(--cpd-color-text-critical-primary);\n}\n\n.control:disabled {\n  box-shadow: none;\n  background: var(--cpd-color-bg-canvas-disabled);\n  border-color: var(--cpd-color-border-disabled);\n  color: var(--cpd-color-text-disabled);\n  cursor: not-allowed;\n}\n\n.control[readonly] {\n  box-shadow: none;\n  background: var(--cpd-color-bg-subtle-secondary);\n  border-color: var(--cpd-color-bg-subtle-secondary);\n  color: var(--cpd-color-text-secondary);\n}\n\n.control.enable-ligatures {\n  font-feature-settings: var(--cpd-font-feature-settings);\n}\n"],"mappings":""}

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

@@ -1,9 +1,9 @@
 const require_runtime = require("../../../../_virtual/_rolldown/runtime.cjs");
 const require_Toggle_module = require("./Toggle.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/Toggle/Toggle.tsx

package/dist/components/Form/Field.cjs

@@ -1,9 +1,9 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_form_module = require("./form.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/Field.tsx

package/dist/components/Form/InlineField.cjs

@@ -1,9 +1,9 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_form_module = require("./form.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/InlineField.tsx

package/dist/components/Form/Label.cjs

@@ -1,9 +1,9 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_form_module = require("./form.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/Label.tsx

package/dist/components/Form/Message.cjs

@@ -2,15 +2,15 @@ const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_form_module = require("./form.module.cjs");
 const require_InlineSpinner = require("../InlineSpinner/InlineSpinner.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 _radix_ui_react_form = require("@radix-ui/react-form");
 let _vector_im_compound_design_tokens_assets_web_icons_check_circle_solid = require("@vector-im/compound-design-tokens/assets/web/icons/check-circle-solid");
-_vector_im_compound_design_tokens_assets_web_icons_check_circle_solid = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_check_circle_solid);
+_vector_im_compound_design_tokens_assets_web_icons_check_circle_solid = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_check_circle_solid, 1);
 //#region src/components/Form/Message.tsx
 /**
 * An error message to display below a form control.

package/dist/components/Form/Root.cjs

@@ -1,9 +1,9 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_form_module = require("./form.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/Root.tsx

package/dist/components/Form/Submit.cjs

@@ -1,7 +1,7 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_Button = require("../Button/Button.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/Submit.tsx

package/dist/components/Form/form.module.cjs

@@ -1,16 +1,11 @@
-//#region src/components/Form/form.module.css
-var root = "_root_19upo_16";
-var field = "_field_19upo_26";
-var label = "_label_19upo_59";
-var message = "_message_19upo_85";
 var form_module_default = {
-	root,
-	field,
+	root: "_root_19upo_16",
+	field: "_field_19upo_26",
 	"inline-field": "_inline-field_19upo_32",
 	"inline-field-body": "_inline-field-body_19upo_38",
 	"inline-field-control": "_inline-field-control_19upo_44",
-	label,
-	message,
+	label: "_label_19upo_59",
+	message: "_message_19upo_85",
 	"help-message": "_help-message_19upo_91",
 	"error-message": "_error-message_19upo_95",
 	"success-message": "_success-message_19upo_99"

package/dist/components/Form/form.module.js

@@ -1,16 +1,11 @@
-//#region src/components/Form/form.module.css
-var root = "_root_19upo_16";
-var field = "_field_19upo_26";
-var label = "_label_19upo_59";
-var message = "_message_19upo_85";
 var form_module_default = {
-	root,
-	field,
+	root: "_root_19upo_16",
+	field: "_field_19upo_26",
 	"inline-field": "_inline-field_19upo_32",
 	"inline-field-body": "_inline-field-body_19upo_38",
 	"inline-field-control": "_inline-field-control_19upo_44",
-	label,
-	message,
+	label: "_label_19upo_59",
+	message: "_message_19upo_85",
 	"help-message": "_help-message_19upo_91",
 	"error-message": "_error-message_19upo_95",
 	"success-message": "_success-message_19upo_99"

package/dist/components/Glass/Glass.cjs

@@ -1,9 +1,9 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_Glass_module = require("./Glass.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/Glass/Glass.tsx
 /**

package/dist/components/Icon/BigIcon/BigIcon.cjs

@@ -1,9 +1,9 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
 const require_BigIcon_module = require("./BigIcon.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/Icon/BigIcon/BigIcon.tsx
 function BigIcon({ className, size = "lg", kind = "primary", children }) {

package/dist/components/Icon/IndicatorIcon/IndicatorIcon.cjs

@@ -1,9 +1,9 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
 const require_IndicatorIcon_module = require("./IndicatorIcon.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/Icon/IndicatorIcon/IndicatorIcon.tsx
 var IndicatorIcon = (0, react.forwardRef)(function IconButton({ children, className, size = "100%", colour, indicator }, ref) {

package/dist/components/InlineSpinner/InlineSpinner.cjs

@@ -1,12 +1,12 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_InlineSpinner_module = require("./InlineSpinner.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_spinner = require("@vector-im/compound-design-tokens/assets/web/icons/spinner");
-_vector_im_compound_design_tokens_assets_web_icons_spinner = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_spinner);
+_vector_im_compound_design_tokens_assets_web_icons_spinner = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_spinner, 1);
 //#region src/components/InlineSpinner/InlineSpinner.tsx
 var InlineSpinner = (0, react.forwardRef)(function InlineSpinner({ size = 20, className, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_vector_im_compound_design_tokens_assets_web_icons_spinner.default, {

package/dist/components/InlineSpinner/InlineSpinner.module.cjs

@@ -1,6 +1,6 @@
 var InlineSpinner_module_default = {
-	icon: "_icon_11k6c_18",
-	spin: "_spin_11k6c_1"
+	icon: "_icon_1855a_18",
+	spin: "_spin_1855a_1"
 };
 //#endregion
 exports.default = InlineSpinner_module_default;

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

@@ -1 +1 @@
-{"version":3,"file":"InlineSpinner.module.cjs","names":[],"sources":["../../../src/components/InlineSpinner/InlineSpinner.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@keyframes spin {\n  from {\n    transform: rotateZ(0deg);\n  }\n\n  to {\n    transform: rotateZ(360deg);\n  }\n}\n\n.icon {\n  color: var(--cpd-color-icon-secondary);\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  inline-size: 100%;\n  block-size: 100%;\n  animation: 1s linear spin infinite;\n}\n"],"mappings":""}
+{"version":3,"file":"InlineSpinner.module.cjs","names":[],"sources":["../../../src/components/InlineSpinner/InlineSpinner.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@keyframes spin {\n  from {\n    transform: rotateZ(0deg);\n  }\n\n  to {\n    transform: rotateZ(360deg);\n  }\n}\n\n.icon {\n  color: var(--cpd-color-icon-secondary);\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  inline-size: 100%;\n  block-size: 100%;\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation: 1s linear spin infinite;\n  }\n}\n"],"mappings":""}

package/dist/components/InlineSpinner/InlineSpinner.module.js

@@ -1,6 +1,6 @@
 var InlineSpinner_module_default = {
-	icon: "_icon_11k6c_18",
-	spin: "_spin_11k6c_1"
+	icon: "_icon_1855a_18",
+	spin: "_spin_1855a_1"
 };
 //#endregion
 export { InlineSpinner_module_default as default };

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

@@ -1 +1 @@
-{"version":3,"file":"InlineSpinner.module.js","names":[],"sources":["../../../src/components/InlineSpinner/InlineSpinner.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@keyframes spin {\n  from {\n    transform: rotateZ(0deg);\n  }\n\n  to {\n    transform: rotateZ(360deg);\n  }\n}\n\n.icon {\n  color: var(--cpd-color-icon-secondary);\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  inline-size: 100%;\n  block-size: 100%;\n  animation: 1s linear spin infinite;\n}\n"],"mappings":""}
+{"version":3,"file":"InlineSpinner.module.js","names":[],"sources":["../../../src/components/InlineSpinner/InlineSpinner.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@keyframes spin {\n  from {\n    transform: rotateZ(0deg);\n  }\n\n  to {\n    transform: rotateZ(360deg);\n  }\n}\n\n.icon {\n  color: var(--cpd-color-icon-secondary);\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  inline-size: 100%;\n  block-size: 100%;\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation: 1s linear spin infinite;\n  }\n}\n"],"mappings":""}

package/dist/components/Link/Link.cjs

@@ -1,9 +1,9 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_Link_module = require("./Link.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/Link/Link.tsx
 /**

package/dist/components/Menu/CheckboxMenuItem.cjs

@@ -2,7 +2,7 @@ const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_MenuItem = require("./MenuItem.cjs");
 const require_Checkbox = require("../Form/Controls/Checkbox/Checkbox.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/Menu/CheckboxMenuItem.tsx
 /**
@@ -10,8 +10,6 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.
 */
 var CheckboxMenuItem = (0, react.forwardRef)(function CheckboxMenuItem({ className, label, onSelect, checked, disabled }, ref) {
-	const toggleId = (0, react.useId)();
-	const onChange = (0, react.useCallback)(() => {}, []);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuItem, {
 		as: "button",
 		role: "menuitemcheckbox",
@@ -22,13 +20,13 @@ var CheckboxMenuItem = (0, react.forwardRef)(function CheckboxMenuItem({ classNa
 		onSelect,
 		disabled,
 		Icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.CheckboxInput, {
-			id: toggleId,
+			id: (0, react.useId)(),
 			ref,
 			"aria-hidden": true,
 			tabIndex: -1,
 			checked,
 			disabled,
-			onChange
+			onChange: (0, react.useCallback)(() => {}, [])
 		})
 	});
 });

package/dist/components/Menu/CheckboxMenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxMenuItem.cjs","names":[],"sources":["../../../src/components/Menu/CheckboxMenuItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { CheckboxInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the checkbox is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a checkbox control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const CheckboxMenuItem = forwardRef<HTMLInputElement, Props>(\n  function CheckboxMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The checkbox is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a <button> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"button\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        hideChevron\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <CheckboxInput\n            id={toggleId}\n            ref={ref}\n            // This is purely cosmetic; really the whole MenuItem is the toggle.\n            aria-hidden\n            tabIndex={-1}\n            checked={checked}\n            disabled={disabled}\n            onChange={onChange}\n          />\n        }\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;AA8BA,IAAa,oBAAA,GAAA,MAAA,YACX,SAAS,iBACP,EAAE,WAAW,OAAO,UAAU,SAAS,YACvC,KACA;CACA,MAAM,YAAA,GAAA,MAAA,QAAkB;CAGxB,MAAM,YAAA,GAAA,MAAA,mBAA6B,IAAI,EAAE,CAAC;AAK1C,QACE,iBAAA,GAAA,kBAAA,KAAC,iBAAA,UAAD;EACE,IAAG;EACH,MAAK;EACL,gBAAc;EACH;EACJ;EACP,aAAA;EACU;EACA;EACV,MACE,iBAAA,GAAA,kBAAA,KAAC,iBAAA,eAAD;GACE,IAAI;GACC;GAEL,eAAA;GACA,UAAU;GACD;GACC;GACA;GACV,CAAA;EAEJ,CAAA;EAGP"}
+{"version":3,"file":"CheckboxMenuItem.cjs","names":[],"sources":["../../../src/components/Menu/CheckboxMenuItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { CheckboxInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the checkbox is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a checkbox control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const CheckboxMenuItem = forwardRef<HTMLInputElement, Props>(\n  function CheckboxMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The checkbox is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a <button> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"button\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        hideChevron\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <CheckboxInput\n            id={toggleId}\n            ref={ref}\n            // This is purely cosmetic; really the whole MenuItem is the toggle.\n            aria-hidden\n            tabIndex={-1}\n            checked={checked}\n            disabled={disabled}\n            onChange={onChange}\n          />\n        }\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;AA8BA,IAAa,oBAAA,GAAA,MAAA,YACX,SAAS,iBACP,EAAE,WAAW,OAAO,UAAU,SAAS,YACvC,KACA;AASA,QACE,iBAAA,GAAA,kBAAA,KAAC,iBAAA,UAAD;EACE,IAAG;EACH,MAAK;EACL,gBAAc;EACH;EACJ;EACP,aAAA;EACU;EACA;EACV,MACE,iBAAA,GAAA,kBAAA,KAAC,iBAAA,eAAD;GACE,KAAA,GAAA,MAAA,QApBgB;GAqBX;GAEL,eAAA;GACA,UAAU;GACD;GACC;GACA,WAAA,GAAA,MAAA,mBAxBiB,IAAI,EAAE,CAAC;GAyBlC,CAAA;EAEJ,CAAA;EAGP"}