@sats-group/ui-lib 81.0.1 → 81.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "81.0.1",
+  "version": "81.2.0",
   "description": "SATS web user interface library",
   "engines": {
     "node": "^18 || ^20",

package/react/badge/badge.scss

@@ -1,4 +1,4 @@
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 @use '../../tokens/corner-radius';
 
@@ -19,35 +19,35 @@
 
   &--theme-light {
     &-primary {
-      color: light.$on-ge-on-badge-primary;
-      background: light.$ge-badge-primary;
+      color: var(--on-ge-on-badge-primary);
+      background: var(--ge-badge-primary);
     }
 
     &-secondary {
-      color: light.$on-ge-on-badge-secondary;
-      background: light.$ge-badge-secondary;
+      color: var(--on-ge-on-badge-secondary);
+      background: var(--ge-badge-secondary);
     }
 
     &-tertiary {
-      color: light.$on-ge-on-badge-tertiary;
-      background: light.$ge-badge-tertiary;
+      color: var(--on-ge-on-badge-tertiary);
+      background: var(--ge-badge-tertiary);
     }
   }
 
   &--theme-fixed {
     &-primary {
-      color: light.$on-ge-on-badge-primary;
-      background: light.$ge-badge-primary;
+      color: var(--on-ge-on-badge-primary);
+      background: var(--ge-badge-primary);
     }
 
     &-secondary {
-      color: light.$on-ge-on-fixed-badge-secondary;
-      background: light.$ge-fixed-badge-secondary;
+      color: var(--on-ge-on-fixed-badge-secondary);
+      background: var(--ge-fixed-badge-secondary);
     }
 
     &-tertiary {
-      color: light.$on-ge-on-fixed-badge-tertiary;
-      background: light.$ge-fixed-badge-tertiary;
+      color: var(--on-ge-on-fixed-badge-tertiary);
+      background: var(--ge-fixed-badge-tertiary);
     }
   }
 }

package/react/banner/banner.js

@@ -1,2 +1,2 @@
-import d from"classnames";import n,{useState as y}from"react";import r from"../text";import N from"../visually-hidden";import v from"../icons/18/error";import t from"../icons/18/info";import h from"../icons/18/confirm";import x from"../icons/18/warning-sign";import g from"../icons/18/close";const C={error:n.createElement(v,null),information:n.createElement(t,null),neutral:n.createElement(t,null),success:n.createElement(h,null),warning:n.createElement(x,null)},T=({dismiss:e,icon:s,link:a,list:o,nested:u,text:b,title:i,type:l})=>{const[p,f]=y(!1);if(p)return null;const _=()=>f(!0);return n.createElement("div",{className:d("banner",{"banner--layout-dismissable":!s&&e,"banner--layout-icon":s&&!e,"banner--layout-single":!s&&!e,"banner--layout-triple":s&&e,"banner--nested":u,[`banner--type-${l}`]:l})},s?n.createElement("div",{className:"banner__icon"},C[l]):null,n.createElement("div",{className:"banner__primary"},i?n.createElement("div",{className:"banner__title"},n.createElement(r,{theme:r.themes.emphasis,tight:!0},i)):null,n.createElement(r,{className:"banner__text",size:r.sizes.small},b),o.length?n.createElement(r,{elementName:"ol",className:"banner__list",size:r.sizes.small},o.map(m=>n.createElement("li",{key:m},m))):null,a?n.createElement(r,{className:"banner__link"},n.createElement("a",{className:"banner__anchor",href:a.href},a.text)):null),e?n.createElement("div",{className:"banner__secondary"},n.createElement("button",{className:"banner__dismisser",onClick:_},n.createElement(N,null,e),n.createElement(g,null))):null)};var V=T;export{V as default};
+"use client";import d from"classnames";import n,{useState as y}from"react";import r from"../text";import N from"../visually-hidden";import v from"../icons/18/error";import t from"../icons/18/info";import h from"../icons/18/confirm";import x from"../icons/18/warning-sign";import g from"../icons/18/close";const c={error:n.createElement(v,null),information:n.createElement(t,null),neutral:n.createElement(t,null),success:n.createElement(h,null),warning:n.createElement(x,null)},C=({dismiss:e,icon:s,link:l,list:o,nested:u,text:b,title:i,type:a})=>{const[p,f]=y(!1);if(p)return null;const _=()=>f(!0);return n.createElement("div",{className:d("banner",{"banner--layout-dismissable":!s&&e,"banner--layout-icon":s&&!e,"banner--layout-single":!s&&!e,"banner--layout-triple":s&&e,"banner--nested":u,[`banner--type-${a}`]:a})},s?n.createElement("div",{className:"banner__icon"},c[a]):null,n.createElement("div",{className:"banner__primary"},i?n.createElement("div",{className:"banner__title"},n.createElement(r,{theme:r.themes.emphasis,tight:!0},i)):null,n.createElement(r,{className:"banner__text",size:r.sizes.small},b),o.length?n.createElement(r,{elementName:"ol",className:"banner__list",size:r.sizes.small},o.map(m=>n.createElement("li",{key:m},m))):null,l?n.createElement(r,{className:"banner__link"},n.createElement("a",{className:"banner__anchor",href:l.href},l.text)):null),e?n.createElement("div",{className:"banner__secondary"},n.createElement("button",{className:"banner__dismisser",onClick:_},n.createElement(N,null,e),n.createElement(g,null))):null)};var V=C;export{V as default};
 //# sourceMappingURL=banner.js.map

