npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.11 → 4.0.0-alpha.13 - Mend

@lifesg/react-design-system 4.0.0-alpha.11 → 4.0.0-alpha.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (288) hide show

package/shared/dropdown-list/dropdown-label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-label.js","sources":["../../../src/shared/dropdown-list/dropdown-label.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Font } from \"../../theme\";\nimport { useApplyStyle } from \"../../theme/utils/use-apply-styles\";\nimport { StringHelper } from \"../../util/string-helper\";\nimport * as styles from \"./dropdown-label.styles\";\nimport type { DropdownVariantType, LabelDisplayType } from \"./types\";\n\ninterface DropdownLabelProps {\n bold?: boolean \| undefined;\n displayType?: LabelDisplayType \| undefined;\n label: string;\n maxLines?: number \| undefined;\n searchTerm?: string \| undefined;\n selected?: boolean \| undefined;\n disabled?: boolean \| undefined;\n sublabel?: string \| undefined;\n truncationType?: \"middle\" \| \"end\" \| undefined;\n variant?: DropdownVariantType \| undefined;\n}\n\nexport const DropdownLabel = ({\n bold,\n displayType = \"inline\",\n label,\n searchTerm,\n maxLines = 2,\n selected,\n disabled,\n sublabel,\n truncationType = \"middle\",\n variant = \"default\",\n}: DropdownLabelProps): JSX.Element => {\n const fontSize =\n variant === \"small\"\n ? Font.Spec[\"body-size-md\"]\n : Font.Spec[\"body-size-baseline\"];\n const fontFamily = Font.Spec[\"font-family-body\"];\n const { ref, width } = useResizeDetector();\n\n const primaryTextRef = useRef<HTMLDivElement>(null);\n const secondaryTextRef = useRef<HTMLDivElement>(null);\n\n useApplyStyle(primaryTextRef, {\n [styles.tokens.primaryText.maxLines]: String(maxLines),\n });\n\n useApplyStyle(secondaryTextRef, {\n [styles.tokens.secondaryText.maxLines]: String(maxLines),\n });\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n const hasExceededContainer = useCallback(\n (displayText: string) => {\n if (displayType !== \"inline\" \|\| !width) {\n return false;\n }\n\n // best-effort attempt to check if multi-line text will overflow,\n // rendering an actual element in the DOM might be more accurate\n // but might not be performant for large lists\n const textWidth = StringHelper.getTextWidth(\n displayText,\n `${fontSize} '${fontFamily}'`\n );\n\n // there's less space than expected due to word breaks, so an\n // arbitary offset is applied\n return textWidth > width - 50;\n },\n [width, displayType, fontSize, fontFamily]\n );\n\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const shouldTruncateTitle = useMemo(\n () => hasExceededContainer(label),\n [hasExceededContainer, label]\n );\n const shouldTruncateLabel = useMemo(\n () => sublabel && hasExceededContainer(sublabel),\n [hasExceededContainer, sublabel]\n );\n\n // css cannot truncate inline elements so force the display to render\n // them separately\n const itemDisplayType =\n truncationType === \"middle\" &&\n (shouldTruncateTitle \|\| shouldTruncateLabel)\n ? \"next-line\"\n : displayType;\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderMatchInBold = (displayText: string) => {\n if (!searchTerm) {\n return displayText;\n }\n\n const match = searchTerm.toLowerCase().trim();\n const startIndex = displayText.toLowerCase().indexOf(match);\n const endIndex = startIndex + searchTerm.length;\n\n if (startIndex === -1) {\n return displayText;\n }\n\n return (\n <>\n {label.slice(0, startIndex)}\n <span className={styles.matchedText}>\n {label.slice(startIndex, endIndex)}\n </span>\n {label.slice(endIndex)}\n </>\n );\n };\n\n const renderTruncatedText = (displayText: string): JSX.Element => {\n return (\n <>\n <div\n className={clsx(\n styles.baseTruncateStyle,\n styles.truncateFirstLine,\n maxLines === 1 && styles.truncateLineSingle\n )}\n aria-hidden\n >\n {renderMatchInBold(displayText)}\n </div>\n <div\n className={clsx(\n styles.baseTruncateStyle,\n styles.truncateSecondLine,\n maxLines === 1 && styles.truncateLineSingle\n )}\n aria-hidden\n >\n {renderMatchInBold(displayText)}\n </div>\n </>\n );\n };\n\n return (\n <div\n ref={ref}\n className={clsx(\n styles.label,\n variant === \"small\" && styles.labelVariantSmall,\n itemDisplayType === \"next-line\" && styles.labelNextLine\n )}\n >\n <div\n ref={primaryTextRef}\n aria-label={label}\n className={clsx(\n styles.primaryText,\n bold && styles.primaryTextBold,\n disabled && styles.primaryTextDisabled,\n !disabled && selected && styles.primaryTextSelected,\n itemDisplayType === \"inline\" &&\n styles.primaryTextLabelInline,\n truncationType === \"end\" && styles.primaryTextTruncateEnd\n )}\n >\n {truncationType === \"middle\" && shouldTruncateTitle\n ? renderTruncatedText(label)\n : renderMatchInBold(label)}\n </div>\n {sublabel && (\n <div\n ref={secondaryTextRef}\n aria-label={sublabel}\n className={clsx(\n styles.secondaryText,\n itemDisplayType === \"inline\" &&\n styles.secondaryTextLabelInline,\n truncationType === \"end\" &&\n styles.secondaryTextTruncateEnd,\n displayType === \"next-line\"\n ? styles.secondaryTextNextLine\n : styles.secondaryTextInline\n )}\n >\n {truncationType === \"middle\" && shouldTruncateLabel\n ? renderTruncatedText(sublabel)\n : sublabel}\n </div>\n )}\n </div>\n );\n};\n"],"names":["DropdownLabel","bold","displayType","label","searchTerm","maxLines","selected","disabled","sublabel","truncationType","variant","fontSize","Font","Spec","fontFamily","ref","width","useResizeDetector","primaryTextRef","useRef","secondaryTextRef","useApplyStyle","styles.tokens","primaryText","String","secondaryText","hasExceededContainer","useCallback","displayText","StringHelper","getTextWidth","shouldTruncateTitle","useMemo","shouldTruncateLabel","itemDisplayType","renderMatchInBold","match","toLowerCase","trim","startIndex","indexOf","endIndex","length","_jsxs","_Fragment","children","slice","_jsx","className","styles.matchedText","renderTruncatedText","clsx","styles.baseTruncateStyle","styles.truncateFirstLine","styles.truncateLineSingle","styles.truncateSecondLine","styles.label","styles.labelVariantSmall","styles.labelNextLine","styles.primaryText","styles.primaryTextBold","styles.primaryTextDisabled","styles.primaryTextSelected","styles.primaryTextLabelInline","styles.primaryTextTruncateEnd","styles.secondaryText","styles.secondaryTextLabelInline","styles.secondaryTextTruncateEnd","styles.secondaryTextNextLine","styles.secondaryTextInline"],"mappings":"soCAuBO,MAAMA,EAAgB,EACzBC,OACAC,cAAc,SAAQC,MACtBA,EACAC,aACAC,WAAW,EACXC,WACAC,WACAC,WACAC,iBAAiB,SACjBC,UAAU,cAEV,MAAMC,EACU,UAAZD,EACME,EAAKC,KAAK,gBACVD,EAAKC,KAAK,sBACdC,EAAaF,EAAKC,KAAK,qBACvBE,IAAEA,EAAGC,MAAEA,GAAUC,IAEjBC,EAAiBC,EAAuB,MACxCC,EAAmBD,EAAuB,MAEhDE,EAAcH,EAAgB,CAC1B,CAACI,EAAcC,YAAYlB,UAAWmB,OAAOnB,KAGjDgB,EAAcD,EAAkB,CAC5B,CAACE,EAAcG,cAAcpB,UAAWmB,OAAOnB,KAMnD,MAAMqB,EAAuBC,GACxBC,IACG,GAAoB,WAAhB1B,IAA6Bc,EAC7B,OAAO,EAaX,OAPkBa,EAAaC,aAC3BF,EACA,GAAGjB,MAAaG,MAKDE,EAAQ,EAAE,GAEjC,CAACA,EAAOd,EAAaS,EAAUG,IAM7BiB,EAAsBC,GACxB,IAAMN,EAAqBvB,IAC3B,CAACuB,EAAsBvB,IAErB8B,EAAsBD,GACxB,IAAMxB,GAAYkB,EAAqBlB,IACvC,CAACkB,EAAsBlB,IAKrB0B,EACiB,WAAnBzB,IACCsB,GAAuBE,GAClB,YACA/B,EAKJiC,EAAqBP,IACvB,IAAKxB,EACD,OAAOwB,EAGX,MAAMQ,EAAQhC,EAAWiC,cAAcC,OACjCC,EAAaX,EAAYS,cAAcG,QAAQJ,GAC/CK,EAAWF,EAAanC,EAAWsC,OAEzC,OAAmB,IAAfH,EACOX,EAIPe,EAAAC,EAAA,CAAAC,SAAA,CACK1C,EAAM2C,MAAM,EAAGP,GAChBQ,EAAA,OAAA,CAAMC,UAAWC,EAAkBJ,SAC9B1C,EAAM2C,MAAMP,EAAYE,KAE5BtC,EAAM2C,MAAML,KACd,EAILS,EAAuBtB,GAErBe,EAAAC,EAAA,CAAAC,SAAA,CACIE,EAAA,MAAA,CACIC,UAAWG,EACPC,EACAC,EACa,IAAbhD,GAAkBiD,GACrB,eAAA,EAAAT,SAGAV,EAAkBP,KAEvBmB,EAAA,MAAA,CACIC,UAAWG,EACPC,EACAG,EACa,IAAblD,GAAkBiD,GACrB,eAAA,EAAAT,SAGAV,EAAkBP,QAMnC,OACIe,EAAA,MAAA,CACI5B,IAAKA,EACLiC,UAAWG,EACPK,EACY,UAAZ9C,GAAuB+C,EACH,cAApBvB,GAAmCwB,GACtCb,SAAA,CAEDE,SACIhC,IAAKG,EAAc,aACPf,EACZ6C,UAAWG,EACPQ,EACA1D,GAAQ2D,EACRrD,GAAYsD,GACXtD,GAAYD,GAAYwD,EACL,WAApB5B,GACI6B,EACe,QAAnBtD,GAA4BuD,GAC/BnB,SAEmB,WAAnBpC,GAA+BsB,EAC1BmB,EAAoB/C,GACpBgC,EAAkBhC,KAE3BK,GACGuC,EAAA,MAAA,CACIhC,IAAKK,EAAgB,aACTZ,EACZwC,UAAWG,EACPc,EACoB,WAApB/B,GACIgC,EACe,QAAnBzD,GACI0D,EACY,cAAhBjE,EACMkE,EACAC,YAGU,WAAnB5D,GAA+BwB,EAC1BiB,EAAoB1C,GACpBA,MAGZ"}
1	+ {"version":3,"file":"dropdown-label.js","sources":["../../../src/shared/dropdown-list/dropdown-label.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Font } from \"../../theme\";\nimport { useApplyStyle } from \"../../theme/utils/use-apply-styles\";\nimport { StringHelper } from \"../../util/string-helper\";\nimport * as styles from \"./dropdown-label.styles\";\nimport type {\n DropdownVariantType,\n LabelDisplayType,\n TruncateType,\n} from \"./types\";\n\ninterface DropdownLabelProps {\n bold?: boolean \| undefined;\n displayType?: LabelDisplayType \| undefined;\n label: string;\n maxLines?: number \| undefined;\n searchTerm?: string \| undefined;\n selected?: boolean \| undefined;\n disabled?: boolean \| undefined;\n sublabel?: string \| undefined;\n truncationType?: TruncateType \| undefined;\n variant?: DropdownVariantType \| undefined;\n}\n\nexport const DropdownLabel = ({\n bold,\n displayType = \"inline\",\n label,\n searchTerm,\n maxLines = 2,\n selected,\n disabled,\n sublabel,\n truncationType = \"middle\",\n variant = \"default\",\n}: DropdownLabelProps): JSX.Element => {\n const fontSize =\n variant === \"small\"\n ? Font.Spec[\"body-size-md\"]\n : Font.Spec[\"body-size-baseline\"];\n const fontFamily = Font.Spec[\"font-family-body\"];\n const { ref, width } = useResizeDetector();\n\n const noTruncation = truncationType === \"none\";\n\n const primaryTextRef = useRef<HTMLDivElement>(null);\n const secondaryTextRef = useRef<HTMLDivElement>(null);\n\n useApplyStyle(primaryTextRef, {\n [styles.tokens.primaryText.maxLines]: noTruncation\n ? null\n : String(maxLines),\n });\n\n useApplyStyle(secondaryTextRef, {\n [styles.tokens.secondaryText.maxLines]: noTruncation\n ? null\n : String(maxLines),\n });\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n const hasExceededContainer = useCallback(\n (displayText: string) => {\n if (noTruncation \|\| displayType !== \"inline\" \|\| !width) {\n return false;\n }\n\n // best-effort attempt to check if multi-line text will overflow,\n // rendering an actual element in the DOM might be more accurate\n // but might not be performant for large lists\n const textWidth = StringHelper.getTextWidth(\n displayText,\n `${fontSize} '${fontFamily}'`\n );\n\n // there's less space than expected due to word breaks, so an\n // arbitary offset is applied\n return textWidth > width - 50;\n },\n [noTruncation, width, displayType, fontSize, fontFamily]\n );\n\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const shouldTruncateTitle = useMemo(\n () => hasExceededContainer(label),\n [hasExceededContainer, label]\n );\n const shouldTruncateLabel = useMemo(\n () => sublabel && hasExceededContainer(sublabel),\n [hasExceededContainer, sublabel]\n );\n\n // css cannot truncate inline elements so force the display to render\n // them separately\n const itemDisplayType =\n truncationType === \"middle\" &&\n (shouldTruncateTitle \|\| shouldTruncateLabel)\n ? \"next-line\"\n : displayType;\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderMatchInBold = (displayText: string) => {\n if (!searchTerm) {\n return displayText;\n }\n\n const match = searchTerm.toLowerCase().trim();\n const startIndex = displayText.toLowerCase().indexOf(match);\n const endIndex = startIndex + searchTerm.length;\n\n if (startIndex === -1) {\n return displayText;\n }\n\n return (\n <>\n {label.slice(0, startIndex)}\n <span className={styles.matchedText}>\n {label.slice(startIndex, endIndex)}\n </span>\n {label.slice(endIndex)}\n </>\n );\n };\n\n const renderTruncatedText = (displayText: string): JSX.Element => {\n return (\n <>\n <div\n className={clsx(\n styles.baseTruncateStyle,\n styles.truncateFirstLine,\n maxLines === 1 && styles.truncateLineSingle\n )}\n aria-hidden\n >\n {renderMatchInBold(displayText)}\n </div>\n <div\n className={clsx(\n styles.baseTruncateStyle,\n styles.truncateSecondLine,\n maxLines === 1 && styles.truncateLineSingle\n )}\n aria-hidden\n >\n {renderMatchInBold(displayText)}\n </div>\n </>\n );\n };\n\n return (\n <div\n ref={ref}\n className={clsx(\n styles.label,\n variant === \"small\" && styles.labelVariantSmall,\n itemDisplayType === \"next-line\" && styles.labelNextLine\n )}\n >\n <div\n ref={primaryTextRef}\n aria-label={label}\n className={clsx(\n styles.primaryText,\n bold && styles.primaryTextBold,\n disabled && styles.primaryTextDisabled,\n !disabled && selected && styles.primaryTextSelected,\n itemDisplayType === \"inline\" &&\n styles.primaryTextLabelInline,\n truncationType === \"end\" && styles.primaryTextTruncateEnd\n )}\n >\n {truncationType === \"middle\" && shouldTruncateTitle\n ? renderTruncatedText(label)\n : renderMatchInBold(label)}\n </div>\n {sublabel && (\n <div\n ref={secondaryTextRef}\n aria-label={sublabel}\n className={clsx(\n styles.secondaryText,\n itemDisplayType === \"inline\" &&\n styles.secondaryTextLabelInline,\n truncationType === \"end\" &&\n styles.secondaryTextTruncateEnd,\n displayType === \"next-line\"\n ? styles.secondaryTextNextLine\n : styles.secondaryTextInline\n )}\n >\n {truncationType === \"middle\" && shouldTruncateLabel\n ? renderTruncatedText(sublabel)\n : sublabel}\n </div>\n )}\n </div>\n );\n};\n"],"names":["DropdownLabel","bold","displayType","label","searchTerm","maxLines","selected","disabled","sublabel","truncationType","variant","fontSize","Font","Spec","fontFamily","ref","width","useResizeDetector","noTruncation","primaryTextRef","useRef","secondaryTextRef","useApplyStyle","styles.tokens","primaryText","String","secondaryText","hasExceededContainer","useCallback","displayText","StringHelper","getTextWidth","shouldTruncateTitle","useMemo","shouldTruncateLabel","itemDisplayType","renderMatchInBold","match","toLowerCase","trim","startIndex","indexOf","endIndex","length","_jsxs","_Fragment","children","slice","_jsx","className","styles.matchedText","renderTruncatedText","clsx","styles.baseTruncateStyle","styles.truncateFirstLine","styles.truncateLineSingle","styles.truncateSecondLine","styles.label","styles.labelVariantSmall","styles.labelNextLine","styles.primaryText","styles.primaryTextBold","styles.primaryTextDisabled","styles.primaryTextSelected","styles.primaryTextLabelInline","styles.primaryTextTruncateEnd","styles.secondaryText","styles.secondaryTextLabelInline","styles.secondaryTextTruncateEnd","styles.secondaryTextNextLine","styles.secondaryTextInline"],"mappings":"soCA2BO,MAAMA,EAAgB,EACzBC,OACAC,cAAc,SAAQC,MACtBA,EACAC,aACAC,WAAW,EACXC,WACAC,WACAC,WACAC,iBAAiB,SACjBC,UAAU,cAEV,MAAMC,EACU,UAAZD,EACME,EAAKC,KAAK,gBACVD,EAAKC,KAAK,sBACdC,EAAaF,EAAKC,KAAK,qBACvBE,IAAEA,EAAGC,MAAEA,GAAUC,IAEjBC,EAAkC,SAAnBT,EAEfU,EAAiBC,EAAuB,MACxCC,EAAmBD,EAAuB,MAEhDE,EAAcH,EAAgB,CAC1B,CAACI,EAAcC,YAAYnB,UAAWa,EAChC,KACAO,OAAOpB,KAGjBiB,EAAcD,EAAkB,CAC5B,CAACE,EAAcG,cAAcrB,UAAWa,EAClC,KACAO,OAAOpB,KAMjB,MAAMsB,EAAuBC,GACxBC,IACG,GAAIX,GAAgC,WAAhBhB,IAA6Bc,EAC7C,OAAO,EAaX,OAPkBc,EAAaC,aAC3BF,EACA,GAAGlB,MAAaG,MAKDE,EAAQ,EAAE,GAEjC,CAACE,EAAcF,EAAOd,EAAaS,EAAUG,IAM3CkB,EAAsBC,GACxB,IAAMN,EAAqBxB,IAC3B,CAACwB,EAAsBxB,IAErB+B,EAAsBD,GACxB,IAAMzB,GAAYmB,EAAqBnB,IACvC,CAACmB,EAAsBnB,IAKrB2B,EACiB,WAAnB1B,IACCuB,GAAuBE,GAClB,YACAhC,EAKJkC,EAAqBP,IACvB,IAAKzB,EACD,OAAOyB,EAGX,MAAMQ,EAAQjC,EAAWkC,cAAcC,OACjCC,EAAaX,EAAYS,cAAcG,QAAQJ,GAC/CK,EAAWF,EAAapC,EAAWuC,OAEzC,OAAmB,IAAfH,EACOX,EAIPe,EAAAC,EAAA,CAAAC,SAAA,CACK3C,EAAM4C,MAAM,EAAGP,GAChBQ,EAAA,OAAA,CAAMC,UAAWC,EAAkBJ,SAC9B3C,EAAM4C,MAAMP,EAAYE,KAE5BvC,EAAM4C,MAAML,KACd,EAILS,EAAuBtB,GAErBe,EAAAC,EAAA,CAAAC,SAAA,CACIE,EAAA,MAAA,CACIC,UAAWG,EACPC,EACAC,EACa,IAAbjD,GAAkBkD,GACrB,eAAA,EAAAT,SAGAV,EAAkBP,KAEvBmB,EAAA,MAAA,CACIC,UAAWG,EACPC,EACAG,EACa,IAAbnD,GAAkBkD,GACrB,eAAA,EAAAT,SAGAV,EAAkBP,QAMnC,OACIe,EAAA,MAAA,CACI7B,IAAKA,EACLkC,UAAWG,EACPK,EACY,UAAZ/C,GAAuBgD,EACH,cAApBvB,GAAmCwB,GACtCb,SAAA,CAEDE,SACIjC,IAAKI,EAAc,aACPhB,EACZ8C,UAAWG,EACPQ,EACA3D,GAAQ4D,EACRtD,GAAYuD,GACXvD,GAAYD,GAAYyD,EACL,WAApB5B,GACI6B,EACe,QAAnBvD,GAA4BwD,GAC/BnB,SAEmB,WAAnBrC,GAA+BuB,EAC1BmB,EAAoBhD,GACpBiC,EAAkBjC,KAE3BK,GACGwC,EAAA,MAAA,CACIjC,IAAKM,EAAgB,aACTb,EACZyC,UAAWG,EACPc,EACoB,WAApB/B,GACIgC,EACe,QAAnB1D,GACI2D,EACY,cAAhBlE,EACMmE,EACAC,YAGU,WAAnB7D,GAA+ByB,EAC1BiB,EAAoB3C,GACpBA,MAGZ"}

