@react-spectrum/s2 1.1.0 → 1.2.0

package/dist/ContextualHelp.css.map

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

package/dist/ContextualHelp.mjs

@@ -1,6 +1,6 @@
 import "./ContextualHelp.css";
 import {ActionButton as $da878a05ab4a403e$export$cfc7921d29ef7b80} from "./ActionButton.mjs";
-import {ContentContext as $8e847109a6ab556d$export$1cbdd774077931b4, FooterContext as $8e847109a6ab556d$export$5630640b68817ed6, HeadingContext as $8e847109a6ab556d$export$d688439359537581} from "./Content.mjs";
+import {ContentContext as $8e847109a6ab556d$export$1cbdd774077931b4, FooterContext as $8e847109a6ab556d$export$5630640b68817ed6, HeadingContext as $8e847109a6ab556d$export$d688439359537581, TextContext as $8e847109a6ab556d$export$9afb8bc826b033ea} from "./Content.mjs";
 import {dialogInner as $9bbc115952dac5a6$export$6af31f836f9aa6f2} from "./Dialog.mjs";
 import {DialogTrigger as $66262086fa190fcb$export$2e1e1122cf0cba88} from "./DialogTrigger.mjs";
 import $410bd93c9b5189d7$export$2e2bcd8739ae039 from "../icons/HelpCircle.mjs";
@@ -9,10 +9,10 @@ import $bcd4U$intlStringsmjs from "./intlStrings.mjs";
 import {mergeStyles as $feb886035e0d4633$export$e618dc39ac9ad607} from "../icons/runtime.mjs";
 import {Popover as $88b746eba92c8d0d$export$5b6b19405a83ff9d} from "./Popover.mjs";
 import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
-import {jsxs as $bcd4U$jsxs, jsx as $bcd4U$jsx} from "react/jsx-runtime";
-import {Dialog as $bcd4U$Dialog, Provider as $bcd4U$Provider, TextContext as $bcd4U$TextContext, DEFAULT_SLOT as $bcd4U$DEFAULT_SLOT} from "react-aria-components";
+import {jsx as $bcd4U$jsx, jsxs as $bcd4U$jsxs} from "react/jsx-runtime";
+import {Provider as $bcd4U$Provider, TextContext as $bcd4U$TextContext, DEFAULT_SLOT as $bcd4U$DEFAULT_SLOT} from "react-aria-components";
 import {createContext as $bcd4U$createContext, forwardRef as $bcd4U$forwardRef} from "react";
-import {useLabels as $bcd4U$useLabels, filterDOMProps as $bcd4U$filterDOMProps, mergeProps as $bcd4U$mergeProps} from "@react-aria/utils";
+import {useId as $bcd4U$useId, useLabels as $bcd4U$useLabels, filterDOMProps as $bcd4U$filterDOMProps, mergeProps as $bcd4U$mergeProps} from "@react-aria/utils";
 import {useLocalizedStringFormatter as $bcd4U$useLocalizedStringFormatter} from "@react-aria/i18n";
 
 
