@vector-im/compound-web 8.4.0 → 9.0.1

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

@@ -1,33 +1,51 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const Label = require("../../Label.cjs");
-const Message = require("../../Message.cjs");
-const InlineField = require("../../InlineField.cjs");
-const reactForm = require("@radix-ui/react-form");
-const Toggle = require("../Toggle/Toggle.cjs");
-const SettingsToggleInput = React.forwardRef(function Toggle$1({ className, label, helpMessage, disabledMessage, name, ...props }, ref) {
-  const generatedId = React.useId();
-  const id = props.id ?? generatedId;
-  const content = /* @__PURE__ */ jsxRuntime.jsxs(
-    InlineField.InlineField,
-    {
-      className,
-      name,
-      control: /* @__PURE__ */ jsxRuntime.jsx(Toggle.ToggleInput, { id, ref, ...props }),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Label.Label, { htmlFor: id, children: label }),
-        helpMessage && /* @__PURE__ */ jsxRuntime.jsx(Message.HelpMessage, { children: helpMessage }),
-        disabledMessage && props.disabled && /* @__PURE__ */ jsxRuntime.jsx(Message.HelpMessage, { children: disabledMessage })
-      ]
-    }
-  );
-  return content;
+const require_runtime = require("../../../../_virtual/_rolldown/runtime.cjs");
+const require_Toggle = require("../Toggle/Toggle.cjs");
+const require_Label = require("../../Label.cjs");
+const require_Message = require("../../Message.cjs");
+const require_InlineField = require("../../InlineField.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_form = require("@radix-ui/react-form");
+//#region src/components/Form/Controls/SettingsToggle/SettingsToggle.tsx
+/**
+* A toggle component.
+*/
+var SettingsToggleInput = (0, react.forwardRef)(function Toggle({ className, label, helpMessage, disabledMessage, name, ...props }, ref) {
+	const generatedId = (0, react.useId)();
+	const id = props.id ?? generatedId;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_InlineField.InlineField, {
+		className,
+		name,
+		control: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Toggle.ToggleInput, {
+			id,
+			ref,
+			...props
+		}),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Label.Label, {
+				htmlFor: id,
+				children: label
+			}),
+			helpMessage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Message.HelpMessage, { children: helpMessage }),
+			disabledMessage && props.disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Message.HelpMessage, { children: disabledMessage })
+		]
+	});
 });
-const SettingsToggleControl = React.forwardRef(function ToggleControl(props, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactForm.Control, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(SettingsToggleInput, { ref, ...props }) });
+/**
+* A styled checkbox input wrapped in a `Control` component, for use in Radix forms.
+*/
+var SettingsToggleControl = (0, react.forwardRef)(function ToggleControl(props, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_form.Control, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingsToggleInput, {
+			ref,
+			...props
+		})
+	});
 });
+//#endregion
 exports.SettingsToggleControl = SettingsToggleControl;
 exports.SettingsToggleInput = SettingsToggleInput;
-//# sourceMappingURL=SettingsToggle.cjs.map
+
+//# sourceMappingURL=SettingsToggle.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"SettingsToggle.cjs","sources":["../../../../../src/components/Form/Controls/SettingsToggle/SettingsToggle.tsx"],"sourcesContent":["/*\nCopyright 2025 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 {\n  type ComponentProps,\n  type ComponentRef,\n  forwardRef,\n  type PropsWithChildren,\n  useId,\n} from \"react\";\nimport { ToggleInput } from \"../Toggle\";\nimport { Label } from \"../../Label\";\nimport { HelpMessage } from \"../../Message\";\nimport { InlineField } from \"../../InlineField\";\nimport React from \"react\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype SettingsToggleProps = {\n  /**\n   * The CSS class name for the containing field.\n   */\n  className?: string;\n  /**\n   * The field name.\n   */\n  name: string;\n  label: string;\n  /**\n   * Optional help text to display below the setting.\n   */\n  helpMessage?: string;\n  /**\n   * Optional help text to display below the setting.\n   */\n  disabledMessage?: string;\n} & Omit<ComponentProps<typeof ToggleInput>, \"type\">;\n\n/**\n * A toggle component.\n */\nexport const SettingsToggleInput = forwardRef<\n  HTMLInputElement,\n  PropsWithChildren<SettingsToggleProps>\n>(function Toggle(\n  { className, label, helpMessage, disabledMessage, name, ...props },\n  ref,\n) {\n  const generatedId = useId();\n  const id = props.id ?? generatedId;\n  const content = (\n    <InlineField\n      className={className}\n      name={name}\n      control={<ToggleInput id={id} ref={ref} {...props} />}\n    >\n      <Label htmlFor={id}>{label}</Label>\n      {helpMessage && <HelpMessage>{helpMessage}</HelpMessage>}\n      {disabledMessage && props.disabled && (\n        <HelpMessage>{disabledMessage}</HelpMessage>\n      )}\n    </InlineField>\n  );\n  return content;\n});\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const SettingsToggleControl = forwardRef<\n  ComponentRef<typeof SettingsToggleInput>,\n  ComponentProps<typeof SettingsToggleInput>\n>(function ToggleControl(props, ref) {\n  return (\n    <Control asChild>\n      <SettingsToggleInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":["forwardRef","Toggle","useId","jsxs","InlineField","jsx","ToggleInput","Label","HelpMessage","Control"],"mappings":";;;;;;;;;AA4CO,MAAM,sBAAsBA,MAAAA,WAGjC,SAASC,SACT,EAAE,WAAW,OAAO,aAAa,iBAAiB,MAAM,GAAG,MAAA,GAC3D,KACA;AACA,QAAM,cAAcC,MAAAA,MAAA;AACpB,QAAM,KAAK,MAAM,MAAM;AACvB,QAAM,UACJC,2BAAAA;AAAAA,IAACC,YAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAASC,2BAAAA,IAACC,oBAAA,EAAY,IAAQ,KAAW,GAAG,OAAO;AAAA,MAEnD,UAAA;AAAA,QAAAD,2BAAAA,IAACE,MAAAA,OAAA,EAAM,SAAS,IAAK,UAAA,OAAM;AAAA,QAC1B,eAAeF,2BAAAA,IAACG,QAAAA,aAAA,EAAa,UAAA,YAAA,CAAY;AAAA,QACzC,mBAAmB,MAAM,YACxBH,2BAAAA,IAACG,QAAAA,eAAa,UAAA,gBAAA,CAAgB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIpC,SAAO;AACT,CAAC;AAKM,MAAM,wBAAwBR,MAAAA,WAGnC,SAAS,cAAc,OAAO,KAAK;AACnC,SACEK,2BAAAA,IAACI,UAAAA,WAAQ,SAAO,MACd,yCAAC,qBAAA,EAAoB,KAAW,GAAG,MAAA,CAAO,EAAA,CAC5C;AAEJ,CAAC;;;"}
+{"version":3,"file":"SettingsToggle.cjs","names":[],"sources":["../../../../../src/components/Form/Controls/SettingsToggle/SettingsToggle.tsx"],"sourcesContent":["/*\nCopyright 2025 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 {\n  type ComponentProps,\n  type ComponentRef,\n  forwardRef,\n  type PropsWithChildren,\n  useId,\n} from \"react\";\nimport { ToggleInput } from \"../Toggle\";\nimport { Label } from \"../../Label\";\nimport { HelpMessage } from \"../../Message\";\nimport { InlineField } from \"../../InlineField\";\nimport React from \"react\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype SettingsToggleProps = {\n  /**\n   * The CSS class name for the containing field.\n   */\n  className?: string;\n  /**\n   * The field name.\n   */\n  name: string;\n  label: string;\n  /**\n   * Optional help text to display below the setting.\n   */\n  helpMessage?: string;\n  /**\n   * Optional help text to display below the setting.\n   */\n  disabledMessage?: string;\n} & Omit<ComponentProps<typeof ToggleInput>, \"type\">;\n\n/**\n * A toggle component.\n */\nexport const SettingsToggleInput = forwardRef<\n  HTMLInputElement,\n  PropsWithChildren<SettingsToggleProps>\n>(function Toggle(\n  { className, label, helpMessage, disabledMessage, name, ...props },\n  ref,\n) {\n  const generatedId = useId();\n  const id = props.id ?? generatedId;\n  const content = (\n    <InlineField\n      className={className}\n      name={name}\n      control={<ToggleInput id={id} ref={ref} {...props} />}\n    >\n      <Label htmlFor={id}>{label}</Label>\n      {helpMessage && <HelpMessage>{helpMessage}</HelpMessage>}\n      {disabledMessage && props.disabled && (\n        <HelpMessage>{disabledMessage}</HelpMessage>\n      )}\n    </InlineField>\n  );\n  return content;\n});\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const SettingsToggleControl = forwardRef<\n  ComponentRef<typeof SettingsToggleInput>,\n  ComponentProps<typeof SettingsToggleInput>\n>(function ToggleControl(props, ref) {\n  return (\n    <Control asChild>\n      <SettingsToggleInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;AA4CA,IAAa,uBAAA,GAAA,MAAA,YAGX,SAAS,OACT,EAAE,WAAW,OAAO,aAAa,iBAAiB,MAAM,GAAG,SAC3D,KACA;CACA,MAAM,eAAA,GAAA,MAAA,QAAqB;CAC3B,MAAM,KAAK,MAAM,MAAM;AAcvB,QAZE,iBAAA,GAAA,kBAAA,MAAC,oBAAA,aAAD;EACa;EACL;EACN,SAAS,iBAAA,GAAA,kBAAA,KAAC,eAAA,aAAD;GAAiB;GAAS;GAAK,GAAI;GAAS,CAAA;YAHvD;GAKE,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAD;IAAO,SAAS;cAAK;IAAc,CAAA;GAClC,eAAe,iBAAA,GAAA,kBAAA,KAAC,gBAAA,aAAD,EAAA,UAAc,aAA0B,CAAA;GACvD,mBAAmB,MAAM,YACxB,iBAAA,GAAA,kBAAA,KAAC,gBAAA,aAAD,EAAA,UAAc,iBAA8B,CAAA;GAElC;;EAGhB;;;;AAKF,IAAa,yBAAA,GAAA,MAAA,YAGX,SAAS,cAAc,OAAO,KAAK;AACnC,QACE,iBAAA,GAAA,kBAAA,KAAC,qBAAA,SAAD;EAAS,SAAA;YACP,iBAAA,GAAA,kBAAA,KAAC,qBAAD;GAA0B;GAAK,GAAI;GAAS,CAAA;EACpC,CAAA;EAEZ"}

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

@@ -1,33 +1,48 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
-import { Label } from "../../Label.js";
+import { ToggleInput } from "../Toggle/Toggle.js";
+import { Label as Label$1 } from "../../Label.js";
 import { HelpMessage } from "../../Message.js";
 import { InlineField } from "../../InlineField.js";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Control } from "@radix-ui/react-form";
