@react-spectrum/s2 1.3.1 → 1.4.0

package/dist/private/FullscreenDialog.css

@@ -1,133 +1,133 @@
 @layer _.a {
-  .zPCJngb13 {
+  .zPCJngb131 {
     grid-column-start: heading;
   }
 
-  .yPCJngb13 {
+  .yPCJngb131 {
     grid-column-end: heading;
   }
 
-  .BPCJngb13 {
+  .BPCJngb131 {
     grid-row-start: heading;
   }
 
-  .APCJngb13 {
+  .APCJngb131 {
     grid-row-end: heading;
   }
 
-  .Jy13 {
+  .Jy131 {
     margin-top: 0;
   }
 
-  .Gy13 {
+  .Gy131 {
     margin-bottom: 0;
   }
 
-  .-_6BNtrc-g13 {
+  .-_6BNtrc-g131 {
     --fs: pow(1.125, 4);
   }
 
-  .xd13 {
+  .xd131 {
     font-weight: 700;
   }
 
-  ._Fd13 {
+  ._Fd131 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
   }
 
-  .po13 {
+  .po131 {
     color: light-dark(#131313, #f2f2f2);
   }
 
-  .z6Akec13 {
+  .z6Akec131 {
     grid-column-start: header;
   }
 
-  .y6Akec13 {
+  .y6Akec131 {
     grid-column-end: header;
   }
 
-  .B6Akec13 {
+  .B6Akec131 {
     grid-row-start: header;
   }
 
-  .A6Akec13 {
+  .A6Akec131 {
     grid-row-end: header;
   }
 
-  .zk52g2d13 {
+  .zk52g2d131 {
     grid-column-start: content;
   }
 
-  .yk52g2d13 {
+  .yk52g2d131 {
     grid-column-end: content;
   }
 
-  .Bk52g2d13 {
+  .Bk52g2d131 {
     grid-row-start: content;
   }
 
-  .Ak52g2d13 {
+  .Ak52g2d131 {
     grid-row-end: content;
   }
 
-  ._ub13 {
+  ._ub131 {
     flex-grow: 1;
   }
 
-  .-_6BNtrc-d13 {
+  .-_6BNtrc-d131 {
     --fs: pow(1.125, 1);
   }
 
-  .vx13 {
+  .vx131 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .xb13 {
+  .xb131 {
     font-weight: 400;
   }
 
-  ._xa13 {
+  ._xa131 {
     font-synthesis-weight: none;
   }
 
-  ._Fb13 {
+  ._Fb131 {
     line-height: 1.5;
   }
 
-  .pt13 {
+  .pt131 {
     color: light-dark(#292929, #dbdbdb);
   }
 
-  .z4AkfTc13 {
+  .z4AkfTc131 {
     grid-column-start: buttons;
   }
 
-  .y4AkfTc13 {
+  .y4AkfTc131 {
     grid-column-end: buttons;
   }
 
-  .B4AkfTc13 {
+  .B4AkfTc131 {
     grid-row-start: buttons;
   }
 
-  .A4AkfTc13 {
+  .A4AkfTc131 {
     grid-row-end: buttons;
   }
 
-  .IM13 {
+  .IM131 {
     margin-inline-start: auto;
   }
 
-  .La13 {
+  .La131 {
     max-width: 100%;
   }
 
-  .se13 {
+  .se131 {
     display: grid;
   }
 
-  .CQpyMed13 {
+  .CQpyMed131 {
     grid-template-areas: "heading"
                          "header"
                          "."
@@ -136,200 +136,200 @@
                          "buttons";
   }
 
-  .DM8Mfn13 {
+  .DM8Mfn131 {
     grid-template-columns: 1fr;
   }
 
-  .EfcKqZ13 {
+  .EfcKqZ131 {
     grid-template-rows: auto auto calc(1.5rem * var(--s2-scale)) 1fr calc(1.5rem * var(--s2-scale)) auto;
   }
 
-  .Th13 {
+  .Th131 {
     padding-top: 24px;
   }
 
-  .Qh13 {
+  .Qh131 {
     padding-bottom: 24px;
   }
 
-  .Sh13 {
+  .Sh131 {
     padding-inline-start: 24px;
   }
 
-  .Rh13 {
+  .Rh131 {
     padding-inline-end: 24px;
   }
 
-  .ql13 {
+  .ql131 {
     column-gap: 1rem;
   }
 
-  .K40ub4c13 {
+  .K40ub4c131 {
     max-height: inherit;
   }
 
-  .Fb13 {
+  .Fb131 {
     height: 100%;
   }
 
-  ._oa13 {
+  ._oa131 {
     box-sizing: border-box;
   }
 
-  ._Le13 {
+  ._Le131 {
     outline-style: none;
   }
 
-  .uk13 {
+  .uk131 {
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .oi13 {
+  .oi131 {
     border-start-start-radius: inherit;
   }
 
-  .ni13 {
+  .ni131 {
     border-start-end-radius: inherit;
   }
 
-  .ki13 {
+  .ki131 {
     border-end-start-radius: inherit;
   }
 
-  .ji13 {
+  .ji131 {
     border-end-end-radius: inherit;
   }
 
-  ._Na13 {
+  ._Na131 {
     overflow-x: auto;
   }
 
-  .Pa13 {
+  .Pa131 {
     overflow-y: auto;
   }
 }
 
 @layer _.b {
-  .xX0cczbc13:is(:lang(ja), :lang(ko), :lang(zh)) {
+  .xX0cczbc131:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-weight: 500;
   }
 
-  ._xX0cczba13:is(:lang(ja), :lang(ko), :lang(zh)) {
+  ._xX0cczba131:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-synthesis-weight: none;
   }
 
-  ._FnuYUweb13:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb131:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 
-  ._FnuYUwec13:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUwec131:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.7;
   }
 
-  .ucJ9TBTb13:lang(ar) {
+  .ucJ9TBTb131:lang(ar) {
     font-family: adobe-clean-arabic, myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.c {
-  .xfd13:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  .xfd131:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-weight: 700;
   }
 
-  ._xfa13:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._xfa131:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-synthesis-weight: none;
   }
 
-  .ud3Euai13:lang(he) {
+  .ud3Euai131:lang(he) {
     font-family: adobe-clean-hebrew, myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .xfX0cczbc13:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  .xfX0cczbc131:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-weight: 500;
   }
 
-  ._xfX0cczba13:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._xfX0cczba131:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-synthesis-weight: none;
   }
 
-  .uea13:lang(ja) {
+  .uea131:lang(ja) {
     font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
   }
 }
 
 @layer _.e {
-  .ugb13:lang(ko) {
+  .ugb131:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd13:lang(zh) {
+  .uhd131:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje13:lang(zh-hant) {
+  .uje131:lang(zh-hant) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.h {
-  .u2NhKxcl13:lang(zh-HK) {
+  .u2NhKxcl131:lang(zh-HK) {
     font-family: adobe-clean-han-hong-kong, source-han-hong-kong, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.i {
-  .uic13:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .uic131:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
   }
 }
 
 @layer _.b.n {
   @media (width >= 40rem) {
-    .InM13 {
+    .InM131 {
       margin-inline-start: auto;
     }
 
-    .HnM13 {
+    .HnM131 {
       margin-inline-end: auto;
     }
 
-    .Cns3y4td13 {
+    .Cns3y4td131 {
       grid-template-areas: "heading header buttons"
                            ". . ."
                            "content content content";
     }
 
-    .Dn4w1sLc13 {
+    .Dn4w1sLc131 {
       grid-template-columns: auto 1fr auto;
     }
 
-    .EnFfvwed13 {
+    .EnFfvwed131 {
       grid-template-rows: auto calc(2rem * var(--s2-scale)) 1fr;
     }
 
-    .Tnk13 {
+    .Tnk131 {
       padding-top: 32px;
     }
 
-    .Qnk13 {
+    .Qnk131 {
       padding-bottom: 32px;
     }
 
-    .Snk13 {
+    .Snk131 {
       padding-inline-start: 32px;
     }
 
-    .Rnk13 {
+    .Rnk131 {
       padding-inline-end: 32px;
     }
 
-    .qnj13 {
+    .qnj131 {
       column-gap: 1.5rem;
     }
   }
@@ -337,7 +337,7 @@
 
 @layer _.b.JVVdV {
   @container (height < 25rem) {
-    .PJVVdVe13 {
+    .PJVVdVe131 {
       overflow-y: visible;
     }
   }

package/dist/private/FullscreenDialog.css.map

@@ -1 +1 @@
-{"mappings":"ACuCgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMO;;;;EAAA;;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjCX;EAAA;;;;EAAA;;;;EAAA;;;;EAgBC;;;;EAiBU;;;;;AAjCX;EAAA;;;;EAAA;;;;EAQD;;;;;AARC;EAAA;;;;EAAA;;;;EAQD;;;;;AARC;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAQD;EAAA;IAAA;;;;IAAA;;;;IAyBY;;;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAjBV;EAAA;IAAA","sources":["08b4ee4dfdd3fb23","packages/@react-spectrum/s2/src/FullscreenDialog.tsx"],"sourcesContent":["@import \"eeaa872c96a96271\";\n@import \"73747769865790da\";\n@import \"b069e4051c7a440c\";\n@import \"38e814a136cf19ae\";\n@import \"1bc91e670be29799\";\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 {ButtonGroupContext} from './ButtonGroup';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContentContext, HeaderContext, HeadingContext} from './Content';\nimport {DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {Modal} from './Modal';\nimport {\n  OverlayTriggerStateContext,\n  Dialog as RACDialog,\n  DialogProps as RACDialogProps\n} from 'react-aria-components/Dialog';\nimport {Provider} from 'react-aria-components/slots';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from './useDOMRef';\n\n// TODO: what style overrides should be allowed?\nexport interface FullscreenDialogProps extends Omit<RACDialogProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, StyleProps {\n  /**\n   * The variant of fullscreen dialog to display.\n   * @default \"fullscreen\"\n   */\n  variant?: 'fullscreen' | 'fullscreenTakeover',\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean\n}\n\nconst heading = style({\n  gridArea: 'heading',\n  flexGrow: 1,\n  marginY: 0,\n  font: 'title-2xl',\n  color: 'heading'\n});\n\nconst header = style({\n  gridArea: 'header',\n  marginX: {\n    sm: 'auto'\n  },\n  font: 'body'\n});\n\nconst content =  style({\n  gridArea: 'content',\n  flexGrow: 1,\n  overflowY: {\n    default: 'auto',\n    // Make the whole dialog scroll rather than only the content when the height it small.\n    [`@container (height < ${400 / 16}rem)`]: 'visible'\n  },\n  font: 'body'\n});\n\nconst buttonGroup = style({\n  gridArea: 'buttons',\n  marginStart: 'auto',\n  maxWidth: 'full'\n});\n\nexport const dialogInner = style({\n  display: 'grid',\n  gridTemplateAreas: {\n    // Button group moves to the bottom on small screens.\n    default: [\n      'heading',\n      'header',\n      '.',\n      'content',\n      '.',\n      'buttons'\n    ],\n    sm: [\n      'heading header buttons',\n      '. . .',\n      'content content content'\n    ]\n  },\n  gridTemplateColumns: {\n    default: ['1fr'],\n    sm: ['auto', '1fr', 'auto']\n  },\n  gridTemplateRows: {\n    default: [\n      'auto',\n      'auto',\n      24,\n      '1fr',\n      24,\n      'auto'\n    ],\n    sm: [\n      'auto',\n      32,\n      '1fr'\n    ]\n  },\n  padding: {\n    default: 24,\n    sm: 32\n  },\n  columnGap: {\n    default: 16,\n    sm: 24\n  },\n  maxHeight: 'inherit',\n  height: 'full',\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  fontFamily: 'sans',\n  borderRadius: 'inherit',\n  overflow: 'auto'\n});\n\n/**\n * Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex workflows.\n */\nexport const FullscreenDialog = forwardRef(function FullscreenDialog(props: FullscreenDialogProps, ref: DOMRef) {\n  let {variant = 'fullscreen', isKeyboardDismissDisabled} = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    (<Modal size={variant} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>\n      <RACDialog\n        {...props}\n        ref={domRef}\n        style={props.UNSAFE_style}\n        className={(props.UNSAFE_className || '') + dialogInner}>\n        {composeRenderProps(props.children, (children) => (\n          // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n          (<OverlayTriggerStateContext.Provider value={null}>\n            <Provider\n              values={[\n                [HeadingContext, {styles: heading}],\n                [HeaderContext, {styles: header}],\n                [ContentContext, {styles: content}],\n                [ButtonGroupContext, {styles: buttonGroup}]\n              ]}>\n              {children}\n            </Provider>\n          </OverlayTriggerStateContext.Provider>)\n        ))}\n      </RACDialog>\n    </Modal>)\n  );\n});\n\n"],"names":[],"version":3,"file":"FullscreenDialog.css.map"}
+{"mappings":"AC2CgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMO;;;;EAAA;;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjCX;EAAA;;;;EAAA;;;;EAAA;;;;EAgBA;;;;EAiBW;;;;;AAjCX;EAAA;;;;EAAA;;;;EAQD;;;;;AARC;EAAA;;;;EAAA;;;;EAQD;;;;;AARC;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAQD;EAAA;IAAA;;;;IAAA;;;;IAyBY;;;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAjBX;EAAA;IAAA","sources":["08b4ee4dfdd3fb23","packages/@react-spectrum/s2/src/FullscreenDialog.tsx"],"sourcesContent":["@import \"eeaa872c96a96271\";\n@import \"73747769865790da\";\n@import \"b069e4051c7a440c\";\n@import \"38e814a136cf19ae\";\n@import \"1bc91e670be29799\";\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 {ButtonGroupContext} from './ButtonGroup';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContentContext, HeaderContext, HeadingContext} from './Content';\nimport {DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {Modal} from './Modal';\nimport {\n  OverlayTriggerStateContext,\n  Dialog as RACDialog,\n  DialogProps as RACDialogProps\n} from 'react-aria-components/Dialog';\nimport {Provider} from 'react-aria-components/slots';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from './useDOMRef';\n\n// TODO: what style overrides should be allowed?\nexport interface FullscreenDialogProps\n  extends\n    Omit<RACDialogProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,\n    StyleProps {\n  /**\n   * The variant of fullscreen dialog to display.\n   *\n   * @default 'fullscreen'\n   */\n  variant?: 'fullscreen' | 'fullscreenTakeover';\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean;\n}\n\nconst heading = style({\n  gridArea: 'heading',\n  flexGrow: 1,\n  marginY: 0,\n  font: 'title-2xl',\n  color: 'heading'\n});\n\nconst header = style({\n  gridArea: 'header',\n  marginX: {\n    sm: 'auto'\n  },\n  font: 'body'\n});\n\nconst content = style({\n  gridArea: 'content',\n  flexGrow: 1,\n  overflowY: {\n    default: 'auto',\n    // Make the whole dialog scroll rather than only the content when the height it small.\n    [`@container (height < ${400 / 16}rem)`]: 'visible'\n  },\n  font: 'body'\n});\n\nconst buttonGroup = style({\n  gridArea: 'buttons',\n  marginStart: 'auto',\n  maxWidth: 'full'\n});\n\nexport const dialogInner = style({\n  display: 'grid',\n  gridTemplateAreas: {\n    // Button group moves to the bottom on small screens.\n    default: ['heading', 'header', '.', 'content', '.', 'buttons'],\n    sm: ['heading header buttons', '. . .', 'content content content']\n  },\n  gridTemplateColumns: {\n    default: ['1fr'],\n    sm: ['auto', '1fr', 'auto']\n  },\n  gridTemplateRows: {\n    default: ['auto', 'auto', 24, '1fr', 24, 'auto'],\n    sm: ['auto', 32, '1fr']\n  },\n  padding: {\n    default: 24,\n    sm: 32\n  },\n  columnGap: {\n    default: 16,\n    sm: 24\n  },\n  maxHeight: 'inherit',\n  height: 'full',\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  fontFamily: 'sans',\n  borderRadius: 'inherit',\n  overflow: 'auto'\n});\n\n/**\n * Takeover dialogs are large types of dialogs. They use the totality of the screen and should be\n * used for modal experiences with complex workflows.\n */\nexport const FullscreenDialog = forwardRef(function FullscreenDialog(\n  props: FullscreenDialogProps,\n  ref: DOMRef\n) {\n  let {variant = 'fullscreen', isKeyboardDismissDisabled} = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <Modal size={variant} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>\n      <RACDialog\n        {...props}\n        ref={domRef}\n        style={props.UNSAFE_style}\n        className={(props.UNSAFE_className || '') + dialogInner}>\n        {composeRenderProps(props.children, children => (\n          // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n          <OverlayTriggerStateContext.Provider value={null}>\n            <Provider\n              values={[\n                [HeadingContext, {styles: heading}],\n                [HeaderContext, {styles: header}],\n                [ContentContext, {styles: content}],\n                [ButtonGroupContext, {styles: buttonGroup}]\n              ]}>\n              {children}\n            </Provider>\n          </OverlayTriggerStateContext.Provider>\n        ))}\n      </RACDialog>\n    </Modal>\n  );\n});\n"],"names":[],"version":3,"file":"FullscreenDialog.css.map"}

package/dist/private/FullscreenDialog.mjs

@@ -28,11 +28,11 @@ import {Provider as $900FG$Provider} from "react-aria-components/slots";
 
 
 
-const $8e7a38ff5b9798e1$var$heading = " zPCJngb13 yPCJngb13 BPCJngb13 APCJngb13 _ub13 Jy13 Gy13 uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-g13 vx13 xd13 _xa13 xX0cczbc13 _xX0cczba13 xfd13 _xfa13 xfX0cczbc13 _xfX0cczba13 _Fd13 _FnuYUweb13 po13";
-const $8e7a38ff5b9798e1$var$header = " z6Akec13 y6Akec13 B6Akec13 A6Akec13 InM13 HnM13 uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-d13 vx13 xb13 _xa13 _Fb13 _FnuYUwec13 pt13";
-const $8e7a38ff5b9798e1$var$content = " zk52g2d13 yk52g2d13 Bk52g2d13 Ak52g2d13 _ub13 Pa13 PJVVdVe13 uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-d13 vx13 xb13 _xa13 _Fb13 _FnuYUwec13 pt13";
-const $8e7a38ff5b9798e1$var$buttonGroup = " z4AkfTc13 y4AkfTc13 B4AkfTc13 A4AkfTc13 IM13 La13";
-const $8e7a38ff5b9798e1$export$6af31f836f9aa6f2 = " se13 CQpyMed13 Cns3y4td13 DM8Mfn13 Dn4w1sLc13 EfcKqZ13 EnFfvwed13 Th13 Tnk13 Qh13 Qnk13 Sh13 Snk13 Rh13 Rnk13 ql13 qnj13 K40ub4c13 Fb13 _oa13 _Le13 uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 oi13 ni13 ki13 ji13 _Na13 Pa13";
+const $8e7a38ff5b9798e1$var$heading = " zPCJngb131 yPCJngb131 BPCJngb131 APCJngb131 _ub131 Jy131 Gy131 uk131 ucJ9TBTb131 ud3Euai131 uea131 ugb131 uhd131 uje131 u2NhKxcl131 uic131 -_6BNtrc-g131 vx131 xd131 _xa131 xX0cczbc131 _xX0cczba131 xfd131 _xfa131 xfX0cczbc131 _xfX0cczba131 _Fd131 _FnuYUweb131 po131";
+const $8e7a38ff5b9798e1$var$header = " z6Akec131 y6Akec131 B6Akec131 A6Akec131 InM131 HnM131 uk131 ucJ9TBTb131 ud3Euai131 uea131 ugb131 uhd131 uje131 u2NhKxcl131 uic131 -_6BNtrc-d131 vx131 xb131 _xa131 _Fb131 _FnuYUwec131 pt131";
+const $8e7a38ff5b9798e1$var$content = " zk52g2d131 yk52g2d131 Bk52g2d131 Ak52g2d131 _ub131 Pa131 PJVVdVe131 uk131 ucJ9TBTb131 ud3Euai131 uea131 ugb131 uhd131 uje131 u2NhKxcl131 uic131 -_6BNtrc-d131 vx131 xb131 _xa131 _Fb131 _FnuYUwec131 pt131";
+const $8e7a38ff5b9798e1$var$buttonGroup = " z4AkfTc131 y4AkfTc131 B4AkfTc131 A4AkfTc131 IM131 La131";
+const $8e7a38ff5b9798e1$export$6af31f836f9aa6f2 = " se131 CQpyMed131 Cns3y4td131 DM8Mfn131 Dn4w1sLc131 EfcKqZ131 EnFfvwed131 Th131 Tnk131 Qh131 Qnk131 Sh131 Snk131 Rh131 Rnk131 ql131 qnj131 K40ub4c131 Fb131 _oa131 _Le131 uk131 ucJ9TBTb131 ud3Euai131 uea131 ugb131 uhd131 uje131 u2NhKxcl131 uic131 oi131 ni131 ki131 ji131 _Na131 Pa131";
 const $8e7a38ff5b9798e1$export$7082b7e805d2626f = /*#__PURE__*/ (0, $900FG$forwardRef)(function FullscreenDialog(props, ref) {
     let { variant: variant = 'fullscreen', isKeyboardDismissDisabled: isKeyboardDismissDisabled } = props;
     let domRef = (0, $80ecb974df713a30$export$c2c55ef9111cafd8)(ref);
@@ -44,7 +44,8 @@ const $8e7a38ff5b9798e1$export$7082b7e805d2626f = /*#__PURE__*/ (0, $900FG$forwa
             ref: domRef,
             style: props.UNSAFE_style,
             className: (props.UNSAFE_className || '') + $8e7a38ff5b9798e1$export$6af31f836f9aa6f2,
-            children: (0, $900FG$composeRenderProps)(props.children, (children)=>/*#__PURE__*/ (0, $900FG$jsx)((0, $900FG$OverlayTriggerStateContext).Provider, {
+            children: (0, $900FG$composeRenderProps)(props.children, (children)=>// Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.
+                /*#__PURE__*/ (0, $900FG$jsx)((0, $900FG$OverlayTriggerStateContext).Provider, {
                     value: null,
                     children: /*#__PURE__*/ (0, $900FG$jsx)((0, $900FG$Provider), {
                         values: [

package/dist/private/FullscreenDialog.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA6BD,MAAM;AAQN,MAAM;AAQN,MAAM;AAWN,MAAM;AAMC,MAAM;AAyDN,MAAM,0DAAmB,CAAA,GAAA,iBAAS,EAAE,SAAS,iBAAiB,KAA4B,EAAE,GAAW;IAC5G,IAAI,WAAC,UAAU,yCAAc,yBAAyB,EAAC,GAAG;IAC1D,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IAEvB,qBACG,gBAAC,CAAA,GAAA,yCAAI;QAAE,MAAM;QAAS,2BAA2B;kBAChD,cAAA,gBAAC,CAAA,GAAA,aAAQ;YACN,GAAG,KAAK;YACT,KAAK;YACL,OAAO,MAAM,YAAY;YACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK;sBAC3C,CAAA,GAAA,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,yBAElC,gBAAC,CAAA,GAAA,iCAAyB,EAAE,QAAQ;oBAAC,OAAO;8BAC3C,cAAA,gBAAC,CAAA,GAAA,eAAO;wBACN,QAAQ;4BACN;gCAAC,CAAA,GAAA,yCAAa;gCAAG;oCAAC,QAAQ;gCAAO;6BAAE;4BACnC;gCAAC,CAAA,GAAA,yCAAY;gCAAG;oCAAC,QAAQ;gCAAM;6BAAE;4BACjC;gCAAC,CAAA,GAAA,yCAAa;gCAAG;oCAAC,QAAQ;gCAAO;6BAAE;4BACnC;gCAAC,CAAA,GAAA,yCAAiB;gCAAG;oCAAC,QAAQ;gCAAW;6BAAE;yBAC5C;kCACA;;;;;AAOf","sources":["packages/@react-spectrum/s2/src/FullscreenDialog.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 {ButtonGroupContext} from './ButtonGroup';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContentContext, HeaderContext, HeadingContext} from './Content';\nimport {DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {Modal} from './Modal';\nimport {\n  OverlayTriggerStateContext,\n  Dialog as RACDialog,\n  DialogProps as RACDialogProps\n} from 'react-aria-components/Dialog';\nimport {Provider} from 'react-aria-components/slots';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from './useDOMRef';\n\n// TODO: what style overrides should be allowed?\nexport interface FullscreenDialogProps extends Omit<RACDialogProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, StyleProps {\n  /**\n   * The variant of fullscreen dialog to display.\n   * @default \"fullscreen\"\n   */\n  variant?: 'fullscreen' | 'fullscreenTakeover',\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean\n}\n\nconst heading = style({\n  gridArea: 'heading',\n  flexGrow: 1,\n  marginY: 0,\n  font: 'title-2xl',\n  color: 'heading'\n});\n\nconst header = style({\n  gridArea: 'header',\n  marginX: {\n    sm: 'auto'\n  },\n  font: 'body'\n});\n\nconst content =  style({\n  gridArea: 'content',\n  flexGrow: 1,\n  overflowY: {\n    default: 'auto',\n    // Make the whole dialog scroll rather than only the content when the height it small.\n    [`@container (height < ${400 / 16}rem)`]: 'visible'\n  },\n  font: 'body'\n});\n\nconst buttonGroup = style({\n  gridArea: 'buttons',\n  marginStart: 'auto',\n  maxWidth: 'full'\n});\n\nexport const dialogInner = style({\n  display: 'grid',\n  gridTemplateAreas: {\n    // Button group moves to the bottom on small screens.\n    default: [\n      'heading',\n      'header',\n      '.',\n      'content',\n      '.',\n      'buttons'\n    ],\n    sm: [\n      'heading header buttons',\n      '. . .',\n      'content content content'\n    ]\n  },\n  gridTemplateColumns: {\n    default: ['1fr'],\n    sm: ['auto', '1fr', 'auto']\n  },\n  gridTemplateRows: {\n    default: [\n      'auto',\n      'auto',\n      24,\n      '1fr',\n      24,\n      'auto'\n    ],\n    sm: [\n      'auto',\n      32,\n      '1fr'\n    ]\n  },\n  padding: {\n    default: 24,\n    sm: 32\n  },\n  columnGap: {\n    default: 16,\n    sm: 24\n  },\n  maxHeight: 'inherit',\n  height: 'full',\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  fontFamily: 'sans',\n  borderRadius: 'inherit',\n  overflow: 'auto'\n});\n\n/**\n * Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex workflows.\n */\nexport const FullscreenDialog = forwardRef(function FullscreenDialog(props: FullscreenDialogProps, ref: DOMRef) {\n  let {variant = 'fullscreen', isKeyboardDismissDisabled} = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    (<Modal size={variant} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>\n      <RACDialog\n        {...props}\n        ref={domRef}\n        style={props.UNSAFE_style}\n        className={(props.UNSAFE_className || '') + dialogInner}>\n        {composeRenderProps(props.children, (children) => (\n          // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n          (<OverlayTriggerStateContext.Provider value={null}>\n            <Provider\n              values={[\n                [HeadingContext, {styles: heading}],\n                [HeaderContext, {styles: header}],\n                [ContentContext, {styles: content}],\n                [ButtonGroupContext, {styles: buttonGroup}]\n              ]}>\n              {children}\n            </Provider>\n          </OverlayTriggerStateContext.Provider>)\n        ))}\n      </RACDialog>\n    </Modal>)\n  );\n});\n\n"],"names":[],"version":3,"file":"FullscreenDialog.mjs.map"}
+{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAiCD,MAAM;AAQN,MAAM;AAQN,MAAM;AAWN,MAAM;AAMC,MAAM;AAoCN,MAAM,0DAAmB,CAAA,GAAA,iBAAS,EAAE,SAAS,iBAClD,KAA4B,EAC5B,GAAW;IAEX,IAAI,WAAC,UAAU,yCAAc,yBAAyB,EAAC,GAAG;IAC1D,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,yCAAI;QAAE,MAAM;QAAS,2BAA2B;kBAC/C,cAAA,gBAAC,CAAA,GAAA,aAAQ;YACN,GAAG,KAAK;YACT,KAAK;YACL,OAAO,MAAM,YAAY;YACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK;sBAC3C,CAAA,GAAA,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAA,WAClC,oGAAoG;8BACpG,gBAAC,CAAA,GAAA,iCAAyB,EAAE,QAAQ;oBAAC,OAAO;8BAC1C,cAAA,gBAAC,CAAA,GAAA,eAAO;wBACN,QAAQ;4BACN;gCAAC,CAAA,GAAA,yCAAa;gCAAG;oCAAC,QAAQ;gCAAO;6BAAE;4BACnC;gCAAC,CAAA,GAAA,yCAAY;gCAAG;oCAAC,QAAQ;gCAAM;6BAAE;4BACjC;gCAAC,CAAA,GAAA,yCAAa;gCAAG;oCAAC,QAAQ;gCAAO;6BAAE;4BACnC;gCAAC,CAAA,GAAA,yCAAiB;gCAAG;oCAAC,QAAQ;gCAAW;6BAAE;yBAC5C;kCACA;;;;;AAOf","sources":["packages/@react-spectrum/s2/src/FullscreenDialog.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 {ButtonGroupContext} from './ButtonGroup';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContentContext, HeaderContext, HeadingContext} from './Content';\nimport {DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {Modal} from './Modal';\nimport {\n  OverlayTriggerStateContext,\n  Dialog as RACDialog,\n  DialogProps as RACDialogProps\n} from 'react-aria-components/Dialog';\nimport {Provider} from 'react-aria-components/slots';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from './useDOMRef';\n\n// TODO: what style overrides should be allowed?\nexport interface FullscreenDialogProps\n  extends\n    Omit<RACDialogProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,\n    StyleProps {\n  /**\n   * The variant of fullscreen dialog to display.\n   *\n   * @default 'fullscreen'\n   */\n  variant?: 'fullscreen' | 'fullscreenTakeover';\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean;\n}\n\nconst heading = style({\n  gridArea: 'heading',\n  flexGrow: 1,\n  marginY: 0,\n  font: 'title-2xl',\n  color: 'heading'\n});\n\nconst header = style({\n  gridArea: 'header',\n  marginX: {\n    sm: 'auto'\n  },\n  font: 'body'\n});\n\nconst content = style({\n  gridArea: 'content',\n  flexGrow: 1,\n  overflowY: {\n    default: 'auto',\n    // Make the whole dialog scroll rather than only the content when the height it small.\n    [`@container (height < ${400 / 16}rem)`]: 'visible'\n  },\n  font: 'body'\n});\n\nconst buttonGroup = style({\n  gridArea: 'buttons',\n  marginStart: 'auto',\n  maxWidth: 'full'\n});\n\nexport const dialogInner = style({\n  display: 'grid',\n  gridTemplateAreas: {\n    // Button group moves to the bottom on small screens.\n    default: ['heading', 'header', '.', 'content', '.', 'buttons'],\n    sm: ['heading header buttons', '. . .', 'content content content']\n  },\n  gridTemplateColumns: {\n    default: ['1fr'],\n    sm: ['auto', '1fr', 'auto']\n  },\n  gridTemplateRows: {\n    default: ['auto', 'auto', 24, '1fr', 24, 'auto'],\n    sm: ['auto', 32, '1fr']\n  },\n  padding: {\n    default: 24,\n    sm: 32\n  },\n  columnGap: {\n    default: 16,\n    sm: 24\n  },\n  maxHeight: 'inherit',\n  height: 'full',\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  fontFamily: 'sans',\n  borderRadius: 'inherit',\n  overflow: 'auto'\n});\n\n/**\n * Takeover dialogs are large types of dialogs. They use the totality of the screen and should be\n * used for modal experiences with complex workflows.\n */\nexport const FullscreenDialog = forwardRef(function FullscreenDialog(\n  props: FullscreenDialogProps,\n  ref: DOMRef\n) {\n  let {variant = 'fullscreen', isKeyboardDismissDisabled} = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <Modal size={variant} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>\n      <RACDialog\n        {...props}\n        ref={domRef}\n        style={props.UNSAFE_style}\n        className={(props.UNSAFE_className || '') + dialogInner}>\n        {composeRenderProps(props.children, children => (\n          // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n          <OverlayTriggerStateContext.Provider value={null}>\n            <Provider\n              values={[\n                [HeadingContext, {styles: heading}],\n                [HeaderContext, {styles: header}],\n                [ContentContext, {styles: content}],\n                [ButtonGroupContext, {styles: buttonGroup}]\n              ]}>\n              {children}\n            </Provider>\n          </OverlayTriggerStateContext.Provider>\n        ))}\n      </RACDialog>\n    </Modal>\n  );\n});\n"],"names":[],"version":3,"file":"FullscreenDialog.mjs.map"}