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

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;
   }
 }

package/build/styles/main.css

@@ -26203,198 +26203,6 @@ 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--interactive: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--interactive: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--interactive:has(.wds-card-widget__title-link:active).wds-card-container--active {
-  --CardContainer-border-color: var(--color-border-neutral);
-}
-.wds-card-widget--interactive: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;
@@ -31514,75 +31322,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;
 }
-.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;
   }
 }
 .status-circle.negative,

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

@@ -1,16 +1,62 @@
 import type { ThemeDark, ThemeLight } from '../common';
+import type { Sentiment } from '../SentimentSurface';
+import type { SnackbarAction, SnackbarDuration } from './Snackbar.types';
+/**
+ * Props for the controlled Snackbar surface, including provider-managed lifecycle controls.
+ * Use SnackbarCreationProps when creating notifications through SnackbarProvider/useSnackbar.
+ */
 export interface SnackbarProps {
-    action?: {
-        label: string;
-        onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    };
+    /** One optional callback or navigation action. Activating it dismisses after its callback runs. */
+    action?: SnackbarAction;
+    /** Changes for each new Snackbar so LiveRegion re-announces it. */
+    announcementKey: number;
+    /**
+     * Controls auto-dismiss with a four-second, six-second or indefinite duration after entry finishes.
+     * Takes precedence over the deprecated `timeout`.
+     * When neither option is supplied, the default is 4000ms (previously 4500ms).
+     * @default 'default'
+     */
+    duration?: SnackbarDuration;
+    /**
+     * Replaces the media with a progress indicator, uses neutral styling and prevents auto-dismiss.
+     * Takes precedence over `media`, `sentiment`, `duration` and the deprecated `timeout`.
+     * @default false
+     */
+    loading?: boolean;
+    /** Overrides sentiment-derived media with content for the 24×24px media slot. */
+    media?: React.ReactNode;
+    /**
+     * Called once after this Snackbar finishes exiting, including after an action (e.g. Undo)
+     * or replacement by a newer Snackbar. The action callback runs first.
+     * Not called for Snackbars discarded before being shown, such as earlier creates batched
+     * before the first render.
+     */
+    onDismiss?: () => void;
+    /** Requests an exit; the provider retains the surface until onExited confirms it has finished. */
+    onDismissRequest: () => void;
+    /** Called after the exit animation so the provider can unmount active or show its replacement. */
+    onExited: () => void;
+    /**
+     * Controls the sentiment surface and default media.
+     * @default 'neutral'
+     */
+    sentiment?: Sentiment;
+    /** Message content. Empty strings or absent text dismiss without creating a blank replacement. */
     text: React.ReactNode;
     /** @deprecated Has no effect. Snackbar theming is based on ThemeProvider. */
     theme?: ThemeLight | ThemeDark;
-    timeout: number;
-    timestamp: number;
+    /**
+     * @deprecated Use `duration` instead. Explicit millisecond values remain supported and are not
+     * automatically remapped when no `duration` is supplied.
+     * To migrate, use `default` for 0–5000ms, `extended` for values above 5000ms, and `indefinite`
+     * for intentionally persistent notifications.
+     */
+    timeout?: number;
+    /** @deprecated Has no effect when using SnackbarProvider, which manages Snackbar identity. */
+    timestamp?: number;
+    /** Controls entry/exit; the surface does not manage visibility itself. */
+    visible: boolean;
 }
-export declare const Snackbar: (props: SnackbarProps) => import("react").JSX.Element;
-declare const _default: (props: SnackbarProps) => import("react").ReactPortal | null;
-export default _default;
+export declare const Snackbar: ({ action, announcementKey, duration, loading, media, onDismissRequest, onExited, sentiment, text, timeout, visible, }: SnackbarProps) => import("react").JSX.Element;
+export default Snackbar;
 //# sourceMappingURL=Snackbar.d.ts.map

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":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAGvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAKrD,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIzE;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,mGAAmG;IACnG,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,mEAAmE;IACnE,eAAe,EAAE,MAAM,CAAC;IACxB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iFAAiF;IACjF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,kGAAkG;IAClG,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,kGAAkG;IAClG,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,kGAAkG;IAClG,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8FAA8F;IAC9F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,QAAQ,GAAI,uHAYtB,aAAa,gCAwJf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,9 @@
+declare const _default: {
+    escapeDismissHint: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=Snackbar.messages.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Snackbar.messages.d.ts","sourceRoot":"","sources":["../../../src/Snackbar/Snackbar.messages.ts"],"names":[],"mappings":";;;;;;;AAEA,wBAMG"}