@vector-im/compound-web 8.3.6 → 9.0.0

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

@@ -1,34 +1,54 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const classNames = require("classnames");
-const React = require("react");
-const Action_module = require("./Action.module.css.cjs");
-const reactForm = require("@radix-ui/react-form");
-const Tooltip = require("../../../Tooltip/Tooltip.cjs");
-const Text = require("../Text/Text.cjs");
-const ActionInput = React.forwardRef(
-  function ActionControl2({ Icon, className, actionLabel, onActionClick, ...props }, ref) {
-    const id = React.useId();
-    const classes = classNames(Action_module.default.container, className);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, id, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Text.TextInput, { ref, ...props, className: Action_module.default.control }),
-      /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { label: actionLabel, children: /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          className: Action_module.default.action,
-          onClick: onActionClick,
-          "aria-controls": id,
-          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": true })
-        }
-      ) })
-    ] });
-  }
-);
-const ActionControl = React.forwardRef(function ActionControl3(props, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactForm.Control, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ActionInput, { ref, ...props }) });
+const require_runtime = require("../../../../_virtual/_rolldown/runtime.cjs");
+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);
+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/Action/Action.tsx
+/**
+* A generic input with an action icon on the right hand side.
+* You should rarely use it directly,
+* but it is powering the likes of "copy to clipboard input", "password reveal", ...
+*/
+var ActionInput = (0, react.forwardRef)(function ActionControl({ Icon, className, actionLabel, onActionClick, ...props }, ref) {
+	const id = (0, react.useId)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, classnames.default)(require_Action_module.default.container, className),
+		id,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.TextInput, {
+			ref,
+			...props,
+			className: require_Action_module.default.control
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+			label: actionLabel,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: require_Action_module.default.action,
+				onClick: onActionClick,
+				"aria-controls": id,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { "aria-hidden": true })
+			})
+		})]
+	});
 });
+/**
+* A styled text input wrapped in a `Control` component, for use in Radix forms.
+*/
+var ActionControl = (0, react.forwardRef)(function ActionControl(props, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_form.Control, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionInput, {
+			ref,
+			...props
+		})
+	});
+});
+//#endregion
 exports.ActionControl = ActionControl;
 exports.ActionInput = ActionInput;
