@transferwise/components 46.106.0 → 46.108.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 (152) hide show
  1. package/build/actionOption/ActionOption.js.map +1 -1
  2. package/build/actionOption/ActionOption.mjs.map +1 -1
  3. package/build/checkboxOption/CheckboxOption.js.map +1 -1
  4. package/build/checkboxOption/CheckboxOption.mjs.map +1 -1
  5. package/build/header/Header.js +1 -0
  6. package/build/header/Header.js.map +1 -1
  7. package/build/header/Header.mjs +1 -0
  8. package/build/header/Header.mjs.map +1 -1
  9. package/build/legacylistItem/LegacyListItem.js.map +1 -1
  10. package/build/legacylistItem/LegacyListItem.mjs.map +1 -1
  11. package/build/link/Link.js +6 -2
  12. package/build/link/Link.js.map +1 -1
  13. package/build/link/Link.mjs +6 -2
  14. package/build/link/Link.mjs.map +1 -1
  15. package/build/listItem/ListItem.js +28 -16
  16. package/build/listItem/ListItem.js.map +1 -1
  17. package/build/listItem/ListItem.mjs +28 -16
  18. package/build/listItem/ListItem.mjs.map +1 -1
  19. package/build/listItem/ListItemContext.js.map +1 -1
  20. package/build/listItem/ListItemContext.mjs.map +1 -1
  21. package/build/listItem/Navigation/ListItemNavigation.js +1 -3
  22. package/build/listItem/Navigation/ListItemNavigation.js.map +1 -1
  23. package/build/listItem/Navigation/ListItemNavigation.mjs +2 -4
  24. package/build/listItem/Navigation/ListItemNavigation.mjs.map +1 -1
  25. package/build/listItem/Prompt/InlinePrompt/InlinePrompt.js +74 -0
  26. package/build/listItem/Prompt/InlinePrompt/InlinePrompt.js.map +1 -0
  27. package/build/listItem/Prompt/InlinePrompt/InlinePrompt.mjs +72 -0
  28. package/build/listItem/Prompt/InlinePrompt/InlinePrompt.mjs.map +1 -0
  29. package/build/listItem/Prompt/ListItemPrompt.js +10 -15
  30. package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
  31. package/build/listItem/Prompt/ListItemPrompt.mjs +11 -16
  32. package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
  33. package/build/main.css +122 -81
  34. package/build/navigationOption/NavigationOption.js.map +1 -1
  35. package/build/navigationOption/NavigationOption.mjs.map +1 -1
  36. package/build/navigationOptionsList/NavigationOptionsList.js.map +1 -1
  37. package/build/navigationOptionsList/NavigationOptionsList.mjs.map +1 -1
  38. package/build/radioOption/RadioOption.js.map +1 -1
  39. package/build/radioOption/RadioOption.mjs.map +1 -1
  40. package/build/styles/link/Link.css +7 -0
  41. package/build/styles/listItem/ListItem.css +115 -81
  42. package/build/styles/listItem/ListItem.grid.css +11 -3
  43. package/build/styles/listItem/ListItem.vars.css +0 -0
  44. package/build/styles/listItem/Prompt/InlinePrompt/InlinePrompt.css +153 -0
  45. package/build/styles/listItem/Prompt/ListItemPrompt.css +72 -72
  46. package/build/styles/main.css +122 -81
  47. package/build/summary/Summary.js +8 -0
  48. package/build/summary/Summary.js.map +1 -1
  49. package/build/summary/Summary.mjs +8 -0
  50. package/build/summary/Summary.mjs.map +1 -1
  51. package/build/switchOption/SwitchOption.js +8 -0
  52. package/build/switchOption/SwitchOption.js.map +1 -1
  53. package/build/switchOption/SwitchOption.mjs +8 -0
  54. package/build/switchOption/SwitchOption.mjs.map +1 -1
  55. package/build/types/actionOption/ActionOption.d.ts +8 -0
  56. package/build/types/actionOption/ActionOption.d.ts.map +1 -1
  57. package/build/types/checkboxOption/CheckboxOption.d.ts +8 -0
  58. package/build/types/checkboxOption/CheckboxOption.d.ts.map +1 -1
  59. package/build/types/header/Header.d.ts +1 -0
  60. package/build/types/header/Header.d.ts.map +1 -1
  61. package/build/types/legacylistItem/LegacyListItem.d.ts +8 -0
  62. package/build/types/legacylistItem/LegacyListItem.d.ts.map +1 -1
  63. package/build/types/link/Link.d.ts +1 -1
  64. package/build/types/link/Link.d.ts.map +1 -1
  65. package/build/types/listItem/ListItem.d.ts +10 -1
  66. package/build/types/listItem/ListItem.d.ts.map +1 -1
  67. package/build/types/listItem/ListItemContext.d.ts +2 -1
  68. package/build/types/listItem/ListItemContext.d.ts.map +1 -1
  69. package/build/types/listItem/Navigation/ListItemNavigation.d.ts.map +1 -1
  70. package/build/types/listItem/Prompt/InlinePrompt/InlinePrompt.d.ts +15 -0
  71. package/build/types/listItem/Prompt/InlinePrompt/InlinePrompt.d.ts.map +1 -0
  72. package/build/types/listItem/Prompt/InlinePrompt/index.d.ts +3 -0
  73. package/build/types/listItem/Prompt/InlinePrompt/index.d.ts.map +1 -0
  74. package/build/types/listItem/Prompt/ListItemPrompt.d.ts +4 -6
  75. package/build/types/listItem/Prompt/ListItemPrompt.d.ts.map +1 -1
  76. package/build/types/listItem/_stories/helpers.d.ts +1 -1
  77. package/build/types/listItem/_stories/helpers.d.ts.map +1 -1
  78. package/build/types/listItem/_stories/subcomponents.d.ts +4 -0
  79. package/build/types/listItem/_stories/subcomponents.d.ts.map +1 -1
  80. package/build/types/listItem/_stories/variants/helpers.d.ts.map +1 -1
  81. package/build/types/listItem/constants.d.ts +16 -0
  82. package/build/types/listItem/constants.d.ts.map +1 -0
  83. package/build/types/listItem/useListItemControl.d.ts +1 -1
  84. package/build/types/navigationOption/NavigationOption.d.ts +8 -0
  85. package/build/types/navigationOption/NavigationOption.d.ts.map +1 -1
  86. package/build/types/navigationOptionsList/NavigationOptionsList.d.ts +9 -0
  87. package/build/types/navigationOptionsList/NavigationOptionsList.d.ts.map +1 -1
  88. package/build/types/radioOption/RadioOption.d.ts +8 -0
  89. package/build/types/radioOption/RadioOption.d.ts.map +1 -1
  90. package/build/types/summary/Summary.d.ts +8 -0
  91. package/build/types/summary/Summary.d.ts.map +1 -1
  92. package/build/types/switchOption/SwitchOption.d.ts +8 -0
  93. package/build/types/switchOption/SwitchOption.d.ts.map +1 -1
  94. package/package.json +2 -2
  95. package/src/actionOption/ActionOption.story.tsx +4 -0
  96. package/src/actionOption/ActionOption.tsx +8 -0
  97. package/src/checkboxOption/CheckboxOption.story.tsx +4 -0
  98. package/src/checkboxOption/CheckboxOption.tsx +8 -0
  99. package/src/header/Header.story.tsx +14 -0
  100. package/src/header/Header.tsx +2 -0
  101. package/src/legacylistItem/LegacyListItem.story.tsx +4 -0
  102. package/src/legacylistItem/LegacyListItem.tsx +8 -0
  103. package/src/link/Link.css +7 -0
  104. package/src/link/Link.less +8 -0
  105. package/src/link/Link.spec.tsx +28 -0
  106. package/src/link/Link.story.tsx +72 -16
  107. package/src/link/Link.tsx +5 -1
  108. package/src/listItem/ListItem.css +115 -81
  109. package/src/listItem/ListItem.grid.css +11 -3
  110. package/src/listItem/ListItem.grid.less +14 -4
  111. package/src/listItem/ListItem.less +35 -8
  112. package/src/listItem/ListItem.spec.tsx +37 -1
  113. package/src/listItem/ListItem.tsx +47 -21
  114. package/src/listItem/ListItem.vars.css +0 -0
  115. package/src/listItem/ListItem.vars.less +11 -0
  116. package/src/listItem/ListItemContext.tsx +2 -1
  117. package/src/listItem/Navigation/ListItemNavigation.spec.tsx +1 -10
  118. package/src/listItem/Navigation/ListItemNavigation.story.tsx +0 -22
  119. package/src/listItem/Navigation/ListItemNavigation.tsx +2 -3
  120. package/src/listItem/Prompt/InlinePrompt/InlinePrompt.css +153 -0
  121. package/src/listItem/Prompt/InlinePrompt/InlinePrompt.less +162 -0
  122. package/src/listItem/Prompt/InlinePrompt/InlinePrompt.spec.tsx +66 -0
  123. package/src/listItem/Prompt/InlinePrompt/InlinePrompt.tsx +56 -0
  124. package/src/listItem/Prompt/InlinePrompt/index.ts +2 -0
  125. package/src/listItem/Prompt/ListItemPrompt.css +72 -72
  126. package/src/listItem/Prompt/ListItemPrompt.less +2 -130
  127. package/src/listItem/Prompt/ListItemPrompt.spec.tsx +36 -0
  128. package/src/listItem/Prompt/ListItemPrompt.story.tsx +4 -2
  129. package/src/listItem/Prompt/ListItemPrompt.tsx +14 -14
  130. package/src/listItem/_stories/ListItem.disabled.story.tsx +433 -0
  131. package/src/listItem/_stories/ListItem.layout.test.story.tsx +10 -155
  132. package/src/listItem/_stories/ListItem.scenarios.story.tsx +4 -25
  133. package/src/listItem/_stories/ListItem.story.tsx +17 -187
  134. package/src/listItem/_stories/helpers.tsx +23 -6
  135. package/src/listItem/_stories/subcomponents.tsx +19 -2
  136. package/src/listItem/_stories/variants/ListItem.medium.test.story.tsx +1 -1
  137. package/src/listItem/_stories/variants/ListItem.neutral.test.story.tsx +55 -0
  138. package/src/listItem/_stories/variants/ListItem.small.test.story.tsx +1 -1
  139. package/src/listItem/_stories/variants/helpers.tsx +28 -1
  140. package/src/listItem/constants.ts +15 -0
  141. package/src/main.css +122 -81
  142. package/src/navigationOption/NavigationOption.story.tsx +4 -1
  143. package/src/navigationOption/NavigationOption.tsx +8 -0
  144. package/src/navigationOptionsList/NavigationOptionsList.story.tsx +4 -0
  145. package/src/navigationOptionsList/NavigationOptionsList.tsx +9 -0
  146. package/src/radioOption/RadioOption.story.tsx +4 -0
  147. package/src/radioOption/RadioOption.tsx +8 -0
  148. package/src/summary/Summary.story.tsx +4 -0
  149. package/src/summary/Summary.tsx +8 -0
  150. package/src/switchOption/SwitchOption.story.tsx +4 -1
  151. package/src/switchOption/SwitchOption.tsx +8 -0
  152. package/src/table/Table.story.tsx +1 -1
