@react-spectrum/s2 3.0.0-nightly-4baa1b08e-241029 → 3.0.0-nightly-dcc0752f8-241031

package/dist/ComboBox.mjs

@@ -12,7 +12,7 @@ import {Popover as $88b746eba92c8d0d$export$5b6b19405a83ff9d} from "./Popover.mj
 import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressScale.mjs";
 import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
 import {jsx as $5rXoR$jsx, Fragment as $5rXoR$Fragment, jsxs as $5rXoR$jsxs} from "react/jsx-runtime";
-import {ComboBox as $5rXoR$ComboBox, InputContext as $5rXoR$InputContext, Button as $5rXoR$Button, Provider as $5rXoR$Provider, ListBox as $5rXoR$ListBox, ListBoxItem as $5rXoR$ListBoxItem, Section as $5rXoR$Section} from "react-aria-components";
+import {ComboBox as $5rXoR$ComboBox, InputContext as $5rXoR$InputContext, Button as $5rXoR$Button, Provider as $5rXoR$Provider, ListBox as $5rXoR$ListBox, ListBoxItem as $5rXoR$ListBoxItem, ListBoxSection as $5rXoR$ListBoxSection} from "react-aria-components";
 import {createContext as $5rXoR$createContext, useRef as $5rXoR$useRef, useContext as $5rXoR$useContext, useImperativeHandle as $5rXoR$useImperativeHandle, useState as $5rXoR$useState, useCallback as $5rXoR$useCallback, forwardRef as $5rXoR$forwardRef} from "react";
 import {createFocusableRef as $5rXoR$createFocusableRef} from "@react-spectrum/utils";
 import {useResizeObserver as $5rXoR$useResizeObserver, mergeRefs as $5rXoR$mergeRefs} from "@react-aria/utils";
