@react-spectrum/s2 3.0.0-nightly-ab9fd5c68-241125 → 3.0.0-nightly-10a43de88-241127

package/dist/Modal.cjs

@@ -54,7 +54,7 @@ const $8e678305a8c10028$var$modalOverlayStyles = function anonymous(props) {
     else if (props.isEntering) rules += ' _Va';
     return rules;
 };
-function $8e678305a8c10028$var$Modal(props1, ref) {
+const $8e678305a8c10028$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $j6TWk$react.forwardRef)(function Modal(props1, ref) {
     let domRef = (0, $j6TWk$reactspectrumutils.useDOMRef)(ref);
     let colorScheme = (0, $j6TWk$react.useContext)((0, $914a06b3a1c679bc$exports.ColorSchemeContext));
     let { locale: locale, direction: direction } = (0, $j6TWk$reactariacomponents.useLocale)();
@@ -127,10 +127,7 @@ function $8e678305a8c10028$var$Modal(props1, ref) {
                 })
         })
     });
-}
-/**
- * A modal is an overlay element which blocks interaction with elements outside it.
- */ let $8e678305a8c10028$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $j6TWk$react.forwardRef)($8e678305a8c10028$var$Modal);
+});
 
 
 //# sourceMappingURL=Modal.cjs.map