package/shared/dropdown-list/types.d.ts CHANGED Viewed

@@ -3,8 +3,9 @@
  *
  * - `"middle"` trims the centre of the text.
  * - `"end"` trims from the right.
+ * - `"none"` disables truncation, the text wraps and is displayed in full.
  */
-export type TruncateType = "middle" | "end";
+export type TruncateType = "middle" | "end" | "none";
 /**
  * Async load state for dropdown items.
  *
@@ -84,7 +85,10 @@ export interface DropdownConfigProps {
     itemsLoadState?: ItemsLoadStateType | undefined;
     /** How overflowing item text is truncated. */
     itemTruncationType?: TruncateType | undefined;
-    /** Maximum visible lines before the label is truncated (applies to `"end"` truncation). */
+    /**
+     * Maximum visible lines before the label is truncated (applies to `"end"`
+     * truncation). Ignored when `itemTruncationType` is `"none"`.
+     */
     itemMaxLines?: number | undefined;
     /** Visual size variant for the dropdown items. */
     variant?: DropdownVariantType | undefined;

package/shared/fade-wrapper/fade-wrapper.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as r,jsx as t,Fragment as o}from"react/jsx-runtime";import{ChevronLeftIcon as i}from"@lifesg/react-icons/chevron-left";import{ChevronRightIcon as s}from"@lifesg/react-icons/chevron-right";import l from"clsx";import n from"../../external/lodash/throttle.js";import{forwardRef as c,useState as a,useRef as d,useImperativeHandle as m,useCallback as f,useMemo as h,useEffect as p}from"react";import{useResizeDetector as u}from"../../external/react-resize-detector/build/index.esm.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as j}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{ClickableIcon as b}from"../clickable-icon/clickable-icon.js";import{tokens as v,wrapper as g,content as k,fadeIndicatorButton as x,indicatorLeft as N,fade as y,fadeLeft as z,indicatorRight as R,fadeRight as w}from"./fade-wrapper.styles.js";import{getFadeColorSet as C,getFadeBackgroundColorValue as L}from"./helpers.js";const W=c(((c,W)=>{var{children:q,className:E,fadeColor:I,fadePosition:M="both",showIndicator:P=!1,onResize:_}=c,O=e(c,["children","className","fadeColor","fadePosition","showIndicator","onResize"]);const[A,B]=a("left"===M||"both"===M),[D,F]=a("right"===M||"both"===M),G=d(null),H=d(null),J=d(null),K=d(null),Q=C(I);j(J,{[v.backgroundColor]:L(Q.left,P)}),j(K,{[v.backgroundColor]:L(Q.right,P)}),u({onResize:U,targetRef:G,refreshMode:"debounce",refreshRate:50}),m(W,(()=>({resize(){U()}})));const S=f((()=>{const e=G.current,r=H.current;e&&r&&r.scrollWidth>e.offsetWidth?(F(Math.round(r.scrollLeft)<r.scrollWidth-r.offsetWidth),B(r.scrollLeft>=1)):(F(!1),B(!1))}),[]),T=h((()=>n(S,50)),[S]);function U(){S(),_&&_({content:H.current,wrapper:G.current})}p((()=>{const e=H.current;return S(),e&&e.addEventListener("scroll",T),()=>{e&&e.removeEventListener("scroll",T),T.cancel()}}),[S,T]);return r("div",Object.assign({ref:G,className:l(g,E)},O,{children:[t("div",{ref:H,className:k,children:q}),r(o,{children:[A&&t("div",{ref:J,className:l(y,z),"data-id":"left-fade",children:P&&t(b,{className:l(x,N),"data-id":"left-fade-indicator-button",children:t(i,{})})}),D&&t("div",{ref:K,className:l(y,w),"data-id":"right-fade",children:P&&t(b,{className:l(x,R),"data-id":"right-fade-indicator-button",children:t(s,{})})})]})]}))}));export{W as FadeWrapper};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as r,jsx as t,Fragment as o}from"react/jsx-runtime";import{ChevronLeftIcon as i}from"@lifesg/react-icons/chevron-left";import{ChevronRightIcon as s}from"@lifesg/react-icons/chevron-right";import l from"clsx";import n from"../../external/lodash/throttle.js";import{forwardRef as c,useState as a,useRef as d,useImperativeHandle as m,useCallback as f,useMemo as h,useEffect as u}from"react";import{useResizeDetector as p}from"../../external/react-resize-detector/build/index.esm.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as j}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{ClickableIcon as b}from"../clickable-icon/clickable-icon.js";import{tokens as v,wrapper as g,content as k,fadeIndicatorButton as x,indicatorLeft as N,fade as W,fadeLeft as y,indicatorRight as z,fadeRight as L}from"./fade-wrapper.styles.js";import{getFadeColorSet as R,getFadeBackgroundColorValue as w}from"./helpers.js";const C=c(((c,C)=>{var{children:E,className:q,fadeColor:I,fadePosition:M="both",showIndicator:P=!1,onResize:_}=c,O=e(c,["children","className","fadeColor","fadePosition","showIndicator","onResize"]);const[T,A]=a("left"===M||"both"===M),[B,D]=a("right"===M||"both"===M),F=d(null),G=d(null),H=d(null),J=d(null),K=R(I);j(H,{[v.backgroundColor]:w(K.left,P)}),j(J,{[v.backgroundColor]:w(K.right,P)}),p({onResize:U,targetRef:F,refreshMode:"debounce",refreshRate:50}),m(C,(()=>({resize(){U()},scrollToEnd(){const e=G.current,r=F.current;e&&r&&(e.scrollLeft=e.scrollWidth-r.offsetWidth)}})));const Q=f((()=>{const e=F.current,r=G.current;e&&r&&r.scrollWidth>e.offsetWidth?(D(Math.round(r.scrollLeft)<r.scrollWidth-r.offsetWidth),A(r.scrollLeft>=1)):(D(!1),A(!1))}),[]),S=h((()=>n(Q,50)),[Q]);function U(){Q(),_&&_({content:G.current,wrapper:F.current})}u((()=>{const e=G.current;return Q(),e&&e.addEventListener("scroll",S),()=>{e&&e.removeEventListener("scroll",S),S.cancel()}}),[Q,S]);return r("div",Object.assign({ref:F,className:l(g,q)},O,{children:[t("div",{ref:G,className:k,children:E}),r(o,{children:[T&&t("div",{ref:H,className:l(W,y),"data-id":"left-fade",children:P&&t(b,{className:l(x,N),"data-id":"left-fade-indicator-button",children:t(i,{})})}),B&&t("div",{ref:J,className:l(W,L),"data-id":"right-fade",children:P&&t(b,{className:l(x,z),"data-id":"right-fade-indicator-button",children:t(s,{})})})]})]}))}));export{C as FadeWrapper};
 //# sourceMappingURL=fade-wrapper.js.map