package/react/banner/banner.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/banner/banner.tsx"],
-  "sourcesContent": ["import cn from 'classnames';\nimport React, { useState } from 'react';\n\nimport Text from '../text';\nimport VisuallyHidden from '../visually-hidden';\nimport Error from '../icons/18/error';\nimport Info from '../icons/18/info';\nimport Confirm from '../icons/18/confirm';\nimport WarningSign from '../icons/18/warning-sign';\nimport Close from '../icons/18/close';\n\nimport type { Banner as Props } from './banner.types';\n\nconst typeIcon = {\n  error: <Error />,\n  information: <Info />,\n  neutral: <Info />,\n  success: <Confirm />,\n  warning: <WarningSign />,\n};\n\nconst Banner: React.FunctionComponent<Props> = ({\n  dismiss,\n  icon,\n  link,\n  list,\n  nested,\n  text,\n  title,\n  type,\n}) => {\n  const [isDismissed, setDismissed] = useState(false);\n  if (isDismissed) {\n    return null;\n  }\n\n  const handleClick = () => setDismissed(true);\n\n  return (\n    <div\n      className={cn('banner', {\n        'banner--layout-dismissable': !icon && dismiss,\n        'banner--layout-icon': icon && !dismiss,\n        'banner--layout-single': !icon && !dismiss,\n        'banner--layout-triple': icon && dismiss,\n        'banner--nested': nested,\n        [`banner--type-${type}`]: type,\n      })}\n    >\n      {icon ? <div className=\"banner__icon\">{typeIcon[type]}</div> : null}\n      <div className=\"banner__primary\">\n        {title ? (\n          <div className=\"banner__title\">\n            <Text theme={Text.themes.emphasis} tight>\n              {title}\n            </Text>\n          </div>\n        ) : null}\n        <Text className=\"banner__text\" size={Text.sizes.small}>\n          {text}\n        </Text>\n        {list.length ? (\n          <Text\n            elementName=\"ol\"\n            className=\"banner__list\"\n            size={Text.sizes.small}\n          >\n            {list.map(item => (\n              <li key={item}>{item}</li>\n            ))}\n          </Text>\n        ) : null}\n        {link ? (\n          <Text className=\"banner__link\">\n            <a className=\"banner__anchor\" href={link.href}>\n              {link.text}\n            </a>\n          </Text>\n        ) : null}\n      </div>\n      {dismiss ? (\n        <div className=\"banner__secondary\">\n          <button className=\"banner__dismisser\" onClick={handleClick}>\n            <VisuallyHidden>{dismiss}</VisuallyHidden>\n            <Close />\n          </button>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default Banner;\n"],
-  "mappings": "AAAA,OAAOA,MAAQ,aACf,OAAOC,GAAS,YAAAC,MAAgB,QAEhC,OAAOC,MAAU,UACjB,OAAOC,MAAoB,qBAC3B,OAAOC,MAAW,oBAClB,OAAOC,MAAU,mBACjB,OAAOC,MAAa,sBACpB,OAAOC,MAAiB,2BACxB,OAAOC,MAAW,oBAIlB,MAAMC,EAAW,CACf,MAAOT,EAAA,cAACI,EAAA,IAAM,EACd,YAAaJ,EAAA,cAACK,EAAA,IAAK,EACnB,QAASL,EAAA,cAACK,EAAA,IAAK,EACf,QAASL,EAAA,cAACM,EAAA,IAAQ,EAClB,QAASN,EAAA,cAACO,EAAA,IAAY,CACxB,EAEMG,EAAyC,CAAC,CAC9C,QAAAC,EACA,KAAAC,EACA,KAAAC,EACA,KAAAC,EACA,OAAAC,EACA,KAAAC,EACA,MAAAC,EACA,KAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAaC,CAAY,EAAInB,EAAS,EAAK,EAClD,GAAIkB,EACF,OAAO,KAGT,MAAME,EAAc,IAAMD,EAAa,EAAI,EAE3C,OACEpB,EAAA,cAAC,OACC,UAAWD,EAAG,SAAU,CACtB,6BAA8B,CAACa,GAAQD,EACvC,sBAAuBC,GAAQ,CAACD,EAChC,wBAAyB,CAACC,GAAQ,CAACD,EACnC,wBAAyBC,GAAQD,EACjC,iBAAkBI,EAClB,CAAC,gBAAgBG,CAAI,EAAE,EAAGA,CAC5B,CAAC,GAEAN,EAAOZ,EAAA,cAAC,OAAI,UAAU,gBAAgBS,EAASS,CAAI,CAAE,EAAS,KAC/DlB,EAAA,cAAC,OAAI,UAAU,mBACZiB,EACCjB,EAAA,cAAC,OAAI,UAAU,iBACbA,EAAA,cAACE,EAAA,CAAK,MAAOA,EAAK,OAAO,SAAU,MAAK,IACrCe,CACH,CACF,EACE,KACJjB,EAAA,cAACE,EAAA,CAAK,UAAU,eAAe,KAAMA,EAAK,MAAM,OAC7Cc,CACH,EACCF,EAAK,OACJd,EAAA,cAACE,EAAA,CACC,YAAY,KACZ,UAAU,eACV,KAAMA,EAAK,MAAM,OAEhBY,EAAK,IAAIQ,GACRtB,EAAA,cAAC,MAAG,IAAKsB,GAAOA,CAAK,CACtB,CACH,EACE,KACHT,EACCb,EAAA,cAACE,EAAA,CAAK,UAAU,gBACdF,EAAA,cAAC,KAAE,UAAU,iBAAiB,KAAMa,EAAK,MACtCA,EAAK,IACR,CACF,EACE,IACN,EACCF,EACCX,EAAA,cAAC,OAAI,UAAU,qBACbA,EAAA,cAAC,UAAO,UAAU,oBAAoB,QAASqB,GAC7CrB,EAAA,cAACG,EAAA,KAAgBQ,CAAQ,EACzBX,EAAA,cAACQ,EAAA,IAAM,CACT,CACF,EACE,IACN,CAEJ,EAEA,IAAOe,EAAQb",
+  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport React, { useState } from 'react';\n\nimport Text from '../text';\nimport VisuallyHidden from '../visually-hidden';\nimport Error from '../icons/18/error';\nimport Info from '../icons/18/info';\nimport Confirm from '../icons/18/confirm';\nimport WarningSign from '../icons/18/warning-sign';\nimport Close from '../icons/18/close';\n\nimport type { Banner as Props } from './banner.types';\n\nconst typeIcon = {\n  error: <Error />,\n  information: <Info />,\n  neutral: <Info />,\n  success: <Confirm />,\n  warning: <WarningSign />,\n};\n\nconst Banner: React.FunctionComponent<Props> = ({\n  dismiss,\n  icon,\n  link,\n  list,\n  nested,\n  text,\n  title,\n  type,\n}) => {\n  const [isDismissed, setDismissed] = useState(false);\n  if (isDismissed) {\n    return null;\n  }\n\n  const handleClick = () => setDismissed(true);\n\n  return (\n    <div\n      className={cn('banner', {\n        'banner--layout-dismissable': !icon && dismiss,\n        'banner--layout-icon': icon && !dismiss,\n        'banner--layout-single': !icon && !dismiss,\n        'banner--layout-triple': icon && dismiss,\n        'banner--nested': nested,\n        [`banner--type-${type}`]: type,\n      })}\n    >\n      {icon ? <div className=\"banner__icon\">{typeIcon[type]}</div> : null}\n      <div className=\"banner__primary\">\n        {title ? (\n          <div className=\"banner__title\">\n            <Text theme={Text.themes.emphasis} tight>\n              {title}\n            </Text>\n          </div>\n        ) : null}\n        <Text className=\"banner__text\" size={Text.sizes.small}>\n          {text}\n        </Text>\n        {list.length ? (\n          <Text\n            elementName=\"ol\"\n            className=\"banner__list\"\n            size={Text.sizes.small}\n          >\n            {list.map(item => (\n              <li key={item}>{item}</li>\n            ))}\n          </Text>\n        ) : null}\n        {link ? (\n          <Text className=\"banner__link\">\n            <a className=\"banner__anchor\" href={link.href}>\n              {link.text}\n            </a>\n          </Text>\n        ) : null}\n      </div>\n      {dismiss ? (\n        <div className=\"banner__secondary\">\n          <button className=\"banner__dismisser\" onClick={handleClick}>\n            <VisuallyHidden>{dismiss}</VisuallyHidden>\n            <Close />\n          </button>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default Banner;\n"],
+  "mappings": "aAEA,OAAOA,MAAQ,aACf,OAAOC,GAAS,YAAAC,MAAgB,QAEhC,OAAOC,MAAU,UACjB,OAAOC,MAAoB,qBAC3B,OAAOC,MAAW,oBAClB,OAAOC,MAAU,mBACjB,OAAOC,MAAa,sBACpB,OAAOC,MAAiB,2BACxB,OAAOC,MAAW,oBAIlB,MAAMC,EAAW,CACf,MAAOT,EAAA,cAACI,EAAA,IAAM,EACd,YAAaJ,EAAA,cAACK,EAAA,IAAK,EACnB,QAASL,EAAA,cAACK,EAAA,IAAK,EACf,QAASL,EAAA,cAACM,EAAA,IAAQ,EAClB,QAASN,EAAA,cAACO,EAAA,IAAY,CACxB,EAEMG,EAAyC,CAAC,CAC9C,QAAAC,EACA,KAAAC,EACA,KAAAC,EACA,KAAAC,EACA,OAAAC,EACA,KAAAC,EACA,MAAAC,EACA,KAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAaC,CAAY,EAAInB,EAAS,EAAK,EAClD,GAAIkB,EACF,OAAO,KAGT,MAAME,EAAc,IAAMD,EAAa,EAAI,EAE3C,OACEpB,EAAA,cAAC,OACC,UAAWD,EAAG,SAAU,CACtB,6BAA8B,CAACa,GAAQD,EACvC,sBAAuBC,GAAQ,CAACD,EAChC,wBAAyB,CAACC,GAAQ,CAACD,EACnC,wBAAyBC,GAAQD,EACjC,iBAAkBI,EAClB,CAAC,gBAAgBG,CAAI,EAAE,EAAGA,CAC5B,CAAC,GAEAN,EAAOZ,EAAA,cAAC,OAAI,UAAU,gBAAgBS,EAASS,CAAI,CAAE,EAAS,KAC/DlB,EAAA,cAAC,OAAI,UAAU,mBACZiB,EACCjB,EAAA,cAAC,OAAI,UAAU,iBACbA,EAAA,cAACE,EAAA,CAAK,MAAOA,EAAK,OAAO,SAAU,MAAK,IACrCe,CACH,CACF,EACE,KACJjB,EAAA,cAACE,EAAA,CAAK,UAAU,eAAe,KAAMA,EAAK,MAAM,OAC7Cc,CACH,EACCF,EAAK,OACJd,EAAA,cAACE,EAAA,CACC,YAAY,KACZ,UAAU,eACV,KAAMA,EAAK,MAAM,OAEhBY,EAAK,IAAIQ,GACRtB,EAAA,cAAC,MAAG,IAAKsB,GAAOA,CAAK,CACtB,CACH,EACE,KACHT,EACCb,EAAA,cAACE,EAAA,CAAK,UAAU,gBACdF,EAAA,cAAC,KAAE,UAAU,iBAAiB,KAAMa,EAAK,MACtCA,EAAK,IACR,CACF,EACE,IACN,EACCF,EACCX,EAAA,cAAC,OAAI,UAAU,qBACbA,EAAA,cAAC,UAAO,UAAU,oBAAoB,QAASqB,GAC7CrB,EAAA,cAACG,EAAA,KAAgBQ,CAAQ,EACzBX,EAAA,cAACQ,EAAA,IAAM,CACT,CACF,EACE,IACN,CAEJ,EAEA,IAAOe,EAAQb",
   "names": ["cn", "React", "useState", "Text", "VisuallyHidden", "Error", "Info", "Confirm", "WarningSign", "Close", "typeIcon", "Banner", "dismiss", "icon", "link", "list", "nested", "text", "title", "type", "isDismissed", "setDismissed", "handleClick", "item", "banner_default"]
 }

package/react/banner/banner.scss

@@ -1,5 +1,5 @@
 @use '../../tokens/corner-radius';
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 
 .banner {
@@ -33,60 +33,60 @@
 
   &--type {
     &-error {
-      background-color: light.$signal-surface-error;
-      border-color: light.$on-signal-surface-error-alternate;
+      background-color: var(--signal-surface-error);
+      border-color: var(--on-signal-surface-error-alternate);
 
       .banner__anchor,
       .banner__dismisser,
       .banner__icon {
-        color: light.$on-signal-surface-error-alternate;
+        color: var(--on-signal-surface-error-alternate);
       }
     }
 
     &-information {
-      background-color: light.$signal-surface-information;
-      border-color: light.$on-signal-surface-information-alternate;
+      background-color: var(--signal-surface-information);
+      border-color: var(--on-signal-surface-information-alternate);
 
       .banner__anchor,
       .banner__dismisser,
       .banner__icon {
-        color: light.$on-signal-surface-information-alternate;
+        color: var(--on-signal-surface-information-alternate);
       }
     }
 
     &-neutral {
-      background-color: light.$signal-surface-neutral;
-      border-color: light.$on-signal-surface-neutral-alternate;
+      background-color: var(--signal-surface-neutral);
+      border-color: var(--on-signal-surface-neutral-alternate);
 
       .banner__anchor,
       .banner__dismisser {
-        color: light.$on-signal-surface-neutral-alternate;
+        color: var(--on-signal-surface-neutral-alternate);
       }
 
       .banner__icon {
-        color: light.$on-surface-neutral;
+        color: var(--on-surface-neutral);
       }
     }
 
     &-success {
-      background-color: light.$signal-surface-success;
-      border-color: light.$on-signal-surface-success-alternate;
+      background-color: var(--signal-surface-success);
+      border-color: var(--on-signal-surface-success-alternate);
 
       .banner__anchor,
       .banner__dismisser,
       .banner__icon {
-        color: light.$on-signal-surface-success-alternate;
+        color: var(--on-signal-surface-success-alternate);
       }
     }
 
     &-warning {
-      background-color: light.$signal-surface-warning;
-      border-color: light.$on-signal-surface-warning-alternate;
+      background-color: var(--signal-surface-warning);
+      border-color: var(--on-signal-surface-warning-alternate);
 
       .banner__anchor,
       .banner__dismisser,
       .banner__icon {
-        color: light.$on-signal-surface-warning-alternate;
+        color: var(--on-signal-surface-warning-alternate);
       }
     }
   }

package/react/bomb/bomb.scss

@@ -1,5 +1,5 @@
 @use '../../tokens/elevation';
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 
 .bomb {
@@ -8,9 +8,9 @@
 
   @include elevation.level(1);
   aspect-ratio: 1/1; // NOTE: Needs fallback for perfect roundness in older browsers. Worth it?
-  background: light.$buttons-cta-default;
+  background: var(--buttons-cta-default);
   border-radius: 50%;
-  color: light.$on-buttons-on-cta-default;
+  color: var(--on-buttons-on-cta-default);
   display: grid;
   overflow: hidden;
   padding: spacing.$l;
@@ -20,7 +20,7 @@
 
   &::before {
     border-radius: 50%;
-    border: $border-thickness solid light.$on-buttons-on-cta-default;
+    border: $border-thickness solid var(--on-buttons-on-cta-default);
     bottom: $border-inset;
     content: '';
     display: block;

package/react/checkbox/checkbox.js

@@ -1,2 +1,2 @@
-var T=Object.defineProperty;var b=Object.getOwnPropertySymbols;var t=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable;var p=(c,e,i)=>e in c?T(c,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):c[e]=i,u=(c,e)=>{for(var i in e||(e={}))t.call(e,i)&&p(c,i,e[i]);if(b)for(var i of b(e))f.call(e,i)&&p(c,i,e[i]);return c};var g=(c,e)=>{var i={};for(var l in c)t.call(c,l)&&e.indexOf(l)<0&&(i[l]=c[l]);if(c!=null&&b)for(var l of b(c))e.indexOf(l)<0&&f.call(c,l)&&(i[l]=c[l]);return i};import s from"classnames";import*as o from"react";import B from"../use-input-validation";import h from"../text";import{themes as M}from"./checkbox.types";const N=o.forwardRef((j,L)=>{var m=j,{children:c,disabled:e,description:i,extra:l,intermediate:k,isLabelVisible:d=!0,label:r,name:w,showCustomError:C=!0,theme:n,value:y="",isUnderlined:I,required:v}=m,a=g(m,["children","disabled","description","extra","intermediate","isLabelVisible","label","name","showCustomError","theme","value","isUnderlined","required"]);const[$,z,x]=B();return o.createElement("div",{className:s("checkbox",{"checkbox--error":x,"checkbox--intermediate":k,[`checkbox--${n}`]:n})},o.createElement("label",{className:s("checkbox__content",{"checkbox--underline":I})},o.createElement("div",{className:"checkbox__main"},o.createElement("div",{className:"checkbox__main-top"},o.createElement("div",null,o.createElement("input",u({"aria-label":d?void 0:r,className:"checkbox__input",type:"checkbox",name:w,onChange:_=>{a.onChange&&a.onChange(_),$(_)},onInvalid:_=>{a.onInvalid&&a.onInvalid(_),z(_)},ref:L,value:y,disabled:e,required:v},a)),o.createElement("div",{className:s("checkbox__icon",{"checkbox__icon--intermediate":k,[`checkbox__icon--${n}`]:n})},o.createElement("svg",{className:"checkbox__intermediate",width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o.createElement("line",{x1:"0",y1:"5",x2:"10",y2:"5",stroke:"currentColor",strokeWidth:"2"})),o.createElement("svg",{className:"checkbox__check",width:"12",height:"10",viewBox:"0 0 12 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o.createElement("path",{d:"M4.76123 9.0605L0.700729 5L1.76123 3.9395L4.76123 6.9395L10.7612 0.939501L11.8217 2L4.76123 9.0605Z",fill:"currentColor"})))),d?o.createElement(o.Fragment,null,r?o.createElement(h,{className:s("checkbox__label",{[`checkbox__label--${n}`]:n,"checkbox__label--disabled":e}),size:h.sizes.basic},r):o.createElement("div",{className:s("checkbox__label",{[`checkbox__label--${n}`]:n,"checkbox__label--disabled":e})},c)):null,v?o.createElement("span",{className:"checkbox__asterisk"},"*"):null),i&&o.createElement(h,{className:s("checkbox__description",{[`checkbox__label--${n}`]:n,"checkbox__label--disabled":e}),size:h.sizes.small},i))),x&&C&&o.createElement("div",{"aria-hidden":"true",className:s("checkbox__error",{[`checkbox__error--${n}`]:n})},x),l&&o.createElement("span",{className:"checkbox__extra"},l))});N.displayName="Checkbox";const W=Object.assign(N,{themes:M});var D=W;export{D as default};
+"use client";var T=Object.defineProperty;var b=Object.getOwnPropertySymbols;var p=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable;var t=(c,o,i)=>o in c?T(c,o,{enumerable:!0,configurable:!0,writable:!0,value:i}):c[o]=i,u=(c,o)=>{for(var i in o||(o={}))p.call(o,i)&&t(c,i,o[i]);if(b)for(var i of b(o))f.call(o,i)&&t(c,i,o[i]);return c};var g=(c,o)=>{var i={};for(var l in c)p.call(c,l)&&o.indexOf(l)<0&&(i[l]=c[l]);if(c!=null&&b)for(var l of b(c))o.indexOf(l)<0&&f.call(c,l)&&(i[l]=c[l]);return i};import s from"classnames";import*as e from"react";import B from"../use-input-validation";import h from"../text";import{themes as M}from"./checkbox.types";const N=e.forwardRef((j,L)=>{var m=j,{children:c,disabled:o,description:i,extra:l,intermediate:k,isLabelVisible:d=!0,label:r,name:w,showCustomError:C=!0,theme:n,value:y="",isUnderlined:I,required:v}=m,a=g(m,["children","disabled","description","extra","intermediate","isLabelVisible","label","name","showCustomError","theme","value","isUnderlined","required"]);const[$,z,x]=B();return e.createElement("div",{className:s("checkbox",{"checkbox--error":x,"checkbox--intermediate":k,[`checkbox--${n}`]:n})},e.createElement("label",{className:s("checkbox__content",{"checkbox--underline":I})},e.createElement("div",{className:"checkbox__main"},e.createElement("div",{className:"checkbox__main-top"},e.createElement("div",null,e.createElement("input",u({"aria-label":d?void 0:r,className:"checkbox__input",type:"checkbox",name:w,onChange:_=>{a.onChange&&a.onChange(_),$(_)},onInvalid:_=>{a.onInvalid&&a.onInvalid(_),z(_)},ref:L,value:y,disabled:o,required:v},a)),e.createElement("div",{className:s("checkbox__icon",{"checkbox__icon--intermediate":k,[`checkbox__icon--${n}`]:n})},e.createElement("svg",{className:"checkbox__intermediate",width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("line",{x1:"0",y1:"5",x2:"10",y2:"5",stroke:"currentColor",strokeWidth:"2"})),e.createElement("svg",{className:"checkbox__check",width:"12",height:"10",viewBox:"0 0 12 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M4.76123 9.0605L0.700729 5L1.76123 3.9395L4.76123 6.9395L10.7612 0.939501L11.8217 2L4.76123 9.0605Z",fill:"currentColor"})))),d?e.createElement(e.Fragment,null,r?e.createElement(h,{className:s("checkbox__label",{[`checkbox__label--${n}`]:n,"checkbox__label--disabled":o}),size:h.sizes.basic},r):e.createElement("div",{className:s("checkbox__label",{[`checkbox__label--${n}`]:n,"checkbox__label--disabled":o})},c)):null,v?e.createElement("span",{className:"checkbox__asterisk"},"*"):null),i&&e.createElement(h,{className:s("checkbox__description",{[`checkbox__label--${n}`]:n,"checkbox__label--disabled":o}),size:h.sizes.small},i))),x&&C&&e.createElement("div",{"aria-hidden":"true",className:s("checkbox__error",{[`checkbox__error--${n}`]:n})},x),l&&e.createElement("span",{className:"checkbox__extra"},l))});N.displayName="Checkbox";const W=Object.assign(N,{themes:M});var D=W;export{D as default};
 //# sourceMappingURL=checkbox.js.map

package/react/checkbox/checkbox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/checkbox/checkbox.tsx"],
-  "sourcesContent": ["import cn from 'classnames';\nimport * as React from 'react';\n\nimport useInputValidation from '../use-input-validation';\nimport Text from '../text';\n\nimport { Checkbox as Props, themes } from './checkbox.types';\n\nconst RefCheckbox = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      disabled,\n      description,\n      extra,\n      intermediate,\n      isLabelVisible = true,\n      label,\n      name,\n      showCustomError = true,\n      theme,\n      value = '',\n      isUnderlined,\n      required,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n\n    return (\n      <div\n        className={cn('checkbox', {\n          'checkbox--error': error,\n          'checkbox--intermediate': intermediate,\n          [`checkbox--${theme}`]: theme,\n        })}\n      >\n        <label\n          className={cn('checkbox__content', {\n            'checkbox--underline': isUnderlined,\n          })}\n        >\n          <div className=\"checkbox__main\">\n            <div className=\"checkbox__main-top\">\n              <div>\n                <input\n                  aria-label={isLabelVisible ? undefined : label}\n                  className=\"checkbox__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 (restProps.onChange) restProps.onChange(e);\n                    onChange(e);\n                  }}\n                  onInvalid={e => {\n                    // NOTE: If props specify an `onInvalid`, we need to call that too\n                    if (restProps.onInvalid) restProps.onInvalid(e);\n                    onInvalid(e);\n                  }}\n                  ref={ref}\n                  value={value}\n                  disabled={disabled}\n                  required={required}\n                  {...restProps}\n                />\n\n                <div\n                  className={cn('checkbox__icon', {\n                    'checkbox__icon--intermediate': intermediate,\n                    [`checkbox__icon--${theme}`]: theme,\n                  })}\n                >\n                  <svg\n                    className=\"checkbox__intermediate\"\n                    width=\"10\"\n                    height=\"10\"\n                    viewBox=\"0 0 10 10\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <line\n                      x1=\"0\"\n                      y1=\"5\"\n                      x2=\"10\"\n                      y2=\"5\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"2\"\n                    />\n                  </svg>\n                  <svg\n                    className=\"checkbox__check\"\n                    width=\"12\"\n                    height=\"10\"\n                    viewBox=\"0 0 12 10\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <path\n                      d=\"M4.76123 9.0605L0.700729 5L1.76123 3.9395L4.76123 6.9395L10.7612 0.939501L11.8217 2L4.76123 9.0605Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </div>\n              </div>\n              {isLabelVisible ? (\n                <>\n                  {label ? (\n                    <Text\n                      className={cn('checkbox__label', {\n                        [`checkbox__label--${theme}`]: theme,\n                        'checkbox__label--disabled': disabled,\n                      })}\n                      size={Text.sizes.basic}\n                    >\n                      {label}\n                    </Text>\n                  ) : (\n                    <div\n                      className={cn('checkbox__label', {\n                        [`checkbox__label--${theme}`]: theme,\n                        'checkbox__label--disabled': disabled,\n                      })}\n                    >\n                      {children}\n                    </div>\n                  )}\n                </>\n              ) : null}\n              {required ? <span className=\"checkbox__asterisk\">*</span> : null}\n            </div>\n            {description && (\n              <Text\n                className={cn('checkbox__description', {\n                  [`checkbox__label--${theme}`]: theme,\n                  'checkbox__label--disabled': disabled,\n                })}\n                size={Text.sizes.small}\n              >\n                {description}\n              </Text>\n            )}\n          </div>\n        </label>\n\n        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n        {error && showCustomError && (\n          <div\n            aria-hidden=\"true\"\n            className={cn('checkbox__error', {\n              [`checkbox__error--${theme}`]: theme,\n            })}\n          >\n            {error}\n          </div>\n        )}\n\n        {extra && <span className=\"checkbox__extra\">{extra}</span>}\n      </div>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Checkbox\"\nRefCheckbox.displayName = 'Checkbox';\n\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\nconst Checkbox: typeof RefCheckbox & {\n  themes: typeof themes;\n} = Object.assign(RefCheckbox, { themes });\n\nexport default Checkbox;\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport useInputValidation from '../use-input-validation';\nimport Text from '../text';\n\nimport { Checkbox as Props, themes } from './checkbox.types';\n\nconst RefCheckbox = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      disabled,\n      description,\n      extra,\n      intermediate,\n      isLabelVisible = true,\n      label,\n      name,\n      showCustomError = true,\n      theme,\n      value = '',\n      isUnderlined,\n      required,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n\n    return (\n      <div\n        className={cn('checkbox', {\n          'checkbox--error': error,\n          'checkbox--intermediate': intermediate,\n          [`checkbox--${theme}`]: theme,\n        })}\n      >\n        <label\n          className={cn('checkbox__content', {\n            'checkbox--underline': isUnderlined,\n          })}\n        >\n          <div className=\"checkbox__main\">\n            <div className=\"checkbox__main-top\">\n              <div>\n                <input\n                  aria-label={isLabelVisible ? undefined : label}\n                  className=\"checkbox__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 (restProps.onChange) restProps.onChange(e);\n                    onChange(e);\n                  }}\n                  onInvalid={e => {\n                    // NOTE: If props specify an `onInvalid`, we need to call that too\n                    if (restProps.onInvalid) restProps.onInvalid(e);\n                    onInvalid(e);\n                  }}\n                  ref={ref}\n                  value={value}\n                  disabled={disabled}\n                  required={required}\n                  {...restProps}\n                />\n\n                <div\n                  className={cn('checkbox__icon', {\n                    'checkbox__icon--intermediate': intermediate,\n                    [`checkbox__icon--${theme}`]: theme,\n                  })}\n                >\n                  <svg\n                    className=\"checkbox__intermediate\"\n                    width=\"10\"\n                    height=\"10\"\n                    viewBox=\"0 0 10 10\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <line\n                      x1=\"0\"\n                      y1=\"5\"\n                      x2=\"10\"\n                      y2=\"5\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"2\"\n                    />\n                  </svg>\n                  <svg\n                    className=\"checkbox__check\"\n                    width=\"12\"\n                    height=\"10\"\n                    viewBox=\"0 0 12 10\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <path\n                      d=\"M4.76123 9.0605L0.700729 5L1.76123 3.9395L4.76123 6.9395L10.7612 0.939501L11.8217 2L4.76123 9.0605Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </div>\n              </div>\n              {isLabelVisible ? (\n                <>\n                  {label ? (\n                    <Text\n                      className={cn('checkbox__label', {\n                        [`checkbox__label--${theme}`]: theme,\n                        'checkbox__label--disabled': disabled,\n                      })}\n                      size={Text.sizes.basic}\n                    >\n                      {label}\n                    </Text>\n                  ) : (\n                    <div\n                      className={cn('checkbox__label', {\n                        [`checkbox__label--${theme}`]: theme,\n                        'checkbox__label--disabled': disabled,\n                      })}\n                    >\n                      {children}\n                    </div>\n                  )}\n                </>\n              ) : null}\n              {required ? <span className=\"checkbox__asterisk\">*</span> : null}\n            </div>\n            {description && (\n              <Text\n                className={cn('checkbox__description', {\n                  [`checkbox__label--${theme}`]: theme,\n                  'checkbox__label--disabled': disabled,\n                })}\n                size={Text.sizes.small}\n              >\n                {description}\n              </Text>\n            )}\n          </div>\n        </label>\n\n        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n        {error && showCustomError && (\n          <div\n            aria-hidden=\"true\"\n            className={cn('checkbox__error', {\n              [`checkbox__error--${theme}`]: theme,\n            })}\n          >\n            {error}\n          </div>\n        )}\n\n        {extra && <span className=\"checkbox__extra\">{extra}</span>}\n      </div>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Checkbox\"\nRefCheckbox.displayName = 'Checkbox';\n\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\nconst Checkbox: typeof RefCheckbox & {\n  themes: typeof themes;\n} = Object.assign(RefCheckbox, { themes });\n\nexport default Checkbox;\n"],
+  "mappings": "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",
   "names": ["cn", "React", "useInputValidation", "Text", "themes", "RefCheckbox", "_a", "ref", "_b", "children", "disabled", "description", "extra", "intermediate", "isLabelVisible", "label", "name", "showCustomError", "theme", "value", "isUnderlined", "required", "restProps", "__objRest", "onChange", "onInvalid", "error", "__spreadValues", "e", "Checkbox", "checkbox_default"]
 }

package/react/checkbox/checkbox.scss

@@ -1,4 +1,4 @@
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 
 .checkbox {
@@ -6,37 +6,37 @@
   $size: 20px;
 
   &__asterisk {
-    color: light.$on-surface-featured;
+    color: var(--on-surface-featured);
     margin-left: spacing.$xs;
   }
 
   &:focus-within {
     .checkbox__icon {
-      outline: 4px solid light.$ge-selector-primary-unselected-default;
+      outline: 4px solid var(--ge-selector-primary-unselected-default);
       outline-offset: 2px;
 
       &--light {
-        outline-color: light.$ge-fixed-selector-unselected-default;
+        outline-color: var(--ge-fixed-selector-unselected-default);
       }
     }
   }
 
   &--underline {
     padding-bottom: spacing.$s;
-    border-bottom: 1px solid light.$ge-divider-default;
+    border-bottom: 1px solid var(--ge-divider-default);
 
     &--light {
-      border-color: light.$ge-divider-default;
+      border-color: var(--ge-divider-default);
     }
   }
 
   &--intermediate {
     .checkbox__icon {
-      border-color: light.$ge-selector-primary-selected-default;
-      background-color: light.$ge-selector-primary-selected-default;
+      border-color: var(--ge-selector-primary-selected-default);
+      background-color: var(--ge-selector-primary-selected-default);
 
       svg {
-        color: light.$on-ge-on-selector-primary-selected-default;
+        color: var(--on-ge-on-selector-primary-selected-default);
       }
 
       .checkbox__check {
@@ -48,20 +48,20 @@
       }
 
       &--light {
-        border-color: light.$ge-fixed-selector-selected-default;
-        background-color: light.$ge-fixed-selector-selected-default;
+        border-color: var(--ge-fixed-selector-selected-default);
+        background-color: var(--ge-fixed-selector-selected-default);
 
         svg {
-          color: light.$on-ge-on-fixed-selector-selected-default;
+          color: var(--on-ge-on-fixed-selector-selected-default);
         }
       }
 
       &--blue {
-        border-color: light.$on-background-primary-default;
-        background-color: light.$on-background-primary-default;
+        border-color: var(--on-background-primary-default);
+        background-color: var(--on-background-primary-default);
 
         svg {
-          color: light.$on-ge-on-selector-primary-selected-default;
+          color: var(--on-ge-on-selector-primary-selected-default);
         }
       }
     }
@@ -69,10 +69,10 @@
 
   &--error {
     .checkbox__icon {
-      border-color: light.$ge-signal-border-error;
+      border-color: var(--ge-signal-border-error);
 
       &--light {
-        border-color: light.$ge-signal-border-error;
+        border-color: var(--ge-signal-border-error);
       }
     }
   }
@@ -112,11 +112,11 @@
     }
 
     &:checked + .checkbox__icon {
-      background-color: light.$ge-selector-primary-selected-default;
-      border-color: light.$ge-selector-primary-selected-default;
+      background-color: var(--ge-selector-primary-selected-default);
+      border-color: var(--ge-selector-primary-selected-default);
 
       svg {
-        color: light.$on-ge-on-selector-primary-selected-default;
+        color: var(--on-ge-on-selector-primary-selected-default);
       }
 
       .checkbox__check {
@@ -128,20 +128,20 @@
       }
 
       &--light {
-        background-color: light.$ge-fixed-selector-selected-default;
-        border-color: light.$ge-fixed-selector-selected-default;
+        background-color: var(--ge-fixed-selector-selected-default);
+        border-color: var(--ge-fixed-selector-selected-default);
 
         svg {
-          color: light.$on-ge-on-fixed-selector-selected-default;
+          color: var(--on-ge-on-fixed-selector-selected-default);
         }
       }
 
       &--blue {
-        background-color: light.$on-background-primary-default;
-        border-color: light.$on-background-primary-default;
+        background-color: var(--on-background-primary-default);
+        border-color: var(--on-background-primary-default);
 
         svg {
-          color: light.$on-ge-on-selector-primary-selected-default;
+          color: var(--on-ge-on-selector-primary-selected-default);
         }
       }
     }
@@ -157,7 +157,7 @@
 
   &__icon {
     border-radius: 4px;
-    border: 2px solid light.$ge-selector-primary-unselected-default;
+    border: 2px solid var(--ge-selector-primary-unselected-default);
     box-sizing: border-box;
     height: $size;
     position: relative;
@@ -174,31 +174,31 @@
     }
 
     &--light {
-      border-color: light.$ge-fixed-selector-unselected-default;
+      border-color: var(--ge-fixed-selector-unselected-default);
     }
   }
 
   &__description {
-    color: light.$on-surface-primary-alternate;
+    color: var(--on-surface-primary-alternate);
     margin-left: $size + (spacing.$xs);
     &--light {
-      color: light.$on-fixed-surface-neutral;
+      color: var(--on-fixed-surface-neutral);
     }
 
     &--disabled {
-      color: light.$on-surface-primary-disabled;
+      color: var(--on-surface-primary-disabled);
     }
   }
 
   &__label {
-    color: light.$on-surface-primary-default;
+    color: var(--on-surface-primary-default);
 
     &--light {
-      color: light.$on-fixed-surface-primary-default;
+      color: var(--on-fixed-surface-primary-default);
     }
 
     &--disabled {
-      color: light.$on-surface-primary-default;
+      color: var(--on-surface-primary-default);
     }
   }
 
@@ -208,11 +208,11 @@
   }
 
   &__error {
-    color: light.$ge-signal-error;
+    color: var(--ge-signal-error);
     margin-top: 4px;
 
     &--light {
-      color: light.$ge-signal-error;
+      color: var(--ge-signal-error);
     }
   }
 }

package/react/chip/chip.scss

@@ -1,4 +1,4 @@
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 
 .chip {
@@ -10,23 +10,23 @@
   display: inline-block;
   border-radius: 40px; // NOTE: Custom border radius by design
   background-color: transparent;
-  border: 1px solid light.$ge-chips-unselected-default;
+  border: 1px solid var(--ge-chips-unselected-default);
 
   @media (hover: hover) {
     &:not([disabled]):hover {
-      background-color: light.$ge-chips-unselected-hover;
-      color: light.$on-ge-on-chips-unselected-default;
+      background-color: var(--ge-chips-unselected-hover);
+      color: var(--on-ge-on-chips-unselected-default);
     }
   }
 
   &--selected {
-    background-color: light.$ge-chips-selected-default;
-    color: light.$on-ge-on-chips-selected-default;
+    background-color: var(--ge-chips-selected-default);
+    color: var(--on-ge-on-chips-selected-default);
 
     @media (hover: hover) {
       &:not([disabled]):hover {
-        background-color: light.$ge-chips-selected-hover;
-        color: light.$on-ge-on-chips-selected-default;
+        background-color: var(--ge-chips-selected-hover);
+        color: var(--on-ge-on-chips-selected-default);
       }
     }
   }
@@ -39,8 +39,8 @@
   }
 
   &[disabled] {
-    background-color: light.$ge-chips-selected-disabled;
-    color: light.$on-ge-on-chips-selected-disabled;
+    background-color: var(--ge-chips-selected-disabled);
+    color: var(--on-ge-on-chips-selected-disabled);
     cursor: not-allowed;
   }
 }

package/react/chip-selected/chip-selected.js

@@ -1,2 +1,2 @@
-var C=Object.defineProperty,N=Object.defineProperties;var S=Object.getOwnPropertyDescriptors;var c=Object.getOwnPropertySymbols;var z=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable;var u=(l,s,t)=>s in l?C(l,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):l[s]=t,p=(l,s)=>{for(var t in s||(s={}))z.call(s,t)&&u(l,t,s[t]);if(c)for(var t of c(s))g.call(s,t)&&u(l,t,s[t]);return l},f=(l,s)=>N(l,S(s));import*as e from"react";import b from"../icons/24/arrow-down";import T from"../icons/24/arrow-up";import E from"../chip/chip";import o from"../text";import H from"../link";import k from"../collapse";import w from"../hooks/use-event";const O=({resetSelected:l,description:s,hideSelected:t,maxChipsToShow:h=41,showSelected:_,chips:r})=>{const[d,v]=e.useState(!1),[m,a]=e.useState(0),i=e.useRef(null);w("resize",()=>{i&&i.current&&a(i.current.clientHeight)}),e.useEffect(()=>{i&&i.current&&a(i.current.clientHeight)},[i]);const x=()=>{v(n=>!n)};return r?e.createElement("div",{className:"chip-selected__selected-options-wrapper"},e.createElement("div",{className:"chip-selected__clear-all-button"},e.createElement(o,null,s),e.createElement(H,p({},l))),e.createElement("div",null,e.createElement(k,{className:"chip-selected__collapse",isOpen:d},e.createElement("div",{className:"chip-selected__selected-options",ref:i},r.map(n=>e.createElement(E,f(p({},n),{key:n.text}))))),m&&m>h?e.createElement("button",{type:"button",className:"chip-selected__expand",onClick:x},d?e.createElement(e.Fragment,null,e.createElement(o,{elementName:"span",size:o.sizes.small,className:"chip-selected__expand-text"},t),e.createElement(T,null)):e.createElement(e.Fragment,null,e.createElement(o,{elementName:"span",size:o.sizes.small,className:"chip-selected__expand-text"},_),e.createElement(b,null))):null)):null};var B=O;export{B as default};
+"use client";var C=Object.defineProperty,N=Object.defineProperties;var S=Object.getOwnPropertyDescriptors;var c=Object.getOwnPropertySymbols;var z=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable;var u=(l,s,t)=>s in l?C(l,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):l[s]=t,p=(l,s)=>{for(var t in s||(s={}))z.call(s,t)&&u(l,t,s[t]);if(c)for(var t of c(s))g.call(s,t)&&u(l,t,s[t]);return l},f=(l,s)=>N(l,S(s));import*as e from"react";import b from"../icons/24/arrow-down";import T from"../icons/24/arrow-up";import E from"../chip/chip";import o from"../text";import H from"../link";import k from"../collapse";import w from"../hooks/use-event";const O=({resetSelected:l,description:s,hideSelected:t,maxChipsToShow:h=41,showSelected:_,chips:r})=>{const[d,v]=e.useState(!1),[m,a]=e.useState(0),i=e.useRef(null);w("resize",()=>{i&&i.current&&a(i.current.clientHeight)}),e.useEffect(()=>{i&&i.current&&a(i.current.clientHeight)},[i]);const x=()=>{v(n=>!n)};return r?e.createElement("div",{className:"chip-selected__selected-options-wrapper"},e.createElement("div",{className:"chip-selected__clear-all-button"},e.createElement(o,null,s),e.createElement(H,p({},l))),e.createElement("div",null,e.createElement(k,{className:"chip-selected__collapse",isOpen:d},e.createElement("div",{className:"chip-selected__selected-options",ref:i},r.map(n=>e.createElement(E,f(p({},n),{key:n.text}))))),m&&m>h?e.createElement("button",{type:"button",className:"chip-selected__expand",onClick:x},d?e.createElement(e.Fragment,null,e.createElement(o,{elementName:"span",size:o.sizes.small,className:"chip-selected__expand-text"},t),e.createElement(T,null)):e.createElement(e.Fragment,null,e.createElement(o,{elementName:"span",size:o.sizes.small,className:"chip-selected__expand-text"},_),e.createElement(b,null))):null)):null};var B=O;export{B as default};
 //# sourceMappingURL=chip-selected.js.map

package/react/chip-selected/chip-selected.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/chip-selected/chip-selected.tsx"],
-  "sourcesContent": ["import * as React from 'react';\n\nimport ChevronDown from '../icons/24/arrow-down';\nimport ChevronUp from '../icons/24/arrow-up';\nimport Chip from '../chip/chip';\nimport Text from '../text';\nimport Link from '../link';\nimport Collapse from '../collapse';\n\nimport useEvent from '../hooks/use-event';\n\nimport { ChipSelected as Props } from './chip-selected.types';\n\nconst ChipSelected: React.FC<Props> = ({\n  resetSelected,\n  description,\n  hideSelected,\n  maxChipsToShow = 41,\n  showSelected,\n  chips,\n}) => {\n  const [expandedSelectedValues, setExpandedSelectedValues] =\n    React.useState(false);\n\n  const [heightOfCollapse, setHeightOfCollapse] = React.useState<\n    number | undefined\n  >(0);\n  const divRef = React.useRef<HTMLDivElement>(null);\n\n  const updateSize = () => {\n    if (divRef && divRef.current) {\n      setHeightOfCollapse(divRef.current.clientHeight);\n    }\n  };\n\n  useEvent('resize', updateSize);\n\n  React.useEffect(() => {\n    if (divRef && divRef.current) {\n      setHeightOfCollapse(divRef.current.clientHeight);\n    }\n  }, [divRef]);\n\n  const toggleShowMore = () => {\n    setExpandedSelectedValues(prevState => !prevState);\n  };\n\n  return chips ? (\n    <div className=\"chip-selected__selected-options-wrapper\">\n      <div className=\"chip-selected__clear-all-button\">\n        <Text>{description}</Text>\n        <Link {...resetSelected} />\n      </div>\n      <div>\n        <Collapse\n          className=\"chip-selected__collapse\"\n          isOpen={expandedSelectedValues}\n        >\n          <div className=\"chip-selected__selected-options\" ref={divRef}>\n            {chips.map(chip => (\n              <Chip {...chip} key={chip.text} />\n            ))}\n          </div>\n        </Collapse>\n\n        {heightOfCollapse && heightOfCollapse > maxChipsToShow ? (\n          <button\n            type=\"button\"\n            className=\"chip-selected__expand\"\n            onClick={toggleShowMore}\n          >\n            {expandedSelectedValues ? (\n              <>\n                <Text\n                  elementName=\"span\"\n                  size={Text.sizes.small}\n                  className=\"chip-selected__expand-text\"\n                >\n                  {hideSelected}\n                </Text>\n                <ChevronUp />\n              </>\n            ) : (\n              <>\n                <Text\n                  elementName=\"span\"\n                  size={Text.sizes.small}\n                  className=\"chip-selected__expand-text\"\n                >\n                  {showSelected}\n                </Text>\n                <ChevronDown />\n              </>\n            )}\n          </button>\n        ) : null}\n      </div>\n    </div>\n  ) : null;\n};\n\nexport default ChipSelected;\n"],
-  "mappings": "6aAAA,UAAYA,MAAW,QAEvB,OAAOC,MAAiB,yBACxB,OAAOC,MAAe,uBACtB,OAAOC,MAAU,eACjB,OAAOC,MAAU,UACjB,OAAOC,MAAU,UACjB,OAAOC,MAAc,cAErB,OAAOC,MAAc,qBAIrB,MAAMC,EAAgC,CAAC,CACrC,cAAAC,EACA,YAAAC,EACA,aAAAC,EACA,eAAAC,EAAiB,GACjB,aAAAC,EACA,MAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAwBC,CAAyB,EACtDhB,EAAM,SAAS,EAAK,EAEhB,CAACiB,EAAkBC,CAAmB,EAAIlB,EAAM,SAEpD,CAAC,EACGmB,EAASnB,EAAM,OAAuB,IAAI,EAQhDO,EAAS,SANU,IAAM,CACnBY,GAAUA,EAAO,SACnBD,EAAoBC,EAAO,QAAQ,YAAY,CAEnD,CAE6B,EAE7BnB,EAAM,UAAU,IAAM,CAChBmB,GAAUA,EAAO,SACnBD,EAAoBC,EAAO,QAAQ,YAAY,CAEnD,EAAG,CAACA,CAAM,CAAC,EAEX,MAAMC,EAAiB,IAAM,CAC3BJ,EAA0BK,GAAa,CAACA,CAAS,CACnD,EAEA,OAAOP,EACLd,EAAA,cAAC,OAAI,UAAU,2CACbA,EAAA,cAAC,OAAI,UAAU,mCACbA,EAAA,cAACI,EAAA,KAAMM,CAAY,EACnBV,EAAA,cAACK,EAAAiB,EAAA,GAASb,EAAe,CAC3B,EACAT,EAAA,cAAC,WACCA,EAAA,cAACM,EAAA,CACC,UAAU,0BACV,OAAQS,GAERf,EAAA,cAAC,OAAI,UAAU,kCAAkC,IAAKmB,GACnDL,EAAM,IAAIS,GACTvB,EAAA,cAACG,EAAAqB,EAAAF,EAAA,GAASC,GAAT,CAAe,IAAKA,EAAK,MAAM,CACjC,CACH,CACF,EAECN,GAAoBA,EAAmBL,EACtCZ,EAAA,cAAC,UACC,KAAK,SACL,UAAU,wBACV,QAASoB,GAERL,EACCf,EAAA,cAAAA,EAAA,cACEA,EAAA,cAACI,EAAA,CACC,YAAY,OACZ,KAAMA,EAAK,MAAM,MACjB,UAAU,8BAETO,CACH,EACAX,EAAA,cAACE,EAAA,IAAU,CACb,EAEAF,EAAA,cAAAA,EAAA,cACEA,EAAA,cAACI,EAAA,CACC,YAAY,OACZ,KAAMA,EAAK,MAAM,MACjB,UAAU,8BAETS,CACH,EACAb,EAAA,cAACC,EAAA,IAAY,CACf,CAEJ,EACE,IACN,CACF,EACE,IACN,EAEA,IAAOwB,EAAQjB",
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\n\nimport ChevronDown from '../icons/24/arrow-down';\nimport ChevronUp from '../icons/24/arrow-up';\nimport Chip from '../chip/chip';\nimport Text from '../text';\nimport Link from '../link';\nimport Collapse from '../collapse';\n\nimport useEvent from '../hooks/use-event';\n\nimport { ChipSelected as Props } from './chip-selected.types';\n\nconst ChipSelected: React.FC<Props> = ({\n  resetSelected,\n  description,\n  hideSelected,\n  maxChipsToShow = 41,\n  showSelected,\n  chips,\n}) => {\n  const [expandedSelectedValues, setExpandedSelectedValues] =\n    React.useState(false);\n\n  const [heightOfCollapse, setHeightOfCollapse] = React.useState<\n    number | undefined\n  >(0);\n  const divRef = React.useRef<HTMLDivElement>(null);\n\n  const updateSize = () => {\n    if (divRef && divRef.current) {\n      setHeightOfCollapse(divRef.current.clientHeight);\n    }\n  };\n\n  useEvent('resize', updateSize);\n\n  React.useEffect(() => {\n    if (divRef && divRef.current) {\n      setHeightOfCollapse(divRef.current.clientHeight);\n    }\n  }, [divRef]);\n\n  const toggleShowMore = () => {\n    setExpandedSelectedValues(prevState => !prevState);\n  };\n\n  return chips ? (\n    <div className=\"chip-selected__selected-options-wrapper\">\n      <div className=\"chip-selected__clear-all-button\">\n        <Text>{description}</Text>\n        <Link {...resetSelected} />\n      </div>\n      <div>\n        <Collapse\n          className=\"chip-selected__collapse\"\n          isOpen={expandedSelectedValues}\n        >\n          <div className=\"chip-selected__selected-options\" ref={divRef}>\n            {chips.map(chip => (\n              <Chip {...chip} key={chip.text} />\n            ))}\n          </div>\n        </Collapse>\n\n        {heightOfCollapse && heightOfCollapse > maxChipsToShow ? (\n          <button\n            type=\"button\"\n            className=\"chip-selected__expand\"\n            onClick={toggleShowMore}\n          >\n            {expandedSelectedValues ? (\n              <>\n                <Text\n                  elementName=\"span\"\n                  size={Text.sizes.small}\n                  className=\"chip-selected__expand-text\"\n                >\n                  {hideSelected}\n                </Text>\n                <ChevronUp />\n              </>\n            ) : (\n              <>\n                <Text\n                  elementName=\"span\"\n                  size={Text.sizes.small}\n                  className=\"chip-selected__expand-text\"\n                >\n                  {showSelected}\n                </Text>\n                <ChevronDown />\n              </>\n            )}\n          </button>\n        ) : null}\n      </div>\n    </div>\n  ) : null;\n};\n\nexport default ChipSelected;\n"],
+  "mappings": "0bAEA,UAAYA,MAAW,QAEvB,OAAOC,MAAiB,yBACxB,OAAOC,MAAe,uBACtB,OAAOC,MAAU,eACjB,OAAOC,MAAU,UACjB,OAAOC,MAAU,UACjB,OAAOC,MAAc,cAErB,OAAOC,MAAc,qBAIrB,MAAMC,EAAgC,CAAC,CACrC,cAAAC,EACA,YAAAC,EACA,aAAAC,EACA,eAAAC,EAAiB,GACjB,aAAAC,EACA,MAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAwBC,CAAyB,EACtDhB,EAAM,SAAS,EAAK,EAEhB,CAACiB,EAAkBC,CAAmB,EAAIlB,EAAM,SAEpD,CAAC,EACGmB,EAASnB,EAAM,OAAuB,IAAI,EAQhDO,EAAS,SANU,IAAM,CACnBY,GAAUA,EAAO,SACnBD,EAAoBC,EAAO,QAAQ,YAAY,CAEnD,CAE6B,EAE7BnB,EAAM,UAAU,IAAM,CAChBmB,GAAUA,EAAO,SACnBD,EAAoBC,EAAO,QAAQ,YAAY,CAEnD,EAAG,CAACA,CAAM,CAAC,EAEX,MAAMC,EAAiB,IAAM,CAC3BJ,EAA0BK,GAAa,CAACA,CAAS,CACnD,EAEA,OAAOP,EACLd,EAAA,cAAC,OAAI,UAAU,2CACbA,EAAA,cAAC,OAAI,UAAU,mCACbA,EAAA,cAACI,EAAA,KAAMM,CAAY,EACnBV,EAAA,cAACK,EAAAiB,EAAA,GAASb,EAAe,CAC3B,EACAT,EAAA,cAAC,WACCA,EAAA,cAACM,EAAA,CACC,UAAU,0BACV,OAAQS,GAERf,EAAA,cAAC,OAAI,UAAU,kCAAkC,IAAKmB,GACnDL,EAAM,IAAIS,GACTvB,EAAA,cAACG,EAAAqB,EAAAF,EAAA,GAASC,GAAT,CAAe,IAAKA,EAAK,MAAM,CACjC,CACH,CACF,EAECN,GAAoBA,EAAmBL,EACtCZ,EAAA,cAAC,UACC,KAAK,SACL,UAAU,wBACV,QAASoB,GAERL,EACCf,EAAA,cAAAA,EAAA,cACEA,EAAA,cAACI,EAAA,CACC,YAAY,OACZ,KAAMA,EAAK,MAAM,MACjB,UAAU,8BAETO,CACH,EACAX,EAAA,cAACE,EAAA,IAAU,CACb,EAEAF,EAAA,cAAAA,EAAA,cACEA,EAAA,cAACI,EAAA,CACC,YAAY,OACZ,KAAMA,EAAK,MAAM,MACjB,UAAU,8BAETS,CACH,EACAb,EAAA,cAACC,EAAA,IAAY,CACf,CAEJ,EACE,IACN,CACF,EACE,IACN,EAEA,IAAOwB,EAAQjB",
   "names": ["React", "ChevronDown", "ChevronUp", "Chip", "Text", "Link", "Collapse", "useEvent", "ChipSelected", "resetSelected", "description", "hideSelected", "maxChipsToShow", "showSelected", "chips", "expandedSelectedValues", "setExpandedSelectedValues", "heightOfCollapse", "setHeightOfCollapse", "divRef", "toggleShowMore", "prevState", "__spreadValues", "chip", "__spreadProps", "chip_selected_default"]
 }

package/react/chip-selected/chip-selected.scss

@@ -1,5 +1,5 @@
 @use '../../tokens/spacing';
-@use '../../tokens/light';
+@use '../../tokens/colours';
 
 .chip-selected {
   &__selected-options-wrapper {
@@ -34,10 +34,10 @@
     background-color: transparent;
     margin-top: spacing.$m;
     text-decoration: underline;
-    color: light.$on-buttons-on-link-default;
+    color: var(--on-buttons-on-link-default);
 
     :hover {
-      color: light.$on-buttons-on-link-hover;
+      color: var(--on-buttons-on-link-hover);
     }
   }
 

package/react/collapse/collapse.js

@@ -1,2 +1,2 @@
-var v=Object.defineProperty,b=Object.defineProperties;var C=Object.getOwnPropertyDescriptors;var d=Object.getOwnPropertySymbols;var O=Object.prototype.hasOwnProperty,S=Object.prototype.propertyIsEnumerable;var p=(i,e,t)=>e in i?v(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t,m=(i,e)=>{for(var t in e||(e={}))O.call(e,t)&&p(i,t,e[t]);if(d)for(var t of d(e))S.call(e,t)&&p(i,t,e[t]);return i},u=(i,e)=>b(i,C(e));var n=(i,e,t)=>p(i,typeof e!="symbol"?e+"":e,t);import M,{Component as w,createRef as P}from"react";class g extends w{constructor(){super(...arguments);n(this,"state",{height:this.props.forceInitialAnimation||!this.props.isOpen?0:null,isAnimating:!1,isMounted:!1,isOpen:this.props.isOpen||!1});n(this,"wrapperRef",P());n(this,"previousHeight",0);n(this,"raf",null);n(this,"timer",null);n(this,"isAnimating",!1);n(this,"getHeight",()=>{var s;const t=(s=this.wrapperRef.current)==null?void 0:s.firstElementChild;return t?Math.max(t.offsetHeight-1,0):0});n(this,"transition",()=>{const t=this.props.isOpen?this.getHeight():0;clearTimeout(this.timer),cancelAnimationFrame(this.raf),this.isAnimating=!0,this.setState({height:this.previousHeight,isAnimating:!0,shouldAnimate:!1},()=>{this.previousHeight=t,this.raf=requestAnimationFrame(()=>{this.raf=requestAnimationFrame(()=>{this.setState({height:t},()=>{this.timer=window.setTimeout(()=>{this.setState({height:this.props.isOpen?null:0,isAnimating:!1},()=>{this.isAnimating=!1})},this.props.duration)})})})})});n(this,"onTransitionEnd",()=>{this.previousHeight=this.getHeight()})}componentDidMount(){this.setState({isMounted:!0},()=>{this.props.forceInitialAnimation?this.transition():(this.previousHeight=this.props.isOpen?this.getHeight():0,this.setState({isAnimating:!1}))})}static getDerivedStateFromProps(t,s){const o=t.isOpen!==s.isOpen,a=!s.isMounted&&t.forceInitialAnimation&&t.isOpen;return{isOpen:t.isOpen||!1,shouldAnimate:o||a}}getSnapshotBeforeUpdate(){return this.props.isOpen?this.getHeight():0}componentDidUpdate(t,s,o){if(this.isAnimating&&!this.state.shouldAnimate)return;const a=this.getHeight(),r=a!==o;this.props.onMeasure(a),this.state.shouldAnimate||r&&this.props.animateChildren?this.transition():r&&(this.previousHeight=this.getHeight())}componentWillUnmount(){clearTimeout(this.timer),cancelAnimationFrame(this.raf)}render(){const{isAnimating:t,isMounted:s}=this.state,{component:o="div",componentProps:a={},forceInitialAnimation:r,isOpen:h,unmountChildren:f,className:c,children:A}=this.props,H=f?h||t:!0,l=!s&&r&&h;return M.createElement(o,u(m({},a),{className:c,onTransitionEnd:this.onTransitionEnd,ref:this.wrapperRef,style:u(m({},a.style),{height:this.state.height,overflow:t||!h||l?"hidden":void 0,visibility:!t&&!h||l?"hidden":void 0,transition:t||l?`height ${this.props.duration}ms ${this.props.easing}`:void 0})}),H&&A)}}n(g,"defaultProps",{animateChildren:!1,component:"div",componentProps:{},duration:500,easing:"cubic-bezier(0.3,0,0,1)",forceInitialAnimation:!1,isOpen:!1,onMeasure:()=>{},unmountChildren:!1});var I=g;export{I as default};
+"use client";var v=Object.defineProperty,b=Object.defineProperties;var C=Object.getOwnPropertyDescriptors;var d=Object.getOwnPropertySymbols;var O=Object.prototype.hasOwnProperty,S=Object.prototype.propertyIsEnumerable;var p=(i,e,t)=>e in i?v(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t,m=(i,e)=>{for(var t in e||(e={}))O.call(e,t)&&p(i,t,e[t]);if(d)for(var t of d(e))S.call(e,t)&&p(i,t,e[t]);return i},u=(i,e)=>b(i,C(e));var n=(i,e,t)=>p(i,typeof e!="symbol"?e+"":e,t);import M,{Component as w,createRef as P}from"react";class g extends w{constructor(){super(...arguments);n(this,"state",{height:this.props.forceInitialAnimation||!this.props.isOpen?0:null,isAnimating:!1,isMounted:!1,isOpen:this.props.isOpen||!1});n(this,"wrapperRef",P());n(this,"previousHeight",0);n(this,"raf",null);n(this,"timer",null);n(this,"isAnimating",!1);n(this,"getHeight",()=>{var s;const t=(s=this.wrapperRef.current)==null?void 0:s.firstElementChild;return t?Math.max(t.offsetHeight-1,0):0});n(this,"transition",()=>{const t=this.props.isOpen?this.getHeight():0;clearTimeout(this.timer),cancelAnimationFrame(this.raf),this.isAnimating=!0,this.setState({height:this.previousHeight,isAnimating:!0,shouldAnimate:!1},()=>{this.previousHeight=t,this.raf=requestAnimationFrame(()=>{this.raf=requestAnimationFrame(()=>{this.setState({height:t},()=>{this.timer=window.setTimeout(()=>{this.setState({height:this.props.isOpen?null:0,isAnimating:!1},()=>{this.isAnimating=!1})},this.props.duration)})})})})});n(this,"onTransitionEnd",()=>{this.previousHeight=this.getHeight()})}componentDidMount(){this.setState({isMounted:!0},()=>{this.props.forceInitialAnimation?this.transition():(this.previousHeight=this.props.isOpen?this.getHeight():0,this.setState({isAnimating:!1}))})}static getDerivedStateFromProps(t,s){const o=t.isOpen!==s.isOpen,a=!s.isMounted&&t.forceInitialAnimation&&t.isOpen;return{isOpen:t.isOpen||!1,shouldAnimate:o||a}}getSnapshotBeforeUpdate(){return this.props.isOpen?this.getHeight():0}componentDidUpdate(t,s,o){if(this.isAnimating&&!this.state.shouldAnimate)return;const a=this.getHeight(),r=a!==o;this.props.onMeasure(a),this.state.shouldAnimate||r&&this.props.animateChildren?this.transition():r&&(this.previousHeight=this.getHeight())}componentWillUnmount(){clearTimeout(this.timer),cancelAnimationFrame(this.raf)}render(){const{isAnimating:t,isMounted:s}=this.state,{component:o="div",componentProps:a={},forceInitialAnimation:r,isOpen:h,unmountChildren:f,className:c,children:A}=this.props,H=f?h||t:!0,l=!s&&r&&h;return M.createElement(o,u(m({},a),{className:c,onTransitionEnd:this.onTransitionEnd,ref:this.wrapperRef,style:u(m({},a.style),{height:this.state.height,overflow:t||!h||l?"hidden":void 0,visibility:!t&&!h||l?"hidden":void 0,transition:t||l?`height ${this.props.duration}ms ${this.props.easing}`:void 0})}),H&&A)}}n(g,"defaultProps",{animateChildren:!1,component:"div",componentProps:{},duration:500,easing:"cubic-bezier(0.3,0,0,1)",forceInitialAnimation:!1,isOpen:!1,onMeasure:()=>{},unmountChildren:!1});var I=g;export{I as default};
 //# sourceMappingURL=collapse.js.map