-import { ToggleInput } from "../Toggle/Toggle.js";
-const SettingsToggleInput = forwardRef(function Toggle({ className, label, helpMessage, disabledMessage, name, ...props }, ref) {
-  const generatedId = useId();
-  const id = props.id ?? generatedId;
-  const content = /* @__PURE__ */ jsxs(
-    InlineField,
-    {
-      className,
-      name,
-      control: /* @__PURE__ */ jsx(ToggleInput, { id, ref, ...props }),
-      children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: id, children: label }),
-        helpMessage && /* @__PURE__ */ jsx(HelpMessage, { children: helpMessage }),
-        disabledMessage && props.disabled && /* @__PURE__ */ jsx(HelpMessage, { children: disabledMessage })
-      ]
-    }
-  );
-  return content;
+//#region src/components/Form/Controls/SettingsToggle/SettingsToggle.tsx
+/**
+* A toggle component.
+*/
+var SettingsToggleInput = forwardRef(function Toggle({ className, label, helpMessage, disabledMessage, name, ...props }, ref) {
+	const generatedId = useId();
+	const id = props.id ?? generatedId;
+	return /* @__PURE__ */ jsxs(InlineField, {
+		className,
+		name,
+		control: /* @__PURE__ */ jsx(ToggleInput, {
+			id,
+			ref,
+			...props
+		}),
+		children: [
+			/* @__PURE__ */ jsx(Label$1, {
+				htmlFor: id,
+				children: label
+			}),
+			helpMessage && /* @__PURE__ */ jsx(HelpMessage, { children: helpMessage }),
+			disabledMessage && props.disabled && /* @__PURE__ */ jsx(HelpMessage, { children: disabledMessage })
+		]
+	});
 });
