@react-spectrum/s2 1.3.0 → 1.4.0

package/dist/private/ContextualHelp.css

@@ -1,217 +1,217 @@
 @layer _.a {
-  .NOBje7c13 {
+  .NOBje7c131 {
     min-width: calc(16.75rem * var(--s2-scale));
   }
 
-  .ZOBje7c13 {
+  .ZOBje7c131 {
     width: calc(16.75rem * var(--s2-scale));
   }
 
-  .Th13 {
+  .Th131 {
     padding-top: 24px;
   }
 
-  ._oa13 {
+  ._oa131 {
     box-sizing: border-box;
   }
 
-  .Fb13 {
+  .Fb131 {
     height: 100%;
   }
 
-  .-_6BNtrc-e13 {
+  .-_6BNtrc-e131 {
     --fs: pow(1.125, 2);
   }
 
-  .xe13 {
+  .xe131 {
     font-weight: 800;
   }
 
-  ._Fd13 {
+  ._Fd131 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
   }
 
-  .po13 {
+  .po131 {
     color: light-dark(#131313, #f2f2f2);
   }
 
-  .Jy13 {
+  .Jy131 {
     margin-top: 0;
   }
 
-  .Gv13 {
+  .Gv131 {
     margin-bottom: .5rem;
   }
 
-  .Iy13 {
+  .Iy131 {
     margin-inline-start: 0;
   }
 
-  .Hy13 {
+  .Hy131 {
     margin-inline-end: 0;
   }
 
-  .od13 {
+  .od131 {
     border-start-start-radius: 0;
   }
 
-  .nd13 {
+  .nd131 {
     border-start-end-radius: 0;
   }
 
-  .kd13 {
+  .kd131 {
     border-end-start-radius: 0;
   }
 
-  .jd13 {
+  .jd131 {
     border-end-end-radius: 0;
   }
 
-  .Jnqb3Ob13 {
+  .Jnqb3Ob131 {
     margin-top: calc(var(--T) * -1);
   }
 
-  .Gnqb3Ob13 {
+  .Gnqb3Ob131 {
     margin-bottom: calc(var(--T) * -1);
   }
 
-  .Inqb3Ob13 {
+  .Inqb3Ob131 {
     margin-inline-start: calc(var(--T) * -1);
   }
 
-  .Hnqb3Ob13 {
+  .Hnqb3Ob131 {
     margin-inline-end: calc(var(--T) * -1);
   }
 
-  .TjCFGYc13 {
+  .TjCFGYc131 {
     padding-top: var(--T);
   }
 
-  .Qh13 {
+  .Qh131 {
     padding-bottom: 24px;
   }
 
-  .Sh13 {
+  .Sh131 {
     padding-inline-start: 24px;
   }
 
-  .Rh13 {
+  .Rh131 {
     padding-inline-end: 24px;
   }
 
-  .-T_-Th13 {
+  .-T_-Th131 {
     --T: 24px;
   }
 
-  .uk13 {
+  .uk131 {
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .-_6BNtrc-c13 {
+  .-_6BNtrc-c131 {
     --fs: pow(1.125, 0);
   }
 
-  .vx13 {
+  .vx131 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .xb13 {
+  .xb131 {
     font-weight: 400;
   }
 
-  ._xa13 {
+  ._xa131 {
     font-synthesis-weight: none;
   }
 
-  ._Fb13 {
+  ._Fb131 {
     line-height: 1.5;
   }
 
-  .pt13 {
+  .pt131 {
     color: light-dark(#292929, #dbdbdb);
   }
 
-  .JC13 {
+  .JC131 {
     margin-top: 1rem;
   }
 }
 
 @layer _.b {
-  .xX0cczbd13:is(:lang(ja), :lang(ko), :lang(zh)) {
+  .xX0cczbd131:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-weight: 700;
   }
 
-  ._xX0cczba13:is(:lang(ja), :lang(ko), :lang(zh)) {
+  ._xX0cczba131:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-synthesis-weight: none;
   }
 
-  ._FnuYUweb13:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb131:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 
-  .ucJ9TBTb13:lang(ar) {
+  .ucJ9TBTb131:lang(ar) {
     font-family: adobe-clean-arabic, myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._FnuYUwec13:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUwec131:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.7;
   }
 }
 
 @layer _.c {
-  .xfe13:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  .xfe131:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-weight: 800;
   }
 
-  ._xfa13:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._xfa131:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-synthesis-weight: none;
   }
 
-  .ud3Euai13:lang(he) {
+  .ud3Euai131:lang(he) {
     font-family: adobe-clean-hebrew, myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .xfX0cczbd13:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  .xfX0cczbd131:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-weight: 700;
   }
 
-  ._xfX0cczba13:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._xfX0cczba131:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-synthesis-weight: none;
   }
 
-  .uea13:lang(ja) {
+  .uea131:lang(ja) {
     font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
   }
 }
 
 @layer _.e {
-  .ugb13:lang(ko) {
+  .ugb131:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd13:lang(zh) {
+  .uhd131:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje13:lang(zh-hant) {
+  .uje131:lang(zh-hant) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.h {
-  .u2NhKxcl13:lang(zh-HK) {
+  .u2NhKxcl131:lang(zh-HK) {
     font-family: adobe-clean-han-hong-kong, source-han-hong-kong, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.i {
-  .uic13:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .uic131:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
   }
 }

package/dist/private/ContextualHelp.css.map

@@ -1 +1 @@
-{"mappings":"AC8BoB;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} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement} from 'react-aria-components/Popover';\n// @ts-ignore\nimport {Popover, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with { type: 'macro' };\nimport {TextContext} from 'react-aria-components/Text';\nimport {useId} from 'react-aria/useId';\nimport {useLabels} from 'react-aria/private/utils/useLabels';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\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"}
+{"mappings":"ACoCoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoBV;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsCc;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA1DJ;EAAA;;;;EAAA;;;;EAAA;;;;EA0DI;;;;EAAA;;;;;AA1DJ;EAAA;;;;EAAA;;;;EAkDI;;;;;AAlDJ;EAAA;;;;EAAA;;;;EAkDI;;;;;AAlDJ;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 {\n  ContentContext,\n  FooterContext,\n  HeadingContext,\n  TextContext as SpectrumTextContext\n} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement} from 'react-aria-components/Popover';\n// @ts-ignore\nimport {Popover, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with {type: 'macro'};\nimport {TextContext} from 'react-aria-components/Text';\nimport {useId} from 'react-aria/useId';\nimport {useLabels} from 'react-aria/private/utils/useLabels';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\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   */\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 padding=\"none\" hideArrow aria-labelledby={titleId} {...popoverProps}>\n      <div className={wrappingDiv}>\n        <div\n          className={mergeStyles(\n            dialogInner,\n            style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24})\n          )}>\n          <Provider\n            values={[\n              [\n                TextContext,\n                {\n                  slots: {\n                    [DEFAULT_SLOT]: {}\n                  }\n                }\n              ],\n              // Make sure to clear context from above Menu\n              [SpectrumTextContext, null],\n              [\n                HeadingContext,\n                {\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              ],\n              [\n                ContentContext,\n                {\n                  styles: style({\n                    font: 'body-sm'\n                  })\n                }\n              ],\n              [\n                FooterContext,\n                {\n                  styles: style({\n                    font: 'body-sm',\n                    marginTop: 16\n                  })\n                }\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\n  extends\n    Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,\n    Pick<\n      PopoverDialogProps,\n      'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'\n    >,\n    ContextualHelpStyleProps,\n    StyleProps,\n    DOMProps,\n    AriaLabelingProps {\n  /**\n   * The placement of the popover with respect to the action button.\n   *\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 =\n  createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(\n    null\n  );\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a\n * total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(\n  props: ContextualHelpProps,\n  ref: FocusableRef<HTMLButtonElement>\n) {\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']\n    ? labelProps['aria-label'] + ' ' + label\n    : label;\n\n  let buttonProps = filterDOMProps(props, {labelable: true});\n\n  return (\n    <DialogTrigger isOpen={isOpen} defaultOpen={defaultOpen} 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/private/ContextualHelp.mjs

@@ -42,8 +42,8 @@ function $parcel$interopDefault(a) {
 
 
 
-const $8e176595bc49ca3f$var$wrappingDiv = " NOBje7c13 ZOBje7c13 Th13 Qh13 Sh13 Rh13 _oa13 Fb13";
-const $8e176595bc49ca3f$var$headingStyles = " uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-e13 vx13 xe13 _xa13 xX0cczbd13 _xX0cczba13 xfe13 _xfa13 xfX0cczbd13 _xfX0cczba13 _Fd13 _FnuYUweb13 po13 Jy13 Gv13 Iy13 Hy13";
+const $8e176595bc49ca3f$var$wrappingDiv = " NOBje7c131 ZOBje7c131 Th131 Qh131 Sh131 Rh131 _oa131 Fb131";
+const $8e176595bc49ca3f$var$headingStyles = " uk131 ucJ9TBTb131 ud3Euai131 uea131 ugb131 uhd131 uje131 u2NhKxcl131 uic131 -_6BNtrc-e131 vx131 xe131 _xa131 xX0cczbd131 _xX0cczba131 xfe131 _xfa131 xfX0cczbd131 _xfX0cczba131 _Fd131 _FnuYUweb131 po131 Jy131 Gv131 Iy131 Hy131";
 function $8e176595bc49ca3f$export$218201d297fb4e0d(props) {
     let { children: children, ...popoverProps } = props;
     let titleId = (0, $bcd4U$useId)();
@@ -55,7 +55,7 @@ function $8e176595bc49ca3f$export$218201d297fb4e0d(props) {
         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), " od13 nd13 kd13 jd13 Jnqb3Ob13 Gnqb3Ob13 Inqb3Ob13 Hnqb3Ob13 TjCFGYc13 Qh13 Sh13 Rh13 -T_-Th13"),
+                className: (0, $feb886035e0d4633$export$e618dc39ac9ad607)((0, $9bbc115952dac5a6$export$6af31f836f9aa6f2), " od131 nd131 kd131 jd131 Jnqb3Ob131 Gnqb3Ob131 Inqb3Ob131 Hnqb3Ob131 TjCFGYc131 Qh131 Sh131 Rh131 -T_-Th131"),
                 children: /*#__PURE__*/ (0, $bcd4U$jsx)((0, $bcd4U$Provider), {
                     values: [
                         [
@@ -93,13 +93,13 @@ function $8e176595bc49ca3f$export$218201d297fb4e0d(props) {
                         [
                             (0, $8e847109a6ab556d$export$1cbdd774077931b4),
                             {
-                                styles: " uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-c13 vx13 xb13 _xa13 _Fb13 _FnuYUwec13 pt13"
+                                styles: " uk131 ucJ9TBTb131 ud3Euai131 uea131 ugb131 uhd131 uje131 u2NhKxcl131 uic131 -_6BNtrc-c131 vx131 xb131 _xa131 _Fb131 _FnuYUwec131 pt131"
                             }
                         ],
                         [
                             (0, $8e847109a6ab556d$export$5630640b68817ed6),
                             {
-                                styles: " uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-c13 vx13 xb13 _xa13 _Fb13 _FnuYUwec13 pt13 JC13"
+                                styles: " uk131 ucJ9TBTb131 ud3Euai131 uea131 ugb131 uhd131 uje131 u2NhKxcl131 uic131 -_6BNtrc-c131 vx131 xb131 _xa131 _Fb131 _FnuYUwec131 pt131 JC131"
                             }
                         ]
                     ],

package/dist/private/ContextualHelp.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,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} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement} from 'react-aria-components/Popover';\n// @ts-ignore\nimport {Popover, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with { type: 'macro' };\nimport {TextContext} from 'react-aria-components/Text';\nimport {useId} from 'react-aria/useId';\nimport {useLabels} from 'react-aria/private/utils/useLabels';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\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"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,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;QAAE,SAAQ;QAAO,SAAS;QAAC,mBAAiB;QAAU,GAAG,YAAY;kBAC1E,cAAA,gBAAC;YAAI,WAAW;sBACd,cAAA,gBAAC;gBACC,WAAW,CAAA,GAAA,yCAAU,EACnB,CAAA,GAAA,yCAAU;0BAGZ,cAAA,gBAAC,CAAA,GAAA,eAAO;oBACN,QAAQ;wBACN;4BACE,CAAA,GAAA,kBAAU;4BACV;gCACE,OAAO;oCACL,CAAC,CAAA,GAAA,mBAAW,EAAE,EAAE,CAAC;gCACnB;4BACF;yBACD;wBACD,6CAA6C;wBAC7C;4BAAC,CAAA,GAAA,yCAAkB;4BAAG;yBAAK;wBAC3B;4BACE,CAAA,GAAA,yCAAa;4BACb;gCACE,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;yBACD;wBACD;4BACE,CAAA,GAAA,yCAAa;4BACb;gCACE,MAAM;4BAGR;yBACD;wBACD;4BACE,CAAA,GAAA,yCAAY;4BACZ;gCACE,MAAM;4BAIR;yBACD;qBACF;8BACA;;;;;AAMb;AAqCO,MAAM,0DACX,CAAA,GAAA,oBAAY,EACV;AAOG,MAAM,0DAAiB,CAAA,GAAA,iBAAS,EAAE,SAAS,eAChD,KAA0B,EAC1B,GAAoC;IAEpC,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,GAC/C,UAAU,CAAC,aAAa,GAAG,MAAM,QACjC;IAEJ,IAAI,cAAc,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IAExD,qBACE,iBAAC,CAAA,GAAA,yCAAY;QAAE,QAAQ;QAAQ,aAAa;QAAa,cAAc;;0BACrE,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 {\n  ContentContext,\n  FooterContext,\n  HeadingContext,\n  TextContext as SpectrumTextContext\n} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement} from 'react-aria-components/Popover';\n// @ts-ignore\nimport {Popover, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with {type: 'macro'};\nimport {TextContext} from 'react-aria-components/Text';\nimport {useId} from 'react-aria/useId';\nimport {useLabels} from 'react-aria/private/utils/useLabels';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\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   */\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 padding=\"none\" hideArrow aria-labelledby={titleId} {...popoverProps}>\n      <div className={wrappingDiv}>\n        <div\n          className={mergeStyles(\n            dialogInner,\n            style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24})\n          )}>\n          <Provider\n            values={[\n              [\n                TextContext,\n                {\n                  slots: {\n                    [DEFAULT_SLOT]: {}\n                  }\n                }\n              ],\n              // Make sure to clear context from above Menu\n              [SpectrumTextContext, null],\n              [\n                HeadingContext,\n                {\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              ],\n              [\n                ContentContext,\n                {\n                  styles: style({\n                    font: 'body-sm'\n                  })\n                }\n              ],\n              [\n                FooterContext,\n                {\n                  styles: style({\n                    font: 'body-sm',\n                    marginTop: 16\n                  })\n                }\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\n  extends\n    Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,\n    Pick<\n      PopoverDialogProps,\n      'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'\n    >,\n    ContextualHelpStyleProps,\n    StyleProps,\n    DOMProps,\n    AriaLabelingProps {\n  /**\n   * The placement of the popover with respect to the action button.\n   *\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 =\n  createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(\n    null\n  );\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a\n * total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(\n  props: ContextualHelpProps,\n  ref: FocusableRef<HTMLButtonElement>\n) {\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']\n    ? labelProps['aria-label'] + ' ' + label\n    : label;\n\n  let buttonProps = filterDOMProps(props, {labelable: true});\n\n  return (\n    <DialogTrigger isOpen={isOpen} defaultOpen={defaultOpen} 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/private/CornerTriangle.cjs

@@ -0,0 +1,76 @@
+require("./CornerTriangle.css");
+var $b79fd8a4d9445463$exports = require("./S2_CornerTriangleSize200.cjs");
+var $20f6293bc7c4caba$exports = require("./S2_CornerTriangleSize100.cjs");
+var $892dd51fa7861ef6$exports = require("./S2_CornerTriangleSize75.cjs");
+var $0730ad898b796d6c$exports = require("./S2_CornerTriangleSize300.cjs");
+var $2GSDA$reactjsxruntime = require("react/jsx-runtime");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "default", () => $411768293e842abb$export$2e2bcd8739ae039);
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+let $411768293e842abb$var$styles = function anonymous(props) {
+    let rules = " ";
+    if (props.size === "S") rules += ' ZydxGIe131';
+    else if (props.size === "XL") rules += ' ZsWXEHc131';
+    else if (props.size === "L") rules += ' Zg131';
+    else if (props.size === "M") rules += ' ZydxGIe131';
+    if (props.size === "S") rules += ' Ff131';
+    else if (props.size === "XL") rules += ' FsWXEHc131';
+    else if (props.size === "L") rules += ' Fg131';
+    else if (props.size === "M") rules += ' Ff131';
+    return rules;
+};
+function $411768293e842abb$export$2e2bcd8739ae039(props) {
+    let { size: size = 'M', ...otherProps } = props;
+    switch(size){
+        case 'M':
+            return /*#__PURE__*/ (0, $2GSDA$reactjsxruntime.jsx)((0, $20f6293bc7c4caba$exports.default), {
+                ...otherProps,
+                className: (otherProps.className || '') + $411768293e842abb$var$styles({
+                    size: size
+                })
+            });
+        case 'L':
+            return /*#__PURE__*/ (0, $2GSDA$reactjsxruntime.jsx)((0, $b79fd8a4d9445463$exports.default), {
+                ...otherProps,
+                className: (otherProps.className || '') + $411768293e842abb$var$styles({
+                    size: size
+                })
+            });
+        case 'XL':
+            return /*#__PURE__*/ (0, $2GSDA$reactjsxruntime.jsx)((0, $0730ad898b796d6c$exports.default), {
+                ...otherProps,
+                className: (otherProps.className || '') + $411768293e842abb$var$styles({
+                    size: size
+                })
+            });
+        case 'S':
+            return /*#__PURE__*/ (0, $2GSDA$reactjsxruntime.jsx)((0, $892dd51fa7861ef6$exports.default), {
+                ...otherProps,
+                className: (otherProps.className || '') + $411768293e842abb$var$styles({
+                    size: size
+                })
+            });
+    }
+}
+
+
+//# sourceMappingURL=CornerTriangle.cjs.map

package/dist/private/CornerTriangle.cjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AASD,IAAI;;;;;;;;;;;;AAmBW,kDACb,KAAgE;IAEhE,IAAI,QAAC,OAAO,KAAK,GAAG,YAAW,GAAG;IAClC,OAAQ;QACN,KAAK;YACH,qBACE,gCAAC,CAAA,GAAA,iCAAe;gBACb,GAAG,UAAU;gBACd,WAAW,AAAC,CAAA,WAAW,SAAS,IAAI,EAAC,IAAK,6BAAO;0BAAC;gBAAI;;QAG5D,KAAK;YACH,qBACE,gCAAC,CAAA,GAAA,iCAAe;gBACb,GAAG,UAAU;gBACd,WAAW,AAAC,CAAA,WAAW,SAAS,IAAI,EAAC,IAAK,6BAAO;0BAAC;gBAAI;;QAG5D,KAAK;YACH,qBACE,gCAAC,CAAA,GAAA,iCAAgB;gBACd,GAAG,UAAU;gBACd,WAAW,AAAC,CAAA,WAAW,SAAS,IAAI,EAAC,IAAK,6BAAO;0BAAC;gBAAI;;QAG5D,KAAK;YACH,qBACE,gCAAC,CAAA,GAAA,iCAAe;gBACb,GAAG,UAAU;gBACd,WAAW,AAAC,CAAA,WAAW,SAAS,IAAI,EAAC,IAAK,6BAAO;0BAAC;gBAAI;;IAG9D;AACF","sources":["packages/@react-spectrum/s2/ui-icons/CornerTriangle.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 CornerTriangle_L from './S2_CornerTriangleSize200.svg';\nimport CornerTriangle_M from './S2_CornerTriangleSize100.svg';\nimport CornerTriangle_S from './S2_CornerTriangleSize75.svg';\nimport CornerTriangle_XL from './S2_CornerTriangleSize300.svg';\nimport {ReactNode, SVGProps} from 'react';\nimport {style} from '../style' with {type: 'macro'};\n\nlet styles = style({\n  width: {\n    size: {\n      M: 5,\n      L: 6,\n      XL: 7,\n      S: 5\n    }\n  },\n  height: {\n    size: {\n      M: 5,\n      L: 6,\n      XL: 7,\n      S: 5\n    }\n  }\n});\n\nexport default function CornerTriangle(\n  props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL' | 'S'}\n): ReactNode {\n  let {size = 'M', ...otherProps} = props;\n  switch (size) {\n    case 'M':\n      return (\n        <CornerTriangle_M\n          {...otherProps}\n          className={(otherProps.className || '') + styles({size})}\n        />\n      );\n    case 'L':\n      return (\n        <CornerTriangle_L\n          {...otherProps}\n          className={(otherProps.className || '') + styles({size})}\n        />\n      );\n    case 'XL':\n      return (\n        <CornerTriangle_XL\n          {...otherProps}\n          className={(otherProps.className || '') + styles({size})}\n        />\n      );\n    case 'S':\n      return (\n        <CornerTriangle_S\n          {...otherProps}\n          className={(otherProps.className || '') + styles({size})}\n        />\n      );\n  }\n}\n"],"names":[],"version":3,"file":"CornerTriangle.cjs.map"}

package/dist/private/CornerTriangle.css

@@ -0,0 +1,26 @@
+@layer _.a {
+  .Zg131 {
+    width: calc(.375rem * var(--s2-scale));
+  }
+
+  .ZsWXEHc131 {
+    width: calc(.4375rem * var(--s2-scale));
+  }
+
+  .ZydxGIe131 {
+    width: calc(.3125rem * var(--s2-scale));
+  }
+
+  .Fg131 {
+    height: calc(.375rem * var(--s2-scale));
+  }
+
+  .FsWXEHc131 {
+    height: calc(.4375rem * var(--s2-scale));
+  }
+
+  .Ff131 {
+    height: calc(.3125rem * var(--s2-scale));
+  }
+}
+/*# sourceMappingURL=CornerTriangle.css.map */

package/dist/private/CornerTriangle.css.map

@@ -0,0 +1 @@
+{"mappings":"AAmBa;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA","sources":["packages/@react-spectrum/s2/ui-icons/CornerTriangle.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 CornerTriangle_L from './S2_CornerTriangleSize200.svg';\nimport CornerTriangle_M from './S2_CornerTriangleSize100.svg';\nimport CornerTriangle_S from './S2_CornerTriangleSize75.svg';\nimport CornerTriangle_XL from './S2_CornerTriangleSize300.svg';\nimport {ReactNode, SVGProps} from 'react';\nimport {style} from '../style' with {type: 'macro'};\n\nlet styles = style({\n  width: {\n    size: {\n      M: 5,\n      L: 6,\n      XL: 7,\n      S: 5\n    }\n  },\n  height: {\n    size: {\n      M: 5,\n      L: 6,\n      XL: 7,\n      S: 5\n    }\n  }\n});\n\nexport default function CornerTriangle(\n  props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL' | 'S'}\n): ReactNode {\n  let {size = 'M', ...otherProps} = props;\n  switch (size) {\n    case 'M':\n      return (\n        <CornerTriangle_M\n          {...otherProps}\n          className={(otherProps.className || '') + styles({size})}\n        />\n      );\n    case 'L':\n      return (\n        <CornerTriangle_L\n          {...otherProps}\n          className={(otherProps.className || '') + styles({size})}\n        />\n      );\n    case 'XL':\n      return (\n        <CornerTriangle_XL\n          {...otherProps}\n          className={(otherProps.className || '') + styles({size})}\n        />\n      );\n    case 'S':\n      return (\n        <CornerTriangle_S\n          {...otherProps}\n          className={(otherProps.className || '') + styles({size})}\n        />\n      );\n  }\n}\n"],"names":[],"version":3,"file":"CornerTriangle.css.map"}

package/dist/private/CornerTriangle.mjs

@@ -0,0 +1,71 @@
+import "./CornerTriangle.css";
+import $b02ba09d8ed42b76$export$2e2bcd8739ae039 from "./S2_CornerTriangleSize200.mjs";
+import $b7774514db903160$export$2e2bcd8739ae039 from "./S2_CornerTriangleSize100.mjs";
+import $96a511a77483b03c$export$2e2bcd8739ae039 from "./S2_CornerTriangleSize75.mjs";
+import $ea5d4480fb979063$export$2e2bcd8739ae039 from "./S2_CornerTriangleSize300.mjs";
+import {jsx as $c6CgI$jsx} from "react/jsx-runtime";
+
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+let $dc67c4e34e45a62a$var$styles = function anonymous(props) {
+    let rules = " ";
+    if (props.size === "S") rules += ' ZydxGIe131';
+    else if (props.size === "XL") rules += ' ZsWXEHc131';
+    else if (props.size === "L") rules += ' Zg131';
+    else if (props.size === "M") rules += ' ZydxGIe131';
+    if (props.size === "S") rules += ' Ff131';
+    else if (props.size === "XL") rules += ' FsWXEHc131';
+    else if (props.size === "L") rules += ' Fg131';
+    else if (props.size === "M") rules += ' Ff131';
+    return rules;
+};
+function $dc67c4e34e45a62a$export$2e2bcd8739ae039(props) {
+    let { size: size = 'M', ...otherProps } = props;
+    switch(size){
+        case 'M':
+            return /*#__PURE__*/ (0, $c6CgI$jsx)((0, $b7774514db903160$export$2e2bcd8739ae039), {
+                ...otherProps,
+                className: (otherProps.className || '') + $dc67c4e34e45a62a$var$styles({
+                    size: size
+                })
+            });
+        case 'L':
+            return /*#__PURE__*/ (0, $c6CgI$jsx)((0, $b02ba09d8ed42b76$export$2e2bcd8739ae039), {
+                ...otherProps,
+                className: (otherProps.className || '') + $dc67c4e34e45a62a$var$styles({
+                    size: size
+                })
+            });
+        case 'XL':
+            return /*#__PURE__*/ (0, $c6CgI$jsx)((0, $ea5d4480fb979063$export$2e2bcd8739ae039), {
+                ...otherProps,
+                className: (otherProps.className || '') + $dc67c4e34e45a62a$var$styles({
+                    size: size
+                })
+            });
+        case 'S':
+            return /*#__PURE__*/ (0, $c6CgI$jsx)((0, $96a511a77483b03c$export$2e2bcd8739ae039), {
+                ...otherProps,
+                className: (otherProps.className || '') + $dc67c4e34e45a62a$var$styles({
+                    size: size
+                })
+            });
+    }
+}
+
+
+export {$dc67c4e34e45a62a$export$2e2bcd8739ae039 as default};
+//# sourceMappingURL=CornerTriangle.mjs.map

package/dist/private/CornerTriangle.mjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AASD,IAAI;;;;;;;;;;;;AAmBW,kDACb,KAAgE;IAEhE,IAAI,QAAC,OAAO,KAAK,GAAG,YAAW,GAAG;IAClC,OAAQ;QACN,KAAK;YACH,qBACE,gBAAC,CAAA,GAAA,wCAAe;gBACb,GAAG,UAAU;gBACd,WAAW,AAAC,CAAA,WAAW,SAAS,IAAI,EAAC,IAAK,6BAAO;0BAAC;gBAAI;;QAG5D,KAAK;YACH,qBACE,gBAAC,CAAA,GAAA,wCAAe;gBACb,GAAG,UAAU;gBACd,WAAW,AAAC,CAAA,WAAW,SAAS,IAAI,EAAC,IAAK,6BAAO;0BAAC;gBAAI;;QAG5D,KAAK;YACH,qBACE,gBAAC,CAAA,GAAA,wCAAgB;gBACd,GAAG,UAAU;gBACd,WAAW,AAAC,CAAA,WAAW,SAAS,IAAI,EAAC,IAAK,6BAAO;0BAAC;gBAAI;;QAG5D,KAAK;YACH,qBACE,gBAAC,CAAA,GAAA,wCAAe;gBACb,GAAG,UAAU;gBACd,WAAW,AAAC,CAAA,WAAW,SAAS,IAAI,EAAC,IAAK,6BAAO;0BAAC;gBAAI;;IAG9D;AACF","sources":["packages/@react-spectrum/s2/ui-icons/CornerTriangle.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 CornerTriangle_L from './S2_CornerTriangleSize200.svg';\nimport CornerTriangle_M from './S2_CornerTriangleSize100.svg';\nimport CornerTriangle_S from './S2_CornerTriangleSize75.svg';\nimport CornerTriangle_XL from './S2_CornerTriangleSize300.svg';\nimport {ReactNode, SVGProps} from 'react';\nimport {style} from '../style' with {type: 'macro'};\n\nlet styles = style({\n  width: {\n    size: {\n      M: 5,\n      L: 6,\n      XL: 7,\n      S: 5\n    }\n  },\n  height: {\n    size: {\n      M: 5,\n      L: 6,\n      XL: 7,\n      S: 5\n    }\n  }\n});\n\nexport default function CornerTriangle(\n  props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL' | 'S'}\n): ReactNode {\n  let {size = 'M', ...otherProps} = props;\n  switch (size) {\n    case 'M':\n      return (\n        <CornerTriangle_M\n          {...otherProps}\n          className={(otherProps.className || '') + styles({size})}\n        />\n      );\n    case 'L':\n      return (\n        <CornerTriangle_L\n          {...otherProps}\n          className={(otherProps.className || '') + styles({size})}\n        />\n      );\n    case 'XL':\n      return (\n        <CornerTriangle_XL\n          {...otherProps}\n          className={(otherProps.className || '') + styles({size})}\n        />\n      );\n    case 'S':\n      return (\n        <CornerTriangle_S\n          {...otherProps}\n          className={(otherProps.className || '') + styles({size})}\n        />\n      );\n  }\n}\n"],"names":[],"version":3,"file":"CornerTriangle.mjs.map"}

package/dist/private/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 += ' Zh13';
-    else if (props.size === "XXXXL") rules += ' Zu13';
-    else if (props.size === "XXXL") rules += ' Zk13';
-    else if (props.size === "XXL") rules += ' Zj13';
-    else if (props.size === "XL") rules += ' Zj13';
-    else if (props.size === "L") rules += ' Zi13';
-    else if (props.size === "M") rules += ' Zh13';
-    if (props.size === "S") rules += ' Fi13';
-    else if (props.size === "XXXXL") rules += ' Ft13';
-    else if (props.size === "XXXL") rules += ' Fl13';
-    else if (props.size === "XXL") rules += ' Fk13';
-    else if (props.size === "XL") rules += ' Fk13';
-    else if (props.size === "L") rules += ' Fj13';
-    else if (props.size === "M") rules += ' Fi13';
+    if (props.size === "S") rules += ' Zh131';
+    else if (props.size === "XXXXL") rules += ' Zu131';
+    else if (props.size === "XXXL") rules += ' Zk131';
+    else if (props.size === "XXL") rules += ' Zj131';
+    else if (props.size === "XL") rules += ' Zj131';
+    else if (props.size === "L") rules += ' Zi131';
+    else if (props.size === "M") rules += ' Zh131';
+    if (props.size === "S") rules += ' Fi131';
+    else if (props.size === "XXXXL") rules += ' Ft131';
+    else if (props.size === "XXXL") rules += ' Fl131';
+    else if (props.size === "XXL") rules += ' Fk131';
+    else if (props.size === "XL") rules += ' Fk131';
+    else if (props.size === "L") rules += ' Fj131';
+    else if (props.size === "M") rules += ' Fi131';
     return rules;
 };
 function $89dd175101ffc43a$export$2e2bcd8739ae039(props) {