@react-spectrum/s2 0.7.1 → 0.8.0

package/dist/Divider.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAgCM,MAAM,0DAAiB,CAAA,GAAA,0BAAY,EAAoD;AAEvF,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDN,MAAM,4CAAU,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,QAAQ,KAAmB,EAAE,GAAW;IAC/F,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,oCAAW;QACT,GAAG,KAAK;QACT,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAQ;YAClD,MAAM,MAAM,IAAI,IAAI;YACpB,aAAa,MAAM,WAAW,IAAI;YAClC,aAAa,MAAM,WAAW;YAC9B,eAAe,CAAC,CAAC,MAAM,WAAW;QACpC,GAAG,MAAM,MAAM;;AAErB","sources":["packages/@react-spectrum/s2/src/Divider.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, Separator as RACSeparator, SeparatorProps as RACSeparatorProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n/*\n * Adding as it's own type to deal with size being a part of the theme so we\n * can type style() and it's parameters.\n */\ninterface DividerSpectrumProps {\n  /**\n   * How thick the Divider should be.\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /**\n   * How thick the Divider should be.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical',\n  /** The static color style to apply. Useful when the Divider appears over a color background. */\n  staticColor?: 'white' | 'black' | 'auto'\n}\n\n// TODO: allow overriding height (only when orientation is vertical)??\nexport interface DividerProps extends DividerSpectrumProps, Omit<RACSeparatorProps, 'className' | 'style' | 'elementType'>, StyleProps {}\n\nexport const DividerContext = createContext<ContextValue<Partial<DividerProps>, DOMRefValue>>(null);\n\nexport const divider = style<DividerSpectrumProps & {isStaticColor: boolean}>({\n  ...staticColor(),\n  alignSelf: 'stretch',\n  backgroundColor: {\n    default: 'gray-200',\n    size: {\n      L: 'gray-800'\n    },\n    isStaticColor: {\n      default: 'transparent-overlay-200',\n      size: {\n        L: 'transparent-overlay-800'\n      }\n    },\n    forcedColors: 'ButtonBorder'\n  },\n  borderStyle: 'none',\n  borderRadius: 'full',\n  margin: 0,\n  height: {\n    orientation: {\n      horizontal: {\n        // These should be px not rems, because we're emulating a border.\n        default: '[2px]',\n        size: {\n          S: '[1px]',\n          L: '[4px]'\n        }\n      }\n    }\n  },\n  width: {\n    orientation: {\n      vertical: {\n        default: '[2px]',\n        size: {\n          S: '[1px]',\n          L: '[4px]'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\n/**\n * Dividers bring clarity to a layout by grouping and dividing content in close proximity.\n * They can also be used to establish rhythm and hierarchy.\n */\nexport const Divider = /*#__PURE__*/ forwardRef(function Divider(props: DividerProps, ref: DOMRef) {\n  [props, ref] = useSpectrumContextProps(props, ref, DividerContext);\n  let domRef = useDOMRef(ref);\n\n  return (\n    <RACSeparator\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + divider({\n        size: props.size || 'M',\n        orientation: props.orientation || 'horizontal',\n        staticColor: props.staticColor,\n        isStaticColor: !!props.staticColor\n      }, props.styles)} />\n  );\n});\n"],"names":[],"version":3,"file":"Divider.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAgCM,MAAM,0DAAiB,CAAA,GAAA,0BAAY,EAAoD;AAEvF,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDN,MAAM,4CAAU,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,QAAQ,KAAmB,EAAE,GAAW;IAC/F,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,oCAAW;QACT,GAAG,KAAK;QACT,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAQ;YAClD,MAAM,MAAM,IAAI,IAAI;YACpB,aAAa,MAAM,WAAW,IAAI;YAClC,aAAa,MAAM,WAAW;YAC9B,eAAe,CAAC,CAAC,MAAM,WAAW;QACpC,GAAG,MAAM,MAAM;;AAErB","sources":["packages/@react-spectrum/s2/src/Divider.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, Separator as RACSeparator, SeparatorProps as RACSeparatorProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n/*\n * Adding as it's own type to deal with size being a part of the theme so we\n * can type style() and it's parameters.\n */\ninterface DividerSpectrumProps {\n  /**\n   * How thick the Divider should be.\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /**\n   * How thick the Divider should be.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical',\n  /** The static color style to apply. Useful when the Divider appears over a color background. */\n  staticColor?: 'white' | 'black' | 'auto'\n}\n\n// TODO: allow overriding height (only when orientation is vertical)??\nexport interface DividerProps extends DividerSpectrumProps, Omit<RACSeparatorProps, 'className' | 'style' | 'elementType'>, StyleProps {}\n\nexport const DividerContext = createContext<ContextValue<Partial<DividerProps>, DOMRefValue>>(null);\n\nexport const divider = style<DividerSpectrumProps & {isStaticColor: boolean}>({\n  ...staticColor(),\n  alignSelf: 'stretch',\n  backgroundColor: {\n    default: 'gray-200',\n    size: {\n      L: 'gray-800'\n    },\n    isStaticColor: {\n      default: 'transparent-overlay-200',\n      size: {\n        L: 'transparent-overlay-800'\n      }\n    },\n    forcedColors: 'ButtonBorder'\n  },\n  borderStyle: 'none',\n  borderRadius: 'full',\n  margin: 0,\n  flexGrow: 0,\n  flexShrink: 0,\n  height: {\n    orientation: {\n      horizontal: {\n        // These should be px not rems, because we're emulating a border.\n        default: '[2px]',\n        size: {\n          S: '[1px]',\n          L: '[4px]'\n        }\n      }\n    }\n  },\n  width: {\n    orientation: {\n      vertical: {\n        default: '[2px]',\n        size: {\n          S: '[1px]',\n          L: '[4px]'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\n/**\n * Dividers bring clarity to a layout by grouping and dividing content in close proximity.\n * They can also be used to establish rhythm and hierarchy.\n */\nexport const Divider = /*#__PURE__*/ forwardRef(function Divider(props: DividerProps, ref: DOMRef) {\n  [props, ref] = useSpectrumContextProps(props, ref, DividerContext);\n  let domRef = useDOMRef(ref);\n\n  return (\n    <RACSeparator\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + divider({\n        size: props.size || 'M',\n        orientation: props.orientation || 'horizontal',\n        staticColor: props.staticColor,\n        isStaticColor: !!props.staticColor\n      }, props.styles)} />\n  );\n});\n"],"names":[],"version":3,"file":"Divider.cjs.map"}

package/dist/Divider.css

@@ -63,6 +63,14 @@
     margin-inline-end: 0;
   }
 
+  .__a-3t1x {
+    flex-grow: 0;
+  }
+
+  ._9-3t1x {
+    flex-shrink: 0;
+  }
+
   .k-375zlr {
     height: 2px;
   }

package/dist/Divider.css.map

@@ -1 +1 @@
-{"mappings":"AA4CuB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA","sources":["packages/@react-spectrum/s2/src/Divider.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, Separator as RACSeparator, SeparatorProps as RACSeparatorProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n/*\n * Adding as it's own type to deal with size being a part of the theme so we\n * can type style() and it's parameters.\n */\ninterface DividerSpectrumProps {\n  /**\n   * How thick the Divider should be.\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /**\n   * How thick the Divider should be.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical',\n  /** The static color style to apply. Useful when the Divider appears over a color background. */\n  staticColor?: 'white' | 'black' | 'auto'\n}\n\n// TODO: allow overriding height (only when orientation is vertical)??\nexport interface DividerProps extends DividerSpectrumProps, Omit<RACSeparatorProps, 'className' | 'style' | 'elementType'>, StyleProps {}\n\nexport const DividerContext = createContext<ContextValue<Partial<DividerProps>, DOMRefValue>>(null);\n\nexport const divider = style<DividerSpectrumProps & {isStaticColor: boolean}>({\n  ...staticColor(),\n  alignSelf: 'stretch',\n  backgroundColor: {\n    default: 'gray-200',\n    size: {\n      L: 'gray-800'\n    },\n    isStaticColor: {\n      default: 'transparent-overlay-200',\n      size: {\n        L: 'transparent-overlay-800'\n      }\n    },\n    forcedColors: 'ButtonBorder'\n  },\n  borderStyle: 'none',\n  borderRadius: 'full',\n  margin: 0,\n  height: {\n    orientation: {\n      horizontal: {\n        // These should be px not rems, because we're emulating a border.\n        default: '[2px]',\n        size: {\n          S: '[1px]',\n          L: '[4px]'\n        }\n      }\n    }\n  },\n  width: {\n    orientation: {\n      vertical: {\n        default: '[2px]',\n        size: {\n          S: '[1px]',\n          L: '[4px]'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\n/**\n * Dividers bring clarity to a layout by grouping and dividing content in close proximity.\n * They can also be used to establish rhythm and hierarchy.\n */\nexport const Divider = /*#__PURE__*/ forwardRef(function Divider(props: DividerProps, ref: DOMRef) {\n  [props, ref] = useSpectrumContextProps(props, ref, DividerContext);\n  let domRef = useDOMRef(ref);\n\n  return (\n    <RACSeparator\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + divider({\n        size: props.size || 'M',\n        orientation: props.orientation || 'horizontal',\n        staticColor: props.staticColor,\n        isStaticColor: !!props.staticColor\n      }, props.styles)} />\n  );\n});\n"],"names":[],"version":3,"file":"Divider.css.map"}
+{"mappings":"AA4CuB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA","sources":["packages/@react-spectrum/s2/src/Divider.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, Separator as RACSeparator, SeparatorProps as RACSeparatorProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n/*\n * Adding as it's own type to deal with size being a part of the theme so we\n * can type style() and it's parameters.\n */\ninterface DividerSpectrumProps {\n  /**\n   * How thick the Divider should be.\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /**\n   * How thick the Divider should be.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical',\n  /** The static color style to apply. Useful when the Divider appears over a color background. */\n  staticColor?: 'white' | 'black' | 'auto'\n}\n\n// TODO: allow overriding height (only when orientation is vertical)??\nexport interface DividerProps extends DividerSpectrumProps, Omit<RACSeparatorProps, 'className' | 'style' | 'elementType'>, StyleProps {}\n\nexport const DividerContext = createContext<ContextValue<Partial<DividerProps>, DOMRefValue>>(null);\n\nexport const divider = style<DividerSpectrumProps & {isStaticColor: boolean}>({\n  ...staticColor(),\n  alignSelf: 'stretch',\n  backgroundColor: {\n    default: 'gray-200',\n    size: {\n      L: 'gray-800'\n    },\n    isStaticColor: {\n      default: 'transparent-overlay-200',\n      size: {\n        L: 'transparent-overlay-800'\n      }\n    },\n    forcedColors: 'ButtonBorder'\n  },\n  borderStyle: 'none',\n  borderRadius: 'full',\n  margin: 0,\n  flexGrow: 0,\n  flexShrink: 0,\n  height: {\n    orientation: {\n      horizontal: {\n        // These should be px not rems, because we're emulating a border.\n        default: '[2px]',\n        size: {\n          S: '[1px]',\n          L: '[4px]'\n        }\n      }\n    }\n  },\n  width: {\n    orientation: {\n      vertical: {\n        default: '[2px]',\n        size: {\n          S: '[1px]',\n          L: '[4px]'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\n/**\n * Dividers bring clarity to a layout by grouping and dividing content in close proximity.\n * They can also be used to establish rhythm and hierarchy.\n */\nexport const Divider = /*#__PURE__*/ forwardRef(function Divider(props: DividerProps, ref: DOMRef) {\n  [props, ref] = useSpectrumContextProps(props, ref, DividerContext);\n  let domRef = useDOMRef(ref);\n\n  return (\n    <RACSeparator\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + divider({\n        size: props.size || 'M',\n        orientation: props.orientation || 'horizontal',\n        staticColor: props.staticColor,\n        isStaticColor: !!props.staticColor\n      }, props.styles)} />\n  );\n});\n"],"names":[],"version":3,"file":"Divider.css.map"}

package/dist/Divider.mjs

