@transferwise/components 0.0.0-experimental-d72e9b7 → 0.0.0-experimental-f4ca4fa

package/build/Snackbar/useSnackbarSwipeDismiss.js.map

@@ -0,0 +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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"}

package/build/Snackbar/useSnackbarSwipeDismiss.mjs

@@ -0,0 +1,131 @@
+import { useRef, useCallback, useEffect } from 'react';
+import { SNACKBAR_SWIPE_DISMISS_THRESHOLD } from './constants.mjs';
+
+const DISMISS_CLASS = 'wds-Snackbar--swipe-dismiss';
+const SETTLE_CLASS = 'wds-Snackbar--swipe-settle';
+/**
+ * Captures one primary pointer and follows downward, mostly vertical movement without re-rendering.
+ * Release dismisses at half the surface height; shorter/cancelled gestures settle back into place.
+ * The outer wrapper moves independently of entry/exit motion, and a committed swipe consumes its
+ * follow-up click so dragging from the action cannot activate it.
+ */
+const useSnackbarSwipeDismiss = ({
+  onDismissRequest,
+  onSwipeChange,
+  visible
+}) => {
+  const containerRef = useRef(null);
+  const pointerRef = useRef(null);
+  const suppressClick = useRef(false);
+  const clearSwipePosition = useCallback(() => {
+    const pointer = pointerRef.current;
+    pointerRef.current = null;
+    if (pointer) {
+      if (pointer.target.hasPointerCapture?.(pointer.id)) {
+        pointer.target.releasePointerCapture(pointer.id);
+      }
+      onSwipeChange(false);
+    }
+    suppressClick.current = false;
+    containerRef.current?.classList.remove(DISMISS_CLASS, SETTLE_CLASS);
+    containerRef.current?.style.removeProperty('transform');
+  }, [onSwipeChange]);
+  const handlePointerDown = event => {
+    if (event.button !== 0 || !event.isPrimary || pointerRef.current) {
+      return;
+    }
+    clearSwipePosition();
+    const target = event.target;
+    target.setPointerCapture?.(event.pointerId);
+    pointerRef.current = {
+      id: event.pointerId,
+      target,
+      startX: event.clientX,
+      startY: event.clientY,
+      threshold: event.currentTarget.offsetHeight * SNACKBAR_SWIPE_DISMISS_THRESHOLD
+    };
+    onSwipeChange(true);
+  };
+  const handlePointerMove = event => {
+    const pointer = pointerRef.current;
+    if (pointer?.id !== event.pointerId) {
+      return;
+    }
+    const offsetY = event.clientY - pointer.startY;
+    const offsetX = event.clientX - pointer.startX;
+    if (offsetY > 0 && offsetY > Math.abs(offsetX)) {
+      containerRef.current?.style.setProperty('transform', `translateY(${offsetY}px)`);
+    } else {
+      containerRef.current?.style.removeProperty('transform');
+    }
+  };
+  const handlePointerUp = event => {
+    const pointer = pointerRef.current;
+    if (pointer?.id !== event.pointerId) {
+      return;
+    }
+    const offsetY = event.clientY - pointer.startY;
+    const offsetX = event.clientX - pointer.startX;
+    const container = containerRef.current;
+    const bounds = pointer.target.closest('a, button')?.getBoundingClientRect();
+    clearSwipePosition();
+    if (offsetY >= pointer.threshold && offsetY > Math.abs(offsetX)) {
+      if (container) {
+        // Include wrapper padding and the safe area, not only the surface, to clear the viewport.
+        container.classList.add(DISMISS_CLASS);
+        container.style.setProperty('transform', `translateY(${Math.max(offsetY, container.offsetHeight)}px)`);
+      }
+      suppressClick.current = true;
+      onDismissRequest();
+    } else {
+      // Capture retargets clicks to the pressed control even when released outside it.
+      suppressClick.current = !!bounds && (offsetX !== 0 || offsetY !== 0) && (event.clientX < bounds.left || event.clientX > bounds.right || event.clientY < bounds.top || event.clientY > bounds.bottom);
+      container?.classList.add(SETTLE_CLASS);
+    }
+  };
+  const handlePointerCancel = useCallback(event => {
+    if (pointerRef.current?.id !== event.pointerId) {
+      return;
+    }
+    clearSwipePosition();
+    containerRef.current?.classList.add(SETTLE_CLASS);
+  }, [clearSwipePosition]);
+  useEffect(() => {
+    if (visible) {
+      clearSwipePosition();
+    } else if (pointerRef.current) {
+      // An exit starting mid-gesture (timeout, Escape, replacement) ends it without dismissing again.
+      handlePointerCancel({
+        pointerId: pointerRef.current.id
+      });
+    }
+  }, [visible, clearSwipePosition, handlePointerCancel]);
+  useEffect(() => {
+    // Removed descendants report capture loss on their document, not the Snackbar surface.
+    const ownerDocument = containerRef.current?.ownerDocument;
+    ownerDocument?.addEventListener('lostpointercapture', handlePointerCancel);
+    return () => {
+      ownerDocument?.removeEventListener('lostpointercapture', handlePointerCancel);
+      clearSwipePosition();
+    };
+  }, [clearSwipePosition, handlePointerCancel]);
+  const handleClickCapture = event => {
+    if (suppressClick.current && event.detail > 0) {
+      suppressClick.current = false;
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+  return {
+    clearSwipePosition,
+    containerRef,
+    handleClickCapture,
+    handlePointerCancel,
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp
+  };
+};
+
+export { useSnackbarSwipeDismiss as default };
+//# sourceMappingURL=useSnackbarSwipeDismiss.mjs.map

package/build/Snackbar/useSnackbarSwipeDismiss.mjs.map

@@ -0,0 +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":"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"}

package/build/i18n/en.json

@@ -38,6 +38,7 @@
   "neptune.PhoneNumberInput.phoneNumberPrefix": "Prefix",
   "neptune.Select.searchPlaceholder": "Search...",
   "neptune.SelectInput.noResultsFound": "No results found",
+  "neptune.Snackbar.escapeDismissHint": "Press Escape to dismiss.",
   "neptune.StatusIcon.iconLabel.error": "Error:",
   "neptune.StatusIcon.iconLabel.information": "Information:",
   "neptune.StatusIcon.iconLabel.pending": "Pending:",

package/build/i18n/en.json.js

@@ -42,6 +42,7 @@ var en = {
 	"neptune.PhoneNumberInput.phoneNumberPrefix": "Prefix",
 	"neptune.Select.searchPlaceholder": "Search...",
 	"neptune.SelectInput.noResultsFound": "No results found",
+	"neptune.Snackbar.escapeDismissHint": "Press Escape to dismiss.",
 	"neptune.StatusIcon.iconLabel.error": "Error:",
 	"neptune.StatusIcon.iconLabel.information": "Information:",
 	"neptune.StatusIcon.iconLabel.pending": "Pending:",

package/build/i18n/en.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/en.json.mjs

@@ -38,6 +38,7 @@ var en = {
 	"neptune.PhoneNumberInput.phoneNumberPrefix": "Prefix",
 	"neptune.Select.searchPlaceholder": "Search...",
 	"neptune.SelectInput.noResultsFound": "No results found",
+	"neptune.Snackbar.escapeDismissHint": "Press Escape to dismiss.",
 	"neptune.StatusIcon.iconLabel.error": "Error:",
 	"neptune.StatusIcon.iconLabel.information": "Information:",
 	"neptune.StatusIcon.iconLabel.pending": "Pending:",

package/build/i18n/en.json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/main.css

@@ -26948,15 +26948,14 @@ a[data-toggle="tooltip"] {
   color: var(--color-white);
 }
 .np-icon-button-minimal-default {
-  color: var(--color-interactive-primary);
-  background-color: var(--color-background-screen);
+  color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
   background-color: transparent;
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-background-screen-hover);
+  background-color: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-hover));
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-screen-active);
+  background-color: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-screen-active));
 }
 .np-icon-button-secondary-default {
   color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
@@ -31516,75 +31515,138 @@ button.np-link {
 [dir="rtl"] .np-theme-personal .sliding-panel.sliding-panel--border-left {
   box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
 }
-.snackbar {
-  text-align: center;
+.wds-Snackbar {
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  padding-inline: var(--size-16);
+  padding-block-end: calc(var(--size-16) + env(safe-area-inset-bottom));
   position: fixed;
   inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
+  inset-inline: 0;
   z-index: 1060;
 }
-.snackbar__text {
-  background: #37517e;
-  color: #ffffff;
-  display: inline-flex;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-  align-items: center;
-  justify-content: space-between;
+@media (min-width: 600px) {
+  .wds-Snackbar {
+    padding-block-end: var(--size-24);
+  }
+}
+.wds-Snackbar--swipe-dismiss {
+  transition: transform var(--Snackbar-exit-duration) cubic-bezier(1, 0, 1, 1);
+}
+.wds-Snackbar--swipe-settle {
+  transition: transform var(--Snackbar-exit-duration) cubic-bezier(0, 0, 0, 1);
+}
+.wds-Snackbar-container {
+  --Prompt-border-radius: var(--radius-medium);
+  --Prompt-gap: var(--size-8);
+  --Prompt-padding-x: var(--size-12);
+  --Prompt-padding-y: var(--size-12);
+  box-sizing: border-box;
+  max-inline-size: 480px;
   text-align: start;
-  font-size: var(--wds-font-size-body);
-  margin-block: 0;
-  margin-inline: var(--size-16);
-  padding-block: var(--size-8);
-  padding-inline: var(--size-16);
-  inline-size: calc(100% - var(--size-32));
-  transition: 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  cursor: grab;
+  touch-action: pan-x pinch-zoom;
 }
-.np-theme-personal .snackbar__text {
-  box-shadow: 0 2px 4px 0 rgba(69, 71, 69, 0.35);
-  position: relative;
-  background: var(--color-contrast-theme);
-  border-radius: var(--radius-small);
-  color: var(--color-contrast-overlay);
+.wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
+  grid-template-columns: auto minmax(0, 1fr);
 }
-.np-theme-personal .snackbar__text::after {
-  display: block;
-  border-radius: inherit;
-  block-size: 100%;
-  inline-size: 100%;
-  content: "";
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block-start: 0;
-  z-index: -1;
-  background-color: var(--color-background-neutral);
+@media (min-width: 600px) {
+  .wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
 }
-.np-theme-personal--dark .snackbar__text,
-.np-theme-personal--forest-green .snackbar__text {
-  box-shadow: none;
+.wds-Snackbar-container .wds-prompt__media-wrapper {
+  display: flex;
+  align-items: center;
+  min-block-size: max(var(--size-32), 1lh);
+  padding-block-start: 0;
+  color: var(--color-sentiment-content-primary);
+}
+.wds-Snackbar-container .wds-prompt__media-wrapper:has(+ .wds-Snackbar__content .wds-Snackbar__action) {
+  min-block-size: max(var(--size-32), calc(1lh + var(--size-5) * 2));
+}
+.wds-Snackbar__media-asset {
+  display: flex;
+}
+.wds-Snackbar__media-asset svg {
+  inline-size: var(--size-24);
+  block-size: var(--size-24);
+}
+.wds-Snackbar__process-indicator .process-circle {
+  stroke: currentColor;
+}
+.wds-Snackbar-container .wds-prompt__dismiss {
+  display: none;
+  align-self: flex-start;
+  margin-block-start: calc(var(--size-4) - 1px);
 }
 @media (min-width: 600px) {
-  .snackbar__text {
-    inline-size: auto;
-    max-inline-size: 600px;
+  .wds-Snackbar-container .wds-prompt__dismiss {
+    display: flex;
   }
 }
-.snackbar__text__action {
+.wds-Snackbar__action {
   flex-shrink: 0;
-  margin-inline-start: var(--size-16);
 }
-.snackbar__text-container-enter,
-.snackbar__text-container-exit {
-  transform: translateY(calc(100% + 10px));
+.wds-Snackbar__content {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--size-8);
+  flex: 1 0 0;
+  min-block-size: var(--size-32);
+  min-inline-size: 0;
+}
+.wds-Snackbar__message {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  inline-size: auto;
+  flex: 1 0 0;
+  min-inline-size: 0;
+  align-self: stretch;
+}
+.wds-Snackbar__body {
+  display: block;
 }
-.snackbar__text-container-enter-active {
-  transform: translateY(-16px);
-  transform: translateY(calc(-16px - env(safe-area-inset-bottom)));
+.wds-Snackbar-container-appear,
+.wds-Snackbar-container-enter {
+  opacity: 0;
+  transform: translateY(80px) scale(0.5);
 }
-@media (min-width: 600px) {
-  .snackbar__text-container-enter-active {
-    transform: translateY(-24px);
+.wds-Snackbar-container-appear-active,
+.wds-Snackbar-container-enter-active {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  transition: opacity 150ms linear, transform var(--Snackbar-enter-duration) cubic-bezier(0, 0, 0, 1);
+}
+.wds-Snackbar-container-exit {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+.wds-Snackbar-container-exit-active {
+  opacity: 0;
+  transform: translateY(80px) scale(0.5);
+  transition: opacity 50ms linear 50ms, transform var(--Snackbar-exit-duration) cubic-bezier(1, 0, 1, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .wds-Snackbar--swipe-dismiss,
+  .wds-Snackbar--swipe-settle {
+    transition: none;
+  }
+  .wds-Snackbar-container-appear,
+  .wds-Snackbar-container-appear-active,
+  .wds-Snackbar-container-enter,
+  .wds-Snackbar-container-enter-active,
+  .wds-Snackbar-container-exit {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+  .wds-Snackbar-container-exit-active {
+    opacity: 0;
+    transform: none;
+    transition: none;
   }
 }
 .status-circle.negative,

package/build/styles/IconButton/IconButton.css

@@ -35,15 +35,14 @@
   color: var(--color-white);
 }
 .np-icon-button-minimal-default {
-  color: var(--color-interactive-primary);
-  background-color: var(--color-background-screen);
+  color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
   background-color: transparent;
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-background-screen-hover);
+  background-color: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-hover));
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-screen-active);
+  background-color: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-screen-active));
 }
 .np-icon-button-secondary-default {
   color: var(--color-sentiment-content-primary, var(--color-interactive-primary));

package/build/styles/Snackbar/Snackbar.css

@@ -1,71 +1,134 @@
-.snackbar {
-  text-align: center;
+.wds-Snackbar {
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  padding-inline: var(--size-16);
+  padding-block-end: calc(var(--size-16) + env(safe-area-inset-bottom));
   position: fixed;
   inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
+  inset-inline: 0;
   z-index: 1060;
 }
-.snackbar__text {
-  background: #37517e;
-  color: #ffffff;
-  display: inline-flex;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-  align-items: center;
-  justify-content: space-between;
+@media (min-width: 600px) {
+  .wds-Snackbar {
+    padding-block-end: var(--size-24);
+  }
+}
+.wds-Snackbar--swipe-dismiss {
+  transition: transform var(--Snackbar-exit-duration) cubic-bezier(1, 0, 1, 1);
+}
+.wds-Snackbar--swipe-settle {
+  transition: transform var(--Snackbar-exit-duration) cubic-bezier(0, 0, 0, 1);
+}
+.wds-Snackbar-container {
+  --Prompt-border-radius: var(--radius-medium);
+  --Prompt-gap: var(--size-8);
+  --Prompt-padding-x: var(--size-12);
+  --Prompt-padding-y: var(--size-12);
+  box-sizing: border-box;
+  max-inline-size: 480px;
   text-align: start;
-  font-size: var(--wds-font-size-body);
-  margin-block: 0;
-  margin-inline: var(--size-16);
-  padding-block: var(--size-8);
-  padding-inline: var(--size-16);
-  inline-size: calc(100% - var(--size-32));
-  transition: 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  cursor: grab;
+  touch-action: pan-x pinch-zoom;
 }
-.np-theme-personal .snackbar__text {
-  box-shadow: 0 2px 4px 0 rgba(69, 71, 69, 0.35);
-  position: relative;
-  background: var(--color-contrast-theme);
-  border-radius: var(--radius-small);
-  color: var(--color-contrast-overlay);
+.wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
+  grid-template-columns: auto minmax(0, 1fr);
 }
-.np-theme-personal .snackbar__text::after {
-  display: block;
-  border-radius: inherit;
-  block-size: 100%;
-  inline-size: 100%;
-  content: "";
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block-start: 0;
-  z-index: -1;
-  background-color: var(--color-background-neutral);
-}
-.np-theme-personal--dark .snackbar__text,
-.np-theme-personal--forest-green .snackbar__text {
-  box-shadow: none;
+@media (min-width: 600px) {
+  .wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+}
+.wds-Snackbar-container .wds-prompt__media-wrapper {
+  display: flex;
+  align-items: center;
+  min-block-size: max(var(--size-32), 1lh);
+  padding-block-start: 0;
+  color: var(--color-sentiment-content-primary);
+}
+.wds-Snackbar-container .wds-prompt__media-wrapper:has(+ .wds-Snackbar__content .wds-Snackbar__action) {
+  min-block-size: max(var(--size-32), calc(1lh + var(--size-5) * 2));
+}
+.wds-Snackbar__media-asset {
+  display: flex;
+}
+.wds-Snackbar__media-asset svg {
+  inline-size: var(--size-24);
+  block-size: var(--size-24);
+}
+.wds-Snackbar__process-indicator .process-circle {
+  stroke: currentColor;
+}
+.wds-Snackbar-container .wds-prompt__dismiss {
+  display: none;
+  align-self: flex-start;
+  margin-block-start: calc(var(--size-4) - 1px);
 }
 @media (min-width: 600px) {
-  .snackbar__text {
-    inline-size: auto;
-    max-inline-size: 600px;
+  .wds-Snackbar-container .wds-prompt__dismiss {
+    display: flex;
   }
 }
-.snackbar__text__action {
+.wds-Snackbar__action {
   flex-shrink: 0;
-  margin-inline-start: var(--size-16);
 }
-.snackbar__text-container-enter,
-.snackbar__text-container-exit {
-  transform: translateY(calc(100% + 10px));
+.wds-Snackbar__content {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--size-8);
+  flex: 1 0 0;
+  min-block-size: var(--size-32);
+  min-inline-size: 0;
 }
-.snackbar__text-container-enter-active {
-  transform: translateY(-16px);
-  transform: translateY(calc(-16px - env(safe-area-inset-bottom)));
+.wds-Snackbar__message {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  inline-size: auto;
+  flex: 1 0 0;
+  min-inline-size: 0;
+  align-self: stretch;
 }
-@media (min-width: 600px) {
-  .snackbar__text-container-enter-active {
-    transform: translateY(-24px);
+.wds-Snackbar__body {
+  display: block;
+}
+.wds-Snackbar-container-appear,
+.wds-Snackbar-container-enter {
+  opacity: 0;
+  transform: translateY(80px) scale(0.5);
+}
+.wds-Snackbar-container-appear-active,
+.wds-Snackbar-container-enter-active {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  transition: opacity 150ms linear, transform var(--Snackbar-enter-duration) cubic-bezier(0, 0, 0, 1);
+}
+.wds-Snackbar-container-exit {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+.wds-Snackbar-container-exit-active {
+  opacity: 0;
+  transform: translateY(80px) scale(0.5);
+  transition: opacity 50ms linear 50ms, transform var(--Snackbar-exit-duration) cubic-bezier(1, 0, 1, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .wds-Snackbar--swipe-dismiss,
+  .wds-Snackbar--swipe-settle {
+    transition: none;
+  }
+  .wds-Snackbar-container-appear,
+  .wds-Snackbar-container-appear-active,
+  .wds-Snackbar-container-enter,
+  .wds-Snackbar-container-enter-active,
+  .wds-Snackbar-container-exit {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+  .wds-Snackbar-container-exit-active {
+    opacity: 0;
+    transform: none;
+    transition: none;
   }
 }