@transferwise/components 46.115.1 → 46.116.0

package/build/criticalBanner/CriticalCommsBanner.js

@@ -18,6 +18,7 @@ function CriticalCommsBanner({
       title: title,
       message: subtitle,
       action: {
+        onClick: action?.onClick,
         target: action?.href,
         text: action?.label
       },

package/build/criticalBanner/CriticalCommsBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CriticalCommsBanner.js","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import Alert from '../alert';\nimport { clsx } from 'clsx';\n\nexport type CriticalCommsBannerProps = {\n  title: string;\n  subtitle?: string;\n  action?: {\n    label: string;\n    href: string;\n  };\n  className?: string;\n};\n\nfunction CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {\n  return (\n    <div className={clsx('critical-comms', className)}>\n      <Alert\n        title={title}\n        message={subtitle}\n        action={{ target: action?.href, text: action?.label }}\n        className={className}\n        type=\"warning\"\n      />\n    </div>\n  );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["CriticalCommsBanner","title","subtitle","action","className","_jsx","clsx","children","Alert","message","target","href","text","label","type"],"mappings":";;;;;;;;AAaA,SAASA,mBAAmBA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;AAAEC,EAAAA;AAAS,CAA4B,EAAA;AAC3F,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKD,IAAAA,SAAS,EAAEE,SAAI,CAAC,gBAAgB,EAAEF,SAAS,CAAE;IAAAG,QAAA,eAChDF,cAAA,CAACG,aAAK,EAAA;AACJP,MAAAA,KAAK,EAAEA,KAAM;AACbQ,MAAAA,OAAO,EAAEP,QAAS;AAClBC,MAAAA,MAAM,EAAE;QAAEO,MAAM,EAAEP,MAAM,EAAEQ,IAAI;QAAEC,IAAI,EAAET,MAAM,EAAEU;OAAQ;AACtDT,MAAAA,SAAS,EAAEA,SAAU;AACrBU,MAAAA,IAAI,EAAC;KAAS;AAElB,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"CriticalCommsBanner.js","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import Alert from '../alert';\nimport { clsx } from 'clsx';\n\nexport type CriticalCommsBannerProps = {\n  title: string;\n  subtitle?: string;\n  action?: {\n    label: string;\n    href?: string;\n    onClick?: () => void;\n  };\n  className?: string;\n};\n\nfunction CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {\n  return (\n    <div className={clsx('critical-comms', className)}>\n      <Alert\n        title={title}\n        message={subtitle}\n        action={{ onClick: action?.onClick, target: action?.href, text: action?.label }}\n        className={className}\n        type=\"warning\"\n      />\n    </div>\n  );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["CriticalCommsBanner","title","subtitle","action","className","_jsx","clsx","children","Alert","message","onClick","target","href","text","label","type"],"mappings":";;;;;;;;AAcA,SAASA,mBAAmBA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;AAAEC,EAAAA;AAAS,CAA4B,EAAA;AAC3F,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKD,IAAAA,SAAS,EAAEE,SAAI,CAAC,gBAAgB,EAAEF,SAAS,CAAE;IAAAG,QAAA,eAChDF,cAAA,CAACG,aAAK,EAAA;AACJP,MAAAA,KAAK,EAAEA,KAAM;AACbQ,MAAAA,OAAO,EAAEP,QAAS;AAClBC,MAAAA,MAAM,EAAE;QAAEO,OAAO,EAAEP,MAAM,EAAEO,OAAO;QAAEC,MAAM,EAAER,MAAM,EAAES,IAAI;QAAEC,IAAI,EAAEV,MAAM,EAAEW;OAAQ;AAChFV,MAAAA,SAAS,EAAEA,SAAU;AACrBW,MAAAA,IAAI,EAAC;KAAS;AAElB,GAAK,CAAC;AAEV;;;;"}

package/build/criticalBanner/CriticalCommsBanner.mjs

@@ -14,6 +14,7 @@ function CriticalCommsBanner({
       title: title,
       message: subtitle,
       action: {
+        onClick: action?.onClick,
         target: action?.href,
         text: action?.label
       },

package/build/criticalBanner/CriticalCommsBanner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CriticalCommsBanner.mjs","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import Alert from '../alert';\nimport { clsx } from 'clsx';\n\nexport type CriticalCommsBannerProps = {\n  title: string;\n  subtitle?: string;\n  action?: {\n    label: string;\n    href: string;\n  };\n  className?: string;\n};\n\nfunction CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {\n  return (\n    <div className={clsx('critical-comms', className)}>\n      <Alert\n        title={title}\n        message={subtitle}\n        action={{ target: action?.href, text: action?.label }}\n        className={className}\n        type=\"warning\"\n      />\n    </div>\n  );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["CriticalCommsBanner","title","subtitle","action","className","_jsx","clsx","children","Alert","message","target","href","text","label","type"],"mappings":";;;;AAaA,SAASA,mBAAmBA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;AAAEC,EAAAA;AAAS,CAA4B,EAAA;AAC3F,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AAAKD,IAAAA,SAAS,EAAEE,IAAI,CAAC,gBAAgB,EAAEF,SAAS,CAAE;IAAAG,QAAA,eAChDF,GAAA,CAACG,KAAK,EAAA;AACJP,MAAAA,KAAK,EAAEA,KAAM;AACbQ,MAAAA,OAAO,EAAEP,QAAS;AAClBC,MAAAA,MAAM,EAAE;QAAEO,MAAM,EAAEP,MAAM,EAAEQ,IAAI;QAAEC,IAAI,EAAET,MAAM,EAAEU;OAAQ;AACtDT,MAAAA,SAAS,EAAEA,SAAU;AACrBU,MAAAA,IAAI,EAAC;KAAS;AAElB,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"CriticalCommsBanner.mjs","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import Alert from '../alert';\nimport { clsx } from 'clsx';\n\nexport type CriticalCommsBannerProps = {\n  title: string;\n  subtitle?: string;\n  action?: {\n    label: string;\n    href?: string;\n    onClick?: () => void;\n  };\n  className?: string;\n};\n\nfunction CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {\n  return (\n    <div className={clsx('critical-comms', className)}>\n      <Alert\n        title={title}\n        message={subtitle}\n        action={{ onClick: action?.onClick, target: action?.href, text: action?.label }}\n        className={className}\n        type=\"warning\"\n      />\n    </div>\n  );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["CriticalCommsBanner","title","subtitle","action","className","_jsx","clsx","children","Alert","message","onClick","target","href","text","label","type"],"mappings":";;;;AAcA,SAASA,mBAAmBA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;AAAEC,EAAAA;AAAS,CAA4B,EAAA;AAC3F,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AAAKD,IAAAA,SAAS,EAAEE,IAAI,CAAC,gBAAgB,EAAEF,SAAS,CAAE;IAAAG,QAAA,eAChDF,GAAA,CAACG,KAAK,EAAA;AACJP,MAAAA,KAAK,EAAEA,KAAM;AACbQ,MAAAA,OAAO,EAAEP,QAAS;AAClBC,MAAAA,MAAM,EAAE;QAAEO,OAAO,EAAEP,MAAM,EAAEO,OAAO;QAAEC,MAAM,EAAER,MAAM,EAAES,IAAI;QAAEC,IAAI,EAAEV,MAAM,EAAEW;OAAQ;AAChFV,MAAAA,SAAS,EAAEA,SAAU;AACrBW,MAAAA,IAAI,EAAC;KAAS;AAElB,GAAK,CAAC;AAEV;;;;"}

package/build/main.css

@@ -1,3 +1,427 @@
+.wds-sentiment-surface {
+  background-color: var(--color-sentiment-background-surface);
+  color: var(--color-sentiment-content-primary);
+}
+.np-theme-personal .wds-sentiment-surface-negative-base,
+.np-theme-personal--bright-green .wds-sentiment-surface-negative-base {
+  --color-sentiment-content-primary: #CB272F;
+  --color-sentiment-content-primary-hover: #B8232B;
+  --color-sentiment-content-primary-active: #A72027;
+  --color-sentiment-interactive-primary: #CB272F;
+  --color-sentiment-interactive-primary-hover: #B8232B;
+  --color-sentiment-interactive-primary-active: #A72027;
+  --color-sentiment-interactive-secondary: #FBEAEA;
+  --color-sentiment-interactive-secondary-hover: #F9E1E1;
+  --color-sentiment-interactive-secondary-active: #F8D8D8;
+  --color-sentiment-interactive-secondary-neutral: #F5D3D4;
+  --color-sentiment-interactive-secondary-neutral-hover: #F0BDBE;
+  --color-sentiment-interactive-secondary-neutral-active: #ECACAD;
+  --color-sentiment-interactive-control: #FBEAEA;
+  --color-sentiment-interactive-control-hover: #F9E1E1;
+  --color-sentiment-interactive-control-active: #F8D8D8;
+  --color-sentiment-background-surface: #FBEAEA;
+  --color-sentiment-background-surface-hover: #F9E1E1;
+  --color-sentiment-background-surface-active: #F8D8D8;
+}
+.np-theme-personal .wds-sentiment-surface-negative-elevated,
+.np-theme-personal--bright-green .wds-sentiment-surface-negative-elevated {
+  --color-sentiment-content-primary: #FFFFFF;
+  --color-sentiment-content-primary-hover: #F5CCCC;
+  --color-sentiment-content-primary-active: #F1B7B7;
+  --color-sentiment-interactive-primary: #FBEAEA;
+  --color-sentiment-interactive-primary-hover: #F5CCCC;
+  --color-sentiment-interactive-primary-active: #F1B7B7;
+  --color-sentiment-interactive-secondary: #CB272F;
+  --color-sentiment-interactive-secondary-hover: #B8232B;
+  --color-sentiment-interactive-secondary-active: #A72027;
+  --color-sentiment-interactive-secondary-neutral: #9B141B;
+  --color-sentiment-interactive-secondary-neutral-hover: #831116;
+  --color-sentiment-interactive-secondary-neutral-active: #6D0E13;
+  --color-sentiment-interactive-control: #CB272F;
+  --color-sentiment-interactive-control-hover: #B8232B;
+  --color-sentiment-interactive-control-active: #A72027;
+  --color-sentiment-background-surface: #90000D;
+  --color-sentiment-background-surface-hover: #B8232B;
+  --color-sentiment-background-surface-active: #A72027;
+}
+.np-theme-personal--dark .wds-sentiment-surface-negative-base,
+.np-theme-personal--forest-green .wds-sentiment-surface-negative-base {
+  --color-sentiment-content-primary: #FFA8AD;
+  --color-sentiment-content-primary-hover: #FFBDC0;
+  --color-sentiment-content-primary-active: #FFD1D3;
+  --color-sentiment-interactive-primary: #FFA8AD;
+  --color-sentiment-interactive-primary-hover: #FFBDC0;
+  --color-sentiment-interactive-primary-active: #FFD1D3;
+  --color-sentiment-interactive-secondary: #410B0D;
+  --color-sentiment-interactive-secondary-hover: #641115;
+  --color-sentiment-interactive-secondary-active: #761418;
+  --color-sentiment-interactive-secondary-neutral: #601013;
+  --color-sentiment-interactive-secondary-neutral-hover: #7A1519;
+  --color-sentiment-interactive-secondary-neutral-active: #90181D;
+  --color-sentiment-interactive-control: #410B0D;
+  --color-sentiment-interactive-control-hover: #641115;
+  --color-sentiment-interactive-control-active: #761418;
+  --color-sentiment-background-surface: #410B0D;
+  --color-sentiment-background-surface-hover: #641115;
+  --color-sentiment-background-surface-active: #761418;
+}
+.np-theme-personal--dark .wds-sentiment-surface-negative-elevated,
+.np-theme-personal--forest-green .wds-sentiment-surface-negative-elevated {
+  --color-sentiment-content-primary: #410B0D;
+  --color-sentiment-content-primary-hover: #641115;
+  --color-sentiment-content-primary-active: #761418;
+  --color-sentiment-interactive-primary: #410B0D;
+  --color-sentiment-interactive-primary-hover: #641115;
+  --color-sentiment-interactive-primary-active: #761418;
+  --color-sentiment-interactive-secondary: #FFA8AD;
+  --color-sentiment-interactive-secondary-hover: #FFBDC0;
+  --color-sentiment-interactive-secondary-active: #FFD1D3;
+  --color-sentiment-interactive-secondary-neutral: #D9898D;
+  --color-sentiment-interactive-secondary-neutral-hover: #D68084;
+  --color-sentiment-interactive-secondary-neutral-active: #D06C71;
+  --color-sentiment-interactive-control: #FFA8AD;
+  --color-sentiment-interactive-control-hover: #FFBDC0;
+  --color-sentiment-interactive-control-active: #FFD1D3;
+  --color-sentiment-background-surface: #FFA8AD;
+  --color-sentiment-background-surface-hover: #FFBDC0;
+  --color-sentiment-background-surface-active: #FFD1D3;
+}
+.np-theme-personal .wds-sentiment-surface-warning-base,
+.np-theme-personal--bright-green .wds-sentiment-surface-warning-base {
+  --color-sentiment-content-primary: #4A3B1C;
+  --color-sentiment-content-primary-hover: #302612;
+  --color-sentiment-content-primary-active: #2C2311;
+  --color-sentiment-interactive-primary: #FFD11A;
+  --color-sentiment-interactive-primary-hover: #FFBF0F;
+  --color-sentiment-interactive-primary-active: #FFBB00;
+  --color-sentiment-interactive-secondary: #FFF7D7;
+  --color-sentiment-interactive-secondary-hover: #FFF0B2;
+  --color-sentiment-interactive-secondary-active: #FFE98F;
+  --color-sentiment-interactive-secondary-neutral: #FFEC9E;
+  --color-sentiment-interactive-secondary-neutral-hover: #FFE187;
+  --color-sentiment-interactive-secondary-neutral-active: #FFD55F;
+  --color-sentiment-interactive-control: #4A3B1C;
+  --color-sentiment-interactive-control-hover: #302612;
+  --color-sentiment-interactive-control-active: #2C2311;
+  --color-sentiment-background-surface: #FFF7D7;
+  --color-sentiment-background-surface-hover: #FFF0B2;
+  --color-sentiment-background-surface-active: #FFE98F;
+}
+.np-theme-personal .wds-sentiment-surface-warning-elevated,
+.np-theme-personal--bright-green .wds-sentiment-surface-warning-elevated {
+  --color-sentiment-content-primary: #4A3B1C;
+  --color-sentiment-content-primary-hover: #302612;
+  --color-sentiment-content-primary-active: #2C2311;
+  --color-sentiment-interactive-primary: #4A3B1C;
+  --color-sentiment-interactive-primary-hover: #302612;
+  --color-sentiment-interactive-primary-active: #2C2311;
+  --color-sentiment-interactive-secondary: #FFD11A;
+  --color-sentiment-interactive-secondary-hover: #FFBF0F;
+  --color-sentiment-interactive-secondary-active: #FFBB00;
+  --color-sentiment-interactive-secondary-neutral: #FFEC9E;
+  --color-sentiment-interactive-secondary-neutral-hover: #FFEDB8;
+  --color-sentiment-interactive-secondary-neutral-active: #FFF2CC;
+  --color-sentiment-interactive-control: #FFD11A;
+  --color-sentiment-interactive-control-hover: #FFBF0F;
+  --color-sentiment-interactive-control-active: #FFBB00;
+  --color-sentiment-background-surface: #FFD11A;
+  --color-sentiment-background-surface-hover: #FFBF0F;
+  --color-sentiment-background-surface-active: #FFBB00;
+}
+.np-theme-personal--dark .wds-sentiment-surface-warning-base,
+.np-theme-personal--forest-green .wds-sentiment-surface-warning-base {
+  --color-sentiment-content-primary: #FADC65;
+  --color-sentiment-content-primary-hover: #F9D648;
+  --color-sentiment-content-primary-active: #F8CD20;
+  --color-sentiment-interactive-primary: #FADC65;
+  --color-sentiment-interactive-primary-hover: #F9D648;
+  --color-sentiment-interactive-primary-active: #F8CD20;
+  --color-sentiment-interactive-secondary: #3A3523;
+  --color-sentiment-interactive-secondary-hover: #504930;
+  --color-sentiment-interactive-secondary-active: #665D3D;
+  --color-sentiment-interactive-secondary-neutral: #4D462A;
+  --color-sentiment-interactive-secondary-neutral-hover: #5D532F;
+  --color-sentiment-interactive-secondary-neutral-active: #685D33;
+  --color-sentiment-interactive-control: #3A3523;
+  --color-sentiment-interactive-control-hover: #504930;
+  --color-sentiment-interactive-control-active: #665D3D;
+  --color-sentiment-background-surface: #3A3523;
+  --color-sentiment-background-surface-hover: #504930;
+  --color-sentiment-background-surface-active: #665D3D;
+}
+.np-theme-personal--dark .wds-sentiment-surface-warning-elevated,
+.np-theme-personal--forest-green .wds-sentiment-surface-warning-elevated {
+  --color-sentiment-content-primary: #3A3523;
+  --color-sentiment-content-primary-hover: #504930;
+  --color-sentiment-content-primary-active: #665D3D;
+  --color-sentiment-interactive-primary: #3A3523;
+  --color-sentiment-interactive-primary-hover: #504930;
+  --color-sentiment-interactive-primary-active: #665D3D;
+  --color-sentiment-interactive-secondary: #FADC65;
+  --color-sentiment-interactive-secondary-hover: #F9D648;
+  --color-sentiment-interactive-secondary-active: #F8CD20;
+  --color-sentiment-interactive-secondary-neutral: #E3C85D;
+  --color-sentiment-interactive-secondary-neutral-hover: #DFC044;
+  --color-sentiment-interactive-secondary-neutral-active: #D9B526;
+  --color-sentiment-interactive-control: #FADC65;
+  --color-sentiment-interactive-control-hover: #F9D648;
+  --color-sentiment-interactive-control-active: #F8CD20;
+  --color-sentiment-background-surface: #FADC65;
+  --color-sentiment-background-surface-hover: #F9D648;
+  --color-sentiment-background-surface-active: #F8CD20;
+}
+.np-theme-personal .wds-sentiment-surface-success-base,
+.np-theme-personal--bright-green .wds-sentiment-surface-success-base {
+  --color-sentiment-content-primary: #054D28;
+  --color-sentiment-content-primary-hover: #043A1E;
+  --color-sentiment-content-primary-active: #022614;
+  --color-sentiment-interactive-primary: #054D28;
+  --color-sentiment-interactive-primary-hover: #043A1E;
+  --color-sentiment-interactive-primary-active: #022614;
+  --color-sentiment-interactive-secondary: #E2F6D5;
+  --color-sentiment-interactive-secondary-hover: #D3F2C0;
+  --color-sentiment-interactive-secondary-active: #C5EDAB;
+  --color-sentiment-interactive-secondary-neutral: #BCD9B8;
+  --color-sentiment-interactive-secondary-neutral-hover: #AACFA5;
+  --color-sentiment-interactive-secondary-neutral-active: #94C38E;
+  --color-sentiment-interactive-control: #E2F6D5;
+  --color-sentiment-interactive-control-hover: #D3F2C0;
+  --color-sentiment-interactive-control-active: #C5EDAB;
+  --color-sentiment-background-surface: #E2F6D5;
+  --color-sentiment-background-surface-hover: #D3F2C0;
+  --color-sentiment-background-surface-active: #C5EDAB;
+}
+.np-theme-personal .wds-sentiment-surface-success-elevated,
+.np-theme-personal--bright-green .wds-sentiment-surface-success-elevated {
+  --color-sentiment-content-primary: #E2F6D5;
+  --color-sentiment-content-primary-hover: #D3F2C0;
+  --color-sentiment-content-primary-active: #C5EDAB;
+  --color-sentiment-interactive-primary: #E2F6D5;
+  --color-sentiment-interactive-primary-hover: #D3F2C0;
+  --color-sentiment-interactive-primary-active: #C5EDAB;
+  --color-sentiment-interactive-secondary: #054D28;
+  --color-sentiment-interactive-secondary-hover: #043A1E;
+  --color-sentiment-interactive-secondary-active: #022614;
+  --color-sentiment-interactive-secondary-neutral: #256A43;
+  --color-sentiment-interactive-secondary-neutral-hover: #2A794C;
+  --color-sentiment-interactive-secondary-neutral-active: #329057;
+  --color-sentiment-interactive-control: #054D28;
+  --color-sentiment-interactive-control-hover: #043A1E;
+  --color-sentiment-interactive-control-active: #022614;
+  --color-sentiment-background-surface: #054D28;
+  --color-sentiment-background-surface-hover: #043A1E;
+  --color-sentiment-background-surface-active: #022614;
+}
+.np-theme-personal--dark .wds-sentiment-surface-success-base,
+.np-theme-personal--forest-green .wds-sentiment-surface-success-base {
+  --color-sentiment-content-primary: #BAE5A0;
+  --color-sentiment-content-primary-hover: #C8EAB3;
+  --color-sentiment-content-primary-active: #D6F0C7;
+  --color-sentiment-interactive-primary: #BAE5A0;
+  --color-sentiment-interactive-primary-hover: #C8EAB3;
+  --color-sentiment-interactive-primary-active: #D6F0C7;
+  --color-sentiment-interactive-secondary: #252C20;
+  --color-sentiment-interactive-secondary-hover: #323B2B;
+  --color-sentiment-interactive-secondary-active: #3E4A36;
+  --color-sentiment-interactive-secondary-neutral: #37422F;
+  --color-sentiment-interactive-secondary-neutral-hover: #46533B;
+  --color-sentiment-interactive-secondary-neutral-active: #546548;
+  --color-sentiment-interactive-control: #252C20;
+  --color-sentiment-interactive-control-hover: #323B2B;
+  --color-sentiment-interactive-control-active: #3E4A36;
+  --color-sentiment-background-surface: #252C20;
+  --color-sentiment-background-surface-hover: #323B2B;
+  --color-sentiment-background-surface-active: #3E4A36;
+}
+.np-theme-personal--dark .wds-sentiment-surface-success-elevated,
+.np-theme-personal--forest-green .wds-sentiment-surface-success-elevated {
+  --color-sentiment-content-primary: #252C20;
+  --color-sentiment-content-primary-hover: #323B2B;
+  --color-sentiment-content-primary-active: #3E4A36;
+  --color-sentiment-interactive-primary: #252C20;
+  --color-sentiment-interactive-primary-hover: #323B2B;
+  --color-sentiment-interactive-primary-active: #3E4A36;
+  --color-sentiment-interactive-secondary: #BAE5A0;
+  --color-sentiment-interactive-secondary-hover: #C8EAB3;
+  --color-sentiment-interactive-secondary-active: #D6F0C7;
+  --color-sentiment-interactive-secondary-neutral: #A8CF91;
+  --color-sentiment-interactive-secondary-neutral-hover: #94C478;
+  --color-sentiment-interactive-secondary-neutral-active: #83BB63;
+  --color-sentiment-interactive-control: #BAE5A0;
+  --color-sentiment-interactive-control-hover: #C8EAB3;
+  --color-sentiment-interactive-control-active: #D6F0C7;
+  --color-sentiment-background-surface: #BAE5A0;
+  --color-sentiment-background-surface-hover: #C8EAB3;
+  --color-sentiment-background-surface-active: #D6F0C7;
+}
+.np-theme-personal .wds-sentiment-surface-neutral-base,
+.np-theme-personal--bright-green .wds-sentiment-surface-neutral-base {
+  --color-sentiment-content-primary: #454745;
+  --color-sentiment-content-primary-hover: #353635;
+  --color-sentiment-content-primary-active: #232423;
+  --color-sentiment-interactive-primary: #454745;
+  --color-sentiment-interactive-primary-hover: #353635;
+  --color-sentiment-interactive-primary-active: #232423;
+  --color-sentiment-interactive-secondary: #F1F1ED;
+  --color-sentiment-interactive-secondary-hover: #E7E7E1;
+  --color-sentiment-interactive-secondary-active: #DFDED5;
+  --color-sentiment-interactive-secondary-neutral: #E4E4DC;
+  --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
+  --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
+  --color-sentiment-interactive-control: #F1F1ED;
+  --color-sentiment-interactive-control-hover: #E7E7E1;
+  --color-sentiment-interactive-control-active: #DFDED5;
+  --color-sentiment-background-surface: #F1F1ED;
+  --color-sentiment-background-surface-hover: #E7E7E1;
+  --color-sentiment-background-surface-active: #DFDED5;
+}
+.np-theme-personal .wds-sentiment-surface-neutral-elevated,
+.np-theme-personal--bright-green .wds-sentiment-surface-neutral-elevated {
+  --color-sentiment-content-primary: #F1F1ED;
+  --color-sentiment-content-primary-hover: #E7E7E1;
+  --color-sentiment-content-primary-active: #DFDED5;
+  --color-sentiment-interactive-primary: #F1F1ED;
+  --color-sentiment-interactive-primary-hover: #E7E7E1;
+  --color-sentiment-interactive-primary-active: #DFDED5;
+  --color-sentiment-interactive-secondary: #454745;
+  --color-sentiment-interactive-secondary-hover: #353635;
+  --color-sentiment-interactive-secondary-active: #232423;
+  --color-sentiment-interactive-secondary-neutral: #5A5C5A;
+  --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
+  --color-sentiment-interactive-secondary-neutral-active: #727472;
+  --color-sentiment-interactive-control: #454745;
+  --color-sentiment-interactive-control-hover: #353635;
+  --color-sentiment-interactive-control-active: #232423;
+  --color-sentiment-background-surface: #454745;
+  --color-sentiment-background-surface-hover: #353635;
+  --color-sentiment-background-surface-active: #232423;
+}
+.np-theme-personal--dark .wds-sentiment-surface-neutral-base,
+.np-theme-personal--forest-green .wds-sentiment-surface-neutral-base {
+  --color-sentiment-content-primary: #F1F1ED;
+  --color-sentiment-content-primary-hover: #E7E7E1;
+  --color-sentiment-content-primary-active: #DFDED5;
+  --color-sentiment-interactive-primary: #F1F1ED;
+  --color-sentiment-interactive-primary-hover: #E7E7E1;
+  --color-sentiment-interactive-primary-active: #DFDED5;
+  --color-sentiment-interactive-secondary: #2A2C29;
+  --color-sentiment-interactive-secondary-hover: #414441;
+  --color-sentiment-interactive-secondary-active: #595B58;
+  --color-sentiment-interactive-secondary-neutral: #424441;
+  --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
+  --color-sentiment-interactive-secondary-neutral-active: #565955;
+  --color-sentiment-interactive-control: #2A2C29;
+  --color-sentiment-interactive-control-hover: #414441;
+  --color-sentiment-interactive-control-active: #595B58;
+  --color-sentiment-background-surface: #2A2C29;
+  --color-sentiment-background-surface-hover: #414441;
+  --color-sentiment-background-surface-active: #595B58;
+}
+.np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
+.np-theme-personal--forest-green .wds-sentiment-surface-neutral-elevated {
+  --color-sentiment-content-primary: #2A2C29;
+  --color-sentiment-content-primary-hover: #414441;
+  --color-sentiment-content-primary-active: #595B58;
+  --color-sentiment-interactive-primary: #2A2C29;
+  --color-sentiment-interactive-primary-hover: #414441;
+  --color-sentiment-interactive-primary-active: #595B58;
+  --color-sentiment-interactive-secondary: #F1F1ED;
+  --color-sentiment-interactive-secondary-hover: #E7E7E1;
+  --color-sentiment-interactive-secondary-active: #DFDED5;
+  --color-sentiment-interactive-secondary-neutral: #E4E4DC;
+  --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
+  --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
+  --color-sentiment-interactive-control: #F1F1ED;
+  --color-sentiment-interactive-control-hover: #E7E7E1;
+  --color-sentiment-interactive-control-active: #DFDED5;
+  --color-sentiment-background-surface: #F1F1ED;
+  --color-sentiment-background-surface-hover: #E7E7E1;
+  --color-sentiment-background-surface-active: #DFDED5;
+}
+.np-theme-personal .wds-sentiment-surface-proposition-base,
+.np-theme-personal--bright-green .wds-sentiment-surface-proposition-base {
+  --color-sentiment-content-primary: #0E0F0C;
+  --color-sentiment-content-primary-hover: #0A2826;
+  --color-sentiment-content-primary-active: #074140;
+  --color-sentiment-interactive-primary: #054D4D;
+  --color-sentiment-interactive-primary-hover: #043A3A;
+  --color-sentiment-interactive-primary-active: #022626;
+  --color-sentiment-interactive-secondary: #E0F7F7;
+  --color-sentiment-interactive-secondary-hover: #CAF1F1;
+  --color-sentiment-interactive-secondary-active: #B6ECEC;
+  --color-sentiment-interactive-secondary-neutral: #B4D5D5;
+  --color-sentiment-interactive-secondary-neutral-hover: #A3CCCC;
+  --color-sentiment-interactive-secondary-neutral-active: #9AC6C6;
+  --color-sentiment-interactive-control: #E0F7F7;
+  --color-sentiment-interactive-control-hover: #CAF1F1;
+  --color-sentiment-interactive-control-active: #B6ECEC;
+  --color-sentiment-background-surface: #E0F7F7;
+  --color-sentiment-background-surface-hover: #CAF1F1;
+  --color-sentiment-background-surface-active: #B6ECEC;
+}
+.np-theme-personal .wds-sentiment-surface-proposition-elevated,
+.np-theme-personal--bright-green .wds-sentiment-surface-proposition-elevated {
+  --color-sentiment-content-primary: #FFFFFF;
+  --color-sentiment-content-primary-hover: #EAF9F9;
+  --color-sentiment-content-primary-active: #D5F4F4;
+  --color-sentiment-interactive-primary: #E0F7F7;
+  --color-sentiment-interactive-primary-hover: #CAF1F1;
+  --color-sentiment-interactive-primary-active: #B6ECEC;
+  --color-sentiment-interactive-secondary: #054D4D;
+  --color-sentiment-interactive-secondary-hover: #043A3A;
+  --color-sentiment-interactive-secondary-active: #022626;
+  --color-sentiment-interactive-secondary-neutral: #1F6161;
+  --color-sentiment-interactive-secondary-neutral-hover: #247070;
+  --color-sentiment-interactive-secondary-neutral-active: #298080;
+  --color-sentiment-interactive-control: #054D4D;
+  --color-sentiment-interactive-control-hover: #043A3A;
+  --color-sentiment-interactive-control-active: #022626;
+  --color-sentiment-background-surface: #054D4D;
+  --color-sentiment-background-surface-hover: #043A3A;
+  --color-sentiment-background-surface-active: #022626;
+}
+.np-theme-personal--dark .wds-sentiment-surface-proposition-base,
+.np-theme-personal--forest-green .wds-sentiment-surface-proposition-base {
+  --color-sentiment-content-primary: #FFFFFF;
+  --color-sentiment-content-primary-hover: #EAF9F9;
+  --color-sentiment-content-primary-active: #D5F4F4;
+  --color-sentiment-interactive-primary: #E0F7F7;
+  --color-sentiment-interactive-primary-hover: #CAF1F1;
+  --color-sentiment-interactive-primary-active: #B6ECEC;
+  --color-sentiment-interactive-secondary: #0B312F;
+  --color-sentiment-interactive-secondary-hover: #124F4C;
+  --color-sentiment-interactive-secondary-active: #176460;
+  --color-sentiment-interactive-secondary-neutral: #174E4D;
+  --color-sentiment-interactive-secondary-neutral-hover: #1D6261;
+  --color-sentiment-interactive-secondary-neutral-active: #237675;
+  --color-sentiment-interactive-control: #0B312F;
+  --color-sentiment-interactive-control-hover: #124F4C;
+  --color-sentiment-interactive-control-active: #176460;
+  --color-sentiment-background-surface: #0B312F;
+  --color-sentiment-background-surface-hover: #124F4C;
+  --color-sentiment-background-surface-active: #176460;
+}
+.np-theme-personal--dark .wds-sentiment-surface-proposition-elevated,
+.np-theme-personal--forest-green .wds-sentiment-surface-proposition-elevated {
+  --color-sentiment-content-primary: #0E0F0C;
+  --color-sentiment-content-primary-hover: #0A2826;
+  --color-sentiment-content-primary-active: #074140;
+  --color-sentiment-interactive-primary: #0B312F;
+  --color-sentiment-interactive-primary-hover: #104744;
+  --color-sentiment-interactive-primary-active: #16605C;
+  --color-sentiment-interactive-secondary: #E0F7F7;
+  --color-sentiment-interactive-secondary-hover: #CAF1F1;
+  --color-sentiment-interactive-secondary-active: #B6ECEC;
+  --color-sentiment-interactive-secondary-neutral: #B4D5D5;
+  --color-sentiment-interactive-secondary-neutral-hover: #A3CCCC;
+  --color-sentiment-interactive-secondary-neutral-active: #9AC6C6;
+  --color-sentiment-interactive-control: #E0F7F7;
+  --color-sentiment-interactive-control-hover: #CAF1F1;
+  --color-sentiment-interactive-control-active: #B6ECEC;
+  --color-sentiment-background-surface: #E0F7F7;
+  --color-sentiment-background-surface-hover: #CAF1F1;
+  --color-sentiment-background-surface-active: #B6ECEC;
+}
 .np-theme-personal .critical-comms .alert-warning {
   color: var(--color-contrast-overlay);
   background-color: var(--color-sentiment-negative);
@@ -5197,43 +5621,11 @@ html:not([dir="rtl"]) .np-navigation-option {
     transform: translateY(-24px);
   }
 }
-.status-circle .light {
-  color: var(--color-contrast-overlay);
-}
-.np-theme-personal--bright-green .status-circle .light {
-  color: var(--color-white);
-}
-.status-circle .dark {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.status-circle.warning,
-.status-circle.pending {
-  background-color: var(--color-sentiment-warning);
-}
-.np-theme-personal .status-circle.warning .status-icon,
-.np-theme-personal .status-circle.pending .status-icon {
-  color: var(--color-dark);
-}
-.status-circle.negative,
-.status-circle.error {
-  background-color: var(--color-sentiment-negative);
-}
-.status-circle.negative .status-icon,
-.status-circle.error .status-icon {
-  color: var(--color-sentiment-negative-secondary);
-}
-.status-circle.neutral {
-  background-color: #5d7079;
-  background-color: var(--color-content-secondary);
-}
-.status-circle.positive,
-.status-circle.success {
-  background-color: var(--color-sentiment-positive);
+.wds-sentiment-surface.status-circle {
+  background-color: var(--color-sentiment-interactive-primary);
 }
-.status-circle.positive .status-icon,
-.status-circle.success .status-icon {
-  color: var(--color-sentiment-positive-secondary);
+.wds-sentiment-surface.status-circle .status-icon {
+  color: var(--color-sentiment-interactive-control);
 }
 .tw-stepper {
   padding-bottom: 24px;

package/build/mocks.js

@@ -37,7 +37,14 @@ function mockResizeObserver({
     disconnect: fn()
   })));
 }
+function mockRequestAnimationFrame() {
+  global.requestAnimationFrame = callback => {
+    callback(performance.now());
+    return 0;
+  };
+}
 
 exports.mockMatchMedia = mockMatchMedia;
+exports.mockRequestAnimationFrame = mockRequestAnimationFrame;
 exports.mockResizeObserver = mockResizeObserver;
 //# sourceMappingURL=mocks.js.map

package/build/mocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"mocks.js","sources":["../src/mocks.ts"],"sourcesContent":["type StubGlobal = (name: PropertyKey, value: unknown) => void;\n\ninterface GlobalMockParams {\n  fn: <T extends (...args: never[]) => unknown>(implementation?: T) => T;\n  stubGlobal?: StubGlobal;\n}\n\nconst defaultStubGlobal: StubGlobal = (name, value) => {\n  Object.defineProperty(globalThis, name, {\n    value,\n    writable: true,\n    enumerable: true,\n    configurable: true,\n  });\n};\n\nexport function mockMatchMedia({ fn, stubGlobal = defaultStubGlobal }: GlobalMockParams) {\n  stubGlobal(\n    'matchMedia',\n    fn<Window['matchMedia']>((query) => {\n      const matches = /^\\(min-width: (\\d+)px\\)$/u.exec(query);\n      const minWidth = matches != null ? Number(matches[1]) : undefined;\n      return {\n        matches: minWidth != null ? window.innerWidth >= minWidth : false,\n        media: query,\n        onchange: null,\n        addListener: fn(),\n        removeListener: fn(),\n        addEventListener: fn(),\n        removeEventListener: fn(),\n        dispatchEvent: fn(),\n      };\n    }),\n  );\n}\n\nexport function mockResizeObserver({ fn, stubGlobal = defaultStubGlobal }: GlobalMockParams) {\n  stubGlobal(\n    'ResizeObserver',\n    fn(\n      (): ResizeObserver => ({\n        observe: fn(),\n        unobserve: fn(),\n        disconnect: fn(),\n      }),\n    ),\n  );\n}\n"],"names":["defaultStubGlobal","name","value","Object","defineProperty","globalThis","writable","enumerable","configurable","mockMatchMedia","fn","stubGlobal","query","matches","exec","minWidth","Number","undefined","window","innerWidth","media","onchange","addListener","removeListener","addEventListener","removeEventListener","dispatchEvent","mockResizeObserver","observe","unobserve","disconnect"],"mappings":";;AAOA,MAAMA,iBAAiB,GAAeA,CAACC,IAAI,EAAEC,KAAK,KAAI;AACpDC,EAAAA,MAAM,CAACC,cAAc,CAACC,UAAU,EAAEJ,IAAI,EAAE;IACtCC,KAAK;AACLI,IAAAA,QAAQ,EAAE,IAAI;AACdC,IAAAA,UAAU,EAAE,IAAI;AAChBC,IAAAA,YAAY,EAAE;AACf,GAAA,CAAC;AACJ,CAAC;AAEK,SAAUC,cAAcA,CAAC;EAAEC,EAAE;AAAEC,EAAAA,UAAU,GAAGX;AAAiB,CAAoB,EAAA;AACrFW,EAAAA,UAAU,CACR,YAAY,EACZD,EAAE,CAAwBE,KAAK,IAAI;AACjC,IAAA,MAAMC,OAAO,GAAG,2BAA2B,CAACC,IAAI,CAACF,KAAK,CAAC;AACvD,IAAA,MAAMG,QAAQ,GAAGF,OAAO,IAAI,IAAI,GAAGG,MAAM,CAACH,OAAO,CAAC,CAAC,CAAC,CAAC,GAAGI,SAAS;IACjE,OAAO;MACLJ,OAAO,EAAEE,QAAQ,IAAI,IAAI,GAAGG,MAAM,CAACC,UAAU,IAAIJ,QAAQ,GAAG,KAAK;AACjEK,MAAAA,KAAK,EAAER,KAAK;AACZS,MAAAA,QAAQ,EAAE,IAAI;MACdC,WAAW,EAAEZ,EAAE,EAAE;MACjBa,cAAc,EAAEb,EAAE,EAAE;MACpBc,gBAAgB,EAAEd,EAAE,EAAE;MACtBe,mBAAmB,EAAEf,EAAE,EAAE;MACzBgB,aAAa,EAAEhB,EAAE;KAClB;AACH,EAAA,CAAC,CAAC,CACH;AACH;AAEM,SAAUiB,kBAAkBA,CAAC;EAAEjB,EAAE;AAAEC,EAAAA,UAAU,GAAGX;AAAiB,CAAoB,EAAA;AACzFW,EAAAA,UAAU,CACR,gBAAgB,EAChBD,EAAE,CACA,OAAuB;IACrBkB,OAAO,EAAElB,EAAE,EAAE;IACbmB,SAAS,EAAEnB,EAAE,EAAE;IACfoB,UAAU,EAAEpB,EAAE;GACf,CAAC,CACH,CACF;AACH;;;;;"}
+{"version":3,"file":"mocks.js","sources":["../src/mocks.ts"],"sourcesContent":["type StubGlobal = (name: PropertyKey, value: unknown) => void;\n\ninterface GlobalMockParams {\n  fn: <T extends (...args: never[]) => unknown>(implementation?: T) => T;\n  stubGlobal?: StubGlobal;\n}\n\nconst defaultStubGlobal: StubGlobal = (name, value) => {\n  Object.defineProperty(globalThis, name, {\n    value,\n    writable: true,\n    enumerable: true,\n    configurable: true,\n  });\n};\n\nexport function mockMatchMedia({ fn, stubGlobal = defaultStubGlobal }: GlobalMockParams) {\n  stubGlobal(\n    'matchMedia',\n    fn<Window['matchMedia']>((query) => {\n      const matches = /^\\(min-width: (\\d+)px\\)$/u.exec(query);\n      const minWidth = matches != null ? Number(matches[1]) : undefined;\n      return {\n        matches: minWidth != null ? window.innerWidth >= minWidth : false,\n        media: query,\n        onchange: null,\n        addListener: fn(),\n        removeListener: fn(),\n        addEventListener: fn(),\n        removeEventListener: fn(),\n        dispatchEvent: fn(),\n      };\n    }),\n  );\n}\n\nexport function mockResizeObserver({ fn, stubGlobal = defaultStubGlobal }: GlobalMockParams) {\n  stubGlobal(\n    'ResizeObserver',\n    fn(\n      (): ResizeObserver => ({\n        observe: fn(),\n        unobserve: fn(),\n        disconnect: fn(),\n      }),\n    ),\n  );\n}\n\nexport function mockRequestAnimationFrame() {\n  global.requestAnimationFrame = (callback: (time: number) => void): number => {\n    callback(performance.now());\n    return 0;\n  };\n}\n"],"names":["defaultStubGlobal","name","value","Object","defineProperty","globalThis","writable","enumerable","configurable","mockMatchMedia","fn","stubGlobal","query","matches","exec","minWidth","Number","undefined","window","innerWidth","media","onchange","addListener","removeListener","addEventListener","removeEventListener","dispatchEvent","mockResizeObserver","observe","unobserve","disconnect","mockRequestAnimationFrame","global","requestAnimationFrame","callback","performance","now"],"mappings":";;AAOA,MAAMA,iBAAiB,GAAeA,CAACC,IAAI,EAAEC,KAAK,KAAI;AACpDC,EAAAA,MAAM,CAACC,cAAc,CAACC,UAAU,EAAEJ,IAAI,EAAE;IACtCC,KAAK;AACLI,IAAAA,QAAQ,EAAE,IAAI;AACdC,IAAAA,UAAU,EAAE,IAAI;AAChBC,IAAAA,YAAY,EAAE;AACf,GAAA,CAAC;AACJ,CAAC;AAEK,SAAUC,cAAcA,CAAC;EAAEC,EAAE;AAAEC,EAAAA,UAAU,GAAGX;AAAiB,CAAoB,EAAA;AACrFW,EAAAA,UAAU,CACR,YAAY,EACZD,EAAE,CAAwBE,KAAK,IAAI;AACjC,IAAA,MAAMC,OAAO,GAAG,2BAA2B,CAACC,IAAI,CAACF,KAAK,CAAC;AACvD,IAAA,MAAMG,QAAQ,GAAGF,OAAO,IAAI,IAAI,GAAGG,MAAM,CAACH,OAAO,CAAC,CAAC,CAAC,CAAC,GAAGI,SAAS;IACjE,OAAO;MACLJ,OAAO,EAAEE,QAAQ,IAAI,IAAI,GAAGG,MAAM,CAACC,UAAU,IAAIJ,QAAQ,GAAG,KAAK;AACjEK,MAAAA,KAAK,EAAER,KAAK;AACZS,MAAAA,QAAQ,EAAE,IAAI;MACdC,WAAW,EAAEZ,EAAE,EAAE;MACjBa,cAAc,EAAEb,EAAE,EAAE;MACpBc,gBAAgB,EAAEd,EAAE,EAAE;MACtBe,mBAAmB,EAAEf,EAAE,EAAE;MACzBgB,aAAa,EAAEhB,EAAE;KAClB;AACH,EAAA,CAAC,CAAC,CACH;AACH;AAEM,SAAUiB,kBAAkBA,CAAC;EAAEjB,EAAE;AAAEC,EAAAA,UAAU,GAAGX;AAAiB,CAAoB,EAAA;AACzFW,EAAAA,UAAU,CACR,gBAAgB,EAChBD,EAAE,CACA,OAAuB;IACrBkB,OAAO,EAAElB,EAAE,EAAE;IACbmB,SAAS,EAAEnB,EAAE,EAAE;IACfoB,UAAU,EAAEpB,EAAE;GACf,CAAC,CACH,CACF;AACH;SAEgBqB,yBAAyBA,GAAA;AACvCC,EAAAA,MAAM,CAACC,qBAAqB,GAAIC,QAAgC,IAAY;AAC1EA,IAAAA,QAAQ,CAACC,WAAW,CAACC,GAAG,EAAE,CAAC;AAC3B,IAAA,OAAO,CAAC;EACV,CAAC;AACH;;;;;;"}

package/build/mocks.mjs

@@ -35,6 +35,12 @@ function mockResizeObserver({
     disconnect: fn()
   })));
 }
+function mockRequestAnimationFrame() {
+  global.requestAnimationFrame = callback => {
+    callback(performance.now());
+    return 0;
+  };
+}
 
-export { mockMatchMedia, mockResizeObserver };
+export { mockMatchMedia, mockRequestAnimationFrame, mockResizeObserver };
 //# sourceMappingURL=mocks.mjs.map

package/build/mocks.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mocks.mjs","sources":["../src/mocks.ts"],"sourcesContent":["type StubGlobal = (name: PropertyKey, value: unknown) => void;\n\ninterface GlobalMockParams {\n  fn: <T extends (...args: never[]) => unknown>(implementation?: T) => T;\n  stubGlobal?: StubGlobal;\n}\n\nconst defaultStubGlobal: StubGlobal = (name, value) => {\n  Object.defineProperty(globalThis, name, {\n    value,\n    writable: true,\n    enumerable: true,\n    configurable: true,\n  });\n};\n\nexport function mockMatchMedia({ fn, stubGlobal = defaultStubGlobal }: GlobalMockParams) {\n  stubGlobal(\n    'matchMedia',\n    fn<Window['matchMedia']>((query) => {\n      const matches = /^\\(min-width: (\\d+)px\\)$/u.exec(query);\n      const minWidth = matches != null ? Number(matches[1]) : undefined;\n      return {\n        matches: minWidth != null ? window.innerWidth >= minWidth : false,\n        media: query,\n        onchange: null,\n        addListener: fn(),\n        removeListener: fn(),\n        addEventListener: fn(),\n        removeEventListener: fn(),\n        dispatchEvent: fn(),\n      };\n    }),\n  );\n}\n\nexport function mockResizeObserver({ fn, stubGlobal = defaultStubGlobal }: GlobalMockParams) {\n  stubGlobal(\n    'ResizeObserver',\n    fn(\n      (): ResizeObserver => ({\n        observe: fn(),\n        unobserve: fn(),\n        disconnect: fn(),\n      }),\n    ),\n  );\n}\n"],"names":["defaultStubGlobal","name","value","Object","defineProperty","globalThis","writable","enumerable","configurable","mockMatchMedia","fn","stubGlobal","query","matches","exec","minWidth","Number","undefined","window","innerWidth","media","onchange","addListener","removeListener","addEventListener","removeEventListener","dispatchEvent","mockResizeObserver","observe","unobserve","disconnect"],"mappings":"AAOA,MAAMA,iBAAiB,GAAeA,CAACC,IAAI,EAAEC,KAAK,KAAI;AACpDC,EAAAA,MAAM,CAACC,cAAc,CAACC,UAAU,EAAEJ,IAAI,EAAE;IACtCC,KAAK;AACLI,IAAAA,QAAQ,EAAE,IAAI;AACdC,IAAAA,UAAU,EAAE,IAAI;AAChBC,IAAAA,YAAY,EAAE;AACf,GAAA,CAAC;AACJ,CAAC;AAEK,SAAUC,cAAcA,CAAC;EAAEC,EAAE;AAAEC,EAAAA,UAAU,GAAGX;AAAiB,CAAoB,EAAA;AACrFW,EAAAA,UAAU,CACR,YAAY,EACZD,EAAE,CAAwBE,KAAK,IAAI;AACjC,IAAA,MAAMC,OAAO,GAAG,2BAA2B,CAACC,IAAI,CAACF,KAAK,CAAC;AACvD,IAAA,MAAMG,QAAQ,GAAGF,OAAO,IAAI,IAAI,GAAGG,MAAM,CAACH,OAAO,CAAC,CAAC,CAAC,CAAC,GAAGI,SAAS;IACjE,OAAO;MACLJ,OAAO,EAAEE,QAAQ,IAAI,IAAI,GAAGG,MAAM,CAACC,UAAU,IAAIJ,QAAQ,GAAG,KAAK;AACjEK,MAAAA,KAAK,EAAER,KAAK;AACZS,MAAAA,QAAQ,EAAE,IAAI;MACdC,WAAW,EAAEZ,EAAE,EAAE;MACjBa,cAAc,EAAEb,EAAE,EAAE;MACpBc,gBAAgB,EAAEd,EAAE,EAAE;MACtBe,mBAAmB,EAAEf,EAAE,EAAE;MACzBgB,aAAa,EAAEhB,EAAE;KAClB;AACH,EAAA,CAAC,CAAC,CACH;AACH;AAEM,SAAUiB,kBAAkBA,CAAC;EAAEjB,EAAE;AAAEC,EAAAA,UAAU,GAAGX;AAAiB,CAAoB,EAAA;AACzFW,EAAAA,UAAU,CACR,gBAAgB,EAChBD,EAAE,CACA,OAAuB;IACrBkB,OAAO,EAAElB,EAAE,EAAE;IACbmB,SAAS,EAAEnB,EAAE,EAAE;IACfoB,UAAU,EAAEpB,EAAE;GACf,CAAC,CACH,CACF;AACH;;;;"}
+{"version":3,"file":"mocks.mjs","sources":["../src/mocks.ts"],"sourcesContent":["type StubGlobal = (name: PropertyKey, value: unknown) => void;\n\ninterface GlobalMockParams {\n  fn: <T extends (...args: never[]) => unknown>(implementation?: T) => T;\n  stubGlobal?: StubGlobal;\n}\n\nconst defaultStubGlobal: StubGlobal = (name, value) => {\n  Object.defineProperty(globalThis, name, {\n    value,\n    writable: true,\n    enumerable: true,\n    configurable: true,\n  });\n};\n\nexport function mockMatchMedia({ fn, stubGlobal = defaultStubGlobal }: GlobalMockParams) {\n  stubGlobal(\n    'matchMedia',\n    fn<Window['matchMedia']>((query) => {\n      const matches = /^\\(min-width: (\\d+)px\\)$/u.exec(query);\n      const minWidth = matches != null ? Number(matches[1]) : undefined;\n      return {\n        matches: minWidth != null ? window.innerWidth >= minWidth : false,\n        media: query,\n        onchange: null,\n        addListener: fn(),\n        removeListener: fn(),\n        addEventListener: fn(),\n        removeEventListener: fn(),\n        dispatchEvent: fn(),\n      };\n    }),\n  );\n}\n\nexport function mockResizeObserver({ fn, stubGlobal = defaultStubGlobal }: GlobalMockParams) {\n  stubGlobal(\n    'ResizeObserver',\n    fn(\n      (): ResizeObserver => ({\n        observe: fn(),\n        unobserve: fn(),\n        disconnect: fn(),\n      }),\n    ),\n  );\n}\n\nexport function mockRequestAnimationFrame() {\n  global.requestAnimationFrame = (callback: (time: number) => void): number => {\n    callback(performance.now());\n    return 0;\n  };\n}\n"],"names":["defaultStubGlobal","name","value","Object","defineProperty","globalThis","writable","enumerable","configurable","mockMatchMedia","fn","stubGlobal","query","matches","exec","minWidth","Number","undefined","window","innerWidth","media","onchange","addListener","removeListener","addEventListener","removeEventListener","dispatchEvent","mockResizeObserver","observe","unobserve","disconnect","mockRequestAnimationFrame","global","requestAnimationFrame","callback","performance","now"],"mappings":"AAOA,MAAMA,iBAAiB,GAAeA,CAACC,IAAI,EAAEC,KAAK,KAAI;AACpDC,EAAAA,MAAM,CAACC,cAAc,CAACC,UAAU,EAAEJ,IAAI,EAAE;IACtCC,KAAK;AACLI,IAAAA,QAAQ,EAAE,IAAI;AACdC,IAAAA,UAAU,EAAE,IAAI;AAChBC,IAAAA,YAAY,EAAE;AACf,GAAA,CAAC;AACJ,CAAC;AAEK,SAAUC,cAAcA,CAAC;EAAEC,EAAE;AAAEC,EAAAA,UAAU,GAAGX;AAAiB,CAAoB,EAAA;AACrFW,EAAAA,UAAU,CACR,YAAY,EACZD,EAAE,CAAwBE,KAAK,IAAI;AACjC,IAAA,MAAMC,OAAO,GAAG,2BAA2B,CAACC,IAAI,CAACF,KAAK,CAAC;AACvD,IAAA,MAAMG,QAAQ,GAAGF,OAAO,IAAI,IAAI,GAAGG,MAAM,CAACH,OAAO,CAAC,CAAC,CAAC,CAAC,GAAGI,SAAS;IACjE,OAAO;MACLJ,OAAO,EAAEE,QAAQ,IAAI,IAAI,GAAGG,MAAM,CAACC,UAAU,IAAIJ,QAAQ,GAAG,KAAK;AACjEK,MAAAA,KAAK,EAAER,KAAK;AACZS,MAAAA,QAAQ,EAAE,IAAI;MACdC,WAAW,EAAEZ,EAAE,EAAE;MACjBa,cAAc,EAAEb,EAAE,EAAE;MACpBc,gBAAgB,EAAEd,EAAE,EAAE;MACtBe,mBAAmB,EAAEf,EAAE,EAAE;MACzBgB,aAAa,EAAEhB,EAAE;KAClB;AACH,EAAA,CAAC,CAAC,CACH;AACH;AAEM,SAAUiB,kBAAkBA,CAAC;EAAEjB,EAAE;AAAEC,EAAAA,UAAU,GAAGX;AAAiB,CAAoB,EAAA;AACzFW,EAAAA,UAAU,CACR,gBAAgB,EAChBD,EAAE,CACA,OAAuB;IACrBkB,OAAO,EAAElB,EAAE,EAAE;IACbmB,SAAS,EAAEnB,EAAE,EAAE;IACfoB,UAAU,EAAEpB,EAAE;GACf,CAAC,CACH,CACF;AACH;SAEgBqB,yBAAyBA,GAAA;AACvCC,EAAAA,MAAM,CAACC,qBAAqB,GAAIC,QAAgC,IAAY;AAC1EA,IAAAA,QAAQ,CAACC,WAAW,CAACC,GAAG,EAAE,CAAC;AAC3B,IAAA,OAAO,CAAC;EACV,CAAC;AACH;;;;"}

package/build/sentimentSurface/SentimentSurface.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var clsx = require('clsx');
+var classMap = require('./classMap.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const SentimentSurface = /*#__PURE__*/React.forwardRef(function SentimentSurface({
+  as,
+  sentiment,
+  emphasis = 'base',
+  className,
+  style,
+  children,
+  id,
+  testId,
+  ...props
+}, ref) {
+  const Element = as ?? 'div';
+  const classNames = clsx.clsx(classMap.getSentimentSurfaceClassName(sentiment, emphasis), className);
+  const sentimentProps = {
+    ref,
+    id,
+    'data-testid': testId,
+    className: classNames,
+    style,
+    ...props
+  };
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error - Generic forwardRef limitation. See: https://fettblog.eu/typescript-react-generic-forward-refs/
+    jsxRuntime.jsx(Element, {
+      ...sentimentProps,
+      children: children
+    })
+  );
+});
+SentimentSurface.displayName = 'SentimentSurface';
+
+exports.default = SentimentSurface;
+//# sourceMappingURL=SentimentSurface.js.map

package/build/sentimentSurface/SentimentSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SentimentSurface.js","sources":["../../src/sentimentSurface/SentimentSurface.tsx"],"sourcesContent":["import { forwardRef, ElementType, ForwardedRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport {\n  SentimentSurfaceComponentProps,\n  SentimentSurfaceComponent,\n} from './SentimentSurface.types';\nimport { getSentimentSurfaceClassName } from './classMap';\n\n/**\n * SentimentSurface is a polymorphic container component that applies contextual background colours\n * and text styling based on sentiment types (negative, warning, neutral, success, proposition).\n * It's designed to visually communicate the nature or importance of its content through colour.\n *\n * @param {ElementType} [as='div'] - Optional prop to override the HTML element rendered.\n * @param {Sentiment} sentiment - Required prop to set the sentiment type (negative, warning, neutral, success, proposition).\n * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).\n * @param {ReactNode} [children] - Content to render inside the surface.\n * @param {string} [className] - Additional CSS classes to apply.\n * @param {CSSProperties} [style] - Inline styles to apply.\n * @param {string} [id] - Unique identifier for the component.\n * @param {string} [testId] - A unique string that appears as data attribute `data-testid` in the rendered code.\n *\n * @component\n * @example\n * ```tsx\n * // Basic usage with negative sentiment\n * <SentimentSurface sentiment=\"negative\">\n *   Your payment has failed\n * </SentimentSurface>\n * ```\n *\n * @see {@link SentimentSurface} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/sentiment-surface--docs|Storybook Wise Design}\n */\n// @ts-expect-error - Generic forwardRef limitation. See: https://fettblog.eu/typescript-react-generic-forward-refs/\nconst SentimentSurface: SentimentSurfaceComponent = forwardRef(function SentimentSurface<\n  T extends ElementType = 'div',\n>(\n  {\n    as,\n    sentiment,\n    emphasis = 'base',\n    className,\n    style,\n    children,\n    id,\n    testId,\n    ...props\n  }: SentimentSurfaceComponentProps<T>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const Element = as ?? 'div';\n  const classNames = clsx(getSentimentSurfaceClassName(sentiment, emphasis), className);\n  const sentimentProps = {\n    ref,\n    id,\n    'data-testid': testId,\n    className: classNames,\n    style,\n    ...props,\n  };\n\n  return (\n    // @ts-expect-error - Generic forwardRef limitation. See: https://fettblog.eu/typescript-react-generic-forward-refs/\n    <Element {...sentimentProps}>{children}</Element>\n  );\n});\n\nSentimentSurface.displayName = 'SentimentSurface';\n\nexport default SentimentSurface;\n"],"names":["SentimentSurface","forwardRef","as","sentiment","emphasis","className","style","children","id","testId","props","ref","Element","classNames","clsx","getSentimentSurfaceClassName","sentimentProps","_jsx","displayName"],"mappings":";;;;;;;;;AAoCA,MAAMA,gBAAgB,gBAA8BC,gBAAU,CAAC,SAASD,gBAAgBA,CAGtF;EACEE,EAAE;EACFC,SAAS;AACTC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,SAAS;EACTC,KAAK;EACLC,QAAQ;EACRC,EAAE;EACFC,MAAM;EACN,GAAGC;AAAK,CAC0B,EACpCC,GAA8B,EAAA;AAE9B,EAAA,MAAMC,OAAO,GAAGV,EAAE,IAAI,KAAK;AAC3B,EAAA,MAAMW,UAAU,GAAGC,SAAI,CAACC,qCAA4B,CAACZ,SAAS,EAAEC,QAAQ,CAAC,EAAEC,SAAS,CAAC;AACrF,EAAA,MAAMW,cAAc,GAAG;IACrBL,GAAG;IACHH,EAAE;AACF,IAAA,aAAa,EAAEC,MAAM;AACrBJ,IAAAA,SAAS,EAAEQ,UAAU;IACrBP,KAAK;IACL,GAAGI;GACJ;AAED,EAAA;AAAA;AACE;AACAO,IAAAA,cAAA,CAACL,OAAO,EAAA;AAAA,MAAA,GAAKI,cAAc;AAAAT,MAAAA,QAAA,EAAGA;KAAkB;AAAC;AAErD,CAAC;AAEDP,gBAAgB,CAACkB,WAAW,GAAG,kBAAkB;;;;"}