@react-spectrum/s2 3.0.0-nightly-ab9fd5c68-241125 → 3.0.0-nightly-10a43de88-241127

package/dist/ContextualHelp.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAM;AAOC,MAAM,0DAAwB,CAAA,GAAA,0BAAY,EAA2E;AAE5H,SAAS,qCAAe,KAA0B,EAAE,GAAoC;IACtF,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,eACR,WAAW,QACX,6EAA6E;IAC7E,OAAO,mBACP,WAAW,UACX,MAAM,UACN,SAAS,iBACT,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,+BAAQ,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,oCAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IAExD,qBACE,iCAAC,CAAA,GAAA,uCAAY;QACX,QAAQ;QACR,aAAa;QACb,cAAc;;0BACd,gCAAC,CAAA,GAAA,sCAAW;gBACV,MAAM;gBACN,KAAK;gBACL,MAAM;gBACL,GAAG,CAAA,GAAA,gCAAS,EAAE,aAAa,WAAW;gBACvC,cAAc;gBACd,kBAAkB;gBAClB,QAAQ;gBACR,OAAO;0BACN,YAAY,uBAAS,gCAAC,CAAA,GAAA,iCAAO,uBAAO,gCAAC,CAAA,GAAA,iCAAO;;0BAE/C,gCAAC,CAAA,GAAA,qCAAU;gBACT,WAAW;gBACX,YAAY;gBACZ,qDAAqD;gBACrD,QAAQ;gBACR,aAAa;gBACb,SAAS;gBACT,kBAAkB;0BAClB,cAAA,gCAAC,CAAA,GAAA,iCAAQ;oBAAE,WAAW,CAAA,GAAA,qCAAU,EAAE,CAAA,GAAA,qCAAU;8BAC1C,cAAA,gCAAC,CAAA,GAAA,mCAAO;wBACN,QAAQ;4BACN;gCAAC,CAAA,GAAA,sCAAU;gCAAG;oCACZ,OAAO;wCACL,CAAC,CAAA,GAAA,uCAAW,EAAE,EAAE,CAAC;oCACnB;gCACF;6BAAE;4BACF;gCAAC,CAAA,GAAA,wCAAa;gCAAG;oCAAC,MAAM;gCAItB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,wCAAa;gCAAG;oCAAC,MAAM;gCAEtB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,uCAAY;gCAAG;oCAAC,MAAM;gCAGrB;6BAAE;yBACL;kCACA;;;;;;AAMb;AAEA;;CAEC,GACD,IAAI,0DAAkB,CAAA,GAAA,uBAAS,EAAE","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 {PopoverBase, 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  /** 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 popover = style({\n  fontFamily: 'sans',\n  minWidth: 218,\n  width: 218,\n  padding: 24\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<ContextualHelpProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\nfunction 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 = 24, // See popover() above. Issue noted in Popover.tsx.\n    size = 'XS',\n    crossOffset,\n    isOpen,\n    offset = 8,\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      <PopoverBase\n        placement={placement}\n        shouldFlip={shouldFlip}\n        // not working => containerPadding={containerPadding}\n        offset={offset}\n        crossOffset={crossOffset}\n        hideArrow\n        UNSAFE_className={popover}>\n        <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: -24, 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      </PopoverBase>\n    </DialogTrigger>\n  );\n}\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nlet _ContextualHelp = forwardRef(ContextualHelp);\nexport {_ContextualHelp as ContextualHelp};\n"],"names":[],"version":3,"file":"ContextualHelp.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAM;AAOC,MAAM,0DAAwB,CAAA,GAAA,0BAAY,EAA2E;AAKrH,MAAM,0DAAiB,CAAA,GAAA,uBAAS,EAAE,SAAS,eAAe,KAA0B,EAAE,GAAoC;IAC/H,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,eACR,WAAW,QACX,6EAA6E;IAC7E,OAAO,mBACP,WAAW,UACX,MAAM,UACN,SAAS,iBACT,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,+BAAQ,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,oCAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IAExD,qBACE,iCAAC,CAAA,GAAA,uCAAY;QACX,QAAQ;QACR,aAAa;QACb,cAAc;;0BACd,gCAAC,CAAA,GAAA,sCAAW;gBACV,MAAM;gBACN,KAAK;gBACL,MAAM;gBACL,GAAG,CAAA,GAAA,gCAAS,EAAE,aAAa,WAAW;gBACvC,cAAc;gBACd,kBAAkB;gBAClB,QAAQ;gBACR,OAAO;0BACN,YAAY,uBAAS,gCAAC,CAAA,GAAA,iCAAO,uBAAO,gCAAC,CAAA,GAAA,iCAAO;;0BAE/C,gCAAC,CAAA,GAAA,qCAAU;gBACT,WAAW;gBACX,YAAY;gBACZ,qDAAqD;gBACrD,QAAQ;gBACR,aAAa;gBACb,SAAS;gBACT,kBAAkB;0BAClB,cAAA,gCAAC,CAAA,GAAA,iCAAQ;oBAAE,WAAW,CAAA,GAAA,qCAAU,EAAE,CAAA,GAAA,qCAAU;8BAC1C,cAAA,gCAAC,CAAA,GAAA,mCAAO;wBACN,QAAQ;4BACN;gCAAC,CAAA,GAAA,sCAAU;gCAAG;oCACZ,OAAO;wCACL,CAAC,CAAA,GAAA,uCAAW,EAAE,EAAE,CAAC;oCACnB;gCACF;6BAAE;4BACF;gCAAC,CAAA,GAAA,wCAAa;gCAAG;oCAAC,MAAM;gCAItB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,wCAAa;gCAAG;oCAAC,MAAM;gCAEtB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,uCAAY;gCAAG;oCAAC,MAAM;gCAGrB;6BAAE;yBACL;kCACA;;;;;;AAMb","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 {PopoverBase, 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  /** 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 popover = style({\n  fontFamily: 'sans',\n  minWidth: 218,\n  width: 218,\n  padding: 24\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<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 = 24, // See popover() above. Issue noted in Popover.tsx.\n    size = 'XS',\n    crossOffset,\n    isOpen,\n    offset = 8,\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      <PopoverBase\n        placement={placement}\n        shouldFlip={shouldFlip}\n        // not working => containerPadding={containerPadding}\n        offset={offset}\n        crossOffset={crossOffset}\n        hideArrow\n        UNSAFE_className={popover}>\n        <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: -24, 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      </PopoverBase>\n    </DialogTrigger>\n  );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.cjs.map"}

package/dist/ContextualHelp.css.map

@@ -1 +1 @@
-{"mappings":"ACyCgB;EAAA;;;;EAAA;;;;EA8DuC;;;;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;;;;;AA9EvB;EAsEwB;;;;;;EAAA;;;;EAQD;;;;EAAA;;;;;AA9EvB;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAsEwB;EAAA;IAAA;;;;IAKA;;;;;;AAAA","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 {PopoverBase, 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  /** 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 popover = style({\n  fontFamily: 'sans',\n  minWidth: 218,\n  width: 218,\n  padding: 24\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<ContextualHelpProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\nfunction 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 = 24, // See popover() above. Issue noted in Popover.tsx.\n    size = 'XS',\n    crossOffset,\n    isOpen,\n    offset = 8,\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      <PopoverBase\n        placement={placement}\n        shouldFlip={shouldFlip}\n        // not working => containerPadding={containerPadding}\n        offset={offset}\n        crossOffset={crossOffset}\n        hideArrow\n        UNSAFE_className={popover}>\n        <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: -24, 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      </PopoverBase>\n    </DialogTrigger>\n  );\n}\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nlet _ContextualHelp = forwardRef(ContextualHelp);\nexport {_ContextualHelp as ContextualHelp};\n"],"names":[],"version":3,"file":"ContextualHelp.css.map"}
+{"mappings":"ACyCgB;EAAA;;;;EAAA;;;;EAiEuC;;;;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;;;;;AAjFvB;EAyEwB;;;;;;EAAA;;;;EAQD;;;;EAAA;;;;;AAjFvB;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAyEwB;EAAA;IAAA;;;;IAKA;;;;;;AAAA","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 {PopoverBase, 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  /** 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 popover = style({\n  fontFamily: 'sans',\n  minWidth: 218,\n  width: 218,\n  padding: 24\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<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 = 24, // See popover() above. Issue noted in Popover.tsx.\n    size = 'XS',\n    crossOffset,\n    isOpen,\n    offset = 8,\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      <PopoverBase\n        placement={placement}\n        shouldFlip={shouldFlip}\n        // not working => containerPadding={containerPadding}\n        offset={offset}\n        crossOffset={crossOffset}\n        hideArrow\n        UNSAFE_className={popover}>\n        <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: -24, 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      </PopoverBase>\n    </DialogTrigger>\n  );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.css.map"}

package/dist/ContextualHelp.mjs

@@ -36,7 +36,7 @@ function $parcel$interopDefault(a) {
 
 const $8e176595bc49ca3f$var$popover = " . _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh q___U l___U Eh Fh Ch Dh";
 const $8e176595bc49ca3f$export$41b9afaaba473494 = /*#__PURE__*/ (0, $bcd4U$createContext)(null);
-function $8e176595bc49ca3f$var$ContextualHelp(props, ref) {
+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');
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $8e176595bc49ca3f$export$41b9afaaba473494);
     let { children: children, defaultOpen: defaultOpen, size: // containerPadding = 24, // See popover() above. Issue noted in Popover.tsx.
@@ -111,10 +111,7 @@ function $8e176595bc49ca3f$var$ContextualHelp(props, ref) {
             })
         ]
     });
