@sats-group/ui-lib 81.0.1 → 81.2.0

package/react/message-field/message-field.js

@@ -1,2 +1,2 @@
-var C=Object.defineProperty,F=Object.defineProperties;var N=Object.getOwnPropertyDescriptors;var v=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var g=(a,s,e)=>s in a?C(a,s,{enumerable:!0,configurable:!0,writable:!0,value:e}):a[s]=e,m=(a,s)=>{for(var e in s||(s={}))T.call(s,e)&&g(a,e,s[e]);if(v)for(var e of v(s))$.call(s,e)&&g(a,e,s[e]);return a},n=(a,s)=>F(a,N(s));import i,{useState as k}from"react";import{variants as z,sizes as o}from"./message-field.types";import l from"../button";import d from"../text-area";import x from"../icons/16/add";import A from"../icons/16/send";import I from"classnames";const f=({send:a,input:s,altButton:e,variant:t=z.nested,size:r=o.default,isSubmitting:p,onAltButtonClick:c=()=>{},onClickFunc:u=()=>{}})=>{const[y,b]=k(!1);return i.createElement("div",{className:I("message-field",{[`message-field--variant-${t}`]:t,[`message-field--variant-${t}-${r}`]:r})},e?i.createElement(l,n(m({},e),{leadingIcon:i.createElement(x,null),variant:l.variants.tertiary,onClick:c,size:r===o.small?l.sizes.small:l.sizes.basic})):null,i.createElement("div",{className:"message-field__message"},i.createElement(d,n(m({},s),{onChange:h=>{b(!!h.target.value.length)},isLabelVisible:!1,size:r===o.small?d.sizes.small:d.sizes.default,isShort:!0}))),i.createElement("div",null,i.createElement(l,n(m({},a),{disabled:!y||p,leadingIcon:i.createElement(A,null),onClick:u,size:r===o.small?l.sizes.small:l.sizes.basic,spinning:p,variant:l.variants.complete}))))};f.variants=z,f.sizes=o;var w=f;export{w as default};
+"use client";var C=Object.defineProperty,F=Object.defineProperties;var N=Object.getOwnPropertyDescriptors;var v=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var g=(i,s,e)=>s in i?C(i,s,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[s]=e,n=(i,s)=>{for(var e in s||(s={}))T.call(s,e)&&g(i,e,s[e]);if(v)for(var e of v(s))$.call(s,e)&&g(i,e,s[e]);return i},t=(i,s)=>F(i,N(s));import a,{useState as k}from"react";import{variants as z,sizes as o}from"./message-field.types";import l from"../button";import d from"../text-area";import x from"../icons/16/add";import A from"../icons/16/send";import I from"classnames";const f=({send:i,input:s,altButton:e,variant:m=z.nested,size:r=o.default,isSubmitting:p,onAltButtonClick:c=()=>{},onClickFunc:u=()=>{}})=>{const[y,b]=k(!1);return a.createElement("div",{className:I("message-field",{[`message-field--variant-${m}`]:m,[`message-field--variant-${m}-${r}`]:r})},e?a.createElement(l,t(n({},e),{leadingIcon:a.createElement(x,null),variant:l.variants.tertiary,onClick:c,size:r===o.small?l.sizes.small:l.sizes.basic})):null,a.createElement("div",{className:"message-field__message"},a.createElement(d,t(n({},s),{onChange:h=>{b(!!h.target.value.length)},isLabelVisible:!1,size:r===o.small?d.sizes.small:d.sizes.default,isShort:!0}))),a.createElement("div",null,a.createElement(l,t(n({},i),{disabled:!y||p,leadingIcon:a.createElement(A,null),onClick:u,size:r===o.small?l.sizes.small:l.sizes.basic,spinning:p,variant:l.variants.complete}))))};f.variants=z,f.sizes=o;var w=f;export{w as default};
 //# sourceMappingURL=message-field.js.map

package/react/message-field/message-field.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/message-field/message-field.tsx"],
-  "sourcesContent": ["import React, { useState } from 'react';\n\nimport { MessageField as Props, variants, sizes } from './message-field.types';\nimport Button from '../button';\nimport TextArea from '../text-area';\nimport Add from '../icons/16/add';\nimport Send from '../icons/16/send';\nimport classNames from 'classnames';\n\nconst MessageField: React.FunctionComponent<Props> & {\n  variants: typeof variants;\n  sizes: typeof sizes;\n} = ({\n  send,\n  input,\n  altButton,\n  variant = variants.nested,\n  size = sizes.default,\n  isSubmitting,\n  onAltButtonClick = () => {},\n  onClickFunc = () => {},\n}) => {\n  const [hasTyped, setHasTyped] = useState(false);\n  return (\n    <div\n      className={classNames('message-field', {\n        [`message-field--variant-${variant}`]: variant,\n        [`message-field--variant-${variant}-${size}`]: size,\n      })}\n    >\n      {altButton ? (\n        <Button\n          {...altButton}\n          leadingIcon={<Add />}\n          variant={Button.variants.tertiary}\n          onClick={onAltButtonClick}\n          size={size === sizes.small ? Button.sizes.small : Button.sizes.basic}\n        />\n      ) : null}\n      <div className=\"message-field__message\">\n        <TextArea\n          {...input}\n          onChange={e => {\n            setHasTyped(!!e.target.value.length);\n          }}\n          isLabelVisible={false}\n          size={\n            size === sizes.small ? TextArea.sizes.small : TextArea.sizes.default\n          }\n          isShort\n        />\n      </div>\n      <div>\n        <Button\n          {...send}\n          disabled={!hasTyped || isSubmitting}\n          leadingIcon={<Send />}\n          onClick={onClickFunc}\n          size={size === sizes.small ? Button.sizes.small : Button.sizes.basic}\n          spinning={isSubmitting}\n          variant={Button.variants.complete}\n        />\n      </div>\n    </div>\n  );\n};\n\nMessageField.variants = variants;\nMessageField.sizes = sizes;\nexport default MessageField;\n"],
-  "mappings": "6aAAA,OAAOA,GAAS,YAAAC,MAAgB,QAEhC,OAAgC,YAAAC,EAAU,SAAAC,MAAa,wBACvD,OAAOC,MAAY,YACnB,OAAOC,MAAc,eACrB,OAAOC,MAAS,kBAChB,OAAOC,MAAU,mBACjB,OAAOC,MAAgB,aAEvB,MAAMC,EAGF,CAAC,CACH,KAAAC,EACA,MAAAC,EACA,UAAAC,EACA,QAAAC,EAAUX,EAAS,OACnB,KAAAY,EAAOX,EAAM,QACb,aAAAY,EACA,iBAAAC,EAAmB,IAAM,CAAC,EAC1B,YAAAC,EAAc,IAAM,CAAC,CACvB,IAAM,CACJ,KAAM,CAACC,EAAUC,CAAW,EAAIlB,EAAS,EAAK,EAC9C,OACED,EAAA,cAAC,OACC,UAAWQ,EAAW,gBAAiB,CACrC,CAAC,0BAA0BK,CAAO,EAAE,EAAGA,EACvC,CAAC,0BAA0BA,CAAO,IAAIC,CAAI,EAAE,EAAGA,CACjD,CAAC,GAEAF,EACCZ,EAAA,cAACI,EAAAgB,EAAAC,EAAA,GACKT,GADL,CAEC,YAAaZ,EAAA,cAACM,EAAA,IAAI,EAClB,QAASF,EAAO,SAAS,SACzB,QAASY,EACT,KAAMF,IAASX,EAAM,MAAQC,EAAO,MAAM,MAAQA,EAAO,MAAM,OACjE,EACE,KACJJ,EAAA,cAAC,OAAI,UAAU,0BACbA,EAAA,cAACK,EAAAe,EAAAC,EAAA,GACKV,GADL,CAEC,SAAUW,GAAK,CACbH,EAAY,CAAC,CAACG,EAAE,OAAO,MAAM,MAAM,CACrC,EACA,eAAgB,GAChB,KACER,IAASX,EAAM,MAAQE,EAAS,MAAM,MAAQA,EAAS,MAAM,QAE/D,QAAO,IACT,CACF,EACAL,EAAA,cAAC,WACCA,EAAA,cAACI,EAAAgB,EAAAC,EAAA,GACKX,GADL,CAEC,SAAU,CAACQ,GAAYH,EACvB,YAAaf,EAAA,cAACO,EAAA,IAAK,EACnB,QAASU,EACT,KAAMH,IAASX,EAAM,MAAQC,EAAO,MAAM,MAAQA,EAAO,MAAM,MAC/D,SAAUW,EACV,QAASX,EAAO,SAAS,UAC3B,CACF,CACF,CAEJ,EAEAK,EAAa,SAAWP,EACxBO,EAAa,MAAQN,EACrB,IAAOoB,EAAQd",
+  "sourcesContent": ["'use client';\n\nimport React, { useState } from 'react';\n\nimport { MessageField as Props, variants, sizes } from './message-field.types';\nimport Button from '../button';\nimport TextArea from '../text-area';\nimport Add from '../icons/16/add';\nimport Send from '../icons/16/send';\nimport classNames from 'classnames';\n\nconst MessageField: React.FunctionComponent<Props> & {\n  variants: typeof variants;\n  sizes: typeof sizes;\n} = ({\n  send,\n  input,\n  altButton,\n  variant = variants.nested,\n  size = sizes.default,\n  isSubmitting,\n  onAltButtonClick = () => {},\n  onClickFunc = () => {},\n}) => {\n  const [hasTyped, setHasTyped] = useState(false);\n  return (\n    <div\n      className={classNames('message-field', {\n        [`message-field--variant-${variant}`]: variant,\n        [`message-field--variant-${variant}-${size}`]: size,\n      })}\n    >\n      {altButton ? (\n        <Button\n          {...altButton}\n          leadingIcon={<Add />}\n          variant={Button.variants.tertiary}\n          onClick={onAltButtonClick}\n          size={size === sizes.small ? Button.sizes.small : Button.sizes.basic}\n        />\n      ) : null}\n      <div className=\"message-field__message\">\n        <TextArea\n          {...input}\n          onChange={e => {\n            setHasTyped(!!e.target.value.length);\n          }}\n          isLabelVisible={false}\n          size={\n            size === sizes.small ? TextArea.sizes.small : TextArea.sizes.default\n          }\n          isShort\n        />\n      </div>\n      <div>\n        <Button\n          {...send}\n          disabled={!hasTyped || isSubmitting}\n          leadingIcon={<Send />}\n          onClick={onClickFunc}\n          size={size === sizes.small ? Button.sizes.small : Button.sizes.basic}\n          spinning={isSubmitting}\n          variant={Button.variants.complete}\n        />\n      </div>\n    </div>\n  );\n};\n\nMessageField.variants = variants;\nMessageField.sizes = sizes;\nexport default MessageField;\n"],
+  "mappings": "0bAEA,OAAOA,GAAS,YAAAC,MAAgB,QAEhC,OAAgC,YAAAC,EAAU,SAAAC,MAAa,wBACvD,OAAOC,MAAY,YACnB,OAAOC,MAAc,eACrB,OAAOC,MAAS,kBAChB,OAAOC,MAAU,mBACjB,OAAOC,MAAgB,aAEvB,MAAMC,EAGF,CAAC,CACH,KAAAC,EACA,MAAAC,EACA,UAAAC,EACA,QAAAC,EAAUX,EAAS,OACnB,KAAAY,EAAOX,EAAM,QACb,aAAAY,EACA,iBAAAC,EAAmB,IAAM,CAAC,EAC1B,YAAAC,EAAc,IAAM,CAAC,CACvB,IAAM,CACJ,KAAM,CAACC,EAAUC,CAAW,EAAIlB,EAAS,EAAK,EAC9C,OACED,EAAA,cAAC,OACC,UAAWQ,EAAW,gBAAiB,CACrC,CAAC,0BAA0BK,CAAO,EAAE,EAAGA,EACvC,CAAC,0BAA0BA,CAAO,IAAIC,CAAI,EAAE,EAAGA,CACjD,CAAC,GAEAF,EACCZ,EAAA,cAACI,EAAAgB,EAAAC,EAAA,GACKT,GADL,CAEC,YAAaZ,EAAA,cAACM,EAAA,IAAI,EAClB,QAASF,EAAO,SAAS,SACzB,QAASY,EACT,KAAMF,IAASX,EAAM,MAAQC,EAAO,MAAM,MAAQA,EAAO,MAAM,OACjE,EACE,KACJJ,EAAA,cAAC,OAAI,UAAU,0BACbA,EAAA,cAACK,EAAAe,EAAAC,EAAA,GACKV,GADL,CAEC,SAAUW,GAAK,CACbH,EAAY,CAAC,CAACG,EAAE,OAAO,MAAM,MAAM,CACrC,EACA,eAAgB,GAChB,KACER,IAASX,EAAM,MAAQE,EAAS,MAAM,MAAQA,EAAS,MAAM,QAE/D,QAAO,IACT,CACF,EACAL,EAAA,cAAC,WACCA,EAAA,cAACI,EAAAgB,EAAAC,EAAA,GACKX,GADL,CAEC,SAAU,CAACQ,GAAYH,EACvB,YAAaf,EAAA,cAACO,EAAA,IAAK,EACnB,QAASU,EACT,KAAMH,IAASX,EAAM,MAAQC,EAAO,MAAM,MAAQA,EAAO,MAAM,MAC/D,SAAUW,EACV,QAASX,EAAO,SAAS,UAC3B,CACF,CACF,CAEJ,EAEAK,EAAa,SAAWP,EACxBO,EAAa,MAAQN,EACrB,IAAOoB,EAAQd",
   "names": ["React", "useState", "variants", "sizes", "Button", "TextArea", "Add", "Send", "classNames", "MessageField", "send", "input", "altButton", "variant", "size", "isSubmitting", "onAltButtonClick", "onClickFunc", "hasTyped", "setHasTyped", "__spreadProps", "__spreadValues", "e", "message_field_default"]
 }

