@transferwise/components 0.0.0-experimental-18d0911 → 0.0.0-experimental-b557558

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 (16) hide show
  1. package/build/index.js +4 -4
  2. package/build/inputs/SelectInput.mjs +1 -1
  3. package/build/main.css +21 -21
  4. package/build/popover/Popover.mjs +1 -1
  5. package/build/promoCard/PromoCardContext.mjs +1 -1
  6. package/build/prompt/ActionPrompt/ActionPrompt.js +3 -0
  7. package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
  8. package/build/prompt/ActionPrompt/ActionPrompt.mjs +1 -1
  9. package/build/styles/main.css +21 -21
  10. package/build/styles/sentimentSurface/SentimentSurface.css +21 -21
  11. package/package.json +26 -26
  12. package/src/main.css +21 -21
  13. package/src/sentimentSurface/SentimentSurface.css +21 -21
  14. package/src/sentimentSurface/SentimentSurface.less +13 -13
  15. package/src/sentimentSurface/SentimentSurface.story.tsx +1 -1
  16. package/src/sentimentSurface/SentimentSurface.test.story.tsx +48 -1
package/build/index.js CHANGED
@@ -23,7 +23,7 @@ var Body = require('./body/Body.js');
23
23
  var Button_resolver = require('./button/Button.resolver.js');
24
24
  var IconButton = require('./iconButton/IconButton.js');
25
25
  var Carousel = require('./carousel/Carousel.js');
26
- var Card$1 = require('./card/Card.js');
26
+ var Card = require('./card/Card.js');
27
27
  var Checkbox = require('./checkbox/Checkbox.js');
28
28
  var CheckboxButton = require('./checkboxButton/CheckboxButton.js');
29
29
  var CheckboxOption = require('./checkboxOption/CheckboxOption.js');
@@ -33,7 +33,7 @@ var Chip = require('./chips/Chip.js');
33
33
  var CircularButton = require('./circularButton/CircularButton.js');
34
34
  var Option = require('./common/Option/Option.js');
35
35
  var BottomSheet = require('./common/bottomSheet/BottomSheet.js');
36
- var Card = require('./common/card/Card.js');
36
+ var Card$1 = require('./common/card/Card.js');
37
37
  var CriticalCommsBanner = require('./criticalBanner/CriticalCommsBanner.js');
38
38
  var DateInput = require('./dateInput/DateInput.js');
39
39
  var DateLookup = require('./dateLookup/DateLookup.js');
@@ -173,7 +173,7 @@ exports.Body = Body.default;
173
173
  exports.Button = Button_resolver.default;
174
174
  exports.IconButton = IconButton.default;
175
175
  exports.Carousel = Carousel.default;
176
- exports.Card = Card$1.default;
176
+ exports.Card = Card.default;
177
177
  exports.Checkbox = Checkbox.default;
178
178
  exports.CheckboxButton = CheckboxButton.default;
179
179
  exports.CheckboxOption = CheckboxOption.default;
@@ -183,7 +183,7 @@ exports.Chip = Chip.default;
183
183
  exports.CircularButton = CircularButton.default;
184
184
  exports.Option = Option.default;
185
185
  exports.BottomSheet = BottomSheet.default;
186
- exports.BaseCard = Card.default;
186
+ exports.BaseCard = Card$1.default;
187
187
  exports.CriticalCommsBanner = CriticalCommsBanner.default;
188
188
  exports.DateInput = DateInput.default;
189
189
  exports.DateLookup = DateLookup.default;
package/build/inputs/SelectInput.mjs CHANGED
@@ -2,7 +2,7 @@ import { Listbox, ListboxOptions, ListboxButton, ListboxOption } from '@headless
2
2
  import { CrossCircle, ChevronDown, Cross, Check } from '@transferwise/icons';
3
3
  import { clsx } from 'clsx';
4
4
  import mergeProps from 'merge-props';
5
- import { useState, useRef, useEffect, useDeferredValue, useContext, useMemo, useId, createContext, forwardRef } from 'react';
5
+ import { useState, useRef, useEffect, useDeferredValue, createContext, useContext, useMemo, useId, forwardRef } from 'react';
6
6
  import { useIntl } from 'react-intl';
7
7
  import { Virtualizer } from 'virtua';
8
8
  import { useEffectEvent } from '../common/hooks/useEffectEvent.mjs';
package/build/main.css CHANGED
@@ -304,18 +304,18 @@
304
304
  --color-sentiment-interactive-primary: #454745;
305
305
  --color-sentiment-interactive-primary-hover: #353635;
306
306
  --color-sentiment-interactive-primary-active: #232423;
307
- --color-sentiment-interactive-secondary: #F1F1ED;
308
- --color-sentiment-interactive-secondary-hover: #E7E7E1;
309
- --color-sentiment-interactive-secondary-active: #DFDED5;
310
- --color-sentiment-interactive-secondary-neutral: #E4E4DC;
311
- --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
312
- --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
307
+ --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
308
+ --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
309
+ --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
310
+ --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
311
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
312
+ --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
313
313
  --color-sentiment-interactive-control: #F1F1ED;
314
314
  --color-sentiment-interactive-control-hover: #E7E7E1;