package/dist/Modal.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAoBD,MAAM;AAUN,MAAM;AAYN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBN,SAAS,4BAAM,MAAiB,EAAE,GAA2B;IAC3D,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,4CAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,oCAAQ;IAElC,0DAA0D;IAC1D,IAAI,WAAW,CAAA,GAAA,wBAAU,EAAE,CAAC;QACzB,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,qBACE,gCAAC,CAAA,GAAA,uCAAW;QACT,GAAG,MAAK;QACT,WAAW,CAAA,cAAe,yCAAmB;gBAAC,GAAG,WAAW;6BAAE;YAAW;kBACzE,cAAA,gCAAC,CAAA,GAAA,gCAAO;YACL,GAAG,MAAK;YACT,KAAK;YACL,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAiEvB;oBAAC,GAAG,WAAW;oBAAE,MAAM,OAAM,IAAI;gBAAA;;;AAG5C;AAEA;;CAEC,GACD,IAAI,0DAAS,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Modal.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 {colorScheme} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ModalProps extends ModalOverlayProps {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst fade = keyframes(`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`);\n\nconst fadeAndSlide = keyframes(`\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`);\n\nconst modalOverlayStyles = style({\n  ...colorScheme(),\n  position: 'fixed',\n  inset: 0,\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  animation: {\n    isEntering: fade,\n    isExiting: fade\n  },\n  animationDuration: {\n    isEntering: 250,\n    isExiting: 130\n  },\n  animationDirection: {\n    isEntering: 'normal',\n    isExiting: 'reverse'\n  }\n});\n\nfunction Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let modalRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  return (\n    <ModalOverlay\n      {...props}\n      className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>\n      <RACModal\n        {...props}\n        ref={modalRef}\n        className={renderProps => style({\n          display: 'flex',\n          flexDirection: 'column',\n          borderRadius: {\n            default: 'xl',\n            size: {\n              fullscreenTakeover: 'none'\n            }\n          },\n          width: {\n            size: {\n              // Copied from designs, not sure if correct.\n              S: 336,\n              M: 416,\n              L: 576,\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          height: {\n            size: {\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          maxWidth: {\n            default: '[90vw]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          maxHeight: {\n            default: '[90vh]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          '--s2-container-bg': {\n            type: 'backgroundColor',\n            value: 'layer-2'\n          },\n          backgroundColor: '--s2-container-bg',\n          animation: {\n            isEntering: fadeAndSlide,\n            isExiting: fade\n          },\n          animationDuration: {\n            isEntering: 250,\n            isExiting: 130\n          },\n          animationDelay: {\n            isEntering: 160,\n            isExiting: 0\n          },\n          animationDirection: {\n            isEntering: 'normal',\n            isExiting: 'reverse'\n          },\n          animationFillMode: 'both',\n          // Transparent outline for WHCM.\n          outlineStyle: 'solid',\n          outlineWidth: 1,\n          outlineColor: 'transparent'\n        })({...renderProps, size: props.size})} />\n    </ModalOverlay>\n  );\n}\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nlet _Modal = forwardRef(Modal);\nexport {_Modal as Modal};\n"],"names":[],"version":3,"file":"Modal.cjs.map"}
+{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAoBD,MAAM;AAUN,MAAM;AAYN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BC,MAAM,0DAAQ,CAAA,GAAA,uBAAS,EAAE,SAAS,MAAM,MAAiB,EAAE,GAA2B;IAC3F,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,4CAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,oCAAQ;IAElC,0DAA0D;IAC1D,IAAI,WAAW,CAAA,GAAA,wBAAU,EAAE,CAAC;QACzB,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,qBACE,gCAAC,CAAA,GAAA,uCAAW;QACT,GAAG,MAAK;QACT,WAAW,CAAA,cAAe,yCAAmB;gBAAC,GAAG,WAAW;6BAAE;YAAW;kBACzE,cAAA,gCAAC,CAAA,GAAA,gCAAO;YACL,GAAG,MAAK;YACT,KAAK;YACL,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAiEvB;oBAAC,GAAG,WAAW;oBAAE,MAAM,OAAM,IAAI;gBAAA;;;AAG5C","sources":["packages/@react-spectrum/s2/src/Modal.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 {colorScheme} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ModalProps extends ModalOverlayProps {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst fade = keyframes(`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`);\n\nconst fadeAndSlide = keyframes(`\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`);\n\nconst modalOverlayStyles = style({\n  ...colorScheme(),\n  position: 'fixed',\n  inset: 0,\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  animation: {\n    isEntering: fade,\n    isExiting: fade\n  },\n  animationDuration: {\n    isEntering: 250,\n    isExiting: 130\n  },\n  animationDirection: {\n    isEntering: 'normal',\n    isExiting: 'reverse'\n  }\n});\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nexport const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let modalRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  return (\n    <ModalOverlay\n      {...props}\n      className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>\n      <RACModal\n        {...props}\n        ref={modalRef}\n        className={renderProps => style({\n          display: 'flex',\n          flexDirection: 'column',\n          borderRadius: {\n            default: 'xl',\n            size: {\n              fullscreenTakeover: 'none'\n            }\n          },\n          width: {\n            size: {\n              // Copied from designs, not sure if correct.\n              S: 336,\n              M: 416,\n              L: 576,\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          height: {\n            size: {\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          maxWidth: {\n            default: '[90vw]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          maxHeight: {\n            default: '[90vh]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          '--s2-container-bg': {\n            type: 'backgroundColor',\n            value: 'layer-2'\n          },\n          backgroundColor: '--s2-container-bg',\n          animation: {\n            isEntering: fadeAndSlide,\n            isExiting: fade\n          },\n          animationDuration: {\n            isEntering: 250,\n            isExiting: 130\n          },\n          animationDelay: {\n            isEntering: 160,\n            isExiting: 0\n          },\n          animationDirection: {\n            isEntering: 'normal',\n            isExiting: 'reverse'\n          },\n          animationFillMode: 'both',\n          // Transparent outline for WHCM.\n          outlineStyle: 'solid',\n          outlineWidth: 1,\n          outlineColor: 'transparent'\n        })({...renderProps, size: props.size})} />\n    </ModalOverlay>\n  );\n});\n"],"names":[],"version":3,"file":"Modal.cjs.map"}

package/dist/Modal.css.map

@@ -1 +1 @@
-{"mappings":"AC8Ba;;;;;;;;;;AAUQ;;;;;;;;;;;;AAYM;EAAA;;;;EAAA;;;;;;EAAA;IAAA;;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4CO;;;;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA5CP;;AA4CO","sources":["be2ce4448c91abb5","packages/@react-spectrum/s2/src/Modal.tsx"],"sourcesContent":["@import \"003d01b6d2f33501\";\n@import \"15edcb25b251bc58\";\n@import \"1ef8b667afb08263\";\n@import \"3b2472fc4486ca92\";\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 {colorScheme} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ModalProps extends ModalOverlayProps {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst fade = keyframes(`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`);\n\nconst fadeAndSlide = keyframes(`\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`);\n\nconst modalOverlayStyles = style({\n  ...colorScheme(),\n  position: 'fixed',\n  inset: 0,\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  animation: {\n    isEntering: fade,\n    isExiting: fade\n  },\n  animationDuration: {\n    isEntering: 250,\n    isExiting: 130\n  },\n  animationDirection: {\n    isEntering: 'normal',\n    isExiting: 'reverse'\n  }\n});\n\nfunction Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let modalRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  return (\n    <ModalOverlay\n      {...props}\n      className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>\n      <RACModal\n        {...props}\n        ref={modalRef}\n        className={renderProps => style({\n          display: 'flex',\n          flexDirection: 'column',\n          borderRadius: {\n            default: 'xl',\n            size: {\n              fullscreenTakeover: 'none'\n            }\n          },\n          width: {\n            size: {\n              // Copied from designs, not sure if correct.\n              S: 336,\n              M: 416,\n              L: 576,\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          height: {\n            size: {\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          maxWidth: {\n            default: '[90vw]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          maxHeight: {\n            default: '[90vh]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          '--s2-container-bg': {\n            type: 'backgroundColor',\n            value: 'layer-2'\n          },\n          backgroundColor: '--s2-container-bg',\n          animation: {\n            isEntering: fadeAndSlide,\n            isExiting: fade\n          },\n          animationDuration: {\n            isEntering: 250,\n            isExiting: 130\n          },\n          animationDelay: {\n            isEntering: 160,\n            isExiting: 0\n          },\n          animationDirection: {\n            isEntering: 'normal',\n            isExiting: 'reverse'\n          },\n          animationFillMode: 'both',\n          // Transparent outline for WHCM.\n          outlineStyle: 'solid',\n          outlineWidth: 1,\n          outlineColor: 'transparent'\n        })({...renderProps, size: props.size})} />\n    </ModalOverlay>\n  );\n}\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nlet _Modal = forwardRef(Modal);\nexport {_Modal as Modal};\n"],"names":[],"version":3,"file":"Modal.css.map"}
+{"mappings":"AC8Ba;;;;;;;;;;AAUQ;;;;;;;;;;;;AAYM;EAAA;;;;EAAA;;;;;;EAAA;IAAA;;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+CO;;;;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA/CP;;AA+CO","sources":["be2ce4448c91abb5","packages/@react-spectrum/s2/src/Modal.tsx"],"sourcesContent":["@import \"003d01b6d2f33501\";\n@import \"15edcb25b251bc58\";\n@import \"1ef8b667afb08263\";\n@import \"3b2472fc4486ca92\";\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 {colorScheme} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ModalProps extends ModalOverlayProps {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst fade = keyframes(`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`);\n\nconst fadeAndSlide = keyframes(`\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`);\n\nconst modalOverlayStyles = style({\n  ...colorScheme(),\n  position: 'fixed',\n  inset: 0,\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  animation: {\n    isEntering: fade,\n    isExiting: fade\n  },\n  animationDuration: {\n    isEntering: 250,\n    isExiting: 130\n  },\n  animationDirection: {\n    isEntering: 'normal',\n    isExiting: 'reverse'\n  }\n});\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nexport const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let modalRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  return (\n    <ModalOverlay\n      {...props}\n      className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>\n      <RACModal\n        {...props}\n        ref={modalRef}\n        className={renderProps => style({\n          display: 'flex',\n          flexDirection: 'column',\n          borderRadius: {\n            default: 'xl',\n            size: {\n              fullscreenTakeover: 'none'\n            }\n          },\n          width: {\n            size: {\n              // Copied from designs, not sure if correct.\n              S: 336,\n              M: 416,\n              L: 576,\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          height: {\n            size: {\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          maxWidth: {\n            default: '[90vw]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          maxHeight: {\n            default: '[90vh]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          '--s2-container-bg': {\n            type: 'backgroundColor',\n            value: 'layer-2'\n          },\n          backgroundColor: '--s2-container-bg',\n          animation: {\n            isEntering: fadeAndSlide,\n            isExiting: fade\n          },\n          animationDuration: {\n            isEntering: 250,\n            isExiting: 130\n          },\n          animationDelay: {\n            isEntering: 160,\n            isExiting: 0\n          },\n          animationDirection: {\n            isEntering: 'normal',\n            isExiting: 'reverse'\n          },\n          animationFillMode: 'both',\n          // Transparent outline for WHCM.\n          outlineStyle: 'solid',\n          outlineWidth: 1,\n          outlineColor: 'transparent'\n        })({...renderProps, size: props.size})} />\n    </ModalOverlay>\n  );\n});\n"],"names":[],"version":3,"file":"Modal.css.map"}

package/dist/Modal.mjs

@@ -1,7 +1,7 @@
 import "./Modal.css";
 import {ColorSchemeContext as $9affbfa4e13b9582$export$374e0245597d19a3} from "./Provider.mjs";
 import {jsx as $fdAcL$jsx} from "react/jsx-runtime";
-import {useContext as $fdAcL$useContext, useCallback as $fdAcL$useCallback, forwardRef as $fdAcL$forwardRef} from "react";
+import {forwardRef as $fdAcL$forwardRef, useContext as $fdAcL$useContext, useCallback as $fdAcL$useCallback} from "react";
 import {useLocale as $fdAcL$useLocale, ModalOverlay as $fdAcL$ModalOverlay, Modal as $fdAcL$Modal} from "react-aria-components";
 import {useDOMRef as $fdAcL$useDOMRef} from "@react-spectrum/utils";
 
@@ -48,7 +48,7 @@ const $c46d159bd615e407$var$modalOverlayStyles = function anonymous(props) {
     else if (props.isEntering) rules += ' _Va';
     return rules;
 };
-function $c46d159bd615e407$var$Modal(props1, ref) {
+const $c46d159bd615e407$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $fdAcL$forwardRef)(function Modal(props1, ref) {
     let domRef = (0, $fdAcL$useDOMRef)(ref);
     let colorScheme = (0, $fdAcL$useContext)((0, $9affbfa4e13b9582$export$374e0245597d19a3));
     let { locale: locale, direction: direction } = (0, $fdAcL$useLocale)();
@@ -121,10 +121,7 @@ function $c46d159bd615e407$var$Modal(props1, ref) {
                 })
         })
     });
-}
-/**
- * A modal is an overlay element which blocks interaction with elements outside it.
- */ let $c46d159bd615e407$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $fdAcL$forwardRef)($c46d159bd615e407$var$Modal);
+});
 
 
 export {$c46d159bd615e407$export$2b77a92f1a5ad772 as Modal};

package/dist/Modal.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAoBD,MAAM;AAUN,MAAM;AAYN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBN,SAAS,4BAAM,MAAiB,EAAE,GAA2B;IAC3D,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAElC,0DAA0D;IAC1D,IAAI,WAAW,CAAA,GAAA,kBAAU,EAAE,CAAC;QACzB,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,qBACE,gBAAC,CAAA,GAAA,mBAAW;QACT,GAAG,MAAK;QACT,WAAW,CAAA,cAAe,yCAAmB;gBAAC,GAAG,WAAW;6BAAE;YAAW;kBACzE,cAAA,gBAAC,CAAA,GAAA,YAAO;YACL,GAAG,MAAK;YACT,KAAK;YACL,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAiEvB;oBAAC,GAAG,WAAW;oBAAE,MAAM,OAAM,IAAI;gBAAA;;;AAG5C;AAEA;;CAEC,GACD,IAAI,0DAAS,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Modal.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 {colorScheme} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ModalProps extends ModalOverlayProps {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst fade = keyframes(`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`);\n\nconst fadeAndSlide = keyframes(`\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`);\n\nconst modalOverlayStyles = style({\n  ...colorScheme(),\n  position: 'fixed',\n  inset: 0,\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  animation: {\n    isEntering: fade,\n    isExiting: fade\n  },\n  animationDuration: {\n    isEntering: 250,\n    isExiting: 130\n  },\n  animationDirection: {\n    isEntering: 'normal',\n    isExiting: 'reverse'\n  }\n});\n\nfunction Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let modalRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  return (\n    <ModalOverlay\n      {...props}\n      className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>\n      <RACModal\n        {...props}\n        ref={modalRef}\n        className={renderProps => style({\n          display: 'flex',\n          flexDirection: 'column',\n          borderRadius: {\n            default: 'xl',\n            size: {\n              fullscreenTakeover: 'none'\n            }\n          },\n          width: {\n            size: {\n              // Copied from designs, not sure if correct.\n              S: 336,\n              M: 416,\n              L: 576,\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          height: {\n            size: {\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          maxWidth: {\n            default: '[90vw]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          maxHeight: {\n            default: '[90vh]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          '--s2-container-bg': {\n            type: 'backgroundColor',\n            value: 'layer-2'\n          },\n          backgroundColor: '--s2-container-bg',\n          animation: {\n            isEntering: fadeAndSlide,\n            isExiting: fade\n          },\n          animationDuration: {\n            isEntering: 250,\n            isExiting: 130\n          },\n          animationDelay: {\n            isEntering: 160,\n            isExiting: 0\n          },\n          animationDirection: {\n            isEntering: 'normal',\n            isExiting: 'reverse'\n          },\n          animationFillMode: 'both',\n          // Transparent outline for WHCM.\n          outlineStyle: 'solid',\n          outlineWidth: 1,\n          outlineColor: 'transparent'\n        })({...renderProps, size: props.size})} />\n    </ModalOverlay>\n  );\n}\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nlet _Modal = forwardRef(Modal);\nexport {_Modal as Modal};\n"],"names":[],"version":3,"file":"Modal.mjs.map"}
+{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAoBD,MAAM;AAUN,MAAM;AAYN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BC,MAAM,0DAAQ,CAAA,GAAA,iBAAS,EAAE,SAAS,MAAM,MAAiB,EAAE,GAA2B;IAC3F,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAElC,0DAA0D;IAC1D,IAAI,WAAW,CAAA,GAAA,kBAAU,EAAE,CAAC;QACzB,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;QACX;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,qBACE,gBAAC,CAAA,GAAA,mBAAW;QACT,GAAG,MAAK;QACT,WAAW,CAAA,cAAe,yCAAmB;gBAAC,GAAG,WAAW;6BAAE;YAAW;kBACzE,cAAA,gBAAC,CAAA,GAAA,YAAO;YACL,GAAG,MAAK;YACT,KAAK;YACL,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAiEvB;oBAAC,GAAG,WAAW;oBAAE,MAAM,OAAM,IAAI;gBAAA;;;AAG5C","sources":["packages/@react-spectrum/s2/src/Modal.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 {colorScheme} from './style-utils' with {type: 'macro'};\nimport {ColorSchemeContext} from './Provider';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef, MutableRefObject, useCallback, useContext} from 'react';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\ninterface ModalProps extends ModalOverlayProps {\n  /**\n   * The size of the Modal.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'\n}\n\nconst fade = keyframes(`\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n`);\n\nconst fadeAndSlide = keyframes(`\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`);\n\nconst modalOverlayStyles = style({\n  ...colorScheme(),\n  position: 'fixed',\n  inset: 0,\n  isolation: 'isolate',\n  backgroundColor: 'transparent-black-500',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  animation: {\n    isEntering: fade,\n    isExiting: fade\n  },\n  animationDuration: {\n    isEntering: 250,\n    isExiting: 130\n  },\n  animationDirection: {\n    isEntering: 'normal',\n    isExiting: 'reverse'\n  }\n});\n\n/**\n * A modal is an overlay element which blocks interaction with elements outside it.\n */\nexport const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {\n  let domRef = useDOMRef(ref);\n  let colorScheme = useContext(ColorSchemeContext);\n  let {locale, direction} = useLocale();\n\n  // TODO: should we pass through lang and dir props in RAC?\n  let modalRef = useCallback((el: HTMLDivElement) => {\n    (domRef as MutableRefObject<HTMLDivElement>).current = el;\n    if (el) {\n      el.lang = locale;\n      el.dir = direction;\n    }\n  }, [locale, direction, domRef]);\n\n  return (\n    <ModalOverlay\n      {...props}\n      className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>\n      <RACModal\n        {...props}\n        ref={modalRef}\n        className={renderProps => style({\n          display: 'flex',\n          flexDirection: 'column',\n          borderRadius: {\n            default: 'xl',\n            size: {\n              fullscreenTakeover: 'none'\n            }\n          },\n          width: {\n            size: {\n              // Copied from designs, not sure if correct.\n              S: 336,\n              M: 416,\n              L: 576,\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          height: {\n            size: {\n              fullscreen: '[calc(100% - 40px)]',\n              fullscreenTakeover: 'full'\n            }\n          },\n          maxWidth: {\n            default: '[90vw]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          maxHeight: {\n            default: '[90vh]',\n            size: {\n              fullscreen: 'none',\n              fullscreenTakeover: 'none'\n            }\n          },\n          '--s2-container-bg': {\n            type: 'backgroundColor',\n            value: 'layer-2'\n          },\n          backgroundColor: '--s2-container-bg',\n          animation: {\n            isEntering: fadeAndSlide,\n            isExiting: fade\n          },\n          animationDuration: {\n            isEntering: 250,\n            isExiting: 130\n          },\n          animationDelay: {\n            isEntering: 160,\n            isExiting: 0\n          },\n          animationDirection: {\n            isEntering: 'normal',\n            isExiting: 'reverse'\n          },\n          animationFillMode: 'both',\n          // Transparent outline for WHCM.\n          outlineStyle: 'solid',\n          outlineWidth: 1,\n          outlineColor: 'transparent'\n        })({...renderProps, size: props.size})} />\n    </ModalOverlay>\n  );\n});\n"],"names":[],"version":3,"file":"Modal.mjs.map"}

package/dist/NumberField.cjs

@@ -142,7 +142,7 @@ const $a366ef8f467b1cb5$var$stepperContainerStyles = function anonymous(props) {
     else if (props.size === "S") rules += ' Db';
     return rules;
 };
-function $a366ef8f467b1cb5$var$NumberField(props1, ref) {
+const $a366ef8f467b1cb5$export$63c5fa0b2fdccd2e = /*#__PURE__*/ (0, $fwzUK$react.forwardRef)(function NumberField(props1, ref) {
     [props1, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props1, ref, $a366ef8f467b1cb5$export$b414a48cf5dcbc11);
     let { label: label, contextualHelp: contextualHelp, description: descriptionMessage, errorMessage: errorMessage, hideStepper: hideStepper, isRequired: isRequired, size: size = 'M', labelPosition: labelPosition = 'top', necessityIndicator: necessityIndicator, labelAlign: labelAlign = 'start', UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, ...numberFieldProps } = props1;
     let formContext = (0, $fwzUK$react.useContext)((0, $bfa4962d90c8af48$exports.FormContext));
@@ -336,7 +336,7 @@ function $a366ef8f467b1cb5$var$NumberField(props1, ref) {
             });
         }
     });
-}
+});
 const $a366ef8f467b1cb5$var$additionalButtonHTMLAttributes = new Set([
     'form',
     'formAction',
@@ -385,9 +385,6 @@ let $a366ef8f467b1cb5$var$StepButton = /*#__PURE__*/ (0, $fwzUK$react.forwardRef
         "data-focus-visible": isFocusVisible || undefined
     });
 });
-/**
- * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.
- */ let $a366ef8f467b1cb5$export$63c5fa0b2fdccd2e = /*#__PURE__*/ (0, $fwzUK$react.forwardRef)($a366ef8f467b1cb5$var$NumberField);
 // replace from RAC
 function $a366ef8f467b1cb5$var$useRenderProps(props) {
     let { className: className, style: style, children: children, defaultClassName: defaultClassName, defaultChildren: defaultChildren, defaultStyle: defaultStyle, values: values } = props;

package/dist/NumberField.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/NumberField.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 Add from '../ui-icons/Add';\nimport {\n  ButtonProps as AriaButtonProps,\n  NumberField as AriaNumberField,\n  NumberFieldProps as AriaNumberFieldProps,\n  ButtonContext,\n  ContextValue,\n  InputContext,\n  Text,\n  useContextProps\n} from 'react-aria-components';\nimport {baseColor, space, style} from '../style' with {type: 'macro'};\nimport {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport Dash from '../ui-icons/Dash';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useButton, useFocusRing, useHover} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface NumberFieldProps extends\n  Omit<AriaNumberFieldProps, 'children' | 'className' | 'style'>,\n  StyleProps,\n  SpectrumLabelableProps,\n  HelpTextProps {\n  /**\n   * Whether to hide the increment and decrement buttons.\n   * @default false\n   */\n  hideStepper?: boolean,\n  /**\n   * The size of the NumberField.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const NumberFieldContext = createContext<ContextValue<NumberFieldProps, TextFieldRef>>(null);\n\nconst inputButton = style({\n  display: 'flex',\n  outlineStyle: 'none',\n  textAlign: 'center',\n  borderStyle: 'none',\n  borderTopRadius: {\n    default: {\n      size: {\n        S: '[3px]',\n        M: '[4px]',\n        L: '[5px]',\n        XL: '[6px]'\n      }\n    },\n    type: {\n      decrementStep: 'none'\n    }\n  },\n  borderBottomRadius: {\n    default: {\n      size: {\n        S: '[3px]',\n        M: '[4px]',\n        L: '[5px]',\n        XL: '[6px]'\n      }\n    },\n    type: {\n      incrementStep: 'none'\n    }\n  },\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32\n    }\n  },\n  height: 'auto',\n  marginStart: {\n    default: 'text-to-control',\n    type: {\n      increment: 0\n    }\n  },\n  aspectRatio: 'square',\n  flexShrink: 0,\n  minHeight: 0,\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace'\n    }\n  },\n  cursor: 'default'\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: {\n    default: 0,\n    type: {\n      incrementStep: 270,\n      decrementStep: 90\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst stepperContainerStyles = style({\n  display: 'flex',\n  flexDirection: 'row',\n  gap: {\n    size: {\n      S: 8,\n      M: 4,\n      L: 8,\n      XL: 8\n    }\n  },\n  paddingEnd: {\n    size: {\n      S: 2,\n      M: 4,\n      L: space(6),\n      XL: space(6)\n    }\n  }\n});\n\nfunction NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);\n  let {\n    label,\n    contextualHelp,\n    description: descriptionMessage,\n    errorMessage,\n    hideStepper,\n    isRequired,\n    size = 'M',\n    labelPosition = 'top',\n    necessityIndicator,\n    labelAlign = 'start',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    ...numberFieldProps\n  } = props;\n  let formContext = useContext(FormContext);\n  let domRef = useRef<HTMLDivElement | null>(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let decrementButtonRef = useRef<HTMLDivElement | null>(null);\n  let incrementButtonRef = useRef<HTMLDivElement | null>(null);\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\n  return (\n    <AriaNumberField\n      isRequired={isRequired}\n      {...numberFieldProps}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {\n          ({isDisabled, isInvalid}) => {\n            return  (\n              <>\n                <FieldLabel\n                  isDisabled={isDisabled}\n                  isRequired={isRequired}\n                  size={size}\n                  labelPosition={labelPosition}\n                  labelAlign={labelAlign}\n                  necessityIndicator={necessityIndicator}\n                  contextualHelp={contextualHelp}>\n                  {label}\n                </FieldLabel>\n                <FieldGroup\n                  role=\"presentation\"\n                  isDisabled={isDisabled}\n                  isInvalid={isInvalid}\n                  size={size}\n                  styles={style({\n                    ...fieldInput(),\n                    paddingStart: 'edge-to-text',\n                    paddingEnd: {\n                      default: 0,\n                      isStepperHidden: 'edge-to-text'\n                    }\n                  })({size, isStepperHidden: hideStepper})}>\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                  {!hideStepper && <div className={stepperContainerStyles({size})}>\n                    <StepButton\n                      ref={decrementButtonRef}\n                      slot=\"decrement\"\n                      style={renderProps => pressScale(decrementButtonRef)(renderProps)}\n                      className={renderProps => inputButton({\n                        ...renderProps,\n                        type: 'decrement',\n                        size\n                      })}>\n                      <Dash size={size} className={iconStyles({})} />\n                    </StepButton>\n                    <StepButton\n                      ref={incrementButtonRef}\n                      slot=\"increment\"\n                      style={renderProps => pressScale(incrementButtonRef)(renderProps)}\n                      className={renderProps => inputButton({\n                        ...renderProps,\n                        type: 'increment',\n                        size\n                      })}>\n                      <Add size={size} className={iconStyles({})} />\n                    </StepButton>\n                  </div>}\n                </FieldGroup>\n                {descriptionMessage && <Text slot=\"description\">{descriptionMessage}</Text>}\n                <HelpText\n                  size={size}\n                  isDisabled={isDisabled}\n                  isInvalid={isInvalid}\n                  description={descriptionMessage}>\n                  {errorMessage}\n                </HelpText>\n              </>\n            );\n          }\n        }\n    </AriaNumberField>\n  );\n}\n\ninterface StepButtonProps extends AriaButtonProps {\n}\n\nconst additionalButtonHTMLAttributes = new Set(['form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'name', 'value']);\n\nlet StepButton = forwardRef((props: StepButtonProps, ref: ForwardedRef<HTMLDivElement>) => {\n  [props, ref] = useContextProps(props, ref, ButtonContext as any);\n  let ctx = props as any;\n  /**\n   * Must use div for now because Safari pointer event bugs on disabled form elements.\n   * Link https://bugs.webkit.org/show_bug.cgi?id=219188.\n   */\n  let {buttonProps, isPressed} = useButton({...props, elementType: 'div'}, ref);\n  let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);\n  let {hoverProps, isHovered} = useHover(props);\n  let renderProps = useRenderProps({\n    ...props,\n    values: {isHovered, isPressed, isFocused, isFocusVisible, isDisabled: props.isDisabled || false},\n    defaultClassName: 'react-aria-Button'\n  });\n  return (\n    <div\n      {...filterDOMProps(props, {propNames: additionalButtonHTMLAttributes})}\n      {...mergeProps(buttonProps, focusProps, hoverProps)}\n      {...renderProps}\n      ref={ref}\n      slot={props.slot || undefined}\n      data-disabled={props.isDisabled || undefined}\n      data-pressed={ctx.isPressed || isPressed || undefined}\n      data-hovered={isHovered || undefined}\n      data-focused={isFocused || undefined}\n      data-focus-visible={isFocusVisible || undefined} />\n  );\n});\n\n/**\n * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.\n */\nlet _NumberField = forwardRef(NumberField);\nexport {_NumberField as NumberField};\n\n// replace from RAC\nfunction useRenderProps(props: any) {\n  let {\n    className,\n    style,\n    children,\n    defaultClassName = undefined,\n    defaultChildren = undefined,\n    defaultStyle,\n    values\n  } = props;\n\n  return useMemo(() => {\n    let computedClassName: string | undefined;\n    let computedStyle: CSSProperties | undefined;\n    let computedChildren: ReactNode | undefined;\n\n    if (typeof className === 'function') {\n      computedClassName = className({...values, defaultClassName});\n    } else {\n      computedClassName = className;\n    }\n\n    if (typeof style === 'function') {\n      computedStyle = style({...values, defaultStyle: defaultStyle || {}});\n    } else {\n      computedStyle = style;\n    }\n\n    if (typeof children === 'function') {\n      computedChildren = children({...values, defaultChildren});\n    } else if (children == null) {\n      computedChildren = defaultChildren;\n    } else {\n      computedChildren = children;\n    }\n\n    return {\n      className: computedClassName ?? defaultClassName,\n      style: (computedStyle || defaultStyle) ? {...defaultStyle, ...computedStyle} : undefined,\n      children: computedChildren ?? defaultChildren,\n      'data-rac': ''\n    };\n  }, [className, style, children, defaultClassName, defaultChildren, defaultStyle, values]);\n}\n"],"names":[],"version":3,"file":"NumberField.cjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/NumberField.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 Add from '../ui-icons/Add';\nimport {\n  ButtonProps as AriaButtonProps,\n  NumberField as AriaNumberField,\n  NumberFieldProps as AriaNumberFieldProps,\n  ButtonContext,\n  ContextValue,\n  InputContext,\n  Text,\n  useContextProps\n} from 'react-aria-components';\nimport {baseColor, space, style} from '../style' with {type: 'macro'};\nimport {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport Dash from '../ui-icons/Dash';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useButton, useFocusRing, useHover} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface NumberFieldProps extends\n  Omit<AriaNumberFieldProps, 'children' | 'className' | 'style'>,\n  StyleProps,\n  SpectrumLabelableProps,\n  HelpTextProps {\n  /**\n   * Whether to hide the increment and decrement buttons.\n   * @default false\n   */\n  hideStepper?: boolean,\n  /**\n   * The size of the NumberField.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const NumberFieldContext = createContext<ContextValue<NumberFieldProps, TextFieldRef>>(null);\n\nconst inputButton = style({\n  display: 'flex',\n  outlineStyle: 'none',\n  textAlign: 'center',\n  borderStyle: 'none',\n  borderTopRadius: {\n    default: {\n      size: {\n        S: '[3px]',\n        M: '[4px]',\n        L: '[5px]',\n        XL: '[6px]'\n      }\n    },\n    type: {\n      decrementStep: 'none'\n    }\n  },\n  borderBottomRadius: {\n    default: {\n      size: {\n        S: '[3px]',\n        M: '[4px]',\n        L: '[5px]',\n        XL: '[6px]'\n      }\n    },\n    type: {\n      incrementStep: 'none'\n    }\n  },\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32\n    }\n  },\n  height: 'auto',\n  marginStart: {\n    default: 'text-to-control',\n    type: {\n      increment: 0\n    }\n  },\n  aspectRatio: 'square',\n  flexShrink: 0,\n  minHeight: 0,\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace'\n    }\n  },\n  cursor: 'default'\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: {\n    default: 0,\n    type: {\n      incrementStep: 270,\n      decrementStep: 90\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst stepperContainerStyles = style({\n  display: 'flex',\n  flexDirection: 'row',\n  gap: {\n    size: {\n      S: 8,\n      M: 4,\n      L: 8,\n      XL: 8\n    }\n  },\n  paddingEnd: {\n    size: {\n      S: 2,\n      M: 4,\n      L: space(6),\n      XL: space(6)\n    }\n  }\n});\n\n/**\n * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.\n */\nexport const NumberField = forwardRef(function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);\n  let {\n    label,\n    contextualHelp,\n    description: descriptionMessage,\n    errorMessage,\n    hideStepper,\n    isRequired,\n    size = 'M',\n    labelPosition = 'top',\n    necessityIndicator,\n    labelAlign = 'start',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    ...numberFieldProps\n  } = props;\n  let formContext = useContext(FormContext);\n  let domRef = useRef<HTMLDivElement | null>(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let decrementButtonRef = useRef<HTMLDivElement | null>(null);\n  let incrementButtonRef = useRef<HTMLDivElement | null>(null);\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\n  return (\n    <AriaNumberField\n      isRequired={isRequired}\n      {...numberFieldProps}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {\n          ({isDisabled, isInvalid}) => {\n            return  (\n              <>\n                <FieldLabel\n                  isDisabled={isDisabled}\n                  isRequired={isRequired}\n                  size={size}\n                  labelPosition={labelPosition}\n                  labelAlign={labelAlign}\n                  necessityIndicator={necessityIndicator}\n                  contextualHelp={contextualHelp}>\n                  {label}\n                </FieldLabel>\n                <FieldGroup\n                  role=\"presentation\"\n                  isDisabled={isDisabled}\n                  isInvalid={isInvalid}\n                  size={size}\n                  styles={style({\n                    ...fieldInput(),\n                    paddingStart: 'edge-to-text',\n                    paddingEnd: {\n                      default: 0,\n                      isStepperHidden: 'edge-to-text'\n                    }\n                  })({size, isStepperHidden: hideStepper})}>\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                  {!hideStepper && <div className={stepperContainerStyles({size})}>\n                    <StepButton\n                      ref={decrementButtonRef}\n                      slot=\"decrement\"\n                      style={renderProps => pressScale(decrementButtonRef)(renderProps)}\n                      className={renderProps => inputButton({\n                        ...renderProps,\n                        type: 'decrement',\n                        size\n                      })}>\n                      <Dash size={size} className={iconStyles({})} />\n                    </StepButton>\n                    <StepButton\n                      ref={incrementButtonRef}\n                      slot=\"increment\"\n                      style={renderProps => pressScale(incrementButtonRef)(renderProps)}\n                      className={renderProps => inputButton({\n                        ...renderProps,\n                        type: 'increment',\n                        size\n                      })}>\n                      <Add size={size} className={iconStyles({})} />\n                    </StepButton>\n                  </div>}\n                </FieldGroup>\n                {descriptionMessage && <Text slot=\"description\">{descriptionMessage}</Text>}\n                <HelpText\n                  size={size}\n                  isDisabled={isDisabled}\n                  isInvalid={isInvalid}\n                  description={descriptionMessage}>\n                  {errorMessage}\n                </HelpText>\n              </>\n            );\n          }\n        }\n    </AriaNumberField>\n  );\n});\n\ninterface StepButtonProps extends AriaButtonProps {\n}\n\nconst additionalButtonHTMLAttributes = new Set(['form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'name', 'value']);\n\nlet StepButton = forwardRef((props: StepButtonProps, ref: ForwardedRef<HTMLDivElement>) => {\n  [props, ref] = useContextProps(props, ref, ButtonContext as any);\n  let ctx = props as any;\n  /**\n   * Must use div for now because Safari pointer event bugs on disabled form elements.\n   * Link https://bugs.webkit.org/show_bug.cgi?id=219188.\n   */\n  let {buttonProps, isPressed} = useButton({...props, elementType: 'div'}, ref);\n  let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);\n  let {hoverProps, isHovered} = useHover(props);\n  let renderProps = useRenderProps({\n    ...props,\n    values: {isHovered, isPressed, isFocused, isFocusVisible, isDisabled: props.isDisabled || false},\n    defaultClassName: 'react-aria-Button'\n  });\n  return (\n    <div\n      {...filterDOMProps(props, {propNames: additionalButtonHTMLAttributes})}\n      {...mergeProps(buttonProps, focusProps, hoverProps)}\n      {...renderProps}\n      ref={ref}\n      slot={props.slot || undefined}\n      data-disabled={props.isDisabled || undefined}\n      data-pressed={ctx.isPressed || isPressed || undefined}\n      data-hovered={isHovered || undefined}\n      data-focused={isFocused || undefined}\n      data-focus-visible={isFocusVisible || undefined} />\n  );\n});\n\n// replace from RAC\nfunction useRenderProps(props: any) {\n  let {\n    className,\n    style,\n    children,\n    defaultClassName = undefined,\n    defaultChildren = undefined,\n    defaultStyle,\n    values\n  } = props;\n\n  return useMemo(() => {\n    let computedClassName: string | undefined;\n    let computedStyle: CSSProperties | undefined;\n    let computedChildren: ReactNode | undefined;\n\n    if (typeof className === 'function') {\n      computedClassName = className({...values, defaultClassName});\n    } else {\n      computedClassName = className;\n    }\n\n    if (typeof style === 'function') {\n      computedStyle = style({...values, defaultStyle: defaultStyle || {}});\n    } else {\n      computedStyle = style;\n    }\n\n    if (typeof children === 'function') {\n      computedChildren = children({...values, defaultChildren});\n    } else if (children == null) {\n      computedChildren = defaultChildren;\n    } else {\n      computedChildren = children;\n    }\n\n    return {\n      className: computedClassName ?? defaultClassName,\n      style: (computedStyle || defaultStyle) ? {...defaultStyle, ...computedStyle} : undefined,\n      children: computedChildren ?? defaultChildren,\n      'data-rac': ''\n    };\n  }, [className, style, children, defaultClassName, defaultChildren, defaultStyle, values]);\n}\n"],"names":[],"version":3,"file":"NumberField.cjs.map"}

package/dist/NumberField.css.map

@@ -1 +1 @@
-{"mappings":"AC0DoB;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0ED;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeY;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+DK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBV;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAhLN;EAwJgB;;;;;AAxJhB;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAwJgB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAwBV;;;;AAAA;EAAA;IAAA","sources":["b68c88297d49b771","packages/@react-spectrum/s2/src/NumberField.tsx"],"sourcesContent":["@import \"86e54c0ad46f69c2\";\n@import \"81d36b1860c8fc73\";\n@import \"22edbea9646800a7\";\n@import \"c17a88ce1f4f53da\";\n@import \"e6f6c2ace019f265\";\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 Add from '../ui-icons/Add';\nimport {\n  ButtonProps as AriaButtonProps,\n  NumberField as AriaNumberField,\n  NumberFieldProps as AriaNumberFieldProps,\n  ButtonContext,\n  ContextValue,\n  InputContext,\n  Text,\n  useContextProps\n} from 'react-aria-components';\nimport {baseColor, space, style} from '../style' with {type: 'macro'};\nimport {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport Dash from '../ui-icons/Dash';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useButton, useFocusRing, useHover} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface NumberFieldProps extends\n  Omit<AriaNumberFieldProps, 'children' | 'className' | 'style'>,\n  StyleProps,\n  SpectrumLabelableProps,\n  HelpTextProps {\n  /**\n   * Whether to hide the increment and decrement buttons.\n   * @default false\n   */\n  hideStepper?: boolean,\n  /**\n   * The size of the NumberField.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const NumberFieldContext = createContext<ContextValue<NumberFieldProps, TextFieldRef>>(null);\n\nconst inputButton = style({\n  display: 'flex',\n  outlineStyle: 'none',\n  textAlign: 'center',\n  borderStyle: 'none',\n  borderTopRadius: {\n    default: {\n      size: {\n        S: '[3px]',\n        M: '[4px]',\n        L: '[5px]',\n        XL: '[6px]'\n      }\n    },\n    type: {\n      decrementStep: 'none'\n    }\n  },\n  borderBottomRadius: {\n    default: {\n      size: {\n        S: '[3px]',\n        M: '[4px]',\n        L: '[5px]',\n        XL: '[6px]'\n      }\n    },\n    type: {\n      incrementStep: 'none'\n    }\n  },\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32\n    }\n  },\n  height: 'auto',\n  marginStart: {\n    default: 'text-to-control',\n    type: {\n      increment: 0\n    }\n  },\n  aspectRatio: 'square',\n  flexShrink: 0,\n  minHeight: 0,\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace'\n    }\n  },\n  cursor: 'default'\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: {\n    default: 0,\n    type: {\n      incrementStep: 270,\n      decrementStep: 90\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst stepperContainerStyles = style({\n  display: 'flex',\n  flexDirection: 'row',\n  gap: {\n    size: {\n      S: 8,\n      M: 4,\n      L: 8,\n      XL: 8\n    }\n  },\n  paddingEnd: {\n    size: {\n      S: 2,\n      M: 4,\n      L: space(6),\n      XL: space(6)\n    }\n  }\n});\n\nfunction NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);\n  let {\n    label,\n    contextualHelp,\n    description: descriptionMessage,\n    errorMessage,\n    hideStepper,\n    isRequired,\n    size = 'M',\n    labelPosition = 'top',\n    necessityIndicator,\n    labelAlign = 'start',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    ...numberFieldProps\n  } = props;\n  let formContext = useContext(FormContext);\n  let domRef = useRef<HTMLDivElement | null>(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let decrementButtonRef = useRef<HTMLDivElement | null>(null);\n  let incrementButtonRef = useRef<HTMLDivElement | null>(null);\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\n  return (\n    <AriaNumberField\n      isRequired={isRequired}\n      {...numberFieldProps}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {\n          ({isDisabled, isInvalid}) => {\n            return  (\n              <>\n                <FieldLabel\n                  isDisabled={isDisabled}\n                  isRequired={isRequired}\n                  size={size}\n                  labelPosition={labelPosition}\n                  labelAlign={labelAlign}\n                  necessityIndicator={necessityIndicator}\n                  contextualHelp={contextualHelp}>\n                  {label}\n                </FieldLabel>\n                <FieldGroup\n                  role=\"presentation\"\n                  isDisabled={isDisabled}\n                  isInvalid={isInvalid}\n                  size={size}\n                  styles={style({\n                    ...fieldInput(),\n                    paddingStart: 'edge-to-text',\n                    paddingEnd: {\n                      default: 0,\n                      isStepperHidden: 'edge-to-text'\n                    }\n                  })({size, isStepperHidden: hideStepper})}>\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                  {!hideStepper && <div className={stepperContainerStyles({size})}>\n                    <StepButton\n                      ref={decrementButtonRef}\n                      slot=\"decrement\"\n                      style={renderProps => pressScale(decrementButtonRef)(renderProps)}\n                      className={renderProps => inputButton({\n                        ...renderProps,\n                        type: 'decrement',\n                        size\n                      })}>\n                      <Dash size={size} className={iconStyles({})} />\n                    </StepButton>\n                    <StepButton\n                      ref={incrementButtonRef}\n                      slot=\"increment\"\n                      style={renderProps => pressScale(incrementButtonRef)(renderProps)}\n                      className={renderProps => inputButton({\n                        ...renderProps,\n                        type: 'increment',\n                        size\n                      })}>\n                      <Add size={size} className={iconStyles({})} />\n                    </StepButton>\n                  </div>}\n                </FieldGroup>\n                {descriptionMessage && <Text slot=\"description\">{descriptionMessage}</Text>}\n                <HelpText\n                  size={size}\n                  isDisabled={isDisabled}\n                  isInvalid={isInvalid}\n                  description={descriptionMessage}>\n                  {errorMessage}\n                </HelpText>\n              </>\n            );\n          }\n        }\n    </AriaNumberField>\n  );\n}\n\ninterface StepButtonProps extends AriaButtonProps {\n}\n\nconst additionalButtonHTMLAttributes = new Set(['form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'name', 'value']);\n\nlet StepButton = forwardRef((props: StepButtonProps, ref: ForwardedRef<HTMLDivElement>) => {\n  [props, ref] = useContextProps(props, ref, ButtonContext as any);\n  let ctx = props as any;\n  /**\n   * Must use div for now because Safari pointer event bugs on disabled form elements.\n   * Link https://bugs.webkit.org/show_bug.cgi?id=219188.\n   */\n  let {buttonProps, isPressed} = useButton({...props, elementType: 'div'}, ref);\n  let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);\n  let {hoverProps, isHovered} = useHover(props);\n  let renderProps = useRenderProps({\n    ...props,\n    values: {isHovered, isPressed, isFocused, isFocusVisible, isDisabled: props.isDisabled || false},\n    defaultClassName: 'react-aria-Button'\n  });\n  return (\n    <div\n      {...filterDOMProps(props, {propNames: additionalButtonHTMLAttributes})}\n      {...mergeProps(buttonProps, focusProps, hoverProps)}\n      {...renderProps}\n      ref={ref}\n      slot={props.slot || undefined}\n      data-disabled={props.isDisabled || undefined}\n      data-pressed={ctx.isPressed || isPressed || undefined}\n      data-hovered={isHovered || undefined}\n      data-focused={isFocused || undefined}\n      data-focus-visible={isFocusVisible || undefined} />\n  );\n});\n\n/**\n * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.\n */\nlet _NumberField = forwardRef(NumberField);\nexport {_NumberField as NumberField};\n\n// replace from RAC\nfunction useRenderProps(props: any) {\n  let {\n    className,\n    style,\n    children,\n    defaultClassName = undefined,\n    defaultChildren = undefined,\n    defaultStyle,\n    values\n  } = props;\n\n  return useMemo(() => {\n    let computedClassName: string | undefined;\n    let computedStyle: CSSProperties | undefined;\n    let computedChildren: ReactNode | undefined;\n\n    if (typeof className === 'function') {\n      computedClassName = className({...values, defaultClassName});\n    } else {\n      computedClassName = className;\n    }\n\n    if (typeof style === 'function') {\n      computedStyle = style({...values, defaultStyle: defaultStyle || {}});\n    } else {\n      computedStyle = style;\n    }\n\n    if (typeof children === 'function') {\n      computedChildren = children({...values, defaultChildren});\n    } else if (children == null) {\n      computedChildren = defaultChildren;\n    } else {\n      computedChildren = children;\n    }\n\n    return {\n      className: computedClassName ?? defaultClassName,\n      style: (computedStyle || defaultStyle) ? {...defaultStyle, ...computedStyle} : undefined,\n      children: computedChildren ?? defaultChildren,\n      'data-rac': ''\n    };\n  }, [className, style, children, defaultClassName, defaultChildren, defaultStyle, values]);\n}\n"],"names":[],"version":3,"file":"NumberField.css.map"}
+{"mappings":"AC0DoB;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0ED;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeY;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkEK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBV;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnLN;EA2JgB;;;;;AA3JhB;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AA2JgB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAwBV;;;;AAAA;EAAA;IAAA","sources":["b68c88297d49b771","packages/@react-spectrum/s2/src/NumberField.tsx"],"sourcesContent":["@import \"86e54c0ad46f69c2\";\n@import \"81d36b1860c8fc73\";\n@import \"22edbea9646800a7\";\n@import \"c17a88ce1f4f53da\";\n@import \"e6f6c2ace019f265\";\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 Add from '../ui-icons/Add';\nimport {\n  ButtonProps as AriaButtonProps,\n  NumberField as AriaNumberField,\n  NumberFieldProps as AriaNumberFieldProps,\n  ButtonContext,\n  ContextValue,\n  InputContext,\n  Text,\n  useContextProps\n} from 'react-aria-components';\nimport {baseColor, space, style} from '../style' with {type: 'macro'};\nimport {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport Dash from '../ui-icons/Dash';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useButton, useFocusRing, useHover} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface NumberFieldProps extends\n  Omit<AriaNumberFieldProps, 'children' | 'className' | 'style'>,\n  StyleProps,\n  SpectrumLabelableProps,\n  HelpTextProps {\n  /**\n   * Whether to hide the increment and decrement buttons.\n   * @default false\n   */\n  hideStepper?: boolean,\n  /**\n   * The size of the NumberField.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const NumberFieldContext = createContext<ContextValue<NumberFieldProps, TextFieldRef>>(null);\n\nconst inputButton = style({\n  display: 'flex',\n  outlineStyle: 'none',\n  textAlign: 'center',\n  borderStyle: 'none',\n  borderTopRadius: {\n    default: {\n      size: {\n        S: '[3px]',\n        M: '[4px]',\n        L: '[5px]',\n        XL: '[6px]'\n      }\n    },\n    type: {\n      decrementStep: 'none'\n    }\n  },\n  borderBottomRadius: {\n    default: {\n      size: {\n        S: '[3px]',\n        M: '[4px]',\n        L: '[5px]',\n        XL: '[6px]'\n      }\n    },\n    type: {\n      incrementStep: 'none'\n    }\n  },\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32\n    }\n  },\n  height: 'auto',\n  marginStart: {\n    default: 'text-to-control',\n    type: {\n      increment: 0\n    }\n  },\n  aspectRatio: 'square',\n  flexShrink: 0,\n  minHeight: 0,\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace'\n    }\n  },\n  cursor: 'default'\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: {\n    default: 0,\n    type: {\n      incrementStep: 270,\n      decrementStep: 90\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst stepperContainerStyles = style({\n  display: 'flex',\n  flexDirection: 'row',\n  gap: {\n    size: {\n      S: 8,\n      M: 4,\n      L: 8,\n      XL: 8\n    }\n  },\n  paddingEnd: {\n    size: {\n      S: 2,\n      M: 4,\n      L: space(6),\n      XL: space(6)\n    }\n  }\n});\n\n/**\n * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.\n */\nexport const NumberField = forwardRef(function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);\n  let {\n    label,\n    contextualHelp,\n    description: descriptionMessage,\n    errorMessage,\n    hideStepper,\n    isRequired,\n    size = 'M',\n    labelPosition = 'top',\n    necessityIndicator,\n    labelAlign = 'start',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    ...numberFieldProps\n  } = props;\n  let formContext = useContext(FormContext);\n  let domRef = useRef<HTMLDivElement | null>(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let decrementButtonRef = useRef<HTMLDivElement | null>(null);\n  let incrementButtonRef = useRef<HTMLDivElement | null>(null);\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\n  return (\n    <AriaNumberField\n      isRequired={isRequired}\n      {...numberFieldProps}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {\n          ({isDisabled, isInvalid}) => {\n            return  (\n              <>\n                <FieldLabel\n                  isDisabled={isDisabled}\n                  isRequired={isRequired}\n                  size={size}\n                  labelPosition={labelPosition}\n                  labelAlign={labelAlign}\n                  necessityIndicator={necessityIndicator}\n                  contextualHelp={contextualHelp}>\n                  {label}\n                </FieldLabel>\n                <FieldGroup\n                  role=\"presentation\"\n                  isDisabled={isDisabled}\n                  isInvalid={isInvalid}\n                  size={size}\n                  styles={style({\n                    ...fieldInput(),\n                    paddingStart: 'edge-to-text',\n                    paddingEnd: {\n                      default: 0,\n                      isStepperHidden: 'edge-to-text'\n                    }\n                  })({size, isStepperHidden: hideStepper})}>\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                  {!hideStepper && <div className={stepperContainerStyles({size})}>\n                    <StepButton\n                      ref={decrementButtonRef}\n                      slot=\"decrement\"\n                      style={renderProps => pressScale(decrementButtonRef)(renderProps)}\n                      className={renderProps => inputButton({\n                        ...renderProps,\n                        type: 'decrement',\n                        size\n                      })}>\n                      <Dash size={size} className={iconStyles({})} />\n                    </StepButton>\n                    <StepButton\n                      ref={incrementButtonRef}\n                      slot=\"increment\"\n                      style={renderProps => pressScale(incrementButtonRef)(renderProps)}\n                      className={renderProps => inputButton({\n                        ...renderProps,\n                        type: 'increment',\n                        size\n                      })}>\n                      <Add size={size} className={iconStyles({})} />\n                    </StepButton>\n                  </div>}\n                </FieldGroup>\n                {descriptionMessage && <Text slot=\"description\">{descriptionMessage}</Text>}\n                <HelpText\n                  size={size}\n                  isDisabled={isDisabled}\n                  isInvalid={isInvalid}\n                  description={descriptionMessage}>\n                  {errorMessage}\n                </HelpText>\n              </>\n            );\n          }\n        }\n    </AriaNumberField>\n  );\n});\n\ninterface StepButtonProps extends AriaButtonProps {\n}\n\nconst additionalButtonHTMLAttributes = new Set(['form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'name', 'value']);\n\nlet StepButton = forwardRef((props: StepButtonProps, ref: ForwardedRef<HTMLDivElement>) => {\n  [props, ref] = useContextProps(props, ref, ButtonContext as any);\n  let ctx = props as any;\n  /**\n   * Must use div for now because Safari pointer event bugs on disabled form elements.\n   * Link https://bugs.webkit.org/show_bug.cgi?id=219188.\n   */\n  let {buttonProps, isPressed} = useButton({...props, elementType: 'div'}, ref);\n  let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);\n  let {hoverProps, isHovered} = useHover(props);\n  let renderProps = useRenderProps({\n    ...props,\n    values: {isHovered, isPressed, isFocused, isFocusVisible, isDisabled: props.isDisabled || false},\n    defaultClassName: 'react-aria-Button'\n  });\n  return (\n    <div\n      {...filterDOMProps(props, {propNames: additionalButtonHTMLAttributes})}\n      {...mergeProps(buttonProps, focusProps, hoverProps)}\n      {...renderProps}\n      ref={ref}\n      slot={props.slot || undefined}\n      data-disabled={props.isDisabled || undefined}\n      data-pressed={ctx.isPressed || isPressed || undefined}\n      data-hovered={isHovered || undefined}\n      data-focused={isFocused || undefined}\n      data-focus-visible={isFocusVisible || undefined} />\n  );\n});\n\n// replace from RAC\nfunction useRenderProps(props: any) {\n  let {\n    className,\n    style,\n    children,\n    defaultClassName = undefined,\n    defaultChildren = undefined,\n    defaultStyle,\n    values\n  } = props;\n\n  return useMemo(() => {\n    let computedClassName: string | undefined;\n    let computedStyle: CSSProperties | undefined;\n    let computedChildren: ReactNode | undefined;\n\n    if (typeof className === 'function') {\n      computedClassName = className({...values, defaultClassName});\n    } else {\n      computedClassName = className;\n    }\n\n    if (typeof style === 'function') {\n      computedStyle = style({...values, defaultStyle: defaultStyle || {}});\n    } else {\n      computedStyle = style;\n    }\n\n    if (typeof children === 'function') {\n      computedChildren = children({...values, defaultChildren});\n    } else if (children == null) {\n      computedChildren = defaultChildren;\n    } else {\n      computedChildren = children;\n    }\n\n    return {\n      className: computedClassName ?? defaultClassName,\n      style: (computedStyle || defaultStyle) ? {...defaultStyle, ...computedStyle} : undefined,\n      children: computedChildren ?? defaultChildren,\n      'data-rac': ''\n    };\n  }, [className, style, children, defaultClassName, defaultChildren, defaultStyle, values]);\n}\n"],"names":[],"version":3,"file":"NumberField.css.map"}

package/dist/NumberField.mjs

@@ -7,7 +7,7 @@ import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressSc
 import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
 import {jsx as $5qJVF$jsx, jsxs as $5qJVF$jsxs, Fragment as $5qJVF$Fragment} from "react/jsx-runtime";
 import {NumberField as $5qJVF$NumberField, InputContext as $5qJVF$InputContext, Text as $5qJVF$Text, useContextProps as $5qJVF$useContextProps, ButtonContext as $5qJVF$ButtonContext} from "react-aria-components";
-import {createContext as $5qJVF$createContext, useContext as $5qJVF$useContext, useRef as $5qJVF$useRef, useImperativeHandle as $5qJVF$useImperativeHandle, forwardRef as $5qJVF$forwardRef, useMemo as $5qJVF$useMemo} from "react";
+import {createContext as $5qJVF$createContext, forwardRef as $5qJVF$forwardRef, useContext as $5qJVF$useContext, useRef as $5qJVF$useRef, useImperativeHandle as $5qJVF$useImperativeHandle, useMemo as $5qJVF$useMemo} from "react";
 import {createFocusableRef as $5qJVF$createFocusableRef} from "@react-spectrum/utils";
 import {mergeRefs as $5qJVF$mergeRefs, filterDOMProps as $5qJVF$filterDOMProps, mergeProps as $5qJVF$mergeProps} from "@react-aria/utils";
 import {useButton as $5qJVF$useButton, useFocusRing as $5qJVF$useFocusRing, useHover as $5qJVF$useHover} from "react-aria";
@@ -135,7 +135,7 @@ const $675eca1a78ccd399$var$stepperContainerStyles = function anonymous(props) {
     else if (props.size === "S") rules += ' Db';
     return rules;
 };
-function $675eca1a78ccd399$var$NumberField(props1, ref) {
+const $675eca1a78ccd399$export$63c5fa0b2fdccd2e = /*#__PURE__*/ (0, $5qJVF$forwardRef)(function NumberField(props1, ref) {
     [props1, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props1, ref, $675eca1a78ccd399$export$b414a48cf5dcbc11);
     let { label: label, contextualHelp: contextualHelp, description: descriptionMessage, errorMessage: errorMessage, hideStepper: hideStepper, isRequired: isRequired, size: size = 'M', labelPosition: labelPosition = 'top', necessityIndicator: necessityIndicator, labelAlign: labelAlign = 'start', UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, ...numberFieldProps } = props1;
     let formContext = (0, $5qJVF$useContext)((0, $9b916426527cebe7$export$c24727297075ec6a));
@@ -329,7 +329,7 @@ function $675eca1a78ccd399$var$NumberField(props1, ref) {
             });
         }
     });
-}
+});
 const $675eca1a78ccd399$var$additionalButtonHTMLAttributes = new Set([
     'form',
     'formAction',
@@ -378,9 +378,6 @@ let $675eca1a78ccd399$var$StepButton = /*#__PURE__*/ (0, $5qJVF$forwardRef)((pro
         "data-focus-visible": isFocusVisible || undefined
     });
 });
-/**
- * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.
- */ let $675eca1a78ccd399$export$63c5fa0b2fdccd2e = /*#__PURE__*/ (0, $5qJVF$forwardRef)($675eca1a78ccd399$var$NumberField);
 // replace from RAC
 function $675eca1a78ccd399$var$useRenderProps(props) {
     let { className: className, style: style, children: children, defaultClassName: defaultClassName, defaultChildren: defaultChildren, defaultStyle: defaultStyle, values: values } = props;

package/dist/NumberField.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;AA8CM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAgD;AAE9F,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EN,MAAM;;;;;;;;;AAeN,MAAM;;;;;;;;;;;;;;;;;;AAqBN,SAAS,kCAAY,MAAuB,EAAE,GAAsB;IAClE,CAAC,QAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,QAAO,KAAK;IACnD,IAAI,SACF,KAAK,kBACL,cAAc,EACd,aAAa,kBAAkB,gBAC/B,YAAY,eACZ,WAAW,cACX,UAAU,QACV,OAAO,oBACP,gBAAgB,2BAChB,kBAAkB,cAClB,aAAa,2BACb,mBAAmB,kBACnB,YAAY,EACZ,GAAG,kBACJ,GAAG;IACJ,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACvC,IAAI,SAAS,CAAA,GAAA,aAAK,EAAyB;IAC3C,IAAI,WAAW,CAAA,GAAA,aAAK,EAA2B;IAC/C,IAAI,qBAAqB,CAAA,GAAA,aAAK,EAAyB;IACvD,IAAI,qBAAqB,CAAA,GAAA,aAAK,EAAyB;IAEvD,sCAAsC;IACtC,CAAA,GAAA,0BAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,yBAAiB,EAAE,QAAQ,SAAS;YACvC;gBACE,IAAI,SAAS,OAAO,EAClB,SAAS,OAAO,CAAC,MAAM;YAE3B;YACA;gBACE,OAAO,SAAS,OAAO;YACzB;QACF,CAAA;IAGA,qBACE,gBAAC,CAAA,GAAA,kBAAc;QACb,YAAY;QACX,GAAG,gBAAgB;QACpB,OAAO;QACP,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAAsC;YAClE,UAAU,CAAC,CAAC;2BACZ;kBACA;QACF,GAAG,OAAM,MAAM;kBAEX,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC;YACtB,qBACE;;kCACE,gBAAC,CAAA,GAAA,yCAAS;wBACR,YAAY;wBACZ,YAAY;wBACZ,MAAM;wBACN,eAAe;wBACf,YAAY;wBACZ,oBAAoB;wBACpB,gBAAgB;kCACf;;kCAEH,iBAAC,CAAA,GAAA,yCAAS;wBACR,MAAK;wBACL,YAAY;wBACZ,WAAW;wBACX,MAAM;wBACN,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;0BAOL;kCAAC;4BAAM,iBAAiB;wBAAW;;0CACtC,gBAAC,CAAA,GAAA,mBAAW,EAAE,QAAQ;0CACnB,CAAA,oBACC,gBAAC,CAAA,GAAA,mBAAW,EAAE,QAAQ;wCAAC,OAAO;4CAAC,GAAG,GAAG;4CAAE,KAAK,CAAA,GAAA,gBAAQ,EAAG,KAAa,KAAK;wCAAS;kDAChF,cAAA,gBAAC,CAAA,GAAA,yCAAI;;;4BAIV,2BAAa,gBAAC,CAAA,GAAA,yCAAa;gCAAE,YAAY;;4BACzC,CAAC,6BAAe,iBAAC;gCAAI,WAAW,6CAAuB;0CAAC;gCAAI;;kDAC3D,gBAAC;wCACC,KAAK;wCACL,MAAK;wCACL,OAAO,CAAA,cAAe,CAAA,GAAA,yCAAS,EAAE,oBAAoB;wCACrD,WAAW,CAAA,cAAe,kCAAY;gDACpC,GAAG,WAAW;gDACd,MAAM;sDACN;4CACF;kDACA,cAAA,gBAAC,CAAA,GAAA,wCAAG;4CAAE,MAAM;4CAAM,WAAW,iCAAW,CAAC;;;kDAE3C,gBAAC;wCACC,KAAK;wCACL,MAAK;wCACL,OAAO,CAAA,cAAe,CAAA,GAAA,yCAAS,EAAE,oBAAoB;wCACrD,WAAW,CAAA,cAAe,kCAAY;gDACpC,GAAG,WAAW;gDACd,MAAM;sDACN;4CACF;kDACA,cAAA,gBAAC,CAAA,GAAA,wCAAE;4CAAE,MAAM;4CAAM,WAAW,iCAAW,CAAC;;;;;;;oBAI7C,oCAAsB,gBAAC,CAAA,GAAA,WAAG;wBAAE,MAAK;kCAAe;;kCACjD,gBAAC,CAAA,GAAA,yCAAO;wBACN,MAAM;wBACN,YAAY;wBACZ,WAAW;wBACX,aAAa;kCACZ;;;;QAIT;;AAIV;AAKA,MAAM,uDAAiC,IAAI,IAAI;IAAC;IAAQ;IAAc;IAAe;IAAc;IAAkB;IAAc;IAAQ;CAAQ;AAEnJ,IAAI,iDAAa,CAAA,GAAA,iBAAS,EAAE,CAAC,OAAwB;IACnD,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,KAAK,CAAA,GAAA,oBAAY;IACvD,IAAI,MAAM;IACV;;;GAGC,GACD,IAAI,eAAC,WAAW,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ,EAAE;QAAC,GAAG,KAAK;QAAE,aAAa;IAAK,GAAG;IACzE,IAAI,cAAC,UAAU,aAAE,SAAS,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE;IAC3D,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;IACvC,IAAI,cAAc,qCAAe;QAC/B,GAAG,KAAK;QACR,QAAQ;uBAAC;uBAAW;uBAAW;4BAAW;YAAgB,YAAY,MAAM,UAAU,IAAI;QAAK;QAC/F,kBAAkB;IACpB;IACA,qBACE,gBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,OAAO;YAAC,WAAW;QAA8B,EAAE;QACrE,GAAG,CAAA,GAAA,iBAAS,EAAE,aAAa,YAAY,WAAW;QAClD,GAAG,WAAW;QACf,KAAK;QACL,MAAM,MAAM,IAAI,IAAI;QACpB,iBAAe,MAAM,UAAU,IAAI;QACnC,gBAAc,IAAI,SAAS,IAAI,aAAa;QAC5C,gBAAc,aAAa;QAC3B,gBAAc,aAAa;QAC3B,sBAAoB,kBAAkB;;AAE5C;AAEA;;CAEC,GACD,IAAI,0DAAe,CAAA,GAAA,iBAAS,EAAE;AAG9B,mBAAmB;AACnB,SAAS,qCAAe,KAAU;IAChC,IAAI,aACF,SAAS,SACT,KAAK,YACL,QAAQ,oBACR,gBAAgB,mBAChB,eAAe,gBACf,YAAY,UACZ,MAAM,EACP,GAAG;IAEJ,OAAO,CAAA,GAAA,cAAM,EAAE;QACb,IAAI;QACJ,IAAI;QACJ,IAAI;QAEJ,IAAI,OAAO,cAAc,YACvB,oBAAoB,UAAU;YAAC,GAAG,MAAM;8BAAE;QAAgB;aAE1D,oBAAoB;QAGtB,IAAI,OAAO,UAAU,YACnB,gBAAgB,MAAM;YAAC,GAAG,MAAM;YAAE,cAAc,gBAAgB,CAAC;QAAC;aAElE,gBAAgB;QAGlB,IAAI,OAAO,aAAa,YACtB,mBAAmB,SAAS;YAAC,GAAG,MAAM;6BAAE;QAAe;aAClD,IAAI,YAAY,MACrB,mBAAmB;aAEnB,mBAAmB;QAGrB,OAAO;YACL,WAAW,qBAAqB;YAChC,OAAO,AAAC,iBAAiB,eAAgB;gBAAC,GAAG,YAAY;gBAAE,GAAG,aAAa;YAAA,IAAI;YAC/E,UAAU,oBAAoB;YAC9B,YAAY;QACd;IACF,GAAG;QAAC;QAAW;QAAO;QAAU;QAAkB;QAAiB;QAAc;KAAO;AAC1F","sources":["packages/@react-spectrum/s2/src/NumberField.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 Add from '../ui-icons/Add';\nimport {\n  ButtonProps as AriaButtonProps,\n  NumberField as AriaNumberField,\n  NumberFieldProps as AriaNumberFieldProps,\n  ButtonContext,\n  ContextValue,\n  InputContext,\n  Text,\n  useContextProps\n} from 'react-aria-components';\nimport {baseColor, space, style} from '../style' with {type: 'macro'};\nimport {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport Dash from '../ui-icons/Dash';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useButton, useFocusRing, useHover} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface NumberFieldProps extends\n  Omit<AriaNumberFieldProps, 'children' | 'className' | 'style'>,\n  StyleProps,\n  SpectrumLabelableProps,\n  HelpTextProps {\n  /**\n   * Whether to hide the increment and decrement buttons.\n   * @default false\n   */\n  hideStepper?: boolean,\n  /**\n   * The size of the NumberField.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const NumberFieldContext = createContext<ContextValue<NumberFieldProps, TextFieldRef>>(null);\n\nconst inputButton = style({\n  display: 'flex',\n  outlineStyle: 'none',\n  textAlign: 'center',\n  borderStyle: 'none',\n  borderTopRadius: {\n    default: {\n      size: {\n        S: '[3px]',\n        M: '[4px]',\n        L: '[5px]',\n        XL: '[6px]'\n      }\n    },\n    type: {\n      decrementStep: 'none'\n    }\n  },\n  borderBottomRadius: {\n    default: {\n      size: {\n        S: '[3px]',\n        M: '[4px]',\n        L: '[5px]',\n        XL: '[6px]'\n      }\n    },\n    type: {\n      incrementStep: 'none'\n    }\n  },\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32\n    }\n  },\n  height: 'auto',\n  marginStart: {\n    default: 'text-to-control',\n    type: {\n      increment: 0\n    }\n  },\n  aspectRatio: 'square',\n  flexShrink: 0,\n  minHeight: 0,\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace'\n    }\n  },\n  cursor: 'default'\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: {\n    default: 0,\n    type: {\n      incrementStep: 270,\n      decrementStep: 90\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst stepperContainerStyles = style({\n  display: 'flex',\n  flexDirection: 'row',\n  gap: {\n    size: {\n      S: 8,\n      M: 4,\n      L: 8,\n      XL: 8\n    }\n  },\n  paddingEnd: {\n    size: {\n      S: 2,\n      M: 4,\n      L: space(6),\n      XL: space(6)\n    }\n  }\n});\n\nfunction NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);\n  let {\n    label,\n    contextualHelp,\n    description: descriptionMessage,\n    errorMessage,\n    hideStepper,\n    isRequired,\n    size = 'M',\n    labelPosition = 'top',\n    necessityIndicator,\n    labelAlign = 'start',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    ...numberFieldProps\n  } = props;\n  let formContext = useContext(FormContext);\n  let domRef = useRef<HTMLDivElement | null>(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let decrementButtonRef = useRef<HTMLDivElement | null>(null);\n  let incrementButtonRef = useRef<HTMLDivElement | null>(null);\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\n  return (\n    <AriaNumberField\n      isRequired={isRequired}\n      {...numberFieldProps}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {\n          ({isDisabled, isInvalid}) => {\n            return  (\n              <>\n                <FieldLabel\n                  isDisabled={isDisabled}\n                  isRequired={isRequired}\n                  size={size}\n                  labelPosition={labelPosition}\n                  labelAlign={labelAlign}\n                  necessityIndicator={necessityIndicator}\n                  contextualHelp={contextualHelp}>\n                  {label}\n                </FieldLabel>\n                <FieldGroup\n                  role=\"presentation\"\n                  isDisabled={isDisabled}\n                  isInvalid={isInvalid}\n                  size={size}\n                  styles={style({\n                    ...fieldInput(),\n                    paddingStart: 'edge-to-text',\n                    paddingEnd: {\n                      default: 0,\n                      isStepperHidden: 'edge-to-text'\n                    }\n                  })({size, isStepperHidden: hideStepper})}>\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                  {!hideStepper && <div className={stepperContainerStyles({size})}>\n                    <StepButton\n                      ref={decrementButtonRef}\n                      slot=\"decrement\"\n                      style={renderProps => pressScale(decrementButtonRef)(renderProps)}\n                      className={renderProps => inputButton({\n                        ...renderProps,\n                        type: 'decrement',\n                        size\n                      })}>\n                      <Dash size={size} className={iconStyles({})} />\n                    </StepButton>\n                    <StepButton\n                      ref={incrementButtonRef}\n                      slot=\"increment\"\n                      style={renderProps => pressScale(incrementButtonRef)(renderProps)}\n                      className={renderProps => inputButton({\n                        ...renderProps,\n                        type: 'increment',\n                        size\n                      })}>\n                      <Add size={size} className={iconStyles({})} />\n                    </StepButton>\n                  </div>}\n                </FieldGroup>\n                {descriptionMessage && <Text slot=\"description\">{descriptionMessage}</Text>}\n                <HelpText\n                  size={size}\n                  isDisabled={isDisabled}\n                  isInvalid={isInvalid}\n                  description={descriptionMessage}>\n                  {errorMessage}\n                </HelpText>\n              </>\n            );\n          }\n        }\n    </AriaNumberField>\n  );\n}\n\ninterface StepButtonProps extends AriaButtonProps {\n}\n\nconst additionalButtonHTMLAttributes = new Set(['form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'name', 'value']);\n\nlet StepButton = forwardRef((props: StepButtonProps, ref: ForwardedRef<HTMLDivElement>) => {\n  [props, ref] = useContextProps(props, ref, ButtonContext as any);\n  let ctx = props as any;\n  /**\n   * Must use div for now because Safari pointer event bugs on disabled form elements.\n   * Link https://bugs.webkit.org/show_bug.cgi?id=219188.\n   */\n  let {buttonProps, isPressed} = useButton({...props, elementType: 'div'}, ref);\n  let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);\n  let {hoverProps, isHovered} = useHover(props);\n  let renderProps = useRenderProps({\n    ...props,\n    values: {isHovered, isPressed, isFocused, isFocusVisible, isDisabled: props.isDisabled || false},\n    defaultClassName: 'react-aria-Button'\n  });\n  return (\n    <div\n      {...filterDOMProps(props, {propNames: additionalButtonHTMLAttributes})}\n      {...mergeProps(buttonProps, focusProps, hoverProps)}\n      {...renderProps}\n      ref={ref}\n      slot={props.slot || undefined}\n      data-disabled={props.isDisabled || undefined}\n      data-pressed={ctx.isPressed || isPressed || undefined}\n      data-hovered={isHovered || undefined}\n      data-focused={isFocused || undefined}\n      data-focus-visible={isFocusVisible || undefined} />\n  );\n});\n\n/**\n * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.\n */\nlet _NumberField = forwardRef(NumberField);\nexport {_NumberField as NumberField};\n\n// replace from RAC\nfunction useRenderProps(props: any) {\n  let {\n    className,\n    style,\n    children,\n    defaultClassName = undefined,\n    defaultChildren = undefined,\n    defaultStyle,\n    values\n  } = props;\n\n  return useMemo(() => {\n    let computedClassName: string | undefined;\n    let computedStyle: CSSProperties | undefined;\n    let computedChildren: ReactNode | undefined;\n\n    if (typeof className === 'function') {\n      computedClassName = className({...values, defaultClassName});\n    } else {\n      computedClassName = className;\n    }\n\n    if (typeof style === 'function') {\n      computedStyle = style({...values, defaultStyle: defaultStyle || {}});\n    } else {\n      computedStyle = style;\n    }\n\n    if (typeof children === 'function') {\n      computedChildren = children({...values, defaultChildren});\n    } else if (children == null) {\n      computedChildren = defaultChildren;\n    } else {\n      computedChildren = children;\n    }\n\n    return {\n      className: computedClassName ?? defaultClassName,\n      style: (computedStyle || defaultStyle) ? {...defaultStyle, ...computedStyle} : undefined,\n      children: computedChildren ?? defaultChildren,\n      'data-rac': ''\n    };\n  }, [className, style, children, defaultClassName, defaultChildren, defaultStyle, values]);\n}\n"],"names":[],"version":3,"file":"NumberField.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/NumberField.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 Add from '../ui-icons/Add';\nimport {\n  ButtonProps as AriaButtonProps,\n  NumberField as AriaNumberField,\n  NumberFieldProps as AriaNumberFieldProps,\n  ButtonContext,\n  ContextValue,\n  InputContext,\n  Text,\n  useContextProps\n} from 'react-aria-components';\nimport {baseColor, space, style} from '../style' with {type: 'macro'};\nimport {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport Dash from '../ui-icons/Dash';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useButton, useFocusRing, useHover} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface NumberFieldProps extends\n  Omit<AriaNumberFieldProps, 'children' | 'className' | 'style'>,\n  StyleProps,\n  SpectrumLabelableProps,\n  HelpTextProps {\n  /**\n   * Whether to hide the increment and decrement buttons.\n   * @default false\n   */\n  hideStepper?: boolean,\n  /**\n   * The size of the NumberField.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const NumberFieldContext = createContext<ContextValue<NumberFieldProps, TextFieldRef>>(null);\n\nconst inputButton = style({\n  display: 'flex',\n  outlineStyle: 'none',\n  textAlign: 'center',\n  borderStyle: 'none',\n  borderTopRadius: {\n    default: {\n      size: {\n        S: '[3px]',\n        M: '[4px]',\n        L: '[5px]',\n        XL: '[6px]'\n      }\n    },\n    type: {\n      decrementStep: 'none'\n    }\n  },\n  borderBottomRadius: {\n    default: {\n      size: {\n        S: '[3px]',\n        M: '[4px]',\n        L: '[5px]',\n        XL: '[6px]'\n      }\n    },\n    type: {\n      incrementStep: 'none'\n    }\n  },\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32\n    }\n  },\n  height: 'auto',\n  marginStart: {\n    default: 'text-to-control',\n    type: {\n      increment: 0\n    }\n  },\n  aspectRatio: 'square',\n  flexShrink: 0,\n  minHeight: 0,\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace'\n    }\n  },\n  cursor: 'default'\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: {\n    default: 0,\n    type: {\n      incrementStep: 270,\n      decrementStep: 90\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst stepperContainerStyles = style({\n  display: 'flex',\n  flexDirection: 'row',\n  gap: {\n    size: {\n      S: 8,\n      M: 4,\n      L: 8,\n      XL: 8\n    }\n  },\n  paddingEnd: {\n    size: {\n      S: 2,\n      M: 4,\n      L: space(6),\n      XL: space(6)\n    }\n  }\n});\n\n/**\n * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.\n */\nexport const NumberField = forwardRef(function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);\n  let {\n    label,\n    contextualHelp,\n    description: descriptionMessage,\n    errorMessage,\n    hideStepper,\n    isRequired,\n    size = 'M',\n    labelPosition = 'top',\n    necessityIndicator,\n    labelAlign = 'start',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    ...numberFieldProps\n  } = props;\n  let formContext = useContext(FormContext);\n  let domRef = useRef<HTMLDivElement | null>(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let decrementButtonRef = useRef<HTMLDivElement | null>(null);\n  let incrementButtonRef = useRef<HTMLDivElement | null>(null);\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\n  return (\n    <AriaNumberField\n      isRequired={isRequired}\n      {...numberFieldProps}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {\n          ({isDisabled, isInvalid}) => {\n            return  (\n              <>\n                <FieldLabel\n                  isDisabled={isDisabled}\n                  isRequired={isRequired}\n                  size={size}\n                  labelPosition={labelPosition}\n                  labelAlign={labelAlign}\n                  necessityIndicator={necessityIndicator}\n                  contextualHelp={contextualHelp}>\n                  {label}\n                </FieldLabel>\n                <FieldGroup\n                  role=\"presentation\"\n                  isDisabled={isDisabled}\n                  isInvalid={isInvalid}\n                  size={size}\n                  styles={style({\n                    ...fieldInput(),\n                    paddingStart: 'edge-to-text',\n                    paddingEnd: {\n                      default: 0,\n                      isStepperHidden: 'edge-to-text'\n                    }\n                  })({size, isStepperHidden: hideStepper})}>\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                  {!hideStepper && <div className={stepperContainerStyles({size})}>\n                    <StepButton\n                      ref={decrementButtonRef}\n                      slot=\"decrement\"\n                      style={renderProps => pressScale(decrementButtonRef)(renderProps)}\n                      className={renderProps => inputButton({\n                        ...renderProps,\n                        type: 'decrement',\n                        size\n                      })}>\n                      <Dash size={size} className={iconStyles({})} />\n                    </StepButton>\n                    <StepButton\n                      ref={incrementButtonRef}\n                      slot=\"increment\"\n                      style={renderProps => pressScale(incrementButtonRef)(renderProps)}\n                      className={renderProps => inputButton({\n                        ...renderProps,\n                        type: 'increment',\n                        size\n                      })}>\n                      <Add size={size} className={iconStyles({})} />\n                    </StepButton>\n                  </div>}\n                </FieldGroup>\n                {descriptionMessage && <Text slot=\"description\">{descriptionMessage}</Text>}\n                <HelpText\n                  size={size}\n                  isDisabled={isDisabled}\n                  isInvalid={isInvalid}\n                  description={descriptionMessage}>\n                  {errorMessage}\n                </HelpText>\n              </>\n            );\n          }\n        }\n    </AriaNumberField>\n  );\n});\n\ninterface StepButtonProps extends AriaButtonProps {\n}\n\nconst additionalButtonHTMLAttributes = new Set(['form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'name', 'value']);\n\nlet StepButton = forwardRef((props: StepButtonProps, ref: ForwardedRef<HTMLDivElement>) => {\n  [props, ref] = useContextProps(props, ref, ButtonContext as any);\n  let ctx = props as any;\n  /**\n   * Must use div for now because Safari pointer event bugs on disabled form elements.\n   * Link https://bugs.webkit.org/show_bug.cgi?id=219188.\n   */\n  let {buttonProps, isPressed} = useButton({...props, elementType: 'div'}, ref);\n  let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);\n  let {hoverProps, isHovered} = useHover(props);\n  let renderProps = useRenderProps({\n    ...props,\n    values: {isHovered, isPressed, isFocused, isFocusVisible, isDisabled: props.isDisabled || false},\n    defaultClassName: 'react-aria-Button'\n  });\n  return (\n    <div\n      {...filterDOMProps(props, {propNames: additionalButtonHTMLAttributes})}\n      {...mergeProps(buttonProps, focusProps, hoverProps)}\n      {...renderProps}\n      ref={ref}\n      slot={props.slot || undefined}\n      data-disabled={props.isDisabled || undefined}\n      data-pressed={ctx.isPressed || isPressed || undefined}\n      data-hovered={isHovered || undefined}\n      data-focused={isFocused || undefined}\n      data-focus-visible={isFocusVisible || undefined} />\n  );\n});\n\n// replace from RAC\nfunction useRenderProps(props: any) {\n  let {\n    className,\n    style,\n    children,\n    defaultClassName = undefined,\n    defaultChildren = undefined,\n    defaultStyle,\n    values\n  } = props;\n\n  return useMemo(() => {\n    let computedClassName: string | undefined;\n    let computedStyle: CSSProperties | undefined;\n    let computedChildren: ReactNode | undefined;\n\n    if (typeof className === 'function') {\n      computedClassName = className({...values, defaultClassName});\n    } else {\n      computedClassName = className;\n    }\n\n    if (typeof style === 'function') {\n      computedStyle = style({...values, defaultStyle: defaultStyle || {}});\n    } else {\n      computedStyle = style;\n    }\n\n    if (typeof children === 'function') {\n      computedChildren = children({...values, defaultChildren});\n    } else if (children == null) {\n      computedChildren = defaultChildren;\n    } else {\n      computedChildren = children;\n    }\n\n    return {\n      className: computedClassName ?? defaultClassName,\n      style: (computedStyle || defaultStyle) ? {...defaultStyle, ...computedStyle} : undefined,\n      children: computedChildren ?? defaultChildren,\n      'data-rac': ''\n    };\n  }, [className, style, children, defaultClassName, defaultChildren, defaultStyle, values]);\n}\n"],"names":[],"version":3,"file":"NumberField.mjs.map"}

package/dist/Picker.cjs

@@ -248,7 +248,7 @@ let $b9c30139cd63c62a$var$InternalPickerContext = /*#__PURE__*/ (0, $ceqeb$react
     size: 'M'
 });
 let $b9c30139cd63c62a$var$InsideSelectValueContext = /*#__PURE__*/ (0, $ceqeb$react.createContext)(false);
-function $b9c30139cd63c62a$var$Picker(props1, ref) {
+const $b9c30139cd63c62a$export$ba25329847403e11 = /*#__PURE__*/ (0, $ceqeb$react.forwardRef)(function Picker(props1, ref) {
     let stringFormatter = (0, $ceqeb$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4526404114e78c80$exports))), '@react-spectrum/s2');
     [props1, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props1, ref, $b9c30139cd63c62a$export$b72b8dade9393cd5);
     let domRef = (0, $ceqeb$reactspectrumutils.useFocusableRef)(ref);
@@ -485,10 +485,7 @@ function $b9c30139cd63c62a$var$Picker(props1, ref) {
                 })
             })
     });
