@react-spectrum/s2 1.0.0 → 1.2.0

package/dist/ContextualHelp.css.map

@@ -1 +1 @@
-{"mappings":"AC+CoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmEqC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQf;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AARC;EAAA;;;;EAAA;;;;EAAA;;;;EAQD;;;;EAAA;;;;;AARC;EAAA;;;;EAAA;;;;EAKA;;;;;AALA;EAAA;;;;EAAA;;;;EAKA;;;;;AALA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["019fb1fcc3c1598d","packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["@import \"3578337ca657fa78\";\n@import \"a023844b8de14349\";\n@import \"3be9de50ea21a4ea\";\n@import \"5266771b1d67e2fb\";\n@import \"ccaa61f08a335ea7\";\n","import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {ContentContext, FooterContext, HeadingContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement} from '@react-types/overlays';\nimport {Popover, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with { type: 'macro' };\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ContextualHelpStyleProps {\n  /**\n   * Indicates whether contents are informative or provides helpful guidance.\n   *\n   * @default 'help'\n   */\n  variant?: 'info' | 'help'\n}\nexport interface ContextualHelpProps extends\n  Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,\n  Pick<PopoverDialogProps, 'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'>,\n  ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {\n  /**\n   * The placement of the popover with respect to the action button.\n   * @default 'bottom start'\n   */\n  placement?: Placement,\n  /** Contents of the Contextual Help popover. */\n  children: ReactNode,\n  /**\n   * The size of the ActionButton.\n   *\n   * @default 'XS'\n   */\n  size?: 'XS' | 'S'\n}\n\nconst wrappingDiv = style({\n  minWidth: 268,\n  width: 268,\n  padding: 24,\n  boxSizing: 'border-box',\n  height: 'full'\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n  let {\n    children,\n    defaultOpen,\n    containerPadding = 8,\n    size = 'XS',\n    crossOffset,\n    isOpen,\n    onOpenChange,\n    placement = 'bottom start',\n    shouldFlip,\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    variant = 'help'\n  } = props;\n\n  // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n  // manually set the aria-label after useLabels() to keep the order of label\n  // then ContextualHelp variant\n  let labelProps = useLabels(props);\n  let label = stringFormatter.format(`contextualhelp.${variant}`);\n  labelProps['aria-label'] = labelProps['aria-label'] ? labelProps['aria-label'] + ' ' + label : label;\n\n  let buttonProps = filterDOMProps(props, {labelable: true});\n\n  return (\n    <DialogTrigger\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}>\n      <ActionButton\n        slot={null}\n        ref={ref}\n        size={size}\n        {...mergeProps(buttonProps, labelProps)}\n        UNSAFE_style={UNSAFE_style}\n        UNSAFE_className={UNSAFE_className}\n        styles={styles}\n        isQuiet>\n        {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n      </ActionButton>\n      <Popover\n        padding=\"none\"\n        placement={placement}\n        shouldFlip={shouldFlip}\n        containerPadding={containerPadding}\n        offset={8}\n        crossOffset={crossOffset}\n        hideArrow>\n        <div\n          className={wrappingDiv}>\n          <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24}))}>\n            <Provider\n              values={[\n                [TextContext, {\n                  slots: {\n                    [DEFAULT_SLOT]: {}\n                  }\n                }],\n                [HeadingContext, {styles: style({\n                  font: 'heading-xs',\n                  margin: 0,\n                  marginBottom: space(8) // This only makes it 10px on mobile and should be 12px\n                })}],\n                [ContentContext, {styles: style({\n                  font: 'body-sm'\n                })}],\n                [FooterContext, {styles: style({\n                  font: 'body-sm',\n                  marginTop: 16\n                })}]\n              ]}>\n              {children}\n            </Provider>\n          </RACDialog>\n        </div>\n      </Popover>\n    </DialogTrigger>\n  );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.css.map"}
+{"mappings":"AC0BoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBwB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuBP;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA/CjB;EAAA;;;;EAAA;;;;EAAA;;;;EA+CiB;;;;EAAA;;;;;AA/CjB;EAAA;;;;EAAA;;;;EA4CkB;;;;;AA5ClB;EAAA;;;;EAAA;;;;EA4CkB;;;;;AA5ClB;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["019fb1fcc3c1598d","packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["@import \"3578337ca657fa78\";\n@import \"a023844b8de14349\";\n@import \"3be9de50ea21a4ea\";\n@import \"5266771b1d67e2fb\";\n@import \"ccaa61f08a335ea7\";\n","import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {ContentContext, FooterContext, HeadingContext, TextContext as SpectrumTextContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps, mergeProps, useId, useLabels} from '@react-aria/utils';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement} from '@react-types/overlays';\nimport {Popover, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with { type: 'macro' };\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ContextualHelpPopoverProps extends PopoverDialogProps {\n  /**\n   * The children of the contextual help popover. Supports Heading, Content, and Footer elements. */\n  children: ReactNode\n}\n\nconst wrappingDiv = style({\n  minWidth: 268,\n  width: 268,\n  padding: 24,\n  boxSizing: 'border-box',\n  height: 'full'\n});\n\nconst headingStyles = style({\n  font: 'heading-xs',\n  margin: 0,\n  marginBottom: space(8) // This only makes it 10px on mobile and should be 12px\n});\n\n// TODO: docs to come after release, for now this is just mentioned in unavaiable menu docs\n/**\n * A popover with contextual help styling that supports Heading, Content, and Footer.\n */\nexport function ContextualHelpPopover(props: ContextualHelpPopoverProps) {\n  let {children, ...popoverProps} = props;\n  let titleId = useId();\n\n  return (\n    <Popover\n      padding=\"none\"\n      hideArrow\n      aria-labelledby={titleId}\n      {...popoverProps}>\n      <div\n        className={wrappingDiv}>\n        <div\n\n          className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24}))}>\n          <Provider\n            values={[\n              [TextContext, {\n                slots: {\n                  [DEFAULT_SLOT]: {}\n                }\n              }],\n              // Make sure to clear context from above Menu\n              [SpectrumTextContext, null],\n              [HeadingContext, {\n                styles: headingStyles,\n                slots: {\n                  // needed so combobox/picker does not need to provide slot=\"title\" to their provided\n                  // ContextualHelp (they get the aria-labelled by from the button)\n                  // otherwise, use the heading if available aka unavaiable menu item\n                  [DEFAULT_SLOT]: {styles: headingStyles},\n                  title: {id: titleId, styles: headingStyles, level: 2}\n                }\n              }],\n              [ContentContext, {styles: style({\n                font: 'body-sm'\n              })}],\n              [FooterContext, {styles: style({\n                font: 'body-sm',\n                marginTop: 16\n              })}]\n            ]}>\n            {children}\n          </Provider>\n        </div>\n      </div>\n    </Popover>\n  );\n}\n\nexport interface ContextualHelpStyleProps {\n  /**\n   * Indicates whether contents are informative or provides helpful guidance.\n   *\n   * @default 'help'\n   */\n  variant?: 'info' | 'help'\n}\nexport interface ContextualHelpProps extends\n  Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,\n  Pick<PopoverDialogProps, 'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'>,\n  ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {\n  /**\n   * The placement of the popover with respect to the action button.\n   * @default 'bottom start'\n   */\n  placement?: Placement,\n  /** Contents of the Contextual Help popover. */\n  children: ReactNode,\n  /**\n   * The size of the ActionButton.\n   *\n   * @default 'XS'\n   */\n  size?: 'XS' | 'S'\n}\n\nexport const ContextualHelpContext = createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n  let {\n    children,\n    defaultOpen,\n    containerPadding = 8,\n    size = 'XS',\n    crossOffset,\n    isOpen,\n    onOpenChange,\n    placement = 'bottom start',\n    shouldFlip,\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    variant = 'help'\n  } = props;\n\n  // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n  // manually set the aria-label after useLabels() to keep the order of label\n  // then ContextualHelp variant\n  let labelProps = useLabels(props);\n  let label = stringFormatter.format(`contextualhelp.${variant}`);\n  labelProps['aria-label'] = labelProps['aria-label'] ? labelProps['aria-label'] + ' ' + label : label;\n\n  let buttonProps = filterDOMProps(props, {labelable: true});\n\n  return (\n    <DialogTrigger\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}>\n      <ActionButton\n        slot={null}\n        ref={ref}\n        size={size}\n        {...mergeProps(buttonProps, labelProps)}\n        UNSAFE_style={UNSAFE_style}\n        UNSAFE_className={UNSAFE_className}\n        styles={styles}\n        isQuiet>\n        {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n      </ActionButton>\n      <ContextualHelpPopover\n        placement={placement}\n        shouldFlip={shouldFlip}\n        containerPadding={containerPadding}\n        offset={8}\n        crossOffset={crossOffset}>\n        {children}\n      </ContextualHelpPopover>\n    </DialogTrigger>\n  );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.css.map"}

package/dist/ContextualHelp.mjs

@@ -1,6 +1,6 @@
 import "./ContextualHelp.css";
 import {ActionButton as $da878a05ab4a403e$export$cfc7921d29ef7b80} from "./ActionButton.mjs";
-import {ContentContext as $8e847109a6ab556d$export$1cbdd774077931b4, FooterContext as $8e847109a6ab556d$export$5630640b68817ed6, HeadingContext as $8e847109a6ab556d$export$d688439359537581} from "./Content.mjs";
+import {ContentContext as $8e847109a6ab556d$export$1cbdd774077931b4, FooterContext as $8e847109a6ab556d$export$5630640b68817ed6, HeadingContext as $8e847109a6ab556d$export$d688439359537581, TextContext as $8e847109a6ab556d$export$9afb8bc826b033ea} from "./Content.mjs";
 import {dialogInner as $9bbc115952dac5a6$export$6af31f836f9aa6f2} from "./Dialog.mjs";
 import {DialogTrigger as $66262086fa190fcb$export$2e1e1122cf0cba88} from "./DialogTrigger.mjs";
 import $410bd93c9b5189d7$export$2e2bcd8739ae039 from "../icons/HelpCircle.mjs";
@@ -9,10 +9,10 @@ import $bcd4U$intlStringsmjs from "./intlStrings.mjs";
 import {mergeStyles as $feb886035e0d4633$export$e618dc39ac9ad607} from "../icons/runtime.mjs";
 import {Popover as $88b746eba92c8d0d$export$5b6b19405a83ff9d} from "./Popover.mjs";
 import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
-import {jsxs as $bcd4U$jsxs, jsx as $bcd4U$jsx} from "react/jsx-runtime";
-import {Dialog as $bcd4U$Dialog, Provider as $bcd4U$Provider, TextContext as $bcd4U$TextContext, DEFAULT_SLOT as $bcd4U$DEFAULT_SLOT} from "react-aria-components";
+import {jsx as $bcd4U$jsx, jsxs as $bcd4U$jsxs} from "react/jsx-runtime";
+import {Provider as $bcd4U$Provider, TextContext as $bcd4U$TextContext, DEFAULT_SLOT as $bcd4U$DEFAULT_SLOT} from "react-aria-components";
 import {createContext as $bcd4U$createContext, forwardRef as $bcd4U$forwardRef} from "react";
-import {useLabels as $bcd4U$useLabels, filterDOMProps as $bcd4U$filterDOMProps, mergeProps as $bcd4U$mergeProps} from "@react-aria/utils";
+import {useId as $bcd4U$useId, useLabels as $bcd4U$useLabels, filterDOMProps as $bcd4U$filterDOMProps, mergeProps as $bcd4U$mergeProps} from "@react-aria/utils";
 import {useLocalizedStringFormatter as $bcd4U$useLocalizedStringFormatter} from "@react-aria/i18n";
 
 
@@ -34,7 +34,73 @@ function $parcel$interopDefault(a) {
 
 
 
-const $8e176595bc49ca3f$var$wrappingDiv = " NOBje7c1 ZOBje7c1 Th1 Qh1 Sh1 Rh1 _oa1 Fb1";
+const $8e176595bc49ca3f$var$wrappingDiv = " NOBje7c12 ZOBje7c12 Th12 Qh12 Sh12 Rh12 _oa12 Fb12";
+const $8e176595bc49ca3f$var$headingStyles = " uk12 ucJ9TBTb12 ud3Euai12 uea12 ugb12 uhd12 uje12 u2NhKxcl12 uic12 -_6BNtrc-e12 vx12 xe12 _xa12 xX0cczbd12 _xX0cczba12 xfe12 _xfa12 xfX0cczbd12 _xfX0cczba12 _Fd12 _FnuYUweb12 po12 Jy12 Gv12 Iy12 Hy12";
+function $8e176595bc49ca3f$export$218201d297fb4e0d(props) {
+    let { children: children, ...popoverProps } = props;
+    let titleId = (0, $bcd4U$useId)();
+    return /*#__PURE__*/ (0, $bcd4U$jsx)((0, $88b746eba92c8d0d$export$5b6b19405a83ff9d), {
+        padding: "none",
+        hideArrow: true,
+        "aria-labelledby": titleId,
+        ...popoverProps,
+        children: /*#__PURE__*/ (0, $bcd4U$jsx)("div", {
+            className: $8e176595bc49ca3f$var$wrappingDiv,
+            children: /*#__PURE__*/ (0, $bcd4U$jsx)("div", {
+                className: (0, $feb886035e0d4633$export$e618dc39ac9ad607)((0, $9bbc115952dac5a6$export$6af31f836f9aa6f2), " od12 nd12 kd12 jd12 Jnqb3Ob12 Gnqb3Ob12 Inqb3Ob12 Hnqb3Ob12 TjCFGYc12 Qh12 Sh12 Rh12 -T_-Th12"),
+                children: /*#__PURE__*/ (0, $bcd4U$jsx)((0, $bcd4U$Provider), {
+                    values: [
+                        [
+                            (0, $bcd4U$TextContext),
+                            {
+                                slots: {
+                                    [(0, $bcd4U$DEFAULT_SLOT)]: {}
+                                }
+                            }
+                        ],
+                        // Make sure to clear context from above Menu
+                        [
+                            (0, $8e847109a6ab556d$export$9afb8bc826b033ea),
+                            null
+                        ],
+                        [
+                            (0, $8e847109a6ab556d$export$d688439359537581),
+                            {
+                                styles: $8e176595bc49ca3f$var$headingStyles,
+                                slots: {
+                                    // needed so combobox/picker does not need to provide slot="title" to their provided
+                                    // ContextualHelp (they get the aria-labelled by from the button)
+                                    // otherwise, use the heading if available aka unavaiable menu item
+                                    [(0, $bcd4U$DEFAULT_SLOT)]: {
+                                        styles: $8e176595bc49ca3f$var$headingStyles
+                                    },
+                                    title: {
+                                        id: titleId,
+                                        styles: $8e176595bc49ca3f$var$headingStyles,
+                                        level: 2
+                                    }
+                                }
+                            }
+                        ],
+                        [
+                            (0, $8e847109a6ab556d$export$1cbdd774077931b4),
+                            {
+                                styles: " uk12 ucJ9TBTb12 ud3Euai12 uea12 ugb12 uhd12 uje12 u2NhKxcl12 uic12 -_6BNtrc-c12 vx12 xb12 _xa12 _Fb12 _FnuYUwec12 pt12"
+                            }
+                        ],
+                        [
+                            (0, $8e847109a6ab556d$export$5630640b68817ed6),
+                            {
+                                styles: " uk12 ucJ9TBTb12 ud3Euai12 uea12 ugb12 uhd12 uje12 u2NhKxcl12 uic12 -_6BNtrc-c12 vx12 xb12 _xa12 _Fb12 _FnuYUwec12 pt12 JC12"
+                            }
+                        ]
+                    ],
+                    children: children
+                })
+            })
+        })
+    });
+}
 const $8e176595bc49ca3f$export$41b9afaaba473494 = /*#__PURE__*/ (0, $bcd4U$createContext)(null);
 const $8e176595bc49ca3f$export$7d3cdb256c2ba320 = /*#__PURE__*/ (0, $bcd4U$forwardRef)(function ContextualHelp(props, ref) {
     let stringFormatter = (0, $bcd4U$useLocalizedStringFormatter)((0, ($parcel$interopDefault($bcd4U$intlStringsmjs))), '@react-spectrum/s2');
@@ -65,56 +131,18 @@ const $8e176595bc49ca3f$export$7d3cdb256c2ba320 = /*#__PURE__*/ (0, $bcd4U$forwa
                 isQuiet: true,
                 children: variant === 'info' ? /*#__PURE__*/ (0, $bcd4U$jsx)((0, $4c8f17dac3ecefd9$export$2e2bcd8739ae039), {}) : /*#__PURE__*/ (0, $bcd4U$jsx)((0, $410bd93c9b5189d7$export$2e2bcd8739ae039), {})
             }),
-            /*#__PURE__*/ (0, $bcd4U$jsx)((0, $88b746eba92c8d0d$export$5b6b19405a83ff9d), {
-                padding: "none",
+            /*#__PURE__*/ (0, $bcd4U$jsx)($8e176595bc49ca3f$export$218201d297fb4e0d, {
                 placement: placement,
                 shouldFlip: shouldFlip,
                 containerPadding: containerPadding,
                 offset: 8,
                 crossOffset: crossOffset,
-                hideArrow: true,
-                children: /*#__PURE__*/ (0, $bcd4U$jsx)("div", {
-                    className: $8e176595bc49ca3f$var$wrappingDiv,
-                    children: /*#__PURE__*/ (0, $bcd4U$jsx)((0, $bcd4U$Dialog), {
-                        className: (0, $feb886035e0d4633$export$e618dc39ac9ad607)((0, $9bbc115952dac5a6$export$6af31f836f9aa6f2), " od1 nd1 kd1 jd1 Jnqb3Ob1 Gnqb3Ob1 Inqb3Ob1 Hnqb3Ob1 TjCFGYc1 Qh1 Sh1 Rh1 -T_-Th1"),
-                        children: /*#__PURE__*/ (0, $bcd4U$jsx)((0, $bcd4U$Provider), {
-                            values: [
-                                [
-                                    (0, $bcd4U$TextContext),
-                                    {
-                                        slots: {
-                                            [(0, $bcd4U$DEFAULT_SLOT)]: {}
-                                        }
-                                    }
-                                ],
-                                [
-                                    (0, $8e847109a6ab556d$export$d688439359537581),
-                                    {
-                                        styles: " uk1 ucJ9TBTb1 ud3Euai1 uea1 ugb1 uhd1 uje1 u2NhKxcl1 uic1 -_6BNtrc-e1 vx1 xe1 _xa1 xX0cczbd1 _xX0cczba1 xfe1 _xfa1 xfX0cczbd1 _xfX0cczba1 _Fd1 _FnuYUweb1 po1 Jy1 Gv1 Iy1 Hy1"
-                                    }
-                                ],
-                                [
-                                    (0, $8e847109a6ab556d$export$1cbdd774077931b4),
-                                    {
-                                        styles: " uk1 ucJ9TBTb1 ud3Euai1 uea1 ugb1 uhd1 uje1 u2NhKxcl1 uic1 -_6BNtrc-c1 vx1 xb1 _xa1 _Fb1 _FnuYUwec1 pt1"
-                                    }
-                                ],
-                                [
-                                    (0, $8e847109a6ab556d$export$5630640b68817ed6),
-                                    {
-                                        styles: " uk1 ucJ9TBTb1 ud3Euai1 uea1 ugb1 uhd1 uje1 u2NhKxcl1 uic1 -_6BNtrc-c1 vx1 xb1 _xa1 _Fb1 _FnuYUwec1 pt1 JC1"
-                                    }
-                                ]
-                            ],
-                            children: children
-                        })
-                    })
-                })
+                children: children
             })
         ]
     });
 });
 
 
-export {$8e176595bc49ca3f$export$41b9afaaba473494 as ContextualHelpContext, $8e176595bc49ca3f$export$7d3cdb256c2ba320 as ContextualHelp};
+export {$8e176595bc49ca3f$export$218201d297fb4e0d as ContextualHelpPopover, $8e176595bc49ca3f$export$41b9afaaba473494 as ContextualHelpContext, $8e176595bc49ca3f$export$7d3cdb256c2ba320 as ContextualHelp};
 //# sourceMappingURL=ContextualHelp.mjs.map

package/dist/ContextualHelp.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAM;AAQC,MAAM,0DAAwB,CAAA,GAAA,oBAAY,EAAoF;AAK9H,MAAM,0DAAiB,CAAA,GAAA,iBAAS,EAAE,SAAS,eAAe,KAA0B,EAAE,GAAoC;IAC/H,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,eACR,WAAW,oBACX,mBAAmB,SACnB,OAAO,mBACP,WAAW,UACX,MAAM,gBACN,YAAY,aACZ,YAAY,4BACZ,UAAU,oBACV,gBAAgB,gBAChB,YAAY,UACZ,MAAM,WACN,UAAU,QACX,GAAG;IAEJ,4EAA4E;IAC5E,2EAA2E;IAC3E,8BAA8B;IAC9B,IAAI,aAAa,CAAA,GAAA,gBAAQ,EAAE;IAC3B,IAAI,QAAQ,gBAAgB,MAAM,CAAC,CAAC,eAAe,EAAE,SAAS;IAC9D,UAAU,CAAC,aAAa,GAAG,UAAU,CAAC,aAAa,GAAG,UAAU,CAAC,aAAa,GAAG,MAAM,QAAQ;IAE/F,IAAI,cAAc,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IAExD,qBACE,iBAAC,CAAA,GAAA,yCAAY;QACX,QAAQ;QACR,aAAa;QACb,cAAc;;0BACd,gBAAC,CAAA,GAAA,yCAAW;gBACV,MAAM;gBACN,KAAK;gBACL,MAAM;gBACL,GAAG,CAAA,GAAA,iBAAS,EAAE,aAAa,WAAW;gBACvC,cAAc;gBACd,kBAAkB;gBAClB,QAAQ;gBACR,OAAO;0BACN,YAAY,uBAAS,gBAAC,CAAA,GAAA,wCAAO,uBAAO,gBAAC,CAAA,GAAA,wCAAO;;0BAE/C,gBAAC,CAAA,GAAA,yCAAM;gBACL,SAAQ;gBACR,WAAW;gBACX,YAAY;gBACZ,kBAAkB;gBAClB,QAAQ;gBACR,aAAa;gBACb,SAAS;0BACT,cAAA,gBAAC;oBACC,WAAW;8BACX,cAAA,gBAAC,CAAA,GAAA,aAAQ;wBAAE,WAAW,CAAA,GAAA,yCAAU,EAAE,CAAA,GAAA,yCAAU;kCAC1C,cAAA,gBAAC,CAAA,GAAA,eAAO;4BACN,QAAQ;gCACN;oCAAC,CAAA,GAAA,kBAAU;oCAAG;wCACZ,OAAO;4CACL,CAAC,CAAA,GAAA,mBAAW,EAAE,EAAE,CAAC;wCACnB;oCACF;iCAAE;gCACF;oCAAC,CAAA,GAAA,yCAAa;oCAAG;wCAAC,MAAM;oCAItB;iCAAE;gCACJ;oCAAC,CAAA,GAAA,yCAAa;oCAAG;wCAAC,MAAM;oCAEtB;iCAAE;gCACJ;oCAAC,CAAA,GAAA,yCAAY;oCAAG;wCAAC,MAAM;oCAGrB;iCAAE;6BACL;sCACA;;;;;;;AAOf","sources":["packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {ContentContext, FooterContext, HeadingContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement} from '@react-types/overlays';\nimport {Popover, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with { type: 'macro' };\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ContextualHelpStyleProps {\n  /**\n   * Indicates whether contents are informative or provides helpful guidance.\n   *\n   * @default 'help'\n   */\n  variant?: 'info' | 'help'\n}\nexport interface ContextualHelpProps extends\n  Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,\n  Pick<PopoverDialogProps, 'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'>,\n  ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {\n  /**\n   * The placement of the popover with respect to the action button.\n   * @default 'bottom start'\n   */\n  placement?: Placement,\n  /** Contents of the Contextual Help popover. */\n  children: ReactNode,\n  /**\n   * The size of the ActionButton.\n   *\n   * @default 'XS'\n   */\n  size?: 'XS' | 'S'\n}\n\nconst wrappingDiv = style({\n  minWidth: 268,\n  width: 268,\n  padding: 24,\n  boxSizing: 'border-box',\n  height: 'full'\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n  let {\n    children,\n    defaultOpen,\n    containerPadding = 8,\n    size = 'XS',\n    crossOffset,\n    isOpen,\n    onOpenChange,\n    placement = 'bottom start',\n    shouldFlip,\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    variant = 'help'\n  } = props;\n\n  // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n  // manually set the aria-label after useLabels() to keep the order of label\n  // then ContextualHelp variant\n  let labelProps = useLabels(props);\n  let label = stringFormatter.format(`contextualhelp.${variant}`);\n  labelProps['aria-label'] = labelProps['aria-label'] ? labelProps['aria-label'] + ' ' + label : label;\n\n  let buttonProps = filterDOMProps(props, {labelable: true});\n\n  return (\n    <DialogTrigger\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}>\n      <ActionButton\n        slot={null}\n        ref={ref}\n        size={size}\n        {...mergeProps(buttonProps, labelProps)}\n        UNSAFE_style={UNSAFE_style}\n        UNSAFE_className={UNSAFE_className}\n        styles={styles}\n        isQuiet>\n        {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n      </ActionButton>\n      <Popover\n        padding=\"none\"\n        placement={placement}\n        shouldFlip={shouldFlip}\n        containerPadding={containerPadding}\n        offset={8}\n        crossOffset={crossOffset}\n        hideArrow>\n        <div\n          className={wrappingDiv}>\n          <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24}))}>\n            <Provider\n              values={[\n                [TextContext, {\n                  slots: {\n                    [DEFAULT_SLOT]: {}\n                  }\n                }],\n                [HeadingContext, {styles: style({\n                  font: 'heading-xs',\n                  margin: 0,\n                  marginBottom: space(8) // This only makes it 10px on mobile and should be 12px\n                })}],\n                [ContentContext, {styles: style({\n                  font: 'body-sm'\n                })}],\n                [FooterContext, {styles: style({\n                  font: 'body-sm',\n                  marginTop: 16\n                })}]\n              ]}>\n              {children}\n            </Provider>\n          </RACDialog>\n        </div>\n      </Popover>\n    </DialogTrigger>\n  );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.mjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAM;AAQN,MAAM;AAUC,SAAS,0CAAsB,KAAiC;IACrE,IAAI,YAAC,QAAQ,EAAE,GAAG,cAAa,GAAG;IAClC,IAAI,UAAU,CAAA,GAAA,YAAI;IAElB,qBACE,gBAAC,CAAA,GAAA,yCAAM;QACL,SAAQ;QACR,SAAS;QACT,mBAAiB;QAChB,GAAG,YAAY;kBAChB,cAAA,gBAAC;YACC,WAAW;sBACX,cAAA,gBAAC;gBAEC,WAAW,CAAA,GAAA,yCAAU,EAAE,CAAA,GAAA,yCAAU;0BACjC,cAAA,gBAAC,CAAA,GAAA,eAAO;oBACN,QAAQ;wBACN;4BAAC,CAAA,GAAA,kBAAU;4BAAG;gCACZ,OAAO;oCACL,CAAC,CAAA,GAAA,mBAAW,EAAE,EAAE,CAAC;gCACnB;4BACF;yBAAE;wBACF,6CAA6C;wBAC7C;4BAAC,CAAA,GAAA,yCAAkB;4BAAG;yBAAK;wBAC3B;4BAAC,CAAA,GAAA,yCAAa;4BAAG;gCACf,QAAQ;gCACR,OAAO;oCACL,oFAAoF;oCACpF,iEAAiE;oCACjE,mEAAmE;oCACnE,CAAC,CAAA,GAAA,mBAAW,EAAE,EAAE;wCAAC,QAAQ;oCAAa;oCACtC,OAAO;wCAAC,IAAI;wCAAS,QAAQ;wCAAe,OAAO;oCAAC;gCACtD;4BACF;yBAAE;wBACF;4BAAC,CAAA,GAAA,yCAAa;4BAAG;gCAAC,MAAM;4BAEtB;yBAAE;wBACJ;4BAAC,CAAA,GAAA,yCAAY;4BAAG;gCAAC,MAAM;4BAGrB;yBAAE;qBACL;8BACA;;;;;AAMb;AA6BO,MAAM,0DAAwB,CAAA,GAAA,oBAAY,EAAoF;AAK9H,MAAM,0DAAiB,CAAA,GAAA,iBAAS,EAAE,SAAS,eAAe,KAA0B,EAAE,GAAoC;IAC/H,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,eACR,WAAW,oBACX,mBAAmB,SACnB,OAAO,mBACP,WAAW,UACX,MAAM,gBACN,YAAY,aACZ,YAAY,4BACZ,UAAU,oBACV,gBAAgB,gBAChB,YAAY,UACZ,MAAM,WACN,UAAU,QACX,GAAG;IAEJ,4EAA4E;IAC5E,2EAA2E;IAC3E,8BAA8B;IAC9B,IAAI,aAAa,CAAA,GAAA,gBAAQ,EAAE;IAC3B,IAAI,QAAQ,gBAAgB,MAAM,CAAC,CAAC,eAAe,EAAE,SAAS;IAC9D,UAAU,CAAC,aAAa,GAAG,UAAU,CAAC,aAAa,GAAG,UAAU,CAAC,aAAa,GAAG,MAAM,QAAQ;IAE/F,IAAI,cAAc,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IAExD,qBACE,iBAAC,CAAA,GAAA,yCAAY;QACX,QAAQ;QACR,aAAa;QACb,cAAc;;0BACd,gBAAC,CAAA,GAAA,yCAAW;gBACV,MAAM;gBACN,KAAK;gBACL,MAAM;gBACL,GAAG,CAAA,GAAA,iBAAS,EAAE,aAAa,WAAW;gBACvC,cAAc;gBACd,kBAAkB;gBAClB,QAAQ;gBACR,OAAO;0BACN,YAAY,uBAAS,gBAAC,CAAA,GAAA,wCAAO,uBAAO,gBAAC,CAAA,GAAA,wCAAO;;0BAE/C,gBAAC;gBACC,WAAW;gBACX,YAAY;gBACZ,kBAAkB;gBAClB,QAAQ;gBACR,aAAa;0BACZ;;;;AAIT","sources":["packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {ContentContext, FooterContext, HeadingContext, TextContext as SpectrumTextContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps, mergeProps, useId, useLabels} from '@react-aria/utils';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement} from '@react-types/overlays';\nimport {Popover, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with { type: 'macro' };\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ContextualHelpPopoverProps extends PopoverDialogProps {\n  /**\n   * The children of the contextual help popover. Supports Heading, Content, and Footer elements. */\n  children: ReactNode\n}\n\nconst wrappingDiv = style({\n  minWidth: 268,\n  width: 268,\n  padding: 24,\n  boxSizing: 'border-box',\n  height: 'full'\n});\n\nconst headingStyles = style({\n  font: 'heading-xs',\n  margin: 0,\n  marginBottom: space(8) // This only makes it 10px on mobile and should be 12px\n});\n\n// TODO: docs to come after release, for now this is just mentioned in unavaiable menu docs\n/**\n * A popover with contextual help styling that supports Heading, Content, and Footer.\n */\nexport function ContextualHelpPopover(props: ContextualHelpPopoverProps) {\n  let {children, ...popoverProps} = props;\n  let titleId = useId();\n\n  return (\n    <Popover\n      padding=\"none\"\n      hideArrow\n      aria-labelledby={titleId}\n      {...popoverProps}>\n      <div\n        className={wrappingDiv}>\n        <div\n\n          className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24}))}>\n          <Provider\n            values={[\n              [TextContext, {\n                slots: {\n                  [DEFAULT_SLOT]: {}\n                }\n              }],\n              // Make sure to clear context from above Menu\n              [SpectrumTextContext, null],\n              [HeadingContext, {\n                styles: headingStyles,\n                slots: {\n                  // needed so combobox/picker does not need to provide slot=\"title\" to their provided\n                  // ContextualHelp (they get the aria-labelled by from the button)\n                  // otherwise, use the heading if available aka unavaiable menu item\n                  [DEFAULT_SLOT]: {styles: headingStyles},\n                  title: {id: titleId, styles: headingStyles, level: 2}\n                }\n              }],\n              [ContentContext, {styles: style({\n                font: 'body-sm'\n              })}],\n              [FooterContext, {styles: style({\n                font: 'body-sm',\n                marginTop: 16\n              })}]\n            ]}>\n            {children}\n          </Provider>\n        </div>\n      </div>\n    </Popover>\n  );\n}\n\nexport interface ContextualHelpStyleProps {\n  /**\n   * Indicates whether contents are informative or provides helpful guidance.\n   *\n   * @default 'help'\n   */\n  variant?: 'info' | 'help'\n}\nexport interface ContextualHelpProps extends\n  Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,\n  Pick<PopoverDialogProps, 'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'>,\n  ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {\n  /**\n   * The placement of the popover with respect to the action button.\n   * @default 'bottom start'\n   */\n  placement?: Placement,\n  /** Contents of the Contextual Help popover. */\n  children: ReactNode,\n  /**\n   * The size of the ActionButton.\n   *\n   * @default 'XS'\n   */\n  size?: 'XS' | 'S'\n}\n\nexport const ContextualHelpContext = createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n  let {\n    children,\n    defaultOpen,\n    containerPadding = 8,\n    size = 'XS',\n    crossOffset,\n    isOpen,\n    onOpenChange,\n    placement = 'bottom start',\n    shouldFlip,\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    variant = 'help'\n  } = props;\n\n  // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n  // manually set the aria-label after useLabels() to keep the order of label\n  // then ContextualHelp variant\n  let labelProps = useLabels(props);\n  let label = stringFormatter.format(`contextualhelp.${variant}`);\n  labelProps['aria-label'] = labelProps['aria-label'] ? labelProps['aria-label'] + ' ' + label : label;\n\n  let buttonProps = filterDOMProps(props, {labelable: true});\n\n  return (\n    <DialogTrigger\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}>\n      <ActionButton\n        slot={null}\n        ref={ref}\n        size={size}\n        {...mergeProps(buttonProps, labelProps)}\n        UNSAFE_style={UNSAFE_style}\n        UNSAFE_className={UNSAFE_className}\n        styles={styles}\n        isQuiet>\n        {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n      </ActionButton>\n      <ContextualHelpPopover\n        placement={placement}\n        shouldFlip={shouldFlip}\n        containerPadding={containerPadding}\n        offset={8}\n        crossOffset={crossOffset}>\n        {children}\n      </ContextualHelpPopover>\n    </DialogTrigger>\n  );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.mjs.map"}

package/dist/Cross.cjs

@@ -34,20 +34,20 @@ $parcel$export(module.exports, "default", () => $89dd175101ffc43a$export$2e2bcd8
 
 let $89dd175101ffc43a$var$styles = function anonymous(props) {
     let rules = " ";
-    if (props.size === "S") rules += ' Zh1';
-    else if (props.size === "XXXXL") rules += ' Zu1';
-    else if (props.size === "XXXL") rules += ' Zk1';
-    else if (props.size === "XXL") rules += ' Zj1';
-    else if (props.size === "XL") rules += ' Zj1';
-    else if (props.size === "L") rules += ' Zi1';
-    else if (props.size === "M") rules += ' Zh1';
-    if (props.size === "S") rules += ' Fi1';
-    else if (props.size === "XXXXL") rules += ' Ft1';
-    else if (props.size === "XXXL") rules += ' Fl1';
-    else if (props.size === "XXL") rules += ' Fk1';
-    else if (props.size === "XL") rules += ' Fk1';
-    else if (props.size === "L") rules += ' Fj1';
-    else if (props.size === "M") rules += ' Fi1';
+    if (props.size === "S") rules += ' Zh12';
+    else if (props.size === "XXXXL") rules += ' Zu12';
+    else if (props.size === "XXXL") rules += ' Zk12';
+    else if (props.size === "XXL") rules += ' Zj12';
+    else if (props.size === "XL") rules += ' Zj12';
+    else if (props.size === "L") rules += ' Zi12';
+    else if (props.size === "M") rules += ' Zh12';
+    if (props.size === "S") rules += ' Fi12';
+    else if (props.size === "XXXXL") rules += ' Ft12';
+    else if (props.size === "XXXL") rules += ' Fl12';
+    else if (props.size === "XXL") rules += ' Fk12';
+    else if (props.size === "XL") rules += ' Fk12';
+    else if (props.size === "L") rules += ' Fj12';
+    else if (props.size === "M") rules += ' Fi12';
     return rules;
 };
 function $89dd175101ffc43a$export$2e2bcd8739ae039(props) {

package/dist/Cross.css

@@ -1,43 +1,43 @@
 @layer _.a {
-  .Zi1 {
+  .Zi12 {
     width: calc(.625rem * var(--s2-scale));
   }
 
-  .Zj1 {
+  .Zj12 {
     width: calc(.75rem * var(--s2-scale));
     width: calc(.75rem * var(--s2-scale));
   }
 
-  .Zk1 {
+  .Zk12 {
     width: calc(.875rem * var(--s2-scale));
   }
 
-  .Zu1 {
+  .Zu12 {
     width: calc(1rem * var(--s2-scale));
   }
 
-  .Zh1 {
+  .Zh12 {
     width: calc(.5rem * var(--s2-scale));
   }
 
-  .Fj1 {
+  .Fj12 {
     height: calc(.625rem * var(--s2-scale));
   }
 
-  .Fk1 {
+  .Fk12 {
     height: calc(.75rem * var(--s2-scale));
     height: calc(.75rem * var(--s2-scale));
   }
 
-  .Fl1 {
+  .Fl12 {
     height: calc(.875rem * var(--s2-scale));
   }
 
-  .Ft1 {
+  .Ft12 {
     height: calc(1rem * var(--s2-scale));
   }
 
-  .Fi1 {
+  .Fi12 {
     height: calc(.5rem * var(--s2-scale));
   }
 }

package/dist/Cross.mjs

@@ -28,20 +28,20 @@ import {jsx as $1piiz$jsx} from "react/jsx-runtime";
 
 let $bd983341bd35d639$var$styles = function anonymous(props) {
     let rules = " ";
-    if (props.size === "S") rules += ' Zh1';
-    else if (props.size === "XXXXL") rules += ' Zu1';
-    else if (props.size === "XXXL") rules += ' Zk1';
-    else if (props.size === "XXL") rules += ' Zj1';
-    else if (props.size === "XL") rules += ' Zj1';
-    else if (props.size === "L") rules += ' Zi1';
-    else if (props.size === "M") rules += ' Zh1';
-    if (props.size === "S") rules += ' Fi1';
-    else if (props.size === "XXXXL") rules += ' Ft1';
-    else if (props.size === "XXXL") rules += ' Fl1';
-    else if (props.size === "XXL") rules += ' Fk1';
-    else if (props.size === "XL") rules += ' Fk1';
-    else if (props.size === "L") rules += ' Fj1';
-    else if (props.size === "M") rules += ' Fi1';
+    if (props.size === "S") rules += ' Zh12';
+    else if (props.size === "XXXXL") rules += ' Zu12';
+    else if (props.size === "XXXL") rules += ' Zk12';
+    else if (props.size === "XXL") rules += ' Zj12';
+    else if (props.size === "XL") rules += ' Zj12';
+    else if (props.size === "L") rules += ' Zi12';
+    else if (props.size === "M") rules += ' Zh12';
+    if (props.size === "S") rules += ' Fi12';
+    else if (props.size === "XXXXL") rules += ' Ft12';
+    else if (props.size === "XXXL") rules += ' Fl12';
+    else if (props.size === "XXL") rules += ' Fk12';
+    else if (props.size === "XL") rules += ' Fk12';
+    else if (props.size === "L") rules += ' Fj12';
+    else if (props.size === "M") rules += ' Fi12';
     return rules;
 };
 function $bd983341bd35d639$export$2e2bcd8739ae039(props) {

package/dist/CustomDialog.cjs

@@ -33,7 +33,7 @@ const $a05aa0b0345f1846$var$dialogStyle = function anonymous(props, overrides) {
     let height = false;
     let maxWidth = false;
     let maxHeight = false;
-    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
+    let matches = String(overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "_P") position = true;
         if (p[1] === "Z") width = true;
@@ -42,39 +42,39 @@ const $a05aa0b0345f1846$var$dialogStyle = function anonymous(props, overrides) {
         if (p[1] === "K") maxHeight = true;
         rules += p[0];
     }
-    if (props.padding === "none") rules += ' Td1';
+    if (props.padding === "none") rules += ' Td12';
     else if (props.padding === "default") {
-        rules += ' Th1';
-        rules += ' Tnk1';
+        rules += ' Th12';
+        rules += ' Tnk12';
     }
-    if (props.padding === "none") rules += ' Qd1';
+    if (props.padding === "none") rules += ' Qd12';
     else if (props.padding === "default") {
-        rules += ' Qh1';
-        rules += ' Qnk1';
+        rules += ' Qh12';
+        rules += ' Qnk12';
     }
-    if (props.padding === "none") rules += ' Sd1';
+    if (props.padding === "none") rules += ' Sd12';
     else if (props.padding === "default") {
-        rules += ' Sh1';
-        rules += ' Snk1';
+        rules += ' Sh12';
+        rules += ' Snk12';
     }
-    if (props.padding === "none") rules += ' Rd1';
+    if (props.padding === "none") rules += ' Rd12';
     else if (props.padding === "default") {
-        rules += ' Rh1';
-        rules += ' Rnk1';
+        rules += ' Rh12';
+        rules += ' Rnk12';
     }
-    rules += ' _oa1';
-    rules += ' _Le1';
-    rules += ' oi1';
-    rules += ' ni1';
-    rules += ' ki1';
-    rules += ' ji1';
-    rules += ' _Na1';
-    rules += ' Pa1';
-    if (!position) rules += ' _Pc1';
-    if (!width) rules += ' Za1';
-    if (!height) rules += ' Fb1';
-    if (!maxWidth) rules += ' L40ub4c1';
-    if (!maxHeight) rules += ' K40ub4c1';
+    rules += ' _oa12';
+    rules += ' _Le12';
+    rules += ' oi12';
+    rules += ' ni12';
+    rules += ' ki12';
+    rules += ' ji12';
+    rules += ' _Na12';
+    rules += ' Pa12';
+    if (!position) rules += ' _Pc12';
+    if (!width) rules += ' Za12';
+    if (!height) rules += ' Fb12';
+    if (!maxWidth) rules += ' L40ub4c12';
+    if (!maxHeight) rules += ' K40ub4c12';
     return rules;
 };
 const $a05aa0b0345f1846$export$82e1fa7406db6ec = /*#__PURE__*/ (0, $f8dpT$react.forwardRef)(function CustomDialog(props, ref) {

package/dist/CustomDialog.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA4BD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBC,MAAM,yDAAe,CAAA,GAAA,uBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAW;IAChG,IAAI,QACF,IAAI,iBACJ,aAAa,6BACb,yBAAyB,WACzB,UAAU,WACX,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,+BAAI;QAAE,MAAM;QAAM,eAAe;QAAe,2BAA2B;kBAC1E,cAAA,gCAAC,CAAA,GAAA,iCAAQ;YACN,GAAG,KAAK;YACT,KAAK;YACL,OAAO,MAAM,YAAY;YACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY;yBAAC;YAAO,GAAG,MAAM,MAAM;sBAC9E,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,WACnC,oGAAoG;8BACpG,gCAAC,CAAA,GAAA,qDAAyB,EAAE,QAAQ;oBAAC,OAAO;8BACzC;;;;AAMb","sources":["packages/@react-spectrum/s2/src/CustomDialog.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 {composeRenderProps, OverlayTriggerStateContext, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';\nimport {DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {Modal} from './Modal';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface CustomDialogProps extends Omit<RACDialogProps, 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps {\n  /**\n   * The size of the Dialog.\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover',\n  /**\n   * Whether the Dialog is dismissible.\n   */\n  isDismissible?: boolean,\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean,\n  /**\n   * The amount of padding around the contents of the dialog.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none'\n}\n\nconst dialogStyle = style({\n  padding: {\n    padding: {\n      default: {\n        default: 24,\n        sm: 32\n      },\n      none: 0\n    }\n  },\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  borderRadius: 'inherit',\n  overflow: 'auto',\n  position: 'relative',\n  size: 'full',\n  maxSize: 'inherit'\n}, getAllowedOverrides({height: true, width: true}));\n\n/**\n * A CustomDialog is a floating window with a custom layout.\n */\nexport const CustomDialog = forwardRef(function CustomDialog(props: CustomDialogProps, ref: DOMRef) {\n  let {\n    size,\n    isDismissible,\n    isKeyboardDismissDisabled,\n    padding = 'default'\n  } = 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 || '') + dialogStyle({padding}, props.styles)}>\n        {composeRenderProps(props.children, (children) => (\n          // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n          <OverlayTriggerStateContext.Provider value={null}>\n            {children}\n          </OverlayTriggerStateContext.Provider>\n        ))}\n      </RACDialog>\n    </Modal>\n  );\n});\n"],"names":[],"version":3,"file":"CustomDialog.cjs.map"}
+{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA4BD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBC,MAAM,yDAAe,CAAA,GAAA,uBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAW;IAChG,IAAI,QACF,IAAI,iBACJ,aAAa,6BACb,yBAAyB,WACzB,UAAU,WACX,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,+BAAI;QAAE,MAAM;QAAM,eAAe;QAAe,2BAA2B;kBAC1E,cAAA,gCAAC,CAAA,GAAA,iCAAQ;YACN,GAAG,KAAK;YACT,KAAK;YACL,OAAO,MAAM,YAAY;YACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY;yBAAC;YAAO,GAAG,MAAM,MAAM;sBAC9E,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,WACnC,oGAAoG;8BACpG,gCAAC,CAAA,GAAA,qDAAyB,EAAE,QAAQ;oBAAC,OAAO;8BACzC;;;;AAMb","sources":["packages/@react-spectrum/s2/src/CustomDialog.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 {composeRenderProps, OverlayTriggerStateContext, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';\nimport {DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {Modal} from './Modal';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface CustomDialogProps extends Omit<RACDialogProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, StyleProps {\n  /**\n   * The size of the Dialog.\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover',\n  /**\n   * Whether the Dialog is dismissible.\n   */\n  isDismissible?: boolean,\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean,\n  /**\n   * The amount of padding around the contents of the dialog.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none'\n}\n\nconst dialogStyle = style({\n  padding: {\n    padding: {\n      default: {\n        default: 24,\n        sm: 32\n      },\n      none: 0\n    }\n  },\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  borderRadius: 'inherit',\n  overflow: 'auto',\n  position: 'relative',\n  size: 'full',\n  maxSize: 'inherit'\n}, getAllowedOverrides({height: true, width: true}));\n\n/**\n * A CustomDialog is a floating window with a custom layout.\n */\nexport const CustomDialog = forwardRef(function CustomDialog(props: CustomDialogProps, ref: DOMRef) {\n  let {\n    size,\n    isDismissible,\n    isKeyboardDismissDisabled,\n    padding = 'default'\n  } = 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 || '') + dialogStyle({padding}, props.styles)}>\n        {composeRenderProps(props.children, (children) => (\n          // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n          <OverlayTriggerStateContext.Provider value={null}>\n            {children}\n          </OverlayTriggerStateContext.Provider>\n        ))}\n      </RACDialog>\n    </Modal>\n  );\n});\n"],"names":[],"version":3,"file":"CustomDialog.cjs.map"}

package/dist/CustomDialog.css

@@ -1,85 +1,85 @@
 @layer _.a {
-  .Th1 {
+  .Th12 {
     padding-top: 24px;
   }
 
-  .Td1 {
+  .Td12 {
     padding-top: 0;
   }
 
-  .Qh1 {
+  .Qh12 {
     padding-bottom: 24px;
   }
 
-  .Qd1 {
+  .Qd12 {
     padding-bottom: 0;
   }
 
-  .Sh1 {
+  .Sh12 {
     padding-inline-start: 24px;
   }
 
-  .Sd1 {
+  .Sd12 {
     padding-inline-start: 0;
   }
 
-  .Rh1 {
+  .Rh12 {
     padding-inline-end: 24px;
   }
 
-  .Rd1 {
+  .Rd12 {
     padding-inline-end: 0;
   }
 
-  ._oa1 {
+  ._oa12 {
     box-sizing: border-box;
   }
 
-  ._Le1 {
+  ._Le12 {
     outline-style: none;
   }
 
-  .oi1 {
+  .oi12 {
     border-start-start-radius: inherit;
   }
 
-  .ni1 {
+  .ni12 {
     border-start-end-radius: inherit;
   }
 
-  .ki1 {
+  .ki12 {
     border-end-start-radius: inherit;
   }
 
-  .ji1 {
+  .ji12 {
     border-end-end-radius: inherit;
   }
 
-  ._Na1 {
+  ._Na12 {
     overflow-x: auto;
   }
 
-  .Pa1 {
+  .Pa12 {
     overflow-y: auto;
   }
 
-  ._Pc1 {
+  ._Pc12 {
     position: relative;
   }
 
-  .Za1 {
+  .Za12 {
     width: 100%;
   }
 
-  .Fb1 {
+  .Fb12 {
     height: 100%;
   }
 
-  .L40ub4c1 {
+  .L40ub4c12 {
     max-width: inherit;
   }
 
-  .K40ub4c1 {
+  .K40ub4c12 {
     max-height: inherit;
   }
 }
@@ -88,19 +88,19 @@
 
 @layer _.b.n {
   @media (width >= 40rem) {
-    .Tnk1 {
+    .Tnk12 {
       padding-top: 32px;
     }
 
-    .Qnk1 {
+    .Qnk12 {
       padding-bottom: 32px;
     }
 
-    .Snk1 {
+    .Snk12 {
       padding-inline-start: 32px;
     }
 
-    .Rnk1 {
+    .Rnk12 {
       padding-inline-end: 32px;
     }
   }

package/dist/CustomDialog.css.map

@@ -1 +1 @@
-{"mappings":"AAsCoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["packages/@react-spectrum/s2/src/CustomDialog.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 {composeRenderProps, OverlayTriggerStateContext, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';\nimport {DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {Modal} from './Modal';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface CustomDialogProps extends Omit<RACDialogProps, 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps {\n  /**\n   * The size of the Dialog.\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover',\n  /**\n   * Whether the Dialog is dismissible.\n   */\n  isDismissible?: boolean,\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean,\n  /**\n   * The amount of padding around the contents of the dialog.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none'\n}\n\nconst dialogStyle = style({\n  padding: {\n    padding: {\n      default: {\n        default: 24,\n        sm: 32\n      },\n      none: 0\n    }\n  },\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  borderRadius: 'inherit',\n  overflow: 'auto',\n  position: 'relative',\n  size: 'full',\n  maxSize: 'inherit'\n}, getAllowedOverrides({height: true, width: true}));\n\n/**\n * A CustomDialog is a floating window with a custom layout.\n */\nexport const CustomDialog = forwardRef(function CustomDialog(props: CustomDialogProps, ref: DOMRef) {\n  let {\n    size,\n    isDismissible,\n    isKeyboardDismissDisabled,\n    padding = 'default'\n  } = 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 || '') + dialogStyle({padding}, props.styles)}>\n        {composeRenderProps(props.children, (children) => (\n          // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n          <OverlayTriggerStateContext.Provider value={null}>\n            {children}\n          </OverlayTriggerStateContext.Provider>\n        ))}\n      </RACDialog>\n    </Modal>\n  );\n});\n"],"names":[],"version":3,"file":"CustomDialog.css.map"}
+{"mappings":"AAsCoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["packages/@react-spectrum/s2/src/CustomDialog.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 {composeRenderProps, OverlayTriggerStateContext, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';\nimport {DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {Modal} from './Modal';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface CustomDialogProps extends Omit<RACDialogProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, StyleProps {\n  /**\n   * The size of the Dialog.\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover',\n  /**\n   * Whether the Dialog is dismissible.\n   */\n  isDismissible?: boolean,\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean,\n  /**\n   * The amount of padding around the contents of the dialog.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none'\n}\n\nconst dialogStyle = style({\n  padding: {\n    padding: {\n      default: {\n        default: 24,\n        sm: 32\n      },\n      none: 0\n    }\n  },\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  borderRadius: 'inherit',\n  overflow: 'auto',\n  position: 'relative',\n  size: 'full',\n  maxSize: 'inherit'\n}, getAllowedOverrides({height: true, width: true}));\n\n/**\n * A CustomDialog is a floating window with a custom layout.\n */\nexport const CustomDialog = forwardRef(function CustomDialog(props: CustomDialogProps, ref: DOMRef) {\n  let {\n    size,\n    isDismissible,\n    isKeyboardDismissDisabled,\n    padding = 'default'\n  } = 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 || '') + dialogStyle({padding}, props.styles)}>\n        {composeRenderProps(props.children, (children) => (\n          // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n          <OverlayTriggerStateContext.Provider value={null}>\n            {children}\n          </OverlayTriggerStateContext.Provider>\n        ))}\n      </RACDialog>\n    </Modal>\n  );\n});\n"],"names":[],"version":3,"file":"CustomDialog.css.map"}