@transferwise/components 0.0.0-experimental-de92c64 → 0.0.0-experimental-1f90331

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 (65) hide show
  1. package/build/button/Button.js +4 -3
  2. package/build/button/Button.js.map +1 -1
  3. package/build/button/Button.mjs +4 -3
  4. package/build/button/Button.mjs.map +1 -1
  5. package/build/iconButton/IconButton.js +2 -2
  6. package/build/iconButton/IconButton.mjs +2 -2
  7. package/build/link/Link.js +2 -2
  8. package/build/link/Link.mjs +2 -2
  9. package/build/main.css +13 -3
  10. package/build/primitives/PrimitiveAnchor/{PrimitiveAnchor.js → src/PrimitiveAnchor.js} +1 -1
  11. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js.map +1 -0
  12. package/build/primitives/PrimitiveAnchor/{PrimitiveAnchor.mjs → src/PrimitiveAnchor.mjs} +1 -1
  13. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs.map +1 -0
  14. package/build/primitives/PrimitiveButton/{PrimitiveButton.js → src/PrimitiveButton.js} +3 -2
  15. package/build/primitives/PrimitiveButton/src/PrimitiveButton.js.map +1 -0
  16. package/build/primitives/PrimitiveButton/{PrimitiveButton.mjs → src/PrimitiveButton.mjs} +3 -2
  17. package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs.map +1 -0
  18. package/build/styles/button/Button.css +13 -3
  19. package/build/styles/button/Button.vars.css +10 -3
  20. package/build/styles/main.css +13 -3
  21. package/build/types/button/Button.d.ts.map +1 -1
  22. package/build/types/primitives/PrimitiveAnchor/index.d.ts +2 -2
  23. package/build/types/primitives/PrimitiveAnchor/index.d.ts.map +1 -1
  24. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts.map +1 -0
  25. package/build/types/primitives/PrimitiveAnchor/src/index.d.ts +3 -0
  26. package/build/types/primitives/PrimitiveAnchor/src/index.d.ts.map +1 -0
  27. package/build/types/primitives/PrimitiveButton/index.d.ts +2 -2
  28. package/build/types/primitives/PrimitiveButton/index.d.ts.map +1 -1
  29. package/build/types/primitives/PrimitiveButton/{PrimitiveButton.d.ts → src/PrimitiveButton.d.ts} +1 -1
  30. package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts.map +1 -0
  31. package/build/types/primitives/PrimitiveButton/{PrimitiveButton.types.d.ts → src/PrimitiveButton.types.d.ts} +1 -1
  32. package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.types.d.ts.map +1 -0
  33. package/build/types/primitives/PrimitiveButton/src/index.d.ts +3 -0
  34. package/build/types/primitives/PrimitiveButton/src/index.d.ts.map +1 -0
  35. package/package.json +3 -3
  36. package/src/button/Button.css +13 -3
  37. package/src/button/Button.less +7 -1
  38. package/src/button/Button.spec.tsx +103 -0
  39. package/src/button/Button.tsx +2 -1
  40. package/src/button/Button.vars.css +10 -3
  41. package/src/button/Button.vars.less +16 -6
  42. package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +0 -1
  43. package/src/main.css +13 -3
  44. package/src/primitives/PrimitiveAnchor/index.ts +2 -6
  45. package/src/primitives/PrimitiveAnchor/{PrimitiveAnchor.tsx → src/PrimitiveAnchor.tsx} +1 -1
  46. package/src/primitives/PrimitiveAnchor/src/index.ts +6 -0
  47. package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.tests.story.tsx +1 -1
  48. package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +1 -1
  49. package/src/primitives/PrimitiveButton/index.ts +2 -6
  50. package/src/primitives/PrimitiveButton/{PrimitiveButton.tsx → src/PrimitiveButton.tsx} +5 -6
  51. package/src/primitives/PrimitiveButton/{PrimitiveButton.types.ts → src/PrimitiveButton.types.ts} +1 -1
  52. package/src/primitives/PrimitiveButton/src/index.ts +6 -0
  53. package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx +1 -1
  54. package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +15 -9
  55. package/build/primitives/PrimitiveAnchor/PrimitiveAnchor.js.map +0 -1
  56. package/build/primitives/PrimitiveAnchor/PrimitiveAnchor.mjs.map +0 -1
  57. package/build/primitives/PrimitiveButton/PrimitiveButton.js.map +0 -1
  58. package/build/primitives/PrimitiveButton/PrimitiveButton.mjs.map +0 -1
  59. package/build/types/primitives/PrimitiveAnchor/PrimitiveAnchor.d.ts.map +0 -1
  60. package/build/types/primitives/PrimitiveAnchor/PrimitiveAnchor.types.d.ts +0 -25
  61. package/build/types/primitives/PrimitiveAnchor/PrimitiveAnchor.types.d.ts.map +0 -1
  62. package/build/types/primitives/PrimitiveButton/PrimitiveButton.d.ts.map +0 -1
  63. package/build/types/primitives/PrimitiveButton/PrimitiveButton.types.d.ts.map +0 -1
  64. package/src/primitives/PrimitiveAnchor/PrimitiveAnchor.types.ts +0 -33
  65. /package/build/types/primitives/PrimitiveAnchor/{PrimitiveAnchor.d.ts → src/PrimitiveAnchor.d.ts} +0 -0
@@ -1,8 +1,8 @@
1
1
  'use strict';
2
2
 
3
3
  var React = require('react');
