@gnist/design-system 5.6.0 → 6.0.0-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.0.0-alpha.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@5.6.1...@gnist/design-system@6.0.0-alpha.0) (2026-04-17)
+
+### ⚠ BREAKING CHANGES
+
+* Removed `favorite_border` and `star_outline` icons. Use `favorite` or `star` with the `variantOverride` prop to switch between filled and outlined variants.
+* The default icon variant has been changed from `filled` to `outlined`.
+
+### Features
+
+* replace icons with Material Symbols and restructure icon build pipeline ([ede842a](https://github.com/mollerdigital/design-system-design-system/commit/ede842af1e6ab14a9f3dd7b843a00e3886240bcd))
+
+## [5.6.1](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@5.6.0...@gnist/design-system@5.6.1) (2026-04-17)
+
+**Note:** Version bump only for package @gnist/design-system
+
 ## [5.6.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@5.5.3...@gnist/design-system@5.6.0) (2026-03-20)
 
 ### Features

package/README.md

@@ -100,6 +100,8 @@ export const App: React.FC = () => {
 };
 ```
 
+> Note: The `brandless` and `gnist` themes are for **internal use only**. Both use the "Geist" font family, so if you are using either of these themes, import `@gnist/design-system/fonts/tools` as your font.
+
 ### Next.js projects
 
 If you are setting up in a Next.js project, the procedure is quite the same.

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

@@ -9,7 +9,7 @@ import "../../../foundation/iconography/IconVariantProvider.js";
 import "../../../foundation/iconography/icons.js";
 import { Icon } from "../../../foundation/iconography/Icon.js";
 import { CheckboxRecipe, checkbox } from "./checkbox.css.js";
-import { InputWrapper, LabelRecipe, InputStyleRecipe, LabelStyle, indentedDescriptionStyle } from "./shared.css.js";
+import { InputWrapper, InputStyleRecipe, LabelStyle, LabelRecipe, indentedDescriptionStyle } from "./shared.css.js";
 import { SelectionDescription, HelperTextWrapper } from "./shared.js";
 const CustomCheckbox = ({ value, disabled }) => {
   if (!value) {

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

@@ -5,8 +5,8 @@ import { ScreenReaderOnly } from "../../../utilities/accessibility/ScreenReaderO
 import "../../../utilities/accessibility/visuallyHidden.css.js";
 import { createValidHtmlId } from "../../../utilities/html/index.js";
 import classNames from "classnames";
-import { RadioButtonRecipe, CheckedCircleRecipe } from "./radiobutton.css.js";
-import { LabelRecipe, InputStyleRecipe, LabelStyle, InputWrapper, indentedDescriptionStyle } from "./shared.css.js";
+import { CheckedCircleRecipe, RadioButtonRecipe } from "./radiobutton.css.js";
+import { InputStyleRecipe, LabelStyle, LabelRecipe, InputWrapper, indentedDescriptionStyle } from "./shared.css.js";
 import { SelectionDescription, HelperTextWrapper } from "./shared.js";
 import { useRadio } from "./RadioGroup.js";
 const CustomRadioButton = ({ isChecked, disabled, validity }) => {

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

@@ -2,33 +2,43 @@
 "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");
+require("../../../foundation/iconography/ExtraIconsProvider.cjs");
+require("../../../foundation/iconography/IconVariantProvider.cjs");
+require("../../../foundation/iconography/icons.cjs");
+const Icon = require("../../../foundation/iconography/Icon.cjs");
 const switch_css = require("./switch.css.cjs");
 const shared_css = require("./shared.css.cjs");
+const shared = require("./shared.cjs");
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
-function Switch({ label, description, value = false, onChange, disabled, id = index.createValidHtmlId(label || "toggle"), position = "left", hideLabel = false, className, ref, ...rest }) {
+function Switch({ label, description, value = false, onChange, disabled, id = index.createValidHtmlId(label || "toggle"), position = "left", hideLabel = false, canShowErrorMessage = false, className, ref, ...rest }) {
   const inputId = id;
+  const helperId = `${id}-helper`;
+  const { helperTextProps, inputAriaProps } = InputHelperText.useInputHelperText({
+    id: helperId,
+    reserveSpaceForMessage: canShowErrorMessage
+  });
   const LabelElement = () => {
-    return jsxRuntime.jsxs("span", { className: switch_css.SwitchLabelRecipe({
-      disabled,
-      side: position === "right" ? "left" : "right"
-    }), children: [label, description && jsxRuntime.jsx("div", { className: switch_css.switchDescription, children: description })] });
+    return jsxRuntime.jsx("span", { className: switch_css.switchLabelContent, children: jsxRuntime.jsx("span", { className: switch_css.SwitchLabelRecipe({ disabled }), children: label }) });
   };
-  return jsxRuntime.jsxs("span", { className: `${shared_css.InputWrapper} ${switch_css.focusContainer} ${className} ${atoms_css_js.atoms({ borderRadius: hideLabel ? "full" : "input" })}`, ref, children: [jsxRuntime.jsx("input", { type: "checkbox", id: inputId, disabled, onChange, checked: value === true, className: shared_css.InputStyleRecipe({ disabled }), style: {
+  const descriptionElement = description ?? jsxRuntime.jsx(shared.SelectionDescription, { disabled, children: jsxRuntime.jsx("div", { className: switch_css.switchDescription, children: description }) });
+  const switchElement = jsxRuntime.jsxs("span", { className: `${switch_css.switchField} ${className ?? ""}`, ref, children: [jsxRuntime.jsxs("span", { className: `${shared_css.InputWrapper} ${switch_css.focusContainer} ${atoms_css_js.atoms({ borderRadius: hideLabel ? "full" : "input" })}`, 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"
-  }, ...rest }), jsxRuntime.jsxs("label", { htmlFor: inputId, className: switch_css.switchContainerStyle, children: [position === "right" && !hideLabel && jsxRuntime.jsx(LabelElement, {}), jsxRuntime.jsx("span", { className: switch_css.SwitchRecipe({
+  }, ...inputAriaProps, ...rest }), jsxRuntime.jsxs("label", { htmlFor: inputId, className: switch_css.switchRow, children: [position === "right" && !hideLabel && jsxRuntime.jsx(LabelElement, {}), jsxRuntime.jsx("span", { className: switch_css.SwitchRecipe({
     selected: value,
     disabled
   }), children: jsxRuntime.jsx("span", { className: switch_css.SwitchThumbRecipe({
-    selected: value ?? false,
+    selected: value,
     disabled
-  }) }) }), position === "left" && !hideLabel && jsxRuntime.jsx(LabelElement, {}), hideLabel && jsxRuntime.jsx(ScreenReaderOnly.ScreenReaderOnly, { children: label })] })] });
+  }), children: (value && !disabled) ?? jsxRuntime.jsx("span", { className: switch_css.switchThumbIcon, "aria-hidden": true, children: jsxRuntime.jsx(Icon.Icon, { icon: "check", size: "xs" }) }) }) }), position === "left" && !hideLabel && jsxRuntime.jsx(LabelElement, {}), hideLabel && jsxRuntime.jsx(ScreenReaderOnly.ScreenReaderOnly, { children: label })] })] }), descriptionElement] });
+  return jsxRuntime.jsx(shared.HelperTextWrapper, { ...helperTextProps, children: switchElement });
 }
 exports.Switch = Switch;

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

@@ -13,5 +13,5 @@ export interface SwitchProps extends Omit<SelectionControlProps<boolean>, "rende
  *
  * Documentation: [Switch](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-selectioncontrols-switch--docs)
  */
-export declare function Switch({ label, description, value, onChange, disabled, id, position, hideLabel, className, ref, ...rest }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export declare function Switch({ label, description, value, onChange, disabled, id, position, hideLabel, canShowErrorMessage, className, ref, ...rest }: SwitchProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Switch.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAU5B,OAAO,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAGpD,MAAM,WAAW,WACb,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACnE,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,EACnB,KAAK,EACL,WAAW,EACX,KAAa,EACb,QAAQ,EACR,QAAQ,EACR,EAAyC,EACzC,QAAiB,EACjB,SAAiB,EACjB,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACV,EAAE,WAAW,2CA6Db"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/Switch.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAc5B,OAAO,EAEH,qBAAqB,EAExB,MAAM,aAAa,CAAC;AAGrB,MAAM,WAAW,WACb,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACnE,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,EACnB,KAAK,EACL,WAAW,EACX,KAAa,EACb,QAAQ,EACR,QAAQ,EACR,EAAyC,EACzC,QAAiB,EACjB,SAAiB,EACjB,mBAA2B,EAC3B,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACV,EAAE,WAAW,2CAkFb"}

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

@@ -1,33 +1,43 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } 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 { focusContainer, switchContainerStyle, SwitchRecipe, SwitchThumbRecipe, SwitchLabelRecipe, switchDescription } from "./switch.css.js";
+import "../../../foundation/iconography/ExtraIconsProvider.js";
+import "../../../foundation/iconography/IconVariantProvider.js";
+import "../../../foundation/iconography/icons.js";
+import { Icon } from "../../../foundation/iconography/Icon.js";
+import { switchDescription, switchField, focusContainer, switchRow, switchThumbIcon, SwitchThumbRecipe, SwitchRecipe, switchLabelContent, SwitchLabelRecipe } from "./switch.css.js";
 import { InputWrapper, InputStyleRecipe } from "./shared.css.js";
+import { SelectionDescription, HelperTextWrapper } from "./shared.js";
 import { atoms } from "@gnist/themes/atoms.css.js";
-function Switch({ label, description, value = false, onChange, disabled, id = createValidHtmlId(label || "toggle"), position = "left", hideLabel = false, className, ref, ...rest }) {
+function Switch({ label, description, value = false, onChange, disabled, id = createValidHtmlId(label || "toggle"), position = "left", hideLabel = false, canShowErrorMessage = false, className, ref, ...rest }) {
   const inputId = id;
+  const helperId = `${id}-helper`;
+  const { helperTextProps, inputAriaProps } = useInputHelperText({
+    id: helperId,
+    reserveSpaceForMessage: canShowErrorMessage
+  });
   const LabelElement = () => {
-    return jsxs("span", { className: SwitchLabelRecipe({
-      disabled,
-      side: position === "right" ? "left" : "right"
-    }), children: [label, description && jsx("div", { className: switchDescription, children: description })] });
+    return jsx("span", { className: switchLabelContent, children: jsx("span", { className: SwitchLabelRecipe({ disabled }), children: label }) });
   };
-  return jsxs("span", { className: `${InputWrapper} ${focusContainer} ${className} ${atoms({ borderRadius: hideLabel ? "full" : "input" })}`, ref, children: [jsx("input", { type: "checkbox", id: inputId, disabled, onChange, checked: value === true, className: InputStyleRecipe({ disabled }), style: {
+  const descriptionElement = description ?? jsx(SelectionDescription, { disabled, children: jsx("div", { className: switchDescription, children: description }) });
+  const switchElement = jsxs("span", { className: `${switchField} ${className ?? ""}`, ref, children: [jsxs("span", { className: `${InputWrapper} ${focusContainer} ${atoms({ borderRadius: hideLabel ? "full" : "input" })}`, 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"
-  }, ...rest }), jsxs("label", { htmlFor: inputId, className: switchContainerStyle, children: [position === "right" && !hideLabel && jsx(LabelElement, {}), jsx("span", { className: SwitchRecipe({
+  }, ...inputAriaProps, ...rest }), jsxs("label", { htmlFor: inputId, className: switchRow, children: [position === "right" && !hideLabel && jsx(LabelElement, {}), jsx("span", { className: SwitchRecipe({
     selected: value,
     disabled
   }), children: jsx("span", { className: SwitchThumbRecipe({
-    selected: value ?? false,
+    selected: value,
     disabled
-  }) }) }), position === "left" && !hideLabel && jsx(LabelElement, {}), hideLabel && jsx(ScreenReaderOnly, { children: label })] })] });
+  }), children: (value && !disabled) ?? jsx("span", { className: switchThumbIcon, "aria-hidden": true, children: jsx(Icon, { icon: "check", size: "xs" }) }) }) }), position === "left" && !hideLabel && jsx(LabelElement, {}), hideLabel && jsx(ScreenReaderOnly, { children: label })] })] }), descriptionElement] });
+  return jsx(HelperTextWrapper, { ...helperTextProps, children: switchElement });
 }
 export {
   Switch

package/dist/components/actions/selectionControls/switch.css.cjs

@@ -3,56 +3,79 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
 const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const cssUtils = require("@vanilla-extract/css-utils");
 const recipes = require("@vanilla-extract/recipes");
 const css = require("@vanilla-extract/css");
 const focusContainer = css.style({
   display: "inline-flex",
   alignItems: "center",
-  selectors: {
-    "&:has(:focus-visible)": {
-      outline: `${tokens_css_js.tokens.stroke.medium} solid ${tokens_css_js.tokens.color.interactive}`,
-      outlineOffset: "2px"
-    }
-  }
+  position: "relative",
+  flexShrink: 0
+});
+const switchField = css.style({
+  display: "inline-flex",
+  flexDirection: "column",
+  gap: tokens_css_js.tokens.spacing.base
 });
-const switchContainerStyle = css.style({
-  display: "flex"
+const switchRow = css.style({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: tokens_css_js.tokens.spacing.xxs
+});
+const switchLabelContent = css.style({
+  display: "inline-flex",
+  flexDirection: "column",
+  gap: tokens_css_js.tokens.spacing.base,
+  minWidth: 0
 });
 const switchContainer = css.style([
   {
     position: "relative",
     display: "inline-flex",
+    alignItems: "center",
+    flexShrink: 0,
     cursor: "pointer",
-    transition: "background-color 0.2s ease"
+    overflow: "hidden",
+    transition: "background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease"
   },
   atoms_css_js.atoms({
     borderRadius: "full",
     width: "xxl",
-    height: "l"
+    height: "m"
   })
 ]);
 const SwitchRecipe = recipes.recipe({
   base: [
     switchContainer,
-    atoms_css_js.atoms({
-      borderColor: "outline"
-    }),
     {
-      borderWidth: "1px",
+      borderWidth: tokens_css_js.tokens.stroke.small,
       borderStyle: "solid",
-      boxSizing: "border-box"
+      boxSizing: "border-box",
+      selectors: {
+        [`${focusContainer}:has(input:focus-visible) &`]: {
+          boxShadow: `0 0 0 ${tokens_css_js.tokens.stroke.medium} ${tokens_css_js.tokens.color.interactive}`
+        },
+        [`${focusContainer}:has(input:not(:disabled):hover) &`]: {
+          filter: "brightness(0.98)"
+        },
+        [`${focusContainer}:has(input:not(:disabled):active) &`]: {
+          filter: "brightness(0.94)"
+        }
+      }
     }
   ],
   variants: {
     selected: {
       true: [
         atoms_css_js.atoms({
-          backgroundColor: "success"
+          backgroundColor: "success",
+          borderColor: "success"
         })
       ],
       false: [
         atoms_css_js.atoms({
-          backgroundColor: "surface-variant"
+          backgroundColor: "surface-variant",
+          borderColor: "on-surface"
         })
       ]
     },
@@ -60,53 +83,114 @@ const SwitchRecipe = recipes.recipe({
       true: [
         atoms_css_js.atoms({
           backgroundColor: "disabled",
-          borderColor: "disabled"
+          borderColor: "on-disabled"
         }),
         {
-          cursor: "not-allowed",
-          opacity: 0.6
+          cursor: "not-allowed"
         }
       ],
       false: {}
     }
-  }
+  },
+  compoundVariants: [
+    {
+      variants: {
+        selected: true,
+        disabled: true
+      },
+      style: [
+        atoms_css_js.atoms({
+          backgroundColor: "on-disabled",
+          borderColor: "on-disabled"
+        })
+      ]
+    }
+  ]
 });
 const switchThumb = css.style({
   position: "absolute",
   top: "50%",
   transform: "translateY(-50%)",
-  transition: "left 0.2s ease, background-color 0.2s ease",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: "left 0.2s ease, transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease",
   borderRadius: "50%",
-  backgroundColor: tokens_css_js.tokens.palette.white,
-  boxShadow: "0 1px 3px rgba(0, 0, 0, 0.3)"
+  backgroundColor: tokens_css_js.tokens.color.surface,
+  selectors: {
+    [`${focusContainer}:has(input:not(:disabled):active) &`]: {
+      transform: "translateY(-50%) scale(0.94)"
+    }
+  }
 });
 const SwitchThumbRecipe = recipes.recipe({
   base: [
     switchThumb,
     atoms_css_js.atoms({
-      width: "m",
-      height: "m"
-    })
+      width: "s",
+      height: "s"
+    }),
+    {
+      borderWidth: tokens_css_js.tokens.stroke.small,
+      borderStyle: "solid",
+      boxSizing: "border-box"
+    }
   ],
   variants: {
     selected: {
-      true: {
-        left: `calc(100% - ${tokens_css_js.tokens.spacing.m} - 1px)`
-      },
-      false: {
-        left: "1px"
-      }
+      true: [
+        atoms_css_js.atoms({
+          borderColor: "on-surface"
+        }),
+        {
+          left: cssUtils.calc.subtract("100%", cssUtils.calc.add(tokens_css_js.tokens.size.s, tokens_css_js.tokens.stroke.small))
+        }
+      ],
+      false: [
+        atoms_css_js.atoms({
+          borderColor: "on-surface"
+        }),
+        {
+          left: tokens_css_js.tokens.stroke.small
+        }
+      ]
     },
     disabled: {
       true: [
         atoms_css_js.atoms({
-          backgroundColor: "on-disabled"
+          backgroundColor: "surface",
+          borderColor: "on-disabled"
         })
       ],
       false: {}
     }
-  }
+  },
+  compoundVariants: [
+    {
+      variants: {
+        selected: true,
+        disabled: true
+      },
+      style: [
+        atoms_css_js.atoms({
+          borderColor: "surface"
+        })
+      ]
+    }
+  ]
 });
+const switchThumbIcon = css.style([
+  {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    lineHeight: 0,
+    pointerEvents: "none"
+  },
+  atoms_css_js.atoms({
+    color: "on-surface"
+  })
+]);
 const switchLabel = css.style([
   {
     userSelect: "none",
@@ -127,18 +211,6 @@ const SwitchLabelRecipe = recipes.recipe({
         })
       ],
       false: {}
-    },
-    side: {
-      left: [
-        atoms_css_js.atoms({
-          marginRight: "xxs"
-        })
-      ],
-      right: [
-        atoms_css_js.atoms({
-          marginLeft: "xxs"
-        })
-      ]
     }
   }
 });
@@ -152,7 +224,10 @@ exports.SwitchRecipe = SwitchRecipe;
 exports.SwitchThumbRecipe = SwitchThumbRecipe;
 exports.focusContainer = focusContainer;
 exports.switchContainer = switchContainer;
-exports.switchContainerStyle = switchContainerStyle;
 exports.switchDescription = switchDescription;
+exports.switchField = switchField;
 exports.switchLabel = switchLabel;
+exports.switchLabelContent = switchLabelContent;
+exports.switchRow = switchRow;
 exports.switchThumb = switchThumb;
+exports.switchThumbIcon = switchThumbIcon;

package/dist/components/actions/selectionControls/switch.css.d.ts

@@ -1,5 +1,7 @@
 export declare const focusContainer: string;
-export declare const switchContainerStyle: string;
+export declare const switchField: string;
+export declare const switchRow: string;
+export declare const switchLabelContent: string;
 export declare const switchContainer: string;
 export declare const SwitchRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
     selected: {
@@ -9,7 +11,6 @@ export declare const SwitchRecipe: import("@vanilla-extract/recipes").RuntimeFn<
     disabled: {
         true: (string | {
             cursor: "not-allowed";
-            opacity: number;
         })[];
         false: {};
     };
@@ -17,28 +18,25 @@ export declare const SwitchRecipe: import("@vanilla-extract/recipes").RuntimeFn<
 export declare const switchThumb: string;
 export declare const SwitchThumbRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
     selected: {
-        true: {
-            left: `calc(100% - var(--${string}) - 1px)`;
-        };
-        false: {
-            left: "1px";
-        };
+        true: (string | {
+            left: string;
+        })[];
+        false: (string | {
+            left: `var(--${string})`;
+        })[];
     };
     disabled: {
         true: string[];
         false: {};
     };
 }>;
+export declare const switchThumbIcon: string;
 export declare const switchLabel: string;
 export declare const SwitchLabelRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
     disabled: {
         true: string[];
         false: {};
     };
-    side: {
-        left: string[];
-        right: string[];
-    };
 }>;
 export declare const switchDescription: string;
 //# sourceMappingURL=switch.css.d.ts.map

package/dist/components/actions/selectionControls/switch.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/switch.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,cAAc,QASzB,CAAC;AAEH,eAAO,MAAM,oBAAoB,QAE/B,CAAC;AAEH,eAAO,MAAM,eAAe,QAY1B,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;;EAuCvB,CAAC;AAEH,eAAO,MAAM,WAAW,QAQtB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;EA0B5B,CAAC;AAEH,eAAO,MAAM,WAAW,QAStB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;EAwB5B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAI5B,CAAC"}
+{"version":3,"file":"switch.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/switch.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,cAAc,QAKzB,CAAC;AAEH,eAAO,MAAM,WAAW,QAItB,CAAC;AAEH,eAAO,MAAM,SAAS,QAIpB,CAAC;AAEH,eAAO,MAAM,kBAAkB,QAK7B,CAAC;AAEH,eAAO,MAAM,eAAe,QAgB1B,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;EA8DvB,CAAC;AAEH,eAAO,MAAM,WAAW,QAgBtB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;EA0D5B,CAAC;AAEH,eAAO,MAAM,eAAe,QAW1B,CAAC;AAEH,eAAO,MAAM,WAAW,QAStB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;EAY5B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAI5B,CAAC"}