315
315
  --color-sentiment-interactive-control-active: #DFDED5;
316
- --color-sentiment-background-surface: #F1F1ED;
317
- --color-sentiment-background-surface-hover: #E7E7E1;
318
- --color-sentiment-background-surface-active: #DFDED5;
316
+ --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
317
+ --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
318
+ --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
319
319
  }
320
320
  .np-theme-personal .wds-sentiment-surface-neutral-elevated,
321
321
  .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
331
331
  --color-sentiment-interactive-secondary: #454745;
332
332
  --color-sentiment-interactive-secondary-hover: #353635;
333
333
  --color-sentiment-interactive-secondary-active: #232423;
334
- --color-sentiment-interactive-secondary-neutral: #5A5C5A;
335
- --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
336
- --color-sentiment-interactive-secondary-neutral-active: #727472;
334
+ --color-sentiment-interactive-secondary-neutral: #585958;
335
+ --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
336
+ --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
337
337
  --color-sentiment-interactive-control: #454745;
338
338
  --color-sentiment-interactive-control-hover: #353635;
339
339
  --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
352
352
  --color-sentiment-interactive-primary: #F1F1ED;
353
353
  --color-sentiment-interactive-primary-hover: #E7E7E1;
354
354
  --color-sentiment-interactive-primary-active: #DFDED5;
355
- --color-sentiment-interactive-secondary: #2A2C29;
356
- --color-sentiment-interactive-secondary-hover: #414441;
357
- --color-sentiment-interactive-secondary-active: #595B58;
358
- --color-sentiment-interactive-secondary-neutral: #424441;
359
- --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
360
- --color-sentiment-interactive-secondary-neutral-active: #565955;
355
+ --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
356
+ --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
357
+ --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
358
+ --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
359
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
360
+ --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
361
361
  --color-sentiment-interactive-control: #2A2C29;
362
362
  --color-sentiment-interactive-control-hover: #414441;
363
363
  --color-sentiment-interactive-control-active: #595B58;
364
- --color-sentiment-background-surface: #2A2C29;
365
- --color-sentiment-background-surface-hover: #414441;
366
- --color-sentiment-background-surface-active: #595B58;
364
+ --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
365
+ --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
366
+ --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
367
367
  }
368
368
  .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
369
369
  .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,
package/build/popover/Popover.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import { clsx } from 'clsx';
2
- import { useId, useEffect, useRef, useState, isValidElement, cloneElement } from 'react';
2
+ import { useId, useEffect, useRef, useState, cloneElement, isValidElement } from 'react';
3
3
  import '../common/theme.mjs';
4
4
  import '../common/direction.mjs';
5
5
  import '../common/propsValues/control.mjs';
package/build/promoCard/PromoCardContext.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { useContext, createContext } from 'react';
1
+ import { createContext, useContext } from 'react';
2
2
 
