@react-spectrum/s2 0.5.0 → 0.6.0

package/dist/Modal.cjs

@@ -26,35 +26,31 @@ $parcel$export(module.exports, "Modal", () => $8e678305a8c10028$export$2b77a92f1
 
 
 
-const $8e678305a8c10028$var$fade = "-_1llqja1";
-const $8e678305a8c10028$var$fadeAndSlide = "-_1mhijd";
 const $8e678305a8c10028$var$modalOverlayStyles = function anonymous(props) {
     let rules = " .";
-    if (props.colorScheme === "dark") rules += ' _Ab';
-    else if (props.colorScheme === "light") rules += ' _Aa';
-    else if (props.colorScheme === "light dark") rules += ' _Ac';
-    else rules += ' _A-10jn6wd';
-    rules += ' Ub';
-    rules += ' Xa';
-    rules += ' Za';
-    rules += ' Va';
+    if (props.colorScheme === "dark") rules += ' _Bb';
+    else if (props.colorScheme === "light") rules += ' _Ba';
+    else if (props.colorScheme === "light dark") rules += ' _Bc';
+    else rules += ' _B-10jn6wd';
+    rules += ' Vb';
+    rules += ' Ya';
+    rules += ' _aa';
     rules += ' Wa';
-    rules += ' __Fa';
+    rules += ' Xa';
+    rules += ' __Ga';
     rules += ' b_____o';
-    rules += ' _Zd';
-    rules += ' _1c';
-    rules += ' _2d';
-    if (props.isExiting) rules += ' _S-1nys8p3';
-    else if (props.isEntering) rules += ' _S-1nys8p3';
-    if (props.isExiting) rules += ' _T-375x5l';
-    else if (props.isEntering) rules += ' _T-375y1o';
-    if (props.isExiting) rules += ' _Ya';
-    else if (props.isEntering) rules += ' _Ya';
-    if (props.isExiting) rules += ' _Vb';
-    else if (props.isEntering) rules += ' _Va';
+    rules += ' _0d';
+    rules += ' _2c';
+    rules += ' _3d';
+    if (props.isExiting) rules += ' _L-3t1x';
+    else if (props.isEntering) rules += ' _L-3t1x';
+    rules += ' _Pc';
+    if (props.isExiting) rules += ' _R-375x5l';
+    else rules += ' _R-375y1o';
+    rules += ' _Sa';
     return rules;
 };
-function $8e678305a8c10028$var$Modal(props1, ref) {
+const $8e678305a8c10028$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $j6TWk$react.forwardRef)(function Modal(props1, ref) {
     let domRef = (0, $j6TWk$reactspectrumutils.useDOMRef)(ref);
     let colorScheme = (0, $j6TWk$react.useContext)((0, $914a06b3a1c679bc$exports.ColorSchemeContext));
     let { locale: locale, direction: direction } = (0, $j6TWk$reactariacomponents.useLocale)();
@@ -81,16 +77,16 @@ function $8e678305a8c10028$var$Modal(props1, ref) {
             ref: modalRef,
             className: (renderProps)=>(function anonymous(props) {
                     let rules = " .";
-                    rules += ' _Zd';
-                    rules += ' _6b';
-                    if (props.size === "fullscreenTakeover") rules += ' _va';
-                    else rules += ' _ve';
+                    rules += ' _0d';
+                    rules += ' _7b';
                     if (props.size === "fullscreenTakeover") rules += ' _wa';
                     else rules += ' _we';
                     if (props.size === "fullscreenTakeover") rules += ' _xa';
                     else rules += ' _xe';
                     if (props.size === "fullscreenTakeover") rules += ' _ya';
                     else rules += ' _ye';
+                    if (props.size === "fullscreenTakeover") rules += ' _za';
+                    else rules += ' _ze';
                     if (props.size === "fullscreenTakeover") rules += ' lb';
                     else if (props.size === "fullscreen") rules += ' l-tp2nko';
                     else if (props.size === "L") rules += ' l_________G';
@@ -104,21 +100,19 @@ function $8e678305a8c10028$var$Modal(props1, ref) {
                     if (props.size === "fullscreenTakeover") rules += ' po';
                     else if (props.size === "fullscreen") rules += ' po';
                     else rules += ' p-yjhhbg';
-                    rules += ' -_1de2x0q_b-______k';
+                    rules += ' -_1de2x0q_b-______x';
                     rules += ' b-1de2x0q';
-                    if (props.isExiting) rules += ' _S-1nys8p3';
-                    else if (props.isEntering) rules += ' _S-3zirke';
-                    if (props.isExiting) rules += ' _T-375x5l';
-                    else if (props.isEntering) rules += ' _T-375y1o';
-                    if (props.isExiting) rules += ' _Ya';
-                    else if (props.isEntering) rules += ' _Ya';
-                    if (props.isExiting) rules += ' _U-3t1x';
-                    else if (props.isEntering) rules += ' _U-375x8c';
-                    if (props.isExiting) rules += ' _Vb';
-                    else if (props.isEntering) rules += ' _Va';
-                    rules += ' _Wd';
-                    rules += ' _Lb';
-                    rules += ' _Nb';
+                    if (props.isExiting) rules += ' _L-3t1x';
+                    else if (props.isEntering) rules += ' _L-3t1x';
+                    if (props.isEntering) rules += ' Qg';
+                    rules += ' _P-19n5zko';
+                    if (props.isExiting) rules += ' _R-375x5l';
+                    else rules += ' _R-375y1o';
+                    rules += ' _Sa';
+                    if (props.isExiting) rules += ' _Q-3t1x';
+                    else rules += ' _Q-375x8c';
+                    rules += ' _Mb';
+                    rules += ' _Ob';
                     rules += ' da';
                     return rules;
                 })({
@@ -127,10 +121,7 @@ function $8e678305a8c10028$var$Modal(props1, ref) {
                 })
         })
     });
-}
-/**
- * A modal is an overlay element which blocks interaction with elements outside it.
- */ let $8e678305a8c10028$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $j6TWk$react.forwardRef)($8e678305a8c10028$var$Modal);
+});
 
 
 //# sourceMappingURL=Modal.cjs.map