-}
-/**
- * Contextual help shows a user extra information about the state of an adjacent component, or a total view.
- */ let $8e176595bc49ca3f$export$7d3cdb256c2ba320 = /*#__PURE__*/ (0, $bcd4U$forwardRef)($8e176595bc49ca3f$var$ContextualHelp);
+});
 
 
 export {$8e176595bc49ca3f$export$41b9afaaba473494 as ContextualHelpContext, $8e176595bc49ca3f$export$7d3cdb256c2ba320 as ContextualHelp};

package/dist/ContextualHelp.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAM;AAOC,MAAM,0DAAwB,CAAA,GAAA,oBAAY,EAA2E;AAE5H,SAAS,qCAAe,KAA0B,EAAE,GAAoC;IACtF,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,QACX,6EAA6E;IAC7E,OAAO,mBACP,WAAW,UACX,MAAM,UACN,SAAS,iBACT,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,yCAAU;gBACT,WAAW;gBACX,YAAY;gBACZ,qDAAqD;gBACrD,QAAQ;gBACR,aAAa;gBACb,SAAS;gBACT,kBAAkB;0BAClB,cAAA,gBAAC,CAAA,GAAA,aAAQ;oBAAE,WAAW,CAAA,GAAA,yCAAU,EAAE,CAAA,GAAA,yCAAU;8BAC1C,cAAA,gBAAC,CAAA,GAAA,eAAO;wBACN,QAAQ;4BACN;gCAAC,CAAA,GAAA,kBAAU;gCAAG;oCACZ,OAAO;wCACL,CAAC,CAAA,GAAA,mBAAW,EAAE,EAAE,CAAC;oCACnB;gCACF;6BAAE;4BACF;gCAAC,CAAA,GAAA,yCAAa;gCAAG;oCAAC,MAAM;gCAItB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,yCAAa;gCAAG;oCAAC,MAAM;gCAEtB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,yCAAY;gCAAG;oCAAC,MAAM;gCAGrB;6BAAE;yBACL;kCACA;;;;;;AAMb;AAEA;;CAEC,GACD,IAAI,0DAAkB,CAAA,GAAA,iBAAS,EAAE","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 {PopoverBase, 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  /** 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 popover = style({\n  fontFamily: 'sans',\n  minWidth: 218,\n  width: 218,\n  padding: 24\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<ContextualHelpProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\nfunction 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 = 24, // See popover() above. Issue noted in Popover.tsx.\n    size = 'XS',\n    crossOffset,\n    isOpen,\n    offset = 8,\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      <PopoverBase\n        placement={placement}\n        shouldFlip={shouldFlip}\n        // not working => containerPadding={containerPadding}\n        offset={offset}\n        crossOffset={crossOffset}\n        hideArrow\n        UNSAFE_className={popover}>\n        <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: -24, 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      </PopoverBase>\n    </DialogTrigger>\n  );\n}\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nlet _ContextualHelp = forwardRef(ContextualHelp);\nexport {_ContextualHelp as ContextualHelp};\n"],"names":[],"version":3,"file":"ContextualHelp.mjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAM;AAOC,MAAM,0DAAwB,CAAA,GAAA,oBAAY,EAA2E;AAKrH,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,QACX,6EAA6E;IAC7E,OAAO,mBACP,WAAW,UACX,MAAM,UACN,SAAS,iBACT,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,yCAAU;gBACT,WAAW;gBACX,YAAY;gBACZ,qDAAqD;gBACrD,QAAQ;gBACR,aAAa;gBACb,SAAS;gBACT,kBAAkB;0BAClB,cAAA,gBAAC,CAAA,GAAA,aAAQ;oBAAE,WAAW,CAAA,GAAA,yCAAU,EAAE,CAAA,GAAA,yCAAU;8BAC1C,cAAA,gBAAC,CAAA,GAAA,eAAO;wBACN,QAAQ;4BACN;gCAAC,CAAA,GAAA,kBAAU;gCAAG;oCACZ,OAAO;wCACL,CAAC,CAAA,GAAA,mBAAW,EAAE,EAAE,CAAC;oCACnB;gCACF;6BAAE;4BACF;gCAAC,CAAA,GAAA,yCAAa;gCAAG;oCAAC,MAAM;gCAItB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,yCAAa;gCAAG;oCAAC,MAAM;gCAEtB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,yCAAY;gCAAG;oCAAC,MAAM;gCAGrB;6BAAE;yBACL;kCACA;;;;;;AAMb","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 {PopoverBase, 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  /** 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 popover = style({\n  fontFamily: 'sans',\n  minWidth: 218,\n  width: 218,\n  padding: 24\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<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 = 24, // See popover() above. Issue noted in Popover.tsx.\n    size = 'XS',\n    crossOffset,\n    isOpen,\n    offset = 8,\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      <PopoverBase\n        placement={placement}\n        shouldFlip={shouldFlip}\n        // not working => containerPadding={containerPadding}\n        offset={offset}\n        crossOffset={crossOffset}\n        hideArrow\n        UNSAFE_className={popover}>\n        <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: -24, 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      </PopoverBase>\n    </DialogTrigger>\n  );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.mjs.map"}

package/dist/CustomDialog.cjs

@@ -77,7 +77,7 @@ const $a05aa0b0345f1846$var$dialogStyle = function anonymous(props, overrides) {
     if (!$p) rules += ' p-17zqamw';
     return rules;
 };
-function $a05aa0b0345f1846$var$CustomDialog(props, ref) {
+const $a05aa0b0345f1846$export$82e1fa7406db6ec = /*#__PURE__*/ (0, $f8dpT$react.forwardRef)(function CustomDialog(props, ref) {
     let { size: size, isDismissible: isDismissible, isKeyboardDismissDisabled: isKeyboardDismissDisabled, padding: padding = 'default' } = props;
     let domRef = (0, $f8dpT$reactspectrumutils.useDOMRef)(ref);
     return /*#__PURE__*/ (0, $f8dpT$reactjsxruntime.jsx)((0, $8e678305a8c10028$exports.Modal), {
@@ -98,10 +98,7 @@ function $a05aa0b0345f1846$var$CustomDialog(props, ref) {
                 }))
         })
     });
-}
-/**
- * A CustomDialog is a floating window with a custom layout.
- */ let $a05aa0b0345f1846$export$82e1fa7406db6ec = /*#__PURE__*/ (0, $f8dpT$react.forwardRef)($a05aa0b0345f1846$var$CustomDialog);
+});
 
 
 //# sourceMappingURL=CustomDialog.cjs.map

package/dist/CustomDialog.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA4BD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,SAAS,mCAAa,KAAwB,EAAE,GAAW;IACzD,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;AAEA;;CAEC,GACD,IAAI,yDAAgB,CAAA,GAAA,uBAAS,EAAE","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} 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'>, 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}));\n\nfunction 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\n/**\n * A CustomDialog is a floating window with a custom layout.\n */\nlet _CustomDialog = forwardRef(CustomDialog);\nexport {_CustomDialog as CustomDialog};\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} 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'>, 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}));\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.map