3
3
  const defaultPromoCardContext = {
4
4
  state: '',
package/build/prompt/ActionPrompt/ActionPrompt.js CHANGED
@@ -1,5 +1,7 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  var React = require('react');
4
6
  var clsx = require('clsx');
5
7
  var StatusIcon = require('../../statusIcon/StatusIcon.js');
@@ -140,4 +142,5 @@ const ActionPrompt = ({
140
142
  };
141
143
 
142
144
  exports.ActionPrompt = ActionPrompt;
145
+ exports.default = ActionPrompt;
143
146
  //# sourceMappingURL=ActionPrompt.js.map
package/build/prompt/ActionPrompt/ActionPrompt.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ActionPrompt.js","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { clsx } from 'clsx';\n\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { BadgeAssetsProps } from '../../badge';\nimport { GiftBox } from '@transferwise/icons';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nexport type ActionPromptProps = {\n title: ReactNode;\n description?: ReactNode;\n media?: {\n imgSrc?: string;\n avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n asset?: AvatarViewProps['children'];\n badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n };\n 'aria-label'?: string;\n 'aria-hidden'?: boolean;\n };\n action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n 'aria-label'?: AriaAttributes['aria-label'];\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;\n\nexport const ActionPrompt = ({\n sentiment = 'neutral',\n title,\n description,\n onDismiss,\n media = {},\n action,\n actionSecondary,\n id,\n className,\n 'data-testid': testId,\n 'aria-label': ariaLabel,\n}: ActionPromptProps) => {\n const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n\n const mediaId = useId();\n const titleId = useId();\n const descId = useId();\n\n const ariaLabelledByIds = [\n media['aria-hidden'] ? undefined : mediaId,\n Boolean(ariaLabel) ? undefined : titleId,\n ]\n .filter(Boolean)\n .join(' ');\n\n const renderMedia = () => {\n if (media?.imgSrc) {\n return (\n <Image\n id={mediaId}\n src={media.imgSrc}\n className=\"wds-action-prompt--media-image\"\n alt={media['aria-label'] ?? ''}\n />\n );\n }\n if (media?.avatar) {\n const badge = media.avatar.badge\n ? media.avatar.badge\n : sentiment === 'proposition'\n ? {}\n : { status: sentiment };\n return (\n <AvatarView\n {...media.avatar}\n badge={badge}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n id={mediaId}\n size={48}\n >\n {media.avatar.asset}\n </AvatarView>\n );\n }\n return sentiment === 'proposition' ? (\n <AvatarView\n id={mediaId}\n size={48}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n >\n <GiftBox />\n </AvatarView>\n ) : (\n <StatusIcon\n id={mediaId}\n size={48}\n sentiment={sentiment}\n iconLabel={Boolean(media['aria-hidden']) ? null : media['aria-label']}\n />\n );\n };\n\n return (\n <PrimitivePrompt\n id={id}\n sentiment={sentiment}\n data-testid={testId}\n className={clsx(\n 'wds-action-prompt',\n { 'wds-action-prompt--with-two-actions': !!actionSecondary },\n className,\n )}\n media={renderMedia()}\n actions={\n <>\n {actionSecondary && (\n // @ts-expect-error onClick type mismatch\n <Button\n v2\n size=\"md\"\n priority=\"secondary\"\n href={actionSecondary.href}\n block={isMobile}\n onClick={actionSecondary?.onClick}\n >\n {actionSecondary.label}\n </Button>\n )}\n {/* @ts-expect-error onClick type mismatch */}\n <Button\n v2\n size=\"md\"\n priority=\"primary\"\n href={action.href}\n block={isMobile}\n onClick={action.onClick}\n >\n {action.label}\n </Button>\n </>\n }\n onDismiss={onDismiss}\n role=\"region\"\n {...(Boolean(ariaLabel)\n ? { 'aria-label': ariaLabel }\n : {\n 'aria-labelledby': ariaLabelledByIds,\n 'aria-describedby': descId,\n })}\n >\n <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n <Body id={titleId} type={Typography.BODY_LARGE_BOLD}>\n {title}\n </Body>\n {description && <Body id={descId}>{description}</Body>}\n </div>\n </PrimitivePrompt>\n );\n};\n\nexport default ActionPrompt;\n"],"names":["ActionPrompt","sentiment","title","description","onDismiss","media","action","actionSecondary","id","className","testId","ariaLabel","isMobile","useScreenSize","Breakpoint","MEDIUM","mediaId","useId","titleId","descId","ariaLabelledByIds","undefined","Boolean","filter","join","renderMedia","imgSrc","_jsx","Image","src","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","iconLabel","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","Button","v2","priority","href","block","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}
1
+ {"version":3,"file":"ActionPrompt.js","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { clsx } from 'clsx';\n\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { BadgeAssetsProps } from '../../badge';\nimport { GiftBox } from '@transferwise/icons';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nexport type ActionPromptProps = {\n title: ReactNode;\n description?: ReactNode;\n media?: {\n imgSrc?: string;\n avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n asset?: AvatarViewProps['children'];\n badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n };\n 'aria-label'?: string;\n 'aria-hidden'?: boolean;\n };\n action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n 'aria-label'?: AriaAttributes['aria-label'];\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;\n\nexport const ActionPrompt = ({\n sentiment = 'neutral',\n title,\n description,\n onDismiss,\n media = {},\n action,\n actionSecondary,\n id,\n className,\n 'data-testid': testId,\n 'aria-label': ariaLabel,\n}: ActionPromptProps) => {\n const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n\n const mediaId = useId();\n const titleId = useId();\n const descId = useId();\n\n const ariaLabelledByIds = [\n media['aria-hidden'] ? undefined : mediaId,\n Boolean(ariaLabel) ? undefined : titleId,\n ]\n .filter(Boolean)\n .join(' ');\n\n const renderMedia = () => {\n if (media?.imgSrc) {\n return (\n <Image\n id={mediaId}\n src={media.imgSrc}\n className=\"wds-action-prompt--media-image\"\n alt={media['aria-label'] ?? ''}\n />\n );\n }\n if (media?.avatar) {\n const badge = media.avatar.badge\n ? media.avatar.badge\n : sentiment === 'proposition'\n ? {}\n : { status: sentiment };\n return (\n <AvatarView\n {...media.avatar}\n badge={badge}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n id={mediaId}\n size={48}\n >\n {media.avatar.asset}\n </AvatarView>\n );\n }\n return sentiment === 'proposition' ? (\n <AvatarView\n id={mediaId}\n size={48}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n >\n <GiftBox />\n </AvatarView>\n ) : (\n <StatusIcon\n id={mediaId}\n size={48}\n sentiment={sentiment}\n iconLabel={Boolean(media['aria-hidden']) ? null : media['aria-label']}\n />\n );\n };\n\n return (\n <PrimitivePrompt\n id={id}\n sentiment={sentiment}\n data-testid={testId}\n className={clsx(\n 'wds-action-prompt',\n { 'wds-action-prompt--with-two-actions': !!actionSecondary },\n className,\n )}\n media={renderMedia()}\n actions={\n <>\n {actionSecondary && (\n // @ts-expect-error onClick type mismatch\n <Button\n v2\n size=\"md\"\n priority=\"secondary\"\n href={actionSecondary.href}\n block={isMobile}\n onClick={actionSecondary?.onClick}\n >\n {actionSecondary.label}\n </Button>\n )}\n {/* @ts-expect-error onClick type mismatch */}\n <Button\n v2\n size=\"md\"\n priority=\"primary\"\n href={action.href}\n block={isMobile}\n onClick={action.onClick}\n >\n {action.label}\n </Button>\n </>\n }\n onDismiss={onDismiss}\n role=\"region\"\n {...(Boolean(ariaLabel)\n ? { 'aria-label': ariaLabel }\n : {\n 'aria-labelledby': ariaLabelledByIds,\n 'aria-describedby': descId,\n })}\n >\n <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n <Body id={titleId} type={Typography.BODY_LARGE_BOLD}>\n {title}\n </Body>\n {description && <Body id={descId}>{description}</Body>}\n </div>\n </PrimitivePrompt>\n );\n};\n\nexport default ActionPrompt;\n"],"names":["ActionPrompt","sentiment","title","description","onDismiss","media","action","actionSecondary","id","className","testId","ariaLabel","isMobile","useScreenSize","Breakpoint","MEDIUM","mediaId","useId","titleId","descId","ariaLabelledByIds","undefined","Boolean","filter","join","renderMedia","imgSrc","_jsx","Image","src","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","iconLabel","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","Button","v2","priority","href","block","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}
package/build/prompt/ActionPrompt/ActionPrompt.mjs CHANGED
@@ -137,5 +137,5 @@ const ActionPrompt = ({
137
137
  });
138
138
  };
139
139
 
140
- export { ActionPrompt };
140
+ export { ActionPrompt, ActionPrompt as default };
141
141
  //# sourceMappingURL=ActionPrompt.mjs.map
package/build/styles/main.css CHANGED
@@ -304,18 +304,18 @@
304
304
  --color-sentiment-interactive-primary: #454745;
305
305
  --color-sentiment-interactive-primary-hover: #353635;
306
306
  --color-sentiment-interactive-primary-active: #232423;
307
- --color-sentiment-interactive-secondary: #F1F1ED;
308
- --color-sentiment-interactive-secondary-hover: #E7E7E1;
309
- --color-sentiment-interactive-secondary-active: #DFDED5;
310
- --color-sentiment-interactive-secondary-neutral: #E4E4DC;
311
- --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
312
- --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
307
+ --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
308
+ --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
309
+ --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
310
+ --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
311
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
312
+ --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
313
313
  --color-sentiment-interactive-control: #F1F1ED;
314
314
  --color-sentiment-interactive-control-hover: #E7E7E1;
315
315
  --color-sentiment-interactive-control-active: #DFDED5;
316
- --color-sentiment-background-surface: #F1F1ED;
317
- --color-sentiment-background-surface-hover: #E7E7E1;
318
- --color-sentiment-background-surface-active: #DFDED5;
316
+ --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
317
+ --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
318
+ --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
319
319
  }
320
320
  .np-theme-personal .wds-sentiment-surface-neutral-elevated,
321
321
  .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
331
331
  --color-sentiment-interactive-secondary: #454745;
332
332
  --color-sentiment-interactive-secondary-hover: #353635;
333
333
  --color-sentiment-interactive-secondary-active: #232423;
334
- --color-sentiment-interactive-secondary-neutral: #5A5C5A;
335
- --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
336
- --color-sentiment-interactive-secondary-neutral-active: #727472;
334
+ --color-sentiment-interactive-secondary-neutral: #585958;
335
+ --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
336
+ --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
337
337
  --color-sentiment-interactive-control: #454745;
338
338
  --color-sentiment-interactive-control-hover: #353635;
339
339
  --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
352
352
  --color-sentiment-interactive-primary: #F1F1ED;
353
353
  --color-sentiment-interactive-primary-hover: #E7E7E1;
354
354
  --color-sentiment-interactive-primary-active: #DFDED5;
355
- --color-sentiment-interactive-secondary: #2A2C29;
356
- --color-sentiment-interactive-secondary-hover: #414441;
357
- --color-sentiment-interactive-secondary-active: #595B58;
358
- --color-sentiment-interactive-secondary-neutral: #424441;
359
- --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
360
- --color-sentiment-interactive-secondary-neutral-active: #565955;
355
+ --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
356
+ --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
357
+ --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
358
+ --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
359
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
360
+ --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
361
361
  --color-sentiment-interactive-control: #2A2C29;
362
362
  --color-sentiment-interactive-control-hover: #414441;
363
363
  --color-sentiment-interactive-control-active: #595B58;
364
- --color-sentiment-background-surface: #2A2C29;
365
- --color-sentiment-background-surface-hover: #414441;
366
- --color-sentiment-background-surface-active: #595B58;
364
+ --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
365
+ --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
366
+ --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
367
367
  }
368
368
  .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
369
369
  .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,
package/build/styles/sentimentSurface/SentimentSurface.css CHANGED
@@ -304,18 +304,18 @@
304
304
  --color-sentiment-interactive-primary: #454745;
305
305
  --color-sentiment-interactive-primary-hover: #353635;
306
306
  --color-sentiment-interactive-primary-active: #232423;
307
- --color-sentiment-interactive-secondary: #F1F1ED;
308
- --color-sentiment-interactive-secondary-hover: #E7E7E1;
309
- --color-sentiment-interactive-secondary-active: #DFDED5;
310
- --color-sentiment-interactive-secondary-neutral: #E4E4DC;
311
- --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
312
- --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
307
+ --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
308
+ --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
309
+ --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
310
+ --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
311
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
312
+ --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
313
313
  --color-sentiment-interactive-control: #F1F1ED;
314
314
  --color-sentiment-interactive-control-hover: #E7E7E1;
315
315
  --color-sentiment-interactive-control-active: #DFDED5;
316
- --color-sentiment-background-surface: #F1F1ED;
317
- --color-sentiment-background-surface-hover: #E7E7E1;
318
- --color-sentiment-background-surface-active: #DFDED5;
316
+ --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
317
+ --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
318
+ --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
319
319
  }
320
320
  .np-theme-personal .wds-sentiment-surface-neutral-elevated,
321
321
  .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
331
331
  --color-sentiment-interactive-secondary: #454745;
332
332
  --color-sentiment-interactive-secondary-hover: #353635;
333
333
  --color-sentiment-interactive-secondary-active: #232423;
334
- --color-sentiment-interactive-secondary-neutral: #5A5C5A;
335
- --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
336
- --color-sentiment-interactive-secondary-neutral-active: #727472;
334
+ --color-sentiment-interactive-secondary-neutral: #585958;
335
+ --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
336
+ --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
337
337
  --color-sentiment-interactive-control: #454745;
338
338
  --color-sentiment-interactive-control-hover: #353635;
339
339
  --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
352
352
  --color-sentiment-interactive-primary: #F1F1ED;
353
353
  --color-sentiment-interactive-primary-hover: #E7E7E1;
354
354
  --color-sentiment-interactive-primary-active: #DFDED5;
355
- --color-sentiment-interactive-secondary: #2A2C29;
356
- --color-sentiment-interactive-secondary-hover: #414441;
357
- --color-sentiment-interactive-secondary-active: #595B58;
358
- --color-sentiment-interactive-secondary-neutral: #424441;
359
- --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
360
- --color-sentiment-interactive-secondary-neutral-active: #565955;
355
+ --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
356
+ --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
357
+ --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
358
+ --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
359
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
360
+ --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
361
361
  --color-sentiment-interactive-control: #2A2C29;
362
362
  --color-sentiment-interactive-control-hover: #414441;
363
363
  --color-sentiment-interactive-control-active: #595B58;
364
- --color-sentiment-background-surface: #2A2C29;
365
- --color-sentiment-background-surface-hover: #414441;
366
- --color-sentiment-background-surface-active: #595B58;
364
+ --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
365
+ --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
366
+ --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
367
367
  }
368
368
  .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
369
369
  .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-18d0911",
3
+ "version": "0.0.0-experimental-b557558",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -38,22 +38,22 @@
38
38
  "!**/*.tsbuildinfo"
39
39
  ],
40
40
  "devDependencies": {
41
- "@babel/core": "^7.29.0",
42
- "@babel/plugin-transform-runtime": "^7.29.0",
43
- "@babel/preset-env": "^7.29.0",
41
+ "@babel/core": "^7.28.5",
42
+ "@babel/plugin-transform-runtime": "^7.28.5",
43
+ "@babel/preset-env": "^7.28.5",
44
44
  "@babel/preset-react": "^7.28.5",
45
45
  "@babel/preset-typescript": "^7.28.5",
46
- "@formatjs/cli": "^6.12.2",
46
+ "@formatjs/cli": "^6.8.4",
47
47
  "@rollup/plugin-babel": "^6.1.0",
48
48
  "@rollup/plugin-json": "^6.1.0",
49
49
  "@rollup/plugin-node-resolve": "^16.0.3",
50
50
  "@rollup/plugin-typescript": "^12.3.0",
51
51
  "@rollup/plugin-url": "^8.0.2",
52
- "@storybook/addon-a11y": "^10.3.0-alpha.4",
53
- "@storybook/addon-docs": "^10.3.0-alpha.4",
52
+ "@storybook/addon-a11y": "^10.3.0-alpha.0",
53
+ "@storybook/addon-docs": "^10.3.0-alpha.0",
54
54
  "@storybook/addon-mcp": "^0.2.2",
55
55
  "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
56
- "@storybook/react-webpack5": "^10.3.0-alpha.4",
56
+ "@storybook/react-webpack5": "10.3.0-alpha.0",
57
57
  "@testing-library/dom": "^10.4.1",
58
58
  "@testing-library/jest-dom": "^6.9.1",
59
59
  "@testing-library/react": "^16.3.2",
@@ -63,31 +63,31 @@
63
63
  "@types/babel__core": "^7.20.5",
64
64
  "@types/commonmark": "^0.27.10",
65
65
  "@types/jest": "^30.0.0",
66
- "@types/lodash": "4.17.23",
66
+ "@types/lodash": "4.17.21",
67
67
  "@types/lodash.clamp": "^4.0.9",
68
68
  "@types/lodash.debounce": "^4.0.9",
69
- "@types/react": "^18.3.28",
69
+ "@types/react": "^18.3.23",
70
70
  "@types/react-dom": "^18.3.7",
71
71
  "@types/react-transition-group": "4.4.12",
72
72
  "@wise/art": "^2.26.0",
73
73
  "@wise/eslint-config": "^13.3.0",
74
- "babel-plugin-formatjs": "^10.5.41",
74
+ "babel-plugin-formatjs": "^10.5.39",
75
75
  "eslint": "^9.39.2",
76
- "eslint-plugin-storybook": "^10.3.0-alpha.4",
76
+ "eslint-plugin-storybook": "^10.3.0-alpha.0",
77
77
  "gulp": "^5.0.1",
78
78
  "jest": "^30.2.0",
79
79
  "jest-environment-jsdom": "^29.7.0",
80
80
  "jest-fetch-mock": "^3.0.3",
81
81
  "jsdom-testing-mocks": "^1.16.0",
82
82
  "lodash.times": "^4.3.2",
83
- "react-intl": "^7.1.14",
84
- "rollup": "^4.57.1",
83
+ "react-intl": "^7.1.11",
84
+ "rollup": "^4.54.0",
85
85
  "rollup-preserve-directives": "^1.1.3",
86
- "storybook": "^10.3.0-alpha.4",
87
- "storybook-addon-tag-badges": "^3.0.6",
86
+ "storybook": "^10.3.0-alpha.0",
87
+ "storybook-addon-tag-badges": "^3.0.4",
88
88
  "storybook-addon-test-codegen": "^3.0.1",
89
- "@transferwise/neptune-css": "14.26.1",
90
89
  "@transferwise/less-config": "3.1.2",
90
+ "@transferwise/neptune-css": "14.26.1",
91
91
  "@wise/components-theming": "1.10.1",
92
92
  "@wise/wds-configs": "0.0.0"
93
93
  },
@@ -102,24 +102,24 @@
102
102
  "react-intl": "^5.10.0 || ^6 || ^7"
103
103
  },