@@ -34,7 +34,73 @@ function $parcel$interopDefault(a) {
 
 
 
-const $8e176595bc49ca3f$var$wrappingDiv = " NOBje7c11 ZOBje7c11 Th11 Qh11 Sh11 Rh11 _oa11 Fb11";
+const $8e176595bc49ca3f$var$wrappingDiv = " NOBje7c12 ZOBje7c12 Th12 Qh12 Sh12 Rh12 _oa12 Fb12";
+const $8e176595bc49ca3f$var$headingStyles = " uk12 ucJ9TBTb12 ud3Euai12 uea12 ugb12 uhd12 uje12 u2NhKxcl12 uic12 -_6BNtrc-e12 vx12 xe12 _xa12 xX0cczbd12 _xX0cczba12 xfe12 _xfa12 xfX0cczbd12 _xfX0cczba12 _Fd12 _FnuYUweb12 po12 Jy12 Gv12 Iy12 Hy12";
+function $8e176595bc49ca3f$export$218201d297fb4e0d(props) {
+    let { children: children, ...popoverProps } = props;
+    let titleId = (0, $bcd4U$useId)();
+    return /*#__PURE__*/ (0, $bcd4U$jsx)((0, $88b746eba92c8d0d$export$5b6b19405a83ff9d), {
+        padding: "none",
+        hideArrow: true,
+        "aria-labelledby": titleId,
+        ...popoverProps,
+        children: /*#__PURE__*/ (0, $bcd4U$jsx)("div", {
+            className: $8e176595bc49ca3f$var$wrappingDiv,
+            children: /*#__PURE__*/ (0, $bcd4U$jsx)("div", {
+                className: (0, $feb886035e0d4633$export$e618dc39ac9ad607)((0, $9bbc115952dac5a6$export$6af31f836f9aa6f2), " od12 nd12 kd12 jd12 Jnqb3Ob12 Gnqb3Ob12 Inqb3Ob12 Hnqb3Ob12 TjCFGYc12 Qh12 Sh12 Rh12 -T_-Th12"),
+                children: /*#__PURE__*/ (0, $bcd4U$jsx)((0, $bcd4U$Provider), {
+                    values: [
+                        [
+                            (0, $bcd4U$TextContext),
+                            {
+                                slots: {
+                                    [(0, $bcd4U$DEFAULT_SLOT)]: {}
+                                }
+                            }
+                        ],
+                        // Make sure to clear context from above Menu
+                        [
+                            (0, $8e847109a6ab556d$export$9afb8bc826b033ea),
+                            null
+                        ],
+                        [
+                            (0, $8e847109a6ab556d$export$d688439359537581),
+                            {
+                                styles: $8e176595bc49ca3f$var$headingStyles,
+                                slots: {
+                                    // needed so combobox/picker does not need to provide slot="title" to their provided
+                                    // ContextualHelp (they get the aria-labelled by from the button)
+                                    // otherwise, use the heading if available aka unavaiable menu item
+                                    [(0, $bcd4U$DEFAULT_SLOT)]: {
+                                        styles: $8e176595bc49ca3f$var$headingStyles
+                                    },
+                                    title: {
+                                        id: titleId,
+                                        styles: $8e176595bc49ca3f$var$headingStyles,
+                                        level: 2
+                                    }
+                                }
+                            }
+                        ],
+                        [
+                            (0, $8e847109a6ab556d$export$1cbdd774077931b4),
+                            {
+                                styles: " uk12 ucJ9TBTb12 ud3Euai12 uea12 ugb12 uhd12 uje12 u2NhKxcl12 uic12 -_6BNtrc-c12 vx12 xb12 _xa12 _Fb12 _FnuYUwec12 pt12"
+                            }
+                        ],
+                        [
+                            (0, $8e847109a6ab556d$export$5630640b68817ed6),
+                            {
+                                styles: " uk12 ucJ9TBTb12 ud3Euai12 uea12 ugb12 uhd12 uje12 u2NhKxcl12 uic12 -_6BNtrc-c12 vx12 xb12 _xa12 _Fb12 _FnuYUwec12 pt12 JC12"
+                            }
+                        ]
+                    ],
+                    children: children
+                })
+            })
+        })
+    });
+}
 const $8e176595bc49ca3f$export$41b9afaaba473494 = /*#__PURE__*/ (0, $bcd4U$createContext)(null);
 const $8e176595bc49ca3f$export$7d3cdb256c2ba320 = /*#__PURE__*/ (0, $bcd4U$forwardRef)(function ContextualHelp(props, ref) {
     let stringFormatter = (0, $bcd4U$useLocalizedStringFormatter)((0, ($parcel$interopDefault($bcd4U$intlStringsmjs))), '@react-spectrum/s2');
@@ -65,56 +131,18 @@ const $8e176595bc49ca3f$export$7d3cdb256c2ba320 = /*#__PURE__*/ (0, $bcd4U$forwa
                 isQuiet: true,
                 children: variant === 'info' ? /*#__PURE__*/ (0, $bcd4U$jsx)((0, $4c8f17dac3ecefd9$export$2e2bcd8739ae039), {}) : /*#__PURE__*/ (0, $bcd4U$jsx)((0, $410bd93c9b5189d7$export$2e2bcd8739ae039), {})
             }),
-            /*#__PURE__*/ (0, $bcd4U$jsx)((0, $88b746eba92c8d0d$export$5b6b19405a83ff9d), {
-                padding: "none",
+            /*#__PURE__*/ (0, $bcd4U$jsx)($8e176595bc49ca3f$export$218201d297fb4e0d, {
                 placement: placement,
                 shouldFlip: shouldFlip,
                 containerPadding: containerPadding,
                 offset: 8,
                 crossOffset: crossOffset,
-                hideArrow: true,
-                children: /*#__PURE__*/ (0, $bcd4U$jsx)("div", {
-                    className: $8e176595bc49ca3f$var$wrappingDiv,
-                    children: /*#__PURE__*/ (0, $bcd4U$jsx)((0, $bcd4U$Dialog), {
-                        className: (0, $feb886035e0d4633$export$e618dc39ac9ad607)((0, $9bbc115952dac5a6$export$6af31f836f9aa6f2), " od11 nd11 kd11 jd11 Jnqb3Ob11 Gnqb3Ob11 Inqb3Ob11 Hnqb3Ob11 TjCFGYc11 Qh11 Sh11 Rh11 -T_-Th11"),
-                        children: /*#__PURE__*/ (0, $bcd4U$jsx)((0, $bcd4U$Provider), {
-                            values: [
-                                [
-                                    (0, $bcd4U$TextContext),
-                                    {
-                                        slots: {
-                                            [(0, $bcd4U$DEFAULT_SLOT)]: {}
-                                        }
-                                    }
-                                ],
-                                [
-                                    (0, $8e847109a6ab556d$export$d688439359537581),
-                                    {
-                                        styles: " uk11 ucJ9TBTb11 ud3Euai11 uea11 ugb11 uhd11 uje11 u2NhKxcl11 uic11 -_6BNtrc-e11 vx11 xe11 _xa11 xX0cczbd11 _xX0cczba11 xfe11 _xfa11 xfX0cczbd11 _xfX0cczba11 _Fd11 _FnuYUweb11 po11 Jy11 Gv11 Iy11 Hy11"
-                                    }
-                                ],
-                                [
-                                    (0, $8e847109a6ab556d$export$1cbdd774077931b4),
-                                    {
-                                        styles: " uk11 ucJ9TBTb11 ud3Euai11 uea11 ugb11 uhd11 uje11 u2NhKxcl11 uic11 -_6BNtrc-c11 vx11 xb11 _xa11 _Fb11 _FnuYUwec11 pt11"
-                                    }
-                                ],
-                                [
-                                    (0, $8e847109a6ab556d$export$5630640b68817ed6),
-                                    {
-                                        styles: " uk11 ucJ9TBTb11 ud3Euai11 uea11 ugb11 uhd11 uje11 u2NhKxcl11 uic11 -_6BNtrc-c11 vx11 xb11 _xa11 _Fb11 _FnuYUwec11 pt11 JC11"
-                                    }
-                                ]
-                            ],
-                            children: children
-                        })
-                    })
-                })
+                children: children
             })
         ]
     });
 });
 
 
