@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/build/prompt/InlinePrompt/InlinePrompt.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InlinePrompt.mjs","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\n\nexport type InlinePromptProps = {\n sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;\n loading?: boolean;\n /**\n * Use for short-lived inline prompts to avoid swap of the icon (which is bad UX for short-lived prompts, e.g. when submit form)\n */\n muted?: boolean;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n children: React.ReactNode;\n};\n\nexport const InlinePrompt = ({\n sentiment = Sentiment.POSITIVE,\n muted = false,\n loading = false,\n className,\n children,\n ...rest\n}: InlinePromptProps) => {\n const renderMedia = () => {\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n }\n if (loading) {\n return <ProcessIndicator data-testid=\"InlinePrompt_ProcessIndicator\" size=\"xxs\" />;\n }\n return <StatusIcon size={16} sentiment={sentiment} />;\n };\n\n return (\n <div\n className={clsx(\n 'wds-inline-prompt',\n `wds-inline-prompt--${sentiment}`,\n {\n 'wds-inline-prompt--muted': muted,\n 'wds-inline-prompt--loading': loading,\n },\n className,\n )}\n {...rest}\n >\n <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n <Body>{children}</Body>\n </div>\n );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","rest","renderMedia","_jsx","BackslashCircle","size","ProcessIndicator","StatusIcon","_jsxs","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAMA,YAAY,GAAGA,CAAC;EAC3BC,SAAS,GAAGC,SAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIL,KAAK,EAAE;MACT,oBAAOM,GAAA,CAACC,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIP,OAAO,EAAE;MACX,oBAAOK,GAAA,CAACG,gBAAgB,EAAA;AAAC,QAAA,aAAA,EAAY,+BAA+B;AAACD,QAAAA,IAAI,EAAC;AAAK,OAAA,CAAG;AACpF,IAAA;IACA,oBAAOF,GAAA,CAACI,UAAU,EAAA;AAACF,MAAAA,IAAI,EAAE,EAAG;AAACX,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;AAED,EAAA,oBACEc,IAAA,CAAA,KAAA,EAAA;IACET,SAAS,EAAEU,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBf,SAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEE,IAAI;AAAAD,IAAAA,QAAA,gBAERG,GAAA,CAAA,KAAA,EAAA;AAAKJ,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEE,WAAW;AAAE,KAAM,CACtE,eAAAC,GAAA,CAACO,IAAI,EAAA;AAAAV,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAK,CAAC;AAEV;;;;"}
package/build/styles/inputs/Input.css CHANGED
@@ -18,6 +18,11 @@
18
18
  transition-duration: 300ms;
19
19
  /* TODO: Remove these overrides once `.form-control` isn’t used anymore */
20
20
  }
21
+ .disabled .np-form-control,
22
+ :disabled .np-form-control {
23
+ opacity: 1;
24
+ opacity: initial;
25
+ }
21
26
  .np-form-control:focus-visible {
22
27
  outline: none;
23
28
  }
package/build/styles/inputs/TextArea.css CHANGED
@@ -18,6 +18,11 @@
18
18
  transition-duration: 300ms;
19
19
  /* TODO: Remove these overrides once `.form-control` isn’t used anymore */
20
20
  }
21
+ .disabled .np-form-control,
22
+ :disabled .np-form-control {
23
+ opacity: 1;
24
+ opacity: initial;
25
+ }
21
26
  .np-form-control:focus-visible {
22
27
  outline: none;
23
28
  }
package/build/styles/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/build/styles/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/build/styles/main.css CHANGED
@@ -433,6 +433,159 @@
433
433
  .np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
434
434
  border-color: var(--color-interactive-primary-hover);
435
435
  }