104
104
  "dependencies": {
105
- "@babel/runtime": "^7.28.6",
106
- "@floating-ui/react": "^0.27.17",
105
+ "@babel/runtime": "^7.28.4",
106
+ "@floating-ui/react": "^0.27.16",
107
107
  "@headlessui/react": "^2.2.9",
108
108
  "@popperjs/core": "^2.11.8",
109
- "@react-aria/focus": "^3.21.4",
110
- "@react-aria/overlays": "^3.31.1",
111
- "@transferwise/formatting": "^2.13.5",
112
- "@transferwise/neptune-validation": "^3.3.3",
109
+ "@react-aria/focus": "^3.21.3",
110
+ "@react-aria/overlays": "^3.31.0",
111
+ "@transferwise/formatting": "^2.13.4",
112
+ "@transferwise/neptune-validation": "^3.3.1",
113
113
  "clsx": "^2.1.1",
114
114
  "commonmark": "^0.31.2",
115
- "core-js": "^3.48.0",
116
- "framer-motion": "^12.33.0",
115
+ "core-js": "^3.47.0",
116
+ "framer-motion": "^12.23.26",
117
117
  "lodash.clamp": "^4.0.3",
118
118
  "lodash.debounce": "^4.0.8",
119
119
  "merge-props": "^6.0.0",
120
120
  "react-popper": "^2.3.0",
121
121
  "react-transition-group": "^4.4.5",
122
- "virtua": "^0.48.5"
122
+ "virtua": "^0.48.3"
123
123
  },
