@react-spectrum/s2 0.11.1 → 0.12.0

package/dist/Dialog.css

@@ -1,340 +1,344 @@
 @layer _.a {
-  .Za11 {
+  .Za12 {
     width: 100%;
   }
 
-  .FC11 {
+  .FC12 {
     height: calc(8.75rem * var(--s2-scale));
   }
 
-  ._va11 {
+  ._va12 {
     flex-shrink: 0;
   }
 
-  ._Hb11 {
+  ._Hb12 {
     object-fit: cover;
   }
 
-  .Jy11 {
+  .Jy12 {
     margin-top: 0;
   }
 
-  .Gy11 {
+  .Gy12 {
     margin-bottom: 0;
   }
 
-  .-_6BNtrc-g11 {
+  .-_6BNtrc-g12 {
     --fs: pow(1.125, 4);
   }
 
-  .we11 {
+  .we12 {
     font-variation-settings: "wght" 800;
   }
 
-  .xe11 {
+  .xe12 {
     font-weight: 800;
   }
 
-  ._Fd11 {
+  ._Fd12 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs))  - 10)) / 22) * .15), 2px);
   }
 
-  .po11 {
+  .po12 {
     color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
   }
 
-  .-_6BNtrc-e11 {
+  .-_6BNtrc-e12 {
     --fs: pow(1.125, 2);
   }
 
-  .-_6BNtrc-d11 {
+  .-_6BNtrc-d12 {
     --fs: pow(1.125, 1);
   }
 
-  .vx11 {
+  .vx12 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .wb11 {
+  .wb12 {
     font-variation-settings: "wght" 400;
   }
 
-  .xb11 {
+  .xb12 {
     font-weight: 400;
   }
 
-  ._xa11 {
+  ._xa12 {
     font-synthesis-weight: none;
   }
 
-  ._Fb11 {
+  ._Fb12 {
     line-height: 1.5;
   }
 
-  .pt11 {
+  .pt12 {
     color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
   }
 
-  .IM11 {
+  .IM12 {
     margin-inline-start: auto;
   }
 
-  .La11 {
+  .La12 {
     max-width: 100%;
   }
 
-  .K40ub4c11 {
+  .K40ub4c12 {
     max-height: inherit;
   }
 
-  ._oa11 {
+  ._oa12 {
     box-sizing: border-box;
   }
 
-  ._Le11 {
+  ._Le12 {
     outline-style: none;
   }
 
-  .uk11 {
+  .uk12 {
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .oi11 {
+  .oi12 {
     border-start-start-radius: inherit;
   }
 
-  .ni11 {
+  .ni12 {
     border-start-end-radius: inherit;
   }
 
-  .ki11 {
+  .ki12 {
     border-end-start-radius: inherit;
   }
 
-  .ji11 {
+  .ji12 {
     border-end-end-radius: inherit;
   }
 
-  ._Na11 {
+  ._Na12 {
     overflow-x: auto;
   }
 
-  .Pa11 {
+  .Pa12 {
     overflow-y: auto;
   }
 
-  .qg11 {
+  .qg12 {
     column-gap: .75rem;
   }
 
-  .Re11 {
+  .Re12 {
     padding-inline-end: 12px;
   }
 
-  .Te11 {
+  .Te12 {
     padding-top: 12px;
   }
 
-  ._ub11 {
+  ._ub12 {
     flex-grow: 1;
   }
 
-  .Jz11 {
+  .Jz12 {
     margin-top: 1.25rem;
   }
 
-  .GC11 {
+  .GC12 {
     margin-bottom: 1rem;
   }
 
-  .Ue11 {
+  .Ue12 {
     row-gap: .5rem;
   }
 
-  ._ta11 {
+  ._ta12 {
     flex-direction: column;
   }
 
-  .ed11 {
+  .ed12 {
     align-items: start;
   }
 
-  .Gx11 {
+  .Gx12 {
     margin-bottom: .75rem;
   }
 
-  .sd11 {
+  .sd12 {
     display: flex;
   }
 
-  .Sk11 {
+  .Sk12 {
     padding-inline-start: 32px;
   }
 
-  .Rk11 {
+  .Rk12 {
     padding-inline-end: 32px;
   }
 
-  .Qk11 {
+  .Qk12 {
     padding-bottom: 32px;
   }
 
-  .Tk11 {
+  .Tk12 {
     padding-top: 32px;
   }
 
-  .Uj11 {
+  .Uj12 {
     row-gap: 1.5rem;
   }
 
-  .qj11 {
+  .qj12 {
     column-gap: 1.5rem;
   }
 
-  .eb11 {
+  .eb12 {
     align-items: center;
   }
 
-  ._wb11 {
+  ._wb12 {
     flex-wrap: wrap;
   }
 }
 
 @layer _.b {
-  .wX0cczbd11:is(:lang(ja), :lang(ko), :lang(zh)) {
+  .wX0cczbd12:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-variation-settings: "wght" 700;
   }
 
-  .xX0cczbd11:is(:lang(ja), :lang(ko), :lang(zh)) {
+  .xX0cczbd12:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-weight: 700;
   }
 
-  ._xX0cczba11:is(:lang(ja), :lang(ko), :lang(zh)) {
+  ._xX0cczba12:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-synthesis-weight: none;
   }
 
-  ._FezxGHba11:is(:lang(ar), :lang(he)) {
+  ._FezxGHba12:is(:lang(ar), :lang(he)) {
     line-height: 1.3;
   }
 
-  ._FnuYUwec11:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUwec12:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.7;
   }
 
-  .uch11:lang(ar) {
+  .uch12:lang(ar) {
     font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .Jay11:empty {
+  .Jay12:empty {
     margin-top: 0;
   }
 
-  .Gay11:empty {
+  .Gay12:empty {
     margin-bottom: 0;
   }
 
-  .Tad11:empty {
+  .Tad12:empty {
     padding-top: 0;
   }
 }
 
 @layer _.c {
-  .wezxGHbd11:is(:lang(ar), :lang(he)) {
+  .wezxGHbd12:is(:lang(ar), :lang(he)) {
     font-variation-settings: "wght" 700;
   }
 
-  .xezxGHbd11:is(:lang(ar), :lang(he)) {
+  .xezxGHbd12:is(:lang(ar), :lang(he)) {
     font-weight: 700;
   }
 
-  ._xezxGHba11:is(:lang(ar), :lang(he)) {
+  ._xezxGHba12:is(:lang(ar), :lang(he)) {
     font-synthesis-weight: none;
   }
 
-  ._FnuYUweb11:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb12:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 
-  .udi11:lang(he) {
+  .udi12:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .wfe11:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  .wfe12:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-variation-settings: "wght" 800;
   }
 
-  .xfe11:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  .xfe12:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-weight: 800;
   }
 
-  ._xfa11:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._xfa12:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-synthesis-weight: none;
   }
 
-  .uea11:lang(ja) {
+  .uea12: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 {
-  .wfX0cczbd11:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  .wfX0cczbd12:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-variation-settings: "wght" 700;
   }
 
-  .xfX0cczbd11:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  .xfX0cczbd12:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-weight: 700;
   }
 
-  ._xfX0cczba11:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._xfX0cczba12:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-synthesis-weight: none;
   }
 
-  .ugb11:lang(ko) {
+  .ugb12:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .wfezxGHbd11:is(:lang(ar), :lang(he)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  .wfezxGHbd12:is(:lang(ar), :lang(he)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-variation-settings: "wght" 700;
   }
 
-  .xfezxGHbd11:is(:lang(ar), :lang(he)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  .xfezxGHbd12:is(:lang(ar), :lang(he)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-weight: 700;
   }
 
-  ._xfezxGHba11:is(:lang(ar), :lang(he)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._xfezxGHba12:is(:lang(ar), :lang(he)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-synthesis-weight: none;
   }
 
-  .uhd11:lang(zh) {
+  .uhd12:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje11:lang(zh-hant) {
+  .uje12: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 {
-  .u2NhKxcl11:lang(zh-HK) {
+  .u2NhKxcl12: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 {
-  .uic11:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .uic12: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.m {
-  @media (height < 25rem) {
-    .Pme11 {
+@layer _.b._7GYNyb {
+  @container (height < 31.25rem) {
+    ._v7GYNyba12 {
+      flex-shrink: 0;
+    }
+
+    .P7GYNybe12 {
       overflow-y: visible;
     }
   }
@@ -342,11 +346,11 @@
 
 @layer _.b.n {
   @media (width >= 40rem) {
-    ._tnc11 {
+    ._tnc12 {
       flex-direction: row;
     }
 
-    .enb11 {
+    .enb12 {
       align-items: center;
     }
   }

package/dist/Dialog.css.map

@@ -1 +1 @@
-{"mappings":"ACwCc;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAOE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMD;;;;EAkBA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKK;;;;EAAA;;;;EAKO;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8CF;;;;EAAA;;;;EAAA;;;;EAiBE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqCU;;;;EAiBZ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAvJT;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBD;;;;EAUY;;;;EA+DA;;;;EAAA;;;;EAsDF;;;;;AAvJT;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMD;;;;;AANC;EAAA;;;;EAAA;;;;EAAA;;;;EAMD;;;;;AANC;EAAA;;;;EAAA;;;;EAAA;;;;EAMD;;;;;AANC;EAAA;;;;EAAA;;;;EAAA;;;;EAMD;;;;;AANC;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAUC;EAAA;IAAA;;;;;;AAuFU;EAAA;IAAA;;;;IAAA","sources":["ebf76300d207adbd","packages/@react-spectrum/s2/src/Dialog.tsx"],"sourcesContent":["@import \"41c4aa1296799ea1\";\n@import \"b6cb6ab59865bde8\";\n@import \"c2aa69bcd8dab7fb\";\n@import \"e9cdd4f3ada8c5d9\";\n@import \"722603297b70d86b\";\n@import \"d1b118504b390ed5\";\n@import \"a59d0f5a0e9cb2ac\";\n@import \"26ac236cb46f8555\";\n@import \"8b070308c4891c21\";\n@import \"5ec9bfe5eed7daff\";\n@import \"7eb24a82f7ffd3c6\";\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 {CloseButton} from './CloseButton';\nimport {composeRenderProps, OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';\nimport {ContentContext, FooterContext, HeaderContext, HeadingContext} from './Content';\nimport {DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {ImageContext} from './Image';\nimport {Modal} from './Modal';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\n\n// TODO: what style overrides should be allowed?\nexport interface DialogProps extends Omit<RACDialogProps, 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps {\n  /**\n   * Whether the Dialog is dismissible.\n   */\n  isDismissible?: boolean,\n  /**\n   * The size of the Dialog.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean\n}\n\nconst image = style({\n  width: 'full',\n  height: 140,\n  flexShrink: 0,\n  objectFit: 'cover'\n});\n\nconst heading = style({\n  flexGrow: 1,\n  marginY: 0,\n  font: 'heading'\n});\n\nconst header = style({\n  font: 'body-lg'\n});\n\nconst content =  style({\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    [`@media (height < ${400 / 16}rem)`]: 'visible'\n  },\n  font: 'body',\n  // TODO: adjust margin on mobile?\n  paddingX: {\n    default: 32\n  }\n});\n\nconst footer = style({\n  flexGrow: 1,\n  font: 'body'\n});\n\nconst buttonGroup = style({\n  marginStart: 'auto',\n  maxWidth: 'full'\n});\n\nexport const dialogInner = style({\n  display: 'flex',\n  flexDirection: 'column',\n  flexGrow: 1,\n  maxHeight: 'inherit',\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  fontFamily: 'sans',\n  borderRadius: 'inherit',\n  overflow: 'auto'\n});\n\n/**\n * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.\n * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.\n */\nexport const Dialog = forwardRef(function Dialog(props: DialogProps, ref: DOMRef) {\n  let {size = 'M', isDismissible, isKeyboardDismissDisabled} = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <Modal size={size} isDismissable={isDismissible} 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          // Render the children multiple times inside the wrappers we need to implement the layout.\n          // Each instance hides certain children so that they are all rendered in the correct locations.\n          // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n          <OverlayTriggerStateContext.Provider value={null}>\n            {/* Hero image */}\n            <Provider\n              values={[\n                [ImageContext, {styles: image}],\n                [HeadingContext, {isHidden: true}],\n                [HeaderContext, {isHidden: true}],\n                [ContentContext, {isHidden: true}],\n                [FooterContext, {isHidden: true}],\n                [ButtonGroupContext, {isHidden: true}]\n              ]}>\n              {children}\n            </Provider>\n            {/* Top header: heading, header, dismiss button, and button group (in fullscreen dialogs). */}\n            <div\n              className={style({\n                // Wrapper that creates the margin for the dismiss button.\n                display: 'flex',\n                alignItems: 'start',\n                columnGap: 12,\n                paddingStart: {\n                  default: 32\n                },\n                paddingEnd: {\n                  default: 32,\n                  isDismissible: 12\n                },\n                paddingTop: {\n                  default: 12 // margin to dismiss button\n                }\n              })({isDismissible: props.isDismissible})}>\n              <div\n                className={style({\n                  // Wrapper for heading, header, and button group.\n                  // This swaps orientation from horizontal to vertical at small screen sizes.\n                  display: 'flex',\n                  flexGrow: 1,\n                  marginTop: {\n                    default: 20, // 32 - 12 (handled above)\n                    ':empty': 0\n                  },\n                  marginBottom: {\n                    default: 16,\n                    ':empty': 0\n                  },\n                  columnGap: 24,\n                  rowGap: 8,\n                  flexDirection: {\n                    default: 'column',\n                    sm: 'row'\n                  },\n                  alignItems: {\n                    default: 'start',\n                    sm: 'center'\n                  }\n                })}>\n                <Provider\n                  values={[\n                    [ImageContext, {hidden: true}],\n                    [HeadingContext, {styles: heading}],\n                    [HeaderContext, {styles: header}],\n                    [ContentContext, {isHidden: true}],\n                    [FooterContext, {isHidden: true}],\n                    [ButtonGroupContext, {isHidden: true}]\n                  ]}>\n                  {children}\n                </Provider>\n              </div>\n              {props.isDismissible && \n                <CloseButton styles={style({marginBottom: 12})} />\n              }\n            </div>\n            {/* Main content */}\n            <Provider\n              values={[\n                [ImageContext, {hidden: true}],\n                [HeadingContext, {isHidden: true}],\n                [HeaderContext, {isHidden: true}],\n                [ContentContext, {styles: content}],\n                [FooterContext, {isHidden: true}],\n                [ButtonGroupContext, {isHidden: true}]\n              ]}>\n              {children}\n            </Provider>\n            {/* Footer and button group */}\n            <div\n              className={style({\n                display: 'flex',\n                paddingX: {\n                  default: 32\n                },\n                paddingBottom: {\n                  default: 32\n                },\n                paddingTop: {\n                  default: 32,\n                  ':empty': 0\n                },\n                gap: 24,\n                alignItems: 'center',\n                flexWrap: 'wrap'\n              })}>\n              <Provider\n                values={[\n                  [ImageContext, {hidden: true}],\n                  [HeadingContext, {isHidden: true}],\n                  [HeaderContext, {isHidden: true}],\n                  [ContentContext, {isHidden: true}],\n                  [FooterContext, {styles: footer}],\n                  [ButtonGroupContext, {isHidden: props.isDismissible, styles: buttonGroup, align: 'end'}]\n                ]}>\n                {children}\n              </Provider>\n            </div>\n          </OverlayTriggerStateContext.Provider>\n        ))}\n      </RACDialog>\n    </Modal>\n  );\n});\n"],"names":[],"version":3,"file":"Dialog.css.map"}
+{"mappings":"ACwCc;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAOE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMD;;;;EAqBA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKK;;;;EAAA;;;;EAKO;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8CF;;;;EAAA;;;;EAAA;;;;EAiBE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqCU;;;;EAiBZ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA1JT;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2BD;;;;EAUY;;;;EA+DA;;;;EAAA;;;;EAsDF;;;;;AA1JT;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMD;;;;;AANC;EAAA;;;;EAAA;;;;EAAA;;;;EAMD;;;;;AANC;EAAA;;;;EAAA;;;;EAAA;;;;EAMD;;;;;AANC;EAAA;;;;EAAA;;;;EAAA;;;;EAMD;;;;;AANC;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAUC;EAAA;IAAA;;;;IAAA;;;;;;AA0FU;EAAA;IAAA;;;;IAAA","sources":["ebf76300d207adbd","packages/@react-spectrum/s2/src/Dialog.tsx"],"sourcesContent":["@import \"41c4aa1296799ea1\";\n@import \"b6cb6ab59865bde8\";\n@import \"c2aa69bcd8dab7fb\";\n@import \"e9cdd4f3ada8c5d9\";\n@import \"722603297b70d86b\";\n@import \"d1b118504b390ed5\";\n@import \"a59d0f5a0e9cb2ac\";\n@import \"26ac236cb46f8555\";\n@import \"8b070308c4891c21\";\n@import \"5ec9bfe5eed7daff\";\n@import \"7eb24a82f7ffd3c6\";\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 {CloseButton} from './CloseButton';\nimport {composeRenderProps, OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';\nimport {ContentContext, FooterContext, HeaderContext, HeadingContext} from './Content';\nimport {DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {ImageContext} from './Image';\nimport {Modal} from './Modal';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\n\n// TODO: what style overrides should be allowed?\nexport interface DialogProps extends Omit<RACDialogProps, 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps {\n  /**\n   * Whether the Dialog is dismissible.\n   */\n  isDismissible?: boolean,\n  /**\n   * The size of the Dialog.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean\n}\n\nconst image = style({\n  width: 'full',\n  height: 140,\n  flexShrink: 0,\n  objectFit: 'cover'\n});\n\nconst heading = style({\n  flexGrow: 1,\n  marginY: 0,\n  font: 'heading'\n});\n\nconst header = style({\n  font: 'body-lg'\n});\n\nconst content =  style({\n  flexGrow: 1,\n  flexShrink: {\n    [`@container (height < ${500 / 16}rem)`]: 0\n  },\n  overflowY: {\n    default: 'auto',\n    // Make the whole dialog scroll rather than only the content when the height is small.\n    [`@container (height < ${500 / 16}rem)`]: 'visible'\n  },\n  font: 'body',\n  // TODO: adjust margin on mobile?\n  paddingX: {\n    default: 32\n  }\n});\n\nconst footer = style({\n  flexGrow: 1,\n  font: 'body'\n});\n\nconst buttonGroup = style({\n  marginStart: 'auto',\n  maxWidth: 'full'\n});\n\nexport const dialogInner = style({\n  display: 'flex',\n  flexDirection: 'column',\n  flexGrow: 1,\n  maxHeight: 'inherit',\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  fontFamily: 'sans',\n  borderRadius: 'inherit',\n  overflow: 'auto'\n});\n\n/**\n * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.\n * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.\n */\nexport const Dialog = forwardRef(function Dialog(props: DialogProps, ref: DOMRef) {\n  let {size = 'M', isDismissible, isKeyboardDismissDisabled} = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <Modal size={size} isDismissable={isDismissible} 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          // Render the children multiple times inside the wrappers we need to implement the layout.\n          // Each instance hides certain children so that they are all rendered in the correct locations.\n          // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n          <OverlayTriggerStateContext.Provider value={null}>\n            {/* Hero image */}\n            <Provider\n              values={[\n                [ImageContext, {styles: image}],\n                [HeadingContext, {isHidden: true}],\n                [HeaderContext, {isHidden: true}],\n                [ContentContext, {isHidden: true}],\n                [FooterContext, {isHidden: true}],\n                [ButtonGroupContext, {isHidden: true}]\n              ]}>\n              {children}\n            </Provider>\n            {/* Top header: heading, header, dismiss button, and button group (in fullscreen dialogs). */}\n            <div\n              className={style({\n                // Wrapper that creates the margin for the dismiss button.\n                display: 'flex',\n                alignItems: 'start',\n                columnGap: 12,\n                paddingStart: {\n                  default: 32\n                },\n                paddingEnd: {\n                  default: 32,\n                  isDismissible: 12\n                },\n                paddingTop: {\n                  default: 12 // margin to dismiss button\n                }\n              })({isDismissible: props.isDismissible})}>\n              <div\n                className={style({\n                  // Wrapper for heading, header, and button group.\n                  // This swaps orientation from horizontal to vertical at small screen sizes.\n                  display: 'flex',\n                  flexGrow: 1,\n                  marginTop: {\n                    default: 20, // 32 - 12 (handled above)\n                    ':empty': 0\n                  },\n                  marginBottom: {\n                    default: 16,\n                    ':empty': 0\n                  },\n                  columnGap: 24,\n                  rowGap: 8,\n                  flexDirection: {\n                    default: 'column',\n                    sm: 'row'\n                  },\n                  alignItems: {\n                    default: 'start',\n                    sm: 'center'\n                  }\n                })}>\n                <Provider\n                  values={[\n                    [ImageContext, {hidden: true}],\n                    [HeadingContext, {styles: heading}],\n                    [HeaderContext, {styles: header}],\n                    [ContentContext, {isHidden: true}],\n                    [FooterContext, {isHidden: true}],\n                    [ButtonGroupContext, {isHidden: true}]\n                  ]}>\n                  {children}\n                </Provider>\n              </div>\n              {props.isDismissible && \n                <CloseButton styles={style({marginBottom: 12})} />\n              }\n            </div>\n            {/* Main content */}\n            <Provider\n              values={[\n                [ImageContext, {hidden: true}],\n                [HeadingContext, {isHidden: true}],\n                [HeaderContext, {isHidden: true}],\n                [ContentContext, {styles: content}],\n                [FooterContext, {isHidden: true}],\n                [ButtonGroupContext, {isHidden: true}]\n              ]}>\n              {children}\n            </Provider>\n            {/* Footer and button group */}\n            <div\n              className={style({\n                display: 'flex',\n                paddingX: {\n                  default: 32\n                },\n                paddingBottom: {\n                  default: 32\n                },\n                paddingTop: {\n                  default: 32,\n                  ':empty': 0\n                },\n                gap: 24,\n                alignItems: 'center',\n                flexWrap: 'wrap'\n              })}>\n              <Provider\n                values={[\n                  [ImageContext, {hidden: true}],\n                  [HeadingContext, {isHidden: true}],\n                  [HeaderContext, {isHidden: true}],\n                  [ContentContext, {isHidden: true}],\n                  [FooterContext, {styles: footer}],\n                  [ButtonGroupContext, {isHidden: props.isDismissible, styles: buttonGroup, align: 'end'}]\n                ]}>\n                {children}\n              </Provider>\n            </div>\n          </OverlayTriggerStateContext.Provider>\n        ))}\n      </RACDialog>\n    </Modal>\n  );\n});\n"],"names":[],"version":3,"file":"Dialog.css.map"}

package/dist/Dialog.mjs

@@ -28,13 +28,13 @@ import {useDOMRef as $9Rtwv$useDOMRef} from "@react-spectrum/utils";
 
 
 
-const $9bbc115952dac5a6$var$image = " Za11 FC11 _va11 _Hb11";
-const $9bbc115952dac5a6$var$heading = " _ub11 Jy11 Gy11 uk11 uch11 udi11 uea11 ugb11 uhd11 uje11 u2NhKxcl11 uic11 -_6BNtrc-g11 vx11 we11 xe11 _xa11 wX0cczbd11 xX0cczbd11 _xX0cczba11 wezxGHbd11 xezxGHbd11 _xezxGHba11 wfe11 xfe11 _xfa11 wfX0cczbd11 xfX0cczbd11 _xfX0cczba11 wfezxGHbd11 xfezxGHbd11 _xfezxGHba11 _Fd11 _FezxGHba11 _FnuYUweb11 po11";
-const $9bbc115952dac5a6$var$header = " uk11 uch11 udi11 uea11 ugb11 uhd11 uje11 u2NhKxcl11 uic11 -_6BNtrc-e11 vx11 wb11 xb11 _xa11 _Fb11 _FnuYUwec11 pt11";
-const $9bbc115952dac5a6$var$content = " _ub11 Pa11 Pme11 uk11 uch11 udi11 uea11 ugb11 uhd11 uje11 u2NhKxcl11 uic11 -_6BNtrc-d11 vx11 wb11 xb11 _xa11 _Fb11 _FnuYUwec11 pt11 Sk11 Rk11";
-const $9bbc115952dac5a6$var$footer = " _ub11 uk11 uch11 udi11 uea11 ugb11 uhd11 uje11 u2NhKxcl11 uic11 -_6BNtrc-d11 vx11 wb11 xb11 _xa11 _Fb11 _FnuYUwec11 pt11";
-const $9bbc115952dac5a6$var$buttonGroup = " IM11 La11";
-const $9bbc115952dac5a6$export$6af31f836f9aa6f2 = " sd11 _ta11 _ub11 K40ub4c11 _oa11 _Le11 uk11 uch11 udi11 uea11 ugb11 uhd11 uje11 u2NhKxcl11 uic11 oi11 ni11 ki11 ji11 _Na11 Pa11";
+const $9bbc115952dac5a6$var$image = " Za12 FC12 _va12 _Hb12";
+const $9bbc115952dac5a6$var$heading = " _ub12 Jy12 Gy12 uk12 uch12 udi12 uea12 ugb12 uhd12 uje12 u2NhKxcl12 uic12 -_6BNtrc-g12 vx12 we12 xe12 _xa12 wX0cczbd12 xX0cczbd12 _xX0cczba12 wezxGHbd12 xezxGHbd12 _xezxGHba12 wfe12 xfe12 _xfa12 wfX0cczbd12 xfX0cczbd12 _xfX0cczba12 wfezxGHbd12 xfezxGHbd12 _xfezxGHba12 _Fd12 _FezxGHba12 _FnuYUweb12 po12";
+const $9bbc115952dac5a6$var$header = " uk12 uch12 udi12 uea12 ugb12 uhd12 uje12 u2NhKxcl12 uic12 -_6BNtrc-e12 vx12 wb12 xb12 _xa12 _Fb12 _FnuYUwec12 pt12";
+const $9bbc115952dac5a6$var$content = " _ub12 _v7GYNyba12 Pa12 P7GYNybe12 uk12 uch12 udi12 uea12 ugb12 uhd12 uje12 u2NhKxcl12 uic12 -_6BNtrc-d12 vx12 wb12 xb12 _xa12 _Fb12 _FnuYUwec12 pt12 Sk12 Rk12";
+const $9bbc115952dac5a6$var$footer = " _ub12 uk12 uch12 udi12 uea12 ugb12 uhd12 uje12 u2NhKxcl12 uic12 -_6BNtrc-d12 vx12 wb12 xb12 _xa12 _Fb12 _FnuYUwec12 pt12";
+const $9bbc115952dac5a6$var$buttonGroup = " IM12 La12";
+const $9bbc115952dac5a6$export$6af31f836f9aa6f2 = " sd12 _ta12 _ub12 K40ub4c12 _oa12 _Le12 uk12 uch12 udi12 uea12 ugb12 uhd12 uje12 u2NhKxcl12 uic12 oi12 ni12 ki12 ji12 _Na12 Pa12";
 const $9bbc115952dac5a6$export$3ddf2d174ce01153 = /*#__PURE__*/ (0, $9Rtwv$forwardRef)(function Dialog(props, ref) {
     let { size: size = 'M', isDismissible: isDismissible, isKeyboardDismissDisabled: isKeyboardDismissDisabled } = props;
     let domRef = (0, $9Rtwv$useDOMRef)(ref);
@@ -97,20 +97,20 @@ const $9bbc115952dac5a6$export$3ddf2d174ce01153 = /*#__PURE__*/ (0, $9Rtwv$forwa
                         /*#__PURE__*/ (0, $9Rtwv$jsxs)("div", {
                             className: function anonymous(props) {
                                 let rules = " ";
-                                rules += ' sd11';
-                                rules += ' ed11';
-                                rules += ' qg11';
-                                rules += ' Sk11';
-                                if (props.isDismissible) rules += ' Re11';
-                                else rules += ' Rk11';
-                                rules += ' Te11';
+                                rules += ' sd12';
+                                rules += ' ed12';
+                                rules += ' qg12';
+                                rules += ' Sk12';
+                                if (props.isDismissible) rules += ' Re12';
+                                else rules += ' Rk12';
+                                rules += ' Te12';
                                 return rules;
                             }({
                                 isDismissible: props.isDismissible
                             }),
                             children: [
                                 /*#__PURE__*/ (0, $9Rtwv$jsx)("div", {
-                                    className: " sd11 _ub11 Jz11 Jay11 GC11 Gay11 qj11 Ue11 _ta11 _tnc11 ed11 enb11",
+                                    className: " sd12 _ub12 Jz12 Jay12 GC12 Gay12 qj12 Ue12 _ta12 _tnc12 ed12 enb12",
                                     children: /*#__PURE__*/ (0, $9Rtwv$jsx)((0, $9Rtwv$Provider), {
                                         values: [
                                             [
@@ -154,7 +154,7 @@ const $9bbc115952dac5a6$export$3ddf2d174ce01153 = /*#__PURE__*/ (0, $9Rtwv$forwa
                                     })
                                 }),
                                 props.isDismissible && /*#__PURE__*/ (0, $9Rtwv$jsx)((0, $a9cda54c4f47ce52$export$de65de8213222d10), {
-                                    styles: " Gx11"
+                                    styles: " Gx12"
                                 })
                             ]
                         }),
@@ -200,7 +200,7 @@ const $9bbc115952dac5a6$export$3ddf2d174ce01153 = /*#__PURE__*/ (0, $9Rtwv$forwa
                             children: children
                         }),
                         /*#__PURE__*/ (0, $9Rtwv$jsx)("div", {
-                            className: " sd11 Sk11 Rk11 Qk11 Tk11 Tad11 Uj11 qj11 eb11 _wb11",
+                            className: " sd12 Sk12 Rk12 Qk12 Tk12 Tad12 Uj12 qj12 eb12 _wb12",
                             children: /*#__PURE__*/ (0, $9Rtwv$jsx)((0, $9Rtwv$Provider), {
                                 values: [
                                     [

package/dist/Dialog.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Dialog.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 {CloseButton} from './CloseButton';\nimport {composeRenderProps, OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';\nimport {ContentContext, FooterContext, HeaderContext, HeadingContext} from './Content';\nimport {DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {ImageContext} from './Image';\nimport {Modal} from './Modal';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\n\n// TODO: what style overrides should be allowed?\nexport interface DialogProps extends Omit<RACDialogProps, 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps {\n  /**\n   * Whether the Dialog is dismissible.\n   */\n  isDismissible?: boolean,\n  /**\n   * The size of the Dialog.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean\n}\n\nconst image = style({\n  width: 'full',\n  height: 140,\n  flexShrink: 0,\n  objectFit: 'cover'\n});\n\nconst heading = style({\n  flexGrow: 1,\n  marginY: 0,\n  font: 'heading'\n});\n\nconst header = style({\n  font: 'body-lg'\n});\n\nconst content =  style({\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    [`@media (height < ${400 / 16}rem)`]: 'visible'\n  },\n  font: 'body',\n  // TODO: adjust margin on mobile?\n  paddingX: {\n    default: 32\n  }\n});\n\nconst footer = style({\n  flexGrow: 1,\n  font: 'body'\n});\n\nconst buttonGroup = style({\n  marginStart: 'auto',\n  maxWidth: 'full'\n});\n\nexport const dialogInner = style({\n  display: 'flex',\n  flexDirection: 'column',\n  flexGrow: 1,\n  maxHeight: 'inherit',\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  fontFamily: 'sans',\n  borderRadius: 'inherit',\n  overflow: 'auto'\n});\n\n/**\n * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.\n * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.\n */\nexport const Dialog = forwardRef(function Dialog(props: DialogProps, ref: DOMRef) {\n  let {size = 'M', isDismissible, isKeyboardDismissDisabled} = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <Modal size={size} isDismissable={isDismissible} 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          // Render the children multiple times inside the wrappers we need to implement the layout.\n          // Each instance hides certain children so that they are all rendered in the correct locations.\n          // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n          <OverlayTriggerStateContext.Provider value={null}>\n            {/* Hero image */}\n            <Provider\n              values={[\n                [ImageContext, {styles: image}],\n                [HeadingContext, {isHidden: true}],\n                [HeaderContext, {isHidden: true}],\n                [ContentContext, {isHidden: true}],\n                [FooterContext, {isHidden: true}],\n                [ButtonGroupContext, {isHidden: true}]\n              ]}>\n              {children}\n            </Provider>\n            {/* Top header: heading, header, dismiss button, and button group (in fullscreen dialogs). */}\n            <div\n              className={style({\n                // Wrapper that creates the margin for the dismiss button.\n                display: 'flex',\n                alignItems: 'start',\n                columnGap: 12,\n                paddingStart: {\n                  default: 32\n                },\n                paddingEnd: {\n                  default: 32,\n                  isDismissible: 12\n                },\n                paddingTop: {\n                  default: 12 // margin to dismiss button\n                }\n              })({isDismissible: props.isDismissible})}>\n              <div\n                className={style({\n                  // Wrapper for heading, header, and button group.\n                  // This swaps orientation from horizontal to vertical at small screen sizes.\n                  display: 'flex',\n                  flexGrow: 1,\n                  marginTop: {\n                    default: 20, // 32 - 12 (handled above)\n                    ':empty': 0\n                  },\n                  marginBottom: {\n                    default: 16,\n                    ':empty': 0\n                  },\n                  columnGap: 24,\n                  rowGap: 8,\n                  flexDirection: {\n                    default: 'column',\n                    sm: 'row'\n                  },\n                  alignItems: {\n                    default: 'start',\n                    sm: 'center'\n                  }\n                })}>\n                <Provider\n                  values={[\n                    [ImageContext, {hidden: true}],\n                    [HeadingContext, {styles: heading}],\n                    [HeaderContext, {styles: header}],\n                    [ContentContext, {isHidden: true}],\n                    [FooterContext, {isHidden: true}],\n                    [ButtonGroupContext, {isHidden: true}]\n                  ]}>\n                  {children}\n                </Provider>\n              </div>\n              {props.isDismissible && \n                <CloseButton styles={style({marginBottom: 12})} />\n              }\n            </div>\n            {/* Main content */}\n            <Provider\n              values={[\n                [ImageContext, {hidden: true}],\n                [HeadingContext, {isHidden: true}],\n                [HeaderContext, {isHidden: true}],\n                [ContentContext, {styles: content}],\n                [FooterContext, {isHidden: true}],\n                [ButtonGroupContext, {isHidden: true}]\n              ]}>\n              {children}\n            </Provider>\n            {/* Footer and button group */}\n            <div\n              className={style({\n                display: 'flex',\n                paddingX: {\n                  default: 32\n                },\n                paddingBottom: {\n                  default: 32\n                },\n                paddingTop: {\n                  default: 32,\n                  ':empty': 0\n                },\n                gap: 24,\n                alignItems: 'center',\n                flexWrap: 'wrap'\n              })}>\n              <Provider\n                values={[\n                  [ImageContext, {hidden: true}],\n                  [HeadingContext, {isHidden: true}],\n                  [HeaderContext, {isHidden: true}],\n                  [ContentContext, {isHidden: true}],\n                  [FooterContext, {styles: footer}],\n                  [ButtonGroupContext, {isHidden: props.isDismissible, styles: buttonGroup, align: 'end'}]\n                ]}>\n                {children}\n              </Provider>\n            </div>\n          </OverlayTriggerStateContext.Provider>\n        ))}\n      </RACDialog>\n    </Modal>\n  );\n});\n"],"names":[],"version":3,"file":"Dialog.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Dialog.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 {CloseButton} from './CloseButton';\nimport {composeRenderProps, OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';\nimport {ContentContext, FooterContext, HeaderContext, HeadingContext} from './Content';\nimport {DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {ImageContext} from './Image';\nimport {Modal} from './Modal';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\n\n// TODO: what style overrides should be allowed?\nexport interface DialogProps extends Omit<RACDialogProps, 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps {\n  /**\n   * Whether the Dialog is dismissible.\n   */\n  isDismissible?: boolean,\n  /**\n   * The size of the Dialog.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean\n}\n\nconst image = style({\n  width: 'full',\n  height: 140,\n  flexShrink: 0,\n  objectFit: 'cover'\n});\n\nconst heading = style({\n  flexGrow: 1,\n  marginY: 0,\n  font: 'heading'\n});\n\nconst header = style({\n  font: 'body-lg'\n});\n\nconst content =  style({\n  flexGrow: 1,\n  flexShrink: {\n    [`@container (height < ${500 / 16}rem)`]: 0\n  },\n  overflowY: {\n    default: 'auto',\n    // Make the whole dialog scroll rather than only the content when the height is small.\n    [`@container (height < ${500 / 16}rem)`]: 'visible'\n  },\n  font: 'body',\n  // TODO: adjust margin on mobile?\n  paddingX: {\n    default: 32\n  }\n});\n\nconst footer = style({\n  flexGrow: 1,\n  font: 'body'\n});\n\nconst buttonGroup = style({\n  marginStart: 'auto',\n  maxWidth: 'full'\n});\n\nexport const dialogInner = style({\n  display: 'flex',\n  flexDirection: 'column',\n  flexGrow: 1,\n  maxHeight: 'inherit',\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  fontFamily: 'sans',\n  borderRadius: 'inherit',\n  overflow: 'auto'\n});\n\n/**\n * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.\n * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.\n */\nexport const Dialog = forwardRef(function Dialog(props: DialogProps, ref: DOMRef) {\n  let {size = 'M', isDismissible, isKeyboardDismissDisabled} = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <Modal size={size} isDismissable={isDismissible} 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          // Render the children multiple times inside the wrappers we need to implement the layout.\n          // Each instance hides certain children so that they are all rendered in the correct locations.\n          // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n          <OverlayTriggerStateContext.Provider value={null}>\n            {/* Hero image */}\n            <Provider\n              values={[\n                [ImageContext, {styles: image}],\n                [HeadingContext, {isHidden: true}],\n                [HeaderContext, {isHidden: true}],\n                [ContentContext, {isHidden: true}],\n                [FooterContext, {isHidden: true}],\n                [ButtonGroupContext, {isHidden: true}]\n              ]}>\n              {children}\n            </Provider>\n            {/* Top header: heading, header, dismiss button, and button group (in fullscreen dialogs). */}\n            <div\n              className={style({\n                // Wrapper that creates the margin for the dismiss button.\n                display: 'flex',\n                alignItems: 'start',\n                columnGap: 12,\n                paddingStart: {\n                  default: 32\n                },\n                paddingEnd: {\n                  default: 32,\n                  isDismissible: 12\n                },\n                paddingTop: {\n                  default: 12 // margin to dismiss button\n                }\n              })({isDismissible: props.isDismissible})}>\n              <div\n                className={style({\n                  // Wrapper for heading, header, and button group.\n                  // This swaps orientation from horizontal to vertical at small screen sizes.\n                  display: 'flex',\n                  flexGrow: 1,\n                  marginTop: {\n                    default: 20, // 32 - 12 (handled above)\n                    ':empty': 0\n                  },\n                  marginBottom: {\n                    default: 16,\n                    ':empty': 0\n                  },\n                  columnGap: 24,\n                  rowGap: 8,\n                  flexDirection: {\n                    default: 'column',\n                    sm: 'row'\n                  },\n                  alignItems: {\n                    default: 'start',\n                    sm: 'center'\n                  }\n                })}>\n                <Provider\n                  values={[\n                    [ImageContext, {hidden: true}],\n                    [HeadingContext, {styles: heading}],\n                    [HeaderContext, {styles: header}],\n                    [ContentContext, {isHidden: true}],\n                    [FooterContext, {isHidden: true}],\n                    [ButtonGroupContext, {isHidden: true}]\n                  ]}>\n                  {children}\n                </Provider>\n              </div>\n              {props.isDismissible && \n                <CloseButton styles={style({marginBottom: 12})} />\n              }\n            </div>\n            {/* Main content */}\n            <Provider\n              values={[\n                [ImageContext, {hidden: true}],\n                [HeadingContext, {isHidden: true}],\n                [HeaderContext, {isHidden: true}],\n                [ContentContext, {styles: content}],\n                [FooterContext, {isHidden: true}],\n                [ButtonGroupContext, {isHidden: true}]\n              ]}>\n              {children}\n            </Provider>\n            {/* Footer and button group */}\n            <div\n              className={style({\n                display: 'flex',\n                paddingX: {\n                  default: 32\n                },\n                paddingBottom: {\n                  default: 32\n                },\n                paddingTop: {\n                  default: 32,\n                  ':empty': 0\n                },\n                gap: 24,\n                alignItems: 'center',\n                flexWrap: 'wrap'\n              })}>\n              <Provider\n                values={[\n                  [ImageContext, {hidden: true}],\n                  [HeadingContext, {isHidden: true}],\n                  [HeaderContext, {isHidden: true}],\n                  [ContentContext, {isHidden: true}],\n                  [FooterContext, {styles: footer}],\n                  [ButtonGroupContext, {isHidden: props.isDismissible, styles: buttonGroup, align: 'end'}]\n                ]}>\n                {children}\n              </Provider>\n            </div>\n          </OverlayTriggerStateContext.Provider>\n        ))}\n      </RACDialog>\n    </Modal>\n  );\n});\n"],"names":[],"version":3,"file":"Dialog.mjs.map"}