package/shared/fade-wrapper/fade-wrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fade-wrapper.js","sources":["../../../src/shared/fade-wrapper/fade-wrapper.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport type React from \"react\";\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { ClickableIcon } from \"../clickable-icon\";\nimport * as styles from \"./fade-wrapper.styles\";\nimport { getFadeBackgroundColorValue, getFadeColorSet } from \"./helpers\";\nimport type { FadeWrapperProps, FadeWrapperRef } from \"./types\";\n\nconst Component = (\n {\n children,\n className,\n fadeColor,\n fadePosition = \"both\",\n showIndicator = false,\n onResize,\n ...otherProps\n }: FadeWrapperProps,\n ref: React.Ref<FadeWrapperRef>\n) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const [showFadeLeft, setShowFadeLeft] = useState<boolean>(\n fadePosition === \"left\" \|\| fadePosition === \"both\"\n );\n const [showFadeRight, setShowFadeRight] = useState<boolean>(\n fadePosition === \"right\" \|\| fadePosition === \"both\"\n );\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const fadeLeftRef = useRef<HTMLDivElement>(null);\n const fadeRightRef = useRef<HTMLDivElement>(null);\n\n const fadeColorSet = getFadeColorSet(fadeColor);\n\n useApplyStyle(fadeLeftRef, {\n [styles.tokens.backgroundColor]: getFadeBackgroundColorValue(\n fadeColorSet.left,\n showIndicator\n ),\n });\n useApplyStyle(fadeRightRef, {\n [styles.tokens.backgroundColor]: getFadeBackgroundColorValue(\n fadeColorSet.right,\n showIndicator\n ),\n });\n\n // To scroll left when wrapper resizes\n useResizeDetector({\n onResize: handleResize,\n targetRef: wrapperRef,\n refreshMode: \"debounce\",\n refreshRate: 50,\n });\n\n useImperativeHandle(ref, () => {\n return {\n resize() {\n handleResize();\n },\n };\n });\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n const handleScroll = useCallback(() => {\n const wrapper = wrapperRef.current;\n const content = contentRef.current;\n\n if (wrapper && content && content.scrollWidth > wrapper.offsetWidth) {\n /*\n NOTE: Used Math.round because we observe a 0.5 difference\n * even when we scroll to the end. This causes the fade right\n * to not be removed\n */\n setShowFadeRight(\n Math.round(content.scrollLeft) <\n content.scrollWidth - content.offsetWidth\n );\n setShowFadeLeft(content.scrollLeft >= 1);\n } else {\n setShowFadeRight(false);\n setShowFadeLeft(false);\n }\n }, []);\n\n const throttledScrollHandler = useMemo(() => {\n return throttle(handleScroll, 50);\n }, [handleScroll]);\n\n useEffect(() => {\n const content = contentRef.current;\n\n handleScroll();\n\n if (content) {\n content.addEventListener(\"scroll\", throttledScrollHandler);\n }\n\n return () => {\n if (content) {\n content.removeEventListener(\"scroll\", throttledScrollHandler);\n }\n\n throttledScrollHandler.cancel();\n };\n }, [handleScroll, throttledScrollHandler]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n\n function handleResize() {\n handleScroll();\n\n if (onResize) {\n onResize({\n content: contentRef.current!,\n wrapper: wrapperRef.current!,\n });\n }\n\n // TODO: Will move this out to Breadcrumb when it uses this component\n // if (content && wrapper && window.innerWidth <= MediaWidths.tablet) {\n // content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n // }\n }\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderFade = () => {\n return (\n <>\n {showFadeLeft && (\n <div\n ref={fadeLeftRef}\n className={clsx(styles.fade, styles.fadeLeft)}\n data-id=\"left-fade\"\n >\n {showIndicator && (\n <ClickableIcon\n className={clsx(\n styles.fadeIndicatorButton,\n styles.indicatorLeft\n )}\n data-id=\"left-fade-indicator-button\"\n >\n <ChevronLeftIcon />\n </ClickableIcon>\n )}\n </div>\n )}\n {showFadeRight && (\n <div\n ref={fadeRightRef}\n className={clsx(styles.fade, styles.fadeRight)}\n data-id=\"right-fade\"\n >\n {showIndicator && (\n <ClickableIcon\n className={clsx(\n styles.fadeIndicatorButton,\n styles.indicatorRight\n )}\n data-id=\"right-fade-indicator-button\"\n >\n <ChevronRightIcon />\n </ClickableIcon>\n )}\n </div>\n )}\n </>\n );\n };\n\n return (\n <div\n ref={wrapperRef}\n className={clsx(styles.wrapper, className)}\n {...otherProps}\n >\n <div ref={contentRef} className={styles.content}>\n {children}\n </div>\n {renderFade()}\n </div>\n );\n};\n\nexport const FadeWrapper = forwardRef(Component);\n"],"names":["FadeWrapper","forwardRef","_a","ref","children","className","fadeColor","fadePosition","showIndicator","onResize","otherProps","__rest","showFadeLeft","setShowFadeLeft","useState","showFadeRight","setShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","fadeColorSet","getFadeColorSet","useApplyStyle","styles.tokens","backgroundColor","getFadeBackgroundColorValue","left","right","useResizeDetector","handleResize","targetRef","refreshMode","refreshRate","useImperativeHandle","resize","handleScroll","useCallback","wrapper","current","content","scrollWidth","offsetWidth","Math","round","scrollLeft","throttledScrollHandler","useMemo","throttle","useEffect","addEventListener","removeEventListener","cancel","_jsxs","Object","assign","clsx","styles.wrapper","_jsx","styles.content","styles.fade","styles.fadeLeft","ClickableIcon","styles.fadeIndicatorButton","styles.indicatorLeft","ChevronLeftIcon","styles.fadeRight","styles.indicatorRight","ChevronRightIcon"],"mappings":"ysCAsBA,MA0LaA,EAAcC,GA1LT,CACdC,EASAC,SATAC,SACIA,EAAQC,UACRA,EAASC,UACTA,EAASC,aACTA,EAAe,OAAMC,cACrBA,GAAgB,EAAKC,SACrBA,GAAQP,EACLQ,EAAUC,EAAAT,EAPjB,gFAcA,MAAOU,EAAcC,GAAmBC,EACnB,SAAjBP,GAA4C,SAAjBA,IAExBQ,EAAeC,GAAoBF,EACrB,UAAjBP,GAA6C,SAAjBA,GAG1BU,EAAaC,EAAuB,MACpCC,EAAaD,EAAuB,MACpCE,EAAcF,EAAuB,MACrCG,EAAeH,EAAuB,MAEtCI,EAAeC,EAAgBjB,GAErCkB,EAAcJ,EAAa,CACvB,CAACK,EAAcC,iBAAkBC,EAC7BL,EAAaM,KACbpB,KAGRgB,EAAcH,EAAc,CACxB,CAACI,EAAcC,iBAAkBC,EAC7BL,EAAaO,MACbrB,KAKRsB,EAAkB,CACdrB,SAAUsB,EACVC,UAAWf,EACXgB,YAAa,WACbC,YAAa,KAGjBC,EAAoBhC,GAAK,KACd,CACH,MAAAiC,GACIL,GACJ,MAOR,MAAMM,EAAeC,GAAY,KAC7B,MAAMC,EAAUtB,EAAWuB,QACrBC,EAAUtB,EAAWqB,QAEvBD,GAAWE,GAAWA,EAAQC,YAAcH,EAAQI,aAMpD3B,EACI4B,KAAKC,MAAMJ,EAAQK,YACfL,EAAQC,YAAcD,EAAQE,aAEtC9B,EAAgB4B,EAAQK,YAAc,KAEtC9B,GAAiB,GACjBH,GAAgB,GACpB,GACD,IAEGkC,EAAyBC,GAAQ,IAC5BC,EAASZ,EAAc,KAC/B,CAACA,IAwBJ,SAASN,IACLM,IAEI5B,GACAA,EAAS,CACLgC,QAAStB,EAAWqB,QACpBD,QAAStB,EAAWuB,SAQhC,CApCAU,GAAU,KACN,MAAMT,EAAUtB,EAAWqB,QAQ3B,OANAH,IAEII,GACAA,EAAQU,iBAAiB,SAAUJ,GAGhC,KACCN,GACAA,EAAQW,oBAAoB,SAAUL,GAG1CA,EAAuBM,QAAQ,CAClC,GACF,CAAChB,EAAcU,IAsElB,OACIO,EAAA,MAAAC,OAAAC,OAAA,CACIrD,IAAKc,EACLZ,UAAWoD,EAAKC,EAAgBrD,IAC5BK,EAAU,CAAAN,SAAA,CAEduD,EAAA,MAAA,CAAKxD,IAAKgB,EAAYd,UAAWuD,EAAcxD,SAC1CA,IAlDLkD,eACK1C,GACG+C,EAAA,MAAA,CACIxD,IAAKiB,EACLf,UAAWoD,EAAKI,EAAaC,GAAgB,UACrC,YAAW1D,SAElBI,GACGmD,EAACI,EAAa,CACV1D,UAAWoD,EACPO,EACAC,GACH,UACO,6BAA4B7D,SAEpCuD,EAACO,EAAe,CAAA,OAK/BnD,GACG4C,EAAA,MAAA,CACIxD,IAAKkB,EACLhB,UAAWoD,EAAKI,EAAaM,aACrB,aAAY/D,SAEnBI,GACGmD,EAACI,EAAa,CACV1D,UAAWoD,EACPO,EACAI,aAEI,8BAA6BhE,SAErCuD,EAACU,EAAgB,CAAA,aAmBnC"}
1	+ {"version":3,"file":"fade-wrapper.js","sources":["../../../src/shared/fade-wrapper/fade-wrapper.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport type React from \"react\";\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { ClickableIcon } from \"../clickable-icon\";\nimport * as styles from \"./fade-wrapper.styles\";\nimport { getFadeBackgroundColorValue, getFadeColorSet } from \"./helpers\";\nimport type { FadeWrapperProps, FadeWrapperRef } from \"./types\";\n\nconst Component = (\n {\n children,\n className,\n fadeColor,\n fadePosition = \"both\",\n showIndicator = false,\n onResize,\n ...otherProps\n }: FadeWrapperProps,\n ref: React.Ref<FadeWrapperRef>\n) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const [showFadeLeft, setShowFadeLeft] = useState<boolean>(\n fadePosition === \"left\" \|\| fadePosition === \"both\"\n );\n const [showFadeRight, setShowFadeRight] = useState<boolean>(\n fadePosition === \"right\" \|\| fadePosition === \"both\"\n );\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const fadeLeftRef = useRef<HTMLDivElement>(null);\n const fadeRightRef = useRef<HTMLDivElement>(null);\n\n const fadeColorSet = getFadeColorSet(fadeColor);\n\n useApplyStyle(fadeLeftRef, {\n [styles.tokens.backgroundColor]: getFadeBackgroundColorValue(\n fadeColorSet.left,\n showIndicator\n ),\n });\n useApplyStyle(fadeRightRef, {\n [styles.tokens.backgroundColor]: getFadeBackgroundColorValue(\n fadeColorSet.right,\n showIndicator\n ),\n });\n\n // To scroll left when wrapper resizes\n useResizeDetector({\n onResize: handleResize,\n targetRef: wrapperRef,\n refreshMode: \"debounce\",\n refreshRate: 50,\n });\n\n useImperativeHandle(ref, () => {\n return {\n resize() {\n handleResize();\n },\n scrollToEnd() {\n const content = contentRef.current;\n const wrapper = wrapperRef.current;\n if (content && wrapper) {\n content.scrollLeft =\n content.scrollWidth - wrapper.offsetWidth;\n }\n },\n };\n });\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n const handleScroll = useCallback(() => {\n const wrapper = wrapperRef.current;\n const content = contentRef.current;\n\n if (wrapper && content && content.scrollWidth > wrapper.offsetWidth) {\n /*\n NOTE: Used Math.round because we observe a 0.5 difference\n * even when we scroll to the end. This causes the fade right\n * to not be removed\n */\n setShowFadeRight(\n Math.round(content.scrollLeft) <\n content.scrollWidth - content.offsetWidth\n );\n setShowFadeLeft(content.scrollLeft >= 1);\n } else {\n setShowFadeRight(false);\n setShowFadeLeft(false);\n }\n }, []);\n\n const throttledScrollHandler = useMemo(() => {\n return throttle(handleScroll, 50);\n }, [handleScroll]);\n\n useEffect(() => {\n const content = contentRef.current;\n\n handleScroll();\n\n if (content) {\n content.addEventListener(\"scroll\", throttledScrollHandler);\n }\n\n return () => {\n if (content) {\n content.removeEventListener(\"scroll\", throttledScrollHandler);\n }\n\n throttledScrollHandler.cancel();\n };\n }, [handleScroll, throttledScrollHandler]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n\n function handleResize() {\n handleScroll();\n\n if (onResize) {\n onResize({\n content: contentRef.current!,\n wrapper: wrapperRef.current!,\n });\n }\n }\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderFade = () => {\n return (\n <>\n {showFadeLeft && (\n <div\n ref={fadeLeftRef}\n className={clsx(styles.fade, styles.fadeLeft)}\n data-id=\"left-fade\"\n >\n {showIndicator && (\n <ClickableIcon\n className={clsx(\n styles.fadeIndicatorButton,\n styles.indicatorLeft\n )}\n data-id=\"left-fade-indicator-button\"\n >\n <ChevronLeftIcon />\n </ClickableIcon>\n )}\n </div>\n )}\n {showFadeRight && (\n <div\n ref={fadeRightRef}\n className={clsx(styles.fade, styles.fadeRight)}\n data-id=\"right-fade\"\n >\n {showIndicator && (\n <ClickableIcon\n className={clsx(\n styles.fadeIndicatorButton,\n styles.indicatorRight\n )}\n data-id=\"right-fade-indicator-button\"\n >\n <ChevronRightIcon />\n </ClickableIcon>\n )}\n </div>\n )}\n </>\n );\n };\n\n return (\n <div\n ref={wrapperRef}\n className={clsx(styles.wrapper, className)}\n {...otherProps}\n >\n <div ref={contentRef} className={styles.content}>\n {children}\n </div>\n {renderFade()}\n </div>\n );\n};\n\nexport const FadeWrapper = forwardRef(Component);\n"],"names":["FadeWrapper","forwardRef","_a","ref","children","className","fadeColor","fadePosition","showIndicator","onResize","otherProps","__rest","showFadeLeft","setShowFadeLeft","useState","showFadeRight","setShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","fadeColorSet","getFadeColorSet","useApplyStyle","styles.tokens","backgroundColor","getFadeBackgroundColorValue","left","right","useResizeDetector","handleResize","targetRef","refreshMode","refreshRate","useImperativeHandle","resize","scrollToEnd","content","current","wrapper","scrollLeft","scrollWidth","offsetWidth","handleScroll","useCallback","Math","round","throttledScrollHandler","useMemo","throttle","useEffect","addEventListener","removeEventListener","cancel","_jsxs","Object","assign","clsx","styles.wrapper","_jsx","styles.content","styles.fade","styles.fadeLeft","ClickableIcon","styles.fadeIndicatorButton","styles.indicatorLeft","ChevronLeftIcon","styles.fadeRight","styles.indicatorRight","ChevronRightIcon"],"mappings":"ysCAsBA,MA6LaA,EAAcC,GA7LT,CACdC,EASAC,SATAC,SACIA,EAAQC,UACRA,EAASC,UACTA,EAASC,aACTA,EAAe,OAAMC,cACrBA,GAAgB,EAAKC,SACrBA,GAAQP,EACLQ,EAAUC,EAAAT,EAPjB,gFAcA,MAAOU,EAAcC,GAAmBC,EACnB,SAAjBP,GAA4C,SAAjBA,IAExBQ,EAAeC,GAAoBF,EACrB,UAAjBP,GAA6C,SAAjBA,GAG1BU,EAAaC,EAAuB,MACpCC,EAAaD,EAAuB,MACpCE,EAAcF,EAAuB,MACrCG,EAAeH,EAAuB,MAEtCI,EAAeC,EAAgBjB,GAErCkB,EAAcJ,EAAa,CACvB,CAACK,EAAcC,iBAAkBC,EAC7BL,EAAaM,KACbpB,KAGRgB,EAAcH,EAAc,CACxB,CAACI,EAAcC,iBAAkBC,EAC7BL,EAAaO,MACbrB,KAKRsB,EAAkB,CACdrB,SAAUsB,EACVC,UAAWf,EACXgB,YAAa,WACbC,YAAa,KAGjBC,EAAoBhC,GAAK,KACd,CACH,MAAAiC,GACIL,GACJ,EACA,WAAAM,GACI,MAAMC,EAAUnB,EAAWoB,QACrBC,EAAUvB,EAAWsB,QACvBD,GAAWE,IACXF,EAAQG,WACJH,EAAQI,YAAcF,EAAQG,YAE1C,MAOR,MAAMC,EAAeC,GAAY,KAC7B,MAAML,EAAUvB,EAAWsB,QACrBD,EAAUnB,EAAWoB,QAEvBC,GAAWF,GAAWA,EAAQI,YAAcF,EAAQG,aAMpD3B,EACI8B,KAAKC,MAAMT,EAAQG,YACfH,EAAQI,YAAcJ,EAAQK,aAEtC9B,EAAgByB,EAAQG,YAAc,KAEtCzB,GAAiB,GACjBH,GAAgB,GACpB,GACD,IAEGmC,EAAyBC,GAAQ,IAC5BC,EAASN,EAAc,KAC/B,CAACA,IAwBJ,SAASb,IACLa,IAEInC,GACAA,EAAS,CACL6B,QAASnB,EAAWoB,QACpBC,QAASvB,EAAWsB,SAGhC,CA/BAY,GAAU,KACN,MAAMb,EAAUnB,EAAWoB,QAQ3B,OANAK,IAEIN,GACAA,EAAQc,iBAAiB,SAAUJ,GAGhC,KACCV,GACAA,EAAQe,oBAAoB,SAAUL,GAG1CA,EAAuBM,QAAQ,CAClC,GACF,CAACV,EAAcI,IAiElB,OACIO,EAAA,MAAAC,OAAAC,OAAA,CACItD,IAAKc,EACLZ,UAAWqD,EAAKC,EAAgBtD,IAC5BK,EAAU,CAAAN,SAAA,CAEdwD,EAAA,MAAA,CAAKzD,IAAKgB,EAAYd,UAAWwD,EAAczD,SAC1CA,IAlDLmD,eACK3C,GACGgD,EAAA,MAAA,CACIzD,IAAKiB,EACLf,UAAWqD,EAAKI,EAAaC,GAAgB,UACrC,YAAW3D,SAElBI,GACGoD,EAACI,EAAa,CACV3D,UAAWqD,EACPO,EACAC,GACH,UACO,6BAA4B9D,SAEpCwD,EAACO,EAAe,CAAA,OAK/BpD,GACG6C,EAAA,MAAA,CACIzD,IAAKkB,EACLhB,UAAWqD,EAAKI,EAAaM,aACrB,aAAYhE,SAEnBI,GACGoD,EAACI,EAAa,CACV3D,UAAWqD,EACPO,EACAI,aAEI,8BAA6BjE,SAErCwD,EAACU,EAAgB,CAAA,aAmBnC"}

