@react-spectrum/s2 3.0.0-nightly-63d4359d6-250427 → 3.0.0-nightly-1dd65ffc5-250429

package/dist/IllustratedMessage.mjs

@@ -29,217 +29,242 @@ import {useDOMRef as $3JmRZ$useDOMRef} from "@react-spectrum/utils";
 
 
 const $4950413ac998f607$var$illustratedMessage = function anonymous(props, overrides) {
-    let rules = " .";
-    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r|k|o|p)[^\s]+/g) || [];
-    rules += matches.join('');
-    let $r = false;
-    for (let p of matches)if (/^\s*r/.test(p)) $r = true;
-    rules += ' _0f';
-    rules += ' _d-bc1l9oh';
-    rules += ' _d-1uotwbwg';
-    rules += ' _d-eo0c6sf';
-    rules += ' _d-enzzrge';
-    rules += ' _d-enzykdd';
-    rules += ' _d-enzwzjc';
-    rules += ' _d-enzrfpb';
-    rules += ' _da';
+    let rules = " ";
+    let maxWidth = false;
+    let matches = (overrides || '').matchAll(/(?:^|\s)(j|l|h|i|_H|_r|M|__f|_X|_M|L|N|_f|_d|K|__B|H|G|J|I|f|u|_l|e|s|_w)[^\s]+/g);
+    for (let p of matches){
+        if (p[1] === "_l") maxWidth = true;
+        rules += p[0];
+    }
+    rules += ' mb';
+    rules += ' bh';
+    rules += ' bdf';
+    rules += ' beg';
+    rules += ' bfa';
+    rules += ' bgb';
+    rules += ' bhd';
+    rules += ' bje';
+    rules += ' bic';
     if (props.size === "XL") {
-        rules += ' _ebj';
-        rules += ' _ei';
+        rules += ' ah';
+        rules += ' aac';
     } else if (props.size === "L") {
-        rules += ' _ebh';
-        rules += ' _eg';
+        rules += ' ae';
+        rules += ' aad';
     } else if (props.size === "S") {
-        rules += ' _ebd';
-        rules += ' _ec';
+        rules += ' af';
+        rules += ' aag';
     } else if (props.size === "XS") {
-        rules += ' _ebb';
-        rules += ' _ea';
+        rules += ' ai';
+        rules += ' aaj';
     } else {
-        rules += ' _ebf';
-        rules += ' _ee';
+        rules += ' aa';
+        rules += ' aab';
     }