package/react/message-field/message-field.scss

@@ -1,4 +1,4 @@
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 
 .message-field {
@@ -12,7 +12,7 @@
   }
 
   &--variant-nested {
-    background: light.$background-primary-default;
+    background: var(--background-primary-default);
     padding: spacing.$m;
     &-small {
       padding: spacing.$s;

package/react/modal/modal.js

@@ -1,2 +1,2 @@
-var C=Object.defineProperty,B=Object.defineProperties;var I=Object.getOwnPropertyDescriptors;var c=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable;var f=(s,l,i)=>l in s?C(s,l,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[l]=i,v=(s,l)=>{for(var i in l||(l={}))P.call(l,i)&&f(s,i,l[i]);if(c)for(var i of c(l))E.call(l,i)&&f(s,i,l[i]);return s},N=(s,l)=>B(s,I(l));import _ from"classnames";import*as o from"react";import*as w from"react-dom";import e from"../button";import A from"../hooks/use-escape";import{useIsMounted as D}from"../hooks/use-is-mounted";import h from"../icons/18/close";import r from"../text";import{ActionTypes as y,backgrounds as T}from"./modal.types";import H from"./tab-trapper";import L from"../link-button";const k=({ariaLabel:s,background:l=T.primary,children:i,closeLabel:u,explanation:n,id:M,onClose:d=()=>{},title:t,actions:m,onClick:g=()=>{}})=>{const p=o.useRef(null),x=D();if(A(d),!x)return null;const b=a=>{p.current&&p.current===a.target&&d()};return w.createPortal(o.createElement("div",{"aria-label":s,className:"modal",id:M,onClick:b,ref:p,role:"dialog"},o.createElement("div",{className:_("modal__content",{[`modal__content--${l}`]:l})},o.createElement(H,{isActive:!0,className:"modal__content-inner"},o.createElement("div",{className:_("modal__close-action",{"modal__close-action--always-shown":m&&m.length})},o.createElement(e,{leadingIcon:o.createElement(h,null),onClick:d,size:e.sizes.small,text:u,variant:e.variants.secondary,iconOnly:!0})),t||n?o.createElement("div",{className:"modal__nav"},o.createElement("div",{className:"modal__texts"},t?o.createElement(r,{className:"modal__title",size:r.sizes.headline2,theme:r.themes.emphasis},t):null,n?o.createElement("div",{className:_("modal__explanation",{[`modal__explanation--${l}`]:l})},o.createElement(r,{size:r.sizes.small},n)):null)):null,o.createElement("div",{className:"modal__children"},o.createElement("div",null,i)),m&&m.length?o.createElement("div",{className:"modal__actions"},m.map(a=>a.type===y.LinkButton?o.createElement(L,v({},a.action)):a.type===y.Button?o.createElement(e,N(v({},a.action),{onClick:z=>g(a.buttonId,z)})):null)):o.createElement("div",{className:"modal__close-action-mobile"},o.createElement(e,{leadingIcon:o.createElement(h,null),onClick:d,text:u,variant:e.variants.secondary}))))),document.body)};k.backgrounds=T;var S=k;export{S as default};
+"use client";var C=Object.defineProperty,B=Object.defineProperties;var I=Object.getOwnPropertyDescriptors;var c=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable;var f=(s,l,i)=>l in s?C(s,l,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[l]=i,v=(s,l)=>{for(var i in l||(l={}))P.call(l,i)&&f(s,i,l[i]);if(c)for(var i of c(l))E.call(l,i)&&f(s,i,l[i]);return s},N=(s,l)=>B(s,I(l));import u from"classnames";import*as o from"react";import*as w from"react-dom";import e from"../button";import A from"../hooks/use-escape";import{useIsMounted as D}from"../hooks/use-is-mounted";import h from"../icons/18/close";import r from"../text";import{ActionTypes as y,backgrounds as T}from"./modal.types";import H from"./tab-trapper";import L from"../link-button";const k=({ariaLabel:s,background:l=T.primary,children:i,closeLabel:_,explanation:d,id:M,onClose:n=()=>{},title:t,actions:m,onClick:g=()=>{}})=>{const p=o.useRef(null),x=D();if(A(n),!x)return null;const b=a=>{p.current&&p.current===a.target&&n()};return w.createPortal(o.createElement("div",{"aria-label":s,className:"modal",id:M,onClick:b,ref:p,role:"dialog"},o.createElement("div",{className:u("modal__content",{[`modal__content--${l}`]:l})},o.createElement(H,{isActive:!0,className:"modal__content-inner"},o.createElement("div",{className:u("modal__close-action",{"modal__close-action--always-shown":m&&m.length})},o.createElement(e,{leadingIcon:o.createElement(h,null),onClick:n,size:e.sizes.small,text:_,variant:e.variants.secondary,iconOnly:!0})),t||d?o.createElement("div",{className:"modal__nav"},o.createElement("div",{className:"modal__texts"},t?o.createElement(r,{className:"modal__title",size:r.sizes.headline2,theme:r.themes.emphasis},t):null,d?o.createElement("div",{className:u("modal__explanation",{[`modal__explanation--${l}`]:l})},o.createElement(r,{size:r.sizes.small},d)):null)):null,o.createElement("div",{className:"modal__children"},o.createElement("div",null,i)),m&&m.length?o.createElement("div",{className:"modal__actions"},m.map(a=>a.type===y.LinkButton?o.createElement(L,v({},a.action)):a.type===y.Button?o.createElement(e,N(v({},a.action),{onClick:z=>g(a.buttonId,z)})):null)):o.createElement("div",{className:"modal__close-action-mobile"},o.createElement(e,{leadingIcon:o.createElement(h,null),onClick:n,text:_,variant:e.variants.secondary}))))),document.body)};k.backgrounds=T;var S=k;export{S as default};
 //# sourceMappingURL=modal.js.map

package/react/modal/modal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/modal/modal.tsx"],
-  "sourcesContent": ["import classNames from 'classnames';\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\n\nimport Button from '../button';\nimport useEscape from '../hooks/use-escape';\nimport { useIsMounted } from '../hooks/use-is-mounted';\nimport Close from '../icons/18/close';\nimport Text from '../text';\n\nimport { ActionTypes, type Modal as Props, backgrounds } from './modal.types';\nimport TabTrapper from './tab-trapper';\nimport LinkButton from '../link-button';\n\nconst Modal: React.FC<React.PropsWithChildren<Props>> & {\n  backgrounds: typeof backgrounds;\n} = ({\n  ariaLabel,\n  background = backgrounds.primary,\n  children,\n  closeLabel,\n  explanation,\n  id,\n  onClose = () => {},\n  title,\n  actions,\n  onClick = () => {},\n}) => {\n  const modal = React.useRef<HTMLDivElement>(null);\n  const isMounted = useIsMounted();\n  useEscape(onClose);\n\n  if (!isMounted) {\n    return null;\n  }\n\n  const handleModalClick: React.MouseEventHandler = e => {\n    if (modal.current && modal.current === e.target) {\n      onClose();\n    }\n  };\n\n  return ReactDOM.createPortal(\n    <div\n      aria-label={ariaLabel}\n      className=\"modal\"\n      id={id}\n      onClick={handleModalClick}\n      ref={modal}\n      role=\"dialog\"\n    >\n      <div\n        className={classNames('modal__content', {\n          [`modal__content--${background}`]: background,\n        })}\n      >\n        <TabTrapper isActive={true} className=\"modal__content-inner\">\n          <div\n            className={classNames('modal__close-action', {\n              'modal__close-action--always-shown': actions && actions.length,\n            })}\n          >\n            <Button\n              leadingIcon={<Close />}\n              onClick={onClose}\n              size={Button.sizes.small}\n              text={closeLabel}\n              variant={Button.variants.secondary}\n              iconOnly\n            />\n          </div>\n          {title || explanation ? (\n            <div className=\"modal__nav\">\n              <div className=\"modal__texts\">\n                {title ? (\n                  <Text\n                    className=\"modal__title\"\n                    size={Text.sizes.headline2}\n                    theme={Text.themes.emphasis}\n                  >\n                    {title}\n                  </Text>\n                ) : null}\n                {explanation ? (\n                  <div\n                    className={classNames('modal__explanation', {\n                      [`modal__explanation--${background}`]: background,\n                    })}\n                  >\n                    <Text size={Text.sizes.small}>{explanation}</Text>\n                  </div>\n                ) : null}\n              </div>\n            </div>\n          ) : null}\n          <div className=\"modal__children\">\n            <div>{children}</div>\n          </div>\n          {actions && actions.length ? (\n            <div className=\"modal__actions\">\n              {actions.map(action =>\n                action.type === ActionTypes.LinkButton ? (\n                  <LinkButton {...action.action} />\n                ) : action.type === ActionTypes.Button ? (\n                  <Button\n                    {...action.action}\n                    onClick={e => onClick(action.buttonId, e)}\n                  />\n                ) : null,\n              )}\n            </div>\n          ) : (\n            <div className=\"modal__close-action-mobile\">\n              <Button\n                leadingIcon={<Close />}\n                onClick={onClose}\n                text={closeLabel}\n                variant={Button.variants.secondary}\n              />\n            </div>\n          )}\n        </TabTrapper>\n      </div>\n    </div>,\n    document.body,\n  );\n};\n\nModal.backgrounds = backgrounds;\n\nexport default Modal;\n"],
-  "mappings": "6aAAA,OAAOA,MAAgB,aACvB,UAAYC,MAAW,QACvB,UAAYC,MAAc,YAE1B,OAAOC,MAAY,YACnB,OAAOC,MAAe,sBACtB,OAAS,gBAAAC,MAAoB,0BAC7B,OAAOC,MAAW,oBAClB,OAAOC,MAAU,UAEjB,OAAS,eAAAC,EAAkC,eAAAC,MAAmB,gBAC9D,OAAOC,MAAgB,gBACvB,OAAOC,MAAgB,iBAEvB,MAAMC,EAEF,CAAC,CACH,UAAAC,EACA,WAAAC,EAAaL,EAAY,QACzB,SAAAM,EACA,WAAAC,EACA,YAAAC,EACA,GAAAC,EACA,QAAAC,EAAU,IAAM,CAAC,EACjB,MAAAC,EACA,QAAAC,EACA,QAAAC,EAAU,IAAM,CAAC,CACnB,IAAM,CACJ,MAAMC,EAAQtB,EAAM,OAAuB,IAAI,EACzCuB,EAAYnB,EAAa,EAG/B,GAFAD,EAAUe,CAAO,EAEb,CAACK,EACH,OAAO,KAGT,MAAMC,EAA4CC,GAAK,CACjDH,EAAM,SAAWA,EAAM,UAAYG,EAAE,QACvCP,EAAQ,CAEZ,EAEA,OAAOjB,EAAS,aACdD,EAAA,cAAC,OACC,aAAYY,EACZ,UAAU,QACV,GAAIK,EACJ,QAASO,EACT,IAAKF,EACL,KAAK,UAELtB,EAAA,cAAC,OACC,UAAWD,EAAW,iBAAkB,CACtC,CAAC,mBAAmBc,CAAU,EAAE,EAAGA,CACrC,CAAC,GAEDb,EAAA,cAACS,EAAA,CAAW,SAAU,GAAM,UAAU,wBACpCT,EAAA,cAAC,OACC,UAAWD,EAAW,sBAAuB,CAC3C,oCAAqCqB,GAAWA,EAAQ,MAC1D,CAAC,GAEDpB,EAAA,cAACE,EAAA,CACC,YAAaF,EAAA,cAACK,EAAA,IAAM,EACpB,QAASa,EACT,KAAMhB,EAAO,MAAM,MACnB,KAAMa,EACN,QAASb,EAAO,SAAS,UACzB,SAAQ,GACV,CACF,EACCiB,GAASH,EACRhB,EAAA,cAAC,OAAI,UAAU,cACbA,EAAA,cAAC,OAAI,UAAU,gBACZmB,EACCnB,EAAA,cAACM,EAAA,CACC,UAAU,eACV,KAAMA,EAAK,MAAM,UACjB,MAAOA,EAAK,OAAO,UAElBa,CACH,EACE,KACHH,EACChB,EAAA,cAAC,OACC,UAAWD,EAAW,qBAAsB,CAC1C,CAAC,uBAAuBc,CAAU,EAAE,EAAGA,CACzC,CAAC,GAEDb,EAAA,cAACM,EAAA,CAAK,KAAMA,EAAK,MAAM,OAAQU,CAAY,CAC7C,EACE,IACN,CACF,EACE,KACJhB,EAAA,cAAC,OAAI,UAAU,mBACbA,EAAA,cAAC,WAAKc,CAAS,CACjB,EACCM,GAAWA,EAAQ,OAClBpB,EAAA,cAAC,OAAI,UAAU,kBACZoB,EAAQ,IAAIM,GACXA,EAAO,OAASnB,EAAY,WAC1BP,EAAA,cAACU,EAAAiB,EAAA,GAAeD,EAAO,OAAQ,EAC7BA,EAAO,OAASnB,EAAY,OAC9BP,EAAA,cAACE,EAAA0B,EAAAD,EAAA,GACKD,EAAO,QADZ,CAEC,QAASD,GAAKJ,EAAQK,EAAO,SAAUD,CAAC,GAC1C,EACE,IACN,CACF,EAEAzB,EAAA,cAAC,OAAI,UAAU,8BACbA,EAAA,cAACE,EAAA,CACC,YAAaF,EAAA,cAACK,EAAA,IAAM,EACpB,QAASa,EACT,KAAMH,EACN,QAASb,EAAO,SAAS,UAC3B,CACF,CAEJ,CACF,CACF,EACA,SAAS,IACX,CACF,EAEAS,EAAM,YAAcH,EAEpB,IAAOqB,EAAQlB",
+  "sourcesContent": ["'use client';\n\nimport classNames from 'classnames';\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\n\nimport Button from '../button';\nimport useEscape from '../hooks/use-escape';\nimport { useIsMounted } from '../hooks/use-is-mounted';\nimport Close from '../icons/18/close';\nimport Text from '../text';\n\nimport { ActionTypes, type Modal as Props, backgrounds } from './modal.types';\nimport TabTrapper from './tab-trapper';\nimport LinkButton from '../link-button';\n\nconst Modal: React.FC<React.PropsWithChildren<Props>> & {\n  backgrounds: typeof backgrounds;\n} = ({\n  ariaLabel,\n  background = backgrounds.primary,\n  children,\n  closeLabel,\n  explanation,\n  id,\n  onClose = () => {},\n  title,\n  actions,\n  onClick = () => {},\n}) => {\n  const modal = React.useRef<HTMLDivElement>(null);\n  const isMounted = useIsMounted();\n  useEscape(onClose);\n\n  if (!isMounted) {\n    return null;\n  }\n\n  const handleModalClick: React.MouseEventHandler = e => {\n    if (modal.current && modal.current === e.target) {\n      onClose();\n    }\n  };\n\n  return ReactDOM.createPortal(\n    <div\n      aria-label={ariaLabel}\n      className=\"modal\"\n      id={id}\n      onClick={handleModalClick}\n      ref={modal}\n      role=\"dialog\"\n    >\n      <div\n        className={classNames('modal__content', {\n          [`modal__content--${background}`]: background,\n        })}\n      >\n        <TabTrapper isActive={true} className=\"modal__content-inner\">\n          <div\n            className={classNames('modal__close-action', {\n              'modal__close-action--always-shown': actions && actions.length,\n            })}\n          >\n            <Button\n              leadingIcon={<Close />}\n              onClick={onClose}\n              size={Button.sizes.small}\n              text={closeLabel}\n              variant={Button.variants.secondary}\n              iconOnly\n            />\n          </div>\n          {title || explanation ? (\n            <div className=\"modal__nav\">\n              <div className=\"modal__texts\">\n                {title ? (\n                  <Text\n                    className=\"modal__title\"\n                    size={Text.sizes.headline2}\n                    theme={Text.themes.emphasis}\n                  >\n                    {title}\n                  </Text>\n                ) : null}\n                {explanation ? (\n                  <div\n                    className={classNames('modal__explanation', {\n                      [`modal__explanation--${background}`]: background,\n                    })}\n                  >\n                    <Text size={Text.sizes.small}>{explanation}</Text>\n                  </div>\n                ) : null}\n              </div>\n            </div>\n          ) : null}\n          <div className=\"modal__children\">\n            <div>{children}</div>\n          </div>\n          {actions && actions.length ? (\n            <div className=\"modal__actions\">\n              {actions.map(action =>\n                action.type === ActionTypes.LinkButton ? (\n                  <LinkButton {...action.action} />\n                ) : action.type === ActionTypes.Button ? (\n                  <Button\n                    {...action.action}\n                    onClick={e => onClick(action.buttonId, e)}\n                  />\n                ) : null,\n              )}\n            </div>\n          ) : (\n            <div className=\"modal__close-action-mobile\">\n              <Button\n                leadingIcon={<Close />}\n                onClick={onClose}\n                text={closeLabel}\n                variant={Button.variants.secondary}\n              />\n            </div>\n          )}\n        </TabTrapper>\n      </div>\n    </div>,\n    document.body,\n  );\n};\n\nModal.backgrounds = backgrounds;\n\nexport default Modal;\n"],
+  "mappings": "0bAEA,OAAOA,MAAgB,aACvB,UAAYC,MAAW,QACvB,UAAYC,MAAc,YAE1B,OAAOC,MAAY,YACnB,OAAOC,MAAe,sBACtB,OAAS,gBAAAC,MAAoB,0BAC7B,OAAOC,MAAW,oBAClB,OAAOC,MAAU,UAEjB,OAAS,eAAAC,EAAkC,eAAAC,MAAmB,gBAC9D,OAAOC,MAAgB,gBACvB,OAAOC,MAAgB,iBAEvB,MAAMC,EAEF,CAAC,CACH,UAAAC,EACA,WAAAC,EAAaL,EAAY,QACzB,SAAAM,EACA,WAAAC,EACA,YAAAC,EACA,GAAAC,EACA,QAAAC,EAAU,IAAM,CAAC,EACjB,MAAAC,EACA,QAAAC,EACA,QAAAC,EAAU,IAAM,CAAC,CACnB,IAAM,CACJ,MAAMC,EAAQtB,EAAM,OAAuB,IAAI,EACzCuB,EAAYnB,EAAa,EAG/B,GAFAD,EAAUe,CAAO,EAEb,CAACK,EACH,OAAO,KAGT,MAAMC,EAA4CC,GAAK,CACjDH,EAAM,SAAWA,EAAM,UAAYG,EAAE,QACvCP,EAAQ,CAEZ,EAEA,OAAOjB,EAAS,aACdD,EAAA,cAAC,OACC,aAAYY,EACZ,UAAU,QACV,GAAIK,EACJ,QAASO,EACT,IAAKF,EACL,KAAK,UAELtB,EAAA,cAAC,OACC,UAAWD,EAAW,iBAAkB,CACtC,CAAC,mBAAmBc,CAAU,EAAE,EAAGA,CACrC,CAAC,GAEDb,EAAA,cAACS,EAAA,CAAW,SAAU,GAAM,UAAU,wBACpCT,EAAA,cAAC,OACC,UAAWD,EAAW,sBAAuB,CAC3C,oCAAqCqB,GAAWA,EAAQ,MAC1D,CAAC,GAEDpB,EAAA,cAACE,EAAA,CACC,YAAaF,EAAA,cAACK,EAAA,IAAM,EACpB,QAASa,EACT,KAAMhB,EAAO,MAAM,MACnB,KAAMa,EACN,QAASb,EAAO,SAAS,UACzB,SAAQ,GACV,CACF,EACCiB,GAASH,EACRhB,EAAA,cAAC,OAAI,UAAU,cACbA,EAAA,cAAC,OAAI,UAAU,gBACZmB,EACCnB,EAAA,cAACM,EAAA,CACC,UAAU,eACV,KAAMA,EAAK,MAAM,UACjB,MAAOA,EAAK,OAAO,UAElBa,CACH,EACE,KACHH,EACChB,EAAA,cAAC,OACC,UAAWD,EAAW,qBAAsB,CAC1C,CAAC,uBAAuBc,CAAU,EAAE,EAAGA,CACzC,CAAC,GAEDb,EAAA,cAACM,EAAA,CAAK,KAAMA,EAAK,MAAM,OAAQU,CAAY,CAC7C,EACE,IACN,CACF,EACE,KACJhB,EAAA,cAAC,OAAI,UAAU,mBACbA,EAAA,cAAC,WAAKc,CAAS,CACjB,EACCM,GAAWA,EAAQ,OAClBpB,EAAA,cAAC,OAAI,UAAU,kBACZoB,EAAQ,IAAIM,GACXA,EAAO,OAASnB,EAAY,WAC1BP,EAAA,cAACU,EAAAiB,EAAA,GAAeD,EAAO,OAAQ,EAC7BA,EAAO,OAASnB,EAAY,OAC9BP,EAAA,cAACE,EAAA0B,EAAAD,EAAA,GACKD,EAAO,QADZ,CAEC,QAASD,GAAKJ,EAAQK,EAAO,SAAUD,CAAC,GAC1C,EACE,IACN,CACF,EAEAzB,EAAA,cAAC,OAAI,UAAU,8BACbA,EAAA,cAACE,EAAA,CACC,YAAaF,EAAA,cAACK,EAAA,IAAM,EACpB,QAASa,EACT,KAAMH,EACN,QAASb,EAAO,SAAS,UAC3B,CACF,CAEJ,CACF,CACF,EACA,SAAS,IACX,CACF,EAEAS,EAAM,YAAcH,EAEpB,IAAOqB,EAAQlB",
   "names": ["classNames", "React", "ReactDOM", "Button", "useEscape", "useIsMounted", "Close", "Text", "ActionTypes", "backgrounds", "TabTrapper", "LinkButton", "Modal", "ariaLabel", "background", "children", "closeLabel", "explanation", "id", "onClose", "title", "actions", "onClick", "modal", "isMounted", "handleModalClick", "e", "action", "__spreadValues", "__spreadProps", "modal_default"]
 }

package/react/modal/modal.scss

@@ -1,12 +1,12 @@
 @use '../../tokens/corner-radius';
 @use '../../tokens/elevation';
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 
 .modal {
   background: color-mix(
     in srgb,
-    light.$fixed-background-primary-default
+    var(--fixed-background-primary-default)
     70%, transparent
   );
   box-sizing: border-box;
@@ -43,17 +43,17 @@
   }
 
   &__title {
-    color: light.$on-surface-primary-default;
+    color: var(--on-surface-primary-default);
     max-width: 90%; // NOTE: Magic percent to keep clear of modal´s close-button.
   }
 
   &__explanation {
     &--primary {
-      color: light.$on-surface-primary-alternate;
+      color: var(--on-surface-primary-alternate);
     }
 
     &--secondary {
-      color: light.$on-surface-secondary-alternate;
+      color: var(--on-surface-secondary-alternate);
     }
   }
 
@@ -70,11 +70,11 @@
     overflow: auto;
 
     &--primary {
-      background: light.$surface-primary-default;
+      background: var(--surface-primary-default);
     }
 
     &--secondary {
-      background: light.$surface-secondary-default;
+      background: var(--surface-secondary-default);
     }
 
     @include break {
@@ -101,8 +101,8 @@
 
   &__actions,
   &__close-action-mobile {
-    background: light.$surface-primary-default;
-    border-top: 1px solid light.$ge-border-default;
+    background: var(--surface-primary-default);
+    border-top: 1px solid var(--ge-border-default);
     display: flex;
     justify-content: center;
     gap: spacing.$s;

package/react/modal/tab-trapper.js

@@ -1,2 +1,2 @@
-import*as n from"react";const c=t=>{var e;(e=t==null?void 0:t.current)==null||e.focus()},f=(t,e)=>{const u=n.useRef(typeof e=="undefined"?null:e);return n.useEffect(()=>{u.current=t},[t]),u.current},a=({children:t,isActive:e,className:u})=>{const l=f(e),r=n.useRef(null),o=n.useRef(null),s=()=>c(r);return n.useEffect(()=>{!l&&e&&(o.current=document.activeElement,s()),l&&!e&&c(o)},[e]),n.useEffect(()=>()=>c(o),[]),n.createElement(n.Fragment,null,e?n.createElement("div",{onFocus:s,tabIndex:0}):null,n.createElement("div",{ref:r,tabIndex:-1,className:u},t),e?n.createElement("div",{onFocus:s,tabIndex:0}):null)};var d=a;export{d as default};
+"use client";import*as n from"react";const c=t=>{var e;(e=t==null?void 0:t.current)==null||e.focus()},f=(t,e)=>{const u=n.useRef(typeof e=="undefined"?null:e);return n.useEffect(()=>{u.current=t},[t]),u.current},a=({children:t,isActive:e,className:u})=>{const l=f(e),r=n.useRef(null),o=n.useRef(null),s=()=>c(r);return n.useEffect(()=>{!l&&e&&(o.current=document.activeElement,s()),l&&!e&&c(o)},[e]),n.useEffect(()=>()=>c(o),[]),n.createElement(n.Fragment,null,e?n.createElement("div",{onFocus:s,tabIndex:0}):null,n.createElement("div",{ref:r,tabIndex:-1,className:u},t),e?n.createElement("div",{onFocus:s,tabIndex:0}):null)};var d=a;export{d as default};
 //# sourceMappingURL=tab-trapper.js.map

package/react/modal/tab-trapper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/modal/tab-trapper.tsx"],
-  "sourcesContent": ["import * as React from 'react';\n\nconst focusRef = (ref: React.RefObject<HTMLElement | null>): void => {\n  ref?.current?.focus();\n};\n\n/** Returns the value of `value` from the previous render.\n```js\nconst [value, setValue] = useState();\nconst previousValue = usePrevious(value);\n```\n */\n// eslint-disable-next-line\nconst usePrevious = <T extends unknown>(\n  value: T,\n  initialValue?: T,\n): React.RefObject<T | null>['current'] => {\n  const state = React.useRef<T | null>(\n    typeof initialValue === 'undefined' ? null : initialValue,\n  );\n\n  React.useEffect(() => {\n    state.current = value;\n  }, [value]);\n\n  return state.current;\n};\n\nconst TabTrapper: React.FunctionComponent<\n  React.PropsWithChildren<{\n    isActive: boolean;\n    className?: string;\n  }>\n> = ({ children, isActive, className }) => {\n  const wasActive = usePrevious(isActive);\n  const contentRef = React.useRef<HTMLDivElement>(null);\n  const previouslyFocusedElement = React.useRef<HTMLElement | null>(null);\n\n  const focusContent = () => focusRef(contentRef);\n\n  React.useEffect(() => {\n    if (!wasActive && isActive) {\n      // NOTE: Because document.activeElement is an Element by default, we need\n      // to cast this as a HTMLElement to be able to use HTMLElement functions\n      previouslyFocusedElement.current = document.activeElement as HTMLElement;\n      focusContent();\n    }\n\n    if (wasActive && !isActive) {\n      focusRef(previouslyFocusedElement);\n    }\n  }, [isActive]);\n\n  // NOTE: This happens on unmount only\n  React.useEffect(() => () => focusRef(previouslyFocusedElement), []);\n\n  return (\n    <React.Fragment>\n      {isActive ? <div onFocus={focusContent} tabIndex={0} /> : null}\n      <div ref={contentRef} tabIndex={-1} className={className}>\n        {children}\n      </div>\n      {isActive ? <div onFocus={focusContent} tabIndex={0} /> : null}\n    </React.Fragment>\n  );\n};\n\nexport default TabTrapper;\n"],
-  "mappings": "AAAA,UAAYA,MAAW,QAEvB,MAAMC,EAAYC,GAAmD,CAFrE,IAAAC,GAGEA,EAAAD,GAAA,YAAAA,EAAK,UAAL,MAAAC,EAAc,OAChB,EASMC,EAAc,CAClBC,EACAC,IACyC,CACzC,MAAMC,EAAQP,EAAM,OAClB,OAAOM,GAAiB,YAAc,KAAOA,CAC/C,EAEA,OAAAN,EAAM,UAAU,IAAM,CACpBO,EAAM,QAAUF,CAClB,EAAG,CAACA,CAAK,CAAC,EAEHE,EAAM,OACf,EAEMC,EAKF,CAAC,CAAE,SAAAC,EAAU,SAAAC,EAAU,UAAAC,CAAU,IAAM,CACzC,MAAMC,EAAYR,EAAYM,CAAQ,EAChCG,EAAab,EAAM,OAAuB,IAAI,EAC9Cc,EAA2Bd,EAAM,OAA2B,IAAI,EAEhEe,EAAe,IAAMd,EAASY,CAAU,EAE9C,OAAAb,EAAM,UAAU,IAAM,CAChB,CAACY,GAAaF,IAGhBI,EAAyB,QAAU,SAAS,cAC5CC,EAAa,GAGXH,GAAa,CAACF,GAChBT,EAASa,CAAwB,CAErC,EAAG,CAACJ,CAAQ,CAAC,EAGbV,EAAM,UAAU,IAAM,IAAMC,EAASa,CAAwB,EAAG,CAAC,CAAC,EAGhEd,EAAA,cAACA,EAAM,SAAN,KACEU,EAAWV,EAAA,cAAC,OAAI,QAASe,EAAc,SAAU,EAAG,EAAK,KAC1Df,EAAA,cAAC,OAAI,IAAKa,EAAY,SAAU,GAAI,UAAWF,GAC5CF,CACH,EACCC,EAAWV,EAAA,cAAC,OAAI,QAASe,EAAc,SAAU,EAAG,EAAK,IAC5D,CAEJ,EAEA,IAAOC,EAAQR",
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\n\nconst focusRef = (ref: React.RefObject<HTMLElement | null>): void => {\n  ref?.current?.focus();\n};\n\n/** Returns the value of `value` from the previous render.\n```js\nconst [value, setValue] = useState();\nconst previousValue = usePrevious(value);\n```\n */\n// eslint-disable-next-line\nconst usePrevious = <T extends unknown>(\n  value: T,\n  initialValue?: T,\n): React.RefObject<T | null>['current'] => {\n  const state = React.useRef<T | null>(\n    typeof initialValue === 'undefined' ? null : initialValue,\n  );\n\n  React.useEffect(() => {\n    state.current = value;\n  }, [value]);\n\n  return state.current;\n};\n\nconst TabTrapper: React.FunctionComponent<\n  React.PropsWithChildren<{\n    isActive: boolean;\n    className?: string;\n  }>\n> = ({ children, isActive, className }) => {\n  const wasActive = usePrevious(isActive);\n  const contentRef = React.useRef<HTMLDivElement>(null);\n  const previouslyFocusedElement = React.useRef<HTMLElement | null>(null);\n\n  const focusContent = () => focusRef(contentRef);\n\n  React.useEffect(() => {\n    if (!wasActive && isActive) {\n      // NOTE: Because document.activeElement is an Element by default, we need\n      // to cast this as a HTMLElement to be able to use HTMLElement functions\n      previouslyFocusedElement.current = document.activeElement as HTMLElement;\n      focusContent();\n    }\n\n    if (wasActive && !isActive) {\n      focusRef(previouslyFocusedElement);\n    }\n  }, [isActive]);\n\n  // NOTE: This happens on unmount only\n  React.useEffect(() => () => focusRef(previouslyFocusedElement), []);\n\n  return (\n    <React.Fragment>\n      {isActive ? <div onFocus={focusContent} tabIndex={0} /> : null}\n      <div ref={contentRef} tabIndex={-1} className={className}>\n        {children}\n      </div>\n      {isActive ? <div onFocus={focusContent} tabIndex={0} /> : null}\n    </React.Fragment>\n  );\n};\n\nexport default TabTrapper;\n"],
+  "mappings": "aAEA,UAAYA,MAAW,QAEvB,MAAMC,EAAYC,GAAmD,CAJrE,IAAAC,GAKEA,EAAAD,GAAA,YAAAA,EAAK,UAAL,MAAAC,EAAc,OAChB,EASMC,EAAc,CAClBC,EACAC,IACyC,CACzC,MAAMC,EAAQP,EAAM,OAClB,OAAOM,GAAiB,YAAc,KAAOA,CAC/C,EAEA,OAAAN,EAAM,UAAU,IAAM,CACpBO,EAAM,QAAUF,CAClB,EAAG,CAACA,CAAK,CAAC,EAEHE,EAAM,OACf,EAEMC,EAKF,CAAC,CAAE,SAAAC,EAAU,SAAAC,EAAU,UAAAC,CAAU,IAAM,CACzC,MAAMC,EAAYR,EAAYM,CAAQ,EAChCG,EAAab,EAAM,OAAuB,IAAI,EAC9Cc,EAA2Bd,EAAM,OAA2B,IAAI,EAEhEe,EAAe,IAAMd,EAASY,CAAU,EAE9C,OAAAb,EAAM,UAAU,IAAM,CAChB,CAACY,GAAaF,IAGhBI,EAAyB,QAAU,SAAS,cAC5CC,EAAa,GAGXH,GAAa,CAACF,GAChBT,EAASa,CAAwB,CAErC,EAAG,CAACJ,CAAQ,CAAC,EAGbV,EAAM,UAAU,IAAM,IAAMC,EAASa,CAAwB,EAAG,CAAC,CAAC,EAGhEd,EAAA,cAACA,EAAM,SAAN,KACEU,EAAWV,EAAA,cAAC,OAAI,QAASe,EAAc,SAAU,EAAG,EAAK,KAC1Df,EAAA,cAAC,OAAI,IAAKa,EAAY,SAAU,GAAI,UAAWF,GAC5CF,CACH,EACCC,EAAWV,EAAA,cAAC,OAAI,QAASe,EAAc,SAAU,EAAG,EAAK,IAC5D,CAEJ,EAEA,IAAOC,EAAQR",
   "names": ["React", "focusRef", "ref", "_a", "usePrevious", "value", "initialValue", "state", "TabTrapper", "children", "isActive", "className", "wasActive", "contentRef", "previouslyFocusedElement", "focusContent", "tab_trapper_default"]
 }

package/react/progress-bar/progress-bar.scss

@@ -1,5 +1,5 @@
 @use '../../tokens/corner-radius';
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 
 .progress-bar {
@@ -12,24 +12,24 @@
     height: 4px;
     width: 100%;
 
-    background-color: light.$ge-progress-bar-background;
+    background-color: var(--ge-progress-bar-background);
     border-radius: corner-radius.$xs;
 
     &--dark {
-      background-color: light.$ge-fixed-progress-bar-background;
+      background-color: var(--ge-fixed-progress-bar-background);
     }
   }
 
   &__bar {
-    background-color: light.$ge-progress-bar-indicator-alternate;
+    background-color: var(--ge-progress-bar-indicator-alternate);
     border-radius: corner-radius.$xs;
 
     &--dark {
-      background-color: light.$ge-fixed-progress-bar-indicator-alternate;
+      background-color: var(--ge-fixed-progress-bar-indicator-alternate);
     }
 
     &--cta {
-      background-color: light.$ge-progress-bar-indicator-default;
+      background-color: var(--ge-progress-bar-indicator-default);
     }
   }
 
@@ -65,7 +65,7 @@
     }
 
     &--dark {
-      color: light.$on-fixed-background-primary-default;
+      color: var(--on-fixed-background-primary-default);
     }
   }
 }

package/react/radio/radio.js

@@ -1,2 +1,2 @@
-var x=Object.defineProperty;var l=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var t=(a,i,o)=>i in a?x(a,i,{enumerable:!0,configurable:!0,writable:!0,value:o}):a[i]=o,u=(a,i)=>{for(var o in i||(i={}))f.call(i,o)&&t(a,o,i[o]);if(l)for(var o of l(i))p.call(i,o)&&t(a,o,i[o]);return a};var v=(a,i)=>{var o={};for(var n in a)f.call(a,n)&&i.indexOf(n)<0&&(o[n]=a[n]);if(a!=null&&l)for(var n of l(a))i.indexOf(n)<0&&p.call(a,n)&&(o[n]=a[n]);return o};import R from"classnames";import*as r from"react";import T from"../use-input-validation";import c from"../text";import{colors as z}from"./radio.types";const _=r.forwardRef((k,C)=>{var m=k,{children:a,color:i,description:o,isUnderline:n,label:h,name:I,showCustomError:N=!0,value:g}=m,e=v(m,["children","color","description","isUnderline","label","name","showCustomError","value"]);const[b,y,s]=T();return r.createElement("label",{className:R("radio",{"radio--error":s,"radio--underline":n},i)},r.createElement("input",u({name:I,value:g,ref:C,type:"radio",onChange:d=>{e.onChange&&e.onChange(d),b(d)},onInvalid:d=>{e.onInvalid&&e.onInvalid(d),y(d)}},e)),r.createElement("div",{className:"radio__label"},r.createElement("span",{className:"radio__fake-element"}),r.createElement("span",null,h,a)),s&&N&&r.createElement("div",{"aria-hidden":"true",className:"radio__error"},s),o&&r.createElement(c,{className:"radio__description",size:c.sizes.small},o))});_.displayName="Radio";const j=Object.assign(_,{colors:z});var V=j;export{V as default};
+"use client";var x=Object.defineProperty;var l=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var t=(a,i,o)=>i in a?x(a,i,{enumerable:!0,configurable:!0,writable:!0,value:o}):a[i]=o,u=(a,i)=>{for(var o in i||(i={}))f.call(i,o)&&t(a,o,i[o]);if(l)for(var o of l(i))p.call(i,o)&&t(a,o,i[o]);return a};var c=(a,i)=>{var o={};for(var n in a)f.call(a,n)&&i.indexOf(n)<0&&(o[n]=a[n]);if(a!=null&&l)for(var n of l(a))i.indexOf(n)<0&&p.call(a,n)&&(o[n]=a[n]);return o};import R from"classnames";import*as e from"react";import T from"../use-input-validation";import v from"../text";import{colors as z}from"./radio.types";const _=e.forwardRef((k,C)=>{var m=k,{children:a,color:i,description:o,isUnderline:n,label:h,name:I,showCustomError:N=!0,value:g}=m,r=c(m,["children","color","description","isUnderline","label","name","showCustomError","value"]);const[b,y,s]=T();return e.createElement("label",{className:R("radio",{"radio--error":s,"radio--underline":n},i)},e.createElement("input",u({name:I,value:g,ref:C,type:"radio",onChange:d=>{r.onChange&&r.onChange(d),b(d)},onInvalid:d=>{r.onInvalid&&r.onInvalid(d),y(d)}},r)),e.createElement("div",{className:"radio__label"},e.createElement("span",{className:"radio__fake-element"}),e.createElement("span",null,h,a)),s&&N&&e.createElement("div",{"aria-hidden":"true",className:"radio__error"},s),o&&e.createElement(v,{className:"radio__description",size:v.sizes.small},o))});_.displayName="Radio";const j=Object.assign(_,{colors:z});var V=j;export{V as default};
 //# sourceMappingURL=radio.js.map

package/react/radio/radio.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/radio/radio.tsx"],
-  "sourcesContent": ["import cn from 'classnames';\nimport * as React from 'react';\n\nimport useInputValidation from '../use-input-validation';\nimport Text from '../text';\n\nimport { colors, Radio as Props } from './radio.types';\n\nconst RefRadio = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      color,\n      description,\n      isUnderline,\n      label,\n      name,\n      showCustomError = true,\n      value,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n\n    return (\n      <label\n        className={cn(\n          'radio',\n          { 'radio--error': error, 'radio--underline': isUnderline },\n          color,\n        )}\n      >\n        <input\n          name={name}\n          value={value}\n          ref={ref}\n          type=\"radio\"\n          onChange={e => {\n            // NOTE: To not break compatibility\n            if (restProps.onChange) restProps.onChange(e);\n            onChange(e);\n          }}\n          onInvalid={e => {\n            // NOTE: To not break compatibility\n            if (restProps.onInvalid) restProps.onInvalid(e);\n            onInvalid(e);\n          }}\n          {...restProps}\n        />\n        <div className=\"radio__label\">\n          <span className=\"radio__fake-element\"></span>\n          <span>\n            {label}\n            {children}\n          </span>\n        </div>\n\n        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n        {error && showCustomError && (\n          <div aria-hidden=\"true\" className=\"radio__error\">\n            {error}\n          </div>\n        )}\n\n        {description && (\n          <Text className=\"radio__description\" size={Text.sizes.small}>\n            {description}\n          </Text>\n        )}\n      </label>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Radio\"\nRefRadio.displayName = 'Radio';\n\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\nconst Radio: typeof RefRadio & {\n  colors: typeof colors;\n} = Object.assign(RefRadio, { colors });\n\nexport default Radio;\n"],
-  "mappings": "2fAAA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAwB,0BAC/B,OAAOC,MAAU,UAEjB,OAAS,UAAAC,MAA8B,gBAEvC,MAAMC,EAAWJ,EAAM,WAIrB,CACEK,EAWAC,IACG,CAZH,IAAAC,EAAAF,EACE,UAAAG,EACA,MAAAC,EACA,YAAAC,EACA,YAAAC,EACA,MAAAC,EACA,KAAAC,EACA,gBAAAC,EAAkB,GAClB,MAAAC,CArBN,EAaIR,EASKS,EAAAC,EATLV,EASK,CARH,WACA,QACA,cACA,cACA,QACA,OACA,kBACA,UAKF,KAAM,CAACW,EAAUC,EAAWC,CAAK,EAAInB,EAAmB,EAExD,OACED,EAAA,cAAC,SACC,UAAWD,EACT,QACA,CAAE,eAAgBqB,EAAO,mBAAoBT,CAAY,EACzDF,CACF,GAEAT,EAAA,cAAC,QAAAqB,EAAA,CACC,KAAMR,EACN,MAAOE,EACP,IAAKT,EACL,KAAK,QACL,SAAUgB,GAAK,CAETN,EAAU,UAAUA,EAAU,SAASM,CAAC,EAC5CJ,EAASI,CAAC,CACZ,EACA,UAAWA,GAAK,CAEVN,EAAU,WAAWA,EAAU,UAAUM,CAAC,EAC9CH,EAAUG,CAAC,CACb,GACIN,EACN,EACAhB,EAAA,cAAC,OAAI,UAAU,gBACbA,EAAA,cAAC,QAAK,UAAU,sBAAsB,EACtCA,EAAA,cAAC,YACEY,EACAJ,CACH,CACF,EAGCY,GAASN,GACRd,EAAA,cAAC,OAAI,cAAY,OAAO,UAAU,gBAC/BoB,CACH,EAGDV,GACCV,EAAA,cAACE,EAAA,CAAK,UAAU,qBAAqB,KAAMA,EAAK,MAAM,OACnDQ,CACH,CAEJ,CAEJ,CACF,EAGAN,EAAS,YAAc,QAGvB,MAAMmB,EAEF,OAAO,OAAOnB,EAAU,CAAE,OAAAD,CAAO,CAAC,EAEtC,IAAOqB,EAAQD",
+  "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 { colors, Radio as Props } from './radio.types';\n\nconst RefRadio = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      color,\n      description,\n      isUnderline,\n      label,\n      name,\n      showCustomError = true,\n      value,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n\n    return (\n      <label\n        className={cn(\n          'radio',\n          { 'radio--error': error, 'radio--underline': isUnderline },\n          color,\n        )}\n      >\n        <input\n          name={name}\n          value={value}\n          ref={ref}\n          type=\"radio\"\n          onChange={e => {\n            // NOTE: To not break compatibility\n            if (restProps.onChange) restProps.onChange(e);\n            onChange(e);\n          }}\n          onInvalid={e => {\n            // NOTE: To not break compatibility\n            if (restProps.onInvalid) restProps.onInvalid(e);\n            onInvalid(e);\n          }}\n          {...restProps}\n        />\n        <div className=\"radio__label\">\n          <span className=\"radio__fake-element\"></span>\n          <span>\n            {label}\n            {children}\n          </span>\n        </div>\n\n        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n        {error && showCustomError && (\n          <div aria-hidden=\"true\" className=\"radio__error\">\n            {error}\n          </div>\n        )}\n\n        {description && (\n          <Text className=\"radio__description\" size={Text.sizes.small}>\n            {description}\n          </Text>\n        )}\n      </label>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Radio\"\nRefRadio.displayName = 'Radio';\n\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\nconst Radio: typeof RefRadio & {\n  colors: typeof colors;\n} = Object.assign(RefRadio, { colors });\n\nexport default Radio;\n"],
+  "mappings": "wgBAEA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAwB,0BAC/B,OAAOC,MAAU,UAEjB,OAAS,UAAAC,MAA8B,gBAEvC,MAAMC,EAAWJ,EAAM,WAIrB,CACEK,EAWAC,IACG,CAZH,IAAAC,EAAAF,EACE,UAAAG,EACA,MAAAC,EACA,YAAAC,EACA,YAAAC,EACA,MAAAC,EACA,KAAAC,EACA,gBAAAC,EAAkB,GAClB,MAAAC,CAvBN,EAeIR,EASKS,EAAAC,EATLV,EASK,CARH,WACA,QACA,cACA,cACA,QACA,OACA,kBACA,UAKF,KAAM,CAACW,EAAUC,EAAWC,CAAK,EAAInB,EAAmB,EAExD,OACED,EAAA,cAAC,SACC,UAAWD,EACT,QACA,CAAE,eAAgBqB,EAAO,mBAAoBT,CAAY,EACzDF,CACF,GAEAT,EAAA,cAAC,QAAAqB,EAAA,CACC,KAAMR,EACN,MAAOE,EACP,IAAKT,EACL,KAAK,QACL,SAAUgB,GAAK,CAETN,EAAU,UAAUA,EAAU,SAASM,CAAC,EAC5CJ,EAASI,CAAC,CACZ,EACA,UAAWA,GAAK,CAEVN,EAAU,WAAWA,EAAU,UAAUM,CAAC,EAC9CH,EAAUG,CAAC,CACb,GACIN,EACN,EACAhB,EAAA,cAAC,OAAI,UAAU,gBACbA,EAAA,cAAC,QAAK,UAAU,sBAAsB,EACtCA,EAAA,cAAC,YACEY,EACAJ,CACH,CACF,EAGCY,GAASN,GACRd,EAAA,cAAC,OAAI,cAAY,OAAO,UAAU,gBAC/BoB,CACH,EAGDV,GACCV,EAAA,cAACE,EAAA,CAAK,UAAU,qBAAqB,KAAMA,EAAK,MAAM,OACnDQ,CACH,CAEJ,CAEJ,CACF,EAGAN,EAAS,YAAc,QAGvB,MAAMmB,EAEF,OAAO,OAAOnB,EAAU,CAAE,OAAAD,CAAO,CAAC,EAEtC,IAAOqB,EAAQD",
   "names": ["cn", "React", "useInputValidation", "Text", "colors", "RefRadio", "_a", "ref", "_b", "children", "color", "description", "isUnderline", "label", "name", "showCustomError", "value", "restProps", "__objRest", "onChange", "onInvalid", "error", "__spreadValues", "e", "Radio", "radio_default"]
 }