436
+ .wds-inline-prompt {
437
+ display: inline-flex;
438
+ text-align: left;
439
+ padding-top: calc(8px / 2);
440
+ padding-top: calc(var(--padding-x-small) / 2);
441
+ padding-bottom: calc(8px / 2);
442
+ padding-bottom: calc(var(--padding-x-small) / 2);
443
+ padding-left: calc(8px - 1px);
444
+ padding-left: calc(var(--padding-x-small) - 1px);
445
+ padding-right: 8px;
446
+ padding-right: var(--padding-x-small);
447
+ border-radius: 10px;
448
+ border-radius: var(--radius-small);
449
+ word-break: break-word;
450
+ word-wrap: break-word;
451
+ }
452
+ .wds-inline-prompt:has(a),
453
+ .wds-inline-prompt:has(button) {
454
+ position: relative;
455
+ z-index: 1;
456
+ }
457
+ .wds-inline-prompt--muted {
458
+ opacity: 0.93;
459
+ filter: grayscale(1);
460
+ }
461
+ .wds-inline-prompt a,
462
+ .wds-inline-prompt button {
463
+ text-underline-offset: calc(4px / 2);
464
+ text-underline-offset: calc(var(--size-4) / 2);
465
+ }
466
+ .wds-inline-prompt a:first-of-type:before,
467
+ .wds-inline-prompt button:first-of-type:before {
468
+ content: '';
469
+ position: absolute;
470
+ inset: 0;
471
+ }
472
+ .wds-inline-prompt__media-wrapper {
473
+ padding-right: calc(12px / 2);
474
+ padding-right: calc(var(--size-12) / 2);
475
+ padding-top: calc(4px - 1px);
476
+ padding-top: calc(var(--size-4) - 1px);
477
+ padding-bottom: calc(4px - 1px);
478
+ padding-bottom: calc(var(--size-4) - 1px);
479
+ }
480
+ .wds-inline-prompt__media-wrapper .tw-icon-tags,
481
+ .wds-inline-prompt__media-wrapper .tw-icon-confetti {
482
+ color: var(--color-sentiment-positive-primary);
483
+ }
484
+ .wds-inline-prompt--negative {
485
+ background-color: var(--color-sentiment-negative-secondary);
486
+ color: var(--color-sentiment-negative-primary);
487
+ }
488
+ .wds-inline-prompt--negative a,
489
+ .wds-inline-prompt--negative button {
490
+ color: var(--color-sentiment-negative-primary);
491
+ }
492
+ .wds-inline-prompt--negative a:hover,
493
+ .wds-inline-prompt--negative button:hover {
494
+ color: var(--color-sentiment-negative-primary-hover);
495
+ }
496
+ .wds-inline-prompt--negative a:active,
497
+ .wds-inline-prompt--negative button:active {
498
+ color: var(--color-sentiment-negative-primary-active);
499
+ }
500
+ .wds-inline-prompt.wds-inline-prompt--negative:has(a, button):hover {
501
+ background-color: var(--color-sentiment-negative-secondary-hover);
502
+ }
503
+ .wds-inline-prompt.wds-inline-prompt--negative:has(a, button):active {
504
+ background-color: var(--color-sentiment-negative-secondary-active);
505
+ }
506
+ .wds-inline-prompt--positive {
507
+ background-color: var(--color-sentiment-positive-secondary);
508
+ color: var(--color-sentiment-positive-primary);
509
+ }
510
+ .wds-inline-prompt--positive a,
511
+ .wds-inline-prompt--positive button {
512
+ color: var(--color-sentiment-positive-primary);
513
+ }
514
+ .wds-inline-prompt--positive a:hover,
515
+ .wds-inline-prompt--positive button:hover {
516
+ color: var(--color-sentiment-positive-primary-hover);
517
+ }
518
+ .wds-inline-prompt--positive a:active,
519
+ .wds-inline-prompt--positive button:active {
520
+ color: var(--color-sentiment-positive-primary-active);
521
+ }
522
+ .wds-inline-prompt.wds-inline-prompt--positive:has(a, button):hover {
523
+ background-color: var(--color-sentiment-positive-secondary-hover);
524
+ }
525
+ .wds-inline-prompt.wds-inline-prompt--positive:has(a, button):active {
526
+ background-color: var(--color-sentiment-positive-secondary-active);
527
+ }
528
+ .wds-inline-prompt--proposition {
529
+ background-color: var(--color-sentiment-positive-secondary);
530
+ color: var(--color-sentiment-positive-primary);
531
+ }
532
+ .wds-inline-prompt--proposition a,
533
+ .wds-inline-prompt--proposition button {
534
+ color: var(--color-sentiment-positive-primary);
535
+ }
536
+ .wds-inline-prompt--proposition a:hover,
537
+ .wds-inline-prompt--proposition button:hover {
538
+ color: var(--color-sentiment-positive-primary-hover);
539
+ }
540
+ .wds-inline-prompt--proposition a:active,
541
+ .wds-inline-prompt--proposition button:active {
542
+ color: var(--color-sentiment-positive-primary-active);
543
+ }
544
+ .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
545
+ background-color: var(--color-sentiment-positive-secondary-hover);
546
+ }
547
+ .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
548
+ background-color: var(--color-sentiment-positive-secondary-active);
549
+ }
550
+ .wds-inline-prompt--neutral {
551
+ background-color: rgba(134,167,189,0.10196);
552
+ background-color: var(--color-background-neutral);
553
+ color: #37517e;
554
+ color: var(--color-content-primary);
555
+ }
556
+ .wds-inline-prompt--neutral a,
557
+ .wds-inline-prompt--neutral button {
558
+ color: #37517e;
559
+ color: var(--color-content-primary);
560
+ }
561
+ .wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):hover {
562
+ background-color: var(--color-background-neutral-hover);
563
+ }
564
+ .wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):active {
565
+ background-color: var(--color-background-neutral-active);
566
+ }
567
+ .wds-inline-prompt--warning {
568
+ background-color: var(--color-sentiment-warning-secondary);
569
+ color: var(--color-sentiment-warning-content);
570
+ }
571
+ .wds-inline-prompt--warning a,
572
+ .wds-inline-prompt--warning button {
573
+ color: var(--color-sentiment-warning-content);
574
+ }
575
+ .wds-inline-prompt--warning a:hover,
576
+ .wds-inline-prompt--warning button:hover {
577
+ color: var(--color-sentiment-warning-content-hover);
578
+ }
579
+ .wds-inline-prompt--warning a:active,
580
+ .wds-inline-prompt--warning button:active {
581
+ color: var(--color-sentiment-warning-content-active);
582
+ }
583
+ .wds-inline-prompt.wds-inline-prompt--warning:has(a, button):hover {
584
+ background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
585
+ }
586
+ .wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
587
+ background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
588
+ }
436
589
  .np-notification-dot {
437
590
  --np-notification-dot-size: 14px;
438
591
  position: relative;
@@ -2507,6 +2660,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2507
2660
  transition-duration: 300ms;
2508
2661
  /* TODO: Remove these overrides once `.form-control` isn’t used anymore */
2509
2662
  }