124
124
  "publishConfig": {
125
125
  "access": "public",
package/src/main.css CHANGED
@@ -304,18 +304,18 @@
304
304
  --color-sentiment-interactive-primary: #454745;
305
305
  --color-sentiment-interactive-primary-hover: #353635;
306
306
  --color-sentiment-interactive-primary-active: #232423;
307
- --color-sentiment-interactive-secondary: #F1F1ED;
308
- --color-sentiment-interactive-secondary-hover: #E7E7E1;
309
- --color-sentiment-interactive-secondary-active: #DFDED5;
310
- --color-sentiment-interactive-secondary-neutral: #E4E4DC;
311
- --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
312
- --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
307
+ --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
308
+ --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
309
+ --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
310
+ --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
311
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
312
+ --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
313
313
  --color-sentiment-interactive-control: #F1F1ED;
314
314
  --color-sentiment-interactive-control-hover: #E7E7E1;
315
315
  --color-sentiment-interactive-control-active: #DFDED5;
316
- --color-sentiment-background-surface: #F1F1ED;
317
- --color-sentiment-background-surface-hover: #E7E7E1;
318
- --color-sentiment-background-surface-active: #DFDED5;
316
+ --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
317
+ --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
318
+ --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
319
319
  }
320
320
  .np-theme-personal .wds-sentiment-surface-neutral-elevated,
