@react-spectrum/toast 3.0.0-beta.1 → 3.0.0-beta.11

package/dist/vars.85cde188.css.map

@@ -0,0 +1 @@
+{"mappings":"AAwBA;;;;;;;;;;;;;;;AAkBA;;;;;;;;;AAUA;;;;;;;;;AASA;;;;;;AAOI;;;;AAOJ;;;;;;;;;;AAWE;;;;;;AAoBF;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;EACE","sources":["packages/@adobe/spectrum-css-temp/components/toast/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.85cde188.css.map"}

package/dist/zh-CN.main.js

@@ -0,0 +1,8 @@
+module.exports = {
+    "info": `\u{4FE1}\u{606F}`,
+    "negative": `\u{9519}\u{8BEF}`,
+    "positive": `\u{6210}\u{529F}`
+};
+
+
+//# sourceMappingURL=zh-CN.main.js.map

package/dist/zh-CN.main.js.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,iBAAiB;IAAG,QAAQ,CAAC,gBAAE,CAAC;IAC9B,YAAY,CAAC,gBAAE,CAAC;IAChB,YAAY,CAAC,gBAAE,CAAC;AAClB","sources":["packages/@react-spectrum/toast/intl/zh-CN.json"],"sourcesContent":["{\n  \"info\": \"信息\",\n  \"negative\": \"错误\",\n  \"positive\": \"成功\"\n}\n"],"names":[],"version":3,"file":"zh-CN.main.js.map"}

package/dist/zh-CN.mjs

@@ -0,0 +1,10 @@
+var $b1634d37b87f243f$exports = {};
+$b1634d37b87f243f$exports = {
+    "info": `\u{4FE1}\u{606F}`,
+    "negative": `\u{9519}\u{8BEF}`,
+    "positive": `\u{6210}\u{529F}`
+};
+
+
+export {$b1634d37b87f243f$exports as default};
+//# sourceMappingURL=zh-CN.mjs.map

package/dist/zh-CN.module.js

@@ -0,0 +1,10 @@
+var $b1634d37b87f243f$exports = {};
+$b1634d37b87f243f$exports = {
+    "info": `\u{4FE1}\u{606F}`,
+    "negative": `\u{9519}\u{8BEF}`,
+    "positive": `\u{6210}\u{529F}`
+};
+
+
+export {$b1634d37b87f243f$exports as default};
+//# sourceMappingURL=zh-CN.module.js.map

package/dist/zh-CN.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,QAAQ,CAAC,gBAAE,CAAC;IAC9B,YAAY,CAAC,gBAAE,CAAC;IAChB,YAAY,CAAC,gBAAE,CAAC;AAClB","sources":["packages/@react-spectrum/toast/intl/zh-CN.json"],"sourcesContent":["{\n  \"info\": \"信息\",\n  \"negative\": \"错误\",\n  \"positive\": \"成功\"\n}\n"],"names":[],"version":3,"file":"zh-CN.module.js.map"}

package/dist/zh-TW.main.js

@@ -0,0 +1,8 @@
+module.exports = {
+    "info": `\u{8CC7}\u{8A0A}`,
+    "negative": `\u{932F}\u{8AA4}`,
+    "positive": `\u{6210}\u{529F}`
+};
+
+
+//# sourceMappingURL=zh-TW.main.js.map

package/dist/zh-TW.main.js.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,iBAAiB;IAAG,QAAQ,CAAC,gBAAE,CAAC;IAC9B,YAAY,CAAC,gBAAE,CAAC;IAChB,YAAY,CAAC,gBAAE,CAAC;AAClB","sources":["packages/@react-spectrum/toast/intl/zh-TW.json"],"sourcesContent":["{\n  \"info\": \"資訊\",\n  \"negative\": \"錯誤\",\n  \"positive\": \"成功\"\n}\n"],"names":[],"version":3,"file":"zh-TW.main.js.map"}

package/dist/zh-TW.mjs

@@ -0,0 +1,10 @@
+var $19cbd4230357935e$exports = {};
+$19cbd4230357935e$exports = {
+    "info": `\u{8CC7}\u{8A0A}`,
+    "negative": `\u{932F}\u{8AA4}`,
+    "positive": `\u{6210}\u{529F}`
+};
+
+
+export {$19cbd4230357935e$exports as default};
+//# sourceMappingURL=zh-TW.mjs.map