package/shared/fade-wrapper/types.d.ts CHANGED Viewed

@@ -19,4 +19,5 @@ export interface FadeWrapperProps {
 }
 export interface FadeWrapperRef {
     resize: () => void;
+    scrollToEnd: () => void;
 }

package/shared/styles/index.d.ts CHANGED Viewed

@@ -1,3 +1,8 @@
+/**
+ * Generates CSS for a styled scrollbar. Pass "vertical" for panels that scroll
+ * vertically and "horizontal" for containers that scroll horizontally.
+ */
+export declare const scrollbarCss: (axis: "vertical" | "horizontal") => string;
 /**
  * Generates CSS for limiting text to a specified number of lines after which it
  * is truncated with an ellipsis.

package/theme/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-export{ThemeProvider}from"./theme-provider/index.js";export{useInheritedThemeScope,useTheme}from"./theme-provider/hooks.js";export{Border,BorderStyle,BorderThickness}from"./tokens/border.js";export{Breakpoint}from"./tokens/breakpoint.js";export{Colour,PrimitiveColours,SemanticColours}from"./tokens/colour.js";export{ComponentToken}from"./tokens/component.js";export{Font,FontSpec}from"./tokens/font.js";export{MediaQuery}from"./tokens/media-query.js";export{Motion}from"./tokens/motion.js";export{Radius}from"./tokens/radius.js";export{Shadow}from"./tokens/shadow.js";export{Spacing}from"./tokens/spacing.js";export{THEME_TYPES}from"./types.js";export{formatUnitValue,parsePxOrRemValue}from"./utils/css-variable.js";export{useApplyStyle}from"./utils/use-apply-styles.js";export{useDesignToken}from"./utils/use-design-token.js";export{useMaxWidthMediaQuery,useMediaQuery,useMinWidthMediaQuery,useResolvedBreakpointToken}from"./utils/use-media-query.js";
+export{ThemeProvider}from"./theme-provider/index.js";export{useInheritedThemeScope,useTheme}from"./theme-provider/hooks.js";export{Border,BorderStyle,BorderThickness}from"./tokens/border.js";export{Breakpoint}from"./tokens/breakpoint.js";export{Colour,PrimitiveColours,SemanticColours}from"./tokens/colour.js";export{ComponentToken}from"./tokens/component.js";export{Font,FontSpec}from"./tokens/font.js";export{MediaQuery}from"./tokens/media-query.js";export{Motion}from"./tokens/motion.js";export{Radius}from"./tokens/radius.js";export{Shadow}from"./tokens/shadow.js";export{Spacing}from"./tokens/spacing.js";export{THEME_FONT_PRESETS,THEME_TYPES}from"./types.js";export{formatUnitValue,parsePxOrRemValue}from"./utils/css-variable.js";export{useApplyStyle}from"./utils/use-apply-styles.js";export{useDesignToken}from"./utils/use-design-token.js";export{useMaxWidthMediaQuery,useMediaQuery,useMinWidthMediaQuery,useResolvedBreakpointToken}from"./utils/use-media-query.js";
 //# sourceMappingURL=index.js.map

package/theme/styles/a11y-playground.css CHANGED Viewed

@@ -103,6 +103,9 @@
     --fds-radius-sm: 4px;
     --fds-radius-md: 8px;
     --fds-radius-lg: 12px;
+    --fds-radius-xl: 16px;
+    --fds-radius-xxl: 24px;
+    --fds-radius-xxxl: 32px;
     --fds-radius-full: 9999px;
 }
@@ -224,6 +227,8 @@
     --fds-colour-text-primary-strong: var(--fds-colour-primary-40);
+    --fds-colour-text-primary-stronger: var(--fds-colour-primary-30);
     --fds-colour-text-primary-strongest: var(--fds-colour-primary-20);
     --fds-colour-text-brand: var(--fds-colour-brand-50);
@@ -360,6 +365,28 @@
     --fds-colour-bg-strongest: var(--fds-colour-neutral-90);
+    --fds-colour-bg-primary: var(--fds-colour-primary-50);
+    --fds-colour-bg-primary-strong: var(--fds-colour-primary-40);
+    --fds-colour-bg-primary-subtle: var(--fds-colour-primary-60);
+    --fds-colour-bg-primary-subtler: var(--fds-colour-primary-95);
+    --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-100);
+    --fds-colour-bg-brand-subtler: var(--fds-colour-brand-95);
+    --fds-colour-bg-brand-subtlest: var(--fds-colour-brand-100);
+    --fds-colour-bg-secondary: var(--fds-colour-secondary-50);
+    --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-60);
+    --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-95);
+    --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-100);
     --fds-colour-bg-hover: var(--fds-colour-primary-95);
     --fds-colour-bg-hover-strong: var(--fds-colour-primary-90);
@@ -430,24 +457,6 @@
     --fds-colour-bg-inverse-hover: var(--fds-colour-neutral-40);
-    --fds-colour-bg-primary: var(--fds-colour-primary-50);
-    --fds-colour-bg-primary-strong: var(--fds-colour-primary-40);
-    --fds-colour-bg-primary-subtle: var(--fds-colour-primary-60);
-    --fds-colour-bg-primary-subtler: var(--fds-colour-primary-95);
-    --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-100);
-    --fds-colour-bg-secondary: var(--fds-colour-secondary-50);
-    --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-60);
-    --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-95);
-    --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-100);
     --fds-colour-bg-available: #6DD0A1;
     --fds-colour-bg-primary-hover: var(--fds-colour-primary-40);
@@ -653,12 +662,13 @@
     /* text */
     --fds-colour-text: var(--fds-colour-neutral-100);
     --fds-colour-text-subtle: var(--fds-colour-neutral-80);
