@transferwise/components 0.0.0-experimental-47052c9 → 0.0.0-experimental-b2b287d

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 (149) hide show
  1. package/build/Snackbar/Snackbar.js +178 -102
  2. package/build/Snackbar/Snackbar.js.map +1 -1
  3. package/build/Snackbar/Snackbar.messages.js +14 -0
  4. package/build/Snackbar/Snackbar.messages.js.map +1 -0
  5. package/build/Snackbar/Snackbar.messages.mjs +10 -0
  6. package/build/Snackbar/Snackbar.messages.mjs.map +1 -0
  7. package/build/Snackbar/Snackbar.mjs +180 -101
  8. package/build/Snackbar/Snackbar.mjs.map +1 -1
  9. package/build/Snackbar/SnackbarContext.js.map +1 -1
  10. package/build/Snackbar/SnackbarContext.mjs.map +1 -1
  11. package/build/Snackbar/SnackbarPortal.js +12 -0
  12. package/build/Snackbar/SnackbarPortal.js.map +1 -0
  13. package/build/Snackbar/SnackbarPortal.mjs +8 -0
  14. package/build/Snackbar/SnackbarPortal.mjs.map +1 -0
  15. package/build/Snackbar/SnackbarProvider.js +24 -28
  16. package/build/Snackbar/SnackbarProvider.js.map +1 -1
  17. package/build/Snackbar/SnackbarProvider.mjs +25 -29
  18. package/build/Snackbar/SnackbarProvider.mjs.map +1 -1
  19. package/build/Snackbar/constants.js +17 -0
  20. package/build/Snackbar/constants.js.map +1 -0
  21. package/build/Snackbar/constants.mjs +11 -0
  22. package/build/Snackbar/constants.mjs.map +1 -0
  23. package/build/Snackbar/useSnackbarAutoDismiss.js +66 -0
  24. package/build/Snackbar/useSnackbarAutoDismiss.js.map +1 -0
  25. package/build/Snackbar/useSnackbarAutoDismiss.mjs +62 -0
  26. package/build/Snackbar/useSnackbarAutoDismiss.mjs.map +1 -0
  27. package/build/Snackbar/useSnackbarManager.js +153 -0
  28. package/build/Snackbar/useSnackbarManager.js.map +1 -0
  29. package/build/Snackbar/useSnackbarManager.mjs +149 -0
  30. package/build/Snackbar/useSnackbarManager.mjs.map +1 -0
  31. package/build/Snackbar/useSnackbarSwipeDismiss.js +135 -0
  32. package/build/Snackbar/useSnackbarSwipeDismiss.js.map +1 -0
  33. package/build/Snackbar/useSnackbarSwipeDismiss.mjs +131 -0
  34. package/build/Snackbar/useSnackbarSwipeDismiss.mjs.map +1 -0
  35. package/build/i18n/en.json +1 -0
  36. package/build/i18n/en.json.js +1 -0
  37. package/build/i18n/en.json.js.map +1 -1
  38. package/build/i18n/en.json.mjs +1 -0
  39. package/build/i18n/en.json.mjs.map +1 -1
  40. package/build/index.js +0 -4
  41. package/build/index.js.map +1 -1
  42. package/build/index.mjs +0 -2
  43. package/build/index.mjs.map +1 -1
  44. package/build/main.css +116 -245
  45. package/build/styles/Snackbar/Snackbar.css +117 -54
  46. package/build/styles/main.css +116 -245
  47. package/build/types/Snackbar/Snackbar.d.ts +55 -9
  48. package/build/types/Snackbar/Snackbar.d.ts.map +1 -1
  49. package/build/types/Snackbar/Snackbar.messages.d.ts +9 -0
  50. package/build/types/Snackbar/Snackbar.messages.d.ts.map +1 -0
  51. package/build/types/Snackbar/Snackbar.types.d.ts +12 -0
  52. package/build/types/Snackbar/Snackbar.types.d.ts.map +1 -0
  53. package/build/types/Snackbar/SnackbarContext.d.ts +2 -2
  54. package/build/types/Snackbar/SnackbarContext.d.ts.map +1 -1
  55. package/build/types/Snackbar/SnackbarPortal.d.ts +4 -0
  56. package/build/types/Snackbar/SnackbarPortal.d.ts.map +1 -0
  57. package/build/types/Snackbar/SnackbarProvider.d.ts +7 -0
  58. package/build/types/Snackbar/SnackbarProvider.d.ts.map +1 -1
  59. package/build/types/Snackbar/constants.d.ts +9 -0
  60. package/build/types/Snackbar/constants.d.ts.map +1 -0
  61. package/build/types/Snackbar/index.d.ts +1 -1
  62. package/build/types/Snackbar/index.d.ts.map +1 -1
  63. package/build/types/Snackbar/useSnackbar.d.ts +1 -1
  64. package/build/types/Snackbar/useSnackbar.d.ts.map +1 -1
  65. package/build/types/Snackbar/useSnackbarAutoDismiss.d.ts +13 -0
  66. package/build/types/Snackbar/useSnackbarAutoDismiss.d.ts.map +1 -0
  67. package/build/types/Snackbar/useSnackbarManager.d.ts +20 -0
  68. package/build/types/Snackbar/useSnackbarManager.d.ts.map +1 -0
  69. package/build/types/Snackbar/useSnackbarSwipeDismiss.d.ts +22 -0
  70. package/build/types/Snackbar/useSnackbarSwipeDismiss.d.ts.map +1 -0
  71. package/build/types/index.d.ts +1 -5
  72. package/build/types/index.d.ts.map +1 -1
  73. package/build/types/test-utils/index.d.ts +2 -0
  74. package/build/types/test-utils/index.d.ts.map +1 -1
  75. package/package.json +3 -3
  76. package/src/FlowNavigation/_stories/FlowNavigation.CriticalBanner.docs.mdx +66 -0
  77. package/src/Prompt/CriticalBanner/_stories/CriticalBanner.story.tsx +2 -0
  78. package/src/Snackbar/Snackbar.css +117 -54
  79. package/src/Snackbar/Snackbar.less +139 -60
  80. package/src/Snackbar/Snackbar.messages.ts +9 -0
  81. package/src/Snackbar/Snackbar.test.tsx +989 -119
  82. package/src/Snackbar/Snackbar.tsx +208 -93
  83. package/src/Snackbar/Snackbar.types.ts +17 -0
  84. package/src/Snackbar/SnackbarContext.ts +2 -2
  85. package/src/Snackbar/SnackbarPortal.tsx +8 -0
  86. package/src/Snackbar/SnackbarProvider.test.tsx +783 -0
  87. package/src/Snackbar/SnackbarProvider.tsx +27 -19
  88. package/src/Snackbar/_stories/Snackbar.accessibility.docs.mdx +58 -0
  89. package/src/Snackbar/_stories/Snackbar.rtl.test.story.tsx +16 -8
  90. package/src/Snackbar/_stories/Snackbar.story.tsx +388 -61
  91. package/src/Snackbar/_stories/Snackbar.test.story.tsx +171 -47
  92. package/src/Snackbar/constants.ts +10 -0
  93. package/src/Snackbar/index.ts +1 -1
  94. package/src/Snackbar/useSnackbarAutoDismiss.ts +74 -0
  95. package/src/Snackbar/useSnackbarManager.ts +169 -0
  96. package/src/Snackbar/useSnackbarSwipeDismiss.ts +169 -0
  97. package/src/i18n/en.json +1 -0
  98. package/src/index.ts +1 -14
  99. package/src/main.css +116 -245
  100. package/src/main.less +0 -2
  101. package/build/CardContainer/CardContainer.js +0 -34
  102. package/build/CardContainer/CardContainer.js.map +0 -1
  103. package/build/CardContainer/CardContainer.mjs +0 -30
  104. package/build/CardContainer/CardContainer.mjs.map +0 -1
  105. package/build/CardWidget/CardWidget.js +0 -98
  106. package/build/CardWidget/CardWidget.js.map +0 -1
  107. package/build/CardWidget/CardWidget.mjs +0 -94
  108. package/build/CardWidget/CardWidget.mjs.map +0 -1
  109. package/build/CardWidget/CardWidgetAction.js +0 -73
  110. package/build/CardWidget/CardWidgetAction.js.map +0 -1
  111. package/build/CardWidget/CardWidgetAction.mjs +0 -68
  112. package/build/CardWidget/CardWidgetAction.mjs.map +0 -1
  113. package/build/styles/CardContainer/CardContainer.css +0 -108
  114. package/build/styles/CardWidget/CardWidget.css +0 -84
  115. package/build/types/CardContainer/CardContainer.d.ts +0 -8
  116. package/build/types/CardContainer/CardContainer.d.ts.map +0 -1
  117. package/build/types/CardContainer/CardContainer.types.d.ts +0 -53
  118. package/build/types/CardContainer/CardContainer.types.d.ts.map +0 -1
  119. package/build/types/CardContainer/_stories/helpers.d.ts +0 -3
  120. package/build/types/CardContainer/_stories/helpers.d.ts.map +0 -1
  121. package/build/types/CardContainer/index.d.ts +0 -3
  122. package/build/types/CardContainer/index.d.ts.map +0 -1
  123. package/build/types/CardWidget/CardWidget.d.ts +0 -10
  124. package/build/types/CardWidget/CardWidget.d.ts.map +0 -1
  125. package/build/types/CardWidget/CardWidget.types.d.ts +0 -55
  126. package/build/types/CardWidget/CardWidget.types.d.ts.map +0 -1
  127. package/build/types/CardWidget/CardWidgetAction.d.ts +0 -54
  128. package/build/types/CardWidget/CardWidgetAction.d.ts.map +0 -1
  129. package/build/types/CardWidget/index.d.ts +0 -4
  130. package/build/types/CardWidget/index.d.ts.map +0 -1
  131. package/src/CardContainer/CardContainer.css +0 -108
  132. package/src/CardContainer/CardContainer.less +0 -171
  133. package/src/CardContainer/CardContainer.test.tsx +0 -150
  134. package/src/CardContainer/CardContainer.tsx +0 -51
  135. package/src/CardContainer/CardContainer.types.ts +0 -60
  136. package/src/CardContainer/_stories/CardContainer.story.tsx +0 -167
  137. package/src/CardContainer/_stories/CardContainer.test.story.tsx +0 -103
  138. package/src/CardContainer/_stories/helpers.tsx +0 -50
  139. package/src/CardContainer/index.ts +0 -6
  140. package/src/CardWidget/CardWidget.css +0 -84
  141. package/src/CardWidget/CardWidget.less +0 -110
  142. package/src/CardWidget/CardWidget.test.tsx +0 -222
  143. package/src/CardWidget/CardWidget.tsx +0 -83
  144. package/src/CardWidget/CardWidget.types.ts +0 -63
  145. package/src/CardWidget/CardWidgetAction.tsx +0 -128
  146. package/src/CardWidget/_stories/CardWidget.story.tsx +0 -238
  147. package/src/CardWidget/_stories/CardWidget.test.story.tsx +0 -350
  148. package/src/CardWidget/index.ts +0 -3
  149. package/src/Prompt/CriticalBanner/_stories/CriticalBanner.docs.mdx +0 -122
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useSnackbarSwipeDismiss.js","sources":["../../src/Snackbar/useSnackbarSwipeDismiss.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\nimport { SNACKBAR_SWIPE_DISMISS_THRESHOLD } from './constants';\n\nconst DISMISS_CLASS = 'wds-Snackbar--swipe-dismiss';\nconst SETTLE_CLASS = 'wds-Snackbar--swipe-settle';\n\ntype SwipePointer = {\n id: number;\n target: Element;\n startX: number;\n startY: number;\n threshold: number;\n};\n\n/**\n * Captures one primary pointer and follows downward, mostly vertical movement without re-rendering.\n * Release dismisses at half the surface height; shorter/cancelled gestures settle back into place.\n * The outer wrapper moves independently of entry/exit motion, and a committed swipe consumes its\n * follow-up click so dragging from the action cannot activate it.\n */\nconst useSnackbarSwipeDismiss = ({\n onDismissRequest,\n onSwipeChange,\n visible,\n}: {\n onDismissRequest: () => void;\n /** Reports when a gesture starts and ends so auto-dismiss can pause beneath the pointer. */\n onSwipeChange: (swiping: boolean) => void;\n visible: boolean;\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const pointerRef = useRef<SwipePointer | null>(null);\n const suppressClick = useRef(false);\n\n const clearSwipePosition = useCallback(() => {\n const pointer = pointerRef.current;\n pointerRef.current = null;\n if (pointer) {\n if (pointer.target.hasPointerCapture?.(pointer.id)) {\n pointer.target.releasePointerCapture(pointer.id);\n }\n onSwipeChange(false);\n }\n suppressClick.current = false;\n containerRef.current?.classList.remove(DISMISS_CLASS, SETTLE_CLASS);\n containerRef.current?.style.removeProperty('transform');\n }, [onSwipeChange]);\n\n const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n if (event.button !== 0 || !event.isPrimary || pointerRef.current) {\n return;\n }\n\n clearSwipePosition();\n const target = event.target as Element;\n target.setPointerCapture?.(event.pointerId);\n pointerRef.current = {\n id: event.pointerId,\n target,\n startX: event.clientX,\n startY: event.clientY,\n threshold: event.currentTarget.offsetHeight * SNACKBAR_SWIPE_DISMISS_THRESHOLD,\n };\n onSwipeChange(true);\n };\n\n const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {\n const pointer = pointerRef.current;\n if (pointer?.id !== event.pointerId) {\n return;\n }\n\n const offsetY = event.clientY - pointer.startY;\n const offsetX = event.clientX - pointer.startX;\n if (offsetY > 0 && offsetY > Math.abs(offsetX)) {\n containerRef.current?.style.setProperty('transform', `translateY(${offsetY}px)`);\n } else {\n containerRef.current?.style.removeProperty('transform');\n }\n };\n\n const handlePointerUp = (event: React.PointerEvent<HTMLDivElement>) => {\n const pointer = pointerRef.current;\n if (pointer?.id !== event.pointerId) {\n return;\n }\n\n const offsetY = event.clientY - pointer.startY;\n const offsetX = event.clientX - pointer.startX;\n const container = containerRef.current;\n const bounds = pointer.target.closest('a, button')?.getBoundingClientRect();\n clearSwipePosition();\n\n if (offsetY >= pointer.threshold && offsetY > Math.abs(offsetX)) {\n if (container) {\n // Include wrapper padding and the safe area, not only the surface, to clear the viewport.\n container.classList.add(DISMISS_CLASS);\n container.style.setProperty(\n 'transform',\n `translateY(${Math.max(offsetY, container.offsetHeight)}px)`,\n );\n }\n suppressClick.current = true;\n onDismissRequest();\n } else {\n // Capture retargets clicks to the pressed control even when released outside it.\n suppressClick.current =\n !!bounds &&\n (offsetX !== 0 || offsetY !== 0) &&\n (event.clientX < bounds.left ||\n event.clientX > bounds.right ||\n event.clientY < bounds.top ||\n event.clientY > bounds.bottom);\n container?.classList.add(SETTLE_CLASS);\n }\n };\n\n const handlePointerCancel = useCallback(\n (event: Pick<PointerEvent, 'pointerId'>) => {\n if (pointerRef.current?.id !== event.pointerId) {\n return;\n }\n\n clearSwipePosition();\n containerRef.current?.classList.add(SETTLE_CLASS);\n },\n [clearSwipePosition],\n );\n\n useEffect(() => {\n if (visible) {\n clearSwipePosition();\n } else if (pointerRef.current) {\n // An exit starting mid-gesture (timeout, Escape, replacement) ends it without dismissing again.\n handlePointerCancel({ pointerId: pointerRef.current.id });\n }\n }, [visible, clearSwipePosition, handlePointerCancel]);\n\n useEffect(() => {\n // Removed descendants report capture loss on their document, not the Snackbar surface.\n const ownerDocument = containerRef.current?.ownerDocument;\n ownerDocument?.addEventListener('lostpointercapture', handlePointerCancel);\n return () => {\n ownerDocument?.removeEventListener('lostpointercapture', handlePointerCancel);\n clearSwipePosition();\n };\n }, [clearSwipePosition, handlePointerCancel]);\n\n const handleClickCapture = (event: React.MouseEvent<HTMLDivElement>) => {\n if (suppressClick.current && event.detail > 0) {\n suppressClick.current = false;\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n return {\n clearSwipePosition,\n containerRef,\n handleClickCapture,\n handlePointerCancel,\n handlePointerDown,\n handlePointerMove,\n handlePointerUp,\n };\n};\n\nexport default useSnackbarSwipeDismiss;\n"],"names":["DISMISS_CLASS","SETTLE_CLASS","useSnackbarSwipeDismiss","onDismissRequest","onSwipeChange","visible","containerRef","useRef","pointerRef","suppressClick","clearSwipePosition","useCallback","pointer","current","target","hasPointerCapture","id","releasePointerCapture","classList","remove","style","removeProperty","handlePointerDown","event","button","isPrimary","setPointerCapture","pointerId","startX","clientX","startY","clientY","threshold","currentTarget","offsetHeight","SNACKBAR_SWIPE_DISMISS_THRESHOLD","handlePointerMove","offsetY","offsetX","Math","abs","setProperty","handlePointerUp","container","bounds","closest","getBoundingClientRect","add","max","left","right","top","bottom","handlePointerCancel","useEffect","ownerDocument","addEventListener","removeEventListener","handleClickCapture","detail","preventDefault","stopPropagation"],"mappings":"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"}
@@ -0,0 +1,131 @@
1
+ import { useRef, useCallback, useEffect } from 'react';
2
+ import { SNACKBAR_SWIPE_DISMISS_THRESHOLD } from './constants.mjs';
3
+
4
+ const DISMISS_CLASS = 'wds-Snackbar--swipe-dismiss';
5
+ const SETTLE_CLASS = 'wds-Snackbar--swipe-settle';
6
+ /**
7
+ * Captures one primary pointer and follows downward, mostly vertical movement without re-rendering.
8
+ * Release dismisses at half the surface height; shorter/cancelled gestures settle back into place.
9
+ * The outer wrapper moves independently of entry/exit motion, and a committed swipe consumes its
10
+ * follow-up click so dragging from the action cannot activate it.
11
+ */
12
+ const useSnackbarSwipeDismiss = ({
13
+ onDismissRequest,
14
+ onSwipeChange,
15
+ visible
16
+ }) => {
17
+ const containerRef = useRef(null);
18
+ const pointerRef = useRef(null);
19
+ const suppressClick = useRef(false);
20
+ const clearSwipePosition = useCallback(() => {
21
+ const pointer = pointerRef.current;
22
+ pointerRef.current = null;
23
+ if (pointer) {
24
+ if (pointer.target.hasPointerCapture?.(pointer.id)) {
25
+ pointer.target.releasePointerCapture(pointer.id);
26
+ }
27
+ onSwipeChange(false);
28
+ }
29
+ suppressClick.current = false;
30
+ containerRef.current?.classList.remove(DISMISS_CLASS, SETTLE_CLASS);
31
+ containerRef.current?.style.removeProperty('transform');
32
+ }, [onSwipeChange]);
33
+ const handlePointerDown = event => {
34
+ if (event.button !== 0 || !event.isPrimary || pointerRef.current) {
35
+ return;
36
+ }
37
+ clearSwipePosition();
38
+ const target = event.target;
39
+ target.setPointerCapture?.(event.pointerId);
40
+ pointerRef.current = {
41
+ id: event.pointerId,
42
+ target,
43
+ startX: event.clientX,
44
+ startY: event.clientY,
45
+ threshold: event.currentTarget.offsetHeight * SNACKBAR_SWIPE_DISMISS_THRESHOLD
46
+ };
47
+ onSwipeChange(true);
48
+ };
49
+ const handlePointerMove = event => {
50
+ const pointer = pointerRef.current;
51
+ if (pointer?.id !== event.pointerId) {
52
+ return;
53
+ }
54
+ const offsetY = event.clientY - pointer.startY;
55
+ const offsetX = event.clientX - pointer.startX;
56
+ if (offsetY > 0 && offsetY > Math.abs(offsetX)) {
57
+ containerRef.current?.style.setProperty('transform', `translateY(${offsetY}px)`);
58
+ } else {
59
+ containerRef.current?.style.removeProperty('transform');
60
+ }
61
+ };
62
+ const handlePointerUp = event => {
63
+ const pointer = pointerRef.current;
64
+ if (pointer?.id !== event.pointerId) {
65
+ return;
66
+ }
67
+ const offsetY = event.clientY - pointer.startY;
68
+ const offsetX = event.clientX - pointer.startX;
69
+ const container = containerRef.current;
70
+ const bounds = pointer.target.closest('a, button')?.getBoundingClientRect();
71
+ clearSwipePosition();
72
+ if (offsetY >= pointer.threshold && offsetY > Math.abs(offsetX)) {
73
+ if (container) {
74
+ // Include wrapper padding and the safe area, not only the surface, to clear the viewport.
75
+ container.classList.add(DISMISS_CLASS);
76
+ container.style.setProperty('transform', `translateY(${Math.max(offsetY, container.offsetHeight)}px)`);
77
+ }
78
+ suppressClick.current = true;
79
+ onDismissRequest();
80
+ } else {
81
+ // Capture retargets clicks to the pressed control even when released outside it.
82
+ suppressClick.current = !!bounds && (offsetX !== 0 || offsetY !== 0) && (event.clientX < bounds.left || event.clientX > bounds.right || event.clientY < bounds.top || event.clientY > bounds.bottom);
83
+ container?.classList.add(SETTLE_CLASS);
84
+ }
85
+ };
86
+ const handlePointerCancel = useCallback(event => {
87
+ if (pointerRef.current?.id !== event.pointerId) {
88
+ return;
89
+ }
90
+ clearSwipePosition();
91
+ containerRef.current?.classList.add(SETTLE_CLASS);
92
+ }, [clearSwipePosition]);
93
+ useEffect(() => {
94
+ if (visible) {
95
+ clearSwipePosition();
96
+ } else if (pointerRef.current) {
97
+ // An exit starting mid-gesture (timeout, Escape, replacement) ends it without dismissing again.
98
+ handlePointerCancel({
99
+ pointerId: pointerRef.current.id
100
+ });
101
+ }
102
+ }, [visible, clearSwipePosition, handlePointerCancel]);
103
+ useEffect(() => {
104
+ // Removed descendants report capture loss on their document, not the Snackbar surface.
105
+ const ownerDocument = containerRef.current?.ownerDocument;
106
+ ownerDocument?.addEventListener('lostpointercapture', handlePointerCancel);
107
+ return () => {
108
+ ownerDocument?.removeEventListener('lostpointercapture', handlePointerCancel);
109
+ clearSwipePosition();
110
+ };
111
+ }, [clearSwipePosition, handlePointerCancel]);
112
+ const handleClickCapture = event => {
113
+ if (suppressClick.current && event.detail > 0) {
114
+ suppressClick.current = false;
115
+ event.preventDefault();
116
+ event.stopPropagation();
117
+ }
118
+ };
119
+ return {
120
+ clearSwipePosition,
121
+ containerRef,
122
+ handleClickCapture,
123
+ handlePointerCancel,
124
+ handlePointerDown,
125
+ handlePointerMove,
126
+ handlePointerUp
127
+ };
128
+ };
129
+
130
+ export { useSnackbarSwipeDismiss as default };
131
+ //# sourceMappingURL=useSnackbarSwipeDismiss.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useSnackbarSwipeDismiss.mjs","sources":["../../src/Snackbar/useSnackbarSwipeDismiss.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\nimport { SNACKBAR_SWIPE_DISMISS_THRESHOLD } from './constants';\n\nconst DISMISS_CLASS = 'wds-Snackbar--swipe-dismiss';\nconst SETTLE_CLASS = 'wds-Snackbar--swipe-settle';\n\ntype SwipePointer = {\n id: number;\n target: Element;\n startX: number;\n startY: number;\n threshold: number;\n};\n\n/**\n * Captures one primary pointer and follows downward, mostly vertical movement without re-rendering.\n * Release dismisses at half the surface height; shorter/cancelled gestures settle back into place.\n * The outer wrapper moves independently of entry/exit motion, and a committed swipe consumes its\n * follow-up click so dragging from the action cannot activate it.\n */\nconst useSnackbarSwipeDismiss = ({\n onDismissRequest,\n onSwipeChange,\n visible,\n}: {\n onDismissRequest: () => void;\n /** Reports when a gesture starts and ends so auto-dismiss can pause beneath the pointer. */\n onSwipeChange: (swiping: boolean) => void;\n visible: boolean;\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const pointerRef = useRef<SwipePointer | null>(null);\n const suppressClick = useRef(false);\n\n const clearSwipePosition = useCallback(() => {\n const pointer = pointerRef.current;\n pointerRef.current = null;\n if (pointer) {\n if (pointer.target.hasPointerCapture?.(pointer.id)) {\n pointer.target.releasePointerCapture(pointer.id);\n }\n onSwipeChange(false);\n }\n suppressClick.current = false;\n containerRef.current?.classList.remove(DISMISS_CLASS, SETTLE_CLASS);\n containerRef.current?.style.removeProperty('transform');\n }, [onSwipeChange]);\n\n const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n if (event.button !== 0 || !event.isPrimary || pointerRef.current) {\n return;\n }\n\n clearSwipePosition();\n const target = event.target as Element;\n target.setPointerCapture?.(event.pointerId);\n pointerRef.current = {\n id: event.pointerId,\n target,\n startX: event.clientX,\n startY: event.clientY,\n threshold: event.currentTarget.offsetHeight * SNACKBAR_SWIPE_DISMISS_THRESHOLD,\n };\n onSwipeChange(true);\n };\n\n const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {\n const pointer = pointerRef.current;\n if (pointer?.id !== event.pointerId) {\n return;\n }\n\n const offsetY = event.clientY - pointer.startY;\n const offsetX = event.clientX - pointer.startX;\n if (offsetY > 0 && offsetY > Math.abs(offsetX)) {\n containerRef.current?.style.setProperty('transform', `translateY(${offsetY}px)`);\n } else {\n containerRef.current?.style.removeProperty('transform');\n }\n };\n\n const handlePointerUp = (event: React.PointerEvent<HTMLDivElement>) => {\n const pointer = pointerRef.current;\n if (pointer?.id !== event.pointerId) {\n return;\n }\n\n const offsetY = event.clientY - pointer.startY;\n const offsetX = event.clientX - pointer.startX;\n const container = containerRef.current;\n const bounds = pointer.target.closest('a, button')?.getBoundingClientRect();\n clearSwipePosition();\n\n if (offsetY >= pointer.threshold && offsetY > Math.abs(offsetX)) {\n if (container) {\n // Include wrapper padding and the safe area, not only the surface, to clear the viewport.\n container.classList.add(DISMISS_CLASS);\n container.style.setProperty(\n 'transform',\n `translateY(${Math.max(offsetY, container.offsetHeight)}px)`,\n );\n }\n suppressClick.current = true;\n onDismissRequest();\n } else {\n // Capture retargets clicks to the pressed control even when released outside it.\n suppressClick.current =\n !!bounds &&\n (offsetX !== 0 || offsetY !== 0) &&\n (event.clientX < bounds.left ||\n event.clientX > bounds.right ||\n event.clientY < bounds.top ||\n event.clientY > bounds.bottom);\n container?.classList.add(SETTLE_CLASS);\n }\n };\n\n const handlePointerCancel = useCallback(\n (event: Pick<PointerEvent, 'pointerId'>) => {\n if (pointerRef.current?.id !== event.pointerId) {\n return;\n }\n\n clearSwipePosition();\n containerRef.current?.classList.add(SETTLE_CLASS);\n },\n [clearSwipePosition],\n );\n\n useEffect(() => {\n if (visible) {\n clearSwipePosition();\n } else if (pointerRef.current) {\n // An exit starting mid-gesture (timeout, Escape, replacement) ends it without dismissing again.\n handlePointerCancel({ pointerId: pointerRef.current.id });\n }\n }, [visible, clearSwipePosition, handlePointerCancel]);\n\n useEffect(() => {\n // Removed descendants report capture loss on their document, not the Snackbar surface.\n const ownerDocument = containerRef.current?.ownerDocument;\n ownerDocument?.addEventListener('lostpointercapture', handlePointerCancel);\n return () => {\n ownerDocument?.removeEventListener('lostpointercapture', handlePointerCancel);\n clearSwipePosition();\n };\n }, [clearSwipePosition, handlePointerCancel]);\n\n const handleClickCapture = (event: React.MouseEvent<HTMLDivElement>) => {\n if (suppressClick.current && event.detail > 0) {\n suppressClick.current = false;\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n return {\n clearSwipePosition,\n containerRef,\n handleClickCapture,\n handlePointerCancel,\n handlePointerDown,\n handlePointerMove,\n handlePointerUp,\n };\n};\n\nexport default useSnackbarSwipeDismiss;\n"],"names":["DISMISS_CLASS","SETTLE_CLASS","useSnackbarSwipeDismiss","onDismissRequest","onSwipeChange","visible","containerRef","useRef","pointerRef","suppressClick","clearSwipePosition","useCallback","pointer","current","target","hasPointerCapture","id","releasePointerCapture","classList","remove","style","removeProperty","handlePointerDown","event","button","isPrimary","setPointerCapture","pointerId","startX","clientX","startY","clientY","threshold","currentTarget","offsetHeight","SNACKBAR_SWIPE_DISMISS_THRESHOLD","handlePointerMove","offsetY","offsetX","Math","abs","setProperty","handlePointerUp","container","bounds","closest","getBoundingClientRect","add","max","left","right","top","bottom","handlePointerCancel","useEffect","ownerDocument","addEventListener","removeEventListener","handleClickCapture","detail","preventDefault","stopPropagation"],"mappings":";;;AAIA,MAAMA,aAAa,GAAG,6BAA6B;AACnD,MAAMC,YAAY,GAAG,4BAA4B;AAUjD;;;;;AAKG;AACH,MAAMC,uBAAuB,GAAGA,CAAC;EAC/BC,gBAAgB;EAChBC,aAAa;AACbC,EAAAA;AAAO,CAMR,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGC,MAAM,CAAiB,IAAI,CAAC;AACjD,EAAA,MAAMC,UAAU,GAAGD,MAAM,CAAsB,IAAI,CAAC;AACpD,EAAA,MAAME,aAAa,GAAGF,MAAM,CAAC,KAAK,CAAC;AAEnC,EAAA,MAAMG,kBAAkB,GAAGC,WAAW,CAAC,MAAK;AAC1C,IAAA,MAAMC,OAAO,GAAGJ,UAAU,CAACK,OAAO;IAClCL,UAAU,CAACK,OAAO,GAAG,IAAI;AACzB,IAAA,IAAID,OAAO,EAAE;MACX,IAAIA,OAAO,CAACE,MAAM,CAACC,iBAAiB,GAAGH,OAAO,CAACI,EAAE,CAAC,EAAE;QAClDJ,OAAO,CAACE,MAAM,CAACG,qBAAqB,CAACL,OAAO,CAACI,EAAE,CAAC;AAClD,MAAA;MACAZ,aAAa,CAAC,KAAK,CAAC;AACtB,IAAA;IACAK,aAAa,CAACI,OAAO,GAAG,KAAK;IAC7BP,YAAY,CAACO,OAAO,EAAEK,SAAS,CAACC,MAAM,CAACnB,aAAa,EAAEC,YAAY,CAAC;IACnEK,YAAY,CAACO,OAAO,EAAEO,KAAK,CAACC,cAAc,CAAC,WAAW,CAAC;AACzD,EAAA,CAAC,EAAE,CAACjB,aAAa,CAAC,CAAC;EAEnB,MAAMkB,iBAAiB,GAAIC,KAAyC,IAAI;AACtE,IAAA,IAAIA,KAAK,CAACC,MAAM,KAAK,CAAC,IAAI,CAACD,KAAK,CAACE,SAAS,IAAIjB,UAAU,CAACK,OAAO,EAAE;AAChE,MAAA;AACF,IAAA;AAEAH,IAAAA,kBAAkB,EAAE;AACpB,IAAA,MAAMI,MAAM,GAAGS,KAAK,CAACT,MAAiB;AACtCA,IAAAA,MAAM,CAACY,iBAAiB,GAAGH,KAAK,CAACI,SAAS,CAAC;IAC3CnB,UAAU,CAACK,OAAO,GAAG;MACnBG,EAAE,EAAEO,KAAK,CAACI,SAAS;MACnBb,MAAM;MACNc,MAAM,EAAEL,KAAK,CAACM,OAAO;MACrBC,MAAM,EAAEP,KAAK,CAACQ,OAAO;AACrBC,MAAAA,SAAS,EAAET,KAAK,CAACU,aAAa,CAACC,YAAY,GAAGC;KAC/C;IACD/B,aAAa,CAAC,IAAI,CAAC;EACrB,CAAC;EAED,MAAMgC,iBAAiB,GAAIb,KAAyC,IAAI;AACtE,IAAA,MAAMX,OAAO,GAAGJ,UAAU,CAACK,OAAO;AAClC,IAAA,IAAID,OAAO,EAAEI,EAAE,KAAKO,KAAK,CAACI,SAAS,EAAE;AACnC,MAAA;AACF,IAAA;IAEA,MAAMU,OAAO,GAAGd,KAAK,CAACQ,OAAO,GAAGnB,OAAO,CAACkB,MAAM;IAC9C,MAAMQ,OAAO,GAAGf,KAAK,CAACM,OAAO,GAAGjB,OAAO,CAACgB,MAAM;AAC9C,IAAA,IAAIS,OAAO,GAAG,CAAC,IAAIA,OAAO,GAAGE,IAAI,CAACC,GAAG,CAACF,OAAO,CAAC,EAAE;AAC9ChC,MAAAA,YAAY,CAACO,OAAO,EAAEO,KAAK,CAACqB,WAAW,CAAC,WAAW,EAAE,CAAA,WAAA,EAAcJ,OAAO,CAAA,GAAA,CAAK,CAAC;AAClF,IAAA,CAAC,MAAM;MACL/B,YAAY,CAACO,OAAO,EAAEO,KAAK,CAACC,cAAc,CAAC,WAAW,CAAC;AACzD,IAAA;EACF,CAAC;EAED,MAAMqB,eAAe,GAAInB,KAAyC,IAAI;AACpE,IAAA,MAAMX,OAAO,GAAGJ,UAAU,CAACK,OAAO;AAClC,IAAA,IAAID,OAAO,EAAEI,EAAE,KAAKO,KAAK,CAACI,SAAS,EAAE;AACnC,MAAA;AACF,IAAA;IAEA,MAAMU,OAAO,GAAGd,KAAK,CAACQ,OAAO,GAAGnB,OAAO,CAACkB,MAAM;IAC9C,MAAMQ,OAAO,GAAGf,KAAK,CAACM,OAAO,GAAGjB,OAAO,CAACgB,MAAM;AAC9C,IAAA,MAAMe,SAAS,GAAGrC,YAAY,CAACO,OAAO;AACtC,IAAA,MAAM+B,MAAM,GAAGhC,OAAO,CAACE,MAAM,CAAC+B,OAAO,CAAC,WAAW,CAAC,EAAEC,qBAAqB,EAAE;AAC3EpC,IAAAA,kBAAkB,EAAE;AAEpB,IAAA,IAAI2B,OAAO,IAAIzB,OAAO,CAACoB,SAAS,IAAIK,OAAO,GAAGE,IAAI,CAACC,GAAG,CAACF,OAAO,CAAC,EAAE;AAC/D,MAAA,IAAIK,SAAS,EAAE;AACb;AACAA,QAAAA,SAAS,CAACzB,SAAS,CAAC6B,GAAG,CAAC/C,aAAa,CAAC;AACtC2C,QAAAA,SAAS,CAACvB,KAAK,CAACqB,WAAW,CACzB,WAAW,EACX,CAAA,WAAA,EAAcF,IAAI,CAACS,GAAG,CAACX,OAAO,EAAEM,SAAS,CAACT,YAAY,CAAC,KAAK,CAC7D;AACH,MAAA;MACAzB,aAAa,CAACI,OAAO,GAAG,IAAI;AAC5BV,MAAAA,gBAAgB,EAAE;AACpB,IAAA,CAAC,MAAM;AACL;MACAM,aAAa,CAACI,OAAO,GACnB,CAAC,CAAC+B,MAAM,KACPN,OAAO,KAAK,CAAC,IAAID,OAAO,KAAK,CAAC,CAAC,KAC/Bd,KAAK,CAACM,OAAO,GAAGe,MAAM,CAACK,IAAI,IAC1B1B,KAAK,CAACM,OAAO,GAAGe,MAAM,CAACM,KAAK,IAC5B3B,KAAK,CAACQ,OAAO,GAAGa,MAAM,CAACO,GAAG,IAC1B5B,KAAK,CAACQ,OAAO,GAAGa,MAAM,CAACQ,MAAM,CAAC;AAClCT,MAAAA,SAAS,EAAEzB,SAAS,CAAC6B,GAAG,CAAC9C,YAAY,CAAC;AACxC,IAAA;EACF,CAAC;AAED,EAAA,MAAMoD,mBAAmB,GAAG1C,WAAW,CACpCY,KAAsC,IAAI;IACzC,IAAIf,UAAU,CAACK,OAAO,EAAEG,EAAE,KAAKO,KAAK,CAACI,SAAS,EAAE;AAC9C,MAAA;AACF,IAAA;AAEAjB,IAAAA,kBAAkB,EAAE;IACpBJ,YAAY,CAACO,OAAO,EAAEK,SAAS,CAAC6B,GAAG,CAAC9C,YAAY,CAAC;AACnD,EAAA,CAAC,EACD,CAACS,kBAAkB,CAAC,CACrB;AAED4C,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIjD,OAAO,EAAE;AACXK,MAAAA,kBAAkB,EAAE;AACtB,IAAA,CAAC,MAAM,IAAIF,UAAU,CAACK,OAAO,EAAE;AAC7B;AACAwC,MAAAA,mBAAmB,CAAC;AAAE1B,QAAAA,SAAS,EAAEnB,UAAU,CAACK,OAAO,CAACG;AAAE,OAAE,CAAC;AAC3D,IAAA;EACF,CAAC,EAAE,CAACX,OAAO,EAAEK,kBAAkB,EAAE2C,mBAAmB,CAAC,CAAC;AAEtDC,EAAAA,SAAS,CAAC,MAAK;AACb;AACA,IAAA,MAAMC,aAAa,GAAGjD,YAAY,CAACO,OAAO,EAAE0C,aAAa;AACzDA,IAAAA,aAAa,EAAEC,gBAAgB,CAAC,oBAAoB,EAAEH,mBAAmB,CAAC;AAC1E,IAAA,OAAO,MAAK;AACVE,MAAAA,aAAa,EAAEE,mBAAmB,CAAC,oBAAoB,EAAEJ,mBAAmB,CAAC;AAC7E3C,MAAAA,kBAAkB,EAAE;IACtB,CAAC;AACH,EAAA,CAAC,EAAE,CAACA,kBAAkB,EAAE2C,mBAAmB,CAAC,CAAC;EAE7C,MAAMK,kBAAkB,GAAInC,KAAuC,IAAI;IACrE,IAAId,aAAa,CAACI,OAAO,IAAIU,KAAK,CAACoC,MAAM,GAAG,CAAC,EAAE;MAC7ClD,aAAa,CAACI,OAAO,GAAG,KAAK;MAC7BU,KAAK,CAACqC,cAAc,EAAE;MACtBrC,KAAK,CAACsC,eAAe,EAAE;AACzB,IAAA;EACF,CAAC;EAED,OAAO;IACLnD,kBAAkB;IAClBJ,YAAY;IACZoD,kBAAkB;IAClBL,mBAAmB;IACnB/B,iBAAiB;IACjBc,iBAAiB;AACjBM,IAAAA;GACD;AACH;;"}
@@ -38,6 +38,7 @@
38
38
  "neptune.PhoneNumberInput.phoneNumberPrefix": "Prefix",
39
39
  "neptune.Select.searchPlaceholder": "Search...",
40
40
  "neptune.SelectInput.noResultsFound": "No results found",
41
+ "neptune.Snackbar.escapeDismissHint": "Press Escape to dismiss.",
41
42
  "neptune.StatusIcon.iconLabel.error": "Error:",
42
43
  "neptune.StatusIcon.iconLabel.information": "Information:",
43
44
  "neptune.StatusIcon.iconLabel.pending": "Pending:",
@@ -42,6 +42,7 @@ var en = {
42
42
  "neptune.PhoneNumberInput.phoneNumberPrefix": "Prefix",
43
43
  "neptune.Select.searchPlaceholder": "Search...",
44
44
  "neptune.SelectInput.noResultsFound": "No results found",
45
+ "neptune.Snackbar.escapeDismissHint": "Press Escape to dismiss.",
45
46
  "neptune.StatusIcon.iconLabel.error": "Error:",
46
47
  "neptune.StatusIcon.iconLabel.information": "Information:",
47
48
  "neptune.StatusIcon.iconLabel.pending": "Pending:",
@@ -1 +1 @@
1
- {"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -38,6 +38,7 @@ var en = {
38
38
  "neptune.PhoneNumberInput.phoneNumberPrefix": "Prefix",
39
39
  "neptune.Select.searchPlaceholder": "Search...",
40
40
  "neptune.SelectInput.noResultsFound": "No results found",
41
+ "neptune.Snackbar.escapeDismissHint": "Press Escape to dismiss.",
41
42
  "neptune.StatusIcon.iconLabel.error": "Error:",
42
43
  "neptune.StatusIcon.iconLabel.information": "Information:",
43
44
  "neptune.StatusIcon.iconLabel.pending": "Pending:",
@@ -1 +1 @@
1
- {"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/index.js CHANGED
@@ -26,8 +26,6 @@ var Chips = require('./Chips/Chips.js');
26
26
  var Chip = require('./Chips/Chip/Chip.js');
27
27
  var CircularButton = require('./CircularButton/CircularButton.js');
28
28
  var Container = require('./Container/Container.js');
29
- var CardContainer = require('./CardContainer/CardContainer.js');
30
- var CardWidget = require('./CardWidget/CardWidget.js');
31
29
  var Option = require('./common/Option/Option.js');
32
30
  var BottomSheet = require('./common/BottomSheet/BottomSheet.js');
33
31
  var BaseCard = require('./common/BaseCard/BaseCard.js');
@@ -190,8 +188,6 @@ exports.Chips = Chips.default;
190
188
  exports.Chip = Chip.default;
191
189
  exports.CircularButton = CircularButton.default;
192
190
  exports.Container = Container.default;
193
- exports.CardContainer = CardContainer.default;
194
- exports.CardWidget = CardWidget.default;
195
191
  exports.Option = Option.default;
196
192
  exports.BottomSheet = BottomSheet.default;
197
193
  exports.BaseCard = BaseCard.default;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/index.mjs CHANGED
@@ -24,8 +24,6 @@ export { default as Chips } from './Chips/Chips.mjs';
24
24
  export { default as Chip } from './Chips/Chip/Chip.mjs';
25
25
  export { default as CircularButton } from './CircularButton/CircularButton.mjs';
26
26
  export { default as Container } from './Container/Container.mjs';
27
- export { default as CardContainer } from './CardContainer/CardContainer.mjs';
28
- export { default as CardWidget } from './CardWidget/CardWidget.mjs';
29
27
  export { default as Option } from './common/Option/Option.mjs';
30
28
  export { default as BottomSheet } from './common/BottomSheet/BottomSheet.mjs';
31
29
  export { default as BaseCard } from './common/BaseCard/BaseCard.mjs';
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/main.css CHANGED
@@ -26203,198 +26203,6 @@ a[data-toggle="tooltip"] {
26203
26203
  .wds-container--fluid {
26204
26204
  max-inline-size: var(--wds-container-width-fluid);
26205
26205
  }
26206
- .wds-card-container {
26207
- --CardContainer-shadow: var(--CardContainer-theme-shadow, none);
26208
- --CardContainer-background-color: var(--color-background-screen);
26209
- --CardContainer-border-color: var(--color-border-neutral);
26210
- --CardContainer-border-radius: var(--radius-large);
26211
- --CardContainer-padding-block: var(--size-8);
26212
- --CardContainer-padding-inline: var(--size-8);
26213
- background-color: var(--CardContainer-background-color);
26214
- border: 1px solid var(--CardContainer-border-color);
26215
- border-radius: var(--CardContainer-border-radius);
26216
- box-sizing: border-box;
26217
- display: flex;
26218
- flex-direction: column;
26219
- padding-block: var(--CardContainer-padding-block);
26220
- padding-inline: var(--CardContainer-padding-inline);
26221
- inline-size: 100%;
26222
- }
26223
- @media (min-width: 840px) {
26224
- .wds-card-container {
26225
- --CardContainer-padding-block: var(--size-16);
26226
- --CardContainer-padding-inline: var(--size-16);
26227
- }
26228
- }
26229
- .wds-card-container--padding-none {
26230
- --CardContainer-padding-block: 0px;
26231
- --CardContainer-padding-inline: 0px;
26232
- overflow: clip;
26233
- }
26234
- .wds-card-container--active {
26235
- --CardContainer-background-color: var(--color-background-elevated);
26236
- --CardContainer-border-color: color-mix(in srgb, var(--color-border-neutral) 25%, transparent);
26237
- box-shadow: var(--CardContainer-shadow);
26238
- }
26239
- .wds-card-container--inactive {
26240
- --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
26241
- border-width: 0;
26242
- padding-block: calc(var(--CardContainer-padding-block) + 1px);
26243
- padding-inline: calc(var(--CardContainer-padding-inline) + 1px);
26244
- position: relative;
26245
- }
26246
- .wds-card-container--interactive:has(
26247
- > a[href]:hover,
26248
- > button:enabled:hover,
26249
- > a[href]:focus-visible,
26250
- > button:enabled:focus-visible
26251
- ).wds-card-container--active {
26252
- --CardContainer-border-color: color-mix(in srgb, var(--color-border-neutral) 75%, transparent);
26253
- }
26254
- .wds-card-container--interactive:has(
26255
- > a[href]:hover,
26256
- > button:enabled:hover,
26257
- > a[href]:focus-visible,
26258
- > button:enabled:focus-visible
26259
- ).wds-card-container--inactive {
26260
- --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
26261
- }
26262
- .wds-card-container--interactive:has(> a[href]:active, > button:enabled:active).wds-card-container--active {
26263
- --CardContainer-border-color: var(--color-border-neutral);
26264
- }
26265
- .wds-card-container--interactive:has(> a[href]:active, > button:enabled:active).wds-card-container--inactive {
26266
- --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
26267
- }
26268
- .wds-card-container__border {
26269
- container-type: size;
26270
- inset: 0;
26271
- pointer-events: none;
26272
- position: absolute;
26273
- }
26274
- .wds-card-container__border svg {
26275
- display: block;
26276
- block-size: 100%;
26277
- inline-size: 100%;
26278
- }
26279
- .wds-card-container__border rect {
26280
- --CardContainer-border-dash-size: calc(var(--size-12) * 0.5);
26281
- --CardContainer-border-stroke-radius: calc(min(var(--CardContainer-border-radius), 50cqh, 50cqw) - 0.5px);
26282
- fill: none;
26283
- block-size: calc(100% - 1px);
26284
- rx: var(--CardContainer-border-stroke-radius);
26285
- ry: var(--CardContainer-border-stroke-radius);
26286
- stroke: var(--color-border-neutral);
26287
- stroke-dasharray: var(--CardContainer-border-dash-size) var(--CardContainer-border-dash-size);
26288
- inline-size: calc(100% - 1px);
26289
- x: 0.5px;
26290
- y: 0.5px;
26291
- }
26292
- /**
26293
- * The active spotlight's resting shadow, only designed for the light themes. Set on every theme
26294
- * root, as a nested ThemeProvider renders its own, so a card follows its nearest theme: a dark or
26295
- * green provider inside a light one turns the shadow off.
26296
- *
26297
- * There is no shadow or elevation token in @transferwise/neptune-tokens, so the value is
26298
- * component-scoped for now, the way PromoCard scopes `--Card-box-shadow`. It is the "Card Active
26299
- * shadow" effect style from Figma: `#0e0f0c` at 4%, kept literal so it doesn't drift with a
26300
- * theme's tokens. Collapses to a token reference once one is minted.
26301
- */
26302
- .np-theme-personal {
26303
- --CardContainer-theme-shadow: 0 2px 12px rgba(14, 15, 12, 0.04), 0 2px 32px rgba(14, 15, 12, 0.04);
26304
- }
26305
- .np-theme-personal.np-theme-personal--dark,
26306
- .np-theme-personal.np-theme-personal--bright-green,
26307
- .np-theme-personal.np-theme-personal--forest-green,
26308
- .np-theme-personal.np-theme-business--dark,
26309
- .np-theme-personal.np-theme-business--bright-green,
26310
- .np-theme-personal.np-theme-business--forest-green,
26311
- .np-theme-personal.np-theme-platform--forest-green {
26312
- --CardContainer-theme-shadow: none;
26313
- }
26314
- .wds-card-widget {
26315
- --CardWidget-inset: var(--size-8);
26316
- --CardWidget-header-spacing: var(--size-8);
26317
- --CardWidget-actions-gap: var(--size-8);
26318
- }
26319
- .wds-card-widget__header {
26320
- align-items: center;
26321
- -moz-column-gap: var(--size-24);
26322
- column-gap: var(--size-24);
26323
- container-type: inline-size;
26324
- display: flex;
26325
- flex-wrap: wrap;
26326
- padding-inline-start: var(--CardWidget-inset);
26327
- row-gap: var(--size-8);
26328
- }
26329
- .wds-card-widget__header + .wds-card-widget__content {
26330
- margin-block-start: var(--CardWidget-header-spacing);
26331
- }
26332
- .wds-card-widget__title {
26333
- align-items: center;
26334
- color: var(--color-content-secondary);
26335
- display: grid;
26336
- flex: 1 1 0;
26337
- margin: 0;
26338
- min-block-size: var(--size-32);
26339
- }
26340
- @container (width <= 360px) {
26341
- .wds-card-widget__title {
26342
- flex-basis: auto;
26343
- }
26344
- }
26345
- .wds-card-widget__title-link.np-link {
26346
- color: inherit;
26347
- display: inline;
26348
- font: inherit;
26349
- justify-self: start;
26350
- letter-spacing: inherit;
26351
- text-align: start;
26352
- -webkit-text-decoration: none;
26353
- text-decoration: none;
26354
- }
26355
- .wds-card-widget__title-link.np-link:hover,
26356
- .wds-card-widget__title-link.np-link:focus-visible {
26357
- -webkit-text-decoration: underline;
26358
- text-decoration: underline;
26359
- }
26360
- .wds-card-widget__title-link.np-link .tw-icon {
26361
- display: inline-block;
26362
- vertical-align: text-bottom;
26363
- }
26364
- .wds-card-widget__title-link.np-link .wds-card-widget__title-chevron {
26365
- white-space: nowrap;
26366
- }
26367
- .wds-card-widget__title-link.np-link .wds-card-widget__title-chevron .tw-icon {
26368
- margin: 0;
26369
- }
26370
- .wds-card-widget__actions {
26371
- align-self: start;
26372
- align-items: center;
26373
- display: flex;
26374
- flex: none;
26375
- gap: var(--CardWidget-actions-gap);
26376
- }
26377
- .wds-card-widget--with-header .wds-card-widget__content {
26378
- padding-inline: var(--CardWidget-inset);
26379
- }
26380
- .wds-card-widget--interactive:has(
26381
- .wds-card-widget__title-link:hover,
26382
- .wds-card-widget__title-link:focus-visible
26383
- ).wds-card-container--active {
26384
- --CardContainer-border-color: color-mix(in srgb, var(--color-border-neutral) 75%, transparent);
26385
- }
26386
- .wds-card-widget--interactive:has(
26387
- .wds-card-widget__title-link:hover,
26388
- .wds-card-widget__title-link:focus-visible
26389
- ).wds-card-container--inactive {
26390
- --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
26391
- }
26392
- .wds-card-widget--interactive:has(.wds-card-widget__title-link:active).wds-card-container--active {
26393
- --CardContainer-border-color: var(--color-border-neutral);
26394
- }
26395
- .wds-card-widget--interactive:has(.wds-card-widget__title-link:active).wds-card-container--inactive {
26396
- --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
26397
- }
26398
26206
  .critical-comms {
26399
26207
  border-radius: var(--radius-medium);
26400
26208
  overflow: hidden;
@@ -31514,75 +31322,138 @@ button.np-link {
31514
31322
  [dir="rtl"] .np-theme-personal .sliding-panel.sliding-panel--border-left {
31515
31323
  box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
31516
31324
  }
31517
- .snackbar {
31518
- text-align: center;
31325
+ .wds-Snackbar {
31326
+ display: flex;
31327
+ justify-content: center;
31328
+ box-sizing: border-box;
31329
+ padding-inline: var(--size-16);
31330
+ padding-block-end: calc(var(--size-16) + env(safe-area-inset-bottom));
31519
31331
  position: fixed;
31520
31332
  inset-block-end: 0;
31521
- inset-inline-start: 0;
31522
- inset-inline-end: 0;
31333
+ inset-inline: 0;
31523
31334
  z-index: 1060;
31524
31335
  }
31525
- .snackbar__text {
31526
- background: #37517e;
31527
- color: #ffffff;
31528
- display: inline-flex;
31529
- border-radius: 2px;
31530
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
31531
- align-items: center;
31532
- justify-content: space-between;
31336
+ @media (min-width: 600px) {
31337
+ .wds-Snackbar {
31338
+ padding-block-end: var(--size-24);
31339
+ }
31340
+ }
31341
+ .wds-Snackbar--swipe-dismiss {
31342
+ transition: transform var(--Snackbar-exit-duration) cubic-bezier(1, 0, 1, 1);
31343
+ }
31344
+ .wds-Snackbar--swipe-settle {
31345
+ transition: transform var(--Snackbar-exit-duration) cubic-bezier(0, 0, 0, 1);
31346
+ }
31347
+ .wds-Snackbar-container {
31348
+ --Prompt-border-radius: var(--radius-medium);
31349
+ --Prompt-gap: var(--size-8);
31350
+ --Prompt-padding-x: var(--size-12);
31351
+ --Prompt-padding-y: var(--size-12);
31352
+ box-sizing: border-box;
31353
+ max-inline-size: 480px;
31533
31354
  text-align: start;
31534
- font-size: var(--wds-font-size-body);
31535
- margin-block: 0;
31536
- margin-inline: var(--size-16);
31537
- padding-block: var(--size-8);
31538
- padding-inline: var(--size-16);
31539
- inline-size: calc(100% - var(--size-32));
31540
- transition: 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
31355
+ cursor: grab;
31356
+ touch-action: pan-x pinch-zoom;
31541
31357
  }
31542
- .np-theme-personal .snackbar__text {
31543
- box-shadow: 0 2px 4px 0 rgba(69, 71, 69, 0.35);
31544
- position: relative;
31545
- background: var(--color-contrast-theme);
31546
- border-radius: var(--radius-small);
31547
- color: var(--color-contrast-overlay);
31358
+ .wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
31359
+ grid-template-columns: auto minmax(0, 1fr);
31548
31360
  }
31549
- .np-theme-personal .snackbar__text::after {
31550
- display: block;
31551
- border-radius: inherit;
31552
- block-size: 100%;
31553
- inline-size: 100%;
31554
- content: "";
31555
- position: absolute;
31556
- inset-inline-start: 0;
31557
- inset-block-start: 0;
31558
- z-index: -1;
31559
- background-color: var(--color-background-neutral);
31361
+ @media (min-width: 600px) {
31362
+ .wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
31363
+ grid-template-columns: auto minmax(0, 1fr) auto;
31364
+ }
31560
31365
  }
31561
- .np-theme-personal--dark .snackbar__text,
31562
- .np-theme-personal--forest-green .snackbar__text {
31563
- box-shadow: none;
31366
+ .wds-Snackbar-container .wds-prompt__media-wrapper {
31367
+ display: flex;
31368
+ align-items: center;
31369
+ min-block-size: max(var(--size-32), 1lh);
31370
+ padding-block-start: 0;
31371
+ color: var(--color-sentiment-content-primary);
31372
+ }
31373
+ .wds-Snackbar-container .wds-prompt__media-wrapper:has(+ .wds-Snackbar__content .wds-Snackbar__action) {
31374
+ min-block-size: max(var(--size-32), calc(1lh + var(--size-5) * 2));
31375
+ }
31376
+ .wds-Snackbar__media-asset {
31377
+ display: flex;
31378
+ }
31379
+ .wds-Snackbar__media-asset svg {
31380
+ inline-size: var(--size-24);
31381
+ block-size: var(--size-24);
31382
+ }
31383
+ .wds-Snackbar__process-indicator .process-circle {
31384
+ stroke: currentColor;
31385
+ }
31386
+ .wds-Snackbar-container .wds-prompt__dismiss {
31387
+ display: none;
31388
+ align-self: flex-start;
31389
+ margin-block-start: calc(var(--size-4) - 1px);
31564
31390
  }
31565
31391
  @media (min-width: 600px) {
31566
- .snackbar__text {
31567
- inline-size: auto;
31568
- max-inline-size: 600px;
31392
+ .wds-Snackbar-container .wds-prompt__dismiss {
31393
+ display: flex;
31569
31394
  }
31570
31395
  }
31571
- .snackbar__text__action {
31396
+ .wds-Snackbar__action {
31572
31397
  flex-shrink: 0;
31573
- margin-inline-start: var(--size-16);
31574
31398
  }
31575
- .snackbar__text-container-enter,
31576
- .snackbar__text-container-exit {
31577
- transform: translateY(calc(100% + 10px));
31399
+ .wds-Snackbar__content {
31400
+ display: flex;
31401
+ align-items: flex-start;
31402
+ gap: var(--size-8);
31403
+ flex: 1 0 0;
31404
+ min-block-size: var(--size-32);
31405
+ min-inline-size: 0;
31578
31406
  }
31579
- .snackbar__text-container-enter-active {
31580
- transform: translateY(-16px);
31581
- transform: translateY(calc(-16px - env(safe-area-inset-bottom)));
31407
+ .wds-Snackbar__message {
31408
+ display: flex;
31409
+ flex-direction: column;
31410
+ justify-content: center;
31411
+ inline-size: auto;
31412
+ flex: 1 0 0;
31413
+ min-inline-size: 0;
31414
+ align-self: stretch;
31582
31415
  }
31583
- @media (min-width: 600px) {
31584
- .snackbar__text-container-enter-active {
31585
- transform: translateY(-24px);
31416
+ .wds-Snackbar__body {
31417
+ display: block;
31418
+ }
31419
+ .wds-Snackbar-container-appear,
31420
+ .wds-Snackbar-container-enter {
31421
+ opacity: 0;
31422
+ transform: translateY(80px) scale(0.5);
31423
+ }
31424
+ .wds-Snackbar-container-appear-active,
31425
+ .wds-Snackbar-container-enter-active {
31426
+ opacity: 1;
31427
+ transform: translateY(0) scale(1);
31428
+ transition: opacity 150ms linear, transform var(--Snackbar-enter-duration) cubic-bezier(0, 0, 0, 1);
31429
+ }
31430
+ .wds-Snackbar-container-exit {
31431
+ opacity: 1;
31432
+ transform: translateY(0) scale(1);
31433
+ }
31434
+ .wds-Snackbar-container-exit-active {
31435
+ opacity: 0;
31436
+ transform: translateY(80px) scale(0.5);
31437
+ transition: opacity 50ms linear 50ms, transform var(--Snackbar-exit-duration) cubic-bezier(1, 0, 1, 1);
31438
+ }
31439
+ @media (prefers-reduced-motion: reduce) {
31440
+ .wds-Snackbar--swipe-dismiss,
31441
+ .wds-Snackbar--swipe-settle {
31442
+ transition: none;
31443
+ }
31444
+ .wds-Snackbar-container-appear,
31445
+ .wds-Snackbar-container-appear-active,
31446
+ .wds-Snackbar-container-enter,
31447
+ .wds-Snackbar-container-enter-active,
31448
+ .wds-Snackbar-container-exit {
31449
+ opacity: 1;
31450
+ transform: none;
31451
+ transition: none;
31452
+ }
31453
+ .wds-Snackbar-container-exit-active {
31454
+ opacity: 0;
31455
+ transform: none;
31456
+ transition: none;
31586
31457
  }
31587
31458
  }
31588
31459
  .status-circle.negative,