@transferwise/components 0.0.0-experimental-bf3b43b → 0.0.0-experimental-cbc00a7

package/build/types/Snackbar/Snackbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAKvD,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtD,CAAC;IACF,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACnB;AAMD,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,gCAoG5C,CAAC;;AAEF,wBAAwC"}
+{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAEvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAIrD,OAAO,KAAK,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAE9E,MAAM,WAAW,aAAa;IAC5B,4FAA4F;IAC5F,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,8FAA8F;IAC9F,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,GAAI,oGAUtB,qBAAqB,gCAuFvB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/build/types/Snackbar/Snackbar.types.d.ts

@@ -0,0 +1,19 @@
+import type { ButtonProps, ButtonReferenceType } from '../Button/Button.types';
+import type { SnackbarProps } from './Snackbar';
+/** One optional action. Supports callbacks and navigation through the Button API. */
+export type SnackbarAction = Pick<ButtonProps, 'href' | 'target'> & {
+    label: ButtonProps['children'];
+    onClick?: React.MouseEventHandler<ButtonReferenceType>;
+};
+/** Props accepted by `createSnackbar` from `useSnackbar()`. */
+export type SnackbarCreationProps = Omit<SnackbarProps, 'timeout'>;
+/** Props the provider passes to control a Snackbar. Internal. */
+export interface SnackbarInternalProps extends Omit<SnackbarProps, 'timeout' | 'timestamp'> {
+    /** Changes for each new Snackbar so LiveRegion re-announces it. */
+    announcementKey: number;
+    onDismissRequest: () => void;
+    onExited: () => void;
+    timeout: number;
+    visible: boolean;
+}
+//# sourceMappingURL=Snackbar.types.d.ts.map

package/build/types/Snackbar/Snackbar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Snackbar.types.d.ts","sourceRoot":"","sources":["../../../src/Snackbar/Snackbar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,qFAAqF;AACrF,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,QAAQ,CAAC,GAAG;IAClE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;CACxD,CAAC;AAEF,+DAA+D;AAC/D,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;AAEnE,iEAAiE;AACjE,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,WAAW,CAAC;IACzF,mEAAmE;IACnE,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB"}

package/build/types/Snackbar/SnackbarContext.d.ts

@@ -1,6 +1,6 @@
-import { SnackbarProps } from './Snackbar';
+import type { SnackbarCreationProps } from './Snackbar.types';
 export type SnackbarContextType = {
-    createSnackbar: (props: Omit<SnackbarProps, 'timeout' | 'timestamp'>) => void;
+    createSnackbar: (props: SnackbarCreationProps) => void;
 };
 export declare const SnackbarContext: import("react").Context<SnackbarContextType>;
 export declare const SnackbarConsumer: import("react").Consumer<SnackbarContextType>;

package/build/types/Snackbar/SnackbarContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarContext.d.ts","sourceRoot":"","sources":["../../../src/Snackbar/SnackbarContext.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,WAAW,CAAC,KAAK,IAAI,CAAC;CAC/E,CAAC;AAEF,eAAO,MAAM,eAAe,8CAAmE,CAAC;AAEhG,eAAO,MAAM,gBAAgB,+CAA2B,CAAC"}
+{"version":3,"file":"SnackbarContext.d.ts","sourceRoot":"","sources":["../../../src/Snackbar/SnackbarContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAE9D,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACxD,CAAC;AAEF,eAAO,MAAM,eAAe,8CAAmE,CAAC;AAEhG,eAAO,MAAM,gBAAgB,+CAA2B,CAAC"}

package/build/types/Snackbar/SnackbarPortal.d.ts

@@ -0,0 +1,4 @@
+/** Renders the Snackbar into `document.body` after mount, so it's safe for SSR. */
+declare const SnackbarPortal: (props: import("./Snackbar.types").SnackbarInternalProps) => import("react").ReactPortal | null;
+export default SnackbarPortal;
+//# sourceMappingURL=SnackbarPortal.d.ts.map

package/build/types/Snackbar/SnackbarPortal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnackbarPortal.d.ts","sourceRoot":"","sources":["../../../src/Snackbar/SnackbarPortal.tsx"],"names":[],"mappings":"AAIA,mFAAmF;AACnF,QAAA,MAAM,cAAc,iGAA2B,CAAC;AAEhD,eAAe,cAAc,CAAC"}

package/build/types/Snackbar/SnackbarProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarProvider.d.ts","sourceRoot":"","sources":["../../../src/Snackbar/SnackbarProvider.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,OAAc,EAAE,QAAQ,EAAE,EAAE,qBAAqB,+BAsB3F"}
+{"version":3,"file":"SnackbarProvider.d.ts","sourceRoot":"","sources":["../../../src/Snackbar/SnackbarProvider.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,OAAc,EAAE,QAAQ,EAAE,EAAE,qBAAqB,+BAsB3F"}

package/build/types/Snackbar/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const SNACKBAR_ENTER_DURATION = 300;
+export declare const SNACKBAR_EXIT_DURATION = 150;
+//# sourceMappingURL=constants.d.ts.map

package/build/types/Snackbar/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/Snackbar/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAC3C,eAAO,MAAM,sBAAsB,MAAM,CAAC"}

package/build/types/Snackbar/useSnackbar.d.ts

@@ -1,3 +1,3 @@
-declare function useSnackbar(): (props: Omit<import("./Snackbar").SnackbarProps, "timeout" | "timestamp">) => void;
+declare function useSnackbar(): (props: import("./Snackbar.types").SnackbarCreationProps) => void;
 export default useSnackbar;
 //# sourceMappingURL=useSnackbar.d.ts.map

package/build/types/Snackbar/useSnackbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSnackbar.d.ts","sourceRoot":"","sources":["../../../src/Snackbar/useSnackbar.ts"],"names":[],"mappings":"AAIA,iBAAS,WAAW,uFAInB;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"useSnackbar.d.ts","sourceRoot":"","sources":["../../../src/Snackbar/useSnackbar.ts"],"names":[],"mappings":"AAIA,iBAAS,WAAW,sEAInB;AAED,eAAe,WAAW,CAAC"}

package/build/types/Snackbar/useSnackbarManager.d.ts

@@ -0,0 +1,16 @@
+import type { SnackbarCreationProps } from './Snackbar.types';
+type SnackbarInstance = {
+    id: number;
+    props: SnackbarCreationProps;
+};
+/** Owns one active Snackbar and its latest replacement, waiting for exit before the next enters. */
+declare const useSnackbarManager: () => {
+    active: SnackbarInstance | null;
+    announcementKey: number;
+    dismissSnackbar: () => void;
+    handleExited: () => void;
+    showSnackbar: (props: SnackbarCreationProps) => void;
+    visible: boolean;
+};
+export default useSnackbarManager;
+//# sourceMappingURL=useSnackbarManager.d.ts.map

package/build/types/Snackbar/useSnackbarManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSnackbarManager.d.ts","sourceRoot":"","sources":["../../../src/Snackbar/useSnackbarManager.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAE9D,KAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,qBAAqB,CAAC;CAC9B,CAAC;AA+EF,oGAAoG;AACpG,QAAA,MAAM,kBAAkB;;;;;0BAImB,qBAAqB;;CA4B/D,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/build/types/Title/Title.d.ts

@@ -10,7 +10,7 @@ export type TitleProps = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElemen
      */
     type?: TitleTypes;
 };
-declare const Title: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLSpanElement | HTMLHeadingElement | HTMLLabelElement> & React.LiHTMLAttributes<HTMLLIElement> & {
+declare const Title: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLHeadingElement | HTMLLabelElement | HTMLSpanElement> & React.LiHTMLAttributes<HTMLLIElement> & {
     /**
      * Default value will based one `type` prop
      */
@@ -19,6 +19,6 @@ declare const Title: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<H
      * Default value: {@link DEFAULT_TYPE}
      */
     type?: TitleTypes;
-} & React.RefAttributes<HTMLSpanElement | HTMLHeadingElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement>>;
+} & React.RefAttributes<HTMLHeadingElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLSpanElement>>;
 export default Title;
 //# sourceMappingURL=Title.d.ts.map

package/build/types/Upload/Steps/UploadImageStep/UploadImageStep.d.ts

@@ -15,7 +15,7 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
     uploadInputRef: import("react").RefObject<HTMLInputElement>;
     onManualUpload: () => void;
     onKeyDown: (event: React.KeyboardEvent<HTMLLabelElement>) => void;
-    getImage: () => number | true | import("react").JSX.Element | Iterable<import("react").ReactNode>;
+    getImage: () => number | true | Iterable<import("react").ReactNode> | import("react").JSX.Element;
     render(): import("react").JSX.Element;
 }
 //# sourceMappingURL=UploadImageStep.d.ts.map

