@react-spectrum/s2 0.5.0 → 0.6.0

package/dist/IllustratedMessage.cjs

@@ -37,65 +37,65 @@ $parcel$export(module.exports, "IllustratedMessage", () => $55f1b8940d3e02db$exp
 
 const $55f1b8940d3e02db$var$illustratedMessage = function anonymous(props, overrides) {
     let rules = " .";
-    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r|k|o|p)[^\s]+/g) || [];
+    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 += ' _Zf';
-    rules += ' _c-bc1l9oh';
-    rules += ' _c-1uotwbwg';
-    rules += ' _c-eo0c6sf';
-    rules += ' _c-enzzrge';
-    rules += ' _c-enzykdd';
-    rules += ' _c-enzwzjc';
-    rules += ' _c-enzrfpb';
-    rules += ' _ca';
+    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';
     if (props.size === "XL") {
-        rules += ' _dbj';
-        rules += ' _di';
+        rules += ' _ebj';
+        rules += ' _ei';
     } else if (props.size === "L") {
-        rules += ' _dbh';
-        rules += ' _dg';
+        rules += ' _ebh';
+        rules += ' _eg';
     } else if (props.size === "S") {
-        rules += ' _dbd';
-        rules += ' _dc';
+        rules += ' _ebd';
+        rules += ' _ec';
     } else if (props.size === "XS") {
-        rules += ' _dbb';
-        rules += ' _da';
+        rules += ' _ebb';
+        rules += ' _ea';
     } else {
-        rules += ' _dbf';
-        rules += ' _de';
+        rules += ' _ebf';
+        rules += ' _ee';
     }
     if (!$r) {
         if (props.orientation === "horizontal") rules += ' r________V';
         else if (props.orientation === "vertical") rules += ' r______x';
     }
-    if (props.orientation === "horizontal") rules += ' __j-1t3dvev';
-    else if (props.orientation === "vertical") rules += ' __j-tu9mw5';
-    if (props.orientation === "horizontal") rules += ' __i-1efftez';
+    if (props.orientation === "horizontal") rules += ' __k-1yexyzb';
+    else if (props.orientation === "vertical") rules += ' __k-asng59';
+    if (props.orientation === "horizontal") rules += ' __j-1g2tm43';
     else if (props.orientation === "vertical") {
-        if (props.size === "L") rules += ' __i-xadfxd';
-        else rules += ' __i-fd9mh8';
+        if (props.size === "L") rules += ' __j-fpm35d';
+        else rules += ' __j-1lbesf0';
     }