-//# sourceMappingURL=Action.cjs.map
+
+//# sourceMappingURL=Action.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Action.cjs","sources":["../../../../../src/components/Form/Controls/Action/Action.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, {\n  forwardRef,\n  type ComponentRef,\n  type ComponentProps,\n  useId,\n} from \"react\";\nimport styles from \"./Action.module.css\";\nimport { TextInput } from \"../Text\";\n\nimport { Control } from \"@radix-ui/react-form\";\nimport { Tooltip } from \"../../../Tooltip/Tooltip\";\n\ntype Props = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The React component to display on the right hand side of the icon.\n   */\n  Icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n  /**\n   * On click callback for the icon on the right hand side\n   */\n  onActionClick: (e: React.MouseEvent) => void;\n  /**\n   * The name of the action to perform (e.g. \"Copy to clipboard\")\n   */\n  actionLabel: string;\n} & React.ComponentProps<typeof TextInput>;\n\n/**\n * A generic input with an action icon on the right hand side.\n * You should rarely use it directly,\n * but it is powering the likes of \"copy to clipboard input\", \"password reveal\", ...\n */\nexport const ActionInput = forwardRef<HTMLInputElement, Props>(\n  function ActionControl(\n    { Icon, className, actionLabel, onActionClick, ...props },\n    ref,\n  ) {\n    const id = useId();\n    const classes = classnames(styles.container, className);\n    return (\n      <div className={classes} id={id}>\n        <TextInput ref={ref} {...props} className={styles.control} />\n\n        <Tooltip label={actionLabel}>\n          <button\n            type=\"button\"\n            className={styles.action}\n            onClick={onActionClick}\n            aria-controls={id}\n          >\n            <Icon aria-hidden />\n          </button>\n        </Tooltip>\n      </div>\n    );\n  },\n);\n\n/**\n * A styled text input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const ActionControl = forwardRef<\n  ComponentRef<typeof ActionInput>,\n  ComponentProps<typeof ActionInput>\n>(function ActionControl(props, ref) {\n  return (\n    <Control asChild>\n      <ActionInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":["forwardRef","ActionControl","useId","classnames","styles","jsxs","jsx","TextInput","Tooltip","Control"],"mappings":";;;;;;;;;AA4CO,MAAM,cAAcA,MAAAA;AAAAA,EACzB,SAASC,eACP,EAAE,MAAM,WAAW,aAAa,eAAe,GAAG,MAAA,GAClD,KACA;AACA,UAAM,KAAKC,MAAAA,MAAA;AACX,UAAM,UAAUC,WAAWC,sBAAO,WAAW,SAAS;AACtD,WACEC,2BAAAA,KAAC,OAAA,EAAI,WAAW,SAAS,IACvB,UAAA;AAAA,MAAAC,+BAACC,KAAAA,aAAU,KAAW,GAAG,OAAO,WAAWH,cAAAA,QAAO,SAAS;AAAA,MAE3DE,2BAAAA,IAACE,QAAAA,SAAA,EAAQ,OAAO,aACd,UAAAF,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWF,cAAAA,QAAO;AAAA,UAClB,SAAS;AAAA,UACT,iBAAe;AAAA,UAEf,UAAAE,2BAAAA,IAAC,MAAA,EAAK,eAAW,KAAA,CAAC;AAAA,QAAA;AAAA,MAAA,EACpB,CACF;AAAA,IAAA,GACF;AAAA,EAEJ;AACF;AAKO,MAAM,gBAAgBN,MAAAA,WAG3B,SAASC,eAAc,OAAO,KAAK;AACnC,SACEK,2BAAAA,IAACG,UAAAA,WAAQ,SAAO,MACd,yCAAC,aAAA,EAAY,KAAW,GAAG,MAAA,CAAO,EAAA,CACpC;AAEJ,CAAC;;;"}
+{"version":3,"file":"Action.cjs","names":[],"sources":["../../../../../src/components/Form/Controls/Action/Action.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, {\n  forwardRef,\n  type ComponentRef,\n  type ComponentProps,\n  useId,\n} from \"react\";\nimport styles from \"./Action.module.css\";\nimport { TextInput } from \"../Text\";\n\nimport { Control } from \"@radix-ui/react-form\";\nimport { Tooltip } from \"../../../Tooltip/Tooltip\";\n\ntype Props = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The React component to display on the right hand side of the icon.\n   */\n  Icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n  /**\n   * On click callback for the icon on the right hand side\n   */\n  onActionClick: (e: React.MouseEvent) => void;\n  /**\n   * The name of the action to perform (e.g. \"Copy to clipboard\")\n   */\n  actionLabel: string;\n} & React.ComponentProps<typeof TextInput>;\n\n/**\n * A generic input with an action icon on the right hand side.\n * You should rarely use it directly,\n * but it is powering the likes of \"copy to clipboard input\", \"password reveal\", ...\n */\nexport const ActionInput = forwardRef<HTMLInputElement, Props>(\n  function ActionControl(\n    { Icon, className, actionLabel, onActionClick, ...props },\n    ref,\n  ) {\n    const id = useId();\n    const classes = classnames(styles.container, className);\n    return (\n      <div className={classes} id={id}>\n        <TextInput ref={ref} {...props} className={styles.control} />\n\n        <Tooltip label={actionLabel}>\n          <button\n            type=\"button\"\n            className={styles.action}\n            onClick={onActionClick}\n            aria-controls={id}\n          >\n            <Icon aria-hidden />\n          </button>\n        </Tooltip>\n      </div>\n    );\n  },\n);\n\n/**\n * A styled text input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const ActionControl = forwardRef<\n  ComponentRef<typeof ActionInput>,\n  ComponentProps<typeof ActionInput>\n>(function ActionControl(props, ref) {\n  return (\n    <Control asChild>\n      <ActionInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;AA4CA,IAAa,eAAA,GAAA,MAAA,YACX,SAAS,cACP,EAAE,MAAM,WAAW,aAAa,eAAe,GAAG,SAClD,KACA;CACA,MAAM,MAAA,GAAA,MAAA,QAAY;AAElB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,YAAA,GAAA,WAAA,SAFoB,sBAAA,QAAO,WAAW,UAAU;EAExB;YAA7B,CACE,iBAAA,GAAA,kBAAA,KAAC,aAAA,WAAD;GAAgB;GAAK,GAAI;GAAO,WAAW,sBAAA,QAAO;GAAW,CAAA,EAE7D,iBAAA,GAAA,kBAAA,KAAC,gBAAA,SAAD;GAAS,OAAO;aACd,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,MAAK;IACL,WAAW,sBAAA,QAAO;IAClB,SAAS;IACT,iBAAe;cAEf,iBAAA,GAAA,kBAAA,KAAC,MAAD,EAAM,eAAA,MAAc,CAAA;IACb,CAAA;GACD,CAAA,CACN;;EAGX;;;;AAKD,IAAa,iBAAA,GAAA,MAAA,YAGX,SAAS,cAAc,OAAO,KAAK;AACnC,QACE,iBAAA,GAAA,kBAAA,KAAC,qBAAA,SAAD;EAAS,SAAA;YACP,iBAAA,GAAA,kBAAA,KAAC,aAAD;GAAkB;GAAK,GAAI;GAAS,CAAA;EAC5B,CAAA;EAEZ"}

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

@@ -1,34 +1,50 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "../../../Tooltip/Tooltip.js";
+import Action_module_default from "./Action.module.js";
+import { TextInput } from "../Text/Text.js";
 import classNames from "classnames";
 import { forwardRef, useId } from "react";
-import styles from "./Action.module.css.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Control } from "@radix-ui/react-form";
-import { Tooltip } from "../../../Tooltip/Tooltip.js";
-import { TextInput } from "../Text/Text.js";
-const ActionInput = forwardRef(
-  function ActionControl2({ Icon, className, actionLabel, onActionClick, ...props }, ref) {
-    const id = useId();
-    const classes = classNames(styles.container, className);
-    return /* @__PURE__ */ jsxs("div", { className: classes, id, children: [
-      /* @__PURE__ */ jsx(TextInput, { ref, ...props, className: styles.control }),
-      /* @__PURE__ */ jsx(Tooltip, { label: actionLabel, children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: styles.action,
-          onClick: onActionClick,
-          "aria-controls": id,
-          children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": true })
-        }
-      ) })
-    ] });
-  }
-);
-const ActionControl = forwardRef(function ActionControl3(props, ref) {
-  return /* @__PURE__ */ jsx(Control, { asChild: true, children: /* @__PURE__ */ jsx(ActionInput, { ref, ...props }) });
+//#region src/components/Form/Controls/Action/Action.tsx
+/**
+* A generic input with an action icon on the right hand side.
+* You should rarely use it directly,
+* but it is powering the likes of "copy to clipboard input", "password reveal", ...
+*/
+var ActionInput = forwardRef(function ActionControl({ Icon, className, actionLabel, onActionClick, ...props }, ref) {
+	const id = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames(Action_module_default.container, className),
+		id,
+		children: [/* @__PURE__ */ jsx(TextInput, {
+			ref,
+			...props,
+			className: Action_module_default.control
+		}), /* @__PURE__ */ jsx(Tooltip, {
+			label: actionLabel,
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: Action_module_default.action,
+				onClick: onActionClick,
+				"aria-controls": id,
+				children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": true })
+			})
+		})]
+	});
+});
+/**
+* A styled text input wrapped in a `Control` component, for use in Radix forms.
+*/
+var ActionControl = forwardRef(function ActionControl(props, ref) {
+	return /* @__PURE__ */ jsx(Control, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(ActionInput, {
+			ref,
+			...props
+		})
+	});
 });
