@transferwise/components 46.128.3 → 46.130.0

package/src/sentimentSurface/SentimentSurface.less

@@ -5,11 +5,11 @@
   }
 
   &-negative {
-    .np-theme-personal &,
-    .np-theme-business &,
-    .np-theme-platform &,
-    .np-theme-personal--bright-green &,
-    .np-theme-business--bright-green & {
+    .np-theme-personal&,
+    .np-theme-business&,
+    .np-theme-platform&,
+    .np-theme-personal--bright-green&,
+    .np-theme-business--bright-green& {
       &-base {
         .sentiment-surface-tokens(
                     #CB272F, #B8232B, #A72027,
@@ -32,11 +32,11 @@
       }
     }
 
-    .np-theme-personal--dark &,
-    .np-theme-business--dark &,
-    .np-theme-personal--forest-green &,
-    .np-theme-business--forest-green &,
-    .np-theme-platform--forest-green & {
+    .np-theme-personal--dark&,
+    .np-theme-business--dark&,
+    .np-theme-personal--forest-green&,
+    .np-theme-business--forest-green&,
+    .np-theme-platform--forest-green& {
       &-base {
         .sentiment-surface-tokens(
                     #FFA8AD, #FFBDC0, #FFD1D3,
@@ -61,11 +61,11 @@
   }
 
   &-warning {
-    .np-theme-personal &,
-    .np-theme-business &,
-    .np-theme-platform &,
-    .np-theme-personal--bright-green &,
-    .np-theme-business--bright-green & {
+    .np-theme-personal&,
+    .np-theme-business&,
+    .np-theme-platform&,
+    .np-theme-personal--bright-green&,
+    .np-theme-business--bright-green& {
       &-base {
         .sentiment-surface-tokens(
                     #4A3B1C, #302612, #2C2311,  // content-primary (default, hover, active)
@@ -88,11 +88,11 @@
       }
     }
 
-    .np-theme-personal--dark &,
-    .np-theme-business--dark &,
-    .np-theme-personal--forest-green &,
-    .np-theme-business--forest-green &,
-    .np-theme-platform--forest-green & {
+    .np-theme-personal--dark&,
+    .np-theme-business--dark&,
+    .np-theme-personal--forest-green&,
+    .np-theme-business--forest-green&,
+    .np-theme-platform--forest-green& {
       &-base {
         .sentiment-surface-tokens(
                     #FADC65, #F9D648, #F8CD20,  // content-primary
@@ -116,11 +116,11 @@
     }
   }
   &-success {
-    .np-theme-personal &,
-    .np-theme-business &,
-    .np-theme-platform &,
-    .np-theme-personal--bright-green &,
-    .np-theme-business--bright-green & {
+    .np-theme-personal&,
+    .np-theme-business&,
+    .np-theme-platform&,
+    .np-theme-personal--bright-green&,
+    .np-theme-business--bright-green& {
       &-base {
         .sentiment-surface-tokens(
                     #054D28, #043A1E, #022614,  // content-primary (default, hover, active)
@@ -143,11 +143,11 @@
       }
     }
 
-    .np-theme-personal--dark &,
-    .np-theme-business--dark &,
-    .np-theme-personal--forest-green &,
-    .np-theme-business--forest-green &,
-    .np-theme-platform--forest-green & {
+    .np-theme-personal--dark&,
+    .np-theme-business--dark&,
+    .np-theme-personal--forest-green&,
+    .np-theme-business--forest-green&,
+    .np-theme-platform--forest-green& {
       &-base {
         .sentiment-surface-tokens(
                     #BAE5A0, #C8EAB3, #D6F0C7,  // content-primary
@@ -171,11 +171,11 @@
     }
   }
   &-neutral {
-    .np-theme-personal &,
-    .np-theme-business &,
-    .np-theme-platform &,
-    .np-theme-personal--bright-green &,
-    .np-theme-business--bright-green & {
+    .np-theme-personal&,
+    .np-theme-business&,
+    .np-theme-platform&,
+    .np-theme-personal--bright-green&,
+    .np-theme-business--bright-green& {
       &-base {
         .sentiment-surface-tokens(
                     #454745, #353635, #232423,                                            // content-primary (default, hover, active)
@@ -198,11 +198,11 @@
       }
     }
 
-    .np-theme-personal--dark &,
-    .np-theme-business--dark &,
-    .np-theme-personal--forest-green &,
-    .np-theme-business--forest-green &,
-    .np-theme-platform--forest-green & {
+    .np-theme-personal--dark&,
+    .np-theme-business--dark&,
+    .np-theme-personal--forest-green&,
+    .np-theme-business--forest-green&,
+    .np-theme-platform--forest-green& {
       &-base {
         .sentiment-surface-tokens(
                     #F1F1ED, #E7E7E1, #DFDED5,                                                       // content-primary
@@ -226,11 +226,11 @@
     }
   }
   &-proposition {
-    .np-theme-personal &,
-    .np-theme-business &,
-    .np-theme-platform &,
-    .np-theme-personal--bright-green &,
-    .np-theme-business--bright-green & {
+    .np-theme-personal&,
+    .np-theme-business&,
+    .np-theme-platform&,
+    .np-theme-personal--bright-green&,
+    .np-theme-business--bright-green& {
       &-base {
         .sentiment-surface-tokens(
                     #0E0F0C, #0A2826, #074140,  // content-primary (default, hover, active)
@@ -253,11 +253,11 @@
       }
     }
 
-    .np-theme-personal--dark &,
-    .np-theme-business--dark &,
-    .np-theme-personal--forest-green &,
-    .np-theme-business--forest-green &,
-    .np-theme-platform--forest-green & {
+    .np-theme-personal--dark&,
+    .np-theme-business--dark&,
+    .np-theme-personal--forest-green&,
+    .np-theme-business--forest-green&,
+    .np-theme-platform--forest-green& {
       &-base {
         .sentiment-surface-tokens(
                     #FFFFFF, #EAF9F9, #D5F4F4,  // content-primary

package/src/sentimentSurface/SentimentSurface.test.story.tsx

@@ -56,6 +56,25 @@ export const NestedSentiments: Story = {
   ),
 };
 
+export const NestedThemes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+      <ThemeProvider theme="forest-green" className="p-a-4">
+        Page is in Personal Forest Green Theme
+        <SentimentSurface sentiment="success" className="p-a-4">
+          Some Component with Success Sentiment
+        </SentimentSurface>
+        <ThemeProvider theme="personal" screenMode="light" className="p-a-4">
+          Island of Personal Light Theme
+          <SentimentSurface sentiment="success" className="p-a-4">
+            Some Component with Success Sentiment
+          </SentimentSurface>
+        </ThemeProvider>
+      </ThemeProvider>
+    </div>
+  ),
+};
+
 const ButtonsGrid = () => (
   <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
     {emphasisLevels.map((emphasis) =>

package/src/sentimentSurface/SentimentSurface.tsx

@@ -5,6 +5,7 @@ import {
   SentimentSurfaceComponentProps,
   SentimentSurfaceComponent,
 } from './SentimentSurface.types';
+import { useTheme } from '@wise/components-theming';
 
 /**
  * SentimentSurface is a polymorphic container component that exposes and, optionally, applies
@@ -53,7 +54,9 @@ const SentimentSurface: SentimentSurfaceComponent = forwardRef(function Sentimen
 ) {
   const Element = as ?? 'div';
   const BASE_CLASS = 'wds-sentiment-surface';
+  const { className: closestBrandTheme } = useTheme();
   const classNames = clsx(
+    closestBrandTheme,
     BASE_CLASS,
     `${BASE_CLASS}-${sentiment}-${emphasis}`,
     hasBaseStyles && `${BASE_CLASS}--hasBaseStyles`,

package/build/common/card/Card.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card.js","sources":["../../../src/common/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { MouseEvent, type ReactNode, forwardRef, useRef } from 'react';\n\nimport { CloseButton } from '../closeButton';\nimport { stopPropagation } from '../domHelpers';\n\nexport interface CardProps {\n  /** Content to display inside Card. */\n  children: ReactNode;\n\n  /** Optional prop to specify classNames onto the Card */\n  className?: string;\n\n  /** Optional prop to specify the ID on to Card  */\n  id?: string;\n\n  /** Specify whether the Card is disabled, or not */\n  isDisabled?: boolean;\n\n  /** Specify whether the Card is sized small or not */\n  isSmall?: boolean;\n\n  /** Optionally specify Card onDismiss function */\n  onDismiss?: () => void;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n}\n\n/**\n * Card component.\n *\n * A card is a container for content that is used to group related information.\n * It can be used to display information in a structured way, and can be\n * customized with various props to suit different use cases.\n *\n * @param {Object} props - The component props.\n * @param {ReactNode} children - The content to display inside the card.\n * @param {string} className - Optional class name(s) to add to the card container.\n * @param {string} id - Optional ID to add to the card container.\n * @param {boolean} isDisabled - Whether the card is disabled or not.\n * @param {boolean} isSmall - Whether the card is small or not.\n * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.\n * @param {string} testId - Optional ID to add to the card container for testing purposes.\n * @returns {React.JSX.Element} - The card component.\n * @example\n * <Card>\n *   <p>Hello World!</p>\n * </Card>\n */\nconst Card = forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      className,\n      children = null,\n      id,\n      isDisabled = false,\n      isSmall = false,\n      onDismiss,\n      testId,\n      ...props\n    },\n    ref,\n  ) => {\n    const closeButtonReference = useRef(null);\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          'np-Card',\n          {\n            'np-Card--small': !!isSmall,\n            'is-disabled': !!isDisabled,\n          },\n          className,\n        )}\n        id={id}\n        data-testid={testId}\n        {...props}\n      >\n        {onDismiss && (\n          <CloseButton\n            ref={closeButtonReference}\n            className=\"np-Card-closeButton\"\n            size={isSmall ? 'sm' : 'md'}\n            isDisabled={isDisabled}\n            testId=\"close-button\"\n            onClick={(e) => {\n              stopPropagation(e);\n              onDismiss();\n            }}\n          />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nCard.displayName = 'Card';\n\nexport default Card;\n"],"names":["Card","forwardRef","className","children","id","isDisabled","isSmall","onDismiss","testId","props","ref","closeButtonReference","useRef","_jsxs","clsx","_jsx","CloseButton","size","onClick","e","stopPropagation","displayName"],"mappings":";;;;;;;;;;AAkDA,MAAMA,IAAI,gBAAGC,gBAAU,CACrB,CACE;EACEC,SAAS;AACTC,EAAAA,QAAQ,GAAG,IAAI;EACfC,EAAE;AACFC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,MAAM;EACN,GAAGC;AAAK,CACT,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,oBAAoB,GAAGC,YAAM,CAAC,IAAI,CAAC;AAEzC,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEY,SAAI,CACb,SAAS,EACT;MACE,gBAAgB,EAAE,CAAC,CAACR,OAAO;MAC3B,aAAa,EAAE,CAAC,CAACD;KAClB,EACDH,SAAS,CACT;AACFE,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaI,MAAO;AAAA,IAAA,GAChBC,KAAK;AAAAN,IAAAA,QAAA,EAAA,CAERI,SAAS,iBACRQ,cAAA,CAACC,uBAAW,EAAA;AACVN,MAAAA,GAAG,EAAEC,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,qBAAqB;AAC/Be,MAAAA,IAAI,EAAEX,OAAO,GAAG,IAAI,GAAG,IAAK;AAC5BD,MAAAA,UAAU,EAAEA,UAAW;AACvBG,MAAAA,MAAM,EAAC,cAAc;MACrBU,OAAO,EAAGC,CAAC,IAAI;QACbC,gCAAe,CAACD,CAAC,CAAC;AAClBZ,QAAAA,SAAS,EAAE;AACb,MAAA;KAAE,CAEL,EACAJ,QAAQ;AAAA,GACN,CAAC;AAEV,CAAC;AAGHH,IAAI,CAACqB,WAAW,GAAG,MAAM;;;;"}

package/build/common/card/Card.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card.mjs","sources":["../../../src/common/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { MouseEvent, type ReactNode, forwardRef, useRef } from 'react';\n\nimport { CloseButton } from '../closeButton';\nimport { stopPropagation } from '../domHelpers';\n\nexport interface CardProps {\n  /** Content to display inside Card. */\n  children: ReactNode;\n\n  /** Optional prop to specify classNames onto the Card */\n  className?: string;\n\n  /** Optional prop to specify the ID on to Card  */\n  id?: string;\n\n  /** Specify whether the Card is disabled, or not */\n  isDisabled?: boolean;\n\n  /** Specify whether the Card is sized small or not */\n  isSmall?: boolean;\n\n  /** Optionally specify Card onDismiss function */\n  onDismiss?: () => void;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n}\n\n/**\n * Card component.\n *\n * A card is a container for content that is used to group related information.\n * It can be used to display information in a structured way, and can be\n * customized with various props to suit different use cases.\n *\n * @param {Object} props - The component props.\n * @param {ReactNode} children - The content to display inside the card.\n * @param {string} className - Optional class name(s) to add to the card container.\n * @param {string} id - Optional ID to add to the card container.\n * @param {boolean} isDisabled - Whether the card is disabled or not.\n * @param {boolean} isSmall - Whether the card is small or not.\n * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.\n * @param {string} testId - Optional ID to add to the card container for testing purposes.\n * @returns {React.JSX.Element} - The card component.\n * @example\n * <Card>\n *   <p>Hello World!</p>\n * </Card>\n */\nconst Card = forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      className,\n      children = null,\n      id,\n      isDisabled = false,\n      isSmall = false,\n      onDismiss,\n      testId,\n      ...props\n    },\n    ref,\n  ) => {\n    const closeButtonReference = useRef(null);\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          'np-Card',\n          {\n            'np-Card--small': !!isSmall,\n            'is-disabled': !!isDisabled,\n          },\n          className,\n        )}\n        id={id}\n        data-testid={testId}\n        {...props}\n      >\n        {onDismiss && (\n          <CloseButton\n            ref={closeButtonReference}\n            className=\"np-Card-closeButton\"\n            size={isSmall ? 'sm' : 'md'}\n            isDisabled={isDisabled}\n            testId=\"close-button\"\n            onClick={(e) => {\n              stopPropagation(e);\n              onDismiss();\n            }}\n          />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nCard.displayName = 'Card';\n\nexport default Card;\n"],"names":["Card","forwardRef","className","children","id","isDisabled","isSmall","onDismiss","testId","props","ref","closeButtonReference","useRef","_jsxs","clsx","_jsx","CloseButton","size","onClick","e","stopPropagation","displayName"],"mappings":";;;;;;AAkDA,MAAMA,IAAI,gBAAGC,UAAU,CACrB,CACE;EACEC,SAAS;AACTC,EAAAA,QAAQ,GAAG,IAAI;EACfC,EAAE;AACFC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,MAAM;EACN,GAAGC;AAAK,CACT,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,oBAAoB,GAAGC,MAAM,CAAC,IAAI,CAAC;AAEzC,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEY,IAAI,CACb,SAAS,EACT;MACE,gBAAgB,EAAE,CAAC,CAACR,OAAO;MAC3B,aAAa,EAAE,CAAC,CAACD;KAClB,EACDH,SAAS,CACT;AACFE,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaI,MAAO;AAAA,IAAA,GAChBC,KAAK;AAAAN,IAAAA,QAAA,EAAA,CAERI,SAAS,iBACRQ,GAAA,CAACC,WAAW,EAAA;AACVN,MAAAA,GAAG,EAAEC,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,qBAAqB;AAC/Be,MAAAA,IAAI,EAAEX,OAAO,GAAG,IAAI,GAAG,IAAK;AAC5BD,MAAAA,UAAU,EAAEA,UAAW;AACvBG,MAAAA,MAAM,EAAC,cAAc;MACrBU,OAAO,EAAGC,CAAC,IAAI;QACbC,eAAe,CAACD,CAAC,CAAC;AAClBZ,QAAAA,SAAS,EAAE;AACb,MAAA;KAAE,CAEL,EACAJ,QAAQ;AAAA,GACN,CAAC;AAEV,CAAC;AAGHH,IAAI,CAACqB,WAAW,GAAG,MAAM;;;;"}

package/build/types/common/card/Card.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/common/card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,SAAS,EAAsB,MAAM,OAAO,CAAC;AAKvE,MAAM,WAAW,SAAS;IACxB,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IAEpB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,kDAAkD;IAClD,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,sGAgDT,CAAC;AAIF,eAAe,IAAI,CAAC"}

package/build/types/common/card/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './Card';
-export * from './Card';
-//# sourceMappingURL=index.d.ts.map

package/build/types/common/card/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/common/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,cAAc,QAAQ,CAAC"}

package/src/common/card/index.ts

@@ -1,2 +0,0 @@
-export { default } from './Card';
-export * from './Card';