@transferwise/components 46.166.0 → 46.168.0

package/src/_deprecated/Select/Select.tsx

@@ -141,7 +141,7 @@ export interface SelectProps {
 const defaultClassNames = {};
 
 /**
- * @deprecated Use `SelectInput` instead (https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput)
+ * @deprecated Use `SelectInput` instead (https://storybook.wise.design/?path=/docs/forms-selectinput--docs)
  */
 export default function Select({
   placeholder,

package/src/_deprecated/Select/_stories/Select.story.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import Select, { SelectItem, SelectOptionItem } from '..';
 
 /**
- * @deprecated Use **`SelectInput`** instead <br/> [https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput](https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput)
+ * @deprecated Use **`SelectInput`** instead <br/> [https://storybook.wise.design/?path=/docs/forms-selectinput--docs](https://storybook.wise.design/?path=/docs/forms-selectinput--docs)
  */
 const meta: Meta<typeof Select> = {
   component: Select,

package/src/common/BottomSheet/BottomSheet.tsx

@@ -36,9 +36,7 @@ export type BottomSheetProps = PropsWithChildren<
 >;
 
 /**
- * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/
- *
- * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet
+ * Design guidance: https://docs.wise.design/components/bottom-sheet/
  *
  */
 const BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {

package/src/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/src/index.ts

@@ -4,6 +4,17 @@
  * Types
  */
 export type { ContainerProps } from './Container';
+export type {
+  CardContainerProps,
+  CardContainerSpotlight,
+  CardContainerPadding,
+} from './CardContainer';
+export type {
+  CardWidgetProps,
+  CardWidgetHeader,
+  CardWidgetTitleAction,
+  CardWidgetActionButton,
+} from './CardWidget';
 export type { LogoProps, LogoSize, LogoAssetName } from './Logo';
 export type { FlowNavigationProps, CriticalBannerLegacyData } from './FlowNavigation';
 export type { AccordionItem, AccordionProps } from './Accordion';
@@ -135,8 +146,8 @@ export type {
   SelectProps,
 } from './_deprecated/Select';
 export type { SlidingPanelProps } from './SlidingPanel';
-export type { SnackbarProps, SnackbarProviderProps } from './Snackbar';
-export type { SnackbarContextType } from './Snackbar/SnackbarContext';
+export type { SnackbarCreationProps, SnackbarProviderProps } from './Prompt/Snackbar';
+export type { SnackbarContextType } from './Prompt/Snackbar/SnackbarContext';
 export type { StatusIconProps, StatusIconSentiment } from './StatusIcon';
 export type { StickyProps } from './Sticky';
 export type { SummaryProps } from './_deprecated/Summary';
@@ -218,6 +229,8 @@ export { default as Chevron } from './Chevron';
 export { Chip, default as Chips } from './Chips';
 export { default as CircularButton } from './CircularButton';
 export { default as Container } from './Container';
+export { default as CardContainer } from './CardContainer';
+export { default as CardWidget } from './CardWidget';
 export { default as Option } from './common/Option';
 export { default as BottomSheet } from './common/BottomSheet';
 export { default as BaseCard } from './common/BaseCard';
@@ -282,8 +295,8 @@ export { default as SegmentedControl } from './SegmentedControl';
 export { default as Select } from './_deprecated/Select';
 export { default as SentimentSurface } from './SentimentSurface';
 export { default as SlidingPanel } from './SlidingPanel';
-export { SnackbarConsumer, SnackbarContext } from './Snackbar/SnackbarContext';
-export { default as SnackbarProvider } from './Snackbar/SnackbarProvider';
+export { SnackbarConsumer, SnackbarContext } from './Prompt/Snackbar/SnackbarContext';
+export { default as SnackbarProvider } from './Prompt/Snackbar/SnackbarProvider';
 export { default as StatusIcon } from './StatusIcon/StatusIcon';
 export { default as Stepper } from './Stepper/Stepper';
 export { default as Sticky } from './Sticky';
@@ -308,7 +321,7 @@ export { default as List } from './List';
  */
 export { useDirection, useLayout } from './common/hooks';
 export { useScreenSize } from './common/hooks/useScreenSize';
-export { default as useSnackbar } from './Snackbar/useSnackbar';
+export { default as useSnackbar } from './Prompt/Snackbar/useSnackbar';
 
 /**
  * Enums

package/src/main.css

@@ -26203,6 +26203,192 @@ a[data-toggle="tooltip"] {
 .wds-container--fluid {
   max-inline-size: var(--wds-container-width-fluid);
 }
+.wds-card-container {
+  --CardContainer-shadow: var(--CardContainer-theme-shadow, none);
+  --CardContainer-background-color: var(--color-background-screen);
+  --CardContainer-border-color: var(--color-border-neutral);
+  --CardContainer-border-radius: var(--radius-large);
+  --CardContainer-padding-block: var(--size-8);
+  --CardContainer-padding-inline: var(--size-8);
+  background-color: var(--CardContainer-background-color);
+  border: 1px solid var(--CardContainer-border-color);
+  border-radius: var(--CardContainer-border-radius);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding-block: var(--CardContainer-padding-block);
+  padding-inline: var(--CardContainer-padding-inline);
+  inline-size: 100%;
+}
+@media (min-width: 840px) {
+  .wds-card-container {
+    --CardContainer-padding-block: var(--size-16);
+    --CardContainer-padding-inline: var(--size-16);
+  }
+}
+.wds-card-container--padding-none {
+  --CardContainer-padding-block: 0px;
+  --CardContainer-padding-inline: 0px;
+  overflow: clip;
+}
+.wds-card-container--active {
+  --CardContainer-background-color: var(--color-background-elevated);
+  --CardContainer-border-color: color-mix(in srgb, var(--color-border-neutral) 25%, transparent);
+  box-shadow: var(--CardContainer-shadow);
+}
+.wds-card-container--inactive {
+  --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
+  border-width: 0;
+  padding-block: calc(var(--CardContainer-padding-block) + 1px);
+  padding-inline: calc(var(--CardContainer-padding-inline) + 1px);
+  position: relative;
+}
+.wds-card-container--interactive:has(
+      > a[href]:hover,
+      > button:enabled:hover,
+      > a[href]:focus-visible,
+      > button:enabled:focus-visible
+    ).wds-card-container--active {
+  --CardContainer-border-color: color-mix(in srgb, var(--color-border-neutral) 75%, transparent);
+}
+.wds-card-container--interactive:has(
+      > a[href]:hover,
+      > button:enabled:hover,
+      > a[href]:focus-visible,
+      > button:enabled:focus-visible
+    ).wds-card-container--inactive {
+  --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+}
+.wds-card-container--interactive:has(> a[href]:active, > button:enabled:active).wds-card-container--active {
+  --CardContainer-border-color: var(--color-border-neutral);
+}
+.wds-card-container--interactive:has(> a[href]:active, > button:enabled:active).wds-card-container--inactive {
+  --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+}
+.wds-card-container__border {
+  container-type: size;
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+}
+.wds-card-container__border svg {
+  display: block;
+  block-size: 100%;
+  inline-size: 100%;
+}
+.wds-card-container__border rect {
+  --CardContainer-border-dash-size: calc(var(--size-12) * 0.5);
+  --CardContainer-border-stroke-radius: calc(min(var(--CardContainer-border-radius), 50cqh, 50cqw) - 0.5px);
+  fill: none;
+  block-size: calc(100% - 1px);
+  rx: var(--CardContainer-border-stroke-radius);
+  ry: var(--CardContainer-border-stroke-radius);
+  stroke: var(--color-border-neutral);
+  stroke-dasharray: var(--CardContainer-border-dash-size) var(--CardContainer-border-dash-size);
+  inline-size: calc(100% - 1px);
+  x: 0.5px;
+  y: 0.5px;
+}
+/**
+ * The active spotlight's resting shadow, only designed for the light themes. Set on every theme
+ * root, as a nested ThemeProvider renders its own, so a card follows its nearest theme: a dark or
+ * green provider inside a light one turns the shadow off.
+ *
+ * There is no shadow or elevation token in @transferwise/neptune-tokens, so the value is
+ * component-scoped for now, the way PromoCard scopes `--Card-box-shadow`. It is the "Card Active
+ * shadow" effect style from Figma: `#0e0f0c` at 4%, kept literal so it doesn't drift with a
+ * theme's tokens. Collapses to a token reference once one is minted.
+ */
+.np-theme-personal {
+  --CardContainer-theme-shadow: 0 2px 12px rgba(14, 15, 12, 0.04), 0 2px 32px rgba(14, 15, 12, 0.04);
+}
+.np-theme-personal.np-theme-personal--dark,
+    .np-theme-personal.np-theme-personal--bright-green,
+    .np-theme-personal.np-theme-personal--forest-green,
+    .np-theme-personal.np-theme-business--dark,
+    .np-theme-personal.np-theme-business--bright-green,
+    .np-theme-personal.np-theme-business--forest-green,
+    .np-theme-personal.np-theme-platform--forest-green {
+  --CardContainer-theme-shadow: none;
+}
+.wds-card-widget {
+  --CardWidget-inset: var(--size-8);
+  --CardWidget-header-spacing: var(--size-8);
+  --CardWidget-actions-gap: var(--size-8);
+}
+.wds-card-widget__header {
+  align-items: center;
+  -moz-column-gap: var(--size-24);
+       column-gap: var(--size-24);
+  container-type: inline-size;
+  display: flex;
+  flex-wrap: wrap;
+  padding-inline-start: var(--CardWidget-inset);
+  row-gap: var(--size-8);
+}
+.wds-card-widget__header + .wds-card-widget__content {
+  margin-block-start: var(--CardWidget-header-spacing);
+}
+.wds-card-widget__title {
+  align-items: center;
+  color: var(--color-content-secondary);
+  display: grid;
+  flex: 1 1 0;
+  margin: 0;
+  min-block-size: var(--size-32);
+}
+@container (width <= 360px) {
+  .wds-card-widget__title {
+    flex-basis: auto;
+  }
+}
+.wds-card-widget__title-link.np-link {
+  color: inherit;
+  display: inline;
+  font: inherit;
+  justify-self: start;
+  letter-spacing: inherit;
+  text-align: start;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.wds-card-widget__title-link.np-link:hover,
+.wds-card-widget__title-link.np-link:focus-visible {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+.wds-card-widget__title-link.np-link .tw-icon {
+  display: inline-block;
+  vertical-align: text-bottom;
+}
+.wds-card-widget__title-link.np-link .wds-card-widget__title-chevron {
+  white-space: nowrap;
+}
+.wds-card-widget__title-link.np-link .wds-card-widget__title-chevron .tw-icon {
+  margin: 0;
+}
+.wds-card-widget__actions {
+  align-self: start;
+  align-items: center;
+  display: flex;
+  flex: none;
+  gap: var(--CardWidget-actions-gap);
+}
+.wds-card-widget--with-header .wds-card-widget__content {
+  padding-inline: var(--CardWidget-inset);
+}
+.wds-card-widget:has(.wds-card-widget__title-link:hover, .wds-card-widget__title-link:focus-visible).wds-card-container--active {
+  --CardContainer-border-color: color-mix(in srgb, var(--color-border-neutral) 75%, transparent);
+}
+.wds-card-widget:has(.wds-card-widget__title-link:hover, .wds-card-widget__title-link:focus-visible).wds-card-container--inactive {
+  --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+}
+.wds-card-widget:has(.wds-card-widget__title-link:active).wds-card-container--active {
+  --CardContainer-border-color: var(--color-border-neutral);
+}
+.wds-card-widget:has(.wds-card-widget__title-link:active).wds-card-container--inactive {
+  --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+}
 .critical-comms {
   border-radius: var(--radius-medium);
   overflow: hidden;
@@ -26762,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));
@@ -29190,6 +29375,14 @@ button.np-option {
   padding-inline: 0;
   container-type: inline-size;
 }
+.wds-list-item-paddingY-8 {
+  padding-block: var(--size-8);
+  padding-inline: 0;
+}
+.wds-list-item-paddingY-16 {
+  padding-block: var(--size-16);
+  padding-inline: 0;
+}
 .wds-list-item-paddingY-24 {
   padding-block: var(--size-24);
   padding-inline: 0;
@@ -31220,6 +31413,140 @@ button.np-link {
     overflow: visible;
   }
 }
+.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: 0;
+  z-index: 1060;
+}
+@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;
+  cursor: grab;
+  touch-action: pan-x pinch-zoom;
+}
+.wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
+  grid-template-columns: auto minmax(0, 1fr);
+}
+@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) {
+  .wds-Snackbar-container .wds-prompt__dismiss {
+    display: flex;
+  }
+}
+.wds-Snackbar__action {
+  flex-shrink: 0;
+}
+.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;
+}
+.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;
+  }
+}
 .wds-expander-toggle {
   align-self: flex-start;
   flex-shrink: 0;
@@ -31322,77 +31649,6 @@ 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;
-  position: fixed;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 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;
-  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);
-}
-.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);
-}
-.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) {
-  .snackbar__text {
-    inline-size: auto;
-    max-inline-size: 600px;
-  }
-}
-.snackbar__text__action {
-  flex-shrink: 0;
-  margin-inline-start: var(--size-16);
-}
-.snackbar__text-container-enter,
-.snackbar__text-container-exit {
-  transform: translateY(calc(100% + 10px));
-}
-.snackbar__text-container-enter-active {
-  transform: translateY(-16px);
-  transform: translateY(calc(-16px - env(safe-area-inset-bottom)));
-}
-@media (min-width: 600px) {
-  .snackbar__text-container-enter-active {
-    transform: translateY(-24px);
-  }
-}
 .status-circle.negative,
 .status-circle.error {
   background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-negative));