-export {
-  ActionControl,
-  ActionInput
-};
-//# sourceMappingURL=Action.js.map
+//#endregion
+export { ActionControl, ActionInput };
+
+//# sourceMappingURL=Action.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Action.js","sources":["../../../../../src/components/Form/Controls/Action/Action.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, {\n  forwardRef,\n  type ComponentRef,\n  type ComponentProps,\n  useId,\n} from \"react\";\nimport styles from \"./Action.module.css\";\nimport { TextInput } from \"../Text\";\n\nimport { Control } from \"@radix-ui/react-form\";\nimport { Tooltip } from \"../../../Tooltip/Tooltip\";\n\ntype Props = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The React component to display on the right hand side of the icon.\n   */\n  Icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n  /**\n   * On click callback for the icon on the right hand side\n   */\n  onActionClick: (e: React.MouseEvent) => void;\n  /**\n   * The name of the action to perform (e.g. \"Copy to clipboard\")\n   */\n  actionLabel: string;\n} & React.ComponentProps<typeof TextInput>;\n\n/**\n * A generic input with an action icon on the right hand side.\n * You should rarely use it directly,\n * but it is powering the likes of \"copy to clipboard input\", \"password reveal\", ...\n */\nexport const ActionInput = forwardRef<HTMLInputElement, Props>(\n  function ActionControl(\n    { Icon, className, actionLabel, onActionClick, ...props },\n    ref,\n  ) {\n    const id = useId();\n    const classes = classnames(styles.container, className);\n    return (\n      <div className={classes} id={id}>\n        <TextInput ref={ref} {...props} className={styles.control} />\n\n        <Tooltip label={actionLabel}>\n          <button\n            type=\"button\"\n            className={styles.action}\n            onClick={onActionClick}\n            aria-controls={id}\n          >\n            <Icon aria-hidden />\n          </button>\n        </Tooltip>\n      </div>\n    );\n  },\n);\n\n/**\n * A styled text input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const ActionControl = forwardRef<\n  ComponentRef<typeof ActionInput>,\n  ComponentProps<typeof ActionInput>\n>(function ActionControl(props, ref) {\n  return (\n    <Control asChild>\n      <ActionInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":["ActionControl","classnames"],"mappings":";;;;;;;AA4CO,MAAM,cAAc;AAAA,EACzB,SAASA,eACP,EAAE,MAAM,WAAW,aAAa,eAAe,GAAG,MAAA,GAClD,KACA;AACA,UAAM,KAAK,MAAA;AACX,UAAM,UAAUC,WAAW,OAAO,WAAW,SAAS;AACtD,WACE,qBAAC,OAAA,EAAI,WAAW,SAAS,IACvB,UAAA;AAAA,MAAA,oBAAC,aAAU,KAAW,GAAG,OAAO,WAAW,OAAO,SAAS;AAAA,MAE3D,oBAAC,SAAA,EAAQ,OAAO,aACd,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAW,OAAO;AAAA,UAClB,SAAS;AAAA,UACT,iBAAe;AAAA,UAEf,UAAA,oBAAC,MAAA,EAAK,eAAW,KAAA,CAAC;AAAA,QAAA;AAAA,MAAA,EACpB,CACF;AAAA,IAAA,GACF;AAAA,EAEJ;AACF;AAKO,MAAM,gBAAgB,WAG3B,SAASD,eAAc,OAAO,KAAK;AACnC,SACE,oBAAC,WAAQ,SAAO,MACd,8BAAC,aAAA,EAAY,KAAW,GAAG,MAAA,CAAO,EAAA,CACpC;AAEJ,CAAC;"}
+{"version":3,"file":"Action.js","names":[],"sources":["../../../../../src/components/Form/Controls/Action/Action.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, {\n  forwardRef,\n  type ComponentRef,\n  type ComponentProps,\n  useId,\n} from \"react\";\nimport styles from \"./Action.module.css\";\nimport { TextInput } from \"../Text\";\n\nimport { Control } from \"@radix-ui/react-form\";\nimport { Tooltip } from \"../../../Tooltip/Tooltip\";\n\ntype Props = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The React component to display on the right hand side of the icon.\n   */\n  Icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n  /**\n   * On click callback for the icon on the right hand side\n   */\n  onActionClick: (e: React.MouseEvent) => void;\n  /**\n   * The name of the action to perform (e.g. \"Copy to clipboard\")\n   */\n  actionLabel: string;\n} & React.ComponentProps<typeof TextInput>;\n\n/**\n * A generic input with an action icon on the right hand side.\n * You should rarely use it directly,\n * but it is powering the likes of \"copy to clipboard input\", \"password reveal\", ...\n */\nexport const ActionInput = forwardRef<HTMLInputElement, Props>(\n  function ActionControl(\n    { Icon, className, actionLabel, onActionClick, ...props },\n    ref,\n  ) {\n    const id = useId();\n    const classes = classnames(styles.container, className);\n    return (\n      <div className={classes} id={id}>\n        <TextInput ref={ref} {...props} className={styles.control} />\n\n        <Tooltip label={actionLabel}>\n          <button\n            type=\"button\"\n            className={styles.action}\n            onClick={onActionClick}\n            aria-controls={id}\n          >\n            <Icon aria-hidden />\n          </button>\n        </Tooltip>\n      </div>\n    );\n  },\n);\n\n/**\n * A styled text input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const ActionControl = forwardRef<\n  ComponentRef<typeof ActionInput>,\n  ComponentProps<typeof ActionInput>\n>(function ActionControl(props, ref) {\n  return (\n    <Control asChild>\n      <ActionInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;AA4CA,IAAa,cAAc,WACzB,SAAS,cACP,EAAE,MAAM,WAAW,aAAa,eAAe,GAAG,SAClD,KACA;CACA,MAAM,KAAK,OAAO;AAElB,QACE,qBAAC,OAAD;EAAK,WAFS,WAAW,sBAAO,WAAW,UAAU;EAExB;YAA7B,CACE,oBAAC,WAAD;GAAgB;GAAK,GAAI;GAAO,WAAW,sBAAO;GAAW,CAAA,EAE7D,oBAAC,SAAD;GAAS,OAAO;aACd,oBAAC,UAAD;IACE,MAAK;IACL,WAAW,sBAAO;IAClB,SAAS;IACT,iBAAe;cAEf,oBAAC,MAAD,EAAM,eAAA,MAAc,CAAA;IACb,CAAA;GACD,CAAA,CACN;;EAGX;;;;AAKD,IAAa,gBAAgB,WAG3B,SAAS,cAAc,OAAO,KAAK;AACnC,QACE,oBAAC,SAAD;EAAS,SAAA;YACP,oBAAC,aAAD;GAAkB;GAAK,GAAI;GAAS,CAAA;EAC5B,CAAA;EAEZ"}

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

@@ -0,0 +1,9 @@
+var Action_module_default = {
+	container: "_container_1s836_8",
+	control: "_control_1s836_13",
+	action: "_action_1s836_24"
+};
+//#endregion
+exports.default = Action_module_default;
+
+//# sourceMappingURL=Action.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Action.module.cjs","names":[],"sources":["../../../../../src/components/Form/Controls/Action/Action.module.css"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.container {\n  display: inline-flex;\n  position: relative;\n}\n\n.control {\n  flex: 1;\n  padding-inline-end: var(--cpd-space-12x) !important;\n\n  /* From the flexbox spec:\n   *   \"By default, flex items won’t shrink below their minimum content size\"\n   * This allows the element to shrink lower than its natural default size.\n   */\n  min-inline-size: 0;\n}\n\n.action {\n  all: unset;\n  color: var(--cpd-color-icon-secondary);\n  background-color: transparent;\n  cursor: pointer;\n  position: absolute;\n  inset-block: var(--cpd-space-2x);\n  inset-inline-end: var(--cpd-space-2x);\n  padding: var(--cpd-space-1x);\n  overflow: visible;\n  border-radius: 50%;\n}\n\n.action > svg {\n  inline-size: var(--cpd-space-6x);\n  block-size: var(--cpd-space-6x);\n}\n\n@media (hover) {\n  .action:hover {\n    color: var(--cpd-color-icon-primary);\n    background-color: var(--cpd-color-bg-subtle-secondary);\n  }\n}\n\n.action:focus-visible {\n  outline: 2px solid var(--cpd-color-border-focused);\n  outline-offset: 1px;\n}\n\n.control[disabled] + .action {\n  pointer-events: none;\n  color: var(--cpd-color-text-disabled);\n}\n\n.control[readonly] + .action {\n  pointer-events: none;\n  color: var(--cpd-color-text-secondary);\n}\n"],"mappings":""}

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

@@ -0,0 +1,9 @@
+var Action_module_default = {
+	container: "_container_1s836_8",
+	control: "_control_1s836_13",
+	action: "_action_1s836_24"
+};
+//#endregion
+export { Action_module_default as default };
+
+//# sourceMappingURL=Action.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Action.module.js","names":[],"sources":["../../../../../src/components/Form/Controls/Action/Action.module.css"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.container {\n  display: inline-flex;\n  position: relative;\n}\n\n.control {\n  flex: 1;\n  padding-inline-end: var(--cpd-space-12x) !important;\n\n  /* From the flexbox spec:\n   *   \"By default, flex items won’t shrink below their minimum content size\"\n   * This allows the element to shrink lower than its natural default size.\n   */\n  min-inline-size: 0;\n}\n\n.action {\n  all: unset;\n  color: var(--cpd-color-icon-secondary);\n  background-color: transparent;\n  cursor: pointer;\n  position: absolute;\n  inset-block: var(--cpd-space-2x);\n  inset-inline-end: var(--cpd-space-2x);\n  padding: var(--cpd-space-1x);\n  overflow: visible;\n  border-radius: 50%;\n}\n\n.action > svg {\n  inline-size: var(--cpd-space-6x);\n  block-size: var(--cpd-space-6x);\n}\n\n@media (hover) {\n  .action:hover {\n    color: var(--cpd-color-icon-primary);\n    background-color: var(--cpd-color-bg-subtle-secondary);\n  }\n}\n\n.action:focus-visible {\n  outline: 2px solid var(--cpd-color-border-focused);\n  outline-offset: 1px;\n}\n\n.control[disabled] + .action {\n  pointer-events: none;\n  color: var(--cpd-color-text-disabled);\n}\n\n.control[readonly] + .action {\n  pointer-events: none;\n  color: var(--cpd-color-text-secondary);\n}\n"],"mappings":""}

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

@@ -1,23 +1,45 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const classNames = require("classnames");
-const React = require("react");
-const CheckIcon = require("@vector-im/compound-design-tokens/assets/web/icons/check");
-const reactForm = require("@radix-ui/react-form");
-const Checkbox_module = require("./Checkbox.module.css.cjs");
-const CheckboxInput = React.forwardRef(
-  function Checkbox({ className, ...props }, ref) {
-    const classes = classNames(Checkbox_module.default.container, className);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("input", { ref, className: Checkbox_module.default.input, ...props, type: "checkbox" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: Checkbox_module.default.ui, children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { "aria-hidden": true }) })
-    ] });
-  }
-);
-const CheckboxControl = React.forwardRef(function CheckboxControl2(props, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactForm.Control, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxInput, { ref, ...props }) });
+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);
+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_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);
+//#region src/components/Form/Controls/Checkbox/Checkbox.tsx
+/**
+* A styled checkbox input, for standalone use.
+*/
+var CheckboxInput = (0, react.forwardRef)(function Checkbox({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, classnames.default)(require_Checkbox_module.default.container, className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			ref,
+			className: require_Checkbox_module.default.input,
+			...props,
+			type: "checkbox"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: require_Checkbox_module.default.ui,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_vector_im_compound_design_tokens_assets_web_icons_check.default, { "aria-hidden": true })
+		})]
+	});
 });