package/dist/zh-TW.module.js

@@ -0,0 +1,10 @@
+var $19cbd4230357935e$exports = {};
+$19cbd4230357935e$exports = {
+    "info": `\u{8CC7}\u{8A0A}`,
+    "negative": `\u{932F}\u{8AA4}`,
+    "positive": `\u{6210}\u{529F}`
+};
+
+
+export {$19cbd4230357935e$exports as default};
+//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,QAAQ,CAAC,gBAAE,CAAC;IAC9B,YAAY,CAAC,gBAAE,CAAC;IAChB,YAAY,CAAC,gBAAE,CAAC;AAClB","sources":["packages/@react-spectrum/toast/intl/zh-TW.json"],"sourcesContent":["{\n  \"info\": \"資訊\",\n  \"negative\": \"錯誤\",\n  \"positive\": \"成功\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/toast",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.11",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,20 +36,22 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "^3.12.1",
-    "@react-aria/i18n": "^3.7.2",
-    "@react-aria/toast": "3.0.0-beta.1",
-    "@react-spectrum/button": "^3.12.2",
-    "@react-spectrum/utils": "^3.9.2",
-    "@react-stately/toast": "3.0.0-beta.0",
-    "@react-types/shared": "^3.18.1",
-    "@spectrum-icons/ui": "^3.5.2",
-    "@swc/helpers": "^0.4.14",
+    "@react-aria/focus": "^3.17.0",
+    "@react-aria/i18n": "^3.11.0",
+    "@react-aria/overlays": "^3.22.0",
+    "@react-aria/toast": "3.0.0-beta.11",
+    "@react-aria/utils": "^3.24.0",
+    "@react-spectrum/button": "^3.16.3",
+    "@react-spectrum/utils": "^3.11.6",
+    "@react-stately/toast": "3.0.0-beta.3",
+    "@react-types/shared": "^3.23.0",
+    "@spectrum-icons/ui": "^3.6.6",
+    "@swc/helpers": "^0.5.0",
     "use-sync-external-store": "^1.2.0"
   },
   "devDependencies": {
     "@adobe/spectrum-css-temp": "3.0.0-alpha.1",
-    "@react-spectrum/test-utils": "3.0.0-alpha.1",
+    "@react-spectrum/test-utils-internal": "3.0.0-alpha.1",
     "@types/use-sync-external-store": "^0.0.3"
   },
   "peerDependencies": {
@@ -60,5 +62,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5911ed21de4b76d66f6254c02302519e02d50e16"
+  "gitHead": "f645f29edc1322153fd60af4640cbcab1d992dbd"
 }

package/src/Toast.tsx

@@ -14,22 +14,24 @@ import AlertMedium from '@spectrum-icons/ui/AlertMedium';
 import {Button, ClearButton} from '@react-spectrum/button';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
 import CrossMedium from '@spectrum-icons/ui/CrossMedium';
-import {DOMRef} from '@react-types/shared';
+import {DOMProps, DOMRef} from '@react-types/shared';
+import {filterDOMProps} from '@react-aria/utils';
 import InfoMedium from '@spectrum-icons/ui/InfoMedium';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {QueuedToast, ToastState} from '@react-stately/toast';
-import React, {ReactNode} from 'react';
+import React, {useContext} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/toast/vars.css';
 import SuccessMedium from '@spectrum-icons/ui/SuccessMedium';
 import toastContainerStyles from './toastContainer.css';
+import {ToasterContext} from './Toaster';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useToast} from '@react-aria/toast';
 
