@transferwise/components 46.110.0 → 46.111.1

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 (135) hide show
  1. package/build/common/panel/Panel.js +1 -0
  2. package/build/common/panel/Panel.js.map +1 -1
  3. package/build/common/panel/Panel.mjs +1 -0
  4. package/build/common/panel/Panel.mjs.map +1 -1
  5. package/build/common/responsivePanel/ResponsivePanel.js +6 -1
  6. package/build/common/responsivePanel/ResponsivePanel.js.map +1 -1
  7. package/build/common/responsivePanel/ResponsivePanel.mjs +6 -1
  8. package/build/common/responsivePanel/ResponsivePanel.mjs.map +1 -1
  9. package/build/dateInput/DateInput.js +46 -24
  10. package/build/dateInput/DateInput.js.map +1 -1
  11. package/build/dateInput/DateInput.mjs +48 -26
  12. package/build/dateInput/DateInput.mjs.map +1 -1
  13. package/build/dateLookup/DateLookup.js +5 -2
  14. package/build/dateLookup/DateLookup.js.map +1 -1
  15. package/build/dateLookup/DateLookup.mjs +5 -2
  16. package/build/dateLookup/DateLookup.mjs.map +1 -1
  17. package/build/dateLookup/dateTrigger/DateTrigger.js +2 -0
  18. package/build/dateLookup/dateTrigger/DateTrigger.js.map +1 -1
  19. package/build/dateLookup/dateTrigger/DateTrigger.mjs +2 -0
  20. package/build/dateLookup/dateTrigger/DateTrigger.mjs.map +1 -1
  21. package/build/field/Field.js +7 -2
  22. package/build/field/Field.js.map +1 -1
  23. package/build/field/Field.mjs +13 -8
  24. package/build/field/Field.mjs.map +1 -1
  25. package/build/inputs/InputGroup.js +1 -1
  26. package/build/inputs/InputGroup.js.map +1 -1
  27. package/build/inputs/InputGroup.mjs +2 -2
  28. package/build/inputs/InputGroup.mjs.map +1 -1
  29. package/build/inputs/SelectInput.js +19 -5
  30. package/build/inputs/SelectInput.js.map +1 -1
  31. package/build/inputs/SelectInput.mjs +19 -5
  32. package/build/inputs/SelectInput.mjs.map +1 -1
  33. package/build/inputs/contexts.js +8 -4
  34. package/build/inputs/contexts.js.map +1 -1
  35. package/build/inputs/contexts.mjs +7 -4
  36. package/build/inputs/contexts.mjs.map +1 -1
  37. package/build/label/Label.js +14 -8
  38. package/build/label/Label.js.map +1 -1
  39. package/build/label/Label.mjs +14 -8
  40. package/build/label/Label.mjs.map +1 -1
  41. package/build/listItem/ListItem.js.map +1 -1
  42. package/build/listItem/ListItem.mjs.map +1 -1
  43. package/build/listItem/Prompt/ListItemPrompt.js +1 -1
  44. package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
  45. package/build/listItem/Prompt/ListItemPrompt.mjs +1 -1
  46. package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
  47. package/build/main.css +163 -153
  48. package/build/moneyInput/MoneyInput.js +6 -5
  49. package/build/moneyInput/MoneyInput.js.map +1 -1
  50. package/build/moneyInput/MoneyInput.mjs +6 -5
  51. package/build/moneyInput/MoneyInput.mjs.map +1 -1
  52. package/build/phoneNumberInput/PhoneNumberInput.js +25 -3
  53. package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
  54. package/build/phoneNumberInput/PhoneNumberInput.mjs +27 -5
  55. package/build/phoneNumberInput/PhoneNumberInput.mjs.map +1 -1
  56. package/build/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.js +23 -23
  57. package/build/prompt/InlinePrompt/InlinePrompt.js.map +1 -0
  58. package/build/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.mjs +23 -23
  59. package/build/prompt/InlinePrompt/InlinePrompt.mjs.map +1 -0
  60. package/build/styles/inputs/Input.css +5 -0
  61. package/build/styles/inputs/TextArea.css +5 -0
  62. package/build/styles/listItem/ListItem.css +5 -153
  63. package/build/styles/listItem/Prompt/ListItemPrompt.css +0 -153
  64. package/build/styles/main.css +163 -153
  65. package/build/types/common/panel/Panel.d.ts +2 -0
  66. package/build/types/common/panel/Panel.d.ts.map +1 -1
  67. package/build/types/common/responsivePanel/ResponsivePanel.d.ts +1 -0
  68. package/build/types/common/responsivePanel/ResponsivePanel.d.ts.map +1 -1
  69. package/build/types/dateInput/DateInput.d.ts +2 -2
  70. package/build/types/dateInput/DateInput.d.ts.map +1 -1
  71. package/build/types/dateLookup/DateLookup.d.ts.map +1 -1
  72. package/build/types/dateLookup/dateTrigger/DateTrigger.d.ts +1 -0
  73. package/build/types/dateLookup/dateTrigger/DateTrigger.d.ts.map +1 -1
  74. package/build/types/field/Field.d.ts.map +1 -1
  75. package/build/types/inputs/InputGroup.d.ts.map +1 -1
  76. package/build/types/inputs/SelectInput.d.ts +9 -1
  77. package/build/types/inputs/SelectInput.d.ts.map +1 -1
  78. package/build/types/inputs/contexts.d.ts +6 -1
  79. package/build/types/inputs/contexts.d.ts.map +1 -1
  80. package/build/types/label/Label.d.ts +5 -15
  81. package/build/types/label/Label.d.ts.map +1 -1
  82. package/build/types/listItem/ListItem.d.ts.map +1 -1
  83. package/build/types/listItem/Prompt/ListItemPrompt.d.ts +1 -1
  84. package/build/types/listItem/Prompt/ListItemPrompt.d.ts.map +1 -1
  85. package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
  86. package/build/types/phoneNumberInput/PhoneNumberInput.d.ts.map +1 -1
  87. package/build/types/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.d.ts +1 -1
  88. package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts.map +1 -0
  89. package/build/types/prompt/InlinePrompt/index.d.ts.map +1 -0
  90. package/build/types/prompt/index.d.ts +3 -0
  91. package/build/types/prompt/index.d.ts.map +1 -0
  92. package/package.json +5 -5
  93. package/src/DisabledComponents.story.tsx +156 -0
  94. package/src/common/panel/Panel.tsx +2 -0
  95. package/src/common/responsivePanel/ResponsivePanel.tsx +7 -1
  96. package/src/dateInput/DateInput.spec.tsx +45 -7
  97. package/src/dateInput/DateInput.story.tsx +2 -0
  98. package/src/dateInput/DateInput.tsx +65 -30
  99. package/src/dateLookup/DateLookup.spec.tsx +16 -0
  100. package/src/dateLookup/DateLookup.tsx +6 -3
  101. package/src/dateLookup/dateTrigger/DateTrigger.tsx +3 -0
  102. package/src/field/Field.tsx +6 -5
  103. package/src/inputs/Input.css +5 -0
  104. package/src/inputs/InputGroup.tsx +3 -4
  105. package/src/inputs/SelectInput.story.tsx +30 -10
  106. package/src/inputs/SelectInput.tsx +36 -6
  107. package/src/inputs/TextArea.css +5 -0
  108. package/src/inputs/_common.less +5 -0
  109. package/src/inputs/contexts.tsx +12 -3
  110. package/src/label/Label.tsx +26 -20
  111. package/src/listItem/ListItem.css +5 -153
  112. package/src/listItem/ListItem.less +5 -0
  113. package/src/listItem/ListItem.tsx +2 -1
  114. package/src/listItem/Prompt/ListItemPrompt.css +0 -153
  115. package/src/listItem/Prompt/ListItemPrompt.less +0 -2
  116. package/src/listItem/Prompt/ListItemPrompt.tsx +1 -1
  117. package/src/main.css +163 -153
  118. package/src/main.less +1 -0
  119. package/src/moneyInput/MoneyInput.spec.tsx +16 -1
  120. package/src/moneyInput/MoneyInput.tsx +7 -6
  121. package/src/neptune-css/NeptuneCSS.story.tsx +142 -0
  122. package/src/phoneNumberInput/PhoneNumberInput.spec.tsx +32 -0
  123. package/src/phoneNumberInput/PhoneNumberInput.tsx +32 -11
  124. package/src/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.spec.tsx +2 -2
  125. package/src/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.tsx +4 -4
  126. package/src/prompt/index.ts +6 -0
  127. package/build/listItem/Prompt/InlinePrompt/InlinePrompt.js.map +0 -1
  128. package/build/listItem/Prompt/InlinePrompt/InlinePrompt.mjs.map +0 -1
  129. package/build/types/listItem/Prompt/InlinePrompt/InlinePrompt.d.ts.map +0 -1
  130. package/build/types/listItem/Prompt/InlinePrompt/index.d.ts.map +0 -1
  131. /package/build/styles/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.css +0 -0
  132. /package/build/types/{listItem/Prompt → prompt}/InlinePrompt/index.d.ts +0 -0
  133. /package/src/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.css +0 -0
  134. /package/src/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.less +0 -0
  135. /package/src/{listItem/Prompt → prompt}/InlinePrompt/index.ts +0 -0