-    --fds-colour-text-subtler: var(--fds-colour-neutral-60);
-    --fds-colour-text-subtlest: var(--fds-colour-neutral-50);
+    --fds-colour-text-subtler: var(--fds-colour-neutral-70);
+    --fds-colour-text-subtlest: var(--fds-colour-neutral-60);
     --fds-colour-text-primary: var(--fds-colour-primary-60);
     --fds-colour-text-primary-strong: var(--fds-colour-primary-70);
+    --fds-colour-text-primary-stronger: var(--fds-colour-primary-80);
     --fds-colour-text-primary-strongest: var(--fds-colour-primary-90);
-    --fds-colour-text-brand: var(--fds-colour-brand-50);
+    --fds-colour-text-brand: var(--fds-colour-brand-60);
     --fds-colour-text-secondary: var(--fds-colour-secondary-60);
     --fds-colour-text-secondary-subtle: var(--fds-colour-secondary-50);
     --fds-colour-text-hover: var(--fds-colour-primary-70);
@@ -674,13 +684,13 @@
     --fds-colour-text-info: var(--fds-colour-info-70);
     --fds-colour-text-inverse: var(--fds-colour-black);
     /* icon */
-    --fds-colour-icon: var(--fds-colour-neutral-60);
-    --fds-colour-icon-subtle: var(--fds-colour-neutral-50);
-    --fds-colour-icon-strongest: var(--fds-colour-neutral-90);
+    --fds-colour-icon: var(--fds-colour-neutral-70);
+    --fds-colour-icon-subtle: var(--fds-colour-neutral-60);
+    --fds-colour-icon-strongest: var(--fds-colour-neutral-100);
     --fds-colour-icon-primary: var(--fds-colour-primary-60);
     --fds-colour-icon-primary-subtle: var(--fds-colour-primary-50);
     --fds-colour-icon-primary-subtlest: var(--fds-colour-primary-40);