-}
-/**
- * Pickers allow users to choose a single option from a collapsible list of options when space is limited.
- */ let $b9c30139cd63c62a$export$ba25329847403e11 = /*#__PURE__*/ (0, $ceqeb$react.forwardRef)($b9c30139cd63c62a$var$Picker);
+});
 const $b9c30139cd63c62a$var$checkmarkIconSize = {
     S: 'XS',
     M: 'M',

package/dist/Picker.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Picker.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  ListBoxSection as AriaListBoxSection,\n  PopoverProps as AriaPopoverProps,\n  Select as AriaSelect,\n  SelectProps as AriaSelectProps,\n  SelectRenderProps as AriaSelectRenderProps,\n  Button,\n  ButtonRenderProps,\n  ContextValue,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  ListBoxProps,\n  Provider,\n  SectionProps,\n  SelectValue\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, 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 {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\n  FieldErrorIcon,\n  FieldLabel,\n  HelpText\n} from './Field';\nimport {FocusableRef, FocusableRefValue, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface PickerStyleProps {\n  /**\n   * The size of the Picker.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether the picker should be displayed with a quiet style.\n   * @private\n   */\n  isQuiet?: boolean\n}\n\nexport interface PickerProps<T extends object> extends\n  Omit<AriaSelectProps<T>, 'children' | 'style' | 'className'>,\n  PickerStyleProps,\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\ninterface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}\n\nexport const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);\n\nconst inputButton = style<PickerButtonProps | AriaSelectRenderProps>({\n  ...focusRing(),\n  ...fieldInput(),\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid',\n    isQuiet: 'none'\n  },\n  position: 'relative',\n  font: 'control',\n  display: 'flex',\n  textAlign: 'start',\n  borderStyle: {\n    default: 'none',\n    forcedColors: 'solid'\n  },\n  borderColor: {\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'control',\n  alignItems: 'center',\n  height: 'control',\n  transition: 'default',\n  columnGap: {\n    default: 'text-to-control',\n    isQuiet: 'text-to-visual'\n  },\n  paddingX: {\n    default: 'edge-to-text',\n    isQuiet: 0\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isOpen: 'gray-200',\n    isDisabled: 'disabled',\n    isQuiet: 'transparent'\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  maxWidth: {\n    isQuiet: 'max'\n  },\n  disableTapHighlight: true\n});\n\nconst quietFocusLine = style({\n  width: 'full',\n  // Use pixels since we are emulating a border.\n  height: '[2px]',\n  position: 'absolute',\n  bottom: 0,\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'blue-800',\n    forcedColors: 'Highlight'\n  }\n});\n\nexport let menu = style({\n  outlineStyle: 'none',\n  display: 'grid',\n  gridTemplateColumns: {\n    size: {\n      S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n      M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n      L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n      XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n    }\n  },\n  boxSizing: 'border-box',\n  maxHeight: '[inherit]',\n  overflow: 'auto',\n  padding: 8,\n  fontFamily: 'sans',\n  fontSize: 'control'\n});\n\nconst invalidBorder = style({\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  bottom: 0,\n  right: 0,\n  pointerEvents: 'none',\n  borderRadius: 'control',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: 'negative',\n  transition: 'default'\n});\n\nconst valueStyles = style({\n  flexGrow: {\n    default: 1,\n    isQuiet: 0\n  },\n  truncate: true,\n  display: 'flex',\n  alignItems: 'center'\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: 90,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nlet InternalPickerContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\nlet InsideSelectValueContext = createContext(false);\n\nfunction Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, PickerContext);\n  let domRef = useFocusableRef(ref);\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    placeholder = stringFormatter.format('picker.placeholder'),\n    isQuiet,\n    ...pickerProps\n  } = props;\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  return (\n    <AriaSelect\n      {...pickerProps}\n      placeholder={placeholder}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {({isDisabled, isOpen, isFocusVisible, isInvalid, isRequired}) => (\n        <>\n          <InternalPickerContext.Provider value={{size}}>\n            <FieldLabel\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              size={size}\n              labelPosition={labelPosition}\n              labelAlign={labelAlign}\n              isQuiet={isQuiet}\n              necessityIndicator={necessityIndicator}\n              contextualHelp={props.contextualHelp}>\n              {label}\n            </FieldLabel>\n            <Button\n              ref={domRef}\n              style={renderProps => pressScale(domRef)(renderProps)}\n              // Prevent press scale from sticking while Picker is open.\n              // @ts-ignore\n              isPressed={false}\n              className={renderProps => inputButton({\n                ...renderProps,\n                size: size,\n                isOpen,\n                isQuiet\n              })}>\n              {(renderProps) => (\n                <>\n                  <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> * {display: none;}')}>\n                    {({defaultChildren}) => {\n                      return (\n                        <Provider\n                          values={[\n                            [IconContext, {\n                              slots: {\n                                icon: {\n                                  render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n                                  styles: icon\n                                }\n                              }\n                            }],\n                            [TextContext, {\n                              slots: {\n                                description: {},\n                                label: {styles: style({\n                                  display: 'block',\n                                  flexGrow: 1,\n                                  truncate: true\n                                })}\n                              }\n                            }],\n                            [InsideSelectValueContext, true]\n                          ]}>\n                          {defaultChildren}\n                        </Provider>\n                      );\n                    }}\n                  </SelectValue>\n                  {isInvalid && (\n                    <FieldErrorIcon isDisabled={isDisabled} />\n                  )}\n                  <ChevronIcon\n                    size={size}\n                    className={iconStyles} />\n                  {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }\n                  {isInvalid && !isDisabled && !isQuiet &&\n                    // @ts-ignore known limitation detecting functions from the theme\n                    <div className={invalidBorder({...renderProps, size})} />\n                  }\n                </>\n              )}\n            </Button>\n            <HelpText\n              size={size}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              description={descriptionMessage}>\n              {errorMessage}\n            </HelpText>\n            <PopoverBase\n              hideArrow\n              offset={menuOffset}\n              placement={`${direction} ${align}` as Placement}\n              shouldFlip={shouldFlip}\n              UNSAFE_style={{\n                width: menuWidth && !isQuiet ? `${menuWidth}px` : undefined\n              }}\n              styles={style({\n                marginStart: {\n                  isQuiet: -12\n                },\n                minWidth: {\n                  default: '[var(--trigger-width)]',\n                  isQuiet: 192\n                },\n                width: {\n                  default: '[var(--trigger-width)]',\n                  isQuiet: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'\n                }\n              })(props)}>\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          </InternalPickerContext.Provider>\n        </>\n      )}\n    </AriaSelect>\n  );\n}\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is limited.\n */\nlet _Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(Picker);\nexport {_Picker as Picker};\n\nexport interface PickerItemProps 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 PickerItem(props: PickerItemProps) {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  let {size} = useContext(InternalPickerContext);\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          <DefaultProvider\n            context={IconContext}\n            value={{slots: {\n              icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n            }}}>\n            <DefaultProvider\n              context={TextContext}\n              value={{\n                slots: {\n                  label: {styles: label({size})},\n                  description: {styles: description({...renderProps, size})}\n                }\n              }}>\n              {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n              {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n            </DefaultProvider>\n          </DefaultProvider>\n        );\n      }}\n    </ListBoxItem>\n  );\n}\n\n// A Context.Provider that only sets a value if not inside SelectValue.\nfunction DefaultProvider({context, value, children}: {context: React.Context<any>, value: any, children: any}) {\n  let inSelectValue = useContext(InsideSelectValueContext);\n  if (inSelectValue) {\n    return children;\n  }\n\n  return <context.Provider value={value}>{children}</context.Provider>;\n}\n\nexport interface PickerSectionProps<T extends object> extends SectionProps<T> {}\nexport function PickerSection<T extends object>(props: PickerSectionProps<T>) {\n  return (\n    <>\n      <AriaListBoxSection\n        {...props}\n        className={section}>\n        {props.children}\n      </AriaListBoxSection>\n      <Divider />\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"Picker.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;;;AAoGM,MAAM,0DAAgB,CAAA,GAAA,0BAAY,EAAiF;AAE1H,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDN,MAAM;AAaC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBX,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;AAcN,MAAM;;;;;;;;;;;;AAUN,MAAM;AASN,IAAI,4DAAwB,CAAA,GAAA,0BAAY,EAAkC;IAAC,MAAM;AAAG;AACpF,IAAI,+DAA2B,CAAA,GAAA,0BAAY,EAAE;AAKtC,MAAM,4CAAuB,AAAd,WAAW,GAAI,CAAA,GAAA,uBAAS,EAAqB,SAAS,OAAyB,MAAqB,EAAE,GAAoC;IAC9J,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,CAAC,QAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,QAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,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,cAAc,gBAAgB,MAAM,CAAC,gCACrC,OAAO,EACP,GAAG,aACJ,GAAG;IAEJ,uEAAuE;IACvE,IAAI;IACJ,IAAI,SAAS,KACX,aAAa;SACR,IAAI,SAAS,KAClB,aAAa;SACR,IAAI,SAAS,KAClB,aAAa;SAEb,aAAa;IAGf,qBACE,gCAAC,CAAA,GAAA,iCAAS;QACP,GAAG,WAAW;QACf,aAAa;QACb,OAAO;QACP,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAAsC;YAClE,UAAU,CAAC,CAAC;2BACZ;kBACA;QACF,GAAG,OAAM,MAAM;kBACd,CAAC,cAAC,UAAU,UAAE,MAAM,kBAAE,cAAc,aAAE,SAAS,cAAE,UAAU,EAAC,iBAC3D;0BACE,cAAA,iCAAC,4CAAsB,QAAQ;oBAAC,OAAO;8BAAC;oBAAI;;sCAC1C,gCAAC,CAAA,GAAA,oCAAS;4BACR,YAAY;4BACZ,YAAY;4BACZ,MAAM;4BACN,eAAe;4BACf,YAAY;4BACZ,SAAS;4BACT,oBAAoB;4BACpB,gBAAgB,OAAM,cAAc;sCACnC;;sCAEH,gCAAC,CAAA,GAAA,iCAAK;4BACJ,KAAK;4BACL,OAAO,CAAA,cAAe,CAAA,GAAA,oCAAS,EAAE,QAAQ;4BACzC,0DAA0D;4BAC1D,aAAa;4BACb,WAAW;4BACX,WAAW,CAAA,cAAe,kCAAY;oCACpC,GAAG,WAAW;oCACd,MAAM;4CACN;6CACA;gCACF;sCACC,CAAC,4BACA;;sDACE,gCAAC,CAAA,GAAA,sCAAU;4CAAE,WAAW,kCAAY;yDAAC;4CAAO,KAAK;sDAC9C,CAAC,mBAAC,eAAe,EAAC;gDACjB,qBACE,gCAAC,CAAA,GAAA,mCAAO;oDACN,QAAQ;wDACN;4DAAC,CAAA,GAAA,qCAAU;4DAAG;gEACZ,OAAO;oEACL,MAAM;wEACJ,QAAQ,CAAA,GAAA,wCAAa,EAAE;4EAAC,MAAM;4EAAQ,QAAQ,CAAA,GAAA,2CAAgB;wEAAC;wEAC/D,QAAQ,CAAA,GAAA,8BAAG;oEACb;gEACF;4DACF;yDAAE;wDACF;4DAAC,CAAA,GAAA,qCAAU;4DAAG;gEACZ,OAAO;oEACL,aAAa,CAAC;oEACd,OAAO;wEAAC,MAAM;oEAIZ;gEACJ;4DACF;yDAAE;wDACF;4DAAC;4DAA0B;yDAAK;qDACjC;8DACA;;4CAGP;;wCAED,2BACC,gCAAC,CAAA,GAAA,wCAAa;4CAAE,YAAY;;sDAE9B,gCAAC,CAAA,GAAA,iCAAU;4CACT,MAAM;4CACN,WAAW;;wCACZ,kBAAkB,yBAAW,gCAAC;4CAAK,WAAW;;wCAC9C,aAAa,CAAC,cAAc,CAAC,WAC5B,iEAAiE;sDACjE,gCAAC;4CAAI,WAAW,oCAAc;gDAAC,GAAG,WAAW;sDAAE;4CAAI;;;;;sCAK3D,gCAAC,CAAA,GAAA,kCAAO;4BACN,MAAM;4BACN,YAAY;4BACZ,WAAW;4BACX,aAAa;sCACZ;;sCAEH,gCAAC,CAAA,GAAA,qCAAU;4BACT,SAAS;4BACT,QAAQ;4BACR,WAAW,GAAG,UAAU,CAAC,EAAE,OAAO;4BAClC,YAAY;4BACZ,cAAc;gCACZ,OAAO,aAAa,CAAC,UAAU,GAAG,UAAU,EAAE,CAAC,GAAG;4BACpD;4BACA,QAAQ;;;;;;;;;8BAYL;sCACH,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,aAAa;oDAAC,QAAQ,CAAA,GAAA,qCAAU,EAAE;8DAAC;oDAAI;gDAAE;4CAC3C;wCACF;qCAAE;iCACH;0CACD,cAAA,gCAAC,CAAA,GAAA,kCAAM;oCACL,OAAO;oCACP,WAAW,0CAAK;8CAAC;oCAAI;8CACpB;;;;;;;;AASnB;AAMA,MAAM,0CAAoB;IACxB,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;AACN;AAEO,SAAS,0CAAW,KAAsB;IAC/C,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,gCAAC;gBACC,SAAS,CAAA,GAAA,qCAAU;gBACnB,OAAO;oBAAC,OAAO;wBACb,MAAM;4BAAC,QAAQ,CAAA,GAAA,wCAAa,EAAE;gCAAC,MAAM;gCAAQ,QAAQ,CAAA,GAAA,2CAAgB;4BAAC;4BAAI,QAAQ,CAAA,GAAA,8BAAG;wBAAC;oBACxF;gBAAC;0BACD,cAAA,iCAAC;oBACC,SAAS,CAAA,GAAA,qCAAU;oBACnB,OAAO;wBACL,OAAO;4BACL,OAAO;gCAAC,QAAQ,CAAA,GAAA,+BAAI,EAAE;0CAAC;gCAAI;4BAAE;4BAC7B,aAAa;gCAAC,QAAQ,CAAA,GAAA,qCAAU,EAAE;oCAAC,GAAG,WAAW;0CAAE;gCAAI;4BAAE;wBAC3D;oBACF;;wBACC,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;AAEA,uEAAuE;AACvE,SAAS,sCAAgB,WAAC,OAAO,SAAE,KAAK,YAAE,QAAQ,EAA2D;IAC3G,IAAI,gBAAgB,CAAA,GAAA,uBAAS,EAAE;IAC/B,IAAI,eACF,OAAO;IAGT,qBAAO,gCAAC,QAAQ,QAAQ;QAAC,OAAO;kBAAQ;;AAC1C;AAGO,SAAS,0CAAgC,KAA4B;IAC1E,qBACE;;0BACE,gCAAC,CAAA,GAAA,yCAAiB;gBACf,GAAG,KAAK;gBACT,WAAW,CAAA,GAAA,iCAAM;0BAChB,MAAM,QAAQ;;0BAEjB,gCAAC,CAAA,GAAA,iCAAM;;;AAGb","sources":["packages/@react-spectrum/s2/src/Picker.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  ListBoxSection as AriaListBoxSection,\n  PopoverProps as AriaPopoverProps,\n  Select as AriaSelect,\n  SelectProps as AriaSelectProps,\n  SelectRenderProps as AriaSelectRenderProps,\n  Button,\n  ButtonRenderProps,\n  ContextValue,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  ListBoxProps,\n  Provider,\n  SectionProps,\n  SelectValue\n} from 'react-aria-components';\nimport {baseColor, edgeToText, focusRing, 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 {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\n  FieldErrorIcon,\n  FieldLabel,\n  HelpText\n} from './Field';\nimport {FocusableRef, FocusableRefValue, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface PickerStyleProps {\n  /**\n   * The size of the Picker.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether the picker should be displayed with a quiet style.\n   * @private\n   */\n  isQuiet?: boolean\n}\n\nexport interface PickerProps<T extends object> extends\n  Omit<AriaSelectProps<T>, 'children' | 'style' | 'className'>,\n  PickerStyleProps,\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\ninterface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}\n\nexport const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);\n\nconst inputButton = style<PickerButtonProps | AriaSelectRenderProps>({\n  ...focusRing(),\n  ...fieldInput(),\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid',\n    isQuiet: 'none'\n  },\n  position: 'relative',\n  font: 'control',\n  display: 'flex',\n  textAlign: 'start',\n  borderStyle: {\n    default: 'none',\n    forcedColors: 'solid'\n  },\n  borderColor: {\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'control',\n  alignItems: 'center',\n  height: 'control',\n  transition: 'default',\n  columnGap: {\n    default: 'text-to-control',\n    isQuiet: 'text-to-visual'\n  },\n  paddingX: {\n    default: 'edge-to-text',\n    isQuiet: 0\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isOpen: 'gray-200',\n    isDisabled: 'disabled',\n    isQuiet: 'transparent'\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  maxWidth: {\n    isQuiet: 'max'\n  },\n  disableTapHighlight: true\n});\n\nconst quietFocusLine = style({\n  width: 'full',\n  // Use pixels since we are emulating a border.\n  height: '[2px]',\n  position: 'absolute',\n  bottom: 0,\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'blue-800',\n    forcedColors: 'Highlight'\n  }\n});\n\nexport let menu = style({\n  outlineStyle: 'none',\n  display: 'grid',\n  gridTemplateColumns: {\n    size: {\n      S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n      M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n      L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n      XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n    }\n  },\n  boxSizing: 'border-box',\n  maxHeight: '[inherit]',\n  overflow: 'auto',\n  padding: 8,\n  fontFamily: 'sans',\n  fontSize: 'control'\n});\n\nconst invalidBorder = style({\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  bottom: 0,\n  right: 0,\n  pointerEvents: 'none',\n  borderRadius: 'control',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: 'negative',\n  transition: 'default'\n});\n\nconst valueStyles = style({\n  flexGrow: {\n    default: 1,\n    isQuiet: 0\n  },\n  truncate: true,\n  display: 'flex',\n  alignItems: 'center'\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: 90,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nlet InternalPickerContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\nlet InsideSelectValueContext = createContext(false);\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, PickerContext);\n  let domRef = useFocusableRef(ref);\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    placeholder = stringFormatter.format('picker.placeholder'),\n    isQuiet,\n    ...pickerProps\n  } = props;\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  return (\n    <AriaSelect\n      {...pickerProps}\n      placeholder={placeholder}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {({isDisabled, isOpen, isFocusVisible, isInvalid, isRequired}) => (\n        <>\n          <InternalPickerContext.Provider value={{size}}>\n            <FieldLabel\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              size={size}\n              labelPosition={labelPosition}\n              labelAlign={labelAlign}\n              isQuiet={isQuiet}\n              necessityIndicator={necessityIndicator}\n              contextualHelp={props.contextualHelp}>\n              {label}\n            </FieldLabel>\n            <Button\n              ref={domRef}\n              style={renderProps => pressScale(domRef)(renderProps)}\n              // Prevent press scale from sticking while Picker is open.\n              // @ts-ignore\n              isPressed={false}\n              className={renderProps => inputButton({\n                ...renderProps,\n                size: size,\n                isOpen,\n                isQuiet\n              })}>\n              {(renderProps) => (\n                <>\n                  <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> * {display: none;}')}>\n                    {({defaultChildren}) => {\n                      return (\n                        <Provider\n                          values={[\n                            [IconContext, {\n                              slots: {\n                                icon: {\n                                  render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n                                  styles: icon\n                                }\n                              }\n                            }],\n                            [TextContext, {\n                              slots: {\n                                description: {},\n                                label: {styles: style({\n                                  display: 'block',\n                                  flexGrow: 1,\n                                  truncate: true\n                                })}\n                              }\n                            }],\n                            [InsideSelectValueContext, true]\n                          ]}>\n                          {defaultChildren}\n                        </Provider>\n                      );\n                    }}\n                  </SelectValue>\n                  {isInvalid && (\n                    <FieldErrorIcon isDisabled={isDisabled} />\n                  )}\n                  <ChevronIcon\n                    size={size}\n                    className={iconStyles} />\n                  {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }\n                  {isInvalid && !isDisabled && !isQuiet &&\n                    // @ts-ignore known limitation detecting functions from the theme\n                    <div className={invalidBorder({...renderProps, size})} />\n                  }\n                </>\n              )}\n            </Button>\n            <HelpText\n              size={size}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              description={descriptionMessage}>\n              {errorMessage}\n            </HelpText>\n            <PopoverBase\n              hideArrow\n              offset={menuOffset}\n              placement={`${direction} ${align}` as Placement}\n              shouldFlip={shouldFlip}\n              UNSAFE_style={{\n                width: menuWidth && !isQuiet ? `${menuWidth}px` : undefined\n              }}\n              styles={style({\n                marginStart: {\n                  isQuiet: -12\n                },\n                minWidth: {\n                  default: '[var(--trigger-width)]',\n                  isQuiet: 192\n                },\n                width: {\n                  default: '[var(--trigger-width)]',\n                  isQuiet: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'\n                }\n              })(props)}>\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          </InternalPickerContext.Provider>\n        </>\n      )}\n    </AriaSelect>\n  );\n});\n\nexport interface PickerItemProps 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 PickerItem(props: PickerItemProps) {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  let {size} = useContext(InternalPickerContext);\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          <DefaultProvider\n            context={IconContext}\n            value={{slots: {\n              icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n            }}}>\n            <DefaultProvider\n              context={TextContext}\n              value={{\n                slots: {\n                  label: {styles: label({size})},\n                  description: {styles: description({...renderProps, size})}\n                }\n              }}>\n              {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n              {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n            </DefaultProvider>\n          </DefaultProvider>\n        );\n      }}\n    </ListBoxItem>\n  );\n}\n\n// A Context.Provider that only sets a value if not inside SelectValue.\nfunction DefaultProvider({context, value, children}: {context: React.Context<any>, value: any, children: any}) {\n  let inSelectValue = useContext(InsideSelectValueContext);\n  if (inSelectValue) {\n    return children;\n  }\n\n  return <context.Provider value={value}>{children}</context.Provider>;\n}\n\nexport interface PickerSectionProps<T extends object> extends SectionProps<T> {}\nexport function PickerSection<T extends object>(props: PickerSectionProps<T>) {\n  return (\n    <>\n      <AriaListBoxSection\n        {...props}\n        className={section}>\n        {props.children}\n      </AriaListBoxSection>\n      <Divider />\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"Picker.cjs.map"}