@sats-group/ui-lib 81.0.1 → 81.2.0

package/react/text-input/text-input.js

@@ -1,2 +1,2 @@
-var F=Object.defineProperty;var m=Object.getOwnPropertySymbols;var w=Object.prototype.hasOwnProperty,S=Object.prototype.propertyIsEnumerable;var I=(i,e,s)=>e in i?F(i,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):i[e]=s,k=(i,e)=>{for(var s in e||(e={}))w.call(e,s)&&I(i,s,e[s]);if(m)for(var s of m(e))S.call(e,s)&&I(i,s,e[s]);return i};var C=(i,e)=>{var s={};for(var n in i)w.call(i,n)&&e.indexOf(n)<0&&(s[n]=i[n]);if(i!=null&&m)for(var n of m(i))e.indexOf(n)<0&&S.call(i,n)&&(s[n]=i[n]);return s};import G from"classnames";import*as t from"react";import p from"../text";import J from"../use-input-validation";import K from"../icons/16/info";import L from"../icons/16/error";import{themes as _,variants as l}from"./text-input.types";import{useEffect as M}from"react";const E=t.forwardRef((U,q)=>{var b=U,{customErrorMessages:i,defaultValue:e,disabled:s,hasError:n,helpText:h,label:N,leadingIcon:o,maxLength:a,name:O,onChange:j=()=>{},placeholder:H,required:c,theme:z,trailingIcon:d,type:P="text",variant:u=l.large}=b,T=C(b,["customErrorMessages","defaultValue","disabled","hasError","helpText","label","leadingIcon","maxLength","name","onChange","placeholder","required","theme","trailingIcon","type","variant"]);const[A,f]=t.useState(0),[g,y]=t.useState(n),[B,D,x]=J(i,i?i.defaultError:void 0,g),v=a?a>0:void 0;return t.useEffect(()=>{e&&(typeof e=="string"?f(e.length):typeof e=="number"&&f(e))},[T]),M(()=>{y(n)},[n]),t.createElement("label",{className:G("text-input",{"text-input--theme-dark":z===_.dark,"text-input--theme-light":z===_.light,"text-input--disabled":s,"text-input--error":x||g,"text-input--icon":o||d,"text-input--variant-small":u===l.small,"text-input--variant-large":u===l.large})},t.createElement("div",{className:"text-input__wrapper"},t.createElement("div",{className:"text-input__label-wrapper"},t.createElement(p,{className:"text-input__label",theme:p.themes.emphasis,size:u===l.small?p.sizes.small:p.sizes.basic},N,c?t.createElement("span",{className:"text-input__asterisk"},"*"):null),v?t.createElement("div",{className:"text-input__length-counter"},t.createElement(p,{size:u===l.small?p.sizes.small:p.sizes.basic},A,"/",a)):null),t.createElement("div",{className:"text-input__input-wrapper"},o?t.createElement("div",{className:"text-input__icon"},o):null,t.createElement("input",k({className:"text-input__input",defaultValue:e,disabled:s,required:c,name:O,maxLength:v?a:void 0,onInvalid:r=>D(r),onChange:r=>{j(r),B(r),y(!1),v&&f(r.target.value.length)},placeholder:H,ref:q,type:P,"aria-label":N},T)),d?t.createElement("div",{className:"text-input__icon"},d):null),h?t.createElement("div",{className:"text-input__help"},t.createElement(K,null),t.createElement(p,{size:p.sizes.interface},h)):null,x?t.createElement("div",{"aria-hidden":"true",className:"text-input__error"},t.createElement(L,null),t.createElement(p,{size:p.sizes.interface},x)):null))});E.displayName="TextInput";const Q=Object.assign(E,{themes:_,variants:l});var it=Q;export{it as default};
+"use client";var F=Object.defineProperty;var m=Object.getOwnPropertySymbols;var w=Object.prototype.hasOwnProperty,S=Object.prototype.propertyIsEnumerable;var I=(i,e,s)=>e in i?F(i,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):i[e]=s,k=(i,e)=>{for(var s in e||(e={}))w.call(e,s)&&I(i,s,e[s]);if(m)for(var s of m(e))S.call(e,s)&&I(i,s,e[s]);return i};var C=(i,e)=>{var s={};for(var n in i)w.call(i,n)&&e.indexOf(n)<0&&(s[n]=i[n]);if(i!=null&&m)for(var n of m(i))e.indexOf(n)<0&&S.call(i,n)&&(s[n]=i[n]);return s};import G from"classnames";import*as t from"react";import l from"../text";import J from"../use-input-validation";import K from"../icons/16/info";import L from"../icons/16/error";import{themes as _,variants as p}from"./text-input.types";import{useEffect as M}from"react";const E=t.forwardRef((U,q)=>{var b=U,{customErrorMessages:i,defaultValue:e,disabled:s,hasError:n,helpText:h,label:N,leadingIcon:o,maxLength:a,name:O,onChange:j=()=>{},placeholder:H,required:c,theme:z,trailingIcon:d,type:P="text",variant:u=p.large}=b,T=C(b,["customErrorMessages","defaultValue","disabled","hasError","helpText","label","leadingIcon","maxLength","name","onChange","placeholder","required","theme","trailingIcon","type","variant"]);const[A,f]=t.useState(0),[g,y]=t.useState(n),[B,D,x]=J(i,i?i.defaultError:void 0,g),v=a?a>0:void 0;return t.useEffect(()=>{e&&(typeof e=="string"?f(e.length):typeof e=="number"&&f(e))},[T]),M(()=>{y(n)},[n]),t.createElement("label",{className:G("text-input",{"text-input--theme-dark":z===_.dark,"text-input--theme-light":z===_.light,"text-input--disabled":s,"text-input--error":x||g,"text-input--icon":o||d,"text-input--variant-small":u===p.small,"text-input--variant-large":u===p.large})},t.createElement("div",{className:"text-input__wrapper"},t.createElement("div",{className:"text-input__label-wrapper"},t.createElement(l,{className:"text-input__label",theme:l.themes.emphasis,size:u===p.small?l.sizes.small:l.sizes.basic},N,c?t.createElement("span",{className:"text-input__asterisk"},"*"):null),v?t.createElement("div",{className:"text-input__length-counter"},t.createElement(l,{size:u===p.small?l.sizes.small:l.sizes.basic},A,"/",a)):null),t.createElement("div",{className:"text-input__input-wrapper"},o?t.createElement("div",{className:"text-input__icon"},o):null,t.createElement("input",k({className:"text-input__input",defaultValue:e,disabled:s,required:c,name:O,maxLength:v?a:void 0,onInvalid:r=>D(r),onChange:r=>{j(r),B(r),y(!1),v&&f(r.target.value.length)},placeholder:H,ref:q,type:P,"aria-label":N},T)),d?t.createElement("div",{className:"text-input__icon"},d):null),h?t.createElement("div",{className:"text-input__help"},t.createElement(K,null),t.createElement(l,{size:l.sizes.interface},h)):null,x?t.createElement("div",{"aria-hidden":"true",className:"text-input__error"},t.createElement(L,null),t.createElement(l,{size:l.sizes.interface},x)):null))});E.displayName="TextInput";const Q=Object.assign(E,{themes:_,variants:p});var it=Q;export{it as default};
 //# sourceMappingURL=text-input.js.map

