@react-spectrum/s2 1.0.0 → 1.1.0

package/dist/Toast.css

@@ -1,464 +1,464 @@
 @layer _.a {
-  .Wu1 {
+  .Wu11 {
     top: 16px;
   }
 
-  ._lu1 {
+  ._lu11 {
     bottom: 16px;
   }
 
-  .IC1 {
+  .IC11 {
     margin-inline-start: 1rem;
   }
 
-  .HM1 {
+  .HM11 {
     margin-inline-end: auto;
   }
 
-  .HC1 {
+  .HC11 {
     margin-inline-end: 1rem;
   }
 
-  .Ka1 {
+  .Ka11 {
     max-height: 100%;
   }
 
-  ._Pc1 {
+  ._Pc11 {
     position: relative;
   }
 
-  ._ta1 {
+  ._ta11 {
     flex-direction: column;
   }
 
-  ._tb1 {
+  ._tb11 {
     flex-direction: column-reverse;
   }
 
-  .Jy1 {
+  .Jy11 {
     margin-top: 0;
   }
 
-  .Gy1 {
+  .Gy11 {
     margin-bottom: 0;
   }
 
-  .Tf1 {
+  .Tf11 {
     padding-top: 16px;
   }
 
-  .Tt1 {
+  .Tt11 {
     padding-top: 8px;
   }
 
-  .Qt1 {
+  .Qt11 {
     padding-bottom: 8px;
   }
 
-  .Qf1 {
+  .Qf11 {
     padding-bottom: 16px;
   }
 
-  .Sd1 {
+  .Sd11 {
     padding-inline-start: 0;
   }
 
-  .St1 {
+  .St11 {
     padding-inline-start: 8px;
   }
 
-  .Rd1 {
+  .Rd11 {
     padding-inline-end: 0;
   }
 
-  .Iy1 {
+  .Iy11 {
     margin-inline-start: 0;
   }
 
-  .Ic1 {
+  .Ic11 {
     margin-inline-start: -.5rem;
   }
 
-  .Hy1 {
+  .Hy11 {
     margin-inline-end: 0;
   }
 
-  .Hc1 {
+  .Hc11 {
     margin-inline-end: -.5rem;
   }
 
-  ._Na1 {
+  ._Na11 {
     overflow-x: auto;
   }
 
-  .Pa1 {
+  .Pa11 {
     overflow-y: auto;
   }
 
-  ._Le1 {
+  ._Le11 {
     outline-style: none;
   }
 
-  ._Lf1 {
+  ._Lf11 {
     outline-style: solid;
   }
 
-  .Oh1 {
+  .Oh11 {
     outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
-  .Ok1 {
+  .Ok11 {
     outline-color: #fff;
   }
 
-  ._Mc1 {
+  ._Mc11 {
     outline-width: 2px;
   }
 
-  ._Kd1 {
+  ._Kd11 {
     outline-offset: 2px;
   }
 
-  .Ul1 {
+  .Ul11 {
     row-gap: 1rem;
   }
 
-  .ql1 {
+  .ql11 {
     column-gap: 1rem;
   }
 
-  .Sf1 {
+  .Sf11 {
     padding-inline-start: 16px;
   }
 
-  .Rt1 {
+  .Rt11 {
     padding-inline-end: 8px;
   }
 
-  .Te1 {
+  .Te11 {
     padding-top: 12px;
   }
 
-  .Qe1 {
+  .Qe11 {
     padding-bottom: 12px;
   }
 
-  .oc1 {
+  .oc11 {
     border-start-start-radius: .625rem;
   }
 
-  .nc1 {
+  .nc11 {
     border-start-end-radius: .625rem;
   }
 
-  .kc1 {
+  .kc11 {
     border-end-start-radius: .625rem;
   }
 
-  .jc1 {
+  .jc11 {
     border-end-end-radius: .625rem;
   }
 
-  .Mj1 {
+  .Mj11 {
     min-height: calc(3.5rem * var(--s2-scale));
   }
 
-  .-Zn3gsb-L0uB6Qb1 {
+  .-Zn3gsb-L0uB6Qb11 {
     --maxWidth: calc(21rem * var(--s2-scale));
   }
 
-  .LksArhc1 {
+  .LksArhc11 {
     max-width: min(var(--maxWidth), 90vw);
   }
 
-  ._oa1 {
+  ._oa11 {
     box-sizing: border-box;
   }
 
-  ._va1 {
+  ._va11 {
     flex-shrink: 0;
   }
 
-  .uk1 {
+  .uk11 {
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .-_6BNtrc-c1 {
+  .-_6BNtrc-c11 {
     --fs: pow(1.125, 0);
   }
 
-  .vx1 {
+  .vx11 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .xb1 {
+  .xb11 {
     font-weight: 400;
   }
 
-  ._xa1 {
+  ._xa11 {
     font-synthesis-weight: none;
   }
 
-  ._Fd1 {
+  ._Fd11 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs))  - 10)) / 22) * .15), 2px);
   }
 
-  .px1 {
+  .px11 {
     color: #fff;
   }
 
-  .g61 {
+  .g611 {
     background-color: var(--lightningcss-light, #505050) var(--lightningcss-dark, #6d6d6d);
   }
 
-  .g21 {
+  .g211 {
     background-color: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #4069fd);
   }
 
-  .g11 {
+  .g111 {
     background-color: var(--lightningcss-light, #05834e) var(--lightningcss-dark, #068850);
   }
 
-  .gB1 {
+  .gB11 {
     background-color: var(--lightningcss-light, #d73220) var(--lightningcss-dark, #df3422);
   }
 
-  .-_8sjo0b-t5ZbAob1 {
+  .-_8sjo0b-t5ZbAob11 {
     --iconPrimary: currentColor;
   }
 
-  ._nLeasBb1 {
+  ._nLeasBb11 {
     box-shadow: 0 4px 12px var(--lightningcss-light, #00000014) var(--lightningcss-dark, #0000003d), 0 2px 6px var(--lightningcss-light, #0000000a) var(--lightningcss-dark, #0000001f), 0 0 2px var(--lightningcss-light, #0000001f) var(--lightningcss-dark, #0000005c);
   }
 
-  ._nd1 {
+  ._nd11 {
     box-shadow: none;
   }
 
-  ._8d1 {
+  ._8d11 {
     will-change: transform;
   }
 
-  .se1 {
+  .se11 {
     display: grid;
   }
 
-  .D4w1sLc1 {
+  .D4w1sLc11 {
     grid-template-columns: auto 1fr auto;
   }
 
-  .CWLL0Xb1 {
+  .CWLL0Xb11 {
     grid-template-areas: "content content content"
                          "expand . action";
   }
 
-  ._ub1 {
+  ._ub11 {
     flex-grow: 1;
   }
 
-  ._wb1 {
+  ._wb11 {
     flex-wrap: wrap;
   }
 
-  .eb1 {
+  .eb11 {
     align-items: center;
   }
 
-  .qj1 {
+  .qj11 {
     column-gap: 1.5rem;
   }
 
-  .ea1 {
+  .ea11 {
     align-items: baseline;
   }
 
-  .zk52g2d1 {
+  .zk52g2d11 {
     grid-column-start: content;
   }
 
-  .yk52g2d1 {
+  .yk52g2d11 {
     grid-column-end: content;
   }
 
-  .Bk52g2d1 {
+  .Bk52g2d11 {
     grid-row-start: content;
   }
 
-  .Ak52g2d1 {
+  .Ak52g2d11 {
     grid-row-end: content;
   }
 
-  .ri1 {
+  .ri11 {
     cursor: default;
   }
 
-  .ZJ1 {
+  .ZJ11 {
     width: fit-content;
   }
 
-  .-nTSCV-LTAEPe1 {
+  .-nTSCV-LTAEPe11 {
     overflow-wrap: break-word;
   }
 
-  .__ZLTAEPe1 {
+  .__ZLTAEPe11 {
     word-break: break-word;
   }
 
-  .Na1 {
+  .Na11 {
     min-width: 0;
   }
 
-  ._pb1 {
+  ._pb11 {
     --lightningcss-light: initial;
     --lightningcss-dark: ;
     color-scheme: light;
   }
 
-  .sk1 {
+  .sk11 {
     display: none;
   }
 
-  .sd1 {
+  .sd11 {
     display: flex;
   }
 
-  ._Cb1 {
+  ._Cb11 {
     justify-content: end;
   }
 
-  .Ue1 {
+  .Ue11 {
     row-gap: .5rem;
   }
 
-  .qe1 {
+  .qe11 {
     column-gap: .5rem;
   }
 
-  ._Ia1 {
+  ._Ia11 {
     opacity: 0;
   }
 
-  ._Ib1 {
+  ._Ib11 {
     opacity: 1;
   }
 
-  ._Pb1 {
+  ._Pb11 {
     position: fixed;
   }
 
-  .Wr1 {
+  .Wr11 {
     top: 0;
   }
 
-  ._lr1 {
+  ._lr11 {
     bottom: 0;
   }
 
-  ._Ar1 {
+  ._Ar11 {
     inset-inline-start: 0;
   }
 
-  ._zr1 {
+  ._zr11 {
     inset-inline-end: 0;
   }
 
-  .g81 {
+  .g811 {
     background-color: #00000070;
   }
 
-  .zPgKvMe1 {
+  .zPgKvMe11 {
     grid-column-start: expand;
   }
 
-  .yPgKvMe1 {
+  .yPgKvMe11 {
     grid-column-end: expand;
   }
 
-  .BPgKvMe1 {
+  .BPgKvMe11 {
     grid-row-start: expand;
   }
 
-  .APgKvMe1 {
+  .APgKvMe11 {
     grid-row-end: expand;
   }
 
-  .IM1 {
+  .IM11 {
     margin-inline-start: auto;
   }
 
-  .zzz3eAe1 {
+  .zzz3eAe11 {
     grid-column-start: action;
   }
 
-  .yzz3eAe1 {
+  .yzz3eAe11 {
     grid-column-end: action;
   }
 
-  .Bzz3eAe1 {
+  .Bzz3eAe11 {
     grid-row-start: action;
   }
 
-  .Azz3eAe1 {
+  .Azz3eAe11 {
     grid-row-end: action;
   }
 }
 
 @layer _.b {
-  .ucJ9TBTb1:lang(ar) {
+  .ucJ9TBTb11:lang(ar) {
     font-family: adobe-clean-arabic, myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._FnuYUweb1:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb11:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 }
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .Olc1 {
+    .Olc11 {
       outline-color: highlight;
     }
   }
 }
 
 @layer _.c {
-  .ud3Euai1:lang(he) {
+  .ud3Euai11:lang(he) {
     font-family: adobe-clean-hebrew, myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .uea1:lang(ja) {
+  .uea11:lang(ja) {
     font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
   }
 }
 
 @layer _.e {
-  .ugb1:lang(ko) {
+  .ugb11:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd1:lang(zh) {
+  .uhd11:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje1:lang(zh-hant) {
+  .uje11:lang(zh-hant) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.h {
-  .u2NhKxcl1:lang(zh-HK) {
+  .u2NhKxcl11:lang(zh-HK) {
     font-family: adobe-clean-han-hong-kong, source-han-hong-kong, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.i {
-  .uic1:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .uic11:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
   }
 }

package/dist/Toast.css.map

@@ -1 +1 @@
-{"mappings":"AC+IoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+CF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6CC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyCD;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmBG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAYJ;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0GuC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2IpC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0BA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnbA;EA4FD;;;;EAAA;;;;;AA5FC;EAAA;IAAA;;;;;;AA4FD;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["6dc577186b5a1727","packages/@react-spectrum/s2/src/Toast.tsx"],"sourcesContent":["@import \"a0170cf5756cc69c\";\n@import \"a2ac041fc39dd90c\";\n@import \"edbbbe6b05e0b3b2\";\n@import \"9dfb5fe5fb904d99\";\n@import \"6adef38be65b19a3\";\n@import \"591ce9936d0f37f8\";\n@import \"1be8abfe00176762\";\n@import \"e2df49088a479e17\";\n@import \"e897bf6437583377\";\n","/*\n * Copyright 2025 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\nimport {ActionButton} from './ActionButton';\nimport AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Button} from './Button';\nimport {CenterBaseline} from './CenterBaseline';\nimport CheckmarkIcon from '../s2wf-icons/S2_Icon_CheckmarkCircle_20_N.svg';\nimport Chevron from '../s2wf-icons/S2_Icon_ChevronDown_20_N.svg';\nimport {CloseButton} from './CloseButton';\nimport {createContext, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';\nimport {DOMProps} from '@react-types/shared';\nimport {filterDOMProps, isWebKit, useEvent} from '@react-aria/utils';\nimport {flushSync} from 'react-dom';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {FocusScope, useModalOverlay} from 'react-aria';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ToastOptions as RACToastOptions, UNSTABLE_Toast as Toast, UNSTABLE_ToastContent as ToastContent, UNSTABLE_ToastList as ToastList, ToastProps, UNSTABLE_ToastQueue as ToastQueue, UNSTABLE_ToastRegion as ToastRegion, ToastRegionProps, UNSTABLE_ToastStateContext as ToastStateContext} from 'react-aria-components';\nimport {Text} from './Content';\nimport toastCss from './Toast.module.css';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMediaQuery} from '@react-spectrum/utils';\nimport {useOverlayTriggerState} from 'react-stately';\n\nexport type ToastPlacement = 'top' | 'top end' | 'bottom' | 'bottom end';\nexport interface ToastContainerProps extends Omit<ToastRegionProps<SpectrumToastValue>, 'queue' | 'children' | 'style' | 'className'> {\n  /**\n   * Placement of the toast container on the page.\n   * @default \"bottom\"\n   */\n  placement?: ToastPlacement\n}\n\nexport interface ToastOptions extends Omit<RACToastOptions, 'priority'>, DOMProps {\n  /** A label for the action button within the toast. */\n  actionLabel?: string,\n  /** Handler that is called when the action button is pressed. */\n  onAction?: () => void,\n  /** Whether the toast should automatically close when an action is performed. */\n  shouldCloseOnAction?: boolean\n}\n\nexport interface SpectrumToastValue extends DOMProps {\n  /** The content of the toast. */\n  children: string,\n  /** The variant (i.e. color) of the toast. */\n  variant: 'positive' | 'negative' | 'info' | 'neutral',\n  /** A label for the action button within the toast. */\n  actionLabel?: string,\n  /** Handler that is called when the action button is pressed. */\n  onAction?: () => void,\n  /** Whether the toast should automatically close when an action is performed. */\n  shouldCloseOnAction?: boolean\n}\n\nlet globalReduceMotion = false;\nfunction startViewTransition(fn: () => void, type: string) {\n  if ('startViewTransition' in document) {\n    // Safari doesn't support :active-view-transition-type() yet, so we fall back to a class on the html element.\n    document.documentElement.classList.add(toastCss[type]);\n    if (globalReduceMotion) {\n      document.documentElement.classList.add(toastCss.reduceMotion);\n    }\n\n    let viewTransition = document.startViewTransition(() => flushSync(fn));\n\n    viewTransition.ready.catch(() => {});\n    viewTransition.finished.then(() => {\n      document.documentElement.classList.remove(toastCss[type], toastCss.reduceMotion);\n    });\n  } else {\n    fn();\n  }\n}\n\n// There is a single global toast queue instance for the whole app, initialized lazily.\nlet globalToastQueue: ToastQueue<SpectrumToastValue> | null = null;\nfunction getGlobalToastQueue() {\n  if (!globalToastQueue) {\n    globalToastQueue = new ToastQueue({\n      maxVisibleToasts: Infinity,\n      wrapUpdate(fn, action) {\n        startViewTransition(fn, `toast-${action}`);\n      }\n    });\n  }\n\n  return globalToastQueue;\n}\n\nfunction addToast(children: string, variant: SpectrumToastValue['variant'], options: ToastOptions = {}) {\n  let value = {\n    children,\n    variant,\n    actionLabel: options.actionLabel,\n    onAction: options.onAction,\n    shouldCloseOnAction: options.shouldCloseOnAction,\n    ...filterDOMProps(options)\n  };\n\n  // Minimum time of 5s from https://spectrum.adobe.com/page/toast/#Auto-dismissible\n  // Actionable toasts cannot be auto dismissed. That would fail WCAG SC 2.2.1.\n  // It is debatable whether non-actionable toasts would also fail.\n  let timeout = options.timeout && !options.actionLabel ? Math.max(options.timeout, 5000) : undefined;\n  let queue = getGlobalToastQueue();\n  let key = queue.add(value, {timeout, onClose: options.onClose});\n  return () => queue.close(key);\n}\n\ntype CloseFunction = () => void;\n\nconst SpectrumToastQueue = {\n  /** Queues a neutral toast. */\n  neutral(children: string, options: ToastOptions = {}): CloseFunction {\n    return addToast(children, 'neutral', options);\n  },\n  /** Queues a positive toast. */\n  positive(children: string, options: ToastOptions = {}): CloseFunction {\n    return addToast(children, 'positive', options);\n  },\n  /** Queues a negative toast. */\n  negative(children: string, options: ToastOptions = {}): CloseFunction {\n    return addToast(children, 'negative', options);\n  },\n  /** Queues an informational toast. */\n  info(children: string, options: ToastOptions = {}): CloseFunction {\n    return addToast(children, 'info', options);\n  }\n};\n\nexport {SpectrumToastQueue as ToastQueue};\n\nconst toastRegion = style({\n  ...focusRing(),\n  display: 'flex',\n  flexDirection: {\n    placement: {\n      top: 'column',\n      bottom: 'column-reverse'\n    }\n  },\n  position: 'fixed',\n  insetX: 0,\n  width: 'fit',\n  top: {\n    placement: {\n      top: {\n        default: 16,\n        isExpanded: 0\n      }\n    }\n  },\n  bottom: {\n    placement: {\n      bottom: {\n        default: 16,\n        isExpanded: 0\n      }\n    }\n  },\n  marginStart: {\n    align: {\n      start: 16,\n      center: 'auto',\n      end: 'auto'\n    }\n  },\n  marginEnd: {\n    align: {\n      start: 'auto',\n      center: 'auto',\n      end: 16\n    }\n  },\n  boxSizing: 'border-box',\n  maxHeight: 'full',\n  borderRadius: 'lg'\n});\n\nconst toastList = style({\n  position: 'relative',\n  flexGrow: 1,\n  display: 'flex',\n  gap: 8,\n  flexDirection: {\n    placement: {\n      top: 'column',\n      bottom: 'column-reverse'\n    }\n  },\n  boxSizing: 'border-box',\n  marginY: 0,\n  padding: {\n    default: 0,\n    // Add padding when expanded to account for focus ring.\n    isExpanded: 8\n  },\n  paddingBottom: {\n    isExpanded: {\n      placement: {\n        top: 8,\n        bottom: 16\n      }\n    }\n  },\n  paddingTop: {\n    isExpanded: {\n      placement: {\n        top: 16,\n        bottom: 8\n      }\n    }\n  },\n  margin: 0,\n  marginX: {\n    default: 0,\n    // Undo padding for focus ring.\n    isExpanded: -8\n  },\n  overflow: {\n    isExpanded: 'auto'\n  }\n});\n\nconst toastStyle = style({\n  ...focusRing(),\n  outlineColor: {\n    default: 'focus-ring',\n    isExpanded: 'white'\n  },\n  display: 'flex',\n  gap: 16,\n  paddingStart: 16,\n  paddingEnd: 8,\n  paddingY: 12,\n  borderRadius: 'lg',\n  minHeight: 56,\n  '--maxWidth': {\n    type: 'maxWidth',\n    value: 336\n  },\n  maxWidth: 'min(var(--maxWidth), 90vw)',\n  boxSizing: 'border-box',\n  flexShrink: 0,\n  font: 'ui',\n  color: 'white',\n  backgroundColor: {\n    variant: {\n      neutral: 'neutral-subdued',\n      info: 'informative',\n      positive: 'positive',\n      negative: 'negative'\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  boxShadow: {\n    default: 'elevated',\n    isExpanded: 'none'\n  },\n  willChange: 'transform'\n});\n\nconst toastBody = style({\n  // The top toast in a non-expanded stack has the expand button, so it is rendered as a grid.\n  // Otherwise it uses flex so the content can wrap when needed.\n  display: {\n    default: 'grid',\n    isSingle: 'flex'\n  },\n  gridTemplateColumns: ['auto', '1fr', 'auto'],\n  gridTemplateAreas: [\n    'content content content',\n    'expand  .       action'\n  ],\n  flexGrow: 1,\n  flexWrap: 'wrap',\n  alignItems: 'center',\n  columnGap: 24,\n  rowGap: 8\n});\n\nconst toastContent = style({\n  display: 'flex',\n  gap: 8,\n  alignItems: 'baseline',\n  gridArea: 'content',\n  cursor: 'default',\n  width: 'fit',\n  overflowWrap: 'break-word',\n  wordBreak: 'break-word',\n  minWidth: 0\n});\n\nconst controls = style({\n  colorScheme: 'light',\n  display: {\n    default: 'none',\n    isExpanded: 'flex'\n  },\n  justifyContent: 'end',\n  gap: 8,\n  opacity: {\n    default: 0,\n    isExpanded: 1\n  }\n});\n\nconst ICONS = {\n  info: InfoIcon,\n  negative: AlertIcon,\n  positive: CheckmarkIcon\n};\n\ninterface ToastContainerContextValue {\n  isExpanded: boolean,\n  toggleExpanded: () => void\n}\n\nconst ToastContainerContext = createContext<ToastContainerContextValue | null>(null);\n\n/**\n * A ToastContainer renders the queued toasts in an application. It should be placed\n * at the root of the app.\n */\nexport function ToastContainer(props: ToastContainerProps): ReactNode {\n  let {\n    placement = 'bottom'\n  } = props;\n  let queue = getGlobalToastQueue();\n  let align = 'center';\n  [placement, align = 'center'] = placement.split(' ') as any;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let regionRef = useRef<HTMLDivElement | null>(null);\n\n  let state = useOverlayTriggerState({});\n  let {isOpen: isExpanded, close, toggle} = state;\n  let ctx = useMemo(() => ({\n    isExpanded,\n    toggleExpanded() {\n      if (!isExpanded && queue.visibleToasts.length <= 1) {\n        return;\n      }\n\n      startViewTransition(\n        () => toggle(),\n        isExpanded ? 'toast-collapse' : 'toast-expand'\n      );\n    }\n  }), [isExpanded, toggle, queue]);\n\n  // Set the state to collapsed whenever the queue is emptied.\n  useEffect(() => {\n    return queue.subscribe(() => {\n      if (queue.visibleToasts.length === 0 && isExpanded) {\n        close();\n      }\n    });\n  }, [queue, isExpanded, close]);\n\n  let collapse = () => {\n    regionRef.current?.focus();\n    ctx.toggleExpanded();\n  };\n\n  // Prevent scroll, aria hide outside, and contain focus when expanded, since we take over the whole screen.\n  // Attach event handler to the ref since ToastRegion doesn't pass through onKeyDown.\n  useModalOverlay({}, state, regionRef);\n  useEvent(regionRef, 'keydown', isExpanded ? (e) => {\n    if (e.key === 'Escape') {\n      collapse();\n    }\n  } : undefined);\n\n  let prefersReducedMotion = useMediaQuery('(prefers-reduced-motion)');\n  let reduceMotion = props['PRIVATE_forceReducedMotion'] ?? prefersReducedMotion;\n  useEffect(() => {\n    let oldGlobalReduceMotion = globalReduceMotion;\n    globalReduceMotion = reduceMotion;\n    return () => {\n      globalReduceMotion = oldGlobalReduceMotion;\n    };\n  }, [reduceMotion]);\n\n  return (\n    <ToastRegion\n      {...props}\n      ref={regionRef}\n      queue={queue}\n      className={renderProps => toastRegion({\n        ...renderProps,\n        placement,\n        align,\n        isExpanded\n      })}>\n      <FocusScope contain={isExpanded}>\n        <ToastContainerContext.Provider value={ctx}>\n          {isExpanded && (\n            // eslint-disable-next-line\n            <div\n              className={toastCss['toast-background'] + style({position: 'fixed', inset: 0, backgroundColor: 'transparent-black-500'})}\n              onClick={collapse} />\n          )}\n          <SpectrumToastList\n            placement={placement}\n            align={align}\n            reduceMotion={reduceMotion} />\n          <div className={toastCss['toast-controls'] + controls({isExpanded})}>\n            <ActionButton\n              size=\"S\"\n              onPress={() => queue.clear()}\n              // Default focus ring does not have enough contrast against gray background.\n              UNSAFE_style={{outlineColor: 'white'}}>\n              {stringFormatter.format('toast.clearAll')}\n            </ActionButton>\n            <ActionButton\n              size=\"S\"\n              onPress={collapse}\n              UNSAFE_style={{outlineColor: 'white'}}>\n              {stringFormatter.format('toast.collapse')}\n            </ActionButton>\n          </div>\n        </ToastContainerContext.Provider>\n      </FocusScope>\n    </ToastRegion>\n  );\n}\n\nfunction SpectrumToastList({placement, align, reduceMotion}) {\n  let {isExpanded, toggleExpanded} = useContext(ToastContainerContext)!;\n\n  // Attach click handler to ref since ToastList doesn't pass through onClick/onPress.\n  let toastListRef = useRef(null);\n  useEvent(toastListRef, 'click', (e) => {\n    // Have to check if this is a button because stopPropagation in react events doesn't affect native events.\n    if (!isExpanded && !(e.target as Element)?.closest('button')) {\n      toggleExpanded();\n    }\n  });\n\n  return (\n    <ToastList<SpectrumToastValue>\n      ref={toastListRef}\n      style={({isHovered}) => {\n        let origin = isHovered ? 95 : 55;\n        return {\n          perspective: 80,\n          perspectiveOrigin: 'center ' + (placement === 'top' ? `calc(100% + ${origin}px)` : `${-origin}px`),\n          transition: 'perspective-origin 400ms'\n        };\n      }}\n      className={toastCss[isExpanded ? 'toast-list-expanded' : 'toast-list-collapsed'] + toastList({placement, align, isExpanded})}>\n      {({toast}) => (\n        <SpectrumToast\n          toast={toast}\n          placement={placement}\n          align={align}\n          reduceMotion={reduceMotion} />\n      )}\n    </ToastList>\n  );\n}\n\ninterface SpectrumToastProps extends ToastProps<SpectrumToastValue> {\n  placement?: 'top' | 'bottom',\n  align?: 'start' | 'center' | 'end',\n  reduceMotion?: boolean\n}\n\n// Exported locally for stories.\nexport function SpectrumToast(props: SpectrumToastProps): ReactNode {\n  let {toast, placement = 'bottom', align = 'center'} = props;\n  let variant = toast.content.variant || 'info';\n  let Icon = ICONS[variant];\n  let state = useContext(ToastStateContext)!;\n  let visibleToasts = state.visibleToasts;\n  let index = visibleToasts.indexOf(toast);\n  let isMain = index <= 0;\n  let ctx = useContext(ToastContainerContext);\n  let isExpanded = ctx?.isExpanded || false;\n  let toastRef = useRef<HTMLDivElement | null>(null);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n\n  // When not expanded, use a presentational div for the toasts behind the top one.\n  // The content is invisible, all we show is the background color.\n  if (!isMain && ctx && !ctx.isExpanded) {\n    return (\n      <div\n        role=\"presentation\"\n        style={{\n          position: 'absolute',\n          [placement === 'top' ? 'bottom' : 'top']: 0,\n          left: 0,\n          width: '100%',\n          translate: `0 0 ${(-12 * index) / 16}rem`,\n          // Only 3 toasts are visible in the stack at once, but all toasts are in the DOM.\n          // This allows view transitions to smoothly animate them from where they would be\n          // in the collapsed stack to their final position in the expanded list.\n          opacity: index >= 3 ? 0 : 1,\n          zIndex: visibleToasts.length - index - 1,\n          // When reduced motion is enabled, use append index to view-transition-name\n          // so that adding/removing a toast cross fades instead of transitioning the position.\n          // This works because the toasts are seen as separate elements instead of the same one when their index changes.\n          viewTransitionName: toast.key + (props.reduceMotion ? '-' + index : ''),\n          viewTransitionClass: [toastCss.toast, toastCss['background-toast']].map(c => CSS.escape(c)).join(' ')\n        }}\n        className={toastCss.toast + toastStyle({variant: toast.content.variant || 'info', index, isExpanded})}\n        ref={fixSafariTransform} />\n    );\n  }\n\n  return (\n    <Toast\n      ref={toastRef}\n      toast={toast}\n      style={{\n        zIndex: visibleToasts.length - index - 1,\n        viewTransitionName: toast.key,\n        viewTransitionClass: [toastCss.toast, !isMain ? toastCss['background-toast'] : '', toastCss[placement], toastCss[align]].filter(Boolean).map(c => CSS.escape(c)).join(' ')\n      }}\n      className={renderProps => toastCss.toast + toastStyle({\n        ...renderProps,\n        variant: toast.content.variant || 'info',\n        index,\n        isExpanded\n      })}>\n      <div role=\"presentation\" className={toastBody({isSingle: !isMain || visibleToasts.length <= 1 || isExpanded})}>\n        <ToastContent className={toastContent + (ctx && isMain ? ` ${toastCss['toast-content']}` : null)}>\n          {Icon &&\n            <CenterBaseline>\n              <Icon />\n            </CenterBaseline>\n          }\n          <Text slot=\"title\">{toast.content.children}</Text>\n        </ToastContent>\n        {!isExpanded && visibleToasts.length > 1 &&\n          <ActionButton\n            isQuiet\n            staticColor=\"white\"\n            styles={style({gridArea: 'expand'})}\n            // Make the chevron line up with the toast text, even though there is padding within the button.\n            UNSAFE_style={{marginInlineStart: variant === 'neutral' ? -10 : 14}}\n            UNSAFE_className={ctx && isMain ? toastCss['toast-expand'] : undefined}\n            onPress={() => {\n              // This button disappears when clicked, so move focus to the toast.\n              toastRef.current?.focus();\n              ctx?.toggleExpanded();\n            }}>\n            <Text>{stringFormatter.format('toast.showAll')}</Text>\n            {/* @ts-ignore */}\n            <Chevron UNSAFE_style={{rotate: placement === 'bottom' ? '180deg' : undefined}} />\n          </ActionButton>\n        }\n        {toast.content.actionLabel &&\n          <Button\n            variant=\"secondary\"\n            fillStyle=\"outline\"\n            staticColor=\"white\"\n            onPress={() => {\n              toast.content.onAction?.();\n              if (toast.content.shouldCloseOnAction) {\n                state.close(toast.key);\n              }\n            }}\n            UNSAFE_className={ctx && isMain ? toastCss['toast-action'] : undefined}\n            styles={style({marginStart: 'auto', gridArea: 'action'})}>\n            {toast.content.actionLabel}\n          </Button>\n        }\n      </div>\n      <CloseButton\n        staticColor=\"white\"\n        UNSAFE_className={ctx && isMain ? toastCss['toast-close'] : undefined} />\n    </Toast>\n  );\n}\n\nfunction fixSafariTransform(el: HTMLDivElement | null) {\n  // Safari has a bug where the toasts display in the wrong position (CSS transform is not applied correctly).\n  // Work around this by removing it, forcing a reflow, and re-applying.\n  if (el && isWebKit()) {\n    let translate = el.style.translate;\n    el.style.translate = '';\n    el.offsetHeight;\n    el.style.translate = translate;\n  }\n}\n"],"names":[],"version":3,"file":"Toast.css.map"}
+{"mappings":"AC+IoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+CF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6CC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyCD;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmBG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAYJ;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0GuC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2IpC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0BA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnbA;EA4FD;;;;EAAA;;;;;AA5FC;EAAA;IAAA;;;;;;AA4FD;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["6dc577186b5a1727","packages/@react-spectrum/s2/src/Toast.tsx"],"sourcesContent":["@import \"a0170cf5756cc69c\";\n@import \"a2ac041fc39dd90c\";\n@import \"edbbbe6b05e0b3b2\";\n@import \"9dfb5fe5fb904d99\";\n@import \"6adef38be65b19a3\";\n@import \"591ce9936d0f37f8\";\n@import \"1be8abfe00176762\";\n@import \"e2df49088a479e17\";\n@import \"e897bf6437583377\";\n","/*\n * Copyright 2025 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\nimport {ActionButton} from './ActionButton';\nimport AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Button} from './Button';\nimport {CenterBaseline} from './CenterBaseline';\nimport CheckmarkIcon from '../s2wf-icons/S2_Icon_CheckmarkCircle_20_N.svg';\nimport Chevron from '../s2wf-icons/S2_Icon_ChevronDown_20_N.svg';\nimport {CloseButton} from './CloseButton';\nimport {createContext, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';\nimport {DOMProps} from '@react-types/shared';\nimport {filterDOMProps, isWebKit, useEvent} from '@react-aria/utils';\nimport {flushSync} from 'react-dom';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {FocusScope, useModalOverlay} from 'react-aria';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ToastOptions as RACToastOptions, UNSTABLE_Toast as Toast, UNSTABLE_ToastContent as ToastContent, UNSTABLE_ToastList as ToastList, ToastProps, UNSTABLE_ToastQueue as ToastQueue, UNSTABLE_ToastRegion as ToastRegion, ToastRegionProps, UNSTABLE_ToastStateContext as ToastStateContext} from 'react-aria-components';\nimport {Text} from './Content';\nimport toastCss from './Toast.module.css';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMediaQuery} from '@react-spectrum/utils';\nimport {useOverlayTriggerState} from 'react-stately';\n\nexport type ToastPlacement = 'top' | 'top end' | 'bottom' | 'bottom end';\nexport interface ToastContainerProps extends Omit<ToastRegionProps<SpectrumToastValue>, 'queue' | 'children' | 'style' | 'className' | 'render'> {\n  /**\n   * Placement of the toast container on the page.\n   * @default \"bottom\"\n   */\n  placement?: ToastPlacement\n}\n\nexport interface ToastOptions extends Omit<RACToastOptions, 'priority'>, DOMProps {\n  /** A label for the action button within the toast. */\n  actionLabel?: string,\n  /** Handler that is called when the action button is pressed. */\n  onAction?: () => void,\n  /** Whether the toast should automatically close when an action is performed. */\n  shouldCloseOnAction?: boolean\n}\n\nexport interface SpectrumToastValue extends DOMProps {\n  /** The content of the toast. */\n  children: string,\n  /** The variant (i.e. color) of the toast. */\n  variant: 'positive' | 'negative' | 'info' | 'neutral',\n  /** A label for the action button within the toast. */\n  actionLabel?: string,\n  /** Handler that is called when the action button is pressed. */\n  onAction?: () => void,\n  /** Whether the toast should automatically close when an action is performed. */\n  shouldCloseOnAction?: boolean\n}\n\nlet globalReduceMotion = false;\nfunction startViewTransition(fn: () => void, type: string) {\n  if ('startViewTransition' in document) {\n    // Safari doesn't support :active-view-transition-type() yet, so we fall back to a class on the html element.\n    document.documentElement.classList.add(toastCss[type]);\n    if (globalReduceMotion) {\n      document.documentElement.classList.add(toastCss.reduceMotion);\n    }\n\n    let viewTransition = document.startViewTransition(() => flushSync(fn));\n\n    viewTransition.ready.catch(() => {});\n    viewTransition.finished.then(() => {\n      document.documentElement.classList.remove(toastCss[type], toastCss.reduceMotion);\n    });\n  } else {\n    fn();\n  }\n}\n\n// There is a single global toast queue instance for the whole app, initialized lazily.\nlet globalToastQueue: ToastQueue<SpectrumToastValue> | null = null;\nfunction getGlobalToastQueue() {\n  if (!globalToastQueue) {\n    globalToastQueue = new ToastQueue({\n      maxVisibleToasts: Infinity,\n      wrapUpdate(fn, action) {\n        startViewTransition(fn, `toast-${action}`);\n      }\n    });\n  }\n\n  return globalToastQueue;\n}\n\nfunction addToast(children: string, variant: SpectrumToastValue['variant'], options: ToastOptions = {}) {\n  let value = {\n    children,\n    variant,\n    actionLabel: options.actionLabel,\n    onAction: options.onAction,\n    shouldCloseOnAction: options.shouldCloseOnAction,\n    ...filterDOMProps(options)\n  };\n\n  // Minimum time of 5s from https://spectrum.adobe.com/page/toast/#Auto-dismissible\n  // Actionable toasts cannot be auto dismissed. That would fail WCAG SC 2.2.1.\n  // It is debatable whether non-actionable toasts would also fail.\n  let timeout = options.timeout && !options.actionLabel ? Math.max(options.timeout, 5000) : undefined;\n  let queue = getGlobalToastQueue();\n  let key = queue.add(value, {timeout, onClose: options.onClose});\n  return () => queue.close(key);\n}\n\ntype CloseFunction = () => void;\n\nconst SpectrumToastQueue = {\n  /** Queues a neutral toast. */\n  neutral(children: string, options: ToastOptions = {}): CloseFunction {\n    return addToast(children, 'neutral', options);\n  },\n  /** Queues a positive toast. */\n  positive(children: string, options: ToastOptions = {}): CloseFunction {\n    return addToast(children, 'positive', options);\n  },\n  /** Queues a negative toast. */\n  negative(children: string, options: ToastOptions = {}): CloseFunction {\n    return addToast(children, 'negative', options);\n  },\n  /** Queues an informational toast. */\n  info(children: string, options: ToastOptions = {}): CloseFunction {\n    return addToast(children, 'info', options);\n  }\n};\n\nexport {SpectrumToastQueue as ToastQueue};\n\nconst toastRegion = style({\n  ...focusRing(),\n  display: 'flex',\n  flexDirection: {\n    placement: {\n      top: 'column',\n      bottom: 'column-reverse'\n    }\n  },\n  position: 'fixed',\n  insetX: 0,\n  width: 'fit',\n  top: {\n    placement: {\n      top: {\n        default: 16,\n        isExpanded: 0\n      }\n    }\n  },\n  bottom: {\n    placement: {\n      bottom: {\n        default: 16,\n        isExpanded: 0\n      }\n    }\n  },\n  marginStart: {\n    align: {\n      start: 16,\n      center: 'auto',\n      end: 'auto'\n    }\n  },\n  marginEnd: {\n    align: {\n      start: 'auto',\n      center: 'auto',\n      end: 16\n    }\n  },\n  boxSizing: 'border-box',\n  maxHeight: 'full',\n  borderRadius: 'lg'\n});\n\nconst toastList = style({\n  position: 'relative',\n  flexGrow: 1,\n  display: 'flex',\n  gap: 8,\n  flexDirection: {\n    placement: {\n      top: 'column',\n      bottom: 'column-reverse'\n    }\n  },\n  boxSizing: 'border-box',\n  marginY: 0,\n  padding: {\n    default: 0,\n    // Add padding when expanded to account for focus ring.\n    isExpanded: 8\n  },\n  paddingBottom: {\n    isExpanded: {\n      placement: {\n        top: 8,\n        bottom: 16\n      }\n    }\n  },\n  paddingTop: {\n    isExpanded: {\n      placement: {\n        top: 16,\n        bottom: 8\n      }\n    }\n  },\n  margin: 0,\n  marginX: {\n    default: 0,\n    // Undo padding for focus ring.\n    isExpanded: -8\n  },\n  overflow: {\n    isExpanded: 'auto'\n  }\n});\n\nconst toastStyle = style({\n  ...focusRing(),\n  outlineColor: {\n    default: 'focus-ring',\n    isExpanded: 'white'\n  },\n  display: 'flex',\n  gap: 16,\n  paddingStart: 16,\n  paddingEnd: 8,\n  paddingY: 12,\n  borderRadius: 'lg',\n  minHeight: 56,\n  '--maxWidth': {\n    type: 'maxWidth',\n    value: 336\n  },\n  maxWidth: 'min(var(--maxWidth), 90vw)',\n  boxSizing: 'border-box',\n  flexShrink: 0,\n  font: 'ui',\n  color: 'white',\n  backgroundColor: {\n    variant: {\n      neutral: 'neutral-subdued',\n      info: 'informative',\n      positive: 'positive',\n      negative: 'negative'\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  boxShadow: {\n    default: 'elevated',\n    isExpanded: 'none'\n  },\n  willChange: 'transform'\n});\n\nconst toastBody = style({\n  // The top toast in a non-expanded stack has the expand button, so it is rendered as a grid.\n  // Otherwise it uses flex so the content can wrap when needed.\n  display: {\n    default: 'grid',\n    isSingle: 'flex'\n  },\n  gridTemplateColumns: ['auto', '1fr', 'auto'],\n  gridTemplateAreas: [\n    'content content content',\n    'expand  .       action'\n  ],\n  flexGrow: 1,\n  flexWrap: 'wrap',\n  alignItems: 'center',\n  columnGap: 24,\n  rowGap: 8\n});\n\nconst toastContent = style({\n  display: 'flex',\n  gap: 8,\n  alignItems: 'baseline',\n  gridArea: 'content',\n  cursor: 'default',\n  width: 'fit',\n  overflowWrap: 'break-word',\n  wordBreak: 'break-word',\n  minWidth: 0\n});\n\nconst controls = style({\n  colorScheme: 'light',\n  display: {\n    default: 'none',\n    isExpanded: 'flex'\n  },\n  justifyContent: 'end',\n  gap: 8,\n  opacity: {\n    default: 0,\n    isExpanded: 1\n  }\n});\n\nconst ICONS = {\n  info: InfoIcon,\n  negative: AlertIcon,\n  positive: CheckmarkIcon\n};\n\ninterface ToastContainerContextValue {\n  isExpanded: boolean,\n  toggleExpanded: () => void\n}\n\nconst ToastContainerContext = createContext<ToastContainerContextValue | null>(null);\n\n/**\n * A ToastContainer renders the queued toasts in an application. It should be placed\n * at the root of the app.\n */\nexport function ToastContainer(props: ToastContainerProps): ReactNode {\n  let {\n    placement = 'bottom'\n  } = props;\n  let queue = getGlobalToastQueue();\n  let align = 'center';\n  [placement, align = 'center'] = placement.split(' ') as any;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let regionRef = useRef<HTMLDivElement | null>(null);\n\n  let state = useOverlayTriggerState({});\n  let {isOpen: isExpanded, close, toggle} = state;\n  let ctx = useMemo(() => ({\n    isExpanded,\n    toggleExpanded() {\n      if (!isExpanded && queue.visibleToasts.length <= 1) {\n        return;\n      }\n\n      startViewTransition(\n        () => toggle(),\n        isExpanded ? 'toast-collapse' : 'toast-expand'\n      );\n    }\n  }), [isExpanded, toggle, queue]);\n\n  // Set the state to collapsed whenever the queue is emptied.\n  useEffect(() => {\n    return queue.subscribe(() => {\n      if (queue.visibleToasts.length === 0 && isExpanded) {\n        close();\n      }\n    });\n  }, [queue, isExpanded, close]);\n\n  let collapse = () => {\n    regionRef.current?.focus();\n    ctx.toggleExpanded();\n  };\n\n  // Prevent scroll, aria hide outside, and contain focus when expanded, since we take over the whole screen.\n  // Attach event handler to the ref since ToastRegion doesn't pass through onKeyDown.\n  useModalOverlay({}, state, regionRef);\n  useEvent(regionRef, 'keydown', isExpanded ? (e) => {\n    if (e.key === 'Escape') {\n      collapse();\n    }\n  } : undefined);\n\n  let prefersReducedMotion = useMediaQuery('(prefers-reduced-motion)');\n  let reduceMotion = props['PRIVATE_forceReducedMotion'] ?? prefersReducedMotion;\n  useEffect(() => {\n    let oldGlobalReduceMotion = globalReduceMotion;\n    globalReduceMotion = reduceMotion;\n    return () => {\n      globalReduceMotion = oldGlobalReduceMotion;\n    };\n  }, [reduceMotion]);\n\n  return (\n    <ToastRegion\n      {...props}\n      ref={regionRef}\n      queue={queue}\n      className={renderProps => toastRegion({\n        ...renderProps,\n        placement,\n        align,\n        isExpanded\n      })}>\n      <FocusScope contain={isExpanded}>\n        <ToastContainerContext.Provider value={ctx}>\n          {isExpanded && (\n            // eslint-disable-next-line\n            <div\n              className={toastCss['toast-background'] + style({position: 'fixed', inset: 0, backgroundColor: 'transparent-black-500'})}\n              onClick={collapse} />\n          )}\n          <SpectrumToastList\n            placement={placement}\n            align={align}\n            reduceMotion={reduceMotion} />\n          <div className={toastCss['toast-controls'] + controls({isExpanded})}>\n            <ActionButton\n              size=\"S\"\n              onPress={() => queue.clear()}\n              // Default focus ring does not have enough contrast against gray background.\n              UNSAFE_style={{outlineColor: 'white'}}>\n              {stringFormatter.format('toast.clearAll')}\n            </ActionButton>\n            <ActionButton\n              size=\"S\"\n              onPress={collapse}\n              UNSAFE_style={{outlineColor: 'white'}}>\n              {stringFormatter.format('toast.collapse')}\n            </ActionButton>\n          </div>\n        </ToastContainerContext.Provider>\n      </FocusScope>\n    </ToastRegion>\n  );\n}\n\nfunction SpectrumToastList({placement, align, reduceMotion}) {\n  let {isExpanded, toggleExpanded} = useContext(ToastContainerContext)!;\n\n  // Attach click handler to ref since ToastList doesn't pass through onClick/onPress.\n  let toastListRef = useRef(null);\n  useEvent(toastListRef, 'click', (e) => {\n    // Have to check if this is a button because stopPropagation in react events doesn't affect native events.\n    if (!isExpanded && !(e.target as Element)?.closest('button')) {\n      toggleExpanded();\n    }\n  });\n\n  return (\n    <ToastList<SpectrumToastValue>\n      ref={toastListRef}\n      style={({isHovered}) => {\n        let origin = isHovered ? 95 : 55;\n        return {\n          perspective: 80,\n          perspectiveOrigin: 'center ' + (placement === 'top' ? `calc(100% + ${origin}px)` : `${-origin}px`),\n          transition: 'perspective-origin 400ms'\n        };\n      }}\n      className={toastCss[isExpanded ? 'toast-list-expanded' : 'toast-list-collapsed'] + toastList({placement, align, isExpanded})}>\n      {({toast}) => (\n        <SpectrumToast\n          toast={toast}\n          placement={placement}\n          align={align}\n          reduceMotion={reduceMotion} />\n      )}\n    </ToastList>\n  );\n}\n\ninterface SpectrumToastProps extends ToastProps<SpectrumToastValue> {\n  placement?: 'top' | 'bottom',\n  align?: 'start' | 'center' | 'end',\n  reduceMotion?: boolean\n}\n\n// Exported locally for stories.\nexport function SpectrumToast(props: SpectrumToastProps): ReactNode {\n  let {toast, placement = 'bottom', align = 'center'} = props;\n  let variant = toast.content.variant || 'info';\n  let Icon = ICONS[variant];\n  let state = useContext(ToastStateContext)!;\n  let visibleToasts = state.visibleToasts;\n  let index = visibleToasts.indexOf(toast);\n  let isMain = index <= 0;\n  let ctx = useContext(ToastContainerContext);\n  let isExpanded = ctx?.isExpanded || false;\n  let toastRef = useRef<HTMLDivElement | null>(null);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n\n  // When not expanded, use a presentational div for the toasts behind the top one.\n  // The content is invisible, all we show is the background color.\n  if (!isMain && ctx && !ctx.isExpanded) {\n    return (\n      <div\n        role=\"presentation\"\n        style={{\n          position: 'absolute',\n          [placement === 'top' ? 'bottom' : 'top']: 0,\n          left: 0,\n          width: '100%',\n          translate: `0 0 ${(-12 * index) / 16}rem`,\n          // Only 3 toasts are visible in the stack at once, but all toasts are in the DOM.\n          // This allows view transitions to smoothly animate them from where they would be\n          // in the collapsed stack to their final position in the expanded list.\n          opacity: index >= 3 ? 0 : 1,\n          zIndex: visibleToasts.length - index - 1,\n          // When reduced motion is enabled, use append index to view-transition-name\n          // so that adding/removing a toast cross fades instead of transitioning the position.\n          // This works because the toasts are seen as separate elements instead of the same one when their index changes.\n          viewTransitionName: toast.key + (props.reduceMotion ? '-' + index : ''),\n          viewTransitionClass: [toastCss.toast, toastCss['background-toast']].map(c => CSS.escape(c)).join(' ')\n        }}\n        className={toastCss.toast + toastStyle({variant: toast.content.variant || 'info', index, isExpanded})}\n        ref={fixSafariTransform} />\n    );\n  }\n\n  return (\n    <Toast\n      ref={toastRef}\n      toast={toast}\n      style={{\n        zIndex: visibleToasts.length - index - 1,\n        viewTransitionName: toast.key,\n        viewTransitionClass: [toastCss.toast, !isMain ? toastCss['background-toast'] : '', toastCss[placement], toastCss[align]].filter(Boolean).map(c => CSS.escape(c)).join(' ')\n      }}\n      className={renderProps => toastCss.toast + toastStyle({\n        ...renderProps,\n        variant: toast.content.variant || 'info',\n        index,\n        isExpanded\n      })}>\n      <div role=\"presentation\" className={toastBody({isSingle: !isMain || visibleToasts.length <= 1 || isExpanded})}>\n        <ToastContent className={toastContent + (ctx && isMain ? ` ${toastCss['toast-content']}` : null)}>\n          {Icon &&\n            <CenterBaseline>\n              <Icon />\n            </CenterBaseline>\n          }\n          <Text slot=\"title\">{toast.content.children}</Text>\n        </ToastContent>\n        {!isExpanded && visibleToasts.length > 1 &&\n          <ActionButton\n            isQuiet\n            staticColor=\"white\"\n            styles={style({gridArea: 'expand'})}\n            // Make the chevron line up with the toast text, even though there is padding within the button.\n            UNSAFE_style={{marginInlineStart: variant === 'neutral' ? -10 : 14}}\n            UNSAFE_className={ctx && isMain ? toastCss['toast-expand'] : undefined}\n            onPress={() => {\n              // This button disappears when clicked, so move focus to the toast.\n              toastRef.current?.focus();\n              ctx?.toggleExpanded();\n            }}>\n            <Text>{stringFormatter.format('toast.showAll')}</Text>\n            {/* @ts-ignore */}\n            <Chevron UNSAFE_style={{rotate: placement === 'bottom' ? '180deg' : undefined}} />\n          </ActionButton>\n        }\n        {toast.content.actionLabel &&\n          <Button\n            variant=\"secondary\"\n            fillStyle=\"outline\"\n            staticColor=\"white\"\n            onPress={() => {\n              toast.content.onAction?.();\n              if (toast.content.shouldCloseOnAction) {\n                state.close(toast.key);\n              }\n            }}\n            UNSAFE_className={ctx && isMain ? toastCss['toast-action'] : undefined}\n            styles={style({marginStart: 'auto', gridArea: 'action'})}>\n            {toast.content.actionLabel}\n          </Button>\n        }\n      </div>\n      <CloseButton\n        staticColor=\"white\"\n        UNSAFE_className={ctx && isMain ? toastCss['toast-close'] : undefined} />\n    </Toast>\n  );\n}\n\nfunction fixSafariTransform(el: HTMLDivElement | null) {\n  // Safari has a bug where the toasts display in the wrong position (CSS transform is not applied correctly).\n  // Work around this by removing it, forcing a reflow, and re-applying.\n  if (el && isWebKit()) {\n    let translate = el.style.translate;\n    el.style.translate = '';\n    el.offsetHeight;\n    el.style.translate = translate;\n  }\n}\n"],"names":[],"version":3,"file":"Toast.css.map"}