@sats-group/ui-lib 81.0.1 → 81.2.0

package/react/expander/expander.scss

@@ -1,4 +1,4 @@
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 
 .expander {
@@ -22,7 +22,7 @@
     align-items: center;
     background: transparent;
     border: 0;
-    border-bottom: 1px solid light.$ge-divider-default;
+    border-bottom: 1px solid var(--ge-divider-default);
     cursor: pointer;
     display: flex;
     gap: spacing.$xs;
@@ -32,7 +32,7 @@
     width: 100%;
 
     &--triggered {
-      background: light.$background-primary-default;
+      background: var(--background-primary-default);
     }
 
     @include break {
@@ -42,7 +42,7 @@
 
     @media (hover: hover) {
       &:hover {
-        background: light.$surface-primary-hover;
+        background: var(--surface-primary-hover);
       }
     }
   }
@@ -63,12 +63,12 @@
   }
 
   &__drawer {
-    background: light.$surface-primary-default;
+    background: var(--surface-primary-default);
   }
 
   &__content {
-    border-bottom: 1px solid light.$ge-divider-default;
-    border-top: 1px solid light.$ge-divider-default;
+    border-bottom: 1px solid var(--ge-divider-default);
+    border-top: 1px solid var(--ge-divider-default);
     display: grid;
     gap: spacing.$m;
     padding: 20px;
@@ -100,11 +100,11 @@
   }
 
   &__meta-text {
-    color: light.$on-surface-primary-alternate;
+    color: var(--on-surface-primary-alternate);
   }
 
   &__divider {
-    background: light.$ge-divider-default;
+    background: var(--ge-divider-default);
     border: 0;
     height: 1px;
     margin: 0;

package/react/filter/filter.js

@@ -1,2 +1,2 @@
-var h=Object.defineProperty,g=Object.defineProperties;var c=Object.getOwnPropertyDescriptors;var f=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var p=(t,s,i)=>s in t?h(t,s,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[s]=i,m=(t,s)=>{for(var i in s||(s={}))b.call(s,i)&&p(t,i,s[i]);if(f)for(var i of f(s))C.call(s,i)&&p(t,i,s[i]);return t},a=(t,s)=>g(t,c(s));import*as o from"react";import N from"classnames";import w from"../hooks/use-toggle";import x from"../hooks/use-click-outside";import z from"../hooks/use-escape";import{useIsMounted as F}from"../hooks/use-is-mounted";import T from"../form-content";import k from"../icons/24/arrow-up";import u from"../icons/24/arrow-down";import e from"../text";const D=({formContentOptions:t,selectedOptionsCount:s,testTags:i,title:v})=>{const _=F(),n=o.useRef(null),[l,d,,r]=w(!1);return x(n,r),z(r),o.createElement("div",m({className:N("filter",{"filter--clicked":l}),ref:n},i),_?o.createElement("div",{className:"filter__buttons"},o.createElement("button",{type:"button",className:"filter__button",onClick:d,"data-test-dropdown-button":!0},o.createElement(e,{size:e.sizes.basic,theme:e.themes.emphasis,className:"filter__button-text"},v),o.createElement("div",{className:"filter__button-inner-right"},s?o.createElement(e,{className:"filter__selected-options",theme:e.themes.emphasis,size:e.sizes.small},s):null,o.createElement(l?k:u,null)))):o.createElement("div",{className:"filter__loading-button"},o.createElement("div",{className:"filter__loading-placeholder"},o.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"112",height:"22",viewBox:"0 0 112 22",fill:"none"},o.createElement("path",{d:"M0 4.5C0 2.29086 1.79086 0.5 4 0.5H108C110.209 0.5 112 2.29086 112 4.5V17.5C112 19.7091 110.209 21.5 108 21.5H4C1.79086 21.5 0 19.7091 0 17.5V4.5Z",fill:"#DCDEE0"}))),o.createElement("div",{className:"filter__loading-icon"},o.createElement(u,null))),o.createElement(T,a(m({},t),{isOpen:l,close:r,onSubmit:d})))};var j=D;export{j as default};
+"use client";var h=Object.defineProperty,c=Object.defineProperties;var g=Object.getOwnPropertyDescriptors;var f=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var p=(i,s,e)=>s in i?h(i,s,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[s]=e,m=(i,s)=>{for(var e in s||(s={}))b.call(s,e)&&p(i,e,s[e]);if(f)for(var e of f(s))C.call(s,e)&&p(i,e,s[e]);return i},a=(i,s)=>c(i,g(s));import*as o from"react";import N from"classnames";import w from"../hooks/use-toggle";import x from"../hooks/use-click-outside";import z from"../hooks/use-escape";import{useIsMounted as F}from"../hooks/use-is-mounted";import T from"../form-content";import k from"../icons/24/arrow-up";import u from"../icons/24/arrow-down";import t from"../text";const D=({formContentOptions:i,selectedOptionsCount:s,testTags:e,title:v})=>{const _=F(),n=o.useRef(null),[l,d,,r]=w(!1);return x(n,r),z(r),o.createElement("div",m({className:N("filter",{"filter--clicked":l}),ref:n},e),_?o.createElement("div",{className:"filter__buttons"},o.createElement("button",{type:"button",className:"filter__button",onClick:d,"data-test-dropdown-button":!0},o.createElement(t,{size:t.sizes.basic,theme:t.themes.emphasis,className:"filter__button-text"},v),o.createElement("div",{className:"filter__button-inner-right"},s?o.createElement(t,{className:"filter__selected-options",theme:t.themes.emphasis,size:t.sizes.small},s):null,o.createElement(l?k:u,null)))):o.createElement("div",{className:"filter__loading-button"},o.createElement("div",{className:"filter__loading-placeholder"},o.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"112",height:"22",viewBox:"0 0 112 22",fill:"none"},o.createElement("path",{d:"M0 4.5C0 2.29086 1.79086 0.5 4 0.5H108C110.209 0.5 112 2.29086 112 4.5V17.5C112 19.7091 110.209 21.5 108 21.5H4C1.79086 21.5 0 19.7091 0 17.5V4.5Z",fill:"#DCDEE0"}))),o.createElement("div",{className:"filter__loading-icon"},o.createElement(u,null))),o.createElement(T,a(m({},i),{isOpen:l,close:r,onSubmit:d})))};var j=D;export{j as default};
 //# sourceMappingURL=filter.js.map

