@react-spectrum/s2 3.0.0-nightly-426bff12a-241106 → 3.0.0-nightly-09ccc53e7-241107

package/dist/Content.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Content.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 {ContextValue, Keyboard as KeyboardAria, Header as RACHeader, Heading as RACHeading, TextContext as RACTextContext, SlotProps, Text as TextAria} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton, useSkeletonText} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ContentProps extends UnsafeStyles, SlotProps {\n  children?: ReactNode,\n  styles?: StyleString,\n  isHidden?: boolean\n}\n\ninterface HeadingProps extends ContentProps {\n  level?: number\n}\n\nexport const HeadingContext = createContext<ContextValue<HeadingProps, DOMRefValue<HTMLHeadingElement>>>(null);\n\n// Wrapper around RAC Heading to unmount when hidden.\nfunction Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, HeadingContext);\n  let domRef = useDOMRef(ref);\n  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n  if (isHidden) {\n    return null;\n  }\n\n  return (\n    <RACHeading\n      {...otherProps}\n      ref={domRef}\n      className={UNSAFE_className + styles}\n      style={UNSAFE_style}\n      slot={slot || undefined} />\n  );\n}\n\nconst _Heading = forwardRef(Heading);\nexport {_Heading as Heading};\n\nexport const HeaderContext = createContext<ContextValue<ContentProps, DOMRefValue<HTMLElement>>>(null);\n\nfunction Header(props: ContentProps, ref: DOMRef) {\n  [props, ref] = useSpectrumContextProps(props, ref, HeaderContext);\n  let domRef = useDOMRef(ref);\n  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n  if (isHidden) {\n    return null;\n  }\n\n  return (\n    <RACHeader\n      {...otherProps}\n      ref={domRef}\n      className={UNSAFE_className + styles}\n      style={UNSAFE_style}\n      slot={slot || undefined} />\n  );\n}\n\nconst _Header = forwardRef(Header);\nexport {_Header as Header};\n\nexport const ContentContext = createContext<ContextValue<ContentProps, DOMRefValue<HTMLDivElement>>>(null);\n\nfunction Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ContentContext);\n  let domRef = useDOMRef(ref);\n  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n  if (isHidden) {\n    return null;\n  }\n  return (\n    <div\n      {...otherProps}\n      ref={domRef}\n      className={UNSAFE_className + styles}\n      style={UNSAFE_style}\n      slot={slot || undefined} />\n  );\n}\n\nconst _Content = forwardRef(Content);\nexport {_Content as Content};\n\nexport const TextContext = createContext<ContextValue<ContentProps, DOMRefValue>>(null);\n\nfunction Text(props: ContentProps, ref: DOMRef) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextContext);\n  let domRef = useDOMRef(ref);\n  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, children, ...otherProps} = props;\n  let racContext = useContext(RACTextContext);\n  let isSkeleton = useIsSkeleton();\n  [children, UNSAFE_style] = useSkeletonText(children, UNSAFE_style);\n  if (isHidden) {\n    return null;\n  }\n\n  slot = slot && racContext && 'slots' in racContext && !racContext.slots?.[slot] ? undefined : slot;\n  return (\n    <TextAria\n      {...otherProps}\n      ref={domRef}\n      // @ts-ignore - compatibility with React < 19\n      inert={isSkeleton ? 'true' : undefined}\n      className={UNSAFE_className + styles}\n      style={UNSAFE_style}\n      slot={slot || undefined}>\n      {children}\n    </TextAria>\n  );\n}\n\nconst _Text = forwardRef(Text);\nexport {_Text as Text};\n\nexport const KeyboardContext = createContext<ContextValue<ContentProps, DOMRefValue>>({});\n\nfunction Keyboard(props: ContentProps, ref: DOMRef) {\n  [props, ref] = useSpectrumContextProps(props, ref, KeyboardContext);\n  let domRef = useDOMRef(ref);\n  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n  if (isHidden) {\n    return null;\n  }\n  return (\n    <KeyboardAria\n      {...otherProps}\n      ref={domRef}\n      className={UNSAFE_className + styles}\n      style={UNSAFE_style}\n      slot={slot || undefined} />\n  );\n}\n\nconst _Keyboard = forwardRef(Keyboard);\nexport {_Keyboard as Keyboard};\n\nexport const FooterContext = createContext<ContextValue<ContentProps, DOMRefValue>>({});\n\nfunction Footer(props: ContentProps, ref: DOMRef) {\n  [props, ref] = useSpectrumContextProps(props, ref, FooterContext);\n  let domRef = useDOMRef(ref);\n  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n  if (isHidden) {\n    return null;\n  }\n  return (\n    <footer\n      {...otherProps}\n      ref={domRef}\n      className={UNSAFE_className + styles}\n      style={UNSAFE_style}\n      slot={slot || undefined} />\n  );\n}\n\nconst _Footer = forwardRef(Footer);\nexport {_Footer as Footer};\n"],"names":[],"version":3,"file":"Content.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Content.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 {ContextValue, Keyboard as KeyboardAria, Header as RACHeader, Heading as RACHeading, TextContext as RACTextContext, SlotProps, Text as TextAria} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton, useSkeletonText} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ContentProps extends UnsafeStyles, SlotProps {\n  children?: ReactNode,\n  styles?: StyleString,\n  isHidden?: boolean\n}\n\ninterface HeadingProps extends ContentProps {\n  level?: number\n}\n\nexport const HeadingContext = createContext<ContextValue<HeadingProps, DOMRefValue<HTMLHeadingElement>>>(null);\n\n// Wrapper around RAC Heading to unmount when hidden.\nfunction Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, HeadingContext);\n  let domRef = useDOMRef(ref);\n  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n  if (isHidden) {\n    return null;\n  }\n\n  return (\n    <RACHeading\n      {...otherProps}\n      ref={domRef}\n      className={UNSAFE_className + styles}\n      style={UNSAFE_style}\n      slot={slot || undefined} />\n  );\n}\n\nconst _Heading = forwardRef(Heading);\nexport {_Heading as Heading};\n\nexport const HeaderContext = createContext<ContextValue<ContentProps, DOMRefValue<HTMLElement>>>(null);\n\nfunction Header(props: ContentProps, ref: DOMRef) {\n  [props, ref] = useSpectrumContextProps(props, ref, HeaderContext);\n  let domRef = useDOMRef(ref);\n  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n  if (isHidden) {\n    return null;\n  }\n\n  return (\n    <RACHeader\n      {...otherProps}\n      ref={domRef}\n      className={UNSAFE_className + styles}\n      style={UNSAFE_style}\n      slot={slot || undefined} />\n  );\n}\n\nconst _Header = forwardRef(Header);\nexport {_Header as Header};\n\nexport const ContentContext = createContext<ContextValue<ContentProps, DOMRefValue<HTMLDivElement>>>(null);\n\nfunction Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ContentContext);\n  let domRef = useDOMRef(ref);\n  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n  if (isHidden) {\n    return null;\n  }\n  return (\n    <div\n      {...otherProps}\n      ref={domRef}\n      className={UNSAFE_className + styles}\n      style={UNSAFE_style}\n      slot={slot || undefined} />\n  );\n}\n\nconst _Content = forwardRef(Content);\nexport {_Content as Content};\n\nexport const TextContext = createContext<ContextValue<ContentProps, DOMRefValue>>(null);\n\nfunction Text(props: ContentProps, ref: DOMRef) {\n  [props, ref] = useSpectrumContextProps(props, ref, TextContext);\n  let domRef = useDOMRef(ref);\n  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, children, ...otherProps} = props;\n  let racContext = useContext(RACTextContext);\n  let isSkeleton = useIsSkeleton();\n  [children, UNSAFE_style] = useSkeletonText(children, UNSAFE_style);\n  if (isHidden) {\n    return null;\n  }\n\n  slot = slot && racContext && 'slots' in racContext && !racContext.slots?.[slot] ? undefined : slot;\n  return (\n    <TextAria\n      {...otherProps}\n      ref={domRef}\n      // @ts-ignore - compatibility with React < 19\n      inert={isSkeleton ? 'true' : undefined}\n      className={UNSAFE_className + styles}\n      style={UNSAFE_style}\n      slot={slot || undefined}\n      data-rsp-slot=\"text\">\n      {children}\n    </TextAria>\n  );\n}\n\nconst _Text = forwardRef(Text);\nexport {_Text as Text};\n\nexport const KeyboardContext = createContext<ContextValue<ContentProps, DOMRefValue>>({});\n\nfunction Keyboard(props: ContentProps, ref: DOMRef) {\n  [props, ref] = useSpectrumContextProps(props, ref, KeyboardContext);\n  let domRef = useDOMRef(ref);\n  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n  if (isHidden) {\n    return null;\n  }\n  return (\n    <KeyboardAria\n      {...otherProps}\n      ref={domRef}\n      className={UNSAFE_className + styles}\n      style={UNSAFE_style}\n      slot={slot || undefined} />\n  );\n}\n\nconst _Keyboard = forwardRef(Keyboard);\nexport {_Keyboard as Keyboard};\n\nexport const FooterContext = createContext<ContextValue<ContentProps, DOMRefValue>>({});\n\nfunction Footer(props: ContentProps, ref: DOMRef) {\n  [props, ref] = useSpectrumContextProps(props, ref, FooterContext);\n  let domRef = useDOMRef(ref);\n  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n  if (isHidden) {\n    return null;\n  }\n  return (\n    <footer\n      {...otherProps}\n      ref={domRef}\n      className={UNSAFE_className + styles}\n      style={UNSAFE_style}\n      slot={slot || undefined} />\n  );\n}\n\nconst _Footer = forwardRef(Footer);\nexport {_Footer as Footer};\n"],"names":[],"version":3,"file":"Content.mjs.map"}

package/dist/ContextualHelp.cjs