2663
+ .disabled .np-form-control,
2664
+ :disabled .np-form-control {
2665
+ opacity: 1;
2666
+ opacity: initial;
2667
+ }
2510
2668
  .np-form-control:focus-visible {
2511
2669
  outline: none;
2512
2670
  }
@@ -3026,159 +3184,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3026
3184
  margin-top: var(--size-4);
3027
3185
  }
3028
3186
  }
3029
- .wds-inline-prompt {
3030
- display: inline-flex;
3031
- text-align: left;
3032
- padding-top: calc(8px / 2);
3033
- padding-top: calc(var(--padding-x-small) / 2);
3034
- padding-bottom: calc(8px / 2);
3035
- padding-bottom: calc(var(--padding-x-small) / 2);
3036
- padding-left: calc(8px - 1px);
3037
- padding-left: calc(var(--padding-x-small) - 1px);
3038
- padding-right: 8px;
3039
- padding-right: var(--padding-x-small);
3040
- border-radius: 10px;
3041
- border-radius: var(--radius-small);
3042
- word-break: break-word;
3043
- word-wrap: break-word;
3044
- }
3045
- .wds-inline-prompt:has(a),
3046
- .wds-inline-prompt:has(button) {
3047
- position: relative;
3048
- z-index: 1;
3049
- }
3050
- .wds-inline-prompt--muted {
3051
- opacity: 0.93;
3052
- filter: grayscale(1);
3053
- }
3054
- .wds-inline-prompt a,
3055
- .wds-inline-prompt button {
3056
- text-underline-offset: calc(4px / 2);
3057
- text-underline-offset: calc(var(--size-4) / 2);
3058
- }
3059
- .wds-inline-prompt a:first-of-type:before,
3060
- .wds-inline-prompt button:first-of-type:before {
3061
- content: '';
3062
- position: absolute;
3063
- inset: 0;
3064
- }
3065
- .wds-inline-prompt__media-wrapper {
3066
- padding-right: calc(12px / 2);
3067
- padding-right: calc(var(--size-12) / 2);
3068
- padding-top: calc(4px - 1px);
3069
- padding-top: calc(var(--size-4) - 1px);
3070
- padding-bottom: calc(4px - 1px);
3071
- padding-bottom: calc(var(--size-4) - 1px);
3072
- }
3073
- .wds-inline-prompt__media-wrapper .tw-icon-tags,
3074
- .wds-inline-prompt__media-wrapper .tw-icon-confetti {
3075
- color: var(--color-sentiment-positive-primary);
3076
- }
3077
- .wds-inline-prompt--negative {
3078
- background-color: var(--color-sentiment-negative-secondary);
3079
- color: var(--color-sentiment-negative-primary);
3080
- }
3081
- .wds-inline-prompt--negative a,
3082
- .wds-inline-prompt--negative button {
3083
- color: var(--color-sentiment-negative-primary);
3084
- }
3085
- .wds-inline-prompt--negative a:hover,
3086
- .wds-inline-prompt--negative button:hover {
3087
- color: var(--color-sentiment-negative-primary-hover);
3088
- }
3089
- .wds-inline-prompt--negative a:active,
3090
- .wds-inline-prompt--negative button:active {
3091
- color: var(--color-sentiment-negative-primary-active);
3092
- }
3093
- .wds-inline-prompt.wds-inline-prompt--negative:has(a, button):hover {
3094
- background-color: var(--color-sentiment-negative-secondary-hover);
3095
- }
3096
- .wds-inline-prompt.wds-inline-prompt--negative:has(a, button):active {
3097
- background-color: var(--color-sentiment-negative-secondary-active);
3098
- }
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 {
3122
- background-color: var(--color-sentiment-positive-secondary);
3123
- color: var(--color-sentiment-positive-primary);
3124
- }
3125
- .wds-inline-prompt--proposition a,
3126
- .wds-inline-prompt--proposition button {
3127
- color: var(--color-sentiment-positive-primary);
3128
- }
3129
- .wds-inline-prompt--proposition a:hover,
3130
- .wds-inline-prompt--proposition button:hover {
3131
- color: var(--color-sentiment-positive-primary-hover);
3132
- }
3133
- .wds-inline-prompt--proposition a:active,
3134
- .wds-inline-prompt--proposition button:active {
3135
- color: var(--color-sentiment-positive-primary-active);
3136
- }
3137
- .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
3138
- background-color: var(--color-sentiment-positive-secondary-hover);
3139
- }
3140
- .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
3141
- background-color: var(--color-sentiment-positive-secondary-active);
3142
- }
3143
- .wds-inline-prompt--neutral {
3144
- background-color: rgba(134,167,189,0.10196);
3145
- background-color: var(--color-background-neutral);
3146
- color: #37517e;
3147
- color: var(--color-content-primary);
3148
- }
3149
- .wds-inline-prompt--neutral a,
3150
- .wds-inline-prompt--neutral button {
3151
- color: #37517e;
3152
- color: var(--color-content-primary);
3153
- }
3154
- .wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):hover {
3155
- background-color: var(--color-background-neutral-hover);
3156
- }
3157
- .wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):active {
3158
- background-color: var(--color-background-neutral-active);
3159
- }
3160
- .wds-inline-prompt--warning {
3161
- background-color: var(--color-sentiment-warning-secondary);
3162
- color: var(--color-sentiment-warning-content);
3163
- }
3164
- .wds-inline-prompt--warning a,
3165
- .wds-inline-prompt--warning button {
3166
- color: var(--color-sentiment-warning-content);
3167
- }
3168
- .wds-inline-prompt--warning a:hover,
3169
- .wds-inline-prompt--warning button:hover {
3170
- color: var(--color-sentiment-warning-content-hover);
3171
- }
3172
- .wds-inline-prompt--warning a:active,
3173
- .wds-inline-prompt--warning button:active {
3174
- color: var(--color-sentiment-warning-content-active);
3175
- }
3176
- .wds-inline-prompt.wds-inline-prompt--warning:has(a, button):hover {
3177
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
3178
- }
3179
- .wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
3180
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
3181
- }
3182
3187
  .wds-list-item-prompt {
3183
3188
  grid-area: prompt;
3184
3189
  justify-self: start;
@@ -3220,6 +3225,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3220
3225
  text-underline-offset: calc(4px / 2);
3221
3226
  text-underline-offset: calc(var(--size-4) / 2);
3222
3227
  }
3228
+ .wds-list-item a .wds-list-item-subtitle,
3229
+ .wds-list-item a .wds-list-item-subtitle-value {
3230
+ color: #5d7079;
3231
+ color: var(--color-content-secondary);
3232
+ }
3223
3233
  .wds-list-item-interactive .wds-list-item-control:focus-visible,
3224
3234
  .wds-list-item-interactive .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
3225
3235
  outline: none;