package/react/radio/radio.scss

@@ -1,4 +1,4 @@
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 
 .radio {
@@ -20,7 +20,7 @@
     // ticking one of them will result in the other ones still being
     // visually marked with an input error. The check for `:not(:valid)` fixes that.
     input:not(:valid) ~ #{$root}__label #{$root}__fake-element {
-      border-color: light.$ge-signal-border-error;
+      border-color: var(--ge-signal-border-error);
     }
   }
 
@@ -43,10 +43,10 @@
     display: flex;
     flex-direction: column;
     padding-bottom: spacing.$s;
-    border-bottom: 1px solid light.$ge-border-default;
+    border-bottom: 1px solid var(--ge-border-default);
 
     &--light {
-      border-color: light.$ge-fixed-selector-unselected-default;
+      border-color: var(--ge-fixed-selector-unselected-default);
     }
   }
 
@@ -54,7 +54,7 @@
     position: relative;
     display: block;
     margin-right: 8px;
-    border: 2px solid light.$ge-selector-primary-unselected-default;
+    border: 2px solid var(--ge-selector-primary-unselected-default);
     border-radius: 100%;
     box-sizing: border-box;
     flex-shrink: 0;
@@ -63,34 +63,34 @@
   &__description {
     margin-top: spacing.$xxs;
     margin-left: 31px;
-    color: light.$on-surface-primary-alternate;
+    color: var(--on-surface-primary-alternate);
 
     &--light {
-      color: light.$on-fixed-surface-primary-alternate;
+      color: var(--on-fixed-surface-primary-alternate);
     }
   }
 
   input:disabled ~ .radio__label {
-    color: light.$on-surface-primary-disabled;
+    color: var(--on-surface-primary-disabled);
 
     .radio__fake-element {
-      border-color: light.$ge-selector-primary-unselected-disabled;
+      border-color: var(--ge-selector-primary-unselected-disabled);
     }
   }
 
   input:disabled ~ .radio__description {
-    color: light.$on-surface-primary-disabled;
+    color: var(--on-surface-primary-disabled);
   }
 
   input:checked ~ &__label &__fake-element {
-    border-color: light.$ge-selector-primary-selected-default;
+    border-color: var(--ge-selector-primary-selected-default);
 
     &:before {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
-      background-color: light.$ge-selector-primary-selected-default;
+      background-color: var(--ge-selector-primary-selected-default);
       height: 14px;
       width: 14px;
       border-radius: 100%;
@@ -104,27 +104,27 @@
 
   &--light {
     .radio__fake-element {
-      border-color: light.$ge-fixed-selector-unselected-default;
+      border-color: var(--ge-fixed-selector-unselected-default);
     }
 
     .radio__label {
-      color: light.$on-fixed-surface-primary-default;
+      color: var(--on-fixed-surface-primary-default);
     }
 
     .radio__description {
-      color: light.$on-fixed-surface-primary-alternate;
+      color: var(--on-fixed-surface-primary-alternate);
     }
 
     & input:disabled ~ .radio__label {
-      color: light.$on-fixed-surface-primary-disabled;
+      color: var(--on-fixed-surface-primary-disabled);
 
       .radio__fake-element {
-        border-color: light.$ge-fixed-selector-unselected-disabled;
+        border-color: var(--ge-fixed-selector-unselected-disabled);
       }
     }
 
     & input:disabled ~ .radio__description {
-      color: light.$on-fixed-surface-primary-disabled;
+      color: var(--on-fixed-surface-primary-disabled);
     }
   }
 
@@ -136,7 +136,7 @@
   }
 
   &__error {
-    color: light.$on-surface-error;
+    color: var(--on-surface-error);
     margin-top: spacing.$xxs;
   }
 }

