@transferwise/components 46.90.1 → 46.92.0

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 (19) hide show
  1. package/build/actionOption/ActionOption.js +9 -5
  2. package/build/actionOption/ActionOption.js.map +1 -1
  3. package/build/actionOption/ActionOption.mjs +9 -5
  4. package/build/actionOption/ActionOption.mjs.map +1 -1
  5. package/build/main.css +18 -8
  6. package/build/styles/button/Button.css +18 -8
  7. package/build/styles/button/Button.vars.css +8 -8
  8. package/build/styles/main.css +18 -8
  9. package/build/types/actionOption/ActionOption.d.ts +3 -3
  10. package/build/types/actionOption/ActionOption.d.ts.map +1 -1
  11. package/package.json +2 -2
  12. package/src/actionOption/ActionOption.spec.tsx +20 -0
  13. package/src/actionOption/ActionOption.tsx +12 -5
  14. package/src/button/Button.css +18 -8
  15. package/src/button/Button.less +10 -0
  16. package/src/button/Button.story.tsx +8 -0
  17. package/src/button/Button.vars.css +8 -8
  18. package/src/button/Button.vars.less +8 -11
  19. package/src/main.css +18 -8
package/build/actionOption/ActionOption.js CHANGED
@@ -41,7 +41,8 @@ const ActionOption = ({
41
41
  showMediaAtAllSizes,
42
42
  showMediaCircle,
43
43
  isContainerAligned,
44
- as
44
+ as,
45
+ 'aria-label': ariaLabel
45
46
  }) => {
46
47
  const sharedProps = {
47
48
  media,
@@ -56,14 +57,17 @@ const ActionOption = ({
56
57
  as
57
58
  };
58
59
  const getAriaLabel = () => {
59
- const labels = [];
60
+ if (ariaLabel) {
61
+ return ariaLabel;
62
+ }
63
+ const generatedLabels = [];
60
64
  if (typeof title === 'string') {
61
- labels.push(title);
65
+ generatedLabels.push(title);
62
66
  }
63
67
  if (typeof action === 'string') {
64
- labels.push(action);
68
+ generatedLabels.push(action);
65
69
  }
66
- return labels.join(', ') || undefined;
70
+ return generatedLabels.join(', ') || undefined;
67
71
  };
68
72
  const mapPriority = priority => {
69
73
  switch (priority) {
package/build/actionOption/ActionOption.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ActionOption.js","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Button from '../button';\nimport {\n CommonProps,\n Priority,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n} from '../common';\nimport Option from '../common/Option';\nimport { ButtonPriority } from '../button/Button.types';\n\ntype ActionOptionPriority =\n | PriorityPrimary\n | PrioritySecondary\n | PriorityTertiary\n | 'secondary-send';\n\nexport type ActionOptionProps = {\n complex?: boolean;\n content?: React.ReactNode;\n disabled?: boolean;\n media?: React.ReactNode;\n showMediaAtAllSizes?: boolean;\n onClick: () => void;\n title: React.ReactNode;\n action: React.ReactNode;\n priority?: ActionOptionPriority;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n as?: React.ElementType;\n} & CommonProps;\n\nconst ActionOption = ({\n action,\n priority = Priority.PRIMARY,\n disabled,\n onClick,\n media,\n title,\n content,\n complex,\n className,\n showMediaAtAllSizes,\n showMediaCircle,\n isContainerAligned,\n as,\n}: ActionOptionProps) => {\n const sharedProps = {\n media,\n title,\n content,\n complex,\n disabled,\n showMediaAtAllSizes,\n showMediaCircle,\n className: clsx('tw-action-option', className),\n isContainerAligned,\n as,\n };\n\n const getAriaLabel = (): string | undefined => {\n const labels: string[] = [];\n\n if (typeof title === 'string') {\n labels.push(title);\n }\n\n if (typeof action === 'string') {\n labels.push(action);\n }\n\n return labels.join(', ') || undefined;\n };\n\n const mapPriority = (priority: ActionOptionPriority): ButtonPriority => {\n switch (priority) {\n case 'primary':\n return 'primary';\n case 'secondary':\n return 'secondary-neutral';\n case 'tertiary':\n return 'tertiary';\n case 'secondary-send':\n return 'secondary';\n default:\n return 'primary';\n }\n };\n\n return (\n <Option\n {...sharedProps}\n button={\n <Button\n v2\n size=\"sm\"\n priority={mapPriority(priority)}\n disabled={disabled}\n aria-label={getAriaLabel()}\n onClick={onClick}\n >\n {action}\n </Button>\n }\n />\n );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","as","sharedProps","clsx","getAriaLabel","labels","push","join","undefined","mapPriority","_jsx","Option","button","Button","v2","size","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCMA,MAAAA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;AAClBC,EAAAA,EAAAA;AAAE,CACgB,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBT,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEM,SAAI,CAAC,kBAAkB,EAAEN,SAAS,CAAC;IAC9CG,kBAAkB;AAClBC,IAAAA,EAAAA;GACD,CAAA;EAED,MAAMG,YAAY,GAAGA,MAAyB;IAC5C,MAAMC,MAAM,GAAa,EAAE,CAAA;AAE3B,IAAA,IAAI,OAAOX,KAAK,KAAK,QAAQ,EAAE;AAC7BW,MAAAA,MAAM,CAACC,IAAI,CAACZ,KAAK,CAAC,CAAA;AACpB,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BkB,MAAAA,MAAM,CAACC,IAAI,CAACnB,MAAM,CAAC,CAAA;AACrB,KAAA;AAEA,IAAA,OAAOkB,MAAM,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GACtC,CAAA;EAED,MAAMC,WAAW,GAAIrB,QAA8B,IAAoB;AACrE,IAAA,QAAQA,QAAQ;AACd,MAAA,KAAK,SAAS;AACZ,QAAA,OAAO,SAAS,CAAA;AAClB,MAAA,KAAK,WAAW;AACd,QAAA,OAAO,mBAAmB,CAAA;AAC5B,MAAA,KAAK,UAAU;AACb,QAAA,OAAO,UAAU,CAAA;AACnB,MAAA,KAAK,gBAAgB;AACnB,QAAA,OAAO,WAAW,CAAA;AACpB,MAAA;AACE,QAAA,OAAO,SAAS,CAAA;AACpB,KAAA;GACD,CAAA;EAED,oBACEsB,cAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDT,WAAW;IACfU,MAAM,eACJF,cAAA,CAACG,eAAM,EAAA;MACLC,EAAE,EAAA,IAAA;AACFC,MAAAA,IAAI,EAAC,IAAI;AACT3B,MAAAA,QAAQ,EAAEqB,WAAW,CAACrB,QAAQ,CAAE;AAChCG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYa,EAAAA,YAAY,EAAG;AAC3BZ,MAAAA,OAAO,EAAEA,OAAQ;AAAAwB,MAAAA,QAAA,EAEhB7B,MAAAA;KACK,CAAA;AACT,GAAA,CACD,CAAA;AAEN;;;;"}
1
+ {"version":3,"file":"ActionOption.js","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Button from '../button';\nimport {\n AriaLabelProperty,\n CommonProps,\n Priority,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n} from '../common';\nimport Option from '../common/Option';\nimport { ButtonPriority } from '../button/Button.types';\n\ntype ActionOptionPriority =\n | PriorityPrimary\n | PrioritySecondary\n | PriorityTertiary\n | 'secondary-send';\n\nexport type ActionOptionProps = {\n complex?: boolean;\n content?: React.ReactNode;\n disabled?: boolean;\n media?: React.ReactNode;\n showMediaAtAllSizes?: boolean;\n onClick: () => void;\n title: React.ReactNode;\n action: React.ReactNode;\n priority?: ActionOptionPriority;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n as?: React.ElementType;\n} & CommonProps &\n AriaLabelProperty;\n\nconst ActionOption = ({\n action,\n priority = Priority.PRIMARY,\n disabled,\n onClick,\n media,\n title,\n content,\n complex,\n className,\n showMediaAtAllSizes,\n showMediaCircle,\n isContainerAligned,\n as,\n 'aria-label': ariaLabel,\n}: ActionOptionProps) => {\n const sharedProps = {\n media,\n title,\n content,\n complex,\n disabled,\n showMediaAtAllSizes,\n showMediaCircle,\n className: clsx('tw-action-option', className),\n isContainerAligned,\n as,\n };\n\n const getAriaLabel = (): string | undefined => {\n if (ariaLabel) {\n return ariaLabel;\n }\n\n const generatedLabels: string[] = [];\n\n if (typeof title === 'string') {\n generatedLabels.push(title);\n }\n\n if (typeof action === 'string') {\n generatedLabels.push(action);\n }\n\n return generatedLabels.join(', ') || undefined;\n };\n\n const mapPriority = (priority: ActionOptionPriority): ButtonPriority => {\n switch (priority) {\n case 'primary':\n return 'primary';\n case 'secondary':\n return 'secondary-neutral';\n case 'tertiary':\n return 'tertiary';\n case 'secondary-send':\n return 'secondary';\n default:\n return 'primary';\n }\n };\n\n return (\n <Option\n {...sharedProps}\n button={\n <Button\n v2\n size=\"sm\"\n priority={mapPriority(priority)}\n disabled={disabled}\n aria-label={getAriaLabel()}\n onClick={onClick}\n >\n {action}\n </Button>\n }\n />\n );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","as","ariaLabel","sharedProps","clsx","getAriaLabel","generatedLabels","push","join","undefined","mapPriority","_jsx","Option","button","Button","v2","size","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCMA,MAAAA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;EAClBC,EAAE;AACF,EAAA,YAAY,EAAEC,SAAAA;AAAS,CACL,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBV,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEO,SAAI,CAAC,kBAAkB,EAAEP,SAAS,CAAC;IAC9CG,kBAAkB;AAClBC,IAAAA,EAAAA;GACD,CAAA;EAED,MAAMI,YAAY,GAAGA,MAAyB;AAC5C,IAAA,IAAIH,SAAS,EAAE;AACb,MAAA,OAAOA,SAAS,CAAA;AAClB,KAAA;IAEA,MAAMI,eAAe,GAAa,EAAE,CAAA;AAEpC,IAAA,IAAI,OAAOZ,KAAK,KAAK,QAAQ,EAAE;AAC7BY,MAAAA,eAAe,CAACC,IAAI,CAACb,KAAK,CAAC,CAAA;AAC7B,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BmB,MAAAA,eAAe,CAACC,IAAI,CAACpB,MAAM,CAAC,CAAA;AAC9B,KAAA;AAEA,IAAA,OAAOmB,eAAe,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GAC/C,CAAA;EAED,MAAMC,WAAW,GAAItB,QAA8B,IAAoB;AACrE,IAAA,QAAQA,QAAQ;AACd,MAAA,KAAK,SAAS;AACZ,QAAA,OAAO,SAAS,CAAA;AAClB,MAAA,KAAK,WAAW;AACd,QAAA,OAAO,mBAAmB,CAAA;AAC5B,MAAA,KAAK,UAAU;AACb,QAAA,OAAO,UAAU,CAAA;AACnB,MAAA,KAAK,gBAAgB;AACnB,QAAA,OAAO,WAAW,CAAA;AACpB,MAAA;AACE,QAAA,OAAO,SAAS,CAAA;AACpB,KAAA;GACD,CAAA;EAED,oBACEuB,cAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDT,WAAW;IACfU,MAAM,eACJF,cAAA,CAACG,eAAM,EAAA;MACLC,EAAE,EAAA,IAAA;AACFC,MAAAA,IAAI,EAAC,IAAI;AACT5B,MAAAA,QAAQ,EAAEsB,WAAW,CAACtB,QAAQ,CAAE;AAChCG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYc,EAAAA,YAAY,EAAG;AAC3Bb,MAAAA,OAAO,EAAEA,OAAQ;AAAAyB,MAAAA,QAAA,EAEhB9B,MAAAA;KACK,CAAA;AACT,GAAA,CACD,CAAA;AAEN;;;;"}
package/build/actionOption/ActionOption.mjs CHANGED
@@ -39,7 +39,8 @@ const ActionOption = ({
39
39
  showMediaAtAllSizes,
40
40
  showMediaCircle,
41
41
  isContainerAligned,
42
- as
42
+ as,
43
+ 'aria-label': ariaLabel
43
44
  }) => {
44
45
  const sharedProps = {
45
46
  media,
@@ -54,14 +55,17 @@ const ActionOption = ({
54
55
  as
55
56
  };
56
57
  const getAriaLabel = () => {
57
- const labels = [];
58
+ if (ariaLabel) {
59
+ return ariaLabel;
60
+ }
61
+ const generatedLabels = [];
58
62
  if (typeof title === 'string') {
59
- labels.push(title);
63
+ generatedLabels.push(title);
60
64
  }
61
65
  if (typeof action === 'string') {
62
- labels.push(action);
66
+ generatedLabels.push(action);
63
67
  }
64
- return labels.join(', ') || undefined;
68
+ return generatedLabels.join(', ') || undefined;
65
69
  };
66
70
  const mapPriority = priority => {
67
71
  switch (priority) {
package/build/actionOption/ActionOption.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ActionOption.mjs","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Button from '../button';\nimport {\n CommonProps,\n Priority,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n} from '../common';\nimport Option from '../common/Option';\nimport { ButtonPriority } from '../button/Button.types';\n\ntype ActionOptionPriority =\n | PriorityPrimary\n | PrioritySecondary\n | PriorityTertiary\n | 'secondary-send';\n\nexport type ActionOptionProps = {\n complex?: boolean;\n content?: React.ReactNode;\n disabled?: boolean;\n media?: React.ReactNode;\n showMediaAtAllSizes?: boolean;\n onClick: () => void;\n title: React.ReactNode;\n action: React.ReactNode;\n priority?: ActionOptionPriority;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n as?: React.ElementType;\n} & CommonProps;\n\nconst ActionOption = ({\n action,\n priority = Priority.PRIMARY,\n disabled,\n onClick,\n media,\n title,\n content,\n complex,\n className,\n showMediaAtAllSizes,\n showMediaCircle,\n isContainerAligned,\n as,\n}: ActionOptionProps) => {\n const sharedProps = {\n media,\n title,\n content,\n complex,\n disabled,\n showMediaAtAllSizes,\n showMediaCircle,\n className: clsx('tw-action-option', className),\n isContainerAligned,\n as,\n };\n\n const getAriaLabel = (): string | undefined => {\n const labels: string[] = [];\n\n if (typeof title === 'string') {\n labels.push(title);\n }\n\n if (typeof action === 'string') {\n labels.push(action);\n }\n\n return labels.join(', ') || undefined;\n };\n\n const mapPriority = (priority: ActionOptionPriority): ButtonPriority => {\n switch (priority) {\n case 'primary':\n return 'primary';\n case 'secondary':\n return 'secondary-neutral';\n case 'tertiary':\n return 'tertiary';\n case 'secondary-send':\n return 'secondary';\n default:\n return 'primary';\n }\n };\n\n return (\n <Option\n {...sharedProps}\n button={\n <Button\n v2\n size=\"sm\"\n priority={mapPriority(priority)}\n disabled={disabled}\n aria-label={getAriaLabel()}\n onClick={onClick}\n >\n {action}\n </Button>\n }\n />\n );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","as","sharedProps","clsx","getAriaLabel","labels","push","join","undefined","mapPriority","_jsx","Option","button","Button","v2","size","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCMA,MAAAA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;AAClBC,EAAAA,EAAAA;AAAE,CACgB,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBT,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEM,IAAI,CAAC,kBAAkB,EAAEN,SAAS,CAAC;IAC9CG,kBAAkB;AAClBC,IAAAA,EAAAA;GACD,CAAA;EAED,MAAMG,YAAY,GAAGA,MAAyB;IAC5C,MAAMC,MAAM,GAAa,EAAE,CAAA;AAE3B,IAAA,IAAI,OAAOX,KAAK,KAAK,QAAQ,EAAE;AAC7BW,MAAAA,MAAM,CAACC,IAAI,CAACZ,KAAK,CAAC,CAAA;AACpB,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BkB,MAAAA,MAAM,CAACC,IAAI,CAACnB,MAAM,CAAC,CAAA;AACrB,KAAA;AAEA,IAAA,OAAOkB,MAAM,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GACtC,CAAA;EAED,MAAMC,WAAW,GAAIrB,QAA8B,IAAoB;AACrE,IAAA,QAAQA,QAAQ;AACd,MAAA,KAAK,SAAS;AACZ,QAAA,OAAO,SAAS,CAAA;AAClB,MAAA,KAAK,WAAW;AACd,QAAA,OAAO,mBAAmB,CAAA;AAC5B,MAAA,KAAK,UAAU;AACb,QAAA,OAAO,UAAU,CAAA;AACnB,MAAA,KAAK,gBAAgB;AACnB,QAAA,OAAO,WAAW,CAAA;AACpB,MAAA;AACE,QAAA,OAAO,SAAS,CAAA;AACpB,KAAA;GACD,CAAA;EAED,oBACEsB,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDT,WAAW;IACfU,MAAM,eACJF,GAAA,CAACG,MAAM,EAAA;MACLC,EAAE,EAAA,IAAA;AACFC,MAAAA,IAAI,EAAC,IAAI;AACT3B,MAAAA,QAAQ,EAAEqB,WAAW,CAACrB,QAAQ,CAAE;AAChCG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYa,EAAAA,YAAY,EAAG;AAC3BZ,MAAAA,OAAO,EAAEA,OAAQ;AAAAwB,MAAAA,QAAA,EAEhB7B,MAAAA;KACK,CAAA;AACT,GAAA,CACD,CAAA;AAEN;;;;"}
1
+ {"version":3,"file":"ActionOption.mjs","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Button from '../button';\nimport {\n AriaLabelProperty,\n CommonProps,\n Priority,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n} from '../common';\nimport Option from '../common/Option';\nimport { ButtonPriority } from '../button/Button.types';\n\ntype ActionOptionPriority =\n | PriorityPrimary\n | PrioritySecondary\n | PriorityTertiary\n | 'secondary-send';\n\nexport type ActionOptionProps = {\n complex?: boolean;\n content?: React.ReactNode;\n disabled?: boolean;\n media?: React.ReactNode;\n showMediaAtAllSizes?: boolean;\n onClick: () => void;\n title: React.ReactNode;\n action: React.ReactNode;\n priority?: ActionOptionPriority;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n as?: React.ElementType;\n} & CommonProps &\n AriaLabelProperty;\n\nconst ActionOption = ({\n action,\n priority = Priority.PRIMARY,\n disabled,\n onClick,\n media,\n title,\n content,\n complex,\n className,\n showMediaAtAllSizes,\n showMediaCircle,\n isContainerAligned,\n as,\n 'aria-label': ariaLabel,\n}: ActionOptionProps) => {\n const sharedProps = {\n media,\n title,\n content,\n complex,\n disabled,\n showMediaAtAllSizes,\n showMediaCircle,\n className: clsx('tw-action-option', className),\n isContainerAligned,\n as,\n };\n\n const getAriaLabel = (): string | undefined => {\n if (ariaLabel) {\n return ariaLabel;\n }\n\n const generatedLabels: string[] = [];\n\n if (typeof title === 'string') {\n generatedLabels.push(title);\n }\n\n if (typeof action === 'string') {\n generatedLabels.push(action);\n }\n\n return generatedLabels.join(', ') || undefined;\n };\n\n const mapPriority = (priority: ActionOptionPriority): ButtonPriority => {\n switch (priority) {\n case 'primary':\n return 'primary';\n case 'secondary':\n return 'secondary-neutral';\n case 'tertiary':\n return 'tertiary';\n case 'secondary-send':\n return 'secondary';\n default:\n return 'primary';\n }\n };\n\n return (\n <Option\n {...sharedProps}\n button={\n <Button\n v2\n size=\"sm\"\n priority={mapPriority(priority)}\n disabled={disabled}\n aria-label={getAriaLabel()}\n onClick={onClick}\n >\n {action}\n </Button>\n }\n />\n );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","as","ariaLabel","sharedProps","clsx","getAriaLabel","generatedLabels","push","join","undefined","mapPriority","_jsx","Option","button","Button","v2","size","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCMA,MAAAA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;EAClBC,EAAE;AACF,EAAA,YAAY,EAAEC,SAAAA;AAAS,CACL,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBV,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEO,IAAI,CAAC,kBAAkB,EAAEP,SAAS,CAAC;IAC9CG,kBAAkB;AAClBC,IAAAA,EAAAA;GACD,CAAA;EAED,MAAMI,YAAY,GAAGA,MAAyB;AAC5C,IAAA,IAAIH,SAAS,EAAE;AACb,MAAA,OAAOA,SAAS,CAAA;AAClB,KAAA;IAEA,MAAMI,eAAe,GAAa,EAAE,CAAA;AAEpC,IAAA,IAAI,OAAOZ,KAAK,KAAK,QAAQ,EAAE;AAC7BY,MAAAA,eAAe,CAACC,IAAI,CAACb,KAAK,CAAC,CAAA;AAC7B,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BmB,MAAAA,eAAe,CAACC,IAAI,CAACpB,MAAM,CAAC,CAAA;AAC9B,KAAA;AAEA,IAAA,OAAOmB,eAAe,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GAC/C,CAAA;EAED,MAAMC,WAAW,GAAItB,QAA8B,IAAoB;AACrE,IAAA,QAAQA,QAAQ;AACd,MAAA,KAAK,SAAS;AACZ,QAAA,OAAO,SAAS,CAAA;AAClB,MAAA,KAAK,WAAW;AACd,QAAA,OAAO,mBAAmB,CAAA;AAC5B,MAAA,KAAK,UAAU;AACb,QAAA,OAAO,UAAU,CAAA;AACnB,MAAA,KAAK,gBAAgB;AACnB,QAAA,OAAO,WAAW,CAAA;AACpB,MAAA;AACE,QAAA,OAAO,SAAS,CAAA;AACpB,KAAA;GACD,CAAA;EAED,oBACEuB,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDT,WAAW;IACfU,MAAM,eACJF,GAAA,CAACG,MAAM,EAAA;MACLC,EAAE,EAAA,IAAA;AACFC,MAAAA,IAAI,EAAC,IAAI;AACT5B,MAAAA,QAAQ,EAAEsB,WAAW,CAACtB,QAAQ,CAAE;AAChCG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYc,EAAAA,YAAY,EAAG;AAC3Bb,MAAAA,OAAO,EAAEA,OAAQ;AAAAyB,MAAAA,QAAA,EAEhB9B,MAAAA;KACK,CAAA;AACT,GAAA,CACD,CAAA;AAEN;;;;"}
package/build/main.css CHANGED
@@ -690,6 +690,8 @@
690
690
  --Button-background-hover: var(--color-interactive-accent-hover);
691
691
  --Button-background-active: var(--color-interactive-accent-active);
692
692
  --Button-color: var(--color-interactive-control);
693
+ --Button-color-hover: var(--color-interactive-control-hover);
694
+ --Button-color-active: var(--color-interactive-control-active);
693
695
  --Button-border-radius: var(--radius-full);
694
696
  --Button-label-gap: var(--size-4);
695
697
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -702,6 +704,8 @@
702
704
  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
703
705
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
704
706
  --Button-secondary-color: var(--color-interactive-primary);
707
+ --Button-secondary-color-hover: var(--color-interactive-primary-hover);
708
+ --Button-secondary-color-active: var(--color-interactive-primary-active);
705
709
  --Button-secondary-neutral-background: var(--color-background-neutral);
706
710
  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
707
711
  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
@@ -710,6 +714,8 @@
710
714
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
711
715
  --Button-tertiary-background-active: var(--color-background-screen-active);
712
716
  --Button-tertiary-color: var(--color-interactive-primary);
717
+ --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
718
+ --Button-tertiary-color-active: var(--color-interactive-primary-active);
713
719
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
714
720
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
715
721
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
@@ -718,19 +724,13 @@
718
724
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
719
725
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
720
726
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
727
+ --Button-secondary-negative-color-hover: var(--color-sentiment-negative-primary-hover);
728
+ --Button-secondary-negative-color-active: var(--color-sentiment-negative-primary-active);
721
729
  }
722
730
  .np-theme-personal--bright-green .wds-Button {
723
731
  --Button-primary-negative-color: var(--color-white);
724
- --Button-secondary-color: var(--color-interactive-control);
725
732
  --Button-secondary-negative-color: var(--color-white);
726
733
  }
727
- .np-theme-personal--forest-green .wds-Button {
728
- --Button-secondary-background: var(--color-interactive-neutral);
729
- --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
730
- --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
731
- --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
732
- --Button-secondary-negative-color: var(--color-contrast-overlay);
733
- }
734
734
  /* Button Styles */
735
735
  .wds-Button {
736
736
  display: inline-flex;
@@ -761,9 +761,11 @@
761
761
  color: var(--Button-color);
762
762
  }
763
763
  .wds-Button:hover {
764
+ --Button-color: var(--Button-color-hover);
764
765
  background-color: var(--Button-background-hover);
765
766
  }
766
767
  .wds-Button:active {
768
+ --Button-color: var(--Button-color-active);
767
769
  background-color: var(--Button-background-active);
768
770
  }
769
771
  .wds-Button.wds-Button--disabled,
@@ -786,12 +788,16 @@
786
788
  --Button-background-hover: var(--Button-secondary-background-hover);
787
789
  --Button-background-active: var(--Button-secondary-background-active);
788
790
  --Button-color: var(--Button-secondary-color);
791
+ --Button-color-hover: var(--Button-secondary-color-hover);
792
+ --Button-color-active: var(--Button-secondary-color-active);
789
793
  }
790
794
  .wds-Button--secondary-neutral {
791
795
  --Button-background: var(--Button-secondary-neutral-background);
792
796
  --Button-background-hover: var(--Button-secondary-neutral-background-hover);
793
797
  --Button-background-active: var(--Button-secondary-neutral-background-active);
794
798
  --Button-color: var(--Button-secondary-neutral-color);
799
+ --Button-color-hover: var(--Button-secondary-neutral-color);
800
+ --Button-color-active: var(--Button-secondary-neutral-color);
795
801
  }
796
802
  .wds-Button--secondary-neutral .wds-Button-icon--end {
797
803
  color: var(--color-interactive-primary);
@@ -801,6 +807,8 @@
801
807
  --Button-background-hover: var(--Button-tertiary-background-hover);
802
808
  --Button-background-active: var(--Button-tertiary-background-active);
803
809
  --Button-color: var(--Button-tertiary-color);
810
+ --Button-color-hover: var(--Button-tertiary-color-hover);
811
+ --Button-color-active: var(--Button-tertiary-color-active);
804
812
  }
805
813
  .wds-Button--tertiary .wds-Button-labelText,
806
814
  .wds-Button--tertiary:hover .wds-Button-labelText,
@@ -822,6 +830,8 @@
822
830
  --Button-background-hover: var(--Button-secondary-negative-background-hover);
823
831
  --Button-background-active: var(--Button-secondary-negative-background-active);
824
832
  --Button-color: var(--Button-secondary-negative-color);
833
+ --Button-color-hover: var(--Button-secondary-negative-color-hover);
834
+ --Button-color-active: var(--Button-secondary-negative-color-active);
825
835
  }
826
836
  .wds-Button--large {
827
837
  padding: var(--Button-large-padding);
package/build/styles/button/Button.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
5
5
  --Button-color: var(--color-interactive-control);
6
+ --Button-color-hover: var(--color-interactive-control-hover);
7
+ --Button-color-active: var(--color-interactive-control-active);
6
8
  --Button-border-radius: var(--radius-full);
7
9
  --Button-label-gap: var(--size-4);
8
10
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -15,6 +17,8 @@
15
17
  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
16
18
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
17
19
  --Button-secondary-color: var(--color-interactive-primary);
20
+ --Button-secondary-color-hover: var(--color-interactive-primary-hover);
21
+ --Button-secondary-color-active: var(--color-interactive-primary-active);
18
22
  --Button-secondary-neutral-background: var(--color-background-neutral);
19
23
  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
20
24
  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
@@ -23,6 +27,8 @@
23
27
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
24
28
  --Button-tertiary-background-active: var(--color-background-screen-active);
25
29
  --Button-tertiary-color: var(--color-interactive-primary);
30
+ --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
31
+ --Button-tertiary-color-active: var(--color-interactive-primary-active);
26
32
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
27
33
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
28
34
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
@@ -31,19 +37,13 @@
31
37
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
32
38
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
33
39
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
40
+ --Button-secondary-negative-color-hover: var(--color-sentiment-negative-primary-hover);
41
+ --Button-secondary-negative-color-active: var(--color-sentiment-negative-primary-active);
34
42
  }
35
43
  .np-theme-personal--bright-green .wds-Button {
36
44
  --Button-primary-negative-color: var(--color-white);
37
- --Button-secondary-color: var(--color-interactive-control);
38
45
  --Button-secondary-negative-color: var(--color-white);
39
46
  }
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);
46
- }
47
47
  /* Button Styles */
48
48
  .wds-Button {
49
49
  display: inline-flex;
@@ -74,9 +74,11 @@
74
74
  color: var(--Button-color);
75
75
  }
76
76
  .wds-Button:hover {
77
+ --Button-color: var(--Button-color-hover);
77
78
  background-color: var(--Button-background-hover);
78
79
  }
79
80
  .wds-Button:active {
81
+ --Button-color: var(--Button-color-active);
80
82
  background-color: var(--Button-background-active);
81
83
  }
82
84
  .wds-Button.wds-Button--disabled,
@@ -99,12 +101,16 @@
99
101
  --Button-background-hover: var(--Button-secondary-background-hover);
100
102
  --Button-background-active: var(--Button-secondary-background-active);
101
103
  --Button-color: var(--Button-secondary-color);
104
+ --Button-color-hover: var(--Button-secondary-color-hover);
105
+ --Button-color-active: var(--Button-secondary-color-active);
102
106
  }
103
107
  .wds-Button--secondary-neutral {
104
108
  --Button-background: var(--Button-secondary-neutral-background);
105
109
  --Button-background-hover: var(--Button-secondary-neutral-background-hover);
106
110
  --Button-background-active: var(--Button-secondary-neutral-background-active);
107
111
  --Button-color: var(--Button-secondary-neutral-color);
112
+ --Button-color-hover: var(--Button-secondary-neutral-color);
113
+ --Button-color-active: var(--Button-secondary-neutral-color);
108
114
  }
109
115
  .wds-Button--secondary-neutral .wds-Button-icon--end {
110
116
  color: var(--color-interactive-primary);
@@ -114,6 +120,8 @@
114
120
  --Button-background-hover: var(--Button-tertiary-background-hover);
115
121
  --Button-background-active: var(--Button-tertiary-background-active);
116
122
  --Button-color: var(--Button-tertiary-color);
123
+ --Button-color-hover: var(--Button-tertiary-color-hover);
124
+ --Button-color-active: var(--Button-tertiary-color-active);
117
125
  }
118
126
  .wds-Button--tertiary .wds-Button-labelText,
119
127
  .wds-Button--tertiary:hover .wds-Button-labelText,
@@ -135,6 +143,8 @@
135
143
  --Button-background-hover: var(--Button-secondary-negative-background-hover);
136
144
  --Button-background-active: var(--Button-secondary-negative-background-active);
137
145
  --Button-color: var(--Button-secondary-negative-color);
146
+ --Button-color-hover: var(--Button-secondary-negative-color-hover);
147
+ --Button-color-active: var(--Button-secondary-negative-color-active);
138
148
  }
139
149
  .wds-Button--large {
140
150
  padding: var(--Button-large-padding);
package/build/styles/button/Button.vars.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
5
5
  --Button-color: var(--color-interactive-control);
6
+ --Button-color-hover: var(--color-interactive-control-hover);
7
+ --Button-color-active: var(--color-interactive-control-active);
6
8
  --Button-border-radius: var(--radius-full);
7
9
  --Button-label-gap: var(--size-4);
8
10
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -15,6 +17,8 @@
15
17
  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
16
18
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
17
19
  --Button-secondary-color: var(--color-interactive-primary);
20
+ --Button-secondary-color-hover: var(--color-interactive-primary-hover);
21
+ --Button-secondary-color-active: var(--color-interactive-primary-active);
18
22
  --Button-secondary-neutral-background: var(--color-background-neutral);
19
23
  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
20
24
  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
@@ -23,6 +27,8 @@
23
27
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
24
28
  --Button-tertiary-background-active: var(--color-background-screen-active);
25
29
  --Button-tertiary-color: var(--color-interactive-primary);
30
+ --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
31
+ --Button-tertiary-color-active: var(--color-interactive-primary-active);
26
32
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
27
33
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
28
34
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
@@ -31,16 +37,10 @@
31
37
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
32
38
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
33
39
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
40
+ --Button-secondary-negative-color-hover: var(--color-sentiment-negative-primary-hover);
41
+ --Button-secondary-negative-color-active: var(--color-sentiment-negative-primary-active);
34
42
  }
35
43
  .np-theme-personal--bright-green .wds-Button {
36
44
  --Button-primary-negative-color: var(--color-white);
37
- --Button-secondary-color: var(--color-interactive-control);
38
45
  --Button-secondary-negative-color: var(--color-white);
39
46
  }
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);
46
- }
package/build/styles/main.css CHANGED
@@ -690,6 +690,8 @@
690
690
  --Button-background-hover: var(--color-interactive-accent-hover);
691
691
  --Button-background-active: var(--color-interactive-accent-active);
692
692
  --Button-color: var(--color-interactive-control);
693
+ --Button-color-hover: var(--color-interactive-control-hover);
694
+ --Button-color-active: var(--color-interactive-control-active);
693
695
  --Button-border-radius: var(--radius-full);
694
696
  --Button-label-gap: var(--size-4);
695
697
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -702,6 +704,8 @@
702
704
  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
703
705
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
704
706
  --Button-secondary-color: var(--color-interactive-primary);
707
+ --Button-secondary-color-hover: var(--color-interactive-primary-hover);
708
+ --Button-secondary-color-active: var(--color-interactive-primary-active);
705
709
  --Button-secondary-neutral-background: var(--color-background-neutral);
706
710
  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
707
711
  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
@@ -710,6 +714,8 @@
710
714
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
711
715
  --Button-tertiary-background-active: var(--color-background-screen-active);
712
716
  --Button-tertiary-color: var(--color-interactive-primary);
717
+ --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
718
+ --Button-tertiary-color-active: var(--color-interactive-primary-active);
713
719
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
714
720
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
715
721
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
@@ -718,19 +724,13 @@
718
724
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
719
725
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
720
726
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
727
+ --Button-secondary-negative-color-hover: var(--color-sentiment-negative-primary-hover);
728
+ --Button-secondary-negative-color-active: var(--color-sentiment-negative-primary-active);
721
729
  }
722
730
  .np-theme-personal--bright-green .wds-Button {
723
731
  --Button-primary-negative-color: var(--color-white);
724
- --Button-secondary-color: var(--color-interactive-control);
725
732
  --Button-secondary-negative-color: var(--color-white);
726
733
  }
727
- .np-theme-personal--forest-green .wds-Button {
728
- --Button-secondary-background: var(--color-interactive-neutral);
729
- --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
730
- --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
731
- --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
732
- --Button-secondary-negative-color: var(--color-contrast-overlay);
733
- }
734
734
  /* Button Styles */
735
735
  .wds-Button {
736
736
  display: inline-flex;
@@ -761,9 +761,11 @@
761
761
  color: var(--Button-color);
762
762
  }
763
763
  .wds-Button:hover {
764
+ --Button-color: var(--Button-color-hover);
764
765
  background-color: var(--Button-background-hover);
765
766
  }
766
767
  .wds-Button:active {
768
+ --Button-color: var(--Button-color-active);
767
769
  background-color: var(--Button-background-active);
768
770
  }
769
771
  .wds-Button.wds-Button--disabled,
@@ -786,12 +788,16 @@
786
788
  --Button-background-hover: var(--Button-secondary-background-hover);
787
789
  --Button-background-active: var(--Button-secondary-background-active);
788
790
  --Button-color: var(--Button-secondary-color);
791
+ --Button-color-hover: var(--Button-secondary-color-hover);
792
+ --Button-color-active: var(--Button-secondary-color-active);
789
793
  }
790
794
  .wds-Button--secondary-neutral {
791
795
  --Button-background: var(--Button-secondary-neutral-background);
792
796
  --Button-background-hover: var(--Button-secondary-neutral-background-hover);
793
797
  --Button-background-active: var(--Button-secondary-neutral-background-active);
794
798
  --Button-color: var(--Button-secondary-neutral-color);
799
+ --Button-color-hover: var(--Button-secondary-neutral-color);
800
+ --Button-color-active: var(--Button-secondary-neutral-color);
795
801
  }
796
802
  .wds-Button--secondary-neutral .wds-Button-icon--end {
797
803
  color: var(--color-interactive-primary);
@@ -801,6 +807,8 @@
801
807
  --Button-background-hover: var(--Button-tertiary-background-hover);
802
808
  --Button-background-active: var(--Button-tertiary-background-active);
803
809
  --Button-color: var(--Button-tertiary-color);
810
+ --Button-color-hover: var(--Button-tertiary-color-hover);
811
+ --Button-color-active: var(--Button-tertiary-color-active);
804
812
  }
805
813
  .wds-Button--tertiary .wds-Button-labelText,
806
814
  .wds-Button--tertiary:hover .wds-Button-labelText,
@@ -822,6 +830,8 @@
822
830
  --Button-background-hover: var(--Button-secondary-negative-background-hover);
823
831
  --Button-background-active: var(--Button-secondary-negative-background-active);
824
832
  --Button-color: var(--Button-secondary-negative-color);
833
+ --Button-color-hover: var(--Button-secondary-negative-color-hover);
834
+ --Button-color-active: var(--Button-secondary-negative-color-active);
825
835
  }
826
836
  .wds-Button--large {
827
837
  padding: var(--Button-large-padding);
package/build/types/actionOption/ActionOption.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { CommonProps, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';
1
+ import { AriaLabelProperty, CommonProps, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';
2
2
  type ActionOptionPriority = PriorityPrimary | PrioritySecondary | PriorityTertiary | 'secondary-send';
3
3
  export type ActionOptionProps = {
4
4
  complex?: boolean;
@@ -13,7 +13,7 @@ export type ActionOptionProps = {
13
13
  showMediaCircle?: boolean;
14
14
  isContainerAligned?: boolean;
15
15
  as?: React.ElementType;
16
- } & CommonProps;
17
- declare const ActionOption: ({ action, priority, disabled, onClick, media, title, content, complex, className, showMediaAtAllSizes, showMediaCircle, isContainerAligned, as, }: ActionOptionProps) => import("react").JSX.Element;
16
+ } & CommonProps & AriaLabelProperty;
17
+ declare const ActionOption: ({ action, priority, disabled, onClick, media, title, content, complex, className, showMediaAtAllSizes, showMediaCircle, isContainerAligned, as, "aria-label": ariaLabel, }: ActionOptionProps) => import("react").JSX.Element;
18
18
  export default ActionOption;
19
19
  //# sourceMappingURL=ActionOption.d.ts.map
package/build/types/actionOption/ActionOption.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ActionOption.d.ts","sourceRoot":"","sources":["../../../src/actionOption/ActionOption.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,EAEX,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,WAAW,CAAC;AAInB,KAAK,oBAAoB,GACrB,eAAe,GACf,iBAAiB,GACjB,gBAAgB,GAChB,gBAAgB,CAAC;AAErB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACxB,GAAG,WAAW,CAAC;AAEhB,QAAA,MAAM,YAAY,sJAcf,iBAAiB,gCA4DnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"ActionOption.d.ts","sourceRoot":"","sources":["../../../src/actionOption/ActionOption.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,iBAAiB,EACjB,WAAW,EAEX,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,WAAW,CAAC;AAInB,KAAK,oBAAoB,GACrB,eAAe,GACf,iBAAiB,GACjB,gBAAgB,GAChB,gBAAgB,CAAC;AAErB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACxB,GAAG,WAAW,GACb,iBAAiB,CAAC;AAEpB,QAAA,MAAM,YAAY,+KAef,iBAAiB,gCAgEnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "46.90.1",
3
+ "version": "46.92.0",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -92,7 +92,7 @@
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": "14.21.1",
95
+ "@transferwise/neptune-css": "14.22.0",
96
96
  "@wise/components-theming": "1.6.1"
97
97
  },
98
98
  "peerDependencies": {
package/src/actionOption/ActionOption.spec.tsx CHANGED
@@ -96,4 +96,24 @@ describe('ActionOption', () => {
96
96
 
97
97
  expect(document.querySelector('.np-option__container-aligned')).toBeInTheDocument();
98
98
  });
99
+
100
+ it('uses the aria-label property', () => {
101
+ render(
102
+ <ActionOption
103
+ media={<FastFlag data-testid="fast-flag" />}
104
+ title={<span>title</span>}
105
+ content="content"
106
+ action={<span>action</span>}
107
+ isContainerAligned
108
+ aria-label="aria label"
109
+ onClick={() => {}}
110
+ />,
111
+ );
112
+
113
+ expect(
114
+ screen.getByRole('button', {
115
+ name: /aria label/i,
116
+ }),
117
+ ).toBeInTheDocument();
118
+ });
99
119
  });
package/src/actionOption/ActionOption.tsx CHANGED
@@ -2,6 +2,7 @@ import { clsx } from 'clsx';
2
2
 
3
3
  import Button from '../button';
4
4
  import {
5
+ AriaLabelProperty,
5
6
  CommonProps,
6
7
  Priority,
7
8
  PriorityPrimary,
@@ -30,7 +31,8 @@ export type ActionOptionProps = {
30
31
  showMediaCircle?: boolean;
31
32
  isContainerAligned?: boolean;
32
33
  as?: React.ElementType;
33
- } & CommonProps;
34
+ } & CommonProps &
35
+ AriaLabelProperty;
34
36
 
35
37
  const ActionOption = ({
36
38
  action,
@@ -46,6 +48,7 @@ const ActionOption = ({
46
48
  showMediaCircle,
47
49
  isContainerAligned,
48
50
  as,
51
+ 'aria-label': ariaLabel,
49
52
  }: ActionOptionProps) => {
50
53
  const sharedProps = {
51
54
  media,
@@ -61,17 +64,21 @@ const ActionOption = ({
61
64
  };
62
65
 
63
66
  const getAriaLabel = (): string | undefined => {
64
- const labels: string[] = [];
67
+ if (ariaLabel) {
68
+ return ariaLabel;
69
+ }
70
+
71
+ const generatedLabels: string[] = [];
65
72
 
66
73
  if (typeof title === 'string') {
67
- labels.push(title);
74
+ generatedLabels.push(title);
68
75
  }
69
76
 
70
77
  if (typeof action === 'string') {
71
- labels.push(action);
78
+ generatedLabels.push(action);
72
79
  }
73
80
 
74
- return labels.join(', ') || undefined;
81
+ return generatedLabels.join(', ') || undefined;
75
82
  };
76
83
 
77
84
  const mapPriority = (priority: ActionOptionPriority): ButtonPriority => {
package/src/button/Button.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
5
5
  --Button-color: var(--color-interactive-control);
6
+ --Button-color-hover: var(--color-interactive-control-hover);
7
+ --Button-color-active: var(--color-interactive-control-active);
6
8
  --Button-border-radius: var(--radius-full);
7
9
  --Button-label-gap: var(--size-4);
8
10
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -15,6 +17,8 @@
15
17
  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
16
18
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
17
19
  --Button-secondary-color: var(--color-interactive-primary);
20
+ --Button-secondary-color-hover: var(--color-interactive-primary-hover);
21
+ --Button-secondary-color-active: var(--color-interactive-primary-active);
18
22
  --Button-secondary-neutral-background: var(--color-background-neutral);
19
23
  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
20
24
  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
@@ -23,6 +27,8 @@
23
27
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
24
28
  --Button-tertiary-background-active: var(--color-background-screen-active);
25
29
  --Button-tertiary-color: var(--color-interactive-primary);
30
+ --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
31
+ --Button-tertiary-color-active: var(--color-interactive-primary-active);
26
32
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
27
33
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
28
34
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
@@ -31,19 +37,13 @@
31
37
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
32
38
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
33
39
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
40
+ --Button-secondary-negative-color-hover: var(--color-sentiment-negative-primary-hover);
41
+ --Button-secondary-negative-color-active: var(--color-sentiment-negative-primary-active);
34
42
  }
35
43
  .np-theme-personal--bright-green .wds-Button {
36
44
  --Button-primary-negative-color: var(--color-white);
37
- --Button-secondary-color: var(--color-interactive-control);
38
45
  --Button-secondary-negative-color: var(--color-white);
39
46
  }
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);
46
- }
47
47
  /* Button Styles */
48
48
  .wds-Button {
49
49
  display: inline-flex;
@@ -74,9 +74,11 @@
74
74
  color: var(--Button-color);
75
75
  }
76
76
  .wds-Button:hover {
77
+ --Button-color: var(--Button-color-hover);
77
78
  background-color: var(--Button-background-hover);
78
79
  }
79
80
  .wds-Button:active {
81
+ --Button-color: var(--Button-color-active);
80
82
  background-color: var(--Button-background-active);
81
83
  }
82
84
  .wds-Button.wds-Button--disabled,
@@ -99,12 +101,16 @@
99
101
  --Button-background-hover: var(--Button-secondary-background-hover);
100
102
  --Button-background-active: var(--Button-secondary-background-active);
101
103
  --Button-color: var(--Button-secondary-color);
104
+ --Button-color-hover: var(--Button-secondary-color-hover);
105
+ --Button-color-active: var(--Button-secondary-color-active);
102
106
  }
103
107
  .wds-Button--secondary-neutral {
104
108
  --Button-background: var(--Button-secondary-neutral-background);
105
109
  --Button-background-hover: var(--Button-secondary-neutral-background-hover);
106
110
  --Button-background-active: var(--Button-secondary-neutral-background-active);
107
111
  --Button-color: var(--Button-secondary-neutral-color);
112
+ --Button-color-hover: var(--Button-secondary-neutral-color);
113
+ --Button-color-active: var(--Button-secondary-neutral-color);
108
114
  }
109
115
  .wds-Button--secondary-neutral .wds-Button-icon--end {
110
116
  color: var(--color-interactive-primary);
@@ -114,6 +120,8 @@
114
120
  --Button-background-hover: var(--Button-tertiary-background-hover);
115
121
  --Button-background-active: var(--Button-tertiary-background-active);
116
122
  --Button-color: var(--Button-tertiary-color);
123
+ --Button-color-hover: var(--Button-tertiary-color-hover);
124
+ --Button-color-active: var(--Button-tertiary-color-active);
117
125
  }
118
126
  .wds-Button--tertiary .wds-Button-labelText,
119
127
  .wds-Button--tertiary:hover .wds-Button-labelText,
@@ -135,6 +143,8 @@
135
143
  --Button-background-hover: var(--Button-secondary-negative-background-hover);
136
144
  --Button-background-active: var(--Button-secondary-negative-background-active);
137
145
  --Button-color: var(--Button-secondary-negative-color);
146
+ --Button-color-hover: var(--Button-secondary-negative-color-hover);
147
+ --Button-color-active: var(--Button-secondary-negative-color-active);
138
148
  }
139
149
  .wds-Button--large {
140
150
  padding: var(--Button-large-padding);
package/src/button/Button.less CHANGED
@@ -28,10 +28,12 @@
28
28
  }
29
29
 
30
30
  &:hover {
31
+ --Button-color: var(--Button-color-hover);
31
32
  background-color: var(--Button-background-hover);
32
33
  }
33
34
 
34
35
  &:active {
36
+ --Button-color: var(--Button-color-active);
35
37
  background-color: var(--Button-background-active);
36
38
  }
37
39
 
@@ -59,6 +61,8 @@
59
61
  --Button-background-hover: var(--Button-secondary-background-hover);
60
62
  --Button-background-active: var(--Button-secondary-background-active);
61
63
  --Button-color: var(--Button-secondary-color);
64
+ --Button-color-hover: var(--Button-secondary-color-hover);
65
+ --Button-color-active: var(--Button-secondary-color-active);
62
66
  }
63
67
 
64
68
  &--secondary-neutral {
@@ -66,6 +70,8 @@
66
70
  --Button-background-hover: var(--Button-secondary-neutral-background-hover);
67
71
  --Button-background-active: var(--Button-secondary-neutral-background-active);
68
72
  --Button-color: var(--Button-secondary-neutral-color);
73
+ --Button-color-hover: var(--Button-secondary-neutral-color);
74
+ --Button-color-active: var(--Button-secondary-neutral-color);
69
75
 
70
76
  .wds-Button-icon--end {
71
77
  color: var(--color-interactive-primary);
@@ -77,6 +83,8 @@
77
83
  --Button-background-hover: var(--Button-tertiary-background-hover);
78
84
  --Button-background-active: var(--Button-tertiary-background-active);
79
85
  --Button-color: var(--Button-tertiary-color);
86
+ --Button-color-hover: var(--Button-tertiary-color-hover);
87
+ --Button-color-active: var(--Button-tertiary-color-active);
80
88
 
81
89
  &,
82
90
  &:hover,
@@ -104,6 +112,8 @@
104
112
  --Button-background-hover: var(--Button-secondary-negative-background-hover);
105
113
  --Button-background-active: var(--Button-secondary-negative-background-active);
106
114
  --Button-color: var(--Button-secondary-negative-color);
115
+ --Button-color-hover: var(--Button-secondary-negative-color-hover);
116
+ --Button-color-active: var(--Button-secondary-negative-color-active);
107
117
  }
108
118
  }
109
119
 
package/src/button/Button.story.tsx CHANGED
@@ -246,6 +246,13 @@ const meta: Meta<typeof Button> = {
246
246
  disable: true,
247
247
  },
248
248
  },
249
+ children: {
250
+ table: {
251
+ type: {
252
+ summary: 'ReactNode',
253
+ },
254
+ },
255
+ },
249
256
  },
250
257
  args: {
251
258
  v2: true,
@@ -302,6 +309,7 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
302
309
  onMouseLeave: { table: { disable: true } },
303
310
  ...previewArgTypes,
304
311
  },
312
+ tags: ['!autodocs'],
305
313
  };
306
314
 
307
315
  /**
package/src/button/Button.vars.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
5
5
  --Button-color: var(--color-interactive-control);
6
+ --Button-color-hover: var(--color-interactive-control-hover);
7
+ --Button-color-active: var(--color-interactive-control-active);
6
8
  --Button-border-radius: var(--radius-full);
7
9
  --Button-label-gap: var(--size-4);
8
10
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -15,6 +17,8 @@
15
17
  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
16
18
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
17
19
  --Button-secondary-color: var(--color-interactive-primary);
20
+ --Button-secondary-color-hover: var(--color-interactive-primary-hover);
21
+ --Button-secondary-color-active: var(--color-interactive-primary-active);
18
22
  --Button-secondary-neutral-background: var(--color-background-neutral);
19
23
  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
20
24
  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
@@ -23,6 +27,8 @@
23
27
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
24
28
  --Button-tertiary-background-active: var(--color-background-screen-active);
25
29
  --Button-tertiary-color: var(--color-interactive-primary);
30
+ --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
31
+ --Button-tertiary-color-active: var(--color-interactive-primary-active);
26
32
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
27
33
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
28
34
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
@@ -31,16 +37,10 @@
31
37
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
32
38
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
33
39
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
40
+ --Button-secondary-negative-color-hover: var(--color-sentiment-negative-primary-hover);
41
+ --Button-secondary-negative-color-active: var(--color-sentiment-negative-primary-active);
34
42
  }
35
43
  .np-theme-personal--bright-green .wds-Button {
36
44
  --Button-primary-negative-color: var(--color-white);
37
- --Button-secondary-color: var(--color-interactive-control);
38
45
  --Button-secondary-negative-color: var(--color-white);
39
46
  }
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);
46
- }
package/src/button/Button.vars.less CHANGED
@@ -3,6 +3,8 @@
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
5
5
  --Button-color: var(--color-interactive-control);
6
+ --Button-color-hover: var(--color-interactive-control-hover);
7
+ --Button-color-active: var(--color-interactive-control-active);
6
8
  --Button-border-radius: var(--radius-full);
7
9
  --Button-label-gap: var(--size-4);
8
10
 
@@ -18,6 +20,8 @@
18
20
  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
19
21
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
20
22
  --Button-secondary-color: var(--color-interactive-primary);
23
+ --Button-secondary-color-hover: var(--color-interactive-primary-hover);
24
+ --Button-secondary-color-active: var(--color-interactive-primary-active);
21
25
 
22
26
  --Button-secondary-neutral-background: var(--color-background-neutral);
23
27
  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
@@ -28,6 +32,8 @@
28
32
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
29
33
  --Button-tertiary-background-active: var(--color-background-screen-active);
30
34
  --Button-tertiary-color: var(--color-interactive-primary);
35
+ --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
36
+ --Button-tertiary-color-active: var(--color-interactive-primary-active);
31
37
 
32
38
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
33
39
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
@@ -38,22 +44,13 @@
38
44
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
39
45
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
40
46
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
41
-
47
+ --Button-secondary-negative-color-hover: var(--color-sentiment-negative-primary-hover);
48
+ --Button-secondary-negative-color-active: var(--color-sentiment-negative-primary-active);
42
49
 
43
50
  .np-theme-personal--bright-green & {
44
51
  --Button-primary-negative-color: var(--color-white);
45
- --Button-secondary-color: var(--color-interactive-control);
46
52
  --Button-secondary-negative-color: var(--color-white);
47
53
  }
48
-
49
-
50
- .np-theme-personal--forest-green & {
51
- --Button-secondary-background: var(--color-interactive-neutral);
52
- --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
53
- --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
54
- --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
55
- --Button-secondary-negative-color: var(--color-contrast-overlay);
56
- }
57
54
  }
58
55
 
59
56
 
package/src/main.css CHANGED
@@ -690,6 +690,8 @@
690
690
  --Button-background-hover: var(--color-interactive-accent-hover);
691
691
  --Button-background-active: var(--color-interactive-accent-active);
692
692
  --Button-color: var(--color-interactive-control);
693
+ --Button-color-hover: var(--color-interactive-control-hover);
694
+ --Button-color-active: var(--color-interactive-control-active);
693
695
  --Button-border-radius: var(--radius-full);
694
696
  --Button-label-gap: var(--size-4);
695
697
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -702,6 +704,8 @@
702
704
  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
703
705
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
704
706
  --Button-secondary-color: var(--color-interactive-primary);
707
+ --Button-secondary-color-hover: var(--color-interactive-primary-hover);
708
+ --Button-secondary-color-active: var(--color-interactive-primary-active);
705
709
  --Button-secondary-neutral-background: var(--color-background-neutral);
706
710
  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
707
711
  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
@@ -710,6 +714,8 @@
710
714
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
711
715
  --Button-tertiary-background-active: var(--color-background-screen-active);
712
716
  --Button-tertiary-color: var(--color-interactive-primary);
717
+ --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
718
+ --Button-tertiary-color-active: var(--color-interactive-primary-active);
713
719
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
714
720
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
715
721
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
@@ -718,19 +724,13 @@
718
724
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
719
725
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
720
726
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
727
+ --Button-secondary-negative-color-hover: var(--color-sentiment-negative-primary-hover);
728
+ --Button-secondary-negative-color-active: var(--color-sentiment-negative-primary-active);
721
729
  }
722
730
  .np-theme-personal--bright-green .wds-Button {
723
731
  --Button-primary-negative-color: var(--color-white);
724
- --Button-secondary-color: var(--color-interactive-control);
725
732
  --Button-secondary-negative-color: var(--color-white);
726
733
  }
727
- .np-theme-personal--forest-green .wds-Button {
728
- --Button-secondary-background: var(--color-interactive-neutral);
729
- --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
730
- --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
731
- --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
732
- --Button-secondary-negative-color: var(--color-contrast-overlay);
733
- }
734
734
  /* Button Styles */
735
735
  .wds-Button {
736
736
  display: inline-flex;
@@ -761,9 +761,11 @@
761
761
  color: var(--Button-color);
762
762
  }
763
763
  .wds-Button:hover {
764
+ --Button-color: var(--Button-color-hover);
764
765
  background-color: var(--Button-background-hover);
765
766
  }
766
767
  .wds-Button:active {
768
+ --Button-color: var(--Button-color-active);
767
769
  background-color: var(--Button-background-active);
768
770
  }
769
771
  .wds-Button.wds-Button--disabled,
@@ -786,12 +788,16 @@
786
788
  --Button-background-hover: var(--Button-secondary-background-hover);
787
789
  --Button-background-active: var(--Button-secondary-background-active);
788
790
  --Button-color: var(--Button-secondary-color);
791
+ --Button-color-hover: var(--Button-secondary-color-hover);
792
+ --Button-color-active: var(--Button-secondary-color-active);
789
793
  }
