@gnist/design-system 3.8.4 → 3.9.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.9.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.8.4...@gnist/design-system@3.9.0) (2025-08-29)
+
+### Features
+
+* add switch component ([76b8479](https://github.com/mollerdigital/design-system-design-system/commit/76b8479b9652d74257b9eae8e9a82fc68ee4ada5))
+
 ## [3.8.4](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.8.3...@gnist/design-system@3.8.4) (2025-08-27)
 
 **Note:** Version bump only for package @gnist/design-system

package/dist/components/actions/chips/ActionChip.cjs

@@ -7,7 +7,7 @@ require("../../../foundation/iconography/IconVariantProvider.cjs");
 require("../../../foundation/iconography/icons.cjs");
 const Icon = require("../../../foundation/iconography/Icon.cjs");
 const index = require("../../../foundation/typography/index.cjs");
-const React = require("react");
+require("react");
 const classNames = require("classnames");
 require("../../../foundation/logos/Logo.css.cjs");
 const animations_css = require("../../../styles/animations.css.cjs");
@@ -18,7 +18,7 @@ const styles_css$1 = require("./styles.css.cjs");
 const styles_css = require("../buttons/styles.css.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
-const ActionChip = React.forwardRef(function ActionChip2({ label, onClick, selected, icon, loading, density = "default", ...props }, ref) {
+function ActionChip({ label, onClick, selected, icon, loading, density = "default", ...props }) {
   return jsxRuntime.jsx("button", { type: "button", ...props, title: label, onClick, className: classNames__default.default(styles_css$1.chipRecipe({
     selected,
     filterVariant: false,
@@ -28,6 +28,6 @@ const ActionChip = React.forwardRef(function ActionChip2({ label, onClick, selec
     borderRadius: "full",
     backgroundColor: "on-background",
     setFocusState: true
-  })), ref, children: loading?.isLoading ? jsxRuntime.jsx(Spinner.Spinner, { diameter: density === "compact" ? tokens_css_js.tokens.size.xs : tokens_css_js.tokens.size.s, textDescription: loading.loadingText }) : jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon && jsxRuntime.jsx(Icon.Icon, { icon, size: density === "compact" ? "m" : "l" }), jsxRuntime.jsx(index.BodyText, { className: styles_css.actionText, children: label })] }) });
-});
+  })), children: loading?.isLoading ? jsxRuntime.jsx(Spinner.Spinner, { diameter: density === "compact" ? tokens_css_js.tokens.size.xs : tokens_css_js.tokens.size.s, textDescription: loading.loadingText }) : jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon && jsxRuntime.jsx(Icon.Icon, { icon, size: density === "compact" ? "m" : "l" }), jsxRuntime.jsx(index.BodyText, { className: styles_css.actionText, children: label })] }) });
+}
 exports.ActionChip = ActionChip;

package/dist/components/actions/chips/ActionChip.d.ts

@@ -27,5 +27,5 @@ export interface ActionChipProps extends ComponentPropsWithRef<"button"> {
 
  Documentation: [ActionChip](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-chips-actionchip--docs)
  **/
-export declare const ActionChip: import("react").ForwardRefExoticComponent<Omit<ActionChipProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function ActionChip({ label, onClick, selected, icon, loading, density, ...props }: ActionChipProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ActionChip.d.ts.map

package/dist/components/actions/chips/ActionChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionChip.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/chips/ActionChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EAGf,qCAAiD;AAQlD,OAAO,EACH,qBAAqB,EAGrB,iBAAiB,EACpB,MAAM,OAAO,CAAC;AAKf,MAAM,WAAW,eAAgB,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IACpE,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE;QACN,SAAS,EAAE,OAAO,CAAC;QACnB,WAAW,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,2BAA2B;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACnC;AAED;;;;;;;;;IASI;AACJ,eAAO,MAAM,UAAU,4HAuDrB,CAAC"}
+{"version":3,"file":"ActionChip.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/chips/ActionChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EAGf,qCAAiD;AAQlD,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKjE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IACpE,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE;QACN,SAAS,EAAE,OAAO,CAAC;QACnB,WAAW,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,2BAA2B;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACnC;AAED;;;;;;;;;IASI;AACJ,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,OAAmB,EACnB,GAAG,KAAK,EACX,EAAE,eAAe,2CA2CjB"}

package/dist/components/actions/chips/ActionChip.js

@@ -5,7 +5,7 @@ import "../../../foundation/iconography/IconVariantProvider.js";
 import "../../../foundation/iconography/icons.js";
 import { Icon } from "../../../foundation/iconography/Icon.js";
 import { BodyText } from "../../../foundation/typography/index.js";
-import { forwardRef } from "react";
+import "react";
 import classNames from "classnames";
 import "../../../foundation/logos/Logo.css.js";
 import { clickAnimation } from "../../../styles/animations.css.js";
@@ -14,7 +14,7 @@ import { tokens } from "@gnist/themes/tokens.css.js";
 import { Spinner } from "../../progress/Spinner.js";
 import { chipRecipe } from "./styles.css.js";
 import { actionText } from "../buttons/styles.css.js";
-const ActionChip = forwardRef(function ActionChip2({ label, onClick, selected, icon, loading, density = "default", ...props }, ref) {
+function ActionChip({ label, onClick, selected, icon, loading, density = "default", ...props }) {
   return jsx("button", { type: "button", ...props, title: label, onClick, className: classNames(chipRecipe({
     selected,
     filterVariant: false,
@@ -24,8 +24,8 @@ const ActionChip = forwardRef(function ActionChip2({ label, onClick, selected, i
     borderRadius: "full",
     backgroundColor: "on-background",
     setFocusState: true
-  })), ref, children: loading?.isLoading ? jsx(Spinner, { diameter: density === "compact" ? tokens.size.xs : tokens.size.s, textDescription: loading.loadingText }) : jsxs(Fragment, { children: [icon && jsx(Icon, { icon, size: density === "compact" ? "m" : "l" }), jsx(BodyText, { className: actionText, children: label })] }) });
-});
+  })), children: loading?.isLoading ? jsx(Spinner, { diameter: density === "compact" ? tokens.size.xs : tokens.size.s, textDescription: loading.loadingText }) : jsxs(Fragment, { children: [icon && jsx(Icon, { icon, size: density === "compact" ? "m" : "l" }), jsx(BodyText, { className: actionText, children: label })] }) });
+}
 export {
   ActionChip
 };

