@react-spectrum/s2 0.9.2 → 0.10.1

package/dist/IllustratedMessage.css

@@ -1,25 +1,41 @@
 @layer _.a {
-  .se91 {
+  .se11 {
     display: grid;
   }
 
-  .va91 {
-    font-size: .6875rem;
+  .uk11 {
+    font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+    font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+    font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+    font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+    font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .vg91 {
-    font-size: 1.125rem;
+  .-_6BNtrc-a11 {
+    --fs: pow(1.125, -2);
   }
 
-  .Li91 {
+  .-_6BNtrc-e11 {
+    --fs: pow(1.125, 2);
+  }
+
+  ._Fd11 {
+    line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs))  - 10)) / 22) * .15), 2px);
+    line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs))  - 10)) / 22) * .15), 2px);
+    line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs))  - 10)) / 22) * .15), 2px);
+    line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs))  - 10)) / 22) * .15), 2px);
+    line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs))  - 10)) / 22) * .15), 2px);
+  }
+
+  .Li11 {
     max-width: calc(23.75rem * var(--s2-scale));
   }
 
-  .Lj91 {
+  .Lj11 {
     max-width: calc(33rem * var(--s2-scale));
   }
 
-  .CPmblS91 {
+  .CPmblS11 {
     grid-template-areas: ". illustration ."
                          ". . ."
                          "heading heading heading"
@@ -28,297 +44,307 @@
                          ". buttonGroup .";
   }
 
-  .CLJajOe91 {
+  .CLJajOe11 {
     grid-template-areas: "illustration . heading"
                          "illustration . ."
                          "illustration . content"
                          "illustration . buttonGroup";
   }
 
-  .E4ICjXd91 {
+  .E4ICjXd11 {
     grid-template-rows: min-content .75rem min-content .25rem min-content min-content;
   }
 
-  .EbQCrs91 {
+  .EbQCrs11 {
     grid-template-rows: min-content .5rem min-content .25rem min-content min-content;
   }
 
-  .ECIGjJc91 {
+  .ECIGjJc11 {
     grid-template-rows: 1fr .25rem 1fr;
   }
 
-  .DpdPjR91 {
+  .DpdPjR11 {
     grid-template-columns: 1fr .75rem auto;
   }
 
-  ._Da91 {
+  ._Da11 {
     justify-items: center;
   }
 
-  ._Dc91 {
+  ._Dc11 {
     justify-items: start;
   }
 
-  ._Wa91 {
+  ._Wa11 {
     text-align: center;
   }
 
-  .zTZ8xtd91 {
+  .zTZ8xtd11 {
     grid-column-start: illustration;
   }
 
-  .yTZ8xtd91 {
+  .yTZ8xtd11 {
     grid-column-end: illustration;
   }
 
-  .BTZ8xtd91 {
+  .BTZ8xtd11 {
     grid-row-start: illustration;
   }
 
-  .ATZ8xtd91 {
+  .ATZ8xtd11 {
     grid-row-end: illustration;
   }
 
-  ._dc91 {
+  ._dc11 {
     align-self: center;
   }
 
-  .-_8sjo0b-pt91 {
+  .-_8sjo0b-pt11 {
     --iconPrimary: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
   }
 
-  .-_8sjo0b-pu91 {
+  .-_8sjo0b-pu11 {
     --iconPrimary: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #5681ff);
   }
 
-  .zPCJngb91 {
+  .zPCJngb11 {
     grid-column-start: heading;
   }
 
-  .yPCJngb91 {
+  .yPCJngb11 {
     grid-column-end: heading;
   }
 
-  .BPCJngb91 {
+  .BPCJngb11 {
     grid-row-start: heading;
   }
 
-  .APCJngb91 {
+  .APCJngb11 {
     grid-row-end: heading;
   }
 
-  .vp91 {
-    font-size: 1rem;
+  .-_6BNtrc-d11 {
+    --fs: pow(1.125, 1);
   }
 
-  .vi91 {
-    font-size: 1.25rem;
+  .-_6BNtrc-f11 {
+    --fs: pow(1.125, 3);
   }
 
-  .vj91 {
-    font-size: 1.375rem;
+  .-_6BNtrc-g11 {
+    --fs: pow(1.125, 4);
   }
 
-  .wd91 {
+  .wd11 {
     font-variation-settings: "wght" 700;
   }
 
-  .xd91 {
+  .xd11 {
     font-weight: 700;
   }
 
-  ._Fa91 {
-    line-height: 1.3;
+  ._Fd11 {
+    line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs))  - 10)) / 22) * .15), 2px);
+    line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs))  - 10)) / 22) * .15), 2px);
+    line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs))  - 10)) / 22) * .15), 2px);
   }
 
-  .po91 {
+  .po11 {
     color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
   }
 
-  ._dd91 {
+  ._dd11 {
     align-self: end;
   }
 
-  .Jy91 {
+  .Jy11 {
     margin-top: 0;
   }
 
-  .Gy91 {
+  .Gy11 {
     margin-bottom: 0;
   }
 
-  .Iy91 {
+  .Iy11 {
     margin-inline-start: 0;
   }
 
-  .Hy91 {
+  .Hy11 {
     margin-inline-end: 0;
   }
 
-  .ug91 {
-    font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+  .uk11 {
+    font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+    font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+    font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .vb91 {
-    font-size: .75rem;
+  .-_6BNtrc-b11 {
+    --fs: pow(1.125, -1);
   }
 
-  .vd91 {
-    font-size: .875rem;
+  .-_6BNtrc-c11 {
+    --fs: pow(1.125, 0);
   }
 
-  .wb91 {
+  .vx11 {
+    font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
+  }
+
+  .wb11 {
     font-variation-settings: "wght" 400;
   }
 
-  .xb91 {
+  .xb11 {
     font-weight: 400;
   }
 
-  ._xa91 {
+  ._xa11 {
     font-synthesis-weight: none;
   }
 
-  ._Fb91 {
+  ._Fb11 {
     line-height: 1.5;
   }
 
-  .pt91 {
+  .pt11 {
     color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
   }
 
-  .zk52g2d91 {
+  .zk52g2d11 {
     grid-column-start: content;
   }
 
-  .yk52g2d91 {
+  .yk52g2d11 {
     grid-column-end: content;
   }
 
-  .Bk52g2d91 {
+  .Bk52g2d11 {
     grid-row-start: content;
   }
 
-  .Ak52g2d91 {
+  .Ak52g2d11 {
     grid-row-end: content;
   }
 
-  ._de91 {
+  ._de11 {
     align-self: start;
   }
 
-  .zmlKpq91 {
+  .zmlKpq11 {
     grid-column-start: buttonGroup;
   }
 
-  .ymlKpq91 {
+  .ymlKpq11 {
     grid-column-end: buttonGroup;
   }
 
-  .BmlKpq91 {
+  .BmlKpq11 {
     grid-row-start: buttonGroup;
   }
 
-  .AmlKpq91 {
+  .AmlKpq11 {
     grid-row-end: buttonGroup;
   }
 
-  .JC91 {
+  .JC11 {
     margin-top: 1rem;
   }
 }
 
 @layer _.b {
-  .wfd91:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
-    font-variation-settings: "wght" 700;
+  .wX0cczbc11:is(:lang(ja), :lang(ko), :lang(zh)) {
+    font-variation-settings: "wght" 500;
   }
 
-  .xfd91:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
-    font-weight: 700;
+  .xX0cczbc11:is(:lang(ja), :lang(ko), :lang(zh)) {
+    font-weight: 500;
   }
 
-  ._xfa91:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._xX0cczba11:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-synthesis-weight: none;
   }
 
-  ._Ffb91:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
-    line-height: 1.5;
+  ._FezxGHba11:is(:lang(ar), :lang(he)) {
+    line-height: 1.3;
   }
 
-  .uch91:lang(ar) {
+  .uch11:lang(ar) {
     font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._Ffc91:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._FnuYUwec11:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.7;
   }
 }
 
 @layer _.c {
-  .udi91:lang(he) {
+  .wfd11:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+    font-variation-settings: "wght" 700;
+  }
+
+  .xfd11:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+    font-weight: 700;
+  }
+
+  ._xfa11:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+    font-synthesis-weight: none;
+  }
+
+  ._FnuYUweb11:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+    line-height: 1.5;
+  }
+
+  .udi11:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .uea91:lang(ja) {
+  .wfX0cczbc11:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+    font-variation-settings: "wght" 500;
+  }
+
+  .xfX0cczbc11:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+    font-weight: 500;
+  }
+
+  ._xfX0cczba11:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+    font-synthesis-weight: none;
+  }
+
+  .uea11:lang(ja) {
     font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
   }
 }
 
 @layer _.e {
-  .ugb91:lang(ko) {
+  .ugb11:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd91:lang(zh) {
+  .uhd11:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje91:lang(zh-hant) {
+  .uje11:lang(zh-hant) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.h {
-  .uic91:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
-    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+  .u2NhKxcl11:lang(zh-HK) {
+    font-family: adobe-clean-han-hong-kong, source-han-hong-kong, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
-@layer _.b.s {
-  @media not ((hover: hover) and (pointer: fine)) {
-    .vsc91 {
-      font-size: .8125rem;
-    }
-
-    .vsj91 {
-      font-size: 1.375rem;
-    }
-
-    .vsh91 {
-      font-size: 1.1875rem;
-    }
-
-    .vsl91 {
-      font-size: 1.5rem;
-    }
-
-    .vsm91 {
-      font-size: 1.6875rem;
-    }
-
-    .vse91 {
-      font-size: .9375rem;
-    }
-
-    .vsf91 {
-      font-size: 1.0625rem;
-    }
+@layer _.i {
+  .uic11:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
   }
 }
 /*# sourceMappingURL=IllustratedMessage.css.map */

package/dist/IllustratedMessage.css.map

@@ -1 +1 @@
-{"mappings":"AC8C2B;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;;EAAA;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwDN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAYL;;;;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;;;;EAYI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7FO;EAoEX;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaA;;;;EAAA;;;;;AAjFW;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAoEX;;;;IAAA;;;;IAAA;;;;IAaA;;;;IAAA","sources":["8de053f3c18af99e","packages/@react-spectrum/s2/src/IllustratedMessage.tsx"],"sourcesContent":["@import \"a1699b32f8f5f832\";\n@import \"0905d73dcc75523b\";\n@import \"b0b8309ded54f11f\";\n@import \"dce39f72f1fcef87\";\n@import \"7c612a8ca86186fd\";\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 {ButtonGroupContext} from './ButtonGroup';\nimport {ContentContext, HeadingContext} from './Content';\nimport {ContextValue, Provider} from 'react-aria-components';\nimport {controlFont, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\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  font: controlFont(),\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  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.css.map"}
+{"mappings":"AC8C2B;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;;EAAA;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwDN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAYL;;;;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;;;;EAYI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7FO;EAoEX;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaA;;;;EAAA;;;;;AAjFW;EAoEX;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaA;;;;;AAjFW;EAoEX;;;;EAAA;;;;EAAA;;;;EAaA;;;;;AAjFW;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["8de053f3c18af99e","packages/@react-spectrum/s2/src/IllustratedMessage.tsx"],"sourcesContent":["@import \"a1699b32f8f5f832\";\n@import \"0905d73dcc75523b\";\n@import \"b0b8309ded54f11f\";\n@import \"dce39f72f1fcef87\";\n@import \"7c612a8ca86186fd\";\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 {ButtonGroupContext} from './ButtonGroup';\nimport {ContentContext, HeadingContext} from './Content';\nimport {ContextValue, Provider} from 'react-aria-components';\nimport {controlFont, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\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  font: controlFont(),\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  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.css.map"}