package/react/text-input/text-input.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/text-input/text-input.tsx"],
-  "sourcesContent": ["import cn from 'classnames';\nimport * as React from 'react';\n\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\nimport SvgInfo from '../icons/16/info';\nimport SvgError from '../icons/16/error';\n\nimport { themes, variants, TextInput as Props } from './text-input.types';\nimport { useEffect } from 'react';\n\nconst RefTextInput = React.forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      customErrorMessages,\n      defaultValue,\n      disabled,\n      hasError,\n      helpText,\n      label,\n      leadingIcon,\n      maxLength,\n      name,\n      onChange = () => {},\n      placeholder,\n      required,\n      theme,\n      trailingIcon,\n      type = 'text',\n      variant = variants.large,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [count, setCount] = React.useState(0);\n    const [isError, setIsError] = React.useState(hasError);\n    const [validationOnChange, onInvalid, error] = useInputValidation(\n      customErrorMessages,\n      customErrorMessages ? customErrorMessages.defaultError : undefined,\n      isError,\n    );\n    const isMaxLengthValid = maxLength ? maxLength > 0 : undefined;\n\n    React.useEffect(() => {\n      if (defaultValue) {\n        if (typeof defaultValue === 'string') {\n          setCount(defaultValue.length);\n        } else if (typeof defaultValue === 'number') {\n          setCount(defaultValue);\n        }\n      }\n    }, [restProps]);\n\n    useEffect(() => {\n      setIsError(hasError);\n    }, [hasError]);\n\n    return (\n      <label\n        className={cn('text-input', {\n          'text-input--theme-dark': theme === themes.dark,\n          'text-input--theme-light': theme === themes.light,\n          'text-input--disabled': disabled,\n          'text-input--error': error || isError,\n          'text-input--icon': leadingIcon || trailingIcon,\n          'text-input--variant-small': variant === variants.small,\n          'text-input--variant-large': variant === variants.large,\n        })}\n      >\n        <div className=\"text-input__wrapper\">\n          <div className=\"text-input__label-wrapper\">\n            <Text\n              className=\"text-input__label\"\n              theme={Text.themes.emphasis}\n              size={\n                variant === variants.small ? Text.sizes.small : Text.sizes.basic\n              }\n            >\n              {label}\n              {required ? (\n                <span className=\"text-input__asterisk\">*</span>\n              ) : null}\n            </Text>\n            {isMaxLengthValid ? (\n              <div className=\"text-input__length-counter\">\n                <Text\n                  size={\n                    variant === variants.small\n                      ? Text.sizes.small\n                      : Text.sizes.basic\n                  }\n                >\n                  {count}/{maxLength}\n                </Text>\n              </div>\n            ) : null}\n          </div>\n\n          <div className=\"text-input__input-wrapper\">\n            {leadingIcon ? (\n              <div className=\"text-input__icon\">{leadingIcon}</div>\n            ) : null}\n            <input\n              className=\"text-input__input\"\n              defaultValue={defaultValue}\n              disabled={disabled}\n              required={required}\n              name={name}\n              maxLength={isMaxLengthValid ? maxLength : undefined}\n              onInvalid={e => onInvalid(e)}\n              onChange={e => {\n                onChange(e);\n                validationOnChange(e);\n                setIsError(false); // NOTE: We want to reset error state on change to not confuse users.\n                if (isMaxLengthValid) {\n                  setCount(e.target.value.length);\n                }\n              }}\n              placeholder={placeholder}\n              ref={ref}\n              type={type}\n              aria-label={label}\n              {...restProps}\n            />\n            {trailingIcon ? (\n              <div className=\"text-input__icon\">{trailingIcon}</div>\n            ) : null}\n          </div>\n          {helpText ? (\n            <div className=\"text-input__help\">\n              <SvgInfo />\n              <Text size={Text.sizes.interface}>{helpText}</Text>\n            </div>\n          ) : null}\n          {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n          {error ? (\n            <div aria-hidden=\"true\" className=\"text-input__error\">\n              <SvgError />\n              <Text size={Text.sizes.interface}>{error}</Text>\n            </div>\n          ) : null}\n        </div>\n      </label>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"TextInput\"\nRefTextInput.displayName = 'TextInput';\n\nconst TextInput: typeof RefTextInput & {\n  themes: typeof themes;\n  variants: typeof variants;\n} = Object.assign(RefTextInput, { themes, variants });\n\nexport default TextInput;\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\nimport SvgInfo from '../icons/16/info';\nimport SvgError from '../icons/16/error';\n\nimport { themes, variants, TextInput as Props } from './text-input.types';\nimport { useEffect } from 'react';\n\nconst RefTextInput = React.forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      customErrorMessages,\n      defaultValue,\n      disabled,\n      hasError,\n      helpText,\n      label,\n      leadingIcon,\n      maxLength,\n      name,\n      onChange = () => {},\n      placeholder,\n      required,\n      theme,\n      trailingIcon,\n      type = 'text',\n      variant = variants.large,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [count, setCount] = React.useState(0);\n    const [isError, setIsError] = React.useState(hasError);\n    const [validationOnChange, onInvalid, error] = useInputValidation(\n      customErrorMessages,\n      customErrorMessages ? customErrorMessages.defaultError : undefined,\n      isError,\n    );\n    const isMaxLengthValid = maxLength ? maxLength > 0 : undefined;\n\n    React.useEffect(() => {\n      if (defaultValue) {\n        if (typeof defaultValue === 'string') {\n          setCount(defaultValue.length);\n        } else if (typeof defaultValue === 'number') {\n          setCount(defaultValue);\n        }\n      }\n    }, [restProps]);\n\n    useEffect(() => {\n      setIsError(hasError);\n    }, [hasError]);\n\n    return (\n      <label\n        className={cn('text-input', {\n          'text-input--theme-dark': theme === themes.dark,\n          'text-input--theme-light': theme === themes.light,\n          'text-input--disabled': disabled,\n          'text-input--error': error || isError,\n          'text-input--icon': leadingIcon || trailingIcon,\n          'text-input--variant-small': variant === variants.small,\n          'text-input--variant-large': variant === variants.large,\n        })}\n      >\n        <div className=\"text-input__wrapper\">\n          <div className=\"text-input__label-wrapper\">\n            <Text\n              className=\"text-input__label\"\n              theme={Text.themes.emphasis}\n              size={\n                variant === variants.small ? Text.sizes.small : Text.sizes.basic\n              }\n            >\n              {label}\n              {required ? (\n                <span className=\"text-input__asterisk\">*</span>\n              ) : null}\n            </Text>\n            {isMaxLengthValid ? (\n              <div className=\"text-input__length-counter\">\n                <Text\n                  size={\n                    variant === variants.small\n                      ? Text.sizes.small\n                      : Text.sizes.basic\n                  }\n                >\n                  {count}/{maxLength}\n                </Text>\n              </div>\n            ) : null}\n          </div>\n\n          <div className=\"text-input__input-wrapper\">\n            {leadingIcon ? (\n              <div className=\"text-input__icon\">{leadingIcon}</div>\n            ) : null}\n            <input\n              className=\"text-input__input\"\n              defaultValue={defaultValue}\n              disabled={disabled}\n              required={required}\n              name={name}\n              maxLength={isMaxLengthValid ? maxLength : undefined}\n              onInvalid={e => onInvalid(e)}\n              onChange={e => {\n                onChange(e);\n                validationOnChange(e);\n                setIsError(false); // NOTE: We want to reset error state on change to not confuse users.\n                if (isMaxLengthValid) {\n                  setCount(e.target.value.length);\n                }\n              }}\n              placeholder={placeholder}\n              ref={ref}\n              type={type}\n              aria-label={label}\n              {...restProps}\n            />\n            {trailingIcon ? (\n              <div className=\"text-input__icon\">{trailingIcon}</div>\n            ) : null}\n          </div>\n          {helpText ? (\n            <div className=\"text-input__help\">\n              <SvgInfo />\n              <Text size={Text.sizes.interface}>{helpText}</Text>\n            </div>\n          ) : null}\n          {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n          {error ? (\n            <div aria-hidden=\"true\" className=\"text-input__error\">\n              <SvgError />\n              <Text size={Text.sizes.interface}>{error}</Text>\n            </div>\n          ) : null}\n        </div>\n      </label>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"TextInput\"\nRefTextInput.displayName = 'TextInput';\n\nconst TextInput: typeof RefTextInput & {\n  themes: typeof themes;\n  variants: typeof variants;\n} = Object.assign(RefTextInput, { themes, variants });\n\nexport default TextInput;\n"],
+  "mappings": "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",
   "names": ["cn", "React", "Text", "useInputValidation", "SvgInfo", "SvgError", "themes", "variants", "useEffect", "RefTextInput", "_a", "ref", "_b", "customErrorMessages", "defaultValue", "disabled", "hasError", "helpText", "label", "leadingIcon", "maxLength", "name", "onChange", "placeholder", "required", "theme", "trailingIcon", "type", "variant", "restProps", "__objRest", "count", "setCount", "isError", "setIsError", "validationOnChange", "onInvalid", "error", "isMaxLengthValid", "__spreadValues", "e", "TextInput", "text_input_default"]
 }