package/dist/components/actions/chips/FilterChip.cjs

@@ -7,7 +7,7 @@ require("../../../foundation/iconography/IconVariantProvider.cjs");
 require("../../../foundation/iconography/icons.cjs");
 const Icon = require("../../../foundation/iconography/Icon.cjs");
 const index = require("../../../foundation/typography/index.cjs");
-const React = require("react");
+require("react");
 const classNames = require("classnames");
 require("../../../foundation/logos/Logo.css.cjs");
 const animations_css = require("../../../styles/animations.css.cjs");
@@ -18,7 +18,7 @@ const styles_css$1 = require("./styles.css.cjs");
 const styles_css = require("../buttons/styles.css.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
-const FilterChip = React.forwardRef(function FilterChip2({ label, onClick, selected, loading, density = "default", icon, ...props }, ref) {
+function FilterChip({ label, onClick, selected, loading, density = "default", icon, ...props }) {
   return jsxRuntime.jsxs("button", { type: "button", ...props, title: label, onClick, className: classNames__default.default(styles_css$1.chipRecipe({
     selected,
     filterVariant: true,
@@ -28,6 +28,6 @@ const FilterChip = React.forwardRef(function FilterChip2({ label, onClick, selec
     borderRadius: "full",
     backgroundColor: "on-background",
     setFocusState: true
-  })), ref, children: [(icon || selected) && !loading?.isLoading && jsxRuntime.jsx(Icon.Icon, { icon: selected ? "check" : icon }), loading?.isLoading ? jsxRuntime.jsx(Spinner.Spinner, { diameter: density === "compact" ? tokens_css_js.tokens.size.xs : tokens_css_js.tokens.size.s, textDescription: loading.loadingText }) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(index.BodyText, { className: styles_css.actionText, children: label }) })] });
-});
+  })), children: [(icon || selected) && !loading?.isLoading && jsxRuntime.jsx(Icon.Icon, { icon: selected ? "check" : icon }), loading?.isLoading ? jsxRuntime.jsx(Spinner.Spinner, { diameter: density === "compact" ? tokens_css_js.tokens.size.xs : tokens_css_js.tokens.size.s, textDescription: loading.loadingText }) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(index.BodyText, { className: styles_css.actionText, children: label }) })] });
+}
 exports.FilterChip = FilterChip;

package/dist/components/actions/chips/FilterChip.d.ts