-    --fds-colour-icon-brand: var(--fds-colour-brand-50);
+    --fds-colour-icon-brand: var(--fds-colour-brand-60);
     --fds-colour-icon-secondary: var(--fds-colour-secondary-60);
     --fds-colour-icon-secondary-subtle: var(--fds-colour-secondary-50);
     --fds-colour-icon-hover: var(--fds-colour-primary-70);
@@ -690,15 +700,15 @@
     --fds-colour-icon-disabled-subtle: var(--fds-colour-neutral-50);
     --fds-colour-icon-selected-disabled: var(--fds-colour-neutral-50);
     --fds-colour-icon-success: var(--fds-colour-success-60);
-    --fds-colour-icon-warning: var(--fds-colour-warning-50);
+    --fds-colour-icon-warning: var(--fds-colour-warning-70);
     --fds-colour-icon-error: var(--fds-colour-error-60);
     --fds-colour-icon-error-strong: var(--fds-colour-error-70);
     --fds-colour-icon-info: var(--fds-colour-info-60);
     --fds-colour-icon-inverse: var(--fds-colour-black);
     --fds-colour-icon-primary-inverse: var(--fds-colour-primary-inverse);
     /* border - adjusted for dark mode */
-    --fds-colour-border: var(--fds-colour-neutral-20);
-    --fds-colour-border-strong: var(--fds-colour-neutral-40);
+    --fds-colour-border: var(--fds-colour-neutral-40);
+    --fds-colour-border-strong: var(--fds-colour-neutral-50);
     --fds-colour-border-stronger: var(--fds-colour-neutral-60);
     --fds-colour-border-primary: var(--fds-colour-primary-60);
     --fds-colour-border-primary-strong: var(--fds-colour-primary-70);
