@vector-im/compound-web 8.4.0 → 9.0.0

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

@@ -1,69 +1,60 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import React, { forwardRef } from "react";
-import styles from "./MFA.module.css.js";
+import MFA_module_default from "./MFA.module.js";
 import classNames from "classnames";
+import React, { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Control } from "@radix-ui/react-form";
-const Digit = ({ filled, selected }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: styles.digit,
-    "aria-hidden": "true",
-    "data-filled": filled ? "" : void 0,
-    "data-selected": selected ? "" : void 0
-  }
-);
-const MFAInput = forwardRef(function MFAInput2({ className, length = 6, ...props }, ref) {
-  const classes = classNames(styles.container, className);
-  const [currentLength, setCurrentLength] = React.useState(0);
-  const [selection, setSelection] = React.useState(
-    null
-  );
-  const update = (event) => {
-    const input = event.currentTarget;
-    setCurrentLength(input.value?.length);
-    if (document.activeElement !== input || input.selectionStart === null || input.selectionEnd === null) {
-      setSelection(null);
-    } else {
-      setSelection([input.selectionStart, input.selectionEnd]);
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ...props,
-        inputMode: "numeric",
-        type: "text",
-        minLength: 0,
-        maxLength: length,
-        className: styles.control,
-        pattern: `\\d{${length}}`,
-        autoComplete: "one-time-code",
-        onSelect: update,
-        onFocus: update,
-        onBlur: update,
-        onMouseDown: update,
-        onMouseMove: update,
-        onMouseUp: update,
-        onChange: update,
-        ref
-      }
-    ),
-    Array.from(Array(length).keys()).map((index) => /* @__PURE__ */ jsx(
-      Digit,
-      {
-        filled: index < currentLength,
-        selected: !!selection && index >= selection[0] && index < selection[1]
-      },
-      index
-    ))
-  ] });
+//#region src/components/Form/Controls/MFA/MFA.tsx
+var Digit = ({ filled, selected }) => /* @__PURE__ */ jsx("div", {
+	className: MFA_module_default.digit,
+	"aria-hidden": "true",
+	"data-filled": filled ? "" : void 0,
+	"data-selected": selected ? "" : void 0
+});
+var MFAInput = forwardRef(function MFAInput({ className, length = 6, ...props }, ref) {
+	const classes = classNames(MFA_module_default.container, className);
+	const [currentLength, setCurrentLength] = React.useState(0);
+	const [selection, setSelection] = React.useState(null);
+	const update = (event) => {
+		const input = event.currentTarget;
+		setCurrentLength(input.value?.length);
+		if (document.activeElement !== input || input.selectionStart === null || input.selectionEnd === null) setSelection(null);
+		else setSelection([input.selectionStart, input.selectionEnd]);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes,
+		children: [/* @__PURE__ */ jsx("input", {
+			...props,
+			inputMode: "numeric",
+			type: "text",
+			minLength: 0,
+			maxLength: length,
+			className: MFA_module_default.control,
+			pattern: `\\d{${length}}`,
+			autoComplete: "one-time-code",
+			onSelect: update,
+			onFocus: update,
+			onBlur: update,
+			onMouseDown: update,
+			onMouseMove: update,
+			onMouseUp: update,
+			onChange: update,
+			ref
+		}), Array.from(Array(length).keys()).map((index) => /* @__PURE__ */ jsx(Digit, {
+			filled: index < currentLength,
+			selected: !!selection && index >= selection[0] && index < selection[1]
+		}, index))]
+	});
 });