package/build/types/UploadInput/UploadItem/UploadItemLink.d.ts

@@ -5,5 +5,5 @@ export declare const UploadItemLink: import("react").ForwardRefExoticComponent<{
     singleFileUpload: boolean;
 } & {
     children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
+} & import("react").RefAttributes<HTMLAnchorElement | HTMLDivElement>>;
 //# sourceMappingURL=UploadItemLink.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-bf3b43b",
+  "version": "0.0.0-experimental-cbc00a7",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -59,7 +59,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.7",
-    "@transferwise/icons": "^4.6.0",
+    "@transferwise/icons": "^4.5.0",
     "@transferwise/less-config": "3.2.0",
     "@tsconfig/recommended": "^1.0.13",
     "@types/babel__core": "^7.20.5",
@@ -72,7 +72,7 @@
     "@types/react-dom": "^18.3.7",
     "@types/react-transition-group": "4.4.12",
     "@monaco-editor/react": "^4.7.0",
-    "monaco-editor": "^0.57.0",
+    "monaco-editor": "^0.56.0",
     "monaco-editor-webpack-plugin": "^7.1.1",
     "@wise/art": "^2.32.0",
     "@wise/components-theming": "1.10.3",

package/src/Snackbar/Snackbar.css

@@ -1,79 +1,131 @@
-.snackbar {
-  text-align: center;
+.wds-Snackbar {
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  padding-inline: 16px;
+  padding-inline: var(--size-16);
+  padding-block-end: calc(16px + env(safe-area-inset-bottom));
+  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: 24px;
+    padding-block-end: var(--size-24);
+  }
+}
+.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: 0.875rem;
-  font-size: var(--font-size-14);
-  margin-block: 0;
-  margin-inline: 16px;
-  margin-inline: var(--size-16);
-  padding-block: 8px;
-  padding-block: var(--size-8);
-  padding-inline: 16px;
-  padding-inline: var(--size-16);
-  inline-size: calc(100% - 32px);
-  inline-size: calc(100% - var(--size-32));
-  transition: 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-.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: 10px;
-  border-radius: var(--radius-small);
-  color: var(--color-contrast-overlay);
-}
-.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: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-theme-personal--dark .snackbar__text,
-.np-theme-personal--forest-green .snackbar__text {
-  box-shadow: none;
+}
+.wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
+  grid-template-columns: auto minmax(0, 1fr);
 }
 @media (min-width: 600px) {
-  .snackbar__text {
-    inline-size: auto;
-    max-inline-size: 600px;
+  .wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
+    grid-template-columns: auto minmax(0, 1fr) auto;
   }
 }