package/react/scale-bar/scale-bar.scss

@@ -1,4 +1,4 @@
-@use '../../tokens/light';
+@use '../../tokens/colours';
 
 .scale-bar {
   align-items: stretch;
@@ -12,11 +12,11 @@
     flex: 1 1 100%;
 
     &--empty {
-      background: light.$ge-progress-bar-background;
+      background: var(--ge-progress-bar-background);
     }
 
     &--filled {
-      background: light.$ge-progress-bar-indicator-default;
+      background: var(--ge-progress-bar-indicator-default);
     }
   }
 }

package/react/search/search.js

@@ -1,2 +1,2 @@
-var Z=Object.defineProperty,b=Object.defineProperties;var R=Object.getOwnPropertyDescriptors;var N=Object.getOwnPropertySymbols;var H=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable;var D=(e,a,i)=>a in e?Z(e,a,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[a]=i,p=(e,a)=>{for(var i in a||(a={}))H.call(a,i)&&D(e,i,a[i]);if(N)for(var i of N(a))O.call(a,i)&&D(e,i,a[i]);return e},f=(e,a)=>b(e,R(a));var P=(e,a)=>{var i={};for(var l in e)H.call(e,l)&&a.indexOf(l)<0&&(i[l]=e[l]);if(e!=null&&N)for(var l of N(e))a.indexOf(l)<0&&O.call(e,l)&&(i[l]=e[l]);return i};import o from"classnames";import s,{useRef as ss,useState as V}from"react";import n from"../button";import es from"../hooks/use-click-outside";import{useIsMounted as rs}from"../hooks/use-is-mounted";import as from"../icons/18/close";import is from"../icons/24/search";import _ from"../text";import ns from"../use-input-validation";import{themes as h,inputSizes as m,variants as v,expandDirections as ls}from"./search.types";const j=s.forwardRef((ts,G)=>{var x=ts,{button:e,customErrorMessages:a,clear:i,disabled:l,label:y,isLabelVisible:$=!0,name:q,onChangeFunc:A=()=>{},onClear:B=()=>{},expandable:c,placeholder:L,required:S,inputSize:t=m.small,theme:d=h.inline,variant:r=v.default,value:W="",helpText:g,helpIcon:z}=x,F=P(x,["button","customErrorMessages","clear","disabled","label","isLabelVisible","name","onChangeFunc","onClear","expandable","placeholder","required","inputSize","theme","variant","value","helpText","helpIcon"]);const[J,K,I]=ns(a),T=ss(null),[w,C]=V(!1),Q=rs();es(T,()=>C(!1));const[E,U]=V(W),M=u=>{A(u),U(u)},X=u=>{M(u.target.value),J(u)},k=()=>{M(""),B()},Y=()=>{k(),C(!1)};return s.createElement("div",{className:o("search",{[`search--expand-direction-${c==null?void 0:c.direction}`]:c==null?void 0:c.direction})},Q?s.createElement("div",{className:o("search__inner",{"search__inner--expandable":c,"search__inner--expand":w}),ref:T},d===h.inline&&$?s.createElement(_,{theme:_.themes.emphasis,size:t===m.large?_.sizes.large:_.sizes.small,className:o("search__header",{[`search__header--variant-${r}`]:r})},y):null,s.createElement("div",{className:o("search__input-wrapper",{[`search__input-wrapper--size-${t}`]:t,[`search__input-wrapper--theme-${d}`]:d,[`search__input-wrapper--variant-${r}`]:r})},s.createElement("label",{className:"search__label"},s.createElement("div",{className:o("search__icon",{[`search__icon--variant-${r}`]:r})},s.createElement(is,null)),s.createElement("input",f(p({},F),{className:o("search__input",{[`search__input--variant-${r}`]:r,[`search__input--size-${t}`]:t}),disabled:l,name:q,onChange:X,onClick:()=>C(!0),value:E,onInvalid:K,placeholder:L,ref:G,required:S,type:"search","aria-label":d===h.floating||!$?y:void 0}))),s.createElement("div",{className:o("search__clear-button",{"search__clear-button--visible":E})},s.createElement(n,f(p({},i),{onClick:k,size:t===m.small?n.sizes.small:n.sizes.basic,type:"button",variant:r===v.fixed?n.variants.fixedTertiary:n.variants.tertiary}))),e?s.createElement(n,f(p({},e),{className:"search__search-button",variant:r===v.fixed?n.variants.secondaryWhite:n.variants.secondary,type:"submit",size:t===m.small?n.sizes.small:n.sizes.basic})):null,c&&w?s.createElement(n,f(p({},c.close),{className:"search__close-button",onClick:Y,leadingIcon:s.createElement(as,null),size:t===m.small?n.sizes.small:n.sizes.basic,type:"button",variant:r===v.fixed?n.variants.fixedTertiary:n.variants.tertiary})):null),I?s.createElement("div",{"aria-hidden":"true",className:"search__error"},s.createElement(_,null,I)):null,d===h.inline&&g?s.createElement(_,{size:_.sizes.interface,className:o("search__help-text",{[`search__help-text--variant-${r}`]:r})},z,g):null):s.createElement("div",{className:"search__loading-inner"},d===h.inline&&$?s.createElement("div",{className:o("search__loading-extra",{[`search__loading-extra--${r}`]:r})},y):null,s.createElement("div",{className:o("search__loading-input",{[`search__loading-input--${r}`]:r,[`search__loading-input--${t}`]:t})}),d===h.inline&&g?s.createElement("div",{className:o("search__loading-extra",{[`search__loading-extra--${r}`]:r})},z,g):null))});j.displayName="Search";const os=Object.assign(j,{themes:h,variants:v,inputSizes:m,expandDirections:ls});var $s=os;export{$s as default};
+"use client";var Z=Object.defineProperty,b=Object.defineProperties;var R=Object.getOwnPropertyDescriptors;var N=Object.getOwnPropertySymbols;var H=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable;var D=(e,a,i)=>a in e?Z(e,a,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[a]=i,p=(e,a)=>{for(var i in a||(a={}))H.call(a,i)&&D(e,i,a[i]);if(N)for(var i of N(a))O.call(a,i)&&D(e,i,a[i]);return e},f=(e,a)=>b(e,R(a));var P=(e,a)=>{var i={};for(var l in e)H.call(e,l)&&a.indexOf(l)<0&&(i[l]=e[l]);if(e!=null&&N)for(var l of N(e))a.indexOf(l)<0&&O.call(e,l)&&(i[l]=e[l]);return i};import t from"classnames";import s,{useRef as ss,useState as V}from"react";import n from"../button";import es from"../hooks/use-click-outside";import{useIsMounted as rs}from"../hooks/use-is-mounted";import as from"../icons/18/close";import is from"../icons/24/search";import _ from"../text";import ns from"../use-input-validation";import{themes as h,inputSizes as m,variants as v,expandDirections as ls}from"./search.types";const j=s.forwardRef((os,G)=>{var x=os,{button:e,customErrorMessages:a,clear:i,disabled:l,label:y,isLabelVisible:$=!0,name:q,onChangeFunc:A=()=>{},onClear:B=()=>{},expandable:c,placeholder:L,required:S,inputSize:o=m.small,theme:d=h.inline,variant:r=v.default,value:W="",helpText:g,helpIcon:z}=x,F=P(x,["button","customErrorMessages","clear","disabled","label","isLabelVisible","name","onChangeFunc","onClear","expandable","placeholder","required","inputSize","theme","variant","value","helpText","helpIcon"]);const[J,K,I]=ns(a),T=ss(null),[w,C]=V(!1),Q=rs();es(T,()=>C(!1));const[E,U]=V(W),M=u=>{A(u),U(u)},X=u=>{M(u.target.value),J(u)},k=()=>{M(""),B()},Y=()=>{k(),C(!1)};return s.createElement("div",{className:t("search",{[`search--expand-direction-${c==null?void 0:c.direction}`]:c==null?void 0:c.direction})},Q?s.createElement("div",{className:t("search__inner",{"search__inner--expandable":c,"search__inner--expand":w}),ref:T},d===h.inline&&$?s.createElement(_,{theme:_.themes.emphasis,size:o===m.large?_.sizes.large:_.sizes.small,className:t("search__header",{[`search__header--variant-${r}`]:r})},y):null,s.createElement("div",{className:t("search__input-wrapper",{[`search__input-wrapper--size-${o}`]:o,[`search__input-wrapper--theme-${d}`]:d,[`search__input-wrapper--variant-${r}`]:r})},s.createElement("label",{className:"search__label"},s.createElement("div",{className:t("search__icon",{[`search__icon--variant-${r}`]:r})},s.createElement(is,null)),s.createElement("input",f(p({},F),{className:t("search__input",{[`search__input--variant-${r}`]:r,[`search__input--size-${o}`]:o}),disabled:l,name:q,onChange:X,onClick:()=>C(!0),value:E,onInvalid:K,placeholder:L,ref:G,required:S,type:"search","aria-label":d===h.floating||!$?y:void 0}))),s.createElement("div",{className:t("search__clear-button",{"search__clear-button--visible":E})},s.createElement(n,f(p({},i),{onClick:k,size:o===m.small?n.sizes.small:n.sizes.basic,type:"button",variant:r===v.fixed?n.variants.fixedTertiary:n.variants.tertiary}))),e?s.createElement(n,f(p({},e),{className:"search__search-button",variant:r===v.fixed?n.variants.secondaryWhite:n.variants.secondary,type:"submit",size:o===m.small?n.sizes.small:n.sizes.basic})):null,c&&w?s.createElement(n,f(p({},c.close),{className:"search__close-button",onClick:Y,leadingIcon:s.createElement(as,null),size:o===m.small?n.sizes.small:n.sizes.basic,type:"button",variant:r===v.fixed?n.variants.fixedTertiary:n.variants.tertiary})):null),I?s.createElement("div",{"aria-hidden":"true",className:"search__error"},s.createElement(_,null,I)):null,d===h.inline&&g?s.createElement(_,{size:_.sizes.interface,className:t("search__help-text",{[`search__help-text--variant-${r}`]:r})},z,g):null):s.createElement("div",{className:"search__loading-inner"},d===h.inline&&$?s.createElement("div",{className:t("search__loading-extra",{[`search__loading-extra--${r}`]:r})},y):null,s.createElement("div",{className:t("search__loading-input",{[`search__loading-input--${r}`]:r,[`search__loading-input--${o}`]:o})}),d===h.inline&&g?s.createElement("div",{className:t("search__loading-extra",{[`search__loading-extra--${r}`]:r})},z,g):null))});j.displayName="Search";const ts=Object.assign(j,{themes:h,variants:v,inputSizes:m,expandDirections:ls});var $s=ts;export{$s as default};
 //# sourceMappingURL=search.js.map

package/react/search/search.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/search/search.tsx"],
-  "sourcesContent": ["import classNames from 'classnames';\nimport React, { useRef, useState } from 'react';\n\nimport Button from '../button';\nimport useClickOutside from '../hooks/use-click-outside';\nimport { useIsMounted } from '../hooks/use-is-mounted';\nimport CloseIcon from '../icons/18/close';\nimport SearchIcon from '../icons/24/search';\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\n\nimport {\n  Search as Props,\n  themes,\n  inputSizes,\n  variants,\n  expandDirections,\n} from './search.types';\n\nconst RefSearch = React.forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      button,\n      customErrorMessages,\n      clear,\n      disabled,\n      label,\n      isLabelVisible = true,\n      name,\n      onChangeFunc = () => {},\n      onClear = () => {},\n      expandable,\n      placeholder,\n      required,\n      inputSize = inputSizes.small,\n      theme = themes.inline,\n      variant = variants.default,\n      value = '',\n      helpText,\n      helpIcon,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [validationOnChange, handleInvalid, error] =\n      useInputValidation(customErrorMessages);\n    const searchArea = useRef<HTMLDivElement>(null);\n    const [expand, setExpand] = useState(false);\n    const isMounted = useIsMounted();\n\n    useClickOutside(searchArea, () => setExpand(false));\n\n    const [inputValue, setInputValue] = useState(value);\n\n    const setValue = (value: string) => {\n      onChangeFunc(value);\n      setInputValue(value);\n    };\n\n    const handleChange: React.ChangeEventHandler<HTMLInputElement> = e => {\n      setValue(e.target.value);\n      validationOnChange(e);\n    };\n\n    const handleClear = () => {\n      setValue('');\n      onClear();\n    };\n\n    const handleClose = () => {\n      handleClear();\n      setExpand(false);\n    };\n\n    return (\n      <div\n        className={classNames('search', {\n          [`search--expand-direction-${expandable?.direction}`]:\n            expandable?.direction,\n        })}\n      >\n        {isMounted ? (\n          <div\n            className={classNames('search__inner', {\n              'search__inner--expandable': expandable,\n              'search__inner--expand': expand,\n            })}\n            ref={searchArea}\n          >\n            {theme === themes.inline && isLabelVisible ? (\n              <Text\n                theme={Text.themes.emphasis}\n                size={\n                  inputSize === inputSizes.large\n                    ? Text.sizes.large\n                    : Text.sizes.small\n                }\n                className={classNames('search__header', {\n                  [`search__header--variant-${variant}`]: variant,\n                })}\n              >\n                {label}\n              </Text>\n            ) : null}\n            <div\n              className={classNames('search__input-wrapper', {\n                [`search__input-wrapper--size-${inputSize}`]: inputSize,\n                [`search__input-wrapper--theme-${theme}`]: theme,\n                [`search__input-wrapper--variant-${variant}`]: variant,\n              })}\n            >\n              <label className=\"search__label\">\n                <div\n                  className={classNames('search__icon', {\n                    [`search__icon--variant-${variant}`]: variant,\n                  })}\n                >\n                  <SearchIcon />\n                </div>\n                <input\n                  {...restProps}\n                  className={classNames('search__input', {\n                    [`search__input--variant-${variant}`]: variant,\n                    [`search__input--size-${inputSize}`]: inputSize,\n                  })}\n                  disabled={disabled}\n                  name={name}\n                  onChange={handleChange}\n                  onClick={() => setExpand(true)}\n                  value={inputValue}\n                  onInvalid={handleInvalid}\n                  placeholder={placeholder}\n                  ref={ref}\n                  required={required}\n                  type=\"search\"\n                  aria-label={\n                    theme === themes.floating || !isLabelVisible\n                      ? label\n                      : undefined\n                  }\n                />\n              </label>\n              <div\n                className={classNames('search__clear-button', {\n                  'search__clear-button--visible': inputValue,\n                })}\n              >\n                <Button\n                  {...clear}\n                  onClick={handleClear}\n                  size={\n                    inputSize === inputSizes.small\n                      ? Button.sizes.small\n                      : Button.sizes.basic\n                  }\n                  type=\"button\"\n                  variant={\n                    variant === variants.fixed\n                      ? Button.variants.fixedTertiary\n                      : Button.variants.tertiary\n                  }\n                />\n              </div>\n              {button ? (\n                <Button\n                  {...button}\n                  className=\"search__search-button\"\n                  variant={\n                    variant === variants.fixed\n                      ? Button.variants.secondaryWhite\n                      : Button.variants.secondary\n                  }\n                  type=\"submit\"\n                  size={\n                    inputSize === inputSizes.small\n                      ? Button.sizes.small\n                      : Button.sizes.basic\n                  }\n                />\n              ) : null}\n              {expandable && expand ? (\n                <Button\n                  {...expandable.close}\n                  className=\"search__close-button\"\n                  onClick={handleClose}\n                  leadingIcon={<CloseIcon />}\n                  size={\n                    inputSize === inputSizes.small\n                      ? Button.sizes.small\n                      : Button.sizes.basic\n                  }\n                  type=\"button\"\n                  variant={\n                    variant === variants.fixed\n                      ? Button.variants.fixedTertiary\n                      : Button.variants.tertiary\n                  }\n                />\n              ) : null}\n            </div>\n            {error ? (\n              <div aria-hidden=\"true\" className=\"search__error\">\n                <Text>{error}</Text>\n              </div>\n            ) : null}\n            {theme === themes.inline && helpText ? (\n              <Text\n                size={Text.sizes.interface}\n                className={classNames('search__help-text', {\n                  [`search__help-text--variant-${variant}`]: variant,\n                })}\n              >\n                {helpIcon}\n                {helpText}\n              </Text>\n            ) : null}\n          </div>\n        ) : (\n          <div className=\"search__loading-inner\">\n            {theme === themes.inline && isLabelVisible ? (\n              <div\n                className={classNames('search__loading-extra', {\n                  [`search__loading-extra--${variant}`]: variant,\n                })}\n              >\n                {label}\n              </div>\n            ) : null}\n            <div\n              className={classNames('search__loading-input', {\n                [`search__loading-input--${variant}`]: variant,\n                [`search__loading-input--${inputSize}`]: inputSize,\n              })}\n            ></div>\n            {theme === themes.inline && helpText ? (\n              <div\n                className={classNames('search__loading-extra', {\n                  [`search__loading-extra--${variant}`]: variant,\n                })}\n              >\n                {helpIcon}\n                {helpText}\n              </div>\n            ) : null}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\n// NOTE: Stack traces will show \"forwardRef\" instead of \"Search\" if this is not set.\nRefSearch.displayName = 'Search';\n\nconst Search: typeof RefSearch & {\n  themes: typeof themes;\n  variants: typeof variants;\n  inputSizes: typeof inputSizes;\n  expandDirections: typeof expandDirections;\n} = Object.assign(RefSearch, {\n  themes,\n  variants,\n  inputSizes,\n  expandDirections,\n});\n\nexport default Search;\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client';\n\nimport classNames from 'classnames';\nimport React, { useRef, useState } from 'react';\n\nimport Button from '../button';\nimport useClickOutside from '../hooks/use-click-outside';\nimport { useIsMounted } from '../hooks/use-is-mounted';\nimport CloseIcon from '../icons/18/close';\nimport SearchIcon from '../icons/24/search';\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\n\nimport {\n  Search as Props,\n  themes,\n  inputSizes,\n  variants,\n  expandDirections,\n} from './search.types';\n\nconst RefSearch = React.forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      button,\n      customErrorMessages,\n      clear,\n      disabled,\n      label,\n      isLabelVisible = true,\n      name,\n      onChangeFunc = () => {},\n      onClear = () => {},\n      expandable,\n      placeholder,\n      required,\n      inputSize = inputSizes.small,\n      theme = themes.inline,\n      variant = variants.default,\n      value = '',\n      helpText,\n      helpIcon,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [validationOnChange, handleInvalid, error] =\n      useInputValidation(customErrorMessages);\n    const searchArea = useRef<HTMLDivElement>(null);\n    const [expand, setExpand] = useState(false);\n    const isMounted = useIsMounted();\n\n    useClickOutside(searchArea, () => setExpand(false));\n\n    const [inputValue, setInputValue] = useState(value);\n\n    const setValue = (value: string) => {\n      onChangeFunc(value);\n      setInputValue(value);\n    };\n\n    const handleChange: React.ChangeEventHandler<HTMLInputElement> = e => {\n      setValue(e.target.value);\n      validationOnChange(e);\n    };\n\n    const handleClear = () => {\n      setValue('');\n      onClear();\n    };\n\n    const handleClose = () => {\n      handleClear();\n      setExpand(false);\n    };\n\n    return (\n      <div\n        className={classNames('search', {\n          [`search--expand-direction-${expandable?.direction}`]:\n            expandable?.direction,\n        })}\n      >\n        {isMounted ? (\n          <div\n            className={classNames('search__inner', {\n              'search__inner--expandable': expandable,\n              'search__inner--expand': expand,\n            })}\n            ref={searchArea}\n          >\n            {theme === themes.inline && isLabelVisible ? (\n              <Text\n                theme={Text.themes.emphasis}\n                size={\n                  inputSize === inputSizes.large\n                    ? Text.sizes.large\n                    : Text.sizes.small\n                }\n                className={classNames('search__header', {\n                  [`search__header--variant-${variant}`]: variant,\n                })}\n              >\n                {label}\n              </Text>\n            ) : null}\n            <div\n              className={classNames('search__input-wrapper', {\n                [`search__input-wrapper--size-${inputSize}`]: inputSize,\n                [`search__input-wrapper--theme-${theme}`]: theme,\n                [`search__input-wrapper--variant-${variant}`]: variant,\n              })}\n            >\n              <label className=\"search__label\">\n                <div\n                  className={classNames('search__icon', {\n                    [`search__icon--variant-${variant}`]: variant,\n                  })}\n                >\n                  <SearchIcon />\n                </div>\n                <input\n                  {...restProps}\n                  className={classNames('search__input', {\n                    [`search__input--variant-${variant}`]: variant,\n                    [`search__input--size-${inputSize}`]: inputSize,\n                  })}\n                  disabled={disabled}\n                  name={name}\n                  onChange={handleChange}\n                  onClick={() => setExpand(true)}\n                  value={inputValue}\n                  onInvalid={handleInvalid}\n                  placeholder={placeholder}\n                  ref={ref}\n                  required={required}\n                  type=\"search\"\n                  aria-label={\n                    theme === themes.floating || !isLabelVisible\n                      ? label\n                      : undefined\n                  }\n                />\n              </label>\n              <div\n                className={classNames('search__clear-button', {\n                  'search__clear-button--visible': inputValue,\n                })}\n              >\n                <Button\n                  {...clear}\n                  onClick={handleClear}\n                  size={\n                    inputSize === inputSizes.small\n                      ? Button.sizes.small\n                      : Button.sizes.basic\n                  }\n                  type=\"button\"\n                  variant={\n                    variant === variants.fixed\n                      ? Button.variants.fixedTertiary\n                      : Button.variants.tertiary\n                  }\n                />\n              </div>\n              {button ? (\n                <Button\n                  {...button}\n                  className=\"search__search-button\"\n                  variant={\n                    variant === variants.fixed\n                      ? Button.variants.secondaryWhite\n                      : Button.variants.secondary\n                  }\n                  type=\"submit\"\n                  size={\n                    inputSize === inputSizes.small\n                      ? Button.sizes.small\n                      : Button.sizes.basic\n                  }\n                />\n              ) : null}\n              {expandable && expand ? (\n                <Button\n                  {...expandable.close}\n                  className=\"search__close-button\"\n                  onClick={handleClose}\n                  leadingIcon={<CloseIcon />}\n                  size={\n                    inputSize === inputSizes.small\n                      ? Button.sizes.small\n                      : Button.sizes.basic\n                  }\n                  type=\"button\"\n                  variant={\n                    variant === variants.fixed\n                      ? Button.variants.fixedTertiary\n                      : Button.variants.tertiary\n                  }\n                />\n              ) : null}\n            </div>\n            {error ? (\n              <div aria-hidden=\"true\" className=\"search__error\">\n                <Text>{error}</Text>\n              </div>\n            ) : null}\n            {theme === themes.inline && helpText ? (\n              <Text\n                size={Text.sizes.interface}\n                className={classNames('search__help-text', {\n                  [`search__help-text--variant-${variant}`]: variant,\n                })}\n              >\n                {helpIcon}\n                {helpText}\n              </Text>\n            ) : null}\n          </div>\n        ) : (\n          <div className=\"search__loading-inner\">\n            {theme === themes.inline && isLabelVisible ? (\n              <div\n                className={classNames('search__loading-extra', {\n                  [`search__loading-extra--${variant}`]: variant,\n                })}\n              >\n                {label}\n              </div>\n            ) : null}\n            <div\n              className={classNames('search__loading-input', {\n                [`search__loading-input--${variant}`]: variant,\n                [`search__loading-input--${inputSize}`]: inputSize,\n              })}\n            ></div>\n            {theme === themes.inline && helpText ? (\n              <div\n                className={classNames('search__loading-extra', {\n                  [`search__loading-extra--${variant}`]: variant,\n                })}\n              >\n                {helpIcon}\n                {helpText}\n              </div>\n            ) : null}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\n// NOTE: Stack traces will show \"forwardRef\" instead of \"Search\" if this is not set.\nRefSearch.displayName = 'Search';\n\nconst Search: typeof RefSearch & {\n  themes: typeof themes;\n  variants: typeof variants;\n  inputSizes: typeof inputSizes;\n  expandDirections: typeof expandDirections;\n} = Object.assign(RefSearch, {\n  themes,\n  variants,\n  inputSizes,\n  expandDirections,\n});\n\nexport default Search;\n"],
+  "mappings": "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",
   "names": ["classNames", "React", "useRef", "useState", "Button", "useClickOutside", "useIsMounted", "CloseIcon", "SearchIcon", "Text", "useInputValidation", "themes", "inputSizes", "variants", "expandDirections", "RefSearch", "_a", "ref", "_b", "button", "customErrorMessages", "clear", "disabled", "label", "isLabelVisible", "name", "onChangeFunc", "onClear", "expandable", "placeholder", "required", "inputSize", "theme", "variant", "value", "helpText", "helpIcon", "restProps", "__objRest", "validationOnChange", "handleInvalid", "error", "searchArea", "expand", "setExpand", "isMounted", "inputValue", "setInputValue", "setValue", "handleChange", "e", "handleClear", "handleClose", "__spreadProps", "__spreadValues", "Search", "search_default"]
 }