@react-spectrum/s2 0.9.2 → 0.10.1

package/dist/Dialog.css

@@ -1,294 +1,340 @@
 @layer _.a {
-  .Za91 {
+  .Za11 {
     width: 100%;
   }
 
-  .FC91 {
+  .FC11 {
     height: calc(8.75rem * var(--s2-scale));
   }
 
-  ._va91 {
+  ._va11 {
     flex-shrink: 0;
   }
 
-  ._Hb91 {
+  ._Hb11 {
     object-fit: cover;
   }
 
-  .Jy91 {
+  .Jy11 {
     margin-top: 0;
   }
 
-  .Gy91 {
+  .Gy11 {
     margin-bottom: 0;
   }
 
-  .vj91 {
-    font-size: 1.375rem;
+  .-_6BNtrc-g11 {
+    --fs: pow(1.125, 4);
   }
 
-  .we91 {
+  .we11 {
     font-variation-settings: "wght" 800;
   }
 
-  .xe91 {
+  .xe11 {
     font-weight: 800;
   }
 
-  ._Fa91 {
-    line-height: 1.3;
+  ._Fd11 {
+    line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs))  - 10)) / 22) * .15), 2px);
   }
 
-  .po91 {
+  .po11 {
     color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
   }
 
-  .vg91 {
-    font-size: 1.125rem;
+  .-_6BNtrc-e11 {
+    --fs: pow(1.125, 2);
+  }
+
+  .-_6BNtrc-d11 {
+    --fs: pow(1.125, 1);
   }
 
-  .vp91 {
-    font-size: 1rem;
+  .vx11 {
+    font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .wb91 {
+  .wb11 {
     font-variation-settings: "wght" 400;
   }
 
-  .xb91 {
+  .xb11 {
     font-weight: 400;
   }
 
-  ._xa91 {
+  ._xa11 {
     font-synthesis-weight: none;
   }
 
-  ._Fb91 {
+  ._Fb11 {
     line-height: 1.5;
   }
 
-  .pt91 {
+  .pt11 {
     color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
   }
 
-  .IM91 {
+  .IM11 {
     margin-inline-start: auto;
   }
 
-  .La91 {
+  .La11 {
     max-width: 100%;
   }
 
-  .K40ub4c91 {
+  .K40ub4c11 {
     max-height: inherit;
   }
 
-  ._oa91 {
+  ._oa11 {
     box-sizing: border-box;
   }
 
-  ._Le91 {
+  ._Le11 {
     outline-style: none;
   }
 
-  .ug91 {
-    font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+  .uk11 {
+    font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .oi91 {
+  .oi11 {
     border-start-start-radius: inherit;
   }
 
-  .ni91 {
+  .ni11 {
     border-start-end-radius: inherit;
   }
 
-  .ki91 {
+  .ki11 {
     border-end-start-radius: inherit;
   }
 
-  .ji91 {
+  .ji11 {
     border-end-end-radius: inherit;
   }
 
-  ._Na91 {
+  ._Na11 {
     overflow-x: auto;
   }
 
-  .Pa91 {
+  .Pa11 {
     overflow-y: auto;
   }
 
-  .qg91 {
+  .qg11 {
     column-gap: .75rem;
   }
 
-  .Re91 {
+  .Re11 {
     padding-inline-end: 12px;
   }
 
-  .Te91 {
+  .Te11 {
     padding-top: 12px;
   }
 
-  ._ub91 {
+  ._ub11 {
     flex-grow: 1;
   }
 
-  .Jz91 {
+  .Jz11 {
     margin-top: 1.25rem;
   }
 
-  .GC91 {
+  .GC11 {
     margin-bottom: 1rem;
   }
 
-  .Ue91 {
+  .Ue11 {
     row-gap: .5rem;
   }
 
-  ._ta91 {
+  ._ta11 {
     flex-direction: column;
   }
 
-  .ed91 {
+  .ed11 {
     align-items: start;
   }
 
-  .Gx91 {
+  .Gx11 {
     margin-bottom: .75rem;
   }
 
-  .sd91 {
+  .sd11 {
     display: flex;
   }
 
-  .Sk91 {
+  .Sk11 {
     padding-inline-start: 32px;
   }
 
-  .Rk91 {
+  .Rk11 {
     padding-inline-end: 32px;
   }
 
-  .Qk91 {
+  .Qk11 {
     padding-bottom: 32px;
   }
 
-  .Tk91 {
+  .Tk11 {
     padding-top: 32px;
   }
 
-  .Uj91 {
+  .Uj11 {
     row-gap: 1.5rem;
   }
 
-  .qj91 {
+  .qj11 {
     column-gap: 1.5rem;
   }
 
-  .eb91 {
+  .eb11 {
     align-items: center;
   }
 
-  ._wb91 {
+  ._wb11 {
     flex-wrap: wrap;
   }
 }
 
 @layer _.b {
-  .wfe91:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
-    font-variation-settings: "wght" 800;
+  .wX0cczbd11:is(:lang(ja), :lang(ko), :lang(zh)) {
+    font-variation-settings: "wght" 700;
   }
 
-  .xfe91:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
-    font-weight: 800;
+  .xX0cczbd11:is(:lang(ja), :lang(ko), :lang(zh)) {
+    font-weight: 700;
   }
 
-  ._xfa91:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._xX0cczba11:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-synthesis-weight: none;
   }
 
-  ._Ffb91:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
-    line-height: 1.5;
+  ._FezxGHba11:is(:lang(ar), :lang(he)) {
+    line-height: 1.3;
   }
 
-  ._Ffc91:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._FnuYUwec11:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.7;
   }
 
-  .uch91:lang(ar) {
+  .uch11:lang(ar) {
     font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .Jay91:empty {
+  .Jay11:empty {
     margin-top: 0;
   }
 
-  .Gay91:empty {
+  .Gay11:empty {
     margin-bottom: 0;
   }
 
-  .Tad91:empty {
+  .Tad11:empty {
     padding-top: 0;
   }
 }
 
 @layer _.c {
-  .udi91:lang(he) {
+  .wezxGHbd11:is(:lang(ar), :lang(he)) {
+    font-variation-settings: "wght" 700;
+  }
+
+  .xezxGHbd11:is(:lang(ar), :lang(he)) {
+    font-weight: 700;
+  }
+
+  ._xezxGHba11: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)) {
+    line-height: 1.5;
+  }
+
+  .udi11:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .uea91:lang(ja) {
+  .wfe11: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)) {
+    font-weight: 800;
+  }
+
+  ._xfa11:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+    font-synthesis-weight: none;
+  }
+
+  .uea11:lang(ja) {
     font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
   }
 }
 
 @layer _.e {
-  .ugb91:lang(ko) {
+  .wfX0cczbd11: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)) {
+    font-weight: 700;
+  }
+
+  ._xfX0cczba11: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) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd91:lang(zh) {
+  .wfezxGHbd11: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)) {
+    font-weight: 700;
+  }
+
+  ._xfezxGHba11: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) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje91:lang(zh-hant) {
+  .uje11:lang(zh-hant) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.h {
-  .uic91: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;
+  .u2NhKxcl11:lang(zh-HK) {
+    font-family: adobe-clean-han-hong-kong, source-han-hong-kong, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
-@layer _.b.s {
-  @media not ((hover: hover) and (pointer: fine)) {
-    .vsm91 {
-      font-size: 1.6875rem;
-    }
-
-    .vsj91 {
-      font-size: 1.375rem;
-    }
-
-    .vsh91 {
-      font-size: 1.1875rem;
-    }
+@layer _.i {
+  .uic11:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
   }
 }
 
 @layer _.b.m {
   @media (height < 25rem) {
-    .Pme91 {
+    .Pme11 {
       overflow-y: visible;
     }
   }
@@ -296,11 +342,11 @@
 
 @layer _.b.n {
   @media (width >= 40rem) {
-    ._tnc91 {
+    ._tnc11 {
       flex-direction: row;
     }
 
-    .enb91 {
+    .enb11 {
       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;;;;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;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAMD;;;;IAIE;;;;;;AAAA;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} 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'>, 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;;;;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"}

package/dist/Dialog.mjs

@@ -28,13 +28,13 @@ import {useDOMRef as $9Rtwv$useDOMRef} from "@react-spectrum/utils";
 
 
 
-const $9bbc115952dac5a6$var$image = " Za91 FC91 _va91 _Hb91";
-const $9bbc115952dac5a6$var$heading = " _ub91 Jy91 Gy91 ug91 uch91 udi91 uea91 ugb91 uhd91 uje91 uic91 vj91 vsm91 we91 xe91 _xa91 wfe91 xfe91 _xfa91 _Fa91 _Ffb91 po91";
-const $9bbc115952dac5a6$var$header = " ug91 uch91 udi91 uea91 ugb91 uhd91 uje91 uic91 vg91 vsj91 wb91 xb91 _xa91 _Fb91 _Ffc91 pt91";
-const $9bbc115952dac5a6$var$content = " _ub91 Pa91 Pme91 ug91 uch91 udi91 uea91 ugb91 uhd91 uje91 uic91 vp91 vsh91 wb91 xb91 _xa91 _Fb91 _Ffc91 pt91 Sk91 Rk91";
-const $9bbc115952dac5a6$var$footer = " _ub91 ug91 uch91 udi91 uea91 ugb91 uhd91 uje91 uic91 vp91 vsh91 wb91 xb91 _xa91 _Fb91 _Ffc91 pt91";
-const $9bbc115952dac5a6$var$buttonGroup = " IM91 La91";
-const $9bbc115952dac5a6$export$6af31f836f9aa6f2 = " sd91 _ta91 _ub91 K40ub4c91 _oa91 _Le91 ug91 uch91 udi91 uea91 ugb91 uhd91 uje91 uic91 oi91 ni91 ki91 ji91 _Na91 Pa91";
+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$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 += ' sd91';
-                                rules += ' ed91';
-                                rules += ' qg91';
-                                rules += ' Sk91';
-                                if (props.isDismissible) rules += ' Re91';
-                                else rules += ' Rk91';
-                                rules += ' Te91';
+                                rules += ' sd11';
+                                rules += ' ed11';
+                                rules += ' qg11';
+                                rules += ' Sk11';
+                                if (props.isDismissible) rules += ' Re11';
+                                else rules += ' Rk11';
+                                rules += ' Te11';
                                 return rules;
                             }({
                                 isDismissible: props.isDismissible
                             }),
                             children: [
                                 /*#__PURE__*/ (0, $9Rtwv$jsx)("div", {
-                                    className: " sd91 _ub91 Jz91 Jay91 GC91 Gay91 qj91 Ue91 _ta91 _tnc91 ed91 enb91",
+                                    className: " sd11 _ub11 Jz11 Jay11 GC11 Gay11 qj11 Ue11 _ta11 _tnc11 ed11 enb11",
                                     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: " Gx91"
+                                    styles: " Gx11"
                                 })
                             ]
                         }),
@@ -200,7 +200,7 @@ const $9bbc115952dac5a6$export$3ddf2d174ce01153 = /*#__PURE__*/ (0, $9Rtwv$forwa
                             children: children
                         }),
                         /*#__PURE__*/ (0, $9Rtwv$jsx)("div", {
-                            className: " sd91 Sk91 Rk91 Qk91 Tk91 Tad91 Uj91 qj91 eb91 _wb91",
+                            className: " sd11 Sk11 Rk11 Qk11 Tk11 Tad11 Uj11 qj11 eb11 _wb11",
                             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} 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'>, 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',\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"}