@sats-group/ui-lib 81.0.1 → 81.2.0

package/react/collapse/collapse.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/collapse/collapse.tsx"],
-  "sourcesContent": ["import React, { Component, createRef } from 'react';\n\nimport { Collapse as Props } from './collapse.types';\n\ninterface CollapseState {\n  height: number | null;\n  isAnimating: boolean;\n  isMounted: boolean;\n  isOpen: boolean;\n  shouldAnimate?: boolean;\n}\n\nclass Collapse extends Component<Props, CollapseState> {\n  static defaultProps: Props = {\n    animateChildren: false,\n    component: 'div',\n    componentProps: {},\n    duration: 500,\n    easing: 'cubic-bezier(0.3,0,0,1)',\n    forceInitialAnimation: false,\n    isOpen: false,\n    onMeasure: () => {},\n    unmountChildren: false,\n  };\n\n  state: CollapseState = {\n    height: this.props.forceInitialAnimation || !this.props.isOpen ? 0 : null,\n    isAnimating: false,\n    isMounted: false,\n    isOpen: this.props.isOpen || false,\n  };\n\n  private wrapperRef = createRef<HTMLElement>();\n  private previousHeight: number = 0;\n  private raf: number | null = null;\n  private timer: number | null = null;\n  private isAnimating: boolean = false;\n\n  getHeight = (): number => {\n    const child = this.wrapperRef.current\n      ?.firstElementChild as HTMLElement | null;\n    return child ? Math.max(child.offsetHeight - 1, 0) : 0; // -1px to avoid jump after transition\n  };\n\n  transition = () => {\n    const newHeight = this.props.isOpen ? this.getHeight() : 0;\n\n    clearTimeout(this.timer!);\n    cancelAnimationFrame(this.raf!);\n    this.isAnimating = true;\n\n    this.setState(\n      { height: this.previousHeight, isAnimating: true, shouldAnimate: false },\n      () => {\n        this.previousHeight = newHeight;\n        this.raf = requestAnimationFrame(() => {\n          this.raf = requestAnimationFrame(() => {\n            this.setState({ height: newHeight }, () => {\n              this.timer = window.setTimeout(() => {\n                this.setState(\n                  {\n                    height: this.props.isOpen ? null : 0,\n                    isAnimating: false,\n                  },\n                  () => {\n                    this.isAnimating = false;\n                  },\n                );\n              }, this.props.duration);\n            });\n          });\n        });\n      },\n    );\n  };\n\n  componentDidMount() {\n    this.setState({ isMounted: true }, () => {\n      if (this.props.forceInitialAnimation) {\n        this.transition();\n      } else {\n        this.previousHeight = this.props.isOpen ? this.getHeight() : 0;\n        this.setState({ isAnimating: false });\n      }\n    });\n  }\n\n  onTransitionEnd = () => {\n    this.previousHeight = this.getHeight();\n  };\n\n  static getDerivedStateFromProps(\n    nextProps: Props,\n    prevState: CollapseState,\n  ): Partial<CollapseState> | null {\n    const openDidChange = nextProps.isOpen !== prevState.isOpen;\n    const forceAnimation =\n      !prevState.isMounted &&\n      nextProps.forceInitialAnimation &&\n      nextProps.isOpen;\n\n    return {\n      isOpen: nextProps.isOpen || false,\n      shouldAnimate: openDidChange || forceAnimation,\n    };\n  }\n\n  getSnapshotBeforeUpdate(): number {\n    return this.props.isOpen ? this.getHeight() : 0;\n  }\n\n  componentDidUpdate(\n    _prevProps: Props,\n    _prevState: CollapseState,\n    snapshot: number,\n  ) {\n    if (this.isAnimating && !this.state.shouldAnimate) {\n      return;\n    }\n\n    const newHeight = this.getHeight();\n    const childrenDidChange = newHeight !== snapshot;\n    this.props.onMeasure!(newHeight);\n\n    if (\n      this.state.shouldAnimate ||\n      (childrenDidChange && this.props.animateChildren)\n    ) {\n      this.transition();\n    } else if (childrenDidChange) {\n      this.previousHeight = this.getHeight();\n    }\n  }\n\n  componentWillUnmount() {\n    clearTimeout(this.timer!);\n    cancelAnimationFrame(this.raf!);\n  }\n\n  render() {\n    const { isAnimating, isMounted } = this.state;\n    const {\n      component = 'div',\n      componentProps = {},\n      forceInitialAnimation,\n      isOpen,\n      unmountChildren,\n      className,\n      children,\n    } = this.props;\n    const shouldMount = unmountChildren ? isOpen || isAnimating : true;\n    const initiallyHidden = !isMounted && forceInitialAnimation && isOpen;\n\n    return React.createElement(\n      component,\n      {\n        ...componentProps,\n        className: className,\n        onTransitionEnd: this.onTransitionEnd,\n        ref: this.wrapperRef,\n        style: {\n          ...componentProps.style,\n          height: this.state.height,\n          overflow:\n            isAnimating || !isOpen || initiallyHidden ? 'hidden' : undefined,\n          visibility:\n            (!isAnimating && !isOpen) || initiallyHidden ? 'hidden' : undefined,\n          transition:\n            isAnimating || initiallyHidden\n              ? `height ${this.props.duration}ms ${this.props.easing}`\n              : undefined,\n        },\n      },\n      shouldMount && children,\n    );\n  }\n}\n\nexport default Collapse;\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client';\n\nimport React, { Component, createRef } from 'react';\n\nimport { Collapse as Props } from './collapse.types';\n\ninterface CollapseState {\n  height: number | null;\n  isAnimating: boolean;\n  isMounted: boolean;\n  isOpen: boolean;\n  shouldAnimate?: boolean;\n}\n\nclass Collapse extends Component<Props, CollapseState> {\n  static defaultProps: Props = {\n    animateChildren: false,\n    component: 'div',\n    componentProps: {},\n    duration: 500,\n    easing: 'cubic-bezier(0.3,0,0,1)',\n    forceInitialAnimation: false,\n    isOpen: false,\n    onMeasure: () => {},\n    unmountChildren: false,\n  };\n\n  state: CollapseState = {\n    height: this.props.forceInitialAnimation || !this.props.isOpen ? 0 : null,\n    isAnimating: false,\n    isMounted: false,\n    isOpen: this.props.isOpen || false,\n  };\n\n  private wrapperRef = createRef<HTMLElement>();\n  private previousHeight: number = 0;\n  private raf: number | null = null;\n  private timer: number | null = null;\n  private isAnimating: boolean = false;\n\n  getHeight = (): number => {\n    const child = this.wrapperRef.current\n      ?.firstElementChild as HTMLElement | null;\n    return child ? Math.max(child.offsetHeight - 1, 0) : 0; // -1px to avoid jump after transition\n  };\n\n  transition = () => {\n    const newHeight = this.props.isOpen ? this.getHeight() : 0;\n\n    clearTimeout(this.timer!);\n    cancelAnimationFrame(this.raf!);\n    this.isAnimating = true;\n\n    this.setState(\n      { height: this.previousHeight, isAnimating: true, shouldAnimate: false },\n      () => {\n        this.previousHeight = newHeight;\n        this.raf = requestAnimationFrame(() => {\n          this.raf = requestAnimationFrame(() => {\n            this.setState({ height: newHeight }, () => {\n              this.timer = window.setTimeout(() => {\n                this.setState(\n                  {\n                    height: this.props.isOpen ? null : 0,\n                    isAnimating: false,\n                  },\n                  () => {\n                    this.isAnimating = false;\n                  },\n                );\n              }, this.props.duration);\n            });\n          });\n        });\n      },\n    );\n  };\n\n  componentDidMount() {\n    this.setState({ isMounted: true }, () => {\n      if (this.props.forceInitialAnimation) {\n        this.transition();\n      } else {\n        this.previousHeight = this.props.isOpen ? this.getHeight() : 0;\n        this.setState({ isAnimating: false });\n      }\n    });\n  }\n\n  onTransitionEnd = () => {\n    this.previousHeight = this.getHeight();\n  };\n\n  static getDerivedStateFromProps(\n    nextProps: Props,\n    prevState: CollapseState,\n  ): Partial<CollapseState> | null {\n    const openDidChange = nextProps.isOpen !== prevState.isOpen;\n    const forceAnimation =\n      !prevState.isMounted &&\n      nextProps.forceInitialAnimation &&\n      nextProps.isOpen;\n\n    return {\n      isOpen: nextProps.isOpen || false,\n      shouldAnimate: openDidChange || forceAnimation,\n    };\n  }\n\n  getSnapshotBeforeUpdate(): number {\n    return this.props.isOpen ? this.getHeight() : 0;\n  }\n\n  componentDidUpdate(\n    _prevProps: Props,\n    _prevState: CollapseState,\n    snapshot: number,\n  ) {\n    if (this.isAnimating && !this.state.shouldAnimate) {\n      return;\n    }\n\n    const newHeight = this.getHeight();\n    const childrenDidChange = newHeight !== snapshot;\n    this.props.onMeasure!(newHeight);\n\n    if (\n      this.state.shouldAnimate ||\n      (childrenDidChange && this.props.animateChildren)\n    ) {\n      this.transition();\n    } else if (childrenDidChange) {\n      this.previousHeight = this.getHeight();\n    }\n  }\n\n  componentWillUnmount() {\n    clearTimeout(this.timer!);\n    cancelAnimationFrame(this.raf!);\n  }\n\n  render() {\n    const { isAnimating, isMounted } = this.state;\n    const {\n      component = 'div',\n      componentProps = {},\n      forceInitialAnimation,\n      isOpen,\n      unmountChildren,\n      className,\n      children,\n    } = this.props;\n    const shouldMount = unmountChildren ? isOpen || isAnimating : true;\n    const initiallyHidden = !isMounted && forceInitialAnimation && isOpen;\n\n    return React.createElement(\n      component,\n      {\n        ...componentProps,\n        className: className,\n        onTransitionEnd: this.onTransitionEnd,\n        ref: this.wrapperRef,\n        style: {\n          ...componentProps.style,\n          height: this.state.height,\n          overflow:\n            isAnimating || !isOpen || initiallyHidden ? 'hidden' : undefined,\n          visibility:\n            (!isAnimating && !isOpen) || initiallyHidden ? 'hidden' : undefined,\n          transition:\n            isAnimating || initiallyHidden\n              ? `height ${this.props.duration}ms ${this.props.easing}`\n              : undefined,\n        },\n      },\n      shouldMount && children,\n    );\n  }\n}\n\nexport default Collapse;\n"],
+  "mappings": "0eAEA,OAAOA,GAAS,aAAAC,EAAW,aAAAC,MAAiB,QAY5C,MAAMC,UAAiBF,CAAgC,CAAvD,kCAaEG,EAAA,aAAuB,CACrB,OAAQ,KAAK,MAAM,uBAAyB,CAAC,KAAK,MAAM,OAAS,EAAI,KACrE,YAAa,GACb,UAAW,GACX,OAAQ,KAAK,MAAM,QAAU,EAC/B,GAEAA,EAAA,KAAQ,aAAaF,EAAuB,GAC5CE,EAAA,KAAQ,iBAAyB,GACjCA,EAAA,KAAQ,MAAqB,MAC7BA,EAAA,KAAQ,QAAuB,MAC/BA,EAAA,KAAQ,cAAuB,IAE/BA,EAAA,iBAAY,IAAc,CAxC5B,IAAAC,EAyCI,MAAMC,GAAQD,EAAA,KAAK,WAAW,UAAhB,YAAAA,EACV,kBACJ,OAAOC,EAAQ,KAAK,IAAIA,EAAM,aAAe,EAAG,CAAC,EAAI,CACvD,GAEAF,EAAA,kBAAa,IAAM,CACjB,MAAMG,EAAY,KAAK,MAAM,OAAS,KAAK,UAAU,EAAI,EAEzD,aAAa,KAAK,KAAM,EACxB,qBAAqB,KAAK,GAAI,EAC9B,KAAK,YAAc,GAEnB,KAAK,SACH,CAAE,OAAQ,KAAK,eAAgB,YAAa,GAAM,cAAe,EAAM,EACvE,IAAM,CACJ,KAAK,eAAiBA,EACtB,KAAK,IAAM,sBAAsB,IAAM,CACrC,KAAK,IAAM,sBAAsB,IAAM,CACrC,KAAK,SAAS,CAAE,OAAQA,CAAU,EAAG,IAAM,CACzC,KAAK,MAAQ,OAAO,WAAW,IAAM,CACnC,KAAK,SACH,CACE,OAAQ,KAAK,MAAM,OAAS,KAAO,EACnC,YAAa,EACf,EACA,IAAM,CACJ,KAAK,YAAc,EACrB,CACF,CACF,EAAG,KAAK,MAAM,QAAQ,CACxB,CAAC,CACH,CAAC,CACH,CAAC,CACH,CACF,CACF,GAaAH,EAAA,uBAAkB,IAAM,CACtB,KAAK,eAAiB,KAAK,UAAU,CACvC,GAbA,mBAAoB,CAClB,KAAK,SAAS,CAAE,UAAW,EAAK,EAAG,IAAM,CACnC,KAAK,MAAM,sBACb,KAAK,WAAW,GAEhB,KAAK,eAAiB,KAAK,MAAM,OAAS,KAAK,UAAU,EAAI,EAC7D,KAAK,SAAS,CAAE,YAAa,EAAM,CAAC,EAExC,CAAC,CACH,CAMA,OAAO,yBACLI,EACAC,EAC+B,CAC/B,MAAMC,EAAgBF,EAAU,SAAWC,EAAU,OAC/CE,EACJ,CAACF,EAAU,WACXD,EAAU,uBACVA,EAAU,OAEZ,MAAO,CACL,OAAQA,EAAU,QAAU,GAC5B,cAAeE,GAAiBC,CAClC,CACF,CAEA,yBAAkC,CAChC,OAAO,KAAK,MAAM,OAAS,KAAK,UAAU,EAAI,CAChD,CAEA,mBACEC,EACAC,EACAC,EACA,CACA,GAAI,KAAK,aAAe,CAAC,KAAK,MAAM,cAClC,OAGF,MAAMP,EAAY,KAAK,UAAU,EAC3BQ,EAAoBR,IAAcO,EACxC,KAAK,MAAM,UAAWP,CAAS,EAG7B,KAAK,MAAM,eACVQ,GAAqB,KAAK,MAAM,gBAEjC,KAAK,WAAW,EACPA,IACT,KAAK,eAAiB,KAAK,UAAU,EAEzC,CAEA,sBAAuB,CACrB,aAAa,KAAK,KAAM,EACxB,qBAAqB,KAAK,GAAI,CAChC,CAEA,QAAS,CACP,KAAM,CAAE,YAAAC,EAAa,UAAAC,CAAU,EAAI,KAAK,MAClC,CACJ,UAAAC,EAAY,MACZ,eAAAC,EAAiB,CAAC,EAClB,sBAAAC,EACA,OAAAC,EACA,gBAAAC,EACA,UAAAC,EACA,SAAAC,CACF,EAAI,KAAK,MACHC,EAAcH,EAAkBD,GAAUL,EAAc,GACxDU,EAAkB,CAACT,GAAaG,GAAyBC,EAE/D,OAAOrB,EAAM,cACXkB,EACAS,EAAAC,EAAA,GACKT,GADL,CAEE,UAAWI,EACX,gBAAiB,KAAK,gBACtB,IAAK,KAAK,WACV,MAAOI,EAAAC,EAAA,GACFT,EAAe,OADb,CAEL,OAAQ,KAAK,MAAM,OACnB,SACEH,GAAe,CAACK,GAAUK,EAAkB,SAAW,OACzD,WACG,CAACV,GAAe,CAACK,GAAWK,EAAkB,SAAW,OAC5D,WACEV,GAAeU,EACX,UAAU,KAAK,MAAM,QAAQ,MAAM,KAAK,MAAM,MAAM,GACpD,MACR,EACF,GACAD,GAAeD,CACjB,CACF,CACF,CAnKEpB,EADID,EACG,eAAsB,CAC3B,gBAAiB,GACjB,UAAW,MACX,eAAgB,CAAC,EACjB,SAAU,IACV,OAAQ,0BACR,sBAAuB,GACvB,OAAQ,GACR,UAAW,IAAM,CAAC,EAClB,gBAAiB,EACnB,GA2JF,IAAO0B,EAAQ1B",
   "names": ["React", "Component", "createRef", "Collapse", "__publicField", "_a", "child", "newHeight", "nextProps", "prevState", "openDidChange", "forceAnimation", "_prevProps", "_prevState", "snapshot", "childrenDidChange", "isAnimating", "isMounted", "component", "componentProps", "forceInitialAnimation", "isOpen", "unmountChildren", "className", "children", "shouldMount", "initiallyHidden", "__spreadProps", "__spreadValues", "collapse_default"]
 }