package/src/main.less

@@ -4,6 +4,8 @@
 @import "./PocketSurface/PocketSurface.less";
 
 @import "./Container/Container.less";
+@import "./CardContainer/CardContainer.less";
+@import "./CardWidget/CardWidget.less";
 @import "./_deprecated/CriticalBanner/CriticalCommsBanner.less";
 @import "./Accordion/Accordion.less";
 @import "./_deprecated/ActionButton/ActionButton.less";
@@ -72,11 +74,11 @@
 @import "./Prompt/InfoPrompt/InfoPrompt.less";
 @import "./Prompt/ActionPrompt/ActionPrompt.less";
 @import "./Prompt/CriticalBanner/CriticalBanner.less";
+@import "./Prompt/Snackbar/Snackbar.less";
 @import "./Prompt/common/Expander/Expander.less";
 @import "./RadioGroup/RadioGroup.less";
 @import "./Section/Section.less";
 @import "./SlidingPanel/SlidingPanel.less";
-@import "./Snackbar/Snackbar.less";
 @import "./StatusIcon/StatusIcon.less";
 @import "./Stepper/Stepper.less";
 @import "./Sticky/Sticky.less";

package/build/Snackbar/Snackbar.js

@@ -1,128 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var reactTransitionGroup = require('react-transition-group');
-var Button_resolver = require('../Button/Button.resolver.js');
-var Body = require('../Body/Body.js');
-var WithNextPortal = require('../WithNextPortal/WithNextPortal.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-const CSS_TRANSITION_DURATION = 400;
-const Snackbar = props => {
-  const bodyRef = React.useRef(null);
-  const leaveTimeout = React.useRef(0);
-  const transitionTimeout = React.useRef(0);
-  /** The props of the last committed render, as `this.props` was in the class component. */
-  const committedProps = React.useRef(props);
-  const [state, setState] = React.useState({
-    visible: false,
-    text: ''
-  });
-  React.useEffect(() => () => {
-    window.clearTimeout(leaveTimeout.current);
-    window.clearTimeout(transitionTimeout.current);
-  }, []);
-  // Runs after every render to mirror the componentDidUpdate lifecycle this component previously
-  // relied on, including the shouldComponentUpdate guard that ignored every update without text.
-  // Layout, not passive, so a notification is shown or replaced before the browser paints, as
-  // componentDidUpdate did. Both rules below are disabled on purpose: the dependency-less effect
-  // and its synchronous state updates are what keep this conversion behaviour-identical.
-  /* eslint-disable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */
-  React.useLayoutEffect(() => {
-    const previousProps = committedProps.current;
-    committedProps.current = props;
-    const {
-      action,
-      text,
-      timestamp
-    } = props;
-    // shouldComponentUpdate bailed out whenever the incoming text was empty. That also blocked the
-    // updates scheduled below, so a Snackbar whose text is cleared stays on screen until it is
-    // given text again. Preserved here deliberately to keep this refactor behaviour-identical.
-    const updateWhileTextIsPresent = update => {
-      if (committedProps.current.text) {
-        update();
-      }
-    };
-    const setLeaveTimeout = () => {
-      leaveTimeout.current = window.setTimeout(() => {
-        updateWhileTextIsPresent(() => setState(current => ({
-          ...current,
-          visible: false
-        })));
-      }, committedProps.current.timeout);
-    };
-    const show = () => {
-      setState(current => ({
-        ...current,
-        visible: true,
-        action,
-        text
-      }));
-      setLeaveTimeout();
-    };
-    if (!text) {
-      return;
-    }
-    if (!previousProps.text) {
-      show();
-    } else if (previousProps.timestamp !== timestamp) {
-      window.clearTimeout(leaveTimeout.current);
-      if (state.visible) {
-        setState(current => ({
-          ...current,
-          visible: false
-        }));
-        transitionTimeout.current = window.setTimeout(() => {
-          updateWhileTextIsPresent(show);
-        }, CSS_TRANSITION_DURATION);
-      } else {
-        show();
-      }
-    }
-  });
-  /* eslint-enable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */
-  const {
-    action,
-    text,
-    visible
-  } = state;
-  const {
-    timeout
-  } = props;
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "snackbar",
-    "aria-live": "assertive",
-    role: "alert",
-    children: /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
-      nodeRef: bodyRef,
-      in: visible,
-      classNames: "snackbar__text-container",
-      timeout: {
-        appear: 0,
-        enter: timeout,
-        exit: CSS_TRANSITION_DURATION
-      },
-      unmountOnExit: true,
-      children: /*#__PURE__*/jsxRuntime.jsxs(Body.default, {
-        ref: bodyRef,
-        as: "span",
-        className: "snackbar__text",
-        children: [text, action ? /*#__PURE__*/jsxRuntime.jsx(Button_resolver.default, {
-          className: "snackbar__text__action",
-          v2: true,
-          size: "sm",
-          onClick: action.onClick,
-          children: action.label
-        }) : null]
-      })
-    })
-  });
-};
-var SnackbarPortal = WithNextPortal.default(Snackbar);
-
-exports.Snackbar = Snackbar;
-exports.default = SnackbarPortal;
-//# sourceMappingURL=Snackbar.js.map