@@ -24,6 +24,6 @@ interface FilterChipProps extends ComponentPropsWithRef<"button"> {
 
  Documentation: [FilterChip](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-chips-filterchip--docs)
  **/
-export declare const FilterChip: import("react").ForwardRefExoticComponent<Omit<FilterChipProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function FilterChip({ label, onClick, selected, loading, density, icon, ...props }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=FilterChip.d.ts.map

package/dist/components/actions/chips/FilterChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterChip.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/chips/FilterChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EAGf,qCAAiD;AAQlD,OAAO,EAAE,qBAAqB,EAA4B,MAAM,OAAO,CAAC;AAKxE,UAAU,eAAgB,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IAC7D,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE;QACN,SAAS,EAAE,OAAO,CAAC;QACnB,WAAW,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,8BAA8B;IAC9B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,sCAAsC;IACtC,IAAI,CAAC,EAAE,YAAY,CAAC;CACvB;AAED;;;;;;IAMI;AAEJ,eAAO,MAAM,UAAU,4HA0DrB,CAAC"}
+{"version":3,"file":"FilterChip.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/chips/FilterChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EAGf,qCAAiD;AAQlD,OAAO,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAK9C,UAAU,eAAgB,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IAC7D,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE;QACN,SAAS,EAAE,OAAO,CAAC;QACnB,WAAW,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,8BAA8B;IAC9B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,sCAAsC;IACtC,IAAI,CAAC,EAAE,YAAY,CAAC;CACvB;AAED;;;;;;IAMI;AAEJ,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,IAAI,EACJ,GAAG,KAAK,EACX,EAAE,eAAe,2CA8CjB"}

package/dist/components/actions/chips/FilterChip.js

@@ -5,7 +5,7 @@ import "../../../foundation/iconography/IconVariantProvider.js";
 import "../../../foundation/iconography/icons.js";
 import { Icon } from "../../../foundation/iconography/Icon.js";
 import { BodyText } from "../../../foundation/typography/index.js";
-import { forwardRef } from "react";
+import "react";
 import classNames from "classnames";
 import "../../../foundation/logos/Logo.css.js";
 import { clickAnimation } from "../../../styles/animations.css.js";
@@ -14,7 +14,7 @@ import { tokens } from "@gnist/themes/tokens.css.js";
 import { Spinner } from "../../progress/Spinner.js";
 import { chipRecipe } from "./styles.css.js";
 import { actionText } from "../buttons/styles.css.js";
-const FilterChip = forwardRef(function FilterChip2({ label, onClick, selected, loading, density = "default", icon, ...props }, ref) {
+function FilterChip({ label, onClick, selected, loading, density = "default", icon, ...props }) {
   return jsxs("button", { type: "button", ...props, title: label, onClick, className: classNames(chipRecipe({
     selected,
     filterVariant: true,
@@ -24,8 +24,8 @@ const FilterChip = forwardRef(function FilterChip2({ label, onClick, selected, l
     borderRadius: "full",
     backgroundColor: "on-background",
     setFocusState: true
-  })), ref, children: [(icon || selected) && !loading?.isLoading && jsx(Icon, { icon: selected ? "check" : icon }), loading?.isLoading ? jsx(Spinner, { diameter: density === "compact" ? tokens.size.xs : tokens.size.s, textDescription: loading.loadingText }) : jsx(Fragment, { children: jsx(BodyText, { className: actionText, children: label }) })] });
-});
+  })), children: [(icon || selected) && !loading?.isLoading && jsx(Icon, { icon: selected ? "check" : icon }), loading?.isLoading ? jsx(Spinner, { diameter: density === "compact" ? tokens.size.xs : tokens.size.s, textDescription: loading.loadingText }) : jsx(Fragment, { children: jsx(BodyText, { className: actionText, children: label }) })] });
+}
 export {
   FilterChip
 };

package/dist/components/actions/chips/TagChip.cjs

@@ -7,7 +7,7 @@ require("../../../foundation/iconography/IconVariantProvider.cjs");
 require("../../../foundation/iconography/icons.cjs");
 const Icon = require("../../../foundation/iconography/Icon.cjs");
 const index = require("../../../foundation/typography/index.cjs");
-const React = require("react");
+require("react");
 const classNames = require("classnames");
 require("../../../foundation/logos/Logo.css.cjs");
 const animations_css = require("../../../styles/animations.css.cjs");
@@ -16,12 +16,12 @@ const styles_css$1 = require("./styles.css.cjs");
 const styles_css = require("../buttons/styles.css.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
-const TagChip = React.forwardRef(function TagChip2({ label, onClick, icon, density = "default", ...props }, ref) {
+function TagChip({ label, onClick, icon, density = "default", ...props }) {
   return jsxRuntime.jsxs("button", { type: "button", ...props, title: label, onClick, className: classNames__default.default(styles_css$1.chipRecipe(), animations_css.clickAnimation, states_css.focusStyle, states_css.stateLayers({
     borderSize: "medium",
     borderRadius: "full",
     backgroundColor: "on-background",
     setFocusState: true
-  })), ref, children: [icon && jsxRuntime.jsx(Icon.Icon, { icon, size: density === "compact" ? "m" : "l" }), jsxRuntime.jsx(index.BodyText, { className: styles_css.actionText, children: label }), jsxRuntime.jsx(Icon.Icon, { icon: "clear", size: density === "compact" ? "m" : "l" })] });
-});
+  })), children: [icon && jsxRuntime.jsx(Icon.Icon, { icon, size: density === "compact" ? "m" : "l" }), jsxRuntime.jsx(index.BodyText, { className: styles_css.actionText, children: label }), jsxRuntime.jsx(Icon.Icon, { icon: "clear", size: density === "compact" ? "m" : "l" })] });
+}
 exports.TagChip = TagChip;

package/dist/components/actions/chips/TagChip.d.ts

