@transferwise/components 46.88.2 → 46.89.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 (155) hide show
  1. package/build/actionButton/ActionButton.js.map +1 -1
  2. package/build/actionButton/ActionButton.mjs.map +1 -1
  3. package/build/actionOption/ActionOption.js +19 -3
  4. package/build/actionOption/ActionOption.js.map +1 -1
  5. package/build/actionOption/ActionOption.mjs +19 -3
  6. package/build/actionOption/ActionOption.mjs.map +1 -1
  7. package/build/alert/Alert.js +23 -20
  8. package/build/alert/Alert.js.map +1 -1
  9. package/build/alert/Alert.mjs +20 -17
  10. package/build/alert/Alert.mjs.map +1 -1
  11. package/build/avatar/Avatar.js.map +1 -1
  12. package/build/avatar/Avatar.mjs.map +1 -1
  13. package/build/avatar/avatarTypes.js +3 -1
  14. package/build/avatar/avatarTypes.js.map +1 -1
  15. package/build/avatar/avatarTypes.mjs +3 -1
  16. package/build/avatar/avatarTypes.mjs.map +1 -1
  17. package/build/badge/Badge.js.map +1 -1
  18. package/build/badge/Badge.mjs.map +1 -1
  19. package/build/button/Button.js +2 -2
  20. package/build/button/Button.mjs +2 -2
  21. package/build/button/LegacyButton.js.map +1 -1
  22. package/build/button/LegacyButton.mjs.map +1 -1
  23. package/build/carousel/Carousel.js +9 -8
  24. package/build/carousel/Carousel.js.map +1 -1
  25. package/build/carousel/Carousel.mjs +9 -8
  26. package/build/carousel/Carousel.mjs.map +1 -1
  27. package/build/common/action/Action.js +26 -15
  28. package/build/common/action/Action.js.map +1 -1
  29. package/build/common/action/Action.mjs +26 -15
  30. package/build/common/action/Action.mjs.map +1 -1
  31. package/build/common/closeButton/CloseButton.js +2 -1
  32. package/build/common/closeButton/CloseButton.js.map +1 -1
  33. package/build/common/closeButton/CloseButton.mjs +2 -1
  34. package/build/common/closeButton/CloseButton.mjs.map +1 -1
  35. package/build/criticalBanner/CriticalCommsBanner.js +10 -73
  36. package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
  37. package/build/criticalBanner/CriticalCommsBanner.mjs +11 -74
  38. package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
  39. package/build/iconButton/IconButton.js +2 -2
  40. package/build/iconButton/IconButton.js.map +1 -1
  41. package/build/iconButton/IconButton.mjs +2 -2
  42. package/build/iconButton/IconButton.mjs.map +1 -1
  43. package/build/link/Link.js +2 -2
  44. package/build/link/Link.mjs +2 -2
  45. package/build/main.css +46 -75
  46. package/build/primitives/PrimitiveAnchor/PrimitiveAnchor.js.map +1 -0
  47. package/build/primitives/PrimitiveAnchor/PrimitiveAnchor.mjs.map +1 -0
  48. package/build/primitives/PrimitiveButton/{src/PrimitiveButton.js → PrimitiveButton.js} +1 -1
  49. package/build/primitives/PrimitiveButton/PrimitiveButton.js.map +1 -0
  50. package/build/primitives/PrimitiveButton/{src/PrimitiveButton.mjs → PrimitiveButton.mjs} +1 -1
  51. package/build/primitives/PrimitiveButton/PrimitiveButton.mjs.map +1 -0
  52. package/build/styles/alert/Alert.css +4 -0
  53. package/build/styles/carousel/Carousel.css +0 -8
  54. package/build/styles/common/closeButton/CloseButton.css +15 -0
  55. package/build/styles/criticalBanner/CriticalCommsBanner.css +33 -73
  56. package/build/styles/main.css +46 -75
  57. package/build/table/TableCell.js +7 -1
  58. package/build/table/TableCell.js.map +1 -1
  59. package/build/table/TableCell.mjs +7 -1
  60. package/build/table/TableCell.mjs.map +1 -1
  61. package/build/test-utils/assets/wise-card.svg +1 -0
  62. package/build/types/actionButton/ActionButton.d.ts +6 -0
  63. package/build/types/actionButton/ActionButton.d.ts.map +1 -1
  64. package/build/types/actionOption/ActionOption.d.ts +2 -1
  65. package/build/types/actionOption/ActionOption.d.ts.map +1 -1
  66. package/build/types/alert/Alert.d.ts +3 -4
  67. package/build/types/alert/Alert.d.ts.map +1 -1
  68. package/build/types/avatar/Avatar.d.ts +3 -0
  69. package/build/types/avatar/Avatar.d.ts.map +1 -1
  70. package/build/types/avatar/avatarTypes.d.ts +3 -0
  71. package/build/types/avatar/avatarTypes.d.ts.map +1 -1
  72. package/build/types/badge/Badge.d.ts +3 -0
  73. package/build/types/badge/Badge.d.ts.map +1 -1
  74. package/build/types/button/LegacyButton.d.ts +27 -0
  75. package/build/types/button/LegacyButton.d.ts.map +1 -1
  76. package/build/types/carousel/Carousel.d.ts.map +1 -1
  77. package/build/types/common/action/Action.d.ts +5 -2
  78. package/build/types/common/action/Action.d.ts.map +1 -1
  79. package/build/types/common/closeButton/CloseButton.d.ts +3 -3
  80. package/build/types/common/closeButton/CloseButton.d.ts.map +1 -1
  81. package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map +1 -1
  82. package/build/types/iconButton/IconButton.d.ts +2 -2
  83. package/build/types/iconButton/IconButton.d.ts.map +1 -1
  84. package/build/types/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.d.ts → PrimitiveAnchor.d.ts} +1 -1
  85. package/build/types/primitives/PrimitiveAnchor/PrimitiveAnchor.d.ts.map +1 -0
  86. package/build/types/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.types.d.ts → PrimitiveAnchor.types.d.ts} +1 -1
  87. package/build/types/primitives/PrimitiveAnchor/PrimitiveAnchor.types.d.ts.map +1 -0
  88. package/build/types/primitives/PrimitiveAnchor/index.d.ts +2 -2
  89. package/build/types/primitives/PrimitiveAnchor/index.d.ts.map +1 -1
  90. package/build/types/primitives/PrimitiveButton/{src/PrimitiveButton.d.ts → PrimitiveButton.d.ts} +1 -1
  91. package/build/types/primitives/PrimitiveButton/PrimitiveButton.d.ts.map +1 -0
  92. package/build/types/primitives/PrimitiveButton/{src/PrimitiveButton.types.d.ts → PrimitiveButton.types.d.ts} +1 -1
  93. package/build/types/primitives/PrimitiveButton/PrimitiveButton.types.d.ts.map +1 -0
  94. package/build/types/primitives/PrimitiveButton/index.d.ts +2 -2
  95. package/build/types/primitives/PrimitiveButton/index.d.ts.map +1 -1
  96. package/build/types/table/TableCell.d.ts +6 -3
  97. package/build/types/table/TableCell.d.ts.map +1 -1
  98. package/package.json +2 -2
  99. package/src/actionButton/ActionButton.story.tsx +6 -1
  100. package/src/actionButton/ActionButton.tsx +6 -0
  101. package/src/actionOption/ActionOption.story.tsx +9 -6
  102. package/src/actionOption/ActionOption.tsx +29 -5
  103. package/src/alert/Alert.css +4 -0
  104. package/src/alert/Alert.less +4 -0
  105. package/src/alert/Alert.spec.tsx +0 -30
  106. package/src/alert/Alert.story.tsx +74 -2
  107. package/src/alert/Alert.tsx +18 -21
  108. package/src/avatar/Avatar.tsx +3 -0
  109. package/src/avatar/avatarTypes.ts +3 -1
  110. package/src/badge/Badge.tsx +3 -0
  111. package/src/button/LegacyButton.tsx +27 -0
  112. package/src/carousel/Carousel.css +0 -8
  113. package/src/carousel/Carousel.less +0 -7
  114. package/src/carousel/Carousel.spec.tsx +2 -2
  115. package/src/carousel/Carousel.tsx +11 -10
  116. package/src/common/action/Action.tsx +40 -22
  117. package/src/common/closeButton/CloseButton.css +15 -0
  118. package/src/common/closeButton/CloseButton.less +10 -0
  119. package/src/common/closeButton/CloseButton.tsx +4 -3
  120. package/src/criticalBanner/CriticalCommsBanner.css +33 -73
  121. package/src/criticalBanner/CriticalCommsBanner.less +37 -64
  122. package/src/criticalBanner/CriticalCommsBanner.story.tsx +26 -4
  123. package/src/criticalBanner/CriticalCommsBanner.tsx +8 -50
  124. package/src/iconButton/IconButton.tsx +4 -1
  125. package/src/main.css +46 -75
  126. package/src/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.tsx → PrimitiveAnchor.tsx} +1 -1
  127. package/src/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.types.ts → PrimitiveAnchor.types.ts} +1 -1
  128. package/src/primitives/PrimitiveAnchor/index.ts +6 -2
  129. package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.tests.story.tsx +1 -1
  130. package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +1 -1
  131. package/src/primitives/PrimitiveButton/{src/PrimitiveButton.tsx → PrimitiveButton.tsx} +2 -2
  132. package/src/primitives/PrimitiveButton/{src/PrimitiveButton.types.ts → PrimitiveButton.types.ts} +1 -1
  133. package/src/primitives/PrimitiveButton/index.ts +6 -2
  134. package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx +1 -1
  135. package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +1 -1
  136. package/src/table/Table.story.tsx +59 -1
  137. package/src/table/TableCell.spec.tsx +17 -0
  138. package/src/table/TableCell.tsx +14 -5
  139. package/src/test-utils/assets/wise-card.svg +1 -0
  140. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js.map +0 -1
  141. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs.map +0 -1
  142. package/build/primitives/PrimitiveButton/src/PrimitiveButton.js.map +0 -1
  143. package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs.map +0 -1
  144. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts.map +0 -1
  145. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts.map +0 -1
  146. package/build/types/primitives/PrimitiveAnchor/src/index.d.ts +0 -3
  147. package/build/types/primitives/PrimitiveAnchor/src/index.d.ts.map +0 -1
  148. package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts.map +0 -1
  149. package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.types.d.ts.map +0 -1
  150. package/build/types/primitives/PrimitiveButton/src/index.d.ts +0 -3
  151. package/build/types/primitives/PrimitiveButton/src/index.d.ts.map +0 -1
  152. package/src/primitives/PrimitiveAnchor/src/index.ts +0 -6
  153. package/src/primitives/PrimitiveButton/src/index.ts +0 -6
  154. /package/build/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.js → PrimitiveAnchor.js} +0 -0
  155. /package/build/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.mjs → PrimitiveAnchor.mjs} +0 -0
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PrimitiveButton.mjs","sources":["../../../src/primitives/PrimitiveButton/PrimitiveButton.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type */\nimport React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport messages from '../../i18n/commonMessages/Button.messages';\nimport type { PrimitiveButtonProps } from '.';\n\n/**\n * The Primitive `PrimitiveButton` component can be used in various parts the Wise Design\n * System internally. It supports different states such as disabled and loading,\n * and provides event handlers for common interactions like click, focus, blur,\n * mouse enter, mouse leave, and keydown.\n *\n * @see {@link PrimitiveButton} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-button--docs|Storybook Wise Design}\n */\nconst PrimitiveButton = forwardRef<HTMLButtonElement, PrimitiveButtonProps>(\n (\n {\n children,\n className,\n id,\n disabled = false,\n loading = false,\n testId,\n type = 'button',\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const intl = useIntl();\n const classNames = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, loading, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are used to manage the `disabled` and `loading`\n * states for the button:\n *\n * - `aria-disabled`: Communicates to assistive technologies that the button\n * is disabled when it is either disabled or loading.\n * - `aria-label`: Provides an accessible label for the button, using a\n * localized loading message when the button is in a loading state.\n * - `aria-live`: Ensures that updates to the button's content are announced\n * by assistive technologies, set to 'polite' during loading.\n */\n const buttonProps = {\n 'aria-disabled': loading || undefined,\n 'aria-busy': loading || undefined,\n 'aria-label': loading ? intl.formatMessage(messages.loadingAriaLabel) : props['aria-label'],\n 'aria-live': (loading ? 'polite' : 'off') as 'polite' | 'off' | 'assertive' | undefined,\n className: classNames,\n 'data-testid': testId,\n disabled,\n id,\n ref,\n type,\n onBlur: handleBlur,\n onClick: handleClick,\n onFocus: handleFocus,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <button {...buttonProps}>{children}</button>;\n },\n);\n\nPrimitiveButton.displayName = 'PrimitiveButton';\n\nexport default PrimitiveButton;\n"],"names":["PrimitiveButton","forwardRef","children","className","id","disabled","loading","testId","type","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","intl","useIntl","classNames","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","buttonProps","undefined","formatMessage","messages","loadingAriaLabel","_jsx","displayName"],"mappings":";;;;;;AAAA;AAgBA,MAAMA,eAAe,gBAAGC,UAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;AACNC,EAAAA,IAAI,GAAG,QAAQ;EACfC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;AACtB,EAAA,MAAMC,UAAU,GAAGC,IAAI,CAACjB,SAAS,CAAC,CAAA;AAElC,EAAA,MAAMkB,WAAW,GAAGC,WAAW,CAC5BC,KAA0C,IAAI;IAC7C,IAAIlB,QAAQ,IAAIC,OAAO,EAAE;MACvBiB,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLf,OAAO,GAAGc,KAAK,CAAC,CAAA;AAClB,KAAA;GACD,EACD,CAAClB,QAAQ,EAAEC,OAAO,EAAEG,OAAO,CAAC,CAC7B,CAAA;AAED,EAAA,MAAMgB,WAAW,GAAGH,WAAW,CAC5BC,KAA0C,IAAI;IAC7Cb,OAAO,GAAGa,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACb,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMgB,UAAU,GAAGJ,WAAW,CAC3BC,KAA0C,IAAI;IAC7CZ,MAAM,GAAGY,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACZ,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMgB,gBAAgB,GAAGL,WAAW,CACjCC,KAA0C,IAAI;IAC7CX,YAAY,GAAGW,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACX,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMgB,gBAAgB,GAAGN,WAAW,CACjCC,KAA0C,IAAI;IAC7CV,YAAY,GAAGU,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACV,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMgB,aAAa,GAAGP,WAAW,CAC9BC,KAA6C,IAAI;IAChDT,SAAS,GAAGS,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACT,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMgB,WAAW,GAAG;IAClB,eAAe,EAAExB,OAAO,IAAIyB,SAAS;IACrC,WAAW,EAAEzB,OAAO,IAAIyB,SAAS;AACjC,IAAA,YAAY,EAAEzB,OAAO,GAAGW,IAAI,CAACe,aAAa,CAACC,QAAQ,CAACC,gBAAgB,CAAC,GAAGnB,KAAK,CAAC,YAAY,CAAC;AAC3F,IAAA,WAAW,EAAGT,OAAO,GAAG,QAAQ,GAAG,KAAoD;AACvFH,IAAAA,SAAS,EAAEgB,UAAU;AACrB,IAAA,aAAa,EAAEZ,MAAM;IACrBF,QAAQ;IACRD,EAAE;IACFY,GAAG;IACHR,IAAI;AACJG,IAAAA,MAAM,EAAEe,UAAU;AAClBjB,IAAAA,OAAO,EAAEY,WAAW;AACpBX,IAAAA,OAAO,EAAEe,WAAW;AACpBb,IAAAA,YAAY,EAAEe,gBAAgB;AAC9Bd,IAAAA,YAAY,EAAEe,gBAAgB;AAC9Bd,IAAAA,SAAS,EAAEe,aAAa;IACxB,GAAGd,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOoB,GAAA,CAAA,QAAA,EAAA;AAAA,IAAA,GAAYL,WAAW;AAAA5B,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAS,CAAC,CAAA;AACrD,CAAC,EACF;AAEDF,eAAe,CAACoC,WAAW,GAAG,iBAAiB;;;;"}
@@ -1,3 +1,7 @@
1
1
  .wds-alert__liveRegion {
2
2
  display: contents;
3
3
  }
4
+ .alert__close {
5
+ min-width: 48px;
6
+ min-width: var(--size-48);
7
+ }
@@ -99,14 +99,6 @@
99
99
  padding: 24px;
100
100
  padding: var(--size-24);
101
101
  }
102
- .carousel__scroll-button {
103
- width: 32px;
104
- width: var(--size-32);
105
- height: 32px;
106
- height: var(--size-32);
107
- align-items: center;
108
- justify-content: center;
109
- }
110
102
  .carousel__indicators {
111
103
  display: flex;
112
104
  justify-content: center;
@@ -39,6 +39,21 @@
39
39
  width: var(--size-64);
40
40
  }
41
41
  }
42
+ .np-theme-personal .np-close-button--x-small {
43
+ height: 24px;
44
+ height: var(--size-24);
45
+ width: 24px;
46
+ width: var(--size-24);
47
+ flex-shrink: 0;
48
+ }
49
+ @media (max-width: 320px) {
50
+ .np-theme-personal .np-close-button--x-small {
51
+ height: 48px;
52
+ height: var(--size-48);
53
+ width: 48px;
54
+ width: var(--size-48);
55
+ }
56
+ }
42
57
  .np-theme-personal .np-close-button--large {
43
58
  height: 40px;
44
59
  height: var(--size-40);
@@ -1,76 +1,36 @@
1
- div.critical-comms {
2
- --critical-comms-background-color: var(--color-background-negative);
3
- --critical-comms-title-color: var(--color-content-negative);
4
- --critical-comms-subtitle-color: var(--color-content-secondary);
5
- --critical-comms-subtitle-color-padding-left: var(--size-16);
6
- --critical-comms-vertical-spacing: var(--size-8);
7
- background-color: rgba(255,135,135,0.10196);
8
- background-color: var(--critical-comms-background-color);
9
- display: flex;
10
- justify-content: center;
11
- align-items: center;
12
- }
13
- .np-theme-personal div.critical-comms,
14
- .np-theme-personal--dark div.critical-comms {
15
- --critical-comms-background-color: var(--color-sentiment-negative);
16
- --critical-comms-title-color: var(--color-contrast);
17
- --critical-comms-subtitle-color: var(--color-contrast);
18
- --critical-comms-subtitle-color-padding-left: 0;
19
- --critical-comms-vertical-spacing: var(--size-16);
20
- padding: 24px;
21
- padding: var(--padding-medium);
22
- }
23
- .np-theme-personal div.critical-comms .tw-icon-alert-circle-fill,
24
- .np-theme-personal--dark div.critical-comms .tw-icon-alert-circle-fill {
25
- color: var(--color-contrast);
26
- }
27
- .np-theme-personal div.critical-comms .tw-icon-alert-circle-fill svg,
28
- .np-theme-personal--dark div.critical-comms .tw-icon-alert-circle-fill svg {
29
- width: 48px;
30
- height: 48px;
31
- }
32
- .np-theme-personal div.critical-comms .cta-btn,
33
- .np-theme-personal--dark div.critical-comms .cta-btn {
34
- background-color: var(--color-contrast);
35
- }
36
- .np-theme-personal div.critical-comms .cta-btn:not(.disabled):not(:disabled):focus,
37
- .np-theme-personal--dark div.critical-comms .cta-btn:not(.disabled):not(:disabled):focus {
38
- outline-color: var(--color-contrast);
39
- }
40
- @media (max-width: 767px) {
41
- div.critical-comms {
42
- display: inline;
43
- display: initial;
1
+ .np-theme-personal .critical-comms .alert-warning {
2
+ color: var(--color-contrast-overlay);
3
+ background-color: var(--color-sentiment-negative);
4
+ }
5
+ .np-theme-personal .critical-comms .alert-warning .np-text-title-body {
6
+ color: var(--color-contrast-overlay);
7
+ }
8
+ .np-theme-personal .critical-comms .status-circle.warning {
9
+ background-color: #ffffff;
10
+ background-color: var(--color-background-screen);
11
+ }
12
+ .np-theme-personal .critical-comms .status-circle.warning .status-icon {
13
+ color: var(--color-contrast-theme);
14
+ }
15
+ .np-theme-personal .critical-comms .alert__message .alert__action {
16
+ margin-top: 16px;
17
+ margin-top: var(--size-16);
18
+ }
19
+ .np-theme-personal .critical-comms .wds-Button {
20
+ --Button-background: var(--color-contrast-overlay);
21
+ --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
22
+ --Button-background-active: var(--color-sentiment-negative-secondary-active);
23
+ }
24
+ @media (min-width: 768px) {
25
+ .np-theme-personal .critical-comms .alert-warning .alert__message {
26
+ flex-direction: row;
27
+ justify-content: space-between;
28
+ align-items: center;
29
+ width: 100%;
44
30
  }
45
- }
46
- div.critical-comms .critical-comms--title {
47
- color: var(--critical-comms-title-color);
48
- }
49
- div.critical-comms .critical-comms--subtitle {
50
- color: var(--critical-comms-subtitle-color);
51
- }
52
- div.critical-comms .critical-comms--cta {
53
- padding-left: 0;
54
- }
55
- @media (max-width: 767px) {
56
- div.critical-comms .critical-comms--cta {
57
- padding-left: var(--critical-comms-subtitle-color-padding-left);
58
- padding-top: var(--critical-comms-vertical-spacing);
59
- min-width: 100%;
60
- }
61
- }
62
- div.critical-comms .critical-comms-body {
63
- display: flex;
64
- width: 100%;
65
- }
66
- @media (max-width: 767px) {
67
- div.critical-comms .critical-comms-body {
68
- flex-direction: column;
69
- }
70
- }
71
- @media (max-width: 767px) {
72
- div.critical-comms .critical-comms-content {
73
- padding-top: var(--critical-comms-vertical-spacing);
74
- flex-wrap: wrap;
31
+ .np-theme-personal .critical-comms .alert-warning .alert__message .alert__action {
32
+ margin-top: 0;
33
+ margin-left: 16px;
34
+ margin-left: var(--padding-small);
75
35
  }
76
36
  }
@@ -1,77 +1,37 @@
1
- div.critical-comms {
2
- --critical-comms-background-color: var(--color-background-negative);
3
- --critical-comms-title-color: var(--color-content-negative);
4
- --critical-comms-subtitle-color: var(--color-content-secondary);
5
- --critical-comms-subtitle-color-padding-left: var(--size-16);
6
- --critical-comms-vertical-spacing: var(--size-8);
7
- background-color: rgba(255,135,135,0.10196);
8
- background-color: var(--critical-comms-background-color);
9
- display: flex;
10
- justify-content: center;
11
- align-items: center;
12
- }
13
- .np-theme-personal div.critical-comms,
14
- .np-theme-personal--dark div.critical-comms {
15
- --critical-comms-background-color: var(--color-sentiment-negative);
16
- --critical-comms-title-color: var(--color-contrast);
17
- --critical-comms-subtitle-color: var(--color-contrast);
18
- --critical-comms-subtitle-color-padding-left: 0;
19
- --critical-comms-vertical-spacing: var(--size-16);
20
- padding: 24px;
21
- padding: var(--padding-medium);
22
- }
23
- .np-theme-personal div.critical-comms .tw-icon-alert-circle-fill,
24
- .np-theme-personal--dark div.critical-comms .tw-icon-alert-circle-fill {
25
- color: var(--color-contrast);
26
- }
27
- .np-theme-personal div.critical-comms .tw-icon-alert-circle-fill svg,
28
- .np-theme-personal--dark div.critical-comms .tw-icon-alert-circle-fill svg {
29
- width: 48px;
30
- height: 48px;
31
- }
32
- .np-theme-personal div.critical-comms .cta-btn,
33
- .np-theme-personal--dark div.critical-comms .cta-btn {
34
- background-color: var(--color-contrast);
35
- }
36
- .np-theme-personal div.critical-comms .cta-btn:not(.disabled):not(:disabled):focus,
37
- .np-theme-personal--dark div.critical-comms .cta-btn:not(.disabled):not(:disabled):focus {
38
- outline-color: var(--color-contrast);
39
- }
40
- @media (max-width: 767px) {
41
- div.critical-comms {
42
- display: inline;
43
- display: initial;
44
- }
1
+ .np-theme-personal .critical-comms .alert-warning {
2
+ color: var(--color-contrast-overlay);
3
+ background-color: var(--color-sentiment-negative);
45
4
  }
46
- div.critical-comms .critical-comms--title {
47
- color: var(--critical-comms-title-color);
5
+ .np-theme-personal .critical-comms .alert-warning .np-text-title-body {
6
+ color: var(--color-contrast-overlay);
48
7
  }
49
- div.critical-comms .critical-comms--subtitle {
50
- color: var(--critical-comms-subtitle-color);
8
+ .np-theme-personal .critical-comms .status-circle.warning {
9
+ background-color: #ffffff;
10
+ background-color: var(--color-background-screen);
51
11
  }
52
- div.critical-comms .critical-comms--cta {
53
- padding-left: 0;
12
+ .np-theme-personal .critical-comms .status-circle.warning .status-icon {
13
+ color: var(--color-contrast-theme);
54
14
  }
55
- @media (max-width: 767px) {
56
- div.critical-comms .critical-comms--cta {
57
- padding-left: var(--critical-comms-subtitle-color-padding-left);
58
- padding-top: var(--critical-comms-vertical-spacing);
59
- min-width: 100%;
60
- }
15
+ .np-theme-personal .critical-comms .alert__message .alert__action {
16
+ margin-top: 16px;
17
+ margin-top: var(--size-16);
61
18
  }
62
- div.critical-comms .critical-comms-body {
63
- display: flex;
64
- width: 100%;
19
+ .np-theme-personal .critical-comms .wds-Button {
20
+ --Button-background: var(--color-contrast-overlay);
21
+ --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
22
+ --Button-background-active: var(--color-sentiment-negative-secondary-active);
65
23
  }
66
- @media (max-width: 767px) {
67
- div.critical-comms .critical-comms-body {
68
- flex-direction: column;
24
+ @media (min-width: 768px) {
25
+ .np-theme-personal .critical-comms .alert-warning .alert__message {
26
+ flex-direction: row;
27
+ justify-content: space-between;
28
+ align-items: center;
29
+ width: 100%;
69
30
  }
70
- }
71
- @media (max-width: 767px) {
72
- div.critical-comms .critical-comms-content {
73
- padding-top: var(--critical-comms-vertical-spacing);
74
- flex-wrap: wrap;
31
+ .np-theme-personal .critical-comms .alert-warning .alert__message .alert__action {
32
+ margin-top: 0;
33
+ margin-left: 16px;
34
+ margin-left: var(--padding-small);
75
35
  }
76
36
  }
77
37
  .tw-date-lookup-calendar > tbody > tr > td.weekend button {
@@ -219,6 +179,10 @@ div.critical-comms .critical-comms-body {
219
179
  .wds-alert__liveRegion {
220
180
  display: contents;
221
181
  }
182
+ .alert__close {
183
+ min-width: 48px;
184
+ min-width: var(--size-48);
185
+ }
222
186
  .tw-avatar {
223
187
  position: relative;
224
188
  border-radius: 50%;
@@ -1154,14 +1118,6 @@ div.critical-comms .critical-comms-body {
1154
1118
  padding: 24px;
1155
1119
  padding: var(--size-24);
1156
1120
  }
1157
- .carousel__scroll-button {
1158
- width: 32px;
1159
- width: var(--size-32);
1160
- height: 32px;
1161
- height: var(--size-32);
1162
- align-items: center;
1163
- justify-content: center;
1164
- }
1165
1121
  .carousel__indicators {
1166
1122
  display: flex;
1167
1123
  justify-content: center;
@@ -1647,6 +1603,21 @@ div.critical-comms .critical-comms-body {
1647
1603
  width: var(--size-64);
1648
1604
  }
1649
1605
  }
1606
+ .np-theme-personal .np-close-button--x-small {
1607
+ height: 24px;
1608
+ height: var(--size-24);
1609
+ width: 24px;
1610
+ width: var(--size-24);
1611
+ flex-shrink: 0;
1612
+ }
1613
+ @media (max-width: 320px) {
1614
+ .np-theme-personal .np-close-button--x-small {
1615
+ height: 48px;
1616
+ height: var(--size-48);
1617
+ width: 48px;
1618
+ width: var(--size-48);
1619
+ }
1620
+ }
1650
1621
  .np-theme-personal .np-close-button--large {
1651
1622
  height: 40px;
1652
1623
  height: var(--size-40);
@@ -38,6 +38,12 @@ const TableCell = ({
38
38
  sentiment: cell?.sentiment ?? 'neutral'
39
39
  });
40
40
  }
41
+ if (cell?.type === 'media' && cell.media) {
42
+ // eslint-disable-next-line jsx-a11y/alt-text
43
+ mediaContent = /*#__PURE__*/jsxRuntime.jsx("img", {
44
+ ...cell.media
45
+ });
46
+ }
41
47
  if (mediaContent) {
42
48
  return /*#__PURE__*/jsxRuntime.jsx("div", {
43
49
  "aria-hidden": "true",
@@ -63,7 +69,7 @@ const TableCell = ({
63
69
  children: [cell?.type === 'text' && cell?.text && /*#__PURE__*/jsxRuntime.jsx(TableStatusText, {
64
70
  text: cell?.text,
65
71
  status: cell?.status
66
- }), cell?.type && ['leading', 'currency', 'status'].includes(cell?.type) && /*#__PURE__*/jsxRuntime.jsxs("div", {
72
+ }), cell?.type && ['leading', 'currency', 'status', 'media'].includes(cell?.type) && /*#__PURE__*/jsxRuntime.jsxs("div", {
67
73
  className: clsx.clsx('np-table-content', {
68
74
  'np-table-content--reversed': alignment === 'right'
69
75
  }),
@@ -1 +1 @@
1
- {"version":3,"file":"TableCell.js","sources":["../../src/table/TableCell.tsx"],"sourcesContent":["import TableStatusText from './TableStatusText';\nimport StatusIcon from '../statusIcon';\nimport { Flag } from '@wise/art';\nimport React from 'react';\nimport { clsx } from 'clsx';\nimport Body from '../body';\nimport Money, { MoneyProps } from '../money';\nimport AvatarView from '../avatarView';\n\ninterface TableCellTypeProp {\n type: 'leading' | 'text' | 'currency' | 'status';\n}\n\n// `Leading` and `Status` cell types have 2 text fields: `primaryText` and `secondaryText`\ninterface TableCellTextProps {\n primaryText?: string;\n secondaryText?: string;\n}\n\n// `Leading`, `Text` and `Currency` cells' types can have a status indicator with `error` or `success` values\ninterface TableCellStatusProp {\n status?: 'error' | 'success';\n}\n\nexport interface TableCellLeading\n extends TableCellTypeProp,\n TableCellTextProps,\n TableCellStatusProp {\n avatar?: {\n src?: string;\n profileName?: string | null;\n };\n}\n\nexport interface TableCellText extends TableCellTypeProp, TableCellStatusProp {\n text?: string;\n}\n\nexport interface TableCellCurrency extends TableCellTypeProp, TableCellStatusProp {\n primaryCurrency?: MoneyProps;\n secondaryCurrency?: MoneyProps;\n}\n\nexport interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {\n sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';\n}\n\nexport interface TableCellType {\n cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus;\n alignment?: 'left' | 'right';\n}\n\n// These properties should be exported only on the lib level to prevent visual issues because of incorrect usage.\nexport interface TableCellProps extends TableCellType {\n className?: string;\n colSpan?: number;\n children?: React.ReactNode;\n}\n\nconst TableCell = ({ cell, alignment = 'left', className, colSpan, children }: TableCellProps) => {\n const getContentMedia = () => {\n let mediaContent = null;\n\n if (cell?.type === 'leading' && (cell?.avatar?.src || cell?.avatar?.profileName)) {\n mediaContent = (\n <AvatarView profileName={cell?.avatar?.profileName} size={40} imgSrc={cell?.avatar?.src} />\n );\n }\n\n if (cell?.type === 'currency' && cell?.primaryCurrency?.currency) {\n mediaContent = (\n <Flag code={cell?.primaryCurrency?.currency?.toLowerCase()} intrinsicSize={24} />\n );\n }\n\n if (cell?.type === 'status') {\n mediaContent = <StatusIcon size={24} sentiment={cell?.sentiment ?? 'neutral'} />;\n }\n\n if (mediaContent) {\n return (\n <div\n aria-hidden=\"true\"\n className=\"np-table-content-media\"\n data-testid=\"np-table-content-media\"\n >\n {mediaContent}\n </div>\n );\n }\n };\n\n const formatCurrencyValue = (currency?: MoneyProps) => {\n if (currency) {\n return <Money amount={currency.amount} currency={currency.currency} alwaysShowDecimals />;\n }\n\n return '';\n };\n\n return (\n <td\n className={clsx(\n 'np-table-cell',\n cell?.type ? `np-table-cell--${cell?.type}` : '',\n `np-table-cell--${alignment}`,\n className,\n )}\n colSpan={colSpan}\n >\n {cell?.type === 'text' && cell?.text && (\n <TableStatusText text={cell?.text} status={cell?.status} />\n )}\n {cell?.type && ['leading', 'currency', 'status'].includes(cell?.type) && (\n <div\n className={clsx('np-table-content', {\n 'np-table-content--reversed': alignment === 'right',\n })}\n data-testid=\"np-table-content\"\n >\n {getContentMedia()}\n <div className=\"np-table-content-body\">\n {(cell?.primaryCurrency ?? cell?.primaryText) && (\n <TableStatusText\n text={\n cell?.type === 'currency'\n ? formatCurrencyValue(cell?.primaryCurrency)\n : (cell?.primaryText ?? '')\n }\n status={cell?.type !== 'status' ? cell?.status : undefined}\n typography=\"default-bold\"\n />\n )}\n {(cell?.secondaryCurrency ?? cell?.secondaryText) && (\n <Body>\n {cell?.type === 'currency'\n ? formatCurrencyValue(cell?.secondaryCurrency)\n : cell?.secondaryText}\n </Body>\n )}\n </div>\n </div>\n )}\n {children}\n </td>\n );\n};\n\nexport default TableCell;\n"],"names":["TableCell","cell","alignment","className","colSpan","children","getContentMedia","mediaContent","type","avatar","src","profileName","_jsx","AvatarView","size","imgSrc","primaryCurrency","currency","Flag","code","toLowerCase","intrinsicSize","StatusIcon","sentiment","formatCurrencyValue","Money","amount","alwaysShowDecimals","_jsxs","clsx","text","TableStatusText","status","includes","primaryText","undefined","typography","secondaryCurrency","secondaryText","Body"],"mappings":"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"}
1
+ {"version":3,"file":"TableCell.js","sources":["../../src/table/TableCell.tsx"],"sourcesContent":["import TableStatusText from './TableStatusText';\nimport StatusIcon from '../statusIcon';\nimport { Flag } from '@wise/art';\nimport React, { ImgHTMLAttributes } from 'react';\nimport { clsx } from 'clsx';\nimport Body from '../body';\nimport Money, { MoneyProps } from '../money';\nimport AvatarView from '../avatarView';\n\ninterface TableCellTypeProp {\n type: 'leading' | 'text' | 'currency' | 'status' | 'media';\n}\n\n// `Media`, `Leading` and `Status` cell types have 2 text fields: `primaryText` and `secondaryText`\ninterface TableCellTextProps {\n primaryText?: string;\n secondaryText?: string;\n}\n\n// `Leading`, `Text` and `Currency` cells' types can have a status indicator with `error` or `success` values\ninterface TableCellStatusProp {\n status?: 'error' | 'success';\n}\n\nexport interface TableCellMedia extends TableCellTypeProp, TableCellTextProps {\n media?: ImgHTMLAttributes<HTMLImageElement>;\n}\n\nexport interface TableCellLeading\n extends TableCellTypeProp,\n TableCellTextProps,\n TableCellStatusProp {\n avatar?: {\n src?: string;\n profileName?: string | null;\n };\n}\n\nexport interface TableCellText extends TableCellTypeProp, TableCellStatusProp {\n text?: string;\n}\n\nexport interface TableCellCurrency extends TableCellTypeProp, TableCellStatusProp {\n primaryCurrency?: MoneyProps;\n secondaryCurrency?: MoneyProps;\n}\n\nexport interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {\n sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';\n}\n\nexport interface TableCellType {\n cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus & TableCellMedia;\n alignment?: 'left' | 'right';\n}\n\n// These properties should be exported only on the lib level to prevent visual issues because of incorrect usage.\nexport interface TableCellProps extends TableCellType {\n className?: string;\n colSpan?: number;\n children?: React.ReactNode;\n}\n\nconst TableCell = ({ cell, alignment = 'left', className, colSpan, children }: TableCellProps) => {\n const getContentMedia = () => {\n let mediaContent = null;\n\n if (cell?.type === 'leading' && (cell?.avatar?.src || cell?.avatar?.profileName)) {\n mediaContent = (\n <AvatarView profileName={cell?.avatar?.profileName} size={40} imgSrc={cell?.avatar?.src} />\n );\n }\n\n if (cell?.type === 'currency' && cell?.primaryCurrency?.currency) {\n mediaContent = (\n <Flag code={cell?.primaryCurrency?.currency?.toLowerCase()} intrinsicSize={24} />\n );\n }\n\n if (cell?.type === 'status') {\n mediaContent = <StatusIcon size={24} sentiment={cell?.sentiment ?? 'neutral'} />;\n }\n\n if (cell?.type === 'media' && cell.media) {\n // eslint-disable-next-line jsx-a11y/alt-text\n mediaContent = <img {...cell.media} />;\n }\n\n if (mediaContent) {\n return (\n <div\n aria-hidden=\"true\"\n className=\"np-table-content-media\"\n data-testid=\"np-table-content-media\"\n >\n {mediaContent}\n </div>\n );\n }\n };\n\n const formatCurrencyValue = (currency?: MoneyProps) => {\n if (currency) {\n return <Money amount={currency.amount} currency={currency.currency} alwaysShowDecimals />;\n }\n\n return '';\n };\n\n return (\n <td\n className={clsx(\n 'np-table-cell',\n cell?.type ? `np-table-cell--${cell?.type}` : '',\n `np-table-cell--${alignment}`,\n className,\n )}\n colSpan={colSpan}\n >\n {cell?.type === 'text' && cell?.text && (\n <TableStatusText text={cell?.text} status={cell?.status} />\n )}\n {cell?.type && ['leading', 'currency', 'status', 'media'].includes(cell?.type) && (\n <div\n className={clsx('np-table-content', {\n 'np-table-content--reversed': alignment === 'right',\n })}\n data-testid=\"np-table-content\"\n >\n {getContentMedia()}\n <div className=\"np-table-content-body\">\n {(cell?.primaryCurrency ?? cell?.primaryText) && (\n <TableStatusText\n text={\n cell?.type === 'currency'\n ? formatCurrencyValue(cell?.primaryCurrency)\n : (cell?.primaryText ?? '')\n }\n status={cell?.type !== 'status' ? cell?.status : undefined}\n typography=\"default-bold\"\n />\n )}\n {(cell?.secondaryCurrency ?? cell?.secondaryText) && (\n <Body>\n {cell?.type === 'currency'\n ? formatCurrencyValue(cell?.secondaryCurrency)\n : cell?.secondaryText}\n </Body>\n )}\n </div>\n </div>\n )}\n {children}\n </td>\n );\n};\n\nexport default TableCell;\n"],"names":["TableCell","cell","alignment","className","colSpan","children","getContentMedia","mediaContent","type","avatar","src","profileName","_jsx","AvatarView","size","imgSrc","primaryCurrency","currency","Flag","code","toLowerCase","intrinsicSize","StatusIcon","sentiment","media","formatCurrencyValue","Money","amount","alwaysShowDecimals","_jsxs","clsx","text","TableStatusText","status","includes","primaryText","undefined","typography","secondaryCurrency","secondaryText","Body"],"mappings":"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"}
@@ -36,6 +36,12 @@ const TableCell = ({
36
36
  sentiment: cell?.sentiment ?? 'neutral'
37
37
  });
38
38
  }
39
+ if (cell?.type === 'media' && cell.media) {
40
+ // eslint-disable-next-line jsx-a11y/alt-text
41
+ mediaContent = /*#__PURE__*/jsx("img", {
42
+ ...cell.media
43
+ });
44
+ }
39
45
  if (mediaContent) {
40
46
  return /*#__PURE__*/jsx("div", {
41
47
  "aria-hidden": "true",
@@ -61,7 +67,7 @@ const TableCell = ({
61
67
  children: [cell?.type === 'text' && cell?.text && /*#__PURE__*/jsx(TableStatusText, {
62
68
  text: cell?.text,
63
69
  status: cell?.status
64
- }), cell?.type && ['leading', 'currency', 'status'].includes(cell?.type) && /*#__PURE__*/jsxs("div", {
70
+ }), cell?.type && ['leading', 'currency', 'status', 'media'].includes(cell?.type) && /*#__PURE__*/jsxs("div", {
65
71
  className: clsx('np-table-content', {
66
72
  'np-table-content--reversed': alignment === 'right'
67
73
  }),
@@ -1 +1 @@
1
- {"version":3,"file":"TableCell.mjs","sources":["../../src/table/TableCell.tsx"],"sourcesContent":["import TableStatusText from './TableStatusText';\nimport StatusIcon from '../statusIcon';\nimport { Flag } from '@wise/art';\nimport React from 'react';\nimport { clsx } from 'clsx';\nimport Body from '../body';\nimport Money, { MoneyProps } from '../money';\nimport AvatarView from '../avatarView';\n\ninterface TableCellTypeProp {\n type: 'leading' | 'text' | 'currency' | 'status';\n}\n\n// `Leading` and `Status` cell types have 2 text fields: `primaryText` and `secondaryText`\ninterface TableCellTextProps {\n primaryText?: string;\n secondaryText?: string;\n}\n\n// `Leading`, `Text` and `Currency` cells' types can have a status indicator with `error` or `success` values\ninterface TableCellStatusProp {\n status?: 'error' | 'success';\n}\n\nexport interface TableCellLeading\n extends TableCellTypeProp,\n TableCellTextProps,\n TableCellStatusProp {\n avatar?: {\n src?: string;\n profileName?: string | null;\n };\n}\n\nexport interface TableCellText extends TableCellTypeProp, TableCellStatusProp {\n text?: string;\n}\n\nexport interface TableCellCurrency extends TableCellTypeProp, TableCellStatusProp {\n primaryCurrency?: MoneyProps;\n secondaryCurrency?: MoneyProps;\n}\n\nexport interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {\n sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';\n}\n\nexport interface TableCellType {\n cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus;\n alignment?: 'left' | 'right';\n}\n\n// These properties should be exported only on the lib level to prevent visual issues because of incorrect usage.\nexport interface TableCellProps extends TableCellType {\n className?: string;\n colSpan?: number;\n children?: React.ReactNode;\n}\n\nconst TableCell = ({ cell, alignment = 'left', className, colSpan, children }: TableCellProps) => {\n const getContentMedia = () => {\n let mediaContent = null;\n\n if (cell?.type === 'leading' && (cell?.avatar?.src || cell?.avatar?.profileName)) {\n mediaContent = (\n <AvatarView profileName={cell?.avatar?.profileName} size={40} imgSrc={cell?.avatar?.src} />\n );\n }\n\n if (cell?.type === 'currency' && cell?.primaryCurrency?.currency) {\n mediaContent = (\n <Flag code={cell?.primaryCurrency?.currency?.toLowerCase()} intrinsicSize={24} />\n );\n }\n\n if (cell?.type === 'status') {\n mediaContent = <StatusIcon size={24} sentiment={cell?.sentiment ?? 'neutral'} />;\n }\n\n if (mediaContent) {\n return (\n <div\n aria-hidden=\"true\"\n className=\"np-table-content-media\"\n data-testid=\"np-table-content-media\"\n >\n {mediaContent}\n </div>\n );\n }\n };\n\n const formatCurrencyValue = (currency?: MoneyProps) => {\n if (currency) {\n return <Money amount={currency.amount} currency={currency.currency} alwaysShowDecimals />;\n }\n\n return '';\n };\n\n return (\n <td\n className={clsx(\n 'np-table-cell',\n cell?.type ? `np-table-cell--${cell?.type}` : '',\n `np-table-cell--${alignment}`,\n className,\n )}\n colSpan={colSpan}\n >\n {cell?.type === 'text' && cell?.text && (\n <TableStatusText text={cell?.text} status={cell?.status} />\n )}\n {cell?.type && ['leading', 'currency', 'status'].includes(cell?.type) && (\n <div\n className={clsx('np-table-content', {\n 'np-table-content--reversed': alignment === 'right',\n })}\n data-testid=\"np-table-content\"\n >\n {getContentMedia()}\n <div className=\"np-table-content-body\">\n {(cell?.primaryCurrency ?? cell?.primaryText) && (\n <TableStatusText\n text={\n cell?.type === 'currency'\n ? formatCurrencyValue(cell?.primaryCurrency)\n : (cell?.primaryText ?? '')\n }\n status={cell?.type !== 'status' ? cell?.status : undefined}\n typography=\"default-bold\"\n />\n )}\n {(cell?.secondaryCurrency ?? cell?.secondaryText) && (\n <Body>\n {cell?.type === 'currency'\n ? formatCurrencyValue(cell?.secondaryCurrency)\n : cell?.secondaryText}\n </Body>\n )}\n </div>\n </div>\n )}\n {children}\n </td>\n );\n};\n\nexport default TableCell;\n"],"names":["TableCell","cell","alignment","className","colSpan","children","getContentMedia","mediaContent","type","avatar","src","profileName","_jsx","AvatarView","size","imgSrc","primaryCurrency","currency","Flag","code","toLowerCase","intrinsicSize","StatusIcon","sentiment","formatCurrencyValue","Money","amount","alwaysShowDecimals","_jsxs","clsx","text","TableStatusText","status","includes","primaryText","undefined","typography","secondaryCurrency","secondaryText","Body"],"mappings":"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"}
1
+ {"version":3,"file":"TableCell.mjs","sources":["../../src/table/TableCell.tsx"],"sourcesContent":["import TableStatusText from './TableStatusText';\nimport StatusIcon from '../statusIcon';\nimport { Flag } from '@wise/art';\nimport React, { ImgHTMLAttributes } from 'react';\nimport { clsx } from 'clsx';\nimport Body from '../body';\nimport Money, { MoneyProps } from '../money';\nimport AvatarView from '../avatarView';\n\ninterface TableCellTypeProp {\n type: 'leading' | 'text' | 'currency' | 'status' | 'media';\n}\n\n// `Media`, `Leading` and `Status` cell types have 2 text fields: `primaryText` and `secondaryText`\ninterface TableCellTextProps {\n primaryText?: string;\n secondaryText?: string;\n}\n\n// `Leading`, `Text` and `Currency` cells' types can have a status indicator with `error` or `success` values\ninterface TableCellStatusProp {\n status?: 'error' | 'success';\n}\n\nexport interface TableCellMedia extends TableCellTypeProp, TableCellTextProps {\n media?: ImgHTMLAttributes<HTMLImageElement>;\n}\n\nexport interface TableCellLeading\n extends TableCellTypeProp,\n TableCellTextProps,\n TableCellStatusProp {\n avatar?: {\n src?: string;\n profileName?: string | null;\n };\n}\n\nexport interface TableCellText extends TableCellTypeProp, TableCellStatusProp {\n text?: string;\n}\n\nexport interface TableCellCurrency extends TableCellTypeProp, TableCellStatusProp {\n primaryCurrency?: MoneyProps;\n secondaryCurrency?: MoneyProps;\n}\n\nexport interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {\n sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';\n}\n\nexport interface TableCellType {\n cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus & TableCellMedia;\n alignment?: 'left' | 'right';\n}\n\n// These properties should be exported only on the lib level to prevent visual issues because of incorrect usage.\nexport interface TableCellProps extends TableCellType {\n className?: string;\n colSpan?: number;\n children?: React.ReactNode;\n}\n\nconst TableCell = ({ cell, alignment = 'left', className, colSpan, children }: TableCellProps) => {\n const getContentMedia = () => {\n let mediaContent = null;\n\n if (cell?.type === 'leading' && (cell?.avatar?.src || cell?.avatar?.profileName)) {\n mediaContent = (\n <AvatarView profileName={cell?.avatar?.profileName} size={40} imgSrc={cell?.avatar?.src} />\n );\n }\n\n if (cell?.type === 'currency' && cell?.primaryCurrency?.currency) {\n mediaContent = (\n <Flag code={cell?.primaryCurrency?.currency?.toLowerCase()} intrinsicSize={24} />\n );\n }\n\n if (cell?.type === 'status') {\n mediaContent = <StatusIcon size={24} sentiment={cell?.sentiment ?? 'neutral'} />;\n }\n\n if (cell?.type === 'media' && cell.media) {\n // eslint-disable-next-line jsx-a11y/alt-text\n mediaContent = <img {...cell.media} />;\n }\n\n if (mediaContent) {\n return (\n <div\n aria-hidden=\"true\"\n className=\"np-table-content-media\"\n data-testid=\"np-table-content-media\"\n >\n {mediaContent}\n </div>\n );\n }\n };\n\n const formatCurrencyValue = (currency?: MoneyProps) => {\n if (currency) {\n return <Money amount={currency.amount} currency={currency.currency} alwaysShowDecimals />;\n }\n\n return '';\n };\n\n return (\n <td\n className={clsx(\n 'np-table-cell',\n cell?.type ? `np-table-cell--${cell?.type}` : '',\n `np-table-cell--${alignment}`,\n className,\n )}\n colSpan={colSpan}\n >\n {cell?.type === 'text' && cell?.text && (\n <TableStatusText text={cell?.text} status={cell?.status} />\n )}\n {cell?.type && ['leading', 'currency', 'status', 'media'].includes(cell?.type) && (\n <div\n className={clsx('np-table-content', {\n 'np-table-content--reversed': alignment === 'right',\n })}\n data-testid=\"np-table-content\"\n >\n {getContentMedia()}\n <div className=\"np-table-content-body\">\n {(cell?.primaryCurrency ?? cell?.primaryText) && (\n <TableStatusText\n text={\n cell?.type === 'currency'\n ? formatCurrencyValue(cell?.primaryCurrency)\n : (cell?.primaryText ?? '')\n }\n status={cell?.type !== 'status' ? cell?.status : undefined}\n typography=\"default-bold\"\n />\n )}\n {(cell?.secondaryCurrency ?? cell?.secondaryText) && (\n <Body>\n {cell?.type === 'currency'\n ? formatCurrencyValue(cell?.secondaryCurrency)\n : cell?.secondaryText}\n </Body>\n )}\n </div>\n </div>\n )}\n {children}\n </td>\n );\n};\n\nexport default TableCell;\n"],"names":["TableCell","cell","alignment","className","colSpan","children","getContentMedia","mediaContent","type","avatar","src","profileName","_jsx","AvatarView","size","imgSrc","primaryCurrency","currency","Flag","code","toLowerCase","intrinsicSize","StatusIcon","sentiment","media","formatCurrencyValue","Money","amount","alwaysShowDecimals","_jsxs","clsx","text","TableStatusText","status","includes","primaryText","undefined","typography","secondaryCurrency","secondaryText","Body"],"mappings":"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"}
@@ -0,0 +1 @@
1
+ <svg width="64" height="42" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#business_green_wise_2023_active__a)"><g filter="url(#business_green_wise_2023_active__b)" clip-path="url(#business_green_wise_2023_active__c)"><g clip-path="url(#business_green_wise_2023_active__d)"><rect width="64" height="42" rx="5" fill="#163300"/><mask id="business_green_wise_2023_active__e" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="43" y="6" width="15" height="14"><path d="m43.917 15.059 3.65-4.294h-.002l-2.218-3.892h12.07l-4.672 12.916h-2.648l3.87-10.716h-4.991l1.11 1.922-.006.053-1.706 1.986h2.792l-.733 2.025h-6.516Z" fill="#F0F"/></mask><g mask="url(#business_green_wise_2023_active__e)"><path fill="#9FE870" d="M42.667 5.333h16v16h-16z"/></g><g style="mix-blend-mode:overlay" opacity=".2" filter="url(#business_green_wise_2023_active__f)"><path fill="#fff" d="m35.549-5.015 35.995-.628.907 51.992-35.994.628z"/></g><g style="mix-blend-mode:overlay" opacity=".14" filter="url(#business_green_wise_2023_active__g)"><path fill="#000" d="m-18.197-5.015 35.995-.628.907 51.992-35.994.628z"/></g></g></g></g><defs><filter id="business_green_wise_2023_active__a" x="0" y="-.6" width="64" height="42.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-.6"/><feGaussianBlur stdDeviation=".3"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/><feBlend in2="shape" result="effect1_innerShadow_957_18749"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation=".2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"/><feBlend in2="effect1_innerShadow_957_18749" result="effect2_innerShadow_957_18749"/></filter><filter id="business_green_wise_2023_active__b" x="0" y="-.6" width="64" height="42.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-.6"/><feGaussianBlur stdDeviation=".3"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/><feBlend in2="shape" result="effect1_innerShadow_957_18749"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation=".2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"/><feBlend in2="effect1_innerShadow_957_18749" result="effect2_innerShadow_957_18749"/></filter><filter id="business_green_wise_2023_active__f" x="24.549" y="-16.644" width="58.902" height="74.62" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="5.5" result="effect1_foregroundBlur_957_18749"/></filter><filter id="business_green_wise_2023_active__g" x="-36.197" y="-23.644" width="72.902" height="88.62" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="9" result="effect1_foregroundBlur_957_18749"/></filter><clipPath id="business_green_wise_2023_active__c"><rect width="64" height="42" rx="5" fill="#fff"/></clipPath><clipPath id="business_green_wise_2023_active__d"><rect width="64" height="42" rx="5" fill="#fff"/></clipPath></defs></svg>
@@ -1,5 +1,8 @@
1
1
  import { ButtonHTMLAttributes } from 'react';
2
2
  import { PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';
3
+ /**
4
+ * @deprecated use `<Button />` component instead with `ButtonProps`
5
+ */
3
6
  export type ActionButtonProps = {
4
7
  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;
5
8
  /**
@@ -7,6 +10,9 @@ export type ActionButtonProps = {
7
10
  */
8
11
  text?: string;
9
12
  } & ButtonHTMLAttributes<HTMLButtonElement>;
13
+ /**
14
+ * @deprecated use `<Button v2 size="sm" priority={'primary' / 'secondary-neutral' / 'tertiary'} .. />` component instead
15
+ */
10
16
  declare const ActionButton: import("react").ForwardRefExoticComponent<{
11
17
  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;
12
18
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/actionButton/ActionButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAc,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAY,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAE3F,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;IAClE;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C,QAAA,MAAM,YAAY;eAPL,eAAe,GAAG,iBAAiB,GAAG,gBAAgB;IACjE;;OAEG;WACI,MAAM;+FAoCd,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/actionButton/ActionButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAc,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAY,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAE3F;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;IAClE;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C;;GAEG;AACH,QAAA,MAAM,YAAY;eAVL,eAAe,GAAG,iBAAiB,GAAG,gBAAgB;IACjE;;OAEG;WACI,MAAM;+FAuCd,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -1,4 +1,5 @@
1
1
  import { CommonProps, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';
2
+ type ActionOptionPriority = PriorityPrimary | PrioritySecondary | PriorityTertiary | 'secondary-send';
2
3
  export type ActionOptionProps = {
3
4
  complex?: boolean;
4
5
  content?: React.ReactNode;
@@ -8,7 +9,7 @@ export type ActionOptionProps = {
8
9
  onClick: () => void;
9
10
  title: React.ReactNode;
10
11
  action: React.ReactNode;
11
- priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;
12
+ priority?: ActionOptionPriority;
12
13
  showMediaCircle?: boolean;
13
14
  isContainerAligned?: boolean;
14
15
  as?: React.ElementType;
@@ -1 +1 @@
1
- {"version":3,"file":"ActionOption.d.ts","sourceRoot":"","sources":["../../../src/actionOption/ActionOption.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,EAEX,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,WAAW,CAAC;AAGnB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;IAClE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACxB,GAAG,WAAW,CAAC;AAEhB,QAAA,MAAM,YAAY,sJAcf,iBAAiB,gCA2CnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"ActionOption.d.ts","sourceRoot":"","sources":["../../../src/actionOption/ActionOption.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,EAEX,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,WAAW,CAAC;AAInB,KAAK,oBAAoB,GACrB,eAAe,GACf,iBAAiB,GACjB,gBAAgB,GAChB,gBAAgB,CAAC;AAErB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACxB,GAAG,WAAW,CAAC;AAEhB,QAAA,MAAM,YAAY,sJAcf,iBAAiB,gCA4DnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -1,4 +1,4 @@
1
- import { Sentiment, Size, Variant } from '../common';
1
+ import { Sentiment, Size } from '../common';
2
2
  export type AlertAction = {
3
3
  'aria-label'?: string;
4
4
  href?: string;
@@ -8,7 +8,7 @@ export type AlertAction = {
8
8
  };
9
9
  /** @deprecated Use `"top" | "bottom"` instead. */
10
10
  type AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;
11
- type AlertTypeResolved = `${Sentiment.POSITIVE | Sentiment.NEUTRAL | Sentiment.WARNING | Sentiment.NEGATIVE}`;
11
+ type AlertTypeResolved = `${Sentiment.POSITIVE | Sentiment.NEUTRAL | Sentiment.WARNING | Sentiment.PENDING | Sentiment.NEGATIVE}`;
12
12
  export type AlertType = AlertTypeResolved | AlertTypeDeprecated;
13
13
  export declare enum AlertArrowPosition {
14
14
  TOP_LEFT = "up-left",
@@ -37,7 +37,6 @@ export interface AlertProps {
37
37
  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;
38
38
  /** The type dictates which icon and colour will be used */
39
39
  type?: AlertType;
40
- variant?: `${Variant}`;
41
40
  /** @deprecated Use `InlineAlert` instead. */
42
41
  arrow?: `${AlertArrowPosition}`;
43
42
  /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */
@@ -47,6 +46,6 @@ export interface AlertProps {
47
46
  /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */
48
47
  size?: `${Size}`;
49
48
  }
50
- export default function Alert({ action, className, icon, statusIconLabel, onDismiss, message, title, type, variant, arrow, children, size, dismissible, }: AlertProps): import("react").JSX.Element;
49
+ export default function Alert({ action, className, icon, statusIconLabel, onDismiss, message, title, type, arrow, children, size, dismissible, }: AlertProps): import("react").JSX.Element;
51
50
  export {};
52
51
  //# sourceMappingURL=Alert.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,SAAS,EACT,IAAI,EAEJ,OAAO,EAER,MAAM,WAAW,CAAC;AASnB,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,kDAAkD;AAClD,KAAK,mBAAmB,GAAG,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;AACrF,KAAK,iBAAiB,GAAG,GACrB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,QAAQ,EAAE,CAAC;AACzB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;SAGK;IACL,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IACvB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAChC,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;CAClB;AAeD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,IAAI,EACJ,eAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EACL,IAAgB,EAChB,OAAmB,EACnB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,WAAW,GACZ,EAAE,UAAU,+BAkHZ"}
1
+ {"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAe,SAAS,EAAE,IAAI,EAAwC,MAAM,WAAW,CAAC;AAS/F,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,kDAAkD;AAClD,KAAK,mBAAmB,GAAG,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;AACrF,KAAK,iBAAiB,GAAG,GACrB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,QAAQ,EAAE,CAAC;AACzB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;SAGK;IACL,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAChC,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;CAClB;AAeD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,IAAI,EACJ,eAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EACL,IAAgB,EAChB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,WAAW,GACZ,EAAE,UAAU,+BAuHZ"}
@@ -3,6 +3,9 @@ type LegacyAvatarSize = 'sm' | 'md' | 'lg';
3
3
  export type AvatarSize = NumericAvatarSize | LegacyAvatarSize;
4
4
  export type AvatarTheme = 'light' | 'dark';
5
5
  export type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';
6
+ /**
7
+ * @deprecated `Avatar` is deprecated please use `AvatarView` instead
8
+ */
6
9
  export interface AvatarProps {
7
10
  backgroundColor?: string;
8
11
  backgroundColorSeed?: string;
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/avatar/Avatar.tsx"],"names":[],"mappings":"AAOA,KAAK,iBAAiB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEhD,KAAK,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAE9D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;AAErE,MAAM,WAAW,WAAW;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAkBD;;GAEG;AACH,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwCjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/avatar/Avatar.tsx"],"names":[],"mappings":"AAOA,KAAK,iBAAiB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEhD,KAAK,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAE9D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;AAErE;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAkBD;;GAEG;AACH,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwCjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
@@ -1,3 +1,6 @@
1
+ /**
2
+ * @deprecated `Avatar` is deprecated please use `AvatarView` instead
3
+ */
1
4
  export declare enum AvatarType {
2
5
  THUMBNAIL = "thumbnail",
3
6
  ICON = "icon",
@@ -1 +1 @@
1
- {"version":3,"file":"avatarTypes.d.ts","sourceRoot":"","sources":["../../../src/avatar/avatarTypes.ts"],"names":[],"mappings":"AACA,oBAAY,UAAU;IACpB,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,QAAQ,aAAa;CACtB"}
1
+ {"version":3,"file":"avatarTypes.d.ts","sourceRoot":"","sources":["../../../src/avatar/avatarTypes.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,oBAAY,UAAU;IACpB,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,QAAQ,aAAa;CACtB"}
@@ -5,6 +5,9 @@ import { BadgeAssetsProps } from '.';
5
5
  * @deprecated Use `16` or `24` instead.
6
6
  */
7
7
  type DeprecatedSizes = SizeSmall | SizeMedium | SizeLarge;
8
+ /**
9
+ * @deprecated `Badge` is deprecated please use `<AvatarView badge={..} />` instead
10
+ */
8
11
  export type BadgeProps = {
9
12
  badge: ReactNode;
10
13
  children: ReactNode;
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,WAAW,EACZ,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,GAAG,CAAC;AAErC;;GAEG;AACH,KAAK,eAAe,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAE1D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,WAAW,CAAC;AAWhB;;GAEG;AACH,QAAA,MAAM,KAAK,4FAQR,UAAU,gCAiBZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,WAAW,EACZ,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,GAAG,CAAC;AAErC;;GAEG;AACH,KAAK,eAAe,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAE1D;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,WAAW,CAAC;AAWhB;;GAEG;AACH,QAAA,MAAM,KAAK,4FAQR,UAAU,gCAiBZ,CAAC;AAEF,eAAe,KAAK,CAAC"}