@@ -1 +1 @@
-{"mappings":"AAsCoB;;;;AAAA;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} 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'>, 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}));\n\nfunction 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\n/**\n * A CustomDialog is a floating window with a custom layout.\n */\nlet _CustomDialog = forwardRef(CustomDialog);\nexport {_CustomDialog as CustomDialog};\n"],"names":[],"version":3,"file":"CustomDialog.css.map"}
+{"mappings":"AAsCoB;;;;AAAA;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} 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'>, 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}));\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"}

package/dist/CustomDialog.mjs

@@ -71,7 +71,7 @@ const $6e8e8fdd66697ef1$var$dialogStyle = function anonymous(props, overrides) {
     if (!$p) rules += ' p-17zqamw';
     return rules;
 };
-function $6e8e8fdd66697ef1$var$CustomDialog(props, ref) {
+const $6e8e8fdd66697ef1$export$82e1fa7406db6ec = /*#__PURE__*/ (0, $4wOFe$forwardRef)(function CustomDialog(props, ref) {
     let { size: size, isDismissible: isDismissible, isKeyboardDismissDisabled: isKeyboardDismissDisabled, padding: padding = 'default' } = props;
     let domRef = (0, $4wOFe$useDOMRef)(ref);
     return /*#__PURE__*/ (0, $4wOFe$jsx)((0, $c46d159bd615e407$export$2b77a92f1a5ad772), {
@@ -92,10 +92,7 @@ function $6e8e8fdd66697ef1$var$CustomDialog(props, ref) {
                 }))
         })
     });
-}
-/**
- * A CustomDialog is a floating window with a custom layout.
- */ let $6e8e8fdd66697ef1$export$82e1fa7406db6ec = /*#__PURE__*/ (0, $4wOFe$forwardRef)($6e8e8fdd66697ef1$var$CustomDialog);
+});
 
 
 export {$6e8e8fdd66697ef1$export$82e1fa7406db6ec as CustomDialog};

package/dist/CustomDialog.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA4BD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,SAAS,mCAAa,KAAwB,EAAE,GAAW;IACzD,IAAI,QACF,IAAI,iBACJ,aAAa,6BACb,yBAAyB,WACzB,UAAU,WACX,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,yCAAI;QAAE,MAAM;QAAM,eAAe;QAAe,2BAA2B;kBAC1E,cAAA,gBAAC,CAAA,GAAA,aAAQ;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,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,WACnC,oGAAoG;8BACpG,gBAAC,CAAA,GAAA,iCAAyB,EAAE,QAAQ;oBAAC,OAAO;8BACzC;;;;AAMb;AAEA;;CAEC,GACD,IAAI,yDAAgB,CAAA,GAAA,iBAAS,EAAE","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} 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'>, 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}));\n\nfunction 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\n/**\n * A CustomDialog is a floating window with a custom layout.\n */\nlet _CustomDialog = forwardRef(CustomDialog);\nexport {_CustomDialog as CustomDialog};\n"],"names":[],"version":3,"file":"CustomDialog.mjs.map"}
+{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA4BD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBC,MAAM,yDAAe,CAAA,GAAA,iBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAW;IAChG,IAAI,QACF,IAAI,iBACJ,aAAa,6BACb,yBAAyB,WACzB,UAAU,WACX,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,yCAAI;QAAE,MAAM;QAAM,eAAe;QAAe,2BAA2B;kBAC1E,cAAA,gBAAC,CAAA,GAAA,aAAQ;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,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,WACnC,oGAAoG;8BACpG,gBAAC,CAAA,GAAA,iCAAyB,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} 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'>, 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}));\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.mjs.map"}

package/dist/Dialog.cjs

@@ -42,7 +42,7 @@ const $0f4636c7093b9233$var$content = " . _9-3t1y __wa __w-l92dlrd _ca _c-enzrfp
 const $0f4636c7093b9233$var$footer = " . _9-3t1y _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _dg _dbh _eb _fb _f-1x99dloc an";
 const $0f4636c7093b9233$var$buttonGroup = " . y_d rb";
 const $0f4636c7093b9233$export$6af31f836f9aa6f2 = " . _Zd _6b _9-3t1y p-17zqamw __na _La _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _v-17zqamw _w-17zqamw _x-17zqamw _y-17zqamw __va __wa";
-function $0f4636c7093b9233$var$Dialog(props, ref) {
+const $0f4636c7093b9233$export$3ddf2d174ce01153 = /*#__PURE__*/ (0, $WjfVF$react.forwardRef)(function Dialog(props, ref) {
     let { size: size = 'M', isDismissible: isDismissible, isKeyboardDismissDisabled: isKeyboardDismissDisabled } = props;
     let domRef = (0, $WjfVF$reactspectrumutils.useDOMRef)(ref);
     return /*#__PURE__*/ (0, $WjfVF$reactjsxruntime.jsx)((0, $8e678305a8c10028$exports.Modal), {
@@ -256,11 +256,7 @@ function $0f4636c7093b9233$var$Dialog(props, ref) {
                 }))
         })
     });
-}
-/**
- * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
- * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
- */ let $0f4636c7093b9233$export$3ddf2d174ce01153 = /*#__PURE__*/ (0, $WjfVF$react.forwardRef)($0f4636c7093b9233$var$Dialog);
+});
 
 
 //# sourceMappingURL=Dialog.cjs.map