790
794
  .wds-Button--secondary-neutral {
791
795
  --Button-background: var(--Button-secondary-neutral-background);
792
796
  --Button-background-hover: var(--Button-secondary-neutral-background-hover);
793
797
  --Button-background-active: var(--Button-secondary-neutral-background-active);
794
798
  --Button-color: var(--Button-secondary-neutral-color);
799
+ --Button-color-hover: var(--Button-secondary-neutral-color);
800
+ --Button-color-active: var(--Button-secondary-neutral-color);
795
801
  }
796
802
  .wds-Button--secondary-neutral .wds-Button-icon--end {
797
803
  color: var(--color-interactive-primary);
@@ -801,6 +807,8 @@
801
807
  --Button-background-hover: var(--Button-tertiary-background-hover);
802
808
  --Button-background-active: var(--Button-tertiary-background-active);
803
809
  --Button-color: var(--Button-tertiary-color);
810
+ --Button-color-hover: var(--Button-tertiary-color-hover);
811
+ --Button-color-active: var(--Button-tertiary-color-active);
804
812
  }
805
813
  .wds-Button--tertiary .wds-Button-labelText,
806
814
  .wds-Button--tertiary:hover .wds-Button-labelText,
@@ -822,6 +830,8 @@
822
830
  --Button-background-hover: var(--Button-secondary-negative-background-hover);
823
831
  --Button-background-active: var(--Button-secondary-negative-background-active);
824
832
  --Button-color: var(--Button-secondary-negative-color);
833
+ --Button-color-hover: var(--Button-secondary-negative-color-hover);
834
+ --Button-color-active: var(--Button-secondary-negative-color-active);
825
835
  }
826
836
  .wds-Button--large {
827
837
  padding: var(--Button-large-padding);