-const SettingsToggleControl = forwardRef(function ToggleControl(props, ref) {
-  return /* @__PURE__ */ jsx(Control, { asChild: true, children: /* @__PURE__ */ jsx(SettingsToggleInput, { ref, ...props }) });
+/**
+* A styled checkbox input wrapped in a `Control` component, for use in Radix forms.
+*/
+var SettingsToggleControl = forwardRef(function ToggleControl(props, ref) {
+	return /* @__PURE__ */ jsx(Control, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(SettingsToggleInput, {
+			ref,
+			...props
+		})
+	});
 });
-export {
-  SettingsToggleControl,
-  SettingsToggleInput
-};
-//# sourceMappingURL=SettingsToggle.js.map
+//#endregion
+export { SettingsToggleControl, SettingsToggleInput };
+
+//# sourceMappingURL=SettingsToggle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SettingsToggle.js","sources":["../../../../../src/components/Form/Controls/SettingsToggle/SettingsToggle.tsx"],"sourcesContent":["/*\nCopyright 2025 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 {\n  type ComponentProps,\n  type ComponentRef,\n  forwardRef,\n  type PropsWithChildren,\n  useId,\n} from \"react\";\nimport { ToggleInput } from \"../Toggle\";\nimport { Label } from \"../../Label\";\nimport { HelpMessage } from \"../../Message\";\nimport { InlineField } from \"../../InlineField\";\nimport React from \"react\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype SettingsToggleProps = {\n  /**\n   * The CSS class name for the containing field.\n   */\n  className?: string;\n  /**\n   * The field name.\n   */\n  name: string;\n  label: string;\n  /**\n   * Optional help text to display below the setting.\n   */\n  helpMessage?: string;\n  /**\n   * Optional help text to display below the setting.\n   */\n  disabledMessage?: string;\n} & Omit<ComponentProps<typeof ToggleInput>, \"type\">;\n\n/**\n * A toggle component.\n */\nexport const SettingsToggleInput = forwardRef<\n  HTMLInputElement,\n  PropsWithChildren<SettingsToggleProps>\n>(function Toggle(\n  { className, label, helpMessage, disabledMessage, name, ...props },\n  ref,\n) {\n  const generatedId = useId();\n  const id = props.id ?? generatedId;\n  const content = (\n    <InlineField\n      className={className}\n      name={name}\n      control={<ToggleInput id={id} ref={ref} {...props} />}\n    >\n      <Label htmlFor={id}>{label}</Label>\n      {helpMessage && <HelpMessage>{helpMessage}</HelpMessage>}\n      {disabledMessage && props.disabled && (\n        <HelpMessage>{disabledMessage}</HelpMessage>\n      )}\n    </InlineField>\n  );\n  return content;\n});\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const SettingsToggleControl = forwardRef<\n  ComponentRef<typeof SettingsToggleInput>,\n  ComponentProps<typeof SettingsToggleInput>\n>(function ToggleControl(props, ref) {\n  return (\n    <Control asChild>\n      <SettingsToggleInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":[],"mappings":";;;;;;;AA4CO,MAAM,sBAAsB,WAGjC,SAAS,OACT,EAAE,WAAW,OAAO,aAAa,iBAAiB,MAAM,GAAG,MAAA,GAC3D,KACA;AACA,QAAM,cAAc,MAAA;AACpB,QAAM,KAAK,MAAM,MAAM;AACvB,QAAM,UACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS,oBAAC,aAAA,EAAY,IAAQ,KAAW,GAAG,OAAO;AAAA,MAEnD,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAM,SAAS,IAAK,UAAA,OAAM;AAAA,QAC1B,eAAe,oBAAC,aAAA,EAAa,UAAA,YAAA,CAAY;AAAA,QACzC,mBAAmB,MAAM,YACxB,oBAAC,eAAa,UAAA,gBAAA,CAAgB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIpC,SAAO;AACT,CAAC;AAKM,MAAM,wBAAwB,WAGnC,SAAS,cAAc,OAAO,KAAK;AACnC,SACE,oBAAC,WAAQ,SAAO,MACd,8BAAC,qBAAA,EAAoB,KAAW,GAAG,MAAA,CAAO,EAAA,CAC5C;AAEJ,CAAC;"}
+{"version":3,"file":"SettingsToggle.js","names":[],"sources":["../../../../../src/components/Form/Controls/SettingsToggle/SettingsToggle.tsx"],"sourcesContent":["/*\nCopyright 2025 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 {\n  type ComponentProps,\n  type ComponentRef,\n  forwardRef,\n  type PropsWithChildren,\n  useId,\n} from \"react\";\nimport { ToggleInput } from \"../Toggle\";\nimport { Label } from \"../../Label\";\nimport { HelpMessage } from \"../../Message\";\nimport { InlineField } from \"../../InlineField\";\nimport React from \"react\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype SettingsToggleProps = {\n  /**\n   * The CSS class name for the containing field.\n   */\n  className?: string;\n  /**\n   * The field name.\n   */\n  name: string;\n  label: string;\n  /**\n   * Optional help text to display below the setting.\n   */\n  helpMessage?: string;\n  /**\n   * Optional help text to display below the setting.\n   */\n  disabledMessage?: string;\n} & Omit<ComponentProps<typeof ToggleInput>, \"type\">;\n\n/**\n * A toggle component.\n */\nexport const SettingsToggleInput = forwardRef<\n  HTMLInputElement,\n  PropsWithChildren<SettingsToggleProps>\n>(function Toggle(\n  { className, label, helpMessage, disabledMessage, name, ...props },\n  ref,\n) {\n  const generatedId = useId();\n  const id = props.id ?? generatedId;\n  const content = (\n    <InlineField\n      className={className}\n      name={name}\n      control={<ToggleInput id={id} ref={ref} {...props} />}\n    >\n      <Label htmlFor={id}>{label}</Label>\n      {helpMessage && <HelpMessage>{helpMessage}</HelpMessage>}\n      {disabledMessage && props.disabled && (\n        <HelpMessage>{disabledMessage}</HelpMessage>\n      )}\n    </InlineField>\n  );\n  return content;\n});\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const SettingsToggleControl = forwardRef<\n  ComponentRef<typeof SettingsToggleInput>,\n  ComponentProps<typeof SettingsToggleInput>\n>(function ToggleControl(props, ref) {\n  return (\n    <Control asChild>\n      <SettingsToggleInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"mappings":";;;;;;;;;;;AA4CA,IAAa,sBAAsB,WAGjC,SAAS,OACT,EAAE,WAAW,OAAO,aAAa,iBAAiB,MAAM,GAAG,SAC3D,KACA;CACA,MAAM,cAAc,OAAO;CAC3B,MAAM,KAAK,MAAM,MAAM;AAcvB,QAZE,qBAAC,aAAD;EACa;EACL;EACN,SAAS,oBAAC,aAAD;GAAiB;GAAS;GAAK,GAAI;GAAS,CAAA;YAHvD;GAKE,oBAAC,SAAD;IAAO,SAAS;cAAK;IAAc,CAAA;GAClC,eAAe,oBAAC,aAAD,EAAA,UAAc,aAA0B,CAAA;GACvD,mBAAmB,MAAM,YACxB,oBAAC,aAAD,EAAA,UAAc,iBAA8B,CAAA;GAElC;;EAGhB;;;;AAKF,IAAa,wBAAwB,WAGnC,SAAS,cAAc,OAAO,KAAK;AACnC,QACE,oBAAC,SAAD;EAAS,SAAA;YACP,oBAAC,qBAAD;GAA0B;GAAK,GAAI;GAAS,CAAA;EACpC,CAAA;EAEZ"}

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

@@ -1,21 +1,37 @@
-"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 Text_module = require("./Text.module.css.cjs");
-const classNames = require("classnames");
-const TextInput = React.forwardRef(
-  function TextInput2({ className, enableLigatures, ...props }, ref) {
-    const classes = classNames(Text_module.default.control, className, {
-      [Text_module.default["enable-ligatures"]]: enableLigatures
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx("input", { ref, ...props, className: classes });
-  }
-);
-const TextControl = React.forwardRef(function TextControl2(props, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactForm.Control, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TextInput, { ref, ...props }) });
+const require_runtime = require("../../../../_virtual/_rolldown/runtime.cjs");
+const require_Text_module = require("./Text.module.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+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/Text/Text.tsx
+/**
+* A styled text input, for standalone use.
+*/
+var TextInput = (0, react.forwardRef)(function TextInput({ className, enableLigatures, ...props }, ref) {
+	const classes = (0, classnames.default)(require_Text_module.default.control, className, { [require_Text_module.default["enable-ligatures"]]: enableLigatures });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		ref,
+		...props,
+		className: classes
+	});
 });
+/**
+* A styled text input wrapped in a `Control` component, for use in Radix forms.
+*/
+var TextControl = (0, react.forwardRef)(function TextControl(props, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_form.Control, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInput, {
+			ref,
+			...props
+		})
+	});
+});
+//#endregion
 exports.TextControl = TextControl;
 exports.TextInput = TextInput;