package/dist/Dialog.cjs.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  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)': 'visible'\n  },\n  font: 'body',\n  // TODO: adjust margin on mobile?\n  marginX: {\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\nfunction 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                marginStart: {\n                  default: 32\n                },\n                marginEnd: {\n                  default: 32,\n                  isDismissible: 12\n                },\n                marginTop: {\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\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 */\nlet _Dialog = forwardRef(Dialog);\nexport {_Dialog as Dialog};\n"],"names":[],"version":3,"file":"Dialog.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA8BD,MAAM;AAMN,MAAM;AAMN,MAAM;AAIN,MAAM;AAcN,MAAM;AAKN,MAAM;AAKC,MAAM;AAgBN,MAAM,0DAAS,CAAA,GAAA,uBAAS,EAAE,SAAS,OAAO,KAAkB,EAAE,GAAW;IAC9E,IAAI,QAAC,OAAO,oBAAK,aAAa,6BAAE,yBAAyB,EAAC,GAAG;IAC7D,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;sBAC3C,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,WACnC,0FAA0F;gBAC1F,+FAA+F;gBAC/F,oGAAoG;8BACpG,iCAAC,CAAA,GAAA,qDAAyB,EAAE,QAAQ;oBAAC,OAAO;;sCAE1C,gCAAC,CAAA,GAAA,mCAAO;4BACN,QAAQ;gCACN;oCAAC,CAAA,GAAA,sCAAW;oCAAG;wCAAC,QAAQ;oCAAK;iCAAE;gCAC/B;oCAAC,CAAA,GAAA,wCAAa;oCAAG;wCAAC,UAAU;oCAAI;iCAAE;gCAClC;oCAAC,CAAA,GAAA,uCAAY;oCAAG;wCAAC,UAAU;oCAAI;iCAAE;gCACjC;oCAAC,CAAA,GAAA,wCAAa;oCAAG;wCAAC,UAAU;oCAAI;iCAAE;gCAClC;oCAAC,CAAA,GAAA,uCAAY;oCAAG;wCAAC,UAAU;oCAAI;iCAAE;gCACjC;oCAAC,CAAA,GAAA,4CAAiB;oCAAG;wCAAC,UAAU;oCAAI;iCAAE;6BACvC;sCACA;;sCAGH,iCAAC;4BACC,WAAW;;;;;;;;;;8BAeR;gCAAC,eAAe,MAAM,aAAa;4BAAA;;8CACtC,gCAAC;oCACC,SAAS;8CAwBT,cAAA,gCAAC,CAAA,GAAA,mCAAO;wCACN,QAAQ;4CACN;gDAAC,CAAA,GAAA,sCAAW;gDAAG;oDAAC,QAAQ;gDAAI;6CAAE;4CAC9B;gDAAC,CAAA,GAAA,wCAAa;gDAAG;oDAAC,QAAQ;gDAAO;6CAAE;4CACnC;gDAAC,CAAA,GAAA,uCAAY;gDAAG;oDAAC,QAAQ;gDAAM;6CAAE;4CACjC;gDAAC,CAAA,GAAA,wCAAa;gDAAG;oDAAC,UAAU;gDAAI;6CAAE;4CAClC;gDAAC,CAAA,GAAA,uCAAY;gDAAG;oDAAC,UAAU;gDAAI;6CAAE;4CACjC;gDAAC,CAAA,GAAA,4CAAiB;gDAAG;oDAAC,UAAU;gDAAI;6CAAE;yCACvC;kDACA;;;gCAGJ,MAAM,aAAa,kBAClB,gCAAC,CAAA,GAAA,qCAAU;oCAAE,MAAM;;;;sCAIvB,gCAAC,CAAA,GAAA,mCAAO;4BACN,QAAQ;gCACN;oCAAC,CAAA,GAAA,sCAAW;oCAAG;wCAAC,QAAQ;oCAAI;iCAAE;gCAC9B;oCAAC,CAAA,GAAA,wCAAa;oCAAG;wCAAC,UAAU;oCAAI;iCAAE;gCAClC;oCAAC,CAAA,GAAA,uCAAY;oCAAG;wCAAC,UAAU;oCAAI;iCAAE;gCACjC;oCAAC,CAAA,GAAA,wCAAa;oCAAG;wCAAC,QAAQ;oCAAO;iCAAE;gCACnC;oCAAC,CAAA,GAAA,uCAAY;oCAAG;wCAAC,UAAU;oCAAI;iCAAE;gCACjC;oCAAC,CAAA,GAAA,4CAAiB;oCAAG;wCAAC,UAAU;oCAAI;iCAAE;6BACvC;sCACA;;sCAGH,gCAAC;4BACC,SAAS;sCAgBT,cAAA,gCAAC,CAAA,GAAA,mCAAO;gCACN,QAAQ;oCACN;wCAAC,CAAA,GAAA,sCAAW;wCAAG;4CAAC,QAAQ;wCAAI;qCAAE;oCAC9B;wCAAC,CAAA,GAAA,wCAAa;wCAAG;4CAAC,UAAU;wCAAI;qCAAE;oCAClC;wCAAC,CAAA,GAAA,uCAAY;wCAAG;4CAAC,UAAU;wCAAI;qCAAE;oCACjC;wCAAC,CAAA,GAAA,wCAAa;wCAAG;4CAAC,UAAU;wCAAI;qCAAE;oCAClC;wCAAC,CAAA,GAAA,uCAAY;wCAAG;4CAAC,QAAQ;wCAAM;qCAAE;oCACjC;wCAAC,CAAA,GAAA,4CAAiB;wCAAG;4CAAC,UAAU,MAAM,aAAa;4CAAE,QAAQ;4CAAa,OAAO;wCAAK;qCAAE;iCACzF;0CACA;;;;;;;AAQjB","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  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)': 'visible'\n  },\n  font: 'body',\n  // TODO: adjust margin on mobile?\n  marginX: {\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                marginStart: {\n                  default: 32\n                },\n                marginEnd: {\n                  default: 32,\n                  isDismissible: 12\n                },\n                marginTop: {\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.cjs.map"}

package/dist/Dialog.css.map

@@ -1 +1 @@
-{"mappings":"ACwCc;EAAA;;;;EAAA;;;;EAAA;;;;EAME;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAMD;;;;EAkBA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAKK;;;;EAAA;;;;EAKO;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0CF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiBE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqCU;;;;EAiBZ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAzJX;EAME;;;;;;EAAA;;;;EAwBD;;;;EAUY;;;;EA2DA;;;;EAAA;;;;EAsDF;;;;;AAzJX;;AAME;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAMD;;;;IAIE;;;;;;AAAA;EAAA;IAAA;;;;;;AAmFU;EAAA;IAAA;;;;IAAA;;;;;;AAqCU","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  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)': 'visible'\n  },\n  font: 'body',\n  // TODO: adjust margin on mobile?\n  marginX: {\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\nfunction 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                marginStart: {\n                  default: 32\n                },\n                marginEnd: {\n                  default: 32,\n                  isDismissible: 12\n                },\n                marginTop: {\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\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 */\nlet _Dialog = forwardRef(Dialog);\nexport {_Dialog as Dialog};\n"],"names":[],"version":3,"file":"Dialog.css.map"}
+{"mappings":"ACwCc;EAAA;;;;EAAA;;;;EAAA;;;;EAME;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAMD;;;;EAkBA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAKK;;;;EAAA;;;;EAKO;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8CF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiBE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqCU;;;;EAiBZ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7JX;EAME;;;;;;EAAA;;;;EAwBD;;;;EAUY;;;;EA+DA;;;;EAAA;;;;EAsDF;;;;;AA7JX;;AAME;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAMD;;;;IAIE;;;;;;AAAA;EAAA;IAAA;;;;;;AAuFU;EAAA;IAAA;;;;IAAA;;;;;;AAqCU","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  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)': 'visible'\n  },\n  font: 'body',\n  // TODO: adjust margin on mobile?\n  marginX: {\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                marginStart: {\n                  default: 32\n                },\n                marginEnd: {\n                  default: 32,\n                  isDismissible: 12\n                },\n                marginTop: {\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

@@ -35,7 +35,7 @@ const $9bbc115952dac5a6$var$content = " . _9-3t1y __wa __w-l92dlrd _ca _c-enzrfp
 const $9bbc115952dac5a6$var$footer = " . _9-3t1y _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _dg _dbh _eb _fb _f-1x99dloc an";
 const $9bbc115952dac5a6$var$buttonGroup = " . y_d rb";
 const $9bbc115952dac5a6$export$6af31f836f9aa6f2 = " . _Zd _6b _9-3t1y p-17zqamw __na _La _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _v-17zqamw _w-17zqamw _x-17zqamw _y-17zqamw __va __wa";
-function $9bbc115952dac5a6$var$Dialog(props, ref) {
+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);
     return /*#__PURE__*/ (0, $9Rtwv$jsx)((0, $c46d159bd615e407$export$2b77a92f1a5ad772), {
@@ -249,11 +249,7 @@ function $9bbc115952dac5a6$var$Dialog(props, ref) {
                 }))
         })
     });
-}
-/**
- * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
- * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
- */ let $9bbc115952dac5a6$export$3ddf2d174ce01153 = /*#__PURE__*/ (0, $9Rtwv$forwardRef)($9bbc115952dac5a6$var$Dialog);
+});
 
 
 export {$9bbc115952dac5a6$export$6af31f836f9aa6f2 as dialogInner, $9bbc115952dac5a6$export$3ddf2d174ce01153 as Dialog};