+/**
+* A styled checkbox input wrapped in a `Control` component, for use in Radix forms.
+*/
+var CheckboxControl = (0, react.forwardRef)(function CheckboxControl(props, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_form.Control, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxInput, {
+			ref,
+			...props
+		})
+	});
+});
+//#endregion
 exports.CheckboxControl = CheckboxControl;
 exports.CheckboxInput = CheckboxInput;
-//# sourceMappingURL=Checkbox.cjs.map
+
+//# sourceMappingURL=Checkbox.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","sources":["../../../../../src/components/Form/Controls/Checkbox/Checkbox.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} from \"react\";\nimport CheckIcon from \"@vector-im/compound-design-tokens/assets/web/icons/check\";\nimport { Control } from \"@radix-ui/react-form\";\n\nimport styles from \"./Checkbox.module.css\";\n\ntype Props = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n} & Omit<ComponentProps<\"input\">, \"type\">;\n\n/**\n * A styled checkbox input, for standalone use.\n */\nexport const CheckboxInput = forwardRef<HTMLInputElement, Props>(\n  function Checkbox({ className, ...props }, ref) {\n    const classes = classnames(styles.container, className);\n    return (\n      <div className={classes}>\n        <input ref={ref} className={styles.input} {...props} type=\"checkbox\" />\n        <div className={styles.ui}>\n          <CheckIcon aria-hidden={true} />\n        </div>\n      </div>\n    );\n  },\n);\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const CheckboxControl = forwardRef<\n  ComponentRef<typeof CheckboxInput>,\n  ComponentProps<typeof CheckboxInput>\n>(function CheckboxControl(props, ref) {\n  return (\n    <Control asChild>\n      <CheckboxInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":["forwardRef","classnames","styles","jsxs","jsx","CheckboxControl","Control"],"mappings":";;;;;;;;AA8BO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,SAAS,SAAS,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AAC9C,UAAM,UAAUC,WAAWC,wBAAO,WAAW,SAAS;AACtD,WACEC,2BAAAA,KAAC,OAAA,EAAI,WAAW,SACd,UAAA;AAAA,MAAAC,2BAAAA,IAAC,SAAA,EAAM,KAAU,WAAWF,gBAAAA,QAAO,OAAQ,GAAG,OAAO,MAAK,YAAW;AAAA,MACrEE,2BAAAA,IAAC,SAAI,WAAWF,gBAAAA,QAAO,IACrB,UAAAE,2BAAAA,IAAC,WAAA,EAAU,eAAa,KAAA,CAAM,EAAA,CAChC;AAAA,IAAA,GACF;AAAA,EAEJ;AACF;AAKO,MAAM,kBAAkBJ,MAAAA,WAG7B,SAASK,iBAAgB,OAAO,KAAK;AACrC,SACED,2BAAAA,IAACE,UAAAA,WAAQ,SAAO,MACd,yCAAC,eAAA,EAAc,KAAW,GAAG,MAAA,CAAO,EAAA,CACtC;AAEJ,CAAC;;;"}
+{"version":3,"file":"Checkbox.cjs","names":[],"sources":["../../../../../src/components/Form/Controls/Checkbox/Checkbox.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} from \"react\";\nimport CheckIcon from \"@vector-im/compound-design-tokens/assets/web/icons/check\";\nimport { Control } from \"@radix-ui/react-form\";\n\nimport styles from \"./Checkbox.module.css\";\n\ntype Props = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n} & Omit<ComponentProps<\"input\">, \"type\">;\n\n/**\n * A styled checkbox input, for standalone use.\n */\nexport const CheckboxInput = forwardRef<HTMLInputElement, Props>(\n  function Checkbox({ className, ...props }, ref) {\n    const classes = classnames(styles.container, className);\n    return (\n      <div className={classes}>\n        <input ref={ref} className={styles.input} {...props} type=\"checkbox\" />\n        <div className={styles.ui}>\n          <CheckIcon aria-hidden={true} />\n        </div>\n      </div>\n    );\n  },\n);\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const CheckboxControl = forwardRef<\n  ComponentRef<typeof CheckboxInput>,\n  ComponentProps<typeof CheckboxInput>\n>(function CheckboxControl(props, ref) {\n  return (\n    <Control asChild>\n      <CheckboxInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;AA8BA,IAAa,iBAAA,GAAA,MAAA,YACX,SAAS,SAAS,EAAE,WAAW,GAAG,SAAS,KAAK;AAE9C,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,YAAA,GAAA,WAAA,SAFoB,wBAAA,QAAO,WAAW,UAAU;YAErD,CACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;GAAY;GAAK,WAAW,wBAAA,QAAO;GAAO,GAAI;GAAO,MAAK;GAAa,CAAA,EACvE,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,WAAW,wBAAA,QAAO;aACrB,iBAAA,GAAA,kBAAA,KAAC,yDAAA,SAAD,EAAW,eAAa,MAAQ,CAAA;GAC5B,CAAA,CACF;;EAGX;;;;AAKD,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/Checkbox/Checkbox.js

@@ -1,23 +1,40 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import Checkbox_module_default from "./Checkbox.module.js";
 import classNames from "classnames";
 import { forwardRef } from "react";
-import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Control } from "@radix-ui/react-form";
-import styles from "./Checkbox.module.css.js";
-const CheckboxInput = forwardRef(
-  function Checkbox({ className, ...props }, ref) {
-    const classes = classNames(styles.container, className);
-    return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-      /* @__PURE__ */ jsx("input", { ref, className: styles.input, ...props, type: "checkbox" }),
-      /* @__PURE__ */ jsx("div", { className: styles.ui, children: /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": true }) })
-    ] });
-  }
-);
-const CheckboxControl = forwardRef(function CheckboxControl2(props, ref) {
-  return /* @__PURE__ */ jsx(Control, { asChild: true, children: /* @__PURE__ */ jsx(CheckboxInput, { ref, ...props }) });
+import Check from "@vector-im/compound-design-tokens/assets/web/icons/check";
+//#region src/components/Form/Controls/Checkbox/Checkbox.tsx
+/**
+* A styled checkbox input, for standalone use.
+*/
+var CheckboxInput = forwardRef(function Checkbox({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames(Checkbox_module_default.container, className),
+		children: [/* @__PURE__ */ jsx("input", {
+			ref,
+			className: Checkbox_module_default.input,
+			...props,
+			type: "checkbox"
+		}), /* @__PURE__ */ jsx("div", {
+			className: Checkbox_module_default.ui,
+			children: /* @__PURE__ */ jsx(Check, { "aria-hidden": true })
+		})]
+	});
+});
+/**
+* A styled checkbox input wrapped in a `Control` component, for use in Radix forms.
+*/
+var CheckboxControl = forwardRef(function CheckboxControl(props, ref) {
+	return /* @__PURE__ */ jsx(Control, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(CheckboxInput, {
+			ref,
+			...props
+		})
+	});
 });