@@ -17,6 +17,6 @@ interface TagChipProps extends ComponentPropsWithRef<"button"> {
 
  Documentation: [TagChip](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-chips-tagchip--docs)
  **/
-export declare const TagChip: import("react").ForwardRefExoticComponent<Omit<TagChipProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function TagChip({ label, onClick, icon, density, ...props }: TagChipProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=TagChip.d.ts.map

package/dist/components/actions/chips/TagChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagChip.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/chips/TagChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EAGf,qCAAiD;AAOlD,OAAO,EACH,qBAAqB,EAGrB,iBAAiB,EACpB,MAAM,OAAO,CAAC;AAIf,UAAU,YAAa,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IAC1D,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,sCAAsC;IACtC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACnC;AAED;;;;;;IAMI;AAEJ,eAAO,MAAM,OAAO,yHA8BlB,CAAC"}
+{"version":3,"file":"TagChip.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/chips/TagChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EAGf,qCAAiD;AAOlD,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIjE,UAAU,YAAa,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IAC1D,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,sCAAsC;IACtC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACnC;AAED;;;;;;IAMI;AAEJ,wBAAgB,OAAO,CAAC,EACpB,KAAK,EACL,OAAO,EACP,IAAI,EACJ,OAAmB,EACnB,GAAG,KAAK,EACX,EAAE,YAAY,2CA0Bd"}

package/dist/components/actions/chips/TagChip.js

@@ -5,21 +5,21 @@ import "../../../foundation/iconography/IconVariantProvider.js";
 import "../../../foundation/iconography/icons.js";
 import { Icon } from "../../../foundation/iconography/Icon.js";
 import { BodyText } from "../../../foundation/typography/index.js";
-import { forwardRef } from "react";
+import "react";
 import classNames from "classnames";
 import "../../../foundation/logos/Logo.css.js";
 import { clickAnimation } from "../../../styles/animations.css.js";
 import { focusStyle, stateLayers } from "../../../styles/states.css.js";
 import { chipRecipe } from "./styles.css.js";
 import { actionText } from "../buttons/styles.css.js";
-const TagChip = forwardRef(function TagChip2({ label, onClick, icon, density = "default", ...props }, ref) {
+function TagChip({ label, onClick, icon, density = "default", ...props }) {
   return jsxs("button", { type: "button", ...props, title: label, onClick, className: classNames(chipRecipe(), clickAnimation, focusStyle, stateLayers({
     borderSize: "medium",
     borderRadius: "full",
     backgroundColor: "on-background",
     setFocusState: true
-  })), ref, children: [icon && jsx(Icon, { icon, size: density === "compact" ? "m" : "l" }), jsx(BodyText, { className: actionText, children: label }), jsx(Icon, { icon: "clear", size: density === "compact" ? "m" : "l" })] });
-});
+  })), children: [icon && jsx(Icon, { icon, size: density === "compact" ? "m" : "l" }), jsx(BodyText, { className: actionText, children: label }), jsx(Icon, { icon: "clear", size: density === "compact" ? "m" : "l" })] });
+}
 export {
   TagChip
 };

package/dist/components/actions/index.cjs

@@ -10,6 +10,7 @@ const TextButton = require("./buttons/TextButton.cjs");
 const IconButton = require("./buttons/IconButton.cjs");
 const Checkbox = require("./selectionControls/Checkbox.cjs");
 const RadioButton = require("./selectionControls/RadioButton.cjs");
+const Switch = require("./selectionControls/Switch.cjs");
 const ActionChip = require("./chips/ActionChip.cjs");
 const FilterChip = require("./chips/FilterChip.cjs");
 const TagChip = require("./chips/TagChip.cjs");
@@ -22,6 +23,7 @@ exports.TextButton = TextButton.TextButton;
 exports.IconButton = IconButton.IconButton;
 exports.Checkbox = Checkbox.Checkbox;
 exports.RadioButton = RadioButton.RadioButton;
+exports.Switch = Switch.Switch;
 exports.ActionChip = ActionChip.ActionChip;
 exports.FilterChip = FilterChip.FilterChip;
 exports.TagChip = TagChip.TagChip;

package/dist/components/actions/index.js

@@ -8,6 +8,7 @@ import { TextButton } from "./buttons/TextButton.js";
 import { IconButton } from "./buttons/IconButton.js";
 import { Checkbox } from "./selectionControls/Checkbox.js";
 import { RadioButton } from "./selectionControls/RadioButton.js";
+import { Switch } from "./selectionControls/Switch.js";
 import { ActionChip } from "./chips/ActionChip.js";
 import { FilterChip } from "./chips/FilterChip.js";
 import { TagChip } from "./chips/TagChip.js";
@@ -22,6 +23,7 @@ export {
   RadioButton,
   SecondaryButton,
   SuccessButton,
+  Switch,
   TagChip,
   TextButton
 };

package/dist/components/actions/selectionControls/Checkbox.cjs

@@ -6,7 +6,6 @@ const InputHelperText = require("../../../building-blocks/inputs/InputHelperText
 const ScreenReaderOnly = require("../../../utilities/accessibility/ScreenReaderOnly.cjs");
 require("../../../utilities/accessibility/visuallyHidden.css.cjs");
 const index = require("../../../utilities/html/index.cjs");
-const React = require("react");
 require("../../../foundation/iconography/ExtraIconsProvider.cjs");
 require("../../../foundation/iconography/IconVariantProvider.cjs");
 require("../../../foundation/iconography/icons.cjs");
@@ -21,7 +20,7 @@ const CustomCheckbox = ({ value, disabled }) => {
   return jsxRuntime.jsx("span", { className: ` ${checkbox_css.checkbox({ disabled })}`, "aria-hidden": true, children: value !== "indeterminate" ? jsxRuntime.jsx(Icon.Icon, { icon: "check", size: "s" }) : jsxRuntime.jsx(Icon.Icon, { icon: "remove", size: "s" }) });
 };
 const defaultRender = (checkbox2, description) => jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [checkbox2, jsxRuntime.jsx("div", { className: shared_css.indentedDescriptionStyle, children: description })] });