-//# sourceMappingURL=Text.cjs.map
+
+//# sourceMappingURL=Text.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Text.cjs","sources":["../../../../../src/components/Form/Controls/Text/Text.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  forwardRef,\n  type ComponentProps,\n  type ComponentRef,\n} from \"react\";\nimport { Control } from \"@radix-ui/react-form\";\n\nimport styles from \"./Text.module.css\";\nimport classNames from \"classnames\";\n\ntype TextProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n\n  /**\n   * Enable contextual alternate ligatures on input text\n   * For example on an in-place editing field\n   * https://github.com/rsms/inter/issues/222\n   * https://github.com/rsms/inter/blob/master/src/features/calt.fea\n   */\n  enableLigatures?: boolean;\n} & ComponentProps<\"input\">;\n\n/**\n * A styled text input, for standalone use.\n */\nexport const TextInput = forwardRef<HTMLInputElement, TextProps>(\n  function TextInput({ className, enableLigatures, ...props }, ref) {\n    const classes = classNames(styles.control, className, {\n      [styles[\"enable-ligatures\"]]: enableLigatures,\n    });\n    return <input ref={ref} {...props} className={classes} />;\n  },\n);\n\n/**\n * A styled text input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const TextControl = forwardRef<\n  ComponentRef<typeof TextInput>,\n  ComponentProps<typeof TextInput>\n>(function TextControl(props, ref) {\n  return (\n    <Control asChild>\n      <TextInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":["forwardRef","TextInput","styles","TextControl","jsx","Control"],"mappings":";;;;;;;AAqCO,MAAM,YAAYA,MAAAA;AAAAA,EACvB,SAASC,WAAU,EAAE,WAAW,iBAAiB,GAAG,MAAA,GAAS,KAAK;AAChE,UAAM,UAAU,WAAWC,oBAAO,SAAS,WAAW;AAAA,MACpD,CAACA,YAAAA,QAAO,kBAAkB,CAAC,GAAG;AAAA,IAAA,CAC/B;AACD,0CAAQ,SAAA,EAAM,KAAW,GAAG,OAAO,WAAW,SAAS;AAAA,EACzD;AACF;AAKO,MAAM,cAAcF,MAAAA,WAGzB,SAASG,aAAY,OAAO,KAAK;AACjC,SACEC,2BAAAA,IAACC,UAAAA,WAAQ,SAAO,MACd,yCAAC,WAAA,EAAU,KAAW,GAAG,MAAA,CAAO,EAAA,CAClC;AAEJ,CAAC;;;"}
+{"version":3,"file":"Text.cjs","names":[],"sources":["../../../../../src/components/Form/Controls/Text/Text.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  forwardRef,\n  type ComponentProps,\n  type ComponentRef,\n} from \"react\";\nimport { Control } from \"@radix-ui/react-form\";\n\nimport styles from \"./Text.module.css\";\nimport classNames from \"classnames\";\n\ntype TextProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n\n  /**\n   * Enable contextual alternate ligatures on input text\n   * For example on an in-place editing field\n   * https://github.com/rsms/inter/issues/222\n   * https://github.com/rsms/inter/blob/master/src/features/calt.fea\n   */\n  enableLigatures?: boolean;\n} & ComponentProps<\"input\">;\n\n/**\n * A styled text input, for standalone use.\n */\nexport const TextInput = forwardRef<HTMLInputElement, TextProps>(\n  function TextInput({ className, enableLigatures, ...props }, ref) {\n    const classes = classNames(styles.control, className, {\n      [styles[\"enable-ligatures\"]]: enableLigatures,\n    });\n    return <input ref={ref} {...props} className={classes} />;\n  },\n);\n\n/**\n * A styled text input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const TextControl = forwardRef<\n  ComponentRef<typeof TextInput>,\n  ComponentProps<typeof TextInput>\n>(function TextControl(props, ref) {\n  return (\n    <Control asChild>\n      <TextInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"mappings":";;;;;;;;;;;;AAqCA,IAAa,aAAA,GAAA,MAAA,YACX,SAAS,UAAU,EAAE,WAAW,iBAAiB,GAAG,SAAS,KAAK;CAChE,MAAM,WAAA,GAAA,WAAA,SAAqB,oBAAA,QAAO,SAAS,WAAW,GACnD,oBAAA,QAAO,sBAAsB,iBAC/B,CAAC;AACF,QAAO,iBAAA,GAAA,kBAAA,KAAC,SAAD;EAAY;EAAK,GAAI;EAAO,WAAW;EAAW,CAAA;EAE5D;;;;AAKD,IAAa,eAAA,GAAA,MAAA,YAGX,SAAS,YAAY,OAAO,KAAK;AACjC,QACE,iBAAA,GAAA,kBAAA,KAAC,qBAAA,SAAD;EAAS,SAAA;YACP,iBAAA,GAAA,kBAAA,KAAC,WAAD;GAAgB;GAAK,GAAI;GAAS,CAAA;EAC1B,CAAA;EAEZ"}

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

@@ -1,21 +1,33 @@
-import { jsx } from "react/jsx-runtime";
+import Text_module_default from "./Text.module.js";
+import classNames from "classnames";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 import { Control } from "@radix-ui/react-form";
-import styles from "./Text.module.css.js";
-import classNames from "classnames";
-const TextInput = forwardRef(
-  function TextInput2({ className, enableLigatures, ...props }, ref) {
-    const classes = classNames(styles.control, className, {
-      [styles["enable-ligatures"]]: enableLigatures
-    });
-    return /* @__PURE__ */ jsx("input", { ref, ...props, className: classes });
-  }
-);
-const TextControl = forwardRef(function TextControl2(props, ref) {
-  return /* @__PURE__ */ jsx(Control, { asChild: true, children: /* @__PURE__ */ jsx(TextInput, { ref, ...props }) });
+//#region src/components/Form/Controls/Text/Text.tsx
+/**
+* A styled text input, for standalone use.
+*/
+var TextInput = forwardRef(function TextInput({ className, enableLigatures, ...props }, ref) {
+	const classes = classNames(Text_module_default.control, className, { [Text_module_default["enable-ligatures"]]: enableLigatures });
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		...props,
+		className: classes
+	});
+});
+/**
+* A styled text input wrapped in a `Control` component, for use in Radix forms.
+*/
+var TextControl = forwardRef(function TextControl(props, ref) {
+	return /* @__PURE__ */ jsx(Control, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(TextInput, {
+			ref,
+			...props
+		})
+	});
 });
-export {
-  TextControl,
-  TextInput
-};
-//# sourceMappingURL=Text.js.map
+//#endregion
+export { TextControl, TextInput };
+
+//# sourceMappingURL=Text.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../../../../../src/components/Form/Controls/Text/Text.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  forwardRef,\n  type ComponentProps,\n  type ComponentRef,\n} from \"react\";\nimport { Control } from \"@radix-ui/react-form\";\n\nimport styles from \"./Text.module.css\";\nimport classNames from \"classnames\";\n\ntype TextProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n\n  /**\n   * Enable contextual alternate ligatures on input text\n   * For example on an in-place editing field\n   * https://github.com/rsms/inter/issues/222\n   * https://github.com/rsms/inter/blob/master/src/features/calt.fea\n   */\n  enableLigatures?: boolean;\n} & ComponentProps<\"input\">;\n\n/**\n * A styled text input, for standalone use.\n */\nexport const TextInput = forwardRef<HTMLInputElement, TextProps>(\n  function TextInput({ className, enableLigatures, ...props }, ref) {\n    const classes = classNames(styles.control, className, {\n      [styles[\"enable-ligatures\"]]: enableLigatures,\n    });\n    return <input ref={ref} {...props} className={classes} />;\n  },\n);\n\n/**\n * A styled text input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const TextControl = forwardRef<\n  ComponentRef<typeof TextInput>,\n  ComponentProps<typeof TextInput>\n>(function TextControl(props, ref) {\n  return (\n    <Control asChild>\n      <TextInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":["TextInput","TextControl"],"mappings":";;;;;AAqCO,MAAM,YAAY;AAAA,EACvB,SAASA,WAAU,EAAE,WAAW,iBAAiB,GAAG,MAAA,GAAS,KAAK;AAChE,UAAM,UAAU,WAAW,OAAO,SAAS,WAAW;AAAA,MACpD,CAAC,OAAO,kBAAkB,CAAC,GAAG;AAAA,IAAA,CAC/B;AACD,+BAAQ,SAAA,EAAM,KAAW,GAAG,OAAO,WAAW,SAAS;AAAA,EACzD;AACF;AAKO,MAAM,cAAc,WAGzB,SAASC,aAAY,OAAO,KAAK;AACjC,SACE,oBAAC,WAAQ,SAAO,MACd,8BAAC,WAAA,EAAU,KAAW,GAAG,MAAA,CAAO,EAAA,CAClC;AAEJ,CAAC;"}
+{"version":3,"file":"Text.js","names":[],"sources":["../../../../../src/components/Form/Controls/Text/Text.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  forwardRef,\n  type ComponentProps,\n  type ComponentRef,\n} from \"react\";\nimport { Control } from \"@radix-ui/react-form\";\n\nimport styles from \"./Text.module.css\";\nimport classNames from \"classnames\";\n\ntype TextProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n\n  /**\n   * Enable contextual alternate ligatures on input text\n   * For example on an in-place editing field\n   * https://github.com/rsms/inter/issues/222\n   * https://github.com/rsms/inter/blob/master/src/features/calt.fea\n   */\n  enableLigatures?: boolean;\n} & ComponentProps<\"input\">;\n\n/**\n * A styled text input, for standalone use.\n */\nexport const TextInput = forwardRef<HTMLInputElement, TextProps>(\n  function TextInput({ className, enableLigatures, ...props }, ref) {\n    const classes = classNames(styles.control, className, {\n      [styles[\"enable-ligatures\"]]: enableLigatures,\n    });\n    return <input ref={ref} {...props} className={classes} />;\n  },\n);\n\n/**\n * A styled text input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const TextControl = forwardRef<\n  ComponentRef<typeof TextInput>,\n  ComponentProps<typeof TextInput>\n>(function TextControl(props, ref) {\n  return (\n    <Control asChild>\n      <TextInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"mappings":";;;;;;;;;AAqCA,IAAa,YAAY,WACvB,SAAS,UAAU,EAAE,WAAW,iBAAiB,GAAG,SAAS,KAAK;CAChE,MAAM,UAAU,WAAW,oBAAO,SAAS,WAAW,GACnD,oBAAO,sBAAsB,iBAC/B,CAAC;AACF,QAAO,oBAAC,SAAD;EAAY;EAAK,GAAI;EAAO,WAAW;EAAW,CAAA;EAE5D;;;;AAKD,IAAa,cAAc,WAGzB,SAAS,YAAY,OAAO,KAAK;AACjC,QACE,oBAAC,SAAD;EAAS,SAAA;YACP,oBAAC,WAAD;GAAgB;GAAK,GAAI;GAAS,CAAA;EAC1B,CAAA;EAEZ"}

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

@@ -0,0 +1,8 @@
+var Text_module_default = {
+	control: "_control_sqdq4_10",
+	"enable-ligatures": "_enable-ligatures_sqdq4_62"
+};
+//#endregion
+exports.default = Text_module_default;
+
+//# sourceMappingURL=Text.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.module.cjs","names":[],"sources":["../../../../../src/components/Form/Controls/Text/Text.module.css"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\nCopyright 2023 New Vector Ltd\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.control {\n  border: 1px solid var(--cpd-color-border-interactive-primary);\n  background: var(--cpd-color-bg-canvas-default);\n  border-radius: 0.5rem;\n  padding: var(--cpd-space-3x) var(--cpd-space-4x);\n  box-sizing: border-box;\n\n  /**\n  * Disable contextual alternate ligatures in inputs\n  * https://github.com/rsms/inter/issues/222\n  * https://github.com/rsms/inter/blob/master/src/features/calt.fea\n  */\n  font-feature-settings: \"calt\" 0;\n}\n\n@media (hover) {\n  .control:hover {\n    border-color: var(--cpd-color-border-interactive-hovered);\n\n    /** TODO: have the shadow in the design tokens */\n    box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);\n  }\n}\n\n.control:active {\n  border-color: var(--cpd-color-border-interactive-hovered);\n}\n\n.control:focus {\n  outline: 2px solid var(--cpd-color-border-focused);\n  border-color: transparent;\n}\n\n.control[data-invalid] {\n  border-color: var(--cpd-color-text-critical-primary);\n}\n\n.control:disabled {\n  box-shadow: none;\n  background: var(--cpd-color-bg-canvas-disabled);\n  border-color: var(--cpd-color-border-disabled);\n  color: var(--cpd-color-text-disabled);\n  cursor: not-allowed;\n}\n\n.control[readonly] {\n  box-shadow: none;\n  background: var(--cpd-color-bg-subtle-secondary);\n  border-color: var(--cpd-color-bg-subtle-secondary);\n  color: var(--cpd-color-text-secondary);\n}\n\n.control.enable-ligatures {\n  font-feature-settings: var(--cpd-font-feature-settings);\n}\n"],"mappings":""}

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

@@ -0,0 +1,8 @@
+var Text_module_default = {
+	control: "_control_sqdq4_10",
+	"enable-ligatures": "_enable-ligatures_sqdq4_62"
+};
+//#endregion
+export { Text_module_default as default };
+
+//# sourceMappingURL=Text.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.module.js","names":[],"sources":["../../../../../src/components/Form/Controls/Text/Text.module.css"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\nCopyright 2023 New Vector Ltd\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.control {\n  border: 1px solid var(--cpd-color-border-interactive-primary);\n  background: var(--cpd-color-bg-canvas-default);\n  border-radius: 0.5rem;\n  padding: var(--cpd-space-3x) var(--cpd-space-4x);\n  box-sizing: border-box;\n\n  /**\n  * Disable contextual alternate ligatures in inputs\n  * https://github.com/rsms/inter/issues/222\n  * https://github.com/rsms/inter/blob/master/src/features/calt.fea\n  */\n  font-feature-settings: \"calt\" 0;\n}\n\n@media (hover) {\n  .control:hover {\n    border-color: var(--cpd-color-border-interactive-hovered);\n\n    /** TODO: have the shadow in the design tokens */\n    box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);\n  }\n}\n\n.control:active {\n  border-color: var(--cpd-color-border-interactive-hovered);\n}\n\n.control:focus {\n  outline: 2px solid var(--cpd-color-border-focused);\n  border-color: transparent;\n}\n\n.control[data-invalid] {\n  border-color: var(--cpd-color-text-critical-primary);\n}\n\n.control:disabled {\n  box-shadow: none;\n  background: var(--cpd-color-bg-canvas-disabled);\n  border-color: var(--cpd-color-border-disabled);\n  color: var(--cpd-color-text-disabled);\n  cursor: not-allowed;\n}\n\n.control[readonly] {\n  box-shadow: none;\n  background: var(--cpd-color-bg-subtle-secondary);\n  border-color: var(--cpd-color-bg-subtle-secondary);\n  color: var(--cpd-color-text-secondary);\n}\n\n.control.enable-ligatures {\n  font-feature-settings: var(--cpd-font-feature-settings);\n}\n"],"mappings":""}

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

@@ -1,29 +1,41 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const classNames = require("classnames");
-const React = require("react");
-const Toggle_module = require("./Toggle.module.css.cjs");
-const reactForm = require("@radix-ui/react-form");
-const ToggleInput = React.forwardRef(function Toggle({ className, ...props }, ref) {
-  const classes = classNames(Toggle_module.default.container, className);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        role: "switch",
-        ref,
-        className: Toggle_module.default.input,
-        ...props,
-        type: "checkbox"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: Toggle_module.default.ui })
-  ] });
+const require_runtime = require("../../../../_virtual/_rolldown/runtime.cjs");
+const require_Toggle_module = require("./Toggle.module.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+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/Toggle/Toggle.tsx
+/**
+* A toggle component.
+*/
+var ToggleInput = (0, react.forwardRef)(function Toggle({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, classnames.default)(require_Toggle_module.default.container, className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			role: "switch",
+			ref,
+			className: require_Toggle_module.default.input,
+			...props,
+			type: "checkbox"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_Toggle_module.default.ui })]
+	});
 });