-    if (!$r) {
-        if (props.orientation === "horizontal") rules += ' r________V';
-        else if (props.orientation === "vertical") rules += ' r______x';
+    if (props.orientation === "horizontal") {
+        if (!maxWidth) rules += ' _lw';
+    } else if (props.orientation === "vertical") {
+        if (!maxWidth) rules += ' _lv';
     }
-    if (props.orientation === "horizontal") rules += ' __k-1yexyzb';
-    else if (props.orientation === "vertical") rules += ' __k-asng59';
-    if (props.orientation === "horizontal") rules += ' __j-1g2tm43';
+    if (props.orientation === "horizontal") rules += ' _uLJajOe';
+    else if (props.orientation === "vertical") rules += ' _uPmblS';
+    if (props.orientation === "horizontal") rules += ' _FCIGjJc';
     else if (props.orientation === "vertical") {
-        if (props.size === "L") rules += ' __j-fpm35d';
-        else rules += ' __j-1lbesf0';
+        if (props.size === "L") rules += ' _FbQCrs';
+        else rules += ' _F4ICjXd';
     }
-    if (props.orientation === "horizontal") rules += ' __i-nxlg42';
-    if (props.orientation === "horizontal") rules += ' _4a';
-    else if (props.orientation === "vertical") rules += ' _4c';
-    if (props.orientation === "vertical") rules += ' _kb';
+    if (props.orientation === "horizontal") rules += ' SpdPjR';
+    if (props.orientation === "horizontal") rules += ' __eb';
+    else if (props.orientation === "vertical") rules += ' __ea';
+    if (props.orientation === "vertical") rules += ' _Ec';
     return rules;
 };
 const $4950413ac998f607$var$illustration = function anonymous(props) {
-    let rules = " .";
-    rules += ' __b-1ljhker';
-    rules += ' __c-1ljhker';
-    rules += ' __d-1ljhker';
-    rules += ' __e-1ljhker';
-    if (props.size === "L") rules += ' l__Y';
-    else if (props.size === "M") rules += ' l_W';
-    else if (props.size === "S") rules += ' l_W';
-    if (props.size === "L") rules += ' k__Y';
-    else if (props.size === "M") rules += ' k_W';
-    else if (props.size === "S") rules += ' k_W';
-    rules += ' _5d';
+    let rules = " ";
+    rules += ' LTZ8xtd';
+    rules += ' NTZ8xtd';
+    rules += ' _fTZ8xtd';
+    rules += ' _dTZ8xtd';
+    if (props.size === "L") rules += ' fF';
+    else if (props.size === "M") rules += ' fx';
+    else if (props.size === "S") rules += ' fx';
+    if (props.size === "L") rules += ' eB';
+    else if (props.size === "M") rules += ' ey';
+    else if (props.size === "S") rules += ' ey';
+    rules += ' _Xa';
     if (props.isDropTarget) {
-        if (props.isPressed) rules += ' -rwx0fg_a-z';
-        else if (props.isFocusVisible) rules += ' -rwx0fg_a-z';
-        else if (props.isHovered) rules += ' -rwx0fg_a-z';
-        else rules += ' -rwx0fg_a-y';
+        if (props.isPressed) rules += ' -_8sjo0b-di';
+        else if (props.isFocusVisible) rules += ' -_8sjo0b-di';
+        else if (props.isHovered) rules += ' -_8sjo0b-di';
+        else rules += ' -_8sjo0b-du';
     } else {
-        if (props.isPressed) rules += ' -rwx0fg_a-o';
-        else if (props.isFocusVisible) rules += ' -rwx0fg_a-o';
-        else if (props.isHovered) rules += ' -rwx0fg_a-o';
-        else rules += ' -rwx0fg_a-n';
+        if (props.isPressed) rules += ' -_8sjo0b-db';
+        else if (props.isFocusVisible) rules += ' -_8sjo0b-db';
+        else if (props.isHovered) rules += ' -_8sjo0b-db';
+        else rules += ' -_8sjo0b-da';
     }
     return rules;
 };
 const $4950413ac998f607$var$heading = function anonymous(props) {
-    let rules = " .";
-    rules += ' __b-1c6tcyh';
-    rules += ' __c-1c6tcyh';
-    rules += ' __d-1c6tcyh';
-    rules += ' __e-1c6tcyh';
+    let rules = " ";
+    rules += ' LPCJngb';
+    rules += ' NPCJngb';
+    rules += ' _fPCJngb';
+    rules += ' _dPCJngb';
     if (props.size === "L") {
-        rules += ' _d-bc1l9oh';
-        rules += ' _d-1uotwbwg';
-        rules += ' _d-eo0c6sf';
-        rules += ' _d-enzzrge';
-        rules += ' _d-enzykdd';
-        rules += ' _d-enzwzjc';
-        rules += ' _d-enzrfpb';
-        rules += ' _da';
+        rules += ' bh';
+        rules += ' bdf';
+        rules += ' beg';
+        rules += ' bfa';
+        rules += ' bgb';
+        rules += ' bhd';
+        rules += ' bje';
+        rules += ' bic';
     } else if (props.size === "M") {
-        rules += ' _d-bc1l9oh';
-        rules += ' _d-1uotwbwg';
-        rules += ' _d-eo0c6sf';
-        rules += ' _d-enzzrge';
-        rules += ' _d-enzykdd';
-        rules += ' _d-enzwzjc';
-        rules += ' _d-enzrfpb';
-        rules += ' _da';
+        rules += ' bh';
+        rules += ' bdf';
+        rules += ' beg';
+        rules += ' bfa';
+        rules += ' bgb';
+        rules += ' bhd';
+        rules += ' bje';
+        rules += ' bic';
     } else if (props.size === "S") {
-        rules += ' _d-bc1l9oh';
-        rules += ' _d-1uotwbwg';
-        rules += ' _d-eo0c6sf';
-        rules += ' _d-enzzrge';
-        rules += ' _d-enzykdd';
-        rules += ' _d-enzwzjc';
-        rules += ' _d-enzrfpb';
-        rules += ' _da';
+        rules += ' bh';
+        rules += ' bdf';
+        rules += ' beg';
+        rules += ' bfa';
+        rules += ' bgb';
+        rules += ' bhd';
+        rules += ' bje';
+        rules += ' bic';
     }
     if (props.size === "L") {
-        rules += ' _ebm';
-        rules += ' _ej';
+        rules += ' ac';
+        rules += ' aam';
     } else if (props.size === "M") {
-        rules += ' _ebl';
-        rules += ' _ek';
+        rules += ' ak';
+        rules += ' aal';
     } else if (props.size === "S") {
-        rules += ' _ebh';
-        rules += ' _eg';
+        rules += ' ae';
+        rules += ' aad';
     }
     if (props.size === "L") {
-        rules += ' _f-1x99dlod';
-        rules += ' _fd';
+        rules += ' Db';
+        rules += ' Eb';
+        rules += ' Ca';
+        rules += ' Dcb';
+        rules += ' Ecb';
+        rules += ' Cca';
     } else if (props.size === "M") {
-        rules += ' _f-1x99dlod';
-        rules += ' _fd';
+        rules += ' Db';
+        rules += ' Eb';
+        rules += ' Ca';
+        rules += ' Dcb';
+        rules += ' Ecb';
+        rules += ' Cca';
     } else if (props.size === "S") {
-        rules += ' _f-1x99dlod';
-        rules += ' _fd';
+        rules += ' Db';
+        rules += ' Eb';
+        rules += ' Ca';
+        rules += ' Dcb';
+        rules += ' Ecb';
+        rules += ' Cca';
     }
     if (props.size === "L") {
-        rules += ' _g-1x99dlob';
-        rules += ' _ga';
+        rules += ' gb';
+        rules += ' gca';
     } else if (props.size === "M") {
-        rules += ' _g-1x99dlob';
-        rules += ' _ga';
+        rules += ' gb';
+        rules += ' gca';
     } else if (props.size === "S") {
-        rules += ' _g-1x99dlob';
-        rules += ' _ga';
+        rules += ' gb';
+        rules += ' gca';
     }
-    if (props.size === "L") rules += ' ao';
-    else if (props.size === "M") rules += ' ao';
-    else if (props.size === "S") rules += ' ao';
-    rules += ' _5c';
-    rules += ' Aa';
-    rules += ' Ba';
-    rules += ' ya';
-    rules += ' za';
+    if (props.size === "L") rules += ' db';
+    else if (props.size === "M") rules += ' db';
+    else if (props.size === "S") rules += ' db';
+    rules += ' _Xb';
+    rules += ' ja';
+    rules += ' la';
+    rules += ' ha';
+    rules += ' ia';
     return rules;
 };
 const $4950413ac998f607$var$content = function anonymous(props) {
-    let rules = " .";
+    let rules = " ";
+    if (props.size === "L") {
+        rules += ' bh';
+        rules += ' bdf';
+        rules += ' beg';
+        rules += ' bfa';
+        rules += ' bgb';
+        rules += ' bhd';
+        rules += ' bje';
+        rules += ' bic';
+    } else if (props.size === "M") {
+        rules += ' bh';
+        rules += ' bdf';
+        rules += ' beg';
+        rules += ' bfa';
+        rules += ' bgb';
+        rules += ' bhd';
+        rules += ' bje';
+        rules += ' bic';
+    } else if (props.size === "S") {
+        rules += ' bh';
+        rules += ' bdf';
+        rules += ' beg';
+        rules += ' bfa';
+        rules += ' bgb';
+        rules += ' bhd';
+        rules += ' bje';
+        rules += ' bic';
+    }
     if (props.size === "L") {
-        rules += ' _d-bc1l9oh';
-        rules += ' _d-1uotwbwg';
-        rules += ' _d-eo0c6sf';
-        rules += ' _d-enzzrge';
-        rules += ' _d-enzykdd';
-        rules += ' _d-enzwzjc';
-        rules += ' _d-enzrfpb';
-        rules += ' _da';
+        rules += ' aa';
+        rules += ' aab';
     } else if (props.size === "M") {
-        rules += ' _d-bc1l9oh';
-        rules += ' _d-1uotwbwg';
-        rules += ' _d-eo0c6sf';
-        rules += ' _d-enzzrge';
-        rules += ' _d-enzykdd';
-        rules += ' _d-enzwzjc';
-        rules += ' _d-enzrfpb';
-        rules += ' _da';
+        rules += ' aa';
+        rules += ' aab';
     } else if (props.size === "S") {
-        rules += ' _d-bc1l9oh';
-        rules += ' _d-1uotwbwg';
-        rules += ' _d-eo0c6sf';
-        rules += ' _d-enzzrge';
-        rules += ' _d-enzykdd';
-        rules += ' _d-enzwzjc';
-        rules += ' _d-enzrfpb';
-        rules += ' _da';
+        rules += ' af';
+        rules += ' aag';
     }
     if (props.size === "L") {
-        rules += ' _ebf';
-        rules += ' _ee';
+        rules += ' Da';
+        rules += ' Ea';
+        rules += ' Ca';
     } else if (props.size === "M") {
-        rules += ' _ebf';
-        rules += ' _ee';
+        rules += ' Da';
+        rules += ' Ea';
+        rules += ' Ca';
     } else if (props.size === "S") {
-        rules += ' _ebd';
-        rules += ' _ec';
+        rules += ' Da';
+        rules += ' Ea';
+        rules += ' Ca';
     }
-    if (props.size === "L") rules += ' _fb';
-    else if (props.size === "M") rules += ' _fb';
-    else if (props.size === "S") rules += ' _fb';
     if (props.size === "L") {
-        rules += ' _g-1x99dloc';
-        rules += ' _gb';
+        rules += ' ga';
+        rules += ' gcc';
     } else if (props.size === "M") {
-        rules += ' _g-1x99dloc';
-        rules += ' _gb';
+        rules += ' ga';
+        rules += ' gcc';
     } else if (props.size === "S") {
-        rules += ' _g-1x99dloc';
-        rules += ' _gb';
+        rules += ' ga';
+        rules += ' gcc';
     }
-    if (props.size === "L") rules += ' an';
-    else if (props.size === "M") rules += ' an';
-    else if (props.size === "S") rules += ' an';
-    rules += ' __b-drkpd0';
-    rules += ' __c-drkpd0';
-    rules += ' __d-drkpd0';
-    rules += ' __e-drkpd0';
-    rules += ' _5b';
+    if (props.size === "L") rules += ' da';
+    else if (props.size === "M") rules += ' da';
+    else if (props.size === "S") rules += ' da';
+    rules += ' Lk52g2d';
+    rules += ' Nk52g2d';
+    rules += ' _fk52g2d';
+    rules += ' _dk52g2d';
+    rules += ' _Xc';
     return rules;
 };