package/react/text-input/text-input.scss

@@ -1,7 +1,7 @@
 @use '../../tokens/corner-radius';
 @use '../../tokens/font-sizes';
 @use '../../tokens/font-names';
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 
 .text-input {
@@ -32,7 +32,7 @@
   }
 
   &__length-counter {
-    color: light.$on-background-primary-alternate;
+    color: var(--on-background-primary-alternate);
   }
 
   &__label-wrapper {
@@ -41,23 +41,23 @@
   }
 
   &__input-wrapper {
-    border: 1px solid light.$ge-divider-default;
+    border: 1px solid var(--ge-divider-default);
     border-radius: corner-radius.$s;
     display: flex;
     align-items: center;
-    background-color: light.$surface-primary-default;
-    color: light.$on-surface-primary-default;
+    background-color: var(--surface-primary-default);
+    color: var(--on-surface-primary-default);
     width: 100%;
     box-sizing: border-box;
 
     &:focus-within {
-      border-color: light.$ge-border-focused;
+      border-color: var(--ge-border-focused);
       outline: none;
     }
 
     @media (hover: hover) {
       &:hover {
-        background-color: light.$surface-primary-hover;
+        background-color: var(--surface-primary-hover);
         cursor: text;
       }
     }
@@ -77,13 +77,13 @@
     }
 
     &::placeholder {
-      color: light.$on-surface-primary-alternate;
+      color: var(--on-surface-primary-alternate);
       opacity: 1;
     }
 
     &[disabled],
     &[disabled]::placeholder {
-      color: light.$on-surface-primary-disabled;
+      color: var(--on-surface-primary-disabled);
     }
 
     &::-webkit-outer-spin-button,