-const ToggleControl = React.forwardRef(function ToggleControl2(props, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactForm.Control, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ToggleInput, { ref, ...props }) });
+/**
+* A styled checkbox input wrapped in a `Control` component, for use in Radix forms.
+*/
+var ToggleControl = (0, react.forwardRef)(function ToggleControl(props, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_form.Control, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleInput, {
+			ref,
+			...props
+		})
+	});
 });
+//#endregion
 exports.ToggleControl = ToggleControl;
 exports.ToggleInput = ToggleInput;
-//# sourceMappingURL=Toggle.cjs.map
+
+//# sourceMappingURL=Toggle.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.cjs","sources":["../../../../../src/components/Form/Controls/Toggle/Toggle.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 styles from \"./Toggle.module.css\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype ToggleProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n} & Omit<ComponentProps<\"input\">, \"type\">;\n\n/**\n * A toggle component.\n */\nexport const ToggleInput = forwardRef<\n  HTMLInputElement,\n  PropsWithChildren<ToggleProps>\n>(function Toggle({ className, ...props }, ref) {\n  const classes = classnames(styles.container, className);\n  return (\n    <div className={classes}>\n      <input\n        role=\"switch\"\n        ref={ref}\n        className={styles.input}\n        {...props}\n        type=\"checkbox\"\n      />\n      <div className={styles.ui} />\n    </div>\n  );\n});\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const ToggleControl = forwardRef<\n  ComponentRef<typeof ToggleInput>,\n  ComponentProps<typeof ToggleInput>\n>(function ToggleControl(props, ref) {\n  return (\n    <Control asChild>\n      <ToggleInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":["forwardRef","classnames","styles","jsxs","jsx","ToggleControl","Control"],"mappings":";;;;;;;AA6BO,MAAM,cAAcA,MAAAA,WAGzB,SAAS,OAAO,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AAC9C,QAAM,UAAUC,WAAWC,sBAAO,WAAW,SAAS;AACtD,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAW,SACd,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,WAAWF,cAAAA,QAAO;AAAA,QACjB,GAAG;AAAA,QACJ,MAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAEPE,2BAAAA,IAAC,OAAA,EAAI,WAAWF,cAAAA,QAAO,GAAA,CAAI;AAAA,EAAA,GAC7B;AAEJ,CAAC;AAKM,MAAM,gBAAgBF,MAAAA,WAG3B,SAASK,eAAc,OAAO,KAAK;AACnC,SACED,2BAAAA,IAACE,UAAAA,WAAQ,SAAO,MACd,yCAAC,aAAA,EAAY,KAAW,GAAG,MAAA,CAAO,EAAA,CACpC;AAEJ,CAAC;;;"}
+{"version":3,"file":"Toggle.cjs","names":[],"sources":["../../../../../src/components/Form/Controls/Toggle/Toggle.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 styles from \"./Toggle.module.css\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype ToggleProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n} & Omit<ComponentProps<\"input\">, \"type\">;\n\n/**\n * A toggle component.\n */\nexport const ToggleInput = forwardRef<\n  HTMLInputElement,\n  PropsWithChildren<ToggleProps>\n>(function Toggle({ className, ...props }, ref) {\n  const classes = classnames(styles.container, className);\n  return (\n    <div className={classes}>\n      <input\n        role=\"switch\"\n        ref={ref}\n        className={styles.input}\n        {...props}\n        type=\"checkbox\"\n      />\n      <div className={styles.ui} />\n    </div>\n  );\n});\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const ToggleControl = forwardRef<\n  ComponentRef<typeof ToggleInput>,\n  ComponentProps<typeof ToggleInput>\n>(function ToggleControl(props, ref) {\n  return (\n    <Control asChild>\n      <ToggleInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"mappings":";;;;;;;;;;;;AA6BA,IAAa,eAAA,GAAA,MAAA,YAGX,SAAS,OAAO,EAAE,WAAW,GAAG,SAAS,KAAK;AAE9C,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,YAAA,GAAA,WAAA,SAFoB,sBAAA,QAAO,WAAW,UAAU;YAErD,CACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;GACE,MAAK;GACA;GACL,WAAW,sBAAA,QAAO;GAClB,GAAI;GACJ,MAAK;GACL,CAAA,EACF,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAW,sBAAA,QAAO,IAAM,CAAA,CACzB;;EAER;;;;AAKF,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/Toggle/Toggle.js

@@ -1,29 +1,37 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import Toggle_module_default from "./Toggle.module.js";
 import classNames from "classnames";
 import { forwardRef } from "react";
-import styles from "./Toggle.module.css.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Control } from "@radix-ui/react-form";
-const ToggleInput = forwardRef(function Toggle({ className, ...props }, ref) {
-  const classes = classNames(styles.container, className);
-  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        role: "switch",
-        ref,
-        className: styles.input,
-        ...props,
-        type: "checkbox"
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: styles.ui })
-  ] });
+//#region src/components/Form/Controls/Toggle/Toggle.tsx
+/**
+* A toggle component.
+*/
+var ToggleInput = forwardRef(function Toggle({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames(Toggle_module_default.container, className),
+		children: [/* @__PURE__ */ jsx("input", {
+			role: "switch",
+			ref,
+			className: Toggle_module_default.input,
+			...props,
+			type: "checkbox"
+		}), /* @__PURE__ */ jsx("div", { className: Toggle_module_default.ui })]
+	});
 });