4
- var PrimitiveButton = require('../primitives/PrimitiveButton/PrimitiveButton.js');
5
- var PrimitiveAnchor = require('../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
4
+ var PrimitiveButton = require('../primitives/PrimitiveButton/src/PrimitiveButton.js');
5
+ var PrimitiveAnchor = require('../primitives/PrimitiveAnchor/src/PrimitiveAnchor.js');
6
6
  var AvatarLayout = require('../avatarLayout/AvatarLayout.js');
7
7
  var ProcessIndicator = require('../processIndicator/ProcessIndicator.js');
8
8
  var clsx = require('clsx');
@@ -97,7 +97,8 @@ const Button = /*#__PURE__*/React.forwardRef(({
97
97
  ...props,
98
98
  href: href,
99
99
  className: classNames,
100
- disabled: disabled,
100
+ disabled: disabled || loading,
101
+ "aria-busy": loading || undefined,
101
102
  children: content
102
103
  });
103
104
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport {\n AnchorElementProps,\n ButtonReferenceType,\n ButtonProps as NewButtonProps,\n} from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\n\nconst Button = forwardRef<ButtonReferenceType, NewButtonProps>(\n (\n {\n as = 'button',\n children,\n className,\n size = 'lg',\n href,\n disabled = false,\n priority = 'primary',\n sentiment = 'default',\n iconStart: IconStart,\n iconEnd: IconEnd,\n avatars,\n // @ts-expect-error NewButtonProps has `type` prop\n type = 'button',\n loading = false,\n block = false,\n v2,\n ...props\n },\n ref,\n ) => {\n const classNames = clsx(\n 'wds-Button',\n {\n [`wds-Button--block`]: block,\n [`wds-Button--disabled`]: disabled,\n [`wds-Button--loading`]: loading,\n },\n `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,\n `wds-Button--${priority}`,\n `wds-Button--${sentiment}`,\n className,\n );\n\n const contentClassNames = clsx('wds-Button-content', {\n [`wds-Button-content--loading`]: loading,\n });\n\n const content = (\n <Body\n as=\"span\"\n type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}\n className={contentClassNames}\n >\n {loading && (\n <ProcessIndicator\n size={size === 'sm' ? 'xxs' : 'xs'}\n className=\"wds-Button-loader\"\n data-testid=\"button-loader-indicator\"\n />\n )}\n <span className=\"wds-Button-label\" aria-hidden={loading}>\n {size === 'lg' ? (\n children\n ) : (\n <>\n {size === 'md' && avatars && (\n <span className=\"wds-Button-avatars\">\n <AvatarLayout orientation=\"horizontal\" avatars={avatars} size={24} />\n </span>\n )}\n {!avatars && IconStart && (\n <IconStart className=\"wds-Button-icon wds-Button-icon--start\" />\n )}\n {children}\n {IconEnd && <IconEnd className=\"wds-Button-icon wds-Button-icon--end\" />}\n </>\n )}\n </span>\n </Body>\n );\n\n if (href || as === 'a') {\n return (\n <PrimitiveAnchor\n ref={ref as React.Ref<HTMLAnchorElement>}\n {...(props as any)}\n href={href}\n className={classNames}\n disabled={disabled}\n >\n {content}\n </PrimitiveAnchor>\n );\n }\n\n return (\n <PrimitiveButton\n ref={ref as React.Ref<HTMLButtonElement>}\n {...(props as any)}\n className={classNames}\n disabled={disabled}\n loading={loading}\n type={type}\n >\n {content}\n </PrimitiveButton>\n );\n },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","children","className","size","href","disabled","priority","sentiment","iconStart","IconStart","iconEnd","IconEnd","avatars","type","loading","block","v2","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","_Fragment","AvatarLayout","orientation","PrimitiveAnchor","PrimitiveButton"],"mappings":"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"}
1
+ {"version":3,"file":"Button.js","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport {\n AnchorElementProps,\n ButtonReferenceType,\n ButtonProps as NewButtonProps,\n} from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\n\nconst Button = forwardRef<ButtonReferenceType, NewButtonProps>(\n (\n {\n as = 'button',\n children,\n className,\n size = 'lg',\n href,\n disabled = false,\n priority = 'primary',\n sentiment = 'default',\n iconStart: IconStart,\n iconEnd: IconEnd,\n avatars,\n // @ts-expect-error NewButtonProps has `type` prop\n type = 'button',\n loading = false,\n block = false,\n v2,\n ...props\n },\n ref,\n ) => {\n const classNames = clsx(\n 'wds-Button',\n {\n [`wds-Button--block`]: block,\n [`wds-Button--disabled`]: disabled,\n [`wds-Button--loading`]: loading,\n },\n `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,\n `wds-Button--${priority}`,\n `wds-Button--${sentiment}`,\n className,\n );\n\n const contentClassNames = clsx('wds-Button-content', {\n [`wds-Button-content--loading`]: loading,\n });\n\n const content = (\n <Body\n as=\"span\"\n type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}\n className={contentClassNames}\n >\n {loading && (\n <ProcessIndicator\n size={size === 'sm' ? 'xxs' : 'xs'}\n className=\"wds-Button-loader\"\n data-testid=\"button-loader-indicator\"\n />\n )}\n <span className=\"wds-Button-label\" aria-hidden={loading}>\n {size === 'lg' ? (\n children\n ) : (\n <>\n {size === 'md' && avatars && (\n <span className=\"wds-Button-avatars\">\n <AvatarLayout orientation=\"horizontal\" avatars={avatars} size={24} />\n </span>\n )}\n {!avatars && IconStart && (\n <IconStart className=\"wds-Button-icon wds-Button-icon--start\" />\n )}\n {children}\n {IconEnd && <IconEnd className=\"wds-Button-icon wds-Button-icon--end\" />}\n </>\n )}\n </span>\n </Body>\n );\n\n if (href || as === 'a') {\n return (\n <PrimitiveAnchor\n ref={ref as React.Ref<HTMLAnchorElement>}\n {...(props as any)}\n href={href}\n className={classNames}\n disabled={disabled || loading}\n aria-busy={loading || undefined}\n >\n {content}\n </PrimitiveAnchor>\n );\n }\n\n return (\n <PrimitiveButton\n ref={ref as React.Ref<HTMLButtonElement>}\n {...(props as any)}\n className={classNames}\n disabled={disabled}\n loading={loading}\n type={type}\n >\n {content}\n </PrimitiveButton>\n );\n },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","children","className","size","href","disabled","priority","sentiment","iconStart","IconStart","iconEnd","IconEnd","avatars","type","loading","block","v2","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","_Fragment","AvatarLayout","orientation","PrimitiveAnchor","undefined","PrimitiveButton"],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  import { forwardRef } from 'react';
2
- import PrimitiveButton from '../primitives/PrimitiveButton/PrimitiveButton.mjs';
3
- import PrimitiveAnchor from '../primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
2
+ import PrimitiveButton from '../primitives/PrimitiveButton/src/PrimitiveButton.mjs';
3
+ import PrimitiveAnchor from '../primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs';
4
4
  import AvatarLayout from '../avatarLayout/AvatarLayout.mjs';
5
5
  import ProcessIndicator from '../processIndicator/ProcessIndicator.mjs';
6
6
  import { clsx } from 'clsx';
@@ -95,7 +95,8 @@ const Button = /*#__PURE__*/forwardRef(({
95
95
  ...props,
96
96
  href: href,
97
97
  className: classNames,
98
- disabled: disabled,
98
+ disabled: disabled || loading,
99
+ "aria-busy": loading || undefined,
99
100
  children: content
100
101
  });
101
102
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport {\n AnchorElementProps,\n ButtonReferenceType,\n ButtonProps as NewButtonProps,\n} from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\n\nconst Button = forwardRef<ButtonReferenceType, NewButtonProps>(\n (\n {\n as = 'button',\n children,\n className,\n size = 'lg',\n href,\n disabled = false,\n priority = 'primary',\n sentiment = 'default',\n iconStart: IconStart,\n iconEnd: IconEnd,\n avatars,\n // @ts-expect-error NewButtonProps has `type` prop\n type = 'button',\n loading = false,\n block = false,\n v2,\n ...props\n },\n ref,\n ) => {\n const classNames = clsx(\n 'wds-Button',\n {\n [`wds-Button--block`]: block,\n [`wds-Button--disabled`]: disabled,\n [`wds-Button--loading`]: loading,\n },\n `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,\n `wds-Button--${priority}`,\n `wds-Button--${sentiment}`,\n className,\n );\n\n const contentClassNames = clsx('wds-Button-content', {\n [`wds-Button-content--loading`]: loading,\n });\n\n const content = (\n <Body\n as=\"span\"\n type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}\n className={contentClassNames}\n >\n {loading && (\n <ProcessIndicator\n size={size === 'sm' ? 'xxs' : 'xs'}\n className=\"wds-Button-loader\"\n data-testid=\"button-loader-indicator\"\n />\n )}\n <span className=\"wds-Button-label\" aria-hidden={loading}>\n {size === 'lg' ? (\n children\n ) : (\n <>\n {size === 'md' && avatars && (\n <span className=\"wds-Button-avatars\">\n <AvatarLayout orientation=\"horizontal\" avatars={avatars} size={24} />\n </span>\n )}\n {!avatars && IconStart && (\n <IconStart className=\"wds-Button-icon wds-Button-icon--start\" />\n )}\n {children}\n {IconEnd && <IconEnd className=\"wds-Button-icon wds-Button-icon--end\" />}\n </>\n )}\n </span>\n </Body>\n );\n\n if (href || as === 'a') {\n return (\n <PrimitiveAnchor\n ref={ref as React.Ref<HTMLAnchorElement>}\n {...(props as any)}\n href={href}\n className={classNames}\n disabled={disabled}\n >\n {content}\n </PrimitiveAnchor>\n );\n }\n\n return (\n <PrimitiveButton\n ref={ref as React.Ref<HTMLButtonElement>}\n {...(props as any)}\n className={classNames}\n disabled={disabled}\n loading={loading}\n type={type}\n >\n {content}\n </PrimitiveButton>\n );\n },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","children","className","size","href","disabled","priority","sentiment","iconStart","IconStart","iconEnd","IconEnd","avatars","type","loading","block","v2","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","_Fragment","AvatarLayout","orientation","PrimitiveAnchor","PrimitiveButton"],"mappings":"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"}
1
+ {"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport {\n AnchorElementProps,\n ButtonReferenceType,\n ButtonProps as NewButtonProps,\n} from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\n\nconst Button = forwardRef<ButtonReferenceType, NewButtonProps>(\n (\n {\n as = 'button',\n children,\n className,\n size = 'lg',\n href,\n disabled = false,\n priority = 'primary',\n sentiment = 'default',\n iconStart: IconStart,\n iconEnd: IconEnd,\n avatars,\n // @ts-expect-error NewButtonProps has `type` prop\n type = 'button',\n loading = false,\n block = false,\n v2,\n ...props\n },\n ref,\n ) => {\n const classNames = clsx(\n 'wds-Button',\n {\n [`wds-Button--block`]: block,\n [`wds-Button--disabled`]: disabled,\n [`wds-Button--loading`]: loading,\n },\n `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,\n `wds-Button--${priority}`,\n `wds-Button--${sentiment}`,\n className,\n );\n\n const contentClassNames = clsx('wds-Button-content', {\n [`wds-Button-content--loading`]: loading,\n });\n\n const content = (\n <Body\n as=\"span\"\n type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}\n className={contentClassNames}\n >\n {loading && (\n <ProcessIndicator\n size={size === 'sm' ? 'xxs' : 'xs'}\n className=\"wds-Button-loader\"\n data-testid=\"button-loader-indicator\"\n />\n )}\n <span className=\"wds-Button-label\" aria-hidden={loading}>\n {size === 'lg' ? (\n children\n ) : (\n <>\n {size === 'md' && avatars && (\n <span className=\"wds-Button-avatars\">\n <AvatarLayout orientation=\"horizontal\" avatars={avatars} size={24} />\n </span>\n )}\n {!avatars && IconStart && (\n <IconStart className=\"wds-Button-icon wds-Button-icon--start\" />\n )}\n {children}\n {IconEnd && <IconEnd className=\"wds-Button-icon wds-Button-icon--end\" />}\n </>\n )}\n </span>\n </Body>\n );\n\n if (href || as === 'a') {\n return (\n <PrimitiveAnchor\n ref={ref as React.Ref<HTMLAnchorElement>}\n {...(props as any)}\n href={href}\n className={classNames}\n disabled={disabled || loading}\n aria-busy={loading || undefined}\n >\n {content}\n </PrimitiveAnchor>\n );\n }\n\n return (\n <PrimitiveButton\n ref={ref as React.Ref<HTMLButtonElement>}\n {...(props as any)}\n className={classNames}\n disabled={disabled}\n loading={loading}\n type={type}\n >\n {content}\n </PrimitiveButton>\n );\n },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","children","className","size","href","disabled","priority","sentiment","iconStart","IconStart","iconEnd","IconEnd","avatars","type","loading","block","v2","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","_Fragment","AvatarLayout","orientation","PrimitiveAnchor","undefined","PrimitiveButton"],"mappings":"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"}
@@ -1,8 +1,8 @@
1
1
  'use strict';
2
2
 
3
3
  var React = require('react');
4
- var PrimitiveButton = require('../primitives/PrimitiveButton/PrimitiveButton.js');
5
- var PrimitiveAnchor = require('../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
4
+ var PrimitiveButton = require('../primitives/PrimitiveButton/src/PrimitiveButton.js');
5
+ var PrimitiveAnchor = require('../primitives/PrimitiveAnchor/src/PrimitiveAnchor.js');
6
6
  var Circle = require('../common/circle/Circle.js');
7
7
  var clsx = require('clsx');
8
8
  var jsxRuntime = require('react/jsx-runtime');
@@ -1,6 +1,6 @@
1
1
  import { forwardRef } from 'react';
2
- import PrimitiveButton from '../primitives/PrimitiveButton/PrimitiveButton.mjs';
3
- import PrimitiveAnchor from '../primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
2
+ import PrimitiveButton from '../primitives/PrimitiveButton/src/PrimitiveButton.mjs';
3
+ import PrimitiveAnchor from '../primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs';
4
4
  import Circle from '../common/circle/Circle.mjs';
5
5
  import { clsx } from 'clsx';
6
6
  import { jsx } from 'react/jsx-runtime';
@@ -3,8 +3,8 @@
3
3
  var icons = require('@transferwise/icons');
4
4
  var clsx = require('clsx');
5
5
  var reactIntl = require('react-intl');
6
- require('../primitives/PrimitiveButton/PrimitiveButton.js');
7
- var PrimitiveAnchor = require('../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
6
+ require('../primitives/PrimitiveButton/src/PrimitiveButton.js');
7
+ var PrimitiveAnchor = require('../primitives/PrimitiveAnchor/src/PrimitiveAnchor.js');
8
8
  var Link_messages = require('./Link.messages.js');
9
9
  var jsxRuntime = require('react/jsx-runtime');
10
10
 
@@ -1,8 +1,8 @@
1
1
  import { NavigateAway } from '@transferwise/icons';
2
2
  import { clsx } from 'clsx';
3
3
  import { useIntl } from 'react-intl';
4
- import '../primitives/PrimitiveButton/PrimitiveButton.mjs';
5
- import PrimitiveAnchor from '../primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
4
+ import '../primitives/PrimitiveButton/src/PrimitiveButton.mjs';
5
+ import PrimitiveAnchor from '../primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs';
6
6
  import messages from './Link.messages.mjs';
7
7
  import { jsxs, jsx } from 'react/jsx-runtime';
8
8
 
package/build/main.css CHANGED
@@ -744,16 +744,23 @@ div.critical-comms .critical-comms-body {
744
744
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
745
745
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
746
746
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
747
- --Button-primary-negative-color: var(--color-contrast);
747
+ --Button-primary-negative-color: var(--color-contrast-overlay);
748
748
  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
749
749
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
750
750
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
751
751
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
752
752
  }
753
753
  .np-theme-personal--bright-green .wds-Button {
754
- --color-contrast: #FFFFFF;
754
+ --Button-primary-negative-color: var(--color-white);
755
755
  --Button-secondary-color: var(--color-interactive-control);
756
- --Button-secondary-negative-color: var(--color-contrast);
756
+ --Button-secondary-negative-color: var(--color-white);
757
+ }
758
+ .np-theme-personal--forest-green .wds-Button {
759
+ --Button-secondary-background: var(--color-interactive-neutral);
760
+ --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
761
+ --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
762
+ --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
763
+ --Button-secondary-negative-color: var(--color-contrast-overlay);
757
764
  }
758
765
  /* Button Styles */
759
766
  .wds-Button {
@@ -786,10 +793,13 @@ div.critical-comms .critical-comms-body {
786
793
  }
787
794
  .wds-Button.wds-Button--disabled,
788
795
  .wds-Button:disabled {
796
+ filter: none;
789
797
  mix-blend-mode: luminosity;
790
798
  opacity: 0.45;
791
799
  cursor: not-allowed;
792
800
  }
801
+ .wds-Button.wds-Button--disabled,
802
+ .wds-Button:disabled,
793
803
  .wds-Button.wds-Button--disabled:hover,
794
804
  .wds-Button:disabled:hover,
795
805
  .wds-Button.wds-Button--disabled:active,
@@ -54,7 +54,7 @@ const PrimitiveAnchor = /*#__PURE__*/React.forwardRef(({
54
54
  * https://www.scottohara.me/blog/2021/05/28/disabled-links.html
55
55
  */
56
56
  const anchorProps = {
57
- 'aria-disabled': disabled,
57
+ 'aria-disabled': disabled || undefined,
58
58
  className: anchorClasses,
59
59
  'data-testid': testId,
60
60
  href: disabled ? undefined : href,
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PrimitiveAnchor.js","sources":["../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport type { PrimitiveAnchorProps } from '..';\n\n/**\n * The Primitive `PrimitiveAnchor` component is customisable link element that can be\n * used in various parts of the Wise Design System internally. It supports\n * different states such as disabled and provides event handlers for common\n * interactions like click, focus, blur, mouse enter, mouse leave, and key down.\n *\n * @see {@link PrimitiveAnchor} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-anchor--docs|Storybook Wise Design}\n */\nconst PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(\n (\n {\n children,\n className,\n href,\n id,\n disabled = false,\n testId,\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const anchorClasses = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n if (disabled) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are set to handle the `disabled` state for the link:\n *\n * - `aria-disabled`: Exposes the link as disabled to assistive technologies.\n * - `href`: Removed when `disabled` is true to prevent navigation.\n * - `role`: Set to 'link' when `disabled` is true to ensure the element\n * is still exposed as a link.\n *\n * For more details, refer to Scott O'Hara's article on disabling links:\n * https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n const anchorProps = {\n 'aria-disabled': disabled || undefined,\n className: anchorClasses,\n 'data-testid': testId,\n href: disabled ? undefined : href,\n id,\n ref,\n role: disabled ? 'link' : undefined,\n rel: props.target === '_blank' ? 'noopener noreferrer' : undefined,\n onClick: handleClick,\n onFocus: handleFocus,\n onBlur: handleBlur,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <a {...anchorProps}>{children}</a>;\n },\n);\n\nPrimitiveAnchor.displayName = 'PrimitiveAnchor';\n\nexport default PrimitiveAnchor;\n"],"names":["PrimitiveAnchor","forwardRef","children","className","href","id","disabled","testId","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","anchorClasses","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","anchorProps","undefined","role","rel","target","_jsx","displayName"],"mappings":";;;;;;AAaA,MAAMA,eAAe,gBAAGC,gBAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,MAAM;EACNC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,aAAa,GAAGC,SAAI,CAACd,SAAS,CAAC,CAAA;AAErC,EAAA,MAAMe,WAAW,GAAGC,iBAAW,CAC5BC,KAA0C,IAAI;AAC7C,IAAA,IAAId,QAAQ,EAAE;MACZc,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLb,OAAO,GAAGY,KAAK,CAAC,CAAA;AAClB,KAAA;AACF,GAAC,EACD,CAACd,QAAQ,EAAEE,OAAO,CAAC,CACpB,CAAA;AAED,EAAA,MAAMc,WAAW,GAAGH,iBAAW,CAC5BC,KAA0C,IAAI;IAC7CX,OAAO,GAAGW,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACX,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMc,UAAU,GAAGJ,iBAAW,CAC3BC,KAA0C,IAAI;IAC7CV,MAAM,GAAGU,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACV,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGL,iBAAW,CACjCC,KAA0C,IAAI;IAC7CT,YAAY,GAAGS,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACT,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGN,iBAAW,CACjCC,KAA0C,IAAI;IAC7CR,YAAY,GAAGQ,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACR,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,aAAa,GAAGP,iBAAW,CAC9BC,KAA6C,IAAI;IAChDP,SAAS,GAAGO,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACP,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMc,WAAW,GAAG;IAClB,eAAe,EAAErB,QAAQ,IAAIsB,SAAS;AACtCzB,IAAAA,SAAS,EAAEa,aAAa;AACxB,IAAA,aAAa,EAAET,MAAM;AACrBH,IAAAA,IAAI,EAAEE,QAAQ,GAAGsB,SAAS,GAAGxB,IAAI;IACjCC,EAAE;IACFU,GAAG;AACHc,IAAAA,IAAI,EAAEvB,QAAQ,GAAG,MAAM,GAAGsB,SAAS;IACnCE,GAAG,EAAEhB,KAAK,CAACiB,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAGH,SAAS;AAClEpB,IAAAA,OAAO,EAAEU,WAAW;AACpBT,IAAAA,OAAO,EAAEa,WAAW;AACpBZ,IAAAA,MAAM,EAAEa,UAAU;AAClBZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,SAAS,EAAEa,aAAa;IACxB,GAAGZ,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOkB,cAAA,CAAA,GAAA,EAAA;AAAA,IAAA,GAAOL,WAAW;AAAAzB,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAI,CAAC,CAAA;AAC3C,CAAC,EACF;AAEDF,eAAe,CAACiC,WAAW,GAAG,iBAAiB;;;;"}
@@ -52,7 +52,7 @@ const PrimitiveAnchor = /*#__PURE__*/forwardRef(({
52
52
  * https://www.scottohara.me/blog/2021/05/28/disabled-links.html
53
53
  */
54
54
  const anchorProps = {
55
- 'aria-disabled': disabled,
55
+ 'aria-disabled': disabled || undefined,
56
56
  className: anchorClasses,
57
57
  'data-testid': testId,
58
58
  href: disabled ? undefined : href,
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PrimitiveAnchor.mjs","sources":["../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport type { PrimitiveAnchorProps } from '..';\n\n/**\n * The Primitive `PrimitiveAnchor` component is customisable link element that can be\n * used in various parts of the Wise Design System internally. It supports\n * different states such as disabled and provides event handlers for common\n * interactions like click, focus, blur, mouse enter, mouse leave, and key down.\n *\n * @see {@link PrimitiveAnchor} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-anchor--docs|Storybook Wise Design}\n */\nconst PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(\n (\n {\n children,\n className,\n href,\n id,\n disabled = false,\n testId,\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const anchorClasses = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n if (disabled) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are set to handle the `disabled` state for the link:\n *\n * - `aria-disabled`: Exposes the link as disabled to assistive technologies.\n * - `href`: Removed when `disabled` is true to prevent navigation.\n * - `role`: Set to 'link' when `disabled` is true to ensure the element\n * is still exposed as a link.\n *\n * For more details, refer to Scott O'Hara's article on disabling links:\n * https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n const anchorProps = {\n 'aria-disabled': disabled || undefined,\n className: anchorClasses,\n 'data-testid': testId,\n href: disabled ? undefined : href,\n id,\n ref,\n role: disabled ? 'link' : undefined,\n rel: props.target === '_blank' ? 'noopener noreferrer' : undefined,\n onClick: handleClick,\n onFocus: handleFocus,\n onBlur: handleBlur,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <a {...anchorProps}>{children}</a>;\n },\n);\n\nPrimitiveAnchor.displayName = 'PrimitiveAnchor';\n\nexport default PrimitiveAnchor;\n"],"names":["PrimitiveAnchor","forwardRef","children","className","href","id","disabled","testId","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","anchorClasses","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","anchorProps","undefined","role","rel","target","_jsx","displayName"],"mappings":";;;;AAaA,MAAMA,eAAe,gBAAGC,UAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,MAAM;EACNC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,aAAa,GAAGC,IAAI,CAACd,SAAS,CAAC,CAAA;AAErC,EAAA,MAAMe,WAAW,GAAGC,WAAW,CAC5BC,KAA0C,IAAI;AAC7C,IAAA,IAAId,QAAQ,EAAE;MACZc,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLb,OAAO,GAAGY,KAAK,CAAC,CAAA;AAClB,KAAA;AACF,GAAC,EACD,CAACd,QAAQ,EAAEE,OAAO,CAAC,CACpB,CAAA;AAED,EAAA,MAAMc,WAAW,GAAGH,WAAW,CAC5BC,KAA0C,IAAI;IAC7CX,OAAO,GAAGW,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACX,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMc,UAAU,GAAGJ,WAAW,CAC3BC,KAA0C,IAAI;IAC7CV,MAAM,GAAGU,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACV,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGL,WAAW,CACjCC,KAA0C,IAAI;IAC7CT,YAAY,GAAGS,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACT,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGN,WAAW,CACjCC,KAA0C,IAAI;IAC7CR,YAAY,GAAGQ,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACR,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,aAAa,GAAGP,WAAW,CAC9BC,KAA6C,IAAI;IAChDP,SAAS,GAAGO,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACP,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMc,WAAW,GAAG;IAClB,eAAe,EAAErB,QAAQ,IAAIsB,SAAS;AACtCzB,IAAAA,SAAS,EAAEa,aAAa;AACxB,IAAA,aAAa,EAAET,MAAM;AACrBH,IAAAA,IAAI,EAAEE,QAAQ,GAAGsB,SAAS,GAAGxB,IAAI;IACjCC,EAAE;IACFU,GAAG;AACHc,IAAAA,IAAI,EAAEvB,QAAQ,GAAG,MAAM,GAAGsB,SAAS;IACnCE,GAAG,EAAEhB,KAAK,CAACiB,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAGH,SAAS;AAClEpB,IAAAA,OAAO,EAAEU,WAAW;AACpBT,IAAAA,OAAO,EAAEa,WAAW;AACpBZ,IAAAA,MAAM,EAAEa,UAAU;AAClBZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,SAAS,EAAEa,aAAa;IACxB,GAAGZ,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOkB,GAAA,CAAA,GAAA,EAAA;AAAA,IAAA,GAAOL,WAAW;AAAAzB,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAI,CAAC,CAAA;AAC3C,CAAC,EACF;AAEDF,eAAe,CAACiC,WAAW,GAAG,iBAAiB;;;;"}
@@ -3,7 +3,7 @@
3
3
  var React = require('react');
4
4
  var clsx = require('clsx');
5
5
  var reactIntl = require('react-intl');
6
- var Button_messages = require('../../i18n/commonMessages/Button.messages.js');
6
+ var Button_messages = require('../../../i18n/commonMessages/Button.messages.js');
7
7
  var jsxRuntime = require('react/jsx-runtime');
8
8
 
9
9
  /* eslint-disable react/button-has-type */
@@ -59,7 +59,8 @@ const PrimitiveButton = /*#__PURE__*/React.forwardRef(({
59
59
  * by assistive technologies, set to 'polite' during loading.
60
60
  */
61
61
  const buttonProps = {
62
- 'aria-disabled': disabled || loading,
62
+ 'aria-disabled': loading || undefined,
63
+ 'aria-busy': loading || undefined,
63
64
  'aria-label': loading ? intl.formatMessage(Button_messages.loadingAriaLabel) : props['aria-label'],
64
65
  'aria-live': loading ? 'polite' : 'off',
65
66
  className: classNames,
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PrimitiveButton.js","sources":["../../../../src/primitives/PrimitiveButton/src/PrimitiveButton.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type */\nimport React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport messages from '../../../i18n/commonMessages/Button.messages';\nimport type { PrimitiveButtonProps } from '..';\n\n/**\n * The Primitive `PrimitiveButton` component can be used in various parts the Wise Design\n * System internally. It supports different states such as disabled and loading,\n * and provides event handlers for common interactions like click, focus, blur,\n * mouse enter, mouse leave, and keydown.\n *\n * @see {@link PrimitiveButton} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-button--docs|Storybook Wise Design}\n */\nconst PrimitiveButton = forwardRef<HTMLButtonElement, PrimitiveButtonProps>(\n (\n {\n children,\n className,\n id,\n disabled = false,\n loading = false,\n testId,\n type = 'button',\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const intl = useIntl();\n const classNames = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, loading, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are used to manage the `disabled` and `loading`\n * states for the button:\n *\n * - `aria-disabled`: Communicates to assistive technologies that the button\n * is disabled when it is either disabled or loading.\n * - `aria-label`: Provides an accessible label for the button, using a\n * localized loading message when the button is in a loading state.\n * - `aria-live`: Ensures that updates to the button's content are announced\n * by assistive technologies, set to 'polite' during loading.\n */\n const buttonProps = {\n 'aria-disabled': loading || undefined,\n 'aria-busy': loading || undefined,\n 'aria-label': loading ? intl.formatMessage(messages.loadingAriaLabel) : props['aria-label'],\n 'aria-live': (loading ? 'polite' : 'off') as 'polite' | 'off' | 'assertive' | undefined,\n className: classNames,\n 'data-testid': testId,\n disabled,\n id,\n ref,\n type,\n onBlur: handleBlur,\n onClick: handleClick,\n onFocus: handleFocus,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <button {...buttonProps}>{children}</button>;\n },\n);\n\nPrimitiveButton.displayName = 'PrimitiveButton';\n\nexport default PrimitiveButton;\n"],"names":["PrimitiveButton","forwardRef","children","className","id","disabled","loading","testId","type","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","intl","useIntl","classNames","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","buttonProps","undefined","formatMessage","messages","loadingAriaLabel","_jsx","displayName"],"mappings":"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"}
@@ -1,7 +1,7 @@
1
1
  import { forwardRef, useCallback } from 'react';
2
2
  import { clsx } from 'clsx';
3
3
  import { useIntl } from 'react-intl';
4
- import messages from '../../i18n/commonMessages/Button.messages.mjs';
4
+ import messages from '../../../i18n/commonMessages/Button.messages.mjs';
5
5
  import { jsx } from 'react/jsx-runtime';
6
6
 
7
7
  /* eslint-disable react/button-has-type */
@@ -57,7 +57,8 @@ const PrimitiveButton = /*#__PURE__*/forwardRef(({
57
57
  * by assistive technologies, set to 'polite' during loading.
58
58
  */
59
59
  const buttonProps = {
60
- 'aria-disabled': disabled || loading,
60
+ 'aria-disabled': loading || undefined,
61
+ 'aria-busy': loading || undefined,
61
62
  'aria-label': loading ? intl.formatMessage(messages.loadingAriaLabel) : props['aria-label'],
62
63
  'aria-live': loading ? 'polite' : 'off',
63
64
  className: classNames,
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PrimitiveButton.mjs","sources":["../../../../src/primitives/PrimitiveButton/src/PrimitiveButton.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type */\nimport React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport messages from '../../../i18n/commonMessages/Button.messages';\nimport type { PrimitiveButtonProps } from '..';\n\n/**\n * The Primitive `PrimitiveButton` component can be used in various parts the Wise Design\n * System internally. It supports different states such as disabled and loading,\n * and provides event handlers for common interactions like click, focus, blur,\n * mouse enter, mouse leave, and keydown.\n *\n * @see {@link PrimitiveButton} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-button--docs|Storybook Wise Design}\n */\nconst PrimitiveButton = forwardRef<HTMLButtonElement, PrimitiveButtonProps>(\n (\n {\n children,\n className,\n id,\n disabled = false,\n loading = false,\n testId,\n type = 'button',\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const intl = useIntl();\n const classNames = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, loading, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are used to manage the `disabled` and `loading`\n * states for the button:\n *\n * - `aria-disabled`: Communicates to assistive technologies that the button\n * is disabled when it is either disabled or loading.\n * - `aria-label`: Provides an accessible label for the button, using a\n * localized loading message when the button is in a loading state.\n * - `aria-live`: Ensures that updates to the button's content are announced\n * by assistive technologies, set to 'polite' during loading.\n */\n const buttonProps = {\n 'aria-disabled': loading || undefined,\n 'aria-busy': loading || undefined,\n 'aria-label': loading ? intl.formatMessage(messages.loadingAriaLabel) : props['aria-label'],\n 'aria-live': (loading ? 'polite' : 'off') as 'polite' | 'off' | 'assertive' | undefined,\n className: classNames,\n 'data-testid': testId,\n disabled,\n id,\n ref,\n type,\n onBlur: handleBlur,\n onClick: handleClick,\n onFocus: handleFocus,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <button {...buttonProps}>{children}</button>;\n },\n);\n\nPrimitiveButton.displayName = 'PrimitiveButton';\n\nexport default PrimitiveButton;\n"],"names":["PrimitiveButton","forwardRef","children","className","id","disabled","loading","testId","type","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","intl","useIntl","classNames","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","buttonProps","undefined","formatMessage","messages","loadingAriaLabel","_jsx","displayName"],"mappings":";;;;;;AAAA;AAgBA,MAAMA,eAAe,gBAAGC,UAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;AACNC,EAAAA,IAAI,GAAG,QAAQ;EACfC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;AACtB,EAAA,MAAMC,UAAU,GAAGC,IAAI,CAACjB,SAAS,CAAC,CAAA;AAElC,EAAA,MAAMkB,WAAW,GAAGC,WAAW,CAC5BC,KAA0C,IAAI;IAC7C,IAAIlB,QAAQ,IAAIC,OAAO,EAAE;MACvBiB,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLf,OAAO,GAAGc,KAAK,CAAC,CAAA;AAClB,KAAA;GACD,EACD,CAAClB,QAAQ,EAAEC,OAAO,EAAEG,OAAO,CAAC,CAC7B,CAAA;AAED,EAAA,MAAMgB,WAAW,GAAGH,WAAW,CAC5BC,KAA0C,IAAI;IAC7Cb,OAAO,GAAGa,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACb,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMgB,UAAU,GAAGJ,WAAW,CAC3BC,KAA0C,IAAI;IAC7CZ,MAAM,GAAGY,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACZ,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMgB,gBAAgB,GAAGL,WAAW,CACjCC,KAA0C,IAAI;IAC7CX,YAAY,GAAGW,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACX,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMgB,gBAAgB,GAAGN,WAAW,CACjCC,KAA0C,IAAI;IAC7CV,YAAY,GAAGU,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACV,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMgB,aAAa,GAAGP,WAAW,CAC9BC,KAA6C,IAAI;IAChDT,SAAS,GAAGS,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACT,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMgB,WAAW,GAAG;IAClB,eAAe,EAAExB,OAAO,IAAIyB,SAAS;IACrC,WAAW,EAAEzB,OAAO,IAAIyB,SAAS;AACjC,IAAA,YAAY,EAAEzB,OAAO,GAAGW,IAAI,CAACe,aAAa,CAACC,QAAQ,CAACC,gBAAgB,CAAC,GAAGnB,KAAK,CAAC,YAAY,CAAC;AAC3F,IAAA,WAAW,EAAGT,OAAO,GAAG,QAAQ,GAAG,KAAoD;AACvFH,IAAAA,SAAS,EAAEgB,UAAU;AACrB,IAAA,aAAa,EAAEZ,MAAM;IACrBF,QAAQ;IACRD,EAAE;IACFY,GAAG;IACHR,IAAI;AACJG,IAAAA,MAAM,EAAEe,UAAU;AAClBjB,IAAAA,OAAO,EAAEY,WAAW;AACpBX,IAAAA,OAAO,EAAEe,WAAW;AACpBb,IAAAA,YAAY,EAAEe,gBAAgB;AAC9Bd,IAAAA,YAAY,EAAEe,gBAAgB;AAC9Bd,IAAAA,SAAS,EAAEe,aAAa;IACxB,GAAGd,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOoB,GAAA,CAAA,QAAA,EAAA;AAAA,IAAA,GAAYL,WAAW;AAAA5B,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAS,CAAC,CAAA;AACrD,CAAC,EACF;AAEDF,eAAe,CAACoC,WAAW,GAAG,iBAAiB;;;;"}
@@ -26,16 +26,23 @@
26
26
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
27
27
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
28
28
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
29
- --Button-primary-negative-color: var(--color-contrast);
29
+ --Button-primary-negative-color: var(--color-contrast-overlay);
30
30
  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
31
31
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
32
32
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
33
33
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
34
34
  }
35
35
  .np-theme-personal--bright-green .wds-Button {
36
- --color-contrast: #FFFFFF;
36
+ --Button-primary-negative-color: var(--color-white);
37
37
  --Button-secondary-color: var(--color-interactive-control);
38
- --Button-secondary-negative-color: var(--color-contrast);
38
+ --Button-secondary-negative-color: var(--color-white);
39
+ }
40
+ .np-theme-personal--forest-green .wds-Button {
41
+ --Button-secondary-background: var(--color-interactive-neutral);
42
+ --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
43
+ --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
44
+ --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
45
+ --Button-secondary-negative-color: var(--color-contrast-overlay);
39
46
  }
40
47
  /* Button Styles */
41
48
  .wds-Button {
@@ -68,10 +75,13 @@
68
75
  }
69
76
  .wds-Button.wds-Button--disabled,
70
77
  .wds-Button:disabled {
78
+ filter: none;
71
79
  mix-blend-mode: luminosity;
72
80
  opacity: 0.45;
73
81
  cursor: not-allowed;
74
82
  }
83
+ .wds-Button.wds-Button--disabled,
84
+ .wds-Button:disabled,
75
85
  .wds-Button.wds-Button--disabled:hover,
76
86
  .wds-Button:disabled:hover,
77
87
  .wds-Button.wds-Button--disabled:active,
@@ -26,14 +26,21 @@
26
26
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
27
27
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
28
28
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
29
- --Button-primary-negative-color: var(--color-contrast);
29
+ --Button-primary-negative-color: var(--color-contrast-overlay);
30
30
  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
31
31
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
32
32
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
33
33
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
34
34
  }
35
35
  .np-theme-personal--bright-green .wds-Button {
36
- --color-contrast: #FFFFFF;
36
+ --Button-primary-negative-color: var(--color-white);
37
37
  --Button-secondary-color: var(--color-interactive-control);
38
- --Button-secondary-negative-color: var(--color-contrast);
38
+ --Button-secondary-negative-color: var(--color-white);
39
+ }
40
+ .np-theme-personal--forest-green .wds-Button {
41
+ --Button-secondary-background: var(--color-interactive-neutral);
42
+ --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
43
+ --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
44
+ --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
45
+ --Button-secondary-negative-color: var(--color-contrast-overlay);
39
46
  }
@@ -744,16 +744,23 @@ div.critical-comms .critical-comms-body {
744
744
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
745
745
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
746
746
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
747
- --Button-primary-negative-color: var(--color-contrast);
747
+ --Button-primary-negative-color: var(--color-contrast-overlay);
748
748
  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
749
749
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
750
750
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
751
751
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
752
752
  }
753
753
  .np-theme-personal--bright-green .wds-Button {
754
- --color-contrast: #FFFFFF;
754
+ --Button-primary-negative-color: var(--color-white);
755
755
  --Button-secondary-color: var(--color-interactive-control);
756
- --Button-secondary-negative-color: var(--color-contrast);
756
+ --Button-secondary-negative-color: var(--color-white);
757
+ }
758
+ .np-theme-personal--forest-green .wds-Button {
759
+ --Button-secondary-background: var(--color-interactive-neutral);
760
+ --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
761
+ --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
762
+ --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
763
+ --Button-secondary-negative-color: var(--color-contrast-overlay);
757
764
  }
758
765
  /* Button Styles */
759
766
  .wds-Button {
@@ -786,10 +793,13 @@ div.critical-comms .critical-comms-body {
786
793
  }
787
794
  .wds-Button.wds-Button--disabled,
788
795
  .wds-Button:disabled {
796
+ filter: none;
789
797
  mix-blend-mode: luminosity;
790
798
  opacity: 0.45;
791
799
  cursor: not-allowed;
792
800
  }
801
+ .wds-Button.wds-Button--disabled,
802
+ .wds-Button:disabled,
793
803
  .wds-Button.wds-Button--disabled:hover,
794
804
  .wds-Button:disabled:hover,
795
805
  .wds-Button.wds-Button--disabled:active,
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/button/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,mBAAmB,EACnB,WAAW,IAAI,cAAc,EAC9B,MAAM,gBAAgB,CAAC;AAQxB,QAAA,MAAM,MAAM,gHAqGX,CAAC;AAEF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/button/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,mBAAmB,EACnB,WAAW,IAAI,cAAc,EAC9B,MAAM,gBAAgB,CAAC;AAQxB,QAAA,MAAM,MAAM,gHAsGX,CAAC;AAEF,eAAe,MAAM,CAAC"}
@@ -1,3 +1,3 @@
1
- export { default } from './PrimitiveAnchor';
2
- export type { PrimitiveAnchorProps, PrimitiveAnchorAttributes, PrimitiveAnchorElementRef, } from './PrimitiveAnchor.types';
1
+ export { default } from './src';
2
+ export * from './src';
3
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/PrimitiveAnchor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EACV,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,GAC1B,MAAM,yBAAyB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/PrimitiveAnchor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,cAAc,OAAO,CAAC"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PrimitiveAnchor.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,IAAI,CAAC;AAE/C;;;;;;;;GAQG;AACH,QAAA,MAAM,eAAe,6GAkGpB,CAAC;AAIF,eAAe,eAAe,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { default } from './PrimitiveAnchor';
2
+ export type { PrimitiveAnchorProps, PrimitiveAnchorAttributes, PrimitiveAnchorElementRef, } from './PrimitiveAnchor.types';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/PrimitiveAnchor/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EACV,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,GAC1B,MAAM,yBAAyB,CAAC"}
@@ -1,3 +1,3 @@
1
- export { default } from './PrimitiveButton';
2
- export type { PrimitiveButtonProps, PrimitiveButtonAttributes, PrimitiveButtonElementRef, } from './PrimitiveButton.types';
1
+ export { default } from './src';
2
+ export * from './src';
3
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/PrimitiveButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EACV,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,GAC1B,MAAM,yBAAyB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/PrimitiveButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,cAAc,OAAO,CAAC"}
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import type { PrimitiveButtonProps } from '.';
2
+ import type { PrimitiveButtonProps } from '..';
3
3
  /**
4
4
  * The Primitive `PrimitiveButton` component can be used in various parts the Wise Design
5
5
  * System internally. It supports different states such as disabled and loading,
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PrimitiveButton.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/PrimitiveButton/src/PrimitiveButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAIvD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,IAAI,CAAC;AAE/C;;;;;;;;GAQG;AACH,QAAA,MAAM,eAAe,6GAsGpB,CAAC;AAIF,eAAe,eAAe,CAAC"}
@@ -1,5 +1,5 @@
1
1
  import React, { ReactNode } from 'react';
2
- import { BasePrimitiveProps, StyleProp } from '..';
2
+ import { BasePrimitiveProps, StyleProp } from '../..';
3
3
  /**
4
4
  * Type aliases for a button component.
5
5
  */
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PrimitiveButton.types.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/PrimitiveButton/src/PrimitiveButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAC;AACpG,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;AAErE;;GAEG;AACH,MAAM,WAAW,oBACf,SAAQ,kBAAkB,EACxB,SAAS,EACT,yBAAyB;IAC3B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,sCAAsC;IACtC,GAAG,CAAC,EAAE,yBAAyB,CAAC;CACjC"}
@@ -0,0 +1,3 @@
1
+ export { default } from './PrimitiveButton';
2
+ export type { PrimitiveButtonProps, PrimitiveButtonAttributes, PrimitiveButtonElementRef, } from './PrimitiveButton.types';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/PrimitiveButton/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EACV,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,GAC1B,MAAM,yBAAyB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-de92c64",
3
+ "version": "0.0.0-experimental-1f90331",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -92,12 +92,12 @@
92
92
  "rollup-preserve-directives": "^1.1.1",
93
93
  "storybook": "^8.2.2",
94
94
  "@transferwise/less-config": "3.1.0",
95
- "@transferwise/neptune-css": "0.0.0-experimental-de92c64",
95
+ "@transferwise/neptune-css": "0.0.0-experimental-1f90331",
96
96
  "@wise/components-theming": "1.6.1"
97
97
  },
98
98
  "peerDependencies": {
99
99
  "@transferwise/icons": "^3.13.1",
100
- "@transferwise/neptune-css": "0.0.0-experimental-de92c64",
100
+ "@transferwise/neptune-css": "0.0.0-experimental-1f90331",
101
101
  "@wise/art": "^2.16",
102
102
  "@wise/components-theming": "^1.0.0",
103
103
  "react": ">=18",
@@ -26,16 +26,23 @@
26
26
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
27
27
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
28
28
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
29
- --Button-primary-negative-color: var(--color-contrast);
29
+ --Button-primary-negative-color: var(--color-contrast-overlay);
30
30
  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
31
31
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
32
32
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
33
33
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
34
34
  }
35
35
  .np-theme-personal--bright-green .wds-Button {
36
- --color-contrast: #FFFFFF;
36
+ --Button-primary-negative-color: var(--color-white);
37
37
  --Button-secondary-color: var(--color-interactive-control);
38
- --Button-secondary-negative-color: var(--color-contrast);
38
+ --Button-secondary-negative-color: var(--color-white);
39
+ }
40
+ .np-theme-personal--forest-green .wds-Button {
41
+ --Button-secondary-background: var(--color-interactive-neutral);
42
+ --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
43
+ --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
44
+ --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
45
+ --Button-secondary-negative-color: var(--color-contrast-overlay);
39
46
  }
40
47
  /* Button Styles */
41
48
  .wds-Button {
@@ -68,10 +75,13 @@
68
75
  }
69
76
  .wds-Button.wds-Button--disabled,
70
77
  .wds-Button:disabled {
78
+ filter: none;
71
79
  mix-blend-mode: luminosity;
72
80
  opacity: 0.45;
73
81
  cursor: not-allowed;
74
82
  }
83
+ .wds-Button.wds-Button--disabled,
84
+ .wds-Button:disabled,
75
85
  .wds-Button.wds-Button--disabled:hover,
76
86
  .wds-Button:disabled:hover,
77
87
  .wds-Button.wds-Button--disabled:active,