package/react/confirmation/confirmation.js

@@ -1,2 +1,2 @@
-var b=Object.defineProperty,h=Object.defineProperties;var y=Object.getOwnPropertyDescriptors;var c=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var l=(a,i,r)=>i in a?b(a,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):a[i]=r,t=(a,i)=>{for(var r in i||(i={}))T.call(i,r)&&l(a,r,i[r]);if(c)for(var r of c(i))C.call(i,r)&&l(a,r,i[r]);return a},m=(a,i)=>h(a,y(i));import*as o from"react";import*as x from"react-dom";import n from"../button";import u from"../link-button";import M from"../modal/tab-trapper";import e from"../text";import P from"../hooks/use-escape";import{useIsMounted as k}from"../hooks/use-is-mounted";const z=({children:a,close:i,confirmationButton:r,confirmationLink:s,onClose:d=()=>{},onConfirm:v,text:p,title:f,ariaLabel:_,actionButtonType:N="primary"})=>(P(d),k()?x.createPortal(o.createElement("div",{className:"confirmation",role:"dialog","aria-label":_},o.createElement("div",{className:"confirmation__content"},o.createElement(M,{isActive:!0},o.createElement("div",{className:"confirmation__wrapper"},f?o.createElement(e,{className:"confirmation__title",elementName:"h2",theme:e.themes.emphasis,size:e.sizes.headline3},f):void 0,p?o.createElement(e,{className:"confirmation__text"},p):o.createElement("div",{className:"confirmation__children"},a),o.createElement("div",{className:"confirmation__buttons"},r?o.createElement(n,m(t({className:"confirmation__button",variant:N==="primary"?n.variants.primary:n.variants.primaryDestructive},r),{onClick:v})):void 0,s?o.createElement(u,t({className:"confirmation__button",variant:u.variants.primary},s)):void 0,i?o.createElement(n,m(t({className:"confirmation__button",variant:n.variants.secondary},i),{onClick:d})):void 0))))),document.body):null);var j=z;export{j as default};
+"use client";var b=Object.defineProperty,h=Object.defineProperties;var y=Object.getOwnPropertyDescriptors;var c=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var l=(a,i,r)=>i in a?b(a,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):a[i]=r,t=(a,i)=>{for(var r in i||(i={}))T.call(i,r)&&l(a,r,i[r]);if(c)for(var r of c(i))C.call(i,r)&&l(a,r,i[r]);return a},m=(a,i)=>h(a,y(i));import*as n from"react";import*as x from"react-dom";import o from"../button";import u from"../link-button";import M from"../modal/tab-trapper";import e from"../text";import P from"../hooks/use-escape";import{useIsMounted as k}from"../hooks/use-is-mounted";const z=({children:a,close:i,confirmationButton:r,confirmationLink:s,onClose:d=()=>{},onConfirm:v,text:p,title:f,ariaLabel:_,actionButtonType:N="primary"})=>(P(d),k()?x.createPortal(n.createElement("div",{className:"confirmation",role:"dialog","aria-label":_},n.createElement("div",{className:"confirmation__content"},n.createElement(M,{isActive:!0},n.createElement("div",{className:"confirmation__wrapper"},f?n.createElement(e,{className:"confirmation__title",elementName:"h2",theme:e.themes.emphasis,size:e.sizes.headline3},f):void 0,p?n.createElement(e,{className:"confirmation__text"},p):n.createElement("div",{className:"confirmation__children"},a),n.createElement("div",{className:"confirmation__buttons"},r?n.createElement(o,m(t({className:"confirmation__button",variant:N==="primary"?o.variants.primary:o.variants.primaryDestructive},r),{onClick:v})):void 0,s?n.createElement(u,t({className:"confirmation__button",variant:u.variants.primary},s)):void 0,i?n.createElement(o,m(t({className:"confirmation__button",variant:o.variants.secondary},i),{onClick:d})):void 0))))),document.body):null);var j=z;export{j as default};
 //# sourceMappingURL=confirmation.js.map

