@react-spectrum/s2 0.11.2 → 0.12.0

package/dist/ContextualHelp.css.map

@@ -1 +1 @@
-{"mappings":"ACyCgB;EAAA;;;;EAAA;;;;EAAA;;;;EAiEuC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQf;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjFvB;EAyEwB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQD;;;;EAAA;;;;;AAjFvB;EAyEwB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKA;;;;;AA9ExB;EAyEwB;;;;EAAA;;;;EAAA;;;;EAKA;;;;;AA9ExB;EAyEwB;;;;EAAA;;;;EAAA;;;;EAKA;;;;;AA9ExB;EAyEwB;;;;EAAA;;;;EAAA;;;;EAKA;;;;;AA9ExB;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["019fb1fcc3c1598d","packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["@import \"3578337ca657fa78\";\n@import \"a023844b8de14349\";\n@import \"3be9de50ea21a4ea\";\n@import \"5266771b1d67e2fb\";\n@import \"ccaa61f08a335ea7\";\n","import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {ContentContext, FooterContext, HeadingContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {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: 268,\n  width: 268,\n  padding: 24\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n  let {\n    children,\n    defaultOpen,\n    // containerPadding = 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        styles={popover}>\n        <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24}))}>\n          <Provider\n            values={[\n              [TextContext, {\n                slots: {\n                  [DEFAULT_SLOT]: {}\n                }\n              }],\n              [HeadingContext, {styles: style({\n                font: 'heading-xs',\n                margin: 0,\n                marginBottom: space(8) // This only makes it 10px on mobile and should be 12px\n              })}],\n              [ContentContext, {styles: style({\n                font: 'body-sm'\n              })}],\n              [FooterContext, {styles: style({\n                font: 'body-sm',\n                marginTop: 16\n              })}]\n            ]}>\n            {children}\n          </Provider>\n        </RACDialog>\n      </PopoverBase>\n    </DialogTrigger>\n  );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.css.map"}
+{"mappings":"ACyCoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoEqC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQf;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AARC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQD;;;;EAAA;;;;;AARC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKA;;;;;AALA;EAAA;;;;EAAA;;;;EAAA;;;;EAKA;;;;;AALA;EAAA;;;;EAAA;;;;EAAA;;;;EAKA;;;;;AALA;EAAA;;;;EAAA;;;;EAAA;;;;EAKA;;;;;AALA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["019fb1fcc3c1598d","packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["@import \"3578337ca657fa78\";\n@import \"a023844b8de14349\";\n@import \"3be9de50ea21a4ea\";\n@import \"5266771b1d67e2fb\";\n@import \"ccaa61f08a335ea7\";\n","import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {ContentContext, FooterContext, HeadingContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {Popover, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with { type: 'macro' };\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ContextualHelpStyleProps {\n  /**\n   * Indicates whether contents are informative or provides helpful guidance.\n   *\n   * @default 'help'\n   */\n  variant?: 'info' | 'help'\n}\nexport interface ContextualHelpProps extends\n  Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,\n  Pick<PopoverDialogProps, 'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'>,\n  ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {\n  /** Contents of the Contextual Help popover. */\n  children: ReactNode,\n  /**\n   * The size of the ActionButton.\n   *\n   * @default 'XS'\n   */\n  size?: 'XS' | 'S'\n}\n\nconst wrappingDiv = style({\n  minWidth: 268,\n  width: 268,\n  padding: 24,\n  boxSizing: 'border-box',\n  height: 'full'\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n  let {\n    children,\n    defaultOpen,\n    // containerPadding = 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      <Popover\n        padding=\"none\"\n        placement={placement}\n        shouldFlip={shouldFlip}\n        // not working => containerPadding={containerPadding}\n        offset={offset}\n        crossOffset={crossOffset}\n        hideArrow>\n        <div\n          className={wrappingDiv}>\n          <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24}))}>\n            <Provider\n              values={[\n                [TextContext, {\n                  slots: {\n                    [DEFAULT_SLOT]: {}\n                  }\n                }],\n                [HeadingContext, {styles: style({\n                  font: 'heading-xs',\n                  margin: 0,\n                  marginBottom: space(8) // This only makes it 10px on mobile and should be 12px\n                })}],\n                [ContentContext, {styles: style({\n                  font: 'body-sm'\n                })}],\n                [FooterContext, {styles: style({\n                  font: 'body-sm',\n                  marginTop: 16\n                })}]\n              ]}>\n              {children}\n            </Provider>\n          </RACDialog>\n        </div>\n      </Popover>\n    </DialogTrigger>\n  );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.css.map"}

package/dist/ContextualHelp.mjs

@@ -7,7 +7,7 @@ import $410bd93c9b5189d7$export$2e2bcd8739ae039 from "../icons/HelpCircle.mjs";
 import $4c8f17dac3ecefd9$export$2e2bcd8739ae039 from "../icons/InfoCircle.mjs";
 import $bcd4U$intlStringsmjs from "./intlStrings.mjs";
 import {mergeStyles as $feb886035e0d4633$export$e618dc39ac9ad607} from "../icons/runtime.mjs";
-import {PopoverBase as $88b746eba92c8d0d$export$fde1b04c590741a3} from "./Popover.mjs";
+import {Popover as $88b746eba92c8d0d$export$5b6b19405a83ff9d} from "./Popover.mjs";
 import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
 import {jsxs as $bcd4U$jsxs, jsx as $bcd4U$jsx} from "react/jsx-runtime";
 import {Dialog as $bcd4U$Dialog, Provider as $bcd4U$Provider, TextContext as $bcd4U$TextContext, DEFAULT_SLOT as $bcd4U$DEFAULT_SLOT} from "react-aria-components";
@@ -34,7 +34,7 @@ function $parcel$interopDefault(a) {
 
 
 
-const $8e176595bc49ca3f$var$popover = " uk112 uch112 udi112 uea112 ugb112 uhd112 uje112 u2NhKxcl112 uic112 NOBje7c112 ZOBje7c112 Th112 Qh112 Sh112 Rh112";
+const $8e176595bc49ca3f$var$wrappingDiv = " NOBje7c12 ZOBje7c12 Th12 Qh12 Sh12 Rh12 _oa12 Fb12";
 const $8e176595bc49ca3f$export$41b9afaaba473494 = /*#__PURE__*/ (0, $bcd4U$createContext)(null);
 const $8e176595bc49ca3f$export$7d3cdb256c2ba320 = /*#__PURE__*/ (0, $bcd4U$forwardRef)(function ContextualHelp(props, ref) {
     let stringFormatter = (0, $bcd4U$useLocalizedStringFormatter)((0, ($parcel$interopDefault($bcd4U$intlStringsmjs))), '@react-spectrum/s2');
@@ -66,46 +66,49 @@ const $8e176595bc49ca3f$export$7d3cdb256c2ba320 = /*#__PURE__*/ (0, $bcd4U$forwa
                 isQuiet: true,
                 children: variant === 'info' ? /*#__PURE__*/ (0, $bcd4U$jsx)((0, $4c8f17dac3ecefd9$export$2e2bcd8739ae039), {}) : /*#__PURE__*/ (0, $bcd4U$jsx)((0, $410bd93c9b5189d7$export$2e2bcd8739ae039), {})
             }),
-            /*#__PURE__*/ (0, $bcd4U$jsx)((0, $88b746eba92c8d0d$export$fde1b04c590741a3), {
+            /*#__PURE__*/ (0, $bcd4U$jsx)((0, $88b746eba92c8d0d$export$5b6b19405a83ff9d), {
+                padding: "none",
                 placement: placement,
                 shouldFlip: shouldFlip,
                 // not working => containerPadding={containerPadding}
                 offset: offset,
                 crossOffset: crossOffset,
                 hideArrow: true,
-                styles: $8e176595bc49ca3f$var$popover,
-                children: /*#__PURE__*/ (0, $bcd4U$jsx)((0, $bcd4U$Dialog), {
-                    className: (0, $feb886035e0d4633$export$e618dc39ac9ad607)((0, $9bbc115952dac5a6$export$6af31f836f9aa6f2), " od112 nd112 kd112 jd112 Jnqb3Ob112 Gnqb3Ob112 Inqb3Ob112 Hnqb3Ob112 TjCFGYc112 Qh112 Sh112 Rh112 -T_-Th112"),
-                    children: /*#__PURE__*/ (0, $bcd4U$jsx)((0, $bcd4U$Provider), {
-                        values: [
-                            [
-                                (0, $bcd4U$TextContext),
-                                {
-                                    slots: {
-                                        [(0, $bcd4U$DEFAULT_SLOT)]: {}
+                children: /*#__PURE__*/ (0, $bcd4U$jsx)("div", {
+                    className: $8e176595bc49ca3f$var$wrappingDiv,
+                    children: /*#__PURE__*/ (0, $bcd4U$jsx)((0, $bcd4U$Dialog), {
+                        className: (0, $feb886035e0d4633$export$e618dc39ac9ad607)((0, $9bbc115952dac5a6$export$6af31f836f9aa6f2), " od12 nd12 kd12 jd12 Jnqb3Ob12 Gnqb3Ob12 Inqb3Ob12 Hnqb3Ob12 TjCFGYc12 Qh12 Sh12 Rh12 -T_-Th12"),
+                        children: /*#__PURE__*/ (0, $bcd4U$jsx)((0, $bcd4U$Provider), {
+                            values: [
+                                [
+                                    (0, $bcd4U$TextContext),
+                                    {
+                                        slots: {
+                                            [(0, $bcd4U$DEFAULT_SLOT)]: {}
+                                        }
                                     }
-                                }
-                            ],
-                            [
-                                (0, $8e847109a6ab556d$export$d688439359537581),
-                                {
-                                    styles: " uk112 uch112 udi112 uea112 ugb112 uhd112 uje112 u2NhKxcl112 uic112 -_6BNtrc-e112 vx112 we112 xe112 _xa112 wX0cczbd112 xX0cczbd112 _xX0cczba112 wezxGHbd112 xezxGHbd112 _xezxGHba112 wfe112 xfe112 _xfa112 wfX0cczbd112 xfX0cczbd112 _xfX0cczba112 wfezxGHbd112 xfezxGHbd112 _xfezxGHba112 _Fd112 _FezxGHba112 _FnuYUweb112 po112 Jy112 Gv112 Iy112 Hy112"
-                                }
-                            ],
-                            [
-                                (0, $8e847109a6ab556d$export$1cbdd774077931b4),
-                                {
-                                    styles: " uk112 uch112 udi112 uea112 ugb112 uhd112 uje112 u2NhKxcl112 uic112 -_6BNtrc-c112 vx112 wb112 xb112 _xa112 _Fb112 _FnuYUwec112 pt112"
-                                }
+                                ],
+                                [
+                                    (0, $8e847109a6ab556d$export$d688439359537581),
+                                    {
+                                        styles: " uk12 uch12 udi12 uea12 ugb12 uhd12 uje12 u2NhKxcl12 uic12 -_6BNtrc-e12 vx12 we12 xe12 _xa12 wX0cczbd12 xX0cczbd12 _xX0cczba12 wezxGHbd12 xezxGHbd12 _xezxGHba12 wfe12 xfe12 _xfa12 wfX0cczbd12 xfX0cczbd12 _xfX0cczba12 wfezxGHbd12 xfezxGHbd12 _xfezxGHba12 _Fd12 _FezxGHba12 _FnuYUweb12 po12 Jy12 Gv12 Iy12 Hy12"
+                                    }
+                                ],
+                                [
+                                    (0, $8e847109a6ab556d$export$1cbdd774077931b4),
+                                    {
+                                        styles: " uk12 uch12 udi12 uea12 ugb12 uhd12 uje12 u2NhKxcl12 uic12 -_6BNtrc-c12 vx12 wb12 xb12 _xa12 _Fb12 _FnuYUwec12 pt12"
+                                    }
+                                ],
+                                [
+                                    (0, $8e847109a6ab556d$export$5630640b68817ed6),
+                                    {
+                                        styles: " uk12 uch12 udi12 uea12 ugb12 uhd12 uje12 u2NhKxcl12 uic12 -_6BNtrc-c12 vx12 wb12 xb12 _xa12 _Fb12 _FnuYUwec12 pt12 JC12"
+                                    }
+                                ]
                             ],
-                            [
-                                (0, $8e847109a6ab556d$export$5630640b68817ed6),
-                                {
-                                    styles: " uk112 uch112 udi112 uea112 ugb112 uhd112 uje112 u2NhKxcl112 uic112 -_6BNtrc-c112 vx112 wb112 xb112 _xa112 _Fb112 _FnuYUwec112 pt112 JC112"
-                                }
-                            ]
-                        ],
-                        children: children
+                            children: children
+                        })
                     })
                 })
             })

package/dist/ContextualHelp.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAM;AAOC,MAAM,0DAAwB,CAAA,GAAA,oBAAY,EAAoF;AAK9H,MAAM,0DAAiB,CAAA,GAAA,iBAAS,EAAE,SAAS,eAAe,KAA0B,EAAE,GAAoC;IAC/H,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,eACR,WAAW,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,QAAQ;0BACR,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: 268,\n  width: 268,\n  padding: 24\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n  let {\n    children,\n    defaultOpen,\n    // containerPadding = 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        styles={popover}>\n        <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24}))}>\n          <Provider\n            values={[\n              [TextContext, {\n                slots: {\n                  [DEFAULT_SLOT]: {}\n                }\n              }],\n              [HeadingContext, {styles: style({\n                font: 'heading-xs',\n                margin: 0,\n                marginBottom: space(8) // This only makes it 10px on mobile and should be 12px\n              })}],\n              [ContentContext, {styles: style({\n                font: 'body-sm'\n              })}],\n              [FooterContext, {styles: style({\n                font: 'body-sm',\n                marginTop: 16\n              })}]\n            ]}>\n            {children}\n          </Provider>\n        </RACDialog>\n      </PopoverBase>\n    </DialogTrigger>\n  );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.mjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAM;AAQC,MAAM,0DAAwB,CAAA,GAAA,oBAAY,EAAoF;AAK9H,MAAM,0DAAiB,CAAA,GAAA,iBAAS,EAAE,SAAS,eAAe,KAA0B,EAAE,GAAoC;IAC/H,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,eACR,WAAW,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,yCAAM;gBACL,SAAQ;gBACR,WAAW;gBACX,YAAY;gBACZ,qDAAqD;gBACrD,QAAQ;gBACR,aAAa;gBACb,SAAS;0BACT,cAAA,gBAAC;oBACC,WAAW;8BACX,cAAA,gBAAC,CAAA,GAAA,aAAQ;wBAAE,WAAW,CAAA,GAAA,yCAAU,EAAE,CAAA,GAAA,yCAAU;kCAC1C,cAAA,gBAAC,CAAA,GAAA,eAAO;4BACN,QAAQ;gCACN;oCAAC,CAAA,GAAA,kBAAU;oCAAG;wCACZ,OAAO;4CACL,CAAC,CAAA,GAAA,mBAAW,EAAE,EAAE,CAAC;wCACnB;oCACF;iCAAE;gCACF;oCAAC,CAAA,GAAA,yCAAa;oCAAG;wCAAC,MAAM;oCAItB;iCAAE;gCACJ;oCAAC,CAAA,GAAA,yCAAa;oCAAG;wCAAC,MAAM;oCAEtB;iCAAE;gCACJ;oCAAC,CAAA,GAAA,yCAAY;oCAAG;wCAAC,MAAM;oCAGrB;iCAAE;6BACL;sCACA;;;;;;;AAOf","sources":["packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {ContentContext, FooterContext, HeadingContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {Popover, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with { type: 'macro' };\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ContextualHelpStyleProps {\n  /**\n   * Indicates whether contents are informative or provides helpful guidance.\n   *\n   * @default 'help'\n   */\n  variant?: 'info' | 'help'\n}\nexport interface ContextualHelpProps extends\n  Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,\n  Pick<PopoverDialogProps, 'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'>,\n  ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {\n  /** Contents of the Contextual Help popover. */\n  children: ReactNode,\n  /**\n   * The size of the ActionButton.\n   *\n   * @default 'XS'\n   */\n  size?: 'XS' | 'S'\n}\n\nconst wrappingDiv = style({\n  minWidth: 268,\n  width: 268,\n  padding: 24,\n  boxSizing: 'border-box',\n  height: 'full'\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n  let {\n    children,\n    defaultOpen,\n    // containerPadding = 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      <Popover\n        padding=\"none\"\n        placement={placement}\n        shouldFlip={shouldFlip}\n        // not working => containerPadding={containerPadding}\n        offset={offset}\n        crossOffset={crossOffset}\n        hideArrow>\n        <div\n          className={wrappingDiv}>\n          <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24}))}>\n            <Provider\n              values={[\n                [TextContext, {\n                  slots: {\n                    [DEFAULT_SLOT]: {}\n                  }\n                }],\n                [HeadingContext, {styles: style({\n                  font: 'heading-xs',\n                  margin: 0,\n                  marginBottom: space(8) // This only makes it 10px on mobile and should be 12px\n                })}],\n                [ContentContext, {styles: style({\n                  font: 'body-sm'\n                })}],\n                [FooterContext, {styles: style({\n                  font: 'body-sm',\n                  marginTop: 16\n                })}]\n              ]}>\n              {children}\n            </Provider>\n          </RACDialog>\n        </div>\n      </Popover>\n    </DialogTrigger>\n  );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.mjs.map"}

package/dist/Cross.cjs

@@ -34,20 +34,20 @@ $parcel$export(module.exports, "default", () => $89dd175101ffc43a$export$2e2bcd8
 
 let $89dd175101ffc43a$var$styles = function anonymous(props) {
     let rules = " ";
-    if (props.size === "S") rules += ' Zh112';
-    else if (props.size === "XXXXL") rules += ' Zu112';
-    else if (props.size === "XXXL") rules += ' Zk112';
-    else if (props.size === "XXL") rules += ' Zj112';
-    else if (props.size === "XL") rules += ' Zj112';
-    else if (props.size === "L") rules += ' Zi112';
-    else if (props.size === "M") rules += ' Zh112';
-    if (props.size === "S") rules += ' Fi112';
-    else if (props.size === "XXXXL") rules += ' Ft112';
-    else if (props.size === "XXXL") rules += ' Fl112';
-    else if (props.size === "XXL") rules += ' Fk112';
-    else if (props.size === "XL") rules += ' Fk112';
-    else if (props.size === "L") rules += ' Fj112';
-    else if (props.size === "M") rules += ' Fi112';
+    if (props.size === "S") rules += ' Zh12';
+    else if (props.size === "XXXXL") rules += ' Zu12';
+    else if (props.size === "XXXL") rules += ' Zk12';
+    else if (props.size === "XXL") rules += ' Zj12';
+    else if (props.size === "XL") rules += ' Zj12';
+    else if (props.size === "L") rules += ' Zi12';
+    else if (props.size === "M") rules += ' Zh12';
+    if (props.size === "S") rules += ' Fi12';
+    else if (props.size === "XXXXL") rules += ' Ft12';
+    else if (props.size === "XXXL") rules += ' Fl12';
+    else if (props.size === "XXL") rules += ' Fk12';
+    else if (props.size === "XL") rules += ' Fk12';
+    else if (props.size === "L") rules += ' Fj12';
+    else if (props.size === "M") rules += ' Fi12';
     return rules;
 };
 function $89dd175101ffc43a$export$2e2bcd8739ae039(props) {

package/dist/Cross.css

@@ -1,43 +1,43 @@
 @layer _.a {
-  .Zi112 {
+  .Zi12 {
     width: calc(.625rem * var(--s2-scale));
   }
 
-  .Zj112 {
+  .Zj12 {
     width: calc(.75rem * var(--s2-scale));
     width: calc(.75rem * var(--s2-scale));
   }
 
-  .Zk112 {
+  .Zk12 {
     width: calc(.875rem * var(--s2-scale));
   }
 
-  .Zu112 {
+  .Zu12 {
     width: calc(1rem * var(--s2-scale));
   }
 
-  .Zh112 {
+  .Zh12 {
     width: calc(.5rem * var(--s2-scale));
   }
 
-  .Fj112 {
+  .Fj12 {
     height: calc(.625rem * var(--s2-scale));
   }
 
-  .Fk112 {
+  .Fk12 {
     height: calc(.75rem * var(--s2-scale));
     height: calc(.75rem * var(--s2-scale));
   }
 
-  .Fl112 {
+  .Fl12 {
     height: calc(.875rem * var(--s2-scale));
   }
 
-  .Ft112 {
+  .Ft12 {
     height: calc(1rem * var(--s2-scale));
   }
 
-  .Fi112 {
+  .Fi12 {
     height: calc(.5rem * var(--s2-scale));
   }
 }

package/dist/Cross.mjs

@@ -28,20 +28,20 @@ import {jsx as $1piiz$jsx} from "react/jsx-runtime";
 
 let $bd983341bd35d639$var$styles = function anonymous(props) {
     let rules = " ";
-    if (props.size === "S") rules += ' Zh112';
-    else if (props.size === "XXXXL") rules += ' Zu112';
-    else if (props.size === "XXXL") rules += ' Zk112';
-    else if (props.size === "XXL") rules += ' Zj112';
-    else if (props.size === "XL") rules += ' Zj112';
-    else if (props.size === "L") rules += ' Zi112';
-    else if (props.size === "M") rules += ' Zh112';
-    if (props.size === "S") rules += ' Fi112';
-    else if (props.size === "XXXXL") rules += ' Ft112';
-    else if (props.size === "XXXL") rules += ' Fl112';
-    else if (props.size === "XXL") rules += ' Fk112';
-    else if (props.size === "XL") rules += ' Fk112';
-    else if (props.size === "L") rules += ' Fj112';
-    else if (props.size === "M") rules += ' Fi112';
+    if (props.size === "S") rules += ' Zh12';
+    else if (props.size === "XXXXL") rules += ' Zu12';
+    else if (props.size === "XXXL") rules += ' Zk12';
+    else if (props.size === "XXL") rules += ' Zj12';
+    else if (props.size === "XL") rules += ' Zj12';
+    else if (props.size === "L") rules += ' Zi12';
+    else if (props.size === "M") rules += ' Zh12';
+    if (props.size === "S") rules += ' Fi12';
+    else if (props.size === "XXXXL") rules += ' Ft12';
+    else if (props.size === "XXXL") rules += ' Fl12';
+    else if (props.size === "XXL") rules += ' Fk12';
+    else if (props.size === "XL") rules += ' Fk12';
+    else if (props.size === "L") rules += ' Fj12';
+    else if (props.size === "M") rules += ' Fi12';
     return rules;
 };
 function $bd983341bd35d639$export$2e2bcd8739ae039(props) {

package/dist/CustomDialog.cjs

@@ -33,7 +33,7 @@ const $a05aa0b0345f1846$var$dialogStyle = function anonymous(props, overrides) {
     let height = false;
     let maxWidth = false;
     let maxHeight = false;
-    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L|F|M|K)[^\s]+/g);
+    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "_P") position = true;
         if (p[1] === "Z") width = true;
@@ -42,39 +42,39 @@ const $a05aa0b0345f1846$var$dialogStyle = function anonymous(props, overrides) {
         if (p[1] === "K") maxHeight = true;
         rules += p[0];
     }
-    if (props.padding === "none") rules += ' Td112';
+    if (props.padding === "none") rules += ' Td12';
     else if (props.padding === "default") {
-        rules += ' Th112';
-        rules += ' Tnk112';
+        rules += ' Th12';
+        rules += ' Tnk12';
     }
-    if (props.padding === "none") rules += ' Qd112';
+    if (props.padding === "none") rules += ' Qd12';
     else if (props.padding === "default") {
-        rules += ' Qh112';
-        rules += ' Qnk112';
+        rules += ' Qh12';
+        rules += ' Qnk12';
     }
-    if (props.padding === "none") rules += ' Sd112';
+    if (props.padding === "none") rules += ' Sd12';
     else if (props.padding === "default") {
-        rules += ' Sh112';
-        rules += ' Snk112';
+        rules += ' Sh12';
+        rules += ' Snk12';
     }
-    if (props.padding === "none") rules += ' Rd112';
+    if (props.padding === "none") rules += ' Rd12';
     else if (props.padding === "default") {
-        rules += ' Rh112';
-        rules += ' Rnk112';
+        rules += ' Rh12';
+        rules += ' Rnk12';
     }
-    rules += ' _oa112';
-    rules += ' _Le112';
-    rules += ' oi112';
-    rules += ' ni112';
-    rules += ' ki112';
-    rules += ' ji112';
-    rules += ' _Na112';
-    rules += ' Pa112';
-    if (!position) rules += ' _Pc112';
-    if (!width) rules += ' Za112';
-    if (!height) rules += ' Fb112';
-    if (!maxWidth) rules += ' L40ub4c112';
-    if (!maxHeight) rules += ' K40ub4c112';
+    rules += ' _oa12';
+    rules += ' _Le12';
+    rules += ' oi12';
+    rules += ' ni12';
+    rules += ' ki12';
+    rules += ' ji12';
+    rules += ' _Na12';
+    rules += ' Pa12';
+    if (!position) rules += ' _Pc12';
+    if (!width) rules += ' Za12';
+    if (!height) rules += ' Fb12';
+    if (!maxWidth) rules += ' L40ub4c12';
+    if (!maxHeight) rules += ' K40ub4c12';
     return rules;
 };
 const $a05aa0b0345f1846$export$82e1fa7406db6ec = /*#__PURE__*/ (0, $f8dpT$react.forwardRef)(function CustomDialog(props, ref) {

package/dist/CustomDialog.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA4BD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBC,MAAM,yDAAe,CAAA,GAAA,uBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAW;IAChG,IAAI,QACF,IAAI,iBACJ,aAAa,6BACb,yBAAyB,WACzB,UAAU,WACX,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,+BAAI;QAAE,MAAM;QAAM,eAAe;QAAe,2BAA2B;kBAC1E,cAAA,gCAAC,CAAA,GAAA,iCAAQ;YACN,GAAG,KAAK;YACT,KAAK;YACL,OAAO,MAAM,YAAY;YACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY;yBAAC;YAAO,GAAG,MAAM,MAAM;sBAC9E,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,WACnC,oGAAoG;8BACpG,gCAAC,CAAA,GAAA,qDAAyB,EAAE,QAAQ;oBAAC,OAAO;8BACzC;;;;AAMb","sources":["packages/@react-spectrum/s2/src/CustomDialog.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {composeRenderProps, OverlayTriggerStateContext, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';\nimport {DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {Modal} from './Modal';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface CustomDialogProps extends Omit<RACDialogProps, 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps {\n  /**\n   * The size of the Dialog.\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover',\n  /**\n   * Whether the Dialog is dismissible.\n   */\n  isDismissible?: boolean,\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean,\n  /**\n   * The amount of padding around the contents of the dialog.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none'\n}\n\nconst dialogStyle = style({\n  padding: {\n    padding: {\n      default: {\n        default: 24,\n        sm: 32\n      },\n      none: 0\n    }\n  },\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  borderRadius: 'inherit',\n  overflow: 'auto',\n  position: 'relative',\n  size: 'full',\n  maxSize: 'inherit'\n}, getAllowedOverrides({height: true}));\n\n/**\n * A CustomDialog is a floating window with a custom layout.\n */\nexport const CustomDialog = forwardRef(function CustomDialog(props: CustomDialogProps, ref: DOMRef) {\n  let {\n    size,\n    isDismissible,\n    isKeyboardDismissDisabled,\n    padding = 'default'\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <Modal size={size} isDismissable={isDismissible} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>\n      <RACDialog\n        {...props}\n        ref={domRef}\n        style={props.UNSAFE_style}\n        className={(props.UNSAFE_className || '') + dialogStyle({padding}, props.styles)}>\n        {composeRenderProps(props.children, (children) => (\n          // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n          <OverlayTriggerStateContext.Provider value={null}>\n            {children}\n          </OverlayTriggerStateContext.Provider>\n        ))}\n      </RACDialog>\n    </Modal>\n  );\n});\n"],"names":[],"version":3,"file":"CustomDialog.cjs.map"}
+{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA4BD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBC,MAAM,yDAAe,CAAA,GAAA,uBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAW;IAChG,IAAI,QACF,IAAI,iBACJ,aAAa,6BACb,yBAAyB,WACzB,UAAU,WACX,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,+BAAI;QAAE,MAAM;QAAM,eAAe;QAAe,2BAA2B;kBAC1E,cAAA,gCAAC,CAAA,GAAA,iCAAQ;YACN,GAAG,KAAK;YACT,KAAK;YACL,OAAO,MAAM,YAAY;YACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY;yBAAC;YAAO,GAAG,MAAM,MAAM;sBAC9E,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,WACnC,oGAAoG;8BACpG,gCAAC,CAAA,GAAA,qDAAyB,EAAE,QAAQ;oBAAC,OAAO;8BACzC;;;;AAMb","sources":["packages/@react-spectrum/s2/src/CustomDialog.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {composeRenderProps, OverlayTriggerStateContext, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';\nimport {DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {Modal} from './Modal';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface CustomDialogProps extends Omit<RACDialogProps, 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps {\n  /**\n   * The size of the Dialog.\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover',\n  /**\n   * Whether the Dialog is dismissible.\n   */\n  isDismissible?: boolean,\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean,\n  /**\n   * The amount of padding around the contents of the dialog.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none'\n}\n\nconst dialogStyle = style({\n  padding: {\n    padding: {\n      default: {\n        default: 24,\n        sm: 32\n      },\n      none: 0\n    }\n  },\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  borderRadius: 'inherit',\n  overflow: 'auto',\n  position: 'relative',\n  size: 'full',\n  maxSize: 'inherit'\n}, getAllowedOverrides({height: true, width: true}));\n\n/**\n * A CustomDialog is a floating window with a custom layout.\n */\nexport const CustomDialog = forwardRef(function CustomDialog(props: CustomDialogProps, ref: DOMRef) {\n  let {\n    size,\n    isDismissible,\n    isKeyboardDismissDisabled,\n    padding = 'default'\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <Modal size={size} isDismissable={isDismissible} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>\n      <RACDialog\n        {...props}\n        ref={domRef}\n        style={props.UNSAFE_style}\n        className={(props.UNSAFE_className || '') + dialogStyle({padding}, props.styles)}>\n        {composeRenderProps(props.children, (children) => (\n          // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n          <OverlayTriggerStateContext.Provider value={null}>\n            {children}\n          </OverlayTriggerStateContext.Provider>\n        ))}\n      </RACDialog>\n    </Modal>\n  );\n});\n"],"names":[],"version":3,"file":"CustomDialog.cjs.map"}

package/dist/CustomDialog.css

@@ -1,85 +1,85 @@
 @layer _.a {
-  .Th112 {
+  .Th12 {
     padding-top: 24px;
   }
 
-  .Td112 {
+  .Td12 {
     padding-top: 0;
   }
 
-  .Qh112 {
+  .Qh12 {
     padding-bottom: 24px;
   }
 
-  .Qd112 {
+  .Qd12 {
     padding-bottom: 0;
   }
 
-  .Sh112 {
+  .Sh12 {
     padding-inline-start: 24px;
   }
 
-  .Sd112 {
+  .Sd12 {
     padding-inline-start: 0;
   }
 
-  .Rh112 {
+  .Rh12 {
     padding-inline-end: 24px;
   }
 
-  .Rd112 {
+  .Rd12 {
     padding-inline-end: 0;
   }
 
-  ._oa112 {
+  ._oa12 {
     box-sizing: border-box;
   }
 
-  ._Le112 {
+  ._Le12 {
     outline-style: none;
   }
 
-  .oi112 {
+  .oi12 {
     border-start-start-radius: inherit;
   }
 
-  .ni112 {
+  .ni12 {
     border-start-end-radius: inherit;
   }
 
-  .ki112 {
+  .ki12 {
     border-end-start-radius: inherit;
   }
 
-  .ji112 {
+  .ji12 {
     border-end-end-radius: inherit;
   }
 
-  ._Na112 {
+  ._Na12 {
     overflow-x: auto;
   }
 
-  .Pa112 {
+  .Pa12 {
     overflow-y: auto;
   }
 
-  ._Pc112 {
+  ._Pc12 {
     position: relative;
   }
 
-  .Za112 {
+  .Za12 {
     width: 100%;
   }
 
-  .Fb112 {
+  .Fb12 {
     height: 100%;
   }
 
-  .L40ub4c112 {
+  .L40ub4c12 {
     max-width: inherit;
   }
 
-  .K40ub4c112 {
+  .K40ub4c12 {
     max-height: inherit;
   }
 }
@@ -88,19 +88,19 @@
 
 @layer _.b.n {
   @media (width >= 40rem) {
-    .Tnk112 {
+    .Tnk12 {
       padding-top: 32px;
     }
 
-    .Qnk112 {
+    .Qnk12 {
       padding-bottom: 32px;
     }
 
-    .Snk112 {
+    .Snk12 {
       padding-inline-start: 32px;
     }
 
-    .Rnk112 {
+    .Rnk12 {
       padding-inline-end: 32px;
     }
   }

package/dist/CustomDialog.css.map

@@ -1 +1 @@
-{"mappings":"AAsCoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["packages/@react-spectrum/s2/src/CustomDialog.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {composeRenderProps, OverlayTriggerStateContext, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';\nimport {DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {Modal} from './Modal';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface CustomDialogProps extends Omit<RACDialogProps, 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps {\n  /**\n   * The size of the Dialog.\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover',\n  /**\n   * Whether the Dialog is dismissible.\n   */\n  isDismissible?: boolean,\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean,\n  /**\n   * The amount of padding around the contents of the dialog.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none'\n}\n\nconst dialogStyle = style({\n  padding: {\n    padding: {\n      default: {\n        default: 24,\n        sm: 32\n      },\n      none: 0\n    }\n  },\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  borderRadius: 'inherit',\n  overflow: 'auto',\n  position: 'relative',\n  size: 'full',\n  maxSize: 'inherit'\n}, getAllowedOverrides({height: true}));\n\n/**\n * A CustomDialog is a floating window with a custom layout.\n */\nexport const CustomDialog = forwardRef(function CustomDialog(props: CustomDialogProps, ref: DOMRef) {\n  let {\n    size,\n    isDismissible,\n    isKeyboardDismissDisabled,\n    padding = 'default'\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <Modal size={size} isDismissable={isDismissible} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>\n      <RACDialog\n        {...props}\n        ref={domRef}\n        style={props.UNSAFE_style}\n        className={(props.UNSAFE_className || '') + dialogStyle({padding}, props.styles)}>\n        {composeRenderProps(props.children, (children) => (\n          // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n          <OverlayTriggerStateContext.Provider value={null}>\n            {children}\n          </OverlayTriggerStateContext.Provider>\n        ))}\n      </RACDialog>\n    </Modal>\n  );\n});\n"],"names":[],"version":3,"file":"CustomDialog.css.map"}
+{"mappings":"AAsCoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["packages/@react-spectrum/s2/src/CustomDialog.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {composeRenderProps, OverlayTriggerStateContext, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';\nimport {DOMRef, GlobalDOMAttributes} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {Modal} from './Modal';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface CustomDialogProps extends Omit<RACDialogProps, 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps {\n  /**\n   * The size of the Dialog.\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover',\n  /**\n   * Whether the Dialog is dismissible.\n   */\n  isDismissible?: boolean,\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean,\n  /**\n   * The amount of padding around the contents of the dialog.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none'\n}\n\nconst dialogStyle = style({\n  padding: {\n    padding: {\n      default: {\n        default: 24,\n        sm: 32\n      },\n      none: 0\n    }\n  },\n  boxSizing: 'border-box',\n  outlineStyle: 'none',\n  borderRadius: 'inherit',\n  overflow: 'auto',\n  position: 'relative',\n  size: 'full',\n  maxSize: 'inherit'\n}, getAllowedOverrides({height: true, width: true}));\n\n/**\n * A CustomDialog is a floating window with a custom layout.\n */\nexport const CustomDialog = forwardRef(function CustomDialog(props: CustomDialogProps, ref: DOMRef) {\n  let {\n    size,\n    isDismissible,\n    isKeyboardDismissDisabled,\n    padding = 'default'\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <Modal size={size} isDismissable={isDismissible} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>\n      <RACDialog\n        {...props}\n        ref={domRef}\n        style={props.UNSAFE_style}\n        className={(props.UNSAFE_className || '') + dialogStyle({padding}, props.styles)}>\n        {composeRenderProps(props.children, (children) => (\n          // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n          <OverlayTriggerStateContext.Provider value={null}>\n            {children}\n          </OverlayTriggerStateContext.Provider>\n        ))}\n      </RACDialog>\n    </Modal>\n  );\n});\n"],"names":[],"version":3,"file":"CustomDialog.css.map"}

package/dist/CustomDialog.mjs

@@ -27,7 +27,7 @@ const $6e8e8fdd66697ef1$var$dialogStyle = function anonymous(props, overrides) {
     let height = false;
     let maxWidth = false;
     let maxHeight = false;
-    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L|F|M|K)[^\s]+/g);
+    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "_P") position = true;
         if (p[1] === "Z") width = true;
@@ -36,39 +36,39 @@ const $6e8e8fdd66697ef1$var$dialogStyle = function anonymous(props, overrides) {
         if (p[1] === "K") maxHeight = true;
         rules += p[0];
     }
-    if (props.padding === "none") rules += ' Td112';
+    if (props.padding === "none") rules += ' Td12';
     else if (props.padding === "default") {
-        rules += ' Th112';
-        rules += ' Tnk112';
+        rules += ' Th12';
+        rules += ' Tnk12';
     }
-    if (props.padding === "none") rules += ' Qd112';
+    if (props.padding === "none") rules += ' Qd12';
     else if (props.padding === "default") {
-        rules += ' Qh112';
-        rules += ' Qnk112';
+        rules += ' Qh12';
+        rules += ' Qnk12';
     }
-    if (props.padding === "none") rules += ' Sd112';
+    if (props.padding === "none") rules += ' Sd12';
     else if (props.padding === "default") {
-        rules += ' Sh112';
-        rules += ' Snk112';
+        rules += ' Sh12';
+        rules += ' Snk12';
     }
-    if (props.padding === "none") rules += ' Rd112';
+    if (props.padding === "none") rules += ' Rd12';
     else if (props.padding === "default") {
-        rules += ' Rh112';
-        rules += ' Rnk112';
+        rules += ' Rh12';
+        rules += ' Rnk12';
     }
-    rules += ' _oa112';
-    rules += ' _Le112';
-    rules += ' oi112';
-    rules += ' ni112';
-    rules += ' ki112';
-    rules += ' ji112';
-    rules += ' _Na112';
-    rules += ' Pa112';
-    if (!position) rules += ' _Pc112';
-    if (!width) rules += ' Za112';
-    if (!height) rules += ' Fb112';
-    if (!maxWidth) rules += ' L40ub4c112';
-    if (!maxHeight) rules += ' K40ub4c112';
+    rules += ' _oa12';
+    rules += ' _Le12';
+    rules += ' oi12';
+    rules += ' ni12';
+    rules += ' ki12';
+    rules += ' ji12';
+    rules += ' _Na12';
+    rules += ' Pa12';
+    if (!position) rules += ' _Pc12';
+    if (!width) rules += ' Za12';
+    if (!height) rules += ' Fb12';
+    if (!maxWidth) rules += ' L40ub4c12';
+    if (!maxHeight) rules += ' K40ub4c12';
     return rules;
 };
 const $6e8e8fdd66697ef1$export$82e1fa7406db6ec = /*#__PURE__*/ (0, $4wOFe$forwardRef)(function CustomDialog(props, ref) {