321
321
  .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
331
331
  --color-sentiment-interactive-secondary: #454745;
332
332
  --color-sentiment-interactive-secondary-hover: #353635;
333
333
  --color-sentiment-interactive-secondary-active: #232423;
334
- --color-sentiment-interactive-secondary-neutral: #5A5C5A;
335
- --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
336
- --color-sentiment-interactive-secondary-neutral-active: #727472;
334
+ --color-sentiment-interactive-secondary-neutral: #585958;
335
+ --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
336
+ --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
337
337
  --color-sentiment-interactive-control: #454745;
338
338
  --color-sentiment-interactive-control-hover: #353635;
339
339
  --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
352
352
  --color-sentiment-interactive-primary: #F1F1ED;
353
353
  --color-sentiment-interactive-primary-hover: #E7E7E1;
354
354
  --color-sentiment-interactive-primary-active: #DFDED5;
355
- --color-sentiment-interactive-secondary: #2A2C29;
356
- --color-sentiment-interactive-secondary-hover: #414441;
357
- --color-sentiment-interactive-secondary-active: #595B58;
358
- --color-sentiment-interactive-secondary-neutral: #424441;
359
- --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
360
- --color-sentiment-interactive-secondary-neutral-active: #565955;
355
+ --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
356
+ --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
357
+ --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
358
+ --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
359
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
360
+ --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
361
361
  --color-sentiment-interactive-control: #2A2C29;