package/src/label/Label.tsx CHANGED
@@ -3,7 +3,7 @@ import messages from './Label.messages';
3
3
  import { useIntl } from 'react-intl';
4
4
  import Body from '../body';
5
5
  import { CommonProps } from '../common';
6
- import { PropsWithChildren } from 'react';
6
+ import { forwardRef, PropsWithChildren } from 'react';
7
7
 
8
8
  export type LabelProps = {
9
9
  id?: string;
@@ -21,25 +21,29 @@ export type LabelProps = {
21
21
  * <Field label={..} description={..} required={..}>..</Field>
22
22
  * ```
23
23
  */
24
- const Label = ({ className, children, htmlFor, id }: LabelProps) => {
25
- return (
26
- <label
27
- id={id}
28
- htmlFor={htmlFor}
29
- className={clsx(
30
- 'np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0',
31
- className,
32
- )}
33
- >
34
- {children}
35
- </label>
36
- );
37
- };
24
+ const Label = forwardRef<HTMLLabelElement, LabelProps>(
25
+ ({ className, children, htmlFor, id }: LabelProps, ref) => {
26
+ return (
27
+ <label
28
+ ref={ref}
29
+ id={id}
30
+ htmlFor={htmlFor}
31
+ className={clsx(
32
+ 'np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0',
33
+ className,
34
+ )}
35
+ >
36
+ {children}
37
+ </label>
38
+ );
39
+ },
40
+ );
41
+
42
+ Label.displayName = 'Label';
38
43
 
39
44
  export type LabelOptionalProps = PropsWithChildren<CommonProps>;
40
45
 
41
- // eslint-disable-next-line functional/immutable-data
42
- Label.Optional = function Optional({ children, className }: LabelOptionalProps) {
46
+ const Optional = function Optional({ children, className }: LabelOptionalProps) {
43
47
  const { formatMessage } = useIntl();
44
48
  return (
45
49
  <div>
@@ -53,8 +57,7 @@ Label.Optional = function Optional({ children, className }: LabelOptionalProps)
53
57
 
54
58
  export type LabelDescriptionProps = PropsWithChildren<CommonProps> & { id?: string };
55
59
 
56
- // eslint-disable-next-line functional/immutable-data
57
- Label.Description = function Description({ id, children, className }: LabelDescriptionProps) {
60
+ const Description = function Description({ id, children, className }: LabelDescriptionProps) {
58
61
  return children ? (
59
62
  <Body id={id} className={clsx('text-secondary', className)}>
60
63
  {children}
@@ -62,4 +65,7 @@ Label.Description = function Description({ id, children, className }: LabelDescr
62
65
  ) : null;
63
66
  };
64
67
 
65
- export { Label };
68
+ // eslint-disable-next-line functional/immutable-data
69
+ const LabelNamespace = Object.assign(Label, { Optional, Description });
70
+
71
+ export { LabelNamespace as Label };
package/src/listItem/ListItem.css CHANGED
@@ -382,159 +382,6 @@
382
382
  margin-top: var(--size-4);
383
383
  }
384
384
  }
385
- .wds-inline-prompt {
386
- display: inline-flex;
387
- text-align: left;
388
- padding-top: calc(8px / 2);
389
- padding-top: calc(var(--padding-x-small) / 2);
390
- padding-bottom: calc(8px / 2);
391
- padding-bottom: calc(var(--padding-x-small) / 2);
392
- padding-left: calc(8px - 1px);
393
- padding-left: calc(var(--padding-x-small) - 1px);
394
- padding-right: 8px;
395
- padding-right: var(--padding-x-small);
396
- border-radius: 10px;
397
- border-radius: var(--radius-small);
398
- word-break: break-word;
399
- word-wrap: break-word;
400
- }
401
- .wds-inline-prompt:has(a),
402
- .wds-inline-prompt:has(button) {
403
- position: relative;
404
- z-index: 1;
405
- }
406
- .wds-inline-prompt--muted {
407
- opacity: 0.93;
408
- filter: grayscale(1);
409
- }
410
- .wds-inline-prompt a,
411
- .wds-inline-prompt button {
412
- text-underline-offset: calc(4px / 2);
413
- text-underline-offset: calc(var(--size-4) / 2);
414
- }
415
- .wds-inline-prompt a:first-of-type:before,
416
- .wds-inline-prompt button:first-of-type:before {
417
- content: '';
418
- position: absolute;
419
- inset: 0;
420
- }
421
- .wds-inline-prompt__media-wrapper {
422
- padding-right: calc(12px / 2);
423
- padding-right: calc(var(--size-12) / 2);
424
- padding-top: calc(4px - 1px);
425
- padding-top: calc(var(--size-4) - 1px);
426
- padding-bottom: calc(4px - 1px);
427
- padding-bottom: calc(var(--size-4) - 1px);
428
- }
429
- .wds-inline-prompt__media-wrapper .tw-icon-tags,
430
- .wds-inline-prompt__media-wrapper .tw-icon-confetti {
431
- color: var(--color-sentiment-positive-primary);
432
- }
433
- .wds-inline-prompt--negative {
434
- background-color: var(--color-sentiment-negative-secondary);
435
- color: var(--color-sentiment-negative-primary);
436
- }
437
- .wds-inline-prompt--negative a,
438
- .wds-inline-prompt--negative button {
439
- color: var(--color-sentiment-negative-primary);
440
- }
441
- .wds-inline-prompt--negative a:hover,
442
- .wds-inline-prompt--negative button:hover {
443
- color: var(--color-sentiment-negative-primary-hover);
444
- }
445
- .wds-inline-prompt--negative a:active,
446
- .wds-inline-prompt--negative button:active {
447
- color: var(--color-sentiment-negative-primary-active);
448
- }
449
- .wds-inline-prompt.wds-inline-prompt--negative:has(a, button):hover {
450
- background-color: var(--color-sentiment-negative-secondary-hover);
451
- }
452
- .wds-inline-prompt.wds-inline-prompt--negative:has(a, button):active {
453
- background-color: var(--color-sentiment-negative-secondary-active);
454
- }
455
- .wds-inline-prompt--positive {
456
- background-color: var(--color-sentiment-positive-secondary);
457
- color: var(--color-sentiment-positive-primary);
458
- }
459
- .wds-inline-prompt--positive a,
460
- .wds-inline-prompt--positive button {
461
- color: var(--color-sentiment-positive-primary);
462
- }
463
- .wds-inline-prompt--positive a:hover,
464
- .wds-inline-prompt--positive button:hover {
465
- color: var(--color-sentiment-positive-primary-hover);
466
- }
467
- .wds-inline-prompt--positive a:active,
468
- .wds-inline-prompt--positive button:active {
469
- color: var(--color-sentiment-positive-primary-active);
470
- }
471
- .wds-inline-prompt.wds-inline-prompt--positive:has(a, button):hover {
472
- background-color: var(--color-sentiment-positive-secondary-hover);
473
- }
474
- .wds-inline-prompt.wds-inline-prompt--positive:has(a, button):active {
475
- background-color: var(--color-sentiment-positive-secondary-active);
476
- }
477
- .wds-inline-prompt--proposition {
478
- background-color: var(--color-sentiment-positive-secondary);
479
- color: var(--color-sentiment-positive-primary);
480
- }
481
- .wds-inline-prompt--proposition a,
482
- .wds-inline-prompt--proposition button {
483
- color: var(--color-sentiment-positive-primary);
484
- }
485
- .wds-inline-prompt--proposition a:hover,
486
- .wds-inline-prompt--proposition button:hover {
487
- color: var(--color-sentiment-positive-primary-hover);
488
- }
489
- .wds-inline-prompt--proposition a:active,
490
- .wds-inline-prompt--proposition button:active {
491
- color: var(--color-sentiment-positive-primary-active);
492
- }
493
- .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
494
- background-color: var(--color-sentiment-positive-secondary-hover);
495
- }
496
- .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
497
- background-color: var(--color-sentiment-positive-secondary-active);
498
- }
499
- .wds-inline-prompt--neutral {
500
- background-color: rgba(134,167,189,0.10196);
501
- background-color: var(--color-background-neutral);
502
- color: #37517e;
503
- color: var(--color-content-primary);
504
- }
505
- .wds-inline-prompt--neutral a,
506
- .wds-inline-prompt--neutral button {
507
- color: #37517e;
508
- color: var(--color-content-primary);
509
- }
510
- .wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):hover {
511
- background-color: var(--color-background-neutral-hover);
512
- }
513
- .wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):active {
514
- background-color: var(--color-background-neutral-active);
515
- }
516
- .wds-inline-prompt--warning {
517
- background-color: var(--color-sentiment-warning-secondary);
518
- color: var(--color-sentiment-warning-content);
519
- }
520
- .wds-inline-prompt--warning a,
521
- .wds-inline-prompt--warning button {
522
- color: var(--color-sentiment-warning-content);
523
- }
524
- .wds-inline-prompt--warning a:hover,
525
- .wds-inline-prompt--warning button:hover {
526
- color: var(--color-sentiment-warning-content-hover);
527
- }
528
- .wds-inline-prompt--warning a:active,
529
- .wds-inline-prompt--warning button:active {
530
- color: var(--color-sentiment-warning-content-active);
531
- }
532
- .wds-inline-prompt.wds-inline-prompt--warning:has(a, button):hover {
533
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
534
- }
535
- .wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
536
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
537
- }
538
385
  .wds-list-item-prompt {
539
386
  grid-area: prompt;
540
387
  justify-self: start;
@@ -576,6 +423,11 @@
576
423
  text-underline-offset: calc(4px / 2);
577
424
  text-underline-offset: calc(var(--size-4) / 2);
578
425
  }
426
+ .wds-list-item a .wds-list-item-subtitle,
427
+ .wds-list-item a .wds-list-item-subtitle-value {
428
+ color: #5d7079;
429
+ color: var(--color-content-secondary);
430
+ }
579
431
  .wds-list-item-interactive .wds-list-item-control:focus-visible,
580
432
  .wds-list-item-interactive .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
581
433
  outline: none;
package/src/listItem/ListItem.less CHANGED
@@ -39,6 +39,11 @@
39
39
 
40
40
  a {
41
41
  text-underline-offset: calc(var(--size-4) / 2);
42
+
43
+ .wds-list-item-subtitle,
44
+ .wds-list-item-subtitle-value {
45
+ color: var(--color-content-secondary);
46
+ }
42
47
  }
43
48
 
44
49
  &-interactive {
package/src/listItem/ListItem.tsx CHANGED
@@ -235,7 +235,8 @@ export const ListItem = ({
235
235
  [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:
236
236
  isFullyInteractive && !!spotlight,
237
237
  disabled: disabled && !isPartiallyInteractive,
238
- 'disabled--has-prompt-reason': !disabledPromptMessage && disabled && !isPartiallyInteractive,
238
+ 'disabled--has-prompt-reason':
239
+ !disabledPromptMessage && disabled && !isPartiallyInteractive,
239
240
  },
240
241
  className,
241
242
  )}
package/src/listItem/Prompt/ListItemPrompt.css CHANGED
@@ -1,156 +1,3 @@
1
- .wds-inline-prompt {
2
- display: inline-flex;
3
- text-align: left;
4
- padding-top: calc(8px / 2);
5
- padding-top: calc(var(--padding-x-small) / 2);
6
- padding-bottom: calc(8px / 2);
7
- padding-bottom: calc(var(--padding-x-small) / 2);
8
- padding-left: calc(8px - 1px);
9
- padding-left: calc(var(--padding-x-small) - 1px);
10
- padding-right: 8px;
11
- padding-right: var(--padding-x-small);
12
- border-radius: 10px;
13
- border-radius: var(--radius-small);
14
- word-break: break-word;
15
- word-wrap: break-word;
16
- }
17
- .wds-inline-prompt:has(a),
18
- .wds-inline-prompt:has(button) {
19
- position: relative;
20
- z-index: 1;
21
- }
22
- .wds-inline-prompt--muted {
23
- opacity: 0.93;
24
- filter: grayscale(1);
25
- }
26
- .wds-inline-prompt a,
27
- .wds-inline-prompt button {
28
- text-underline-offset: calc(4px / 2);
29
- text-underline-offset: calc(var(--size-4) / 2);
30
- }
31
- .wds-inline-prompt a:first-of-type:before,
32
- .wds-inline-prompt button:first-of-type:before {
33
- content: '';
34
- position: absolute;
35
- inset: 0;
36
- }
37
- .wds-inline-prompt__media-wrapper {
38
- padding-right: calc(12px / 2);
39
- padding-right: calc(var(--size-12) / 2);
40
- padding-top: calc(4px - 1px);
41
- padding-top: calc(var(--size-4) - 1px);
42
- padding-bottom: calc(4px - 1px);
43
- padding-bottom: calc(var(--size-4) - 1px);
44
- }
45
- .wds-inline-prompt__media-wrapper .tw-icon-tags,
46
- .wds-inline-prompt__media-wrapper .tw-icon-confetti {
47
- color: var(--color-sentiment-positive-primary);
48
- }
49
- .wds-inline-prompt--negative {
50
- background-color: var(--color-sentiment-negative-secondary);
51
- color: var(--color-sentiment-negative-primary);
52
- }
53
- .wds-inline-prompt--negative a,
54
- .wds-inline-prompt--negative button {
55
- color: var(--color-sentiment-negative-primary);
56
- }
57
- .wds-inline-prompt--negative a:hover,
58
- .wds-inline-prompt--negative button:hover {
59
- color: var(--color-sentiment-negative-primary-hover);
60
- }
61
- .wds-inline-prompt--negative a:active,
62
- .wds-inline-prompt--negative button:active {
63
- color: var(--color-sentiment-negative-primary-active);
64
- }
65
- .wds-inline-prompt.wds-inline-prompt--negative:has(a, button):hover {
66
- background-color: var(--color-sentiment-negative-secondary-hover);
67
- }
68
- .wds-inline-prompt.wds-inline-prompt--negative:has(a, button):active {
69
- background-color: var(--color-sentiment-negative-secondary-active);
70
- }
71
- .wds-inline-prompt--positive {
72
- background-color: var(--color-sentiment-positive-secondary);
73
- color: var(--color-sentiment-positive-primary);
74
- }
75
- .wds-inline-prompt--positive a,
76
- .wds-inline-prompt--positive button {
77
- color: var(--color-sentiment-positive-primary);
78
- }
79
- .wds-inline-prompt--positive a:hover,
80
- .wds-inline-prompt--positive button:hover {
81
- color: var(--color-sentiment-positive-primary-hover);
82
- }
83
- .wds-inline-prompt--positive a:active,
84
- .wds-inline-prompt--positive button:active {
85
- color: var(--color-sentiment-positive-primary-active);
86
- }
87
- .wds-inline-prompt.wds-inline-prompt--positive:has(a, button):hover {
88
- background-color: var(--color-sentiment-positive-secondary-hover);
89
- }
90
- .wds-inline-prompt.wds-inline-prompt--positive:has(a, button):active {
91
- background-color: var(--color-sentiment-positive-secondary-active);
92
- }
93
- .wds-inline-prompt--proposition {
94
- background-color: var(--color-sentiment-positive-secondary);
95
- color: var(--color-sentiment-positive-primary);
96
- }
97
- .wds-inline-prompt--proposition a,
98
- .wds-inline-prompt--proposition button {
99
- color: var(--color-sentiment-positive-primary);
100
- }
101
- .wds-inline-prompt--proposition a:hover,
102
- .wds-inline-prompt--proposition button:hover {
103
- color: var(--color-sentiment-positive-primary-hover);
104
- }
105
- .wds-inline-prompt--proposition a:active,
106
- .wds-inline-prompt--proposition button:active {
107
- color: var(--color-sentiment-positive-primary-active);
108
- }
109
- .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
110
- background-color: var(--color-sentiment-positive-secondary-hover);
111
- }
112
- .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
113
- background-color: var(--color-sentiment-positive-secondary-active);
114
- }
115
- .wds-inline-prompt--neutral {
116
- background-color: rgba(134,167,189,0.10196);
117
- background-color: var(--color-background-neutral);
118
- color: #37517e;
119
- color: var(--color-content-primary);
120
- }
121
- .wds-inline-prompt--neutral a,
122
- .wds-inline-prompt--neutral button {
123
- color: #37517e;
124
- color: var(--color-content-primary);
125
- }
126
- .wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):hover {
127
- background-color: var(--color-background-neutral-hover);
128
- }
129
- .wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):active {
130
- background-color: var(--color-background-neutral-active);
131
- }
132
- .wds-inline-prompt--warning {
133
- background-color: var(--color-sentiment-warning-secondary);
134
- color: var(--color-sentiment-warning-content);
135
- }
136
- .wds-inline-prompt--warning a,
137
- .wds-inline-prompt--warning button {
138
- color: var(--color-sentiment-warning-content);
139
- }
140
- .wds-inline-prompt--warning a:hover,
141
- .wds-inline-prompt--warning button:hover {
142
- color: var(--color-sentiment-warning-content-hover);
143
- }
144
- .wds-inline-prompt--warning a:active,
145
- .wds-inline-prompt--warning button:active {
146
- color: var(--color-sentiment-warning-content-active);
147
- }
148
- .wds-inline-prompt.wds-inline-prompt--warning:has(a, button):hover {
149
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
150
- }
151
- .wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
152
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
153
- }
154
1
  .wds-list-item-prompt {
155
2
  grid-area: prompt;
156
3
  justify-self: start;
package/src/listItem/Prompt/ListItemPrompt.less CHANGED
@@ -1,5 +1,3 @@
1
- @import "./InlinePrompt/InlinePrompt.less";
2
-
3
1
  .wds-list-item-prompt {
4
2
  grid-area: prompt;
5
3
  justify-self: start;
package/src/listItem/Prompt/ListItemPrompt.tsx CHANGED
@@ -2,7 +2,7 @@ import { useContext } from 'react';
2
2
  import { clsx } from 'clsx';
3
3
  import { Sentiment } from '../../common';
4
4
  import { ListItemContext, type ListItemContextData } from '../ListItemContext';
5
- import { InlinePrompt, type InlinePromptProps } from './InlinePrompt';
5
+ import { InlinePrompt, type InlinePromptProps } from '../../prompt';
6
6
 
7
7
  export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'muted'>;
8
8