package/dist/Modal.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAoBD,MAAM;AAUN,MAAM;AAYN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBN,SAAS,4BAAM,MAAiB,EAAE,GAA2B;IAC3D,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,4CAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,oCAAQ;IAElC,0DAA0D;IAC1D,IAAI,WAAW,CAAA,GAAA,wBAAU,EAAE,CAAC;QACzB,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,qBACE,gCAAC,CAAA,GAAA,uCAAW;QACT,GAAG,MAAK;QACT,WAAW,CAAA,cAAe,yCAAmB;gBAAC,GAAG,WAAW;6BAAE;YAAW;kBACzE,cAAA,gCAAC,CAAA,GAAA,gCAAO;YACL,GAAG,MAAK;YACT,KAAK;YACL,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAiEvB;oBAAC,GAAG,WAAW;oBAAE,MAAM,OAAM,IAAI;gBAAA;;;AAG5C;AAEA;;CAEC,GACD,IAAI,0DAAS,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Modal.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {colorScheme} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ModalProps extends ModalOverlayProps {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst fade = keyframes(`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`);\n\nconst fadeAndSlide = keyframes(`\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`);\n\nconst modalOverlayStyles = style({\n  ...colorScheme(),\n  position: 'fixed',\n  inset: 0,\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  animation: {\n    isEntering: fade,\n    isExiting: fade\n  },\n  animationDuration: {\n    isEntering: 250,\n    isExiting: 130\n  },\n  animationDirection: {\n    isEntering: 'normal',\n    isExiting: 'reverse'\n  }\n});\n\nfunction Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let modalRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  return (\n    <ModalOverlay\n      {...props}\n      className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>\n      <RACModal\n        {...props}\n        ref={modalRef}\n        className={renderProps => style({\n          display: 'flex',\n          flexDirection: 'column',\n          borderRadius: {\n            default: 'xl',\n            size: {\n              fullscreenTakeover: 'none'\n            }\n          },\n          width: {\n            size: {\n              // Copied from designs, not sure if correct.\n              S: 336,\n              M: 416,\n              L: 576,\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          height: {\n            size: {\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          maxWidth: {\n            default: '[90vw]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          maxHeight: {\n            default: '[90vh]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          '--s2-container-bg': {\n            type: 'backgroundColor',\n            value: 'layer-2'\n          },\n          backgroundColor: '--s2-container-bg',\n          animation: {\n            isEntering: fadeAndSlide,\n            isExiting: fade\n          },\n          animationDuration: {\n            isEntering: 250,\n            isExiting: 130\n          },\n          animationDelay: {\n            isEntering: 160,\n            isExiting: 0\n          },\n          animationDirection: {\n            isEntering: 'normal',\n            isExiting: 'reverse'\n          },\n          animationFillMode: 'both',\n          // Transparent outline for WHCM.\n          outlineStyle: 'solid',\n          outlineWidth: 1,\n          outlineColor: 'transparent'\n        })({...renderProps, size: props.size})} />\n    </ModalOverlay>\n  );\n}\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nlet _Modal = forwardRef(Modal);\nexport {_Modal as Modal};\n"],"names":[],"version":3,"file":"Modal.cjs.map"}
+{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmBD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;AAuBC,MAAM,0DAAQ,CAAA,GAAA,uBAAS,EAAE,SAAS,MAAM,MAAiB,EAAE,GAA2B;IAC3F,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,4CAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,oCAAQ;IAElC,0DAA0D;IAC1D,IAAI,WAAW,CAAA,GAAA,wBAAU,EAAE,CAAC;QACzB,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,qBACE,gCAAC,CAAA,GAAA,uCAAW;QACT,GAAG,MAAK;QACT,WAAW,CAAA,cAAe,yCAAmB;gBAAC,GAAG,WAAW;6BAAE;YAAW;kBACzE,cAAA,gCAAC,CAAA,GAAA,gCAAO;YACL,GAAG,MAAK;YACT,KAAK;YACL,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAgEvB;oBAAC,GAAG,WAAW;oBAAE,MAAM,OAAM,IAAI;gBAAA;;;AAG5C","sources":["packages/@react-spectrum/s2/src/Modal.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {colorScheme} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ModalProps extends ModalOverlayProps {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst modalOverlayStyles = style({\n  ...colorScheme(),\n  position: 'fixed',\n  inset: 0,\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  opacity: {\n    isEntering: 0,\n    isExiting: 0\n  },\n  transition: 'opacity',\n  transitionDuration: {\n    default: 250,\n    isExiting: 130\n  }\n});\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nexport const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let modalRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  return (\n    <ModalOverlay\n      {...props}\n      className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>\n      <RACModal\n        {...props}\n        ref={modalRef}\n        className={renderProps => style({\n          display: 'flex',\n          flexDirection: 'column',\n          borderRadius: {\n            default: 'xl',\n            size: {\n              fullscreenTakeover: 'none'\n            }\n          },\n          width: {\n            size: {\n              // Copied from designs, not sure if correct.\n              S: 336,\n              M: 416,\n              L: 576,\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          height: {\n            size: {\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          maxWidth: {\n            default: '[90vw]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          maxHeight: {\n            default: '[90vh]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          '--s2-container-bg': {\n            type: 'backgroundColor',\n            value: 'layer-2'\n          },\n          backgroundColor: '--s2-container-bg',\n          opacity: {\n            isEntering: 0,\n            isExiting: 0\n          },\n          translateY: {\n            isEntering: 20\n          },\n          transition: '[opacity, translate]',\n          transitionDuration: {\n            default: 250,\n            isExiting: 130\n          },\n          transitionDelay: {\n            default: 160,\n            isExiting: 0\n          },\n          // Transparent outline for WHCM.\n          outlineStyle: 'solid',\n          outlineWidth: 1,\n          outlineColor: 'transparent'\n        })({...renderProps, size: props.size})} />\n    </ModalOverlay>\n  );\n});\n"],"names":[],"version":3,"file":"Modal.cjs.map"}

package/dist/Modal.css

@@ -1,76 +1,54 @@
-@keyframes -_1llqja1 {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes -_1mhijd {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 @layer _.a {
-  ._A-10jn6wd {
+  ._B-10jn6wd {
     color-scheme: var(--lightningcss-light, light) var(--lightningcss-dark, dark);
   }
 
-  ._Ac {
+  ._Bc {
     --lightningcss-light: initial;
     --lightningcss-dark: ;
     color-scheme: light dark;
   }
 
   @media (prefers-color-scheme: dark) {
-    ._Ac {
+    ._Bc {
       --lightningcss-light: ;
       --lightningcss-dark: initial;
     }
   }
 
-  ._Aa {
+  ._Ba {
     --lightningcss-light: initial;
     --lightningcss-dark: ;
     color-scheme: light;
   }
 
-  ._Ab {
+  ._Bb {
     --lightningcss-light: ;
     --lightningcss-dark: initial;
     color-scheme: dark;
   }
 
-  .Ub {
+  .Vb {
     position: fixed;
   }
 
-  .Xa {
+  .Ya {
     top: 0;
   }
 
-  .Za {
+  ._aa {
     bottom: 0;
   }
 
-  .Va {
+  .Wa {
     inset-inline-start: 0;
   }
 
-  .Wa {
+  .Xa {
     inset-inline-end: 0;
   }
 
-  .__Fa {
+  .__Ga {
     isolation: isolate;
   }
 
@@ -78,51 +56,55 @@
     background-color: #00000070;
   }
 
-  ._1c {
+  ._2c {
     align-items: center;
   }
 
-  ._2d {
+  ._3d {
     justify-content: center;
   }
 
-  ._Zd {
+  ._Pc {
+    transition-property: opacity;
+  }
+
+  ._0d {
     display: flex;
   }
 
-  ._6b {
+  ._7b {
     flex-direction: column;
   }
 
-  ._ve {
+  ._we {
     border-start-start-radius: 1rem;
   }
 
-  ._va {
+  ._wa {
     border-start-start-radius: 0;
   }
 
-  ._we {
+  ._xe {
     border-start-end-radius: 1rem;
   }
 
-  ._wa {
+  ._xa {
     border-start-end-radius: 0;
   }
 
-  ._xe {
+  ._ye {
     border-end-start-radius: 1rem;
   }
 
-  ._xa {
+  ._ya {
     border-end-start-radius: 0;
   }
 
-  ._ye {
+  ._ze {
     border-end-end-radius: 1rem;
   }
 
-  ._ya {
+  ._za {
     border-end-end-radius: 0;
   }
 
@@ -170,7 +152,7 @@
     max-height: none;
   }
 
-  .-_1de2x0q_b-______k {
+  .-_1de2x0q_b-______x {
     --s2-container-bg: var(--lightningcss-light, #fff) var(--lightningcss-dark, #222);
   }
 
@@ -178,51 +160,45 @@
     background-color: var(--s2-container-bg);
   }
 
-  ._S-3zirke {
-    animation-name: -_1mhijd;
-  }
-
-  ._S-1nys8p3 {
-    animation-name: -_1llqja1;
-  }
-
-  ._T-375y1o {
-    animation-duration: .25s;
+  ._L-3t1x {
+    opacity: 0;
+    opacity: 0;
   }
 
-  ._T-375x5l {
-    animation-duration: .13s;
+  .Qg {
+    --translateY: 1.25rem;
+    translate: var(--translateX, 0) var(--translateY, 0);
   }
 
-  ._Ya {
-    animation-timing-function: cubic-bezier(.45, 0, .4, 1);
+  ._P-19n5zko {
+    transition-property: opacity, translate;
   }
 
-  ._U-375x8c {
-    animation-delay: .16s;
+  ._R-375y1o {
+    transition-duration: .25s;
   }
 
-  ._U-3t1x {
-    animation-delay: 0s;
+  ._R-375x5l {
+    transition-duration: .13s;
   }
 
-  ._Va {
-    animation-direction: normal;
+  ._Sa {
+    transition-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 
-  ._Vb {
-    animation-direction: reverse;
+  ._Q-375x8c {
+    transition-delay: .16s;
   }
 
-  ._Wd {
-    animation-fill-mode: both;
+  ._Q-3t1x {
+    transition-delay: 0s;
   }
 
-  ._Lb {
+  ._Mb {
     outline-style: solid;
   }
 
-  ._Nb {
+  ._Ob {
     outline-width: 1px;
   }
 

package/dist/Modal.css.map

@@ -1 +1 @@
-{"mappings":"AC8Ba;;;;;;;;;;AAUQ;;;;;;;;;;;;AAYM;EAAA;;;;EAAA;;;;;;EAAA;IAAA;;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4CO;;;;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;;;;;AA5CP;;AA4CO","sources":["be2ce4448c91abb5","packages/@react-spectrum/s2/src/Modal.tsx"],"sourcesContent":["@import \"003d01b6d2f33501\";\n@import \"15edcb25b251bc58\";\n@import \"1ef8b667afb08263\";\n@import \"3b2472fc4486ca92\";\n","/*\n * Copyright 2024 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 {colorScheme} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ModalProps extends ModalOverlayProps {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst fade = keyframes(`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`);\n\nconst fadeAndSlide = keyframes(`\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`);\n\nconst modalOverlayStyles = style({\n  ...colorScheme(),\n  position: 'fixed',\n  inset: 0,\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  animation: {\n    isEntering: fade,\n    isExiting: fade\n  },\n  animationDuration: {\n    isEntering: 250,\n    isExiting: 130\n  },\n  animationDirection: {\n    isEntering: 'normal',\n    isExiting: 'reverse'\n  }\n});\n\nfunction Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let modalRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  return (\n    <ModalOverlay\n      {...props}\n      className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>\n      <RACModal\n        {...props}\n        ref={modalRef}\n        className={renderProps => style({\n          display: 'flex',\n          flexDirection: 'column',\n          borderRadius: {\n            default: 'xl',\n            size: {\n              fullscreenTakeover: 'none'\n            }\n          },\n          width: {\n            size: {\n              // Copied from designs, not sure if correct.\n              S: 336,\n              M: 416,\n              L: 576,\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          height: {\n            size: {\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          maxWidth: {\n            default: '[90vw]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          maxHeight: {\n            default: '[90vh]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          '--s2-container-bg': {\n            type: 'backgroundColor',\n            value: 'layer-2'\n          },\n          backgroundColor: '--s2-container-bg',\n          animation: {\n            isEntering: fadeAndSlide,\n            isExiting: fade\n          },\n          animationDuration: {\n            isEntering: 250,\n            isExiting: 130\n          },\n          animationDelay: {\n            isEntering: 160,\n            isExiting: 0\n          },\n          animationDirection: {\n            isEntering: 'normal',\n            isExiting: 'reverse'\n          },\n          animationFillMode: 'both',\n          // Transparent outline for WHCM.\n          outlineStyle: 'solid',\n          outlineWidth: 1,\n          outlineColor: 'transparent'\n        })({...renderProps, size: props.size})} />\n    </ModalOverlay>\n  );\n}\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nlet _Modal = forwardRef(Modal);\nexport {_Modal as Modal};\n"],"names":[],"version":3,"file":"Modal.css.map"}
+{"mappings":"AC6B2B;EAAA;;;;EAAA;;;;;;EAAA;IAAA;;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4CO;;;;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;;;;;AA5CP;;AA4CO","sources":["be2ce4448c91abb5","packages/@react-spectrum/s2/src/Modal.tsx"],"sourcesContent":["@import \"003d01b6d2f33501\";\n@import \"15edcb25b251bc58\";\n","/*\n * Copyright 2024 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 {colorScheme} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ModalProps extends ModalOverlayProps {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst modalOverlayStyles = style({\n  ...colorScheme(),\n  position: 'fixed',\n  inset: 0,\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  opacity: {\n    isEntering: 0,\n    isExiting: 0\n  },\n  transition: 'opacity',\n  transitionDuration: {\n    default: 250,\n    isExiting: 130\n  }\n});\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nexport const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let modalRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  return (\n    <ModalOverlay\n      {...props}\n      className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>\n      <RACModal\n        {...props}\n        ref={modalRef}\n        className={renderProps => style({\n          display: 'flex',\n          flexDirection: 'column',\n          borderRadius: {\n            default: 'xl',\n            size: {\n              fullscreenTakeover: 'none'\n            }\n          },\n          width: {\n            size: {\n              // Copied from designs, not sure if correct.\n              S: 336,\n              M: 416,\n              L: 576,\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          height: {\n            size: {\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          maxWidth: {\n            default: '[90vw]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          maxHeight: {\n            default: '[90vh]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          '--s2-container-bg': {\n            type: 'backgroundColor',\n            value: 'layer-2'\n          },\n          backgroundColor: '--s2-container-bg',\n          opacity: {\n            isEntering: 0,\n            isExiting: 0\n          },\n          translateY: {\n            isEntering: 20\n          },\n          transition: '[opacity, translate]',\n          transitionDuration: {\n            default: 250,\n            isExiting: 130\n          },\n          transitionDelay: {\n            default: 160,\n            isExiting: 0\n          },\n          // Transparent outline for WHCM.\n          outlineStyle: 'solid',\n          outlineWidth: 1,\n          outlineColor: 'transparent'\n        })({...renderProps, size: props.size})} />\n    </ModalOverlay>\n  );\n});\n"],"names":[],"version":3,"file":"Modal.css.map"}

package/dist/Modal.mjs

@@ -1,7 +1,7 @@
 import "./Modal.css";
 import {ColorSchemeContext as $9affbfa4e13b9582$export$374e0245597d19a3} from "./Provider.mjs";
 import {jsx as $fdAcL$jsx} from "react/jsx-runtime";
-import {useContext as $fdAcL$useContext, useCallback as $fdAcL$useCallback, forwardRef as $fdAcL$forwardRef} from "react";
+import {forwardRef as $fdAcL$forwardRef, useContext as $fdAcL$useContext, useCallback as $fdAcL$useCallback} from "react";
 import {useLocale as $fdAcL$useLocale, ModalOverlay as $fdAcL$ModalOverlay, Modal as $fdAcL$Modal} from "react-aria-components";
 import {useDOMRef as $fdAcL$useDOMRef} from "@react-spectrum/utils";
 
@@ -20,35 +20,31 @@ import {useDOMRef as $fdAcL$useDOMRef} from "@react-spectrum/utils";
 
 
 
-const $c46d159bd615e407$var$fade = "-_1llqja1";
-const $c46d159bd615e407$var$fadeAndSlide = "-_1mhijd";
 const $c46d159bd615e407$var$modalOverlayStyles = function anonymous(props) {
     let rules = " .";
-    if (props.colorScheme === "dark") rules += ' _Ab';
-    else if (props.colorScheme === "light") rules += ' _Aa';
-    else if (props.colorScheme === "light dark") rules += ' _Ac';
-    else rules += ' _A-10jn6wd';
-    rules += ' Ub';
-    rules += ' Xa';
-    rules += ' Za';
-    rules += ' Va';
+    if (props.colorScheme === "dark") rules += ' _Bb';
+    else if (props.colorScheme === "light") rules += ' _Ba';
+    else if (props.colorScheme === "light dark") rules += ' _Bc';
+    else rules += ' _B-10jn6wd';
+    rules += ' Vb';
+    rules += ' Ya';
+    rules += ' _aa';
     rules += ' Wa';
-    rules += ' __Fa';
+    rules += ' Xa';
+    rules += ' __Ga';
     rules += ' b_____o';
-    rules += ' _Zd';
-    rules += ' _1c';
-    rules += ' _2d';
-    if (props.isExiting) rules += ' _S-1nys8p3';
-    else if (props.isEntering) rules += ' _S-1nys8p3';
-    if (props.isExiting) rules += ' _T-375x5l';
-    else if (props.isEntering) rules += ' _T-375y1o';
-    if (props.isExiting) rules += ' _Ya';
-    else if (props.isEntering) rules += ' _Ya';
-    if (props.isExiting) rules += ' _Vb';
-    else if (props.isEntering) rules += ' _Va';
+    rules += ' _0d';
+    rules += ' _2c';
+    rules += ' _3d';
+    if (props.isExiting) rules += ' _L-3t1x';
+    else if (props.isEntering) rules += ' _L-3t1x';
+    rules += ' _Pc';
+    if (props.isExiting) rules += ' _R-375x5l';
+    else rules += ' _R-375y1o';
+    rules += ' _Sa';
     return rules;
 };
-function $c46d159bd615e407$var$Modal(props1, ref) {
+const $c46d159bd615e407$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $fdAcL$forwardRef)(function Modal(props1, ref) {
     let domRef = (0, $fdAcL$useDOMRef)(ref);
     let colorScheme = (0, $fdAcL$useContext)((0, $9affbfa4e13b9582$export$374e0245597d19a3));
     let { locale: locale, direction: direction } = (0, $fdAcL$useLocale)();
@@ -75,16 +71,16 @@ function $c46d159bd615e407$var$Modal(props1, ref) {
             ref: modalRef,
             className: (renderProps)=>(function anonymous(props) {
                     let rules = " .";
-                    rules += ' _Zd';
-                    rules += ' _6b';
-                    if (props.size === "fullscreenTakeover") rules += ' _va';
-                    else rules += ' _ve';
+                    rules += ' _0d';
+                    rules += ' _7b';
                     if (props.size === "fullscreenTakeover") rules += ' _wa';
                     else rules += ' _we';
                     if (props.size === "fullscreenTakeover") rules += ' _xa';
                     else rules += ' _xe';
                     if (props.size === "fullscreenTakeover") rules += ' _ya';
                     else rules += ' _ye';
+                    if (props.size === "fullscreenTakeover") rules += ' _za';
+                    else rules += ' _ze';
                     if (props.size === "fullscreenTakeover") rules += ' lb';
                     else if (props.size === "fullscreen") rules += ' l-tp2nko';
                     else if (props.size === "L") rules += ' l_________G';
@@ -98,21 +94,19 @@ function $c46d159bd615e407$var$Modal(props1, ref) {
                     if (props.size === "fullscreenTakeover") rules += ' po';
                     else if (props.size === "fullscreen") rules += ' po';
                     else rules += ' p-yjhhbg';
-                    rules += ' -_1de2x0q_b-______k';
+                    rules += ' -_1de2x0q_b-______x';
                     rules += ' b-1de2x0q';
-                    if (props.isExiting) rules += ' _S-1nys8p3';
-                    else if (props.isEntering) rules += ' _S-3zirke';
-                    if (props.isExiting) rules += ' _T-375x5l';
-                    else if (props.isEntering) rules += ' _T-375y1o';
-                    if (props.isExiting) rules += ' _Ya';
-                    else if (props.isEntering) rules += ' _Ya';
-                    if (props.isExiting) rules += ' _U-3t1x';
-                    else if (props.isEntering) rules += ' _U-375x8c';
-                    if (props.isExiting) rules += ' _Vb';
-                    else if (props.isEntering) rules += ' _Va';
-                    rules += ' _Wd';
-                    rules += ' _Lb';
-                    rules += ' _Nb';
+                    if (props.isExiting) rules += ' _L-3t1x';
+                    else if (props.isEntering) rules += ' _L-3t1x';
+                    if (props.isEntering) rules += ' Qg';
+                    rules += ' _P-19n5zko';
+                    if (props.isExiting) rules += ' _R-375x5l';
+                    else rules += ' _R-375y1o';
+                    rules += ' _Sa';
+                    if (props.isExiting) rules += ' _Q-3t1x';
+                    else rules += ' _Q-375x8c';
+                    rules += ' _Mb';
+                    rules += ' _Ob';
                     rules += ' da';
                     return rules;
                 })({
@@ -121,10 +115,7 @@ function $c46d159bd615e407$var$Modal(props1, ref) {
                 })
         })
     });
-}
-/**
- * A modal is an overlay element which blocks interaction with elements outside it.
- */ let $c46d159bd615e407$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $fdAcL$forwardRef)($c46d159bd615e407$var$Modal);
+});
 
 
 export {$c46d159bd615e407$export$2b77a92f1a5ad772 as Modal};

package/dist/Modal.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAoBD,MAAM;AAUN,MAAM;AAYN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBN,SAAS,4BAAM,MAAiB,EAAE,GAA2B;IAC3D,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAElC,0DAA0D;IAC1D,IAAI,WAAW,CAAA,GAAA,kBAAU,EAAE,CAAC;QACzB,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,qBACE,gBAAC,CAAA,GAAA,mBAAW;QACT,GAAG,MAAK;QACT,WAAW,CAAA,cAAe,yCAAmB;gBAAC,GAAG,WAAW;6BAAE;YAAW;kBACzE,cAAA,gBAAC,CAAA,GAAA,YAAO;YACL,GAAG,MAAK;YACT,KAAK;YACL,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAiEvB;oBAAC,GAAG,WAAW;oBAAE,MAAM,OAAM,IAAI;gBAAA;;;AAG5C;AAEA;;CAEC,GACD,IAAI,0DAAS,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Modal.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {colorScheme} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ModalProps extends ModalOverlayProps {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst fade = keyframes(`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`);\n\nconst fadeAndSlide = keyframes(`\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`);\n\nconst modalOverlayStyles = style({\n  ...colorScheme(),\n  position: 'fixed',\n  inset: 0,\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  animation: {\n    isEntering: fade,\n    isExiting: fade\n  },\n  animationDuration: {\n    isEntering: 250,\n    isExiting: 130\n  },\n  animationDirection: {\n    isEntering: 'normal',\n    isExiting: 'reverse'\n  }\n});\n\nfunction Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let modalRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  return (\n    <ModalOverlay\n      {...props}\n      className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>\n      <RACModal\n        {...props}\n        ref={modalRef}\n        className={renderProps => style({\n          display: 'flex',\n          flexDirection: 'column',\n          borderRadius: {\n            default: 'xl',\n            size: {\n              fullscreenTakeover: 'none'\n            }\n          },\n          width: {\n            size: {\n              // Copied from designs, not sure if correct.\n              S: 336,\n              M: 416,\n              L: 576,\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          height: {\n            size: {\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          maxWidth: {\n            default: '[90vw]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          maxHeight: {\n            default: '[90vh]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          '--s2-container-bg': {\n            type: 'backgroundColor',\n            value: 'layer-2'\n          },\n          backgroundColor: '--s2-container-bg',\n          animation: {\n            isEntering: fadeAndSlide,\n            isExiting: fade\n          },\n          animationDuration: {\n            isEntering: 250,\n            isExiting: 130\n          },\n          animationDelay: {\n            isEntering: 160,\n            isExiting: 0\n          },\n          animationDirection: {\n            isEntering: 'normal',\n            isExiting: 'reverse'\n          },\n          animationFillMode: 'both',\n          // Transparent outline for WHCM.\n          outlineStyle: 'solid',\n          outlineWidth: 1,\n          outlineColor: 'transparent'\n        })({...renderProps, size: props.size})} />\n    </ModalOverlay>\n  );\n}\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nlet _Modal = forwardRef(Modal);\nexport {_Modal as Modal};\n"],"names":[],"version":3,"file":"Modal.mjs.map"}
+{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmBD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;AAuBC,MAAM,0DAAQ,CAAA,GAAA,iBAAS,EAAE,SAAS,MAAM,MAAiB,EAAE,GAA2B;IAC3F,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAElC,0DAA0D;IAC1D,IAAI,WAAW,CAAA,GAAA,kBAAU,EAAE,CAAC;QACzB,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,qBACE,gBAAC,CAAA,GAAA,mBAAW;QACT,GAAG,MAAK;QACT,WAAW,CAAA,cAAe,yCAAmB;gBAAC,GAAG,WAAW;6BAAE;YAAW;kBACzE,cAAA,gBAAC,CAAA,GAAA,YAAO;YACL,GAAG,MAAK;YACT,KAAK;YACL,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAgEvB;oBAAC,GAAG,WAAW;oBAAE,MAAM,OAAM,IAAI;gBAAA;;;AAG5C","sources":["packages/@react-spectrum/s2/src/Modal.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {colorScheme} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ModalProps extends ModalOverlayProps {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst modalOverlayStyles = style({\n  ...colorScheme(),\n  position: 'fixed',\n  inset: 0,\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  opacity: {\n    isEntering: 0,\n    isExiting: 0\n  },\n  transition: 'opacity',\n  transitionDuration: {\n    default: 250,\n    isExiting: 130\n  }\n});\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nexport const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let modalRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  return (\n    <ModalOverlay\n      {...props}\n      className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>\n      <RACModal\n        {...props}\n        ref={modalRef}\n        className={renderProps => style({\n          display: 'flex',\n          flexDirection: 'column',\n          borderRadius: {\n            default: 'xl',\n            size: {\n              fullscreenTakeover: 'none'\n            }\n          },\n          width: {\n            size: {\n              // Copied from designs, not sure if correct.\n              S: 336,\n              M: 416,\n              L: 576,\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          height: {\n            size: {\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          maxWidth: {\n            default: '[90vw]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          maxHeight: {\n            default: '[90vh]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          '--s2-container-bg': {\n            type: 'backgroundColor',\n            value: 'layer-2'\n          },\n          backgroundColor: '--s2-container-bg',\n          opacity: {\n            isEntering: 0,\n            isExiting: 0\n          },\n          translateY: {\n            isEntering: 20\n          },\n          transition: '[opacity, translate]',\n          transitionDuration: {\n            default: 250,\n            isExiting: 130\n          },\n          transitionDelay: {\n            default: 160,\n            isExiting: 0\n          },\n          // Transparent outline for WHCM.\n          outlineStyle: 'solid',\n          outlineWidth: 1,\n          outlineColor: 'transparent'\n        })({...renderProps, size: props.size})} />\n    </ModalOverlay>\n  );\n});\n"],"names":[],"version":3,"file":"Modal.mjs.map"}