package/dist/Dialog.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA8BD,MAAM;AAMN,MAAM;AAMN,MAAM;AAIN,MAAM;AAcN,MAAM;AAKN,MAAM;AAKC,MAAM;AAYb,SAAS,6BAAO,KAAkB,EAAE,GAAW;IAC7C,IAAI,QAAC,OAAO,oBAAK,aAAa,6BAAE,yBAAyB,EAAC,GAAG;IAC7D,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,yCAAI;QAAE,MAAM;QAAM,eAAe;QAAe,2BAA2B;kBAC1E,cAAA,gBAAC,CAAA,GAAA,aAAQ;YACN,GAAG,KAAK;YACT,KAAK;YACL,OAAO,MAAM,YAAY;YACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK;sBAC3C,CAAA,GAAA,yBAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,WACnC,0FAA0F;gBAC1F,+FAA+F;gBAC/F,oGAAoG;8BACpG,iBAAC,CAAA,GAAA,iCAAyB,EAAE,QAAQ;oBAAC,OAAO;;sCAE1C,gBAAC,CAAA,GAAA,eAAO;4BACN,QAAQ;gCACN;oCAAC,CAAA,GAAA,yCAAW;oCAAG;wCAAC,QAAQ;oCAAK;iCAAE;gCAC/B;oCAAC,CAAA,GAAA,yCAAa;oCAAG;wCAAC,UAAU;oCAAI;iCAAE;gCAClC;oCAAC,CAAA,GAAA,yCAAY;oCAAG;wCAAC,UAAU;oCAAI;iCAAE;gCACjC;oCAAC,CAAA,GAAA,yCAAa;oCAAG;wCAAC,UAAU;oCAAI;iCAAE;gCAClC;oCAAC,CAAA,GAAA,yCAAY;oCAAG;wCAAC,UAAU;oCAAI;iCAAE;gCACjC;oCAAC,CAAA,GAAA,yCAAiB;oCAAG;wCAAC,UAAU;oCAAI;iCAAE;6BACvC;sCACA;;sCAGH,iBAAC;4BACC,WAAW;;;;;;;;;;8BAeR;gCAAC,eAAe,MAAM,aAAa;4BAAA;;8CACtC,gBAAC;oCACC,SAAS;8CAwBT,cAAA,gBAAC,CAAA,GAAA,eAAO;wCACN,QAAQ;4CACN;gDAAC,CAAA,GAAA,yCAAW;gDAAG;oDAAC,QAAQ;gDAAI;6CAAE;4CAC9B;gDAAC,CAAA,GAAA,yCAAa;gDAAG;oDAAC,QAAQ;gDAAO;6CAAE;4CACnC;gDAAC,CAAA,GAAA,yCAAY;gDAAG;oDAAC,QAAQ;gDAAM;6CAAE;4CACjC;gDAAC,CAAA,GAAA,yCAAa;gDAAG;oDAAC,UAAU;gDAAI;6CAAE;4CAClC;gDAAC,CAAA,GAAA,yCAAY;gDAAG;oDAAC,UAAU;gDAAI;6CAAE;4CACjC;gDAAC,CAAA,GAAA,yCAAiB;gDAAG;oDAAC,UAAU;gDAAI;6CAAE;yCACvC;kDACA;;;gCAGJ,MAAM,aAAa,kBAClB,gBAAC,CAAA,GAAA,yCAAU;oCAAE,MAAM;;;;sCAIvB,gBAAC,CAAA,GAAA,eAAO;4BACN,QAAQ;gCACN;oCAAC,CAAA,GAAA,yCAAW;oCAAG;wCAAC,QAAQ;oCAAI;iCAAE;gCAC9B;oCAAC,CAAA,GAAA,yCAAa;oCAAG;wCAAC,UAAU;oCAAI;iCAAE;gCAClC;oCAAC,CAAA,GAAA,yCAAY;oCAAG;wCAAC,UAAU;oCAAI;iCAAE;gCACjC;oCAAC,CAAA,GAAA,yCAAa;oCAAG;wCAAC,QAAQ;oCAAO;iCAAE;gCACnC;oCAAC,CAAA,GAAA,yCAAY;oCAAG;wCAAC,UAAU;oCAAI;iCAAE;gCACjC;oCAAC,CAAA,GAAA,yCAAiB;oCAAG;wCAAC,UAAU;oCAAI;iCAAE;6BACvC;sCACA;;sCAGH,gBAAC;4BACC,SAAS;sCAgBT,cAAA,gBAAC,CAAA,GAAA,eAAO;gCACN,QAAQ;oCACN;wCAAC,CAAA,GAAA,yCAAW;wCAAG;4CAAC,QAAQ;wCAAI;qCAAE;oCAC9B;wCAAC,CAAA,GAAA,yCAAa;wCAAG;4CAAC,UAAU;wCAAI;qCAAE;oCAClC;wCAAC,CAAA,GAAA,yCAAY;wCAAG;4CAAC,UAAU;wCAAI;qCAAE;oCACjC;wCAAC,CAAA,GAAA,yCAAa;wCAAG;4CAAC,UAAU;wCAAI;qCAAE;oCAClC;wCAAC,CAAA,GAAA,yCAAY;wCAAG;4CAAC,QAAQ;wCAAM;qCAAE;oCACjC;wCAAC,CAAA,GAAA,yCAAiB;wCAAG;4CAAC,UAAU,MAAM,aAAa;4CAAE,QAAQ;4CAAa,OAAO;wCAAK;qCAAE;iCACzF;0CACA;;;;;;;AAQjB;AAEA;;;CAGC,GACD,IAAI,0DAAU,CAAA,GAAA,iBAAS,EAAE","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  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)': 'visible'\n  },\n  font: 'body',\n  // TODO: adjust margin on mobile?\n  marginX: {\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\nfunction 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                marginStart: {\n                  default: 32\n                },\n                marginEnd: {\n                  default: 32,\n                  isDismissible: 12\n                },\n                marginTop: {\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\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 */\nlet _Dialog = forwardRef(Dialog);\nexport {_Dialog as Dialog};\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} 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  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)': 'visible'\n  },\n  font: 'body',\n  // TODO: adjust margin on mobile?\n  marginX: {\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                marginStart: {\n                  default: 32\n                },\n                marginEnd: {\n                  default: 32,\n                  isDismissible: 12\n                },\n                marginTop: {\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"}

package/dist/Disclosure.cjs

@@ -61,7 +61,7 @@ const $4e301a98f0cc4e4f$var$disclosure = function anonymous(props, overrides) {
     if (!$q) rules += ' q___C';
     return rules;
 };
-function $4e301a98f0cc4e4f$var$Disclosure(props, ref) {
+const $4e301a98f0cc4e4f$export$74a362b31437ec83 = /*#__PURE__*/ (0, $5FRIp$react.forwardRef)(function Disclosure(props, ref) {
     [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $4e301a98f0cc4e4f$export$d665dd135a51b28a);
     let { size: size = 'M', density: density = 'regular', isQuiet: isQuiet, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '' } = props;
     let domRef = (0, $5FRIp$reactspectrumutils.useDOMRef)(ref);
@@ -88,10 +88,7 @@ function $4e301a98f0cc4e4f$var$Disclosure(props, ref) {
             children: props.children
         })
     });
-}
-/**
- * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.
- */ let $4e301a98f0cc4e4f$export$74a362b31437ec83 = /*#__PURE__*/ (0, $5FRIp$react.forwardRef)($4e301a98f0cc4e4f$var$Disclosure);
+});
 const $4e301a98f0cc4e4f$var$headingStyle = " . Aa Ba ya za _9-3t1y _Zd _8-3t1y qo";
 const $4e301a98f0cc4e4f$var$buttonStyles = function anonymous(props) {
     let rules = " .";
@@ -237,7 +234,7 @@ function $4e301a98f0cc4e4f$var$DisclosureHeaderWithForwardRef(props, ref) {
     });
 }
 const $4e301a98f0cc4e4f$export$1e037ddd32f5b8ac = /*#__PURE__*/ (0, $5FRIp$react.forwardRef)($4e301a98f0cc4e4f$var$DisclosureHeaderWithForwardRef);
-function $4e301a98f0cc4e4f$var$DisclosureTitle(props, ref) {
+const $4e301a98f0cc4e4f$export$7843c6a5b3e340a2 = /*#__PURE__*/ (0, $5FRIp$react.forwardRef)(function DisclosureTitle(props, ref) {
     let { level: level = 3, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '', ...otherProps } = props;
     let domRef = (0, $5FRIp$reactspectrumutils.useDOMRef)(ref);
     const domProps = (0, $5FRIp$reactariautils.filterDOMProps)(otherProps);
@@ -279,10 +276,7 @@ function $4e301a98f0cc4e4f$var$DisclosureTitle(props, ref) {
     return /*#__PURE__*/ (0, $5FRIp$reactjsxruntime.jsx)($4e301a98f0cc4e4f$export$1e037ddd32f5b8ac, {
         children: buttonTrigger
     });
-}
-/**
- * A disclosure title consisting of a heading and a trigger button to expand/collapse the panel.
- */ let $4e301a98f0cc4e4f$export$7843c6a5b3e340a2 = /*#__PURE__*/ (0, $5FRIp$react.forwardRef)($4e301a98f0cc4e4f$var$DisclosureTitle);
+});
 const $4e301a98f0cc4e4f$var$panelStyles = function anonymous(props) {
     let rules = " .";
     rules += ' _c-bc1l9oh';
@@ -315,7 +309,7 @@ const $4e301a98f0cc4e4f$var$panelStyles = function anonymous(props) {
     }
     return rules;
 };
-function $4e301a98f0cc4e4f$var$DisclosurePanel(props, ref) {
+const $4e301a98f0cc4e4f$export$feabaa331e1d464c = /*#__PURE__*/ (0, $5FRIp$react.forwardRef)(function DisclosurePanel(props, ref) {
     let { UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '', ...otherProps } = props;
     const domProps = (0, $5FRIp$reactariautils.filterDOMProps)(otherProps);
     let { size: size } = (0, $5FRIp$reactariacomponents.useSlottedContext)($4e301a98f0cc4e4f$export$d665dd135a51b28a);
@@ -331,10 +325,7 @@ function $4e301a98f0cc4e4f$var$DisclosurePanel(props, ref) {
         }),
         children: props.children
     });
-}
-/**
- * A disclosure panel is a collapsible section of content that is hidden until the disclosure is expanded.
- */ let $4e301a98f0cc4e4f$export$feabaa331e1d464c = /*#__PURE__*/ (0, $5FRIp$react.forwardRef)($4e301a98f0cc4e4f$var$DisclosurePanel);
+});
 
 
 //# sourceMappingURL=Disclosure.cjs.map