@@ -118,11 +118,11 @@
   }
 
   &__help {
-    color: light.$on-surface-primary-alternate;
+    color: var(--on-surface-primary-alternate);
   }
 
   &__error {
-    color: light.$on-surface-error;
+    color: var(--on-surface-error);
   }
 
   &__icon {
@@ -130,7 +130,7 @@
   }
 
   &__asterisk {
-    color: light.$on-surface-featured;
+    color: var(--on-surface-featured);
     margin-left: spacing.$xs;
   }
 
@@ -138,78 +138,78 @@
     #{$block}__label,
     #{$block}__icon,
     #{$block}__help {
-      color: light.$on-background-primary-disabled;
+      color: var(--on-background-primary-disabled);
     }
 
     #{$block}__input-wrapper {
-      background-color: light.$surface-primary-disabled;
-      border-color: light.$surface-primary-disabled;
+      background-color: var(--surface-primary-disabled);
+      border-color: var(--surface-primary-disabled);
       cursor: auto;
     }
   }
 
   &--error {
     #{$block}__icon {
-      color: light.$on-surface-error;
+      color: var(--on-surface-error);
     }
 
     #{$block}__input-wrapper {
-      outline: 2px solid light.$ge-signal-error;
+      outline: 2px solid var(--ge-signal-error);
       outline-offset: -2px;
 
       &:focus {
-        outline: 2px solid light.$ge-signal-error;
+        outline: 2px solid var(--ge-signal-error);
         outline-offset: -2px;
       }
     }
   }
 
   &__input {
-    color: light.$on-surface-primary-default;
+    color: var(--on-surface-primary-default);
   }
 
   &--theme-dark {
     #{$block}__icon {
-      color: light.$on-fixed-surface-primary-default;
+      color: var(--on-fixed-surface-primary-default);
     }
 
     #{$block}__label {