-const $4950413ac998f607$var$buttonGroup = " __b-x3oos2 __c-x3oos2 __d-x3oos2 __e-x3oos2 Af";
+const $4950413ac998f607$var$buttonGroup = " LmlKpq NmlKpq _fmlKpq _dmlKpq jc";
 const $4950413ac998f607$export$d661ef89ad42d682 = /*#__PURE__*/ (0, $3JmRZ$createContext)(null);
 const $4950413ac998f607$export$406dbc84c317ece0 = /*#__PURE__*/ (0, $3JmRZ$forwardRef)(function IllustratedMessage(props, ref) {
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $4950413ac998f607$export$d661ef89ad42d682);

package/dist/IllustratedMessage.mjs.map

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

package/dist/Image.cjs

@@ -55,21 +55,21 @@ function $053b76ed3d29e13b$var$reducer(state, action) {
             return state;
     }
 }
-const $053b76ed3d29e13b$var$wrapperStyles = " bg __wb __xb";
+const $053b76ed3d29e13b$var$wrapperStyles = " ca _oa _ha";
 const $053b76ed3d29e13b$var$imgStyles = function anonymous(props) {
-    let rules = " .";
-    rules += ' _0a';
-    rules += ' lb';
-    rules += ' kb';
-    rules += ' __O-17zqamw';
-    rules += ' __P-17zqamw';
-    if (props.isRevealed) rules += ' _L-3t1y';
-    else rules += ' _L-3t1x';
-    if (props.isTransitioning) rules += ' _Pc';
-    else rules += ' _Pg';
-    rules += ' _R-3760fu';
-    if (props.isTransitioning) rules += ' _Sa';
-    else rules += ' _Sa';
+    let rules = " ";
+    rules += ' mc';
+    rules += ' fa';
+    rules += ' ef';
+    rules += ' _R40ub4c';
+    rules += ' _V40ub4c';
+    if (props.isRevealed) rules += ' _Lb';
+    else rules += ' _La';
+    if (props.isTransitioning) rules += ' _id';
+    else rules += ' _ic';
+    rules += ' _ke';
+    if (props.isTransitioning) rules += ' _ea';
+    else rules += ' _ea';
     return rules;
 };
 const $053b76ed3d29e13b$export$3e431a229df88919 = /*#__PURE__*/ (0, $kwMay$react.forwardRef)(function Image(props, domRef) {

package/dist/Image.css

@@ -1,60 +1,58 @@
 @layer _.a {
-  .bg {
+  .ca {
     background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
   }
 
-  .__wb {
+  ._oa {
     overflow-x: hidden;
   }
 
-  .__xb {
+  ._ha {
     overflow-y: hidden;
   }
 
-  ._0a {
+  .mc {
     display: block;
   }
 
-  .lb {
+  .fa {
     width: 100%;
   }
 
-  .kb {
+  .ef {
     height: 100%;
   }
 
-  .__O-17zqamw {
+  ._R40ub4c {
     object-fit: inherit;
   }
 
-  .__P-17zqamw {
+  ._V40ub4c {
     object-position: inherit;
   }
 
-  ._L-3t1x {
+  ._La {
     opacity: 0;
   }
 
-  ._L-3t1y {
+  ._Lb {
     opacity: 1;
   }
 
-  ._Pg {
+  ._ic {
     transition-property: none;
   }
 
-  ._Pc {
+  ._id {
     transition-property: opacity;
   }
 
-  ._R-3760fu {
+  ._ke {
     transition-duration: .5s;
   }
 
-  ._Sa {
+  ._ea {
     transition-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 }
-
-@layer _.b;
 /*# sourceMappingURL=Image.css.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 && 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"}
+{"mappings":"ACiHsB;EAAA;;;;EAAA;;;;EAAA;;;;EAKJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA","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

@@ -48,21 +48,21 @@ function $dbd6f0b2503b938c$var$reducer(state, action) {
             return state;
     }
 }
-const $dbd6f0b2503b938c$var$wrapperStyles = " bg __wb __xb";
+const $dbd6f0b2503b938c$var$wrapperStyles = " ca _oa _ha";
 const $dbd6f0b2503b938c$var$imgStyles = function anonymous(props) {
-    let rules = " .";
-    rules += ' _0a';
-    rules += ' lb';
-    rules += ' kb';
-    rules += ' __O-17zqamw';
-    rules += ' __P-17zqamw';
-    if (props.isRevealed) rules += ' _L-3t1y';
-    else rules += ' _L-3t1x';
-    if (props.isTransitioning) rules += ' _Pc';
-    else rules += ' _Pg';
-    rules += ' _R-3760fu';
-    if (props.isTransitioning) rules += ' _Sa';
-    else rules += ' _Sa';
+    let rules = " ";
+    rules += ' mc';
+    rules += ' fa';
+    rules += ' ef';
+    rules += ' _R40ub4c';
+    rules += ' _V40ub4c';
+    if (props.isRevealed) rules += ' _Lb';
+    else rules += ' _La';
+    if (props.isTransitioning) rules += ' _id';
+    else rules += ' _ic';
+    rules += ' _ke';
+    if (props.isTransitioning) rules += ' _ea';
+    else rules += ' _ea';
     return rules;
 };
 const $dbd6f0b2503b938c$export$3e431a229df88919 = /*#__PURE__*/ (0, $5AH9h$forwardRef)(function Image(props, domRef) {