@react-spectrum/s2 1.3.0 → 1.3.1

package/dist/private/Modal.cjs

@@ -34,6 +34,18 @@ const $8e678305a8c10028$var$modalOverlayStyles = function anonymous(props) {
     else if (props.colorScheme === "light") rules += ' -ICUGx-_pb13';
     else if (props.colorScheme === "light dark") rules += ' -ICUGx-_pc13';
     rules += ' _pK8eoyd13';
+    if (props.colorScheme === "dark") rules += ' -NvXmrd-_ZLmU13';
+    else if (props.colorScheme === "light") rules += ' -NvXmrd-_ZN8Gi4c13';
+    else if (props.colorScheme === "light dark") {
+        rules += ' -NvXmrd-_ZN8Gi4c13';
+        rules += ' -NvXmrd-D1v0V_ZLmU13';
+    }
+    if (props.colorScheme === "dark") rules += ' -j9blY-_ZN8Gi4c13';
+    else if (props.colorScheme === "light") rules += ' -j9blY-_ZLmU13';
+    else if (props.colorScheme === "light dark") {
+        rules += ' -j9blY-_ZLmU13';
+        rules += ' -j9blY-D1v0V_ZN8Gi4c13';
+    }
     rules += ' _Pa13';
     rules += ' Wr13';
     rules += ' _Er13';

package/dist/private/Modal.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAmBD,MAAM;;;;;;;;;;;;;;;;;;;;;AAoBN,MAAM;;;;;;;;;;;;;AAmBC,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,sCAAQ;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,4CAAW;QACT,GAAG,MAAK;QACT,WAAW,CAAA,cAAe,yCAAmB;gBAAC,GAAG,WAAW;6BAAE;YAAW;kBACzE,cAAA,gCAAC;YAAI,WAAW,mCAAa;gBAAC,MAAM,OAAM,IAAI;YAAA;YAAI,OAAO;gBAAC,eAAe;YAAM;sBAC7E,cAAA,gCAAC,CAAA,GAAA,qCAAO;gBACL,GAAG,MAAK;gBACT,KAAK;gBACL,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAuEvB;wBAAC,GAAG,WAAW;wBAAE,MAAM,OAAM,IAAI;oBAAA;;;;AAI9C","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 {ColorSchemeContext} from './Provider';\nimport {DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal} from 'react-aria-components/Modal';\nimport {setColorScheme, style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\n\ninterface ModalProps extends Omit<ModalOverlayProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes> {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst modalOverlayStyles = style({\n  ...setColorScheme(),\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  width: 'full',\n  height: '--page-height',\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  opacity: {\n    isEntering: 0,\n    isExiting: 0\n  },\n  transition: 'opacity',\n  transitionDuration: {\n    default: 250,\n    isExiting: 130\n  }\n});\n\nconst modalWrapper = style({\n  position: 'sticky',\n  top: 0,\n  left: 0,\n  width: 'full',\n  height: '--visual-viewport-height',\n  display: 'flex',\n  alignItems: {\n    default: 'center',\n    size: {\n      fullscreenTakeover: 'start'\n    }\n  },\n  justifyContent: 'center'\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      <div className={modalWrapper({size: props.size})} style={{containerType: 'size'} as any}>\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: 400,\n                M: 480,\n                L: 640,\n                XL: 960,\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: '90%',\n              size: {\n                fullscreen: 'none',\n                fullscreenTakeover: 'none'\n              }\n            },\n            paddingBottom: {\n              size: {\n                // Extend background behind the iOS Safari toolbar and keyboard.\n                fullscreenTakeover: '[100vh]'\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      </div>\n    </ModalOverlay>\n  );\n});\n"],"names":[],"version":3,"file":"Modal.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAmBD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBN,MAAM;;;;;;;;;;;;;AAmBC,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,sCAAQ;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,4CAAW;QACT,GAAG,MAAK;QACT,WAAW,CAAA,cAAe,yCAAmB;gBAAC,GAAG,WAAW;6BAAE;YAAW;kBACzE,cAAA,gCAAC;YAAI,WAAW,mCAAa;gBAAC,MAAM,OAAM,IAAI;YAAA;YAAI,OAAO;gBAAC,eAAe;YAAM;sBAC7E,cAAA,gCAAC,CAAA,GAAA,qCAAO;gBACL,GAAG,MAAK;gBACT,KAAK;gBACL,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAuEvB;wBAAC,GAAG,WAAW;wBAAE,MAAM,OAAM,IAAI;oBAAA;;;;AAI9C","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 {ColorSchemeContext} from './Provider';\nimport {DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal} from 'react-aria-components/Modal';\nimport {setColorScheme, style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\n\ninterface ModalProps extends Omit<ModalOverlayProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes> {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst modalOverlayStyles = style({\n  ...setColorScheme(),\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  width: 'full',\n  height: '--page-height',\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  opacity: {\n    isEntering: 0,\n    isExiting: 0\n  },\n  transition: 'opacity',\n  transitionDuration: {\n    default: 250,\n    isExiting: 130\n  }\n});\n\nconst modalWrapper = style({\n  position: 'sticky',\n  top: 0,\n  left: 0,\n  width: 'full',\n  height: '--visual-viewport-height',\n  display: 'flex',\n  alignItems: {\n    default: 'center',\n    size: {\n      fullscreenTakeover: 'start'\n    }\n  },\n  justifyContent: 'center'\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      <div className={modalWrapper({size: props.size})} style={{containerType: 'size'} as any}>\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: 400,\n                M: 480,\n                L: 640,\n                XL: 960,\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: '90%',\n              size: {\n                fullscreen: 'none',\n                fullscreenTakeover: 'none'\n              }\n            },\n            paddingBottom: {\n              size: {\n                // Extend background behind the iOS Safari toolbar and keyboard.\n                fullscreenTakeover: '[100vh]'\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      </div>\n    </ModalOverlay>\n  );\n});\n"],"names":[],"version":3,"file":"Modal.cjs.map"}

package/dist/private/Modal.css

@@ -15,6 +15,22 @@
     color-scheme: var(--s2-color-scheme);
   }
 
+  .-NvXmrd-_ZN8Gi4c13 {
+    --lightningcss-light: initial;
+  }
+
+  .-NvXmrd-_ZLmU13 {
+    --lightningcss-light:  ;
+  }
+
+  .-j9blY-_ZLmU13 {
+    --lightningcss-dark:  ;
+  }
+
+  .-j9blY-_ZN8Gi4c13 {
+    --lightningcss-dark: initial;
+  }
+
   ._Pa13 {
     position: absolute;
   }
@@ -212,4 +228,18 @@
     outline-color: #0000;
   }
 }
+
+@layer _.b;
+
+@layer _.b.D1v0V {
+  @media (prefers-color-scheme: dark) {
+    .-NvXmrd-D1v0V_ZLmU13 {
+      --lightningcss-light:  ;
+    }
+
+    .-j9blY-D1v0V_ZN8Gi4c13 {
+      --lightningcss-dark: initial;
+    }
+  }
+}
 /*# sourceMappingURL=Modal.css.map */

package/dist/private/Modal.css.map

@@ -1 +1 @@
-{"mappings":"AC6B2B;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoBN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyCe;;;;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;;;;EAAA","sources":["be2ce4448c91abb5","packages/@react-spectrum/s2/src/Modal.tsx"],"sourcesContent":["@import \"003d01b6d2f33501\";\n@import \"15edcb25b251bc58\";\n@import \"1ef8b667afb08263\";\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 {ColorSchemeContext} from './Provider';\nimport {DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal} from 'react-aria-components/Modal';\nimport {setColorScheme, style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\n\ninterface ModalProps extends Omit<ModalOverlayProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes> {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst modalOverlayStyles = style({\n  ...setColorScheme(),\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  width: 'full',\n  height: '--page-height',\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  opacity: {\n    isEntering: 0,\n    isExiting: 0\n  },\n  transition: 'opacity',\n  transitionDuration: {\n    default: 250,\n    isExiting: 130\n  }\n});\n\nconst modalWrapper = style({\n  position: 'sticky',\n  top: 0,\n  left: 0,\n  width: 'full',\n  height: '--visual-viewport-height',\n  display: 'flex',\n  alignItems: {\n    default: 'center',\n    size: {\n      fullscreenTakeover: 'start'\n    }\n  },\n  justifyContent: 'center'\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      <div className={modalWrapper({size: props.size})} style={{containerType: 'size'} as any}>\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: 400,\n                M: 480,\n                L: 640,\n                XL: 960,\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: '90%',\n              size: {\n                fullscreen: 'none',\n                fullscreenTakeover: 'none'\n              }\n            },\n            paddingBottom: {\n              size: {\n                // Extend background behind the iOS Safari toolbar and keyboard.\n                fullscreenTakeover: '[100vh]'\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      </div>\n    </ModalOverlay>\n  );\n});\n"],"names":[],"version":3,"file":"Modal.css.map"}
+{"mappings":"AC6B2B;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoBN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyCe;;;;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;;;;EAAA;;;;;AA7DT;;AAAA;EAAA;IAAA;;;;IAAA","sources":["be2ce4448c91abb5","packages/@react-spectrum/s2/src/Modal.tsx"],"sourcesContent":["@import \"003d01b6d2f33501\";\n@import \"15edcb25b251bc58\";\n@import \"1ef8b667afb08263\";\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 {ColorSchemeContext} from './Provider';\nimport {DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal} from 'react-aria-components/Modal';\nimport {setColorScheme, style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\n\ninterface ModalProps extends Omit<ModalOverlayProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes> {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst modalOverlayStyles = style({\n  ...setColorScheme(),\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  width: 'full',\n  height: '--page-height',\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  opacity: {\n    isEntering: 0,\n    isExiting: 0\n  },\n  transition: 'opacity',\n  transitionDuration: {\n    default: 250,\n    isExiting: 130\n  }\n});\n\nconst modalWrapper = style({\n  position: 'sticky',\n  top: 0,\n  left: 0,\n  width: 'full',\n  height: '--visual-viewport-height',\n  display: 'flex',\n  alignItems: {\n    default: 'center',\n    size: {\n      fullscreenTakeover: 'start'\n    }\n  },\n  justifyContent: 'center'\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      <div className={modalWrapper({size: props.size})} style={{containerType: 'size'} as any}>\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: 400,\n                M: 480,\n                L: 640,\n                XL: 960,\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: '90%',\n              size: {\n                fullscreen: 'none',\n                fullscreenTakeover: 'none'\n              }\n            },\n            paddingBottom: {\n              size: {\n                // Extend background behind the iOS Safari toolbar and keyboard.\n                fullscreenTakeover: '[100vh]'\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      </div>\n    </ModalOverlay>\n  );\n});\n"],"names":[],"version":3,"file":"Modal.css.map"}

package/dist/private/Modal.mjs

@@ -28,6 +28,18 @@ const $c46d159bd615e407$var$modalOverlayStyles = function anonymous(props) {
     else if (props.colorScheme === "light") rules += ' -ICUGx-_pb13';
     else if (props.colorScheme === "light dark") rules += ' -ICUGx-_pc13';
     rules += ' _pK8eoyd13';
+    if (props.colorScheme === "dark") rules += ' -NvXmrd-_ZLmU13';
+    else if (props.colorScheme === "light") rules += ' -NvXmrd-_ZN8Gi4c13';
+    else if (props.colorScheme === "light dark") {
+        rules += ' -NvXmrd-_ZN8Gi4c13';
+        rules += ' -NvXmrd-D1v0V_ZLmU13';
+    }
+    if (props.colorScheme === "dark") rules += ' -j9blY-_ZN8Gi4c13';
+    else if (props.colorScheme === "light") rules += ' -j9blY-_ZLmU13';
+    else if (props.colorScheme === "light dark") {
+        rules += ' -j9blY-_ZLmU13';
+        rules += ' -j9blY-D1v0V_ZN8Gi4c13';
+    }
     rules += ' _Pa13';
     rules += ' Wr13';
     rules += ' _Er13';

package/dist/private/Modal.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAmBD,MAAM;;;;;;;;;;;;;;;;;;;;;AAoBN,MAAM;;;;;;;;;;;;;AAmBC,MAAM,0DAAQ,CAAA,GAAA,iBAAS,EAAE,SAAS,MAAM,MAAiB,EAAE,GAA2B;IAC3F,IAAI,SAAS,CAAA,GAAA,yCAAQ,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;YAAI,WAAW,mCAAa;gBAAC,MAAM,OAAM,IAAI;YAAA;YAAI,OAAO;gBAAC,eAAe;YAAM;sBAC7E,cAAA,gBAAC,CAAA,GAAA,YAAO;gBACL,GAAG,MAAK;gBACT,KAAK;gBACL,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAuEvB;wBAAC,GAAG,WAAW;wBAAE,MAAM,OAAM,IAAI;oBAAA;;;;AAI9C","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 {ColorSchemeContext} from './Provider';\nimport {DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal} from 'react-aria-components/Modal';\nimport {setColorScheme, style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\n\ninterface ModalProps extends Omit<ModalOverlayProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes> {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst modalOverlayStyles = style({\n  ...setColorScheme(),\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  width: 'full',\n  height: '--page-height',\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  opacity: {\n    isEntering: 0,\n    isExiting: 0\n  },\n  transition: 'opacity',\n  transitionDuration: {\n    default: 250,\n    isExiting: 130\n  }\n});\n\nconst modalWrapper = style({\n  position: 'sticky',\n  top: 0,\n  left: 0,\n  width: 'full',\n  height: '--visual-viewport-height',\n  display: 'flex',\n  alignItems: {\n    default: 'center',\n    size: {\n      fullscreenTakeover: 'start'\n    }\n  },\n  justifyContent: 'center'\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      <div className={modalWrapper({size: props.size})} style={{containerType: 'size'} as any}>\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: 400,\n                M: 480,\n                L: 640,\n                XL: 960,\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: '90%',\n              size: {\n                fullscreen: 'none',\n                fullscreenTakeover: 'none'\n              }\n            },\n            paddingBottom: {\n              size: {\n                // Extend background behind the iOS Safari toolbar and keyboard.\n                fullscreenTakeover: '[100vh]'\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      </div>\n    </ModalOverlay>\n  );\n});\n"],"names":[],"version":3,"file":"Modal.mjs.map"}
+{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAmBD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBN,MAAM;;;;;;;;;;;;;AAmBC,MAAM,0DAAQ,CAAA,GAAA,iBAAS,EAAE,SAAS,MAAM,MAAiB,EAAE,GAA2B;IAC3F,IAAI,SAAS,CAAA,GAAA,yCAAQ,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;YAAI,WAAW,mCAAa;gBAAC,MAAM,OAAM,IAAI;YAAA;YAAI,OAAO;gBAAC,eAAe;YAAM;sBAC7E,cAAA,gBAAC,CAAA,GAAA,YAAO;gBACL,GAAG,MAAK;gBACT,KAAK;gBACL,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAuEvB;wBAAC,GAAG,WAAW;wBAAE,MAAM,OAAM,IAAI;oBAAA;;;;AAI9C","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 {ColorSchemeContext} from './Provider';\nimport {DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal} from 'react-aria-components/Modal';\nimport {setColorScheme, style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\n\ninterface ModalProps extends Omit<ModalOverlayProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes> {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst modalOverlayStyles = style({\n  ...setColorScheme(),\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  width: 'full',\n  height: '--page-height',\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  opacity: {\n    isEntering: 0,\n    isExiting: 0\n  },\n  transition: 'opacity',\n  transitionDuration: {\n    default: 250,\n    isExiting: 130\n  }\n});\n\nconst modalWrapper = style({\n  position: 'sticky',\n  top: 0,\n  left: 0,\n  width: 'full',\n  height: '--visual-viewport-height',\n  display: 'flex',\n  alignItems: {\n    default: 'center',\n    size: {\n      fullscreenTakeover: 'start'\n    }\n  },\n  justifyContent: 'center'\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      <div className={modalWrapper({size: props.size})} style={{containerType: 'size'} as any}>\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: 400,\n                M: 480,\n                L: 640,\n                XL: 960,\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: '90%',\n              size: {\n                fullscreen: 'none',\n                fullscreenTakeover: 'none'\n              }\n            },\n            paddingBottom: {\n              size: {\n                // Extend background behind the iOS Safari toolbar and keyboard.\n                fullscreenTakeover: '[100vh]'\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      </div>\n    </ModalOverlay>\n  );\n});\n"],"names":[],"version":3,"file":"Modal.mjs.map"}

package/dist/private/Popover.cjs

@@ -54,6 +54,18 @@ let $493371ef39bf7a55$var$popover = function anonymous(props, overrides) {
     else if (props.colorScheme === "light") rules += ' -ICUGx-_pb13';
     else if (props.colorScheme === "light dark") rules += ' -ICUGx-_pc13';
     rules += ' _pK8eoyd13';
+    if (props.colorScheme === "dark") rules += ' -NvXmrd-_ZLmU13';
+    else if (props.colorScheme === "light") rules += ' -NvXmrd-_ZN8Gi4c13';
+    else if (props.colorScheme === "light dark") {
+        rules += ' -NvXmrd-_ZN8Gi4c13';
+        rules += ' -NvXmrd-D1v0V_ZLmU13';
+    }
+    if (props.colorScheme === "dark") rules += ' -j9blY-_ZN8Gi4c13';
+    else if (props.colorScheme === "light") rules += ' -j9blY-_ZLmU13';
+    else if (props.colorScheme === "light dark") {
+        rules += ' -j9blY-_ZLmU13';
+        rules += ' -j9blY-D1v0V_ZN8Gi4c13';
+    }
     rules += ' -Ovbhqd-g_g13';
     rules += ' -Ovbhqd-lga13';
     rules += ' gEzkoQe13';

package/dist/private/Popover.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Popover.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 {Popover as AriaPopover, PopoverProps as AriaPopoverProps, OverlayArrow} from 'react-aria-components/Popover';\nimport {ColorSchemeContext} from './Provider';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {createContext, ForwardedRef, forwardRef, ReactNode, useCallback, useContext, useMemo} from 'react';\nimport {DialogProps, OverlayTriggerStateContext} from 'react-aria-components/Dialog';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {getAllowedOverrides, heightProperties, UnsafeStyles, widthProperties} from './style-utils' with {type: 'macro'};\nimport {lightDark, setColorScheme, style} from '../style' with {type: 'macro'};\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps,\n  'arrowSize' |\n  'isNonModal' |\n  'arrowBoundaryOffset' |\n  'isKeyboardDismissDisabled' |\n  'shouldCloseOnInteractOutside' |\n  'shouldUpdatePosition' |\n  'style' |\n  'className' |\n  'render' |\n  keyof GlobalDOMAttributes\n> {\n  /**\n   * The styles of the popover.\n   */\n  styles?: StyleString,\n  /**\n   * Whether a popover's arrow should be hidden.\n   *\n   * @default false\n   */\n  hideArrow?: boolean,\n  /**\n   * The size of the Popover. If not specified, the popover fits its contents.\n   */\n  size?: 'S' | 'M' | 'L'\n  /** The type of overlay that should be rendered when on a mobile device. */\n  // mobileType?: 'modal' | 'fullscreen' | 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style({\n  ...setColorScheme(),\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: {\n      default: 'layer-2',\n      forcedColors: 'Background'\n    }\n  },\n  backgroundColor: '--s2-container-bg',\n  borderRadius: 'lg',\n  filter: {\n    isArrowShown: 'elevated'\n  },\n  // Use box-shadow instead of filter when an arrow is not shown.\n  // This fixes the shadow stacking problem with submenus.\n  boxShadow: {\n    default: 'elevated',\n    isArrowShown: 'none'\n  },\n  outlineStyle: 'solid',\n  outlineWidth: 1,\n  outlineColor: {\n    default: lightDark('transparent-white-25', 'gray-200'),\n    forcedColors: 'ButtonBorder'\n  },\n  width: {\n    size: {\n      // Copied from designs, not sure if correct.\n      S: 336,\n      M: 416,\n      L: 576\n    }\n  },\n  // Don't be larger than full screen minus 2 * containerPadding\n  maxWidth: 'calc(100vw - 24px)',\n  boxSizing: 'border-box',\n  display: 'flex',\n  opacity: {\n    isEntering: 0,\n    isExiting: 0\n  },\n  translateY: {\n    placement: {\n      top: {\n        isEntering: 4,\n        isExiting: 4\n      },\n      bottom: {\n        isEntering: -4,\n        isExiting: -4\n      }\n    },\n    isSubmenu: 0\n  },\n  translateX: {\n    placement: {\n      left: {\n        isEntering: 4,\n        isExiting: 4\n      },\n      right: {\n        isEntering: -4,\n        isExiting: -4\n      }\n    },\n    isSubmenu: 0\n  },\n  transition: '[opacity, translate]',\n  transitionDuration: 200,\n  transitionTimingFunction: {\n    isExiting: 'in'\n  },\n  isolation: 'isolate',\n  pointerEvents: {\n    isExiting: 'none'\n  }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n  display: 'block',\n  fill: '--s2-container-bg',\n  width: 18,\n  height: 9,\n  rotate: {\n    default: 180,\n    placement: {\n      top: 0,\n      bottom: 180,\n      left: -90,\n      right: 90\n    }\n  },\n  translateX: {\n    placement: {\n      left: '-25%',\n      right: '25%'\n    }\n  },\n  strokeWidth: 1,\n  stroke: {\n    default: lightDark('transparent-white-25', 'gray-200'),\n    forcedColors: 'ButtonBorder'\n  }\n});\n\nexport const PopoverContext = createContext<ContextValue<PopoverProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InPopoverContext = createContext(false);\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: ForwardedRef<HTMLDivElement | null>) {\n  let {\n    hideArrow = false,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    size\n  } = props;\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 popoverRef = useCallback((el: HTMLDivElement) => {\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction]);\n  // Memoed so it doesn't break ComboBox/Picker scrolling\n  let mergedRef = useMemo(() => mergeRefs(popoverRef, ref), [ref, popoverRef]);\n\n  // On small devices, show a modal (or eventually a tray) instead of a popover.\n  // TODO: reverted this until we have trays.\n  // let isMobile = useIsMobileDevice();\n  // if (isMobile && process.env.NODE_ENV !== 'test') {\n  //   let mappedChildren = typeof children === 'function'\n  //     ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n  //     : children;\n\n  //   return (\n  //     <Modal size={size} isDismissable>\n  //       {composeRenderProps(mappedChildren, (children, {state}) => (\n  //         <>\n  //           {children}\n  //           {/* Add additional dismiss button at the end to match popovers. */}\n  //           <DismissButton onDismiss={state.close} />\n  //         </>\n  //       ))}\n  //     </Modal>\n  //   );\n  // }\n\n  // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n  // containerPadding not working as expected\n  return (\n    <AriaPopover\n      {...props}\n      offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n      ref={mergedRef}\n      style={{\n        ...UNSAFE_style,\n        // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n        zIndex: undefined\n      }}\n      className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n      {composeRenderProps(props.children, (children, renderProps) => (\n        <>\n          {!hideArrow && (\n            <OverlayArrow className=\"\">\n              <svg viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n                <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n              </svg>\n            </OverlayArrow>\n          )}\n          <InPopoverContext.Provider value>\n            {children}\n          </InPopoverContext.Provider>\n        </>\n      ))}\n    </AriaPopover>\n  );\n});\n\ntype PopoverStylesProp = StyleString<((typeof widthProperties)[number] | (typeof heightProperties)[number])>;\nexport interface PopoverDialogProps extends Pick<PopoverProps,\n'size' |\n'hideArrow'|\n'placement' |\n'shouldFlip' |\n'containerPadding' |\n'offset' |\n'crossOffset' |\n'triggerRef' |\n'isOpen' |\n'onOpenChange'\n>, Omit<DialogProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, UnsafeStyles {\n  /**\n   * The children of the popover.\n   */\n  children?: ReactNode,\n  /**\n   * The amount of padding around the contents of the dialog.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: PopoverStylesProp\n}\n\nconst innerDivStyle = style({\n  padding: {\n    padding: {\n      default: 8,\n      none: 0\n    }\n  },\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  borderRadius: 'inherit',\n  overflow: 'auto',\n  position: 'relative',\n  width: 'full',\n  maxSize: 'inherit'\n}, getAllowedOverrides({height: true}));\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, PopoverContext);\n  let domRef = useDOMRef(ref);\n  let {\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    padding = 'default',\n    ...otherProps\n  } = props;\n\n  return (\n    <PopoverBase {...otherProps} ref={domRef}>\n      {composeRenderProps(props.children, (children) => (\n        <div\n          style={UNSAFE_style}\n          className={(UNSAFE_className || '') + innerDivStyle({padding}, styles)}>\n          {/* Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state. */}\n          <OverlayTriggerStateContext.Provider value={null}>\n            {children}\n          </OverlayTriggerStateContext.Provider>\n        </div>\n      ))}\n    </PopoverBase>\n  );\n});\n"],"names":[],"version":3,"file":"Popover.cjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Popover.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 {Popover as AriaPopover, PopoverProps as AriaPopoverProps, OverlayArrow} from 'react-aria-components/Popover';\nimport {ColorSchemeContext} from './Provider';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {createContext, ForwardedRef, forwardRef, ReactNode, useCallback, useContext, useMemo} from 'react';\nimport {DialogProps, OverlayTriggerStateContext} from 'react-aria-components/Dialog';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {getAllowedOverrides, heightProperties, UnsafeStyles, widthProperties} from './style-utils' with {type: 'macro'};\nimport {lightDark, setColorScheme, style} from '../style' with {type: 'macro'};\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps,\n  'arrowSize' |\n  'isNonModal' |\n  'arrowBoundaryOffset' |\n  'isKeyboardDismissDisabled' |\n  'shouldCloseOnInteractOutside' |\n  'shouldUpdatePosition' |\n  'style' |\n  'className' |\n  'render' |\n  keyof GlobalDOMAttributes\n> {\n  /**\n   * The styles of the popover.\n   */\n  styles?: StyleString,\n  /**\n   * Whether a popover's arrow should be hidden.\n   *\n   * @default false\n   */\n  hideArrow?: boolean,\n  /**\n   * The size of the Popover. If not specified, the popover fits its contents.\n   */\n  size?: 'S' | 'M' | 'L'\n  /** The type of overlay that should be rendered when on a mobile device. */\n  // mobileType?: 'modal' | 'fullscreen' | 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style({\n  ...setColorScheme(),\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: {\n      default: 'layer-2',\n      forcedColors: 'Background'\n    }\n  },\n  backgroundColor: '--s2-container-bg',\n  borderRadius: 'lg',\n  filter: {\n    isArrowShown: 'elevated'\n  },\n  // Use box-shadow instead of filter when an arrow is not shown.\n  // This fixes the shadow stacking problem with submenus.\n  boxShadow: {\n    default: 'elevated',\n    isArrowShown: 'none'\n  },\n  outlineStyle: 'solid',\n  outlineWidth: 1,\n  outlineColor: {\n    default: lightDark('transparent-white-25', 'gray-200'),\n    forcedColors: 'ButtonBorder'\n  },\n  width: {\n    size: {\n      // Copied from designs, not sure if correct.\n      S: 336,\n      M: 416,\n      L: 576\n    }\n  },\n  // Don't be larger than full screen minus 2 * containerPadding\n  maxWidth: 'calc(100vw - 24px)',\n  boxSizing: 'border-box',\n  display: 'flex',\n  opacity: {\n    isEntering: 0,\n    isExiting: 0\n  },\n  translateY: {\n    placement: {\n      top: {\n        isEntering: 4,\n        isExiting: 4\n      },\n      bottom: {\n        isEntering: -4,\n        isExiting: -4\n      }\n    },\n    isSubmenu: 0\n  },\n  translateX: {\n    placement: {\n      left: {\n        isEntering: 4,\n        isExiting: 4\n      },\n      right: {\n        isEntering: -4,\n        isExiting: -4\n      }\n    },\n    isSubmenu: 0\n  },\n  transition: '[opacity, translate]',\n  transitionDuration: 200,\n  transitionTimingFunction: {\n    isExiting: 'in'\n  },\n  isolation: 'isolate',\n  pointerEvents: {\n    isExiting: 'none'\n  }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n  display: 'block',\n  fill: '--s2-container-bg',\n  width: 18,\n  height: 9,\n  rotate: {\n    default: 180,\n    placement: {\n      top: 0,\n      bottom: 180,\n      left: -90,\n      right: 90\n    }\n  },\n  translateX: {\n    placement: {\n      left: '-25%',\n      right: '25%'\n    }\n  },\n  strokeWidth: 1,\n  stroke: {\n    default: lightDark('transparent-white-25', 'gray-200'),\n    forcedColors: 'ButtonBorder'\n  }\n});\n\nexport const PopoverContext = createContext<ContextValue<PopoverProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InPopoverContext = createContext(false);\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: ForwardedRef<HTMLDivElement | null>) {\n  let {\n    hideArrow = false,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    size\n  } = props;\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 popoverRef = useCallback((el: HTMLDivElement) => {\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction]);\n  // Memoed so it doesn't break ComboBox/Picker scrolling\n  let mergedRef = useMemo(() => mergeRefs(popoverRef, ref), [ref, popoverRef]);\n\n  // On small devices, show a modal (or eventually a tray) instead of a popover.\n  // TODO: reverted this until we have trays.\n  // let isMobile = useIsMobileDevice();\n  // if (isMobile && process.env.NODE_ENV !== 'test') {\n  //   let mappedChildren = typeof children === 'function'\n  //     ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n  //     : children;\n\n  //   return (\n  //     <Modal size={size} isDismissable>\n  //       {composeRenderProps(mappedChildren, (children, {state}) => (\n  //         <>\n  //           {children}\n  //           {/* Add additional dismiss button at the end to match popovers. */}\n  //           <DismissButton onDismiss={state.close} />\n  //         </>\n  //       ))}\n  //     </Modal>\n  //   );\n  // }\n\n  // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n  // containerPadding not working as expected\n  return (\n    <AriaPopover\n      {...props}\n      offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n      ref={mergedRef}\n      style={{\n        ...UNSAFE_style,\n        // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n        zIndex: undefined\n      }}\n      className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n      {composeRenderProps(props.children, (children, renderProps) => (\n        <>\n          {!hideArrow && (\n            <OverlayArrow className=\"\">\n              <svg viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n                <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n              </svg>\n            </OverlayArrow>\n          )}\n          <InPopoverContext.Provider value>\n            {children}\n          </InPopoverContext.Provider>\n        </>\n      ))}\n    </AriaPopover>\n  );\n});\n\ntype PopoverStylesProp = StyleString<((typeof widthProperties)[number] | (typeof heightProperties)[number])>;\nexport interface PopoverDialogProps extends Pick<PopoverProps,\n'size' |\n'hideArrow'|\n'placement' |\n'shouldFlip' |\n'containerPadding' |\n'offset' |\n'crossOffset' |\n'triggerRef' |\n'isOpen' |\n'onOpenChange'\n>, Omit<DialogProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, UnsafeStyles {\n  /**\n   * The children of the popover.\n   */\n  children?: ReactNode,\n  /**\n   * The amount of padding around the contents of the dialog.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: PopoverStylesProp\n}\n\nconst innerDivStyle = style({\n  padding: {\n    padding: {\n      default: 8,\n      none: 0\n    }\n  },\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  borderRadius: 'inherit',\n  overflow: 'auto',\n  position: 'relative',\n  width: 'full',\n  maxSize: 'inherit'\n}, getAllowedOverrides({height: true}));\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, PopoverContext);\n  let domRef = useDOMRef(ref);\n  let {\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    padding = 'default',\n    ...otherProps\n  } = props;\n\n  return (\n    <PopoverBase {...otherProps} ref={domRef}>\n      {composeRenderProps(props.children, (children) => (\n        <div\n          style={UNSAFE_style}\n          className={(UNSAFE_className || '') + innerDivStyle({padding}, styles)}>\n          {/* Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state. */}\n          <OverlayTriggerStateContext.Provider value={null}>\n            {children}\n          </OverlayTriggerStateContext.Provider>\n        </div>\n      ))}\n    </PopoverBase>\n  );\n});\n"],"names":[],"version":3,"file":"Popover.cjs.map"}

package/dist/private/Popover.css

@@ -15,6 +15,22 @@
     color-scheme: var(--s2-color-scheme);
   }
 
+  .-NvXmrd-_ZN8Gi4c13 {
+    --lightningcss-light: initial;
+  }
+
+  .-NvXmrd-_ZLmU13 {
+    --lightningcss-light:  ;
+  }
+
+  .-j9blY-_ZLmU13 {
+    --lightningcss-dark:  ;
+  }
+
+  .-j9blY-_ZN8Gi4c13 {
+    --lightningcss-dark: initial;
+  }
+
   .-Ovbhqd-g_g13 {
     --s2-container-bg: light-dark(#fff, #222);
   }
@@ -267,6 +283,18 @@
 
 @layer _.b;
 
+@layer _.b.D1v0V {
+  @media (prefers-color-scheme: dark) {
+    .-NvXmrd-D1v0V_ZLmU13 {
+      --lightningcss-light:  ;
+    }
+
+    .-j9blY-D1v0V_ZN8Gi4c13 {
+      --lightningcss-dark: initial;
+    }
+  }
+}
+
 @layer _.b.l {
   @media (forced-colors: active) {
     .-Ovbhqd-lga13 {

package/dist/private/Popover.css.map

@@ -1 +1 @@
-{"mappings":"AC0Dc;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;;;;EAgFF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiIU;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjNR;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAgFF","sources":["6d7a68425d879d5d","packages/@react-spectrum/s2/src/Popover.tsx"],"sourcesContent":["@import \"0dd0ca29757a362f\";\n@import \"81768260922dd838\";\n@import \"1f6a63d51b6d4755\";\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 {Popover as AriaPopover, PopoverProps as AriaPopoverProps, OverlayArrow} from 'react-aria-components/Popover';\nimport {ColorSchemeContext} from './Provider';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {createContext, ForwardedRef, forwardRef, ReactNode, useCallback, useContext, useMemo} from 'react';\nimport {DialogProps, OverlayTriggerStateContext} from 'react-aria-components/Dialog';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {getAllowedOverrides, heightProperties, UnsafeStyles, widthProperties} from './style-utils' with {type: 'macro'};\nimport {lightDark, setColorScheme, style} from '../style' with {type: 'macro'};\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps,\n  'arrowSize' |\n  'isNonModal' |\n  'arrowBoundaryOffset' |\n  'isKeyboardDismissDisabled' |\n  'shouldCloseOnInteractOutside' |\n  'shouldUpdatePosition' |\n  'style' |\n  'className' |\n  'render' |\n  keyof GlobalDOMAttributes\n> {\n  /**\n   * The styles of the popover.\n   */\n  styles?: StyleString,\n  /**\n   * Whether a popover's arrow should be hidden.\n   *\n   * @default false\n   */\n  hideArrow?: boolean,\n  /**\n   * The size of the Popover. If not specified, the popover fits its contents.\n   */\n  size?: 'S' | 'M' | 'L'\n  /** The type of overlay that should be rendered when on a mobile device. */\n  // mobileType?: 'modal' | 'fullscreen' | 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style({\n  ...setColorScheme(),\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: {\n      default: 'layer-2',\n      forcedColors: 'Background'\n    }\n  },\n  backgroundColor: '--s2-container-bg',\n  borderRadius: 'lg',\n  filter: {\n    isArrowShown: 'elevated'\n  },\n  // Use box-shadow instead of filter when an arrow is not shown.\n  // This fixes the shadow stacking problem with submenus.\n  boxShadow: {\n    default: 'elevated',\n    isArrowShown: 'none'\n  },\n  outlineStyle: 'solid',\n  outlineWidth: 1,\n  outlineColor: {\n    default: lightDark('transparent-white-25', 'gray-200'),\n    forcedColors: 'ButtonBorder'\n  },\n  width: {\n    size: {\n      // Copied from designs, not sure if correct.\n      S: 336,\n      M: 416,\n      L: 576\n    }\n  },\n  // Don't be larger than full screen minus 2 * containerPadding\n  maxWidth: 'calc(100vw - 24px)',\n  boxSizing: 'border-box',\n  display: 'flex',\n  opacity: {\n    isEntering: 0,\n    isExiting: 0\n  },\n  translateY: {\n    placement: {\n      top: {\n        isEntering: 4,\n        isExiting: 4\n      },\n      bottom: {\n        isEntering: -4,\n        isExiting: -4\n      }\n    },\n    isSubmenu: 0\n  },\n  translateX: {\n    placement: {\n      left: {\n        isEntering: 4,\n        isExiting: 4\n      },\n      right: {\n        isEntering: -4,\n        isExiting: -4\n      }\n    },\n    isSubmenu: 0\n  },\n  transition: '[opacity, translate]',\n  transitionDuration: 200,\n  transitionTimingFunction: {\n    isExiting: 'in'\n  },\n  isolation: 'isolate',\n  pointerEvents: {\n    isExiting: 'none'\n  }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n  display: 'block',\n  fill: '--s2-container-bg',\n  width: 18,\n  height: 9,\n  rotate: {\n    default: 180,\n    placement: {\n      top: 0,\n      bottom: 180,\n      left: -90,\n      right: 90\n    }\n  },\n  translateX: {\n    placement: {\n      left: '-25%',\n      right: '25%'\n    }\n  },\n  strokeWidth: 1,\n  stroke: {\n    default: lightDark('transparent-white-25', 'gray-200'),\n    forcedColors: 'ButtonBorder'\n  }\n});\n\nexport const PopoverContext = createContext<ContextValue<PopoverProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InPopoverContext = createContext(false);\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: ForwardedRef<HTMLDivElement | null>) {\n  let {\n    hideArrow = false,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    size\n  } = props;\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 popoverRef = useCallback((el: HTMLDivElement) => {\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction]);\n  // Memoed so it doesn't break ComboBox/Picker scrolling\n  let mergedRef = useMemo(() => mergeRefs(popoverRef, ref), [ref, popoverRef]);\n\n  // On small devices, show a modal (or eventually a tray) instead of a popover.\n  // TODO: reverted this until we have trays.\n  // let isMobile = useIsMobileDevice();\n  // if (isMobile && process.env.NODE_ENV !== 'test') {\n  //   let mappedChildren = typeof children === 'function'\n  //     ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n  //     : children;\n\n  //   return (\n  //     <Modal size={size} isDismissable>\n  //       {composeRenderProps(mappedChildren, (children, {state}) => (\n  //         <>\n  //           {children}\n  //           {/* Add additional dismiss button at the end to match popovers. */}\n  //           <DismissButton onDismiss={state.close} />\n  //         </>\n  //       ))}\n  //     </Modal>\n  //   );\n  // }\n\n  // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n  // containerPadding not working as expected\n  return (\n    <AriaPopover\n      {...props}\n      offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n      ref={mergedRef}\n      style={{\n        ...UNSAFE_style,\n        // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n        zIndex: undefined\n      }}\n      className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n      {composeRenderProps(props.children, (children, renderProps) => (\n        <>\n          {!hideArrow && (\n            <OverlayArrow className=\"\">\n              <svg viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n                <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n              </svg>\n            </OverlayArrow>\n          )}\n          <InPopoverContext.Provider value>\n            {children}\n          </InPopoverContext.Provider>\n        </>\n      ))}\n    </AriaPopover>\n  );\n});\n\ntype PopoverStylesProp = StyleString<((typeof widthProperties)[number] | (typeof heightProperties)[number])>;\nexport interface PopoverDialogProps extends Pick<PopoverProps,\n'size' |\n'hideArrow'|\n'placement' |\n'shouldFlip' |\n'containerPadding' |\n'offset' |\n'crossOffset' |\n'triggerRef' |\n'isOpen' |\n'onOpenChange'\n>, Omit<DialogProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, UnsafeStyles {\n  /**\n   * The children of the popover.\n   */\n  children?: ReactNode,\n  /**\n   * The amount of padding around the contents of the dialog.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: PopoverStylesProp\n}\n\nconst innerDivStyle = style({\n  padding: {\n    padding: {\n      default: 8,\n      none: 0\n    }\n  },\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  borderRadius: 'inherit',\n  overflow: 'auto',\n  position: 'relative',\n  width: 'full',\n  maxSize: 'inherit'\n}, getAllowedOverrides({height: true}));\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, PopoverContext);\n  let domRef = useDOMRef(ref);\n  let {\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    padding = 'default',\n    ...otherProps\n  } = props;\n\n  return (\n    <PopoverBase {...otherProps} ref={domRef}>\n      {composeRenderProps(props.children, (children) => (\n        <div\n          style={UNSAFE_style}\n          className={(UNSAFE_className || '') + innerDivStyle({padding}, styles)}>\n          {/* Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state. */}\n          <OverlayTriggerStateContext.Provider value={null}>\n            {children}\n          </OverlayTriggerStateContext.Provider>\n        </div>\n      ))}\n    </PopoverBase>\n  );\n});\n"],"names":[],"version":3,"file":"Popover.css.map"}
+{"mappings":"AC0Dc;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;;;;EAAA;;;;EAAA;;;;EAgFF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiIU;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjNR;;AAAA;EAAA;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAgFF","sources":["6d7a68425d879d5d","packages/@react-spectrum/s2/src/Popover.tsx"],"sourcesContent":["@import \"0dd0ca29757a362f\";\n@import \"81768260922dd838\";\n@import \"1f6a63d51b6d4755\";\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 {Popover as AriaPopover, PopoverProps as AriaPopoverProps, OverlayArrow} from 'react-aria-components/Popover';\nimport {ColorSchemeContext} from './Provider';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {createContext, ForwardedRef, forwardRef, ReactNode, useCallback, useContext, useMemo} from 'react';\nimport {DialogProps, OverlayTriggerStateContext} from 'react-aria-components/Dialog';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {getAllowedOverrides, heightProperties, UnsafeStyles, widthProperties} from './style-utils' with {type: 'macro'};\nimport {lightDark, setColorScheme, style} from '../style' with {type: 'macro'};\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps,\n  'arrowSize' |\n  'isNonModal' |\n  'arrowBoundaryOffset' |\n  'isKeyboardDismissDisabled' |\n  'shouldCloseOnInteractOutside' |\n  'shouldUpdatePosition' |\n  'style' |\n  'className' |\n  'render' |\n  keyof GlobalDOMAttributes\n> {\n  /**\n   * The styles of the popover.\n   */\n  styles?: StyleString,\n  /**\n   * Whether a popover's arrow should be hidden.\n   *\n   * @default false\n   */\n  hideArrow?: boolean,\n  /**\n   * The size of the Popover. If not specified, the popover fits its contents.\n   */\n  size?: 'S' | 'M' | 'L'\n  /** The type of overlay that should be rendered when on a mobile device. */\n  // mobileType?: 'modal' | 'fullscreen' | 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style({\n  ...setColorScheme(),\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: {\n      default: 'layer-2',\n      forcedColors: 'Background'\n    }\n  },\n  backgroundColor: '--s2-container-bg',\n  borderRadius: 'lg',\n  filter: {\n    isArrowShown: 'elevated'\n  },\n  // Use box-shadow instead of filter when an arrow is not shown.\n  // This fixes the shadow stacking problem with submenus.\n  boxShadow: {\n    default: 'elevated',\n    isArrowShown: 'none'\n  },\n  outlineStyle: 'solid',\n  outlineWidth: 1,\n  outlineColor: {\n    default: lightDark('transparent-white-25', 'gray-200'),\n    forcedColors: 'ButtonBorder'\n  },\n  width: {\n    size: {\n      // Copied from designs, not sure if correct.\n      S: 336,\n      M: 416,\n      L: 576\n    }\n  },\n  // Don't be larger than full screen minus 2 * containerPadding\n  maxWidth: 'calc(100vw - 24px)',\n  boxSizing: 'border-box',\n  display: 'flex',\n  opacity: {\n    isEntering: 0,\n    isExiting: 0\n  },\n  translateY: {\n    placement: {\n      top: {\n        isEntering: 4,\n        isExiting: 4\n      },\n      bottom: {\n        isEntering: -4,\n        isExiting: -4\n      }\n    },\n    isSubmenu: 0\n  },\n  translateX: {\n    placement: {\n      left: {\n        isEntering: 4,\n        isExiting: 4\n      },\n      right: {\n        isEntering: -4,\n        isExiting: -4\n      }\n    },\n    isSubmenu: 0\n  },\n  transition: '[opacity, translate]',\n  transitionDuration: 200,\n  transitionTimingFunction: {\n    isExiting: 'in'\n  },\n  isolation: 'isolate',\n  pointerEvents: {\n    isExiting: 'none'\n  }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n  display: 'block',\n  fill: '--s2-container-bg',\n  width: 18,\n  height: 9,\n  rotate: {\n    default: 180,\n    placement: {\n      top: 0,\n      bottom: 180,\n      left: -90,\n      right: 90\n    }\n  },\n  translateX: {\n    placement: {\n      left: '-25%',\n      right: '25%'\n    }\n  },\n  strokeWidth: 1,\n  stroke: {\n    default: lightDark('transparent-white-25', 'gray-200'),\n    forcedColors: 'ButtonBorder'\n  }\n});\n\nexport const PopoverContext = createContext<ContextValue<PopoverProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InPopoverContext = createContext(false);\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: ForwardedRef<HTMLDivElement | null>) {\n  let {\n    hideArrow = false,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    size\n  } = props;\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 popoverRef = useCallback((el: HTMLDivElement) => {\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction]);\n  // Memoed so it doesn't break ComboBox/Picker scrolling\n  let mergedRef = useMemo(() => mergeRefs(popoverRef, ref), [ref, popoverRef]);\n\n  // On small devices, show a modal (or eventually a tray) instead of a popover.\n  // TODO: reverted this until we have trays.\n  // let isMobile = useIsMobileDevice();\n  // if (isMobile && process.env.NODE_ENV !== 'test') {\n  //   let mappedChildren = typeof children === 'function'\n  //     ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n  //     : children;\n\n  //   return (\n  //     <Modal size={size} isDismissable>\n  //       {composeRenderProps(mappedChildren, (children, {state}) => (\n  //         <>\n  //           {children}\n  //           {/* Add additional dismiss button at the end to match popovers. */}\n  //           <DismissButton onDismiss={state.close} />\n  //         </>\n  //       ))}\n  //     </Modal>\n  //   );\n  // }\n\n  // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n  // containerPadding not working as expected\n  return (\n    <AriaPopover\n      {...props}\n      offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n      ref={mergedRef}\n      style={{\n        ...UNSAFE_style,\n        // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n        zIndex: undefined\n      }}\n      className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n      {composeRenderProps(props.children, (children, renderProps) => (\n        <>\n          {!hideArrow && (\n            <OverlayArrow className=\"\">\n              <svg viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n                <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n              </svg>\n            </OverlayArrow>\n          )}\n          <InPopoverContext.Provider value>\n            {children}\n          </InPopoverContext.Provider>\n        </>\n      ))}\n    </AriaPopover>\n  );\n});\n\ntype PopoverStylesProp = StyleString<((typeof widthProperties)[number] | (typeof heightProperties)[number])>;\nexport interface PopoverDialogProps extends Pick<PopoverProps,\n'size' |\n'hideArrow'|\n'placement' |\n'shouldFlip' |\n'containerPadding' |\n'offset' |\n'crossOffset' |\n'triggerRef' |\n'isOpen' |\n'onOpenChange'\n>, Omit<DialogProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, UnsafeStyles {\n  /**\n   * The children of the popover.\n   */\n  children?: ReactNode,\n  /**\n   * The amount of padding around the contents of the dialog.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: PopoverStylesProp\n}\n\nconst innerDivStyle = style({\n  padding: {\n    padding: {\n      default: 8,\n      none: 0\n    }\n  },\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  borderRadius: 'inherit',\n  overflow: 'auto',\n  position: 'relative',\n  width: 'full',\n  maxSize: 'inherit'\n}, getAllowedOverrides({height: true}));\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, PopoverContext);\n  let domRef = useDOMRef(ref);\n  let {\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    padding = 'default',\n    ...otherProps\n  } = props;\n\n  return (\n    <PopoverBase {...otherProps} ref={domRef}>\n      {composeRenderProps(props.children, (children) => (\n        <div\n          style={UNSAFE_style}\n          className={(UNSAFE_className || '') + innerDivStyle({padding}, styles)}>\n          {/* Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state. */}\n          <OverlayTriggerStateContext.Provider value={null}>\n            {children}\n          </OverlayTriggerStateContext.Provider>\n        </div>\n      ))}\n    </PopoverBase>\n  );\n});\n"],"names":[],"version":3,"file":"Popover.css.map"}

package/dist/private/Popover.mjs

@@ -46,6 +46,18 @@ let $88b746eba92c8d0d$var$popover = function anonymous(props, overrides) {
     else if (props.colorScheme === "light") rules += ' -ICUGx-_pb13';
     else if (props.colorScheme === "light dark") rules += ' -ICUGx-_pc13';
     rules += ' _pK8eoyd13';
+    if (props.colorScheme === "dark") rules += ' -NvXmrd-_ZLmU13';
+    else if (props.colorScheme === "light") rules += ' -NvXmrd-_ZN8Gi4c13';
+    else if (props.colorScheme === "light dark") {
+        rules += ' -NvXmrd-_ZN8Gi4c13';
+        rules += ' -NvXmrd-D1v0V_ZLmU13';
+    }
+    if (props.colorScheme === "dark") rules += ' -j9blY-_ZN8Gi4c13';
+    else if (props.colorScheme === "light") rules += ' -j9blY-_ZLmU13';
+    else if (props.colorScheme === "light dark") {
+        rules += ' -j9blY-_ZLmU13';
+        rules += ' -j9blY-D1v0V_ZN8Gi4c13';
+    }
     rules += ' -Ovbhqd-g_g13';
     rules += ' -Ovbhqd-lga13';
     rules += ' gEzkoQe13';

package/dist/private/Popover.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Popover.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 {Popover as AriaPopover, PopoverProps as AriaPopoverProps, OverlayArrow} from 'react-aria-components/Popover';\nimport {ColorSchemeContext} from './Provider';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {createContext, ForwardedRef, forwardRef, ReactNode, useCallback, useContext, useMemo} from 'react';\nimport {DialogProps, OverlayTriggerStateContext} from 'react-aria-components/Dialog';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {getAllowedOverrides, heightProperties, UnsafeStyles, widthProperties} from './style-utils' with {type: 'macro'};\nimport {lightDark, setColorScheme, style} from '../style' with {type: 'macro'};\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps,\n  'arrowSize' |\n  'isNonModal' |\n  'arrowBoundaryOffset' |\n  'isKeyboardDismissDisabled' |\n  'shouldCloseOnInteractOutside' |\n  'shouldUpdatePosition' |\n  'style' |\n  'className' |\n  'render' |\n  keyof GlobalDOMAttributes\n> {\n  /**\n   * The styles of the popover.\n   */\n  styles?: StyleString,\n  /**\n   * Whether a popover's arrow should be hidden.\n   *\n   * @default false\n   */\n  hideArrow?: boolean,\n  /**\n   * The size of the Popover. If not specified, the popover fits its contents.\n   */\n  size?: 'S' | 'M' | 'L'\n  /** The type of overlay that should be rendered when on a mobile device. */\n  // mobileType?: 'modal' | 'fullscreen' | 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style({\n  ...setColorScheme(),\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: {\n      default: 'layer-2',\n      forcedColors: 'Background'\n    }\n  },\n  backgroundColor: '--s2-container-bg',\n  borderRadius: 'lg',\n  filter: {\n    isArrowShown: 'elevated'\n  },\n  // Use box-shadow instead of filter when an arrow is not shown.\n  // This fixes the shadow stacking problem with submenus.\n  boxShadow: {\n    default: 'elevated',\n    isArrowShown: 'none'\n  },\n  outlineStyle: 'solid',\n  outlineWidth: 1,\n  outlineColor: {\n    default: lightDark('transparent-white-25', 'gray-200'),\n    forcedColors: 'ButtonBorder'\n  },\n  width: {\n    size: {\n      // Copied from designs, not sure if correct.\n      S: 336,\n      M: 416,\n      L: 576\n    }\n  },\n  // Don't be larger than full screen minus 2 * containerPadding\n  maxWidth: 'calc(100vw - 24px)',\n  boxSizing: 'border-box',\n  display: 'flex',\n  opacity: {\n    isEntering: 0,\n    isExiting: 0\n  },\n  translateY: {\n    placement: {\n      top: {\n        isEntering: 4,\n        isExiting: 4\n      },\n      bottom: {\n        isEntering: -4,\n        isExiting: -4\n      }\n    },\n    isSubmenu: 0\n  },\n  translateX: {\n    placement: {\n      left: {\n        isEntering: 4,\n        isExiting: 4\n      },\n      right: {\n        isEntering: -4,\n        isExiting: -4\n      }\n    },\n    isSubmenu: 0\n  },\n  transition: '[opacity, translate]',\n  transitionDuration: 200,\n  transitionTimingFunction: {\n    isExiting: 'in'\n  },\n  isolation: 'isolate',\n  pointerEvents: {\n    isExiting: 'none'\n  }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n  display: 'block',\n  fill: '--s2-container-bg',\n  width: 18,\n  height: 9,\n  rotate: {\n    default: 180,\n    placement: {\n      top: 0,\n      bottom: 180,\n      left: -90,\n      right: 90\n    }\n  },\n  translateX: {\n    placement: {\n      left: '-25%',\n      right: '25%'\n    }\n  },\n  strokeWidth: 1,\n  stroke: {\n    default: lightDark('transparent-white-25', 'gray-200'),\n    forcedColors: 'ButtonBorder'\n  }\n});\n\nexport const PopoverContext = createContext<ContextValue<PopoverProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InPopoverContext = createContext(false);\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: ForwardedRef<HTMLDivElement | null>) {\n  let {\n    hideArrow = false,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    size\n  } = props;\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 popoverRef = useCallback((el: HTMLDivElement) => {\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction]);\n  // Memoed so it doesn't break ComboBox/Picker scrolling\n  let mergedRef = useMemo(() => mergeRefs(popoverRef, ref), [ref, popoverRef]);\n\n  // On small devices, show a modal (or eventually a tray) instead of a popover.\n  // TODO: reverted this until we have trays.\n  // let isMobile = useIsMobileDevice();\n  // if (isMobile && process.env.NODE_ENV !== 'test') {\n  //   let mappedChildren = typeof children === 'function'\n  //     ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n  //     : children;\n\n  //   return (\n  //     <Modal size={size} isDismissable>\n  //       {composeRenderProps(mappedChildren, (children, {state}) => (\n  //         <>\n  //           {children}\n  //           {/* Add additional dismiss button at the end to match popovers. */}\n  //           <DismissButton onDismiss={state.close} />\n  //         </>\n  //       ))}\n  //     </Modal>\n  //   );\n  // }\n\n  // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n  // containerPadding not working as expected\n  return (\n    <AriaPopover\n      {...props}\n      offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n      ref={mergedRef}\n      style={{\n        ...UNSAFE_style,\n        // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n        zIndex: undefined\n      }}\n      className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n      {composeRenderProps(props.children, (children, renderProps) => (\n        <>\n          {!hideArrow && (\n            <OverlayArrow className=\"\">\n              <svg viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n                <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n              </svg>\n            </OverlayArrow>\n          )}\n          <InPopoverContext.Provider value>\n            {children}\n          </InPopoverContext.Provider>\n        </>\n      ))}\n    </AriaPopover>\n  );\n});\n\ntype PopoverStylesProp = StyleString<((typeof widthProperties)[number] | (typeof heightProperties)[number])>;\nexport interface PopoverDialogProps extends Pick<PopoverProps,\n'size' |\n'hideArrow'|\n'placement' |\n'shouldFlip' |\n'containerPadding' |\n'offset' |\n'crossOffset' |\n'triggerRef' |\n'isOpen' |\n'onOpenChange'\n>, Omit<DialogProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, UnsafeStyles {\n  /**\n   * The children of the popover.\n   */\n  children?: ReactNode,\n  /**\n   * The amount of padding around the contents of the dialog.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: PopoverStylesProp\n}\n\nconst innerDivStyle = style({\n  padding: {\n    padding: {\n      default: 8,\n      none: 0\n    }\n  },\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  borderRadius: 'inherit',\n  overflow: 'auto',\n  position: 'relative',\n  width: 'full',\n  maxSize: 'inherit'\n}, getAllowedOverrides({height: true}));\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, PopoverContext);\n  let domRef = useDOMRef(ref);\n  let {\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    padding = 'default',\n    ...otherProps\n  } = props;\n\n  return (\n    <PopoverBase {...otherProps} ref={domRef}>\n      {composeRenderProps(props.children, (children) => (\n        <div\n          style={UNSAFE_style}\n          className={(UNSAFE_className || '') + innerDivStyle({padding}, styles)}>\n          {/* Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state. */}\n          <OverlayTriggerStateContext.Provider value={null}>\n            {children}\n          </OverlayTriggerStateContext.Provider>\n        </div>\n      ))}\n    </PopoverBase>\n  );\n});\n"],"names":[],"version":3,"file":"Popover.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Popover.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 {Popover as AriaPopover, PopoverProps as AriaPopoverProps, OverlayArrow} from 'react-aria-components/Popover';\nimport {ColorSchemeContext} from './Provider';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {createContext, ForwardedRef, forwardRef, ReactNode, useCallback, useContext, useMemo} from 'react';\nimport {DialogProps, OverlayTriggerStateContext} from 'react-aria-components/Dialog';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {getAllowedOverrides, heightProperties, UnsafeStyles, widthProperties} from './style-utils' with {type: 'macro'};\nimport {lightDark, setColorScheme, style} from '../style' with {type: 'macro'};\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps,\n  'arrowSize' |\n  'isNonModal' |\n  'arrowBoundaryOffset' |\n  'isKeyboardDismissDisabled' |\n  'shouldCloseOnInteractOutside' |\n  'shouldUpdatePosition' |\n  'style' |\n  'className' |\n  'render' |\n  keyof GlobalDOMAttributes\n> {\n  /**\n   * The styles of the popover.\n   */\n  styles?: StyleString,\n  /**\n   * Whether a popover's arrow should be hidden.\n   *\n   * @default false\n   */\n  hideArrow?: boolean,\n  /**\n   * The size of the Popover. If not specified, the popover fits its contents.\n   */\n  size?: 'S' | 'M' | 'L'\n  /** The type of overlay that should be rendered when on a mobile device. */\n  // mobileType?: 'modal' | 'fullscreen' | 'fullscreenTakeover' // TODO: add tray back in\n}\n\nlet popover = style({\n  ...setColorScheme(),\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: {\n      default: 'layer-2',\n      forcedColors: 'Background'\n    }\n  },\n  backgroundColor: '--s2-container-bg',\n  borderRadius: 'lg',\n  filter: {\n    isArrowShown: 'elevated'\n  },\n  // Use box-shadow instead of filter when an arrow is not shown.\n  // This fixes the shadow stacking problem with submenus.\n  boxShadow: {\n    default: 'elevated',\n    isArrowShown: 'none'\n  },\n  outlineStyle: 'solid',\n  outlineWidth: 1,\n  outlineColor: {\n    default: lightDark('transparent-white-25', 'gray-200'),\n    forcedColors: 'ButtonBorder'\n  },\n  width: {\n    size: {\n      // Copied from designs, not sure if correct.\n      S: 336,\n      M: 416,\n      L: 576\n    }\n  },\n  // Don't be larger than full screen minus 2 * containerPadding\n  maxWidth: 'calc(100vw - 24px)',\n  boxSizing: 'border-box',\n  display: 'flex',\n  opacity: {\n    isEntering: 0,\n    isExiting: 0\n  },\n  translateY: {\n    placement: {\n      top: {\n        isEntering: 4,\n        isExiting: 4\n      },\n      bottom: {\n        isEntering: -4,\n        isExiting: -4\n      }\n    },\n    isSubmenu: 0\n  },\n  translateX: {\n    placement: {\n      left: {\n        isEntering: 4,\n        isExiting: 4\n      },\n      right: {\n        isEntering: -4,\n        isExiting: -4\n      }\n    },\n    isSubmenu: 0\n  },\n  transition: '[opacity, translate]',\n  transitionDuration: 200,\n  transitionTimingFunction: {\n    isExiting: 'in'\n  },\n  isolation: 'isolate',\n  pointerEvents: {\n    isExiting: 'none'\n  }\n}, getAllowedOverrides());\n// TODO: animations and real Popover Arrow\n\nlet arrow = style({\n  display: 'block',\n  fill: '--s2-container-bg',\n  width: 18,\n  height: 9,\n  rotate: {\n    default: 180,\n    placement: {\n      top: 0,\n      bottom: 180,\n      left: -90,\n      right: 90\n    }\n  },\n  translateX: {\n    placement: {\n      left: '-25%',\n      right: '25%'\n    }\n  },\n  strokeWidth: 1,\n  stroke: {\n    default: lightDark('transparent-white-25', 'gray-200'),\n    forcedColors: 'ButtonBorder'\n  }\n});\n\nexport const PopoverContext = createContext<ContextValue<PopoverProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InPopoverContext = createContext(false);\n\nexport const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: ForwardedRef<HTMLDivElement | null>) {\n  let {\n    hideArrow = false,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    size\n  } = props;\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 popoverRef = useCallback((el: HTMLDivElement) => {\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction]);\n  // Memoed so it doesn't break ComboBox/Picker scrolling\n  let mergedRef = useMemo(() => mergeRefs(popoverRef, ref), [ref, popoverRef]);\n\n  // On small devices, show a modal (or eventually a tray) instead of a popover.\n  // TODO: reverted this until we have trays.\n  // let isMobile = useIsMobileDevice();\n  // if (isMobile && process.env.NODE_ENV !== 'test') {\n  //   let mappedChildren = typeof children === 'function'\n  //     ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})\n  //     : children;\n\n  //   return (\n  //     <Modal size={size} isDismissable>\n  //       {composeRenderProps(mappedChildren, (children, {state}) => (\n  //         <>\n  //           {children}\n  //           {/* Add additional dismiss button at the end to match popovers. */}\n  //           <DismissButton onDismiss={state.close} />\n  //         </>\n  //       ))}\n  //     </Modal>\n  //   );\n  // }\n\n  // TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results\n  // containerPadding not working as expected\n  return (\n    <AriaPopover\n      {...props}\n      offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}\n      ref={mergedRef}\n      style={{\n        ...UNSAFE_style,\n        // Override default z-index from useOverlayPosition. We use isolation: isolate instead.\n        zIndex: undefined\n      }}\n      className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>\n      {composeRenderProps(props.children, (children, renderProps) => (\n        <>\n          {!hideArrow && (\n            <OverlayArrow className=\"\">\n              <svg viewBox=\"0 0 18 10\" className={arrow(renderProps)}>\n                <path transform=\"translate(0 -1)\" d=\"M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1\" />\n              </svg>\n            </OverlayArrow>\n          )}\n          <InPopoverContext.Provider value>\n            {children}\n          </InPopoverContext.Provider>\n        </>\n      ))}\n    </AriaPopover>\n  );\n});\n\ntype PopoverStylesProp = StyleString<((typeof widthProperties)[number] | (typeof heightProperties)[number])>;\nexport interface PopoverDialogProps extends Pick<PopoverProps,\n'size' |\n'hideArrow'|\n'placement' |\n'shouldFlip' |\n'containerPadding' |\n'offset' |\n'crossOffset' |\n'triggerRef' |\n'isOpen' |\n'onOpenChange'\n>, Omit<DialogProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, UnsafeStyles {\n  /**\n   * The children of the popover.\n   */\n  children?: ReactNode,\n  /**\n   * The amount of padding around the contents of the dialog.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: PopoverStylesProp\n}\n\nconst innerDivStyle = style({\n  padding: {\n    padding: {\n      default: 8,\n      none: 0\n    }\n  },\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  borderRadius: 'inherit',\n  overflow: 'auto',\n  position: 'relative',\n  width: 'full',\n  maxSize: 'inherit'\n}, getAllowedOverrides({height: true}));\n\n/**\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, PopoverContext);\n  let domRef = useDOMRef(ref);\n  let {\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    padding = 'default',\n    ...otherProps\n  } = props;\n\n  return (\n    <PopoverBase {...otherProps} ref={domRef}>\n      {composeRenderProps(props.children, (children) => (\n        <div\n          style={UNSAFE_style}\n          className={(UNSAFE_className || '') + innerDivStyle({padding}, styles)}>\n          {/* Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state. */}\n          <OverlayTriggerStateContext.Provider value={null}>\n            {children}\n          </OverlayTriggerStateContext.Provider>\n        </div>\n      ))}\n    </PopoverBase>\n  );\n});\n"],"names":[],"version":3,"file":"Popover.mjs.map"}

package/dist/private/Provider.cjs

@@ -59,6 +59,18 @@ let $914a06b3a1c679bc$var$providerStyles = function anonymous(props) {
     else if (props.colorScheme === "light") rules += ' -ICUGx-_pb13';
     else if (props.colorScheme === "light dark") rules += ' -ICUGx-_pc13';
     rules += ' _pK8eoyd13';
+    if (props.colorScheme === "dark") rules += ' -NvXmrd-_ZLmU13';
+    else if (props.colorScheme === "light") rules += ' -NvXmrd-_ZN8Gi4c13';
+    else if (props.colorScheme === "light dark") {
+        rules += ' -NvXmrd-_ZN8Gi4c13';
+        rules += ' -NvXmrd-D1v0V_ZLmU13';
+    }
+    if (props.colorScheme === "dark") rules += ' -j9blY-_ZN8Gi4c13';
+    else if (props.colorScheme === "light") rules += ' -j9blY-_ZLmU13';
+    else if (props.colorScheme === "light dark") {
+        rules += ' -j9blY-_ZLmU13';
+        rules += ' -j9blY-D1v0V_ZN8Gi4c13';
+    }
     if (props.background === "layer-2") rules += ' -Ovbhqd-g_g13';
     else if (props.background === "layer-1") rules += ' -Ovbhqd-gqlRAZb13';
     else if (props.background === "base") rules += ' -Ovbhqd-gX13';

package/dist/private/Provider.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAiDM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAqC;AAM5E,SAAS,0CAAS,KAAoB;IAC3C,IAAI,uBAAS,gCAAC;QAAe,GAAG,KAAK;;IACrC,IAAI,oBAAoB,CAAA,GAAA,uBAAS,EAAE;IACnC,IAAI,cAAc,MAAM,WAAW,IAAI;IACvC,uBAAS,gCAAC,0CAAmB,QAAQ;QAAC,OAAO;kBAAc;;IAE3D,IAAI,MAAM,MAAM,EACd,uBAAS,gCAAC,CAAA,GAAA,yCAAW;QAAE,QAAQ,MAAM,MAAM;kBAAG;;IAGhD,IAAI,MAAM,MAAM,EACd,uBAAS,gCAAC,CAAA,GAAA,mDAAa;QAAG,GAAG,MAAM,MAAM;kBAAG;;IAG9C,OAAO;AACT;;AAIA,IAAI;;;;;;;;;;;;;;;AAuBJ,SAAS,oCAAc,KAAoB;IACzC,IAAI,EACF,aAAa,UAAU,KAAK,gBAC5B,YAAY,oBACZ,mBAAmB,YACnB,MAAM,YACN,QAAQ,cACR,mFAAmF;IACnF,aAAa,YAAY,SAAS,SAAS,wBAC3C,WAAW,EACZ,GAAG;IACJ,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,sCAAQ;IAClC,qBACE,iCAAC;QACE,GAAG,CAAA,GAAA,6CAAa,EAAE,MAAM;QACzB,MAAM;QACN,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,CAAA,GAAA,qCAAU,EACtC,QACA,qCAAe;wBAAC;yBAAY;QAAW;;0BAEzC,gCAAC,CAAA,GAAA,+BAAI;YACJ;;;AAGP","sources":["packages/@react-spectrum/s2/src/Provider.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 {createContext, JSX, ReactNode, useContext} from 'react';\nimport {DOMProps, Href, RouterOptions} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {Fonts} from './Fonts';\nimport {generateDefaultColorSchemeStyles} from './page.macro' with {type: 'macro'};\nimport {I18nProvider, useLocale} from 'react-aria/I18nProvider';\nimport {mergeStyles} from '../style/runtime';\nimport {RouterProvider} from 'react-aria/private/utils/openLink';\nimport {setColorScheme, style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils' with {type: 'macro'};\n\nexport type ColorScheme = 'light' | 'dark';\ninterface Router {\n  navigate: (path: string, routerOptions: RouterOptions | undefined) => void,\n  useHref?: (href: Href) => string\n}\n\nexport interface ProviderProps extends UnsafeStyles, DOMProps {\n  /** The content of the Provider. */\n  children: ReactNode,\n  /**\n   * The locale for your application as a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code.\n   * Defaults to the browser/OS language setting.\n   * @default 'en-US'\n   */\n  locale?: string,\n  /**\n   * Provides a client side router to all nested React Spectrum links to enable client side navigation.\n   */\n  router?: Router,\n  /**\n   * The color scheme for your application.\n   * Defaults to operating system preferences.\n   */\n  colorScheme?: ColorScheme,\n  /** The background for this provider. If not provided, the background is transparent. */\n  background?: 'base' | 'layer-1' | 'layer-2',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StyleString,\n  /**\n   * The DOM element to render.\n   * @default div\n   */\n  elementType?: keyof JSX.IntrinsicElements\n}\n\nexport const ColorSchemeContext = createContext<ColorScheme | 'light dark' | null>(null);\n\n/**\n * Provider is the container for all React Spectrum components.\n * It loads the font and sets the colorScheme, locale, and other application level settings.\n */\nexport function Provider(props: ProviderProps): JSX.Element {\n  let result = <ProviderInner {...props} />;\n  let parentColorScheme = useContext(ColorSchemeContext);\n  let colorScheme = props.colorScheme || parentColorScheme;\n  result = <ColorSchemeContext.Provider value={colorScheme}>{result}</ColorSchemeContext.Provider>;\n\n  if (props.locale) {\n    result = <I18nProvider locale={props.locale}>{result}</I18nProvider>;\n  }\n\n  if (props.router) {\n    result = <RouterProvider {...props.router}>{result}</RouterProvider>;\n  }\n\n  return result;\n}\n\ngenerateDefaultColorSchemeStyles();\n\nlet providerStyles = style({\n  ...setColorScheme(),\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: {\n      background: {\n        base: 'base',\n        'layer-1': 'layer-1',\n        'layer-2': 'layer-2'\n      }\n    }\n  },\n  backgroundColor: {\n    // Don't set a background unless one is requested.\n    background: {\n      base: '--s2-container-bg',\n      'layer-1': '--s2-container-bg',\n      'layer-2': '--s2-container-bg'\n    }\n  },\n  isolation: 'isolate'\n});\n\nfunction ProviderInner(props: ProviderProps) {\n  let {\n    elementType: Element = 'div',\n    UNSAFE_style,\n    UNSAFE_className = '',\n    styles,\n    children,\n    // Set a default background if the provider is rendered as the root <html> element.\n    background = Element === 'html' ? 'base' : undefined,\n    colorScheme\n  } = props;\n  let {locale, direction} = useLocale();\n  return (\n    <Element\n      {...filterDOMProps(props)}\n      lang={locale}\n      dir={direction}\n      style={UNSAFE_style}\n      className={UNSAFE_className + mergeStyles(\n        styles,\n        providerStyles({background, colorScheme})\n      )}>\n      <Fonts />\n      {children}\n    </Element>\n  );\n}\n"],"names":[],"version":3,"file":"Provider.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAiDM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAqC;AAM5E,SAAS,0CAAS,KAAoB;IAC3C,IAAI,uBAAS,gCAAC;QAAe,GAAG,KAAK;;IACrC,IAAI,oBAAoB,CAAA,GAAA,uBAAS,EAAE;IACnC,IAAI,cAAc,MAAM,WAAW,IAAI;IACvC,uBAAS,gCAAC,0CAAmB,QAAQ;QAAC,OAAO;kBAAc;;IAE3D,IAAI,MAAM,MAAM,EACd,uBAAS,gCAAC,CAAA,GAAA,yCAAW;QAAE,QAAQ,MAAM,MAAM;kBAAG;;IAGhD,IAAI,MAAM,MAAM,EACd,uBAAS,gCAAC,CAAA,GAAA,mDAAa;QAAG,GAAG,MAAM,MAAM;kBAAG;;IAG9C,OAAO;AACT;;AAIA,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBJ,SAAS,oCAAc,KAAoB;IACzC,IAAI,EACF,aAAa,UAAU,KAAK,gBAC5B,YAAY,oBACZ,mBAAmB,YACnB,MAAM,YACN,QAAQ,cACR,mFAAmF;IACnF,aAAa,YAAY,SAAS,SAAS,wBAC3C,WAAW,EACZ,GAAG;IACJ,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,sCAAQ;IAClC,qBACE,iCAAC;QACE,GAAG,CAAA,GAAA,6CAAa,EAAE,MAAM;QACzB,MAAM;QACN,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,CAAA,GAAA,qCAAU,EACtC,QACA,qCAAe;wBAAC;yBAAY;QAAW;;0BAEzC,gCAAC,CAAA,GAAA,+BAAI;YACJ;;;AAGP","sources":["packages/@react-spectrum/s2/src/Provider.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 {createContext, JSX, ReactNode, useContext} from 'react';\nimport {DOMProps, Href, RouterOptions} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {Fonts} from './Fonts';\nimport {generateDefaultColorSchemeStyles} from './page.macro' with {type: 'macro'};\nimport {I18nProvider, useLocale} from 'react-aria/I18nProvider';\nimport {mergeStyles} from '../style/runtime';\nimport {RouterProvider} from 'react-aria/private/utils/openLink';\nimport {setColorScheme, style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils' with {type: 'macro'};\n\nexport type ColorScheme = 'light' | 'dark';\ninterface Router {\n  navigate: (path: string, routerOptions: RouterOptions | undefined) => void,\n  useHref?: (href: Href) => string\n}\n\nexport interface ProviderProps extends UnsafeStyles, DOMProps {\n  /** The content of the Provider. */\n  children: ReactNode,\n  /**\n   * The locale for your application as a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code.\n   * Defaults to the browser/OS language setting.\n   * @default 'en-US'\n   */\n  locale?: string,\n  /**\n   * Provides a client side router to all nested React Spectrum links to enable client side navigation.\n   */\n  router?: Router,\n  /**\n   * The color scheme for your application.\n   * Defaults to operating system preferences.\n   */\n  colorScheme?: ColorScheme,\n  /** The background for this provider. If not provided, the background is transparent. */\n  background?: 'base' | 'layer-1' | 'layer-2',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StyleString,\n  /**\n   * The DOM element to render.\n   * @default div\n   */\n  elementType?: keyof JSX.IntrinsicElements\n}\n\nexport const ColorSchemeContext = createContext<ColorScheme | 'light dark' | null>(null);\n\n/**\n * Provider is the container for all React Spectrum components.\n * It loads the font and sets the colorScheme, locale, and other application level settings.\n */\nexport function Provider(props: ProviderProps): JSX.Element {\n  let result = <ProviderInner {...props} />;\n  let parentColorScheme = useContext(ColorSchemeContext);\n  let colorScheme = props.colorScheme || parentColorScheme;\n  result = <ColorSchemeContext.Provider value={colorScheme}>{result}</ColorSchemeContext.Provider>;\n\n  if (props.locale) {\n    result = <I18nProvider locale={props.locale}>{result}</I18nProvider>;\n  }\n\n  if (props.router) {\n    result = <RouterProvider {...props.router}>{result}</RouterProvider>;\n  }\n\n  return result;\n}\n\ngenerateDefaultColorSchemeStyles();\n\nlet providerStyles = style({\n  ...setColorScheme(),\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: {\n      background: {\n        base: 'base',\n        'layer-1': 'layer-1',\n        'layer-2': 'layer-2'\n      }\n    }\n  },\n  backgroundColor: {\n    // Don't set a background unless one is requested.\n    background: {\n      base: '--s2-container-bg',\n      'layer-1': '--s2-container-bg',\n      'layer-2': '--s2-container-bg'\n    }\n  },\n  isolation: 'isolate'\n});\n\nfunction ProviderInner(props: ProviderProps) {\n  let {\n    elementType: Element = 'div',\n    UNSAFE_style,\n    UNSAFE_className = '',\n    styles,\n    children,\n    // Set a default background if the provider is rendered as the root <html> element.\n    background = Element === 'html' ? 'base' : undefined,\n    colorScheme\n  } = props;\n  let {locale, direction} = useLocale();\n  return (\n    <Element\n      {...filterDOMProps(props)}\n      lang={locale}\n      dir={direction}\n      style={UNSAFE_style}\n      className={UNSAFE_className + mergeStyles(\n        styles,\n        providerStyles({background, colorScheme})\n      )}>\n      <Fonts />\n      {children}\n    </Element>\n  );\n}\n"],"names":[],"version":3,"file":"Provider.cjs.map"}

package/dist/private/Provider.css

@@ -3,6 +3,13 @@
     --s2-color-scheme: light dark;
     --s2-scale: 1;
     --s2-font-size-base: 14;
+    --lightningcss-light: initial;
+    --lightningcss-dark: ;
+
+    @media (prefers-color-scheme: dark) {
+      --lightningcss-light: ;
+      --lightningcss-dark: initial;
+    }
 
     @media not ((hover: hover) and (pointer: fine)) {
       --s2-scale: 1.25;
@@ -26,6 +33,22 @@
     color-scheme: var(--s2-color-scheme);
   }
 
+  .-NvXmrd-_ZN8Gi4c13 {
+    --lightningcss-light: initial;
+  }
+
+  .-NvXmrd-_ZLmU13 {
+    --lightningcss-light:  ;
+  }
+
+  .-j9blY-_ZLmU13 {
+    --lightningcss-dark:  ;
+  }
+
+  .-j9blY-_ZN8Gi4c13 {
+    --lightningcss-dark: initial;
+  }
+
   .-Ovbhqd-gX13 {
     --s2-container-bg: light-dark(#fff, #111);
   }
@@ -48,4 +71,18 @@
     isolation: isolate;
   }
 }
+
+@layer _.b;
+
+@layer _.b.D1v0V {
+  @media (prefers-color-scheme: dark) {
+    .-NvXmrd-D1v0V_ZLmU13 {
+      --lightningcss-light:  ;
+    }
+
+    .-j9blY-D1v0V_ZN8Gi4c13 {
+      --lightningcss-dark: initial;
+    }
+  }
+}
 /*# sourceMappingURL=Provider.css.map */

package/dist/private/Provider.css.map

@@ -1 +1 @@
-{"mappings":"ACkFA;EAAA;;;;;IAAA;MAAA;;;;;EAEqB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA","sources":["4752c64624f60d5a","packages/@react-spectrum/s2/src/Provider.tsx"],"sourcesContent":["@import \"60fcf4ad83e6776f\";\n@import \"ac1adcd813d529e0\";\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 {createContext, JSX, ReactNode, useContext} from 'react';\nimport {DOMProps, Href, RouterOptions} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {Fonts} from './Fonts';\nimport {generateDefaultColorSchemeStyles} from './page.macro' with {type: 'macro'};\nimport {I18nProvider, useLocale} from 'react-aria/I18nProvider';\nimport {mergeStyles} from '../style/runtime';\nimport {RouterProvider} from 'react-aria/private/utils/openLink';\nimport {setColorScheme, style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils' with {type: 'macro'};\n\nexport type ColorScheme = 'light' | 'dark';\ninterface Router {\n  navigate: (path: string, routerOptions: RouterOptions | undefined) => void,\n  useHref?: (href: Href) => string\n}\n\nexport interface ProviderProps extends UnsafeStyles, DOMProps {\n  /** The content of the Provider. */\n  children: ReactNode,\n  /**\n   * The locale for your application as a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code.\n   * Defaults to the browser/OS language setting.\n   * @default 'en-US'\n   */\n  locale?: string,\n  /**\n   * Provides a client side router to all nested React Spectrum links to enable client side navigation.\n   */\n  router?: Router,\n  /**\n   * The color scheme for your application.\n   * Defaults to operating system preferences.\n   */\n  colorScheme?: ColorScheme,\n  /** The background for this provider. If not provided, the background is transparent. */\n  background?: 'base' | 'layer-1' | 'layer-2',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StyleString,\n  /**\n   * The DOM element to render.\n   * @default div\n   */\n  elementType?: keyof JSX.IntrinsicElements\n}\n\nexport const ColorSchemeContext = createContext<ColorScheme | 'light dark' | null>(null);\n\n/**\n * Provider is the container for all React Spectrum components.\n * It loads the font and sets the colorScheme, locale, and other application level settings.\n */\nexport function Provider(props: ProviderProps): JSX.Element {\n  let result = <ProviderInner {...props} />;\n  let parentColorScheme = useContext(ColorSchemeContext);\n  let colorScheme = props.colorScheme || parentColorScheme;\n  result = <ColorSchemeContext.Provider value={colorScheme}>{result}</ColorSchemeContext.Provider>;\n\n  if (props.locale) {\n    result = <I18nProvider locale={props.locale}>{result}</I18nProvider>;\n  }\n\n  if (props.router) {\n    result = <RouterProvider {...props.router}>{result}</RouterProvider>;\n  }\n\n  return result;\n}\n\ngenerateDefaultColorSchemeStyles();\n\nlet providerStyles = style({\n  ...setColorScheme(),\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: {\n      background: {\n        base: 'base',\n        'layer-1': 'layer-1',\n        'layer-2': 'layer-2'\n      }\n    }\n  },\n  backgroundColor: {\n    // Don't set a background unless one is requested.\n    background: {\n      base: '--s2-container-bg',\n      'layer-1': '--s2-container-bg',\n      'layer-2': '--s2-container-bg'\n    }\n  },\n  isolation: 'isolate'\n});\n\nfunction ProviderInner(props: ProviderProps) {\n  let {\n    elementType: Element = 'div',\n    UNSAFE_style,\n    UNSAFE_className = '',\n    styles,\n    children,\n    // Set a default background if the provider is rendered as the root <html> element.\n    background = Element === 'html' ? 'base' : undefined,\n    colorScheme\n  } = props;\n  let {locale, direction} = useLocale();\n  return (\n    <Element\n      {...filterDOMProps(props)}\n      lang={locale}\n      dir={direction}\n      style={UNSAFE_style}\n      className={UNSAFE_className + mergeStyles(\n        styles,\n        providerStyles({background, colorScheme})\n      )}>\n      <Fonts />\n      {children}\n    </Element>\n  );\n}\n"],"names":[],"version":3,"file":"Provider.css.map"}
+{"mappings":"ACkFA;EAAA;;;;;;;IAAA;MAAA;;;;IAAA;MAAA;;;;;EAEqB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA","sources":["4752c64624f60d5a","packages/@react-spectrum/s2/src/Provider.tsx"],"sourcesContent":["@import \"60fcf4ad83e6776f\";\n@import \"ac1adcd813d529e0\";\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 {createContext, JSX, ReactNode, useContext} from 'react';\nimport {DOMProps, Href, RouterOptions} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {Fonts} from './Fonts';\nimport {generateDefaultColorSchemeStyles} from './page.macro' with {type: 'macro'};\nimport {I18nProvider, useLocale} from 'react-aria/I18nProvider';\nimport {mergeStyles} from '../style/runtime';\nimport {RouterProvider} from 'react-aria/private/utils/openLink';\nimport {setColorScheme, style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils' with {type: 'macro'};\n\nexport type ColorScheme = 'light' | 'dark';\ninterface Router {\n  navigate: (path: string, routerOptions: RouterOptions | undefined) => void,\n  useHref?: (href: Href) => string\n}\n\nexport interface ProviderProps extends UnsafeStyles, DOMProps {\n  /** The content of the Provider. */\n  children: ReactNode,\n  /**\n   * The locale for your application as a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code.\n   * Defaults to the browser/OS language setting.\n   * @default 'en-US'\n   */\n  locale?: string,\n  /**\n   * Provides a client side router to all nested React Spectrum links to enable client side navigation.\n   */\n  router?: Router,\n  /**\n   * The color scheme for your application.\n   * Defaults to operating system preferences.\n   */\n  colorScheme?: ColorScheme,\n  /** The background for this provider. If not provided, the background is transparent. */\n  background?: 'base' | 'layer-1' | 'layer-2',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StyleString,\n  /**\n   * The DOM element to render.\n   * @default div\n   */\n  elementType?: keyof JSX.IntrinsicElements\n}\n\nexport const ColorSchemeContext = createContext<ColorScheme | 'light dark' | null>(null);\n\n/**\n * Provider is the container for all React Spectrum components.\n * It loads the font and sets the colorScheme, locale, and other application level settings.\n */\nexport function Provider(props: ProviderProps): JSX.Element {\n  let result = <ProviderInner {...props} />;\n  let parentColorScheme = useContext(ColorSchemeContext);\n  let colorScheme = props.colorScheme || parentColorScheme;\n  result = <ColorSchemeContext.Provider value={colorScheme}>{result}</ColorSchemeContext.Provider>;\n\n  if (props.locale) {\n    result = <I18nProvider locale={props.locale}>{result}</I18nProvider>;\n  }\n\n  if (props.router) {\n    result = <RouterProvider {...props.router}>{result}</RouterProvider>;\n  }\n\n  return result;\n}\n\ngenerateDefaultColorSchemeStyles();\n\nlet providerStyles = style({\n  ...setColorScheme(),\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: {\n      background: {\n        base: 'base',\n        'layer-1': 'layer-1',\n        'layer-2': 'layer-2'\n      }\n    }\n  },\n  backgroundColor: {\n    // Don't set a background unless one is requested.\n    background: {\n      base: '--s2-container-bg',\n      'layer-1': '--s2-container-bg',\n      'layer-2': '--s2-container-bg'\n    }\n  },\n  isolation: 'isolate'\n});\n\nfunction ProviderInner(props: ProviderProps) {\n  let {\n    elementType: Element = 'div',\n    UNSAFE_style,\n    UNSAFE_className = '',\n    styles,\n    children,\n    // Set a default background if the provider is rendered as the root <html> element.\n    background = Element === 'html' ? 'base' : undefined,\n    colorScheme\n  } = props;\n  let {locale, direction} = useLocale();\n  return (\n    <Element\n      {...filterDOMProps(props)}\n      lang={locale}\n      dir={direction}\n      style={UNSAFE_style}\n      className={UNSAFE_className + mergeStyles(\n        styles,\n        providerStyles({background, colorScheme})\n      )}>\n      <Fonts />\n      {children}\n    </Element>\n  );\n}\n"],"names":[],"version":3,"file":"Provider.css.map"}