-const MFAControl = forwardRef(function ActionControl(props, ref) {
-  return /* @__PURE__ */ jsx(Control, { asChild: true, children: /* @__PURE__ */ jsx(MFAInput, { ref, ...props }) });
+var MFAControl = forwardRef(function ActionControl(props, ref) {
+	return /* @__PURE__ */ jsx(Control, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(MFAInput, {
+			ref,
+			...props
+		})
+	});
 });
-export {
-  MFAControl,
-  MFAInput
-};
-//# sourceMappingURL=MFA.js.map
+//#endregion
+export { MFAControl, MFAInput };
+
+//# sourceMappingURL=MFA.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MFA.js","sources":["../../../../../src/components/Form/Controls/MFA/MFA.tsx"],"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\nimport React, {\n  type ComponentProps,\n  type ComponentRef,\n  forwardRef,\n  type PropsWithoutRef,\n} from \"react\";\n\nimport styles from \"./MFA.module.css\";\nimport classNames from \"classnames\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype DigitProps = {\n  filled: boolean;\n  selected: boolean;\n};\n\nconst Digit: React.FC<DigitProps> = ({ filled, selected }) => (\n  <div\n    className={styles.digit}\n    aria-hidden=\"true\"\n    data-filled={filled ? \"\" : undefined}\n    data-selected={selected ? \"\" : undefined}\n  />\n);\n\ntype MFAProps = {\n  className?: string;\n  length?: number;\n  disabled?: boolean;\n} & Omit<\n  React.ComponentProps<\"input\">,\n  \"type\" | \"inputMode\" | \"pattern\" | \"autoComplete\"\n>;\n\nexport const MFAInput = forwardRef(function MFAInput(\n  { className, length = 6, ...props }: PropsWithoutRef<MFAProps>,\n  ref: React.ForwardedRef<HTMLInputElement>,\n) {\n  const classes = classNames(styles.container, className);\n  const [currentLength, setCurrentLength] = React.useState(0);\n  const [selection, setSelection] = React.useState<null | [number, number]>(\n    null,\n  );\n\n  const update = (event: React.SyntheticEvent<HTMLInputElement>) => {\n    const input = event.currentTarget;\n    setCurrentLength(input.value?.length);\n\n    if (\n      document.activeElement !== input ||\n      input.selectionStart === null ||\n      input.selectionEnd === null\n    ) {\n      setSelection(null);\n    } else {\n      setSelection([input.selectionStart, input.selectionEnd]);\n    }\n  };\n\n  return (\n    <div className={classes}>\n      <input\n        {...props}\n        inputMode=\"numeric\"\n        // Showing digits on mobile browsers. Using numbers is not really suited\n        // as it often adds a way to increment or decrement the current value\n        // which is not interesting for this use case\n        type=\"text\"\n        minLength={0}\n        maxLength={length}\n        className={styles.control}\n        pattern={`\\\\d{${length}}`}\n        autoComplete=\"one-time-code\"\n        onSelect={update}\n        onFocus={update}\n        onBlur={update}\n        onMouseDown={update}\n        onMouseMove={update}\n        onMouseUp={update}\n        onChange={update}\n        ref={ref}\n      />\n      {Array.from(Array(length).keys()).map((index) => (\n        <Digit\n          key={index}\n          filled={index < currentLength}\n          selected={\n            !!selection && index >= selection[0] && index < selection[1]\n          }\n        />\n      ))}\n    </div>\n  );\n});\n\nexport const MFAControl = forwardRef<\n  ComponentRef<typeof MFAInput>,\n  ComponentProps<typeof MFAInput>\n>(function ActionControl(props, ref) {\n  return (\n    <Control asChild>\n      <MFAInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":["MFAInput"],"mappings":";;;;;AAyBA,MAAM,QAA8B,CAAC,EAAE,QAAQ,eAC7C;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,OAAO;AAAA,IAClB,eAAY;AAAA,IACZ,eAAa,SAAS,KAAK;AAAA,IAC3B,iBAAe,WAAW,KAAK;AAAA,EAAA;AACjC;AAYK,MAAM,WAAW,WAAW,SAASA,UAC1C,EAAE,WAAW,SAAS,GAAG,GAAG,MAAA,GAC5B,KACA;AACA,QAAM,UAAU,WAAW,OAAO,WAAW,SAAS;AACtD,QAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAS,CAAC;AAC1D,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM;AAAA,IACtC;AAAA,EAAA;AAGF,QAAM,SAAS,CAAC,UAAkD;AAChE,UAAM,QAAQ,MAAM;AACpB,qBAAiB,MAAM,OAAO,MAAM;AAEpC,QACE,SAAS,kBAAkB,SAC3B,MAAM,mBAAmB,QACzB,MAAM,iBAAiB,MACvB;AACA,mBAAa,IAAI;AAAA,IACnB,OAAO;AACL,mBAAa,CAAC,MAAM,gBAAgB,MAAM,YAAY,CAAC;AAAA,IACzD;AAAA,EACF;AAEA,SACE,qBAAC,OAAA,EAAI,WAAW,SACd,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAU;AAAA,QAIV,MAAK;AAAA,QACL,WAAW;AAAA,QACX,WAAW;AAAA,QACX,WAAW,OAAO;AAAA,QAClB,SAAS,OAAO,MAAM;AAAA,QACtB,cAAa;AAAA,QACb,UAAU;AAAA,QACV,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,aAAa;AAAA,QACb,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,MAAA;AAAA,IAAA;AAAA,IAED,MAAM,KAAK,MAAM,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,UACrC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,QAAQ,QAAQ;AAAA,QAChB,UACE,CAAC,CAAC,aAAa,SAAS,UAAU,CAAC,KAAK,QAAQ,UAAU,CAAC;AAAA,MAAA;AAAA,MAHxD;AAAA,IAAA,CAMR;AAAA,EAAA,GACH;AAEJ,CAAC;AAEM,MAAM,aAAa,WAGxB,SAAS,cAAc,OAAO,KAAK;AACnC,SACE,oBAAC,WAAQ,SAAO,MACd,8BAAC,UAAA,EAAS,KAAW,GAAG,MAAA,CAAO,EAAA,CACjC;AAEJ,CAAC;"}
+{"version":3,"file":"MFA.js","names":[],"sources":["../../../../../src/components/Form/Controls/MFA/MFA.tsx"],"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\nimport React, {\n  type ComponentProps,\n  type ComponentRef,\n  forwardRef,\n  type PropsWithoutRef,\n} from \"react\";\n\nimport styles from \"./MFA.module.css\";\nimport classNames from \"classnames\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype DigitProps = {\n  filled: boolean;\n  selected: boolean;\n};\n\nconst Digit: React.FC<DigitProps> = ({ filled, selected }) => (\n  <div\n    className={styles.digit}\n    aria-hidden=\"true\"\n    data-filled={filled ? \"\" : undefined}\n    data-selected={selected ? \"\" : undefined}\n  />\n);\n\ntype MFAProps = {\n  className?: string;\n  length?: number;\n  disabled?: boolean;\n} & Omit<\n  React.ComponentProps<\"input\">,\n  \"type\" | \"inputMode\" | \"pattern\" | \"autoComplete\"\n>;\n\nexport const MFAInput = forwardRef(function MFAInput(\n  { className, length = 6, ...props }: PropsWithoutRef<MFAProps>,\n  ref: React.ForwardedRef<HTMLInputElement>,\n) {\n  const classes = classNames(styles.container, className);\n  const [currentLength, setCurrentLength] = React.useState(0);\n  const [selection, setSelection] = React.useState<null | [number, number]>(\n    null,\n  );\n\n  const update = (event: React.SyntheticEvent<HTMLInputElement>) => {\n    const input = event.currentTarget;\n    setCurrentLength(input.value?.length);\n\n    if (\n      document.activeElement !== input ||\n      input.selectionStart === null ||\n      input.selectionEnd === null\n    ) {\n      setSelection(null);\n    } else {\n      setSelection([input.selectionStart, input.selectionEnd]);\n    }\n  };\n\n  return (\n    <div className={classes}>\n      <input\n        {...props}\n        inputMode=\"numeric\"\n        // Showing digits on mobile browsers. Using numbers is not really suited\n        // as it often adds a way to increment or decrement the current value\n        // which is not interesting for this use case\n        type=\"text\"\n        minLength={0}\n        maxLength={length}\n        className={styles.control}\n        pattern={`\\\\d{${length}}`}\n        autoComplete=\"one-time-code\"\n        onSelect={update}\n        onFocus={update}\n        onBlur={update}\n        onMouseDown={update}\n        onMouseMove={update}\n        onMouseUp={update}\n        onChange={update}\n        ref={ref}\n      />\n      {Array.from(Array(length).keys()).map((index) => (\n        <Digit\n          key={index}\n          filled={index < currentLength}\n          selected={\n            !!selection && index >= selection[0] && index < selection[1]\n          }\n        />\n      ))}\n    </div>\n  );\n});\n\nexport const MFAControl = forwardRef<\n  ComponentRef<typeof MFAInput>,\n  ComponentProps<typeof MFAInput>\n>(function ActionControl(props, ref) {\n  return (\n    <Control asChild>\n      <MFAInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"mappings":";;;;;;AAyBA,IAAM,SAA+B,EAAE,QAAQ,eAC7C,oBAAC,OAAD;CACE,WAAW,mBAAO;CAClB,eAAY;CACZ,eAAa,SAAS,KAAK,KAAA;CAC3B,iBAAe,WAAW,KAAK,KAAA;CAC/B,CAAA;AAYJ,IAAa,WAAW,WAAW,SAAS,SAC1C,EAAE,WAAW,SAAS,GAAG,GAAG,SAC5B,KACA;CACA,MAAM,UAAU,WAAW,mBAAO,WAAW,UAAU;CACvD,MAAM,CAAC,eAAe,oBAAoB,MAAM,SAAS,EAAE;CAC3D,MAAM,CAAC,WAAW,gBAAgB,MAAM,SACtC,KACD;CAED,MAAM,UAAU,UAAkD;EAChE,MAAM,QAAQ,MAAM;AACpB,mBAAiB,MAAM,OAAO,OAAO;AAErC,MACE,SAAS,kBAAkB,SAC3B,MAAM,mBAAmB,QACzB,MAAM,iBAAiB,KAEvB,cAAa,KAAK;MAElB,cAAa,CAAC,MAAM,gBAAgB,MAAM,aAAa,CAAC;;AAI5D,QACE,qBAAC,OAAD;EAAK,WAAW;YAAhB,CACE,oBAAC,SAAD;GACE,GAAI;GACJ,WAAU;GAIV,MAAK;GACL,WAAW;GACX,WAAW;GACX,WAAW,mBAAO;GAClB,SAAS,OAAO,OAAO;GACvB,cAAa;GACb,UAAU;GACV,SAAS;GACT,QAAQ;GACR,aAAa;GACb,aAAa;GACb,WAAW;GACX,UAAU;GACL;GACL,CAAA,EACD,MAAM,KAAK,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC,KAAK,UACrC,oBAAC,OAAD;GAEE,QAAQ,QAAQ;GAChB,UACE,CAAC,CAAC,aAAa,SAAS,UAAU,MAAM,QAAQ,UAAU;GAE5D,EALK,MAKL,CACF,CACE;;EAER;AAEF,IAAa,aAAa,WAGxB,SAAS,cAAc,OAAO,KAAK;AACnC,QACE,oBAAC,SAAD;EAAS,SAAA;YACP,oBAAC,UAAD;GAAe;GAAK,GAAI;GAAS,CAAA;EACzB,CAAA;EAEZ"}

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

@@ -0,0 +1,9 @@
+var MFA_module_default = {
+	container: "_container_43om7_10",
+	control: "_control_43om7_25",
+	digit: "_digit_43om7_49"
+};
+//#endregion
+exports.default = MFA_module_default;
+
+//# sourceMappingURL=MFA.module.cjs.map

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,9 @@
+var MFA_module_default = {
+	container: "_container_43om7_10",
+	control: "_control_43om7_25",
+	digit: "_digit_43om7_49"
+};
+//#endregion
+export { MFA_module_default as default };
+
+//# sourceMappingURL=MFA.module.js.map

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

@@ -0,0 +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":""}

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

@@ -1,43 +1,58 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const reactForm = require("@radix-ui/react-form");
-const VisibilityOn = require("@vector-im/compound-design-tokens/assets/web/icons/visibility-on");
-const VisibilityOff = require("@vector-im/compound-design-tokens/assets/web/icons/visibility-off");
-const Action = require("../Action/Action.cjs");
-const showState = {
-  isHidden: true,
-  icon: VisibilityOff,
-  label: "Show",
-  type: "password"
+const require_runtime = require("../../../../_virtual/_rolldown/runtime.cjs");
+const require_Action = require("../Action/Action.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+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);
+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);
+//#region src/components/Form/Controls/Password/Password.tsx
+var showState = {
+	isHidden: true,
+	icon: _vector_im_compound_design_tokens_assets_web_icons_visibility_off.default,
+	label: "Show",
+	type: "password"
 };
-const hideState = {
-  isHidden: false,
-  icon: VisibilityOn,
-  label: "Hide",
-  type: "text"
+var hideState = {
+	isHidden: false,
+	icon: _vector_im_compound_design_tokens_assets_web_icons_visibility_on.default,
+	label: "Hide",
+	type: "text"
 };
-const PasswordInput = React.forwardRef(function PasswordControl2(props, ref) {
-  const [{ icon, label, type }, togglePasswordVisibility] = React.useReducer(
-    (state) => !state.isHidden ? showState : hideState,
-    showState
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Action.ActionInput,
-    {
-      ref,
-      ...props,
-      Icon: icon,
-      actionLabel: label,
-      onActionClick: () => togglePasswordVisibility(),
-      type
-    }
-  );
+/**
+* A password input with a toggle to show/hide the password.
+*
+* Standalone input to be used outside of Radix forms.
+*/
+var PasswordInput = (0, react.forwardRef)(function PasswordControl(props, ref) {
+	const [{ icon, label, type }, togglePasswordVisibility] = (0, react.useReducer)((state) => !state.isHidden ? showState : hideState, showState);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Action.ActionInput, {
+		ref,
+		...props,
+		Icon: icon,
+		actionLabel: label,
+		onActionClick: () => togglePasswordVisibility(),
+		type
+	});
 });
-const PasswordControl = React.forwardRef(function PasswordControl3(props, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactForm.Control, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(PasswordInput, { ref, ...props }) });
+/**
+* A password input with a toggle to show/hide the password.
+*
+* Control to be used in a Radix form.
+*/
+var PasswordControl = (0, react.forwardRef)(function PasswordControl(props, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_form.Control, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PasswordInput, {
+			ref,
+			...props
+		})
+	});
 });
+//#endregion
 exports.PasswordControl = PasswordControl;
 exports.PasswordInput = PasswordInput;
-//# sourceMappingURL=Password.cjs.map
+
+//# sourceMappingURL=Password.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Password.cjs","sources":["../../../../../src/components/Form/Controls/Password/Password.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\nimport React, {\n  type ComponentRef,\n  forwardRef,\n  type ComponentProps,\n  useReducer,\n} from \"react\";\nimport { Control } from \"@radix-ui/react-form\";\n\nimport { ActionInput } from \"../Action\";\n\nimport VisibilityOn from \"@vector-im/compound-design-tokens/assets/web/icons/visibility-on\";\nimport VisibilityOff from \"@vector-im/compound-design-tokens/assets/web/icons/visibility-off\";\n\nconst showState = {\n  isHidden: true,\n  icon: VisibilityOff,\n  label: \"Show\",\n  type: \"password\",\n};\n\nconst hideState = {\n  isHidden: false,\n  icon: VisibilityOn,\n  label: \"Hide\",\n  type: \"text\",\n};\n\ntype Props = Omit<\n  ComponentProps<typeof ActionInput>,\n  \"type\" | \"actionLabel\" | \"onActionClick\" | \"Icon\"\n>;\n\n/**\n * A password input with a toggle to show/hide the password.\n *\n * Standalone input to be used outside of Radix forms.\n */\nexport const PasswordInput = forwardRef<\n  ComponentRef<typeof ActionInput>,\n  Props\n>(function PasswordControl(props, ref) {\n  const [{ icon, label, type }, togglePasswordVisibility] = useReducer(\n    (state) => (!state.isHidden ? showState : hideState),\n    showState,\n  );\n\n  return (\n    <ActionInput\n      ref={ref}\n      {...props}\n      Icon={icon}\n      // TODO: Replace with a function that deal with i18n of those values\n      actionLabel={label}\n      onActionClick={() => togglePasswordVisibility()}\n      type={type}\n    />\n  );\n});\n\n/**\n * A password input with a toggle to show/hide the password.\n *\n * Control to be used in a Radix form.\n */\nexport const PasswordControl = forwardRef<\n  ComponentRef<typeof PasswordInput>,\n  ComponentProps<typeof PasswordInput>\n>(function PasswordControl(props, ref) {\n  return (\n    <Control asChild>\n      <PasswordInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":["forwardRef","PasswordControl","useReducer","jsx","ActionInput","Control"],"mappings":";;;;;;;;AAmBA,MAAM,YAAY;AAAA,EAChB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AACR;AAEA,MAAM,YAAY;AAAA,EAChB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AACR;AAYO,MAAM,gBAAgBA,MAAAA,WAG3B,SAASC,iBAAgB,OAAO,KAAK;AACrC,QAAM,CAAC,EAAE,MAAM,OAAO,KAAA,GAAQ,wBAAwB,IAAIC,MAAAA;AAAAA,IACxD,CAAC,UAAW,CAAC,MAAM,WAAW,YAAY;AAAA,IAC1C;AAAA,EAAA;AAGF,SACEC,2BAAAA;AAAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ,MAAM;AAAA,MAEN,aAAa;AAAA,MACb,eAAe,MAAM,yBAAA;AAAA,MACrB;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AAOM,MAAM,kBAAkBJ,MAAAA,WAG7B,SAASC,iBAAgB,OAAO,KAAK;AACrC,SACEE,2BAAAA,IAACE,UAAAA,WAAQ,SAAO,MACd,yCAAC,eAAA,EAAc,KAAW,GAAG,MAAA,CAAO,EAAA,CACtC;AAEJ,CAAC;;;"}
+{"version":3,"file":"Password.cjs","names":[],"sources":["../../../../../src/components/Form/Controls/Password/Password.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\nimport React, {\n  type ComponentRef,\n  forwardRef,\n  type ComponentProps,\n  useReducer,\n} from \"react\";\nimport { Control } from \"@radix-ui/react-form\";\n\nimport { ActionInput } from \"../Action\";\n\nimport VisibilityOn from \"@vector-im/compound-design-tokens/assets/web/icons/visibility-on\";\nimport VisibilityOff from \"@vector-im/compound-design-tokens/assets/web/icons/visibility-off\";\n\nconst showState = {\n  isHidden: true,\n  icon: VisibilityOff,\n  label: \"Show\",\n  type: \"password\",\n};\n\nconst hideState = {\n  isHidden: false,\n  icon: VisibilityOn,\n  label: \"Hide\",\n  type: \"text\",\n};\n\ntype Props = Omit<\n  ComponentProps<typeof ActionInput>,\n  \"type\" | \"actionLabel\" | \"onActionClick\" | \"Icon\"\n>;\n\n/**\n * A password input with a toggle to show/hide the password.\n *\n * Standalone input to be used outside of Radix forms.\n */\nexport const PasswordInput = forwardRef<\n  ComponentRef<typeof ActionInput>,\n  Props\n>(function PasswordControl(props, ref) {\n  const [{ icon, label, type }, togglePasswordVisibility] = useReducer(\n    (state) => (!state.isHidden ? showState : hideState),\n    showState,\n  );\n\n  return (\n    <ActionInput\n      ref={ref}\n      {...props}\n      Icon={icon}\n      // TODO: Replace with a function that deal with i18n of those values\n      actionLabel={label}\n      onActionClick={() => togglePasswordVisibility()}\n      type={type}\n    />\n  );\n});\n\n/**\n * A password input with a toggle to show/hide the password.\n *\n * Control to be used in a Radix form.\n */\nexport const PasswordControl = forwardRef<\n  ComponentRef<typeof PasswordInput>,\n  ComponentProps<typeof PasswordInput>\n>(function PasswordControl(props, ref) {\n  return (\n    <Control asChild>\n      <PasswordInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"mappings":";;;;;;;;;;;AAmBA,IAAM,YAAY;CAChB,UAAU;CACV,MAAM,kEAAA;CACN,OAAO;CACP,MAAM;CACP;AAED,IAAM,YAAY;CAChB,UAAU;CACV,MAAM,iEAAA;CACN,OAAO;CACP,MAAM;CACP;;;;;;AAYD,IAAa,iBAAA,GAAA,MAAA,YAGX,SAAS,gBAAgB,OAAO,KAAK;CACrC,MAAM,CAAC,EAAE,MAAM,OAAO,QAAQ,6BAAA,GAAA,MAAA,aAC3B,UAAW,CAAC,MAAM,WAAW,YAAY,WAC1C,UACD;AAED,QACE,iBAAA,GAAA,kBAAA,KAAC,eAAA,aAAD;EACO;EACL,GAAI;EACJ,MAAM;EAEN,aAAa;EACb,qBAAqB,0BAA0B;EACzC;EACN,CAAA;EAEJ;;;;;;AAOF,IAAa,mBAAA,GAAA,MAAA,YAGX,SAAS,gBAAgB,OAAO,KAAK;AACrC,QACE,iBAAA,GAAA,kBAAA,KAAC,qBAAA,SAAD;EAAS,SAAA;YACP,iBAAA,GAAA,kBAAA,KAAC,eAAD;GAAoB;GAAK,GAAI;GAAS,CAAA;EAC9B,CAAA;EAEZ"}

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

@@ -1,43 +1,53 @@
-import { jsx } from "react/jsx-runtime";
+import { ActionInput } from "../Action/Action.js";
 import { forwardRef, useReducer } from "react";
+import { jsx } from "react/jsx-runtime";
 import { Control } from "@radix-ui/react-form";
 import VisibilityOn from "@vector-im/compound-design-tokens/assets/web/icons/visibility-on";
 import VisibilityOff from "@vector-im/compound-design-tokens/assets/web/icons/visibility-off";
-import { ActionInput } from "../Action/Action.js";
-const showState = {
-  isHidden: true,
-  icon: VisibilityOff,
-  label: "Show",
-  type: "password"
+//#region src/components/Form/Controls/Password/Password.tsx
+var showState = {
+	isHidden: true,
+	icon: VisibilityOff,
+	label: "Show",
+	type: "password"
 };
-const hideState = {
-  isHidden: false,
-  icon: VisibilityOn,
-  label: "Hide",
-  type: "text"
+var hideState = {
+	isHidden: false,
+	icon: VisibilityOn,
+	label: "Hide",
+	type: "text"
 };
-const PasswordInput = forwardRef(function PasswordControl2(props, ref) {
-  const [{ icon, label, type }, togglePasswordVisibility] = useReducer(
-    (state) => !state.isHidden ? showState : hideState,
-    showState
-  );
-  return /* @__PURE__ */ jsx(
-    ActionInput,
-    {
-      ref,
-      ...props,
-      Icon: icon,
-      actionLabel: label,
-      onActionClick: () => togglePasswordVisibility(),
-      type
-    }
-  );
+/**
+* A password input with a toggle to show/hide the password.
+*
+* Standalone input to be used outside of Radix forms.
+*/
+var PasswordInput = forwardRef(function PasswordControl(props, ref) {
+	const [{ icon, label, type }, togglePasswordVisibility] = useReducer((state) => !state.isHidden ? showState : hideState, showState);
+	return /* @__PURE__ */ jsx(ActionInput, {
+		ref,
+		...props,
+		Icon: icon,
+		actionLabel: label,
+		onActionClick: () => togglePasswordVisibility(),
+		type
+	});
 });
-const PasswordControl = forwardRef(function PasswordControl3(props, ref) {
-  return /* @__PURE__ */ jsx(Control, { asChild: true, children: /* @__PURE__ */ jsx(PasswordInput, { ref, ...props }) });
+/**
+* A password input with a toggle to show/hide the password.
+*
+* Control to be used in a Radix form.
+*/
+var PasswordControl = forwardRef(function PasswordControl(props, ref) {
+	return /* @__PURE__ */ jsx(Control, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(PasswordInput, {
+			ref,
+			...props
+		})
+	});
 });
-export {
-  PasswordControl,
-  PasswordInput
-};
-//# sourceMappingURL=Password.js.map
+//#endregion
+export { PasswordControl, PasswordInput };
+
+//# sourceMappingURL=Password.js.map

package/dist/components/Form/Controls/Password/Password.js.map

@@ -1 +1 @@
-{"version":3,"file":"Password.js","sources":["../../../../../src/components/Form/Controls/Password/Password.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\nimport React, {\n  type ComponentRef,\n  forwardRef,\n  type ComponentProps,\n  useReducer,\n} from \"react\";\nimport { Control } from \"@radix-ui/react-form\";\n\nimport { ActionInput } from \"../Action\";\n\nimport VisibilityOn from \"@vector-im/compound-design-tokens/assets/web/icons/visibility-on\";\nimport VisibilityOff from \"@vector-im/compound-design-tokens/assets/web/icons/visibility-off\";\n\nconst showState = {\n  isHidden: true,\n  icon: VisibilityOff,\n  label: \"Show\",\n  type: \"password\",\n};\n\nconst hideState = {\n  isHidden: false,\n  icon: VisibilityOn,\n  label: \"Hide\",\n  type: \"text\",\n};\n\ntype Props = Omit<\n  ComponentProps<typeof ActionInput>,\n  \"type\" | \"actionLabel\" | \"onActionClick\" | \"Icon\"\n>;\n\n/**\n * A password input with a toggle to show/hide the password.\n *\n * Standalone input to be used outside of Radix forms.\n */\nexport const PasswordInput = forwardRef<\n  ComponentRef<typeof ActionInput>,\n  Props\n>(function PasswordControl(props, ref) {\n  const [{ icon, label, type }, togglePasswordVisibility] = useReducer(\n    (state) => (!state.isHidden ? showState : hideState),\n    showState,\n  );\n\n  return (\n    <ActionInput\n      ref={ref}\n      {...props}\n      Icon={icon}\n      // TODO: Replace with a function that deal with i18n of those values\n      actionLabel={label}\n      onActionClick={() => togglePasswordVisibility()}\n      type={type}\n    />\n  );\n});\n\n/**\n * A password input with a toggle to show/hide the password.\n *\n * Control to be used in a Radix form.\n */\nexport const PasswordControl = forwardRef<\n  ComponentRef<typeof PasswordInput>,\n  ComponentProps<typeof PasswordInput>\n>(function PasswordControl(props, ref) {\n  return (\n    <Control asChild>\n      <PasswordInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":["PasswordControl"],"mappings":";;;;;;AAmBA,MAAM,YAAY;AAAA,EAChB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AACR;AAEA,MAAM,YAAY;AAAA,EAChB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AACR;AAYO,MAAM,gBAAgB,WAG3B,SAASA,iBAAgB,OAAO,KAAK;AACrC,QAAM,CAAC,EAAE,MAAM,OAAO,KAAA,GAAQ,wBAAwB,IAAI;AAAA,IACxD,CAAC,UAAW,CAAC,MAAM,WAAW,YAAY;AAAA,IAC1C;AAAA,EAAA;AAGF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ,MAAM;AAAA,MAEN,aAAa;AAAA,MACb,eAAe,MAAM,yBAAA;AAAA,MACrB;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AAOM,MAAM,kBAAkB,WAG7B,SAASA,iBAAgB,OAAO,KAAK;AACrC,SACE,oBAAC,WAAQ,SAAO,MACd,8BAAC,eAAA,EAAc,KAAW,GAAG,MAAA,CAAO,EAAA,CACtC;AAEJ,CAAC;"}
+{"version":3,"file":"Password.js","names":[],"sources":["../../../../../src/components/Form/Controls/Password/Password.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\nimport React, {\n  type ComponentRef,\n  forwardRef,\n  type ComponentProps,\n  useReducer,\n} from \"react\";\nimport { Control } from \"@radix-ui/react-form\";\n\nimport { ActionInput } from \"../Action\";\n\nimport VisibilityOn from \"@vector-im/compound-design-tokens/assets/web/icons/visibility-on\";\nimport VisibilityOff from \"@vector-im/compound-design-tokens/assets/web/icons/visibility-off\";\n\nconst showState = {\n  isHidden: true,\n  icon: VisibilityOff,\n  label: \"Show\",\n  type: \"password\",\n};\n\nconst hideState = {\n  isHidden: false,\n  icon: VisibilityOn,\n  label: \"Hide\",\n  type: \"text\",\n};\n\ntype Props = Omit<\n  ComponentProps<typeof ActionInput>,\n  \"type\" | \"actionLabel\" | \"onActionClick\" | \"Icon\"\n>;\n\n/**\n * A password input with a toggle to show/hide the password.\n *\n * Standalone input to be used outside of Radix forms.\n */\nexport const PasswordInput = forwardRef<\n  ComponentRef<typeof ActionInput>,\n  Props\n>(function PasswordControl(props, ref) {\n  const [{ icon, label, type }, togglePasswordVisibility] = useReducer(\n    (state) => (!state.isHidden ? showState : hideState),\n    showState,\n  );\n\n  return (\n    <ActionInput\n      ref={ref}\n      {...props}\n      Icon={icon}\n      // TODO: Replace with a function that deal with i18n of those values\n      actionLabel={label}\n      onActionClick={() => togglePasswordVisibility()}\n      type={type}\n    />\n  );\n});\n\n/**\n * A password input with a toggle to show/hide the password.\n *\n * Control to be used in a Radix form.\n */\nexport const PasswordControl = forwardRef<\n  ComponentRef<typeof PasswordInput>,\n  ComponentProps<typeof PasswordInput>\n>(function PasswordControl(props, ref) {\n  return (\n    <Control asChild>\n      <PasswordInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"mappings":";;;;;;;AAmBA,IAAM,YAAY;CAChB,UAAU;CACV,MAAM;CACN,OAAO;CACP,MAAM;CACP;AAED,IAAM,YAAY;CAChB,UAAU;CACV,MAAM;CACN,OAAO;CACP,MAAM;CACP;;;;;;AAYD,IAAa,gBAAgB,WAG3B,SAAS,gBAAgB,OAAO,KAAK;CACrC,MAAM,CAAC,EAAE,MAAM,OAAO,QAAQ,4BAA4B,YACvD,UAAW,CAAC,MAAM,WAAW,YAAY,WAC1C,UACD;AAED,QACE,oBAAC,aAAD;EACO;EACL,GAAI;EACJ,MAAM;EAEN,aAAa;EACb,qBAAqB,0BAA0B;EACzC;EACN,CAAA;EAEJ;;;;;;AAOF,IAAa,kBAAkB,WAG7B,SAAS,gBAAgB,OAAO,KAAK;AACrC,QACE,oBAAC,SAAD;EAAS,SAAA;YACP,oBAAC,eAAD;GAAoB;GAAK,GAAI;GAAS,CAAA;EAC9B,CAAA;EAEZ"}

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

@@ -1,20 +1,37 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const classNames = require("classnames");
-const React = require("react");
-const reactForm = require("@radix-ui/react-form");
-const Radio_module = require("./Radio.module.css.cjs");
-const RadioInput = React.forwardRef(function Radio({ className, ...props }, ref) {
-  const classes = classNames(Radio_module.default.container, className);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("input", { ref, ...props, className: Radio_module.default.input, type: "radio" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: Radio_module.default.ui })
-  ] });
+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);
+let react = require("react");
+react = require_runtime.__toESM(react);
+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
+/**
+* A radio component.
+*/
+var RadioInput = (0, react.forwardRef)(function Radio({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, classnames.default)(require_Radio_module.default.container, className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			ref,
+			...props,
+			className: require_Radio_module.default.input,
+			type: "radio"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_Radio_module.default.ui })]
+	});
 });
-const RadioControl = React.forwardRef(function RadioControl2(props, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactForm.Control, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(RadioInput, { ref, ...props }) });
+var RadioControl = (0, react.forwardRef)(function RadioControl(props, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_form.Control, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioInput, {
+			ref,
+			...props
+		})
+	});
 });
+//#endregion
 exports.RadioControl = RadioControl;
 exports.RadioInput = RadioInput;
-//# sourceMappingURL=Radio.cjs.map
+
+//# sourceMappingURL=Radio.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.cjs","sources":["../../../../../src/components/Form/Controls/Radio/Radio.tsx"],"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\nimport classnames from \"classnames\";\nimport React, {\n  type ComponentProps,\n  type ComponentRef,\n  forwardRef,\n  type PropsWithChildren,\n} from \"react\";\nimport { Control } from \"@radix-ui/react-form\";\n\nimport styles from \"./Radio.module.css\";\n\ntype RadioProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n} & Omit<React.ComponentPropsWithoutRef<\"input\">, \"type\">;\n\n/**\n * A radio component.\n */\nexport const RadioInput = forwardRef<\n  HTMLInputElement,\n  PropsWithChildren<RadioProps>\n>(function Radio({ className, ...props }, ref) {\n  const classes = classnames(styles.container, className);\n  return (\n    <div className={classes}>\n      <input ref={ref} {...props} className={styles.input} type=\"radio\" />\n      <div className={styles.ui} />\n    </div>\n  );\n});\n\nexport const RadioControl = forwardRef<\n  ComponentRef<typeof RadioInput>,\n  ComponentProps<typeof RadioInput>\n>(function RadioControl(props, ref) {\n  return (\n    <Control asChild>\n      <RadioInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":["forwardRef","classnames","styles","jsxs","jsx","RadioControl","Control"],"mappings":";;;;;;;AA8BO,MAAM,aAAaA,MAAAA,WAGxB,SAAS,MAAM,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AAC7C,QAAM,UAAUC,WAAWC,qBAAO,WAAW,SAAS;AACtD,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAW,SACd,UAAA;AAAA,IAAAC,2BAAAA,IAAC,SAAA,EAAM,KAAW,GAAG,OAAO,WAAWF,aAAAA,QAAO,OAAO,MAAK,SAAQ;AAAA,IAClEE,2BAAAA,IAAC,OAAA,EAAI,WAAWF,aAAAA,QAAO,GAAA,CAAI;AAAA,EAAA,GAC7B;AAEJ,CAAC;AAEM,MAAM,eAAeF,MAAAA,WAG1B,SAASK,cAAa,OAAO,KAAK;AAClC,SACED,2BAAAA,IAACE,UAAAA,WAAQ,SAAO,MACd,yCAAC,YAAA,EAAW,KAAW,GAAG,MAAA,CAAO,EAAA,CACnC;AAEJ,CAAC;;;"}
+{"version":3,"file":"Radio.cjs","names":[],"sources":["../../../../../src/components/Form/Controls/Radio/Radio.tsx"],"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\nimport classnames from \"classnames\";\nimport React, {\n  type ComponentProps,\n  type ComponentRef,\n  forwardRef,\n  type PropsWithChildren,\n} from \"react\";\nimport { Control } from \"@radix-ui/react-form\";\n\nimport styles from \"./Radio.module.css\";\n\ntype RadioProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n} & Omit<React.ComponentPropsWithoutRef<\"input\">, \"type\">;\n\n/**\n * A radio component.\n */\nexport const RadioInput = forwardRef<\n  HTMLInputElement,\n  PropsWithChildren<RadioProps>\n>(function Radio({ className, ...props }, ref) {\n  const classes = classnames(styles.container, className);\n  return (\n    <div className={classes}>\n      <input ref={ref} {...props} className={styles.input} type=\"radio\" />\n      <div className={styles.ui} />\n    </div>\n  );\n});\n\nexport const RadioControl = forwardRef<\n  ComponentRef<typeof RadioInput>,\n  ComponentProps<typeof RadioInput>\n>(function RadioControl(props, ref) {\n  return (\n    <Control asChild>\n      <RadioInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"mappings":";;;;;;;;;;;;AA8BA,IAAa,cAAA,GAAA,MAAA,YAGX,SAAS,MAAM,EAAE,WAAW,GAAG,SAAS,KAAK;AAE7C,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,YAAA,GAAA,WAAA,SAFoB,qBAAA,QAAO,WAAW,UAAU;YAErD,CACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;GAAY;GAAK,GAAI;GAAO,WAAW,qBAAA,QAAO;GAAO,MAAK;GAAU,CAAA,EACpE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAW,qBAAA,QAAO,IAAM,CAAA,CACzB;;EAER;AAEF,IAAa,gBAAA,GAAA,MAAA,YAGX,SAAS,aAAa,OAAO,KAAK;AAClC,QACE,iBAAA,GAAA,kBAAA,KAAC,qBAAA,SAAD;EAAS,SAAA;YACP,iBAAA,GAAA,kBAAA,KAAC,YAAD;GAAiB;GAAK,GAAI;GAAS,CAAA;EAC3B,CAAA;EAEZ"}

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

@@ -1,20 +1,33 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import Radio_module_default from "./Radio.module.js";
 import classNames from "classnames";
 import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Control } from "@radix-ui/react-form";
-import styles from "./Radio.module.css.js";
-const RadioInput = forwardRef(function Radio({ className, ...props }, ref) {
-  const classes = classNames(styles.container, className);
-  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-    /* @__PURE__ */ jsx("input", { ref, ...props, className: styles.input, type: "radio" }),
-    /* @__PURE__ */ jsx("div", { className: styles.ui })
-  ] });
+//#region src/components/Form/Controls/Radio/Radio.tsx
+/**
+* A radio component.
+*/
+var RadioInput = forwardRef(function Radio({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames(Radio_module_default.container, className),
+		children: [/* @__PURE__ */ jsx("input", {
+			ref,
+			...props,
+			className: Radio_module_default.input,
+			type: "radio"
+		}), /* @__PURE__ */ jsx("div", { className: Radio_module_default.ui })]
+	});
 });
-const RadioControl = forwardRef(function RadioControl2(props, ref) {
-  return /* @__PURE__ */ jsx(Control, { asChild: true, children: /* @__PURE__ */ jsx(RadioInput, { ref, ...props }) });
+var RadioControl = forwardRef(function RadioControl(props, ref) {
+	return /* @__PURE__ */ jsx(Control, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(RadioInput, {
+			ref,
+			...props
+		})
+	});
 });
-export {
-  RadioControl,
-  RadioInput
-};
-//# sourceMappingURL=Radio.js.map
+//#endregion
+export { RadioControl, RadioInput };
+
+//# sourceMappingURL=Radio.js.map

package/dist/components/Form/Controls/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../../../src/components/Form/Controls/Radio/Radio.tsx"],"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\nimport classnames from \"classnames\";\nimport React, {\n  type ComponentProps,\n  type ComponentRef,\n  forwardRef,\n  type PropsWithChildren,\n} from \"react\";\nimport { Control } from \"@radix-ui/react-form\";\n\nimport styles from \"./Radio.module.css\";\n\ntype RadioProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n} & Omit<React.ComponentPropsWithoutRef<\"input\">, \"type\">;\n\n/**\n * A radio component.\n */\nexport const RadioInput = forwardRef<\n  HTMLInputElement,\n  PropsWithChildren<RadioProps>\n>(function Radio({ className, ...props }, ref) {\n  const classes = classnames(styles.container, className);\n  return (\n    <div className={classes}>\n      <input ref={ref} {...props} className={styles.input} type=\"radio\" />\n      <div className={styles.ui} />\n    </div>\n  );\n});\n\nexport const RadioControl = forwardRef<\n  ComponentRef<typeof RadioInput>,\n  ComponentProps<typeof RadioInput>\n>(function RadioControl(props, ref) {\n  return (\n    <Control asChild>\n      <RadioInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":["classnames","RadioControl"],"mappings":";;;;;AA8BO,MAAM,aAAa,WAGxB,SAAS,MAAM,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AAC7C,QAAM,UAAUA,WAAW,OAAO,WAAW,SAAS;AACtD,SACE,qBAAC,OAAA,EAAI,WAAW,SACd,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAM,KAAW,GAAG,OAAO,WAAW,OAAO,OAAO,MAAK,SAAQ;AAAA,IAClE,oBAAC,OAAA,EAAI,WAAW,OAAO,GAAA,CAAI;AAAA,EAAA,GAC7B;AAEJ,CAAC;AAEM,MAAM,eAAe,WAG1B,SAASC,cAAa,OAAO,KAAK;AAClC,SACE,oBAAC,WAAQ,SAAO,MACd,8BAAC,YAAA,EAAW,KAAW,GAAG,MAAA,CAAO,EAAA,CACnC;AAEJ,CAAC;"}
+{"version":3,"file":"Radio.js","names":[],"sources":["../../../../../src/components/Form/Controls/Radio/Radio.tsx"],"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\nimport classnames from \"classnames\";\nimport React, {\n  type ComponentProps,\n  type ComponentRef,\n  forwardRef,\n  type PropsWithChildren,\n} from \"react\";\nimport { Control } from \"@radix-ui/react-form\";\n\nimport styles from \"./Radio.module.css\";\n\ntype RadioProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n} & Omit<React.ComponentPropsWithoutRef<\"input\">, \"type\">;\n\n/**\n * A radio component.\n */\nexport const RadioInput = forwardRef<\n  HTMLInputElement,\n  PropsWithChildren<RadioProps>\n>(function Radio({ className, ...props }, ref) {\n  const classes = classnames(styles.container, className);\n  return (\n    <div className={classes}>\n      <input ref={ref} {...props} className={styles.input} type=\"radio\" />\n      <div className={styles.ui} />\n    </div>\n  );\n});\n\nexport const RadioControl = forwardRef<\n  ComponentRef<typeof RadioInput>,\n  ComponentProps<typeof RadioInput>\n>(function RadioControl(props, ref) {\n  return (\n    <Control asChild>\n      <RadioInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"mappings":";;;;;;;;;AA8BA,IAAa,aAAa,WAGxB,SAAS,MAAM,EAAE,WAAW,GAAG,SAAS,KAAK;AAE7C,QACE,qBAAC,OAAD;EAAK,WAFS,WAAW,qBAAO,WAAW,UAAU;YAErD,CACE,oBAAC,SAAD;GAAY;GAAK,GAAI;GAAO,WAAW,qBAAO;GAAO,MAAK;GAAU,CAAA,EACpE,oBAAC,OAAD,EAAK,WAAW,qBAAO,IAAM,CAAA,CACzB;;EAER;AAEF,IAAa,eAAe,WAG1B,SAAS,aAAa,OAAO,KAAK;AAClC,QACE,oBAAC,SAAD;EAAS,SAAA;YACP,oBAAC,YAAD;GAAiB;GAAK,GAAI;GAAS,CAAA;EAC3B,CAAA;EAEZ"}

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

@@ -0,0 +1,9 @@
+var Radio_module_default = {
+	container: "_container_1ug7n_10",
+	input: "_input_1ug7n_18",
+	ui: "_ui_1ug7n_19"
+};
+//#endregion
+exports.default = Radio_module_default;
+
+//# sourceMappingURL=Radio.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.module.cjs","names":[],"sources":["../../../../../src/components/Form/Controls/Radio/Radio.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  --size: 20px;\n\n  display: grid;\n  inline-size: var(--size);\n  block-size: var(--size);\n}\n\n.input,\n.ui {\n  box-sizing: border-box;\n  grid-area: 1/1;\n  inline-size: var(--size);\n  block-size: var(--size);\n}\n\n.input {\n  opacity: 0;\n  margin: 0;\n  cursor: pointer;\n}\n\n.ui {\n  pointer-events: none;\n  border-radius: 50%;\n  border: 1px solid;\n  border-color: var(--cpd-color-border-interactive-primary);\n\n  /* To align the ::after pseudo-element to the center of the radio button */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.ui::after {\n  content: \"\";\n  inline-size: 6px;\n  block-size: 6px;\n  border-radius: 50%;\n  background: transparent;\n  box-sizing: border-box;\n\n  /* Additional style to ensure visibility in contrast-mode */\n  border: 1px solid transparent;\n  color: transparent;\n}\n\n.input:checked + .ui {\n  background-color: var(--cpd-color-bg-accent-rest);\n  border-color: var(--cpd-color-bg-accent-rest);\n  color: unset;\n}\n\n.input:checked + .ui::after {\n  background: var(--cpd-color-icon-on-solid-primary);\n  border-color: var(--cpd-color-icon-on-solid-primary);\n  color: unset;\n}\n\n.input:focus-visible + .ui {\n  outline: 2px solid var(--cpd-color-border-focused);\n  outline-offset: 1px;\n}\n\n.input[readonly] {\n  pointer-events: none;\n}\n\n.input[readonly] + .ui {\n  border-color: var(--cpd-color-border-interactive-secondary);\n  background: var(--cpd-color-bg-subtle-secondary);\n}\n\n.input[disabled] {\n  cursor: not-allowed;\n}\n\n.input[disabled] + .ui {\n  border-color: var(--cpd-color-border-disabled);\n  background: var(--cpd-color-bg-canvas-disabled);\n}\n\n.input[disabled]:checked + .ui {\n  border-color: var(--cpd-color-bg-action-primary-disabled);\n  background: var(--cpd-color-bg-action-primary-disabled);\n}\n\n.input[readonly]:checked + .ui::after {\n  background-color: var(--cpd-color-icon-secondary);\n  border-color: var(--cpd-color-icon-secondary);\n  color: unset;\n}\n\n@media (hover) {\n  .input:not([disabled], [readonly], :checked):hover + .ui {\n    border-color: var(--cpd-color-bg-accent-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  .input:not([disabled], [readonly], :checked):hover + .ui::after {\n    background: var(--cpd-color-icon-quaternary);\n    border-color: var(--cpd-color-icon-quaternary);\n    color: unset;\n  }\n\n  .input:not([disabled], [readonly]):checked:hover + .ui {\n    border-color: var(--cpd-color-bg-accent-hovered);\n    background: var(--cpd-color-bg-accent-hovered);\n  }\n\n  .input[data-invalid]:not([disabled], [readonly]):checked:hover + .ui {\n    border-color: var(--cpd-color-bg-critical-hovered);\n    background: var(--cpd-color-bg-critical-hovered);\n  }\n}\n\n.input[data-invalid]:not([disabled], [readonly], :checked) + .ui {\n  border-color: var(--cpd-color-border-critical-primary);\n}\n\n.input[data-invalid]:not([disabled], [readonly]):checked + .ui {\n  background-color: var(--cpd-color-bg-critical-primary);\n  border-color: var(--cpd-color-bg-critical-primary);\n}\n"],"mappings":""}

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

@@ -0,0 +1,9 @@
+var Radio_module_default = {
+	container: "_container_1ug7n_10",
+	input: "_input_1ug7n_18",
+	ui: "_ui_1ug7n_19"
+};
+//#endregion
+export { Radio_module_default as default };
+
+//# sourceMappingURL=Radio.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.module.js","names":[],"sources":["../../../../../src/components/Form/Controls/Radio/Radio.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  --size: 20px;\n\n  display: grid;\n  inline-size: var(--size);\n  block-size: var(--size);\n}\n\n.input,\n.ui {\n  box-sizing: border-box;\n  grid-area: 1/1;\n  inline-size: var(--size);\n  block-size: var(--size);\n}\n\n.input {\n  opacity: 0;\n  margin: 0;\n  cursor: pointer;\n}\n\n.ui {\n  pointer-events: none;\n  border-radius: 50%;\n  border: 1px solid;\n  border-color: var(--cpd-color-border-interactive-primary);\n\n  /* To align the ::after pseudo-element to the center of the radio button */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.ui::after {\n  content: \"\";\n  inline-size: 6px;\n  block-size: 6px;\n  border-radius: 50%;\n  background: transparent;\n  box-sizing: border-box;\n\n  /* Additional style to ensure visibility in contrast-mode */\n  border: 1px solid transparent;\n  color: transparent;\n}\n\n.input:checked + .ui {\n  background-color: var(--cpd-color-bg-accent-rest);\n  border-color: var(--cpd-color-bg-accent-rest);\n  color: unset;\n}\n\n.input:checked + .ui::after {\n  background: var(--cpd-color-icon-on-solid-primary);\n  border-color: var(--cpd-color-icon-on-solid-primary);\n  color: unset;\n}\n\n.input:focus-visible + .ui {\n  outline: 2px solid var(--cpd-color-border-focused);\n  outline-offset: 1px;\n}\n\n.input[readonly] {\n  pointer-events: none;\n}\n\n.input[readonly] + .ui {\n  border-color: var(--cpd-color-border-interactive-secondary);\n  background: var(--cpd-color-bg-subtle-secondary);\n}\n\n.input[disabled] {\n  cursor: not-allowed;\n}\n\n.input[disabled] + .ui {\n  border-color: var(--cpd-color-border-disabled);\n  background: var(--cpd-color-bg-canvas-disabled);\n}\n\n.input[disabled]:checked + .ui {\n  border-color: var(--cpd-color-bg-action-primary-disabled);\n  background: var(--cpd-color-bg-action-primary-disabled);\n}\n\n.input[readonly]:checked + .ui::after {\n  background-color: var(--cpd-color-icon-secondary);\n  border-color: var(--cpd-color-icon-secondary);\n  color: unset;\n}\n\n@media (hover) {\n  .input:not([disabled], [readonly], :checked):hover + .ui {\n    border-color: var(--cpd-color-bg-accent-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  .input:not([disabled], [readonly], :checked):hover + .ui::after {\n    background: var(--cpd-color-icon-quaternary);\n    border-color: var(--cpd-color-icon-quaternary);\n    color: unset;\n  }\n\n  .input:not([disabled], [readonly]):checked:hover + .ui {\n    border-color: var(--cpd-color-bg-accent-hovered);\n    background: var(--cpd-color-bg-accent-hovered);\n  }\n\n  .input[data-invalid]:not([disabled], [readonly]):checked:hover + .ui {\n    border-color: var(--cpd-color-bg-critical-hovered);\n    background: var(--cpd-color-bg-critical-hovered);\n  }\n}\n\n.input[data-invalid]:not([disabled], [readonly], :checked) + .ui {\n  border-color: var(--cpd-color-border-critical-primary);\n}\n\n.input[data-invalid]:not([disabled], [readonly]):checked + .ui {\n  background-color: var(--cpd-color-bg-critical-primary);\n  border-color: var(--cpd-color-bg-critical-primary);\n}\n"],"mappings":""}