-const Checkbox = React.forwardRef(function Checkbox2({
+function Checkbox({
   label,
   description,
   value,
@@ -35,8 +34,9 @@ const Checkbox = React.forwardRef(function Checkbox2({
   render = defaultRender,
   // Input element props
   onBlur,
+  ref,
   ...rest
-}, ref) {
+}) {
   const inputId = id;
   const labelId = `${id}-label`;
   const helperId = `${id}-helper`;
@@ -51,6 +51,6 @@ const Checkbox = React.forwardRef(function Checkbox2({
     disabled,
     validity: validity?.type === "error" ? "error" : void 0
   }), children: jsxRuntime.jsx(CustomCheckbox, { value, disabled }) }), hideLabel ? jsxRuntime.jsx(ScreenReaderOnly.ScreenReaderOnly, { children: label }) : jsxRuntime.jsx("span", { className: shared_css.LabelStyle, children: label })] }) });
-  return jsxRuntime.jsx(shared.HelperTextWrapper, { ...helperTextProps, children: render(checkboxElement, descriptionElement) });
-});
+  return jsxRuntime.jsx(shared.HelperTextWrapper, { ...helperTextProps, children: render && render(checkboxElement, descriptionElement) });
+}
 exports.Checkbox = Checkbox;

package/dist/components/actions/selectionControls/Checkbox.d.ts

@@ -1,5 +1,8 @@
+import { Ref } from "react";
 import { SelectionControlProps } from "./shared.js";
-export type CheckboxProps = SelectionControlProps<boolean | "indeterminate">;
+export type CheckboxProps = SelectionControlProps<boolean | "indeterminate"> & {
+    ref?: Ref<HTMLSpanElement>;
+};
 /**
  *
  * Checkboxes allow users to select one or more items from a list. They may also be used as a way to have the users indicate they agree to  terms and services.
@@ -8,5 +11,5 @@ export type CheckboxProps = SelectionControlProps<boolean | "indeterminate">;
 
  Documentation: [Checkbox](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-selectioncontrols-checkbox--docs)
  */
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLSpanElement>>;
+export declare function Checkbox({ label, description, value, onChange, disabled, validity, id, hideLabel, canShowErrorMessage, className, render, onBlur, ref, ...rest }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/actions/selectionControls/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/Checkbox.tsx"],"names":[],"mappings":"AAcA,OAAO,EAEH,qBAAqB,EAExB,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,aAAa,GAAG,qBAAqB,CAAC,OAAO,GAAG,eAAe,CAAC,CAAC;AA+B7E;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,yBAAyB,CAClD,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC,CA6EtD,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/Checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAU5B,OAAO,EAEH,qBAAqB,EAExB,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,aAAa,GAAG,qBAAqB,CAAC,OAAO,GAAG,eAAe,CAAC,GAAG;IAC3E,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC9B,CAAC;AA+BF;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EACrB,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,EAA6B,EAC7B,SAAiB,EACjB,mBAA2B,EAC3B,SAAS,EACT,MAAsB,EAEtB,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACV,EAAE,aAAa,2CA0Df"}

package/dist/components/actions/selectionControls/Checkbox.js

@@ -4,7 +4,6 @@ import { useInputHelperText } from "../../../building-blocks/inputs/InputHelperT
 import { ScreenReaderOnly } from "../../../utilities/accessibility/ScreenReaderOnly.js";
 import "../../../utilities/accessibility/visuallyHidden.css.js";
 import { createValidHtmlId } from "../../../utilities/html/index.js";
-import { forwardRef } from "react";
 import "../../../foundation/iconography/ExtraIconsProvider.js";
 import "../../../foundation/iconography/IconVariantProvider.js";
 import "../../../foundation/iconography/icons.js";
@@ -19,7 +18,7 @@ const CustomCheckbox = ({ value, disabled }) => {
   return jsx("span", { className: ` ${checkbox({ disabled })}`, "aria-hidden": true, children: value !== "indeterminate" ? jsx(Icon, { icon: "check", size: "s" }) : jsx(Icon, { icon: "remove", size: "s" }) });
 };
 const defaultRender = (checkbox2, description) => jsxs(Fragment, { children: [checkbox2, jsx("div", { className: indentedDescriptionStyle, children: description })] });
-const Checkbox = forwardRef(function Checkbox2({
+function Checkbox({
   label,
   description,
   value,
@@ -33,8 +32,9 @@ const Checkbox = forwardRef(function Checkbox2({
   render = defaultRender,
   // Input element props
   onBlur,
+  ref,
   ...rest
-}, ref) {
+}) {
   const inputId = id;
   const labelId = `${id}-label`;
   const helperId = `${id}-helper`;
@@ -49,8 +49,8 @@ const Checkbox = forwardRef(function Checkbox2({
     disabled,
     validity: validity?.type === "error" ? "error" : void 0
   }), children: jsx(CustomCheckbox, { value, disabled }) }), hideLabel ? jsx(ScreenReaderOnly, { children: label }) : jsx("span", { className: LabelStyle, children: label })] }) });
-  return jsx(HelperTextWrapper, { ...helperTextProps, children: render(checkboxElement, descriptionElement) });
-});
+  return jsx(HelperTextWrapper, { ...helperTextProps, children: render && render(checkboxElement, descriptionElement) });
+}
 export {
   Checkbox
 };