package/dist/Disclosure.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Disclosure.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 {ActionButtonContext} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, forwardRefType} from '@react-types/shared';\nimport {Button, ContextValue, DisclosureStateContext, Heading, Provider, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel, DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps, useLocale, useSlottedContext} from 'react-aria-components';\nimport {CenterBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with { type: 'macro' };\nimport Chevron from '../ui-icons/Chevron';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {focusRing, lightDark, style} from '../style' with { type: 'macro' };\nimport React, {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DisclosureProps extends Omit<RACDisclosureProps, 'className' | 'style' | 'children'>, StyleProps {\n  /**\n   * The size of the disclosure.\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The amount of space between the disclosures.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /** Whether the disclosure should be displayed with a quiet style. */\n  isQuiet?: boolean,\n  /** The contents of the disclosure, consisting of a DisclosureTitle and DisclosurePanel. */\n  children: ReactNode\n}\n\nexport const DisclosureContext = createContext<ContextValue<Omit<DisclosureProps, 'children'>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst disclosure = style({\n  color: 'heading',\n  borderTopWidth: {\n    default: 1,\n    isQuiet: 0\n  },\n  borderBottomWidth: {\n    default: 1,\n    isQuiet: 0,\n    isInGroup: {\n      default: 0,\n      ':last-child': {\n        default: 1,\n        isQuiet: 0\n      }\n    }\n  },\n  borderStartWidth: 0,\n  borderEndWidth: 0,\n  borderStyle: 'solid',\n  borderColor: 'gray-200',\n  minWidth: 200\n}, getAllowedOverrides());\n\nfunction Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, DisclosureContext);\n  let {\n    size = 'M',\n    density = 'regular',\n    isQuiet,\n    UNSAFE_style,\n    UNSAFE_className = ''\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let isInGroup = useContext(DisclosureContext) !== null;\n\n  return (\n    <Provider\n      values={[\n        [DisclosureContext, {size, isQuiet, density}]\n      ]}>\n      <RACDisclosure\n        {...props}\n        ref={domRef}\n        style={UNSAFE_style}\n        className={(UNSAFE_className ?? '') + disclosure({isQuiet, isInGroup}, props.styles)}>\n        {props.children}\n      </RACDisclosure>\n    </Provider>\n  );\n}\n\n/**\n * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.\n */\nlet _Disclosure = forwardRef(Disclosure);\nexport {_Disclosure as Disclosure};\n\nexport interface DisclosureTitleProps extends UnsafeStyles, DOMProps {\n  /** The heading level of the disclosure header.\n   * \n   * @default 3\n   */\n  level?: number,\n  /** The contents of the disclosure header. */\n  children: React.ReactNode\n}\n\ninterface DisclosureHeaderProps extends UnsafeStyles, DOMProps {\n  children: React.ReactNode\n}\n\nconst headingStyle = style({\n  margin: 0,\n  flexGrow: 1,\n  display: 'flex',\n  flexShrink: 1,\n  minWidth: 0\n});\n\nconst buttonStyles = style({\n  ...focusRing(),\n  outlineOffset: -2,\n  font: 'heading',\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  fontWeight: 'bold',\n  fontSize: {\n    size: {\n      S: 'heading-xs',\n      M: 'heading-sm',\n      L: 'heading',\n      XL: 'heading-lg'\n    }\n  },\n  lineHeight: 'ui',\n  display: 'flex',\n  flexGrow: 1,\n  alignItems: 'baseline',\n  paddingX: '[calc(self(minHeight) * 3/8 - 1px)]',\n  paddingY: centerPadding(),\n  gap: '[calc(self(minHeight) * 3/8 - 1px)]',\n  minHeight: {\n    // compact is equivalent to 'control', but other densities have more padding.\n    size: {\n      S: {\n        density: {\n          compact: 24,\n          regular: 32,\n          spacious: 40\n        }\n      },\n      M: {\n        density: {\n          compact: 32,\n          regular: 40,\n          spacious: 48\n        }\n      },\n      L: {\n        density: {\n          compact: 40,\n          regular: 48,\n          spacious: 56\n        }\n      },\n      XL: {\n        density: {\n          compact: 48,\n          regular: 56,\n          spacious: 64\n        }\n      }\n    }\n  },\n  width: 'full',\n  backgroundColor: {\n    default: 'transparent',\n    isFocusVisible: lightDark('transparent-black-100', 'transparent-white-100'),\n    isHovered: lightDark('transparent-black-100', 'transparent-white-100'),\n    isPressed: lightDark('transparent-black-300', 'transparent-white-300')\n  },\n  transition: 'default',\n  borderWidth: 0,\n  borderRadius: {\n    // Only rounded for keyboard focus and quiet.\n    default: 'none',\n    isFocusVisible: 'control',\n    isQuiet: 'control'\n  },\n  textAlign: 'start',\n  disableTapHighlight: true\n});\n\nconst chevronStyles = style({\n  rotate: {\n    isRTL: 180,\n    isExpanded: 90\n  },\n  transition: 'default',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  flexShrink: 0\n});\n\nconst InternalDisclosureHeader = createContext<{} | null>(null);\n\nfunction DisclosureHeaderWithForwardRef(props: DisclosureHeaderProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    UNSAFE_className,\n    UNSAFE_style,\n    children\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {size, isQuiet, density} = useSlottedContext(DisclosureContext)!;\n\n  let mapSize = {\n    S: 'XS',\n    M: 'S',\n    L: 'M',\n    XL: 'L'\n  };\n\n  // maps to one size smaller in the compact density to ensure there is space between the top and bottom of the action button and container\n  let newSize : 'XS' | 'S' | 'M' | 'L' | 'XL' | undefined = size;\n  if (density === 'compact') {\n    newSize = mapSize[size ?? 'M'] as 'XS' | 'S' | 'M' | 'L';\n  }\n\n  return (\n    <Provider\n      values={[\n        [ActionButtonContext, {size: newSize, isQuiet}],\n        [InternalDisclosureHeader, {}]\n      ]}>\n      <div\n        style={UNSAFE_style}\n        className={(UNSAFE_className ?? '') + style({display: 'flex', alignItems: 'center', gap: 4})}\n        ref={domRef}>\n        {children}\n      </div>\n    </Provider>\n  );\n}\n\n/**\n * A wrapper element for the disclosure title that can contain other elements not part of the trigger.\n */\nexport const DisclosureHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(DisclosureHeaderWithForwardRef);\n\nfunction DisclosureTitle(props: DisclosureTitleProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    level = 3,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  const domProps = filterDOMProps(otherProps);\n  let {direction} = useLocale();\n  let {isExpanded} = useContext(DisclosureStateContext)!;\n  let {size, density, isQuiet} = useSlottedContext(DisclosureContext)!;\n  let isRTL = direction === 'rtl';\n\n  let buttonTrigger = (\n    <Heading\n      {...domProps}\n      level={level}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={(UNSAFE_className ?? '') + headingStyle}>\n      <Button className={(renderProps) => buttonStyles({...renderProps, size, density, isQuiet})} slot=\"trigger\">\n        <CenterBaseline>\n          <Chevron size={size} className={chevronStyles({isExpanded, isRTL})} aria-hidden=\"true\" />\n        </CenterBaseline>\n        {props.children}\n      </Button>\n    </Heading>\n  );\n  let ctx = useContext(InternalDisclosureHeader);\n  if (ctx) {\n    return buttonTrigger;\n  }\n\n  return (\n    <DisclosureHeader>\n      {buttonTrigger}\n    </DisclosureHeader>\n  );\n}\n\n/**\n * A disclosure title consisting of a heading and a trigger button to expand/collapse the panel.\n */\nlet _DisclosureTitle = forwardRef(DisclosureTitle);\nexport {_DisclosureTitle as DisclosureTitle};\n\nexport interface DisclosurePanelProps extends Omit<RACDisclosurePanelProps, 'className' | 'style' | 'children'>, UnsafeStyles, DOMProps, AriaLabelingProps {\n  children: React.ReactNode\n}\n\nconst panelStyles = style({\n  font: 'body',\n  paddingTop: {\n    isExpanded: 8\n  },\n  paddingBottom: {\n    isExpanded: 16\n  },\n  paddingX: {\n    isExpanded: {\n      size: {\n        S: 8,\n        M: 9,\n        L: 12,\n        XL: 15\n      }\n    }\n  }\n});\n\nfunction DisclosurePanel(props: DisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  const domProps = filterDOMProps(otherProps);\n  let {size} = useSlottedContext(DisclosureContext)!;\n  let {isExpanded} = useContext(DisclosureStateContext)!;\n  let panelRef = useDOMRef(ref);\n  return (\n    <RACDisclosurePanel\n      {...domProps}\n      ref={panelRef}\n      style={UNSAFE_style}\n      className={(UNSAFE_className ?? '') + panelStyles({size, isExpanded})}>\n      {props.children}\n    </RACDisclosurePanel>\n  );\n}\n\n/**\n * A disclosure panel is a collapsible section of content that is hidden until the disclosure is expanded.\n */\nlet _DisclosurePanel = forwardRef(DisclosurePanel);\nexport {_DisclosurePanel as DisclosurePanel};\n\n"],"names":[],"version":3,"file":"Disclosure.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA+BM,MAAM,0DAAoB,CAAA,GAAA,0BAAY,EAAgF;AAE7H,MAAM;;;;;;;;;;;;;;;;;;;;;;AA2BC,MAAM,0DAAa,CAAA,GAAA,uBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAA2B;IAC1G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,cACP,UAAU,oBACV,OAAO,gBACP,YAAY,oBACZ,mBAAmB,IACpB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,YAAY,CAAA,GAAA,uBAAS,EAAE,+CAAuB;IAElD,qBACE,gCAAC,CAAA,GAAA,mCAAO;QACN,QAAQ;YACN;gBAAC;gBAAmB;0BAAC;6BAAM;6BAAS;gBAAO;aAAE;SAC9C;kBACD,cAAA,gCAAC,CAAA,GAAA,qCAAY;YACV,GAAG,KAAK;YACT,KAAK;YACL,OAAO;YACP,WAAW,AAAC,CAAA,oBAAoB,EAAC,IAAK,iCAAW;yBAAC;2BAAS;YAAS,GAAG,MAAM,MAAM;sBAClF,MAAM,QAAQ;;;AAIvB;AAgBA,MAAM;AAQN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EN,MAAM;;;;;;;;;;;AAaN,MAAM,+DAA2B,CAAA,GAAA,0BAAY,EAAa;AAE1D,SAAS,qDAA+B,KAA4B,EAAE,GAA2B;IAC/F,IAAI,oBACF,gBAAgB,gBAChB,YAAY,YACZ,QAAQ,EACT,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,QAAC,IAAI,WAAE,OAAO,WAAE,OAAO,EAAC,GAAG,CAAA,GAAA,4CAAgB,EAAE;IAEjD,IAAI,UAAU;QACZ,GAAG;QACH,GAAG;QACH,GAAG;QACH,IAAI;IACN;IAEA,yIAAyI;IACzI,IAAI,UAAsD;IAC1D,IAAI,YAAY,WACd,UAAU,OAAO,CAAC,QAAQ,IAAI;IAGhC,qBACE,gCAAC,CAAA,GAAA,mCAAO;QACN,QAAQ;YACN;gBAAC,CAAA,GAAA,6CAAkB;gBAAG;oBAAC,MAAM;6BAAS;gBAAO;aAAE;YAC/C;gBAAC;gBAA0B,CAAC;aAAE;SAC/B;kBACD,cAAA,gCAAC;YACC,OAAO;YACP,WAAW,AAAC,CAAA,oBAAoB,EAAC;YACjC,KAAK;sBACJ;;;AAIT;AAKO,MAAM,4CAAiC,AAAd,WAAW,GAAI,CAAA,GAAA,uBAAS,EAAqB;AAKtE,MAAM,0DAAkB,CAAA,GAAA,uBAAS,EAAE,SAAS,gBAAgB,KAA2B,EAAE,GAA2B;IACzH,IAAI,SACF,QAAQ,iBACR,YAAY,oBACZ,mBAAmB,IACnB,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,MAAM,WAAW,CAAA,GAAA,oCAAa,EAAE;IAChC,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,oCAAQ;IAC1B,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,iDAAqB;IACnD,IAAI,QAAC,IAAI,WAAE,OAAO,WAAE,OAAO,EAAC,GAAG,CAAA,GAAA,4CAAgB,EAAE;IACjD,IAAI,QAAQ,cAAc;IAE1B,IAAI,8BACF,gCAAC,CAAA,GAAA,kCAAM;QACJ,GAAG,QAAQ;QACZ,OAAO;QACP,KAAK;QACL,OAAO;QACP,WAAW,AAAC,CAAA,oBAAoB,EAAC,IAAK;kBACtC,cAAA,iCAAC,CAAA,GAAA,iCAAK;YAAE,WAAW,CAAC,cAAgB,mCAAa;oBAAC,GAAG,WAAW;0BAAE;6BAAM;6BAAS;gBAAO;YAAI,MAAK;;8BAC/F,gCAAC,CAAA,GAAA,wCAAa;8BACZ,cAAA,gCAAC,CAAA,GAAA,iCAAM;wBAAE,MAAM;wBAAM,WAAW,oCAAc;wCAAC;mCAAY;wBAAK;wBAAI,eAAY;;;gBAEjF,MAAM,QAAQ;;;;IAIrB,IAAI,MAAM,CAAA,GAAA,uBAAS,EAAE;IACrB,IAAI,KACF,OAAO;IAGT,qBACE,gCAAC;kBACE;;AAGP;AAMA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBC,MAAM,0DAAkB,CAAA,GAAA,uBAAS,EAAE,SAAS,gBAAgB,KAA2B,EAAE,GAA2B;IACzH,IAAI,gBACF,YAAY,oBACZ,mBAAmB,IACnB,GAAG,YACJ,GAAG;IACJ,MAAM,WAAW,CAAA,GAAA,oCAAa,EAAE;IAChC,IAAI,QAAC,IAAI,EAAC,GAAG,CAAA,GAAA,4CAAgB,EAAE;IAC/B,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,iDAAqB;IACnD,IAAI,WAAW,CAAA,GAAA,mCAAQ,EAAE;IACzB,qBACE,gCAAC,CAAA,GAAA,0CAAiB;QACf,GAAG,QAAQ;QACZ,KAAK;QACL,OAAO;QACP,WAAW,AAAC,CAAA,oBAAoB,EAAC,IAAK,kCAAY;kBAAC;wBAAM;QAAU;kBAClE,MAAM,QAAQ;;AAGrB","sources":["packages/@react-spectrum/s2/src/Disclosure.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 {ActionButtonContext} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, forwardRefType} from '@react-types/shared';\nimport {Button, ContextValue, DisclosureStateContext, Heading, Provider, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel, DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps, useLocale, useSlottedContext} from 'react-aria-components';\nimport {CenterBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with { type: 'macro' };\nimport Chevron from '../ui-icons/Chevron';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {focusRing, lightDark, style} from '../style' with { type: 'macro' };\nimport React, {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DisclosureProps extends Omit<RACDisclosureProps, 'className' | 'style' | 'children'>, StyleProps {\n  /**\n   * The size of the disclosure.\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The amount of space between the disclosures.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /** Whether the disclosure should be displayed with a quiet style. */\n  isQuiet?: boolean,\n  /** The contents of the disclosure, consisting of a DisclosureTitle and DisclosurePanel. */\n  children: ReactNode\n}\n\nexport const DisclosureContext = createContext<ContextValue<Omit<DisclosureProps, 'children'>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst disclosure = style({\n  color: 'heading',\n  borderTopWidth: {\n    default: 1,\n    isQuiet: 0\n  },\n  borderBottomWidth: {\n    default: 1,\n    isQuiet: 0,\n    isInGroup: {\n      default: 0,\n      ':last-child': {\n        default: 1,\n        isQuiet: 0\n      }\n    }\n  },\n  borderStartWidth: 0,\n  borderEndWidth: 0,\n  borderStyle: 'solid',\n  borderColor: 'gray-200',\n  minWidth: 200\n}, getAllowedOverrides());\n\n/**\n * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.\n */\nexport const Disclosure = forwardRef(function Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, DisclosureContext);\n  let {\n    size = 'M',\n    density = 'regular',\n    isQuiet,\n    UNSAFE_style,\n    UNSAFE_className = ''\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let isInGroup = useContext(DisclosureContext) !== null;\n\n  return (\n    <Provider\n      values={[\n        [DisclosureContext, {size, isQuiet, density}]\n      ]}>\n      <RACDisclosure\n        {...props}\n        ref={domRef}\n        style={UNSAFE_style}\n        className={(UNSAFE_className ?? '') + disclosure({isQuiet, isInGroup}, props.styles)}>\n        {props.children}\n      </RACDisclosure>\n    </Provider>\n  );\n});\n\nexport interface DisclosureTitleProps extends UnsafeStyles, DOMProps {\n  /** The heading level of the disclosure header.\n   * \n   * @default 3\n   */\n  level?: number,\n  /** The contents of the disclosure header. */\n  children: React.ReactNode\n}\n\ninterface DisclosureHeaderProps extends UnsafeStyles, DOMProps {\n  children: React.ReactNode\n}\n\nconst headingStyle = style({\n  margin: 0,\n  flexGrow: 1,\n  display: 'flex',\n  flexShrink: 1,\n  minWidth: 0\n});\n\nconst buttonStyles = style({\n  ...focusRing(),\n  outlineOffset: -2,\n  font: 'heading',\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  fontWeight: 'bold',\n  fontSize: {\n    size: {\n      S: 'heading-xs',\n      M: 'heading-sm',\n      L: 'heading',\n      XL: 'heading-lg'\n    }\n  },\n  lineHeight: 'ui',\n  display: 'flex',\n  flexGrow: 1,\n  alignItems: 'baseline',\n  paddingX: '[calc(self(minHeight) * 3/8 - 1px)]',\n  paddingY: centerPadding(),\n  gap: '[calc(self(minHeight) * 3/8 - 1px)]',\n  minHeight: {\n    // compact is equivalent to 'control', but other densities have more padding.\n    size: {\n      S: {\n        density: {\n          compact: 24,\n          regular: 32,\n          spacious: 40\n        }\n      },\n      M: {\n        density: {\n          compact: 32,\n          regular: 40,\n          spacious: 48\n        }\n      },\n      L: {\n        density: {\n          compact: 40,\n          regular: 48,\n          spacious: 56\n        }\n      },\n      XL: {\n        density: {\n          compact: 48,\n          regular: 56,\n          spacious: 64\n        }\n      }\n    }\n  },\n  width: 'full',\n  backgroundColor: {\n    default: 'transparent',\n    isFocusVisible: lightDark('transparent-black-100', 'transparent-white-100'),\n    isHovered: lightDark('transparent-black-100', 'transparent-white-100'),\n    isPressed: lightDark('transparent-black-300', 'transparent-white-300')\n  },\n  transition: 'default',\n  borderWidth: 0,\n  borderRadius: {\n    // Only rounded for keyboard focus and quiet.\n    default: 'none',\n    isFocusVisible: 'control',\n    isQuiet: 'control'\n  },\n  textAlign: 'start',\n  disableTapHighlight: true\n});\n\nconst chevronStyles = style({\n  rotate: {\n    isRTL: 180,\n    isExpanded: 90\n  },\n  transition: 'default',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  flexShrink: 0\n});\n\nconst InternalDisclosureHeader = createContext<{} | null>(null);\n\nfunction DisclosureHeaderWithForwardRef(props: DisclosureHeaderProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    UNSAFE_className,\n    UNSAFE_style,\n    children\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {size, isQuiet, density} = useSlottedContext(DisclosureContext)!;\n\n  let mapSize = {\n    S: 'XS',\n    M: 'S',\n    L: 'M',\n    XL: 'L'\n  };\n\n  // maps to one size smaller in the compact density to ensure there is space between the top and bottom of the action button and container\n  let newSize : 'XS' | 'S' | 'M' | 'L' | 'XL' | undefined = size;\n  if (density === 'compact') {\n    newSize = mapSize[size ?? 'M'] as 'XS' | 'S' | 'M' | 'L';\n  }\n\n  return (\n    <Provider\n      values={[\n        [ActionButtonContext, {size: newSize, isQuiet}],\n        [InternalDisclosureHeader, {}]\n      ]}>\n      <div\n        style={UNSAFE_style}\n        className={(UNSAFE_className ?? '') + style({display: 'flex', alignItems: 'center', gap: 4})}\n        ref={domRef}>\n        {children}\n      </div>\n    </Provider>\n  );\n}\n\n/**\n * A wrapper element for the disclosure title that can contain other elements not part of the trigger.\n */\nexport const DisclosureHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(DisclosureHeaderWithForwardRef);\n\n/**\n * A disclosure title consisting of a heading and a trigger button to expand/collapse the panel.\n */\nexport const DisclosureTitle = forwardRef(function DisclosureTitle(props: DisclosureTitleProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    level = 3,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  const domProps = filterDOMProps(otherProps);\n  let {direction} = useLocale();\n  let {isExpanded} = useContext(DisclosureStateContext)!;\n  let {size, density, isQuiet} = useSlottedContext(DisclosureContext)!;\n  let isRTL = direction === 'rtl';\n\n  let buttonTrigger = (\n    <Heading\n      {...domProps}\n      level={level}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={(UNSAFE_className ?? '') + headingStyle}>\n      <Button className={(renderProps) => buttonStyles({...renderProps, size, density, isQuiet})} slot=\"trigger\">\n        <CenterBaseline>\n          <Chevron size={size} className={chevronStyles({isExpanded, isRTL})} aria-hidden=\"true\" />\n        </CenterBaseline>\n        {props.children}\n      </Button>\n    </Heading>\n  );\n  let ctx = useContext(InternalDisclosureHeader);\n  if (ctx) {\n    return buttonTrigger;\n  }\n\n  return (\n    <DisclosureHeader>\n      {buttonTrigger}\n    </DisclosureHeader>\n  );\n});\n\nexport interface DisclosurePanelProps extends Omit<RACDisclosurePanelProps, 'className' | 'style' | 'children'>, UnsafeStyles, DOMProps, AriaLabelingProps {\n  children: React.ReactNode\n}\n\nconst panelStyles = style({\n  font: 'body',\n  paddingTop: {\n    isExpanded: 8\n  },\n  paddingBottom: {\n    isExpanded: 16\n  },\n  paddingX: {\n    isExpanded: {\n      size: {\n        S: 8,\n        M: 9,\n        L: 12,\n        XL: 15\n      }\n    }\n  }\n});\n\n/**\n * A disclosure panel is a collapsible section of content that is hidden until the disclosure is expanded.\n */\nexport const DisclosurePanel = forwardRef(function DisclosurePanel(props: DisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  const domProps = filterDOMProps(otherProps);\n  let {size} = useSlottedContext(DisclosureContext)!;\n  let {isExpanded} = useContext(DisclosureStateContext)!;\n  let panelRef = useDOMRef(ref);\n  return (\n    <RACDisclosurePanel\n      {...domProps}\n      ref={panelRef}\n      style={UNSAFE_style}\n      className={(UNSAFE_className ?? '') + panelStyles({size, isExpanded})}>\n      {props.children}\n    </RACDisclosurePanel>\n  );\n});\n\n"],"names":[],"version":3,"file":"Disclosure.cjs.map"}