@@ -30,6 +30,8 @@ const $bdf52657dac0f070$export$e8c9778bf415dd08 = function anonymous(props, over
     let $B = false;
     let $y = false;
     let $z = false;
+    let $__a = false;
+    let $_9 = false;
     let $l = false;
     for (let p of matches){
         if (/^\s*_5/.test(p)) $_5 = true;
@@ -37,6 +39,8 @@ const $bdf52657dac0f070$export$e8c9778bf415dd08 = function anonymous(props, over
         if (/^\s*B/.test(p)) $B = true;
         if (/^\s*y/.test(p)) $y = true;
         if (/^\s*z/.test(p)) $z = true;
+        if (/^\s*__a/.test(p)) $__a = true;
+        if (/^\s*_9/.test(p)) $_9 = true;
         if (/^\s*l/.test(p)) $l = true;
     }
     if (props.staticColor === "white") rules += ' -_1de2x0q_b-b';
@@ -57,6 +61,8 @@ const $bdf52657dac0f070$export$e8c9778bf415dd08 = function anonymous(props, over
     if (!$B) rules += ' Ba';
     if (!$y) rules += ' ya';
     if (!$z) rules += ' za';
+    if (!$__a) rules += ' __a-3t1x';
+    if (!$_9) rules += ' _9-3t1x';
     if (props.orientation === "horizontal") {
         if (props.size === "L") rules += ' k-3761a9';
         else if (props.size === "S") rules += ' k-375yri';

package/dist/Divider.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAgCM,MAAM,0DAAiB,CAAA,GAAA,oBAAY,EAAoD;AAEvF,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDN,MAAM,4CAAU,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,QAAQ,KAAmB,EAAE,GAAW;IAC/F,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,gBAAW;QACT,GAAG,KAAK;QACT,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAQ;YAClD,MAAM,MAAM,IAAI,IAAI;YACpB,aAAa,MAAM,WAAW,IAAI;YAClC,aAAa,MAAM,WAAW;YAC9B,eAAe,CAAC,CAAC,MAAM,WAAW;QACpC,GAAG,MAAM,MAAM;;AAErB","sources":["packages/@react-spectrum/s2/src/Divider.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, Separator as RACSeparator, SeparatorProps as RACSeparatorProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n/*\n * Adding as it's own type to deal with size being a part of the theme so we\n * can type style() and it's parameters.\n */\ninterface DividerSpectrumProps {\n  /**\n   * How thick the Divider should be.\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /**\n   * How thick the Divider should be.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical',\n  /** The static color style to apply. Useful when the Divider appears over a color background. */\n  staticColor?: 'white' | 'black' | 'auto'\n}\n\n// TODO: allow overriding height (only when orientation is vertical)??\nexport interface DividerProps extends DividerSpectrumProps, Omit<RACSeparatorProps, 'className' | 'style' | 'elementType'>, StyleProps {}\n\nexport const DividerContext = createContext<ContextValue<Partial<DividerProps>, DOMRefValue>>(null);\n\nexport const divider = style<DividerSpectrumProps & {isStaticColor: boolean}>({\n  ...staticColor(),\n  alignSelf: 'stretch',\n  backgroundColor: {\n    default: 'gray-200',\n    size: {\n      L: 'gray-800'\n    },\n    isStaticColor: {\n      default: 'transparent-overlay-200',\n      size: {\n        L: 'transparent-overlay-800'\n      }\n    },\n    forcedColors: 'ButtonBorder'\n  },\n  borderStyle: 'none',\n  borderRadius: 'full',\n  margin: 0,\n  height: {\n    orientation: {\n      horizontal: {\n        // These should be px not rems, because we're emulating a border.\n        default: '[2px]',\n        size: {\n          S: '[1px]',\n          L: '[4px]'\n        }\n      }\n    }\n  },\n  width: {\n    orientation: {\n      vertical: {\n        default: '[2px]',\n        size: {\n          S: '[1px]',\n          L: '[4px]'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\n/**\n * Dividers bring clarity to a layout by grouping and dividing content in close proximity.\n * They can also be used to establish rhythm and hierarchy.\n */\nexport const Divider = /*#__PURE__*/ forwardRef(function Divider(props: DividerProps, ref: DOMRef) {\n  [props, ref] = useSpectrumContextProps(props, ref, DividerContext);\n  let domRef = useDOMRef(ref);\n\n  return (\n    <RACSeparator\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + divider({\n        size: props.size || 'M',\n        orientation: props.orientation || 'horizontal',\n        staticColor: props.staticColor,\n        isStaticColor: !!props.staticColor\n      }, props.styles)} />\n  );\n});\n"],"names":[],"version":3,"file":"Divider.mjs.map"}
+{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAgCM,MAAM,0DAAiB,CAAA,GAAA,oBAAY,EAAoD;AAEvF,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDN,MAAM,4CAAU,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,QAAQ,KAAmB,EAAE,GAAW;IAC/F,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,gBAAW;QACT,GAAG,KAAK;QACT,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAQ;YAClD,MAAM,MAAM,IAAI,IAAI;YACpB,aAAa,MAAM,WAAW,IAAI;YAClC,aAAa,MAAM,WAAW;YAC9B,eAAe,CAAC,CAAC,MAAM,WAAW;QACpC,GAAG,MAAM,MAAM;;AAErB","sources":["packages/@react-spectrum/s2/src/Divider.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, Separator as RACSeparator, SeparatorProps as RACSeparatorProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n/*\n * Adding as it's own type to deal with size being a part of the theme so we\n * can type style() and it's parameters.\n */\ninterface DividerSpectrumProps {\n  /**\n   * How thick the Divider should be.\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /**\n   * How thick the Divider should be.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical',\n  /** The static color style to apply. Useful when the Divider appears over a color background. */\n  staticColor?: 'white' | 'black' | 'auto'\n}\n\n// TODO: allow overriding height (only when orientation is vertical)??\nexport interface DividerProps extends DividerSpectrumProps, Omit<RACSeparatorProps, 'className' | 'style' | 'elementType'>, StyleProps {}\n\nexport const DividerContext = createContext<ContextValue<Partial<DividerProps>, DOMRefValue>>(null);\n\nexport const divider = style<DividerSpectrumProps & {isStaticColor: boolean}>({\n  ...staticColor(),\n  alignSelf: 'stretch',\n  backgroundColor: {\n    default: 'gray-200',\n    size: {\n      L: 'gray-800'\n    },\n    isStaticColor: {\n      default: 'transparent-overlay-200',\n      size: {\n        L: 'transparent-overlay-800'\n      }\n    },\n    forcedColors: 'ButtonBorder'\n  },\n  borderStyle: 'none',\n  borderRadius: 'full',\n  margin: 0,\n  flexGrow: 0,\n  flexShrink: 0,\n  height: {\n    orientation: {\n      horizontal: {\n        // These should be px not rems, because we're emulating a border.\n        default: '[2px]',\n        size: {\n          S: '[1px]',\n          L: '[4px]'\n        }\n      }\n    }\n  },\n  width: {\n    orientation: {\n      vertical: {\n        default: '[2px]',\n        size: {\n          S: '[1px]',\n          L: '[4px]'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\n/**\n * Dividers bring clarity to a layout by grouping and dividing content in close proximity.\n * They can also be used to establish rhythm and hierarchy.\n */\nexport const Divider = /*#__PURE__*/ forwardRef(function Divider(props: DividerProps, ref: DOMRef) {\n  [props, ref] = useSpectrumContextProps(props, ref, DividerContext);\n  let domRef = useDOMRef(ref);\n\n  return (\n    <RACSeparator\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + divider({\n        size: props.size || 'M',\n        orientation: props.orientation || 'horizontal',\n        staticColor: props.staticColor,\n        isStaticColor: !!props.staticColor\n      }, props.styles)} />\n  );\n});\n"],"names":[],"version":3,"file":"Divider.mjs.map"}

package/dist/Field.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Field.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 AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Alignment, DOMRef, NecessityIndicator} from '@react-types/shared';\nimport AsteriskIcon from '../ui-icons/Asterisk';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline, centerBaseline, centerBaselineBefore} from './CenterBaseline';\nimport {composeRenderProps, FieldError, FieldErrorProps, Group, GroupProps, Label, LabelProps, Provider, Input as RACInput, InputProps as RACInputProps, Text} from 'react-aria-components';\nimport {ContextualHelpContext} from './ContextualHelp';\nimport {fieldInput, fieldLabel, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ForwardedRef, forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useId} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\ninterface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'children'>, StyleProps {\n  isDisabled?: boolean,\n  isRequired?: boolean,\n  size?: 'S' | 'M' | 'L' | 'XL',\n  necessityIndicator?: NecessityIndicator,\n  labelAlign?: Alignment,\n  labelPosition?: 'top' | 'side',\n  includeNecessityIndicatorInAccessibilityName?: boolean,\n  staticColor?: 'white' | 'black' | 'auto',\n  contextualHelp?: ReactNode,\n  isQuiet?: boolean,\n  children?: ReactNode\n}\n\nexport const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    isDisabled,\n    isRequired,\n    size = 'M',\n    necessityIndicator = 'icon',\n    includeNecessityIndicatorInAccessibilityName = false,\n    labelAlign,\n    labelPosition,\n    staticColor,\n    contextualHelp,\n    isQuiet,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...labelProps\n  } = props;\n\n  let domRef = useDOMRef(ref);\n  let contextualHelpId = useId();\n  let fallbackLabelPropsId = useId();\n  if (contextualHelp && !labelProps.id) {\n    labelProps.id = fallbackLabelPropsId;\n  }\n\n  if (!props.children) {\n    return null;\n  }\n\n  return (\n    <div\n      className={style({\n        gridArea: 'label',\n        display: 'inline',\n        textAlign: {\n          labelAlign: {\n            start: 'start',\n            end: 'end'\n          }\n        },\n        paddingBottom: {\n          labelPosition: {\n            top: '--field-gap'\n          }\n        },\n        contain: {\n          labelPosition: {\n            top: 'inline-size'\n          },\n          isQuiet: 'none'\n        }\n      })({labelAlign, labelPosition, isQuiet})}>\n      <Label\n        {...labelProps}\n        ref={domRef}\n        style={UNSAFE_style}\n        className={UNSAFE_className + mergeStyles(style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}), props.styles)}>\n        {props.children}\n        {(isRequired || necessityIndicator === 'label') && (\n          <span className={style({whiteSpace: 'nowrap'})}>\n            &nbsp;\n            {necessityIndicator === 'icon' &&\n              <AsteriskIcon\n                size={size === 'S' ? 'M' : size}\n                className={style({\n                  '--iconPrimary': {\n                    type: 'fill',\n                    value: 'currentColor'\n                  }\n                })}\n                aria-label={includeNecessityIndicatorInAccessibilityName ? stringFormatter.format('label.(required)') : undefined} />\n            }\n            {necessityIndicator === 'label' &&\n              /* The necessity label is hidden to screen readers if the field is required because\n              * aria-required is set on the field in that case. That will already be announced,\n              * so no need to duplicate it here. If optional, we do want it to be announced here.\n              */\n              <span aria-hidden={!includeNecessityIndicatorInAccessibilityName ? isRequired : undefined}>\n                {isRequired ? stringFormatter.format('label.(required)') : stringFormatter.format('label.(optional)')}\n              </span>\n            }\n          </span>\n        )}\n      </Label>\n      {contextualHelp && (\n        <span className={style({whiteSpace: 'nowrap'})}>\n          &nbsp;\n          <CenterBaseline\n            styles={style({\n              display: 'inline-flex',\n              height: 0\n            })}>\n            <ContextualHelpContext.Provider\n              value={{\n                id: contextualHelpId,\n                'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,\n                size: (size === 'L' || size === 'XL') ? 'S' : 'XS'\n              }}>\n              {contextualHelp}\n            </ContextualHelpContext.Provider>\n          </CenterBaseline>\n        </span>\n      )}\n    </div>\n  );\n});\n\ninterface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'children'>, UnsafeStyles {\n  size?: 'S' | 'M' | 'L' | 'XL',\n  children: ReactNode,\n  styles?: StyleString\n}\n\nconst fieldGroupStyles = style({\n  ...focusRing(),\n  ...fieldInput(),\n  display: 'flex',\n  alignItems: 'center',\n  height: 'control',\n  boxSizing: 'border-box',\n  paddingX: 'edge-to-text',\n  font: 'control',\n  borderRadius: 'control',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  transition: 'default',\n  borderColor: {\n    default: baseColor('gray-300'),\n    isInvalid: 'negative',\n    isFocusWithin: {\n      default: 'gray-900',\n      isInvalid: 'negative-1000',\n      forcedColors: 'Highlight'\n    },\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  backgroundColor: 'gray-25',\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n  return (\n    <Group\n      ref={ref}\n      {...props}\n      onPointerDown={(e) => {\n        // Forward focus to input element when clicking on a non-interactive child (e.g. icon or padding)\n        if (e.pointerType === 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n          e.preventDefault();\n          e.currentTarget.querySelector('input')?.focus();\n        }\n      }}\n      onPointerUp={e => {\n        if (e.pointerType !== 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n          e.preventDefault();\n          e.currentTarget.querySelector('input')?.focus();\n        }\n      }}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + ' ' + centerBaselineBefore + mergeStyles(\n        fieldGroupStyles({...renderProps, size: props.size || 'M'}),\n        props.styles\n      )} />\n  );\n});\n\nexport interface InputProps extends Omit<RACInputProps, 'className' | 'style'>, StyleProps {}\n\nexport const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {\n  let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n  return (\n    <RACInput\n      {...otherProps}\n      ref={ref}\n      style={UNSAFE_style}\n      className={UNSAFE_className + mergeStyles(style({\n        padding: 0,\n        backgroundColor: 'transparent',\n        color: '[inherit]',\n        fontFamily: '[inherit]',\n        fontSize: '[inherit]',\n        fontWeight: '[inherit]',\n        flexGrow: 1,\n        flexShrink: 1,\n        minWidth: 0,\n        width: 'full',\n        outlineStyle: 'none',\n        borderStyle: 'none',\n        truncate: true\n      }), styles)} />\n  );\n});\n\ninterface HelpTextProps extends FieldErrorProps {\n  size?: 'S' | 'M' | 'L' | 'XL',\n  isDisabled?: boolean,\n  isInvalid?: boolean, // TODO: export FieldErrorContext from RAC to get this.\n  description?: ReactNode,\n  showErrorIcon?: boolean\n}\n\nconst helpTextStyles = style({\n  gridArea: 'helptext',\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 'text-to-visual',\n  font: 'control',\n  color: {\n    default: 'neutral-subdued',\n    isInvalid: 'negative',\n    isDisabled: 'disabled'\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  contain: 'inline-size',\n  paddingTop: '--field-gap',\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport function HelpText(props: HelpTextProps & {descriptionRef?: DOMRef<HTMLDivElement>, errorRef?: DOMRef<HTMLDivElement>}) {\n  let domDescriptionRef = useDOMRef(props.descriptionRef || null);\n  let domErrorRef = useDOMRef(props.errorRef || null);\n\n  if (!props.isInvalid && props.description) {\n    return (\n      <Text\n        slot=\"description\"\n        ref={domDescriptionRef}\n        className={helpTextStyles({size: props.size || 'M', isDisabled: props.isDisabled})}>\n        {props.description}\n      </Text>\n    );\n  }\n\n  return (\n    <FieldError\n      {...props}\n      ref={domErrorRef}\n      className={renderProps => helpTextStyles({...renderProps, size: props.size || 'M', isDisabled: props.isDisabled})}>\n      {composeRenderProps(props.children, (children, {validationErrors}) => (<>\n        {props.showErrorIcon &&\n          <CenterBaseline>\n            <AlertIcon />\n          </CenterBaseline>\n        }\n        <span>{children || validationErrors.join(' ')}</span>\n      </>))}\n    </FieldError>\n  );\n}\n\nexport function FieldErrorIcon(props: {isDisabled?: boolean}) {\n  return (\n    <Provider\n      values={[\n        [IconContext, {\n          render: centerBaseline({\n            slot: 'icon',\n            styles: style({\n              order: 0,\n              flexShrink: 0,\n              '--iconPrimary': {\n                type: 'fill',\n                value: {\n                  default: 'negative',\n                  forcedColors: 'ButtonText'\n                }\n              }\n            })}),\n          styles: style({\n            size: fontRelative(20),\n            marginStart: 'text-to-visual',\n            marginEnd: fontRelative(-2),\n            flexShrink: 0\n          })\n        }]\n      ]}>\n      {!props.isDisabled && <AlertIcon />}\n    </Provider>\n  );\n}\n"],"names":[],"version":3,"file":"Field.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;AAkCM,MAAM,0DAAa,CAAA,GAAA,uBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAA6B;IAC5G,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,cACF,UAAU,cACV,UAAU,QACV,OAAO,yBACP,qBAAqB,sDACrB,+CAA+C,mBAC/C,UAAU,iBACV,aAAa,eACb,WAAW,kBACX,cAAc,WACd,OAAO,gBACP,YAAY,oBACZ,mBAAmB,IACnB,GAAG,YACJ,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,mBAAmB,CAAA,GAAA,2BAAI;IAC3B,IAAI,uBAAuB,CAAA,GAAA,2BAAI;IAC/B,IAAI,kBAAkB,CAAC,WAAW,EAAE,EAClC,WAAW,EAAE,GAAG;IAGlB,IAAI,CAAC,MAAM,QAAQ,EACjB,OAAO;IAGT,qBACE,iCAAC;QACC,WAAW;;;;;;;;;;;;;UAoBR;wBAAC;2BAAY;qBAAe;QAAO;;0BACtC,iCAAC,CAAA,GAAA,gCAAI;gBACF,GAAG,UAAU;gBACd,KAAK;gBACL,OAAO;gBACP,WAAW,mBAAmB,CAAA,GAAA,qCAAU,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAAoB;mCAAC;gCAAe;0BAAY;oBAAM,eAAe,CAAC,CAAC;gBAAW,IAAI,MAAM,MAAM;;oBAC3I,MAAM,QAAQ;oBACb,CAAA,cAAc,uBAAuB,OAAM,mBAC3C,iCAAC;wBAAK,SAAS;;4BAAiC;4BAE7C,uBAAuB,wBACtB,gCAAC,CAAA,GAAA,iCAAW;gCACV,MAAM,SAAS,MAAM,MAAM;gCAC3B,SAAS;gCAMT,cAAY,+CAA+C,gBAAgB,MAAM,CAAC,sBAAsB;;4BAE3G,uBAAuB,WACtB;;;cAGA,iBACA,gCAAC;gCAAK,eAAa,CAAC,+CAA+C,aAAa;0CAC7E,aAAa,gBAAgB,MAAM,CAAC,sBAAsB,gBAAgB,MAAM,CAAC;;;;;;YAM3F,gCACC,iCAAC;gBAAK,SAAS;;oBAAiC;kCAE9C,gCAAC,CAAA,GAAA,wCAAa;wBACZ,MAAM;kCAIN,cAAA,gCAAC,CAAA,GAAA,+CAAoB,EAAE,QAAQ;4BAC7B,OAAO;gCACL,IAAI;gCACJ,mBAAmB,YAAY,KAAK,GAAG,WAAW,EAAE,CAAC,CAAC,EAAE,kBAAkB,GAAG;gCAC7E,MAAM,AAAC,SAAS,OAAO,SAAS,OAAQ,MAAM;4BAChD;sCACC;;;;;;;AAOf;AAQA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCC,MAAM,0DAAa,CAAA,GAAA,uBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAAiC;IAChH,qBACE,gCAAC,CAAA,GAAA,gCAAI;QACH,KAAK;QACJ,GAAG,KAAK;QACT,eAAe,CAAC;YACd,iGAAiG;YACjG,IAAI,EAAE,WAAW,KAAK,WAAW,CAAC,AAAC,EAAE,MAAM,CAAa,OAAO,CAAC,0BAA0B;gBACxF,EAAE,cAAc;gBAChB,EAAE,aAAa,CAAC,aAAa,CAAC,UAAU;YAC1C;QACF;QACA,aAAa,CAAA;YACX,IAAI,EAAE,WAAW,KAAK,WAAW,CAAC,AAAC,EAAE,MAAM,CAAa,OAAO,CAAC,0BAA0B;gBACxF,EAAE,cAAc;gBAChB,EAAE,aAAa,CAAC,aAAa,CAAC,UAAU;YAC1C;QACF;QACA,OAAO,MAAM,YAAY;QACzB,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,MAAM,CAAA,GAAA,8CAAmB,IAAI,CAAA,GAAA,qCAAU,EAChG,uCAAiB;gBAAC,GAAG,WAAW;gBAAE,MAAM,MAAM,IAAI,IAAI;YAAG,IACzD,MAAM,MAAM;;AAGpB;AAIO,MAAM,0DAAQ,CAAA,GAAA,uBAAS,EAAE,SAAS,MAAM,KAAiB,EAAE,GAAmC;IACnG,IAAI,oBAAC,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAE,GAAG,YAAW,GAAG;IACnE,qBACE,gCAAC,CAAA,GAAA,gCAAO;QACL,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,CAAA,GAAA,qCAAU,gHAcpC;;AAEV;AAUA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBC,SAAS,0CAAS,KAAmG;IAC1H,IAAI,oBAAoB,CAAA,GAAA,mCAAQ,EAAE,MAAM,cAAc,IAAI;IAC1D,IAAI,cAAc,CAAA,GAAA,mCAAQ,EAAE,MAAM,QAAQ,IAAI;IAE9C,IAAI,CAAC,MAAM,SAAS,IAAI,MAAM,WAAW,EACvC,qBACE,gCAAC,CAAA,GAAA,+BAAG;QACF,MAAK;QACL,KAAK;QACL,WAAW,qCAAe;YAAC,MAAM,MAAM,IAAI,IAAI;YAAK,YAAY,MAAM,UAAU;QAAA;kBAC/E,MAAM,WAAW;;IAKxB,qBACE,gCAAC,CAAA,GAAA,qCAAS;QACP,GAAG,KAAK;QACT,KAAK;QACL,WAAW,CAAA,cAAe,qCAAe;gBAAC,GAAG,WAAW;gBAAE,MAAM,MAAM,IAAI,IAAI;gBAAK,YAAY,MAAM,UAAU;YAAA;kBAC9G,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,UAAU,oBAAC,gBAAgB,EAAC,iBAAM;;oBACpE,MAAM,aAAa,kBAClB,gCAAC,CAAA,GAAA,wCAAa;kCACZ,cAAA,gCAAC,CAAA,GAAA,iCAAQ;;kCAGb,gCAAC;kCAAM,YAAY,iBAAiB,IAAI,CAAC;;;;;AAIjD;AAEO,SAAS,0CAAe,KAA6B;IAC1D,qBACE,gCAAC,CAAA,GAAA,mCAAO;QACN,QAAQ;YACN;gBAAC,CAAA,GAAA,qCAAU;gBAAG;oBACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;wBACrB,MAAM;wBACN,MAAM;oBAUJ;oBACJ,MAAM;gBAMR;aAAE;SACH;kBACA,CAAC,MAAM,UAAU,kBAAI,gCAAC,CAAA,GAAA,iCAAQ;;AAGrC","sources":["packages/@react-spectrum/s2/src/Field.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 AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Alignment, DOMRef, NecessityIndicator} from '@react-types/shared';\nimport AsteriskIcon from '../ui-icons/Asterisk';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline, centerBaseline, centerBaselineBefore} from './CenterBaseline';\nimport {composeRenderProps, FieldError, FieldErrorProps, Group, GroupProps, Label, LabelProps, Provider, Input as RACInput, InputProps as RACInputProps, Text} from 'react-aria-components';\nimport {ContextualHelpContext} from './ContextualHelp';\nimport {fieldInput, fieldLabel, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ForwardedRef, forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useId} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\ninterface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'children'>, StyleProps {\n  isDisabled?: boolean,\n  isRequired?: boolean,\n  size?: 'S' | 'M' | 'L' | 'XL',\n  necessityIndicator?: NecessityIndicator,\n  labelAlign?: Alignment,\n  labelPosition?: 'top' | 'side',\n  includeNecessityIndicatorInAccessibilityName?: boolean,\n  staticColor?: 'white' | 'black' | 'auto',\n  contextualHelp?: ReactNode,\n  isQuiet?: boolean,\n  children?: ReactNode\n}\n\nexport const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    isDisabled,\n    isRequired,\n    size = 'M',\n    necessityIndicator = 'icon',\n    includeNecessityIndicatorInAccessibilityName = false,\n    labelAlign,\n    labelPosition,\n    staticColor,\n    contextualHelp,\n    isQuiet,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...labelProps\n  } = props;\n\n  let domRef = useDOMRef(ref);\n  let contextualHelpId = useId();\n  let fallbackLabelPropsId = useId();\n  if (contextualHelp && !labelProps.id) {\n    labelProps.id = fallbackLabelPropsId;\n  }\n\n  if (!props.children) {\n    return null;\n  }\n\n  return (\n    <div\n      className={style({\n        gridArea: 'label',\n        display: 'inline',\n        textAlign: {\n          labelAlign: {\n            start: 'start',\n            end: 'end'\n          }\n        },\n        paddingBottom: {\n          labelPosition: {\n            top: '--field-gap'\n          }\n        },\n        contain: {\n          labelPosition: {\n            top: 'inline-size'\n          },\n          isQuiet: 'none'\n        }\n      })({labelAlign, labelPosition, isQuiet})}>\n      <Label\n        {...labelProps}\n        ref={domRef}\n        style={UNSAFE_style}\n        className={UNSAFE_className + mergeStyles(style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}), props.styles)}>\n        {props.children}\n        {(isRequired || necessityIndicator === 'label') && (\n          <span className={style({whiteSpace: 'nowrap'})}>\n            &nbsp;\n            {necessityIndicator === 'icon' &&\n              <AsteriskIcon\n                size={size === 'S' ? 'M' : size}\n                className={style({\n                  '--iconPrimary': {\n                    type: 'fill',\n                    value: 'currentColor'\n                  }\n                })}\n                aria-label={includeNecessityIndicatorInAccessibilityName ? stringFormatter.format('label.(required)') : undefined} />\n            }\n            {necessityIndicator === 'label' &&\n              /* The necessity label is hidden to screen readers if the field is required because\n              * aria-required is set on the field in that case. That will already be announced,\n              * so no need to duplicate it here. If optional, we do want it to be announced here.\n              */\n              <span aria-hidden={!includeNecessityIndicatorInAccessibilityName ? isRequired : undefined}>\n                {isRequired ? stringFormatter.format('label.(required)') : stringFormatter.format('label.(optional)')}\n              </span>\n            }\n          </span>\n        )}\n      </Label>\n      {contextualHelp && (\n        <span className={style({whiteSpace: 'nowrap'})}>\n          &nbsp;\n          <CenterBaseline\n            styles={style({\n              display: 'inline-flex',\n              height: 0\n            })}>\n            <ContextualHelpContext.Provider\n              value={{\n                id: contextualHelpId,\n                'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,\n                size: (size === 'L' || size === 'XL') ? 'S' : 'XS'\n              }}>\n              {contextualHelp}\n            </ContextualHelpContext.Provider>\n          </CenterBaseline>\n        </span>\n      )}\n    </div>\n  );\n});\n\ninterface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'children'>, UnsafeStyles {\n  size?: 'S' | 'M' | 'L' | 'XL',\n  children: ReactNode,\n  styles?: StyleString\n}\n\nconst fieldGroupStyles = style({\n  ...focusRing(),\n  ...fieldInput(),\n  display: 'flex',\n  alignItems: 'center',\n  height: 'control',\n  boxSizing: 'border-box',\n  paddingX: 'edge-to-text',\n  font: 'control',\n  borderRadius: 'control',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  transition: 'default',\n  borderColor: {\n    default: baseColor('gray-300'),\n    isInvalid: 'negative',\n    isFocusWithin: {\n      default: 'gray-900',\n      isInvalid: 'negative-1000',\n      forcedColors: 'Highlight'\n    },\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  backgroundColor: 'gray-25',\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n  return (\n    <Group\n      ref={ref}\n      {...props}\n      onPointerDown={(e) => {\n        // Forward focus to input element when clicking on a non-interactive child (e.g. icon or padding)\n        if (e.pointerType === 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n          e.preventDefault();\n          e.currentTarget.querySelector('input')?.focus();\n        }\n      }}\n      onPointerUp={e => {\n        if (e.pointerType !== 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n          e.preventDefault();\n          e.currentTarget.querySelector('input')?.focus();\n        }\n      }}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + ' ' + centerBaselineBefore + mergeStyles(\n        fieldGroupStyles({...renderProps, size: props.size || 'M'}),\n        props.styles\n      )} />\n  );\n});\n\nexport interface InputProps extends Omit<RACInputProps, 'className' | 'style'>, StyleProps {}\n\nexport const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {\n  let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n  return (\n    <RACInput\n      {...otherProps}\n      ref={ref}\n      style={UNSAFE_style}\n      className={UNSAFE_className + mergeStyles(style({\n        padding: 0,\n        backgroundColor: 'transparent',\n        color: '[inherit]',\n        fontFamily: '[inherit]',\n        fontSize: '[inherit]',\n        fontWeight: '[inherit]',\n        flexGrow: 1,\n        flexShrink: 1,\n        minWidth: 0,\n        width: 'full',\n        outlineStyle: 'none',\n        borderStyle: 'none',\n        truncate: true\n      }), styles)} />\n  );\n});\n\ninterface HelpTextProps extends FieldErrorProps {\n  size?: 'S' | 'M' | 'L' | 'XL',\n  isDisabled?: boolean,\n  isInvalid?: boolean, // TODO: export FieldErrorContext from RAC to get this.\n  description?: ReactNode,\n  showErrorIcon?: boolean\n}\n\nconst helpTextStyles = style({\n  gridArea: 'helptext',\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 'text-to-visual',\n  font: 'control',\n  color: {\n    default: 'neutral-subdued',\n    isInvalid: 'negative',\n    isDisabled: 'disabled'\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  contain: 'inline-size',\n  paddingTop: '--field-gap',\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport function HelpText(props: HelpTextProps & {descriptionRef?: DOMRef<HTMLDivElement>, errorRef?: DOMRef<HTMLDivElement>}): ReactNode {\n  let domDescriptionRef = useDOMRef(props.descriptionRef || null);\n  let domErrorRef = useDOMRef(props.errorRef || null);\n\n  if (!props.isInvalid && props.description) {\n    return (\n      <Text\n        slot=\"description\"\n        ref={domDescriptionRef}\n        className={helpTextStyles({size: props.size || 'M', isDisabled: props.isDisabled})}>\n        {props.description}\n      </Text>\n    );\n  }\n\n  return (\n    <FieldError\n      {...props}\n      ref={domErrorRef}\n      className={renderProps => helpTextStyles({...renderProps, size: props.size || 'M', isDisabled: props.isDisabled})}>\n      {composeRenderProps(props.children, (children, {validationErrors}) => (<>\n        {props.showErrorIcon &&\n          <CenterBaseline>\n            <AlertIcon />\n          </CenterBaseline>\n        }\n        <span>{children || validationErrors.join(' ')}</span>\n      </>))}\n    </FieldError>\n  );\n}\n\nexport function FieldErrorIcon(props: {isDisabled?: boolean}): ReactNode {\n  return (\n    <Provider\n      values={[\n        [IconContext, {\n          render: centerBaseline({\n            slot: 'icon',\n            styles: style({\n              order: 0,\n              flexShrink: 0,\n              '--iconPrimary': {\n                type: 'fill',\n                value: {\n                  default: 'negative',\n                  forcedColors: 'ButtonText'\n                }\n              }\n            })}),\n          styles: style({\n            size: fontRelative(20),\n            marginStart: 'text-to-visual',\n            marginEnd: fontRelative(-2),\n            flexShrink: 0\n          })\n        }]\n      ]}>\n      {!props.isDisabled && <AlertIcon />}\n    </Provider>\n  );\n}\n"],"names":[],"version":3,"file":"Field.cjs.map"}

package/dist/Field.css.map

@@ -1 +1 @@
-{"mappings":"AC2EiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBiC;;;;EAgC9B;;;;EAAA;;;;EAyBK;;;;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwEuB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0BzB;;;;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;;;;EA8DH;;;;EAAA;;;;EAWF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7PD;EAoLM;;;;EAAA;;;;;AA3J2B;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IA2J3B;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAyEL;;;;;;AApOgC;EAAA;IAAA;;;;IAyDzB;;;;IAAA;;;;IAAA;;;;IAgKL;;;;;;AAhKK;EAAA;IAAA","sources":["18dc2c1262434547","packages/@react-spectrum/s2/src/Field.tsx"],"sourcesContent":["@import \"5451fbb197e5f742\";\n@import \"4c96520903762dec\";\n@import \"dec1ed3fcae5e2a0\";\n@import \"7f2f9d36b130a0fc\";\n@import \"d78be91638043334\";\n@import \"1287e36439fa04a9\";\n@import \"ae2e3271ad92acb6\";\n@import \"657c7598b6083861\";\n@import \"227d65898b7fdc0f\";\n@import \"312761f7202cddfd\";\n@import \"bf76db767f0fbbad\";\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 AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Alignment, DOMRef, NecessityIndicator} from '@react-types/shared';\nimport AsteriskIcon from '../ui-icons/Asterisk';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline, centerBaseline, centerBaselineBefore} from './CenterBaseline';\nimport {composeRenderProps, FieldError, FieldErrorProps, Group, GroupProps, Label, LabelProps, Provider, Input as RACInput, InputProps as RACInputProps, Text} from 'react-aria-components';\nimport {ContextualHelpContext} from './ContextualHelp';\nimport {fieldInput, fieldLabel, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ForwardedRef, forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useId} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\ninterface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'children'>, StyleProps {\n  isDisabled?: boolean,\n  isRequired?: boolean,\n  size?: 'S' | 'M' | 'L' | 'XL',\n  necessityIndicator?: NecessityIndicator,\n  labelAlign?: Alignment,\n  labelPosition?: 'top' | 'side',\n  includeNecessityIndicatorInAccessibilityName?: boolean,\n  staticColor?: 'white' | 'black' | 'auto',\n  contextualHelp?: ReactNode,\n  isQuiet?: boolean,\n  children?: ReactNode\n}\n\nexport const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    isDisabled,\n    isRequired,\n    size = 'M',\n    necessityIndicator = 'icon',\n    includeNecessityIndicatorInAccessibilityName = false,\n    labelAlign,\n    labelPosition,\n    staticColor,\n    contextualHelp,\n    isQuiet,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...labelProps\n  } = props;\n\n  let domRef = useDOMRef(ref);\n  let contextualHelpId = useId();\n  let fallbackLabelPropsId = useId();\n  if (contextualHelp && !labelProps.id) {\n    labelProps.id = fallbackLabelPropsId;\n  }\n\n  if (!props.children) {\n    return null;\n  }\n\n  return (\n    <div\n      className={style({\n        gridArea: 'label',\n        display: 'inline',\n        textAlign: {\n          labelAlign: {\n            start: 'start',\n            end: 'end'\n          }\n        },\n        paddingBottom: {\n          labelPosition: {\n            top: '--field-gap'\n          }\n        },\n        contain: {\n          labelPosition: {\n            top: 'inline-size'\n          },\n          isQuiet: 'none'\n        }\n      })({labelAlign, labelPosition, isQuiet})}>\n      <Label\n        {...labelProps}\n        ref={domRef}\n        style={UNSAFE_style}\n        className={UNSAFE_className + mergeStyles(style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}), props.styles)}>\n        {props.children}\n        {(isRequired || necessityIndicator === 'label') && (\n          <span className={style({whiteSpace: 'nowrap'})}>\n            &nbsp;\n            {necessityIndicator === 'icon' &&\n              <AsteriskIcon\n                size={size === 'S' ? 'M' : size}\n                className={style({\n                  '--iconPrimary': {\n                    type: 'fill',\n                    value: 'currentColor'\n                  }\n                })}\n                aria-label={includeNecessityIndicatorInAccessibilityName ? stringFormatter.format('label.(required)') : undefined} />\n            }\n            {necessityIndicator === 'label' &&\n              /* The necessity label is hidden to screen readers if the field is required because\n              * aria-required is set on the field in that case. That will already be announced,\n              * so no need to duplicate it here. If optional, we do want it to be announced here.\n              */\n              <span aria-hidden={!includeNecessityIndicatorInAccessibilityName ? isRequired : undefined}>\n                {isRequired ? stringFormatter.format('label.(required)') : stringFormatter.format('label.(optional)')}\n              </span>\n            }\n          </span>\n        )}\n      </Label>\n      {contextualHelp && (\n        <span className={style({whiteSpace: 'nowrap'})}>\n          &nbsp;\n          <CenterBaseline\n            styles={style({\n              display: 'inline-flex',\n              height: 0\n            })}>\n            <ContextualHelpContext.Provider\n              value={{\n                id: contextualHelpId,\n                'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,\n                size: (size === 'L' || size === 'XL') ? 'S' : 'XS'\n              }}>\n              {contextualHelp}\n            </ContextualHelpContext.Provider>\n          </CenterBaseline>\n        </span>\n      )}\n    </div>\n  );\n});\n\ninterface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'children'>, UnsafeStyles {\n  size?: 'S' | 'M' | 'L' | 'XL',\n  children: ReactNode,\n  styles?: StyleString\n}\n\nconst fieldGroupStyles = style({\n  ...focusRing(),\n  ...fieldInput(),\n  display: 'flex',\n  alignItems: 'center',\n  height: 'control',\n  boxSizing: 'border-box',\n  paddingX: 'edge-to-text',\n  font: 'control',\n  borderRadius: 'control',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  transition: 'default',\n  borderColor: {\n    default: baseColor('gray-300'),\n    isInvalid: 'negative',\n    isFocusWithin: {\n      default: 'gray-900',\n      isInvalid: 'negative-1000',\n      forcedColors: 'Highlight'\n    },\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  backgroundColor: 'gray-25',\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n  return (\n    <Group\n      ref={ref}\n      {...props}\n      onPointerDown={(e) => {\n        // Forward focus to input element when clicking on a non-interactive child (e.g. icon or padding)\n        if (e.pointerType === 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n          e.preventDefault();\n          e.currentTarget.querySelector('input')?.focus();\n        }\n      }}\n      onPointerUp={e => {\n        if (e.pointerType !== 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n          e.preventDefault();\n          e.currentTarget.querySelector('input')?.focus();\n        }\n      }}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + ' ' + centerBaselineBefore + mergeStyles(\n        fieldGroupStyles({...renderProps, size: props.size || 'M'}),\n        props.styles\n      )} />\n  );\n});\n\nexport interface InputProps extends Omit<RACInputProps, 'className' | 'style'>, StyleProps {}\n\nexport const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {\n  let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n  return (\n    <RACInput\n      {...otherProps}\n      ref={ref}\n      style={UNSAFE_style}\n      className={UNSAFE_className + mergeStyles(style({\n        padding: 0,\n        backgroundColor: 'transparent',\n        color: '[inherit]',\n        fontFamily: '[inherit]',\n        fontSize: '[inherit]',\n        fontWeight: '[inherit]',\n        flexGrow: 1,\n        flexShrink: 1,\n        minWidth: 0,\n        width: 'full',\n        outlineStyle: 'none',\n        borderStyle: 'none',\n        truncate: true\n      }), styles)} />\n  );\n});\n\ninterface HelpTextProps extends FieldErrorProps {\n  size?: 'S' | 'M' | 'L' | 'XL',\n  isDisabled?: boolean,\n  isInvalid?: boolean, // TODO: export FieldErrorContext from RAC to get this.\n  description?: ReactNode,\n  showErrorIcon?: boolean\n}\n\nconst helpTextStyles = style({\n  gridArea: 'helptext',\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 'text-to-visual',\n  font: 'control',\n  color: {\n    default: 'neutral-subdued',\n    isInvalid: 'negative',\n    isDisabled: 'disabled'\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  contain: 'inline-size',\n  paddingTop: '--field-gap',\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport function HelpText(props: HelpTextProps & {descriptionRef?: DOMRef<HTMLDivElement>, errorRef?: DOMRef<HTMLDivElement>}) {\n  let domDescriptionRef = useDOMRef(props.descriptionRef || null);\n  let domErrorRef = useDOMRef(props.errorRef || null);\n\n  if (!props.isInvalid && props.description) {\n    return (\n      <Text\n        slot=\"description\"\n        ref={domDescriptionRef}\n        className={helpTextStyles({size: props.size || 'M', isDisabled: props.isDisabled})}>\n        {props.description}\n      </Text>\n    );\n  }\n\n  return (\n    <FieldError\n      {...props}\n      ref={domErrorRef}\n      className={renderProps => helpTextStyles({...renderProps, size: props.size || 'M', isDisabled: props.isDisabled})}>\n      {composeRenderProps(props.children, (children, {validationErrors}) => (<>\n        {props.showErrorIcon &&\n          <CenterBaseline>\n            <AlertIcon />\n          </CenterBaseline>\n        }\n        <span>{children || validationErrors.join(' ')}</span>\n      </>))}\n    </FieldError>\n  );\n}\n\nexport function FieldErrorIcon(props: {isDisabled?: boolean}) {\n  return (\n    <Provider\n      values={[\n        [IconContext, {\n          render: centerBaseline({\n            slot: 'icon',\n            styles: style({\n              order: 0,\n              flexShrink: 0,\n              '--iconPrimary': {\n                type: 'fill',\n                value: {\n                  default: 'negative',\n                  forcedColors: 'ButtonText'\n                }\n              }\n            })}),\n          styles: style({\n            size: fontRelative(20),\n            marginStart: 'text-to-visual',\n            marginEnd: fontRelative(-2),\n            flexShrink: 0\n          })\n        }]\n      ]}>\n      {!props.isDisabled && <AlertIcon />}\n    </Provider>\n  );\n}\n"],"names":[],"version":3,"file":"Field.css.map"}
+{"mappings":"AC2EiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBiC;;;;EAgC9B;;;;EAAA;;;;EAyBK;;;;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwEuB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0BzB;;;;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;;;;EA8DH;;;;EAAA;;;;EAWF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7PD;EAoLM;;;;EAAA;;;;;AA3J2B;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IA2J3B;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAyEL;;;;;;AApOgC;EAAA;IAAA;;;;IAyDzB;;;;IAAA;;;;IAAA;;;;IAgKL;;;;;;AAhKK;EAAA;IAAA","sources":["18dc2c1262434547","packages/@react-spectrum/s2/src/Field.tsx"],"sourcesContent":["@import \"5451fbb197e5f742\";\n@import \"4c96520903762dec\";\n@import \"dec1ed3fcae5e2a0\";\n@import \"7f2f9d36b130a0fc\";\n@import \"d78be91638043334\";\n@import \"1287e36439fa04a9\";\n@import \"ae2e3271ad92acb6\";\n@import \"657c7598b6083861\";\n@import \"227d65898b7fdc0f\";\n@import \"312761f7202cddfd\";\n@import \"bf76db767f0fbbad\";\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 AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Alignment, DOMRef, NecessityIndicator} from '@react-types/shared';\nimport AsteriskIcon from '../ui-icons/Asterisk';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline, centerBaseline, centerBaselineBefore} from './CenterBaseline';\nimport {composeRenderProps, FieldError, FieldErrorProps, Group, GroupProps, Label, LabelProps, Provider, Input as RACInput, InputProps as RACInputProps, Text} from 'react-aria-components';\nimport {ContextualHelpContext} from './ContextualHelp';\nimport {fieldInput, fieldLabel, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ForwardedRef, forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useId} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\ninterface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'children'>, StyleProps {\n  isDisabled?: boolean,\n  isRequired?: boolean,\n  size?: 'S' | 'M' | 'L' | 'XL',\n  necessityIndicator?: NecessityIndicator,\n  labelAlign?: Alignment,\n  labelPosition?: 'top' | 'side',\n  includeNecessityIndicatorInAccessibilityName?: boolean,\n  staticColor?: 'white' | 'black' | 'auto',\n  contextualHelp?: ReactNode,\n  isQuiet?: boolean,\n  children?: ReactNode\n}\n\nexport const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    isDisabled,\n    isRequired,\n    size = 'M',\n    necessityIndicator = 'icon',\n    includeNecessityIndicatorInAccessibilityName = false,\n    labelAlign,\n    labelPosition,\n    staticColor,\n    contextualHelp,\n    isQuiet,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...labelProps\n  } = props;\n\n  let domRef = useDOMRef(ref);\n  let contextualHelpId = useId();\n  let fallbackLabelPropsId = useId();\n  if (contextualHelp && !labelProps.id) {\n    labelProps.id = fallbackLabelPropsId;\n  }\n\n  if (!props.children) {\n    return null;\n  }\n\n  return (\n    <div\n      className={style({\n        gridArea: 'label',\n        display: 'inline',\n        textAlign: {\n          labelAlign: {\n            start: 'start',\n            end: 'end'\n          }\n        },\n        paddingBottom: {\n          labelPosition: {\n            top: '--field-gap'\n          }\n        },\n        contain: {\n          labelPosition: {\n            top: 'inline-size'\n          },\n          isQuiet: 'none'\n        }\n      })({labelAlign, labelPosition, isQuiet})}>\n      <Label\n        {...labelProps}\n        ref={domRef}\n        style={UNSAFE_style}\n        className={UNSAFE_className + mergeStyles(style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}), props.styles)}>\n        {props.children}\n        {(isRequired || necessityIndicator === 'label') && (\n          <span className={style({whiteSpace: 'nowrap'})}>\n            &nbsp;\n            {necessityIndicator === 'icon' &&\n              <AsteriskIcon\n                size={size === 'S' ? 'M' : size}\n                className={style({\n                  '--iconPrimary': {\n                    type: 'fill',\n                    value: 'currentColor'\n                  }\n                })}\n                aria-label={includeNecessityIndicatorInAccessibilityName ? stringFormatter.format('label.(required)') : undefined} />\n            }\n            {necessityIndicator === 'label' &&\n              /* The necessity label is hidden to screen readers if the field is required because\n              * aria-required is set on the field in that case. That will already be announced,\n              * so no need to duplicate it here. If optional, we do want it to be announced here.\n              */\n              <span aria-hidden={!includeNecessityIndicatorInAccessibilityName ? isRequired : undefined}>\n                {isRequired ? stringFormatter.format('label.(required)') : stringFormatter.format('label.(optional)')}\n              </span>\n            }\n          </span>\n        )}\n      </Label>\n      {contextualHelp && (\n        <span className={style({whiteSpace: 'nowrap'})}>\n          &nbsp;\n          <CenterBaseline\n            styles={style({\n              display: 'inline-flex',\n              height: 0\n            })}>\n            <ContextualHelpContext.Provider\n              value={{\n                id: contextualHelpId,\n                'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,\n                size: (size === 'L' || size === 'XL') ? 'S' : 'XS'\n              }}>\n              {contextualHelp}\n            </ContextualHelpContext.Provider>\n          </CenterBaseline>\n        </span>\n      )}\n    </div>\n  );\n});\n\ninterface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'children'>, UnsafeStyles {\n  size?: 'S' | 'M' | 'L' | 'XL',\n  children: ReactNode,\n  styles?: StyleString\n}\n\nconst fieldGroupStyles = style({\n  ...focusRing(),\n  ...fieldInput(),\n  display: 'flex',\n  alignItems: 'center',\n  height: 'control',\n  boxSizing: 'border-box',\n  paddingX: 'edge-to-text',\n  font: 'control',\n  borderRadius: 'control',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  transition: 'default',\n  borderColor: {\n    default: baseColor('gray-300'),\n    isInvalid: 'negative',\n    isFocusWithin: {\n      default: 'gray-900',\n      isInvalid: 'negative-1000',\n      forcedColors: 'Highlight'\n    },\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  backgroundColor: 'gray-25',\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n  return (\n    <Group\n      ref={ref}\n      {...props}\n      onPointerDown={(e) => {\n        // Forward focus to input element when clicking on a non-interactive child (e.g. icon or padding)\n        if (e.pointerType === 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n          e.preventDefault();\n          e.currentTarget.querySelector('input')?.focus();\n        }\n      }}\n      onPointerUp={e => {\n        if (e.pointerType !== 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n          e.preventDefault();\n          e.currentTarget.querySelector('input')?.focus();\n        }\n      }}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + ' ' + centerBaselineBefore + mergeStyles(\n        fieldGroupStyles({...renderProps, size: props.size || 'M'}),\n        props.styles\n      )} />\n  );\n});\n\nexport interface InputProps extends Omit<RACInputProps, 'className' | 'style'>, StyleProps {}\n\nexport const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {\n  let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n  return (\n    <RACInput\n      {...otherProps}\n      ref={ref}\n      style={UNSAFE_style}\n      className={UNSAFE_className + mergeStyles(style({\n        padding: 0,\n        backgroundColor: 'transparent',\n        color: '[inherit]',\n        fontFamily: '[inherit]',\n        fontSize: '[inherit]',\n        fontWeight: '[inherit]',\n        flexGrow: 1,\n        flexShrink: 1,\n        minWidth: 0,\n        width: 'full',\n        outlineStyle: 'none',\n        borderStyle: 'none',\n        truncate: true\n      }), styles)} />\n  );\n});\n\ninterface HelpTextProps extends FieldErrorProps {\n  size?: 'S' | 'M' | 'L' | 'XL',\n  isDisabled?: boolean,\n  isInvalid?: boolean, // TODO: export FieldErrorContext from RAC to get this.\n  description?: ReactNode,\n  showErrorIcon?: boolean\n}\n\nconst helpTextStyles = style({\n  gridArea: 'helptext',\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 'text-to-visual',\n  font: 'control',\n  color: {\n    default: 'neutral-subdued',\n    isInvalid: 'negative',\n    isDisabled: 'disabled'\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  contain: 'inline-size',\n  paddingTop: '--field-gap',\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport function HelpText(props: HelpTextProps & {descriptionRef?: DOMRef<HTMLDivElement>, errorRef?: DOMRef<HTMLDivElement>}): ReactNode {\n  let domDescriptionRef = useDOMRef(props.descriptionRef || null);\n  let domErrorRef = useDOMRef(props.errorRef || null);\n\n  if (!props.isInvalid && props.description) {\n    return (\n      <Text\n        slot=\"description\"\n        ref={domDescriptionRef}\n        className={helpTextStyles({size: props.size || 'M', isDisabled: props.isDisabled})}>\n        {props.description}\n      </Text>\n    );\n  }\n\n  return (\n    <FieldError\n      {...props}\n      ref={domErrorRef}\n      className={renderProps => helpTextStyles({...renderProps, size: props.size || 'M', isDisabled: props.isDisabled})}>\n      {composeRenderProps(props.children, (children, {validationErrors}) => (<>\n        {props.showErrorIcon &&\n          <CenterBaseline>\n            <AlertIcon />\n          </CenterBaseline>\n        }\n        <span>{children || validationErrors.join(' ')}</span>\n      </>))}\n    </FieldError>\n  );\n}\n\nexport function FieldErrorIcon(props: {isDisabled?: boolean}): ReactNode {\n  return (\n    <Provider\n      values={[\n        [IconContext, {\n          render: centerBaseline({\n            slot: 'icon',\n            styles: style({\n              order: 0,\n              flexShrink: 0,\n              '--iconPrimary': {\n                type: 'fill',\n                value: {\n                  default: 'negative',\n                  forcedColors: 'ButtonText'\n                }\n              }\n            })}),\n          styles: style({\n            size: fontRelative(20),\n            marginStart: 'text-to-visual',\n            marginEnd: fontRelative(-2),\n            flexShrink: 0\n          })\n        }]\n      ]}>\n      {!props.isDisabled && <AlertIcon />}\n    </Provider>\n  );\n}\n"],"names":[],"version":3,"file":"Field.css.map"}

package/dist/Field.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Field.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 AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Alignment, DOMRef, NecessityIndicator} from '@react-types/shared';\nimport AsteriskIcon from '../ui-icons/Asterisk';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline, centerBaseline, centerBaselineBefore} from './CenterBaseline';\nimport {composeRenderProps, FieldError, FieldErrorProps, Group, GroupProps, Label, LabelProps, Provider, Input as RACInput, InputProps as RACInputProps, Text} from 'react-aria-components';\nimport {ContextualHelpContext} from './ContextualHelp';\nimport {fieldInput, fieldLabel, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ForwardedRef, forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useId} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\ninterface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'children'>, StyleProps {\n  isDisabled?: boolean,\n  isRequired?: boolean,\n  size?: 'S' | 'M' | 'L' | 'XL',\n  necessityIndicator?: NecessityIndicator,\n  labelAlign?: Alignment,\n  labelPosition?: 'top' | 'side',\n  includeNecessityIndicatorInAccessibilityName?: boolean,\n  staticColor?: 'white' | 'black' | 'auto',\n  contextualHelp?: ReactNode,\n  isQuiet?: boolean,\n  children?: ReactNode\n}\n\nexport const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    isDisabled,\n    isRequired,\n    size = 'M',\n    necessityIndicator = 'icon',\n    includeNecessityIndicatorInAccessibilityName = false,\n    labelAlign,\n    labelPosition,\n    staticColor,\n    contextualHelp,\n    isQuiet,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...labelProps\n  } = props;\n\n  let domRef = useDOMRef(ref);\n  let contextualHelpId = useId();\n  let fallbackLabelPropsId = useId();\n  if (contextualHelp && !labelProps.id) {\n    labelProps.id = fallbackLabelPropsId;\n  }\n\n  if (!props.children) {\n    return null;\n  }\n\n  return (\n    <div\n      className={style({\n        gridArea: 'label',\n        display: 'inline',\n        textAlign: {\n          labelAlign: {\n            start: 'start',\n            end: 'end'\n          }\n        },\n        paddingBottom: {\n          labelPosition: {\n            top: '--field-gap'\n          }\n        },\n        contain: {\n          labelPosition: {\n            top: 'inline-size'\n          },\n          isQuiet: 'none'\n        }\n      })({labelAlign, labelPosition, isQuiet})}>\n      <Label\n        {...labelProps}\n        ref={domRef}\n        style={UNSAFE_style}\n        className={UNSAFE_className + mergeStyles(style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}), props.styles)}>\n        {props.children}\n        {(isRequired || necessityIndicator === 'label') && (\n          <span className={style({whiteSpace: 'nowrap'})}>\n            &nbsp;\n            {necessityIndicator === 'icon' &&\n              <AsteriskIcon\n                size={size === 'S' ? 'M' : size}\n                className={style({\n                  '--iconPrimary': {\n                    type: 'fill',\n                    value: 'currentColor'\n                  }\n                })}\n                aria-label={includeNecessityIndicatorInAccessibilityName ? stringFormatter.format('label.(required)') : undefined} />\n            }\n            {necessityIndicator === 'label' &&\n              /* The necessity label is hidden to screen readers if the field is required because\n              * aria-required is set on the field in that case. That will already be announced,\n              * so no need to duplicate it here. If optional, we do want it to be announced here.\n              */\n              <span aria-hidden={!includeNecessityIndicatorInAccessibilityName ? isRequired : undefined}>\n                {isRequired ? stringFormatter.format('label.(required)') : stringFormatter.format('label.(optional)')}\n              </span>\n            }\n          </span>\n        )}\n      </Label>\n      {contextualHelp && (\n        <span className={style({whiteSpace: 'nowrap'})}>\n          &nbsp;\n          <CenterBaseline\n            styles={style({\n              display: 'inline-flex',\n              height: 0\n            })}>\n            <ContextualHelpContext.Provider\n              value={{\n                id: contextualHelpId,\n                'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,\n                size: (size === 'L' || size === 'XL') ? 'S' : 'XS'\n              }}>\n              {contextualHelp}\n            </ContextualHelpContext.Provider>\n          </CenterBaseline>\n        </span>\n      )}\n    </div>\n  );\n});\n\ninterface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'children'>, UnsafeStyles {\n  size?: 'S' | 'M' | 'L' | 'XL',\n  children: ReactNode,\n  styles?: StyleString\n}\n\nconst fieldGroupStyles = style({\n  ...focusRing(),\n  ...fieldInput(),\n  display: 'flex',\n  alignItems: 'center',\n  height: 'control',\n  boxSizing: 'border-box',\n  paddingX: 'edge-to-text',\n  font: 'control',\n  borderRadius: 'control',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  transition: 'default',\n  borderColor: {\n    default: baseColor('gray-300'),\n    isInvalid: 'negative',\n    isFocusWithin: {\n      default: 'gray-900',\n      isInvalid: 'negative-1000',\n      forcedColors: 'Highlight'\n    },\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  backgroundColor: 'gray-25',\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n  return (\n    <Group\n      ref={ref}\n      {...props}\n      onPointerDown={(e) => {\n        // Forward focus to input element when clicking on a non-interactive child (e.g. icon or padding)\n        if (e.pointerType === 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n          e.preventDefault();\n          e.currentTarget.querySelector('input')?.focus();\n        }\n      }}\n      onPointerUp={e => {\n        if (e.pointerType !== 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n          e.preventDefault();\n          e.currentTarget.querySelector('input')?.focus();\n        }\n      }}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + ' ' + centerBaselineBefore + mergeStyles(\n        fieldGroupStyles({...renderProps, size: props.size || 'M'}),\n        props.styles\n      )} />\n  );\n});\n\nexport interface InputProps extends Omit<RACInputProps, 'className' | 'style'>, StyleProps {}\n\nexport const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {\n  let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n  return (\n    <RACInput\n      {...otherProps}\n      ref={ref}\n      style={UNSAFE_style}\n      className={UNSAFE_className + mergeStyles(style({\n        padding: 0,\n        backgroundColor: 'transparent',\n        color: '[inherit]',\n        fontFamily: '[inherit]',\n        fontSize: '[inherit]',\n        fontWeight: '[inherit]',\n        flexGrow: 1,\n        flexShrink: 1,\n        minWidth: 0,\n        width: 'full',\n        outlineStyle: 'none',\n        borderStyle: 'none',\n        truncate: true\n      }), styles)} />\n  );\n});\n\ninterface HelpTextProps extends FieldErrorProps {\n  size?: 'S' | 'M' | 'L' | 'XL',\n  isDisabled?: boolean,\n  isInvalid?: boolean, // TODO: export FieldErrorContext from RAC to get this.\n  description?: ReactNode,\n  showErrorIcon?: boolean\n}\n\nconst helpTextStyles = style({\n  gridArea: 'helptext',\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 'text-to-visual',\n  font: 'control',\n  color: {\n    default: 'neutral-subdued',\n    isInvalid: 'negative',\n    isDisabled: 'disabled'\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  contain: 'inline-size',\n  paddingTop: '--field-gap',\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport function HelpText(props: HelpTextProps & {descriptionRef?: DOMRef<HTMLDivElement>, errorRef?: DOMRef<HTMLDivElement>}) {\n  let domDescriptionRef = useDOMRef(props.descriptionRef || null);\n  let domErrorRef = useDOMRef(props.errorRef || null);\n\n  if (!props.isInvalid && props.description) {\n    return (\n      <Text\n        slot=\"description\"\n        ref={domDescriptionRef}\n        className={helpTextStyles({size: props.size || 'M', isDisabled: props.isDisabled})}>\n        {props.description}\n      </Text>\n    );\n  }\n\n  return (\n    <FieldError\n      {...props}\n      ref={domErrorRef}\n      className={renderProps => helpTextStyles({...renderProps, size: props.size || 'M', isDisabled: props.isDisabled})}>\n      {composeRenderProps(props.children, (children, {validationErrors}) => (<>\n        {props.showErrorIcon &&\n          <CenterBaseline>\n            <AlertIcon />\n          </CenterBaseline>\n        }\n        <span>{children || validationErrors.join(' ')}</span>\n      </>))}\n    </FieldError>\n  );\n}\n\nexport function FieldErrorIcon(props: {isDisabled?: boolean}) {\n  return (\n    <Provider\n      values={[\n        [IconContext, {\n          render: centerBaseline({\n            slot: 'icon',\n            styles: style({\n              order: 0,\n              flexShrink: 0,\n              '--iconPrimary': {\n                type: 'fill',\n                value: {\n                  default: 'negative',\n                  forcedColors: 'ButtonText'\n                }\n              }\n            })}),\n          styles: style({\n            size: fontRelative(20),\n            marginStart: 'text-to-visual',\n            marginEnd: fontRelative(-2),\n            flexShrink: 0\n          })\n        }]\n      ]}>\n      {!props.isDisabled && <AlertIcon />}\n    </Provider>\n  );\n}\n"],"names":[],"version":3,"file":"Field.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Field.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 AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Alignment, DOMRef, NecessityIndicator} from '@react-types/shared';\nimport AsteriskIcon from '../ui-icons/Asterisk';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline, centerBaseline, centerBaselineBefore} from './CenterBaseline';\nimport {composeRenderProps, FieldError, FieldErrorProps, Group, GroupProps, Label, LabelProps, Provider, Input as RACInput, InputProps as RACInputProps, Text} from 'react-aria-components';\nimport {ContextualHelpContext} from './ContextualHelp';\nimport {fieldInput, fieldLabel, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ForwardedRef, forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useId} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\ninterface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'children'>, StyleProps {\n  isDisabled?: boolean,\n  isRequired?: boolean,\n  size?: 'S' | 'M' | 'L' | 'XL',\n  necessityIndicator?: NecessityIndicator,\n  labelAlign?: Alignment,\n  labelPosition?: 'top' | 'side',\n  includeNecessityIndicatorInAccessibilityName?: boolean,\n  staticColor?: 'white' | 'black' | 'auto',\n  contextualHelp?: ReactNode,\n  isQuiet?: boolean,\n  children?: ReactNode\n}\n\nexport const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    isDisabled,\n    isRequired,\n    size = 'M',\n    necessityIndicator = 'icon',\n    includeNecessityIndicatorInAccessibilityName = false,\n    labelAlign,\n    labelPosition,\n    staticColor,\n    contextualHelp,\n    isQuiet,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...labelProps\n  } = props;\n\n  let domRef = useDOMRef(ref);\n  let contextualHelpId = useId();\n  let fallbackLabelPropsId = useId();\n  if (contextualHelp && !labelProps.id) {\n    labelProps.id = fallbackLabelPropsId;\n  }\n\n  if (!props.children) {\n    return null;\n  }\n\n  return (\n    <div\n      className={style({\n        gridArea: 'label',\n        display: 'inline',\n        textAlign: {\n          labelAlign: {\n            start: 'start',\n            end: 'end'\n          }\n        },\n        paddingBottom: {\n          labelPosition: {\n            top: '--field-gap'\n          }\n        },\n        contain: {\n          labelPosition: {\n            top: 'inline-size'\n          },\n          isQuiet: 'none'\n        }\n      })({labelAlign, labelPosition, isQuiet})}>\n      <Label\n        {...labelProps}\n        ref={domRef}\n        style={UNSAFE_style}\n        className={UNSAFE_className + mergeStyles(style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}), props.styles)}>\n        {props.children}\n        {(isRequired || necessityIndicator === 'label') && (\n          <span className={style({whiteSpace: 'nowrap'})}>\n            &nbsp;\n            {necessityIndicator === 'icon' &&\n              <AsteriskIcon\n                size={size === 'S' ? 'M' : size}\n                className={style({\n                  '--iconPrimary': {\n                    type: 'fill',\n                    value: 'currentColor'\n                  }\n                })}\n                aria-label={includeNecessityIndicatorInAccessibilityName ? stringFormatter.format('label.(required)') : undefined} />\n            }\n            {necessityIndicator === 'label' &&\n              /* The necessity label is hidden to screen readers if the field is required because\n              * aria-required is set on the field in that case. That will already be announced,\n              * so no need to duplicate it here. If optional, we do want it to be announced here.\n              */\n              <span aria-hidden={!includeNecessityIndicatorInAccessibilityName ? isRequired : undefined}>\n                {isRequired ? stringFormatter.format('label.(required)') : stringFormatter.format('label.(optional)')}\n              </span>\n            }\n          </span>\n        )}\n      </Label>\n      {contextualHelp && (\n        <span className={style({whiteSpace: 'nowrap'})}>\n          &nbsp;\n          <CenterBaseline\n            styles={style({\n              display: 'inline-flex',\n              height: 0\n            })}>\n            <ContextualHelpContext.Provider\n              value={{\n                id: contextualHelpId,\n                'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,\n                size: (size === 'L' || size === 'XL') ? 'S' : 'XS'\n              }}>\n              {contextualHelp}\n            </ContextualHelpContext.Provider>\n          </CenterBaseline>\n        </span>\n      )}\n    </div>\n  );\n});\n\ninterface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'children'>, UnsafeStyles {\n  size?: 'S' | 'M' | 'L' | 'XL',\n  children: ReactNode,\n  styles?: StyleString\n}\n\nconst fieldGroupStyles = style({\n  ...focusRing(),\n  ...fieldInput(),\n  display: 'flex',\n  alignItems: 'center',\n  height: 'control',\n  boxSizing: 'border-box',\n  paddingX: 'edge-to-text',\n  font: 'control',\n  borderRadius: 'control',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  transition: 'default',\n  borderColor: {\n    default: baseColor('gray-300'),\n    isInvalid: 'negative',\n    isFocusWithin: {\n      default: 'gray-900',\n      isInvalid: 'negative-1000',\n      forcedColors: 'Highlight'\n    },\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  backgroundColor: 'gray-25',\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n  return (\n    <Group\n      ref={ref}\n      {...props}\n      onPointerDown={(e) => {\n        // Forward focus to input element when clicking on a non-interactive child (e.g. icon or padding)\n        if (e.pointerType === 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n          e.preventDefault();\n          e.currentTarget.querySelector('input')?.focus();\n        }\n      }}\n      onPointerUp={e => {\n        if (e.pointerType !== 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n          e.preventDefault();\n          e.currentTarget.querySelector('input')?.focus();\n        }\n      }}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + ' ' + centerBaselineBefore + mergeStyles(\n        fieldGroupStyles({...renderProps, size: props.size || 'M'}),\n        props.styles\n      )} />\n  );\n});\n\nexport interface InputProps extends Omit<RACInputProps, 'className' | 'style'>, StyleProps {}\n\nexport const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {\n  let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n  return (\n    <RACInput\n      {...otherProps}\n      ref={ref}\n      style={UNSAFE_style}\n      className={UNSAFE_className + mergeStyles(style({\n        padding: 0,\n        backgroundColor: 'transparent',\n        color: '[inherit]',\n        fontFamily: '[inherit]',\n        fontSize: '[inherit]',\n        fontWeight: '[inherit]',\n        flexGrow: 1,\n        flexShrink: 1,\n        minWidth: 0,\n        width: 'full',\n        outlineStyle: 'none',\n        borderStyle: 'none',\n        truncate: true\n      }), styles)} />\n  );\n});\n\ninterface HelpTextProps extends FieldErrorProps {\n  size?: 'S' | 'M' | 'L' | 'XL',\n  isDisabled?: boolean,\n  isInvalid?: boolean, // TODO: export FieldErrorContext from RAC to get this.\n  description?: ReactNode,\n  showErrorIcon?: boolean\n}\n\nconst helpTextStyles = style({\n  gridArea: 'helptext',\n  display: 'flex',\n  alignItems: 'baseline',\n  gap: 'text-to-visual',\n  font: 'control',\n  color: {\n    default: 'neutral-subdued',\n    isInvalid: 'negative',\n    isDisabled: 'disabled'\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  contain: 'inline-size',\n  paddingTop: '--field-gap',\n  cursor: {\n    default: 'text',\n    isDisabled: 'default'\n  }\n});\n\nexport function HelpText(props: HelpTextProps & {descriptionRef?: DOMRef<HTMLDivElement>, errorRef?: DOMRef<HTMLDivElement>}): ReactNode {\n  let domDescriptionRef = useDOMRef(props.descriptionRef || null);\n  let domErrorRef = useDOMRef(props.errorRef || null);\n\n  if (!props.isInvalid && props.description) {\n    return (\n      <Text\n        slot=\"description\"\n        ref={domDescriptionRef}\n        className={helpTextStyles({size: props.size || 'M', isDisabled: props.isDisabled})}>\n        {props.description}\n      </Text>\n    );\n  }\n\n  return (\n    <FieldError\n      {...props}\n      ref={domErrorRef}\n      className={renderProps => helpTextStyles({...renderProps, size: props.size || 'M', isDisabled: props.isDisabled})}>\n      {composeRenderProps(props.children, (children, {validationErrors}) => (<>\n        {props.showErrorIcon &&\n          <CenterBaseline>\n            <AlertIcon />\n          </CenterBaseline>\n        }\n        <span>{children || validationErrors.join(' ')}</span>\n      </>))}\n    </FieldError>\n  );\n}\n\nexport function FieldErrorIcon(props: {isDisabled?: boolean}): ReactNode {\n  return (\n    <Provider\n      values={[\n        [IconContext, {\n          render: centerBaseline({\n            slot: 'icon',\n            styles: style({\n              order: 0,\n              flexShrink: 0,\n              '--iconPrimary': {\n                type: 'fill',\n                value: {\n                  default: 'negative',\n                  forcedColors: 'ButtonText'\n                }\n              }\n            })}),\n          styles: style({\n            size: fontRelative(20),\n            marginStart: 'text-to-visual',\n            marginEnd: fontRelative(-2),\n            flexShrink: 0\n          })\n        }]\n      ]}>\n      {!props.isDisabled && <AlertIcon />}\n    </Provider>\n  );\n}\n"],"names":[],"version":3,"file":"Field.mjs.map"}

package/dist/Image.cjs

@@ -130,7 +130,7 @@ const $053b76ed3d29e13b$export$3e431a229df88919 = /*#__PURE__*/ (0, $kwMay$react
         queueMicrotask(onLoad);
         animation(domRef.current);
     });
-    if (props.alt == null) console.warn('The `alt` prop was not provided to an image. Add `alt` text for screen readers, or set `alt=""` prop to indicate that the image is decorative or redundant with displayed text and should not be announced by screen readers.');
+    if (props.alt == null && process.env.NODE_ENV !== 'production') console.warn('The `alt` prop was not provided to an image. Add `alt` text for screen readers, or set `alt=""` prop to indicate that the image is decorative or redundant with displayed text and should not be announced by screen readers.');
     let errorState = !isSkeleton && state === 'error' && renderError?.();
     let isRevealed = state === 'revealed' && !isSkeleton;
     let isTransitioning = isRevealed && loadTime > 200;

package/dist/Image.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Image.tsx"],"sourcesContent":["import {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, ReactNode, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';\nimport {DefaultImageGroup, ImageGroup} from './ImageCoordinator';\nimport {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n  /** The URL of the image. */\n  src?: string,\n  // TODO\n  // srcSet?: string,\n  // sizes?: string,\n  /** Accessible alt text for the image. */\n  alt?: string,\n  /**\n   * Indicates if the fetching of the image must be done using a CORS request.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).\n   */\n  crossOrigin?: 'anonymous' | 'use-credentials',\n  /**\n   * Whether the browser should decode images synchronously or asynchronously.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).\n   */\n  decoding?: 'async' | 'auto' | 'sync',\n  /**\n   * Provides a hint of the relative priority to use when fetching the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority).\n   */\n  fetchPriority?: 'high' | 'low' | 'auto',\n  /**\n   * Whether the image should be loaded immediately or lazily when scrolled into view.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).\n   */\n  loading?: 'eager' | 'lazy',\n  /**\n   * A string indicating which referrer to use when fetching the resource.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy).\n   */\n  referrerPolicy?: HTMLAttributeReferrerPolicy,\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StyleString,\n  /** A function that is called to render a fallback when the image fails to load. */\n  renderError?: () => ReactNode,\n  /**\n   * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>` component.\n   * If not provided, the default image group is used.\n   */\n  group?: ImageGroup\n}\n\ninterface ImageContextValue extends ImageProps {\n  hidden?: boolean\n}\n\nexport const ImageContext = createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);\n\ntype ImageState = 'loading' | 'loaded' | 'revealed' | 'error';\ninterface State {\n  state: ImageState,\n  src: string,\n  startTime: number,\n  loadTime: number\n}\n\ntype Action = \n  | {type: 'update', src: string}\n  | {type: 'loaded'}\n  | {type: 'revealed'}\n  | {type: 'error'};\n\nfunction createState(src: string): State {\n  return {\n    state: 'loading',\n    src,\n    startTime: Date.now(),\n    loadTime: 0\n  };\n}\n\nfunction reducer(state: State, action: Action): State {\n  switch (action.type) {\n    case 'update': {\n      return {\n        state: 'loading',\n        src: action.src,\n        startTime: Date.now(),\n        loadTime: 0\n      };\n    }\n    case 'loaded':\n    case 'error': {\n      return {\n        ...state,\n        state: action.type\n      };\n    }\n    case 'revealed': {\n      return {\n        ...state,\n        state: 'revealed',\n        loadTime: Date.now() - state.startTime\n      };\n    }\n    default:\n      return state;\n  }\n}\n\nconst wrapperStyles = style({\n  backgroundColor: 'gray-100',\n  overflow: 'hidden'\n});\n\nconst imgStyles = style({\n  display: 'block',\n  width: 'full',\n  height: 'full',\n  objectFit: '[inherit]',\n  objectPosition: '[inherit]',\n  opacity: {\n    default: 0,\n    isRevealed: 1\n  },\n  transition: {\n    default: 'none',\n    isTransitioning: 'opacity'\n  },\n  transitionDuration: 500\n});\n\nexport const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {\n  [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);\n\n  let {\n    src = '',\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    renderError,\n    group = DefaultImageGroup,\n    // TODO\n    // srcSet,\n    // sizes,\n    alt,\n    crossOrigin,\n    decoding,\n    fetchPriority,\n    loading,\n    referrerPolicy,\n    slot\n  } = props;\n  let hidden = (props as ImageContextValue).hidden;\n  \n  let {revealAll, register, unregister, load} = useContext(group);\n  let [{state, src: lastSrc, loadTime}, dispatch] = useReducer(reducer, src, createState);\n\n  if (src !== lastSrc && !hidden) {\n    dispatch({type: 'update', src});\n  }\n\n  if (state === 'loaded' && revealAll && !hidden) {\n    dispatch({type: 'revealed'});\n  }\n\n  let imgRef = useRef<HTMLImageElement | null>(null);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    register(src);\n    return () => {\n      unregister(src);\n    };\n  }, [hidden, register, unregister, src]);\n\n  let onLoad = useCallback(() => {\n    load(src);\n    dispatch({type: 'loaded'});\n  }, [load, src]);\n\n  let onError = useCallback(() => {\n    dispatch({type: 'error'});\n    unregister(src);\n  }, [unregister, src]);\n\n  let isSkeleton = useIsSkeleton();\n  let isAnimating = isSkeleton || state === 'loading' || state === 'loaded';\n  let animation = useLoadingAnimation(isAnimating);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    // If the image is already loaded, update state immediately instead of waiting for onLoad.\n    if (state === 'loading' && imgRef.current?.complete) {\n      // Queue a microtask so we don't hit React's update limit.\n      // TODO: is this necessary?\n      queueMicrotask(onLoad);\n    }\n\n    animation(domRef.current);\n  });\n\n  if (props.alt == null) {\n    console.warn(\n      'The `alt` prop was not provided to an image. ' +\n      'Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image ' +\n      'is decorative or redundant with displayed text and should not be announced by screen readers.'\n    );\n  }\n\n  let errorState = !isSkeleton && state === 'error' && renderError?.();\n  let isRevealed = state === 'revealed' && !isSkeleton;\n  let isTransitioning = isRevealed && loadTime > 200;\n  return useMemo(() => hidden ? null : (\n    <div\n      ref={domRef}\n      slot={slot || undefined}\n      style={UNSAFE_style}\n      className={UNSAFE_className + mergeStyles(wrapperStyles, styles) + ' '  + (isAnimating ? loadingStyle : '')}>\n      {errorState}\n      {!errorState && (\n        <img\n          {...getFetchPriorityProp(fetchPriority)}\n          src={src}\n          alt={alt}\n          crossOrigin={crossOrigin}\n          decoding={decoding}\n          loading={loading}\n          referrerPolicy={referrerPolicy}\n          ref={imgRef}\n          onLoad={onLoad}\n          onError={onError}\n          className={imgStyles({isRevealed, isTransitioning})} />\n        )}\n    </div>\n  ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);\n});\n\nfunction getFetchPriorityProp(fetchPriority?: 'high' | 'low' | 'auto'): Record<string, string | undefined> {\n  const pieces = version.split('.');\n  const major = parseInt(pieces[0], 10);\n  if (major >= 19) {\n    return {fetchPriority};\n  }\n  return {fetchpriority: fetchPriority};\n}\n"],"names":[],"version":3,"file":"Image.cjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Image.tsx"],"sourcesContent":["import {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, ReactNode, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';\nimport {DefaultImageGroup, ImageGroup} from './ImageCoordinator';\nimport {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n  /** The URL of the image. */\n  src?: string,\n  // TODO\n  // srcSet?: string,\n  // sizes?: string,\n  /** Accessible alt text for the image. */\n  alt?: string,\n  /**\n   * Indicates if the fetching of the image must be done using a CORS request.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).\n   */\n  crossOrigin?: 'anonymous' | 'use-credentials',\n  /**\n   * Whether the browser should decode images synchronously or asynchronously.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).\n   */\n  decoding?: 'async' | 'auto' | 'sync',\n  /**\n   * Provides a hint of the relative priority to use when fetching the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority).\n   */\n  fetchPriority?: 'high' | 'low' | 'auto',\n  /**\n   * Whether the image should be loaded immediately or lazily when scrolled into view.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).\n   */\n  loading?: 'eager' | 'lazy',\n  /**\n   * A string indicating which referrer to use when fetching the resource.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy).\n   */\n  referrerPolicy?: HTMLAttributeReferrerPolicy,\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StyleString,\n  /** A function that is called to render a fallback when the image fails to load. */\n  renderError?: () => ReactNode,\n  /**\n   * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>` component.\n   * If not provided, the default image group is used.\n   */\n  group?: ImageGroup\n}\n\ninterface ImageContextValue extends ImageProps {\n  hidden?: boolean\n}\n\nexport const ImageContext = createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);\n\ntype ImageState = 'loading' | 'loaded' | 'revealed' | 'error';\ninterface State {\n  state: ImageState,\n  src: string,\n  startTime: number,\n  loadTime: number\n}\n\ntype Action = \n  | {type: 'update', src: string}\n  | {type: 'loaded'}\n  | {type: 'revealed'}\n  | {type: 'error'};\n\nfunction createState(src: string): State {\n  return {\n    state: 'loading',\n    src,\n    startTime: Date.now(),\n    loadTime: 0\n  };\n}\n\nfunction reducer(state: State, action: Action): State {\n  switch (action.type) {\n    case 'update': {\n      return {\n        state: 'loading',\n        src: action.src,\n        startTime: Date.now(),\n        loadTime: 0\n      };\n    }\n    case 'loaded':\n    case 'error': {\n      return {\n        ...state,\n        state: action.type\n      };\n    }\n    case 'revealed': {\n      return {\n        ...state,\n        state: 'revealed',\n        loadTime: Date.now() - state.startTime\n      };\n    }\n    default:\n      return state;\n  }\n}\n\nconst wrapperStyles = style({\n  backgroundColor: 'gray-100',\n  overflow: 'hidden'\n});\n\nconst imgStyles = style({\n  display: 'block',\n  width: 'full',\n  height: 'full',\n  objectFit: '[inherit]',\n  objectPosition: '[inherit]',\n  opacity: {\n    default: 0,\n    isRevealed: 1\n  },\n  transition: {\n    default: 'none',\n    isTransitioning: 'opacity'\n  },\n  transitionDuration: 500\n});\n\nexport const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {\n  [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);\n\n  let {\n    src = '',\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    renderError,\n    group = DefaultImageGroup,\n    // TODO\n    // srcSet,\n    // sizes,\n    alt,\n    crossOrigin,\n    decoding,\n    fetchPriority,\n    loading,\n    referrerPolicy,\n    slot\n  } = props;\n  let hidden = (props as ImageContextValue).hidden;\n  \n  let {revealAll, register, unregister, load} = useContext(group);\n  let [{state, src: lastSrc, loadTime}, dispatch] = useReducer(reducer, src, createState);\n\n  if (src !== lastSrc && !hidden) {\n    dispatch({type: 'update', src});\n  }\n\n  if (state === 'loaded' && revealAll && !hidden) {\n    dispatch({type: 'revealed'});\n  }\n\n  let imgRef = useRef<HTMLImageElement | null>(null);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    register(src);\n    return () => {\n      unregister(src);\n    };\n  }, [hidden, register, unregister, src]);\n\n  let onLoad = useCallback(() => {\n    load(src);\n    dispatch({type: 'loaded'});\n  }, [load, src]);\n\n  let onError = useCallback(() => {\n    dispatch({type: 'error'});\n    unregister(src);\n  }, [unregister, src]);\n\n  let isSkeleton = useIsSkeleton();\n  let isAnimating = isSkeleton || state === 'loading' || state === 'loaded';\n  let animation = useLoadingAnimation(isAnimating);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    // If the image is already loaded, update state immediately instead of waiting for onLoad.\n    if (state === 'loading' && imgRef.current?.complete) {\n      // Queue a microtask so we don't hit React's update limit.\n      // TODO: is this necessary?\n      queueMicrotask(onLoad);\n    }\n\n    animation(domRef.current);\n  });\n\n  if (props.alt == null && process.env.NODE_ENV !== 'production') {\n    console.warn(\n      'The `alt` prop was not provided to an image. ' +\n      'Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image ' +\n      'is decorative or redundant with displayed text and should not be announced by screen readers.'\n    );\n  }\n\n  let errorState = !isSkeleton && state === 'error' && renderError?.();\n  let isRevealed = state === 'revealed' && !isSkeleton;\n  let isTransitioning = isRevealed && loadTime > 200;\n  return useMemo(() => hidden ? null : (\n    <div\n      ref={domRef}\n      slot={slot || undefined}\n      style={UNSAFE_style}\n      className={UNSAFE_className + mergeStyles(wrapperStyles, styles) + ' '  + (isAnimating ? loadingStyle : '')}>\n      {errorState}\n      {!errorState && (\n        <img\n          {...getFetchPriorityProp(fetchPriority)}\n          src={src}\n          alt={alt}\n          crossOrigin={crossOrigin}\n          decoding={decoding}\n          loading={loading}\n          referrerPolicy={referrerPolicy}\n          ref={imgRef}\n          onLoad={onLoad}\n          onError={onError}\n          className={imgStyles({isRevealed, isTransitioning})} />\n        )}\n    </div>\n  ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);\n});\n\nfunction getFetchPriorityProp(fetchPriority?: 'high' | 'low' | 'auto'): Record<string, string | undefined> {\n  const pieces = version.split('.');\n  const major = parseInt(pieces[0], 10);\n  if (major >= 19) {\n    return {fetchPriority};\n  }\n  return {fetchpriority: fetchPriority};\n}\n"],"names":[],"version":3,"file":"Image.cjs.map"}

package/dist/Image.css.map

@@ -1 +1 @@
-{"mappings":"ACiHsB;EAAA;;;;EAAA;;;;EAAA;;;;EAKJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AALI","sources":["a1371b57e9afeb00","packages/@react-spectrum/s2/src/Image.tsx"],"sourcesContent":["@import \"be7e52eb05f9e81c\";\n@import \"b32b10d1bd9c4a50\";\n","import {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, ReactNode, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';\nimport {DefaultImageGroup, ImageGroup} from './ImageCoordinator';\nimport {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n  /** The URL of the image. */\n  src?: string,\n  // TODO\n  // srcSet?: string,\n  // sizes?: string,\n  /** Accessible alt text for the image. */\n  alt?: string,\n  /**\n   * Indicates if the fetching of the image must be done using a CORS request.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).\n   */\n  crossOrigin?: 'anonymous' | 'use-credentials',\n  /**\n   * Whether the browser should decode images synchronously or asynchronously.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).\n   */\n  decoding?: 'async' | 'auto' | 'sync',\n  /**\n   * Provides a hint of the relative priority to use when fetching the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority).\n   */\n  fetchPriority?: 'high' | 'low' | 'auto',\n  /**\n   * Whether the image should be loaded immediately or lazily when scrolled into view.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).\n   */\n  loading?: 'eager' | 'lazy',\n  /**\n   * A string indicating which referrer to use when fetching the resource.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy).\n   */\n  referrerPolicy?: HTMLAttributeReferrerPolicy,\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StyleString,\n  /** A function that is called to render a fallback when the image fails to load. */\n  renderError?: () => ReactNode,\n  /**\n   * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>` component.\n   * If not provided, the default image group is used.\n   */\n  group?: ImageGroup\n}\n\ninterface ImageContextValue extends ImageProps {\n  hidden?: boolean\n}\n\nexport const ImageContext = createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);\n\ntype ImageState = 'loading' | 'loaded' | 'revealed' | 'error';\ninterface State {\n  state: ImageState,\n  src: string,\n  startTime: number,\n  loadTime: number\n}\n\ntype Action = \n  | {type: 'update', src: string}\n  | {type: 'loaded'}\n  | {type: 'revealed'}\n  | {type: 'error'};\n\nfunction createState(src: string): State {\n  return {\n    state: 'loading',\n    src,\n    startTime: Date.now(),\n    loadTime: 0\n  };\n}\n\nfunction reducer(state: State, action: Action): State {\n  switch (action.type) {\n    case 'update': {\n      return {\n        state: 'loading',\n        src: action.src,\n        startTime: Date.now(),\n        loadTime: 0\n      };\n    }\n    case 'loaded':\n    case 'error': {\n      return {\n        ...state,\n        state: action.type\n      };\n    }\n    case 'revealed': {\n      return {\n        ...state,\n        state: 'revealed',\n        loadTime: Date.now() - state.startTime\n      };\n    }\n    default:\n      return state;\n  }\n}\n\nconst wrapperStyles = style({\n  backgroundColor: 'gray-100',\n  overflow: 'hidden'\n});\n\nconst imgStyles = style({\n  display: 'block',\n  width: 'full',\n  height: 'full',\n  objectFit: '[inherit]',\n  objectPosition: '[inherit]',\n  opacity: {\n    default: 0,\n    isRevealed: 1\n  },\n  transition: {\n    default: 'none',\n    isTransitioning: 'opacity'\n  },\n  transitionDuration: 500\n});\n\nexport const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {\n  [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);\n\n  let {\n    src = '',\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    renderError,\n    group = DefaultImageGroup,\n    // TODO\n    // srcSet,\n    // sizes,\n    alt,\n    crossOrigin,\n    decoding,\n    fetchPriority,\n    loading,\n    referrerPolicy,\n    slot\n  } = props;\n  let hidden = (props as ImageContextValue).hidden;\n  \n  let {revealAll, register, unregister, load} = useContext(group);\n  let [{state, src: lastSrc, loadTime}, dispatch] = useReducer(reducer, src, createState);\n\n  if (src !== lastSrc && !hidden) {\n    dispatch({type: 'update', src});\n  }\n\n  if (state === 'loaded' && revealAll && !hidden) {\n    dispatch({type: 'revealed'});\n  }\n\n  let imgRef = useRef<HTMLImageElement | null>(null);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    register(src);\n    return () => {\n      unregister(src);\n    };\n  }, [hidden, register, unregister, src]);\n\n  let onLoad = useCallback(() => {\n    load(src);\n    dispatch({type: 'loaded'});\n  }, [load, src]);\n\n  let onError = useCallback(() => {\n    dispatch({type: 'error'});\n    unregister(src);\n  }, [unregister, src]);\n\n  let isSkeleton = useIsSkeleton();\n  let isAnimating = isSkeleton || state === 'loading' || state === 'loaded';\n  let animation = useLoadingAnimation(isAnimating);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    // If the image is already loaded, update state immediately instead of waiting for onLoad.\n    if (state === 'loading' && imgRef.current?.complete) {\n      // Queue a microtask so we don't hit React's update limit.\n      // TODO: is this necessary?\n      queueMicrotask(onLoad);\n    }\n\n    animation(domRef.current);\n  });\n\n  if (props.alt == null) {\n    console.warn(\n      'The `alt` prop was not provided to an image. ' +\n      'Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image ' +\n      'is decorative or redundant with displayed text and should not be announced by screen readers.'\n    );\n  }\n\n  let errorState = !isSkeleton && state === 'error' && renderError?.();\n  let isRevealed = state === 'revealed' && !isSkeleton;\n  let isTransitioning = isRevealed && loadTime > 200;\n  return useMemo(() => hidden ? null : (\n    <div\n      ref={domRef}\n      slot={slot || undefined}\n      style={UNSAFE_style}\n      className={UNSAFE_className + mergeStyles(wrapperStyles, styles) + ' '  + (isAnimating ? loadingStyle : '')}>\n      {errorState}\n      {!errorState && (\n        <img\n          {...getFetchPriorityProp(fetchPriority)}\n          src={src}\n          alt={alt}\n          crossOrigin={crossOrigin}\n          decoding={decoding}\n          loading={loading}\n          referrerPolicy={referrerPolicy}\n          ref={imgRef}\n          onLoad={onLoad}\n          onError={onError}\n          className={imgStyles({isRevealed, isTransitioning})} />\n        )}\n    </div>\n  ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);\n});\n\nfunction getFetchPriorityProp(fetchPriority?: 'high' | 'low' | 'auto'): Record<string, string | undefined> {\n  const pieces = version.split('.');\n  const major = parseInt(pieces[0], 10);\n  if (major >= 19) {\n    return {fetchPriority};\n  }\n  return {fetchpriority: fetchPriority};\n}\n"],"names":[],"version":3,"file":"Image.css.map"}
+{"mappings":"ACiHsB;EAAA;;;;EAAA;;;;EAAA;;;;EAKJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AALI","sources":["a1371b57e9afeb00","packages/@react-spectrum/s2/src/Image.tsx"],"sourcesContent":["@import \"be7e52eb05f9e81c\";\n@import \"b32b10d1bd9c4a50\";\n","import {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, ReactNode, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';\nimport {DefaultImageGroup, ImageGroup} from './ImageCoordinator';\nimport {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n  /** The URL of the image. */\n  src?: string,\n  // TODO\n  // srcSet?: string,\n  // sizes?: string,\n  /** Accessible alt text for the image. */\n  alt?: string,\n  /**\n   * Indicates if the fetching of the image must be done using a CORS request.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).\n   */\n  crossOrigin?: 'anonymous' | 'use-credentials',\n  /**\n   * Whether the browser should decode images synchronously or asynchronously.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).\n   */\n  decoding?: 'async' | 'auto' | 'sync',\n  /**\n   * Provides a hint of the relative priority to use when fetching the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority).\n   */\n  fetchPriority?: 'high' | 'low' | 'auto',\n  /**\n   * Whether the image should be loaded immediately or lazily when scrolled into view.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).\n   */\n  loading?: 'eager' | 'lazy',\n  /**\n   * A string indicating which referrer to use when fetching the resource.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy).\n   */\n  referrerPolicy?: HTMLAttributeReferrerPolicy,\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StyleString,\n  /** A function that is called to render a fallback when the image fails to load. */\n  renderError?: () => ReactNode,\n  /**\n   * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>` component.\n   * If not provided, the default image group is used.\n   */\n  group?: ImageGroup\n}\n\ninterface ImageContextValue extends ImageProps {\n  hidden?: boolean\n}\n\nexport const ImageContext = createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);\n\ntype ImageState = 'loading' | 'loaded' | 'revealed' | 'error';\ninterface State {\n  state: ImageState,\n  src: string,\n  startTime: number,\n  loadTime: number\n}\n\ntype Action = \n  | {type: 'update', src: string}\n  | {type: 'loaded'}\n  | {type: 'revealed'}\n  | {type: 'error'};\n\nfunction createState(src: string): State {\n  return {\n    state: 'loading',\n    src,\n    startTime: Date.now(),\n    loadTime: 0\n  };\n}\n\nfunction reducer(state: State, action: Action): State {\n  switch (action.type) {\n    case 'update': {\n      return {\n        state: 'loading',\n        src: action.src,\n        startTime: Date.now(),\n        loadTime: 0\n      };\n    }\n    case 'loaded':\n    case 'error': {\n      return {\n        ...state,\n        state: action.type\n      };\n    }\n    case 'revealed': {\n      return {\n        ...state,\n        state: 'revealed',\n        loadTime: Date.now() - state.startTime\n      };\n    }\n    default:\n      return state;\n  }\n}\n\nconst wrapperStyles = style({\n  backgroundColor: 'gray-100',\n  overflow: 'hidden'\n});\n\nconst imgStyles = style({\n  display: 'block',\n  width: 'full',\n  height: 'full',\n  objectFit: '[inherit]',\n  objectPosition: '[inherit]',\n  opacity: {\n    default: 0,\n    isRevealed: 1\n  },\n  transition: {\n    default: 'none',\n    isTransitioning: 'opacity'\n  },\n  transitionDuration: 500\n});\n\nexport const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {\n  [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);\n\n  let {\n    src = '',\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    renderError,\n    group = DefaultImageGroup,\n    // TODO\n    // srcSet,\n    // sizes,\n    alt,\n    crossOrigin,\n    decoding,\n    fetchPriority,\n    loading,\n    referrerPolicy,\n    slot\n  } = props;\n  let hidden = (props as ImageContextValue).hidden;\n  \n  let {revealAll, register, unregister, load} = useContext(group);\n  let [{state, src: lastSrc, loadTime}, dispatch] = useReducer(reducer, src, createState);\n\n  if (src !== lastSrc && !hidden) {\n    dispatch({type: 'update', src});\n  }\n\n  if (state === 'loaded' && revealAll && !hidden) {\n    dispatch({type: 'revealed'});\n  }\n\n  let imgRef = useRef<HTMLImageElement | null>(null);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    register(src);\n    return () => {\n      unregister(src);\n    };\n  }, [hidden, register, unregister, src]);\n\n  let onLoad = useCallback(() => {\n    load(src);\n    dispatch({type: 'loaded'});\n  }, [load, src]);\n\n  let onError = useCallback(() => {\n    dispatch({type: 'error'});\n    unregister(src);\n  }, [unregister, src]);\n\n  let isSkeleton = useIsSkeleton();\n  let isAnimating = isSkeleton || state === 'loading' || state === 'loaded';\n  let animation = useLoadingAnimation(isAnimating);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    // If the image is already loaded, update state immediately instead of waiting for onLoad.\n    if (state === 'loading' && imgRef.current?.complete) {\n      // Queue a microtask so we don't hit React's update limit.\n      // TODO: is this necessary?\n      queueMicrotask(onLoad);\n    }\n\n    animation(domRef.current);\n  });\n\n  if (props.alt == null && process.env.NODE_ENV !== 'production') {\n    console.warn(\n      'The `alt` prop was not provided to an image. ' +\n      'Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image ' +\n      'is decorative or redundant with displayed text and should not be announced by screen readers.'\n    );\n  }\n\n  let errorState = !isSkeleton && state === 'error' && renderError?.();\n  let isRevealed = state === 'revealed' && !isSkeleton;\n  let isTransitioning = isRevealed && loadTime > 200;\n  return useMemo(() => hidden ? null : (\n    <div\n      ref={domRef}\n      slot={slot || undefined}\n      style={UNSAFE_style}\n      className={UNSAFE_className + mergeStyles(wrapperStyles, styles) + ' '  + (isAnimating ? loadingStyle : '')}>\n      {errorState}\n      {!errorState && (\n        <img\n          {...getFetchPriorityProp(fetchPriority)}\n          src={src}\n          alt={alt}\n          crossOrigin={crossOrigin}\n          decoding={decoding}\n          loading={loading}\n          referrerPolicy={referrerPolicy}\n          ref={imgRef}\n          onLoad={onLoad}\n          onError={onError}\n          className={imgStyles({isRevealed, isTransitioning})} />\n        )}\n    </div>\n  ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);\n});\n\nfunction getFetchPriorityProp(fetchPriority?: 'high' | 'low' | 'auto'): Record<string, string | undefined> {\n  const pieces = version.split('.');\n  const major = parseInt(pieces[0], 10);\n  if (major >= 19) {\n    return {fetchPriority};\n  }\n  return {fetchpriority: fetchPriority};\n}\n"],"names":[],"version":3,"file":"Image.css.map"}

package/dist/Image.mjs

@@ -123,7 +123,7 @@ const $dbd6f0b2503b938c$export$3e431a229df88919 = /*#__PURE__*/ (0, $5AH9h$forwa
         queueMicrotask(onLoad);
         animation(domRef.current);
     });
-    if (props.alt == null) console.warn('The `alt` prop was not provided to an image. Add `alt` text for screen readers, or set `alt=""` prop to indicate that the image is decorative or redundant with displayed text and should not be announced by screen readers.');
+    if (props.alt == null && process.env.NODE_ENV !== 'production') console.warn('The `alt` prop was not provided to an image. Add `alt` text for screen readers, or set `alt=""` prop to indicate that the image is decorative or redundant with displayed text and should not be announced by screen readers.');
     let errorState = !isSkeleton && state === 'error' && renderError?.();
     let isRevealed = state === 'revealed' && !isSkeleton;
     let isTransitioning = isRevealed && loadTime > 200;

package/dist/Image.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Image.tsx"],"sourcesContent":["import {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, ReactNode, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';\nimport {DefaultImageGroup, ImageGroup} from './ImageCoordinator';\nimport {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n  /** The URL of the image. */\n  src?: string,\n  // TODO\n  // srcSet?: string,\n  // sizes?: string,\n  /** Accessible alt text for the image. */\n  alt?: string,\n  /**\n   * Indicates if the fetching of the image must be done using a CORS request.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).\n   */\n  crossOrigin?: 'anonymous' | 'use-credentials',\n  /**\n   * Whether the browser should decode images synchronously or asynchronously.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).\n   */\n  decoding?: 'async' | 'auto' | 'sync',\n  /**\n   * Provides a hint of the relative priority to use when fetching the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority).\n   */\n  fetchPriority?: 'high' | 'low' | 'auto',\n  /**\n   * Whether the image should be loaded immediately or lazily when scrolled into view.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).\n   */\n  loading?: 'eager' | 'lazy',\n  /**\n   * A string indicating which referrer to use when fetching the resource.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy).\n   */\n  referrerPolicy?: HTMLAttributeReferrerPolicy,\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StyleString,\n  /** A function that is called to render a fallback when the image fails to load. */\n  renderError?: () => ReactNode,\n  /**\n   * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>` component.\n   * If not provided, the default image group is used.\n   */\n  group?: ImageGroup\n}\n\ninterface ImageContextValue extends ImageProps {\n  hidden?: boolean\n}\n\nexport const ImageContext = createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);\n\ntype ImageState = 'loading' | 'loaded' | 'revealed' | 'error';\ninterface State {\n  state: ImageState,\n  src: string,\n  startTime: number,\n  loadTime: number\n}\n\ntype Action = \n  | {type: 'update', src: string}\n  | {type: 'loaded'}\n  | {type: 'revealed'}\n  | {type: 'error'};\n\nfunction createState(src: string): State {\n  return {\n    state: 'loading',\n    src,\n    startTime: Date.now(),\n    loadTime: 0\n  };\n}\n\nfunction reducer(state: State, action: Action): State {\n  switch (action.type) {\n    case 'update': {\n      return {\n        state: 'loading',\n        src: action.src,\n        startTime: Date.now(),\n        loadTime: 0\n      };\n    }\n    case 'loaded':\n    case 'error': {\n      return {\n        ...state,\n        state: action.type\n      };\n    }\n    case 'revealed': {\n      return {\n        ...state,\n        state: 'revealed',\n        loadTime: Date.now() - state.startTime\n      };\n    }\n    default:\n      return state;\n  }\n}\n\nconst wrapperStyles = style({\n  backgroundColor: 'gray-100',\n  overflow: 'hidden'\n});\n\nconst imgStyles = style({\n  display: 'block',\n  width: 'full',\n  height: 'full',\n  objectFit: '[inherit]',\n  objectPosition: '[inherit]',\n  opacity: {\n    default: 0,\n    isRevealed: 1\n  },\n  transition: {\n    default: 'none',\n    isTransitioning: 'opacity'\n  },\n  transitionDuration: 500\n});\n\nexport const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {\n  [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);\n\n  let {\n    src = '',\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    renderError,\n    group = DefaultImageGroup,\n    // TODO\n    // srcSet,\n    // sizes,\n    alt,\n    crossOrigin,\n    decoding,\n    fetchPriority,\n    loading,\n    referrerPolicy,\n    slot\n  } = props;\n  let hidden = (props as ImageContextValue).hidden;\n  \n  let {revealAll, register, unregister, load} = useContext(group);\n  let [{state, src: lastSrc, loadTime}, dispatch] = useReducer(reducer, src, createState);\n\n  if (src !== lastSrc && !hidden) {\n    dispatch({type: 'update', src});\n  }\n\n  if (state === 'loaded' && revealAll && !hidden) {\n    dispatch({type: 'revealed'});\n  }\n\n  let imgRef = useRef<HTMLImageElement | null>(null);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    register(src);\n    return () => {\n      unregister(src);\n    };\n  }, [hidden, register, unregister, src]);\n\n  let onLoad = useCallback(() => {\n    load(src);\n    dispatch({type: 'loaded'});\n  }, [load, src]);\n\n  let onError = useCallback(() => {\n    dispatch({type: 'error'});\n    unregister(src);\n  }, [unregister, src]);\n\n  let isSkeleton = useIsSkeleton();\n  let isAnimating = isSkeleton || state === 'loading' || state === 'loaded';\n  let animation = useLoadingAnimation(isAnimating);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    // If the image is already loaded, update state immediately instead of waiting for onLoad.\n    if (state === 'loading' && imgRef.current?.complete) {\n      // Queue a microtask so we don't hit React's update limit.\n      // TODO: is this necessary?\n      queueMicrotask(onLoad);\n    }\n\n    animation(domRef.current);\n  });\n\n  if (props.alt == null) {\n    console.warn(\n      'The `alt` prop was not provided to an image. ' +\n      'Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image ' +\n      'is decorative or redundant with displayed text and should not be announced by screen readers.'\n    );\n  }\n\n  let errorState = !isSkeleton && state === 'error' && renderError?.();\n  let isRevealed = state === 'revealed' && !isSkeleton;\n  let isTransitioning = isRevealed && loadTime > 200;\n  return useMemo(() => hidden ? null : (\n    <div\n      ref={domRef}\n      slot={slot || undefined}\n      style={UNSAFE_style}\n      className={UNSAFE_className + mergeStyles(wrapperStyles, styles) + ' '  + (isAnimating ? loadingStyle : '')}>\n      {errorState}\n      {!errorState && (\n        <img\n          {...getFetchPriorityProp(fetchPriority)}\n          src={src}\n          alt={alt}\n          crossOrigin={crossOrigin}\n          decoding={decoding}\n          loading={loading}\n          referrerPolicy={referrerPolicy}\n          ref={imgRef}\n          onLoad={onLoad}\n          onError={onError}\n          className={imgStyles({isRevealed, isTransitioning})} />\n        )}\n    </div>\n  ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);\n});\n\nfunction getFetchPriorityProp(fetchPriority?: 'high' | 'low' | 'auto'): Record<string, string | undefined> {\n  const pieces = version.split('.');\n  const major = parseInt(pieces[0], 10);\n  if (major >= 19) {\n    return {fetchPriority};\n  }\n  return {fetchpriority: fetchPriority};\n}\n"],"names":[],"version":3,"file":"Image.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Image.tsx"],"sourcesContent":["import {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, ReactNode, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';\nimport {DefaultImageGroup, ImageGroup} from './ImageCoordinator';\nimport {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n  /** The URL of the image. */\n  src?: string,\n  // TODO\n  // srcSet?: string,\n  // sizes?: string,\n  /** Accessible alt text for the image. */\n  alt?: string,\n  /**\n   * Indicates if the fetching of the image must be done using a CORS request.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).\n   */\n  crossOrigin?: 'anonymous' | 'use-credentials',\n  /**\n   * Whether the browser should decode images synchronously or asynchronously.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).\n   */\n  decoding?: 'async' | 'auto' | 'sync',\n  /**\n   * Provides a hint of the relative priority to use when fetching the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority).\n   */\n  fetchPriority?: 'high' | 'low' | 'auto',\n  /**\n   * Whether the image should be loaded immediately or lazily when scrolled into view.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).\n   */\n  loading?: 'eager' | 'lazy',\n  /**\n   * A string indicating which referrer to use when fetching the resource.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy).\n   */\n  referrerPolicy?: HTMLAttributeReferrerPolicy,\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StyleString,\n  /** A function that is called to render a fallback when the image fails to load. */\n  renderError?: () => ReactNode,\n  /**\n   * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>` component.\n   * If not provided, the default image group is used.\n   */\n  group?: ImageGroup\n}\n\ninterface ImageContextValue extends ImageProps {\n  hidden?: boolean\n}\n\nexport const ImageContext = createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);\n\ntype ImageState = 'loading' | 'loaded' | 'revealed' | 'error';\ninterface State {\n  state: ImageState,\n  src: string,\n  startTime: number,\n  loadTime: number\n}\n\ntype Action = \n  | {type: 'update', src: string}\n  | {type: 'loaded'}\n  | {type: 'revealed'}\n  | {type: 'error'};\n\nfunction createState(src: string): State {\n  return {\n    state: 'loading',\n    src,\n    startTime: Date.now(),\n    loadTime: 0\n  };\n}\n\nfunction reducer(state: State, action: Action): State {\n  switch (action.type) {\n    case 'update': {\n      return {\n        state: 'loading',\n        src: action.src,\n        startTime: Date.now(),\n        loadTime: 0\n      };\n    }\n    case 'loaded':\n    case 'error': {\n      return {\n        ...state,\n        state: action.type\n      };\n    }\n    case 'revealed': {\n      return {\n        ...state,\n        state: 'revealed',\n        loadTime: Date.now() - state.startTime\n      };\n    }\n    default:\n      return state;\n  }\n}\n\nconst wrapperStyles = style({\n  backgroundColor: 'gray-100',\n  overflow: 'hidden'\n});\n\nconst imgStyles = style({\n  display: 'block',\n  width: 'full',\n  height: 'full',\n  objectFit: '[inherit]',\n  objectPosition: '[inherit]',\n  opacity: {\n    default: 0,\n    isRevealed: 1\n  },\n  transition: {\n    default: 'none',\n    isTransitioning: 'opacity'\n  },\n  transitionDuration: 500\n});\n\nexport const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {\n  [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);\n\n  let {\n    src = '',\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    renderError,\n    group = DefaultImageGroup,\n    // TODO\n    // srcSet,\n    // sizes,\n    alt,\n    crossOrigin,\n    decoding,\n    fetchPriority,\n    loading,\n    referrerPolicy,\n    slot\n  } = props;\n  let hidden = (props as ImageContextValue).hidden;\n  \n  let {revealAll, register, unregister, load} = useContext(group);\n  let [{state, src: lastSrc, loadTime}, dispatch] = useReducer(reducer, src, createState);\n\n  if (src !== lastSrc && !hidden) {\n    dispatch({type: 'update', src});\n  }\n\n  if (state === 'loaded' && revealAll && !hidden) {\n    dispatch({type: 'revealed'});\n  }\n\n  let imgRef = useRef<HTMLImageElement | null>(null);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    register(src);\n    return () => {\n      unregister(src);\n    };\n  }, [hidden, register, unregister, src]);\n\n  let onLoad = useCallback(() => {\n    load(src);\n    dispatch({type: 'loaded'});\n  }, [load, src]);\n\n  let onError = useCallback(() => {\n    dispatch({type: 'error'});\n    unregister(src);\n  }, [unregister, src]);\n\n  let isSkeleton = useIsSkeleton();\n  let isAnimating = isSkeleton || state === 'loading' || state === 'loaded';\n  let animation = useLoadingAnimation(isAnimating);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    // If the image is already loaded, update state immediately instead of waiting for onLoad.\n    if (state === 'loading' && imgRef.current?.complete) {\n      // Queue a microtask so we don't hit React's update limit.\n      // TODO: is this necessary?\n      queueMicrotask(onLoad);\n    }\n\n    animation(domRef.current);\n  });\n\n  if (props.alt == null && process.env.NODE_ENV !== 'production') {\n    console.warn(\n      'The `alt` prop was not provided to an image. ' +\n      'Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image ' +\n      'is decorative or redundant with displayed text and should not be announced by screen readers.'\n    );\n  }\n\n  let errorState = !isSkeleton && state === 'error' && renderError?.();\n  let isRevealed = state === 'revealed' && !isSkeleton;\n  let isTransitioning = isRevealed && loadTime > 200;\n  return useMemo(() => hidden ? null : (\n    <div\n      ref={domRef}\n      slot={slot || undefined}\n      style={UNSAFE_style}\n      className={UNSAFE_className + mergeStyles(wrapperStyles, styles) + ' '  + (isAnimating ? loadingStyle : '')}>\n      {errorState}\n      {!errorState && (\n        <img\n          {...getFetchPriorityProp(fetchPriority)}\n          src={src}\n          alt={alt}\n          crossOrigin={crossOrigin}\n          decoding={decoding}\n          loading={loading}\n          referrerPolicy={referrerPolicy}\n          ref={imgRef}\n          onLoad={onLoad}\n          onError={onError}\n          className={imgStyles({isRevealed, isTransitioning})} />\n        )}\n    </div>\n  ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);\n});\n\nfunction getFetchPriorityProp(fetchPriority?: 'high' | 'low' | 'auto'): Record<string, string | undefined> {\n  const pieces = version.split('.');\n  const major = parseInt(pieces[0], 10);\n  if (major >= 19) {\n    return {fetchPriority};\n  }\n  return {fetchpriority: fetchPriority};\n}\n"],"names":[],"version":3,"file":"Image.mjs.map"}

package/dist/ImageCoordinator.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/ImageCoordinator.tsx"],"sourcesContent":["import {Context, createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useReducer} from 'react';\n\nexport interface ImageCoordinatorProps {\n  /** Children within the ImageCoordinator. */\n  children: ReactNode,\n  /**\n   * Time in milliseconds after which images are always displayed, even if all images are not yet loaded.\n   * @default 5000\n   */\n  timeout?: number,\n  /**\n   * A group of images to coordinate between, matching the group passed to the `<Image>` component.\n   * If not provided, the default image group is used.\n   */\n  group?: ImageGroup\n}\n\nexport type ImageGroup = Context<ImageGroupValue>;\n\ninterface ImageGroupValue {\n  revealAll: boolean,\n  register(url: string): void,\n  unregister(url: string): void,\n  load(url: string): void\n}\n\nconst defaultContext: ImageGroupValue = {\n  revealAll: true,\n  register() {},\n  unregister() {},\n  load() {}\n};\n\nexport const DefaultImageGroup = createImageGroup();\n\nexport function createImageGroup(): ImageGroup {\n  return createContext(defaultContext);\n}\n\ninterface State {\n  loadedAll: boolean,\n  timedOut: boolean,\n  loadStartTime: number,\n  loaded: Map<string, boolean>\n}\n\ntype Action = \n  | {type: 'register', url: string}\n  | {type: 'unregister', url: string}\n  | {type: 'load', url: string}\n  | {type: 'timeout'};\n\nfunction reducer(state: State, action: Action): State {\n  switch (action.type) {\n    case 'register': {\n      if (state.loaded.get(action.url) !== false) {\n        let loaded = new Map(state.loaded);\n        loaded.set(action.url, false);\n        return {\n          loadedAll: false,\n          // If we had previously loaded all items, then reset the timed out state\n          // since this is the first item of a new batch.\n          timedOut: state.loadedAll ? false : state.timedOut,\n          loadStartTime: state.loadedAll ? Date.now() : state.loadStartTime,\n          loaded\n        };\n      }\n      return state;\n    }\n    case 'unregister': {\n      if (state.loaded.has(action.url)) {\n        let loaded = new Map(state.loaded);\n        loaded.delete(action.url);\n        return {\n          loadedAll: isAllLoaded(loaded),\n          timedOut: state.timedOut,\n          loadStartTime: state.loadStartTime,\n          loaded\n        };\n      }\n      return state;\n    }\n    case 'load': {\n      if (state.loaded.get(action.url) === false) {\n        let loaded = new Map(state.loaded);\n        loaded.set(action.url, true);\n        return {\n          loadedAll: isAllLoaded(loaded),\n          timedOut: state.timedOut,\n          loadStartTime: state.loadStartTime,\n          loaded\n        };\n      }\n      return state;\n    }\n    case 'timeout': {\n      if (!state.loadedAll && !state.timedOut) {\n        return {\n          ...state,\n          timedOut: true\n        };\n      }\n      return state;\n    }\n    default:\n      return state;\n  }\n}\n\nfunction isAllLoaded(loaded: Map<string, boolean>) {\n  for (let isLoaded of loaded.values()) {\n    if (!isLoaded) {\n      return false;\n    }\n  }\n  return true;\n}\n\n/**\n * An ImageCoordinator coordinates loading behavior for a group of images.\n * Images within an ImageCoordinator are revealed together once all of them have loaded.\n */\nexport function ImageCoordinator(props: ImageCoordinatorProps) {\n  // If we are already inside another ImageCoordinator, just pass\n  // through children and coordinate loading at the root.\n  let ctx = useContext(props.group || DefaultImageGroup);\n  if (ctx !== defaultContext) {\n    return props.children;\n  }\n\n  return <ImageCoordinatorRoot {...props} />;\n}\n\nfunction ImageCoordinatorRoot(props: ImageCoordinatorProps) {\n  let {children, timeout = 5000, group = DefaultImageGroup} = props;\n  let [{loadedAll, timedOut, loadStartTime}, dispatch] = useReducer(reducer, {\n    loadedAll: true,\n    timedOut: false,\n    loadStartTime: 0,\n    loaded: new Map()\n  });\n  \n  let register = useCallback((url: string) => dispatch({type: 'register', url}), []);\n  let unregister = useCallback((url: string) => dispatch({type: 'unregister', url}), []);\n  let load = useCallback((url: string) => dispatch({type: 'load', url}), []);\n\n  useEffect(() => {\n    if (!loadedAll) {\n      let timeoutId = setTimeout(() => {\n        dispatch({type: 'timeout'});\n      }, loadStartTime + timeout - Date.now());\n\n      return () => clearTimeout(timeoutId);\n    }\n  }, [loadStartTime, loadedAll, timeout]);\n\n  let revealAll = loadedAll || timedOut;\n  return useMemo(() => (\n    <group.Provider value={{revealAll, register, unregister, load}}>\n      {children}\n    </group.Provider>\n  ), [group, children, revealAll, register, unregister, load]);\n}\n"],"names":[],"version":3,"file":"ImageCoordinator.cjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/ImageCoordinator.tsx"],"sourcesContent":["import {Context, createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useReducer} from 'react';\n\nexport interface ImageCoordinatorProps {\n  /** Children within the ImageCoordinator. */\n  children: ReactNode,\n  /**\n   * Time in milliseconds after which images are always displayed, even if all images are not yet loaded.\n   * @default 5000\n   */\n  timeout?: number,\n  /**\n   * A group of images to coordinate between, matching the group passed to the `<Image>` component.\n   * If not provided, the default image group is used.\n   */\n  group?: ImageGroup\n}\n\nexport type ImageGroup = Context<ImageGroupValue>;\n\ninterface ImageGroupValue {\n  revealAll: boolean,\n  register(url: string): void,\n  unregister(url: string): void,\n  load(url: string): void\n}\n\nconst defaultContext: ImageGroupValue = {\n  revealAll: true,\n  register() {},\n  unregister() {},\n  load() {}\n};\n\nexport const DefaultImageGroup = createImageGroup();\n\nexport function createImageGroup(): ImageGroup {\n  return createContext(defaultContext);\n}\n\ninterface State {\n  loadedAll: boolean,\n  timedOut: boolean,\n  loadStartTime: number,\n  loaded: Map<string, boolean>\n}\n\ntype Action =\n  | {type: 'register', url: string}\n  | {type: 'unregister', url: string}\n  | {type: 'load', url: string}\n  | {type: 'timeout'};\n\nfunction reducer(state: State, action: Action): State {\n  switch (action.type) {\n    case 'register': {\n      if (state.loaded.get(action.url) !== false) {\n        let loaded = new Map(state.loaded);\n        loaded.set(action.url, false);\n        return {\n          loadedAll: false,\n          // If we had previously loaded all items, then reset the timed out state\n          // since this is the first item of a new batch.\n          timedOut: state.loadedAll ? false : state.timedOut,\n          loadStartTime: state.loadedAll ? Date.now() : state.loadStartTime,\n          loaded\n        };\n      }\n      return state;\n    }\n    case 'unregister': {\n      if (state.loaded.has(action.url)) {\n        let loaded = new Map(state.loaded);\n        loaded.delete(action.url);\n        return {\n          loadedAll: isAllLoaded(loaded),\n          timedOut: state.timedOut,\n          loadStartTime: state.loadStartTime,\n          loaded\n        };\n      }\n      return state;\n    }\n    case 'load': {\n      if (state.loaded.get(action.url) === false) {\n        let loaded = new Map(state.loaded);\n        loaded.set(action.url, true);\n        return {\n          loadedAll: isAllLoaded(loaded),\n          timedOut: state.timedOut,\n          loadStartTime: state.loadStartTime,\n          loaded\n        };\n      }\n      return state;\n    }\n    case 'timeout': {\n      if (!state.loadedAll && !state.timedOut) {\n        return {\n          ...state,\n          timedOut: true\n        };\n      }\n      return state;\n    }\n    default:\n      return state;\n  }\n}\n\nfunction isAllLoaded(loaded: Map<string, boolean>) {\n  for (let isLoaded of loaded.values()) {\n    if (!isLoaded) {\n      return false;\n    }\n  }\n  return true;\n}\n\n/**\n * An ImageCoordinator coordinates loading behavior for a group of images.\n * Images within an ImageCoordinator are revealed together once all of them have loaded.\n */\nexport function ImageCoordinator(props: ImageCoordinatorProps): ReactNode {\n  // If we are already inside another ImageCoordinator, just pass\n  // through children and coordinate loading at the root.\n  let ctx = useContext(props.group || DefaultImageGroup);\n  if (ctx !== defaultContext) {\n    return props.children;\n  }\n\n  return <ImageCoordinatorRoot {...props} />;\n}\n\nfunction ImageCoordinatorRoot(props: ImageCoordinatorProps) {\n  let {children, timeout = 5000, group = DefaultImageGroup} = props;\n  let [{loadedAll, timedOut, loadStartTime}, dispatch] = useReducer(reducer, {\n    loadedAll: true,\n    timedOut: false,\n    loadStartTime: 0,\n    loaded: new Map()\n  });\n\n  let register = useCallback((url: string) => dispatch({type: 'register', url}), []);\n  let unregister = useCallback((url: string) => dispatch({type: 'unregister', url}), []);\n  let load = useCallback((url: string) => dispatch({type: 'load', url}), []);\n\n  useEffect(() => {\n    if (!loadedAll) {\n      let timeoutId = setTimeout(() => {\n        dispatch({type: 'timeout'});\n      }, loadStartTime + timeout - Date.now());\n\n      return () => clearTimeout(timeoutId);\n    }\n  }, [loadStartTime, loadedAll, timeout]);\n\n  let revealAll = loadedAll || timedOut;\n  return useMemo(() => (\n    <group.Provider value={{revealAll, register, unregister, load}}>\n      {children}\n    </group.Provider>\n  ), [group, children, revealAll, register, unregister, load]);\n}\n"],"names":[],"version":3,"file":"ImageCoordinator.cjs.map"}