@@ -724,7 +734,18 @@
     --fds-colour-bg: var(--fds-colour-black);
     --fds-colour-bg-strong: var(--fds-colour-neutral-10);
     --fds-colour-bg-stronger: var(--fds-colour-neutral-20);
-    --fds-colour-bg-strongest: var(--fds-colour-neutral-20);
+    --fds-colour-bg-strongest: var(--fds-colour-neutral-30);
+    --fds-colour-bg-primary: var(--fds-colour-primary-60);
+    --fds-colour-bg-primary-strong: var(--fds-colour-primary-70);
+    --fds-colour-bg-primary-subtle: var(--fds-colour-primary-50);
+    --fds-colour-bg-primary-subtler: var(--fds-colour-primary-20);
+    --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-10);
+    --fds-colour-bg-brand-subtler: var(--fds-colour-brand-20);
+    --fds-colour-bg-brand-subtlest: var(--fds-colour-brand-10);
+    --fds-colour-bg-secondary: var(--fds-colour-secondary-60);
+    --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-50);
+    --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-20);
+    --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-10);
     --fds-colour-bg-hover: var(--fds-colour-primary-20);
     --fds-colour-bg-hover-strong: var(--fds-colour-primary-20);
     --fds-colour-bg-hover-subtle: var(--fds-colour-primary-10);
@@ -745,8 +766,8 @@
     --fds-colour-bg-success-strong-hover: var(--fds-colour-success-70);
     --fds-colour-bg-warning: var(--fds-colour-warning-10);
     --fds-colour-bg-warning-hover: var(--fds-colour-warning-20);
-    --fds-colour-bg-warning-strong: var(--fds-colour-warning-60);
-    --fds-colour-bg-warning-strong-hover: var(--fds-colour-warning-70);
+    --fds-colour-bg-warning-strong: var(--fds-colour-warning-70);
+    --fds-colour-bg-warning-strong-hover: var(--fds-colour-warning-80);
     --fds-colour-bg-info: var(--fds-colour-info-10);
     --fds-colour-bg-info-hover: var(--fds-colour-info-20);
     --fds-colour-bg-info-strong: var(--fds-colour-info-60);
@@ -760,16 +781,7 @@
     --fds-colour-bg-inverse-subtler: var(--fds-colour-neutral-60);
     --fds-colour-bg-inverse-subtlest: var(--fds-colour-neutral-50);
     --fds-colour-bg-inverse-hover: var(--fds-colour-neutral-70);
-    --fds-colour-bg-primary: var(--fds-colour-primary-60);
-    --fds-colour-bg-primary-strong: var(--fds-colour-primary-70);
-    --fds-colour-bg-primary-subtle: var(--fds-colour-primary-50);
-    --fds-colour-bg-primary-subtler: var(--fds-colour-primary-20);
-    --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-10);
     --fds-colour-bg-available: #185339;
-    --fds-colour-bg-secondary: var(--fds-colour-secondary-60);
-    --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-50);
-    --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-20);
-    --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-10);
     --fds-colour-bg-primary-hover: var(--fds-colour-primary-70);
     --fds-colour-bg-primary-strong-hover: var(--fds-colour-primary-80);
     --fds-colour-bg-primary-subtlest-hover: var(--fds-colour-primary-20);

package/theme/styles/bookingsg.css CHANGED Viewed

@@ -103,6 +103,9 @@
     --fds-radius-sm: 4px;
     --fds-radius-md: 8px;
     --fds-radius-lg: 12px;
+    --fds-radius-xl: 16px;
+    --fds-radius-xxl: 24px;
+    --fds-radius-xxxl: 32px;
     --fds-radius-full: 9999px;
 }
@@ -224,6 +227,8 @@
     --fds-colour-text-primary-strong: var(--fds-colour-primary-40);