@@ -57,32 +57,14 @@ const $a2f262fac286a920$var$inputButton = function anonymous(props) {
     rules += ' _yi';
     rules += ' _1c';
     rules += ' _2d';
-    if (props.size === "XL") {
-        rules += ' lbr';
-        rules += ' lq';
-    } else if (props.size === "L") {
-        rules += ' lbn';
-        rules += ' lm';
-    } else if (props.size === "M") {
-        rules += ' lbl';
-        rules += ' lk';
-    } else if (props.size === "S") {
-        rules += ' lbk';
-        rules += ' lj';
-    }
-    if (props.size === "XL") {
-        rules += ' kbr';
-        rules += ' kq';
-    } else if (props.size === "L") {
-        rules += ' kbn';
-        rules += ' km';
-    } else if (props.size === "M") {
-        rules += ' kbl';
-        rules += ' kk';
-    } else if (props.size === "S") {
-        rules += ' kbk';
-        rules += ' kj';
-    }
+    if (props.size === "XL") rules += ' lj';
+    else if (props.size === "L") rules += ' lh';
+    else if (props.size === "M") rules += ' lg';
+    else if (props.size === "S") rules += ' lf';
+    if (props.size === "XL") rules += ' kj';
+    else if (props.size === "L") rules += ' kh';
+    else if (props.size === "M") rules += ' kg';
+    else if (props.size === "S") rules += ' kf';
     rules += ' yF';
     rules += ' _bb';
     rules += ' _8-3t1x';
@@ -210,22 +192,11 @@ function $a2f262fac286a920$var$ComboBox(props1, ref) {
             rules += ' _1d';
             rules += ' _f-1x99dlob';
             rules += ' _fa';
-            if (props.size === "XL") {
-                rules += ' -aqrvqh_k-by';
-                rules += ' -aqrvqh_k-x';
-            } else if (props.size === "L") {
-                rules += ' -aqrvqh_k-bu';
-                rules += ' -aqrvqh_k-r';
-            } else if (props.size === "S") {
-                rules += ' -aqrvqh_k-bn';
-                rules += ' -aqrvqh_k-m';
-            } else if (props.size === "XS") {
-                rules += ' -aqrvqh_k-bl';
-                rules += ' -aqrvqh_k-k';
-            } else {
-                rules += ' -aqrvqh_k-br';
-                rules += ' -aqrvqh_k-q';
-            }
+            if (props.size === "XL") rules += ' -aqrvqh_k-n';
+            else if (props.size === "L") rules += ' -aqrvqh_k-l';
+            else if (props.size === "S") rules += ' -aqrvqh_k-h';
+            else if (props.size === "XS") rules += ' -aqrvqh_k-g';
+            else rules += ' -aqrvqh_k-j';
             rules += ' -_1inj1bc_i--prjw07';
             rules += ' je';
             rules += ' __R-yksgrp';
@@ -263,37 +234,17 @@ function $a2f262fac286a920$var$ComboBox(props1, ref) {
                                 rules += ' __b-4cfph1';
                                 rules += ' __c-4cfph1';
                                 rules += ' __d-4cfph1';
-                                if (props.size === "XL") {
-                                    rules += ' qby';
-                                    rules += ' qx';
-                                } else if (props.size === "L") {
-                                    rules += ' qbu';
-                                    rules += ' qr';
-                                } else if (props.size === "S") {
-                                    rules += ' qbn';
-                                    rules += ' qm';
-                                } else if (props.size === "XS") {
-                                    rules += ' qbl';
-                                    rules += ' qk';
-                                } else {
-                                    rules += ' qbr';
-                                    rules += ' qq';
-                                }
+                                if (props.size === "XL") rules += ' qn';
+                                else if (props.size === "L") rules += ' ql';
+                                else if (props.size === "S") rules += ' qh';
+                                else if (props.size === "XS") rules += ' qg';
+                                else rules += ' qj';
                                 if (props.isQuiet) rules += ' __ma';
                                 else rules += ' __m-1s8glxue';
-                                if (props.size === "XL") {
-                                    rules += ' -usygro_l-bV';
-                                    rules += ' -usygro_l-Q';
-                                } else if (props.size === "L") {
-                                    rules += ' -usygro_l-bU';
-                                    rules += ' -usygro_l-T';
-                                } else if (props.size === "S") {
-                                    rules += ' -usygro_l-bQ';
-                                    rules += ' -usygro_l-P';
-                                } else {
-                                    rules += ' -usygro_l-bS';
-                                    rules += ' -usygro_l-R';
-                                }
+                                if (props.size === "XL") rules += ' -usygro_l-A';
+                                else if (props.size === "L") rules += ' -usygro_l-z';
+                                else if (props.size === "S") rules += ' -usygro_l-x';
+                                else rules += ' -usygro_l-y';
                                 rules += ' m-rwozxi';
                                 rules += ' C-375tnm';
                                 rules += ' D-375tnn';
@@ -478,7 +429,7 @@ function $a2f262fac286a920$export$b674b8ff01584ab1(props) {
 function $a2f262fac286a920$export$5510125537491b61(props) {
     return /*#__PURE__*/ (0, $5rXoR$jsxs)((0, $5rXoR$Fragment), {
         children: [
-            /*#__PURE__*/ (0, $5rXoR$jsx)((0, $5rXoR$Section), {
+            /*#__PURE__*/ (0, $5rXoR$jsx)((0, $5rXoR$ListBoxSection), {
                 ...props,
                 className: (0, $13afb0ea5f0ed767$export$fe2e36411d703b3d),
                 children: props.children

package/dist/ComboBox.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/ComboBox.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  ComboBox as AriaComboBox,\n  ComboBoxProps as AriaComboBoxProps,\n  PopoverProps as AriaPopoverProps,\n  Section as AriaSection,\n  Button,\n  ContextValue,\n  InputContext,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  ListBoxProps,\n  Provider,\n  SectionProps\n} from 'react-aria-components';\nimport {baseColor, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {\n  checkmark,\n  description,\n  Divider,\n  icon,\n  iconCenterWrapper,\n  label,\n  menuitem,\n  section,\n  sectionHeader,\n  sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {createContext, CSSProperties, forwardRef, ReactNode, Ref, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {menu} from './Picker';\nimport {mergeRefs, useResizeObserver} from '@react-aria/utils';\nimport {Placement} from 'react-aria';\nimport {Popover} from './Popover';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface ComboboxStyleProps {\n  /**\n   * The size of the Combobox.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\nexport interface ComboBoxProps<T extends object> extends\n  Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection'>,\n  ComboboxStyleProps,\n  StyleProps,\n  SpectrumLabelableProps,\n  HelpTextProps,\n  Pick<ListBoxProps<T>, 'items'>,\n  Pick<AriaPopoverProps, 'shouldFlip'> {\n    /** The contents of the collection. */\n    children: ReactNode | ((item: T) => ReactNode),\n    /**\n     * Direction the menu will render relative to the Picker.\n     *\n     * @default 'bottom'\n     */\n    direction?: 'bottom' | 'top',\n    /**\n     * Alignment of the menu relative to the input target.\n     *\n     * @default 'start'\n     */\n    align?: 'start' | 'end',\n    /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n    menuWidth?: number\n}\n\nexport const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);\n\nconst inputButton = style({\n  display: 'flex',\n  outlineStyle: 'none',\n  textAlign: 'center',\n  borderStyle: 'none',\n  borderRadius: 'control-sm',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32\n    }\n  },\n  marginStart: 'text-to-control',\n  aspectRatio: 'square',\n  flexShrink: 0,\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isOpen: 'gray-200',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isOpen: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace'\n    }\n  }\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: 90,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nlet InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\n\nfunction ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useRef<HTMLDivElement>(null);\n  let buttonRef = useRef<HTMLButtonElement>(null);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    direction = 'bottom',\n    align = 'start',\n    shouldFlip = true,\n    menuWidth,\n    label,\n    description: descriptionMessage,\n    errorMessage,\n    children,\n    items,\n    size = 'M',\n    labelPosition = 'top',\n    labelAlign = 'start',\n    necessityIndicator,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    ...pickerProps\n  } = props;\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  // Better way to encode this into a style? need to account for flipping\n  let menuOffset: number;\n  if (size === 'S') {\n    menuOffset = 6;\n  } else if (size === 'M') {\n    menuOffset = 6;\n  } else if (size === 'L') {\n    menuOffset = 7;\n  } else {\n    menuOffset = 8;\n  }\n\n  let triggerRef = useRef<HTMLDivElement>(null);\n   // Make menu width match input + button\n  let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n  let onResize = useCallback(() => {\n    if (triggerRef.current) {\n      let inputRect = triggerRef.current.getBoundingClientRect();\n      let minX = inputRect.left;\n      let maxX = inputRect.right;\n      setTriggerWidth((maxX - minX) + 'px');\n    }\n  }, [triggerRef, setTriggerWidth]);\n\n  useResizeObserver({\n    ref: triggerRef,\n    onResize: onResize\n  });\n\n  return (\n    <AriaComboBox\n      {...pickerProps}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {({isDisabled, isOpen, isRequired, isInvalid}) => (\n        <>\n          <InternalComboboxContext.Provider value={{size}}>\n            <FieldLabel\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              size={size}\n              labelPosition={labelPosition}\n              labelAlign={labelAlign}\n              necessityIndicator={necessityIndicator}\n              contextualHelp={props.contextualHelp}>\n              {label}\n            </FieldLabel>\n            <FieldGroup\n              ref={triggerRef}\n              role=\"presentation\"\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              size={size}\n              styles={style({\n                ...fieldInput(),\n                paddingStart: 'edge-to-text',\n                // better way to do this one? it's not actually half, they are\n                // [9, 4], [12, 6], [15, 8], [18, 8]\n                // also noticed that our measurement is including the border, making the padding too much\n                paddingEnd: '[calc(self(height, self(minHeight)) * 3 / 16)]'\n              })({size})}>\n              <InputContext.Consumer>\n                {ctx => (\n                  <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                    <Input />\n                  </InputContext.Provider>\n                )}\n              </InputContext.Consumer>\n              {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n              <Button\n                ref={buttonRef}\n                // Prevent press scale from sticking while ComboBox is open.\n                // @ts-ignore\n                isPressed={false}\n                style={renderProps => pressScale(buttonRef)(renderProps)}\n                className={renderProps => inputButton({\n                  ...renderProps,\n                  size,\n                  isOpen\n                })}>\n                <ChevronIcon\n                  size={size}\n                  className={iconStyles} />\n              </Button>\n            </FieldGroup>\n            <HelpText\n              size={size}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              description={descriptionMessage}>\n              {errorMessage}\n            </HelpText>\n            <Popover\n              hideArrow\n              triggerRef={triggerRef}\n              offset={menuOffset}\n              placement={`${direction} ${align}` as Placement}\n              shouldFlip={shouldFlip}\n              UNSAFE_style={{\n                width: menuWidth ? `${menuWidth}px` : undefined,\n                // manually subtract border as we can't set Popover to border-box, it causes the contents to spill out\n                '--trigger-width': `calc(${triggerWidth} - 2px)`\n              } as CSSProperties}\n              styles={style({\n                minWidth: '[var(--trigger-width)]',\n                width: '[var(--trigger-width)]'\n              })}>\n              <Provider\n                values={[\n                  [HeaderContext, {styles: sectionHeader({size})}],\n                  [HeadingContext, {styles: sectionHeading}],\n                  [TextContext, {\n                    slots: {\n                      'description': {styles: description({size})}\n                    }\n                  }]\n                ]}>\n                <ListBox\n                  items={items}\n                  className={menu({size})}>\n                  {children}\n                </ListBox>\n              </Provider>\n            </Popover>\n          </InternalComboboxContext.Provider>\n        </>\n      )}\n    </AriaComboBox>\n  );\n}\n\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nlet _ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(ComboBox);\nexport {_ComboBox as ComboBox};\n\n\nexport interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n  children: ReactNode\n}\n\nconst checkmarkIconSize = {\n  S: 'XS',\n  M: 'M',\n  L: 'L',\n  XL: 'XL'\n} as const;\n\nexport function ComboBoxItem(props: ComboBoxItemProps) {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  let {size} = useContext(InternalComboboxContext);\n  return (\n    <ListBoxItem\n      {...props}\n      ref={ref}\n      textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n      style={pressScale(ref, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n      {(renderProps) => {\n        let {children} = props;\n        return (\n          <>\n            <Provider\n              values={[\n                [IconContext, {\n                  slots: {\n                    icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n                  }\n                }],\n                [TextContext, {\n                  slots: {\n                    label: {styles: label({size})},\n                    description: {styles: description({...renderProps, size})}\n                  }\n                }]\n              ]}>\n              {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n              {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n            </Provider>\n          </>\n        );\n      }}\n    </ListBoxItem>\n  );\n}\n\nexport interface ComboBoxSectionProps<T extends object> extends SectionProps<T> {}\nexport function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>) {\n  return (\n    <>\n      <AriaSection\n        {...props}\n        className={section}>\n        {props.children}\n      </AriaSection>\n      <Divider />\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"ComboBox.mjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;;;AAqFM,MAAM,0DAAkB,CAAA,GAAA,oBAAY,EAA2D;AAEtG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CN,MAAM;AASN,IAAI,8DAA0B,CAAA,GAAA,oBAAY,EAAkC;IAAC,MAAM;AAAG;AAEtF,SAAS,+BAA2B,MAAuB,EAAE,GAAsB;IACjF,CAAC,QAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,QAAO,KAAK;IACnD,IAAI,WAAW,CAAA,GAAA,aAAK,EAAoB;IACxC,IAAI,SAAS,CAAA,GAAA,aAAK,EAAkB;IACpC,IAAI,YAAY,CAAA,GAAA,aAAK,EAAqB;IAC1C,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACvC,SAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,aACF,YAAY,iBACZ,QAAQ,qBACR,aAAa,iBACb,SAAS,SACT,KAAK,EACL,aAAa,kBAAkB,gBAC/B,YAAY,YACZ,QAAQ,SACR,KAAK,QACL,OAAO,oBACP,gBAAgB,mBAChB,aAAa,6BACb,kBAAkB,oBAClB,mBAAmB,kBACnB,YAAY,EACZ,GAAG,aACJ,GAAG;IAEJ,sCAAsC;IACtC,CAAA,GAAA,0BAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,yBAAiB,EAAE,QAAQ,SAAS;YACvC;gBACE,IAAI,SAAS,OAAO,EAClB,SAAS,OAAO,CAAC,MAAM;YAE3B;YACA;gBACE,OAAO,SAAS,OAAO;YACzB;QACF,CAAA;IAEA,uEAAuE;IACvE,IAAI;IACJ,IAAI,SAAS,KACX,aAAa;SACR,IAAI,SAAS,KAClB,aAAa;SACR,IAAI,SAAS,KAClB,aAAa;SAEb,aAAa;IAGf,IAAI,aAAa,CAAA,GAAA,aAAK,EAAkB;IACvC,uCAAuC;IACxC,IAAI,CAAC,cAAc,gBAAgB,GAAG,CAAA,GAAA,eAAO,EAAiB;IAC9D,IAAI,WAAW,CAAA,GAAA,kBAAU,EAAE;QACzB,IAAI,WAAW,OAAO,EAAE;YACtB,IAAI,YAAY,WAAW,OAAO,CAAC,qBAAqB;YACxD,IAAI,OAAO,UAAU,IAAI;YACzB,IAAI,OAAO,UAAU,KAAK;YAC1B,gBAAgB,AAAC,OAAO,OAAQ;QAClC;IACF,GAAG;QAAC;QAAY;KAAgB;IAEhC,CAAA,GAAA,wBAAgB,EAAE;QAChB,KAAK;QACL,UAAU;IACZ;IAEA,qBACE,gBAAC,CAAA,GAAA,eAAW;QACT,GAAG,WAAW;QACf,OAAO;QACP,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAAsC;YAClE,UAAU,CAAC,CAAC;2BACZ;kBACA;QACF,GAAG,OAAM,MAAM;kBACd,CAAC,cAAC,UAAU,UAAE,MAAM,cAAE,UAAU,aAAE,SAAS,EAAC,iBAC3C;0BACE,cAAA,iBAAC,8CAAwB,QAAQ;oBAAC,OAAO;8BAAC;oBAAI;;sCAC5C,gBAAC,CAAA,GAAA,yCAAS;4BACR,YAAY;4BACZ,YAAY;4BACZ,MAAM;4BACN,eAAe;4BACf,YAAY;4BACZ,oBAAoB;4BACpB,gBAAgB,OAAM,cAAc;sCACnC;;sCAEH,iBAAC,CAAA,GAAA,yCAAS;4BACR,KAAK;4BACL,MAAK;4BACL,YAAY;4BACZ,WAAW;4BACX,MAAM;4BACN,QAAQ;;;;;;;;;;;;;;;;;;;;;;;8BAOL;sCAAC;4BAAI;;8CACR,gBAAC,CAAA,GAAA,mBAAW,EAAE,QAAQ;8CACnB,CAAA,oBACC,gBAAC,CAAA,GAAA,mBAAW,EAAE,QAAQ;4CAAC,OAAO;gDAAC,GAAG,GAAG;gDAAE,KAAK,CAAA,GAAA,gBAAQ,EAAG,KAAa,KAAK;4CAAS;sDAChF,cAAA,gBAAC,CAAA,GAAA,yCAAI;;;gCAIV,2BAAa,gBAAC,CAAA,GAAA,yCAAa;oCAAE,YAAY;;8CAC1C,gBAAC,CAAA,GAAA,aAAK;oCACJ,KAAK;oCACL,4DAA4D;oCAC5D,aAAa;oCACb,WAAW;oCACX,OAAO,CAAA,cAAe,CAAA,GAAA,yCAAS,EAAE,WAAW;oCAC5C,WAAW,CAAA,cAAe,kCAAY;4CACpC,GAAG,WAAW;kDACd;oDACA;wCACF;8CACA,cAAA,gBAAC,CAAA,GAAA,wCAAU;wCACT,MAAM;wCACN,WAAW;;;;;sCAGjB,gBAAC,CAAA,GAAA,yCAAO;4BACN,MAAM;4BACN,YAAY;4BACZ,WAAW;4BACX,aAAa;sCACZ;;sCAEH,gBAAC,CAAA,GAAA,yCAAM;4BACL,SAAS;4BACT,YAAY;4BACZ,QAAQ;4BACR,WAAW,CAAC,EAAE,UAAU,CAAC,EAAE,MAAM,CAAC;4BAClC,YAAY;4BACZ,cAAc;gCACZ,OAAO,YAAY,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG;gCACtC,sGAAsG;gCACtG,mBAAmB,CAAC,KAAK,EAAE,aAAa,OAAO,CAAC;4BAClD;4BACA,MAAM;sCAIN,cAAA,gBAAC,CAAA,GAAA,eAAO;gCACN,QAAQ;oCACN;wCAAC,CAAA,GAAA,yCAAY;wCAAG;4CAAC,QAAQ,CAAA,GAAA,yCAAY,EAAE;sDAAC;4CAAI;wCAAE;qCAAE;oCAChD;wCAAC,CAAA,GAAA,yCAAa;wCAAG;4CAAC,QAAQ,CAAA,GAAA,yCAAa;wCAAC;qCAAE;oCAC1C;wCAAC,CAAA,GAAA,yCAAU;wCAAG;4CACZ,OAAO;gDACL,eAAe;oDAAC,QAAQ,CAAA,GAAA,yCAAU,EAAE;8DAAC;oDAAI;gDAAE;4CAC7C;wCACF;qCAAE;iCACH;0CACD,cAAA,gBAAC,CAAA,GAAA,cAAM;oCACL,OAAO;oCACP,WAAW,CAAA,GAAA,yCAAG,EAAE;8CAAC;oCAAI;8CACpB;;;;;;;;AASnB;AAEA;;CAEC,GACD,IAAI,4CAA0B,AAAd,WAAW,GAAI,CAAA,GAAA,iBAAS,EAAqB;AAQ7D,MAAM,0CAAoB;IACxB,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;AACN;AAEO,SAAS,0CAAa,KAAwB;IACnD,IAAI,MAAM,CAAA,GAAA,aAAK,EAAE;IACjB,IAAI,SAAS,MAAM,IAAI,IAAI;IAC3B,IAAI,QAAC,IAAI,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE;IACxB,qBACE,gBAAC,CAAA,GAAA,kBAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,WAAW,MAAM,SAAS,IAAK,CAAA,OAAO,MAAM,QAAQ,KAAK,WAAW,MAAM,QAAQ,GAAa,SAAQ;QACvG,OAAO,CAAA,GAAA,yCAAS,EAAE,KAAK,MAAM,YAAY;QACzC,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,CAAA,GAAA,yCAAO,EAAE;gBAAC,GAAG,WAAW;sBAAE;wBAAM;YAAM,GAAG,MAAM,MAAM;kBAC/G,CAAC;YACA,IAAI,YAAC,QAAQ,EAAC,GAAG;YACjB,qBACE;0BACE,cAAA,iBAAC,CAAA,GAAA,eAAO;oBACN,QAAQ;wBACN;4BAAC,CAAA,GAAA,yCAAU;4BAAG;gCACZ,OAAO;oCACL,MAAM;wCAAC,QAAQ,CAAA,GAAA,yCAAa,EAAE;4CAAC,MAAM;4CAAQ,QAAQ,CAAA,GAAA,yCAAgB;wCAAC;wCAAI,QAAQ,CAAA,GAAA,yCAAG;oCAAC;gCACxF;4BACF;yBAAE;wBACF;4BAAC,CAAA,GAAA,yCAAU;4BAAG;gCACZ,OAAO;oCACL,OAAO;wCAAC,QAAQ,CAAA,GAAA,yCAAI,EAAE;kDAAC;wCAAI;oCAAE;oCAC7B,aAAa;wCAAC,QAAQ,CAAA,GAAA,yCAAU,EAAE;4CAAC,GAAG,WAAW;kDAAE;wCAAI;oCAAE;gCAC3D;4BACF;yBAAE;qBACH;;wBACA,CAAC,wBAAU,gBAAC,CAAA,GAAA,wCAAY;4BAAE,MAAM,uCAAiB,CAAC,KAAK;4BAAE,WAAW,CAAA,GAAA,wCAAQ,EAAE;gCAAC,GAAG,WAAW;sCAAE;4BAAI;;wBACnG,OAAO,aAAa,yBAAW,gBAAC,CAAA,GAAA,yCAAG;4BAAE,MAAK;sCAAS;6BAAmB;;;;QAI/E;;AAGN;AAGO,SAAS,0CAAkC,KAA8B;IAC9E,qBACE;;0BACE,gBAAC,CAAA,GAAA,qBAAiB;gBACf,GAAG,KAAK;gBACT,WAAW,CAAA,GAAA,yCAAM;0BAChB,MAAM,QAAQ;;0BAEjB,gBAAC,CAAA,GAAA,yCAAM;;;AAGb","sources":["packages/@react-spectrum/s2/src/ComboBox.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  ComboBox as AriaComboBox,\n  ComboBoxProps as AriaComboBoxProps,\n  ListBoxSection as AriaListBoxSection,\n  PopoverProps as AriaPopoverProps,\n  Button,\n  ContextValue,\n  InputContext,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  ListBoxProps,\n  Provider,\n  SectionProps\n} from 'react-aria-components';\nimport {baseColor, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {\n  checkmark,\n  description,\n  Divider,\n  icon,\n  iconCenterWrapper,\n  label,\n  menuitem,\n  section,\n  sectionHeader,\n  sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {createContext, CSSProperties, forwardRef, ReactNode, Ref, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {menu} from './Picker';\nimport {mergeRefs, useResizeObserver} from '@react-aria/utils';\nimport {Placement} from 'react-aria';\nimport {Popover} from './Popover';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface ComboboxStyleProps {\n  /**\n   * The size of the Combobox.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\nexport interface ComboBoxProps<T extends object> extends\n  Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection'>,\n  ComboboxStyleProps,\n  StyleProps,\n  SpectrumLabelableProps,\n  HelpTextProps,\n  Pick<ListBoxProps<T>, 'items'>,\n  Pick<AriaPopoverProps, 'shouldFlip'> {\n    /** The contents of the collection. */\n    children: ReactNode | ((item: T) => ReactNode),\n    /**\n     * Direction the menu will render relative to the Picker.\n     *\n     * @default 'bottom'\n     */\n    direction?: 'bottom' | 'top',\n    /**\n     * Alignment of the menu relative to the input target.\n     *\n     * @default 'start'\n     */\n    align?: 'start' | 'end',\n    /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n    menuWidth?: number\n}\n\nexport const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);\n\nconst inputButton = style({\n  display: 'flex',\n  outlineStyle: 'none',\n  textAlign: 'center',\n  borderStyle: 'none',\n  borderRadius: 'control-sm',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32\n    }\n  },\n  marginStart: 'text-to-control',\n  aspectRatio: 'square',\n  flexShrink: 0,\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isOpen: 'gray-200',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isOpen: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace'\n    }\n  }\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: 90,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nlet InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\n\nfunction ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useRef<HTMLDivElement>(null);\n  let buttonRef = useRef<HTMLButtonElement>(null);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    direction = 'bottom',\n    align = 'start',\n    shouldFlip = true,\n    menuWidth,\n    label,\n    description: descriptionMessage,\n    errorMessage,\n    children,\n    items,\n    size = 'M',\n    labelPosition = 'top',\n    labelAlign = 'start',\n    necessityIndicator,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    ...pickerProps\n  } = props;\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n  // Better way to encode this into a style? need to account for flipping\n  let menuOffset: number;\n  if (size === 'S') {\n    menuOffset = 6;\n  } else if (size === 'M') {\n    menuOffset = 6;\n  } else if (size === 'L') {\n    menuOffset = 7;\n  } else {\n    menuOffset = 8;\n  }\n\n  let triggerRef = useRef<HTMLDivElement>(null);\n   // Make menu width match input + button\n  let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n  let onResize = useCallback(() => {\n    if (triggerRef.current) {\n      let inputRect = triggerRef.current.getBoundingClientRect();\n      let minX = inputRect.left;\n      let maxX = inputRect.right;\n      setTriggerWidth((maxX - minX) + 'px');\n    }\n  }, [triggerRef, setTriggerWidth]);\n\n  useResizeObserver({\n    ref: triggerRef,\n    onResize: onResize\n  });\n\n  return (\n    <AriaComboBox\n      {...pickerProps}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {({isDisabled, isOpen, isRequired, isInvalid}) => (\n        <>\n          <InternalComboboxContext.Provider value={{size}}>\n            <FieldLabel\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              size={size}\n              labelPosition={labelPosition}\n              labelAlign={labelAlign}\n              necessityIndicator={necessityIndicator}\n              contextualHelp={props.contextualHelp}>\n              {label}\n            </FieldLabel>\n            <FieldGroup\n              ref={triggerRef}\n              role=\"presentation\"\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              size={size}\n              styles={style({\n                ...fieldInput(),\n                paddingStart: 'edge-to-text',\n                // better way to do this one? it's not actually half, they are\n                // [9, 4], [12, 6], [15, 8], [18, 8]\n                // also noticed that our measurement is including the border, making the padding too much\n                paddingEnd: '[calc(self(height, self(minHeight)) * 3 / 16)]'\n              })({size})}>\n              <InputContext.Consumer>\n                {ctx => (\n                  <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                    <Input />\n                  </InputContext.Provider>\n                )}\n              </InputContext.Consumer>\n              {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n              <Button\n                ref={buttonRef}\n                // Prevent press scale from sticking while ComboBox is open.\n                // @ts-ignore\n                isPressed={false}\n                style={renderProps => pressScale(buttonRef)(renderProps)}\n                className={renderProps => inputButton({\n                  ...renderProps,\n                  size,\n                  isOpen\n                })}>\n                <ChevronIcon\n                  size={size}\n                  className={iconStyles} />\n              </Button>\n            </FieldGroup>\n            <HelpText\n              size={size}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              description={descriptionMessage}>\n              {errorMessage}\n            </HelpText>\n            <Popover\n              hideArrow\n              triggerRef={triggerRef}\n              offset={menuOffset}\n              placement={`${direction} ${align}` as Placement}\n              shouldFlip={shouldFlip}\n              UNSAFE_style={{\n                width: menuWidth ? `${menuWidth}px` : undefined,\n                // manually subtract border as we can't set Popover to border-box, it causes the contents to spill out\n                '--trigger-width': `calc(${triggerWidth} - 2px)`\n              } as CSSProperties}\n              styles={style({\n                minWidth: '[var(--trigger-width)]',\n                width: '[var(--trigger-width)]'\n              })}>\n              <Provider\n                values={[\n                  [HeaderContext, {styles: sectionHeader({size})}],\n                  [HeadingContext, {styles: sectionHeading}],\n                  [TextContext, {\n                    slots: {\n                      'description': {styles: description({size})}\n                    }\n                  }]\n                ]}>\n                <ListBox\n                  items={items}\n                  className={menu({size})}>\n                  {children}\n                </ListBox>\n              </Provider>\n            </Popover>\n          </InternalComboboxContext.Provider>\n        </>\n      )}\n    </AriaComboBox>\n  );\n}\n\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nlet _ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(ComboBox);\nexport {_ComboBox as ComboBox};\n\n\nexport interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n  children: ReactNode\n}\n\nconst checkmarkIconSize = {\n  S: 'XS',\n  M: 'M',\n  L: 'L',\n  XL: 'XL'\n} as const;\n\nexport function ComboBoxItem(props: ComboBoxItemProps) {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  let {size} = useContext(InternalComboboxContext);\n  return (\n    <ListBoxItem\n      {...props}\n      ref={ref}\n      textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n      style={pressScale(ref, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n      {(renderProps) => {\n        let {children} = props;\n        return (\n          <>\n            <Provider\n              values={[\n                [IconContext, {\n                  slots: {\n                    icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n                  }\n                }],\n                [TextContext, {\n                  slots: {\n                    label: {styles: label({size})},\n                    description: {styles: description({...renderProps, size})}\n                  }\n                }]\n              ]}>\n              {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n              {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n            </Provider>\n          </>\n        );\n      }}\n    </ListBoxItem>\n  );\n}\n\nexport interface ComboBoxSectionProps<T extends object> extends SectionProps<T> {}\nexport function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>) {\n  return (\n    <>\n      <AriaListBoxSection\n        {...props}\n        className={section}>\n        {props.children}\n      </AriaListBoxSection>\n      <Divider />\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"ComboBox.mjs.map"}

package/dist/ContextualHelp.cjs

@@ -96,7 +96,7 @@ function $bab829476f85a155$var$ContextualHelp(props, ref) {
                             [
                                 (0, $6367bc87eb7d24ad$exports.HeadingContext),
                                 {
-                                    styles: " . _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _di _dbj _ee _e-1x99dloe _fa _f-1x99dlob ao Aa B-y6pz8c Bb-8hx8xw ya za"
+                                    styles: " . _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _di _dbj _ee _e-1x99dloe _fa _f-1x99dlob ao Aa B-1ya11p4 ya za"
                                 }
                             ],
                             [

package/dist/ContextualHelp.css

@@ -61,8 +61,8 @@
     margin-top: 0;
   }
 
-  .B-y6pz8c {
-    margin-bottom: .5rem;
+  .B-1ya11p4 {
+    margin-bottom: calc(.5rem * var(--s2-scale));
   }
 
   .ya {
@@ -164,10 +164,6 @@
       font-size: 1.375rem;
     }
 
-    .Bb-8hx8xw {
-      margin-bottom: .625rem;
-    }
-
     ._dbf {
       font-size: 1.0625rem;
     }

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;;;;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;;;;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"}

package/dist/ContextualHelp.mjs

@@ -89,7 +89,7 @@ function $8e176595bc49ca3f$var$ContextualHelp(props, ref) {
                             [
                                 (0, $8e847109a6ab556d$export$d688439359537581),
                                 {
-                                    styles: " . _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _di _dbj _ee _e-1x99dloe _fa _f-1x99dlob ao Aa B-y6pz8c Bb-8hx8xw ya za"
+                                    styles: " . _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _di _dbj _ee _e-1x99dloe _fa _f-1x99dlob ao Aa B-1ya11p4 ya za"
                                 }
                             ],
                             [

package/dist/Dialog.cjs

@@ -46,7 +46,7 @@ $parcel$export(module.exports, "dialogInner", () => $0f4636c7093b9233$export$6af
 
 
 
-const $0f4636c7093b9233$var$image = " . l4 k-37m3s2 __Nb";
+const $0f4636c7093b9233$var$image = " . lG k-37m3s2 __Nb";
 const $0f4636c7093b9233$var$heading = " . _9-3t1y Aa Ba _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _dj _dbm _ee _e-1x99dloe _fa _f-1x99dlob ao";
 const $0f4636c7093b9233$var$header = " . _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _di _dbj _eb _fb _f-1x99dloc an";
 const $0f4636c7093b9233$var$content = function anonymous(props) {
@@ -76,7 +76,7 @@ const $0f4636c7093b9233$var$content = function anonymous(props) {
     return rules;
 };
 const $0f4636c7093b9233$var$footer = " . _9-3t1y _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _dg _dbh _eb _fb _f-1x99dloc an";
-const $0f4636c7093b9233$var$buttonGroup = " . y_d r4";
+const $0f4636c7093b9233$var$buttonGroup = " . y_d rG";
 const $0f4636c7093b9233$export$8b93a07348a7730c = /*#__PURE__*/ (0, $WjfVF$react.createContext)({
     type: 'modal',
     isDismissable: false,

package/dist/Dialog.css

@@ -1,5 +1,5 @@
 @layer _.a {
-  .l4 {
+  .lG {
     width: 100%;
   }
 
@@ -67,7 +67,7 @@
     margin-inline-start: auto;
   }
 
-  .r4 {
+  .rG {
     max-width: 100%;
   }
 

package/dist/Dialog.mjs

@@ -38,7 +38,7 @@ function $parcel$interopDefault(a) {
 
 
 
-const $9bbc115952dac5a6$var$image = " . l4 k-37m3s2 __Nb";
+const $9bbc115952dac5a6$var$image = " . lG k-37m3s2 __Nb";
 const $9bbc115952dac5a6$var$heading = " . _9-3t1y Aa Ba _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _dj _dbm _ee _e-1x99dloe _fa _f-1x99dlob ao";
 const $9bbc115952dac5a6$var$header = " . _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _di _dbj _eb _fb _f-1x99dloc an";
 const $9bbc115952dac5a6$var$content = function anonymous(props) {
@@ -68,7 +68,7 @@ const $9bbc115952dac5a6$var$content = function anonymous(props) {
     return rules;
 };
 const $9bbc115952dac5a6$var$footer = " . _9-3t1y _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _dg _dbh _eb _fb _f-1x99dloc an";
-const $9bbc115952dac5a6$var$buttonGroup = " . y_d r4";
+const $9bbc115952dac5a6$var$buttonGroup = " . y_d rG";
 const $9bbc115952dac5a6$export$8b93a07348a7730c = /*#__PURE__*/ (0, $9Rtwv$createContext)({
     type: 'modal',
     isDismissable: false,

package/dist/Disclosure.cjs

@@ -58,10 +58,7 @@ const $4e301a98f0cc4e4f$var$disclosure = function anonymous(props, overrides) {
     rules += ' ta';
     rules += ' wa';
     rules += ' ch';
-    if (!$q) {
-        rules += ' qb-z005a2';
-        rules += ' q-ffvo8f';
-    }
+    if (!$q) rules += ' q-1efr0vf';
     return rules;
 };
 function $4e301a98f0cc4e4f$var$Disclosure(props, ref) {
@@ -144,7 +141,7 @@ const $4e301a98f0cc4e4f$var$buttonStyles = function anonymous(props) {
     rules += ' i-10cd9hn';
     rules += ' j-10cd9hn';
     rules += ' o-375tou';
-    rules += ' l4';
+    rules += ' lG';
     if (props.isPressed) rules += ' b-mufwl5';
     else if (props.isHovered) rules += ' b-1tgz9bq';
     else if (props.isFocusVisible) rules += ' b-1tgz9bq';
@@ -171,49 +168,21 @@ const $4e301a98f0cc4e4f$var$buttonStyles = function anonymous(props) {
     rules += ' _ja';
     rules += ' __R-yksgrp';
     if (props.size === "XL") {
-        if (props.density === "spacious") {
-            rules += ' -_375tou_o-bC';
-            rules += ' -_375tou_o-B';
-        } else if (props.density === "regular") {
-            rules += ' -_375tou_o-bA';
-            rules += ' -_375tou_o-z';
-        } else if (props.density === "compact") {
-            rules += ' -_375tou_o-by';
-            rules += ' -_375tou_o-x';
-        }
+        if (props.density === "spacious") rules += ' -_375tou_o-p';
+        else if (props.density === "regular") rules += ' -_375tou_o-o';
+        else if (props.density === "compact") rules += ' -_375tou_o-n';
     } else if (props.size === "L") {
-        if (props.density === "spacious") {
-            rules += ' -_375tou_o-bA';
-            rules += ' -_375tou_o-z';
-        } else if (props.density === "regular") {
-            rules += ' -_375tou_o-by';
-            rules += ' -_375tou_o-x';
-        } else if (props.density === "compact") {
-            rules += ' -_375tou_o-bu';
-            rules += ' -_375tou_o-r';
-        }
+        if (props.density === "spacious") rules += ' -_375tou_o-o';
+        else if (props.density === "regular") rules += ' -_375tou_o-n';
+        else if (props.density === "compact") rules += ' -_375tou_o-l';
     } else if (props.size === "M") {
-        if (props.density === "spacious") {
-            rules += ' -_375tou_o-by';
-            rules += ' -_375tou_o-x';
-        } else if (props.density === "regular") {
-            rules += ' -_375tou_o-bu';
-            rules += ' -_375tou_o-r';
-        } else if (props.density === "compact") {
-            rules += ' -_375tou_o-br';
-            rules += ' -_375tou_o-q';
-        }
+        if (props.density === "spacious") rules += ' -_375tou_o-n';
+        else if (props.density === "regular") rules += ' -_375tou_o-l';
+        else if (props.density === "compact") rules += ' -_375tou_o-j';
     } else if (props.size === "S") {
-        if (props.density === "spacious") {
-            rules += ' -_375tou_o-bu';
-            rules += ' -_375tou_o-r';
-        } else if (props.density === "regular") {
-            rules += ' -_375tou_o-br';
-            rules += ' -_375tou_o-q';
-        } else if (props.density === "compact") {
-            rules += ' -_375tou_o-bn';
-            rules += ' -_375tou_o-m';
-        }
+        if (props.density === "spacious") rules += ' -_375tou_o-l';
+        else if (props.density === "regular") rules += ' -_375tou_o-j';
+        else if (props.density === "compact") rules += ' -_375tou_o-h';
     }
     rules += ' -_375tp0_u-a';
     rules += ' -_375tp1_v-a';
@@ -332,24 +301,16 @@ const $4e301a98f0cc4e4f$var$panelStyles = function anonymous(props) {
     if (props.isExpanded) rules += ' Ed';
     if (props.isExpanded) rules += ' Ff';
     if (props.isExpanded) {
-        if (props.size === "XL") {
-            rules += ' Cb-yk4pb9';
-            rules += ' C-1p15uv3';
-        } else if (props.size === "L") rules += ' Ce';
-        else if (props.size === "M") {
-            rules += ' Cb-1itkwgp';
-            rules += ' C-1ch0ogp';
-        } else if (props.size === "S") rules += ' Cd';
+        if (props.size === "XL") rules += ' C-wukrgb';
+        else if (props.size === "L") rules += ' Ce';
+        else if (props.size === "M") rules += ' C-1dtpt05';
+        else if (props.size === "S") rules += ' Cd';
     }
     if (props.isExpanded) {
-        if (props.size === "XL") {
-            rules += ' Db-yk4pb9';
-            rules += ' D-1p15uv3';
-        } else if (props.size === "L") rules += ' De';
-        else if (props.size === "M") {
-            rules += ' Db-1itkwgp';
-            rules += ' D-1ch0ogp';
-        } else if (props.size === "S") rules += ' Dd';
+        if (props.size === "XL") rules += ' D-wukrgb';
+        else if (props.size === "L") rules += ' De';
+        else if (props.size === "M") rules += ' D-1dtpt05';
+        else if (props.size === "S") rules += ' Dd';
     }
     return rules;
 };

package/dist/Disclosure.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Disclosure.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButtonContext} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, forwardRefType} from '@react-types/shared';\nimport {Button, ContextValue, DisclosureStateContext, Heading, Provider, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel, DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps, useLocale, useSlottedContext} from 'react-aria-components';\nimport {CenterBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with { type: 'macro' };\nimport Chevron from '../ui-icons/Chevron';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {focusRing, lightDark, size as sizeValue, style} from '../style' with { type: 'macro' };\nimport React, {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DisclosureProps extends Omit<RACDisclosureProps, 'className' | 'style' | 'children'>, StyleProps {\n  /**\n   * The size of the disclosure.\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The amount of space between the disclosures.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /** Whether the disclosure should be displayed with a quiet style. */\n  isQuiet?: boolean,\n  /** The contents of the disclosure, consisting of an DisclosureHeader and DisclosurePanel. */\n  children: ReactNode\n}\n\nexport const DisclosureContext = createContext<ContextValue<Omit<DisclosureProps, 'children'>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst disclosure = style({\n  color: 'heading',\n  borderTopWidth: {\n    default: 1,\n    isQuiet: 0\n  },\n  borderBottomWidth: {\n    default: 1,\n    isQuiet: 0,\n    isInGroup: {\n      default: 0,\n      ':last-child': {\n        default: 1,\n        isQuiet: 0\n      }\n    }\n  },\n  borderStartWidth: 0,\n  borderEndWidth: 0,\n  borderStyle: 'solid',\n  borderColor: 'gray-200',\n  minWidth: sizeValue(200)\n}, getAllowedOverrides());\n\nfunction Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, DisclosureContext);\n  let {\n    size = 'M',\n    density = 'regular',\n    isQuiet,\n    UNSAFE_style,\n    UNSAFE_className = ''\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let isInGroup = useContext(DisclosureContext) !== null;\n\n  return (\n    <Provider\n      values={[\n        [DisclosureContext, {size, isQuiet, density}]\n      ]}>\n      <RACDisclosure\n        {...props}\n        ref={domRef}\n        style={UNSAFE_style}\n        className={(UNSAFE_className ?? '') + disclosure({isQuiet, isInGroup}, props.styles)}>\n        {props.children}\n      </RACDisclosure>\n    </Provider>\n  );\n}\n\n/**\n * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.\n */\nlet _Disclosure = forwardRef(Disclosure);\nexport {_Disclosure as Disclosure};\n\nexport interface DisclosureTitleProps extends UnsafeStyles, DOMProps {\n  /** The heading level of the disclosure header.\n   * \n   * @default 3\n   */\n  level?: number,\n  /** The contents of the disclosure header. */\n  children: React.ReactNode\n}\n\ninterface DisclosureHeaderProps extends UnsafeStyles, DOMProps {\n  children: React.ReactNode\n}\n\nconst headingStyle = style({\n  margin: 0,\n  flexGrow: 1\n});\n\nconst buttonStyles = style({\n  ...focusRing(),\n  outlineOffset: -2,\n  font: 'heading',\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  fontWeight: 'bold',\n  fontSize: {\n    size: {\n      S: 'heading-xs',\n      M: 'heading-sm',\n      L: 'heading',\n      XL: 'heading-lg'\n    }\n  },\n  lineHeight: 'ui',\n  display: 'flex',\n  alignItems: 'baseline',\n  paddingX: '[calc(self(minHeight) * 3/8 - 1px)]',\n  paddingY: centerPadding(),\n  gap: '[calc(self(minHeight) * 3/8 - 1px)]',\n  minHeight: {\n    // compact is equivalent to 'control', but other densities have more padding.\n    size: {\n      S: {\n        density: {\n          compact: 24,\n          regular: 32,\n          spacious: 40\n        }\n      },\n      M: {\n        density: {\n          compact: 32,\n          regular: 40,\n          spacious: 48\n        }\n      },\n      L: {\n        density: {\n          compact: 40,\n          regular: 48,\n          spacious: 56\n        }\n      },\n      XL: {\n        density: {\n          compact: 48,\n          regular: 56,\n          spacious: 64\n        }\n      }\n    }\n  },\n  width: 'full',\n  backgroundColor: {\n    default: 'transparent',\n    isFocusVisible: lightDark('transparent-black-100', 'transparent-white-100'),\n    isHovered: lightDark('transparent-black-100', 'transparent-white-100'),\n    isPressed: lightDark('transparent-black-300', 'transparent-white-300')\n  },\n  transition: 'default',\n  borderWidth: 0,\n  borderRadius: {\n    // Only rounded for keyboard focus and quiet.\n    default: 'none',\n    isFocusVisible: 'control',\n    isQuiet: 'control'\n  },\n  textAlign: 'start',\n  disableTapHighlight: true\n});\n\nconst chevronStyles = style({\n  rotate: {\n    isRTL: 180,\n    isExpanded: 90\n  },\n  transition: 'default',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  flexShrink: 0\n});\n\nconst InternalDisclosureHeader = createContext<{} | null>(null);\n\nfunction DisclosureHeaderWithForwardRef(props: DisclosureHeaderProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    UNSAFE_className,\n    UNSAFE_style,\n    children\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {size, isQuiet, density} = useSlottedContext(DisclosureContext)!;\n\n  let mapSize = {\n    S: 'XS',\n    M: 'S',\n    L: 'M',\n    XL: 'L'\n  };\n\n  // maps to one size smaller in the compact density to ensure there is space between the top and bottom of the action button and container\n  let newSize : 'XS' | 'S' | 'M' | 'L' | 'XL' | undefined = size;\n  if (density === 'compact') {\n    newSize = mapSize[size ?? 'M'] as 'XS' | 'S' | 'M' | 'L';\n  }\n\n  return (\n    <Provider\n      values={[\n        [ActionButtonContext, {size: newSize, isQuiet}],\n        [InternalDisclosureHeader, {}]\n      ]}>\n      <div\n        style={UNSAFE_style}\n        className={(UNSAFE_className ?? '') + style({display: 'flex', alignItems: 'center', gap: 4})}\n        ref={domRef}>\n        {children}\n      </div>\n    </Provider>\n  );\n}\n\n/**\n * A wrapper element for the disclosure title that can contain other elements not part of the trigger.\n */\nexport const DisclosureHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(DisclosureHeaderWithForwardRef);\n\nfunction DisclosureTitle(props: DisclosureTitleProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    level = 3,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  const domProps = filterDOMProps(otherProps);\n  let {direction} = useLocale();\n  let {isExpanded} = useContext(DisclosureStateContext)!;\n  let {size, density, isQuiet} = useSlottedContext(DisclosureContext)!;\n  let isRTL = direction === 'rtl';\n\n  let buttonTrigger = (\n    <Heading\n      {...domProps}\n      level={level}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={(UNSAFE_className ?? '') + headingStyle}>\n      <Button className={(renderProps) => buttonStyles({...renderProps, size, density, isQuiet})} slot=\"trigger\">\n        <CenterBaseline>\n          <Chevron size={size} className={chevronStyles({isExpanded, isRTL})} aria-hidden=\"true\" />\n        </CenterBaseline>\n        {props.children}\n      </Button>\n    </Heading>\n  );\n  let ctx = useContext(InternalDisclosureHeader);\n  if (ctx) {\n    return buttonTrigger;\n  }\n\n  return (\n    <DisclosureHeader>\n      {buttonTrigger}\n    </DisclosureHeader>\n  );\n}\n\n/**\n * A disclosure title consisting of a heading and a trigger button to expand/collapse the panel.\n */\nlet _DisclosureTitle = forwardRef(DisclosureTitle);\nexport {_DisclosureTitle as DisclosureTitle};\n\nexport interface DisclosurePanelProps extends Omit<RACDisclosurePanelProps, 'className' | 'style' | 'children'>, UnsafeStyles, DOMProps, AriaLabelingProps {\n  children: React.ReactNode\n}\n\nconst panelStyles = style({\n  font: 'body',\n  paddingTop: {\n    isExpanded: 8\n  },\n  paddingBottom: {\n    isExpanded: 16\n  },\n  paddingX: {\n    isExpanded: {\n      size: {\n        S: 8,\n        M: sizeValue(9),\n        L: 12,\n        XL: sizeValue(15)\n      }\n    }\n  }\n});\n\nfunction DisclosurePanel(props: DisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  const domProps = filterDOMProps(otherProps);\n  let {size} = useSlottedContext(DisclosureContext)!;\n  let {isExpanded} = useContext(DisclosureStateContext)!;\n  let panelRef = useDOMRef(ref);\n  return (\n    <RACDisclosurePanel\n      {...domProps}\n      ref={panelRef}\n      style={UNSAFE_style}\n      className={(UNSAFE_className ?? '') + panelStyles({size, isExpanded})}>\n      {props.children}\n    </RACDisclosurePanel>\n  );\n}\n\n/**\n * A disclosure panel is a collapsible section of content that is hidden until the disclosure is expanded.\n */\nlet _DisclosurePanel = forwardRef(DisclosurePanel);\nexport {_DisclosurePanel as DisclosurePanel};\n\n"],"names":[],"version":3,"file":"Disclosure.cjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Disclosure.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButtonContext} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, forwardRefType} from '@react-types/shared';\nimport {Button, ContextValue, DisclosureStateContext, Heading, Provider, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel, DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps, useLocale, useSlottedContext} from 'react-aria-components';\nimport {CenterBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with { type: 'macro' };\nimport Chevron from '../ui-icons/Chevron';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {focusRing, lightDark, size as sizeValue, style} from '../style' with { type: 'macro' };\nimport React, {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DisclosureProps extends Omit<RACDisclosureProps, 'className' | 'style' | 'children'>, StyleProps {\n  /**\n   * The size of the disclosure.\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The amount of space between the disclosures.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /** Whether the disclosure should be displayed with a quiet style. */\n  isQuiet?: boolean,\n  /** The contents of the disclosure, consisting of an DisclosureHeader and DisclosurePanel. */\n  children: ReactNode\n}\n\nexport const DisclosureContext = createContext<ContextValue<Omit<DisclosureProps, 'children'>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst disclosure = style({\n  color: 'heading',\n  borderTopWidth: {\n    default: 1,\n    isQuiet: 0\n  },\n  borderBottomWidth: {\n    default: 1,\n    isQuiet: 0,\n    isInGroup: {\n      default: 0,\n      ':last-child': {\n        default: 1,\n        isQuiet: 0\n      }\n    }\n  },\n  borderStartWidth: 0,\n  borderEndWidth: 0,\n  borderStyle: 'solid',\n  borderColor: 'gray-200',\n  minWidth: sizeValue(200)\n}, getAllowedOverrides());\n\nfunction Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, DisclosureContext);\n  let {\n    size = 'M',\n    density = 'regular',\n    isQuiet,\n    UNSAFE_style,\n    UNSAFE_className = ''\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let isInGroup = useContext(DisclosureContext) !== null;\n\n  return (\n    <Provider\n      values={[\n        [DisclosureContext, {size, isQuiet, density}]\n      ]}>\n      <RACDisclosure\n        {...props}\n        ref={domRef}\n        style={UNSAFE_style}\n        className={(UNSAFE_className ?? '') + disclosure({isQuiet, isInGroup}, props.styles)}>\n        {props.children}\n      </RACDisclosure>\n    </Provider>\n  );\n}\n\n/**\n * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.\n */\nlet _Disclosure = forwardRef(Disclosure);\nexport {_Disclosure as Disclosure};\n\nexport interface DisclosureTitleProps extends UnsafeStyles, DOMProps {\n  /** The heading level of the disclosure header.\n   * \n   * @default 3\n   */\n  level?: number,\n  /** The contents of the disclosure header. */\n  children: React.ReactNode\n}\n\ninterface DisclosureHeaderProps extends UnsafeStyles, DOMProps {\n  children: React.ReactNode\n}\n\nconst headingStyle = style({\n  margin: 0,\n  flexGrow: 1\n});\n\nconst buttonStyles = style({\n  ...focusRing(),\n  outlineOffset: -2,\n  font: 'heading',\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  fontWeight: 'bold',\n  fontSize: {\n    size: {\n      S: 'heading-xs',\n      M: 'heading-sm',\n      L: 'heading',\n      XL: 'heading-lg'\n    }\n  },\n  lineHeight: 'ui',\n  display: 'flex',\n  alignItems: 'baseline',\n  paddingX: '[calc(self(minHeight) * 3/8 - 1px)]',\n  paddingY: centerPadding(),\n  gap: '[calc(self(minHeight) * 3/8 - 1px)]',\n  minHeight: {\n    // compact is equivalent to 'control', but other densities have more padding.\n    size: {\n      S: {\n        density: {\n          compact: 24,\n          regular: 32,\n          spacious: 40\n        }\n      },\n      M: {\n        density: {\n          compact: 32,\n          regular: 40,\n          spacious: 48\n        }\n      },\n      L: {\n        density: {\n          compact: 40,\n          regular: 48,\n          spacious: 56\n        }\n      },\n      XL: {\n        density: {\n          compact: 48,\n          regular: 56,\n          spacious: 64\n        }\n      }\n    }\n  },\n  width: 'full',\n  backgroundColor: {\n    default: 'transparent',\n    isFocusVisible: lightDark('transparent-black-100', 'transparent-white-100'),\n    isHovered: lightDark('transparent-black-100', 'transparent-white-100'),\n    isPressed: lightDark('transparent-black-300', 'transparent-white-300')\n  },\n  transition: 'default',\n  borderWidth: 0,\n  borderRadius: {\n    // Only rounded for keyboard focus and quiet.\n    default: 'none',\n    isFocusVisible: 'control',\n    isQuiet: 'control'\n  },\n  textAlign: 'start',\n  disableTapHighlight: true\n});\n\nconst chevronStyles = style({\n  rotate: {\n    isRTL: 180,\n    isExpanded: 90\n  },\n  transition: 'default',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  flexShrink: 0\n});\n\nconst InternalDisclosureHeader = createContext<{} | null>(null);\n\nfunction DisclosureHeaderWithForwardRef(props: DisclosureHeaderProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    UNSAFE_className,\n    UNSAFE_style,\n    children\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {size, isQuiet, density} = useSlottedContext(DisclosureContext)!;\n\n  let mapSize = {\n    S: 'XS',\n    M: 'S',\n    L: 'M',\n    XL: 'L'\n  };\n\n  // maps to one size smaller in the compact density to ensure there is space between the top and bottom of the action button and container\n  let newSize : 'XS' | 'S' | 'M' | 'L' | 'XL' | undefined = size;\n  if (density === 'compact') {\n    newSize = mapSize[size ?? 'M'] as 'XS' | 'S' | 'M' | 'L';\n  }\n\n  return (\n    <Provider\n      values={[\n        [ActionButtonContext, {size: newSize, isQuiet}],\n        [InternalDisclosureHeader, {}]\n      ]}>\n      <div\n        style={UNSAFE_style}\n        className={(UNSAFE_className ?? '') + style({display: 'flex', alignItems: 'center', gap: 4})}\n        ref={domRef}>\n        {children}\n      </div>\n    </Provider>\n  );\n}\n\n/**\n * A wrapper element for the disclosure title that can contain other elements not part of the trigger.\n */\nexport const DisclosureHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(DisclosureHeaderWithForwardRef);\n\nfunction DisclosureTitle(props: DisclosureTitleProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    level = 3,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  const domProps = filterDOMProps(otherProps);\n  let {direction} = useLocale();\n  let {isExpanded} = useContext(DisclosureStateContext)!;\n  let {size, density, isQuiet} = useSlottedContext(DisclosureContext)!;\n  let isRTL = direction === 'rtl';\n\n  let buttonTrigger = (\n    <Heading\n      {...domProps}\n      level={level}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={(UNSAFE_className ?? '') + headingStyle}>\n      <Button className={(renderProps) => buttonStyles({...renderProps, size, density, isQuiet})} slot=\"trigger\">\n        <CenterBaseline>\n          <Chevron size={size} className={chevronStyles({isExpanded, isRTL})} aria-hidden=\"true\" />\n        </CenterBaseline>\n        {props.children}\n      </Button>\n    </Heading>\n  );\n  let ctx = useContext(InternalDisclosureHeader);\n  if (ctx) {\n    return buttonTrigger;\n  }\n\n  return (\n    <DisclosureHeader>\n      {buttonTrigger}\n    </DisclosureHeader>\n  );\n}\n\n/**\n * A disclosure title consisting of a heading and a trigger button to expand/collapse the panel.\n */\nlet _DisclosureTitle = forwardRef(DisclosureTitle);\nexport {_DisclosureTitle as DisclosureTitle};\n\nexport interface DisclosurePanelProps extends Omit<RACDisclosurePanelProps, 'className' | 'style' | 'children'>, UnsafeStyles, DOMProps, AriaLabelingProps {\n  children: React.ReactNode\n}\n\nconst panelStyles = style({\n  font: 'body',\n  paddingTop: {\n    isExpanded: 8\n  },\n  paddingBottom: {\n    isExpanded: 16\n  },\n  paddingX: {\n    isExpanded: {\n      size: {\n        S: 8,\n        M: sizeValue(9),\n        L: 12,\n        XL: sizeValue(15)\n      }\n    }\n  }\n});\n\nfunction DisclosurePanel(props: DisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  const domProps = filterDOMProps(otherProps);\n  let {size} = useSlottedContext(DisclosureContext)!;\n  let {isExpanded} = useContext(DisclosureStateContext)!;\n  let panelRef = useDOMRef(ref);\n  return (\n    <RACDisclosurePanel\n      {...domProps}\n      ref={panelRef}\n      style={UNSAFE_style}\n      className={(UNSAFE_className ?? '') + panelStyles({size, isExpanded})}>\n      {props.children}\n    </RACDisclosurePanel>\n  );\n}\n\n/**\n * A disclosure panel is a collapsible section of content that is hidden until the disclosure is expanded.\n */\nlet _DisclosurePanel = forwardRef(DisclosurePanel);\nexport {_DisclosurePanel as DisclosurePanel};\n\n"],"names":[],"version":3,"file":"Disclosure.cjs.map"}