-export interface SpectrumToastValue {
-  children: ReactNode,
+export interface SpectrumToastValue extends DOMProps {
+  children: string,
   variant: 'positive' | 'negative' | 'info' | 'neutral',
-  actionLabel?: ReactNode,
+  actionLabel?: string,
   onAction?: () => void,
   shouldCloseOnAction?: boolean
 }
@@ -70,9 +72,10 @@ function Toast(props: SpectrumToastProps, ref: DOMRef<HTMLDivElement>) {
   } = useToast(props, state, domRef);
   let {styleProps} = useStyleProps(otherProps);
 
-  let stringFormatter = useLocalizedStringFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/toast');
   let iconLabel = variant && variant !== 'neutral' ? stringFormatter.format(variant) : null;
   let Icon = ICONS[variant];
+  let isFocusVisible = useContext(ToasterContext);
 
   const handleAction = () => {
     if (onAction) {
@@ -88,6 +91,7 @@ function Toast(props: SpectrumToastProps, ref: DOMRef<HTMLDivElement>) {
     <div
       {...styleProps}
       {...toastProps}
+      {...filterDOMProps(props.toast.content)}
       ref={domRef}
       className={classNames(styles,
         'spectrum-Toast',
@@ -95,7 +99,8 @@ function Toast(props: SpectrumToastProps, ref: DOMRef<HTMLDivElement>) {
         styleProps.className,
         classNames(
           toastContainerStyles,
-          'spectrum-Toast'
+          'spectrum-Toast',
+          {'focus-ring': props.toast.key === state.visibleToasts[0]?.key && isFocusVisible}
         )
       )}
       style={{

package/src/ToastContainer.tsx

@@ -11,7 +11,9 @@
  */
 
 import {AriaToastRegionProps} from '@react-aria/toast';
-import React, {ReactElement, ReactNode, useEffect, useRef} from 'react';
+import {DOMProps} from '@react-types/shared';
+import {filterDOMProps} from '@react-aria/utils';
+import React, {ReactElement, useEffect, useRef} from 'react';
 import {SpectrumToastValue, Toast} from './Toast';
 import {Toaster} from './Toaster';
 import {ToastOptions, ToastQueue, useToastQueue} from '@react-stately/toast';
@@ -19,9 +21,9 @@ import {useSyncExternalStore} from 'use-sync-external-store/shim/index.js';
 
 export interface SpectrumToastContainerProps extends AriaToastRegionProps {}
 
-export interface SpectrumToastOptions extends Omit<ToastOptions, 'priority'> {
+export interface SpectrumToastOptions extends Omit<ToastOptions, 'priority'>, DOMProps {
   /** A label for the action button within the toast. */
-  actionLabel?: ReactNode,
+  actionLabel?: string,
   /** Handler that is called when the action button is pressed. */
   onAction?: () => void,
   /** Whether the toast should automatically close when an action is performed. */
@@ -35,7 +37,7 @@ let globalToastQueue: ToastQueue<SpectrumToastValue> | null = null;
 function getGlobalToastQueue() {
   if (!globalToastQueue) {
     globalToastQueue = new ToastQueue({
-      maxVisibleToasts: 1,
+      maxVisibleToasts: Infinity,
       hasExitAnimation: true
     });
   }
@@ -55,6 +57,12 @@ function subscribe(fn: () => void) {
   return () => subscriptions.delete(fn);
 }
 
+function triggerSubscriptions() {
+  for (let fn of subscriptions) {
+    fn();
+  }
+}
+
 function getActiveToastContainer() {
   return toastProviders.values().next().value;
 }
@@ -73,10 +81,12 @@ export function ToastContainer(props: SpectrumToastContainerProps): ReactElement
   // We use a ref to do this, since it will have a stable identity
   // over the lifetime of the component.
   let ref = useRef();
-  toastProviders.add(ref);
 
   // eslint-disable-next-line arrow-body-style
   useEffect(() => {
+    toastProviders.add(ref);
+    triggerSubscriptions();
+
     return () => {
       // When this toast provider unmounts, reset all animations so that
       // when the new toast provider renders, it is seamless.
@@ -88,9 +98,7 @@ export function ToastContainer(props: SpectrumToastContainerProps): ReactElement
       // This will cause all other instances to re-render,
       // and the first one to become the new active toast provider.
       toastProviders.delete(ref);
-      for (let fn of subscriptions) {
-        fn();
-      }
+      triggerSubscriptions();
     };
   }, []);
 
@@ -113,7 +121,7 @@ export function ToastContainer(props: SpectrumToastContainerProps): ReactElement
   return null;
 }
 
-function addToast(children: ReactNode, variant: SpectrumToastValue['variant'], options: SpectrumToastOptions = {}) {
+function addToast(children: string, variant: SpectrumToastValue['variant'], options: SpectrumToastOptions = {}) {
   // Dispatch a custom event so that toasts can be intercepted and re-targeted, e.g. when inside an iframe.
   if (typeof CustomEvent !== 'undefined' && typeof window !== 'undefined') {
     let event = new CustomEvent('react-spectrum-toast', {
@@ -137,7 +145,8 @@ function addToast(children: ReactNode, variant: SpectrumToastValue['variant'], o
     variant,
     actionLabel: options.actionLabel,
     onAction: options.onAction,
-    shouldCloseOnAction: options.shouldCloseOnAction
+    shouldCloseOnAction: options.shouldCloseOnAction,
+    ...filterDOMProps(options)
   };
 
   // Minimum time of 5s from https://spectrum.adobe.com/page/toast/#Auto-dismissible
@@ -145,44 +154,27 @@ function addToast(children: ReactNode, variant: SpectrumToastValue['variant'], o
   // It is debatable whether non-actionable toasts would also fail.
   let timeout = options.timeout && !options.onAction ? Math.max(options.timeout, 5000) : null;
   let queue = getGlobalToastQueue();
-  let key = queue.add(value, {priority: getPriority(variant, options), timeout, onClose: options.onClose});
+  let key = queue.add(value, {timeout, onClose: options.onClose});
   return () => queue.close(key);
 }
 
 const SpectrumToastQueue = {
   /** Queues a neutral toast. */
-  neutral(children: ReactNode, options: SpectrumToastOptions = {}): CloseFunction {
+  neutral(children: string, options: SpectrumToastOptions = {}): CloseFunction {
     return addToast(children, 'neutral', options);
   },
   /** Queues a positive toast. */
-  positive(children: ReactNode, options: SpectrumToastOptions = {}): CloseFunction {
+  positive(children: string, options: SpectrumToastOptions = {}): CloseFunction {
     return addToast(children, 'positive', options);
   },
   /** Queues a negative toast. */
-  negative(children: ReactNode, options: SpectrumToastOptions = {}): CloseFunction {
+  negative(children: string, options: SpectrumToastOptions = {}): CloseFunction {
     return addToast(children, 'negative', options);
   },
   /** Queues an informational toast. */
-  info(children: ReactNode, options: SpectrumToastOptions = {}): CloseFunction {
+  info(children: string, options: SpectrumToastOptions = {}): CloseFunction {
     return addToast(children, 'info', options);
   }
 };
 
 export {SpectrumToastQueue as ToastQueue};
-
-// https://spectrum.adobe.com/page/toast/#Priority-queue
-// TODO: if a lower priority toast comes in, no way to know until you dismiss the higher priority one.
-const VARIANT_PRIORITY = {
-  negative: 10,
-  positive: 3,
-  info: 2,
-  neutral: 1
-};
-
-function getPriority(variant: SpectrumToastValue['variant'], options: SpectrumToastOptions) {
-  let priority = VARIANT_PRIORITY[variant] || 1;
-  if (options.onAction) {
-    priority += 4;
-  }
-  return priority;
-}

package/src/Toaster.tsx

@@ -11,46 +11,51 @@
  */
 
 import {AriaToastRegionProps, useToastRegion} from '@react-aria/toast';
-import {classNames, useIsMobileDevice} from '@react-spectrum/utils';
-import {FocusRing} from '@react-aria/focus';
+import {classNames} from '@react-spectrum/utils';
+import {mergeProps} from '@react-aria/utils';
 import {Provider} from '@react-spectrum/provider';
-import React, {ReactElement, ReactNode, useRef} from 'react';
+import React, {createContext, ReactElement, ReactNode, useRef} from 'react';
 import ReactDOM from 'react-dom';
 import toastContainerStyles from './toastContainer.css';
 import {ToastState} from '@react-stately/toast';
+import {useFocusRing} from '@react-aria/focus';
+import {useUNSTABLE_PortalContext} from '@react-aria/overlays';
 
 interface ToastContainerProps extends AriaToastRegionProps {
   children: ReactNode,
   state: ToastState<unknown>
 }
 
+export const ToasterContext = createContext(false);
+
 export function Toaster(props: ToastContainerProps): ReactElement {
   let {
     children,
     state
   } = props;
-  let containerPlacement = useIsMobileDevice() ? 'center' : 'right';
 
   let ref = useRef();
   let {regionProps} = useToastRegion(props, state, ref);
+  let {focusProps, isFocusVisible} = useFocusRing();
+  let {getContainer} = useUNSTABLE_PortalContext();
 
   let contents = (
     <Provider UNSAFE_style={{background: 'transparent'}}>
-      <FocusRing focusRingClass={classNames(toastContainerStyles, 'focus-ring')}>
+      <ToasterContext.Provider value={isFocusVisible}>
         <div
-          {...regionProps}
+          {...mergeProps(regionProps, focusProps)}
           ref={ref}
           data-position="bottom"
-          data-placement={containerPlacement}
+          data-placement="center"
           className={classNames(
             toastContainerStyles,
             'react-spectrum-ToastContainer'
           )}>
           {children}
         </div>
-      </FocusRing>
+      </ToasterContext.Provider>
     </Provider>
   );
 
-  return ReactDOM.createPortal(contents, document.body);
+  return ReactDOM.createPortal(contents, getContainer?.() ?? document.body);
 }

package/src/toastContainer.css

@@ -20,34 +20,23 @@
   display: flex;
   pointer-events: none;
   outline: none;
-
-  > :first-child {
-    @inherit %spectrum-FocusRing-ring;
-    --spectrum-focus-ring-border-radius: var(--spectrum-toast-border-radius);
-    --spectrum-focus-ring-gap: var(--spectrum-alias-focus-ring-gap);
-    --spectrum-focus-ring-size: var(--spectrum-alias-focus-ring-size);
-  }
-
-  &:focus-ring > :first-child {
-    @inherit %spectrum-FocusRing-active;
-  }
+  margin-block-end: 8px;
 
   .spectrum-Toast {
-    position: absolute;
-    margin: 16px;
+    margin: 8px;
     pointer-events: all;
   }
 
   &[data-position=top] {
     top: 0;
-    flex-direction: column;
+    flex-direction: column-reverse;
     --slide-from: translateY(-100%);
     --slide-to: translateY(0);
   }
 
   &[data-position=bottom] {
     bottom: 0;
-    flex-direction: column-reverse;
+    flex-direction: column;
     --slide-from: translateY(100%);
     --slide-to: translateY(0);
   }
@@ -78,6 +67,11 @@
 }
 
 .spectrum-Toast {
+  composes: spectrum-FocusRing;
+  --spectrum-focus-ring-border-radius: var(--spectrum-toast-border-radius);
+  --spectrum-focus-ring-gap: var(--spectrum-alias-focus-ring-gap);
+  --spectrum-focus-ring-size: var(--spectrum-alias-focus-ring-size);
+
   &[data-animation=entering] {
     animation: slide-in 300ms;
   }

package/dist/main.css

@@ -1 +0,0 @@
-[dir=ltr] .spectrum-Toast_11df86{padding-right:var(--spectrum-toast-padding-right,var(--spectrum-global-dimension-size-100))}[dir=rtl] .spectrum-Toast_11df86{padding-left:var(--spectrum-toast-padding-right,var(--spectrum-global-dimension-size-100))}[dir=ltr] .spectrum-Toast_11df86{padding-left:var(--spectrum-toast-padding-left,var(--spectrum-global-dimension-size-200))}[dir=rtl] .spectrum-Toast_11df86{padding-right:var(--spectrum-toast-padding-left,var(--spectrum-global-dimension-size-200))}.spectrum-Toast_11df86{box-sizing:border-box;max-width:500px;border-radius:var(--spectrum-toast-border-radius,var(--spectrum-global-dimension-static-size-50));padding-top:var(--spectrum-toast-padding-y,var(--spectrum-global-dimension-size-100));padding-bottom:var(--spectrum-toast-padding-y,var(--spectrum-global-dimension-size-100));font-size:var(--spectrum-toast-text-size,var(--spectrum-alias-font-size-default));-webkit-font-smoothing:antialiased;flex-direction:row;align-items:stretch;display:inline-flex}[dir=ltr] .spectrum-Toast-typeIcon_11df86{margin-right:var(--spectrum-toast-icon-padding-right,var(--spectrum-global-dimension-size-150))}[dir=rtl] .spectrum-Toast-typeIcon_11df86{margin-left:var(--spectrum-toast-icon-padding-right,var(--spectrum-global-dimension-size-150))}[dir=ltr] .spectrum-Toast-typeIcon_11df86{margin-left:0}[dir=rtl] .spectrum-Toast-typeIcon_11df86{margin-right:0}.spectrum-Toast-typeIcon_11df86{margin-top:var(--spectrum-global-dimension-size-85);margin-bottom:var(--spectrum-global-dimension-size-85);flex-grow:0;flex-shrink:0}[dir=ltr] .spectrum-Toast-content_11df86{padding-left:0}[dir=rtl] .spectrum-Toast-content_11df86{padding-right:0}[dir=ltr] .spectrum-Toast-content_11df86{text-align:left}[dir=rtl] .spectrum-Toast-content_11df86{text-align:right}.spectrum-Toast-content_11df86{box-sizing:border-box;padding-top:var(--spectrum-global-dimension-size-65);padding-bottom:var(--spectrum-global-dimension-size-65);flex:auto}.spectrum-Toast-buttons_11df86{flex:none;align-items:flex-start;display:flex}[dir=ltr] .spectrum-Toast-buttons_11df86 .spectrum-Button_11df86+.spectrum-Button_11df86,[dir=ltr] .spectrum-Toast-buttons_11df86 .spectrum-Button_11df86+.spectrum-ClearButton_11df86,[dir=ltr] .spectrum-Toast-buttons_11df86 .spectrum-ClearButton_11df86+.spectrum-Button_11df86,[dir=ltr] .spectrum-Toast-buttons_11df86 .spectrum-ClearButton_11df86+.spectrum-ClearButton_11df86{margin-left:var(--spectrum-toast-button-gap,var(--spectrum-global-dimension-size-100))}[dir=rtl] .spectrum-Toast-buttons_11df86 .spectrum-Button_11df86+.spectrum-Button_11df86,[dir=rtl] .spectrum-Toast-buttons_11df86 .spectrum-Button_11df86+.spectrum-ClearButton_11df86,[dir=rtl] .spectrum-Toast-buttons_11df86 .spectrum-ClearButton_11df86+.spectrum-Button_11df86,[dir=rtl] .spectrum-Toast-buttons_11df86 .spectrum-ClearButton_11df86+.spectrum-ClearButton_11df86{margin-right:var(--spectrum-toast-button-gap,var(--spectrum-global-dimension-size-100))}[dir=ltr] .spectrum-Toast-body_11df86{padding-right:var(--spectrum-toast-content-padding-right,var(--spectrum-global-dimension-size-200))}[dir=rtl] .spectrum-Toast-body_11df86{padding-left:var(--spectrum-toast-content-padding-right,var(--spectrum-global-dimension-size-200))}.spectrum-Toast-body_11df86{justify-content:flex-end;align-self:center;column-gap:var(--spectrum-toast-content-padding-right,var(--spectrum-global-dimension-size-200));flex-wrap:wrap;flex:auto;display:flex}[dir=ltr] .spectrum-Toast-body_11df86+.spectrum-Toast-buttons_11df86{padding-left:var(--spectrum-toast-padding-right,var(--spectrum-global-dimension-size-100))}[dir=rtl] .spectrum-Toast-body_11df86+.spectrum-Toast-buttons_11df86{padding-right:var(--spectrum-toast-padding-right,var(--spectrum-global-dimension-size-100))}[dir=ltr] .spectrum-Toast-body_11df86+.spectrum-Toast-buttons_11df86{border-left-width:1px}[dir=rtl] .spectrum-Toast-body_11df86+.spectrum-Toast-buttons_11df86{border-right-width:1px}[dir=ltr] .spectrum-Toast-body_11df86+.spectrum-Toast-buttons_11df86{border-left-style:solid}[dir=rtl] .spectrum-Toast-body_11df86+.spectrum-Toast-buttons_11df86{border-right-style:solid}.spectrum-Toast_11df86{background-color:var(--spectrum-alias-neutral-background-color);color:#fff}.spectrum-Toast-content_11df86{color:var(--spectrum-toast-text-color,var(--spectrum-global-color-static-white))}.spectrum-Toast-typeIcon_11df86{color:#fff}[dir=ltr] .spectrum-Toast-buttons_11df86{border-left-color:#fff3}[dir=rtl] .spectrum-Toast-buttons_11df86{border-right-color:#fff3}.spectrum-Toast--negative_11df86{background-color:var(--spectrum-negative-background-color-default)}.spectrum-Toast--info_11df86{background-color:var(--spectrum-informative-background-color-default)}.spectrum-Toast--positive_11df86{background-color:var(--spectrum-positive-background-color-default)}@media (forced-colors:active){.spectrum-Toast_11df86{border:1px solid #0000}}.react-spectrum-ToastContainer_21a698>:first-child{--spectrum-focus-ring-border-radius:var(--spectrum-textfield-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-focus-ring-gap:var(--spectrum-alias-input-focusring-gap);--spectrum-focus-ring-size:var(--spectrum-alias-input-focusring-size);--spectrum-focus-ring-border-size:0px;--spectrum-focus-ring-color:var(--spectrum-high-contrast-focus-ring-color,var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)))}.react-spectrum-ToastContainer_21a698>:first-child:after{border-radius:calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));content:"";margin:calc(-1*var(--spectrum-focus-ring-border-size));pointer-events:none;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s)ease-out,margin var(--spectrum-global-animation-duration-100,.13s)ease-out;display:block;position:absolute;top:0;bottom:0;left:0;right:0}.react-spectrum-ToastContainer_21a698.focus-ring_21a698>:first-child:after{margin:calc(var(--spectrum-focus-ring-gap)*-1 - var(--spectrum-focus-ring-border-size));box-shadow:0 0 0 var(--spectrum-focus-ring-size)var(--spectrum-focus-ring-color)}[dir=ltr] .react-spectrum-ToastContainer_21a698{left:0}[dir=rtl] .react-spectrum-ToastContainer_21a698,[dir=ltr] .react-spectrum-ToastContainer_21a698{right:0}[dir=rtl] .react-spectrum-ToastContainer_21a698{left:0}.react-spectrum-ToastContainer_21a698{z-index:100050;pointer-events:none;outline:none;display:flex;position:fixed}.react-spectrum-ToastContainer_21a698>:first-child{--spectrum-focus-ring-border-radius:var(--spectrum-toast-border-radius,var(--spectrum-global-dimension-static-size-50));--spectrum-focus-ring-gap:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));--spectrum-focus-ring-size:var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25))}.react-spectrum-ToastContainer_21a698 .spectrum-Toast_21a698{pointer-events:all;margin:16px;position:absolute}.react-spectrum-ToastContainer_21a698[data-position=top]{--slide-from:translateY(-100%);--slide-to:translateY(0);flex-direction:column;top:0}.react-spectrum-ToastContainer_21a698[data-position=bottom]{--slide-from:translateY(100%);--slide-to:translateY(0);flex-direction:column-reverse;bottom:0}.react-spectrum-ToastContainer_21a698[data-placement=left]{--slide-from:translateX(-100%);--slide-to:translateX(0);align-items:flex-start}[dir=rtl] .react-spectrum-ToastContainer_21a698[data-placement=left]{--slide-from:translateX(100%)}.react-spectrum-ToastContainer_21a698[data-placement=center]{align-items:center}.react-spectrum-ToastContainer_21a698[data-placement=right]{--slide-from:translateX(100%);--slide-to:translateX(0);align-items:flex-end}[dir=rtl] .react-spectrum-ToastContainer_21a698[data-placement=right]{--slide-from:translateX(-100%)}.spectrum-Toast_21a698[data-animation=entering]{animation:.3s slide-in_21a698}.spectrum-Toast_21a698[data-animation=exiting]{animation:.3s forwards fade-out_21a698}@keyframes slide-in_21a698{0%{transform:var(--slide-from)}to{transform:var(--slide-to)}}@keyframes fade-out_21a698{0%{opacity:1}to{opacity:0}}