-export {
-  CheckboxControl,
-  CheckboxInput
-};
-//# sourceMappingURL=Checkbox.js.map
+//#endregion
+export { CheckboxControl, CheckboxInput };
+
+//# sourceMappingURL=Checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/Form/Controls/Checkbox/Checkbox.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} from \"react\";\nimport CheckIcon from \"@vector-im/compound-design-tokens/assets/web/icons/check\";\nimport { Control } from \"@radix-ui/react-form\";\n\nimport styles from \"./Checkbox.module.css\";\n\ntype Props = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n} & Omit<ComponentProps<\"input\">, \"type\">;\n\n/**\n * A styled checkbox input, for standalone use.\n */\nexport const CheckboxInput = forwardRef<HTMLInputElement, Props>(\n  function Checkbox({ className, ...props }, ref) {\n    const classes = classnames(styles.container, className);\n    return (\n      <div className={classes}>\n        <input ref={ref} className={styles.input} {...props} type=\"checkbox\" />\n        <div className={styles.ui}>\n          <CheckIcon aria-hidden={true} />\n        </div>\n      </div>\n    );\n  },\n);\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const CheckboxControl = forwardRef<\n  ComponentRef<typeof CheckboxInput>,\n  ComponentProps<typeof CheckboxInput>\n>(function CheckboxControl(props, ref) {\n  return (\n    <Control asChild>\n      <CheckboxInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":["classnames","CheckboxControl"],"mappings":";;;;;;AA8BO,MAAM,gBAAgB;AAAA,EAC3B,SAAS,SAAS,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AAC9C,UAAM,UAAUA,WAAW,OAAO,WAAW,SAAS;AACtD,WACE,qBAAC,OAAA,EAAI,WAAW,SACd,UAAA;AAAA,MAAA,oBAAC,SAAA,EAAM,KAAU,WAAW,OAAO,OAAQ,GAAG,OAAO,MAAK,YAAW;AAAA,MACrE,oBAAC,SAAI,WAAW,OAAO,IACrB,UAAA,oBAAC,WAAA,EAAU,eAAa,KAAA,CAAM,EAAA,CAChC;AAAA,IAAA,GACF;AAAA,EAEJ;AACF;AAKO,MAAM,kBAAkB,WAG7B,SAASC,iBAAgB,OAAO,KAAK;AACrC,SACE,oBAAC,WAAQ,SAAO,MACd,8BAAC,eAAA,EAAc,KAAW,GAAG,MAAA,CAAO,EAAA,CACtC;AAEJ,CAAC;"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../../../src/components/Form/Controls/Checkbox/Checkbox.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} from \"react\";\nimport CheckIcon from \"@vector-im/compound-design-tokens/assets/web/icons/check\";\nimport { Control } from \"@radix-ui/react-form\";\n\nimport styles from \"./Checkbox.module.css\";\n\ntype Props = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n} & Omit<ComponentProps<\"input\">, \"type\">;\n\n/**\n * A styled checkbox input, for standalone use.\n */\nexport const CheckboxInput = forwardRef<HTMLInputElement, Props>(\n  function Checkbox({ className, ...props }, ref) {\n    const classes = classnames(styles.container, className);\n    return (\n      <div className={classes}>\n        <input ref={ref} className={styles.input} {...props} type=\"checkbox\" />\n        <div className={styles.ui}>\n          <CheckIcon aria-hidden={true} />\n        </div>\n      </div>\n    );\n  },\n);\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const CheckboxControl = forwardRef<\n  ComponentRef<typeof CheckboxInput>,\n  ComponentProps<typeof CheckboxInput>\n>(function CheckboxControl(props, ref) {\n  return (\n    <Control asChild>\n      <CheckboxInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"mappings":";;;;;;;;;;AA8BA,IAAa,gBAAgB,WAC3B,SAAS,SAAS,EAAE,WAAW,GAAG,SAAS,KAAK;AAE9C,QACE,qBAAC,OAAD;EAAK,WAFS,WAAW,wBAAO,WAAW,UAAU;YAErD,CACE,oBAAC,SAAD;GAAY;GAAK,WAAW,wBAAO;GAAO,GAAI;GAAO,MAAK;GAAa,CAAA,EACvE,oBAAC,OAAD;GAAK,WAAW,wBAAO;aACrB,oBAAC,OAAD,EAAW,eAAa,MAAQ,CAAA;GAC5B,CAAA,CACF;;EAGX;;;;AAKD,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/Checkbox/Checkbox.module.cjs