package/react/confirmation/confirmation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/confirmation/confirmation.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\n\nimport Button from '../button';\nimport LinkButton from '../link-button';\nimport TabTrapper from '../modal/tab-trapper';\nimport Text from '../text';\nimport useEscape from '../hooks/use-escape';\nimport { useIsMounted } from '../hooks/use-is-mounted';\n\nimport { Confirmation as Props } from './confirmation.types';\n\nconst Confirmation: React.FC<React.PropsWithChildren<Props>> = ({\n  children,\n  close,\n  confirmationButton,\n  confirmationLink,\n  onClose = () => {},\n  onConfirm,\n  text,\n  title,\n  ariaLabel,\n  actionButtonType = 'primary',\n}) => {\n  useEscape(onClose);\n\n  const isMounted = useIsMounted();\n\n  if (!isMounted) {\n    return null;\n  }\n\n  return ReactDOM.createPortal(\n    <div className=\"confirmation\" role=\"dialog\" aria-label={ariaLabel}>\n      <div className=\"confirmation__content\">\n        <TabTrapper isActive={true}>\n          <div className=\"confirmation__wrapper\">\n            {title ? (\n              <Text\n                className=\"confirmation__title\"\n                elementName=\"h2\"\n                theme={Text.themes.emphasis}\n                size={Text.sizes.headline3}\n              >\n                {title}\n              </Text>\n            ) : undefined}\n            {text ? (\n              <Text className=\"confirmation__text\">{text}</Text>\n            ) : (\n              <div className=\"confirmation__children\">{children}</div>\n            )}\n            <div className=\"confirmation__buttons\">\n              {confirmationButton ? (\n                <Button\n                  className=\"confirmation__button\"\n                  variant={\n                    actionButtonType === 'primary'\n                      ? Button.variants.primary\n                      : Button.variants.primaryDestructive\n                  }\n                  {...confirmationButton}\n                  onClick={onConfirm}\n                />\n              ) : undefined}\n              {confirmationLink ? (\n                <LinkButton\n                  className=\"confirmation__button\"\n                  variant={LinkButton.variants.primary}\n                  {...confirmationLink}\n                />\n              ) : undefined}\n              {close ? (\n                <Button\n                  className=\"confirmation__button\"\n                  variant={Button.variants.secondary}\n                  {...close}\n                  onClick={onClose}\n                />\n              ) : undefined}\n            </div>\n          </div>\n        </TabTrapper>\n      </div>\n    </div>,\n    document.body,\n  );\n};\n\nexport default Confirmation;\n"],
-  "mappings": "6aAAA,UAAYA,MAAW,QACvB,UAAYC,MAAc,YAE1B,OAAOC,MAAY,YACnB,OAAOC,MAAgB,iBACvB,OAAOC,MAAgB,uBACvB,OAAOC,MAAU,UACjB,OAAOC,MAAe,sBACtB,OAAS,gBAAAC,MAAoB,0BAI7B,MAAMC,EAAyD,CAAC,CAC9D,SAAAC,EACA,MAAAC,EACA,mBAAAC,EACA,iBAAAC,EACA,QAAAC,EAAU,IAAM,CAAC,EACjB,UAAAC,EACA,KAAAC,EACA,MAAAC,EACA,UAAAC,EACA,iBAAAC,EAAmB,SACrB,KACEZ,EAAUO,CAAO,EAECN,EAAa,EAMxBN,EAAS,aACdD,EAAA,cAAC,OAAI,UAAU,eAAe,KAAK,SAAS,aAAYiB,GACtDjB,EAAA,cAAC,OAAI,UAAU,yBACbA,EAAA,cAACI,EAAA,CAAW,SAAU,IACpBJ,EAAA,cAAC,OAAI,UAAU,yBACZgB,EACChB,EAAA,cAACK,EAAA,CACC,UAAU,sBACV,YAAY,KACZ,MAAOA,EAAK,OAAO,SACnB,KAAMA,EAAK,MAAM,WAEhBW,CACH,EACE,OACHD,EACCf,EAAA,cAACK,EAAA,CAAK,UAAU,sBAAsBU,CAAK,EAE3Cf,EAAA,cAAC,OAAI,UAAU,0BAA0BS,CAAS,EAEpDT,EAAA,cAAC,OAAI,UAAU,yBACZW,EACCX,EAAA,cAACE,EAAAiB,EAAAC,EAAA,CACC,UAAU,uBACV,QACEF,IAAqB,UACjBhB,EAAO,SAAS,QAChBA,EAAO,SAAS,oBAElBS,GAPL,CAQC,QAASG,GACX,EACE,OACHF,EACCZ,EAAA,cAACG,EAAAiB,EAAA,CACC,UAAU,uBACV,QAASjB,EAAW,SAAS,SACzBS,EACN,EACE,OACHF,EACCV,EAAA,cAACE,EAAAiB,EAAAC,EAAA,CACC,UAAU,uBACV,QAASlB,EAAO,SAAS,WACrBQ,GAHL,CAIC,QAASG,GACX,EACE,MACN,CACF,CACF,CACF,CACF,EACA,SAAS,IACX,EAzDS,MA4DX,IAAOQ,EAAQb",
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\n\nimport Button from '../button';\nimport LinkButton from '../link-button';\nimport TabTrapper from '../modal/tab-trapper';\nimport Text from '../text';\nimport useEscape from '../hooks/use-escape';\nimport { useIsMounted } from '../hooks/use-is-mounted';\n\nimport { Confirmation as Props } from './confirmation.types';\n\nconst Confirmation: React.FC<React.PropsWithChildren<Props>> = ({\n  children,\n  close,\n  confirmationButton,\n  confirmationLink,\n  onClose = () => {},\n  onConfirm,\n  text,\n  title,\n  ariaLabel,\n  actionButtonType = 'primary',\n}) => {\n  useEscape(onClose);\n\n  const isMounted = useIsMounted();\n\n  if (!isMounted) {\n    return null;\n  }\n\n  return ReactDOM.createPortal(\n    <div className=\"confirmation\" role=\"dialog\" aria-label={ariaLabel}>\n      <div className=\"confirmation__content\">\n        <TabTrapper isActive={true}>\n          <div className=\"confirmation__wrapper\">\n            {title ? (\n              <Text\n                className=\"confirmation__title\"\n                elementName=\"h2\"\n                theme={Text.themes.emphasis}\n                size={Text.sizes.headline3}\n              >\n                {title}\n              </Text>\n            ) : undefined}\n            {text ? (\n              <Text className=\"confirmation__text\">{text}</Text>\n            ) : (\n              <div className=\"confirmation__children\">{children}</div>\n            )}\n            <div className=\"confirmation__buttons\">\n              {confirmationButton ? (\n                <Button\n                  className=\"confirmation__button\"\n                  variant={\n                    actionButtonType === 'primary'\n                      ? Button.variants.primary\n                      : Button.variants.primaryDestructive\n                  }\n                  {...confirmationButton}\n                  onClick={onConfirm}\n                />\n              ) : undefined}\n              {confirmationLink ? (\n                <LinkButton\n                  className=\"confirmation__button\"\n                  variant={LinkButton.variants.primary}\n                  {...confirmationLink}\n                />\n              ) : undefined}\n              {close ? (\n                <Button\n                  className=\"confirmation__button\"\n                  variant={Button.variants.secondary}\n                  {...close}\n                  onClick={onClose}\n                />\n              ) : undefined}\n            </div>\n          </div>\n        </TabTrapper>\n      </div>\n    </div>,\n    document.body,\n  );\n};\n\nexport default Confirmation;\n"],
+  "mappings": "0bAEA,UAAYA,MAAW,QACvB,UAAYC,MAAc,YAE1B,OAAOC,MAAY,YACnB,OAAOC,MAAgB,iBACvB,OAAOC,MAAgB,uBACvB,OAAOC,MAAU,UACjB,OAAOC,MAAe,sBACtB,OAAS,gBAAAC,MAAoB,0BAI7B,MAAMC,EAAyD,CAAC,CAC9D,SAAAC,EACA,MAAAC,EACA,mBAAAC,EACA,iBAAAC,EACA,QAAAC,EAAU,IAAM,CAAC,EACjB,UAAAC,EACA,KAAAC,EACA,MAAAC,EACA,UAAAC,EACA,iBAAAC,EAAmB,SACrB,KACEZ,EAAUO,CAAO,EAECN,EAAa,EAMxBN,EAAS,aACdD,EAAA,cAAC,OAAI,UAAU,eAAe,KAAK,SAAS,aAAYiB,GACtDjB,EAAA,cAAC,OAAI,UAAU,yBACbA,EAAA,cAACI,EAAA,CAAW,SAAU,IACpBJ,EAAA,cAAC,OAAI,UAAU,yBACZgB,EACChB,EAAA,cAACK,EAAA,CACC,UAAU,sBACV,YAAY,KACZ,MAAOA,EAAK,OAAO,SACnB,KAAMA,EAAK,MAAM,WAEhBW,CACH,EACE,OACHD,EACCf,EAAA,cAACK,EAAA,CAAK,UAAU,sBAAsBU,CAAK,EAE3Cf,EAAA,cAAC,OAAI,UAAU,0BAA0BS,CAAS,EAEpDT,EAAA,cAAC,OAAI,UAAU,yBACZW,EACCX,EAAA,cAACE,EAAAiB,EAAAC,EAAA,CACC,UAAU,uBACV,QACEF,IAAqB,UACjBhB,EAAO,SAAS,QAChBA,EAAO,SAAS,oBAElBS,GAPL,CAQC,QAASG,GACX,EACE,OACHF,EACCZ,EAAA,cAACG,EAAAiB,EAAA,CACC,UAAU,uBACV,QAASjB,EAAW,SAAS,SACzBS,EACN,EACE,OACHF,EACCV,EAAA,cAACE,EAAAiB,EAAAC,EAAA,CACC,UAAU,uBACV,QAASlB,EAAO,SAAS,WACrBQ,GAHL,CAIC,QAASG,GACX,EACE,MACN,CACF,CACF,CACF,CACF,EACA,SAAS,IACX,EAzDS,MA4DX,IAAOQ,EAAQb",
   "names": ["React", "ReactDOM", "Button", "LinkButton", "TabTrapper", "Text", "useEscape", "useIsMounted", "Confirmation", "children", "close", "confirmationButton", "confirmationLink", "onClose", "onConfirm", "text", "title", "ariaLabel", "actionButtonType", "__spreadProps", "__spreadValues", "confirmation_default"]
 }

package/react/confirmation/confirmation.scss

@@ -1,13 +1,13 @@
 @use '../../tokens/corner-radius';
 @use '../../tokens/elevation';
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 
 .confirmation {
   $padding: spacing.$l;
   background: color-mix(
     in srgb,
-    light.$fixed-background-secondary-default
+    var(--fixed-background-secondary-default)
     70%, transparent
   );
   box-sizing: border-box;
@@ -54,9 +54,9 @@
 
   &__wrapper {
     @include elevation.level(24);
-    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);
     overflow: auto;
     padding: spacing.$l;
   }

package/react/context-menu/context-menu.js

@@ -1,2 +1,2 @@
-var E=Object.defineProperty,S=Object.defineProperties;var g=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var C=Object.prototype.hasOwnProperty,L=Object.prototype.propertyIsEnumerable;var N=(m,o,n)=>o in m?E(m,o,{enumerable:!0,configurable:!0,writable:!0,value:n}):m[o]=n,u=(m,o)=>{for(var n in o||(o={}))C.call(o,n)&&N(m,n,o[n]);if(b)for(var n of b(o))L.call(o,n)&&N(m,n,o[n]);return m},w=(m,o)=>S(m,g(o));import t,{useEffect as P,useRef as W,useState as M}from"react";import r from"classnames";import B from"../icons/18/close";import F from"../hidden-input";import H from"../hooks/focus-previous-element";import A from"../modal/tab-trapper";import O from"../hooks/use-click-outside";import j from"../hooks/use-escape";import x from"../button";import p from"../text";import q from"../ts/debounce";import{Types as _,itemThemes as G,positions as y}from"./context-menu.types";const h=({list:m,isOpen:o,onClose:n=()=>{},position:f=y.right,title:z,close:k,descriptions:i,smallDescription:l})=>{const d=W(null),[a,v]=M();O(d,n),j(n),H(d,o),P(()=>{a||v(window.innerWidth);const s=()=>{v(window.innerWidth)};return window.addEventListener("resize",q(s,2e3)),()=>window.addEventListener("resize",s)});const c=t.createElement("div",{className:r("context-menu",{[`context-menu--${f}`]:f}),ref:d,tabIndex:-1},t.createElement("div",{className:r("context-menu__texts-wrapper",{"context-menu__texts-wrapper--center":!(i!=null&&i.length)})},t.createElement("div",{className:"context-menu__texts"},t.createElement(p,{theme:p.themes.emphasis,size:p.sizes.small},z),i?i.map(s=>t.createElement(p,{size:p.sizes.small,className:"context-menu__texts-description",key:s},s)):null,l?t.createElement(p,{size:p.sizes.interface,className:"context-menu__texts-description",key:l},l):null),t.createElement("div",null,t.createElement(x,w(u({},k),{iconOnly:!0,leadingIcon:t.createElement(B,null),onClick:n,size:x.sizes.small,variant:x.variants.tertiary})))),t.createElement("div",{className:"context-menu__list-items"},m.map(({icon:s,item:e},$)=>t.createElement("div",{key:e.props.text+$},e.type===_.Link?t.createElement("a",{href:e.props.href,className:r("context-menu__list-item-link",{[`context-menu__list-item-link--theme-${e.props.theme}`]:e.props.theme}),"data-testid":e.props.testId},s?t.createElement("div",{className:r("context-menu__list-icon",{[`context-menu__list-icon--theme-${e.props.theme}`]:e.props.theme})},s):null,t.createElement(p,null,e.props.text)):e.type===_.Form?t.createElement("form",{onSubmit:e.props.handleSubmit,action:e.props.action,method:"POST",className:r("context-menu__list-item-form",{[`context-menu__list-item-form--theme-${e.props.theme}`]:e.props.theme})},t.createElement("button",{type:"submit",className:r("context-menu__list-item-form-button",{[`context-menu__list-item-form-button--theme-${e.props.theme}`]:e.props.theme}),"data-testid":e.props.testId},s?t.createElement("div",{className:r("context-menu__list-icon",{[`context-menu__list-icon--theme-${e.props.theme}`]:e.props.theme})},s):null,t.createElement(p,null,e.props.text)),e.props.hiddenInputs?e.props.hiddenInputs.map((T,I)=>t.createElement(F,u({key:T.name+I},T))):null):e.type===_.Button?t.createElement("button",u({className:r("context-menu__list-item-button",{[`context-menu__list-item-button--theme-${e.props.theme}`]:e.props.theme})},e.props),s?t.createElement("div",{className:r("context-menu__list-icon",{[`context-menu__list-icon--theme-${e.props.theme}`]:e.props.theme})},s):null,t.createElement(p,null,e.props.text)):null))));return o?t.createElement(t.Fragment,null,t.createElement("div",{className:"context-menu__background-overlay"}),a&&a<600?t.createElement(A,{isActive:o},c):t.createElement("div",null,c)):null};h.position=y,h.itemTheme=G;var se=h;export{se as default};
+"use client";var E=Object.defineProperty,S=Object.defineProperties;var g=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var C=Object.prototype.hasOwnProperty,L=Object.prototype.propertyIsEnumerable;var N=(m,o,n)=>o in m?E(m,o,{enumerable:!0,configurable:!0,writable:!0,value:n}):m[o]=n,u=(m,o)=>{for(var n in o||(o={}))C.call(o,n)&&N(m,n,o[n]);if(b)for(var n of b(o))L.call(o,n)&&N(m,n,o[n]);return m},w=(m,o)=>S(m,g(o));import t,{useEffect as P,useRef as W,useState as M}from"react";import r from"classnames";import B from"../icons/18/close";import F from"../hidden-input";import H from"../hooks/focus-previous-element";import A from"../modal/tab-trapper";import O from"../hooks/use-click-outside";import j from"../hooks/use-escape";import x from"../button";import p from"../text";import q from"../ts/debounce";import{Types as _,itemThemes as G,positions as y}from"./context-menu.types";const h=({list:m,isOpen:o,onClose:n=()=>{},position:f=y.right,title:z,close:k,descriptions:i,smallDescription:l})=>{const d=W(null),[a,v]=M();O(d,n),j(n),H(d,o),P(()=>{a||v(window.innerWidth);const s=()=>{v(window.innerWidth)};return window.addEventListener("resize",q(s,2e3)),()=>window.addEventListener("resize",s)});const c=t.createElement("div",{className:r("context-menu",{[`context-menu--${f}`]:f}),ref:d,tabIndex:-1},t.createElement("div",{className:r("context-menu__texts-wrapper",{"context-menu__texts-wrapper--center":!(i!=null&&i.length)})},t.createElement("div",{className:"context-menu__texts"},t.createElement(p,{theme:p.themes.emphasis,size:p.sizes.small},z),i?i.map(s=>t.createElement(p,{size:p.sizes.small,className:"context-menu__texts-description",key:s},s)):null,l?t.createElement(p,{size:p.sizes.interface,className:"context-menu__texts-description",key:l},l):null),t.createElement("div",null,t.createElement(x,w(u({},k),{iconOnly:!0,leadingIcon:t.createElement(B,null),onClick:n,size:x.sizes.small,variant:x.variants.tertiary})))),t.createElement("div",{className:"context-menu__list-items"},m.map(({icon:s,item:e},$)=>t.createElement("div",{key:e.props.text+$},e.type===_.Link?t.createElement("a",{href:e.props.href,className:r("context-menu__list-item-link",{[`context-menu__list-item-link--theme-${e.props.theme}`]:e.props.theme}),"data-testid":e.props.testId},s?t.createElement("div",{className:r("context-menu__list-icon",{[`context-menu__list-icon--theme-${e.props.theme}`]:e.props.theme})},s):null,t.createElement(p,null,e.props.text)):e.type===_.Form?t.createElement("form",{onSubmit:e.props.handleSubmit,action:e.props.action,method:"POST",className:r("context-menu__list-item-form",{[`context-menu__list-item-form--theme-${e.props.theme}`]:e.props.theme})},t.createElement("button",{type:"submit",className:r("context-menu__list-item-form-button",{[`context-menu__list-item-form-button--theme-${e.props.theme}`]:e.props.theme}),"data-testid":e.props.testId},s?t.createElement("div",{className:r("context-menu__list-icon",{[`context-menu__list-icon--theme-${e.props.theme}`]:e.props.theme})},s):null,t.createElement(p,null,e.props.text)),e.props.hiddenInputs?e.props.hiddenInputs.map((T,I)=>t.createElement(F,u({key:T.name+I},T))):null):e.type===_.Button?t.createElement("button",u({className:r("context-menu__list-item-button",{[`context-menu__list-item-button--theme-${e.props.theme}`]:e.props.theme})},e.props),s?t.createElement("div",{className:r("context-menu__list-icon",{[`context-menu__list-icon--theme-${e.props.theme}`]:e.props.theme})},s):null,t.createElement(p,null,e.props.text)):null))));return o?t.createElement(t.Fragment,null,t.createElement("div",{className:"context-menu__background-overlay"}),a&&a<600?t.createElement(A,{isActive:o},c):t.createElement("div",null,c)):null};h.position=y,h.itemTheme=G;var se=h;export{se as default};
 //# sourceMappingURL=context-menu.js.map

package/react/context-menu/context-menu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/context-menu/context-menu.tsx"],
-  "sourcesContent": ["import React, { useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\n\nimport Close from '../icons/18/close';\nimport HiddenInput from '../hidden-input';\nimport focusPreviousElement from '../hooks/focus-previous-element';\nimport TabTrapper from '../modal/tab-trapper';\nimport useClickOutside from '../hooks/use-click-outside';\nimport useEscape from '../hooks/use-escape';\nimport Button from '../button';\nimport Text from '../text';\nimport debounce from '../ts/debounce';\n\nimport {\n  ContextMenu as Props,\n  Types,\n  itemThemes,\n  positions,\n} from './context-menu.types';\n\nconst ContextMenu: React.FunctionComponent<Props> & {\n  position: typeof positions;\n  itemTheme: typeof itemThemes;\n} = ({\n  list,\n  isOpen,\n  onClose = () => {},\n  position = positions.right,\n  title,\n  close,\n  descriptions,\n  smallDescription,\n}) => {\n  const modal = useRef<HTMLDivElement>(null);\n  const [windowSize, setWindowSize] = useState<number>();\n  useClickOutside(modal, onClose);\n  useEscape(onClose);\n\n  focusPreviousElement(modal, isOpen);\n\n  useEffect(() => {\n    if (!windowSize) setWindowSize(window.innerWidth);\n    const handleWindowResize = () => {\n      setWindowSize(window.innerWidth);\n    };\n    window.addEventListener('resize', debounce(handleWindowResize, 2000));\n\n    return () => window.addEventListener('resize', handleWindowResize);\n  });\n\n  const component = (\n    <div\n      className={classNames('context-menu', {\n        [`context-menu--${position}`]: position,\n      })}\n      ref={modal}\n      tabIndex={-1}\n    >\n      <div\n        className={classNames('context-menu__texts-wrapper', {\n          'context-menu__texts-wrapper--center': !descriptions?.length,\n        })}\n      >\n        <div className=\"context-menu__texts\">\n          <Text theme={Text.themes.emphasis} size={Text.sizes.small}>\n            {title}\n          </Text>\n\n          {descriptions\n            ? descriptions.map(description => (\n                <Text\n                  size={Text.sizes.small}\n                  className=\"context-menu__texts-description\"\n                  key={description}\n                >\n                  {description}\n                </Text>\n              ))\n            : null}\n          {smallDescription ? (\n            <Text\n              size={Text.sizes.interface}\n              className=\"context-menu__texts-description\"\n              key={smallDescription}\n            >\n              {smallDescription}\n            </Text>\n          ) : null}\n        </div>\n        <div>\n          <Button\n            {...close}\n            iconOnly\n            leadingIcon={<Close />}\n            onClick={onClose}\n            size={Button.sizes.small}\n            variant={Button.variants.tertiary}\n          />\n        </div>\n      </div>\n      <div className=\"context-menu__list-items\">\n        {list.map(({ icon, item }, index) => (\n          <div key={item.props.text + index}>\n            {item.type === Types.Link ? (\n              <a\n                href={item.props.href}\n                className={classNames('context-menu__list-item-link', {\n                  [`context-menu__list-item-link--theme-${item.props.theme}`]:\n                    item.props.theme,\n                })}\n                data-testid={item.props.testId}\n              >\n                {icon ? (\n                  <div\n                    className={classNames('context-menu__list-icon', {\n                      [`context-menu__list-icon--theme-${item.props.theme}`]:\n                        item.props.theme,\n                    })}\n                  >\n                    {icon}\n                  </div>\n                ) : null}\n                <Text>{item.props.text}</Text>\n              </a>\n            ) : item.type === Types.Form ? (\n              <form\n                onSubmit={item.props.handleSubmit}\n                action={item.props.action}\n                method=\"POST\"\n                className={classNames('context-menu__list-item-form', {\n                  [`context-menu__list-item-form--theme-${item.props.theme}`]:\n                    item.props.theme,\n                })}\n              >\n                <button\n                  type=\"submit\"\n                  className={classNames('context-menu__list-item-form-button', {\n                    [`context-menu__list-item-form-button--theme-${item.props.theme}`]:\n                      item.props.theme,\n                  })}\n                  data-testid={item.props.testId}\n                >\n                  {icon ? (\n                    <div\n                      className={classNames('context-menu__list-icon', {\n                        [`context-menu__list-icon--theme-${item.props.theme}`]:\n                          item.props.theme,\n                      })}\n                    >\n                      {icon}\n                    </div>\n                  ) : null}\n                  <Text>{item.props.text}</Text>\n                </button>\n                {item.props.hiddenInputs\n                  ? item.props.hiddenInputs.map((input, index) => (\n                      <HiddenInput key={input.name + index} {...input} />\n                    ))\n                  : null}\n              </form>\n            ) : item.type === Types.Button ? (\n              <button\n                className={classNames('context-menu__list-item-button', {\n                  [`context-menu__list-item-button--theme-${item.props.theme}`]:\n                    item.props.theme,\n                })}\n                {...item.props}\n              >\n                {icon ? (\n                  <div\n                    className={classNames('context-menu__list-icon', {\n                      [`context-menu__list-icon--theme-${item.props.theme}`]:\n                        item.props.theme,\n                    })}\n                  >\n                    {icon}\n                  </div>\n                ) : null}\n                <Text>{item.props.text}</Text>\n              </button>\n            ) : null}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n  return isOpen ? (\n    <>\n      <div className=\"context-menu__background-overlay\"></div>\n      {windowSize && windowSize < 600 ? ( // 600 is the breakpoint for the component.\n        <TabTrapper isActive={isOpen}>{component}</TabTrapper>\n      ) : (\n        <div>{component}</div>\n      )}\n    </>\n  ) : null;\n};\n\nContextMenu.position = positions;\nContextMenu.itemTheme = itemThemes;\nexport default ContextMenu;\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client';\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\n\nimport Close from '../icons/18/close';\nimport HiddenInput from '../hidden-input';\nimport focusPreviousElement from '../hooks/focus-previous-element';\nimport TabTrapper from '../modal/tab-trapper';\nimport useClickOutside from '../hooks/use-click-outside';\nimport useEscape from '../hooks/use-escape';\nimport Button from '../button';\nimport Text from '../text';\nimport debounce from '../ts/debounce';\n\nimport {\n  ContextMenu as Props,\n  Types,\n  itemThemes,\n  positions,\n} from './context-menu.types';\n\nconst ContextMenu: React.FunctionComponent<Props> & {\n  position: typeof positions;\n  itemTheme: typeof itemThemes;\n} = ({\n  list,\n  isOpen,\n  onClose = () => {},\n  position = positions.right,\n  title,\n  close,\n  descriptions,\n  smallDescription,\n}) => {\n  const modal = useRef<HTMLDivElement>(null);\n  const [windowSize, setWindowSize] = useState<number>();\n  useClickOutside(modal, onClose);\n  useEscape(onClose);\n\n  focusPreviousElement(modal, isOpen);\n\n  useEffect(() => {\n    if (!windowSize) setWindowSize(window.innerWidth);\n    const handleWindowResize = () => {\n      setWindowSize(window.innerWidth);\n    };\n    window.addEventListener('resize', debounce(handleWindowResize, 2000));\n\n    return () => window.addEventListener('resize', handleWindowResize);\n  });\n\n  const component = (\n    <div\n      className={classNames('context-menu', {\n        [`context-menu--${position}`]: position,\n      })}\n      ref={modal}\n      tabIndex={-1}\n    >\n      <div\n        className={classNames('context-menu__texts-wrapper', {\n          'context-menu__texts-wrapper--center': !descriptions?.length,\n        })}\n      >\n        <div className=\"context-menu__texts\">\n          <Text theme={Text.themes.emphasis} size={Text.sizes.small}>\n            {title}\n          </Text>\n\n          {descriptions\n            ? descriptions.map(description => (\n                <Text\n                  size={Text.sizes.small}\n                  className=\"context-menu__texts-description\"\n                  key={description}\n                >\n                  {description}\n                </Text>\n              ))\n            : null}\n          {smallDescription ? (\n            <Text\n              size={Text.sizes.interface}\n              className=\"context-menu__texts-description\"\n              key={smallDescription}\n            >\n              {smallDescription}\n            </Text>\n          ) : null}\n        </div>\n        <div>\n          <Button\n            {...close}\n            iconOnly\n            leadingIcon={<Close />}\n            onClick={onClose}\n            size={Button.sizes.small}\n            variant={Button.variants.tertiary}\n          />\n        </div>\n      </div>\n      <div className=\"context-menu__list-items\">\n        {list.map(({ icon, item }, index) => (\n          <div key={item.props.text + index}>\n            {item.type === Types.Link ? (\n              <a\n                href={item.props.href}\n                className={classNames('context-menu__list-item-link', {\n                  [`context-menu__list-item-link--theme-${item.props.theme}`]:\n                    item.props.theme,\n                })}\n                data-testid={item.props.testId}\n              >\n                {icon ? (\n                  <div\n                    className={classNames('context-menu__list-icon', {\n                      [`context-menu__list-icon--theme-${item.props.theme}`]:\n                        item.props.theme,\n                    })}\n                  >\n                    {icon}\n                  </div>\n                ) : null}\n                <Text>{item.props.text}</Text>\n              </a>\n            ) : item.type === Types.Form ? (\n              <form\n                onSubmit={item.props.handleSubmit}\n                action={item.props.action}\n                method=\"POST\"\n                className={classNames('context-menu__list-item-form', {\n                  [`context-menu__list-item-form--theme-${item.props.theme}`]:\n                    item.props.theme,\n                })}\n              >\n                <button\n                  type=\"submit\"\n                  className={classNames('context-menu__list-item-form-button', {\n                    [`context-menu__list-item-form-button--theme-${item.props.theme}`]:\n                      item.props.theme,\n                  })}\n                  data-testid={item.props.testId}\n                >\n                  {icon ? (\n                    <div\n                      className={classNames('context-menu__list-icon', {\n                        [`context-menu__list-icon--theme-${item.props.theme}`]:\n                          item.props.theme,\n                      })}\n                    >\n                      {icon}\n                    </div>\n                  ) : null}\n                  <Text>{item.props.text}</Text>\n                </button>\n                {item.props.hiddenInputs\n                  ? item.props.hiddenInputs.map((input, index) => (\n                      <HiddenInput key={input.name + index} {...input} />\n                    ))\n                  : null}\n              </form>\n            ) : item.type === Types.Button ? (\n              <button\n                className={classNames('context-menu__list-item-button', {\n                  [`context-menu__list-item-button--theme-${item.props.theme}`]:\n                    item.props.theme,\n                })}\n                {...item.props}\n              >\n                {icon ? (\n                  <div\n                    className={classNames('context-menu__list-icon', {\n                      [`context-menu__list-icon--theme-${item.props.theme}`]:\n                        item.props.theme,\n                    })}\n                  >\n                    {icon}\n                  </div>\n                ) : null}\n                <Text>{item.props.text}</Text>\n              </button>\n            ) : null}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n  return isOpen ? (\n    <>\n      <div className=\"context-menu__background-overlay\"></div>\n      {windowSize && windowSize < 600 ? ( // 600 is the breakpoint for the component.\n        <TabTrapper isActive={isOpen}>{component}</TabTrapper>\n      ) : (\n        <div>{component}</div>\n      )}\n    </>\n  ) : null;\n};\n\nContextMenu.position = positions;\nContextMenu.itemTheme = itemThemes;\nexport default ContextMenu;\n"],
+  "mappings": "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",
   "names": ["React", "useEffect", "useRef", "useState", "classNames", "Close", "HiddenInput", "focusPreviousElement", "TabTrapper", "useClickOutside", "useEscape", "Button", "Text", "debounce", "Types", "itemThemes", "positions", "ContextMenu", "list", "isOpen", "onClose", "position", "title", "close", "descriptions", "smallDescription", "modal", "windowSize", "setWindowSize", "handleWindowResize", "component", "description", "__spreadProps", "__spreadValues", "icon", "item", "index", "input", "context_menu_default"]
 }