-    if (props.orientation === "horizontal") rules += ' __h-883psa';
-    if (props.orientation === "horizontal") rules += ' _3a';
-    else if (props.orientation === "vertical") rules += ' _3c';
-    if (props.orientation === "vertical") rules += ' _jb';
+    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';
     return rules;
 };
 const $55f1b8940d3e02db$var$illustration = function anonymous(props) {
     let rules = " .";
-    rules += ' __a-1e6vo9b';
-    rules += ' __b-1e6vo9b';
-    rules += ' __c-1e6vo9b';
-    rules += ' __d-1e6vo9b';
+    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 += ' _4d';
+    rules += ' _5d';
     if (props.isDropTarget) {
         if (props.isPressed) rules += ' -rwx0fg_a-z';
         else if (props.isFocusVisible) rules += ' -rwx0fg_a-z';
@@ -111,72 +111,72 @@ const $55f1b8940d3e02db$var$illustration = function anonymous(props) {
 };
 const $55f1b8940d3e02db$var$heading = function anonymous(props) {
     let rules = " .";
-    rules += ' __a-go5hed';
-    rules += ' __b-go5hed';
-    rules += ' __c-go5hed';
-    rules += ' __d-go5hed';
+    rules += ' __b-1c6tcyh';
+    rules += ' __c-1c6tcyh';
+    rules += ' __d-1c6tcyh';
+    rules += ' __e-1c6tcyh';
     if (props.size === "L") {
-        rules += ' _c-bc1l9oh';
-        rules += ' _c-1uotwbwg';
-        rules += ' _c-eo0c6sf';
-        rules += ' _c-enzzrge';
-        rules += ' _c-enzykdd';
-        rules += ' _c-enzwzjc';
-        rules += ' _c-enzrfpb';
-        rules += ' _ca';
+        rules += ' _d-bc1l9oh';
+        rules += ' _d-1uotwbwg';
+        rules += ' _d-eo0c6sf';
+        rules += ' _d-enzzrge';
+        rules += ' _d-enzykdd';
+        rules += ' _d-enzwzjc';
+        rules += ' _d-enzrfpb';
+        rules += ' _da';
     } else if (props.size === "M") {
-        rules += ' _c-bc1l9oh';
-        rules += ' _c-1uotwbwg';
-        rules += ' _c-eo0c6sf';
-        rules += ' _c-enzzrge';
-        rules += ' _c-enzykdd';
-        rules += ' _c-enzwzjc';
-        rules += ' _c-enzrfpb';
-        rules += ' _ca';
+        rules += ' _d-bc1l9oh';
+        rules += ' _d-1uotwbwg';
+        rules += ' _d-eo0c6sf';
+        rules += ' _d-enzzrge';
+        rules += ' _d-enzykdd';
+        rules += ' _d-enzwzjc';
+        rules += ' _d-enzrfpb';
+        rules += ' _da';
     } else if (props.size === "S") {
-        rules += ' _c-bc1l9oh';
-        rules += ' _c-1uotwbwg';
-        rules += ' _c-eo0c6sf';
-        rules += ' _c-enzzrge';
-        rules += ' _c-enzykdd';
-        rules += ' _c-enzwzjc';
-        rules += ' _c-enzrfpb';
-        rules += ' _ca';
+        rules += ' _d-bc1l9oh';
+        rules += ' _d-1uotwbwg';
+        rules += ' _d-eo0c6sf';
+        rules += ' _d-enzzrge';
+        rules += ' _d-enzykdd';
+        rules += ' _d-enzwzjc';
+        rules += ' _d-enzrfpb';
+        rules += ' _da';
     }
     if (props.size === "L") {
-        rules += ' _dbm';
-        rules += ' _dj';
+        rules += ' _ebm';
+        rules += ' _ej';
     } else if (props.size === "M") {
-        rules += ' _dbl';
-        rules += ' _dk';
+        rules += ' _ebl';
+        rules += ' _ek';
     } else if (props.size === "S") {
-        rules += ' _dbh';
-        rules += ' _dg';
+        rules += ' _ebh';
+        rules += ' _eg';
     }
     if (props.size === "L") {
-        rules += ' _e-1x99dlod';
-        rules += ' _ed';
+        rules += ' _f-1x99dlod';
+        rules += ' _fd';
     } else if (props.size === "M") {
-        rules += ' _e-1x99dlod';
-        rules += ' _ed';
+        rules += ' _f-1x99dlod';
+        rules += ' _fd';
     } else if (props.size === "S") {
-        rules += ' _e-1x99dlod';
-        rules += ' _ed';
+        rules += ' _f-1x99dlod';
+        rules += ' _fd';
     }
     if (props.size === "L") {
-        rules += ' _f-1x99dlob';
-        rules += ' _fa';
+        rules += ' _g-1x99dlob';
+        rules += ' _ga';
     } else if (props.size === "M") {
-        rules += ' _f-1x99dlob';
-        rules += ' _fa';
+        rules += ' _g-1x99dlob';
+        rules += ' _ga';
     } else if (props.size === "S") {
-        rules += ' _f-1x99dlob';
-        rules += ' _fa';
+        rules += ' _g-1x99dlob';
+        rules += ' _ga';
     }
     if (props.size === "L") rules += ' ao';
     else if (props.size === "M") rules += ' ao';
     else if (props.size === "S") rules += ' ao';
-    rules += ' _4c';
+    rules += ' _5c';
     rules += ' Aa';
     rules += ' Ba';
     rules += ' ya';
@@ -186,69 +186,69 @@ const $55f1b8940d3e02db$var$heading = function anonymous(props) {
 const $55f1b8940d3e02db$var$content = function anonymous(props) {
     let rules = " .";
     if (props.size === "L") {
-        rules += ' _c-bc1l9oh';
-        rules += ' _c-1uotwbwg';
-        rules += ' _c-eo0c6sf';
-        rules += ' _c-enzzrge';
-        rules += ' _c-enzykdd';
-        rules += ' _c-enzwzjc';
-        rules += ' _c-enzrfpb';
-        rules += ' _ca';
+        rules += ' _d-bc1l9oh';
+        rules += ' _d-1uotwbwg';
+        rules += ' _d-eo0c6sf';
+        rules += ' _d-enzzrge';
+        rules += ' _d-enzykdd';
+        rules += ' _d-enzwzjc';
+        rules += ' _d-enzrfpb';
+        rules += ' _da';
     } else if (props.size === "M") {
-        rules += ' _c-bc1l9oh';
-        rules += ' _c-1uotwbwg';
-        rules += ' _c-eo0c6sf';
-        rules += ' _c-enzzrge';
-        rules += ' _c-enzykdd';
-        rules += ' _c-enzwzjc';
-        rules += ' _c-enzrfpb';
-        rules += ' _ca';
+        rules += ' _d-bc1l9oh';
+        rules += ' _d-1uotwbwg';
+        rules += ' _d-eo0c6sf';
+        rules += ' _d-enzzrge';
+        rules += ' _d-enzykdd';
+        rules += ' _d-enzwzjc';
+        rules += ' _d-enzrfpb';
+        rules += ' _da';
     } else if (props.size === "S") {
-        rules += ' _c-bc1l9oh';
-        rules += ' _c-1uotwbwg';
-        rules += ' _c-eo0c6sf';
-        rules += ' _c-enzzrge';
-        rules += ' _c-enzykdd';
-        rules += ' _c-enzwzjc';
-        rules += ' _c-enzrfpb';
-        rules += ' _ca';
+        rules += ' _d-bc1l9oh';
+        rules += ' _d-1uotwbwg';
+        rules += ' _d-eo0c6sf';
+        rules += ' _d-enzzrge';
+        rules += ' _d-enzykdd';
+        rules += ' _d-enzwzjc';
+        rules += ' _d-enzrfpb';
+        rules += ' _da';
     }
     if (props.size === "L") {
-        rules += ' _dbf';
-        rules += ' _de';
+        rules += ' _ebf';
+        rules += ' _ee';
     } else if (props.size === "M") {
-        rules += ' _dbf';
-        rules += ' _de';
+        rules += ' _ebf';
+        rules += ' _ee';
     } else if (props.size === "S") {
-        rules += ' _dbd';
-        rules += ' _dc';
+        rules += ' _ebd';
+        rules += ' _ec';
     }
-    if (props.size === "L") rules += ' _eb';
-    else if (props.size === "M") rules += ' _eb';
-    else if (props.size === "S") rules += ' _eb';
+    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 += ' _f-1x99dloc';
-        rules += ' _fb';
+        rules += ' _g-1x99dloc';
+        rules += ' _gb';
     } else if (props.size === "M") {
-        rules += ' _f-1x99dloc';
-        rules += ' _fb';
+        rules += ' _g-1x99dloc';
+        rules += ' _gb';
     } else if (props.size === "S") {
-        rules += ' _f-1x99dloc';
-        rules += ' _fb';
+        rules += ' _g-1x99dloc';
+        rules += ' _gb';
     }
     if (props.size === "L") rules += ' an';
     else if (props.size === "M") rules += ' an';
     else if (props.size === "S") rules += ' an';
-    rules += ' __a-1mod4sg';
-    rules += ' __b-1mod4sg';
-    rules += ' __c-1mod4sg';
-    rules += ' __d-1mod4sg';
-    rules += ' _4b';
+    rules += ' __b-drkpd0';
+    rules += ' __c-drkpd0';
+    rules += ' __d-drkpd0';
+    rules += ' __e-drkpd0';
+    rules += ' _5b';
     return rules;
 };
-const $55f1b8940d3e02db$var$buttonGroup = " . __a-3yyxn2 __b-3yyxn2 __c-3yyxn2 __d-3yyxn2 Af";
+const $55f1b8940d3e02db$var$buttonGroup = " . __b-x3oos2 __c-x3oos2 __d-x3oos2 __e-x3oos2 Af";
 const $55f1b8940d3e02db$export$d661ef89ad42d682 = /*#__PURE__*/ (0, $jcfA8$react.createContext)(null);
-function $55f1b8940d3e02db$var$IllustratedMessage(props, ref) {
+const $55f1b8940d3e02db$export$406dbc84c317ece0 = /*#__PURE__*/ (0, $jcfA8$react.forwardRef)(function IllustratedMessage(props, ref) {
     [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $55f1b8940d3e02db$export$d661ef89ad42d682);
     let domRef = (0, $jcfA8$reactspectrumutils.useDOMRef)(ref);
     let { children: children, orientation: orientation = 'horizontal', size: size = 'M', UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, isInDropZone: isInDropZone = false, isDropTarget: isDropTarget = false, ...otherProps } = props;
@@ -301,11 +301,7 @@ function $55f1b8940d3e02db$var$IllustratedMessage(props, ref) {
             children: children
         })
     });
-}
-/**
- * An IllustratedMessage displays an illustration and a message, usually
- * for an empty state or an error page.
- */ let $55f1b8940d3e02db$export$406dbc84c317ece0 = /*#__PURE__*/ (0, $jcfA8$react.forwardRef)($55f1b8940d3e02db$var$IllustratedMessage);
+});
 
 
 //# sourceMappingURL=IllustratedMessage.cjs.map