-      color: light.$on-fixed-background-primary-default;
+      color: var(--on-fixed-background-primary-default);
     }
 
     #{$block}__length-counter,
     #{$block}__help {
-      color: light.$on-background-primary-alternate;
+      color: var(--on-background-primary-alternate);
     }
 
     #{$block}__input-wrapper {
-      background-color: light.$fixed-surface-secondary-default;
-      border-color: light.$ge-border-default;
-      color: light.$on-fixed-surface-primary-alternate;
+      background-color: var(--fixed-surface-secondary-default);
+      border-color: var(--ge-border-default);
+      color: var(--on-fixed-surface-primary-alternate);
 
       &:focus-within {
-        background: light.$fixed-surface-primary-default;
-        color: light.$on-fixed-surface-primary-default;
+        background: var(--fixed-surface-primary-default);
+        color: var(--on-fixed-surface-primary-default);
         outline: none;
-        border-color: light.$ge-border-focused;
+        border-color: var(--ge-border-focused);
 
         ~ #{$block}__icon {
-          color: light.$on-fixed-surface-primary-default;
+          color: var(--on-fixed-surface-primary-default);
         }
       }
 
       &::placeholder {
-        color: light.$on-fixed-surface-primary-alternate;
+        color: var(--on-fixed-surface-primary-alternate);
       }
 
       &[disabled],
       &[disabled]::placeholder {
-        color: light.$on-fixed-surface-primary-disabled;
+        color: var(--on-fixed-surface-primary-disabled);
       }
 
       @media (hover: hover) {
         &:hover {
-          background-color: light.$fixed-surface-primary-hover;
+          background-color: var(--fixed-surface-primary-hover);
           cursor: text;
         }
       }
@@ -217,23 +217,23 @@
 
     #{$block}__input {
       background-color: transparent;
-      color: light.$on-fixed-surface-primary-default;
+      color: var(--on-fixed-surface-primary-default);
     }
 
     &#{$block}--disabled {
       #{$block}__label,
       #{$block}__icon,
       #{$block}__help {
-        color: light.$on-fixed-surface-primary-disabled;
+        color: var(--on-fixed-surface-primary-disabled);
       }
 
       &#{$block}--error #{$block}__icon {
-        color: light.$on-fixed-surface-error;
+        color: var(--on-fixed-surface-error);
       }
 
       #{$block}__input-wrapper {
-        background-color: light.$fixed-surface-primary-selected;
-        border-color: light.$on-fixed-surface-primary-disabled;
+        background-color: var(--fixed-surface-primary-selected);
+        border-color: var(--on-fixed-surface-primary-disabled);
         cursor: auto;
       }
 

package/react/toggle/toggle.js