@@ -82,7 +82,7 @@ function $bab829476f85a155$var$ContextualHelp(props, ref) {
                 hideArrow: true,
                 UNSAFE_className: $bab829476f85a155$var$popover,
                 children: /*#__PURE__*/ (0, $44GE8$reactjsxruntime.jsx)((0, $44GE8$reactariacomponents.Dialog), {
-                    className: (0, $308b180f49d82d28$exports.mergeStyles)((0, $0f4636c7093b9233$exports.dialogInner), " . _va _wa _xa _ya"),
+                    className: (0, $308b180f49d82d28$exports.mergeStyles)((0, $0f4636c7093b9233$exports.dialogInner), " . _va _wa _xa _ya AP BP yP zP Eh Fh Ch Dh"),
                     children: /*#__PURE__*/ (0, $44GE8$reactjsxruntime.jsx)((0, $44GE8$reactariacomponents.Provider), {
                         values: [
                             [

package/dist/ContextualHelp.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAM;AAOC,MAAM,0DAAwB,CAAA,GAAA,0BAAY,EAA2E;AAE5H,SAAS,qCAAe,KAA0B,EAAE,GAAoC;IACtF,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,eACR,WAAW,QACX,6EAA6E;IAC7E,OAAO,mBACP,WAAW,UACX,MAAM,UACN,SAAS,iBACT,YAAY,aACZ,YAAY,4BACZ,UAAU,oBACV,gBAAgB,gBAChB,YAAY,UACZ,MAAM,WACN,UAAU,QACX,GAAG;IAEJ,4EAA4E;IAC5E,2EAA2E;IAC3E,8BAA8B;IAC9B,IAAI,aAAa,CAAA,GAAA,+BAAQ,EAAE;IAC3B,IAAI,QAAQ,gBAAgB,MAAM,CAAC,CAAC,eAAe,EAAE,QAAQ,CAAC;IAC9D,UAAU,CAAC,aAAa,GAAG,UAAU,CAAC,aAAa,GAAG,UAAU,CAAC,aAAa,GAAG,MAAM,QAAQ;IAE/F,IAAI,cAAc,CAAA,GAAA,oCAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IAExD,qBACE,iCAAC,CAAA,GAAA,uCAAY;QACX,QAAQ;QACR,aAAa;QACb,cAAc;;0BACd,gCAAC,CAAA,GAAA,sCAAW;gBACV,MAAM;gBACN,KAAK;gBACL,MAAM;gBACL,GAAG,CAAA,GAAA,gCAAS,EAAE,aAAa,WAAW;gBACvC,cAAc;gBACd,kBAAkB;gBAClB,QAAQ;gBACR,OAAO;0BACN,YAAY,uBAAS,gCAAC,CAAA,GAAA,iCAAO,uBAAO,gCAAC,CAAA,GAAA,iCAAO;;0BAE/C,gCAAC,CAAA,GAAA,iCAAM;gBACL,WAAW;gBACX,YAAY;gBACZ,qDAAqD;gBACrD,QAAQ;gBACR,aAAa;gBACb,SAAS;gBACT,kBAAkB;0BAClB,cAAA,gCAAC,CAAA,GAAA,iCAAQ;oBAAE,WAAW,CAAA,GAAA,qCAAU,EAAE,CAAA,GAAA,qCAAU;8BAC1C,cAAA,gCAAC,CAAA,GAAA,mCAAO;wBACN,QAAQ;4BACN;gCAAC,CAAA,GAAA,sCAAU;gCAAG;oCACZ,OAAO;wCACL,CAAC,CAAA,GAAA,uCAAW,EAAE,EAAE,CAAC;oCACnB;gCACF;6BAAE;4BACF;gCAAC,CAAA,GAAA,wCAAa;gCAAG;oCAAC,MAAM;gCAItB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,wCAAa;gCAAG;oCAAC,MAAM;gCAEtB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,uCAAY;gCAAG;oCAAC,MAAM;gCAGrB;6BAAE;yBACL;kCACA;;;;;;AAMb;AAEA;;CAEC,GACD,IAAI,0DAAkB,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {ContentContext, FooterContext, HeadingContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {Popover, PopoverProps} from './Popover';\nimport {style, size as styleSize} 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' | 'shouldFlip' | 'offset' | 'crossOffset' | 'placement'>,\n  Pick<PopoverProps, 'containerPadding'>,\n  ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {\n  /** Contents of the Contextual Help popover. */\n  children?: ReactNode,\n  /**\n   * The size of the ActionButton.\n   *\n   * @default 'XS'\n   */\n  size?: 'XS' | 'S'\n}\n\nconst popover = style({\n  fontFamily: 'sans',\n  minWidth: '[218px]',\n  width: '[218px]',\n  padding: 24\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<ContextualHelpProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\nfunction ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n  let {\n    children,\n    defaultOpen,\n    // containerPadding = 24, // See popover() above. Issue noted in Popover.tsx.\n    size = 'XS',\n    crossOffset,\n    isOpen,\n    offset = 8,\n    onOpenChange,\n    placement = 'bottom start',\n    shouldFlip,\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    variant = 'help'\n  } = props;\n\n  // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n  // manually set the aria-label after useLabels() to keep the order of label\n  // then ContextualHelp variant\n  let labelProps = useLabels(props);\n  let label = stringFormatter.format(`contextualhelp.${variant}`);\n  labelProps['aria-label'] = labelProps['aria-label'] ? labelProps['aria-label'] + ' ' + label : label;\n\n  let buttonProps = filterDOMProps(props, {labelable: true});\n\n  return (\n    <DialogTrigger\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}>\n      <ActionButton\n        slot={null}\n        ref={ref}\n        size={size}\n        {...mergeProps(buttonProps, labelProps)}\n        UNSAFE_style={UNSAFE_style}\n        UNSAFE_className={UNSAFE_className}\n        styles={styles}\n        isQuiet>\n        {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n      </ActionButton>\n      <Popover\n        placement={placement}\n        shouldFlip={shouldFlip}\n        // not working => containerPadding={containerPadding}\n        offset={offset}\n        crossOffset={crossOffset}\n        hideArrow\n        UNSAFE_className={popover}>\n        <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none'}))}>\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: styleSize(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      </Popover>\n    </DialogTrigger>\n  );\n}\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nlet _ContextualHelp = forwardRef(ContextualHelp);\nexport {_ContextualHelp as ContextualHelp};\n"],"names":[],"version":3,"file":"ContextualHelp.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAM;AAOC,MAAM,0DAAwB,CAAA,GAAA,0BAAY,EAA2E;AAE5H,SAAS,qCAAe,KAA0B,EAAE,GAAoC;IACtF,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,eACR,WAAW,QACX,6EAA6E;IAC7E,OAAO,mBACP,WAAW,UACX,MAAM,UACN,SAAS,iBACT,YAAY,aACZ,YAAY,4BACZ,UAAU,oBACV,gBAAgB,gBAChB,YAAY,UACZ,MAAM,WACN,UAAU,QACX,GAAG;IAEJ,4EAA4E;IAC5E,2EAA2E;IAC3E,8BAA8B;IAC9B,IAAI,aAAa,CAAA,GAAA,+BAAQ,EAAE;IAC3B,IAAI,QAAQ,gBAAgB,MAAM,CAAC,CAAC,eAAe,EAAE,QAAQ,CAAC;IAC9D,UAAU,CAAC,aAAa,GAAG,UAAU,CAAC,aAAa,GAAG,UAAU,CAAC,aAAa,GAAG,MAAM,QAAQ;IAE/F,IAAI,cAAc,CAAA,GAAA,oCAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IAExD,qBACE,iCAAC,CAAA,GAAA,uCAAY;QACX,QAAQ;QACR,aAAa;QACb,cAAc;;0BACd,gCAAC,CAAA,GAAA,sCAAW;gBACV,MAAM;gBACN,KAAK;gBACL,MAAM;gBACL,GAAG,CAAA,GAAA,gCAAS,EAAE,aAAa,WAAW;gBACvC,cAAc;gBACd,kBAAkB;gBAClB,QAAQ;gBACR,OAAO;0BACN,YAAY,uBAAS,gCAAC,CAAA,GAAA,iCAAO,uBAAO,gCAAC,CAAA,GAAA,iCAAO;;0BAE/C,gCAAC,CAAA,GAAA,iCAAM;gBACL,WAAW;gBACX,YAAY;gBACZ,qDAAqD;gBACrD,QAAQ;gBACR,aAAa;gBACb,SAAS;gBACT,kBAAkB;0BAClB,cAAA,gCAAC,CAAA,GAAA,iCAAQ;oBAAE,WAAW,CAAA,GAAA,qCAAU,EAAE,CAAA,GAAA,qCAAU;8BAC1C,cAAA,gCAAC,CAAA,GAAA,mCAAO;wBACN,QAAQ;4BACN;gCAAC,CAAA,GAAA,sCAAU;gCAAG;oCACZ,OAAO;wCACL,CAAC,CAAA,GAAA,uCAAW,EAAE,EAAE,CAAC;oCACnB;gCACF;6BAAE;4BACF;gCAAC,CAAA,GAAA,wCAAa;gCAAG;oCAAC,MAAM;gCAItB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,wCAAa;gCAAG;oCAAC,MAAM;gCAEtB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,uCAAY;gCAAG;oCAAC,MAAM;gCAGrB;6BAAE;yBACL;kCACA;;;;;;AAMb;AAEA;;CAEC,GACD,IAAI,0DAAkB,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {ContentContext, FooterContext, HeadingContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {Popover, PopoverProps} from './Popover';\nimport {style, size as styleSize} 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' | 'shouldFlip' | 'offset' | 'crossOffset' | 'placement'>,\n  Pick<PopoverProps, 'containerPadding'>,\n  ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {\n  /** Contents of the Contextual Help popover. */\n  children?: ReactNode,\n  /**\n   * The size of the ActionButton.\n   *\n   * @default 'XS'\n   */\n  size?: 'XS' | 'S'\n}\n\nconst popover = style({\n  fontFamily: 'sans',\n  minWidth: '[218px]',\n  width: '[218px]',\n  padding: 24\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<ContextualHelpProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\nfunction ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n  let {\n    children,\n    defaultOpen,\n    // containerPadding = 24, // See popover() above. Issue noted in Popover.tsx.\n    size = 'XS',\n    crossOffset,\n    isOpen,\n    offset = 8,\n    onOpenChange,\n    placement = 'bottom start',\n    shouldFlip,\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    variant = 'help'\n  } = props;\n\n  // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n  // manually set the aria-label after useLabels() to keep the order of label\n  // then ContextualHelp variant\n  let labelProps = useLabels(props);\n  let label = stringFormatter.format(`contextualhelp.${variant}`);\n  labelProps['aria-label'] = labelProps['aria-label'] ? labelProps['aria-label'] + ' ' + label : label;\n\n  let buttonProps = filterDOMProps(props, {labelable: true});\n\n  return (\n    <DialogTrigger\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}>\n      <ActionButton\n        slot={null}\n        ref={ref}\n        size={size}\n        {...mergeProps(buttonProps, labelProps)}\n        UNSAFE_style={UNSAFE_style}\n        UNSAFE_className={UNSAFE_className}\n        styles={styles}\n        isQuiet>\n        {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n      </ActionButton>\n      <Popover\n        placement={placement}\n        shouldFlip={shouldFlip}\n        // not working => containerPadding={containerPadding}\n        offset={offset}\n        crossOffset={crossOffset}\n        hideArrow\n        UNSAFE_className={popover}>\n        <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: -24, padding: 24}))}>\n          <Provider\n            values={[\n              [TextContext, {\n                slots: {\n                  [DEFAULT_SLOT]: {}\n                }\n              }],\n              [HeadingContext, {styles: style({\n                font: 'heading-xs',\n                margin: 0,\n                marginBottom: styleSize(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      </Popover>\n    </DialogTrigger>\n  );\n}\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nlet _ContextualHelp = forwardRef(ContextualHelp);\nexport {_ContextualHelp as ContextualHelp};\n"],"names":[],"version":3,"file":"ContextualHelp.cjs.map"}

package/dist/ContextualHelp.css

@@ -7,22 +7,6 @@
     width: 218px;
   }
 
-  .Eh {
-    padding-top: 1.5rem;
-  }
-
-  .Fh {
-    padding-bottom: 1.5rem;
-  }
-
-  .Ch {
-    padding-inline-start: 1.5rem;
-  }
-
-  .Dh {
-    padding-inline-end: 1.5rem;
-  }
-
   ._va {
     border-start-start-radius: 0;
   }
@@ -39,6 +23,38 @@
     border-end-end-radius: 0;
   }
 
+  .AP {
+    margin-top: -1.5rem;
+  }
+
+  .BP {
+    margin-bottom: -1.5rem;
+  }
+
+  .yP {
+    margin-inline-start: -1.5rem;
+  }
+
+  .zP {
+    margin-inline-end: -1.5rem;
+  }
+
+  .Eh {
+    padding-top: 1.5rem;
+  }
+
+  .Fh {
+    padding-bottom: 1.5rem;
+  }
+
+  .Ch {
+    padding-inline-start: 1.5rem;
+  }
+
+  .Dh {
+    padding-inline-end: 1.5rem;
+  }
+
   ._di {
     font-size: 1.125rem;
   }

package/dist/ContextualHelp.css.map

@@ -1 +1 @@
-{"mappings":"ACyCgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8DuC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQf;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQD;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA9EvB;EAsEwB;;;;;;EAAA;;;;EAQD;;;;EAAA;;;;;AA9EvB;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAsEwB;EAAA;IAAA;;;;IAKA;;;;;;AAAA","sources":["019fb1fcc3c1598d","packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["@import \"3578337ca657fa78\";\n@import \"a023844b8de14349\";\n@import \"3be9de50ea21a4ea\";\n@import \"5266771b1d67e2fb\";\n@import \"ccaa61f08a335ea7\";\n","import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {ContentContext, FooterContext, HeadingContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {Popover, PopoverProps} from './Popover';\nimport {style, size as styleSize} 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' | 'shouldFlip' | 'offset' | 'crossOffset' | 'placement'>,\n  Pick<PopoverProps, 'containerPadding'>,\n  ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {\n  /** Contents of the Contextual Help popover. */\n  children?: ReactNode,\n  /**\n   * The size of the ActionButton.\n   *\n   * @default 'XS'\n   */\n  size?: 'XS' | 'S'\n}\n\nconst popover = style({\n  fontFamily: 'sans',\n  minWidth: '[218px]',\n  width: '[218px]',\n  padding: 24\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<ContextualHelpProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\nfunction ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n  let {\n    children,\n    defaultOpen,\n    // containerPadding = 24, // See popover() above. Issue noted in Popover.tsx.\n    size = 'XS',\n    crossOffset,\n    isOpen,\n    offset = 8,\n    onOpenChange,\n    placement = 'bottom start',\n    shouldFlip,\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    variant = 'help'\n  } = props;\n\n  // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n  // manually set the aria-label after useLabels() to keep the order of label\n  // then ContextualHelp variant\n  let labelProps = useLabels(props);\n  let label = stringFormatter.format(`contextualhelp.${variant}`);\n  labelProps['aria-label'] = labelProps['aria-label'] ? labelProps['aria-label'] + ' ' + label : label;\n\n  let buttonProps = filterDOMProps(props, {labelable: true});\n\n  return (\n    <DialogTrigger\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}>\n      <ActionButton\n        slot={null}\n        ref={ref}\n        size={size}\n        {...mergeProps(buttonProps, labelProps)}\n        UNSAFE_style={UNSAFE_style}\n        UNSAFE_className={UNSAFE_className}\n        styles={styles}\n        isQuiet>\n        {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n      </ActionButton>\n      <Popover\n        placement={placement}\n        shouldFlip={shouldFlip}\n        // not working => containerPadding={containerPadding}\n        offset={offset}\n        crossOffset={crossOffset}\n        hideArrow\n        UNSAFE_className={popover}>\n        <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none'}))}>\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: styleSize(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      </Popover>\n    </DialogTrigger>\n  );\n}\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nlet _ContextualHelp = forwardRef(ContextualHelp);\nexport {_ContextualHelp as ContextualHelp};\n"],"names":[],"version":3,"file":"ContextualHelp.css.map"}
+{"mappings":"ACyCgB;EAAA;;;;EAAA;;;;EA8DuC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQf;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQD;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA9EvB;EAsEwB;;;;;;EAAA;;;;EAQD;;;;EAAA;;;;;AA9EvB;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAsEwB;EAAA;IAAA;;;;IAKA;;;;;;AAAA","sources":["019fb1fcc3c1598d","packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["@import \"3578337ca657fa78\";\n@import \"a023844b8de14349\";\n@import \"3be9de50ea21a4ea\";\n@import \"5266771b1d67e2fb\";\n@import \"ccaa61f08a335ea7\";\n","import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {ContentContext, FooterContext, HeadingContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {Popover, PopoverProps} from './Popover';\nimport {style, size as styleSize} 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' | 'shouldFlip' | 'offset' | 'crossOffset' | 'placement'>,\n  Pick<PopoverProps, 'containerPadding'>,\n  ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {\n  /** Contents of the Contextual Help popover. */\n  children?: ReactNode,\n  /**\n   * The size of the ActionButton.\n   *\n   * @default 'XS'\n   */\n  size?: 'XS' | 'S'\n}\n\nconst popover = style({\n  fontFamily: 'sans',\n  minWidth: '[218px]',\n  width: '[218px]',\n  padding: 24\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<ContextualHelpProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\nfunction ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n  let {\n    children,\n    defaultOpen,\n    // containerPadding = 24, // See popover() above. Issue noted in Popover.tsx.\n    size = 'XS',\n    crossOffset,\n    isOpen,\n    offset = 8,\n    onOpenChange,\n    placement = 'bottom start',\n    shouldFlip,\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    variant = 'help'\n  } = props;\n\n  // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n  // manually set the aria-label after useLabels() to keep the order of label\n  // then ContextualHelp variant\n  let labelProps = useLabels(props);\n  let label = stringFormatter.format(`contextualhelp.${variant}`);\n  labelProps['aria-label'] = labelProps['aria-label'] ? labelProps['aria-label'] + ' ' + label : label;\n\n  let buttonProps = filterDOMProps(props, {labelable: true});\n\n  return (\n    <DialogTrigger\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}>\n      <ActionButton\n        slot={null}\n        ref={ref}\n        size={size}\n        {...mergeProps(buttonProps, labelProps)}\n        UNSAFE_style={UNSAFE_style}\n        UNSAFE_className={UNSAFE_className}\n        styles={styles}\n        isQuiet>\n        {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n      </ActionButton>\n      <Popover\n        placement={placement}\n        shouldFlip={shouldFlip}\n        // not working => containerPadding={containerPadding}\n        offset={offset}\n        crossOffset={crossOffset}\n        hideArrow\n        UNSAFE_className={popover}>\n        <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: -24, padding: 24}))}>\n          <Provider\n            values={[\n              [TextContext, {\n                slots: {\n                  [DEFAULT_SLOT]: {}\n                }\n              }],\n              [HeadingContext, {styles: style({\n                font: 'heading-xs',\n                margin: 0,\n                marginBottom: styleSize(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      </Popover>\n    </DialogTrigger>\n  );\n}\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nlet _ContextualHelp = forwardRef(ContextualHelp);\nexport {_ContextualHelp as ContextualHelp};\n"],"names":[],"version":3,"file":"ContextualHelp.css.map"}

package/dist/ContextualHelp.mjs

@@ -75,7 +75,7 @@ function $8e176595bc49ca3f$var$ContextualHelp(props, ref) {
                 hideArrow: true,
                 UNSAFE_className: $8e176595bc49ca3f$var$popover,
                 children: /*#__PURE__*/ (0, $bcd4U$jsx)((0, $bcd4U$Dialog), {
-                    className: (0, $feb886035e0d4633$export$e618dc39ac9ad607)((0, $9bbc115952dac5a6$export$6af31f836f9aa6f2), " . _va _wa _xa _ya"),
+                    className: (0, $feb886035e0d4633$export$e618dc39ac9ad607)((0, $9bbc115952dac5a6$export$6af31f836f9aa6f2), " . _va _wa _xa _ya AP BP yP zP Eh Fh Ch Dh"),
                     children: /*#__PURE__*/ (0, $bcd4U$jsx)((0, $bcd4U$Provider), {
                         values: [
                             [

package/dist/ContextualHelp.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAM;AAOC,MAAM,0DAAwB,CAAA,GAAA,oBAAY,EAA2E;AAE5H,SAAS,qCAAe,KAA0B,EAAE,GAAoC;IACtF,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,eACR,WAAW,QACX,6EAA6E;IAC7E,OAAO,mBACP,WAAW,UACX,MAAM,UACN,SAAS,iBACT,YAAY,aACZ,YAAY,4BACZ,UAAU,oBACV,gBAAgB,gBAChB,YAAY,UACZ,MAAM,WACN,UAAU,QACX,GAAG;IAEJ,4EAA4E;IAC5E,2EAA2E;IAC3E,8BAA8B;IAC9B,IAAI,aAAa,CAAA,GAAA,gBAAQ,EAAE;IAC3B,IAAI,QAAQ,gBAAgB,MAAM,CAAC,CAAC,eAAe,EAAE,QAAQ,CAAC;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,WAAW;gBACX,YAAY;gBACZ,qDAAqD;gBACrD,QAAQ;gBACR,aAAa;gBACb,SAAS;gBACT,kBAAkB;0BAClB,cAAA,gBAAC,CAAA,GAAA,aAAQ;oBAAE,WAAW,CAAA,GAAA,yCAAU,EAAE,CAAA,GAAA,yCAAU;8BAC1C,cAAA,gBAAC,CAAA,GAAA,eAAO;wBACN,QAAQ;4BACN;gCAAC,CAAA,GAAA,kBAAU;gCAAG;oCACZ,OAAO;wCACL,CAAC,CAAA,GAAA,mBAAW,EAAE,EAAE,CAAC;oCACnB;gCACF;6BAAE;4BACF;gCAAC,CAAA,GAAA,yCAAa;gCAAG;oCAAC,MAAM;gCAItB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,yCAAa;gCAAG;oCAAC,MAAM;gCAEtB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,yCAAY;gCAAG;oCAAC,MAAM;gCAGrB;6BAAE;yBACL;kCACA;;;;;;AAMb;AAEA;;CAEC,GACD,IAAI,0DAAkB,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {ContentContext, FooterContext, HeadingContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {Popover, PopoverProps} from './Popover';\nimport {style, size as styleSize} 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' | 'shouldFlip' | 'offset' | 'crossOffset' | 'placement'>,\n  Pick<PopoverProps, 'containerPadding'>,\n  ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {\n  /** Contents of the Contextual Help popover. */\n  children?: ReactNode,\n  /**\n   * The size of the ActionButton.\n   *\n   * @default 'XS'\n   */\n  size?: 'XS' | 'S'\n}\n\nconst popover = style({\n  fontFamily: 'sans',\n  minWidth: '[218px]',\n  width: '[218px]',\n  padding: 24\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<ContextualHelpProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\nfunction ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n  let {\n    children,\n    defaultOpen,\n    // containerPadding = 24, // See popover() above. Issue noted in Popover.tsx.\n    size = 'XS',\n    crossOffset,\n    isOpen,\n    offset = 8,\n    onOpenChange,\n    placement = 'bottom start',\n    shouldFlip,\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    variant = 'help'\n  } = props;\n\n  // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n  // manually set the aria-label after useLabels() to keep the order of label\n  // then ContextualHelp variant\n  let labelProps = useLabels(props);\n  let label = stringFormatter.format(`contextualhelp.${variant}`);\n  labelProps['aria-label'] = labelProps['aria-label'] ? labelProps['aria-label'] + ' ' + label : label;\n\n  let buttonProps = filterDOMProps(props, {labelable: true});\n\n  return (\n    <DialogTrigger\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}>\n      <ActionButton\n        slot={null}\n        ref={ref}\n        size={size}\n        {...mergeProps(buttonProps, labelProps)}\n        UNSAFE_style={UNSAFE_style}\n        UNSAFE_className={UNSAFE_className}\n        styles={styles}\n        isQuiet>\n        {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n      </ActionButton>\n      <Popover\n        placement={placement}\n        shouldFlip={shouldFlip}\n        // not working => containerPadding={containerPadding}\n        offset={offset}\n        crossOffset={crossOffset}\n        hideArrow\n        UNSAFE_className={popover}>\n        <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none'}))}>\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: styleSize(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      </Popover>\n    </DialogTrigger>\n  );\n}\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nlet _ContextualHelp = forwardRef(ContextualHelp);\nexport {_ContextualHelp as ContextualHelp};\n"],"names":[],"version":3,"file":"ContextualHelp.mjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAM;AAOC,MAAM,0DAAwB,CAAA,GAAA,oBAAY,EAA2E;AAE5H,SAAS,qCAAe,KAA0B,EAAE,GAAoC;IACtF,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,eACR,WAAW,QACX,6EAA6E;IAC7E,OAAO,mBACP,WAAW,UACX,MAAM,UACN,SAAS,iBACT,YAAY,aACZ,YAAY,4BACZ,UAAU,oBACV,gBAAgB,gBAChB,YAAY,UACZ,MAAM,WACN,UAAU,QACX,GAAG;IAEJ,4EAA4E;IAC5E,2EAA2E;IAC3E,8BAA8B;IAC9B,IAAI,aAAa,CAAA,GAAA,gBAAQ,EAAE;IAC3B,IAAI,QAAQ,gBAAgB,MAAM,CAAC,CAAC,eAAe,EAAE,QAAQ,CAAC;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,WAAW;gBACX,YAAY;gBACZ,qDAAqD;gBACrD,QAAQ;gBACR,aAAa;gBACb,SAAS;gBACT,kBAAkB;0BAClB,cAAA,gBAAC,CAAA,GAAA,aAAQ;oBAAE,WAAW,CAAA,GAAA,yCAAU,EAAE,CAAA,GAAA,yCAAU;8BAC1C,cAAA,gBAAC,CAAA,GAAA,eAAO;wBACN,QAAQ;4BACN;gCAAC,CAAA,GAAA,kBAAU;gCAAG;oCACZ,OAAO;wCACL,CAAC,CAAA,GAAA,mBAAW,EAAE,EAAE,CAAC;oCACnB;gCACF;6BAAE;4BACF;gCAAC,CAAA,GAAA,yCAAa;gCAAG;oCAAC,MAAM;gCAItB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,yCAAa;gCAAG;oCAAC,MAAM;gCAEtB;6BAAE;4BACJ;gCAAC,CAAA,GAAA,yCAAY;gCAAG;oCAAC,MAAM;gCAGrB;6BAAE;yBACL;kCACA;;;;;;AAMb;AAEA;;CAEC,GACD,IAAI,0DAAkB,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {ContentContext, FooterContext, HeadingContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {Popover, PopoverProps} from './Popover';\nimport {style, size as styleSize} 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' | 'shouldFlip' | 'offset' | 'crossOffset' | 'placement'>,\n  Pick<PopoverProps, 'containerPadding'>,\n  ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {\n  /** Contents of the Contextual Help popover. */\n  children?: ReactNode,\n  /**\n   * The size of the ActionButton.\n   *\n   * @default 'XS'\n   */\n  size?: 'XS' | 'S'\n}\n\nconst popover = style({\n  fontFamily: 'sans',\n  minWidth: '[218px]',\n  width: '[218px]',\n  padding: 24\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<ContextualHelpProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\nfunction ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n  let {\n    children,\n    defaultOpen,\n    // containerPadding = 24, // See popover() above. Issue noted in Popover.tsx.\n    size = 'XS',\n    crossOffset,\n    isOpen,\n    offset = 8,\n    onOpenChange,\n    placement = 'bottom start',\n    shouldFlip,\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    variant = 'help'\n  } = props;\n\n  // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n  // manually set the aria-label after useLabels() to keep the order of label\n  // then ContextualHelp variant\n  let labelProps = useLabels(props);\n  let label = stringFormatter.format(`contextualhelp.${variant}`);\n  labelProps['aria-label'] = labelProps['aria-label'] ? labelProps['aria-label'] + ' ' + label : label;\n\n  let buttonProps = filterDOMProps(props, {labelable: true});\n\n  return (\n    <DialogTrigger\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}>\n      <ActionButton\n        slot={null}\n        ref={ref}\n        size={size}\n        {...mergeProps(buttonProps, labelProps)}\n        UNSAFE_style={UNSAFE_style}\n        UNSAFE_className={UNSAFE_className}\n        styles={styles}\n        isQuiet>\n        {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n      </ActionButton>\n      <Popover\n        placement={placement}\n        shouldFlip={shouldFlip}\n        // not working => containerPadding={containerPadding}\n        offset={offset}\n        crossOffset={crossOffset}\n        hideArrow\n        UNSAFE_className={popover}>\n        <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: -24, padding: 24}))}>\n          <Provider\n            values={[\n              [TextContext, {\n                slots: {\n                  [DEFAULT_SLOT]: {}\n                }\n              }],\n              [HeadingContext, {styles: style({\n                font: 'heading-xs',\n                margin: 0,\n                marginBottom: styleSize(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      </Popover>\n    </DialogTrigger>\n  );\n}\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nlet _ContextualHelp = forwardRef(ContextualHelp);\nexport {_ContextualHelp as ContextualHelp};\n"],"names":[],"version":3,"file":"ContextualHelp.mjs.map"}

package/dist/IllustratedMessage.cjs

@@ -101,8 +101,12 @@ const $55f1b8940d3e02db$var$illustration = function anonymous(props) {
         else if (props.isFocusVisible) rules += ' -rwx0fg_a-z';
         else if (props.isHovered) rules += ' -rwx0fg_a-z';
         else rules += ' -rwx0fg_a-y';
-    } else if (props.isInDropZone) rules += ' -rwx0fg_a-k';
-    else rules += ' -rwx0fg_a-n';
+    } else {
+        if (props.isPressed) rules += ' -rwx0fg_a-o';
+        else if (props.isFocusVisible) rules += ' -rwx0fg_a-o';
+        else if (props.isHovered) rules += ' -rwx0fg_a-o';
+        else rules += ' -rwx0fg_a-n';
+    }
     return rules;
 };
 const $55f1b8940d3e02db$var$heading = function anonymous(props) {

package/dist/IllustratedMessage.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAoCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDN,MAAM;;;;;;;;;;;;;;;;;;;;;;AAqBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYN,MAAM;AAUC,MAAM,0DAA4B,CAAA,GAAA,0BAAY,EAA6E;AAElI,SAAS,yCAAmB,KAAwC,EAAE,GAA2B;IAC/F,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,YACF,QAAQ,eACR,cAAc,oBACd,OAAO,uBACP,mBAAmB,kBACnB,YAAY,gBACZ,eAAe,qBACf,eAAe,OACf,GAAG,YACJ,GAAG;IAEJ,qBACE,gCAAC;QACE,GAAG,CAAA,GAAA,oCAAa,EAAE,WAAW;QAC9B,OAAO;QACP,WAAW,mBAAmB,yCAAmB;YAC/C,MAAM,MAAM,IAAI,IAAI;YACpB,aAAa,MAAM,WAAW,IAAI;QACpC,GAAG,MAAM,MAAM;QACf,KAAK;kBACL,cAAA,gCAAC,CAAA,GAAA,mCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,wCAAa;oBAAG;wBAAC,QAAQ,8BAAQ;yCAAC;kCAAa;wBAAI;oBAAE;iBAAE;gBACxD;oBAAC,CAAA,GAAA,wCAAa;oBAAG;wBAAC,QAAQ,8BAAQ;kCAAC;wBAAI;oBAAE;iBAAE;gBAC3C;oBAAC,CAAA,GAAA,6CAAkB;oBAAG;wBAAC,MAAM,SAAS,MAAM,MAAM;wBAAK,QAAQ,mCAAa;yCAAC;kCAAa;0CAAM;0CAAc;wBAAY;oBAAE;iBAAE;gBAC9H;oBAAC,CAAA,GAAA,4CAAiB;oBAAG;wBAAC,QAAQ;oBAAW;iBAAE;aAC5C;sBACA;;;AAIT;AAEA;;;CAGC,GACD,IAAI,4CAAsB,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/IllustratedMessage.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ButtonGroupContext} from './ButtonGroup';\nimport {ContentContext, HeadingContext} from './Content';\nimport {ContextValue, Provider} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from './Icon';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface IllustratedMessageStyleProps {\n  /**\n   * The size of the IllustratedMessage.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /**\n   * The direction that the IllustratedMessage should be laid out in.\n   *\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical'\n}\n\ninterface S2SpectrumIllustratedMessageProps extends DOMProps, UnsafeStyles, IllustratedMessageStyleProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the IllustratedMessage. */\n  children: ReactNode\n}\n\nconst illustratedMessage = style<IllustratedMessageStyleProps & {isInDropZone?: boolean}>({\n  display: 'grid',\n  fontFamily: 'sans',\n  fontSize: 'control',\n  maxWidth: {\n    orientation: {\n      vertical: '[380px]',\n      horizontal: '[33rem]' // ask design about max width for horizontal because doesn't look great when L\n    }\n  },\n  gridTemplateAreas: {\n    orientation: {\n      vertical: [\n        '   .  illustration .   ',\n        '   .       .       .   ',\n        'heading heading heading',\n        '   .       .       .   ',\n        'content content content',\n        '   .  buttonGroup  .   '\n      ],\n      horizontal: [\n        'illustration . heading',\n        'illustration .    .   ',\n        'illustration . content',\n        'illustration . buttonGroup'\n      ]\n    }\n  },\n  gridTemplateRows: {\n    orientation: {\n      vertical: {\n        default: ['min-content', 12, 'min-content', 4, 'min-content', 'min-content'],\n        size: {\n          L: ['min-content', 8, 'min-content', 4, 'min-content', 'min-content']\n        }\n      },\n      horizontal: ['1fr', 4, '1fr']\n    }\n  },\n  gridTemplateColumns: {\n    orientation: {\n      horizontal: ['1fr', 12, 'auto']\n    }\n  },\n  justifyItems: {\n    orientation: {\n      vertical: 'center',\n      horizontal: 'start'\n    }\n  },\n  textAlign: {\n    orientation: {\n      vertical: 'center'\n    }\n  }\n}, getAllowedOverrides({height: true}));\n\nconst illustration = style<IllustratedMessageStyleProps & {isInDropZone?: boolean, isDropTarget?: boolean}>({\n  gridArea: 'illustration',\n  size: {\n    size: {\n      S: 96,\n      M: 96,\n      L: 160\n    }\n  },\n  alignSelf: 'center',\n  '--iconPrimary': {\n    type: 'color',\n    value: {\n      // TODO: ask design about what the color should be. Says gray-800 in the designs file, neutral in token spec, but different neutral in dropzone spec\n      default: 'gray-800',\n      isInDropZone: 'gray-500', // neutral doesn't seem to match the color in designs, opted for gray-500 instead\n      isDropTarget: 'accent'\n    }\n  }\n});\n\nconst heading = style<IllustratedMessageStyleProps>({\n  gridArea: 'heading',\n  font: {\n    size: {\n      S: 'title',\n      M: 'title-xl',\n      L: 'title-2xl'\n    }\n  },\n  alignSelf: 'end',\n  margin: 0\n});\n\nconst content = style({\n  font: {\n    size: {\n      S: 'body-xs',\n      M: 'body-sm',\n      L: 'body-sm'\n    }\n  },\n  gridArea: 'content',\n  alignSelf: 'start'\n});\n\nconst buttonGroup = style({\n  gridArea: 'buttonGroup',\n  marginTop: 16\n});\n\ninterface IllustratedMessageContextProps extends Partial<S2SpectrumIllustratedMessageProps> {\n  isInDropZone?: boolean,\n  isDropTarget?: boolean\n}\n\nexport const IllustratedMessageContext = createContext<ContextValue<IllustratedMessageContextProps, DOMRefValue<HTMLDivElement>>>(null);\n\nfunction IllustratedMessage(props: S2SpectrumIllustratedMessageProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, IllustratedMessageContext);\n  let domRef = useDOMRef(ref);\n  let {\n    children,\n    orientation = 'horizontal',\n    size = 'M',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    isInDropZone = false,\n    isDropTarget = false,\n    ...otherProps\n  } = props as IllustratedMessageContextProps;\n\n  return (\n    <div\n      {...filterDOMProps(otherProps)}\n      style={UNSAFE_style}\n      className={UNSAFE_className + illustratedMessage({\n        size: props.size || 'M',\n        orientation: props.orientation || 'vertical'\n      }, props.styles)}\n      ref={domRef}>\n      <Provider\n        values={[\n          [HeadingContext, {styles: heading({orientation, size})}],\n          [ContentContext, {styles: content({size})}],\n          [IllustrationContext, {size: size === 'L' ? 'L' : 'M', styles: illustration({orientation, size, isInDropZone, isDropTarget})}],\n          [ButtonGroupContext, {styles: buttonGroup}]\n        ]}>\n        {children}\n      </Provider>\n    </div>\n  );\n}\n\n/**\n * An IllustratedMessage displays an illustration and a message, usually\n * for an empty state or an error page.\n */\nlet _IllustratedMessage = /*#__PURE__*/ forwardRef(IllustratedMessage);\nexport {_IllustratedMessage as IllustratedMessage};\n"],"names":[],"version":3,"file":"IllustratedMessage.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAoCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYN,MAAM;AAUC,MAAM,0DAA4B,CAAA,GAAA,0BAAY,EAA6E;AAElI,SAAS,yCAAmB,KAAwC,EAAE,GAA2B;IAC/F,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,YACF,QAAQ,eACR,cAAc,oBACd,OAAO,uBACP,mBAAmB,kBACnB,YAAY,gBACZ,eAAe,qBACf,eAAe,OACf,GAAG,YACJ,GAAG;IAEJ,qBACE,gCAAC;QACE,GAAG,CAAA,GAAA,oCAAa,EAAE,WAAW;QAC9B,OAAO;QACP,WAAW,mBAAmB,yCAAmB;YAC/C,MAAM,MAAM,IAAI,IAAI;YACpB,aAAa,MAAM,WAAW,IAAI;QACpC,GAAG,MAAM,MAAM;QACf,KAAK;kBACL,cAAA,gCAAC,CAAA,GAAA,mCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,wCAAa;oBAAG;wBAAC,QAAQ,8BAAQ;yCAAC;kCAAa;wBAAI;oBAAE;iBAAE;gBACxD;oBAAC,CAAA,GAAA,wCAAa;oBAAG;wBAAC,QAAQ,8BAAQ;kCAAC;wBAAI;oBAAE;iBAAE;gBAC3C;oBAAC,CAAA,GAAA,6CAAkB;oBAAG;wBAAC,MAAM,SAAS,MAAM,MAAM;wBAAK,QAAQ,mCAAa;yCAAC;kCAAa;0CAAM;0CAAc;wBAAY;oBAAE;iBAAE;gBAC9H;oBAAC,CAAA,GAAA,4CAAiB;oBAAG;wBAAC,QAAQ;oBAAW;iBAAE;aAC5C;sBACA;;;AAIT;AAEA;;;CAGC,GACD,IAAI,4CAAsB,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/IllustratedMessage.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ButtonGroupContext} from './ButtonGroup';\nimport {ContentContext, HeadingContext} from './Content';\nimport {ContextValue, Provider} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from './Icon';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface IllustratedMessageStyleProps {\n  /**\n   * The size of the IllustratedMessage.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /**\n   * The direction that the IllustratedMessage should be laid out in.\n   *\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical'\n}\n\ninterface S2SpectrumIllustratedMessageProps extends DOMProps, UnsafeStyles, IllustratedMessageStyleProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the IllustratedMessage. */\n  children: ReactNode\n}\n\nconst illustratedMessage = style<IllustratedMessageStyleProps & {isInDropZone?: boolean}>({\n  display: 'grid',\n  fontFamily: 'sans',\n  fontSize: 'control',\n  maxWidth: {\n    orientation: {\n      vertical: '[380px]',\n      horizontal: '[33rem]' // ask design about max width for horizontal because doesn't look great when L\n    }\n  },\n  gridTemplateAreas: {\n    orientation: {\n      vertical: [\n        '   .  illustration .   ',\n        '   .       .       .   ',\n        'heading heading heading',\n        '   .       .       .   ',\n        'content content content',\n        '   .  buttonGroup  .   '\n      ],\n      horizontal: [\n        'illustration . heading',\n        'illustration .    .   ',\n        'illustration . content',\n        'illustration . buttonGroup'\n      ]\n    }\n  },\n  gridTemplateRows: {\n    orientation: {\n      vertical: {\n        default: ['min-content', 12, 'min-content', 4, 'min-content', 'min-content'],\n        size: {\n          L: ['min-content', 8, 'min-content', 4, 'min-content', 'min-content']\n        }\n      },\n      horizontal: ['1fr', 4, '1fr']\n    }\n  },\n  gridTemplateColumns: {\n    orientation: {\n      horizontal: ['1fr', 12, 'auto']\n    }\n  },\n  justifyItems: {\n    orientation: {\n      vertical: 'center',\n      horizontal: 'start'\n    }\n  },\n  textAlign: {\n    orientation: {\n      vertical: 'center'\n    }\n  }\n}, getAllowedOverrides({height: true}));\n\nconst illustration = style<IllustratedMessageStyleProps & {isInDropZone?: boolean, isDropTarget?: boolean}>({\n  gridArea: 'illustration',\n  size: {\n    size: {\n      S: 96,\n      M: 96,\n      L: 160\n    }\n  },\n  alignSelf: 'center',\n  '--iconPrimary': {\n    type: 'color',\n    value: {\n      default: 'neutral',\n      isDropTarget: 'accent'\n    }\n  }\n});\n\nconst heading = style<IllustratedMessageStyleProps>({\n  gridArea: 'heading',\n  font: {\n    size: {\n      S: 'title',\n      M: 'title-xl',\n      L: 'title-2xl'\n    }\n  },\n  alignSelf: 'end',\n  margin: 0\n});\n\nconst content = style({\n  font: {\n    size: {\n      S: 'body-xs',\n      M: 'body-sm',\n      L: 'body-sm'\n    }\n  },\n  gridArea: 'content',\n  alignSelf: 'start'\n});\n\nconst buttonGroup = style({\n  gridArea: 'buttonGroup',\n  marginTop: 16\n});\n\ninterface IllustratedMessageContextProps extends Partial<S2SpectrumIllustratedMessageProps> {\n  isInDropZone?: boolean,\n  isDropTarget?: boolean\n}\n\nexport const IllustratedMessageContext = createContext<ContextValue<IllustratedMessageContextProps, DOMRefValue<HTMLDivElement>>>(null);\n\nfunction IllustratedMessage(props: S2SpectrumIllustratedMessageProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, IllustratedMessageContext);\n  let domRef = useDOMRef(ref);\n  let {\n    children,\n    orientation = 'horizontal',\n    size = 'M',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    isInDropZone = false,\n    isDropTarget = false,\n    ...otherProps\n  } = props as IllustratedMessageContextProps;\n\n  return (\n    <div\n      {...filterDOMProps(otherProps)}\n      style={UNSAFE_style}\n      className={UNSAFE_className + illustratedMessage({\n        size: props.size || 'M',\n        orientation: props.orientation || 'vertical'\n      }, props.styles)}\n      ref={domRef}>\n      <Provider\n        values={[\n          [HeadingContext, {styles: heading({orientation, size})}],\n          [ContentContext, {styles: content({size})}],\n          [IllustrationContext, {size: size === 'L' ? 'L' : 'M', styles: illustration({orientation, size, isInDropZone, isDropTarget})}],\n          [ButtonGroupContext, {styles: buttonGroup}]\n        ]}>\n        {children}\n      </Provider>\n    </div>\n  );\n}\n\n/**\n * An IllustratedMessage displays an illustration and a message, usually\n * for an empty state or an error page.\n */\nlet _IllustratedMessage = /*#__PURE__*/ forwardRef(IllustratedMessage);\nexport {_IllustratedMessage as IllustratedMessage};\n"],"names":[],"version":3,"file":"IllustratedMessage.cjs.map"}

package/dist/IllustratedMessage.css

@@ -105,8 +105,8 @@
     --iconPrimary: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
   }
 
-  .-rwx0fg_a-k {
-    --iconPrimary: var(--lightningcss-light, #8f8f8f) var(--lightningcss-dark, #6d6d6d);
+  .-rwx0fg_a-o {
+    --iconPrimary: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
   }
 
   .-rwx0fg_a-y {

package/dist/IllustratedMessage.css.map

@@ -1 +1 @@
-{"mappings":"AC8C2B;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;;EAAA;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyDN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqBL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAYI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAvGO;EA8EX;;;;;;;;;;EAAA;;;;EAaA;;;;EAAA;;;;;AA3FW;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IA8EX;;;;IAAA;;;;IAAA;;;;IAaA;;;;IAAA;;;;;;AAlCK","sources":["8de053f3c18af99e","packages/@react-spectrum/s2/src/IllustratedMessage.tsx"],"sourcesContent":["@import \"a1699b32f8f5f832\";\n@import \"0905d73dcc75523b\";\n@import \"b0b8309ded54f11f\";\n@import \"dce39f72f1fcef87\";\n@import \"7c612a8ca86186fd\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ButtonGroupContext} from './ButtonGroup';\nimport {ContentContext, HeadingContext} from './Content';\nimport {ContextValue, Provider} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from './Icon';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface IllustratedMessageStyleProps {\n  /**\n   * The size of the IllustratedMessage.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /**\n   * The direction that the IllustratedMessage should be laid out in.\n   *\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical'\n}\n\ninterface S2SpectrumIllustratedMessageProps extends DOMProps, UnsafeStyles, IllustratedMessageStyleProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the IllustratedMessage. */\n  children: ReactNode\n}\n\nconst illustratedMessage = style<IllustratedMessageStyleProps & {isInDropZone?: boolean}>({\n  display: 'grid',\n  fontFamily: 'sans',\n  fontSize: 'control',\n  maxWidth: {\n    orientation: {\n      vertical: '[380px]',\n      horizontal: '[33rem]' // ask design about max width for horizontal because doesn't look great when L\n    }\n  },\n  gridTemplateAreas: {\n    orientation: {\n      vertical: [\n        '   .  illustration .   ',\n        '   .       .       .   ',\n        'heading heading heading',\n        '   .       .       .   ',\n        'content content content',\n        '   .  buttonGroup  .   '\n      ],\n      horizontal: [\n        'illustration . heading',\n        'illustration .    .   ',\n        'illustration . content',\n        'illustration . buttonGroup'\n      ]\n    }\n  },\n  gridTemplateRows: {\n    orientation: {\n      vertical: {\n        default: ['min-content', 12, 'min-content', 4, 'min-content', 'min-content'],\n        size: {\n          L: ['min-content', 8, 'min-content', 4, 'min-content', 'min-content']\n        }\n      },\n      horizontal: ['1fr', 4, '1fr']\n    }\n  },\n  gridTemplateColumns: {\n    orientation: {\n      horizontal: ['1fr', 12, 'auto']\n    }\n  },\n  justifyItems: {\n    orientation: {\n      vertical: 'center',\n      horizontal: 'start'\n    }\n  },\n  textAlign: {\n    orientation: {\n      vertical: 'center'\n    }\n  }\n}, getAllowedOverrides({height: true}));\n\nconst illustration = style<IllustratedMessageStyleProps & {isInDropZone?: boolean, isDropTarget?: boolean}>({\n  gridArea: 'illustration',\n  size: {\n    size: {\n      S: 96,\n      M: 96,\n      L: 160\n    }\n  },\n  alignSelf: 'center',\n  '--iconPrimary': {\n    type: 'color',\n    value: {\n      // TODO: ask design about what the color should be. Says gray-800 in the designs file, neutral in token spec, but different neutral in dropzone spec\n      default: 'gray-800',\n      isInDropZone: 'gray-500', // neutral doesn't seem to match the color in designs, opted for gray-500 instead\n      isDropTarget: 'accent'\n    }\n  }\n});\n\nconst heading = style<IllustratedMessageStyleProps>({\n  gridArea: 'heading',\n  font: {\n    size: {\n      S: 'title',\n      M: 'title-xl',\n      L: 'title-2xl'\n    }\n  },\n  alignSelf: 'end',\n  margin: 0\n});\n\nconst content = style({\n  font: {\n    size: {\n      S: 'body-xs',\n      M: 'body-sm',\n      L: 'body-sm'\n    }\n  },\n  gridArea: 'content',\n  alignSelf: 'start'\n});\n\nconst buttonGroup = style({\n  gridArea: 'buttonGroup',\n  marginTop: 16\n});\n\ninterface IllustratedMessageContextProps extends Partial<S2SpectrumIllustratedMessageProps> {\n  isInDropZone?: boolean,\n  isDropTarget?: boolean\n}\n\nexport const IllustratedMessageContext = createContext<ContextValue<IllustratedMessageContextProps, DOMRefValue<HTMLDivElement>>>(null);\n\nfunction IllustratedMessage(props: S2SpectrumIllustratedMessageProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, IllustratedMessageContext);\n  let domRef = useDOMRef(ref);\n  let {\n    children,\n    orientation = 'horizontal',\n    size = 'M',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    isInDropZone = false,\n    isDropTarget = false,\n    ...otherProps\n  } = props as IllustratedMessageContextProps;\n\n  return (\n    <div\n      {...filterDOMProps(otherProps)}\n      style={UNSAFE_style}\n      className={UNSAFE_className + illustratedMessage({\n        size: props.size || 'M',\n        orientation: props.orientation || 'vertical'\n      }, props.styles)}\n      ref={domRef}>\n      <Provider\n        values={[\n          [HeadingContext, {styles: heading({orientation, size})}],\n          [ContentContext, {styles: content({size})}],\n          [IllustrationContext, {size: size === 'L' ? 'L' : 'M', styles: illustration({orientation, size, isInDropZone, isDropTarget})}],\n          [ButtonGroupContext, {styles: buttonGroup}]\n        ]}>\n        {children}\n      </Provider>\n    </div>\n  );\n}\n\n/**\n * An IllustratedMessage displays an illustration and a message, usually\n * for an empty state or an error page.\n */\nlet _IllustratedMessage = /*#__PURE__*/ forwardRef(IllustratedMessage);\nexport {_IllustratedMessage as IllustratedMessage};\n"],"names":[],"version":3,"file":"IllustratedMessage.css.map"}
+{"mappings":"AC8C2B;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;;EAAA;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyDN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmBL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAYI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AArGO;EA4EX;;;;;;;;;;EAAA;;;;EAaA;;;;EAAA;;;;;AAzFW;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IA4EX;;;;IAAA;;;;IAAA;;;;IAaA;;;;IAAA;;;;;;AAhCK","sources":["8de053f3c18af99e","packages/@react-spectrum/s2/src/IllustratedMessage.tsx"],"sourcesContent":["@import \"a1699b32f8f5f832\";\n@import \"0905d73dcc75523b\";\n@import \"b0b8309ded54f11f\";\n@import \"dce39f72f1fcef87\";\n@import \"7c612a8ca86186fd\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ButtonGroupContext} from './ButtonGroup';\nimport {ContentContext, HeadingContext} from './Content';\nimport {ContextValue, Provider} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from './Icon';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface IllustratedMessageStyleProps {\n  /**\n   * The size of the IllustratedMessage.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /**\n   * The direction that the IllustratedMessage should be laid out in.\n   *\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical'\n}\n\ninterface S2SpectrumIllustratedMessageProps extends DOMProps, UnsafeStyles, IllustratedMessageStyleProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the IllustratedMessage. */\n  children: ReactNode\n}\n\nconst illustratedMessage = style<IllustratedMessageStyleProps & {isInDropZone?: boolean}>({\n  display: 'grid',\n  fontFamily: 'sans',\n  fontSize: 'control',\n  maxWidth: {\n    orientation: {\n      vertical: '[380px]',\n      horizontal: '[33rem]' // ask design about max width for horizontal because doesn't look great when L\n    }\n  },\n  gridTemplateAreas: {\n    orientation: {\n      vertical: [\n        '   .  illustration .   ',\n        '   .       .       .   ',\n        'heading heading heading',\n        '   .       .       .   ',\n        'content content content',\n        '   .  buttonGroup  .   '\n      ],\n      horizontal: [\n        'illustration . heading',\n        'illustration .    .   ',\n        'illustration . content',\n        'illustration . buttonGroup'\n      ]\n    }\n  },\n  gridTemplateRows: {\n    orientation: {\n      vertical: {\n        default: ['min-content', 12, 'min-content', 4, 'min-content', 'min-content'],\n        size: {\n          L: ['min-content', 8, 'min-content', 4, 'min-content', 'min-content']\n        }\n      },\n      horizontal: ['1fr', 4, '1fr']\n    }\n  },\n  gridTemplateColumns: {\n    orientation: {\n      horizontal: ['1fr', 12, 'auto']\n    }\n  },\n  justifyItems: {\n    orientation: {\n      vertical: 'center',\n      horizontal: 'start'\n    }\n  },\n  textAlign: {\n    orientation: {\n      vertical: 'center'\n    }\n  }\n}, getAllowedOverrides({height: true}));\n\nconst illustration = style<IllustratedMessageStyleProps & {isInDropZone?: boolean, isDropTarget?: boolean}>({\n  gridArea: 'illustration',\n  size: {\n    size: {\n      S: 96,\n      M: 96,\n      L: 160\n    }\n  },\n  alignSelf: 'center',\n  '--iconPrimary': {\n    type: 'color',\n    value: {\n      default: 'neutral',\n      isDropTarget: 'accent'\n    }\n  }\n});\n\nconst heading = style<IllustratedMessageStyleProps>({\n  gridArea: 'heading',\n  font: {\n    size: {\n      S: 'title',\n      M: 'title-xl',\n      L: 'title-2xl'\n    }\n  },\n  alignSelf: 'end',\n  margin: 0\n});\n\nconst content = style({\n  font: {\n    size: {\n      S: 'body-xs',\n      M: 'body-sm',\n      L: 'body-sm'\n    }\n  },\n  gridArea: 'content',\n  alignSelf: 'start'\n});\n\nconst buttonGroup = style({\n  gridArea: 'buttonGroup',\n  marginTop: 16\n});\n\ninterface IllustratedMessageContextProps extends Partial<S2SpectrumIllustratedMessageProps> {\n  isInDropZone?: boolean,\n  isDropTarget?: boolean\n}\n\nexport const IllustratedMessageContext = createContext<ContextValue<IllustratedMessageContextProps, DOMRefValue<HTMLDivElement>>>(null);\n\nfunction IllustratedMessage(props: S2SpectrumIllustratedMessageProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, IllustratedMessageContext);\n  let domRef = useDOMRef(ref);\n  let {\n    children,\n    orientation = 'horizontal',\n    size = 'M',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    isInDropZone = false,\n    isDropTarget = false,\n    ...otherProps\n  } = props as IllustratedMessageContextProps;\n\n  return (\n    <div\n      {...filterDOMProps(otherProps)}\n      style={UNSAFE_style}\n      className={UNSAFE_className + illustratedMessage({\n        size: props.size || 'M',\n        orientation: props.orientation || 'vertical'\n      }, props.styles)}\n      ref={domRef}>\n      <Provider\n        values={[\n          [HeadingContext, {styles: heading({orientation, size})}],\n          [ContentContext, {styles: content({size})}],\n          [IllustrationContext, {size: size === 'L' ? 'L' : 'M', styles: illustration({orientation, size, isInDropZone, isDropTarget})}],\n          [ButtonGroupContext, {styles: buttonGroup}]\n        ]}>\n        {children}\n      </Provider>\n    </div>\n  );\n}\n\n/**\n * An IllustratedMessage displays an illustration and a message, usually\n * for an empty state or an error page.\n */\nlet _IllustratedMessage = /*#__PURE__*/ forwardRef(IllustratedMessage);\nexport {_IllustratedMessage as IllustratedMessage};\n"],"names":[],"version":3,"file":"IllustratedMessage.css.map"}

package/dist/IllustratedMessage.mjs

@@ -94,8 +94,12 @@ const $4950413ac998f607$var$illustration = function anonymous(props) {
         else if (props.isFocusVisible) rules += ' -rwx0fg_a-z';
         else if (props.isHovered) rules += ' -rwx0fg_a-z';
         else rules += ' -rwx0fg_a-y';
-    } else if (props.isInDropZone) rules += ' -rwx0fg_a-k';
-    else rules += ' -rwx0fg_a-n';
+    } else {
+        if (props.isPressed) rules += ' -rwx0fg_a-o';
+        else if (props.isFocusVisible) rules += ' -rwx0fg_a-o';
+        else if (props.isHovered) rules += ' -rwx0fg_a-o';
+        else rules += ' -rwx0fg_a-n';
+    }
     return rules;
 };
 const $4950413ac998f607$var$heading = function anonymous(props) {

package/dist/IllustratedMessage.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAoCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDN,MAAM;;;;;;;;;;;;;;;;;;;;;;AAqBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYN,MAAM;AAUC,MAAM,0DAA4B,CAAA,GAAA,oBAAY,EAA6E;AAElI,SAAS,yCAAmB,KAAwC,EAAE,GAA2B;IAC/F,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,YACF,QAAQ,eACR,cAAc,oBACd,OAAO,uBACP,mBAAmB,kBACnB,YAAY,gBACZ,eAAe,qBACf,eAAe,OACf,GAAG,YACJ,GAAG;IAEJ,qBACE,gBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;QAC9B,OAAO;QACP,WAAW,mBAAmB,yCAAmB;YAC/C,MAAM,MAAM,IAAI,IAAI;YACpB,aAAa,MAAM,WAAW,IAAI;QACpC,GAAG,MAAM,MAAM;QACf,KAAK;kBACL,cAAA,gBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAa;oBAAG;wBAAC,QAAQ,8BAAQ;yCAAC;kCAAa;wBAAI;oBAAE;iBAAE;gBACxD;oBAAC,CAAA,GAAA,yCAAa;oBAAG;wBAAC,QAAQ,8BAAQ;kCAAC;wBAAI;oBAAE;iBAAE;gBAC3C;oBAAC,CAAA,GAAA,yCAAkB;oBAAG;wBAAC,MAAM,SAAS,MAAM,MAAM;wBAAK,QAAQ,mCAAa;yCAAC;kCAAa;0CAAM;0CAAc;wBAAY;oBAAE;iBAAE;gBAC9H;oBAAC,CAAA,GAAA,yCAAiB;oBAAG;wBAAC,QAAQ;oBAAW;iBAAE;aAC5C;sBACA;;;AAIT;AAEA;;;CAGC,GACD,IAAI,4CAAsB,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/IllustratedMessage.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ButtonGroupContext} from './ButtonGroup';\nimport {ContentContext, HeadingContext} from './Content';\nimport {ContextValue, Provider} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from './Icon';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface IllustratedMessageStyleProps {\n  /**\n   * The size of the IllustratedMessage.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /**\n   * The direction that the IllustratedMessage should be laid out in.\n   *\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical'\n}\n\ninterface S2SpectrumIllustratedMessageProps extends DOMProps, UnsafeStyles, IllustratedMessageStyleProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the IllustratedMessage. */\n  children: ReactNode\n}\n\nconst illustratedMessage = style<IllustratedMessageStyleProps & {isInDropZone?: boolean}>({\n  display: 'grid',\n  fontFamily: 'sans',\n  fontSize: 'control',\n  maxWidth: {\n    orientation: {\n      vertical: '[380px]',\n      horizontal: '[33rem]' // ask design about max width for horizontal because doesn't look great when L\n    }\n  },\n  gridTemplateAreas: {\n    orientation: {\n      vertical: [\n        '   .  illustration .   ',\n        '   .       .       .   ',\n        'heading heading heading',\n        '   .       .       .   ',\n        'content content content',\n        '   .  buttonGroup  .   '\n      ],\n      horizontal: [\n        'illustration . heading',\n        'illustration .    .   ',\n        'illustration . content',\n        'illustration . buttonGroup'\n      ]\n    }\n  },\n  gridTemplateRows: {\n    orientation: {\n      vertical: {\n        default: ['min-content', 12, 'min-content', 4, 'min-content', 'min-content'],\n        size: {\n          L: ['min-content', 8, 'min-content', 4, 'min-content', 'min-content']\n        }\n      },\n      horizontal: ['1fr', 4, '1fr']\n    }\n  },\n  gridTemplateColumns: {\n    orientation: {\n      horizontal: ['1fr', 12, 'auto']\n    }\n  },\n  justifyItems: {\n    orientation: {\n      vertical: 'center',\n      horizontal: 'start'\n    }\n  },\n  textAlign: {\n    orientation: {\n      vertical: 'center'\n    }\n  }\n}, getAllowedOverrides({height: true}));\n\nconst illustration = style<IllustratedMessageStyleProps & {isInDropZone?: boolean, isDropTarget?: boolean}>({\n  gridArea: 'illustration',\n  size: {\n    size: {\n      S: 96,\n      M: 96,\n      L: 160\n    }\n  },\n  alignSelf: 'center',\n  '--iconPrimary': {\n    type: 'color',\n    value: {\n      // TODO: ask design about what the color should be. Says gray-800 in the designs file, neutral in token spec, but different neutral in dropzone spec\n      default: 'gray-800',\n      isInDropZone: 'gray-500', // neutral doesn't seem to match the color in designs, opted for gray-500 instead\n      isDropTarget: 'accent'\n    }\n  }\n});\n\nconst heading = style<IllustratedMessageStyleProps>({\n  gridArea: 'heading',\n  font: {\n    size: {\n      S: 'title',\n      M: 'title-xl',\n      L: 'title-2xl'\n    }\n  },\n  alignSelf: 'end',\n  margin: 0\n});\n\nconst content = style({\n  font: {\n    size: {\n      S: 'body-xs',\n      M: 'body-sm',\n      L: 'body-sm'\n    }\n  },\n  gridArea: 'content',\n  alignSelf: 'start'\n});\n\nconst buttonGroup = style({\n  gridArea: 'buttonGroup',\n  marginTop: 16\n});\n\ninterface IllustratedMessageContextProps extends Partial<S2SpectrumIllustratedMessageProps> {\n  isInDropZone?: boolean,\n  isDropTarget?: boolean\n}\n\nexport const IllustratedMessageContext = createContext<ContextValue<IllustratedMessageContextProps, DOMRefValue<HTMLDivElement>>>(null);\n\nfunction IllustratedMessage(props: S2SpectrumIllustratedMessageProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, IllustratedMessageContext);\n  let domRef = useDOMRef(ref);\n  let {\n    children,\n    orientation = 'horizontal',\n    size = 'M',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    isInDropZone = false,\n    isDropTarget = false,\n    ...otherProps\n  } = props as IllustratedMessageContextProps;\n\n  return (\n    <div\n      {...filterDOMProps(otherProps)}\n      style={UNSAFE_style}\n      className={UNSAFE_className + illustratedMessage({\n        size: props.size || 'M',\n        orientation: props.orientation || 'vertical'\n      }, props.styles)}\n      ref={domRef}>\n      <Provider\n        values={[\n          [HeadingContext, {styles: heading({orientation, size})}],\n          [ContentContext, {styles: content({size})}],\n          [IllustrationContext, {size: size === 'L' ? 'L' : 'M', styles: illustration({orientation, size, isInDropZone, isDropTarget})}],\n          [ButtonGroupContext, {styles: buttonGroup}]\n        ]}>\n        {children}\n      </Provider>\n    </div>\n  );\n}\n\n/**\n * An IllustratedMessage displays an illustration and a message, usually\n * for an empty state or an error page.\n */\nlet _IllustratedMessage = /*#__PURE__*/ forwardRef(IllustratedMessage);\nexport {_IllustratedMessage as IllustratedMessage};\n"],"names":[],"version":3,"file":"IllustratedMessage.mjs.map"}
+{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAoCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYN,MAAM;AAUC,MAAM,0DAA4B,CAAA,GAAA,oBAAY,EAA6E;AAElI,SAAS,yCAAmB,KAAwC,EAAE,GAA2B;IAC/F,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,YACF,QAAQ,eACR,cAAc,oBACd,OAAO,uBACP,mBAAmB,kBACnB,YAAY,gBACZ,eAAe,qBACf,eAAe,OACf,GAAG,YACJ,GAAG;IAEJ,qBACE,gBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;QAC9B,OAAO;QACP,WAAW,mBAAmB,yCAAmB;YAC/C,MAAM,MAAM,IAAI,IAAI;YACpB,aAAa,MAAM,WAAW,IAAI;QACpC,GAAG,MAAM,MAAM;QACf,KAAK;kBACL,cAAA,gBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAa;oBAAG;wBAAC,QAAQ,8BAAQ;yCAAC;kCAAa;wBAAI;oBAAE;iBAAE;gBACxD;oBAAC,CAAA,GAAA,yCAAa;oBAAG;wBAAC,QAAQ,8BAAQ;kCAAC;wBAAI;oBAAE;iBAAE;gBAC3C;oBAAC,CAAA,GAAA,yCAAkB;oBAAG;wBAAC,MAAM,SAAS,MAAM,MAAM;wBAAK,QAAQ,mCAAa;yCAAC;kCAAa;0CAAM;0CAAc;wBAAY;oBAAE;iBAAE;gBAC9H;oBAAC,CAAA,GAAA,yCAAiB;oBAAG;wBAAC,QAAQ;oBAAW;iBAAE;aAC5C;sBACA;;;AAIT;AAEA;;;CAGC,GACD,IAAI,4CAAsB,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/IllustratedMessage.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ButtonGroupContext} from './ButtonGroup';\nimport {ContentContext, HeadingContext} from './Content';\nimport {ContextValue, Provider} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from './Icon';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface IllustratedMessageStyleProps {\n  /**\n   * The size of the IllustratedMessage.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /**\n   * The direction that the IllustratedMessage should be laid out in.\n   *\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical'\n}\n\ninterface S2SpectrumIllustratedMessageProps extends DOMProps, UnsafeStyles, IllustratedMessageStyleProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The content to display in the IllustratedMessage. */\n  children: ReactNode\n}\n\nconst illustratedMessage = style<IllustratedMessageStyleProps & {isInDropZone?: boolean}>({\n  display: 'grid',\n  fontFamily: 'sans',\n  fontSize: 'control',\n  maxWidth: {\n    orientation: {\n      vertical: '[380px]',\n      horizontal: '[33rem]' // ask design about max width for horizontal because doesn't look great when L\n    }\n  },\n  gridTemplateAreas: {\n    orientation: {\n      vertical: [\n        '   .  illustration .   ',\n        '   .       .       .   ',\n        'heading heading heading',\n        '   .       .       .   ',\n        'content content content',\n        '   .  buttonGroup  .   '\n      ],\n      horizontal: [\n        'illustration . heading',\n        'illustration .    .   ',\n        'illustration . content',\n        'illustration . buttonGroup'\n      ]\n    }\n  },\n  gridTemplateRows: {\n    orientation: {\n      vertical: {\n        default: ['min-content', 12, 'min-content', 4, 'min-content', 'min-content'],\n        size: {\n          L: ['min-content', 8, 'min-content', 4, 'min-content', 'min-content']\n        }\n      },\n      horizontal: ['1fr', 4, '1fr']\n    }\n  },\n  gridTemplateColumns: {\n    orientation: {\n      horizontal: ['1fr', 12, 'auto']\n    }\n  },\n  justifyItems: {\n    orientation: {\n      vertical: 'center',\n      horizontal: 'start'\n    }\n  },\n  textAlign: {\n    orientation: {\n      vertical: 'center'\n    }\n  }\n}, getAllowedOverrides({height: true}));\n\nconst illustration = style<IllustratedMessageStyleProps & {isInDropZone?: boolean, isDropTarget?: boolean}>({\n  gridArea: 'illustration',\n  size: {\n    size: {\n      S: 96,\n      M: 96,\n      L: 160\n    }\n  },\n  alignSelf: 'center',\n  '--iconPrimary': {\n    type: 'color',\n    value: {\n      default: 'neutral',\n      isDropTarget: 'accent'\n    }\n  }\n});\n\nconst heading = style<IllustratedMessageStyleProps>({\n  gridArea: 'heading',\n  font: {\n    size: {\n      S: 'title',\n      M: 'title-xl',\n      L: 'title-2xl'\n    }\n  },\n  alignSelf: 'end',\n  margin: 0\n});\n\nconst content = style({\n  font: {\n    size: {\n      S: 'body-xs',\n      M: 'body-sm',\n      L: 'body-sm'\n    }\n  },\n  gridArea: 'content',\n  alignSelf: 'start'\n});\n\nconst buttonGroup = style({\n  gridArea: 'buttonGroup',\n  marginTop: 16\n});\n\ninterface IllustratedMessageContextProps extends Partial<S2SpectrumIllustratedMessageProps> {\n  isInDropZone?: boolean,\n  isDropTarget?: boolean\n}\n\nexport const IllustratedMessageContext = createContext<ContextValue<IllustratedMessageContextProps, DOMRefValue<HTMLDivElement>>>(null);\n\nfunction IllustratedMessage(props: S2SpectrumIllustratedMessageProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, IllustratedMessageContext);\n  let domRef = useDOMRef(ref);\n  let {\n    children,\n    orientation = 'horizontal',\n    size = 'M',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    isInDropZone = false,\n    isDropTarget = false,\n    ...otherProps\n  } = props as IllustratedMessageContextProps;\n\n  return (\n    <div\n      {...filterDOMProps(otherProps)}\n      style={UNSAFE_style}\n      className={UNSAFE_className + illustratedMessage({\n        size: props.size || 'M',\n        orientation: props.orientation || 'vertical'\n      }, props.styles)}\n      ref={domRef}>\n      <Provider\n        values={[\n          [HeadingContext, {styles: heading({orientation, size})}],\n          [ContentContext, {styles: content({size})}],\n          [IllustrationContext, {size: size === 'L' ? 'L' : 'M', styles: illustration({orientation, size, isInDropZone, isDropTarget})}],\n          [ButtonGroupContext, {styles: buttonGroup}]\n        ]}>\n        {children}\n      </Provider>\n    </div>\n  );\n}\n\n/**\n * An IllustratedMessage displays an illustration and a message, usually\n * for an empty state or an error page.\n */\nlet _IllustratedMessage = /*#__PURE__*/ forwardRef(IllustratedMessage);\nexport {_IllustratedMessage as IllustratedMessage};\n"],"names":[],"version":3,"file":"IllustratedMessage.mjs.map"}

package/dist/InlineAlert.cjs

@@ -108,19 +108,19 @@ const $72bf3a9f94a75d9f$var$inlineAlert = function anonymous(props, overrides) {
             else if (props.isFocusVisible) rules += ' b_____L';
             else if (props.isHovered) rules += ' b_____L';
             else rules += ' b_____K';
-        } else if (props.fillStyle === "subtleFill") rules += ' b_____M';
+        } else if (props.fillStyle === "subtleFill") rules += ' b_____N';
         else if (props.fillStyle === "border") rules += ' bd';
     } else if (props.variant === "notice") {
-        if (props.fillStyle === "boldFill") rules += ' b_____Q';
-        else if (props.fillStyle === "subtleFill") rules += ' b_____R';
+        if (props.fillStyle === "boldFill") rules += ' b_____T';
+        else if (props.fillStyle === "subtleFill") rules += ' b_____V';
         else if (props.fillStyle === "border") rules += ' bd';
     } else if (props.variant === "positive") {
         if (props.fillStyle === "boldFill") {
-            if (props.isPressed) rules += ' b_____O';
-            else if (props.isFocusVisible) rules += ' b_____O';
-            else if (props.isHovered) rules += ' b_____O';
-            else rules += ' b_____N';
-        } else if (props.fillStyle === "subtleFill") rules += ' b_____P';
+            if (props.isPressed) rules += ' b_____Q';
+            else if (props.isFocusVisible) rules += ' b_____Q';
+            else if (props.isHovered) rules += ' b_____Q';
+            else rules += ' b_____P';
+        } else if (props.fillStyle === "subtleFill") rules += ' b_____S';
         else if (props.fillStyle === "border") rules += ' bd';
     } else if (props.variant === "informative") {
         if (props.fillStyle === "boldFill") {

package/dist/InlineAlert.css

@@ -123,27 +123,27 @@
     background-color: var(--lightningcss-light, #274dea) var(--lightningcss-dark, #345bf8);
   }
 
-  .b_____P {
+  .b_____S {
     background-color: var(--lightningcss-light, #d7f7e1) var(--lightningcss-dark, #003326);
   }
 
-  .b_____N {
+  .b_____P {
     background-color: var(--lightningcss-light, #05834e) var(--lightningcss-dark, #068850);
   }
 
-  .b_____O {
+  .b_____Q {
     background-color: var(--lightningcss-light, #036e45) var(--lightningcss-dark, #047c4b);
   }
 
-  .b_____R {
+  .b_____V {
     background-color: var(--lightningcss-light, #ffeccf) var(--lightningcss-dark, #501b00);
   }
 
-  .b_____Q {
+  .b_____T {
     background-color: var(--lightningcss-light, #fc7d00) var(--lightningcss-dark, #e06400);
   }
 
-  .b_____M {
+  .b_____N {
     background-color: var(--lightningcss-light, #ffebe8) var(--lightningcss-dark, #571107);
   }
 

package/dist/InlineAlert.mjs

@@ -101,19 +101,19 @@ const $fc2cf6b397804b9c$var$inlineAlert = function anonymous(props, overrides) {
             else if (props.isFocusVisible) rules += ' b_____L';
             else if (props.isHovered) rules += ' b_____L';
             else rules += ' b_____K';
-        } else if (props.fillStyle === "subtleFill") rules += ' b_____M';
+        } else if (props.fillStyle === "subtleFill") rules += ' b_____N';
         else if (props.fillStyle === "border") rules += ' bd';
     } else if (props.variant === "notice") {
-        if (props.fillStyle === "boldFill") rules += ' b_____Q';
-        else if (props.fillStyle === "subtleFill") rules += ' b_____R';
+        if (props.fillStyle === "boldFill") rules += ' b_____T';
+        else if (props.fillStyle === "subtleFill") rules += ' b_____V';
         else if (props.fillStyle === "border") rules += ' bd';
     } else if (props.variant === "positive") {
         if (props.fillStyle === "boldFill") {
-            if (props.isPressed) rules += ' b_____O';
-            else if (props.isFocusVisible) rules += ' b_____O';
-            else if (props.isHovered) rules += ' b_____O';
-            else rules += ' b_____N';
-        } else if (props.fillStyle === "subtleFill") rules += ' b_____P';
+            if (props.isPressed) rules += ' b_____Q';
+            else if (props.isFocusVisible) rules += ' b_____Q';
+            else if (props.isHovered) rules += ' b_____Q';
+            else rules += ' b_____P';
+        } else if (props.fillStyle === "subtleFill") rules += ' b_____S';
         else if (props.fillStyle === "border") rules += ' bd';
     } else if (props.variant === "informative") {
         if (props.fillStyle === "boldFill") {

package/dist/Meter.cjs

@@ -165,23 +165,10 @@ const $f53cdf036c04454a$var$fillStyles = function anonymous(props) {
     rules += ' ba_____x';
     if (props.staticColor === "black") rules += ' b_____s';
     else if (props.staticColor === "white") rules += ' b_____f';
-    else if (props.variant === "negative") {
-        if (props.isPressed) rules += ' b_____L';
-        else if (props.isFocusVisible) rules += ' b_____L';
-        else if (props.isHovered) rules += ' b_____L';
-        else rules += ' b_____K';
-    } else if (props.variant === "notice") rules += ' b_____Q';
-    else if (props.variant === "positive") {
-        if (props.isPressed) rules += ' b_____O';
-        else if (props.isFocusVisible) rules += ' b_____O';
-        else if (props.isHovered) rules += ' b_____O';
-        else rules += ' b_____N';
-    } else {
-        if (props.isPressed) rules += ' b_____F';
-        else if (props.isFocusVisible) rules += ' b_____F';
-        else if (props.isHovered) rules += ' b_____F';
-        else rules += ' b_____E';
-    }
+    else if (props.variant === "negative") rules += ' b_____M';
+    else if (props.variant === "notice") rules += ' b_____U';
+    else if (props.variant === "positive") rules += ' b_____R';
+    else rules += ' b_____O';
     return rules;
 };
 function $f53cdf036c04454a$var$Meter(props, ref) {

package/dist/Meter.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA6CM,MAAM,0DAAe,CAAA,GAAA,0BAAY,EAAyD;AAEjG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBN,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,QACL,OAAO,kBACP,WAAW,UACX,MAAM,oBACN,mBAAmB,kBACnB,YAAY,WACZ,UAAU,8BACV,gBAAgB,OAChB,GAAG,YACJ,GAAG;IAEJ,qBACE,gCAAC,CAAA,GAAA,gCAAQ;QACN,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBACpC;qBACA;yBACA;2BACA;QACF,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gCAAC,CAAA,GAAA,oCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,uBAAS,gCAAC,CAAA,GAAA,8BAAG;wBAAE,QAAQ,kCAAY;kCAAC;4BAAM,YAAY;yCAAO;wBAAW;kCAAK;;kCAC9E,gCAAC,CAAA,GAAA,yCAAc;kCACb,cAAA,gCAAC;4BAAI,WAAW,kCAAY;6CAAC;sCAAa;4BAAI;sCAC5C,cAAA,gCAAC;gCAAI,WAAW,iCAAW;iDAAC;6CAAa;gCAAO;gCAAI,OAAO;oCAAC,OAAO,aAAa;gCAAG;;;;;;;AAOjG;AAEA;;;CAGC,GACD,IAAI,0DAAS,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Meter.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 {\n  Meter as AriaMeter,\n  MeterProps as AriaMeterProps,\n  ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {size, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n  /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n   * @default 'informative'\n   */\n  variant?: 'informative' | 'positive' | 'notice' | 'negative',\n  /**\n   * The size of the Meter.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** \n   * The static color style to apply. Useful when the button appears over a color background. \n   */\n  staticColor?: 'white' | 'black',\n  /**\n   * The label's overall position relative to the element it is labeling.\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style'>, MeterStyleProps, StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n  ...bar()\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n  ...fieldLabel(),\n  gridArea: 'value'\n});\n\nconst trackStyles = style({\n  ...track(),\n  height: {\n    default: size(6),\n    size: {\n      S: 4, // progress-bar-thickness-small\n      M: size(6), // progress-bar-thickness-medium\n      L: 8, // progress-bar-thickness-large\n      XL: size(10) // progress-bar-thickness-extra-large\n    }\n  }\n});\n\nconst fillStyles = style<MeterStyleProps>({\n  height: 'full',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'informative',\n    variant: {\n      positive: 'positive',\n      notice: 'notice',\n      negative: 'negative'\n    },\n    staticColor: {\n      white: {\n        default: 'transparent-white-900'\n      },\n      // TODO: Is there a black static color in S2?\n      black: {\n        default: 'transparent-black-900'\n      }\n    },\n    forcedColors: 'ButtonText'\n  }\n});\n\nfunction Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n  let domRef = useDOMRef(ref);\n\n  let {\n    label,\n    size = 'M',\n    staticColor,\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    variant = 'informative',\n    labelPosition = 'top',\n    ...groupProps\n  } = props;\n\n  return (\n    <AriaMeter\n      {...groupProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({\n        size,\n        variant,\n        staticColor,\n        labelPosition\n      }, styles)}>\n      {({percentage, valueText}) => (\n        <>\n          {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n          {label && <Text styles={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</Text>}\n          <SkeletonWrapper>\n            <div className={trackStyles({staticColor, size})}>\n              <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />\n            </div>\n          </SkeletonWrapper>\n        </>\n      )}\n    </AriaMeter>\n  );\n}\n\n/**\n * Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nlet _Meter = forwardRef(Meter);\nexport {_Meter as Meter};\n"],"names":[],"version":3,"file":"Meter.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA6CM,MAAM,0DAAe,CAAA,GAAA,0BAAY,EAAyD;AAEjG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;AAwBN,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,QACL,OAAO,kBACP,WAAW,UACX,MAAM,oBACN,mBAAmB,kBACnB,YAAY,WACZ,UAAU,8BACV,gBAAgB,OAChB,GAAG,YACJ,GAAG;IAEJ,qBACE,gCAAC,CAAA,GAAA,gCAAQ;QACN,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBACpC;qBACA;yBACA;2BACA;QACF,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gCAAC,CAAA,GAAA,oCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,uBAAS,gCAAC,CAAA,GAAA,8BAAG;wBAAE,QAAQ,kCAAY;kCAAC;4BAAM,YAAY;yCAAO;wBAAW;kCAAK;;kCAC9E,gCAAC,CAAA,GAAA,yCAAc;kCACb,cAAA,gCAAC;4BAAI,WAAW,kCAAY;6CAAC;sCAAa;4BAAI;sCAC5C,cAAA,gCAAC;gCAAI,WAAW,iCAAW;iDAAC;6CAAa;gCAAO;gCAAI,OAAO;oCAAC,OAAO,aAAa;gCAAG;;;;;;;AAOjG;AAEA;;;CAGC,GACD,IAAI,0DAAS,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Meter.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 {\n  Meter as AriaMeter,\n  MeterProps as AriaMeterProps,\n  ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils'  with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {size, style} from '../style' with {type: 'macro'};\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface MeterStyleProps {\n  /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.\n   * @default 'informative'\n   */\n  variant?: 'informative' | 'positive' | 'notice' | 'negative',\n  /**\n   * The size of the Meter.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** \n   * The static color style to apply. Useful when the button appears over a color background. \n   */\n  staticColor?: 'white' | 'black',\n  /**\n   * The label's overall position relative to the element it is labeling.\n   * @default 'top'\n   */\n  labelPosition?: LabelPosition\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style'>, MeterStyleProps, StyleProps {\n  /** The content to display as the label. */\n  label?: ReactNode\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style({\n  ...bar()\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n  ...fieldLabel(),\n  gridArea: 'value'\n});\n\nconst trackStyles = style({\n  ...track(),\n  height: {\n    default: size(6),\n    size: {\n      S: 4, // progress-bar-thickness-small\n      M: size(6), // progress-bar-thickness-medium\n      L: 8, // progress-bar-thickness-large\n      XL: size(10) // progress-bar-thickness-extra-large\n    }\n  }\n});\n\nconst fillStyles = style<MeterStyleProps>({\n  height: 'full',\n  borderStyle: 'none',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'informative-visual',\n    variant: {\n      positive: 'positive-visual',\n      notice: 'notice-visual',\n      negative: 'negative-visual'\n    },\n    staticColor: {\n      white: {\n        default: 'transparent-white-900'\n      },\n      // TODO: Is there a black static color in S2?\n      black: {\n        default: 'transparent-black-900'\n      }\n    },\n    forcedColors: 'ButtonText'\n  }\n});\n\nfunction Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, MeterContext);\n  let domRef = useDOMRef(ref);\n\n  let {\n    label,\n    size = 'M',\n    staticColor,\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    variant = 'informative',\n    labelPosition = 'top',\n    ...groupProps\n  } = props;\n\n  return (\n    <AriaMeter\n      {...groupProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({\n        size,\n        variant,\n        staticColor,\n        labelPosition\n      }, styles)}>\n      {({percentage, valueText}) => (\n        <>\n          {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n          {label && <Text styles={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</Text>}\n          <SkeletonWrapper>\n            <div className={trackStyles({staticColor, size})}>\n              <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />\n            </div>\n          </SkeletonWrapper>\n        </>\n      )}\n    </AriaMeter>\n  );\n}\n\n/**\n * Meters are visual representations of a quantity or an achievement.\n * Their progress is determined by user actions, rather than system actions.\n */\nlet _Meter = forwardRef(Meter);\nexport {_Meter as Meter};\n"],"names":[],"version":3,"file":"Meter.cjs.map"}

package/dist/Meter.css

@@ -278,32 +278,20 @@
     border-end-end-radius: 9999px;
   }
 
-  .b_____E {
-    background-color: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #4069fd);
-  }
-
-  .b_____F {
-    background-color: var(--lightningcss-light, #274dea) var(--lightningcss-dark, #345bf8);
-  }
-
-  .b_____N {
-    background-color: var(--lightningcss-light, #05834e) var(--lightningcss-dark, #068850);
-  }
-
   .b_____O {
-    background-color: var(--lightningcss-light, #036e45) var(--lightningcss-dark, #047c4b);
+    background-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #5681ff);
   }
 
-  .b_____Q {
-    background-color: var(--lightningcss-light, #fc7d00) var(--lightningcss-dark, #e06400);
+  .b_____R {
+    background-color: var(--lightningcss-light, #079355) var(--lightningcss-dark, #099d59);
   }
 
-  .b_____K {
-    background-color: var(--lightningcss-light, #d73220) var(--lightningcss-dark, #df3422);
+  .b_____U {
+    background-color: var(--lightningcss-light, #d45b00) var(--lightningcss-dark, #e06400);
   }
 
-  .b_____L {
-    background-color: var(--lightningcss-light, #b72818) var(--lightningcss-dark, #cd2e1d);
+  .b_____M {
+    background-color: var(--lightningcss-light, #f03823) var(--lightningcss-dark, #fc432e);
   }
 
   .b_____f {