-.snackbar__text__action {
-  flex-shrink: 0;
-  margin-inline-start: 16px;
-  margin-inline-start: var(--size-16);
+.wds-Snackbar-container .wds-prompt__media-wrapper {
+  display: flex;
+  align-items: center;
+  min-block-size: max(32px, 1lh);
+  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(32px, calc(1lh + 5px * 2));
+  min-block-size: max(var(--size-32), calc(1lh + var(--size-5) * 2));
+}
+.wds-Snackbar__media-asset {
+  display: flex;
 }
-.snackbar__text-container-enter,
-.snackbar__text-container-exit {
-  transform: translateY(calc(100% + 10px));
+.wds-Snackbar__media-asset svg {
+  inline-size: 24px;
+  inline-size: var(--size-24);
+  block-size: 24px;
+  block-size: var(--size-24);
 }
-.snackbar__text-container-enter-active {
-  transform: translateY(-16px);
-  transform: translateY(calc(-16px - env(safe-area-inset-bottom)));
+.wds-Snackbar-container .wds-prompt__dismiss {
+  display: none;
+  align-self: flex-start;
+  margin-block-start: calc(4px - 1px);
+  margin-block-start: calc(var(--size-4) - 1px);
 }
 @media (min-width: 600px) {
-  .snackbar__text-container-enter-active {
-    transform: translateY(-24px);
+  .wds-Snackbar-container .wds-prompt__dismiss {
+    display: flex;
+  }
+}
+.wds-Snackbar__action {
+  flex-shrink: 0;
+}
+.wds-Snackbar__content {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  gap: var(--size-8);
+  flex: 1 0 0;
+  min-block-size: 32px;
+  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;
+  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+}
+.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-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;
   }
 }

package/src/Snackbar/Snackbar.less

@@ -1,80 +1,141 @@
 @import (reference) "./../styles/variables/zindex.less";
-@import (reference) "./../styles/variables/neptune-tokens.less";
 
-.snackbar {
-  text-align: center;
+.wds-Snackbar {
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  padding-inline: var(--size-16);
+  padding-bottom: calc(var(--size-16) + env(safe-area-inset-bottom));
   position: fixed;
   bottom: 0;
-  left: 0;
+  inset-inline: 0;
+  z-index: @zindex-mobile-nav;
 
-  right: 0;
+  @media (--screen-sm) {
+    padding-bottom: var(--size-24);
+  }
 
-  z-index: @zindex-mobile-nav;
+  &-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-width: 480px;
+    text-align: start;
+  }
+
+  &-container .wds-prompt__content-wrapper--with-dismiss {
+    grid-template-columns: auto minmax(0, 1fr);
+
+    @media (--screen-sm) {
+      grid-template-columns: auto minmax(0, 1fr) auto;
+    }
+  }
 
-  &__text {
-    background: @color-navy-background-elevated;
-    color: @color-navy-content-primary;
-    display: inline-flex;
-    border-radius: 2px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+  &-container .wds-prompt__media-wrapper {
+    display: flex;
     align-items: center;
-    justify-content: space-between;
-    text-align: left;
-
-    font-size: var(--font-size-14);
-    margin: 0 var(--size-16);
-    padding: var(--size-8) var(--size-16);
-    width: calc(100% - var(--size-32));
-    transition: 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
-
-    .np-theme-personal & {
-      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);
-
-      &::after {
-        display: block;
-        border-radius: inherit;
-        height: 100%;
-        width: 100%;
-        content: "";
-        position: absolute;
-        left: 0;
-        top: 0;
-        z-index: -1;
-        background-color: var(--color-background-neutral);
-      }
+    min-height: max(var(--size-32), 1lh);
+    padding-top: 0;
+    color: var(--color-sentiment-content-primary);
+
+    // At 400% reflow spacing shrinks, but the text's line height does not.
+    &:has(+ .wds-Snackbar__content .wds-Snackbar__action) {
+      min-height: max(var(--size-32), calc(1lh + var(--size-5) * 2));
     }
+  }
 
-    .np-theme-personal--dark &,
-    .np-theme-personal--forest-green & {
-      box-shadow: none;
+  &__media-asset {
+    display: flex;
+
+    svg {
+      width: var(--size-24);
+      height: var(--size-24);
     }
+  }
+
+  &-container .wds-prompt__dismiss {
+    display: none;
+    align-self: flex-start;
+    margin-top: calc(var(--size-4) - 1px);
 
     @media (--screen-sm) {
-      width: auto;
-      max-width: 600px;
+      display: flex;
     }
+  }
 
-    &__action {
-      flex-shrink: 0;
-      margin-left: var(--size-16);
-    }
+  &__action {
+    flex-shrink: 0;
+  }
 
-    &-container-enter,
-    &-container-exit {
-      transform: translateY(calc(100% + 10px));
-    }
+  &__content {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--size-8);
+    flex: 1 0 0;
+    min-height: var(--size-32);
+    min-width: 0;
+  }
 
-    &-container-enter-active {
-      transform: translateY(-16px);
-      transform: translateY(calc(-16px - env(safe-area-inset-bottom)));
+  &__message {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: auto;
+    flex: 1 0 0;
+    min-width: 0;
+    align-self: stretch;
+  }
 
-      @media (--screen-sm) {
-        transform: translateY(-24px);
-      }
-    }
+  &__body {
+    display: block;
+    font-weight: var(--font-weight-medium);
+  }
+}
+
+.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-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;
   }
 }