package/dist/components/actions/selectionControls/RadioButton.cjs

@@ -7,7 +7,6 @@ const ScreenReaderOnly = require("../../../utilities/accessibility/ScreenReaderO
 require("../../../utilities/accessibility/visuallyHidden.css.cjs");
 const index = require("../../../utilities/html/index.cjs");
 const classNames = require("classnames");
-const React = require("react");
 const radiobutton_css = require("./radiobutton.css.cjs");
 const shared_css = require("./shared.css.cjs");
 const shared = require("./shared.cjs");
@@ -24,7 +23,7 @@ const CustomRadioButton = ({ value, disabled, validity }) => {
   }) }) });
 };
 const defaultRender = (radio, description) => jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [radio, jsxRuntime.jsx("div", { className: shared_css.indentedDescriptionStyle, children: description })] });
-const RadioButton = React.forwardRef(function RadioButton2({
+function RadioButton({
   value,
   onChange,
   disabled,
@@ -36,9 +35,10 @@ const RadioButton = React.forwardRef(function RadioButton2({
   canShowErrorMessage = false,
   className,
   render = defaultRender,
+  ref,
   // Input element props
   ...rest
-}, ref) {
+}) {
   const inputId = id;
   const labelId = `${id}-label`;
   const helperId = `${id}-helper`;
@@ -49,6 +49,6 @@ const RadioButton = React.forwardRef(function RadioButton2({
   });
   const radioButtonElement = jsxRuntime.jsx("span", { className: classNames__default.default(shared_css.InputWrapper, className), ref, children: jsxRuntime.jsxs("label", { htmlFor: inputId, className: shared_css.LabelRecipe({ disabled }), id: labelId, children: [jsxRuntime.jsx("input", { type: "radio", id: inputId, disabled, onChange, checked: value === true, className: shared_css.InputStyleRecipe({ disabled }), tabIndex: 0, ...inputAriaProps, ...rest }), jsxRuntime.jsx(CustomRadioButton, { value, disabled, validity }), hideLabel ? jsxRuntime.jsx(ScreenReaderOnly.ScreenReaderOnly, { children: label }) : jsxRuntime.jsx("span", { className: shared_css.LabelStyle, children: label })] }) });
   const descriptionElement = description ? jsxRuntime.jsx(shared.SelectionDescription, { disabled, children: description }) : void 0;
-  return jsxRuntime.jsx(shared.HelperTextWrapper, { ...helperTextProps, children: render(radioButtonElement, descriptionElement) });
-});
+  return jsxRuntime.jsx(shared.HelperTextWrapper, { ...helperTextProps, children: render && render(radioButtonElement, descriptionElement) });
+}
 exports.RadioButton = RadioButton;

package/dist/components/actions/selectionControls/RadioButton.d.ts

@@ -1,5 +1,8 @@
+import { Ref } from "react";
 import { SelectionControlProps } from "./shared.js";
-export type RadioButtonProps = SelectionControlProps<boolean>;
+export type RadioButtonProps = SelectionControlProps<boolean> & {
+    ref?: Ref<HTMLSpanElement>;
+};
 /**
 * Radio buttons allow users to select one option from a list. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.
 *
@@ -7,5 +10,5 @@ export type RadioButtonProps = SelectionControlProps<boolean>;
 
  Documentation: [RadioButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-selectioncontrols-radiobutton--docs)
 **/
-export declare const RadioButton: React.ForwardRefExoticComponent<Omit<RadioButtonProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare function RadioButton({ value, onChange, disabled, validity, label, description, id, hideLabel, canShowErrorMessage, className, render, ref, ...rest }: RadioButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RadioButton.d.ts.map

package/dist/components/actions/selectionControls/RadioButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/RadioButton.tsx"],"names":[],"mappings":"AAcA,OAAO,EAEH,qBAAqB,EAExB,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;AAqC9D;;;;;;GAMG;AAEH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,yBAAyB,CACrD,IAAI,CAAC,gBAAgB,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC,CAuEtE,CAAC"}
+{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/RadioButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAS5B,OAAO,EAEH,qBAAqB,EAExB,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,OAAO,CAAC,GAAG;IAC5D,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC9B,CAAC;AAqCF;;;;;;GAMG;AAEH,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,EAA6B,EAC7B,SAAiB,EACjB,mBAA2B,EAC3B,SAAS,EACT,MAAsB,EACtB,GAAG,EAEH,GAAG,IAAI,EACV,EAAE,gBAAgB,2CAqDlB"}

package/dist/components/actions/selectionControls/RadioButton.js

@@ -5,7 +5,6 @@ import { ScreenReaderOnly } from "../../../utilities/accessibility/ScreenReaderO
 import "../../../utilities/accessibility/visuallyHidden.css.js";
 import { createValidHtmlId } from "../../../utilities/html/index.js";
 import classNames from "classnames";
-import { forwardRef } from "react";
 import { RadioButtonRecipe, CheckedCircleRecipe } from "./radiobutton.css.js";
 import { LabelRecipe, InputStyleRecipe, LabelStyle, InputWrapper, indentedDescriptionStyle } from "./shared.css.js";
 import { SelectionDescription, HelperTextWrapper } from "./shared.js";
@@ -20,7 +19,7 @@ const CustomRadioButton = ({ value, disabled, validity }) => {
   }) }) });
 };
 const defaultRender = (radio, description) => jsxs(Fragment, { children: [radio, jsx("div", { className: indentedDescriptionStyle, children: description })] });