@@ -0,0 +1,9 @@
+var Checkbox_module_default = {
+	container: "_container_153f2_10",
+	input: "_input_153f2_18",
+	ui: "_ui_153f2_19"
+};
+//#endregion
+exports.default = Checkbox_module_default;
+
+//# sourceMappingURL=Checkbox.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.module.cjs","names":[],"sources":["../../../../../src/components/Form/Controls/Checkbox/Checkbox.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: 4px; /* TODO: Ought to be a token */\n  border: 1px solid;\n  border-color: var(--cpd-color-border-interactive-primary);\n}\n\n.ui svg {\n  inline-size: var(--size);\n  block-size: var(--size);\n\n  /* compensate for the parent border */\n  margin: -1px;\n\n  /** Default, rest state */\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}\n\n.input:checked + .ui svg {\n  color: var(--cpd-color-icon-on-solid-primary);\n}\n\n.input:focus-visible + .ui {\n  outline: 2px solid var(--cpd-color-border-focused);\n  outline-offset: 1px;\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[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]: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 svg {\n  color: var(--cpd-color-icon-secondary);\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 svg {\n    color: var(--cpd-color-icon-quaternary);\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], :checked, [readonly]) + .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/Checkbox/Checkbox.module.js

@@ -0,0 +1,9 @@
+var Checkbox_module_default = {
+	container: "_container_153f2_10",
+	input: "_input_153f2_18",
+	ui: "_ui_153f2_19"
+};
+//#endregion
+export { Checkbox_module_default as default };
+
+//# sourceMappingURL=Checkbox.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.module.js","names":[],"sources":["../../../../../src/components/Form/Controls/Checkbox/Checkbox.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: 4px; /* TODO: Ought to be a token */\n  border: 1px solid;\n  border-color: var(--cpd-color-border-interactive-primary);\n}\n\n.ui svg {\n  inline-size: var(--size);\n  block-size: var(--size);\n\n  /* compensate for the parent border */\n  margin: -1px;\n\n  /** Default, rest state */\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}\n\n.input:checked + .ui svg {\n  color: var(--cpd-color-icon-on-solid-primary);\n}\n\n.input:focus-visible + .ui {\n  outline: 2px solid var(--cpd-color-border-focused);\n  outline-offset: 1px;\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[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]: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 svg {\n  color: var(--cpd-color-icon-secondary);\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 svg {\n    color: var(--cpd-color-icon-quaternary);\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], :checked, [readonly]) + .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":""}