package/dist/IllustratedMessage.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAoCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYN,MAAM;AAUC,MAAM,0DAA4B,CAAA,GAAA,0BAAY,EAA6E;AAElI,SAAS,yCAAmB,KAAwC,EAAE,GAA2B;IAC/F,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,YACF,QAAQ,eACR,cAAc,oBACd,OAAO,uBACP,mBAAmB,kBACnB,YAAY,gBACZ,eAAe,qBACf,eAAe,OACf,GAAG,YACJ,GAAG;IAEJ,qBACE,gCAAC;QACE,GAAG,CAAA,GAAA,oCAAa,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,gCAAC,CAAA,GAAA,mCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,wCAAa;oBAAG;wBAAC,QAAQ,8BAAQ;yCAAC;kCAAa;wBAAI;oBAAE;iBAAE;gBACxD;oBAAC,CAAA,GAAA,wCAAa;oBAAG;wBAAC,QAAQ,8BAAQ;kCAAC;wBAAI;oBAAE;iBAAE;gBAC3C;oBAAC,CAAA,GAAA,6CAAkB;oBAAG;wBAAC,MAAM,SAAS,MAAM,MAAM;wBAAK,QAAQ,mCAAa;yCAAC;kCAAa;0CAAM;0CAAc;wBAAY;oBAAE;iBAAE;gBAC9H;oBAAC,CAAA,GAAA,4CAAiB;oBAAG;wBAAC,QAAQ;oBAAW;iBAAE;aAC5C;sBACA;;;AAIT;AAEA;;;CAGC,GACD,IAAI,4CAAsB,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE","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<IllustratedMessageContextProps, DOMRefValue<HTMLDivElement>>>(null);\n\nfunction 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\n/**\n * An IllustratedMessage displays an illustration and a message, usually\n * for an empty state or an error page.\n */\nlet _IllustratedMessage = /*#__PURE__*/ forwardRef(IllustratedMessage);\nexport {_IllustratedMessage as IllustratedMessage};\n"],"names":[],"version":3,"file":"IllustratedMessage.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAoCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYN,MAAM;AAUC,MAAM,0DAA4B,CAAA,GAAA,0BAAY,EAA6E;AAM3H,MAAM,4CAAqB,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,mBAAmB,KAAwC,EAAE,GAA2B;IAC1J,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,YACF,QAAQ,eACR,cAAc,oBACd,OAAO,uBACP,mBAAmB,kBACnB,YAAY,gBACZ,eAAe,qBACf,eAAe,OACf,GAAG,YACJ,GAAG;IAEJ,qBACE,gCAAC;QACE,GAAG,CAAA,GAAA,oCAAa,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,gCAAC,CAAA,GAAA,mCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,wCAAa;oBAAG;wBAAC,QAAQ,8BAAQ;yCAAC;kCAAa;wBAAI;oBAAE;iBAAE;gBACxD;oBAAC,CAAA,GAAA,wCAAa;oBAAG;wBAAC,QAAQ,8BAAQ;kCAAC;wBAAI;oBAAE;iBAAE;gBAC3C;oBAAC,CAAA,GAAA,6CAAkB;oBAAG;wBAAC,MAAM,SAAS,MAAM,MAAM;wBAAK,QAAQ,mCAAa;yCAAC;kCAAa;0CAAM;0CAAc;wBAAY;oBAAE;iBAAE;gBAC9H;oBAAC,CAAA,GAAA,4CAAiB;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<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.cjs.map"}