package/react/context-menu/context-menu.scss

@@ -1,13 +1,13 @@
 @use '../../tokens/spacing';
 @use '../../tokens/corner-radius';
 @use '../../tokens/elevation';
-@use '../../tokens/light';
+@use '../../tokens/colours';
 
 .context-menu {
   $breakpoint: 600px;
   @include elevation.level(6);
 
-  background: light.$surface-primary-default;
+  background: var(--surface-primary-default);
   position: fixed;
   bottom: 0;
   left: 0;
@@ -78,7 +78,7 @@
     height: 100%;
     top: 0;
     left: 0;
-    background: light.$fixed-background-secondary-default;
+    background: var(--fixed-background-secondary-default);
     opacity: 0.2;
     z-index: 99;
 
@@ -98,15 +98,15 @@
   }
 
   &__texts {
-    color: light.$on-surface-primary-default;
+    color: var(--on-surface-primary-default);
   }
 
   &__texts-description {
-    color: light.$on-surface-primary-alternate;
+    color: var(--on-surface-primary-alternate);
   }
 
   &__list-items {
-    border-top: 1px solid light.$ge-divider-default;
+    border-top: 1px solid var(--ge-divider-default);
   }
 
   &__list-item-link {
@@ -129,13 +129,13 @@
     margin-right: spacing.$s;
     display: flex;
     align-items: center;
-    color: light.$on-surface-primary-disabled;
+    color: var(--on-surface-primary-disabled);
 
     &--theme-destructive {
-      color: light.$on-buttons-on-destructive-outlined-default;
+      color: var(--on-buttons-on-destructive-outlined-default);
 
       &:hover {
-        color: light.$on-buttons-on-destructive-outlined-hover;
+        color: var(--on-buttons-on-destructive-outlined-hover);
       }
     }
   }