+    --fds-colour-text-primary-stronger: var(--fds-colour-primary-30);
     --fds-colour-text-primary-strongest: var(--fds-colour-primary-20);
     --fds-colour-text-brand: var(--fds-colour-brand-50);
@@ -360,6 +365,28 @@
     --fds-colour-bg-strongest: var(--fds-colour-neutral-90);
+    --fds-colour-bg-primary: var(--fds-colour-primary-50);
+    --fds-colour-bg-primary-strong: var(--fds-colour-primary-40);
+    --fds-colour-bg-primary-subtle: var(--fds-colour-primary-60);
+    --fds-colour-bg-primary-subtler: var(--fds-colour-primary-95);
+    --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-100);
+    --fds-colour-bg-brand-subtler: var(--fds-colour-brand-95);
+    --fds-colour-bg-brand-subtlest: var(--fds-colour-brand-100);
+    --fds-colour-bg-secondary: var(--fds-colour-secondary-50);
+    --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-60);
+    --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-95);
+    --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-100);
     --fds-colour-bg-hover: var(--fds-colour-primary-95);
     --fds-colour-bg-hover-strong: var(--fds-colour-primary-90);
@@ -430,24 +457,6 @@
     --fds-colour-bg-inverse-hover: var(--fds-colour-neutral-40);
-    --fds-colour-bg-primary: var(--fds-colour-primary-50);
-    --fds-colour-bg-primary-strong: var(--fds-colour-primary-40);
-    --fds-colour-bg-primary-subtle: var(--fds-colour-primary-60);
-    --fds-colour-bg-primary-subtler: var(--fds-colour-primary-95);
-    --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-100);
-    --fds-colour-bg-secondary: var(--fds-colour-secondary-50);
-    --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-60);
-    --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-95);
-    --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-100);
     --fds-colour-bg-available: #6DD0A1;
     --fds-colour-bg-primary-hover: var(--fds-colour-primary-40);
@@ -688,12 +697,13 @@
     /* text */
     --fds-colour-text: var(--fds-colour-neutral-100);
     --fds-colour-text-subtle: var(--fds-colour-neutral-80);
-    --fds-colour-text-subtler: var(--fds-colour-neutral-60);
-    --fds-colour-text-subtlest: var(--fds-colour-neutral-50);
+    --fds-colour-text-subtler: var(--fds-colour-neutral-70);
+    --fds-colour-text-subtlest: var(--fds-colour-neutral-60);
     --fds-colour-text-primary: var(--fds-colour-primary-60);
     --fds-colour-text-primary-strong: var(--fds-colour-primary-70);
+    --fds-colour-text-primary-stronger: var(--fds-colour-primary-80);
     --fds-colour-text-primary-strongest: var(--fds-colour-primary-90);
-    --fds-colour-text-brand: var(--fds-colour-brand-50);
+    --fds-colour-text-brand: var(--fds-colour-brand-60);
     --fds-colour-text-secondary: var(--fds-colour-secondary-60);
     --fds-colour-text-secondary-subtle: var(--fds-colour-secondary-50);
     --fds-colour-text-hover: var(--fds-colour-primary-70);
@@ -709,13 +719,13 @@
     --fds-colour-text-info: var(--fds-colour-info-70);
     --fds-colour-text-inverse: var(--fds-colour-black);
     /* icon */
-    --fds-colour-icon: var(--fds-colour-neutral-60);
-    --fds-colour-icon-subtle: var(--fds-colour-neutral-50);
-    --fds-colour-icon-strongest: var(--fds-colour-neutral-90);
+    --fds-colour-icon: var(--fds-colour-neutral-70);
+    --fds-colour-icon-subtle: var(--fds-colour-neutral-60);
+    --fds-colour-icon-strongest: var(--fds-colour-neutral-100);
     --fds-colour-icon-primary: var(--fds-colour-primary-60);
     --fds-colour-icon-primary-subtle: var(--fds-colour-primary-50);
     --fds-colour-icon-primary-subtlest: var(--fds-colour-primary-40);
-    --fds-colour-icon-brand: var(--fds-colour-brand-50);
+    --fds-colour-icon-brand: var(--fds-colour-brand-60);
     --fds-colour-icon-secondary: var(--fds-colour-secondary-60);
     --fds-colour-icon-secondary-subtle: var(--fds-colour-secondary-50);
     --fds-colour-icon-hover: var(--fds-colour-primary-70);
@@ -725,15 +735,15 @@
     --fds-colour-icon-disabled-subtle: var(--fds-colour-neutral-50);
     --fds-colour-icon-selected-disabled: var(--fds-colour-neutral-50);
     --fds-colour-icon-success: var(--fds-colour-success-60);
-    --fds-colour-icon-warning: var(--fds-colour-warning-50);
+    --fds-colour-icon-warning: var(--fds-colour-warning-70);
     --fds-colour-icon-error: var(--fds-colour-error-60);
     --fds-colour-icon-error-strong: var(--fds-colour-error-70);
     --fds-colour-icon-info: var(--fds-colour-info-60);
     --fds-colour-icon-inverse: var(--fds-colour-black);
     --fds-colour-icon-primary-inverse: var(--fds-colour-primary-inverse);
     /* border - adjusted for dark mode */
-    --fds-colour-border: var(--fds-colour-neutral-20);
-    --fds-colour-border-strong: var(--fds-colour-neutral-40);
+    --fds-colour-border: var(--fds-colour-neutral-40);
+    --fds-colour-border-strong: var(--fds-colour-neutral-50);
     --fds-colour-border-stronger: var(--fds-colour-neutral-60);
     --fds-colour-border-primary: var(--fds-colour-primary-60);
     --fds-colour-border-primary-strong: var(--fds-colour-primary-70);
@@ -759,7 +769,18 @@
     --fds-colour-bg: var(--fds-colour-black);
     --fds-colour-bg-strong: var(--fds-colour-neutral-10);
     --fds-colour-bg-stronger: var(--fds-colour-neutral-20);
-    --fds-colour-bg-strongest: var(--fds-colour-neutral-20);
+    --fds-colour-bg-strongest: var(--fds-colour-neutral-30);
+    --fds-colour-bg-primary: var(--fds-colour-primary-60);
+    --fds-colour-bg-primary-strong: var(--fds-colour-primary-70);
+    --fds-colour-bg-primary-subtle: var(--fds-colour-primary-50);
+    --fds-colour-bg-primary-subtler: var(--fds-colour-primary-20);
+    --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-10);
+    --fds-colour-bg-brand-subtler: var(--fds-colour-brand-20);
+    --fds-colour-bg-brand-subtlest: var(--fds-colour-brand-10);
+    --fds-colour-bg-secondary: var(--fds-colour-secondary-60);
+    --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-50);
+    --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-20);
+    --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-10);
     --fds-colour-bg-hover: var(--fds-colour-primary-20);
     --fds-colour-bg-hover-strong: var(--fds-colour-primary-20);
     --fds-colour-bg-hover-subtle: var(--fds-colour-primary-10);
@@ -780,8 +801,8 @@
     --fds-colour-bg-success-strong-hover: var(--fds-colour-success-70);
     --fds-colour-bg-warning: var(--fds-colour-warning-10);
     --fds-colour-bg-warning-hover: var(--fds-colour-warning-20);
-    --fds-colour-bg-warning-strong: var(--fds-colour-warning-60);
-    --fds-colour-bg-warning-strong-hover: var(--fds-colour-warning-70);
+    --fds-colour-bg-warning-strong: var(--fds-colour-warning-70);
+    --fds-colour-bg-warning-strong-hover: var(--fds-colour-warning-80);
     --fds-colour-bg-info: var(--fds-colour-info-10);
     --fds-colour-bg-info-hover: var(--fds-colour-info-20);
     --fds-colour-bg-info-strong: var(--fds-colour-info-60);
@@ -795,16 +816,7 @@
     --fds-colour-bg-inverse-subtler: var(--fds-colour-neutral-60);
     --fds-colour-bg-inverse-subtlest: var(--fds-colour-neutral-50);
     --fds-colour-bg-inverse-hover: var(--fds-colour-neutral-70);
-    --fds-colour-bg-primary: var(--fds-colour-primary-60);
-    --fds-colour-bg-primary-strong: var(--fds-colour-primary-70);
-    --fds-colour-bg-primary-subtle: var(--fds-colour-primary-50);
-    --fds-colour-bg-primary-subtler: var(--fds-colour-primary-20);
-    --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-10);
     --fds-colour-bg-available: #185339;
-    --fds-colour-bg-secondary: var(--fds-colour-secondary-60);
-    --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-50);
-    --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-20);
-    --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-10);
     --fds-colour-bg-primary-hover: var(--fds-colour-primary-70);
     --fds-colour-bg-primary-strong-hover: var(--fds-colour-primary-80);
     --fds-colour-bg-primary-subtlest-hover: var(--fds-colour-primary-20);