-export {$8e176595bc49ca3f$export$41b9afaaba473494 as ContextualHelpContext, $8e176595bc49ca3f$export$7d3cdb256c2ba320 as ContextualHelp};
+export {$8e176595bc49ca3f$export$218201d297fb4e0d as ContextualHelpPopover, $8e176595bc49ca3f$export$41b9afaaba473494 as ContextualHelpContext, $8e176595bc49ca3f$export$7d3cdb256c2ba320 as ContextualHelp};
 //# sourceMappingURL=ContextualHelp.mjs.map

package/dist/ContextualHelp.mjs.map

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

package/dist/Cross.cjs

@@ -34,20 +34,20 @@ $parcel$export(module.exports, "default", () => $89dd175101ffc43a$export$2e2bcd8
 
 let $89dd175101ffc43a$var$styles = function anonymous(props) {
     let rules = " ";
-    if (props.size === "S") rules += ' Zh11';
-    else if (props.size === "XXXXL") rules += ' Zu11';
-    else if (props.size === "XXXL") rules += ' Zk11';
-    else if (props.size === "XXL") rules += ' Zj11';
-    else if (props.size === "XL") rules += ' Zj11';
-    else if (props.size === "L") rules += ' Zi11';
-    else if (props.size === "M") rules += ' Zh11';
-    if (props.size === "S") rules += ' Fi11';
-    else if (props.size === "XXXXL") rules += ' Ft11';
-    else if (props.size === "XXXL") rules += ' Fl11';
-    else if (props.size === "XXL") rules += ' Fk11';
-    else if (props.size === "XL") rules += ' Fk11';
-    else if (props.size === "L") rules += ' Fj11';
-    else if (props.size === "M") rules += ' Fi11';
+    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 {
-  .Zi11 {
+  .Zi12 {
     width: calc(.625rem * var(--s2-scale));
   }
 
-  .Zj11 {
+  .Zj12 {
     width: calc(.75rem * var(--s2-scale));
     width: calc(.75rem * var(--s2-scale));
   }
 
-  .Zk11 {
+  .Zk12 {
     width: calc(.875rem * var(--s2-scale));
   }
 
-  .Zu11 {
+  .Zu12 {
     width: calc(1rem * var(--s2-scale));
   }
 
-  .Zh11 {
+  .Zh12 {
     width: calc(.5rem * var(--s2-scale));
   }
 
-  .Fj11 {
+  .Fj12 {
     height: calc(.625rem * var(--s2-scale));
   }
 
-  .Fk11 {
+  .Fk12 {
     height: calc(.75rem * var(--s2-scale));
     height: calc(.75rem * var(--s2-scale));
   }
 
-  .Fl11 {
+  .Fl12 {
     height: calc(.875rem * var(--s2-scale));
   }
 
-  .Ft11 {
+  .Ft12 {
     height: calc(1rem * var(--s2-scale));
   }
 
-  .Fi11 {
+  .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 += ' Zh11';
-    else if (props.size === "XXXXL") rules += ' Zu11';
-    else if (props.size === "XXXL") rules += ' Zk11';
-    else if (props.size === "XXL") rules += ' Zj11';
-    else if (props.size === "XL") rules += ' Zj11';
-    else if (props.size === "L") rules += ' Zi11';
-    else if (props.size === "M") rules += ' Zh11';
-    if (props.size === "S") rules += ' Fi11';
-    else if (props.size === "XXXXL") rules += ' Ft11';
-    else if (props.size === "XXXL") rules += ' Fl11';
-    else if (props.size === "XXL") rules += ' Fk11';
-    else if (props.size === "XL") rules += ' Fk11';
-    else if (props.size === "L") rules += ' Fj11';
-    else if (props.size === "M") rules += ' Fi11';
+    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

@@ -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 += ' Td11';
+    if (props.padding === "none") rules += ' Td12';
     else if (props.padding === "default") {
-        rules += ' Th11';
-        rules += ' Tnk11';
+        rules += ' Th12';
+        rules += ' Tnk12';
     }
-    if (props.padding === "none") rules += ' Qd11';
+    if (props.padding === "none") rules += ' Qd12';
     else if (props.padding === "default") {
-        rules += ' Qh11';
-        rules += ' Qnk11';
+        rules += ' Qh12';
+        rules += ' Qnk12';
     }
-    if (props.padding === "none") rules += ' Sd11';
+    if (props.padding === "none") rules += ' Sd12';
     else if (props.padding === "default") {
-        rules += ' Sh11';
-        rules += ' Snk11';
+        rules += ' Sh12';
+        rules += ' Snk12';
     }
-    if (props.padding === "none") rules += ' Rd11';
+    if (props.padding === "none") rules += ' Rd12';
     else if (props.padding === "default") {
-        rules += ' Rh11';
-        rules += ' Rnk11';
+        rules += ' Rh12';
+        rules += ' Rnk12';
     }
-    rules += ' _oa11';
-    rules += ' _Le11';
-    rules += ' oi11';
-    rules += ' ni11';
-    rules += ' ki11';
-    rules += ' ji11';
-    rules += ' _Na11';
-    rules += ' Pa11';
-    if (!position) rules += ' _Pc11';
-    if (!width) rules += ' Za11';
-    if (!height) rules += ' Fb11';
-    if (!maxWidth) rules += ' L40ub4c11';
-    if (!maxHeight) rules += ' K40ub4c11';
+    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.css

@@ -1,85 +1,85 @@
 @layer _.a {
-  .Th11 {
+  .Th12 {
     padding-top: 24px;
   }
 
-  .Td11 {
+  .Td12 {
     padding-top: 0;
   }
 
-  .Qh11 {
+  .Qh12 {
     padding-bottom: 24px;
   }
 
-  .Qd11 {
+  .Qd12 {
     padding-bottom: 0;
   }
 
-  .Sh11 {
+  .Sh12 {
     padding-inline-start: 24px;
   }
 
-  .Sd11 {
+  .Sd12 {
     padding-inline-start: 0;
   }
 
-  .Rh11 {
+  .Rh12 {
     padding-inline-end: 24px;
   }
 
-  .Rd11 {
+  .Rd12 {
     padding-inline-end: 0;
   }
 
-  ._oa11 {
+  ._oa12 {
     box-sizing: border-box;
   }
 
-  ._Le11 {
+  ._Le12 {
     outline-style: none;
   }
 
-  .oi11 {
+  .oi12 {
     border-start-start-radius: inherit;
   }
 
-  .ni11 {
+  .ni12 {
     border-start-end-radius: inherit;
   }
 
-  .ki11 {
+  .ki12 {
     border-end-start-radius: inherit;
   }
 
-  .ji11 {
+  .ji12 {
     border-end-end-radius: inherit;
   }
 
-  ._Na11 {
+  ._Na12 {
     overflow-x: auto;
   }
 
-  .Pa11 {
+  .Pa12 {
     overflow-y: auto;
   }
 
-  ._Pc11 {
+  ._Pc12 {
     position: relative;
   }
 
-  .Za11 {
+  .Za12 {
     width: 100%;
   }
 
-  .Fb11 {
+  .Fb12 {
     height: 100%;
   }
 
-  .L40ub4c11 {
+  .L40ub4c12 {
     max-width: inherit;
   }
 
-  .K40ub4c11 {
+  .K40ub4c12 {
     max-height: inherit;
   }
 }
@@ -88,19 +88,19 @@
 
 @layer _.b.n {
   @media (width >= 40rem) {
-    .Tnk11 {
+    .Tnk12 {
       padding-top: 32px;
     }
 
-    .Qnk11 {
+    .Qnk12 {
       padding-bottom: 32px;
     }
 
-    .Snk11 {
+    .Snk12 {
       padding-inline-start: 32px;
     }
 
-    .Rnk11 {
+    .Rnk12 {
       padding-inline-end: 32px;
     }
   }

package/dist/CustomDialog.mjs

@@ -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 += ' Td11';
+    if (props.padding === "none") rules += ' Td12';
     else if (props.padding === "default") {
-        rules += ' Th11';
-        rules += ' Tnk11';
+        rules += ' Th12';
+        rules += ' Tnk12';
     }
-    if (props.padding === "none") rules += ' Qd11';
+    if (props.padding === "none") rules += ' Qd12';
     else if (props.padding === "default") {
-        rules += ' Qh11';
-        rules += ' Qnk11';
+        rules += ' Qh12';
+        rules += ' Qnk12';
     }
-    if (props.padding === "none") rules += ' Sd11';
+    if (props.padding === "none") rules += ' Sd12';
     else if (props.padding === "default") {
-        rules += ' Sh11';
-        rules += ' Snk11';
+        rules += ' Sh12';
+        rules += ' Snk12';
     }
-    if (props.padding === "none") rules += ' Rd11';
+    if (props.padding === "none") rules += ' Rd12';
     else if (props.padding === "default") {
-        rules += ' Rh11';
-        rules += ' Rnk11';
+        rules += ' Rh12';
+        rules += ' Rnk12';
     }
-    rules += ' _oa11';
-    rules += ' _Le11';
-    rules += ' oi11';
-    rules += ' ni11';
-    rules += ' ki11';
-    rules += ' ji11';
-    rules += ' _Na11';
-    rules += ' Pa11';
-    if (!position) rules += ' _Pc11';
-    if (!width) rules += ' Za11';
-    if (!height) rules += ' Fb11';
-    if (!maxWidth) rules += ' L40ub4c11';
-    if (!maxHeight) rules += ' K40ub4c11';
+    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) {