@@ -153,20 +153,20 @@
     display: flex;
     align-items: center;
     cursor: pointer;
-    color: light.$on-surface-primary-default;
+    color: var(--on-surface-primary-default);
     border-radius: corner-radius.$s;
     text-align: left;
 
     &:hover {
-      background-color: light.$surface-primary-hover;
+      background-color: var(--surface-primary-hover);
     }
 
     &--theme-destructive {
-      color: light.$on-buttons-on-destructive-outlined-default;
+      color: var(--on-buttons-on-destructive-outlined-default);
 
       &:hover {
-        background-color: light.$buttons-destructive-outlined-hover;
-        color: light.$on-buttons-on-destructive-outlined-hover;
+        background-color: var(--buttons-destructive-outlined-hover);
+        color: var(--on-buttons-on-destructive-outlined-hover);
       }
     }
   }

package/react/dropdown-list/dropdown-list.js

@@ -1,2 +1,2 @@
-var N=Object.defineProperty,$=Object.defineProperties;var x=Object.getOwnPropertyDescriptors;var _=Object.getOwnPropertySymbols;var C=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable;var w=(e,o,t)=>o in e?N(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,f=(e,o)=>{for(var t in o||(o={}))C.call(o,t)&&w(e,t,o[t]);if(_)for(var t of _(o))z.call(o,t)&&w(e,t,o[t]);return e},u=(e,o)=>$(e,x(o));import*as s from"react";import T from"../form-content";import r from"../text";import{themes as b}from"./dropdown-list.types";import g from"../icons/24/arrow-up";import k from"../icons/24/arrow-down";import D from"../hooks/use-toggle";import P from"../hooks/use-click-outside";import y from"../hooks/use-escape";import l from"classnames";const h=({description:e,disabled:o,formContentOptions:t,label:c,selectedOptions:p,header:v,theme:i=b.light})=>{const m=s.useRef(null),[d,a,,n]=D(!1);return P(m,n),y(n),s.createElement("div",{className:"dropdown-list"},s.createElement(r,{theme:r.themes.emphasis,className:l("dropdown-list__label",`dropdown-list__label--theme-${i}`,{[`dropdown-list__label--theme-${i}-disabled`]:o})},c),s.createElement("div",{className:l("dropdown-list__wrapper",`dropdown-list__wrapper--theme-${i}`,{[`dropdown-list__wrapper--theme-${i}-disabled`]:o,[`dropdown-list__wrapper--theme-${i}-clicked`]:d}),ref:m},s.createElement("div",{className:"dropdown-list__buttons"},s.createElement("button",{type:"button",className:l("dropdown-list__button",`dropdown-list__button--theme-${i}`,{[`dropdown-list__button--theme-${i}-disabled`]:o,[`dropdown-list__button--theme-${i}-clicked`]:d}),onClick:a,disabled:o,"data-test-dropdown-button":!0},s.createElement("div",{className:"dropdown-list__text-wrap"},s.createElement(r,{theme:r.themes.normal,size:r.sizes.basic},v),s.createElement(r,{size:r.sizes.small},p||s.createElement(r,{elementName:"span",size:r.sizes.small,className:l("dropdown-list__information",`dropdown-list__information--theme-${i}`,{[`dropdown-list__information--theme-${i}-disabled`]:o})},e))),s.createElement("div",{className:"dropdown-list__icon"},s.createElement(d?g:k,null)))),s.createElement(T,u(f({},t),{isOpen:d,close:n,onSubmit:a}))))};h.themes=b;var G=h;export{G as default};
+"use client";var N=Object.defineProperty,$=Object.defineProperties;var x=Object.getOwnPropertyDescriptors;var _=Object.getOwnPropertySymbols;var C=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable;var w=(e,o,t)=>o in e?N(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,u=(e,o)=>{for(var t in o||(o={}))C.call(o,t)&&w(e,t,o[t]);if(_)for(var t of _(o))z.call(o,t)&&w(e,t,o[t]);return e},f=(e,o)=>$(e,x(o));import*as s from"react";import T from"../form-content";import r from"../text";import{themes as b}from"./dropdown-list.types";import g from"../icons/24/arrow-up";import k from"../icons/24/arrow-down";import D from"../hooks/use-toggle";import P from"../hooks/use-click-outside";import y from"../hooks/use-escape";import l from"classnames";const h=({description:e,disabled:o,formContentOptions:t,label:c,selectedOptions:p,header:v,theme:i=b.light})=>{const m=s.useRef(null),[d,a,,n]=D(!1);return P(m,n),y(n),s.createElement("div",{className:"dropdown-list"},s.createElement(r,{theme:r.themes.emphasis,className:l("dropdown-list__label",`dropdown-list__label--theme-${i}`,{[`dropdown-list__label--theme-${i}-disabled`]:o})},c),s.createElement("div",{className:l("dropdown-list__wrapper",`dropdown-list__wrapper--theme-${i}`,{[`dropdown-list__wrapper--theme-${i}-disabled`]:o,[`dropdown-list__wrapper--theme-${i}-clicked`]:d}),ref:m},s.createElement("div",{className:"dropdown-list__buttons"},s.createElement("button",{type:"button",className:l("dropdown-list__button",`dropdown-list__button--theme-${i}`,{[`dropdown-list__button--theme-${i}-disabled`]:o,[`dropdown-list__button--theme-${i}-clicked`]:d}),onClick:a,disabled:o,"data-test-dropdown-button":!0},s.createElement("div",{className:"dropdown-list__text-wrap"},s.createElement(r,{theme:r.themes.normal,size:r.sizes.basic},v),s.createElement(r,{size:r.sizes.small},p||s.createElement(r,{elementName:"span",size:r.sizes.small,className:l("dropdown-list__information",`dropdown-list__information--theme-${i}`,{[`dropdown-list__information--theme-${i}-disabled`]:o})},e))),s.createElement("div",{className:"dropdown-list__icon"},s.createElement(d?g:k,null)))),s.createElement(T,f(u({},t),{isOpen:d,close:n,onSubmit:a}))))};h.themes=b;var G=h;export{G as default};
 //# sourceMappingURL=dropdown-list.js.map

package/react/dropdown-list/dropdown-list.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/dropdown-list/dropdown-list.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport FormContent from '../form-content';\n\nimport Text from '../text';\n\nimport { DropdownList as Props, themes } from './dropdown-list.types';\nimport ChevronUp from '../icons/24/arrow-up';\nimport ChevronDown from '../icons/24/arrow-down';\nimport useToggle from '../hooks/use-toggle';\nimport useClickOutside from '../hooks/use-click-outside';\nimport useEscape from '../hooks/use-escape';\nimport classNames from 'classnames';\n\nconst DropdownList: React.FC<React.PropsWithChildren<Props>> & {\n  themes: typeof themes;\n} = ({\n  description,\n  disabled,\n  formContentOptions,\n  label,\n  selectedOptions,\n  header,\n  theme = themes.light,\n}) => {\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 className=\"dropdown-list\">\n      <Text\n        theme={Text.themes.emphasis}\n        className={classNames(\n          'dropdown-list__label',\n          `dropdown-list__label--theme-${theme}`,\n          {\n            [`dropdown-list__label--theme-${theme}-disabled`]: disabled,\n          },\n        )}\n      >\n        {label}\n      </Text>\n      <div\n        className={classNames(\n          'dropdown-list__wrapper',\n          `dropdown-list__wrapper--theme-${theme}`,\n          {\n            [`dropdown-list__wrapper--theme-${theme}-disabled`]: disabled,\n            [`dropdown-list__wrapper--theme-${theme}-clicked`]: isOpen,\n          },\n        )}\n        ref={modal}\n      >\n        <div className=\"dropdown-list__buttons\">\n          <button\n            type=\"button\"\n            className={classNames(\n              'dropdown-list__button',\n              `dropdown-list__button--theme-${theme}`,\n              {\n                [`dropdown-list__button--theme-${theme}-disabled`]: disabled,\n                [`dropdown-list__button--theme-${theme}-clicked`]: isOpen,\n              },\n            )}\n            onClick={toggle}\n            disabled={disabled}\n            data-test-dropdown-button\n          >\n            <div className=\"dropdown-list__text-wrap\">\n              <Text theme={Text.themes.normal} size={Text.sizes.basic}>\n                {header}\n              </Text>\n\n              <Text size={Text.sizes.small}>\n                {selectedOptions ? (\n                  selectedOptions\n                ) : (\n                  <Text\n                    elementName=\"span\"\n                    size={Text.sizes.small}\n                    className={classNames(\n                      'dropdown-list__information',\n                      `dropdown-list__information--theme-${theme}`,\n                      {\n                        [`dropdown-list__information--theme-${theme}-disabled`]:\n                          disabled,\n                      },\n                    )}\n                  >\n                    {description}\n                  </Text>\n                )}\n              </Text>\n            </div>\n\n            <div className=\"dropdown-list__icon\">\n              {isOpen ? <ChevronUp /> : <ChevronDown />}\n            </div>\n          </button>\n        </div>\n        <FormContent\n          {...formContentOptions}\n          isOpen={isOpen}\n          close={close}\n          onSubmit={toggle}\n        />\n      </div>\n    </div>\n  );\n};\n\nDropdownList.themes = themes;\n\nexport default DropdownList;\n"],
-  "mappings": "6aAAA,UAAYA,MAAW,QACvB,OAAOC,MAAiB,kBAExB,OAAOC,MAAU,UAEjB,OAAgC,UAAAC,MAAc,wBAC9C,OAAOC,MAAe,uBACtB,OAAOC,MAAiB,yBACxB,OAAOC,MAAe,sBACtB,OAAOC,MAAqB,6BAC5B,OAAOC,MAAe,sBACtB,OAAOC,MAAgB,aAEvB,MAAMC,EAEF,CAAC,CACH,YAAAC,EACA,SAAAC,EACA,mBAAAC,EACA,MAAAC,EACA,gBAAAC,EACA,OAAAC,EACA,MAAAC,EAAQd,EAAO,KACjB,IAAM,CACJ,MAAMe,EAAQlB,EAAM,OAAO,IAAI,EACzB,CAACmB,EAAQC,EAAQ,CAAEC,CAAK,EAAIf,EAAU,EAAK,EAEjD,OAAAC,EAAgBW,EAAOG,CAAK,EAC5Bb,EAAUa,CAAK,EAGbrB,EAAA,cAAC,OAAI,UAAU,iBACbA,EAAA,cAACE,EAAA,CACC,MAAOA,EAAK,OAAO,SACnB,UAAWO,EACT,uBACA,+BAA+BQ,CAAK,GACpC,CACE,CAAC,+BAA+BA,CAAK,WAAW,EAAGL,CACrD,CACF,GAECE,CACH,EACAd,EAAA,cAAC,OACC,UAAWS,EACT,yBACA,iCAAiCQ,CAAK,GACtC,CACE,CAAC,iCAAiCA,CAAK,WAAW,EAAGL,EACrD,CAAC,iCAAiCK,CAAK,UAAU,EAAGE,CACtD,CACF,EACA,IAAKD,GAELlB,EAAA,cAAC,OAAI,UAAU,0BACbA,EAAA,cAAC,UACC,KAAK,SACL,UAAWS,EACT,wBACA,gCAAgCQ,CAAK,GACrC,CACE,CAAC,gCAAgCA,CAAK,WAAW,EAAGL,EACpD,CAAC,gCAAgCK,CAAK,UAAU,EAAGE,CACrD,CACF,EACA,QAASC,EACT,SAAUR,EACV,4BAAyB,IAEzBZ,EAAA,cAAC,OAAI,UAAU,4BACbA,EAAA,cAACE,EAAA,CAAK,MAAOA,EAAK,OAAO,OAAQ,KAAMA,EAAK,MAAM,OAC/Cc,CACH,EAEAhB,EAAA,cAACE,EAAA,CAAK,KAAMA,EAAK,MAAM,OACpBa,GAGCf,EAAA,cAACE,EAAA,CACC,YAAY,OACZ,KAAMA,EAAK,MAAM,MACjB,UAAWO,EACT,6BACA,qCAAqCQ,CAAK,GAC1C,CACE,CAAC,qCAAqCA,CAAK,WAAW,EACpDL,CACJ,CACF,GAECD,CACH,CAEJ,CACF,EAEAX,EAAA,cAAC,OAAI,UAAU,uBACHA,EAAA,cAATmB,EAAUf,EAAgBC,EAAhB,IAAU,CACvB,CACF,CACF,EACAL,EAAA,cAACC,EAAAqB,EAAAC,EAAA,GACKV,GADL,CAEC,OAAQM,EACR,MAAOE,EACP,SAAUD,GACZ,CACF,CACF,CAEJ,EAEAV,EAAa,OAASP,EAEtB,IAAOqB,EAAQd",
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport FormContent from '../form-content';\n\nimport Text from '../text';\n\nimport { DropdownList as Props, themes } from './dropdown-list.types';\nimport ChevronUp from '../icons/24/arrow-up';\nimport ChevronDown from '../icons/24/arrow-down';\nimport useToggle from '../hooks/use-toggle';\nimport useClickOutside from '../hooks/use-click-outside';\nimport useEscape from '../hooks/use-escape';\nimport classNames from 'classnames';\n\nconst DropdownList: React.FC<React.PropsWithChildren<Props>> & {\n  themes: typeof themes;\n} = ({\n  description,\n  disabled,\n  formContentOptions,\n  label,\n  selectedOptions,\n  header,\n  theme = themes.light,\n}) => {\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 className=\"dropdown-list\">\n      <Text\n        theme={Text.themes.emphasis}\n        className={classNames(\n          'dropdown-list__label',\n          `dropdown-list__label--theme-${theme}`,\n          {\n            [`dropdown-list__label--theme-${theme}-disabled`]: disabled,\n          },\n        )}\n      >\n        {label}\n      </Text>\n      <div\n        className={classNames(\n          'dropdown-list__wrapper',\n          `dropdown-list__wrapper--theme-${theme}`,\n          {\n            [`dropdown-list__wrapper--theme-${theme}-disabled`]: disabled,\n            [`dropdown-list__wrapper--theme-${theme}-clicked`]: isOpen,\n          },\n        )}\n        ref={modal}\n      >\n        <div className=\"dropdown-list__buttons\">\n          <button\n            type=\"button\"\n            className={classNames(\n              'dropdown-list__button',\n              `dropdown-list__button--theme-${theme}`,\n              {\n                [`dropdown-list__button--theme-${theme}-disabled`]: disabled,\n                [`dropdown-list__button--theme-${theme}-clicked`]: isOpen,\n              },\n            )}\n            onClick={toggle}\n            disabled={disabled}\n            data-test-dropdown-button\n          >\n            <div className=\"dropdown-list__text-wrap\">\n              <Text theme={Text.themes.normal} size={Text.sizes.basic}>\n                {header}\n              </Text>\n\n              <Text size={Text.sizes.small}>\n                {selectedOptions ? (\n                  selectedOptions\n                ) : (\n                  <Text\n                    elementName=\"span\"\n                    size={Text.sizes.small}\n                    className={classNames(\n                      'dropdown-list__information',\n                      `dropdown-list__information--theme-${theme}`,\n                      {\n                        [`dropdown-list__information--theme-${theme}-disabled`]:\n                          disabled,\n                      },\n                    )}\n                  >\n                    {description}\n                  </Text>\n                )}\n              </Text>\n            </div>\n\n            <div className=\"dropdown-list__icon\">\n              {isOpen ? <ChevronUp /> : <ChevronDown />}\n            </div>\n          </button>\n        </div>\n        <FormContent\n          {...formContentOptions}\n          isOpen={isOpen}\n          close={close}\n          onSubmit={toggle}\n        />\n      </div>\n    </div>\n  );\n};\n\nDropdownList.themes = themes;\n\nexport default DropdownList;\n"],
+  "mappings": "0bAEA,UAAYA,MAAW,QACvB,OAAOC,MAAiB,kBAExB,OAAOC,MAAU,UAEjB,OAAgC,UAAAC,MAAc,wBAC9C,OAAOC,MAAe,uBACtB,OAAOC,MAAiB,yBACxB,OAAOC,MAAe,sBACtB,OAAOC,MAAqB,6BAC5B,OAAOC,MAAe,sBACtB,OAAOC,MAAgB,aAEvB,MAAMC,EAEF,CAAC,CACH,YAAAC,EACA,SAAAC,EACA,mBAAAC,EACA,MAAAC,EACA,gBAAAC,EACA,OAAAC,EACA,MAAAC,EAAQd,EAAO,KACjB,IAAM,CACJ,MAAMe,EAAQlB,EAAM,OAAO,IAAI,EACzB,CAACmB,EAAQC,EAAQ,CAAEC,CAAK,EAAIf,EAAU,EAAK,EAEjD,OAAAC,EAAgBW,EAAOG,CAAK,EAC5Bb,EAAUa,CAAK,EAGbrB,EAAA,cAAC,OAAI,UAAU,iBACbA,EAAA,cAACE,EAAA,CACC,MAAOA,EAAK,OAAO,SACnB,UAAWO,EACT,uBACA,+BAA+BQ,CAAK,GACpC,CACE,CAAC,+BAA+BA,CAAK,WAAW,EAAGL,CACrD,CACF,GAECE,CACH,EACAd,EAAA,cAAC,OACC,UAAWS,EACT,yBACA,iCAAiCQ,CAAK,GACtC,CACE,CAAC,iCAAiCA,CAAK,WAAW,EAAGL,EACrD,CAAC,iCAAiCK,CAAK,UAAU,EAAGE,CACtD,CACF,EACA,IAAKD,GAELlB,EAAA,cAAC,OAAI,UAAU,0BACbA,EAAA,cAAC,UACC,KAAK,SACL,UAAWS,EACT,wBACA,gCAAgCQ,CAAK,GACrC,CACE,CAAC,gCAAgCA,CAAK,WAAW,EAAGL,EACpD,CAAC,gCAAgCK,CAAK,UAAU,EAAGE,CACrD,CACF,EACA,QAASC,EACT,SAAUR,EACV,4BAAyB,IAEzBZ,EAAA,cAAC,OAAI,UAAU,4BACbA,EAAA,cAACE,EAAA,CAAK,MAAOA,EAAK,OAAO,OAAQ,KAAMA,EAAK,MAAM,OAC/Cc,CACH,EAEAhB,EAAA,cAACE,EAAA,CAAK,KAAMA,EAAK,MAAM,OACpBa,GAGCf,EAAA,cAACE,EAAA,CACC,YAAY,OACZ,KAAMA,EAAK,MAAM,MACjB,UAAWO,EACT,6BACA,qCAAqCQ,CAAK,GAC1C,CACE,CAAC,qCAAqCA,CAAK,WAAW,EACpDL,CACJ,CACF,GAECD,CACH,CAEJ,CACF,EAEAX,EAAA,cAAC,OAAI,UAAU,uBACHA,EAAA,cAATmB,EAAUf,EAAgBC,EAAhB,IAAU,CACvB,CACF,CACF,EACAL,EAAA,cAACC,EAAAqB,EAAAC,EAAA,GACKV,GADL,CAEC,OAAQM,EACR,MAAOE,EACP,SAAUD,GACZ,CACF,CACF,CAEJ,EAEAV,EAAa,OAASP,EAEtB,IAAOqB,EAAQd",
   "names": ["React", "FormContent", "Text", "themes", "ChevronUp", "ChevronDown", "useToggle", "useClickOutside", "useEscape", "classNames", "DropdownList", "description", "disabled", "formContentOptions", "label", "selectedOptions", "header", "theme", "modal", "isOpen", "toggle", "close", "__spreadProps", "__spreadValues", "dropdown_list_default"]
 }

package/react/dropdown-list/dropdown-list.scss

@@ -1,6 +1,6 @@
 @use '../../tokens/corner-radius';
 @use '../../tokens/spacing';
-@use '../../tokens/light';
+@use '../../tokens/colours';
 
 .dropdown-list {
   $breakpoint: 900px;
@@ -9,8 +9,8 @@
 
   &__wrapper {
     border-radius: corner-radius.$s;
-    border: 1px solid light.$ge-divider-default;
-    background-color: light.$surface-primary-default;
+    border: 1px solid var(--ge-divider-default);
+    background-color: var(--surface-primary-default);
     margin-top: spacing.$xxs;
     min-width: 180px;
 
@@ -20,66 +20,66 @@
 
     &--theme-light {
       &-clicked {
-        background-color: light.$surface-primary-hover;
+        background-color: var(--surface-primary-hover);
       }
 
       &-disabled {
-        border-color: light.$surface-primary-default;
+        border-color: var(--surface-primary-default);
       }
 
       @media (hover: hover) {
         &:hover {
-          background-color: light.$surface-primary-hover;
+          background-color: var(--surface-primary-hover);
         }
 
         &-disabled {
           &:hover {
-            background-color: light.$surface-primary-default;
-            border-color: light.$surface-primary-default;
+            background-color: var(--surface-primary-default);
+            border-color: var(--surface-primary-default);
           }
         }
       }
 
       @media (hover: none) {
         &:hover {
-          background-color: light.$surface-primary-default;
-          border-color: light.$surface-primary-default;
+          background-color: var(--surface-primary-default);
+          border-color: var(--surface-primary-default);
         }
       }
     }
 
     &--theme-dark {
-      background-color: light.$fixed-surface-secondary-default;
-      border-color: light.$fixed-surface-secondary-default;
+      background-color: var(--fixed-surface-secondary-default);
+      border-color: var(--fixed-surface-secondary-default);
 
       &-clicked {
-        background-color: light.$fixed-surface-secondary-hover;
-        border-color: light.$fixed-surface-secondary-hover;
+        background-color: var(--fixed-surface-secondary-hover);
+        border-color: var(--fixed-surface-secondary-hover);
       }
 
       &-disabled {
-        background-color: light.$fixed-surface-secondary-default;
-        border-color: light.$fixed-surface-secondary-default;
+        background-color: var(--fixed-surface-secondary-default);
+        border-color: var(--fixed-surface-secondary-default);
       }
 
       @media (hover: hover) {
         &:hover {
-          background-color: light.$fixed-surface-secondary-hover;
-          border-color: light.$fixed-surface-secondary-hover;
+          background-color: var(--fixed-surface-secondary-hover);
+          border-color: var(--fixed-surface-secondary-hover);
         }
 
         &-disabled {
           &:hover {
-            background-color: light.$fixed-surface-secondary-default;
-            border-color: light.$fixed-surface-secondary-default;
+            background-color: var(--fixed-surface-secondary-default);
+            border-color: var(--fixed-surface-secondary-default);
           }
         }
       }
 
       @media (hover: none) {
         &:hover {
-          background-color: light.$fixed-surface-secondary-default;
-          border-color: light.$fixed-surface-secondary-default;
+          background-color: var(--fixed-surface-secondary-default);
+          border-color: var(--fixed-surface-secondary-default);
         }
       }
     }
@@ -106,20 +106,20 @@
     &--theme-light {
       &-disabled {
         cursor: not-allowed;
-        color: light.$on-surface-primary-disabled;
+        color: var(--on-surface-primary-disabled);
       }
     }
 
     &--theme-dark {
-      color: light.$on-fixed-surface-secondary-default;
+      color: var(--on-fixed-surface-secondary-default);
 
       &-disabled {
-        color: light.$on-fixed-surface-secondary-disabled;
+        color: var(--on-fixed-surface-secondary-disabled);
         cursor: not-allowed;
       }
 
       &-clicked {
-        color: light.$on-fixed-surface-secondary-default;
+        color: var(--on-fixed-surface-secondary-default);
       }
     }
   }
@@ -138,18 +138,18 @@
 
   &__information {
     &--theme-light {
-      color: light.$on-surface-primary-alternate;
+      color: var(--on-surface-primary-alternate);
 
       &-disabled {
-        color: light.$on-surface-primary-disabled;
+        color: var(--on-surface-primary-disabled);
       }
     }
 
     &--theme-dark {
-      color: light.$on-fixed-surface-secondary-alternate;
+      color: var(--on-fixed-surface-secondary-alternate);
 
       &-disabled {
-        color: light.$on-fixed-surface-secondary-disabled;
+        color: var(--on-fixed-surface-secondary-disabled);
       }
     }
   }
@@ -157,13 +157,13 @@
   &__label {
     &--theme-light {
       &-disabled {
-        color: light.$on-surface-primary-disabled;
+        color: var(--on-surface-primary-disabled);
       }
     }
     &--theme-dark {
-      color: light.$on-fixed-surface-primary-default;
+      color: var(--on-fixed-surface-primary-default);
       &-disabled {
-        color: light.$on-fixed-background-primary-disabled;
+        color: var(--on-fixed-background-primary-disabled);
       }
     }
   }

package/react/expander/expander.js

@@ -1,2 +1,2 @@
-var w=Object.defineProperty,z=Object.defineProperties;var C=Object.getOwnPropertyDescriptors;var h=Object.getOwnPropertySymbols;var E=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var N=(i,n,r)=>n in i?w(i,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):i[n]=r,o=(i,n)=>{for(var r in n||(n={}))E.call(n,r)&&N(i,r,n[r]);if(h)for(var r of h(n))I.call(n,r)&&N(i,r,n[r]);return i},u=(i,n)=>z(i,C(n));import _ from"classnames";import e,{useState as k}from"react";import b from"../icons/24/arrow-down";import L from"../link-button";import s from"../text";import g from"../badge";import{Types as A}from"../badge/badge.types";import c from"../link";import O from"../collapse";const S=({actions:i,contentType:n="article",defaultOpen:r=!1,faq:d,icon:p,id:m,links:a,children:f,metadata:x,title:P,value:v})=>{const[t,y]=k(r),T=()=>y(!t);return e.createElement("div",{className:"expander__list-item",key:m,itemScope:d||void 0,itemProp:d?"mainEntity":void 0,itemType:d?"https://schema.org/Question":void 0},e.createElement("button",{"aria-controls":m,"aria-expanded":t,className:_("expander__trigger",{"expander__trigger--triggered":t,"expander__trigger--w-value":v}),onClick:T},p?e.createElement("div",{className:"expander__icon"},p):null,e.createElement("div",{className:"expander__trigger-title"},e.createElement(s,{elementName:"h3",itemProp:d?"name":void 0,tight:!0},P)),v?e.createElement(g,{content:{content:v,type:A.Numerical},variant:g.variants.secondary}):null,e.createElement("div",{className:_("expander__icon",{"expander__icon--flipped":t})},e.createElement(b,null))),e.createElement("div",{className:_("expander__drawer",{"expander__drawer--open":t}),id:m},e.createElement(O,{isOpen:t},e.createElement("div",{className:_("expander__content",{[`expander__content--${n}`]:n}),itemScope:d||void 0,itemProp:d?"acceptedAnswer":void 0,itemType:d?"https://schema.org/Answer":void 0},e.createElement("div",{className:"expander__children",itemProp:d?"text":void 0},f),i.length?e.createElement("div",{className:"expander__actions"},i.map(l=>e.createElement("div",{className:"expander__action",key:l.href},e.createElement(L,o({},l))))):null,x||a&&a.length?e.createElement("div",{className:"expander__metadata"},e.createElement("hr",{className:"expander__divider"}),e.createElement("div",{className:"expander__meta-content"},x?e.createElement("div",{className:"expander__meta-text"},e.createElement(s,{elementName:"span",size:s.sizes.small},x)):null,a&&a.length?e.createElement("div",{className:"expander__links"},a.map(l=>e.createElement("div",{className:"expander__link",key:l.href},e.createElement(c,u(o({},l),{size:c.sizes.small}))))):null)):null))))},B=({description:i,faq:n,itemRenderer:r,items:d,title:p})=>e.createElement("div",{className:"expander"},p||i?e.createElement("div",{className:"expander__header"},p?e.createElement(s,{elementName:"h2",size:s.sizes.headline2,theme:s.themes.emphasis,tight:!0},p):null,i?e.createElement(s,{size:s.sizes.basic},i):null):null,e.createElement("div",null,d.map(m=>e.createElement(S,u(o({key:m.listItemProps.id},m.listItemProps),{faq:n}),e.createElement(r,m.props)))));var U=B;export{U as default};
+"use client";var w=Object.defineProperty,z=Object.defineProperties;var C=Object.getOwnPropertyDescriptors;var h=Object.getOwnPropertySymbols;var E=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var N=(i,n,r)=>n in i?w(i,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):i[n]=r,o=(i,n)=>{for(var r in n||(n={}))E.call(n,r)&&N(i,r,n[r]);if(h)for(var r of h(n))I.call(n,r)&&N(i,r,n[r]);return i},u=(i,n)=>z(i,C(n));import _ from"classnames";import e,{useState as k}from"react";import b from"../icons/24/arrow-down";import L from"../link-button";import s from"../text";import g from"../badge";import{Types as A}from"../badge/badge.types";import c from"../link";import O from"../collapse";const S=({actions:i,contentType:n="article",defaultOpen:r=!1,faq:d,icon:p,id:m,links:a,children:f,metadata:x,title:P,value:v})=>{const[t,y]=k(r),T=()=>y(!t);return e.createElement("div",{className:"expander__list-item",key:m,itemScope:d||void 0,itemProp:d?"mainEntity":void 0,itemType:d?"https://schema.org/Question":void 0},e.createElement("button",{"aria-controls":m,"aria-expanded":t,className:_("expander__trigger",{"expander__trigger--triggered":t,"expander__trigger--w-value":v}),onClick:T},p?e.createElement("div",{className:"expander__icon"},p):null,e.createElement("div",{className:"expander__trigger-title"},e.createElement(s,{elementName:"h3",itemProp:d?"name":void 0,tight:!0},P)),v?e.createElement(g,{content:{content:v,type:A.Numerical},variant:g.variants.secondary}):null,e.createElement("div",{className:_("expander__icon",{"expander__icon--flipped":t})},e.createElement(b,null))),e.createElement("div",{className:_("expander__drawer",{"expander__drawer--open":t}),id:m},e.createElement(O,{isOpen:t},e.createElement("div",{className:_("expander__content",{[`expander__content--${n}`]:n}),itemScope:d||void 0,itemProp:d?"acceptedAnswer":void 0,itemType:d?"https://schema.org/Answer":void 0},e.createElement("div",{className:"expander__children",itemProp:d?"text":void 0},f),i.length?e.createElement("div",{className:"expander__actions"},i.map(l=>e.createElement("div",{className:"expander__action",key:l.href},e.createElement(L,o({},l))))):null,x||a&&a.length?e.createElement("div",{className:"expander__metadata"},e.createElement("hr",{className:"expander__divider"}),e.createElement("div",{className:"expander__meta-content"},x?e.createElement("div",{className:"expander__meta-text"},e.createElement(s,{elementName:"span",size:s.sizes.small},x)):null,a&&a.length?e.createElement("div",{className:"expander__links"},a.map(l=>e.createElement("div",{className:"expander__link",key:l.href},e.createElement(c,u(o({},l),{size:c.sizes.small}))))):null)):null))))},B=({description:i,faq:n,itemRenderer:r,items:d,title:p})=>e.createElement("div",{className:"expander"},p||i?e.createElement("div",{className:"expander__header"},p?e.createElement(s,{elementName:"h2",size:s.sizes.headline2,theme:s.themes.emphasis,tight:!0},p):null,i?e.createElement(s,{size:s.sizes.basic},i):null):null,e.createElement("div",null,d.map(m=>e.createElement(S,u(o({key:m.listItemProps.id},m.listItemProps),{faq:n}),e.createElement(r,m.props)))));var U=B;export{U as default};
 //# sourceMappingURL=expander.js.map

package/react/expander/expander.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/expander/expander.tsx"],
-  "sourcesContent": ["import cn from 'classnames';\nimport React, { useState } from 'react';\n\nimport ArrowDown from '../icons/24/arrow-down';\nimport LinkButton from '../link-button';\nimport Text from '../text';\n\nimport { type Expander as Props } from './expander.types';\nimport Badge from '../badge';\nimport { Types } from '../badge/badge.types';\nimport Link from '../link';\nimport Collapse from '../collapse';\n\nconst ExpanderListItem: React.FC<\n  React.PropsWithChildren<Props<unknown>['items'][number]['listItemProps']>\n> = ({\n  actions,\n  contentType = 'article',\n  defaultOpen = false,\n  faq,\n  icon,\n  id,\n  links,\n  children,\n  metadata,\n  title,\n  value,\n}) => {\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n\n  const toggle = () => setIsOpen(!isOpen);\n\n  return (\n    <div\n      className=\"expander__list-item\"\n      key={id}\n      itemScope={faq ? faq : undefined}\n      itemProp={faq ? 'mainEntity' : undefined}\n      itemType={faq ? 'https://schema.org/Question' : undefined}\n    >\n      <button\n        aria-controls={id}\n        aria-expanded={isOpen}\n        className={cn('expander__trigger', {\n          'expander__trigger--triggered': isOpen,\n          'expander__trigger--w-value': value,\n        })}\n        onClick={toggle}\n      >\n        {icon ? <div className=\"expander__icon\">{icon}</div> : null}\n        <div className=\"expander__trigger-title\">\n          <Text elementName=\"h3\" itemProp={faq ? 'name' : undefined} tight>\n            {title}\n          </Text>\n        </div>\n        {value ? (\n          <Badge\n            content={{ content: value, type: Types.Numerical }}\n            variant={Badge.variants.secondary}\n          />\n        ) : null}\n        <div\n          className={cn('expander__icon', {\n            'expander__icon--flipped': isOpen,\n          })}\n        >\n          <ArrowDown />\n        </div>\n      </button>\n      <div\n        className={cn('expander__drawer', {\n          'expander__drawer--open': isOpen,\n        })}\n        id={id}\n      >\n        <Collapse isOpen={isOpen}>\n          <div\n            className={cn('expander__content', {\n              [`expander__content--${contentType}`]: contentType,\n            })}\n            itemScope={faq ? faq : undefined}\n            itemProp={faq ? 'acceptedAnswer' : undefined}\n            itemType={faq ? 'https://schema.org/Answer' : undefined}\n          >\n            <div\n              className=\"expander__children\"\n              itemProp={faq ? 'text' : undefined}\n            >\n              {children}\n            </div>\n            {actions.length ? (\n              <div className=\"expander__actions\">\n                {actions.map(action => (\n                  <div className=\"expander__action\" key={action.href}>\n                    <LinkButton {...action} />\n                  </div>\n                ))}\n              </div>\n            ) : null}\n            {metadata || (links && links.length) ? (\n              <div className=\"expander__metadata\">\n                <hr className=\"expander__divider\" />\n                <div className=\"expander__meta-content\">\n                  {metadata ? (\n                    <div className=\"expander__meta-text\">\n                      <Text elementName=\"span\" size={Text.sizes.small}>\n                        {metadata}\n                      </Text>\n                    </div>\n                  ) : null}\n                  {links && links.length ? (\n                    <div className=\"expander__links\">\n                      {links.map(link => (\n                        <div className=\"expander__link\" key={link.href}>\n                          <Link {...link} size={Link.sizes.small} />\n                        </div>\n                      ))}\n                    </div>\n                  ) : null}\n                </div>\n              </div>\n            ) : null}\n          </div>\n        </Collapse>\n      </div>\n    </div>\n  );\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nconst Expander = <T extends {}>({\n  description,\n  faq,\n  itemRenderer,\n  items,\n  title,\n}: Props<T> & { itemRenderer: React.FC<T> }) => (\n  <div className=\"expander\">\n    {title || description ? (\n      <div className=\"expander__header\">\n        {title ? (\n          <Text\n            elementName=\"h2\"\n            size={Text.sizes.headline2}\n            theme={Text.themes.emphasis}\n            tight\n          >\n            {title}\n          </Text>\n        ) : null}\n        {description ? (\n          <Text size={Text.sizes.basic}>{description}</Text>\n        ) : null}\n      </div>\n    ) : null}\n    <div>\n      {items.map(item => (\n        <ExpanderListItem\n          key={item.listItemProps.id}\n          {...item.listItemProps}\n          faq={faq}\n        >\n          {React.createElement(itemRenderer, item.props)}\n        </ExpanderListItem>\n      ))}\n    </div>\n  </div>\n);\n\nexport default Expander;\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport React, { useState } from 'react';\n\nimport ArrowDown from '../icons/24/arrow-down';\nimport LinkButton from '../link-button';\nimport Text from '../text';\n\nimport { type Expander as Props } from './expander.types';\nimport Badge from '../badge';\nimport { Types } from '../badge/badge.types';\nimport Link from '../link';\nimport Collapse from '../collapse';\n\nconst ExpanderListItem: React.FC<\n  React.PropsWithChildren<Props<unknown>['items'][number]['listItemProps']>\n> = ({\n  actions,\n  contentType = 'article',\n  defaultOpen = false,\n  faq,\n  icon,\n  id,\n  links,\n  children,\n  metadata,\n  title,\n  value,\n}) => {\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n\n  const toggle = () => setIsOpen(!isOpen);\n\n  return (\n    <div\n      className=\"expander__list-item\"\n      key={id}\n      itemScope={faq ? faq : undefined}\n      itemProp={faq ? 'mainEntity' : undefined}\n      itemType={faq ? 'https://schema.org/Question' : undefined}\n    >\n      <button\n        aria-controls={id}\n        aria-expanded={isOpen}\n        className={cn('expander__trigger', {\n          'expander__trigger--triggered': isOpen,\n          'expander__trigger--w-value': value,\n        })}\n        onClick={toggle}\n      >\n        {icon ? <div className=\"expander__icon\">{icon}</div> : null}\n        <div className=\"expander__trigger-title\">\n          <Text elementName=\"h3\" itemProp={faq ? 'name' : undefined} tight>\n            {title}\n          </Text>\n        </div>\n        {value ? (\n          <Badge\n            content={{ content: value, type: Types.Numerical }}\n            variant={Badge.variants.secondary}\n          />\n        ) : null}\n        <div\n          className={cn('expander__icon', {\n            'expander__icon--flipped': isOpen,\n          })}\n        >\n          <ArrowDown />\n        </div>\n      </button>\n      <div\n        className={cn('expander__drawer', {\n          'expander__drawer--open': isOpen,\n        })}\n        id={id}\n      >\n        <Collapse isOpen={isOpen}>\n          <div\n            className={cn('expander__content', {\n              [`expander__content--${contentType}`]: contentType,\n            })}\n            itemScope={faq ? faq : undefined}\n            itemProp={faq ? 'acceptedAnswer' : undefined}\n            itemType={faq ? 'https://schema.org/Answer' : undefined}\n          >\n            <div\n              className=\"expander__children\"\n              itemProp={faq ? 'text' : undefined}\n            >\n              {children}\n            </div>\n            {actions.length ? (\n              <div className=\"expander__actions\">\n                {actions.map(action => (\n                  <div className=\"expander__action\" key={action.href}>\n                    <LinkButton {...action} />\n                  </div>\n                ))}\n              </div>\n            ) : null}\n            {metadata || (links && links.length) ? (\n              <div className=\"expander__metadata\">\n                <hr className=\"expander__divider\" />\n                <div className=\"expander__meta-content\">\n                  {metadata ? (\n                    <div className=\"expander__meta-text\">\n                      <Text elementName=\"span\" size={Text.sizes.small}>\n                        {metadata}\n                      </Text>\n                    </div>\n                  ) : null}\n                  {links && links.length ? (\n                    <div className=\"expander__links\">\n                      {links.map(link => (\n                        <div className=\"expander__link\" key={link.href}>\n                          <Link {...link} size={Link.sizes.small} />\n                        </div>\n                      ))}\n                    </div>\n                  ) : null}\n                </div>\n              </div>\n            ) : null}\n          </div>\n        </Collapse>\n      </div>\n    </div>\n  );\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nconst Expander = <T extends {}>({\n  description,\n  faq,\n  itemRenderer,\n  items,\n  title,\n}: Props<T> & { itemRenderer: React.FC<T> }) => (\n  <div className=\"expander\">\n    {title || description ? (\n      <div className=\"expander__header\">\n        {title ? (\n          <Text\n            elementName=\"h2\"\n            size={Text.sizes.headline2}\n            theme={Text.themes.emphasis}\n            tight\n          >\n            {title}\n          </Text>\n        ) : null}\n        {description ? (\n          <Text size={Text.sizes.basic}>{description}</Text>\n        ) : null}\n      </div>\n    ) : null}\n    <div>\n      {items.map(item => (\n        <ExpanderListItem\n          key={item.listItemProps.id}\n          {...item.listItemProps}\n          faq={faq}\n        >\n          {React.createElement(itemRenderer, item.props)}\n        </ExpanderListItem>\n      ))}\n    </div>\n  </div>\n);\n\nexport default Expander;\n"],
+  "mappings": "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",
   "names": ["cn", "React", "useState", "ArrowDown", "LinkButton", "Text", "Badge", "Types", "Link", "Collapse", "ExpanderListItem", "actions", "contentType", "defaultOpen", "faq", "icon", "id", "links", "children", "metadata", "title", "value", "isOpen", "setIsOpen", "toggle", "action", "__spreadValues", "link", "__spreadProps", "Expander", "description", "itemRenderer", "items", "item", "expander_default"]
 }