362
362
  --color-sentiment-interactive-control-hover: #414441;
363
363
  --color-sentiment-interactive-control-active: #595B58;
364
- --color-sentiment-background-surface: #2A2C29;
365
- --color-sentiment-background-surface-hover: #414441;
366
- --color-sentiment-background-surface-active: #595B58;
364
+ --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
365
+ --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
366
+ --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
367
367
  }
368
368
  .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
369
369
  .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,
package/src/sentimentSurface/SentimentSurface.css CHANGED
@@ -304,18 +304,18 @@
304
304
  --color-sentiment-interactive-primary: #454745;
305
305
  --color-sentiment-interactive-primary-hover: #353635;
306
306
  --color-sentiment-interactive-primary-active: #232423;
307
- --color-sentiment-interactive-secondary: #F1F1ED;
308
- --color-sentiment-interactive-secondary-hover: #E7E7E1;
309
- --color-sentiment-interactive-secondary-active: #DFDED5;
310
- --color-sentiment-interactive-secondary-neutral: #E4E4DC;
311
- --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
312
- --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
307
+ --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
308
+ --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
309
+ --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
310
+ --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
311
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
312
+ --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
313
313
  --color-sentiment-interactive-control: #F1F1ED;
314
314
  --color-sentiment-interactive-control-hover: #E7E7E1;
315
315
  --color-sentiment-interactive-control-active: #DFDED5;
316
- --color-sentiment-background-surface: #F1F1ED;
317
- --color-sentiment-background-surface-hover: #E7E7E1;
318
- --color-sentiment-background-surface-active: #DFDED5;
316
+ --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
317
+ --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
318
+ --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
319
319
  }
320
320
  .np-theme-personal .wds-sentiment-surface-neutral-elevated,
321
321
  .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
331
331
  --color-sentiment-interactive-secondary: #454745;
332
332
  --color-sentiment-interactive-secondary-hover: #353635;
333
333
  --color-sentiment-interactive-secondary-active: #232423;
334
- --color-sentiment-interactive-secondary-neutral: #5A5C5A;
335
- --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
336
- --color-sentiment-interactive-secondary-neutral-active: #727472;
334
+ --color-sentiment-interactive-secondary-neutral: #585958;
335
+ --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
336
+ --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
337
337
  --color-sentiment-interactive-control: #454745;
338
338
  --color-sentiment-interactive-control-hover: #353635;
339
339
  --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
352
352
  --color-sentiment-interactive-primary: #F1F1ED;
353
353
  --color-sentiment-interactive-primary-hover: #E7E7E1;
354
354
  --color-sentiment-interactive-primary-active: #DFDED5;
355
- --color-sentiment-interactive-secondary: #2A2C29;
356
- --color-sentiment-interactive-secondary-hover: #414441;
357
- --color-sentiment-interactive-secondary-active: #595B58;
358
- --color-sentiment-interactive-secondary-neutral: #424441;
359
- --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
360
- --color-sentiment-interactive-secondary-neutral-active: #565955;
355
+ --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
356
+ --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
357
+ --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
358
+ --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
359
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
360
+ --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
361
361
  --color-sentiment-interactive-control: #2A2C29;
362
362
  --color-sentiment-interactive-control-hover: #414441;
363
363
  --color-sentiment-interactive-control-active: #595B58;
364
- --color-sentiment-background-surface: #2A2C29;
365
- --color-sentiment-background-surface-hover: #414441;
366
- --color-sentiment-background-surface-active: #595B58;
364
+ --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
365
+ --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
366
+ --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
367
367
  }
368
368
  .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
369
369
  .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,
