@react-spectrum/s2 0.7.1 → 0.8.0

package/dist/ColorSwatchPicker.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA+BM,MAAM,0DAA2B,CAAA,GAAA,0BAAY,EAA8E;AAK3H,MAAM,0DAAoB,CAAA,GAAA,uBAAS,EAAE,SAAS,kBAAkB,KAA6B,EAAE,GAA2B;IAC/H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,WACF,UAAU,iBACV,OAAO,eACP,WAAW,QACX,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,4CAAoB;QAClB,GAAG,UAAU;QACd,KAAK;QACL,WAAW,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;UAUV;qBAAC;QAAO,GAAG,MAAM,MAAM;kBACjD,cAAA,gCAAC,CAAA,GAAA,oDAAyB,EAAE,QAAQ;YAAC,OAAO;4BAAC;sBAAY;0BAAM;YAAQ;sBACpE,MAAM,QAAQ;;;AAIvB;AAEA,SAAS,iCAAW,MAAoB,EAAE,KAAY,EAAE,QAAsC;IAC5F,qBACE,gCAAC,CAAA,GAAA,gDAAwB;QACvB,OAAO;QACP,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;eAUvB;gBAAC,GAAG,WAAW;0BAAE;YAAQ;kBAC3B,CAAC,cAAC,UAAU,EAAC,iBAAM;;oBACjB;oBACA,4BACC,gCAAC;wBACC,aAAW;wBACX,SAAS;;;;;AAmBrB","sources":["packages/@react-spectrum/s2/src/ColorSwatchPicker.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 {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem, Color, ContextValue, SlotProps} from 'react-aria-components';\nimport {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';\nimport {createContext, forwardRef, ReactElement, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared';\nimport {focusRing, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps, SlotProps {\n  /** The ColorSwatches within the ColorSwatchPicker. */\n  children: ReactNode,\n  /**\n   * The amount of padding between the swatches.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The size of the color swatches.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the color swatches.\n   * @default 'none'\n   */\n  rounding?: 'none' | 'default' | 'full'\n}\n\nexport const ColorSwatchPickerContext = createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchPickerContext);\n  let {\n    density = 'regular',\n    size = 'M',\n    rounding = 'none',\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      ref={domRef}\n      className={props.UNSAFE_className + style({\n        display: 'flex',\n        flexWrap: 'wrap',\n        gap: {\n          density: {\n            compact: space(2),\n            regular: 4,\n            spacious: space(6)\n          }\n        }\n      }, getAllowedOverrides())({density}, props.styles)}>\n      <InternalColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n        {props.children}\n      </InternalColorSwatchContext.Provider>\n    </AriaColorSwatchPicker>\n  );\n});\n\nfunction useWrapper(swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) {\n  return (\n    <AriaColorSwatchPickerItem\n      color={color}\n      className={renderProps => style({\n        ...focusRing(),\n        position: 'relative',\n        borderRadius: {\n          rounding: {\n            none: 'none',\n            default: 'sm',\n            full: 'full'\n          }\n        }\n      })({...renderProps, rounding})}>\n      {({isSelected}) => (<>\n        {swatch}\n        {isSelected && (\n          <div\n            aria-hidden\n            className={style({\n              position: 'absolute',\n              pointerEvents: 'none',\n              inset: 0,\n              boxSizing: 'border-box',\n              borderColor: 'gray-900',\n              borderStyle: 'solid',\n              borderWidth: 2,\n              outlineColor: 'gray-25',\n              outlineStyle: 'solid',\n              outlineWidth: 2,\n              outlineOffset: -4,\n              forcedColorAdjust: 'none',\n              borderRadius: '[inherit]'\n            })} />\n        )}\n      </>)}\n    </AriaColorSwatchPickerItem>\n  );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA+BM,MAAM,0DAA2B,CAAA,GAAA,0BAAY,EAA8E;AAK3H,MAAM,0DAAoB,CAAA,GAAA,uBAAS,EAAE,SAAS,kBAAkB,KAA6B,EAAE,GAA2B;IAC/H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,WACF,UAAU,iBACV,OAAO,eACP,WAAW,0BACX,mBAAmB,IACnB,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,4CAAoB;QAClB,GAAG,UAAU;QACd,KAAK;QACL,WAAW,mBAAmB;;;;;;;;;;;;;UAUJ;qBAAC;QAAO,GAAG,MAAM,MAAM;kBACjD,cAAA,gCAAC,CAAA,GAAA,oDAAyB,EAAE,QAAQ;YAAC,OAAO;4BAAC;sBAAY;0BAAM;YAAQ;sBACpE,MAAM,QAAQ;;;AAIvB;AAEA,SAAS,iCAAW,MAAoB,EAAE,KAAY,EAAE,QAAsC;IAC5F,qBACE,gCAAC,CAAA,GAAA,gDAAwB;QACvB,OAAO;QACP,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;eAUvB;gBAAC,GAAG,WAAW;0BAAE;YAAQ;kBAC3B,CAAC,cAAC,UAAU,EAAC,iBAAM;;oBACjB;oBACA,4BACC,gCAAC;wBACC,aAAW;wBACX,SAAS;;;;;AAmBrB","sources":["packages/@react-spectrum/s2/src/ColorSwatchPicker.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 {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem, Color, ContextValue, SlotProps} from 'react-aria-components';\nimport {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';\nimport {createContext, forwardRef, ReactElement, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared';\nimport {focusRing, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps, SlotProps {\n  /** The ColorSwatches within the ColorSwatchPicker. */\n  children: ReactNode,\n  /**\n   * The amount of padding between the swatches.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The size of the color swatches.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the color swatches.\n   * @default 'none'\n   */\n  rounding?: 'none' | 'default' | 'full'\n}\n\nexport const ColorSwatchPickerContext = createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchPickerContext);\n  let {\n    density = 'regular',\n    size = 'M',\n    rounding = 'none',\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      ref={domRef}\n      className={UNSAFE_className + style({\n        display: 'flex',\n        flexWrap: 'wrap',\n        gap: {\n          density: {\n            compact: space(2),\n            regular: 4,\n            spacious: space(6)\n          }\n        }\n      }, getAllowedOverrides())({density}, props.styles)}>\n      <InternalColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n        {props.children}\n      </InternalColorSwatchContext.Provider>\n    </AriaColorSwatchPicker>\n  );\n});\n\nfunction useWrapper(swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) {\n  return (\n    <AriaColorSwatchPickerItem\n      color={color}\n      className={renderProps => style({\n        ...focusRing(),\n        position: 'relative',\n        borderRadius: {\n          rounding: {\n            none: 'none',\n            default: 'sm',\n            full: 'full'\n          }\n        }\n      })({...renderProps, rounding})}>\n      {({isSelected}) => (<>\n        {swatch}\n        {isSelected && (\n          <div\n            aria-hidden\n            className={style({\n              position: 'absolute',\n              pointerEvents: 'none',\n              inset: 0,\n              boxSizing: 'border-box',\n              borderColor: 'gray-900',\n              borderStyle: 'solid',\n              borderWidth: 2,\n              outlineColor: 'gray-25',\n              outlineStyle: 'solid',\n              outlineWidth: 2,\n              outlineOffset: -4,\n              forcedColorAdjust: 'none',\n              borderRadius: '[inherit]'\n            })} />\n        )}\n      </>)}\n    </AriaColorSwatchPickerItem>\n  );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.cjs.map"}

package/dist/ColorSwatchPicker.css.map

@@ -1 +1 @@
-{"mappings":"AC4D0C;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsBV;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgBT;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtCmB;;AAsBV;EAAA;IAAA","sources":["26baf334ec196f8c","packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx"],"sourcesContent":["@import \"e16c0c8e50c537a4\";\n@import \"6325f62168102e9d\";\n@import \"aa108d3a66fddade\";\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 {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem, Color, ContextValue, SlotProps} from 'react-aria-components';\nimport {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';\nimport {createContext, forwardRef, ReactElement, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared';\nimport {focusRing, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps, SlotProps {\n  /** The ColorSwatches within the ColorSwatchPicker. */\n  children: ReactNode,\n  /**\n   * The amount of padding between the swatches.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The size of the color swatches.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the color swatches.\n   * @default 'none'\n   */\n  rounding?: 'none' | 'default' | 'full'\n}\n\nexport const ColorSwatchPickerContext = createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchPickerContext);\n  let {\n    density = 'regular',\n    size = 'M',\n    rounding = 'none',\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      ref={domRef}\n      className={props.UNSAFE_className + style({\n        display: 'flex',\n        flexWrap: 'wrap',\n        gap: {\n          density: {\n            compact: space(2),\n            regular: 4,\n            spacious: space(6)\n          }\n        }\n      }, getAllowedOverrides())({density}, props.styles)}>\n      <InternalColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n        {props.children}\n      </InternalColorSwatchContext.Provider>\n    </AriaColorSwatchPicker>\n  );\n});\n\nfunction useWrapper(swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) {\n  return (\n    <AriaColorSwatchPickerItem\n      color={color}\n      className={renderProps => style({\n        ...focusRing(),\n        position: 'relative',\n        borderRadius: {\n          rounding: {\n            none: 'none',\n            default: 'sm',\n            full: 'full'\n          }\n        }\n      })({...renderProps, rounding})}>\n      {({isSelected}) => (<>\n        {swatch}\n        {isSelected && (\n          <div\n            aria-hidden\n            className={style({\n              position: 'absolute',\n              pointerEvents: 'none',\n              inset: 0,\n              boxSizing: 'border-box',\n              borderColor: 'gray-900',\n              borderStyle: 'solid',\n              borderWidth: 2,\n              outlineColor: 'gray-25',\n              outlineStyle: 'solid',\n              outlineWidth: 2,\n              outlineOffset: -4,\n              forcedColorAdjust: 'none',\n              borderRadius: '[inherit]'\n            })} />\n        )}\n      </>)}\n    </AriaColorSwatchPickerItem>\n  );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.css.map"}
+{"mappings":"AC6DoC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsBJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgBT;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtCa;;AAsBJ;EAAA;IAAA","sources":["26baf334ec196f8c","packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx"],"sourcesContent":["@import \"e16c0c8e50c537a4\";\n@import \"6325f62168102e9d\";\n@import \"aa108d3a66fddade\";\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 {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem, Color, ContextValue, SlotProps} from 'react-aria-components';\nimport {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';\nimport {createContext, forwardRef, ReactElement, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared';\nimport {focusRing, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps, SlotProps {\n  /** The ColorSwatches within the ColorSwatchPicker. */\n  children: ReactNode,\n  /**\n   * The amount of padding between the swatches.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The size of the color swatches.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the color swatches.\n   * @default 'none'\n   */\n  rounding?: 'none' | 'default' | 'full'\n}\n\nexport const ColorSwatchPickerContext = createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchPickerContext);\n  let {\n    density = 'regular',\n    size = 'M',\n    rounding = 'none',\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      ref={domRef}\n      className={UNSAFE_className + style({\n        display: 'flex',\n        flexWrap: 'wrap',\n        gap: {\n          density: {\n            compact: space(2),\n            regular: 4,\n            spacious: space(6)\n          }\n        }\n      }, getAllowedOverrides())({density}, props.styles)}>\n      <InternalColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n        {props.children}\n      </InternalColorSwatchContext.Provider>\n    </AriaColorSwatchPicker>\n  );\n});\n\nfunction useWrapper(swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) {\n  return (\n    <AriaColorSwatchPickerItem\n      color={color}\n      className={renderProps => style({\n        ...focusRing(),\n        position: 'relative',\n        borderRadius: {\n          rounding: {\n            none: 'none',\n            default: 'sm',\n            full: 'full'\n          }\n        }\n      })({...renderProps, rounding})}>\n      {({isSelected}) => (<>\n        {swatch}\n        {isSelected && (\n          <div\n            aria-hidden\n            className={style({\n              position: 'absolute',\n              pointerEvents: 'none',\n              inset: 0,\n              boxSizing: 'border-box',\n              borderColor: 'gray-900',\n              borderStyle: 'solid',\n              borderWidth: 2,\n              outlineColor: 'gray-25',\n              outlineStyle: 'solid',\n              outlineWidth: 2,\n              outlineOffset: -4,\n              forcedColorAdjust: 'none',\n              borderRadius: '[inherit]'\n            })} />\n        )}\n      </>)}\n    </AriaColorSwatchPickerItem>\n  );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.css.map"}

package/dist/ColorSwatchPicker.mjs

@@ -25,12 +25,12 @@ import {useDOMRef as $bOBHx$useDOMRef} from "@react-spectrum/utils";
 const $ba9c901b6c815fb9$export$7214f50881fc1eaf = /*#__PURE__*/ (0, $bOBHx$createContext)(null);
 const $ba9c901b6c815fb9$export$b46792416e3d8515 = /*#__PURE__*/ (0, $bOBHx$forwardRef)(function ColorSwatchPicker(props, ref) {
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $ba9c901b6c815fb9$export$7214f50881fc1eaf);
-    let { density: density = 'regular', size: size = 'M', rounding: rounding = 'none', ...otherProps } = props;
+    let { density: density = 'regular', size: size = 'M', rounding: rounding = 'none', UNSAFE_className: UNSAFE_className = '', ...otherProps } = props;
     let domRef = (0, $bOBHx$useDOMRef)(ref);
     return /*#__PURE__*/ (0, $bOBHx$jsx)((0, $bOBHx$ColorSwatchPicker), {
         ...otherProps,
         ref: domRef,
-        className: props.UNSAFE_className + function anonymous(props, overrides) {
+        className: UNSAFE_className + function anonymous(props, overrides) {
             let rules = " .";
             let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
             rules += matches.join('');

package/dist/ColorSwatchPicker.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA+BM,MAAM,0DAA2B,CAAA,GAAA,oBAAY,EAA8E;AAK3H,MAAM,0DAAoB,CAAA,GAAA,iBAAS,EAAE,SAAS,kBAAkB,KAA6B,EAAE,GAA2B;IAC/H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,WACF,UAAU,iBACV,OAAO,eACP,WAAW,QACX,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,wBAAoB;QAClB,GAAG,UAAU;QACd,KAAK;QACL,WAAW,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;UAUV;qBAAC;QAAO,GAAG,MAAM,MAAM;kBACjD,cAAA,gBAAC,CAAA,GAAA,yCAAyB,EAAE,QAAQ;YAAC,OAAO;4BAAC;sBAAY;0BAAM;YAAQ;sBACpE,MAAM,QAAQ;;;AAIvB;AAEA,SAAS,iCAAW,MAAoB,EAAE,KAAY,EAAE,QAAsC;IAC5F,qBACE,gBAAC,CAAA,GAAA,4BAAwB;QACvB,OAAO;QACP,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;eAUvB;gBAAC,GAAG,WAAW;0BAAE;YAAQ;kBAC3B,CAAC,cAAC,UAAU,EAAC,iBAAM;;oBACjB;oBACA,4BACC,gBAAC;wBACC,aAAW;wBACX,SAAS;;;;;AAmBrB","sources":["packages/@react-spectrum/s2/src/ColorSwatchPicker.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 {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem, Color, ContextValue, SlotProps} from 'react-aria-components';\nimport {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';\nimport {createContext, forwardRef, ReactElement, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared';\nimport {focusRing, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps, SlotProps {\n  /** The ColorSwatches within the ColorSwatchPicker. */\n  children: ReactNode,\n  /**\n   * The amount of padding between the swatches.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The size of the color swatches.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the color swatches.\n   * @default 'none'\n   */\n  rounding?: 'none' | 'default' | 'full'\n}\n\nexport const ColorSwatchPickerContext = createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchPickerContext);\n  let {\n    density = 'regular',\n    size = 'M',\n    rounding = 'none',\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      ref={domRef}\n      className={props.UNSAFE_className + style({\n        display: 'flex',\n        flexWrap: 'wrap',\n        gap: {\n          density: {\n            compact: space(2),\n            regular: 4,\n            spacious: space(6)\n          }\n        }\n      }, getAllowedOverrides())({density}, props.styles)}>\n      <InternalColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n        {props.children}\n      </InternalColorSwatchContext.Provider>\n    </AriaColorSwatchPicker>\n  );\n});\n\nfunction useWrapper(swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) {\n  return (\n    <AriaColorSwatchPickerItem\n      color={color}\n      className={renderProps => style({\n        ...focusRing(),\n        position: 'relative',\n        borderRadius: {\n          rounding: {\n            none: 'none',\n            default: 'sm',\n            full: 'full'\n          }\n        }\n      })({...renderProps, rounding})}>\n      {({isSelected}) => (<>\n        {swatch}\n        {isSelected && (\n          <div\n            aria-hidden\n            className={style({\n              position: 'absolute',\n              pointerEvents: 'none',\n              inset: 0,\n              boxSizing: 'border-box',\n              borderColor: 'gray-900',\n              borderStyle: 'solid',\n              borderWidth: 2,\n              outlineColor: 'gray-25',\n              outlineStyle: 'solid',\n              outlineWidth: 2,\n              outlineOffset: -4,\n              forcedColorAdjust: 'none',\n              borderRadius: '[inherit]'\n            })} />\n        )}\n      </>)}\n    </AriaColorSwatchPickerItem>\n  );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.mjs.map"}
+{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA+BM,MAAM,0DAA2B,CAAA,GAAA,oBAAY,EAA8E;AAK3H,MAAM,0DAAoB,CAAA,GAAA,iBAAS,EAAE,SAAS,kBAAkB,KAA6B,EAAE,GAA2B;IAC/H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,WACF,UAAU,iBACV,OAAO,eACP,WAAW,0BACX,mBAAmB,IACnB,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,wBAAoB;QAClB,GAAG,UAAU;QACd,KAAK;QACL,WAAW,mBAAmB;;;;;;;;;;;;;UAUJ;qBAAC;QAAO,GAAG,MAAM,MAAM;kBACjD,cAAA,gBAAC,CAAA,GAAA,yCAAyB,EAAE,QAAQ;YAAC,OAAO;4BAAC;sBAAY;0BAAM;YAAQ;sBACpE,MAAM,QAAQ;;;AAIvB;AAEA,SAAS,iCAAW,MAAoB,EAAE,KAAY,EAAE,QAAsC;IAC5F,qBACE,gBAAC,CAAA,GAAA,4BAAwB;QACvB,OAAO;QACP,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;eAUvB;gBAAC,GAAG,WAAW;0BAAE;YAAQ;kBAC3B,CAAC,cAAC,UAAU,EAAC,iBAAM;;oBACjB;oBACA,4BACC,gBAAC;wBACC,aAAW;wBACX,SAAS;;;;;AAmBrB","sources":["packages/@react-spectrum/s2/src/ColorSwatchPicker.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 {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem, Color, ContextValue, SlotProps} from 'react-aria-components';\nimport {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';\nimport {createContext, forwardRef, ReactElement, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared';\nimport {focusRing, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps, SlotProps {\n  /** The ColorSwatches within the ColorSwatchPicker. */\n  children: ReactNode,\n  /**\n   * The amount of padding between the swatches.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The size of the color swatches.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the color swatches.\n   * @default 'none'\n   */\n  rounding?: 'none' | 'default' | 'full'\n}\n\nexport const ColorSwatchPickerContext = createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchPickerContext);\n  let {\n    density = 'regular',\n    size = 'M',\n    rounding = 'none',\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      ref={domRef}\n      className={UNSAFE_className + style({\n        display: 'flex',\n        flexWrap: 'wrap',\n        gap: {\n          density: {\n            compact: space(2),\n            regular: 4,\n            spacious: space(6)\n          }\n        }\n      }, getAllowedOverrides())({density}, props.styles)}>\n      <InternalColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n        {props.children}\n      </InternalColorSwatchContext.Provider>\n    </AriaColorSwatchPicker>\n  );\n});\n\nfunction useWrapper(swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) {\n  return (\n    <AriaColorSwatchPickerItem\n      color={color}\n      className={renderProps => style({\n        ...focusRing(),\n        position: 'relative',\n        borderRadius: {\n          rounding: {\n            none: 'none',\n            default: 'sm',\n            full: 'full'\n          }\n        }\n      })({...renderProps, rounding})}>\n      {({isSelected}) => (<>\n        {swatch}\n        {isSelected && (\n          <div\n            aria-hidden\n            className={style({\n              position: 'absolute',\n              pointerEvents: 'none',\n              inset: 0,\n              boxSizing: 'border-box',\n              borderColor: 'gray-900',\n              borderStyle: 'solid',\n              borderWidth: 2,\n              outlineColor: 'gray-25',\n              outlineStyle: 'solid',\n              outlineWidth: 2,\n              outlineOffset: -4,\n              forcedColorAdjust: 'none',\n              borderRadius: '[inherit]'\n            })} />\n        )}\n      </>)}\n    </AriaColorSwatchPickerItem>\n  );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.mjs.map"}

package/dist/ComboBox.cjs.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  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 {PopoverBase} 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\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function 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            <PopoverBase\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            </PopoverBase>\n          </InternalComboboxContext.Provider>\n        </>\n      )}\n    </AriaComboBox>\n  );\n});\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  let {size} = useContext(InternalComboboxContext);\n  return (\n    <>\n      <AriaListBoxSection\n        {...props}\n        className={section({size})}>\n        {props.children}\n      </AriaListBoxSection>\n      <Divider />\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"ComboBox.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;;;AAqFM,MAAM,0DAAkB,CAAA,GAAA,0BAAY,EAA2D;AAEtG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CN,MAAM;AASN,IAAI,8DAA0B,CAAA,GAAA,0BAAY,EAAkC;IAAC,MAAM;AAAG;AAK/E,MAAM,4CAAyB,AAAd,WAAW,GAAI,CAAA,GAAA,uBAAS,EAAqB,SAAS,SAA2B,MAAuB,EAAE,GAAsB;IACtJ,CAAC,QAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,QAAO,KAAK;IACnD,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAoB;IACxC,IAAI,SAAS,CAAA,GAAA,mBAAK,EAAkB;IACpC,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAqB;IAC1C,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACvC,SAAQ,CAAA,GAAA,sCAAW,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,gCAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,4CAAiB,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,mBAAK,EAAkB;IACvC,uCAAuC;IACxC,IAAI,CAAC,cAAc,gBAAgB,GAAG,CAAA,GAAA,qBAAO,EAAiB;IAC9D,IAAI,WAAW,CAAA,GAAA,wBAAU,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,uCAAgB,EAAE;QAChB,KAAK;QACL,UAAU;IACZ;IAEA,qBACE,gCAAC,CAAA,GAAA,mCAAW;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,iCAAC,8CAAwB,QAAQ;oBAAC,OAAO;8BAAC;oBAAI;;sCAC5C,gCAAC,CAAA,GAAA,oCAAS;4BACR,YAAY;4BACZ,YAAY;4BACZ,MAAM;4BACN,eAAe;4BACf,YAAY;4BACZ,oBAAoB;4BACpB,gBAAgB,OAAM,cAAc;sCACnC;;sCAEH,iCAAC,CAAA,GAAA,oCAAS;4BACR,KAAK;4BACL,MAAK;4BACL,YAAY;4BACZ,WAAW;4BACX,MAAM;4BACN,QAAQ;;;;;;;;;;;;;;;;;;;;;;;8BAOL;sCAAC;4BAAI;;8CACR,gCAAC,CAAA,GAAA,uCAAW,EAAE,QAAQ;8CACnB,CAAA,oBACC,gCAAC,CAAA,GAAA,uCAAW,EAAE,QAAQ;4CAAC,OAAO;gDAAC,GAAG,GAAG;gDAAE,KAAK,CAAA,GAAA,+BAAQ,EAAG,KAAa,KAAK;4CAAS;sDAChF,cAAA,gCAAC,CAAA,GAAA,+BAAI;;;gCAIV,2BAAa,gCAAC,CAAA,GAAA,wCAAa;oCAAE,YAAY;;8CAC1C,gCAAC,CAAA,GAAA,iCAAK;oCACJ,KAAK;oCACL,4DAA4D;oCAC5D,aAAa;oCACb,WAAW;oCACX,OAAO,CAAA,cAAe,CAAA,GAAA,oCAAS,EAAE,WAAW;oCAC5C,WAAW,CAAA,cAAe,kCAAY;4CACpC,GAAG,WAAW;kDACd;oDACA;wCACF;8CACA,cAAA,gCAAC,CAAA,GAAA,iCAAU;wCACT,MAAM;wCACN,WAAW;;;;;sCAGjB,gCAAC,CAAA,GAAA,kCAAO;4BACN,MAAM;4BACN,YAAY;4BACZ,WAAW;4BACX,aAAa;sCACZ;;sCAEH,gCAAC,CAAA,GAAA,qCAAU;4BACT,SAAS;4BACT,YAAY;4BACZ,QAAQ;4BACR,WAAW,GAAG,UAAU,CAAC,EAAE,OAAO;4BAClC,YAAY;4BACZ,cAAc;gCACZ,OAAO,YAAY,GAAG,UAAU,EAAE,CAAC,GAAG;gCACtC,sGAAsG;gCACtG,mBAAmB,CAAC,KAAK,EAAE,aAAa,OAAO,CAAC;4BAClD;4BACA,MAAM;sCAIN,cAAA,gCAAC,CAAA,GAAA,mCAAO;gCACN,QAAQ;oCACN;wCAAC,CAAA,GAAA,uCAAY;wCAAG;4CAAC,QAAQ,CAAA,GAAA,uCAAY,EAAE;sDAAC;4CAAI;wCAAE;qCAAE;oCAChD;wCAAC,CAAA,GAAA,wCAAa;wCAAG;4CAAC,QAAQ,CAAA,GAAA,wCAAa;wCAAC;qCAAE;oCAC1C;wCAAC,CAAA,GAAA,qCAAU;wCAAG;4CACZ,OAAO;gDACL,eAAe;oDAAC,QAAQ,CAAA,GAAA,qCAAU,EAAE;8DAAC;oDAAI;gDAAE;4CAC7C;wCACF;qCAAE;iCACH;0CACD,cAAA,gCAAC,CAAA,GAAA,kCAAM;oCACL,OAAO;oCACP,WAAW,CAAA,GAAA,8BAAG,EAAE;8CAAC;oCAAI;8CACpB;;;;;;;;AASnB;AAOA,MAAM,0CAAoB;IACxB,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;AACN;AAEO,SAAS,0CAAa,KAAwB;IACnD,IAAI,MAAM,CAAA,GAAA,mBAAK,EAAE;IACjB,IAAI,SAAS,MAAM,IAAI,IAAI;IAC3B,IAAI,QAAC,IAAI,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE;IACxB,qBACE,gCAAC,CAAA,GAAA,sCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,WAAW,MAAM,SAAS,IAAK,CAAA,OAAO,MAAM,QAAQ,KAAK,WAAW,MAAM,QAAQ,GAAa,SAAQ;QACvG,OAAO,CAAA,GAAA,oCAAS,EAAE,KAAK,MAAM,YAAY;QACzC,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,CAAA,GAAA,kCAAO,EAAE;gBAAC,GAAG,WAAW;sBAAE;wBAAM;YAAM,GAAG,MAAM,MAAM;kBAC/G,CAAC;YACA,IAAI,YAAC,QAAQ,EAAC,GAAG;YACjB,qBACE;0BACE,cAAA,iCAAC,CAAA,GAAA,mCAAO;oBACN,QAAQ;wBACN;4BAAC,CAAA,GAAA,qCAAU;4BAAG;gCACZ,OAAO;oCACL,MAAM;wCAAC,QAAQ,CAAA,GAAA,wCAAa,EAAE;4CAAC,MAAM;4CAAQ,QAAQ,CAAA,GAAA,2CAAgB;wCAAC;wCAAI,QAAQ,CAAA,GAAA,8BAAG;oCAAC;gCACxF;4BACF;yBAAE;wBACF;4BAAC,CAAA,GAAA,qCAAU;4BAAG;gCACZ,OAAO;oCACL,OAAO;wCAAC,QAAQ,CAAA,GAAA,+BAAI,EAAE;kDAAC;wCAAI;oCAAE;oCAC7B,aAAa;wCAAC,QAAQ,CAAA,GAAA,qCAAU,EAAE;4CAAC,GAAG,WAAW;kDAAE;wCAAI;oCAAE;gCAC3D;4BACF;yBAAE;qBACH;;wBACA,CAAC,wBAAU,gCAAC,CAAA,GAAA,iCAAY;4BAAE,MAAM,uCAAiB,CAAC,KAAK;4BAAE,WAAW,CAAA,GAAA,mCAAQ,EAAE;gCAAC,GAAG,WAAW;sCAAE;4BAAI;;wBACnG,OAAO,aAAa,yBAAW,gCAAC,CAAA,GAAA,8BAAG;4BAAE,MAAK;sCAAS;6BAAmB;;;;QAI/E;;AAGN;AAGO,SAAS,0CAAkC,KAA8B;IAC9E,IAAI,QAAC,IAAI,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE;IACxB,qBACE;;0BACE,gCAAC,CAAA,GAAA,yCAAiB;gBACf,GAAG,KAAK;gBACT,WAAW,CAAA,GAAA,iCAAM,EAAE;0BAAC;gBAAI;0BACvB,MAAM,QAAQ;;0BAEjB,gCAAC,CAAA,GAAA,iCAAM;;;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 {PopoverBase} 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\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function 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            <PopoverBase\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            </PopoverBase>\n          </InternalComboboxContext.Provider>\n        </>\n      )}\n    </AriaComboBox>\n  );\n});\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): ReactNode {\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>): ReactNode {\n  let {size} = useContext(InternalComboboxContext);\n  return (\n    <>\n      <AriaListBoxSection\n        {...props}\n        className={section({size})}>\n        {props.children}\n      </AriaListBoxSection>\n      <Divider />\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"ComboBox.cjs.map"}

package/dist/ComboBox.css.map

@@ -1 +1 @@
-{"mappings":"ACiGoB;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2CD;;;;EAAA;;;;EAAA;;;;EAsFiB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBd;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkDA;;;;EAAA;;;;;AA3MF;EAiIgB;;;;;AAjIhB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAiIgB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAwBd;EAAA;IAAA","sources":["13beeca66baffd35","packages/@react-spectrum/s2/src/ComboBox.tsx"],"sourcesContent":["@import \"434b6dc809c84a70\";\n@import \"9807be49da09aafb\";\n@import \"affe2b90434aec6a\";\n@import \"96ebc07fe89537d3\";\n@import \"85ea669da1afabc2\";\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 {\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 {PopoverBase} 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\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function 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            <PopoverBase\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            </PopoverBase>\n          </InternalComboboxContext.Provider>\n        </>\n      )}\n    </AriaComboBox>\n  );\n});\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  let {size} = useContext(InternalComboboxContext);\n  return (\n    <>\n      <AriaListBoxSection\n        {...props}\n        className={section({size})}>\n        {props.children}\n      </AriaListBoxSection>\n      <Divider />\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"ComboBox.css.map"}
+{"mappings":"ACiGoB;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2CD;;;;EAAA;;;;EAAA;;;;EAsFiB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBd;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkDA;;;;EAAA;;;;;AA3MF;EAiIgB;;;;;AAjIhB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAiIgB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAwBd;EAAA;IAAA","sources":["13beeca66baffd35","packages/@react-spectrum/s2/src/ComboBox.tsx"],"sourcesContent":["@import \"434b6dc809c84a70\";\n@import \"9807be49da09aafb\";\n@import \"affe2b90434aec6a\";\n@import \"96ebc07fe89537d3\";\n@import \"85ea669da1afabc2\";\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 {\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 {PopoverBase} 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\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function 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            <PopoverBase\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            </PopoverBase>\n          </InternalComboboxContext.Provider>\n        </>\n      )}\n    </AriaComboBox>\n  );\n});\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): ReactNode {\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>): ReactNode {\n  let {size} = useContext(InternalComboboxContext);\n  return (\n    <>\n      <AriaListBoxSection\n        {...props}\n        className={section({size})}>\n        {props.children}\n      </AriaListBoxSection>\n      <Divider />\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"ComboBox.css.map"}

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  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 {PopoverBase} 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\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function 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            <PopoverBase\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            </PopoverBase>\n          </InternalComboboxContext.Provider>\n        </>\n      )}\n    </AriaComboBox>\n  );\n});\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  let {size} = useContext(InternalComboboxContext);\n  return (\n    <>\n      <AriaListBoxSection\n        {...props}\n        className={section({size})}>\n        {props.children}\n      </AriaListBoxSection>\n      <Divider />\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"ComboBox.mjs.map"}
+{"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  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 {PopoverBase} 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\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function 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            <PopoverBase\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            </PopoverBase>\n          </InternalComboboxContext.Provider>\n        </>\n      )}\n    </AriaComboBox>\n  );\n});\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): ReactNode {\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>): ReactNode {\n  let {size} = useContext(InternalComboboxContext);\n  return (\n    <>\n      <AriaListBoxSection\n        {...props}\n        className={section({size})}>\n        {props.children}\n      </AriaListBoxSection>\n      <Divider />\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"ComboBox.mjs.map"}

package/dist/Content.cjs

@@ -44,7 +44,7 @@ const $6367bc87eb7d24ad$export$d688439359537581 = /*#__PURE__*/ (0, $bwC5I$react
 const $6367bc87eb7d24ad$export$a8a3e93435678ff9 = /*#__PURE__*/ (0, $bwC5I$react.forwardRef)(function Heading(props, ref) {
     [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $6367bc87eb7d24ad$export$d688439359537581);
     let domRef = (0, $bwC5I$reactspectrumutils.useDOMRef)(ref);
-    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, isHidden: isHidden, slot: slot, ...otherProps } = props;
+    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles = '', isHidden: isHidden, slot: slot, ...otherProps } = props;
     if (isHidden) return null;
     return /*#__PURE__*/ (0, $bwC5I$reactjsxruntime.jsx)((0, $bwC5I$reactariacomponents.Heading), {
         ...otherProps,
@@ -58,7 +58,7 @@ const $6367bc87eb7d24ad$export$e0e4026c12a8bdbb = /*#__PURE__*/ (0, $bwC5I$react
 const $6367bc87eb7d24ad$export$8b251419efc915eb = /*#__PURE__*/ (0, $bwC5I$react.forwardRef)(function Header(props, ref) {
     [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $6367bc87eb7d24ad$export$e0e4026c12a8bdbb);
     let domRef = (0, $bwC5I$reactspectrumutils.useDOMRef)(ref);
-    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, isHidden: isHidden, slot: slot, ...otherProps } = props;
+    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles = '', isHidden: isHidden, slot: slot, ...otherProps } = props;
     if (isHidden) return null;
     return /*#__PURE__*/ (0, $bwC5I$reactjsxruntime.jsx)((0, $bwC5I$reactariacomponents.Header), {
         ...otherProps,
@@ -72,7 +72,7 @@ const $6367bc87eb7d24ad$export$1cbdd774077931b4 = /*#__PURE__*/ (0, $bwC5I$react
 const $6367bc87eb7d24ad$export$7c6e2c02157bb7d2 = /*#__PURE__*/ (0, $bwC5I$react.forwardRef)(function Content(props, ref) {
     [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $6367bc87eb7d24ad$export$1cbdd774077931b4);
     let domRef = (0, $bwC5I$reactspectrumutils.useDOMRef)(ref);
-    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, isHidden: isHidden, slot: slot, ...otherProps } = props;
+    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles = '', isHidden: isHidden, slot: slot, ...otherProps } = props;
     if (isHidden) return null;
     return /*#__PURE__*/ (0, $bwC5I$reactjsxruntime.jsx)("div", {
         ...otherProps,
@@ -86,7 +86,7 @@ const $6367bc87eb7d24ad$export$9afb8bc826b033ea = /*#__PURE__*/ (0, $bwC5I$react
 const $6367bc87eb7d24ad$export$5f1af8db9871e1d6 = /*#__PURE__*/ (0, $bwC5I$react.forwardRef)(function Text(props, ref) {
     [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $6367bc87eb7d24ad$export$9afb8bc826b033ea);
     let domRef = (0, $bwC5I$reactspectrumutils.useDOMRef)(ref);
-    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, isHidden: isHidden, slot: slot, children: children, ...otherProps } = props;
+    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles = '', isHidden: isHidden, slot: slot, children: children, ...otherProps } = props;
     let racContext = (0, $bwC5I$react.useContext)((0, $bwC5I$reactariacomponents.TextContext));
     let isSkeleton = (0, $5eb75e0c130e0669$exports.useIsSkeleton)();
     [children, UNSAFE_style] = (0, $5eb75e0c130e0669$exports.useSkeletonText)(children, UNSAFE_style);
@@ -112,7 +112,7 @@ const $6367bc87eb7d24ad$export$744d98a3b8a94e1c = /*#__PURE__*/ (0, $bwC5I$react
 const $6367bc87eb7d24ad$export$16e4d70cc375e707 = /*#__PURE__*/ (0, $bwC5I$react.forwardRef)(function Keyboard(props, ref) {
     [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $6367bc87eb7d24ad$export$744d98a3b8a94e1c);
     let domRef = (0, $bwC5I$reactspectrumutils.useDOMRef)(ref);
-    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, isHidden: isHidden, slot: slot, ...otherProps } = props;
+    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles = '', isHidden: isHidden, slot: slot, ...otherProps } = props;
     if (isHidden) return null;
     return /*#__PURE__*/ (0, $bwC5I$reactjsxruntime.jsx)((0, $bwC5I$reactariacomponents.Keyboard), {
         ...otherProps,
@@ -126,7 +126,7 @@ const $6367bc87eb7d24ad$export$5630640b68817ed6 = /*#__PURE__*/ (0, $bwC5I$react
 const $6367bc87eb7d24ad$export$a06f1c675e846f6f = /*#__PURE__*/ (0, $bwC5I$react.forwardRef)(function Footer(props, ref) {
     [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $6367bc87eb7d24ad$export$5630640b68817ed6);
     let domRef = (0, $bwC5I$reactspectrumutils.useDOMRef)(ref);
-    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, isHidden: isHidden, slot: slot, ...otherProps } = props;
+    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles = '', isHidden: isHidden, slot: slot, ...otherProps } = props;
     if (isHidden) return null;
     return /*#__PURE__*/ (0, $bwC5I$reactjsxruntime.jsx)("footer", {
         ...otherProps,

package/dist/Content.cjs.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 {inertValue} from '@react-aria/utils';\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  id?: string\n}\n\ninterface HeadingProps extends ContentProps {\n  level?: number\n}\n\nexport const HeadingContext = createContext<ContextValue<Partial<HeadingProps>, DOMRefValue<HTMLHeadingElement>>>(null);\n\nexport const Heading = forwardRef(// 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\nexport const HeaderContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLElement>>>(null);\n\nexport const Header = forwardRef(function 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\nexport const ContentContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nexport const Content = forwardRef(function 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\nexport const TextContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>(null);\n\nexport const Text = forwardRef(function 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  let text = (\n    <TextAria\n      {...otherProps}\n      ref={domRef}\n      // @ts-ignore - compatibility with React < 19\n      inert={inertValue(isSkeleton)}\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  if (slot && racContext && 'slots' in racContext && !racContext.slots?.[slot]) {\n    return <RACTextContext.Provider value={null}>{text}</RACTextContext.Provider>;\n  }\n\n  return text;\n});\n\nexport const KeyboardContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});\n\nexport const Keyboard = forwardRef(function 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\nexport const FooterContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});\n\nexport const Footer = forwardRef(function 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"],"names":[],"version":3,"file":"Content.cjs.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 {inertValue} from '@react-aria/utils';\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  id?: string\n}\n\ninterface HeadingProps extends ContentProps {\n  level?: number\n}\n\nexport const HeadingContext = createContext<ContextValue<Partial<HeadingProps>, DOMRefValue<HTMLHeadingElement>>>(null);\n\nexport const Heading = forwardRef(// 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\nexport const HeaderContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLElement>>>(null);\n\nexport const Header = forwardRef(function 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\nexport const ContentContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nexport const Content = forwardRef(function 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\nexport const TextContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>(null);\n\nexport const Text = forwardRef(function 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  let text = (\n    <TextAria\n      {...otherProps}\n      ref={domRef}\n      // @ts-ignore - compatibility with React < 19\n      inert={inertValue(isSkeleton)}\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  if (slot && racContext && 'slots' in racContext && !racContext.slots?.[slot]) {\n    return <RACTextContext.Provider value={null}>{text}</RACTextContext.Provider>;\n  }\n\n  return text;\n});\n\nexport const KeyboardContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});\n\nexport const Keyboard = forwardRef(function 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\nexport const FooterContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});\n\nexport const Footer = forwardRef(function 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"],"names":[],"version":3,"file":"Content.cjs.map"}

package/dist/Content.mjs

@@ -27,7 +27,7 @@ const $8e847109a6ab556d$export$d688439359537581 = /*#__PURE__*/ (0, $7TVeb$creat
 const $8e847109a6ab556d$export$a8a3e93435678ff9 = /*#__PURE__*/ (0, $7TVeb$forwardRef)(function Heading(props, ref) {
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $8e847109a6ab556d$export$d688439359537581);
     let domRef = (0, $7TVeb$useDOMRef)(ref);
-    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, isHidden: isHidden, slot: slot, ...otherProps } = props;
+    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles = '', isHidden: isHidden, slot: slot, ...otherProps } = props;
     if (isHidden) return null;
     return /*#__PURE__*/ (0, $7TVeb$jsx)((0, $7TVeb$Heading), {
         ...otherProps,
@@ -41,7 +41,7 @@ const $8e847109a6ab556d$export$e0e4026c12a8bdbb = /*#__PURE__*/ (0, $7TVeb$creat
 const $8e847109a6ab556d$export$8b251419efc915eb = /*#__PURE__*/ (0, $7TVeb$forwardRef)(function Header(props, ref) {
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $8e847109a6ab556d$export$e0e4026c12a8bdbb);
     let domRef = (0, $7TVeb$useDOMRef)(ref);
-    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, isHidden: isHidden, slot: slot, ...otherProps } = props;
+    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles = '', isHidden: isHidden, slot: slot, ...otherProps } = props;
     if (isHidden) return null;
     return /*#__PURE__*/ (0, $7TVeb$jsx)((0, $7TVeb$Header), {
         ...otherProps,
@@ -55,7 +55,7 @@ const $8e847109a6ab556d$export$1cbdd774077931b4 = /*#__PURE__*/ (0, $7TVeb$creat
 const $8e847109a6ab556d$export$7c6e2c02157bb7d2 = /*#__PURE__*/ (0, $7TVeb$forwardRef)(function Content(props, ref) {
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $8e847109a6ab556d$export$1cbdd774077931b4);
     let domRef = (0, $7TVeb$useDOMRef)(ref);
-    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, isHidden: isHidden, slot: slot, ...otherProps } = props;
+    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles = '', isHidden: isHidden, slot: slot, ...otherProps } = props;
     if (isHidden) return null;
     return /*#__PURE__*/ (0, $7TVeb$jsx)("div", {
         ...otherProps,
@@ -69,7 +69,7 @@ const $8e847109a6ab556d$export$9afb8bc826b033ea = /*#__PURE__*/ (0, $7TVeb$creat
 const $8e847109a6ab556d$export$5f1af8db9871e1d6 = /*#__PURE__*/ (0, $7TVeb$forwardRef)(function Text(props, ref) {
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $8e847109a6ab556d$export$9afb8bc826b033ea);
     let domRef = (0, $7TVeb$useDOMRef)(ref);
-    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, isHidden: isHidden, slot: slot, children: children, ...otherProps } = props;
+    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles = '', isHidden: isHidden, slot: slot, children: children, ...otherProps } = props;
     let racContext = (0, $7TVeb$useContext)((0, $7TVeb$TextContext));
     let isSkeleton = (0, $5ad421ec19460c48$export$4f8dc7555740235c)();
     [children, UNSAFE_style] = (0, $5ad421ec19460c48$export$a05a0b8a311cd65f)(children, UNSAFE_style);
@@ -95,7 +95,7 @@ const $8e847109a6ab556d$export$744d98a3b8a94e1c = /*#__PURE__*/ (0, $7TVeb$creat
 const $8e847109a6ab556d$export$16e4d70cc375e707 = /*#__PURE__*/ (0, $7TVeb$forwardRef)(function Keyboard(props, ref) {
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $8e847109a6ab556d$export$744d98a3b8a94e1c);
     let domRef = (0, $7TVeb$useDOMRef)(ref);
-    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, isHidden: isHidden, slot: slot, ...otherProps } = props;
+    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles = '', isHidden: isHidden, slot: slot, ...otherProps } = props;
     if (isHidden) return null;
     return /*#__PURE__*/ (0, $7TVeb$jsx)((0, $7TVeb$Keyboard), {
         ...otherProps,
@@ -109,7 +109,7 @@ const $8e847109a6ab556d$export$5630640b68817ed6 = /*#__PURE__*/ (0, $7TVeb$creat
 const $8e847109a6ab556d$export$a06f1c675e846f6f = /*#__PURE__*/ (0, $7TVeb$forwardRef)(function Footer(props, ref) {
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $8e847109a6ab556d$export$5630640b68817ed6);
     let domRef = (0, $7TVeb$useDOMRef)(ref);
-    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, isHidden: isHidden, slot: slot, ...otherProps } = props;
+    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles = '', isHidden: isHidden, slot: slot, ...otherProps } = props;
     if (isHidden) return null;
     return /*#__PURE__*/ (0, $7TVeb$jsx)("footer", {
         ...otherProps,

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 {inertValue} from '@react-aria/utils';\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  id?: string\n}\n\ninterface HeadingProps extends ContentProps {\n  level?: number\n}\n\nexport const HeadingContext = createContext<ContextValue<Partial<HeadingProps>, DOMRefValue<HTMLHeadingElement>>>(null);\n\nexport const Heading = forwardRef(// 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\nexport const HeaderContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLElement>>>(null);\n\nexport const Header = forwardRef(function 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\nexport const ContentContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nexport const Content = forwardRef(function 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\nexport const TextContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>(null);\n\nexport const Text = forwardRef(function 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  let text = (\n    <TextAria\n      {...otherProps}\n      ref={domRef}\n      // @ts-ignore - compatibility with React < 19\n      inert={inertValue(isSkeleton)}\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  if (slot && racContext && 'slots' in racContext && !racContext.slots?.[slot]) {\n    return <RACTextContext.Provider value={null}>{text}</RACTextContext.Provider>;\n  }\n\n  return text;\n});\n\nexport const KeyboardContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});\n\nexport const Keyboard = forwardRef(function 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\nexport const FooterContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});\n\nexport const Footer = forwardRef(function 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"],"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 {inertValue} from '@react-aria/utils';\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  id?: string\n}\n\ninterface HeadingProps extends ContentProps {\n  level?: number\n}\n\nexport const HeadingContext = createContext<ContextValue<Partial<HeadingProps>, DOMRefValue<HTMLHeadingElement>>>(null);\n\nexport const Heading = forwardRef(// 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\nexport const HeaderContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLElement>>>(null);\n\nexport const Header = forwardRef(function 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\nexport const ContentContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nexport const Content = forwardRef(function 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\nexport const TextContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>(null);\n\nexport const Text = forwardRef(function 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  let text = (\n    <TextAria\n      {...otherProps}\n      ref={domRef}\n      // @ts-ignore - compatibility with React < 19\n      inert={inertValue(isSkeleton)}\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  if (slot && racContext && 'slots' in racContext && !racContext.slots?.[slot]) {\n    return <RACTextContext.Provider value={null}>{text}</RACTextContext.Provider>;\n  }\n\n  return text;\n});\n\nexport const KeyboardContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});\n\nexport const Keyboard = forwardRef(function 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\nexport const FooterContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});\n\nexport const Footer = forwardRef(function 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"],"names":[],"version":3,"file":"Content.mjs.map"}