package/build/listItem/Prompt/ListItemPrompt.mjs CHANGED
@@ -1,5 +1,4 @@
1
1
  import { useContext } from 'react';
2
- import { clsx } from 'clsx';
3
2
  import '../../common/theme.mjs';
4
3
  import '../../common/direction.mjs';
5
4
  import '../../common/propsValues/control.mjs';
@@ -20,32 +19,28 @@ import '../../common/propsValues/scroll.mjs';
20
19
  import '../../common/propsValues/markdownNodeType.mjs';
21
20
  import '../../common/fileType.mjs';
22
21
  import '@transferwise/icons';
22
+ import 'clsx';
23
23
  import 'react-intl';
24
24
  import '../../common/closeButton/CloseButton.messages.mjs';
25
- import { jsxs, jsx } from 'react/jsx-runtime';
26
- import StatusIcon from '../../statusIcon/StatusIcon.mjs';
27
- import Body from '../../body/Body.mjs';
25
+ import { jsx } from 'react/jsx-runtime';
28
26
  import { ListItemContext } from '../ListItemContext.mjs';
27
+ import { InlinePrompt } from './InlinePrompt/InlinePrompt.mjs';
29
28
 
30
29
  const Prompt = ({
31
30
  sentiment = Sentiment.NEUTRAL,
32
31
  children
33
32
  }) => {
34
33
  const {
35
- ids
34
+ ids,
35
+ props
36
36
  } = useContext(ListItemContext);
37
- return /*#__PURE__*/jsxs("div", {
37
+ const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);
38
+ return /*#__PURE__*/jsx(InlinePrompt, {
38
39
  id: ids.prompt,
39
- className: clsx('wds-list-item-prompt', sentiment),
40
- children: [/*#__PURE__*/jsx("div", {
41
- className: "np-prompt-icon",
42
- children: /*#__PURE__*/jsx(StatusIcon, {
43
- size: 16,
44
- sentiment: sentiment
45
- })
46
- }), /*#__PURE__*/jsx(Body, {
47
- children: children
48
- })]
40
+ sentiment: sentiment,
41
+ muted: isLongLivedMuted,
42
+ className: "wds-list-item-prompt",
43
+ children: isLongLivedMuted ? props.disabledPromptMessage : children
49
44
  });
50
45
  };
51
46
  Prompt.displayName = 'ListItem.Prompt';
package/build/listItem/Prompt/ListItemPrompt.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemPrompt.mjs","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { clsx } from 'clsx';\nimport { Sentiment } from '../../common';\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\n\nexport type ListItemPromptProps = {\n sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;\n children: React.ReactNode;\n};\n\n/**\n * This component allows for rendering an Inline Prompt. <br />In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({ sentiment = Sentiment.NEUTRAL, children }: ListItemPromptProps) => {\n const { ids } = useContext<ListItemContextData>(ListItemContext);\n\n return (\n <div id={ids.prompt} className={clsx('wds-list-item-prompt', sentiment)}>\n <div className=\"np-prompt-icon\">\n <StatusIcon size={16} sentiment={sentiment} />\n </div>\n <Body>{children}</Body>\n </div>\n );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\nexport default Prompt;\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","children","ids","useContext","ListItemContext","_jsxs","id","prompt","className","clsx","_jsx","StatusIcon","size","Body","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBO,MAAMA,MAAM,GAAGA,CAAC;EAAEC,SAAS,GAAGC,SAAS,CAACC,OAAO;AAAEC,EAAAA;AAAQ,CAAuB,KAAI;EACzF,MAAM;AAAEC,IAAAA;AAAG,GAAE,GAAGC,UAAU,CAAsBC,eAAe,CAAC;AAEhE,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;IAAKC,EAAE,EAAEJ,GAAG,CAACK,MAAO;AAACC,IAAAA,SAAS,EAAEC,IAAI,CAAC,sBAAsB,EAAEX,SAAS,CAAE;AAAAG,IAAAA,QAAA,gBACtES,GAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,gBAAgB;MAAAP,QAAA,eAC7BS,GAAA,CAACC,UAAU,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAACd,QAAAA,SAAS,EAAEA;OAAU;AAC7C,KAAK,CACL,eAAAY,GAAA,CAACG,IAAI,EAAA;AAAAZ,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAK,CAAC;AAEV;AAEAJ,MAAM,CAACiB,WAAW,GAAG,iBAAiB;;;;"}
1
+ {"version":3,"file":"ListItemPrompt.mjs","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { clsx } from 'clsx';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from './InlinePrompt';\n\nexport type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'muted'>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({ sentiment = Sentiment.NEUTRAL, children }: ListItemPromptProps) => {\n const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n return (\n <InlinePrompt\n id={ids.prompt}\n sentiment={sentiment}\n muted={isLongLivedMuted}\n className=\"wds-list-item-prompt\"\n >\n {isLongLivedMuted ? props.disabledPromptMessage : children}\n </InlinePrompt>\n );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\nexport default Prompt;\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","children","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAMA,MAAM,GAAGA,CAAC;EAAEC,SAAS,GAAGC,SAAS,CAACC,OAAO;AAAEC,EAAAA;AAAQ,CAAuB,KAAI;EACzF,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,UAAU,CAAsBC,eAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,GAAA,CAACC,YAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACff,IAAAA,SAAS,EAAEA,SAAU;AACrBgB,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAd,IAAAA,QAAA,EAE/BK,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGR;AAAQ,GAC9C,CAAC;AAEnB;AAEAJ,MAAM,CAACmB,WAAW,GAAG,iBAAiB;;;;"}
package/build/main.css CHANGED
@@ -2653,7 +2653,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2653
2653
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
2654
2654
  margin-top: -2px;
2655
2655
  }
2656
- @container (min-width: 375px) {
2656
+ @container (min-width: 309px) {
2657
2657
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
2658
2658
  height: var(--wds-list-item-control-wrapper-height);
2659
2659
  align-content: center;
@@ -2749,7 +2749,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2749
2749
  grid-template-areas: "body";
2750
2750
  }
2751
2751
  }
2752
- @container (min-width: 297px) and (max-width: 375px) {
2752
+ @container (min-width: 241px) and (max-width: 308px) {
2753
2753
  .wds-list-item-gridWrapper .wds-list-item-media-image {
2754
2754
  -o-object-position: bottom left;
2755
2755
  object-position: bottom left;
@@ -2875,8 +2875,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2875
2875
  grid-template-rows: auto;
2876
2876
  grid-template-areas: "body";
2877
2877
  }
2878
+ .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
2879
+ margin-top: 4px;
2880
+ margin-top: var(--size-4);
2881
+ }
2878
2882
  }
2879
- @container (max-width: 297px) {
2883
+ @container (max-width: 240px) {
2880
2884
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
2881
2885
  align-content: start;
2882
2886
  }
@@ -3017,11 +3021,13 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3017
3021
  .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
3018
3022
  text-align: left;
3019
3023
  }
3024
+ .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
3025
+ margin-top: 4px;
3026
+ margin-top: var(--size-4);
3027
+ }
3020
3028
  }
3021
- .wds-list-item-prompt {
3022
- grid-area: prompt;
3029
+ .wds-inline-prompt {
3023
3030
  display: inline-flex;
3024
- justify-self: start;
3025
3031
  text-align: left;
3026
3032
  padding-top: calc(8px / 2);
3027
3033
  padding-top: calc(var(--padding-x-small) / 2);
@@ -3036,33 +3042,27 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3036
3042
  word-break: break-word;
3037
3043
  word-wrap: break-word;
3038
3044
  }
3039
- .wds-list-item-prompt:has(a),
3040
- .wds-list-item-prompt:has(button) {
3045
+ .wds-inline-prompt:has(a),
3046
+ .wds-inline-prompt:has(button) {
3041
3047
  position: relative;
3042
3048
  z-index: 1;
3043
3049
  }
3044
- .wds-list-item-prompt a,
3045
- .wds-list-item-prompt button {
3050
+ .wds-inline-prompt--muted {
3051
+ opacity: 0.93;
3052
+ filter: grayscale(1);
3053
+ }
3054
+ .wds-inline-prompt a,
3055
+ .wds-inline-prompt button {
3046
3056
  text-underline-offset: calc(4px / 2);
3047
3057
  text-underline-offset: calc(var(--size-4) / 2);
3048
3058
  }
3049
- .wds-list-item-prompt a:first-of-type:before,
3050
- .wds-list-item-prompt button:first-of-type:before {
3059
+ .wds-inline-prompt a:first-of-type:before,
3060
+ .wds-inline-prompt button:first-of-type:before {
3051
3061
  content: '';
3052
3062
  position: absolute;
3053
3063
  inset: 0;
3054
3064
  }
3055
- .wds-list-item-prompt.np-prompt-icon {
3056
- padding-left: calc(8px - 1px);
3057
- padding-left: calc(var(--padding-x-small) - 1px);
3058
- padding-right: 8px;
3059
- padding-right: var(--padding-x-small);
3060
- display: inline-flex;
3061
- align-items: center;
3062
- gap: 4px;
3063
- gap: var(--size-4);
3064
- }
3065
- .wds-list-item-prompt .np-prompt-icon {
3065
+ .wds-inline-prompt__media-wrapper {
3066
3066
  padding-right: calc(12px / 2);
3067
3067
  padding-right: calc(var(--size-12) / 2);
3068
3068
  padding-top: calc(4px - 1px);
@@ -3070,111 +3070,119 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3070
3070
  padding-bottom: calc(4px - 1px);
3071
3071
  padding-bottom: calc(var(--size-4) - 1px);
3072
3072
  }
3073
- .wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
3074
- .wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
3073
+ .wds-inline-prompt__media-wrapper .tw-icon-tags,
3074
+ .wds-inline-prompt__media-wrapper .tw-icon-confetti {
3075
3075
  color: var(--color-sentiment-positive-primary);
3076
3076
  }
3077
- .wds-list-item-prompt.negative {
3077
+ .wds-inline-prompt--negative {
3078
3078
  background-color: var(--color-sentiment-negative-secondary);
3079
3079
  color: var(--color-sentiment-negative-primary);
3080
3080
  }
3081
- .wds-list-item-prompt.negative a,
3082
- .wds-list-item-prompt.negative button {
3081
+ .wds-inline-prompt--negative a,
3082
+ .wds-inline-prompt--negative button {
3083
3083
  color: var(--color-sentiment-negative-primary);
3084
3084
  }
3085
- .wds-list-item-prompt.negative a:hover,
3086
- .wds-list-item-prompt.negative button:hover {
3085
+ .wds-inline-prompt--negative a:hover,
3086
+ .wds-inline-prompt--negative button:hover {
3087
3087
  color: var(--color-sentiment-negative-primary-hover);
3088
3088
  }
3089
- .wds-list-item-prompt.negative a:active,
3090
- .wds-list-item-prompt.negative button:active {
3089
+ .wds-inline-prompt--negative a:active,
3090
+ .wds-inline-prompt--negative button:active {
3091
3091
  color: var(--color-sentiment-negative-primary-active);
3092
3092
  }
3093
- .wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):hover {
3093
+ .wds-inline-prompt.wds-inline-prompt--negative:has(a, button):hover {
3094
3094
  background-color: var(--color-sentiment-negative-secondary-hover);
3095
3095
  }
3096
- .wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):active {
3096
+ .wds-inline-prompt.wds-inline-prompt--negative:has(a, button):active {
3097
3097
  background-color: var(--color-sentiment-negative-secondary-active);
3098
3098
  }
3099
- .wds-list-item-prompt.positive,
3100
- .wds-list-item-prompt.discount,
3101
- .wds-list-item-prompt.savings {
3099
+ .wds-inline-prompt--positive {
3100
+ background-color: var(--color-sentiment-positive-secondary);
3101
+ color: var(--color-sentiment-positive-primary);
3102
+ }
3103
+ .wds-inline-prompt--positive a,
3104
+ .wds-inline-prompt--positive button {
3105
+ color: var(--color-sentiment-positive-primary);
3106
+ }
3107
+ .wds-inline-prompt--positive a:hover,
3108
+ .wds-inline-prompt--positive button:hover {
3109
+ color: var(--color-sentiment-positive-primary-hover);
3110
+ }
3111
+ .wds-inline-prompt--positive a:active,
3112
+ .wds-inline-prompt--positive button:active {
3113
+ color: var(--color-sentiment-positive-primary-active);
3114
+ }
3115
+ .wds-inline-prompt.wds-inline-prompt--positive:has(a, button):hover {
3116
+ background-color: var(--color-sentiment-positive-secondary-hover);
3117
+ }
3118
+ .wds-inline-prompt.wds-inline-prompt--positive:has(a, button):active {
3119
+ background-color: var(--color-sentiment-positive-secondary-active);
3120
+ }
3121
+ .wds-inline-prompt--proposition {
3102
3122
  background-color: var(--color-sentiment-positive-secondary);
3103
3123
  color: var(--color-sentiment-positive-primary);
3104
3124
  }
3105
- .wds-list-item-prompt.positive a,
3106
- .wds-list-item-prompt.discount a,
3107
- .wds-list-item-prompt.savings a,
3108
- .wds-list-item-prompt.positive button,
3109
- .wds-list-item-prompt.discount button,
3110
- .wds-list-item-prompt.savings button {
3125
+ .wds-inline-prompt--proposition a,
3126
+ .wds-inline-prompt--proposition button {
3111
3127
  color: var(--color-sentiment-positive-primary);
3112
3128
  }
3113
- .wds-list-item-prompt.positive a:hover,
3114
- .wds-list-item-prompt.discount a:hover,
3115
- .wds-list-item-prompt.savings a:hover,
3116
- .wds-list-item-prompt.positive button:hover,
3117
- .wds-list-item-prompt.discount button:hover,
3118
- .wds-list-item-prompt.savings button:hover {
3129
+ .wds-inline-prompt--proposition a:hover,
3130
+ .wds-inline-prompt--proposition button:hover {
3119
3131
  color: var(--color-sentiment-positive-primary-hover);
3120
3132
  }
3121
- .wds-list-item-prompt.positive a:active,
3122
- .wds-list-item-prompt.discount a:active,
3123
- .wds-list-item-prompt.savings a:active,
3124
- .wds-list-item-prompt.positive button:active,
3125
- .wds-list-item-prompt.discount button:active,
3126
- .wds-list-item-prompt.savings button:active {
3133
+ .wds-inline-prompt--proposition a:active,
3134
+ .wds-inline-prompt--proposition button:active {
3127
3135
  color: var(--color-sentiment-positive-primary-active);
3128
3136
  }
3129
- .wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):hover,
3130
- .wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):hover,
3131
- .wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):hover {
3137
+ .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
3132
3138
  background-color: var(--color-sentiment-positive-secondary-hover);
3133
3139
  }
3134
- .wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):active,
3135
- .wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):active,
3136
- .wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):active {
3140
+ .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
3137
3141
  background-color: var(--color-sentiment-positive-secondary-active);
3138
3142
  }
3139
- .wds-list-item-prompt.neutral {
3143
+ .wds-inline-prompt--neutral {
3140
3144
  background-color: rgba(134,167,189,0.10196);
3141
3145
  background-color: var(--color-background-neutral);
3142
3146
  color: #37517e;
3143
3147
  color: var(--color-content-primary);
3144
3148
  }
3145
- .wds-list-item-prompt.neutral a,
3146
- .wds-list-item-prompt.neutral button {
3149
+ .wds-inline-prompt--neutral a,
3150
+ .wds-inline-prompt--neutral button {
3147
3151
  color: #37517e;
3148
3152
  color: var(--color-content-primary);
3149
3153
  }
3150
- .wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):hover {
3154
+ .wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):hover {
3151
3155
  background-color: var(--color-background-neutral-hover);
3152
3156
  }
3153
- .wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):active {
3157
+ .wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):active {
3154
3158
  background-color: var(--color-background-neutral-active);
3155
3159
  }
3156
- .wds-list-item-prompt.warning {
3160
+ .wds-inline-prompt--warning {
3157
3161
  background-color: var(--color-sentiment-warning-secondary);
3158
3162
  color: var(--color-sentiment-warning-content);
3159
3163
  }
3160
- .wds-list-item-prompt.warning a,
3161
- .wds-list-item-prompt.warning button {
3164
+ .wds-inline-prompt--warning a,
3165
+ .wds-inline-prompt--warning button {
3162
3166
  color: var(--color-sentiment-warning-content);
3163
3167
  }
3164
- .wds-list-item-prompt.warning a:hover,
3165
- .wds-list-item-prompt.warning button:hover {
3168
+ .wds-inline-prompt--warning a:hover,
3169
+ .wds-inline-prompt--warning button:hover {
3166
3170
  color: var(--color-sentiment-warning-content-hover);
3167
3171
  }
3168
- .wds-list-item-prompt.warning a:active,
3169
- .wds-list-item-prompt.warning button:active {
3172
+ .wds-inline-prompt--warning a:active,
3173
+ .wds-inline-prompt--warning button:active {
3170
3174
  color: var(--color-sentiment-warning-content-active);
3171
3175
  }
3172
- .wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):hover {
3176
+ .wds-inline-prompt.wds-inline-prompt--warning:has(a, button):hover {
3173
3177
  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
3174
3178
  }
3175
- .wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):active {
3179
+ .wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
3176
3180
  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
3177
3181
  }
3182
+ .wds-list-item-prompt {
3183
+ grid-area: prompt;
3184
+ justify-self: start;
3185
+ }
3178
3186
  .wds-list-item {
3179
3187
  list-style: none;
3180
3188
  width: 100%;
@@ -3298,7 +3306,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3298
3306
  }
3299
3307
  .wds-list-item-body {
3300
3308
  grid-area: body;
3301
- align-items: center;
3309
+ align-items: start;
3302
3310
  width: 100%;
3303
3311
  display: grid;
3304
3312
  grid-template-columns: 1fr max-content;
@@ -3309,14 +3317,27 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3309
3317
  gap: var(--size-16);
3310
3318
  word-break: break-word;
3311
3319
  }
3320
+ .wds-list-item-titles,
3321
+ .wds-list-item-value {
3322
+ display: flex;
3323
+ flex-direction: column;
3324
+ justify-content: center;
3325
+ }
3326
+ @container (min-width: 309px) {
3327
+ .wds-list-item-titles,
3328
+ .wds-list-item-value {
3329
+ min-height: 100%;
3330
+ min-height: var(--wds-list-item-value-min-height, 100%);
3331
+ }
3332
+ }
3333
+ .wds-list-item-value {
3334
+ text-align: right;
3335
+ }
3312
3336
  .wds-list-item-title,
3313
3337
  .wds-list-item-title-value {
3314
3338
  color: #37517e;
3315
3339
  color: var(--color-content-primary);
3316
3340
  }
3317
- .wds-list-item-value {
3318
- text-align: right;
3319
- }
3320
3341
  .wds-list-item-body-center {
3321
3342
  display: flex;
3322
3343
  flex-direction: row;
@@ -3343,16 +3364,29 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3343
3364
  flex: 0 0 auto;
3344
3365
  }
3345
3366
  .wds-list-item.disabled {
3346
- filter: none;
3347
3367
  opacity: 1;
3368
+ opacity: initial;
3348
3369
  }
3370
+ .wds-list-item.disabled,
3349
3371
  .wds-list-item.disabled label {
3350
3372
  cursor: not-allowed;
3351
3373
  }
3352
- .wds-list-item.disabled .tw-icon-backslash-circle {
3374
+ .wds-list-item.disabled .wds-list-item-title,
3375
+ .wds-list-item.disabled .wds-list-item-title-value,
3376
+ .wds-list-item.disabled .wds-list-item-subtitle,
3377
+ .wds-list-item.disabled .wds-list-item-subtitle-value,
3378
+ .wds-list-item.disabled .wds-list-item-additional-info {
3353
3379
  color: #768e9c;
3354
3380
  color: var(--color-content-tertiary);
3355
3381
  }
3382
+ .wds-list-item.disabled .wds-list-item-media,
3383
+ .wds-list-item.disabled .wds-list-item-body,
3384
+ .wds-list-item.disabled .wds-list-item-additional-info {
3385
+ opacity: 0.93;
3386
+ }
3387
+ .wds-list-item.disabled--has-prompt-reason .wds-list-item-prompt {
3388
+ opacity: 0.93;
3389
+ }
3356
3390
  .wds-list-item-spotlight {
3357
3391
  padding-left: 12px;
3358
3392
  padding-left: var(--size-12);
@@ -3911,6 +3945,13 @@ button.np-link {
3911
3945
  margin-left: 0;
3912
3946
  margin-left: initial;
3913
3947
  }
3948
+ .np-link.np-link--disabled,
3949
+ .np-link:disabled {
3950
+ filter: none;
3951
+ mix-blend-mode: luminosity;
3952
+ opacity: 0.45;
3953
+ cursor: not-allowed;
3954
+ }
3914
3955
  :root {
3915
3956
  --coin-colour: #1c3108;
3916
3957
  --coin-size: 4.5rem;
package/build/navigationOption/NavigationOption.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NavigationOption.js","sources":["../../src/navigationOption/NavigationOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport Option from '../common/Option';\nimport { OptionProps, ReferenceType } from '../common/Option/Option';\n\nexport type NavigationOptionProps = OptionProps;\n\nconst NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(\n ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {\n if ('href' in rest && rest.href) {\n component = 'a';\n }\n\n return (\n <Option\n {...rest}\n ref={reference}\n as={component}\n className={clsx('np-navigation-option', className)}\n button={<Chevron orientation={Position.RIGHT} disabled={disabled} className=\"d-block\" />}\n disabled={disabled}\n onClick={(event) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n if (onClick) {\n onClick(event);\n }\n }}\n />\n );\n },\n);\n\nexport default NavigationOption;\n"],"names":["NavigationOption","forwardRef","as","component","disabled","onClick","className","rest","reference","href","_jsx","Option","ref","clsx","button","Chevron","orientation","Position","RIGHT","event","preventDefault"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAMA,gBAAgB,gBAAGC,gBAAU,CACjC,CAAC;EAAEC,EAAE,EAAEC,SAAS,GAAG,QAAQ;AAAEC,EAAAA,QAAQ,GAAG,KAAK;EAAEC,OAAO;EAAEC,SAAS;EAAE,GAAGC;AAAI,CAAE,EAAEC,SAAS,KAAI;AACzF,EAAA,IAAI,MAAM,IAAID,IAAI,IAAIA,IAAI,CAACE,IAAI,EAAE;AAC/BN,IAAAA,SAAS,GAAG,GAAG;AACjB,EAAA;EAEA,oBACEO,cAAA,CAACC,cAAM,EAAA;AAAA,IAAA,GACDJ,IAAI;AACRK,IAAAA,GAAG,EAAEJ,SAAU;AACfN,IAAAA,EAAE,EAAEC,SAAU;AACdG,IAAAA,SAAS,EAAEO,SAAI,CAAC,sBAAsB,EAAEP,SAAS,CAAE;IACnDQ,MAAM,eAAEJ,cAAA,CAACK,eAAO,EAAA;MAACC,WAAW,EAAEC,iBAAQ,CAACC,KAAM;AAACd,MAAAA,QAAQ,EAAEA,QAAS;AAACE,MAAAA,SAAS,EAAC;AAAS,KAAA,CAAI;AACzFF,IAAAA,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAGc,KAAK,IAAI;AACjB,MAAA,IAAIf,QAAQ,EAAE;QACZe,KAAK,CAACC,cAAc,EAAE;AACtB,QAAA;AACF,MAAA;AAEA,MAAA,IAAIf,OAAO,EAAE;QACXA,OAAO,CAACc,KAAK,CAAC;AAChB,MAAA;AACF,IAAA;AAAE,GAAA,CACF;AAEN,CAAC;;;;"}
1
+ {"version":3,"file":"NavigationOption.js","sources":["../../src/navigationOption/NavigationOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport Option from '../common/Option';\nimport { OptionProps, ReferenceType } from '../common/Option/Option';\n\nexport type NavigationOptionProps = OptionProps;\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(\n ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {\n if ('href' in rest && rest.href) {\n component = 'a';\n }\n\n return (\n <Option\n {...rest}\n ref={reference}\n as={component}\n className={clsx('np-navigation-option', className)}\n button={<Chevron orientation={Position.RIGHT} disabled={disabled} className=\"d-block\" />}\n disabled={disabled}\n onClick={(event) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n if (onClick) {\n onClick(event);\n }\n }}\n />\n );\n },\n);\n\nexport default NavigationOption;\n"],"names":["NavigationOption","forwardRef","as","component","disabled","onClick","className","rest","reference","href","_jsx","Option","ref","clsx","button","Chevron","orientation","Position","RIGHT","event","preventDefault"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,gBAAgB,gBAAGC,gBAAU,CACjC,CAAC;EAAEC,EAAE,EAAEC,SAAS,GAAG,QAAQ;AAAEC,EAAAA,QAAQ,GAAG,KAAK;EAAEC,OAAO;EAAEC,SAAS;EAAE,GAAGC;AAAI,CAAE,EAAEC,SAAS,KAAI;AACzF,EAAA,IAAI,MAAM,IAAID,IAAI,IAAIA,IAAI,CAACE,IAAI,EAAE;AAC/BN,IAAAA,SAAS,GAAG,GAAG;AACjB,EAAA;EAEA,oBACEO,cAAA,CAACC,cAAM,EAAA;AAAA,IAAA,GACDJ,IAAI;AACRK,IAAAA,GAAG,EAAEJ,SAAU;AACfN,IAAAA,EAAE,EAAEC,SAAU;AACdG,IAAAA,SAAS,EAAEO,SAAI,CAAC,sBAAsB,EAAEP,SAAS,CAAE;IACnDQ,MAAM,eAAEJ,cAAA,CAACK,eAAO,EAAA;MAACC,WAAW,EAAEC,iBAAQ,CAACC,KAAM;AAACd,MAAAA,QAAQ,EAAEA,QAAS;AAACE,MAAAA,SAAS,EAAC;AAAS,KAAA,CAAI;AACzFF,IAAAA,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAGc,KAAK,IAAI;AACjB,MAAA,IAAIf,QAAQ,EAAE;QACZe,KAAK,CAACC,cAAc,EAAE;AACtB,QAAA;AACF,MAAA;AAEA,MAAA,IAAIf,OAAO,EAAE;QACXA,OAAO,CAACc,KAAK,CAAC;AAChB,MAAA;AACF,IAAA;AAAE,GAAA,CACF;AAEN,CAAC;;;;"}
package/build/navigationOption/NavigationOption.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NavigationOption.mjs","sources":["../../src/navigationOption/NavigationOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport Option from '../common/Option';\nimport { OptionProps, ReferenceType } from '../common/Option/Option';\n\nexport type NavigationOptionProps = OptionProps;\n\nconst NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(\n ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {\n if ('href' in rest && rest.href) {\n component = 'a';\n }\n\n return (\n <Option\n {...rest}\n ref={reference}\n as={component}\n className={clsx('np-navigation-option', className)}\n button={<Chevron orientation={Position.RIGHT} disabled={disabled} className=\"d-block\" />}\n disabled={disabled}\n onClick={(event) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n if (onClick) {\n onClick(event);\n }\n }}\n />\n );\n },\n);\n\nexport default NavigationOption;\n"],"names":["NavigationOption","forwardRef","as","component","disabled","onClick","className","rest","reference","href","_jsx","Option","ref","clsx","button","Chevron","orientation","Position","RIGHT","event","preventDefault"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAMA,gBAAgB,gBAAGC,UAAU,CACjC,CAAC;EAAEC,EAAE,EAAEC,SAAS,GAAG,QAAQ;AAAEC,EAAAA,QAAQ,GAAG,KAAK;EAAEC,OAAO;EAAEC,SAAS;EAAE,GAAGC;AAAI,CAAE,EAAEC,SAAS,KAAI;AACzF,EAAA,IAAI,MAAM,IAAID,IAAI,IAAIA,IAAI,CAACE,IAAI,EAAE;AAC/BN,IAAAA,SAAS,GAAG,GAAG;AACjB,EAAA;EAEA,oBACEO,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDJ,IAAI;AACRK,IAAAA,GAAG,EAAEJ,SAAU;AACfN,IAAAA,EAAE,EAAEC,SAAU;AACdG,IAAAA,SAAS,EAAEO,IAAI,CAAC,sBAAsB,EAAEP,SAAS,CAAE;IACnDQ,MAAM,eAAEJ,GAAA,CAACK,OAAO,EAAA;MAACC,WAAW,EAAEC,QAAQ,CAACC,KAAM;AAACd,MAAAA,QAAQ,EAAEA,QAAS;AAACE,MAAAA,SAAS,EAAC;AAAS,KAAA,CAAI;AACzFF,IAAAA,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAGc,KAAK,IAAI;AACjB,MAAA,IAAIf,QAAQ,EAAE;QACZe,KAAK,CAACC,cAAc,EAAE;AACtB,QAAA;AACF,MAAA;AAEA,MAAA,IAAIf,OAAO,EAAE;QACXA,OAAO,CAACc,KAAK,CAAC;AAChB,MAAA;AACF,IAAA;AAAE,GAAA,CACF;AAEN,CAAC;;;;"}
1
+ {"version":3,"file":"NavigationOption.mjs","sources":["../../src/navigationOption/NavigationOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport Option from '../common/Option';\nimport { OptionProps, ReferenceType } from '../common/Option/Option';\n\nexport type NavigationOptionProps = OptionProps;\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(\n ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {\n if ('href' in rest && rest.href) {\n component = 'a';\n }\n\n return (\n <Option\n {...rest}\n ref={reference}\n as={component}\n className={clsx('np-navigation-option', className)}\n button={<Chevron orientation={Position.RIGHT} disabled={disabled} className=\"d-block\" />}\n disabled={disabled}\n onClick={(event) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n if (onClick) {\n onClick(event);\n }\n }}\n />\n );\n },\n);\n\nexport default NavigationOption;\n"],"names":["NavigationOption","forwardRef","as","component","disabled","onClick","className","rest","reference","href","_jsx","Option","ref","clsx","button","Chevron","orientation","Position","RIGHT","event","preventDefault"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,gBAAgB,gBAAGC,UAAU,CACjC,CAAC;EAAEC,EAAE,EAAEC,SAAS,GAAG,QAAQ;AAAEC,EAAAA,QAAQ,GAAG,KAAK;EAAEC,OAAO;EAAEC,SAAS;EAAE,GAAGC;AAAI,CAAE,EAAEC,SAAS,KAAI;AACzF,EAAA,IAAI,MAAM,IAAID,IAAI,IAAIA,IAAI,CAACE,IAAI,EAAE;AAC/BN,IAAAA,SAAS,GAAG,GAAG;AACjB,EAAA;EAEA,oBACEO,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDJ,IAAI;AACRK,IAAAA,GAAG,EAAEJ,SAAU;AACfN,IAAAA,EAAE,EAAEC,SAAU;AACdG,IAAAA,SAAS,EAAEO,IAAI,CAAC,sBAAsB,EAAEP,SAAS,CAAE;IACnDQ,MAAM,eAAEJ,GAAA,CAACK,OAAO,EAAA;MAACC,WAAW,EAAEC,QAAQ,CAACC,KAAM;AAACd,MAAAA,QAAQ,EAAEA,QAAS;AAACE,MAAAA,SAAS,EAAC;AAAS,KAAA,CAAI;AACzFF,IAAAA,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAGc,KAAK,IAAI;AACjB,MAAA,IAAIf,QAAQ,EAAE;QACZe,KAAK,CAACC,cAAc,EAAE;AACtB,QAAA;AACF,MAAA;AAEA,MAAA,IAAIf,OAAO,EAAE;QACXA,OAAO,CAACc,KAAK,CAAC;AAChB,MAAA;AACF,IAAA;AAAE,GAAA,CACF;AAEN,CAAC;;;;"}
package/build/navigationOptionsList/NavigationOptionsList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NavigationOptionsList.js","sources":["../../src/navigationOptionsList/NavigationOptionsList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Children } from 'react';\n\nexport interface NavigationOptionListProps {\n children: React.ReactNode;\n}\n\nconst NavigationOptionList = ({ children }: NavigationOptionListProps) => {\n return (\n <ul className=\"np-navigation-options-list\">\n {Children.map(children, (child) => (\n <li key={child?.toString()} className=\"np-navigation-options-list__item\">\n {child}\n </li>\n ))}\n </ul>\n );\n};\n\nexport default NavigationOptionList;\n"],"names":["NavigationOptionList","children","_jsx","className","Children","map","child","toString"],"mappings":";;;;;;;AAOA,MAAMA,oBAAoB,GAAGA,CAAC;AAAEC,EAAAA;AAAQ,CAA6B,KAAI;AACvE,EAAA,oBACEC,cAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,4BAA4B;IAAAF,QAAA,EACvCG,cAAQ,CAACC,GAAG,CAACJ,QAAQ,EAAGK,KAAK,iBAC5BJ,cAAA,CAAA,IAAA,EAAA;AAA4BC,MAAAA,SAAS,EAAC,kCAAkC;AAAAF,MAAAA,QAAA,EACrEK;AAAK,KAAA,EADCA,KAAK,EAAEC,QAAQ,EAEpB,CACL;AAAC,GACA,CAAC;AAET;;;;"}
1
+ {"version":3,"file":"NavigationOptionsList.js","sources":["../../src/navigationOptionsList/NavigationOptionsList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Children } from 'react';\n\nexport interface NavigationOptionListProps {\n children: React.ReactNode;\n}\n\n/**\n * @deprecated Please use `<List />` and `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [List source](../list/List.tsx)\n * @see [ListItem source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOptionList = ({ children }: NavigationOptionListProps) => {\n return (\n <ul className=\"np-navigation-options-list\">\n {Children.map(children, (child) => (\n <li key={child?.toString()} className=\"np-navigation-options-list__item\">\n {child}\n </li>\n ))}\n </ul>\n );\n};\n\nexport default NavigationOptionList;\n"],"names":["NavigationOptionList","children","_jsx","className","Children","map","child","toString"],"mappings":";;;;;;;AAgBA,MAAMA,oBAAoB,GAAGA,CAAC;AAAEC,EAAAA;AAAQ,CAA6B,KAAI;AACvE,EAAA,oBACEC,cAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,4BAA4B;IAAAF,QAAA,EACvCG,cAAQ,CAACC,GAAG,CAACJ,QAAQ,EAAGK,KAAK,iBAC5BJ,cAAA,CAAA,IAAA,EAAA;AAA4BC,MAAAA,SAAS,EAAC,kCAAkC;AAAAF,MAAAA,QAAA,EACrEK;AAAK,KAAA,EADCA,KAAK,EAAEC,QAAQ,EAEpB,CACL;AAAC,GACA,CAAC;AAET;;;;"}
package/build/navigationOptionsList/NavigationOptionsList.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NavigationOptionsList.mjs","sources":["../../src/navigationOptionsList/NavigationOptionsList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Children } from 'react';\n\nexport interface NavigationOptionListProps {\n children: React.ReactNode;\n}\n\nconst NavigationOptionList = ({ children }: NavigationOptionListProps) => {\n return (\n <ul className=\"np-navigation-options-list\">\n {Children.map(children, (child) => (\n <li key={child?.toString()} className=\"np-navigation-options-list__item\">\n {child}\n </li>\n ))}\n </ul>\n );\n};\n\nexport default NavigationOptionList;\n"],"names":["NavigationOptionList","children","_jsx","className","Children","map","child","toString"],"mappings":";;;AAOA,MAAMA,oBAAoB,GAAGA,CAAC;AAAEC,EAAAA;AAAQ,CAA6B,KAAI;AACvE,EAAA,oBACEC,GAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,4BAA4B;IAAAF,QAAA,EACvCG,QAAQ,CAACC,GAAG,CAACJ,QAAQ,EAAGK,KAAK,iBAC5BJ,GAAA,CAAA,IAAA,EAAA;AAA4BC,MAAAA,SAAS,EAAC,kCAAkC;AAAAF,MAAAA,QAAA,EACrEK;AAAK,KAAA,EADCA,KAAK,EAAEC,QAAQ,EAEpB,CACL;AAAC,GACA,CAAC;AAET;;;;"}
1
+ {"version":3,"file":"NavigationOptionsList.mjs","sources":["../../src/navigationOptionsList/NavigationOptionsList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Children } from 'react';\n\nexport interface NavigationOptionListProps {\n children: React.ReactNode;\n}\n\n/**\n * @deprecated Please use `<List />` and `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [List source](../list/List.tsx)\n * @see [ListItem source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst NavigationOptionList = ({ children }: NavigationOptionListProps) => {\n return (\n <ul className=\"np-navigation-options-list\">\n {Children.map(children, (child) => (\n <li key={child?.toString()} className=\"np-navigation-options-list__item\">\n {child}\n </li>\n ))}\n </ul>\n );\n};\n\nexport default NavigationOptionList;\n"],"names":["NavigationOptionList","children","_jsx","className","Children","map","child","toString"],"mappings":";;;AAgBA,MAAMA,oBAAoB,GAAGA,CAAC;AAAEC,EAAAA;AAAQ,CAA6B,KAAI;AACvE,EAAA,oBACEC,GAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,4BAA4B;IAAAF,QAAA,EACvCG,QAAQ,CAACC,GAAG,CAACJ,QAAQ,EAAGK,KAAK,iBAC5BJ,GAAA,CAAA,IAAA,EAAA;AAA4BC,MAAAA,SAAS,EAAC,kCAAkC;AAAAF,MAAAA,QAAA,EACrEK;AAAK,KAAA,EADCA,KAAK,EAAEC,QAAQ,EAEpB,CACL;AAAC,GACA,CAAC;AAET;;;;"}
package/build/radioOption/RadioOption.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RadioOption.js","sources":["../../src/radioOption/RadioOption.tsx"],"sourcesContent":["import Option from '../common/Option';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioOptionProps<T extends string | number = string>\n extends Required<Pick<RadioButtonProps<T>, 'id' | 'name' | 'onChange'>>,\n Omit<RadioButtonProps<T>, 'readOnly' | 'id' | 'name' | 'onChange'> {\n 'aria-label'?: string;\n media?: React.ReactNode;\n title: React.ReactNode;\n content?: React.ReactNode;\n complex?: boolean;\n showMediaCircle?: boolean;\n showMediaAtAllSizes?: boolean;\n isContainerAligned?: boolean;\n}\n\nfunction RadioOption<T extends string | number = ''>({\n 'aria-label': ariaLabel,\n media,\n title,\n content,\n id,\n name,\n checked,\n onChange,\n complex,\n disabled,\n value = '' as T,\n showMediaCircle,\n showMediaAtAllSizes,\n isContainerAligned,\n}: RadioOptionProps<T>) {\n return (\n <Option\n aria-label={ariaLabel}\n media={media}\n title={title}\n content={content}\n name={name}\n complex={complex}\n disabled={disabled}\n showMediaCircle={showMediaCircle}\n showMediaAtAllSizes={showMediaAtAllSizes}\n isContainerAligned={isContainerAligned}\n button={\n <RadioButton\n id={id}\n name={name}\n checked={checked}\n disabled={disabled}\n value={value}\n onChange={onChange}\n />\n }\n />\n );\n}\n\nexport default RadioOption;\n"],"names":["RadioOption","ariaLabel","media","title","content","id","name","checked","onChange","complex","disabled","value","showMediaCircle","showMediaAtAllSizes","isContainerAligned","_jsx","Option","button","RadioButton"],"mappings":";;;;;;;;AAiBA,SAASA,WAAWA,CAAiC;AACnD,EAAA,YAAY,EAAEC,SAAS;EACvBC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,EAAE;EACFC,IAAI;EACJC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,QAAQ;AACRC,EAAAA,KAAK,GAAG,EAAO;EACfC,eAAe;EACfC,mBAAmB;AACnBC,EAAAA;AAAkB,CACE,EAAA;EACpB,oBACEC,cAAA,CAACC,cAAM,EAAA;AACL,IAAA,YAAA,EAAYf,SAAU;AACtBC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBE,IAAAA,IAAI,EAAEA,IAAK;AACXG,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,eAAe,EAAEA,eAAgB;AACjCC,IAAAA,mBAAmB,EAAEA,mBAAoB;AACzCC,IAAAA,kBAAkB,EAAEA,kBAAmB;IACvCG,MAAM,eACJF,cAAA,CAACG,mBAAW,EAAA;AACVb,MAAAA,EAAE,EAAEA,EAAG;AACPC,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,KAAK,EAAEA,KAAM;AACbH,MAAAA,QAAQ,EAAEA;KAAS;AAEtB,GAAA,CACD;AAEN;;;;"}
1
+ {"version":3,"file":"RadioOption.js","sources":["../../src/radioOption/RadioOption.tsx"],"sourcesContent":["import Option from '../common/Option';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioOptionProps<T extends string | number = string>\n extends Required<Pick<RadioButtonProps<T>, 'id' | 'name' | 'onChange'>>,\n Omit<RadioButtonProps<T>, 'readOnly' | 'id' | 'name' | 'onChange'> {\n 'aria-label'?: string;\n media?: React.ReactNode;\n title: React.ReactNode;\n content?: React.ReactNode;\n complex?: boolean;\n showMediaCircle?: boolean;\n showMediaAtAllSizes?: boolean;\n isContainerAligned?: boolean;\n}\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nfunction RadioOption<T extends string | number = ''>({\n 'aria-label': ariaLabel,\n media,\n title,\n content,\n id,\n name,\n checked,\n onChange,\n complex,\n disabled,\n value = '' as T,\n showMediaCircle,\n showMediaAtAllSizes,\n isContainerAligned,\n}: RadioOptionProps<T>) {\n return (\n <Option\n aria-label={ariaLabel}\n media={media}\n title={title}\n content={content}\n name={name}\n complex={complex}\n disabled={disabled}\n showMediaCircle={showMediaCircle}\n showMediaAtAllSizes={showMediaAtAllSizes}\n isContainerAligned={isContainerAligned}\n button={\n <RadioButton\n id={id}\n name={name}\n checked={checked}\n disabled={disabled}\n value={value}\n onChange={onChange}\n />\n }\n />\n );\n}\n\nexport default RadioOption;\n"],"names":["RadioOption","ariaLabel","media","title","content","id","name","checked","onChange","complex","disabled","value","showMediaCircle","showMediaAtAllSizes","isContainerAligned","_jsx","Option","button","RadioButton"],"mappings":";;;;;;;;AAyBA,SAASA,WAAWA,CAAiC;AACnD,EAAA,YAAY,EAAEC,SAAS;EACvBC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,EAAE;EACFC,IAAI;EACJC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,QAAQ;AACRC,EAAAA,KAAK,GAAG,EAAO;EACfC,eAAe;EACfC,mBAAmB;AACnBC,EAAAA;AAAkB,CACE,EAAA;EACpB,oBACEC,cAAA,CAACC,cAAM,EAAA;AACL,IAAA,YAAA,EAAYf,SAAU;AACtBC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBE,IAAAA,IAAI,EAAEA,IAAK;AACXG,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,eAAe,EAAEA,eAAgB;AACjCC,IAAAA,mBAAmB,EAAEA,mBAAoB;AACzCC,IAAAA,kBAAkB,EAAEA,kBAAmB;IACvCG,MAAM,eACJF,cAAA,CAACG,mBAAW,EAAA;AACVb,MAAAA,EAAE,EAAEA,EAAG;AACPC,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,KAAK,EAAEA,KAAM;AACbH,MAAAA,QAAQ,EAAEA;KAAS;AAEtB,GAAA,CACD;AAEN;;;;"}
package/build/radioOption/RadioOption.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RadioOption.mjs","sources":["../../src/radioOption/RadioOption.tsx"],"sourcesContent":["import Option from '../common/Option';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioOptionProps<T extends string | number = string>\n extends Required<Pick<RadioButtonProps<T>, 'id' | 'name' | 'onChange'>>,\n Omit<RadioButtonProps<T>, 'readOnly' | 'id' | 'name' | 'onChange'> {\n 'aria-label'?: string;\n media?: React.ReactNode;\n title: React.ReactNode;\n content?: React.ReactNode;\n complex?: boolean;\n showMediaCircle?: boolean;\n showMediaAtAllSizes?: boolean;\n isContainerAligned?: boolean;\n}\n\nfunction RadioOption<T extends string | number = ''>({\n 'aria-label': ariaLabel,\n media,\n title,\n content,\n id,\n name,\n checked,\n onChange,\n complex,\n disabled,\n value = '' as T,\n showMediaCircle,\n showMediaAtAllSizes,\n isContainerAligned,\n}: RadioOptionProps<T>) {\n return (\n <Option\n aria-label={ariaLabel}\n media={media}\n title={title}\n content={content}\n name={name}\n complex={complex}\n disabled={disabled}\n showMediaCircle={showMediaCircle}\n showMediaAtAllSizes={showMediaAtAllSizes}\n isContainerAligned={isContainerAligned}\n button={\n <RadioButton\n id={id}\n name={name}\n checked={checked}\n disabled={disabled}\n value={value}\n onChange={onChange}\n />\n }\n />\n );\n}\n\nexport default RadioOption;\n"],"names":["RadioOption","ariaLabel","media","title","content","id","name","checked","onChange","complex","disabled","value","showMediaCircle","showMediaAtAllSizes","isContainerAligned","_jsx","Option","button","RadioButton"],"mappings":";;;;AAiBA,SAASA,WAAWA,CAAiC;AACnD,EAAA,YAAY,EAAEC,SAAS;EACvBC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,EAAE;EACFC,IAAI;EACJC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,QAAQ;AACRC,EAAAA,KAAK,GAAG,EAAO;EACfC,eAAe;EACfC,mBAAmB;AACnBC,EAAAA;AAAkB,CACE,EAAA;EACpB,oBACEC,GAAA,CAACC,MAAM,EAAA;AACL,IAAA,YAAA,EAAYf,SAAU;AACtBC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBE,IAAAA,IAAI,EAAEA,IAAK;AACXG,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,eAAe,EAAEA,eAAgB;AACjCC,IAAAA,mBAAmB,EAAEA,mBAAoB;AACzCC,IAAAA,kBAAkB,EAAEA,kBAAmB;IACvCG,MAAM,eACJF,GAAA,CAACG,WAAW,EAAA;AACVb,MAAAA,EAAE,EAAEA,EAAG;AACPC,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,KAAK,EAAEA,KAAM;AACbH,MAAAA,QAAQ,EAAEA;KAAS;AAEtB,GAAA,CACD;AAEN;;;;"}
1
+ {"version":3,"file":"RadioOption.mjs","sources":["../../src/radioOption/RadioOption.tsx"],"sourcesContent":["import Option from '../common/Option';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioOptionProps<T extends string | number = string>\n extends Required<Pick<RadioButtonProps<T>, 'id' | 'name' | 'onChange'>>,\n Omit<RadioButtonProps<T>, 'readOnly' | 'id' | 'name' | 'onChange'> {\n 'aria-label'?: string;\n media?: React.ReactNode;\n title: React.ReactNode;\n content?: React.ReactNode;\n complex?: boolean;\n showMediaCircle?: boolean;\n showMediaAtAllSizes?: boolean;\n isContainerAligned?: boolean;\n}\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nfunction RadioOption<T extends string | number = ''>({\n 'aria-label': ariaLabel,\n media,\n title,\n content,\n id,\n name,\n checked,\n onChange,\n complex,\n disabled,\n value = '' as T,\n showMediaCircle,\n showMediaAtAllSizes,\n isContainerAligned,\n}: RadioOptionProps<T>) {\n return (\n <Option\n aria-label={ariaLabel}\n media={media}\n title={title}\n content={content}\n name={name}\n complex={complex}\n disabled={disabled}\n showMediaCircle={showMediaCircle}\n showMediaAtAllSizes={showMediaAtAllSizes}\n isContainerAligned={isContainerAligned}\n button={\n <RadioButton\n id={id}\n name={name}\n checked={checked}\n disabled={disabled}\n value={value}\n onChange={onChange}\n />\n }\n />\n );\n}\n\nexport default RadioOption;\n"],"names":["RadioOption","ariaLabel","media","title","content","id","name","checked","onChange","complex","disabled","value","showMediaCircle","showMediaAtAllSizes","isContainerAligned","_jsx","Option","button","RadioButton"],"mappings":";;;;AAyBA,SAASA,WAAWA,CAAiC;AACnD,EAAA,YAAY,EAAEC,SAAS;EACvBC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,EAAE;EACFC,IAAI;EACJC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,QAAQ;AACRC,EAAAA,KAAK,GAAG,EAAO;EACfC,eAAe;EACfC,mBAAmB;AACnBC,EAAAA;AAAkB,CACE,EAAA;EACpB,oBACEC,GAAA,CAACC,MAAM,EAAA;AACL,IAAA,YAAA,EAAYf,SAAU;AACtBC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBE,IAAAA,IAAI,EAAEA,IAAK;AACXG,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,eAAe,EAAEA,eAAgB;AACjCC,IAAAA,mBAAmB,EAAEA,mBAAoB;AACzCC,IAAAA,kBAAkB,EAAEA,kBAAmB;IACvCG,MAAM,eACJF,GAAA,CAACG,WAAW,EAAA;AACVb,MAAAA,EAAE,EAAEA,EAAG;AACPC,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,KAAK,EAAEA,KAAM;AACbH,MAAAA,QAAQ,EAAEA;KAAS;AAEtB,GAAA,CACD;AAEN;;;;"}
package/build/styles/link/Link.css CHANGED
@@ -14,3 +14,10 @@ button.np-link {
14
14
  margin-left: 0;
15
15
  margin-left: initial;
16
16
  }
17
+ .np-link.np-link--disabled,
18
+ .np-link:disabled {
19
+ filter: none;
20
+ mix-blend-mode: luminosity;
21
+ opacity: 0.45;
22
+ cursor: not-allowed;
23
+ }