@sats-group/ui-lib 81.0.1 → 81.2.0

package/react/search/search.scss

@@ -1,6 +1,6 @@
 @use '../../tokens/corner-radius';
 @use '../../tokens/font-names';
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 @use '../../tokens/elevation';
 
@@ -35,11 +35,11 @@
   }
 
   &__loading-input {
-    background-color: light.$ge-skeleton-default;
+    background-color: var(--ge-skeleton-default);
     border-radius: spacing.$m;
 
     &--fixed {
-      background-color: light.$on-fixed-background-primary-disabled;
+      background-color: var(--on-fixed-background-primary-disabled);
     }
 
     &--small {
@@ -52,33 +52,33 @@
 
   &__loading-extra {
     border-radius: corner-radius.$s;
-    color: light.$ge-skeleton-default;
-    background-color: light.$ge-skeleton-default;
+    color: var(--ge-skeleton-default);
+    background-color: var(--ge-skeleton-default);
     width: fit-content;
 
     &--fixed {
-      background-color: light.$on-fixed-background-primary-disabled;
+      background-color: var(--on-fixed-background-primary-disabled);
     }
   }
 
   &__header {
     &--variant-fixed {
-      color: light.$on-fixed-surface-secondary-default;
+      color: var(--on-fixed-surface-secondary-default);
     }
   }
 
   &__input-wrapper {
     display: flex;
     justify-content: space-evenly;
-    border: 1px solid light.$ge-border-default;
+    border: 1px solid var(--ge-border-default);
 
     &--variant-default {
-      background-color: light.$surface-primary-default;
+      background-color: var(--surface-primary-default);
     }
 
     &--variant-fixed {
-      color: light.$on-fixed-surface-secondary-default;
-      background-color: light.$fixed-surface-secondary-default;
+      color: var(--on-fixed-surface-secondary-default);
+      background-color: var(--fixed-surface-secondary-default);
     }
 
     &--theme-floating {
@@ -91,7 +91,7 @@
 
     &--theme-inline {
       &:focus-within {
-        border-color: light.$ge-border-focused;
+        border-color: var(--ge-border-focused);
       }
     }
 
@@ -159,7 +159,7 @@
 
     &--variant-fixed {
       &::placeholder {
-        color: light.$on-fixed-surface-secondary-alternate;
+        color: var(--on-fixed-surface-secondary-alternate);
       }
     }
 
@@ -171,10 +171,10 @@
   &__icon {
     display: flex;
     background: transparent;
-    color: light.$on-surface-primary-alternate;
+    color: var(--on-surface-primary-alternate);
 
     &--variant-fixed {
-      color: light.$on-fixed-surface-secondary-alternate;
+      color: var(--on-fixed-surface-secondary-alternate);
     }
   }
 
@@ -204,10 +204,10 @@
     display: flex;
     gap: spacing.$xs;
     align-items: center;
-    color: light.$on-background-primary-disabled;
+    color: var(--on-background-primary-disabled);
 
     &--variant-fixed {
-      color: light.$on-fixed-background-primary-disabled;
+      color: var(--on-fixed-background-primary-disabled);
     }
   }
 }

package/react/select/select.js

@@ -1,2 +1,2 @@
-var L=Object.defineProperty;var o=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var g=(e,s,t)=>s in e?L(e,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[s]=t,v=(e,s)=>{for(var t in s||(s={}))x.call(s,t)&&g(e,t,s[t]);if(o)for(var t of o(s))C.call(s,t)&&g(e,t,s[t]);return e};var E=(e,s)=>{var t={};for(var a in e)x.call(e,a)&&s.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&o)for(var a of o(e))s.indexOf(a)<0&&C.call(e,a)&&(t[a]=e[a]);return t};import i from"classnames";import*as l from"react";import $ from"../use-input-validation";import j from"../select-option/select-option";import r from"../text";import A from"../icons/18/arrow-down";import{labelPositions as b,variants as f}from"./select.types";const w=l.forwardRef((W,T)=>{var N=W,{children:e,className:s,id:t,isLabelVisible:a=!0,label:c,labelPosition:I=b.stacked,name:y,onChange:O=()=>{},onChangeOption:P=()=>{},options:u=[],required:m,variant:h=f.large,wide:p}=N,_=E(N,["children","className","id","isLabelVisible","label","labelPosition","name","onChange","onChangeOption","options","required","variant","wide"]);const[k,z,d]=$(),H=n=>{O(n),P(u.find(({value:M})=>M===n.target.value)),k(n)},S=m?l.createElement("span",{className:"select__asterisk"},"*"):null;return l.createElement("div",{className:i("select",s,{"select--error":d})},l.createElement("div",{className:i(`select__content select__content--position-${I}`,{"select__content--wide":p})},a?l.createElement("label",{className:"select__label",htmlFor:t},c||e?l.createElement("div",{className:"select__label-text"},l.createElement(r,{size:h===f.small?r.sizes.small:r.sizes.basic,theme:r.themes.emphasis},c),S,e):m?S:null):null,l.createElement("div",{className:i("select__native-wrapper",{"select__native-wrapper--wide":p})},l.createElement("select",v({"aria-label":a?void 0:c,className:i(`select__select select__select--variant-${h}`,{"select__select--wide":p}),id:t,name:y,onChange:H,onInvalid:n=>{_.onInvalid&&_.onInvalid(n),z(n)},ref:T,required:m},_),u.map(n=>l.createElement(j,v({key:n.value},n)))),l.createElement("span",{className:"select__chevron"},l.createElement(A,null))),d?l.createElement("div",{"aria-hidden":"true",className:"select__error"},d):null))});w.displayName="Select";const D=w,F=Object.assign(D,{labelPositions:b,variants:f});var Y=F;export{Y as default};
+"use client";var L=Object.defineProperty;var o=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var g=(e,s,t)=>s in e?L(e,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[s]=t,v=(e,s)=>{for(var t in s||(s={}))x.call(s,t)&&g(e,t,s[t]);if(o)for(var t of o(s))C.call(s,t)&&g(e,t,s[t]);return e};var E=(e,s)=>{var t={};for(var a in e)x.call(e,a)&&s.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&o)for(var a of o(e))s.indexOf(a)<0&&C.call(e,a)&&(t[a]=e[a]);return t};import i from"classnames";import*as l from"react";import $ from"../use-input-validation";import j from"../select-option/select-option";import r from"../text";import A from"../icons/18/arrow-down";import{labelPositions as b,variants as f}from"./select.types";const w=l.forwardRef((W,T)=>{var N=W,{children:e,className:s,id:t,isLabelVisible:a=!0,label:c,labelPosition:I=b.stacked,name:y,onChange:O=()=>{},onChangeOption:P=()=>{},options:u=[],required:m,variant:h=f.large,wide:p}=N,_=E(N,["children","className","id","isLabelVisible","label","labelPosition","name","onChange","onChangeOption","options","required","variant","wide"]);const[k,z,d]=$(),H=n=>{O(n),P(u.find(({value:M})=>M===n.target.value)),k(n)},S=m?l.createElement("span",{className:"select__asterisk"},"*"):null;return l.createElement("div",{className:i("select",s,{"select--error":d})},l.createElement("div",{className:i(`select__content select__content--position-${I}`,{"select__content--wide":p})},a?l.createElement("label",{className:"select__label",htmlFor:t},c||e?l.createElement("div",{className:"select__label-text"},l.createElement(r,{size:h===f.small?r.sizes.small:r.sizes.basic,theme:r.themes.emphasis},c),S,e):m?S:null):null,l.createElement("div",{className:i("select__native-wrapper",{"select__native-wrapper--wide":p})},l.createElement("select",v({"aria-label":a?void 0:c,className:i(`select__select select__select--variant-${h}`,{"select__select--wide":p}),id:t,name:y,onChange:H,onInvalid:n=>{_.onInvalid&&_.onInvalid(n),z(n)},ref:T,required:m},_),u.map(n=>l.createElement(j,v({key:n.value},n)))),l.createElement("span",{className:"select__chevron"},l.createElement(A,null))),d?l.createElement("div",{"aria-hidden":"true",className:"select__error"},d):null))});w.displayName="Select";const D=w,F=Object.assign(D,{labelPositions:b,variants:f});var Y=F;export{Y as default};
 //# sourceMappingURL=select.js.map

package/react/select/select.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/select/select.tsx"],
-  "sourcesContent": ["import cn from 'classnames';\nimport * as React from 'react';\n\nimport useInputValidation from '../use-input-validation';\n\nimport Option from '../select-option/select-option';\nimport Text from '../text';\nimport SvgArrowDown from '../icons/18/arrow-down';\n\nimport { labelPositions, Select as Props, variants } from './select.types';\n\n// NOTE: `onChangeOption` works like `onChange` but returns the props for that option instead of an event object.\nconst RefSelect = React.forwardRef<\n  HTMLSelectElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      className,\n      id,\n      isLabelVisible = true,\n      label,\n      labelPosition = labelPositions.stacked,\n      name,\n      onChange = () => {},\n      onChangeOption = () => {},\n      options = [],\n      required,\n      variant = variants.large,\n      wide,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [validationOnChange, onInvalid, error] = useInputValidation();\n\n    const onInputChange = (e: React.ChangeEvent<HTMLSelectElement>) => {\n      onChange(e);\n      onChangeOption(options.find(({ value }) => value === e.target.value));\n      validationOnChange(e);\n    };\n\n    const asterix = required ? (\n      <span className=\"select__asterisk\">*</span>\n    ) : null;\n\n    return (\n      <div className={cn('select', className, { 'select--error': error })}>\n        <div\n          className={cn(\n            `select__content select__content--position-${labelPosition}`,\n            { 'select__content--wide': wide },\n          )}\n        >\n          {isLabelVisible ? (\n            <label className=\"select__label\" htmlFor={id}>\n              {label || children ? (\n                <div className=\"select__label-text\">\n                  <Text\n                    size={\n                      variant === variants.small\n                        ? Text.sizes.small\n                        : Text.sizes.basic\n                    }\n                    theme={Text.themes.emphasis}\n                  >\n                    {label}\n                  </Text>\n                  {asterix}\n                  {children}\n                </div>\n              ) : required ? (\n                asterix\n              ) : null}\n            </label>\n          ) : null}\n          <div\n            className={cn('select__native-wrapper', {\n              'select__native-wrapper--wide': wide,\n            })}\n          >\n            <select\n              aria-label={isLabelVisible ? undefined : label}\n              className={cn(\n                `select__select select__select--variant-${variant}`,\n                {\n                  'select__select--wide': wide,\n                },\n              )}\n              id={id}\n              name={name}\n              onChange={onInputChange}\n              onInvalid={e => {\n                // NOTE: To not break compatibility\n                if (restProps.onInvalid) restProps.onInvalid(e);\n                onInvalid(e);\n              }}\n              ref={ref}\n              required={required}\n              {...restProps}\n            >\n              {options.map(option => (\n                <Option key={option.value} {...option} />\n              ))}\n            </select>\n            <span className=\"select__chevron\">\n              <SvgArrowDown />\n            </span>\n          </div>\n\n          {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n          {error ? (\n            <div aria-hidden=\"true\" className=\"select__error\">\n              {error}\n            </div>\n          ) : null}\n        </div>\n      </div>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Select\"\nRefSelect.displayName = 'Select';\n\n// NOTE: Since `React.forwardRef` props aren't generic, the component is cast so that generics work as intended. See https://stackoverflow.com/a/58473012\nconst SelectComponent = RefSelect as <OptionExtra>(\n  props: Props<OptionExtra> & {\n    ref?: React.Ref<HTMLSelectElement>;\n  },\n) => React.ReactElement;\n\nconst Select: typeof SelectComponent & {\n  labelPositions: typeof labelPositions;\n  variants: typeof variants;\n} = Object.assign(SelectComponent, { labelPositions, variants });\n\nexport default Select;\n"],
-  "mappings": "2fAAA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAwB,0BAE/B,OAAOC,MAAY,iCACnB,OAAOC,MAAU,UACjB,OAAOC,MAAkB,yBAEzB,OAAS,kBAAAC,EAAiC,YAAAC,MAAgB,iBAG1D,MAAMC,EAAYP,EAAM,WAItB,CACEQ,EAgBAC,IACG,CAjBH,IAAAC,EAAAF,EACE,UAAAG,EACA,UAAAC,EACA,GAAAC,EACA,eAAAC,EAAiB,GACjB,MAAAC,EACA,cAAAC,EAAgBX,EAAe,QAC/B,KAAAY,EACA,SAAAC,EAAW,IAAM,CAAC,EAClB,eAAAC,EAAiB,IAAM,CAAC,EACxB,QAAAC,EAAU,CAAC,EACX,SAAAC,EACA,QAAAC,EAAUhB,EAAS,MACnB,KAAAiB,CA9BN,EAiBIb,EAcKc,EAAAC,EAdLf,EAcK,CAbH,WACA,YACA,KACA,iBACA,QACA,gBACA,OACA,WACA,iBACA,UACA,WACA,UACA,SAKF,KAAM,CAACgB,EAAoBC,EAAWC,CAAK,EAAI3B,EAAmB,EAE5D4B,EAAiBC,GAA4C,CACjEZ,EAASY,CAAC,EACVX,EAAeC,EAAQ,KAAK,CAAC,CAAE,MAAAW,CAAM,IAAMA,IAAUD,EAAE,OAAO,KAAK,CAAC,EACpEJ,EAAmBI,CAAC,CACtB,EAEME,EAAUX,EACdrB,EAAA,cAAC,QAAK,UAAU,oBAAmB,GAAC,EAClC,KAEJ,OACEA,EAAA,cAAC,OAAI,UAAWD,EAAG,SAAUa,EAAW,CAAE,gBAAiBgB,CAAM,CAAC,GAChE5B,EAAA,cAAC,OACC,UAAWD,EACT,6CAA6CiB,CAAa,GAC1D,CAAE,wBAAyBO,CAAK,CAClC,GAECT,EACCd,EAAA,cAAC,SAAM,UAAU,gBAAgB,QAASa,GACvCE,GAASJ,EACRX,EAAA,cAAC,OAAI,UAAU,sBACbA,EAAA,cAACG,EAAA,CACC,KACEmB,IAAYhB,EAAS,MACjBH,EAAK,MAAM,MACXA,EAAK,MAAM,MAEjB,MAAOA,EAAK,OAAO,UAElBY,CACH,EACCiB,EACArB,CACH,EACEU,EACFW,EACE,IACN,EACE,KACJhC,EAAA,cAAC,OACC,UAAWD,EAAG,yBAA0B,CACtC,+BAAgCwB,CAClC,CAAC,GAEDvB,EAAA,cAAC,SAAAiC,EAAA,CACC,aAAYnB,EAAiB,OAAYC,EACzC,UAAWhB,EACT,0CAA0CuB,CAAO,GACjD,CACE,uBAAwBC,CAC1B,CACF,EACA,GAAIV,EACJ,KAAMI,EACN,SAAUY,EACV,UAAWC,GAAK,CAEVN,EAAU,WAAWA,EAAU,UAAUM,CAAC,EAC9CH,EAAUG,CAAC,CACb,EACA,IAAKrB,EACL,SAAUY,GACNG,GAEHJ,EAAQ,IAAIc,GACXlC,EAAA,cAACE,EAAA+B,EAAA,CAAO,IAAKC,EAAO,OAAWA,EAAQ,CACxC,CACH,EACAlC,EAAA,cAAC,QAAK,UAAU,mBACdA,EAAA,cAACI,EAAA,IAAa,CAChB,CACF,EAGCwB,EACC5B,EAAA,cAAC,OAAI,cAAY,OAAO,UAAU,iBAC/B4B,CACH,EACE,IACN,CACF,CAEJ,CACF,EAGArB,EAAU,YAAc,SAGxB,MAAM4B,EAAkB5B,EAMlB6B,EAGF,OAAO,OAAOD,EAAiB,CAAE,eAAA9B,EAAgB,SAAAC,CAAS,CAAC,EAE/D,IAAO+B,EAAQD",
+  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport useInputValidation from '../use-input-validation';\n\nimport Option from '../select-option/select-option';\nimport Text from '../text';\nimport SvgArrowDown from '../icons/18/arrow-down';\n\nimport { labelPositions, Select as Props, variants } from './select.types';\n\n// NOTE: `onChangeOption` works like `onChange` but returns the props for that option instead of an event object.\nconst RefSelect = React.forwardRef<\n  HTMLSelectElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      className,\n      id,\n      isLabelVisible = true,\n      label,\n      labelPosition = labelPositions.stacked,\n      name,\n      onChange = () => {},\n      onChangeOption = () => {},\n      options = [],\n      required,\n      variant = variants.large,\n      wide,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [validationOnChange, onInvalid, error] = useInputValidation();\n\n    const onInputChange = (e: React.ChangeEvent<HTMLSelectElement>) => {\n      onChange(e);\n      onChangeOption(options.find(({ value }) => value === e.target.value));\n      validationOnChange(e);\n    };\n\n    const asterix = required ? (\n      <span className=\"select__asterisk\">*</span>\n    ) : null;\n\n    return (\n      <div className={cn('select', className, { 'select--error': error })}>\n        <div\n          className={cn(\n            `select__content select__content--position-${labelPosition}`,\n            { 'select__content--wide': wide },\n          )}\n        >\n          {isLabelVisible ? (\n            <label className=\"select__label\" htmlFor={id}>\n              {label || children ? (\n                <div className=\"select__label-text\">\n                  <Text\n                    size={\n                      variant === variants.small\n                        ? Text.sizes.small\n                        : Text.sizes.basic\n                    }\n                    theme={Text.themes.emphasis}\n                  >\n                    {label}\n                  </Text>\n                  {asterix}\n                  {children}\n                </div>\n              ) : required ? (\n                asterix\n              ) : null}\n            </label>\n          ) : null}\n          <div\n            className={cn('select__native-wrapper', {\n              'select__native-wrapper--wide': wide,\n            })}\n          >\n            <select\n              aria-label={isLabelVisible ? undefined : label}\n              className={cn(\n                `select__select select__select--variant-${variant}`,\n                {\n                  'select__select--wide': wide,\n                },\n              )}\n              id={id}\n              name={name}\n              onChange={onInputChange}\n              onInvalid={e => {\n                // NOTE: To not break compatibility\n                if (restProps.onInvalid) restProps.onInvalid(e);\n                onInvalid(e);\n              }}\n              ref={ref}\n              required={required}\n              {...restProps}\n            >\n              {options.map(option => (\n                <Option key={option.value} {...option} />\n              ))}\n            </select>\n            <span className=\"select__chevron\">\n              <SvgArrowDown />\n            </span>\n          </div>\n\n          {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n          {error ? (\n            <div aria-hidden=\"true\" className=\"select__error\">\n              {error}\n            </div>\n          ) : null}\n        </div>\n      </div>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Select\"\nRefSelect.displayName = 'Select';\n\n// NOTE: Since `React.forwardRef` props aren't generic, the component is cast so that generics work as intended. See https://stackoverflow.com/a/58473012\nconst SelectComponent = RefSelect as <OptionExtra>(\n  props: Props<OptionExtra> & {\n    ref?: React.Ref<HTMLSelectElement>;\n  },\n) => React.ReactElement;\n\nconst Select: typeof SelectComponent & {\n  labelPositions: typeof labelPositions;\n  variants: typeof variants;\n} = Object.assign(SelectComponent, { labelPositions, variants });\n\nexport default Select;\n"],
+  "mappings": "wgBAEA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAwB,0BAE/B,OAAOC,MAAY,iCACnB,OAAOC,MAAU,UACjB,OAAOC,MAAkB,yBAEzB,OAAS,kBAAAC,EAAiC,YAAAC,MAAgB,iBAG1D,MAAMC,EAAYP,EAAM,WAItB,CACEQ,EAgBAC,IACG,CAjBH,IAAAC,EAAAF,EACE,UAAAG,EACA,UAAAC,EACA,GAAAC,EACA,eAAAC,EAAiB,GACjB,MAAAC,EACA,cAAAC,EAAgBX,EAAe,QAC/B,KAAAY,EACA,SAAAC,EAAW,IAAM,CAAC,EAClB,eAAAC,EAAiB,IAAM,CAAC,EACxB,QAAAC,EAAU,CAAC,EACX,SAAAC,EACA,QAAAC,EAAUhB,EAAS,MACnB,KAAAiB,CAhCN,EAmBIb,EAcKc,EAAAC,EAdLf,EAcK,CAbH,WACA,YACA,KACA,iBACA,QACA,gBACA,OACA,WACA,iBACA,UACA,WACA,UACA,SAKF,KAAM,CAACgB,EAAoBC,EAAWC,CAAK,EAAI3B,EAAmB,EAE5D4B,EAAiBC,GAA4C,CACjEZ,EAASY,CAAC,EACVX,EAAeC,EAAQ,KAAK,CAAC,CAAE,MAAAW,CAAM,IAAMA,IAAUD,EAAE,OAAO,KAAK,CAAC,EACpEJ,EAAmBI,CAAC,CACtB,EAEME,EAAUX,EACdrB,EAAA,cAAC,QAAK,UAAU,oBAAmB,GAAC,EAClC,KAEJ,OACEA,EAAA,cAAC,OAAI,UAAWD,EAAG,SAAUa,EAAW,CAAE,gBAAiBgB,CAAM,CAAC,GAChE5B,EAAA,cAAC,OACC,UAAWD,EACT,6CAA6CiB,CAAa,GAC1D,CAAE,wBAAyBO,CAAK,CAClC,GAECT,EACCd,EAAA,cAAC,SAAM,UAAU,gBAAgB,QAASa,GACvCE,GAASJ,EACRX,EAAA,cAAC,OAAI,UAAU,sBACbA,EAAA,cAACG,EAAA,CACC,KACEmB,IAAYhB,EAAS,MACjBH,EAAK,MAAM,MACXA,EAAK,MAAM,MAEjB,MAAOA,EAAK,OAAO,UAElBY,CACH,EACCiB,EACArB,CACH,EACEU,EACFW,EACE,IACN,EACE,KACJhC,EAAA,cAAC,OACC,UAAWD,EAAG,yBAA0B,CACtC,+BAAgCwB,CAClC,CAAC,GAEDvB,EAAA,cAAC,SAAAiC,EAAA,CACC,aAAYnB,EAAiB,OAAYC,EACzC,UAAWhB,EACT,0CAA0CuB,CAAO,GACjD,CACE,uBAAwBC,CAC1B,CACF,EACA,GAAIV,EACJ,KAAMI,EACN,SAAUY,EACV,UAAWC,GAAK,CAEVN,EAAU,WAAWA,EAAU,UAAUM,CAAC,EAC9CH,EAAUG,CAAC,CACb,EACA,IAAKrB,EACL,SAAUY,GACNG,GAEHJ,EAAQ,IAAIc,GACXlC,EAAA,cAACE,EAAA+B,EAAA,CAAO,IAAKC,EAAO,OAAWA,EAAQ,CACxC,CACH,EACAlC,EAAA,cAAC,QAAK,UAAU,mBACdA,EAAA,cAACI,EAAA,IAAa,CAChB,CACF,EAGCwB,EACC5B,EAAA,cAAC,OAAI,cAAY,OAAO,UAAU,iBAC/B4B,CACH,EACE,IACN,CACF,CAEJ,CACF,EAGArB,EAAU,YAAc,SAGxB,MAAM4B,EAAkB5B,EAMlB6B,EAGF,OAAO,OAAOD,EAAiB,CAAE,eAAA9B,EAAgB,SAAAC,CAAS,CAAC,EAE/D,IAAO+B,EAAQD",
   "names": ["cn", "React", "useInputValidation", "Option", "Text", "SvgArrowDown", "labelPositions", "variants", "RefSelect", "_a", "ref", "_b", "children", "className", "id", "isLabelVisible", "label", "labelPosition", "name", "onChange", "onChangeOption", "options", "required", "variant", "wide", "restProps", "__objRest", "validationOnChange", "onInvalid", "error", "onInputChange", "e", "value", "asterix", "__spreadValues", "option", "SelectComponent", "Select", "select_default"]
 }

package/react/select/select.scss

@@ -1,5 +1,5 @@
 @use '../../tokens/corner-radius';
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 @use '../../tokens/font-sizes';
 
@@ -27,15 +27,15 @@
   // NOTE: Specificity hack
   :root &--error {
     select {
-      background-color: rgba(light.$signal-surface-error, 0.07);
-      border-color: light.$ge-signal-border-error;
-      color: light.$on-signal-surface-error-default;
+      background-color: rgba(var(--signal-surface-error), 0.07);
+      border-color: var(--ge-signal-border-error);
+      color: var(--on-signal-surface-error-default);
     }
   }
 
   &__native-wrapper {
-    color: light.$on-surface-primary-default;
-    background-color: light.$surface-primary-default;
+    color: var(--on-surface-primary-default);
+    background-color: var(--surface-primary-default);
     border-radius: corner-radius.$s;
     position: relative;
     width: min-content;
@@ -46,7 +46,7 @@
   }
 
   &__chevron {
-    color: light.$on-surface-primary-default;
+    color: var(--on-surface-primary-default);
     position: absolute;
     right: clamp(spacing.$s, 2vw, spacing.$m);
     top: 50%;
@@ -58,10 +58,10 @@
 
   &__select {
     @include font-sizes.normal(input);
-    color: light.$on-surface-primary-default;
+    color: var(--on-surface-primary-default);
     appearance: none;
     background-color: transparent;
-    border: 1px solid light.$ge-border-default;
+    border: 1px solid var(--ge-border-default);
     display: block;
     position: relative;
     border-radius: corner-radius.$s;
@@ -87,16 +87,16 @@
     @media (hover: hover) {
       &:hover {
         &:not(:disabled) {
-          background-color: light.$surface-primary-hover;
-          border-color: light.$surface-primary-hover;
+          background-color: var(--surface-primary-hover);
+          border-color: var(--surface-primary-hover);
         }
       }
     }
 
     &:active {
       &:not(:disabled) {
-        background-color: light.$surface-primary-default;
-        border-color: light.$ge-border-focused;
+        background-color: var(--surface-primary-default);
+        border-color: var(--ge-border-focused);
       }
     }
 
@@ -106,21 +106,21 @@
     }
 
     &:disabled {
-      color: light.$on-surface-primary-disabled;
+      color: var(--on-surface-primary-disabled);
 
       ~ .select__native-wrapper {
-        color: light.$on-surface-primary-disabled;
+        color: var(--on-surface-primary-disabled);
       }
     }
   }
 
   &__error {
-    color: light.$ge-signal-error;
+    color: var(--ge-signal-error);
     margin-top: 4px;
   }
 
   &__asterisk {
-    color: light.$on-surface-featured;
+    color: var(--on-surface-featured);
     margin-left: spacing.$xs;
   }
 

package/react/tag/tag.scss

@@ -1,5 +1,5 @@
 @use '../../tokens/corner-radius';
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 
 .tag {
@@ -11,97 +11,97 @@
   border: 1px solid;
 
   &--variant-primary {
-    background: light.$ge-tags-primary;
-    border-color: light.$ge-tags-primary;
-    color: light.$on-ge-on-tags-primary-default;
+    background: var(--ge-tags-primary);
+    border-color: var(--ge-tags-primary);
+    color: var(--on-ge-on-tags-primary-default);
 
     &-border {
       background: transparent;
-      color: light.$ge-tags-primary;
+      color: var(--ge-tags-primary);
     }
   }
 
   &--variant-secondary {
-    background: light.$ge-tags-secondary;
-    border-color: light.$ge-tags-secondary;
-    color: light.$on-ge-on-tags-secondary-default;
+    background: var(--ge-tags-secondary);
+    border-color: var(--ge-tags-secondary);
+    color: var(--on-ge-on-tags-secondary-default);
 
     &-border {
       background: transparent;
-      border-color: light.$ge-tags-secondary;
-      color: light.$on-ge-on-tags-secondary-default;
+      border-color: var(--ge-tags-secondary);
+      color: var(--on-ge-on-tags-secondary-default);
     }
   }
 
   &--variant-tertiary {
-    background: light.$ge-tags-featured;
-    border-color: light.$ge-tags-featured;
-    color: light.$on-ge-on-tags-featured-default;
+    background: var(--ge-tags-featured);
+    border-color: var(--ge-tags-featured);
+    color: var(--on-ge-on-tags-featured-default);
 
     &-border {
       background: transparent;
-      border-color: light.$ge-tags-featured;
-      color: light.$ge-tags-featured;
+      border-color: var(--ge-tags-featured);
+      color: var(--ge-tags-featured);
     }
   }
 
   &--variant-positive {
-    background: light.$ge-indicator-tags-positive-alternate;
-    border-color: light.$ge-indicator-tags-positive-alternate;
-    color: light.$on-ge-on-indicator-tags-positive-alternate;
+    background: var(--ge-indicator-tags-positive-alternate);
+    border-color: var(--ge-indicator-tags-positive-alternate);
+    color: var(--on-ge-on-indicator-tags-positive-alternate);
 
     &-border {
-      border-color: light.$on-ge-on-indicator-tags-positive-alternate;
+      border-color: var(--on-ge-on-indicator-tags-positive-alternate);
     }
   }
 
   &--variant-attention {
-    background: light.$ge-indicator-tags-attention-alternate;
-    border-color: light.$ge-indicator-tags-attention-alternate;
-    color: light.$on-ge-on-indicator-tags-attention-alternate;
+    background: var(--ge-indicator-tags-attention-alternate);
+    border-color: var(--ge-indicator-tags-attention-alternate);
+    color: var(--on-ge-on-indicator-tags-attention-alternate);
 
     &-border {
-      border-color: light.$on-ge-on-indicator-tags-attention-alternate;
+      border-color: var(--on-ge-on-indicator-tags-attention-alternate);
     }
   }
 
   &--variant-negative {
-    background: light.$ge-indicator-tags-negative-alternate;
-    border-color: light.$ge-indicator-tags-negative-alternate;
-    color: light.$on-ge-on-indicator-tags-negative-alternate;
+    background: var(--ge-indicator-tags-negative-alternate);
+    border-color: var(--ge-indicator-tags-negative-alternate);
+    color: var(--on-ge-on-indicator-tags-negative-alternate);
 
     &-border {
-      border-color: light.$on-ge-on-indicator-tags-negative-alternate;
+      border-color: var(--on-ge-on-indicator-tags-negative-alternate);
     }
   }
 
   &--variant-neutral {
-    background: light.$ge-indicator-tags-neutral-alternate;
-    border-color: light.$ge-indicator-tags-neutral-alternate;
-    color: light.$on-ge-on-indicator-tags-neutral-alternate;
+    background: var(--ge-indicator-tags-neutral-alternate);
+    border-color: var(--ge-indicator-tags-neutral-alternate);
+    color: var(--on-ge-on-indicator-tags-neutral-alternate);
 
     &-border {
-      border-color: light.$on-ge-on-indicator-tags-neutral-alternate;
+      border-color: var(--on-ge-on-indicator-tags-neutral-alternate);
     }
   }
 
   &--variant-information {
-    background: light.$ge-indicator-tags-information-alternate;
-    border-color: light.$ge-indicator-tags-information-alternate;
-    color: light.$on-ge-on-indicator-tags-information-alternate;
+    background: var(--ge-indicator-tags-information-alternate);
+    border-color: var(--ge-indicator-tags-information-alternate);
+    color: var(--on-ge-on-indicator-tags-information-alternate);
 
     &-border {
-      border-color: light.$on-ge-on-indicator-tags-information-alternate;
+      border-color: var(--on-ge-on-indicator-tags-information-alternate);
     }
   }
 
   &--variant-featured {
-    background: light.$ge-indicator-tags-featured-alternate;
-    border-color: light.$ge-indicator-tags-featured-alternate;
-    color: light.$on-ge-on-indicator-tags-featured-alternate;
+    background: var(--ge-indicator-tags-featured-alternate);
+    border-color: var(--ge-indicator-tags-featured-alternate);
+    color: var(--on-ge-on-indicator-tags-featured-alternate);
 
     &-border {
-      border-color: light.$on-ge-on-indicator-tags-featured-alternate;
+      border-color: var(--on-ge-on-indicator-tags-featured-alternate);
     }
   }
 }

package/react/text-area/text-area.js

@@ -1,2 +1,2 @@
-var O=Object.defineProperty;var p=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var g=(e,t,a)=>t in e?O(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,A=(e,t)=>{for(var a in t||(t={}))b.call(t,a)&&g(e,a,t[a]);if(p)for(var a of p(t))y.call(t,a)&&g(e,a,t[a]);return e};var C=(e,t)=>{var a={};for(var i in e)b.call(e,i)&&t.indexOf(i)<0&&(a[i]=e[i]);if(e!=null&&p)for(var i of p(e))t.indexOf(i)<0&&y.call(e,i)&&(a[i]=e[i]);return a};import d from"classnames";import*as r from"react";import n from"../text";import W from"../use-input-validation";import{themes as I,sizes as v}from"./text-area.types";const k=r.forwardRef((B,E)=>{var z=B,{children:e,helpText:t,label:a,name:i,placeholder:w,disabled:u,required:c,isLabelVisible:N=!0,helpIcon:T,size:x=v.default,theme:s=I.light,isShort:$,maxLength:m,defaultValue:l}=z,_=C(z,["children","helpText","label","name","placeholder","disabled","required","isLabelVisible","helpIcon","size","theme","isShort","maxLength","defaultValue"]);const[j,H,f]=W(),[M,h]=r.useState(0);return r.useEffect(()=>{l&&(typeof l=="string"?h(l.length):typeof l=="number"&&h(l))},[_]),r.createElement("label",{className:"text-area"},r.createElement("div",{className:"text-area__wrapper"},N?r.createElement("div",{className:"text-area__header"},r.createElement(n,{theme:n.themes.emphasis,size:x===v.default?n.sizes.basic:n.sizes.small,className:d("text-area__label",{[`text-area__label--theme-${s}-disabled`]:u,[`text-area__label--theme-${s}`]:s})},a,c?r.createElement("span",{className:d("text-area__asterisk",{[`text-area__asterisk--theme-${s}-disabled`]:u,[`text-area__asterisk--theme-${s}`]:s})},"*"):null,e),m?r.createElement(n,{className:"text-area__max",size:n.sizes.small},M,"/",m):null):null,r.createElement("textarea",A({className:d("text-area__input",{[`text-area__input--theme-${s}`]:s,[`text-area__input--theme-${s}-error`]:f,[`text-area__input--size-${x}-short`]:$,[`text-area__input--size-${x}`]:x}),"aria-label":N?a:void 0,name:i,maxLength:m,ref:E,cols:1,required:c,defaultValue:l,rows:$?1:2,onChange:o=>{_.onChange&&_.onChange(o),j(o),m&&h(o.target.value.length)},onInvalid:o=>{_.onInvalid&&_.onInvalid(o),H(o)},placeholder:w,disabled:u},_))),t?r.createElement("div",{className:"text-area__help"},r.createElement(n,{size:n.sizes.interface,className:d("text-area__help-text",{[`text-area__help-text--theme-${s}-error`]:f,[`text-area__help-text--theme-${s}`]:s})},T||null,t)):null,f&&r.createElement("div",{"aria-hidden":"true",className:"text-area__error"},r.createElement(n,null,f)))});k.displayName="TextArea";const q=Object.assign(k,{themes:I,sizes:v});var S=q;export{S as default};
+"use client";var O=Object.defineProperty;var p=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var g=(e,t,a)=>t in e?O(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,A=(e,t)=>{for(var a in t||(t={}))b.call(t,a)&&g(e,a,t[a]);if(p)for(var a of p(t))y.call(t,a)&&g(e,a,t[a]);return e};var C=(e,t)=>{var a={};for(var i in e)b.call(e,i)&&t.indexOf(i)<0&&(a[i]=e[i]);if(e!=null&&p)for(var i of p(e))t.indexOf(i)<0&&y.call(e,i)&&(a[i]=e[i]);return a};import d from"classnames";import*as r from"react";import n from"../text";import W from"../use-input-validation";import{themes as I,sizes as c}from"./text-area.types";const k=r.forwardRef((B,E)=>{var z=B,{children:e,helpText:t,label:a,name:i,placeholder:w,disabled:u,required:v,isLabelVisible:N=!0,helpIcon:T,size:x=c.default,theme:s=I.light,isShort:$,maxLength:m,defaultValue:l}=z,_=C(z,["children","helpText","label","name","placeholder","disabled","required","isLabelVisible","helpIcon","size","theme","isShort","maxLength","defaultValue"]);const[j,H,f]=W(),[M,h]=r.useState(0);return r.useEffect(()=>{l&&(typeof l=="string"?h(l.length):typeof l=="number"&&h(l))},[_]),r.createElement("label",{className:"text-area"},r.createElement("div",{className:"text-area__wrapper"},N?r.createElement("div",{className:"text-area__header"},r.createElement(n,{theme:n.themes.emphasis,size:x===c.default?n.sizes.basic:n.sizes.small,className:d("text-area__label",{[`text-area__label--theme-${s}-disabled`]:u,[`text-area__label--theme-${s}`]:s})},a,v?r.createElement("span",{className:d("text-area__asterisk",{[`text-area__asterisk--theme-${s}-disabled`]:u,[`text-area__asterisk--theme-${s}`]:s})},"*"):null,e),m?r.createElement(n,{className:"text-area__max",size:n.sizes.small},M,"/",m):null):null,r.createElement("textarea",A({className:d("text-area__input",{[`text-area__input--theme-${s}`]:s,[`text-area__input--theme-${s}-error`]:f,[`text-area__input--size-${x}-short`]:$,[`text-area__input--size-${x}`]:x}),"aria-label":N?a:void 0,name:i,maxLength:m,ref:E,cols:1,required:v,defaultValue:l,rows:$?1:2,onChange:o=>{_.onChange&&_.onChange(o),j(o),m&&h(o.target.value.length)},onInvalid:o=>{_.onInvalid&&_.onInvalid(o),H(o)},placeholder:w,disabled:u},_))),t?r.createElement("div",{className:"text-area__help"},r.createElement(n,{size:n.sizes.interface,className:d("text-area__help-text",{[`text-area__help-text--theme-${s}-error`]:f,[`text-area__help-text--theme-${s}`]:s})},T||null,t)):null,f&&r.createElement("div",{"aria-hidden":"true",className:"text-area__error"},r.createElement(n,null,f)))});k.displayName="TextArea";const q=Object.assign(k,{themes:I,sizes:c});var S=q;export{S as default};
 //# sourceMappingURL=text-area.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/text-area/text-area.tsx"],
-  "sourcesContent": ["import cn from 'classnames';\nimport * as React from 'react';\n\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\n\nimport { TextArea as Props, themes, sizes } from './text-area.types';\n\nconst RefTextArea = React.forwardRef<\n  HTMLTextAreaElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      helpText,\n      label,\n      name,\n      placeholder,\n      disabled,\n      required,\n      isLabelVisible = true,\n      helpIcon,\n      size = sizes.default,\n      theme = themes.light,\n      isShort,\n      maxLength,\n      defaultValue,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n    const [count, setCount] = React.useState(0);\n\n    React.useEffect(() => {\n      if (defaultValue) {\n        if (typeof defaultValue === 'string') {\n          setCount(defaultValue.length);\n        } else if (typeof defaultValue === 'number') {\n          setCount(defaultValue);\n        }\n      }\n    }, [restProps]);\n\n    return (\n      <label className=\"text-area\">\n        <div className=\"text-area__wrapper\">\n          {isLabelVisible ? (\n            <div className=\"text-area__header\">\n              <Text\n                theme={Text.themes.emphasis}\n                size={\n                  size === sizes.default ? Text.sizes.basic : Text.sizes.small\n                }\n                className={cn('text-area__label', {\n                  [`text-area__label--theme-${theme}-disabled`]: disabled,\n                  [`text-area__label--theme-${theme}`]: theme,\n                })}\n              >\n                {label}\n                {required ? (\n                  <span\n                    className={cn('text-area__asterisk', {\n                      [`text-area__asterisk--theme-${theme}-disabled`]:\n                        disabled,\n                      [`text-area__asterisk--theme-${theme}`]: theme,\n                    })}\n                  >\n                    *\n                  </span>\n                ) : null}\n                {children}\n              </Text>\n              {maxLength ? (\n                <Text className=\"text-area__max\" size={Text.sizes.small}>\n                  {count}/{maxLength}\n                </Text>\n              ) : null}\n            </div>\n          ) : null}\n          <textarea\n            className={cn('text-area__input', {\n              [`text-area__input--theme-${theme}`]: theme,\n              [`text-area__input--theme-${theme}-error`]: error,\n              [`text-area__input--size-${size}-short`]: isShort,\n              [`text-area__input--size-${size}`]: size,\n            })}\n            aria-label={isLabelVisible ? label : undefined}\n            name={name}\n            maxLength={maxLength}\n            ref={ref}\n            cols={1}\n            required={required}\n            defaultValue={defaultValue}\n            rows={isShort ? 1 : 2}\n            onChange={e => {\n              // NOTE: To not break compatibility\n              if (restProps.onChange) {\n                restProps.onChange(e);\n              }\n              onChange(e);\n              if (maxLength) {\n                setCount(e.target.value.length);\n              }\n            }}\n            onInvalid={e => {\n              // NOTE: To not break compatibility\n              if (restProps.onInvalid) restProps.onInvalid(e);\n              onInvalid(e);\n            }}\n            placeholder={placeholder}\n            disabled={disabled}\n            {...restProps}\n          />\n        </div>\n\n        {helpText ? (\n          <div className=\"text-area__help\">\n            <Text\n              size={Text.sizes.interface}\n              className={cn('text-area__help-text', {\n                [`text-area__help-text--theme-${theme}-error`]: error,\n                [`text-area__help-text--theme-${theme}`]: theme,\n              })}\n            >\n              {helpIcon ? helpIcon : null}\n              {helpText}\n            </Text>\n          </div>\n        ) : null}\n\n        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n        {error && (\n          <div aria-hidden=\"true\" className=\"text-area__error\">\n            <Text>{error}</Text>\n          </div>\n        )}\n      </label>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"TextArea\"\nRefTextArea.displayName = 'TextArea';\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\n\nconst TextArea: typeof RefTextArea & {\n  themes: typeof themes;\n  sizes: typeof sizes;\n} = Object.assign(RefTextArea, { themes, sizes });\n\nexport default TextArea;\n"],
-  "mappings": "2fAAA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAU,UACjB,OAAOC,MAAwB,0BAE/B,OAA4B,UAAAC,EAAQ,SAAAC,MAAa,oBAEjD,MAAMC,EAAcL,EAAM,WAIxB,CACEM,EAiBAC,IACG,CAlBH,IAAAC,EAAAF,EACE,UAAAG,EACA,SAAAC,EACA,MAAAC,EACA,KAAAC,EACA,YAAAC,EACA,SAAAC,EACA,SAAAC,EACA,eAAAC,EAAiB,GACjB,SAAAC,EACA,KAAAC,EAAOd,EAAM,QACb,MAAAe,EAAQhB,EAAO,MACf,QAAAiB,EACA,UAAAC,EACA,aAAAC,CA3BN,EAaId,EAeKe,EAAAC,EAfLhB,EAeK,CAdH,WACA,WACA,QACA,OACA,cACA,WACA,WACA,iBACA,WACA,OACA,QACA,UACA,YACA,iBAKF,KAAM,CAACiB,EAAUC,EAAWC,CAAK,EAAIzB,EAAmB,EAClD,CAAC0B,EAAOC,CAAQ,EAAI7B,EAAM,SAAS,CAAC,EAE1C,OAAAA,EAAM,UAAU,IAAM,CAChBsB,IACE,OAAOA,GAAiB,SAC1BO,EAASP,EAAa,MAAM,EACnB,OAAOA,GAAiB,UACjCO,EAASP,CAAY,EAG3B,EAAG,CAACC,CAAS,CAAC,EAGZvB,EAAA,cAAC,SAAM,UAAU,aACfA,EAAA,cAAC,OAAI,UAAU,sBACZgB,EACChB,EAAA,cAAC,OAAI,UAAU,qBACbA,EAAA,cAACC,EAAA,CACC,MAAOA,EAAK,OAAO,SACnB,KACEiB,IAASd,EAAM,QAAUH,EAAK,MAAM,MAAQA,EAAK,MAAM,MAEzD,UAAWF,EAAG,mBAAoB,CAChC,CAAC,2BAA2BoB,CAAK,WAAW,EAAGL,EAC/C,CAAC,2BAA2BK,CAAK,EAAE,EAAGA,CACxC,CAAC,GAEAR,EACAI,EACCf,EAAA,cAAC,QACC,UAAWD,EAAG,sBAAuB,CACnC,CAAC,8BAA8BoB,CAAK,WAAW,EAC7CL,EACF,CAAC,8BAA8BK,CAAK,EAAE,EAAGA,CAC3C,CAAC,GACF,GAED,EACE,KACHV,CACH,EACCY,EACCrB,EAAA,cAACC,EAAA,CAAK,UAAU,iBAAiB,KAAMA,EAAK,MAAM,OAC/C2B,EAAM,IAAEP,CACX,EACE,IACN,EACE,KACJrB,EAAA,cAAC,WAAA8B,EAAA,CACC,UAAW/B,EAAG,mBAAoB,CAChC,CAAC,2BAA2BoB,CAAK,EAAE,EAAGA,EACtC,CAAC,2BAA2BA,CAAK,QAAQ,EAAGQ,EAC5C,CAAC,0BAA0BT,CAAI,QAAQ,EAAGE,EAC1C,CAAC,0BAA0BF,CAAI,EAAE,EAAGA,CACtC,CAAC,EACD,aAAYF,EAAiBL,EAAQ,OACrC,KAAMC,EACN,UAAWS,EACX,IAAKd,EACL,KAAM,EACN,SAAUQ,EACV,aAAcO,EACd,KAAMF,EAAU,EAAI,EACpB,SAAUW,GAAK,CAETR,EAAU,UACZA,EAAU,SAASQ,CAAC,EAEtBN,EAASM,CAAC,EACNV,GACFQ,EAASE,EAAE,OAAO,MAAM,MAAM,CAElC,EACA,UAAWA,GAAK,CAEVR,EAAU,WAAWA,EAAU,UAAUQ,CAAC,EAC9CL,EAAUK,CAAC,CACb,EACA,YAAalB,EACb,SAAUC,GACNS,EACN,CACF,EAECb,EACCV,EAAA,cAAC,OAAI,UAAU,mBACbA,EAAA,cAACC,EAAA,CACC,KAAMA,EAAK,MAAM,UACjB,UAAWF,EAAG,uBAAwB,CACpC,CAAC,+BAA+BoB,CAAK,QAAQ,EAAGQ,EAChD,CAAC,+BAA+BR,CAAK,EAAE,EAAGA,CAC5C,CAAC,GAEAF,GAAsB,KACtBP,CACH,CACF,EACE,KAGHiB,GACC3B,EAAA,cAAC,OAAI,cAAY,OAAO,UAAU,oBAChCA,EAAA,cAACC,EAAA,KAAM0B,CAAM,CACf,CAEJ,CAEJ,CACF,EAGAtB,EAAY,YAAc,WAG1B,MAAM2B,EAGF,OAAO,OAAO3B,EAAa,CAAE,OAAAF,EAAQ,MAAAC,CAAM,CAAC,EAEhD,IAAO6B,EAAQD",
+  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\n\nimport { TextArea as Props, themes, sizes } from './text-area.types';\n\nconst RefTextArea = React.forwardRef<\n  HTMLTextAreaElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      helpText,\n      label,\n      name,\n      placeholder,\n      disabled,\n      required,\n      isLabelVisible = true,\n      helpIcon,\n      size = sizes.default,\n      theme = themes.light,\n      isShort,\n      maxLength,\n      defaultValue,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n    const [count, setCount] = React.useState(0);\n\n    React.useEffect(() => {\n      if (defaultValue) {\n        if (typeof defaultValue === 'string') {\n          setCount(defaultValue.length);\n        } else if (typeof defaultValue === 'number') {\n          setCount(defaultValue);\n        }\n      }\n    }, [restProps]);\n\n    return (\n      <label className=\"text-area\">\n        <div className=\"text-area__wrapper\">\n          {isLabelVisible ? (\n            <div className=\"text-area__header\">\n              <Text\n                theme={Text.themes.emphasis}\n                size={\n                  size === sizes.default ? Text.sizes.basic : Text.sizes.small\n                }\n                className={cn('text-area__label', {\n                  [`text-area__label--theme-${theme}-disabled`]: disabled,\n                  [`text-area__label--theme-${theme}`]: theme,\n                })}\n              >\n                {label}\n                {required ? (\n                  <span\n                    className={cn('text-area__asterisk', {\n                      [`text-area__asterisk--theme-${theme}-disabled`]:\n                        disabled,\n                      [`text-area__asterisk--theme-${theme}`]: theme,\n                    })}\n                  >\n                    *\n                  </span>\n                ) : null}\n                {children}\n              </Text>\n              {maxLength ? (\n                <Text className=\"text-area__max\" size={Text.sizes.small}>\n                  {count}/{maxLength}\n                </Text>\n              ) : null}\n            </div>\n          ) : null}\n          <textarea\n            className={cn('text-area__input', {\n              [`text-area__input--theme-${theme}`]: theme,\n              [`text-area__input--theme-${theme}-error`]: error,\n              [`text-area__input--size-${size}-short`]: isShort,\n              [`text-area__input--size-${size}`]: size,\n            })}\n            aria-label={isLabelVisible ? label : undefined}\n            name={name}\n            maxLength={maxLength}\n            ref={ref}\n            cols={1}\n            required={required}\n            defaultValue={defaultValue}\n            rows={isShort ? 1 : 2}\n            onChange={e => {\n              // NOTE: To not break compatibility\n              if (restProps.onChange) {\n                restProps.onChange(e);\n              }\n              onChange(e);\n              if (maxLength) {\n                setCount(e.target.value.length);\n              }\n            }}\n            onInvalid={e => {\n              // NOTE: To not break compatibility\n              if (restProps.onInvalid) restProps.onInvalid(e);\n              onInvalid(e);\n            }}\n            placeholder={placeholder}\n            disabled={disabled}\n            {...restProps}\n          />\n        </div>\n\n        {helpText ? (\n          <div className=\"text-area__help\">\n            <Text\n              size={Text.sizes.interface}\n              className={cn('text-area__help-text', {\n                [`text-area__help-text--theme-${theme}-error`]: error,\n                [`text-area__help-text--theme-${theme}`]: theme,\n              })}\n            >\n              {helpIcon ? helpIcon : null}\n              {helpText}\n            </Text>\n          </div>\n        ) : null}\n\n        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n        {error && (\n          <div aria-hidden=\"true\" className=\"text-area__error\">\n            <Text>{error}</Text>\n          </div>\n        )}\n      </label>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"TextArea\"\nRefTextArea.displayName = 'TextArea';\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\n\nconst TextArea: typeof RefTextArea & {\n  themes: typeof themes;\n  sizes: typeof sizes;\n} = Object.assign(RefTextArea, { themes, sizes });\n\nexport default TextArea;\n"],
+  "mappings": "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",
   "names": ["cn", "React", "Text", "useInputValidation", "themes", "sizes", "RefTextArea", "_a", "ref", "_b", "children", "helpText", "label", "name", "placeholder", "disabled", "required", "isLabelVisible", "helpIcon", "size", "theme", "isShort", "maxLength", "defaultValue", "restProps", "__objRest", "onChange", "onInvalid", "error", "count", "setCount", "__spreadValues", "e", "TextArea", "text_area_default"]
 }

package/react/text-area/text-area.scss

@@ -1,6 +1,6 @@
 @use '../../tokens/corner-radius';
 @use '../../tokens/font-names';
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/dark';
 @use '../../tokens/spacing';
 
@@ -23,24 +23,24 @@
   &__label {
     &--theme-light {
       &-disabled {
-        color: light.$on-background-primary-disabled;
+        color: var(--on-background-primary-disabled);
       }
     }
     &--theme-dark {
-      color: light.$on-fixed-background-primary-default;
+      color: var(--on-fixed-background-primary-default);
       &-disabled {
-        color: light.$on-fixed-background-primary-disabled;
+        color: var(--on-fixed-background-primary-disabled);
       }
     }
   }
 
   &__max {
-    color: light.$on-background-primary-alternate;
+    color: var(--on-background-primary-alternate);
   }
 
   &__input {
     width: 100%;
-    border: 0.5px solid light.$ge-border-default;
+    border: 0.5px solid var(--ge-border-default);
     border-radius: corner-radius.$s;
 
     font-family: font-names.$brand, sans-serif;
@@ -70,62 +70,62 @@
     }
 
     &--theme-light {
-      background-color: light.$surface-primary-default;
-      color: light.$on-surface-primary-default;
+      background-color: var(--surface-primary-default);
+      color: var(--on-surface-primary-default);
       &:focus {
-        outline: 1px solid light.$ge-border-focused;
+        outline: 1px solid var(--ge-border-focused);
         outline-offset: -1px;
       }
 
       &:hover {
-        background-color: light.$surface-primary-hover;
+        background-color: var(--surface-primary-hover);
       }
 
       &::placeholder {
-        color: light.$on-surface-primary-alternate;
+        color: var(--on-surface-primary-alternate);
         opacity: 1;
       }
 
       &:disabled {
-        background-color: light.$surface-primary-disabled;
+        background-color: var(--surface-primary-disabled);
         &::placeholder {
-          color: light.$on-surface-primary-disabled;
+          color: var(--on-surface-primary-disabled);
         }
       }
 
       &-error {
-        border-color: light.$ge-signal-border-error;
+        border-color: var(--ge-signal-border-error);
       }
     }
 
     &--theme-dark {
-      background-color: light.$fixed-surface-secondary-default;
-      color: light.$on-fixed-surface-primary-default;
+      background-color: var(--fixed-surface-secondary-default);
+      color: var(--on-fixed-surface-primary-default);
       &:focus {
-        background: light.$fixed-surface-primary-hover;
-        outline: 2px solid light.$ge-border-focused;
+        background: var(--fixed-surface-primary-hover);
+        outline: 2px solid var(--ge-border-focused);
         outline-offset: -2px;
       }
 
       &:hover {
-        background-color: light.$fixed-surface-primary-hover;
+        background-color: var(--fixed-surface-primary-hover);
       }
 
       &::placeholder {
-        color: light.$on-fixed-surface-primary-alternate;
+        color: var(--on-fixed-surface-primary-alternate);
         opacity: 1;
       }
 
       &:disabled {
-        background-color: light.$fixed-surface-primary-selected;
+        background-color: var(--fixed-surface-primary-selected);
         border: 0;
         &::placeholder {
-          color: light.$on-fixed-surface-secondary-disabled;
+          color: var(--on-fixed-surface-secondary-disabled);
         }
       }
 
       &-error {
-        border-color: light.$on-fixed-surface-error;
+        border-color: var(--on-fixed-surface-error);
       }
     }
   }
@@ -134,23 +134,23 @@
     margin-left: spacing.$xs;
 
     &--theme-light {
-      color: light.$on-surface-featured;
+      color: var(--on-surface-featured);
       &-disabled {
 
-        color: light.$on-surface-primary-disabled;
+        color: var(--on-surface-primary-disabled);
       }
     }
     &--theme-dark {
-      color: light.$on-fixed-surface-featured;
+      color: var(--on-fixed-surface-featured);
       &-disabled {
-        color: light.$on-fixed-background-primary-disabled;
+        color: var(--on-fixed-background-primary-disabled);
       }
     }
 
   }
 
   &__error {
-    color: light.$on-surface-error;
+    color: var(--on-surface-error);
     margin-top: spacing.$xxs;
   }
 
@@ -164,16 +164,16 @@
     gap: spacing.$xs;
 
     &--theme-light {
-      color: light.$on-background-primary-disabled;
+      color: var(--on-background-primary-disabled);
       &--error {
-        color: light.$on-surface-error;
+        color: var(--on-surface-error);
       }
     }
 
     &--theme-dark {
-      color: light.$on-fixed-background-primary-disabled;
+      color: var(--on-fixed-background-primary-disabled);
       &--error {
-        color: light.$on-fixed-surface-error;
+        color: var(--on-fixed-surface-error);
       }
     }
   }