@@ -1,2 +1,2 @@
-var w=Object.defineProperty;var r=Object.getOwnPropertySymbols;var m=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable;var d=(o,n,e)=>n in o?w(o,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[n]=e,p=(o,n)=>{for(var e in n||(n={}))m.call(n,e)&&d(o,e,n[e]);if(r)for(var e of r(n))s.call(n,e)&&d(o,e,n[e]);return o};var _=(o,n)=>{var e={};for(var t in o)m.call(o,t)&&n.indexOf(t)<0&&(e[t]=o[t]);if(o!=null&&r)for(var t of r(o))n.indexOf(t)<0&&s.call(o,t)&&(e[t]=o[t]);return e};import v from"classnames";import*as a from"react";import f from"../text";import P from"../use-input-validation";const b=a.forwardRef((k,I)=>{var i=k,{children:o,isLabelVisible:n=!0,label:e,labelPosition:t="right",name:u,value:h="",spaceBetween:N,testId:c}=i,l=_(i,["children","isLabelVisible","label","labelPosition","name","value","spaceBetween","testId"]);const[T,x,C]=P();return a.createElement("div",{className:v("toggle",{"toggle--error":C})},a.createElement("label",{className:v("toggle__content",{"toggle__content--space-between":N}),"data-testid":c},n&&t==="left"&&a.createElement("div",{className:"toggle__label"},a.createElement(f,null,e),o),a.createElement("div",{className:"toggle__button-wrap"},a.createElement("input",p({"aria-label":n?void 0:e,className:"toggle__input",type:"checkbox",name:u,onChange:g=>{l.onChange&&l.onChange(g),T(g)},onInvalid:g=>{l.onInvalid&&l.onInvalid(g),x(g)},ref:I,value:h},l)),a.createElement("span",{className:"toggle__slider"},a.createElement("div",{className:"toggle__slider-element"}))),n&&t==="right"&&a.createElement("div",{className:"toggle__label"},a.createElement(f,null,e),o)))});var q=b;export{q as default};
+"use client";var w=Object.defineProperty;var r=Object.getOwnPropertySymbols;var s=Object.prototype.hasOwnProperty,m=Object.prototype.propertyIsEnumerable;var d=(e,n,o)=>n in e?w(e,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[n]=o,p=(e,n)=>{for(var o in n||(n={}))s.call(n,o)&&d(e,o,n[o]);if(r)for(var o of r(n))m.call(n,o)&&d(e,o,n[o]);return e};var _=(e,n)=>{var o={};for(var t in e)s.call(e,t)&&n.indexOf(t)<0&&(o[t]=e[t]);if(e!=null&&r)for(var t of r(e))n.indexOf(t)<0&&m.call(e,t)&&(o[t]=e[t]);return o};import v from"classnames";import*as l from"react";import f from"../text";import P from"../use-input-validation";const b=l.forwardRef((k,I)=>{var i=k,{children:e,isLabelVisible:n=!0,label:o,labelPosition:t="right",name:u,value:c="",spaceBetween:h,testId:N}=i,a=_(i,["children","isLabelVisible","label","labelPosition","name","value","spaceBetween","testId"]);const[T,x,C]=P();return l.createElement("div",{className:v("toggle",{"toggle--error":C})},l.createElement("label",{className:v("toggle__content",{"toggle__content--space-between":h}),"data-testid":N},n&&t==="left"&&l.createElement("div",{className:"toggle__label"},l.createElement(f,null,o),e),l.createElement("div",{className:"toggle__button-wrap"},l.createElement("input",p({"aria-label":n?void 0:o,className:"toggle__input",type:"checkbox",name:u,onChange:g=>{a.onChange&&a.onChange(g),T(g)},onInvalid:g=>{a.onInvalid&&a.onInvalid(g),x(g)},ref:I,value:c},a)),l.createElement("span",{className:"toggle__slider"},l.createElement("div",{className:"toggle__slider-element"}))),n&&t==="right"&&l.createElement("div",{className:"toggle__label"},l.createElement(f,null,o),e)))});var q=b;export{q as default};
 //# sourceMappingURL=toggle.js.map

package/react/toggle/toggle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/toggle/toggle.tsx"],
-  "sourcesContent": ["import cn from 'classnames';\nimport * as React from 'react';\n\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\n\nimport { Toggle as Props } from './toggle.types';\n\nconst Toggle = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      isLabelVisible = true,\n      label,\n      labelPosition = 'right',\n      name,\n      value = '',\n      spaceBetween,\n      testId,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n\n    return (\n      <div\n        className={cn('toggle', {\n          'toggle--error': error,\n        })}\n      >\n        <label\n          className={cn('toggle__content', {\n            'toggle__content--space-between': spaceBetween,\n          })}\n          data-testid={testId}\n        >\n          {isLabelVisible && labelPosition === 'left' && (\n            <div className=\"toggle__label\">\n              <Text>{label}</Text>\n              {children}\n            </div>\n          )}\n\n          <div className=\"toggle__button-wrap\">\n            <input\n              aria-label={isLabelVisible ? undefined : label}\n              className=\"toggle__input\"\n              type=\"checkbox\"\n              name={name}\n              onChange={e => {\n                // NOTE: If props specify an `onChange`, we need to call that too\n                if (rest.onChange) rest.onChange(e);\n                onChange(e);\n              }}\n              onInvalid={e => {\n                // NOTE: If props specify an `onInvalid`, we need to call that too\n                if (rest.onInvalid) rest.onInvalid(e);\n                onInvalid(e);\n              }}\n              ref={ref}\n              value={value}\n              {...rest}\n            />\n            <span className=\"toggle__slider\">\n              <div className=\"toggle__slider-element\"></div>\n            </span>\n          </div>\n\n          {isLabelVisible && labelPosition === 'right' && (\n            <div className=\"toggle__label\">\n              <Text>{label}</Text>\n              {children}\n            </div>\n          )}\n        </label>\n      </div>\n    );\n  },\n);\n\nexport default Toggle;\n"],
-  "mappings": "2fAAA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAU,UACjB,OAAOC,MAAwB,0BAI/B,MAAMC,EAASH,EAAM,WAInB,CACEI,EAWAC,IACG,CAZH,IAAAC,EAAAF,EACE,UAAAG,EACA,eAAAC,EAAiB,GACjB,MAAAC,EACA,cAAAC,EAAgB,QAChB,KAAAC,EACA,MAAAC,EAAQ,GACR,aAAAC,EACA,OAAAC,CArBN,EAaIR,EASKS,EAAAC,EATLV,EASK,CARH,WACA,iBACA,QACA,gBACA,OACA,QACA,eACA,WAKF,KAAM,CAACW,EAAUC,EAAWC,CAAK,EAAIjB,EAAmB,EAExD,OACEF,EAAA,cAAC,OACC,UAAWD,EAAG,SAAU,CACtB,gBAAiBoB,CACnB,CAAC,GAEDnB,EAAA,cAAC,SACC,UAAWD,EAAG,kBAAmB,CAC/B,iCAAkCc,CACpC,CAAC,EACD,cAAaC,GAEZN,GAAkBE,IAAkB,QACnCV,EAAA,cAAC,OAAI,UAAU,iBACbA,EAAA,cAACC,EAAA,KAAMQ,CAAM,EACZF,CACH,EAGFP,EAAA,cAAC,OAAI,UAAU,uBACbA,EAAA,cAAC,QAAAoB,EAAA,CACC,aAAYZ,EAAiB,OAAYC,EACzC,UAAU,gBACV,KAAK,WACL,KAAME,EACN,SAAUU,GAAK,CAETN,EAAK,UAAUA,EAAK,SAASM,CAAC,EAClCJ,EAASI,CAAC,CACZ,EACA,UAAWA,GAAK,CAEVN,EAAK,WAAWA,EAAK,UAAUM,CAAC,EACpCH,EAAUG,CAAC,CACb,EACA,IAAKhB,EACL,MAAOO,GACHG,EACN,EACAf,EAAA,cAAC,QAAK,UAAU,kBACdA,EAAA,cAAC,OAAI,UAAU,yBAAyB,CAC1C,CACF,EAECQ,GAAkBE,IAAkB,SACnCV,EAAA,cAAC,OAAI,UAAU,iBACbA,EAAA,cAACC,EAAA,KAAMQ,CAAM,EACZF,CACH,CAEJ,CACF,CAEJ,CACF,EAEA,IAAOe,EAAQnB",
+  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\n\nimport { Toggle as Props } from './toggle.types';\n\nconst Toggle = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      isLabelVisible = true,\n      label,\n      labelPosition = 'right',\n      name,\n      value = '',\n      spaceBetween,\n      testId,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n\n    return (\n      <div\n        className={cn('toggle', {\n          'toggle--error': error,\n        })}\n      >\n        <label\n          className={cn('toggle__content', {\n            'toggle__content--space-between': spaceBetween,\n          })}\n          data-testid={testId}\n        >\n          {isLabelVisible && labelPosition === 'left' && (\n            <div className=\"toggle__label\">\n              <Text>{label}</Text>\n              {children}\n            </div>\n          )}\n\n          <div className=\"toggle__button-wrap\">\n            <input\n              aria-label={isLabelVisible ? undefined : label}\n              className=\"toggle__input\"\n              type=\"checkbox\"\n              name={name}\n              onChange={e => {\n                // NOTE: If props specify an `onChange`, we need to call that too\n                if (rest.onChange) rest.onChange(e);\n                onChange(e);\n              }}\n              onInvalid={e => {\n                // NOTE: If props specify an `onInvalid`, we need to call that too\n                if (rest.onInvalid) rest.onInvalid(e);\n                onInvalid(e);\n              }}\n              ref={ref}\n              value={value}\n              {...rest}\n            />\n            <span className=\"toggle__slider\">\n              <div className=\"toggle__slider-element\"></div>\n            </span>\n          </div>\n\n          {isLabelVisible && labelPosition === 'right' && (\n            <div className=\"toggle__label\">\n              <Text>{label}</Text>\n              {children}\n            </div>\n          )}\n        </label>\n      </div>\n    );\n  },\n);\n\nexport default Toggle;\n"],
+  "mappings": "wgBAEA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAU,UACjB,OAAOC,MAAwB,0BAI/B,MAAMC,EAASH,EAAM,WAInB,CACEI,EAWAC,IACG,CAZH,IAAAC,EAAAF,EACE,UAAAG,EACA,eAAAC,EAAiB,GACjB,MAAAC,EACA,cAAAC,EAAgB,QAChB,KAAAC,EACA,MAAAC,EAAQ,GACR,aAAAC,EACA,OAAAC,CAvBN,EAeIR,EASKS,EAAAC,EATLV,EASK,CARH,WACA,iBACA,QACA,gBACA,OACA,QACA,eACA,WAKF,KAAM,CAACW,EAAUC,EAAWC,CAAK,EAAIjB,EAAmB,EAExD,OACEF,EAAA,cAAC,OACC,UAAWD,EAAG,SAAU,CACtB,gBAAiBoB,CACnB,CAAC,GAEDnB,EAAA,cAAC,SACC,UAAWD,EAAG,kBAAmB,CAC/B,iCAAkCc,CACpC,CAAC,EACD,cAAaC,GAEZN,GAAkBE,IAAkB,QACnCV,EAAA,cAAC,OAAI,UAAU,iBACbA,EAAA,cAACC,EAAA,KAAMQ,CAAM,EACZF,CACH,EAGFP,EAAA,cAAC,OAAI,UAAU,uBACbA,EAAA,cAAC,QAAAoB,EAAA,CACC,aAAYZ,EAAiB,OAAYC,EACzC,UAAU,gBACV,KAAK,WACL,KAAME,EACN,SAAUU,GAAK,CAETN,EAAK,UAAUA,EAAK,SAASM,CAAC,EAClCJ,EAASI,CAAC,CACZ,EACA,UAAWA,GAAK,CAEVN,EAAK,WAAWA,EAAK,UAAUM,CAAC,EACpCH,EAAUG,CAAC,CACb,EACA,IAAKhB,EACL,MAAOO,GACHG,EACN,EACAf,EAAA,cAAC,QAAK,UAAU,kBACdA,EAAA,cAAC,OAAI,UAAU,yBAAyB,CAC1C,CACF,EAECQ,GAAkBE,IAAkB,SACnCV,EAAA,cAAC,OAAI,UAAU,iBACbA,EAAA,cAACC,EAAA,KAAMQ,CAAM,EACZF,CACH,CAEJ,CACF,CAEJ,CACF,EAEA,IAAOe,EAAQnB",
   "names": ["cn", "React", "Text", "useInputValidation", "Toggle", "_a", "ref", "_b", "children", "isLabelVisible", "label", "labelPosition", "name", "value", "spaceBetween", "testId", "rest", "__objRest", "onChange", "onInvalid", "error", "__spreadValues", "e", "toggle_default"]
 }

package/react/toggle/toggle.scss

@@ -1,4 +1,4 @@
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing.scss';
 
 .toggle {
@@ -26,7 +26,7 @@
   }
 
   &__slider {
-    background: light.$ge-toggle-unselected-default;
+    background: var(--ge-toggle-unselected-default);
     border-radius: 40px;
     position: absolute;
     top: 50%;
@@ -41,7 +41,7 @@
   &__slider-element {
     height: 18px;
     width: 18px;
-    background: light.$ge-toggle-interactive-element;
+    background: var(--ge-toggle-interactive-element);
     filter: drop-shadow(0px 3px 1px rgba(0, 0, 0, 0.06))
       drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.05))
       drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.05));
@@ -55,7 +55,7 @@
     height: $sizeHeight;
 
     &:checked + #{$block}__slider {
-      background: light.$ge-toggle-selected-default;
+      background: var(--ge-toggle-selected-default);
     }
 
     &:checked + #{$block}__slider #{$block}__slider-element {

package/react/toolbox/toolbox.scss

@@ -1,12 +1,12 @@
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 @use '../../tokens/corner-radius';
 
 .toolbox {
-  border-top: 1px solid light.$ge-border-default;
+  border-top: 1px solid var(--ge-border-default);
   border-bottom-right-radius: corner-radius.$s;
   border-bottom-left-radius: corner-radius.$s;
-  background-color: light.$surface-primary-default;
+  background-color: var(--surface-primary-default);
   width: 100%;
   display: flex;
   justify-content: space-evenly;
@@ -17,7 +17,7 @@
     width: 100%;
 
     &:hover {
-      background: light.$surface-primary-hover;
+      background: var(--surface-primary-hover);
     }
 
     &:first-child {
@@ -34,7 +34,7 @@
     }
 
     &:not(:last-child) {
-      border-right: 1px solid light.$ge-border-default;
+      border-right: 1px solid var(--ge-border-default);
     }
   }
 
@@ -54,7 +54,7 @@
     align-items: center;
     row-gap: spacing.$xs;
     column-gap: spacing.$xxs;
-    color: light.$on-buttons-on-link-default;
+    color: var(--on-buttons-on-link-default);
     padding: spacing.$s;
     background: none;
     border: none;