-const ToggleControl = forwardRef(function ToggleControl2(props, ref) {
-  return /* @__PURE__ */ jsx(Control, { asChild: true, children: /* @__PURE__ */ jsx(ToggleInput, { ref, ...props }) });
+/**
+* A styled checkbox input wrapped in a `Control` component, for use in Radix forms.
+*/
+var ToggleControl = forwardRef(function ToggleControl(props, ref) {
+	return /* @__PURE__ */ jsx(Control, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(ToggleInput, {
+			ref,
+			...props
+		})
+	});
 });
-export {
-  ToggleControl,
-  ToggleInput
-};
-//# sourceMappingURL=Toggle.js.map
+//#endregion
+export { ToggleControl, ToggleInput };
+
+//# sourceMappingURL=Toggle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../../../../src/components/Form/Controls/Toggle/Toggle.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 styles from \"./Toggle.module.css\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype ToggleProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n} & Omit<ComponentProps<\"input\">, \"type\">;\n\n/**\n * A toggle component.\n */\nexport const ToggleInput = forwardRef<\n  HTMLInputElement,\n  PropsWithChildren<ToggleProps>\n>(function Toggle({ className, ...props }, ref) {\n  const classes = classnames(styles.container, className);\n  return (\n    <div className={classes}>\n      <input\n        role=\"switch\"\n        ref={ref}\n        className={styles.input}\n        {...props}\n        type=\"checkbox\"\n      />\n      <div className={styles.ui} />\n    </div>\n  );\n});\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const ToggleControl = forwardRef<\n  ComponentRef<typeof ToggleInput>,\n  ComponentProps<typeof ToggleInput>\n>(function ToggleControl(props, ref) {\n  return (\n    <Control asChild>\n      <ToggleInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":["classnames","ToggleControl"],"mappings":";;;;;AA6BO,MAAM,cAAc,WAGzB,SAAS,OAAO,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AAC9C,QAAM,UAAUA,WAAW,OAAO,WAAW,SAAS;AACtD,SACE,qBAAC,OAAA,EAAI,WAAW,SACd,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,WAAW,OAAO;AAAA,QACjB,GAAG;AAAA,QACJ,MAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAEP,oBAAC,OAAA,EAAI,WAAW,OAAO,GAAA,CAAI;AAAA,EAAA,GAC7B;AAEJ,CAAC;AAKM,MAAM,gBAAgB,WAG3B,SAASC,eAAc,OAAO,KAAK;AACnC,SACE,oBAAC,WAAQ,SAAO,MACd,8BAAC,aAAA,EAAY,KAAW,GAAG,MAAA,CAAO,EAAA,CACpC;AAEJ,CAAC;"}
+{"version":3,"file":"Toggle.js","names":[],"sources":["../../../../../src/components/Form/Controls/Toggle/Toggle.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 styles from \"./Toggle.module.css\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype ToggleProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n} & Omit<ComponentProps<\"input\">, \"type\">;\n\n/**\n * A toggle component.\n */\nexport const ToggleInput = forwardRef<\n  HTMLInputElement,\n  PropsWithChildren<ToggleProps>\n>(function Toggle({ className, ...props }, ref) {\n  const classes = classnames(styles.container, className);\n  return (\n    <div className={classes}>\n      <input\n        role=\"switch\"\n        ref={ref}\n        className={styles.input}\n        {...props}\n        type=\"checkbox\"\n      />\n      <div className={styles.ui} />\n    </div>\n  );\n});\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const ToggleControl = forwardRef<\n  ComponentRef<typeof ToggleInput>,\n  ComponentProps<typeof ToggleInput>\n>(function ToggleControl(props, ref) {\n  return (\n    <Control asChild>\n      <ToggleInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"mappings":";;;;;;;;;AA6BA,IAAa,cAAc,WAGzB,SAAS,OAAO,EAAE,WAAW,GAAG,SAAS,KAAK;AAE9C,QACE,qBAAC,OAAD;EAAK,WAFS,WAAW,sBAAO,WAAW,UAAU;YAErD,CACE,oBAAC,SAAD;GACE,MAAK;GACA;GACL,WAAW,sBAAO;GAClB,GAAI;GACJ,MAAK;GACL,CAAA,EACF,oBAAC,OAAD,EAAK,WAAW,sBAAO,IAAM,CAAA,CACzB;;EAER;;;;AAKF,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/Toggle/Toggle.module.cjs

@@ -0,0 +1,9 @@
+var Toggle_module_default = {
+	container: "_container_udcm8_10",
+	input: "_input_udcm8_24",
+	ui: "_ui_udcm8_34"
+};
+//#endregion
+exports.default = Toggle_module_default;
+
+//# sourceMappingURL=Toggle.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.module.cjs","names":[],"sources":["../../../../../src/components/Form/Controls/Toggle/Toggle.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  display: grid;\n  inline-size: 2.25rem;\n  block-size: 1.25rem;\n  box-sizing: border-box;\n}\n\n.container > * {\n  grid-area: 1/1;\n  inline-size: inherit;\n  block-size: inherit;\n  box-sizing: inherit;\n}\n\n.container > .input {\n  opacity: 0;\n  margin: 0;\n  cursor: pointer;\n}\n\n.container > .input[disabled] {\n  cursor: not-allowed;\n}\n\n.ui {\n  pointer-events: none;\n  border-radius: var(--cpd-radius-pill-effect);\n  border: 1px solid var(--cpd-color-border-interactive-primary);\n  background: var(--cpd-color-bg-canvas-default);\n  position: relative;\n  padding: 1px;\n  transition-duration: 0.2s;\n  transition-timing-function: ease-in-out;\n  transition-property: background-color, border-color;\n}\n\n.input:checked + .ui {\n  background: var(--cpd-color-bg-accent-rest);\n  border-color: var(--cpd-color-bg-accent-rest);\n}\n\n.ui::after {\n  --dot-color: var(--cpd-color-icon-secondary);\n\n  content: \"\";\n  display: block;\n  block-size: 100%;\n  aspect-ratio: 1 / 1;\n  border-radius: 50%;\n  background: var(--dot-color);\n\n  /* Additional style to ensure visibility in contrast-mode */\n  border: 1px solid var(--dot-color);\n  box-sizing: border-box;\n  transform: translateX(0);\n  transition-duration: 0.2s;\n  transition-timing-function: ease-in-out;\n  transition-property: background-color, transform;\n}\n\n/* Note the use of :focus-visible rather than :focus to avoid showing the focus\nring after a simple click */\n.input:focus-visible + .ui {\n  outline: 2px solid var(--cpd-color-border-focused);\n  outline-offset: 1px;\n}\n\n:checked + .ui::after {\n  --dot-color: var(--cpd-color-icon-on-solid-primary);\n\n  transform: translateX(100%);\n}\n\n@media (hover) {\n  :checked:not([disabled]):hover + .ui {\n    background: var(--cpd-color-bg-accent-hovered);\n    border-color: var(--cpd-color-bg-accent-hovered);\n  }\n}\n\n:checked:active + .ui {\n  background: var(--cpd-color-bg-accent-hovered);\n  border-color: var(--cpd-color-bg-accent-hovered);\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[readonly] + .ui::after {\n  --dot-color: var(--cpd-color-icon-secondary);\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] + .ui::after {\n  --dot-color: var(--cpd-color-bg-action-primary-disabled);\n}\n\n.input[readonly]:checked + .ui {\n  border-color: var(--cpd-color-icon-secondary);\n  background: var(--cpd-color-icon-secondary);\n}\n\n.input[readonly]:checked + .ui::after {\n  --dot-color: var(--cpd-color-icon-on-solid-primary);\n}\n\n.input[disabled]:checked + .ui {\n  background: var(--cpd-color-bg-action-primary-disabled);\n  border-color: var(--cpd-color-bg-action-primary-disabled);\n}\n\n.input[disabled]:checked + .ui::after {\n  --dot-color: var(--cpd-color-icon-on-solid-primary);\n}\n\n@media (hover) {\n  .input:not(:checked, [disabled], [readonly]):hover + .ui {\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.input:not(:checked, [disabled], [readonly]):active + .ui {\n  border-color: var(--cpd-color-border-interactive-hovered);\n}\n"],"mappings":""}

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

@@ -0,0 +1,9 @@
+var Toggle_module_default = {
+	container: "_container_udcm8_10",
+	input: "_input_udcm8_24",
+	ui: "_ui_udcm8_34"
+};
+//#endregion
+export { Toggle_module_default as default };
+
+//# sourceMappingURL=Toggle.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.module.js","names":[],"sources":["../../../../../src/components/Form/Controls/Toggle/Toggle.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  display: grid;\n  inline-size: 2.25rem;\n  block-size: 1.25rem;\n  box-sizing: border-box;\n}\n\n.container > * {\n  grid-area: 1/1;\n  inline-size: inherit;\n  block-size: inherit;\n  box-sizing: inherit;\n}\n\n.container > .input {\n  opacity: 0;\n  margin: 0;\n  cursor: pointer;\n}\n\n.container > .input[disabled] {\n  cursor: not-allowed;\n}\n\n.ui {\n  pointer-events: none;\n  border-radius: var(--cpd-radius-pill-effect);\n  border: 1px solid var(--cpd-color-border-interactive-primary);\n  background: var(--cpd-color-bg-canvas-default);\n  position: relative;\n  padding: 1px;\n  transition-duration: 0.2s;\n  transition-timing-function: ease-in-out;\n  transition-property: background-color, border-color;\n}\n\n.input:checked + .ui {\n  background: var(--cpd-color-bg-accent-rest);\n  border-color: var(--cpd-color-bg-accent-rest);\n}\n\n.ui::after {\n  --dot-color: var(--cpd-color-icon-secondary);\n\n  content: \"\";\n  display: block;\n  block-size: 100%;\n  aspect-ratio: 1 / 1;\n  border-radius: 50%;\n  background: var(--dot-color);\n\n  /* Additional style to ensure visibility in contrast-mode */\n  border: 1px solid var(--dot-color);\n  box-sizing: border-box;\n  transform: translateX(0);\n  transition-duration: 0.2s;\n  transition-timing-function: ease-in-out;\n  transition-property: background-color, transform;\n}\n\n/* Note the use of :focus-visible rather than :focus to avoid showing the focus\nring after a simple click */\n.input:focus-visible + .ui {\n  outline: 2px solid var(--cpd-color-border-focused);\n  outline-offset: 1px;\n}\n\n:checked + .ui::after {\n  --dot-color: var(--cpd-color-icon-on-solid-primary);\n\n  transform: translateX(100%);\n}\n\n@media (hover) {\n  :checked:not([disabled]):hover + .ui {\n    background: var(--cpd-color-bg-accent-hovered);\n    border-color: var(--cpd-color-bg-accent-hovered);\n  }\n}\n\n:checked:active + .ui {\n  background: var(--cpd-color-bg-accent-hovered);\n  border-color: var(--cpd-color-bg-accent-hovered);\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[readonly] + .ui::after {\n  --dot-color: var(--cpd-color-icon-secondary);\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] + .ui::after {\n  --dot-color: var(--cpd-color-bg-action-primary-disabled);\n}\n\n.input[readonly]:checked + .ui {\n  border-color: var(--cpd-color-icon-secondary);\n  background: var(--cpd-color-icon-secondary);\n}\n\n.input[readonly]:checked + .ui::after {\n  --dot-color: var(--cpd-color-icon-on-solid-primary);\n}\n\n.input[disabled]:checked + .ui {\n  background: var(--cpd-color-bg-action-primary-disabled);\n  border-color: var(--cpd-color-bg-action-primary-disabled);\n}\n\n.input[disabled]:checked + .ui::after {\n  --dot-color: var(--cpd-color-icon-on-solid-primary);\n}\n\n@media (hover) {\n  .input:not(:checked, [disabled], [readonly]):hover + .ui {\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.input:not(:checked, [disabled], [readonly]):active + .ui {\n  border-color: var(--cpd-color-border-interactive-hovered);\n}\n"],"mappings":""}