package/react/filter/filter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/filter/filter.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport useToggle from '../hooks/use-toggle';\nimport useClickOutside from '../hooks/use-click-outside';\nimport useEscape from '../hooks/use-escape';\nimport { useIsMounted } from '../hooks/use-is-mounted';\nimport FormContent from '../form-content';\nimport ChevronUp from '../icons/24/arrow-up';\nimport ChevronDown from '../icons/24/arrow-down';\nimport Text from '../text';\n\nimport { Filter as Props } from './filter.types';\n\nconst Filter: React.FunctionComponent<Props> = ({\n  formContentOptions,\n  selectedOptionsCount,\n  testTags,\n  title,\n}) => {\n  const isMounted = useIsMounted();\n  const modal = React.useRef(null);\n  const [isOpen, toggle, , close] = useToggle(false);\n\n  useClickOutside(modal, close);\n  useEscape(close);\n\n  return (\n    <div\n      className={classNames('filter', {\n        'filter--clicked': isOpen,\n      })}\n      ref={modal}\n      {...testTags}\n    >\n      {isMounted ? (\n        <div className=\"filter__buttons\">\n          <button\n            type=\"button\"\n            className=\"filter__button\"\n            onClick={toggle}\n            data-test-dropdown-button\n          >\n            <Text\n              size={Text.sizes.basic}\n              theme={Text.themes.emphasis}\n              className=\"filter__button-text\"\n            >\n              {title}\n            </Text>\n\n            <div className=\"filter__button-inner-right\">\n              {selectedOptionsCount ? (\n                <Text\n                  className=\"filter__selected-options\"\n                  theme={Text.themes.emphasis}\n                  size={Text.sizes.small}\n                >\n                  {selectedOptionsCount}\n                </Text>\n              ) : null}\n\n              {isOpen ? <ChevronUp /> : <ChevronDown />}\n            </div>\n          </button>\n        </div>\n      ) : (\n        <div className=\"filter__loading-button\">\n          <div className=\"filter__loading-placeholder\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"112\"\n              height=\"22\"\n              viewBox=\"0 0 112 22\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M0 4.5C0 2.29086 1.79086 0.5 4 0.5H108C110.209 0.5 112 2.29086 112 4.5V17.5C112 19.7091 110.209 21.5 108 21.5H4C1.79086 21.5 0 19.7091 0 17.5V4.5Z\"\n                fill=\"#DCDEE0\"\n              />\n            </svg>\n          </div>\n          <div className=\"filter__loading-icon\">\n            <ChevronDown />\n          </div>\n        </div>\n      )}\n\n      <FormContent\n        {...formContentOptions}\n        isOpen={isOpen}\n        close={close}\n        onSubmit={toggle}\n      />\n    </div>\n  );\n};\n\nexport default Filter;\n"],
-  "mappings": "6aAAA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aAEvB,OAAOC,MAAe,sBACtB,OAAOC,MAAqB,6BAC5B,OAAOC,MAAe,sBACtB,OAAS,gBAAAC,MAAoB,0BAC7B,OAAOC,MAAiB,kBACxB,OAAOC,MAAe,uBACtB,OAAOC,MAAiB,yBACxB,OAAOC,MAAU,UAIjB,MAAMC,EAAyC,CAAC,CAC9C,mBAAAC,EACA,qBAAAC,EACA,SAAAC,EACA,MAAAC,CACF,IAAM,CACJ,MAAMC,EAAYV,EAAa,EACzBW,EAAQhB,EAAM,OAAO,IAAI,EACzB,CAACiB,EAAQC,EAAQ,CAAEC,CAAK,EAAIjB,EAAU,EAAK,EAEjD,OAAAC,EAAgBa,EAAOG,CAAK,EAC5Bf,EAAUe,CAAK,EAGbnB,EAAA,cAAC,MAAAoB,EAAA,CACC,UAAWnB,EAAW,SAAU,CAC9B,kBAAmBgB,CACrB,CAAC,EACD,IAAKD,GACDH,GAEHE,EACCf,EAAA,cAAC,OAAI,UAAU,mBACbA,EAAA,cAAC,UACC,KAAK,SACL,UAAU,iBACV,QAASkB,EACT,4BAAyB,IAEzBlB,EAAA,cAACS,EAAA,CACC,KAAMA,EAAK,MAAM,MACjB,MAAOA,EAAK,OAAO,SACnB,UAAU,uBAETK,CACH,EAEAd,EAAA,cAAC,OAAI,UAAU,8BACZY,EACCZ,EAAA,cAACS,EAAA,CACC,UAAU,2BACV,MAAOA,EAAK,OAAO,SACnB,KAAMA,EAAK,MAAM,OAEhBG,CACH,EACE,KAEMZ,EAAA,cAATiB,EAAUV,EAAgBC,EAAhB,IAAU,CACvB,CACF,CACF,EAEAR,EAAA,cAAC,OAAI,UAAU,0BACbA,EAAA,cAAC,OAAI,UAAU,+BACbA,EAAA,cAAC,OACC,MAAM,6BACN,MAAM,MACN,OAAO,KACP,QAAQ,aACR,KAAK,QAELA,EAAA,cAAC,QACC,EAAE,qJACF,KAAK,UACP,CACF,CACF,EACAA,EAAA,cAAC,OAAI,UAAU,wBACbA,EAAA,cAACQ,EAAA,IAAY,CACf,CACF,EAGFR,EAAA,cAACM,EAAAe,EAAAD,EAAA,GACKT,GADL,CAEC,OAAQM,EACR,MAAOE,EACP,SAAUD,GACZ,CACF,CAEJ,EAEA,IAAOI,EAAQZ",
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\n\nimport useToggle from '../hooks/use-toggle';\nimport useClickOutside from '../hooks/use-click-outside';\nimport useEscape from '../hooks/use-escape';\nimport { useIsMounted } from '../hooks/use-is-mounted';\nimport FormContent from '../form-content';\nimport ChevronUp from '../icons/24/arrow-up';\nimport ChevronDown from '../icons/24/arrow-down';\nimport Text from '../text';\n\nimport { Filter as Props } from './filter.types';\n\nconst Filter: React.FunctionComponent<Props> = ({\n  formContentOptions,\n  selectedOptionsCount,\n  testTags,\n  title,\n}) => {\n  const isMounted = useIsMounted();\n  const modal = React.useRef(null);\n  const [isOpen, toggle, , close] = useToggle(false);\n\n  useClickOutside(modal, close);\n  useEscape(close);\n\n  return (\n    <div\n      className={classNames('filter', {\n        'filter--clicked': isOpen,\n      })}\n      ref={modal}\n      {...testTags}\n    >\n      {isMounted ? (\n        <div className=\"filter__buttons\">\n          <button\n            type=\"button\"\n            className=\"filter__button\"\n            onClick={toggle}\n            data-test-dropdown-button\n          >\n            <Text\n              size={Text.sizes.basic}\n              theme={Text.themes.emphasis}\n              className=\"filter__button-text\"\n            >\n              {title}\n            </Text>\n\n            <div className=\"filter__button-inner-right\">\n              {selectedOptionsCount ? (\n                <Text\n                  className=\"filter__selected-options\"\n                  theme={Text.themes.emphasis}\n                  size={Text.sizes.small}\n                >\n                  {selectedOptionsCount}\n                </Text>\n              ) : null}\n\n              {isOpen ? <ChevronUp /> : <ChevronDown />}\n            </div>\n          </button>\n        </div>\n      ) : (\n        <div className=\"filter__loading-button\">\n          <div className=\"filter__loading-placeholder\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"112\"\n              height=\"22\"\n              viewBox=\"0 0 112 22\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M0 4.5C0 2.29086 1.79086 0.5 4 0.5H108C110.209 0.5 112 2.29086 112 4.5V17.5C112 19.7091 110.209 21.5 108 21.5H4C1.79086 21.5 0 19.7091 0 17.5V4.5Z\"\n                fill=\"#DCDEE0\"\n              />\n            </svg>\n          </div>\n          <div className=\"filter__loading-icon\">\n            <ChevronDown />\n          </div>\n        </div>\n      )}\n\n      <FormContent\n        {...formContentOptions}\n        isOpen={isOpen}\n        close={close}\n        onSubmit={toggle}\n      />\n    </div>\n  );\n};\n\nexport default Filter;\n"],
+  "mappings": "0bAEA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aAEvB,OAAOC,MAAe,sBACtB,OAAOC,MAAqB,6BAC5B,OAAOC,MAAe,sBACtB,OAAS,gBAAAC,MAAoB,0BAC7B,OAAOC,MAAiB,kBACxB,OAAOC,MAAe,uBACtB,OAAOC,MAAiB,yBACxB,OAAOC,MAAU,UAIjB,MAAMC,EAAyC,CAAC,CAC9C,mBAAAC,EACA,qBAAAC,EACA,SAAAC,EACA,MAAAC,CACF,IAAM,CACJ,MAAMC,EAAYV,EAAa,EACzBW,EAAQhB,EAAM,OAAO,IAAI,EACzB,CAACiB,EAAQC,EAAQ,CAAEC,CAAK,EAAIjB,EAAU,EAAK,EAEjD,OAAAC,EAAgBa,EAAOG,CAAK,EAC5Bf,EAAUe,CAAK,EAGbnB,EAAA,cAAC,MAAAoB,EAAA,CACC,UAAWnB,EAAW,SAAU,CAC9B,kBAAmBgB,CACrB,CAAC,EACD,IAAKD,GACDH,GAEHE,EACCf,EAAA,cAAC,OAAI,UAAU,mBACbA,EAAA,cAAC,UACC,KAAK,SACL,UAAU,iBACV,QAASkB,EACT,4BAAyB,IAEzBlB,EAAA,cAACS,EAAA,CACC,KAAMA,EAAK,MAAM,MACjB,MAAOA,EAAK,OAAO,SACnB,UAAU,uBAETK,CACH,EAEAd,EAAA,cAAC,OAAI,UAAU,8BACZY,EACCZ,EAAA,cAACS,EAAA,CACC,UAAU,2BACV,MAAOA,EAAK,OAAO,SACnB,KAAMA,EAAK,MAAM,OAEhBG,CACH,EACE,KAEMZ,EAAA,cAATiB,EAAUV,EAAgBC,EAAhB,IAAU,CACvB,CACF,CACF,EAEAR,EAAA,cAAC,OAAI,UAAU,0BACbA,EAAA,cAAC,OAAI,UAAU,+BACbA,EAAA,cAAC,OACC,MAAM,6BACN,MAAM,MACN,OAAO,KACP,QAAQ,aACR,KAAK,QAELA,EAAA,cAAC,QACC,EAAE,qJACF,KAAK,UACP,CACF,CACF,EACAA,EAAA,cAAC,OAAI,UAAU,wBACbA,EAAA,cAACQ,EAAA,IAAY,CACf,CACF,EAGFR,EAAA,cAACM,EAAAe,EAAAD,EAAA,GACKT,GADL,CAEC,OAAQM,EACR,MAAOE,EACP,SAAUD,GACZ,CACF,CAEJ,EAEA,IAAOI,EAAQZ",
   "names": ["React", "classNames", "useToggle", "useClickOutside", "useEscape", "useIsMounted", "FormContent", "ChevronUp", "ChevronDown", "Text", "Filter", "formContentOptions", "selectedOptionsCount", "testTags", "title", "isMounted", "modal", "isOpen", "toggle", "close", "__spreadValues", "__spreadProps", "filter_default"]
 }

package/react/filter/filter.scss

@@ -1,5 +1,5 @@
 @use '../../tokens/corner-radius';
-@use '../../tokens/light.scss';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 
 .filter {
@@ -7,8 +7,8 @@
   $breakpointSmall: 500px;
 
   border-radius: corner-radius.$s;
-  background-color: light.$surface-primary-default;
-  border: 1px solid light.$ge-divider-default;
+  background-color: var(--surface-primary-default);
+  border: 1px solid var(--ge-divider-default);
   min-width: 180px;
   display: flex;
   flex-direction: column;
@@ -22,20 +22,20 @@
     width: 100%;
 
     &:last-of-type {
-      border-bottom: 1px solid light.$ge-divider-default;
+      border-bottom: 1px solid var(--ge-divider-default);
     }
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: light.$surface-primary-hover;
-      border-color: light.$ge-divider-alternate;
+      background-color: var(--surface-primary-hover);
+      border-color: var(--ge-divider-alternate);
     }
   }
 
   &--clicked {
-    background-color: light.$surface-primary-hover;
-    border-color: light.$ge-divider-alternate;
+    background-color: var(--surface-primary-hover);
+    border-color: var(--ge-divider-alternate);
   }
 
   @media (min-width: $breakpoint) {
@@ -66,7 +66,7 @@
   }
 
   &__loading-icon {
-    color: light.$on-surface-primary-disabled;
+    color: var(--on-surface-primary-disabled);
   }
 
   &__button-text {
@@ -83,8 +83,8 @@
   &__selected-options {
     box-sizing: border-box;
     border-radius: corner-radius.$l;
-    color: light.$on-ge-on-badge-secondary;
-    background: light.$ge-badge-secondary;
+    color: var(--on-ge-on-badge-secondary);
+    background: var(--ge-badge-secondary);
     display: flex;
     justify-content: center;
     align-items: center;

package/react/flag/flag.scss

@@ -1,10 +1,10 @@
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 
 .flag {
   border-top-left-radius: 8px;
   clip-path: polygon(0 0, 100% 0, calc(100% - #{spacing.$s}) 100%, 0 100%);
-  color: light.$on-ge-on-tags-featured-default;
+  color: var(--on-ge-on-tags-featured-default);
   padding: spacing.$xxs (spacing.$s * 2) spacing.$xxs spacing.$s;
   text-transform: uppercase;
 
@@ -17,10 +17,10 @@
   }
 
   &--variant-featured {
-    background: light.$ge-tags-featured;
+    background: var(--ge-tags-featured);
   }
 
   &--variant-primary {
-    background: light.$ge-tags-primary;
+    background: var(--ge-tags-primary);
   }
 }

package/react/form-content/checkbox-category.js

@@ -1,2 +1,2 @@
-var H=Object.defineProperty,I=Object.defineProperties;var U=Object.getOwnPropertyDescriptors;var g=Object.getOwnPropertySymbols;var F=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;var N=(n,o,t)=>o in n?H(n,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[o]=t,p=(n,o)=>{for(var t in o||(o={}))F.call(o,t)&&N(n,t,o[t]);if(g)for(var t of g(o))M.call(o,t)&&N(n,t,o[t]);return n},k=(n,o)=>I(n,U(o));import*as e from"react";import m from"../text";import y from"../checkbox";import W from"../icons/24/arrow-right";import j from"../icons/24/arrow-up";import q from"../visually-hidden";import{mod as v}from"../add-bem-modifiers";import B from"../collapse";const D=({currentlySelectedValues:n=[],id:o,isSearching:t,options:f,searchResults:b=[],selectAll:r,selectAllLabel:x,setMultipleSelectedValues:w=()=>{},setSelectedValue:z=()=>{},shouldShowItems:O=!0,removeAllValues:L=()=>{}})=>{const a=e.useMemo(()=>!!r,[r]),[l]=e.useState(f.filter(s=>!s.disabled)),[h,i]=e.useState(!!a),P=s=>{z(o,s)},T=()=>{n.length!==l.length?w(o,l.map(s=>s.value)):L(o)};e.useEffect(()=>i(t?!0:!a),[a,t,b]);const _=f.every(s=>s.disabled),E=n.length>0;return e.createElement("fieldset",{className:"form-content__fieldset"},a&&e.createElement("div",{className:v("form-content__chevron-button-wrapper",{hidden:t})},r?e.createElement("div",{className:"form-content__select-all"},e.createElement(y,k(p({},r),{isLabelVisible:!1,checked:l.length>0&&n.length===l.length,onChange:T,"data-test-select-all":!0,disabled:_}))):null,e.createElement("button",{className:"form-content__chevron-button",onClick:()=>i(s=>!s),type:"button"},e.createElement(m,{elementName:"span",className:v("form-content__select-all-label",{disabled:_}),size:m.sizes.basic},x),e.createElement("div",{className:"form-content__checkbox-category-info-wrapper"},E?e.createElement(m,{className:"form-content__checkbox-category-number",size:m.sizes.interface},n.length):void 0,h?e.createElement("div",{className:"form-content__checkbox-category-icon"},e.createElement(j,null)):e.createElement("div",{className:"form-content__checkbox-category-icon"},e.createElement(W,null))))),e.createElement(B,{duration:300,animateChildren:!!a,isOpen:h},e.createElement("fieldset",{className:"form-content__fieldset"},f.map(s=>{const c=t?b.find(u=>u.key.toLowerCase()===s.value.toLowerCase()):void 0,d=n.includes(s.value),C=e.createElement("div",{key:s.value,className:v("form-content__checkbox-button",{nested:!t&&a})},e.createElement(y,p({onChange:u=>P(u.target.value),checked:d,isUnderlined:!0},s)));if(!(!d&&!c&&!O)){if(d&&t&&!c)return e.createElement(q,{key:s.value},C);if(!(!d&&t&&!c))return C}}))))};var S=D;export{S as default};
+"use client";var H=Object.defineProperty,I=Object.defineProperties;var U=Object.getOwnPropertyDescriptors;var g=Object.getOwnPropertySymbols;var F=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;var N=(n,o,t)=>o in n?H(n,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[o]=t,p=(n,o)=>{for(var t in o||(o={}))F.call(o,t)&&N(n,t,o[t]);if(g)for(var t of g(o))M.call(o,t)&&N(n,t,o[t]);return n},k=(n,o)=>I(n,U(o));import*as e from"react";import m from"../text";import y from"../checkbox";import W from"../icons/24/arrow-right";import j from"../icons/24/arrow-up";import q from"../visually-hidden";import{mod as v}from"../add-bem-modifiers";import B from"../collapse";const D=({currentlySelectedValues:n=[],id:o,isSearching:t,options:f,searchResults:b=[],selectAll:l,selectAllLabel:x,setMultipleSelectedValues:w=()=>{},setSelectedValue:z=()=>{},shouldShowItems:O=!0,removeAllValues:L=()=>{}})=>{const a=e.useMemo(()=>!!l,[l]),[r]=e.useState(f.filter(s=>!s.disabled)),[h,i]=e.useState(!!a),P=s=>{z(o,s)},T=()=>{n.length!==r.length?w(o,r.map(s=>s.value)):L(o)};e.useEffect(()=>i(t?!0:!a),[a,t,b]);const _=f.every(s=>s.disabled),E=n.length>0;return e.createElement("fieldset",{className:"form-content__fieldset"},a&&e.createElement("div",{className:v("form-content__chevron-button-wrapper",{hidden:t})},l?e.createElement("div",{className:"form-content__select-all"},e.createElement(y,k(p({},l),{isLabelVisible:!1,checked:r.length>0&&n.length===r.length,onChange:T,"data-test-select-all":!0,disabled:_}))):null,e.createElement("button",{className:"form-content__chevron-button",onClick:()=>i(s=>!s),type:"button"},e.createElement(m,{elementName:"span",className:v("form-content__select-all-label",{disabled:_}),size:m.sizes.basic},x),e.createElement("div",{className:"form-content__checkbox-category-info-wrapper"},E?e.createElement(m,{className:"form-content__checkbox-category-number",size:m.sizes.interface},n.length):void 0,h?e.createElement("div",{className:"form-content__checkbox-category-icon"},e.createElement(j,null)):e.createElement("div",{className:"form-content__checkbox-category-icon"},e.createElement(W,null))))),e.createElement(B,{duration:300,animateChildren:!!a,isOpen:h},e.createElement("fieldset",{className:"form-content__fieldset"},f.map(s=>{const c=t?b.find(u=>u.key.toLowerCase()===s.value.toLowerCase()):void 0,d=n.includes(s.value),C=e.createElement("div",{key:s.value,className:v("form-content__checkbox-button",{nested:!t&&a})},e.createElement(y,p({onChange:u=>P(u.target.value),checked:d,isUnderlined:!0},s)));if(!(!d&&!c&&!O)){if(d&&t&&!c)return e.createElement(q,{key:s.value},C);if(!(!d&&t&&!c))return C}}))))};var S=D;export{S as default};
 //# sourceMappingURL=checkbox-category.js.map

package/react/form-content/checkbox-category.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/form-content/checkbox-category.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport Text from '../text';\nimport Checkbox from '../checkbox';\n\nimport ChevronRight from '../icons/24/arrow-right';\nimport ChevronUp from '../icons/24/arrow-up';\n\nimport { CheckboxCategory as Props } from './form-content.checkbox-list.types';\nimport VisuallyHidden from '../visually-hidden';\nimport { mod } from '../add-bem-modifiers';\nimport Collapse from '../collapse';\n\nconst CheckboxCategory: React.FC<React.PropsWithChildren<Props>> = ({\n  currentlySelectedValues = [],\n  id,\n  isSearching,\n  options,\n  searchResults = [],\n  selectAll,\n  selectAllLabel,\n  setMultipleSelectedValues = () => {},\n  setSelectedValue = () => {},\n  shouldShowItems = true,\n  removeAllValues = () => {},\n}) => {\n  const isExpandable = React.useMemo(\n    () => (selectAll ? true : false),\n    [selectAll],\n  );\n  const [availableOptions] = React.useState(\n    options.filter(button => !button.disabled),\n  );\n\n  const [isOpen, setIsOpen] = React.useState(isExpandable ? true : false);\n\n  const handleChange = (value: string) => {\n    setSelectedValue(id, value);\n  };\n\n  const handleSelectAll = () => {\n    if (currentlySelectedValues.length !== availableOptions.length) {\n      setMultipleSelectedValues(\n        id,\n        availableOptions.map(button => button.value),\n      );\n    } else {\n      removeAllValues(id);\n    }\n  };\n\n  React.useEffect(\n    () =>\n      isSearching\n        ? setIsOpen(true)\n        : isExpandable\n          ? setIsOpen(false)\n          : setIsOpen(true),\n    [isExpandable, isSearching, searchResults],\n  );\n\n  const disableCategory = options.every(checkbox => checkbox.disabled);\n\n  const hasSelectedValues = currentlySelectedValues.length > 0;\n\n  return (\n    <fieldset className=\"form-content__fieldset\">\n      {isExpandable && (\n        <div\n          className={mod('form-content__chevron-button-wrapper', {\n            hidden: isSearching,\n          })}\n        >\n          {selectAll ? (\n            <div className=\"form-content__select-all\">\n              <Checkbox\n                {...selectAll}\n                isLabelVisible={false}\n                checked={\n                  availableOptions.length > 0 &&\n                  currentlySelectedValues.length === availableOptions.length\n                }\n                onChange={handleSelectAll}\n                data-test-select-all\n                disabled={disableCategory}\n              />\n            </div>\n          ) : null}\n          <button\n            className=\"form-content__chevron-button\"\n            onClick={() => setIsOpen(currentState => !currentState)}\n            type=\"button\"\n          >\n            <Text\n              elementName=\"span\"\n              className={mod('form-content__select-all-label', {\n                disabled: disableCategory,\n              })}\n              size={Text.sizes.basic}\n            >\n              {selectAllLabel}\n            </Text>\n            <div className=\"form-content__checkbox-category-info-wrapper\">\n              {hasSelectedValues ? (\n                <Text\n                  className=\"form-content__checkbox-category-number\"\n                  size={Text.sizes.interface}\n                >\n                  {currentlySelectedValues.length}\n                </Text>\n              ) : undefined}\n              {isOpen ? (\n                <div className=\"form-content__checkbox-category-icon\">\n                  <ChevronUp />\n                </div>\n              ) : (\n                <div className=\"form-content__checkbox-category-icon\">\n                  <ChevronRight />\n                </div>\n              )}\n            </div>\n          </button>\n        </div>\n      )}\n\n      <Collapse\n        duration={300}\n        animateChildren={isExpandable ? true : false}\n        isOpen={isOpen}\n      >\n        {\n          <fieldset className=\"form-content__fieldset\">\n            {options.map(checkbox => {\n              const isInSearchResults = isSearching\n                ? searchResults.find(\n                    item =>\n                      item.key.toLowerCase() === checkbox.value.toLowerCase(),\n                  )\n                : undefined;\n\n              const isSelected = currentlySelectedValues.includes(\n                checkbox.value,\n              );\n\n              const node = (\n                <div\n                  key={checkbox.value}\n                  className={mod('form-content__checkbox-button', {\n                    nested: !isSearching && isExpandable,\n                  })}\n                >\n                  <Checkbox\n                    onChange={e => handleChange(e.target.value)}\n                    checked={isSelected}\n                    isUnderlined={true}\n                    {...checkbox}\n                  />\n                </div>\n              );\n\n              if (!isSelected && !isInSearchResults && !shouldShowItems) {\n                return;\n              }\n\n              if (isSelected && isSearching && !isInSearchResults) {\n                return (\n                  <VisuallyHidden key={checkbox.value}>{node}</VisuallyHidden>\n                );\n              }\n\n              if (!isSelected && isSearching && !isInSearchResults) {\n                return;\n              }\n\n              return node;\n            })}\n          </fieldset>\n        }\n      </Collapse>\n    </fieldset>\n  );\n};\n\nexport default CheckboxCategory;\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport Text from '../text';\nimport Checkbox from '../checkbox';\n\nimport ChevronRight from '../icons/24/arrow-right';\nimport ChevronUp from '../icons/24/arrow-up';\n\nimport { CheckboxCategory as Props } from './form-content.checkbox-list.types';\nimport VisuallyHidden from '../visually-hidden';\nimport { mod } from '../add-bem-modifiers';\nimport Collapse from '../collapse';\n\nconst CheckboxCategory: React.FC<React.PropsWithChildren<Props>> = ({\n  currentlySelectedValues = [],\n  id,\n  isSearching,\n  options,\n  searchResults = [],\n  selectAll,\n  selectAllLabel,\n  setMultipleSelectedValues = () => {},\n  setSelectedValue = () => {},\n  shouldShowItems = true,\n  removeAllValues = () => {},\n}) => {\n  const isExpandable = React.useMemo(\n    () => (selectAll ? true : false),\n    [selectAll],\n  );\n  const [availableOptions] = React.useState(\n    options.filter(button => !button.disabled),\n  );\n\n  const [isOpen, setIsOpen] = React.useState(isExpandable ? true : false);\n\n  const handleChange = (value: string) => {\n    setSelectedValue(id, value);\n  };\n\n  const handleSelectAll = () => {\n    if (currentlySelectedValues.length !== availableOptions.length) {\n      setMultipleSelectedValues(\n        id,\n        availableOptions.map(button => button.value),\n      );\n    } else {\n      removeAllValues(id);\n    }\n  };\n\n  React.useEffect(\n    () =>\n      isSearching\n        ? setIsOpen(true)\n        : isExpandable\n          ? setIsOpen(false)\n          : setIsOpen(true),\n    [isExpandable, isSearching, searchResults],\n  );\n\n  const disableCategory = options.every(checkbox => checkbox.disabled);\n\n  const hasSelectedValues = currentlySelectedValues.length > 0;\n\n  return (\n    <fieldset className=\"form-content__fieldset\">\n      {isExpandable && (\n        <div\n          className={mod('form-content__chevron-button-wrapper', {\n            hidden: isSearching,\n          })}\n        >\n          {selectAll ? (\n            <div className=\"form-content__select-all\">\n              <Checkbox\n                {...selectAll}\n                isLabelVisible={false}\n                checked={\n                  availableOptions.length > 0 &&\n                  currentlySelectedValues.length === availableOptions.length\n                }\n                onChange={handleSelectAll}\n                data-test-select-all\n                disabled={disableCategory}\n              />\n            </div>\n          ) : null}\n          <button\n            className=\"form-content__chevron-button\"\n            onClick={() => setIsOpen(currentState => !currentState)}\n            type=\"button\"\n          >\n            <Text\n              elementName=\"span\"\n              className={mod('form-content__select-all-label', {\n                disabled: disableCategory,\n              })}\n              size={Text.sizes.basic}\n            >\n              {selectAllLabel}\n            </Text>\n            <div className=\"form-content__checkbox-category-info-wrapper\">\n              {hasSelectedValues ? (\n                <Text\n                  className=\"form-content__checkbox-category-number\"\n                  size={Text.sizes.interface}\n                >\n                  {currentlySelectedValues.length}\n                </Text>\n              ) : undefined}\n              {isOpen ? (\n                <div className=\"form-content__checkbox-category-icon\">\n                  <ChevronUp />\n                </div>\n              ) : (\n                <div className=\"form-content__checkbox-category-icon\">\n                  <ChevronRight />\n                </div>\n              )}\n            </div>\n          </button>\n        </div>\n      )}\n\n      <Collapse\n        duration={300}\n        animateChildren={isExpandable ? true : false}\n        isOpen={isOpen}\n      >\n        {\n          <fieldset className=\"form-content__fieldset\">\n            {options.map(checkbox => {\n              const isInSearchResults = isSearching\n                ? searchResults.find(\n                    item =>\n                      item.key.toLowerCase() === checkbox.value.toLowerCase(),\n                  )\n                : undefined;\n\n              const isSelected = currentlySelectedValues.includes(\n                checkbox.value,\n              );\n\n              const node = (\n                <div\n                  key={checkbox.value}\n                  className={mod('form-content__checkbox-button', {\n                    nested: !isSearching && isExpandable,\n                  })}\n                >\n                  <Checkbox\n                    onChange={e => handleChange(e.target.value)}\n                    checked={isSelected}\n                    isUnderlined={true}\n                    {...checkbox}\n                  />\n                </div>\n              );\n\n              if (!isSelected && !isInSearchResults && !shouldShowItems) {\n                return;\n              }\n\n              if (isSelected && isSearching && !isInSearchResults) {\n                return (\n                  <VisuallyHidden key={checkbox.value}>{node}</VisuallyHidden>\n                );\n              }\n\n              if (!isSelected && isSearching && !isInSearchResults) {\n                return;\n              }\n\n              return node;\n            })}\n          </fieldset>\n        }\n      </Collapse>\n    </fieldset>\n  );\n};\n\nexport default CheckboxCategory;\n"],
+  "mappings": "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",
   "names": ["React", "Text", "Checkbox", "ChevronRight", "ChevronUp", "VisuallyHidden", "mod", "Collapse", "CheckboxCategory", "currentlySelectedValues", "id", "isSearching", "options", "searchResults", "selectAll", "selectAllLabel", "setMultipleSelectedValues", "setSelectedValue", "shouldShowItems", "removeAllValues", "isExpandable", "availableOptions", "button", "isOpen", "setIsOpen", "handleChange", "value", "handleSelectAll", "disableCategory", "checkbox", "hasSelectedValues", "__spreadProps", "__spreadValues", "currentState", "isInSearchResults", "item", "isSelected", "node", "e", "checkbox_category_default"]
 }

package/react/form-content/form-content.checkbox-list.js

@@ -1,2 +1,2 @@
-var P=Object.defineProperty,F=Object.defineProperties;var N=Object.getOwnPropertyDescriptors;var V=Object.getOwnPropertySymbols;var M=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable;var b=(n,s,t)=>s in n?P(n,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[s]=t,h=(n,s)=>{for(var t in s||(s={}))M.call(s,t)&&b(n,t,s[t]);if(V)for(var t of V(s))v.call(s,t)&&b(n,t,s[t]);return n},S=(n,s)=>F(n,N(s));import*as r from"react";import p from"../text";import A from"./checkbox-category";import{mod as L}from"../add-bem-modifiers";import g from"./form-content.search";const B=n=>{const[s,t]=r.useState({}),{content:f,emptySearchResultDescription:x,emptySearchResultText:C}=n,[o,j]=r.useState(""),[d,O]=r.useState(),T=(l,e)=>{var m;(m=s[l])!=null&&m.includes(e)?t(i=>{const a=Object.entries(i).map(([c,u])=>[c,u.filter(E=>E!==e)]);return Object.fromEntries(a)}):t(i=>{const a=Object.entries(i).map(([c,u=[]])=>l===c?[c,[...u,e]]:[c,u]);return Object.fromEntries(a)})},_=(l,e)=>{t(m=>S(h({},m),{[l]:e}))},k=l=>{t(e=>{const m=e[l]||[],i=Object.entries(e).map(([a,c])=>[a,c.filter(u=>!m.includes(u))]);return Object.fromEntries(i)})};return r.useEffect(()=>{const l=f.flatMap(({categories:e})=>e).filter(e=>e==null?void 0:e.id).map(e=>[e==null?void 0:e.id,e==null?void 0:e.selectedValues]);t(Object.fromEntries(l))},[f]),r.createElement("div",null,"searchProps"in n?r.createElement(g,S(h({},n.searchProps),{searchResult:O,searchTerm:j})):void 0,o.length>0&&(d==null?void 0:d.length)===0&&r.createElement("div",{className:"form-content__search-no-results"},r.createElement(p,{className:"form-content__search-no-results-text",elementName:"span",theme:p.themes.emphasis},C),r.createElement("span",null,x)),f.map(({categories:l=[],key:e,header:m})=>r.createElement(r.Fragment,{key:e},m&&o.length===0?r.createElement(p,{className:L("form-content__content-title",{hidden:o.length>0}),theme:p.themes.emphasis},m):void 0,l.map(i=>r.createElement(A,h({key:i.id,searchResults:d,isSearching:o.length>0,currentlySelectedValues:s[i.id],setSelectedValue:T,setMultipleSelectedValues:_,removeAllValues:k},i))))))};var K=B;export{K as default};
+"use client";var P=Object.defineProperty,F=Object.defineProperties;var N=Object.getOwnPropertyDescriptors;var V=Object.getOwnPropertySymbols;var M=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable;var b=(n,s,t)=>s in n?P(n,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[s]=t,h=(n,s)=>{for(var t in s||(s={}))M.call(s,t)&&b(n,t,s[t]);if(V)for(var t of V(s))v.call(s,t)&&b(n,t,s[t]);return n},S=(n,s)=>F(n,N(s));import*as r from"react";import p from"../text";import A from"./checkbox-category";import{mod as L}from"../add-bem-modifiers";import g from"./form-content.search";const B=n=>{const[s,t]=r.useState({}),{content:f,emptySearchResultDescription:x,emptySearchResultText:C}=n,[o,j]=r.useState(""),[d,O]=r.useState(),T=(l,e)=>{var i;(i=s[l])!=null&&i.includes(e)?t(m=>{const a=Object.entries(m).map(([c,u])=>[c,u.filter(E=>E!==e)]);return Object.fromEntries(a)}):t(m=>{const a=Object.entries(m).map(([c,u=[]])=>l===c?[c,[...u,e]]:[c,u]);return Object.fromEntries(a)})},_=(l,e)=>{t(i=>S(h({},i),{[l]:e}))},k=l=>{t(e=>{const i=e[l]||[],m=Object.entries(e).map(([a,c])=>[a,c.filter(u=>!i.includes(u))]);return Object.fromEntries(m)})};return r.useEffect(()=>{const l=f.flatMap(({categories:e})=>e).filter(e=>e==null?void 0:e.id).map(e=>[e==null?void 0:e.id,e==null?void 0:e.selectedValues]);t(Object.fromEntries(l))},[f]),r.createElement("div",null,"searchProps"in n?r.createElement(g,S(h({},n.searchProps),{searchResult:O,searchTerm:j})):void 0,o.length>0&&(d==null?void 0:d.length)===0&&r.createElement("div",{className:"form-content__search-no-results"},r.createElement(p,{className:"form-content__search-no-results-text",elementName:"span",theme:p.themes.emphasis},C),r.createElement("span",null,x)),f.map(({categories:l=[],key:e,header:i})=>r.createElement(r.Fragment,{key:e},i&&o.length===0?r.createElement(p,{className:L("form-content__content-title",{hidden:o.length>0}),theme:p.themes.emphasis},i):void 0,l.map(m=>r.createElement(A,h({key:m.id,searchResults:d,isSearching:o.length>0,currentlySelectedValues:s[m.id],setSelectedValue:T,setMultipleSelectedValues:_,removeAllValues:k},m))))))};var K=B;export{K as default};
 //# sourceMappingURL=form-content.checkbox-list.js.map

package/react/form-content/form-content.checkbox-list.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/form-content/form-content.checkbox-list.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport Text from '../text';\n\nimport CheckboxCategory from './checkbox-category';\n\nimport { CheckboxList as Props } from './form-content.checkbox-list.types';\nimport { SearchItem } from './form-content.types';\nimport { mod } from '../add-bem-modifiers';\nimport FormContentSearch from './form-content.search';\n\nconst CheckboxList: React.FC<React.PropsWithChildren<Props>> = props => {\n  const [currentlySelectedValues, setCurrentlySelectedValues] = React.useState<\n    Record<string, string[]>\n  >({});\n  const { content, emptySearchResultDescription, emptySearchResultText } =\n    props;\n\n  const [searchTerm, setSearchTerm] = React.useState('');\n  const [searchResult, setSearchResult] = React.useState<SearchItem[]>();\n\n  const updateCurrentlySelectedValues = (id: string, value: string) => {\n    if (currentlySelectedValues[id]?.includes(value)) {\n      setCurrentlySelectedValues(prevState => {\n        const updatedValues = Object.entries(prevState).map(([id, values]) => [\n          id,\n          values.filter(option => option !== value),\n        ]);\n        return Object.fromEntries(updatedValues);\n      });\n    } else {\n      setCurrentlySelectedValues(prevState => {\n        const updatedValues = Object.entries(prevState).map(\n          ([filterGroupId, values = []]) => {\n            if (id === filterGroupId) {\n              return [filterGroupId, [...values, value]];\n            }\n\n            return [filterGroupId, values];\n          },\n        );\n        return Object.fromEntries(updatedValues);\n      });\n    }\n  };\n\n  const updateMultipleSelectedValues = (id: string, values: string[]) => {\n    setCurrentlySelectedValues(prevState => ({\n      ...prevState,\n      [id]: values,\n    }));\n  };\n\n  const removeAllValuesById = (id: string) => {\n    setCurrentlySelectedValues(prevState => {\n      const selectedValues = prevState[id] || [];\n      const updatedValues = Object.entries(prevState).map(([id, values]) => [\n        id,\n        values.filter(option => !selectedValues.includes(option)),\n      ]);\n      return Object.fromEntries(updatedValues);\n    });\n  };\n\n  React.useEffect(() => {\n    const selectedValues = content\n      .flatMap(({ categories }) => categories)\n      .filter(category => category?.id)\n      .map(category => [category?.id, category?.selectedValues]);\n    setCurrentlySelectedValues(Object.fromEntries(selectedValues));\n  }, [content]);\n\n  return (\n    <div>\n      {'searchProps' in props ? (\n        <FormContentSearch\n          {...props.searchProps}\n          searchResult={setSearchResult}\n          searchTerm={setSearchTerm}\n        />\n      ) : undefined}\n\n      {searchTerm.length > 0 && searchResult?.length === 0 && (\n        <div className=\"form-content__search-no-results\">\n          <Text\n            className=\"form-content__search-no-results-text\"\n            elementName=\"span\"\n            theme={Text.themes.emphasis}\n          >\n            {emptySearchResultText}\n          </Text>\n          <span>{emptySearchResultDescription}</span>\n        </div>\n      )}\n\n      {content.map(({ categories = [], key, header }) => (\n        <React.Fragment key={key}>\n          {header && searchTerm.length === 0 ? (\n            <Text\n              className={mod('form-content__content-title', {\n                hidden: searchTerm.length > 0,\n              })}\n              theme={Text.themes.emphasis}\n            >\n              {header}\n            </Text>\n          ) : undefined}\n\n          {categories.map(category => (\n            <CheckboxCategory\n              key={category.id}\n              searchResults={searchResult}\n              isSearching={searchTerm.length > 0}\n              currentlySelectedValues={currentlySelectedValues[category.id]}\n              setSelectedValue={updateCurrentlySelectedValues}\n              setMultipleSelectedValues={updateMultipleSelectedValues}\n              removeAllValues={removeAllValuesById}\n              {...category}\n            />\n          ))}\n        </React.Fragment>\n      ))}\n    </div>\n  );\n};\n\nexport default CheckboxList;\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport Text from '../text';\n\nimport CheckboxCategory from './checkbox-category';\n\nimport { CheckboxList as Props } from './form-content.checkbox-list.types';\nimport { SearchItem } from './form-content.types';\nimport { mod } from '../add-bem-modifiers';\nimport FormContentSearch from './form-content.search';\n\nconst CheckboxList: React.FC<React.PropsWithChildren<Props>> = props => {\n  const [currentlySelectedValues, setCurrentlySelectedValues] = React.useState<\n    Record<string, string[]>\n  >({});\n  const { content, emptySearchResultDescription, emptySearchResultText } =\n    props;\n\n  const [searchTerm, setSearchTerm] = React.useState('');\n  const [searchResult, setSearchResult] = React.useState<SearchItem[]>();\n\n  const updateCurrentlySelectedValues = (id: string, value: string) => {\n    if (currentlySelectedValues[id]?.includes(value)) {\n      setCurrentlySelectedValues(prevState => {\n        const updatedValues = Object.entries(prevState).map(([id, values]) => [\n          id,\n          values.filter(option => option !== value),\n        ]);\n        return Object.fromEntries(updatedValues);\n      });\n    } else {\n      setCurrentlySelectedValues(prevState => {\n        const updatedValues = Object.entries(prevState).map(\n          ([filterGroupId, values = []]) => {\n            if (id === filterGroupId) {\n              return [filterGroupId, [...values, value]];\n            }\n\n            return [filterGroupId, values];\n          },\n        );\n        return Object.fromEntries(updatedValues);\n      });\n    }\n  };\n\n  const updateMultipleSelectedValues = (id: string, values: string[]) => {\n    setCurrentlySelectedValues(prevState => ({\n      ...prevState,\n      [id]: values,\n    }));\n  };\n\n  const removeAllValuesById = (id: string) => {\n    setCurrentlySelectedValues(prevState => {\n      const selectedValues = prevState[id] || [];\n      const updatedValues = Object.entries(prevState).map(([id, values]) => [\n        id,\n        values.filter(option => !selectedValues.includes(option)),\n      ]);\n      return Object.fromEntries(updatedValues);\n    });\n  };\n\n  React.useEffect(() => {\n    const selectedValues = content\n      .flatMap(({ categories }) => categories)\n      .filter(category => category?.id)\n      .map(category => [category?.id, category?.selectedValues]);\n    setCurrentlySelectedValues(Object.fromEntries(selectedValues));\n  }, [content]);\n\n  return (\n    <div>\n      {'searchProps' in props ? (\n        <FormContentSearch\n          {...props.searchProps}\n          searchResult={setSearchResult}\n          searchTerm={setSearchTerm}\n        />\n      ) : undefined}\n\n      {searchTerm.length > 0 && searchResult?.length === 0 && (\n        <div className=\"form-content__search-no-results\">\n          <Text\n            className=\"form-content__search-no-results-text\"\n            elementName=\"span\"\n            theme={Text.themes.emphasis}\n          >\n            {emptySearchResultText}\n          </Text>\n          <span>{emptySearchResultDescription}</span>\n        </div>\n      )}\n\n      {content.map(({ categories = [], key, header }) => (\n        <React.Fragment key={key}>\n          {header && searchTerm.length === 0 ? (\n            <Text\n              className={mod('form-content__content-title', {\n                hidden: searchTerm.length > 0,\n              })}\n              theme={Text.themes.emphasis}\n            >\n              {header}\n            </Text>\n          ) : undefined}\n\n          {categories.map(category => (\n            <CheckboxCategory\n              key={category.id}\n              searchResults={searchResult}\n              isSearching={searchTerm.length > 0}\n              currentlySelectedValues={currentlySelectedValues[category.id]}\n              setSelectedValue={updateCurrentlySelectedValues}\n              setMultipleSelectedValues={updateMultipleSelectedValues}\n              removeAllValues={removeAllValuesById}\n              {...category}\n            />\n          ))}\n        </React.Fragment>\n      ))}\n    </div>\n  );\n};\n\nexport default CheckboxList;\n"],
+  "mappings": "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",
   "names": ["React", "Text", "CheckboxCategory", "mod", "FormContentSearch", "CheckboxList", "props", "currentlySelectedValues", "setCurrentlySelectedValues", "content", "emptySearchResultDescription", "emptySearchResultText", "searchTerm", "setSearchTerm", "searchResult", "setSearchResult", "updateCurrentlySelectedValues", "id", "value", "_a", "prevState", "updatedValues", "values", "option", "filterGroupId", "updateMultipleSelectedValues", "__spreadProps", "__spreadValues", "removeAllValuesById", "selectedValues", "categories", "category", "key", "header", "form_content_checkbox_list_default"]
 }

package/react/form-content/form-content.radio-list.js

@@ -1,2 +1,2 @@
-var v=Object.defineProperty,T=Object.defineProperties;var g=Object.getOwnPropertyDescriptors;var d=Object.getOwnPropertySymbols;var C=Object.prototype.hasOwnProperty,L=Object.prototype.propertyIsEnumerable;var h=(t,e,r)=>e in t?v(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,i=(t,e)=>{for(var r in e||(e={}))C.call(e,r)&&h(t,r,e[r]);if(d)for(var r of d(e))L.call(e,r)&&h(t,r,e[r]);return t},m=(t,e)=>T(t,g(e));import*as s from"react";import P from"../radio";import u from"../text";import _ from"./form-content.search";import k from"classnames";const x=t=>{const[e,r]=s.useState(""),[n,f]=s.useState();return s.createElement("div",null,"searchProps"in t?s.createElement(_,m(i({},t.searchProps),{searchResult:f,searchTerm:r})):void 0,t.categories.map((o,l)=>s.createElement("div",{key:l},o.header&&o.options.length>0&&e.length===0?s.createElement(u,{className:k("form-content__group-title",{hidden:e.length>0}),theme:u.themes.emphasis},o.header):void 0,o.options.map((a,c)=>{const p=e.length>0?n==null?void 0:n.find(S=>S.key.toLowerCase()===a.value.toLowerCase()):void 0;if(!(e.length>0&&!p))return s.createElement("div",{key:c,className:"form-content__radio-button"},s.createElement(P,m(i({},a),{isUnderline:!0})))}))))};var q=x;export{q as default};
+"use client";var v=Object.defineProperty,T=Object.defineProperties;var g=Object.getOwnPropertyDescriptors;var d=Object.getOwnPropertySymbols;var C=Object.prototype.hasOwnProperty,L=Object.prototype.propertyIsEnumerable;var h=(t,e,r)=>e in t?v(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,i=(t,e)=>{for(var r in e||(e={}))C.call(e,r)&&h(t,r,e[r]);if(d)for(var r of d(e))L.call(e,r)&&h(t,r,e[r]);return t},m=(t,e)=>T(t,g(e));import*as s from"react";import P from"../radio";import u from"../text";import _ from"./form-content.search";import k from"classnames";const x=t=>{const[e,r]=s.useState(""),[n,l]=s.useState();return s.createElement("div",null,"searchProps"in t?s.createElement(_,m(i({},t.searchProps),{searchResult:l,searchTerm:r})):void 0,t.categories.map((o,c)=>s.createElement("div",{key:c},o.header&&o.options.length>0&&e.length===0?s.createElement(u,{className:k("form-content__group-title",{hidden:e.length>0}),theme:u.themes.emphasis},o.header):void 0,o.options.map((a,f)=>{const p=e.length>0?n==null?void 0:n.find(S=>S.key.toLowerCase()===a.value.toLowerCase()):void 0;if(!(e.length>0&&!p))return s.createElement("div",{key:f,className:"form-content__radio-button"},s.createElement(P,m(i({},a),{isUnderline:!0})))}))))};var q=x;export{q as default};
 //# sourceMappingURL=form-content.radio-list.js.map

package/react/form-content/form-content.radio-list.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/form-content/form-content.radio-list.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport Radio from '../radio';\nimport Text from '../text';\nimport FormContentSearch from './form-content.search';\n\nimport { RadioList as Props, SearchItem } from './form-content.types';\nimport classNames from 'classnames';\n\nconst RadioList: React.FC<Props> = props => {\n  const [searchTerm, setSearchTerm] = React.useState('');\n  const [searchResult, setSearchResult] = React.useState<SearchItem[]>();\n  return (\n    <div>\n      {'searchProps' in props ? (\n        <FormContentSearch\n          {...props.searchProps}\n          searchResult={setSearchResult}\n          searchTerm={setSearchTerm}\n        />\n      ) : undefined}\n      {props.categories.map((category, categoryIndex) => (\n        <div key={categoryIndex}>\n          {category.header &&\n          category.options.length > 0 &&\n          searchTerm.length === 0 ? (\n            <Text\n              className={classNames('form-content__group-title', {\n                hidden: searchTerm.length > 0,\n              })}\n              theme={Text.themes.emphasis}\n            >\n              {category.header}\n            </Text>\n          ) : undefined}\n          {category.options.map((radio, i) => {\n            const isInSearchResults =\n              searchTerm.length > 0\n                ? searchResult?.find(\n                    item =>\n                      item.key.toLowerCase() === radio.value.toLowerCase(),\n                  )\n                : undefined;\n\n            if (searchTerm.length > 0 && !isInSearchResults) return;\n\n            return (\n              <div key={i} className=\"form-content__radio-button\">\n                <Radio {...radio} isUnderline={true} />\n              </div>\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default RadioList;\n"],
-  "mappings": "6aAAA,UAAYA,MAAW,QACvB,OAAOC,MAAW,WAClB,OAAOC,MAAU,UACjB,OAAOC,MAAuB,wBAG9B,OAAOC,MAAgB,aAEvB,MAAMC,EAA6BC,GAAS,CAC1C,KAAM,CAACC,EAAYC,CAAa,EAAIR,EAAM,SAAS,EAAE,EAC/C,CAACS,EAAcC,CAAe,EAAIV,EAAM,SAAuB,EACrE,OACEA,EAAA,cAAC,WACE,gBAAiBM,EAChBN,EAAA,cAACG,EAAAQ,EAAAC,EAAA,GACKN,EAAM,aADX,CAEC,aAAcI,EACd,WAAYF,GACd,EACE,OACHF,EAAM,WAAW,IAAI,CAACO,EAAUC,IAC/Bd,EAAA,cAAC,OAAI,IAAKc,GACPD,EAAS,QACVA,EAAS,QAAQ,OAAS,GAC1BN,EAAW,SAAW,EACpBP,EAAA,cAACE,EAAA,CACC,UAAWE,EAAW,4BAA6B,CACjD,OAAQG,EAAW,OAAS,CAC9B,CAAC,EACD,MAAOL,EAAK,OAAO,UAElBW,EAAS,MACZ,EACE,OACHA,EAAS,QAAQ,IAAI,CAACE,EAAOC,IAAM,CAClC,MAAMC,EACJV,EAAW,OAAS,EAChBE,GAAA,YAAAA,EAAc,KACZS,GACEA,EAAK,IAAI,YAAY,IAAMH,EAAM,MAAM,YAAY,GAEvD,OAEN,GAAI,EAAAR,EAAW,OAAS,GAAK,CAACU,GAE9B,OACEjB,EAAA,cAAC,OAAI,IAAKgB,EAAG,UAAU,8BACrBhB,EAAA,cAACC,EAAAU,EAAAC,EAAA,GAAUG,GAAV,CAAiB,YAAa,IAAM,CACvC,CAEJ,CAAC,CACH,CACD,CACH,CAEJ,EAEA,IAAOI,EAAQd",
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport Radio from '../radio';\nimport Text from '../text';\nimport FormContentSearch from './form-content.search';\n\nimport { RadioList as Props, SearchItem } from './form-content.types';\nimport classNames from 'classnames';\n\nconst RadioList: React.FC<Props> = props => {\n  const [searchTerm, setSearchTerm] = React.useState('');\n  const [searchResult, setSearchResult] = React.useState<SearchItem[]>();\n  return (\n    <div>\n      {'searchProps' in props ? (\n        <FormContentSearch\n          {...props.searchProps}\n          searchResult={setSearchResult}\n          searchTerm={setSearchTerm}\n        />\n      ) : undefined}\n      {props.categories.map((category, categoryIndex) => (\n        <div key={categoryIndex}>\n          {category.header &&\n          category.options.length > 0 &&\n          searchTerm.length === 0 ? (\n            <Text\n              className={classNames('form-content__group-title', {\n                hidden: searchTerm.length > 0,\n              })}\n              theme={Text.themes.emphasis}\n            >\n              {category.header}\n            </Text>\n          ) : undefined}\n          {category.options.map((radio, i) => {\n            const isInSearchResults =\n              searchTerm.length > 0\n                ? searchResult?.find(\n                    item =>\n                      item.key.toLowerCase() === radio.value.toLowerCase(),\n                  )\n                : undefined;\n\n            if (searchTerm.length > 0 && !isInSearchResults) return;\n\n            return (\n              <div key={i} className=\"form-content__radio-button\">\n                <Radio {...radio} isUnderline={true} />\n              </div>\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default RadioList;\n"],
+  "mappings": "0bAEA,UAAYA,MAAW,QACvB,OAAOC,MAAW,WAClB,OAAOC,MAAU,UACjB,OAAOC,MAAuB,wBAG9B,OAAOC,MAAgB,aAEvB,MAAMC,EAA6BC,GAAS,CAC1C,KAAM,CAACC,EAAYC,CAAa,EAAIR,EAAM,SAAS,EAAE,EAC/C,CAACS,EAAcC,CAAe,EAAIV,EAAM,SAAuB,EACrE,OACEA,EAAA,cAAC,WACE,gBAAiBM,EAChBN,EAAA,cAACG,EAAAQ,EAAAC,EAAA,GACKN,EAAM,aADX,CAEC,aAAcI,EACd,WAAYF,GACd,EACE,OACHF,EAAM,WAAW,IAAI,CAACO,EAAUC,IAC/Bd,EAAA,cAAC,OAAI,IAAKc,GACPD,EAAS,QACVA,EAAS,QAAQ,OAAS,GAC1BN,EAAW,SAAW,EACpBP,EAAA,cAACE,EAAA,CACC,UAAWE,EAAW,4BAA6B,CACjD,OAAQG,EAAW,OAAS,CAC9B,CAAC,EACD,MAAOL,EAAK,OAAO,UAElBW,EAAS,MACZ,EACE,OACHA,EAAS,QAAQ,IAAI,CAACE,EAAOC,IAAM,CAClC,MAAMC,EACJV,EAAW,OAAS,EAChBE,GAAA,YAAAA,EAAc,KACZS,GACEA,EAAK,IAAI,YAAY,IAAMH,EAAM,MAAM,YAAY,GAEvD,OAEN,GAAI,EAAAR,EAAW,OAAS,GAAK,CAACU,GAE9B,OACEjB,EAAA,cAAC,OAAI,IAAKgB,EAAG,UAAU,8BACrBhB,EAAA,cAACC,EAAAU,EAAAC,EAAA,GAAUG,GAAV,CAAiB,YAAa,IAAM,CACvC,CAEJ,CAAC,CACH,CACD,CACH,CAEJ,EAEA,IAAOI,EAAQd",
   "names": ["React", "Radio", "Text", "FormContentSearch", "classNames", "RadioList", "props", "searchTerm", "setSearchTerm", "searchResult", "setSearchResult", "__spreadProps", "__spreadValues", "category", "categoryIndex", "radio", "i", "isInSearchResults", "item", "form_content_radio_list_default"]
 }

package/react/form-content/form-content.scss

@@ -1,6 +1,6 @@
 @use '../../tokens/corner-radius';
 @use '../../tokens/elevation';
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 
 .form-content {
@@ -14,7 +14,7 @@
       height: 100%;
       top: 0;
       left: 0;
-      background: light.$fixed-background-primary-default;
+      background: var(--fixed-background-primary-default);
       opacity: 0.2;
       z-index: 400;
     }
@@ -34,7 +34,7 @@
       bottom: 0;
       right: 0;
 
-      background-color: light.$surface-primary-default;
+      background-color: var(--surface-primary-default);
       z-index: 500;
 
       border-radius: corner-radius.$s;
@@ -76,7 +76,7 @@
     display: grid;
     grid-template-columns: 1fr auto;
     align-items: center;
-    border-bottom: 1px solid light.$ge-divider-default;
+    border-bottom: 1px solid var(--ge-divider-default);
     padding: spacing.$s;
 
     @media (min-width: $breakpoint) {
@@ -103,7 +103,7 @@
   }
 
   &__modal-action-wrapper {
-    border-top: 1px solid light.$ge-divider-default;
+    border-top: 1px solid var(--ge-divider-default);
     padding: spacing.$s;
   }
 
@@ -152,7 +152,7 @@
     display: flex;
     align-items: center;
     margin: 0 spacing.$l;
-    border-bottom: 1px solid light.$ge-divider-default;
+    border-bottom: 1px solid var(--ge-divider-default);
     line-height: 0;
 
     &--hidden {
@@ -167,7 +167,7 @@
     background: none;
     width: 100%;
     margin-left: spacing.$xs;
-    color: light.$on-surface-primary-default;
+    color: var(--on-surface-primary-default);
     border: none;
     padding: spacing.$s 0;
     padding-top: calc(spacing.$s + 2px);
@@ -180,7 +180,7 @@
     text-align: left;
 
     &--disabled {
-      color: light.$on-surface-primary-default;
+      color: var(--on-surface-primary-default);
     }
   }
 
@@ -195,8 +195,8 @@
 
   &__checkbox-category-number {
     border-radius: 100%;
-    color: light.$on-ge-on-tags-primary-default;
-    background: light.$ge-tags-primary;
+    color: var(--on-ge-on-tags-primary-default);
+    background: var(--ge-tags-primary);
     width: 24px;
     display: flex;
     justify-content: center;
@@ -224,7 +224,7 @@
 
   &__range-line {
     width: 21px;
-    border-bottom: 1px solid light.$ge-divider-alternate;
+    border-bottom: 1px solid var(--ge-divider-alternate);
     margin: 0 spacing.$m;
   }
 

package/react/form-content/form-content.search.js

@@ -1,2 +1,2 @@
-var d=Object.defineProperty,g=Object.defineProperties;var C=Object.getOwnPropertyDescriptors;var a=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable;var m=(s,e,r)=>e in s?d(s,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):s[e]=r,i=(s,e)=>{for(var r in e||(e={}))b.call(e,r)&&m(s,r,e[r]);if(a)for(var r of a(e))v.call(e,r)&&m(s,r,e[r]);return s},h=(s,e)=>g(s,C(e));import I from"fuzzy-search";import*as t from"react";import u from"../search";const M=({searchInput:s,searchKeys:e,searchDataset:r,searchTerm:p=()=>{},searchResult:f=()=>{}})=>{const[o,l]=t.useState(""),S={sort:!0},n=t.useMemo(()=>{const c=new I(r,e,S);return F=>c.search(F)},[r]),z=t.useMemo(()=>o.length>0?n(o):[],[n,o]);return t.useEffect(()=>{f(z),p(o)}),t.createElement("div",{className:"form-content__search"},t.createElement(u,h(i({},s),{inputSize:u.inputSizes.small,isLabelVisible:!1,onChangeFunc:c=>l(c)})))};var L=M;export{L as default};
+"use client";var d=Object.defineProperty,g=Object.defineProperties;var C=Object.getOwnPropertyDescriptors;var a=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable;var m=(s,e,r)=>e in s?d(s,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):s[e]=r,i=(s,e)=>{for(var r in e||(e={}))b.call(e,r)&&m(s,r,e[r]);if(a)for(var r of a(e))v.call(e,r)&&m(s,r,e[r]);return s},u=(s,e)=>g(s,C(e));import I from"fuzzy-search";import*as t from"react";import h from"../search";const M=({searchInput:s,searchKeys:e,searchDataset:r,searchTerm:l=()=>{},searchResult:p=()=>{}})=>{const[o,f]=t.useState(""),S={sort:!0},n=t.useMemo(()=>{const c=new I(r,e,S);return F=>c.search(F)},[r]),z=t.useMemo(()=>o.length>0?n(o):[],[n,o]);return t.useEffect(()=>{p(z),l(o)}),t.createElement("div",{className:"form-content__search"},t.createElement(h,u(i({},s),{inputSize:h.inputSizes.small,isLabelVisible:!1,onChangeFunc:c=>f(c)})))};var L=M;export{L as default};
 //# sourceMappingURL=form-content.search.js.map

package/react/form-content/form-content.search.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/form-content/form-content.search.tsx"],
-  "sourcesContent": ["import FuzzySearch from 'fuzzy-search';\nimport * as React from 'react';\nimport Search from '../search';\nimport { Search as Props, SearchItem } from './form-content.types';\n\nconst FormContentSearch: React.FC<Props> = ({\n  searchInput,\n  searchKeys,\n  searchDataset,\n  searchTerm = () => {},\n  searchResult = () => {},\n}) => {\n  const [term, setTerm] = React.useState('');\n  const searchOptions = { sort: true };\n\n  const search = React.useMemo(() => {\n    const searcher = new FuzzySearch<SearchItem>(\n      searchDataset,\n      searchKeys,\n      searchOptions,\n    );\n    return (term: string) => searcher.search(term);\n  }, [searchDataset]);\n\n  const searchResults = React.useMemo(\n    () => (term.length > 0 ? search(term) : []),\n    [search, term],\n  );\n\n  React.useEffect(() => {\n    searchResult(searchResults);\n    searchTerm(term);\n  });\n\n  return (\n    <div className=\"form-content__search\">\n      <Search\n        {...searchInput}\n        inputSize={Search.inputSizes.small}\n        isLabelVisible={false}\n        onChangeFunc={string => setTerm(string)}\n      />\n    </div>\n  );\n};\n\nexport default FormContentSearch;\n"],
-  "mappings": "6aAAA,OAAOA,MAAiB,eACxB,UAAYC,MAAW,QACvB,OAAOC,MAAY,YAGnB,MAAMC,EAAqC,CAAC,CAC1C,YAAAC,EACA,WAAAC,EACA,cAAAC,EACA,WAAAC,EAAa,IAAM,CAAC,EACpB,aAAAC,EAAe,IAAM,CAAC,CACxB,IAAM,CACJ,KAAM,CAACC,EAAMC,CAAO,EAAIT,EAAM,SAAS,EAAE,EACnCU,EAAgB,CAAE,KAAM,EAAK,EAE7BC,EAASX,EAAM,QAAQ,IAAM,CACjC,MAAMY,EAAW,IAAIb,EACnBM,EACAD,EACAM,CACF,EACA,OAAQF,GAAiBI,EAAS,OAAOJ,CAAI,CAC/C,EAAG,CAACH,CAAa,CAAC,EAEZQ,EAAgBb,EAAM,QAC1B,IAAOQ,EAAK,OAAS,EAAIG,EAAOH,CAAI,EAAI,CAAC,EACzC,CAACG,EAAQH,CAAI,CACf,EAEA,OAAAR,EAAM,UAAU,IAAM,CACpBO,EAAaM,CAAa,EAC1BP,EAAWE,CAAI,CACjB,CAAC,EAGCR,EAAA,cAAC,OAAI,UAAU,wBACbA,EAAA,cAACC,EAAAa,EAAAC,EAAA,GACKZ,GADL,CAEC,UAAWF,EAAO,WAAW,MAC7B,eAAgB,GAChB,aAAce,GAAUP,EAAQO,CAAM,GACxC,CACF,CAEJ,EAEA,IAAOC,EAAQf",
+  "sourcesContent": ["'use client';\n\nimport FuzzySearch from 'fuzzy-search';\nimport * as React from 'react';\nimport Search from '../search';\nimport { Search as Props, SearchItem } from './form-content.types';\n\nconst FormContentSearch: React.FC<Props> = ({\n  searchInput,\n  searchKeys,\n  searchDataset,\n  searchTerm = () => {},\n  searchResult = () => {},\n}) => {\n  const [term, setTerm] = React.useState('');\n  const searchOptions = { sort: true };\n\n  const search = React.useMemo(() => {\n    const searcher = new FuzzySearch<SearchItem>(\n      searchDataset,\n      searchKeys,\n      searchOptions,\n    );\n    return (term: string) => searcher.search(term);\n  }, [searchDataset]);\n\n  const searchResults = React.useMemo(\n    () => (term.length > 0 ? search(term) : []),\n    [search, term],\n  );\n\n  React.useEffect(() => {\n    searchResult(searchResults);\n    searchTerm(term);\n  });\n\n  return (\n    <div className=\"form-content__search\">\n      <Search\n        {...searchInput}\n        inputSize={Search.inputSizes.small}\n        isLabelVisible={false}\n        onChangeFunc={string => setTerm(string)}\n      />\n    </div>\n  );\n};\n\nexport default FormContentSearch;\n"],
+  "mappings": "0bAEA,OAAOA,MAAiB,eACxB,UAAYC,MAAW,QACvB,OAAOC,MAAY,YAGnB,MAAMC,EAAqC,CAAC,CAC1C,YAAAC,EACA,WAAAC,EACA,cAAAC,EACA,WAAAC,EAAa,IAAM,CAAC,EACpB,aAAAC,EAAe,IAAM,CAAC,CACxB,IAAM,CACJ,KAAM,CAACC,EAAMC,CAAO,EAAIT,EAAM,SAAS,EAAE,EACnCU,EAAgB,CAAE,KAAM,EAAK,EAE7BC,EAASX,EAAM,QAAQ,IAAM,CACjC,MAAMY,EAAW,IAAIb,EACnBM,EACAD,EACAM,CACF,EACA,OAAQF,GAAiBI,EAAS,OAAOJ,CAAI,CAC/C,EAAG,CAACH,CAAa,CAAC,EAEZQ,EAAgBb,EAAM,QAC1B,IAAOQ,EAAK,OAAS,EAAIG,EAAOH,CAAI,EAAI,CAAC,EACzC,CAACG,EAAQH,CAAI,CACf,EAEA,OAAAR,EAAM,UAAU,IAAM,CACpBO,EAAaM,CAAa,EAC1BP,EAAWE,CAAI,CACjB,CAAC,EAGCR,EAAA,cAAC,OAAI,UAAU,wBACbA,EAAA,cAACC,EAAAa,EAAAC,EAAA,GACKZ,GADL,CAEC,UAAWF,EAAO,WAAW,MAC7B,eAAgB,GAChB,aAAce,GAAUP,EAAQO,CAAM,GACxC,CACF,CAEJ,EAEA,IAAOC,EAAQf",
   "names": ["FuzzySearch", "React", "Search", "FormContentSearch", "searchInput", "searchKeys", "searchDataset", "searchTerm", "searchResult", "term", "setTerm", "searchOptions", "search", "searcher", "searchResults", "__spreadProps", "__spreadValues", "string", "form_content_search_default"]
 }

package/react/link/link.scss

@@ -1,5 +1,5 @@
 @use '../../tokens/spacing';
-@use '../../tokens/light';
+@use '../../tokens/colours';
 
 .link {
   display: inline-flex;
@@ -7,36 +7,36 @@
   gap: spacing.$xs;
 
   &--background-default {
-    color: light.$on-buttons-on-link-default;
+    color: var(--on-buttons-on-link-default);
     @media (hover: hover) {
       &:hover {
-        color: light.$on-buttons-on-link-hover;
+        color: var(--on-buttons-on-link-hover);
       }
     }
 
     &-orange {
-      color: light.$on-buttons-on-action-default;
+      color: var(--on-buttons-on-action-default);
       @media (hover: hover) {
         &:hover {
-          color: light.$on-buttons-on-action-pressed;
+          color: var(--on-buttons-on-action-pressed);
         }
       }
     }
   }
 
   &--background-fixed {
-    color: light.$on-buttons-on-fixed-link-default;
+    color: var(--on-buttons-on-fixed-link-default);
     @media (hover: hover) {
       &:hover {
-        color: light.$on-buttons-on-fixed-link-hover;
+        color: var(--on-buttons-on-fixed-link-hover);
       }
     }
 
     &-orange {
-      color: light.$on-buttons-on-fixed-action-default;
+      color: var(--on-buttons-on-fixed-action-default);
       @media (hover: hover) {
         &:hover {
-          color: light.$on-buttons-on-fixed-action-pressed;
+          color: var(--on-buttons-on-fixed-action-pressed);
         }
       }
     }

package/react/link-card/link-card.scss

@@ -1,14 +1,14 @@
 @use '../../tokens/corner-radius';
 @use '../../tokens/elevation';
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 
 .link-card {
   @include elevation.level(2);
 
-  background: light.$surface-primary-default;
+  background: var(--surface-primary-default);
   border-radius: corner-radius.$s;
-  color:  light.$on-surface-primary-default;
+  color:  var(--on-surface-primary-default);
   display: grid;
   gap: spacing.$s;
   grid-template-columns: [first] [second];
@@ -17,12 +17,12 @@
 
   @media (hover: hover) {
     &:hover {
-      background: light.$surface-primary-hover;
+      background: var(--surface-primary-hover);
     }
   }
 
   &__title {
-    color: light.$on-surface-primary-default;
+    color: var(--on-surface-primary-default);
     grid-column: 1;
   }
 

package/react/message/message.scss

@@ -1,10 +1,10 @@
 @use '../../tokens/corner-radius';
 @use '../../tokens/elevation';
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 
 .message {
-  background: light.$surface-primary-default;
+  background: var(--surface-primary-default);
   border-radius: corner-radius.$s;
   display: grid;
   grid-template-columns: 1fr;
@@ -20,7 +20,7 @@
     left: 0;
     height: 100%;
     width: spacing.$s;
-    background: light.$ge-signal-neutral;
+    background: var(--ge-signal-neutral);
   }
 
   @media (min-width: 600px) {
@@ -33,7 +33,7 @@
 
   &--inline,
   &--mini {
-    border: 1px solid light.$ge-border-default;
+    border: 1px solid var(--ge-border-default);
   }
 
   &--mini {
@@ -46,31 +46,31 @@
 
   &--theme-error {
     &::before {
-      background: light.$ge-signal-error;
+      background: var(--ge-signal-error);
     }
 
     .message__link {
-      color: light.$on-surface-error;
+      color: var(--on-surface-error);
     }
   }
 
   &--theme-warning {
     &::before {
-      background: light.$ge-signal-warning;
+      background: var(--ge-signal-warning);
     }
 
     .message__link {
-      color: light.$on-surface-warning;
+      color: var(--on-surface-warning);
     }
   }
 
   &--theme-success {
     &::before {
-      background: light.$ge-signal-success;
+      background: var(--ge-signal-success);
     }
 
     .message__link {
-      color: light.$on-surface-success;
+      color: var(--on-surface-success);
     }
   }