-const RadioButton = forwardRef(function RadioButton2({
+function RadioButton({
   value,
   onChange,
   disabled,
@@ -32,9 +31,10 @@ const RadioButton = forwardRef(function RadioButton2({
   canShowErrorMessage = false,
   className,
   render = defaultRender,
+  ref,
   // Input element props
   ...rest
-}, ref) {
+}) {
   const inputId = id;
   const labelId = `${id}-label`;
   const helperId = `${id}-helper`;
@@ -45,8 +45,8 @@ const RadioButton = forwardRef(function RadioButton2({
   });
   const radioButtonElement = jsx("span", { className: classNames(InputWrapper, className), ref, children: jsxs("label", { htmlFor: inputId, className: LabelRecipe({ disabled }), id: labelId, children: [jsx("input", { type: "radio", id: inputId, disabled, onChange, checked: value === true, className: InputStyleRecipe({ disabled }), tabIndex: 0, ...inputAriaProps, ...rest }), jsx(CustomRadioButton, { value, disabled, validity }), hideLabel ? jsx(ScreenReaderOnly, { children: label }) : jsx("span", { className: LabelStyle, children: label })] }) });
   const descriptionElement = description ? jsx(SelectionDescription, { disabled, children: description }) : void 0;
-  return jsx(HelperTextWrapper, { ...helperTextProps, children: render(radioButtonElement, descriptionElement) });
-});
+  return jsx(HelperTextWrapper, { ...helperTextProps, children: render && render(radioButtonElement, descriptionElement) });
+}
 export {
   RadioButton
 };

package/dist/components/actions/selectionControls/Switch.cjs

@@ -0,0 +1,49 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const InputHelperText = require("../../../building-blocks/inputs/InputHelperText.cjs");
+const ScreenReaderOnly = require("../../../utilities/accessibility/ScreenReaderOnly.cjs");
+require("../../../utilities/accessibility/visuallyHidden.css.cjs");
+const index = require("../../../utilities/html/index.cjs");
+const React = require("react");
+const switch_css = require("./switch.css.cjs");
+const shared_css = require("./shared.css.cjs");
+const shared = require("./shared.cjs");
+const defaultRender = (switchElement, description) => jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [switchElement, jsxRuntime.jsx("div", { className: switch_css.switchDescription, children: description })] });
+const Switch = React.forwardRef(function Switch2({ offLabel, onLabel, description, value = false, onChange, disabled, validity, id = index.createValidHtmlId(offLabel || onLabel || "toggle"), hideLabel = false, canShowErrorMessage = false, className, ...rest }, ref) {
+  const inputId = id;
+  const labelId = `${id}-label`;
+  const helperId = `${id}-helper`;
+  const { helperTextProps, inputAriaProps } = InputHelperText.useInputHelperText({
+    id: helperId,
+    validity,
+    reserveSpaceForMessage: canShowErrorMessage
+  });
+  const descriptionElement = description ? jsxRuntime.jsx(shared.SelectionDescription, { disabled, children: description }) : void 0;
+  const switchElement = jsxRuntime.jsx("span", { className: `${shared_css.InputWrapper} ${className}`, ref, children: jsxRuntime.jsxs("div", { className: switch_css.switchContainerStyle, children: [offLabel && !hideLabel && jsxRuntime.jsx("span", { className: switch_css.SwitchLabelRecipe({
+    disabled,
+    side: "left"
+  }), children: offLabel }), jsxRuntime.jsxs("label", { htmlFor: inputId, className: switch_css.SwitchRecipe({
+    selected: value,
+    disabled,
+    validity: validity?.type === "error" ? "error" : void 0
+  }), id: labelId, children: [jsxRuntime.jsx("input", { type: "checkbox", id: inputId, disabled, onChange, checked: value === true, className: shared_css.InputStyleRecipe({ disabled }), style: {
+    position: "absolute",
+    opacity: 0,
+    width: "100%",
+    height: "100%",
+    margin: 0,
+    cursor: disabled ? "not-allowed" : "pointer"
+  }, ...inputAriaProps, ...rest }), jsxRuntime.jsx("span", { className: switch_css.SwitchThumbRecipe({
+    selected: value ?? false,
+    disabled
+  }) }), onLabel && hideLabel && jsxRuntime.jsx(ScreenReaderOnly.ScreenReaderOnly, { children: onLabel })] }), onLabel && !hideLabel && jsxRuntime.jsx("span", { className: switch_css.SwitchLabelRecipe({
+    disabled,
+    side: "right"
+  }), children: onLabel }), onLabel && !hideLabel && !offLabel && !onLabel && jsxRuntime.jsx("span", { className: switch_css.SwitchLabelRecipe({
+    disabled
+  }), children: onLabel })] }) });
+  return jsxRuntime.jsx(shared.HelperTextWrapper, { ...helperTextProps, children: defaultRender(switchElement, descriptionElement) });
+});
+exports.Switch = Switch;

package/dist/components/actions/selectionControls/Switch.d.ts

@@ -0,0 +1,17 @@
+import { SelectionControlProps } from "./shared.js";
+export interface SwitchProps extends Omit<SelectionControlProps<boolean>, "render"> {
+    /** The left side label of the switch. */
+    offLabel?: string;
+    /** The right side label of the switch. */
+    onLabel: string;
+}
+/**
+ * Use switches to:
+ * - Turn an option on or off
+ * - Switch between two mutually exclusive options
+ * - Enable or disable a feature or setting
+ *
+ * Documentation: [Switch](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-selectioncontrols-switch--docs)
+ */
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=Switch.d.ts.map

package/dist/components/actions/selectionControls/Switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/Switch.tsx"],"names":[],"mappings":"AAYA,OAAO,EAEH,qBAAqB,EAExB,MAAM,aAAa,CAAC;AAErB,MAAM,WAAW,WACb,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC;IACtD,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,OAAO,EAAE,MAAM,CAAC;CACnB;AAYD;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,yGAkHjB,CAAC"}

package/dist/components/actions/selectionControls/Switch.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useInputHelperText } from "../../../building-blocks/inputs/InputHelperText.js";
+import { ScreenReaderOnly } from "../../../utilities/accessibility/ScreenReaderOnly.js";
+import "../../../utilities/accessibility/visuallyHidden.css.js";
+import { createValidHtmlId } from "../../../utilities/html/index.js";
+import { forwardRef } from "react";
+import { switchContainerStyle, SwitchLabelRecipe, SwitchRecipe, SwitchThumbRecipe, switchDescription } from "./switch.css.js";
+import { InputWrapper, InputStyleRecipe } from "./shared.css.js";
+import { SelectionDescription, HelperTextWrapper } from "./shared.js";
+const defaultRender = (switchElement, description) => jsxs(Fragment, { children: [switchElement, jsx("div", { className: switchDescription, children: description })] });
+const Switch = forwardRef(function Switch2({ offLabel, onLabel, description, value = false, onChange, disabled, validity, id = createValidHtmlId(offLabel || onLabel || "toggle"), hideLabel = false, canShowErrorMessage = false, className, ...rest }, ref) {
+  const inputId = id;
+  const labelId = `${id}-label`;
+  const helperId = `${id}-helper`;
+  const { helperTextProps, inputAriaProps } = useInputHelperText({
+    id: helperId,
+    validity,
+    reserveSpaceForMessage: canShowErrorMessage
+  });
+  const descriptionElement = description ? jsx(SelectionDescription, { disabled, children: description }) : void 0;
+  const switchElement = jsx("span", { className: `${InputWrapper} ${className}`, ref, children: jsxs("div", { className: switchContainerStyle, children: [offLabel && !hideLabel && jsx("span", { className: SwitchLabelRecipe({
+    disabled,
+    side: "left"
+  }), children: offLabel }), jsxs("label", { htmlFor: inputId, className: SwitchRecipe({
+    selected: value,
+    disabled,
+    validity: validity?.type === "error" ? "error" : void 0
+  }), id: labelId, children: [jsx("input", { type: "checkbox", id: inputId, disabled, onChange, checked: value === true, className: InputStyleRecipe({ disabled }), style: {
+    position: "absolute",
+    opacity: 0,
+    width: "100%",
+    height: "100%",
+    margin: 0,
+    cursor: disabled ? "not-allowed" : "pointer"
+  }, ...inputAriaProps, ...rest }), jsx("span", { className: SwitchThumbRecipe({
+    selected: value ?? false,
+    disabled
+  }) }), onLabel && hideLabel && jsx(ScreenReaderOnly, { children: onLabel })] }), onLabel && !hideLabel && jsx("span", { className: SwitchLabelRecipe({
+    disabled,
+    side: "right"
+  }), children: onLabel }), onLabel && !hideLabel && !offLabel && !onLabel && jsx("span", { className: SwitchLabelRecipe({
+    disabled
+  }), children: onLabel })] }) });
+  return jsx(HelperTextWrapper, { ...helperTextProps, children: defaultRender(switchElement, descriptionElement) });
+});
+export {
+  Switch
+};

package/dist/components/actions/selectionControls/index.cjs

@@ -3,5 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Checkbox = require("./Checkbox.cjs");
 const RadioButton = require("./RadioButton.cjs");
+const Switch = require("./Switch.cjs");
 exports.Checkbox = Checkbox.Checkbox;
 exports.RadioButton = RadioButton.RadioButton;
+exports.Switch = Switch.Switch;

package/dist/components/actions/selectionControls/index.d.ts

@@ -1,3 +1,4 @@
 export { Checkbox, type CheckboxProps } from "./Checkbox.js";
 export { RadioButton, type RadioButtonProps } from "./RadioButton.js";
+export { Switch, type SwitchProps } from "./Switch.js";
 //# sourceMappingURL=index.d.ts.map