package/src/sentimentSurface/SentimentSurface.less CHANGED
@@ -178,12 +178,12 @@
178
178
  .np-theme-business--bright-green & {
179
179
  &-base {
180
180
  .sentiment-surface-tokens(
181
- #454745, #353635, #232423, // content-primary (default, hover, active)
182
- #454745, #353635, #232423, // interactive-primary
183
- #F1F1ED, #E7E7E1, #DFDED5, // interactive-secondary
184
- #E4E4DC, #DCDCD2, #D3D2C6, // interactive-secondary-neutral
185
- #F1F1ED, #E7E7E1, #DFDED5, // interactive-control
186
- #F1F1ED, #E7E7E1, #DFDED5 // background-surface
181
+ #454745, #353635, #232423, // content-primary (default, hover, active)
182
+ #454745, #353635, #232423, // interactive-primary
183
+ rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17), // interactive-secondary
184
+ rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17), // interactive-secondary-neutral
185
+ #F1F1ED, #E7E7E1, #DFDED5, // interactive-control
186
+ rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17) // background-surface
187
187
  );
188
188
  }
189
189
  &-elevated {
@@ -191,7 +191,7 @@
191
191
  #F1F1ED, #E7E7E1, #DFDED5, // content-primary
192
192
  #F1F1ED, #E7E7E1, #DFDED5, // interactive-primary
193
193
  #454745, #353635, #232423, // interactive-secondary
194
- #5A5C5A, #6D6F6D, #727472, // interactive-secondary-neutral
194
+ #585958, #6A6C6A, #7D7E7D, // interactive-secondary-neutral
195
195
  #454745, #353635, #232423, // interactive-control
196
196
  #454745, #353635, #232423 // background-surface
197
197
  );
@@ -205,12 +205,12 @@
205
205
  .np-theme-platform--forest-green & {
206
206
  &-base {
207
207
  .sentiment-surface-tokens(
208
- #F1F1ED, #E7E7E1, #DFDED5, // content-primary
209
- #F1F1ED, #E7E7E1, #DFDED5, // interactive-primary
210
- #2A2C29, #414441, #595B58, // interactive-secondary
211
- #424441, #4C4E4B, #565955, // interactive-secondary-neutral
212
- #2A2C29, #414441, #595B58, // interactive-control
213
- #2A2C29, #414441, #595B58 // background-surface
208
+ #F1F1ED, #E7E7E1, #DFDED5, // content-primary
209
+ #F1F1ED, #E7E7E1, #DFDED5, // interactive-primary
210
+ rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30), // interactive-secondary
211
+ rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30), // interactive-secondary-neutral
212
+ #2A2C29, #414441, #595B58, // interactive-control
213
+ rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30) // background-surface
214
214
  );
215
215
  }
216
216
  &-elevated {
package/src/sentimentSurface/SentimentSurface.story.tsx CHANGED
@@ -31,7 +31,7 @@ const withComponentGrid = (Story: () => JSX.Element) => (
31
31
  */
32
32
  const meta: Meta<typeof SentimentSurface> = {
33
33
  component: SentimentSurface,
34
- title: 'Foundations/SentimentSurface',
34
+ title: 'Content/SentimentSurface',
35
35
  argTypes: {
36
36
  sentiment: {
37
37
  control: 'select',
package/src/sentimentSurface/SentimentSurface.test.story.tsx CHANGED
@@ -21,7 +21,7 @@ const screenModes: Theming['screenMode'][] = ['light', 'dark'];
21
21
 
22
22
  export default {
23
23
  component: SentimentSurface,
24
- title: 'Foundations/SentimentSurface/Tests',
24
+ title: 'Content/SentimentSurface/Tests',
25
25
  tags: ['!autodocs', '!manifest'],
26
26
  } satisfies Meta<typeof SentimentSurface>;
27
27
 
@@ -124,3 +124,50 @@ export const ButtonsAcrossThemes: Story = {
124
124
  </div>
125
125
  ),
126
126
  };
127
+
128
+ export const NeutralSentimentOnNeutralBackground: Story = {
129
+ render: () => (
130
+ <div
131
+ style={{
132
+ display: 'flex',
133
+ flexDirection: 'column',
134
+ }}
135
+ >
136
+ <SentimentSurface
137
+ sentiment="neutral"
138
+ style={{
139
+ padding: '16px',
140
+ }}
141
+ >
142
+ <Button v2>Primary</Button>
143
+ <Button v2 priority="secondary" style={{ marginLeft: '8px' }}>
144
+ Secondary
145
+ </Button>
146
+ <Button v2 priority="secondary-neutral" style={{ marginLeft: '8px' }}>
147
+ Secondary Neutral
148
+ </Button>
149
+ <Button v2 priority="tertiary" style={{ marginLeft: '8px' }}>
150
+ Tertiary
151
+ </Button>
152
+ </SentimentSurface>
153
+ <SentimentSurface
154
+ sentiment="neutral"
155
+ emphasis="elevated"
156
+ style={{
157
+ padding: '16px',
158
+ }}
159
+ >
160
+ <Button v2>Primary</Button>
161
+ <Button v2 priority="secondary" style={{ marginLeft: '8px' }}>
162
+ Secondary
163
+ </Button>
164
+ <Button v2 priority="secondary-neutral" style={{ marginLeft: '8px' }}>
165
+ Secondary Neutral
166
+ </Button>
167
+ <Button v2 priority="tertiary" style={{ marginLeft: '8px' }}>
168
+ Tertiary
169
+ </Button>
170
+ </SentimentSurface>
171
+ </div>
172
+ ),
173
+ };